/* =========================================================================== DESIGN-TOKENS – DAS WÖRTERBUCH VON SCHLAUSTART =========================================================================== Die Regel dazu steht in docs/DESIGN_SYSTEM.md. Diese Datei ist NUR das Wörterbuch: Werte, keine Bausteine. Hier steht kein `.knopf{}`, kein `.karte{}` – ausschließlich `--token: wert`. WIE ES FUNKTIONIERT ------------------- Die Datei wird VOR index.css eingebunden (templates/index.html). Das ist Absicht und der ganze Trick der ersten Stufe: design-tokens.css -> :root { --muted:#636B7C; … } (der Zielwert) index.css -> :root { --muted:#6A7384; … } (der heutige Wert) Bei gleicher Spezifität gewinnt die SPÄTERE Regel. Also gilt heute überall weiterhin der Wert aus index.css, und **kein einziger Bildschirm ändert sein Aussehen**. Neue Namen (--ok-ink, --r-card, --e-2 …) kollidieren mit nichts und stehen ab sofort zur Verfügung. DIE MIGRATION besteht dann darin, in index.css Zeile für Zeile einen Token-Eintrag zu LÖSCHEN. In dem Moment greift der gemessene Wert von hier. Eine Seite nach der anderen, jede einzeln vergleichbar – statt eines großen Umbaus, den niemand mehr prüfen kann. WOHER DIE ZAHLEN KOMMEN ----------------------- Nicht aus dem Gefühl. `scripts/design_kontrast.py` rechnet jeden Ton gegen die Flächen, auf denen er wirklich steht (WCAG 2.1: Schrift 4.5:1, Fläche/Rand/Icon 3:1). Wer hier einen Wert ändert, ändert ihn ZUERST dort und lässt das Skript laufen. Drei Werte stammen genau daher und sind deshalb NICHT identisch mit dem heutigen Bestand – Begründung jeweils direkt an der Zeile. VERBUNDEN MIT ------------- * docs/DESIGN_SYSTEM.md – die Regel (Farbe §3, Maß §4, Erhebung §5) * scripts/design_kontrast.py – rechnet die Farbwerte nach * templates/index.html – bindet diese Datei VOR index.css ein * app.py `_sw_version()` – muss diese Datei mithashen, sonst liefert der Service-Worker ein altes Wörterbuch aus * static/css/index.css – hält heute noch die Altwerte; die Migration leert dessen :root nach und nach * docs/DUNKEL_BEFUND.md – dieselbe Altlast aus Richtung Dunkelmodus =========================================================================== */ :root{ /* ===== FLÄCHEN ========================================================= --paper Grundfläche der Seite (hinter Leiste und Panel) --surface-subtle leicht abgesetzte Fläche INNERHALB einer weißen Karte. NEU: bisher wurde dafür --paper missbraucht, weshalb „Fläche der Seite" und „Fläche im Kasten" nicht mehr unterscheidbar waren. --card weiße Inhaltsfläche Hinweis: --shell-bg bleibt bewusst in index.css. Sie ist die vom Nutzer WÄHLBARE Fläche (applyShellFarbe) und damit kein fester Token. */ --paper: #F1F2F6; --surface-subtle: #F7F8FA; --card: #FFFFFF; /* ===== SCHRIFT-STUFEN ================================================== Drei Stufen genügen: Aussage, Nebenaussage, Beiwerk. */ --ink: #0F172A; /* Überschrift, Fließtext */ --sub: #4A5568; /* Nebentext, Beschreibung */ /* GEMESSEN GEÄNDERT: der bisherige Ton aus index.css erreicht auf --paper nur 4.27:1 und fällt damit knapp durch. Dieser Wert schafft 4.78:1 und ist vom Auge nicht als andere Farbe zu erkennen. Zahlen und Altwert: scripts/design_kontrast.py, docs/DESIGN_SYSTEM.md §3.2. */ --muted: #636B7C; /* GEMESSEN – und der Grund, warum es diesen Ton ZUSAETZLICH gibt: --muted ist gegen --paper gerechnet. Die SCHALE hinter Seitenleiste und Panel ist aber vom Nutzer waehlbar (--shell-bg in index.css, sieben feste Toene + freie Wunschfarbe). Auf dem dunkelsten festen Ton "stein" (#E8EAEF) erreicht --muted nur 4.45:1 und faellt damit knapp durch – die Beschriftung der Seitenleiste sitzt genau dort. #565E6C haelt 5.43:1 auf allen sieben festen Toenen und 4.71:1 im schlechtesten ueberhaupt erreichbaren Wunschton (ssPastellHex deckelt auf HSL L>=0.90, S<=0.50). Nachgerechnet von qa/unit/test_seitenleiste.py – der Test liest die Toene und die Deckel selbst aus, statt sie zu glauben. */ --muted-shell: #565E6C; /* Schrift auf einer gefuellten Markenflaeche (Knopf, aktiver Menueeintrag). Braucht einen eigenen Namen, weil --card im Dunkelmodus dunkel wird – wer dort "weiss" meint, darf nicht --card schreiben. */ --on-brand: #FFFFFF; /* ===== LINIEN ========================================================== Die tragende Trennung ist die Linie, nicht der Schatten (§5). */ --line: #E4E7EE; /* sichtbare Trennung, Kastenrand */ /* DIESELBE LINIE, EINE STUFE KRAEFTIGER (v2.564.1). Seit die Blattfarben den Hintergrund faerben koennen, verschwindet --line auf einem hellen Rosa oder Gelb - man sieht dann nicht mehr, wo ein Kasten aufhoert (Befund Murat 30.08.2026 am Editor). NUR fuer die grossen Kaesten, die eine Struktur tragen; die feinen Trennungen bleiben bei --line, sonst wird die Seite ein Gitter. */ --line-kraeftig: #C9D0DE; --hair: #F0F1F4; /* Andeutung, Tabellenzeile */ /* ===== MARKE =========================================================== */ --brand: #2E5BFF; --brand-dk: #1B3FCC; /* Hover, Schrift auf hellem Markenton */ --brand-soft: #E9EEFF; /* ===== BEDEUTUNGSFARBEN ================================================ ZWEI TÖNE JE BEDEUTUNG – das ist die wichtigste Regel dieser Datei. --x Fläche, Rand, Icon, Balken (3:1 genügt) --x-ink SCHRIFT auf --x-soft (4.5:1 nötig) --x-soft weiche Füllung hinter der Schrift WARUM: Grün (#15A05A) und Bernstein als SCHRIFT sind heute nirgends lesbar genug – „Erledigt" in Grün erreicht 3.38:1 bei einer Anforderung von 4.5:1. Die Lösung ist nicht, den grünen Kasten zu ändern, sondern die Schrift darin abzudunkeln. Siehe docs/DESIGN_SYSTEM.md §3.3. Das ist kein Schönheitsthema: Barrierefreiheit (BITV 2.0) wird beim Verkauf an Schulen gefragt. */ --ok: #15A05A; /* Fläche/Rand: 3.38:1 auf weiß */ --ok-ink: #0E7A43; /* NEU – Schrift: 5.41:1 weiß / 4.81:1 auf ok-soft */ --ok-soft: #E4F6EC; /* GEMESSEN GEÄNDERT: der bisherige Bernstein aus index.css erreicht als Icon oder Rand nur 2.03:1 – ein Warnzeichen, das man nicht sieht. Auch der Ton aus landing_neu reicht auf --paper nur für 2.85:1. Dieser Wert besteht auf beiden neutralen Flächen (3.62 / 3.23) und wird noch als Bernstein gelesen, nicht als Braun. Nur 16 Verwendungen im Bestand – der Wechsel ist billig. Altwerte: docs/DESIGN_SYSTEM.md §3.2. */ --amber: #C97005; --amber-ink: #B45309; /* NEU – Schrift: 5.02:1 / 4.68:1 */ --amber-soft: #FFF6E6; /* GEMESSEN GEÄNDERT: der bisherige Ton aus index.css liegt mit 4.02:1 unter der Schriftschwelle, dieser (aus landing_neu) erreicht 4.83:1. Der NAME bleibt --bad: 213 Verwendungen umzubenennen wäre Risiko ohne Gegenwert, und ein Präfix liesse sich später per Alias nachrüsten (docs/DESIGN_SYSTEM.md §3.4). */ --bad: #DC2626; --bad-ink: #B42318; /* NEU – Schrift: 6.57:1 / 5.62:1 */ --bad-soft: #FCE9E7; /* ===== VIOLETT – die VIERTE Kachelfarbe, und KEINE Bedeutungsfarbe ===== Grün/Bernstein/Rot sagen „gut/beobachten/gefährlich". Violett sagt gar nichts über die Lage – es sagt „das hier gehört zu Unterricht & Üben" bzw. „das ist die Hausaufgaben-Zahl". Genau diese Unterscheidung steht in DESIGN_SYSTEM.md §3: Bedeutungsfarbe vs. Kategoriefarbe. WARUM ES DIESEN EINTRAG ÜBERHAUPT GIBT: der Ton existierte längst – als festes #6D5BD0 mitten in einer JavaScript-Zeichenfunktion (renderKpis) und als #7F77DD in wzKatalog(). Zwei Orte, zwei Werte, kein Dunkelmodus. Hier ist es EIN Wert, den der Dunkelblock unten mitzieht. Gemessen (scripts/design_kontrast.py): --violett 5.18 auf --card / 4.63 auf --paper (Fläche braucht 3.0) · --violett-ink 7.80 auf --card / 6.71 auf --violett-soft (Schrift braucht 4.5). Der Flächenton selbst erreicht auf --violett-soft nur 4.45 – deshalb gibt es das -ink-Token, genau wie bei Grün und Bernstein. */ --violett: #6D5BD0; --violett-ink: #4B44A8; --violett-soft: #EFECFB; /* ===== ROSA – die ZWEITE Kategoriefarbe: Lernstand-Beobachtungen ======= Entscheidung Murat 19.09.2026 („tüm Lernstand'la alakalı girdiler pembe olur … hafif güzel bir renk"). Eine Beobachtung („selbständig", „mit Hilfe") ist keine Note und sagt nichts über gut oder schlecht – sie muss in der chronologischen Liste des Kindes neben Klassenarbeit (rot), Quiz (blau), Sonstige (grau) und Hausaufgaben (violett) auf einen Blick als ETWAS ANDERES lesbar sein. Violett war dort schon vergeben. Gemessen (scripts/design_kontrast.py): --rosa 4.60 auf --card / 4.11 auf --paper (Fläche braucht 3.0) · --rosa-ink 7.88 auf --card / 6.71 auf --rosa-soft (Schrift braucht 4.5). DESIGN_SYSTEM.md §3.5. */ --rosa: #DB2777; --rosa-ink: #9D174D; --rosa-soft: #FCE7F3; /* ===== TAGESKONTINGENTE – UNTERSCHEIDUNGSFARBEN (v2.290.0) ============= Sechs kleine Icon-Plättchen in der Cockpit-Karte „Tageskontingente". Diese Farben sagen NICHT „gut/schlecht" – sie unterscheiden nur die Arten voneinander, damit man die Zeile im Vorbeigehen wiedererkennt (die Bedeutung trägt die Zahl daneben, siehe `.knapp`). WARUM ÜBERHAUPT TOKENS: sie standen als feste Hex-Werte im JavaScript, mitten in einer Zeichenfunktion. Dort findet sie niemand, und jede neue Art brachte eine neue feste Farbe mit. Hier stehen sie an der einen Stelle, an der das Wörterbuch sie erwartet (DESIGN_SYSTEM.md §3). Das Plättchen trägt ein weisses Glyph – alle sechs Töne sind dafür dunkel genug, in beiden Themes; deshalb gibt es bewusst KEINE eigenen Dunkelmodus-Werte (die Fläche bringt ihren Grund selbst mit). */ --kont-quiz: #2E5BFF; /* Aufgaben – derselbe Ton wie --brand */ --kont-bild: #7C3AED; --kont-plan: #E8852A; --kont-abki: #16856A; --kont-kurs: #B0533A; --kont-chat: #0F6E56; /* ===== SCHULVERWALTUNG ================================================= Der Bereich hatte diese Farbe schon: sie stand als fester Hex-Wert im JavaScript (SB_FARBE.schule, index-app.js) und faerbte den Eintrag „Schulverwaltung" in der Seitenleiste. Seit v2.353.0 gibt es diesen Eintrag nicht mehr; der einzige Einstieg ist der Knopf in der Schul-Kapsel oben rechts (.av-school-adm). Die Farbe wandert mit dem Einstieg mit - derselbe Weg wie bei den --kont-* daneben: raus aus der Zeichenfunktion, rein ins Woerterbuch. KEINE NEUE FARBE, sondern eine umgezogene. Und ausdruecklich NICHT --bad: Rot heisst hier ueberall Gefahr, und ein Knopf fuer die taegliche Arbeit in der Alarmfarbe nimmt Rot seine Warnwirkung (§3.1). Weisses Glyph darauf: 5.6:1 - wie bei den --kont-* bringt die Flaeche ihren Grund selbst mit, deshalb kein eigener Dunkelmodus-Wert. */ --sv-verwaltung: #6B4BD8; /* ===== ERKLAERBLATT ==================================================== Der Einstieg auf der Material-Seite steht seit v2.528.0 NEBEN dem Lernspiel-Einstieg. Zwei Knoepfe nebeneinander in derselben Farbe sehen aus wie EIN Knopf mit zwei Haelften; der Unterschied muss sichtbar sein, bevor man liest. Das Lernspiel traegt Violett-Blau, das Erklaerblatt bekommt den Tuerkis-Gruen-Verlauf des Fachportals (F_TUERK/F_GRUEN in fach_gliederung.py) - keine neue Farbwelt, sondern die, unter der die Themen ohnehin stehen. Weisses Glyph darauf: die Flaeche bringt ihren Grund selbst mit, deshalb kein eigener Dunkelmodus-Wert. */ --eb-einstieg-a: #0E9384; --eb-einstieg-b: #15A05A; /* ===== DIE ZWEI MODUL-EINSTIEGE ALS REINE SYMBOLE (v2.534.0) ========== Anweisung Murat 29.08.2026: „o kare icinde sey yapmissin ya, hani o renkli bir joystick olsun … arkasindaki dolguyu kaldir, ikon olsun sadece ikon. Böyle hersyin arkaplanini yapip beyazlastirman iconu bu hosuma gitmiyor." DIESELBE ANSAGE WIE BEIM KROENCHEN darunter (24.08.2026), nur an einer anderen Stelle - und deshalb hier gleich als Tonpaar, statt sie ein drittes Mal zu hoeren. Bis v2.533.x sassen beide Glyphen weiss auf einer 34-px-Scheibe mit Verlauf. Zwei gefuellte Kacheln nebeneinander lesen sich wie zwei Knoepfe in einem Knopf; die Kopfzeile IST schon der Knopf. WARUM EIGENE TOENE UND NICHT --brand: die beiden Einstiege fuehren zu ZWEI verschiedenen Werkzeugen. Genau das war der Sinn der Verlaeufe - er faellt nicht weg, er wandert nur von der Flaeche ins Glyph. Dunkelmodus getrennt, weil ein Glyph seinen Grund nicht mehr selbst mitbringt: Tuerkis #0E9384 erreicht auf dunklem Grund keine 3:1 mehr (DESIGN_SYSTEM.md §3.3), aufgehellt sehr wohl. */ --ls-glyph: #6D4AF6; --eb-glyph: #0E9384; /* ===== DAS KROENCHEN DES SCHUL-ADMINS (v2.419.0) ======================= Anweisung Murat 24.08.2026: „arkaplan koymadan baya bildigin sari tac ikonu ... sari olsun ama kronen iste." Das Kroenchen sass bis v2.418.0 als weisses Glyph auf einer violetten Scheibe (--sv-verwaltung). Es stimmte fachlich - der Bereich hat diese Farbe -, aber ein Kroenchen ist ein ORDEN, kein Knopf: die Scheibe machte daraus ein zweites Bedienelement neben dem Schullogo, und genau das eine sollte v2.414.0 abschaffen. ZWEI TOENE, WEIL EIN GELB ALLEIN NICHT TRAEGT. Gold erreicht auf Weiss nur 1.9:1 - unter den 3:1, die DESIGN_SYSTEM.md §3.3 fuer grafische Elemente verlangt, und das Kroenchen liegt ausserdem auf einem SCHULLOGO, dessen Farbe wir nicht kennen. Deshalb: Flaeche in Gold, Kante in dunklem Gold. Die Kante traegt die Lesbarkeit (5.9:1 auf Weiss, 3.1:1 gegen die eigene Fuellung), das Gold traegt die Aussage. So bleibt es ohne jede Scheibe auf hellem wie auf dunklem Grund ablesbar. UND AUSDRUECKLICH NICHT --amber: Bernstein heisst in SchlauStart „Hinweis/Achtung" (§3.1). Eine Rolle ist kein Hinweis - sie steht den ganzen Tag da. Zwei Bedeutungen an einem Ton nehmen dem Ton beide. */ --krone: #F2B01E; --krone-rand: #8A5A06; /* ===== ECKEN – NACH BAUTEIL, NICHT GLOBAL ============================== Ein einziger Radius für alles ist falsch: ein Knopf mit 22px wird zur Pille, ein Panel mit 8px wirkt hart. Zwischenwerte gibt es nicht. */ --r-control: 8px; /* Knopf, Eingabefeld, Chip, kleines Feld */ --r-card: 14px; /* Karte, Listeneintrag, Aufklapp-Menü */ --r-panel: 22px; /* Panel, Modal, große Fläche */ --r-pill: 999px; /* echte Pille (Zähler, Status-Chip) */ /* ===== ABSTÄNDE ======================================================== Nur aus dieser Reihe. Kein padding:13px, kein gap:18px. */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; /* ===== SCHRIFTGRÖSSEN ================================================== EINE Skala. Halbe Pixel (16.5px, 13.5px) sind Altlast und werden bei der Migration hierher gezogen. WARUM ES UNTER 12px ZWEI STUFEN GIBT (entschieden 12.08.2026): Der Bestand benutzt unterhalb von --fs-xs neun verschiedene Größen (6 · 8 · 8.5 · 9 · 9.5 · 10 · 10.5 · 11 · 11.5px) an rund 650 Stellen – Diagrammachsen, Mini-Zähler, Chips, Tabellenkürzel. Die Skala bei 12px enden zu lassen hieße, all das auf 12px anzuheben; das ist keine Migration mehr, sondern eine Gestaltungsänderung mit Überlaufrisiko an 650 Stellen, die niemand im Browser nachsehen kann. Also zwei Stufen – und dafür KEINE weiteren: was kleiner als 10px sein will, ist zu klein. Die Zuordnung steht in docs/DESIGN_SYSTEM.md §4.3 als Tabelle; sie wird Abschnitt für Abschnitt mit der Migration (§10) gezogen, nicht auf einmal. */ --fs-3xs: 10px; /* Diagramm-Beschriftung, Mini-Zähler – die Untergrenze */ --fs-2xs: 11px; /* Chip, Zähler, Tabellenkürzel */ --fs-xs: 12px; /* Marke, Kürzel */ --fs-sm: 13px; /* Nebentext, Chip */ --fs-md: 15px; /* Bedienelemente */ --fs-base:16px; /* Fließtext */ --fs-lg: 19px; /* Abschnittsüberschrift */ --fs-xl: 24px; /* Seitenüberschrift */ --fs-2xl: 32px; /* Titel */ /* ===== SCHRIFTFAMILIE ================================================== System-Stack: keine externe Anfrage, kein DSGVO-Thema, keine Ladezeit. */ --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif; /* ===== ERHEBUNG (ELEVATION) – VIER STUFEN, KEINE FÜNFTE ================ Heute liegen 274 verschiedene box-shadow-Werte im Bestand. Das ist kein Gestaltungsmittel mehr, sondern Zufall. Der Normalfall ist --e-0: kein Schatten, eine 1px-Linie. Wer eine fünfte Stufe braucht, braucht in Wahrheit keine – er braucht eine Linie. Die Werte sind nicht erfunden, sondern die drei im Bestand am häufigsten benutzten: --e-1 = das bisherige --shadow (24 Verwendungen), --e-2 aus dem Aufklapp-Menü der Startseite, --e-3 aus dem Modal (index-module). */ --e-0: none; /* ------------------------------------------------------------------- FACH-FARBEN (2.329.9) ------------------------------------------------------------------- WOFUER: In der Unterrichtsplanung liegen die erzeugten Plaene als Karten nebeneinander. Ein farbiger Streifen je FACH macht sie auf einen Blick unterscheidbar (Wunsch Murat 18.08.2026: "fachlar ayni renk olsun mathematik bi renk fizik bi renk gibi"). WARUM HIER UND NICHT IM JAVASCRIPT: 26 feste Farbwerte im Frontend waeren genau die eigene Farbwelt, die das Design-System verhindern soll - `qa/unit/test_design_system.py` hat sie sofort gemeldet, und zu Recht. Als Token stehen sie an EINER Stelle, lassen sich im Dunkelmodus getrennt aufhellen und tauchen in keiner Datei doppelt auf. Die Toene sind bewusst gedeckt: sie stehen als 3px-Streifen und als kleine Beschriftung auf weisser Karte, nicht als Flaeche. Unbekannte Faecher (das Feld ist Freitext) bekommen einen Ton aus --fach-1 bis --fach-10, berechnet aus dem Namen. */ --fach-mathematik: #2E5BFF; --fach-deutsch: #DC2626; --fach-englisch: #7C3AED; --fach-physik: #0EA5A5; --fach-chemie: #059669; --fach-biologie: #16A34A; --fach-geschichte: #92400E; --fach-erdkunde: #0E7490; --fach-politik: #86198F; --fach-sport: #F59E0B; --fach-kunst: #EA580C; --fach-musik: #9333EA; --fach-informatik: #475569; --fach-religion: #6D6875; /* ------------------------------------------------------------------- SECHS FAECHER FEHLTEN, UND JEDES BEKOMMT EINE FLAECHE (2.615.0) ------------------------------------------------------------------- Anweisung Murat 03.09.2026: „renkleri her birinin farkli olsun yani." Bis hierher teilten sich zwanzig Faecher ACHT Farben - Geschichte, Textil und Kunst trugen dasselbe Pink, Latein, Philosophie und Informatik dasselbe Grau. Auf einer Seite, die alle zwanzig nebeneinander zeigt, ist eine geteilte Farbe keine Farbe mehr. Sechs Toene fehlten ganz; sie stehen jetzt hier - und NICHT in templates/unterrichtsfaecher.html. Dort waeren es vierzig feste Farben in einem