/* Seitenwechsel mit der Cessna (Tim, 24.09.2026: "langsamer, aber nur eine;
   eine Seite wird weggeschoben und direkt dahinter kommt schon die andere";
   "perfekt gerade"; "auf dem Telefon normal"). Die alte Seite gleitet nach
   rechts hinaus, die Cessna schiebt sie mit der Nase an, dahinter steht
   schon die neue Seite. Nur Transformationen. Verhalten in uebergang.js. */
/* Kein Seitenübergang über Dokumentgrenzen mehr: die Seiten wechseln im
   selben Dokument (uebergang.js), damit die Musik weiterläuft. Die Cessna
   fliegt per document.startViewTransition, nur auf iPad und Rechner. */
:root{--epc-flug-w:clamp(150px,17vw,280px);--epc-flug-dauer:1.15s;--epc-flug-kurve:cubic-bezier(.55,.05,.35,1)}

/* Alte Seite oben, gleitet nach rechts, bis ihre linke Kante eine
   Flugzeuglänge hinter dem Fensterrand liegt. Die neue Seite steht still. */
::view-transition-old(root){
  z-index:1;
  animation:var(--epc-flug-dauer) var(--epc-flug-kurve) both epc-flug-schieben;
}
::view-transition-new(root){animation:none}
::view-transition-group(root){animation-duration:var(--epc-flug-dauer)}
@keyframes epc-flug-schieben{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(calc(100vw + var(--epc-flug-w)),0,0)}
}

/* Die Cessna: Gruppe fliegt von links (Nase an der Kante der alten Seite)
   nach rechts hinaus, gleiche Dauer und Kurve wie die Seite. */
::view-transition-group(epc-cessna){
  z-index:2;
  animation-duration:var(--epc-flug-dauer);
  animation-timing-function:var(--epc-flug-kurve);
}
::view-transition-old(epc-cessna){animation:none;opacity:1}
::view-transition-new(epc-cessna){animation:none;opacity:0}

.epc-flug-cessna{
  position:fixed;top:50%;left:0;width:var(--epc-flug-w);aspect-ratio:2560/896;z-index:2147483000;
  pointer-events:none;contain:layout;
  margin-top:calc(var(--epc-flug-w) * -.175);
  transform:translate3d(calc(var(--epc-flug-w) * -1.02),0,0);
}
/* Ziel auf der neuen Seite: rechts ausserhalb, gleiche Höhe (Tim: exakt gerade) */
.epc-flug-cessna.ist-ziel{transform:translate3d(calc(100vw + 2px),0,0)}
.epc-flug-cessna img{display:block;width:100%;height:auto} /* kein filter:drop-shadow, Safari malt ihn als Kasten */
/* Kondensstreifen hinter dem Leitwerk, über der neuen Seite */
.epc-flug-cessna::before{
  content:"";position:absolute;right:88%;top:41%;width:32vw;height:2px;border-radius:2px;
  background:linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,.45));
}
@media print{.epc-flug-cessna{display:none}}

/* Musikknopf bleibt während des Flugs ruhig stehen */
::view-transition-group(epc-musik){animation:none}
::view-transition-old(epc-musik){animation:none;opacity:0}
::view-transition-new(epc-musik){animation:none}