/*
  Flexibles Multi-Level Menü CSS
  --------------------------------
  Dieses Stylesheet steuert das Aussehen und Verhalten des flexiblen Navigationsmenüs mit mehreren Ebenen.
*/

/*
  .flex-menu
  Der äußere Container des Menüs. Setzt Schriftart, Hintergrundfarbe und horizontalen Innenabstand.
  - font-family: Sorgt für eine moderne, klare Schrift.
  - background: Weißer Hintergrund für das Menü.
  - padding: Abstand links und rechts, damit das Menü nicht am Rand klebt.
*/
.flex-menu {
  font-family: 'Poppins', Arial, sans-serif;
  background: #fff;
  padding: 0 24px;
}

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

.menu>li {
  position: relative;
}

.menu>li>a {
  font-size: 1.2em;
  display: block;
  padding: 16px 0;
  color: #222;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
}

/* Nur Menü-Links, nicht Buttons oder andere a-Tags */
.flex-menu .menu>li>a {
  display: block;
  padding: 16px 0;
  color: #222;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
}

.flex-menu .menu>li>a:hover {
  color: #007bff;
}

.flex-menu .submenu li>a {
  display: flex;
  align-items: center;
  padding: 10px 24px;
  color: #222;
  text-decoration: none;
  font-size: 1.2em;
  transition: background 0.2s, color 0.2s;
}

.flex-menu .submenu li>a:hover {
  background: #f5f5f5;
  color: #007bff;
}

.menu>li>a:hover {
  color: #007bff;
}

.submenu {
  list-style: none;
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  min-width: 180px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  border-radius: 6px;
  z-index: 10;
  padding: 8px 0;
}

.submenu li {
  list-style: none;
}

.menu li:hover>.submenu,
.menu li:focus-within>.submenu {
  display: block;
}

.submenu li {
  position: relative;
}

.submenu li>a {
  display: flex;
  align-items: center;
  padding: 10px 24px;
  color: #222;
  text-decoration: none;
  font-size: 1.2em;
  transition: background 0.2s, color 0.2s;
}

.submenu li>a:hover {
  background: #f5f5f5;
  color: #007bff;
}

.submenu .submenu {
  left: 100%;
  top: 0;
  margin-left: 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

@media (max-width: 900px) {
  .flex-menu {
    padding: 0 8px;
  }

  .menu {
    flex-direction: column;
    gap: 0;
    width: 100%;
    align-items: stretch;
  }

  .menu>li {
    width: 100%;
  }

  .menu>li>a {
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
    width: 100%;
  }

  .submenu {
    position: static;
    min-width: 100%;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    background: #f9f9f9;
    margin: 0;
  }

  .submenu li>a {
    padding: 10px 24px;
    border-bottom: 1px solid #eee;
  }

  .submenu .submenu {
    left: 0;
    top: 0;
    margin-left: 0;
  }

  .menu li:hover>.submenu,
  .menu li:focus-within>.submenu {
    display: block;
  }
}