/* Teamquiz · Weihnachten im BuP-Stil
   Grundlage: BuP Marken- und Redaktionsstandard v1 (Akzentrot #C00D0E, Textgrau #57585A, Weiß als Lesefläche,
   feine rote Linien, kondensierte ruhige Sans). Festliche Ergänzung: Tannengrün und Gold, keine Verläufe, kein Neon, kein Blau.
   Kontraste (WCAG): Rot auf Weiß 6,35 · Grau auf Weiß 7,12 · Weiß auf Tanne 11,61 · Hellgold auf Tanne 6,78.
   Gold #B8892E nur für Linien, Sterne und Deko, nie für Text (3,16 auf Weiß). Rot nie direkt auf Tanne (1,83). */

@font-face { font-family: "Barlow Semi Condensed"; font-weight: 400; font-display: swap; src: url("/fonts/barlow-semi-condensed-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 500; font-display: swap; src: url("/fonts/barlow-semi-condensed-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 600; font-display: swap; src: url("/fonts/barlow-semi-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 700; font-display: swap; src: url("/fonts/barlow-semi-condensed-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 800; font-display: swap; src: url("/fonts/barlow-semi-condensed-latin-800-normal.woff2") format("woff2"); }

:root {
  /* BuP-Grundfarben */
  --rot: #C00D0E;         /* Handlung, Fokus, Überschriften, richtige Lösung (auf hellem Grund) */
  --grau: #57585A;        /* Fließtext */
  --schwarz: #111111;     /* starke Kontraste */
  --weiss: #FFFFFF;       /* Lesefläche */
  --hellgrau: #F1EFEB;    /* sekundäre Zonen */
  /* Festliche Ergänzung */
  --creme: #FAF6EF;       /* warmer Seitengrund */
  --tanne: #16402F;       /* Beamer-Grund, festliche Flächen */
  --tanne-tief: #0F2F22;
  --gold: #B8892E;        /* nur Linien, Sterne, Deko */
  --gold-hell: #E3C27A;   /* Text und Akzente auf Tanne */
  --linie: rgba(192, 13, 14, .35);

  --schrift: "Barlow Semi Condensed", "Arial Narrow", system-ui, sans-serif;
  --radius: 14px;
  --radius-gross: 28px;
  --abstand: clamp(16px, 2.4vw, 32px);

  /* Bewegung auf dem 125-BPM-Raster (aus dem Live-Deck): 1 Schlag = 0,48 s */
  --schlag: 480ms;
  --ease-weiter: cubic-bezier(.65, 0, .35, 1);
  --ease-raus: cubic-bezier(.22, 1, .36, 1);
}

/* Spieler-Farben für bis zu 8 Personen: ruhig, unterscheidbar, alle mit Weiß als Schrift lesbar (≥ 4,5:1). */
:root {
  --spieler-0: #C00D0E; --spieler-1: #16402F; --spieler-2: #8A5A12; --spieler-3: #57585A;
  --spieler-4: #7A1F4F; --spieler-5: #2F5D3A; --spieler-6: #5B3A8C; --spieler-7: #8C2F1C;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--schrift); color: var(--grau); background: var(--creme); line-height: 1.4; }
h1, h2, h3 { color: var(--schwarz); font-weight: 700; line-height: 1.1; margin: 0 0 .4em; }
a { color: var(--rot); }
:focus-visible { outline: 3px solid var(--rot); outline-offset: 3px; }
.ki-label { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--grau); }
.nur-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; } }