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

/* 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) {
  /* Flex statt Grid: letzte Reihe zentriert (Cap), volle Reihen füllen. */
  .services[data-variant="cards"] > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .services[data-variant="cards"] > div > article {
    flex: 1 1 18rem;
    max-width: var(--section-card-max);
  }
}

/* Die Karte ist eine FLEX-SPALTE, kein Grid — anders als die rows-Variante.
   Grund: Hier treffen zwei Anforderungen zusammen, die ein Grid mit festen Zeilen nicht
   gleichzeitig erfüllt.
     1. Der Text darf aus BELIEBIG VIELEN Absätzen bestehen (seit die Sections Markup
        annehmen). Bei `grid-template-areas` landen alle `<p>` in derselben Area und
        überlagern sich; bei automatischer Platzierung fällt das dritte Kind in die
        Icon-Spalte.
     2. Der Button soll am unteren Kartenrand sitzen, damit die Buttons nebeneinander
        stehender Karten auf einer Linie liegen — bei ungleich langen Texten sonst Stufen.
   Als Flex-Spalte ist beides trivial: Absätze stapeln sich, `margin-block-start: auto`
   am Button schiebt ihn ans Ende. Die Nummer sitzt absolut in der freigehaltenen Spalte.

   Im Browser gemessen (drei Karten, ungleiche Textlängen, eine davon mit zwei Absätzen):
   Buttons bündig, kein Loch zwischen Titel und Text, zweiter Absatz in der Textspalte. */
.services[data-variant="cards"] article {
  display: flex;
  flex-direction: column;
  position: relative;
  padding-inline-start: calc(var(--section-icon-col) + var(--gap-inline));
}

.services[data-variant="cards"] article::before {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: var(--gap-block);   /* auf Höhe des Karten-Innenabstands */
}

/* Der Absatz bringt den Abstand mit, nicht der Button: Dessen margin-block-start ist für
   die Ausrichtung am Kartenboden reserviert (s. u.). */
.services[data-variant="cards"] article p {
  margin-block-end: var(--gap-inline);
}

/* ⚠ `:last-child`, NICHT `:last-of-type`: Folgt ein Button, ist der Absatz nicht das
   letzte Kind und behält seinen Abstand — der ist zugleich der MINDESTabstand zum Button.
   Bei der längsten Karte einer Reihe bleibt nämlich keine überschüssige Höhe übrig, dort
   ist `margin-block-start: auto` am Button gleich null; ohne den Absatz-Abstand klebt er
   dann am letzten Wort. (Genau so gemeldet, nachdem wir hier `:last-of-type` hatten.) */
.services[data-variant="cards"] article p:last-child {
  margin-block-end: 0;
}

/* Button ans untere Ende: `auto` frisst die überschüssige Höhe der Karte. Der
   Mindestabstand zum Text steht darüber am Absatz. */
.services[data-variant="cards"] article .btn {
  margin-block-start: auto;
}

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