/* ========================================================================== Zertifikats-Design-System · Richtung B „Swiss Poster“ · Tokens v2.1 Stand 23.09.2026 · AP0e Konsolidierung (v2.0 archiviert unter archiv-v2.0/, Richtung A unter archiv-richtung-a/) Eine Datei für vier Marken (Frontend AP7 bindet nur tokens.css + components.css): Marke 1 cyberzertifikat :root / [data-brand="cyberzertifikat"] Kreis Marke 2 cloudzertifikat [data-brand="cloudzertifikat"] Raute Marke 3 tuxzertifikat [data-brand="linux"] Lochkarte Marke 4 aevozertifikat [data-brand="aevo"] Treppe Regeln - Komponenten lesen NUR diese Variablen (components.css enthält keine Farbwerte). - Jeder Marken-Block deklariert DENSELBEN vollständigen Token-Satz (geprüft durch _check/check_css.py). Grund: Tokens mit var() werden am deklarierenden Element aufgelöst – ein fehlender Token würde den bereits aufgelösten cyber-Wert von :root erben. - Markenunabhängige Maße (Skala, Abstände, Raster, Linienstärken) stehen nur im gemeinsamen :root-Block. - Dunkle Flächen: [data-surface="ink"] (alle Marken) und [data-surface="deep"] (aevo: Tiefblau; andere Marken: identisch mit ink). Die Flächen-Blöcke am Dateiende sind markenneutral und schalten nur auf die *-ink / *-deep-Tokens um. - Kontraste (WCAG 2.x): Text ≥ 4,5 : 1; große Schrift, Motive, UI-Grenzen, Füllungen gegen Spur ≥ 3 : 1. Die Kontrastblöcke je Marke erzeugt _check/check_css.py --write aus den tatsächlichen Werten dieser Datei. ========================================================================== */ /* ========================================================================== Gemeinsame, markenunabhängige Tokens ========================================================================== */ :root { /* ---- Typo-Skala Desktop -------------------------------------------------- */ --z-fs-d-xl: 168px; /* Display Hero, lh 0.86 */ --z-fs-d-l: 112px; /* Display Seitentitel, lh 0.88 */ --z-fs-d-m: 72px; /* Display Abschnittstitel, lh 0.9 */ --z-fs-num: 160px; /* große Zahlen (Score, Schritte), lh 0.82 */ --z-fs-h1: 44px; /* Space Grotesk 700, lh 1.05 */ --z-fs-h2: 32px; /* Fragen, Blocktitel, lh 1.1 */ --z-fs-h3: 24px; /* Zwischentitel, lh 1.2 */ --z-fs-h4: 18px; /* UI-Titel, lh 1.3 */ --z-fs-lead: 22px; /* Einleitung, Space Grotesk 500, lh 1.4 */ --z-fs-body: 17px; /* Fließtext, lh 1.55 */ --z-fs-small: 15px; /* UI-Text, lh 1.45 */ --z-fs-foot: 13px; /* Fußnoten, Recht, lh 1.5 */ --z-fs-label: 13px; /* Kennzeile: 700, VERSAL, +0.08em */ --z-fs-area: 120px; /* große Themen-/Handlungsfeld-Ziffern (.z-area-num) */ /* ---- Abstände (4er-Basis) ------------------------------------------------ */ --z-space-1: 4px; /* Haarabstand */ --z-space-2: 8px; /* eng */ --z-space-3: 12px; /* Label ↔ Feld */ --z-space-4: 16px; /* Standard in Blöcken */ --z-space-5: 24px; /* Blockinnenabstand */ --z-space-6: 32px; /* zwischen Blöcken */ --z-space-7: 48px; /* Seitenrand Desktop */ --z-space-8: 64px; /* Abschnitt mobil */ --z-space-9: 96px; /* Abschnitt klein */ --z-space-10: 128px; /* Abschnitt groß */ /* ---- Raster ---------------------------------------------------------------- */ --z-grid-columns: 12; /* Spaltenzahl */ --z-grid-gutter: 24px; /* Steg */ --z-grid-margin: 48px; /* Seitenrand; 1440 → Satzspiegel 1344 */ --z-grid-margin-mobile: 20px; /* Seitenrand mobil */ /* ---- Linien, Radius, Schatten ---------------------------------------------- */ --z-line-w: 2px; /* Standardlinie, Feldrahmen */ --z-line-w-heavy: 6px; /* Abschnitts- und Datenblattbalken */ --z-radius: 0; /* Swiss: keine Rundungen (Kreis nur als Motiv per clip-path) */ --z-shadow-offset: 10px; /* harter Versatzschatten, nur Dialog; Farbe = --z-ink der Marke */ --z-scrim: rgba(17, 17, 17, 0.62); /* einzige Transparenzfläche: Dialog-Hintergrund */ /* ---- Bewegung ---------------------------------------------------------------- */ --z-ease: cubic-bezier(0.2, 0.8, 0.2, 1); /* Stempel */ --z-dur-fast: 120ms; /* Hover, Fortschritt – nur Flächenfarbe */ --z-dur-stamp: 520ms; /* Aufdruck-Animation Siegel */ /* ---- Terminal / Code (Maße) ---------------------------------------------- */ --z-term-font-size: 15px; /* Terminal und Code-Block (mobil 13px) */ --z-term-line: 1.6; /* Zeilenhöhe Terminal */ /* ---- Skala (LPI 200–800) – Richtwerte für Templates/JS, kein CSS-Verbrauch --- */ --z-scale-min: 200; /* Skalenanfang */ --z-scale-max: 800; /* Skalenende */ --z-scale-pass: 500; /* Bestehensgrenze → Position (Wert − min) / (max − min) */ /* ---- Treppe (Handlungsfelder HF1–HF4) – Richtwerte der Stufenhöhen ------- */ --z-stair-1: 25%; /* Stufe 1 */ --z-stair-2: 50%; /* Stufe 2 */ --z-stair-3: 75%; /* Stufe 3 */ --z-stair-4: 100%; /* Stufe 4 */ } /* ---- Skala Mobil ------------------------------------------------------------ */ @media (max-width: 767px) { :root { --z-fs-d-xl: 52px; --z-fs-d-l: 44px; --z-fs-d-m: 38px; --z-fs-num: 88px; --z-fs-h1: 30px; --z-fs-h2: 25px; --z-fs-h3: 21px; --z-fs-lead: 19px; --z-fs-body: 16px; --z-fs-label: 12px; --z-fs-area: 72px; --z-grid-margin: 20px; --z-term-font-size: 13px; } } /* erzwingt die Mobil-Skala in Mockups/Artboards */ .z-mobile { --z-fs-d-xl: 52px; --z-fs-d-l: 44px; --z-fs-d-m: 38px; --z-fs-num: 88px; --z-fs-h1: 30px; --z-fs-h2: 25px; --z-fs-h3: 21px; --z-fs-lead: 19px; --z-fs-body: 16px; --z-fs-label: 12px; --z-fs-area: 72px; --z-grid-margin: 20px; --z-term-font-size: 13px; } /* ========================================================================== Marke 1 · cyberzertifikat (Standard) · Schwarz + Signalrot + Creme Display Archivo Black VERSAL · Grundform Kreis ========================================================================== */ :root, [data-brand="cyberzertifikat"] { /* ---- Flächen ------------------------------------------------------------ */ --z-ink: #111111; /* Schwarz: Text, Flächen, Linien */ --z-ink-2: #262626; /* zweite dunkle Ebene (Felder/Karten auf Schwarz) */ --z-paper: #EEE8DA; /* Creme: Seitengrund */ --z-paper-2: #E4DCC9; /* abgesetzte Fläche, Hover, aktive Zeile */ --z-paper-3: #D6CCB6; /* deaktiviert */ --z-sheet: #F6F2E8; /* helles Blatt: Felder, Karten auf Creme */ --z-bg: var(--z-paper); /* aktueller Grund (Flächen schalten um) */ --z-deep: #111111; /* zweite dunkle Großfläche – bei cyber = Schwarz */ --z-deep-2: #262626; /* Felder/Karten auf deep */ --z-deep-3: #3A3A3A; /* Spur/Trennlinie auf deep */ /* ---- Text --------------------------------------------------------------- */ --z-text: #111111; /* Haupttext */ --z-text-2: #3F3B35; /* sekundär */ --z-text-3: #5A554C; /* Captions, Fußnoten – Minimum, nie heller */ --z-on-ink: #EEE8DA; /* Text auf Schwarz */ --z-text-2-ink: #CFC8B8; /* sekundär auf Schwarz */ --z-text-3-ink: #A9A293; /* Minimum auf Schwarz */ --z-on-deep: #EEE8DA; /* Text auf deep */ --z-text-2-deep: #CFC8B8; /* sekundär auf deep */ --z-text-3-deep: #A9A293; /* Minimum auf deep */ /* ---- Linien (Swiss = dunkel, kräftig) ----------------------------------- */ --z-line: #111111; /* Standardlinie */ --z-line-soft: #C4B9A2; /* Tabellenzeilen, Raster – nur dekorativ */ --z-line-input: #111111; /* Feldrahmen */ --z-line-soft-ink: #3A3A3A; /* dekorative Linie auf Schwarz */ --z-line-soft-deep: #3A3A3A; /* dekorative Linie auf deep */ /* ---- Akzent (genau einer) ----------------------------------------------- */ --z-accent: #C62A1A; /* Signalrot: Fläche, Primäraktion */ --z-accent-hover: #A52214; /* Hover Primäraktion (dunkler) */ --z-accent-text: #B02515; /* Rot als Schrift/Linie auf Creme */ --z-on-accent: #F6F2E8; /* Schrift auf Akzentfläche */ --z-accent-tint: #F1D3CB; /* helle Akzentfläche (Markierung) */ --z-accent-text-ink: #F45F4B; /* Rot als Schrift auf Schwarz */ --z-accent-text-deep: #F45F4B; /* Rot als Schrift auf deep */ /* ---- Status (nur als Hinweis, immer mit Text) --------------------------- */ --z-warn: #8A5E0E; /* Ocker: Entwurf, offen */ --z-on-warn: #EEE8DA; /* Schrift auf Ocker */ --z-warn-tint: #F5EACD; /* Hinweisfläche */ --z-ok: #3F6B4A; /* Grün: bestanden, gültig, erfüllt */ --z-on-ok: #EEE8DA; /* Schrift auf Grün */ --z-ok-tint: #E2EADE; /* Hinweisfläche */ --z-bad: #B02515; /* falsch / nicht erfüllt / Grenze – bei cyber Rot (= Akzentfamilie) */ --z-on-bad: #F6F2E8; /* Schrift auf --z-bad */ --z-bad-tint: #F1D3CB; /* Fläche „falsch“ */ --z-ok-ink: #8CC79A; /* Grün auf dunklen Flächen (trägt dunkle Schrift) */ --z-on-ok-ink: #111111; /* Schrift auf --z-ok-ink */ --z-bad-ink: #F45F4B; /* falsch auf dunklen Flächen */ --z-on-bad-ink: #111111; /* Schrift auf --z-bad-ink */ --z-ph: #8A5E0E; /* Platzhalter [ ] (= Warnfarbe) */ --z-ph-dark: #E8C877; /* Platzhalter auf dunklen Flächen */ /* ---- Fokus -------------------------------------------------------------- */ --z-focus: #C62A1A; /* Fokusrahmen 3 px auf Hell */ --z-focus-ink: #F45F4B; /* Fokus auf Schwarz */ --z-focus-deep: #F45F4B; /* Fokus auf deep */ /* ---- Fortschritt -------------------------------------------------------- */ --z-progress-track: #D6CCB6; /* Spur auf Hell */ --z-progress-fill: #C62A1A; /* Füllung auf Hell */ --z-progress-track-ink: #3A3A3A; /* Spur auf Schwarz */ --z-progress-fill-ink: #F45F4B; /* Füllung auf Schwarz */ --z-progress-track-deep: #3A3A3A; /* Spur auf deep */ --z-progress-fill-deep: #F45F4B; /* Füllung auf deep */ /* ---- Leitmotiv ---------------------------------------------------------- */ --z-motif-color: #C62A1A; /* große Motive/Formen und Bedien-Akzente auf Hell */ --z-motif-color-ink: #C62A1A; /* Motive auf Schwarz */ --z-motif-color-deep: #C62A1A; /* Motive auf deep */ --z-motif-bg: #111111; /* Siegel-Quadrat */ --z-motif-fill: #C62A1A; /* Grundform im Siegel */ --z-motif-on: #F6F2E8; /* Kürzel auf der Grundform */ --z-motif-label: #EEE8DA; /* Umschrift auf dem Quadrat */ --z-motif-clip: circle(50% at 50% 50%); /* Grundform: Kreis */ --z-motif-shift: 0em; /* vertikaler Ausgleich des Kürzels */ --z-motif-text: 6.4em; /* Kürzelgröße im Siegel */ --z-seal-place: center; /* Lage des Kürzels in der Grundform */ --z-seal-pad: 0; /* Innenabstand des Kürzels */ --z-mark-bg-dark: #EEE8DA; /* Mini-Siegel-Quadrat auf dunklen Flächen (Creme) */ --z-id-prefix: "CZ"; /* Zertifikats-ID CZ-2026-000123 */ /* ---- Navigation (aktiver Punkt) ----------------------------------------- */ --z-nav-active-bg: transparent; /* Fläche aktiver Punkt */ --z-nav-active-fg: currentColor; /* Schrift aktiver Punkt */ --z-nav-active-line: #C62A1A; /* Unterstrich aktiver Punkt / Hover */ --z-nav-active-pad: 0; /* seitlicher Innenabstand aktiver Punkt */ /* ---- Schrift ------------------------------------------------------------ */ --z-font-display: "Archivo Black", "Archivo Black Fallback", "Arial Black", "Helvetica Neue", sans-serif; /* Plakat */ --z-display-weight: 400; /* Archivo Black hat nur 400 */ --z-display-stretch: normal; /* Breite */ --z-display-case: uppercase; /* Display VERSAL */ --z-display-tracking: -0.035em; /* Laufweite Display */ --z-wordmark-case: uppercase; /* Wortmarke VERSAL */ --z-wordmark-tracking: -0.01em; /* Laufweite Wortmarke */ --z-font-sans: "Space Grotesk", "Space Grotesk Fallback", "Helvetica Neue", Arial, sans-serif; /* Text + UI */ --z-font-mono: "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, Consolas, monospace; /* IDs, Timer, Code */ /* ---- Terminal / Code (Farben) ------------------------------------------- */ --z-term-bg: #1A1A1A; /* Terminal-/Code-Fläche */ --z-term-bar: #262626; /* Kopfleiste */ --z-term-fg: #EEE8DA; /* Eingabe */ --z-term-out: #C9C2B3; /* Ausgabe */ --z-term-dim: #9C978C; /* Kommentar, Pfad */ --z-term-prompt: #F45F4B; /* $ und Cursor */ --z-term-ok: #8CC79A; /* Erfolgsmeldung */ --z-term-bad: #F29580; /* Fehlermeldung */ --z-code-bg: #E4DCC9; /* Befehl im Fließtext (= paper-2) */ } /* @kontrast:cyberzertifikat */ /* ---- Kontraste cyberzertifikat (WCAG 2.x, berechnet von _check/check_css.py) ---- Schwelle: T = Text 4,5 : 1 · M = Motiv/UI/Füllung 3 : 1 Text / Creme #111111 auf #EEE8DA 15,5 : 1 [T] Text-2 / Creme #3F3B35 auf #EEE8DA 9,1 : 1 [T] Text-3 / Creme #5A554C auf #EEE8DA 6,1 : 1 [T] Text-3 / Fläche 2 #5A554C auf #E4DCC9 5,4 : 1 [T] Text-3 / Blatt #5A554C auf #F6F2E8 6,6 : 1 [T] Akzent-Schrift / Creme #B02515 auf #EEE8DA 5,5 : 1 [T] Akzent-Schrift / Blatt #B02515 auf #F6F2E8 6,0 : 1 [T] Schrift auf Akzent #F6F2E8 auf #C62A1A 5,0 : 1 [T] Schrift auf Akzent-Hover #F6F2E8 auf #A52214 6,6 : 1 [T] Warnung / Creme #8A5E0E auf #EEE8DA 4,7 : 1 [T] Schrift auf Warnung #EEE8DA auf #8A5E0E 4,7 : 1 [T] Warnung / Warn-Tönung #8A5E0E auf #F5EACD 4,8 : 1 [T] OK / Creme #3F6B4A auf #EEE8DA 5,0 : 1 [T] Schrift auf OK #EEE8DA auf #3F6B4A 5,0 : 1 [T] OK / OK-Tönung #3F6B4A auf #E2EADE 5,0 : 1 [T] Fehler / Creme #B02515 auf #EEE8DA 5,5 : 1 [T] Fehler / Blatt #B02515 auf #F6F2E8 6,0 : 1 [T] Schrift auf Fehler #F6F2E8 auf #B02515 6,0 : 1 [T] Fehler / Fehler-Tönung #B02515 auf #F1D3CB 4,8 : 1 [T] Platzhalter / Creme #8A5E0E auf #EEE8DA 4,7 : 1 [T] Befehl / Code-Fläche #111111 auf #E4DCC9 13,8 : 1 [T] Fokus / Creme #C62A1A auf #EEE8DA 4,6 : 1 [M] Fortschritt / Spur #C62A1A auf #D6CCB6 3,5 : 1 [M] Motiv / Creme #C62A1A auf #EEE8DA 4,6 : 1 [M] Nav-Linie / Creme #C62A1A auf #EEE8DA 4,6 : 1 [M] Siegel: Grundform / Quadrat #C62A1A auf #111111 3,4 : 1 [M] Siegel: Kürzel / Grundform #F6F2E8 auf #C62A1A 5,0 : 1 [T] Siegel: Umschrift / Quadrat #EEE8DA auf #111111 15,5 : 1 [T] ink: Text #EEE8DA auf #111111 15,5 : 1 [T] ink: Text-2 #CFC8B8 auf #111111 11,3 : 1 [T] ink: Text-3 #A9A293 auf #111111 7,4 : 1 [T] ink: Text-3 / ink-2 #A9A293 auf #262626 6,0 : 1 [T] ink: Akzent-Schrift #F45F4B auf #111111 5,9 : 1 [T] ink: Akzent-Schrift / ink-2 #F45F4B auf #262626 4,7 : 1 [T] ink: Fokus #F45F4B auf #111111 5,9 : 1 [M] ink: Fortschritt / Spur #F45F4B auf #3A3A3A 3,6 : 1 [M] ink: Motiv #C62A1A auf #111111 3,4 : 1 [M] ink: OK #8CC79A auf #111111 9,7 : 1 [T] ink: Schrift auf OK #111111 auf #8CC79A 9,7 : 1 [T] ink: Fehler #F45F4B auf #111111 5,9 : 1 [T] ink: Schrift auf Fehler #111111 auf #F45F4B 5,9 : 1 [T] ink: Platzhalter #E8C877 auf #111111 11,7 : 1 [T] deep: Text #EEE8DA auf #111111 15,5 : 1 [T] deep: Text-2 #CFC8B8 auf #111111 11,3 : 1 [T] deep: Text-3 #A9A293 auf #111111 7,4 : 1 [T] deep: Text / deep-2 #EEE8DA auf #262626 12,4 : 1 [T] deep: Akzent-Schrift #F45F4B auf #111111 5,9 : 1 [T] deep: Akzent-Schrift / deep-2 #F45F4B auf #262626 4,7 : 1 [T] deep: Fokus #F45F4B auf #111111 5,9 : 1 [M] deep: Fortschritt / Spur #F45F4B auf #3A3A3A 3,6 : 1 [M] deep: Motiv #C62A1A auf #111111 3,4 : 1 [M] deep: OK #8CC79A auf #111111 9,7 : 1 [T] deep: Fehler #F45F4B auf #111111 5,9 : 1 [T] deep: Platzhalter #E8C877 auf #111111 11,7 : 1 [T] Terminal: Eingabe #EEE8DA auf #1A1A1A 14,2 : 1 [T] Terminal: Ausgabe #C9C2B3 auf #1A1A1A 9,8 : 1 [T] Terminal: Kommentar #9C978C auf #1A1A1A 6,0 : 1 [T] Terminal: Kommentar / Leiste #9C978C auf #262626 5,2 : 1 [T] Terminal: Prompt #F45F4B auf #1A1A1A 5,5 : 1 [T] Terminal: Erfolg #8CC79A auf #1A1A1A 8,9 : 1 [T] Terminal: Fehler #F29580 auf #1A1A1A 7,8 : 1 [T] ------------------------------------------------------------------------ */ /* @end */ /* ========================================================================== Marke 2 · cloudzertifikat · Tiefblau + Messing + Creme Display Archivo Expanded 800 VERSAL · Grundform Raute ========================================================================== */ [data-brand="cloudzertifikat"] { /* ---- Flächen ------------------------------------------------------------ */ --z-ink: #0E1B33; /* Tiefblau: Text, Flächen, Linien */ --z-ink-2: #1B2B4A; /* zweite dunkle Ebene */ --z-paper: #EDEBE4; /* Creme kühl: Seitengrund */ --z-paper-2: #E0DDD3; /* abgesetzte Fläche, Hover, aktive Zeile */ --z-paper-3: #D4D0C4; /* deaktiviert */ --z-sheet: #F6F5F0; /* helles Blatt */ --z-bg: var(--z-paper); /* aktueller Grund */ --z-deep: #0E1B33; /* deep = ink */ --z-deep-2: #1B2B4A; /* Felder auf deep */ --z-deep-3: #34456A; /* Spur/Trennlinie auf deep */ /* ---- Text --------------------------------------------------------------- */ --z-text: #0E1B33; /* Haupttext */ --z-text-2: #34405A; /* sekundär */ --z-text-3: #545D70; /* Minimum */ --z-on-ink: #EDEBE4; /* Text auf Tiefblau */ --z-text-2-ink: #C8CDD8; /* sekundär auf Tiefblau */ --z-text-3-ink: #9EA6B8; /* Minimum auf Tiefblau */ --z-on-deep: #EDEBE4; /* Text auf deep */ --z-text-2-deep: #C8CDD8; /* sekundär auf deep */ --z-text-3-deep: #9EA6B8; /* Minimum auf deep */ /* ---- Linien ------------------------------------------------------------- */ --z-line: #0E1B33; /* Standardlinie */ --z-line-soft: #BDB8AA; /* dekorativ */ --z-line-input: #0E1B33; /* Feldrahmen */ --z-line-soft-ink: #34456A; /* dekorativ auf Tiefblau */ --z-line-soft-deep: #34456A; /* dekorativ auf deep */ /* ---- Akzent Messing ----------------------------------------------------- */ --z-accent: #7E5B1B; /* Messing dunkel: Fläche, Primäraktion */ --z-accent-hover: #664914; /* Hover (dunkler) */ --z-accent-text: #7E5B1B; /* Messing als Schrift auf Creme */ --z-on-accent: #F6F5F0; /* Schrift auf Messing */ --z-accent-tint: #EADFC6; /* helle Akzentfläche */ --z-accent-text-ink: #D9B56A; /* Messing hell als Schrift auf Tiefblau */ --z-accent-text-deep: #D9B56A; /* dito auf deep */ /* ---- Status ------------------------------------------------------------- v2.1: Warnung Rost statt Ocker (Ocker lag zu nah am Messing), „falsch“ Ziegelrot statt Messing (Akzent als Fehlersignal war irreführend). */ --z-warn: #9A4A12; /* Rost: Entwurf, offen */ --z-on-warn: #EDEBE4; /* Schrift auf Rost */ --z-warn-tint: #F4E1D0; /* Hinweisfläche */ --z-ok: #3F6B4A; /* Grün */ --z-on-ok: #EDEBE4; /* Schrift auf Grün */ --z-ok-tint: #E0E8DA; /* Hinweisfläche */ --z-bad: #A8321F; /* Ziegelrot: falsch / nicht erfüllt */ --z-on-bad: #EDEBE4; /* Schrift auf Ziegelrot */ --z-bad-tint: #F3D9D1; /* Fläche „falsch“ */ --z-ok-ink: #8CC79A; /* Grün auf dunklen Flächen */ --z-on-ok-ink: #0E1B33; /* Schrift darauf */ --z-bad-ink: #F29580; /* falsch auf dunklen Flächen */ --z-on-bad-ink: #0E1B33; /* Schrift darauf */ --z-ph: #9A4A12; /* Platzhalter [ ] (= Warnfarbe) */ --z-ph-dark: #E8C877; /* Platzhalter auf dunklen Flächen */ /* ---- Fokus -------------------------------------------------------------- */ --z-focus: #7E5B1B; /* Fokus auf Hell */ --z-focus-ink: #D9B56A; /* Fokus auf Tiefblau */ --z-focus-deep: #D9B56A; /* Fokus auf deep */ /* ---- Fortschritt -------------------------------------------------------- */ --z-progress-track: #D4D0C4; /* Spur auf Hell */ --z-progress-fill: #7E5B1B; /* Füllung auf Hell */ --z-progress-track-ink: #34456A; /* Spur auf Tiefblau */ --z-progress-fill-ink: #D9B56A; /* Füllung auf Tiefblau */ --z-progress-track-deep: #34456A; /* Spur auf deep */ --z-progress-fill-deep: #D9B56A; /* Füllung auf deep */ /* ---- Leitmotiv ---------------------------------------------------------- */ --z-motif-color: #7E5B1B; /* Motive/Bedien-Akzente auf Hell */ --z-motif-color-ink: #C9A45A; /* Motive auf Tiefblau */ --z-motif-color-deep: #C9A45A; /* Motive auf deep */ --z-motif-bg: #0E1B33; /* Siegel-Quadrat */ --z-motif-fill: #C9A45A; /* Grundform Messing hell */ --z-motif-on: #0E1B33; /* Kürzel auf Messing hell */ --z-motif-label: #EDEBE4; /* Umschrift */ --z-motif-clip: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); /* Grundform: Raute */ --z-motif-shift: 0em; /* Kürzel-Ausgleich */ --z-motif-text: 4.6em; /* Kürzelgröße */ --z-seal-place: center; /* Kürzel mittig */ --z-seal-pad: 0; /* kein Innenabstand */ --z-mark-bg-dark: transparent; /* v2.1: Raute steht frei auf Dunkel (Messing hell auf Creme wäre < 3 : 1) */ --z-id-prefix: "CL"; /* CL-2026-000123 */ /* ---- Navigation --------------------------------------------------------- */ --z-nav-active-bg: transparent; /* keine Fläche */ --z-nav-active-fg: currentColor; /* Textfarbe bleibt */ --z-nav-active-line: #7E5B1B; /* Messing-Unterstrich */ --z-nav-active-pad: 0; /* kein Innenabstand */ /* ---- Schrift ------------------------------------------------------------ */ --z-font-display: "Archivo", "Arial Black", sans-serif; /* Archivo variabel (wdth 62–125, wght 400–900) */ --z-display-weight: 800; /* ExtraBold */ --z-display-stretch: 125%; /* Expanded */ --z-display-case: uppercase; /* VERSAL */ --z-display-tracking: -0.02em; /* Laufweite */ --z-wordmark-case: uppercase; /* Wortmarke VERSAL */ --z-wordmark-tracking: -0.01em; /* Laufweite Wortmarke */ --z-font-sans: "Space Grotesk", "Space Grotesk Fallback", "Helvetica Neue", Arial, sans-serif; /* Text + UI */ --z-font-mono: "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, Consolas, monospace; /* IDs, Code */ /* ---- Terminal / Code ---------------------------------------------------- */ --z-term-bg: #0A1426; /* Terminal-Fläche */ --z-term-bar: #1B2B4A; /* Kopfleiste */ --z-term-fg: #EDEBE4; /* Eingabe */ --z-term-out: #C3C8D2; /* Ausgabe */ --z-term-dim: #9AA3B5; /* Kommentar, Pfad */ --z-term-prompt: #D9B56A; /* $ und Cursor */ --z-term-ok: #8CC79A; /* Erfolg */ --z-term-bad: #F29580; /* Fehler */ --z-code-bg: #E0DDD3; /* Befehl im Fließtext */ } /* @kontrast:cloudzertifikat */ /* ---- Kontraste cloudzertifikat (WCAG 2.x, berechnet von _check/check_css.py) ---- Schwelle: T = Text 4,5 : 1 · M = Motiv/UI/Füllung 3 : 1 Text / Creme #0E1B33 auf #EDEBE4 14,4 : 1 [T] Text-2 / Creme #34405A auf #EDEBE4 8,7 : 1 [T] Text-3 / Creme #545D70 auf #EDEBE4 5,5 : 1 [T] Text-3 / Fläche 2 #545D70 auf #E0DDD3 4,9 : 1 [T] Text-3 / Blatt #545D70 auf #F6F5F0 6,1 : 1 [T] Akzent-Schrift / Creme #7E5B1B auf #EDEBE4 5,2 : 1 [T] Akzent-Schrift / Blatt #7E5B1B auf #F6F5F0 5,7 : 1 [T] Schrift auf Akzent #F6F5F0 auf #7E5B1B 5,7 : 1 [T] Schrift auf Akzent-Hover #F6F5F0 auf #664914 7,6 : 1 [T] Warnung / Creme #9A4A12 auf #EDEBE4 5,2 : 1 [T] Schrift auf Warnung #EDEBE4 auf #9A4A12 5,2 : 1 [T] Warnung / Warn-Tönung #9A4A12 auf #F4E1D0 4,9 : 1 [T] OK / Creme #3F6B4A auf #EDEBE4 5,2 : 1 [T] Schrift auf OK #EDEBE4 auf #3F6B4A 5,2 : 1 [T] OK / OK-Tönung #3F6B4A auf #E0E8DA 4,9 : 1 [T] Fehler / Creme #A8321F auf #EDEBE4 5,6 : 1 [T] Fehler / Blatt #A8321F auf #F6F5F0 6,1 : 1 [T] Schrift auf Fehler #EDEBE4 auf #A8321F 5,6 : 1 [T] Fehler / Fehler-Tönung #A8321F auf #F3D9D1 5,0 : 1 [T] Platzhalter / Creme #9A4A12 auf #EDEBE4 5,2 : 1 [T] Befehl / Code-Fläche #0E1B33 auf #E0DDD3 12,6 : 1 [T] Fokus / Creme #7E5B1B auf #EDEBE4 5,2 : 1 [M] Fortschritt / Spur #7E5B1B auf #D4D0C4 4,0 : 1 [M] Motiv / Creme #7E5B1B auf #EDEBE4 5,2 : 1 [M] Nav-Linie / Creme #7E5B1B auf #EDEBE4 5,2 : 1 [M] Siegel: Grundform / Quadrat #C9A45A auf #0E1B33 7,3 : 1 [M] Siegel: Kürzel / Grundform #0E1B33 auf #C9A45A 7,3 : 1 [T] Siegel: Umschrift / Quadrat #EDEBE4 auf #0E1B33 14,4 : 1 [T] ink: Text #EDEBE4 auf #0E1B33 14,4 : 1 [T] ink: Text-2 #C8CDD8 auf #0E1B33 10,8 : 1 [T] ink: Text-3 #9EA6B8 auf #0E1B33 7,0 : 1 [T] ink: Text-3 / ink-2 #9EA6B8 auf #1B2B4A 5,8 : 1 [T] ink: Akzent-Schrift #D9B56A auf #0E1B33 8,8 : 1 [T] ink: Akzent-Schrift / ink-2 #D9B56A auf #1B2B4A 7,2 : 1 [T] ink: Fokus #D9B56A auf #0E1B33 8,8 : 1 [M] ink: Fortschritt / Spur #D9B56A auf #34456A 4,9 : 1 [M] ink: Motiv #C9A45A auf #0E1B33 7,3 : 1 [M] ink: OK #8CC79A auf #0E1B33 8,8 : 1 [T] ink: Schrift auf OK #0E1B33 auf #8CC79A 8,8 : 1 [T] ink: Fehler #F29580 auf #0E1B33 7,7 : 1 [T] ink: Schrift auf Fehler #0E1B33 auf #F29580 7,7 : 1 [T] ink: Platzhalter #E8C877 auf #0E1B33 10,6 : 1 [T] deep: Text #EDEBE4 auf #0E1B33 14,4 : 1 [T] deep: Text-2 #C8CDD8 auf #0E1B33 10,8 : 1 [T] deep: Text-3 #9EA6B8 auf #0E1B33 7,0 : 1 [T] deep: Text / deep-2 #EDEBE4 auf #1B2B4A 11,8 : 1 [T] deep: Akzent-Schrift #D9B56A auf #0E1B33 8,8 : 1 [T] deep: Akzent-Schrift / deep-2 #D9B56A auf #1B2B4A 7,2 : 1 [T] deep: Fokus #D9B56A auf #0E1B33 8,8 : 1 [M] deep: Fortschritt / Spur #D9B56A auf #34456A 4,9 : 1 [M] deep: Motiv #C9A45A auf #0E1B33 7,3 : 1 [M] deep: OK #8CC79A auf #0E1B33 8,8 : 1 [T] deep: Fehler #F29580 auf #0E1B33 7,7 : 1 [T] deep: Platzhalter #E8C877 auf #0E1B33 10,6 : 1 [T] Terminal: Eingabe #EDEBE4 auf #0A1426 15,4 : 1 [T] Terminal: Ausgabe #C3C8D2 auf #0A1426 11,0 : 1 [T] Terminal: Kommentar #9AA3B5 auf #0A1426 7,3 : 1 [T] Terminal: Kommentar / Leiste #9AA3B5 auf #1B2B4A 5,6 : 1 [T] Terminal: Prompt #D9B56A auf #0A1426 9,4 : 1 [T] Terminal: Erfolg #8CC79A auf #0A1426 9,4 : 1 [T] Terminal: Fehler #F29580 auf #0A1426 8,2 : 1 [T] ------------------------------------------------------------------------ */ /* @end */ /* ========================================================================== Marke 3 · tuxzertifikat [data-brand="linux"] · Anthrazit + Signalgelb + Creme Display Archivo Black VERSAL (v2.1: statt Anton) · Grundform Lochkarten-Quadrat Gelb ist NUR Fläche (Gelb auf Creme 1,6 : 1). Motive, Fortschritt, Fokus, Navigations-Linien auf Creme = Anthrazit; auf Dunkel übernimmt Gelb. Quelle: design-linux/tokens-linux.css v1.0 (AP0d) ========================================================================== */ [data-brand="linux"] { /* ---- Flächen ------------------------------------------------------------ */ --z-ink: #1E2124; /* Anthrazit: Text, Flächen, Linien */ --z-ink-2: #2C3035; /* zweite dunkle Ebene */ --z-paper: #F2EDE1; /* Creme warm (Gelb wirkt sonst grünlich) */ --z-paper-2: #E7E1D2; /* abgesetzte Fläche, Randspalte */ --z-paper-3: #D8D1BF; /* deaktiviert */ --z-sheet: #F9F6EE; /* helles Blatt */ --z-bg: var(--z-paper); /* aktueller Grund */ --z-deep: #1E2124; /* deep = ink */ --z-deep-2: #2C3035; /* Felder auf deep */ --z-deep-3: #3A3E44; /* Spur/Trennlinie auf deep */ /* ---- Text --------------------------------------------------------------- */ --z-text: #1E2124; /* Haupttext */ --z-text-2: #41454B; /* sekundär */ --z-text-3: #5A5E64; /* Minimum */ --z-on-ink: #F2EDE1; /* Text auf Anthrazit */ --z-text-2-ink: #CFC8B8; /* sekundär auf Anthrazit */ --z-text-3-ink: #A9A293; /* Minimum auf Anthrazit */ --z-on-deep: #F2EDE1; /* Text auf deep */ --z-text-2-deep: #CFC8B8; /* sekundär auf deep */ --z-text-3-deep: #A9A293; /* Minimum auf deep */ /* ---- Linien ------------------------------------------------------------- */ --z-line: #1E2124; /* Standardlinie */ --z-line-soft: #C5BEAC; /* dekorativ */ --z-line-input: #1E2124; /* Feldrahmen */ --z-line-soft-ink: #3A3E44; /* dekorativ auf Anthrazit */ --z-line-soft-deep: #3A3E44; /* dekorativ auf deep */ /* ---- Akzent Signalgelb -------------------------------------------------- */ --z-accent: #F2B300; /* nur Fläche: Primär-Button, Hero-Block, Siegel-Kern */ --z-accent-hover: #DDA300; /* Hover */ --z-accent-text: #7A5800; /* Senf dunkel: „Gelb“ als Schrift/Linie auf Creme */ --z-on-accent: #1E2124; /* auf Gelb steht immer Anthrazit */ --z-accent-tint: #F7E2A4; /* helle Gelbfläche (aktuelle Zeile) */ --z-accent-text-ink: #F2B300; /* Gelb als Schrift auf Anthrazit */ --z-accent-text-deep: #F2B300; /* dito auf deep */ /* ---- Status ------------------------------------------------------------- */ --z-warn: #9A4A12; /* Rost (Ocker kollidiert mit Senf) */ --z-on-warn: #F2EDE1; /* Schrift auf Rost */ --z-warn-tint: #F4E1D0; /* Hinweisfläche */ --z-ok: #3F6B4A; /* gedecktes Grün */ --z-on-ok: #F2EDE1; /* Schrift auf Grün */ --z-ok-tint: #E0E8DA; /* Hinweisfläche */ --z-bad: #A8321F; /* Ziegelrot: falsch / nicht erfüllt / Bestehensgrenze */ --z-on-bad: #F2EDE1; /* Schrift auf Ziegelrot */ --z-bad-tint: #F3D9D1; /* Fläche „falsch“ */ --z-ok-ink: #8CC79A; /* Grün auf Anthrazit */ --z-on-ok-ink: #1E2124; /* Schrift darauf */ --z-bad-ink: #F29580; /* falsch auf Anthrazit */ --z-on-bad-ink: #1E2124; /* Schrift darauf */ --z-ph: #9A4A12; /* Platzhalter [ ] (= Warnfarbe) */ --z-ph-dark: #E8C877; /* Platzhalter auf dunklen Flächen */ /* ---- Fokus -------------------------------------------------------------- */ --z-focus: #1E2124; /* Fokus auf Hell: Anthrazit (Gelb < 3 : 1) */ --z-focus-ink: #F2B300; /* Fokus auf Anthrazit: Gelb */ --z-focus-deep: #F2B300; /* Fokus auf deep */ /* ---- Fortschritt -------------------------------------------------------- */ --z-progress-track: #D8D1BF; /* Spur auf Hell */ --z-progress-fill: #1E2124; /* Füllung auf Hell: Anthrazit */ --z-progress-track-ink: #3A3E44; /* Spur auf Anthrazit */ --z-progress-fill-ink: #F2B300; /* Füllung auf Anthrazit: Gelb */ --z-progress-track-deep: #3A3E44; /* Spur auf deep */ --z-progress-fill-deep: #F2B300; /* Füllung auf deep */ /* ---- Leitmotiv: Lochkarten-Quadrat + Prompt-Zeichen $ ------------------- */ --z-motif-color: #1E2124; /* dunkle Motive auf Creme (nie Gelb) */ --z-motif-color-ink: #F2B300; /* Motive auf Anthrazit: Gelb */ --z-motif-color-deep: #F2B300; /* Motive auf deep */ --z-motif-bg: #1E2124; /* Siegel-Quadrat */ --z-motif-fill: #F2B300; /* Grundform Gelb auf Anthrazit */ --z-motif-on: #1E2124; /* „$“ auf Gelb */ --z-motif-label: #F2EDE1; /* Umschrift */ --z-motif-clip: polygon(24% 0, 100% 0, 100% 100%, 0 100%, 0 24%); /* Quadrat mit Lochkarten-Ecke */ --z-motif-shift: 0.04em; /* Kürzel-Ausgleich */ --z-motif-text: 9em; /* das „$“ füllt die Grundform */ --z-seal-place: center; /* Kürzel mittig */ --z-seal-pad: 0; /* kein Innenabstand */ --z-mark-bg-dark: transparent; /* Grundform steht frei auf Dunkel */ --z-id-prefix: "LX"; /* LX-2026-000123 */ /* ---- Navigation: aktiver Punkt als gelbe FLÄCHE ------------------------- */ --z-nav-active-bg: #F2B300; /* Gelbfläche */ --z-nav-active-fg: #1E2124; /* Anthrazit darauf */ --z-nav-active-line: #1E2124; /* Hover-/Aktiv-Linie Anthrazit (Gelb < 3 : 1) */ --z-nav-active-pad: 10px; /* Fläche braucht Innenabstand */ /* ---- Schrift ------------------------------------------------------------ */ --z-font-display: "Archivo Black", "Archivo Black Fallback", "Arial Black", "Helvetica Neue", sans-serif; /* wie cyber */ --z-display-weight: 400; /* einziger Schnitt */ --z-display-stretch: normal; /* Breite */ --z-display-case: uppercase; /* VERSAL */ --z-display-tracking: -0.035em; /* Laufweite */ --z-wordmark-case: uppercase; /* Wortmarke VERSAL */ --z-wordmark-tracking: -0.01em; /* Laufweite Wortmarke */ --z-font-sans: "Space Grotesk", "Space Grotesk Fallback", "Helvetica Neue", Arial, sans-serif; /* Text + UI */ --z-font-mono: "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, Consolas, monospace; /* stark präsent; Schnitt 600 nötig */ /* ---- Terminal: kein Grün-auf-Schwarz, kein Glühen, keine Scanlines ------- */ --z-term-bg: #1A1D20; /* Terminal-Fläche */ --z-term-bar: #2C3035; /* Kopfleiste */ --z-term-fg: #ECE6D8; /* Eingabe */ --z-term-out: #C3BDB0; /* Ausgabe */ --z-term-dim: #9CA0A6; /* Kommentar, Pfad */ --z-term-prompt: #F2B300; /* $ und Cursor */ --z-term-ok: #8CC79A; /* Erfolg */ --z-term-bad: #F29580; /* Fehler */ --z-code-bg: #E7E1D2; /* Befehl im Fließtext */ } /* @kontrast:linux */ /* ---- Kontraste linux (WCAG 2.x, berechnet von _check/check_css.py) ---- Schwelle: T = Text 4,5 : 1 · M = Motiv/UI/Füllung 3 : 1 Text / Creme #1E2124 auf #F2EDE1 13,8 : 1 [T] Text-2 / Creme #41454B auf #F2EDE1 8,3 : 1 [T] Text-3 / Creme #5A5E64 auf #F2EDE1 5,6 : 1 [T] Text-3 / Fläche 2 #5A5E64 auf #E7E1D2 5,0 : 1 [T] Text-3 / Blatt #5A5E64 auf #F9F6EE 6,0 : 1 [T] Akzent-Schrift / Creme #7A5800 auf #F2EDE1 5,6 : 1 [T] Akzent-Schrift / Blatt #7A5800 auf #F9F6EE 6,0 : 1 [T] Schrift auf Akzent #1E2124 auf #F2B300 8,6 : 1 [T] Schrift auf Akzent-Hover #1E2124 auf #DDA300 7,2 : 1 [T] Warnung / Creme #9A4A12 auf #F2EDE1 5,3 : 1 [T] Schrift auf Warnung #F2EDE1 auf #9A4A12 5,3 : 1 [T] Warnung / Warn-Tönung #9A4A12 auf #F4E1D0 4,9 : 1 [T] OK / Creme #3F6B4A auf #F2EDE1 5,3 : 1 [T] Schrift auf OK #F2EDE1 auf #3F6B4A 5,3 : 1 [T] OK / OK-Tönung #3F6B4A auf #E0E8DA 4,9 : 1 [T] Fehler / Creme #A8321F auf #F2EDE1 5,7 : 1 [T] Fehler / Blatt #A8321F auf #F9F6EE 6,2 : 1 [T] Schrift auf Fehler #F2EDE1 auf #A8321F 5,7 : 1 [T] Fehler / Fehler-Tönung #A8321F auf #F3D9D1 5,0 : 1 [T] Platzhalter / Creme #9A4A12 auf #F2EDE1 5,3 : 1 [T] Befehl / Code-Fläche #1E2124 auf #E7E1D2 12,4 : 1 [T] Fokus / Creme #1E2124 auf #F2EDE1 13,8 : 1 [M] Fortschritt / Spur #1E2124 auf #D8D1BF 10,6 : 1 [M] Motiv / Creme #1E2124 auf #F2EDE1 13,8 : 1 [M] Nav-Linie / Creme #1E2124 auf #F2EDE1 13,8 : 1 [M] Siegel: Grundform / Quadrat #F2B300 auf #1E2124 8,6 : 1 [M] Siegel: Kürzel / Grundform #1E2124 auf #F2B300 8,6 : 1 [T] Siegel: Umschrift / Quadrat #F2EDE1 auf #1E2124 13,8 : 1 [T] ink: Text #F2EDE1 auf #1E2124 13,8 : 1 [T] ink: Text-2 #CFC8B8 auf #1E2124 9,7 : 1 [T] ink: Text-3 #A9A293 auf #1E2124 6,4 : 1 [T] ink: Text-3 / ink-2 #A9A293 auf #2C3035 5,2 : 1 [T] ink: Akzent-Schrift #F2B300 auf #1E2124 8,6 : 1 [T] ink: Akzent-Schrift / ink-2 #F2B300 auf #2C3035 7,1 : 1 [T] ink: Fokus #F2B300 auf #1E2124 8,6 : 1 [M] ink: Fortschritt / Spur #F2B300 auf #3A3E44 5,7 : 1 [M] ink: Motiv #F2B300 auf #1E2124 8,6 : 1 [M] ink: OK #8CC79A auf #1E2124 8,3 : 1 [T] ink: Schrift auf OK #1E2124 auf #8CC79A 8,3 : 1 [T] ink: Fehler #F29580 auf #1E2124 7,2 : 1 [T] ink: Schrift auf Fehler #1E2124 auf #F29580 7,2 : 1 [T] ink: Platzhalter #E8C877 auf #1E2124 10,0 : 1 [T] deep: Text #F2EDE1 auf #1E2124 13,8 : 1 [T] deep: Text-2 #CFC8B8 auf #1E2124 9,7 : 1 [T] deep: Text-3 #A9A293 auf #1E2124 6,4 : 1 [T] deep: Text / deep-2 #F2EDE1 auf #2C3035 11,4 : 1 [T] deep: Akzent-Schrift #F2B300 auf #1E2124 8,6 : 1 [T] deep: Akzent-Schrift / deep-2 #F2B300 auf #2C3035 7,1 : 1 [T] deep: Fokus #F2B300 auf #1E2124 8,6 : 1 [M] deep: Fortschritt / Spur #F2B300 auf #3A3E44 5,7 : 1 [M] deep: Motiv #F2B300 auf #1E2124 8,6 : 1 [M] deep: OK #8CC79A auf #1E2124 8,3 : 1 [T] deep: Fehler #F29580 auf #1E2124 7,2 : 1 [T] deep: Platzhalter #E8C877 auf #1E2124 10,0 : 1 [T] Terminal: Eingabe #ECE6D8 auf #1A1D20 13,6 : 1 [T] Terminal: Ausgabe #C3BDB0 auf #1A1D20 9,0 : 1 [T] Terminal: Kommentar #9CA0A6 auf #1A1D20 6,4 : 1 [T] Terminal: Kommentar / Leiste #9CA0A6 auf #2C3035 5,1 : 1 [T] Terminal: Prompt #F2B300 auf #1A1D20 9,0 : 1 [T] Terminal: Erfolg #8CC79A auf #1A1D20 8,7 : 1 [T] Terminal: Fehler #F29580 auf #1A1D20 7,6 : 1 [T] ------------------------------------------------------------------------ */ /* @end */ /* ========================================================================== Marke 4 · aevozertifikat [data-brand="aevo"] · Schwarz + Creme + Orange, Tiefblau als zweite Großfläche ([data-surface="deep"]) Display Archivo Black in Satzschreibung · Grundform Treppe (4 Stufen = HF1–HF4) Orange trägt SCHWARZE Schrift; Creme auf Orange nur ≥ 24 px. Orange als Schrift → --z-accent-text. Fortschritt auf Hell Tiefblau (Orange/Spur < 3 : 1). Quelle: design-aevo/tokens-aevo.css v1.1 (AP0c); --a-* → --z-deep* / --z-stair-* ========================================================================== */ [data-brand="aevo"] { /* ---- Flächen ------------------------------------------------------------ */ --z-ink: #111111; /* Schwarz: Text, Linien, dunkle Blöcke */ --z-ink-2: #2A2A2A; /* zweite dunkle Ebene */ --z-paper: #F2EBDB; /* Creme, wärmer als cyber */ --z-paper-2: #E7DDC6; /* abgesetzte Fläche, Hover, aktive Zeile */ --z-paper-3: #D8CBAE; /* deaktiviert */ --z-sheet: #FAF6EC; /* Blatt: Felder, Karten, Dokumente */ --z-bg: var(--z-paper); /* aktueller Grund */ --z-deep: #152566; /* Tiefblau: große harte Flächen, Footer, Siegel */ --z-deep-2: #1E3079; /* Karten/Felder auf Tiefblau */ --z-deep-3: #0B143D; /* Fortschritts-Spur auf Tiefblau */ /* ---- Text --------------------------------------------------------------- */ --z-text: #111111; /* Haupttext */ --z-text-2: #3E3A33; /* sekundär */ --z-text-3: #5A544A; /* Minimum, nie heller */ --z-on-ink: #F2EBDB; /* Text auf Schwarz */ --z-text-2-ink: #CFC8B8; /* sekundär auf Schwarz */ --z-text-3-ink: #A9A293; /* Minimum auf Schwarz */ --z-on-deep: #F2EBDB; /* Text auf Tiefblau */ --z-text-2-deep: #C9CFE3; /* sekundär auf Tiefblau */ --z-text-3-deep: #A3ABC8; /* Minimum auf Tiefblau */ /* ---- Linien ------------------------------------------------------------- */ --z-line: #111111; /* Standardlinie */ --z-line-soft: #C9BC9E; /* dekorativ */ --z-line-input: #111111; /* Feldrahmen */ --z-line-soft-ink: #3A3A3A; /* dekorativ auf Schwarz */ --z-line-soft-deep: #3A4C95; /* dekorativ auf Tiefblau */ /* ---- Akzent Orange ------------------------------------------------------ */ --z-accent: #E2561C; /* Orange: Fläche, Primäraktion, Treppe */ --z-accent-hover: #F07A3C; /* Hover HELLER, damit Schwarz lesbar bleibt */ --z-accent-text: #A6400E; /* Orange als Schrift/Linie auf Creme */ --z-on-accent: #111111; /* auf Orange steht Schwarz */ --z-accent-tint: #F8D8C3; /* helle Orangefläche */ --z-accent-text-ink: #F07A3C; /* Orange als Schrift auf Schwarz */ --z-accent-text-deep: #FF8A4C; /* Orange als Schrift auf Tiefblau */ /* ---- Status (Senf statt Ocker: Ocker lag zu nah am Orange) -------------- */ --z-warn: #76600A; /* Senf: Entwurf, offen */ --z-on-warn: #F2EBDB; /* Schrift auf Senf */ --z-warn-tint: #F3EACB; /* Hinweisfläche */ --z-ok: #3F6B4A; /* Grün */ --z-on-ok: #F2EBDB; /* Schrift auf Grün */ --z-ok-tint: #E0E8DA; /* Hinweisfläche */ --z-bad: #A6400E; /* falsch: dunkles Orange (Akzentfamilie, wie cyber) */ --z-on-bad: #F2EBDB; /* Schrift darauf */ --z-bad-tint: #F8D8C3; /* Fläche „falsch“ (= accent-tint) */ --z-ok-ink: #8CC79A; /* Grün auf dunklen Flächen */ --z-on-ok-ink: #111111; /* Schrift darauf */ --z-bad-ink: #FF8A4C; /* falsch auf dunklen Flächen */ --z-on-bad-ink: #111111; /* Schrift darauf */ --z-ph: #76600A; /* Platzhalter [ ] (= Senf) */ --z-ph-dark: #E8C877; /* Platzhalter auf dunklen Flächen */ /* ---- Fokus -------------------------------------------------------------- */ --z-focus: #152566; /* Fokus auf Hell: Tiefblau */ --z-focus-ink: #F07A3C; /* Fokus auf Schwarz */ --z-focus-deep: #FF8A4C; /* Fokus auf Tiefblau */ /* ---- Fortschritt -------------------------------------------------------- */ --z-progress-track: #D8CBAE; /* Spur auf Hell */ --z-progress-fill: #152566; /* Füllung auf Hell: Tiefblau */ --z-progress-track-ink: #2A2A2A; /* Spur auf Schwarz (#3A3A3A wäre Orange 3,0 : 1 – zu knapp) */ --z-progress-fill-ink: #E2561C; /* Füllung auf Schwarz: Orange */ --z-progress-track-deep: #0B143D; /* Spur auf Tiefblau */ --z-progress-fill-deep: #E2561C; /* Füllung auf Tiefblau: Orange */ /* ---- Leitmotiv „Ausbilder-Siegel“: Treppe ------------------------------- */ --z-motif-color: #E2561C; /* Orange-Motive auf Creme (nur Fläche/Form, keine Schrift) */ --z-motif-color-ink: #E2561C; /* auf Schwarz */ --z-motif-color-deep: #E2561C; /* auf Tiefblau */ --z-motif-bg: #152566; /* Tiefblau-Quadrat */ --z-motif-fill: #E2561C; /* Orange-Treppe */ --z-motif-on: #111111; /* Kürzel/Stufenzahl auf Orange */ --z-motif-label: #F2EBDB; /* Umschrift */ --z-motif-clip: polygon(0 100%, 0 75%, 25% 75%, 25% 50%, 50% 50%, 50% 25%, 75% 25%, 75% 0, 100% 0, 100% 100%); /* Treppe */ --z-motif-shift: 0em; /* kein Ausgleich */ --z-motif-text: 4.4em; /* Kürzelgröße */ --z-seal-place: end; /* Treppenmitte liegt auf einer Kante → Kürzel unten rechts */ --z-seal-pad: 0 .22em .12em 0; /* Abstand zur Kante */ --z-mark-bg-dark: #F2EBDB; /* Mini-Siegel auf Dunkel: Creme-Quadrat (Tiefblau verschwände) */ --z-id-prefix: "AE"; /* AE-2026-000123 */ /* ---- Navigation --------------------------------------------------------- */ --z-nav-active-bg: transparent; /* keine Fläche */ --z-nav-active-fg: currentColor; /* Textfarbe bleibt */ --z-nav-active-line: #E2561C; /* Orange-Unterstrich (UI-Grenze ≥ 3 : 1) */ --z-nav-active-pad: 0; /* kein Innenabstand */ /* ---- Schrift ------------------------------------------------------------ */ --z-font-display: "Archivo Black", "Archivo Black Fallback", "Arial Black", "Helvetica Neue", sans-serif; /* Plakat */ --z-display-weight: 400; /* einziger Schnitt */ --z-display-stretch: normal; /* Breite */ --z-display-case: none; /* Satzschreibung = wärmer */ --z-display-tracking: -0.04em; /* Laufweite */ --z-wordmark-case: none; /* „aevozertifikat“ klein */ --z-wordmark-tracking: -0.03em; /* Laufweite Wortmarke */ --z-font-sans: "Space Grotesk", "Space Grotesk Fallback", "Helvetica Neue", Arial, sans-serif; /* Text + UI */ --z-font-mono: "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, Consolas, monospace; /* IDs, Timer */ /* ---- Terminal / Code (bei aevo selten; neutral dunkel) ------------------ */ --z-term-bg: #161616; /* Terminal-/Code-Fläche */ --z-term-bar: #2A2A2A; /* Kopfleiste */ --z-term-fg: #F2EBDB; /* Eingabe */ --z-term-out: #C9C2B3; /* Ausgabe */ --z-term-dim: #9C978C; /* Kommentar */ --z-term-prompt: #F07A3C; /* $ und Cursor */ --z-term-ok: #8CC79A; /* Erfolg */ --z-term-bad: #F29580; /* Fehler */ --z-code-bg: #E7DDC6; /* Befehl im Fließtext */ } /* @kontrast:aevo */ /* ---- Kontraste aevo (WCAG 2.x, berechnet von _check/check_css.py) ---- Schwelle: T = Text 4,5 : 1 · M = Motiv/UI/Füllung 3 : 1 Text / Creme #111111 auf #F2EBDB 15,9 : 1 [T] Text-2 / Creme #3E3A33 auf #F2EBDB 9,5 : 1 [T] Text-3 / Creme #5A544A auf #F2EBDB 6,3 : 1 [T] Text-3 / Fläche 2 #5A544A auf #E7DDC6 5,6 : 1 [T] Text-3 / Blatt #5A544A auf #FAF6EC 6,9 : 1 [T] Akzent-Schrift / Creme #A6400E auf #F2EBDB 5,3 : 1 [T] Akzent-Schrift / Blatt #A6400E auf #FAF6EC 5,8 : 1 [T] Schrift auf Akzent #111111 auf #E2561C 5,0 : 1 [T] Schrift auf Akzent-Hover #111111 auf #F07A3C 6,8 : 1 [T] Warnung / Creme #76600A auf #F2EBDB 5,1 : 1 [T] Schrift auf Warnung #F2EBDB auf #76600A 5,1 : 1 [T] Warnung / Warn-Tönung #76600A auf #F3EACB 5,1 : 1 [T] OK / Creme #3F6B4A auf #F2EBDB 5,2 : 1 [T] Schrift auf OK #F2EBDB auf #3F6B4A 5,2 : 1 [T] OK / OK-Tönung #3F6B4A auf #E0E8DA 4,9 : 1 [T] Fehler / Creme #A6400E auf #F2EBDB 5,3 : 1 [T] Fehler / Blatt #A6400E auf #FAF6EC 5,8 : 1 [T] Schrift auf Fehler #F2EBDB auf #A6400E 5,3 : 1 [T] Fehler / Fehler-Tönung #A6400E auf #F8D8C3 4,6 : 1 [T] Platzhalter / Creme #76600A auf #F2EBDB 5,1 : 1 [T] Befehl / Code-Fläche #111111 auf #E7DDC6 14,0 : 1 [T] Fokus / Creme #152566 auf #F2EBDB 11,9 : 1 [M] Fortschritt / Spur #152566 auf #D8CBAE 8,8 : 1 [M] Motiv / Creme #E2561C auf #F2EBDB 3,2 : 1 [M] Nav-Linie / Creme #E2561C auf #F2EBDB 3,2 : 1 [M] Siegel: Grundform / Quadrat #E2561C auf #152566 3,8 : 1 [M] Siegel: Kürzel / Grundform #111111 auf #E2561C 5,0 : 1 [T] Siegel: Umschrift / Quadrat #F2EBDB auf #152566 11,9 : 1 [T] ink: Text #F2EBDB auf #111111 15,9 : 1 [T] ink: Text-2 #CFC8B8 auf #111111 11,3 : 1 [T] ink: Text-3 #A9A293 auf #111111 7,4 : 1 [T] ink: Text-3 / ink-2 #A9A293 auf #2A2A2A 5,7 : 1 [T] ink: Akzent-Schrift #F07A3C auf #111111 6,8 : 1 [T] ink: Akzent-Schrift / ink-2 #F07A3C auf #2A2A2A 5,2 : 1 [T] ink: Fokus #F07A3C auf #111111 6,8 : 1 [M] ink: Fortschritt / Spur #E2561C auf #2A2A2A 3,8 : 1 [M] ink: Motiv #E2561C auf #111111 5,0 : 1 [M] ink: OK #8CC79A auf #111111 9,7 : 1 [T] ink: Schrift auf OK #111111 auf #8CC79A 9,7 : 1 [T] ink: Fehler #FF8A4C auf #111111 8,1 : 1 [T] ink: Schrift auf Fehler #111111 auf #FF8A4C 8,1 : 1 [T] ink: Platzhalter #E8C877 auf #111111 11,7 : 1 [T] deep: Text #F2EBDB auf #152566 11,9 : 1 [T] deep: Text-2 #C9CFE3 auf #152566 9,1 : 1 [T] deep: Text-3 #A3ABC8 auf #152566 6,2 : 1 [T] deep: Text / deep-2 #F2EBDB auf #1E3079 10,1 : 1 [T] deep: Akzent-Schrift #FF8A4C auf #152566 6,0 : 1 [T] deep: Akzent-Schrift / deep-2 #FF8A4C auf #1E3079 5,1 : 1 [T] deep: Fokus #FF8A4C auf #152566 6,0 : 1 [M] deep: Fortschritt / Spur #E2561C auf #0B143D 4,7 : 1 [M] deep: Motiv #E2561C auf #152566 3,8 : 1 [M] deep: OK #8CC79A auf #152566 7,2 : 1 [T] deep: Fehler #FF8A4C auf #152566 6,0 : 1 [T] deep: Platzhalter #E8C877 auf #152566 8,7 : 1 [T] Terminal: Eingabe #F2EBDB auf #161616 15,2 : 1 [T] Terminal: Ausgabe #C9C2B3 auf #161616 10,2 : 1 [T] Terminal: Kommentar #9C978C auf #161616 6,2 : 1 [T] Terminal: Kommentar / Leiste #9C978C auf #2A2A2A 4,9 : 1 [T] Terminal: Prompt #F07A3C auf #161616 6,5 : 1 [T] Terminal: Erfolg #8CC79A auf #161616 9,3 : 1 [T] Terminal: Fehler #F29580 auf #161616 8,1 : 1 [T] ------------------------------------------------------------------------ */ /* @end */ /* ========================================================================== Dunkle Flächen (markenneutral) – schalten nur auf die *-ink / *-deep-Tokens der aktiven Marke um. Müssen NACH den Marken-Blöcken stehen (gleiche Spezifität, falls data-brand und data-surface am selben Element sitzen). ========================================================================== */ [data-surface="ink"] { --z-bg: var(--z-ink); --z-text: var(--z-on-ink); --z-text-2: var(--z-text-2-ink); --z-text-3: var(--z-text-3-ink); --z-line: var(--z-on-ink); --z-line-soft: var(--z-line-soft-ink); --z-line-input: var(--z-on-ink); --z-sheet: var(--z-ink-2); --z-paper-2: var(--z-ink-2); --z-code-bg: var(--z-ink-2); --z-accent-text: var(--z-accent-text-ink); --z-focus: var(--z-focus-ink); --z-progress-track: var(--z-progress-track-ink); --z-progress-fill: var(--z-progress-fill-ink); --z-motif-color: var(--z-motif-color-ink); --z-ok: var(--z-ok-ink); --z-on-ok: var(--z-on-ok-ink); --z-bad: var(--z-bad-ink); --z-on-bad: var(--z-on-bad-ink); --z-ph: var(--z-ph-dark); --z-nav-active-line: var(--z-accent-text-ink); background: var(--z-ink); color: var(--z-text); } [data-surface="deep"] { --z-bg: var(--z-deep); --z-text: var(--z-on-deep); --z-text-2: var(--z-text-2-deep); --z-text-3: var(--z-text-3-deep); --z-line: var(--z-on-deep); --z-line-soft: var(--z-line-soft-deep); --z-line-input: var(--z-on-deep); --z-sheet: var(--z-deep-2); --z-paper-2: var(--z-deep-2); --z-code-bg: var(--z-deep-2); --z-accent-text: var(--z-accent-text-deep); --z-focus: var(--z-focus-deep); --z-progress-track: var(--z-progress-track-deep); --z-progress-fill: var(--z-progress-fill-deep); --z-motif-color: var(--z-motif-color-deep); --z-ok: var(--z-ok-ink); --z-on-ok: var(--z-on-ok-ink); --z-bad: var(--z-bad-ink); --z-on-bad: var(--z-on-bad-ink); --z-ph: var(--z-ph-dark); --z-nav-active-line: var(--z-accent-text-deep); background: var(--z-deep); color: var(--z-text); }