/* gallery-lightbox.css – Vollbild-Galerie (Lightbox) für Gäste + Dashboard.
   Dunkles Overlay, natives CSS scroll-snap fürs flüssige Wischen. Self-contained,
   kein CDN. Passt auf Handy und Desktop. */

body.lb-open { overflow: hidden; }

.lb {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(8, 10, 9, 0.96);
  display: flex;
  flex-direction: column;
  color: #fff;
  /* dezentes Einblenden */
  animation: lb-fade 0.18s ease;
}
.lb[hidden] { display: none; }
@keyframes lb-fade { from { opacity: 0; } to { opacity: 1; } }

/* Top-Leiste: Zähler links, Aktionen rechts */
.lb__bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: max(10px, env(safe-area-inset-top)) 14px 10px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0));
  pointer-events: none;
}
.lb__counter { font-size: 14px; font-weight: 600; letter-spacing: 0.02em; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.lb__actions { display: flex; gap: 8px; pointer-events: auto; }
.lb__counter { pointer-events: auto; }

/* Bildunterschrift unten (opts.caption), z. B. „Aufgabe: …“. Über einem
   dezenten Verlauf, zentriert, mit Safe-Area gegen die Home-Leiste. */
.lb__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 24px 16px max(14px, env(safe-area-inset-bottom));
  text-align: center;
  font-size: 14px;
  line-height: 1.45;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  pointer-events: none;
}
.lb__caption[hidden] { display: none; }

.lb__btn, .lb__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background-color 0.15s ease, opacity 0.15s ease;
}
.lb__btn { width: 42px; height: 42px; }
.lb__btn:hover, .lb__nav:hover { background: rgba(255, 255, 255, 0.26); }

/* Seiten-Navigation: am Desktop sichtbar, am Handy ist Wischen die Hauptgeste */
.lb__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  z-index: 2;
}
.lb__prev { left: 12px; }
.lb__next { right: 12px; }
.lb__nav:disabled { opacity: 0; pointer-events: none; }
@media (max-width: 640px) {
  .lb__nav { display: none; } /* mobil: nur wischen */
}

/* Der scroll-snap-Track: eine Reihe Vollbild-Slides, nativer Momentum-Swipe */
.lb__track {
  flex: 1;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.lb__track::-webkit-scrollbar { display: none; }

.lb__slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 12px 24px;
  box-sizing: border-box;
}

.lb__media {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
  /* niedrig aufgelöstes Thumb als Platzhalter, bis das Vollbild geladen ist */
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
video.lb__media { width: auto; height: auto; }

.lb__unplayable {
  max-width: 320px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
}
.lb__unplayable p { margin: 0; color: rgba(255, 255, 255, 0.85); }

/* Rückweg zur Kachel-Übersicht (opts.backLabel, nur Gäste-Seite): gut
   erreichbare Pille unten in der Mitte – das kleine X oben rechts allein
   wirkte wie eine Sackgasse ("man muss durch alle Bilder wischen"). */
.lb__overview {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 18px;
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.lb__overview:hover { background: rgba(255, 255, 255, 0.28); }
.lb__overview[hidden] { display: none; }
/* Mit sichtbarer Pille unten mehr Platz reservieren, damit sie weder Bild
   noch Video-Bedienelemente verdeckt. */
.lb--overview .lb__slide { padding-bottom: 82px; }

/* Untere Aktionsleiste für Host-Buttons (opts.actions): Herz/Freigeben/
   Ausblenden wohnen seit 25.09. HIER statt in der Kopfleiste – bei 390 px
   liefen dort Zähler + Text-Buttons + Download + X über den Rand. Oben
   bleiben nur Zähler, Download und Schließen. Auf der Gäste-Seite (backLabel
   gesetzt -> .lb--overview) rückt die Leiste ÜBER die "Zur Übersicht"-Pille,
   damit sich beide nie überlappen. */
.lb__actionbar {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  /* Der Streifen selbst fängt keine Tipps ab, nur die Buttons darin. */
  pointer-events: none;
}

.lb__actionbar > * {
  pointer-events: auto;
}

.lb--overview .lb__actionbar {
  bottom: calc(max(14px, env(safe-area-inset-bottom)) + 56px);
}

/* Platz fürs Bild reservieren, wenn unten Aktionen (und ggf. die Pille)
   stehen – nichts verdeckt Foto oder Video-Bedienelemente. */
.lb--hostactions .lb__slide { padding-bottom: 84px; }
.lb--hostactions.lb--overview .lb__slide { padding-bottom: 138px; }
/* Bildunterschrift (opts.caption) über die Aktionsleiste heben. */
.lb--hostactions .lb__caption {
  padding-bottom: calc(max(14px, env(safe-area-inset-bottom)) + 58px);
}

@media (prefers-reduced-motion: reduce) {
  .lb { animation: none; }
  .lb__track { scroll-behavior: auto; }
}