/* Approved v7 hero. All visual rules are scoped to this homepage component. */
@font-face{font-family:'Cinematic Bodoni';font-style:normal;font-weight:400;font-display:swap;src:url('../../cinematic-hero/assets/bodoni-moda.ttf') format('truetype')}
.cinematic-page{--hero-screen:100vh;--hero-distance:225vh;--hero-hold:0px;--title-opacity:1;--title-shift:0px;--cream-opacity:0;--image-x:50%;--content-opacity:0}
.page-home--cinematic .site-header{position:fixed;inset:0 0 auto}
/* .kopf-frei (set in the page head before the first paint) gives the navigation the
   same look before cinematic-hero.js adds .cinematic-active (Per, 22.10.2026) */
.page-home--cinematic.cinematic-active .site-header,.kopf-frei .page-home--cinematic .site-header{background:transparent}
.page-home--cinematic.cinematic-active .site-header::before,.kopf-frei .page-home--cinematic .site-header::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--color-stage);opacity:var(--cinematic-nav-opacity,0)}
.page-home--cinematic.cinematic-active .site-header,.kopf-frei .page-home--cinematic .site-header{text-shadow:0 1px 8px rgb(0 0 0 / calc(.6 * (1 - var(--cinematic-nav-opacity,0))))}
.page-home--cinematic .site-header:has(.is-open){background:var(--color-stage)!important}
.cinematic-journey{height:var(--hero-screen);position:relative;background:#101010;color:#f4f1eb;font-family:Arial,Helvetica,sans-serif;line-height:normal;-webkit-font-smoothing:antialiased}
/* The stage fills the large viewport: on phones it neither leaves a gap when the
   browser bar slides away (Per, 19.10.) nor changes size while scrolling, which
   zoomed the film and moved the page below it (Simon, 22.10.) */
/* v12 (9.8 s, since 4.11.2026): longer than v11's 180svh/148svh so her playing and the zoom
   read calm (Per, 3.11.2026); the pacing in _data/hero_media.json is set for these distances.
   Rolling back to t17 or v11 also means setting 180svh/148svh again. */
@supports(height:100lvh){.cinematic-page{--hero-screen:100lvh;--hero-distance:225svh}}
.cinematic-page.is-animated{--hero-hold:var(--hero-distance)}
.cinematic-page.is-animated .cinematic-journey{height:calc(var(--hero-hold) + var(--hero-screen))}
.cinematic-stage{height:var(--hero-screen);position:sticky;top:0;overflow:hidden;background:#101010}
.cinematic-picture,.cinematic-poster,.cinematic-preview,.cinematic-film,.cinematic-shade,.cinematic-cream{position:absolute;inset:0;width:100%;height:100%}
.cinematic-picture{will-change:transform;transform:translateZ(0)}
.cinematic-poster,.cinematic-preview,.cinematic-film{object-fit:cover;object-position:var(--image-x) 50%}
/* Preview frames while the film loads: follow the scroll directly, fade out under the film */
.cinematic-preview{opacity:0;transition:opacity .2s linear;pointer-events:none}
.cinematic-page.has-preview .cinematic-preview{transition:none}
.cinematic-film{opacity:0}.cinematic-film.has-frame{opacity:1}.cinematic-poster.hidden{visibility:hidden}
.cinematic-shade{background:linear-gradient(180deg,rgba(0,0,0,.34),transparent 25%,rgba(0,0,0,.08) 50%,rgba(0,0,0,.56)),linear-gradient(90deg,transparent 40%,rgba(0,0,0,.24));pointer-events:none;opacity:var(--shade-opacity,1)}
.cinematic-title{position:absolute;right:8.7vw;bottom:15%;width:40%;opacity:var(--title-opacity);transform:translateY(var(--title-shift));will-change:opacity,transform}
.cinematic-eyebrow{margin:0 0 24px .375rem;text-transform:uppercase;letter-spacing:.29em;font-size:10px;font-weight:400}
.cinematic-title h1{font-family:'Cinematic Bodoni',Didot,'Times New Roman',serif;font-optical-sizing:auto;font-weight:400;font-size:clamp(84px,10.2vw,172px);line-height:.83;letter-spacing:-.06em;margin:0;color:inherit}
.cinematic-title h1>span{display:block}.cinematic-title h1>span+span{margin-left:7.6vw;margin-top:.5625rem}
/* The round Bodoni dot dips 20/2000 em below the baseline; lifted by exactly that,
   its lower edge sits on the lower edge of the n (Per, 22.10.). A transform, not
   `top`: Chromium would round the small offset of the text to whole pixels. */
.cinematic-period{display:inline-block;font-style:normal;color:#bd353b;transform:translateY(-.01em)}
.cinematic-rule{display:block;width:42px;height:1px;background:currentColor;opacity:.48;margin:2.3125rem 0 0 8vw}
.cinematic-cream{background:var(--color-paper);opacity:var(--cream-opacity);pointer-events:none}
/* The existing concert section arrives during the final key-to-paper dissolve.
   Its own layout, content, spacing and all later sections stay unchanged. */
.cinematic-page.is-animated .cinematic-content{position:relative;z-index:2;margin-top:calc(-1 * (var(--hero-hold) + var(--hero-screen)));opacity:var(--content-opacity)}
.cinematic-page.is-animated .cinematic-content>.konzerte{background:transparent}
.cinematic-debug{position:fixed;z-index:40;bottom:20px;left:20px;padding:.625rem;background:#000c;color:#fff;font:11px monospace;white-space:pre-wrap;pointer-events:none}
.cinematic-debug[hidden]{display:none}
@media(max-width:700px){
 .cinematic-page{--image-x:31%}
 .cinematic-page{--hero-distance:185vh}
 @supports(height:100lvh){.cinematic-page{--hero-distance:185svh}}
 .cinematic-title{left:25px;right:auto;bottom:16%;width:calc(100% - 50px)}
 /* 16 % above the visible bottom while the browser bar is shown (the stage reaches below it) */
 @supports(height:100lvh){.cinematic-title{bottom:calc(100lvh - 84svh)}}
 .cinematic-title h1{font-size:clamp(76px,20vw,126px);line-height:.89}
 .cinematic-title h1>span+span{margin-left:18vw;margin-top:0}
 .cinematic-eyebrow{font-size:8px;margin:0 0 16px 4px;letter-spacing:.27em}
 .cinematic-rule{margin:24px 0 0 19vw;width:28px}
 .cinematic-shade{background:linear-gradient(180deg,#0007,transparent 23%,#0000 43%,#0009 85%,#000b)}
}
/* Portrait phones: the film is cropped for them already (same rule as queries.portrait in _data/hero_media.json) */
@media (max-width:700px) and (max-aspect-ratio:5/8),(pointer:coarse) and (max-aspect-ratio:5/8){.cinematic-page{--image-x:50%}}
@media(prefers-reduced-motion:reduce){.cinematic-page .cinematic-journey{height:var(--hero-screen)}.cinematic-page .cinematic-stage{position:relative}.cinematic-page .cinematic-content{margin-top:0;opacity:1}}

.cinematic-page.is-animated .cinematic-content{will-change:opacity}