﻿.snow {  
    
    background-color: #960014 !important;
    color: white !important;
    .example {
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
    }
}

.snow::-webkit-scrollbar {
    display: none;
}

.snow::before,
.snow::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;    /* Klicks gehen durch */
    z-index: -1;             /* hinter dem Inhalt der Sidebar bleiben */
    background-repeat: repeat;
    background-size: 200px 200px;
    animation: snowfall 15s linear infinite;
    /* Heller Schnee, damit er auf bg-light sichtbar ist */
    background-image:
            radial-gradient(2px 2px at 10% 10%, rgba(255, 255, 255, 0.95), transparent),
            radial-gradient(2px 2px at 30% 20%, rgba(255, 255, 255, 0.9),  transparent),
            radial-gradient(2px 2px at 50% 5%,  rgba(255, 255, 255, 0.95), transparent),
            radial-gradient(2px 2px at 70% 25%, rgba(255, 255, 255, 0.9),  transparent),
            radial-gradient(2px 2px at 90% 15%, rgba(255, 255, 255, 0.95), transparent),
            radial-gradient(3px 3px at 20% 40%, rgba(255, 255, 255, 0.95), transparent),
            radial-gradient(3px 3px at 40% 60%, rgba(255, 255, 255, 0.95), transparent),
            radial-gradient(3px 3px at 60% 35%, rgba(255, 255, 255, 0.95), transparent),
            radial-gradient(3px 3px at 80% 55%, rgba(255, 255, 255, 0.95), transparent);
}

/* Zweite Ebene mit anderer Geschwindigkeit/Unschärfe */
.snow::after {
    animation-duration: 25s;
    opacity: 0.8;
    filter: blur(1px);
}

@keyframes snowfall {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(100%);
    }
}
