/* ============================================================================= Kamerakinder — 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 -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) hier dokumentieren: - Farben = Live-Scan https://www.kamerakinderweddings.com/mentoring/ (computed styles + Flothemes-Farbschema-CSS-Variablen --scheme_1-* / --scheme_2-* der Live-Site) - Fonts = self-hosted woff (Original-Dateien von der Kunden-Site, kein woff2 verfügbar — siehe Hinweis unten) — NIE Google-Fonts-CDN - Stand: 2026-07-31 ============================================================================= */ /* ---- Webfonts — SELF-HOSTED (./fonts/). KEIN Google-Fonts-CDN (leakt IP vor Consent, Preflight-Blockliste). Hinweis: Live-Site liefert die Marken-Fonts nur als .woff (kein .woff2) — Originaldateien 1:1 von der Kunden-Site übernommen, nicht neu erzeugt/geraten. Brand nutzt keine gestufte Gewichtsfamilie für --font-head (nur "Medium"); daher hier 1 Schnitt statt 400/500/700. -------- */ @font-face{font-family:"Secuela-Medium";src:url("./fonts/Secuela-Medium.woff") format("woff");font-weight:500;font-style:normal;font-display:swap;} @font-face{font-family:"HKGrotesk-Regular";src:url("./fonts/HKGrotesk-Regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap;} @font-face{font-family:"HKGrotesk-SemiBold";src:url("./fonts/HKGrotesk-SemiBold.woff") format("woff");font-weight:600;font-style:normal;font-display:swap;} /* Zusätzliche reale Marken-Fonts der Live-Site (Section-Headlines/Editorial-Akzent) — self-hosted mitgeliefert, aber NICHT an einen der 3 kanonischen --font-*-Slots gebunden (kein 4. Font-Slot im Skelett vorgesehen). Für punktuelle Editorial-Akzente in Copy-Blöcken manuell referenzierbar. */ @font-face{font-family:"HighSummit";src:url("./fonts/HighSummit.woff") format("woff");font-weight:400;font-style:normal;font-display:swap;} @font-face{font-family:"Didonesque-Roman";src:url("./fonts/Didonesque-Roman.woff") format("woff");font-weight:400;font-style:normal;font-display:swap;} :root{ /* ---- Farben — Basis / Flächen -------------------------------------------- */ --c-bg: #ffffff; /* Seiten-Basis — scheme_1 background--default (Live-Scan) */ --c-bg-surface: #dce0d2; /* Salbei — scheme_1 background--accent (Live-Scan) */ --c-bg-panel: #bfbbba; /* Warmgrau — scheme_2 background--accent (Live-Scan) */ --c-bg-tint: #ffe7df; /* Pfirsich — scheme_2 background--default (Live-Scan) */ --c-white: #ffffff; /* ---- Farben — Marke (Struktur/Sekundär) ---------------------------------- */ --c-primary: #434442; /* Anthrazit — dominante Marken-/Textfarbe (Live-Scan, body/h) */ --c-primary-dark: #613c1e; /* Warmbraun — Headline-Akzent "lernen" auf Hero (Live-Scan) */ --c-primary-light: #c1a893; /* Sandbeige — Sub-Headline-Akzent "7 Wochen - 7 Themen" (Live-Scan) */ --c-primary-soft: rgba(67,68,66,.10); /* Anthrazit-Fläche 10% (Hover, Badges) */ /* ---- Farben — CTA-Akzent (DISZIPLIN: nur primärer CTA + Selected) --------- */ --c-accent: #434442; /* CTA-Akzent — scheme_1/2 button--background--default (Live-Scan, echt monochrom) */ --c-accent-hover: #bfbbba; /* scheme_1 button--background--hover (Live-Scan) */ --c-on-accent: #ffffff; /* scheme_1/2 button--text--default (Live-Scan) */ --c-accent-soft: rgba(67,68,66,.14); /* Akzent-Fläche (Highlight, Badge) */ --c-accent-glow: rgba(67,68,66,.38); /* Akzent-Schein (CTA-Schatten) */ /* ---- Text auf Hell -------------------------------------------------------- */ --c-heading: #434442; /* Headlines — dominante Überschriftenfarbe (Live-Scan) */ --c-text: #434442; /* Fließtext (Live-Scan) */ --c-text-muted: #8b8b8b; /* scheme_2 overline--default (Live-Scan) */ --c-text-subtle: #b1b1b1; /* scheme_1 overline--default, sehr leise (Live-Scan) */ /* ---- Border --------------------------------------------------------------- */ --c-border: #e2e2e2; /* Standard-Rahmen — kein distinkter Marken-Border auf der Live-Site beobachtet, neutraler Skelett-Wert */ --c-border-strong: #cccccc; /* betonter Rahmen (Selected-Rand, Trenner) */ /* ---- Text/Flächen auf Dunkel (Marken-Bänder, Footer, Overlays) ------------ */ --c-on-dark-bg: #434442; /* Marken-Band = Primary (Anthrazit), Live-Scan Button-Ton */ --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); /* ---- Verläufe (Marke) — Hero/Bänder wärmer als flache Fläche -------------- */ --grad-brand: linear-gradient(155deg, var(--c-primary) 0%, var(--c-primary-dark) 100%); /* ---- Funktionale States (nicht Marke, aber Pflicht für Formulare) --------- */ --c-focus: var(--c-primary); /* Fokus-Ring */ --c-error: #ff2d2d; --c-error-soft: rgba(255,45,45,.10); /* Live-Scan: reale Formular-Fehlerfarbe der Site */ --c-success: #2e7d5b; --c-success-soft: rgba(46,125,91,.10); /* auf Live-Site nicht beobachtet, Skelett-Default */ /* ---- Typografie — Familien (self-hosted) --------------------------------- */ --font-head: "Secuela-Medium","Segoe UI",system-ui,-apple-system,Arial,sans-serif; --font-body: "HKGrotesk-Regular","Segoe UI",system-ui,-apple-system,Arial,sans-serif; --font-eyebrow: "HKGrotesk-SemiBold","Segoe UI",system-ui,Arial,sans-serif; /* 600, VERSALIEN */ /* ---- Typografie — Gewichte ------------------------------------------------ */ --fw-light: 300; --fw-normal: 400; --fw-medium: 500; --fw-bold: 700; /* ---- Typografie — Scale (mobile→desktop via clamp; ggf. an Marke anpassen) - */ --fs-display: clamp(2.25rem, 6vw, 3.5rem); --fs-h1: clamp(1.875rem,5vw, 2.75rem); --fs-h2: clamp(1.5rem, 3.6vw, 2.125rem); --fs-h3: clamp(1.25rem, 2.6vw, 1.5rem); --fs-lead: clamp(1.0625rem,1.8vw,1.25rem); --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 — 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(3rem, 7vw, 5.5rem); --gutter: clamp(1rem, 4vw, 1.5rem); --container: 1120px; --container-narrow: 720px; /* ---- Radius (an Marken-Charakter anpassen: kantig/gerundet/pill) ---------- */ /* Live-Scan: Buttons + Body auf border-radius:0 — Marke ist bewusst kantig/editorial. */ --r-xs: 0px; --r-input: 0px; --r-btn: 0px; /* CTA/Buttons — Live-Scan bestätigt 0px */ --r-card: 0px; /* Karten, Quiz-Optionen, Panels */ --r-pill: 999px; /* Chips/Badges bleiben pill-förmig (funktionale Form, keine Marken-Kante) */ --r-round: 50%; /* ---- Schatten (weich=light-first / härter je nach Marke) ------------------ */ --sh-xs: 0 1px 2px rgba(0,0,0,.06); --sh-card: 0 4px 16px rgba(0,0,0,.08); --sh-lift: 0 10px 30px rgba(0,0,0,.14); --sh-cta: 0 8px 24px var(--c-accent-glow); /* ---- Motion --------------------------------------------------------------- */ --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){ :root{ --dur: .001s; } *{ scroll-behavior:auto !important; } } /* ---- Basis-Defaults (jeder Funnel erbt) ----------------------------------- */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } html{ 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); -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. */ min-height:100vh; display:flex; flex-direction:column; } body > footer.site-footer{ margin-top:auto; } img,svg,video{ max-width:100%; display:block; } a{ color:var(--c-primary); } :focus-visible{ outline:2px solid var(--c-focus); outline-offset:2px; }