/**
Quelle : https://codes4education.com/responsive-multi-level-dropdown-menu-using-html-css-bootstrap-5/
*/

:root {
  --nav-color: #0b4470;
  --nav-dropdown-color: #0b4470;
  --nav-hover-color: #797C62;
  --mobile-bg-color: #e5f0ef;
  --bg-btn: #0b4470;
  --bg-btn-hover: #C4C400;
}


/* Bootstrap Korrektur */
@media (min-width: 992px) {
  .navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 0;
    padding-left: 0;
  }
}
.dropdown-item.active, .dropdown-item:active {
  color: var(--nav-dropdown-color);
  text-decoration: none;
  background-color: transparent;
}

header { background-color: #FFF; }

#logo { padding-top:10px; padding-bottom:10px; }
.navbar-brand-logo { max-width:180px; max-height:80px; }





/* nav.navbar */
/* ul.navbar-nav li.nav-item a.nav-link */
/* ul.dropdown-menu li.dropend/dropstart a.dropdown-item */


/* alle Haupt-Links */
.navbar-nav .nav-link { 
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: "Open Sans", sans-serif;
  color: var(--nav-color);
  font-size: 16px;
  padding-top: 20px;
  padding-bottom: 20px;
  white-space: nowrap;
  transition: 0.3s;
  position: relative;
  text-transform: uppercase;
}
/* alle Dropdown-Links */
.navbar .dropdown ul a { font-size: 16px; text-transform: none; color: var(--nav-dropdown-color); }
/* active, hover */
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show, .navbar-nav .nav-link:hover,
.nav-item.current a, .nav-item.active a {
color: var(--nav-hover-color); }

.navbar-nav .nav-link:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 10px;
  left: 0;
  background-color: var(--bg-btn);
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.3s ease-in-out 0s;
}

.navbar-nav .nav-link:hover:before,
.navbar>ul>li.nav-item:hover>a:before,
.navbar-nav .nav-link.active:before {
  visibility: visible;
  transform: scaleX(1);
}

.dropdown-toggle { padding-left: 5px; }
/* Caret-Zeichen deaktiviert, wenn bi-i */
.dropdown-toggle::after {
  display: none;
  margin-left: .255em;
  vertical-align: .255em;
  content: "";
  border-top: .5em solid;
  border-right: .5em solid transparent;
  border-bottom: 0;
  border-left: .5em solid transparent;
}



/**
* Desktop Navigation 
*/


.navbar-nav > .nav-item { margin: 0 10px 0 15px; }
.navbar .dropdown ul a { padding: 6px 12px;}



/**
* Mega Menu 
*/

.dropdown-mega .dropdown-menu { width: 100%; }

.dropdown-mega h5 {
padding-bottom: 12px;
border-bottom: 1px solid rgba(0, 0, 0, .125);
margin: 0;
color: var(--nav-color);
}

.list-group-item {
font-size: 16px;
color: #3F3B51;
border: 0;
border-bottom: 1px solid rgba(0, 0, 0, .125);
padding: 12px 0;
}

.list-group-item:hover {
color: var(--nav-color);
}



#header.navbar-scrolled {
  color:#FFF;
}
#header.navbar-scrolled .navbar-nav .nav-link {
  color: #2d374b;
}


/**
* Mobile Navigation 
*/

@media(max-width: 991.5px) {
#header { min-height: 90px; }
.navbar { padding-bottom: 20px; }
.navbar-brand { font-size: 30px }
.navbar-nav .nav-item { margin: 5px 10px; }
#mobileMenu { border-radius: 5px; background-color: var(--mobile-bg-color); padding:10px; }
#mobileMenu .nav-link,
#header.navbar-scrolled #mobileMenu .nav-link { color: #2d374b;padding-top: 10px;  padding-bottom: 10px; }
#header.navbar-scrolled #mobileMenu { padding-top: 40px; }
.navbar-nav .nav-link::before { bottom:5px; opacity:0.3; }

li.dropdown i.bi-chevron-down { display:none; }
li.dropdown .more-arrow { position:absolute;top:2px;right:5px;color:var(--bg-btn);}
.navbar-nav > li.dropdown > .more-arrow { top:7px; }
li.dropdown .more-arrow::before {
content: "\F64D";
font-family: bootstrap-icons !important;
font-weight:bold;
font-size:1.2em;
float: right !important;
border: none !important;
}
li.dropdown .more-arrow.open::before {
content: "\F63B";
}

.dropdown-menu { 
background-color: transparent; 
border:none; 
font-size: 16px; }

}

/**
* Trigger
*/

@media (min-width: 992px) {
.navbar-expand-lg .navTrigger { display: none; }
.dropdown:hover > .dropdown-menu { display: block; }
.navbar-expand-lg .navbar-nav .dropdown-menu { position: absolute; left: 0; }
}