/* ============================================================
   SCHLAFMEDIZIN – kleinere Kreis-Icons
   Betrifft nur diese drei Abschnitte dieser Seite:
     .sl2  „Warum guter Schlaf so wichtig ist"
     .sl3  „Schlafstörungen, die wir behandeln"
     .sl4  „Wann sollten Sie Ihre Schlafqualität untersuchen lassen?"
   Angeglichen an die kleineren Hero-Icons (Diagnosis / Treatment).
   Der Kreis im CTA-Band (.benefit-icon--schlafdiagnose) bleibt
   unverändert, ebenso alle anderen Abschnitte und Seiten.
   Nur Größen und Abstände ändern sich – Icons, Farben, Texte,
   Kartenmaße, Links und Positionen bleiben erhalten.
   ============================================================ */

/* ---------- Desktop: Kreis 80 px, Zeichnung 40 px ----------
   Ein gemeinsamer Wert für alle drei Abschnitte, damit die
   Kreise überall exakt gleich groß erscheinen. Die vw-Grenze
   sorgt dafür, dass die Kreise auf schmalen Fenstern mit den
   Karten mitskalieren und niemals in den Text laufen. */
.sl2 .benefit-icon,
.sl3 .benefit-icon:not(.benefit-icon--schlafdiagnose),
.sl4 .benefit-icon:not(.benefit-icon--schlafdiagnose){
  width:min(80px, 6.4vw);
  height:min(80px, 6.4vw);
}
/* Kreise bleiben exakt rund, auch wenn der Platz eng wird */
.sl2 .benefit-icon,
.sl3 .benefit-icon:not(.benefit-icon--schlafdiagnose),
.sl4 .benefit-icon:not(.benefit-icon--schlafdiagnose){
  flex:none;
  aspect-ratio:1 / 1;
  border-radius:50%;
  box-sizing:border-box;
  padding:0;
  display:flex;align-items:center;justify-content:center;
}
/* Zeichnung im Kreis: 50 % → 40 px auf dem Desktop */
.sl3 .benefit-icon:not(.benefit-icon--schlafdiagnose) img,
.sl4 .benefit-icon:not(.benefit-icon--schlafdiagnose) img{
  width:50%;height:50%;object-fit:contain;display:block;margin:0;
}
.sl2 .benefit-icon svg{
  width:50%;height:50%;display:block;margin:0;
}

/* ---------- Tablet: Kreis 70 px ---------- */
@media (max-width:1024px){
  .sl2 .benefit-icon,
  .sl3 .benefit-icon:not(.benefit-icon--schlafdiagnose),
  .sl4 .benefit-icon:not(.benefit-icon--schlafdiagnose){
    width:min(70px, 8.4vw);
    height:min(70px, 8.4vw);
  }
}

/* ---------- Mobil: Kreis 60 px ---------- */
@media (max-width:640px){
  .sl2 .benefit-icon,
  .sl3 .benefit-icon:not(.benefit-icon--schlafdiagnose),
  .sl4 .benefit-icon:not(.benefit-icon--schlafdiagnose){
    width:min(60px, 9.4vw);
    height:min(60px, 9.4vw);
  }
}