/* ============================================================================= Victor De La Rosa — Funnel-CI-Kit · tokens.css (aus dem kanonischen Skelett) ----------------------------------------------------------------------------- KANONISCHES TOKEN-VOKABULAR — die Namen sind agenturweit IDENTISCH, nur die WERTE werden pro Kunde gefüllt. Rollen NIE umbenennen, KEINE Rolle löschen, KEINE Kunden-eigene Rolle erfinden (sonst driften die Kits — genau das soll dieses Skelett verhindern). Fehlt ein Wert im Marken-Material → aus Live-Scan ableiten oder mit Berni klären, NICHT raten. Master im victor-de-la-rosa-router-Repo. Funnel tragen Kopien (funnel-deploy --kit-Gate). Standard: $HOME/repos/mog-lead-system/MOG-Funnel-CI-Kit-Standard.md Herkunft der Werte (Autoritäten): - Farben = Live-Scan LMF-Retreat-Funnel (victor-de-la-rosa-site/lmf/retreats/, Designguide v1.0): Paper #F8F6F1, Ink #141414, Moss #6B7C3F. Editorial, warm, diszipliniert — ein einziger Grün-Akzent (Moss) für CTA + Struktur. - Fonts = Inter (Body) + Inter Tight (Head), self-hosted woff2 (OFL) in ./fonts/. Vic-Bestand: LMF-Funnel lud beide via Google-Fonts-CDN → hier self-hosted (behebt Consent-Verstoß). Gewichte kappen bei 600 (editorial, nie 700). - Stand: 2026-07-25 ============================================================================= */ /* ---- Webfonts — SELF-HOSTED (woff2 in ./fonts/, OFL). KEIN Google-Fonts-CDN (leakt IP vor Consent, Preflight-Blockliste). 700 ergaenzt 2026-08-02: Die fruehere Notiz "Vic nutzt max. 600 (editorial)" stimmte nicht — der Funnel hat 35 plus die h1 auf /datenschutz und /impressum, alle auf 700. Solange die Seiten Google einbanden, kam das von dort; beim Self-Hosting waere ohne diese zwei Dateien jede fette Stelle sichtbar leichter geworden. - */ @font-face{font-family:"Inter Tight";src:url("./fonts/inter-tight-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;} @font-face{font-family:"Inter Tight";src:url("./fonts/inter-tight-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;} @font-face{font-family:"Inter Tight";src:url("./fonts/inter-tight-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;} @font-face{font-family:"Inter Tight";src:url("./fonts/inter-tight-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;} @font-face{font-family:"Inter";src:url("./fonts/inter-300.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap;} @font-face{font-family:"Inter";src:url("./fonts/inter-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;} @font-face{font-family:"Inter";src:url("./fonts/inter-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;} @font-face{font-family:"Inter";src:url("./fonts/inter-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;} @font-face{font-family:"Inter";src:url("./fonts/inter-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;} :root{ /* ============================================================================ Werte = Vic-Marke (Paper/Ink/Moss). Kein Sentinel-Magenta/-Orange mehr — bliebe eine solche Signalfarbe sichtbar, wäre ein Token vergessen worden. ========================================================================== */ /* ---- Farben — Basis / Flächen (warm, papierbasiert) ---------------------- */ --c-bg: #F8F6F1; /* Paper — Seiten-Basis (warmes Creme) */ --c-bg-surface: #EFEAE0; /* Paper-Tint — gehobene Sektion (Trust, Footer) */ --c-bg-panel: #FFFFFF; /* Panel/Karte auf Paper (Quiz-Option, Input) */ --c-bg-tint: #F2EEE5; /* zarter Wechsel-Ton (Zebra-Sektionen) */ --c-white: #FFFFFF; /* ---- Farben — Marke (Moss, Struktur/Sekundär) ---------------------------- */ --c-primary: #6B7C3F; /* Moss — Marke, Struktur, Links, sekundäre Buttons */ --c-primary-dark: #5E6D37; /* dunkleres Moss: Headlines auf hell, Moss-Bänder */ --c-primary-light: #C7D29B; /* helles Sage: Eyebrow auf Dunkel, dezente Akzente */ --c-primary-soft: rgba(107,124,63,.10); /* Moss-Fläche 10% (Hover, Badges) */ /* ---- Farben — CTA-Akzent (Vic: ein einziges Moss für CTA + Selected) ------ */ --c-accent: #6B7C3F; /* CTA-Akzent = Moss (primärer CTA, Quiz-Selected) */ --c-accent-hover: #5E6D37; /* Moss dunkler (Hover/Active) */ --c-on-accent: #F8F6F1; /* Textfarbe AUF Moss = Paper (Button-Text) */ --c-accent-soft: rgba(107,124,63,.10); /* Akzent-Fläche (Highlight, Selected) */ --c-accent-glow: rgba(107,124,63,.28); /* Akzent-Schein (CTA-Schatten) */ /* ---- Text auf Hell (Ink) -------------------------------------------------- */ --c-heading: #141414; /* Ink — Headlines */ --c-text: #141414; /* Ink — Fließtext (voll, editorial) */ --c-text-muted: rgba(20,20,20,.62); /* Ink-60 — Sekundärtext, Captions */ --c-text-subtle: rgba(20,20,20,.40); /* Ink-40 — sehr leise (Meta, Hinweise) */ /* ---- Border --------------------------------------------------------------- */ --c-border: rgba(20,20,20,.12); /* Ink-12 — Standard-Rahmen (Karten, Inputs) */ --c-border-strong: rgba(20,20,20,.40); /* Ink-40 — betonter Rahmen (Dot, Selected-Rand) */ /* ---- Text/Flächen auf Dunkel (Ink-Bänder, Hero-Overlay, Footer) ----------- */ --c-on-dark-bg: #141414; /* Ink */ --c-on-dark-heading: #F8F6F1; /* Paper */ --c-on-dark-text: rgba(248,246,241,.92); --c-on-dark-muted: rgba(248,246,241,.66); --c-on-dark-border: rgba(248,246,241,.16); /* ---- Verläufe (Marke) — Moss-Band, dezent (Vic Closer-Sektion) ------------ */ --grad-brand: linear-gradient(155deg, #6B7C3F 0%, #5E6D37 100%); /* ---- Funktionale States (nicht Marke, aber Pflicht für Formulare) --------- */ --c-focus: var(--c-primary); /* Fokus-Ring = Moss */ --c-error: #A23B2D; --c-error-soft: rgba(162,59,45,.10); /* Vic-Fehlerrot */ --c-success: #2E7D5B; --c-success-soft: rgba(46,125,91,.10); /* ---- Typografie — Familien (self-hosted) --------------------------------- */ --font-head: "Inter Tight","Inter",-apple-system,BlinkMacSystemFont,system-ui,sans-serif; --font-body: "Inter",-apple-system,BlinkMacSystemFont,system-ui,sans-serif; --font-eyebrow: "Inter",-apple-system,system-ui,sans-serif; /* 500/600, VERSALIEN */ /* ---- Typografie — Gewichte (Vic kappt editorial bei 600 — NIE 700) -------- */ --fw-light: 300; --fw-normal: 400; --fw-medium: 500; --fw-bold: 600; /* ---- Typografie — Scale (mobile→desktop via clamp; = Vic Designguide) ----- */ --fs-display: clamp(2.25rem, 5.4vw, 3.75rem); /* 36→60px (Vic h1) */ --fs-h1: clamp(1.75rem, 3.6vw, 2.5rem); /* 28→40px (Vic h2) */ --fs-h2: clamp(1.375rem,2.4vw, 1.75rem); /* 22→28px (Vic h3) */ --fs-h3: clamp(1.1875rem,2vw, 1.375rem); /* 19→22px */ --fs-lead: clamp(1.0625rem,1.8vw,1.25rem); /* 17→20px */ --fs-body: 1.0625rem; /* 17px */ --fs-small: 0.875rem; /* 14px */ --fs-caption: 0.75rem; /* 12px */ --lh-tight: 1.15; --lh-head: 1.2; --lh-body: 1.6; --ls-tight: -.03em; --ls-eyebrow: .18em; /* ---- Spacing (8px-Scale — agenturweit gleich, NICHT pro Kunde ändern) ----- */ --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(3.75rem, 7vw, 5rem); /* 60→80px (Vic section padding) */ --gutter: clamp(1.375rem, 4vw, 2rem); /* 22→32px (Vic container padding) */ --container: 1080px; /* Vic --max-wide */ --container-narrow: 720px; /* Vic --max-text */ /* ---- Radius (Vic: kantig/editorial — durchgängig 4px) --------------------- */ --r-xs: 3px; --r-input: 4px; --r-btn: 4px; /* CTA/Buttons — Vic --radius */ --r-card: 4px; /* Karten, Quiz-Optionen, Panels */ --r-pill: 999px; /* Chips/Badges */ --r-round: 50%; /* ---- Schatten (weich, warm — Vic shadow-soft / shadow-hero) --------------- */ --sh-xs: 0 1px 2px rgba(20,20,20,.04); --sh-card: 0 1px 2px rgba(20,20,20,.04), 0 6px 24px rgba(20,20,20,.06); --sh-lift: 0 8px 40px rgba(20,20,20,.18); --sh-cta: 0 6px 22px var(--c-accent-glow); /* ---- Motion (Vic: 180ms, editorial ease) --------------------------------- */ --dur: .18s; --ease: cubic-bezier(.2,.7,.2,1); /* ---- Layout-Konstanten ---------------------------------------------------- */ --tap-min: 48px; --z-header: 30; --z-sticky-cta: 40; --z-overlay: 60; --z-modal: 70; } /* ---- Reduced Motion respektieren ------------------------------------------- */ @media (prefers-reduced-motion: reduce){ /* Schaltet Bewegung wirklich ab statt sie nur zu daempfen: Das alte `--dur: .001s` griff NUR bei Transitions, die var(--dur) benutzen — fest notierte Dauern (.sticky-cta .3s, .quiz__bar .4s, .btn.is-loading .6s infinite, .live-dot 1.4s infinite) liefen trotz aktivierter Systemeinstellung weiter. Lastenheft #205. */ :root{ --dur: .001s; } *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } } /* ---- Basis-Defaults (jeder Funnel erbt) ----------------------------------- */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; height:100%; } 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); font-feature-settings:'ss01' on, 'cv11' on; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; /* Sticky-Footer: min-height:100vh + flex-column + margin-top:auto auf dem Footer (letztes Kind) schiebt ihn ans Viewport-Ende, auch wenn der Seiteninhalt kuerzer als der Bildschirm ist -- sonst haengt der Footer bei kurzen Seiten irgendwo in der Bildschirmmitte statt ganz unten. Faellt bei langem Inhalt automatisch zurueck auf normales Scrollen. mog-footer.js bringt das zusaetzlich als eingebautes JS-Verhalten mit (stickyBody) -- diese CSS-Variante ist Konsistenz mit dem Kit-Master. */ min-height:100vh; display:flex; flex-direction:column; } body > footer.site-footer{ margin-top:auto; } img,svg,video{ max-width:100%; height:auto; display:block; } a{ color:var(--c-primary); } :focus-visible{ outline:2px solid var(--c-focus); outline-offset:2px; }