/* =============================================================================
   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);

  /* ---- 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%; }
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;
}