/* ============================================================================= themes/a/tokens.css · Variante A „Firstlinie" · Neuß Dachtechnik Besitzer: Theme-Agent A · Stand 30.09.2026 (Feinschliff nach KRITIK-a) Vertrag: BAUANLEITUNG §4 Marken-Vertrag in Worten: _bau/DESIGN-a.md HERLEITUNG (aus der Tile, _tiles/tokens-a.css) Die Marke hat zwei Farben, beide stehen auf Kran, Tor und Shirts: Anthrazit (Wortmarke „Neuß") und Dachrot (Strich + Dachwinkel). · EINE bunte Hue = Dachrot (--hue 28.3). Sie trägt Firstlinie, CTA-Fläche und kleine Akzente — NIE Überschriften-Text. · Die Neutralen sind zur Anthrazit-Hue der Wortmarke getönt (258, kühl). Bewusst kühl: Geschwister-Test gegen Kusch & Wirtz (warm-heller Grund). · Materialebene „Feinstruktur-Lack" (wie am eigenen Kran): --bg ist die glatte Fläche, --bg-2 die matte Strukturfläche (theme.css legt dort ein feines Korn auf, --struktur), --bg-3 dieselbe Fläche im Schatten (Hover). Alles aus derselben Neutral-Hue, kein zweiter Farbton. · NEU 30.09.: der Anthrazit-Block (KRITIK-a Nr. 2/12). CTA-Band und Fuß stehen auf der Farbe der Wortmarke, Schrift hell, die Firstlinie rot. Eigener Farbsatz unten (.cta-band, .site-fuss), von kontrast.py als zweiter Satz geprüft. Kein zweiter Farbton: dieselbe Anthrazit-Hue. ROLLEN --accent-fill Flächen, Firstlinie, Radio-Punkt. Nie Fließtext. --accent-text Text und Links in Rot, Hover-Fläche des Primärknopfs. Nie Deko. --on-accent Text auf --accent-fill (und auf --accent-text: 7,84:1). --field-border alles Bedienbare (WCAG 1.4.11, 3:1). --focus Anthrazit statt Rot: ein roter Ring sähe aus wie ein Fehler. --err Karmin, andere Hue als die Marke — nie allein: immer Symbol + Text. HEX-Zeilen = lesbare Doku des Zielwerts, KEIN Fallback (bei Custom Properties gewinnt immer die zweite Deklaration). Kontrast: WCAG 2.x, geprüft mit _tools/kontrast-check/kontrast.py (Exit 0, Werte im Kommentar). Nie font-variation-settings für wght/wdth: Rollen über font-weight und font-stretch (Mona Sans: wght 200–900, wdth 75–125 %, keine opsz-Achse). ============================================================================= */ :root { --hue: 28.3; /* Dachrot — die eine Marken-Hue */ --chroma: 0.197; --nhue: 258; /* Anthrazit der Wortmarke — Hue der Neutralen */ color-scheme: light; /* ---------- Flächen (kühl, zur Anthrazit-Hue getönt) ---------- */ --bg: #F4F5F7; /* Grund: Kranlack-Weiß */ --bg: oklch(97.0% 0.003 var(--nhue)); --bg-2: #E6E8EB; /* Fläche: Dachfläche im Licht */ --bg-2: oklch(93.0% 0.0046 var(--nhue)); --bg-3: #D9DBDE; /* Schattenseite der Dachfläche (Dachschnitt, Hover-Flächen) */ --bg-3: color-mix(in oklch, var(--bg-2) 94%, var(--text)); /* ---------- Text ---------- */ --text: #232528; /* 14,09:1 auf --bg · 12,52:1 auf --bg-2 · 11,08:1 auf --bg-3 */ --text: oklch(26.4% 0.0063 var(--nhue)); --muted: #585C62; /* 6,17:1 auf --bg · 5,48:1 auf --bg-2 · 4,85:1 auf --bg-3 */ --muted: oklch(47.3% 0.011 var(--nhue)); /* ---------- Akzent, zwei Rollen ---------- */ --accent-fill: #C21F1B; /* Weiß darauf 5,99:1 */ --accent-fill: oklch(52.4% var(--chroma) var(--hue)); --accent-text: #A21815; /* 7,19:1 auf --bg · 6,39:1 auf --bg-2 · 5,65:1 auf --bg-3 · Weiß darauf 7,84:1 (Hover) */ --accent-text: oklch(45.8% calc(var(--chroma) * 0.873) var(--hue)); --on-accent: #FFFFFF; /* 5,99:1 auf --accent-fill */ /* ---------- Bedienelemente (3:1) ---------- */ --field-border: #74787F; /* 4,07:1 auf --bg · 3,61:1 auf --bg-2 · 3,20:1 auf --bg-3 */ --field-border: oklch(57.2% 0.012 var(--nhue)); --focus: #232528; /* 14,09:1 auf --bg · 12,52:1 auf --bg-2 · 11,08:1 auf --bg-3 */ --focus: oklch(26.4% 0.0063 var(--nhue)); /* ---------- Ein-Akzent-Motor (dekorativ, nie allein bedeutungstragend) ---------- Getönte Flächen und Glow aus dem Dachrot. Haarlinien bewusst aus dem Anthrazit: rot getönte Linien auf kühlem Grund würden rosa wirken. */ --tint-weak: rgba(194,31,27,.06); --tint-weak: color-mix(in oklch, var(--accent-fill) 6%, transparent); --tint: rgba(194,31,27,.12); --tint: color-mix(in oklch, var(--accent-fill) 12%, transparent); --line: rgba(35,37,40,.14); --line: color-mix(in oklch, var(--text) 14%, transparent); --line-strong: rgba(35,37,40,.30); --line-strong: color-mix(in oklch, var(--text) 30%, transparent); --glow: rgba(194,31,27,.28); --glow: color-mix(in oklch, var(--accent-fill) 28%, transparent); --tiefe: rgba(35,37,40,.34); /* Schattenfarbe der „gehobenen" Fotos */ --tiefe: color-mix(in oklch, var(--text) 34%, transparent); /* ---------- Status ---------- */ --err: #9B1B30; /* 7,42:1 auf --bg · 6,60:1 auf --bg-2 · 5,84:1 auf --bg-3 */ --err: oklch(45.1% 0.162 18.7); --err-bg: rgba(155,27,48,.08); --err-bg: color-mix(in oklch, var(--err) 8%, transparent); --ok: #1C6B3F; /* 5,97:1 auf --bg · 5,31:1 auf --bg-2 · 4,69:1 auf --bg-3 */ --ok: oklch(46.9% 0.104 154.3); --ok-bg: rgba(28,107,63,.08); --ok-bg: color-mix(in oklch, var(--ok) 8%, transparent); /* Platzhalter-Gelb — bewusst KEINE Markenfarbe (14,73:1) */ --ph-bg: #FFED82; --on-ph-bg: #1C1917; /* ---------- Typografie: EINE Familie, Rollen über Achsen ---------- Mona Sans variabel (wdth 75–125 %, wght 200–900, roman + italic). Display expanded 125 % wie ein Ausleger in die Breite; das Kursiv nur als Echo der Wortmarke (ein Wort im Start-Hero). */ --disp: "Mona Sans", "Segoe UI", system-ui, sans-serif; --sans: "Mona Sans", "Segoe UI", system-ui, sans-serif; --mono: "Mona Sans", "Segoe UI", system-ui, sans-serif; /* keine Mono-Familie in A: Material-Zeilen über Breite 110 % */ --wght-display: 820; /* H1 */ --wght-h2: 720; /* 30.09.: 760 → 720, H2 tritt hinter die H1 zurück */ --wght-h3: 660; --wght-body: 400; --wght-label: 540; /* Beschriftung, Kicker, Nav */ --wght-knopf: 640; /* Knöpfe, Telefon */ --wdth-display: 125%; /* H1, Leistungsnamen */ --wdth-h2: 118%; /* H2: etwas schmaler als die H1 (Hierarchie über Breite + Größe) */ --wdth-h3: 112%; /* Zwischenüberschriften */ --wdth-body: 100%; /* Fließtext */ --wdth-label: 110%; /* Labels, Knöpfe: etwas breiter, damit 14 px tragen */ /* Fluide Grade 375 → 1440 px (rem, damit Zoom durchschlägt) */ --fs-display: clamp(2.5rem, 1.951rem + 3.944vw, 5.5rem); /* 46 → 88 px „Dach dicht." (Start-Hero) */ --fs-nach: clamp(1.375rem, 0.979rem + 1.690vw, 2.5rem); /* 22 → 40 px Nachschlag im Start-Hero */ /* Unterseiten-H1 wird wie die Start-H1 geteilt (Teil seiten-hero): Leistung + Ort als Display, der Rest als Nachschlag (KRITIK-a Nr. 1). H1 : H2 = 64 : 40 = 1,6 (1440) bzw. 36 : 24 = 1,5 (375). */ --fs-h1: clamp(2.25rem, 1.634rem + 2.629vw, 4rem); /* 36 → 64 px Unterseiten, Satzteil 1 */ --fs-h1-nach: clamp(1.375rem, 1.155rem + 0.939vw, 2rem); /* 22 → 32 px Unterseiten, Nachschlag */ --fs-h1-ganz: clamp(2.125rem, 1.641rem + 2.066vw, 3.5rem); /* 34 → 56 px H1 ohne Teilung */ --fs-h2: clamp(1.5rem, 1.148rem + 1.502vw, 2.5rem); /* 24 → 40 px (vorher 30 → 54) */ --fs-h3: clamp(1.125rem, 0.993rem + 0.563vw, 1.5rem); /* 18 → 24 px */ /* Merksatz (Abnahme 30.09.2026, NACHKRITIK-a neu 1): 22 → 34 px stand zu nah an der H2 (mobil 22 : 24). Jetzt H2 : Merksatz ≥ 1,25 bei jeder Breite (24 : 19 = 1,26 · 40 : 30 = 1,33); in Handbuch-Spalte, Kasten und Split die kleine Stufe (19 → 24 px). */ --fs-merk: clamp(1.1875rem, 0.945rem + 1.033vw, 1.875rem); /* 19 → 30 px .merksatz */ --fs-merk-klein: clamp(1.1875rem, 1.077rem + 0.469vw, 1.5rem); /* 19 → 24 px Merksatz in Spalte/Kasten/Split */ --fs-h2-spalte: clamp(1.5rem, 1.148rem + 1.502vw, 2.125rem); /* H2 in der Handbuch-Spalte ab 75em: 34 px statt 40 (keine Trennung) */ --fs-wert: clamp(1.75rem, 1.398rem + 1.502vw, 2.75rem); /* 28 → 44 px .kennwert dt (höchstens) */ --fs-lead: clamp(1.125rem, 1.059rem + 0.282vw, 1.3125rem); /* 18 → 21 px */ --fs-body: clamp(1rem, 0.956rem + 0.188vw, 1.125rem); /* 16 → 18 px */ --fs-klein: clamp(0.875rem, 0.853rem + 0.094vw, 0.9375rem); /* 14 → 15 px — nie kleiner */ --lh-body: 1.55; --track-display: -0.028em; --track-label: 0.03em; /* ---------- Raum und Form ---------- */ --s-1: clamp(0.5rem, 0.412rem + 0.376vw, 0.75rem); /* 8 → 12 */ --s-2: clamp(0.75rem, 0.618rem + 0.563vw, 1.125rem); /* 12 → 18 */ --s-3: clamp(1.125rem, 0.9049rem + 0.939vw,1.75rem); /* 18 → 28 */ --s-4: clamp(1.75rem, 1.3979rem + 1.502vw,2.75rem); /* 28 → 44 */ --s-5: clamp(2.5rem, 1.8838rem + 2.629vw,4.25rem); /* 40 → 68 */ --s-6: clamp(3.5rem, 2.4437rem + 4.507vw,6.5rem); /* 56 → 104 */ --s-7: clamp(4.5rem, 2.9rem + 6.8vw, 9rem); /* 72 → 144 */ --s-8: clamp(6rem, 3.6rem + 10vw, 12rem); /* 96 → 192 */ --wrap: 82rem; --wrap-text: 66ch; --radius: 2px; /* Blech statt Kissen: kleiner Radius, überall gleich */ --radius-sm: 2px; --ease-signatur: cubic-bezier(.2,.7,.25,1); --dauer: .18s; --kopf-h: 4.75rem; /* ---------- Firstlinie (die Signatur) ---------- Strich 6 px, Anstieg 33°, Abfall 52° — überall identisch, nie skaliert. Geometrie: Knick 74 × 36 px, Pfad M0 33 H4 L48 4.43 L70.32 33. */ --fl-s: 6px; --fl-h: 36px; --fl-kurz: 9.5rem; /* unter der Unterseiten-H1 (mobil), Einwand-Kasten */ /* Tafel hinter dem Seitenkopf-Foto: 11 % Anthrazit in --bg-2 (#CED0D3), dazu das Korn. Trägt NIE Text (Bildunterschriften stehen unterhalb), darum ohne Rollen-Namen: kontrast.py prüft sie bewusst nicht. */ --tafel: #CED0D3; --tafel: color-mix(in oklch, var(--bg-2) 89%, var(--text)); } /* ============================================================================= ANTHRAZIT-BLOCK (CTA-Band am Seitenende + Fuß) — zweiter Farbsatz Dieselben Rollen-Namen, lokal neu belegt: alles in theme.css/basis.css, was var(--text), var(--bg) … liest, kippt dort automatisch in die dunkle Fassung. Flächen = Anthrazit der Wortmarke (#232528), Schrift = Kranlack-Weiß. Rot bleibt Linie und Knopf (--accent-fill, Weiß darauf 5,99:1 wie oben); Links werden hell (rot auf Anthrazit hätte nur 2,4:1), unterstrichen in Rot. Werte in den Kommentaren: WCAG 2.x auf --bg / --bg-2 / --bg-3 dieses Satzes. ============================================================================= */ .cta-band, .site-fuss { --bg: #232528; /* Anthrazit der Wortmarke */ --bg: oklch(26.4% 0.0063 258); --bg-2: #2F3135; /* Hover-Fläche */ --bg-2: oklch(31.2% 0.0072 258); --bg-3: #383B3F; /* Hover auf Hover-Fläche */ --bg-3: oklch(35.2% 0.008 258); --text: #F4F5F7; /* 14,09 · 11,95 · 10,32 : 1 */ --text: oklch(97.0% 0.003 258); --muted: #BABEC4; /* 8,23 · 6,98 · 6,03 : 1 */ --muted: oklch(80.0% 0.009 258); --accent-text: #F4F5F7; /* Links hell, Unterstreichung in --accent-fill */ --accent-text: oklch(97.0% 0.003 258); --field-border: #91969C; /* 5,16 · 4,37 · 3,78 : 1 (Soll 3) */ --field-border: oklch(67.0% 0.011 258); --focus: #F4F5F7; /* Fokusring hell: Anthrazit wäre hier unsichtbar */ --focus: oklch(97.0% 0.003 258); --err: #F29799; /* 7,07 · 6,00 · 5,18 : 1 — Vorsorge, im Block steht kein Formular */ --err: oklch(77.0% 0.11 18.7); --err-bg: color-mix(in oklch, var(--err) 12%, transparent); --ok: #8CD4A4; /* 8,83 · 7,49 · 6,47 : 1 */ --ok: oklch(81.0% 0.1 154.3); --ok-bg: color-mix(in oklch, var(--ok) 12%, transparent); --line: color-mix(in oklch, var(--text) 16%, transparent); --line-strong: color-mix(in oklch, var(--text) 32%, transparent); --tiefe: rgba(0, 0, 0, .45); color-scheme: dark; }