/* =====================================================================
   GENERAITIVE LAB – DESIGN (helles Scrollytelling)
   =====================================================================
   Heller, architektonischer Look: Putz, Sichtbeton, Eiche, Anthrazit.
   Diese Datei ergänzt Tailwind um die Bühnen-Ebenen, Panel-Karten
   und Feinheiten. Normalerweise musst du hier nichts ändern.
   ===================================================================== */

/* ---- Die Bühne: fester Hintergrund hinter allem ---- */
#buehne {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #F4F1EC;
}

/* Ein Szenen-Stapel (Ankunftsbild + ggf. Abfahrtsbild) */
.szene-stapel {
  position: absolute;
  inset: 0;
  opacity: 0;
  will-change: opacity, transform;
}
.szene-stapel img,
.szene-stapel video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.szene-stapel .abfahrt { opacity: 0; }
.szene-stapel .fuellung { display: none; }
.szene-stapel .mobil { display: none; }

/* ---- Hochkant (Handy): Szenenbilder VOLLSTÄNDIG zeigen ----
   Das scharfe Bild sitzt im oberen Bilddrittel und zeigt die ganze
   Szene (Tür UND Logo, komplette Galeriewand …). Den Bereich darüber
   und darunter füllt eine weichgezeichnete Kopie desselben Bildes.
   Die Textkarten rutschen dafür nach unten. */
@media (orientation: portrait) {
  /* Szenen mit eigenem 9:16-Bild: formatfüllend, ohne Kompromisse */
  .szene-stapel.hat-mobil .mobil { display: block; }
  .szene-stapel.hat-mobil .fuellung,
  .szene-stapel.hat-mobil .szenenbild { display: none; }

  /* Ersatz-Darstellung, falls kein Mobil-Bild vorhanden ist */
  .szene-stapel .fuellung {
    display: block;
    object-fit: cover;
    filter: blur(26px) brightness(1.03) saturate(0.9);
    transform: scale(1.2);
  }
  .szene-stapel img.szenenbild {
    top: 10vh;
    left: 6%;
    width: 88%;
    bottom: auto;
    height: auto;
    object-fit: unset;
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(43, 41, 37, 0.22);
  }
  .panel-karte { padding: 1.4rem; }

  /* Hero kompakter, damit die Tür-Szene sichtbar bleibt */
  #start .panel-karte { padding: 1.4rem 1.3rem 1.6rem; }
  #start h1 { font-size: 1.8rem; }
  #start h1 + p { font-size: 0.95rem; margin-top: 0.9rem; }
  #start .panel-karte a { padding-top: 0.85rem; padding-bottom: 0.85rem; }
  #start .scroll-hinweis { margin-top: 1.4rem; }
}

/* Übergangsvideo-Ebene (liegt über den Szenen-Stapeln) */
.uebergang-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  will-change: opacity;
}

/* ---- Panel-Karten: Inhalte über den hellen Bildern ----
   Halbtransparenter Putz + Weichzeichner = immer lesbar,
   ohne die Szene zu verdecken. */
.panel-karte {
  background: rgba(244, 241, 236, 0.88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(214, 210, 203, 0.9);
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(43, 41, 37, 0.10);
  will-change: opacity, transform;
}

/* ---- Szenen-Kicker (kleine Kapitel-Zeile, z. B. "Szene 2 · ...") ---- */
.kicker {
  letter-spacing: 0.18em;
}

/* ---- Buttons ---- */
.btn-eiche {
  transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease;
}
.btn-eiche:hover {
  box-shadow: 0 10px 28px rgba(185, 138, 94, 0.45);
  transform: translateY(-1px);
}

/* ---- Karten-Hover (dezent) ---- */
.card-hover {
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.card-hover:hover {
  border-color: #B98A5E;
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(43, 41, 37, 0.10);
}

/* ---- FAQ-Akkordeon ---- */
details.faq-item summary {
  cursor: pointer;
  list-style: none;
}
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary .faq-chevron { transition: transform 0.3s ease; }
details.faq-item[open] summary .faq-chevron { transform: rotate(45deg); }

/* ---- Scroll-Hinweis im Hero (deutliches Pulsieren) ---- */
.scroll-hinweis {
  animation: hinweisPuls 2.2s ease-in-out infinite;
}
@keyframes hinweisPuls {
  0%, 100% { transform: translateY(0); opacity: 0.75; }
  50%      { transform: translateY(12px); opacity: 1; }
}

/* ---- Reduzierte Bewegung: alles ruhigstellen ---- */
@media (prefers-reduced-motion: reduce) {
  .scroll-hinweis { animation: none; }
}

/* ---- Statischer Modus (iPhone & Sicherheitsnetz): keine Bühne,
   keine Kamerafahrt. Stattdessen bekommt jede Szene ihr Bild als
   ruhigen, festen Hintergrund hinter den zugehörigen Inhalten. ---- */
.ohne-animation #buehne { display: none; }
.ohne-animation .uebergang { height: 0 !important; }
.ohne-animation .scroll-hinweis { animation: none; }

/* Jede Szene füllt mindestens einen Bildschirm und trägt ihr
   Szenenbild fest im Hintergrund (parallax-artig ruhig). */
.ohne-animation .statische-szene {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Die Panels der Szene bekommen etwas Luft, damit mehrere
   Inhalts-Kacheln pro Szene sauber untereinander sitzen. */
.ohne-animation .panel {
  min-height: 100vh;
}
/* fester Hintergrund nur auf Desktop – auf Mobil kostet das Leistung
   und iOS unterstützt background-attachment:fixed ohnehin nicht gut */
@media (min-width: 900px) and (pointer: fine) {
  .ohne-animation .statische-szene { background-attachment: fixed; }
}