@keyframes typing {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

@keyframes blink-caret {
    from, to {
        border-color: transparent;
    }

    50% {
        border-color: #ccc;
    }
}

@keyframes marquee {
    from {
        transform: translateX(0); /* Start: Inhalte vollständig sichtbar */
    }

    to {
        transform: translateX(-100%); /* Inhalte bewegen sich nach links */
    }
}

@keyframes slideInDown {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideInTop {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes move {
    0% {
        transform: translate(-50%,10px);
        opacity: 0;
    }

    50% {
        transform: translate(-50%,40px);
        opacity: 1;
    }

    100% {
        transform: translate(-50%,80px);
        opacity: 0;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes stayVisible {
    from, to {
        opacity: 1;
    }
}

@keyframes slideFromLeft {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes slideFromRight {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes popin {
    0% {
        opacity: 0; 
        transform: scale(0.5); 
    }

    100% {
        opacity: 1; 
        transform: scale(1); 
    }
}

@keyframes fadeInLeftAnimation {
    0% {
        opacity: 0; 
        transform: translateX(-50px); 
    }

    100% {
        opacity: 1; 
        transform: translateX(0); 
    }
}

@keyframes fadeInRightAnimation {
    0% {
        opacity: 0; 
        transform: translateX(50px); 
    }

    100% {
        opacity: 1; 
        transform: translateX(0); 
    }
}

.fadeincontent {
    opacity: 0;
    transition: all 2.5s;
    transform: translate(0, 100px);
}

.fadeincontent.visible {
    opacity: 1;
    transform: translate(0, 0);
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

.fadeinleft {
    opacity: 0; /* Anfangs unsichtbar machen */
    transform: translateX(-50px); /* Verschieben um -50px nach links */
    transition: opacity 1s ease, transform 1s ease; /* Animationsübergänge definieren */
}

.fadeinleft.visible {
    opacity: 1; /* Sichtbarkeit auf 1 setzen */
    transform: translateX(0); /* Zurück zur ursprünglichen Position */
}

.fadeinright {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 1s ease, transform 1s ease;
}

.fadeinright.visible {
    opacity: 1;
    transform: translateX(0);
}

.fadeinflycontent {
    opacity: 0; /* Anfangs unsichtbar machen */
    transform: scale(0.5); /* Skalierung auf 0.5 setzen (halbe Größe) */
    transition: opacity 0.5s ease, transform 0.5s ease; /* Animationsübergänge definieren */
}

.fadeinflycontent.visible {
    opacity: 1; /* Sichtbarkeit auf 1 setzen */
    transform: scale(1); /* Zurück zur normalen Größe */
}