/**
 * steps.css — Vorgehen als Zeitstrahl („Wie wir vorgehen").
 *
 * Vorher vier gleichrangige Spalten, jede mit derselben Oberlinie in
 * --ec-color-primary. Die Abfolge stand in der Ziffer, aber nicht im Bild:
 * vier identische Linien nebeneinander lesen sich als Aufzählung, nicht als
 * Weg. Der Ton wandert jetzt von ember-300 nach ember-900 durch die vier
 * Abschnitte — die Richtung steht damit in der Farbe und nicht nur im Text.
 *
 * DER KNOTEN SITZT AUF DER LINIE, NICHT DANEBEN
 * Beide sind Pseudo-Elemente desselben Schritts: die Linie liegt bündig an
 * dessen Oberkante, der Knoten wird um seine halbe Höhe gegen die halbe
 * Linienstärke nach oben gezogen. Damit fallen beide Mitten zusammen, in
 * jeder Breite und ohne einen Wert, der nachgeführt werden müsste.
 */

.ec-steps__eyebrow {
  margin-bottom: var(--ec-space-xs);
  color: var(--ec-color-primary);
  font-size: var(--ec-fs-small);
  font-weight: var(--ec-fw-medium);
  letter-spacing: var(--ec-tracking-wide);
  text-transform: uppercase;
}

.ec-steps__title {
  max-width: var(--ec-measure);
  margin: 0 0 var(--ec-space-xl);
  color: var(--ec-color-ink);
  font-family: var(--ec-font-heading);
  font-size: var(--ec-fs-h2);
  font-weight: var(--ec-fw-bold);
  line-height: var(--ec-lh-tight);
}

/*
 * auto-fit statt fester Vierteilung: die Schritte brechen dort um, wo sie zu
 * schmal würden. Einspaltig behält jeder Schritt Linie und Knoten über sich —
 * der Zeitstrahl kippt von waagerecht nach senkrecht, statt zu verschwinden.
 */
.ec-steps__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--ec-space-lg) var(--ec-space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ec-steps__item {
  position: relative;

  /* Ohne das erbt der Schritt 68ch aus der Grundtypografie und bestimmt damit
     die Spaltenbreite mit — vgl. den gleichen Fall in landing.css. */
  max-width: none;
  padding-top: var(--ec-space-lg);
}

/* --------------------------------------------------------- Linie und Knoten */

.ec-steps__item::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: var(--ec-border-width-thick);
  background-image: linear-gradient(
    90deg,
    var(--ec-color-ember-300),
    var(--ec-color-ember-500)
  );
  transform-origin: left;
}

.ec-steps__item:nth-child(2)::before {
  background-image: linear-gradient(
    90deg,
    var(--ec-color-ember-500),
    var(--ec-color-ember-500)
  );
}

.ec-steps__item:nth-child(3)::before {
  background-image: linear-gradient(
    90deg,
    var(--ec-color-ember-500),
    var(--ec-color-ember-700)
  );
}

.ec-steps__item:nth-child(4)::before {
  background-image: linear-gradient(
    90deg,
    var(--ec-color-ember-700),
    var(--ec-color-ember-900)
  );
}

/*
 * Der Schein in Flächenfarbe ist eine Aussparung, keine Kontur: er schneidet
 * den Knoten aus der Linie heraus, statt ihn zu umranden. Auf der creme
 * Fläche wäre er falsch — der Abschnitt steht fest auf --ec-color-surface.
 */
.ec-steps__item::after {
  content: "";
  position: absolute;
  top: calc((var(--ec-border-width-thick) - var(--ec-space-xs)) / 2);
  left: 0;
  width: var(--ec-space-xs);
  height: var(--ec-space-xs);
  border-radius: var(--ec-radius-pill);
  background-color: var(--ec-color-ember-300);
  box-shadow: 0 0 0 var(--ec-space-3xs) var(--ec-color-surface);
}

.ec-steps__item:nth-child(2)::after {
  background-color: var(--ec-color-ember-500);
}

.ec-steps__item:nth-child(3)::after {
  background-color: var(--ec-color-ember-700);
}

.ec-steps__item:nth-child(4)::after {
  background-color: var(--ec-color-ember-900);
}

/* --------------------------------------------------------------- Textkörper */

/* Die Ordnung trägt die <ol>. Diese Marke wiederholt sie nur sichtbar und ist
   deshalb aria-hidden — vorgelesen wäre sie eine zweite, konkurrierende
   Zählung. */
.ec-steps__label {
  display: block;
  margin-bottom: var(--ec-space-3xs);
  color: var(--ec-color-primary);
  font-family: var(--ec-font-heading);
  font-size: var(--ec-fs-small);
  font-weight: var(--ec-fw-bold);
  letter-spacing: var(--ec-tracking-wide);
}

.ec-steps__name {
  margin: 0 0 var(--ec-space-2xs);
  color: var(--ec-color-ink);
  font-size: var(--ec-fs-h3);
  font-weight: var(--ec-fw-bold);
}

.ec-steps__text {
  max-width: none;
  margin: 0;
  color: var(--ec-color-ink-muted);
  font-size: var(--ec-fs-body);
  line-height: var(--ec-lh-base);
  text-wrap: pretty;
}

/* ------------------------------------------------------ Einblenden (R5) */

/*
 * Wie bei den Schwerpunktkarten hängt der Startzustand an .ec-js: ohne
 * JavaScript hebt ihn niemand wieder auf, und der Schritt bliebe unsichtbar.
 * Die Animation steht mit fill-mode `both` angehalten auf ihrem ersten Bild,
 * bis reveal.js die Gruppe freigibt.
 *
 * Die Stellung im Raster kommt aus dem Markup (--ec-steps-index). Die Vorgabe
 * im var() hält den Wert definiert, falls das Attribut fehlt, und sagt dem
 * Token-Linter, dass er absichtlich nicht in tokens.css steht.
 */
.ec-js [data-reveal] .ec-steps__item {
  animation: ec-steps-reveal var(--ec-duration-slow) var(--ec-ease) both paused;
  animation-delay: calc(var(--ec-steps-index, 0) * var(--ec-reveal-step));
}

/* Die Linie zieht sich selbst — deshalb eine eigene, längere Bewegung statt
   des blossen Einblendens des Schritts. */
.ec-js [data-reveal] .ec-steps__item::before {
  animation: ec-steps-draw var(--ec-duration-draw) var(--ec-ease) both paused;
  animation-delay: calc(var(--ec-steps-index, 0) * var(--ec-reveal-step));
}

.ec-js [data-reveal][data-revealed] .ec-steps__item,
.ec-js [data-reveal][data-revealed] .ec-steps__item::before {
  animation-play-state: running;
}

@keyframes ec-steps-reveal {
  from {
    transform: translateY(var(--ec-reveal-offset));
    opacity: 0;
  }
}

@keyframes ec-steps-draw {
  from {
    transform: scaleX(0);
  }
}

/*
 * Bei reduzierter Bewegung wird die Animation entfernt und nicht auf 0 s
 * verkürzt: eine angehaltene Animation der Dauer 0 s steht weiterhin auf
 * ihrem ersten Bild — der Schritt wäre unsichtbar, die Linie eingezogen.
 */
@media (prefers-reduced-motion: reduce) {
  .ec-js [data-reveal] .ec-steps__item,
  .ec-js [data-reveal] .ec-steps__item::before {
    animation: none;
  }
}