/* Keyframes für die Slide-In-Animation */
@keyframes slideIn {
    0% {
        opacity: 0;
        transform: translateY(50px);

        font-size: 6px;
    }
    100% {
        opacity: 1;
        transform: translateY(0);

        font-size: 24px;
    }
}



/* Die Klasse für das animierte Element */
.scroll-animation {
    font-weight: bold;
    opacity: 0;
    transform: translateY(50px); /* Startposition außerhalb des Bildschirms */
    
}

/* Sichtbarkeit und Position ändern, wenn das Modul den Viewport erreicht */
.scroll-animation.visible {
    animation: slideIn 5s ease-out forwards; 
    color: black;
}

/* Animiert Schriftgröße mit @keyframes + Farbwechsel mit transition */
.scroll-animation.visible span {
    
    transition: color 4.5s ease-in-out; /* Farbwechsel fließend */
    color: blue;
}