/* Services */

.services > div {
  display: grid;
  gap: var(--gap-block);
  grid-template-columns: 1fr;
  counter-reset: services;
}

@media (min-width: 45rem) {
  .services > div {
    /* auto-fit statt fester 2 Spalten: trägt beliebig viele Services,
       Spaltenzahl ergibt sich aus Breite (kein ragged-Rest bei ungerader Zahl). */
    grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  }
}

.services article {
  counter-increment: services;
  /* Grid statt Flex: Nummer in eigene Spalte links, h3 + p stapeln rechts
     untereinander in Zeile 1 + 2. Mit Flex wären h3 und p getrennte
     row-items neben der Nummer (3 Spalten) → unausgeglichene Optik. */
  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);
}

/* Dekorative Nummer (01, 02, …) als CSS-counter — nicht im DOM,
   kein a11y-Kontrast-Check, kein Screen-Reader-Noise. */
.services article::before {
  content: counter(services, 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 Card-Hover faerben sich Nummer UND Titel sanft in die Markenfarbe. */
.services article:hover::before,
.services article:hover h3 {
  color: var(--color-primary);
}

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

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

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