/* Menü und Logo in einer Zeile halten */
#sp-header .row {
    display: flex;
    flex-wrap: nowrap !important;
    align-items: center;
}

/* Menü-Wrapper: Kein Overflow, damit Dropdowns sichtbar bleiben */
#sp-menu {
    position: relative;
    flex-shrink: 1;
    overflow: visible !important;
}

/* Menü-Liste (`ul`) als Container für Scrollbalken */
#sp-menu .sp-megamenu-wrapper > ul {
    display: flex;
    white-space: nowrap;
    position: relative;
    margin-bottom: -10px;
}

/* Scrollbalken nur für die Menü-Punkte (`li`) aktivieren */
#sp-menu .sp-megamenu-wrapper > ul > li {
    flex-shrink: 0;
    overflow: visible; /* Wichtig für Dropdowns! */
}

/* Menü-Punkte scrollbar machen (mit JavaScript) */
#sp-menu .sp-megamenu-wrapper > ul {
    overflow-x: auto;
/*    max-width: 100%;*/
}

/* Dropdowns explizit sichtbar machen */
#sp-menu .sp-has-child:hover .sp-dropdown {
    display: block !important;
    position: fixed !important; /* Vermeidet Overflow-Probleme */
    z-index: 9999;
    background: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Positionierung der Dropdowns relativ zum Menüpunkt */
#sp-menu .sp-has-child:hover .sp-dropdown {
    left: unset !important;
    right: unset !important;
}
/* Umbruch für lange Menüeintrage in den Untermenüs */
#sp-menu .sp-dropdown .sp-dropdown-items li a,
#sp-menu .sp-dropdown-inner li a {
    white-space: normal !important; /* Erlaubt Umbruch */
    word-break: break-word !important; /* Bricht lange Wörter um */
    padding: 8px 12px !important; /* Optional: Abstände anpassen */
    display: block !important; /* Stellt sicher, dass der Umbruch funktioniert */
}