/* Process */

.process ol {
  list-style: none;
  counter-reset: process;
  display: grid;
  gap: var(--gap-block);
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
}

/* Basis = gestapelte 2-Spalten-Reihen (Nummer links, Title + Text rechts) —
   gilt auf Mobile fuer beide Varianten UND auf allen Viewports fuer variant 'rows'.
   variant 'cards' schaltet ab Tablet auf Number-on-top-Karten um (siehe unten). */
.process li {
  counter-increment: process;
  display: grid;
  grid-template-columns: var(--section-icon-col) 1fr;
  grid-template-areas:
    "num title"
    "num text";
  column-gap: var(--gap-inline);
  padding-block: var(--gap-block);
  border-bottom: 0.0625rem solid var(--color-border);
  /* ⚠ align-CONTENT, nicht align-items: Der Flex-Container zieht alle Karten auf die Höhe
     der höchsten. Die Karte ist ein Grid mit automatischen Zeilen; dessen Voreinstellung
     `stretch` verteilt die überschüssige Höhe GLEICHMÄSSIG auf die Zeilen — der Abstand
     zwischen Titel und Text wuchs also, und zwar je kürzer die Karte, desto mehr.
     `align-items` half nicht: das richtet den Inhalt INNERHALB einer Zeile aus, nicht die
     Zeilen selbst. Mit `start` sammelt sich der Überschuss unten, wo er nicht auffällt. */
  align-content: start;
}

/* Wie bei benefits: beliebig viele Textkinder gehören in Spalte 2. Mit den festen
   grid-template-areas oben landen mehrere <p> sonst alle in der `text`-Area und
   überlagern sich.
   `> *` trifft nur echte Kinder — die Nummer ist ein ::before und behält ihre eigene
   Zuweisung (`grid-area: num`). (`:not(::before)` wäre ungültig: Pseudo-Elemente sind
   in `:not()` nicht erlaubt, die Regel würde komplett verworfen.) */
.process li > * {
  grid-column: 2;
}

.process li::before {
  content: counter(process, decimal-leading-zero);
  grid-area: num;
  align-self: start;
  font-family: var(--font-heading), serif;
  font-size: var(--text-4xl);
  font-weight: 300;
  color: var(--color-border);
  line-height: 1;
  transition: color var(--transition-slow);
}

/* Bei Step-Hover faerben sich Nummer UND Titel sanft in die Markenfarbe. */
.process li:hover::before,
.process li:hover h3 {
  color: var(--color-primary);
}

.process li h3 {
  grid-area: title;
  font-size: var(--text-base);
  font-family: var(--font-body), sans-serif;
  font-weight: 600;
  margin-block-end: var(--space-2);
  transition: color var(--transition-slow);
}

/* ⚠ KEIN `grid-area: text` — der Text kann aus mehreren <p> bestehen (seit die Sections
   Markup annehmen), und eine feste Area legt sie alle in dieselbe Zeile: im Browser
   gemessen überlappten sie sich um 45px. `grid-column: 2` hält sie in der Textspalte,
   die Zeile bestimmt die automatische Platzierung — so stapeln sie sich untereinander. */
.process li p {
  grid-column: 2;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Absätze bringen ihren Abstand aus 02-base.css mit (margin-block-end). Der letzte
   bekommt ihn abgenommen, damit unten nichts nachhängt — ein zusätzliches
   margin-block-start hier würde den Abstand verdoppeln (gemessen: 32 statt 16px). */
.process li p:last-child {
  margin-block-end: 0;
}

/* variant 'cards' ab Tablet: Multi-Spalten-Karten mit Nummer-absolute-oben (das
   bestehende Default-Verhalten — auto-fit-Grid mit mehreren Schritten nebeneinander).
   'rows' bleibt gestapelt (Basis greift weiter). */
@media (min-width: 45rem) {
  /* Flex statt Grid: letzte Reihe zentriert (Cap), volle Reihen füllen. */
  .process[data-variant="cards"] ol {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .process[data-variant="cards"] ol > li {
    flex: 1 1 12rem;
    max-width: var(--section-card-max);
  }

  .process[data-variant="cards"] li {
    display: block;
    position: relative;
    padding-block: 0;
    padding-block-start: var(--space-8);
    border-bottom: none;
  }

  .process[data-variant="cards"] li::before {
    position: absolute;
    top: 0;
  }
}