/* ====== Basis ====== */
.main-nav {
  --bg: #fff;
  --fg: #1e1e1e;
  --border: #e5e7eb;
  --accent: #B6373C;
}
.main-nav .menu { list-style: none; margin: 0; padding: 0; }
.main-nav .menu a { text-decoration: none; color: var(--fg); }

/* ====== Desktop: Top-Level horizontal ====== */
.main-nav .menu.level-1 {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  padding: .5rem 0;
}
.main-nav .menu.level-1 > li { position: relative; }
.main-nav .menu.level-1 > li > a { display: block; padding: .5rem .25rem; }

/* Aktiver Menüpunkt */
.main-nav .menu li.is-active > a,
.main-nav .menu li > a[aria-current="page"] {
  color: var(--accent);
  font-weight: 600;
}

/* ====== Desktop: Submenüs (hover) ====== */
.main-nav .menu ul {           /* level-2+ */
  position: absolute;
  left: 0;
  top: 100%;
  min-width: 14rem;
  padding: .5rem 0;
  margin: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  box-shadow: 0 10px 20px rgba(0,0,0,.06);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s linear;
  pointer-events: none;
}
.main-nav .menu li:hover > ul,
.main-nav .menu li:focus-within > ul {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.main-nav .menu ul li { position: relative; }
.main-nav .menu ul li > a { display: block; padding: .5rem .75rem; white-space: nowrap; }

/* 3. Ebene und tiefer seitlich ausklappen */
.main-nav .menu ul ul {
  top: 0;
  left: 100%;
}

/* Hover/Focus Feedback */
.main-nav .menu a:hover,
.main-nav .menu a:focus { text-decoration: underline; outline: none; }

/* ====== Pfeile (nur Desktop) ====== */
@media (min-width: 901px) {
  .submenu-toggle { display: none; } /* Button verstecken */
  .main-nav .menu li.has-submenu > a::after {
    content: "▾";
    margin-left: .35rem;
    font-size: .8em;
  }
  .main-nav .menu li.has-submenu ul li.has-submenu > a::after { content: "▸"; }
}

/* ====== Mobile ≤ 900px ====== */
/* Kopf mit Hamburger */
.nav-mobile { display: none; align-items: center; gap: .5rem; }
.nav-toggle {
  appearance: none; background: transparent; border: 0; cursor: pointer;
  width: 36px; height: 24px; color: #222; position: relative;
}
.nav-toggle::before,
.nav-toggle::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor;
}
.nav-toggle::before { top: 0; box-shadow: 0 11px 0 currentColor; } /* oben + Mitte */
.nav-toggle::after  { bottom: 0; }                                  /* unten */

/* Mobile Layout/Logik */
@media (max-width: 900px) {
  .nav-mobile { display: flex; }
  .main-nav .menu.level-1 { display: none; border: 0; padding: 0; }
  .main-nav.is-open .menu.level-1 { display: block; }

  /* Top-Level gestapelt */
  .main-nav .menu.level-1 > li { position: static; border-top: 1px solid var(--border); }
  .main-nav .menu.level-1 > li > a { display: inline-block; padding: .9rem .25rem; }

  /* Submenüs einklappbar, nicht absolut positioniert */
  .main-nav .menu ul {
    position: static; left: auto; top: auto; min-width: 0;
    margin: 0; padding: 0 0 .5rem 0; border: 0; box-shadow: none; background: transparent;
    opacity: 1; visibility: visible; transform: none; pointer-events: auto;
    display: none; /* zu */
  }
  .main-nav .menu li.open > ul { display: block; } /* auf */

  /* Einrückungen Ebenen */
  .main-nav .menu.level-2 > li > a { display: block; padding: .5rem .75rem .5rem 1.25rem; }
  .main-nav .menu.level-3 > li > a { padding-left: 2rem; }
  .main-nav .menu.level-4 > li > a { padding-left: 2.75rem; }

  /* Buttons für Submenüs sichtbar, Caret am Link aus */
  .main-nav .menu li.has-submenu > a { padding-right: 2rem; }
  .main-nav .menu li.has-submenu > a::after { display: none; }
  .main-nav .menu li.has-submenu > .submenu-toggle { display: inline-block; float: right; margin-right: .25rem; }

  /* Pfeilrichtung am Button */
  .submenu-toggle {
    appearance: none; background: transparent; border: 0; cursor: pointer;
    width: 2rem; height: 2rem; vertical-align: middle;
  }
  .submenu-toggle::before {
    content: "▾"; font-size: .9rem; line-height: 2rem; display: inline-block;
    transform-origin: 50% 50%; transition: transform .15s ease;
  }
  .menu li.open > .submenu-toggle::before { transform: rotate(-180deg); }

  /* Falls Wrapper vorhanden (z.B. .hauptmenu), sichtbar halten */
  header .hauptmenu { display: block !important; }
}