/* =========================================================================== KUPA · Die Token — Farben, Abstände, Schriftgrade, Radien, Schatten =========================================================================== 🔴 DIESE DATEI IST DIE EINZIGE QUELLE. Sie wird an zwei Stellen benutzt: 1. `cockpit_template.html` — Cockpit_aktualisieren.py setzt sie beim Bauen an die Stelle von `__TOKEN__` ein. Die ausgelieferte Seite liegt im geteilten Ordner und muss ohne Internet und ohne Nebendateien laufen; ein auf diese Datei ginge dort ins Leere. 2. `design/bausteine.html` — die Musterseite lädt sie per . Wer hier etwas ändert, ändert es überall. Wer einen Wert direkt in eine Regel schreibt, statt einen Token zu nehmen, baut die 108 Farben wieder auf, die am 09.09.2026 gezählt wurden — bei 22 definierten Token. --------------------------------------------------------------------------- WARUM ES ABSTÄNDE UND SCHRIFTGRADE ALS TOKEN GIBT Bis zum 09.09.2026 waren nur Farben benannt. Abstände und Schriftgrade standen frei in 199 Klassen verstreut: 5px neben 6px neben 7px, 11px neben 11.5px neben 12px. Nichts davon ist falsch, aber zusammen ergibt es das Unruhige, das man der Seite ansieht, ohne es benennen zu können. Ein Raster nimmt diese Entscheidung ab. Es macht die Seite nicht schöner, es macht sie ruhig — und das ist der Unterschied, um den es geht. =========================================================================== */ :root { /* 🆕 25.09.2026 · `color-scheme` — was es tut, und was es NICHT tut. 🔺 EHRLICH, WEIL ICH ES ZUERST FALSCH AUFGESCHRIEBEN HATTE: Hier stand „die eine Zeile, die Eingabefelder lesbar macht". Das war eine plausible Erklärung, keine belegte. Die Gegenprobe im Browser am 25.09.2026 zeigte **keinen Unterschied** — ein Feld mit der Klasse `.feld` sieht mit und ohne `color-scheme` gleich aus, weil `.feld` Fläche und Schrift selbst setzt und damit die Vorgabe des Systems überschreibt. 🔴 Maettis Befund („Die Suchmaske sind weiß ausgefüllt, die Schrift darin aber nicht zu erkennen") kam von der **fehlenden Klasse**, nicht von hier. Reproduziert und im Bild festgehalten: ein `` ohne `.feld` auf dunkler Seite ist ein weißer Kasten, und darin steht die helle Seitenschrift aus `rahmen.html` (`color: inherit`). Warum die Zeile trotzdem bleibt — sie deckt, was `.feld` NICHT erreicht, weil es das Betriebssystem zeichnet: · die aufgeklappte Liste eines Auswahlfelds · Blinkstrich und Auswahlfarbe im Feld · Bildlaufleisten · jedes Feld, das die Klasse einmal doch nicht trägt Sie ist also Vorsorge, nicht die Heilung. Beides gehört dazu. Sie steht an allen DREI Stellen, an denen die Farbwelt entschieden wird (hier, im Media-Block, bei der ausdrücklichen Wahl). */ color-scheme: light; /* --- FLÄCHEN UND SCHRIFT ------------------------------------------------ 🔺 KÜHL STATT WARM — geändert am 19.09.2026. Maetti an diesem Tag: das helle, aufgeräumte CI kommt, und das Cockpit zieht mit — „B bitte vl. eins in hell und dark mode". EIN Entwurf, der in beiden Modi trägt. Deshalb stehen die neuen Werte direkt hier im hellen :root; der Dunkelblock weiter unten ist unberührt geblieben, es gibt keine zweite Datei und keinen Klassenschalter. ⚠️ ÜBERHOLT — und deshalb im Wortlaut erhalten, nicht gelöscht: „`--papier` ist bewusst warm und nicht weiß: Das Werkzeug wird gedruckt, und die Bildschirmfassung soll aussehen wie das, was aus dem Drucker kommt. Das war schon vor dem Umbau so und bleibt." Diese Begründung hat nie getragen: Die Seitenfläche landet gar nicht auf dem Papier. Weder hier noch im Template steht `print-color-adjust`, und ohne das druckt ein Browser Hintergrundfarben erst, wenn jemand „Hintergrundgrafiken" ankreuzt. Das warme Papier war eine Wirkung am Bildschirm, die sich auf ein Druckbild berief, das sie nie erreicht hat. ⚠️ Das greift in E-031 (13.09.2026) hinein. Dort steht als Folge: „Mappe und Cockpit sehen gleich aus — warmes Papier, etwas helleres Blau." Gleich aussehen tun sie weiterhin, warm ist das Papier nicht mehr. ✅ Nachgetragen am 19.09.2026: Die Entscheidung heißt **E-059** in `wissen\ENTSCHEIDUNGEN.md`; die *Folge* von E-031 ist dort als überholt vermerkt. Die REGEL von E-031 gilt weiter — eine Farbwelt für alles, diese Datei ist die eine Quelle. Nur die Farbe ist eine andere. */ --papier: #f3f5f8; /* Hintergrund der Seite · warm war #f7f5f0 */ --flaeche: #ffffff; /* Karten, Tabellen, alles Erhabene */ --flaeche-leise: #e9edf3; /* Zeilen, die zurücktreten sollen · warm #faf9f6 */ --linie: #cbd2de; /* Trennlinien · #e2ddd3 bis 09.09., #e8e4db bis 19.09.2026 */ --linie-stark: #a9b4c5; /* nur wo eine Kante wirklich trennen muss · warm #d8d2c6 */ /* 🆕 22.09.2026 · Die Kante eines BEDIENELEMENTS — Eingabefeld, Auswahl. 🔴 WARUM DAFÜR EIN EIGENES TOKEN NÖTIG WAR: Eine Trennlinie darf leise sein, die Umrandung eines Feldes nicht. WCAG verlangt für sie 3:1. Gemessen am 22.09.2026: `--linie` trägt 1,24:1 auf `--flaeche`, `--linie-stark` 1,49:1 — beide weit darunter. Wer stattdessen `--linie` anhebt, macht jede Trennlinie im Haus zum Balken. Dieser Wert trägt auf allen drei Untergründen: 3,65:1 auf `--flaeche`, 3,37:1 auf `--papier`, 3,49:1 auf `--flaeche-leise`. */ --linie-bedien: #707d91; --text: #1d1d1b; /* Fließtext, Zahlen, alles Wichtige */ --text-leise: #526079; /* Unterzeilen, Hilfstexte, Einheiten */ --text-still: #5c6880; /* Platzhalter, „—", Abgeräumtes (3,67:1 war zu blass) */ /* --- DIE MARKE ---------------------------------------------------------- 🔴 EINE Akzentfarbe. Vorher konkurrierten drei: --navy (Kopfzeile), --accent (Kupfer) und --blue (Etiketten). Drei Akzente sind keiner. `--marke` trägt die Kopfzeile und alles, was das Haus repräsentiert. `--akzent` ist der EINZIGE Farbton für „hier klicken", „hier ist etwas ausgewählt", „das ist der aktive Reiter". Nichts anderes benutzt ihn. 🔴 `--marke` IST EINE FLÄCHENFARBE, KEINE SCHRIFTFARBE. Auf hellem Grund trägt sie — deshalb stand sie lange als `color:` in fünf Regeln. Im Dunkelmodus wird daraus Dunkelblau auf Dunkelgrau: gemessen am 10.09.2026 an 400 Stellen der Vorgangsnummern-Spalte mit 2,30:1. Unlesbar, und niemand hätte es gemerkt, der nicht dunkel arbeitet. Für blaue SCHRIFT gibt es `--blau` — der Zustandssatz dreht im Dunkelmodus ins Helle und trägt in beiden Richtungen. Für normale Schrift `--text`. Als `border-color` bleibt `--marke` in Ordnung: Eine Kante darf dunkel sein. */ --marke: #455d82; --marke-tief: #26364e; --marke-leise: #d9e1ed; /* Schrift auf dunklem Grund */ /* 🆕 15.10.2026 · Fläche eines Hauptknopfs, der auf --flaeche steht (Leiste der Assistentin). Hell = --marke (5,1:1 Kante zur Fläche reicht). Dunkel eigener Wert: --marke hätte dort 2,26:1 zu --flaeche, unter den 3:1 für Bedienflächen (WCAG 1.4.11). #5874a3: 3,19:1 zu --flaeche, weiße Schrift darauf 4,73:1. */ --marke-knopf: #455d82; /* = --marke; als Wert, weil jeder Dunkel-Token hell einen Wert braucht */ /* 🔺 27.09.2026 · DAS CI-ROT STATT DES ORANGE. Maetti: „ich mag ja das orange aber wir müssen leider auf das rot aus unserem ci gehen". Quelle: `marke\logo arben.json`, Bordeaux #A53A45 (RAL 3013). Bis dahin: --akzent #c8623a, --akzent-tief #a2481f, --akzent-leise #fdf1ea, --akzent-text #a2481f, --auf-akzent #12100e (Orange). Gerechnet: #A53A45 mit Weiß darauf 6,38:1 · auf --papier 5,89:1. ⚠️ Nah am Signal --rot (#c0392b, 1,17:1 dazwischen). --akzent heißt „hier klicken", --rot heißt „Achtung". Wo beide nebeneinander stehen, trennt sie die Form (Knopf gegen Etikett), nicht der Ton. */ --akzent: #455d82; --akzent-tief: #26364e; /* Überfahren - Weiß darauf 8,71:1 */ --akzent-leise: #dfe6f0; /* Fläche hinter Ausgewähltem · war #fbeee7 (19.09.2026 eine Spur heller, damit sie sich vom kühleren Papier ebenso deutlich abhebt wie vorher vom warmen) */ /* 🆕 20.09.2026 · SCHRIFT in der Akzentfarbe. Genau derselbe Fall wie bei `--marke` und `--blau` zwei Absätze weiter oben: `--akzent` ist eine FLÄCHENfarbe. Auf Weiß gemessen 3,99:1, auf Papier 3,68:1 — beides unter der Schwelle. Gefunden am 20.09.2026 an der Plattform, fünf Stellen, alle dieselbe Regel. Im DUNKELmodus trägt `--akzent` dagegen (6,41:1 auf Papier) — deshalb steht dort unten der helle Ton und hier der tiefe. Ein Token, zwei Werte, statt fünf Einzelreparaturen. Gerechnet, nicht geschätzt: #a2481f ergibt 5,57:1 auf --papier und 6,03:1 auf --flaeche. 🔺 27.09.2026 · Mit dem CI-Rot trägt der Akzent selbst als Schrift (5,89:1 auf --papier, 5,55:1 auf --akzent-leise). Der Token bleibt trotzdem: Im Dunkelmodus hat er einen eigenen Wert, und wer ihn benutzt, sagt „Schrift" - nicht „Fläche". */ --akzent-text: #455d82; /* 🆕 27.09.2026 · DER AKZENT AUF DUNKLEM MARKENGRUND (`--marke-tief`): Kopf, Bühne, Dock - das „i" in KUPAi, Ring, Balken, Punkte, Fokus. 🔴 Das CI-Rot selbst trägt dort NICHT: #A53A45 auf --marke-tief nur 2,32:1 - unter der Grenze für große Schrift UND für Linien (3:1). Deshalb ein aufgehellter Ton desselben Rots: #e07c87 auf --marke-tief 5,21:1 hell · 4,79:1 dunkel Ein Wert für beide Modi: --marke-tief ist in beiden dunkel. Vorher hieß der Token `--akzent-gross-auf-marke` und verwies auf --akzent; mit dem Rot geht der Verweis nicht mehr. */ --akzent-auf-marke: #d9e1ed; /* 🆕 04.10.2026 · DER TITELSTRICH - die EINE Stelle je Seite in CI-Bordeaux (Plan plattform-gestaltung, Kompass; Maetti: Knöpfe CI-Blau, Bordeaux nur am Titel). #a53a45 auf --papier 6,0:1. Seitdem ist --akzent das CI-Blau. */ --titelstrich: #a53a45; /* --- SCHRIFT AUF FARBIGEM GRUND (13.09.2026) ----------------------------- Drei Token, weil es drei Sorten farbiger Flächen gibt — und weil weiße Schrift auf zweien davon gemessen NICHT trägt. Vorher standen an drei Stellen in bausteine.css `color:#fff` fest. Das ging gut, solange jeder farbige Grund dunkel war. Im Dunkelmodus dreht die Palette die Signalfarben ins Helle — und dann steht Weiß auf Hellgrün. Alle Werte gemessen (Kontrast nach WCAG, Grenze 4,5:1): --auf-marke weiß auf --marke 10,68:1 hell · 7,82:1 dunkel Ein Wert reicht: --marke bleibt in beiden Modi dunkel. --auf-akzent 🔺 27.09.2026 DREHT JETZT UM (CI-Rot statt Orange): hell weiß auf #a53a45 6,38:1 ✓ #12100e darauf 2,98:1 ✗ dunkel #12100e auf #d86e79 5,81:1 ✓ weiß darauf 3,27:1 ✗ Beim Orange trug #12100e in beiden Modi; das Rot ist hell zu dunkel dafür. Deshalb steht --auf-akzent jetzt AUCH in den Dunkelblöcken. --auf-signal DREHT UM. Die Signalfarben (rot/gelb/grün/blau/grau) sind hell dunkel und dunkel hell — ein fester Wert kann das nicht bedienen: hell weiß auf ihnen 5,23–5,48:1 ✓ #12100e auf ihnen 3,46–3,63:1 ✗ dunkel weiß auf ihnen 2,10–2,43:1 ✗ #12100e auf ihnen 7,81–9,03:1 ✓ #12100e ist ein warmes Fast-Schwarz — es passt zum warmen --papier #f7f5f0 und wirkt neben dem Orange nicht wie ein Loch. ⚠️ Der Satz zum Papier gilt seit dem 19.09.2026 nicht mehr (es ist kühl). Der Wert bleibt trotzdem: Gemessen wurde er gegen `--akzent`, nicht gegen das Papier, und `--akzent` ist unverändert. */ --auf-marke: #ffffff; --auf-akzent: #ffffff; --auf-signal: #ffffff; /* --- DAS PAPIER, DAS WIRKLICH PAPIER IST (19.09.2026) ------------------- 🔴 NUR FÜR FLÄCHEN, DIE AUF PAPIER LANDEN. Sonst für nichts. Warum es das Paar gibt: Das Rücksprache-Blatt ist die Nachbildung eines DIN-A4-Bogens. Es muss weiß bleiben, auch wenn das Betriebssystem auf dunkel steht — ein dunkel gedrucktes Blatt kostet eine Tonerpatrone und ist auf Papier unlesbar. Bisher stand dort `background: #fff` fest, die Schrift aber auf `--text`. Im Dunkelmodus wurde daraus weiße Schrift auf weißem Blatt: gemessen am 19.09.2026 an **123 Stellen mit 1,21:1**. Ein fester Wert auf der einen Seite und ein drehender auf der anderen — das geht immer schief, und zwar genau in dem Modus, den niemand prüft. Deshalb ein PAAR und nicht ein einzelner Token: Wer nur die Fläche benennt, lässt die Schrift wieder an `--text` hängen und baut denselben Fehler neu. Beide Werte stehen in JEDEM Block gleich — das ist ihr ganzer Zweck. 🛑 WAS PASSIERT, WENN MAN SIE ALS AUSWEG BENUTZT `--weiss` ist verlockend, sobald irgendwo im Dunkelmodus etwas nicht trägt: einmal eingesetzt, und das Problem ist weg. Es ist aber nicht weg, es ist sichtbar geworden — als **weiße Kachel mitten auf einer dunklen Seite**, die niemand gewollt hat und die beim nächsten Blick wie ein Ladefehler aussieht. Wer im Dunkeln eine Fläche braucht, nimmt `--flaeche`; die dreht mit. `--weiss` nimmt nur, wer sagen kann, auf welchem Blatt Papier die Fläche landet. Gemessen: --auf-weiss auf --weiss = **18,98:1**, der höchste Wert im System (--text auf Weiß erreicht 15,78:1). Neue Farbe kommt keine ins Haus: #12100e ist derselbe Wert wie `--auf-akzent`, nur unter dem Namen, der sagt, wofür er hier steht. */ --weiss: #ffffff; --auf-weiss: #1d1d1b; /* --- DIE FÜNF ZUSTÄNDE -------------------------------------------------- Mehr gibt es nicht, und mehr soll es nicht geben. Jeder Zustand hat genau drei Werte: Schrift, Fläche, Kante. Wer eine vierte Abstufung braucht, braucht in Wahrheit einen sechsten Zustand — und der gehört hier benannt, nicht in einer einzelnen Regel erfunden. */ /* 🔴 Jede Schriftfarbe erreicht auf ihrer eigenen Fläche mindestens 4,5:1 (WCAG AA für kleine Schrift). Gemessen am 09.09.2026 in der Musterseite; `--gelb` lag zuerst bei 3,61:1 und war damit die einzige Marke, die man bei Sonne auf dem Bildschirm nicht mehr lesen konnte. Wer hier eine Farbe ändert, misst nach — die Rechnung steht in bausteine.html. */ --rot: #c2410c; --rot-flaeche: #fdede4; --rot-kante: #f6cdb6; --gelb: #8a6209; --gelb-flaeche: #fbf3dd; --gelb-kante: #ecdcaa; /* 🆕 25.09.2026 · Der Schleier hinter einem Kasten, der sich vor die Seite legt (`::backdrop`). Er gehoert hierher und nicht in die Vorlage: Eine feste Farbe dort waere in beiden Modi dieselbe, und auf dunklem Grund dunkelt ein 45-Prozent-Schwarz zu wenig ab - der Hintergrund bliebe lesbar und zoege den Blick. */ --schleier: rgb(0 0 0 / .45); --gruen: #2f7a4d; --gruen-flaeche: #e8f3ec; --gruen-kante: #c2e0cd; --blau: #455d82; --blau-flaeche: #dfe6f0; --blau-kante: #b7c4d8; /* 🔴 Die SCHRIFT `--grau` ist WARM, nicht blaugrau, und bleibt es. Vorher war sie #5a6675 und hatte vom blaugrauen `--ruhe` einen Farbabstand von 10 — für das Auge dieselbe Farbe. „unberührt" und „wartet auf jemand anderen" sind aber zwei verschiedene Aussagen, und zwei Aussagen in einer Farbe sind keine. Heute liegen die beiden Schriften **53** auseinander. 🔺 FLÄCHE UND KANTE sind am 19.09.2026 mit dem Papier kühl geworden. Der Einwand dagegen lautete: Wenn `--grau` absichtlich warm ist, wird `--grau-flaeche` auf kühlem Papier zum beigen Fleck, aber ohne sie fällt der Abstand zu `--ruhe` weg. Nachgemessen (RGB-Abstand, dieselbe Rechnung wie in bausteine.html — unter 30 verwechselt man zwei Farben): --grau ↔ --ruhe (Schrift) 53 trägt · unverändert --grau-flaeche ↔ --ruhe-flaeche 11,6 vorher · 6,4 nachher --grau-kante ↔ --ruhe-kante 26 vorher · 14 nachher Die Flächen waren also schon vorher für das Auge dieselbe Farbe. Was die zwei Zustände trennt, ist die Schrift — und die bleibt warm. Der Dunkelmodus macht es seit jeher genau so: dort steht das warme `--grau` auf dem kühlen `--grau-flaeche`. Hell war der Ausreißer. 🔴 12.10.2026 · Vom 04.10. bis 12.10.2026 fehlte hier das Ende dieses Kommentars: Die Zeile mit `--grau` stand IM Kommentar, und `--grau`, `--grau-flaeche` und `--grau-kante` waren im Hellmodus gar nicht gesetzt. Gefunden an der Musterseite des Risikobilds - die Schraffur „veraltet" war unsichtbar. `grafik_selbsttest.py` prüft seither, dass jeder Token der Dunkelblöcke auch hell gesetzt ist, und liest dafür OHNE Kommentare. ⚠️ Mit den Kompass-Werten liegt `--grau` nur rund 21 neben `--ruhe` (oben stand 53 für den alten Wert) - offen für den Gestalter. */ --grau: #5e6878; --grau-flaeche: #e9edf3; --grau-kante: #cbd2de; /* „ruhig" = liegt bewusst nicht an · „geparkt" = zurückgestellt. Beide sind KEINE Warnung und dürfen deshalb nicht rot oder gelb sein. */ --ruhe: #4e6b85; --ruhe-flaeche: #eef1f5; --ruhe-kante: #d6dfe8; --park: #574d94; --park-flaeche: #edeef7; --park-kante: #d3d7ea; /* 🆕 30.09.2026 · REIHEN in Grafiken (`/steuerung`): Stufen EINES Blautons, hell → dunkel = wenig → viel Gewicht. Keine Zustandsfarbe - Rot bleibt für „über Service-Level" und „alt und unberührt", wo eine Handbuchregel dahintersteht. Geprüft (Stufenprüfung für geordnete Reihen): gleicher Farbton, Helligkeit fällt gleichmäßig, hellste Stufe 2,17:1 auf Weiß. Die Stufen tragen nie allein - jeder Balken hat Zahl und Legende. */ --reihe-1: #6f84a6; --reihe-2: #455d82; --reihe-3: #26364e; /* 🆕 12.10.2026 · Risikobild (E-089 E14) · DIE SPUR hinter Balken, Stapeln und leeren Abschnitten. Vorher trug die Spur `--flaeche-leise`: im Dunkeln 1,23:1 gegen `--flaeche` - die leere Bahn verschwand, und ein Balken bei 20 % sah aus wie ein Balken bei 100 %. `--linie` hebt sich in beiden Modi ab (die Rechnung steht in `grafik_selbsttest.py`). Ein Verweis, kein eigener Wert: steht deshalb NUR hier, die Dunkelblöcke liefern über `--linie` ihren eigenen Ton mit. */ --spur: var(--linie); /* Veraltet = grau schraffiert, nie eine eigene Farbe. Breite eines Streifens. */ --schraffur: 3px; /* Bilder im Dunkelmodus abdunkeln - ein helles Foto blendet auf dunklem Grund. Gilt nur für Kopfbilder (Kundenansicht, Anmeldung), nie für Logos. */ --bild-helligkeit: 1; /* --- ABSTÄNDE · 4er-Raster --------------------------------------------- Sieben Stufen reichen für alles. Wer 18px braucht, braucht in Wahrheit 16 oder 24 — und die Seite wird ruhiger, wenn er sich entscheidet. */ --a1: 4px; /* zwischen Zeichen und Text, Etikett und Zahl */ --a2: 8px; /* innerhalb eines Bausteins */ --a3: 12px; /* Tabellenzellen, enge Karten */ --a4: 16px; /* Karteninneres, Standardabstand */ --a5: 24px; /* zwischen Bausteinen */ --a6: 32px; /* zwischen Abschnitten */ --a7: 48px; /* zwischen Ansichtsbereichen */ /* --- SCHRIFT ------------------------------------------------------------ 🔴 Systemschriften, keine Webfonts. Die Seite läuft per Doppelklick aus einem geteilten Ordner, oft ohne Internet. Eine Schrift, die nicht lädt, verschiebt jede Spaltenbreite — und das Blatt passt dann nicht mehr auf A4 quer. Die Reihenfolge holt auf jedem Gerät die beste verfügbare: Segoe UI Variable auf Windows 11, San Francisco auf Mac, Inter/Roboto sonst. */ --schrift: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif; --schrift-zahl: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Consolas, monospace; /* Sieben Grade. Die Sprünge sind bewusst deutlich: Zwei Grade, die sich um einen halben Punkt unterscheiden, lesen sich als Versehen, nicht als Hierarchie. */ --t1: 11px; /* Etiketten, Unterzeilen unter Spaltenköpfen */ --t2: 12.5px; /* Hilfstexte, Zusätze, „vor 12 Tagen" */ --t3: 13.5px; /* Tabellenzellen — der meistgelesene Grad */ --t4: 15px; /* Fließtext, Erklärungen */ --t5: 17px; /* Abschnittsüberschriften */ --t6: 21px; /* Seitenüberschriften */ --t7: 28px; /* Kennzahlen, die allein stehen */ --fett-halb: 600; /* Überschriften, Namen */ --fett: 700; /* Zahlen, Etiketten, alles was zählt */ --zh-eng: 1.3; /* mehrzeilige Zellen */ --zh: 1.5; /* Standard */ --zh-weit: 1.62; /* Fließtext, Erklärungen */ /* --- RADIEN ------------------------------------------------------------- Apple rundet großzügiger, als man denkt — aber gestaffelt: kleine Dinge wenig, große Flächen deutlich. Ein Knopf mit demselben Radius wie eine Karte wirkt wie ein Fehler. 🆕 `--r0` kam am 19.09.2026 dazu, und zwar nicht aus Geschmack. Die Staffel begann bei 6 px, weil sie für Knöpfe und Etiketten gebaut wurde. Das Cockpit zeichnet aber Dinge, die kleiner sind als zwölf Pixel: Legendenquadrate von 7 × 7 (`.kl-legende i`), 10 × 10 (`.rs-punkt`) und 11 × 11 (`.band-legende i`), dazu Balkenreste von 2 px Höhe. Auf einem 7-px-Quadrat ist ein Radius von 6 px kein Radius mehr, sondern ein Kreis — und ein Kreis sagt etwas anderes als ein Quadrat. Fünf Stellen, die sonst feste Werte behalten müssten. 🔴 `--r0` ist NICHT die neue Standardstufe. Alles ab zwölf Pixel nimmt weiter `--r1`. Wer ihn an einem Etikett benutzt, hat die Staffel um eine Stufe nach unten verschoben statt eine Lücke geschlossen. ⚠️ Balken bekommen KEINEN dieser Werte: Ein Balken, dessen Radius seine halbe Höhe ist, ist eine Pille — dafür gibt es `--rund`. So machen es `.pcbar .track` (8 px hoch), `.kl-bar` (7 px) und `.blatt-balken .track` (9 px) seit dem 19.09.2026. */ --r0: 3px; /* nur unter 12 px: Legendenquadrate, Balkenreste */ --r1: 6px; /* Etiketten, kleine Knöpfe */ --r2: 16px; /* Eingabefelder, Chips */ --r3: 24px; /* Karten, Tabellenkästen */ --r4: 32px; /* große Flächen */ --rund: 999px; /* Pillen */ /* --- SCHATTEN ----------------------------------------------------------- Drei Höhen, alle weich und farbig getönt statt schwarz. Ein grauer Schatten auf warmem Papier sieht schmutzig aus; dieser ist aus der Textfarbe gemischt und bleibt sauber. Seit dem 19.09.2026 ist das Papier kühl — die Mischung stimmt weiter, denn sie kommt aus `--text` (#1a2332) und ist selbst blaugrau. */ --h1: 0 1px 2px rgba(29,29,27,.06); --h2: 0 1px 2px rgba(29,29,27,.04), 0 8px 32px rgba(29,29,27,.04); --h3: 0 24px 80px rgba(29,29,27,.20); /* --- BEWEGUNG ----------------------------------------------------------- Nur wo sie etwas erklärt: ein Aufklappen, ein Treffer, ein Wechsel. Nie als Schmuck. Die Kurve ist die gleiche wie in iOS/macOS. */ --anim: 160ms cubic-bezier(.4, 0, .2, 1); --anim-lang: 260ms cubic-bezier(.4, 0, .2, 1); /* --- MASSE -------------------------------------------------------------- Die Seitenbreite stand bisher an mehreren Stellen. */ --seite-max: 1680px; --seite-rand: var(--a5); /* 🆕 04.10.2026 · Breite der festen Seitenleiste der Plattform (Kompass, `rahmen.html`). */ --leiste-breite: 224px; } /* =========================================================================== DUNKELMODUS =========================================================================== Nur die Token werden getauscht, keine einzige Regel. Genau dafür sind sie da. Wer eine Farbe direkt in eine Regel schreibt, bricht den Dunkelmodus, ohne es zu merken — er sieht ihn ja nicht. ⚠️ Der Druck bleibt hell. Das regelt die Druckregel im Template, nicht diese Datei: Ein dunkel gedrucktes Blatt kostet eine Tonerpatrone und ist auf Papier unlesbar. =========================================================================== */ /* 🔴 ZWEI SELEKTOREN, EIN BLOCK. `@media (prefers-color-scheme: dark)` gilt im Cockpit — dort entscheidet das Betriebssystem. `html.dunkel-probe` gilt in der Musterseite, wo ein Knopf umschaltet: Beim Prüfen braucht man beide Fassungen nebeneinander, ohne Windows umzustellen. CSS kann eine Media-Bedingung und eine Klasse nicht in einem Selektor verbinden. Deshalb steht der Block hier zweimal — aber in EINER Datei, direkt untereinander. Wer eine Farbe ändert, sieht die zweite Stelle. Am 09.09.2026 stand die zweite Fassung noch in bausteine.html; genau so entstehen die zwei Wahrheiten, von denen eine still veraltet. */ /* 🆕 DIE WAHL EINES MENSCHEN - `data-farbe`, dazugekommen am 20.09.2026. ------------------------------------------------------------------------- Maetti sah die Plattform zweimal dunkel, obwohl das helle CI ausgeliefert ist. Gemessen an diesem Tag an der laufenden Seite: ausgeliefert wird `--papier: #f4f6f9`, umgeschaltet hat allein `prefers-color-scheme` - also sein Windows. Das war kein Fehler im Entwurf, es fehlte die Wahl. Drei Zustaende, zwei Blöcke, KEINE dritte Fassung der Werte: kein Merkmal am "Automatisch" - das Betriebssystem entscheidet. Das ist zugleich der Zustand des Cockpits und der Jahresmappe, die beide kein Merkmal setzen. data-farbe="dunkel" ausdruecklich dunkel, auch bei hellem Windows. data-farbe="hell" ausdruecklich hell, auch bei dunklem Windows. Deshalb stehen unten zwei Aenderungen am SELEKTOR und keine einzige am Wert: Der Media-Block traegt `html:not([data-farbe="hell"])` - er greift also weiter ueberall, nur nicht mehr gegen eine ausdrueckliche Wahl. Und der Probe-Block bekommt `html[data-farbe="dunkel"]` als zweite Adresse dazu. Eine dritte Liste der Farbwerte gibt es damit nicht. ⚠️ Wer die Werte anfasst, fasst sie weiterhin an ZWEI Stellen an - das war vor dem 20.09.2026 schon so und ist durch die Wahl nicht schlimmer geworden. Wer eine dritte anlegt, hat drei Farbwelten. 🔴 `:root` ist hier durch `html:not(...)` ersetzt. Beides meint dasselbe Element; die Spezifitaet steigt von 0,1,0 auf 0,1,1 und liegt damit gleich mit `html.dunkel-probe`. Beide Blöcke setzen dieselben Werte, also kann daraus kein Streit entstehen. */ /* 🔴 `screen and` ist nicht schmückendes Beiwerk — es ist der Riegel gegen schwarzes Papier. Ohne diese zwei Wörter druckt jeder, der Windows auf dunkel gestellt hat, ein Rücksprache-Blatt mit weißer Schrift auf dunkelgrauem Grund: eine Tonerpatrone je Blatt, und auf Papier unlesbar. Mit ihnen greift der Dunkelmodus nur am Bildschirm, und der Druck fällt automatisch auf die hellen Werte aus :root zurück. */ @media screen and (prefers-color-scheme: dark) { /* Ohne Wahl: wie bisher. Mit der Wahl "hell": dieser Block greift nicht, und die hellen Werte aus :root bleiben stehen. */ html:not([data-farbe="hell"]) { /* Zweite der drei Stellen — siehe die Begründung oben bei :root. */ color-scheme: dark; --papier: #141b26; --flaeche: #1c2736; --flaeche-leise: #27364b; --linie: #40516c; --linie-stark: #566a88; --linie-bedien: #8d9db5; /* 3,64:1 auf --flaeche · 4,00 auf --papier */ --text: #f5f6f8; --text-leise: #bac7da; --text-still: #a9b6ca; --marke: #455d82; --marke-tief: #26364e; --marke-leise: #d9e1ed; --marke-knopf: #5874a3; /* 3,19:1 auf --flaeche · Schrift --auf-marke 4,73:1 */ --akzent: #bdcce5; /* CI-Rot, aufgehellt: 5,50:1 auf --papier */ --akzent-tief: #e3eaf5; --akzent-leise: #33465f; /* Hier traegt der HELLE Ton: 6,41:1 auf --papier, 5,83:1 auf --flaeche. */ --akzent-text: #bdcce5; /* 5,50:1 --papier · 5,00:1 --flaeche · 4,91:1 --akzent-leise */ --titelstrich: #e99aa4; /* 7,9:1 auf --papier */ --auf-akzent: #1d1d1b; /* 5,81:1 auf --akzent - Weiß trüge nur 3,27:1 */ /* Nur --auf-signal dreht um: die Signalfarben sind hier hell. --auf-marke, --auf-akzent, --weiss und --auf-weiss tragen in beiden Modi und stehen deshalb NUR oben in :root. 🔴 Sie hier zu wiederholen wäre der Fehler, nicht die Lösung: Ein Wert an drei Stellen ist ein Wert, den man an zwei Stellen vergisst. Dass --weiss im Dunkeln weiß bleibt, erreicht man dadurch, dass hier NICHTS steht — nicht dadurch, dass hier dasselbe noch einmal steht. */ --auf-signal: #1d1d1b; /* Auf dunklem Grund braucht Farbe MEHR Helligkeit, nicht weniger — sonst verschwindet sie. Die Flächen dagegen werden sehr dunkel: Ein helles Rot-Feld auf dunklem Grund blendet. ⚠️ Die drei stillen Töne müssen auch hier auseinanderliegen. Erste Fassung: Abstand 17 bis 22 — für das Auge dieselbe Farbe. Jetzt warm (grau), blau (ruhe), violett (park), gemessen über 45. */ --rot: #f2a170; --rot-flaeche: #3a2418; --rot-kante: #5e3622; --gelb: #e0b45c; --gelb-flaeche: #362c15; --gelb-kante: #55441f; /* Dunkler als im Hellmodus: Auf dunklem Papier muss mehr weg, damit der Kasten davor steht und nicht darin schwimmt. */ --schleier: rgb(0 0 0 / .66); --gruen: #6fc492; --gruen-flaeche: #16301f; --gruen-kante: #24492f; --blau: #bdcce5; --blau-flaeche: #33465f; --blau-kante: #4a5f7d; --grau: #b5bdca; --grau-flaeche: #27364b; --grau-kante: #40516c; --ruhe: #94a8b8; --ruhe-flaeche: #1e2833; --ruhe-kante: #2f3945; --park: #ab9ce0; --park-flaeche: #21232f; --park-kante: #333748; /* Reihen: im Dunkeln dreht die Stufung um - hell trägt das meiste Gewicht. */ --reihe-1: #6f86a8; --reihe-2: #a9bbd6; --reihe-3: #e3eaf5; --bild-helligkeit: .82; --h1: 0 1px 2px rgba(0,0,0,.30); --h2: 0 1px 2px rgba(0,0,0,.30), 0 8px 32px rgba(0,0,0,.10); --h3: 0 24px 80px rgba(0,0,0,.40); } } /* ⚠️ ZWEI ADRESSEN, dieselben Werte wie oben. `html.dunkel-probe` ist die Musterseite: Beim Prüfen braucht man beide Fassungen nebeneinander, ohne Windows umzustellen. Im Cockpit gibt es diese Klasse nicht; dort entscheidet allein das Betriebssystem. `html[data-farbe="dunkel"]` ist die ausdrueckliche Wahl eines Menschen auf der Plattform - der zweite Weg in den Dunkelmodus, der seit dem 20.09.2026 gebraucht wird, weil die Wahl sonst bei hellem Windows nichts bewirken koennte. Auch hier `screen`: Wer die Musterseite im Dunkelmodus druckt, um Farben zu vergleichen, bekommt sonst dasselbe schwarze Blatt. Und wer dunkel GEWAEHLT hat, druckt trotzdem auf hellem Grund - aus demselben Grund. */ @media screen { html.dunkel-probe, html[data-farbe="dunkel"] { /* Dritte der drei Stellen: die ausdrückliche Wahl eines Menschen, auch bei hellem Windows. Ohne sie bliebe genau der Fall kaputt, in dem jemand die Dunkelfassung selbst eingeschaltet hat. */ color-scheme: dark; --papier: #141b26; --flaeche: #1c2736; --flaeche-leise: #27364b; --linie: #40516c; --linie-stark: #566a88; --linie-bedien: #8d9db5; /* 3,64:1 auf --flaeche · 4,00 auf --papier */ --text: #f5f6f8; --text-leise: #bac7da; --text-still: #a9b6ca; --marke: #455d82; --marke-tief: #26364e; --marke-leise: #d9e1ed; --marke-knopf: #5874a3; /* 3,19:1 auf --flaeche · Schrift --auf-marke 4,73:1 */ --akzent: #bdcce5; /* CI-Rot, aufgehellt: 5,50:1 auf --papier */ --akzent-tief: #e3eaf5; --akzent-leise: #33465f; /* Hier traegt der HELLE Ton: 6,41:1 auf --papier, 5,83:1 auf --flaeche. */ --akzent-text: #bdcce5; /* 5,50:1 --papier · 5,00:1 --flaeche · 4,91:1 --akzent-leise */ --titelstrich: #e99aa4; /* 7,9:1 auf --papier */ --auf-akzent: #1d1d1b; /* 5,81:1 auf --akzent - Weiß trüge nur 3,27:1 */ /* Nur --auf-signal dreht um: die Signalfarben sind hier hell. --auf-marke, --auf-akzent, --weiss und --auf-weiss tragen in beiden Modi und stehen deshalb NUR oben in :root — siehe die Begründung im Block darüber. */ --auf-signal: #1d1d1b; --rot: #f2a170; --rot-flaeche: #3a2418; --rot-kante: #5e3622; --gelb: #e0b45c; --gelb-flaeche: #362c15; --gelb-kante: #55441f; /* Dunkler als im Hellmodus: Auf dunklem Papier muss mehr weg, damit der Kasten davor steht und nicht darin schwimmt. */ --schleier: rgb(0 0 0 / .66); --gruen: #6fc492; --gruen-flaeche: #16301f; --gruen-kante: #24492f; --blau: #bdcce5; --blau-flaeche: #33465f; --blau-kante: #4a5f7d; --grau: #b5bdca; --grau-flaeche: #27364b; --grau-kante: #40516c; --ruhe: #94a8b8; --ruhe-flaeche: #1e2833; --ruhe-kante: #2f3945; --park: #ab9ce0; --park-flaeche: #21232f; --park-kante: #333748; /* Reihen: im Dunkeln dreht die Stufung um - hell trägt das meiste Gewicht. */ --reihe-1: #6f86a8; --reihe-2: #a9bbd6; --reihe-3: #e3eaf5; --bild-helligkeit: .82; --h1: 0 1px 2px rgba(0,0,0,.30); --h2: 0 1px 2px rgba(0,0,0,.30), 0 8px 32px rgba(0,0,0,.10); --h3: 0 24px 80px rgba(0,0,0,.40); } } /* Ende @media screen — siehe den Riegel gegen schwarzes Papier oben */ /* Wer die Bewegung abgestellt hat, bekommt keine. Das ist keine Höflichkeit, sondern eine Einstellung des Betriebssystems, die Menschen mit Gleichgewichtsstörungen brauchen. */ @media (prefers-reduced-motion: reduce) { :root { --anim: 1ms linear; --anim-lang: 1ms linear; } } /* =========================================================================== DIE BRÜCKE — alte Namen, neue Werte ⚠️ AUF ZEIT, NICHT AUF DAUER =========================================================================== Die alten Token stehen an 375 Stellen im Template (gezählt 09.09.2026). Sie alle in einem Zug umzubenennen hieße, 375 Stellen gleichzeitig zu ändern und zu hoffen — genau die Art Umbau, nach der niemand mehr weiß, woher ein Fehler kommt. Deshalb zeigen die alten Namen hier auf die neuen. Das Cockpit läuft unverändert weiter, und jede Ansicht kann einzeln umgestellt werden. 🔴 Diese Brücke wird abgerissen, sobald Schritt 1.3 durch ist. Woran man merkt, dass es so weit ist: `grep -c "var(--ink)" cockpit_template.html` und die anderen 21 Namen ergeben alle 0. Bis dahin gilt: **Neuer Code nimmt die neuen Namen. Immer.** Zwei Namen fehlen mit Absicht: --blue / --blue-bg → zeigen auf --blau, sind aber der dritte Akzent, der verschwinden soll. Wer sie neu benutzt, baut das Problem wieder auf. =========================================================================== */ :root { --ink: var(--text); --ink-soft: var(--text-leise); --paper: var(--papier); --card: var(--flaeche); --line: var(--linie); --navy: var(--marke); --navy-deep: var(--marke-tief); --accent: var(--akzent); --red: var(--rot); --red-bg: var(--rot-flaeche); --blue: var(--blau); --blue-bg: var(--blau-flaeche); --green: var(--gruen); --green-bg: var(--gruen-flaeche); --amber: var(--gelb); --amber-bg: var(--gelb-flaeche); --grey-bg: var(--grau-flaeche); --ruhe-bg: var(--ruhe-flaeche); --park-bg: var(--park-flaeche); --shadow: var(--h2); }