/* Ausgangswerte für alle animierten Elemente */
.anim {
    --duration: 0.8s;
    --duration-zoomin: 8s;
    --slide-distance: 40px;
    --zoomin-scale: 1.04;
    --zoomin-delay: 1s;
}
.anim.anim-slideup {
    transform: translateY(var(--slide-distance));
}
.anim.anim-slidedown {
    transform: translateY(calc(-1 * var(--slide-distance)));
}
.anim.anim-slideleft {
    transform: translateX(var(--slide-distance));
}
.anim.anim-slideright {
    transform: translateX(calc(-1 * var(--slide-distance)));
}
.anim.anim-zoomin {
    transform: scale(1);
}

/* Einzelne Animationen */
.anim.anim-fadein.anim-inview {
    animation: anim-fadein var(--duration) ease forwards;
}
.anim.anim-slideup.anim-inview {
    animation: anim-slideup var(--duration) ease forwards;
}
.anim.anim-slidedown.anim-inview {
    animation: anim-slidedown var(--duration) ease forwards;
}
.anim.anim-slideleft.anim-inview {
    animation: anim-slideleft var(--duration) ease forwards;
}
.anim.anim-slideright.anim-inview {
    animation: anim-slideright var(--duration) ease forwards;
}
.anim.anim-zoomin.anim-inview {
    animation: anim-zoomin var(--duration-zoomin) ease forwards var(--zoomin-delay);
}

/* Kombinierte Animationen für fadein + slideup/slidedown/slideleft/slideright */
.anim.anim-fadein.anim-slideup.anim-inview {
    animation: anim-fadein var(--duration) ease forwards, anim-slideup var(--duration) ease forwards;
}
.anim.anim-fadein.anim-slidedown.anim-inview {
    animation: anim-fadein var(--duration) ease forwards, anim-slidedown var(--duration) ease forwards;
}
.anim.anim-fadein.anim-slideleft.anim-inview {
    animation: anim-fadein var(--duration) ease forwards, anim-slideleft var(--duration) ease forwards;
}
.anim.anim-fadein.anim-slideright.anim-inview {
    animation: anim-fadein var(--duration) ease forwards, anim-slideright var(--duration) ease forwards;
}

/* Keyframes für die einzelnen Animationen */
@keyframes anim-fadein {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes anim-slideup {
    0% { transform: translateY(var(--slide-distance)); }
    100% { transform: translateY(0); }
}
@keyframes anim-slidedown {
    0% { transform: translateY(calc(-1 * var(--slide-distance))); }
    100% { transform: translateY(0); }
}
@keyframes anim-slideleft {
    0% { transform: translateX(var(--slide-distance)); }
    100% { transform: translateX(0); }
}
@keyframes anim-slideright {
    0% { transform: translateX(calc(-1 * var(--slide-distance))); }
    100% { transform: translateX(0); }
}
@keyframes anim-zoomin {
    0% { transform: scale(1); }
    100% { transform: scale(var(--zoomin-scale)); }
}

/* Barrierefreiheit: Deaktiviere Animationen bei prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .anim,
    .anim.anim-inview {
        animation: none !important;
        opacity: 1 !important;
        transform: translate(0, 0) !important;
    }
}