/* ============================================================
   SCHLAFMEDIZIN – echtes Tablet- und Mobil-Layout
   ------------------------------------------------------------
   Die Sektionen "Wir helfen bei", "Warum guter Schlaf",
   "Schlafstörungen" und "Schlafqualität" waren feste Grafik-
   platten: Hintergrundbild mit Seitenverhältnis, alle Texte
   absolut positioniert in calc(var(--u)*N). Unterhalb von
   1200 px wurde dadurch alles mitskaliert statt umgebrochen.

   Ab hier: echtes Grid, Fließtext, automatische Höhen,
   Bilder als <img> mit width:100 % / height:auto.
   Kein zoom, kein transform:scale(), keine negativen Ränder,
   keine festen Desktop-Breiten.

   ≥1200 px  Desktop – unverändert
   768–1199  Tablet, Innenabstand 24–32 px
   ≤767      Mobil, Innenabstand 16–20 px
   ============================================================ */

/* ============================================================
   1 · DESKTOP UNVERÄNDERT
   Die neuen Wrapper (.rw-card, .rw-cta) erzeugen dort keine
   Box, die Kinder bleiben absolut positioniert wie zuvor.
   Die neuen Fotos sind nur im Fluss-Layout sichtbar.
   ============================================================ */
.rw-photo{display:none;}
@media (min-width:1200px){
  .sl2 .rw-card, .sl3 .rw-card, .sl4 .rw-card,
  .sl4 .rw-cta, .sl4 .rw-cta-tx{
    display:contents;position:static;
  }
  .sl2 .rw-card > *, .sl3 .rw-card > *, .sl4 .rw-card > *,
  .sl4 .rw-cta > *, .sl4 .rw-cta-tx > *{
    position:absolute;margin:0;
  }
}

/* ============================================================
   2 · GEMEINSAME GRUNDLAGE FÜR TABLET UND MOBIL
   ============================================================ */
@media (max-width:1199.98px){

  /* ---- Sektionen aus der Grafikplatte lösen ---- */
  html body .helfen,
  html body .sl2,
  html body .sl3,
  html body .sl4{
    position:relative;
    width:100% !important;max-width:100%;
    height:auto !important;min-height:0 !important;
    aspect-ratio:auto !important;
    background-image:none !important;
    overflow:visible;
    /* neutralisiert alle verbliebenen calc(var(--u)*N)-Größen:
       aus Design-Pixeln werden echte Pixel statt Bruchteile   */
    --u:1px;
    display:grid;
    box-sizing:border-box;
    padding:clamp(30px,4vw,48px) 28px clamp(34px,4.4vw,54px);
  }
  html body .helfen > *,
  html body .sl2 > *,
  html body .sl3 > *,
  html body .sl4 > *{
    position:static !important;
    left:auto !important;right:auto !important;top:auto !important;bottom:auto !important;
    transform:none !important;
    width:auto !important;max-width:100%;
    white-space:normal !important;
    margin:0;
  }
  .sl2-wrap, .sl3-wrap, .sl4-wrap{width:100%;overflow:hidden;}

  /* Rechtliche Links im Fußbereich – nur auf dieser Seite */
  html body .kfr-bottom a{font-size:15px !important;}

  /* ---- Fotos: echte, flüssige Bilder ---- */
  .rw-photo{
    display:block;
    width:100%;max-width:100%;height:auto;
    aspect-ratio:16 / 7;            /* Bildband, Höhe folgt der Breite */
    object-fit:cover;
    border-radius:clamp(14px,1.8vw,22px);
    grid-column:1 / -1;
  }
  .sl2 .rw-photo{object-position:center 50%;}
  .sl3 .rw-photo{object-position:center 42%;}
  .sl4 .rw-photo{object-position:center 46%;}

  /* ---- Karten ---- */
  .sl2 .rw-card, .sl3 .rw-card, .sl4 .rw-card{
    display:flex;flex-direction:column;align-items:center;
    height:auto;min-width:0;
    text-align:center;
    gap:10px;
    padding:clamp(18px,2.2vw,24px) clamp(14px,1.8vw,20px);
    background:#FCFBF7;
    border:1px solid rgba(120,140,120,.16);
    border-radius:clamp(14px,1.6vw,18px);
    box-shadow:0 10px 26px -20px rgba(52,67,58,.40);
  }
  .sl2 .rw-card > *, .sl3 .rw-card > *, .sl4 .rw-card > *{
    position:static !important;
    left:auto !important;top:auto !important;transform:none !important;
    width:auto !important;max-width:100%;
    white-space:normal !important;
    text-align:center;
  }
  /* Icons in den Karten – jetzt trägt die Karte den Platz,
     also die zugesagten 70 px (Tablet) bzw. 60 px (Mobil) */
  .sl2 .rw-card .benefit-icon,
  .sl3 .rw-card .benefit-icon,
  .sl4 .rw-card .benefit-icon{
    opacity:1 !important;animation:none !important;flex:none;
    width:70px !important;height:70px !important;
  }

  /* ============================================================
     WIR HELFEN BEI
     Die fünf Icons steckten in der Grafik – jetzt echte Bilder
     als background-image über dem jeweiligen Titel.
     ============================================================ */
  html body .helfen{
    background-color:#F6F3EC;
    grid-template-columns:repeat(3,minmax(0,1fr));
    column-gap:clamp(16px,2.2vw,26px);
    row-gap:0;
    justify-items:center;
  }
  html body .helfen .hf-title{
    grid-column:1 / -1;grid-row:1;
    font-size:clamp(15px,1.7vw,16px) !important;
    letter-spacing:3px !important;
    text-align:center;
    margin-bottom:clamp(22px,3vw,34px);
  }
  html body .helfen .hf-t{
    font-size:clamp(16px,2vw,18px) !important;
    line-height:1.3 !important;text-align:center;
    padding-top:clamp(64px,9vw,86px);
    background-repeat:no-repeat;
    background-position:center top;
    background-size:clamp(52px,7vw,70px) auto;
    margin-bottom:6px;
  }
  html body .helfen .hf-b{
    font-size:15px !important;line-height:1.6 !important;
    text-align:center;margin-bottom:clamp(24px,3.2vw,32px);
    max-width:34ch;
  }
  .helfen .hf-t.hx-1{background-image:url("../img/hf-ico-schlafapnoe.webp");}
  .helfen .hf-t.hx-2{background-image:url("../img/hf-ico-schnarchen.webp");}
  .helfen .hf-t.hx-3{background-image:url("../img/hf-ico-insomnie.webp");}
  .helfen .hf-t.hx-4{background-image:url("../img/hf-ico-rls.webp");}
  .helfen .hf-t.hx-5{background-image:url("../img/hf-ico-tagesmuedigkeit.webp");}
  /* 3 + 2 – jede Beschwerde belegt zwei Zeilen (Titel, Text) */
  .helfen .hf-t.hx-1{grid-column:1;grid-row:2;}
  .helfen .hf-b.hx-1{grid-column:1;grid-row:3;}
  .helfen .hf-t.hx-2{grid-column:2;grid-row:2;}
  .helfen .hf-b.hx-2{grid-column:2;grid-row:3;}
  .helfen .hf-t.hx-3{grid-column:3;grid-row:2;}
  .helfen .hf-b.hx-3{grid-column:3;grid-row:3;}
  .helfen .hf-t.hx-4{grid-column:1;grid-row:4;}
  .helfen .hf-b.hx-4{grid-column:1;grid-row:5;}
  .helfen .hf-t.hx-5{grid-column:2;grid-row:4;}
  .helfen .hf-b.hx-5{grid-column:2;grid-row:5;}

  /* ============================================================
     WARUM GUTER SCHLAF SO WICHTIG IST
     ============================================================ */
  html body .sl2{
    background-color:#F4F1EA;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:clamp(16px,2.2vw,24px);
  }
  .sl2 .rw-photo{margin-bottom:clamp(8px,1.4vw,16px);}
  html body .sl2 .sl2-heading{
    grid-column:1 / -1;
    font-size:clamp(28px,4.4vw,44px) !important;line-height:1.15 !important;
  }
  html body .sl2 .sl2-lead{
    grid-column:1 / -1;
    font-size:clamp(16px,2.1vw,20px) !important;
    margin-top:clamp(10px,1.4vw,16px);
  }
  html body .sl2 .sl2-para{
    grid-column:1 / -1;
    font-size:16px !important;line-height:1.75 !important;
    margin:clamp(10px,1.4vw,16px) 0 clamp(10px,1.6vw,18px);
    max-width:70ch;
  }
  html body .sl2 .sl2-para br,
  html body .sl2 .sl2-lead br{display:none;}
  html body .sl2 .sl2-t{
    font-size:clamp(18px,2.3vw,22px) !important;line-height:1.25 !important;
  }
  html body .sl2 .sl2-b{
    font-size:clamp(15px,1.55vw,17px) !important;line-height:1.65 !important;
  }

  /* ============================================================
     SCHLAFSTÖRUNGEN, DIE WIR BEHANDELN
     ============================================================ */
  html body .sl3{
    background-color:#F7F5EF;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:clamp(16px,2.2vw,24px);
  }
  .sl3 .rw-photo{margin-bottom:clamp(8px,1.4vw,16px);}
  html body .sl3 .sl3-heading{
    grid-column:1 / -1;
    font-size:clamp(30px,4.6vw,48px) !important;line-height:1.15 !important;
  }
  html body .sl3 .sl3-sub{
    grid-column:1 / -1;
    font-size:clamp(16px,2.1vw,20px) !important;
    margin:clamp(8px,1.2vw,14px) 0 clamp(8px,1.4vw,16px);
  }
  html body .sl3 .sl3-t{
    font-size:clamp(19px,2.4vw,24px) !important;line-height:1.2 !important;
  }
  html body .sl3 .sl3-b{
    font-size:clamp(15px,1.55vw,17px) !important;line-height:1.6 !important;
  }
  html body .sl3 .sl3-footer{
    grid-column:1 / -1;
    order:9;                     /* steht im Quelltext vor den Karten */
    font-size:clamp(15px,1.9vw,18px) !important;
    text-align:center;
    margin-top:clamp(14px,2vw,22px);
  }

  /* ============================================================
     WANN SOLLTEN SIE IHRE SCHLAFQUALITÄT UNTERSUCHEN LASSEN?
     Überschrift steht in einer eigenen Zeile über dem Foto und
     kann es dadurch nicht mehr überlagern.
     ============================================================ */
  html body .sl4{
    background-color:#FAF7F1;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:clamp(16px,2.2vw,24px);
  }
  html body .sl4 .sl4-heading{
    grid-column:1 / -1;grid-row:1;
    font-size:clamp(28px,4.4vw,46px) !important;line-height:1.16 !important;
    margin-bottom:clamp(14px,2vw,22px);
  }
  .sl4 .rw-photo{grid-row:2;}
  html body .sl4 .sl4-sub{
    grid-column:1 / -1;grid-row:3;
    font-size:clamp(16px,2.1vw,20px) !important;line-height:1.6 !important;
    margin:clamp(12px,1.8vw,20px) 0 clamp(4px,1vw,10px);
  }
  html body .sl4 .sl4-t{
    font-size:clamp(18px,2.3vw,22px) !important;line-height:1.22 !important;
  }
  html body .sl4 .sl4-b{
    font-size:clamp(15px,1.55vw,17px) !important;line-height:1.6 !important;
  }
  /* Abschluss-Handlungsaufruf */
  html body .sl4 .rw-cta{
    grid-column:1 / -1;
    display:flex;flex-wrap:wrap;align-items:center;
    gap:clamp(14px,2vw,22px);
    height:auto;
    margin-top:clamp(20px,2.8vw,32px);
    padding:clamp(20px,2.6vw,30px) clamp(18px,2.4vw,28px);
    background:#F1EEE3;
    border:1px solid rgba(120,140,120,.18);
    border-radius:clamp(16px,2vw,22px);
  }
  html body .sl4 .rw-cta > *,
  html body .sl4 .rw-cta-tx > *{
    position:static !important;
    left:auto !important;top:auto !important;transform:none !important;
    white-space:normal !important;
  }
  html body .sl4 .rw-cta .benefit-icon--schlafdiagnose{
    width:clamp(56px,7vw,74px) !important;height:clamp(56px,7vw,74px) !important;
    flex:none;opacity:1 !important;animation:none !important;
  }
  html body .sl4 .rw-cta .benefit-icon--schlafdiagnose img{width:100%;height:auto;}
  html body .sl4 .rw-cta-tx{
    flex:1 1 260px;min-width:0;
    display:flex;flex-direction:column;gap:6px;
  }
  html body .sl4 .rw-cta .sl4-f1{
    font-size:clamp(17px,2.2vw,21px) !important;line-height:1.35 !important;
    font-weight:500;
  }
  html body .sl4 .rw-cta .sl4-f2{
    font-size:15px !important;line-height:1.6 !important;
  }
  html body .sl4 .rw-cta a.sl4-btn{
    flex:0 0 auto;
    display:inline-flex;align-items:center;justify-content:center;
    gap:10px;
    width:auto;max-width:100%;
    height:auto !important;min-height:52px;
    padding:14px 24px !important;
    border-radius:999px !important;
    font-size:14px !important;letter-spacing:1.6px !important;
    line-height:1.25;text-align:center;
  }
  html body .sl4 .rw-cta a.sl4-btn svg{width:19px !important;height:19px !important;flex:none;}

  /* Zeilenumbrüche aus dem Desktop-Layout stören im Fluss */
  html body .sl3 .sl3-b br,
  html body .sl4 .sl4-b br,
  html body .sl4 .sl4-sub br,
  html body .sl2 .sl2-b br{display:none;}
}

/* ============================================================
   3 · TABLET 768–1199 – Innenabstand 24–32 px
   ============================================================ */
@media (min-width:768px) and (max-width:1199.98px){
  html body .helfen,
  html body .sl2,
  html body .sl3,
  html body .sl4{padding-left:32px;padding-right:32px;}
  /* Schlafstörungen: 2 × 3 */
  html body .sl3{grid-template-columns:repeat(2,minmax(0,1fr));}
  /* Beschwerden: 2 × 3 */
  html body .sl4{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* ============================================================
   4 · MOBIL ≤767 – Innenabstand 16–20 px, eine Spalte
   ============================================================ */
@media (max-width:767.98px){
  html body .helfen,
  html body .sl2,
  html body .sl3,
  html body .sl4{
    padding-left:18px;padding-right:18px;
    padding-top:clamp(26px,6vw,34px);padding-bottom:clamp(30px,7vw,40px);
  }

  /* Wir helfen bei: zwei Spalten */
  html body .helfen{grid-template-columns:repeat(2,minmax(0,1fr));}
  .helfen .hf-t.hx-1{grid-column:1;grid-row:2;} .helfen .hf-b.hx-1{grid-column:1;grid-row:3;}
  .helfen .hf-t.hx-2{grid-column:2;grid-row:2;} .helfen .hf-b.hx-2{grid-column:2;grid-row:3;}
  .helfen .hf-t.hx-3{grid-column:1;grid-row:4;} .helfen .hf-b.hx-3{grid-column:1;grid-row:5;}
  .helfen .hf-t.hx-4{grid-column:2;grid-row:4;} .helfen .hf-b.hx-4{grid-column:2;grid-row:5;}
  .helfen .hf-t.hx-5{grid-column:1;grid-row:6;} .helfen .hf-b.hx-5{grid-column:1;grid-row:7;}

  /* Karten einspaltig */
  html body .sl2,
  html body .sl3,
  html body .sl4{grid-template-columns:minmax(0,1fr);}

  /* Karten als Zeile: Icon links, Text rechts – spart Höhe */
  html body .sl2 .rw-card,
  html body .sl3 .rw-card,
  html body .sl4 .rw-card{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;
    column-gap:16px;row-gap:4px;
    text-align:left;
    padding:16px 18px;
  }
  html body .sl2 .rw-card .benefit-icon,
  html body .sl3 .rw-card .benefit-icon,
  html body .sl4 .rw-card .benefit-icon{
    grid-row:1 / span 2;grid-column:1;
    width:60px !important;height:60px !important;
  }
  html body .sl2 .rw-card > *:not(.benefit-icon),
  html body .sl3 .rw-card > *:not(.benefit-icon),
  html body .sl4 .rw-card > *:not(.benefit-icon){
    grid-column:2;text-align:left;
  }

  /* Handlungsaufruf gestapelt, Button in voller Breite */
  html body .sl4 .rw-cta{
    flex-direction:column;align-items:flex-start;text-align:left;
    padding:20px 18px;
  }
  html body .sl4 .rw-cta-tx{flex:1 1 auto;width:100%;}
  html body .sl4 .rw-cta a.sl4-btn{
    width:100%;justify-content:center;
    padding:15px 18px !important;
  }
}

/* ============================================================
   5 · SEHR SCHMAL ≤379 – Beschwerden einspaltig
   ============================================================ */
@media (max-width:379.98px){
  html body .helfen{grid-template-columns:minmax(0,1fr);}
  .helfen .hf-t.hx-1{grid-row:2;} .helfen .hf-b.hx-1{grid-row:3;}
  .helfen .hf-t.hx-2{grid-row:4;} .helfen .hf-b.hx-2{grid-row:5;}
  .helfen .hf-t.hx-3{grid-row:6;} .helfen .hf-b.hx-3{grid-row:7;}
  .helfen .hf-t.hx-4{grid-row:8;} .helfen .hf-b.hx-4{grid-row:9;}
  .helfen .hf-t.hx-5{grid-row:10;} .helfen .hf-b.hx-5{grid-row:11;}
  .helfen .hf-t, .helfen .hf-b{grid-column:1 !important;}
  html body .helfen,
  html body .sl2,
  html body .sl3,
  html body .sl4{padding-left:16px;padding-right:16px;}
}