/*  Anzeige-Tafel. Vereinsfarben aus dem HSG_Beamer-Projekt uebernommen,
    damit Beamer-Slides und diese Seite nebeneinander stimmig wirken.
    Ausgelegt auf zwei Situationen: Handy in der Hand und Monitor/Beamer
    aus einigen Metern Entfernung -- deshalb skaliert die Zahl mit der
    Viewport-Breite statt mit einer festen Punktgroesse.                   */

:root {
  --navy-900: #040a20;
  --navy-800: #0a1a3d;
  --navy-600: #1b3363;
  --rot-500: #e11b2e;
  --rot-400: #ff4d5e;
  --weiss: #ffffff;
  --grau-hell: #cfd6e6;
  --grau: #9aa3b2;
  --gelb: #ffcc33;
}

* { box-sizing: border-box; }

/*  Ohne !important verliert das hidden-Attribut gegen Klassen, die selbst
    ein display setzen -- dann steht z.B. die Einlass-Zeile leer da.        */
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  padding: clamp(16px, 4vw, 48px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 0%, var(--navy-600) 0%, var(--navy-900) 70%);
  color: var(--weiss);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  font-variant-numeric: tabular-nums;
}

.tafel {
  width: 100%;
  max-width: 760px;
  text-align: center;
}

/* --- Kopf ---------------------------------------------------------------- */

.verein {
  margin: 0;
  font-size: clamp(0.75rem, 2vw, 0.95rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grau);
}

.spiel {
  margin: 0.25em 0 0;
  font-size: clamp(1.25rem, 4.5vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--weiss);
}

.anwurf {
  margin: 0.4em 0 0;
  font-size: clamp(0.85rem, 2.4vw, 1.05rem);
  color: var(--grau-hell);
}

/* --- Die grosse Zahl ----------------------------------------------------- */

.zahl { margin: clamp(20px, 5vw, 40px) 0; }

.zahl-wert {
  margin: 0;
  font-size: clamp(4.5rem, 26vw, 13rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--weiss);
  text-shadow: 0 0 36px rgba(225, 27, 46, 0.45);
}

.zahl-label {
  margin: 0.2em 0 0;
  font-size: clamp(0.9rem, 3vw, 1.3rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--rot-400);
}

/* --- Aufschluesselung ---------------------------------------------------- */

.teile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 4vw, 32px);
  flex-wrap: wrap;
}

.teil {
  flex: 1 1 180px;
  min-width: 140px;
  padding: clamp(12px, 2.5vw, 20px);
  border: 1px solid rgba(207, 214, 230, 0.18);
  border-radius: 14px;
  background: rgba(10, 26, 61, 0.55);
}

.teil-wert {
  margin: 0;
  font-size: clamp(1.75rem, 7vw, 2.75rem);
  font-weight: 700;
}

.teil-label {
  margin: 0.3em 0 0;
  font-size: clamp(0.7rem, 2.2vw, 0.9rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grau);
}

.teil-plus {
  font-size: clamp(1.5rem, 5vw, 2rem);
  font-weight: 300;
  color: var(--grau);
}

@media (max-width: 520px) {
  /*  Nebeneinander wuerden die beiden Kaesten umbrechen und das "+" an den
      Rand rutschen -- untereinander steht es sauber dazwischen.            */
  .teile { flex-direction: column; }
  .teil { width: 100%; flex: 0 0 auto; }
}

/* --- Aufteilung bei Gaestekontingent ----------------------------------- */

.aufteilung {
  margin: 12px 0 0;
  font-size: clamp(0.7rem, 2.2vw, 0.85rem);
  letter-spacing: 0.04em;
  color: var(--grau);
}

/* --- Einlass-Scans (nur wenn Ditix sie freigibt) ------------------------- */

.einlass {
  margin-top: clamp(16px, 3vw, 24px);
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.6em;
  flex-wrap: wrap;
}

.einlass-wert {
  font-size: clamp(1.1rem, 3.5vw, 1.5rem);
  font-weight: 700;
  color: var(--gelb);
}

.einlass-label {
  font-size: clamp(0.7rem, 2.2vw, 0.9rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grau);
}

/* --- Fuss ---------------------------------------------------------------- */

.fuss { margin-top: clamp(24px, 5vw, 40px); }

.stand {
  margin: 0;
  font-size: clamp(0.7rem, 2.2vw, 0.85rem);
  color: var(--grau);
}

.stand.veraltet { color: var(--gelb); }

.spielplan {
  margin-top: 18px;
  font-size: clamp(0.72rem, 2.2vw, 0.85rem);
  color: var(--grau-hell);
  text-align: left;
}

.spielplan summary {
  cursor: pointer;
  text-align: center;
  color: var(--grau);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.spielplan ul {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.spielplan li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 10px;
  border-radius: 8px;
}

.spielplan li.aktuell {
  background: rgba(225, 27, 46, 0.16);
  color: var(--weiss);
  font-weight: 600;
}

.spielplan .datum { color: var(--grau); flex: 0 0 auto; }
.spielplan li.aktuell .datum { color: var(--grau-hell); }
.spielplan .partie { flex: 1 1 auto; }
.spielplan .anzahl { flex: 0 0 auto; font-variant-numeric: tabular-nums; }

/* --- Hinweisleiste ------------------------------------------------------- */

.banner {
  margin: 0 0 clamp(16px, 3vw, 24px);
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(225, 27, 46, 0.18);
  border: 1px solid var(--rot-500);
  color: var(--weiss);
  font-size: clamp(0.78rem, 2.4vw, 0.95rem);
  text-align: left;
  white-space: pre-line;
}

@media (prefers-reduced-motion: no-preference) {
  .zahl-wert { transition: color 220ms ease; }
  .zahl-wert.puls { color: var(--rot-400); }
}