.hintergrund-bewegt {
    position: relative;
    isolation: isolate;

    overflow: hidden !important;
    clip-path: inset(0);
    contain: paint;

    background: #454545;
}

/* Beide Licht-/Schattenflächen */
.hintergrund-bewegt .aurora-glow {
    position: absolute;

    width: 75%;
    aspect-ratio: 1.4 / 1;

    border-radius: 50%;
    filter: blur(120px);

    pointer-events: none;
    z-index: 0;

    will-change: transform;
}

/* Dunklere Fläche */
.hintergrund-bewegt .aurora-glow-1 {
    left: -20%;
    top: -50%;

    background: #1f1f1f;
    opacity: 0.75;

    animation: aurora-bewegung-1 26s ease-in-out infinite;
}

/* Etwas hellere Fläche */
.hintergrund-bewegt .aurora-glow-2 {
    right: -25%;
    bottom: -55%;

    background: #5a5a5a;
    opacity: 0.55;

    animation: aurora-bewegung-2 32s ease-in-out infinite;
}

/* Inhalt bleibt über den Glows */
.hintergrund-bewegt > *:not(.aurora-glow) {
    position: relative;
    z-index: 2;
}

@keyframes aurora-bewegung-1 {
    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(-8deg) scale(1);
    }

    35% {
        transform: translate3d(45%, 20%, 0) rotate(8deg) scale(1.15);
    }

    70% {
        transform: translate3d(20%, 55%, 0) rotate(-3deg) scale(0.95);
    }
}

@keyframes aurora-bewegung-2 {
    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(8deg) scale(1);
    }

    40% {
        transform: translate3d(-45%, -25%, 0) rotate(-10deg) scale(1.1);
    }

    75% {
        transform: translate3d(-15%, -50%, 0) rotate(4deg) scale(0.95);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hintergrund-bewegt .aurora-glow {
        animation: none;
    }
}