/* ==========================================================================
   Schnee – rein dekorativ, CSS-only (kein Skript, keine Bilder)
   Zwei Flocken-Ebenen fallen unterschiedlich schnell. Animiert wird nur
   `transform` (GPU-freundlich), die Flächen sind gekachelte Verläufe.
   ========================================================================== */

.snow {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

.snow::before,
.snow::after {
  content: "";
  position: absolute;
  inset: -25% 0 0;
  background-repeat: repeat;
  will-change: transform;
  backface-visibility: hidden;
}

.snow::before {
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.95) 1.4px, transparent 2px),
    radial-gradient(circle, rgba(255, 255, 255, 0.8) 1px, transparent 1.6px);
  background-size: 120px 120px, 78px 78px;
  background-position: 0 0, 40px 60px;
  opacity: 0.6;
  animation: schnee-fall 26s linear infinite;
}

.snow::after {
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.95) 2.2px, transparent 2.8px),
    radial-gradient(circle, rgba(255, 255, 255, 0.75) 1.2px, transparent 1.8px);
  background-size: 210px 210px, 150px 150px;
  background-position: 70px 30px, 10px 120px;
  opacity: 0.38;
  animation: schnee-fall 44s linear infinite;
}

@keyframes schnee-fall {
  from {
    transform: translate3d(0, -12%, 0);
  }
  to {
    transform: translate3d(0, 32%, 0);
  }
}

/* Barrierefreiheit: keine Bewegung, wenn nicht gewünscht. */
@media (prefers-reduced-motion: reduce) {
  .snow::before,
  .snow::after {
    animation: none;
    will-change: auto;
  }
}

/* Sparmodus: auf sehr kleinen Geräten bleibt nur eine Lage. */
@media (max-width: 30rem) {
  .snow::before {
    opacity: 0.45;
  }

  .snow::after {
    opacity: 0.3;
  }
}