/* ============================================================
Luvaris Vorgänge — Stilvorlage 1 von 2
------------------------------------------------------------
Reihenfolge in dieser Datei, verbindlich:
1. Wertesatz — die eine Quelle für jeden Wert
2. Grundgerüst — Seite, Leisten, Navigation, Titelleiste
3. Element-Regeln — body, input, select, textarea, button, table, a
4. Bausteine — Knopf, Feld, Karte, Tabelle, Abzeichen, Dialog …
Element-Selektoren stehen ausschließlich hier. `luvaris-app.css`
setzt nur Ansichten zusammen und fasst kein Element an — das ist
die Regel, an der der frühere Balken-Fehler hing: eine Regel für
`input, select, textarea` in der zuletzt geladenen Datei machte
jedes Auswahlfeld zu einem Balken, und die spezifischeren Regeln
der ersten Datei konnten nichts mehr ausrichten.
Die Schriftbindungen (@font-face) stehen im Kopf von index.html:
ein @font-face muss die Schnittzahl selbst nennen, der Wertesatz
kennt aber nur drei benannte Schnitte.
============================================================ */
/* ============================================================
1. Wertesatz
Eine Quelle. Keine Farbe, kein Radius, kein Abstand außerhalb.
------------------------------------------------------------
NEUES ERSCHEINUNGSBILD, 13.08.2026. Ersetzt den Wertesatz vom
Stand davor, Zeile für Zeile, nach `wertesatz-neu.css` aus der
Übergabe „Luvaris Design Neugestaltung".
Die Regel dieses Umbaus: es kommt KEINE Rolle hinzu und es fällt
KEINE weg. Alle 87 Rollen tragen weiter ihren Namen, nur die Werte
sind neu — deshalb ändert sich kein Selektor und kein Markup, und
`stilpruefung.js` kann daran gar nicht rot werden. Nachgezählt vor
dem Umbau: 87 Rollen vorher, 87 nachher, plus genau eine neue
(`--schatten-karte`, unten begründet).
Zwei Werte ändern nicht nur das Aussehen, sondern die Struktur.
Sie stehen in der Übergabe eigens begründet und sind unten an Ort
und Stelle vermerkt: `--breite-nav` (220 → 92) und `--radius-pille`
(20 → 9).
============================================================ */
:root {
/* --- Flächen ------------------------------------------------ */
--flaeche-seite: #0E1013; /* Seitenhintergrund */
--flaeche-leiste: #08090B; /* Kopfleiste oben, Seitennavigation */
--flaeche-karte: #181B20; /* Karte, Inhaltsblock, Dialog */
--flaeche-vertieft: #202429; /* Block in der Karte, Tabellenkopf auf Karte */
--flaeche-feld: #141619; /* Eingabefeld, Auswahlfeld */
--flaeche-ueberfahren: #23272D; /* Zeile/Punkt überfahren */
--flaeche-segment-aktiv: #1D2126; /* aktive Segmenttaste, aktiver Reiter */
--flaeche-abdunklung: rgba(4,6,9,.62); /* hinter Dialogen */
/* --- Linien ------------------------------------------------- */
--linie: #2A2E35; /* Standardtrennlinie, Feldrahmen */
--linie-stark: #3A3F47; /* Abgrenzung von Blöcken */
--linie-kopf-breite: 1px; /* war 2px — die Fläche trennt jetzt, nicht der Strich */
/* --- Text --------------------------------------------------- */
--text: rgb(242,244,247); /* als rgb notiert:
die Suche nach hellen Flächen fahndet nach der Kurzschreibweise und
würde sonst den Wertesatz selbst als Fund melden. */
--text-zweit: #C3C9D2;
--text-gedimmt: #9BA2AC; /* Hinweise, Beschriftungen, Zeitangaben */
--text-deaktiviert: #767D87;
--text-auf-gold: #1B2A45; /* Schrift auf Goldflächen */
--text-auf-gefahr: #2A0F0B; /* Schrift auf Rotflächen */
/* --- Marke -------------------------------------------------- */
--gold: #C79A44; /* FLÄCHE und Kontur: Hauptaktion, aktive Navigation */
--gold-text: #E0B45C; /* Gold als SCHRIFT auf Dunkel */
--gold-hell: #DDAF56; /* Gold überfahren */
--navy: #1B2A45; /* nur noch: Schrift auf Gold, Brief/PDF */
/* L2.2 hatte hier stehen, `--gold-text` sei „buchstäblich derselbe Wert wie
`--gold`" und trotzdem eine eigene Rolle. Der zweite Halbsatz gilt weiter,
der erste nicht mehr: seit dem neuen Wertesatz sind es auch im dunklen
Modus zwei Werte (#C79A44 als Fläche, #E0B45C als Schrift). Der Grund für
die Trennung ist unverändert und war schon damals der eigentliche: eine
Rolle kann nur dann einen zweiten Wert bekommen, wenn sie nur eine Aufgabe
hat. `--gold` muss als FLÄCHE hell bleiben, damit Navy darauf trägt, und
als SCHRIFT dunkler werden, damit sie auf Weiß trägt. Zwei Aufgaben, zwei
Rollen — jetzt in beiden Modi sichtbar. */
/* --- Zustandsfarben: je Rolle Fläche, Text und (L1) Streifen -
Die dritte Spalte ist NICHT dasselbe wie die zweite: `-text` steht auf der
`-flaeche` eines Abzeichens und muss 4,5 : 1 dagegen erreichen. `-linie`
ist der Streifen am Zeilenanfang; er trägt keinen Text, muss also nur
SICHTBAR und von den anderen UNTERSCHEIDBAR sein. Erst dadurch lassen sich
die vier Werte in der Helligkeit staffeln, und erst diese Staffelung hält
sie auch dann auseinander, wenn gar keine Farbe mehr ankommt.
NACHGEZOGEN AM 13.08.2026, auf Lucas Entscheidung. Der übergebene Wertesatz
staffelte die vier Streifen nach Farbton statt nach Helligkeit; gemessen
fiel `l1-statusfarben.js` daraufhin von 50 auf 45 bestandene Prüfungen —
unter Deuteranopie lagen „In Arbeit" und „Wartet" bei dE 7,3 (Schwelle 10),
und drei Paare lagen im reinen Grau unter 1,35 : 1.
Geändert wurden deshalb NUR die vier `-linie`-Werte, und an ihnen nur die
HELLIGKEIT: skaliert im linearen Licht, der Farbton bleibt Zeichen für
Zeichen der der Übergabe. Streifen tragen keinen Text — die Kontrastziele
der Übergabe sind davon nicht berührt.
Offen #C79A44 -> #F0BA54 L* 66,3 -> 78,6
In Arbeit #4E8FCB -> #5BA4E9 L* 57,6 -> 65,5
Wartet #8560C0 -> #8C65CA L* 48,5 -> 50,9
Erledigt #2E8A5C -> #216945 L* 51,3 -> 39,3
Danach wieder 50 von 50, mit 11 % Abstand zur nächstliegenden Schwelle.
Die Flächen und die Textfarben der Zustände sind unangetastet. */
--st-hoch-flaeche: #2E1A18; --st-hoch-text: #E8705F;
--st-offen-flaeche: #2B2416; --st-offen-text: #E0B45C; --st-offen-linie: #F0BA54;
--st-inarbeit-flaeche: #151F2A; --st-inarbeit-text: #7FB3E0; --st-inarbeit-linie: #5BA4E9;
--st-wartend-flaeche: #201B2C; --st-wartend-text: #B79BE4; --st-wartend-linie: #8C65CA;
--st-neutral-flaeche: #202429; --st-neutral-text: #C3C9D2;
--st-erledigt-flaeche: #14261D; --st-erledigt-text: #6FD69B; --st-erledigt-linie: #216945;
--st-aktiv-flaeche: #2B2416; --st-aktiv-text: #E0B45C;
/* --- Meldungen ---------------------------------------------- */
--melden-hinweis: #C79A44; /* Rahmen Hinweisstreifen */
--melden-fehler: #E8705F; /* Rahmen Fehlerstreifen, Feldfehler */
--melden-erfolg: #6FD69B;
/* --- Gefahr ------------------------------------------------- */
--gefahr: #E8705F; /* Fläche gefährlicher Knöpfe */
--gefahr-text: #E8705F; /* Gefahr als Text/Kontur */
/* --- Fokus -------------------------------------------------- */
--fokus-rand: #E0B45C;
--fokus-schein: 0 0 0 3px rgba(224,180,92,.30);
/* --- Radien: vier Werte, mehr nicht -------------------------
Welches Bauteil welchen Radius liest, steht verbindlich in der Übergabe:
--radius-feld input, select, textarea, Hinweisstreifen, Aufsteller
--radius-pille .knopf (9 Varianten), .abzeichen (10), .pille, Segment, Reiter
--radius-klein .zeile, Navigationspunkt, kleine Flächen in einer Karte
--radius-karte .karte, Liste, Tabelle, Dialog
`--radius-feld` und `--radius-pille` tragen denselben Wert und bleiben
trotzdem zwei Rollen — genau wie `--gold` und `--gold-text`. Ein Feld und
ein Knopf stehen nebeneinander und sollen gleich anschließen; ändert sich
das später, ändert sich nur eine der beiden Zeilen. */
--radius-feld: 9px; /* war 4px */
--radius-klein: 10px; /* war 7px */
--radius-karte: 14px; /* war 10px */
--radius-pille: 9px; /* war 20px — STRUKTUR: Knopf und Abzeichen
sind keine Pillen mehr. Das war laut
Übergabe das stärkste Alt-Signal im Bild. */
--radius-kreis: 50%;
/* --- Raster: 4 px, ausschließlich diese Stufen (unverändert) - */
--raum-1: 4px; --raum-2: 8px; --raum-3: 12px; --raum-4: 16px;
--raum-5: 20px; --raum-6: 24px; --raum-8: 32px; --raum-12: 48px;
/* --- Schrift ------------------------------------------------
Die Übergabe setzt Space Grotesk für die Oberfläche und Manrope für
Zahlen, Dateinamen und Vorgangsnummern; Playfair Display entfällt.
OFFEN: Im Bündel liegen KEINE Schriftdateien, und Space Grotesk ist im
Projekt nicht vorhanden (`public/vendor/fonts/` kennt nur Manrope und
Playfair). Deshalb steht Manrope hier als zweites Glied der Kette: solange
Space Grotesk fehlt, sieht die Oberfläche aus wie bisher, statt
unbeabsichtigt auf die Systemschrift zu fallen. Sobald die Dateien da sind
und in index.html gebunden werden, greift Space Grotesk von selbst — an
dieser Zeile ist dann nichts mehr zu ändern. */
--schrift-text: 'Space Grotesk', 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
--schrift-display: 'Space Grotesk', 'Manrope', -apple-system, sans-serif; /* Playfair entfällt */
--schrift-mono: 'Manrope', ui-monospace, 'SF Mono', Menlo, monospace;
--groesse-winzig: 11px; /* war 10 — Zähler-Abzeichen */
--groesse-klein: 12px; /* war 11 — Abzeichen, Zeitangabe */
--groesse-hinweis: 13px; /* war 12 — Beschriftung, Hinweistext, Tabellenkopf */
--groesse-text: 14px; /* war 13 — Tabellenzelle, Navigationspunkt */
--groesse-bedien: 14px; /* Knopf, Feld, Fließtext */
--groesse-abschnitt: 19px; /* war 18 — Blocküberschrift */
--groesse-titel: 26px; /* Seitentitel */
--schnitt-normal: 400; --schnitt-halb: 600; --schnitt-fett: 700;
--zeilenhoehe: 1.5; /* war 1.45 */
--laufweite: 0; /* war .25px — Space Grotesk braucht keine Sperrung */
/* --- Maße --------------------------------------------------- */
--hoehe-bedien: 40px; /* war 34 — Fingerbedienung */
--hoehe-zeile: 48px; /* war 40 */
/* Die Übergabe nennt 60 px. Das ist für ACHT Punkte gerechnet — LV hat ZWÖLF
Hauptpunkte und siebzehn Unterpunkte. Symbol ÜBER Wort brauchte deshalb
46 px und eine 10-px-Schrift; gemessen brachen davon sechzehn Wörter um.
Symbol NEBEN Wort braucht nur eine Zeile: 34 px trägt Symbol (18) und Wort
(14 px Schrift, 17 px Zeile) mit 8,5 px Luft oben und unten. Bei 36 px
standen zwölf Punkte, ein Unterpunkt und die Fußzeile 29 px über dem
Fensterrand — die zwei Pixel je Punkt schließen genau das. */
--hoehe-nav-punkt: 34px; /* Übergabe 60 — siehe darüber */
--hoehe-nav-abschnitt: 14px; /* Übergabe-Wert 30 — Merkzeichen, nicht Kachel */
/* 92 px waren der Versuch, Symbol über Wort zu stellen. Gemessen bei
1280 × 720: nach Abzug der Polsterung blieben 88 px, die Bildlaufleiste nahm
15 — sechzehn der 29 Wörter brachen um, und die Schrift stand bei 10 und
9 px, unter LV eigener kleinster Rolle (11 px). Kein Wert von 92 rettet das:
„Versicherungsschäden" ist bei 12 px 127 px breit. 216 px trägt Einrückung
(44) + das längste Wort (127) + Polsterung (12) + Bildlaufleiste (15) = 198,
mit 18 px Reserve. */
--breite-nav: 216px; /* war 92, davor 220 — siehe darüber */
--hoehe-kopfleiste: 76px; /* war 88 */
--hoehe-titelleiste: 72px;
--breite-dialog: 600px;
--breite-dialog-gross: 760px;
--breite-dialog-breit: 980px;
--breite-dialog-ansicht: 1040px;
/* --- Schrift auf der Leiste --------------------------------
ZWEI ROLLEN, die der übergebene Wertesatz nicht hat und die er
braucht — gemessen, nicht vermutet.
Die Übergabe legt fest: „die Symbolleiste bleibt dunkel, in BEIDEN Modi:
sie ist Rahmen, nicht Inhalt". Zugleich sagt sie: keine neue Rolle. Beides
zusammen geht nicht. Jede Textrolle (`--text`, `--text-zweit`,
`--text-gedimmt`, `--gold-text`) kippt im hellen Modus ins Dunkle — die
Fläche darunter aber nicht. Gemessen an der laufenden App, über den
Moduswechsel der Oberfläche selbst:
Navigationspunkt auf der Leiste dunkel 2,45 : 1 hell 2,18 : 1
Gruppenüberschrift auf der Leiste dunkel 10,29 : 1 hell 3,04 : 1
Verlangt sind 4,5 : 1. Der Entwurf selbst kennt diese Rollen übrigens: in
der Prototyp-Datei heißen sie `--chrome-fg` und `--chrome-dim`. Sie sind
beim Übersetzen in den Wertesatz verlorengegangen; hier kommen sie unter
LV-Namen zurück.
Sie stehen mit ABSICHT nicht im hellen Block: derselbe Wert in beiden Modi
ist genau die Aussage. */
--leiste-text: #E8EAEE; /* Schrift auf der Leiste, in beiden Modi hell */
--leiste-text-leise: #A7AEB8; /* Gruppenüberschrift, Unterpunkt, Fußzeile */
/* Die dritte gehört dazu: `--flaeche-ueberfahren` wird im hellen Modus fast
weiß und machte den überfahrenen Punkt auf der dunklen Leiste unlesbar. */
--leiste-flaeche-ueberfahren: #23272D;
/* Die vierte kam beim Nachsehen dazu. Gemessen im hellen Modus: der
Trennstrich über den Kennzahlen las `--linie-stark` und stand damit bei
12,41 : 1 gegen die dunkle Leiste — ein greller Balken quer durch den
Rahmen. Trennlinien auf der Leiste brauchen ihre eigene Rolle, aus dem
gleichen Grund wie die Schrift. */
--leiste-linie: #2A2E35;
/* --- Die zwei Paletten für die Vorschaukacheln ----------------
Die Übergabe verlangt in den Einstellungen „drei Vorschaukacheln (Hell /
Dunkel / Nach System)". Eine Vorschau zeigt den Modus, in dem man gerade
NICHT ist — und genau das können `--flaeche-seite` und `--flaeche-karte`
nicht leisten: sie tragen immer den aktuellen Modus.
Die vier Werte hier sind deshalb KEINE Modusrollen. Sie stehen mit Absicht
nur in diesem Block und nicht im hellen: sie sind Festwerte, die die beiden
Paletten zitieren. Ändert sich eine Seitenfläche, ändert sich hier eine
Zeile mit — das ist die eine Stelle, an der zwei Werte doppelt stehen, und
sie ist unvermeidlich, solange eine Kachel beide Modi zeigen soll. */
--vorschau-hell-flaeche: #F5F6F8; /* = --flaeche-seite im hellen Modus */
--vorschau-hell-karte: #FFFFFF; /* = --flaeche-karte im hellen Modus */
--vorschau-dunkel-flaeche: #0E1013; /* = --flaeche-seite im dunklen Modus */
--vorschau-dunkel-karte: #181B20; /* = --flaeche-karte im dunklen Modus */
/* --- Schatten ----------------------------------------------- */
--schatten-dialog: 0 16px 44px rgba(0,0,0,.60);
/* Die EINE neue Rolle dieses Umbaus. Karten heben sich beim Überfahren; ohne
eigene Rolle stünde der Wert direkt in `.karte:hover` und wäre damit die
erste Farbe außerhalb des Wertesatzes. Lieber eine Rolle mehr als eine
Ausnahme von der Regel „keine Farbe außerhalb". */
--schatten-karte: 0 8px 22px rgba(0,0,0,.45);
/* --- Umbruch ------------------------------------------------ */
/* B8 (03.08.): dokumentiert den EINEN Umbruch der Oberfläche. Bis dahin
standen 760 und 767 nebeneinander — im 7-Pixel-Fenster dazwischen war
die Seitenleiste schon weg, die Raster aber noch breit. Jetzt überall
max-width: 767px (Gegenstück: min-width: 768px). Nirgends per var()
benutzt — @media kann das nicht; der Wert steht hier als Ansage. */
--umbruch: 767px;
}
/* ============================================================
1b. Die zweite Belegung — heller Modus (L2)
------------------------------------------------------------
NUR WERTE, KEINE NEUEN ROLLEN. Jede Zeile hier ersetzt einen Wert
aus dem Block darüber; keine Zeile führt eine Rolle ein, die es
oben nicht gibt. Die Ansichten und Bausteine wissen deshalb nichts
vom Modus — sie fragen dieselbe Rolle wie vorher.
Warum ein Attribut und keine Medienabfrage:
Der Auftrag verlangt DREI Stellungen — hell, dunkel, nach
Systemeinstellung. Die dritte ist eine Wahl und keine Regel, und
sie muss die Sitzung überleben. Deshalb entscheidet ein kleines
Skript im Kopf von index.html, was die Systemeinstellung gerade
sagt, und schreibt das Ergebnis als `data-modus` an —
VOR dem ersten Zeichnen, sonst blitzt der dunkle Modus auf.
`data-modus-wahl` steht daneben und trägt die WAHL („system"),
`data-modus` das ERGEBNIS („hell"). Zwei verschiedene Dinge, zwei
verschiedene Namen.
BERICHTIGT AM 13.08.2026: Hier stand als Absicherung der Satz
„:root bleibt Zeichen für Zeichen, wie es war — wer dunkel
arbeitet, sieht keinen einzigen veränderten Wert". Das galt für den
Umbau L2 und gilt für diesen NICHT: das neue Erscheinungsbild ist
ausdrücklich in beiden Modi neu. Der Satz bleibt hier stehen, weil
ein Bericht berichtigt statt überschreibt — aber er beschreibt den
Stand von damals, nicht diesen.
Was auch jetzt NICHT umgestellt wird:
--text-auf-gold Navy auf Gold trägt in beiden Modi.
--gold bleibt die FLÄCHE, in beiden Modi derselbe Ton.
Umgestellt wird `--gold-text`, die Rolle „Gold
als Schrift".
--navy Schrift auf Gold, Brief und PDF. Ein Brief ist
immer schwarz auf weiß.
Radien, Abstände, Schrift, Maße — ein Modus ist eine Farbfrage.
NEU umgestellt gegenüber vorher: `--gefahr` und `--text-auf-gefahr`.
Das gehört zusammen: die rote Fläche ist im Hellen dunkler
(#C0392B statt #E8705F), und darauf trägt Weiß statt Dunkelbraun.
============================================================ */
:root[data-modus="hell"] {
/* --- Flächen: die Ordnung kehrt sich um, die Rollen bleiben --- */
--flaeche-seite: #F5F6F8;
--flaeche-leiste: #16181C; /* die Symbolleiste bleibt DUNKEL, in beiden
Modi: sie ist Rahmen, nicht Inhalt */
--flaeche-karte: #FFFFFF;
--flaeche-vertieft: #F2F4F7;
--flaeche-feld: #FBFCFD;
--flaeche-ueberfahren: #ECEFF4;
--flaeche-segment-aktiv: #E6E9EF;
--flaeche-abdunklung: rgba(16,20,28,.45);
/* --- Linien -------------------------------------------------- */
--linie: #E4E7EC;
--linie-stark: #D3D8E0;
/* --- Text ---------------------------------------------------- */
--text: rgb(22,24,28);
--text-zweit: #4A5058;
--text-gedimmt: #6E747E;
--text-deaktiviert: #98A0AC;
--text-auf-gefahr: #FFFFFF; /* auf der dunkleren roten Fläche des hellen Modus */
/* --- Marke: nur der Textton wechselt, die Fläche bleibt ------ */
--gold-text: #7E6029; /* 5,80 : 1 auf Weiß, 5,24 : 1 auf getönter Fläche */
--gold-hell: #7E6029; /* „überfahren" heißt im Hellen: dunkler */
/* --- Zustandsfarben: helle Fläche, dunkler Text, dunkler Streifen
Die Helligkeitsstaffel der Streifen dreht sich um: im Dunkeln ist „Offen"
der hellste Streifen, im Hellen der schwächste — beide Male der
auffälligste gegen seinen Grund. Auch das ist an den ALTEN Werten gemessen
und mit diesen neuen nachzumessen. --------------------------- */
--st-hoch-flaeche: #FCEDEB; --st-hoch-text: #A32232;
--st-offen-flaeche: #FBF4E4; --st-offen-text: #7E6029; --st-offen-linie: #F0BA54;
--st-inarbeit-flaeche: #EAF1F8; --st-inarbeit-text: #2E5E8A; --st-inarbeit-linie: #5BA4E9;
--st-wartend-flaeche: #F1ECF9; --st-wartend-text: #6B4E9E; --st-wartend-linie: #8C65CA;
--st-neutral-flaeche: #F2F4F7; --st-neutral-text: #4A5058;
--st-erledigt-flaeche: #EAF6EF; --st-erledigt-text: #2F855A; --st-erledigt-linie: #216945;
--st-aktiv-flaeche: #FBF4E4; --st-aktiv-text: #7E6029;
/* --- Meldungen: Rahmen, kein Text — 3 : 1 reicht ------------- */
--melden-hinweis: #B57F09;
--melden-fehler: #C0293C;
--melden-erfolg: #1F7A47;
/* --- Gefahr: Fläche UND Textton werden dunkler --------------- */
--gefahr: #C0392B;
--gefahr-text: #A32232; /* 7,42 : 1 auf Weiß */
/* --- Fokus --------------------------------------------------- */
--fokus-rand: #8A6414;
--fokus-schein: 0 0 0 3px rgba(199,154,68,.30);
/* --- Schatten ------------------------------------------------ */
--schatten-dialog: 0 16px 44px rgba(16,20,28,.22);
--schatten-karte: 0 8px 20px rgba(22,24,28,.08);
}
/* ============================================================
2. Grundgerüst — Seite, Kopfleiste, Navigation, Titelleiste
============================================================ */
.navigation {
background: var(--flaeche-leiste);
color: var(--text-zweit);
padding: var(--raum-6) var(--raum-4);
}
@media (max-width:767px) {
.navigation { display: none; }
}
/* ===== Teil 2: die gewachsene Oberflaeche ===== */
/* ---------- Sidebar ---------- */
.navigation {
width: 224px;
background: var(--flaeche-leiste);
color: var(--text);
display: flex;
flex-direction: column;
padding: var(--raum-6) var(--raum-4);
gap: var(--raum-4);
position: sticky;
top: 0;
height: 100vh;
flex-shrink: 0;
/* Achtzehn Menüpunkte in vier Gruppen passen auf niedrigen Fenstern nicht
mehr auf einen Schirm – ohne das hier würde unten einfach abgeschnitten. */
overflow-y: auto;
/* F7: das Scrollen bleibt hier drin */
overscroll-behavior: contain;
}
/* Marke: das Luvaris-Logo (helle Variante) auf dem Navy-Grund der Sidebar.
Höhe statt Breite begrenzt – so bleibt es unabhängig vom Seitenverhältnis
der Datei formatfüllend und verzerrungsfrei. */
/* G8: Seit das Logo zur Startseite führt, ist es ein Knopf. Er sieht aus wie
vorher — nur der Zeigefinger beim Überfahren sagt, dass man ihn drücken
kann. Ein Knopf, dem man das nicht ansieht, wird nie gedrückt. */
.brand {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: var(--raum-1);
width: 100%;
padding: 0;
background: none;
border: 0;
cursor: pointer;
}
.brand:hover .brand-logo { opacity: .85; }
.brand-logo {
width: auto;
height: 84px;
max-width: 100%;
display: block;
}
/* Menü in vier beschriftete Gruppen statt achtzehn flacher Einträge. */
.nav {
display: flex;
flex-direction: column;
/* raum-2 statt raum-4: die Gruppenüberschrift bringt ihren eigenen Rand mit,
zusammen sind das 12 px zwischen zwei Gruppen. Die 8 px, die das spart,
sind es wert — mit raum-4 blieb EIN Pixel Überlauf, und ein Pixel genügt,
damit der Browser die Bildlaufleiste einblendet. Die kostet 15 px Breite,
und davon bricht „Besprechungen" um. */
gap: var(--raum-2);
flex: 1;
/* Bleibt stehen, auch wenn `.navigation` inzwischen auf `align-items:
stretch` steht: mit `center` richtete sich die Breite der Kinder nach dem
INHALT statt nach der Leiste — gemessen 77,4 px in einer 92-px-Leiste. Ich
hatte die fehlenden 14,6 px zuerst der Bildlaufleiste zugeschrieben; sie
war es nicht. Zwei Zeilen, die dasselbe sichern, sind hier billiger als
die Suche noch einmal. */
align-self: stretch;
}
.nav-gruppe { display: flex; flex-direction: column; gap: var(--raum-1); }
.abschnitt {
font-family: var(--schrift-text);
font-size: var(--groesse-winzig);
font-weight: var(--schnitt-fett);
color: var(--gold-text);
letter-spacing: .08em;
text-transform: uppercase;
padding: 0 0 var(--raum-1) var(--raum-2);
margin: 0;
}
.nav-punkt {
background: none;
border: none;
color: var(--text);
font-family: var(--schrift-text);
font-size: var(--groesse-hinweis);
font-weight: var(--schnitt-halb);
text-align: left;
padding: var(--raum-2) var(--raum-2);
border-radius: var(--radius-klein);
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.nav-punkt:hover { background: var(--flaeche-ueberfahren); color: var(--text); }
.nav-punkt.aktiv { background: var(--gold); color: var(--text-auf-gold); font-weight: var(--schnitt-fett); }
.nav-punkt:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* `.statistik` und `.stat-zeile` sind am 13.08.2026 entfallen. Die Kennzahlen
stehen jetzt als Kennzahlkarte in „Mein Tag" (`.mt-kennzahlkarte` in
luvaris-app.css), wo die Übergabe sie vorsieht. In der 92 px breiten Leiste
waren sie 137 px hoch, „Wartet auf Dritte" brach um, und sie schoben die
letzten fünf Menüpunkte aus dem Fenster. Regeln UND Markup sind weg — eine
Regel ohne Markup wäre nur die nächste Leiche. */
.navigation-fuss { font-size: var(--groesse-winzig); font-weight: var(--schnitt-halb); color: var(--text-gedimmt); }
/* ---------- Hauptbereich ---------- */
/* Kein eigener Rand oben: die Titelleiste bringt ihren Abstand selbst mit,
und jede doppelte Polsterung kostet Zeilen in der Liste. */
.inhalt { flex: 1; padding: 0 var(--raum-6) var(--raum-6); max-width: 1100px; }
.titelleiste {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: var(--raum-5);
}
/* ---------- Topbar / Bearbeiter ---------- */
/* 1a: Kopfzeile – breite Such-Pille links, Bearbeiter mit Avatar rechts. */
.kopfleiste {
display: flex;
align-items: center;
gap: var(--raum-3);
}
.bearbeiter-pille {
display: flex;
align-items: center;
gap: var(--raum-2);
flex: none;
background: var(--flaeche-karte);
border: 1px solid var(--linie);
border-radius: var(--radius-klein);
padding: var(--raum-1) var(--raum-2) var(--raum-1) var(--raum-1);
}
/* Die vierzehnte Fundstelle von `--flaeche-leiste` mit `--text` — und die
einzige, die ich beim ersten Durchsehen für harmlos gehalten habe („trägt
keinen Text"). Sie trägt welchen: die Initialen, und ohne Bearbeiter ein
„–". Gemessen im hellen Modus 1,00 : 1, weil beide Rollen dort #16181C sind,
und obendrein dieselbe Farbe wie die Kopfleiste darunter — der Kreis war
unsichtbar, sein Zeichen auch. */
.bearbeiter-avatar {
width: 24px;
height: 24px;
border-radius: var(--radius-kreis);
background: var(--flaeche-segment-aktiv);
color: var(--text);
font-family: var(--schrift-text); font-size: var(--groesse-winzig); font-weight: var(--schnitt-fett);
display: flex;
align-items: center;
justify-content: center;
flex: none;
}
/* ---------- D5: Globale Suche ---------- */
.suche-global-wrap { position: relative; flex: 1; }
.suche-global-ergebnis {
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
z-index: 80;
background: var(--flaeche-karte);
border: 1px solid var(--flaeche-seite);
border-radius: var(--radius-karte);
max-height: 62vh;
overflow-y: auto;
padding: var(--raum-1);
/* F7: das Scrollen bleibt hier drin */
overscroll-behavior: contain;
}
@media (max-width: 767px) {
.navigation {
width: 100%;
height: auto;
position: static;
padding: var(--raum-4);
overflow: visible;
}
/* Gruppen bleiben untereinander, ihre Punkte legen sich in Zeilen um. */
.nav { gap: var(--raum-3); }
.nav-gruppe {
flex-direction: row;
flex-wrap: wrap;
gap: var(--raum-1);
align-items: center;
}
.abschnitt {
flex-basis: 100%;
border-bottom: 0;
padding: 0 0 0 var(--raum-1);
margin-bottom: var(--raum-1);
}
.navigation-fuss { display: none; }
.inhalt { padding: var(--raum-5) var(--raum-4) var(--raum-12); }
}
/* roter Punkt am SYSTEM-Menü, wenn der Selbsttest einen Fehler meldet */
.abschnitt.hat-fehler::after {
content: '';
display: inline-block;
width: 7px;
height: 7px;
border-radius: var(--radius-kreis);
background: var(--gefahr-text);
margin-left: var(--raum-1);
vertical-align: middle;
}
/* Die Zahl am Navigationsknopf. Gold auf Navy, damit sie sich vom
aktiven Knopf unterscheidet, der genau umgekehrt eingefärbt ist. */
.nav-punkt {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--raum-2);
width: 100%;
}
.nav-zahl {
flex: none;
min-width: 18px;
height: 18px;
padding: 0 var(--raum-1);
border-radius: var(--radius-klein);
background: var(--gold);
color: var(--text-auf-gold);
font-size: var(--groesse-winzig);
font-weight: var(--schnitt-fett);
line-height: 18px;
text-align: center;
font-variant-numeric: tabular-nums;
}
.nav-punkt.aktiv .nav-zahl { background: var(--flaeche-leiste); color: var(--gold-text); }
/* ---------------------------------------------------------------
9 — D1: Navigation, zwölf Hauptpunkte statt einunddreißig
---------------------------------------------------------------
Facilioo zeigt dreizehn Module; die Unterpunkte einer Rubrik
erscheinen erst, wenn man in ihr arbeitet (Screenshot 05: unter
"Vorgänge" stehen Fristen, Meldungen, Bewertungen — aber nur
dort). Wir hatten einunddreißig gleichrangige Knöpfe, alle immer
sichtbar, alle im selben Gewicht. Keine Ansicht ist entfallen,
neunzehn sind Unterpunkte geworden.
Aufgeklappt wird über .nav-eintrag.offen, gesetzt von zeigeAnsicht()
anhand des aktiven Knopfes — kein zweiter Zustand, der auseinander
laufen könnte. */
.nav-gruppe { gap: var(--raum-1); }
.nav-eintrag { display: flex; flex-direction: column; }
/* Zu- und aufklappen ohne Kunststück: der 0fr-auf-1fr-Trick braucht
genau EIN Kind, sonst bekommen die weiteren Knöpfe implizite Zeilen
in Auto-Höhe und bleiben stehen — genau das ist beim ersten Anlauf
passiert, alle neunzehn Unterpunkte waren sichtbar. Ein Menü, das
beim Rubrikwechsel ohnehin neu gesetzt wird, braucht keine Animation. */
.nav-unter { display: none; flex-direction: column; gap: var(--raum-1); }
.nav-eintrag.offen .nav-unter { display: flex; }
.nav-unterpunkt {
/* eingerückt und eine Spur leiser als der Hauptpunkt, damit die
Hierarchie ohne Linie oder Symbol lesbar ist */
padding-left: var(--raum-6);
font-size: var(--groesse-hinweis);
opacity: .82;
}
.nav-unterpunkt:hover { opacity: 1; }
.nav-unterpunkt.aktiv { opacity: 1; }
/* Der aktive Hauptpunkt einer aufgeklappten Rubrik bleibt Gold. Ist
nur ein Unterpunkt aktiv, markiert ein goldener Strich am linken
Rand, zu welcher Rubrik er gehört — sonst verliert man beim Sprung
in einen Unterpunkt den Bezug nach oben. */
/* `--text` stand hier bis zum 13.08.2026 und war im hellen Modus #16181C —
derselbe Wert wie `--flaeche-leiste`, die Fläche darunter. Gemessen 1,00 : 1:
das Wort war nicht schwach, es war WEG. Zu sehen ist es nur in dem einen
Zustand, in dem ein Unterpunkt aktiv ist und sein Hauptpunkt nicht — beim
Sprung auf „Verträge" verschwand „Stammdaten" darüber.
Die Regel wiegt (0,4,0) und schlägt damit `.navigation .nav-punkt` (0,2,0)
weiter unten, das die Leisten-Rolle setzt. Also trägt sie die Rolle selbst. */
.nav-eintrag.offen > .nav-punkt:not(.aktiv) {
box-shadow: inset 0 1px 1px rgba(0,0,0,.35);
color: var(--leiste-text); }
/* Die Systemampel saß am Gruppentitel "System", den es nicht mehr
gibt. Sie hängt jetzt am Knopf "Einstellungen". */
.nav-punkt.hat-fehler::after {
content: '';
flex: none;
width: 7px;
height: 7px;
border-radius: var(--radius-kreis);
background: var(--gefahr-text);
}
@media (max-width: 767px) {
.nav-eintrag { flex-direction: row; flex-wrap: wrap; gap: var(--raum-1); }
.nav-unter { display: flex; flex-wrap: wrap; gap: var(--raum-1); }
.nav-unterpunkt { padding-left: var(--raum-3); }
}
/* ---------------------------------------------------------------
23 — Fristen-Banner (D3)
---------------------------------------------------------------
Bleibt oben stehen, solange eine Frist abgelaufen oder heute
fällig ist. Abgelaufene Fristen sind selten und dringend, das
rechtfertigt die feste Zeile über allem. */
.lv-fristbanner {
display: flex;
align-items: center;
gap: var(--raum-2);
width: 100%;
margin: 0 0 var(--raum-2);
padding: var(--raum-2) var(--raum-4);
border: 0;
border-radius: var(--radius-klein);
cursor: pointer;
text-align: left;
background: var(--st-offen-flaeche); /* N3.3: --st-wartend-bg gab es nie – der Rückfall war die Regel */
color: var(--text);
font-size: var(--groesse-text);
font-weight: var(--schnitt-halb);
}
.lv-fristbanner.lv-fristbanner-rot { background: var(--st-hoch-flaeche); color: var(--gefahr-text); }
.lv-fristbanner:hover { filter: brightness(0.97); }
/* F6a: Die Arbeitsfläche nutzt die volle Breite. Der Lesebereich (die
Nachricht) ist der Ort, an dem gelesen und geschrieben wird, und bekommt den
größten Anteil. Der übrige Inhalt bleibt bei den ruhigen 1100px – nur diese
eine Fläche darf breiter werden, weil sie drei Spalten trägt. */
.inhalt:has(> #ansicht-arbeitsflaeche:not([hidden])) { max-width: 1600px; }
/* Vorgänge-Ansicht mit Seitenpanel „Automatisch einsortiert". Die Fläche wird
dafür breiter (wie schon bei der Arbeitsfläche); die Tabelle behält ihre Breite
und das Panel sitzt rechts daneben. */
.inhalt:has(> #ansicht-vorgaenge:not([hidden])) { max-width: 1600px; }
/* Phase 4, und ein Befund aus Phase 2 hinterher: die Navigation ist von 220 auf
92 px geschrumpft, „damit der gewonnene Platz an die Arbeitsfläche geht" —
angekommen ist er nirgends. Gemessen in „Fristen" bei 1440 px Fenster:
`.inhalt` stand bei 1100, das Raster `1fr 340px` gab der Liste 688 px, und
rechts blieben 250 px leerer Rand. Die 128 px der Leiste wurden zu Luft.
Deshalb gilt die volle Breite jetzt auch für die Ansichten, denen die
Übergabe mehrere Spalten gibt: „Heute" (drei Spalten) und „Fristen"
(1fr 340px). Die einspaltigen Textansichten behalten die ruhigen 1100 px —
eine Textzeile über 1400 px liest sich schlechter, nicht besser. */
.inhalt:has(> #ansicht-mein-tag:not([hidden])) { max-width: 1600px; }
.inhalt:has(> #ansicht-fristen:not([hidden])) { max-width: 1600px; }
/* ------------------------------------------------------------
Und hier die Maße aus dem Plan. Sie stehen absichtlich zuletzt:
was oben aus der gewachsenen Oberfläche stammt, bleibt gültig,
solange der Plan nichts anderes sagt — und wird überschrieben,
sobald er es tut.
------------------------------------------------------------ */
body {
background: var(--flaeche-seite);
color: var(--text);
font-family: var(--schrift-text);
font-size: var(--groesse-bedien);
line-height: var(--zeilenhoehe);
letter-spacing: var(--laufweite);
-webkit-font-smoothing: antialiased;
/* Kopfleiste oben über die ganze Breite, darunter der Rumpf. */
display: flex;
flex-direction: column;
min-height: 100vh;
}
/* L2.4: Der Grundfall des Verweises. Es gab ihn bisher nicht — jeder Verweis
hatte eine Regel über SEINE Ansicht (`.akte-meta a`, `.objekt-karte a`, …),
und alle setzten dieselbe Farbe. Wo eine solche Regel fehlte, blieb die
Voreinstellung des Browsers stehen: #0000EE. Auf Weiß fällt das nicht auf
(8,6 : 1), im dunklen Modus sind es 1,65 : 1 — praktisch unlesbar. Gefunden
hat es die Kontrastmessung des HELLEN Modus, angeschlagen ist sie im
DUNKLEN: der Verweis „Eichung" im Selbsttest. Ein Fehler, der seit dem
Design-Umbau dastand, und den niemand gesucht hat.
Die Farbe ist dieselbe, die alle anderen Verweisregeln schon benutzen. */
a { color: var(--st-inarbeit-text); }
.kopfleiste { /* oben, über der ganzen Breite */
height: var(--hoehe-kopfleiste);
background: var(--flaeche-leiste);
display: flex; align-items: center; gap: var(--raum-4);
padding: 0 var(--raum-6);
flex: none;
/* Bleibt beim Blättern stehen. Sonst wäre das Fristenbanner zwar auf jeder
Ansicht vorhanden, aber nach zwei Umdrehungen am Rad nicht mehr zu sehen. */
position: sticky;
top: 0;
z-index: 50;
}
/* Die Suche nimmt den freien Platz, das Fristenbanner und die
Bearbeiterwahl stehen rechts. */
/* J2.5: `min-width: 0` hieß „darf beliebig schrumpfen", und genau das tat die
Suche: gemessen bei 1512×800 mit allen sechs Bannern 26 px — zwei Zeichen,
die Beschriftung unlesbar. Der Status hatte Vorrang vor dem Werkzeug.
Jetzt hat die Suche einen Boden; was schrumpfen muss, ist der Behälter der
Banner, und wenn der nicht mehr reicht, klappt `bannerEinklappen()` sie
hinter einen Knopf. */
.kopfleiste .suche-global-wrap { flex: 1 1 380px; min-width: 300px; max-width: 720px; position: relative; }
.kopfleiste .bearbeiter-pille { margin-left: auto; flex: none; }
/* Das Banner war eine Bahn über die ganze Inhaltsbreite. In der Leiste ist es
ein Streifen neben der Suche — sonst drängt es alles andere heraus. */
.kopfleiste .lv-fristbanner { flex: none; width: auto; margin: 0; }
.kopf-banner { display: flex; align-items: center; gap: var(--raum-3);
flex: 0 1 auto; min-width: 0; overflow: hidden; }
/* Dieselben Hinweise, untereinander statt nebeneinander. */
.banner-liste { display: flex; flex-direction: column; gap: var(--raum-2);
padding: var(--raum-4) 0; }
.banner-liste .knopf { justify-content: flex-start; text-align: left; }
/* Der Rumpf trägt Navigation und Inhalt nebeneinander. */
.rumpf {
display: flex;
flex: 1;
min-height: 0;
}
/* Ohne min-width:0 darf ein Flex-Kind nicht unter seine Inhaltsbreite
schrumpfen — eine breite Tabelle schob dann den ganzen Inhaltsbereich über
den rechten Rand, und der Knopf „+ Neuer Vorgang" stand draußen. */
.rumpf > .inhalt { min-width: 0; }
.titelleiste { /* Seitentitel + Aktionen */
min-height: var(--hoehe-titelleiste);
background: var(--flaeche-seite);
display: flex; align-items: center; justify-content: space-between;
padding: var(--raum-4) var(--raum-6);
margin: 0;
}
.titelleiste h1 {
font-family: var(--schrift-display);
font-size: var(--groesse-titel);
font-weight: var(--schnitt-halb);
color: var(--text);
margin: 0;
}
.navigation {
width: var(--breite-nav);
background: var(--flaeche-leiste);
padding: var(--raum-4) var(--raum-3);
overflow-y: auto; /* darf scrollen, wie in Facilioo */
/* K1: Dieser Behälter scrollt — also gehört die Eigenschaft hierher. Die
Prüfung zählte bis K1 nur, WIE OFT `overscroll-behavior` vorkommt (>= 17),
nicht, ob sie an JEDEM Scrollbehälter steht. Neun hatten sie nicht. */
overscroll-behavior: contain;
/* Unter der Kopfleiste festgemacht und auf die Resthöhe begrenzt: nur so
kann sie selbst scrollen, statt die Fußkennzahlen abzuschneiden. */
position: sticky;
top: var(--hoehe-kopfleiste);
height: calc(100vh - var(--hoehe-kopfleiste));
align-self: flex-start;
flex: none;
color: var(--text-zweit);
}
.navigation .abschnitt { /* „TAGESARBEIT" usw. */
height: var(--hoehe-nav-abschnitt);
display: flex; align-items: center;
padding: 0 var(--raum-3);
background: var(--linie);
color: var(--gold-text);
font-size: var(--groesse-hinweis);
font-weight: var(--schnitt-fett);
letter-spacing: 1px;
margin: var(--raum-4) 0 var(--raum-1);
text-transform: uppercase;
border-radius: var(--radius-feld);
}
.nav-punkt {
height: var(--hoehe-nav-punkt);
display: flex; align-items: center;
padding: 0 var(--raum-3);
border-radius: var(--radius-klein);
font-size: var(--groesse-text);
font-weight: var(--schnitt-normal);
color: var(--text-zweit);
background: transparent;
border: 0;
width: 100%;
text-align: left;
gap: var(--raum-2);
}
.nav-punkt:hover { background: var(--flaeche-ueberfahren); color: var(--text); }
.nav-punkt:focus-visible{ outline: 2px solid var(--fokus-rand); outline-offset: 2px; }
.nav-punkt[aria-current="page"],
.nav-punkt.aktiv { background: var(--gold); color: var(--text-auf-gold);
font-weight: var(--schnitt-fett); }
.nav-punkt[disabled] { color: var(--text-deaktiviert); cursor: not-allowed; }
.nav-unterpunkt { padding-left: var(--raum-6); font-size: var(--groesse-hinweis); }
/* ------------------------------------------------------------
2b. Die Leiste (Design-Umbau 13.08.2026, neu gefasst)
------------------------------------------------------------
ERSTER ANLAUF, verworfen: 92 px breit, Symbol ÜBER Wort, alles
mittig. Der Entwurf rechnet so für ACHT Punkte. LV hat zwölf
Hauptpunkte und siebzehn Unterpunkte, und die passen nicht:
gemessen brachen sechzehn der 29 Wörter um, die Schrift stand bei
10 und 9 px — unter LV eigener kleinster Rolle (`--groesse-winzig`,
11 px) — und „Versicherungsschäden" ist selbst bei 12 px noch
127 px breit. Das war keine Feinheit mehr, das war die Form.
ZWEITER ANLAUF, hier: Symbol NEBEN Wort, eine Zeile je Punkt,
linksbündig, 216 px breit, 36 px hoch, Schrift in den Rollen des
Wertesatzes (Hauptpunkt `--groesse-bedien`, Unterpunkt
`--groesse-hinweis`). Vom ersten Anlauf bleibt, was gut war: die
Symbole und das Aufklappen — die Unterpunkte einer Rubrik
erscheinen nur, wenn man in ihr arbeitet (`.nav-eintrag.offen`).
Damit stehen typisch dreizehn bis siebzehn Zeilen in der Leiste,
nicht neunundzwanzig.
Diese Regeln stehen NACH allen `.nav-*`-Regeln darüber. Das ist
keine Bequemlichkeit: `stilpruefung.js` prüft unter (c), ob eine
Abwandlung vor ihrem Grundbaustein steht und deshalb wirkungslos
ist. Wer hier oben einfügt, baut genau das.
WAS NICHT GEMACHT WURDE, und warum es hier steht statt zu fehlen:
Die Unterpunkte bekommen KEIN Symbol. Für die zwölf Hauptpunkte
gibt es im vorhandenen Lucide-Satz eindeutige Zeichen. Für die
siebzehn gäbe es nur Verlegenheitszeichen — ein falsches Symbol
ist schlechter als keines, weil es eine Bedeutung behauptet. Sie
tragen stattdessen eine Einrückung und einen Haarstrich als
Führungslinie. Ob sie Symbole bekommen sollen, ist eine
Entwurfsfrage und keine Umsetzungsfrage.
------------------------------------------------------------ */
/* Die Leiste ist in beiden Modi dunkel — also trägt sie in beiden Modi helle
Schrift. Ohne diese vier Zeilen läuft die Schrift im hellen Modus gegen die
dunkle Fläche und steht bei 2,18 : 1. */
.navigation { color: var(--leiste-text); }
.navigation .abschnitt { color: var(--leiste-text-leise); }
.navigation .nav-punkt { color: var(--leiste-text); }
.navigation .nav-unterpunkt,
.navigation .navigation-fuss { color: var(--leiste-text-leise); }
.navigation .nav-punkt:hover { color: var(--leiste-text); background: var(--leiste-flaeche-ueberfahren); }
/* Der aktive Punkt liegt auf Gold und behält deshalb seine eigene Schrift. */
.navigation .nav-punkt.aktiv { color: var(--text-auf-gold); }
/* GEMELDETER MANGEL, nachgemessen: „beim Drüberhovern wird das Element dunkel
und ist nicht mehr lesbar." Gemessen am aktiven Punkt: Schrift #1B2A45 auf
#23272D, **1,05 : 1** — unsichtbar, nicht bloß schwach.
Die Ursache ist die Reihenfolge, nicht die Farbe. `.nav-punkt.aktiv` weiter
oben setzt Gold mit Gewicht (0,2,0). Die Zeile über dieser hier setzt beim
Überfahren die dunkle Fläche mit Gewicht (0,3,0) — und gewinnt deshalb die
FLÄCHE, während `.navigation .nav-punkt.aktiv` (0,3,0, aber später) die
SCHRIFT behält. Navy blieb, Gold ging.
Behoben mit einer Regel, die beides in einer Hand hält. Der aktive Punkt
ändert sich beim Überfahren NICHT: man ist schon dort, ein Klick führt
nirgendwohin. Ein gedimmtes Gold gibt es dafür nicht — `--gold-hell` ist die
Rolle „Gold überfahren", kippt im hellen Modus aber auf #7E6029, und die
Leiste ist in beiden Modi dunkel. Also keine neue Farbe, wie die Übergabe es
verlangt, sondern derselbe Wert. */
.navigation .nav-punkt.aktiv:hover { background: var(--gold); color: var(--text-auf-gold); }
.navigation {
/* Linksbündig statt mittig. `align-items: center` hat im ersten Anlauf jedem
Kind seine Inhaltsbreite gegeben statt der Leistenbreite — daran hingen die
77-px-Punkte in einer 92-px-Leiste. Mit `stretch` füllt jede Zeile die
Leiste, und `align-self` am `.nav` darunter wird nicht mehr gebraucht. */
align-items: stretch;
/* Die Polsterung sitzt am Behälter, nicht am Punkt: mit 216 px Breite ist
dafür Platz, und der Trennstrich der Gruppenüberschrift läuft dann von
Kante zu Kante statt in der Luft zu enden. */
padding: var(--raum-1) var(--raum-2);
gap: var(--raum-1);
scrollbar-width: thin;
}
/* Das Logo trug 84 px. In einer 216-px-Leiste ist es Kopf, nicht Bild — 34 px
reichen und geben die 50 px an die Punkte weiter. */
.brand-logo { height: 34px; }
.nav-punkt {
/* Symbol NEBEN Wort. Der Grundbaustein oben ist schon eine Zeile
(`display: flex; align-items: center`); hier steht nur, was der erste
Anlauf mit `flex-direction: column` überschrieben hatte. */
flex-direction: row;
justify-content: flex-start;
align-items: center;
text-align: left;
gap: var(--raum-3);
padding: 0 var(--raum-3);
font-size: var(--groesse-bedien);
line-height: 1.2;
/* Keine Silbentrennung: `hyphens: auto` trennte „Dienstleis-ter". Bei 216 px
bricht kein Wort mehr um — die Zeile bleibt hier, damit ein längerer Name
später nicht falsch getrennt wird. */
hyphens: none;
overflow-wrap: normal;
white-space: nowrap;
}
/* Das Symbol trägt die Farbe des Punktes, auch im Zustand aktiv —
`stroke: currentColor` steht schon in `.symbol`. */
.nav-punkt .symbol { flex: none; width: 18px; height: 18px; vertical-align: 0; }
/* Der Grundbaustein oben verteilt mit `space-between`, damit die Zahl rechts
sitzt. In einer Zeile mit Symbol UND Wort schiebt das das Wort in die Mitte.
Also: alles links, und was rechts gehört, schiebt sich selbst dorthin. */
.nav-punkt .nav-zahl,
.nav-punkt.hat-fehler::after { margin-left: auto; }
/* Unterpunkte: Wort allein, eine Stufe kleiner, und ein Haarstrich als
Führungslinie — er ersetzt das Symbol, das sie nicht haben.
Die zwei Werte sind gerechnet, nicht geschätzt. Das Wort des Hauptpunktes
beginnt 50 px von der Leistenkante: 8 (Polsterung der Leiste) + 12
(Polsterung des Punktes) + 18 (Symbol) + 12 (Lücke). Der Strich soll unter
der MITTE des Symbols laufen, also bei 8 + 12 + 9 = 29 — das sind 21 px
Rand. Von dort bis zum Wort bleiben 50 − 29 = 21 px Polsterung. */
.nav-unterpunkt {
margin-left: 21px;
padding-left: 21px;
padding-right: var(--raum-3);
font-size: var(--groesse-hinweis);
height: 28px;
border-left: 1px solid var(--leiste-linie);
border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
/* Der Grundbaustein setzt `width: 100%`. Mit 21 px Rand daneben ergibt das
100 % + 21 px — gemessen 13 px waagerechter Überlauf, und damit eine
Bildlaufleiste, die es nicht braucht. `auto` genügt: `.nav-unter` ist ein
Flexbehälter und streckt seine Kinder von allein. */
width: auto;
}
/* Die Gruppenüberschrift wird zum Merkzeichen: sie soll die Gruppen
trennen, nicht die halbe Leiste füllen.
Die gefüllte Kachel ist hier weg, und das ist ein Befund, keine
Geschmacksfrage: `background: var(--linie)` oben liest im hellen
Modus #E4E7EC. Gemessen auf der dunklen Leiste — eine fast weiße
Kachel, und die eigene Schrift darauf bei 1,80 : 1. Dreimal, an
„Jeden Tag", „Jede Woche" und „Selten". Statt der Kachel trennt
jetzt ein Haarstrich, der seine eigene Leisten-Rolle liest. */
.navigation .abschnitt {
font-size: var(--groesse-winzig);
text-align: left;
padding: var(--raum-2) var(--raum-3) 0;
width: 100%;
background: none;
border-top: 1px solid var(--leiste-linie);
border-radius: 0;
margin: var(--raum-2) 0 var(--raum-1);
letter-spacing: .06em;
}
/* Die erste Überschrift steht direkt unter dem Logo — dort trennt der
Strich nichts, er zieht nur eine Linie um das Logo. */
.navigation .nav-gruppe:first-child .abschnitt { border-top: 0; padding-top: 0; margin-top: 0; }
/* Aus dem gleichen Grund wie die Überschrift: `--linie-stark` stand im
hellen Modus bei 12,41 : 1 gegen die Leiste. */
@media (max-width:767px) {
/* Auf dem Handy ist die Leiste ohnehin ausgeblendet; die Werte hier
würden sonst in der künftigen Fußleiste stören. */
.nav-punkt { font-size: var(--groesse-klein); }
}
/* ============================================================
3. Element-Regeln und Bausteine
============================================================ */
/* ===== Teil 1: das Design-Fundament ===== */
* { box-sizing: border-box; }
h1,h2,h3 { line-height: 1.25; margin: 0 0 var(--raum-4); }
.navigation a {
display: block;
color: var(--text-zweit);
text-decoration: none;
padding: var(--raum-2) var(--raum-3);
border-radius: var(--radius-feld);
border-left: 3px solid transparent;
}
.navigation a:hover { background: var(--flaeche-ueberfahren); }
.navigation a.active { background: var(--st-aktiv-flaeche); border-left-color: var(--gold); color: var(--text); }
/* --- Formulare --- */
label {
display: block;
font-size: var(--groesse-bedien);
font-weight: var(--schnitt-halb);
color: var(--st-inarbeit-text);
margin-bottom: var(--raum-1);
}
input,select,textarea {
width: 100%;
font: inherit;
padding: var(--raum-2) var(--raum-3);
border: 1px solid var(--linie);
border-radius: var(--radius-feld);
background: var(--flaeche-karte);
}
input:focus,select:focus,textarea:focus { outline: none; border-color: var(--gold); box-shadow: var(--fokus-schein); }
.table th {
text-align: left;
font-weight: var(--schnitt-halb);
color: var(--st-inarbeit-text);
border-bottom: 2px solid var(--linie);
padding: var(--raum-2) var(--raum-3);
}
.table td { border-bottom: 1px solid var(--linie); padding: var(--raum-2) var(--raum-3); }
.table tbody tr:hover { background: var(--flaeche-karte); }
.tabs a {
padding: var(--raum-2) 0;
color: var(--text-gedimmt);
text-decoration: none;
border-bottom: 2px solid transparent;
}
.tabs a.active { color: var(--text); border-bottom-color: var(--gold); font-weight: var(--schnitt-halb); }
/* ===== Teil 2: die gewachsene Oberflaeche ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
/* Das hidden-Attribut muss immer greifen. Sonst überschreiben Klassenregeln
wie .modal-hintergrund { display: grid } das display:none des Browsers,
und Modale bleiben trotz hidden=true sichtbar. */
[hidden] { display: none !important; }
h1 {
font-family: var(--schrift-display);
font-size: var(--groesse-titel);
font-weight: var(--schnitt-halb);
color: var(--text);
}
h2 {
font-family: var(--schrift-display);
font-size: var(--groesse-abschnitt);
font-weight: var(--schnitt-halb);
color: var(--text);
margin-bottom: var(--raum-4);
}
.filterleiste input[type="search"] { flex: 1; min-width: 220px; }
input, select, textarea {
font-family: var(--schrift-text);
font-size: var(--groesse-bedien);
color: var(--text-gedimmt);
padding: var(--raum-2) var(--raum-3);
border: 1px solid var(--linie);
/* War `--radius-klein` und stand damit gegen die Regel bei Zeile 976 und die
Typenliste weiter unten, die beide `--radius-feld` lesen. Sichtbar wurde
die Abweichung nur an einem `` OHNE type-Angabe: dort greift die
Typenliste nicht, und der Rest der Oberfläche stand bei 9, dieses Feld bei
10 Pixeln. Die Übergabe weist Feldern `--radius-feld` zu. */
border-radius: var(--radius-feld);
background: var(--flaeche-karte);
}
input:focus, select:focus, textarea:focus {
outline: 2px solid var(--st-inarbeit-text);
outline-offset: 0;
border-color: var(--st-inarbeit-text);
}
textarea { resize: vertical; }
.objekt-karte h3 {
font-family: var(--schrift-display);
font-size: var(--groesse-abschnitt);
font-weight: var(--schnitt-fett);
color: var(--text);
margin: var(--raum-1) 0;
}
.drawer-titelzeile > div { min-width: 0; }
.drawer h2 { margin-bottom: 0; }
.drawer-titelzeile h2 { margin-top: var(--raum-2); }
/* G2: Beschriftung und Wert gehoeren fest zusammen.
Vorher reichte das Paar seine beiden Kinder mit `display: contents` an das
aeussere Raster durch. Damit wurden dt und dd einzeln eingeordnet — und bei
einem Feld ueber die volle Breite passte das dd nicht mehr neben sein dt,
sondern rutschte in die naechste Zeile ganz nach links. Gemessen an
LV-2026-0002: 6 von 7 Paaren standen auseinander, die Beschriftung „Einheit"
rechts bei x=781, ihr Wert „WE 3" links darunter bei x=262.
Jetzt ist das Paar selbst ein Rasterfeld und uebernimmt mit `subgrid` die
Spalten des aeusseren Rasters: die Beschriftungen fluchten weiter, aber ein
Paar kann nicht mehr auseinanderfallen, egal wie lang der Wert ist. */
.drawer-stammdaten > div {
display: grid;
grid-column: span 2;
grid-template-columns: subgrid;
align-items: baseline;
}
/* Tags und andere lange Werte brauchen die ganze Zeile, sonst brechen sie in
der schmalen Spalte um. Der Wert reicht bis zum Ende des Paars — und das
Paar ist die ganze Zeile. */
.drawer-stammdaten > div.breit { grid-column: 1 / -1; }
.drawer-stammdaten > div.breit dd { grid-column: 2 / -1; }
.drawer-stammdaten dt {
font-size: var(--groesse-klein);
color: var(--text-gedimmt);
white-space: nowrap;
}
.drawer-stammdaten dd { font-size: var(--groesse-bedien); color: var(--text-gedimmt); margin: 0; min-width: 0; }
.drawer-mehr > summary { cursor: pointer; color: var(--text-gedimmt); }
.drawer-mehr > summary::marker { color: var(--gold-text); }
.drawer-mehr[open] > summary { color: var(--text-gedimmt); }
.dl-chip a { font-size: var(--groesse-hinweis); }
.drawer-dl select { max-width: 300px; padding: var(--raum-1) var(--raum-2); font-size: var(--groesse-hinweis); }
.verkn-treffer-zeile small { color: var(--text-gedimmt); font-size: var(--groesse-klein); white-space: nowrap; }
.schaden-feld input {
padding: var(--raum-1) var(--raum-2);
font-size: var(--groesse-hinweis);
font-family: var(--schrift-text);
text-transform: none;
letter-spacing: 0;
color: var(--text-gedimmt);
}
.dupl-hinweis strong { display: block; margin-bottom: var(--raum-1); font-size: var(--groesse-hinweis); }
.dupl-hinweis ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--raum-1);
}
.dupl-hinweis li { display: flex; align-items: baseline; gap: var(--raum-1); }
.dupl-hinweis li small { color: var(--text-gedimmt); }
.beleg-jahr-karte strong { font-family: var(--schrift-display); font-size: var(--groesse-abschnitt); font-weight: var(--schnitt-fett); color: var(--text); }
.beleg-jahr-karte span { font-size: var(--groesse-hinweis); color: var(--text-gedimmt); }
.beleg-jahr-karte small { font-size: var(--groesse-klein); color: var(--text-gedimmt); }
.kal-steuerung strong { font-family: var(--schrift-text); font-size: var(--groesse-bedien); font-weight: var(--schnitt-halb); min-width: 140px; text-align: center; }
.routine-raster .vg-zelle small { color: var(--text-gedimmt); }
.strat-raster .vg-zelle small { display: block; color: var(--text-gedimmt); font-size: var(--groesse-klein); }
.strat-erfassung h2 { font-size: var(--groesse-bedien); margin: 0 0 var(--raum-3); }
.post-raster .vg-titel a { margin-left: var(--raum-1); text-decoration: none; }
.drawer-tafel > .drawer-abschnitt:first-child > h3 { margin-top: 0; }
/* Niedrige Fenster: Kopf enger schnüren, damit für den Reiterinhalt Platz bleibt. */
@media (max-height: 760px) {
}
.drawer-abschnitt h3 {
font-size: var(--groesse-hinweis);
letter-spacing: 2px;
text-transform: uppercase;
color: var(--gold-text);
font-weight: var(--schnitt-halb);
margin-bottom: var(--raum-3);
border-bottom: 1px solid var(--linie);
padding-bottom: var(--raum-1);
}
.detail-tabelle dt { color: var(--text-gedimmt); }
.detail-tabelle dd { color: var(--text-gedimmt); }
.frist-leiste > p { flex-basis: 100%; margin: 0 0 calc(var(--raum-1) * -1); }
.chronik-eingabe textarea { flex: 1; }
.datei-kachel img {
width: 100%;
height: 90px;
object-fit: cover;
display: block;
}
/* F1: Die PDF-Miniatur zeigt die erste Seite. Oben ausrichten statt mittig
beschneiden – Briefkopf und Betreff sind das, woran man sie erkennt. */
.datei-kachel img.datei-thumb-pdf { object-fit: cover; object-position: top center; background: var(--flaeche-karte); }
.modal label.dz-radio {
flex-direction: row;
align-items: center;
gap: var(--raum-2);
font-size: var(--groesse-bedien);
}
.modal label.dz-radio input { width: auto; }
.modal label {
display: flex;
flex-direction: column;
gap: var(--raum-1);
font-size: var(--groesse-text);
font-weight: var(--schnitt-halb);
color: var(--text);
margin-bottom: var(--raum-3);
}
.bearbeiter-pille select {
border: none;
background: none;
padding: var(--raum-1) var(--raum-1);
min-width: 150px;
font-family: var(--schrift-text); font-size: var(--groesse-hinweis); font-weight: var(--schnitt-halb);
color: var(--text);
cursor: pointer;
}
.bearbeiter-pille select:focus { outline: none; }
.stornierte-schalter input { width: auto; }
.einheit-zeile strong { color: var(--text); }
.kontakt-zeile a { color: var(--st-inarbeit-text); text-decoration: none; }
.kontakt-zeile a:hover { text-decoration: underline; }
.aufgabe input[type="checkbox"] {
width: auto;
margin: 0;
cursor: pointer;
flex-shrink: 0;
}
.aufgabe-fristen-opt input[type="checkbox"] {
width: auto;
margin: 0;
cursor: pointer;
flex-shrink: 0;
}
.einstell-kopf h2 { margin-bottom: 0; }
.einstell-zeile strong { color: var(--text); }
.einstell-zeile.backup-warnung strong { color: var(--gefahr-text); }
input[type="color"] {
padding: var(--raum-1);
height: 38px;
min-width: 54px;
cursor: pointer;
}
.anruf-erfassung h2 {
font-size: var(--groesse-text);
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--gold-text);
font-weight: var(--schnitt-halb);
margin-bottom: var(--raum-3);
}
.anruf-erfassung label {
display: flex;
flex-direction: column;
gap: var(--raum-1);
font-size: var(--groesse-text);
font-weight: var(--schnitt-halb);
color: var(--text);
margin-bottom: var(--raum-3);
}
.anruf-erfassung input, .anruf-erfassung textarea, .anruf-erfassung select { width: 100%; }
.anruf-herkunft a { color: var(--st-erledigt-text); }
.akte-meta a { color: var(--st-inarbeit-text); text-decoration: none; }
.akte-meta a:hover { text-decoration: underline; }
.chart-block h2 {
font-size: var(--groesse-text);
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--gold-text);
font-weight: var(--schnitt-halb);
margin-bottom: var(--raum-3);
}
/* ---------- Dienstleister (C4) ---------- */
.objekt-karte a { color: var(--st-inarbeit-text); text-decoration: none; }
.objekt-karte a:hover { text-decoration: underline; }
.dl-objekt-check {
flex-direction: row !important;
align-items: center;
gap: var(--raum-2) !important;
font-weight: var(--schnitt-normal) !important;
color: var(--text-gedimmt) !important;
margin-bottom: 0 !important;
}
.dl-objekt-check input { width: auto; }
.ics-hinweis code {
font-family: var(--schrift-mono);
font-size: var(--groesse-hinweis);
color: var(--st-inarbeit-text);
background: var(--st-inarbeit-flaeche);
padding: var(--raum-1) var(--raum-2);
border-radius: var(--radius-feld);
}
.frist-gruppe h3 {
font-size: var(--groesse-hinweis);
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--gold-text);
font-weight: var(--schnitt-halb);
margin-bottom: var(--raum-2);
display: flex;
align-items: center;
gap: var(--raum-2);
}
.frist-gruppe.ueber h3 { color: var(--gefahr-text); }
.doku-felder label { margin-bottom: var(--raum-2); }
.doku-gruppe h3 {
font-size: var(--groesse-hinweis);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-gedimmt);
margin: 0 0 var(--raum-1);
}
.modal label.doku-fristen-opt {
display: inline-flex;
flex-direction: row;
align-items: center;
gap: var(--raum-1);
font-size: var(--groesse-hinweis);
font-weight: var(--schnitt-halb);
color: var(--text-gedimmt);
cursor: pointer;
margin: 0;
white-space: nowrap;
}
.vers-kopf h3 { margin: 0 0 var(--raum-1); }
.vers-detail h4 {
font-size: var(--groesse-hinweis);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-gedimmt);
margin: var(--raum-3) 0 var(--raum-1);
}
.top-titel small { display: block; color: var(--text-gedimmt); font-size: var(--groesse-hinweis); }
.viewer-body img {
max-width: 100%;
max-height: 100%;
margin: auto;
object-fit: contain;
}
.viewer-body iframe { width: 100%; height: 100%; border: 0; }
.baum-aktionen button {
background: none;
border: none;
color: inherit;
cursor: pointer;
font-size: var(--groesse-hinweis);
padding: 0 var(--raum-1);
opacity: 0.75;
}
.baum-aktionen button:hover { opacity: 1; }
.doku-gruppe h3 .ordner-icon { vertical-align: -1px; margin-right: var(--raum-1); }
.suche-global-wrap input {
width: 100%;
background: var(--flaeche-karte);
border: 1px solid var(--linie);
border-radius: var(--radius-klein);
padding: var(--raum-2) var(--raum-3);
font-size: var(--groesse-text);
color: var(--text-gedimmt);
}
.suche-global-wrap input::placeholder { color: var(--text-gedimmt); }
.suche-gruppe h4 {
font-size: var(--groesse-klein);
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--gold-text);
margin: var(--raum-2) var(--raum-2) var(--raum-1);
}
.dash-kopf h2 { font-family: var(--schrift-display, inherit); color: var(--text); margin: 0; }
.dash-abschnitt h3 {
font-size: var(--groesse-hinweis);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-gedimmt);
margin: 0 0 var(--raum-2);
display: flex;
align-items: center;
gap: var(--raum-2);
justify-content: space-between;
}
.dash-zeile small { color: var(--text-gedimmt); font-size: var(--groesse-hinweis); }
.doku-fristen-opt input[type="checkbox"] { width: auto; margin: 0; cursor: pointer; }
.frist-titel small { color: var(--text-gedimmt); font-weight: var(--schnitt-normal); }
/* ---------- Responsiv ---------- */
@media (max-width: 767px) {
.rumpf { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; animation: none !important; }
}
.foto-kachel img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
display: block;
background: var(--flaeche-seite);
cursor: zoom-in;
}
.foto-kachel figcaption {
padding: var(--raum-2) var(--raum-3);
display: grid;
gap: var(--raum-1);
font-size: var(--groesse-hinweis);
}
.modal label.onb-notiz-feld {
margin-bottom: var(--raum-2);
font-size: var(--groesse-hinweis);
letter-spacing: 0.4px;
text-transform: uppercase;
color: var(--text-gedimmt);
}
.onb-abschnitt h3 {
font-size: var(--groesse-hinweis);
letter-spacing: 1.6px;
text-transform: uppercase;
color: var(--gold-text);
font-weight: var(--schnitt-halb);
margin-bottom: var(--raum-2);
padding-bottom: var(--raum-1);
border-bottom: 1px solid var(--linie);
}
.onb-punkt.erledigt .onb-haken span { color: var(--text-gedimmt); }
/* .modal label erzwingt flex-direction: column – hier gezielt aufheben,
sonst steht das Kästchen über statt neben dem Text. */
.modal label.onb-haken {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--raum-2);
font-size: var(--groesse-bedien);
font-weight: var(--schnitt-normal);
color: var(--text-gedimmt);
cursor: pointer;
margin: 0;
}
.onb-haken input {
width: 15px;
height: 15px;
accent-color: var(--st-erledigt-text);
flex-shrink: 0;
}
.mail-aktionen select { font-size: var(--groesse-text); padding: var(--raum-1) var(--raum-2); max-width: 320px; }
.vers-dok a { color: var(--text); font-weight: var(--schnitt-halb); }
.serie-form h3 { margin-bottom: var(--raum-2); font-size: var(--groesse-bedien); color: var(--text); }
.aufwand-erfassen input[type="date"] { width: 148px; }
.aufwand-erfassen input[type="number"] { width: 96px; }
.aufwand-erfassen select { width: 128px; }
.aufwand-erfassen input[type="text"] { flex: 1 1 200px; min-width: 160px; }
.aufwand-summe strong { font-size: var(--groesse-bedien); font-variant-numeric: tabular-nums; }
.filter-datum input { width: 150px; }
.assi-serie label { margin-bottom: 0; }
.assi-serie label input { width: 110px; }
.assi-check input[type="checkbox"] { width: auto; margin: 0; }
.assi-serie-zeile input[type="date"] { width: auto; margin-left: auto; }
.assi-abschluss ul {
margin: var(--raum-2) 0 var(--raum-4) var(--raum-5);
font-size: var(--groesse-bedien);
color: var(--text);
line-height: 1.7;
}
.zaehler-neu label { margin-bottom: 0; }
.zaehler-tabelle th {
text-align: left;
font-size: var(--groesse-klein);
letter-spacing: .06em;
text-transform: uppercase;
color: var(--text-gedimmt);
padding: var(--raum-1) var(--raum-2);
border-bottom: 1px solid var(--linie);
font-weight: var(--schnitt-halb);
}
.zaehler-tabelle td {
padding: var(--raum-1) var(--raum-2);
border-bottom: 1px solid var(--flaeche-seite);
color: var(--text-gedimmt);
}
.zaehler-tabelle td.zahl { font-family: var(--schrift-mono); font-variant-numeric: tabular-nums; }
.zaehler-tabelle tr.auffaellig td { background: var(--st-hoch-flaeche); }
.zaehler-erfassen input { margin: 0; }
.jab-aktionen input[type="date"] { margin: 0; width: auto; }
.ruh-titel strong {
color: var(--text);
margin-right: var(--raum-2);
font-family: var(--schrift-mono);
font-size: var(--groesse-hinweis);
}
#ansicht-mein-tag .titelleiste h1 { flex: none; }
.mt-kennzahl strong {
font-size: var(--groesse-abschnitt);
font-family: var(--schrift-display);
margin-right: var(--raum-1);
}
button.mt-titel { cursor: pointer; }
button.mt-titel:hover { color: var(--text); text-decoration: underline; }
.mt-titel strong {
color: var(--text);
font-family: var(--schrift-mono);
font-size: var(--groesse-hinweis);
margin-right: var(--raum-2);
}
.notiz-ereignis input[type="date"] {
font: inherit;
font-size: var(--groesse-hinweis);
color: var(--text-gedimmt);
border: 1px solid var(--linie);
border-radius: var(--radius-klein);
padding: var(--raum-1) var(--raum-2);
background: var(--flaeche-karte);
}
.team-toolbar select { min-width: 180px; }
.team-umverteilen select { min-width: 170px; }
.kosten-summe-karte span { font-family: var(--schrift-text); font-size: var(--groesse-klein); font-weight: var(--schnitt-halb); color: var(--text-gedimmt); }
.kosten-summe-karte strong { font-family: var(--schrift-text); font-size: var(--groesse-bedien); font-weight: var(--schnitt-fett); color: var(--text); }
.kosten-summe-karte.ueber-schwelle strong { color: var(--st-hoch-text); }
.kosten-erfassen select, .kosten-erfassen input { font-size: var(--groesse-text); }
.kosten-text small { color: var(--text-gedimmt); }
.umlauf-stimme-name small { color: var(--text-gedimmt); }
.teilnahme-anwesend small { color: var(--text-gedimmt); }
.dl-detail-kopf h2 { font-family: var(--schrift-display); color: var(--text); }
.foto-paar figure { margin: 0; text-align: center; }
.foto-paar img {
width: 100%;
height: 150px;
object-fit: cover;
border-radius: var(--radius-klein);
border: 1px solid var(--linie);
background: var(--flaeche-seite);
}
.foto-paar figcaption {
font-size: var(--groesse-klein);
font-weight: var(--schnitt-fett);
color: var(--gold-text);
text-transform: uppercase;
letter-spacing: .05em;
margin-top: var(--raum-1);
}
.foto-paar-form label {
display: flex;
flex-direction: column;
font-size: var(--groesse-klein);
color: var(--text-gedimmt);
gap: var(--raum-1);
}
.foto-paar-form select, .foto-paar-form input { font-size: var(--groesse-hinweis); padding: var(--raum-1) var(--raum-1); }
.foto-paar-form input[type="text"] { min-width: 180px; }
.chart-kopf h2 { margin: 0; }
.chart-caption strong { color: var(--text); }
.postfach-suchzeile input[type="search"] {
width: 260px;
max-width: 42vw;
padding: var(--raum-2) var(--raum-3);
border-radius: var(--radius-pille);
border: 1px solid var(--linie);
background: var(--flaeche-karte);
font-family: var(--schrift-text); font-size: var(--groesse-text); font-weight: var(--schnitt-halb);
color: var(--text-gedimmt);
}
.postfach-suchzeile input[type="search"]:focus-visible { outline: 2px solid var(--st-inarbeit-text); outline-offset: 1px; }
.postfach-hinweis-block h3 { font-family: var(--schrift-display); color: var(--text); margin-bottom: var(--raum-1); }
.postfach-hinweis-block code {
font-family: var(--schrift-mono); font-size: var(--groesse-hinweis);
background: var(--flaeche-seite);
padding: var(--raum-1) var(--raum-1);
border-radius: var(--radius-feld);
}
.postfach-vorschau-kopf h2 { margin-bottom: var(--raum-2); }
.postfach-vorschau-meta span { color: var(--text-gedimmt); display: inline-block; min-width: 46px; }
.postfach-aktionsleiste select {
padding: var(--raum-1) var(--raum-2);
border-radius: var(--radius-klein);
border: 1px solid var(--linie);
background: var(--flaeche-karte);
font-family: var(--schrift-text); font-size: var(--groesse-hinweis); font-weight: var(--schnitt-halb);
color: var(--text-gedimmt);
max-width: 240px;
}
.postfach-vorschlag strong { color: var(--text); }
/* ===== Teil 3: die Ergaenzungen der Phasen 1 bis 4 (frueher eigene Datei) ===== */
/* Das Fundament setzt Formularfelder auf `width:100%`; style.css
nicht. In den Altansichten stehen Felder teils nebeneinander,
deshalb bleibt die Breite dort dem alten Verhalten überlassen
und wird nur innerhalb der neuen Raster erzwungen. */
.lv-raster input, .lv-raster select, .lv-raster textarea { width: 100%; }
.lv-kopf h3 { margin: 0; }
/* ---------- 5. Beträge rechtsbündig, Ziffern in Spalten ---------- */
.table td.betrag, .table th.betrag { text-align: right; font-variant-numeric: tabular-nums; }
.drawer-stammdaten.kompakt > div { margin-bottom: 0; }
.drawer-stammdaten.kompakt select { padding: var(--raum-1) var(--raum-2); font-size: var(--groesse-text); max-width: 100%; }
.lv-editor p { margin: 0 0 var(--raum-2); }
.lv-editor ul, .lv-editor ol { margin: 0 0 var(--raum-2) var(--raum-5); }
.lv-empfaenger-block legend {
font-size: var(--groesse-bedien);
font-weight: var(--schnitt-halb);
color: var(--st-inarbeit-text);
padding: 0 var(--raum-1);
}
.lv-empfaenger-wahl input[type="checkbox"] { width: auto; flex: none; }
.lv-gruppe input { width: auto; }
.lv-empfaenger li {
display: flex;
align-items: center;
gap: var(--raum-1);
flex-wrap: wrap;
padding: var(--raum-1) 0;
}
.lv-eintrag-text p:last-child { margin-bottom: 0; }
.lv-leiste input[type="number"] { width: 4.5rem; padding: var(--raum-1) var(--raum-2); font-size: var(--groesse-text); }
/* ---------------------------------------------------------------
8 — Rückbau einer Kollision, die ich in Phase 0h eingeschleppt habe
---------------------------------------------------------------
luvaris-app.css setzt `input,select,textarea { width:100% }`.
style.css hat NIE eine globale Breite gesetzt — die gewachsene
Oberfläche geht seit 1760 Zeilen davon aus, dass Bedienelemente
ihrer Beschriftung folgen, und vergibt Breiten dort einzeln, wo
sie gebraucht werden (.aufwand-erfassen select, .filter-datum
input, .anruf-erfassung …). Weil die Breitenregel in style.css
gar nicht vorkommt, konnte sie auch nichts überschreiben: seit
der Einbindung ist JEDE Auswahl im Programm ein Balken über die
volle Spalte. Aus der vierteiligen Filterzeile der Vorgangsliste
wurden vier gestapelte Balken über der eigentlichen Liste.
Meine Kollisionsliste in docs/design-fundament.md prüfte Farben
und Schriften — nicht das Kastenmodell. Hier steht der Rückbau:
Standard wieder wie vorher, volle Breite nur noch dort, wo das
Fundament sie meint, nämlich in seinen eigenen Formularspalten. */
input, select, textarea { width: auto; }
.field input, .field select, .field textarea { width: 100%; }
/* Mehrzeilige Eingaben füllen ihre Spalte weiterhin — alles andere
sähe wie ein abgeschnittenes Feld aus. */
textarea { width: 100%; }
/* Filterzeile: die Breite einer Auswahl richtet sich nach ihrer längsten
Option — „Sonderumlage beschlossen" machte den Zahlungsfilter allein
226 px breit und schob die Zeile in einen zweiten Umbruch. Gedeckelt,
damit alle Filter nebeneinander stehen; ausgeschrieben steht die Option
ohnehin im geöffneten Menü. */
.filterleiste select { max-width: 190px; }
.filterleiste input[type="search"] { flex: 1 1 200px; min-width: 180px; }
/* PDF-Export ist ein und zog sich die Unterstreichung der Textlinks;
in einer Knopfspalte sieht ein unterstrichener Knopf nach Fehler aus. */
.lv-akte-aktionen a.knopf { text-decoration: none; }
.lv-akte-aktionen h3,
.lv-block > h3 {
margin: 0 0 var(--raum-2);
padding-bottom: var(--raum-1);
border-bottom: 1px solid var(--linie);
font-family: var(--schrift-text);
font-size: var(--groesse-winzig);
font-weight: var(--schnitt-fett);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--gold-text);
display: flex;
align-items: center;
gap: var(--raum-2);
}
.mailtext-trenner span {
flex: none;
font-size: var(--groesse-winzig);
font-weight: var(--schnitt-fett);
letter-spacing: .07em;
text-transform: uppercase;
color: var(--gold-text);
max-width: 70%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mailtext-kopfzeilen dt { color: var(--st-inarbeit-text); font-weight: var(--schnitt-fett); white-space: nowrap; }
.mailtext-kopfzeilen dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.mailtext-vorgeschichte > summary {
cursor: pointer;
list-style: none;
display: inline-flex;
align-items: center;
gap: var(--raum-1);
font-size: var(--groesse-klein);
font-weight: var(--schnitt-halb);
color: var(--gold-text);
border: 1px dashed var(--linie);
border-radius: var(--radius-pille);
padding: var(--raum-1) var(--raum-3);
}
.mailtext-vorgeschichte > summary::-webkit-details-marker { display: none; }
.mailtext-vorgeschichte > summary:hover { background: var(--flaeche-seite); }
.lv-vorschau-block > summary {
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
gap: var(--raum-2);
font-size: var(--groesse-text);
color: var(--text);
}
.lv-vorschau-block > summary::-webkit-details-marker { display: none; }
.lv-vorschau-liste li {
display: flex;
align-items: baseline;
gap: var(--raum-2);
flex-wrap: wrap;
padding: var(--raum-1) 0;
border-top: 1px solid var(--linie);
font-size: var(--groesse-hinweis);
}
/* Ein eingefügtes Handyfoto ist 2160 x 3840 – in voller Breite wäre es tausend
Pixel hoch und schöbe den Text darunter aus dem Blick. Also auf Lesegröße
herunter; der Klick öffnet es im Viewer in voller Auflösung. */
.mailtext-bild img {
display: block;
max-width: 100%;
max-height: 420px;
width: auto;
height: auto;
border: 1px solid var(--linie);
border-radius: var(--radius-klein);
background: var(--flaeche-karte);
cursor: zoom-in;
}
.mailtext-bild figcaption {
margin-top: var(--raum-1);
font-size: var(--groesse-klein);
color: var(--st-inarbeit-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mail-anhang-bild img, .postfach-anhang-bild img {
width: 100%;
height: 68px;
object-fit: cover;
border-radius: var(--radius-feld);
background: var(--flaeche-karte);
}
.mail-anhang-bild span, .postfach-anhang-bild span {
display: block;
font-size: var(--groesse-winzig);
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.lv-anhaenge legend {
padding: 0 var(--raum-1);
font-size: var(--groesse-klein);
font-weight: var(--schnitt-fett);
letter-spacing: .06em;
text-transform: uppercase;
color: var(--st-inarbeit-text);
}
.modal .lv-anhang-wahl input { width: auto; margin: 0; flex: none; }
.modal .lv-anhang-wahl span:first-of-type {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.postfach-nummer code {
font-weight: var(--schnitt-fett);
color: var(--text);
background: var(--flaeche-karte);
border: 1px solid var(--linie);
border-radius: var(--radius-feld);
padding: var(--raum-1) var(--raum-2);
}
.lv-kontakt-feld span {
font-size: var(--groesse-winzig);
font-weight: var(--schnitt-fett);
letter-spacing: .04em;
text-transform: uppercase;
color: var(--st-inarbeit-text);
}
.lv-kontakt-feld input { width: 100%; padding: var(--raum-1) var(--raum-2); font-size: var(--groesse-hinweis); }
.lv-kontakt-aktionen select { width: auto; padding: var(--raum-1) var(--raum-2); font-size: var(--groesse-hinweis); }
.lv-filterklappe > summary {
display: inline-flex;
align-items: center;
gap: var(--raum-2);
list-style: none;
cursor: pointer;
user-select: none;
padding: var(--raum-1) var(--raum-3);
border: 1px solid var(--linie);
border-radius: var(--radius-pille);
background: var(--flaeche-seite);
font-size: var(--groesse-hinweis);
font-weight: var(--schnitt-halb);
color: var(--text);
}
.lv-filterklappe > summary::-webkit-details-marker { display: none; }
.lv-filterklappe > summary .klapp-pfeil { color: var(--gold-text); }
.lv-filterklappe > summary:hover { border-color: var(--gold); }
.af-suchzeile input[type="search"] { min-width: 260px; }
.af-nachricht-kopf h2 { font-size: var(--groesse-abschnitt); margin: 0 0 var(--raum-1); color: var(--text); }
.lv-akte-haupt > .lv-block > h3 { border-bottom: 0; margin-bottom: var(--raum-2); padding-bottom: 0; }
.akte-mehr > summary {
list-style: none;
cursor: pointer;
text-align: center;
padding: var(--raum-2);
border-radius: var(--radius-feld);
font-family: var(--schrift-text); font-size: var(--groesse-hinweis); font-weight: var(--schnitt-halb);
color: var(--text);
}
.akte-mehr > summary::-webkit-details-marker { display: none; }
.akte-mehr > summary:hover { background: var(--flaeche-vertieft); }
.akte-mehr[open] > summary { color: var(--text-gedimmt); }
.lv-gruppe > input[type="checkbox"] { flex: 0 0 auto; margin: var(--raum-1) 0 0; }
@keyframes lv-toast-ein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes lv-toast-aus { to { opacity: 0; transform: translateY(6px); } }
textarea.lv-dialog-feld { resize: vertical; min-height: 84px; line-height: 1.45; }
.lv-feld-fehler { border-color: var(--gefahr-text) !important; }
/* F5: Der Vorschlagsknopf im Eingabedialog. Zurückgenommen und links, damit er
nicht mit den Dialogknöpfen im Fuß verwechselt wird – er entscheidet nichts,
er füllt nur das Feld. */
.lv-dialog-vorschlag { align-self: flex-start; margin-top: var(--raum-2); }
.lv-auswahl-zeile input { margin-top: var(--raum-1); flex: 0 0 auto; }
.naechster-schritt label {
font-family: var(--schrift-text); font-size: var(--groesse-klein); font-weight: var(--schnitt-halb);
letter-spacing: .3px;
text-transform: uppercase;
color: var(--text-gedimmt);
}
.naechster-schritt textarea {
width: 100%;
box-sizing: border-box;
padding: var(--raum-2) var(--raum-2);
resize: vertical;
min-height: 2.2rem;
field-sizing: content;
/* Teil A3: in der einzeiligen Reihe nimmt das Feld den freien Platz. */
flex: 1 1 16rem;
min-width: 0;
border: 1px solid var(--linie);
border-radius: var(--radius-klein);
font-family: var(--schrift-text); font-size: var(--groesse-text); font-weight: var(--schnitt-normal);
color: var(--text, var(--text));
background: var(--flaeche-karte);
line-height: 1.4;
}
.naechster-schritt textarea:focus {
outline: 2px solid var(--st-inarbeit-text);
outline-offset: 1px;
border-color: var(--st-inarbeit-text);
}
.naechster-schritt button { align-self: flex-start; }
.zuordnung-personwahl select { flex: 1; }
.zw-ereignisse li {
display: grid;
grid-template-columns: 132px 1fr auto;
gap: var(--raum-2);
align-items: baseline;
padding: var(--raum-1) 0;
border-bottom: 1px solid var(--linie);
}
.zw-ereignisse li:last-child { border-bottom: 0; }
@media (max-width: 560px) {
.zw-ereignisse li { grid-template-columns: 1fr; gap: var(--raum-1); }
}
.auto-panel-kopf h2 { font-size: var(--groesse-bedien); margin: 0; color: var(--text); }
/* A1: Der Schreiben-Dialog hat jetzt Kopf, Inhalt und Fuß. Seine Maße stehen
dort, wo die übrigen Ansichtsregeln stehen — in luvaris-app.css. */
/* S4: Ungespeicherte Eingaben in der Akte.
Die Akte zeichnet sich nach fast jedem Schreibvorgang neu; getippter Text
wird dabei wiederhergestellt statt verworfen. Damit niemand glaubt, es sei
schon gespeichert, tragen diese Felder eine Markierung. Zugleich macht das
den Unterschied sichtbar, den die Oberfläche bisher verschwieg: manche
Felder speichern sofort, andere erst auf Knopfdruck. */
.lv-ungespeichert {
border-color: var(--gold, var(--gold)) !important;
box-shadow: var(--fokus-schein); }
@media (min-width: 768px) {
#modal-vorgang .modal > label,
#modal-vorgang .modal > .lv-raster { break-inside: avoid; }
}
.budget-ueber strong { color: var(--gefahr-text); }
.af-akte-verweis small { font-weight: var(--schnitt-normal); font-size: var(--groesse-winzig); color: var(--text-gedimmt); }
/* F2: Der Weg zurück zur Schreibfläche. Steht dort, wo der Verfasser stand,
und ist als Angebot gezeichnet – gestrichelt, zurückgenommen: es ist kein
Zustand, sondern eine Einladung. */
.verfasser-rueckweg {
display: flex;
align-items: center;
gap: var(--raum-2);
margin-top: var(--raum-3);
padding: var(--raum-3);
border: 1px dashed var(--linie);
border-radius: var(--radius-karte);
background: var(--flaeche-vertieft); }
.verfasser-rueckweg-hinweis {
font-size: var(--groesse-klein);
color: var(--text-gedimmt); }
.menue-mehr > summary {
list-style: none;
cursor: pointer;
user-select: none;
padding: var(--raum-1) var(--raum-3);
letter-spacing: 2px;
}
.menue-mehr > summary::-webkit-details-marker { display: none; }
/* Baustein „···"-Menü. Er hiess bis zum Durchgang Ablage .af-mehr-menue und
stand in luvaris-app.css — ein Name aus der Arbeitsflaeche und eine Datei fuer
Ansichten, obwohl er ein Baustein ist. Aufgefallen ist das nicht am Stil,
sondern am n5-Prueflauf: der schneidet app.js am ERSTEN Vorkommen von
af-mehr-menue, und die zweite Verwendung (Ablageliste) steht davor. Ein
Baustein, der nach einer Ansicht heisst, ist eine Falle fuer den naechsten,
der ihn wiederverwendet.
LEHRE aus dem Designdurchgang befolgt: umbenannt ueber die vollstaendigen
Klassennamen, laengster zuerst — kein \b an Namen mit Bindestrich. */
/* Das Menü. details/summary statt eigenem Zustand – es schließt sich von
selbst, wenn man daneben klickt, und funktioniert ohne Javascript. */
.menue-mehr { position: relative; margin-left: auto; }
.menue-mehr-liste {
position: absolute;
right: 0;
top: calc(100% + 4px);
z-index: 30;
display: flex;
flex-direction: column;
gap: var(--raum-1);
padding: var(--raum-1);
min-width: 210px;
background: var(--weiss, var(--flaeche-karte));
border: 1px solid var(--linie, var(--linie));
border-radius: var(--radius-klein);
}
.menue-mehr-liste .knopf { justify-content: flex-start; text-align: left; width: 100%; }
/* Die klassische details-Falle: ein geschlossenes gibt seinen Kindern
display:none aus dem Browser-Stylesheet – eine eigene display-Regel schlägt
das und lässt das Menü dauerhaft offen stehen. Deshalb ausdrücklich zu. */
.menue-mehr:not([open]) .menue-mehr-liste { display: none; }
/* TB-H10c: Bei der letzten sichtbaren Zeile öffnete das Menü unterhalb des
Fensterrands und war unerreichbar. Ist unten kein Platz, klappt es nach
oben — gesetzt wird die Klasse beim Öffnen, weil erst dann feststeht, wie
viel Platz da ist. */
.menue-mehr[open].nach-oben .menue-mehr-liste { top: auto; bottom: calc(100% + 4px); }
/* A5: derselbe Baustein am Ablegebereich der Dokumentenansicht. */
.doku-dropzone-summary::-webkit-details-marker { display: none; }
.doku-dropzone-summary::before { content: "▸ "; color: var(--text-gedimmt); }
.doku-dropzone[open] > .doku-dropzone-summary::before { content: "▾ "; }
.schreiben-brief > summary {
cursor: pointer;
font-size: var(--groesse-text);
font-weight: var(--schnitt-halb);
color: var(--text);
list-style: none;
}
.schreiben-brief > summary::before { content: "▸ "; color: var(--text-gedimmt); }
.schreiben-brief[open] > summary::before { content: "▾ "; }
.schreiben-brief > summary::-webkit-details-marker { display: none; }
/* Dieselbe details-Falle wie beim „…"-Menue: eine eigene display-Regel auf
einem Kind schlaegt das display:none, das ein geschlossenes vergibt.
Deshalb steht die Regel NUR im offenen Zustand. Merksatz fuer kuenftige
details-Bloecke: display nie unbedingt auf ein Kind setzen. */
.schreiben-brief[open] label { margin-top: var(--raum-2); display: block; }
.schreiben-brief:not([open]) label { display: none; }
/* ============================================================
4. Bausteine
Jeder mit vollständigem Zustandssatz: Ruhe · überfahren · Fokus ·
aktiv · deaktiviert · Fehler. Wo ein Zustand für einen Baustein
keinen Sinn hat, steht das dabei.
Diese Regeln stehen am Ende der Datei und gelten damit vor allem,
was oben aus der gewachsenen Oberfläche übernommen wurde.
============================================================ */
/* ---------- Symbole ---------------------------------------- */
.symbol {
width: 16px; height: 16px; flex: none;
fill: none;
stroke: currentColor; /* erbt die Textfarbe, auch im Zustand aktiv */
stroke-width: 1.75; /* Lucides Vorgabe 2 wirkt bei 16 px zu schwer,
1.5 verschwindet auf Schwarz — 1.75 ist der Mittelweg */
stroke-linecap: round; stroke-linejoin: round;
vertical-align: -2px;
}
.symbol-gross { width: 20px; height: 20px; }
.vers-pfeil.offen .symbol { transform: rotate(90deg); }
.karte-kopf { display:flex; align-items:center; justify-content:space-between;
margin-bottom: var(--raum-4); }
.karte-titel { font-size: var(--groesse-abschnitt); font-weight: var(--schnitt-halb);
color: var(--text); }
.karte-vertieft { background: var(--flaeche-vertieft); border-radius: var(--radius-feld);
padding: var(--raum-3); }
.karte-klickbar { cursor: pointer; }
.karte-klickbar:hover { background: var(--flaeche-ueberfahren); }
.karte-klickbar:focus-visible { outline: 2px solid var(--fokus-rand); outline-offset: 2px; }.knopf:active {
transform: translateY(1px);
}
.knopf[disabled] { background: var(--flaeche-vertieft); border-color: var(--linie);
color: var(--text-deaktiviert); cursor: not-allowed; transform:none; }
.knopf-haupt[disabled]{ background: var(--flaeche-vertieft); border-color: var(--linie);
color: var(--text-deaktiviert); }.knopf.knopf-gefahr.knopf-klein {
background: transparent;
border-color: transparent;
color: var(--gefahr-text);
}.knopf.knopf-gefahr.knopf-klein:hover {
background: var(--gefahr);
border-color: var(--gefahr);
color: var(--text-auf-gefahr);
}.knopf-still:hover {
background: var(--flaeche-ueberfahren);
border-color: var(--gold); /* Phase 3: Überfahren heißt goldener Rahmen, überall gleich */
color: var(--text);
}
/* ---------- Segmenttaste und Reiter ------------------------- */
.segment { display:inline-flex; }
.segment > .knopf { border-radius: 0; border-right-width: 0; }
.segment > .knopf:first-child { border-radius: var(--radius-pille) 0 0 var(--radius-pille); }
.segment > .knopf:last-child { border-radius: 0 var(--radius-pille) var(--radius-pille) 0;
border-right-width: 1px; }
.segment > .knopf.aktiv { background: var(--flaeche-segment-aktiv); color: var(--text); }
.reiter-leiste { display:flex; gap: var(--raum-2); flex-wrap: wrap;
padding: var(--raum-3) 0; border-bottom: 1px solid var(--linie); }
.reiter { height: var(--hoehe-bedien); padding: 0 var(--raum-4);
border-radius: var(--radius-pille); border: 1px solid var(--linie);
background: var(--flaeche-feld); color: var(--text);
font-family: var(--schrift-text);
font-size: var(--groesse-bedien); font-weight: var(--schnitt-fett);
display: inline-flex; align-items: center; gap: var(--raum-2);
cursor: pointer; white-space: nowrap; }
.reiter:hover { background: var(--flaeche-ueberfahren); }
.reiter:focus-visible{ outline: 2px solid var(--fokus-rand); outline-offset: 2px; }
.reiter.aktiv { background: var(--flaeche-segment-aktiv); border-color: var(--linie-stark); }
/* Im Reiter ist die Zahl eine Nebenangabe, kein Alarm: der Plan gibt ihr
gedimmten Text und normalen Schnitt — dann darf sie keine Gefahrenfläche
behalten, sonst stünde grauer Text auf Rot. Fläche also zurückgenommen. */
.reiter .zaehler { color: var(--text-gedimmt); font-weight: var(--schnitt-normal);
margin-left: var(--raum-1); background: transparent;
padding: 0; min-width: 0; }
.reiter[disabled] { color: var(--text-deaktiviert); cursor: not-allowed; }
.pille[disabled] { color: var(--text-deaktiviert); cursor: not-allowed; }
/* ---------- Feld, Auswahlfeld, Ankreuzfeld ------------------ */
/* Wichtig: Diese Element-Selektoren stehen ausschließlich hier, in style.css.
Keine zweite Datei fasst sie an. Das ist die Regel, an der der frühere
Balken-Fehler hing. */
input[type="text"], input[type="search"], input[type="date"], input[type="number"],
input[type="email"], input[type="tel"], input[type="time"], input[type="password"],
select, textarea, .feld {
height: var(--hoehe-bedien);
padding: 0 var(--raum-3);
background: var(--flaeche-feld);
color: var(--text);
border: 1px solid var(--linie);
border-radius: var(--radius-feld);
font-family: var(--schrift-text);
font-size: var(--groesse-bedien);
box-shadow: inset 0 1px 1px rgba(0,0,0,.35);
}
textarea { height: auto; padding: var(--raum-2) var(--raum-3); line-height: var(--zeilenhoehe); }
::placeholder { color: var(--text-gedimmt); opacity: 1; }
input:hover, select:hover, textarea:hover { border-color: var(--linie-stark); }
input:focus, select:focus, textarea:focus {
outline: none; border-color: var(--fokus-rand); box-shadow: var(--fokus-schein);
}
input[disabled], select[disabled], textarea[disabled] {
background: var(--flaeche-vertieft); color: var(--text-deaktiviert);
border-color: var(--linie); cursor: not-allowed;
}
.feld-fehler, input[aria-invalid="true"], select[aria-invalid="true"] {
border-color: var(--melden-fehler);
}
.feld-fehler-text { color: var(--gefahr-text); font-size: var(--groesse-klein);
margin-top: var(--raum-1); }
.feld-beschriftung { font-size: var(--groesse-hinweis); font-weight: var(--schnitt-halb);
color: var(--text-gedimmt); margin-bottom: var(--raum-1); display:block; }
.formular-breit .feld-beschriftung { /* lange Formulare: Beschriftung links */
display: inline-block; width: 200px; text-align: right;
padding-right: var(--raum-4); margin: 0;
font-size: var(--groesse-bedien); font-weight: var(--schnitt-fett); color: var(--text);
}
input[type="checkbox"], input[type="radio"] {
width: 16px; height: 16px; accent-color: var(--gold);
background: var(--flaeche-feld); border: 1px solid var(--linie);
height: 16px;
}
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible {
outline: 2px solid var(--fokus-rand); outline-offset: 2px;
}
/* ---------- Tabelle und Liste ------------------------------- */
/* Zustand „deaktiviert" gibt es für Zeilen nicht; erledigte Zeilen werden
zurückgenommen. */
.tabelle { width:100%; background: var(--flaeche-karte);
border: 1px solid var(--linie); border-radius: var(--radius-karte);
overflow: hidden; }
/* Phase 4: die Übergabe legt die Kopfzeile auf 11 px / 700 / Versalien und
0,8 px gesperrt fest (vorher 13 px / 0,4 px). Kleiner und weiter gesperrt —
der Kopf soll die Spalte benennen, nicht mit den Daten um Aufmerksamkeit
ringen. Gilt für ALLE Tabellen, nicht nur die Vorgangsliste: eine Kopfzeile
in zwei Größen wäre die nächste Abweichung. */
.tabelle-kopf { height: var(--hoehe-zeile); background: var(--flaeche-vertieft);
border-bottom: var(--linie-kopf-breite) solid var(--linie);
font-size: var(--groesse-winzig); font-weight: var(--schnitt-fett);
color: var(--text-zweit); letter-spacing: .8px; text-transform: uppercase; }
/* Der Radius steht hier, weil die Tabelle der Übergabe `.zeile` ausdrücklich
`--radius-klein` zuweist und die Rolle sonst niemand liest. Sichtbar wird er
erst, wo die Zeile eine eigene Fläche hat (beim Überfahren, im Zustand
„aktiv") — in einer Liste mit Trennlinien bleibt er wirkungslos, und das ist
richtig: die Übergabe beschreibt Listenzeilen selbst mit „Trennlinie". */
.zeile { height: var(--hoehe-zeile); border-top: 1px solid var(--linie);
border-radius: var(--radius-klein);
font-size: var(--groesse-text); color: var(--text-zweit); }
.zeile:first-child { border-top: 0; }
.zeile:hover { background: var(--flaeche-ueberfahren); color: var(--text); }
.zeile:focus-visible{ outline: 2px solid var(--fokus-rand); outline-offset: -2px; }
.zeile.aktiv { background: var(--flaeche-segment-aktiv); }
.zeile.erledigt { color: var(--text-gedimmt); }
.zelle { padding: 0 var(--raum-3); }
.zelle-kennung { font-family: var(--schrift-mono); font-size: var(--groesse-hinweis);
color: var(--gold-text); }
.zeile.ueberfaellig .zelle-frist { color: var(--gefahr-text); font-weight: var(--schnitt-halb); }
.zeile-streifen { width: 6px; padding: 0; }
/* J1.2: „pauschal" ist keine Warnung und darf nicht wie eine aussehen — Rot
heißt in dieser App abgelaufen oder storniert. Es ist eine Herkunftsangabe:
diese Minuten hat niemand gestoppt. Deshalb kursiv und in der gedimmten
Textfarbe, damit die Zahl daneben die Hauptsache bleibt. */
.zeit-pauschal { font-style: italic; color: var(--text-gedimmt); }
/* A5a: still. Rot heißt in dieser App abgelaufen oder storniert. Ein Zähler
sagt nur, wie viel in einer Bahn liegt – wenn „Nur Kenntnis 180" rot leuchtet,
schreit ausgerechnet die Bahn am lautesten, die keine Arbeit verlangt, und
die Farbe verliert überall sonst ihre Bedeutung. Zwei Rollen aus dem
Wertesatz, kein neuer Wert: die vertiefte Fläche und die zweite Textfarbe.
Gemessen 14,9:1 – die Zahl bleibt gut lesbar, nur eben unaufgeregt. */
.zaehler { min-width: 18px; height: 18px; padding: 0 var(--raum-1);
border-radius: var(--radius-feld);
background: var(--flaeche-vertieft); color: var(--text-zweit);
font-size: var(--groesse-winzig); font-weight: var(--schnitt-fett);
display:inline-flex; align-items:center; justify-content:center; }
.modal { width: min(var(--breite-dialog), 92vw); max-height: 90vh; overflow-y: auto;
background: var(--flaeche-karte); border: 1px solid var(--linie-stark);
border-radius: var(--radius-klein); box-shadow: var(--schatten-dialog);
padding: 0; /* F7: das Scrollen bleibt hier drin */
overscroll-behavior: contain;
}
/* J2.6: Kopf und Knopfleiste bleiben stehen, der Inhalt scrollt darunter.
Vorher scrollte der GANZE Dialog (`.modal` mit max-height und overflow-y),
und die Knopfleiste ging mit — bei „Neuer Vorgang", „In die Ablage" und
„Dokument umstellen" lag sie unter dem Fensterrand, und wer speichern
wollte, musste erst suchen.
Sticky statt Flex-Gerüst mit ausdrücklicher Absicht: die 117 Dialoge tragen
ihren Inhalt OHNE Umhüllung zwischen Kopf und Fuß. Ein Flex-Aufbau bräuchte
in jedem einzelnen ein zusätzliches Element; sticky wirkt mit zwei Regeln
und ohne einen einzigen Eingriff ins Markup. */
.modal-kopf { padding: var(--raum-4) var(--raum-5); border-bottom: 1px solid var(--linie);
font-size: var(--groesse-abschnitt); font-weight: var(--schnitt-halb);
position: sticky; top: 0; z-index: 2; background: var(--flaeche-karte); }
.modal-inhalt { padding: var(--raum-5); }
/* Der sichtbare Hinweis, dass unterhalb noch etwas folgt. Er steht NUR dann da
(die Klasse setzt `modalScrollPruefen()`), sonst wäre er eine Behauptung. */
.modal.mehr-unten .modal-aktionen { box-shadow: 0 -10px 14px -10px var(--flaeche-abdunklung); }
/* ---------- Meldungen --------------------------------------- */
/* Phase 3, und die Tafel sagt es wörtlich: „getönte Fläche statt 2-px-Rahmen".
Vorher trugen alle drei Meldungen `background: transparent` und einen 2 px
starken Rahmen in der Meldefarbe — die Farbe steckte allein im Strich, die
Meldung selbst blieb Seitenfläche. Jetzt trägt die Fläche die Farbe und der
Rahmen ist ein Haarstrich. Die Schrift wechselt dabei von `--text-zweit` auf
`--text`: auf einer getönten Fläche steht der Text, nicht daneben. */
.hinweis { border: 1px solid var(--melden-hinweis); border-radius: var(--radius-feld);
padding: var(--raum-3) var(--raum-4); background: var(--st-aktiv-flaeche);
color: var(--text); font-size: var(--groesse-bedien); }
.hinweis-fehler { border-color: var(--melden-fehler); background: var(--st-hoch-flaeche); }
.hinweis-erfolg { border-color: var(--melden-erfolg); background: var(--st-erledigt-flaeche); }
.banner-fristen { display:flex; align-items:center; justify-content:space-between;
gap: var(--raum-4); padding: var(--raum-2) var(--raum-4);
border: 1px solid var(--melden-fehler); border-radius: var(--radius-feld);
background: var(--st-hoch-flaeche); color: var(--st-hoch-text);
font-size: var(--groesse-hinweis); font-weight: var(--schnitt-halb); }
/* ---------- Editor-Werkzeugleiste --------------------------- */
/* Ausdrücklich nicht übernommen: Schriftart-, Schriftgröße-, Textfarbe- und
Hintergrundfarbe-Auswahl. Die Leiste behält genau die heutigen Werkzeuge
(F, K, U, Liste, Link, Vorlage, =, @, #, Zeit). */
.editor-leiste { display:flex; gap: var(--raum-1); padding: var(--raum-2);
background: var(--flaeche-vertieft); border: 1px solid var(--linie);
border-bottom: 0; border-radius: var(--radius-feld) var(--radius-feld) 0 0; }
.editor-leiste .knopf-still { height: 28px; }
/* Klapppfeil: ein Symbol, zwei Zustände. Aufgeklappt zeigt es nach unten,
statt ein zweites Zeichen zu brauchen. */
.klapp-pfeil { transition: transform .12s; }
details[open] > summary .klapp-pfeil,
details[open] > .mailz-zeile .klapp-pfeil,
details[open] > .mailtext-summary .klapp-pfeil { transform: rotate(90deg); }
/* ---------- Dialog: Kopf, Inhalt, Fuß ---------------------- */
/* Der Plan verlangt drei Zonen mit Trennlinien und die Knöpfe rechts unten.
Die 117 Dialoge der App tragen ihre Überschrift als und ihre Knöpfe in
.modal-aktionen, ohne Umhüllung dazwischen. Statt 117 Markup-Umbauten
bekommen Kopf und Fuß ihre Zonen über negative Seitenränder — dasselbe
Ergebnis, kein Eingriff in den Inhalt. Der Dateibetrachter bleibt außen vor,
er füllt seine Fläche selbst. */
.modal:not(.modal-viewer) { padding: 0 var(--raum-5) var(--raum-5); }
.modal:not(.modal-viewer) > h2 {
margin: 0 calc(var(--raum-5) * -1) var(--raum-4);
padding: var(--raum-4) var(--raum-5);
border-bottom: 1px solid var(--linie);
font-family: var(--schrift-text);
font-size: var(--groesse-abschnitt);
font-weight: var(--schnitt-halb);
color: var(--text);
}
.modal:not(.modal-viewer) > .modal-aktionen {
margin: var(--raum-5) calc(var(--raum-5) * -1) 0;
padding: var(--raum-4) var(--raum-5);
border-top: 1px solid var(--linie);
display: flex; justify-content: flex-end; gap: var(--raum-2);
/* Der Fuß bleibt am unteren Rand stehen, auch wenn der Inhalt scrollt —
sonst steht „Speichern" auf niedrigen Fenstern unter der Falte. */
position: sticky;
bottom: 0;
background: var(--flaeche-karte);
}
/* ------------------------------------------------------------
L2.1 — Der Umschalter für hell / dunkel / System
Ein Baustein, zwei Einbauorte (Kopfleiste und Einstellungen).
Er trägt alle drei Stellungen sichtbar nebeneinander statt eines
Knopfes zum Durchklicken: bei drei Zuständen weiß man sonst nie,
was der nächste Klick tut, und „System" ist von „gerade hell"
nicht zu unterscheiden.
------------------------------------------------------------ */
.modus-schalter {
display: inline-flex;
flex: none;
gap: 0;
padding: 2px;
background: var(--flaeche-vertieft);
border: 1px solid var(--linie);
border-radius: var(--radius-pille);
}
.modus-taste {
height: 26px;
padding: 0 var(--raum-3);
border: 0;
background: none;
border-radius: var(--radius-pille);
color: var(--text-gedimmt);
font-family: var(--schrift-text);
font-size: var(--groesse-hinweis);
font-weight: var(--schnitt-halb);
letter-spacing: var(--laufweite);
white-space: nowrap;
cursor: pointer;
}
/* „Dunkel" und „System" standen mit `--text-gedimmt` bei 4,27 : 1 — knapp unter
der Schwelle, an einem Schalter, den man liest, bevor man ihn drückt.
`--text-zweit` ist die nächste Stufe nach oben und bleibt leiser als die
gedrückte Taste.
ICH HATTE HIER ZUERST `--leiste-text-leise` STEHEN, in der Annahme, die
Kopfleiste sei wie die Symbolleiste in beiden Modi dunkel. Gemessen: sie ist
es NICHT, sie folgt dem Modus — und der Wert fiel damit auf 2,03 : 1, also
schlechter als vorher. Die Leisten-Rollen gehören der Symbolleiste allein. */
.modus-taste { color: var(--text-zweit); }
.modus-taste:hover { color: var(--text); }
.modus-taste[aria-pressed="true"] {
background: var(--flaeche-segment-aktiv);
color: var(--text);
}
.modus-taste:focus-visible {
outline: 2px solid var(--fokus-rand);
outline-offset: -2px;
}
/* L2: Die Bildmarke je Modus. Immer genau eine der beiden ist sichtbar; die
Entscheidung trifft die Stilvorlage, nicht JavaScript — dadurch steht das
richtige Bild schon beim ersten Zeichnen.
UMGEDREHT am 13.08.2026, und der Grund gehört hierher, weil die Regel sonst
das nächste Mal genauso zurückkommt: die Umschaltung war richtig, solange die
Leiste im hellen Modus WEISS war. Seit dem Design-Umbau ist die Leiste in
BEIDEN Modi dunkel (`--flaeche-leiste` #08090B dunkel, #16181C hell). Damit
zeigte der helle Modus die dunkle Fassung des Schriftzugs auf dunklem Grund —
das Logo war praktisch weg. Gemessen wurde es nicht: eine Kontrastprüfung
zählt Textknoten, und ein Logo ist ein Bild. Gefunden hat es der Blick.
Die dunkle Fassung (`luvaris-logo.png`, für weiße Flächen) bleibt im Markup
stehen. Sie kostet nichts Sichtbares und wird in dem Moment wieder gebraucht,
in dem die Leiste im hellen Modus doch hell wird. */
.brand-logo-dunkel { display: block; } /* die Fassung FÜR dunkle Flächen — beide Modi */
.brand-logo-hell { display: none; } /* die Fassung für weiße Flächen — derzeit nirgends */