/* =============================================================================
   PR Profis® — 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 pr-profis-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 = abgeleitet aus TF001 (pr-profis-tf001/src/styles.css, Editorial-Masthead)
   - Fonts  = Open Sans + JetBrains Mono (self-hosted woff2 in ./fonts/, OFL)
   - Charakter: B&W-Editorial, Primär = Schwarz, EIN Akzent = Rot, durchgehend kantig (Radius 0)
   - Mapping-Notiz: TF001 Haupt-CTA = schwarz gefüllt (.btn--secondary, = --c-primary);
     Rot ist der disziplinierte Akzent (Eyebrow, Quiz-Selected, Progress, Pop = --c-accent).
     .btn--cta (accent-gefüllt) rendert daher rot — beide Button-Stile stehen bereit.
   - Nicht im kanonischen Vokabular: TF001 nutzt zusätzlich Playfair-Display-Italic als
     dekorativen Serif-Akzent. Das Kit kennt keine Serif-Rolle (keine Kunden-Rolle erfinden) —
     bei Bedarf lokal im Funnel ergänzen.
   - Stand: 2026-07-25
   ============================================================================= */

/* ---- Webfonts — SELF-HOSTED (woff2 in ./fonts/). KEIN Google-Fonts-CDN. -------- */
@font-face{font-family:"Open Sans";src:url("./fonts/open-sans-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Open Sans";src:url("./fonts/open-sans-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-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:"Open Sans";src:url("./fonts/open-sans-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap;}
@font-face{font-family:"JetBrains Mono";src:url("./fonts/jetbrains-mono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"JetBrains Mono";src:url("./fonts/jetbrains-mono-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;}

:root{
  /* ---- Farben — Basis / Flächen -------------------------------------------- */
  --c-bg:            #ffffff;   /* Seiten-Basis (weiß, light-first)               */
  --c-bg-surface:    #f4f4f4;   /* gehobene Sektion (heller Grau-Ton)             */
  --c-bg-panel:      #e1e1e1;   /* Panel/Track (TF001 brand-gray-light)           */
  --c-bg-tint:       #f8f8f8;   /* zarter Wechsel-Ton (Zebra-Sektionen)           */
  --c-white:         #ffffff;

  /* ---- Farben — Marke (Struktur/Sekundär) = SCHWARZ ------------------------- */
  --c-primary:       #000000;   /* Marken-Primär: Struktur, Headlines, schwarzer Haupt-Button (.btn--secondary) */
  --c-primary-dark:  #1a1a1a;   /* dunkler Ton für Bänder/Hover (Marken-Gradient) */
  --c-primary-light: #333333;   /* heller: dezente Struktur/Icons                 */
  --c-primary-soft:  rgba(0,0,0,.06);  /* schwarze Fläche 6% (Ghost-Hover)        */

  /* ---- Farben — CTA-Akzent = ROT (DISZIPLIN: CTA/Selected/Pop) -------------- */
  --c-accent:        #c13f36;   /* TF001 brand-red — Akzent-CTA, Quiz-Selected, Eyebrow, Progress */
  --c-accent-hover:  #a3352d;   /* Rot dunkler (Hover/Active)                     */
  --c-on-accent:     #ffffff;   /* Textfarbe AUF Rot (max. Kontrast)              */
  --c-accent-soft:   rgba(193,63,54,.10);   /* Rot-Fläche (Highlight, Badge, Selected-Tint) */
  --c-accent-glow:   rgba(193,63,54,.32);   /* Rot-Schein (CTA-Schatten)         */

  /* ---- Text auf Hell -------------------------------------------------------- */
  --c-heading:       #000000;   /* Headlines (TF001 brand-black)                  */
  --c-text:          #222222;   /* Fließtext (TF001 brand-text)                   */
  --c-text-muted:    #6b6b6b;   /* Sekundärtext, Captions                         */
  --c-text-subtle:   #a59f9f;   /* sehr leise Meta/Hinweise (TF001 brand-gray-mid)*/

  /* ---- Border --------------------------------------------------------------- */
  --c-border:        #e1e1e1;   /* Standard-Rahmen (TF001 brand-gray-light)       */
  --c-border-strong: #999999;   /* betonter Rahmen (Trenner, Hover-Rand)          */

  /* ---- Text/Flächen auf Dunkel (schwarze Bänder, Footer, Overlays) ---------- */
  --c-on-dark-bg:      #000000;
  --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) — schwarzes Band mit Tiefe ------------------------- */
  --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 = schwarz (TF001 ring)     */
  --c-error:         #c0392b;   --c-error-soft: rgba(192,57,43,.10);
  --c-success:       #2e7d5b;   --c-success-soft: rgba(46,125,91,.10);

  /* ---- Typografie — Familien (self-hosted) --------------------------------- */
  --font-head:    "Open Sans","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --font-body:    "Open Sans","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --font-eyebrow: "JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; /* VERSALIEN, tracking */

  /* ---- Typografie — Gewichte (geladene Open-Sans-Schnitte: 400/700/800) ----- */
  --fw-light:  400;   --fw-normal: 400;   --fw-medium: 700;   --fw-bold: 800;

  /* ---- Typografie — Scale (TF001: große, extrabold, eng laufende Headlines) -- */
  --fs-display: clamp(2.5rem,  7vw,   4rem);
  --fs-h1:      clamp(2rem,    5.4vw, 3rem);
  --fs-h2:      clamp(1.625rem,3.8vw, 2.25rem);
  --fs-h3:      clamp(1.25rem, 2.6vw, 1.5rem);
  --fs-lead:    clamp(1.125rem,1.9vw, 1.375rem);
  --fs-body:    1.0625rem;   /* 17px */
  --fs-small:   0.875rem;    /* 14px */
  --fs-caption: 0.6875rem;   /* 11px — TF001 Mono-Eyebrows */

  --lh-tight: 1.02;   --lh-head: 1.14;   --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.5rem, 8vw, 6rem);
  --gutter:    clamp(1rem, 4vw, 2rem);
  --container: 1200px;
  --container-narrow: 704px;

  /* ---- Radius — TF001 ist durchgehend KANTIG (Editorial-Masthead) ----------- */
  --r-xs:    0px;
  --r-input: 0px;
  --r-btn:   0px;    /* CTA/Buttons — scharfkantig */
  --r-card:  0px;    /* Karten, Quiz-Optionen, Panels */
  --r-pill:  0px;    /* auch Chips/Progress kantig (kein Kontrast zum Rest) */
  --r-round: 50%;    /* echte Kreise (Avatare/Icons) bleiben rund */

  /* ---- Schatten (TF001 ist flach/editorial — Rahmen statt Schatten) --------- */
  --sh-xs:   0 1px 2px rgba(0,0,0,.05);
  --sh-card: 0 2px 10px rgba(0,0,0,.06);
  --sh-lift: 0 8px 24px rgba(0,0,0,.10);
  --sh-cta:  0 6px 18px var(--c-accent-glow);

  /* ---- Motion (TF001 editorial easing) -------------------------------------- */
  --dur:  .2s;
  --ease: cubic-bezier(.32,.72,0,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);
  -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. */
  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); }
::selection{ background:var(--c-accent); color:var(--c-on-accent); }
:focus-visible{ outline:2px solid var(--c-focus); outline-offset:2px; }