/* --- BASIS & DESKTOP (Handmade) --- */
.nav.navbar-nav {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.navbar-right {
    margin-left: auto; /* Schiebt das Menü nach rechts */
}

/* Die graue Farbe aus dem Logo-Schriftzug (#575756) */
#desktop-menu2 li a {
    color: #575756;
    text-decoration: none;
    padding: 0 20px;
    /* Deine valign-Höhe */
    display: flex;
    align-items: center;
    font-weight: 600;
    text-transform: uppercase; /* Passend zum Logo-Stil */
    transition: all 0.2s ease-in-out;
}

/* Hover-Effekt: Das Blau aus den Logo-Quadraten (#0071bc) */
#desktop-menu2 li a:hover,
#desktop-menu2 li.active a {
    color: #0071bc;
    box-shadow: inset 0 -3px 0 #0071bc; /* Subtile Linie unten statt plumpem Background */
}

/* --- MOBILE SIDENAV (Handmade) --- */
.mobile-menu {
    background-color: #333333; /* Dunkleres Anthrazit für Kontrast */
    width: 280px;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    list-style: none;
    padding: 20px 0;
    z-index: 1000;
}

.mobile-menu li a {
    color: #ffffff;
    text-decoration: none;
    display: block;
    padding: 15px 25px;
    font-size: 1.1rem;
}

/* Die Material-Icons (Pfeile) manuell positionieren */
.mobile-menu .material-icons {
    float: right;
    cursor: pointer;
    color: #89bce5; /* Das Hellblau aus der Logo-Treppe */
    margin-top: -45px;
    margin-right: 15px;
}

/* --- DIE UNTERPUNKTE (Subitems) --- */
.subitems {
    /* display: none kommt aus deinem HTML-Inline-Style */
    background: #444444; /* Abhebung vom Hauptgrau */
}

.subitems ul {
    list-style: none;
    padding: 0;
}

.subitems li a {
    padding-left: 45px;
    font-size: 0.95rem;
    color: #89bce5 !important; /* Hellblau für die Kind-Elemente */
}

.subitems li a:hover {
    background: #0071bc;
    color: #ffffff !important;
}

/* Utility Klassen aus deinem Code bedienen */
.valign-wrapper {
    display: flex;
    align-items: center;
}