/* ════════════════════════════════════════════════════
   RATGEBER — Artikel-Layout
   Lile Wellness & Detox
════════════════════════════════════════════════════ */
:root{
  --white:#FFFFFF;--offwhite:#F7FAF5;--green-xl:#EEF6EA;--green-l:#D9EDCF;
  --sage:#6B9060;--sage-d:#4D6E44;--sage-l:#97BF8A;--sage-pale:#E5F2DE;--mint:#F0F8ED;
  --ink:#1C2418;--ink2:#3A4E34;--muted:#5E7258;--mid:#8EA685;
  --b:rgba(28,36,24,.1);--b2:rgba(28,36,24,.06);
  --sand:#FBF4E9;--sand-b:#EADCC2;--sand-ink:#8A6520;
  --fh:'Cormorant Garamond',Georgia,serif;--fb:'Jost',system-ui,sans-serif;
  --sh:0 20px 64px rgba(28,36,24,.1);--sh-sm:0 4px 20px rgba(28,36,24,.08);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden;max-width:100%}
body{background:var(--white);color:var(--ink);font-family:var(--fb);font-size:17px;line-height:1.8;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--sage)}

/* ── Nav ── */
.nav{background:rgba(247,250,245,.97);backdrop-filter:blur(16px);border-bottom:1px solid var(--b);padding:.75rem 1.75rem;display:flex;align-items:center;gap:1.5rem;position:sticky;top:0;z-index:100}
.nav-logo{display:inline-flex;align-items:center}
.nav-logo img{height:46px;width:auto}
.nav-links{margin-left:auto;display:flex;align-items:center;gap:1.6rem}
.nav-links a{font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);transition:color .16s;text-decoration:none;white-space:nowrap}
.nav-links a:hover{color:var(--sage)}
.nav-cta{padding:.6rem 1.3rem;background:var(--sage);color:#fff!important;border-radius:3px;letter-spacing:.1em}
.nav-cta:hover{background:var(--sage-d);color:#fff!important}
@media(max-width:700px){.nav-links .hide-sm{display:none}}

/* ── Hero ── */
.a-hero{background:linear-gradient(165deg,var(--mint) 0%,var(--green-xl) 55%,var(--sage-pale) 100%);padding:4.5rem 1.75rem 4rem;text-align:center;position:relative;overflow:hidden}
.a-hero::before{content:'';position:absolute;top:-30%;right:-10%;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(151,191,138,.28),transparent 68%)}
.a-hero-i{max-width:800px;margin:0 auto;position:relative;z-index:1}
.a-chip{display:inline-block;background:var(--white);color:var(--sage-d);font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:.4rem 1rem;border-radius:999px;box-shadow:var(--sh-sm);margin-bottom:1.4rem}
.a-title{font-family:var(--fh);font-size:clamp(2.3rem,5.6vw,4rem);font-weight:300;letter-spacing:-.025em;line-height:1.08;color:var(--ink);text-wrap:balance}
.a-title em{font-style:italic}
.a-sub{font-size:1.05rem;color:var(--muted);line-height:1.75;max-width:52ch;margin:1.3rem auto 0;text-wrap:balance}
.a-meta{margin-top:1.8rem;display:flex;justify-content:center;flex-wrap:wrap;gap:.5rem 1.4rem;font-size:.78rem;font-weight:500;letter-spacing:.06em;color:var(--mid);text-transform:uppercase}
.a-meta span{display:inline-flex;align-items:center;gap:.4rem}

/* ── Artikel-Korpus ── */
.a-wrap{max-width:1080px;margin:0 auto;padding:0 1.75rem}
.a-figure{margin:-2.6rem auto 3.5rem;max-width:820px;border-radius:18px;overflow:hidden;box-shadow:var(--sh);position:relative;z-index:2;background:var(--offwhite)}
.a-figure img{width:100%;height:auto}
.a-body{max-width:720px;margin:0 auto;padding-bottom:1rem}
.a-body>p{font-size:1.02rem;color:var(--muted);line-height:1.88;margin-bottom:1.15rem}
.a-lead{font-size:1.2rem!important;color:var(--ink2)!important;line-height:1.75!important;font-weight:300;margin-bottom:2rem!important}
.a-body h2{font-family:var(--fh);font-size:clamp(1.75rem,3.4vw,2.4rem);font-weight:400;letter-spacing:-.015em;line-height:1.2;color:var(--ink);margin:3.2rem 0 1.1rem;padding-top:1.8rem;border-top:1px solid var(--b2)}
.a-body h2:first-child{margin-top:0;padding-top:0;border-top:none}
.a-body h3{font-family:var(--fh);font-size:1.35rem;font-weight:500;color:var(--ink2);margin:2rem 0 .6rem}
.a-body strong{color:var(--ink2);font-weight:500}
.a-body a{color:var(--sage);text-decoration:underline;text-underline-offset:3px}

/* ── Listen ── */
.a-list{list-style:none;margin:1.2rem 0 1.6rem;display:grid;gap:.7rem}
.a-list li{position:relative;padding-left:1.9rem;font-size:1.01rem;color:var(--muted);line-height:1.72}
.a-list li::before{content:'';position:absolute;left:.35rem;top:.68em;width:7px;height:7px;border-radius:50%;background:var(--sage-l)}
.a-list.check li::before{content:'✓';left:0;top:0;width:auto;height:auto;background:none;color:var(--sage);font-size:.95rem;font-weight:700}
.a-list.warn li::before{background:var(--sand-ink);opacity:.55}

/* ── Boxen ── */
.a-box{border-radius:14px;padding:1.7rem 1.9rem;margin:2.2rem 0}
.a-box-title{display:flex;align-items:center;gap:.6rem;font-family:var(--fb);font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;margin-bottom:.85rem}
.a-box p{font-size:.97rem;line-height:1.8;margin-bottom:.6rem}
.a-box p:last-child,.a-box .a-list:last-child{margin-bottom:0}
.a-box .a-list{margin:.6rem 0 0}
.a-box .a-list li{font-size:.96rem}

.box-info{background:var(--sage-pale);border:1px solid var(--green-l)}
.box-info .a-box-title{color:var(--sage-d)}
.box-info p,.box-info li{color:var(--ink2)}
.box-info .a-list li::before{background:var(--sage)}

.box-note{background:var(--sand);border:1px solid var(--sand-b)}
.box-note .a-box-title{color:var(--sand-ink)}
.box-note p,.box-note li{color:#6E5527}
.box-note .a-list li::before{background:var(--sand-ink);opacity:.6}

.box-fazit{background:var(--sage-d);border:none;padding:2.4rem 2.2rem;position:relative;overflow:hidden}
.box-fazit::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 70% at 80% 20%,rgba(151,191,138,.18),transparent 70%)}
.box-fazit>*{position:relative;z-index:1}
.box-fazit .a-box-title{color:var(--sage-l)}
.box-fazit h3{font-family:var(--fh);font-size:1.7rem;font-weight:400;color:#fff;margin:0 0 .8rem}
.box-fazit p{color:rgba(255,255,255,.75)}

/* ── Behandlungs-Karte (Bezug zum Angebot) ── */
.a-offer{display:flex;align-items:center;gap:1.5rem;background:var(--offwhite);border:1px solid var(--b);border-radius:14px;padding:1.5rem 1.7rem;margin:2.4rem 0}
.a-offer-img{width:88px;height:88px;border-radius:10px;overflow:hidden;flex-shrink:0;background:var(--green-xl)}
.a-offer-img img{width:100%;height:100%;object-fit:cover}
.a-offer-t{font-family:var(--fh);font-size:1.3rem;font-weight:500;color:var(--ink);margin-bottom:.2rem}
.a-offer-d{font-size:.9rem;color:var(--muted);line-height:1.6}
.a-offer-p{font-size:.85rem;color:var(--sage);font-weight:600;margin-top:.35rem;letter-spacing:.03em}
@media(max-width:560px){.a-offer{flex-direction:column;text-align:center}}

/* ── CTA ── */
.a-cta{background:linear-gradient(160deg,var(--green-xl),var(--sage-pale));border-radius:18px;padding:3rem 2rem;text-align:center;margin:4rem auto 0;max-width:820px}
.a-cta h2{font-family:var(--fh);font-size:clamp(1.9rem,4vw,2.7rem);font-weight:300;color:var(--ink);line-height:1.15;margin-bottom:.8rem;border:none;padding:0}
.a-cta h2 em{font-style:italic;color:var(--sage-d)}
.a-cta p{font-size:1rem;color:var(--muted);max-width:46ch;margin:0 auto 1.9rem;line-height:1.75}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:1rem 2.2rem;font-family:var(--fb);font-size:.85rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;border-radius:3px;transition:all .2s;cursor:pointer;text-decoration:none}
.btn-sage{background:var(--sage);color:#fff;border:1.5px solid var(--sage)}
.btn-sage:hover{background:var(--sage-d);border-color:var(--sage-d)}

/* ── Weitere Artikel ── */
.a-more{max-width:1080px;margin:5rem auto 0;padding:4rem 1.75rem 0;border-top:1px solid var(--b2)}
.a-more-h{font-family:var(--fh);font-size:1.9rem;font-weight:400;color:var(--ink);text-align:center;margin-bottom:2.2rem}
.a-more-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.4rem}
.a-more-card{background:var(--white);border:1px solid var(--b);border-radius:14px;overflow:hidden;text-decoration:none;display:flex;flex-direction:column;transition:box-shadow .22s,transform .22s}
.a-more-card:hover{box-shadow:var(--sh);transform:translateY(-3px)}
.a-more-card img{width:100%;height:150px;object-fit:cover}
.a-more-b{padding:1.2rem 1.3rem 1.4rem}
.a-more-chip{font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sage);display:block;margin-bottom:.45rem}
.a-more-t{font-family:var(--fh);font-size:1.22rem;font-weight:500;color:var(--ink);line-height:1.3}

/* ── Fuß ── */
.a-foot{text-align:center;padding:3rem 1.5rem;margin-top:4.5rem;border-top:1px solid var(--b);font-size:.82rem;color:var(--muted)}
.a-foot a{color:var(--muted);text-decoration:none}
.a-foot a:hover{color:var(--sage)}
.a-disclaimer{max-width:720px;margin:3rem auto 0;font-size:.83rem;color:var(--mid);line-height:1.7;text-align:center;font-style:italic}

/* ── WhatsApp ── */
.wa-float{position:fixed;bottom:1.8rem;right:1.8rem;z-index:500;width:62px;height:62px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.28);transition:transform .2s}
.wa-float:hover{transform:scale(1.08)}
.wa-float svg{width:30px;height:30px;fill:#fff;position:relative;z-index:1}
.wa-float::before{content:'';position:absolute;inset:0;border-radius:50%;background:#25D366;opacity:.55;animation:wa-pulse 2.6s ease-out infinite}
@keyframes wa-pulse{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.7);opacity:0}}
@media(prefers-reduced-motion:reduce){.wa-float::before{animation:none;display:none}}

@media(max-width:640px){
  .a-hero{padding:3.2rem 1.25rem 3rem}
  .a-wrap,.a-more{padding-left:1.25rem;padding-right:1.25rem}
  .a-figure{margin:-1.8rem auto 2.5rem;border-radius:14px}
  .a-box{padding:1.4rem 1.3rem}
  .a-cta{padding:2.4rem 1.4rem}
  .wa-float{width:54px;height:54px;bottom:1.1rem;right:1.1rem}
  .wa-float svg{width:26px;height:26px}
}