/* ══ SECTION 3 · DER ABLAUF — Aussehen ═══════════════════════════════════
   Was diese Datei NICHT macht: die Wesen zeichnen oder bewegen. Das sind
   Mesh-Entitäten (engine/entitaeten.mjs) auf einer eigenen three-Fläche;
   ihre Lage kommt aus den GEMESSENEN Platzhaltern hier — `.ab-platz` ist
   ein leerer Kasten, und genau dort steht dann ein Wesen. Dadurch sitzt
   die Beschriftung wirklich unter ihrem Wesen, in jeder Fensterbreite.

   Der Platzhalter ist deshalb kein Notbehelf, sondern die Schnittstelle
   zwischen Layout und Engine.
──────────────────────────────────────────────────────────────────────── */

.ablauf {
  --auf: 1;                /* Aufbau 0…1, schreibt ablauf.mjs             */
  position: relative;
  z-index: 2;
  isolation: isolate;
  padding: clamp(5rem, 12svh, 9rem) 0 clamp(5rem, 12svh, 9rem);
  /* KEIN eigener Hintergrund: den trägt seit 08.08.2026 die feste
     Fläche `.grund` hinter der ganzen Seite. Ein deckendes --void hier
     schnitte sie hart ab — genau das machte die Naht sichtbar. */
}

/* Die Wesen liegen unter dem Text: sie sind der Gegenstand, nicht die
   Beschriftung. Die Fläche deckt die ganze Sektion ab, damit ein Wesen
   auch über seinen Platzhalter hinausleuchten darf. Sie wird erst mit
   three nachgeladen; bis dahin steht sie leer da und kostet nichts. */
.ab-wesen {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%; height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* ── Kopf ───────────────────────────────────────────────────────────────
   Gleiche Sprache wie Section 2: ein Kicker mit zwei Linien, eine ruhige
   Überschrift, eine Zeile darunter. Kein Verlaufstext. */
.ab-kopf {
  position: relative;
  z-index: 2;
  max-width: 46rem;
  margin: 0 auto clamp(3rem, 7svh, 5rem);
  padding: 0 1.5rem;
  text-align: center;
  /* Kommt mit dem Feld herauf — EINE Zahl, zwei Abnehmer. */
  opacity: var(--auf);
  translate: 0 calc((1 - var(--auf)) * 22px);
}
.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 {
  margin: 1rem 0 0;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--ink-dim);
  opacity: .88;
}

/* ── Die Bühne ─────────────────────────────────────────────────────────
   Nur ein Rahmen für die Reihe. Die Wesen liegen im Canvas dahinter, das
   die ganze Sektion abdeckt — sie brauchen hier keinen Platz, nur eine
   Marke. */
.ab-buehne {
  position: relative;
  z-index: 2;
  max-width: min(92vw, 1120px);
  margin: 0 auto;
  padding: 0 1.25rem;
}

.ab-reihe {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: start;
}

.ab-schritt {
  --ton: var(--haze);      /* setzt ablauf.mjs je Schritt neu             */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* Von links nach rechts gestaffelt: der Ablauf hat eine Richtung, und
     die soll man sehen. Die Kennlinie steckt in --auf, die Verzögerung
     hier. */
  --v: 0;
  opacity: clamp(0, calc((var(--auf) - var(--v) * .22) / .55), 1);
  translate: 0 calc((1 - clamp(0, calc((var(--auf) - var(--v) * .22) / .55), 1)) * 26px);
}
.ab-schritt:nth-child(2) { --v: 1; }
.ab-schritt:nth-child(3) { --v: 2; }

/* Die Textspalte. Im Breitformat ist sie NICHT da (`display: contents`):
   ihre Kinder stehen direkt untereinander, wie ohne Hülle. Erst im
   Hochformat wird sie zur Spalte neben dem Wesen. */
.ab-text { display: contents; }

/* DER PLATZHALTER. Er ist leer und bleibt leer — er sagt der Engine nur,
   wo das Wesen steht und wie groß es ist. Quadratisch, damit der Radius
   nicht vom Seitenverhältnis abhängt. */
.ab-platz {
  width: clamp(96px, 11vw, 150px);
  aspect-ratio: 1;
  margin-bottom: clamp(1.2rem, 2.6vw, 2rem);
  pointer-events: none;
}

.ab-nr {
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .2em;
  color: color-mix(in oklab, var(--ton) 78%, transparent);
}
.ab-schritt h3 {
  margin: .5rem 0 0;
  font-family: 'Clash Display', 'Space Grotesk', sans-serif;
  font-weight: 400;
  font-size: clamp(1.25rem, 2.2vw, 1.72rem);
  line-height: 1.15;
  letter-spacing: -.005em;
  color: var(--ink);
}
.ab-schritt p {
  margin: .7rem 0 0;
  max-width: 22rem;
  font-size: clamp(.82rem, 1.05vw, .93rem);
  line-height: 1.55;
  color: var(--ink-dim);
  opacity: .9;
}
/* Der Zusatz steht kleiner darunter — er ist Beruhigung, nicht Aussage. */
.ab-mehr { font-size: .8rem !important; opacity: .55 !important; margin-top: .5rem !important; }

/* ── Ohne WebGL2 ────────────────────────────────────────────────────────
   Dann fehlen die Wesen. Der Platzhalter bekommt einen schlichten
   Glasring, damit die Reihe nicht mit drei Löchern dasteht. */
.ablauf:not(.hat-wesen) .ab-platz {
  border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--ton) 40%, transparent);
  background: radial-gradient(circle at 38% 32%,
              color-mix(in oklab, var(--ton) 22%, transparent), transparent 68%);
  box-shadow: 0 20px 60px -30px color-mix(in oklab, var(--ton) 70%, transparent);
}

/* ── Schmal: Wesen links, Text rechts ───────────────────────────────────
   Kein Sonderfall in der Engine nötig: die Wesen folgen den
   Platzhaltern, und die ordnet das Layout hier neu. */
@media (max-width: 860px) {
  .ab-reihe { grid-template-columns: 1fr; gap: clamp(1.6rem, 4.5vh, 2.4rem); }

  /* Wesen LINKS, Text rechts. Zentriert untereinander stünden die drei
     Körper in der Textspalte; am Rand geführt lesen sie sich als Folge —
     die richtige Form für einen Ablauf auf einem schmalen Gerät. */
  .ab-schritt {
    flex-direction: row;
    align-items: flex-start;
    gap: clamp(.9rem, 4vw, 1.4rem);
    text-align: left;
  }
  .ab-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
    min-width: 0;
    padding-top: .6rem;
  }
  .ab-platz {
    width: clamp(84px, 24vw, 108px);
    margin-bottom: 0;
    flex: none;
  }
  .ab-schritt h3 { margin-top: .35rem; }
  .ab-schritt p { max-width: none; }

  /* Untereinander läuft die Staffelung von oben nach unten — von links
     nach rechts wäre hier nur Zufall. */
  .ab-schritt { --v: 0; }
  .ab-schritt:nth-child(2) { --v: 1; }
  .ab-schritt:nth-child(3) { --v: 2; }
}

/* ── Reduced Motion — Ankunft ohne Reise ────────────────────────────────
   Das Feld steht fertig da, die Schritte auch. Weggelassen wird nur der
   Aufbau, nicht das Ziel. */
@media (prefers-reduced-motion: reduce) {
  .ablauf { --auf: 1; }
  .ab-kopf, .ab-schritt { opacity: 1; translate: none; }
}