/* ============================================================================= WOS Pro · LP-Components · Tokens-Schicht 1 — _base.css ============================================================================= Gemeinsame Variablen-STRUKTUR fuer alle LP-Komponenten unter brand/lp-components/. Diese Datei definiert NUR die Namen plus konservative, unbrandige Default-Werte. Die Farben/Schriften einer konkreten Marke kommen aus Schicht 2 (Brand-Datei) und ueberschreiben die Defaults hier. Zwei-Schichten-Modell (A4): Schicht 1 _base.css -> Struktur + neutrale Defaults (diese Datei) Schicht 2 .css -> Marken-Wertbelegung, ueberschreibt Schicht 1 Lade-Reihenfolge im (zwingend: _base.css ZUERST, Brand-Datei danach): Disziplin: Komponenten nutzen AUSSCHLIESSLICH diese Variablen, keine hardgekodeten Werte. Ein hardgekodeter Hex-Code ist ein Code-Smell. Vollstaendige Regel: rules/lp-components-token-disziplin.md Stand: 2026-06-18 · Erste Belegung extrahiert aus einer realen Replay-LP (20.05.2026). Konservativ: nur Rollen, die in einer realen LP tatsaechlich vorkommen. Neue Rollen werden erst aufgenommen, wenn eine Komponente sie nachweislich braucht. ============================================================================ */ :root { /* --- Farben -------------------------------------------------------------- Kern (A4-Spec): die acht Pflicht-Rollen jeder Marke. */ --color-primary: #4a4a4a; /* Marken-Akzent: CTA, Eyebrow, Links, Zahlen */ --color-secondary: #6b6b6b; /* Zweitfarbe: positive Deltas, Erfolg-Akzent */ --color-bg: #ffffff; /* Seiten-Hintergrund, helle Sektionen */ --color-bg-warm: #f7f7f5; /* warme Sektion, Footer */ --color-bg-wash: #f2f2f4; /* getoenter Wash: Track-/Sektion-Hintergrund */ --color-ink: #1a1a1a; /* Haupttext, Headlines */ --color-ink-soft: #5a5a5a; /* Sekundaertext, Labels, Captions */ --color-line: rgba(0, 0, 0, 0.12); /* Linien, Karten-Rahmen, Divider */ /* Aus der ersten realen Extraktion ergaenzt — Rollen, die Komponenten real brauchen, damit Schicht 2 nichts hardcoden muss (konservativ, in der LP belegt): */ --color-primary-strong: #2e2e2e; /* dunklere Primary: Hover-Zustand, Verlaufs-Ende */ --color-primary-soft: #dadada; /* helle Primary-Toenung: Karten-/Pill-Rahmen */ --color-surface: #ffffff; /* Karten-/Box-Flaeche auf dem Seiten-Hintergrund */ /* Aus dem Validation-Run ergänzt (19.06.2026, single-page Nina-Replay-LP): lesbarer Text auf der Primary-Fläche (CTA-Text, Overlay-Text). Markenabhängig — heller Primary verlangt dunklen Text und umgekehrt; jede Brand-Datei belegt ihn neu. */ --color-on-primary: #ffffff; /* Text auf --color-primary (CTA/Overlay) */ /* --- Abstaende (modulare Skala) ------------------------------------------ */ --space-xs: 8px; --space-s: 16px; --space-m: 24px; --space-l: 40px; --space-xl: 64px; --space-xxl: 96px; /* --- Typografie ---------------------------------------------------------- */ --font-headline: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif; --font-body: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif; --font-accent: Georgia, "Times New Roman", serif; /* Akzent-/Display-Schrift; Charakter markenabhaengig: Handschrift, Serife oder Display */ --font-scale-h1: clamp(2.2rem, 6vw, 3.6rem); --font-scale-h2: clamp(1.6rem, 4vw, 2.2rem); --font-scale-h3: 1.15rem; --font-scale-body: 1.0625rem; /* 17px Basis-Schriftgroesse */ --font-scale-small: 0.85rem; /* --- Radius -------------------------------------------------------------- */ --radius-card: 14px; --radius-pill: 100px; /* --- Schatten ------------------------------------------------------------ */ --shadow-soft: 0 18px 30px -18px rgba(0, 0, 0, 0.18); }