/* =====================================================================
   Riviera Bienengiftsalbe, Landingpage
   Design-System nach Haus-Briefing (Bienen-/Honig-Welt, serifenlos)
   Keine externen Abhängigkeiten, keine Web-Fonts (Systemschrift).
   ===================================================================== */

/* ---------- Design Tokens ---------- */
:root{
  --green:       #4a7c3a;  /* Hauptgrün: Buttons, Akzente, Nummernkreise */
  --green-dark:  #2d4a1d;  /* Dunkelgrün: Überschriften, dunkle Flächen */
  --green-deep:  #223a16;  /* noch dunkler für Verläufe */
  --beige:       #f4f1ea;  /* Flächenhintergrund */
  --sage:        #eef1e8;  /* Info-Flächen, Cross-Links */
  --creme:       #fdf3e0;  /* Bienenthema-Flächen */
  --honey-light: #fef7ea;  /* Geheimtipp-Flächen */
  --gold:        #d4a03c;  /* Ränder, zweite Nummernkreis-Farbe (nie Fließtext) */
  --gold-light:  #e0ae4f;  /* alternativer Rand */
  --gold-dark:   #8a5f14;  /* Kicker-Text auf hell (AA-fest) */
  --gold-on-dark:#eec981;  /* Gold-Akzenttext NUR auf dunklem Grund (AA-fest) */
  --green-text:  #3f6b32;  /* Grün als Text/Link auf hell (AA-fest auf beige/sage) */
  --gold-box:    #f7e3bd;  /* Hervorhebungskästen */
  --text:        #3a3a35;  /* Fließtext */
  --text-soft:   #4a453c;
  --line:        #e4ded0;
  --paper:       #ffffff;
  --base:        #fbfaf6;  /* warmer Seitengrund */

  --radius:   14px;
  --radius-lg:20px;
  --shadow-sm: 0 2px 10px rgba(45,58,22,.06);
  --shadow:    0 14px 40px -18px rgba(45,58,22,.26);
  --shadow-lg: 0 28px 66px -30px rgba(45,58,22,.38);

  --maxw: 1120px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Reset / Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:82px; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:var(--base);
  font-size:17px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--green-text); }
a:hover{ text-decoration:underline; }

h1,h2,h3,h4{ font-family:var(--font); font-weight:700; color:var(--green-dark); line-height:1.18; margin:0 0 .5em; }
h1{ font-size:clamp(2rem, 1.4rem + 3vw, 3.2rem); letter-spacing:-.01em; }
h2{ font-size:clamp(1.55rem, 1.2rem + 1.8vw, 2.4rem); }
h3{ font-size:1.2rem; }
p{ margin:0 0 1rem; }
s{ color:var(--text); opacity:.6; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(1.1rem, 4vw, 2.4rem); }
.wrap--narrow{ max-width:780px; }
.center{ text-align:center; }
.vh{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

.skip-link{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--green-dark); color:#fff; padding:.7rem 1.1rem; border-radius:0 0 10px 0; }
.skip-link:focus{ left:0; }

/* ---------- Buttons (grüne Pill-Buttons) ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--font); font-weight:700; font-size:1rem; color:#fff;
  background:var(--green); border:2px solid var(--green);
  padding:.8em 1.5em; border-radius:32px; cursor:pointer; text-align:center; white-space:nowrap;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover{ text-decoration:none; background:var(--green-dark); border-color:var(--green-dark); transform:translateY(-2px); box-shadow:var(--shadow); }
.btn:active{ transform:translateY(0); }
.btn:focus-visible{ outline:3px solid var(--gold-dark); outline-offset:3px; }
.btn .arrow{ transition:transform .2s ease; }
.btn:hover .arrow{ transform:translateX(3px); }

.btn-outline{ background:transparent; color:var(--green-dark); border-color:var(--green); }
.btn-outline:hover{ background:var(--green); color:#fff; }
.btn-ghost{ background:transparent; color:var(--green-dark); border-color:var(--line); }
.btn-ghost:hover{ background:var(--sage); border-color:var(--green); color:var(--green-dark); }
.btn-light{ background:#fff; color:var(--green-dark); border-color:#fff; }
.btn-light:hover{ background:var(--gold-box); border-color:var(--gold-box); color:var(--green-dark); }
.btn-sm{ padding:.55em 1.05em; font-size:.92rem; border-radius:24px; }
.btn-lg{ padding:.95em 1.9em; font-size:1.1rem; border-radius:40px; }

/* ---------- Kicker / Section head ---------- */
.kicker{
  display:inline-flex; align-items:center; gap:.6ch;
  text-transform:uppercase; letter-spacing:.14em; font-size:.8rem; font-weight:700;
  color:var(--gold-dark); margin:0 0 .8rem;
}
.kicker .idx{ font-weight:800; color:var(--green-text); letter-spacing:normal; }
.kicker--light{ color:var(--gold-on-dark); }
.kicker--light .idx{ color:#fff; }

.section{ padding:clamp(3rem, 7vw, 5.5rem) 0; }
.section-head{ max-width:760px; margin:0 auto clamp(2rem,5vw,3rem); text-align:center; }
.section-intro{ color:var(--text-soft); font-size:1.1rem; }
.note{ color:var(--text-soft); opacity:.85; font-size:.94rem; }

/* =====================================================================
   HEADER
   ===================================================================== */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(251,250,246,.9);
  -webkit-backdrop-filter:saturate(140%) blur(12px); backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--line);
}
.header-inner{ display:flex; align-items:center; gap:1rem; min-height:66px; }
.brand{ display:inline-flex; align-items:center; gap:.55rem; font-weight:800; color:var(--green-dark); }
.brand:hover{ text-decoration:none; }
.brand-name{ font-size:1.18rem; letter-spacing:-.01em; }
.brand-dot{ color:var(--gold-dark); }
.main-nav{ display:none; margin-left:auto; gap:1.5rem; }
.main-nav a{ color:var(--text-soft); font-weight:600; font-size:.95rem; }
.main-nav a:hover{ color:var(--green-dark); text-decoration:none; }
.header-cta{ display:none; }
.header-cta-price{ background:rgba(255,255,255,.28); padding:.15em .6em; border-radius:999px; font-weight:800; font-size:.85em; }

.nav-toggle{ margin-left:auto; width:44px; height:44px; display:inline-flex; flex-direction:column; justify-content:center; gap:5px; padding:0 10px; background:transparent; border:0; cursor:pointer; }
.nav-toggle span{ height:2.5px; background:var(--green-dark); border-radius:2px; transition:transform .25s, opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

.mobile-nav{ display:flex; flex-direction:column; gap:.3rem; padding:.6rem clamp(1.1rem,4vw,2.4rem) 1.2rem; border-top:1px solid var(--line); background:var(--base); }
.mobile-nav[hidden]{ display:none; }
.mobile-nav a{ padding:.7rem .3rem; color:var(--green-dark); font-weight:600; border-bottom:1px solid var(--line); }
.mobile-nav a:last-child{ border:0; margin-top:.5rem; color:#fff; }

/* =====================================================================
   HERO
   ===================================================================== */
.hero{ position:relative; overflow:hidden; background:linear-gradient(180deg, var(--creme), var(--base)); }
.hero-pattern{
  position:absolute; inset:0; opacity:.55; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none' stroke='%23E8D2A0' stroke-width='1.1'%3E%3Cpolygon points='28,2 54,17 54,49 28,64 2,49 2,17'/%3E%3Cpolygon points='28,66 54,81 54,113 28,128 2,113 2,81'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.85), transparent 78%);
  mask-image:linear-gradient(180deg, rgba(0,0,0,.85), transparent 78%);
}
.hero-grid{ position:relative; display:grid; grid-template-columns:1fr; gap:clamp(2rem,5vw,3rem); align-items:center; padding-block:clamp(2.2rem, 6vw, 4rem); }
.hero-title{ margin-bottom:.3em; }
.title-accent{ color:var(--green); }
.hero-lead{ font-size:1.15rem; color:var(--text-soft); max-width:40ch; }

.usp-chips{ list-style:none; margin:1.3rem 0; padding:0; display:flex; flex-wrap:wrap; gap:.55rem; }
.usp-chips li{ background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:.5rem .95rem; font-size:.9rem; font-weight:700; color:var(--green-dark); box-shadow:var(--shadow-sm); }
.usp-chips small{ color:var(--gold-dark); font-weight:600; }

.hero-buy{ display:flex; flex-wrap:wrap; align-items:center; gap:.8rem 1rem; margin-top:.4rem; }
.price-block{ display:flex; flex-direction:column; line-height:1.15; }
.price{ font-size:2rem; font-weight:800; color:var(--green-dark); }
.baseprice{ font-size:.82rem; color:var(--text-soft); }
.cta-stack{ display:flex; flex-direction:column; gap:.35rem; }
.cta-note{ font-size:.78rem; color:var(--text-soft); opacity:.85; max-width:26ch; }

.hero-rating{ display:flex; align-items:center; gap:.55rem; margin:1.2rem 0 0; flex-wrap:wrap; }
.rating-badge{ flex:0 0 auto; width:26px; height:26px; display:grid; place-items:center; color:#fff; background:var(--green); border-radius:50%; }
.rating-text{ font-size:.92rem; color:var(--text-soft); }

.trust-row{ list-style:none; display:flex; flex-wrap:wrap; gap:.5rem 1.3rem; padding:0; margin:1.2rem 0 0; }
.trust-row li{ position:relative; padding-left:1.5rem; font-size:.88rem; color:var(--text-soft); font-weight:600; }
.trust-row li::before{ content:""; position:absolute; left:0; top:.45em; width:1.05rem; height:1.05rem; background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a7c3a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }

.hero-media{ position:relative; display:flex; justify-content:center; align-items:center; }
.hero-glow{ position:absolute; width:80%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(212,160,60,.4), rgba(212,160,60,0) 68%); filter:blur(6px); z-index:0; }
.hero-img{ position:relative; z-index:1; width:min(100%, 450px); filter:drop-shadow(0 26px 38px rgba(45,58,22,.24)); }
.float-badge{ position:absolute; z-index:2; background:var(--paper); border:1px solid var(--line); box-shadow:var(--shadow); border-radius:12px; padding:.55rem .8rem; font-size:.8rem; font-weight:700; color:var(--green-dark); max-width:172px; line-height:1.3; }
.float-badge strong{ color:var(--gold-dark); }
.float-badge--1{ top:8%; left:-2%; }
.float-badge--2{ bottom:10%; right:-2%; }

/* =====================================================================
   SOCIAL PROOF BAR
   ===================================================================== */
.proofbar{ background:var(--green-dark); color:#eaf0e2; }
.proofbar-inner{ display:flex; align-items:center; justify-content:center; gap:1rem; flex-wrap:wrap; padding-block:1rem; text-align:center; }
.proofbar p{ margin:0; font-size:.98rem; }
.proofbar strong{ color:#fff; }

/* =====================================================================
   SECTION SURFACES
   ===================================================================== */
.section--creme{ background:var(--creme); }
.section--beige{ background:var(--beige); }
.section--sage{ background:var(--sage); }

/* =====================================================================
   CARDS (Bienenprodukte etc.)
   ===================================================================== */
.cards-3{ display:grid; grid-template-columns:1fr; gap:1.2rem; }
.feature-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); padding:2rem 1.6rem; box-shadow:var(--shadow-sm); text-align:center; transition:transform .2s ease, box-shadow .2s ease; }
.feature-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.hex-icon{ position:relative; display:inline-grid; place-items:center; width:60px; height:60px; margin-bottom:.8rem; }
.hex-icon .hex-frame{ display:block; }
.hex-icon .line-icon{ position:absolute; inset:0; margin:auto; }
.feature-card p{ color:var(--text-soft); margin:0; }

/* =====================================================================
   "AUF EINEN BLICK", Prüfliste (dunkelgrüne Box)
   ===================================================================== */
.checklist-box{
  background:linear-gradient(160deg, var(--green-dark), var(--green-deep));
  color:#e9efe1; border-radius:var(--radius-lg); padding:clamp(1.6rem,4vw,2.6rem);
  box-shadow:var(--shadow);
}
.checklist-box h2{ color:#fff; }
.checklist-box .lead{ color:#cddac0; margin-bottom:1.6rem; }
.check-list{ list-style:none; margin:0; padding:0; display:grid; gap:1rem; counter-reset:cl; }
.check-list li{ display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:start; counter-increment:cl; }
.check-list li::before{
  content:counter(cl); grid-row:1 / span 2; width:38px; height:38px; display:grid; place-items:center;
  font-weight:800; font-size:1.05rem; border-radius:50%; color:#fff; background:var(--green);
}
.check-list li:nth-child(even)::before{ background:var(--gold); color:var(--green-deep); }
.check-q{ font-weight:700; color:#fff; }
.check-a{ color:#cddac0; font-size:.96rem; }
.check-a strong{ color:var(--gold-on-dark); }

/* =====================================================================
   MELITTIN / Zwei Zahlen
   ===================================================================== */
.twonum-grid{ display:grid; grid-template-columns:1fr; gap:1.2rem; }
.num-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); padding:1.8rem; box-shadow:var(--shadow-sm); }
.num-card .tag{ display:inline-block; font-weight:800; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:var(--gold-dark); background:var(--gold-box); padding:.25em .7em; border-radius:999px; margin-bottom:.7rem; }
.num-card h3{ font-size:1.15rem; }
.num-card p{ color:var(--text-soft); margin:0; }
.num-card--primary{ border-color:var(--green); box-shadow:var(--shadow); }

.melittin-stats{ display:grid; gap:1rem; margin-top:1.6rem; }
.stat{ background:var(--green-dark); border-radius:var(--radius); padding:1.3rem 1.4rem; color:#e9efe1; }
.stat-num{ display:block; font-weight:800; font-size:clamp(1.9rem,1.4rem+2.4vw,2.7rem); line-height:1; color:var(--gold-on-dark); margin-bottom:.35rem; }
.stat-label{ color:#cddac0; font-size:.95rem; }

/* =====================================================================
   INCI-Argument
   ===================================================================== */
.inci-visual{ background:var(--beige); border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(1.4rem,3vw,2rem); box-shadow:var(--shadow-sm); }
.inci-scale{ display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; margin:.4rem 0 1rem; }
.inci-pos{ display:inline-grid; place-items:center; min-width:34px; height:34px; padding:0 .4rem; border-radius:8px; background:#fff; border:1px solid var(--line); font-weight:700; font-size:.85rem; color:var(--text-soft); }
.inci-pos--mark{ background:var(--green); color:#fff; border-color:var(--green); font-size:.95rem; box-shadow:0 6px 16px -8px rgba(74,124,58,.8); }
.inci-pos--dots{ border:0; background:transparent; letter-spacing:2px; }

/* =====================================================================
   Info-Boxen (Gut zu wissen / Geheimtipp / Cross-Link)
   ===================================================================== */
.box{ border-radius:var(--radius); padding:1.4rem 1.5rem; margin:1.4rem 0; }
.box .box-kicker{ display:block; font-weight:800; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:.4rem; }
.box p{ margin:0; }
.box--know{ background:var(--sage); border-left:5px solid var(--green-dark); }
.box--know .box-kicker{ color:var(--green-dark); }
.box--tip{ background:var(--honey-light); border-left:5px solid var(--gold-light); }
.box--tip .box-kicker{ color:var(--gold-dark); }
.box--cross{ background:var(--sage); border-left:5px solid var(--green); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; }
.box--cross .box-kicker{ color:var(--green-text); }
.box--cross .cross-text{ flex:1 1 320px; }
.box--cross h3{ margin:0 0 .2rem; }

/* =====================================================================
   Marktvergleich (generisch, ohne Namen)
   ===================================================================== */
.compare{ width:100%; border-collapse:collapse; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); }
.compare caption{ caption-side:bottom; text-align:left; color:var(--text-soft); opacity:.8; font-size:.82rem; padding:.7rem .2rem 0; }
.compare th, .compare td{ text-align:left; padding:.85rem 1rem; border-bottom:1px solid var(--line); vertical-align:top; font-size:.95rem; }
.compare thead th{ background:var(--green-dark); color:#fff; font-size:.9rem; }
.compare thead th:last-child{ background:var(--green); }
.compare tbody th{ font-weight:700; color:var(--green-dark); background:var(--beige); }
.compare td.riviera{ font-weight:700; color:var(--green-dark); background:#f5f8f1; }
.compare tr:last-child th, .compare tr:last-child td{ border-bottom:0; }

/* =====================================================================
   KRÄUTER
   ===================================================================== */
.herb-grid{ list-style:none; padding:0; margin:0 0 1.6rem; display:grid; grid-template-columns:repeat(2,1fr); gap:.8rem; }
.herb-grid li{ display:flex; flex-direction:column; gap:.1rem; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:1rem 1.1rem; box-shadow:var(--shadow-sm); }
.herb-icon{ color:var(--green); margin-bottom:.15rem; }
.herb-grid strong{ color:var(--green-dark); }
.herb-grid span:last-child{ color:var(--text-soft); opacity:.85; font-size:.85rem; }

.warm-callout{ display:flex; gap:1.2rem; align-items:flex-start; background:var(--creme); border:1px solid var(--gold-box); border-radius:var(--radius-lg); padding:1.7rem; box-shadow:var(--shadow-sm); }
.warm-callout-icon{ flex:0 0 auto; color:var(--gold-dark); background:#fff; border-radius:50%; width:56px; height:56px; display:grid; place-items:center; box-shadow:var(--shadow-sm); }
.warm-callout-title{ margin-bottom:.3rem; }
.warm-callout p{ margin:0; color:var(--text-soft); }

/* =====================================================================
   WÄRMEND band
   ===================================================================== */
.warm-grid{ display:grid; grid-template-columns:1fr; gap:clamp(1.6rem,4vw,2.6rem); align-items:center; }
.warm-media img{ border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); }
.warm-copy p{ color:var(--text-soft); }
.skin-note{ background:var(--paper); border:1px dashed var(--gold-light); border-radius:var(--radius); padding:1.1rem 1.2rem; font-size:.96rem; }
.skin-note strong{ color:var(--green-dark); }

/* =====================================================================
   STEPS (Wärme-Ritual)
   ===================================================================== */
.steps{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr; gap:1.2rem; }
.step{ position:relative; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); padding:2rem 1.6rem 1.6rem; text-align:center; box-shadow:var(--shadow-sm); }
.step-num{ position:absolute; top:-22px; left:50%; transform:translateX(-50%); width:46px; height:46px; display:grid; place-items:center; font-weight:800; font-size:1.25rem; color:#fff; background:var(--green); border-radius:50%; box-shadow:var(--shadow-sm); border:3px solid var(--base); }
.step:nth-child(even) .step-num{ background:var(--gold); color:var(--green-dark); }
.step h3{ margin-top:.6rem; }
.step p{ color:var(--text-soft); margin:0; }

/* =====================================================================
   PRICING
   ===================================================================== */
.pricing-grid{ display:grid; grid-template-columns:1fr; gap:1.1rem; }
.price-card{ position:relative; background:var(--paper); border:1.5px solid var(--line); border-radius:var(--radius-lg); padding:1.8rem 1.4rem; text-align:center; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:.3rem; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.price-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--gold-light); }
.price-card--popular{ border-color:var(--green); box-shadow:var(--shadow); }
.price-card--best{ border-color:var(--gold); }
.ribbon{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--green); color:#fff; font-size:.75rem; font-weight:800; padding:.3em .9em; border-radius:999px; letter-spacing:.03em; white-space:nowrap; }
.ribbon--best{ background:var(--gold); color:var(--green-deep); }
.price-card-qty{ font-size:1.3rem; margin:.2rem 0 0; }
.price-card-price{ font-size:1.5rem; font-weight:800; color:var(--green-dark); margin:.1rem 0; }
.price-card-price s{ font-size:.95rem; font-weight:400; margin-left:.3rem; }
.price-card-unit{ color:var(--text-soft); opacity:.85; font-size:.83rem; margin:0; }
.price-card-ship{ color:var(--green); font-size:.82rem; font-weight:700; margin:.15rem 0 0; }
.price-card-save{ color:var(--gold-dark); font-weight:800; font-size:.9rem; margin:.1rem 0 .8rem; min-height:1.2em; }
.price-card .btn{ margin-top:auto; width:100%; }

/* =====================================================================
   REVIEWS
   ===================================================================== */
.review-aggregate{ margin:1rem 0 0; font-size:1.08rem; color:var(--green-dark); font-weight:700; }
.review-note{ color:var(--text-soft); opacity:.9; font-size:.9rem; max-width:62ch; margin:0 auto 1.6rem; text-align:center; }

/* =====================================================================
   FAQ + Disclosures
   ===================================================================== */
.faq{ display:grid; gap:.7rem; }
.faq-item, .disclosure{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.faq-item summary, .disclosure summary{ list-style:none; cursor:pointer; padding:1.1rem 1.3rem; font-weight:700; color:var(--green-dark); display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.faq-item summary::-webkit-details-marker, .disclosure summary::-webkit-details-marker{ display:none; }
.faq-item summary::after, .disclosure summary::after{ content:"+"; flex:0 0 auto; color:var(--gold-dark); font-size:1.4rem; line-height:1; transition:transform .2s ease; }
.faq-item[open] summary::after, .disclosure[open] summary::after{ content:"\2212"; }
.faq-item summary:focus-visible, .disclosure summary:focus-visible{ outline:3px solid var(--green); outline-offset:-3px; }
.faq-body, .disclosure-body{ padding:0 1.3rem 1.2rem; color:var(--text-soft); }
.faq-body p{ margin:0; }
.disclosure-body{ padding-top:.2rem; }
.inci{ font-size:.86rem; color:var(--text-soft); opacity:.9; line-height:1.7; margin:0; }
.spec-list{ list-style:none; margin:0; padding:0; }
.spec-list li{ display:flex; justify-content:space-between; gap:1rem; padding:.6rem 0; border-bottom:1px solid var(--line); font-size:.95rem; }
.spec-list li:last-child{ border-bottom:0; }
.spec-list span{ color:var(--text-soft); opacity:.8; }

/* =====================================================================
   FINAL CTA
   ===================================================================== */
.final-cta{ background:linear-gradient(160deg, var(--green-dark), var(--green-deep)); color:#fff; text-align:center; padding:clamp(3rem,7vw,5rem) 0; }
.final-cta-inner{ max-width:640px; }
.final-cta h2{ color:#fff; }
.final-cta p{ color:#d3e0c8; }
.final-cta .btn{ margin:.8rem 0 .6rem; }
.final-cta-trust{ font-size:.85rem; color:#a9c199; margin:0; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer{ background:var(--green-deep); color:#c4d2b7; padding-top:clamp(2.4rem,6vw,3.6rem); }
.footer-grid{ display:grid; grid-template-columns:1fr; gap:2rem; padding-bottom:2.2rem; }
.brand--footer .brand-name{ color:#fff; }
.footer-about{ font-size:.9rem; color:#a7bb99; max-width:34ch; margin-top:.8rem; }
.footer-col h3{ color:#fff; font-size:1rem; margin-bottom:.9rem; }
.footer-col address{ font-style:normal; font-size:.92rem; line-height:1.9; color:#c4d2b7; }
.footer-col address a{ color:#e6c886; }
.footer-links{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.footer-links a{ color:#c4d2b7; font-size:.92rem; }
.footer-links a:hover{ color:#fff; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); padding-block:1.3rem; }
.footer-bottom p{ margin:0; font-size:.82rem; color:#9bb18c; }
.footer-bottom a{ color:#e6c886; }

/* =====================================================================
   STICKY MOBILE BUY BAR
   ===================================================================== */
.mobile-buybar{ position:fixed; left:0; right:0; bottom:0; z-index:90; display:flex; align-items:center; gap:1rem; justify-content:space-between; background:var(--paper); border-top:1px solid var(--line); padding:.6rem clamp(1rem,4vw,1.4rem); box-shadow:0 -8px 24px -12px rgba(45,58,22,.35); transform:translateY(120%); transition:transform .3s ease; }
.mobile-buybar.is-visible{ transform:translateY(0); }
.mobile-buybar-price{ display:flex; flex-direction:column; line-height:1.15; }
.mobile-buybar-price strong{ font-size:1.15rem; color:var(--green-dark); }
.mobile-buybar-price small{ color:var(--text-soft); opacity:.8; font-size:.72rem; }
.mobile-buybar .btn{ flex:0 0 auto; }

/* =====================================================================
   REVEAL animation
   ===================================================================== */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none; }
  .btn:hover, .feature-card:hover, .price-card:hover{ transform:none; }
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (min-width:560px){
  .cards-3{ gap:1.4rem; }
  .steps{ grid-template-columns:repeat(3,1fr); gap:1.8rem; }
  .pricing-grid{ grid-template-columns:repeat(2,1fr); }
  .float-badge--1{ left:2%; }
  .float-badge--2{ right:2%; }
}
@media (min-width:820px){
  .cards-3{ grid-template-columns:repeat(3,1fr); }
  .herb-grid{ grid-template-columns:repeat(4,1fr); }
  .twonum-grid{ grid-template-columns:1fr 1fr; }
  .warm-grid{ grid-template-columns:1fr 1fr; }
  .footer-grid{ grid-template-columns:1.6fr 1fr 1fr 1fr; }
  .pricing-grid{ grid-template-columns:repeat(4,1fr); }
  .check-list{ grid-template-columns:1fr 1fr; gap:1.4rem 2rem; }
}
@media (min-width:900px){
  .main-nav{ display:flex; }
  .header-cta{ display:inline-flex; }
  .nav-toggle{ display:none; }
  .mobile-nav{ display:none; }
  .hero-grid{ grid-template-columns:1.05fr .95fr; }
  .mobile-buybar{ display:none !important; }
  .hero-lead{ font-size:1.2rem; }
}
@media (min-width:1040px){
  .herb-grid{ grid-template-columns:repeat(7,1fr); }
}

/* =====================================================================
   LEGAL PAGES (Impressum / Datenschutz)
   ===================================================================== */
.legal-header{ position:sticky; top:0; z-index:100; background:var(--paper); border-bottom:1px solid var(--line); }
.legal-header .header-inner{ justify-content:space-between; }
.backlink{ margin-left:auto; font-weight:700; font-size:.95rem; color:var(--green-dark); }
.backlink svg{ vertical-align:-2px; }
.legal{ max-width:820px; margin:0 auto; padding:clamp(2.2rem,6vw,3.6rem) clamp(1.1rem,4vw,2.4rem); }
.legal h1{ margin-bottom:.2em; }
.legal .lead{ color:var(--text-soft); margin-bottom:2rem; }
.legal h2{ font-size:1.25rem; margin:2.2rem 0 .6rem; padding-top:1.4rem; border-top:1px solid var(--line); }
.legal h2:first-of-type{ border-top:0; padding-top:0; }
.legal p, .legal li{ color:var(--text-soft); }
.legal address{ font-style:normal; line-height:1.9; }
.legal ul{ padding-left:1.2rem; }
.legal a{ color:var(--green-text); }