/* style.css – nur Ausschnitt für das Klappmenü */
.navbar {
  background: #4f6a6a; /*  GRUEN */
  padding: 1rem 0;
  font-family: Arial, sans-serif;
}

.menu-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.logo {
  color: white;
  font-size: 1.5rem;
  text-decoration: none;
  font-weight: bold;
}

.menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 2rem;
}

.menu a {
  color: white;
  text-decoration: none;
  font-size: 1.1rem;
}

.menu a:hover { color: #00aaff; } /* Hell Blau */

/* Hamburger für Mobile */
#menu-toggle { display: none; }
.hamburger {
  display: none;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
}
.hamburger span {
  width: 30px;
  height: 3px;
  background: white;
  transition: 0.3s;
}

/* Mobile Ansicht */
@media (max-width: 1024px) {
  .hamburger { display: flex; }

  .menu {
    order: 99;
    flex-basis: 100%;
    flex-direction: column;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.6s cubic-bezier(0, 1, 0, 1);
    background: #4f6a6a;
    margin-top: 0.8rem;
    padding: 0 !important;          /* killt alles Alte */
  }

  #menu-toggle:checked ~ .menu {
    max-height: 100vh;               /* oder 1500px, reicht für 50+ Links */
    transition: max-height 0.8s cubic-bezier(0.8, 0, 1, 1);
  }

  /* === HIER passieren die wichtigen Korrekturen === */
  .menu li {
    margin: 0 !important;
    padding: 0 !important;
  }

  .menu a {
    padding: 11px 0 !important;      /* ≈ 11–12 mm Höhe pro Link */
    display: block;
    font-size: 1.15rem;
    line-height: 1.4;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }

  .menu a:hover {
    background: rgba(255,255,255,0.1);
  }
}
/* Untermenüs – funktionieren auch im Mobile-Klappmenü */
.dropdown {
  position: relative;
}

.submenu {
  list-style: none;
  padding-left: 20px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  background: #638484;                /* etwas heller als Hauptmenü */
}

.dropdown:hover > .submenu,
#menu-toggle:checked ~ .menu .dropdown .submenu {
  max-height: 300px;                /* reicht für 10+ Unterpunkte */
}

/* Kleiner Pfeil nach rechts/rechts-unten (optional) */
.dropdown > a::after {
  content: " ▸";
  font-size: 0.8em;
  margin-left: 6px;
  transition: transform 0.3s;
}
.dropdown:hover > a::after,
#menu-toggle:checked ~ .menu .dropdown > a::after {
  content: " ▾";
}

/* Mobile: Untermenü wird durch Tippen auf den Hauptpunkt aufgeklappt */
@media (max-width: 1024px) {
  .submenu {
    background: #638484;
  }
  .dropdown > a::after {
    content: " ▾";
  }
}
/* === Touch-freundliche Dropdowns auf Tablet & Handy === */
.dropdown-toggle {
  position: relative;
  z-index: 10;
}

/* Untermenü öffnet sich beim ersten Tippen und bleibt offen */
.dropdown {
  position: relative;
}

@media (hover: none), (hover: on-demand) {
  /* Nur auf Touch-Geräten (Tablets, Handys) */
  .dropdown > .dropdown-toggle:checked ~ .submenu,
  .dropdown:active > .submenu,
  .dropdown > .submenu:target,
  #menu-toggle:checked ~ .menu .dropdown .submenu {
    max-height: 400px !important;   /* bleibt offen */
    padding: 8px 0;
  }

  /* Optional: kleiner Pfeil zeigt an, dass es ein Dropdown ist */
  .dropdown-toggle::after {
    content: " ▼";
    font-size: 0.7em;
    margin-left: 6px;
  }
}

/* Desktop bleibt wie bisher (Hover) */
@media (hover: hover) {
  .dropdown:hover > .submenu {
    max-height: 400px;
  }
}