/* =============================================================================
   DPEngineering — 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.

   Master im dpengineering-router-Repo (assets/). 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 dpengineering.at (computed styles, 2026-07-25):
              Marken-Grün rgb(0,96,57) = #006039 (Nav-Links + primärer CTA),
              Heading #3E3E3E/#333333, Body #222222, Border #E1E1E1,
              Surface #F2F3F7, Dark-Section #353535.
   - Fonts  = Open Sans (Head + Body, live gerendert), self-hosted woff2 (fontsource),
              KEIN Google-/Bunny-Fonts-CDN.
   - Charakter/Radius/Schatten = Senior-Design-Entscheidung (dezentes Redesign):
              präzise, technisch, ruhig → sehr kleine Radien (2–4px), weiche
              Schatten. Farben + Fonts bleiben zur Marke identisch.
   - Stand: 2026-07-25
   ============================================================================= */

/* ---- Webfonts — SELF-HOSTED (woff2 in ./fonts/). KEIN Fonts-CDN. ----------- */
@font-face{font-family:"Open Sans";src:url("./fonts/open-sans-latin-300-normal.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:"Open Sans";src:url("./fonts/open-sans-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Open Sans";src:url("./fonts/open-sans-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:"Open Sans";src:url("./fonts/open-sans-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:"Open Sans";src:url("./fonts/open-sans-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;}

:root{
  /* ---- Farben — Basis / Flächen -------------------------------------------- */
  --c-bg:            #ffffff;   /* Seiten-Basis (light-first, weiß)              */
  --c-bg-surface:    #f2f3f7;   /* gehobene Sektion (Live-Scan #F2F3F7)          */
  --c-bg-panel:      #e9ebf0;   /* Panel/Karte auf Surface (tiefere Tönung)      */
  --c-bg-tint:       #f7f8fa;   /* zarter Wechsel-Ton (Zebra-Sektionen)          */
  --c-white:         #ffffff;

  /* ---- Farben — Marke (Struktur/Sekundär) ---------------------------------- */
  --c-primary:       #006039;   /* Marken-Grün: Struktur, Links, sekundäre Buttons */
  --c-primary-dark:  #004d2e;   /* dunkler: Headlines auf hell, Marken-Bänder    */
  --c-primary-light: #2e8560;   /* heller: Icons, dezente Akzente                */
  --c-primary-soft:  rgba(0,96,57,.10);  /* Marken-Fläche 10% (Hover, Badges)    */

  /* ---- Farben — CTA-Akzent (DISZIPLIN: nur primärer CTA + Selected) --------- */
  /* Marke ist mono-grün → Akzent = Marken-Grün, Unterscheidung über FÜLLUNG    */
  /* (grüner Button, weiße Schrift) statt über eine zweite Hue.                 */
  --c-accent:        #006039;   /* CTA-Akzent — primärer CTA, Quiz-Selected      */
  --c-accent-hover:  #004d2e;   /* Akzent dunkler (Hover/Active)                 */
  --c-on-accent:     #ffffff;   /* Textfarbe AUF dem Akzent (weiß, max. Kontrast)*/
  --c-accent-soft:   rgba(0,96,57,.12);   /* Akzent-Fläche (Highlight, Badge)    */
  --c-accent-glow:   rgba(0,96,57,.28);   /* Akzent-Schein (CTA-Schatten)        */

  /* ---- Text auf Hell -------------------------------------------------------- */
  --c-heading:       #333333;   /* Headlines (kräftiger als Site-#3E3E3E → Kontrast) */
  --c-text:          #222222;   /* Fließtext (Live-Scan Body)                    */
  --c-text-muted:    #666666;   /* Sekundärtext, Captions                       */
  --c-text-subtle:   #999999;   /* sehr leise (Meta, Hinweise)                  */

  /* ---- Border --------------------------------------------------------------- */
  --c-border:        #e1e1e1;   /* Standard-Rahmen (Live-Scan #E1E1E1)          */
  --c-border-strong: #c7c7c7;   /* betonter Rahmen (Selected-Rand, Trenner)     */

  /* ---- Text/Flächen auf Dunkel (Marken-Bänder, Footer, Overlays) ------------ */
  --c-on-dark-bg:      #353535;   /* Live-Scan Dark-Section rgb(53,53,53)        */
  --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:         #c0392b;   --c-error-soft: rgba(192,57,43,.10);
  --c-success:       #006039;   --c-success-soft: rgba(0,96,57,.10);

  /* ---- Typografie — Familien (self-hosted Open Sans) ------------------------ */
  --font-head:    "Open Sans","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --font-body:    "Open Sans","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --font-eyebrow: "Open Sans","Segoe UI",system-ui,Arial,sans-serif; /* 600, VERSALIEN */

  /* ---- Typografie — Gewichte ------------------------------------------------ */
  --fw-light:  300;   --fw-normal: 400;   --fw-medium: 600;   --fw-bold: 700;

  /* ---- Typografie — Scale (mobile→desktop via clamp) ------------------------ */
  --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: -.01em;   --ls-eyebrow: .16em;   /* Marke nutzt weite Versalien   */

  /* ---- Spacing (8px-Scale — agenturweit gleich) ---------------------------- */
  --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 — Marken-Charakter: präzise/technisch → kantig-dezent -------- */
  --r-xs:    2px;
  --r-input: 3px;
  --r-btn:   3px;    /* CTA/Buttons — nahe an der eckigen Site-CTA, minimal weicher */
  --r-card:  4px;    /* Karten, Quiz-Optionen, Panels                          */
  --r-pill:  999px;  /* Chips/Badges                                           */
  --r-round: 50%;

  /* ---- Schatten (weich, professionell — aus Live-Scan abgeleitet) ---------- */
  --sh-xs:   0 1px 3px rgba(0,0,0,.08);
  --sh-card: 0 8px 24px rgba(149,157,165,.20);   /* moderner Soft-Shadow der Site */
  --sh-lift: 0 14px 40px rgba(0,0,0,.12);
  --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; }
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; }