/* Ergänzende Styles, die mit Utility-Klassen allein unpraktisch wären. */

html {
  scroll-behavior: smooth;
  /* Sprungmarken (Menü-Links wie info.html#bezirke-heading) landen unterhalb
     der fest stehenden Kopfleiste statt darunter versteckt – die Höhe setzt
     js/main.js (aktualisiereSprungmarken). */
  scroll-padding-top: var(--kopf-hoehe, 0px);
}

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Kein Aufblitzen der Beispieldaten aus js/data.js: Der Inhaltsbereich
   bleibt unsichtbar, bis echte Daten da sind (gemerkter Stand aus dem
   Browser oder frisch aus der Cloud) – dann setzt js/backend.js die Klasse
   "dm-bereit". Notfall-Absicherung: spätestens nach 4 Sekunden wird der
   Inhalt trotzdem eingeblendet (z. B. ohne Internet oder bei einem Fehler). */
html:not(.dm-bereit) main {
  visibility: hidden;
  animation: dm-notfall-einblenden 0s linear 4s forwards;
}
@keyframes dm-notfall-einblenden {
  to { visibility: visible; }
}

/* Nicht freigegebene Seite (Admin → Sichtbarkeit): Inhalt verbergen,
   ohne die eigenen hidden-Klassen der Seite zu überschreiben (js/main.js). */
.dm-gesperrt {
  display: none !important;
}

/* Sanfter Schatten unter der Navigation, sobald gescrollt wird */
header.is-scrolled {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}


/* Pulsierender Punkt für LIVE-Kennzeichnungen */
.live-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background-color: #ef4444;
  animation: live-pulse 1.4s ease-in-out infinite;
}

@keyframes live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}

/* Blinkendes "TOOOOOOOOR"-Overlay in der Vollbild-Anzeige (js/tv-anzeige.js) */
@keyframes tor-blink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.06); }
}
.tor-flash-overlay.aktiv {
  display: flex;
  animation: tor-blink 0.5s ease-in-out infinite;
}

/* Blinkendes "Tabellenupdate"-Overlay bei geänderter Live-Tabelle (js/tv-anzeige.js) */
.tabelle-update-overlay.aktiv {
  display: flex;
  animation: tor-blink 0.5s ease-in-out infinite;
}

/* Bildschirmfüllender Bereitmach-Hinweis bei 80%/90% der Spielzeit (js/tv-anzeige.js) */
@keyframes bereitschaft-puls {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}
.bereitschaft-puls {
  animation: bereitschaft-puls 1.4s ease-in-out infinite;
}

/* Pulsierendes Logo oben rechts in der Vollbild-Anzeige (js/tv-anzeige.js) */
@keyframes logo-pulse-tv {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.08); opacity: 0.85; }
}
.tv-logo-pulse {
  animation: logo-pulse-tv 2.2s ease-in-out infinite;
}

/* Flip-Animation für den Countdown auf der Startseite (js/countdown.js):
   jede Zahl "kippt" kurz nach vorne, sobald sich ihr Wert ändert, statt
   einfach zu springen. Die Zelle selbst braucht Perspektive, damit die
   3D-Drehung der Zahl sichtbar wird. */
#countdown > div {
  perspective: 300px;
}
@keyframes cd-flip {
  0% { transform: rotateX(90deg); opacity: 0.3; }
  100% { transform: rotateX(0deg); opacity: 1; }
}
.cd-flip {
  display: inline-block;
  transform-origin: 50% 50%;
  animation: cd-flip 0.35s ease-out;
}

/* "Weitere Neuigkeiten anzeigen"-Aufklapper auf der Startseite (js/dashboard.js):
   eigener Pfeil statt des nativen Dreiecks vor <summary> (Tailwinds
   list-none deckt in Safari nur list-style, nicht den WebKit-eigenen
   Marker ab). */
.news-toggle > summary::-webkit-details-marker {
  display: none;
}

/* Schlanke Scrollbar für horizontal scrollbare Bereiche (z. B. Filter-Tabs) */
.scroll-thin::-webkit-scrollbar {
  height: 4px;
}
.scroll-thin::-webkit-scrollbar-thumb {
  background-color: #d1d5db;
  border-radius: 9999px;
}

/* Druckansicht (z. B. Spielplan als PDF speichern über den Browser-Druckdialog):
   nur den eigentlichen Inhalt zeigen, Sidebar/Kopf/Fuß/Bedienelemente ausblenden. */
@media print {
  #sidebar,
  #sidebar-overlay,
  header,
  footer,
  .no-print {
    display: none !important;
  }
  .lg\:ml-72 {
    margin-left: 0 !important;
  }
  body {
    background: #fff !important;
  }
  main {
    max-width: none !important;
  }
  .shadow-sm,
  .shadow {
    box-shadow: none !important;
  }
  section {
    break-inside: avoid;
  }
}