/* ==============================
   NAVIGATION – 202607
   ============================== */
:root {
  /* Farben */
  --nav-bg: #3d3d3d;
  --nav-text: #bdbdbd;
  --nav-hover-bg: #2b2b5a;
  --nav-hover-text: #ffffff;
  --submenu-bg: #26264d;
  --submenu-text: #b0b0b0;
  --submenu-hover-bg: #303070;
  --border-color: #1c1c1c;

  /* Abmessungen */
  --nav-width: 215px;
  --nav-item-height: 40px; /* Feste Höhe für alle Menüpunkte */
}

/* Basis-Navigation */
nav#navigation {
  width: var(--nav-width);
  background: var(--nav-bg);
  padding: 0;
  margin: 0;
  /* Float durch Flexbox ersetzen */
  display: flex;
  flex-direction: column;
  align-self: flex-start; 
}

/* Listen zurücksetzen */
#navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

/* Hauptmenüpunkte */
#navigation > ul > li {
  position: relative;
}

/* Erste Border oben für das erste Element */
#navigation > ul > li:first-child a {
  border-top: 2px solid var(--border-color);
}

/* Links im Hauptmenü */
#navigation > ul > li a {
  display: block;
  width: 100%;
  padding: 1em 10px;
  line-height: 1.0;
  background: var(--nav-bg);
  color: var(--nav-text);
  font-size: 1em;
  font-weight: bold;
  border-bottom: 2px solid var(--border-color);
  text-decoration: none;
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    padding-left 0.25s ease;
}

/* Hover/Fokus-Effekte */
#navigation > ul > li:hover > a,
#navigation > ul > li:focus-within > a {
  background: var(--nav-hover-bg);
  color: var(--nav-hover-text);
  padding-left: 14px;
}

/* Submenüs */
#navigation ul li ul.submenu {
  display: none;
  list-style: none;
  padding: 0;
  margin: 0;
  position: absolute;
  left: 100%; /* Beginnt am rechten Rand des Eltern-Elements */
  top: 0;     /* Ausrichtung am oberen Rand */
  z-index: 100;
  background: var(--submenu-bg);
  min-width: var(--nav-width); /* Mindestbreite, aber flexibel */
}

/* Submenü-Links */
#navigation ul ul.submenu li a {
  height: var(--nav-item-height);
  line-height: var(--nav-item-height);
  padding: 0 10px;
  background: var(--submenu-bg);
  color: var(--submenu-text);
  border-bottom: 2px solid var(--border-color);
  text-decoration: none;
}

#navigation ul ul.submenu li a:hover {
  background: var(--submenu-hover-bg);
  color: var(--nav-hover-text);
}

/* Submenü anzeigen bei Hover/Fokus (für Touch-Geräte) */
#navigation ul li:hover > ul.submenu,
#navigation ul li:focus-within > ul.submenu {
  display: block;
}

/* ==============================
   HACKS FÜR SUBMENÜ-POSITION (FALLS NOTWENDIG)
   ============================== */
/*
  Falls die negativen top-Werte unbedingt nötig sind, um das Design
  beizubehalten, können sie hier ergänzt werden.
  EMPFEHLUNG: Versuche stattdessen, die Höhe der Hauptmenüpunkte zu
  standardisieren (z. B. mit --nav-item-height: 40px).
*/
#navigation ul li ul.submenu.Z1 { top: -23px; }
#navigation ul li ul.submenu.Z2 { top: -63px; }
#navigation ul li ul.submenu.Z4 { top: -145px; }

/* ==============================
   RESPONSIVE DESIGN
   ============================== */
@media only screen and (max-width: 768px) {
  nav#navigation {
    width: 100%;
  }

  /* Submenüs unter dem Hauptmenü anzeigen */
  #navigation ul li ul.submenu {
    left: 0;
    position: static;
    display: none;
  }

  #navigation ul li:hover > ul.submenu {
    display: block;
  }
}