/* tokens.css – Design-Tokens STRUKTUR ist fix, WERTE werden je Demo aus der Kunden-CI (Phase 1) gesetzt. Kein Einheitsdesign: Farben, Schriften, Radien immer projektspezifisch. Die CI wird abgeleitet, nie erfunden (CLAUDE.md §6). WIE die Werte entstehen, steht im Skill `design-system`: Markenfarbe aus dem Logo in oklch umrechnen, Neutrale aus ihrem Farbton ableiten, Kontraste nachmessen, Typo-Spannweite prüfen. */ :root { /* --------------------------------------------------------------------- FARBE Rollen, keine Farbnamen. --color-blau bricht beim ersten Kunden mit grünem Logo. Ableitung (design-system 1.3): Alle Neutralen übernehmen den Farbton H der Marke bei sehr kleiner Buntheit C. Reines Grau neben einer farbigen Marke wirkt tot und ist der Grundton jedes Baukastens. Beispiel für eine Marke oklch(0.38 0.07 165): --color-bg: oklch(0.985 0.004 165); --color-surface: oklch(0.955 0.008 165); --color-border: oklch(0.880 0.012 165); --color-text-muted: oklch(0.500 0.015 165); --color-text: oklch(0.250 0.020 165); --------------------------------------------------------------------- */ /* ABLEITUNG FÜR DIESE DEMO (Ingenieurbüro René Gansmüller, Phase 2c) CI-Fundstück ist das Logo der Altseite (resources/_wsb_logo.jpg, 215×40 px, 2008), nicht das Farbschema der Seite: #036/#369/#630 sind Vorgaben des 1&1-Baukastens (colorscheme.css, „(c) Schlund + Partner“). Pixelmittel aus dem JPEG, daher Näherungswerte: Querbalken der Bildmarke #507fa6 → oklch(0.579 0.079 245) Marke Schriftzug INGENIEURBÜRO #576c73 → oklch(0.517 0.027 220) Sekundärtext Schriftzug RENÉ GANSMÜLLER #2c2c2d → oklch(0.294 0.002 286) Textton Rechteck der Bildmarke #d6ced4 → oklch(0.860 0.012 334) Akzentfläche Neutrale: Farbton H 245 der Marke, C steigt mit sinkendem L. Kontraste gemessen (WCAG, sRGB aus oklch gerechnet, 27.09.2026): text / bg 13,7 · text / surface 12,6 · text-muted / bg 5,3 · text-muted / surface 4,9 · primary / bg 4,1 (nur Flächen, Linien, große Schrift) · primary-strong / bg 5,7 · bg auf primary-strong 5,7 · text-on-dark / bg-dark 15,6 · primary-on-dark / bg-dark 8,6 · text-muted-on-dark / bg-dark 8,6 · text / accent 9,3. Nachgemessen nach dem Schriftwechsel (27.09.2026, Farben unverändert): Knopf: bg auf primary-strong 5,7 · bg auf text (Hover) 13,7 · bg-dark auf primary-on-dark 8,6 · bg-dark auf text-on-dark (Hover) 15,6 · Kontur-Knopf text auf hover 11,5 · Kennzahl primary auf bg-dark 4,0 (nur Schrift ab 24 px, Grenze 3:1) · Mono-Beschriftung text-muted auf bg 5,3. */ --color-bg: oklch(0.985 0.004 245); --color-surface: oklch(0.955 0.008 245); --color-border: oklch(0.880 0.012 245); --color-text: oklch(0.285 0.012 245); /* = Schriftzug „INGENIEURBÜRO“ im Logo. Liegt ohnehin im Neutralen-Band (L 0.45–0.55) und trägt den Farbton der Marke. */ --color-text-muted: oklch(0.517 0.027 220); /* = Querbalken der Bildmarke. Auf Weiß nur 4,1:1: für Flächen, Linien, Markierungen und Schrift ab 24 px. Für Text und Buttons darunter gilt --color-primary-strong. */ --color-primary: oklch(0.579 0.079 245); /* Aus --color-primary abgeleitet (nur L gesenkt, C leicht angehoben, H gleich): Links, Buttonfläche mit hellem Text, Fokusring. 5,7:1 auf bg. */ --color-primary-strong: oklch(0.500 0.085 245); /* = Rechteck der Bildmarke. Nur als Fläche oder Markierung, sparsam. Darauf nur --color-text (9,3:1), nie --color-text-muted (3,6:1). */ --color-accent: oklch(0.860 0.012 334); /* Linie des Demo-Hinweises: Malve der Bildmarke, dunkler, damit die 3-px-Linie auf hellem Grund als Kennung trägt (Nicht-Text, ≥ 3:1). */ --color-accent-linie: oklch(0.560 0.050 334); /* Karten reinweiß auf fast weißem Grund (Referenz). */ --color-karte: oklch(1 0 0); /* Streifenband aus dem Titelbild der Altseite (720×220, CSS #key_visual): 2-px-Linien im Wechsel #8ab4dc / #689acf, dazu lose gesetzte helle Quadrate. Reines CI-Motiv, keine Bildaussage. --color-text darauf mind. 4,85:1 (auf dem dunkleren Streifen gemessen). */ --color-band-hell: oklch(0.754 0.073 248); --color-band-dunkel: oklch(0.672 0.096 251); /* Dunkle Gegenseite – für randlose Zäsur-Sektionen (.full). */ --color-bg-dark: oklch(0.225 0.030 245); --color-text-on-dark: oklch(0.970 0.005 245); --color-text-muted-on-dark: oklch(0.780 0.022 240); /* Pflicht, sobald die Primärfarbe auf Dunkel eingesetzt wird: Die Originalfarbe reißt dort fast immer den Kontrast unter 4,5:1 (hier: 4,0:1). L angehoben, C leicht gesenkt, H behalten → 8,6:1. */ --color-primary-on-dark: oklch(0.780 0.070 245); /* Zustände. „Statisch" ist in der Kritik meistens wörtlich gemeint – ohne diese Werte gibt es kein Feedback (section-craft 5). */ --color-hover: oklch(0.925 0.012 245); /* primary-strong darauf 4,8:1 */ --color-focus: var(--color-primary-strong); /* 5,7:1 gegen bg */ --color-focus-on-dark: var(--color-primary-on-dark); /* Fehlermeldungen im Formular. Funktionsfarbe, keine Markenfarbe: Die CI hat kein Rot, eine Fehlermeldung braucht aber eine Farbe, die nicht mit Links und Knöpfen (Blau) verwechselt wird. Steht nie allein, immer mit Text am Feld. Gerechnet (WCAG, sRGB aus oklch): 6,8:1 auf --color-bg, 6,2:1 auf --color-surface. */ --color-fehler: oklch(0.480 0.160 28); /* Haken „Passt gut“ (Für wen): gleiches L wie --color-fehler, Grün statt Rot. Nur als Zeichen neben Text eingesetzt, nie als alleinige Aussage. */ --color-erfolg: oklch(0.500 0.120 150); /* --------------------------------------------------------------------- TYPOGRAFIE Stilumbau nach Referenz (docs/REFERENZ-ANALYSE.md, 28.09.2026): eine Grotesk für alles, Hierarchie über Größe, Gewicht 800 und Zeilenhöhe 1,0, nicht über Schriftwechsel. Schibsted Grotesk statt Space Grotesk (Referenz), weil sachlicher und nicht der Baukasten-Standard. Labels, Kicker und Knöpfe: Versal, 600, leicht gesperrt, gleiche Familie. --------------------------------------------------------------------- */ --font-display: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif; --font-body: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif; --weight-body: 400; --weight-label: 600; --weight-heading: 700; --weight-display: 800; /* Stufen laut Referenz (Desktop 60 / 48 / 30 / 24 px, Text 18 px). Gerechnet: 390 px → 14 / 16,2 / 19,2 / 24 / 30,4 / 40 px 1440 px → 15,2 / 18 / 24 / 30 / 48 / 60 px Typo-Spannweite H1 ÷ Text: 2,5 (390) bis 3,3 (1440). */ --step--1: clamp(0.875rem, 0.85rem + 0.12vw, 0.95rem); --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); --step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem); --step-1-5: clamp(1.5rem, 1.25rem + 0.6vw, 1.875rem); --step-2: clamp(1.9rem, 1.3rem + 1.9vw, 3rem); --step-3: clamp(2.5rem, 1.9rem + 2.3vw, 3.75rem); --step-kennzahl: clamp(2rem, 1.6rem + 1vw, 2.5rem); /* Zeilenhöhen. Überschriften kompakt (Referenz: 1,0). */ --lh-display: 1.0; --lh-heading: 1.08; --lh-body: 1.6; --tracking-display: -0.015em; --tracking-kicker: 0.1em; --tracking-label: 0.03em; /* --------------------------------------------------------------------- ABSTÄNDE Skala fix, Nutzung je Layout. Zwischen zwei Sektionen polstert nur EINE Seite, nie beide – sonst addieren sich die Abstände zu einem Loch (section-craft §4). --------------------------------------------------------------------- */ --space-xs: 0.5rem; --space-s: 1rem; --space-m: 2rem; --space-l: 4rem; --space-xl: 8rem; /* --------------------------------------------------------------------- LAYOUT --------------------------------------------------------------------- */ /* Die Bildmarke ist rechtwinklig: Knöpfe und Karten fast eckig. Nur die abgesetzten Flächen (Panels) runden stark, wie in der Referenz. */ --radius: 2px; --radius-karte: 6px; --radius-panel: 40px; /* Harte Schatten ohne Unschärfe, immer in Textfarbe, Stufen nach Gewicht (Referenz: 3 / 5 / 8 / 12 px). Größte Stufe nur Hero-Karte und Formular. */ --schatten-1: 3px 3px 0 0 var(--color-text); --schatten-2: 5px 5px 0 0 var(--color-text); --schatten-3: 8px 8px 0 0 var(--color-text); --schatten-4: 12px 12px 0 0 var(--color-text); /* Drei Breiten statt einer. Getrennt, weil sie zwei verschiedene Jobs haben: Lesbarkeit (Text) und Flächennutzung (alles andere). Ein einziges --maxw für beides erzeugt zwangsläufig die schmale Mittelspalte, bei der auf einem 1920er Bildschirm über 300px je Seite tot bleiben – der häufigste Kritikpunkt an bisherigen Demos. Genutzt vom .layout-Raster in styles.css. */ /* Mindestabstand zum Fensterrand. Wächst mit dem Fenster wie der Rand von Header und Hero-Blatt (3vw), damit alle Kanten fluchten. */ --gutter: clamp(var(--space-s), 3vw, var(--space-l)); /* Größte Breite der .breakout-Spur. Header, Hero und alle Sektionen laufen auf derselben Spur (Kantenflucht). 98.25rem = 1572 px, auf 1920 also 174 px Rand (Grenze 200 px). */ --breakout-max: 98.25rem; --maxw-content: 68ch; /* lesbare Textbreite, 60–75 Zeichen */ --breakout-extra: 30rem; /* je Seite zusätzlich für .breakout. Gemessen: 1572px auf 1920px Fenster, also 174px Rand – unter der 200px-Grenze aus der Checkliste. */ /* Header-Höhe. Wird von scroll-margin-top in base.css genutzt, damit Anker nicht unter dem Sticky-Header landen. Je Demo an den echten Header anpassen. */ --header-h: 80px; /* --------------------------------------------------------------------- BEWEGUNG Werkzeugwahl und Sparsamkeit: Skill `motion-toolkit`. --------------------------------------------------------------------- */ --dur-schnell: 120ms; /* Hover, Fokus – muss sofort wirken */ --dur-normal: 260ms; /* Zustandswechsel, Einblenden */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); } @media (max-width: 600px) { :root { --header-h: 64px; } }