/* 
 * Mobile Wellen-Animation für den Hero-Bereich
 * Nur für mobile Geräte (max-width: 768px)
 */

@media only screen and (max-width: 768px) {
    /* Container für die Wellen-Animation */
    .wave-container {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        overflow: hidden;
        pointer-events: none; /* Verhindert Störung der Interaktion */
        z-index: 1;
    }

    /* Wellenanimation Basis-Stil */
    .wave {
        position: absolute;
        width: 300%; /* Deutlich breiter */
        height: 80%; /* Reduzierte Höhe */
        background: rgba(255, 255, 255, 0.4); /* Deutlich erhöhte Sichtbarkeit */
        left: -100%; /* Weiter nach außen */
        top: 10%; /* Zentriert vertikal */
        border-radius: 50%;
        transform-origin: 50% 50%;
    }

    /* Erste Welle */
    .wave-1 {
        animation: wave-movement 25s infinite linear;
        z-index: 1;
        background: linear-gradient(transparent, rgba(255, 255, 255, 0.35)); /* Deutlich stärkerer Gradient */
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.3); /* Leichtes Leuchten hinzufügen */
    }

    /* Zweite Welle */
    .wave-2 {
        animation: wave-movement 17s infinite linear;
        opacity: 0.9;
        z-index: 2;
        background: linear-gradient(transparent, rgba(255, 255, 255, 0.25)); /* Deutlich stärkerer Gradient */
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.25); /* Leichtes Leuchten hinzufügen */
    }

    /* Dritte Welle */
    .wave-3 {
        animation: wave-movement 12s infinite linear;
        opacity: 0.8;
        z-index: 3;
        background: linear-gradient(transparent, rgba(255, 255, 255, 0.2)); /* Deutlich stärkerer Gradient */
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.2); /* Leichtes Leuchten hinzufügen */
    }

    /* Wellenanimation */
    @keyframes wave-movement {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }

    /* Hinzufügen von leuchtenden Partikeln */
    .particle {
        position: absolute;
        width: 4px;
        height: 4px;
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 50%;
        z-index: 3;
        pointer-events: none;
        animation: float-up 15s infinite ease-in;
        box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.7); /* Deutlicher Leuchteffekt */
    }

    @keyframes float-up {
        0% {
            transform: translateY(60%) translateX(0);
            opacity: 0;
        }
        10% {
            opacity: 1;
        }
        90% {
            opacity: 1;
        }
        100% {
            transform: translateY(-60%) translateX(20px);
            opacity: 0;
        }
    }

    /* Anpassung des Hero-Bereichs für die Animation */
    #hero .container {
        position: relative;
        z-index: 2; /* Über den Wellen */
    }

    /* Stelle sicher, dass der Hero-Bereich einen Overflow:hidden hat */
    #hero {
        position: relative;
        overflow: hidden;
    }
}