/* Basis-Stile für alle slide-in Elemente */
.slide-in {
    opacity: 0;
    transition: all 0.5s ease-out;
}

/* Spezifische Startpositionen */
.slide-in-left {
    transform: translateX(-30%);
    opacity: 0;
    transition: all 0.5s ease-out;
}

.slide-in-right {
    transform: translateX(30%);
    opacity: 0;
    transition: all 0.5s ease-out;
}

.slide-in-up {
    transform: translateY(15%);
    opacity: 0;
    transition: all 0.5s ease-out;
}

.slide-in-down {
    transform: translateY(-30%);
    opacity: 0;
    transition: all 0.5s ease-out;
}

.fade-in {
    transform: translateY(0); /* Keine Verschiebung */
    opacity: 0;
    transition: all 0.5s ease-out;
}

/* Animierte Zustände */
.ani-slide-in-left {
    opacity: 1;
    transform: translateX(0);
}

.ani-slide-in-right {
    opacity: 1;
    transform: translateX(0);
}

.ani-slide-in-up {
    opacity: 1;
    transform: translateY(0);
}

.ani-slide-in-down {
    opacity: 1;
    transform: translateY(0);
}

.ani-fade-in {
    opacity: 1;
}

/* Verzögerungsklassen */
.delay-1 {
    transition-delay: 0.1s;
}

.delay-3 {
    transition-delay: 0.3s;
}

.delay-5 {
    transition-delay: 0.5s;
}

.delay-7 {
    transition-delay: 0.7s;
}

.delay-10 {
    transition-delay: 1s;
}

.delay-15 {
    transition-delay: 1.5s;
}

.delay-20 {
    transition-delay: 2s;
}