/* K³ VISUALS · Renderings-Stapel (Startseite „Ausgewählte Renderings" und Seite „Projekte").
   Ohne JS: einfache Bildliste. Mit JS (.is-ready): eine gepinnte Bühne, in die jedes Rendering aus
   wechselnder Richtung (rechts, links, oben, unten) über das vorige fährt, gebunden an den Scroll.
   Links eine feste Spalte mit Zähler, Kategorie und wechselnder Bildunterschrift. */

.stack-inner { display: grid; grid-template-columns: minmax(300px, 38%) minmax(0, 1fr); align-items: start; }

.stack-side {
  position: sticky; top: 0; height: 100svh; box-sizing: border-box; min-width: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--nav-h) + 32px) var(--gutter) 40px;
}
.stack-inner--pj .stack-side { justify-content: flex-end; }
.stack-head { display: grid; gap: 18px; justify-items: start; }
.stack-head .eyebrow { margin-bottom: 0; }
.stack-head .lead { font-size: var(--step-0); }

.stack-caption { display: grid; gap: 8px; max-width: 26rem; }
.stack-count { color: var(--muted); font-size: .74rem; letter-spacing: .14em; }
.stack-cat { color: var(--green); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; }
.stack-title { color: var(--white); font-size: var(--step-2); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; text-wrap: balance; }
.stack-desc { color: var(--ink-200); font-size: .95rem; line-height: 1.55; text-wrap: pretty; }
.stack-hint { color: var(--muted); font-size: .8rem; margin-top: 18px; display: inline-flex; align-items: center; gap: .5em; }
.stack-hint .icon { width: 1em; height: 1em; flex: none; color: var(--green); }

/* Grundzustand ohne JS: Liste */
.stack-list { position: relative; min-width: 0; }
.stack-item {
  position: relative; display: block; height: 70svh; margin: 0 0 12px;
  overflow: hidden; background: var(--ink-800); color: inherit;
}
.stack-item.is-hidden { display: none; }
.stack-media {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  padding: 0; border: 0; background: none; color: inherit; cursor: inherit;
}
.stack-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pj-open.stack-media { cursor: zoom-in; }
.stack-dim { position: absolute; inset: 0; background: #0b0d0f; opacity: 0; pointer-events: none; }
.stack-cap {
  position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 6px;
  padding: 72px 20px 26px; background: linear-gradient(180deg, #0b0d0f00, #0b0d0fd9 70%);
}
.stack-cap .stack-title { font-size: var(--step-1); }
.stack-cap .stack-desc { font-size: .88rem; }

/* Gepinnte Buehne (JS setzt .is-ready und --stack-h) */
.stack-list.is-ready { height: var(--stack-h, 800svh); }
.stack-list.is-ready .stack-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--ink-950); }
.stack-list.is-ready .stack-item {
  position: absolute; inset: 0; height: 100%; margin: 0;
  box-shadow: 0 0 40px rgba(0, 0, 0, .45);
  backface-visibility: hidden;
}
.stack-list.is-ready .stack-media { backface-visibility: hidden; }
.stack-list.is-ready .stack-cap { display: none; }

@media (width <= 900px) {
  .stack-inner { grid-template-columns: 1fr; }
  .stack-side { position: static; height: auto; padding: 0 var(--gutter) 28px; }
  .stack-side .stack-caption, .stack-side .stack-hint { display: none; }
  .stack-list.is-ready .stack-cap { display: grid; }
}