/* Seite: Affiliate-Programm (/affiliate-programm/)
   Nur Klassen mit Präfix af-, Mobile first, Breakpoints wie style.css (480/640/768/1024/1200).
   Baut auf den Komponenten aus style.css auf (.page-hero, .hero-media__blob, .section-head, .checklist,
   .stats, .stars, .steps, .faq, .final-cta). Aufbau nach dem Vorbild hellofresh.de/about/affiliate-kontakt (Andrea Tissen, 2026-10-28). */

/* ---------- Seitenkopf: Geräte-Bild auf Verlaufsform, ohne schwebende Karten (Andrea Tissen, 2026-10-28: beide „entfernen“) ---------- */

.af-hero .btn .icon { width: .85em; height: .85em; }
.af-hero-media { position: relative; isolation: isolate; width: min(100%, 600px); margin-inline: auto; padding: 1.5rem 0; }
.af-hero-media__blob { z-index: -1; inset: 8% 10% 4%; }
.af-hero-media__img { position: relative; display: block; width: 100%; height: auto; }

/* ---------- Was ist infra-struktur? Text links, Kennzahlen rechts ---------- */

.af-about { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
.af-about .section-head { margin-bottom: 0; }
.af-about__more { margin-top: 1.75rem; }
.af-about__more .icon { width: .85em; height: .85em; margin-left: .4em; vertical-align: -.05em; }
.stats.af-stats { grid-template-columns: 1fr; margin: 0; }
.af-stats .stars { display: block; margin: .6rem auto 0; }
.af-stats .stat__label { max-width: 20rem; margin-inline: auto; text-wrap: balance; }
.af-stats .stat__label a { color: inherit; text-decoration: underline; text-decoration-color: rgba(0, 73, 148, .35); text-underline-offset: 3px; }
.af-stats .stat__label a:hover { color: var(--primary); text-decoration-color: currentColor; }

/* ---------- Vorteile: eine Hervorhebung über die ganze Breite, darunter drei Kacheln ---------- */

.af-benefits { display: grid; gap: 1rem; }
.af-benefit {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 1.1rem; align-items: start;
  padding: 1.4rem 1.5rem;
  border-radius: var(--radius); background: var(--tile); box-shadow: var(--shadow-s);
}
.af-benefit__icon {
  grid-row: span 2;
  display: grid; place-items: center; width: 48px; height: 48px;
  border-radius: 50%; background: var(--gradient); color: var(--white);
}
.af-benefit__icon .icon { width: 20px; height: 20px; }
.af-benefit h3 { font-size: 1.1875rem; line-height: 1.3; text-wrap: balance; }
.af-benefit p { margin-top: .35rem; color: var(--muted); font-size: 1rem; text-wrap: pretty; }
.af-benefit--wide { grid-column: 1 / -1; grid-template-rows: auto auto; align-content: center; background: var(--gradient); }
.af-benefit--wide .af-benefit__icon { background: rgba(255, 255, 255, .18); }
.af-benefit--wide h3 { color: var(--white); }
.af-benefit--wide p { color: rgba(255, 255, 255, .92); }

/* ---------- Abschluss: Fragen per E-Mail und Telefon ---------- */

.af-cta .btn .icon { width: .85em; height: .85em; }

@media (min-width: 640px) {
  .stats.af-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .af-benefits { gap: 1.25rem; }
  .af-benefit { padding: 1.5rem 1.75rem; }
}
@media (min-width: 1024px) {
  .af-about { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 4rem; }
  .stats.af-stats { grid-template-columns: 1fr; }
  .af-benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .af-benefit { display: block; padding: 1.75rem; }
  .af-benefit__icon { margin-bottom: 1rem; }
  .af-benefit--wide { display: grid; padding: 1.6rem 1.75rem; }
  .af-benefit--wide .af-benefit__icon { margin-bottom: 0; }
}