/* Seitenuebergang, der blaue Vorhang mit dem Plus.
   =================================================
   Eigene Datei und nicht ein Block in seite.css, weil sie auf JEDER Seite
   liegen muss. @view-transition greift nur, wenn beide beteiligten Dokumente
   die Regel tragen, das alte und das neue. /booking/, /impressum/,
   /datenschutz/ und /leistungen/ laden seite.css nicht, und /booking/ ist mit
   107 Verweisen das meistgeklickte Ziel der ganzen Seite. Genau dort fiel der
   Uebergang darum aus. (Befund 2026-08-26, Fabiano sah ihn "manchmal nicht".)

   Die Zeiten, 1 zu 1 aus dem Entwurf. navigate() in v6 macht das hier, in
   Millisekunden:

       0     Vorhang faehrt hoch, transform 0.4s cubic-bezier(0.65,0,0.35,1)
       400   Vorhang deckt alles zu
       410   die Seite wird gewechselt
       470   Vorhang faehrt weiter nach oben raus, dieselben 0.4s
       870   Vorhang ist weg

   Umgesetzt als Schnitt statt als Verschiebung, und das ist der Punkt.

   WARUM DAS PLUS TROTZDEM MITFAEHRT UND SCHARF BLEIBT
   Unscharf wird ein Uebergang genau dann, wenn der Browser etwas als Bild
   festhaelt und dieses Bild danach verschiebt. Das Bild wird beim Verschieben
   neu gerechnet, bei krummer Bildschirm-Skalierung (Windows auf 125 % oder
   150 %) trifft es die Bildpunkte nicht mehr und die Kanten verwaschen.
   Gemessen am 2026-08-26 bei 150 % Skalierung, Kantenpixel je Flaeche des
   Plus:

       Plus steht still                      0.062
       Plus faehrt als normales Element      0.058 bis 0.062   (kein Verlust)
       Plus faehrt IM SCHNAPPSCHUSS          0.136 bis 0.173   (2.5-fach weich)

   Die Quelldatei selbst ist scharf, ihre Kante ist 1 Pixel breit. Schuld war
   also nie das Bild und nie die Bewegung an sich, sondern allein der
   Schnappschuss. Genau da lagen die zwei frueheren Versuche.

   Darum liegt das Blau samt Plus als Hintergrund auf ::view-transition. Diese
   Ebene ist kein Schnappschuss: der Browser malt sie in jedem Einzelbild
   frisch und in voller Bildschirm-Aufloesung. Bewegt wird das Plus deshalb
   nicht per transform, sondern ueber background-position. Gemessen faehrt es
   die volle Strecke von unten durch die Mitte nach oben raus und bleibt dabei
   auf demselben Kantenwert wie im Stillstand.

   Sichtbar wird die Ebene, weil die beiden Seiten-Schnappschuesse darueber
   weggeschnitten werden. Ein Schnitt rechnet nichts neu, er deckt nur ab.

   Kein JavaScript, kein Klick-Abfang, kein zusaetzliches Element: jeder
   Verweis bleibt ein normaler Verweis, und es gibt keine Flaeche im Dokument,
   die Text verdecken koennte. Der Browser haelt das Bild der alten Seite
   fest, laedt die neue darunter und blendet dann um. Das Laden passiert also
   WAEHREND des Vorhangs, gemessen rund 50 ms.

   Browser ohne Unterstuetzung wechseln die Seite ohne Umschweife. Das ist
   kein Fehler, nur schmuckloser. */

@view-transition { navigation: auto; }

/* Die Flaeche hinter beiden Schnappschuessen, mit dem Plus darauf.
   104 Punkte hoch wie im Entwurf, dieselbe scharfe Bildmarke plus-weiss.png,
   nicht die verschwommene. */
::view-transition {
  background: #2B0AFF url(/bilder/marke/plus-weiss.png) no-repeat center;
  background-size: auto 104px;
  animation: ipPlusFaehrt 0.87s linear both;
}

/* Die Fahrt des Plus, 1 zu 1 die Bahn des Vorhangs aus dem Entwurf: sein
   Mittelpunkt startet 101vh unter der Bildmitte, steht waehrend der vollen
   Deckung genau in der Mitte und laeuft dann 101vh darueber hinaus.
   Die Knicke liegen bei 400 und 470 von 870 ms, also bei 45.98 % und 54.02 %.
   Die Beschleunigung sitzt an den Segmenten, nicht an der ganzen Animation,
   sonst zoege sie ueber die Standzeit hinweg. */
@keyframes ipPlusFaehrt {
  0%      { background-position: center calc(50% + 101vh); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  45.98%  { background-position: center 50%; }
  54.02%  { background-position: center 50%; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  100%    { background-position: center calc(50% - 101vh); }
}

/* Der Vorhang faehrt in EINER Richtung durch, von unten nach oben: erst
   schneidet er die alte Seite weg (die verschwindet von unten her), dann gibt
   er die neue frei (die kommt von unten her). Gleiche Richtung in beiden
   Halbzeiten, je 0.4 s, dazwischen die 70 ms volle Deckung, in denen der
   Wechsel passiert. Zusammen 0.87 s. */
::view-transition-old(root) {
  animation: ipVorhangZu 0.4s cubic-bezier(0.65, 0, 0.35, 1) both;
}
::view-transition-new(root) {
  animation: ipVorhangAuf 0.4s cubic-bezier(0.65, 0, 0.35, 1) 0.47s both;
}
@keyframes ipVorhangZu  { from { clip-path: inset(0 0 0 0);    } to { clip-path: inset(0 0 100% 0); } }
@keyframes ipVorhangAuf { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0);    } }

/* Ruhiger Modus. Die Uebergangs-Pseudoelemente stehen ausserhalb des
   Sammel-Ausdrucks in seite.css und brauchen ihre eigene Regel. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
  ::view-transition { background: none; animation: none; }
}