/* ========================================================================== modus.css -- der Dunkelmodus der Oberflaeche und sein Knopf. Angelegt 2026-09-10, Auftrag EL-20260910-61df70b6 (Elina Gerlinger): "Dark-Mode-Toggle ... server-seitig gespeichert ... fuer alle Nutzer gleichermassen ... Hintergrund #0f0f10, Oberflaechen #1a1a1c, Akzent Qi-Blanco-Gold #c8a96e, Text #f0ede8, Raender #2e2e32." WIE ES WIRKT: der Dienst schreibt den gespeicherten Modus als `data-modus="hell|dunkel"` ans jeder Seite (vorschau_modus.py). Alles hier haengt an `html[data-modus="dunkel"]`; im hellen Modus ist die Datei bis auf den Knopf unten wirkungslos. Kein Skript, kein Aufblitzen. KEINE ZWEITE OBERFLAECHE: system.css fuehrt die Palette als Tokens, und diese Datei definiert DIESELBEN Namen neu. Jedes Bauteil, das Tokens benutzt, ist damit automatisch dunkel. Nur die Literale in stil.css (der `sicht`-Block, weisse Schrift auf Akzent-Knoepfen) brauchen unten eine benannte Gegenregel -- und die stehen HIER, damit man sie findet. JEDE TEXT-PAARUNG IST GEMESSEN (WCAG 2.2 1.4.3, >= 4,5:1; Werte im RESULT des Auftrags): Text auf Flaeche 14,9:1, leise Schrift 7,0:1, Gold als Link 7,7:1, Gut/Warn/Hart-Text auf ihrem Grund 8,6 / 8,7 / 7,9:1. Weiss auf Gold waere 2,2:1 -- deshalb tragen Gold-Knoepfe dunkle Schrift. RUECKWEG: vorschau.conf MODUS_SCHALTER=off -> der Dienst liefert diese Datei nicht mehr aus (404), setzt jede Seite auf `hell` und nimmt Knopf und Route weg. Der gespeicherte Wert bleibt liegen; `on` bringt ihn zurueck. ========================================================================== */ html[data-modus="dunkel"] { color-scheme: dark; /* Rollbalken, Formularfelder,
*/ /* --- Elinas fuenf Werte, woertlich ---------------------------------- */ --c-grund: #0f0f10; /* die Seite */ --c-flaeche: #1a1a1c; /* eine Karte */ --c-akzent: #c8a96e; /* HANDLUNG: Link, Knopf -- Qi-Blanco-Gold */ --c-text: #f0ede8; /* Schrift */ --c-linie: #2e2e32; /* Trennlinie / Rand */ /* --- daraus abgeleitet, mit derselben Bedeutung wie im Hellen -------- */ --c-linie-zart: #232326; /* Haarlinie in Tabellen und Achsen */ --c-text-leise: #a8a49c; /* Zweitschrift (7,0:1 auf der Flaeche) */ --c-akzent-grund: #2b2519; /* Gold-Tint fuer aktive Menuepunkte, Hinweise */ --c-akzent-hoch: #d9bd86; /* Gold im Schwebezustand (Zusage-Knopf) */ --c-gut: #5fbf7f; --c-gut-grund: #17301f; --c-gut-text: #8fd9a6; --c-warn: #f0a04b; /* Orange, damit es kein zweites Gold ist */ --c-warn-grund: #33220f; --c-warn-text: #f5b86e; --c-hart: #f07167; --c-hart-grund: #351b19; --c-hart-text: #f5a09a; --c-neutral: #9a9a9f; /* NICHT MESSBAR bleibt grau, nie gelb */ --c-neutral-grund:#26262a; --c-daten: #6ea8fe; /* die Datenfarbe der Balken (eine Hue) */ --c-daten-hell: #2d4a75; --c-daten-dunkel: #9cc3ff; --c-hinweis-linie: #4a3f2a; --c-hinweis-text: #e3cfa4; --schatten: 0 1px 2px rgba(0,0,0,.5), 0 1px 1px rgba(0,0,0,.4); } /* Schwebende Ebenen (Menue "Mehr", Tooltips) brauchen auf Dunkel einen Rand statt eines Schattens, sonst verschmelzen sie mit der Seite. */ html[data-modus="dunkel"] .dash-menue { box-shadow: 0 8px 24px rgba(0,0,0,.6); border-color: var(--c-linie); } html[data-modus="dunkel"] .profil-blatt { box-shadow: 0 8px 24px rgba(0,0,0,.6); border-color: var(--c-linie); } /* Gold-Knoepfe: dunkle Schrift (8,3:1) statt weiss (2,2:1). NICHT `.knopf`: den setzt stil.css auf Flaeche + Textfarbe (die Urteils-Knoepfe "Das will ich so / nicht so" tragen ihre Gut-/Hart-Farbe) -- gemessen am 10.09. an der Post-Karte, wo eine erste Fassung dieser Regel sie dunkel auf dunkel schrieb. */ html[data-modus="dunkel"] button.sicht-knopf--tun, html[data-modus="dunkel"] .karte button { color: #141310; } /* AUSNAHME ZUR ZEILE DARUEBER: der Markier-Knopf an der Kachel ("als Test-Reel markieren", EL-20260917-79f7b830) ist KEIN Gold-Knopf, sondern ein Textknopf auf durchsichtigem Grund -- die dunkle Schrift von oben schriebe ihn dunkel auf dunkel. Gemessen am Bautag im Browser: der Knopf war im Dunkelmodus praktisch unsichtbar, waehrend dieselbe Regel fuer die gefuellten Knoepfe daneben genau richtig ist. Deshalb eine Gegenregel und keine Aenderung dort: die gefuellten Knoepfe brauchen sie weiterhin. */ html[data-modus="dunkel"] .karte .veroeff-testreel-knopf { color: var(--c-akzent); background: transparent; } /* Formularfelder: Flaeche und Schrift aus den Tokens, nicht aus dem Browser. */ html[data-modus="dunkel"] input:not([type="range"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]), html[data-modus="dunkel"] textarea, html[data-modus="dunkel"] select { background: var(--c-flaeche); color: var(--c-text); border-color: var(--c-linie); } html[data-modus="dunkel"] .schieber input[type=range] { accent-color: var(--c-akzent); } /* Die Literale des `sicht`-Blocks in stil.css (Visualisierungs-Sichten). */ html[data-modus="dunkel"] .sicht-knopf { background: var(--c-flaeche); color: var(--c-text); border-color: var(--c-linie); } html[data-modus="dunkel"] .sicht-knopf:hover, html[data-modus="dunkel"] .sicht-knopf:focus { background: var(--c-grund); border-color: var(--c-akzent); } /* DIE ZWEI ENTSCHEIDUNGS-KNOEPFE DER POST-KACHELN ("Das will ich so" / "... nicht so"), nachgezogen 2026-09-16. WARUM SIE HIER STEHEN MUESSEN: die Regel `.sicht-knopf` eine Zeile weiter oben traegt (0,2,1) und schlaegt damit JEDE spaeter in stil.css angelegte Modifikator-Klasse (0,1,0). Als die Post-Kacheln am 2026-09-16 zwei wirksame Knoepfe bekamen (`--zusagen`, `--absagen`), erbten beide im Dunkeln deshalb die neutrale Flaeche: im Browser gemessen waren Zusage, Absage und ein gewoehnlicher Knopf Byte fuer Byte gleich (#1a1a1c / #f0ede8 / #2e2e32) -- im Hellen dagegen blau, rot und weiss. Die Entscheidung, die Elina auf der Kachel trifft, war damit im Dunkeln nicht mehr an der Farbe ablesbar. Die Klassen stehen zu zweit am Element (`class="sicht-knopf sicht-knopf--zusagen"`), darum bindet die Doppel- Klasse hier (0,3,1) und gewinnt, ohne von der Reihenfolge abzuhaengen. GEMESSEN (WCAG 2.2 1.4.3, >= 4,5:1): Zusage dunkle Schrift auf Gold 8,28:1 (weiss waere 2,24:1) Zusage Gold gegen die Kachelflaeche 7,74:1 -- der Knopf traegt Absage Rotschrift auf Rotgrund 7,85:1 Absage im Schweben dunkel auf Rot 6,43:1 (weiss waere 2,89:1) Die weisse Schrift, die stil.css beiden Knoepfen gibt, ist im Hellen richtig und im Dunkeln der bekannte Fehlgriff -- deshalb kehrt sie hier um, statt in stil.css zu verschwinden. */ html[data-modus="dunkel"] .sicht-knopf.sicht-knopf--zusagen { background: var(--c-akzent); border-color: var(--c-akzent); color: #141310; } html[data-modus="dunkel"] .sicht-knopf.sicht-knopf--zusagen:hover, html[data-modus="dunkel"] .sicht-knopf.sicht-knopf--zusagen:focus { background: var(--c-akzent-hoch); border-color: var(--c-akzent-hoch); color: #141310; } html[data-modus="dunkel"] .sicht-knopf.sicht-knopf--absagen { background: var(--c-hart-grund); border-color: var(--c-hart); color: var(--c-hart-text); } html[data-modus="dunkel"] .sicht-knopf.sicht-knopf--absagen:hover, html[data-modus="dunkel"] .sicht-knopf.sicht-knopf--absagen:focus { background: var(--c-hart); border-color: var(--c-hart); color: #141310; } /* DIE ZWEI KNOEPFE DER BILD-REVIEW-KACHEL ("Bild passt — bestaetigen" / "Aenderung anfordern" und seit dem 21.09. "Canva-Link hinterlegen"), nachgezogen 2026-09-21. DERSELBE MECHANISMUS WIE BEI --zusagen/--absagen darueber, nur eine Runde spaeter: `--annehmen` und `--nachbessern` kamen am 2026-09-17 nach der Dunkelmodus-Nachziehung vom 16.09. dazu und erbten seither im Dunkeln die neutrale Flaeche der Regel `.sicht-knopf` (0,2,1 schlaegt 0,1,0). `probe_dunkelmodus_am_rand.py` hat genau das gemeldet; die Klassen standen in der Befundliste, bevor dieser Anbau begann (git 1305c111c^: 4 Vorkommen in stil.css, 0 Gegenregeln hier). WAS DABEI VERLOREN GING, ist nicht Schoenheit: `--annehmen` traegt im Hellen den Akzent als RAND, um sich vom startenden "Ja" zu unterscheiden (stil.css sagt das ausdruecklich). Im Dunkeln war dieser Rand weg, und "Bild passt — bestaetigen" sah aus wie ein gewoehnlicher Knopf. GEMESSEN (WCAG 2.2 1.4.3, >= 4,5:1) gegen die Flaeche #1a1a1c: annehmen Gold #c8a96e auf Flaeche 7,74:1 annehmen im Schweben dunkel auf Gold 8,28:1 (weiss waere 2,24:1) nachbessern Text #f0ede8 auf Flaeche 14,9:1 `--nachbessern` bleibt ausdruecklich neutral -- es bekommt hier keine Farbe, sondern genau die Werte, die stil.css ihm zuschreibt. Es ist der NEUTRALE der drei Knoepfe, und das soll man im Dunkeln auch sehen. */ html[data-modus="dunkel"] .sicht-knopf.sicht-knopf--annehmen { background: var(--c-flaeche); border-color: var(--c-akzent); color: var(--c-akzent); } html[data-modus="dunkel"] .sicht-knopf.sicht-knopf--annehmen:hover, html[data-modus="dunkel"] .sicht-knopf.sicht-knopf--annehmen:focus { background: var(--c-akzent); border-color: var(--c-akzent); color: #141310; } html[data-modus="dunkel"] .sicht-knopf.sicht-knopf--nachbessern { background: var(--c-flaeche); border-color: var(--c-linie); color: var(--c-text); } html[data-modus="dunkel"] .sicht-knopf.sicht-knopf--nachbessern:hover, html[data-modus="dunkel"] .sicht-knopf.sicht-knopf--nachbessern:focus { background: var(--c-grund); border-color: var(--c-text-leise); } html[data-modus="dunkel"] .sicht-zahl, html[data-modus="dunkel"] .sicht-station { background: var(--c-flaeche); border-color: var(--c-linie); } html[data-modus="dunkel"] .sicht-zahl-einheit { color: var(--c-text-leise); } html[data-modus="dunkel"] .sicht-tabelle th, html[data-modus="dunkel"] .sicht-tabelle td { border-color: var(--c-linie); } html[data-modus="dunkel"] .sicht-tabelle th { background: var(--c-neutral-grund); } html[data-modus="dunkel"] .sicht-rahmen { background: var(--c-flaeche); border-color: var(--c-linie); } html[data-modus="dunkel"] .sicht-station[data-zeit="gemessen"], html[data-modus="dunkel"] .sicht-station[data-zeit="bekannt"] { border-left-color: var(--c-gut); } html[data-modus="dunkel"] .sicht-station[data-zeit="geparst"] { border-left-color: var(--c-warn); } html[data-modus="dunkel"] .sicht-station[data-zeit="unbekannt"] { border-left-color: var(--c-neutral); } html[data-modus="dunkel"] .sicht-leer { background: var(--c-neutral-grund); color: var(--c-text-leise); border-color: var(--c-neutral); } html[data-modus="dunkel"] .sicht-hinweis { background: var(--c-neutral-grund); border-left-color: var(--c-neutral); } html[data-modus="dunkel"] .sicht-hinweis--warnung { background: var(--c-warn-grund); border-left-color: var(--c-warn); } html[data-modus="dunkel"] .sicht-warnung { background: var(--c-hart-grund); border-color: var(--c-hart); } html[data-modus="dunkel"] .sicht-versandsperre { background: var(--c-gut-grund); border-color: var(--c-gut); } html[data-modus="dunkel"] .sicht-feld input[type="text"], html[data-modus="dunkel"] .sicht-feld textarea, html[data-modus="dunkel"] .sicht-feld select { background: var(--c-flaeche); border-color: var(--c-linie); } html[data-modus="dunkel"] .sicht-pflicht { color: var(--c-hart); } html[data-modus="dunkel"] .sicht-diagramm-svg { color: var(--c-text); } /* Einzelne Literale ausserhalb des sicht-Blocks. */ html[data-modus="dunkel"] .kz-etikett, html[data-modus="dunkel"] .kz-alt { color: var(--c-warn-text); } html[data-modus="dunkel"] .agent-status--laeuft { color: var(--c-gut); } html[data-modus="dunkel"] .aufwand-achse--luecke { background: repeating-linear-gradient(45deg, var(--c-hart-grund) 0 4px, var(--c-flaeche) 4px 8px); } html[data-modus="dunkel"] .fehlt { background: repeating-linear-gradient(45deg, #232326, #232326 10px, #2e2e32 10px, #2e2e32 20px); } html[data-modus="dunkel"] .p-avatar { background: linear-gradient(135deg, #3a3a40, #26262a); } /* ========================================================================== Der Knopf. Steht am rechten Ende der Bereichswahl, in beiden Modi. Icon-only, damit die EINE Zeile der Leiste auch am Telefon haelt; der Satz dazu steht in title/aria-label -- und er nennt, dass es fuer alle gilt. ========================================================================== */ .modus-form { display: inline-flex; margin: 0 0 0 auto; flex: 0 0 auto; } .dash-mehr + .modus-form { margin-left: var(--s-2); } /* "Mehr" traegt schon das auto */ .modus-knopf { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-1); height: 32px; min-width: 32px; padding: 0 var(--s-2); border: 1px solid var(--c-linie); border-radius: var(--r-klein); background: var(--c-flaeche); color: var(--c-text-leise); font: 500 var(--t-fuss) var(--schrift); cursor: pointer; white-space: nowrap; } .modus-knopf:hover { color: var(--c-text); background: var(--c-grund); } .modus-knopf svg { width: 16px; height: 16px; display: block; } .modus-knopf .modus-wort { display: none; } /* DAS WORT ERST AB 840 px, NICHT AB 800 (Job 20261001-vorschau-leiste-mehr- griff-gekappt-seit-reels-cutter-prio45). Es ist das einzige Wort der Leiste, dessen Breite wechselt: "Hell" 60 px, "Dunkel" 78 px. Seit der Griff "Mehr" nicht mehr schrumpft und ein aktiver Name darin sieben Zeichen behaelt (system.css), lief die Leiste auf /aufwand mit "Dunkel" bis 829 px ueber (gemessen, Chromium: +10 px bei 820). Die uebrigen Woerter bleiben bei 800: an dieser Schwelle haengt auch das Schere-Zeichen des Reels- Cutter-Knopfes (templates/bereichswahl.html), und die beiden muessen zusammen umschalten. Ab 840 px passt die Leiste mit "Dunkel" auch auf /aufwand (10 px Luft). */ @media (min-width: 840px) { .modus-knopf .modus-wort { display: inline; } } .modus-knopf .modus-sonne { display: none; } .modus-knopf .modus-mond { display: block; } html[data-modus="dunkel"] .modus-knopf .modus-sonne { display: block; } html[data-modus="dunkel"] .modus-knopf .modus-mond { display: none; } html[data-modus="dunkel"] .modus-knopf { color: var(--c-akzent); border-color: var(--c-akzent-grund); } /* AM TELEFON KOSTET DER KNOPF FAST NICHTS -- und das ist gemessen, nicht geschaetzt: die Bereichswahl ist bei 390 px Fensterbreite 350 px breit (Inhaltsbreite, zentriert), und ein Knopf mit 34 px plus 8 px Abstand schob sie auf 394 px -- vier Pixel aus dem Bild, auf jeder Seite (probe_oberflaechen_standard, Arm `rahmen`, 2026-09-10). Deshalb unter 600 px: der Knopf auf Icon plus 4 px, und die Eintraege der Leiste mit --s-2 statt --s-3 Innenabstand -- beides Werte des Systems, kein freier Pixel. Ergebnis: Leiste 354 px bei 390 px Fenster (36 px Luft). */ @media (max-width: 599px) { .modus-knopf { padding: 0 var(--s-1); min-width: 28px; } .dash-mehr + .modus-form { margin-left: var(--s-1); } .bereichswahl .bereich-knopf, .bereichswahl .dash-mehr > summary { padding: 0 var(--s-2); } }