.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}

.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}

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}

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}}