/* = = = = = = = = = = = = = = = = = datei menue.css = = = = = = = = = = = = = = = = = = = = = = = = = */


/* ############################################################ */


/* diese datei enthält das hauptmenü - hier sind es die buttons */


/* ############################################################ */

#nav {
	margin: 0;
	color: #fff;
	padding: 0;
	overflow: hidden;
}

#menu {
	display: table;
	POSITION: absolute;
	z-index: 1;
	top: 50%;
	left: 50%;
	margin-top: -20rem;
	margin-left: -20rem;
	width: 40rem;
	height: 40rem;
	background: #DDE8F4;
	padding: 0rem;
	border-radius: 36rem;
	opacity: 0;
	transition: 2s ease-out;
}

#menu p {
	height: 100%;
	width: 100%;
	display: table-cell;
	vertical-align: middle;
	padding: 0;
	margin: 0;
}

#menu p span {
	list-style-type: none;
	padding: 0;
	margin: 0;
	font-size: 1.7rem;

	display: inline-block;
	width: 100%;
	height: 3.4rem;
	line-height: 3.4rem;
	font-weight: normal;
	color: midnightblue;
	text-shadow: 0px 0px 1px #000;
	text-shadow: 2px 2px 2px #BFBFBF;
	padding: 0rem 0rem;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
}

menu p span a{
	text-decoration: none;
}

menu p span a:hover {
	color: maroon;
}

#menu ul {
	height: 100%;
	width: 100%;
	display: table-cell;
	vertical-align: middle;
	padding: 0;
	margin: 0;
}

#menu li {
	list-style-type: none;
	padding: 0;
	margin: 0;
	font-size: 1.7rem;
}

#menu li span {
	display: inline-block;
	width: 100%;
	height: 3.4rem;
	line-height: 3.4rem;
	font-weight: normal;
	color: midnightblue;
	text-shadow: 0px 0px 1px #000;
	text-shadow: 2px 2px 2px #BFBFBF;
	padding: 0rem 0rem;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
}

#menu li span:hover {
	color: maroon;
}


/* - - - menü-oeffnen-schalter  formatierung - - - */

#nav label.button-open {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -2.5rem;
	margin-left: -2.5rem;
	z-index: 7;
	text-align: center;
	border-radius: 1rem;
	background: red;
	cursor: pointer;
	color: white;
	font-size: 2.6rem;
	width: 5rem;
	height: 5rem;
	line-height: 5rem;
	transition: opacity 1s;
}


/* - - - menü-schließen-schalter  formatierung - - - */

#nav label.button-close {
	display: block;
	position: absolute;
	top: 50%;
	right: 50%;
	margin-top: -2rem;
	margin-right: -20rem;
	z-index: 1;
	cursor: pointer;
	background: white;
	color: firebrick;
	text-align: center;
	border-radius: 36rem;
	font-size: 2rem;
	width: 4rem;
	height: 4rem;
	line-height: 4rem;
	opacity: 0;
	transition: opacity 1s;
}


/* - - - hover bei den menü-schaltern - - - */

#nav label.button-open:hover {
	background: yellow;
	color: maroon;
}

#nav label.button-close:hover {
	background: yellow;
	color: black;
}


/* - - - toggle-funktion - - - */


/* checkbox versteckt */

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


/*  menue-oeffnen-button EIN / AUS */

input#open-menue:checked~label.button-open {
	opacity: 0;
	z-index: 5;
	transition: opacity 1s;
}


/*  menue-schließen-button EIN / AUS */

input#open-menue:checked~label.button-close {
	opacity: 1;
	z-index: 101;
	transition: opacity 1s;
}


/* schaltet menu ein/aus */

input#open-menue:checked~#menu {
	opacity: 1;
	z-index: 100;
	transition: 1.2s ease-out;
}