@view-transition {
    navigation: auto;
}

/* Schnellere Fade-Animation */
@keyframes fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Ultra-schnelle Fade-Animation */
@keyframes fade-fast {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Crossfade für sofortigen Übergang */
@keyframes crossfade {
    from { opacity: 0.5; }
    to   { opacity: 1; }
}

@keyframes slide-down {
    from { transform: translateY(-1rem); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

@keyframes slide-up {
    from { transform: translateY(1rem); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

@keyframes blur-in {
    from { filter: blur(5px); opacity: 0; }
    to   { filter: blur(0); opacity: 1; }
}

/* 🎯 Transitions für benannte Bereiche - BESCHLEUNIGT */

::view-transition-old(main-content),
::view-transition-new(main-content) {
    animation: fade 0.15s ease-out; /* Von 0.4s auf 0.15s reduziert */
}

/* Alternative: Noch schnellere Transition */
.fast-transitions ::view-transition-old(main-content),
.fast-transitions ::view-transition-new(main-content) {
    animation: fade-fast 0.1s ease-out;
}

/* Alternative: Instant mit minimalem Fade */
.instant-transitions ::view-transition-old(main-content),
.instant-transitions ::view-transition-new(main-content) {
    animation: crossfade 0.05s linear;
}

::view-transition-old(site-header),
::view-transition-new(site-header) {
    animation: slide-down 0.2s ease-out; /* Von 0.4s auf 0.2s reduziert */
}

::view-transition-old(site-footer),
::view-transition-new(site-footer) {
    animation: slide-up 0.2s ease-out; /* Von 0.4s auf 0.2s reduziert */
}


/* Respektiere User-Präferenzen für reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(main-content),
    ::view-transition-new(main-content),
    ::view-transition-old(site-header),
    ::view-transition-new(site-header),
    ::view-transition-old(site-footer),
    ::view-transition-new(site-footer) {
        animation: none;
    }
}
