/* ############################################################ */
/* CSS fuer Menue - Ergebnisseite Finswimming						    */
/* ############################################################ */

* {
	margin : 0;
	padding : 0;
}

/* menü-öffnen-schalter */
label.button-open .fas {
	display: inline-block;
	text-align: center;
	z-index: 1;
	position: fixed;
	background: white;
	color: #f58229;
	cursor: pointer;
	top: 1rem;
	left: 1rem;
	box-shadow: inset 0rem 0rem .1rem #4F4F4F ,0rem 0rem 0.1rem #000;
	font-size: 2rem;
	border-radius: 36rem;
	height: 4rem;
	line-height: 4rem;
	width: 4rem;
}

/* menü-schliessen-schalter */
label.button-close .fas {
	display: inline-block;
	text-align: center;
	z-index: 1;
	POSITION: fixed;
	background: #f58229;
	color: white;
	cursor: pointer;
	top: 1rem;
	left: 1rem;
	box-shadow: inset 0rem 0rem .1rem #4F4F4F ,0rem 0rem 0.1rem #000;
	font-size: 2rem;
	border-radius: 36rem;
	height: 4rem;
	line-height: 4rem;
	width: 4rem;
}

/* hover -  menü-oeffnen-schalter/menü-schliessen-schalter */
label.button-open:hover .fas {background: #036;}
label.button-close:hover .fas {background: firebrick;}

/* menue */
#nav-menue {
	width: 100%;
	display: block;
	position: absolute;
	top: 0rem;
	left: 0rem;
	z-index: 1;
}

#menu {
	position: fixed;
	top: 0rem;
	left: 0rem;
	overflow: hidden;
	background: #036; 
	padding-top: 1rem;
	padding-right: 1rem;
	width: 100%;
/*	height: 100vh;*/
	margin: 0 auto;
	margin-top: 0rem;
	margin-left: -200vw;
	transition: all 1s ease-in-out;
}

#menu li {
	display: inline-block;
	width: 100%;
	list-style-type: none;
}

#menu a {
	display: inline-block;
	width: 100%;
	padding: .6rem;
	text-decoration: none;
	color: #f58229;
	font-size: 1.8rem;
	height: 3.5rem;
	letter-spacing: 0.2rem;
}

#menu a:hover {
	color: #f58229;
	text-decoration: underline;
}

#menu #aktuell a   {
	color: #f58229;
	font-size: 1.8rem;
	text-decoration: underline;
}

/* - - - - - TOGGLE-FUNKTION (MENÜ AN UND AUS) MIT CHECKBOX-HACK - - - - - */

/* checkbox versteckt */
input[type=checkbox]{display: none;}

/* schaltet menu ein/aus */
input#open:checked ~ #menu  {margin: 0;}

/* macht menü-oeffnen-button unsichtbar/sichtbar */
input#open:checked ~  label.button-open .fas {visibility: hidden;}


/***************** Media Queries *******************/

/*  ab 480 pixel  */
@media (min-width: 480px) {
	#menu {width: 50%; } 
}

/*  ab 580 pixel  */
@media (min-width: 580px) {
	/* nichts  */
}

/*  ab 768 pixel  */
@media (min-width: 768px) {
	/* menu-schalter versteckt */
	label.button-open, label.button-close {display: none;}
	#nav-menue {
		width: 100%;
		display: block;
		position: relative;
	}
	#menu {
		position: relative;
		background: transparent;
		padding: 0;
		width: 100%;
		margin: 0 auto;
		transition: none;
	}
	#menu li {
		display: inline;
		width: 100%;
		list-style-type: none;
	}
	#menu a {
		display: inline;
		width: 100%;
		padding: .2rem;
		margin: .3rem;
		text-decoration: none;
		color: #f58229;
		font-size: 1.8rem;
		letter-spacing: 0rem;
	}
	#menu a:hover {
		color: #f58229;
		text-decoration: underline;
	}
	#menu #aktuell a   {
		color: #f58229;
		text-decoration: underline;
	}
}

/*  ab 1024 pixel */
@media (min-width: 1024px) {
	#menu a {
		padding-left: .8rem;
		padding-right: .8rem;
	}
}