/* =========================================================================
   Schützenstand-Anzeige — Design-Tokens

   Anmutung: gebürstetes Messing, Gewehrschrank-Holz, dunkles Waidmannsgrün —
   wie eine Tafel im Vereinsheim, keine SaaS-Oberfläche. Statusfarben bleiben
   an der bewährten Ampel-Logik, weil sie auf Distanz sofort erkennbar sein
   muss.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root {
  --bg: #12160f;
  --bg-panel: #1c2116;
  --bg-panel-raised: #242a1c;
  --wood: #5a4029;
  --wood-light: #7a5a38;
  --brass: #c19a54;
  --brass-bright: #e0bd7a;
  --cream: #ece4d3;
  --cream-dim: #b8b09c;

  --status-frei: #6b9459;
  --status-frei-bg: #24301f;
  --status-wenig: #d0993a;
  --status-wenig-bg: #332a18;
  --status-belegt: #b8453a;
  --status-belegt-bg: #331e1a;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'IBM Plex Sans', -apple-system, Segoe UI, sans-serif;

  --radius: 6px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--cream);
  font-family: var(--font-body);
  height: 100%;
}

body {
  background-image:
    radial-gradient(ellipse at top, rgba(193, 154, 84, 0.06), transparent 60%);
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  margin: 0;
}

button {
  font-family: var(--font-body);
  cursor: pointer;
}

::selection { background: var(--brass); color: var(--bg); }

/* Sicherheitsnetz: [hidden] muss immer gewinnen, auch wenn eine
   Klasse an derselben Stelle display setzt (siehe admin.css) */
[hidden] { display: none !important; }

/* Fokus sichtbar halten (Tastaturbedienung an der Standaufsicht) */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--brass-bright);
  outline-offset: 2px;
}

/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

.brass-rule {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--brass), transparent);
  border: none;
  margin: 0;
}