/* =========================================================================
   v1 (A) - "VERSTEHEN STATT VERZICHTEN"  ·  KOPF / Methode / Autoritaet
   Konzeptbuch-LP  ·  mobile-first  ·  klar, kompetent, vertrauensbildend
   ========================================================================= */

:root{
  --ink:#16241f;            /* fast-schwarz, gruenstichig */
  --body:#33433d;           /* Fliesstext */
  --muted:#586a63;
  --brand:#1f7a5a;          /* tiefes Gruen */
  --brand-dark:#124a37;
  --brand-soft:#e7f3ee;     /* helles Gruen-Flaechen */
  --cta:#17a05f;            /* CTA-Gruen */
  --cta-dark:#0f8a4f;
  --gold:#e8a83a;           /* Sterne / Akzent warm */
  --line:#e4ebe7;
  --bg:#ffffff;
  --bg-soft:#f5f8f6;
  --bg-deep:#102a21;        /* dunkle Sektionen */
  --radius:18px;
  --radius-sm:12px;
  --shadow:0 18px 50px -22px rgba(16,42,33,.45);
  --shadow-sm:0 6px 22px -12px rgba(16,42,33,.35);
  --maxw:1120px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font);color:var(--body);background:var(--bg);
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{color:var(--ink);line-height:1.12;margin:0;font-weight:800;letter-spacing:-.02em}
h1{font-size:clamp(1.95rem,7.4vw,3.6rem);font-weight:900}
h2{font-size:clamp(1.6rem,5.4vw,2.7rem)}
h3{font-size:1.2rem;font-weight:800}
p{margin:0 0 1rem}
strong{color:var(--ink);font-weight:700}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 20px}
section{padding:clamp(3.2rem,8vw,5.6rem) 0}
.eyebrow{display:inline-flex;align-items:center;gap:.5em;font-weight:800;text-transform:uppercase;
  letter-spacing:.12em;font-size:.74rem;color:var(--brand);margin-bottom:.9rem}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--brand);border-radius:2px}
.lead{font-size:1.12rem;color:var(--body)}
.center{text-align:center}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;cursor:pointer;
  font-family:inherit;font-weight:800;font-size:1.06rem;line-height:1.1;text-decoration:none;
  border:0;border-radius:999px;padding:1.05rem 1.7rem;transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
  text-align:center}
.btn--cta{background:linear-gradient(180deg,var(--cta),var(--cta-dark));color:#fff;
  box-shadow:0 14px 30px -10px rgba(15,138,79,.6);width:100%}
.btn--cta:hover{transform:translateY(-2px);box-shadow:0 20px 38px -10px rgba(15,138,79,.7)}
.btn--cta:active{transform:translateY(0)}
.btn--ghost{background:#fff;color:var(--brand-dark);border:2px solid var(--line)}
.btn--ghost:hover{border-color:var(--brand)}
.btn .sub{font-weight:600;font-size:.82rem;opacity:.9}
@media(min-width:560px){.btn--cta{width:auto}}
/* Handybreite (Befund Geräte-Test 25.09.2026): Knopftext + Pfeil als EIN Textfluss (inline-block, alle Breiten; in Flex-Containern ohnehin Block), damit der Pfeil nicht allein neben dem
   umgebrochenen Text schwebt; Umbruch ausgewogen. Überschriften ohne einzelnes Wort in der letzten Zeile. */
.btn--cta{display:inline-block;vertical-align:middle;text-wrap:balance}
@media(max-width:559px){.btn--cta{padding-left:1.2rem;padding-right:1.2rem}}
h1,h2,h3{text-wrap:balance}

.cta-glow{position:relative}
.cta-glow::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 rgba(23,160,95,.55);
  animation:pulse 2.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(23,160,95,.5)}70%{box-shadow:0 0 0 16px rgba(23,160,95,0)}100%{box-shadow:0 0 0 0 rgba(23,160,95,0)}}

.trust-inline{display:inline-flex;align-items:center;gap:.5rem;font-size:.92rem;color:var(--muted);font-weight:600}
.stars{color:var(--gold);letter-spacing:1px;font-size:1rem}
.ssl{display:inline-flex;align-items:center;gap:.35em;font-size:.82rem;color:var(--muted);font-weight:600}

/* ---- Topbar ---- */
.topbar{background:var(--bg-deep);color:#dfeee7;text-align:center;font-size:.84rem;font-weight:600;
  padding:.55rem 16px;letter-spacing:.01em}
.topbar strong{color:#fff}

/* ---- Hero (Vorbild: High-Protein-LP) ---- */
.hero{position:relative;color:#fff;overflow:hidden;
  background:linear-gradient(160deg,#0b231a 0%,#11402f 40%,#185a40 100%);padding:16px 0 30px}
.hero__glow{position:absolute;top:-10%;left:50%;width:120%;height:80%;transform:translateX(-50%);
  background:radial-gradient(circle,rgba(232,168,58,.14) 0%,transparent 60%);pointer-events:none}
.hero__inner{position:relative;display:grid;grid-template-columns:1fr;
  grid-template-areas:"lead" "visual" "rest";gap:8px;align-items:center}
.hero__lead{grid-area:lead}.hero__rest{grid-area:rest}
.hero__visual{grid-area:visual;position:relative;display:flex;justify-content:center;align-items:center;padding:8px 0}
.hero__brand{font-weight:800;letter-spacing:.05em;font-size:.95rem;color:rgba(255,255,255,.92);margin-bottom:10px}
.hero__brand b{font-weight:900;color:#fff}
.hero__stars{display:inline-flex;align-items:center;gap:8px;margin-bottom:9px;font-size:.84rem;color:rgba(255,255,255,.9);
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:5px 12px}
.hero__stars .stars{color:var(--gold)}
.hero__stars strong{color:#fff}
.hero__eyebrow{font-weight:800;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:#7fd9b3;margin-bottom:9px}
.hero h1{font-weight:900;font-size:clamp(1.7rem,7.1vw,3.3rem);line-height:1.08;letter-spacing:-.015em;color:#fff;
  text-shadow:0 2px 20px rgba(0,0,0,.25);margin:0}
.hero h1 .hl{color:var(--gold)}
.hero__sub{font-size:1rem;color:rgba(255,255,255,.9);margin:10px 0 16px;max-width:540px}
.hero__sub strong{color:#fff}
.hero__cta{display:flex;flex-direction:column;gap:10px}
.hero__pills{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:14px;font-size:.82rem;color:rgba(255,255,255,.92);font-weight:600}
.hero__pills span{display:inline-flex;align-items:center;gap:.4em;white-space:nowrap}
.hero__scroll{display:flex;flex-direction:column;align-items:center;gap:7px;margin-top:22px}
.hero__scroll-label{font-size:.7rem;text-transform:uppercase;letter-spacing:2.5px;color:rgba(255,255,255,.5);font-weight:700}
.hero__scroll-line{width:2px;height:36px;background:rgba(255,255,255,.14);border-radius:2px;overflow:hidden;position:relative}
.hero__scroll-line::after{content:"";position:absolute;inset:0;background:var(--gold);animation:heroScroll 2s infinite}
@keyframes heroScroll{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.book3d{position:relative;display:inline-flex}
.book3d__glow{position:absolute;inset:-14%;background:radial-gradient(circle,rgba(232,168,58,.24) 0%,transparent 64%);filter:blur(14px);z-index:0}
.book3d figure{position:relative;z-index:1;margin:0;line-height:0}
.book3d img{height:200px;width:auto;max-width:100%;display:block;filter:drop-shadow(0 16px 24px rgba(0,0,0,.42))}
.hero__badge-float{position:absolute;top:-4px;right:-10%;z-index:3;background:var(--gold);color:#173a2c;
  font-weight:900;font-size:.74rem;width:62px;height:62px;border-radius:50%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;line-height:1.05;transform:rotate(8deg);
  box-shadow:0 8px 20px -6px rgba(0,0,0,.5)}
@media(min-width:880px){
  .hero{padding:40px 0 54px}
  .hero__inner{grid-template-columns:1.06fr .94fr;grid-template-areas:"lead visual" "rest visual";gap:0 36px}
  .hero__visual{align-self:center}
  .hero__scroll{display:none}
  .book3d img{height:430px}
  .hero__cta{flex-direction:row;align-items:center;flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){.hero__scroll-line::after{animation:none}}

/* ---- Empathie / Problem ---- */
.problem{background:var(--bg)}
.problem__cards{display:grid;gap:1rem;margin-top:1.8rem}
.pcard{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem 1.3rem 1.2rem}
.pcard .ic{font-size:1.5rem;margin-bottom:.5rem}
.pcard h3{margin-bottom:.3rem;font-size:1.05rem}
.pcard p{margin:0;font-size:.97rem;color:var(--body)}
.problem__turn{margin-top:1.8rem;font-size:1.18rem;font-weight:700;color:var(--ink);text-align:center;max-width:40ch;margin-left:auto;margin-right:auto}
.problem__turn b{color:var(--brand)}
@media(min-width:720px){.problem__cards{grid-template-columns:repeat(3,1fr)}}

/* ---- Die Falle (Mechanismus) - dunkle Sektion ---- */
.trap{background:var(--bg-deep);color:#d8e8e1}
.trap h2{color:#fff}
.trap .eyebrow{color:#7fd9b3}
.trap .eyebrow::before{background:#7fd9b3}
.trap__grid{display:grid;gap:2rem;margin-top:1.6rem;align-items:center}
.trap__chart{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);padding:1.3rem}
.trap__chart svg{width:100%;height:auto;display:block}
.trap__steps{display:grid;gap:.9rem;margin:1.4rem 0 0}
.tstep{display:flex;gap:.85rem;align-items:flex-start}
.tstep .n{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:#1c5640;color:#9ff0c9;
  display:grid;place-items:center;font-weight:800;font-size:.9rem}
.tstep p{margin:0;color:#cfe3db;font-size:.98rem}
.tstep b{color:#fff}
.trap__punch{margin-top:1.6rem;font-size:1.15rem;font-weight:700;color:#fff;background:rgba(127,217,179,.12);
  border-left:3px solid #7fd9b3;padding:.9rem 1.1rem;border-radius:0 12px 12px 0}
@media(min-width:880px){.trap__grid{grid-template-columns:1.1fr .9fr}}

/* ---- Das System (3 Regeln) ---- */
.system{background:var(--brand-soft)}
.rules{display:grid;gap:1rem;margin-top:1.8rem}
.rule{background:#fff;border-radius:var(--radius);padding:1.4rem;box-shadow:var(--shadow-sm);position:relative;border:1px solid #d9ece3}
.rule__time{display:inline-flex;align-items:center;gap:.4em;font-weight:800;color:var(--brand);font-size:.9rem;
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem}
.rule h3{font-size:1.5rem;margin-bottom:.2rem}
.rule h3 .u{color:var(--brand)}
.rule p{margin:0;font-size:.96rem}
.rule__big{font-size:2.1rem;font-weight:900;color:var(--ink);line-height:1}
.system__extra{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-top:1.8rem}
.chip{background:#fff;border:1px solid #cfe6da;border-radius:999px;padding:.55rem 1rem;font-weight:700;
  font-size:.9rem;color:var(--brand-dark);display:inline-flex;align-items:center;gap:.45em}
@media(min-width:720px){.rules{grid-template-columns:repeat(3,1fr)}}

/* ---- Was steckt drin ---- */
.inside{background:var(--bg)}
.inside__grid{display:grid;gap:2rem;margin-top:1.6rem;align-items:start}
.feat{display:flex;gap:.9rem;padding:.5rem 0;align-items:flex-start}
.feat .ic{flex:0 0 auto;width:42px;height:42px;border-radius:12px;background:var(--brand-soft);color:var(--brand);
  display:grid;place-items:center;font-size:1.25rem}
.feat h3{font-size:1.06rem;margin-bottom:.15rem}
.feat p{margin:0;font-size:.95rem;color:var(--body)}
.inside__note{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem;
  font-size:1.02rem;color:var(--ink);font-weight:600}
.inside__note b{color:var(--brand)}
@media(min-width:880px){.inside__grid{grid-template-columns:1.2fr .8fr}}

/* ---- Benni ---- */
.benni{background:var(--bg-soft)}
.benni__card{background:#fff;border-radius:24px;box-shadow:var(--shadow);overflow:hidden;display:grid;gap:0}
.benni__photo{overflow:hidden;min-height:280px}
.benni__photo img{width:100%;height:100%;object-fit:cover;display:block}
.benni__body{padding:1.6rem 1.4rem 1.8rem}
.benni__body h2{margin-bottom:.2rem}
.benni__role{color:var(--brand);font-weight:800;font-size:.9rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:1rem}
.benni__stats{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.1rem;border-top:1px solid var(--line);padding-top:1.1rem}
.benni__stats .s b{display:block;font-size:1.4rem;color:var(--ink);font-weight:900;line-height:1}
.benni__stats .s span{font-size:.8rem;color:var(--muted);font-weight:600}
@media(min-width:820px){.benni__card{grid-template-columns:.85fr 1.15fr;align-items:stretch}
  .benni__photo img{object-fit:cover}}

/* ---- Trust / Reviews ---- */
.trust{background:var(--bg)}
.numbers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:1.6rem 0}
.num{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius-sm);padding:1.1rem;text-align:center}
.num b{display:block;font-size:clamp(1.25rem,6vw,1.7rem);color:var(--brand);font-weight:900;line-height:1}
.num span{font-size:.82rem;color:var(--muted);font-weight:600}
.reviews{display:grid;gap:1rem;margin-top:.4rem}
.review{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem;box-shadow:var(--shadow-sm)}
.review{min-width:0}.review p{overflow-wrap:anywhere}
.review .rstars{color:var(--gold);font-size:1rem;letter-spacing:1px}
.review p{font-size:.97rem;color:var(--body);margin:.5rem 0 .7rem}
.review .who{font-weight:700;color:var(--ink);font-size:.9rem;display:flex;align-items:center;gap:.5em}
.review .verified{font-size:.72rem;color:var(--brand);font-weight:700;background:var(--brand-soft);padding:.12rem .5rem;border-radius:999px}
@media(min-width:720px){.numbers{grid-template-columns:repeat(4,minmax(0,1fr))}.reviews{grid-template-columns:repeat(3,1fr)}}

/* ---- Blick ins Buch ---- */
.peek{background:var(--bg-deep);color:#d8e8e1}
.peek h2{color:#fff}.peek .eyebrow{color:#7fd9b3}.peek .eyebrow::before{background:#7fd9b3}
.peek__track{display:grid;grid-auto-flow:column;grid-auto-columns:78%;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:1.6rem 0 .8rem;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.peek__track::-webkit-scrollbar{display:none}
.peek__slide{scroll-snap-align:center;border-radius:14px;overflow:hidden;box-shadow:0 20px 44px -20px rgba(0,0,0,.6);background:#fff;aspect-ratio:5/7}
.peek__slide img{width:100%;height:100%;object-fit:cover;display:block}
.peek__cap{font-size:.82rem;color:#9fc4b6;text-align:center;margin-top:.4rem}
@media(min-width:720px){.peek__track{grid-auto-columns:31%}}

/* ---- Angebot ---- */
.offer{background:var(--bg-soft)}
.plans{display:grid;gap:1.2rem;margin-top:1.8rem}
.plan{background:#fff;border:1px solid var(--line);border-radius:22px;padding:1.6rem;box-shadow:var(--shadow-sm);position:relative;display:flex;flex-direction:column}
.plan--best{border:2px solid var(--brand);box-shadow:var(--shadow)}
.plan__tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--brand);color:#fff;
  font-weight:800;font-size:.78rem;padding:.35rem .9rem;border-radius:999px;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}
.plan__fmt{font-weight:800;color:var(--ink);font-size:1.2rem}
.plan__sub{color:var(--muted);font-size:.9rem;margin-bottom:1rem}
.plan__price{display:flex;align-items:baseline;gap:.5rem;margin-bottom:.2rem}
.plan__price .now{font-size:2.3rem;font-weight:900;color:var(--brand);line-height:1}
.plan__price .old{text-decoration:line-through;color:var(--muted);font-size:1.05rem}
.plan__save{display:inline-block;background:#fdeccf;color:#9a6a14;font-weight:800;font-size:.8rem;padding:.2rem .6rem;border-radius:999px;margin-bottom:1rem}
.plan ul{list-style:none;padding:0;margin:0 0 1.3rem;display:grid;gap:.55rem}
.plan li{display:flex;gap:.55em;font-size:.95rem;color:var(--body)}
.plan li::before{content:"✓";color:var(--cta);font-weight:900}
.plan .btn{margin-top:auto}
.offer__guarantee{display:flex;gap:.9rem;align-items:center;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:1.1rem 1.2rem;margin-top:1.4rem;box-shadow:var(--shadow-sm)}
.offer__guarantee .ic{font-size:2rem}
.offer__guarantee b{color:var(--ink)}
.offer__guarantee p{margin:0;font-size:.92rem;color:var(--muted)}
.pay{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;align-items:center;margin-top:1.3rem}
.pay span{background:#fff;border:1px solid var(--line);border-radius:8px;padding:.4rem .7rem;font-size:.78rem;font-weight:700;color:var(--body)}
@media(min-width:760px){.plans{grid-template-columns:repeat(2,1fr);align-items:stretch}}

/* ---- FAQ ---- */
.faq{background:var(--bg)}
.faq__list{display:grid;gap:.7rem;margin-top:1.6rem;max-width:760px;margin-left:auto;margin-right:auto}
.qa{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
.qa summary{cursor:pointer;padding:1.1rem 1.2rem;font-weight:700;color:var(--ink);font-size:1.02rem;
  list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";font-size:1.4rem;color:var(--brand);font-weight:700;transition:transform .2s}
.qa[open] summary::after{transform:rotate(45deg)}
.qa__a{padding:0 1.2rem 1.1rem;color:var(--body);font-size:.97rem}

/* ---- Final CTA ---- */
.final{background:linear-gradient(180deg,var(--brand-dark),var(--bg-deep));color:#eaf5f0;text-align:center}
.final h2{color:#fff;max-width:18ch;margin:0 auto .8rem}
.final p{color:#c7ddd4;max-width:46ch;margin:0 auto 1.6rem}
.final .btn--cta{max-width:420px;margin:0 auto}
.final .trust-inline{color:#a9c8bc;margin-top:1rem;justify-content:center;display:flex;flex-wrap:wrap}

/* ---- Footer ---- */
.foot{background:var(--bg-deep);color:#8fb0a4;font-size:.84rem;text-align:center;padding:2rem 16px 4.6rem}
.foot a{color:#bcd7cc;text-decoration:none}
.foot__links a{display:inline-block;padding:.72rem .55rem}
.foot__links{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;justify-content:center;margin-bottom:.7rem}

/* ---- Sticky CTA ---- */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(255,255,255,.97);
  backdrop-filter:blur(10px);border-top:1px solid var(--line);box-shadow:0 -10px 30px -18px rgba(16,42,33,.4);
  transform:translateY(110%);transition:transform .3s ease;padding:.7rem 14px env(safe-area-inset-bottom)}
.sticky.show{transform:translateY(0)}
.sticky__in{display:flex;align-items:center;gap:.8rem;max-width:var(--maxw);margin:0 auto}
.sticky__price{flex:0 0 auto}
.sticky__price .now{font-weight:900;color:var(--brand);font-size:1.25rem;line-height:1}
.sticky__price .old{text-decoration:line-through;color:var(--muted);font-size:.8rem}
.sticky__price .lbl{font-size:.68rem;color:var(--muted);font-weight:700}
.sticky .btn--cta{flex:1;padding:.85rem 1rem;font-size:1rem}
@media(min-width:880px){.sticky{display:none}}

/* reduce motion */
@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important;transition:none!important}}

/* Schleier des Korb-Checks (Auftrag 17.08.2026): Während ein Kassen-Sprung schwebt,
   zeigen die Kauf-Knöpfe sichtbar "beschäftigt" - Klicks werden vom Skript geschluckt,
   das darf nicht wie ein kaputter Knopf aussehen (Fan-out-Nebenbefund P3). */
body.korb-kasse-aktiv a[data-korb-produkt]{opacity:.55;cursor:progress;pointer-events:auto}

/* Nachzug 23.09.2026: Preis im ersten Bildschirm + Garantie am Kaufknopf (Maßstab Protein-Seite) */
.hero__price{margin:.7rem 0 0;font-size:1rem;color:rgba(255,255,255,.88);font-weight:600}
.hero__price b{color:#fff;font-size:1.25rem;font-weight:800}
.hero__price s{opacity:.7;margin-left:2px}
.plan__guar{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:.7rem;font-size:.84rem;font-weight:700;color:var(--muted)}
.plan__guar svg{width:16px;height:16px;flex:0 0 auto;color:var(--cta)}
/* Sehr schmale Handys (320 px): Bewertungsplakette einzeilig und kompakt (Geräte-Test 25.09.2026). Steht am Ende, damit sie die Grundregel überschreibt. */
@media(max-width:359px){.hero__stars{white-space:nowrap;font-size:.7rem;gap:5px;padding-left:10px;padding-right:10px}}
/* Leiste unten (87-89 px) darf am Seitenende nichts verdecken (Sichtprüfung 25.09.2026: Kontaktzeile lag unter der Leiste). */
@media(max-width:879px){.foot{padding-bottom:calc(7rem + env(safe-area-inset-bottom,0px))}}
/* Vertrauenszeile im Schlussblock als normaler Textfluss: Umbrüche nur an den gewollten Stellen, keine Zeile beginnt mit "·" (Sichtprüfung 25.09.2026). */
.final .trust-inline{display:block;text-align:center;line-height:1.7}

/* ==== Runde 3 (27.09.2026, Bennis Punkte 26.09.): erster Blick, Kopfzeile, Leiste unten ==== */
/* Kopfzeile Herbst-Rabatt: EINE Zeile auf jedem Gerät, nie unter 12 px (Mechanik der Heißluftfritteusen-LP); unter 375 px fällt nur das Blatt weg. */
.topbar{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:700;line-height:1.3;padding:9px 12px;letter-spacing:.01em}
.topbar strong{color:var(--gold)}
.topbar__cd{color:#ffb547;font-weight:800;font-variant-numeric:tabular-nums}
@media(max-width:767px){.topbar{font-size:12px;letter-spacing:0;padding:7px 10px}}
@media(max-width:374px){.topbar__blatt{display:none}}
/* Autorenzeile statt "LOWCARB BENNI" (Vorschlag zu Punkt 3, Benni entscheidet am Bild) */
.hero__author{display:flex;align-items:center;gap:8px;margin-bottom:9px;font-size:.84rem;font-weight:600;color:rgba(255,255,255,.85)}
.hero__author b{color:#fff;font-weight:800}
.hero__author img{width:30px;height:30px;flex:0 0 auto;border-radius:50%;object-fit:cover;object-position:42% 32%;border:2px solid var(--gold)}
/* Preis als eigener Block (Handy: neben dem Buch) */
.hero__price{grid-area:price}
.hero__price-now b{white-space:nowrap}
/* Kaufblock: Knopf + Vorteile gehören zusammen, Vorteile ZENTRIERT unter dem Knopf (Bennis Punkt 1) */
.hero__buy{max-width:460px}
.hero__buy .btn--cta{width:100%}
.hero__pills{justify-content:center;text-align:center;margin-top:12px}
@media(min-width:880px){
  .hero__inner{grid-template-areas:"lead visual" "price visual" "rest visual"}
}
@media(max-width:879px){
  .hero{padding:12px 0 20px}
  .hero__inner{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"lead lead" "visual price" "rest rest";gap:10px 16px}
  .hero__stars{margin-bottom:8px}
  .hero__eyebrow{margin-bottom:6px}
  .hero h1{font-size:clamp(1.36rem,6.1vw,2.3rem);line-height:1.1}
  .hero__visual{padding:6px 0 0 4px;justify-content:flex-start}
  .book3d img{height:clamp(128px,36vw,210px)}
  .hero__badge-float{width:54px;height:54px;font-size:.6rem;top:-10px;right:auto;left:-14px;transform:rotate(-8deg)}
  .hero__price{margin:0;align-self:center;font-size:.92rem;line-height:1.3}
  .hero__price-lbl,.hero__price-now,.hero__price-ebook{display:block}
  .hero__price-sep{display:none}
  .hero__price-now{margin:2px 0 4px}
  .hero__price-now b{font-size:clamp(1.7rem,8vw,2.3rem);line-height:1.05;font-weight:900}
  .hero__price-now s{font-size:.95rem}
  .hero__sub{margin:2px 0 12px;font-size:.95rem;line-height:1.5}
  .hero__buy{margin:0 auto}
  .hero__scroll{margin-top:14px}
}
/* Leiste unten neu (Bennis Punkt 5): links "📖 Das Konzeptbuch" über "39,90 € statt 59,90 €", rechts der Knopf. Ab 600 px in einer Zeile. */
.sticky{padding:.65rem 14px calc(.65rem + env(safe-area-inset-bottom,0px))}
.sticky__in{gap:12px}
.sticky__info{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.sticky__titel{font-size:.84rem;font-weight:800;color:var(--ink);white-space:nowrap}
.sticky__preis{font-size:.8rem;font-weight:600;color:var(--muted);white-space:nowrap}
.sticky__preis b{font-size:1.14rem;font-weight:900;color:var(--brand)}
.sticky .btn--cta{flex:0 0 auto;width:auto;padding:.85rem 1.3rem}
@media(min-width:600px){.sticky__info{flex-direction:row;align-items:baseline;gap:.7rem}}
/* Bewertungsplakette als eigener Rasterbereich: Handy neben dem Buch über dem Preis (Kaufbox), Desktop unter der Überschrift. */
.hero__stars{grid-area:stars;justify-self:start}
@media(min-width:880px){
  .hero{padding:28px 0 44px}
  .hero__inner{grid-template-areas:"lead visual" "stars visual" "price visual" "rest visual"}
  .hero__stars{margin:14px 0 0}
  .hero h1{font-size:clamp(2.1rem,3.9vw,3.1rem)}
  .book3d img{height:clamp(340px,34vw,430px)}
}
@media(max-width:879px){
  .hero__inner{grid-template-areas:"lead lead" "visual stars" "visual price" "rest rest";row-gap:8px}
  .hero__visual{grid-row:2 / span 2;align-self:center}
  .hero__stars{align-self:end;flex-wrap:wrap;gap:2px 6px;margin:0;padding:0;border:0;background:none;font-size:.8rem;line-height:1.25}
  .hero__price{align-self:start}
  .hero__author{margin-bottom:8px}
}
@media(max-width:879px){.hero__stars-sep{display:none}.hero__stars-n{flex-basis:100%}}
/* Leiste unten auf 320-359 px: Text und Knopf passen nebeneinander (Geräte-Test 27.09.: Text stieß an den Knopf). */
@media(max-width:359px){.sticky__in{gap:8px}.sticky__titel{font-size:.76rem}.sticky__preis{font-size:.72rem}.sticky__preis b{font-size:1rem}.sticky .btn--cta{padding:.9rem .9rem;font-size:.92rem;min-height:46px}}
/* Laptop mit Browserleisten (Prüfer-Befund 27.09.: 1366x657 sichtbar, Knopf angeschnitten): Hero am Desktop flacher. */
@media(min-width:880px){
  .hero{padding:18px 0 30px}
  .hero h1{font-size:clamp(1.9rem,3.1vw,2.75rem);line-height:1.08}
  .hero__author{margin-bottom:6px}
  .hero__stars{margin-top:12px}
  .hero__price{margin-top:10px}
  .hero__sub{margin:10px 0 14px}
  .book3d img{height:clamp(300px,30vw,400px)}
}
/* Kopfzeile unter 375 px mit mehr Reserve (Ersatzschrift vor dem Laden ist breiter). */
@media(max-width:374px){.topbar{padding-left:4px;padding-right:4px}}
/* Hero atmet mit der Bildschirmhöhe (Benni 27.09.2026 am iPhone 17 Pro Max: "hart gestaut"). --luft ist 0, solange die SICHTBARE Höhe
   (svh = mit Safari-Leisten) knapp ist - kleine Handys und Laptops bleiben exakt so kompakt wie bisher -, und wächst darüber stufenlos bis
   zur Kappe. Mehr Luft genau dort, wo Benni am 27.09. im Bild markiert hat: Überschrift|Buch, Buch|Text, Text|Knopf, Knopf|Vorteile.
   Alle Zuschläge sind Innenabstände/Summanden auf die bisherigen Werte; ohne svh-Unterstützung bleibt --luft 0. */
.hero{--luft:0px}
@supports(height:100svh){
  /* Handys 360-480 px: kräftige Kurve (Bennis Abnahme am 440x850-Bild). Sonst (unter 360 px, ab 481 px bis 879 px) ist der Grundinhalt höher -
     dort eine flache Kurve, die nie schneller wächst als der Bildschirm (Summe der Faktoren 6,9 / 7 < 1; Prüfer-Befund 27.09.: 600x870 29 px drunter). */
  @media(max-width:879px){.hero{--luft:clamp(0px,calc((100svh - 720px) / 7),34px)}}
  @media(min-width:360px) and (max-width:480px){.hero{--luft:clamp(0px,calc((100svh - 700px) / 5),34px)}}
  @media(min-width:880px){.hero{--luft:clamp(0px,calc((100svh - 760px) / 6),30px)}}
}
/* Die Luft-Zuschläge gelten nur noch am Desktop; auf Handys verteilt der Browser den freien Platz (Runde 3c unten). */
@media(min-width:880px){
  .hero__inner{padding-top:calc(var(--luft) * .3)}
  .hero__author{padding-bottom:calc(var(--luft) * .4)}
  .hero__lead{padding-bottom:calc(var(--luft) * 1.2)}
  .hero__rest{padding-top:calc(var(--luft) * 1.2)}
  .hero__sub{padding-bottom:calc(var(--luft) * 1)}
  .hero__pills{padding-top:calc(var(--luft) * .8)}
  .hero__scroll{padding-top:calc(var(--luft) * .3)}
}
/* Buchzuschlag zusätzlich an die Breite gekoppelt (Codex 27.09.: 320x1000 schnitt "19.581 Bewertungen" ab) - erst ab 330 px, 1,2 px je px Breite (bei 390 px wieder voll, Codex R2 27.09.). */
@media(max-width:879px){.book3d img{height:calc(clamp(128px,36vw,210px) + min(var(--luft) * 2, max(0px, (100vw - 330px) * 1.2)))}}
@media(min-width:880px){
  .hero{padding-bottom:calc(30px + var(--luft))}
  .book3d img{height:calc(clamp(300px,30vw,400px) + var(--luft) * 2)}
}
/* ==== Runde 3c (27.09.2026, Bennis Zustimmung "smarte Nummer"): Handy-Hero verteilt den freien Platz selbst ==== */
/* Statt einer Formel (--luft aus 100svh), die die tatsächliche Inhaltshöhe nicht kennt, füllt der Hero auf Handys die sichtbare Höhe
   (svh = mit Safari-Leisten, abzüglich Kopfzeile) und der Browser verteilt den FREIEN Platz auf genau Bennis vier Stellen
   (Überschrift|Buch, Buch|Text, Text|Knopf, Knopf|Vorteile, Gewichte 1,2 / 1,2 / 1 / 0,8, je gedeckelt). Die Abstandhalter haben
   Grundmaß 0 und wachsen nur in freien Platz: der Hero kann dadurch nie über den ersten Bildschirm hinauswachsen. Ziel: die Vorteile
   enden 20 px über der Kante (abgenommenes Bild 440x850: 829 px); darunter folgen "Weiter" (83 px, beginnt knapp unter der Kante) und der Innenabstand (20 px).
   Die Buchgröße bleibt die Formel (--luft) von Runde 3b. Desktop unverändert (Kasten und Abstandhalter dort ohne Wirkung). */
.hero__box{display:contents}
.hero__luft{display:none}
@media(max-width:879px){
  .hero{--kopf:0px;display:flex;flex-direction:column}
  .topbar + .hero{--kopf:29.6px}
  .hero__inner{flex:1 0 auto;display:flex;flex-direction:column;align-items:stretch;width:100%;gap:0}
  .hero__rest,.hero__buy{display:contents}
  .hero__box{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"visual stars" "visual price";gap:8px 16px}
  .hero__box .hero__visual{grid-row:1 / span 2}
  .hero__luft{display:block;flex:1 1 0px;min-height:0}
  .hero__luft--1,.hero__luft--2{flex-grow:1.2;max-height:calc(var(--luft-max) * 1.2);margin-top:8px}
  .hero__luft--3{flex-grow:1;max-height:var(--luft-max)}
  .hero__luft--4{flex-grow:.8;max-height:calc(var(--luft-max) * .8)}
  .hero__cta,.hero__pills{width:100%;max-width:460px;margin-left:auto;margin-right:auto}
  .hero__scroll{margin-top:22px}
  .hero__scroll-label{line-height:18px}
  .hero{--luft-max:42px}
  @supports(height:100svh){.hero{min-height:calc(100svh - var(--kopf) + 83px)}}
}
@media(min-width:768px) and (max-width:879px){.topbar + .hero{--kopf:36.2px}}
/* ==== Runde 3c, Bennis Befund 28.09.2026 am Bild: "Weiter" + Balken fressen Platz und machen es unstimmig; die drei Vorteile in max. EINER Zeile ==== */
/* "Weiter" samt Balken entfällt überall. Handy: der Hero endet damit genau an der sichtbaren Kante (Vorteile 20 px darüber = Innenabstand unten). */
.hero__scroll{display:none}
@media(max-width:879px){@supports(height:100svh){.hero{min-height:calc(100svh - var(--kopf))}}}
/* Deckel wächst auf hohen Flächen mit (Prüfer 1, 28.09.: 390x1000/820x1100 blieb unter den Vorteilen ein leerer Streifen, weil die Abstände
   gedeckelt waren). Mindestens 60 px, ab 850 px Höhe wachsend bis 100 px; verteilt wird ohnehin nur der tatsächlich freie Platz (440x850 v1 bleibt beim Bild). */
@media(max-width:879px){@supports(height:100svh){.hero{--luft-max:clamp(60px,calc((100svh - 700px) / 2.5),100px)}}}
/* Vorteile in einer Zeile: kurze Fassung, kein Umbruch, Schrift wächst mit der Breite bis zur bisherigen Größe (.82rem). Teiler = gemessene
   Zeilenbreite je Schriftpixel (3 Browser, schlechtester Wert + ~4 % Reserve). Unter 364 px entfallen die Symbole, damit die Schrift nicht unter 12 px fällt. */
.hero__pills{flex-wrap:nowrap;gap:0 .95em}
.hero__pills > span{gap:.35em}
@media(max-width:879px){.hero__pills{font-size:clamp(11px,calc((100vw - 40px) / 27),.82rem)}}
@media(max-width:363px){.hero__pills .hero__pill-ico{display:none}.hero__pills{font-size:clamp(11px,calc((100vw - 40px) / 22.5),.82rem)}}
/* ==== Runde 3c, Bennis Befunde 28.09.2026 nachts am Bild 440x850 ==== */
/* "Die Leiste muss schon unmittelbar unter den Button": Vorteile folgen dem Knopf mit festem Abstand (margin-top 12 px). Der frei werdende
   Platz (Abstandhalter 4, gleiche Gewichtung und Deckel) liegt jetzt zwischen Vorteilen und einem kleinen Weiter-Pfeil ("so nen kleinen Pfeil
   brauchen wir, damit die wissen, dass es weiter geht"). Der Pfeil ist nur Hinweis (nicht klickbar), wippt leicht, ohne Bewegung bei
   prefers-reduced-motion. Oberer Block (Autorenzeile, Unterzeile, Überschrift) auf dem Handy mittig. Desktop unverändert. */
.hero__weiter{display:none}
@media(max-width:879px){
  .hero__weiter{display:flex;align-self:center;margin-top:10px;color:var(--gold);opacity:.85;line-height:0;pointer-events:none}
  .hero__weiter svg{display:block;animation:heroWeiter 1.8s ease-in-out infinite}
  .hero__lead{text-align:center}
  .hero__author{justify-content:center}
}
/* Unter 360 px brach die Autorenzeile schon live in zwei Zeilen um (v1 ab 339 px, v2 ab 358 px) - mittig sah das unruhig aus: dort etwas
   kleiner, damit sie in einer Zeile bleibt (gemessen v2 320 px: 268-277 px Text bei 242 px Platz; .68rem = 10,9 px, Bild 26 px). */
@media(max-width:359px){.hero__author{font-size:.68rem;gap:6px}.hero__author img{width:26px;height:26px}}
@keyframes heroWeiter{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@media(prefers-reduced-motion:reduce){.hero__weiter svg{animation:none}}
/* ==== Bennis Feinschliff 28.09.2026 am Bild 440x850 (beide Arme): oben etwas mehr Luft (Autorenzeile|Unterzeile "bisschen", Unterzeile|Überschrift
   "bisschen mehr"), die drei Abstände darunter kleiner (Überschrift|Buch 20-30 %, Buch|Text 20 %, Text|Knopf 20 %). Der Platz wird weiter vom
   Browser verteilt; was die drei Stellen abgeben, geht an den Abstand Vorteile|Pfeil (Bennis Wunsch: der frei werdende Platz trägt den Pfeil).
   Gewichte so gewählt, dass 440x850 v1 die Zielmaße trifft (52 -> 39, 52 -> 42, 36 -> 29 px). ==== */
@media(max-width:879px){
  .hero__luft--1{flex-grow:1.08}
  .hero__luft--2{flex-grow:1.17}
  .hero__luft--3{flex-grow:1}
  .hero__luft--4{flex-grow:1.76;max-height:calc(var(--luft-max) * 1.8)}
}
/* Die Zusatzluft oben (+3 / +6 px) nur, wo der Bildschirm Platz hat: fest eingebaut schob sie auf niedrigen Flächen (Höhe 520-640 px) den
   Knopf unter die Kante (Sweep 28.09.). Sie wächst ab 660 px sichtbarer Höhe stufenlos und ist ab 690 px voll; darunter wie bisher. */
@media(max-width:879px){@supports(height:100svh){
  .hero__author{margin-bottom:calc(8px + clamp(0px, (100svh - 660px) / 10, 3px))}
  .hero__eyebrow{margin-bottom:calc(6px + clamp(0px, (100svh - 660px) / 5, 6px))}
}}
/* ==== Benni 28.09.2026 morgens am Live-Bild: "der ganze Content-Block mittig, alles weiter runter bis auf den Header". Über der Autorenzeile ein
   Abstandhalter (Pseudo-Element, kein Eingriff ins Seitengerüst) mit demselben Gewicht wie der Abstand Vorteile|Pfeil: der Block von der
   Autorenzeile bis zu den Vorteilen steht damit mittig zwischen Kopfzeile und Pfeil. Die Abstände im Block (Bennis Werte) bleiben gleich,
   oben und unten teilen sich das bisherige Gewicht 1,76 je zur Hälfte. Grundmaß 0: auf knappen Flächen ändert sich nichts. ==== */
@media(max-width:879px){
  .hero__inner::before{content:"";display:block;flex:.88 1 0px;min-height:0;max-height:calc(var(--luft-max) * 1.8)}
  .hero__luft--4{flex-grow:.88}
}