/* Weiche Seitenwechsel (View Transitions zwischen Seiten). Nur geladen, wenn Animationen an sind und das
   System keine reduzierte Bewegung wünscht (media-Attribut am <link>). Browser ohne Unterstützung wechseln normal. */
@view-transition { navigation: auto; }

/* Die Kopfzeile bleibt stehen, der aktive Reiter gleitet zum neuen hinüber, der Inhalt blendet weich über. */
.leiste { view-transition-name: kopfleiste; }
.haupt a[aria-current="page"] { view-transition-name: aktiver-reiter; }
.titelzeile h1, .zeitstrahl-kopf h1 { view-transition-name: seitentitel; }

/* Dauer = --fx-seitenwechsel (Effekte-Seite des Admins). */
::view-transition-old(root) { animation: calc(200ms * var(--fx-seitenwechsel, 1)) cubic-bezier(0.4, 0, 1, 1) both seite-weg; }
::view-transition-new(root) { animation: calc(380ms * var(--fx-seitenwechsel, 1)) cubic-bezier(0.2, 0.8, 0.2, 1) both seite-her; }
::view-transition-group(aktiver-reiter) { animation-duration: calc(420ms * var(--fx-seitenwechsel, 1)); animation-timing-function: cubic-bezier(0.34, 1.4, 0.64, 1); }
::view-transition-group(seitentitel) { animation-duration: calc(380ms * var(--fx-seitenwechsel, 1)); animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }

@keyframes seite-weg { to { opacity: 0; scale: 0.985; filter: blur(2px); } }
@keyframes seite-her { from { opacity: 0; translate: 0 10px; } }