.top-menu-dropdown {
    width:170px;
    margin-top:-5px;
    height:29px;
    border-left:2px solid #fff !important;
    border-right:2px solid #fff !important;
    background-color: #d42828;
    border-top:0px;
    border-bottom:0px;
    font-size: 13px;
    border-radius: 0px;
    text-align:left;
    font-weight:600;

   }

   .top-menu-dropdown:hover {
    color: #fff;
    background-color: #d42828;
    border-color:  #fff;
  }
   

#login-data .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show > .btn-primary.dropdown-toggle {
  color: #fff;

  background-color:#d42828;

  border-color: #fff

}

ul.dropdown-menu-extra-style  li a {
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 400;
    padding-left: 0px;
    padding-top: 8x;
    padding-bottom: 8px;
  
  }

  ul.dropdown-menu-extra-style  li {
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 400;
    padding-left: 15px;
    padding-top: 8px;
    padding-bottom: 8px;
  
  }

  ul.dropdown-menu-extra-style  a:hover {
    color: #fff !important;
    background-color: #198fc5  !important;
  }


ul.dropdown-menu-extra-style {
    position: absolute;
    top: 49px;
    margin-left: 0px !important;
    margin-right: 0 !important;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 170px;
    padding: 0;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-top: 0;
    padding-bottom: 0 !important;
    font-size: 13px;
    text-align: left;
    list-style: none;
    opacity: 1;
    background-clip: padding-box;
    border: 0px solid #198fc5 ;
    border-bottom: 1px solid #fff;
    border-radius: 0;
    background-color: #198fc5 ;
  }



.mega > a:hover {
    color: #000 !important;
    background-color: #eee !important;
  }



/* Eltern-LI hat .mega-menu */
.dropdown.mega-menu > .dropdown-menu.show,
.mega-menu > .dropdown-menu.show {
  display: flex !important;
}


/* Top-Level Mega-Dropdown: soll wachsen und Spalten ermöglichen */
.mega-menu > .dropdown-menu {
  display: none;                 /* geschlossen per Default */
  flex-direction: row;           /* oder 'column' - je nach Layout */
  gap: 20px;
  height: auto !important;       /* Container passt sich an */
}

/* Sichtbar-Zustand: Flex statt Block */
.mega-menu > .dropdown-menu.show {
  display: flex !important;
}

/* 3. Ebene (und tiefer): im normalen Flow halten */
.mega-menu .dropdown-menu .dropdown-menu {
  position: static !important;   /* NICHT absolut positionieren */
  display: block !important;     /* im Flow sichtbar (wenn geöffnet) */
  margin: 0;
  padding: 0;
}


/* 1) Standard: Alle Dropdowns in .mega-menu sind geschlossen */
.mega-menu > .dropdown-menu {
  display: none !important; /* geschlossen beim Laden */
}



/* 3) Wenn geöffnet, soll die erste Ebene flex sein */
.mega-menu > .dropdown-menu.show {
  display: flex !important;
  flex-direction: row;       /* oder column */
  gap: 20px;
  height: auto !important;
}

/* 4) 3. Ebene (und tiefer) im Flow halten, damit der Container mitwächst */
.mega-menu .dropdown-menu .dropdown-menu {
  position: static !important;
  display: block !important; /* im Flow sichtbar, wenn geöffnet */
  margin: 0;
  padding: 0;
}


/* Mega: Grundzustand geschlossen, aber animierbar */
#main-menu > li.mega-menu > .dropdown-menu {
  display: flex !important;       /* du willst flex beim Öffnen; wir halten es ständig auf flex */
  flex-direction: row;            /* oder column */
  gap: 20px;
  max-height: none;               /* wir animieren nicht die Höhe – bleibt stabil */
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity .22s ease-out,
    transform .22s ease-out,
    visibility 0s linear .22s;
  will-change: opacity, transform;
  position: absolute;             /* volle Breite → wie zuvor beschrieben */
  left: 0; right: 0; top: 100%;
}

/* Mega sichtbar */
#main-menu > li.mega-menu > .dropdown-menu.show {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity .28s ease-out,
    transform .28s ease-out,
    visibility 0s;
}

/* Tiefe Ebenen im Flow lassen (wichtig damit Mega-Container mitwächst) */
#main-menu > li.mega-menu > .dropdown-menu .dropdown-menu {
  position: static !important;
  display: block !important;
}

/* Optional: weicher Hintergrund / Karteffekt */
#main-menu > li.mega-menu > .dropdown-menu {
  background: #eee;
  box-shadow: 0px 0px 5px 2px rgba(0,93,174,0.5);
  border:1px solid #198fc5 ;
  padding: 0px 0px;
}

/* Nicht Mega-Menu Grundzustand: unsichtbar, blickdicht, leicht nach oben verschoben */
/* Nicht Mega-Menu Grundzustand: unsichtbar, blickdicht, leicht nach oben verschoben */
/* Nicht Mega-Menu Grundzustand: unsichtbar, blickdicht, leicht nach oben verschoben */
#main-menu > li:not(.mega-menu) > .dropdown-menu {
  display: block;                 /* wichtig: nicht none (sonst kann nicht animiert werden) */
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity .50s ease-out,
    transform .50s ease-out,
    visibility 0s linear .22s;
  will-change: opacity, transform;
}

/* Sichtbar-Zustand durch .show (wird per JS vergeben) */
#main-menu > li:not(.mega-menu) > .dropdown-menu.show {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity .50s ease-out,
    transform .50s ease-out,
    visibility 0s linear .22s;

}

/* Optional: Schatten/Weichheit */
#main-menu > li:not(.mega-menu) > .dropdown-menu {
  box-shadow: 0px 0px 5px 2px rgba(0,93,174,0.5);
 
}


  ul.dropdown-menu {
    opacity:1 ;
    border: 1px solid #198fc5 ;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: rgb(0, 93, 174);
    border-bottom: 0px;
    border-radius: 0;
    background-color: #eee;
  }


  /* 1) Das Main-Menü als Positionierungs-Referenz (Containing Block) */
#main-menu {
  position: relative;  /* wichtig, damit die Dropdowns relativ hierzu gestreckt werden */
  z-index: 1;          /* optional: über Seite legen */
}

/* 2) Das Mega-Menü-Item selbst nicht positionieren, sonst wird es zum Containing Block */
#main-menu > li.mega-menu {
  position: static;    /* Standard ist static – explizit gesetzt, um Klarheit zu schaffen */
  overflow: visible;   /* falls Themes overflow beschneiden */
}

/* 3) Mega-Dropdown auf volle Breite von #main-menu strecken */
#main-menu > li.mega-menu > .dropdown-menu {
  /* Sichtbarkeit steuerst du bereits via JS/ Klassen */
  display: none;                         /* default geschlossen */
  position: absolute;                    /* bleibt im Layer überm Menü */
  top: 100%;                             /* direkt unter dem Main-Menü */
  left: 0;                               /* links an #main-menu anlegen */
  right: 0;                              /* rechts an #main-menu anlegen */
  width: auto;                           /* Breite aus left/right */
  margin: 0;                             /* saubere Kanten */
  border-top-left-radius: 0;             /* optional: bündig mit Menüleiste */
  border-top-right-radius: 0;
  box-sizing: border-box;
  z-index: 1000;                         /* über Content */
}

/* 4) Wenn offen, soll’s Flex sein (dein Layout) */
#main-menu > li.mega-menu > .dropdown-menu.show {
  display: flex !important;              /* statt block */
  flex-direction: row;                   /* oder column – je nach Design */
  gap: 1px;
  height: auto !important;               /* Container wächst mit Inhalt */
}


/* Alle “normalen” Spalten behalten ihre natürliche Breite */
#main-menu > li.mega-menu > .dropdown-menu.show > li {
  flex: 0 0 auto;     /* nicht wachsen */
  min-width: 0;
}

/* Die LETZTE Spalte füllt den Rest */
#main-menu > li.mega-menu > .dropdown-menu.show > li:last-child {
  flex: 1 1 auto;     /* darf wachsen und füllt rechts auf */
  min-width: 0;       /* verhindert Overflow mit langen Texten */
}


/* 5) Untermenüs (3. Ebene und tiefer) im Flow halten, damit das äußere UL mitwächst */
#main-menu > li.mega-menu > .dropdown-menu .dropdown-menu {
  position: static !important;           /* NICHT absolut platzieren */
  display: block !important;             /* im normalen Fluss */
  margin: 0;
  padding: 0;
}

li.mega.last-child {
  margin-left: auto;     /* füllt den restlichen Platz */
} 


/* Standard: Nicht-Mega-Dropdowns sind zu, Mega bleibt unberührt */
#main-menu > li:not(.mega-menu) > .dropdown-menu {
  display: none;
}




/* Falls dein Theme eine globale :hover-Regel hat, die öffnet,
   neutralisieren wir sie für Nicht-Mega gezielt: */
#main-menu > li:not(.mega-menu):hover > .dropdown-menu {
  /* leer lassen – Anzeige steuert jQuery */
}



.navbar ul li {
padding-right: 0;
padding-left: 0;
border-bottom: 1px solid #fff;
}

.mega > a.dropdown-item {

  font-size: 28px !important;
  font-weight: 600 !important;
  color: #198fc5   !important;
}

.abmelden {

  background-color: #ccc !important;


}

.msuchen {

  background-color: #198fc5  !important;

}

  @media (min-width: 992px) {

     .mega {
      border-right:1px solid #198fc5 ;
      margin-left:1px;
     }

     .mega ul.dropdown-menu {

      border:0px solid #198fc5 ;
     }

    .navbar-expand-lg ul li ul li a {
      border-right: 0px solid #fff;
      line-height: 40px;
      height: 40px;
      padding-left:18px;
      padding-top: 0px;
      padding-right: 18px;
      padding-bottom: 12px;
    }

    ul.dropdown-menu {
     
      border-bottom: 0px solid #198fc5 ;
   
    }



  }