/* ==============================================================================
   QUIZ-BRETT · GEMEINSAME DESIGN-TOKENS & BASIS-STILE
   ==============================================================================
   WARUM eine eigene Datei?
   Wird von allen drei Seiten eingebunden (index.html, Quizbrett.html,
   neue-Quiz-erstellen-bearbeiten.html). Farben, Schrift und ein paar
   Basis-Resets müssen so nur an EINER Stelle gepflegt werden, statt in drei
   Kopien zu veralten.
   ============================================================================== */
:root {
  --stage:        #0e1016;   /* tiefes Bühnen-Schwarz (Hintergrund) */
  --stage-2:      #161a24;   /* etwas heller, für sanften Verlauf */
  --ink:          #1b1d24;   /* dunkle Schrift auf hellem Grund */
  --paper:        #fbfaf4;   /* warmes Weiss für die Frage-Karte */

  /* Team-Farben: Blau = Team 1 (links), Orange = Team 2 (rechts) */
  --team-1:       #2f90cf;
  --team-1-dark:  #1f6fa3;
  --team-2:       #f49a1f;
  --team-2-dark:  #c9790c;

  /* Sticky-Note: warmes Gelb mit hellem Glanz */
  --note:         #ffdf6b;
  --note-hi:      #fff0a6;
  --note-ink:     #4a3f17;   /* dunkle, warme Schrift auf dem Zettel */

  --good:         #34b36b;   /* Grün für «richtig» */
  --good-dark:    #248a51;
  --muted:        #5d6470;   /* neutrales Grau (z. B. «überspringen») */
  --muted-2:      #8a929e;

  /* Schrift-Stack: bewusst nur System-Fonts (offline immer verfügbar). */
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --radius: 14px;
  --shadow-note: 0 6px 16px rgba(0,0,0,.45);
  --shadow-card: 0 30px 80px rgba(0,0,0,.6);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

body {
  font-family: var(--font-ui);
  color: #fff;
  background: radial-gradient(120% 120% at 50% 0%, var(--stage-2) 0%, var(--stage) 60%);
}

button { font-family: inherit; cursor: pointer; border: none; }

/* Hilfsklasse: Element komplett ausblenden (Layout entfernt) */
.hidden { display: none !important; }

/* BARRIEREFREIHEIT: Bewegung reduzieren, wenn das System es wünscht */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}