/* Services
   Darstellungsvarianten via data-variant am <section>:
     cards (Default) — Karten nebeneinander (auto-fit-Grid)
     rows            — gestapelte Reihen, Button rechts
   Optionaler Button je Eintrag (.btn) in beiden Varianten. */

/* --- Gemeinsame Eintrags-Basis (beide Varianten) --- */
.services article {
  counter-increment: services;
  display: grid;
  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 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);
}

.services article .btn {
  grid-area: action;
  /* Button fuellt seine Zelle → in rows alle gleich breit (feste action-Spalte),
     in cards volle Breite der Inhaltsspalte. */
  width: 100%;
}

/* =========================================================================
   Variante: cards (Default) — Karten nebeneinander
   ========================================================================= */
.services[data-variant="cards"] > div {
  display: grid;
  gap: var(--gap-block);
  grid-template-columns: 1fr;
  counter-reset: services;
}

@media (min-width: 45rem) {
  .services[data-variant="cards"] > 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[data-variant="cards"] article {
  /* Nummer links, h3 + p (+ optionaler Button) stapeln rechts untereinander. */
  grid-template-columns: var(--section-icon-col) 1fr;
  grid-template-areas:
    "num title"
    "num text"
    "num action";
}

/* Button (falls vorhanden) volle Breite unter dem Text; leere action-Zeile kollabiert. */
.services[data-variant="cards"] article .btn {
  margin-block-start: var(--gap-inline);
}

/* 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[data-variant="cards"] > div {
    grid-template-columns: repeat(auto-fit, minmax(0, 18rem));
    justify-content: center;
  }
}

/* =========================================================================
   Variante: rows — gestapelte Reihen, Button rechts
   ========================================================================= */
.services[data-variant="rows"] > div {
  display: flex;
  flex-direction: column;
  counter-reset: services;
}

.services[data-variant="rows"] article {
  /* Feste Button-Spalte (statt auto) → alle Buttons gleich breit (width:100%). */
  grid-template-columns: var(--section-icon-col) 1fr 16rem;
  grid-template-areas:
    "num title action"
    "num text  action";
  column-gap: var(--gap-block);
}

/* Button rechts, vertikal zentriert über beide Zeilen (fuellt die action-Spalte).
   nowrap: Label (z.B. "MEHR ERFAHREN") bleibt einzeilig — die 16rem-Spalte bietet
   genug Platz; etwas knapperes Inline-Padding hilft bei laengeren Labels. */
.services[data-variant="rows"] article .btn {
  align-self: center;
  white-space: nowrap;
  padding-inline: var(--space-4);
}

/* Mobile: Button unter den Text klappen (kein Platz für die rechte Spalte). */
@media (max-width: 44.999rem) {
  .services[data-variant="rows"] article {
    grid-template-columns: var(--section-icon-col) 1fr;
    grid-template-areas:
      "num title"
      "num text"
      "num action";
  }
  .services[data-variant="rows"] article .btn {
    margin-block-start: var(--gap-inline);
  }
}