/* ============================================================
   OKAI → Koerting Live · tokens.css
   GENERIERT aus tokens.json (OKAI Design System v1.3.0) mit
   adapters/koerting-live/build.mjs. NICHT von Hand editieren:
   Änderungen in der tokens.json, dann neu erzeugen.

   Ersetzt public/assets/tokens.css im Hub 1:1.
   Live-Grafik hell und leicht (v1.3):
     Fläche               → role-live-surface   #F8F6F2, Karten Weiß, Spuren Sand #E9E6DD
     Führender Wert       → role-data-lead      #A4BEE8 (Fläche), Zahl in #355070
     Positiv (Stimme da)  → role-positive       #C4DFB6
     Richtig / falsch     → #2BB673 mit ✓ / #FF4254 mit ✕, nur im direkten Vergleich
     Akzent, Buttons      → #FF4254
     Schrift              → Titel und Zahlen 600, Beschriftungen 500
   Kein Glow, keine Deko-Verläufe, keine Endlos-Animationen,
   keine Körnung (README: Visual Foundations).
   ============================================================ */

/* ---- 1. Variablen aus tokens.css des Hubs ---- */
:root {
  color-scheme: light;

  /* Brand-Rollen (Namen aus dem Hub: Lime = Signal/Daten, Pink = Aktion) */
  --lime: #A4BEE8;
  --lime-bright: #A4BEE8;
  --lime-dark: #355070;
  --pink: #FF4254;
  --pink-bright: #F02C40;
  --pink-dark: #551237;
  --gold: #EC5A63;            /* im Hub ungenutzt */
  --black: #0A0A0A;
  --graphite: #3D3D3D;
  --white: #FFFFFF;
  --on-accent: #0A0A0A;

  /* Flächen-Treppe hell */
  --bg-0: #FFFFFF;
  --bg-1: #F8F6F2;
  --bg-2: #F8F6F2;
  --bg-3: #FFFFFF;
  --bg-4: #E9E6DD;

  /* Text auf Hell */
  --text-100: #0A0A0A;
  --text-200: #3D3D3D;
  --text-300: #6B6B6B;
  --text-400: #6B6B6B;
  --text-500: rgba(10,10,10,.45);
  --text-600: rgba(10,10,10,.32);

  /* Rahmen */
  --border-subtle: rgba(10,10,10,.06);
  --border-soft: rgba(10,10,10,.10);
  --border-strong: rgba(10,10,10,.18);
  --border-active: #355070;
  --focus-ring: #355070;

  /* Status: Grün ist für richtig reserviert, Verbunden = Mint */
  --status-green: #355070;
  --status-yellow: #F6A623;
  --status-red: #FF4254;

  /* Akzent-Text-Aliase */
  --signal-text: #FF4254;
  --ok-text: #355070;
  --warn-text: #3D3D3D;
  --alert-text: #FF4254;

  /* Verläufe: flach */
  --grad-headline: linear-gradient(135deg, #FF4254 0%, #FF4254 100%);
  --grad-progress: linear-gradient(135deg, #A4BEE8 0%, #A4BEE8 100%);
  --grad-text: linear-gradient(135deg, #0A0A0A 0%, #0A0A0A 100%);

  /* Spacing (OKAI Basis 4) */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 48px;
  --space-2xl: 64px;

  /* Radien (OKAI: 0 · 8 · 12 · 20 · Pill) */
  --r-xs: 8px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* Schatten und Glow: auf der Bühne keine */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --glow-lime: none;
  --glow-pink: none;

  /* Typo */
  --font: "Inter", "Neue Helvetica", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-display: "Inter", "Neue Helvetica", "Helvetica Neue", Arial, system-ui, sans-serif;
  --mono: "Inter", "Neue Helvetica", "Helvetica Neue", Arial, system-ui, sans-serif;
  --fs-xs: 12px;  --fs-sm: 14px;  --fs-md: 16px;  --fs-lg: 20px;
  --fs-xl: 24px;  --fs-2xl: 32px; --fs-3xl: 44px;

  /* Bewegung */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --t-fast: 140ms;
  --t: 220ms;
  --t-slow: 360ms;

  /* KI-Denk-Indikator: Hub-Funktion ohne OKAI-Gegenstück, Werte unverändert */
  --think-pulse: 1.15s;
  --think-stagger: .16s;
  --think-cycle: 1.5s;
  --think-word-in: .3s;

  /* Layout */
  --container: 1200px;
  --reading: 900px;
}

/* ---- 2. Werte, die live.css und praesentation.css selbst setzen (:root:root gewinnt) ---- */
:root:root {
  --go-bg: #F8F6F2; --go-bg-soft: #FFFFFF; --go-black: #0A0A0A; --go-white: #FFFFFF;
  --go-lime: #A4BEE8; --go-pink: #FF4254;
  --go-surface: #FFFFFF; --go-surface-hover: #E9E6DD;
  --go-border: rgba(10,10,10,.10); --go-border-strong: rgba(10,10,10,.18);
  --go-text: #0A0A0A; --go-text-muted: #3D3D3D; --go-text-subtle: #6B6B6B;
  --go-glass-bg: #FFFFFF; --go-glass-border: rgba(10,10,10,.08); --go-glass-border-bright: rgba(10,10,10,.16);
  --go-shadow-glow-lime: none; --go-shadow-glow-pink: none;
  --go-glass-shadow: none; --go-glass-shadow-lg: none;
  --inner-card: none;
  --lime-ring: #355070; --lime-soft: #A4BEE8; --lime-glow: transparent;
  --lime-42: #A4BEE8; --lime-12: rgba(164,190,232,.35); --lime-07: rgba(164,190,232,.28); --lime-05: rgba(164,190,232,.18);
  --mark-hi: #355070; --mark-lo: #355070;
  --fill-top: #C9C9C9; --fill-bottom: #C9C9C9; --inner-light: transparent;
  --shade: transparent; --shade-soft: transparent;
  --pink-glow: transparent; --pink-42: #FF4254; --pink-ring: transparent; --pink-soft: transparent;
  --go-font: "Inter", "Neue Helvetica", "Helvetica Neue", Arial, system-ui, sans-serif;
  --go-font-mono: "Inter", "Neue Helvetica", "Helvetica Neue", Arial, system-ui, sans-serif;
  --go-radius-sm: 8px; --go-radius-md: 12px; --go-radius-lg: 20px;
  --live-ease-out: cubic-bezier(0, 0, 0.2, 1); --live-ease-pop: cubic-bezier(0.2, 0.8, 0.2, 1);
  /* praesentation.css */
  --deck-x: 101px; --deck-y: 79px; --deck-gutter: 32px;
  --deck-xs: 16px; --deck-sm: 32px; --deck-md: 48px;
  --deck-glow-pink: transparent; --deck-glow-lime: transparent;
}
/* Overlay über Video (grün, blau, transparent): Flächen deckend hell statt dunkel */
:root:root.lw-overlay {
  --go-surface: #FFFFFF; --go-surface-hover: #E9E6DD; --go-border: #F2F2F2; --go-border-strong: #C9C9C9;
  --go-text-muted: #3D3D3D; --go-text-subtle: #6B6B6B;
  --go-glass-bg: #FFFFFF; --go-glass-border: #F2F2F2; --go-glass-border-bright: #C9C9C9;
  --mark-hi: #355070; --mark-lo: #355070; --fill-top: #C9C9C9; --fill-bottom: #C9C9C9; --inner-light: transparent;
  --lime-05: transparent; --lime-07: #E9E6DD; --lime-12: transparent; --lime-soft: #A4BEE8; --lime-glow: transparent;
  --lime-42: #A4BEE8;
}
:root:root.lw-gruen { --go-lime: #A4BEE8; --lime-42: #A4BEE8; }   /* Periwinkle übersteht den Key, anders als Lime */
:root:root .lw-overlay .side-card, :root:root.lw-overlay .side-card { background: #FFFFFF; }
:root:root.lw-overlay .cb-col.is-dim { filter: none; }

/* ---- 3. Regeln, in denen der Hub feste Werte hat ---- */
/* Helle Fläche auch in der Präsentation und Regie-Vorschau */
:root:root body:has(.d-view), :root:root .d-view { background: #E9E6DD; }
:root:root .d-bar, :root:root .d-badge { background: rgba(255,255,255,.92); }
:root:root .d-btn:hover { background: rgba(10,10,10,.06); }
:root:root:not(.lw-overlay) #present { background: #E9E6DD; }   /* Rand um die Leinwand */
/* Hinweise (Simulation, Warnung): ruhig in N-700 statt Gelb (Gelb hat auf Hell 2:1) */
:root:root .s-foot .flag, :root:root .tb.warn, :root:root .chip.warn, :root:root .d-badge { color: #3D3D3D; border-color: rgba(10,10,10,.18); }
:root:root .r-head { background: rgba(255,255,255,.92); }
:root:root .f-prev { background: #F8F6F2; }

/* Akzentwort und Eyebrow: Signal Red, sparsam */
:root:root .accent, :root:root .s-title .accent { color: #FF4254; text-shadow: none; }
:root:root .eyebrow, :root:root .d-eyebrow { color: #FF4254; font-family: "Inter", "Neue Helvetica", "Helvetica Neue", Arial, system-ui, sans-serif; font-weight: 600; letter-spacing: .115em; }
:root:root .eyebrow::before, :root:root .d-eyebrow::before { background: #FF4254; }
/* Text auf Signal Red: Ink statt Weiß (5,8:1 statt 3,4:1) */
:root:root .btn-primary, :root:root .pill.cta, :root:root .tb.primary,
:root:root .v-check.no, :root:root .d-pill { color: #0A0A0A; box-shadow: none; }
:root:root .pill.cta .pulse { background: #0A0A0A; }

/* Keine Atmosphäre, keine Vignette, keine Körnung, kein Glow */
:root:root .atmo, :root:root .slide .atmo { background: none; animation: none; }
:root:root .slide::before, :root:root .s-chart::before { background: none; }
:root:root .grain { display: none; }
:root:root .mx-dot::before { display: none; }
:root:root .cb-col.is-hi .cb-track::after { display: none; }
:root:root .d-qr-tile, :root:root .join .qr-tile, :root:root .qr-tile { box-shadow: 0 0 0 1px rgba(10,10,10,.10); }

/* Führender Wert: Fläche Periwinkle (über --go-lime), Zahl und Text Midnight */
:root:root .stat-hero, :root:root .join-count b, :root:root .w[data-tone="lime"],
:root:root .hb-col.is-hi .hb-pct, :root:root .hb-groups span.is-hi,
:root:root .cb-col.is-hi .cb-pct, :root:root .cb-col.is-hi .cb-key,
:root:root .pt-row.is-hi .pt-rank, :root:root .pt-row.is-hi .pt-val,
:root:root .mx-q.is-hi span, :root:root .mx-q.is-hi b, :root:root .qa-row.is-top .qa-n,
:root:root .tb.on, :root:root .jump button[aria-current="true"], :root:root .toast code,
:root:root .v-stage, :root:root .v-mx .c.is-hi, :root:root .v-mx-read b, :root:root .v-up[aria-pressed="true"],
:root:root .linkbtn:hover, :root:root .v-links a:hover, :root:root .fc-card b,
:root:root .r-votes, :root:root .hb-link.is-on, :root:root .e-bars li.is-ok span:first-child,
:root:root .chip.ok { color: #355070; text-shadow: none; }
:root:root .hb-groups span.is-hi, :root:root .cb-col.is-hi .cb-label,
:root:root .v-opt[aria-checked="true"], :root:root .v-pt.has, :root:root .v-up[aria-pressed="true"],
:root:root .v-input:focus, :root:root .can-mod .qa-row:hover, :root:root .btn-ghost:hover:not([disabled]) { border-color: #355070; }
:root:root .r-note { border-left-color: #A4BEE8; }
:root:root .e-spark polyline { stroke: #355070; }
:root:root .e-check input, :root:root .e-correct input { accent-color: #355070; }
:root:root .e-bar i { background: #C9C9C9; opacity: 1; }

/* Hürden-Fragen (tone-pink): auch hier hebt Periwinkle hervor; Rot bleibt dem Akzentwort im Titel */
:root:root .cb.tone-pink .cb-col.is-hi .cb-fill { background: #A4BEE8; }
:root:root .cb.tone-pink .cb-col.is-hi .cb-pct, :root:root .stat-hero.pink { color: #355070; }
:root:root .cb.tone-pink .cb-col.is-hi .cb-label { border-color: #355070; }

/* Einzelne Stimmen: flache Punkte in Midnight, kein Kugel-Verlauf, kein Schatten */
:root:root .dot, :root:root .mx-dot { background: #355070; box-shadow: none; }
:root:root .dp-mark { filter: none; }
:root:root .dp-mark.grp { border-left: 3px dashed #355070; filter: none; }
:root:root .dp-mark.grp .dp-pill { background: #A4BEE8; color: #0A0A0A; box-shadow: none; }
:root:root .mx-ring { box-shadow: none; border-color: #355070; }
:root:root .mx-ring::after { background: #A4BEE8; color: #0A0A0A; }

/* Tacho: Anteil Periwinkle, Nadel und Nabe Ink */
:root:root .g-val { filter: none; }
:root:root .g-needle { stroke: #0A0A0A; }
:root:root .g-tip { fill: #0A0A0A; }
:root:root .g-hub { fill: #F8F6F2; stroke: #0A0A0A; }

/* Drei Markenpunkte statt Lime/Weiß/Pink */
:root:root .trio .tl { background: #A4BEE8; box-shadow: none; }
:root:root .trio .tw { background: #C4DFB6; opacity: 1; }
:root:root .trio .tp { background: #FF4254; box-shadow: none; }

/* Live-Punkt: Signal Red, steht still */
:root:root .pulse { background: #FF4254; }
:root:root .pulse::after { animation: none; opacity: 0; }

/* Handy */
:root:root .v-opt[aria-checked="true"] .mark { background: #A4BEE8; border-color: #355070; color: #0A0A0A; }
:root:root .v-budget i.on { background: #A4BEE8; border-color: #355070; box-shadow: none; }
:root:root .v-mx-dot { background: #355070; box-shadow: 0 0 0 6px rgba(164,190,232,.45); }
:root:root input[type=range]::-webkit-slider-thumb { background: #355070; box-shadow: 0 0 0 5px rgba(164,190,232,.45); }
:root:root input[type=range]::-moz-range-thumb { background: #355070; box-shadow: 0 0 0 5px rgba(164,190,232,.45); }
/* Stimme angekommen = positiv: Mint mit Ink-Haken */
:root:root .v-check:not(.no) { background: #C4DFB6; color: #0A0A0A; box-shadow: none; }

/* Richtig = Grün mit ✓, falsch = Rot mit ✕ – nur im direkten Vergleich (Quiz, Schätzfrage aufgelöst) */
:root:root .v-done:not(:has(.v-echo)) .v-check:not(.no) { background: #2BB673; color: #0A0A0A; }
:root:root .cb-col.is-ok .cb-fill { background: #2BB673; }
:root:root .cb-col.is-ok .cb-pct { color: #0A0A0A; text-shadow: none; }
:root:root .cb-col.is-ok .cb-label { border-color: #2BB673; color: #0A0A0A; }
:root:root .cb-col.is-ok .cb-label::before { color: #2BB673; }
:root:root .cb-col.is-dim .cb-label::before { color: #FF4254; }
:root:root #dp-tr { border-left-color: #2BB673; filter: none; }
:root:root #dp-tr .dp-pill { background: #2BB673; color: #0A0A0A; }

/* Wortwolke: der Hub setzt 800/700/500 als Inline-Stil; eine Stufe leichter (das Layout misst mit dem schwereren Schnitt, Wörter rücken nur etwas auseinander) */
:root:root .w[style*="font-weight: 800"] { font-weight: 600 !important; }
:root:root .w[style*="font-weight: 700"] { font-weight: 500 !important; }
:root:root .w[style*="font-weight: 500"] { font-weight: 400 !important; }
/* Leichter: Titel und Zahlen 600, Beschriftungen 500 statt 700/800 */
:root:root .s-title, :root:root .v-card h2, :root:root .d-titel, :root:root .d-headline, :root:root .r-title,
:root:root .stat-hero, :root:root .g-num, :root:root .cb-pct, :root:root .pt-val, :root:root .mx-q b,
:root:root .qa-n, :root:root .v-big, :root:root .d-code, :root:root .r-code-big { font-weight: 600; letter-spacing: -.02em; }
:root:root .pill, :root:root .btn, :root:root .tb, :root:root .stat-count, :root:root .dp-pill, :root:root .hb-mean,
:root:root .mx-ring::after, :root:root .join-count b, :root:root .d-pill, :root:root .d-mode, :root:root .v-code,
:root:root .qr-code, :root:root .v-step button, :root:root .v-opt .mark, :root:root .v-err { font-weight: 600; }
:root:root .dp-ends, :root:root .g-end, :root:root .hb-col.is-hi .hb-pct, :root:root .hb-groups span, :root:root .cb-label,
:root:root .cb-key, :root:root .pt-label, :root:root .mx-y span, :root:root .mx-x, :root:root .qa-t, :root:root .jump button,
:root:root .v-input, :root:root .v-stage, :root:root .v-ends, :root:root .v-opt, :root:root .v-pt, :root:root .v-step output,
:root:root .v-mx-y, :root:root .v-up, :root:root .linkbtn, :root:root .join-lead b, :root:root .fc-card p,
:root:root .r-q-title, :root:root .e-letter { font-weight: 500; }
:root:root .cb-col.is-hi .cb-label, :root:root .pt-row.is-hi .pt-label { font-weight: 600; }