/* 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);
}

.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);
}

.process li p {
  grid-area: text;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* 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) {
  .process[data-variant="cards"] ol {
    grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
  }

  .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;
  }
}

/* Tablet only (nur cards): Schritte nicht auf volle Breite strecken (Track gekappt
   statt 1fr), dafür die Spaltengruppe horizontal mittig. */
@media (min-width: 45rem) and (max-width: 79.499rem) {
  .process[data-variant="cards"] ol {
    grid-template-columns: repeat(auto-fit, minmax(0, 12rem));
    justify-content: center;
  }
}