* { box-sizing:border-box; }

nav { width:100%; display:none; }	
#navi-open:target nav, #nav:target nav { display:block; }
nav a {
	display:block;
	height:100%;
	width:100%;
}

.nav-toggle {
	z-index: 100;
	display:block;
	position:absolute;
	right:0px; 
	top:0px; 
	padding-right:4%; 
	padding-top:1vH;
	margin-bottom:1vH;
	cursor:pointer;
	text-decoration:none;
	width:10%;
	box-shadow: 0px 0px 0px transparent;
}

.nav-toggle img { width:100%; }
.nav-toggle:hover {  }
.nav-hide, .nc { display:none; }
#navi-open:target .nav-hide, #nav:target .nc { display:block; }
#navi-hide:target .nav-hide, #nc:target .nc { display:none; }
#main { width:100%; }

/* ****************************************************************************** */
/* große Bildschirme                                                              */
/* ****************************************************************************** */
@media screen and (min-width:771px) {
.nav-toggle { display:none !important; }
nav { width:auto; display:block !important; }
nav li { width:auto; }
}


/* ****************************************************************************** */
/* Smartphones                                                                    */
/* ****************************************************************************** */
@media screen and (max-width:770px) {
#navi-open:target main, #nav:target main { opacity:1; }
}