/* ===================================
   HAUPTMENÜ KOMPAKT
   =================================== */

.desktop-menu {
  display: flex;
  justify-content: center;
  align-items: center;
}

.desktop-menu .navilo {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2vw, 34px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.desktop-menu .navilo > li {
  position: relative;
  list-style: none;
}

.desktop-menu .navilo > li > a,
.desktop-menu .navilo > li > span {
  display: flex;
  align-items: center;
  height: 78px;
  color: #15372b;
  text-decoration: none;
  font-size: clamp(14px, 0.8vw + 0.6rem, 18px);
  font-weight: 600;
  white-space: nowrap;
  cursor: default;
  transition: color .25s ease;
}

.desktop-menu .navilo > li:hover > a,
.desktop-menu .navilo > li:hover > span,
.desktop-menu .navilo > li.active > a,
.desktop-menu .navilo > li.active > span,
.desktop-menu .navilo > li.current > a,
.desktop-menu .navilo > li.current > span {
  color: var(--primary, #c73535);
}

/* Pfeil Hauptmenü */
.desktop-menu .navilo > li.has-sub > a::after,
.desktop-menu .navilo > li.has-sub > span::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-left: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .25s ease;
}

.desktop-menu .navilo > li.has-sub:hover > a::after,
.desktop-menu .navilo > li.has-sub:hover > span::after,
.desktop-menu .navilo > li.has-sub.active > a::after,
.desktop-menu .navilo > li.has-sub.active > span::after,
.desktop-menu .navilo > li.has-sub.current > a::after,
.desktop-menu .navilo > li.has-sub.current > span::after {
  transform: rotate(225deg) translateY(-2px);
}

/* Dropdown allgemein */
.desktop-menu .navilo > li > .sub2 {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);

  width: 300px;
  padding: 18px 22px;

  background: rgba(247, 243, 242, .96);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 4px;
  box-shadow: 0 14px 40px rgba(0,0,0,.10);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  z-index: 999999;
  transition: opacity .22s ease, visibility .22s ease;
}

.desktop-menu .navilo > li:hover > .sub2,
.desktop-menu .navilo > li:focus-within > .sub2 {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Listen reset */
.desktop-menu .sub2,
.desktop-menu .sub3 {
  list-style: none;
  margin: 0;
  padding: 0;
}

.desktop-menu .sub2 > li {
  list-style: none;
}

/* Dropdown Links */
.desktop-menu .sub2 > li > a {
  display: block;
  padding: 9px 0;
  color: #15372b;
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  border-bottom: 1px solid rgba(21,55,43,.10);
  transition: color .25s ease;
}

.desktop-menu .sub2 > li:last-child > a {
  border-bottom: 0;
}

.desktop-menu .sub2 > li > a:hover,
.desktop-menu .sub2 > li.active > a,
.desktop-menu .sub2 > li.current > a {
  color: var(--primary, #c73535);
}

/* ===================================
   MEGAMENÜ: Leben in Kainach
   =================================== */

.desktop-menu .navilo > li:nth-child(2) > .sub2 {
  top: 100%;
  left: -70px;
  transform: none;

  width: 880px;
  max-width: calc(100vw - 60px);

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 42px;
  padding: 32px 42px;

  background: rgba(247, 243, 242, .97);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 4px;
  box-shadow: 0 14px 40px rgba(0,0,0,.10);
}

.desktop-menu .navilo > li:nth-child(2):hover > .sub2,
.desktop-menu .navilo > li:nth-child(2):focus-within > .sub2 {
  transform: none;
}

/* Pfeil über Megamenü */
.desktop-menu .navilo > li:nth-child(2) > .sub2::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 230px;
  width: 16px;
  height: 16px;
  background: rgba(247, 243, 242, .97);
  transform: rotate(45deg);
}

/* Gruppentitel */
.desktop-menu .sub-item.has-sub,
.sub-item.menu-group > span,
.sub-item.menu-group,
.desktop-menu .navilo > li:nth-child(2) > .sub2 > li > a,
.desktop-menu .navilo > li:nth-child(2) > .sub2 > li > span {
  display: block;
  font-size: 17px;
  font-weight: 700;
  color: #cb7a72;
  padding-bottom: 8px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(21,55,43,.12);
  text-decoration: none;
  cursor: default;
}

.sub3 {
  margin-top: 4px;
}

/* Level 3 */
.desktop-menu .sub3 a {
  display: block;
  padding: 5px 0;
  text-decoration: none;
  font-size: 14.5px;
  line-height: 1.35;
	font-weight: 600;
  transition: color .25s ease;
}

.desktop-menu .sub3 a:hover,
.desktop-menu .sub3 li.active > a,
.desktop-menu .sub3 li.current > a {
  color: var(--primary, #c73535);
}

/* Laptop */
@media (max-width: 1400px) {
  .desktop-menu .navilo {
    gap: 22px;
  }

  .desktop-menu .navilo > li > a,
  .desktop-menu .navilo > li > span {
    height: 72px;
    font-size: 15px;
  }

  .desktop-menu .navilo > li:nth-child(2) > .sub2 {
    left: -55px;
    width: 800px;
    padding: 28px 34px;
    gap: 24px 32px;
  }
}

@media (max-width: 1200px) {
  .desktop-menu .navilo {
    gap: 16px;
  }

  .desktop-menu .navilo > li > a,
  .desktop-menu .navilo > li > span {
    height: 66px;
    font-size: 14px;
  }

  .desktop-menu .navilo > li:nth-child(2) > .sub2 {
    left: -35px;
    width: 720px;
    max-width: calc(100vw - 40px);
    padding: 24px 28px;
    gap: 22px 28px;
  }
}


/* Cursor Pointer im Hauptmenü */
.desktop-menu .navilo > li > a,
.desktop-menu .navilo > li > span {
    cursor: pointer;
}

/* Auch bei Dropdown-Links */
.desktop-menu .sub2 a,
.desktop-menu .sub3 a {
    cursor: pointer;
}

/* Falls ganze Menübereiche hoverbar sein sollen */
.desktop-menu .navilo > li.has-sub {
    cursor: pointer;
}