/* Var Definitions */
.navMega {
	--bg-color: #fff; 												/* Hintergrund der Navi */
	--bg-color-mutter-passiv: #fff;									/* var(--bg-color); */
	--bg-color-mutter-aktiv: var(--logo-color-1);					/* var(--logo-color-1-dark, #888); */
	--bg-color-mutter-passiv-hover: var(--logo-color-1);			/* var(--logo-color-1-dark, #888); */
	--bg-color-mutter-aktiv-hover: var(--logo-color-1-light, #aaa);
	--bg-color-kind-passiv: #fff;									/* var(--logo-color-1); */
	--bg-color-kind-aktiv:  var(--logo-color-1, #aaa);				/* var(--logo-color-1-light, #aaa); */
	--bg-color-kind-passiv-hover:  var(--logo-color-1);
	--bg-color-kind-aktiv-hover: var(--logo-color-1-light, #aaa);
	--font-color-mutter-passiv: var(--font-color-dark, #444);
	--font-color-mutter-aktiv: var(--font-color-dark, #eee);		/* var(--font-color-light, #eee); */
	--font-color-kind-passiv: var(--font-color-dark, #eee);
	--font-color-kind-aktiv: var(--font-color-dark, #eee);			/* var(--logo-color-2); */
  --num-cols: 4;
  --gap-width: 40px;
  --top-margin: 10px;
}

.navMega {
	background-color: var(--bg-color);
}

/* Reset CSS Styles for li, ul */
.navMega ul:not([type]) > li { position: initial; }
.navMega li { margin: 0 !importang; padding: 0 !important; position: initial; list-style: none; }
.navMega li:before { display: none; }
.navMega ul { overflow: visible; }
.navMega ul li a { display: block; text-decoration: none; }


/* transitions */
nav.navMega ul > li, nav.navMega ul > li > a {
  transition: all var(--transition-time);
  transition-property: background-color, color;
}

/* general coloring (children) */
nav.navMega ul > li > a {
  background-color: var(--bg-color-kind-passiv);
  color: var(--font-color-kind-passiv);
}

/* general hightlighting (children) */
nav.navMega ul > li.selected > a, nav.navMega ul > li > a:hover {
  background-color: var(--bg-color-kind-aktiv);
  color: var(--font-color-kind-aktiv);
}

/* first stage */

nav.navMega > ul.depth0 {
  position: initial;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  padding: 0;
}

/* coloring */
nav.navMega ul.depth0 > li > a {
  background-color: var(--bg-color-mutter-passiv);
  color: var(--font-color-mutter-passiv);
}

/* highlighting */
nav.navMega ul.depth0 > li.selected > a, nav.navMega ul.depth0 > li > a:hover {
  background-color: var(--bg-color-mutter-aktiv);
  color: var(--font-color-mutter-aktiv);
}

nav.navMega .depth0 > li > a {
  padding: 10px 20px;
}

nav.navMega .depth0 > li.submenu > a:after {
	content: '▼';	/* '►'; */
	cursor: default;
	padding: 10px 15px;
	color: var(--font-color-mutter-passiv);
}

nav.navMega .depth0 > li.submenu:hover > a:after {
  content: '▲';	/* '►'; */
}


/* second stage (the mega-menu) */

nav.navMega ul.depth1 {
  position: absolute;
  display: flex;
  flex-wrap: wrap; 
  justify-content: flex-start; /* rho war space-between; */
  column-gap: var(--gap-width);
  width: 100%;
  left: 0%;
  padding: 50px 7% 50px 7%;  background: #fff;
  text-align: left;
  border: 0px 1px 1px 1px solid var(--bg-color-mutter-aktiv);
  box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.5);
  z-index: 99;
  transition: all var(--transition-time);
  transition-property: max-height, opacity;
	overflow: hidden;
  pointer-events: none;
	max-height: 0;
	opacity: 0;
  background-clip: padding-box;
  border-top: var(--top-margin) solid transparent;
  box-sizing: border-box;
  min-height: 200px;
  height: calc(100vh - var(--top-margin) - 60px);    /* rho: muss Höhe über ganzen Bildschirm, sonst unten nicht scrollbar */
  overflow-y: auto;
}

nav.navMega .depth0 > li:hover > ul {
  pointer-events: initial;
  max-height: 100vh; 
	opacity: 1;
  transition: all var(--transition-time);
}

nav.navMega ul.depth1 li {
  flex-grow: 1; /* weglassen, damit orphans in letzter Reihe nicht größer dargestellt werden */
  flex-basis: calc( (100% / var(--num-cols)) - ( var(--gap-width) * (var(--num-cols) - 1) / var(--num-cols)));
  max-width: fit-content; /* damit Bilder nicht per grow oversized werden */
}

nav.navMega ul.depth1 li img.picture {
  width: 100%;
  padding-top: 5px;
}

nav.navMega ul.depth1 li img.icon {
  display: inline-block;
  width: auto;
}


/* third stage (child-menus in the mega-menu) */

nav.navMega ul.depth2 {
  box-shadow: none;
}

nav.navMega .depth1 > li > a {
  margin-bottom: 15px;
  font-weight: bold;
  text-transform: uppercase;
  line-height: 120%;
  padding: 5px;
}

nav.navMega .depth2 > li {
  display: block;
}

nav.navMega .depth2 > li > a {
  margin-top: 10px;
}


/* fourth stage (child-menus in child menus in the mega-menu), usually not needed */

nav.navMega .depth3 > li > a {
  margin: 10px 0px 0px 10px;
}

/* initial delay overlay */

nav.navMega { animation: clickdelay 5000ms; }
@keyframes clickdelay { 0% { z-index: -10; }  100% { z-index: auto; } }