/* ========================================================================== mareSpa Cockpit — TOKENS Hier stehen die WERTE. In style.css steht, wo sie hingehören. Die Trennung ist kein Selbstzweck: nur so lässt sich prüfen, ob im Code noch px-Werte an der Skala vorbei stehen — grep -oE "[0-9]+(\.[0-9]+)?px" static/style.css | sort -u | wc -l → < 15 Ein Zähler, der die Definitionen mitzählt, misst nichts. Alle Kontrastwerte in den Kommentaren sind mit design/kontrast.py nachgerechnet, nicht geschätzt. Wer eine Farbe ändert, lässt das Skript laufen — sonst entsteht wieder ein Kommentar, der 4,6:1 behauptet, wo 4,26:1 gemessen werden. ========================================================================== */ :root{ /* ── 1.1 MARKE ─────────────────────────────────────────────────────────── Kupfer hat DREI Rollen und sie sind nicht austauschbar: --copper NUR Fläche: Balken, Marker, aktiver Navigationsstrich. Niemals Text darauf, niemals Text darin. --copper-d Knopfgrund und Fokusring. Weißer Text darauf = 4,95:1. --copper-t Kupfer als TEXT oder Link auf hellem Grund = 6,04:1. Wer diese drei vertauscht, erzeugt genau den Fehler, der hier behoben wurde: Weiß auf --copper sind nur 3,75:1, und das war der Primärknopf der ganzen Oberfläche. */ --marine: #123a52; --marine-d: #0d2c3f; --nav-ruhe: #b9cfdd; /* Navigationstext auf Marine, 7,44:1 */ --nav-leise: #8fb0c2; /* inaktiv, 5,22:1 — nicht heller machen */ --copper: #b4763b; --copper-d: #9c6330; --copper-t: #8a5729; --copper-fl: #f7efe4; /* Kupferfläche für Hinweiskästen */ /* ── 1.2 ABSTAND ───────────────────────────────────────────────────────── Basis 8, Halbschritt 4. NICHTS außerhalb dieser Liste. Bänder: klein 0–8 Icon↔Text, Zellenpolster, Feldinneres, Badges mittel 12–24 Knopfpolster, Abstand innerhalb einer Gruppe groß 32–64 Seitenbereiche, Kopfzeile↔Inhalt Zwei Regeln, die im Code eingehalten werden müssen: Außenpolster ≥ größter Innenabstand. Abstand zwischen Gruppen ≥ 2 × Abstand innerhalb einer Gruppe. Sind beide gleich, sieht man nicht mehr, was zusammengehört. */ --sp-0: 0; --sp-1: 2px; --sp-2: 4px; --sp-3: 8px; --sp-4: 12px; --sp-5: 16px; --sp-6: 24px; --sp-7: 32px; --sp-8: 48px; --sp-9: 64px; /* ── 1.3 GRAULEITER ────────────────────────────────────────────────────── DREI Stufen, mehr nicht. Kühl getönt Richtung Marine, kein neutrales Grau, kein reines Schwarz. Kontrast auf Weiß: ink 17,65 text 10,25 muted 5,51 Auch auf der dunkelsten Fläche (--fl-5) bleiben alle drei über 4,5:1 — geprüft, nicht geschätzt. --muted ist die hellste erlaubte Textfarbe. HELLER WIRD NICHTS. Es gab hier eine vierte Stufe --leise (#7b8891, 3,64:1). Sie ist ersatzlos entfallen. Grund: sie war nur für Text ab 24 px zulässig, und dafür gibt es im Cockpit keinen Fall — die einzige große Zahl ist die Leitzahl, und die trägt eine Aussage, wird also nicht abgeschwächt. Ein Token ohne Verwendung ist eine Falle: der Nächste greift es, um schnell etwas zurückzunehmen, und landet unter 4,5:1. Wer künftig „etwas leiser" braucht, nimmt --muted und macht es kleiner, nicht heller. */ --ink: #0e1a22; --text: #33434c; --muted: #5c6b74; /* ── 1.4 FLÄCHEN UND LINIEN ────────────────────────────────────────────── Fünf Flächenstufen statt drei. Das ist die Gegenleistung dafür, dass Schatten fast überall verboten sind: ohne Schatten muss die Tiefe aus Flächen und Linien kommen, und mit drei Stufen geht das nicht. Auf ALLEN fünf Flächen bleiben ink/text/muted über 4,5:1. */ --fl: #ffffff; /* Karten, Detailbereich */ --fl-2: #f8fafb; /* Seitenhintergrund */ --fl-3: #f1f5f7; /* Listenspalte, Tabellenkopf */ --fl-4: #e9eff2; /* Hover, ausgewählte Zeile */ --fl-5: #e6edf0; /* gedrückt, tiefste Stufe */ --linie-w: #eef2f5; /* sehr leise Trennung */ --linie: #dde3e7; /* Standardtrennlinie */ --linie-s: #c3ccd2; /* betonte Kante — dekorativ, keine 3:1-Pflicht */ --linie-x: #0e1a22; /* Bilanz-Abschlussstrich */ /* Rahmen von Bedienelementen (Feld, Knopf, Segmentwahl, Klapp-Knopf). WCAG 1.4.11 verlangt 3:1 gegen JEDE angrenzende Fläche, nicht nur gegen Weiß. Die Vorgabe #88959f hielt das nur auf --fl (3,07) und fiel auf --fl-5 auf 2,59 — und Felder stehen auch auf grauen Flächen. #78858f hält 3,20 auf der dunkelsten Fläche. NICHT heller machen. */ --feldrand: #78858f; /* ── 1.4b GELDFLUSS ────────────────────────────────────────────────────── Die Herleitung „jede Zeile teilt die Zeile darüber" braucht unterscheidbare Segmente. Sechs Töne mit weißer Schrift gehen NICHT: bei 4,5:1 Untergrenze und 1,35 Abstand je Stufe ist bei vier Stufen Schluss (11,98 / 1,35³ = 4,88). Deshalb nach ROLLE statt nach Kategorie — das ist ohnehin die Konzeptregel: weiter was in die nächste Zeile übergeht ab der große Abgang dieser Zeile ab2 der zweite Abgang plus/minus das Ergebnis ab und ab2 liegen auf der Blau/Orange-Achse. Ihr Luminanzverhältnis ist nur 1,02 — das ist Absicht: bei Rot-Grün-Schwäche ist Blau/Orange die einzige Achse, die trägt. Zusätzlich steht die Beschriftung IM Segment, Farbe ist also nie der einzige Träger. Weißer Text auf allen fünf: 11,98 · 5,90 · 6,04 · 6,79 · 6,63. */ --fluss-weiter: #123a52; --fluss-ab: #2f6a8c; --fluss-ab2: #8a5729; --fluss-plus: #1f6748; --fluss-minus: #a83232; /* ── 1.4d DATEITYP-KACHELN ─────────────────────────────────────────────── In der Ablage trägt jede Datei eine kleine Kachel mit ihrer Endung in WEISSER Schrift. Klein und fett heißt: 4,5:1 sind Pflicht. Der Entwurf benutzt #b4763b für PDF (3,75:1) und #8a9aa3 für den Rest (2,90:1) — beide fallen durch. Ersetzt durch Töne, die es halten; dieselbe Familie, nur dunkler. Weiß darauf: 6,04 · 5,90 · 11,98 · 6,79 · 6,26. */ --typ-pdf: #8a5729; --typ-tab: #2f6a8c; /* CSV, XLSX — alles Tabellarische */ --typ-daten: #123a52; /* JSON, XML, CAMT */ --typ-bild: #1f6748; --typ-rest: #4a6472; /* ── 1.4c TEXT AUF MARINE ──────────────────────────────────────────────── Der Hero ist eine marineblaue Fläche mit hellem Text. Der Entwurf benutzt dort #7ba0b6 — das sind 4,31:1 und fällt durch. Es gibt genau zwei erlaubte Stufen, beide schon oben definiert: --nav-ruhe #b9cfdd 7,44:1 Beschriftungen, Nebenwerte --nav-leise #8fb0c2 5,22:1 Herkunftszeile, ruhigste Stufe Weiß auf Marine sind 11,98:1 und trägt die Leitzahl. */ /* ── 1.5 ZUSTANDSFARBEN ────────────────────────────────────────────────── Für ZUSTÄNDE, nicht für Kategorien. Rot heißt Verlust oder Fehler, nie „Ausgabe" — Ausgaben sind normal. Jeder Ton auf seiner eigenen Fläche über 6:1. */ --rot: #a83232; --rot-fl: #fdf2f2; --gruen: #1f6748; --gruen-fl: #eff6f2; --gelb: #7a4f19; --gelb-fl: #fdf7ec; --blau: #1c4c68; --blau-fl: #eef4f7; /* ── 1.6 SCHRIFT ───────────────────────────────────────────────────────── SECHS Größen. Nicht sieben, nicht elf. Jede Stufe mindestens 2 px von der nächsten entfernt — eine Größenstufe, die man nicht sieht, ist keine. Keine Halb-Pixel-Werte. Ganze Leiter am 12.08.2026 um eine Stufe angehoben: 12 px trugen die Spaltenköpfe, Feldbeschriftungen und jede Fußnote — also den halben Bildschirm — und waren dafür zu klein. Grundgröße jetzt 15 px. Georgia NUR für die eine Leitzahl pro Seite. Nicht in Tabellen, nicht in Summen, nicht in Formularen. Serifenziffern neben Sans-Labels in einer dichten Datenmaske sind ein Fremdkörper. */ --schrift: "Segoe UI",-apple-system,system-ui,Roboto,Helvetica,Arial,sans-serif; --serif: Georgia,"Times New Roman",serif; --mono: ui-monospace,Consolas,"Courier New",monospace; --t-mini: 10px; /* NUR die Endung auf der Dateityp-Kachel */ --t-label: 13px; --lh-label: 18px; /* Spaltenkopf, Etikett, Fußnote */ --t-body: 15px; --lh-body: 22px; /* Grundgröße — alles Normale */ --t-stark: 17px; --lh-stark: 24px; /* hervorgehobener Wert, Feldtext */ --t-titel: 20px; --lh-titel: 26px; /* Abschnittstitel */ --t-seite: 28px; --lh-seite: 34px; /* Seitentitel */ --t-leit: 44px; --lh-leit: 48px; /* die EINE Leitzahl, Georgia */ --fw-normal: 400; --fw-halb: 600; --fw-fett: 700; --ls-label: .3px; /* kleine Versalien sperren */ --ls-leit: -.02em; /* große Zahl leicht enger */ /* ── 1.7 MASSE ─────────────────────────────────────────────────────────── Zeilenhöhe 36 px = dicht genug für rund 22 sichtbare Zeilen auf 1080p, locker genug, dass Klickziele von 32 px hineinpassen. */ --oben: 48px; /* klebende Kopfzeile je Seite */ --unter: 240px; /* die eine Navigationsspalte */ --spalte: 344px; /* Listenspalte Arbeitsseiten */ --aufgabe: 880px; /* Inhaltsbreite Aufgabenseite */ --tor: 424px; /* Anmeldeseite */ --ablege-min:320px; /* Umbruchbreite Ablegen-Karte */ --kachel-b: 40px; /* Dateityp-Kachel Breite */ --kachel-h: 32px; /* Dateityp-Kachel Höhe */ --detail: 1120px; /* Textbreite im Detailbereich */ --zeile: 36px; /* Tabellenzeile */ --ziel: 32px; /* Mindestgröße Klickziel */ --ikon: 16px; /* Icon im Fließtext */ --punkt: 8px; /* Statuspunkt, Kästchen */ /* Bauteilbreiten. Alle Vielfache von 8 — auch hier gilt die Skala, sonst entsteht der Wildwuchs an anderer Stelle wieder. */ --leit-neb: 288px; /* zweite Spalte der Leitzahl */ --bal: 112px; /* Größenbalken in Aufstellungen */ --suchfeld: 192px; /* globale Suche in Ebene 1 */ --schweber: 448px; /* Toast, Palette */ --wertsp: 160px; /* Mindestbreite Wertekachel */ --rohblock: 416px; /* Hoehe aufklappbarer Rohdaten */ /* Auf 1920 blieben rechts 304 px leer, weil die Deckelung bei 1344 lag. 1600 füllt die Breite bis auf den Rand aus. Die Lesbarkeit haengt nicht an dieser Deckelung, sondern an max-inline-size:65ch am Fliesstext. */ --seite-max:1600px; /* Inhaltsbreite Karten-Seite */ --karte-min: 336px; /* Umbruchbreite Kartenraster */ --kennz-min: 240px; /* Umbruchbreite Kennzahlkarte */ --taste-min: 152px; /* Umbruchbreite Kategorietaste */ --stapel-l: 272px; /* Fortschrittsanzeige im Kopf */ --spalte-s: 56px; /* Datumsspalte in Listen */ --spalte-m: 96px; /* Wertspalte in Listen */ --spalte-k: 112px; /* Kategoriespalte in Listen */ /* Radien. Drei Stufen, jede doppelt so groß wie die vorige. Innenradius = Außenradius − Polster, sonst wirkt die innere Ecke spitz. */ --radius-karte: 20px; /* Karte, Hero */ --radius: 12px; /* Knopf, Chip, Feld */ --radius-s: 8px; /* innen liegende Blöcke */ /* ── 1.8 TIEFE ─────────────────────────────────────────────────────────── GEÄNDERT am 12.08.2026 mit dem v4-Umbau. Vorher galt: Schatten NUR für schwebende Ebenen, sonst Linie oder Flächenabstufung. Der neue Grundriss trägt seinen Inhalt in Karten auf einem getönten Seitengrund. Eine Karte ohne jede Tiefe verschwindet dort — die Trennung müsste dann wieder aus Rahmen kommen, und Rahmen + Karte nebeneinander ist genau das doppelte Mittel, das die Regel verhindern wollte. Deshalb jetzt: --tiefe-1 ist die RUHESTUFE einer Karte (1 px, kaum sichtbar, ersetzt den Rahmen). --tiefe-2 und --tiefe-3 bleiben den wirklich schwebenden Ebenen vorbehalten — Hero, Toast, Palette. Weiterhin gilt: eine Technik pro Element. Eine Karte hat Schatten ODER Rahmen. */ --tiefe-1: 0 1px 2px rgba(18,58,82,.07); --tiefe-2: 1px 2px 2px rgba(18,58,82,.05), 2px 4px 4px rgba(18,58,82,.05), 3px 6px 6px rgba(18,58,82,.05); --tiefe-3: 1px 2px 2px rgba(18,58,82,.04), 2px 4px 4px rgba(18,58,82,.04), 4px 8px 8px rgba(18,58,82,.04), 8px 16px 16px rgba(18,58,82,.04); /* ── 1.9 BEWEGUNG ──────────────────────────────────────────────────────── Kurz halten. Der häufigste Fehler ist zu lang, nicht zu kurz. */ --zeit-schnell: 120ms; /* Hover, Fokus */ --zeit-normal: 180ms; /* Einklappen, Aufdecken */ --zeit-lang: 260ms; /* Overlay, Modal */ --ease-raus: cubic-bezier(.2,.7,.2,1); --ease-rein: cubic-bezier(.4,0,.8,.3); }