/* Container für den Regen */
.rain-container {

    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Klicks passieren durch */
    overflow: hidden;
    z-index: 9999;
background:transparent;

}

/* Die Regentropfen */
.raindrop {
    position: absolute;
    width: 10px; /* Etwas breitere Tropfen */
    height: 24px; /* Etwas größere Tropfen */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(0, 0, 255, 0.8));
    border-radius: 50%; /* Rundung der Tropfen */
    opacity: 0.8; /* Erhöhte Sichtbarkeit */
    animation: fall 3s linear infinite; /* Die Tropfen fallen langsamer */
z-index:9999;
transform-origin:center bottom;
transition:transform 0.2s ease-out, opacity 0.2s ease-out;

}

/* Animations-Keyframes */
@keyframes fall {
    0% {
        top:-25px;
    }
    100% {
        top:100vh; /* Tropfen fallen bis zum unteren Rand des Bildschirms */
    }
}
@keyframes sway{ 
0%{
left:0%;
}
50%
{
left:5%;
} 
100%
{
left:0%;
}
}

/* Der "Spritz"-Effekt am oberen Ende jedes Tropfens */
.raindrop::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    width: 30px;
    height:30px;
    background: rgba(0, 0, 255, 0.8); /* Blaurter
 Spritzer */
opacity:0.6;
    border-radius: 50%;

}