/* AIT-Werkzeuge – weiche Seitenwechsel (22.10.2026, wie lon3s.com)
 * Cross-Document View Transitions (Chrome, Edge, Safari): alte Seite blendet aus
 * (leicht nach oben), neue blendet weich ein (von leicht unten). Die Kopfleiste bleibt stehen.
 * Nur im Frontend geladen (templates/header.php), NICHT im Admin.
 * „Bewegung reduzieren" im System schaltet die Animation ab.
 */
@view-transition { navigation: auto; }
.site-header { view-transition-name: kopfleiste; }
@keyframes vt-raus { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-rein { from { opacity: 0; transform: translateY(12px); } }
::view-transition-old(root) { animation: 240ms cubic-bezier(0.4, 0, 1, 1) both vt-raus; }
::view-transition-new(root) { animation: 460ms cubic-bezier(0.2, 0.7, 0.2, 1) 90ms both vt-rein; }
::view-transition-group(kopfleiste) { animation: none; }
::view-transition-old(kopfleiste) { display: none; }
::view-transition-new(kopfleiste) { animation: none; }
@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* Ersatz fuer Browser ohne seitenuebergreifende View Transitions (z. B. Firefox):
 * Klasse vt-ersatz setzt das Inline-Script in templates/header.php. Die neue Seite blendet ein;
 * beim Klick auf einen internen Link blendet die alte erst aus (vt-weg), dann wird gewechselt.
 * <main> selbst nur Deckkraft (kein transform): darin liegen position:fixed-Elemente
 * (Handy-Anfrageleiste, Lightbox), die ein transform am Elternteil verrutschen liesse.
 * Fill "backwards" statt "both": nach dem Einblenden bleibt nichts haengen. */
@keyframes vt-ein-deck { from { opacity: 0; } }
@keyframes vt-ein-hoch { from { transform: translateY(12px); } }
@keyframes vt-aus-deck { to { opacity: 0; } }
@keyframes vt-aus-hoch { to { transform: translateY(-8px); } }
@media (prefers-reduced-motion: no-preference) {
    .vt-ersatz body > :is(section, main, footer) { animation: 460ms cubic-bezier(0.2, 0.7, 0.2, 1) 40ms backwards vt-ein-deck; }
    .vt-ersatz body > section, .vt-ersatz main > :not(.detail-mobil-leiste):not(.lightbox):not(script) { animation: 460ms cubic-bezier(0.2, 0.7, 0.2, 1) 40ms backwards vt-ein-hoch; }
    .vt-ersatz.vt-weg body > :is(section, main, footer) { animation: 220ms cubic-bezier(0.4, 0, 1, 1) forwards vt-aus-deck; }
    .vt-ersatz.vt-weg body > section, .vt-ersatz.vt-weg main > :not(.detail-mobil-leiste):not(.lightbox):not(script) { animation: 220ms cubic-bezier(0.4, 0, 1, 1) forwards vt-aus-hoch; }
}