@media only screen and (max-width: 1000px){
.navbar{
	width: 100% !important;
}
}
	
	.navbar {
  width: 25%;
}

.nav-container {
display: flex;
justify-content: center;
align-items: center;
/* display: block; */
position: relative;
/* height: 60px; */
background: var(--bgfarbe);
margin: 1px;
}

.navbar .nav-container li {
  list-style: none;
}


.nav-container .checkbox {
  position: absolute; 
display: block;
height: 26px;
width: 26px;
/* top: 20px; */
left: 2%; 
z-index: 5;
opacity: 0;
cursor: pointer;
}

.nav-container .hamburger-lines {
  display: block;
height: 20px;
width: 26px;
position: absolute;
/* top: 25%; */
left: 2%;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: space-between;
}

.nav-container .hamburger-lines .line {
  display: block;
  height: 10%;
  width: 100%;
  border-radius: 10%;
  background: var(--akzent2);
}

.nav-container .hamburger-lines .line1 {
  transform-origin: 0% 0%;
  transition: transform 0.4s ease-in-out;
}

.nav-container .hamburger-lines .line2 {
  transition: transform 0.2s ease-in-out;
}

.nav-container .hamburger-lines .line3 {
  transform-origin: 0% 100%;
  transition: transform 0.4s ease-in-out;
}

.navbar .menu-items {
 /* padding-top: 120px; */
  background: var(--farbe2);
  height: auto;
	width: 87%;
  transform: translate(-150%);
  flex-direction: column;
  /*margin-left: -40px;*/
  padding-left: 5px;
	box-sizing:border-box;
  transition: transform 0.5s ease-in-out, visibility 0.5s ease-in-out;
	opacity: 0;
	position:absolute;
	visibility: hidden;
	top:0;
	left:13%;
	display: flex;
}

.navbar .menu-items li {
  /*margin-bottom: 1.2rem;
  font-weight: 500;*/
  font-size: 0.75rem;
	border-bottom: 1px solid var(--farbe1);
	padding:0.25em 0;
}

.logo {
 /* position: absolute;
  top: 25%;
  right: 1%; */
}

.nav-container input[type="checkbox"]:checked ~ .menu-items {
  transform: translateY(0);
	opacity: 1;
	z-index:5;
	visibility: visible;
}

.nav-container input[type="checkbox"]:checked {
  overflow: auto;
}

.nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line1 {
  transform: rotate(45deg);
}

.nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line2 {
  transform: scaleY(0);
}

.nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line3 {
  transform: rotate(-45deg);
}

.nav-container input[type="checkbox"]:checked ~ .logo{
  /*display: none;*/
}