/* Menu  © admotion*/

#menu {  z-index: 998; background: var(--blau1); padding: 20px; width: 260px; right: -300px; top: 84px; position: fixed; transition: 0.3s ease;} 
#menu::after { position: absolute; content: ''; left: -10px; bottom: -10px; right: 10px; top: 10px; border-left: 10px solid var(--blau2); border-bottom: 10px solid var(--blau2); z-index: -1;} 

#menu li a {color: white; list-style: none;}
#menu ul {margin: 0; padding: 0;}
#menu ul li {font-size: 18px; padding-bottom: 10px; border-bottom: 1px solid white; margin-bottom: 10px;}
#menu ul li:last-child {padding-bottom: 0px; border-bottom: 0px solid white; margin-bottom: 0px;}
#menu ul li ul li {font-size: 14px; padding: 0; border: 0; margin: 3px 0 0;}


    #menu-small { display: block; }
    #menu.open { right: 0; }



/* Hamburger Menu */

#menu-small { background: var(--blau1);
  width: 44px; right: 20px; top: 20px;
  height: 44px; 
  position: fixed;
  -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 span {
  display: block;
  position: absolute;
  height: 2px;
  width: 60%;
  background: #fff;
  border-radius: 0px;
  opacity: 1;
  left: 20%;
  -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: 14px;
}

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

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

#menu-small.open span:nth-child(1) {
  top: 21px;
  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: 21px;
  width: 0%;
  left: 50%;
}

@media(min-width:768px) {
    
}
@media(min-width:1250px) {
   
    #menu-small { display: none; }
    #menu { right: auto; top: auto; position: relative; background: none; padding: 0; width: auto; margin-bottom: -4px;}
    #menu::after { display: none;}
  #menu ul {display: flex; justify-content: space-between;}
  #menu li a {color: var(--text);}
  #menu li.active a {color: var(--blau1);}
  #menu li:hover a {color: var(--blau1);}
  #menu ul li {padding-bottom: 0; margin-bottom: 0; border-bottom: 0;}
  #menu ul ul {display: none;}
  #menu ul.mod-menu > li {padding-left: 70px;}
  #menu ul.mod-menu > li::before {content: ''; width: 58px; height: 10px; background: var(--grau); display: block; margin-bottom: -19px; margin-left: -62px; transition: 0.2s;}
  #menu ul.mod-menu > li:last-child::after {content: ''; width: 58px; height: 10px; background: var(--grau); display: block; margin-top: -15px; margin-left: 75px;}
  #menu ul.mod-menu > li:last-child:hover::after {background: var(--blau1); }
  
  #menu ul.mod-menu > li:hover::before {background: var(--blau1);}
  #menu ul.mod-menu > li:hover + li::before {background: var(--blau1);}
  
  
  #menu ul.mod-menu > li:hover ul {display: block;}
  #menu ul.mod-menu > li ul {position: absolute; padding: 15px 0 0;  margin:0 0 0 -20px;  }
  #menu ul.mod-menu > li ul::after { position: absolute; content: ''; left: 80%; bottom: -10px; right: -10px; top: 50%; border-right: 10px solid var(--blau1); border-bottom: 10px solid var(--blau1);} 

  #menu ul.mod-menu > li ul li {margin: 0; padding: 10px 20px; list-style: none;font-size: 16px;background:var(--blau2);}
  #menu ul.mod-menu > li ul li:first-child {padding-top: 20px;}
  #menu ul.mod-menu > li ul li:last-child {padding-bottom: 20px;}
  #menu ul.mod-menu > li ul li::before {content: ''; width: 31px; height:6px; background: var(--blau1); display: inline-block; margin-right: 10px; margin-bottom: 3px; transition: 0.2s ease; }
  #menu ul.mod-menu > li ul li:hover::before {width: 36px; }
    #menu ul.mod-menu > li:hover li a {color: var(--text);}
    #menu ul.mod-menu > li:hover li:hover a {color: var(--blau1);}
    #menu ul.mod-menu > li li.active a {color: var(--blau1);}
  #menu ul.mod-menu > li ul li.active::before {width: 36px; }


  
}