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

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

  position: relative;
  z-index: 1000;
}

.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;
}


/* ===================================
   HAUPTMENÜ LINKS
   =================================== */

.desktop-menu .navilo > li > a,
.desktop-menu .navilo > li > span {
  position: relative;
  z-index: 2;

  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: pointer;

  transition: color .25s ease;
}


/* Desktop Hover + aktive Punkte */

.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,
.desktop-menu .navilo > li.open > a,
.desktop-menu .navilo > li.open > 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;
}


/* Pfeil geöffnet */

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


/* ===================================
   DROPDOWN ALLGEMEIN
   =================================== */

.desktop-menu .navilo > li > .sub2 {
  position: absolute;

  top: calc(100% - 1px);
  left: 50%;

  width: 300px;

  padding: 18px 22px;

  background: rgba(247, 243, 242, .98);

  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;

  transform:
    translateX(-50%)
    translateY(6px);

  z-index: 1001;

  transition:
    opacity .18s ease,
    transform .18s ease,
    visibility 0s linear .18s;
}


/* ===================================
   DROPDOWN GEÖFFNET
   =================================== */

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

  transform:
    translateX(-50%)
    translateY(0);

  transition:
    opacity .18s ease,
    transform .18s ease,
    visibility 0s;
}


/* ===================================
   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);

  cursor: pointer;

  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: calc(100% - 1px);

  left: -70px;

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

  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 28px 42px;

  padding: 32px 42px;

  background: rgba(247, 243, 242, .98);

  border: 1px solid rgba(0, 0, 0, .06);
  border-radius: 4px;

  box-shadow: 0 14px 40px rgba(0, 0, 0, .10);

  /*
   * Beim Megamenü kein translateX(-50%)
   */
  transform: translateY(6px);
}


/* Megamenü geöffnet */

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


/* ===================================
   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, .98);

  transform: rotate(45deg);

  /*
   * Keine unsichtbare Klick-/Hoverfläche
   */
  pointer-events: none;
}


/* ===================================
   GRUPPENTITEL
   =================================== */

.desktop-menu .sub-item.has-sub,
.desktop-menu .sub-item.menu-group > span,
.desktop-menu .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;
}


/* ===================================
   LEVEL 3
   =================================== */

.desktop-menu .sub3 {
  margin-top: 4px;
}

.desktop-menu .sub3 a {
  display: block;

  padding: 5px 0;

  color: #15372b;
  text-decoration: none;

  font-size: 14.5px;
  line-height: 1.35;
  font-weight: 600;

  cursor: pointer;

  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 BIS 1400px
   =================================== */

@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;
  }
}


/* ===================================
   LAPTOP / IPAD BREIT BIS 1200px
   =================================== */

@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;
  }
}


/* ===================================
   TOUCH / IPAD
   =================================== */

/*
 * Auf Touch-Geräten wird das Dropdown
 * NICHT über :hover gesteuert.
 *
 * Stattdessen setzt JavaScript die Klasse .open.
 */

@media (hover: none), (pointer: coarse) {

  /* Simuliertes Safari-Hover deaktivieren */

  .desktop-menu .navilo > li:hover > .sub2 {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }


  /* .open hat auf Touch Priorität */

  .desktop-menu .navilo > li.open > .sub2 {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform:
      translateX(-50%)
      translateY(0);

    transition:
      opacity .18s ease,
      transform .18s ease,
      visibility 0s;
  }


  /* Megamenü */

  .desktop-menu .navilo > li:nth-child(2).open > .sub2 {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateY(0);
  }


  /* Pfeil */

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


  /* Touch-Fläche etwas angenehmer */

  .desktop-menu .navilo > li > a,
  .desktop-menu .navilo > li > span {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
}