/* ══════════════════════════════════════════════════════════════════════════
Der helle Modus
══════════════════════════════════════════════════════════════════════════
Adrians Vorgabe: "nicht jeder packt dark mode, aber dark mode bleibt first
wenn jemand rein kommt, aber man kann umschalten."
Daraus folgt die Bauform, und zwar zwingend:
dunkel = KEIN Attribut am . Das ist der Auslieferungszustand.
hell = . Nur wer umschaltet, bekommt es.
`prefers-color-scheme` wird bewusst NICHT ausgewertet. Wer sein System auf
hell gestellt hat, sieht AdenAI trotzdem zuerst dunkel. Das ist eine
Produktentscheidung, keine Nachlaessigkeit - wer sie umdreht, dreht die
Marke um.
── Warum eine eigene Datei und nicht tailwind-input.css ──────────────────
1. tailwind-input.css ist eine eingetragene Ausnahme der 400-Zeilen-Grenze
(775 Zeilen). Der Waechter dazu: "Aufteilen, nicht die Zahl hochsetzen."
2. Hier steht nichts, was der Tailwind-Compiler braucht. Es sind
Variablen-Ueberschreibungen und eine Handvoll Regeln. Genau derselbe Weg,
den seiten-grund.css schon geht.
3. Der ganze helle Modus liegt an EINER Stelle. Wer ihn sucht, findet ihn am
Dateinamen; wer ihn abschaltet, loescht eine , die Bildlaufleiste, den Datumswaehler, den
Autofill-Kasten. Ohne die Angabe raet er, und er raet immer hell - genau
deshalb war ein aufgeklapptes im dunklen Modus weiss. Am
gerenderten Bild nachgemessen: ein Kaestchen kommt ohne die Zeile auf
#ffffff (L* 100), mit `dark` auf #3b3b3b (L* 24,9).
Beide Werte stehen hier zusammen und nicht je einer pro Datei, aus demselben
Grund wie bei --tour-abdunklung am Ende dieser Datei: es ist EIN Mechanismus,
und wer ihn sucht, soll beide Haelften auf einem Bildschirm sehen. Der
dunkle Wert ist damit die einzige Regel dieser Datei ohne `data-theme` -
siehe den Kopf oben, wo dieselbe Ausnahme fuer --tour-abdunklung steht.
Die Systemeinstellung "automatisch" braucht keine dritte Regel. AdenAI
wertet die Vorliebe des Systems bewusst nicht aus (siehe Kopf), dunkel ist
der Auslieferungszustand - und ab jetzt samt der Teile, die der Browser malt.
Belegt in beide Richtungen von tests/test_kontrast_gerendert.py. */
:root {
color-scheme: dark;
}
:root[data-theme="hell"] {
color-scheme: light;
/* ── Flaechen ───────────────────────────────────────────────────────────
bg-base ist der Seitengrund und minimal kuehl eingefaerbt, nicht weiss:
reines Weiss unter reinweissen Karten laesst die Karten verschwinden.
bg-card ist das Weiss DARUEBER. bg-surface und bg-surface-hover muessen
hier DUNKLER werden als es - ueber Weiss ist kein Platz. Auch bg-surface,
das bis 2026-08-22 ebenfalls #ffffff trug und von bg-card nicht zu
unterscheiden war: das Kleinteil steht eine Stufe NEBEN der Karte, in die
Richtung, in der der Modus Platz hat - im Dunkeln nach oben, hier nach
unten. Leiter card 100,00 / base 97,53 / surface 95,72 / hover 93,58.
Beide Rollen: tests/test_flaechen_leiter.py. */
--color-bg-base: #f7f8f9;
--color-bg-card: #ffffff;
--color-bg-surface: #f1f3f4;
--color-bg-surface-hover: #eaedef;
/* ── Raender: umgekehrtes Vorzeichen ────────────────────────────────────
--color-border bleibt Dekoration (Kartenkante, Trennlinie), fuer die
stellt WCAG keine Anforderung. Leise ist dort gewollt, im Hellen genauso
wie im Dunkeln: 1,21:1 ueber bg-base, 1,28:1 ueber Weiss.
Die vier lauten Tokens sind Bedienelemente und muessen 3:1 halten.
Gemessen gegen den unguenstigsten der drei Gruende (bg-surface-hover):
border-btn / -strong / -hover #7b848a 3,24:1
border-btn-hover #636c72 4,45:1
Und der Sprung beim Ueberfahren geht hier nach UNTEN: L* 54,6 -> 44,7,
also 9,9 Punkte dunkler. Im Dunkeln sind es 9,8 Punkte heller. Dieselbe
Regel, gespiegeltes Vorzeichen - deshalb prueft der Test seit dem
2026-08-21 den Betrag und die Richtung getrennt.
Nach oben ist der Hover-Rand weiterhin gedeckelt: er darf nicht lauter
sein als das Kleingedruckte (L* 44,7 gegen text-muted L* 41,4). */
--color-border: #dfe4e7;
--color-border-hover: #7b848a;
--color-border-strong: #7b848a;
--color-border-btn: #7b848a;
--color-border-btn-hover: #636c72;
/* ── Text ───────────────────────────────────────────────────────────────
Nicht Schwarz, sondern ein sehr dunkles Kuehlgrau - reines #000 auf Weiss
flimmert bei laengerem Lesen. Gemessen gegen bg-base / bg-surface /
bg-surface-hover:
text-primary 17,44 18,54 15,77
text-secondary 7,39 7,86 6,68
text-muted 5,78 6,14 5,22 */
--color-text-primary: #0f1417;
--color-text-secondary: #4a5359;
--color-text-muted: #5a6368;
/* ── Die Marke bleibt die Marke ─────────────────────────────────────────
Die vier Aurora-Stationen aendern sich NICHT. Sie sind der Verlauf, aus
dem .btn-aurora seine Flaeche nimmt, und darauf steht dunkle Schrift
(#04110d, 14,5:1 auf Gruen, 12,4:1 auf Tuerkis). Ein abgedunkelter
Knopfverlauf waere im Hellen nicht besser lesbar, nur stumpfer.
Wo derselbe Verlauf als SCHRIFT auftritt, ist es umgekehrt - siehe
--gradient-aurora am Ende dieses Blocks. */
/* ── Akzent: dieselbe Farbe, andere Rolle ───────────────────────────────
#22e8d0 auf Weiss ergibt 1,5:1. Als Linkfarbe, Fokusring und Chip-Schrift
ist das unbrauchbar. Der helle Akzent ist deshalb ein tiefes Tuerkis:
derselbe Farbton, andere Helligkeit. 5,87 / 6,24 / 5,31 gegen die drei
Gruende, als Fokusring also weit ueber den geforderten 3:1.
Die TINT-Flaeche geht den anderen Weg und bleibt das helle Marken-Tuerkis
bei 14 Prozent. Das ist der Punkt, an dem naives Umdrehen scheitert: eine
durchsichtige Flaeche verdunkelt einen hellen Grund, statt ihn
aufzuhellen. Getoent mit dem dunklen Akzent faellt der Chip-Text unter
4,5:1; getoent mit dem hellen bleibt die Flaeche fast weiss und der
dunkle Text steht mit 5,00 bis 5,78:1 darauf.
accent-border traegt dagegen den DUNKLEN Akzent - ein Rand muss sich vom
Grund abheben, und im Hellen heisst das dunkler. 2,43:1 zum Grund; im
dunklen Modus liegt dieselbe Kante bei 1,96:1, der helle Modus ist hier
also nicht schlechter, sondern besser. */
--color-accent: #006d62;
--color-accent-hover: #00544b;
--color-accent-muted: rgba(34, 232, 208, 0.14);
--color-accent-border: rgba(0, 109, 98, 0.55);
/* ── Status und Signale ─────────────────────────────────────────────────
Sechs Farben, zwei Rollen, und beide muessen halten:
als Schrift im eigenen Chip (`bg-X-muted text-X`, text-xs) 4,5:1
als deckender Punkt/Balken (`bg-X`, .leiste-punkt) 3:1
Die zweite Rolle ist der Grund, warum #00ffa8 im Hellen nicht bleiben
kann: als Punkt auf Weiss waere er mit 1,3:1 schlicht nicht da.
Gemessen, jeweils der schlechteste der drei Gruende:
Chip-Text deckender Punkt
accent 5,00 5,31
success 5,14 5,37
warning 5,14 5,71
danger 4,63 5,31
blue 4,89 5,39
purple 4,99 5,71
Die Tints tragen wie beim Akzent die HELLE Marken-Farbe. Deckkraft 0,12
bei Rot und Lila statt 0,14: beide sind dunkler als ihre Geschwister und
wuerden den Grund sonst so weit absenken, dass text-muted darauf unter
4,5:1 faellt (der bekannte blinde Fleck aus dem dunklen Modus, hier von
Anfang an mitgerechnet: schlechtester Wert 4,56:1). */
--color-blue: #0a6690;
--color-blue-muted: rgba(34, 184, 247, 0.14);
--color-purple: #7530d4;
--color-purple-muted: rgba(168, 85, 247, 0.12);
--color-success: #066e45;
--color-success-muted: rgba(0, 255, 168, 0.14);
--color-warning: #845000;
--color-warning-muted: rgba(245, 158, 11, 0.16);
--color-danger: #bc2020;
--color-danger-muted: rgba(240, 82, 82, 0.12);
/* ── Tiefe: Schatten statt Licht ────────────────────────────────────────
Auf Dunkel arbeitet man mit Licht, auf Hell mit Schatten. Die dunklen
Werte (rgba(0,0,0,0.5) und 0.6) sind auf Weiss plump: ein halbdeckendes
Schwarz unter einer Karte sieht aus wie ein Fehler, nicht wie Tiefe.
Zwei Ebenen je Schatten statt einer - eine enge, fast schwarze Kante und
ein weicher, weit gestreuter Kern. Das ist der Unterschied zwischen einer
Karte, die liegt, und einem Kasten mit grauem Rand. Der Farbton ist
nicht Schwarz, sondern dasselbe kuehle Dunkelblau wie der Text.
shadow-glow war im Dunkeln ein Leuchten. Ein Leuchten gibt es auf Weiss
nicht; daraus wird ein tuerkis eingefaerbter Schlagschatten, der dieselbe
Aufgabe erfuellt (dieses eine Element ist wichtiger als die anderen),
ohne so zu tun, als kaeme Licht aus dem Bildschirm. */
--shadow-sm: 0 1px 2px rgba(15, 23, 30, 0.06), 0 1px 3px rgba(15, 23, 30, 0.09);
--shadow-md: 0 2px 4px rgba(15, 23, 30, 0.05), 0 8px 20px -6px rgba(15, 23, 30, 0.16);
--shadow-glow: 0 6px 22px -6px rgba(0, 109, 98, 0.30);
/* ── Der Marken-Verlauf ALS SCHRIFT ─────────────────────────────────────
.text-aurora ist der einzige Ort, an dem der Verlauf Buchstaben faerbt:
das Logo, die grosse Fehlerziffer, das Abzeichen "Beliebt" (text-xs).
Auf Weiss faellt die hellste Station (#00ffa8) auf 1,34:1.
Ein Logo waere nach WCAG 1.4.3 ausgenommen. "Beliebt" ist es nicht, und
die Ziffer auf der Fehlerseite ist der einzige Inhalt, den es dort gibt.
Also wird der Verlauf abgedunkelt - Farbton und Reihenfolge bleiben, nur
die Helligkeit sinkt. Die vier Stationen kommen so auf 4,87 / 5,33 /
6,99 / 8,37 gegen bg-base; die gruene ist der Engpass und gibt die
Abdunklung vor.
Ueberschrieben wird --gradient-aurora und NICHT --gradient-aurora-btn.
Die beiden sind in tailwind-input.css seit jeher getrennt, genau dafuer:
--gradient-aurora faerbt Schrift (.text-aurora) und einen Rahmen
(.border-aurora), --gradient-aurora-btn faerbt die Knopf-Flaeche und
haengt direkt an --color-aurora-green/-teal. Die bleiben hell, also bleibt
der Knopf hell. Die vier abgedunkelten Stationen stehen hier als feste
Werte und nicht als vier neue Tokens: sie haben genau einen Ort. */
--gradient-aurora: linear-gradient(
100deg,
#007d53,
#0b7466,
#085b81,
#661daf
);
}
/* ══════════════════════════════════════════════════════════════════════════
Die Stellen, die keine Variable hatten
══════════════════════════════════════════════════════════════════════════
Vier Werte stehen in tailwind-input.css fest im Code statt in einem Token.
Sie werden hier nachgezogen, statt sie dort zu Tokens zu machen: die Datei
ist eine eingetragene Groessen-Ausnahme, und jede dieser vier Regeln ist
genau einmal noetig.
══════════════════════════════════════════════════════════════════════════ */
@layer components {
/* Ueberfahren von .btn-primary. Im Original rgba(34,232,208,0.2), also die
helle Markenfarbe - die stimmt im Hellen zufaellig weiter, nur ist der
Schritt von 0,14 auf 0,20 dort kaum sichtbar. 0,26 gibt dieselbe
Rueckmeldung wie im Dunkeln, ohne den Text unter 4,5:1 zu druecken
(gemessen 4,66:1 ueber bg-surface-hover). */
:root[data-theme="hell"] .btn-primary:hover {
background: rgba(34, 232, 208, 0.26);
}
/* Der Rand von .btn-danger zieht mit --color-danger mit. Im Original steht
dort rgba(240,82,82,0.3), das helle Rot - auf Weiss ergibt das ein
Rosa, das man fuer eine Trennlinie haelt. Hier der dunkle Wert bei 0,45. */
:root[data-theme="hell"] .btn-danger {
border-color: rgba(188, 32, 32, 0.45);
}
}
/* Die Bildlaufleiste. Dieselbe Rolle wie im Dunkeln - erkennbar, aber nicht
laut -, und dafuer im Hellen ein DUNKLERES Grau statt eines helleren. */
:root[data-theme="hell"] ::-webkit-scrollbar-thumb {
background: #c4cbcf;
}
:root[data-theme="hell"] ::-webkit-scrollbar-thumb:hover {
background: #a7b0b5;
}
/* Der Rueckfrage-Dialog verdunkelt die Seite hinter sich. rgba(3,4,5,0.8) ist
dafuer gebaut, dass darunter ohnehin fast Schwarz liegt. Auf einer hellen
Seite ist das ein schwarzer Vorhang; 0,45 auf einem kuehlen Dunkelblau
trennt genauso deutlich und laesst die Seite noch erkennen. */
:root[data-theme="hell"] dialog.aden-confirm::backdrop {
background: rgba(15, 23, 30, 0.45);
}
/* ── Dieselbe Abdunklung, zweiter Ort: die Tour ──────────────────────────
includes/tour_overlay.html schneidet mit einem 9999px grossen box-shadow
ein Loch um das Element, das gerade erklaert wird. Der Wert stand dort fest
im Inline-Style, und ein Inline-Style ist von hier aus nicht erreichbar -
deshalb eine Variable statt einer Ueberschreibung.
**Das war ein echter Fehler und keine Vorsichtsmassnahme.** Gemessen am
gerenderten Bild der Projektseite im hellen Modus: alles ausserhalb des
Lochs kam auf #343536, der fast schwarze Text darauf auf rund 2:1. Die
Rechnung dahinter ist trivial - 0,8 mal #030405 plus 0,2 mal #f7f8f9 ergibt
genau #343536 - und trotzdem faellt sie in keiner Token-Tabelle auf: der
Wert stand in keinem Token.
Der dunkle Wert steht hier mit, damit der ganze Mechanismus an einer Stelle
liegt. Das Template traegt denselben Wert zusaetzlich als var()-Rueckfall,
fuer den Fall, dass es diese Datei einmal nicht gibt. */
/* ── Dieselbe Abdunklung, dritter Ort: `.leiste-schirm` (Fahrplan 312) ───
Der Schirm hinter der aufgezogenen Schublade, seitenleiste.css. Am
2026-08-21 uebersehen, nicht kaputt: nichts liegt darauf, er schaltete nur
nicht mit. Im Hellen gemessen #636364 gegen #8f9297 beim reparierten
Tour-Vorhang - doppelt so dunkel wie die Reparatur. Variable statt
Ueberschreibung, weil seitenleiste.css auf genau 400 Zeilen liegt (ein Token
kostet dort keine) und eine Ueberschreibung deren `@media`-Rahmen
wiederholen muesste. Derselbe helle Wert wie die zwei anderen. */
:root {
--tour-abdunklung: rgba(3, 4, 5, 0.8);
--leiste-abdunklung: rgb(0 0 0 / 0.6);
}
:root[data-theme="hell"] {
--tour-abdunklung: rgba(15, 23, 30, 0.45);
--leiste-abdunklung: rgba(15, 23, 30, 0.45);
}
/* ══════════════════════════════════════════════════════════════════════════
Die Naht fuer den hellen Seitenhintergrund
══════════════════════════════════════════════════════════════════════════
Der bewegte Verlauf ist KEIN Token. Er ist ein Shader mit vier fest
verdrahteten Farben in static/js/verlauf.js, plus das Standbild
static/img/verlauf-standbild.webp fuer alle Faelle, in denen der Shader
nicht laeuft (kein JavaScript, kein WebGL, reduzierte Bewegung, und das
ganze Dashboard). Beides ist dunkel-tuerkis und fuer einen dunklen Grund
gerechnet.
**Adrian macht den hellen Hintergrund selbst** und erwaegt zwei
verschiedene, nach Farbe getrennt. Deshalb wird hier nichts erfunden.
Was im hellen Modus stattdessen passiert: der Bildhintergrund wird
abgeschaltet, die Leinwand ausgeblendet, und es bleibt die Grundflaeche
var(--color-bg-base). Ruhig und lesbar, aber ohne Signatur.
**Das ist die Naht.** Wer den hellen Hintergrund einhaengt, aendert genau
diesen einen Block: `background-image` auf das helle Standbild, und die
Zeile fuer .seiten-leinwand loeschen, sobald verlauf.js eine helle Fassung
kennt. Kein anderer Ort muss dafuer angefasst werden.
Warum die Regel hier steht und nicht in seiten-grund.css: sie gilt nur im
hellen Modus, und der helle Modus liegt in dieser Datei. seiten-grund.css
traegt einen Verweis hierher. */
:root[data-theme="hell"] .seiten-grund {
background-image: none;
}
:root[data-theme="hell"] .seiten-leinwand {
display: none;
}
/* ══════════════════════════════════════════════════════════════════════════
Der Umschalter selbst
══════════════════════════════════════════════════════════════════════════
Er lebt von localStorage und von JavaScript. Ohne JavaScript gibt es keinen
Weg, die Wahl zu behalten - also gibt es dann auch keinen Knopf. Die Seite
bleibt dunkel, und das ist der Auslieferungszustand, kein Schaden.
Der Knopf ist deshalb per Vorgabe versteckt und wird erst sichtbar, wenn
modus_kopf.html die Klasse `js` an das gehaengt hat. Das geschieht im
, vor dem ersten Zeichnen - der Knopf blitzt nicht auf und
verschwindet wieder, sondern ist von Anfang an entweder da oder nicht.
Welches Symbol und welcher Name gilt, entscheidet ALLEIN das CSS am
data-theme. Kein JavaScript fasst hier ein Element an.
Der Grund dafuer ist eine echte Panne vom 2026-08-12: ein ist kein
HTMLElement, `svg.hidden = true` tut schlicht nichts, und der Knopf
kopierte danach still das falsche Symbol. Was das CSS umschaltet, kann
diesen Fehler nicht machen.
Alles hier liegt in @layer components und nicht ungeschichtet. Das ist kein
Schoenheitsfehler: ungeschichtetes CSS schlaegt in der Kaskade JEDE
@layer-Regel, auch die Tailwind-Utilities. Eine ungeschichtete
`display: none` haette ein `md:flex` am selben Knopf stumm ueberstimmt. */
@layer components {
.modus-umschalter {
display: none;
}
:root.js .modus-umschalter {
display: inline-flex;
}
/* Zwei Symbole und zwei Namen liegen im Markup, sichtbar ist immer genau
einer. `display: none` nimmt den verborgenen Namen auch dem Screenreader
aus dem zugaenglichen Namen des Knopfes - genau das ist gewollt, sonst
laese er beide hintereinander vor.
Vorgabe (dunkler Modus): angeboten wird der Weg NACH HELL, also Sonne. */
.modus-wenn-hell { display: none; }
.modus-wenn-dunkel { display: inline; }
:root[data-theme="hell"] .modus-wenn-hell { display: inline; }
:root[data-theme="hell"] .modus-wenn-dunkel { display: none; }
}