/* ---------- Schwebende Leiste: Darstellung · Kapitel · Suche ----------
   Vorbild ist die Leiste auf discord.com: alles Seitenwerkzeug an EINEM Ort
   statt verstreut in der Kopfzeile. Das Kapitel-Menü klappt nach OBEN auf,
   weil die Leiste unten klebt. */
.dx-leiste { position: fixed; z-index: 50; left: 50%; translate: -50% 0; bottom: 16px;
  display: flex; align-items: center; gap: 6px; padding: 6px;
  width: max-content; max-width: min(620px, calc(100vw - 24px)); min-width: 0;
  background: color-mix(in srgb, var(--flaeche) 92%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--linie); border-radius: 14px; box-shadow: var(--schatten); }
.dx-trenn { width: 1px; align-self: stretch; margin: 2px 2px; background: var(--linie);
  flex-shrink: 0; }

.dx-schalter { display: flex; gap: 2px; padding: 2px; border-radius: 10px;
  background: var(--flaeche-2); flex-shrink: 0; }
.dx-schalter button { width: 30px; height: 28px; display: grid; place-items: center;
  border: 0; border-radius: 8px; background: none; color: var(--tinte-blass); cursor: pointer; }
.dx-schalter button svg { width: 15px; height: 15px; }
.dx-schalter button[aria-pressed="true"] { background: var(--bg); color: var(--tinte);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }

.dx-menue { position: relative; min-width: 0; flex: 1 1 auto; }
#dx-menue-knopf { width: 100%; min-width: 0; display: flex; align-items: center; gap: 6px;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--tinte);
  background: none; border: 0; border-radius: 9px; padding: 6px 8px; cursor: pointer; }
#dx-menue-knopf:hover { background: var(--flaeche-2); }
#dx-menue-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#dx-menue-knopf svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--tinte-blass);
  transition: rotate .15s ease; }
#dx-menue-knopf[aria-expanded="true"] svg { rotate: 180deg; }

.dx-menue-pop { position: absolute; left: 0; bottom: calc(100% + 8px);
  width: max-content; min-width: 100%; max-width: min(340px, calc(100vw - 32px));
  display: grid; gap: 1px; padding: 6px; border-radius: 12px;
  background: var(--flaeche); border: 1px solid var(--linie); box-shadow: var(--schatten);
  max-height: min(60dvh, 380px); overflow-y: auto; }
.dx-menue-pop button { text-align: left; font: inherit; font-size: 13.5px;
  color: var(--tinte-matt); background: none; border: 0; border-radius: 8px;
  padding: 7px 10px; cursor: pointer; min-width: 0; }
.dx-menue-pop button:first-child { color: var(--tinte); font-weight: 650; }
.dx-menue-pop button:hover { background: var(--flaeche-2); color: var(--tinte); }

.dx-leiste-such { display: flex; align-items: center; gap: 6px; min-width: 0;
  flex: 0 1 190px; padding: 0 8px 0 9px; border-radius: 9px; background: var(--flaeche-2); }
.dx-leiste-such svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--tinte-blass); }
#dx-suche { width: 100%; min-width: 0; font: inherit; font-size: 13.5px; color: var(--tinte);
  background: none; border: 0; padding: 7px 0; }
#dx-suche:focus { outline: none; }
#dx-suche::-webkit-search-cancel-button { -webkit-appearance: none; }

/* Die Leiste schwebt über dem Text — unten Luft lassen, sonst verdeckt sie
   die letzte Zeile und die Vor/Zurück-Knöpfe. */
.dx-inhalt { padding-bottom: 110px; }
/* Sprungziele nicht unter die klebende Kopfzeile schieben. */
.dx-inhalt h2 { scroll-margin-top: 74px; }

@media (max-width: 600px) {
  .dx-leiste { bottom: 10px; gap: 4px; padding: 5px; max-width: calc(100vw - 16px); }
  .dx-leiste-such { flex-basis: 108px; }
  .dx-menue { flex-basis: 84px; }
}

/* Seiten ohne Abschnitte zeigen kein Kapitel-Menü — dann stünden zwei
   Trennstriche direkt nebeneinander. */
.dx-leiste:has(#dx-menue[hidden]) .dx-trenn { display: none; }

/* FALLE: `display: grid` auf .dx-menue-pop schlägt das eingebaute
   `[hidden] { display: none }` des Browsers — das Menü liess sich dadurch
   aufklappen, aber nie wieder zuklappen. Wer hier ein display setzt, MUSS
   den hidden-Fall mitschreiben. */
.dx-menue-pop[hidden] { display: none; }
.dx-menue[hidden] { display: none; }