/* ============================================================ KNOW HOW — Token-System v4 „Passer“ (Paket P0, 24.09.2026) Spezifikation: PLAN-V4-REDESIGN-2026-09-24.md, Abschnitt 5. Marke gemessen aus dem Original-Logo: Process Cyan #00ABE6, Process Magenta #EC008C, Ladenschild-Schwarz #0B0D10. EINE Quelle fuer Farben, Radien, Schatten, Zeiten. Keine Hex-Werte ausserhalb dieser Datei (Plan 16.2 Nr. 3). HEX-Kommentare sind Dokumentation des Zielwerts, kein Fallback. VIER FARBSAETZE (Buehnen), jeder vollstaendig ausgeschrieben (auch die abgeleiteten Tokens - ein var() wird dort aufgeloest, wo es steht; geerbt blieben Linien und Fokus der Privat-Buehne): :root PRIVAT (Standard, hell, Cyan-Platte) body:has(#zg-gewerbe:checked) GEWERBE (hell, Magenta-Platte) .schild (+ Altbestand .dunkel, .site-head, .band, .red-kopf) LADENSCHILD (schwarz) .schild .f-licht / .schild .bogen ZETTEL: heller Bogen auf Schwarz (+ Gewerbe-Zettel) NAMEN SIND FUER DAS KONTRAST-GATE GEWAEHLT (kontrast.py liest die Rolle am Namen): --flaeche-* --bg --bg-2 --karte Flaechen --text --muted --accent-text --accent2-text Schrift --knopf-fill + --on-knopf Knopf (Plan: --knopf-grund/ --knopf-text; "-text" wuerde das Gate gegen JEDE Flaeche pruefen, darum on-Rolle. --knopf-grund bleibt als Alias.) --border-feld Feldrand, UI-Rolle >= 3:1 (Plan: --line-2; 30 % erreicht nur 1,38:1, darum eigenes Token mit 70 %, --line-2 bleibt Deko) --fokus (+ Gate-Alias --outline-fokus) Fokusring, UI-Rolle >= 3:1 Ohne Rolle (rein dekorativ, tragen nie Text): --cyan --magenta --schild --platte --haar --licht --line --wash --glow --schatten --lichtkasten. Pruefen: python "C:\Users\Sebastian\Desktop\Claude Code\_tools\kontrast-check\kontrast.py" site-v4/assets/tokens.css Exit 1 = Blocker. ============================================================ */ :root{ /* ---- 5.1 Marke (fest, alle Buehnen) ------------------------- */ --cyan: #00ABE6; /* Flaeche, Platte, Primaerknopf; Schrift nur auf Schwarz */ --on-cyan: #04222E; /* Schrift auf Cyan */ --cyan-fill: var(--cyan); /* Altbestand v3 + Gate-Partner fuer --on-cyan */ --magenta: #EC008C; /* nur Linie, Platte, Punkt - NIE Text auf Hell */ --schild: #0B0D10; /* Ladenschild-Schwarz */ /* ---- 5.2 Buehne PRIVAT ---------------------------------------- */ --bg: #F6F7F5; /* Papier */ --flaeche-papier: var(--bg); --flaeche-licht: #FFFFFF; /* Leuchtkasten: Karten, Formular, Bogen-Rand */ --flaeche-wash: color-mix(in oklch, var(--cyan) 7%, var(--bg)); --licht: #FFF1D6; /* warmer Schein, nur radial, nie hinter Text */ --text: #15191C; --muted: #4E565B; --accent-text: #005F80; --accent2-text: #80004C; --knopf-fill: var(--cyan); --on-knopf: var(--on-cyan); --knopf-grund: var(--knopf-fill); --platte: var(--cyan); --haar: var(--magenta); /* ---- 5.5 abgeleitet (in JEDEM Satz neu deklariert) -------------- */ --line: color-mix(in oklch, var(--accent-text) 16%, var(--bg)); --line-2: color-mix(in oklch, var(--accent-text) 30%, var(--bg)); /* dekorative Raender */ --border-feld: color-mix(in oklch, var(--accent-text) 70%, var(--bg)); /* Feldraender >= 3:1 */ --wash: color-mix(in oklch, var(--accent-text) 8%, transparent); --fokus: var(--accent-text); --outline-fokus: var(--fokus); /* nur fuers Gate (UI-Rolle 3:1); im CSS --fokus benutzen */ --glow: color-mix(in oklch, var(--knopf-fill) 55%, transparent); /* ---- Altbestand v3 (von alten Komponenten-Dateien benutzt) ------ Bleiben, bis der jeweilige Besitzer seine Altregeln zurueckbaut. --bg-2 (Box-Grau) ist in v4 als Flaechenfarbe gestrichen (Plan 3.1), alte Bauteile brauchen es noch. */ --bg-2: #EAECE8; --accent-fill: #005F80; --on-accent: #FFFFFF; --lichtkasten: var(--flaeche-licht); --schatten: var(--schild); --snap: cubic-bezier(.16,.9,.28,1); --sect: clamp(3.5rem, 9vw, 8rem); --kopf-wrap: 90rem; /* ---- 5.6 Form, Schatten, Zeit ----------------------------------- */ --r-bogen: 6px; --r-karte: 16px; --r-knopf: 10px; --r-chip: 6px; --r-pille: 999px; /* NUR Bereichs-Umschalter */ --sh-1: 0 1px 2px color-mix(in oklch, var(--schild) 12%, transparent), 0 12px 28px -14px color-mix(in oklch, var(--schild) 30%, transparent); --sh-2: 0 18px 40px -22px color-mix(in oklch, var(--schild) 45%, transparent); --sh-passer: 5px 5px 0 var(--haar); --versatz: clamp(8px, 1vw, 14px); --ease: cubic-bezier(.16,.9,.28,1); --feder: cubic-bezier(.34,1.56,.64,1); --t-kurz: 180ms; --t-mittel: 450ms; --t-lang: 900ms; /* ---- Schrift (Rollen-Achsen stehen in basis.css) ---------------- */ --schrift-titel: "Saira", system-ui, sans-serif; --schrift-lauf: "Asap", system-ui, sans-serif; --schrift-mono: "IBM Plex Mono", ui-monospace, monospace; /* ---- 7 Raster ------------------------------------------------ */ --wrap: 76rem; --gut: clamp(1rem, 4vw, 3rem); --abstand: clamp(4rem, 2.5rem + 5vw, 7.5rem); --abstand-klein: clamp(2.5rem, 1.8rem + 2.5vw, 4rem); /* ---- Textversion 2: warme Grundflaeche „Leuchttisch-Licht“ (26.09.2026) -- NUR Rohwerte, Namen bewusst ohne Gate-Rolle (sonst prueft das Gate sie gegen die Saetze von Version 1). Version 1 benutzt keinen davon; zugeordnet werden sie in css/v2.css unter html[data-textversion="2"]. Hier stehen sie, weil Hex-Werte nur in dieser Datei stehen duerfen. Marke (Cyan/Magenta/ Schwarz) und Schriftfarben bleiben unveraendert. Kontrast-Gate: _tools-pruefung/tokens-v2-pruefung.css (Projektordner). */ --v2-warm-grund: #F9F5EF; /* Papier, warm (oklch .972 .009 80; V1 #F6F7F5) */ --v2-warm-licht: #FFFEFB; /* Leuchtkasten (oklch .996 .004 85; V1 #FFFFFF) */ --v2-warm-box: #EFEAE3; /* Box-Ton, warm (oklch .940 .011 80; V1 #EAECE8) */ --v2-warm-grund-gewerbe: #FAF2F1; /* Papier Gewerbe (oklch .968 .009 25; V1 #F8F4F7) */ --v2-warm-box-gewerbe: #F4E8E9; /* Box Gewerbe (oklch .940 .014 10; V1 #F0E4EC) */ --v2-wash-basis: #F6F7F5; /* = V1-Papier: Mischbasis der Wash-Flaeche in V2 (v2.css) */ --v2-wash-basis-gewerbe: #F8F4F7; /* = V1-Papier Gewerbe: Mischbasis der Wash-Flaeche in V2 */ } /* ============================================================ 5.3 BUEHNE GEWERBE - hell, Magenta-Platte ============================================================ */ body:has(#zg-gewerbe:checked){ --bg: #F8F4F7; --flaeche-papier: var(--bg); --flaeche-licht: #FFFFFF; --flaeche-wash: color-mix(in oklch, var(--magenta) 6%, var(--bg)); --text: #1A151A; --muted: #5A4E57; --accent-text: #80004C; --accent2-text: #005F80; --knopf-fill: #80004C; --on-knopf: #FFFFFF; --knopf-grund: var(--knopf-fill); --platte: var(--magenta); --haar: var(--cyan); --line: color-mix(in oklch, var(--accent-text) 16%, var(--bg)); --line-2: color-mix(in oklch, var(--accent-text) 30%, var(--bg)); /* dekorative Raender */ --border-feld: color-mix(in oklch, var(--accent-text) 70%, var(--bg)); /* Feldraender >= 3:1 */ --wash: color-mix(in oklch, var(--accent-text) 8%, transparent); --fokus: var(--accent-text); --outline-fokus: var(--fokus); /* nur fuers Gate (UI-Rolle 3:1); im CSS --fokus benutzen */ --glow: color-mix(in oklch, var(--knopf-fill) 55%, transparent); --bg-2: #F0E4EC; --accent-fill: #80004C; --on-accent: #FFFFFF; --lichtkasten: var(--flaeche-licht); } /* ============================================================ 5.4 BUEHNE LADENSCHILD - schwarz .schild ist die v4-Klasse (Kopf, EINE Inhaltsbuehne je Seite, Fuss). .dunkel/.site-head/.band/.red-kopf: Altbestand v3, gleiche Werte. ============================================================ */ .schild, .dunkel, .site-head, .band, .red-kopf{ --bg: #0B0D10; --flaeche-papier: var(--bg); --karte: #141920; /* dunkle Karte */ --flaeche-licht: var(--karte); /* "Leuchtkasten" auf Schwarz = dunkle Karte; der helle Zettel hat seinen eigenen Satz */ --flaeche-wash: color-mix(in oklch, var(--cyan) 7%, var(--bg)); --text: #E9EEF1; --muted: #98A4AC; --accent-text: #00ABE6; --accent2-text: #F53DA0; --knopf-fill: var(--cyan); --on-knopf: var(--on-cyan); --knopf-grund: var(--knopf-fill); --platte: var(--cyan); --haar: var(--magenta); --line: color-mix(in oklch, var(--accent-text) 16%, var(--bg)); --line-2: color-mix(in oklch, var(--accent-text) 30%, var(--bg)); /* dekorative Raender */ --border-feld: color-mix(in oklch, var(--accent-text) 70%, var(--bg)); /* Feldraender >= 3:1 */ --wash: color-mix(in oklch, var(--accent-text) 8%, transparent); --fokus: var(--accent-text); --outline-fokus: var(--fokus); /* nur fuers Gate (UI-Rolle 3:1); im CSS --fokus benutzen */ --glow: color-mix(in oklch, var(--knopf-fill) 55%, transparent); --bg-2: #141920; --lichtkasten: var(--flaeche-licht); } /* ============================================================ ZETTEL: heller Bogen/Leuchtkasten auf der schwarzen Buehne ("Boegen auf Schwarz", Plan 5.4). Innen gilt wieder der helle Satz. ============================================================ */ .schild .f-licht, .schild .bogen{ --bg: #FFFFFF; --flaeche-papier: var(--bg); --flaeche-licht: #FFFFFF; --flaeche-wash: color-mix(in oklch, var(--cyan) 7%, var(--bg)); --text: #15191C; --muted: #4E565B; --accent-text: #005F80; --accent2-text: #80004C; --knopf-fill: var(--cyan); --on-knopf: var(--on-cyan); --knopf-grund: var(--knopf-fill); --platte: var(--cyan); --haar: var(--magenta); --line: color-mix(in oklch, var(--accent-text) 16%, var(--bg)); --line-2: color-mix(in oklch, var(--accent-text) 30%, var(--bg)); /* dekorative Raender */ --border-feld: color-mix(in oklch, var(--accent-text) 70%, var(--bg)); /* Feldraender >= 3:1 */ --wash: color-mix(in oklch, var(--accent-text) 8%, transparent); --fokus: var(--accent-text); --outline-fokus: var(--fokus); /* nur fuers Gate (UI-Rolle 3:1); im CSS --fokus benutzen */ --glow: color-mix(in oklch, var(--knopf-fill) 55%, transparent); } body:has(#zg-gewerbe:checked) .schild .f-licht, body:has(#zg-gewerbe:checked) .schild .bogen{ --bg: #FFFFFF; --flaeche-papier: var(--bg); --flaeche-licht: #FFFFFF; --flaeche-wash: color-mix(in oklch, var(--magenta) 6%, var(--bg)); --text: #1A151A; --muted: #5A4E57; --accent-text: #80004C; --accent2-text: #005F80; --knopf-fill: #80004C; --on-knopf: #FFFFFF; --knopf-grund: var(--knopf-fill); --platte: var(--magenta); --haar: var(--cyan); --line: color-mix(in oklch, var(--accent-text) 16%, var(--bg)); --line-2: color-mix(in oklch, var(--accent-text) 30%, var(--bg)); /* dekorative Raender */ --border-feld: color-mix(in oklch, var(--accent-text) 70%, var(--bg)); /* Feldraender >= 3:1 */ --wash: color-mix(in oklch, var(--accent-text) 8%, transparent); --fokus: var(--accent-text); --outline-fokus: var(--fokus); /* nur fuers Gate (UI-Rolle 3:1); im CSS --fokus benutzen */ --glow: color-mix(in oklch, var(--knopf-fill) 55%, transparent); }