/* ═══════════════════════════════════════════════════════════════════════════
   teil-zl — „Von der Buchung zur Brille": fünf Schritte als schmale Kacheln
   ───────────────────────────────────────────────────────────────────────────
   Christopher, 04.10.2026 (Auftrag 6):

     „Ich würde aber diese einzelnen Kacheln 01, 02, 03, 04 noch etwas schmaler
      machen, also mehr boxig, und natürlich mittig zentrieren. Und mach bitte
      passende Bilder … Und wir sollten vielleicht auch fünf Schritte daraus
      machen."

   ── Was sich ändert ───────────────────────────────────────────────────────
   Vorher: fünf breite Zeilen untereinander, Raster „Nummer | rundes Bild |
   Text" über die volle Bahnbreite (grund.css 293–305). Jetzt: fünf schmale,
   hochformatige Kacheln nebeneinander, Bild oben, Nummer als Plakette in der
   Bildecke, darunter Überschrift und Satz.

   ── Warum flex und nicht grid ─────────────────────────────────────────────
   Fünf geht durch 2, 3 und 4 nicht auf. Ein festes Raster hinterließe auf
   mittleren Breiten immer eine angebrochene letzte Reihe, links ausgerichtet —
   genau das, was bei den acht Brillenkacheln heute früh zu korrigieren war.
   `flex-wrap` mit `justify-content:center` **zentriert die letzte Reihe von
   selbst**, egal wie viele Kacheln übrig bleiben. Das ist zugleich sein
   „und natürlich mittig zentrieren".

   Die Breite ist fluid: clamp(228px, 17.6%, 288px). Bei 1560 px Bahn passen
   5 × 288 + 4 × 18 = 1512 px in eine Reihe; darunter bricht es von selbst auf
   3 + 2 und dann auf 2 + 2 + 1 um, jede Reihe mittig.
   ═══════════════════════════════════════════════════════════════════════════ */

#ablauf .ab-reihe{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch;
  gap:clamp(.7rem, 1.2vw, 1.15rem);
  margin-inline:auto;
}

/* Die Kachel. Das Zeilenraster aus grund.css wird hier ersetzt — darum
   display:flex statt des geerbten grid mit drei Spalten. */
#ablauf .ab-schritt{
  display:flex; flex-direction:column; gap:0;
  flex:0 1 clamp(222px, 17.6%, 288px);
  padding:clamp(.6rem, .9vw, .8rem);
  text-align:left;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.95);
  box-shadow:0 8px 26px rgba(19,55,109,.06);
}
/* Der Hub beim Überfahren ging bisher zur Seite (translateX) — bei einer
   stehenden Kachel gehört er nach oben. */
#ablauf .ab-schritt:hover{
  transform:translateY(-6px);
  background:#fff;
  box-shadow:0 18px 40px rgba(19,55,109,.12);
}

/* ── Bild mit der Nummer in der Ecke ────────────────────────────────────── */
.ab-bild{
  position:relative; display:block; overflow:hidden;
  border-radius:calc(var(--r-l) - .7rem);
  aspect-ratio:4/3; background:var(--sand);
  margin-bottom:.85rem;
}
.ab-bild img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.02); transition:transform 1s var(--weich);
}
#ablauf .ab-schritt:hover .ab-bild img{ transform:scale(1.07) }

/* Die Plakette. grund.css gibt `.schritt .nr` eine Breite von 2,2ch und keine
   Fläche — beides wird hier überschrieben, die Serifenschrift bleibt. */
#ablauf .ab-schritt .nr{
  position:absolute; left:.55rem; bottom:.55rem; width:auto;
  display:grid; place-items:center;
  min-width:2.1em; height:2.1em; padding-inline:.35em;
  border-radius:var(--r-rund);
  background:var(--gold); color:#2A2113;
  font-size:clamp(.92rem, 1.1vw, 1.12rem); line-height:1;
  box-shadow:0 6px 18px rgba(19,55,109,.22);
}

#ablauf .ab-schritt h3{
  margin:0 0 .25rem; color:var(--blau);
  font-size:clamp(1rem, 1.15vw, 1.1rem); line-height:1.3;
}
#ablauf .ab-schritt p{ margin:0; font-size:.9rem; line-height:1.55 }

/* ── Das Kleingedruckte darunter ───────────────────────────────────────────
   Seine Ansage: „unten drunter im kleiner Gedruckten können wir dann
   schreiben, dass eben das Nachjustieren der Brille — ein perfekter Sitz —
   für uns selbstverständlich ist, so wie eine gründliche Reinigung … für
   unsere Kunden immer kostenfrei." */
/* Mit id davor: ohne das setzt eine frühere Regel margin-inline auf 0 und die
   Zeile klebt am linken Rand statt mittig zu stehen (am 04.10.2026 gemessen:
   links 194, Reihenmitte 918). */
#ablauf .ab-kleingedruckt{
  margin:clamp(1.1rem, 1.8vw, 1.6rem) auto 0;
  max-width:68ch; text-align:center;
  font-size:.86rem; line-height:1.6; color:var(--text-leise);
}
#ablauf .ab-kleingedruckt strong{ color:var(--blau); font-weight:800 }

/* ── Schmale Fenster ────────────────────────────────────────────────────────
   Gemessen am 04.10.2026: mit einer einzigen Grundbreite brach die Reihe bei
   1280 px auf **4 + 1** um — eine einzelne Kachel allein in der zweiten Zeile.
   Mittig war sie, schön war sie nicht. Darum wächst die Grundbreite unterhalb
   von 1340 px, damit nur noch drei nebeneinander passen und es sauber 3 + 2
   wird; unter 780 px dann 2 + 2 + 1. Jede Reihe bleibt mittig.
     1850 px → 5          1280 px → 3 + 2
     1024 px → 3 + 2       800 px → 2 + 2 + 1       375 px → 5 × 1          */
@media (max-width:1339px){
  #ablauf .ab-schritt{ flex:0 1 clamp(240px, 30%, 304px) }
}
@media (max-width:779px){
  #ablauf .ab-schritt{ flex:1 1 clamp(228px, 46%, 330px) }
}
@media (max-width:620px){
  /* grund.css blendet unter 620 px `.schritt .rund` aus und stellt das Raster
     auf zwei Spalten um — beides gilt für die alte Zeilenform und darf die
     neue Kachel nicht treffen. */
  #ablauf .ab-schritt{ flex:1 1 100%; max-width:420px; padding:.7rem }
  .ab-bild{ aspect-ratio:16/10; display:block }
  #ablauf .ab-kleingedruckt{ font-size:.82rem }
}

/* ── Netze ──────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .ab-bild img,
  #ablauf .ab-schritt:hover .ab-bild img{ transform:scale(1.02); transition:none }
  #ablauf .ab-schritt:hover{ transform:none }
}