/* 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(--ci); } */
.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;
  grid-template-columns: repeat(auto-fit, minmax(220px, 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);
}
.benefit-headline { margin: 12px 0 4px; }
.benefit-subline  { margin: 0; opacity: .7; }

/* 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) + Auto-Count bei 1-3 Items */
.benefits--untereinander .benefit { text-align: center; text-wrap: balance; }
.benefits--untereinander .benefit-icon { display: block; margin: 0 auto 1rem; }
.benefits--untereinander:has(.benefit:first-child:last-child)  { grid-template-columns: minmax(250px, 600px); justify-content: center; }
.benefits--untereinander:has(.benefit:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(250px, 400px)); justify-content: center; }
.benefits--untereinander:has(.benefit:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(250px, 350px)); justify-content: center; }
.benefits--untereinander:has(.benefit:nth-child(4)) { grid-template-columns: repeat(4, minmax(200px, 1fr)); }

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

@media (max-width: 768px) {
  .benefits--untereinander { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .benefits--untereinander { grid-template-columns: 1fr; }
}