.live-image,
.camera-thumb,
.video-player {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #000;
}

/* Live-Bild im Vollbild: ganzer Bildschirm, schwarzer Rand; Klick schließt */
.live-image:fullscreen,
.live-image.live-fullscreen {
  width: 100vw;
  height: 100vh;
  aspect-ratio: auto;
  cursor: zoom-out;
}
.live-image.live-fullscreen {
  position: fixed;
  inset: 0;
  height: 100dvh;
  z-index: 2000;
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bs-secondary);
}
.status-dot.ok { background: var(--bs-success); }
.status-dot.warn { background: var(--bs-warning); }
.status-dot.bad { background: var(--bs-danger); }

.stat-value { font-size: 1.25rem; font-weight: 600; }
.stat-label { font-size: .85rem; color: var(--bs-secondary-color); }

/* Kameraseite: der heutige Tag neben dem Live-Bild, Zeilen teilen sich die Höhe des Live-Bilds */
.timeline { display: flex; flex-direction: column; gap: .5rem; height: 100%; }
.timeline-item { flex: 1; flex-direction: row; align-items: center; gap: .75rem; padding: .5rem; min-height: 4.25rem;
  text-decoration: none; }
.timeline-running { border-color: var(--bs-primary-border-subtle); }
.timeline-item.active { border-color: var(--bs-primary); box-shadow: inset 0 0 0 1px var(--bs-primary);
  background-color: var(--bs-primary-bg-subtle); }
.timeline-thumb { position: relative; flex: 0 0 auto; width: clamp(5.5rem, 8.5vw, 9rem); aspect-ratio: 16 / 9;
  border-radius: .375rem; overflow: hidden; background: #000; display: flex; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, .85); font-size: 1.5rem; }
.timeline-thumb img { width: 100%; height: 100%; object-fit: cover; }
.timeline-thumb .bi-play-circle-fill { position: absolute; text-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
.timeline-thumb.timeline-empty { background: transparent; border: 1px dashed var(--bs-border-color);
  color: var(--bs-secondary-color); }
.timeline-text { font-size: .875rem; line-height: 1.35; min-width: 0; }

/* Kennzahlen, Wetter und Sicht als Chips unter dem Live-Bild */
.info-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem; font-size: .875rem;
  border: 1px solid var(--bs-border-color); border-radius: 50rem; background: var(--bs-body-bg); white-space: nowrap; }
.info-chip .bi { color: var(--bs-primary); }

/* Einzelbilder: ganzes Bild auch auf dem Laptop ohne Scrollen */
.browse-image { display: block; width: 100%; aspect-ratio: 16 / 9; max-height: calc(100dvh - 15rem); object-fit: contain;
  background: #000; }

/* Einstellungs-Cards: beim Hovern wird der Hintergrund hervorgehoben */
.settings-card { color: var(--bs-body-color); transition: background-color .15s, border-color .15s; }
.settings-card:hover { background-color: var(--bs-primary-bg-subtle); border-color: var(--bs-primary-border-subtle); }
.settings-card-icon { font-size: 1.75rem; color: var(--bs-primary); line-height: 1; }

/* Tom Select an Bootstrap-Darkmode anpassen */
[data-bs-theme="dark"] .ts-dropdown,
[data-bs-theme="dark"] .ts-control,
[data-bs-theme="dark"] .ts-control input { background-color: var(--bs-body-bg); color: var(--bs-body-color); }
[data-bs-theme="dark"] .ts-dropdown .active { background-color: var(--bs-primary-bg-subtle); color: var(--bs-body-color); }

/* Galerie */
.gallery-card { border: 1px solid var(--bs-border-color); background: var(--bs-body-bg); color: var(--bs-body-color); }
.gallery-card:hover { background-color: var(--bs-primary-bg-subtle); border-color: var(--bs-primary-border-subtle); }
.gallery-poster { position: relative; display: block; aspect-ratio: 16 / 9; background: #000; }
.gallery-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Galerie, Admin: Knöpfe oben rechts auf dem Vorschaubild, verborgene Einträge ausgegraut */
.gallery-admin { position: absolute; top: .5rem; right: 1.25rem; z-index: 2; opacity: .85; }
.gallery-admin:hover { opacity: 1; }
.gallery-hidden-badge { position: absolute; top: .65rem; left: 1.25rem; z-index: 2; display: none; }
.gallery-item.is-hidden .gallery-hidden-badge { display: inline-block; }
.gallery-item.is-hidden .gallery-card { opacity: .5; }
.gallery-poster .bi { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 3rem; color: rgba(255, 255, 255, .85); text-shadow: 0 2px 8px rgba(0, 0, 0, .5); }

/* App-Darstellung (PWA): Statusleiste oben, Leiste unten wie in einer iPhone-App */
.app-topbar { padding-top: calc(var(--bs-navbar-padding-y) + env(safe-area-inset-top)); }
.brand-icon { width: 28px; height: 28px; border-radius: 7px; vertical-align: -7px; }
.app-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
  display: flex; justify-content: space-around;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  background: rgba(var(--bs-body-bg-rgb), .85); backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--bs-border-color);
}
.app-tabbar a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: var(--bs-secondary-color); text-decoration: none; font-size: .68rem;
}
.app-tabbar a .bi { font-size: 1.45rem; line-height: 1; }
.app-tabbar a.active { color: var(--bs-primary); }
@media (max-width: 767.98px) {
  main.container { padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important; }
  .notyf { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
}

/* Panorama: volle Höhe, waagrecht wischen */
.panorama-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; background: #000; }
.panorama-scroll img { display: block; height: min(60vh, 420px); width: auto; max-width: none; }

/* Panorama entsteht: Teilbilder erscheinen nacheinander im Streifen */
.pano-strip { display: flex; gap: 2px; background: #000; position: relative; overflow: hidden; }
.pano-slot { flex: 1; aspect-ratio: 16 / 9; background: var(--bs-secondary-bg); position: relative; overflow: hidden; }
.pano-slot img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transform: scale(1.08);
  transition: opacity .7s ease, transform .9s ease; }
.pano-slot.loaded img { opacity: 1; transform: scale(1); }
.pano-slot .pano-slot-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--bs-secondary-color); font-size: .8rem; }
.pano-slot.loaded .pano-slot-label { display: none; }
.pano-slot.active { box-shadow: inset 0 0 0 3px var(--bs-primary); animation: pano-pulse 1.2s ease-in-out infinite; }
@keyframes pano-pulse { 50% { box-shadow: inset 0 0 0 3px transparent; } }
.pano-strip.stitching::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
  background-size: 200% 100%; animation: pano-shimmer 1.4s linear infinite; }
@keyframes pano-shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }

/* Öffentliche Seite: keine Leiste unten */
@media (max-width: 767.98px) {
  main.container.public-page { padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)) !important; }
}

/* Galerie: Vollbild-Betrachter (immer dunkel, unabhängig vom Farbschema) */
.viewer { position: fixed; inset: 0; z-index: 1080; background: #000; color: #fff; display: flex; flex-direction: column; }
.viewer-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.viewer-video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.viewer-panorama { width: 100%; height: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; cursor: grab;
  display: flex; align-items: center; }
/* volle Höhe; im Hochformat (Handy) niedriger, sonst wäre das Panorama mehrere Bildschirme breit */
.viewer-panorama img { display: block; height: min(100%, max(50vw, 360px)); width: auto; max-width: none; margin: 0 auto; }
.viewer-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .06); }
.viewer-muted { color: rgba(255, 255, 255, .65); }
.viewer-button { position: absolute; z-index: 2; border: 0; color: #fff; background: rgba(0, 0, 0, .45);
  width: 3rem; height: 3rem; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; transition: background-color .15s; }
.viewer-button:hover, .viewer-button:focus-visible { background: rgba(255, 255, 255, .25); }
.viewer-button:disabled { opacity: .25; }
.viewer-close { top: calc(.75rem + env(safe-area-inset-top)); right: .75rem; }
.viewer-prev, .viewer-next { top: 50%; transform: translateY(-50%); }
.viewer-prev { left: .75rem; }
.viewer-next { right: .75rem; }
.min-w-0 { min-width: 0; }