/* header
*************************************************
The navigation works "on click" and with class 
"hovermenu" in #nav "on hover" if view > 1000px

/* variables
************************************************/
:root {
	--header-height: 80px;
	--menu-row-height: 50px;
	--menu-row-up: -50px;
	/*
	--mainmenu-color: #003E7E;
	--hover-color: #fff;
	--hover-back: #58A9E8;
	
	--topline-color: #ddd;	
	--sub-back: #fff;
	--sub-back-mobile: #378CCD;
	--sub-color: #222;
	--sub-color-mobile: #fff;*/
	--mainmenu-color: black;
	--hover-color: #fff;
	--hover-back: darkgrey;
	
	--topline-color: #ddd;	
	--sub-back: #fff;
	--sub-back-mobile: darkgrey;
	--sub-color: #222;
	--sub-color-mobile: #fff;
}

/* state memory
************************************************/
#nav-state,
#header input[type="checkbox"],
#header input[type="radio"] {
	display: none;
}

/* header (mobile first)
************************************************/
#header {
	/* relative on desktop */
	position: relative;
	z-index: 10000;
	height: var(--header-height);
	background-color: #fff;
	/* alternatively: 
	box-shadow: 0 5px 15px 0 rgba(0,0,0,0.5);
	or border-bottom: solid 3px #F7C200;
	*/
}
#header #header-wrapper {
	box-sizing: border-box;
	position: relative;
	max-width: 1200px;
	height: 100%;
	margin: 0 auto;
	padding: 0 4% 0 4%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
#header #logo-box {
	/* unten ausrichten */
	align-self: flex-end;
}
#header #logo-box img {
	float: left;
	/*width: 100%;*/
	width: 180px;
	height: auto;
}
#header .header-wave {
	display: block;
	position: absolute;
	width: 100%;
	height: 180px;
	overflow: hidden;
	/* click für js (close menu) */
	pointer-events: none;
	/* spiegeln
	transform: scaleX(-1);
	*/
}
#header .header-wave > svg {
	width: 100%;
	height: 100%;
}
#header .header-wave > svg > path {
	fill: #fff;
	stroke-width: 3px; 
	stroke: #EFB421;
}

/* hamburger-button
************************************************/
#burger-box {
	box-sizing: border-box;
	border: solid 3px #fff;
	outline: 1px solid white; /* black;  #1E76AE;*/
	width: 74px;
	margin-left: 10px;
	margin-top: 6px;
	padding: 3px 10px 2px 10px;
	text-align: center;
	font: 1.6rem/130% Arial;
	color: white;
	background-color: #2c3235; /* black; #1E76AE;*/
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

#burger-box .line {
	display: block;
	margin: 6px auto 3px auto;
	width: 40px;
	height: 5px;
	background: white;
	border-radius: 2px;
	transition: transform 0.2s, opacity 0.2s;
}

#burger-box .burger-caption {
	display: block;
	margin: 0 auto 0 auto;
}

/* navigation
************************************************/
#nav {
	position: absolute;
	top: var(--header-height);
	margin-top: 2px;
	left: 0;
	width: 100%;
	max-height: 0px;
	overflow: hidden;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	z-index: 10000;
	/* Für Menü verbergen */
	transition: max-height 0.2s;
}

/* main and sub navigation
************************************************/
#nav ul {
	position: relative;
	box-sizing: border-box;
	display: block;
	margin: 0;
	padding: 0;
	list-style-type: none;
}

#nav li {
	/* important for sub-menues */
	position: relative;
}

/* menu item = <a> , folder	= <label> */
#nav a,
#nav label {
	box-sizing: border-box;
	position: relative;
	display: block;
	padding-left: 30px;
	height: var(--menu-row-height);
	white-space: nowrap;
	color: #fff;
	background-color: darkgrey; /*oder besser black?  alte Farbe:#24679A;*/
	font: 2.2rem/var(--menu-row-height) Livvic,Arial;
	text-decoration: none;
	cursor: pointer;
	overflow: hidden;
	-webkit-tap-highlight-color: transparent;
}

/* close the menu */
#nav input + label + label {
	margin-top: var(--menu-row-up);
	background-color: transparent !important;
	z-index: -1;
}

/* folder sign */
#nav input + label::after {
	content: '';
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-left: 6px;
	border-color: #fff;
	border-style: solid;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) translate(0,-4px);
	transition: transform 0.3s;
}

/* main menu */
#nav > ul > li > a,
#nav > ul > li > label {
	/* Linie oberhalb Hauptmenüs in Hamburger-Ansicht,
	"border-top" wäre auch sichtbar wenn "height=0" */
	box-shadow: 0 1px 0 #fff inset;
	/* Alternative: text-transform: uppercase; */
}

/* sub menu */
#nav li li {
	/* Hintergrundfarbe während Öffnen / Schließen */
	background-color: var(--hover-back);
	color: var(--hover-color);
}
#nav li li > a,
#nav li li > label {
	padding-left: 30px;
	background: var(--sub-back-mobile);
	color: var(--sub-color-mobile);
}

/* click on folder
************************************************/
/* active folder */
#nav input:checked + label {
	background-color: var(--hover-back);
	color: var(--hover-color);
}

/* active folder sign */
#nav input:checked + label::after {
	transform: rotate(225deg) translate(-4px,0px);
	border-color: var(--hover-color);
}

/* transparent close box to the front */
#nav input:checked + label + label {
	z-index: 1;
}

/* open submenu (child) of active folder  */
#nav input:checked ~ ul > li > a,
#nav input:checked ~ ul > li > label {
	transition: height 0.3s, opacity 0.3s;
	opacity: 1;
}

/* close all sub menus (all descendants) */
#nav input:not(:checked) ~ ul > li a,
#nav input:not(:checked) ~ ul > li label {
	transition: height 0.3s, opacity 0.3s;
	height: 0;
	opacity: 0;
}

/* Menü anzeigen und Hamburger-Button in ein Kreuz umformen
************************************************/
#nav-state:checked ~ #header #burger-box .line:nth-child(1) {
	transform: translateY(11px) rotate(45deg);
}

#nav-state:checked ~ #header #burger-box .line:nth-child(2) {
	opacity: 0;
}

#nav-state:checked ~ #header #burger-box .line:nth-child(3) {
	transform: translateY(-11px) rotate(-45deg);
}

/* Menü einblenden */
#nav-state:checked ~ #header #nav {
	transition: max-height 0.5s;
	height: auto;
	max-height: 1200px;
	border-bottom: solid 1px #fff;
}

/* Bereiche unter Navigation ausblenden */
#nav-state:checked ~ *:not(#header) {
	transition: opacity 0.5s;
	opacity: 0;
}

/* Bereiche unter Navigation einblenden */
#nav-state:not(:checked) ~ *:not(#header) {
	transition: opacity 0.5s;
	opacity: 1;
}
 
/* common tags
************************************************/
#nav .nav-home-icon {
	display: inline-block;
	width: 16px;
	height: 14px;
	margin-right: 5px;
	background: transparent url('data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAACcAAAAjBAMAAAGSGz6GAAAAK3RFWHRDcmVhdGlvbiBUaW1lAERpIDIwIEF1ZyAyMDE5IDE0OjQ2OjE1ICswMTAw7cOSaQAAAAd0SU1FB+MIFA0RGhVsAbwAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAEZ0FNQQAAsY8L/GEFAAAABlBMVEUAAAD///+l2Z/dAAAAAXRSTlMAQObYZgAAAKZJREFUeNq9kVESAyEIQ8kNzP0vW0Io6rZ/namz7sYnYBYjNLAiuALwjHwAoVVfzVxRO6xYUkA5FZwhhImKSRPKdiTMj7frOV/ngJapUq9hqHqppOWKEwtV/pD3wJa52+emv7FQi+kAG/rcPtmxjLFgO8IFtzO6LWUHP8nP8W3DPu4ffxc5oXPdxIvpyg/YbTRdN2v6YJuebChOZto3f9HY8OnzL/AFTAUVI5tY+A8AAAAASUVORK5CYII=') no-repeat left;
	background-size: cover;
}

/* Navigation von Hamburger-Menü auf Drop-Down umstellen
******************************************************************************/
@media screen and (min-width: 1024px) {
	/* fixed toprow */
	#header {
		position: fixed;
		top: -100px;
		margin-top: 100px;
		width: 100%;
		overscroll-behavior-y: none;
	}
	#header-height {
		height: var(--header-height);
	}
	/* end: fixed toprow */
	
	#header #header-wrapper {
		padding: 0 30px 0 2%;
	}
	
	/* content einblenden falls er in der Burger-Ansicht ausgeblendet war */
	/* (#nav-state liegt über dem #header) */
	#nav-state ~ *:not(#header) {
		transition: opacity 0s !important;
		opacity: 1 !important;
	}

	#burger-box {
		display: none;
	}

	#nav .nav-home-icon {
		/* no home-icon on desktop */
		display: none;
	}

	#nav {
		position: absolute;
		width: 100%;
		height: 100%;
		overflow: visible;
	}

	/* Hauptmenü
	************************************************/
	#nav > ul {
		position: absolute;
		/* Hauptmenü - vertikale Ausrichtung */
		bottom: 13px;
		right: 4%;
	}

	#nav > ul > li {
		display: inline-block;
		vertical-align: top;
	}

	#nav > ul > li > a,
	#nav > ul > li > label {
		display: flex;
		padding: 0 15px 0 20px;
		align-items: center;
		color: var(--mainmenu-color);
		background-color: #fff;
	}

	/* mehr Abstand für das Ordnerzeichen */
	#nav > ul > li > label {
		padding-right: 16px;
	}

	/* Ordnerzeichen */
	#nav > ul > li > input + label::after {
		border-color: var(--mainmenu-color);
	}

	#nav > ul > li > input:checked + label::after {
	/* Nach history-back in mobilen Browsern ist der Menüpunkt geöffnet
	und der "::after"-Bereich wird nicht vollständig wiederhergestellt.
	Dafür ist folgende Angabe erforderlich. */
		transform: rotate(225deg) translate(-4px, 0px);
		border-color: #fff;
	}

	/* Untermenüs 
	************************************************/
	/* ab zweiter Ebene */
	#nav ul ul {
		position: absolute;
		box-shadow: 0 10px 10px 0 rgba(0,0,0, 0.4);
	}

	#nav li li {
		/* Transparene Untermenüs ermöglichen */
		background-color: transparent;
	}

	#nav li li > a,
	#nav li li > label {
		min-width: 200px;
		padding: 0 30px 0 15px !important;
		/* Linie oberhalb der Menüpunkte */
		box-shadow: 0 1px 0 var(--topline-color) inset;
		background-color: var(--sub-back);
		color: var(--sub-color);
		text-align: left;
	}
	/* Ordnerzeichen */
	#nav li li > input + label::after {
		border-color: var(--sub-color);
	}

	/* ab dritter Ebene */
	#nav ul ul ul {
		top: 0;
		left: 100%;
	}

	#nav ul ul ul li > a,
	#nav ul ul ul li > label {
		border-left: solid 1px transparent;
	}

	/* hover (auch für Klick-Menüs erforderlich)
	************************************************/
	/* Ordner */
	#nav a:hover,
	#nav label:hover,
	#nav input:checked + label {
		color: var(--hover-color);
		background-color: var(--hover-back);
	}
	/* Ordnerzeichen */
	#nav label:hover::after,
	#nav input:checked + label::after {
		border-color: var(--hover-color);
	}
}

/* Menü per "hover" öffnen
**********************************************************************************************/
@media screen and (min-width: 1000px) and (hover: hover) {
	/* Klickfunktionalität abschalten */
	#nav.hovermenu input[type="radio"] + label {
		pointer-events: none;
	}

	/* Neue hover-Effekt sind erforderlich weil durch deaktivieren der pointer-events 
	auf "label" (um die checkboxen zu deaktivieren) der alte Effekt deaktiviert wurde */

	/* Aktive Ordner */
	#nav.hovermenu li:hover > a,
	#nav.hovermenu li:hover > label {
		background-color: var(--hover-back);
		color: var(--hover-color);
	}

	/* Aktive Ordnerzeichen */
	#nav.hovermenu li:hover > label::after {
		border-color: var(--hover-color);
		transition: transform 0.3s;
		transform: rotate(225deg) translate(-4px, 0px);
	}

	/* Für aktive Ordner das Untermenü (direkte Kindelemente) öffnen */
	#nav.hovermenu li:hover > ul > li > a,
	#nav.hovermenu li:hover > ul > li > label {
		transition: height 0.3s, opacity 0.3s;
		height: var(--menu-row-height);
		opacity: 1;
	}

	/* Ab zweiter Ebene alle Untermenüs des aktiven Ordners zeitverzögert schließen damit 
	kein Flackern auftritt falls sich die Maus oberhalb eines Menüs dritter Ebene befindet */
	#nav.hovermenu li > ul > li a,
	#nav.hovermenu li > ul > li label {
		transition: height 0.3s linear 0.1s, opacity 0.3s linear 0.1s;
	}

	/* Ab dritter Ebene alle Untermenüs des aktiven Ordners schnell schließen 
	damit kein Flackern auftritt falls sich die Maus oberhalb des Menüs befindet */
	#nav.hovermenu li li:not(:hover) ul > li > a,
	#nav.hovermenu li li:not(:hover) ul > li > label {
		transition: height 0s linear 0.1s, opacity 0.1s linear 0.1s;
		height: 0;
		opacity: 0;
	}
}

/* footer 
************************************************/
#footer {
	position: relative;
	padding: 15px 0 10px 0;
	background-color: #F8ECD6;
}
#footer-wrapper {
	position: relative;
	margin: 10px auto 10px auto;
	padding: 0 2.5% 0 2.5%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
}
#footer-wrapper > div {
	width: 94%;
	margin: 10px auto 10px auto;
	padding: 5px 20px 10px 20px;
	background: #FFFAF3;
	border: solid 1px #F0D1A0;
}

#footer-wrapper h2 {
	font-size: 2.5rem;
	padding: 10px 10px 5px 0;
}
#footer-wrapper a:link,
#footer-wrapper a:active,
#footer-wrapper a:visited,
#footer-wrapper a:focus {
	display: inline-block;
	padding: 3px 0px;
	color: black; /*#0E4A74;*/
	transform-origin: 0% 50% 0;
}
@media (hover: hover) {
	#footer-wrapper a:hover {
		padding: 3px 8px;
		color: #FFF;
		background-color: darkgrey; /*#4B82D3;*/
		transform: scale(1.1);
	}
}
#footer-wrapper .footer-bold {
	font-weight: bold; 
	color: black;   /* #0E4A74;*/
}
.linespace {
	/* für die gleiche Höhe der Container */
	height: 24px;	
}


/* @media
************************************************/
@media screen and (min-width: 600px) {
	.main {
		/* space für den fixed footer */
		margin-bottom: 500px;
	}
	#footer {
		position: fixed;
		top: 0;
		width: 100vw;
		height: 100vh;
		padding-top: 5px;
	}
	#footer-wrapper {
		box-sizing: border-box;
		margin: 0 auto 0 auto;
		width: 100vw;
		height: 100vh;
		max-width: 1200px;
		padding: 0 0 50px 0;
	}
	#footer-wrapper > div {
		width: 40%;
		margin-bottom: 0;
	}
}