/* ============================================================
   SCHLAFSCHULE – eigenständige Seite
   Vollständig responsiv von Beginn an: echte Grid/Flex-Layouts,
   height:auto, object-fit, clamp(). Kein transform:scale(),
   kein zoom, keine festen Desktop-Maße, keine --u-Pixelraster.
   Alle Regeln sind mit .ss-* gescopet und können keine anderen
   Seiten beeinflussen.
   Breakpoints: Desktop >1199 | Tablet 768–1199 | Mobil <768 | Klein <480
   ============================================================ */

/* Diese Datei wird ausschliesslich von schlafschule.html geladen. */
html,body{margin:0;padding:0;}
body{overflow-x:hidden;}

.ss-page{
  --ss-cream:#FAF7F3;
  --ss-cream2:#F5F2EC;
  --ss-card:#FDFCFA;
  --ss-green:#4E7654;
  --ss-dark:#2E4636;
  --ss-ink:#33452F;
  --ss-head:#3B5140;
  --ss-body:#5C6559;
  --ss-gold:#B08D3E;
  --ss-sage:#C3CEBA;
  --ss-sage-l:#DCE4D5;
  --ss-line:rgba(120,140,120,.18);
  --ss-shadow:0 18px 40px -28px rgba(46,70,54,.45);
  --ss-shadow-s:0 10px 26px -20px rgba(46,70,54,.42);
  background:var(--ss-cream);
  color:var(--ss-body);
  font-family:'Jost',sans-serif;
  overflow-x:hidden;
}

.ss-page *{box-sizing:border-box;}
.ss-page :where(figure,ul,ol,p,h1,h2,h3){margin:0;padding:0;}
.ss-page :where(ul,ol){list-style:none;}
.ss-page :where(img){max-width:100%;}

.ss-in{
  width:min(100% - 40px, 1180px);
  margin-inline:auto;
}

/* ---------- gemeinsame Typografie ---------- */
.ss-page .ss-eyebrow{
  display:block;
  font-family:'Jost',sans-serif;
  font-size:clamp(10px,.78vw,12px);
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ss-gold);
  margin:0;
}
html body .ss-page .ss-h2{
  font-family:'Cormorant Garamond',serif !important;
  font-weight:500 !important;
  font-style:normal;
  color:var(--ss-head) !important;
  line-height:1.16 !important;
  margin:clamp(10px,1.1vw,16px) 0 0 !important;
}
.ss-page .ss-lead{
  font-size:clamp(14px,1.02vw,17px);
  line-height:1.78;
  color:var(--ss-body);
  margin:clamp(12px,1.3vw,20px) 0 0;
}
.ss-head-c{text-align:center;}
.ss-head-c .ss-lead{margin-inline:auto;max-width:66ch;}

/* ---------- Buttons ---------- */
.ss-page .ss-b1,
.ss-page .ss-b2,
.ss-page .ss-b3{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:clamp(42px,3.2vw,52px);
  padding:clamp(11px,1vw,15px) clamp(20px,2vw,32px);
  border-radius:999px;
  font-family:'Jost',sans-serif;
  font-size:clamp(10.5px,.8vw,12.5px);
  font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;white-space:nowrap;
  box-shadow:none;border:1.5px solid transparent;
  transition:background .22s ease,color .22s ease,border-color .22s ease,transform .22s ease;
}
.ss-page .ss-b1{background:var(--ss-dark);color:#fff;}
.ss-page .ss-b1:hover{background:#22352a;transform:translateY(-1px);}
.ss-page .ss-b2{background:transparent;color:var(--ss-green);border-color:#B9C6B4;}
.ss-page .ss-b2:hover{background:#EFF2EA;border-color:var(--ss-green);}
.ss-page .ss-b3{background:var(--ss-green);color:#fff;}
.ss-page .ss-b3:hover{background:#3E6244;transform:translateY(-1px);}
.ss-page .ss-b1 svg,
.ss-page .ss-b3 svg{width:16px;height:16px;flex:none;}

/* ============================================================
   1 · HERO
   ============================================================ */
.ss-hero{
  position:relative;
  background:var(--ss-cream) url("../img/ss-hero-bg.webp") right center / cover no-repeat;
  display:grid;
  grid-template-columns:minmax(0,1.16fr) minmax(0,1fr);
  grid-template-rows:auto auto;
  align-items:stretch;
  min-height:min(40.6vw,780px);
}
/* Creme-Schleier links, damit der Text unabhängig vom Zuschnitt lesbar bleibt */
.ss-hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,
      var(--ss-cream) 0%,
      rgba(250,247,243,.96) 22%,
      rgba(250,247,243,.55) 38%,
      rgba(250,247,243,0) 54%);
}
/* Kopfzeile bleibt über dem Nachthimmel lesbar */
.ss-hero::after{
  content:"";position:absolute;left:0;right:0;top:0;height:clamp(120px,11vw,180px);
  z-index:0;pointer-events:none;
  background:linear-gradient(180deg,
      rgba(250,247,243,.92) 0%,
      rgba(250,247,243,.74) 34%,
      rgba(250,247,243,.32) 66%,
      rgba(250,247,243,0) 100%);
}
.ss-hero-pic{
  display:none;
  grid-column:2;grid-row:1 / 3;
  position:relative;min-width:0;
}
.ss-hero-pic img{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:center;
}
@media (max-width:767.98px){
  .ss-hero-pic img{object-position:60% 74%;}
}
.ss-hero-pic::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--ss-cream) 0%,rgba(250,247,243,.55) 9%,rgba(250,247,243,0) 22%);
  pointer-events:none;z-index:1;
}
/* Kopfzeile bleibt über dem Nachthimmel lesbar */
.ss-hero-pic::after{
  content:"";position:absolute;left:0;right:0;top:0;height:170px;
  background:linear-gradient(180deg,
      rgba(250,247,243,.94) 0%,
      rgba(250,247,243,.78) 34%,
      rgba(250,247,243,.34) 66%,
      rgba(250,247,243,0) 100%);
  pointer-events:none;z-index:1;
}
.ss-hero-copy{
  grid-column:1;grid-row:1;
  padding:clamp(140px,12vw,182px) clamp(18px,2.2vw,36px) clamp(20px,2.4vw,34px) max(clamp(24px,4.4vw,64px),calc((100vw - 1264px) / 2));
  position:relative;z-index:2;min-width:0;
}
html body .ss-page .ss-hero-copy .ss-h1{
  font-family:'Cormorant Garamond',serif !important;
  font-weight:500 !important;
  color:var(--ss-head) !important;
  font-size:clamp(34px,3.6vw,66px) !important;
  line-height:1.12 !important;
  margin:clamp(10px,1vw,18px) 0 0 !important;
}
.ss-hero-copy .ss-lead{max-width:46ch;}
.ss-hero-act{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:clamp(10px,1.1vw,16px);
  margin:clamp(20px,2.4vw,34px) 0 0;
}
.ss-hero-checks{
  grid-column:1 / -1;grid-row:2;
  z-index:3;position:relative;
  display:flex;flex-wrap:wrap;
  gap:clamp(12px,1.6vw,26px) clamp(16px,2.4vw,42px);
  padding:clamp(14px,1.6vw,22px) max(clamp(24px,4.4vw,64px),calc((100vw - 1264px) / 2)) clamp(22px,2.6vw,38px);
  background:linear-gradient(90deg,
      rgba(250,247,243,.97) 0%,
      rgba(250,247,243,.90) 42%,
      rgba(250,247,243,.55) 62%,
      rgba(250,247,243,0) 82%);
}
.ss-chk{
  display:flex;align-items:center;gap:10px;min-width:0;
  font-size:clamp(12.5px,.92vw,15px);
  color:#40503F;
}
.ss-chk-i{
  flex:none;width:clamp(20px,1.5vw,24px);height:clamp(20px,1.5vw,24px);
  border-radius:50%;border:1.4px solid #A9BCA4;
  display:flex;align-items:center;justify-content:center;color:var(--ss-green);
  background:rgba(255,255,255,.6);
}
.ss-chk-i svg{width:60%;height:60%;display:block;}

/* ============================================================
   2 · WARUM GUTER SCHLAF  (Mond-Komposition, Referenz 2135×736)
   ============================================================ */
.ss-why{
  --u:calc(100vw / 2135);
  position:relative;
  aspect-ratio:2135 / 736;
  background:#FBF8F2 url("../img/ss-why-bg-new.webp") center center / cover no-repeat;
  padding:0;
  overflow:hidden;
}
html body .ss-why > .ss-in{
  position:absolute;left:calc(var(--u)*660);top:0;
  width:calc(var(--u)*1290);
  margin:0;padding:0;text-align:center;
}
.ss-why .ss-eyebrow{
  display:block;margin:calc(var(--u)*22) 0 0;
  font-size:calc(var(--u)*17);letter-spacing:calc(var(--u)*3.6);
  color:#B08D3E;
}
html body .ss-why .ss-h2{
  font-size:calc(var(--u)*62) !important;
  line-height:1.14 !important;
  margin:calc(var(--u)*16) 0 0 !important;
  color:#1F3A2E !important;
}
html body .ss-why .ss-lead{
  font-size:calc(var(--u)*21);line-height:1.62;
  margin:calc(var(--u)*22) auto 0;
  max-width:calc(var(--u)*1190);
  color:#4A5348;
}
.ss-why-grid{
  position:absolute;left:calc(var(--u)*59);top:calc(var(--u)*316);
  width:calc(var(--u)*1226);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:calc(var(--u)*18);
  margin:0;
}
.ss-wcard{
  display:flex;flex-direction:column;align-items:center;
  height:calc(var(--u)*335);
  padding:calc(var(--u)*34) calc(var(--u)*18) calc(var(--u)*26);
  background:linear-gradient(180deg,#FEFDFA 0%,#FBF8F2 100%);
  border:1px solid rgba(186,158,98,.32);
  border-radius:calc(var(--u)*16);
  box-shadow:0 calc(var(--u)*18) calc(var(--u)*34) rgba(120,100,60,.07);
  text-align:center;min-width:0;box-sizing:border-box;
}
.ss-wcard-i{
  flex:none;
  width:calc(var(--u)*85);height:calc(var(--u)*85);
  margin:0 auto;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 36% 30%,#FFFDF6 0%,#FBF3E1 66%,#F6EAD0 100%);
  color:#B58E38;
  box-shadow:inset 0 0 0 1px rgba(186,150,74,.42);
}
.ss-wcard-i svg{width:48%;height:48%;display:block;}
html body .ss-page .ss-wcard h3{
  font-family:'Cormorant Garamond',serif !important;
  font-size:calc(var(--u)*30) !important;
  font-weight:600 !important;line-height:1.2 !important;
  color:#1F3A2E !important;
  margin:calc(var(--u)*24) 0 0 !important;
}
.ss-wcard p{
  font-size:calc(var(--u)*19);line-height:1.6;
  color:#5C6559;margin:calc(var(--u)*14) 0 0;
}

/* ============================================================
   3 · SCHLAFSTÖRUNGEN
   ============================================================ */
.ss-dis{
  position:relative;
  background:var(--ss-cream);
  padding:clamp(46px,5vw,82px) 0 clamp(50px,5.4vw,88px);
  overflow:hidden;
}
.ss-leaf{
  position:absolute;pointer-events:none;z-index:0;
  opacity:.5;height:auto;
}
.ss-leaf-r{right:0;top:clamp(6px,1vw,18px);width:clamp(90px,9vw,150px);}
.ss-leaf-l{left:0;bottom:clamp(10px,2vw,40px);width:clamp(80px,8vw,132px);transform:scaleX(-1);}
.ss-dis .ss-in{position:relative;z-index:1;}
.ss-sub{
  font-size:clamp(12px,.88vw,14.5px);color:#7C857A;
  margin:clamp(8px,.8vw,12px) 0 0;
}
.ss-dis-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.6vw,26px);
  margin:clamp(26px,3vw,44px) 0 0;
}
.ss-dcard{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  column-gap:clamp(12px,1.2vw,20px);
  align-items:start;
  background:linear-gradient(180deg,#FCFBF8 0%,#F6F5EF 100%);
  border:1px solid rgba(150,160,140,.16);
  border-radius:clamp(12px,1vw,18px);
  box-shadow:var(--ss-shadow-s);
  padding:clamp(18px,1.7vw,26px) clamp(16px,1.5vw,24px);
  text-decoration:none;min-width:0;
  transition:transform .22s ease,box-shadow .22s ease;
}
.ss-dcard:hover{transform:translateY(-3px);box-shadow:0 22px 44px -26px rgba(46,70,54,.5);}
.ss-dcard-i{
  grid-column:1;grid-row:1 / 4;
  width:clamp(48px,3.9vw,60px);height:clamp(48px,3.9vw,60px);
  border-radius:50%;background:var(--ss-sage);
  display:flex;align-items:center;justify-content:center;flex:none;
}
.ss-dcard-i img{width:58%;height:58%;object-fit:contain;display:block;}
html body .ss-page .ss-dcard h3{
  grid-column:2;grid-row:1;
  font-family:'Jost',sans-serif !important;
  font-size:clamp(14.5px,1.14vw,19px) !important;
  font-weight:500 !important;line-height:1.26 !important;
  color:#2C3F2E !important;margin:0 !important;
}
.ss-dcard p{
  grid-column:2;grid-row:2;
  font-size:clamp(12px,.88vw,14.5px);line-height:1.55;
  color:var(--ss-body);margin:clamp(5px,.5vw,9px) 0 0;
}
.ss-more{
  grid-column:2;grid-row:3;
  display:inline-flex;align-items:center;gap:7px;
  font-size:clamp(11.5px,.84vw,13.5px);color:var(--ss-green);
  margin:clamp(10px,1vw,16px) 0 0;
}
.ss-more svg{width:13px;height:13px;transition:transform .22s ease;}
.ss-dcard:hover .ss-more svg{transform:translateX(4px);}

/* ============================================================
   4 · BESCHWERDEN  (Mond-Komposition, Referenz 1717×916)
   ============================================================ */
.ss-sym{
  --u:calc(100vw / 1717);
  position:relative;
  aspect-ratio:1717 / 916;
  background:#FAF7F2 url("../img/ss-sym-bg.webp") center top / 100% 100% no-repeat;
  padding:0;
  overflow:hidden;
}
html body .ss-sym > .ss-in{
  position:static;width:auto;margin:0;padding:0;
}
.ss-sym .ss-eyebrow{
  position:absolute;left:0;right:0;top:calc(var(--u)*54);
  text-align:center;
  font-size:calc(var(--u)*15);letter-spacing:calc(var(--u)*3.2);
  color:#B08D3E;
}
html body .ss-sym .ss-h2{
  position:absolute;left:50%;top:calc(var(--u)*80);transform:translateX(-50%);
  width:calc(var(--u)*810);text-align:center;
  font-size:calc(var(--u)*60) !important;line-height:1.2 !important;
  margin:0 !important;color:#1F3A2E !important;
}
.ss-sym-grid{display:contents;}
.ss-scard{
  position:absolute;transform:translate(-50%,-50%);
  width:calc(var(--u)*214);height:calc(var(--u)*236);
  display:flex;flex-direction:column;align-items:center;
  padding:calc(var(--u)*30) calc(var(--u)*12) calc(var(--u)*18);
  background:linear-gradient(180deg,#FEFDFB 0%,#FAF8F3 100%);
  border:1px solid rgba(150,150,130,.16);
  border-radius:calc(var(--u)*18);
  box-shadow:0 calc(var(--u)*20) calc(var(--u)*36) rgba(90,90,70,.10);
  text-decoration:none;text-align:center;box-sizing:border-box;
  -webkit-tap-highlight-color:transparent;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
@media (hover:hover){
  .ss-scard:hover{
    transform:translate(-50%,-50%) translateY(-3px);
    border-color:rgba(78,118,84,.42);
    box-shadow:0 calc(var(--u)*26) calc(var(--u)*44) rgba(70,90,66,.18);
  }
}
.ss-scard:focus-visible{outline:2px solid #4E7654;outline-offset:3px;}
.sc-1{left:calc(var(--u)*287);top:calc(var(--u)*625);}
.sc-2{left:calc(var(--u)*516);top:calc(var(--u)*438);}
.sc-3{left:calc(var(--u)*758);top:calc(var(--u)*383);}
.sc-4{left:calc(var(--u)*1000);top:calc(var(--u)*383);}
.sc-5{left:calc(var(--u)*1240);top:calc(var(--u)*468);}
.sc-6{left:calc(var(--u)*1465);top:calc(var(--u)*648);}
.ss-scard-i{
  flex:none;
  width:calc(var(--u)*112);height:calc(var(--u)*112);
  border-radius:50%;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:none;box-shadow:none;
}
.ss-scard-i img{width:100%;height:100%;object-fit:contain;display:block;}
.ss-scard b{
  display:block;margin-top:calc(var(--u)*10);
  font-family:'Jost',sans-serif;
  font-size:calc(var(--u)*19);font-weight:400;line-height:1.35;
  color:#3B4A3D;
}
.ss-sym-bar{
  position:absolute;left:calc(var(--u)*550);top:calc(var(--u)*657);
  width:calc(var(--u)*610);min-height:calc(var(--u)*262);
  display:flex;flex-direction:column;align-items:center;
  gap:0;margin:0;
  padding:calc(var(--u)*26) calc(var(--u)*30) calc(var(--u)*34);
  background:rgba(255,253,249,.92);
  border:1px solid rgba(150,150,130,.14);
  border-radius:calc(var(--u)*22);
  box-shadow:0 calc(var(--u)*24) calc(var(--u)*44) rgba(90,80,55,.12);
  box-sizing:border-box;
}
.ss-sym-bar p{
  display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*14);
  font-family:'Cormorant Garamond',serif;
  font-size:calc(var(--u)*32);line-height:1.25;color:#2C4433;margin:0;
}
.ss-sym-bar p svg{
  width:calc(var(--u)*40);height:calc(var(--u)*40);flex:none;color:#7C9A72;
}
.ss-sym-bar .ss-b1{
  margin-top:calc(var(--u)*22);
  min-height:clamp(42px,3.2vw,52px);
  padding:clamp(11px,1vw,15px) clamp(20px,2vw,32px);
  font-size:clamp(10.5px,.8vw,12.5px);
}

/* ============================================================
   5 · MODERNE DIAGNOSTIK (Timeline + Foto)
   ============================================================ */
.ss-diag{
  position:relative;
  aspect-ratio:1983 / 793;
  background:#FAF6EE url("../img/ss-diag-bg.webp") center / 100% 100% no-repeat;
  display:grid;
  grid-template-columns:minmax(0,.78fr) minmax(0,1fr);
  align-items:center;
  gap:0;
  padding:0;
}
.ss-diag-copy{
  padding-left:max(clamp(24px,3.6vw,56px),calc((100vw - 1180px) / 2));
  padding-right:clamp(10px,1.4vw,22px);
  min-width:0;
}
.ss-steps{
  list-style:none;margin:clamp(16px,1.9vw,28px) 0 0;padding:0;
  display:grid;row-gap:clamp(11px,1.35vw,20px);
}
.ss-step{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:clamp(14px,1.4vw,22px);
  position:relative;min-width:0;
}
.ss-step-n{
  grid-column:1;grid-row:1 / 3;
  width:clamp(28px,2.3vw,34px);height:clamp(28px,2.3vw,34px);
  border-radius:50%;
  border:1.4px solid #C9BC94;
  display:flex;align-items:center;justify-content:center;
  font-size:clamp(11.5px,.85vw,14px);color:var(--ss-gold);
  background:#FCFBF7;flex:none;position:relative;z-index:1;
}
.ss-step:not(:last-child)::before{
  content:"";position:absolute;left:calc(clamp(28px,2.3vw,34px) / 2 - .5px);
  top:clamp(28px,2.3vw,34px);
  height:calc(100% + clamp(14px,1.5vw,22px) - clamp(28px,2.3vw,34px));
  border-left:1px solid #D8CEB0;
}
html body .ss-page .ss-step h3{
  grid-column:2;grid-row:1;
  font-family:'Jost',sans-serif !important;
  font-size:clamp(13.5px,1.05vw,17.5px) !important;
  font-weight:500 !important;line-height:1.3 !important;
  color:#2C3F2E !important;margin:0 !important;
  padding-top:clamp(2px,.3vw,5px);
}
.ss-step p{
  grid-column:2;grid-row:2;
  font-size:clamp(11px,.83vw,13.5px);line-height:1.5;
  color:var(--ss-body);margin:4px 0 0;
}
.ss-diag-pic{
  position:relative;min-width:0;align-self:stretch;
  display:flex;
}
.ss-diag-pic img{
  display:block;width:100%;height:100%;min-height:clamp(280px,26vw,430px);
  object-fit:cover;object-position:center;
  border-radius:clamp(200px,26vw,420px) 0 0 clamp(200px,26vw,420px);
  border-left:1.5px solid rgba(190,165,105,.55);
}

/* ============================================================
   6 · SCHLAFLABOR (Gerätefoto + schwebende Karten)
   ============================================================ */
.ss-lab{
  position:relative;
  aspect-ratio:1961 / 802;
  background:#F6F5F2 url("../img/ss-lab-bg-new.webp") center / cover no-repeat;
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  align-items:center;
  gap:0;
}
.ss-lab-pic{position:relative;z-index:1;min-width:0;align-self:stretch;min-height:clamp(320px,26vw,430px);}
.ss-lab-pic > img{
  display:block;width:100%;height:100%;
  min-height:clamp(260px,24vw,400px);
  object-fit:cover;object-position:center;
}
.ss-float{
  position:absolute;
  display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:clamp(9px,.9vw,14px);
  align-items:start;
  width:clamp(190px,20vw,282px);max-width:74%;
  background:#FDFCFA;border-radius:clamp(11px,.9vw,16px);
  box-shadow:0 18px 38px -24px rgba(40,60,45,.5);
  padding:clamp(11px,1vw,16px) clamp(12px,1.1vw,18px);
}
.ss-float-i{
  grid-column:1;grid-row:1 / 3;
  width:clamp(28px,2.3vw,34px);height:clamp(28px,2.3vw,34px);
  display:flex;align-items:center;justify-content:center;
  color:var(--ss-green);flex:none;
}
.ss-float-i svg{width:100%;height:100%;display:block;}
.ss-float b{
  grid-column:2;grid-row:1;
  font-size:clamp(12px,.9vw,15px);font-weight:500;color:#2C3F2E;line-height:1.3;
}
.ss-float .ss-float-d{
  grid-column:2;grid-row:2;
  font-size:clamp(10.5px,.78vw,12.5px);line-height:1.5;color:#6D766B;
  margin-top:3px;
}
.ss-f1{left:clamp(10px,4%,60px);top:clamp(8px,9%,64px);}
.ss-f2{left:clamp(4px,2%,40px);top:clamp(96px,50%,240px);}
.ss-f3{left:clamp(80px,30%,240px);bottom:clamp(6px,6%,46px);}
.ss-lab-copy{
  padding-right:max(clamp(24px,3.6vw,56px),calc((100vw - 1180px) / 2));
  padding-top:clamp(34px,4vw,64px);padding-bottom:clamp(34px,4vw,64px);
  padding-left:clamp(10px,1.4vw,22px);
  min-width:0;
}
.ss-lab-copy .ss-lead{max-width:46ch;}
.ss-lab-copy .ss-b3{margin-top:clamp(20px,2.2vw,32px);}

/* ============================================================
   7 · UNSERE BEHANDLUNG
   ============================================================ */
.ss-th{
  background:var(--ss-cream);
  padding:clamp(46px,5vw,80px) 0 clamp(50px,5.4vw,86px);
}
.ss-th-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,1.6vw,24px);
  margin:clamp(26px,3vw,44px) 0 0;
}
.ss-tcard{
  position:relative;overflow:hidden;min-width:0;
  border:1px solid rgba(150,160,140,.16);
  border-radius:clamp(12px,1vw,18px);
  box-shadow:var(--ss-shadow-s);
  background:#FCFBF7 center/cover no-repeat;
  padding:clamp(18px,1.7vw,28px) clamp(16px,1.5vw,24px) clamp(22px,2vw,32px);
  min-height:clamp(190px,16vw,248px);
  display:flex;flex-direction:column;
}
/* Cremefarbener Verlauf über dem Foto – nur für die Lesbarkeit der Texte.
   Das Foto selbst bleibt unverändert und wird nicht verzerrt. */
.ss-tcard::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    linear-gradient(180deg,
      rgba(252,251,247,.10) 0%,
      rgba(252,251,247,.42) 48%,
      rgba(252,251,247,.88) 100%),
    linear-gradient(90deg,
      rgba(252,251,247,.92) 0%,
      rgba(252,251,247,.66) 34%,
      rgba(252,251,247,.14) 72%,
      rgba(252,251,247,0) 100%);
}
.ss-tcard > *{position:relative;z-index:1;}
.ss-tcard-i{
  width:clamp(46px,3.7vw,58px);height:clamp(46px,3.7vw,58px);
  border-radius:50%;background:var(--ss-sage-l);
  display:flex;align-items:center;justify-content:center;
  color:#3D5C42;flex:none;
}
.ss-tcard-i svg{width:48%;height:48%;display:block;}
html body .ss-page .ss-tcard h3{
  font-family:'Jost',sans-serif !important;
  font-size:clamp(13px,1vw,16.5px) !important;
  font-weight:500 !important;line-height:1.3 !important;
  color:#2C3F2E !important;
  margin:auto 0 0 !important;padding-top:clamp(14px,1.4vw,22px);
  hyphens:auto;overflow-wrap:break-word;
}
.ss-tcard p{
  font-size:clamp(11.5px,.85vw,14px);line-height:1.55;
  color:var(--ss-body);margin:clamp(6px,.6vw,10px) 0 0;
  max-width:22ch;
}

/* ============================================================
   8 · WARUM KLS — reference-image layout
   ============================================================ */
.ss-wk{
  position:relative;
  overflow:hidden;
  min-height:clamp(520px,43vw,760px);
  background:#FBF8F2 url("../img/ss-wk-doctor-reference.webp") right center / cover no-repeat;
  display:flex;
  align-items:center;
}
.ss-wk::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(251,248,242,.99) 0%,rgba(251,248,242,.96) 36%,rgba(251,248,242,.42) 54%,rgba(251,248,242,0) 68%);
}
.ss-wk-copy{
  position:relative;z-index:2;
  width:min(52%,700px);
  padding:clamp(52px,6vw,96px) clamp(24px,3vw,54px) clamp(52px,6vw,96px) max(clamp(28px,5vw,82px),calc((100vw - 1180px) / 2));
  min-width:0;
}
.ss-wk .ss-eyebrow{
  display:flex;align-items:center;gap:14px;
  margin:0 0 clamp(12px,1.2vw,18px);
  color:#B98B3A;
  font-family:'Jost',system-ui,sans-serif;
  font-size:clamp(12px,.9vw,15px);
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.ss-wk .ss-eyebrow::after{
  content:"";width:44px;height:1px;background:#B98B3A;display:block;
}
html body .ss-page .ss-wk-title{
  margin:0 !important;
  font-family:'Cormorant Garamond',Georgia,serif !important;
  font-size:clamp(40px,4vw,68px) !important;
  font-weight:500 !important;
  line-height:1.02 !important;
  color:#33443A !important;
}
.ss-wk-list{
  list-style:none;margin:clamp(26px,2.6vw,40px) 0 0;padding:0;
  display:grid;row-gap:clamp(13px,1.2vw,18px);
  max-width:620px;
}
.ss-wk-list li{
  display:flex;align-items:center;gap:clamp(11px,1vw,15px);
  font-family:'Jost',system-ui,sans-serif;
  font-size:clamp(15px,1.05vw,18px);
  font-weight:300;line-height:1.5;color:#33443A;
}
.ss-wk-list i{
  flex:none;width:clamp(25px,1.8vw,30px);height:clamp(25px,1.8vw,30px);
  border-radius:50%;background:#6E9A6B;color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(51,68,58,.10);
}
.ss-wk-list i svg{width:55%;height:55%;display:block;}
.ss-wk-copy .ss-b1{
  margin-top:clamp(28px,3vw,42px);
  background:var(--ss-dark) !important;
  color:#fff !important;
  border-color:var(--ss-dark) !important;
}
.ss-wk-copy .ss-b1:hover{background:#22352a !important;}
.ss-wk-pic{display:none;}

/* ============================================================
   TABLET  768 – 1199
   ============================================================ */
@media (max-width:1199.98px){

  .ss-in{width:min(100% - 40px,960px);}

  /* HERO: Foto oben, Text darunter */
  .ss-hero{
    grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;
    background-image:none;background-color:var(--ss-cream);
    min-height:0;
  }
  .ss-hero::before{display:none;}
  .ss-hero-pic{display:block;grid-column:1;grid-row:1;}
  .ss-hero-pic img{height:clamp(230px,34vw,360px);object-position:58% 72%;}
  .ss-hero-pic::before{
    background:linear-gradient(180deg,rgba(250,247,243,0) 74%,var(--ss-cream) 100%);
  }
  .ss-hero-copy{
    grid-column:1;grid-row:2;
    padding:clamp(22px,3vw,34px) 20px 0;
    width:min(100% ,1000px);margin-inline:auto;
  }
  html body .ss-page .ss-hero-copy .ss-h1{font-size:clamp(30px,4.6vw,48px) !important;}
  .ss-hero-copy .ss-lead{max-width:64ch;}
  .ss-hero-checks{
    grid-column:1;grid-row:3;
    background:none;
    padding:clamp(18px,2.4vw,28px) 20px clamp(28px,3.4vw,44px);
    width:min(100%,1000px);margin-inline:auto;
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:clamp(11px,1.6vw,18px) clamp(14px,2.4vw,30px);
  }
  .ss-chk{font-size:clamp(12.5px,1.5vw,15px);}
  .ss-chk-i{width:22px;height:22px;}

  /* Kopfzeilen etwas kleiner halten */
  .ss-page .ss-eyebrow{font-size:clamp(10px,1.25vw,12px);}
  .ss-page .ss-lead{font-size:clamp(13.5px,1.6vw,16px);}

  /* ---------- Warum guter Schlaf: Mond dekorativ, Inhalt im Fluss ---------- */
  .ss-why{
    aspect-ratio:auto !important;position:relative;
    background:#FBF8F2 url("../img/ss-why-bg-new.webp") center center / cover no-repeat !important;
    padding:clamp(34px,4.4vw,58px) 0 clamp(40px,5vw,64px) !important;
  }
  .ss-why::before{
    content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background:linear-gradient(90deg,
        rgba(251,248,242,.30) 0%,
        rgba(251,248,242,.72) 22%,
        rgba(251,248,242,.92) 42%,
        rgba(251,248,242,.96) 100%);
  }
  html body .ss-why > .ss-in{
    position:relative !important;z-index:1;left:auto;top:auto;
    width:min(100% - 40px,960px) !important;margin-inline:auto !important;
    padding-top:0;
  }
  .ss-why .ss-eyebrow{
    font-size:clamp(10.5px,1.35vw,13px);letter-spacing:.2em;margin:0;
  }
  html body .ss-why .ss-h2{
    font-size:clamp(26px,3.6vw,40px) !important;
    margin:clamp(9px,1.2vw,14px) 0 0 !important;
  }
  html body .ss-why .ss-lead{
    font-size:clamp(13.5px,1.7vw,16.5px);line-height:1.72;
    margin:clamp(12px,1.6vw,20px) auto 0;max-width:64ch;
  }
  .ss-why-grid{
    position:static !important;left:auto;top:auto;width:auto !important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:clamp(12px,1.8vw,20px);
    margin-top:clamp(24px,3.2vw,38px);
  }
  .ss-wcard{
    height:auto !important;
    padding:clamp(20px,2.4vw,28px) clamp(14px,1.8vw,20px) clamp(22px,2.6vw,30px) !important;
    border-radius:clamp(12px,1.4vw,16px);
  }
  .ss-wcard-i{width:clamp(56px,7vw,72px) !important;height:clamp(56px,7vw,72px) !important;}
  html body .ss-page .ss-wcard h3{
    font-size:clamp(17px,2.2vw,24px) !important;margin:clamp(12px,1.6vw,18px) 0 0 !important;}
  .ss-wcard p{font-size:clamp(12.5px,1.55vw,15px);margin:clamp(7px,.9vw,11px) 0 0;}

  /* Schlafstörungen: 2 Spalten */
  .ss-dis-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .ss-leaf-r{width:clamp(72px,10vw,110px);}
  .ss-leaf-l{width:clamp(64px,9vw,96px);}

  /* ---------- Beschwerden: Mond dekorativ, Karten im Raster ---------- */
  .ss-sym{
    aspect-ratio:auto !important;
    background:#FAF7F2 url("../img/ss-sym-bg.webp") center bottom / 160% auto no-repeat !important;
    padding:clamp(34px,4.4vw,58px) 0 clamp(40px,5vw,66px) !important;
  }
  html body .ss-sym > .ss-in{
    position:static;width:min(100% - 40px,960px);margin-inline:auto;
  }
  .ss-sym .ss-eyebrow{
    position:static !important;left:auto;right:auto;top:auto;
    font-size:clamp(10px,1.3vw,12.5px);letter-spacing:.19em;
  }
  html body .ss-sym .ss-h2{
    position:static !important;left:auto;top:auto;transform:none !important;
    width:auto !important;
    font-size:clamp(26px,3.6vw,40px) !important;
    margin:clamp(9px,1.2vw,14px) auto 0 !important;max-width:22ch;
  }
  .ss-sym-grid{
    display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr));
    gap:clamp(12px,1.8vw,20px);
    margin-top:clamp(26px,3.4vw,40px);
  }
  .ss-scard{
    position:static !important;left:auto;top:auto;transform:none !important;
    width:auto !important;height:auto !important;
    padding:clamp(18px,2.2vw,24px) clamp(10px,1.4vw,16px) clamp(18px,2.2vw,22px) !important;
    border-radius:clamp(14px,1.6vw,18px);
  }
  .ss-scard-i{width:clamp(64px,8.4vw,92px) !important;height:clamp(64px,8.4vw,92px) !important;}
  .ss-scard b{font-size:clamp(12.5px,1.6vw,15.5px) !important;margin-top:clamp(8px,1vw,12px) !important;}
  .ss-sym-bar{
    position:static !important;left:auto;top:auto;
    width:min(100%,520px) !important;
    margin:clamp(26px,3.4vw,40px) auto 0 !important;
    padding:clamp(20px,2.4vw,28px) clamp(18px,2.2vw,26px) clamp(22px,2.6vw,30px) !important;
    border-radius:clamp(16px,1.8vw,22px);
  }
  .ss-sym-bar p{
    font-size:clamp(19px,2.4vw,26px) !important;gap:clamp(10px,1.4vw,14px) !important;
  }
  .ss-sym-bar p svg{width:clamp(28px,3.4vw,38px) !important;height:clamp(28px,3.4vw,38px) !important;}
  .ss-sym-bar .ss-b1{margin-top:clamp(16px,2vw,22px) !important;}

  /* Diagnostik: Foto oben, Schritte darunter */
  .ss-diag{
    aspect-ratio:auto !important;
    grid-template-columns:minmax(0,1fr);
    gap:0;padding:clamp(190px,30vw,330px) 0 clamp(40px,5vw,64px);
    background-size:130% auto;background-position:right top;
  }
  .ss-diag::before{
    background:linear-gradient(180deg,
        rgba(250,246,238,0) 0%,
        rgba(250,246,238,.55) 62%,
        rgba(250,246,238,.97) 88%,
        rgba(250,246,238,1) 100%);
  }
  .ss-diag-pic{display:none;}
  .ss-diag-pic img{
    min-height:0;height:clamp(220px,30vw,320px);
    border-radius:0;border-left:0;
  }
  .ss-diag-copy{
    grid-row:2;order:2;
    width:min(100% - 40px,960px);margin-inline:auto;
    padding:clamp(28px,3.4vw,46px) 0 0;
  }

  /* Schlaflabor: Foto oben, Karten als echte Liste darunter */
  .ss-lab{
    aspect-ratio:auto !important;
    grid-template-columns:minmax(0,1fr);gap:0;
    background-size:auto 100%;background-position:left top;
  }
  .ss-lab::before{
    content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background:linear-gradient(180deg,
        rgba(246,245,242,0) 0%,
        rgba(246,245,242,.55) 46%,
        rgba(246,245,242,.97) 72%,
        rgba(246,245,242,1) 100%);
  }
  .ss-lab-pic{min-height:clamp(200px,34vw,320px) !important;}
  .ss-lab-pic{grid-row:1;min-height:clamp(180px,30vw,300px);}
  .ss-lab-pic > img{
    min-height:0;height:clamp(210px,28vw,300px);
    object-position:75% center;
  }
  .ss-float{
    position:static;width:auto;max-width:none;
    box-shadow:none;background:#FBFAF6;
    border:1px solid rgba(150,160,140,.18);
  }
  .ss-lab-floats{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    gap:clamp(10px,1.4vw,16px);
    width:min(100% - 40px,960px);margin:clamp(22px,2.6vw,32px) auto 0;
  }
  .ss-lab-copy{
    width:min(100% - 40px,960px);margin-inline:auto;
    padding:clamp(24px,3vw,38px) 0 clamp(40px,5vw,64px);
  }
  .ss-lab-copy .ss-lead{max-width:64ch;}

  /* Behandlung: 2 Spalten */
  .ss-th-grid{grid-template-columns:repeat(2,minmax(0,1fr));}

  /* Warum KLS: responsive reference composition */
  .ss-wk{
    min-height:clamp(560px,68vw,700px);
    background-position:64% center;
    background-size:auto 100%;
  }
  .ss-wk::after{
    background:linear-gradient(90deg,rgba(251,248,242,.99) 0%,rgba(251,248,242,.97) 43%,rgba(251,248,242,.58) 60%,rgba(251,248,242,0) 78%);
  }
  .ss-wk-copy{
    width:min(60%,620px);
    padding:clamp(46px,6vw,70px) 28px clamp(46px,6vw,70px) 36px;
  }
  html body .ss-page .ss-wk-title{font-size:clamp(38px,5.4vw,56px) !important;}
}

/* ============================================================
   MOBIL  < 768
   ============================================================ */
@media (max-width:767.98px){
  .ss-in{width:min(100% - 32px,560px);}

  .ss-hero-copy,
  .ss-hero-checks{padding-inline:16px;}
  .ss-hero-pic img{height:clamp(190px,52vw,260px);}
  html body .ss-page .ss-hero-copy .ss-h1{font-size:clamp(27px,7.4vw,38px) !important;}
  .ss-hero-act{gap:10px;}
  .ss-page .ss-b1,
  .ss-page .ss-b2,
  .ss-page .ss-b3{width:100%;white-space:normal;text-align:center;line-height:1.3;}
  .ss-hero-checks{grid-template-columns:minmax(0,1fr);}

  /* Warum KLS: photo first, content below on phones */
  .ss-wk{
    min-height:0;
    display:grid;
    grid-template-columns:1fr;
    background:none;
    background-color:#FBF8F2;
  }
  .ss-wk::after{display:none;}
  .ss-wk-pic{display:block;grid-row:1;width:100%;height:clamp(245px,70vw,360px);overflow:hidden;margin:0;}
  .ss-wk-pic img{
    display:block;width:100%;height:100%;object-fit:cover;object-position:75% center;
    border:0;border-radius:0;
  }
  .ss-wk-copy{
    grid-row:2;
    width:min(100% - 32px,560px);
    margin-inline:auto;
    padding:clamp(34px,8vw,50px) 0 clamp(46px,10vw,66px);
  }
  .ss-wk .ss-eyebrow{font-size:12px;letter-spacing:.18em;}
  html body .ss-page .ss-wk-title{font-size:clamp(38px,11vw,48px) !important;}
  .ss-wk-list{margin-top:24px;row-gap:13px;}
  .ss-wk-list li{font-size:16px;}
  .ss-wk-copy .ss-b1{width:auto;max-width:100%;}

  .ss-why-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
  .ss-why{background-size:cover !important;background-position:center center !important;}
  .ss-dis-grid{grid-template-columns:minmax(0,1fr);}
  .ss-sym-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .ss-sym{background-size:210% auto !important;}
  .ss-th-grid{grid-template-columns:minmax(0,1fr);}

  .ss-sym-bar{width:100% !important;align-items:stretch;text-align:center;}
  .ss-sym-bar p{align-items:center;text-align:center;}

  .ss-diag-copy,
  .ss-lab-copy,
  .ss-lab-floats,
  .ss-wk-copy{width:min(100% - 32px,560px);}
  .ss-lab-floats{grid-template-columns:minmax(0,1fr);}

  .ss-tcard{
    /* gleiche Höhe für alle vier Karten, auch bei längerem Text */
    min-height:clamp(160px,38vw,190px);
    background-position:right center;
    padding-bottom:clamp(18px,5vw,26px);
  }
  .ss-tcard p{max-width:30ch;}

  .ss-wk-list li{font-size:15px;}
}

/* ============================================================
   KLEIN  < 480
   ============================================================ */
@media (max-width:479.98px){
  .ss-why-grid{grid-template-columns:minmax(0,1fr);}
  .ss-sym-grid{grid-template-columns:minmax(0,1fr);}
  .ss-scard{
    display:grid !important;grid-template-columns:auto minmax(0,1fr);
    column-gap:14px;text-align:left;align-items:center;
    padding:14px 16px !important;
  }
  .ss-scard-i{width:58px !important;height:58px !important;margin:0;}
  .ss-scard b{margin:0 !important;}
  .ss-leaf{display:none;}
}
/* Warum guter Schlaf – custom uploaded icon artwork */
.ss-wcard-i:has(img){
  overflow:hidden;
  background:transparent;
  box-shadow:none;
}
.ss-wcard-i img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  border-radius:50%;
}

/* KLS Schlafschule uploaded disorder icons — direct assets, no nested badge 2026-09-05 */
.ss-page .ss-dis .ss-dcard-i {
  width: 76px !important;
  height: 76px !important;
  min-width: 76px !important;
  min-height: 76px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
}

.ss-page .ss-dis .ss-dcard-i img {
  width: 76px !important;
  height: 76px !important;
  max-width: 76px !important;
  max-height: 76px !important;
  object-fit: contain !important;
  display: block !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}