/* ============================================================
   Bausteinlager „Deine neue Webseite" — glasmenue.css (31.10.2026)
   Copyright ONLINE NETWORK VISION S.L. · Kennung dnw-baustein-glasmenue-20261031 · eigene Umsetzung, kein fremder Code
   Gläsernes Menü (Kapsel) mit einem weichen Lichtfleck hinter dem Punkt, auf den man zeigt bzw. dessen Abschnitt gerade
   im Bild ist. Der Fleck dehnt sich beim Wandern und zieht sich am Ziel zusammen.
   EINBAU:  <nav class="glasmenue" data-glasmenue aria-label="Seite"><a href="#leistungen">Leistungen</a><a href="#ablauf">Ablauf</a>…</nav>
   Farben: --gm-glas (Fläche), --gm-licht (Fleck), --gm-glanz (farbiger Schein, Standard --signal), --gm-text, --gm-text-hier.
   REGELN: backdrop-filter nur auf ::before (Text bleibt scharf), Punkte ≥ 44 px hoch, reduzierte Bewegung = springt.
   ============================================================ */
.glasmenue{--gm-glas:rgba(255,255,255,.62);--gm-licht:rgba(255,255,255,.95);--gm-glanz:var(--signal,#306CC0);--gm-text:var(--tinte,#14213A);--gm-text-hier:var(--tinte,#14213A);
  position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:2px;padding:4px;border-radius:999px;font:inherit}
.glasmenue::before{content:"";position:absolute;inset:0;z-index:-2;border-radius:inherit;background:var(--gm-glas);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid rgba(255,255,255,.7);box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 -1px 0 rgba(0,0,0,.05) inset,0 14px 34px -18px rgba(10,20,30,.45)}
.glasmenue .gm-licht{position:absolute;top:4px;bottom:4px;left:0;width:0;z-index:-1;border-radius:999px;pointer-events:none;opacity:0;transition:opacity .25s;
  background:radial-gradient(90% 120% at 50% 0%,rgba(255,255,255,1),var(--gm-licht) 60%);
  box-shadow:0 0 0 1px rgba(255,255,255,.9) inset,0 6px 16px -6px var(--gm-glanz),0 0 22px -4px var(--gm-glanz)}
.glasmenue.-licht .gm-licht{opacity:1}
.glasmenue a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;color:var(--gm-text);text-decoration:none;font-weight:600;white-space:nowrap;transition:color .25s}
.glasmenue a.-hier{color:var(--gm-text-hier)}
.glasmenue a:focus-visible{outline:3px solid var(--gm-glanz);outline-offset:-2px}
@media (prefers-reduced-motion:reduce){.glasmenue .gm-licht,.glasmenue a{transition:none}}