/* NAV */
nav {
  height: 14vh;
  background: #fff;
  font-family: Arial, sans-serif;
  position: relative;
  top: 0;
}

nav .logo {
  position: absolute;
  max-width: 14vh;
}

/* Hauptmenü */
nav ul {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  height: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
}

nav ul li {
  position: relative;
  cursor: pointer;
}

/* Hauptmenü*/
nav ul li > a,
nav ul li > span.active,
nav ul li.not-a-link {
    display: block;
    padding: 15px 20px;
    color: black;
    text-decoration: none;
    background: rgba(255,255,255,0);
    transition: 0.1s;
}

/* ausgewählter Menüpunkt erscheint fett */
span.active {
  font-weight: bold;
}
span.active:hover {
  cursor: default;
}

nav ul li > a:hover,
nav ul li > span.active {
  background: rgba(var(--color-main-2-rgb), 1.0);
}

/* Erste Dropdown-Ebene (nach unten) */
nav ul ul {
    position: absolute;
    top: 100%;
    left: 0;
    height: auto;
    background: rgba(255,255,255,0.8);
    display: none;
    min-width: 12em;
    padding: 0;
    font-size: 10pt;
    border: .1em solid var(--color-main-1);
}

nav ul ul li {
    position: relative;
}

/* Zweite Dropdown-Ebene (nach rechts) */
nav ul ul ul {
    position: absolute;
    top: 0;
    left: 100%;
    background: #555;
    display: none;
    min-width: 180px;
}

/* Dropdowns sichtbar machen */
nav ul li:hover > ul {
    display: block;
}
nav ul li.not-a-link:hover {
  cursor: default;
}

nav ul ul li:hover > ul {
    display: block;
}

nav ul li .parent-item:hover {
  background-color: yellow !important;
  cursor: default !important;
}

/* BURGER-MENÜ STYLING */
/* Burger-Button */
.menu-icon {
  display: none;
  font-size: 2rem;
  padding: 10px 15px;
  cursor: pointer;
  user-select: none;
}

#menu-toggle {
  display: none;
}

/* Responsive Design */
/* Mobile-Ansicht */
@media (max-width: 768px) {
  /* Burger sichtbar machen */
  .menu-icon {
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;
    right: 0;
    height: 10vh;
    padding: 0 15px;
    background: #fff;
    color: black;
    z-index: 10;
  }

  nav {
    margin-right: 0em;
  }

  /* Hauptmenü verstecken */
  nav ul {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    height: auto;
    background: #fff;
    position: absolute;
    top: 14vh; /* unterhalb der Navbar-Höhe */
    left: 0;
    border-top: .1em solid var(--color-main-1);
    /* Animation vorbereiten */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
  }

  /* Dropdown-Ebene im Mobile */
  nav ul ul {
    position: static;     /* absolute entfernen */
    background: #fff;  /* hellgrau für visuelle Abgrenzung */
    display: block !important; /* überschreibt Desktop "display: none" */
    min-width: auto;
    border: none;
    margin-top: 0em;
  }

  nav ul ul li a {
    padding-left: 0em;
  }

  /* Hover/Fokus-Regeln für Mobile deaktivieren */
 nav ul li:focus-within > ul,
 nav ul li:hover > ul {
   display: block;
 }

  /* Menüeinträge im Mobile */
  nav ul li {
    width: 100%;
    border-bottom: .1em solid #ddd;
    position: static; /* verhindert Dropdown-Overlay im Mobile */
  }

  nav ul li > a,
  nav ul li > span.active {
    padding: 1.2em 2em !important;
    /*border-bottom: 2px solid #fff;*/
    color: black;
  }

  /* Menü anzeigen, wenn Checkbox aktiv */
  #menu-toggle:checked ~ ul {
    max-height: 1000px; /* groß genug für alle Menüpunkte */
    transition: max-height 0.4s ease-in;
  }
  #menu-toggle:checked ~ ul ul {
    max-height: 1000px; /* groß genug für alle Menüpunkte */
  }

  /* Wenn angehakt → anderes Symbol anzeigen */
#menu-toggle:checked + .menu-icon::before {
  content: "✖"; /* X-Symbol */
}

/* Standard-Inhalt */
.menu-icon::before {
  content: "☰"; /* Burger-Menü (Unicode U+2630) */
}

}