/* systemmap · seitenwechsel.css (seit 17.10.2026)
 * ════════════════════════════════════════════════════════════════════
 * Ruhiger Seitenwechsel: der Kopf bleibt stehen, nur der Inhalt gleitet
 * leicht von unten ein. Reines CSS ueber View Transitions zwischen den
 * Seiten (Chrome, Edge ab 126, Safari ab 18.2); andere Browser wechseln
 * wie bisher hart, nichts geht kaputt. Jede Seite bindet diese Datei ein,
 * denn beide Seiten eines Wechsels muessen zustimmen.
 */
@view-transition { navigation: auto; }

/* Der Kopf jeder Seitenart traegt denselben Namen: er wird nicht mit dem
   Inhalt verschoben, sondern hoechstens kurz ueberblendet. */
header.lh, header.co-kopf, header.lz-kopf, header.hd, header.l-kopf { view-transition-name: sw-kopf; }
::view-transition-group(sw-kopf) { animation-duration: 160ms; }
::view-transition-old(sw-kopf), ::view-transition-new(sw-kopf) { animation-duration: 160ms; }

/* Inhalt: alt blendet schnell aus, neu kommt 8 px von unten und wird
   sichtbar. Unter 250 ms, damit es nie wie Warten wirkt. */
::view-transition-old(root) { animation: sw-raus 120ms ease-in both; }
::view-transition-new(root) { animation: sw-rein 230ms cubic-bezier(.2, .7, .2, 1) 40ms both; }
@keyframes sw-raus { to { opacity: 0; } }
@keyframes sw-rein { from { opacity: 0; transform: translateY(8px); } }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}