/* ==========================================================================
   Block: step_list — zentrierte Überschrift, darunter beliebig viele
   nummerierte Schritte als gleich große, quadratische Kacheln in einer Reihe.
   Reicht die Breite nicht, scrollt die Reihe horizontal (kein JS).
   Varianten: theme

   Diese Datei wird von site/snippets/styles.php als eigenes <link> geladen,
   OHNE Layer-Zuweisung — deshalb deklariert sie @layer blocks selbst.
   Die Reihenfolge der Layer steht in base.css.

   .step-list__inner ist in 04-layout.css NICHT in der Container-Liste
   enthalten — die Datei darf nicht angefasst werden, deshalb übernimmt
   dieser Block Container-Maß und Gutter selbst (wie info_slider).
   ========================================================================== */

@layer blocks {
  .step-list__inner {
    max-inline-size: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  /* Größe und Zeilenhöhe der Überschrift kommen aus 03-elements.css (level). */
  .step-list__headline {
    text-align: center;
    margin-block-end: var(--space-l);
  }

  /* --- Reihe --------------------------------------------------------------
     Immer eine Zeile. Passt sie, steht sie mittig; passt sie nicht, scrollt
     sie. Die Mitte entsteht über margin-inline:auto am ersten und letzten
     Schritt statt justify-content:center — das würde bei Überlauf den
     Anfang der Reihe links abschneiden und unerreichbar machen. */
  .step-list__items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--space-l);
    overflow-x: auto;
  }

  .step-list__step:first-child { margin-inline-start: auto; }
  .step-list__step:last-child  { margin-inline-end: auto; }

  /* Tab-Stopp sichtbar machen: <ol> fällt nicht unter die globale
     :focus-visible-Regel in 04-layout.css (siehe info_slider). */
  .step-list__items:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 3px;
  }

  /* --- Schritt ------------------------------------------------------------
     Quadratisch, alle gleich groß: 256px = 4 × --space-2xl (gemessen ~252px).
     Farbe kommt aus dem eigenen Theme-Modifier am <li> (siehe Snippet). */
  .step-list__step {
    flex: 0 0 auto;
    inline-size: calc(var(--space-2xl) * 4);
    aspect-ratio: 1;
    padding: var(--space-l);
    border-radius: var(--radius-l);
    background: var(--color-surface);
    color: var(--color-on-surface);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-s);
  }

  /* Zahl in der größten Stufe (gemessen ~72px), Regular wie alle Überschriften */
  .step-list__number {
    font-size: var(--text-h1);
    line-height: var(--leading-h1);
    font-weight: var(--weight-regular);
  }
}