/******************************************************************************
  * Bootstrap 4 Mega Menu
  *
  * Formatierung des Mega Menu per eigenem CSS
  * Der generierte HTML-Code basiert auf TypoScript der Georgienseite
  * Innerhalb der Mega Menu Elemente liegen DIV-Elemente mit eigenen Klassen
  *
  * https://wiki.agentur-ibk.de/doku.php?id=css_bootstrap_4_navigation
  *
  * (c) Thomas Berscheid 2020
  * Internetagentur Irma Berscheid-Kimeridze, Köln
  * https://www.agentur-ibk.de
  * 
  ****************************************************************************/

.megamenu-li {
	position: static;
}

.megamenu {
  position: absolute;
  max-width: 870px;
  width: 100%;
	left: 0;
	right: 0;
  padding: 0;
  margin-top: 0px;
}

.nav-container {
  padding: 0;
}

#navbar > ul > li.nav-item.dropdown.megamenu-li.show > div {
  border-radius: 0;
  background-color: #eee;
  border: 5px var(--farbe-leicht) solid;
  box-shadow: 0px 30px 30px -15px #333;
}

#navbar > ul > li.nav-item.dropdown.megamenu-li.show > div .row {
  margin: 0;
}

/* Alle Elemente ab der 2. Ebene */

.div-nav {
  padding: 5px;
  color: #333;
  transition: all 0.5s;
}

.div-nav:hover {
  background-color: var(--farbe-leicht); 
  color: #111;
  transition: all 0.8s;
}

/* Bootstrap Menu Anpassungen */
nav.navbar {
  background-color: var(--farbe-stark);
  border: none;
  margin-top: 0px;
  margin-bottom: 0;
  min-height: 40px;
  border-radius: 0 0 0 0;
  background: linear-gradient(var(--farbe-stark), var(--farbe-leicht));
}
ul.nav.navbar-nav > li > a {
  color: var(--farbe-hover);
  padding: 12px 8px;
}

ul.nav.navbar-nav > li > a:hover {
  color: #ccc;
  background: linear-gradient(var(--farbe-stark), var(--farbe-hover));    
}
ul.dropdown-menu {
  padding: 0;
}
#navbar.navbar-collapse.collapse > ul.nav.navbar-nav > li.dropdown > ul.dropdown-menu {
  background-color: var(--farbe-leicht);
}
.dropdown-menu > .active > a:focus, .dropdown-menu > .active > a {
  background-color: var(--farbe-stark);
}
.dropdown-menu {
  border: none;  
}

#navbar.navbar-collapse.collapse > ul.nav.navbar-nav > li.active > a {
  background: linear-gradient(var(--farbe-stark), var(--farbe-leicht));
  color: #ddd;
}
#navbar.navbar-collapse.collapse > ul.nav.navbar-nav > li.dropdown.open > a.dropdown-toggle {
  background-color: var(--farbe-leicht);
}

.dropdown-menu > .active > a:hover {
  background-color: var(--farbe-hover);
  color: var(--farbe-stark);
}
.dropdown-menu > li > a:hover {
  color: var(--farbe-stark);
  background-color: var(--farbe-hover);
}
div#navbar.navbar-collapse.collapse > ul.nav.navbar-nav > li.dropdown.active > a.dropdown-toggle {
  color: #eee;
}

/* Bootstrap Mega Menu 3. Ebene */
.nav-level3 {
  padding: 0px 1px 0px 1px;
  font-size: 14px;
}
.nav-level3-img {
  padding: 1px 1px 1px 1px;
}

a.link-level3 {
  color: var(--farbe-stark);
  font-size: 14px;
  line-height: 22px;
  transition: all ease 0.5s;
}
a.link-level3:hover {
  color: var(--farbe-hover);
  transition: all ease 0.5s;
  text-decoration: none;
}