/* =====================================================================
   Baustein Scroll-Film (README-scrollfilm.md): die Filmzeit folgt dem Scrollen, Stationen blenden passend ein.
   Ohne Skript, bei reduzierter Bewegung und bei Datensparen: Poster und alle Stationen als Liste darunter.
   Mit Skript schaltet scrollfilm.js .ist-an: lange Strecke (--lauf), klebende Buehne unter dem Kopf.
   Farben: --sf-grund, --sf-text, --sf-leise (Standard Tinte und Porzellan), Bildausschnitt --sf-ort.
   ===================================================================== */
.scrollfilm{position:relative;background:var(--sf-grund,#0F1110);color:var(--sf-text,#F3F3EE)}
.scrollfilm__buehne{position:relative}
.scrollfilm__bild{position:relative;overflow:hidden;height:min(56.25vw,86svh);background:var(--sf-grund,#0F1110)}
.scrollfilm__poster,.scrollfilm__film,.scrollfilm__leinwand{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:var(--sf-ort,50% 50%)}
.scrollfilm__film,.scrollfilm__leinwand{opacity:0;transition:opacity .6s cubic-bezier(.16,1,.3,1)}
.scrollfilm.film-da .scrollfilm__film,.scrollfilm.film-da .scrollfilm__leinwand{opacity:1}
/* Liste der Stationen: der Rueckfall, und fuer Screenreader immer der Text */
.scrollfilm__stationen{list-style:none;margin:0;padding:clamp(32px,5vw,72px) var(--rand,24px);display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px clamp(24px,4vw,56px)}
.scrollfilm__station h3{margin:0 0 10px;font-size:clamp(22px,2.2vw,32px);line-height:1.12;letter-spacing:-.02em;color:inherit}
.scrollfilm__station p{margin:0;max-width:38ch;color:var(--sf-leise,rgb(243 243 238/.8))}
.scrollfilm__balken{display:none}

/* ---------- Mit Skript und Bewegung ---------- */
html.js .scrollfilm.ist-an{height:var(--lauf,300svh)}
html.js .scrollfilm.ist-an .scrollfilm__buehne{position:sticky;top:var(--kopf-h,0px);height:calc(100svh - var(--kopf-h,0px));overflow:hidden}
html.js .scrollfilm.ist-an .scrollfilm__bild{position:absolute;inset:0;height:auto}
/* Verlauf nur fuer die Lesbarkeit der Stationen, unten */
html.js .scrollfilm.ist-an .scrollfilm__bild::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgb(0 0 0/.62),rgb(0 0 0/.18) 42%,rgb(0 0 0/0) 64%);pointer-events:none}
html.js .scrollfilm.ist-an .scrollfilm__stationen{position:absolute;inset:0;display:block;padding:0;pointer-events:none}
html.js .scrollfilm.ist-an .scrollfilm__station{position:absolute;left:var(--rand,24px);bottom:clamp(56px,10vh,112px);width:min(560px,calc(100% - 2 * var(--rand,24px)));opacity:0;visibility:hidden;will-change:opacity,transform;pointer-events:auto}
html.js .scrollfilm.ist-an .scrollfilm__station--rechts{left:auto;right:var(--rand,24px);text-align:right}
html.js .scrollfilm.ist-an .scrollfilm__station--rechts p{margin-left:auto}
html.js .scrollfilm.ist-an .scrollfilm__station h3{font-size:clamp(30px,3.6vw,56px);line-height:1.04}
html.js .scrollfilm.ist-an .scrollfilm__station p{font-size:clamp(16px,1.25vw,19px)}
html.js .scrollfilm.ist-an .scrollfilm__balken{display:block;position:absolute;left:var(--rand,24px);right:var(--rand,24px);bottom:clamp(24px,4vh,40px);height:2px;background:rgb(255 255 255/.22)}
html.js .scrollfilm.ist-an .scrollfilm__balken i{display:block;height:100%;background:currentColor;transform-origin:0 50%;transform:scaleX(var(--sf-p,0))}
@media (max-width:760px){
  html.js .scrollfilm.ist-an .scrollfilm__station{bottom:72px}
  html.js .scrollfilm.ist-an .scrollfilm__station--rechts{left:var(--rand,24px);right:auto;text-align:left}
}
@media (prefers-reduced-motion:reduce){.scrollfilm__film,.scrollfilm__leinwand{display:none}}