/* Menu  © admotion*/

#menu {
  z-index: 998;
  position: absolute;
  width: 100%;
  left: 0;
  background: #fff;
  padding: 40px;
  top: 0;
  box-sizing: border-box; border-bottom: 5px solid var(--blau);
}

#menu li {  }
#menu li a {  padding: 20px 0px; left: 0px; position: relative;color:var(--blau); font-size: 1.5em; }
#menu li.active a { font-weight: 700;}
#menu li a:hover { color: var(--dunkelblau); }

#menu a { color: #fff; }

    #menu-small { display: block; }
    #menu { display: none; }



/* Hamburger Menu */

#menu-small {
  width: 40px;
  height: 40px;
  position: relative;
  float: right; z-index:10000;
  margin-top: 0px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}
#menu-small.open {top: -85px;} 
#home #menu-small.open {top: -25px;} 
#menu-small span {
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  background: var(--blau);
  border-radius: 0px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}


#menu-small span:nth-child(1) {
  top: 0px;
}

#menu-small span:nth-child(2),#menu-small span:nth-child(3) {
  top: 11px;
}

#menu-small span:nth-child(4) {
  top: 22px;
}

#menu-small.open span:nth-child(1) {
  top: 11px;
  width: 0%;
  left: 50%;
}

#menu-small.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#menu-small.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#menu-small.open span:nth-child(4) {
  top: 11px;
  width: 0%;
  left: 50%;
}

@media(min-width:768px) {
    
}
@media(min-width:1250px) {
   
    #menu-small { display: none; }
    #menu { display: block !important; position: relative; width:auto;  border-bottom: 0px; padding: 0; left:auto;top:auto;background:transparent;}
    #menu li a {padding: 15px 30px; color:#fff;font-size: 1em; }
    #menu li a:hover { color: #fff; }
    #menu li.active a { font-weight: 400;}

    #menu ul { display: flex;}
    
    #menu li { background: var(--blau); transition: 0.2s;}
    #menu li:hover { background: var(--dunkelblau);}
    #menu li.active { background: var(--dunkelblau);}
   
        #menu li {  clip-path: polygon(20px 0%, 100% 0%, calc(100% - 20px) 100%, 0% 100%); margin-left: -21px; }

    /*
    #menu li:nth-child(1) {  clip-path: polygon(20px 0%, 100% 0%, 171px 100%, 0% 100%); }
    #menu li:nth-child(1) a {  padding-left: 40px; }
    #menu li:nth-child(2) {  clip-path: polygon(20px 0%, 100% 0%, 123px 100%, 0% 100%); margin-left: -21px;}
    #menu li:nth-child(3) {  clip-path: polygon(20px 0%, 100% 0%, 95px 100%, 0% 100%); margin-left: -21px;}
    #menu li:nth-child(4) {  clip-path: polygon(20px 0%, 100% 0%, 182px 100%, 0% 100%); margin-left: -21px;}
    #menu li:nth-child(5) {  clip-path: polygon(20px 0%, 100% 0%, 113px 100%, 0% 100%); margin-left: -21px;}
    #menu li:nth-child(6) {  clip-path: polygon(20px 0%, 100% 0%, 104px 100%, 0% 100%); margin-left: -21px;}
    */

    #balken {position: absolute; background: var(--blau); right: -5000px; top: 0; width: 5050px; height: 100%; z-index: -1;}
    
}
@media(min-width:1650px) {
   
    #menu-small { display: none; }
    #menu { display: block; position: relative;}
    #menu li a {padding: 15px 30px; }

    #menu ul { display: flex;}
    
    #menu li { background: var(--blau); transition: 0.2s;}
    #menu li:hover { background: var(--dunkelblau);}
    #menu li.active { background: var(--dunkelblau);}
        
    

    #balken {position: absolute; background: var(--blau); right: -5000px; top: 0; width: 5050px; height: 100%; z-index: -1;}
    
}