/* ==========================================================================
   Header Re-Design 2026
   Invertiertes Design: weißer Hintergrund, blaue Schrift (#293262)
   Neues Logo: Logo_New_Cropped.svg (PNG-Fallback: Logo_New_Cropped.png)
   ========================================================================== */

/* ── Hauptnavigationsleiste (Desktop) ── */
#site-navigation {
  background: #ffffff !important;
  box-shadow: 0 2px 10px rgba(41, 50, 98, 0.12);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  /* Override fixed/sticky positioning from style.css + Foundation */
  position: relative !important;
  left: auto !important;
  top: auto !important;
  z-index: 10;
}

/* Remove Foundation sticky behaviour from header elements */
#masthead .sticky.is-stuck,
#masthead .sticky.is-at-top {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: 100% !important;
}

/* Title-bar (mobile) should also not be fixed */
.title-bar.sticky.is-stuck,
.title-bar.sticky.is-at-top {
  position: relative !important;
  top: auto !important;
}

/* ── Topbar-Container: mehr vertikaler Raum für Logo ── */
#site-navigation .topbar-container {
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}

/* ── Mobile / Tablet Title-Bar ── */
.title-bar {
  background: #ffffff !important;
  color: #293262 !important;
  box-shadow: 0 2px 6px rgba(41, 50, 98, 0.1);
  padding: 0.85rem 0.75rem;
  min-height: 60px;
  display: flex;
  align-items: center;
}

/* Hamburger-Icon auf weißem Hintergrund: dunkelblau */
.title-bar .menu-icon::after {
  background: #293262;
  box-shadow: 0 7px 0 #293262, 0 14px 0 #293262;
}
.title-bar .menu-icon:hover::after {
  background: #1a2040;
  box-shadow: 0 7px 0 #1a2040, 0 14px 0 #1a2040;
}

/* Title-Bar Texte und Logo-Link ── */
.title-bar-title a,
.title-bar .title a {
  color: #293262 !important;
}
.title-bar .show-on-scroll .title-bar-title a {
  color: #293262 !important;
}
.title-bar .show-on-scroll .title-bar-title a:hover {
  color: #1a2040 !important;
}

/* Such-Icon in der Title-Bar ── */
.title-bar .top-bar-search-icon,
.top-bar-search-icon {
  color: #293262 !important;
}

/* ── Mobile / Tablet Top-Bar Hintergrund ── */
@media screen and (min-width: 0em) and (max-width: 39.9375em) {
  .top-bar {
    background-color: rgba(255, 255, 255, 0.97) !important;
  }
}
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
  .top-bar {
    background-color: rgba(255, 255, 255, 0.97) !important;
  }
}

/* ── Allgemeine Menü-Links in der Top-Bar ── */
.top-bar .menu .home a {
  color: #293262 !important;
  font-weight: 700;
}
.top-bar .menu a {
  color: #293262 !important;
  font-weight: 700 !important;
}
.top-bar .menu a:hover:not(.button) {
  color: #1a2040 !important;
}

/* Desktop: alle Hintergrundfarben auf Nav-Links + li-Elemente unterdrücken ──
   Hinweis: #site-navigation IST selbst das .top-bar Element, daher kein .top-bar im Selektor */
@media screen and (min-width: 64em) {
  #site-navigation .menu li,
  #site-navigation .menu li:hover,
  #site-navigation .menu li.is-active,
  #site-navigation .menu li.current-menu-item,
  #site-navigation .menu li.current-menu-ancestor {
    background: transparent !important;
    background-color: transparent !important;
  }
  #site-navigation .menu li > a,
  #site-navigation .menu li > a:hover,
  #site-navigation .menu li > a:focus,
  #site-navigation .menu li.is-active > a,
  #site-navigation .menu li.current-menu-item > a,
  #site-navigation .menu li.current-menu-ancestor > a {
    background: transparent !important;
    background-color: transparent !important;
  }
}

/* Trennlinien zwischen Menüpunkten ── */
@media screen and (min-width: 40em) {
  .top-bar .menu li:not(:last-child) {
    border-right-color: #d0d4e8 !important;
  }
}

/* ── Allgemeines Dropdown-Submenü ── */
.top-bar .dropdown.menu .submenu {
  background-color: #ffffff !important;
  color: #293262 !important;
  border: 1px solid #d0d4e8 !important;
}

/* ── Rechtes Navigationsmenü (Desktop): Links ── */
.top-bar .topbar-container .top-bar-right .menu li:not(.is-submenu-item) a {
  color: #293262 !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
}

/* Mobile/Tablet Hover ── */
@media screen and (max-width: 63.9375em) {
  .top-bar .topbar-container .top-bar-right .menu li:not(.is-submenu-item) a:hover:not(.button) {
    background-color: #eef0fb !important;
    color: #1a2040 !important;
  }
}

/* Desktop Hover + aktiver Unterstrich via ::before ── */
@media screen and (min-width: 64em) {
  /* Position: relative damit ::before absolut positioniert werden kann */
  .top-bar .topbar-container .top-bar-right .menu li:not(.is-submenu-item) > a {
    position: relative;
    overflow: visible;
  }

  /* Basis-Unterstrich (unsichtbar) für alle Links ── */
  .top-bar .topbar-container .top-bar-right .menu li:not(.is-submenu-item) > a::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #00a285;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Hover: Unterstrich fährt von links ein ── */
  .top-bar .topbar-container .top-bar-right .menu li:not(.is-submenu-item) > a:hover:not(.button)::before {
    transform: scaleX(1);
  }

  .top-bar .topbar-container .top-bar-right .menu li:not(.is-submenu-item) a:hover:not(.button),
  .top-bar .topbar-container .top-bar-right .menu li:not(.is-submenu-item) a:focus:not(.button) {
    background-color: transparent !important;
    color: #1a2040 !important;
  }

  /* Aktive Seite: Unterstrich animiert beim Laden von links nach rechts ── */
  .top-bar .topbar-container .top-bar-right .menu li.current-menu-item:not(.is-submenu-item) > a::before,
  .top-bar .topbar-container .top-bar-right .menu li.current-menu-ancestor:not(.is-submenu-item) > a::before {
    animation: nav-underline-in 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.1s both;
  }
}

@keyframes nav-underline-in {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Dropdown-Pfeil für reguläre Menüpunkte ── */
.top-bar .topbar-container .top-bar-right .menu li:not(.is-submenu-item) a::after {
  border-color: #293262 transparent transparent !important;
}

/* Dropdown-Submenü der rechten Navigation: weißer Hintergrund */
.top-bar .topbar-container .top-bar-right .dropdown.menu .submenu {
  background-color: #ffffff !important;
  border: 1px solid #d0d4e8 !important;
  box-shadow: 0 4px 16px rgba(41, 50, 98, 0.12);
}

/* ── Dropdown Menu-Items ── */
.dropdown .menu-item {
  color: #293262 !important;
}
.dropdown .menu-item > a {
  color: #293262 !important;
}

/* Dropdown-Pfeil-Triangle: blau ── */
.dropdown .menu-item > a::after {
  border-color: #293262 transparent transparent !important;
}

/* Submenu-Links (Standard-Zustand) ── */
.dropdown .menu-item .is-dropdown-submenu a {
  color: #293262 !important;
}

/* ── Neues Logo (SVG, farbig) ── */
#home-logo a {
  color: #293262 !important;
}

/* Desktop: Neues SVG-Logo */
#home-logo a #home-logo-image {
  /* PNG-Fallback für Browser ohne SVG-Unterstützung */
  background-image: url(../images/Logo_New_Cropped.png) !important;
  /* SVG bevorzugt (überschreibt PNG-Zeile in modernen Browsern) */
  background-image: url(../images/Logo_New_Cropped.svg) !important;
  background-position: left center !important;
}

/* Tablet + Smartphone: mobiles Logo ab ≤63.9375em (~1024px) */
@media screen and (max-width: 63.9375em) {
  #home-logo a #home-logo-image {
    background-image: url(../images/Logo_New_Mobile.png) !important;
    background-image: url(../images/Logo_New_Mobile.svg) !important;
    background-position: left center !important;
  }
}

/* ── Nav ist jetzt in-flow (position: relative), nicht mehr fixed ──
   Der margin-top: 7.25rem auf .container war nur für die alte fixe Nav nötig.
   Hier global zurücksetzen, damit keine überflüssige Lücke entsteht. */
body:not(.home) .container {
  margin-top: 0 !important;
}