*{
  box-sizing:border-box;
}

/* NAVBAR */

.navbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:#F2C94C;
  padding:0 15%;
  font-size: 20px;
}

/* LOGO */

.logo img{
  height:30px;
}

/* MENU */

.nav-menu{
  list-style:none;
  display:flex;
  margin:0;
  padding:0;
}

.nav-menu li{
  position:relative;
}

.nav-menu a{
  display:block;
  padding:14px 18px;
  color:white;
  text-decoration:none;
  white-space:nowrap;
}

.nav-menu a:hover{
  background:#c2992C;
}

/* SUBMENUS */

.submenu{
  list-style:none;
  padding:0;
  margin:0;
  position:absolute;
  background:#F2C94C;
  min-width:200px;
  top:100%;
  left:0;  
  
  display:block;
  opacity:0;
  transform:translateY(6px);
  visibility:hidden;
  pointer-events:none;
  transition:
    opacity .18s ease,
    transform .18s ease,
    visibility 0s linear .18s;
}

/* SUBMENU RECHTS */

/* erstes Dropdown */
.nav-menu > li > .submenu{
  left:0;
  top:100%;  
}


.nav-menu li:hover > .submenu{
  opacity:1;
  transform:translateY(0);
  visibility:visible;
  pointer-events:auto;
  transition:
    opacity .18s ease,
    transform .18s ease,
    visibility 0s;
}


/* alle weiteren Ebenen */
.submenu .submenu{
  left:-100%;
  top:0;
  transform:translateX(-6px);
}

/* HOVER DESKTOP */

.nav-menu li:hover > .submenu{
  display:block;
}


.nav-menu li:hover > .submenu .submenu{
  transform:translateX(0);
}


/* HAMBURGER */

.hamburger{
  display:none;
  font-size:28px;
  color:white;
  cursor:pointer;
}


.nav-menu a{
  position:relative;
  transition: color .15s ease, background-color .15s ease;
}


.menu-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.menu-item:hover {
  background:#c2992C;
  cursor:pointer;
}


.menu-item a::after { /* Klickfläche ausdehnen */
  content: "";
  position: absolute;
  inset: 0;                    /* dehnt über die ganze Karte */
}


.submenu-toggle{
  display:none;
  cursor:pointer;
  padding:14px;
  color:white;
  font-size:14px;
}

.submenu-toggle{
  transition:transform 0.2s;
}

.submenu-toggle.open{
  transform:rotate(180deg);
}


.nav-menu a::before{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  bottom:8px;
  height:2px;
  background: currentColor;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .18s ease;
  opacity:.85;
}
.nav-menu a:hover::before{
  transform:scaleX(1);
}


/* MOBILE */

@media (max-width:800px){

  .hamburger{
    display:block;
    padding-right: 6px;
  }

  .logo {
    padding-left: 4px;
    padding-top: 4px;
  }

  .navbar{
    padding:0 0px;
  }

  .nav-menu{
    position:absolute;
    top:38px;
    left:0;
    width:100%;
    background:#F2C94C;
    flex-direction:column;
    display:none;
  }

  .nav-menu.active{
    display:flex;
  }

  .menu-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
  }

  .menu-item a{
    flex:1;
  }

  
.submenu{
    max-height:0;
    overflow:hidden;
    transition: max-height .18s ease, opacity .18s ease;
    opacity:0;
    display:block;
  }
  .submenu.open{
    max-height:500px;
    opacity:1;
  }


  .nav-menu li{
    width:100%;
  }

  .submenu-toggle{    
    display:block;
    padding:14px 18px;
    cursor:pointer;
    color:white;
    transition:transform 0.1s ease;
  }

  .submenu-toggle.open{
    transform:rotate(180deg);
  }

  .submenu{
    max-height:0;
    overflow:hidden;
    transition:max-height 0.1s ease;
    position:relative;
    background:#F2C94C;
    display:none;
    padding-left:20px;
    border-left:2px solid #c2992C;
  }
  .submenu.open{
    max-height:500px;
  }
  .submenu a{
    padding-left:20px;
  }
  .submenu li a{
    padding-left:35px;
  }

  .submenu .submenu li a{
    padding-left:55px;
  }

  .submenu .submenu{
    left:0;
  }

  .has-submenu > a::after{
    content:"▾";
    float:right;
    font-size:14px;
  }

.menu-item a::after { /* Klickfläche ausdehnen */
    content: none;             /* entfernt die große Klickfläche */
  }


}


@media (prefers-reduced-motion: reduce){
  *{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}