/* Full-bleed scenes: the image remains the stage at every viewport width. */
.hero, .story { display: flex; align-items: center; min-height: calc(100svh - var(--header-h)); }
.hero-media, .story-media { position: absolute; inset: 0; height: 100%; overflow: hidden; }
.hero-media img, .story-media img { width: 100%; height: 100%; object-fit: cover; animation: none; }
#anforderungen .story-media img { object-position: 76% center; }
.hero-copy, .story-copy {
    position: relative; z-index: 3; width: min(38rem, 48vw); max-width: 38rem;
    margin: 0 0 0 var(--rail); padding: 1.5rem 1.5rem 1.5rem 0;
    background: none; border: 0; border-radius: 0;
}
.hero h1 { font-size: clamp(2.15rem, 3.6vw, 3.5rem); }
.story-copy h2 { font-size: clamp(2rem, 3.5vw, 3.5rem); max-width: 19ch; }
.hero h1, .story-copy h2 { overflow-wrap: anywhere; }
.hero-copy::before, .story-copy::before {
    content: ''; position: absolute; z-index: -1; inset: -100vh -10rem -100vh -8rem;
    background: linear-gradient(90deg, rgba(5,10,18,0.96) 0%, rgba(5,10,18,0.9) 62%, transparent 100%);
    pointer-events: none;
}
.hero-scrim, .story-scrim { display: none; }
.hero-caption, .story-caption { z-index: 3; }
html.is-film .film-pin { background: #050a12; isolation: isolate; }
.film-backdrop { display: none; }
html.is-film .film-backdrop { display: block; position: absolute; inset: 0; background: var(--navy); }
html.is-film .film-break .film-backdrop { background: var(--paper); }
html.is-film .film-frame { visibility: hidden; pointer-events: none; }
html.is-film .film-frame:first-child { visibility: visible; }
html.is-film .film-frame:not([inert]) .hero-copy { pointer-events: auto; }
html.is-film .hero-media, html.is-film .story-media, html.is-film .film-backdrop { z-index: 0; }
html.is-film .hero-copy, html.is-film .story-copy,
html.is-film .film-break-inner, html.is-film .facts-copy,
html.is-film .region-map { position: relative; z-index: 3; }
.film-trace { display: none; }
html.is-film .film-trace {
    display: flex; align-items: center; gap: 0.85rem; position: absolute;
    right: 2rem; bottom: 1.2rem; width: min(24vw, 260px); z-index: 5;
    color: white; pointer-events: none; padding: 0.45rem 0.8rem; border-radius: 999px; background: rgba(9, 18, 36, 0.62);
}
.film-trace-number { font-size: 0.75rem; font-variant-numeric: tabular-nums; letter-spacing: 0.12em; }
.film-trace-line { flex: 1; height: 1px; background: rgba(255,255,255,0.3); }
.film-trace-line span { display: block; height: 2px; background: white; transform-origin: left; }
.film-trace-dot { width: 10px; height: 10px; border: 1px solid currentColor; transform: rotate(var(--trace-turn)); }
@media (max-width: 1000px) {
    .hero, .story { align-items: flex-end; }
    .hero-copy, .story-copy { width: min(37rem, calc(100% - 3rem)); max-width: none; margin: 0 1.5rem 3.3rem; padding: 0; }
    .hero-copy::before, .story-copy::before {
        inset: -7rem -100vw -4rem -1.5rem;
        background: linear-gradient(0deg, rgba(5,10,18,0.97) 0%, rgba(5,10,18,0.9) 65%, transparent 100%);
    }
    .hero h1 { font-size: clamp(1.9rem, 4.5vw, 3rem); line-height: 1.07; }
    .story-copy h2 { font-size: clamp(1.85rem, 4.2vw, 2.8rem); margin-bottom: 0.75rem; max-width: 24ch; }
    .hero .lead, .story-copy p { font-size: 1rem; line-height: 1.5; }
    .hero .lead { margin: 0.8rem 0 0; }
    .story-copy p:last-child { margin-bottom: 0; }
    .kicker { margin-bottom: 0.65rem; }
    .hero-actions { margin-top: 1rem; }
    .hero-copy .text-link { margin-top: 0.7rem; }
    .hero-caption, .story-caption { top: 0.75rem; left: 1.5rem; bottom: auto; font-size: 0.65rem; }
    .film-facts .region-map { max-height: 38svh; }
    html.is-film .film-trace { right: 1.5rem; bottom: 1rem; width: 100px; }
}
@media (max-width: 600px) and (max-height: 740px) {
    .hero-copy, .story-copy { margin: 1rem 1.1rem 2.5rem; width: calc(100% - 2.2rem); }
    .hero h1 { font-size: 1.85rem; }
    .hero .lead, .story-copy p { font-size: 0.9375rem; line-height: 1.45; }
    .hero-actions { margin-top: 0.7rem; }
    .hero-copy .text-link { margin-top: 0.4rem; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-media img, .story-media img { transform: none; }
}
@media (max-width: 700px) {
    .film-facts { padding: 1rem; gap: 1rem; }
    .film-facts .stat-list { gap: 1rem; }
    .film-facts .region-map { max-height: 30svh; }
}
.scroll-cue {
    display: flex; width: fit-content; align-items: center; gap: 0.8rem;
    min-height: 44px; margin-top: 1.1rem; color: #fff;
    font-size: 0.875rem; text-decoration: none; letter-spacing: 0.035em;
}
.scroll-cue:hover { text-decoration: underline; text-underline-offset: 0.25em; }
.scroll-cue-arrow { font-size: 1.4rem; line-height: 1; }
@media (prefers-reduced-motion: no-preference) {
    .scroll-cue-arrow { animation: scroll-invitation 1.8s ease-in-out 3; }
}
@keyframes scroll-invitation {
    0%, 100% { transform: translateY(-3px); }
    50% { transform: translateY(4px); }
}
#betrieb .story-media img { object-position: 82% center; }
#integration .story-media img { object-position: 73% 0%; }
#referenz .story-media img { object-position: 50% 8%; }
@media (max-width: 1000px) {
    #pruefung .story-media img { object-position: 52% center; }
    #vergabe .story-media img { object-position: 38% center; }
    #uebergabe .story-media img { object-position: 66% center; }
    #referenz .story-media img { object-position: 70% 30%; }
}
html.is-film .film-frame:not([inert]) .story-copy a { pointer-events: auto; }
.story-copy .text-link { display: inline-block; margin-top: 0.9rem; color: #fff; text-underline-offset: 0.18em; }
.reference-facts {
    display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; margin: 1rem 0 0; padding: 0;
    list-style: none; color: #fff; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.03em;
}
.reference-facts li { display: flex; align-items: center; gap: 0.5rem; }
.reference-facts li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
@media (max-width: 600px) and (max-height: 740px) {
    .reference-facts { margin-top: 0.6rem; font-size: 0.8125rem; gap: 0.25rem 1rem; }
    .story-copy .text-link { margin-top: 0.5rem; }
}