/* 1. Header komplett weiß und ohne Hintergrundbild */
.header {
    background-image: none !important;
    background-color: #ffffff !important;
    padding: 10px 0 !important;
}

/* Den Header-Bereich insgesamt flacher machen */
.header {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    margin-bottom: 0 !important;
}

/* Die Logo-Grafik in der Höhe begrenzen */
.navbar-brand img {
    max-height: 80px !important; /* Hier kannst du die Höhe feinjustieren */
    width: auto !important;
}

/* Den Abstand zwischen Logo und Navigation verringern */
.header .container-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: auto !important;
}

/* 2. Navigation mit dem grau-weißen Verlauf (wie im Zielbild) */
.container-nav {
    background: linear-gradient(to bottom, #fcfcfc 0%, #e0e0e0 100%) !important;
    border-bottom: 3px solid #b31d7e !important; /* Die lila Trennlinie */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Menüschrift mit maximaler Priorität dunkel machen */
.navbar .mod-menu, 
.navbar .nav-link, 
.navbar .metismenu a, 
.container-nav a {
    color: #333333 !important;
    opacity: 1 !important;
}

/* Hover-Zustand: Schrift wird lila beim Drüberfahren */
.navbar .nav-link:hover, 
.navbar .metismenu a:hover {
    color: #b31d7e !important;
}

/* 5. Aktiven Menüpunkt markieren (wie das graue 'Home' im Zielbild) */
.metismenu.mod-menu li.active > a, 
.metismenu.mod-menu li.current > a {
    background-color: #d0d0d0 !important;
    color: #000 !important;
}