/* ===================================================
   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 (auch auf dem Handy nebeneinander) */
header.header,
.container-header,
.header-bar {
  display: flex !important;
  flex-direction: row !important; /* Zwingt die Elemente nebeneinander */
  flex-wrap: nowrap !important;   /* Verhindert das Rutschen nach unten auf dem Handy */
  align-items: center !important;  /* Perfekte vertikale Zentrierung auf gleicher Höhe */
  justify-content: space-between !important;
  width: 100% !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) {
  /* Menü: Overlay, das erst unterhalb des Headerbildes beginnt und nur so breit wie der Text ist */
  .container-banner .mod-menu {
    position: absolute !important;  /* statt fixed/static – bezieht sich auf .container-banner */
    top: 100% !important;           /* startet direkt unter dem Banner-Bild */
    left: 0 !important;
    width: fit-content !important;  /* nur so breit wie der längste Menüpunkt */
    height: auto !important;
    background-color: #0c426f !important;
    padding: 10px !important;
    z-index: 9999 !important;
    overflow-y: visible !important;
  }
  .container-banner ul.mod-menu li a {
    color: #ffffff !important;
    padding: 5px 15px !important;
    display: block !important;
  }
}

/* ===================================================
   6. MOBIL-ANPASSUNG FÜR LOGO & SEARCH
   =================================================== */
@media (max-width: 991px) {
  /* Der ECHTE Flex-Container-Kind ist .grid-child, nicht .navbar-brand */
  header.header .grid-child:not(.container-nav) {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  header.header .grid-child.container-nav {
    flex: 0 0 auto !important;
    max-width: 40% !important;
    display: flex !important;
    align-items: center !important; /* Container vertikal zentrieren */
    height: 100% !important;
  }

  /* Logo selbst: HTML-width-Attribut (220px) überschreiben */
  .navbar-brand,
  .navbar-brand .brand-logo {
    display: block !important;
    width: 100% !important;
  }
  .navbar-brand img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* Suchfeld kompakt halten und vertikal zentrieren */
  header .container-search,
  header .mod-finder,
  header .mod-search {
    width: auto !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
  }
  header .mod-finder {
    transform: translateY(-6px) !important; /* Wert nach Bedarf anpassen */
  }
  header input[type="search"],
  header input[type="text"],
  header .form-control {
    width: 120px !important;
  }
}