/* ======================= */
/*  SCHNEEFALL-EFFEKT      */
/* ======================= */

/* Container über der ganzen Seite */
.snow-container {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 99999;

    /* DEBUG: erstmal sichtbar machen */
    background: rgba(255, 0, 0, 0.03);
}

/* Wenn du später über body-Klasse steuern willst:
 * body:not(.snow-active) .snow-container {
 *    display: none;
 * }
 */

/* Einzelne Schneeflocke */
.snowflake {
    position: absolute;
    top: -10vh;
    color: #ffffff;
    font-size: 28px;
    opacity: 0.9;
    will-change: transform, opacity;
    filter: drop-shadow(0 0 4px rgba(0,0,0,0.25));
    animation-name: qc-snow-fall, qc-snow-drift;
    animation-timing-function: linear, ease-in-out;
    animation-iteration-count: infinite, infinite;
}

/* Vertikal nach unten fallen */
@keyframes qc-snow-fall {
    0% {
        transform: translate3d(0, -10vh, 0);
        opacity: 0;
    }
    10% {
        opacity: 0.95;
    }
    100% {
        transform: translate3d(0, 110vh, 0);
        opacity: 0;
    }
}

/* leichte horizontale Bewegung */
@keyframes qc-snow-drift {
    0%   { transform: translateX(0); }
    50%  { transform: translateX(15px); }
    100% { transform: translateX(-15px); }
}