/* ================================= */
/* === Powered by : locomputing ===  */
/* ================================= */


nav {
margin:0;
padding: 0;
width: 100%;
}

#nav-menue {
width :100%;
position:absolute;
top:0;
left:0;
z-index: 999;
}

#nav-menue a {
text-decoration: none;
}
.menue-button {
left:calc(.35em + ((.35vw - 0.1em) * 3));
top: -5px;
color:black;
}
.menue-button {
position:absolute;
margin:0 auto;
z-index:1000;
width: calc(1em + ((1vw - 0.1em) * 3));
height:auto;
font-size: 200%;
font-weight: bold;
}
.menue-button-zu {
visibility:hidden;
}

#nav-menue:target #menu  {
visibility:visible;
margin-top:0;
margin-left:0;
background: white;
}
#nav-menue:target .menue-button-zu  {
visibility:visible;
display: inline-block;
margin-top:2px;
background: transparent;
}
#nav-menue:target .menue-button-open {
visibility:hidden;
margin-top:0;
background-color: black;
}

#menu {
z-index:999;
background: red;
visibility:hidden;
position:absolute;
top:0;
left:0;
overflow:hidden;
width:100%;
height:auto;
font-size: 100%;
font-weight: bold;
margin: 0;
padding:2.5em .5em .25em 0;
}

ul {
margin: 0 auto;
text-align: left;
}
ul li {
display: block;
text-align: left;
padding:.2em 0 .2em 0;
}


ul li {
list-style-type: none;
padding:5px 0;
color:#e60000;
}
ul li a {
color:blue;
}
ul li a:hover {
color:green;
}


ul li.raus {
list-style-type: none;
text-align: left;
padding:.2em 0 .2em 1em;
}

ul.liner {
display: block;
list-style-type: none;
padding: 0 0 0 2.5em;
text-align: left;
}
ul.liner > li {
display: block;
padding: .5em 0;
}
ul.liner ul {
padding:.1em 0;
}


@media screen and (min-width: 60em) {

nav {
width: 100%;
margin:0 auto;
}

.menue-button {
display:none;
}

#nav-menue {
position:relative;
height:auto;
padding:4px 0 .15em 0;
}

#menu {
	visibility:visible;
	background: white;
	padding: 0;
	text-align:center;
	position:relative;
	font-size: 100%;
	min-height:.1em;
	margin:0 .2em 0 .2em;
width: 90%;
height: auto;
border-right:none;
border-bottom:none;
}

ul {
width: auto;
padding: 0 5px;
}

ul li {
list-style-type: none;
padding:5px 5px;
color:#e60000;
}
ul li a {
color:blue;
}
ul li a:hover {
color:green;
}

ul.liner {
display: table;
list-style-type: none;
padding: 0;
margin: 0 auto;
}

ul.liner > li {
display: table-cell;
padding: 0 5px;
}

ul.liner > ul > li.a {
color:blue;
}

ul.liner ul {
padding: 0 1em;
}

ul li.raus {
list-style-type: none;
text-align: left;
padding:.2em 0 .2em .25em;
}

}