nav{
   display: flex;
   flex-direction: column;
   position: relative;
   font-size: 14px;
   height: 200px;
   overflow: visible;
   z-index: 10;
}

header{
   height: 150px;
   width: 100vw;
   padding: 0vw 25rem;
}

header .top-box{
   overflow: hidden;
}

.top-box {
   flex-direction: row;
   display: flex;
   justify-content: space-between;
}

.rounded-self {
   width: 100px;
   height: 125px;
   display: none;
}  
  
header img{
   padding-top: 26px;
}

.nav-box{
   background-color: #f3f3f3;
   padding: 0vw 25rem;
   position: relative;
   overflow: visible;
}

.nav-box ul{
   display: flex;
   flex-direction: row;
   width: auto;
   height: 50px;
   align-items: center;
}

.nav-box ul li:hover{
   padding: 10px;
   border-radius: 3px;
   background-color: #3947533b;
}

.nav-box ul li img{
   width: 20px;
}

.nav-box ul li > a{
   padding: 10px 0px;
   text-decoration: none;
}

.nav-box ul li .home-button{
   display: flex;
   width: 35px;
   height: 35px;
   justify-content: center;
}

.nav-box ul li{
   list-style: none;
   margin-right: 10px;
   padding: 10px;
}

#navigation > ul:nth-child(1) > li:nth-child(1) {
   padding: 1px;
  }

.nav-box ul li a{
   color: #394753;
   text-decoration: none;
}

.nav-box li > a, li > .dropdown > a{
   text-transform: uppercase;
}

.nav-box > ul > li > .dropdown{
   display: inline;
   padding: 10px;
}

.dropdown-content{
   display: none;
   width: 200px;
   position: absolute;
   background-color: #f3f3f3;
   z-index: 200;
   flex-direction: column;
   color: pink;
}

.dropdown-content a{
   height: auto;
   border-bottom: 1px solid rgba(0, 0, 0, 0.3);
   display: flex;
   align-items: center;
   padding: 15px 10px;
}

.dropdown:hover .dropdown-content{
   display: flex;
   /* flex-direction: column; */
}
.dropdown-content a:hover{
   background-color: #c0c0c0;
}

.nav-menu-button{
   display: none;
}

@media only screen and (max-width:1600px){
   header, .nav-box{
      padding: 0vw 20rem;
   }
}

@media only screen and (max-width: 1400px){
   header,
   .nav-box{
      padding: 0vw 15rem;
   }
}

@media only screen and (max-width: 1200px){
   header,
   .nav-box{
      padding: 0vw 10rem;
   }
}

@media only screen and (max-width: 1000px){
   header,
   .nav-box{
      padding: 0vw 5rem;
   }
}

@media only screen and (max-width: 850px){
   header,
   .nav-box{
      padding: 0vw 1rem;
   }
}

@media only screen and (max-width: 690px){

   .hehe{
      height: 140px;
   }

   nav{
      height: auto;
      transition: 2s;
      position: fixed;
      z-index: 100;
      background-color: white;
   }

   .top-box{
      display: flex;
      flex-direction: row;
      width: 100vw;
      justify-content: space-between;
      align-items: center;
      padding: 0px 25px;
   }

   .rounded-self{
      width: 75px;
      height: 75px;
      display: block;
   }

   header{
      padding: 0 !important;
      display: flex;
      justify-content: center;
      height: 120px;
   }

   header .nav-box{
      padding: 0px;
   }

   header img{
      width: 200px;
      padding: 0;
   }

   header .box{
      width: 50px;
      height: 50px;
   }

   header .hamburger{
      width: 100%;
      height: 100%;
      background: #394753;
      display: flex;
      flex-direction: column;
      padding: 5px;
      justify-content: space-evenly;
      align-items: center;
      border-radius: 10px;
   }

   header .line{
      width: 80%;
      height: 2px;
      background: white;
   }

   .nav-box{
      padding: 0 !important;
      display: flex;
      align-items: center;
   }

   .nav-box p, .nav-box-open p{
      color: white;
   }

   .nav-box ul{
      display: none;
      padding: 0;
   } 
   
   .nav-box ul li .home-button{
      display: flex;
      width: 20px;
      height: 15px;
   }

   .nav-box ul li img{
      width: 30px;
   }

   .home-icon{
      width: 20px;
      height: 15px;
   }

   ul>li>.home-button::after{
      content: 'Startseite';
      margin-left: 5px;
      font-weight: 800;
   }

   .nav-menu-button{
      display: flex;
      height: 70px;
      justify-content: center;
      align-items: center;
      width: 20vw;
      margin: 0px;
   }

   .nav-box .nav-box-open, 
   .nav-box .nav-menu-button,
   .nav-box-open .nav-menu-button{
      display: block;
      padding: 5px 0px;
      background: #32323a;
      text-align: center;
      border: 4px solid white;
   }

   nav .nav-box-open{
      overflow: visible;
      z-index: 200;
      box-shadow: 0px 5px 6px -2px #394753;
   }

   .nav-box-open ul{
      padding: 0px 0px 0px 10px;
   }

   .nav-box-open .dropdown-content{
      background-color: white;
   }

   .nav-box-open .dropdown-content a{
      border-bottom: none;
      height: 45px;
      overflow: hidden;
   }

   .nav-box-open a, .nav-box a{
      text-decoration: none;
      display: flex;
      align-items: center;
      height: 35px;
   }

   .nav-box-open > ul > li{
      padding: 0px 0px;
   }

   .nav-box-open > ul > li > a{
      text-transform: uppercase;
   }

   .dropdown-content{
      display: block;
      position: relative;
      width: 100%;
   }
}