/* =========================================================
   NRW spielt! - Menue-Refresh (Komplettpaket)
   Stufe 1 + Stufe 2 + alle Iterationen aus dem Entwicklungschat
   + Screenshot-Optik (v1.1.0)
   ---------------------------------------------------------
   Farb-Uebersicht (Screenshot-Werte, v1.1.0):
   Primaerfarbe Blau:       #003ea8   (Header / Mobile-Menue)
   Aktiver Tab Hellblau:    #2d5fb2   (Pille im Hauptmenue)
   Primaer-Dunkel (Hover):  #032d7a
   Akzent Gelb (CTA):       #f2b705
   Akzent-Dunkel (Hover):   #d99a00
   Text auf Dunkel:         #ffffff
   Text auf Gelb:           #111111
   Dropdown-Hover-BG:       #f5f7fb
   Topbar-Hintergrund:      #f4f6fa
   Topbar-Text:             #555c66
   ========================================================= */


/* =========================================================
   STUFE 1 - Basis-Refresh
   ========================================================= */

/* 1) HEADER - sanfter Schatten */
header.home_hader {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  position: relative;
  z-index: 100;
}


/* 2) TOPBAR - dezenter, kleiner */
header.home_hader .header-topbar {
  background-color: #f4f6fa;
  padding: 6px 15px;
  font-size: 13px;
}

header.home_hader .topbar_row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header.home_hader .info_header-box,
header.home_hader .info_header-box span {
  color: #555c66;
  font-size: 13px;
}

header.home_hader .info_header-box i {
  color: #003ea8;
  margin-right: 4px;
}

header.home_hader ul.team_social {
  margin: 0;
  padding: 0;
}

header.home_hader ul.team_social li a {
  color: #555c66;
  font-size: 14px;
  transition: color 0.2s ease;
}

header.home_hader ul.team_social li a:hover {
  color: #003ea8;
}

/* Header-Hintergrund auf das kraeftige Screenshot-Blau ziehen.
   Bei manchen Themes liegt das Blau am inneren navbar-Container; daher
   beide Ebenen einfaerben, damit die Leiste durchgaengig wirkt. */
header.home_hader nav.navbar,
header.home_hader .main_menu_design,
header.home_hader .header-bottom {
  background-color: #003ea8;
}


/* 3) LOGO - maximale Breite begrenzen */
header.home_hader .navbar-brand {
  padding: 8px 0;
  display: inline-block;
}

header.home_hader .navbar-brand img,
header.home_hader .navbar-brand img.img-fluid {
  width: auto !important;
  max-width: 240px !important;
  height: auto !important;
  max-height: 64px !important;
  transition: max-height 0.25s ease;
}

header.home_hader nav.navbar .col-md-3 {
  flex: 0 0 auto;
  width: auto;
  max-width: 280px;
}

header.home_hader nav.navbar .col-md-9 {
  flex: 1 1 auto;
  width: auto;
}


/* 4) HAUPTMENUE - Layout und Typografie */
:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav).navbar-nav {
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
}

:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li.menu-item {
  position: relative;
}

:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li.menu-item > a,
body header.home_hader :is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li.menu-item > a,
body header.home_hader :is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li.menu-item.nav-item > a.nav-link {
  text-transform: none !important;
  letter-spacing: 0.2px !important;
  font-family: 'Raleway', 'Roboto', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: #ffffff !important;
  padding: 10px 16px !important;
  border-radius: 8px !important;
  white-space: nowrap;
  position: relative;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

/* Spans/inner-Elemente innerhalb der Menue-Links auch mixed-case erzwingen */
:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li.menu-item > a,
:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li.menu-item > a *,
:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) .nav-link,
:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) .nav-link * {
  text-transform: none !important;
  letter-spacing: 0.2px !important;
}

/* HOVER: weisser Hintergrund, blaue Schrift (Mitmachen-CTA + Lupe + alle
   mitmachen-Varianten ausgenommen) */
:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li.menu-item:not(#menu-item-112639):not(.menu-cta):not(.nrw-search-item):not([id*="mitmachen"]) > a:hover,
:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li.menu-item:not(#menu-item-112639):not(.menu-cta):not(.nrw-search-item):not([id*="mitmachen"]) > a:focus,
body header.home_hader :is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li.menu-item:not(#menu-item-112639):not(.menu-cta):not(.nrw-search-item):not([id*="mitmachen"]) > a:hover,
body header.home_hader :is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li.menu-item:not(#menu-item-112639):not(.menu-cta):not(.nrw-search-item):not([id*="mitmachen"]) > a:focus {
  background-color: #ffffff !important;
  color: #003ea8 !important;
  opacity: 1 !important;
}

/* Wenn ein Punkt offen ist (Dropdown sichtbar), Hover-Optik behalten */
:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li.menu-item:not(#menu-item-112639):not(.menu-cta):not(.nrw-search-item):not([id*="mitmachen"]):hover > a,
:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li.menu-item:not(#menu-item-112639):not(.menu-cta):not(.nrw-search-item):not([id*="mitmachen"]):focus-within > a {
  background-color: #ffffff !important;
  color: #003ea8 !important;
}


/* 5) AKTIVE SEITE - weisser Hintergrund + blaue Schrift + gelber Unterstrich */
:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li.current-menu-item > a,
:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li.current-menu-parent > a,
:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li.current-page-ancestor > a,
body header.home_hader :is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li.current-menu-item > a,
body header.home_hader :is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li.current-menu-parent > a,
body header.home_hader :is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li.current-page-ancestor > a {
  background-color: #ffffff !important;
  color: #003ea8 !important;
  padding: 10px 16px !important;
  border-radius: 8px !important;
  position: relative;
}

/* Hover auf aktiven Punkt: dezent dunkleres Weiss, Unterstrich bleibt */
:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li.current-menu-item > a:hover,
:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li.current-menu-parent > a:hover,
:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li.current-page-ancestor > a:hover {
  background-color: #f5f7fb !important;
  color: #003ea8 !important;
}

/* Gelber Unterstrich nur am aktiven Punkt */
:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li.current-menu-item > a::after,
:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li.current-menu-parent > a::after,
:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li.current-page-ancestor > a::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -4px;
  height: 3px;
  background-color: #f2b705;
  border-radius: 2px;
  pointer-events: none;
}

/* Wenn der aktive Punkt der Mitmachen-CTA ist, KEIN Unterstrich (Pill bleibt gelb) */
:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li#menu-item-112639.current-menu-item > a::after,
:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li#menu-item-112639.current-menu-parent > a::after {
  content: none;
}


/* CHEVRONS: 180-Grad-Drehung beim Hover (Dropdown signalisieren).
   Theme nutzt Font-Awesome <i> innerhalb der Links - wir drehen das i-Element
   oder gerendertes ::after, je nachdem was vorhanden ist. */
:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li.menu-item-has-children > a i,
:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li.menu-item-has-children > a > .fa,
:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li.menu-item-has-children > a > .fas,
:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li.menu-item-has-children > a > svg,
:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li.dropdown > a i,
:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li.dropdown > a > .fa,
:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li.dropdown > a > .fas,
:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li.dropdown > a > svg {
  transition: transform 0.25s ease;
  display: inline-block;
}

:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li.menu-item-has-children:hover > a i,
:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li.menu-item-has-children:hover > a > .fa,
:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li.menu-item-has-children:hover > a > .fas,
:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li.menu-item-has-children:hover > a > svg,
:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li.menu-item-has-children:focus-within > a i,
:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li.dropdown:hover > a i,
:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li.dropdown:hover > a > .fa,
:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li.dropdown:hover > a > .fas,
:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li.dropdown:focus-within > a i {
  transform: rotate(180deg);
}


/* 6) CTA-BUTTON: Mitmachen hervorheben - Screenshot-Gelb.
   Wir greifen sowohl per ID (menu-item-112639) als auch per generischem
   Klassenselektor (letztes <li> mit Klasse 'menu-cta' oder dem Slug 'mitmachen'),
   damit es robust ist, falls die ID auf dem neuen Menue anders ist. */
:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li#menu-item-112639 > a,
:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li.menu-cta > a,
:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li.nrw-mitmachen > a,
:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li[id*="mitmachen"] > a,
body header.home_hader :is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li#menu-item-112639 > a,
body header.home_hader :is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li.menu-cta > a,
body header.home_hader :is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li[id*="mitmachen"] > a,
/* Hover-Whitelist: Mitmachen darf NICHT auf weiss/blau gehen */
:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li#menu-item-112639 > a:hover,
:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li.menu-cta > a:hover,
:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li[id*="mitmachen"] > a:hover,
:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li#menu-item-112639 > a:focus,
:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li.menu-cta > a:focus {
  background-color: #f2b705 !important;
  color: #111111 !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  text-transform: none !important;
  letter-spacing: 0.2px !important;
  padding: 12px 24px !important;
  margin-left: 8px;
  border-radius: 999px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

/* Hover speziell etwas dunkler */
:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li#menu-item-112639 > a:hover,
:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li.menu-cta > a:hover,
:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li[id*="mitmachen"] > a:hover {
  background-color: #d99a00 !important;
}

:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li#menu-item-112639 > a:hover,
:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li#menu-item-112639 > a:focus {
  background-color: #d99a00 !important;
  color: #111111 !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li#menu-item-112639.current-menu-item > a::after,
:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li#menu-item-112639.current-menu-parent > a::after {
  display: none;
}


/* 7) DROPDOWN-PANEL - Screenshot-Stil (gross, weich, stark gerundet) */
/* Theme-Override: .navbar-nav .dropdown a setzt blauen Hintergrund auf alle
   Dropdown-Links - wir killen das NUR innerhalb des .dropdown-menu (Sub-Liste),
   nicht auf dem Top-Level-Link selbst (sonst killen wir den Mitmachen-CTA). */
header.home_hader .navbar-nav .dropdown-menu li a,
header.home_hader .navbar-nav .dropdown .dropdown-menu li a,
.navbar-nav .dropdown .dropdown-menu li a,
body header.home_hader :is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) .dropdown-menu li a {
  background-color: transparent !important;
  background-image: none !important;
  color: #1f1f1f !important;
}

/* Hover/Focus innerhalb des Dropdowns */
header.home_hader .navbar-nav .dropdown .dropdown-menu li a:hover,
header.home_hader .navbar-nav .dropdown .dropdown-menu li a:focus,
.navbar-nav .dropdown .dropdown-menu li a:hover,
.navbar-nav .dropdown .dropdown-menu li a:focus,
body header.home_hader :is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) .dropdown-menu li a:hover,
body header.home_hader :is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) .dropdown-menu li a:focus {
  background-color: #f5f7fb !important;
  color: #003ea8 !important;
}

:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) .dropdown-menu {
  background-color: #ffffff !important;
  border: none !important;
  border-radius: 16px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14) !important;
  /* Wichtig: kein margin-top, sondern padding-top fuer Hover-Bruecke */
  margin-top: 0 !important;
  padding: 22px 0 !important;
  padding-top: 30px !important; /* enthaelt 8px Hover-Bruecke */
  background-clip: padding-box;
  min-width: 330px !important;
  overflow: hidden;
}

:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) .dropdown-menu li a {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-family: 'Raleway', 'Roboto', sans-serif;
  font-size: 17px !important;
  font-weight: 600 !important;
  color: #1f1f1f !important;
  padding: 14px 24px !important;
  border-radius: 0 !important;
  display: block;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}

:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) .dropdown-menu li a:hover,
:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) .dropdown-menu li a:focus {
  background-color: #f5f7fb !important;
  color: #003ea8 !important;
}

:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) .dropdown-menu li.current-menu-item > a {
  background-color: rgba(0, 62, 168, 0.06) !important;
  color: #003ea8 !important;
  font-weight: 700 !important;
}

/* Dropdown-Panel direkt unter dem Menuepunkt andocken (keine Luecke).
   Das Theme rendert das Menue auf einer Header-Reihe, die etwas hoeher ist
   als die Hover-Pille selbst - wir verankern das Dropdown an der unteren
   Header-Kante, indem wir es am gesamten <header> oder am navbar-Container
   ausrichten und gleichzeitig den Innenabstand des Dropdowns als Hover-
   Bruecke nutzen. */
:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li {
  position: relative;
}

:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li > .dropdown-menu {
  top: calc(100% + 0px) !important;
  margin-top: 0 !important;
}

/* Hover-Bruecke: unsichtbarer Streifen unter dem Menuepunkt, der das
   Dropdown am Leben haelt, wenn die Maus den blauen Spalt durchquert. */
:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li.menu-item-has-children > a::before,
:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li.dropdown > a::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -16px;
  height: 16px;
  background: transparent;
  pointer-events: auto;
  z-index: 1;
}

/* Dropdown bekommt eine extra Padding-Zone oben, die als Hover-Bruecke dient,
   ohne dass man eine Luecke wahrnimmt - der Schatten beginnt erst darunter. */
:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li > .dropdown-menu {
  padding-top: 16px !important;
}

/* Soft Fade-in fuer Dropdowns (Screenshot-Stil)
   v1.3.4: NUR auf Desktop (>= 992px), da Touch keinen :hover/:focus-within hat
   und das Dropdown auf Mobile sonst unsichtbar bleibt. */
@media (min-width: 992px) {
  :is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li.menu-item-has-children > .dropdown-menu,
  :is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li.dropdown > .dropdown-menu {
    display: block !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    pointer-events: none;
  }

  :is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li.menu-item-has-children:hover > .dropdown-menu,
  :is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li.menu-item-has-children:focus-within > .dropdown-menu,
  :is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li.dropdown:hover > .dropdown-menu,
  :is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li.dropdown:focus-within > .dropdown-menu,
  :is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) .dropdown-menu:hover {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
  }
}

/* Mobile (< 992px): Dropdowns sind im Default versteckt, klappen via .open auf. */
@media (max-width: 991px) {
  :is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li.menu-item-has-children > .dropdown-menu,
  :is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li.dropdown > .dropdown-menu {
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
  }
  :is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li.menu-item-has-children.open > .dropdown-menu,
  :is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li.dropdown.open > .dropdown-menu {
    display: block;
  }
}


/* 8) BURGER-BUTTON (Mobile) - Basis */
button.navbar-toggler {
  border: none !important;
  background-color: #003ea8 !important;
  padding: 10px 12px !important;
  border-radius: 6px;
  transition: background-color 0.2s ease;
}

button.navbar-toggler:hover,
button.navbar-toggler:focus {
  background-color: #032d7a !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
}

button.navbar-toggler .navbar-toggler-icon {
  color: #ffffff;
  font-size: 22px;
}


/* 9) MOBILE-MENUE (< 992px) */
@media (max-width: 991px) {

  header.home_hader .navbar-brand img,
  header.home_hader .navbar-brand img.img-fluid {
    max-width: 180px !important;
    max-height: 52px !important;
  }

  :is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav).navbar-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 10px 0;
    background-color: #003ea8;
  }

  :is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li.menu-item > a {
    padding: 14px 18px !important;
    font-size: 16px;
    border-radius: 0;
    text-align: left;
  }

  :is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li#menu-item-112639 > a {
    margin: 8px 14px;
    text-align: center;
    border-radius: 8px;
  }

  :is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) .dropdown-menu {
    position: static !important;
    box-shadow: none !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
    margin: 0 14px 6px 14px !important;
    border-radius: 6px !important;
    padding-top: 8px !important;
  }

  :is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) .dropdown-menu li a {
    color: #ffffff !important;
    padding: 12px 14px !important;
  }

  :is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) .dropdown-menu li a:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
  }

  header.home_hader .header-topbar {
    font-size: 12px;
    padding: 4px 10px;
  }
}

/* Kleine Bildschirme (< 480px) - Topbar verstecken */
@media (max-width: 480px) {
  header.home_hader .header-topbar {
    display: none;
  }
}


/* =========================================================
   FIX 1 - Dropdown-Items lesbar (aus Chat-Turn 8)
   transparenter li-Hintergrund, sodass Theme-Blau nicht durchscheint
   ========================================================= */

:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) .dropdown-menu li,
:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) .dropdown-menu li.menu-item {
  background-color: transparent !important;
  background: transparent !important;
}


/* =========================================================
   FIX 2 - Hover-Bruecke fuer Dropdowns (aus Chat-Turn 9)
   Verhindert, dass Dropdown beim Mausweg nach unten zuklappt
   ========================================================= */

/* Unsichtbare Hover-Bruecke unter jedem Menuepunkt mit Dropdown */
:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li.menu-item-has-children > a::before,
:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li.dropdown > a::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -14px;
  height: 14px;
  background: transparent;
  pointer-events: auto;
}

/* Sicherstellen, dass das li hover-faehig bleibt */
:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li.menu-item-has-children,
:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li.dropdown {
  position: relative;
}

/* Hinweis: Sichtbarkeits-Logik (display/opacity) liegt jetzt im
   Dropdown-Panel-Block oben (Soft Fade-in). Hier nur noch die
   unsichtbare Hover-Bruecke. */


/* =========================================================
   STUFE 2 - Suchfeld, Icons, Burger
   ========================================================= */

/* 1) SUCH-LUPE - Container */
.nrw-search-wrap {
  display: inline-flex;
  align-items: center;
  position: relative;
  margin-left: 0;
  margin-right: 6px;
}

/* Lupen-Button - Hover: weisser Kreis, blaue Lupe (gleiche Sprache wie Menuepunkte) */
.nrw-search-toggle {
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 16px;
  width: 40px;
  height: 40px;
  padding: 0;
  cursor: pointer;
  border-radius: 999px;
  transition: background-color 0.2s ease, color 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nrw-search-toggle:hover,
.nrw-search-toggle:focus,
.nrw-search-wrap.is-open .nrw-search-toggle {
  background-color: #ffffff;
  color: #003ea8;
  outline: none;
}

/* Suchfeld - klappt nach LINKS aus (Lupe steht links vor erstem Menuepunkt) */
.nrw-search-field {
  position: absolute !important;
  top: 50% !important;
  right: 100% !important;
  left: auto !important;
  transform: translateY(-50%) !important;
  margin-right: 8px !important;
  margin-left: 0 !important;
  width: 0;
  overflow: hidden;
  opacity: 0;
  transition: width 0.3s ease, opacity 0.2s ease;
  pointer-events: none;
}

/* Wenn Suche offen: Wrapper bekommt .is-open */
.nrw-search-wrap.is-open .nrw-search-field {
  width: 260px;
  opacity: 1;
  pointer-events: auto;
}

/* Eingabefeld */
.nrw-search-field input[type="search"],
.nrw-search-field input[type="text"] {
  width: 100%;
  padding: 8px 14px;
  border: none;
  border-radius: 999px;
  background-color: #ffffff;
  color: #1a1a1a;
  font-size: 14px;
  font-family: 'Raleway', 'Roboto', sans-serif;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  outline: none;
}

.nrw-search-field input[type="search"]::placeholder,
.nrw-search-field input[type="text"]::placeholder {
  color: #888888;
}

.nrw-search-field input:focus {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

/* Lupe ist erstes Element im Menue - linker Abstand 0, rechter 8 */
:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li.nrw-search-item {
  margin-right: 8px;
  margin-left: 0;
}


/* =========================================================
   2) ICONS VOR DEN MENUEPUNKTEN
   ========================================================= */

/* Inline-flex auf den a-Tags damit Icon und Text nebeneinander */
:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li#menu-item-65868 > a,
:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li#menu-item-112626 > a,
:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li#menu-item-112637 > a,
:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li#menu-item-112639 > a {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
}

:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li#menu-item-65868 > a::before,
:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li#menu-item-112626 > a::before,
:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li#menu-item-112637 > a::before,
:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li#menu-item-112639 > a::before {
  font-family: "Font Awesome 5 Free", "FontAwesome" !important;
  font-weight: 900 !important;
  font-style: normal !important;
  display: inline-block !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  font-size: 13px;
  line-height: 1;
  vertical-align: middle;
  opacity: 0.95;
}

/* Spieletreffs: Karten-Pin (fa-map-marker-alt) */
:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li#menu-item-65868 > a::before {
  content: "\f3c5";
}

/* Veranstaltungen: Kalender (fa-calendar-alt) */
:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li#menu-item-112626 > a::before {
  content: "\f073";
}

/* Ueber uns: Info-Kreis (fa-info-circle, sichtbarer als fa-info) */
:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li#menu-item-112637 > a::before {
  content: "\f05a" !important;
}

/* Mitmachen-Button: Icon und Text mittig */
:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li#menu-item-112639 > a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

:is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li#menu-item-112639 > a::before {
  content: "\f4c4";  /* fa-hand-holding-heart */
  font-size: 14px;
  vertical-align: middle;
}


/* =========================================================
   3) BURGER-BUTTON (klassischer Hamburger, kein X-Morph)
   ========================================================= */

/* Font-Awesome-Bars-Icon ausblenden, eigenes Markup uebernimmt */
button.navbar-toggler .navbar-toggler-icon {
  display: none !important;
}

button.navbar-toggler {
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Drei Striche */
button.navbar-toggler::before,
button.navbar-toggler::after,
button.navbar-toggler .nrw-burger-mid {
  content: "";
  position: absolute;
  left: 50%;
  width: 22px;
  height: 2.5px;
  background-color: #ffffff;
  border-radius: 2px;
  transform: translateX(-50%);
  transition: transform 0.3s ease, top 0.3s ease, opacity 0.2s ease;
}

button.navbar-toggler::before  { top: 13px; }
button.navbar-toggler .nrw-burger-mid { top: 21px; }
button.navbar-toggler::after   { top: 29px; }

/* WICHTIG: Burger bleibt im offenen Zustand klassisch (kein X-Morph) */
button.navbar-toggler:not(.collapsed)::before,
button.navbar-toggler[aria-expanded="true"]::before {
  top: 13px !important;
  transform: translateX(-50%) !important;
}

button.navbar-toggler:not(.collapsed) .nrw-burger-mid,
button.navbar-toggler[aria-expanded="true"] .nrw-burger-mid {
  opacity: 1 !important;
  transform: translateX(-50%) !important;
  top: 21px !important;
}

button.navbar-toggler:not(.collapsed)::after,
button.navbar-toggler[aria-expanded="true"]::after {
  top: 29px !important;
  transform: translateX(-50%) !important;
}

/* Fokus-Ring */
button.navbar-toggler:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5);
}


/* =========================================================
   FIX 3 - Unterpunkte (Mobile-Dropdown) weiss fuer bessere Lesbarkeit
   (aus Chat-Turn 16)
   ========================================================= */

@media (max-width: 991px) {

  :is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) .dropdown-menu li a,
  :is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) .dropdown-menu li.menu-item > a {
    color: #ffffff !important;
  }

  :is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) .dropdown-menu li a:hover,
  :is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) .dropdown-menu li a:focus,
  :is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) .dropdown-menu li.menu-item > a:hover,
  :is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) .dropdown-menu li.menu-item > a:focus {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
  }

  /* Aktive Sub-Items: gelber Akzent */
  :is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) .dropdown-menu li.current-menu-item > a,
  :is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) .dropdown-menu li.current_page_item > a {
    color: #f4b400 !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    font-weight: 600 !important;
  }

  /* Such-Lupe auf Mobile: Suchfeld immer offen */
  .nrw-search-wrap {
    width: 100%;
    margin: 8px 14px;
    justify-content: center;
  }

  .nrw-search-toggle {
    display: none;
  }

  .nrw-search-field {
    position: static !important;
    transform: none !important;
    right: auto !important;
    left: auto !important;
    width: 100% !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    overflow: visible;
    margin: 0 !important;
  }

  /* Icons auf Mobile etwas groesser */
  :is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li#menu-item-65868 > a::before,
  :is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li#menu-item-112626 > a::before,
  :is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li#menu-item-112637 > a::before,
  :is(ul#menu-neues-menu, ul#menu-menu-1, header.home_hader ul.navbar-nav) > li#menu-item-112639 > a::before {
    font-size: 15px;
    width: 22px;
    text-align: center;
    margin-right: 10px;
  }
}

/* ENDE */