/* =====================================================================
   SX66 — puresana.shop
   Visuelle Identität: Chrom · Silber · Graphit · Blau · Tiefblau
   Eigenständiges Stylesheet — keine externen Bibliotheken
   ===================================================================== */

:root{
  /* Helle Basis */
  --sx-paper:#f4f7fb;
  --sx-surface:#ffffff;
  --sx-mist:#eaf0f7;

  /* Silber / Chrom / Graphit */
  --sx-silver:#c7d1dd;
  --sx-chrome:#dfe6ee;
  --sx-graphite:#39424f;
  --sx-graphite-2:#4d586a;
  --sx-ink:#141b26;

  /* Blau -> Tiefblau (gesättigt) */
  --sx-azure:#2f74d0;
  --sx-blue:#1c5bbf;
  --sx-navy:#0f2e63;
  --sx-navy-deep:#0a1f45;

  /* Verläufe */
  --sx-chrome-band:linear-gradient(100deg,#eef3f8 0%,#c9d4e0 22%,#f6f9fc 46%,#aab8c8 62%,#e7edf4 84%,#cdd8e4 100%);
  --sx-blue-band:linear-gradient(120deg,var(--sx-navy-deep) 0%,var(--sx-navy) 45%,var(--sx-blue) 100%);
  --sx-glass:linear-gradient(160deg,rgba(255,255,255,.9),rgba(231,238,246,.55));

  /* Schatten */
  --sx-shadow-s:0 2px 8px rgba(15,46,99,.08);
  --sx-shadow-m:0 12px 34px rgba(15,46,99,.12);
  --sx-shadow-l:0 26px 60px rgba(10,31,69,.20);

  /* Maße */
  --sx-wrap:1200px;
  --sx-radius:22px;
  --sx-radius-s:14px;
  --sx-gap:clamp(20px,3vw,40px);

  --sx-serif:"Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;
  --sx-sans:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}

body{
  font-family:var(--sx-sans);
  color:var(--sx-graphite);
  background:
    radial-gradient(1100px 620px at 82% -8%,rgba(47,116,208,.10),transparent 60%),
    radial-gradient(900px 520px at -10% 12%,rgba(199,209,221,.35),transparent 55%),
    var(--sx-paper);
  line-height:1.66;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}

h1,h2,h3,h4{
  font-family:var(--sx-serif);
  color:var(--sx-ink);
  line-height:1.14;
  letter-spacing:-.01em;
  font-weight:600;
}

.sx-wrap{width:min(var(--sx-wrap),92vw);margin-inline:auto}

.sx-eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--sx-sans);font-size:.72rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--sx-blue);
  margin-bottom:1.1rem;
}
.sx-eyebrow::before{
  content:"";width:26px;height:2px;border-radius:2px;
  background:var(--sx-blue-band);
}

/* ---------- Buttons ---------- */
.sx-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--sx-sans);font-weight:650;font-size:.98rem;
  padding:.95rem 1.8rem;border-radius:999px;border:0;cursor:pointer;
  transition:transform .25s ease,box-shadow .25s ease,filter .25s ease;
  letter-spacing:.01em;
}
.sx-btn--primary{
  color:#fff;background:var(--sx-blue-band);
  box-shadow:0 10px 26px rgba(28,91,191,.34);
}
.sx-btn--primary:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(28,91,191,.44)}
.sx-btn--ghost{
  color:var(--sx-navy);background:var(--sx-surface);
  border:1px solid var(--sx-silver);box-shadow:var(--sx-shadow-s);
}
.sx-btn--ghost:hover{transform:translateY(-2px);border-color:var(--sx-azure);color:var(--sx-blue)}
.sx-btn--chrome{
  color:var(--sx-ink);background:var(--sx-chrome-band);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),var(--sx-shadow-s);
}
.sx-btn--chrome:hover{transform:translateY(-2px);filter:saturate(1.05)}
.sx-btn--block{width:100%}

/* =====================================================================
   HEADER / NAVIGATION
   ===================================================================== */
.sx-top{
  position:sticky;top:0;z-index:60;
  backdrop-filter:blur(14px);
  background:rgba(244,247,251,.82);
  border-bottom:1px solid rgba(199,209,221,.6);
}
.sx-nav{display:flex;align-items:center;justify-content:space-between;padding:.8rem 0;gap:1rem}
.sx-brand{display:flex;align-items:center;gap:.7rem;font-family:var(--sx-serif);font-weight:700;font-size:1.35rem;color:var(--sx-navy)}
.sx-brand__mark{
  width:40px;height:40px;border-radius:12px;
  background:var(--sx-blue-band);
  display:grid;place-items:center;color:#fff;font-family:var(--sx-sans);
  font-weight:800;font-size:.9rem;letter-spacing:.02em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 16px rgba(15,46,99,.28);
}
.sx-brand small{display:block;font-family:var(--sx-sans);font-size:.6rem;letter-spacing:.28em;font-weight:600;color:var(--sx-graphite-2);text-transform:uppercase}

.sx-menu{display:flex;align-items:center;gap:1.7rem;list-style:none}
.sx-menu a{font-weight:550;font-size:.96rem;color:var(--sx-graphite-2);position:relative;padding:.2rem 0;transition:color .2s}
.sx-menu a::after{content:"";position:absolute;left:0;bottom:-3px;width:0;height:2px;background:var(--sx-blue-band);transition:width .25s;border-radius:2px}
.sx-menu a:hover{color:var(--sx-navy)}
.sx-menu a:hover::after{width:100%}

.sx-nav__cta{display:flex;align-items:center;gap:.8rem}

.sx-burger{
  display:none;width:46px;height:46px;border-radius:12px;border:1px solid var(--sx-silver);
  background:var(--sx-surface);cursor:pointer;position:relative;
}
.sx-burger span,.sx-burger span::before,.sx-burger span::after{
  content:"";position:absolute;left:50%;top:50%;width:20px;height:2px;border-radius:2px;
  background:var(--sx-graphite);transform:translate(-50%,-50%);transition:.28s;
}
.sx-burger span::before{transform:translate(-50%,-8px)}
.sx-burger span::after{transform:translate(-50%,6px)}
.sx-burger.is-open span{background:transparent}
.sx-burger.is-open span::before{transform:translate(-50%,-50%) rotate(45deg)}
.sx-burger.is-open span::after{transform:translate(-50%,-50%) rotate(-45deg)}

/* =====================================================================
   HERO
   ===================================================================== */
.sx-hero{position:relative;padding:clamp(3rem,7vw,6rem) 0 clamp(2rem,5vw,4rem)}
.sx-hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,56px);align-items:center}
.sx-hero__badge{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--sx-surface);border:1px solid var(--sx-silver);
  padding:.4rem .9rem;border-radius:999px;font-size:.78rem;font-weight:600;
  color:var(--sx-graphite-2);box-shadow:var(--sx-shadow-s);margin-bottom:1.4rem;
}
.sx-hero__dot{width:8px;height:8px;border-radius:50%;background:var(--sx-azure);box-shadow:0 0 0 4px rgba(47,116,208,.18)}
.sx-hero h1{font-size:clamp(2.3rem,5vw,3.7rem)}
.sx-hero h1 em{font-style:normal;background:var(--sx-blue-band);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sx-hero p.lead{font-size:clamp(1.02rem,1.4vw,1.18rem);color:var(--sx-graphite-2);margin:1.4rem 0 2rem;max-width:46ch}
.sx-hero__actions{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.sx-hero__meta{display:flex;gap:2rem;margin-top:2.4rem;flex-wrap:wrap}
.sx-hero__meta div{min-width:110px}
.sx-hero__meta b{font-family:var(--sx-serif);font-size:1.7rem;color:var(--sx-navy);display:block}
.sx-hero__meta span{font-size:.82rem;color:var(--sx-graphite-2)}

.sx-hero__media{position:relative}
.sx-hero__frame{
  position:relative;border-radius:calc(var(--sx-radius) + 6px);overflow:hidden;
  box-shadow:var(--sx-shadow-l);border:1px solid rgba(255,255,255,.6);
  aspect-ratio:4/5;
}
.sx-hero__frame img{width:100%;height:100%;object-fit:cover}
.sx-hero__frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(10,31,69,.42));}
.sx-hero__chip{
  position:absolute;left:-14px;bottom:26px;z-index:2;
  background:var(--sx-glass);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.7);border-radius:18px;
  padding:.9rem 1.15rem;box-shadow:var(--sx-shadow-m);display:flex;gap:.8rem;align-items:center;
}
.sx-hero__chip b{font-family:var(--sx-serif);color:var(--sx-navy);font-size:1.05rem;display:block}
.sx-hero__chip span{font-size:.76rem;color:var(--sx-graphite-2)}
.sx-hero__chip .mk{width:38px;height:38px;border-radius:11px;background:var(--sx-chrome-band);display:grid;place-items:center;font-weight:800;color:var(--sx-navy);font-size:.8rem}

/* Chrom-Band Trenner */
.sx-band{height:4px;background:var(--sx-chrome-band);border-radius:4px;box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}

/* =====================================================================
   SECTION Basis
   ===================================================================== */
.sx-section{padding:clamp(3.2rem,6vw,5.6rem) 0}
.sx-section__head{max-width:60ch;margin-bottom:clamp(2rem,4vw,3rem)}
.sx-section__head h2{font-size:clamp(1.8rem,3.4vw,2.7rem)}
.sx-section__head p{color:var(--sx-graphite-2);margin-top:1rem;font-size:1.05rem}
.sx-section--tint{background:linear-gradient(180deg,var(--sx-mist),transparent)}

/* ---------- Marken-Werte ---------- */
.sx-values{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sx-gap)}
.sx-value{
  background:var(--sx-surface);border:1px solid rgba(199,209,221,.7);
  border-radius:var(--sx-radius);padding:1.9rem;box-shadow:var(--sx-shadow-s);
  transition:transform .3s,box-shadow .3s,border-color .3s;position:relative;overflow:hidden;
}
.sx-value::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--sx-blue-band);opacity:.85}
.sx-value:hover{transform:translateY(-6px);box-shadow:var(--sx-shadow-m);border-color:var(--sx-azure)}
.sx-value__no{font-family:var(--sx-serif);font-size:1.05rem;color:var(--sx-silver);font-weight:700;letter-spacing:.05em}
.sx-value h3{font-size:1.28rem;margin:.5rem 0 .6rem}
.sx-value p{color:var(--sx-graphite-2);font-size:.98rem}

/* ---------- Lifestyle split ---------- */
.sx-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,54px);align-items:center}
.sx-split--rev .sx-split__media{order:2}
.sx-split__media{border-radius:var(--sx-radius);overflow:hidden;box-shadow:var(--sx-shadow-m);aspect-ratio:4/3;border:1px solid rgba(255,255,255,.6)}
.sx-split__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.sx-split__media:hover img{transform:scale(1.05)}
.sx-split__body h2{font-size:clamp(1.7rem,3vw,2.4rem)}
.sx-split__body p{color:var(--sx-graphite-2);margin-top:1rem}
.sx-checks{list-style:none;margin-top:1.6rem;display:grid;gap:.9rem}
.sx-checks li{display:flex;gap:.8rem;align-items:flex-start;font-size:1rem}
.sx-checks .tick{
  flex:0 0 auto;width:26px;height:26px;border-radius:8px;background:var(--sx-chrome-band);
  display:grid;place-items:center;color:var(--sx-blue);font-weight:800;font-size:.85rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7)
}

/* =====================================================================
   PRODUKT
   ===================================================================== */
.sx-product{position:relative}
.sx-product__panel{
  background:var(--sx-blue-band);color:#eaf1fb;border-radius:calc(var(--sx-radius) + 8px);
  padding:clamp(1.8rem,4vw,3.4rem);box-shadow:var(--sx-shadow-l);position:relative;overflow:hidden;
}
.sx-product__panel::before{
  content:"";position:absolute;right:-120px;top:-120px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(47,116,208,.55),transparent 70%);
}
.sx-product__inner{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,4vw,52px);align-items:center;position:relative;z-index:2}
.sx-product__stage{
  background:var(--sx-glass);border:1px solid rgba(255,255,255,.35);border-radius:var(--sx-radius);
  aspect-ratio:1/1;display:grid;place-items:center;padding:1.4rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}
.sx-product__stage img{width:74%;height:74%;object-fit:contain;filter:drop-shadow(0 30px 40px rgba(10,31,69,.5))}
.sx-product h2{color:#fff;font-size:clamp(1.9rem,3.4vw,2.7rem)}
.sx-product__tag{display:inline-block;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:#bcd3f4;font-weight:700;margin-bottom:.8rem}
.sx-product__desc{color:#cfe0f6;margin:1rem 0 1.6rem;max-width:48ch}
.sx-product__price{display:flex;align-items:baseline;gap:.6rem;margin:1.2rem 0 1.8rem}
.sx-product__price b{font-family:var(--sx-serif);font-size:2.8rem;color:#fff}
.sx-product__price span{color:#bcd3f4;font-size:.95rem}
.sx-product__facts{list-style:none;display:grid;gap:.7rem;margin-bottom:1.9rem}
.sx-product__facts li{display:flex;gap:.7rem;color:#dbe7f8;font-size:.95rem}
.sx-product__facts li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--sx-silver);margin-top:.55rem;flex:0 0 auto}

/* =====================================================================
   ROUTINE Zeitplan
   ===================================================================== */
.sx-routine{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sx-gap)}
.sx-step{
  background:var(--sx-surface);border:1px solid rgba(199,209,221,.7);border-radius:var(--sx-radius);
  padding:1.7rem;box-shadow:var(--sx-shadow-s);position:relative;transition:transform .3s,box-shadow .3s
}
.sx-step:hover{transform:translateY(-6px);box-shadow:var(--sx-shadow-m)}
.sx-step__time{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--sx-serif);font-weight:700;color:#fff;font-size:.95rem;
  padding:.35rem .9rem;border-radius:999px;background:var(--sx-blue-band);margin-bottom:1rem
}
.sx-step h3{font-size:1.15rem;margin-bottom:.5rem}
.sx-step p{color:var(--sx-graphite-2);font-size:.94rem}

/* =====================================================================
   INHALTSSTOFFE
   ===================================================================== */
.sx-ingredients{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,52px);align-items:start}
.sx-table{
  background:var(--sx-surface);border:1px solid rgba(199,209,221,.7);border-radius:var(--sx-radius);
  overflow:hidden;box-shadow:var(--sx-shadow-s)
}
.sx-table__row{display:grid;grid-template-columns:1.4fr .8fr .8fr;gap:1rem;padding:1rem 1.4rem;border-bottom:1px solid rgba(199,209,221,.55);align-items:center;font-size:.95rem}
.sx-table__row:last-child{border-bottom:0}
.sx-table__row--head{background:var(--sx-mist);font-weight:700;color:var(--sx-navy);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}
.sx-table__row b{color:var(--sx-ink);font-weight:600}
.sx-note-card{
  background:var(--sx-chrome-band);border-radius:var(--sx-radius);padding:1.8rem;
  box-shadow:var(--sx-shadow-s);border:1px solid rgba(255,255,255,.6)
}
.sx-note-card h3{font-size:1.2rem;margin-bottom:.7rem;color:var(--sx-navy)}
.sx-note-card p{color:var(--sx-graphite);font-size:.95rem}

/* =====================================================================
   HABITS Karten
   ===================================================================== */
.sx-habits{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sx-gap)}
.sx-habit{
  background:var(--sx-surface);border:1px solid rgba(199,209,221,.7);border-radius:var(--sx-radius);
  overflow:hidden;box-shadow:var(--sx-shadow-s);transition:transform .3s,box-shadow .3s;display:flex;flex-direction:column
}
.sx-habit:hover{transform:translateY(-6px);box-shadow:var(--sx-shadow-m)}
.sx-habit__body{padding:1.6rem}
.sx-habit h3{font-size:1.18rem;margin-bottom:.5rem}
.sx-habit p{color:var(--sx-graphite-2);font-size:.94rem}
.sx-habit__tag{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sx-blue);font-weight:700}

/* =====================================================================
   FAQ
   ===================================================================== */
.sx-faq{max-width:820px;margin-inline:auto;display:grid;gap:1rem}
.sx-acc{
  background:var(--sx-surface);border:1px solid rgba(199,209,221,.7);border-radius:var(--sx-radius-s);
  overflow:hidden;box-shadow:var(--sx-shadow-s);transition:border-color .25s
}
.sx-acc.is-open{border-color:var(--sx-azure)}
.sx-acc__q{
  width:100%;text-align:left;background:none;border:0;cursor:pointer;
  padding:1.25rem 1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  font-family:var(--sx-serif);font-size:1.08rem;color:var(--sx-ink);font-weight:600
}
.sx-acc__ico{flex:0 0 auto;width:30px;height:30px;border-radius:9px;background:var(--sx-mist);display:grid;place-items:center;color:var(--sx-blue);font-size:1.2rem;transition:transform .3s,background .3s}
.sx-acc.is-open .sx-acc__ico{transform:rotate(45deg);background:var(--sx-blue-band);color:#fff}
.sx-acc__a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.sx-acc__a p{padding:0 1.5rem 1.35rem;color:var(--sx-graphite-2);font-size:.97rem}

/* =====================================================================
   BESTELLUNG / FORMULAR
   ===================================================================== */
.sx-order{position:relative}
.sx-order__grid{display:grid;grid-template-columns:1fr .85fr;gap:clamp(24px,4vw,54px);align-items:stretch}
.sx-order__aside{
  background:var(--sx-glass);border:1px solid rgba(255,255,255,.7);border-radius:var(--sx-radius);
  padding:clamp(1.6rem,3vw,2.6rem);box-shadow:var(--sx-shadow-s)
}
.sx-order__aside h2{font-size:clamp(1.7rem,3vw,2.3rem)}
.sx-order__aside p{color:var(--sx-graphite-2);margin-top:1rem}
.sx-pricebox{margin-top:1.8rem;display:flex;align-items:center;gap:1rem;background:var(--sx-surface);border:1px solid var(--sx-silver);border-radius:16px;padding:1rem 1.3rem;box-shadow:var(--sx-shadow-s)}
.sx-pricebox img{width:64px;height:64px;object-fit:contain}
.sx-pricebox b{font-family:var(--sx-serif);font-size:1.6rem;color:var(--sx-navy)}
.sx-pricebox small{color:var(--sx-graphite-2);display:block}

.sx-form{
  background:var(--sx-surface);border:1px solid rgba(199,209,221,.7);border-radius:var(--sx-radius);
  padding:clamp(1.6rem,3vw,2.6rem);box-shadow:var(--sx-shadow-m)
}
.sx-form h3{font-size:1.35rem;margin-bottom:.4rem}
.sx-form>p{color:var(--sx-graphite-2);font-size:.94rem;margin-bottom:1.5rem}
.sx-field{margin-bottom:1.2rem}
.sx-field label{display:block;font-size:.85rem;font-weight:650;color:var(--sx-graphite);margin-bottom:.5rem}
.sx-field input{
  width:100%;padding:.95rem 1.1rem;border-radius:13px;border:1px solid var(--sx-silver);
  background:var(--sx-paper);font-size:1rem;font-family:var(--sx-sans);color:var(--sx-ink);
  transition:border-color .2s,box-shadow .2s
}
.sx-field input:focus{outline:none;border-color:var(--sx-azure);box-shadow:0 0 0 4px rgba(47,116,208,.15);background:#fff}
.sx-field.has-error input{border-color:#d5493f;box-shadow:0 0 0 4px rgba(213,73,63,.12)}
.sx-field__err{display:none;color:#c23a30;font-size:.82rem;margin-top:.4rem;font-weight:600}
.sx-field.has-error .sx-field__err{display:block}
.sx-form__note{font-size:.78rem;color:var(--sx-graphite-2);margin-top:1rem;line-height:1.5}

/* =====================================================================
   FOOTER
   ===================================================================== */
.sx-foot{
  margin-top:clamp(3rem,6vw,5rem);background:var(--sx-navy-deep);color:#c6d6ef;
  padding:clamp(3rem,5vw,4.5rem) 0 2rem;position:relative
}
.sx-foot::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--sx-chrome-band)}
.sx-foot__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:2.4rem}
.sx-foot__grid h4{color:#fff;font-family:var(--sx-sans);font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:1.1rem;font-weight:700}
.sx-foot__grid ul{list-style:none;display:grid;gap:.6rem}
.sx-foot__grid a{color:#a9c0e2;font-size:.94rem;transition:color .2s}
.sx-foot__grid a:hover{color:#fff}
.sx-foot__brand{display:flex;align-items:center;gap:.7rem;font-family:var(--sx-serif);font-size:1.4rem;color:#fff;margin-bottom:1rem}
.sx-foot__brand .sx-brand__mark{box-shadow:none}
.sx-foot p.desc{font-size:.92rem;color:#9db6da;max-width:34ch}
.sx-foot__contact li{font-size:.92rem;margin-bottom:.5rem;color:#a9c0e2}
.sx-foot__disc{
  margin-top:2.6rem;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.12);
  font-size:.82rem;color:#8ba6cc;line-height:1.7
}
.sx-foot__bar{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;margin-top:1.4rem;font-size:.82rem;color:#8ba6cc}
.sx-foot__bar a{color:#a9c0e2}
.sx-foot__bar a:hover{color:#fff}

/* =====================================================================
   COOKIE BANNER
   ===================================================================== */
.sx-cookie{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(140%);
  width:min(760px,94vw);z-index:100;background:var(--sx-surface);
  border:1px solid var(--sx-silver);border-radius:20px;box-shadow:var(--sx-shadow-l);
  padding:1.5rem 1.6rem;transition:transform .5s cubic-bezier(.2,.8,.2,1)
}
.sx-cookie.is-visible{transform:translateX(-50%) translateY(0)}
.sx-cookie h4{font-size:1.15rem;margin-bottom:.5rem}
.sx-cookie p{font-size:.9rem;color:var(--sx-graphite-2)}
.sx-cookie p a{color:var(--sx-blue);text-decoration:underline}
.sx-cookie__actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.2rem}
.sx-cookie__prefs{margin-top:1.1rem;display:none;background:var(--sx-paper);border:1px solid var(--sx-mist);border-radius:14px;padding:1rem 1.2rem}
.sx-cookie__prefs.is-open{display:block}
.sx-pref{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px solid rgba(199,209,221,.5)}
.sx-pref:last-child{border-bottom:0}
.sx-pref span{font-size:.9rem;color:var(--sx-graphite)}
.sx-pref small{display:block;color:var(--sx-graphite-2);font-size:.78rem}
.sx-switch{position:relative;width:44px;height:24px;flex:0 0 auto}
.sx-switch input{opacity:0;width:0;height:0}
.sx-switch label{position:absolute;inset:0;background:var(--sx-silver);border-radius:999px;cursor:pointer;transition:background .25s}
.sx-switch label::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;background:#fff;border-radius:50%;transition:transform .25s;box-shadow:var(--sx-shadow-s)}
.sx-switch input:checked+label{background:var(--sx-blue-band)}
.sx-switch input:checked+label::after{transform:translateX(20px)}
.sx-switch input:disabled+label{opacity:.6;cursor:not-allowed}

/* =====================================================================
   Legal / Article Seiten
   ===================================================================== */
.sx-page-hero{padding:clamp(2.6rem,5vw,4rem) 0 1rem}
.sx-page-hero .sx-eyebrow{margin-bottom:.8rem}
.sx-page-hero h1{font-size:clamp(2rem,4vw,3rem)}
.sx-page-hero p{color:var(--sx-graphite-2);margin-top:1rem;max-width:60ch}
.sx-article{padding:clamp(1.5rem,4vw,3rem) 0 clamp(3rem,6vw,5rem)}
.sx-article__wrap{
  max-width:820px;margin-inline:auto;background:var(--sx-surface);
  border:1px solid rgba(199,209,221,.7);border-radius:var(--sx-radius);
  padding:clamp(1.8rem,4vw,3.4rem);box-shadow:var(--sx-shadow-s)
}
.sx-article__wrap h2{font-size:1.5rem;margin:2rem 0 .8rem}
.sx-article__wrap h2:first-child{margin-top:0}
.sx-article__wrap h3{font-size:1.18rem;margin:1.5rem 0 .6rem}
.sx-article__wrap p{color:var(--sx-graphite-2);margin-bottom:1rem}
.sx-article__wrap ul{margin:0 0 1rem 1.2rem;color:var(--sx-graphite-2)}
.sx-article__wrap li{margin-bottom:.5rem}
.sx-article__wrap a{color:var(--sx-blue);text-decoration:underline}
.sx-article__meta{font-size:.85rem;color:var(--sx-graphite-2);margin-bottom:1.5rem}

/* Wellness Seite */
.sx-well-hero{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,52px);align-items:center}
.sx-well-hero__media{border-radius:var(--sx-radius);overflow:hidden;box-shadow:var(--sx-shadow-m);aspect-ratio:16/11;border:1px solid rgba(255,255,255,.6)}
.sx-well-hero__media img{width:100%;height:100%;object-fit:cover}
.sx-info-card{
  background:var(--sx-blue-band);color:#eaf1fb;border-radius:var(--sx-radius);
  padding:clamp(1.6rem,3vw,2.4rem);box-shadow:var(--sx-shadow-m);margin:clamp(2rem,4vw,3rem) 0
}
.sx-info-card h3{color:#fff;font-size:1.4rem;margin-bottom:.7rem}
.sx-info-card p{color:#cfe0f6}
.sx-well-list{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sx-gap)}
.sx-well-item{
  background:var(--sx-surface);border:1px solid rgba(199,209,221,.7);border-radius:var(--sx-radius);
  padding:1.7rem;box-shadow:var(--sx-shadow-s);transition:transform .3s,box-shadow .3s
}
.sx-well-item:hover{transform:translateY(-5px);box-shadow:var(--sx-shadow-m)}
.sx-well-item h3{font-size:1.2rem;margin-bottom:.5rem;color:var(--sx-navy)}
.sx-well-item p{color:var(--sx-graphite-2);font-size:.95rem}
.sx-well-item__k{font-family:var(--sx-serif);color:var(--sx-silver);font-weight:700;font-size:1rem}

/* Success Seite */
.sx-success{min-height:70vh;display:grid;place-items:center;text-align:center;padding:4rem 0}
.sx-success__card{
  max-width:560px;background:var(--sx-surface);border:1px solid rgba(199,209,221,.7);
  border-radius:calc(var(--sx-radius) + 6px);padding:clamp(2rem,5vw,3.5rem);box-shadow:var(--sx-shadow-l)
}
.sx-success__mark{
  width:78px;height:78px;border-radius:22px;background:var(--sx-blue-band);margin:0 auto 1.6rem;
  display:grid;place-items:center;color:#fff;font-size:2.2rem;box-shadow:0 14px 30px rgba(28,91,191,.4)
}
.sx-success h1{font-size:clamp(1.8rem,4vw,2.6rem)}
.sx-success p{color:var(--sx-graphite-2);margin:1rem 0 2rem}

/* =====================================================================
   ANIMATIONEN
   ===================================================================== */
.sx-reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.sx-reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .sx-reveal{opacity:1;transform:none}
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1024px){
  .sx-values,.sx-habits{grid-template-columns:repeat(2,1fr)}
  .sx-routine{grid-template-columns:repeat(2,1fr)}
  .sx-hero__grid{grid-template-columns:1fr;gap:2.4rem}
  .sx-hero__media{max-width:460px}
  .sx-product__inner,.sx-ingredients,.sx-order__grid,.sx-well-hero{grid-template-columns:1fr}
  .sx-foot__grid{grid-template-columns:1fr 1fr}
}

@media (max-width:760px){
  .sx-menu,.sx-nav__cta .sx-btn{display:none}
  .sx-burger{display:block}
  .sx-menu{
    position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    gap:0;background:var(--sx-surface);border-bottom:1px solid var(--sx-silver);
    box-shadow:var(--sx-shadow-m);padding:.5rem 0;max-height:0;overflow:hidden;transition:max-height .35s ease
  }
  .sx-menu.is-open{max-height:400px}
  .sx-menu li{border-bottom:1px solid rgba(199,209,221,.4)}
  .sx-menu li:last-child{border-bottom:0}
  .sx-menu a{display:block;padding:.95rem 1.4rem}
  .sx-menu a::after{display:none}
  .sx-split{grid-template-columns:1fr}
  .sx-split--rev .sx-split__media{order:0}
  .sx-values,.sx-habits,.sx-routine,.sx-well-list,.sx-foot__grid{grid-template-columns:1fr}
  .sx-table__row{grid-template-columns:1.3fr .8fr;font-size:.88rem}
  .sx-table__row span:last-child{display:none}
  .sx-hero__meta{gap:1.2rem}
}

@media (max-width:400px){
  .sx-wrap{width:92vw}
  .sx-cookie__actions{flex-direction:column}
  .sx-cookie__actions .sx-btn{width:100%}
  .sx-hero__actions{flex-direction:column;align-items:stretch}
}