/* ══ STATION 3 · DER ABLAUF — „der Pfad" (07.11.2026) ═════════════════════
   Löst die drei three.js-Wesen ab (Brief · Entwurf · Netz, ablauf.css +
   ablauf.mjs — beide bleiben fürs Labor liegen, die Startseite lädt sie
   nicht mehr). Jordan: „der Ablauf in drei Schritten visuell neu und
   verbessern" — und seit der Station „Leistungen" gilt er für Website,
   Software UND KI, nicht mehr nur fürs Online-Gehen.

   DIE IDEE: eine Leiterbahn mit drei Kontaktpunkten. Der Ablauf IST eine
   Strecke, und die Seite spricht überall die Sprache der Platine — also
   liegen die Schritte auf einer Bahn, und beim Ankommen läuft EIN Signal
   von Schritt 1 zu Schritt 3; jeder Punkt geht an, wenn es ihn erreicht.
   Das ist der eine Moment der Station. Die Nummern sind hier richtig:
   die Reihenfolge ist die Information.

   Jeder Schritt sagt drei Dinge, die der Leser wissen will: WANN (Marke
   über der Überschrift), WAS (Überschrift + ein Satz) und WAS ES KOSTET
   (Zeile darunter). Kein Absatz mehr als zwei Zeilen am Rechner.

   KLASSEN-VERTRAG: `.ab-kicker`, `#ablauf-titel` und `.ab-reihe >
   .ab-schritt` sind Anker des Circuit-Netzes (circuit.mjs, anker[3]),
   `.ab-kopf/.ab-schritt/.ab-fuss` sein Keep-out. Nicht umbenennen.
──────────────────────────────────────────────────────────────────────── */

.ablauf {
  position: relative;
  z-index: 2;
  padding: clamp(5rem, 12svh, 9rem) 0 clamp(4rem, 10svh, 7rem);
}

/* ── Kopf: dieselbe Stimme wie Leistungen und Modelle ──────────────── */
.ab-kopf {
  position: relative;
  z-index: 2;
  max-width: 46rem;
  margin: 0 auto clamp(2.6rem, 7svh, 4.6rem);
  padding: 0 1.5rem;
  text-align: center;
}
.ab-kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  margin: 0 0 1.1rem;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--haze);
}
.ab-kicker::before, .ab-kicker::after {
  content: '';
  width: clamp(2rem, 7vw, 4.5rem);
  height: 1px;
  background: linear-gradient(to right, transparent, var(--haze));
}
.ab-kicker::after { scale: -1 1; }
.ab-kopf h2 {
  margin: 0;
  font-family: 'Clash Display', 'Space Grotesk', sans-serif;
  font-weight: 400;
  font-size: clamp(1.9rem, 4.4vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  text-wrap: balance;
  color: var(--ink);
}
.ab-sub {
  max-width: 34rem;
  margin: 1rem auto 0;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--ink-dim);
  text-wrap: pretty;
}

/* ── Die Bahn ──────────────────────────────────────────────────────────
   Drei gleiche Spalten. Die Bahn läuft von der MITTE des ersten bis zur
   Mitte des dritten Punkts: bei Spaltenbreite c = (100 % − 2·Fuge) / 3
   liegt die erste Mitte bei c/2 — daher `--ab-mitte`. Prozent in einer
   Variable lösen erst beim Einsetzen auf, also gegen die Breite der
   Reihe. */
.ab-buehne {
  position: relative;
  z-index: 2;
  max-width: min(92vw, 1120px);
  margin: 0 auto;
  padding: 0 1.25rem;
}
.ab-reihe {
  --ab-fuge: clamp(1.2rem, 3.4vw, 3rem);
  --ab-knoten: 58px;
  --ab-mitte: calc((100% - 2 * var(--ab-fuge)) / 6);
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ab-fuge);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* die Leiterbahn selbst */
.ab-reihe::before {
  content: '';
  position: absolute;
  top: calc(var(--ab-knoten) / 2);
  left: var(--ab-mitte);
  right: var(--ab-mitte);
  height: 1px;
  background: linear-gradient(90deg, var(--linie-hell), rgba(255, 255, 255, .34) 50%, var(--linie-hell));
  pointer-events: none;
}
/* das Signal: ein kurzer heller Schweif, der einmal über die Bahn läuft */
.ab-reihe::after {
  content: '';
  position: absolute;
  top: calc(var(--ab-knoten) / 2 - 1px);
  left: var(--ab-mitte);
  width: 110px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55) 70%, #fff);
  box-shadow: 0 1px 12px rgba(255, 255, 255, .5);
  opacity: 0;
  pointer-events: none;
}

/* ── Ein Schritt ───────────────────────────────────────────────────── */
.ab-schritt {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
}
/* Der Kontaktpunkt: Lötauge mit Ring und Nummer. Deckend, damit die
   Bahn HINTER ihm endet und nicht durch die Ziffer läuft. */
.ab-knoten {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--ab-knoten);
  height: var(--ab-knoten);
  margin-bottom: clamp(1.2rem, 2.6vw, 1.8rem);
  border: 1px solid var(--linie-hell);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 70%), #0a0a0d;
  box-shadow: 0 0 0 6px #050506, 0 0 0 7px rgba(255, 255, 255, .08), 0 14px 30px -12px rgba(0, 0, 0, .9);
  font: 400 .78rem/1 'Space Mono', ui-monospace, monospace;
  letter-spacing: .08em;
  color: var(--ink);
}
.ab-text { display: contents; }
.ab-wann {
  margin: 0 0 .55rem;
  font: 400 .66rem/1.2 'Space Mono', ui-monospace, monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.ab-schritt h3 {
  margin: 0;
  font-family: 'Clash Display', 'Space Grotesk', sans-serif;
  font-weight: 400;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  line-height: 1.15;
  letter-spacing: -.008em;
  color: var(--ink);
  text-wrap: balance;
}
.ab-satz {
  max-width: 21rem;
  margin: .7rem 0 0;
  font-size: clamp(.84rem, 1.02vw, .93rem);
  line-height: 1.55;
  color: var(--ink-dim);
  text-wrap: pretty;
}
/* Was der Schritt kostet: eine kleine Pille, weil es eine Angabe ist und
   kein Satz — man soll sie im Vorbeigehen ablesen. */
.ab-kosten {
  margin: 1rem 0 0;
  padding: .38rem .8rem;
  border: 1px solid var(--linie);
  border-radius: 999px;
  font-size: .76rem;
  line-height: 1.2;
  letter-spacing: .02em;
  color: var(--ink);
}

.ab-fuss {
  position: relative;
  z-index: 2;
  max-width: 40rem;
  margin: clamp(2.2rem, 5.5svh, 3.4rem) auto 0;
  padding: 0 1.5rem;
  text-align: center;
  font-size: .86rem;
  line-height: 1.55;
  color: var(--ink-dim);
}
.ab-fuss b { color: var(--ink); font-weight: 500; }

/* ── Der Moment: das Signal läuft ──────────────────────────────────────
   Im Stationsmodus trägt die Station beim Ankommen 760 ms `kommt`
   (Regie in index.html). Fällt die Klasse, wechselt die Animation von
   `none` auf ihren Namen — sie startet bei JEDER Ankunft neu. Der
   Grundzustand ist „alle Punkte an": ohne Animation (Tablet, Handy,
   reduzierte Bewegung) steht der fertige Pfad da. */
.ablauf.kommt .ab-reihe::after,
.ablauf.kommt .ab-knoten { animation: none; }
.ablauf:not(.kommt) .ab-reihe::after { animation: ab-signal 1.5s cubic-bezier(.45, 0, .25, 1) .1s both; }
.ablauf:not(.kommt) .ab-knoten { animation: ab-an .6s var(--ease) both; }
.ab-schritt:nth-child(1) .ab-knoten { animation-delay: .1s; }
.ab-schritt:nth-child(2) .ab-knoten { animation-delay: .82s; }
.ab-schritt:nth-child(3) .ab-knoten { animation-delay: 1.52s; }

@keyframes ab-signal {
  0%   { left: var(--ab-mitte); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { left: calc(100% - var(--ab-mitte) - 110px); opacity: 0; }
}
@keyframes ab-an {
  0%   { border-color: var(--linie); color: var(--ink-dim); }
  40%  { border-color: #fff; color: #fff;
         box-shadow: 0 0 0 6px #050506, 0 0 0 7px rgba(255, 255, 255, .5), 0 4px 26px rgba(255, 255, 255, .45); }
  100% { border-color: var(--linie-hell); color: var(--ink); }
}

@media (hover: hover) and (pointer: fine) {
  .ab-knoten { transition: border-color .3s var(--ease), box-shadow .3s var(--ease); }
  .ab-schritt:hover .ab-knoten {
    border-color: var(--ink);
    box-shadow: 0 0 0 6px #050506, 0 0 0 7px rgba(255, 255, 255, .22), 0 14px 30px -12px rgba(0, 0, 0, .9);
  }
}

/* ── Schmal (≤ 860 px): die Bahn steht senkrecht ───────────────────────
   Punkte in einer Spalte links, die Bahn läuft durch ihre Mitten, der
   Text steht rechts daneben. Kein Signal — untereinander gibt es keine
   Ankunft, an der es losliefe; die Punkte stehen fertig da. */
@media (max-width: 860px) {
  .ab-reihe {
    --ab-knoten: 48px;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    max-width: 560px;
    margin: 0 auto;
  }
  /* Die Bahn je Schritt: von der eigenen Punktmitte bis zur Mitte des
     NÄCHSTEN Punkts (eigene Höhe + Fuge). Eine durchgehende Linie über
     die Reihe endete unter dem letzten Absatz statt am letzten Punkt. */
  .ab-reihe::before { display: none; }
  .ab-schritt { position: relative; }
  .ab-schritt:not(:last-child)::before {
    content: '';
    position: absolute;
    top: calc(var(--ab-knoten) / 2);
    left: calc(var(--ab-knoten) / 2);
    width: 1px;
    height: calc(100% + 2rem);
    background: var(--linie-hell);
    pointer-events: none;
  }
  .ab-reihe::after,
  .ablauf:not(.kommt) .ab-reihe::after { display: none; animation: none; }
  .ablauf:not(.kommt) .ab-knoten { animation: none; }
  .ab-schritt {
    display: grid;
    grid-template-columns: var(--ab-knoten) minmax(0, 1fr);
    column-gap: 1.1rem;
    align-items: start;
    text-align: left;
  }
  .ab-knoten { grid-row: 1 / span 5; margin: 0; }
  .ab-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    padding-top: .2rem;
  }
  .ab-satz { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ablauf .ab-reihe::after,
  .ablauf:not(.kommt) .ab-reihe::after,
  .ablauf .ab-knoten { animation: none; }
  .ab-knoten { transition: none; }
}