/* Grundlayout */
.main-nav {
  background: transparent; /* Schwarz, nicht grau */
  font-family: 'Orbitron', sans-serif;
  border-bottom: 1px solid #107c10;
  /* Dünne grüne Linie behalten */
  position: relative;
  z-index: 100;
}

.main-nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  /* flex-wrap: wrap; */
  margin: 0;
  padding: 0;
}
/* Das UL, das nur so breit wie Inhalt ist */
.main-nav > ul.main-menu {
  display: inline-flex;          /* passt sich der Inhaltbreite an */
  gap: 36px;
  list-style: none;
  margin: 0 auto;
  padding: 8px 0 10px 0;         /* Puffer für Border/Slider */
  box-sizing: border-box;
}

/* TOP-LEVEL ITEMS (nur diese sollen full-block sein) */
.main-nav > ul.main-menu > li {
  position: relative;
}

.main-nav > ul.main-menu > li > a {
  display: block;                /* ganze Fläche klickbar */
  padding: 12px 18px;
  color: #107c10;
  font-family: 'Orbitron', sans-serif;
  font-size: 18px;
  text-decoration: none;
  transition: color .2s ease, background .2s ease;
}

.main-nav > ul.main-menu > li > a:hover,
.main-nav > ul.main-menu > li > a:focus {
  background: rgba(255,255,255,0.02);
  color: #00ff00;
}

/* active am Top-Level (wird durch PHP/JS gesetzt) */
.main-nav > ul.main-menu > li.active > a {
  background: transparent;
  color: #00ff00;
  font-weight: 700;
}


.main-nav li {
  position: relative;
  display: inline-block;
}

.main-nav a {
  display: block;
  padding: 12px 20px;
  font-family: 'Orbitron', sans-serif;
  font-size: 18px;
  color: #107c10; /* Kräftiges Grün */
  text-decoration: none;
  transition: color 0.3s ease;
}

.main-nav a:hover {
  color: #00ff00; /* Helleres Grün beim Hover */
  background: transparent;
}

/* Hauptmenü: aktive Seite markieren */
.main-nav a.active {
  background: transparent;
  color: #00ff00;
  font-weight: bold;
}

.main-nav .submenu a {
  display: inline-block;
  padding: 8px 12px;
  color: #107c10;
  font-family: 'Orbitron', sans-serif;
  font-size: 14px;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: color 0.3s ease;
}

.main-nav .submenu a::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -4px;
  width: 0;
  height: 2px;
  background: #00ff00;
  transition: width 0.22s ease;
}

.main-nav .submenu a:hover::after,
.main-nav .submenu a.active::after {
  width: 100%;
}

.main-nav ul.submenu li a {
  display: inline-block;
}

.main-nav ul.main-menu {
  display: flex;
  justify-content: center; /* Menü zentrieren */
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

/* ---------------------------
   Submenu (zentriert unter Parent)
   --------------------------- */
.main-nav .submenu {
  display: block;
  position: absolute;
  top: calc(100% + 6px);    /* etwas Abstand zur Hauptzeile */
  left: 50%;
  transform: translateX(-50%); /* genau unter dem Parent zentriert */
  background: transparent;
  padding: 6px 8px;
  min-width: auto;          /* keine erzwungene Breite */
  white-space: nowrap;      /* verhindert Zeilenumbruch im Text */
  box-shadow: 0 6px 14px rgba(0,0,0,0.45);
  visibility: hidden;
  opacity: 0;
  transition: opacity .12s ease, visibility .12s;
  z-index: 100;
}

/* Beim Hover / open anzeigen */
.main-nav li:hover > .submenu,
.main-nav li.open > .submenu {
  visibility: visible;
  opacity: 1;
}
/* Submenu-Listenelemente (stapeln untereinander) */
.main-nav .submenu li {
  display: block;
  width: auto;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}

/* Submenu-Links: nur so breit wie Text */
.main-nav .submenu li a {
  display: block;  /* WICHTIG: nur so breit wie Inhalt */
  width: auto;
  padding: 8px 12px;
  color: #107c10;
  font-family: 'Orbitron', sans-serif;
  font-size: 14px;
  text-decoration: none;
  position: relative;
  text-align: center;
}

/* kleine Unterstreichung (zentr. Animation) */
.main-nav .submenu li a::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 0;
  height: 2px;
  background: #00ff00;
  transition: width .22s ease;
}

/* bei Hover oder active wächst Linie auf Textbreite */
.main-nav .submenu li a:hover::after,
.main-nav .submenu li a.active::after {
  width: 100%;
}

/* Hover-Effekt Text-Glow */
.main-nav .submenu li a:hover {
  color: #00ff00;
  text-shadow: 0 0 8px rgba(0,255,0,0.6);
}

/* ================================
   Menü-Slider
================================ */
.menu-slider {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  opacity: 1;
  height: 3px;
  background: #2ecc40; /* Helleres Grün für Slider */
  transition: left .25s ease, width .25s ease, opacity .2s ease; /* alternativ: all 0.25 ease */
  z-index: 20;
  pointer-events: none;
}

/* ================================
   Submenu
================================ */

/* Container für Hauptmenü-Punkte mit Submenü */
.has-submenu {
  position: relative; /* wichtig für absolutes Positionieren des Submenüs */
}

.has-submenu > a {
  padding-bottom: 12px; /* nur Text selbst, ohne extra Lücke */
}

/* Anzeige beim Hover auf den Hauptpunkt */
.has-submenu:hover .submenu {
/*  display: block; */
  opacity: 1;
  visibility: visible;
}

.has-submenu .submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #111;
  border: none;
  min-width: 180px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
  padding: 6px 0;
  z-index: 100;
  /* Animation */
  opacity: 0;
  visibility: hidden;
  display: block;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.submenu {
  display: block; /* explizit als Blockelement */
}

.submenu li {
  display: block;  /* Jeder Menüpunkt nur so breit wie sein Inhalt */
  width: auto;            /* Automatische Breite am Text orientiert */
  text-align: center;     /* optional: zentriert den Text */
}

/* Submenü-Links */
.submenu a {
  position: relative;
  display: inline-block; /* ✅ sorgt dafür, dass jeder Punkt in einer neuen Zeile steht, inline-block = nebeneinander */
  padding: 8px 12px;
  color: #107c10;
  text-align: center;
  font-family: 'Orbitron', sans-serif;
  font-size: 14px;
  transition: color 0.3s ease;
}

/* Linie Effekt */
/* .submenu a::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%); /* Zentriert an der Mitte 
  bottom: 0;
  width: 0;
  height: 2px;
  background: #00ff00;
  transition: width 0.3s ease, left 0.3s ease; /* war width 0.3s ease, left 0.3s ease; 
} */

/* .submenu a:hover::after {
  width: 100%;
} */

/* Hover: Text-Glow */
.submenu a:hover {
  color: #00ff00;
  text-shadow: 0 0 8px rgba(0, 255, 0, 0.7);
}

/* Aktive Unterseite markieren */
.submenu a.active {
  background: transparent;         /* Dunkler Hintergrund */
  color: #00ff00;           /* Neon-Grün für Text */
  font-weight: bold;
  position: relative;
}

/* .submenu a.active::after {
  width: 100%;
} */

/* Submenü: Jedes Element nur so breit wie der Text */
.main-nav .submenu {
  display: block;
  text-align: center;
  white-space: nowrap; /* verhindert Zeilenumbrüche */
  padding: 6px 0;
}

.main-nav .submenu li {
  display: block;
  text-align: center;
}

.main-nav .submenu li a {
  display: inline-block !important; /* <-- GANZ WICHTIG */
  width: auto !important;
  padding: 8px 12px;
  position: relative;
  background: none;
  text-decoration: none;
}