:root{
     
      --menu-width: 450px;
      --transition-speed: 0.3s;
      --width: 86%;
  }
  
  .flexx-nav-button{
     position: relative
  }
  
.mobile-menu-button {
  position: absolute;
  right: calc((100% - var(--width)) / 2);
  top: 0;
  display: flex;
  flex-direction: column;
  bottom: 0;
  margin: 15px auto 0;
  height: 40px;
  justify-content: space-around;
  padding: 12px 0;
  cursor: pointer;
  z-index: 1002;
}

.flexx-nav-left .mobile-menu-button{
   align-items: flex-start;
   left: 0;
}
.flexx-nav-right .mobile-menu-button{
    align-items: flex-end;
    right: 0;
}
 
header .line--burger,
header.shrink .line--burger {
   width: 42px;
   height: 2px;
   display: block;
   background: var(--white);
   transition: all 0.2s ease !important;
}
  
.line--burger:last-child {
    width: 30px;
}


.flexx-nav-visible .mobile-menu-button .line--burger:first-child {
  transform: rotate(-45deg);
  width: 32px;
  background: var(--black);
}

.flexx-nav-visible .mobile-menu-button .line--burger:last-child {
  transform: rotate(45deg);
  margin-top: -15px;
  width: 32px;
  background: var(--black);
 }
 
 
 
 
 /* Standard-Navigation: von links */
 .nav-container {
    position: fixed;
    top: 0;
    width: var(--menu-width);
    height: 100%;
    background: var(--white);
    transition: transform var(--transition-speed) ease-in-out;
    z-index: 1001;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
    font-display: swap;
    font-family: 'Quattrocento Sans';
    font-style: normal;
    font-weight: 400;
    overflow-y: auto;
    z-index: 999;
}
.nav-container-inner{
  
  overflow: hidden;
}
 /* Wenn body .flexx-nav-left hat -> Navigation von links */
 .flexx-nav-left .nav-container {
     left: 0;
     transform: translateX(-100%);
 }
 
 .flexx-nav-left.flexx-nav-visible .nav-container {
     transform: translateX(0);
 }
 
 /* Wenn body .flexx-nav-right hat -> Navigation von rechts */
 .flexx-nav-right .nav-container {
     right: 0;
     transform: translateX(100%);
 }
 
 .flexx-nav-right.flexx-nav-visible .nav-container {
     transform: translateX(0);
 }
 
 
 .has-child{
  display: flex;
  align-items: center;  

      width: 100%;
      justify-content: space-between;
  }
 
 
 .has-child a{
   position: relative;
       display: flex;
       align-items: center;
       height: 40px;
 }
 .has-child .arrow {
         border-left: 1px solid var(--black20);
         z-index: 1;
         cursor: pointer;
         height: 34px;
         width: 40px;
         display: flex
 ;
         align-items: center;
         justify-content: center;
         right: 7vw;
     }
 .has-child  .arrow:after {
     content: "";
     position: absolute;
     height: 12px;
     width: 12px;
     border-right: 1px solid var(--black40);
     border-top: 1px solid var(--black40);
     transform: rotate(45deg);
 }
 
 /* Menüstruktur */
 .nav-list {
     list-style: none;
     padding: 100px 20px;
     margin: 0;
     position: relative
 }
 .nav-list li ul{
    list-style: none;
     margin: 0;
 }
 .nav-list li {
     padding: 10px;  
             border-bottom: 1px solid var(--black20);
      
 }
 
 .nav-list a {
     text-decoration: none;
     color: #000;
     font-size: 18px;
 }
 
 /* Untermenüs */
 .submenu {
     position: absolute;
     top: 0;
      width: 100%;
     z-index: 1020;
      padding: 100px 20px;
     background: var(--white);
     transition: transform var(--transition-speed) ease-in-out;
     visibility: hidden;
 }
 
 /* Standard: Untermenü slidet von rechts */
 .flexx-nav-left .submenu {
     left: 0;
     z-index: 100;
     transform: translateX(-100%);
 }
 
 .flexx-nav-left .submenu.active {
     transform: translateX(0);
     visibility: visible;
     
 }
 /* Sanfte Rückwärts-Animation */
 .flexx-nav-left .submenu.closing {
     transform: translateX(-100%);
     visibility: visible;
 }

 /* Wenn Navigation von rechts kommt, soll das Untermenü von links sliden */
 .flexx-nav-right .submenu {
     right: 0;
      z-index: 100;
     transform: translateX(100%);
 }
 
 .flexx-nav-right .submenu.active {
     transform: translateX(0);
     visibility: visible;
 }
 /* Sanfte Rückwärts-Animation */
 .flexx-nav-right .submenu.closing {
     transform: translateX(0);
     visibility: visible;
 }
 /* Zurück-Button */

 
 .nav-list li.mobile-back {
         display: flex;
         align-items: center;
         cursor: pointer
     }
 
 .mobile-back:before {
     content: "";
     height: 12px;
     display: block;
     width: 12px;
     border-left: 1px solid var(--black);
     border-bottom: 1px solid  var(--black);
     transform: rotate(45deg);
     margin-right: 5px;
 }

 .flexx-nav-cta {
   padding: 0 20px
 }
 .flexx-nav-cta a.button {
      background: linear-gradient(90deg, rgba(78, 153, 151, 1) 0%, rgba(54, 94, 132, 1) 48%, rgba(66, 103, 227, 1) 100%);
      transition: all .3s ease;
      background-position: left;
      background-size: 100% 100%;
      cursor: pointer !important;
      color: var(--white); !important;
      display: inline-flex !important;
      align-items: center;
      height: 40px;
      padding: 0 30px;
      border: 0 !important;
      border-radius: 100px;
      text-decoration: unset !important;
}

.flexx-nav-visible header {
    background: transparent;
    height: 1px;
}  
  .flexx-nav-visible header .light_a{
    opacity: 0;
}
  
  .flexx-nav-visible header.shrink,
  .flexx-nav-visible header {
    background: transparent
}
  .flexx-nav-submenu-visible .flexx-nav-cta{
    display: none;
}
.flexx-nav-visible header img.logo{
    display: none;
}
.flexx-nav-visible header a.hotline{
    display: none;
}

@media(max-width: 767px){
    .mobile-menu-button {
        margin: 0 auto;
    }
}
@media (min-width: 768px) {
    .mobile-menu-button {
        margin: 0 auto;
    }
}
@media (min-width: 992px) {
    .mobile-menu-button {
        margin: 12px auto 0;
    }
}
@media(max-width: 991px){
    :root{
       
        --menu-width: 100%;
    }
  }