/* Navigation  */

header {
  position: fixed;
  top: 0;
  left: 50%; /* Schiebt die linke Kante in die Bildschirmmitte */
  transform: translateX(-50%); /* Zieht den Header um 50% seiner Breite zurück */
  
  max-width: 120.313rem; /* 1925px -> 120.313rem */ 
  width: 100%;
  background-color: var(--background-color); 
  border-bottom: thin solid var(--schrift-color);
  z-index: 99;
}

.logo {
	display:block;
	width:100%;
	padding: 0.313rem; /* 5px -> 0.313rem */
}

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

nav li {
	float:left;
	width:100%;
 text-decoration:none; list-style: none;
     }

nav a {
	display:block;
	height: 10%;
	width:100%;
	padding: 0.625rem; /* 10px -> 0.625rem */
 font-family: var(--schrift);
 font-size: 1rem; /* 16px -> 1rem */
	font-weight: 300;
	text-decoration:none;
 color:var(--schrift-color); 
}


.nav-toggle {
	display:block;
	position:absolute;
	right:0;
	top:0;
	padding: 0.625rem; /* 10px -> 0.625rem */
 font-family: var(--schrift);
 font-size: 1.375rem; /* 22px -> 1.375rem */
 color:var(--schrift-color); 
	cursor:pointer;
	text-decoration:none; 
}



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

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

@media screen and (max-width: 50.313rem) { /* 805px -> 50.313rem */
	#nav-open:target nav {
		height: auto;
    }
}

@media screen and (min-width: 50.313rem) {  
.nav-toggle {
    display:none !important;
}
.logo {
		width:auto;
		float:left;	
    }

	nav { 
		float:right;
		width:auto;
		display:block !important;
		height:auto; 
    }
	nav li { 
		    width:auto;
		    padding:0; 	
        }
}  

a:hover {
	color:var(--schrift-color-hover);
  }