.blob-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 200%;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}
/* Wrapper für float-animation */
.blob-wrapper {
    position: absolute;
    width: 200px;
    height: 400px;
    animation: float 20s ease-in-out infinite alternate;
}
/* Eigentlicher Blob: nur Parallax durch JS */
.blob {
    width: 100%;
    height: 100%;
    /* border-radius: 50%; */
    border-radius: 48% 52% 50% 50% / 71% 71% 29% 29%;
    filter: blur(80px);
    opacity: 0.6;
    mix-blend-mode: screen;
    position: absolute;
    top: 0;
    left: 0;
}
.float-blue {
    top: 5%;
    left: -5%;
    width: 200px;
    height: 600px;
    animation-delay: 0s;
}
.float-blue2 {
    top: 25%;
    left: 15%;
    width: 200px;
    height: 400px;
    animation-delay: 1s;
}
.float-pink {
    top: 5%;
    left: 60%;
    width: 200px;
    height: 400px;
    animation-delay: 4s;
}
.float-pink2 {
    top: 40%;
    left: 60%;
    width: 200px;
    height: 400px;
    animation-delay: 2s;
}
.float-pink3 {
    top: 50%;
    left: 40%;
    width: 200px;
    height: 400px;
    animation-delay: 4s;
}
.blob-blue {
    background: #63b23c;
}
.blob-blue2 {
    background: #00BEFF;
}
.blob-pink {
    background: #00bd56;
}
.blob-pink2 {
    background: #63b23c;
}
.blob-pink3 {
    background: #00BEFF;
}
/*
@keyframes definiert eine CSS-Animation, die zwischen verschiedenen Zwischenzuständen (Keyframes) über eine bestimmte Zeitdauer interpoliert.
0% (Start): Das Element ist an seiner normalen Position (kein Versatz).
50% (Mitte der Animation): Das Element ist (X) und (Y) verschoben.
100% (Ende): Das Element ist (X) und (Y) verschoben.
*/
@keyframes float {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }
    50% {
        transform: translate(400px, -30px) rotate(-45deg);
    }
    100% {
        transform: translate(-30px, 200px) rotate(45deg);
    }
}