/* Animationen */
    /* animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; */
    @keyframes slide-in-top {
        0% {
            -webkit-transform: translateY(-1000px);
            transform: translateY(-1000px);
            opacity: 0;
        }

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

    /* animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; */
    @keyframes slide-in-right {
        0% {
            -webkit-transform: translateX(100px);
            transform: translateX(100px);
            opacity: 0;
        }

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

    /* animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; */
    @keyframes slide-in-left {
        0% {
            -webkit-transform: translateX(-100px);
            transform: translateX(-100px);
            opacity: 0;
        }

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

    /* animation: slide-in-left-liste 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; */
    @keyframes slide-in-left-liste {
        0% {
            display: flex;
            opacity: 0;
            -webkit-transform: translateX(-100px);
            transform: translateX(-100px);
        }

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

    /* animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; */
    @keyframes scale-in-center {
        0% {
            -webkit-transform: scale(0);
            transform: scale(0);
            opacity: 1;
        }

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

    /* animation: fade-in 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; */
    @keyframes fade-in {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    /* animation: flip-in-hor-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; */
    @keyframes flip-in-hor-bottom {
        0% {
            -webkit-transform: rotateX(80deg);
            transform: rotateX(80deg);
            opacity: 0;
        }

        100% {
            -webkit-transform: rotateX(0);
            transform: rotateX(0);
            opacity: 1;
        }
    }

    /* animation: flip-out-hor-top-popup 0.45s cubic-bezier(0.550, 0.085, 0.680, 0.530) both; */
    @keyframes flip-out-hor-top-popup {
        0% {
            -webkit-transform: rotateX(0);
            transform: rotateX(0);
            opacity: 1;
        }

        100% {
            -webkit-transform: rotateX(70deg);
            transform: rotateX(70deg);
            opacity: 0;
        }
    }

    /* animation: fade-out-popup 1s ease-out both; */
    @keyframes fade-out-popup {
        0% {
            opacity: 1;
        }

        100% {
            opacity: 0;
        }
    }

    /* animation: scale-out-center 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both; */
    @keyframes scale-out-center {
        0% {
            -webkit-transform: scale(1);
            transform: scale(1);
            opacity: 1;
        }

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

    /* animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; */
    @keyframes slide-in-top {
        0% {
            -webkit-transform: translateY(-1000px);
            transform: translateY(-1000px);
            opacity: 0;
            z-index: 1;
        }

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

    /* animation: slide-in-top-burger-menu 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; */
    @keyframes slide-in-top-burger-menu {
        0% {
            -webkit-transform: translateY(-200px);
            transform: translateY(-200px);
            opacity: 1;
            z-index: 0;
        }

        100% {
            -webkit-transform: translateY(0);
            transform: translateY(0);
            opacity: 1;
            z-index: 1;
        }
    }

    /* animation: slide-out-top-burger-menu 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both; */
    @keyframes slide-out-top-burger-menu {
        0% {
            -webkit-transform: translateY(0);
            transform: translateY(0);
            opacity: 1;
        }

        100% {
            -webkit-transform: translateY(-200px);
            transform: translateY(-200px);
            opacity: 1;
        }
    }

    /* animation: slide-out-top 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both; */
    @keyframes slide-out-top {
        0% {
            -webkit-transform: translateY(0);
            transform: translateY(0);
            opacity: 1;
        }

        100% {
            -webkit-transform: translateY(-100px);
            transform: translateY(-100px);
            opacity: 0;
        }
    }

    @keyframes tracking-in-expand {
        0% {
            letter-spacing: -0.5em;
            opacity: 0;
        }

        40% {
            opacity: 0.6;
        }

        100% {
            opacity: 1;
        }
    }

    @keyframes text-focus-in {
        0% {
            -webkit-filter: blur(12px);
            filter: blur(12px);
            opacity: 0;
        }

        100% {
            -webkit-filter: blur(0px);
            filter: blur(0px);
            opacity: 1;
        }
    }

    /* animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; */
    @keyframes slide-in-bottom {
        0% {
            -webkit-transform: translateY(80px);
            transform: translateY(80px);
            opacity: 0;
        }

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

    /* animation: slide-in-bl 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; */
    @keyframes slide-in-bl {
        0% {
            -webkit-transform: translateY(1000px) translateX(-1000px);
            transform: translateY(1000px) translateX(-1000px);
            opacity: 0;
        }

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


    /* animation: swirl-in-fwd 0.6s ease-out both; */
    @keyframes swirl-in-fwd {
        0% {
            -webkit-transform: rotate(-540deg) scale(0);
            transform: rotate(-540deg) scale(0);
            opacity: 0;
        }

        100% {
            -webkit-transform: rotate(0) scale(1);
            transform: rotate(0) scale(1);
            opacity: 1;
        }
    }

    /* animation: slide-out-bottom 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both; */
    @keyframes slide-out-bottom {
        0% {
            -webkit-transform: translateY(0);
            transform: translateY(0);
            opacity: 1;
        }

        100% {
            -webkit-transform: translateY(100px);
            transform: translateY(100px);
            opacity: 0;
        }
    }

    /* animation: slide-out-bottom-karte 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both; */
    @keyframes slide-out-bottom-karte {
        0% {
            -webkit-transform: translateY(0);
            transform: translateY(0);
            opacity: 1;
        }

        100% {
            -webkit-transform: translateY(500px);
            transform: translateY(500px);
            opacity: 0;
        }
    }

    /* animation: bounce-in-top 1.1s both; */
    @keyframes bounce-in-top {
        0% {
            -webkit-transform: translateY(-300px);
            transform: translateY(-300px);
            -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
            opacity: 0;
        }

        38% {
            -webkit-transform: translateY(0);
            transform: translateY(0);
            -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
            opacity: 1;
        }

        55% {
            -webkit-transform: translateY(-35px);
            transform: translateY(-35px);
            -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
        }

        72% {
            -webkit-transform: translateY(0);
            transform: translateY(0);
            -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
        }

        81% {
            -webkit-transform: translateY(-18px);
            transform: translateY(-18px);
            -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
        }

        90% {
            -webkit-transform: translateY(0);
            transform: translateY(0);
            -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
        }

        95% {
            -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
            -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
        }

        100% {
            -webkit-transform: translateY(0);
            transform: translateY(0);
            -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
        }
    }

    /* animation: slide-out-bl 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both; */
    @keyframes slide-out-bl {
        0% {
            -webkit-transform: translateY(0) translateX(0);
            transform: translateY(0) translateX(0);
            opacity: 1;
        }

        100% {
            -webkit-transform: translateY(1000px) translateX(-1000px);
            transform: translateY(1000px) translateX(-1000px);
            opacity: 0;
        }
    }

    /* animation: slide-in-br 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; */
    @keyframes slide-in-br {
        0% {
            -webkit-transform: translateY(1000px) translateX(1000px);
            transform: translateY(1000px) translateX(1000px);
            opacity: 0;
        }

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

    /* animation: slide-out-br 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both; */
    @keyframes slide-out-br {
        0% {
            -webkit-transform: translateY(0) translateX(0);
            transform: translateY(0) translateX(0);
            opacity: 1;
        }

        100% {
            -webkit-transform: translateY(1000px) translateX(1000px);
            transform: translateY(1000px) translateX(1000px);
            opacity: 0;
        }
    }


    /* animation: slide-out-right 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both; */
    @keyframes slide-out-right {
        0% {
            -webkit-transform: translateX(0);
            transform: translateX(0);
            opacity: 1;
        }

        100% {
            -webkit-transform: translateX(100px);
            transform: translateX(100px);
            opacity: 0;
        }
    }

    /* animation: slide-out-left 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both; */
    @keyframes slide-out-left {
        0% {
            -webkit-transform: translateX(0);
            transform: translateX(0);
            opacity: 1;
        }

        100% {
            -webkit-transform: translateX(-100px);
            transform: translateX(-100px);
            opacity: 0;
        }
    }

    /* Pfeile */
    @keyframes arrow-center-loop {
        0% {
            -webkit-transform: translateY(1px);
            transform: translateY(1px);
        }

        50% {
            -webkit-transform: translateY(40px);
            transform: translateY(40px);
        }

        100% {
            -webkit-transform: translateY(1px);
            transform: translateY(1px);
        }
    }

    @keyframes arrow-center-loop-2 {
        0% {
            -webkit-transform: translateY(1px);
            transform: translateY(1px);
        }

        50% {
            -webkit-transform: translateY(-40px);
            transform: translateY(-40px);
        }

        100% {
            -webkit-transform: translateY(1px);
            transform: translateY(1px);
        }
    }

    @keyframes arrow-br-left-up-loop {
        0% {
            -webkit-transform: translateY(0) translateX(0);
            transform: translateY(0) translateX(0);
        }

        50% {
            -webkit-transform: translateY(30px) translateX(-30px);
            transform: translateY(30px) translateX(-30px);
        }

        100% {
            -webkit-transform: translateY(0) translateX(0);
            transform: translateY(0) translateX(0);
        }
    }

    @keyframes arrow-br-right-up-loop {
        0% {
            -webkit-transform: translateY(0) translateX(0);
            transform: translateY(0) translateX(0);
        }

        50% {
            -webkit-transform: translateY(-30px) translateX(-30px);
            transform: translateY(-30px) translateX(-30px);
        }

        100% {
            -webkit-transform: translateY(0) translateX(0);
            transform: translateY(0) translateX(0);
        }
    }

    @keyframes arrow-br-right-down-loop {
        0% {
            -webkit-transform: translateY(0) translateX(0);
            transform: translateY(0) translateX(0);
        }

        50% {
            -webkit-transform: translateY(-30px) translateX(30px);
            transform: translateY(-30px) translateX(30px);
        }

        100% {
            -webkit-transform: translateY(0) translateX(0);
            transform: translateY(0) translateX(0);
        }
    }

    @keyframes arrow-br-left-down-loop {
        0% {
            -webkit-transform: translateY(0) translateX(0);
            transform: translateY(0) translateX(0);
        }

        50% {
            -webkit-transform: translateY(-30px) translateX(-30px);
            transform: translateY(-30px) translateX(-30px);
        }

        100% {
            -webkit-transform: translateY(0) translateX(0);
            transform: translateY(0) translateX(0);
        }
    }

    /* animation: spinPause 7s linear infinite; */
    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
            /* nach 40% (≈ 3s bei 7s Dauer) */
        }
    }