/* Insel-Menü (G01) — Pille oben in der Mitte, wächst federnd zum Menü auf.
 * Eigener Code nach Messung der GreenSock-Demo „Menu navigation pattern“ (29.09.2026).
 * Farben über die Variablen anpassen; Maße nur über die Stellschrauben im Datenblatt. */
.insel, .insel-overlay {
  --insel-bg: #1d1c1a;
  --insel-rand: rgba(255, 255, 255, .16);
  --insel-text: #e9e4d8;
  --insel-leise: #8f8a7e;
  --insel-akzent: #f2b544;
  --insel-trenner: rgba(255, 255, 255, .08);
  --insel-schleier: rgba(12, 11, 10, .82);
  --insel-oben: 1.25rem;
  --insel-z: 1000;
}

/* ── Pille ─────────────────────────────────────────────── */
.insel {
  position: fixed;
  top: var(--insel-oben);
  left: 50%;
  z-index: var(--insel-z);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .5rem;
  background: var(--insel-bg);
  border: 1.5px solid var(--insel-rand);
  border-radius: 999px;
  white-space: nowrap;
  overflow: hidden;
  width: auto;                 /* zu: so breit wie der Knopf */
}
.insel-logo {
  position: relative;
  width: 0;                    /* nimmt zu keinen Platz weg */
  height: 22px;
  display: block;
  color: var(--insel-akzent);
  pointer-events: none;        /* zu: liegt unsichtbar ÜBER dem Knopf — darf keine Klicks fangen */
}
.insel.ist-offen .insel-logo { pointer-events: auto; }
.insel-logo > * {
  position: absolute;
  left: .75rem;
  width: 22px;
  height: 22px;
  opacity: 0;                  /* erscheint beim Öffnen */
}
.insel-knopf {
  width: 100%;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: var(--insel-text);
  border-radius: 999px;
}
.insel-knopf__icon {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.insel-knopf svg { display: block; overflow: visible; }
.insel-knopf line { stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.insel-knopf:focus-visible { outline: 2px solid var(--insel-akzent); outline-offset: 3px; }

/* ── Schleier + Panel ──────────────────────────────────── */
.insel-overlay {
  position: fixed;
  inset: 0;
  z-index: calc(var(--insel-z) - 1);
  pointer-events: none;
}
.insel-schleier {
  position: absolute;
  inset: 0;
  background: var(--insel-schleier);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
}
.insel-panel {
  position: absolute;
  top: calc(var(--insel-oben) + 3.75rem);
  left: 50%;
  width: 90vw;
  max-width: 400px;
  padding: .375rem;
  background: var(--insel-bg);
  border: 1.5px solid var(--insel-rand);
  border-radius: 18px;
  visibility: hidden;          /* GSAP schaltet per autoAlpha frei */
}
.insel-panel nav { display: flex; flex-direction: column; }
.insel-link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 1rem;
  color: var(--insel-text);
  text-decoration: none;
  font-size: 1rem;
  line-height: 1.2;
  border-radius: 10px;
  transition: color .15s, background-color .15s;
}
.insel-link + .insel-link { border-top: 1px solid var(--insel-trenner); border-radius: 0; }
.insel-link:first-child { border-radius: 10px 10px 0 0; }
.insel-link:last-child { border-radius: 0 0 10px 10px; }
.insel-link:hover { color: var(--insel-akzent); }
.insel-link:focus-visible { outline: 2px solid var(--insel-akzent); outline-offset: -2px; border-radius: 10px; }
.insel-link__zusatz { font-size: .75rem; color: var(--insel-leise); transition: color .15s; }
.insel-link:hover .insel-link__zusatz { color: var(--insel-text); }

/* Ohne JavaScript: Menü bleibt erreichbar (Knopf ist dann nutzlos, Links stehen als Liste) */
.no-js .insel-overlay { position: static; pointer-events: auto; }
.no-js .insel-panel { position: static; visibility: visible; transform: none; }