/*
 * Coverflow + Lightbox — Wiederverwendbare Galerie-Components
 * Verwendet auf: referenzen.html, ofen-modernisieren.html, ofen-altbau.html,
 *                ofen-neubau.html, referenzen/kachelofen-prien.html, etc.
 *
 * Ausnahme von der Inline-CSS-Konvention (analog assets/fonts/fonts.css):
 * Coverflow ist eine stabile, eigenständige Component — Duplikation auf
 * 5+ Seiten wäre Wartungsrisiko. Externe Datei = einmalige Pflege.
 *
 * HTML-Markup:
 *   <div class="coverflow" data-coverflow>
 *     <button class="cf-arrow cf-arrow-prev" aria-label="Vorheriges Bild">…</button>
 *     <div class="cf-stage">
 *       <div class="cf-track">
 *         <figure class="cf-item"><img src="…" alt="…"><figcaption>…</figcaption></figure>
 *         …
 *       </div>
 *     </div>
 *     <button class="cf-arrow cf-arrow-next" aria-label="Nächstes Bild">…</button>
 *     <div class="cf-bullets" role="tablist"></div>
 *   </div>
 */

/* ─── COVERFLOW ───────────────────────────────────────────── */
.coverflow {
  position: relative;
  width: 100%;
  padding: 32px 0;
  user-select: none;
  --cf-item-w: 480px;
  --cf-item-h: 360px;
  --cf-tilt: 25deg;
  --cf-scale: 0.78;
  --cf-spacing: 280px;
}

.cf-stage {
  position: relative;
  width: 100%;
  height: calc(var(--cf-item-h) + 80px);
  perspective: 1400px;
  overflow: hidden;
}

.cf-track {
  position: relative;
  height: 100%;
  transform-style: preserve-3d;
}

.cf-item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--cf-item-w);
  height: var(--cf-item-h);
  margin: 0;
  transform: translate(-50%, -50%) translateX(0) rotateY(0deg) scale(var(--cf-scale));
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 0.55s ease,
              filter 0.55s ease;
  cursor: pointer;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  opacity: 0.45;
  filter: brightness(0.75) saturate(0.85);
  pointer-events: none;
  background: var(--bg2, #131210);
}

.cf-item img,
.cf-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.cf-item video {
  object-fit: contain;
  background: var(--bg, #0C0B09);
}

/* Modifier: Coverflow ohne Crop (z.B. Impressionen mit Original-Aspect) */
.coverflow[data-fit="contain"] .cf-item img,
.coverflow[data-fit="contain"] .cf-item video {
  object-fit: contain;
  background: var(--bg, #0C0B09);
}

.cf-item figcaption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 14px 18px;
  background: linear-gradient(to top, rgba(12, 11, 9, 0.92) 0%, rgba(12, 11, 9, 0) 100%);
  color: var(--text, #F0EAE0);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* Active = zentral, groß, ohne Tilt, klickbar */
.cf-item.cf-active {
  transform: translate(-50%, -50%) rotateY(0) scale(1);
  opacity: 1;
  filter: none;
  pointer-events: auto;
  z-index: 4;
  cursor: zoom-in;
}
.cf-item.cf-active figcaption { opacity: 1; }
.cf-item.cf-active:hover { box-shadow: 0 16px 50px rgba(0, 0, 0, 0.6); }

/* Side positions (1 step out) */
.cf-item.cf-prev,
.cf-item.cf-next {
  opacity: 0.7;
  filter: brightness(0.85);
  pointer-events: auto;
  z-index: 3;
  cursor: pointer;
}
.cf-item.cf-prev {
  transform: translate(-50%, -50%) translateX(calc(-1 * var(--cf-spacing))) rotateY(var(--cf-tilt)) scale(var(--cf-scale));
}
.cf-item.cf-next {
  transform: translate(-50%, -50%) translateX(var(--cf-spacing)) rotateY(calc(-1 * var(--cf-tilt))) scale(var(--cf-scale));
}

/* Far positions (2 steps out) */
.cf-item.cf-far-prev,
.cf-item.cf-far-next {
  opacity: 0.3;
  z-index: 2;
}
.cf-item.cf-far-prev {
  transform: translate(-50%, -50%) translateX(calc(-2 * var(--cf-spacing))) rotateY(var(--cf-tilt)) scale(calc(var(--cf-scale) * 0.85));
}
.cf-item.cf-far-next {
  transform: translate(-50%, -50%) translateX(calc(2 * var(--cf-spacing))) rotateY(calc(-1 * var(--cf-tilt))) scale(calc(var(--cf-scale) * 0.85));
}

/* Hidden (off-screen) */
.cf-item.cf-hidden {
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transform: translate(-50%, -50%) translateX(0) rotateY(0) scale(0.5);
}

/* Arrows */
.cf-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid var(--border, rgba(196, 168, 76, 0.25));
  background: rgba(12, 11, 9, 0.7);
  color: var(--gold, #C4A84C);
  font-size: 1.4rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  backdrop-filter: blur(8px);
}
.cf-arrow:hover {
  background: var(--gold, #C4A84C);
  color: var(--bg, #0C0B09);
  border-color: var(--gold, #C4A84C);
  transform: translateY(-50%) scale(1.05);
}
.cf-arrow:focus-visible {
  outline: 3px solid var(--gold-light, #DFC882);
  outline-offset: 3px;
}
.cf-arrow-prev { left: 24px; }
.cf-arrow-next { right: 24px; }

/* Bullets */
.cf-bullets {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.cf-bullet {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--gold-dim, #8A7230);
  background: transparent;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
  padding: 0;
}
.cf-bullet:hover { background: var(--gold-dim, #8A7230); }
.cf-bullet.is-active {
  background: var(--gold, #C4A84C);
  border-color: var(--gold, #C4A84C);
  transform: scale(1.3);
}
.cf-bullet:focus-visible {
  outline: 2px solid var(--gold-light, #DFC882);
  outline-offset: 3px;
}

/* Status (for screen-readers) */
.cf-status {
  position: absolute;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ─── Mobile-Loop: Clones links/rechts (nur auf Mobile sichtbar) ──── *
 * Damit auf Mobile am Anfang/Ende keine leere Edge-Padding zu sehen
 * ist, klont JS das letzte Item vor dem ersten und das erste Item
 * nach dem letzten. Auf Desktop bleiben Clones via display:none
 * versteckt, damit das 3D-Layout nicht beeinflusst wird.
 */
.cf-clone { display: none; }

/* ─── Mobile: native horizontal scroll strip ──────────────── *
 * Auf Mobile (<= 768px) wird der Coverflow zu einem flat
 * horizontal-scrollbaren Strip mit scroll-snap. 3D-Tilt aus,
 * alle Items sichtbar in einer Reihe — User scrollt per Touch
 * oder Swipe nativ. Pfeile springen weiter Item-für-Item.
 */
@media (max-width: 768px) {
  .coverflow {
    --cf-item-w: 260px;
    --cf-item-h: 200px;
    padding: 12px 0;
  }
  .cf-stage {
    height: calc(var(--cf-item-h) + 40px);
    perspective: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0 calc(50% - var(--cf-item-w) / 2); /* Edge-Padding für scroll-snap-center */
    mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
  }
  .cf-stage::-webkit-scrollbar { display: none; }
  .cf-track {
    position: static;
    height: 100%;
    transform-style: flat;
    display: flex;
    align-items: center;
    gap: 14px;
    width: max-content;
  }
  .cf-item {
    position: static !important;
    flex-shrink: 0;
    width: var(--cf-item-w);
    height: var(--cf-item-h);
    transform: none !important;
    opacity: 0.85 !important;
    filter: none !important;
    pointer-events: auto !important;
    scroll-snap-align: center;
    transition: opacity 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  }
  .cf-item.cf-active {
    opacity: 1 !important;
    transform: scale(1.02) !important;
    box-shadow: 0 16px 48px rgba(196, 168, 76, 0.28);
  }
  .cf-item figcaption { opacity: 1; }
  .cf-arrow { display: none; }
  /* Clones auf Mobile sichtbar machen — verstecken die leere Edge-Padding */
  .cf-clone { display: revert; }
}
@media (max-width: 420px) {
  .coverflow {
    --cf-item-w: 220px;
    --cf-item-h: 170px;
  }
}

/* Reduced Motion: kein Tilt, einfaches Crossfade */
@media (prefers-reduced-motion: reduce) {
  .cf-item {
    transition: opacity 0.3s ease !important;
    transform: translate(-50%, -50%) !important;
  }
  .cf-item.cf-active { opacity: 1; }
  .cf-item.cf-prev, .cf-item.cf-next,
  .cf-item.cf-far-prev, .cf-item.cf-far-next,
  .cf-item.cf-hidden { opacity: 0; pointer-events: none; }
}

/* ─── LIGHTBOX ────────────────────────────────────────────── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(12, 11, 9, 0.97);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px;
  backdrop-filter: blur(16px);
}
.lightbox.is-open {
  display: flex;
  animation: lbFadeIn 0.3s ease;
}
@keyframes lbFadeIn { from { opacity: 0; } to { opacity: 1; } }

.lightbox-stage {
  position: relative;
  max-width: 95vw;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.lightbox-img,
.lightbox-video {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.8);
}
.lightbox-video {
  display: none;
  width: auto;
  background: var(--bg, #0C0B09);
}
.lightbox-caption {
  color: var(--text, #F0EAE0);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.92rem;
  text-align: center;
  max-width: 720px;
  line-height: 1.5;
}

.lightbox-close,
.lightbox-arrow {
  position: absolute;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--border, rgba(196, 168, 76, 0.25));
  background: rgba(12, 11, 9, 0.65);
  color: var(--gold, #C4A84C);
  font-size: 1.3rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease, transform 0.25s ease;
  backdrop-filter: blur(6px);
}
.lightbox-close:hover,
.lightbox-arrow:hover {
  background: var(--gold, #C4A84C);
  color: var(--bg, #0C0B09);
}
.lightbox-close:focus-visible,
.lightbox-arrow:focus-visible {
  outline: 3px solid var(--gold-light, #DFC882);
  outline-offset: 3px;
}
.lightbox-close { top: 24px; right: 24px; }
.lightbox-arrow-prev { top: 50%; left: 24px; transform: translateY(-50%); }
.lightbox-arrow-next { top: 50%; right: 24px; transform: translateY(-50%); }
.lightbox-arrow-prev:hover { transform: translateY(-50%) scale(1.05); }
.lightbox-arrow-next:hover { transform: translateY(-50%) scale(1.05); }

@media (max-width: 768px) {
  .lightbox { padding: 16px; }
  .lightbox-close { top: 12px; right: 12px; width: 40px; height: 40px; }
  .lightbox-arrow { width: 40px; height: 40px; }
  .lightbox-arrow-prev { left: 8px; }
  .lightbox-arrow-next { right: 8px; }
}

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