/* nav overlay menu */
.menu-container {
  margin-top: 3rem;
  font-size: 95px;
  line-height: 125px;
  font-weight: 500;
  opacity: 0;
  display: none;
  transition-property: opacity, display, font-size;
  transition-duration: 0.3s, 0.01s, 0.3s;
  transition-delay: 0.01s, 0.2s, 0s;
}
body.menuactive .menu-container {
  opacity: 1;
  display: block;
}
body.menuactive .swiper,
body.menuactive .indexheader,
body.menuactive .indexwrap,
body.menuactive .contentwrap,
body.menuactive .footer {
  display: none!important;
  /* important is needed to override .contentwrap.d-flex */
} 
nav {
  width: 100%;
}
nav ul,
nav li {
  list-style: none;
  padding: 0;
  margin: 0;
  transition: 0.5s all;
}
nav a {
  display: block;
  text-decoration: none;
}
nav a:hover,
nav a:visited {
  text-decoration: none;
}
nav.overlay-menu li {
  position: relative;
}
nav.overlay-menu li a {
  transition: padding 0.5s, margin 0.5s;
  margin-left: -5px;
}
nav.overlay-menu li::before {
  content: "";
  background-image: url(../images/icon-menuitem.svg);
  background-repeat: no-repeat;
  top: 0;
  left: -5px;
  width: 55px;
  height: 94px;
  background-size: 47px 81px;
  background-position: 0px 0px;
  display: block;
  opacity: 0;
  transition: 0.5s opacity;
  position: absolute;
  margin-left: 0;
}
nav.overlay-menu li:hover:before {
  opacity: 1;
}
nav.overlay-menu li:hover a {
  padding-left: 2.6rem;
} 

/* pageelements */
nav.overlay-menu .menu-pageelements {
  padding: 0 0 0 5.6rem;
  font-size: 30px;
  line-height: 39px;
  opacity: 0;
  max-height: 1px;
  transition: max-height 0.5s, opacity 0.5s, padding 0.5s;
}
nav.overlay-menu li.mobileactive .menu-pageelements,
nav.overlay-menu li:hover .menu-pageelements {
  padding: 0 0 0 1.5rem;
  max-height: calc( 4 * 39px );
  opacity: 1;
}
nav.overlay-menu .menu-pageelements li:hover::before {
  background-image: unset;
  opacity: 0;
}

body.menuactive nav.overlay-menu:has(.menu-pageelements) .menu-bar > li.mobileactive + li,
body.menuactive nav.overlay-menu:has(.menu-pageelements) .menu-bar > li:hover + li {
  /* overlaying pageelements submenu */
  transition: background-color 0s;
  background-color: var(--kemki-swatch-lightgray);
}
body.menuactive nav.overlay-menu:has(.menu-pageelements) .menu-bar > li:not(.mobileactive,:hover) + li {
  transition: background-color 2.5s;
  background-color: rgba(0,0,0,0);
}