/* Schriften: self-hosted, kein Google-CDN (wie ecvsv.at) */
@font-face { font-family: "Saira"; src: url("/fonts/saira-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Saira"; src: url("/fonts/saira-700.woff2") format("woff2"); font-weight: 700 900; font-display: swap; }
@font-face { font-family: "Saira Condensed"; src: url("/fonts/saira-condensed-700.woff2") format("woff2"); font-weight: 700 900; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/inter-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/inter-600.woff2") format("woff2"); font-weight: 500 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/inter-700.woff2") format("woff2"); font-weight: 700 900; font-display: swap; }

/* VSV-Farben laut Design-System (design/vsv-web-design-system.md im Website-Projekt) */
:root {
  --brand: #001489;        /* Reflexblau */
  --brand-dark: #03061C;   /* Tiefblau */
  --accent: #FFB81C;       /* Gold – nur auf dunklem Grund */
  --steel: #9EA2A2;
  --text: #ffffff;
  --muted: rgba(234, 238, 247, 0.72);
  --panel: rgba(234, 238, 247, 0.08);
  --panel-strong: rgba(234, 238, 247, 0.15);
  --ok: #2fbf71;
  --bad: #e5484d;

  /* Antwortfarben A–D */
  --a0: #e5484d;
  --a1: #2f7cf6;
  --a2: #e9a800;
  --a3: #22a35f;

  --display: "Saira", "Inter", system-ui, sans-serif;
  --display-condensed: "Saira Condensed", "Saira", system-ui, sans-serif;
  --font: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font);
  color: var(--text);
  background: radial-gradient(120% 90% at 50% 0%, var(--brand) 0%, var(--brand-dark) 70%);
  background-color: var(--brand-dark);
  -webkit-font-smoothing: antialiased;
}
.ans-0 { --c: var(--a0); }
.ans-1 { --c: var(--a1); }
.ans-2 { --c: var(--a2); }
.ans-3 { --c: var(--a3); }
.hidden { display: none !important; }

/* Anzeigetafel-Look: Überschriften, Zahlen und Labels in Saira */
h1, h2, .brand, .pill, .timer .num, .board-title, .row, .pod, .tile, .intro, .big,
.qtimer, .badge, .card b, .count-big, .steps i, .qtext, .phase, .go, .stat b {
  font-family: var(--display);
}
.timer .num, .row .pts, .pod .block, .big, .qtimer, .card b, .count-big b, .tile .pct, .stat b {
  font-variant-numeric: tabular-nums;
}
.lobby h1, .board-title, .intro .big, .pod .block { font-family: var(--display-condensed); }