/* ==========================================================================
   60 ablauf · Owner: wdf-section-builder (Auftrag P7-60)
   Kopf → ruhige Zeile „Vor Schritt 1“ → Stepper (sechs Stationen) → Linie → Hauptaktion.
   Mobil: senkrechte Zeitleiste, nur die aktuelle Station offen. Ab 1024: waagrechte Stationsleiste,
   alle Details in EINER Rasterzelle (Höhe = längste Station, die anderen sind unsichtbar).
   Zustände je Station (data-state am <li>): erledigt · aktuell · offen — Form + Farbe + Wort (style-lock § 0 Regel 4).
   Ohne JS (html:not(.js)): nummerierte Liste, alle Details offen, keine Zustandswörter, keine Steuerung.
   Smartphone zuerst, Erweiterungen mit min-width. Nur Tokens (style-lock § 0 Regel 8).
   ========================================================================== */

/* ---------- Abschnitt: Gruppen Kopf+Vorlauf / Stepper / Hauptaktion ---------- */
/* Eine Spalte, die nie breiter als der Bildschirm wird (sonst weitet ein unteilbarer Inhalt die Spalte, 200 % Zoom bei 320).
   Abstand zwischen den Blöcken: --space-stack (16 mobil, 24 ab 768, style-lock § 5). */
.ablauf__wrap { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-stack); }
.ablauf__head, .ablauf__pre { min-width: 0; }
.ablauf__pre p { max-width: var(--measure-lead); }
.ablauf__pre .inline-link { padding-block: var(--s-1); }

/* Hauptaktion: Linie + 24 px darüber (Zeilenabstand + Zuschlag mobil) und 24 px darunter — Steuerung und CTA sind keine gleichwertigen Nachbarn */
.ablauf__after {
  min-width: 0;
  margin-top: var(--s-2);
  padding-top: var(--s-5);
  border-top: 1px solid var(--color-line);
}

/* ---------- Stepper ---------- */
.stepper {
  --stp-tile: calc(var(--s-5) + var(--s-1));   /* 28 px Kachel */
  --stp-head: calc(var(--s-6) + var(--s-1));   /* 44 px Trefferfläche */
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3);
  min-width: 0;
}
.stepper__list { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.stepper__item { position: relative; min-width: 0; }
.stepper__heading { font: inherit; }

/* Kopf einer Station (Knopf): Kachel · Titel · Zustandswort */
.stepper__btn {
  display: grid;
  grid-template-columns: var(--stp-tile) minmax(0, 1fr) auto;
  align-items: center; column-gap: var(--s-3);
  width: 100%; min-height: var(--stp-head);
  text-align: left;
  border-radius: var(--r-s);
  transform-origin: left center;
  transition: transform var(--dur-press) var(--ease-out);
}
.stepper__btn:active { transform: scale(var(--press-scale)); }

.stepper__tile {
  position: relative; z-index: var(--z-raised);
  display: grid; place-items: center;
  width: var(--stp-tile); height: var(--stp-tile);
  border: 1px solid var(--color-line-input);
  border-radius: var(--r-s);
  background: var(--color-ui-raised);
  color: var(--color-text);
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
.stepper__num {
  font-family: var(--f-page);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stepper__tile .glyph { display: none; }

.stepper__title {
  font-size: var(--fs-title);
  line-height: var(--lh-title);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  text-wrap: balance;
  transition: color var(--dur-fast) var(--ease-out);
}
.stepper__state {
  font-size: var(--fs-micro);
  line-height: 1.3;
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}
/* Ohne JS gibt es keine Zustände: kein Wort, Kopf ist kein Knopf */
html:not(.js) .stepper__state { display: none; }
html:not(.js) .stepper__btn { pointer-events: none; cursor: default; }

/* Verbindungslinie zur nächsten Station: Spur 1 px, Füllung als eigenes Element (P8 animiert transform) */
.stepper__seg {
  position: absolute;
  left: calc(var(--stp-tile) / 2);
  top: calc((var(--stp-head) + var(--stp-tile)) / 2);
  bottom: calc((var(--stp-head) - var(--stp-tile)) / -2);
  width: 1px;
  background: var(--color-line-strong);
}
.stepper__seg::after {
  content: ""; position: absolute; inset: 0;
  background: var(--color-accent-line);
  transform: scaleY(0); transform-origin: top;
  transition: transform var(--dur-base) var(--ease-out);
}
.stepper__item:last-child .stepper__seg { display: none; }

/* Zustände (nur mit JS) */
/* Erledigt: Türkis-Kontur + Ring mit Haken (keine Füllung, style-lock § 8), Titel gedämpft */
html.js .stepper__item[data-state="erledigt"] .stepper__tile { background: var(--color-surface); border-color: var(--color-accent-line); }
html.js .stepper__item[data-state="erledigt"] .stepper__num { display: none; }
html.js .stepper__item[data-state="erledigt"] .stepper__tile .glyph { display: inline-grid; }
html.js .stepper__item[data-state="erledigt"] .stepper__title,
html.js .stepper__item[data-state="erledigt"] .stepper__state { color: var(--color-text-muted); }
html.js .stepper__item[data-state="erledigt"] .stepper__seg::after { transform: scaleY(1); }
/* Aktuell: gefüllte Kachel (raised), feste Kontur, Titel und Wort hell */
html.js .stepper__item[data-state="aktuell"] .stepper__state { color: var(--color-text); font-weight: var(--fw-semibold); }
/* Offen: gestrichelt = noch nicht da, Titel und Wort gedämpft */
html.js .stepper__item[data-state="offen"] .stepper__tile { background: var(--color-surface); border-style: dashed; border-color: var(--color-line-strong); color: var(--color-text-subtle); }
html.js .stepper__item[data-state="offen"] .stepper__title,
html.js .stepper__item[data-state="offen"] .stepper__state { color: var(--color-text-subtle); }

@media (hover: hover) and (pointer: fine) {
  html.js .stepper__item:not([data-state="aktuell"]) .stepper__btn:hover .stepper__title { color: var(--color-text); }
  html.js .stepper__item:not([data-state="aktuell"]) .stepper__btn:hover .stepper__state { color: var(--color-text-muted); }
  html.js .stepper__item:not([data-state="aktuell"]) .stepper__btn:hover .stepper__tile { background: var(--color-ui-window); border-color: var(--color-line-input); }
}

/* ---------- Detailfläche (App-Fenster ohne Etikett) ---------- */
/* Mobil: eingerückt auf die Titelkante, ohne Titelleiste (der Kopf nennt die Station schon) */
.stepper__panel {
  min-width: 0;
  margin: var(--s-1) 0 var(--s-2) calc(var(--stp-tile) + var(--s-3));
}
.stepper__bar { display: none; }
.stepper__body { padding: var(--s-3) var(--s-4); gap: var(--s-2); overflow-wrap: anywhere; }
.stepper__lead {
  max-width: var(--measure);
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--color-text);
  text-wrap: pretty;
}
/* Beitrag und Ergebnis: Beschriftung gedämpft, Inhalt hell */
.stepper__io {
  display: grid; gap: var(--s-3);
  padding-top: var(--s-2);
  border-top: 1px solid var(--color-line);
}
.stepper__io > div { display: grid; gap: 0; align-content: start; min-width: 0; }
.stepper__io dt {
  font-size: var(--fs-ui-meta);
  line-height: var(--lh-title);
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
}
.stepper__io dd {
  font-size: var(--fs-ui);
  line-height: 1.45;
  color: var(--color-text);
  text-wrap: pretty;
}

/* Nur die aktuelle Station ist offen (mit JS) */
html.js .stepper__panel[data-active="false"] { display: none; }
/* Wechsel als Zustandswechsel: Deckkraft + kurzer Weg (nur nach der ersten Bedienung, nicht beim Laden) */
.stepper.is-switched .stepper__panel[data-active="true"] { animation: stepper-in var(--dur-base) var(--ease-out); }
@keyframes stepper-in {
  from { opacity: 0; transform: translateY(var(--s-1)); }
  to { opacity: 1; transform: none; }
}

/* ---------- Steuerung ---------- */
.stepper__controls {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: var(--s-3);
}
.stepper__progress {
  min-width: 0;
  font-size: var(--fs-ui-meta);
  line-height: var(--lh-title);
  color: var(--color-text-muted);
  text-align: center;
  text-wrap: balance;
}
/* Hauptaktion darf bei extremer Enge (200 % Zoom auf 320 px) umbrechen statt zu überlaufen */
@media (max-width: 279px) {
  .ablauf__after .cta { grid-template-columns: minmax(0, 1fr); }
  .ablauf__after .btn { white-space: normal; padding-block: var(--s-2); }
  /* Steuerung: Status oben, beide Knöpfe darunter nebeneinander */
  .stepper__controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stepper__progress { grid-column: 1 / -1; grid-row: 1; }
  .stepper__controls .btn-ui { padding-inline: var(--s-2); }
}
@media (max-width: 359px) {
  .stepper__controls { gap: var(--s-2); }
  .stepper__controls .btn-ui { padding-inline: var(--s-3); }
  .stepper__controls .btn-ui .icon { display: none; }
}

/* ---------- ab 768: Tablet (Zeitleiste bleibt, Beitrag/Ergebnis nebeneinander) ---------- */
@media (min-width: 768px) {
  .ablauf__after { margin-top: 0; }   /* Zeilenabstand ist ab 768 selbst 24 px */
  .stepper__body { padding: var(--s-4) var(--s-5); }
  .stepper__io { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-5); }
  .stepper__progress { font-size: var(--fs-ui); }
  .ablauf__pre p { max-width: var(--measure); }
}

/* ---------- ab 1024: Kopf links | Vorlauf rechts, waagrechte Leiste mit Detailfläche darunter ---------- */
@media (min-width: 1024px) {
  .ablauf__wrap { grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr)); row-gap: var(--s-6); }
  .ablauf__head { grid-column: 1 / span 7; grid-row: 1; }
  .ablauf__pre {
    grid-column: 9 / span 4; grid-row: 1; align-self: end;
    margin-top: 0;
    padding-inline-start: var(--s-4);
    border-inline-start: 1px solid var(--color-line);
  }
  .stepper { grid-column: 1 / -1; grid-row: 2; gap: var(--s-4); }
  .ablauf__after { grid-column: 1 / -1; grid-row: 3; padding-top: var(--s-6); }

  html.js .stepper__list { grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--s-4); row-gap: var(--s-5); }
  html.js .stepper__item { display: contents; }

  /* Zeile 1: sechs Köpfe, Linie läuft durch die Mitte der Kacheln */
  html.js .stepper__heading { grid-row: 1; position: relative; }
  html.js .stepper__btn {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start; align-content: start; align-items: start;
    row-gap: var(--s-1);
    min-height: 0;
    padding-inline-end: var(--s-3);
    padding-bottom: var(--s-1);
  }
  html.js .stepper__tile { margin-bottom: var(--s-2); }
  html.js .stepper__seg {
    top: calc(var(--stp-tile) / 2); bottom: auto;
    left: calc(var(--stp-tile) / 2);
    width: calc(100% + var(--s-4)); height: 1px;
  }
  html.js .stepper__seg::after { transform: scaleX(0); transform-origin: left; }
  html.js .stepper__item[data-state="erledigt"] .stepper__seg::after { transform: scaleX(1); }

  /* Zeile 2: alle sechs Detailflächen in derselben Zelle. Die Zelle ist so hoch wie die längste Station;
     die nicht aktuellen sind unsichtbar (Platz bleibt), nichts springt. */
  html.js .stepper__panel,
  html.js .stepper__panel[data-active="false"] { display: block; grid-row: 2; grid-column: 1 / -1; margin: 0; }
  html.js .stepper__panel[data-active="false"] { visibility: hidden; }
  .stepper__bar { display: flex; }

  .stepper__body {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--s-6); align-items: start;
    padding: var(--s-5);
  }
  .stepper__lead { font-size: var(--fs-body); line-height: var(--lh-ui); max-width: 40ch; }
  .stepper__io { padding-top: 0; border-top: 0; column-gap: var(--s-5); }
  .stepper__io > div { padding-inline-start: var(--s-4); border-inline-start: 1px solid var(--color-line); gap: var(--s-1); }
  .stepper__io dt { font-size: var(--fs-small); }
  .stepper__io dd { font-size: var(--fs-small); }

  .stepper__controls { grid-template-columns: auto auto auto; justify-content: start; gap: var(--s-4); }
  .stepper__progress { min-width: 16ch; }
}

/* ---------- Reduced Motion: Endzustände sofort ---------- */
@media (prefers-reduced-motion: reduce) {
  .stepper.is-switched .stepper__panel[data-active="true"] { animation: none; }
  .stepper__seg::after { transition: none; }
  .stepper__btn:active { transform: none; }
}

/* ---------- Hohe Kontraste: Zustände behalten Kontur und Wort ---------- */
@media (forced-colors: active) {
  .stepper__tile { border: 1px solid CanvasText; }
  .stepper__item[data-state="aktuell"] .stepper__tile { border-width: 2px; }
  .stepper__seg { background: CanvasText; }
}

/* motion — Owner: wdf-motion-designer (P8-U), Bewegung ablauf-stepper (motion.js setzt --i und --from)
   Linie: füllt sich je Station mit --motion-stagger Versatz in Laufrichtung (Sprung über mehrere Stationen),
   leert sich gemeinsam und kürzer (--dur-exit). Die Verzögerung liegt im Zustand NACH dem Wechsel, also in
   der Regel für „erledigt“; --from ist die bis dahin aktuelle Station (siehe motion.js). Ohne --i: keine Verzögerung.
   Alles unter no-preference: Reduced Motion bleibt bei „transition: none“ oben. */
@media (prefers-reduced-motion: no-preference) {
  html.js .stepper__seg::after { transition-duration: var(--dur-exit); transition-delay: 0s; }
  html.js .stepper__item[data-state="erledigt"] .stepper__seg::after {
    transition-duration: var(--dur-base);
    transition-delay: max(0ms, calc((var(--i) - var(--from, 0)) * var(--motion-stagger)));
  }

  /* Kachel: Nummer ↔ Haken-Ring. Das neu eingeblendete Zeichen kommt per Deckkraft (--dur-fast).
     Nur nach der ersten Bedienung (.is-switched), nicht beim Laden. */
  .stepper.is-switched .stepper__tile .glyph,
  .stepper.is-switched .stepper__num { transition: opacity var(--dur-fast) var(--ease-out); }
  @starting-style {
    .stepper.is-switched .stepper__tile .glyph,
    .stepper.is-switched .stepper__num { opacity: 0; }
  }
}

/* motion — Owner: wdf-motion-designer (P17-M), ablauf-pin fließend (ab 1024, nur ohne Reduced Motion)
   Detailfläche: Überblendung mit Überlappung. Die neue Fläche liegt oben und blendet über --dur-slow ein, die alte bleibt
   darunter voll stehen, bis die neue da ist (Rahmen wirkt dadurch ruhig), und verschwindet dann. Der Inhalt bewegt sich:
   alter geht um --motion-distance-s nach oben und blendet in --dur-exit aus, neuer kommt von unten (rückwärts gespiegelt:
   Schritte davor liegen oben, Schritte danach unten — die Richtung folgt data-state am <li>). Alle Flächen teilen die Zelle,
   die Höhe bleibt (CLS 0). Ersetzt ab 1024 stepper-in.
   Pin (.is-scrub, motion.js): Linien folgen --fill ohne eigenen Übergang (die Glättung macht die Scroll-Uhr), die aktuelle
   Kachel hebt sich weich (--stp-lift, Übergang --dur-slow), Farben der Kacheln wechseln in --dur-base statt --dur-fast. */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .stepper { --stp-lift: 1.1; }   /* Größe der aktuellen Kachel im Pin (Konstante; Anfrage an den Lead: Token --motion-lift) */
  html.js .stepper.is-switched .stepper__panel[data-active="true"] { animation: none; }
  html.js .stepper__panel {
    position: relative;
    transition: opacity 0s linear var(--dur-slow), visibility 0s linear var(--dur-slow);
  }
  html.js .stepper__panel[data-active="false"] { opacity: 0; }
  html.js .stepper__panel[data-active="true"] {
    z-index: 1;
    transition: opacity var(--dur-slow) var(--ease-out), visibility 0s;
  }
  html.js .stepper__panel .ui-window__title,
  html.js .stepper__panel .stepper__body {
    transition: opacity var(--dur-exit) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  }
  html.js .stepper__panel[data-active="true"] .ui-window__title,
  html.js .stepper__panel[data-active="true"] .stepper__body {
    transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  }
  html.js .stepper__item[data-state="erledigt"] .stepper__panel .ui-window__title,
  html.js .stepper__item[data-state="erledigt"] .stepper__panel .stepper__body {
    opacity: 0; transform: translateY(calc(-1 * var(--motion-distance-s)));
  }
  html.js .stepper__item[data-state="offen"] .stepper__panel .ui-window__title,
  html.js .stepper__item[data-state="offen"] .stepper__panel .stepper__body {
    opacity: 0; transform: translateY(var(--motion-distance-s));
  }

  html.js .stepper.is-scrub .stepper__item .stepper__seg::after,
  html.js .stepper.is-scrub .stepper__item[data-state="erledigt"] .stepper__seg::after {
    transform: scaleX(var(--fill, 0));
    transition: none;
  }
  html.js .stepper.is-scrub .stepper__tile {
    transition:
      transform var(--dur-slow) var(--ease-out),
      background-color var(--dur-base) var(--ease-out),
      border-color var(--dur-base) var(--ease-out),
      color var(--dur-base) var(--ease-out);
  }
  html.js .stepper.is-scrub .stepper__item[data-state="aktuell"] .stepper__tile { transform: scale(var(--stp-lift)); }
}