/* seelig-core / benefits (modular, selbsttragend).
   EINE Markup-Basis, zwei Layout-Varianten (.benefits--nebeneinander|--untereinander).
   Kunden-Look ausschliesslich ueber die --benefit-*-Tokens (Farben/Ecken/Abstaende).
   Beispiel Projekt-CSS (nach dieser Datei geladen):
     .benefits--nebeneinander { --benefit-surface:#f5f5f2; --benefit-shadow:0 2px 10px rgba(0,0,0,.1); --benefit-accent:var(--brand); } */
.benefits, .benefit { box-sizing: border-box; }

.benefits {
  --benefit-gap: 24px;
  --benefit-pad: 20px;
  --benefit-radius: 8px;
  --benefit-surface: transparent;   /* Kachel-Hintergrund (Karten-Optik = setzen) */
  --benefit-icon-bg: transparent;   /* Flaeche hinter dem Icon */
  --benefit-icon-size: 64px;
  --benefit-accent: var(--brand, currentColor);  /* Link-Unterstrich */
  --benefit-shadow: none;

  display: grid;
  /* min(…, 100%) deckelt die Spalte auf den verfuegbaren Platz — der Block kann auch in
     einer schmalen Layout-Spalte stehen, wo 220px allein ueberlaufen wuerden. */
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--benefit-gap);
  margin-block: var(--gap-50, 50px);
}
.benefit {
  padding: var(--benefit-pad);
  background: var(--benefit-surface);
  border-radius: var(--benefit-radius);
  box-shadow: var(--benefit-shadow);
}
.benefit-icon {
  width: var(--benefit-icon-size);
  height: var(--benefit-icon-size);
  object-fit: contain;
  background: var(--benefit-icon-bg);
}
/* Lange Komposita ("Renovierungsarbeiten", "Haushaltsaufloesung") sind breiter als eine
   schmale Kachel und ragen sonst als Text aus ihr heraus — das Element selbst bleibt dabei
   in Form, im Screenshot sieht es nach einem abgeschnittenen Wort aus (gemessen 2026-08-24:
   227px Wort in 148px Kachel). `hyphens: auto` trennt sauber (das Dokument braucht dafuer
   ein `lang`), `overflow-wrap` ist das Netz, wo keine Trennstelle passt. */
.benefit-headline {
  margin: 12px 0 4px;
  hyphens: auto;
  overflow-wrap: break-word;
}
.benefit-subline  { margin: 0; opacity: .7; hyphens: auto; overflow-wrap: break-word; }

/* Variante: nebeneinander (Icon links) */
.benefits--nebeneinander .benefit {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  text-align: left;
}
.benefits--nebeneinander .benefit-icon { flex-shrink: 0; }

/* Variante: untereinander (Icon oben, zentriert).
   MOBIL-FIRST: die Basis sind zwei Spalten, ein einzelnes Item bleibt immer voll breit.
   Die Spaltenzahl nach Item-Anzahl steht darunter in min-width-Queries — und das ist keine
   Stilfrage, sondern der Fix eines Overflows (gemessen 2026-08-24, engelsburg /standorte/bochum):
   eine Media-Query erhoeht die Spezifitaet NICHT, `:has(.benefit:nth-child(4))` bringt aber
   0,3,0 mit (`:has(… :last-child)` sogar 0,4,0) und schlug damit jede max-width-Regel darunter.
   Auf dem Telefon standen die vier 200px-Spalten deshalb weiter nebeneinander: Grid 872px breit
   in einem 288px-Container, drei von vier Kacheln samt Icon rechts abgeschnitten.
   Zweite Haelfte des Fixes: `minmax(0, …)` statt `minmax(250px, …)`. In einem Grid mit FESTER
   Spaltenzahl kann eine Mindestbreite nichts retten — sie erzwingt nur den Ueberlauf, sobald
   der Container schmaler ist als Spaltenzahl x Mindestbreite (drei 250er brauchen schon 798px,
   mehr als eine 769px breite Seite hergibt). Die Obergrenze haelt die Kacheln trotzdem in Form. */
.benefits--untereinander .benefit { text-align: center; text-wrap: balance; }
.benefits--untereinander .benefit-icon { display: block; margin: 0 auto 1rem; }
.benefits--untereinander { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.benefits--untereinander:has(.benefit:first-child:last-child) { grid-template-columns: minmax(0, 1fr); }
/* Zwei Spalten gelten bis zum schmalsten Geraet durch (Entscheid SLG 2026-08-24). Bis dahin
   fielen sie unter 480px auf eine Spalte, was vier Kacheln zu einer langen Scrollstrecke fuer
   sehr wenig Inhalt machte. Ein einzelnes Item bleibt ueber die Regel darueber voll breit. */

/* Link-Kachel: ganze Kachel klickbar, Akzent-Unterstrich an der Headline */
a.benefit { color: inherit; text-decoration: none; transition: box-shadow .3s ease; }
a.benefit .benefit-headline {
  text-decoration: underline;
  text-decoration-color: var(--benefit-accent);
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
}

/* Auf zwei Spalten ist eine Kachel auf dem Telefon nur noch rund 144px breit, und davon
   frisst der Innenabstand von 20px je Seite ueber ein Viertel. Deutsche Komposita werden dann
   an jeder zweiten Silbe getrennt (gemessen: alle vier Kacheln mit Trennstrich). Weniger
   Innenabstand gibt der Zeile die Breite zurueck; der Grad der Headline bleibt Projektsache. */
@media (max-width: 600px) {
  .benefits--untereinander { --benefit-pad: 10px; }
}

/* Ab Tablet folgt die Spaltenzahl der Item-Anzahl (1-3 zentriert, ab 4 eine volle Reihe). */
@media (min-width: 769px) {
  .benefits--untereinander:has(.benefit:first-child:last-child)  { grid-template-columns: minmax(0, 600px); justify-content: center; }
  .benefits--untereinander:has(.benefit:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 400px)); justify-content: center; }
  .benefits--untereinander:has(.benefit:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 350px)); justify-content: center; }
  /* Vier Items bleiben hier bewusst 2x2: vier Kacheln brauchen rund 870px, eine 769px breite
     Seite hat im Raster keine 620px. Eine Reihe wird daraus erst in der naechsten Stufe. */
  .benefits--untereinander:has(.benefit:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .benefits--untereinander:has(.benefit:nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}