/* Live-HLS-Webcam-Player — Video.js + videojs-theme-kit (Skin "Zen"), Landhaus-Optik */

.webcam-player-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
}

.webcam-player-wrap .video-js.webcam-player-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Bewusst KEINE Akzentfarbe (kein currentColor-Override) — Player soll
     klassisch/neutral aussehen, nicht in Landhaus-Orange. */
}

/* Video.js' eigenes technisches Fehler-Overlay nie zeigen — wir haben ein
   eigenes, freundlicheres Fallback-Bild (.webcam-player-fallback) dafuer. */
.webcam-player-wrap .vjs-error-display {
  display: none !important;
}

/* Teilen-Button in der Controlbar — kein passendes Icon im Video.js-
   Iconfont vorhanden, daher eigenes SVG (via JS in webcam-player.js
   ins .vjs-icon-placeholder eingesetzt) statt Emoji — sieht auf jedem
   Betriebssystem/Browser gleich aus, wirkt professioneller als Emoji. */
.webcam-player-wrap .vjs-share-button .vjs-icon-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}

.webcam-player-wrap .vjs-share-button .vjs-icon-placeholder svg {
  width: 1.2em;
  height: 1.2em;
  color: #fff;
}

/* Standbild ist von Anfang an sichtbar (wie ein Poster) — nicht erst nach
   gescheiterten Retries. Verschwindet erst, sobald der Stream wirklich
   spielt (.stream-ready). So sieht niemand einen leeren/schwarzen Bereich,
   egal ob der Stream sofort laedt oder erst nach ein paar Sekunden. */
.webcam-player-fallback {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 5;
}

.webcam-player-wrap.stream-ready .webcam-player-fallback {
  display: none;
}

.webcam-player-fallback img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Hinweistext nur im echten Fehlerfall (nach allen Retries) — beim normalen
   Laden bleibt das Standbild einfach ohne Text stehen. */
.webcam-player-fallback-text {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  margin: 0;
  padding: 8px 16px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 0.85rem;
  border-radius: 8px;
  white-space: nowrap;
}

.webcam-player-wrap.stream-failed .webcam-player-fallback-text {
  display: block;
}

@media (max-width: 767px) {
  .webcam-player-fallback-text {
    font-size: 0.75rem;
    white-space: normal;
    text-align: center;
    max-width: 90%;
  }
}

/* Wetter-Overlay-Container — Inhalt kommt von WeatherOverlayWidget.mount()
   (georg.praegant.net/static/js/weather-overlay-widget.js), referenziert
   statt kopiert. Positionierung/Chip-Look ist unser CSS, Struktur/Icons/
   Uhr kommen aus dem Widget-Script. */
.webcam-player-overlay {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 6;
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  color: #fff;
  font-size: 0.8rem;
  transition: bottom 0.2s ease;
}

/* .controls-visible wird per JS (webcam-player.js, useractive/userinactive)
   auf .webcam-player-wrap gesetzt, solange die Video.js-Controlbar sichtbar
   ist — Chip weicht nur dann nach oben aus, sonst zieht er wieder runter. */
.webcam-player-wrap.controls-visible .webcam-player-overlay {
  bottom: 52px; /* Platz für die Video.js-Controlbar lassen (skin_slate: 40px) */
}

.webcam-player-overlay .weather-overlay-widget-row {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.webcam-player-overlay .weather-overlay-widget-datetime {
  font-size: 0.72em;
  opacity: 0.85;
  margin-bottom: 2px;
}

.webcam-player-overlay .weather-overlay-widget-icon svg {
  width: 16px;
  height: 16px;
  stroke: #fff;
  fill: none;
  stroke-width: 1.8;
  flex: 0 0 auto;
}

@media (max-width: 767px) {
  .webcam-player-overlay {
    font-size: 0.7rem;
    left: 8px;
    bottom: 8px;
  }
  .webcam-player-wrap.controls-visible .webcam-player-overlay {
    bottom: 46px;
  }
}

/* Auf echten Handy-Breiten (nicht nur Tablet) wirkte der Chip trotz obigem
   Breakpoint noch unverhaeltnismaessig gross (Mathias-Report vom iPhone,
   siehe INBOX.md Nachtrag 2026-08-24). Zusaetzlich verkleinert statt nur
   die Schrift zu reduzieren. */
@media (max-width: 480px) {
  .webcam-player-overlay {
    padding: 4px 8px;
    font-size: 0.62rem;
  }
  .webcam-player-overlay .weather-overlay-widget-icon svg {
    width: 13px;
    height: 13px;
  }
}

/* Branding — oben RECHTS (Mathias-Wunsch: unten sollte frei bleiben fuer
   Wetter-Chip + Controlbar, keine Kollisionsgefahr mit denen dort oben,
   deshalb auch keine controls-visible-Ausweich-Logik mehr noetig). */
.webcam-player-brand {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  color: #fff;
  font-size: 0.8rem;
  white-space: nowrap;
}

.webcam-player-brand-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e5484d;
  flex: 0 0 auto;
}

@media (max-width: 767px) {
  .webcam-player-brand {
    font-size: 0.7rem;
    right: 8px;
    top: 8px;
  }
}

/* Analog zum Wetter-Overlay-Fix: auf echten Handy-Breiten stossen Wetter-
   Chip (unten links) und Branding (unten rechts) trotz getrennter Ecken
   zusammen, weil beide white-space:nowrap sind (Mathias-Report,
   Ueberlagerung auf iPhone). Gleiche Verkleinerung wie beim Wetter-Chip. */
@media (max-width: 480px) {
  .webcam-player-brand {
    padding: 4px 8px;
    font-size: 0.62rem;
    gap: 4px;
  }
  .webcam-player-brand-dot {
    width: 6px;
    height: 6px;
  }
}

/* Teilen-Button sitzt jetzt IM Player (Video.js-Controlbar, siehe
   .vjs-share-button weiter unten) — dieses Panel ist nur noch das
   Fallback-Popover mit den Kanal-Buttons, kein eigener Toggle mehr. */
.webcam-share-generator {
  margin-top: 12px;
}

.webcam-share-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.webcam-share-label {
  font-size: 0.85rem;
  color: #666;
  margin-right: 4px;
}

/* Salients eigenes CSS ueberschreibt das UA-Default [hidden] { display:none }
   fuer <div> mit hoeherer Spezifitaet — hier explizit erzwingen. */
.webcam-share-panel[hidden] {
  display: none;
}

.webcam-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  color: #333;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.webcam-share-btn:hover {
  border-color: #f6653c;
  color: #f6653c;
}

.webcam-share-btn-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

.webcam-share-copied {
  font-size: 0.85rem;
  color: #2e9e5b;
  font-weight: 600;
}

/* Embed-Code — jetzt Teil der Teilen-Box statt eigener Box (Mathias'
   Wunsch: "die iframe einbindung muss auch unter der shared funktion
   rein"). .webcam-share-embed-toggle nutzt bereits .webcam-share-btn +
   .webcam-share-btn-icon fuer die Optik, hier nur das aufklappbare Panel. */
.webcam-embed-generator-panel {
  margin-top: 12px;
  padding: 16px;
  border-radius: 8px;
  background: #f7f7f7;
  max-width: 800px;
  width: 100%;
}

/* Salients eigenes CSS ueberschreibt das UA-Default [hidden] { display:none }
   fuer <div> mit hoeherer Spezifitaet — hier explizit erzwingen. */
.webcam-embed-generator-panel[hidden] {
  display: none;
}

.webcam-embed-generator-panel p {
  margin: 0 0 10px;
  font-size: 0.85rem;
  color: #666;
}

.webcam-embed-generator-code {
  width: 100%;
  min-height: 130px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  color: #333;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  line-height: 1.4;
  resize: vertical;
  box-sizing: border-box;
}

.webcam-embed-generator-copy {
  margin-top: 10px;
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  background: #f6653c;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.webcam-embed-generator-copy:hover {
  background: #e0552e;
}

.webcam-embed-generator-copied {
  margin-left: 10px;
  font-size: 0.85rem;
  color: #2e9e5b;
  font-weight: 600;
}