/* ============================================================================= themes/c/tokens.css · Variante C „Schieferbuch" · Neuß Dachtechnik Besitzer: Theme-Agent C · Stand 30.09.2026 · Vertrag: BAUANLEITUNG §4 Marken-Vertrag in Worten: _bau/DESIGN-c.md EINE Marken-Hue: Marineblau, oklch-Farbton 263 — das Blau der Team-Shirts. Rot bleibt ausschließlich im Logo (Dachwinkel). Alles andere leitet sich aus der einen Hue ab: Kreideweiß (Papier), Zinkgrau (zweite Fläche), Schiefer (Text, Schlusstafel) und Marine (Akzent). Dekorative Töne per color-mix(). Rollen: --accent-fill Flächen, Knöpfe, Schuppen-Linien, Ränder. Nie Fließtext. --accent-text Text und Links in der Marken-Hue. --on-accent Text AUF --accent-fill. --field-border alles Bedienbare (WCAG 1.4.11, 3:1). --line/--tint/--glow rein dekorativ. HEX-Zeilen = lesbare Doku des Zielwerts, KEIN Fallback (bei Custom Properties gewinnt immer die zweite Deklaration). Kontrast nach WCAG 2.x, nachgerechnet (relative Luminanz); Prüfung: _tools/kontrast-check/kontrast.py. ============================================================================= */ :root { --hue: 263; color-scheme: light; /* ---------- Grundflächen ---------- */ /* Kreideweiß: neutral, ein Hauch kühl. Ausdrücklich KEIN Creme. */ --bg: #F8F8F9; --bg: oklch(98.0% 0.0015 var(--hue)); /* Zinkgrau: die zweite Fläche, wie abgewittertes Titanzink. Seit 30.09.2026 tiefer (L 95,1 → 93,2 %, KRITIK-c Nr. 5): Die Fläche soll als Material spürbar sein, nicht als 3-Punkte-Abweichung vom Papier. */ --bg-2: #E6EAEE; --bg-2: oklch(93.2% 0.008 var(--hue)); /* ---------- Text ---------- */ --text: #161C29; /* 16,06:1 auf --bg · 14,0:1 auf --bg-2 */ --text: oklch(22.7% 0.026 var(--hue)); --muted: #4B5363; /* 7,28:1 auf --bg · 6,35:1 auf --bg-2 */ --muted: oklch(44.2% 0.028 var(--hue)); /* ---------- Akzent, zwei Rollen ---------- */ --accent-fill: #233F78; /* 9,63:1 auf --bg · 8,40:1 auf --bg-2 (Fläche) */ --accent-fill: oklch(37.8% 0.103 var(--hue)); --accent-text: #1F396F; /* 10,56:1 auf --bg · 9,21:1 auf --bg-2 */ --accent-text: oklch(35.5% 0.100 var(--hue)); --on-accent: #FFFFFF; /* 10,23:1 auf --accent-fill */ /* ---------- Bedienelemente (3:1) ---------- */ --field-border: #697893; /* 4,20:1 auf --bg · 3,66:1 auf --bg-2 */ --field-border: oklch(57.0% 0.045 var(--hue)); --focus: #233F78; /* 9,63:1 auf --bg · 8,40:1 auf --bg-2 */ --focus: oklch(37.8% 0.103 var(--hue)); /* ---------- Ein-Akzent-Motor (dekorativ, kein Sollwert) ---------- */ --tint-weak: rgba(35,63,120,.05); --tint-weak: color-mix(in oklch, var(--accent-fill) 5%, transparent); --tint: rgba(35,63,120,.10); --tint: color-mix(in oklch, var(--accent-fill) 10%, transparent); --line: rgba(35,63,120,.16); --line: color-mix(in oklch, var(--accent-fill) 16%, transparent); --line-strong: rgba(35,63,120,.34); --line-strong: color-mix(in oklch, var(--accent-fill) 34%, transparent); --glow: rgba(35,63,120,.22); --glow: color-mix(in oklch, var(--accent-fill) 22%, transparent); /* ---------- Status ---------- */ --err: #AA261D; /* 6,59:1 auf --bg · 5,74:1 auf --bg-2 */ --err: oklch(48.5% 0.170 29); --err-bg: rgba(170,38,29,.07); --err-bg: color-mix(in oklch, #AA261D 7%, transparent); --ok: #1F6B41; /* 6,11:1 auf --bg · 5,33:1 auf --bg-2 */ --ok: oklch(47.0% 0.100 155); --ok-bg: rgba(31,107,65,.07); --ok-bg: color-mix(in oklch, #1F6B41 7%, transparent); /* ---------- Platzhalter (Vorlage, fest) ---------- */ --ph-bg: #FFED82; --on-ph-bg: #1C1917; /* 14,73:1 auf --ph-bg */ /* ---------- Typografie ---------- Display: Newsreader (variabel: wght 200–800, opsz 6–72). Die optische Größe folgt der Schriftgröße (font-optical-sizing:auto): große Titel bekommen die feinen Display-Schnitte, kleine die robusten Text-Schnitte. Body: Instrument Sans (variabel: wght 400–700, wdth 75–100). KEINE Kursiv-Datei (Budget: zwei Dateien im ersten Bildschirm). Nachschlag, Bildort und Betonung laufen über Gewicht, optische Größe und Farbe; theme.css setzt font-synthesis-style:none. Achsen je Rolle über font-weight / font-stretch, nie per font-variation-settings auf body oder Überschriften. */ --disp: "Newsreader", "Iowan Old Style", Georgia, serif; --sans: "Instrument Sans", "Segoe UI", system-ui, sans-serif; --mono: "Instrument Sans", "Segoe UI", system-ui, sans-serif; /* keine Mono-Familie in C */ --wght-display: 430; /* H1 */ --wght-h2: 440; --wght-h3: 520; --wght-body: 400; --wght-label: 560; /* Knöpfe, Labels, Register-Begriffe */ --wght-nach: 330; /* H1-Nachschlag: dieselbe Familie, deutlich leichter */ --wdth-display: 100%; /* Newsreader hat keine wdth-Achse (opsz folgt der Größe) */ --wdth-body: 100%; --wdth-label: 88%; /* Bildunterschriften, Labels, Navigation: schmaler */ --wdth-knopf: 94%; /* Fluide Skala 375 → 1440 px (Media Queries nur für Spaltenwechsel) */ /* Größenkontrast (KRITIK-c Nr. 6, 30.09.2026): H1 zu H2 am Desktop 1,55 statt 1,16 (mobil 1,43 statt 1,18) — die Sektions-H2 konkurriert nicht mehr mit dem Seitentitel. */ --fs-display: clamp(2.5rem, 1.53rem + 4.13vw, 5.25rem); /* 40 → 84 px, Start-H1 */ --fs-h1: clamp(2.5rem, 1.88rem + 2.63vw, 4.25rem); /* 40 → 68 px, Unterseiten (H1 : H2 = 1,55) */ --fs-h2: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem); /* 28 → 44 px */ --fs-h3: clamp(1.25rem, 1.15rem + 0.45vw, 1.625rem); /* 20 → 26 px */ --fs-wert: clamp(2.25rem, 1.85rem + 1.7vw, 3.125rem); /* 36 → 50 px, Kennwert-Zahl */ --fs-merk: clamp(1.375rem, 1.2rem + 0.75vw, 1.875rem); /* 22 → 30 px, Merksatz */ --fs-nach: clamp(1.3rem, 1.05rem + 1vw, 1.85rem); /* H1-Nachschlag */ --fs-antwort: clamp(1.2rem, 1.1rem + 0.42vw, 1.5rem); /* Antwort-zuerst-Satz */ --fs-lead: clamp(1.125rem, 1.05rem + 0.3vw, 1.3rem); --fs-body: clamp(1.0625rem,1.03rem + 0.12vw, 1.125rem); /* 17 → 18 px */ --fs-klein: clamp(0.875rem, 0.86rem + 0.08vw, 0.9375rem); /* nie unter 14 px */ --lh-body: 1.58; --track-display: -0.02em; --track-label: 0.04em; /* ---------- Raum und Form ---------- */ --s-1: clamp(0.5rem, 0.42rem + 0.35vw, 0.75rem); --s-2: clamp(0.75rem, 0.63rem + 0.5vw, 1.125rem); --s-3: clamp(1.125rem, 0.9rem + 0.95vw, 1.75rem); --s-4: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem); --s-5: clamp(2.5rem, 1.85rem + 2.8vw, 4.5rem); --s-6: clamp(3.25rem, 2.3rem + 4.2vw, 6.5rem); --s-7: clamp(4rem, 2.6rem + 6vw, 9rem); /* Sektionsabstand */ --s-8: clamp(5.5rem, 3.4rem + 9vw, 12rem); --wrap: 80rem; --wrap-text: 66ch; --radius: 3px; --radius-sm: 2px; --ease-signatur: cubic-bezier(.22,.8,.24,1); /* legt sich ab wie ein Stein, ohne Nachfedern */ --dauer: .2s; --kopf-h: 5rem; /* ---------- Signatur „Schuppe" (Maße, keine Farben) ---------- */ --schuppe-w: clamp(4.5rem, 21%, 13rem); /* Breite der angeschnittenen Bildecke */ } /* Mobil: flacherer Kopf, damit das Hero-Bild in den ersten Bildschirm passt. */ @media (max-width: 47.99em) { :root { --kopf-h: 4.25rem; } }