/* ============================================================================= themes/b/tokens.css — Variante B „Stehfalz" · Neuß Dachtechnik Besitzer: Theme-Agent B · Stand 30.09.2026 · Vertrag: _bau/BAUANLEITUNG.md §4 Marken-Vertrag der Variante (Rollen, Regeln, Do/Don't): _bau/DESIGN-b.md IDEE IN EINEM SATZ Die Seite ist eine Metallfassade: kühle Titanzink-Flächen, Kupfer als einziger warmer Akzent, senkrechte Stehfalz-Nähte als Raster. ZWEI HUES, EINE MARKE --hue (Kupfer, 50°) ist die EINE Marken-Hue: Knöpfe, Fokus, Nähte, Links. --hue-metall (Zink, ~225°) ist Material, nie Akzent: Grund, Fläche, Text liegen fast ohne Chroma (<= 0,018) auf dieser kühlen Achse. Metall kalt, Akzent warm — wie am Dach, wo die Kupfertraufe vor grauem Zink steht. Würden die Neutralen kupferwarm getönt, landete die Seite bei Creme + Terrakotta (KI-Default Nr. 1). Rot bleibt allein im Logo. HEX-Zeilen = lesbare Doku des Zielwerts, KEIN Fallback (bei Custom Properties gewinnt immer die zweite Deklaration). Kontrastwerte: WCAG-2.x-Formel, geprüft mit _tools/kontrast-check/kontrast.py (Exit 0 Pflicht). ============================================================================= */ :root { --hue: 50; /* Kupfer — die EINE Marken-Hue */ --chroma: 0.12; --hue-metall: 225; /* Material-Hue der Neutralen (kühl), kein Akzent */ color-scheme: light; /* ---------- Flächen: Titanzink ---------- */ --bg: #F4F6F7; /* Zink hell (Grund) */ --bg: oklch(97.2% 0.003 var(--hue-metall)); --bg-2: #E4E9EB; /* Zink gewalzt (.sek--flaeche) */ --bg-2: oklch(93.1% 0.006 var(--hue-metall)); /* Zusatz der Variante (nicht im Vertrag, nicht Teil von kontrast.py, Werte nachgerechnet mit der WCAG-Formel aus den HEX-Zielwerten): */ --bg-hell: #FAFBFB; /* Blechschild (Hinweis, Felder): --text 15,5:1 · --muted 7,0:1 · --accent-text 7,2:1 · --field-border 5,3:1 */ --bg-hell: color-mix(in oklab, var(--bg) 45%, white); /* Die Traufe (.cta-band) ist seit dem Feinschliff 27.09.2026 echtes Kupferblech statt der Pfirsich-Fläche #F7EAE2 (KRITIK-b Nr. 6). Namen bewusst ohne bg-/text-Rolle: kontrast.py prüft sonst --text gegen Kupfer (das nie vorkommt). Geprüfte Paare auf der Traufe, alle mit kontrast.py: --on-accent (#FFF) auf --traufe 5,05:1 (H2, Satz, Microcopy) --on-accent (#FFF) auf --traufe-kante 6,56:1 (Walzschatten rechts) --accent-text auf --traufe-knopf 7,15:1 (Knopf invertiert) --traufe-knopf gegen --traufe 4,87:1 (Knopfkante, 1.4.11) Fokusring #FFF auf --traufe 5,05:1 */ --traufe: #A85A28; /* = --accent-fill */ --traufe: var(--accent-fill); --traufe-kante: #914A1F; /* = --accent-hover: Walzschatten, Kantung */ --traufe-kante: var(--accent-hover); --traufe-knopf: #FAFBFB; /* = --bg-hell: Knopf auf Kupfer */ --traufe-knopf: var(--bg-hell); /* ---------- Text: Schiefer ---------- */ --text: #1B2226; /* 14,86:1 auf --bg · 13,16:1 auf --bg-2 */ --text: oklch(24.7% 0.013 233); --muted: #4E585E; /* 6,72:1 auf --bg · 5,95:1 auf --bg-2 */ --muted: oklch(45.4% 0.016 234); /* ---------- Akzent Kupfer, zwei Rollen ---------- */ --accent-fill: #A85A28; /* Flächen/Nähte/Icons. Weiß darauf 5,05:1. NIE Fließtext */ --accent-fill: oklch(55% var(--chroma) var(--hue)); --accent-text: #86431C; /* Links, Text-Akzente: 6,84:1 auf --bg · 6,05:1 auf --bg-2. NIE Fläche */ --accent-text: oklch(46% calc(var(--chroma) * 0.875) 48); --on-accent: #FFFFFF; /* 5,05:1 auf --accent-fill */ --accent-hover: #914A1F; /* Hover-Fläche + Kantung der Knöpfe, Weiß darauf 6,56:1 */ --accent-hover: oklch(49% calc(var(--chroma) * 0.92) 49); /* ---------- Bedienelemente (WCAG 1.4.11, >= 3:1) ---------- */ --field-border: #5F6B72; /* 5,05:1 auf --bg · 4,48:1 auf --bg-2 */ --field-border: oklch(52% 0.018 234); --focus: #A85A28; /* 4,66:1 auf --bg · 4,13:1 auf --bg-2 */ --focus: oklch(55% var(--chroma) var(--hue)); /* ---------- Ein-Akzent-Motor (dekorativ, alles aus --accent-fill) ---------- --line trägt die Stehfalz-Nähte: bei 14 % liest sich Kupfer auf Zink als warmer Lichtreflex an der Falzkante, nicht als Farbe. Nie Bedeutungsträger. */ --tint-weak: rgba(168,90,40,.06); --tint-weak: color-mix(in oklch, var(--accent-fill) 6%, transparent); --tint: rgba(168,90,40,.12); --tint: color-mix(in oklch, var(--accent-fill) 12%, transparent); --line: rgba(168,90,40,.14); --line: color-mix(in oklch, var(--accent-fill) 14%, transparent); /* Die Stehfalz-Nähte selbst (Zusatz der Variante): kräftiger als --line, sonst las sich die freie Fassade als „blasse Stummel" (KRITIK-b Nr. 2). Nur dort, wo keine Schrift steht (Maske in theme.css §2). */ --naht-farbe: rgba(168,90,40,.26); --naht-farbe: color-mix(in oklch, var(--accent-fill) 26%, transparent); --line-strong: rgba(168,90,40,.42); --line-strong: color-mix(in oklch, var(--accent-fill) 42%, transparent); --glow: rgba(168,90,40,.26); --glow: color-mix(in oklch, var(--accent-fill) 26%, transparent); /* ---------- Status ---------- */ --err: #B3261E; /* 6,03:1 auf --bg · 5,34:1 auf --bg-2 */ --err-bg: rgba(179,38,30,.08); --err-bg: color-mix(in oklch, #B3261E 8%, transparent); --ok: #1C6B3F; /* 6,01:1 auf --bg · 5,32:1 auf --bg-2 */ --ok-bg: rgba(28,107,63,.08); --ok-bg: color-mix(in oklch, #1C6B3F 8%, transparent); --ph-bg: #FFED82; /* Platzhalter-Gelb, 14,73:1 mit --on-ph-bg */ --on-ph-bg: #1C1917; /* ---------- Typografie ---------- Schibsted Grotesk (variabel, wght 400–900) trägt Display UND Fließtext — die Spannung entsteht über Gewicht und Größe, nicht über eine zweite Familie. Martian Mono (wght 100–800, wdth 75–112,5) NUR für echte Daten: Material, Spezifikation, Belege/Quellen, Schrittnummern. KEINE Kursiv-Datei (Budget: 2 Dateien im ersten Bildschirm). Der H1- Nachschlag lebt von Gewicht + Kupferfarbe; font-synthesis-style: none verhindert eine schräg verzerrte Ersatz-Kursive (theme.css). Achsen je Rolle über font-weight / font-stretch, NIE font-variation-settings. */ --disp: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif; --sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif; --mono: "Martian Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; --wght-display: 790; /* h1 — schwer wie ein gekantetes Blech */ --wght-h2: 740; --wght-h3: 640; --wght-body: 410; /* etwas satter als 400, trägt auf Zinkgrund */ --wght-label: 620; /* Knöpfe, Labels, Navigation-Aktiv */ --wght-nach: 460; /* der „Nachschlag" im H1 (Kupfer, leichter) */ --wght-caption: 440; /* Martian Mono: Daten */ --wdth-display: 100%; /* Schibsted Grotesk hat keine wdth-Achse */ --wdth-body: 100%; --wdth-label: 100%; --wdth-caption: 87.5%; /* Martian Mono schmaler: Datenblatt, nicht Schreibmaschine */ --wdth-nummer: 75%; /* Martian Mono ganz schmal: Schrittnummern */ /* Fluide Skala 375 → 1440 px (Max <= 2,5 × Min) */ --fs-display: clamp(2.5rem, 1.444rem + 4.507vw, 5.5rem); /* 40 → 88 px, Start-H1 */ /* H1 : H2 auf Unterseiten ≥ 1,5 bei 1440 (68 : 44) und 1,38 bei 375 (36 : 26) — vorher 60 : 52 = 1,15, jede H2 las sich wie eine zweite H1 (KRITIK-b Nr. 4, Feinschliff 27.09.2026). */ --fs-h1: clamp(2.25rem, 1.546rem + 3.005vw, 4.25rem); /* 36 → 68 px, Unterseiten */ --fs-h2: clamp(1.625rem, 1.229rem + 1.690vw, 2.75rem); /* 26 → 44 px */ --fs-h3: clamp(1.25rem, 1.118rem + 0.5634vw, 1.625rem); /* 20 → 26 px */ --fs-lead: clamp(1.125rem, 1.037rem + 0.3756vw, 1.375rem); /* 18 → 22 px */ --fs-body: clamp(1rem, 0.956rem + 0.1878vw, 1.125rem); /* 16 → 18 px */ --fs-klein: clamp(0.875rem, 0.853rem + 0.0939vw, 0.9375rem);/* 14 → 15 px (nie darunter) */ --lh-body: 1.55; --track-display: -0.035em; --track-h2: -0.025em; --track-label: 0.01em; /* ---------- Raum ---------- */ --s-1: clamp(0.5rem, 0.412rem + 0.3756vw, 0.75rem); /* 8 → 12 */ --s-2: clamp(0.75rem, 0.618rem + 0.5634vw, 1.125rem); /* 12 → 18 */ --s-3: clamp(1.125rem, 0.9049rem + 0.939vw, 1.75rem); /* 18 → 28 */ --s-4: clamp(1.75rem, 1.398rem + 1.502vw, 2.75rem); /* 28 → 44 */ --s-5: clamp(2.5rem, 1.884rem + 2.629vw, 4.25rem); /* 40 → 68 */ --s-6: clamp(3.5rem, 2.444rem + 4.507vw, 6.5rem); /* 56 → 104 */ --s-7: clamp(4.5rem, 3.18rem + 5.634vw, 8.25rem); /* 72 → 132 */ --s-8: clamp(6rem, 4.239rem + 7.512vw, 11rem); /* 96 → 176 */ --wrap: 81rem; /* 1296 px = 12 Scharen à 108 px */ --wrap-text: 66ch; --radius: 2px; /* Blechkante: gekantet, nicht gerundet */ --radius-sm: 2px; --ease-signatur: cubic-bezier(.19,.86,.27,1); /* „Einfalzen": schnell heran, weich eingerastet, kein Federn */ --dauer: .18s; --kopf-h: 4.75rem; /* ---------- Das Stehfalz-Raster (Zusatz der Variante) ---------- Die Scharbreite bleibt fast gleich (84–108 px), nur die ANZAHL der Scharen wechselt: 4 mobil, 8 Tablet, 12 Desktop — wie an einer echten Fassade. --rw ist die Breite der Fassade. Sie enthält 100 % und wird deshalb erst am Verwendungsort aufgelöst (Innenabstand von .wrap, Lage der Naht-Ebene: beides bezieht sich auf die volle Breite des Blocks). Auf ganze Pixel je Schar gerundet, damit jede Naht scharf auf dem Pixelraster sitzt. */ --scharen: 4; --rand: 6px; /* Abstand der äußeren Naht vom Bildschirmrand */ --inset: clamp(0.625rem, 0.3609rem + 1.127vw, 1.375rem); /* 10 → 22 px: Inhalt neben der Naht */ --rw: min(100% - 2 * var(--rand), var(--wrap)); --spur-breite: 43rem; /* Lesespur: so weit reicht Fließtext, rechts davon laufen die Nähte frei */ --dur-montage: .85s; /* der EINE Moment: Scharen fahren ein */ --stagger: 70ms; --schatten-bild: 0 1px 0 color-mix(in oklch, var(--text) 10%, transparent), 0 22px 36px -26px color-mix(in oklch, var(--text) 45%, transparent); } @supports (width: round(down, 100%, 1px)) { :root { --rw: round(down, min(100% - 2 * var(--rand), var(--wrap)), calc(var(--scharen) * 1px)); } } @media (min-width: 48em) { :root { --scharen: 8; --rand: 8px; } } @media (min-width: 64em) { :root { --scharen: 12; } } /* Ebenen-Reihenfolge (Abnahme-Runde 30.09.2026): „b-deckflaeche" wird hier, VOR basis.css (Ladereihenfolge fonts → tokens → basis → theme), angemeldet und liegt damit unter @layer basis. theme.css legt dort die Deckfläche breiter Bausteine ab (Flächenton gegen die Nähte, theme.css §2): Jede eigene Fläche aus basis (gelber Foto-Platzhalter, Kasten, Warnung) und jede Regel aus theme.css gewinnt gegen sie. Am Dateiende, damit kontrast.py die :root-Sätze unverändert liest. */ @layer b-deckflaeche;