/* Make a Frame – einheitliche Hauptnavigation auf allen Seiten.
   Basis-Styles (#nav, .nav-links, .burger) liegen inline in jeder Seite; hier nur das Untermenü. */

.nav-links > li { position: relative; }

/* aktive Seite: Unterstrich bleibt stehen */
.nav-links > li > a.active { color: var(--white); }
.nav-links > li > a.active::after { transform: scaleX(1); }

/* Eltern-Link mit Untermenü: kleiner Pfeil */
.nav-links .has-sub > a::before {
  content: ''; position: absolute; right: -14px; top: 50%;
  width: 5px; height: 5px; margin-top: -4px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg); opacity: 0.6;
}

/* Untermenü (Desktop): erscheint bei Hover / Tastaturfokus */
.nav-sub {
  list-style: none; margin: 0; padding: 10px 0;
  position: absolute; top: calc(100% + 14px); left: -18px; min-width: 220px;
  background: rgba(10,10,10,0.96);
  -webkit-backdrop-filter: blur(28px) saturate(1.5); backdrop-filter: blur(28px) saturate(1.5);
  border: 1px solid rgba(248,248,248,0.08); border-radius: 10px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.45);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0s linear 0.25s;
}
/* unsichtbare Brücke, damit der Mauszeiger den Abstand überqueren kann */
.nav-sub::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.has-sub:hover > .nav-sub,
.has-sub:focus-within > .nav-sub {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0s;
}
.nav-sub li a {
  display: block; padding: 9px 18px;
  font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(248,248,248,0.72); white-space: nowrap;
}
.nav-sub li a::after { display: none; }
.nav-sub li a:hover, .nav-sub li a.active { color: var(--white); background: rgba(248,248,248,0.05); }

/* Mobil (Vollbild-Menü): Untermenü immer sichtbar, eingerückt unter dem Eltern-Link */
@media (max-width: 720px) {
  .nav-links > li { text-align: center; }
  .nav-links .has-sub > a::before { display: none; }
  .nav-sub {
    position: static; opacity: 1; visibility: visible; transform: none;
    background: none; border: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
    min-width: 0; padding: 14px 0 0; display: flex; flex-direction: column; gap: 14px;
  }
  .nav-sub::before { display: none; }
  .nav-sub li a { padding: 0; font-size: 0.7rem; letter-spacing: 0.14em; color: rgba(248,248,248,0.6); }
  .nav-sub li a:hover, .nav-sub li a.active { background: none; }
}