#nav-wrapper{
	position:fixed;
	z-index:50;
	top:0;
	bottom:0;	
	right:-100%;
	width:100%;
	height:100vh;
	line-height:1.5;
	background:#e3dcd3;
	/*padding-left:var(--spacing-top);
	padding-bottom:var(--spacing-ext);*/
	padding:3rem var(--spacing-top) var(--spacing-top);
	padding:60px var(--spacing-top) 30px;
	transition: -webkit-transform 350ms ease-in;
    transition: -ms-transform 350ms ease-in;
    transition: transform 350ms ease-in;
	display:flex;
	flex-direction:column;
	justify-content: space-between;
	
	}
	
#nav-wrapper.open {
  transform: translateX(-100%);
	}
/*	
#nav-wrapper,
.hauptmenu{
	width:99.7%;
	}
*/

nav{
	font-size:1.1em;
	line-height:1.5;
}


/*	
.current_page_item a,
.current-menu-item a{
	text-decoration:underline;
}
*/	
	

	



.menu-exp{
	display:flex;
	gap:1em
}

/*
#navbar h1{
	font-size:1.2em;
}

#navbar{
	width:100%;
}
*/



/* --- Hamburger-Button --- */
.hamburg {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 32px;
  height: 22px;
  padding: 0;
  z-index: 100;
  position:absolute;
  top:calc(var(--spacing-top) + 2px);
  right:var(--spacing-ext);
  /*transform:scale(92%)*/
}

.hamburg[aria-expanded="true"]{
	position:fixed
}
/*
.hamburg:focus {
  outline: 2px solid #000; 
  outline-offset: 4px;
}
*/
.hamburg .line {
  height: 3px;
  width: 100%;
  background: #000;
  border-radius: 0;
  transition: all 0.3s ease;
}





/* Animation zum X */
.hamburg[aria-expanded="true"] .line:nth-child(1) {
  transform: rotate(45deg) translate(6.5px, 7px);
}

.hamburg[aria-expanded="true"] .line:nth-child(2) {
  opacity: 0;
}

.hamburg[aria-expanded="true"] .line:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -7px);
}

/* Screenreader Text unsichtbar */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}






	



@media (min-width: 1100px) {

			
	#navbar{
	width:var(--mainWidth);
	/*display:flex;
	justify-content:space-between*/
	display:grid;
	grid-template-columns: auto auto 30px;
	gap:16px;
	}
	
	.project-title{
	grid-column: 1 / 2;
	}
	
	.page-title{
	grid-column: 2 / 3;
	justify-self: end;
	}
	
	#site-menu{
	grid-column: 3 / 4;
	}
	
	
	#nav-wrapper{
	width:22%;
	right:-22%;
	width:40%;
	right:-40%;
	padding: var(--spacing-top);
	}
	
	nav{
		line-height:1.2;
}



@media screen and (min-width: 2000px){
	
	#site-menu{
	width:var(--mainWidth)
}
}