/* Navigation inkl. Hamburger-Menü */
/* =============================== */


/* CSS-Varoabeln) 				Quelle: https://wiki.selfhtml.org/wiki/CSS/Variablen */
:root {
  --Hex-rot: #EF3C28;
  --Hex_blau: #1A52A5;
  --Hex_weiss: #FFFFFF;
  --RGB_rot: rgb(239, 60, 40);
  --RGB_blau: rgb(26, 82, 165)
  --RGB_weiss: rgb(255, 255, 255);
  --rot: #EF3C28;
}




/* Hamburgermenü-Button */
a.menu-link {
	color: #000;
	display: block;
	text-decoration: none;
}

.menu-link span {
	border-bottom: solid 3px #000;
	border-top: double 10px #000;
	display: inline-block;
	height: 3px;
	margin: 0 5px -3px 0;
	width: 30px;
}

.menu-link:hover span {
	border-color: #EF3C28;
}





.menu, .menu > ul, .menu > ul ul {
	clear: both;
	display: flex;
	flex-flow: column;
	margin: 0;
}

.menu.active {					/* das aktive Menü */
	background: #f9f9f9;
	border-bottom: 1px solid #d8d8d8;
	border-top: 1px solid #d8d8d8;
	margin: 1em 0 1em -12px;
	max-height: 55em;
	width: 70vw;
 		position: absolute;			/* Position über den anderen Elementen fliegend */
}

.js .menu > ul ul.active {
	margin: 0;
	max-height: 55em;
	padding: 0;
}

.menu > ul {
	padding: 0;
}

nav li {
	display: inline-block;
	margin: 0;
	position: relative;
}


/* Menü wenn nicht angewählt (Level 1)*/
.menu li a {
	color: #FFFFFF;
	display: inline-block;
	font-size: 1.04em;
	font-weight: bold;
	letter-spacing: .05em;
	__line-height: 2.5em;		/* Höhe der einzelnen Elemente (Text/Link) */
	text-decoration: none;
	padding: 10px 10px 10px 10px;     /* oben rechts unten links */
}

span.has-subnav {
	display: block;
	font-size: 1em;
	line-height: 2.5em;
	position: absolute;
	right: 20px;
	padding: 0 0.5em;
	top: 0;
}







/* Hamburger-Menü */
/* -------------- */

@media screen and (max-width:800px) {

	.menu li a {						/* ausgeklapptes Hamburgermenü (Level 1) */
		border-bottom: 1px solid #d8d8d8;
		display: block;
		padding-left: 15px;
		background-color: rgba(239, 60, 40, 0.8);
	}

	.menu,  .menu > ul ul {				/* ausgeklapptes Hamburgermenü (Level 2) */
		margin: 0;
		max-height: 0;
		overflow: hidden;
	}
	
	.menu li li a {
		padding-left: 50px;
		background-color: rgba(239, 60, 40, 0.5);
	}

	.menu li:last-child a {
		border: none;
	}

	.menu li li:last-child a {
		border-bottom: 1px solid #d8d8d8;
	}

	.menu li:hover {
		background: #EDEDED;
	}
}









/* Klapp-Menü */
/* ---------- */
@media screen and (min-width: 801px) {

	nav {
		__border-top: 3px solid #00578b;
		__border-bottom: 1px solid #a4d05e;
		margin: 10px;
	}

	a.menu-link {
		display: none;
	}

	.js .menu,  .js .menu > ul ul {
		max-height: none;
		overflow: visible;
	}

	.js .menu > ul li:hover > ul {
		display: flex;
	}

	.menu ul {
		display: flex;
		flex-flow: row;
		justify-content: flex-end;
		background-color: #EF3C28;
		margin: 0;
		padding: 0;
		_border-radius: 5px 5px 0px 0px;     			/* linksoben rechtsoben rechtsunten linksunten */
		__height: 44px;									/* Höhe des Tags */
	}
	


	
	/* Untermenü (Level 2) */
	.menu span.has-subnav {
		display: none;
	}

	.menu li a:hover {
		__font-weight: bold;
		color: #1A52A5;
	}

	.menu li li a:hover {
		color: EF3C28;
		background: rgba(239, 60, 40, 0.2);
	}

	.menu ul ul {		/* Drop-Down Menü */
		background: rgba(255, 255, 255, 0.9);
		__border: solid 1px rgba(164,208,94,1);
		border-radius: 2px 2px 5px 5px;
		border-top: solid 2px transparent;
		display: none;
		height: auto;
		overflow: hidden;
		padding: 0;
		position: absolute;
		text-align: left;down
		top: 31px;			/* Abstand zwischen Hauptmenüpunkt und Untermenpunkte (Drop-Down) */
		width: 150px;
		z-index: 999;
	}

	.chrome .js .menu > ul ul {
		top: 43px;
	}

	.menu ul ul.wide {
		width: 300px;
	}

	.menu ul ul li {
		__border-bottom: solid 1px rgba(164,208,94,0.5);
		display: inline-block;
		position: relative;
	}

	.menu > ul ul li:last-child {
		__border-bottom: none;
	}

	.menu ul ul li a {
		display: block;
		color: #1A52A5;
		padding-left: 10px;
		font-style: normal;
	}
}