/* ===================================================
   1. HEADER-BEREICH (FARBE, ABSTÄNDE & HÖHE)
   =================================================== */

:root {
  --cassiopeia-header-bg: #0c426f !important;
  --template-bg-dark: #0c426f !important;
}

/* Header-Hintergrund & Höhe */
header.header,
.header,
.site-header,
.container-header,
.header-bar,
.container-nav {
  background-color: #0c426f !important;
  background-image: none !important;
  padding-top: 15px !important;
  padding-bottom: 15px !important;
  min-height: auto !important;
}

/* Flexbox-Ausrichtung: Logo links, Suchfeld rechts */
header.header,
.container-header,
.header-bar,
.grid-child {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

header .grid-child,
header .navbar {
  padding-top: 0.2rem !important;
  padding-bottom: 0.2rem !important;
  margin: 0 !important;
}

/* Logo-Anpassung */
.navbar-brand {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

.navbar-brand img {
  display: block;
}


/* ===================================================
   2. SUCHFELD & BUTTON (DUNKLES BLAU & FLACHER)
   =================================================== */

/* Text-Labels komplett ausblenden */
.search-inline label,
.mod-search label,
.mod-finder label,
header .form-label {
  display: none !important;
}

/* Such-Modul Container Zentrierung */
header .mod-finder,
header .mod-search,
header .search-inline,
header .form-inline,
header form {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Eingabefeld Styling & Entfernen des blauen Fokus-Leuchtens */
header input[type="search"],
header input[type="text"],
header .form-control {
  height: 32px !important;
  min-height: 32px !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  font-size: 0.85rem !important;
  line-height: 1 !important;
  background-color: #052642 !important;
  color: #ffffff !important;
  border: 1px solid #052642 !important;
  box-shadow: none !important;
  outline: none !important;
}

header input[type="search"]:focus,
header input[type="text"]:focus,
header .form-control:focus {
  background-color: #052642 !important;
  border-color: #052642 !important;
  box-shadow: none !important;
  outline: none !important;
}

header input::placeholder {
  color: #a0b2c6 !important;
}

/* Such-Button (Lupe) Styling */
header button[type="submit"],
header .mod-finder .btn,
header .mod-search .btn,
header .btn-primary {
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0 !important; /* Blendet Button-Text "Suchen" aus */
  background-color: #052642 !important;
  border: 1px solid #052642 !important;
  color: #ffffff !important;
}

header button[type="submit"]:hover,
header .btn-primary:hover {
  background-color: #021424 !important;
  border-color: #021424 !important;
}

/* Lupe-Icon auf dem Button wieder sichtbar machen */
header button[type="submit"] .icon-search,
header button[type="submit"] [class^="icon-"] {
  font-size: 1rem !important;
}


/* ===================================================
   3. HEADERBILD (FULL-WIDTH)
   =================================================== */

.container-banner,
.banner {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.container-banner .mod-custom,
.container-banner p,
.container-banner figure {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.container-banner img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  margin-bottom: 0 !important;
  vertical-align: bottom !important;
}

/* ===================================================
   4. MENÜ AUF DESKTOP (NUR AB 992px BILDSCHIRMBREITE)
   =================================================== */

@media (min-width: 992px) {

  /* Menü-Modul fliegend auf dem Headerbild */
  .container-banner .mod-menu,
  .container-banner nav {
    position: absolute !important;
    top: 8px !important;
    left: 5px !important;
    right: 0 !important;
    width: auto !important;
    z-index: 99 !important;
  }

  .container-banner ul.mod-menu {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .container-banner ul.mod-menu > li {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Hauptmenü Links */
  .container-banner ul.mod-menu > li > a {
    display: block !important;
    color: #0c426f !important;
    text-decoration: none !important;
    padding: 6px 20px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease;
  }

/* Hover-Effekt: Blauer Kasten mit weißer Schrift beim Drüberfahren */
.container-banner ul.mod-menu > li > a:hover,
.container-banner ul.mod-menu > li.active > a {
  background-color: #0c426f !important;
  color: #ffffff !important;
}


  /* Fokus-/Punktrahmen bei Links und Aufklapp-Buttons entfernen */
  .container-banner ul.mod-menu li a:focus,
  .container-banner ul.mod-menu li a:active,
  .container-banner ul.mod-menu li a:visited,
  .container-banner ul.mod-menu li button:focus,
  .container-banner ul.mod-menu li button:active,
  .container-banner ul.mod-menu li .mm-toggler:focus,
  .container-banner ul.mod-menu li .mm-toggler:active {
    outline: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
  }

  /* Dropdown-Container */
  .container-banner ul.mod-menu ul,
  .container-banner ul.mod-menu .dropdown-menu {
    background-color: #ffffff !important;
    border: 1px solid #0c426f !important;
    border-radius: 4px !important;
    padding: 5px 0 !important;
  }

  /* Standardzustand Untermenü-Links */
  .container-banner ul.mod-menu ul li a,
  .container-banner ul.mod-menu .dropdown-menu a {
    color: #0c426f !important;
    background-color: transparent !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    transition: font-weight 0.15s ease !important;
  }

  /* Hover Untermenü: Nur Fett & Unterstrichen */
  .container-banner ul.mod-menu ul li a:hover,
  .container-banner ul.mod-menu ul li a:focus,
  .container-banner ul.mod-menu .dropdown-menu a:hover {
    background-color: transparent !important;
    color: #0c426f !important;
    font-weight: 550 !important;
    text-decoration: underline !important;
    text-decoration-color: #0c426f !important;
    text-underline-offset: 4px !important;
  }
}

/* ===================================================
   5. MOBILES MENÜ / SANDWICH (NUR BIS 991px)
   =================================================== */

@media (max-width: 991px) {

  /* Sandwich-Button und mobiles Menü sauber unter dem Bild/Header platzieren */
  .container-banner .mod-menu,
  .container-banner nav {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    background-color: #ffffff !important; /* Hintergrundeinstellung für mobiles Menü */
    padding: 10px !important;
  }

  /* Mobile Links gut lesbar gestalten */
  .container-banner ul.mod-menu li a {
    color: #0c426f !important;
    padding: 10px 15px !important;
    display: block !important;
  }
}