/* Unterseite Ablauf (/ablauf/, /en/process/). Nutzt die Tokens aus main-*.css. */
.ablauf { --track-pad: clamp(2.25rem, 6vw, 5rem); }
.ablauf .section { padding-block: var(--section-gap); }
.ablauf__intro { padding-top: clamp(2rem, 4vw, 3rem) !important; }
.ablauf__intro h1 { max-width: 14ch; font-size: var(--text-title); letter-spacing: -.04em; text-wrap: balance; font-weight: 600; line-height: .98; margin: 0; }
.ablauf__intro .section__lead { margin: clamp(2rem, 6vw, 3.5rem) 0 0; max-width: 34ch; }

.ablauf__track { position: relative; padding-left: var(--track-pad); }
.ablauf__rail { position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--line); }
.ablauf__fill { position: absolute; inset: 0; background: var(--fg); transform-origin: top; transform: scaleY(var(--p, 0)); }
.ablauf__list { list-style: none; margin: 0; padding: 0; }

.step { position: relative; padding-block: clamp(2rem, 5vw, 4rem); border-top: 1px solid var(--line); }
.step:first-child { border-top: 0; padding-top: 0; }
.step::before { content: ""; position: absolute; left: calc(-1 * var(--track-pad) - 4px); top: calc(clamp(2rem, 5vw, 4rem) + .5rem); width: 9px; height: 9px; background: var(--bg); border: 1px solid var(--muted); transition: background-color .4s, border-color .4s; }
.step:first-child::before { top: .5rem; }
.step.is-in::before { background: var(--fg); border-color: var(--fg); }
.step__n { display: block; color: var(--muted); font-size: var(--text-small, .875rem); letter-spacing: .04em; margin-bottom: .5rem; }
.step__t { margin: 0 0 clamp(1.25rem, 3vw, 2rem); font-size: var(--text-row); letter-spacing: -.03em; font-weight: 600; line-height: 1.02; text-wrap: balance; }
.step__cols { display: grid; gap: 1rem; }
.step__cols p { margin: 0; max-width: 40ch; font-size: clamp(1.0625rem, 1.3vw, 1.2rem); line-height: 1.5; }
.step__sie { color: var(--muted); }
/* Pfeilspitzen zwischen Sie und wir: Desktop nach rechts, Handy nach unten und zentriert. */
.step__link { display: block; width: 24px; height: 24px; margin-inline: auto; color: var(--fg); }
.step__link svg { display: block; overflow: visible; transform: rotate(90deg); }
@media (min-width: 48em) {
  .step__cols { grid-template-columns: minmax(0, 1fr) clamp(2.5rem, 5vw, 4rem) minmax(0, 1.3fr); gap: 0 clamp(.75rem, 2vw, 1.5rem); align-items: start; }
  .step__link { margin-top: calc(.75 * clamp(1.0625rem, 1.3vw, 1.2rem) - 12px); }
  .step__link svg { transform: none; }
}

.ablauf__bring h2 { margin: 0 0 clamp(1.5rem, 4vw, 2.5rem); font-size: var(--text-row); letter-spacing: -.03em; font-weight: 600; line-height: 1.02; max-width: 18ch; text-wrap: balance; }
.ablauf__bring ul { list-style: none; margin: 0; padding: 0; max-width: 52ch; }
.ablauf__bring li { border-top: 1px solid var(--line); padding-block: 1rem; font-size: clamp(1rem, 1.25vw, 1.2rem); line-height: 1.45; }
.ablauf__bring li:last-child { border-bottom: 1px solid var(--line); }
.ablauf__bring .ablauf__note { margin: 1.5rem 0 2rem; color: var(--muted); max-width: 44ch; }

/* Bewegung nur mit JavaScript; ohne JS oder bei reduzierter Bewegung steht alles sofort da. */
.js .step { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.js .step.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .step { opacity: 1; transform: none; transition: none; }
  .step::before { background: var(--fg); border-color: var(--fg); transition: none; }
  .ablauf__fill { transform: none; }
}

/* Seitenkopf: Skizze wird zum Vektor-r, dann Beschnitt- und Passmarken. Läuft einmal ab und bleibt stehen. */
.ablauf__figure { margin-top: clamp(2rem, 6vw, 3rem); width: min(100%, 26rem); }
.ablauf__figure svg { display: block; width: 100%; height: auto; overflow: visible; }
@media (min-width: 60em) {
  .ablauf__intro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--gutter); align-items: center; }
  .ablauf__intro h1, .ablauf__intro .section__lead { grid-column: 1; }
  .ablauf__figure { grid-column: 2; grid-row: 1 / span 2; margin: 0; justify-self: end; width: min(100%, 30rem); }
}
.ab-raster { color: var(--line); opacity: 0; animation: ab-ein 1.4s ease .1s forwards; }
.ab-skizzen { animation: ab-geist 3.4s ease 5.8s forwards; }
.ab-skizze { stroke: var(--faint); stroke-width: var(--w, 1); opacity: var(--o, .6); stroke-dasharray: 1; stroke-dashoffset: 1; animation: ab-zeichnen var(--t, 1.1s) cubic-bezier(.4, .1, .3, 1) var(--d, 0s) forwards; }
.ab-kontur { stroke: var(--fg); stroke-width: 1.6; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: ab-zeichnen 2.6s cubic-bezier(.45, .05, .3, 1) 4.5s forwards; }
.ab-fuellung { fill: var(--fg); opacity: 0; animation: ab-ein 1.1s ease 7.2s forwards; }
.ab-anker rect, .ab-anker { fill: var(--bg); stroke: var(--fg); stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; animation: ab-pop .4s ease calc(5.7s + var(--i) * .08s) forwards, ab-aus .6s ease 8.3s forwards; }
.ab-marke { stroke: var(--fg); stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 1; animation: ab-zeichnen .9s ease 8.5s forwards; }
.ab-pass { stroke: var(--fg); stroke-width: 1.2; opacity: 0; animation: ab-ein 1s ease 9.5s forwards; }
@keyframes ab-zeichnen { to { stroke-dashoffset: 0; } }
@keyframes ab-ein { to { opacity: 1; } }
@keyframes ab-geist { to { opacity: .1; } }
@keyframes ab-aus { to { opacity: 0; } }
@keyframes ab-pop { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .ab-raster, .ab-skizzen, .ab-skizze, .ab-kontur, .ab-fuellung, .ab-anker, .ab-marke, .ab-pass { animation: none; }
  .ab-raster { opacity: 1; }
  .ab-skizzen, .ab-anker { display: none; }
  .ab-kontur, .ab-marke { stroke-dashoffset: 0; }
  .ab-fuellung, .ab-pass { opacity: 1; }
}

/* Startseite: Button unter dem Ablauf-Text (rechte Spalte), nicht unter der Überschrift. */
.section__more { margin: clamp(1.5rem, 4vw, 2.5rem) 0 0; }
@media (min-width: 48em) { .section--split .section__more { grid-column: 2; } }