/* ═══════════════════════════════════════════════════════════════════════════
   teil-zs — Der Zweig „Gesundheit" im Kopfmenü
   ───────────────────────────────────────────────────────────────────────────
   Christopher, 04.10.2026 (Auftrag 12): ein weiterer Tab „Gesundheit", darunter
   der Augen-Gesundheitscheck und das Myopie-Management für Kinder.

   Bedienbar mit Maus, Tastatur und Finger: Überfahren öffnet, Klick öffnet und
   schließt, Tab hinein öffnet (`:focus-within`), Esc schließt — das macht das
   Skript in wirkung.js. Die Liste liegt über allem im Kopf, darum z-index über
   der Kopfleiste.
   ═══════════════════════════════════════════════════════════════════════════ */

.menue-zweig{ position:relative; display:inline-flex }

.menue-knopf{
  appearance:none; border:0; background:transparent; cursor:pointer;
  font:inherit; color:inherit;
  display:inline-flex; align-items:center; gap:.4em;
  padding:0;                                   /* .menue a bringt den Abstand mit */
}
/* Die Nachbarn im Menü sind <a>; damit der Knopf exakt gleich sitzt, erbt er
   deren Polsterung und Größe aus der Nachbarregel — hier nur, was fehlt. */
.menue .menue-knopf{ font-size:inherit; font-weight:inherit; line-height:inherit }
.menue-keil{
  width:0; height:0; flex:none;
  border-left:4px solid transparent; border-right:4px solid transparent;
  border-top:5px solid currentColor; opacity:.55;
  transition:transform .25s var(--weich), opacity .25s var(--weich);
}
.menue-zweig:hover .menue-keil,
.menue-zweig:focus-within .menue-keil,
.menue-knopf[aria-expanded="true"] .menue-keil{ transform:rotate(180deg); opacity:1 }

.menue-liste{
  position:absolute; z-index:60; top:calc(100% + .55rem); left:50%;
  translate:-50% 0;
  min-width:max(240px, 100%);
  display:grid; gap:.1rem;
  padding:.45rem;
  border-radius:var(--r-m);
  background:rgba(255,255,255,.92);
  border:1px solid var(--glas-rand);
  -webkit-backdrop-filter:blur(20px) saturate(1.6); backdrop-filter:blur(20px) saturate(1.6);
  box-shadow:0 18px 44px rgba(19,55,109,.16);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .25s var(--weich), transform .25s var(--weich), visibility .25s;
}
.menue-zweig:hover .menue-liste,
.menue-zweig:focus-within .menue-liste,
.menue-knopf[aria-expanded="true"] + .menue-liste{
  opacity:1; visibility:visible; transform:none;
}
.menue-liste a{
  display:block; padding:.55em .8em; border-radius:calc(var(--r-m) - .35rem);
  white-space:nowrap; font-size:.92rem; font-weight:700;
  color:var(--text-leise); text-decoration:none;
  transition:background .2s var(--weich), color .2s var(--weich);
}
.menue-liste a:hover,
.menue-liste a:focus-visible{ background:var(--gold-zart); color:var(--blau) }
.menue-liste a[aria-current="page"]{ color:var(--blau); background:var(--blau-zart) }

/* Eine kleine Brücke, damit der Zeiger auf dem Weg nach unten nicht ins Leere
   fällt und die Liste wieder zuklappt. */
.menue-zweig::after{
  content:""; position:absolute; top:100%; left:0; right:0; height:.6rem;
}

@media (prefers-reduced-motion: reduce){
  .menue-liste{ transition:none }
  .menue-keil{ transition:none }
}