/* EVION – Seitenuebergaenge ("Fade & Rise") * WICHTIG: Diese Datei MUSS render-blockierend im geladen werden. * Die Opt-in-Regel @view-transition muss vor dem ersten Rendern vorhanden sein, * sonst ueberspringt der Browser den Uebergang (intermittierend "abrupt"). * * 1) Native cross-document View Transitions (Chrome/Edge/Safari): * Fade + sanftes Aufsteigen, snapshot-basiert -> kein Ruckeln des fixen Headers. * 2) Auffangnetz / Fallback ueber #pt-overlay (per JS gesteuert), fuer * - vom Browser uebersprungene native Uebergaenge * - Browser ohne View Transitions (z. B. Firefox) */ @view-transition { navigation: auto; } @keyframes pt-rise-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } @keyframes pt-fade-up { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-14px); } } ::view-transition-old(root) { animation: pt-fade-up .42s cubic-bezier(.22, .61, .36, 1) both; } ::view-transition-new(root) { animation: pt-rise-in .55s cubic-bezier(.22, .61, .36, 1) both; } /* Overlay – Deckung/Opacity wird inline per JS gesteuert (kein Einblend-Flash) */ #pt-overlay { position: fixed; inset: 0; z-index: 99999; background: #ffffff; opacity: 0; pointer-events: none; will-change: opacity; } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }