/* Process */

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

/* Mobile (Default): 2-Spalten-Layout pro Schritt analog Services — Nummer
   links, Title + Text rechts. Spart vertikalen Platz vs. Number-on-top. */
.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);
}

/* Desktop: zurück auf Multi-Spalten-Cards mit Nummer-absolute-oben (das
   bestehende Verhalten — passt zum auto-fit-Grid mit mehreren Schritten
   nebeneinander). */
@media (min-width: 45rem) {
  .process ol {
    grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
  }

  .process li {
    display: block;
    position: relative;
    padding-block: 0;
    padding-block-start: var(--space-8);
    border-bottom: none;
  }

  .process li::before {
    position: absolute;
    top: 0;
  }
}

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