/* ============================================================
   SCHLAFMEDIZIN – HERO
   Behebt: erzwungene min-height + background-size:cover aus
   hero-layout.css / hero-height-fix.css. Dadurch wurde die
   Grafik hochskaliert, seitlich beschnitten und der nahtlose
   Übergang zur Sektion "Wir helfen bei" ging verloren.
   Jetzt: Hero folgt exakt der Bildproportion 1536 × 628.
   Kein transform:scale(), kein zoom.
   ============================================================ */

.hero .resp-only{display:none !important;}

/* Kein Schatten am Hero-Button */
html body .hero a.sl-btn{box-shadow:none !important;}

/* ---------- Desktop ≥1200px: Text liegt auf der Grafik ---------- */
@media (min-width:1200px){
  html body section.hero{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    aspect-ratio:1536 / 628 !important;
    background-size:100% 100% !important;   /* 1:1, nichts wird beschnitten */
    background-position:center top !important;
    padding:0 !important;
    overflow:hidden;
  }
  /* Inhalt etwas höher setzen, damit er in die Bildhöhe passt */
  html body .hero > .hero-content-container{
    padding-top:clamp(148px,11.6vw,190px) !important;
    padding-bottom:clamp(24px,2.5vw,40px) !important;
  }
}

/* ---------- Tablet + Mobile <1200px ----------
   Text steht im Fluss über der Grafik; die Grafik behält ihre
   Proportion, wird also weder beschnitten noch verzerrt – und der
   Anschluss an "Wir helfen bei" bleibt exakt erhalten.            */
@media (max-width:1199.98px){
  html body section.hero{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    aspect-ratio:auto !important;
    background-image:none !important;
    background-color:#F8F5F0 !important;
    display:flex !important;
    flex-direction:column;
    padding:0 !important;
    overflow:hidden !important;
  }

  html body .hero > .hero-content-container{
    position:static !important;
    order:1;
    width:100% !important;max-width:1100px !important;
    margin-inline:auto !important;
    padding:clamp(118px,15vw,168px) clamp(20px,4vw,44px) clamp(28px,4vw,40px) !important;
    zoom:1 !important;transform:none !important;
  }

  html body .hero .sl-rart{
    display:block !important;
    position:static !important;
    order:2;
    width:100% !important;height:auto !important;
    max-width:none !important;
  }

  /* Typografie im Textblock */
  html body .hero h1.sl-headline{
    font-size:clamp(32px,5.4vw,54px) !important;line-height:1.12 !important;
  }
  html body .hero .sl-sub{
    font-size:clamp(15px,2vw,19px) !important;line-height:1.7 !important;
    margin-top:clamp(16px,2.2vw,26px) !important;
  }
  html body .hero .sl-sub br{display:none !important;}
  html body .hero .sl-feats{
    display:flex !important;flex-wrap:wrap !important;
    gap:clamp(16px,3vw,44px) !important;
    margin-top:clamp(22px,3vw,32px) !important;
  }
  html body .hero .sl-feat{gap:12px !important;}
  html body .hero .sl-feat img{
    width:clamp(44px,5.6vw,58px) !important;height:clamp(44px,5.6vw,58px) !important;
    box-shadow:0 6px 14px rgba(29,53,38,.14) !important;
  }
  html body .hero .sl-feat b{font-size:clamp(13px,1.4vw,14px) !important;letter-spacing:1.5px !important;}
  html body .hero .sl-feat span{font-size:clamp(15px,1.7vw,16px) !important;}
  html body .hero a.sl-btn{
    margin-top:clamp(24px,3.2vw,34px) !important;
    width:fit-content !important;max-width:100% !important;
  }
}

/* Sehr schmale Phones: Button über die volle Breite */
@media (max-width:420px){
  html body .hero a.sl-btn{width:100% !important;}
}