/* =========================================================

HAUPTMENÜ (Desktop-Ansicht)
========================================================= */

/* Farbe der regulären Menü-Links im Header */
.container-header .mod-menu a {
color: #003366 !important;
}

/* Farbe der Menü-Links beim Darüberfahren (Hover) und Anklicken */
.container-header .mod-menu a:hover,
.container-header .mod-menu a:focus {
color: #001a33 !important;
}

/* Aktiven Menüpunkt (die aktuell besuchte Seite) farblich hervorheben */
.container-header .mod-menu li.active > a {
color: #001a33 !important;
font-weight: bold;
}

/* =========================================================
2. UNTERMENÜ / DROPDOWN (Desktop-Ansicht)
========================================================= */

/* Farbe der Submenü-Links (Dropdown) */
.container-header .mod-menu .dropdown-item {
color: #003366 !important;
}

/* Submenü-Links beim Darüberfahren (Hover) */
.container-header .mod-menu .dropdown-item:hover,
.container-header .mod-menu .dropdown-item:focus {
color: #001a33 !important;
background-color: transparent !important;
}

/* Aktiven Submenü-Link farblich hervorheben */
.container-header .mod-menu .dropdown-item.active,
.container-header .mod-menu .dropdown-item:active {
color: #001a33 !important;
font-weight: bold;
background-color: transparent !important;
}

/* =========================================================
3. MOBILES MENÜ (Kompakte Ansicht)
========================================================= */

/* Untermenüpunkte im mobilen Menü dunkelblau färben */
.container-header .mod-menu ul li a,
.container-header .metismenu .mm-collapse .metismenu-item > a {
color: #003366 !important;
}

/* Hover-Zustand für mobile Untermenüs */
.container-header .mod-menu ul li a:hover,
.container-header .metismenu .mm-collapse .metismenu-item > a:hover,
.container-header .mod-menu ul li a:focus {
color: #001a33 !important;
background-color: transparent !important;
}

/* =========================================================
4. HAMBURGER-BUTTON (Die 3 Striche)
========================================================= */

/* Rahmenfarbe des Hamburger-Buttons */
.container-header .navbar-toggler {
border-color: #003366 !important;
}

/* Fallback 1: Falls Cassiopeia ein Font-Icon verwendet */
.container-header .navbar-toggler,
.container-header .navbar-toggler span,
.container-header .navbar-toggler i,
.container-header .navbar-toggler .icon-menu::before {
color: #003366 !important;
}

/* Fallback 2: Falls Cassiopeia Bootstrap 5 CSS-Variablen verwendet /
/ HINWEIS: Das %23 steht hier für die Raute (#) der Hex-Farbe! */
:root,
.container-header,
.container-header .navbar,
.container-header .mod-menu {
--bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23003366' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Zwingt das Icon, die obige Variable zu nutzen */
.container-header .navbar-toggler-icon {
background-image: var(--bs-navbar-toggler-icon-bg) !important;
}