/**
 * @file
 * Visual styles for menu.
 */
@media screen and (min-width: 1171px) {
  #block-www-main-menu {
    color: var(--white);
    font-size: 1.25em;
    max-width: 1400px;
    margin: auto;
    padding: 30px 60px 0 60px;
    width: 100%;
  }
  #block-www-main-menu a {
    text-decoration: none;
    color: inherit;
  }
  #block-www-main-menu li {
    list-style-type: none;
  }
  #block-www-main-menu .menu--root {
    display: flex;
    transition: all 200ms;
    margin: 0 0 45px 0;
    padding: 0;
    gap: 25px;
  }
  #block-www-main-menu .menu--root .menu-item--level-1 {
    margin: 0;
    display: flex;
    align-items: flex-end;
    padding: 0;
    position: relative;
  }
  #block-www-main-menu .menu--root .menu-item--level-1 > a {
    font-size: 1.15rem;
    position: rerlative;
    z-index: 2;
    padding: 0 3px;
    display: block;
    transition: all 500ms;
  }
  #block-www-main-menu .menu--root .menu-item--level-1 > a:after {
    content: '';
    height: 2px;
    width: 0;
    background: var(--white);
    position: absolute;
    left: 0;
    bottom: -2px;
    transition: all 200ms;
  }
  #block-www-main-menu .menu--root .menu-item--level-1 > a.is-active:after,
  #block-www-main-menu .menu--root .menu-item--level-1 > a:hover:after {
    content: '';
    height: 2px;
    width: 100%;
    background: var(--white);
    position: absolute;
    left: 0;
    bottom: -2px;
  }
}
@media screen and (max-width: 1170px) {
  #block-www-main-menu {
    position: fixed;
    top: 0 !important;
    right: -450px;
    width: 100%;
    height: 100vh;
    background: var(--white);
    padding: 60px 0;
    transition: all 500ms;
    max-width: 400px;
  }
  #block-www-main-menu .menu--root {
    color: var(--black);
    list-style-type: none;
    padding: 0;
    margin: 0;
  }
  #block-www-main-menu .menu--root a {
    color: inherit;
    text-decoration: none;
  }
  #block-www-main-menu .menu--root .menu--level-2 {
    padding: 0 20px 20px 60px;
    list-style-type: none;
  }
  #block-www-main-menu .menu--root .menu--level-2 .menu-item--level-2 > a {
    display: flex;
    align-items: center;
  }
  #block-www-main-menu .menu--root .menu--level-2 .menu-item--level-2 > a:before {
    font-family: 'Atelier-MB';
    font-weight: normal;
    content: '\F285\0a0';
    font-size: 0.8rem;
    transform: translateY(2px);
  }
  #block-www-main-menu .menu--root .menu-item--level-1.menu-item--active-trail {
    background: var(--green);
  }
  #block-www-main-menu .menu--root .menu-item--level-1.menu-item--active-trail a {
    color: var(--white);
  }
  #block-www-main-menu .menu--root .menu-item--level-1.menu-item--active-trail > a:before {
    content: '';
    width: 30px;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 20px;
    background: url(/themes/custom/schuler/bilder/icon-hobel.svg) no-repeat center center / contain;
  }
  #block-www-main-menu .menu--root .menu-item--level-1 > a {
    font-size: 2rem;
    padding: 5px 20px 5px 60px;
    display: block;
    position: relative;
  }
  #block-www-main-menu .menu--root .menu-item--level-1 > a.is-active {
    background: var(--green);
    color: var(--white);
  }
  #block-www-main-menu .menu--root .menu-item--level-1 > a.is-active:before {
    content: '';
    width: 30px;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 20px;
    background: url(/themes/custom/schuler/bilder/icon-hobel.svg) no-repeat center center / contain;
  }
}
.hamburger {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  position: fixed;
  right: 60px;
  top: 35px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  z-index: 200;
  background: rgba(0, 0, 0, 0.3);
  transition: all 500ms;
}
.hamburger > div {
  position: absolute;
  width: 24px;
  height: 2px;
  left: 50%;
  top: 50%;
  background: var(--white);
  transform-origin: center;
  transition: all 500ms;
}
.hamburger > div:first-child {
  transform: translate(-50%, -5px);
}
.hamburger > div:nth-child(2) {
  transform: translate(-50%, 0);
}
.hamburger > div:last-child {
  transform: translate(-50%, 5px);
}
.menu--main-open {
  height: 100vh;
  overflow: hidden;
}
.menu--main-open .hamburger {
  background: rgba(255, 255, 255, 0.8);
}
.menu--main-open .hamburger > div {
  background: var(--bgr-dark);
}
.menu--main-open .hamburger > div:first-child {
  transform: translate(-50%, 0) rotate(45deg) scaleX(1.2);
}
.menu--main-open .hamburger > div:nth-child(2) {
  transform: translate(-50%, 0) scaleX(0);
  opacity: 0;
}
.menu--main-open .hamburger > div:last-child {
  transform: translate(-50%, 0) rotate(-45deg) scaleX(1.2);
}
.menu--main-open #block-www-main-menu {
  right: 0;
}
#block-www-hauptnavigation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: var(--bgr-medium);
  z-index: -1;
  opacity: 0;
  visibility: hidden;
  transition: all 500ms;
}
#block-www-hauptnavigation .menu--root {
  color: var(--white);
  display: flex;
  gap: 70px;
  padding: 0;
  margin: 0 auto;
  max-width: 1360px;
  padding: 40px;
  position: relative;
}
#block-www-hauptnavigation .menu--root .menu-item {
  list-style-type: none;
}
#block-www-hauptnavigation .menu--root .menu-item a {
  display: inline-block;
  text-decoration: none;
  color: inherit;
  position: relative;
  white-space: nowrap;
  visibility: hidden;
}
#block-www-hauptnavigation .menu--root .menu-item a:after {
  content: '';
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--primary-color);
  display: block;
  position: absolute;
  transition: all 200ms;
}
#block-www-hauptnavigation .menu--root .menu--level-2,
#block-www-hauptnavigation .menu--root .menu--level-3 {
  padding: 45px 0 0 0;
  position: absolute;
  left: 40px;
  opacity: 0;
  visibility: hidden;
  transition: all 500ms;
}
#block-www-hauptnavigation .menu--root .menu--level-2 .menu-item > a,
#block-www-hauptnavigation .menu--root .menu--level-3 .menu-item > a {
  font-size: 1.25em;
  display: inline-flex;
  align-items: center;
  padding: 5px 0;
  gap: 10px;
}
#block-www-hauptnavigation .menu--root .menu--level-2 .menu-item > a:before,
#block-www-hauptnavigation .menu--root .menu--level-3 .menu-item > a:before {
  font-family: 'Atelier-MB';
  font-weight: normal;
  content: '\f10b';
  color: var(--primary-color);
  font-size: 1.8em;
  line-height: 0;
}
#block-www-hauptnavigation .menu--root .menu--level-2 .menu-item > a:after,
#block-www-hauptnavigation .menu--root .menu--level-3 .menu-item > a:after {
  left: 40px;
}
#block-www-hauptnavigation .menu--root .menu--level-2 .menu-item > a:hover:after,
#block-www-hauptnavigation .menu--root .menu--level-3 .menu-item > a:hover:after,
#block-www-hauptnavigation .menu--root .menu--level-2 .menu-item.menu-item--active-trail > a:after,
#block-www-hauptnavigation .menu--root .menu--level-3 .menu-item.menu-item--active-trail > a:after {
  width: calc(100% - 35px);
}
#block-www-hauptnavigation .menu--root .menu--level-3 {
  top: 0;
  left: calc(100% + 70px);
}
#block-www-hauptnavigation .menu--root .menu-item--level-2:hover .menu--level-3 {
  opacity: 1;
  visibility: visible;
}
#block-www-hauptnavigation .menu--root .menu-item--level-1 > a {
  font-size: 1.4em;
  font-weight: 700;
  padding: 0 5px;
}
#block-www-hauptnavigation .menu--root .menu-item--level-1 > a:after {
  left: 0;
}
#block-www-hauptnavigation .menu--root .menu-item--level-1.menu-item--active-trail > a:after,
#block-www-hauptnavigation .menu--root .menu-item--level-1 > a:hover:after {
  width: 100%;
}
#block-www-hauptnavigation .menu--root .menu-item--active-trail > .menu,
#block-www-hauptnavigation .menu--root .menu-item:hover > .menu {
  opacity: 1;
  visibility: visible;
}
.menu--main-open #block-www-hauptnavigation {
  opacity: 1;
  visibility: visible;
}
.menu--main-open #block-www-hauptnavigation .menu--root .menu-item a {
  visibility: visible;
}
.menu--footer h2 {
  margin: 0;
}
.menu--footer ul {
  margin: 0;
  padding: 0;
}
.menu--footer li {
  list-style-type: none;
}
.menu--footer > ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 30px;
  margin-bottom: 30px;
}
.menu--footer > ul li a {
  color: inherit;
  text-decoration: none;
}
.menu--footer > ul > li > a,
.menu--footer > ul > li > span {
  font-weight: 700;
  padding-bottom: 15px;
  display: block;
}
.menu--footer > ul > li > ul > li > a {
  padding: 2px 0;
  display: inline-block;
}