/* Scrollgesteuerte Bildsequenz (js/sequenz.js). Grundzustand = normaler Abschnitt ohne JavaScript und bei
   prefers-reduced-motion: Poster, Textzeilen als Liste, Endbild. "sequenz--aktiv" setzt erst das Skript. */
.sequenz{background:var(--creme);color:var(--tinte)}
.sequenz__haft{padding-block:var(--raum-klein)}
.sequenz__innen{display:grid;gap:clamp(1rem,2.5vw,2rem);justify-items:center}
.sequenz__buehne{position:relative;width:100%;max-width:1200px;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:#bcb7b0;box-shadow:0 30px 80px -40px color-mix(in srgb,var(--navy) 55%,transparent)}
.sequenz__buehne img,.sequenz__buehne canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.sequenz__buehne canvas{opacity:0}
.sequenz--bereit .sequenz__buehne canvas{opacity:1}
.sequenz__marke{position:absolute;left:1rem;bottom:.8rem;z-index:2;font:500 .75rem/1.2 var(--text);color:var(--tinte);background:color-mix(in srgb,var(--creme) 78%,transparent);padding:.35em .7em;border-radius:999px}
.sequenz__balken{display:none}
.sequenz__zeilen{list-style:none;margin:0;padding:0;width:100%;max-width:760px;display:grid;gap:1.75rem}
.sequenz__zeilen h2,.sequenz__zeilen h3{font:600 clamp(1.35rem,1.2vw + 1rem,2rem)/1.1 var(--display);letter-spacing:-.02em;color:var(--navy)}
.sequenz__zeilen p{margin-top:.5rem;color:var(--gedaempft);font-size:clamp(1rem,.3vw + .95rem,1.15rem);line-height:1.55}
.sequenz__zeilen .label{display:block;margin-bottom:.6rem}
.sequenz-intro{scroll-margin-top:calc(var(--kopf-h) + 12px)}
/* Verweis aus der Stapelkarte: bewusst oben in der Karte, das Kartenende überdeckt die nächste Karte sehr früh */
.stapel__link{color:var(--creme);font-weight:600;text-decoration:underline;text-decoration-color:var(--rot);text-decoration-thickness:2px;text-underline-offset:.3em}
.stapel__link:hover{text-decoration-color:var(--creme)}
.sequenz__ende{width:100%;max-width:1200px;border-radius:var(--radius);display:block;height:auto}

.sequenz--aktiv{height:420vh}
.sequenz--aktiv .sequenz__haft{position:sticky;top:var(--kopf-h);height:calc(100vh - var(--kopf-h));height:calc(100svh - var(--kopf-h));padding-block:clamp(.75rem,2.5vh,2rem);display:grid;align-content:center}
.sequenz--aktiv .sequenz__buehne{width:min(100%,1200px,calc((100svh - var(--kopf-h) - 15rem) * 16 / 9))}
.sequenz--aktiv .sequenz__balken{display:block;width:min(100%,760px);height:3px;border-radius:3px;background:var(--creme-linie);overflow:hidden}
.sequenz--aktiv .sequenz__balken span{display:block;height:100%;background:var(--rot);transform:scaleX(0);transform-origin:left center}
.sequenz--aktiv .sequenz__zeilen{display:grid;gap:0;min-height:9.5rem;text-align:center}
.sequenz--aktiv .sequenz__zeilen li{grid-area:1/1;opacity:0;transform:translateY(12px);transition:opacity .45s var(--ease),transform .45s var(--ease);pointer-events:none}
.sequenz--aktiv .sequenz__zeilen li.ist-da{opacity:1;transform:none;pointer-events:auto}
.sequenz--aktiv .sequenz__ende{display:none}
@media (max-width:680px){
  .sequenz--aktiv{height:380vh}
  /* Handy: randlos und 3:2. Der Bildsatz m ist so zugeschnitten (bau_frames.sh), das Poster folgt per object-position */
  .sequenz--aktiv .sequenz__buehne{width:100vw;max-width:none;margin-inline:calc(50% - 50vw);border-radius:0;aspect-ratio:3/2;box-shadow:none}
  .sequenz--aktiv .sequenz__buehne img{object-position:63.5% 50%}
  .sequenz--aktiv .sequenz__zeilen{min-height:13rem}
  /* Pflichthinweis bleibt auf dem Handy so groß wie am Desktop (vorher .66rem, rund 10,6 px) */
  .sequenz__marke{left:.6rem;bottom:.5rem}
}