* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    min-height: 100%;
}

body {
    min-height: 100vh;
    overflow: hidden;
    background: #100b20;
    color: white;
    font-family: Arial, sans-serif;
}

/* Hintergrund */
.background {
    position: fixed;
    inset: 0;
    overflow: hidden;
    isolation: isolate;
    background: #100b20;
}

/* Animierter Grundgradient */
.gradient {
    position: absolute;
    inset: -50%;

    background: linear-gradient(
        125deg,
        #120b2d,
        #35105a,
        #073b50,
        #47112e,
        #120b2d
    );

    background-size: 300% 300%;

    animation: gradientFlow 24s ease-in-out infinite;
}

/* Farbflächen */
.blob {
    position: absolute;

    width: 60vw;
    height: 60vw;

    min-width: 300px;
    min-height: 300px;

    border-radius: 50%;

    opacity: 0.75;
    filter: blur(80px);

    will-change: transform, background;

    animation:
        blobMove 20s ease-in-out infinite alternate,
        blobColor 18s linear infinite;
}

/* Einzelne Farben */
.blob1 {
    top: -20%;
    left: -15%;
    background: #ff2875;
}

.blob2 {
    top: 10%;
    right: -20%;
    background: #793cff;
    animation-delay: -5s, -8s;
}

.blob3 {
    bottom: -35%;
    left: 15%;
    background: #00cfff;
    animation-delay: -10s, -4s;
}

.blob4 {
    bottom: -20%;
    right: -10%;
    background: #ff7a18;
    animation-delay: -7s, -12s;
}

/* Hintergrund bewegt sich kontinuierlich */
@keyframes gradientFlow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Organische Bewegung */
@keyframes blobMove {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    33% {
        transform: translate3d(12vw, 8vh, 0) scale(1.15);
    }

    66% {
        transform: translate3d(-8vw, 15vh, 0) scale(0.9);
    }

    100% {
        transform: translate3d(8vw, -10vh, 0) scale(1.1);
    }
}

/* Stufenloser Farbwechsel */
@keyframes blobColor {
    0% {
        background: #ff2875;
    }

    25% {
        background: #a12cff;
    }

    50% {
        background: #00cfff;
    }

    75% {
        background: #00e6a0;
    }

    100% {
        background: #ff7a18;
    }
}

/* Inhalt */
.content {
    position: relative;
    z-index: 1;

    min-height: 100vh;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 24px;
    text-align: center;

    background: rgba(10, 5, 25, 0.08);
}

.content h1 {
    font-size: clamp(2.5rem, 7vw, 5rem);
    letter-spacing: -2px;
    margin-bottom: 16px;
}

.content p {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: rgba(255, 255, 255, 0.85);
}

/* Smartphone */
@media (max-width: 600px) {
    .blob {
        width: 90vw;
        height: 90vw;
        filter: blur(55px);
    }
}

/* Barrierefreiheit */
@media (prefers-reduced-motion: reduce) {
    .gradient,
    .blob {
        animation: none;
    }
}