/* CSS Document  https://reraise.eu/2014/04/25/zum-eigenen-off-canvas-menue-in-wenigen-schritten*/
#menu { display: none;}
@media only screen and (max-width:768px), only screen and (max-device-width:768px) {
#verdunkelung {
	/*display:none;
	z-index:-500;*/
	position:absolute;
	width:1px;height:1px;
	background:rgba(0,0,0,0.0);
	-webkit-transition: background .7s ease-out;
	-moz-transition: background .7s ease-out;
	-o-transition: background .7s ease-out;
	transition: background .7s ease-out;
	}
#verdunkelung.active {
	width:100%;height:6500px;
	background:rgba(0,0,0,0.7);
	/*display:block;*/
	z-index:49999;
	-webkit-transition: background .9s ease-out;
	-moz-transition: background .9s ease-out;
	-o-transition: background .9s ease-out;
	transition: background .9s ease-out;
	}

#menu {
	z-index: 50000;
	display:inline;
	position:absolute;
	top: 0;
	bottom: 0;
	width: 15.625em;
	left: -15.625em;
	height: 52em;
	-webkit-transform: translate(0px, 0px);
	-moz-transform: translate(0px, 0px);
	-o-transform: translate(0px, 0px);
	-ms-transform: translate(0px, 0px);
	transform: translate(0px, 0px);
	-webkit-transition: 0.45s ease;
	-moz-transition: 0.45s ease;
	-o-transition: 0.45s ease;
	transition: 0.45s ease;
	background:rgba(0,0,0,0.7);
}

#menu.active {
	-webkit-transform: translate(15.625em, 0px);
	-moz-transform: translate(15.625em, 0px);
	-o-transform: translate(15.625em, 0px);
	-ms-transform: translate(15.625em, 0px);
	transform: translate(15.625em, 0px);
}

.menu-link {
	position:absolute;
	top: 0;
	padding-top: 2px;
	right: -50px;
	background: rgba(0,0,0,0.7);
	width:50px;
	height:35px;
	background-image:url(img/hamburger-neu.png);
	background-repeat:no-repeat;
	background-position:center center;
	/*für eventuellen Text neben Hamburger*/
	/*
	text-decoration: none;
	font-weight: 400;
	font-size: 1.6em;
	letter-spacing: 0.0em;
	padding: 3px 3px 3px 3px;
	font-family: 'Open Sans', sans-serif;
	text-decoration: none;
	*/
}
.menu-link.active {
	background-image:url(img/schliessen-neu.png);
	}

/*
a.menu-link:link, a.menu-link:visited, a.menu-link:active {
	text-decoration: none;
	font-weight: 400;
	font-size: 1.4em;
	padding: 3px 3px 3px 3px;
	font-family: 'Open Sans', sans-serif;
	text-decoration: none;
	color:rgb(245,245,230);
	transition: color 0.5s linear;
	-o-transition: color 0.5s linear;
	-moz-transition: color 0.5s linear;
	-webkit-transition: color 0.5s linear;
}
a.menu-link:hover {
	color:rgb(141,0,30);
}
*/

li {
	list-style: none;
	list-style-position: outside;
	margin: 6px 0px 9px -26px;
}

a.menuepunkt:link, a.menuepunkt:visited, a.menuepunkt:active {
	text-decoration: none;
	font-weight: 600;
	font-size: 1.1em;
	line-height:1.25em;
	padding: 3px 3px 3px 3px;
	font-family: 'Open Sans', sans-serif;
	text-decoration: none;
	color:rgb(245,245,230);
	transition: color 0.3s linear;
	-o-transition: color 0.3s linear;
	-moz-transition: color 0.3s linear;
	-webkit-transition: color 0.3s linear;
	display:block;
}
a.menuepunkt:hover {
	color:rgb(226,30,58);
}

a.menuepunktactive:link, a.menuepunktactive:visited, a.menuepunktactive:active {
	text-decoration: none;
	font-weight: 700;
	font-size: 1.1em;
	line-height:1.25em;
	padding: 3px 3px 3px 3px;
	font-family: 'Open Sans', sans-serif;
	text-decoration: none;
	color:rgb(226,30,58);
	transition: color 0.3s linear;
	-o-transition: color 0.3s linear;
	-moz-transition: color 0.3s linear;
	-webkit-transition: color 0.3s linear;
	display:block;
}

a.menuepunktactive:hover {
	color:rgb(226,30,58);
}
}