@charset "utf-8";
/* CSS Document */

* {
	margin:0;
	padding:0;
	list-style:none;
	box-sizing:border-box;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.x {
	position: fixed;
	top:0;
}



header {
	width:100%;
	
	float:left;
	background-image: url("../img/musteroben.jpg");
	background-repeat: no-repeat;
	background-size: cover;
}

.logo {
	display:block;
	width: 100%;
	max-width: 16rem;
	padding: 1em;
	
}

nav {
	width: 100%;
	float:left;
	height:0;
	overflow:hidden;
	transition: height .2s ease-in-out;
	-webkit-transition: height .2s ease-in-out;
	-moz-transition: height .2s ease-in-out;
	-ms-transition: height .2s ease-in-out;
	-o-transition: height .2s ease-in-out;
}

nav li {
	float:left;
	width:100%;	
}

nav a {
	display:block;
	height:100%;
	width:100%;
	padding:0;
	text-decoration:none;
	color:white;
	padding: 1.2rem;
	
}

nav a:hover {
	box-shadow: 0 -2px 0 #fff inset,            /* border bottom Minus 5px*/
    	510px 0 0 rgba(255,255,255,0.1) inset;     /* aktiver Bereich leicht weißer BG*/
    	padding: 1.2rem; 
}

.nav-toggle {
	background:rgba(0,0,0,0.2);
	display:block;
	position:absolute;
	right:0;
	top:0;
	padding:1em;
	color:white;
	cursor:pointer;
	text-decoration:none;
}

.nav-toggle:hover {
	background:rgba(0,0,0,0.4);
}

#nav-open:target .nav-closed {
	display:block;
}

.nav-closed,
#navi-closed:target .nav-closed,
#nav-open:target .nav-open {
	display:none;
}

.green {
	color: var(--link-color);
}

@media screen and (max-width: 1059.99px) {
	#nav-open:target nav {		
		height:510px;
	}
}

@media screen and (min-width: 1060px) {
	.x {
		display: flex;
		justify-content: center;
		align-content: center;
		align-items: center;
		margin: 0 auto;
		width: 100%;
		background-image: url("../img/musteroben.jpg");
		background-repeat: no-repeat;
		background-size: cover;
	}

	header {		
		max-width: 1400px;
		background-image: none;
	}
		
	.nav-toggle {display:none !important;}

	
	.logo {
		width:auto;
		float:left;	
	}
	
	nav {
		float:right;
		width:auto;
		display:block !important;
		height:auto;
		max-width: 1400px;
		
	}

	nav a {
		padding: 36px 15px 36px 15px;
	}

	nav a:hover {
		box-shadow: 0 -5px 0 #fff inset,            /* border bottom Minus 5px*/
    	510px 0 0 rgba(255,255,255,0.1) inset;     /* aktiver Bereich leicht weißer BG*/
    	padding: 36px 15px 36px 15px;  

	}

	nav li {
		width:auto;
		padding: 0;	
		line-height: 50px;
	}


}