/* Helix Ultimate Header Container vorbereiten */
#sp-header {
    background-color: #051059 !important;
    position: relative !important;
    padding-bottom: 75px !important; /* Gibt dem Header Platz für die Welle */
    overflow: visible !important;    /* Verhindert, dass Helix die Welle abschneidet */
    z-index: 999 !important;         /* Setzt den Header über den restlichen Content */
    border: none !important;
}

/* Basis-Einstellungen für beide Wellen-Ebenen */
#sp-header::before,
#sp-header::after {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 70px !important;         /* Sichtbare Höhe der Wellen */
    background-repeat: no-repeat !important;
    background-position: center bottom !important;
    background-size: 100% 100% !important;
    pointer-events: none !important; /* Verhindert, dass die Welle Klicks blockiert */
}

/* HINTERE WELLE (Für den 3D-Effekt: leicht transparentes Weiß) */
#sp-header::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://w3.org' viewBox='0 0 1440 120'%3E%3Cpath fill='rgba(255,255,255,0.2)' d='M0,32L720,96L1440,32L1440,120L720,120L0,120Z'%3E%3C/path%3E%3C/svg%3E") !important;
    z-index: 10 !important;
    bottom: 8px !important;          /* Leicht nach oben versetzt */
}

/* VORDERE HAUPTWELLE (In exakt deiner Headerfarbe #051059) */
#sp-header::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://w3.org' viewBox='0 0 1440 120'%3E%3Cpath fill='%23051059' d='M0,64L720,32L1440,64L1440,120L720,120L0,120Z'%3E%3C/path%3E%3C/svg%3E") !important;
    z-index: 11 !important;          /* Liegt ganz oben */
}

/* Menü-Texte lesbar machen */
#sp-header a, 
#sp-header .sp-megamenu-parent > li > a {
    color: #ffffff !important;
}