/* ═══════════════════════════════════════════
   DEINERT IMMOBILIEN – OBJEKT-GALERIE
   Nachtrag zu css/style.css für die zweischichtige
   Slideshow auf der Detailseite.
   ═══════════════════════════════════════════ */

/* Zwei Ebenen: darunter die kleine Variante (sofort da),
   darüber die große Variante, die weich darüber einschwebt.
   Mobil bleibt alles wie gehabt (vollflächig), ab 601px zeigt
   die Bühne das ganze Foto – cover hat Hochformatbilder in das
   Feld hineingezoomt und die Kleinvorlage hochskaliert. */
.detail-stage .detail-stage-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.detail-stage.detail-stage-empty { background: var(--bg-soft); }

@media (min-width: 601px) {
  .detail-stage {
    aspect-ratio: 4 / 3;
    background: #12161a;
  }
  .detail-stage .detail-stage-layer { object-fit: contain; }
}
.detail-stage-under { z-index: 0; }
.detail-stage-main {
  z-index: 1;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.detail-stage-main.is-ready { opacity: 1; }

/* Ladeanzeige, solange das große Bild noch fehlt */
.detail-stage-spinner {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border: 3px solid rgba(255, 255, 255, 0.55);
  border-top-color: var(--accent);
  border-radius: 50%;
  opacity: 0;
  visibility: hidden;
  animation: gallery-spin 0.8s linear infinite;
  transition: opacity 0.2s ease;
}
.detail-stage-spinner.is-active { opacity: 1; visibility: visible; }
@keyframes gallery-spin { to { transform: rotate(360deg); } }

/* Bedienelemente immer über den Bildebenen */
.detail-stage .detail-image-kind,
.detail-stage .detail-image-caption,
.detail-stage .detail-nav,
.detail-stage .detail-counter { z-index: 3; }

/* Miniaturen */
.detail-thumb { transition: border-color 0.2s ease, opacity 0.2s ease; }
.detail-thumb img { transition: opacity 0.2s ease; }
.detail-thumb:hover img { opacity: 0.92; }

/* Klick aufs Foto */
.detail-stage { cursor: zoom-in; }

/* ── VOLLBILD (LIGHTBOX) ── */
body.lightbox-open { overflow: hidden; }

.lightbox[hidden] { display: none; }
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 8000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3.5rem 1.2rem;
  background: rgba(12, 14, 12, 0.95);
  animation: lightbox-in 0.22s ease;
}
@keyframes lightbox-in { from { opacity: 0; } to { opacity: 1; } }

.lightbox-frame {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.lightbox-img.is-ready { opacity: 1; }

.lightbox-spinner {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border: 3px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  opacity: 0;
  visibility: hidden;
  animation: gallery-spin 0.8s linear infinite;
  transition: opacity 0.2s ease;
}
.lightbox-spinner.is-active { opacity: 1; visibility: visible; }

.lightbox-close,
.lightbox-nav {
  position: absolute;
  z-index: 2;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease;
}
.lightbox-close:hover,
.lightbox-nav:hover { background: rgba(255, 255, 255, 0.26); }
.lightbox-close:focus-visible,
.lightbox-nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.lightbox-close {
  top: 1.1rem;
  right: 1.1rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 1.7rem;
  line-height: 1;
}
.lightbox-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  font-size: 2rem;
  line-height: 1;
}
.lightbox-nav.prev { left: 1rem; }
.lightbox-nav.next { right: 1rem; }

.lightbox-counter {
  position: absolute;
  right: 1.3rem;
  bottom: 1.1rem;
  z-index: 2;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.85);
}
.lightbox-caption:empty { display: none; }
.lightbox-caption {
  position: absolute;
  left: 1.3rem;
  bottom: 1.1rem;
  z-index: 2;
  max-width: min(60%, 34rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 700px) {
  .lightbox { padding: 4.5rem 0.6rem 3.5rem; }
  .lightbox-nav { width: 42px; height: 42px; font-size: 1.6rem; }
  .lightbox-nav.prev { left: 0.4rem; }
  .lightbox-nav.next { right: 0.4rem; }
  .lightbox-caption { max-width: 55%; font-size: 0.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox { animation: none; }
  .lightbox-img { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .detail-stage-main { transition: none; }
  .detail-stage-spinner { animation-duration: 2s; }
}