/* Bild und Botschaft bilden eine gemeinsame Filmbühne. */
.journey{height:1670svh}
/* Handy: Einstieg 2,3 Bildschirme, kurze Pause am Film, dazu einer für die stehende Bühne. Durch den Film führen Pfeile. */
.film-zurueck,.film-vor{display:none}
.film-motion,.film-skip{display:none}  /* Ilja 29.9.: einfach scrollen, keine Ruhige Ansicht und kein Weiter */
@media(max-width:700px){.journey{height:365svh}
 .film-zurueck,.film-vor{display:grid;place-items:center;width:48px;min-height:44px;padding:0;background:#0f1813d9;color:var(--cream);border:1px solid #b6a27a88;cursor:pointer;font-size:18px}
 .film-zurueck:active,.film-vor:active{transform:scale(.96)}
 .film-motion{display:none}}
.scroll-film{--film-edge:clamp(28px,4.3vw,80px);--cinema-width:min(1120px,calc(100vw - 2*var(--film-edge)),calc((100svh - 182px)*1.77778))}
.film-media{inset:auto;top:50%;left:50%;width:var(--cinema-width);height:auto;aspect-ratio:16/9;transform:translate(-50%,-50%);overflow:hidden;background:var(--deep)}
.film-still,.story-canvas{object-fit:cover;object-position:center}
.film-shade{position:absolute;inset:0;background:#06130c;opacity:0;pointer-events:none}
/* Feedback 28.9.: nur die Botschaft, groß und mittig im Blick. Lage je Szene über data-place (oben, mitte, unten). */
.film-copy,.film-copy[data-place]{inset:0;width:auto;padding:0 7%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:none;border:0;text-shadow:0 2px 30px #06130cb3;will-change:transform,opacity}
.film-copy[data-place="oben"]{justify-content:flex-start;padding-top:8%}
.film-copy[data-place="unten"]{justify-content:flex-end;padding-bottom:9%}
.film-copy h3,.film-copy[data-karte="0"] h3{font-size:clamp(40px,5.2vw,80px);font-variation-settings:'wdth' 100,'wght' 350;line-height:1.02;letter-spacing:-.045em;text-wrap:balance;max-width:none}
.film-copy h3 span{display:block}
.film-copy h3 .film-accent{color:var(--cream)}
/* Uhr-Szene: „Keine Sekunde verschwendet.“ bleibt auf dem Desktop eine Zeile (29.9.) */
@media(min-width:701px){.film-copy[data-karte="0"]{padding-left:5%;padding-right:5%}}
.film-footer{bottom:24px;left:calc((100% - var(--cinema-width))/2);right:calc((100% - var(--cinema-width))/2)}
.film-meter{padding:0;background:none;border:0;gap:16px}
.film-line{width:90px}
.film-controls{gap:12px}
.film-motion,.film-skip{background:none;border-color:#b6a27a55;transition:background-color 180ms ease,transform 160ms ease}
.film-motion:active,.film-skip:active{transform:scale(.97)}
.film-loading{top:auto;bottom:82px;font-size:11px;background:var(--deep);color:var(--gold);max-width:230px}
@media(max-width:700px){
 .scroll-film{--film-edge:16px;--cinema-width:calc(100vw - 32px)}
 .film-media{inset:auto;left:16px;top:57%;width:var(--cinema-width);aspect-ratio:4/3;transform:translateY(-50%)}
 /* Handy: Botschaft als Titel über dem Bild, das Bild bleibt frei und hell (29.9.) */
 .film-media{overflow:visible}
 .film-copy,.film-copy[data-place]{inset:auto 0 100% 0;padding:0 2px 22px;justify-content:flex-end}
 .film-shade{display:none}
 .film-copy h3,.film-copy[data-karte="0"] h3{font-size:clamp(30px,8.6vw,38px);line-height:1.05;letter-spacing:-.04em}
 .film-copy[data-karte="5"] h3{font-size:clamp(27px,7.7vw,34px)}  /* längste Botschaft: zwei Zeilen statt drei (Ilja 29.9.) */
 .film-footer{left:24px;right:24px;bottom:26px;gap:8px}
 .film-meter{gap:9px;font-size:10px}
 .film-line{width:30px}
 .film-scene-name{display:none}
 .film-controls{gap:8px}
 .film-motion,.film-skip{font-size:10px;padding:10px;min-height:44px}
 .film-motion{max-width:none}
 .film-skip{gap:10px}
 .film-loading{bottom:83px;right:24px;font-size:10px}
}
@media(min-width:701px) and (max-height:600px){
 .scroll-film{--cinema-width:min(900px,calc(100vw - 120px),calc((100svh - 150px)*1.77778))}
 .film-copy h3,.film-copy[data-karte="0"] h3{font-size:40px}
 .film-footer{bottom:12px}
}
@media(prefers-reduced-motion:reduce){.film-motion,.film-skip{transition:none}}