/* Gundlach Designsystem - Tokens v1.1 (website build) * * Quelle: design-system/tokens.css + KomponentenSystem.html (Source of Truth) * Drift-Anpassungen 2026-06-04 (foundation-builder): * - --color-drama: #1A1A1A ergänzt (Drama-Card-BG, KomponentenSystem.html: --anthrazit) * - --color-pill-dark: #2A2A2A explizit benannt (Tag/Pill auf Dunkel, getrennt von Drama) * - --color-anthracite: #2A2A2A beibehalten als ANWENDUNGS-ALIAS für Pill-Dark * - B3R-Rolle korrigiert: Two-Tone-Dunkel (Verbinder auf dunklen Sektionen), * nicht „Link-Hover-Reserve" * - --topbar-h: 80px ergänzt (aus KomponentenSystem.html) * - --border-darkhair: aus tokens.css übernommen * * VORERST: Nur B4 als Markenfarbe aktiv. B3R/Two-Tone-Dunkel nur auf * dunklen Sektionen einsetzen, wo es wirklich gebraucht wird. * * Disziplin-Kern: monochrome UI-Chrome, Off-White W1 als Page-Hintergrund, * Komplexität aus Inhalten (Foto/AI), nicht aus der Palette. * B4 ist sehr eng eingegrenzt - nur Wortmarke und 5–6px Akzent-Punkte. */ :root { /* ──────────────────────────────────────────────── * FARBEN - v1.4 monochromer Re-Cut (angeglichen 2026-06-04) * ──────────────────────────────────────────────── */ /* Markenfarbe (eng eingegrenzt: Wortmarke + Akzent-Punkt AUSSCHLIESSLICH) */ --color-b4: #2F728C; /* Pantone 7699 C - Markenfarbe */ --color-b3r: #5B95A8; /* Two-Tone-Dunkel: Verbinder auf dunklen Sektionen. Pendant zu G3 auf hell. NICHT für Links/Buttons/BG. */ /* KI-Zonen-Farbe (Terrakotta) - Site-Architektur-Entscheidung 17.06.2026: Zwei-Zonen-Modell (Petrol = Beratung, Terrakotta = KI) */ --color-terra: #8C492F; /* KI-Zone auf hell */ --color-terra-ondark: #D0855B; /* KI-Zone-Geschwister auf dunkel */ /* Neutrals - Trägermedium + Struktur */ --color-w1: #FBFAF6; /* Off-White warm - Page-Background (NICHT reinweiß) */ --color-g1: #EDEDED; /* Helles Grau - alternierender Sektion-Background */ --color-g2: #D0D0D0; /* Border / Divider / Body-Text auf Dunkel */ --color-g3: #7C7C7B; /* Sekundär-Text, Captions, Two-Tone-Verbinder auf hell */ /* Schrift-Anker */ --color-black: #000000; /* Primär-Text auf hellen Sektionen */ --color-white: #FFFFFF; /* Text auf Dunkel - NICHT als Sektion-BG */ /* Drama-Layer (getrennte Tokens - DRIFT-KORREKTUR 2026-06-04) */ --color-drama: #1A1A1A; /* Drama-Card-BG (KomponentenSystem: --anthrazit) */ --color-pill-dark: #2A2A2A; /* Tag/Pill-BG auf dunklen Cards (KomponentenSystem: --pill-dark) */ --color-anthracite:#2A2A2A; /* Alias = pill-dark. tokens.css-Kompatibilität. */ /* ──────────────────────────────────────────────── * TYPOGRAFIE - v1.0, Avio Sans v0.8 * ──────────────────────────────────────────────── */ --font-sans: 'Avio Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; /* Mono - NUR für Mikro-Labels (Eyebrow, Section-Marker, Hints, Spine). System-Stack; ggf. später eine Webfont-Mono pinnen für Cross-Device. */ --font-mono: ui-monospace, 'SF Mono', 'SFMono-Regular', Menlo, Consolas, monospace; /* Aktive Weights (Disziplin - Thin/Light/SemiBold/Black bewusst NICHT genutzt) */ --weight-display: 800; /* ExtraBold - Display, Wortmarke, Numerical */ --weight-bold: 700; /* Bold - H1, H2, H3, Card-Titel */ --weight-medium: 500; /* Medium - Buttons */ --weight-regular: 400; /* Regular - Body, Caption, Label, Tags */ /* Type-Scale (Desktop-Defaults) */ --type-display-hero: 64px; /* clamp 56–72px - Hero-Riesentext, Wortmarke */ --type-display: 48px; /* clamp 44–52px - Sektion-Hero mit Two-Tone */ --type-h1: 36px; /* clamp 32–40px - Sektion-Hauptüberschriften */ --type-h2: 24px; /* clamp 22–28px - Sub-Headlines */ --type-h3: 17px; /* 16–18px - Card-Titel, kleine Headers */ --type-body-lg: 17px; /* Long-Form-Text */ --type-body: 15px; /* Standard-Lesetext */ --type-caption: 12px; /* Meta, gedämpft in G3 */ --type-label: 11px; /* Section-Marker (Versalien, Tracking 0.4px) */ --type-button: 14px; /* Greifbarer als Body, Medium 500 */ --type-tag: 11px; /* Tag/Pill, Tracking 0.2px */ --type-quote: 20px; /* Pull-Quote, Italic optional */ --type-numerical: 44px; /* Zahlen-Display, ExtraBold (KomponentenSystem-Wert) */ /* Letterspacing - negativ nur bei Display-Größen */ --tracking-display-hero: -1.5px; --tracking-display: -1.2px; --tracking-h1: -0.8px; --tracking-h2: -0.4px; --tracking-h3: 0px; --tracking-label: 0.4px; /* uppercase */ --tracking-tag: 0.2px; --tracking-eyebrow: 1.5px; /* Letter-Spacing für alle Uppercase-Eyebrows */ /* Line-Heights */ --lh-display-hero: 1.0; --lh-display: 1.05; --lh-h1: 1.1; --lh-h2: 1.2; --lh-h3: 1.3; --lh-body: 1.65; --lh-body-lg: 1.6; --lh-caption: 1.5; --lh-label: 1.4; --lh-quote: 1.5; /* ──────────────────────────────────────────────── * SPACING - Etienne-abgeleitet * ──────────────────────────────────────────────── */ --space-2xs: 4px; --space-xs: 8px; --space-sm: 16px; --space-md: 24px; --space-lg: 32px; --space-xl: 48px; --space-2xl: 80px; --space-3xl:120px; --space-4xl:160px; --section-top: 47px; /* einheitlicher vertikaler Sektions-Einstieg */ /* ──────────────────────────────────────────────── * CONTAINER * ──────────────────────────────────────────────── */ --container-max: 1440px; --container-pad: 32px; --container-pad-mobile: 16px; /* ──────────────────────────────────────────────── * TOPBAR * ──────────────────────────────────────────────── */ --topbar-h: 80px; /* ──────────────────────────────────────────────── * BORDERS - Etienne-Signatur ist die dotted Line * ──────────────────────────────────────────────── */ --border-hair: 1px solid var(--color-g2); /* Standard-Cards, Trenner */ --border-dotted: 1px dotted var(--color-g2); /* Etienne-Signatur */ --border-darkhair: 1px solid #3A3A3A; /* Trenner auf dunklen Sektionen */ --color-darkhair: #3A3A3A; /* Farb-Token für border-color, outline, etc. --border-darkhair ist ein Shorthand und nicht in einzelnen border-color-Properties nutzbar. */ /* ──────────────────────────────────────────────── * RADII * ──────────────────────────────────────────────── */ --radius-pill: 999px; --radius-card-sm: 12px; --radius-card: 20px; --radius-card-lg: 24px; /* ──────────────────────────────────────────────── * AKZENT-PUNKT - wiederkehrendes Atom, immer B4 * ──────────────────────────────────────────────── */ --dot-size-sm: 5px; --dot-size: 6px; --dot-size-lg: 8px; /* Logo-Lockup - Wortmarke „gundlach•": Dot als fixer em-Anteil der Schrift, damit die Relation bei jeder Größe gleich bleibt (Intro-Hero + Topbar). Von Oliver justiert. */ --logo-dot-size: 0.265em; /* Dot = Anteil der Wortmarken-Schrift */ --logo-dot-gap: 0.055em; /* Abstand Wort ↔ Dot */ --logo-dot-y: 0%; /* Dot-Höhe (0 = Grundlinie) */ /* ──────────────────────────────────────────────── * BREAKPOINTS * ──────────────────────────────────────────────── */ --bp-sm: 480px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1440px; } /* ──────────────────────────────────────────────────────── * ANWENDUNGS-MAP (Kommentar - keine Klassen, nur Doku) * ──────────────────────────────────────────────────────── * * Page-Background (durchgehend) → --color-w1 (#FBFAF6) * Alternierende Sektion → --color-g1 (#EDEDED) * Drama-Card-Background → --color-drama (#1A1A1A) * Tag/Pill-BG auf dunklen Cards → --color-pill-dark (#2A2A2A) * Wortmarke „gundlach" + Akzent-Punkte → --color-b4 (#2F728C) * Headline (H1–H4) auf hell → --color-black * Headline auf dunkel → --color-white * Two-Tone-Verbinder auf hell → --color-g3 * Two-Tone-Verbinder auf dunkel → --color-g3 (oder --color-b3r als Spotlight) * Body auf hell → --color-black * Body auf dunkel → --color-g2 * Sekundär-Text / Meta / Section-Label → --color-g3 * Card Standard → --color-w1 BG + --border-hair * Card leise → --color-g1 BG, ohne Border * Card Drama → --color-drama BG (später AI-Verlauf) * Pill primär (auf hell) → --color-black BG, --color-w1 Text * Pill primär (auf dunkel) → --color-w1 BG, --color-black Text * Pill sekundär → Transparent BG, --color-black Border + Text * Tag auf hell → --color-g1 BG, --color-black Text * Tag auf dunkel → --color-pill-dark BG, --color-w1 Text * * HARTE REGELN: * - B4 NUR für Wortmarke + Akzent-Punkt. Keine farbigen Headlines/Buttons/Links. * - W1 als Page-BG. #FFFFFF NIE als Sektion-Background. * - Alternierende Sektionen via G1, NICHT via Farbe. * - Aktive Weights: 400/500/700/800. Sentence Case. ALL CAPS nur 11px-Labels. * - Dunkle Cards: --color-drama (#1A1A1A). Pill/Tag-Dark: --color-pill-dark (#2A2A2A). * * ANTI-MUSTER (kategorisch verboten): * Reinweiß #FFFFFF als Sektion-BG, B4 als Button/Link/Headline-Farbe, * helle Blautöne als großflächige BG, Schmelzpunkt-Türkis #49BED8, * warme Akzente (Sand/Beige/Cognac), Signalfarben (Grün/Gelb/Orange/Rot), * bunte Buttons, farbige Hover-States (außer sehr seltenem B3R), * 7+ Font-Weights, Title Case, Italic im Lesetext, Unterstreichungen außer Links. */