/* ============================================================
   Komponente: pagination
   ------------------------------------------------------------
   Quelle: Figma „Screens: App und Web" → Entdecken Slider
   (13844:15471) und intro 1–3, ausgelesen am 04./05.09.2026.

   Die Punkte unter einer Folge von Folien. SKILL.md §9 nennt sie
   ausdrücklich als eigenständige Komponente; sie lag bis zum
   05.09.2026 in hero-slider.css mit dem Vermerk „beim Freigeben
   gehört sie in eine eigene Datei". Mit dem Intro gibt es die
   zweite Verwendung, also steht sie jetzt hier.

   DER AKTIVE PUNKT IST EINE LÄNGLICHE PILLE, die inaktiven sind
   runde Punkte (§9). Form UND Farbe, nicht Farbe allein
   (WCAG 1.4.1) — wer die Sättigung nicht sieht, sieht die Länge.

   OB DIE PUNKTE ANKLICKBAR SIND, entscheidet die Verwendung. Im
   Slider ja: dort ist jede Folie ein eigenes Ziel. Im Intro
   nein: dort führt der Weg über „Weiter", und ein zweiter Weg
   an derselben Stelle wäre eine Entscheidung ohne Gewinn. Sind
   sie nur Anzeige, gehören sie in ein <span> ohne Rolle und der
   Fortschritt wird über den Text angesagt.

   Setzt tokens.css und base.css voraus.

   VERWENDUNG — anklickbar
     <ul class="pagination" role="list">
       <li><button class="pagination__punkt touch-target" type="button"
                   aria-current="true" aria-label="Zu Folie 1"></button></li>
     </ul>

   VERWENDUNG — nur Anzeige
     <span class="pagination" aria-hidden="true">
       <span class="pagination__punkt" data-aktiv></span>
       <span class="pagination__punkt"></span>
     </span>

   ------------------------------------------------------------
   GEMESSENE MASSE OHNE TOKEN-GRUNDLAGE
     7      Punkt.
     17     Aktive Pille.
     41 x 7 Die Reihe aus Pille und zwei Punkten.
   ============================================================ */

ul.pagination,
.pagination {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);                   /* 4 */
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  list-style: none;
}

/* DAS <li> MUSS SELBST EIN FLEXKASTEN SEIN. Sonst legt der
   Browser in ihm eine Zeile an, und die ist so hoch wie die
   Zeilenhöhe der Schrift ringsum — die Reihe wurde damit 21 statt
   der gemessenen 7 hoch (gefunden am 08.09.2026 im Intro-Fuß, der
   dadurch 13 zu hoch war). Der Punkt darin ist nur 7 hoch, aber
   ein Knopf ist inline und sitzt auf dieser Zeile. */
.pagination > li {
  display: flex;
}

.pagination__punkt {
  width: 7px;                              /* gemessen, siehe Kopf */
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background-color: var(--transparent-white-60);
}

button.pagination__punkt {
  cursor: pointer;
}

/* Der aktive Punkt. Über aria-current, wo die Punkte Ziele sind,
   und über data-aktiv, wo sie nur anzeigen — beide Male dieselbe
   Form, damit es nur eine Regel für das Aussehen gibt. */
.pagination__punkt[aria-current="true"],
.pagination__punkt[data-aktiv] {
  width: 17px;                             /* gemessen, siehe Kopf */
  background-color: var(--white);
}

/* Die Pille wächst, sie erscheint nicht. §23.1 lässt Breite als
   Bewegung zu, wenn nichts anderes im Layout mitwandert — die
   Reihe ist rechtsbündig und die Punkte sind gleich groß. */
.pagination__punkt {
  transition: width calc(var(--motion-press) * var(--motion-scale)) var(--motion-ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .pagination__punkt {
    transition: none;
  }
}

/* ============================================================
   OFFEN
   ------------------------------------------------------------
   · Die 7 und die 17 stehen in keiner Skala. So gemessen.
   · Auf hellem Grund wäre transparent-white-60 unsichtbar. Die
     Komponente kommt bisher nur auf Bildern und auf dunklem
     Grund vor; eine Fassung für helle Flächen fehlt.
   ============================================================ */