/* ============================================================================= WOS Pro · LP-Components · Tokens-Schicht 2 · wachstum-online.css ============================================================================= Marken-Wertbelegung fuer Wachstum Online (Daniels Kernmarke, wachstum-online.com). Befuellt im Site-Build 3.2a (Brand-Capture, 2026-06-29). Lade-Reihenfolge: _base.css ZUERST, dann diese Datei. DESIGN-DIREKTION (Entscheidung Daniel 29.06.2026): PREMIUM-LIGHT mit DUNKELBLAU- DARK-SEKTIONEN. Heller Grundton (Brand-Guide-Verhaeltnis 60/30/10), Hero/Footer/ Akzent-Sektionen in Dunkelblau #001B42. Premium-Tiefe wie beim WG-Build (Oberlicht- Kante + Low-Spread-Schatten + Akzent-Aura), aber farb-eigenstaendig: Wachstum-Online- Farben #001B42 / #00DC58, NICHT die WG-Akzente Orange/Cyan. FARB-ROLLEN-ENTSCHEIDUNG (wichtig, im 3.2e-Bau gegen den gerenderten Wert pruefen): - --color-primary = Dunkelblau #001B42 = die dominante Marken-/Struktur-Farbe (30%). Komponenten nutzen sie fuer Headline-Akzent, Struktur, primaere Buttons. Auf hellem Grund traegt sie (Kontrast sicher). - --color-secondary = Leuchtgruen #00DC58 = der sparsame Akzent (10%): Highlights, Zahlen, Erfolgs-Deltas, Akzentlinien, „go"-Element. - KONTRAST-REGEL: Leuchtgruen #00DC58 hat auf WEISS zu wenig Kontrast fuer Text/Links. Darum NIE Leuchtgruen als Text/Link auf hellem Grund. Leuchtgruen lebt als CTA-Fuellung (mit dunklem Text), als Flaechen-/Linien-Akzent und vor allem auf den DUNKELBLAU- Sektionen (dort hoher Kontrast, siehe .section--dark unten). Links im Fliesstext: Info-Blau (Brand Guide 2.3), nicht Leuchtgruen. - Brand Guide nennt fuer Buttons sowohl Dunkelblau als auch Leuchtgruen. Die finale CTA-Farbe (Dunkelblau-Button mit weissem Text vs. Leuchtgruen-Button mit dunklem Text) wird beim cta-band-Render in 3.2e gegen AA-Kontrast entschieden. Markenfarben: Brand Guide 07 (kanonisch). Logo-Akzent der Live-Site weicht ab (Teal/Tuerkis) -> beim Build gerendert messen und bewusst aufloesen (Audit-Baseline). ============================================================================ */ :root { /* --- Farben (PREMIUM-LIGHT Grundton) ------------------------------------- */ --color-primary: #001B42; /* Dunkelblau: dominante Marken-/Struktur-Farbe, Headline-Akzent (Brand Guide) */ --color-secondary: #00DC58; /* Marken-Gruen: sparsamer Akzent (Highlights, Zahlen, Linien). Quelle: Logo + Farben.pdf. ACHTUNG: Brand-Guide-Doc 07 nennt abweichend #00E664; das Logo (#00DC58) gilt. */ --color-bg: #ffffff; /* Weiss: Seiten-Hintergrund (60%) */ --color-bg-warm: #f5f7fa; /* Hellgrau: warme Sektion/Wash (Brand Guide Neutral) */ --color-bg-wash: #eef1f6; /* leicht getoenter Wash: Track-/Sektion-Hintergrund */ --color-ink: #111827; /* Fast-Schwarz: Headlines/starker Text (Brand Guide Heading) */ --color-ink-soft: #374151; /* Dunkelgrau: Body/Sekundaertext (Brand Guide Body-Text) */ --color-line: rgba(0, 27, 66, 0.12); /* Dunkelblau-getoente Linie/Rahmen/Divider */ --color-primary-strong: #00122c; /* dunkleres Dunkelblau: Hover/Verlaufs-Ende */ --color-primary-soft: #cdd5e0; /* helle Dunkelblau-Toenung: Karten-/Pill-Rahmen */ --color-surface: #ffffff; /* Karten-/Box-Flaeche auf hellem Grund */ --color-on-primary: #ffffff; /* weisser Text auf Dunkelblau-Primary (CTA/Overlay), guter Kontrast */ /* CTA-Akzent (Daniel-Entscheidung 29.06.2026): Bernstein/Gold. Differenzierend, nicht blau/gruen. Nur fuer primaere CTAs + 1 bis 2 Schluessel-Highlights (60/30/10). Gilt auch auf Dark-Sektionen (erbt). */ --color-accent: #E6A019; /* Bernstein/Gold: CTA-Akzent */ --color-accent-strong: #C8880F; /* dunkleres Gold: Hover */ --color-on-accent: #001B42; /* Navy-Text auf Gold-CTA (Kontrast 7.6, AA) */ /* --- Abstaende ----------------------------------------------------------- */ --space-xs: 8px; --space-s: 16px; --space-m: 24px; --space-l: 40px; --space-xl: 64px; --space-xxl: 96px; /* --- Typografie (Brand Guide 3.1: Space Grotesk Headlines + Inter Body) --- */ --font-headline: 'Space Grotesk', 'Inter', -apple-system, system-ui, sans-serif; --font-body: 'Inter', -apple-system, system-ui, sans-serif; --font-accent: 'Space Grotesk', 'Inter', -apple-system, system-ui, sans-serif; /* Display/Akzent = Space Grotesk */ --font-scale-display: clamp(2.6rem, 7vw, 4.2rem); /* grosse Hero-/Display-Headline (Apple-Tier, im Bau justieren) */ --font-scale-h1: clamp(2.0rem, 6vw, 3.0rem); /* Brand Guide H1 ~48px Desktop / ~32px Mobil */ --font-scale-h2: clamp(1.6rem, 4vw, 2.25rem); /* Brand Guide H2 ~36px / ~26px */ --font-scale-h3: 1.4rem; /* Brand Guide H3 ~28px */ --font-scale-body: 1.0625rem; /* 17px Basis (Brand Guide Body 16 bis 18px) */ --font-scale-small: 0.875rem; /* 14px small */ /* --- Radius -------------------------------------------------------------- */ --radius-card: 16px; --radius-pill: 100px; /* --- Schatten + Premium-Tiefe (Light-Theme: Dunkelblau-getoent, dezent) --- Aus dem WG-/Claudia-Premium-Rezept abgeleitet, fuer hellen Grund angepasst (WG nutzt rgba(0,0,0,.7) auf Schwarz; hier Dunkelblau-Tint, geringerer Alpha). */ --shadow-soft: 0 18px 30px -18px rgba(0, 27, 66, 0.14); --shadow-card: 0 24px 60px -28px rgba(0, 27, 66, 0.22); --shadow-card-lift: 0 34px 80px -24px rgba(0, 27, 66, 0.30); --edge-top: inset 0 1px 0 rgba(255, 255, 255, 0.7); /* Oberlicht-Kante auf hellen Karten */ } /* ----------------------------------------------------------------------------- DARK-SEKTIONEN (Hero / Footer / Feature): Dunkelblau-Buehne. Auf einen Container `.section--dark` (oder [data-section="dark"]) setzen; die Rollen-Variablen werden fuer den Subtree neu gebunden, alle token-puren Komponenten darin adaptieren automatisch. HIER fuehrt Leuchtgruen als Akzent (hoher Kontrast auf Dunkelblau), genau wo es traegt. ---------------------------------------------------------------------------- */ .section--dark, [data-section="dark"] { --color-bg: #001B42; /* Dunkelblau-Buehne */ --color-bg-warm: #002D6B; /* Brand Guide Dunkel-Gradient-Ende / Surface auf Dunkel */ --color-bg-wash: #00122c; /* tiefer Wash */ --color-ink: #ffffff; /* weisser Text/Headlines */ --color-ink-soft: #b9c4d6; /* gedaempftes Hell-Blau-Grau, Sekundaertext */ --color-line: rgba(255, 255, 255, 0.14); --color-surface: #0a2350; /* leicht gehobene Karte auf Dunkelblau */ --color-primary: #00DC58; /* auf Dunkel fuehrt Leuchtgruen als Akzent (CTA/Eyebrow/Zahlen) */ --color-primary-strong: #00c957; /* dunkleres Leuchtgruen, Hover */ --color-primary-soft: rgba(0, 220, 88, 0.28); /* Gruen-Schimmer: Rahmen/Glow */ --color-on-primary: #001B42; /* dunkler Text auf Leuchtgruen-CTA (Kontrast) */ --shadow-soft: 0 18px 40px -20px rgba(0, 0, 0, 0.5); --shadow-card: 0 24px 60px -28px rgba(0, 0, 0, 0.55); --shadow-card-lift: 0 34px 80px -24px rgba(0, 0, 0, 0.7); --edge-top: inset 0 1px 0 rgba(255, 255, 255, 0.08); /* dezente Oberlicht-Kante auf Dunkel */ } /* ----------------------------------------------------------------------------- Im 3.2e-Bau noch zu klaeren / gerendert zu pruefen (bewusst offen): - CTA-Akzent = Bernstein/Gold #E6A019 (Navy-Text, AA 7.6) gilt (Daniel 29.06.); im cta-band ueber --color-accent / --color-on-accent verdrahten. - Leuchtgruen #00DC58 auf #001B42: Kontrast als Text/Akzent gegen AA verifizieren (getComputedStyle, nicht aus dem Quelltext geraten; Memory project_wachstum-group-design-nordstern). - Self-hosted woff2 fuer Space Grotesk + Inter in assets/fonts/ + fonts.css ablegen (kein Google-CDN, DSGVO). Fallback Inter Bold fuer Headlines wie im Brand Guide. - Logo-Akzent-Drift Teal vs. Leuchtgruen aufloesen (Audit-Baseline 3.2a). ---------------------------------------------------------------------------- */