/* Live-Ticker fuer Zuschauer: derselbe Look wie die App (dunkel, blauer
   Schein, Anton/Barlow), gebaut fuer Handy und fuer den Fernseher an der
   Theke. Keine Bedienung noetig - die Seite aktualisiert sich selbst. */
@font-face { font-family: 'Anton'; font-weight: 400; font-display: swap; src: url('../fonts/anton-400.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 600; font-display: swap; src: url('../fonts/barlow-condensed-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 700; font-display: swap; src: url('../fonts/barlow-condensed-700.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 400; font-display: swap; src: url('../fonts/barlow-400.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 600; font-display: swap; src: url('../fonts/barlow-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 700; font-display: swap; src: url('../fonts/barlow-700.woff2') format('woff2'); }

:root {
  --bg: #0d0a0b; --flaeche: rgba(255, 255, 255, 0.035); --linie: rgba(255, 255, 255, 0.08);
  --text: #f2eeee; --leise: #a39b9c; --rot: #e5484d; --gruen: #46c37b;
  --blau: rgba(70, 170, 215, 0.35); --blau-weich: rgba(70, 170, 215, 0.16);
  --anzeige: 'Anton', 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --eng: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --text-schrift: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
* { box-sizing: border-box; }
html {
  background: var(--bg);
  background-image:
    radial-gradient(1000px 560px at 72% -5%, rgba(64, 150, 195, 0.16), transparent 62%),
    radial-gradient(800px 500px at 15% 105%, rgba(64, 150, 195, 0.08), transparent 60%);
  background-attachment: fixed;
  color: var(--text); font-family: var(--text-schrift);
}
body { margin: 0; min-height: 100dvh; }
.ticker {
  max-width: 1280px; margin: 0 auto;
  padding: max(14px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
}
.lade, .fehler-seite { text-align: center; color: var(--leise); margin-top: 30vh; font-size: 1.1rem; }

/* Kopf */
.kopf { text-align: center; margin-bottom: 14px; }
.kopf .zeile { color: var(--leise); font-size: 0.95rem; }
.status { display: inline-flex; align-items: center; gap: 8px; font-family: var(--eng); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.9rem; margin-top: 6px; }
.punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--rot); box-shadow: 0 0 12px var(--rot); animation: puls 1.4s ease-in-out infinite; }
.punkt.aus { background: var(--leise); box-shadow: none; animation: none; }
@keyframes puls { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .punkt { animation: none; } }

/* Team-Stand */
.stand { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 20px; padding: 16px 12px;
  box-shadow: 0 0 40px var(--blau-weich); }
.team { text-align: center; min-width: 0; }
.team .name { font-family: var(--eng); font-weight: 700; font-size: clamp(1rem, 3.4vw, 1.6rem); overflow-wrap: anywhere; }
.team .zahl { font-family: var(--anzeige); font-size: clamp(3.4rem, 15vw, 7.5rem); line-height: 1; }
.team.vorn .zahl { text-shadow: 0 0 30px var(--blau); }
.doppelpunkt { font-family: var(--anzeige); font-size: clamp(2.4rem, 9vw, 5rem); color: var(--leise); }
.unter { text-align: center; color: var(--leise); margin-top: 8px; font-size: 0.95rem; }

/* Abschnitte */
.raster { display: grid; gap: 16px; margin-top: 16px; }
@media (min-width: 960px) { .raster { grid-template-columns: 1.1fr 0.9fr; align-items: start; } }
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 18px; padding: 14px; }
.karte + .karte { margin-top: 16px; }
.karte h2 { font-family: var(--eng); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 0.95rem; color: var(--leise); margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }

/* Live-Einzel */
.live-einzel { border: 1px solid rgba(229, 72, 77, 0.45); border-radius: 14px; padding: 12px; box-shadow: 0 0 26px rgba(229, 72, 77, 0.15); }
.live-einzel + .live-einzel { margin-top: 12px; }
.le-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--leise); font-size: 0.85rem; margin-bottom: 8px; }
.le-kopf .live-marke { display: inline-flex; align-items: center; gap: 6px; color: var(--rot); font-family: var(--eng); font-weight: 700; letter-spacing: 0.1em; }
.le-spieler { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 6px 0; }
.le-spieler + .le-spieler { border-top: 1px solid var(--linie); }
.le-name { font-weight: 600; font-size: 1.1rem; min-width: 0; overflow-wrap: anywhere; }
.le-name .pos { color: var(--leise); font-family: var(--eng); margin-right: 6px; }
.le-name.dran::before { content: '▶ '; color: var(--rot); }
.le-legs { font-family: var(--eng); font-weight: 700; color: var(--leise); font-size: 1.1rem; }
.le-rest { font-family: var(--anzeige); font-size: clamp(2rem, 8vw, 3.2rem); min-width: 3ch; text-align: right; line-height: 1; }
.le-letzte { color: var(--leise); font-size: 0.85rem; margin-top: 6px; }
.leer { color: var(--leise); margin: 4px 0; }

/* Einzel-Liste */
.durchgang { font-family: var(--eng); color: var(--leise); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; margin: 12px 0 4px; }
.durchgang:first-of-type { margin-top: 0; }
.einzel { display: grid; grid-template-columns: 1fr auto 1fr auto; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid var(--linie); }
.einzel .a { text-align: right; }
.einzel .w { font-weight: 700; }
.einzel .erg { font-family: var(--eng); font-weight: 700; font-size: 1.1rem; min-width: 3.2ch; text-align: center; }
.einzel .chip { font-family: var(--eng); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--linie); color: var(--leise); }
.einzel .chip.live { color: var(--rot); border-color: rgba(229, 72, 77, 0.5); }
.einzel .chip.fertig { color: var(--gruen); border-color: rgba(70, 195, 123, 0.4); }
.einzel .pos { color: var(--leise); font-family: var(--eng); font-size: 0.85rem; }

/* Statistik */
.tabelle { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.tabelle th, .tabelle td { padding: 6px 4px; text-align: right; border-top: 1px solid var(--linie); }
.tabelle th:first-child, .tabelle td:first-child { text-align: left; }
.tabelle th { color: var(--leise); font-family: var(--eng); font-weight: 600; text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.05em; border-top: 0; }
.tabelle .team-zeile td { color: var(--leise); font-family: var(--eng); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding-top: 12px; }
.hl div { padding: 3px 0; }
.motd { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.motd .k { border: 1px solid var(--linie); border-radius: 12px; padding: 10px; }
.motd .t { color: var(--leise); font-family: var(--eng); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; }
.motd .n { font-weight: 700; font-size: 1.1rem; margin: 2px 0; }
.motd .d { color: var(--leise); font-size: 0.85rem; }
.fuss { text-align: center; color: var(--leise); font-size: 0.8rem; margin-top: 18px; }