/* ============================================================
   Wände-Sektion: 3×3 CSS-Grid mit Row-Spans für Hochkant-Slots
   
   Dasselbe Prinzip wie das alte 9er-Grid, aber Slot 2 und 3 bekommen
   grid-row: span 2, wodurch sie doppelt so hoch sind wie die
   Einzelzellen. Der rotateY-Warp sitzt auf .waende-grid und verzerrt
   das gesamte Grid als Ganzes.
   ============================================================ */

.waende-grid {
  position: absolute;
  top: 34.04%;
  bottom: 23.15%;
  left: 2.16%;
  right: 6%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: clamp(6px, 1.2%, 14px);
  transform: rotateY(-61.79deg);
  transform-origin: left center;
}

.waende-slot {
  position: relative;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
}

.waende-slot .klapp-media {
  position: absolute;
  inset: 0;
}

.waende-slot .klapp-media .werk-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Mobil-Vorschaubild (2026-09-21): <picture> nur vorhanden, wenn am Work
   ein vorschau_mobil gesetzt ist (section-waende.php). display:contents
   nimmt den Wrapper aus dem Layout - sonst liefe height:100% des <img>
   gegen die auto-Hoehe des <picture> ins Leere.
   ROLLBACK: Regel entfernen (ohne <picture> im Markup wirkungslos). */
.waende-slot .klapp-media .werk-thumb-picture {
  display: contents;
}

/* Leere/inaktive Slots: Indigo-Fläche statt Featured Image.
   Slot im Backend leer lassen = inaktiv. Nicht klickbar, kein
   Play-Button (wird im Template gar nicht gerendert). */
.waende-slot--leer .klapp-media {
  background-color: var(--indigo);
}

/* Play-Button: zentriert */
.waende-slot .werk-play {
  top: 50%;
  left: 50%;
  bottom: auto;
  right: auto;
  transform: translate(-50%, -50%);
}

/* ── Reveal ──────────────────────────────────────────────── */

.waende-grid.reveal-armed {
  opacity: 0;
  transform: rotateY(-82deg);
  transition: transform 1s var(--ease-default), opacity 0.6s var(--ease-default);
}

.waende-grid.reveal-armed.is-revealed {
  opacity: 1;
  transform: rotateY(-61.79deg);
}

@media (prefers-reduced-motion: reduce) {
  .waende-grid.reveal-armed {
    opacity: 1;
    transform: rotateY(-61.79deg);
    transition: none;
  }
}

/* ── Mobile: horizontales Karussell ──────────────────────── */

@media (max-width: 1279px) {

  /* Breakpoint 1279 statt 760: Perspektiv-Warp braucht echte Desktop-
     Breite, alle Tablets (auch Landscape) bekommen das Swipe-Karussell.
     Synchron mit main.css 1279er-Block halten. */

  .waende-grid {
    position: static;
    top: auto; right: auto; bottom: auto; left: auto;
    display: flex;
    transform: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--space-m);
    gap: var(--space-s);
    padding: var(--space-m);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .waende-grid::-webkit-scrollbar {
    display: none;
  }

  .waende-grid.reveal-armed,
  .waende-grid.reveal-armed.is-revealed {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .waende-slot {
    flex: 0 0 60%;
    scroll-snap-align: start;
    aspect-ratio: 16 / 9;
  }

  .waende-slot .klapp-media {
    position: relative;
    inset: auto;
    /* height:100% (Bug-Fix 2026-07-20): mobil ist .klapp-media
       position:relative (nicht absolut wie auf Desktop). Bei AKTIVEN
       Slots gibt das <img> Hoehe, bei LEEREN Slots (kein Bild) kollabiert
       sie sonst auf 0 - der indigo-Hintergrund war dann eine 0px-Flaeche,
       also unsichtbar (Kunde: inaktive Filme mobil nicht indigo). Die
       Slot-Hoehe kommt aus aspect-ratio:16/9, height:100% fuellt sie. */
    height: 100%;
  }

  /* HINWEIS (2026-07-21 Cleanup): Die frueheren carousel-armed-Regeln
     (Fade+Slide-In pro Kachel) wurden entfernt - das zugehoerige JS-Modul
     (reveal.js #4) und das data-carousel-reveal-Attribut im Template sind
     ebenfalls raus. Die Klasse wird nicht mehr gesetzt, die Kacheln sind
     im Ruhezustand ohnehin voll sichtbar (opacity:1). Siehe reveal.js-
     Header fuer die Historie. */

}