/* ============================================================================= silberstern TV — Funnel-CI-Kit · tokens.css ----------------------------------------------------------------------------- EINMALIGE Design-Quelle für ALLE silberstern-Funnel (TF, LMF, …). Jeder Funnel importiert diese Datei; Farben/Fonts/Radien/Schatten werden NIE pro Funnel neu abgeleitet (funnel-deploy Design-Quelle-Gate). Autoritäten: - Farben = CI-Manual 02/2025 (grau-blau #52616a, Auszeichnung #72275d, s/w) - Fonts = CI-Manual (Avenir Next LT Pro Light/Heavy, Trebuchet MS Bold H2, Annifont) - Maße = Scan film.silberstern.tv (Container 1100, CTA-Pill 60px, Quiz-Karte etc.) - Theme = Dark-first (Logo weiß auf schwarz), kinematisch — Elevation-Direktion (Akzent-Disziplin: #72275d NUR für primären CTA + Quiz-Selected) Stand: 2026-07-13 ============================================================================= */ /* ---- Webfonts — EXAKT die von silberstern.tv gehosteten Marken-Fonts ---------- Am 2026-07-13 als woff2 aus silberstern.tv/wp-content/uploads gezogen (Original- Markenassets, keine Konvertierung). AvenirPro35Light = die im CI-Manual gemeinte „Avenir Next LT Pro Light" — es gibt nur diesen einen Avenir-Schnitt (kein Heavy); Nachdruck kommt über Trebuc-Bold-Eyebrows/H2 + Größe. Trebuc = CI-Trebuchet. */ @font-face{font-family:"AvenirPro35Light";src:url("./fonts/avenirpro35light.woff2") format("woff2");font-weight:300 500;font-style:normal;font-display:swap;} @font-face{font-family:"Trebuc";src:url("./fonts/trebuc-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;} @font-face{font-family:"Trebuc";src:url("./fonts/trebuc-bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;} @font-face{font-family:"Annifont";src:url("./fonts/annifont.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;} :root{ /* ---- Farben — Basis (dark-first) ------------------------------------------ */ --c-bg: #0d0f11; /* Near-Black Basis (mehr Tiefe als #000) */ --c-bg-elev: #14181b; /* gehobene Sektion/Fläche */ --c-bg-panel: #1a1f23; /* Quiz-Panel auf Dunkel */ --c-black: #000000; /* CI Schwarz (Logo-Basis) */ --c-white: #ffffff; /* CI Weiß */ /* ---- Farben — Marke (CI-Manual) ------------------------------------------- */ --c-primary: #52616a; /* CI grau-blau: Struktur, Progress-Track, Sekundär */ --c-primary-tint: rgba(82,97,106,.40); --c-accent: #72275d; /* CI Auszeichnung: NUR primärer CTA + Quiz-Selected */ --c-accent-hover: #843070; /* Hover (aufgehellt) */ --c-accent-soft: rgba(114,39,93,.18); --c-accent-glow: rgba(114,39,93,.50); /* Akzent als TEXT auf dunklem Grund (Eyebrow, Links, Auszeichnungen im Fliesstext). --c-accent ist eine FLAECHEN-Farbe (CTA-Hintergrund) und als Text auf --c-bg mit 1,98:1 unlesbar; WCAG AA verlangt 4,5:1 fuer kleinen Text. Dieser Ton haelt den CI-Beerenton und erreicht 5,5:1. NICHT fuer Flaechen/CTAs verwenden — dort bleibt --c-accent gesetzt. (Ergaenzt 2026-08-10, Beleg: BAF001-Eyebrow war kaum sichtbar.) */ --c-accent-on-dark:#c46ba8; /* ---- Text auf Dunkel ------------------------------------------------------ */ --c-heading: #ffffff; --c-text: rgba(255,255,255,.92); --c-text-muted: rgba(255,255,255,.66); --c-border: rgba(255,255,255,.12); --c-border-strong: rgba(255,255,255,.24); /* ---- Text/Flächen auf Hell (Legal-Seiten, helle Sektionen) ---------------- */ --c-light-bg: #ffffff; --c-light-panel: #f4f5f7; --c-light-heading: #3e3e3e; /* Scan: Headline-Text auf hell */ --c-light-text: #212121; --c-light-border: #eeeeee; /* Scan: Quiz-Karten-Rahmen */ /* ---- Typografie — Familien (silberstern.tv-Originale) --------------------- */ --font-body: "AvenirPro35Light","Segoe UI",Arial,Helvetica,sans-serif; --font-head: "AvenirPro35Light","Segoe UI",Arial,Helvetica,sans-serif; --font-eyebrow: "Trebuc","Trebuchet MS","Segoe UI",Arial,sans-serif; /* H2/Eyebrow, VERSALIEN, Bold */ --font-accent: "Annifont",cursive; /* Schmuck, einzelne Wörter */ /* ---- Typografie — Gewichte ----------------------------------------------- Avenir liegt nur als EIN Schnitt vor (Light). Kein synthetisches Bold auf Avenir! Nachdruck = Trebuc-Bold (Eyebrow/H2) + Größe. --------------------------- */ --fw-light: 400; /* AvenirPro35Light Normalgewicht */ --fw-eyebrow: 700; /* Trebuc Bold (nur --font-eyebrow) */ /* ---- Typografie — Scale (mobile→desktop via clamp) ------------------------ */ --fs-h1: clamp(1.75rem, 5vw, 2.75rem); /* Hero 28→44px (Scan 43) */ --fs-h2: clamp(1.5rem, 3.4vw, 2.125rem);/* Sektion 24→34px (Scan 34) */ --fs-h3: clamp(1.25rem, 2.6vw, 1.5625rem);/* Quiz-Frage 20→25px (Scan 25) */ --fs-lead: clamp(1.0625rem,2vw, 1.25rem); /* Lead/Subline 17→20px (Scan 20)*/ --fs-body: 1.0625rem; /* 17px */ --fs-small: 0.875rem; /* 14px */ --fs-caption: 0.75rem; /* 12px */ --lh-tight: 1.16; /* Headlines */ --lh-head: 1.25; --lh-body: 1.55; --ls-eyebrow: .16em;/* Versalien-Sperrung */ /* ---- 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, 8vw, 6rem); /* vertikaler Sektions-Rhythmus */ --gutter: clamp(1rem, 4vw, 1.25rem);/* seitl. Innenabstand (mobil ≥16px) */ --container: 1100px; /* Scan: Content-Breite */ /* ---- Radius --------------------------------------------------------------- */ --r-sm: 4px; --r-input: 8px; --r-card: 10px; /* Quiz-Antwort-/Content-Karten (Scan 5px, dezent eleviert)*/ --r-pill: 60px; /* CTA (Scan) */ --r-round: 50%; /* ---- Schatten (dark-tauglich) --------------------------------------------- */ --sh-card: 0 8px 24px rgba(0,0,0,.35); --sh-lift: 0 12px 30px rgba(0,0,0,.45); --sh-cta: 0 0 34px var(--c-accent-glow), 0 10px 24px rgba(0,0,0,.40); /* ---- Motion --------------------------------------------------------------- */ --dur: .15s; --ease: cubic-bezier(.2,.7,.2,1); /* ---- Layout-Konstanten ---------------------------------------------------- */ --tap-min: 56px; /* Mindest-Tap-Höhe (Mobile-CRO) */ --z-sticky-cta: 40; } /* Basis-Defaults (jeder Funnel erbt dark-first) */ html{ -webkit-text-size-adjust:100%; height:100%; } body{ margin:0; background:var(--c-bg); color:var(--c-text); font-family:var(--font-body); font-weight:var(--fw-light); font-size:var(--fs-body); line-height:var(--lh-body); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; /* Sticky-Footer: min-height:100vh + flex-column schiebt einen kurzen Seiteninhalt nicht mehr in die Bildschirmmitte -- mog-footer.js setzt zusaetzlich per JS margin-top:auto auf den gemounteten Footer (eingebautes Verhalten, s. Baustein- Kommentarkopf). Diese CSS-Variante ist nur Konsistenz mit dem Kit-Master-Skeleton (mog-skills/ci-kit-erstellen), kein Widerspruch. Faellt bei langem Inhalt automatisch auf normales Scrollen zurueck. */ min-height:100vh; display:flex; flex-direction:column; } /* ---- Reduced Motion respektieren ------------------------------------------- */ /* Nachgezogen 2026-08-08 (Lastenheft #205). Der silberstern-Kit loeste Reduced Motion bisher NUR in components.css — `baf/echtfilm` laedt aber ausschliesslich diese tokens.css und hatte deshalb gar keine Abdeckung. Regel gehoert damit ins Token-File, das jeder Einstiegspunkt laedt. */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } }