/* ============================================================================
   teil-zb-leiste.css — die Sprungleiste der Leistungsseiten schrumpft auf
   ihren Inhalt und steht mittig.

   Christopher, 04.10.2026: „Die Filterleiste, die erscheint, wenn man auf
   Augenoptik oder Hörakustik ist. Kannst du die zentrieren und auf die Größe
   der vorhandenen Buttons reduzieren? Die ist nämlich gerade größer als die
   Headerleiste. Ist nicht so schön."

   GEMESSEN am selben Tag auf /augenoptik/ bei 1850 px Fenster:
       .kopf-innen       1516 px breit, links 159, radius 999px
       .leistung-sprung  1560 px breit, links 138, radius 30px
   Die Leiste war also 44 px BREITER als die Kopfleiste und begann 21 px weiter
   links — zwei Kanten, die fast, aber eben nicht übereinanderliegen. Das ist
   genau das, was unruhig aussieht.

   Und sie brauchte die Breite gar nicht: die vier Chips messen
       108 + 120 + 174 + 232 = 634 px,  dazu 3 × 7,2 px Abstand und 2 × 16 px
       Polster  →  688 px wirklich nötig  gegen  1558 px vorhanden.
   Mehr als das Doppelte war Luft.

   Diese Datei lädt als letzte der teil-*.css (functions.php bindet
   assets/css/teil-*.css alphabetisch ein; „zb" sortiert hinter z9 und za).
   Sie kommt deshalb ohne !important aus.
   ========================================================================= */

/* ── Die Leiste selbst ────────────────────────────────────────────────────
   Sie bleibt sticky — das ist ihr Zweck, sie soll beim Lesen mitwandern.
   Neu ist nur, dass sie so breit wird wie ihr Inhalt und sich dann in die
   Mitte stellt. max-content statt fit-content, weil fit-content die Chips
   umbrechen ließe, sobald der Platz knapp wird; umgebrochen soll hier nichts
   werden, dafür gibt es weiter unten das waagerechte Scrollen.
   -------------------------------------------------------------------- */
.leistung .leistung-sprung{
  width:max-content;
  max-width:min(100%, var(--breite));
  margin-inline:auto;

  /* Rund wie die Kopfleiste (.kopf-innen trägt 999px). Zwei Leisten
     übereinander, die beide schweben, sollen auch dieselbe Form haben. */
  border-radius:var(--r-rund);

  /* Die Haarlinie unten war für eine Leiste über die volle Breite gedacht —
     an einer frei schwebenden Pille endet sie im Nichts. Stattdessen derselbe
     weiche Schatten, den das Haus für schwebende Flächen benutzt. */
  border-bottom:0;
  border:1px solid var(--glas-rand);
  box-shadow:var(--glas-schatten);

  padding-block:6px;
  padding-inline:6px;
}

/* ── Die Chipreihe darin ──────────────────────────────────────────────────
   Sie trägt die Klasse .bahn und hatte damit max-width 1560 px und 56 px
   Polster — genau daher kam die Breite. Innerhalb der Pille braucht sie
   beides nicht mehr.
   -------------------------------------------------------------------- */
.leistung .leistung-sprung .sammel-wege{
  max-width:none;
  width:auto;
  margin-inline:0;
  padding-inline:10px;
  padding-block:0;
  justify-content:center;
  flex-wrap:nowrap;
}

/* ── Schmale Geräte ───────────────────────────────────────────────────────
   Ab hier passt die Reihe irgendwann nicht mehr. Dann darf die Pille die
   volle Bahnbreite nehmen und ihre Chips waagerecht scrollen lassen — so
   macht es teil-leistung.css Zeile 259 schon heute, das bleibt.
   Gemessen auf /hoerakustik/: dort stehen fünf Chips statt vier, die Reihe
   ist entsprechend breiter und erreicht diesen Fall früher.
   -------------------------------------------------------------------- */
@media (max-width:940px){
  .leistung .leistung-sprung{
    width:auto;
    max-width:100%;
    padding-inline:0;
  }
  .leistung .leistung-sprung .sammel-wege{
    justify-content:flex-start;
    padding-inline:14px;
  }
}

/* Auf dem Telefon soll die Pille nicht an den Fensterrand stoßen. */
@media (max-width:430px){
  .leistung .leistung-sprung{
    margin-inline:8px;
  }
}