/* ═══════════════════════════════════════════
   30 TAGE BINDUNGSCODE — Verkaufsseite
   Palette: Anthrazit / Warmweiß / Terrakotta
   ═══════════════════════════════════════════ */

:root{
  /* Farben */
  --ink:        #14161A;
  --ink-soft:   #2A2E35;
  --paper:      #FBF9F5;
  --paper-warm: #F3EFE8;
  --paper-card: #FFFFFF;
  --accent:     #B4705A;
  --accent-dk:  #9A5C48;
  --accent-lt:  #D8A18C;
  --muted:      #6E7178;
  --line:       #E3DCD2;
  --line-dark:  rgba(242,239,233,.14);
  --light:      #F2EFE9;

  /* Typo */
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Maße */
  --wrap: 1160px;
  --narrow: 760px;
  --radius: 14px;
  --radius-lg: 22px;

  /* Schatten */
  --sh-sm: 0 1px 2px rgba(20,22,26,.04), 0 2px 8px rgba(20,22,26,.04);
  --sh-md: 0 2px 4px rgba(20,22,26,.03), 0 12px 32px rgba(20,22,26,.07);
  --sh-lg: 0 4px 8px rgba(20,22,26,.04), 0 28px 60px rgba(20,22,26,.12);
  --sh-cta: 0 6px 20px rgba(180,112,90,.28);
}

/* ── Reset / Basis ───────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3{ margin:0; font-weight:400; }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }
button{ font:inherit; color:inherit; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--light); padding:12px 20px; border-radius:0 0 10px 0;
}
.skip-link:focus{ left:0; }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }

/* ── Layout ──────────────────────────────── */
.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 24px; }
.wrap--narrow{ max-width:var(--narrow); }

.sec{ padding:110px 0; position:relative; }
.sec--tint{ background:var(--paper-warm); }
.sec--dark{ background:var(--ink); color:var(--light); }
.sec--offer{ background:var(--ink); color:var(--light); padding:100px 0; }
.sec--final{ background:var(--ink); color:var(--light); text-align:center; padding:120px 0; }

/* ── Typografie ──────────────────────────── */
.h1{
  font-family:var(--serif);
  font-size:clamp(2.6rem, 6.4vw, 4.4rem);
  line-height:1.06;
  letter-spacing:-.015em;
}
.h1 em{ font-style:italic; color:var(--accent); }

.h2{
  font-family:var(--serif);
  font-size:clamp(1.95rem, 4.2vw, 3rem);
  line-height:1.16;
  letter-spacing:-.01em;
}
.h2--light{ color:var(--light); }
.h3{ font-family:var(--serif); font-size:clamp(1.5rem,3vw,2rem); line-height:1.25; }

.eyebrow{
  font-size:.74rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); margin:0 0 18px;
}
.eyebrow--light{ color:var(--accent-lt); }

.lead{
  font-size:clamp(1.05rem,1.9vw,1.22rem);
  color:var(--muted); max-width:34em; margin:26px 0 0;
}
.sub{ color:var(--muted); max-width:44ch; margin:18px auto 0; }
.note{
  text-align:center; color:var(--muted); font-size:.98rem;
  max-width:56ch; margin:46px auto 0;
}

.secHead{ text-align:center; max-width:62ch; margin:0 auto 60px; }
.secHead .sub{ font-size:1.05rem; }

/* ── Buttons ─────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  background:var(--accent); color:#fff;
  font-size:.98rem; font-weight:600; letter-spacing:.005em;
  padding:15px 28px; border:0; border-radius:100px;
  text-decoration:none; cursor:pointer;
  box-shadow:var(--sh-cta);
  transition:transform .22s cubic-bezier(.2,.8,.3,1), background .22s ease, box-shadow .22s ease;
  text-align:center;
}
.btn:hover{ background:var(--accent-dk); transform:translateY(-2px); box-shadow:0 10px 28px rgba(180,112,90,.34); }
.btn:active{ transform:translateY(0); box-shadow:0 3px 12px rgba(180,112,90,.3); }
.btn--lg{ padding:19px 38px; font-size:1.03rem; }
.btn--sm{ padding:10px 20px; font-size:.88rem; box-shadow:none; }
.btn--sm:hover{ box-shadow:0 6px 16px rgba(180,112,90,.26); }
.btn--full{ width:100%; }
.btn--light{ background:var(--light); color:var(--ink); box-shadow:0 6px 24px rgba(0,0,0,.3); }
.btn--light:hover{ background:#fff; box-shadow:0 12px 34px rgba(0,0,0,.38); }

.link-quiet{
  color:var(--muted); text-decoration:none; font-size:.95rem;
  border-bottom:1px solid var(--line); padding-bottom:2px;
  transition:color .2s ease, border-color .2s ease;
}
.link-quiet:hover{ color:var(--ink); border-color:var(--accent); }

.ctaRow{ margin-top:60px; text-align:center; }
.ctaRow__meta{ display:block; margin-top:16px; font-size:.87rem; color:var(--muted); }

/* ── Navigation ──────────────────────────── */
.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(251,249,245,.86);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, box-shadow .3s ease;
}
.nav.is-stuck{ border-bottom-color:var(--line); box-shadow:0 1px 20px rgba(20,22,26,.05); }
.nav__inner{
  max-width:var(--wrap); margin:0 auto; padding:0 24px;
  height:70px; display:flex; align-items:center; gap:32px;
}
.nav__logo{
  font-family:var(--serif); font-size:1.35rem; letter-spacing:-.01em;
  text-decoration:none; margin-right:auto;
}
.nav__links{ display:flex; gap:30px; }
.nav__links a{
  text-decoration:none; font-size:.92rem; color:var(--muted);
  position:relative; padding:4px 0; transition:color .2s ease;
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .28s cubic-bezier(.2,.8,.3,1);
}
.nav__links a:hover{ color:var(--ink); }
.nav__links a:hover::after{ transform:scaleX(1); }

.nav__burger{
  display:none; width:42px; height:42px; background:none; border:0;
  cursor:pointer; padding:10px; flex-direction:column; justify-content:space-between;
}
.nav__burger span{
  display:block; height:1.5px; width:100%; background:var(--ink); border-radius:2px;
  transition:transform .3s ease, opacity .2s ease;
}
.nav__burger.is-open span:nth-child(1){ transform:translateY(9.5px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2){ opacity:0; }
.nav__burger.is-open span:nth-child(3){ transform:translateY(-9.5px) rotate(-45deg); }

.nav__mobile{
  display:none; flex-direction:column; gap:2px;
  padding:14px 24px 26px; border-top:1px solid var(--line);
  background:var(--paper);
}
.nav__mobile a{
  text-decoration:none; padding:13px 0; font-size:1.02rem;
  border-bottom:1px solid var(--line);
}
.nav__mobile a.btn{ border:0; margin-top:16px; padding:16px 24px; }

/* ── Hero ────────────────────────────────── */
.hero{ position:relative; padding:96px 0 110px; overflow:hidden; }
.hero__glow{
  position:absolute; top:-260px; right:-180px; width:720px; height:720px;
  background:radial-gradient(circle, rgba(180,112,90,.13) 0%, rgba(180,112,90,0) 65%);
  pointer-events:none;
}
.hero__grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:70px; align-items:center;
  position:relative;
}
.hero__actions{ margin-top:40px; display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.trustrow{
  display:flex; gap:24px; flex-wrap:wrap; margin-top:34px;
  font-size:.87rem; color:var(--muted);
}
.trustrow li{ display:flex; align-items:center; gap:8px; }
.dot{ width:5px; height:5px; border-radius:50%; background:var(--accent); flex:none; }

/* Produkt-Mockup (rein CSS) */
.hero__visual{ display:flex; justify-content:center; }
.mock{ position:relative; width:100%; max-width:390px; padding:20px 0 40px; }
.mock__book{
  position:relative; aspect-ratio:3/4; border-radius:6px 14px 14px 6px;
  box-shadow:var(--sh-lg); overflow:hidden;
  background:linear-gradient(148deg,#20242B 0%, #14161A 58%, #1B1F25 100%);
  transform:rotate(-2.2deg);
  transition:transform .6s cubic-bezier(.2,.8,.3,1);
}
.mock:hover .mock__book{ transform:rotate(-1deg) translateY(-6px); }
.mock__spine{
  position:absolute; left:0; top:0; bottom:0; width:16px;
  background:linear-gradient(90deg, rgba(0,0,0,.55), rgba(255,255,255,.06));
}
.mock__cover{
  position:absolute; inset:0; padding:12% 11% 11% 15%;
  display:flex; flex-direction:column; color:var(--light);
}
.mock__kicker{
  font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; color:var(--accent-lt);
}
.mock__title{
  font-family:var(--serif); font-size:clamp(2rem,7vw,2.9rem); line-height:1.02;
  margin-top:auto; hyphens:auto;
}
.mock__rule{ display:block; width:44px; height:1px; background:var(--accent); margin:22px 0 16px; }
.mock__sub{ font-size:.8rem; line-height:1.7; color:rgba(242,239,233,.66); }
.mock__foot{
  margin-top:22px; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(242,239,233,.4);
}

.mock__card{
  position:absolute; background:var(--paper-card); border-radius:var(--radius);
  padding:14px 18px; box-shadow:var(--sh-md); display:flex; flex-direction:column; gap:2px;
  transition:transform .4s cubic-bezier(.2,.8,.3,1);
}
.mock__cardtitle{ font-size:.86rem; font-weight:600; }
.mock__cardsub{ font-size:.74rem; color:var(--muted); }
.mock__card--audio{ left:-8%; bottom:16%; }
.mock__card--notion{ right:-6%; top:12%; }
.mock:hover .mock__card--audio{ transform:translateY(-5px) translateX(-4px); }
.mock:hover .mock__card--notion{ transform:translateY(-5px) translateX(4px); }

.mock__wave{ display:flex; align-items:flex-end; gap:3px; height:16px; margin-bottom:6px; }
.mock__wave i{ width:3px; background:var(--accent); border-radius:2px; animation:wave 1.4s ease-in-out infinite; }
.mock__wave i:nth-child(1){ height:40%; animation-delay:0s; }
.mock__wave i:nth-child(2){ height:80%; animation-delay:.12s; }
.mock__wave i:nth-child(3){ height:55%; animation-delay:.24s; }
.mock__wave i:nth-child(4){ height:100%; animation-delay:.36s; }
.mock__wave i:nth-child(5){ height:45%; animation-delay:.48s; }
.mock__wave i:nth-child(6){ height:75%; animation-delay:.6s; }
.mock__wave i:nth-child(7){ height:35%; animation-delay:.72s; }
@keyframes wave{ 0%,100%{ transform:scaleY(.55);} 50%{ transform:scaleY(1);} }

.mock__check{ display:flex; flex-direction:column; gap:4px; margin-bottom:8px; }
.mock__check i{ display:block; height:4px; border-radius:2px; background:var(--line); }
.mock__check i:nth-child(1){ width:34px; background:var(--accent); }
.mock__check i:nth-child(2){ width:26px; background:var(--accent); opacity:.5; }
.mock__check i:nth-child(3){ width:30px; }

/* ── Problem ─────────────────────────────── */
.proseList{ margin:44px 0 0; }
.proseList li{
  position:relative; padding:20px 0 20px 34px;
  border-bottom:1px solid var(--line);
  font-size:1.08rem; line-height:1.6;
}
.proseList li::before{
  content:""; position:absolute; left:0; top:31px;
  width:14px; height:1px; background:var(--accent);
}
.punch{
  font-family:var(--serif); font-size:clamp(1.5rem,3.4vw,2.2rem); line-height:1.28;
  margin:52px 0 0; color:var(--ink);
}

/* ── Cards / Grid ────────────────────────── */
.grid{ display:grid; gap:24px; }
.grid--3{ grid-template-columns:repeat(3,1fr); }

.card{
  background:var(--paper-card); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:32px 30px; box-shadow:var(--sh-sm);
  transition:transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s ease, border-color .3s ease;
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--sh-md); border-color:#D9CFC2; }
.card__num{
  display:block; font-family:var(--serif); font-size:1.5rem; color:var(--accent); margin-bottom:14px;
}
.card h3{ font-size:1.1rem; font-weight:600; font-family:var(--sans); margin-bottom:10px; }
.card p{ color:var(--muted); font-size:.97rem; }
.card__badge{
  display:inline-block; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); border:1px solid var(--accent-lt); border-radius:100px;
  padding:5px 12px; margin-bottom:18px;
}
.card__meta{ font-size:.82rem !important; color:var(--accent) !important; margin-bottom:12px !important; }
.card--bonus h3{ font-family:var(--serif); font-weight:400; font-size:1.3rem; }

/* ── Split (dunkel) ──────────────────────── */
.split{
  display:grid; grid-template-columns:1fr auto 1fr; gap:0; align-items:stretch;
  margin:56px 0 46px;
}
.split__col{ padding:34px 36px; }
.split__col:first-of-type{ padding-left:0; }
.split__col:last-of-type{ padding-right:0; }
.split__x{ width:1px; background:var(--line-dark); }
.split__label{
  display:block; font-family:var(--serif); font-size:1.5rem; color:var(--accent-lt); margin-bottom:12px;
}
.split__col p{ color:rgba(242,239,233,.72); font-size:1rem; }

.darkNote{ color:rgba(242,239,233,.72); font-size:1.05rem; max-width:58ch; }
.darkNote strong{ color:var(--light); font-weight:600; }
.darkNote--strong{
  font-family:var(--serif); font-size:clamp(1.4rem,3vw,1.95rem); color:var(--light);
  margin-top:28px; line-height:1.3;
}

/* ── Vorher / Nachher ────────────────────── */
.beforeAfter{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.ba__col{
  border-radius:var(--radius-lg); padding:34px 32px; border:1px solid var(--line);
  background:var(--paper-card);
}
.ba__col--after{ background:var(--ink); color:var(--light); border-color:var(--ink); }
.ba__tag{
  display:inline-block; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin-bottom:22px;
}
.ba__tag--accent{ color:var(--accent-lt); }
.ba__col li{
  display:flex; gap:16px; padding:13px 0; font-size:.98rem;
  border-bottom:1px solid var(--line);
}
.ba__col--after li{ border-bottom-color:var(--line-dark); color:rgba(242,239,233,.86); }
.ba__col li:last-child{ border-bottom:0; }
.ba__col li span{
  flex:none; width:66px; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); padding-top:3px;
}
.ba__col--after li span{ color:var(--accent-lt); }

/* ── Wochen ──────────────────────────────── */
.weeks{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.week{
  background:var(--paper-card); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:32px 26px; display:flex; flex-direction:column; box-shadow:var(--sh-sm);
  transition:transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s ease;
  position:relative; overflow:hidden;
}
.week::before{
  content:""; position:absolute; left:0; top:0; height:3px; width:100%;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .4s cubic-bezier(.2,.8,.3,1);
}
.week:hover{ transform:translateY(-5px); box-shadow:var(--sh-md); }
.week:hover::before{ transform:scaleX(1); }
.week__no{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); }
.week h3{ font-family:var(--serif); font-size:1.7rem; margin:10px 0 14px; }
.week p{ color:var(--muted); font-size:.95rem; margin-bottom:22px; }
.week__days{ margin-top:auto; font-size:.8rem; color:var(--muted); padding-top:16px; border-top:1px solid var(--line); }

/* ── Produktseiten-Vorschau ──────────────── */
.pages{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:start; }
.page{
  margin:0; background:var(--paper-card); border:1px solid var(--line);
  border-radius:var(--radius); padding:30px 28px 32px; box-shadow:var(--sh-md);
  transition:transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s ease;
}
.page:hover{ transform:translateY(-6px) rotate(-.4deg); box-shadow:var(--sh-lg); }
.page__head{
  display:flex; justify-content:space-between; gap:12px;
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  padding-bottom:16px; border-bottom:1px solid var(--line); margin-bottom:22px;
}
.page__head span:first-child{ color:var(--accent); font-weight:600; }
.page__title{ font-family:var(--serif); font-size:1.45rem; line-height:1.2; margin-bottom:18px; }
.page__body{ font-size:.95rem; color:var(--ink-soft); }
.page__body--muted{ color:var(--muted); font-size:.9rem; }
.page__quote{
  font-family:var(--serif); font-style:italic; font-size:1.12rem; line-height:1.4;
  padding:16px 0 16px 18px; border-left:2px solid var(--accent); color:var(--ink);
  margin-bottom:1.1em;
}
.page__field{ margin-top:22px; }
.page__label{ display:block; font-size:.78rem; color:var(--muted); margin-bottom:12px; }
.page__lines{ display:flex; flex-direction:column; gap:16px; }
.page__lines i{ display:block; height:1px; background:var(--line); }
.page__lines i:nth-child(even){ width:88%; }

/* ── Benefits ────────────────────────────── */
.benefits{ display:grid; grid-template-columns:1fr 1fr; gap:14px 40px; max-width:960px; margin:0 auto; }
.benefits li{
  display:flex; gap:16px; align-items:flex-start;
  padding:20px 0; border-bottom:1px solid var(--line); font-size:1.02rem; line-height:1.55;
}
.tick{
  flex:none; width:22px; height:22px; border-radius:50%;
  background:var(--accent); position:relative; margin-top:3px;
}
.tick::after{
  content:""; position:absolute; left:7px; top:5px; width:5px; height:10px;
  border:solid #fff; border-width:0 1.8px 1.8px 0; transform:rotate(45deg);
}
.tick--light{ background:var(--accent-lt); }
.tick--light::after{ border-color:var(--ink); }

/* ── Steps ───────────────────────────────── */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; counter-reset:s; }
.step{
  background:var(--paper-card); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:36px 30px; box-shadow:var(--sh-sm);
  transition:transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s ease;
}
.step:hover{ transform:translateY(-4px); box-shadow:var(--sh-md); }
.step__no{
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%;
  background:var(--ink); color:var(--light);
  font-family:var(--serif); font-size:1.2rem; margin-bottom:20px;
}
.step h3{ font-family:var(--serif); font-size:1.4rem; margin-bottom:10px; }
.step p{ color:var(--muted); font-size:.97rem; }

/* ── Vergleich ───────────────────────────── */
.answerLead{
  font-family:var(--serif); font-size:1.5rem; text-align:center; color:var(--muted); margin-bottom:40px;
}
.compare{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.compare__col{
  border:1px solid var(--line); border-radius:var(--radius-lg); padding:30px 28px;
  background:var(--paper-card);
}
.compare__col--hi{ border-color:var(--accent); box-shadow:0 8px 28px rgba(180,112,90,.12); }
.compare__tag{
  display:block; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin-bottom:20px;
}
.compare__tag--accent{ color:var(--accent); }
.compare__col li{
  padding:12px 0 12px 24px; position:relative; font-size:.98rem; color:var(--ink-soft);
  border-bottom:1px solid var(--line);
}
.compare__col li:last-child{ border-bottom:0; }
.compare__col li::before{
  content:""; position:absolute; left:0; top:21px; width:9px; height:1px; background:var(--muted);
}
.compare__col--hi li::before{ background:var(--accent); width:12px; }

/* ── Einwände (dunkel) ───────────────────── */
.objections{ margin-top:52px; display:grid; gap:2px; }
.obj{ padding:30px 0; border-bottom:1px solid var(--line-dark); }
.obj:last-child{ border-bottom:0; }
.obj h3{
  font-family:var(--serif); font-size:1.35rem; color:var(--light); margin-bottom:12px;
}
.obj p{ color:rgba(242,239,233,.68); font-size:1rem; max-width:62ch; }

/* ── Anonymität ──────────────────────────── */
.anon{
  background:var(--paper-warm); border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:var(--radius); padding:44px 44px 40px;
}
.anon h2{ margin-bottom:20px; }
.anon p{ color:var(--ink-soft); font-size:1rem; }
.anon__close{ color:var(--muted) !important; font-size:.95rem !important; }

/* ── Passt / Passt nicht ─────────────────── */
.fitGrid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:940px; margin:0 auto; }
.fit{ border-radius:var(--radius-lg); padding:34px 32px; border:1px solid var(--line); background:var(--paper-card); }
.fit h3{ font-family:var(--serif); font-size:1.4rem; margin-bottom:20px; }
.fit li{
  padding:12px 0 12px 28px; position:relative; font-size:.99rem;
  color:var(--ink-soft); line-height:1.55;
}
.fit--no li::before{
  content:""; position:absolute; left:2px; top:21px; width:11px; height:1px;
  background:var(--muted);
}
.fit--yes{ border-color:var(--accent); box-shadow:0 8px 28px rgba(180,112,90,.1); }
.fit--yes li::before{
  content:""; position:absolute; left:0; top:16px; width:6px; height:11px;
  border:solid var(--accent); border-width:0 1.6px 1.6px 0; transform:rotate(45deg);
}

/* ── Offer ───────────────────────────────── */
.offer{
  border:1px solid var(--line-dark); border-radius:var(--radius-lg);
  padding:52px 52px 46px; background:linear-gradient(160deg,#191D23 0%, #14161A 100%);
  box-shadow:0 30px 70px rgba(0,0,0,.35);
}
.offer__head{ text-align:center; margin-bottom:38px; }
.offer__list{ display:grid; gap:2px; margin-bottom:38px; }
.offer__list li{
  display:flex; gap:16px; align-items:flex-start; padding:16px 0;
  border-bottom:1px solid var(--line-dark); font-size:1rem; color:rgba(242,239,233,.78);
}
.offer__list li:last-child{ border-bottom:0; }
.offer__list strong{ color:var(--light); font-weight:600; }

.offer__price{ text-align:center; padding:26px 0 8px; }
.offer__amount{
  display:block; font-family:var(--serif); font-size:clamp(3.2rem,9vw,4.4rem);
  line-height:1; color:var(--light);
}
.offer__meta{ display:block; margin-top:12px; font-size:.87rem; color:rgba(242,239,233,.5); }
.offer__frame{
  text-align:center; color:rgba(242,239,233,.62); font-size:.97rem;
  max-width:52ch; margin:26px auto 34px;
}
.offer__cta{ display:flex; width:100%; }
.offer__guarantee{
  text-align:center; margin-top:24px; font-size:.9rem; color:rgba(242,239,233,.55);
  max-width:46ch; margin-left:auto; margin-right:auto;
}
.offer__guarantee strong{ color:var(--light); }

/* ── FAQ ─────────────────────────────────── */
.faq{ border-top:1px solid var(--line); }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__q{
  width:100%; background:none; border:0; cursor:pointer; text-align:left;
  padding:24px 44px 24px 0; position:relative;
  font-size:1.06rem; font-weight:500; line-height:1.45;
  transition:color .2s ease;
}
.faq__q:hover{ color:var(--accent); }
.faq__icon{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:16px; height:16px;
}
.faq__icon::before,.faq__icon::after{
  content:""; position:absolute; background:var(--accent); border-radius:2px;
  transition:transform .3s cubic-bezier(.2,.8,.3,1), opacity .2s ease;
}
.faq__icon::before{ left:0; top:7.5px; width:16px; height:1.5px; }
.faq__icon::after{ left:7.5px; top:0; width:1.5px; height:16px; }
.faq__q[aria-expanded="true"] .faq__icon::after{ transform:rotate(90deg); opacity:0; }
.faq__a{
  overflow:hidden; height:0;
  transition:height .34s cubic-bezier(.2,.8,.3,1);
}
.faq__a p{
  padding:0 44px 26px 0; color:var(--muted); font-size:1rem; margin:0;
}

/* ── Finaler CTA ─────────────────────────── */
.finalBlock .h2{ max-width:16ch; margin:0 auto; }
.finalLead{
  color:rgba(242,239,233,.7); font-size:1.08rem; max-width:40ch; margin:26px auto 40px;
}
.finalMeta{ margin-top:22px; font-size:.87rem; color:rgba(242,239,233,.45); }

/* ── Footer ──────────────────────────────── */
.footer{ background:var(--paper-warm); border-top:1px solid var(--line); padding:64px 0 40px; }
.footer__grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px;
  padding-bottom:40px; border-bottom:1px solid var(--line);
}
.footer__logo{ font-family:var(--serif); font-size:1.3rem; display:block; margin-bottom:12px; }
.footer__brand p{ color:var(--muted); font-size:.92rem; line-height:1.6; }
.footer__col{ display:flex; flex-direction:column; }
.footer__heading{
  font-size:.76rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:16px;
}
.footer__nav,.footer__legal{ display:flex; flex-direction:column; gap:11px; }
.footer__nav a,.footer__legal a{
  text-decoration:none; color:var(--muted); font-size:.92rem;
  transition:color .2s ease;
}
.footer__nav a:hover,.footer__legal a:hover{ color:var(--accent); }
.footer__note{ padding-top:32px; }
.footer__note p{ color:var(--muted); font-size:.82rem; line-height:1.65; max-width:78ch; }
.footer__note strong{ color:var(--ink-soft); }
.footer__copy{ margin-top:22px; font-size:.8rem; }

/* ── Sticky Mobile CTA ───────────────────── */
.stickyBar{
  position:fixed; left:0; right:0; bottom:0; z-index:95;
  display:none; align-items:center; justify-content:space-between; gap:16px;
  padding:12px 18px calc(12px + env(safe-area-inset-bottom));
  background:rgba(20,22,26,.96); backdrop-filter:blur(12px);
  transform:translateY(110%); transition:transform .38s cubic-bezier(.2,.8,.3,1);
}
.stickyBar.is-visible{ transform:translateY(0); }
.stickyBar__text{ display:flex; flex-direction:column; line-height:1.3; color:var(--light); }
.stickyBar__text strong{ font-size:.88rem; font-weight:600; }
.stickyBar__text span{ font-size:.76rem; color:rgba(242,239,233,.55); }

/* ── Reveal-Animation ─────────────────────
   Progressive Enhancement: ohne die Klasse .js-reveal am <html>
   (kein JS, kein IntersectionObserver, reduzierte Bewegung) bleibt
   der Inhalt normal sichtbar. */
.js-reveal .reveal{
  opacity:0; transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.2,.8,.3,1), transform .7s cubic-bezier(.2,.8,.3,1);
}
.js-reveal .reveal.is-in{ opacity:1; transform:none; }

/* ═══════════ RESPONSIVE ═══════════ */

@media (max-width:1040px){
  .weeks{ grid-template-columns:repeat(2,1fr); }
  .pages{ grid-template-columns:1fr; max-width:620px; margin:0 auto; }
  .hero__grid{ gap:48px; }
}

@media (max-width:900px){
  .nav__links,.nav__cta{ display:none; }
  .nav__burger{ display:flex; }
  .nav.is-open .nav__mobile{ display:flex; }

  .sec{ padding:80px 0; }
  .sec--final{ padding:92px 0; }

  .hero{ padding:56px 0 80px; }
  /* Auf Mobil zuerst die Headline (Message Match zum Reel), dann das Produkt */
  .hero__grid{ grid-template-columns:1fr; gap:52px; }
  .mock{ max-width:290px; }

  .grid--3,.steps{ grid-template-columns:1fr; }
  .benefits{ grid-template-columns:1fr; gap:0; }
  .beforeAfter,.compare,.fitGrid{ grid-template-columns:1fr; }

  .split{ grid-template-columns:1fr; margin:40px 0 36px; }
  .split__col{ padding:26px 0; }
  .split__x{ width:100%; height:1px; }

  .offer{ padding:38px 28px 34px; }
  .anon{ padding:34px 28px; }

  .footer__grid{ grid-template-columns:1fr; gap:32px; }
  .footer__nav{ flex-direction:row; flex-wrap:wrap; gap:18px; }
  .footer__legal{ flex-direction:column; gap:8px; }

  .stickyBar{ display:flex; }
}

@media (max-width:560px){
  body{ font-size:16px; }
  .wrap{ padding:0 20px; }
  .sec{ padding:66px 0; }

  .h1{ font-size:2.3rem; }
  .lead{ font-size:1.02rem; margin-top:20px; }
  .hero__actions{ margin-top:32px; gap:18px; }
  .btn--lg{ width:100%; padding:17px 22px; font-size:.97rem; }
  .link-quiet{ font-size:.9rem; }
  .trustrow{ gap:14px 18px; font-size:.82rem; }

  .secHead{ margin-bottom:42px; }
  .proseList li{ font-size:1rem; padding:17px 0 17px 28px; }
  .proseList li::before{ top:28px; width:10px; }
  .punch{ font-size:1.42rem; margin-top:40px; }

  .card,.week,.step,.ba__col,.compare__col,.fit{ padding:26px 22px; }
  .page{ padding:24px 22px 26px; }
  .ba__col li{ flex-direction:column; gap:3px; }
  .ba__col li span{ width:auto; }

  .offer{ padding:32px 22px 30px; }
  .offer__amount{ font-size:3rem; }
  .offer__list li{ font-size:.95rem; }

  .faq__q{ font-size:1rem; padding-right:38px; }
  .footer__note p{ font-size:.78rem; }

  /* Mockup-Karten näher heranziehen, damit sie am Rand nicht abgeschnitten werden */
  .mock{ max-width:250px; }
  .mock__card{ padding:11px 14px; }
  .mock__card--audio{ left:-14px; bottom:14%; }
  .mock__card--notion{ right:-14px; top:10%; }
  .mock__cardtitle{ font-size:.8rem; }
  .mock__cardsub{ font-size:.7rem; }
}

/* Sticky-Leiste darf im hidden-Zustand nicht am Layout teilnehmen */
.stickyBar[hidden]{ display:none !important; }

/* ── Reduced Motion ──────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal,.js-reveal .reveal{ opacity:1; transform:none; }
}