/* Diese Sektion lag zwischen zwei hellen Sektionen und war damit Teil des
   "alles weiss"-Eindrucks. Jetzt violett mit Punktraster: die vier
   Argumente werden zum Ruhepol in der Seitenmitte. */
body .wrapper .benefits { background-color: var(--osa-ink); background-image: var(--osa-dots); background-size: 22px 22px; }
/* Der Kopf traegt hier kein .section-head-light, Farben daher explizit */
body .wrapper .benefits .section-title { color: #FFFFFF; }
body .wrapper .benefits .section-lead { color: #C7C1E0; }

body .wrapper .benefits .benefit-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 36px; }
body .wrapper .benefits .benefit-item { text-align: left; }
/* Lime-Quadrat: das dunkle Icon im SVG bleibt so lesbar */
body .wrapper .benefits .benefit-icon { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; background-color: var(--osa-lime); margin-bottom: 18px; }
body .wrapper .benefits .benefit-title { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -0.3px; color: #FFFFFF; }
body .wrapper .benefits .benefit-text { margin: 12px 0 0; font-size: 15px; line-height: 1.65; color: #C7C1E0; }

@media (min-width: 600px) {
  body .wrapper .benefits .benefit-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }
}
@media (min-width: 1024px) {
  body .wrapper .benefits .benefit-grid { grid-template-columns: repeat(4, 1fr); gap: 32px; }
}