.hero{grid-template-columns:1fr 1fr;align-items:center;min-height:calc(100svh - 92px);padding-top:25px}.hero-image{width:min(100%,430px);height:min(76svh,760px);aspect-ratio:9/16;justify-self:center;margin:0;background:#18221e;border-radius:10px}.hero-image video{width:100%;height:100%;object-fit:contain;display:block}.hero-image .image-caption{bottom:65px;font-size:.65rem}.hero-foot{margin-top:0}.motion-toggle{position:absolute;bottom:16px;right:16px;color:#fff;background:#17221ecc;border:1px solid #ffffff70;border-radius:30px;padding:10px 18px;font-size:.875rem;cursor:pointer;z-index:2}.cinema-story{background:#f3f5f4}.cinema-scene{--scene-progress:0;position:relative;display:grid;grid-template-columns:1fr 1fr;gap:8%;padding:70px max(6%,calc((100vw - 1200px)/2));min-height:125svh;align-items:start}.scene-visual{position:sticky;top:112px;height:calc(100svh - 140px);display:flex;justify-content:center;align-items:center}.scene-frame{position:relative;overflow:hidden;aspect-ratio:9/16;height:100%;max-height:850px;max-width:100%;border-radius:calc(28px - 20px * var(--scene-progress));transform:scale(calc(.92 + .08 * var(--scene-progress)));transform-origin:center}.scene-frame video{display:block;width:100%;height:100%;object-fit:contain;background:#17221e}.scene-copy{padding:12vh 0 6vh}.scene-copy h3{font-size:clamp(3rem,5.8vw,6rem);line-height:1.05;letter-spacing:-.045em;color:inherit;margin-bottom:35px}.scene-copy p{font-size:1.08rem;line-height:1.8;white-space:pre-line;max-width:50ch}.scene-photo{width:100%;height:auto;display:block;margin-top:55px;border-radius:6px}.cinema-scene:nth-child(2){background:#202b27;color:white}.cinema-scene:nth-child(2) p{color:#d8e1dc}.cinema-scene:nth-child(3){background:white}.film-collection{padding-top:60px;padding-bottom:70px}.film-entry{display:grid;grid-template-columns:minmax(220px,380px) 1fr;gap:9%;align-items:center;max-width:1050px;margin:0 auto 65px}.film-entry:last-child{margin-bottom:0}.film-player{position:relative;background:#18221e;aspect-ratio:9/16;border-radius:12px;overflow:hidden}.film-player video{display:block;width:100%;height:100%;object-fit:contain}.film-copy h3{font-size:clamp(1.8rem,3vw,3rem);max-width:17ch;line-height:1.1}.film-copy p:not(.eyebrow){margin-top:24px;max-width:44ch;font-size:1.08rem}.film-start{position:absolute;inset:0;margin:auto;width:max-content;height:max-content;max-width:90%;border:1px solid #ffffff70;border-radius:40px;padding:16px 24px;background:#17221edb;color:white;cursor:pointer;font-size:1rem}.film-start span{margin-right:10px}.film-player.is-started .film-start{display:none}.film-player video:not([src])::-webkit-media-controls{display:none}.cinema-story>.film-collection{background:#e8edeb;max-width:none}.film-player:focus-within{outline:2px solid var(--accent);outline-offset:4px}.video-error{padding:15px;color:#fff;background:#18221e;position:absolute;bottom:0;left:0;right:0;font-size:.9rem}
@media(max-width:900px){.hero-image{height:min(70svh,600px)}.cinema-scene{gap:5%;padding-left:5%;padding-right:5%}.scene-copy h3{font-size:3.1rem}.scene-copy{padding-top:6vh}.film-entry{gap:6%;grid-template-columns:minmax(210px,320px) 1fr}}
@media(max-width:700px){.hero{display:flex;flex-direction:column;align-items:stretch}.hero-image{order:2;width:min(100%,420px);height:auto;aspect-ratio:9/16;align-self:center}.hero-copy{display:contents}.hero-copy .eyebrow{order:0;margin-top:12px}.hero-copy h1{order:1;margin-bottom:15px}.hero-intro{order:3}.hero-copy .lead{order:4}.hero-copy .actions{order:5;margin-top:15px}.hero-foot{order:6;margin-top:22px}.cinema-scene{grid-template-columns:1fr;padding:40px 6% 60px;min-height:0;gap:25px}.scene-visual{position:relative;top:auto;height:auto}.scene-frame{height:auto;width:min(100%,430px);max-height:none;transform:none;border-radius:12px}.scene-copy{padding:0}.scene-copy h3{font-size:3rem;margin-bottom:23px}.scene-photo{margin-top:30px}.film-entry{grid-template-columns:1fr;gap:25px}.film-player{width:min(100%,380px);justify-self:center}.film-copy h3{max-width:none}.film-copy .eyebrow{margin-bottom:16px}.film-collection{padding-top:40px;padding-bottom:45px}.film-copy{grid-row:1}.film-copy p:not(.eyebrow){margin-top:15px}.hero-image .image-caption{font-size:.6rem}}
@media(max-height:550px) and (min-width:701px){.hero-image{height:80svh}.scene-visual{position:relative;top:auto;height:auto}.scene-frame{height:auto;width:300px}.cinema-scene{min-height:0}.scene-copy{padding-top:0}}
@media(prefers-reduced-motion:reduce){.scene-frame{transform:none;border-radius:12px}}

.film-collection:empty{display:none}

/* Hero: breiter Text, kompakter Abstand, gemeinsame Unterkante. */
@media (min-width: 701px) {
  .hero { grid-template-columns: minmax(0, 1fr) min(34%, 430px); column-gap: clamp(28px, 3.3vw, 60px); align-items: end; }
  .hero-copy { padding: 0; align-self: end; min-width: 0; }
  .hero-image { width: 100%; justify-self: end; align-self: end; }
  .hero h1 { max-width: none; font-size: clamp(3rem, 5.5vw, 6.5rem); }
  .hero .lead { max-width: 78ch; }
}
@media (min-width: 1100px) {
  .hero h1 { white-space: nowrap; }
}

.progression-grid .phase-diagram{display:block;width:100%;max-width:none;height:auto;aspect-ratio:4/3;object-fit:contain;margin:0 0 24px}

/* Zentrierter Einstieg mit proportionalem Videorahmen. */
.hero { width: 86%; max-width: 1440px; padding-left: 0; padding-right: 0; }
.hero .hero-image { height: auto; min-height: 0; max-height: none; aspect-ratio: 9 / 16; }
.hero-image video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 701px) {
  .hero { grid-template-columns: minmax(0, 1fr) min(32%, 430px); column-gap: clamp(28px, 3.3vw, 56px); }
  .hero h1 { font-size: clamp(3rem, 5.2vw, 5.7rem); }
}
@media (max-width: 700px) { .hero { width: 90%; } }

/* V17: Inhalt bestimmt die Höhe; eigener Abstand vor dem Studio. */
.hero{min-height:0;padding-top:clamp(32px,4vh,56px);padding-bottom:clamp(64px,7vw,104px)}
@media(min-width:701px){
  .hero{grid-template-columns:minmax(0,1fr) min(32%,38svh,430px);align-items:end}
}
@media(max-width:700px){
  .hero{padding-top:24px;padding-bottom:64px}
  .hero-copy .hero-values{order:4;margin:0}
}

/* V22: eng zusammengehörige Textgruppen im Einstieg. */
.hero-copy .eyebrow{margin-bottom:10px}
.hero .hero-intro{margin-bottom:0;line-height:1.3}
.hero .lead{margin-top:8px}
@media(max-width:700px){.hero{row-gap:0}.hero-image{margin-bottom:24px}.hero-copy .eyebrow{margin-bottom:10px}.hero-intro{margin-top:0}.hero-copy .actions{margin-top:24px}}