/* Benefits */

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

@media (min-width: 45rem) {
  /* Flex statt Grid: volle Reihen füllen (Cards wachsen bis Cap), eine allein
     stehende Card in der letzten Reihe wird zentriert statt linksbündig. */
  .benefits > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gap-section);
  }
  .benefits > div > article {
    flex: 1 1 16rem;
    max-width: var(--section-card-max);
  }
}

/* Die Karte ist eine FLEX-SPALTE mit absolut gesetztem Icon — kein Grid.
   Zwei Gründe, beide im Browser nachgemessen:
     1. Der Text kann aus mehreren <p> bestehen (seit die Sections Markup annehmen). Im
        Zwei-Spalten-Grid spannte das Icon zwei Zeilen, und das dritte Kind landete per
        Auto-Placement in Zeile 3 / SPALTE 1 — also unter dem Icon in einer 2,25rem
        schmalen Spalte, wo der Text Buchstabe für Buchstabe untereinander stand.
     2. Das Icon (40px) ist höher als die Titelzeile und dehnte sie: Bei kurzen Karten
        klaffte dadurch eine Lücke zwischen Titel und Text — gemessen 22px gegenüber 4px
        bei längeren Karten. Aus dem Fluss genommen, kann es nichts mehr dehnen.
   Dasselbe Muster nutzt die cards-Variante von services. */
.benefits article {
  display: flex;
  flex-direction: column;
  position: relative;
  padding-inline-start: calc(var(--section-icon-col) + var(--gap-inline));
}

.benefits article > svg {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  color: var(--color-primary);
  transition: transform var(--transition);
}

/* Absätze bringen ihren Abstand aus 02-base.css mit (margin-block-end). Der letzte
   bekommt ihn abgenommen, damit unten nichts nachhängt — ein zusätzliches
   margin-block-start hier würde den Abstand verdoppeln (gemessen: 32 statt 16px). */
.benefits article p:last-child {
  margin-block-end: 0;
}

.benefits article:hover > svg {
  transform: scale(1.08);
}

.benefits article:hover h3 {
  color: var(--color-primary);
}

.benefits article h3 {
  font-size: var(--text-base);
  font-family: var(--font-body), sans-serif;
  font-weight: 600;
  margin-block-end: var(--space-1);
  transition: color var(--transition-slow);
}

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

/* Trennlinie auch im Karten-Modus — wie bei services, wo sie schon immer an der
   Eintrags-Basis hängt. Sichtbarster Nutzen auf schmalen Bildschirmen: Dort stehen die
   Karten untereinander, und ohne Linie läuft eine Aufzählung ohne erkennbare Grenzen
   durch. Nebeneinander (ab 45rem) sind die Karten durch den Flex-Stretch gleich hoch,
   die Linien liegen also auf einer Höhe. */
.benefits[data-variant="cards"] article {
  padding-block-end: var(--gap-block);
  border-bottom: 0.0625rem solid var(--color-border);
}

/* --- Variante `rows` (data-variant="rows") ---------------------------------------
   Gestapelte Reihen über die volle Breite statt Karten nebeneinander — dasselbe
   Schalter-Muster wie bei services und process. Der Aufbau der einzelnen Reihe
   (Icon links, Titel/Text rechts) ist bereits der Karten-Aufbau oben, deshalb
   braucht es hier nur das Umschalten der äußeren Anordnung.

   Wichtig: Die Regeln müssen die Flex-Regeln aus der 45rem-Media-Query schlagen,
   die weiter oben stehen — gleiche Spezifität gewinnt die spätere Regel, und
   [data-variant] hebt sie zusätzlich an. */
.benefits[data-variant="rows"] > div {
  display: flex;
  flex-direction: column;
  /* ⚠ Muss sein: Die Karten-Regel in der 45rem-Media-Query setzt `gap: var(--gap-section)`.
     Ohne Rücknahme addiert sich der zum Innenabstand der Zeilen — die Einträge stehen weit
     auseinander und die Trennlinie klebt am Text statt mittig zwischen zwei Einträgen zu
     sitzen. Den Abstand macht hier allein das padding-block der Zeile. */
  gap: 0;
}

/* Rhythmus wie bei services/process: Der Abstand kommt aus dem Innenabstand der Zeile,
   nicht aus einem `gap` — nur so sitzt die Trennlinie mittig zwischen zwei Einträgen
   statt direkt unter dem Text. Beides zusammen ergäbe doppelten Abstand, deshalb hat
   der Container hier keinen. */
.benefits[data-variant="rows"] article {
  padding-block: var(--gap-block);
  border-bottom: 0.0625rem solid var(--color-border);
}

/* Erste Zeile ohne Vorlauf: Der Section-Header bringt seinen Abstand schon mit. */
.benefits[data-variant="rows"] article:first-child {
  padding-block-start: 0;
}

/* Kein Karten-Cap: In der Zeilen-Variante darf die Reihe die volle Breite nutzen,
   sonst bliebe rechts ein toter Rand. Die Icon-Spalte schrumpft mit dem kleineren
   Icon (28px statt 40px, s. Section\Benefits) — sonst klafft eine Lücke zwischen
   Symbol und Text. */
.benefits[data-variant="rows"] > div > article {
  max-width: none;
  flex: initial;
  /* Schmalere Icon-Spalte (28px-Icon statt 40px, s. Section\Benefits). */
  padding-inline-start: calc(2.25rem + var(--gap-inline));
}

/* Das Icon sitzt absolut — in den Zeilen muss es um den Innenabstand nach unten,
   sonst klebt es an der Trennlinie der vorigen Zeile statt neben der Überschrift. */
.benefits[data-variant="rows"] article > svg {
  inset-block-start: var(--gap-block);
}

.benefits[data-variant="rows"] article:first-child > svg {
  inset-block-start: 0;
}

/* Zeilenlänge begrenzen: Im Raster hält die Kartenbreite den Umbruch kurz, über die
   volle Seitenbreite liefen die Zeilen sonst zu lang zum Lesen. 46rem ist dieselbe
   Grenze wie bei der Section-Unterzeile (00-base.css). */
.benefits[data-variant="rows"] article h3,
.benefits[data-variant="rows"] article p {
  max-width: 46rem;
}

/* Die LISTE auf dieselbe Achse wie den Section-Kopf.
   Der Text ist auf 46rem begrenzt, die Liste lief aber über die volle Breite und begann
   links — auf einem breiten Monitor stand der Inhalt dadurch in der linken Hälfte, während
   der zentrierte Kopf darüber mittig saß. Zwei Achsen auf einer Seite.
   Die Breite ist die Summe dessen, was eine Zeile wirklich braucht: Textspalte + Icon-Spalte
   + Abstand dazwischen. So bleibt der Umbruch exakt wie bisher, nur der Block sitzt mittig. */
.benefits[data-variant="rows"] > div {
  max-width: calc(46rem + 2.25rem + var(--gap-inline));
  margin-inline: auto;
  /* Volle Breite bleibt volle Breite, wenn der Bildschirm schmaler ist als die Rechnung. */
  width: 100%;
}

/* Ab Desktop begrenzt allein der CONTAINER die Zeilenlänge, nicht mehr zusätzlich der Text.
   Zwei Begrenzungen übereinander (Container 46rem + Text 46rem) ließen den Block schmaler
   wirken, als der Platz hergibt; die Liste stand dann als schmale Spalte in einer breiten
   Seite. `min(80%, 58rem)` gibt ihr etwas mehr Raum, hält die Zeilen aber weiterhin unter
   der Lesbarkeitsgrenze — und wächst auf schmalen Desktops mit statt fix zu bleiben.
   Aus dem Projekt Schwabengold übernommen (dort erprobt), Breakpoint = Desktop-Grenze
   aus BREAKPOINTS.md. */
@media (min-width: 79.5rem) {
  .benefits[data-variant="rows"] > div {
    max-width: min(80%, 58rem);
  }

  .benefits[data-variant="rows"] article h3,
  .benefits[data-variant="rows"] article p {
    max-width: none;
  }
}