/* ============================================================
   WOMBACH-NAVIGATION – moderner Ersatz für ddsmoothmenu
   Reines CSS + minimales JS nur für das Untermenü auf dem Handy
   ============================================================ */

/* --- Grundgerüst der Navigationsleiste --- */
.wb-nav {
  background: #4a6b2f;            /* Grünton – bei Bedarf an wombach.css anpassen */
  font-family: Arial, Helvetica, sans-serif;
}

.wb-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* oberste Ebene als waagerechte Leiste (Desktop) */
.wb-nav > ul {
  display: flex;
  flex-wrap: wrap;
}

.wb-nav li {
  position: relative;
}

.wb-nav a {
  display: block;
  padding: 12px 16px;
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  white-space: nowrap;
}

.wb-nav a:hover,
.wb-nav a:focus {
  background: #3a541f;
}

/* --- Untermenü (Dropdown) --- */
.wb-nav .wb-submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 160px;
  background: #4a6b2f;
  box-shadow: 0 4px 8px rgba(0,0,0,0.25);
  z-index: 100;
}

/* Desktop: bei Hover über den Elternpunkt aufklappen */
@media (min-width: 769px) {
  .wb-nav .wb-has-sub:hover .wb-submenu {
    display: block;
  }
}

/* kleines Pfeil-Zeichen am Elternpunkt */
.wb-nav .wb-has-sub > a::after {
  content: " \25BE";   /* ▾ */
  font-size: 12px;
}

/* ============================================================
   MOBIL  (Bildschirm bis 768px Breite)
   Hauptpunkte untereinander, Untermenü per Antippen
   ============================================================ */
@media (max-width: 768px) {
  .wb-nav > ul {
    flex-direction: column;     /* alles untereinander */
  }

  .wb-nav a {
    border-bottom: 1px solid rgba(255,255,255,0.15);
  }

  /* Untermenü auf dem Handy: normal versteckt … */
  .wb-nav .wb-submenu {
    position: static;
    box-shadow: none;
    min-width: 0;
    background: #3a541f;        /* etwas dunkler zum Abheben */
  }

  /* … und nur sichtbar, wenn der Elternpunkt "offen" ist */
  .wb-nav .wb-has-sub.wb-open .wb-submenu {
    display: block;
  }

  /* eingerückte Unterpunkte */
  .wb-nav .wb-submenu a {
    padding-left: 32px;
  }
}