/* 1. Header weiß einfärben und das Slider-Bild nach unten schieben */
header#sp-header, .sticky-header #sp-header, #sp-header {
    background-color: #ffffff !important;
    background: #ffffff !important;
    position: relative !important;
}

/* 2. Den störenden Page-Builder-Titel radikal unsichtbar machen */
#sp-page-builder .page-header, .page-header {
    display: none !important;
}

/* 3. Das große Textmenü erst AB 1200px einblenden, darunter bleiben die 3 Striche aktiv */
@media (max-width: 1199px) {
    /* Zwingt das Logo und das Burgermenü in eine Reihe und zentriert sie perfekt auf einer Höhe */
    #sp-header .container > .row, #sp-header .row {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .sp-megamenu-wrapper .d-none.d-lg-block, 
    ul.sp-megamenu-parent {
        display: none !important; /* Versteckt das gequetschte Textmenü unter 1200px */
    }

    /* Das Drei-Striche-Symbol perfekt vertikal zentrieren */
    #offcanvas-toggler {
        display: block !important; 
        margin: 0 !important; /* Entfernt den verrutschenden Abstand nach oben */
        padding: 0 15px 0 0 !important;
    }
}

/* 4. Ab 1200px: Textmenü einblenden und in eine Reihe zwingen */
@media (min-width: 1200px) {
    #sp-menu .sp-column {
        display: block !important;
    }
    .sp-megamenu-wrapper {
        display: block !important;
    }
    #offcanvas-toggler {
        display: none !important; /* Versteckt die drei Striche auf großen PCs */
    }
    
    /* Zwingt die Liste in eine Reihe und verbietet den Umbruch von Impressum/AGB */
    ul.sp-megamenu-parent {
        display: flex !important;
        flex-wrap: nowrap !important; /* Absolutes Umbruchverbot */
        justify-content: flex-end !important;
    }

    /* Hält die einzelnen Wörter (wie "Über uns") in sich zusammen */
    ul.sp-megamenu-parent li.sp-menu-item {
        white-space: nowrap !important;
    }

    /* Den Header-Container verbreitern, damit das große Menü Platz hat */
    #sp-header .container {
        max-width: 1240px !important;
    }
}

/* 5. Die Höhe des Logo-Bildes strikt auf 80px begrenzen */
#sp-logo img, .logo img, .sp-default-logo {
    height: 80px !important;
    width: auto !important; /* Verhindert, dass das Logo verzerrt wird */
}