/* ============================================================================= Wachstum Online: self-hosted Fonts (DSGVO, kein Google-CDN, keine externe Verbindung). Headline: Space Grotesk (Brand Guide 3.1). Body: Inter. Weights: Inter 400/500/600, Space Grotesk 500/700. Latin + Latin-Ext (deutsche Umlaute/ß liegen im Latin-Subset). font-display: swap. ============================================================================ */ /* ---------------- Inter (Body) ---------------- */ @font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url(//wachstum-online.com/wp-content/themes/wo-astra-child/assets/fonts/inter-400-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url(//wachstum-online.com/wp-content/themes/wo-astra-child/assets/fonts/inter-400-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url(//wachstum-online.com/wp-content/themes/wo-astra-child/assets/fonts/inter-500-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url(//wachstum-online.com/wp-content/themes/wo-astra-child/assets/fonts/inter-500-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url(//wachstum-online.com/wp-content/themes/wo-astra-child/assets/fonts/inter-600-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url(//wachstum-online.com/wp-content/themes/wo-astra-child/assets/fonts/inter-600-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* ---------------- Space Grotesk (Headline / Display) ---------------- */ @font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:500; font-display:swap; src:url(//wachstum-online.com/wp-content/themes/wo-astra-child/assets/fonts/space-grotesk-500-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:500; font-display:swap; src:url(//wachstum-online.com/wp-content/themes/wo-astra-child/assets/fonts/space-grotesk-500-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:700; font-display:swap; src:url(//wachstum-online.com/wp-content/themes/wo-astra-child/assets/fonts/space-grotesk-700-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:700; font-display:swap; src:url(//wachstum-online.com/wp-content/themes/wo-astra-child/assets/fonts/space-grotesk-700-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }/* ============================================================================= 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); }/* ============================================================================= 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). ---------------------------------------------------------------------------- *//* ============================================================================= sticky-mini-nav — dezente klebende Top-Navigation ============================================================================= Eine schlanke, am oberen Rand klebende Leiste: links ein Wortmarken-Slot, rechts N Text-Links. Bewusst CTA-frei (zurückhaltend). Unter dem Mobile- Breakpoint kollabieren die Inline-Links zu einem Burger-Button, der ein Vollbild-Overlay mit denselben Links öffnet. TOKEN-PUR: ausschließlich Variablen aus _tokens/_base.css oder color-mix() daraus — kein hardgekodeter Marken-Wert. Siehe rules/lp-components-token-disziplin.md. Die --smn-* sind komponenten-lokale Layout-Konstanten (Leisten-Höhe, Burger- Maße, Breakpoint, Blur-Stärke) — an keine Marke gekettet, laut Regel erlaubt. Lade-Reihenfolge: _tokens/_base.css → .css → diese Datei → sticky-mini-nav.js ============================================================================ */ .sticky-mini-nav { /* komponenten-lokale Konstanten (kein Marken-Bezug) */ --smn-height: 56px; /* Leisten-Höhe */ --smn-touch: 44px; /* Mindest-Touch-Target (Burger, Schließen) */ --smn-blur: 12px; /* Hintergrund-Blur bei Scroll-Überlagerung */ --smn-gap: var(--space-m); /* Abstand zwischen den Inline-Links */ --smn-max: none; /* optionaler Inhaltsbreiten-Cap fuer Ultra-Wide; Default: volle Breite. Projekt setzt z.B. 1200px. */ position: sticky; top: 0; z-index: 1000; max-width: var(--smn-max); margin-inline: auto; /* zentriert die Leiste, wenn --smn-max gesetzt ist */ display: flex; align-items: center; justify-content: space-between; gap: var(--space-m); min-height: var(--smn-height); padding: 0 var(--space-m); /* opaker Hintergrund; wo backdrop-filter greift, leicht durchscheinend + Blur */ background: var(--color-bg); border-bottom: 1px solid var(--color-line); font-family: var(--font-body); } @supports (backdrop-filter: blur(1px)) { .sticky-mini-nav { background: color-mix(in srgb, var(--color-bg) 82%, transparent); backdrop-filter: blur(var(--smn-blur)); -webkit-backdrop-filter: blur(var(--smn-blur)); } } /* --- Wortmarke (links) ---------------------------------------------------- */ .sticky-mini-nav__brand { font-family: var(--font-headline); font-size: var(--font-scale-h3); font-weight: 600; letter-spacing: 0.01em; line-height: 1; color: var(--color-ink); text-decoration: none; } /* --- Link-Liste (rechts, Desktop) ----------------------------------------- */ .sticky-mini-nav__links { display: flex; align-items: center; gap: var(--smn-gap); margin: 0; padding: 0; list-style: none; } .sticky-mini-nav__link { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--font-scale-small); font-weight: 500; letter-spacing: 0.02em; color: var(--color-ink-soft); text-decoration: none; transition: color 0.2s ease; } .sticky-mini-nav__link:hover, .sticky-mini-nav__link:focus-visible { color: var(--color-primary); } /* Externer-Link-Modifier: kleiner Pfeil-Indikator (rein typografisch, farblos) */ .sticky-mini-nav__link--external::after { content: "\2197"; /* ↗ Pfeil nach oben-rechts */ font-size: 0.85em; line-height: 1; } /* --- Burger-Button (nur Mobile sichtbar) ---------------------------------- */ .sticky-mini-nav__burger { display: none; /* Desktop: versteckt, Inline-Links übernehmen */ align-items: center; justify-content: center; width: var(--smn-touch); height: var(--smn-touch); margin-right: calc(-1 * var(--space-xs)); /* optische Kante ausgleichen */ padding: 0; background: transparent; border: 0; border-radius: var(--radius-card); color: var(--color-ink); cursor: pointer; } .sticky-mini-nav__burger:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* Burger-Icon aus drei Linien (currentColor erbt --color-ink) */ .sticky-mini-nav__burger-bars, .sticky-mini-nav__burger-bars::before, .sticky-mini-nav__burger-bars::after { --smn-bar-w: 22px; /* Linien-Breite */ --smn-bar-h: 2px; /* Linien-Stärke */ display: block; width: var(--smn-bar-w); height: var(--smn-bar-h); background: currentColor; border-radius: var(--radius-pill); transition: transform 0.25s ease, opacity 0.25s ease; } .sticky-mini-nav__burger-bars { position: relative; } .sticky-mini-nav__burger-bars::before, .sticky-mini-nav__burger-bars::after { content: ""; position: absolute; left: 0; } .sticky-mini-nav__burger-bars::before { top: -7px; } .sticky-mini-nav__burger-bars::after { top: 7px; } /* --- Mobile (<720px): Inline-Links aus, Burger an ------------------------- */ @media (max-width: 719px) { /* backdrop-filter erzeugt einen Containing-Block: das position:fixed-Overlay waere sonst an die (kurze) Nav-Leiste gebunden statt an den Viewport und wuerde sich nicht ueber die Seite legen. Auf Mobile daher ohne Blur, opaker Hintergrund reicht. */ .sticky-mini-nav { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--color-bg); } /* Burger MUSS ueber dem Overlay (z 1001) liegen, sonst ist das Schliessen-X verdeckt und nicht antippbar. position:relative aktiviert den z-index. */ .sticky-mini-nav__burger { display: inline-flex; position: relative; z-index: 1002; } /* Link-Liste wird zum Vollbild-Overlay, per JS sichtbar geschaltet */ .sticky-mini-nav__links { position: fixed; inset: 0; z-index: 1001; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-l); padding: var(--space-xl) var(--space-l); background: var(--color-bg); /* geschlossener Startzustand: nur wenn JS die Komponente kontrolliert */ opacity: 0; visibility: hidden; transform: translateY(calc(-1 * var(--space-s))); transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s; } /* offener Zustand (JS setzt [data-open] auf .sticky-mini-nav) */ .sticky-mini-nav[data-open="true"] .sticky-mini-nav__links { opacity: 1; visibility: visible; transform: none; } .sticky-mini-nav__link { font-size: var(--font-scale-h3); min-height: var(--smn-touch); } /* Burger -> X, wenn offen */ .sticky-mini-nav[data-open="true"] .sticky-mini-nav__burger-bars { background: transparent; /* mittlere Linie aus */ } .sticky-mini-nav[data-open="true"] .sticky-mini-nav__burger-bars::before { top: 0; transform: rotate(45deg); } .sticky-mini-nav[data-open="true"] .sticky-mini-nav__burger-bars::after { top: 0; transform: rotate(-45deg); } } /* --- No-JS-Sicherung ----------------------------------------------------- Solange JS die Komponente nicht übernimmt (Klasse .smn-ready auf der Leiste), bleibt das Overlay-Versteck inaktiv: die Links sind auch mobil als normale, sichtbare Liste lesbar (kein toter Burger, kein leerer Screen). */ @media (max-width: 719px) { .sticky-mini-nav:not(.smn-ready) .sticky-mini-nav__links { position: static; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-s); padding: 0; background: transparent; opacity: 1; visibility: visible; transform: none; } .sticky-mini-nav:not(.smn-ready) .sticky-mini-nav__link { font-size: var(--font-scale-small); } .sticky-mini-nav:not(.smn-ready) .sticky-mini-nav__burger { display: none; } } /* --- Reduced-Motion: keine Übergänge erzwingen --------------------------- */ @media (prefers-reduced-motion: reduce) { .sticky-mini-nav__links, .sticky-mini-nav__link, .sticky-mini-nav__burger-bars, .sticky-mini-nav__burger-bars::before, .sticky-mini-nav__burger-bars::after { transition: none; } }/* ============================================================================= scroll-reveal — generisches Einblenden beim Sichtbarwerden ============================================================================= Grund-Vokabular jeder Scrollytelling-Sektion (Design-Sprache Eigen-Sites): ein Element mit [data-reveal] startet versteckt (leicht verschoben + transparent) und blendet beim Sichtbarwerden ein (IntersectionObserver -> .is-revealed). TOKEN-PUR: enthaelt KEINE Farben (nur Opacity/Transform/Timing). Die --sr-* sind komponenten-lokale Motion-Konstanten (Distanz, Dauer, Easing, Delay) — an keine Marke gekettet, laut rules/lp-components-token-disziplin.md erlaubt. No-JS-/Fallback-sicher: ohne JS bleibt nichts unsichtbar. Der versteckte Startzustand gilt NUR, wenn das JS die Klasse .sr-ready auf setzt. Lade-Reihenfolge: _tokens/_base.css -> .css -> diese Datei -> scroll-reveal.js ============================================================================ */ [data-reveal] { --sr-distance: 24px; /* Start-Versatz */ --sr-duration: 0.8s; /* Einblend-Dauer */ --sr-easing: cubic-bezier(0.22, 1, 0.36, 1); /* weiches Aus-Schwingen */ --sr-delay: 0s; /* optionaler Stagger pro Element */ } /* Versteckter Startzustand NUR aktiv, wenn JS laeuft (setzt .sr-ready auf ). */ .sr-ready [data-reveal] { opacity: 0; transform: translateY(var(--sr-distance)); transition: opacity var(--sr-duration) var(--sr-easing), transform var(--sr-duration) var(--sr-easing); transition-delay: var(--sr-delay); will-change: opacity, transform; } /* Richtungs-Varianten (optional via Attribut-Wert) */ .sr-ready [data-reveal="up"] { transform: translateY(var(--sr-distance)); } .sr-ready [data-reveal="down"] { transform: translateY(calc(-1 * var(--sr-distance))); } .sr-ready [data-reveal="left"] { transform: translateX(var(--sr-distance)); } .sr-ready [data-reveal="right"] { transform: translateX(calc(-1 * var(--sr-distance))); } .sr-ready [data-reveal="fade"] { transform: none; } /* Eingeblendeter Endzustand */ .sr-ready [data-reveal].is-revealed { opacity: 1; transform: none; } /* Reduced-Motion: kein Versteck-/Bewegungs-Zustand, alles sofort sichtbar. */ @media (prefers-reduced-motion: reduce) { .sr-ready [data-reveal] { opacity: 1; transform: none; transition: none; } }/* ============================================================================= trust-stats — Reihe von Stat-Karten mit Count-up ============================================================================= N gleichwertige Kennzahl-Karten (Default 4): grosse Akzent-Zahl plus Kontext-Label darunter. Die Zahlen zählen beim Sichtbarwerden hoch (IntersectionObserver). Vertrauens-/Social-Proof-Block für Landing Pages. TOKEN-PUR: ausschliesslich Variablen aus _tokens/_base.css oder color-mix() daraus — kein hardgekodeter Marken-Wert. Siehe rules/lp-components-token-disziplin.md. Die --ts-* sind komponenten-lokale Layout-Konstanten (Zahlen-Grösse, Min-Höhe, Spalten-Mindestbreite) — an keine Marke gekettet, laut Regel erlaubt. Responsive: mobile-first. 1 Spalte <560px, 2 ab 560px, 4 ab 900px (das Grid reflowt allein über die Spaltenzahl, nichts wird in vw an eine gedeckelte Grösse gekettet). Touch-/Lesbarkeits-Mindesthöhe der Karte >= 44px. Lade-Reihenfolge: _tokens/_base.css → .css → diese Datei → trust-stats.js ============================================================================ */ .trust-stats { /* komponenten-lokale Konstanten (kein Marken-Bezug) */ --ts-num-size: clamp(2.2rem, 5vw, 3.4rem); /* Display-Zahl, fluid und gedeckelt */ --ts-card-min: 44px; /* Touch-/Lesbarkeits-Mindesthöhe */ --ts-cols: 1; /* Spaltenzahl, per Breakpoint erhöht */ list-style: none; margin: var(--space-l) 0 0; padding: 0; display: grid; grid-template-columns: repeat(var(--ts-cols), 1fr); gap: var(--space-m); } .trust-stats__card { min-height: var(--ts-card-min); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-xs); text-align: center; padding: var(--space-m) var(--space-s); background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-card); } .trust-stats__num { font-family: var(--font-accent); font-size: var(--ts-num-size); font-weight: 700; line-height: 1; letter-spacing: -0.01em; color: var(--color-primary); /* tabellarische Ziffern: Breite springt beim Hochzählen nicht */ font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } .trust-stats__label { font-family: var(--font-body); font-size: var(--font-scale-small); font-weight: 500; line-height: 1.35; color: var(--color-ink-soft); max-width: 22ch; } /* --- Breakpoints: nur die Spaltenzahl ändert sich, Proportionen bleiben ----- */ @media (min-width: 560px) { .trust-stats { --ts-cols: 2; } } @media (min-width: 900px) { .trust-stats { --ts-cols: 4; } } /* Reduced-Motion: das JS setzt ohnehin direkt den Endwert; hier nichts zu bewegen (kein Transform/Transition in dieser Komponente). Block bleibt als bewusste A11y-Markierung erhalten. */ @media (prefers-reduced-motion: reduce) { .trust-stats__num { transition: none; } } /* ============================================================================= cta-band — zentrierte Sekundär-CTA-Sektion ============================================================================= Schlanke, mittig gesetzte Handlungsaufforderung zum Wiederholen weiter unten auf einer Seite: Headline, zwei Sätze Fließtext, ein Primär-Button. Optional ein dezenter Puls-Ring um den Button, der die Aufmerksamkeit hält. TOKEN-PUR: ausschließlich Variablen aus _tokens/_base.css oder color-mix() daraus — kein hardgekodeter Marken-Wert. Siehe rules/lp-components-token-disziplin.md. Die --cb-* sind komponenten-lokale Layout-Konstanten (Inhalts-Breite, Mindest- Touch-Höhe, Puls-Ring-Stärke) — an keine Marke gekettet, laut Regel erlaubt. Lade-Reihenfolge: _tokens/_base.css → .css → diese Datei → cta-band.js (das JS ist optional — die Komponente funktioniert auch ganz ohne). ============================================================================ */ .cta-band { /* komponenten-lokale Konstanten (kein Marken-Bezug) */ --cb-content-w: 640px; /* max. Breite des zentrierten Inhalts */ --cb-touch-min: 44px; /* Mindest-Touch-Target (Button-Höhe) */ --cb-ring: 2px; /* Stärke des Puls-Rings */ text-align: center; padding: var(--space-xxl) var(--space-m); } .cta-band__inner { max-width: var(--cb-content-w); margin-inline: auto; } .cta-band__title { font-family: var(--font-headline); font-size: var(--font-scale-h2); font-weight: 600; line-height: 1.2; color: var(--color-ink); margin: 0; } .cta-band__body { font-family: var(--font-body); font-size: var(--font-scale-body); line-height: 1.6; color: var(--color-ink-soft); margin: var(--space-m) auto 0; max-width: var(--cb-content-w); } /* Wrapper um den Button, damit der Puls-Ring relativ positioniert werden kann und nur so breit wie der Button selbst ist (inline-block). */ .cta-band__action { position: relative; display: inline-block; margin-top: var(--space-l); } .cta-band__btn { position: relative; z-index: 1; /* über dem Puls-Ring */ display: inline-flex; align-items: center; justify-content: center; min-height: var(--cb-touch-min); /* Touch-Target ≥ 44px */ padding: var(--space-s) var(--space-l); font-family: var(--font-body); font-size: var(--font-scale-body); font-weight: 500; line-height: 1.2; text-decoration: none; color: var(--color-on-primary); background: var(--color-primary); border: none; border-radius: var(--radius-pill); cursor: pointer; transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .cta-band__btn:hover, .cta-band__btn:focus-visible { background: var(--color-primary-strong); transform: translateY(-2px); /* leichter Lift */ box-shadow: var(--shadow-soft); } .cta-band__btn:focus-visible { outline: var(--cb-ring) solid var(--color-on-primary); outline-offset: var(--cb-ring); } /* Optionaler Puls-Ring: nur sichtbar, wenn das Action-Element data-pulse trägt. Liegt hinter dem Button, fängt keine Klicks ab und skaliert/verblasst sanft. */ .cta-band__action[data-pulse]::before { content: ""; position: absolute; inset: 0; border-radius: var(--radius-pill); border: var(--cb-ring) solid var(--color-primary); pointer-events: none; animation: cta-band-pulse 2.4s cubic-bezier(0.22, 1, 0.36, 1) infinite; } @keyframes cta-band-pulse { 0% { transform: scale(1); opacity: 0.55; } 70% { transform: scale(1.18); opacity: 0; } 100% { transform: scale(1.18); opacity: 0; } } @media (max-width: 600px) { .cta-band { padding: var(--space-xl) var(--space-m); } /* Button auf schmalen Screens voll-breit, damit er gut greifbar ist. */ .cta-band__action { display: block; } .cta-band__btn { display: flex; width: 100%; } } /* Reduced-Motion: keinen Puls erzwingen, keinen Hover-Lift animieren. */ @media (prefers-reduced-motion: reduce) { .cta-band__action[data-pulse]::before { animation: none; } .cta-band__btn { transition: background 0.2s ease; } .cta-band__btn:hover, .cta-band__btn:focus-visible { transform: none; } }/* ============================================================================= wo-base.css — Gemeinsames Chrome + wiederverwendbare Sektionen fuer alle Wachstum-Online-Seiten (Start + Unterseiten). Premium-Light mit Dunkelblau- Dark-Baendern. Token-pur (Werte aus _tokens/_base.css + wachstum-online.css). Lade-Reihenfolge im (zwingend NACH den Komponenten-CSS-Links, damit die Overrides greifen, genau wie frueher das Inline-