/* JETZT.GOLF – gemeinsame Webcam-Styles (Status-Übersicht + Club-Detailseite).
   Nutzt die geteilten Design-Tokens (--linie, --text, --grau, --jg-r-sm). */

.webcams { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--linie); }
.webcams[hidden] { display: none; }

.webcams-titel { margin: 0 0 14px; font-size: 16px; font-weight: 600; color: var(--text); }
.webcams-titel.klickbar { cursor: pointer; user-select: none; }
/* Bei umschaltbarem Layout ist auch das Bild anklickbar (gleiches Umschalten). */
.webcam-grid.klickbar .webcam-img { cursor: pointer; }
.webcams-hint { font-size: 13px; font-weight: 400; color: var(--grau); }

.webcam-grid { display: grid; gap: 18px; }
.webcam-grid.neben { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.webcam-grid.unter { grid-template-columns: 1fr; }
/* Trennstrich zwischen den Kameras (nur untereinander), wie die Linien oben auf der Seite. */
.webcam-grid.unter .webcam + .webcam { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--linie); }

.webcam { margin: 0; }
/* Bezeichnung im gleichen Textformat wie die Sektions-Überschrift, „Stand" dezent daneben. */
.webcam-kopf { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.webcam-name { font-size: 16px; font-weight: 600; color: var(--text); }
.webcam-stand { font-size: 13px; color: var(--grau); }

/* Der Zeitstempel ist zugleich Statusfeld der Kamera: grün = liefert live, rot = ausgefallen.
   Gleiche Form, Größe und Typografie, damit beides als ein Element gelesen wird und nur die
   Farbe die Aussage trägt. Radius wie bei den Buttons (--jg-r), nicht als Pille. */
.webcam-stand-live,
.webcam-stand-offline,
.webcam-stand-unbekannt {
  color: #fff;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: var(--jg-r);
}

/* Kamera liefert keinen Aufnahmezeitpunkt: neutral grau statt einer erfundenen Uhrzeit.
   Weder Entwarnung (grün) noch Alarm (rot) – es ist schlicht unbekannt. */
.webcam-stand-unbekannt { background: var(--jg-muted); }

/* Kamera liefert aktuell – ruhig, ohne Animation. */
.webcam-stand-live { background: var(--jg-green); }

/* Kamera ausgefallen: der Zeitpunkt gehört zum letzten verfügbaren Bild. Zusätzlich ein
   langsames An- und Abschwellen (kein hartes Blinken), damit niemand ein stehendes Bild
   für den aktuellen Platzzustand hält. */
.webcam-stand-offline {
  background: var(--jg-red);
  animation: webcam-puls 2.6s ease-in-out infinite;
}

@keyframes webcam-puls {
  0%, 100% { opacity: 1; }
  50%      { opacity: .45; }
}

/* Nutzer, die Bewegung reduzieren möchten (Betriebssystem-Einstellung), bekommen die
   Hervorhebung ohne Animation – die Farbe allein trägt die Aussage. */
@media (prefers-reduced-motion: reduce) {
  .webcam-stand-offline { animation: none; }
}
.webcam-img {
  display: block; width: 100%; height: auto; border-radius: var(--jg-r-sm);
  background: var(--linie); aspect-ratio: 16 / 9; object-fit: cover;
}
.webcam-weg {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 16 / 9; border-radius: var(--jg-r-sm);
  background: var(--linie); color: var(--grau); font-size: 13px; text-align: center;
}