/* Container, der den Schnee bekommt */
.snow-wrap {
    position: relative;
    overflow: hidden; /* Flocken bleiben im Bereich */
}

    /* 3 Layer Schnee (verschiedene Größen/Geschwindigkeiten) */
    .snow-wrap::before,
    .snow-wrap::after {
        content: "";
        position: absolute;
        inset: -200px 0 0 0; /* oben etwas “Vorlauf” */
        pointer-events: none;
        background-repeat: repeat;
        animation: snow-fall 18s linear infinite;
        opacity: .8;
    }

    /* Layer 1: kleine Flocken */
    .snow-wrap::before {
        background-image: radial-gradient(circle, rgba(255,255,255,.9) 2px, transparent 3px), radial-gradient(circle, rgba(255,255,255,.7) 1px, transparent 2px), radial-gradient(circle, rgba(255,255,255,.8) 2px, transparent 3px);
        background-size: 140px 140px, 220px 220px, 320px 320px;
        background-position: 0 0, 60px 20px, 120px 60px;
        animation-duration: 14s;
        filter: blur(.2px);
    }

    /* Layer 2: größere / langsamere Flocken */
    .snow-wrap::after {
        background-image: radial-gradient(circle, rgba(255,255,255,.75) 3px, transparent 4px), radial-gradient(circle, rgba(255,255,255,.55) 2px, transparent 3px);
        background-size: 260px 260px, 420px 420px;
        background-position: 30px 0, 180px 80px;
        animation-duration: 22s;
        opacity: .55;
        filter: blur(.4px);
    }

@keyframes snow-fall {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(220px);
    }
    /* Fallstrecke */
}

/* Optional: wenn Nutzer reduzierte Animationen wollen */
@media (prefers-reduced-motion: reduce) {
    .snow-wrap::before,
    .snow-wrap::after {
        animation: none;
    }
}