/* =========================================
   Cassiopeia (Position: menu)
   Main Menu linksbündig + Texte weiß + Burger weiß
   ========================================= */
/* Theme-Variablen */
/* Grundflächen */
.mod-menu,
.mod-menu .mod-menu__sub,
.metismenu.mod-menu .metismenu-item {
  background-color: var(--menu-bg);
}
/* 1) Navbar im Header/Container-Nav nach links ausrichten */
.header .container-nav .navbar {
  justify-content: flex-start !important;
  align-items: center;
}

/* 2) Reihenfolge der Navbar-Elemente (Flex-Order) */
.header .container-nav .navbar-brand { order: 0; }
.header .container-nav .navbar-toggler { order: 1; margin-left: .5rem; }
.header .container-nav .navbar-collapse { order: 2; }

/* 3) UL (Menü) linksbündig */
.header .container-nav .mod-menu.navbar-nav {
  margin-left: 0 !important;
  margin-right: auto !important;
  justify-content: flex-start !important;
}

/* 4) Spacing & Optik */
.header .container-nav .navbar-nav > li > a,
.header .container-nav .navbar-nav > li > .nav-link {
  padding: .5rem .75rem;
}

/* =========================================
   Menütexte weiß
   ========================================= */
.header .container-nav .navbar-nav > li > a,
.header .container-nav .navbar-nav > li > .nav-link {
  color: #fff !important;
}

.header .container-nav .navbar-nav > li > a:hover,
.header .container-nav .navbar-nav > li > .nav-link:hover,
.header .container-nav .navbar-nav > li.active > a,
.header .container-nav .navbar-nav > li.active > .nav-link {
  color: #f0f0f0 !important; /* leicht abgesetztes Weißgrau */
}

/* Dropdown-Menü weißer Text auf dunklem Grund */
.header .container-nav .dropdown-menu {
  background-color: #333;
  border-radius: .5rem;
}
.header .container-nav .dropdown-menu a {
  color: #fff !important;
}
.header .container-nav .dropdown-menu a:hover {
  background-color: #444;
  color: #fff !important;
}

/* =========================================
   Burger-Icon weiß
   ========================================= */
.header .container-nav .navbar-toggler {
  border-color: #FFF; /* optional: Rahmen entfernen */
}
.header .container-nav .navbar-toggler-icon {
  background-image: none; /* Bootstrap-Standardgrafik deaktivieren */
  position: relative;
  width: 1.5em;
  height: 1.5em;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.header .container-nav .navbar-toggler-icon::before,
.header .container-nav .navbar-toggler-icon::after,
.header .container-nav .navbar-toggler-icon span {
  content: "";
  display: block;
  height: 2px;
  width: 100%;
  background-color: #fff;  /* Linienfarbe */
  margin: 4px 0;
}

/* =========================================
   Responsive Verhalten
   ========================================= */

/* Desktop (>=992px) */
@media (min-width: 992px) {
  .header .container-nav .navbar-collapse { flex-basis: auto; }
  .header .container-nav .navbar-nav { align-items: center; }
  .header .container-nav .navbar-brand img {
    max-height: 48px; height: auto; width: auto; /* Logo begrenzen */
  }
}

/* Mobile/Tablet (<992px) */
@media (max-width: 991.98px) {
  .header .container-nav .navbar { flex-wrap: wrap; }
  .header .container-nav .navbar-collapse { flex-basis: 100%; }
  .header .container-nav .navbar-nav {
    width: 100%;
    margin-right: 0 !important;
    gap: 0;
  }
  .header .container-nav .navbar-nav > li { width: 100%; }
  .header .container-nav .navbar-nav > li > a,
  .header .container-nav .navbar-nav > li > .nav-link {
    display: block;
    width: 100%;
    text-align: left;
    padding: .75rem 1rem;
  }
  .header .container-nav .navbar-nav > li + li > a {
    border-top: 1px solid rgba(255,255,255,.15); /* feine Trennung in Weiß */
  }
}

/* =========================================
   Optionales Styling
   ========================================= */

/* Umbrüche bei vielen Menüpunkten vermeiden */
.header .container-nav .navbar-nav { flex-wrap: nowrap; }

/* Sticky Header mit Glass-Effekt */
.header.sticky-top { backdrop-filter: saturate(180%) blur(6px); }

/* RTL-Support */
html[dir="rtl"] .header .container-nav .navbar { justify-content: flex-end !important; }
html[dir="rtl"] .header .container-nav .mod-menu.navbar-nav {
  margin-left: auto !important;
  margin-right: 0 !important;
  justify-content: flex-end !important;
}
.container-header .grid-child {
  padding: .5em;
    background-color: #0099FF; /*Hintergrund Farbe der Menüleiste*/
}

/* =========================================
   OVERRIDES (Text rot bei Hover, Text + Unterstrich rot bei Active)
   ========================================= */

/* Hover: nur Text rot */
.header .container-nav .navbar-nav > li > a:hover,
.header .container-nav .navbar-nav > li > .nav-link:hover,
.header .container-nav .navbar-nav .nav-link:focus {
  color: #ff0000 !important;
}

/* Active: Text + Unterstrich rot */
.header .container-nav .navbar-nav > li.active > a,
.header .container-nav .navbar-nav > li.active > .nav-link,
.header .container-nav .navbar-nav .nav-link.active,
.header .container-nav .navbar-nav .show > .nav-link {
  color: #ff0000 !important;
  border-bottom: 2px solid #ff0000 !important;
}

/* Dropdown-Menüs: Hover nur Text, Active Text + Unterstrich */
.header .container-nav .dropdown-menu a:hover,
.header .container-nav .dropdown-menu a:focus,
.header .container-nav .dropdown-menu .dropdown-item:hover,
.header .container-nav .dropdown-menu .dropdown-item:focus {
  color: #ff0000 !important;
}
.header .container-nav .dropdown-menu a.active,
.header .container-nav .dropdown-menu .dropdown-item.active {
  color: #ff0000 !important;
  border-bottom: 2px solid #ff0000 !important;
}

/* Mobile/Offcanvas (MetisMenu) */
.metismenu.mod-menu .metismenu-item > a:hover,
.metismenu.mod-menu .metismenu-item > a:focus {
  color: #ff0000 !important;
}
.metismenu.mod-menu .metismenu-item.active > a,
.metismenu.mod-menu .metismenu-item > a[aria-current="page"] {
  color: #ff0000 !important;
}

/* Generische Modul-Menüs (Fallback) */
.mod-menu a:hover,
.mod-menu a:focus {
  color: #ff0000 !important;
}