/* Entwurf 2 · Scroll-Video als Eröffnung */
.film { position: relative; height: 500vh; background: var(--schwarz); }
.film__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.film__leinwand, .film__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film__poster { transition: opacity .6s; }
.film.ist-bereit .film__poster { opacity: 0; }
.film__schleier { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,23,28,.45) 0%, rgba(26,23,28,.05) 40%, rgba(26,23,28,.05) 60%, rgba(26,23,28,.55) 100%); pointer-events: none; }

.film__ebene { position: absolute; color: var(--weiss); padding: 0 var(--rand); max-width: 36rem; opacity: 0; pointer-events: none; will-change: transform, opacity; }
.film__ebene .kicker { color: #ff9eae; }
.film__ebene h2 { color: var(--weiss); font-size: clamp(2rem, 4.2vw, 3.8rem); }
.film__ebene h2 em { color: #ff9eae; }
.film__ebene p { text-shadow: 0 1px 10px rgba(0,0,0,.5); }
.film__ebene .btn { pointer-events: auto; margin-top: .5rem; }
.film__ebene--start { inset: 0; max-width: none; display: grid; place-items: center; text-align: center; opacity: 1; }
.film__ebene--links { left: 0; top: 50%; transform: translateY(-50%); }
.film__ebene--rechts { right: 0; top: 50%; transform: translateY(-50%); text-align: right; }
.film__titel { color: var(--weiss); font-size: clamp(2.6rem, 7.5vw, 7rem); line-height: 1.02; }
.film__titel .zeile { display: block; overflow: hidden; }
.film__titel .zeile > span { display: inline-block; }
.film__titel em { font-style: normal; color: #ff9eae; }
.film__sub { font-size: clamp(1rem, 1.5vw, 1.35rem); margin: 1.5rem auto 0; }

.film__fortschritt { position: absolute; left: var(--rand); right: var(--rand); bottom: 1.5rem; height: 2px; background: rgba(255,255,255,.25); }
.film__fortschritt span { display: block; height: 100%; width: 0; background: var(--weiss); transform-origin: left; }
.film__hinweis { position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%); color: var(--weiss); font-size: .65rem; letter-spacing: .3em; text-transform: uppercase; opacity: .8; }
.film__hinweis span { display: block; width: 1px; height: 48px; margin: 0 auto .6rem; background: linear-gradient(var(--weiss), transparent); animation: tropfen 2s infinite; }

/* Angebot ohne Pin im zweiten Entwurf – das Video hat die Bühne schon gehabt */
.angebot--flach .angebot__pin { min-height: 0; padding: clamp(5rem, 12vw, 9rem) var(--rand); }

@media (max-width: 900px) {
  .film { height: 400vh; }
  .film__ebene--links, .film__ebene--rechts { left: 0; right: 0; top: auto; bottom: 14vh; transform: none; text-align: left; max-width: none; }
  .film__ebene h2 { font-size: clamp(1.8rem, 7vw, 2.6rem); }
  .film__ebene p { font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce) {
  .film { height: auto; }
  .film__pin { position: relative; }
  .film__ebene { position: relative; opacity: 1; transform: none; padding: 2rem var(--rand); }
  .film__ebene--start { position: absolute; }
  .film__hinweis span { animation: none; }
}