/* =========================================================
   VOTELIVE · Design-Tokens (abgeleitet aus dem TTS Design System)
   Quelle: TTS Design System (Claude), colors_and_type.css, Stand 04.11.2026,
   plus Messung im Keynote-PDF "Mensch. Maschine. Markt." (Pluracom, 09.11.2026).
   Regel: NUR diese Farben verwenden. Headlines IMMER uppercase.
   ========================================================= */

/* -- Fonts: freie Alternativen zu Benton Sans (beide Benton-Abkömmlinge) ----
   Display: Oswald (Alternate Gothic) statt Benton Sans Condensed
   Body:    Libre Franklin (Franklin Gothic) statt Benton Sans
   Self-hosted als .woff2 unter /public/fonts/ (OFL-Lizenz). Kein Google-CDN zur Laufzeit.
   Später gegen Benton Sans tauschbar: nur die @font-face-Blöcke und --font-* ändern. */
@font-face { font-family: "VL Display"; src: url("./fonts/Oswald-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "VL Display"; src: url("./fonts/Oswald-Bold.woff2") format("woff2");     font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "VL Body"; src: url("./fonts/LibreFranklin-Regular.woff2") format("woff2");  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "VL Body"; src: url("./fonts/LibreFranklin-Medium.woff2") format("woff2");   font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "VL Body"; src: url("./fonts/LibreFranklin-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "VL Body"; src: url("./fonts/LibreFranklin-Bold.woff2") format("woff2");     font-weight: 700; font-style: normal; font-display: swap; }

/* Regel (Design-Runde 2, 04.11.2026): Display-Font NUR für Join-Headline, Join-Code, Teilnehmerzahl,
   Prozent-/Durchschnittszahlen, Code-Ziffern und "DANKE." — alles andere Body-Font.
   Gelb nur als Fläche; der Stempel .vl-hl nie auf Headlines, Fragetexten oder in der Wordcloud. */

:root {
  /* ---- Palette (TTS, vollständig) ---- */
  --tts-black:   #000000;   /* Ink: alle Headlines, aller Text */
  --tts-white:   #FFFFFF;   /* Seite (Phone, Admin) */
  --tts-yellow:  #FAF394;   /* DIE Markenfarbe: Join-Folie vollflächig, Highlight-Stempel, Spitzenreiter-Balken */
  --tts-fog:     #DCDEE0;   /* Stage-Hintergrund (im Keynote-PDF gemessen: #DDDEE0), Hairlines */
  --tts-fog-50:  #F3F4F5;   /* leichte Tintfläche, Hover auf hellen Buttons */
  --tts-ink:     #53585F;   /* Sekundärtext, Captions, Teilnehmerzähler */
  --tts-ink-3:   #8A8E94;   /* gedämpfte Meta-Angaben */
  --tts-card:    #EAEBEC;   /* Kartenfläche auf Fog (im Keynote-PDF gemessen) */

  /* ---- Semantik ---- */
  --fg-1: var(--tts-black);
  --fg-2: var(--tts-ink);
  --fg-mute: var(--tts-ink-3);
  --fg-inv: var(--tts-white);

  --bg-page:  var(--tts-white);   /* Phone + Admin */
  --bg-stage: var(--tts-fog);     /* Präsentationsansicht (Laufseiten) */
  --bg-hero:  var(--tts-yellow);  /* Join-Folie (wie Titelfolie der Keynote) */
  --bg-card:  var(--tts-card);
  --rule-1:   var(--tts-fog);
  --rule-ink: var(--tts-black);
  --accent:   var(--tts-yellow);  /* der EINZIGE Akzent */

  /* ---- Typo ---- */
  --font-display: "VL Display", "Benton Sans Cond", "Oswald", "Barlow Condensed", system-ui, sans-serif;
  --font-body:    "VL Body", "Benton Sans", "Libre Franklin", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, monospace;

  /* Stage (1920×1080, skaliert mit vw; Werte = Mockup bei 1920 px) */
  --fs-stage-eyebrow:  clamp(14px, 1.15vw, 22px);  /* "Frage 2 von 5" */
  --fs-stage-question: clamp(36px, 3.33vw, 64px);  /* Fragetext, Body-Font 700, Satzschreibweise */
  --fs-stage-title:    clamp(64px, 5.8vw, 112px);  /* Join-Headline, Display-Font, einzeilig */
  --fs-stage-url:      clamp(28px, 2.7vw, 52px);   /* URL auf der Join-Folie, Body-Font 700 */
  --fs-stage-code:     clamp(120px, 13.5vw, 260px);/* Join-Code, Display-Font (Hero) */
  --fs-stage-count:    clamp(48px, 5vw, 96px);     /* Teilnehmerzahl Join-Folie */
  --fs-stage-pct:      clamp(32px, 3.33vw, 64px);  /* Prozentzahl am Balken, Display-Font */
  --fs-stage-label:    clamp(18px, 1.56vw, 30px);  /* Optionsbeschriftung, Body-Font 500 */
  --fs-stage-chip:     clamp(14px, 1.04vw, 20px);  /* LIVE / GESCHLOSSEN */
  --fs-stage-meta:     clamp(14px, 1.04vw, 20px);  /* Fußzeile: URL · Code · n Antworten · n im Raum */
  --fs-cloud-min:      clamp(20px, 1.77vw, 34px);
  --fs-cloud-max:      clamp(72px, 7.8vw, 150px);
  --bar-h-stage:       clamp(24px, 2.3vw, 44px);   /* Balkenhöhe Stage */

  /* Phone */
  --fs-ph-eyebrow: 12px;
  --fs-ph-h1: 34px;        /* "Code eingeben", Body-Font 700 */
  --fs-ph-question: 26px;  /* Fragetext, Body-Font 700 */
  --fs-ph-option: 18px;
  --fs-ph-body: 16px;
  --fs-ph-caption: 13px;
  --fs-ph-danke: 112px;    /* "DANKE.", Display-Font */
  --fs-ph-code: 48px;      /* Ziffern im Code-Feld, Display-Font */

  /* Admin */
  --fs-h1: 32px; --fs-h2: 24px; --fs-h3: 18px; --fs-body: 15px; --fs-small: 13px; --fs-eyebrow: 11px;

  --lh-tight: 0.95; --lh-snug: 1.1; --lh-normal: 1.4;
  --tr-display: -0.01em; --tr-eyebrow: 0.14em;

  /* ---- Abstände / Radius / Motion ---- */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;

  --radius-0: 0px;      /* Standard: alles hart-kantig (Balken, Buttons, Karten) */
  --radius-pill: 999px; /* nur Status-Chips ("LIVE", "GESCHLOSSEN") – wie "DAMALS/HEUTE"-Pills in der Keynote */

  --tap-min: 56px;      /* Mindesthöhe Touch-Ziele auf dem Phone */

  --motion-fast: 120ms cubic-bezier(.2,.7,.3,1);
  --motion-base: 220ms cubic-bezier(.2,.7,.3,1);
  --motion-slow: 420ms cubic-bezier(.2,.7,.3,1);
}

/* ---- Element-Klassen ---- */
.vl-eyebrow   { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-eyebrow); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--fg-2); }
.vl-display   { font-family: var(--font-display); font-weight: 700; line-height: var(--lh-tight); letter-spacing: var(--tr-display); text-transform: uppercase; }  /* nur Display-Momente, s. Regel oben */
.vl-question  { font-family: var(--font-body); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }  /* Fragetext Stage/Phone/Remote, Satzschreibweise */
.vl-h1        { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: -0.01em; }
.vl-h2        { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-h2); line-height: var(--lh-snug); }
.vl-h3        { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-h3); line-height: var(--lh-snug); }
.vl-body      { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-normal); }
.vl-caption   { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-small); color: var(--fg-mute); }
.vl-num       { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; }
.vl-cloud-word{ font-family: var(--font-body); font-weight: 700; line-height: 1; letter-spacing: -0.015em; color: var(--fg-1); }

/* Highlight-Stempel: NUR einzeilig, NUR auf kurzen Labels. Nie auf Headlines, Fragetexten, Wordcloud. */
.vl-hl { background: var(--tts-yellow); padding: .04em .22em; white-space: nowrap; }

/* Buttons: eckig, 2px schwarz, uppercase Body-Font */
.vl-btn { font-family: var(--font-body); font-weight: 600; font-size: 15px; letter-spacing: .08em; text-transform: uppercase;
          min-height: var(--tap-min); padding: 0 var(--space-5); border: 2px solid var(--tts-black); border-radius: var(--radius-0);
          background: var(--tts-black); color: var(--tts-white); cursor: pointer; transition: background var(--motion-fast), filter var(--motion-fast); }
.vl-btn:hover  { background: var(--tts-ink); border-color: var(--tts-ink); }
.vl-btn:active { filter: brightness(.96); }
.vl-btn:focus-visible { outline: 2px solid var(--tts-black); outline-offset: 2px; }
.vl-btn--ghost  { background: var(--tts-white); color: var(--tts-black); }
.vl-btn--ghost:hover { background: var(--tts-fog-50); border-color: var(--tts-black); }
.vl-btn--yellow { background: var(--tts-yellow); color: var(--tts-black); }
.vl-btn--yellow:hover { background: var(--tts-yellow); border-color: var(--tts-black); filter: brightness(.96); }
.vl-btn[disabled] { opacity: .4; cursor: default; }

/* Antwort-Option (Phone): weiße Fläche, 2px Rahmen, gewählt = gelb */
.vl-option { display: flex; align-items: center; min-height: var(--tap-min); padding: var(--space-3) var(--space-4);
             border: 2px solid var(--tts-black); border-radius: var(--radius-0); background: var(--tts-white);
             font-family: var(--font-body); font-weight: 500; font-size: var(--fs-ph-option); cursor: pointer; transition: background var(--motion-fast); }
.vl-option[aria-checked="true"], .vl-option.is-selected { background: var(--tts-yellow); font-weight: 700; }

/* Ergebnisbalken (Stage + Phone): schwarz, Spitzenreiter gelb mit schwarzer Kontur */
.vl-bar       { height: 100%; background: var(--tts-black); border-radius: var(--radius-0); transition: width var(--motion-base); }
.vl-bar--lead { background: var(--tts-yellow); outline: 2px solid var(--tts-black); outline-offset: -2px; }

/* Status-Chip (einzige Pill-Form) */
.vl-chip { display: inline-block; font-family: var(--font-body); font-weight: 600; font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
           padding: 4px 12px; border-radius: var(--radius-pill); background: var(--tts-black); color: var(--tts-white); }
.vl-chip--live { background: var(--tts-yellow); color: var(--tts-black); }

/* Karten (offene Antworten, Admin-Listen): hart-kantig, Hairline, kein Schatten */
.vl-card { background: var(--tts-white); border: 1px solid var(--rule-1); border-radius: var(--radius-0); padding: var(--space-5); }
.vl-card--stage { background: var(--bg-card); border: 0; }

/* Verbotsliste (zur Erinnerung): keine Gradients, keine Schatten auf der Stage, keine Icons außer Lucide in der Admin-UI, keine Emoji. */