/* ============================================================================= Energy for People — Funnel-CI-Kit · tokens.css ----------------------------------------------------------------------------- EINMALIGE Design-Quelle (Master) für ALLE EfP-Funnel (TF, AWF, LWF) + System- Seiten. Jeder Funnel trägt eine KOPIE dieser Datei und importiert sie (statisch per , React per Vite-Entry). NIE pro Funnel neu ableiten oder von Hand editieren — nur diesen Master ändern, dann re-syncen (funnel-deploy --kit-Gate). Standard: $HOME/repos/mog-lead-system/MOG-Funnel-CI-Kit-Standard.md Richtung: LIGHT-FIRST, conversion-optimiert (Senior-Designer-Redesign). Autoritäten: - Farben = EfP-Bestand (energy-for-people-tf002 --brand-Token): Teal #456965/#34514E, Surface #F0F4F3, Text #111. Gold #F5B400 = disziplinierter CTA-Akzent (war ungenutzt, jetzt gezielt für primären CTA + Selected — maximaler Kontrast, „pop" am Klickpunkt). - Fonts = Roboto (CI, bisher via Google-Fonts-CDN geladen → hier SELBST GEHOSTET, behebt den Consent-Verstoß; Gewichte 300/400/500/700). Stand: 2026-07-24 ============================================================================= */ /* ---- Webfonts — Roboto self-hosted (OFL, siehe fonts/Roboto-OFL-LICENSE.txt). KEIN Google-Fonts-CDN (leakt IP vor Consent, Preflight-Blockliste). --------- */ @font-face{font-family:"Roboto";src:url("./fonts/roboto-300.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap;} @font-face{font-family:"Roboto";src:url("./fonts/roboto-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;} @font-face{font-family:"Roboto";src:url("./fonts/roboto-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;} @font-face{font-family:"Roboto";src:url("./fonts/roboto-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;} :root{ /* ---- Farben — Basis / Flächen (light-first) ------------------------------- */ --c-bg: #ffffff; /* Seiten-Basis (weiß, maximale Klarheit) */ --c-bg-surface: #f0f4f3; /* EfP-Surface: gehobene Sektion (helles Teal) */ --c-bg-panel: #e5ecea; /* Panel/Karte auf Surface (tiefere Tönung) */ --c-bg-tint: #f7faf9; /* zarter Wechsel-Ton (Zebra-Sektionen) */ --c-white: #ffffff; /* ---- Farben — Marke (Teal, Struktur/Sekundär) ----------------------------- */ --c-primary: #456965; /* EfP-Teal: Marke, Struktur, sekundäre Buttons */ --c-primary-dark: #34514e; /* dunkles Teal: Headlines auf hell, Teal-Bänder */ --c-primary-light: #7a938f; /* helles Teal-Grau: Icons, dezente Akzente */ --c-primary-soft: rgba(69,105,101,.10); /* Teal-Fläche 10% (Hover, Badges) */ /* ---- Farben — CTA-Akzent (Gold, DISZIPLIN: nur primärer CTA + Selected) ---- */ --c-accent: #f5b400; /* Gold — primärer CTA, Quiz-Selected, Fokus-Pop */ --c-accent-hover: #e0a93b; /* Gold dunkler (Hover/Active) */ --c-on-accent: #24312f; /* dunkler Text AUF Gold (max. Lesbarkeit) */ --c-accent-soft: rgba(245,180,0,.14); /* Gold-Fläche (Highlight, Badge) */ --c-accent-glow: rgba(245,180,0,.38); /* Gold-Schein (CTA-Schatten) */ /* ---- Text auf Hell --------------------------------------------------------- */ --c-heading: #111111; /* Headlines (EfP --brand-text) */ --c-text: #2a2a2a; /* Fließtext */ --c-text-muted: #5a5a5a; /* Sekundärtext, Captions */ --c-text-subtle: #7a938f; /* sehr leise (Meta, Hinweise) — Teal-Grau */ /* ---- Border ---------------------------------------------------------------- */ --c-border: #dce7e4; /* Standard-Rahmen (Karten, Inputs) */ --c-border-strong: #c3cfcc; /* betonter Rahmen (Selected-Rand, Trenner) */ /* ---- Verläufe (Marke) — Hero/Teal-Bänder wärmer als flaches Teal ---------- */ --grad-brand: linear-gradient(155deg, #4d726d 0%, var(--c-primary) 42%, var(--c-primary-dark) 100%); /* ---- Text/Flächen auf Dunkel (Teal-Bänder, Footer, Overlays) --------------- */ --c-on-dark-bg: #34514e; --c-on-dark-heading: #ffffff; --c-on-dark-text: rgba(255,255,255,.90); --c-on-dark-muted: rgba(255,255,255,.66); --c-on-dark-border: rgba(255,255,255,.16); /* ---- Funktionale States (nicht Marke, aber nötig für Formulare) ------------ */ --c-focus: #456965; /* Fokus-Ring (Teal, 2px + Offset) */ --c-error: #c0392b; --c-error-soft: rgba(192,57,43,.10); --c-success: #2e7d5b; --c-success-soft: rgba(46,125,91,.10); /* ---- Typografie — Familien (Roboto self-hosted) --------------------------- */ --font-head: "Roboto","Segoe UI",system-ui,-apple-system,Arial,sans-serif; --font-body: "Roboto","Segoe UI",system-ui,-apple-system,Arial,sans-serif; --font-eyebrow: "Roboto","Segoe UI",system-ui,Arial,sans-serif; /* 500/700, VERSALIEN */ /* ---- Typografie — Gewichte ------------------------------------------------ */ --fw-light: 300; --fw-normal: 400; --fw-medium: 500; --fw-bold: 700; /* ---- Typografie — Scale (mobile→desktop via clamp) ------------------------ */ --fs-display: clamp(2.25rem, 6vw, 3.5rem); /* 36→56px Hero-Display */ --fs-h1: clamp(1.875rem,5vw, 2.75rem); /* 30→44px */ --fs-h2: clamp(1.5rem, 3.6vw, 2.125rem); /* 24→34px Sektion */ --fs-h3: clamp(1.25rem, 2.6vw, 1.5rem); /* 20→24px Quiz-Frage/Card-Titel */ --fs-lead: clamp(1.0625rem,1.8vw,1.25rem); /* 17→20px Lead/Subline */ --fs-body: 1.0625rem; /* 17px */ --fs-small: 0.875rem; /* 14px */ --fs-caption: 0.75rem; /* 12px */ --lh-tight: 1.14; --lh-head: 1.24; --lh-body: 1.6; --ls-tight: -.015em; --ls-eyebrow: .14em; /* ---- Spacing (8px-Scale) -------------------------------------------------- */ --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --section-y: clamp(3rem, 7vw, 5.5rem); /* vertikaler Sektions-Rhythmus */ --gutter: clamp(1rem, 4vw, 1.5rem); /* seitl. Innenabstand (mobil ≥16px) */ --container: 1120px; /* Content-Breite */ --container-narrow: 720px; /* Lese-/Formular-Breite */ /* ---- Radius (light-clean, moderat gerundet) ------------------------------- */ --r-xs: 6px; --r-input: 10px; --r-btn: 12px; /* CTA/Buttons */ --r-card: 18px; /* Karten, Quiz-Optionen, Panels */ --r-pill: 999px; /* Chips/Badges */ --r-round: 50%; /* ---- Schatten (weich, light-first) ---------------------------------------- */ --sh-xs: 0 1px 2px rgba(52,81,78,.06); --sh-card: 0 4px 16px rgba(52,81,78,.08); --sh-lift: 0 10px 30px rgba(52,81,78,.14); --sh-cta: 0 8px 24px var(--c-accent-glow); /* Gold-Schein am CTA */ /* ---- Motion --------------------------------------------------------------- */ --dur: .18s; --ease: cubic-bezier(.2,.7,.2,1); /* ---- Layout-Konstanten ---------------------------------------------------- */ --tap-min: 48px; /* Mindest-Tap-Höhe (Mobile-CRO) */ --z-header: 30; --z-sticky-cta: 40; --z-overlay: 60; --z-modal: 70; } /* ---- Reduced Motion respektieren ------------------------------------------- */ @media (prefers-reduced-motion: reduce){ :root{ --dur: .001s; } *{ scroll-behavior:auto !important; } } /* ---- Basis-Defaults (jeder Funnel erbt light-first) ------------------------ */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } body{ margin:0; background:var(--c-bg); color:var(--c-text); font-family:var(--font-body); font-weight:var(--fw-normal); font-size:var(--fs-body); line-height:var(--lh-body); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img,svg,video{ max-width:100%; display:block; } a{ color:var(--c-primary); } :focus-visible{ outline:2px solid var(--c-focus); outline-offset:2px; }