/* ── Einstieg: vier kurze Szenen unter der Hauptzeile ──────────────────────
   Der Text jeder Szene steht im HTML (Suchmaschinen, Vorleser, ohne Skript).
   Die Uhr ist die Fortschrittslinie im Reiter: laeuft sie ab, schaltet das
   Skript weiter. Bei reduzierter Bewegung laeuft sie nicht, dann steht die
   erste Szene fertig da und die Reiter schalten nur auf Klick. */
.vroot .hero .content{top:15vh;top:max(15dvh,100px)}
.film{--tinte:#f2eee2;--hell:#7fdcf5;--dauer:7s;
  width:min(960px,100%);margin:clamp(22px,4.4vh,44px) auto 0;text-align:left;border-radius:26px;
  background:linear-gradient(160deg,rgba(14,26,72,.34),rgba(8,14,40,.46));
  border:1px solid rgba(242,238,226,.2);
  box-shadow:0 24px 70px rgba(6,10,36,.38);
  -webkit-backdrop-filter:blur(18px) saturate(1.35);backdrop-filter:blur(18px) saturate(1.35)}
.film::after{display:none}
/* Buchungsfenster offen: die Buehne tritt zurueck und die Uhr haelt an, sonst
   laeuft der Film durch das halb durchsichtige Fenster hindurch weiter. */
.film{transition:opacity .3s,visibility 0s}
.vroot:has(#scrim.on) .film{opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
.vroot:has(#scrim.on) .film *,.vroot:has(#scrim.on) .film *::after{animation-play-state:paused!important}
@media (prefers-reduced-transparency: reduce){.film{background:rgba(10,16,44,.94);-webkit-backdrop-filter:none;backdrop-filter:none}}

.filmTabs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:8px 10px 0}
.filmTabs button{position:relative;display:flex;align-items:baseline;gap:9px;padding:13px 12px 14px;min-height:44px;
  font:600 15px/1.2 inherit;color:rgba(242,238,226,.62);text-align:left;border-radius:12px;
  transition:color .25s,background .25s}
.filmTabs button b{font:500 11px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.08em;opacity:.7}
.filmTabs button:hover{color:var(--tinte);background:rgba(242,238,226,.07)}
.filmTabs button:focus-visible{outline:2px solid var(--hell);outline-offset:-2px}
.filmTabs button.on{color:var(--tinte)}
.filmTabs button.on b{color:var(--hell);opacity:1}
.filmTabs button i{position:absolute;left:12px;right:12px;bottom:0;height:2px;border-radius:2px;background:rgba(242,238,226,.16);overflow:hidden}
.filmTabs button i::after{content:"";position:absolute;inset:0;background:var(--hell);transform:scaleX(0);transform-origin:left}
.filmTabs button.on i::after{transform:scaleX(1);animation:filmLauf var(--dauer) linear both}
.film:hover .filmTabs button.on i::after,.film:has(:focus-visible) .filmTabs button.on i::after{animation-play-state:paused}
@keyframes filmLauf{from{transform:scaleX(0)}}

.filmStage{display:grid;padding:6px 30px 24px}
.szene{grid-area:1/1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:38px;align-items:center;
  visibility:hidden;opacity:0;transition:opacity .35s,visibility 0s .35s}
.szene.on{visibility:visible;opacity:1;transition:opacity .5s .1s}
.szene h2{margin:0;font:700 clamp(21px,2.1vw,27px)/1.18 'Cabinet Grotesk',sans-serif;letter-spacing:-.012em;color:var(--tinte);text-wrap:balance}
.szene p{margin:10px 0 0;font-size:15.5px;line-height:1.55;color:rgba(242,238,226,.82);max-width:44ch;text-wrap:pretty}
.szene a{display:inline-block;margin-top:14px;padding:6px 0;font-size:14.5px;font-weight:600;color:var(--hell)}
.szene a span{display:inline-block;transition:transform .25s var(--ease)}
.szene a:hover span{transform:translateX(4px)}
.szene a:focus-visible{outline:2px solid var(--hell);outline-offset:4px;border-radius:4px}
.szene.on .szText>*{animation:filmAuf .6s var(--ease) both}
.szene.on .szText>:nth-child(2){animation-delay:.08s}
.szene.on .szText>:nth-child(3){animation-delay:.16s}

/* Zeichnungen: ein Strich, eine helle Farbe. Grundzustand = fertiges Bild,
   die Bewegung kommt nur aus "from"-Keyframes. */
.szBild{width:100%;height:auto;display:block;overflow:visible}
.szBild .l{fill:none;stroke:var(--tinte);stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round;opacity:.78}
.szBild .h{stroke:var(--hell);opacity:1}
.szBild .f{fill:var(--tinte)}
.szBild .fh{fill:var(--hell)}
.szBild .fd{fill:#0d1a44}
.szBild .m{opacity:.42}
.szBild text{font:500 9px/1 system-ui,-apple-system,'Segoe UI',sans-serif;fill:var(--tinte)}
.szBild text.k{font-size:7.5px;letter-spacing:.09em;text-transform:uppercase;opacity:.6}
.szBild text.d{fill:#0d1a44;font-weight:700}
.szBild text.th{fill:var(--hell);font-weight:600}
.szBild [style*="--t"],.szBild .zeiger{transform-box:fill-box;transform-origin:center}
.szene.on .z{stroke-dasharray:1;animation:filmZug .9s var(--ease) both;animation-delay:calc(var(--t,0)*1s)}
.szene.on .a{animation:filmAuf .55s var(--ease) both;animation-delay:calc(var(--t,0)*1s)}
.szene.on .p{animation:filmPop .5s var(--ease) both;animation-delay:calc(var(--t,0)*1s)}
.szene.on .zeiger{animation:filmZeiger 3.4s var(--ease) both .9s}
@keyframes filmZug{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes filmAuf{from{opacity:0;transform:translateY(8px)}}
@keyframes filmPop{from{opacity:0;transform:scale(.6)}}
@keyframes filmZeiger{0%{opacity:0;transform:translate(-205px,4px)}12%{opacity:1;transform:translate(-205px,4px)}
  45%{transform:translate(-205px,4px) scale(.8)}55%{transform:translate(-205px,4px)}86%{transform:none}92%{transform:scale(.8)}100%{transform:none}}

@media (prefers-reduced-motion: reduce){
  .film *,.film *::after{animation:none!important;transition:none!important}
}
/* Niedrige Fenster: Buehne flacher, damit die Wasserlinie frei bleibt */
@media (max-height:780px) and (min-width:761px){
  .vroot .hero .content{top:13vh;top:max(13dvh,96px)}
  .film{margin-top:20px}
  .szene{grid-template-columns:minmax(0,1fr) minmax(0,300px)}
  .szene p{font-size:15px}
  .filmStage{padding-bottom:18px}
}
@media (max-height:640px) and (min-width:761px){.szene .szBild{display:none}.szene{grid-template-columns:1fr}}
/* Telefon: die Reiter sagen, was die Unterzeile sagt, und die Buehne ist
   "Was wir bauen". Beides weicht, damit die Zeichnung in den ersten Blick passt
   (sichtbare Hoehe in Safari mit Leisten: rund 660 px). */
@media (max-width:760px){
  .vroot .hero .content{top:13vh;top:max(13dvh,96px)}
  .vroot .hero .sub,.vroot .hero .ctaRow .btn.quiet{display:none}
  .vroot .hero .ctaRow{margin-top:22px}
  .film{border-radius:22px;margin-top:22px}
  .filmTabs{gap:0;padding:6px 6px 0}
  .filmTabs button{flex-direction:column;gap:5px;padding:10px 5px 12px;font-size:12.5px;white-space:nowrap}
  .filmTabs button i{left:5px;right:5px}
  .filmStage{padding:8px 18px 18px}
  .szene{grid-template-columns:1fr;gap:10px}
  .szene .szBild{order:-1;max-width:290px;margin:0 auto}
  .szene p{display:none}
  .szene h2{font-size:20px}
  .szene p{font-size:15px;margin-top:6px}
  .szene a{margin-top:6px}
}
/* Kleine Telefone: nur Text, die Zeichnung braucht den Platz der Schaltflaechen */
@media (max-width:760px) and (max-height:600px){.szene .szBild{display:none}.szene p{display:block}}