/* Full viewport, native sticky positioning, document scrolling drives the film. */
.scroll-cinema { position:relative; background:#29252b; color:#f4f0e8; scroll-margin-top:0; }
.scroll-cinema-stage { position:relative; height:100vh; height:100svh; min-height:36rem; width:100%; overflow:hidden; isolation:isolate; background:#29252b; }
.scroll-cinema.is-scrubbed { height:620vh; height:620svh; }
.scroll-cinema.is-scrubbed .scroll-cinema-stage { position:sticky; top:0; min-height:0; }
.scroll-cinema-media,.scroll-cinema-shade { position:absolute; inset:0; pointer-events:none; }
.scroll-cinema-media { z-index:0; }
.scroll-cinema-media img,.scroll-cinema-media video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% center; display:block; }
.scroll-cinema-media .scroll-poster-after { opacity:0; }
.scroll-cinema-media video { opacity:0; }
.scroll-cinema.video-frame-ready .scroll-cinema-media video { opacity:1; }
.scroll-cinema-shade { z-index:1; background:linear-gradient(90deg,#17131bbd 0%,#17131b69 36%,transparent 75%),linear-gradient(0deg,#17131bcf 0%,transparent 30%,transparent 75%,#17131b80 100%); }
.scroll-cinema-top { position:absolute; z-index:3; top:clamp(1.5rem,4vh,3rem); left:var(--pad); right:var(--pad); display:flex; align-items:center; justify-content:space-between; gap:2rem; }
.scroll-cinema-top>.eyebrow { font-size:.6875rem; letter-spacing:.12em; color:#e4cbaa; }
.scroll-cinema-top .chapter-label { border-right:1px solid #d9bc9980; padding-right:.8rem; }
.scroll-cinema-skip { display:inline-flex; align-items:center; gap:.9rem; min-height:44px; font-size:.6875rem; border-bottom:1px solid #d9bc9970; color:#f4f0e8; }
.scroll-cinema-skip>span { font-size:1rem; color:#d9bc99; }
.scroll-cinema-copy { position:absolute; z-index:2; top:50%; transform:translateY(-48%); left:var(--pad); width:min(44rem,47%); }
.scroll-chapter { display:grid; gap:1.35rem; animation:cinemaChapter .45s var(--ease) both; }
@keyframes cinemaChapter { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
.scroll-chapter>.eyebrow { color:#e0c5a5; font-size:.6875rem; letter-spacing:.13em; }
.scroll-chapter h3 { font-family:var(--editorial); font-size:clamp(3.2rem,min(6.1vw,9svh),7rem); font-weight:700; line-height:1.04; letter-spacing:-.045em; text-wrap:balance; }
.scroll-chapter h3 em { color:#e3c49f; }
.scroll-chapter>p:last-child { max-width:34ch; font-size:clamp(.9rem,1.1vw,1.1rem); line-height:1.85; color:#f0e8df; }
.scroll-cinema-bottom { position:absolute; z-index:3; bottom:clamp(1.7rem,4vh,3rem); left:var(--pad); right:var(--pad); display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1.3rem 3rem; align-items:end; }
.scroll-chapters { grid-column:1/-1; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); list-style:none; padding:0; margin:0 0 .6rem; gap:clamp(1rem,3vw,4rem); }
.scroll-chapters li { position:relative; border-top:1px solid #f4f0e84d; padding-top:.85rem; color:#d9cec0; font-size:.7rem; display:flex; align-items:start; gap:.65rem; }
.scroll-chapters li>span:first-child { font:400 .6875rem/1.6 monospace; color:#d9bc99; }
.scroll-chapters li[aria-current=step] { border-top-color:#e3c49f; color:#fff; }
.scroll-chapters li[aria-current=step]:before { content:''; position:absolute; width:5px; height:5px; border-radius:50%; background:#e3c49f; top:-3px; left:0; }
.scroll-cinema-hint { display:flex; align-items:center; gap:1rem; font-size:.7rem; color:#e3d8cc; }
.scroll-cinema-hint:before { content:'↓'; display:grid; place-items:center; width:30px; height:40px; border:1px solid #d9bc9980; border-radius:18px; color:#e3c49f; font-size:1rem; }
.scroll-cinema-credit { font-size:.6875rem; line-height:1.7; text-align:right; color:#e0d4c5; max-width:43ch; }
.scroll-cinema-progress { position:absolute; z-index:4; bottom:0; left:0; right:0; height:3px; background:#ffffff26; }
.scroll-cinema-progress>span { display:block; width:100%; height:100%; transform:scaleX(0); transform-origin:left; background:#e3c49f; }
.scroll-cinema-percent { font:400 .6875rem/1.5 monospace; color:#e3c49f; margin-left:.4rem; }
.scroll-cinema-status { position:absolute; z-index:3; right:var(--pad); top:6rem; max-width:35ch; color:#f0e8df; font-size:.72rem; line-height:1.6; }
.scroll-cinema-status:empty { display:none; }
.scroll-cinema :focus-visible { outline:2px solid #e3c49f; outline-offset:6px; }
.scroll-cinema-native { position:absolute; z-index:4; left:var(--pad); bottom:10rem; background:#f4f0e8; color:#29252b; padding:.9rem 1.2rem; font-size:.78rem; min-height:48px; }
.scroll-cinema:not(.is-scrubbed) .scroll-cinema-media video { pointer-events:auto; }
.scroll-cinema:not(.is-scrubbed) .scroll-cinema-copy { top:42%; }
.scroll-cinema:not(.is-scrubbed) .scroll-chapters { display:none; }
.scroll-cinema.native-playing .scroll-cinema-copy { opacity:0; pointer-events:none; }
.scroll-cinema.native-playing .scroll-cinema-shade { opacity:.35; }
.scroll-cinema.native-playing .scroll-cinema-hint { visibility:hidden; }
.scroll-cinema-notes { background:#29252b; color:#f4f0e8; padding-block:1.8rem 2.5rem; }
.scroll-cinema-notes .study-caption { padding:0 0 1.3rem; }
.scroll-cinema-notes .study-caption p { max-width:90ch; }
.scroll-cinema-compare,.scroll-cinema-transcript { border-top:1px solid #d9bc9940; }
.scroll-cinema-notes summary { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:56px; padding:.8rem 0; cursor:pointer; font-size:.78rem; color:#e3c49f; list-style:none; }
.scroll-cinema-notes summary::-webkit-details-marker { display:none; }
.scroll-cinema-notes summary:after { content:'+'; font:400 1.4rem/1 Arial,sans-serif; }
.scroll-cinema-notes details[open]>summary:after { content:'−'; }
.scroll-cinema-notes .study-compare-panel { position:relative; padding-top:1rem; }
.scroll-cinema-notes .study-toolbar { position:static; justify-content:flex-end; padding-bottom:1rem; }
.scroll-cinema-notes .comparison-instruction { left:50%; transform:translateX(-50%); }
.scroll-cinema-transcript ol { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:2rem; list-style:none; margin:0; padding:1rem 0 2rem; }
.scroll-cinema-transcript li { font-size:.77rem; line-height:1.8; color:#d9cec0; }
.scroll-cinema-transcript strong { display:block; color:#f4f0e8; font:400 1.5rem/1.2 var(--brand); margin-bottom:.7rem; }
#nach-dem-wandel { scroll-margin-top:0; }
@media(max-width:1100px) {
 .scroll-cinema-copy { width:54%; }
 .scroll-chapter h3 { font-size:clamp(3.2rem,6.5vw,5.5rem); }
 .scroll-chapters li { font-size:.6875rem; }
}
@media(max-width:767px) {
 .scroll-cinema.is-scrubbed { height:540vh; height:540svh; }
 .scroll-cinema-stage { min-height:36rem; }
 .scroll-cinema-top { top:max(1rem,env(safe-area-inset-top)); gap:1rem; }
 .scroll-cinema-top>.eyebrow { font-size:.6875rem; letter-spacing:.07em; gap:.5rem; }
 .scroll-cinema-skip { font-size:.6875rem; gap:.5rem; min-height:44px; }
 .scroll-cinema-media img { object-position:30% center; }
 .scroll-cinema-media video { object-position:center; }
 .scroll-cinema-shade { background:linear-gradient(0deg,#17131bda 0%,#17131b90 40%,#17131b26 80%,#17131b91 100%); }
 .scroll-cinema-copy { top:auto; bottom:13rem; transform:none; width:auto; left:var(--pad); right:var(--pad); }
 .scroll-chapter { gap:.9rem; }
 .scroll-chapter>.eyebrow { font-size:.6875rem; }
 .scroll-chapter h3 { font-size:clamp(2.7rem,10vw,4.3rem); max-width:14ch; }
 .scroll-chapter>p:last-child { font-size:.84rem; line-height:1.8; max-width:36ch; }
 .scroll-cinema-bottom { bottom:max(1.4rem,env(safe-area-inset-bottom)); gap:1rem; grid-template-columns:minmax(0,1fr) auto; }
 .scroll-chapters { gap:.6rem; margin-bottom:0; }
 .scroll-chapters li { display:block; font-size:.6875rem; line-height:1.5; padding-top:.6rem; }
 .scroll-chapters li>span:first-child { display:block; font-size:.6875rem; margin-bottom:.25rem; }
 .scroll-cinema-hint { font-size:.6875rem; gap:.6rem; }
 .scroll-cinema-hint:before { width:25px; height:34px; font-size:.8rem; }
 .scroll-cinema-credit { font-size:.6875rem; max-width:24ch; }
 .scroll-cinema-percent { font-size:.6875rem; }
 .scroll-cinema-status { top:5rem; font-size:.6875rem; }
 .scroll-cinema-native { bottom:10rem; font-size:.71rem; }
 .scroll-cinema:not(.is-scrubbed) .scroll-cinema-copy { top:auto; bottom:15rem; }
 .scroll-cinema-notes { padding-block:1.5rem 2rem; }
 .scroll-cinema-notes summary { font-size:.72rem; }
 .scroll-cinema-transcript ol { grid-template-columns:1fr; gap:1.2rem; }
 .scroll-cinema-transcript strong { font-size:1.4rem; }
}
@media(max-height:600px) and (min-width:768px) {
 .scroll-cinema-stage { min-height:0; }
 .scroll-cinema-copy { top:44%; width:52%; }
 .scroll-chapter { gap:.7rem; }
 .scroll-chapter h3 { font-size:clamp(2.7rem,5vw,4rem); }
 .scroll-chapter>p:last-child { font-size:.8rem; line-height:1.65; }
 .scroll-cinema-top { top:1rem; }
 .scroll-cinema-bottom { bottom:1rem; gap:.6rem; }
 .scroll-chapters { margin:0; }
}
@media(max-height:550px) and (max-width:767px) {
 .scroll-cinema-stage { min-height:0; }
 .scroll-cinema-copy { bottom:9rem; }
 .scroll-chapter h3 { font-size:2.5rem; }
 .scroll-chapter>p:last-child { font-size:.75rem; line-height:1.5; }
 .scroll-chapter>.eyebrow,.scroll-chapters li>span:last-child { display:none; }
}
@media(prefers-reduced-motion:reduce) {
 .scroll-chapter { animation:none; }
 .scroll-cinema.is-scrubbed { height:auto; }
 .scroll-cinema.is-scrubbed .scroll-cinema-stage { position:relative; }
}
@media print {
 .scroll-cinema,.scroll-cinema.is-scrubbed { height:auto; background:#fff; color:#000; }
 .scroll-cinema-stage,.scroll-cinema.is-scrubbed .scroll-cinema-stage { position:static; height:auto; min-height:0; padding:2rem; overflow:visible; }
 .scroll-cinema-media,.scroll-cinema-shade,.scroll-cinema-top,.scroll-cinema-bottom,.scroll-cinema-progress,.scroll-cinema-native { display:none!important; }
 .scroll-cinema-copy { position:static; width:auto; transform:none; }
 .scroll-chapter[hidden] { display:block!important; }
 .scroll-chapter h3 { color:#000; font-size:2rem; }
 .scroll-chapter p { color:#000!important; }
 .scroll-cinema-notes { background:white; color:black; }
 .scroll-cinema-notes .study-caption,.scroll-cinema-notes details { display:none; }
}
