/* ==========================================================================
   Der Seitenwechsel (View Transitions, seit 20.09.2026)
   --------------------------------------------------------------------------
   TEIL 14 VON 14 von assets/css/style.css – und bewusst die LETZTE Datei:
   Was hier steht, gilt für den Wechsel zwischen zwei Seiten und darf von
   keiner Modulregel überschrieben werden.

   WAS SICH ÄNDERT: Bis hierher war jeder Klick im Menü ein Weißblitz – die
   alte Seite verschwindet, der Browser malt kurz nichts, die neue Seite
   springt herein. Das ist bei jeder klassischen Anwendung so und der
   deutlichste Unterschied zu einer App. Der Browser kann es seit Chrome 126
   und Safari 18 selbst besser: Er hält ein Bild der alten Seite fest, holt
   die neue und blendet dazwischen über.

   WAS WIR IHM DABEI SAGEN – und das ist der ganze Trick:

     1. DIE SEITENLEISTE WECHSELT NICHT MIT. Sie steht links und ist auf
        beiden Seiten dieselbe. Ohne Namen würde sie mitverblassen und neu
        erscheinen, also flackern; MIT Namen erkennt der Browser sie auf
        beiden Seiten wieder und lässt sie einfach stehen.
     2. NUR DIE SPUR WECHSELT. Der Inhalt rechts blendet über und kommt
        dabei sechs Pixel von unten – gerade so viel, dass eine Richtung
        darin liegt, und zu wenig, um als Bewegung aufzufallen.

   NICHT BENANNT sind Seitenkopf und Überschrift. Ein gemeinsamer Name lässt
   sie von Seite zu Seite an ihren neuen Platz WANDERN, und das ist der
   Effekt, den man aus Apps kennt – er setzt aber voraus, dass es das Element
   auf beiden Seiten wirklich gibt. Ein Kopf, den es drüben nicht gibt,
   wandert ins Leere. Wer das für ein Paar Seiten will (Liste → Karte), gibt
   dem einen Element auf beiden Seiten denselben `view-transition-name` und
   stellt sicher, dass er im ganzen Dokument nur EINMAL vorkommt – doppelte
   Namen brechen den Übergang für die ganze Seite ab.

   WER ES NICHT KANN (Firefox, ältere Safari), bekommt den Wechsel wie
   bisher. Es gibt nichts nachzurüsten und nichts zu prüfen: Kennt der
   Browser @view-transition nicht, überliest er den Block.
   ========================================================================== */

@view-transition { navigation: auto; }

/* Der Grundwechsel: übereinander blenden statt nacheinander. Ohne diese
   beiden Zeilen liegt die alte Seite die ganze Zeit ÜBER der neuen (so ist
   die Vorgabe), und eine helle Fläche schiebt sich über eine helle Fläche –
   man sieht nichts als ein Zucken. */
::view-transition-old(root) { animation: vt-alt-weg var(--t-base) var(--ease-out) both; }
::view-transition-new(root) { animation: vt-neu-her var(--t-base) var(--ease-out) both; }

@keyframes vt-alt-weg { to   { opacity: 0; } }
@keyframes vt-neu-her { from { opacity: 0; transform: translateY(6px); } }

/* 1 – Die Leiste bleibt stehen.
   NUR AB 900 PIXELN: Darunter ist sie keine Spalte mehr, sondern ein Blatt,
   das über die Seite fährt (13-seitenleiste.css, @media max-width 899.98px).
   Ein festgehaltenes Blatt, das gar nicht zu sehen ist, ergibt beim Wechsel
   ein Rechteck, das von links hereinschießt. */
@media (min-width: 900px) {
    .site-leiste { view-transition-name: leiste; }
    ::view-transition-old(leiste),
    ::view-transition-new(leiste) { animation: none; mix-blend-mode: normal; }
}

/* 2 – Die Spur wechselt allein. Sie trägt den Namen nur, wenn es die Leiste
   daneben gibt: Auf den öffentlichen Seiten (Formular, Exposé, Terminbuchung)
   ist die Spur die ganze Seite, und dann soll die ganze Seite wechseln. */
.hat-leiste main { view-transition-name: spur; }
::view-transition-old(spur) { animation: vt-alt-weg var(--t-fast) var(--ease-out) both; }
::view-transition-new(spur) { animation: vt-neu-her var(--t-base) var(--ease-out) both; }

/* 3 – Wer blättert, wechselt nicht.
   Gleicher Pfad, andere Adresse: eine andere Mail, ein anderer Anruf, ein
   anderer Reiter, ein anderer Buchstabe im Adressbuch. Die Seite lädt neu,
   aber daneben steht dieselbe Liste und darüber dieselbe Kopfzeile – ein
   Übergang bewegt dann nur, was gar nicht wechselt, und das sieht man als
   kurzes Zucken. Den Merker setzt includes/header.php, bevor das erste Bild
   steht; dort steht auch, warum das nicht im Blatt zu entscheiden ist.

   DIESELBEN DREI ZEILEN WIE UNTEN bei „weniger Bewegung", und aus demselben
   Grund: `animation: none` allein ließe das alte Bild stehen. */
html[data-blaettern]::view-transition-group(*),
html[data-blaettern]::view-transition-old(*),
html[data-blaettern]::view-transition-new(*) { animation-duration: 0.01ms !important; }

/* Wer weniger Bewegung eingestellt hat, bekommt den harten Schnitt zurück –
   und zwar wirklich: `animation: none` allein ließe die alte Seite stehen,
   deshalb hier ausdrücklich die Dauer auf null. */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) { animation-duration: 0.01ms !important; }
}