/* =========================================================
   Sequelo — Landingpage
   ========================================================= */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--body);
  background: var(--ivory);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
/* Sichtbarer Fokus für Tastatur & Screenreader (nicht bei Maus/Touch) */
:focus-visible { outline: 2.5px solid var(--berry); outline-offset: 3px; border-radius: 6px; }
.diff :focus-visible, .cta :focus-visible, footer :focus-visible { outline-color: var(--gold-200); }
a, button, input, label { -webkit-tap-highlight-color: rgba(193,62,118,0.12); }
a { color: inherit; text-decoration: none; }
.container { max-width: var(--max); margin: 0 auto; padding: 0 28px; }

.eyebrow {
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--gold-ink);
}
h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -0.01em; line-height: 1.06; text-wrap: balance; }
/* Keine einzelnen Wörter allein in der letzten Zeile */
p { text-wrap: pretty; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--body); font-weight: 600; font-size: 1rem;
  padding: 15px 26px; border-radius: var(--r-pill); border: none; cursor: pointer;
  transition: transform .18s ease, box-shadow .25s ease, background .2s;
  white-space: nowrap;
}
.btn-primary {
  background: linear-gradient(120deg, var(--berry), var(--plum));
  color: #fff; box-shadow: 0 10px 28px rgba(74,33,64,0.30);
}
@media (hover: hover) {
  .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(74,33,64,0.40); }
}
.btn:active { transform: scale(0.97); }
.btn-ghost { background: transparent; color: var(--ink-soft); padding: 15px 18px; }
.btn-ghost:hover { color: var(--plum); }
.btn-gold { background: linear-gradient(120deg, var(--gold-200), var(--gold)); color: var(--ink); box-shadow: var(--sh-gold); }
@media (hover: hover) {
  .btn-gold:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(194,147,58,0.42); }
}

/* ---------- Nav ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; transition: background .3s, box-shadow .3s; }
.nav.scrolled { background: rgba(250,245,239,0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(42,20,38,0.08); }
.nav-inner { max-width: var(--max); margin: 0 auto; height: 72px; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 11px; }
/* Logo: große Blüte = das Buch, kleine Blüte = das nächste Abenteuer (Seitenverhältnis 3:2) */
.brand svg { width: 66px; height: 44px; flex: none; }
.brand-text { display: flex; flex-direction: column; gap: 3px; }
.brand .name { font-family: var(--display); font-size: 2rem; font-weight: 600; color: var(--ink); line-height: 1; }
.brand .claim { font-family: var(--body); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); line-height: 1.2; white-space: nowrap; }
.brand .name b { font-weight: 600; }
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a.lnk { font-size: 0.93rem; font-weight: 500; color: var(--ink-soft); transition: color .2s; }
.nav-links a.lnk:hover { color: var(--plum); }
.nav .btn { padding: 11px 20px; font-size: 0.92rem; }
.nav-cta .cta-short { display: none; }

/* =========================================================
   HERO
   ========================================================= */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding: 120px 28px 70px; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-bg .blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.46; animation: drift 18s ease-in-out infinite; }
.hero-bg .b1 { width: 540px; height: 540px; background: var(--berry-200); top: -140px; left: -100px; }
.hero-bg .b2 { width: 600px; height: 600px; background: var(--petrol-200); bottom: -200px; right: -120px; animation-delay: -6s; }
.hero-bg .b3 { width: 420px; height: 420px; background: var(--gold-200); top: 30%; left: 48%; animation-delay: -11s; }
@keyframes drift {
  0%,100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(30px,-26px) scale(1.06); }
  66% { transform: translate(-24px,20px) scale(0.96); }
}

.hero-inner { position: relative; z-index: 2; max-width: var(--max); margin: 0 auto; width: 100%; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: center; }

.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.7); border: 1px solid rgba(74,33,64,0.1);
  color: var(--plum); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em;
  padding: 7px 15px; border-radius: var(--r-pill); margin-bottom: 26px;
  backdrop-filter: blur(6px); box-shadow: var(--sh-sm);
}
.hero-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--petrol); box-shadow: 0 0 0 0 rgba(30,122,125,0.5); animation: pulse 2.4s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(30,122,125,0.45);} 70%{box-shadow:0 0 0 9px rgba(30,122,125,0);} 100%{box-shadow:0 0 0 0 rgba(30,122,125,0);} }

.hero h1 { font-size: clamp(2.6rem, 5.4vw, 4.6rem); font-weight: 600; color: var(--ink); margin-bottom: 22px; }
.hero h1 em { font-style: italic; }
.hero-sub { font-size: 1.16rem; color: var(--ink-soft); max-width: 460px; margin-bottom: 34px; line-height: 1.66; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 30px; }
.hero-note { font-size: 0.86rem; color: var(--muted-ink); margin-top: 4px; }

/* ---- Hero stage (blooming book) ---- */
.hero-stage { position: relative; height: 520px; display: flex; align-items: center; justify-content: center; }
.stage-halo { position: absolute; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(circle, rgba(232,206,139,0.55) 0%, rgba(232,206,139,0) 65%); filter: blur(8px); }
.stage-rays { position: absolute; width: 540px; height: 540px; border-radius: 50%; opacity: 0.5;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(231,155,188,0.28) 14deg, transparent 28deg, transparent 60deg, rgba(140,201,203,0.25) 74deg, transparent 88deg, transparent 140deg, rgba(232,206,139,0.3) 154deg, transparent 168deg, transparent 220deg, rgba(231,155,188,0.24) 234deg, transparent 248deg, transparent 300deg, rgba(140,201,203,0.22) 314deg, transparent 328deg);
  animation: spin 40s linear infinite; mask: radial-gradient(circle, transparent 30%, #000 55%, transparent 80%); -webkit-mask: radial-gradient(circle, transparent 30%, #000 55%, transparent 80%); }
@keyframes spin { to { transform: rotate(360deg); } }

.stage-float { position: relative; animation: floaty 6s ease-in-out infinite; will-change: transform; }
@keyframes floaty { 0%,100%{ transform: translateY(0) rotate(-2deg);} 50%{ transform: translateY(-16px) rotate(-2deg);} }

/* bloom flower */
.bloom { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); width: 230px; height: 230px; z-index: 1; }
.bloom svg { width: 100%; height: 100%; overflow: visible; }
.petal { transform-box: fill-box; transform-origin: 50% 100%; opacity: 0; animation: unfurl .9s cubic-bezier(.2,.8,.2,1) forwards, sway 7s ease-in-out infinite; }
.petal.p1 { animation-delay: .25s, 1.2s; }
.petal.p2 { animation-delay: .38s, 1.35s; }
.petal.p3 { animation-delay: .51s, 1.5s; }
.petal.p4 { animation-delay: .64s, 1.65s; }
.petal.p5 { animation-delay: .77s, 1.8s; }
.petal.p6 { animation-delay: .90s, 1.95s; }
.bloom-core { transform-box: fill-box; transform-origin: center; opacity: 0; animation: pop .6s 1s cubic-bezier(.2,1.4,.4,1) forwards; }
@keyframes unfurl { from { opacity: 0; transform: scale(0.1) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes pop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
@keyframes sway { 0%,100% { rotate: 0deg; } 50% { rotate: 2.5deg; } }

/* book */
.book { position: relative; width: 248px; height: 318px; margin-top: 132px; z-index: 2; transform-style: preserve-3d; }
.book-cover {
  position: absolute; inset: 0; border-radius: 5px 16px 16px 5px;
  background: linear-gradient(150deg, #5a2a4d 0%, var(--plum) 45%, var(--plum-700) 100%);
  box-shadow: -7px 0 0 #2f1429, var(--sh-lg);
  overflow: hidden; padding: 22px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.book-cover::before { content:""; position:absolute; inset: 9px; border-radius: 4px 10px 10px 4px; border: 1.5px solid rgba(232,206,139,0.45); pointer-events: none; }
.book-spine { position: absolute; left: 0; top: 0; bottom: 0; width: 7px; background: rgba(0,0,0,0.28); }
.cover-scene { position: relative; height: 150px; margin-top: 6px; }
.moon { position: absolute; top: 6px; right: 10px; width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--gold-200), var(--gold)); box-shadow: 0 0 22px rgba(232,206,139,0.6); }
.moon::after { content:""; position:absolute; top:-4px; right:-6px; width:38px; height:38px; border-radius:50%; background: var(--plum); }
.cstar { position: absolute; width: 6px; height: 6px; background: var(--gold-200); border-radius: 1px; transform: rotate(45deg); opacity: 0.9; }
.cstar.s1 { top: 16px; left: 30px; } .cstar.s2 { top: 44px; left: 64px; width: 4px; height: 4px; } .cstar.s3 { top: 8px; left: 96px; width: 4px; height: 4px; }
.hill { position: absolute; bottom: 0; left: -10px; right: -10px; height: 64px; background: var(--plum-700); border-radius: 50% 50% 0 0 / 80% 80% 0 0; }
.hill.h2 { bottom: 0; height: 44px; left: 30px; right: -30px; background: #2f1429; border-radius: 50% 50% 0 0 / 90% 90% 0 0; }
.cover-title { font-family: var(--display); font-size: 1.5rem; font-weight: 600; color: var(--gold-200); line-height: 1.1; letter-spacing: 0.01em; text-shadow: 0 1px 4px rgba(0,0,0,0.3); }
.cover-byline { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.55); font-weight: 600; margin-top: 8px; }

/* sparkles */
.sparkle { position: absolute; background: #fff; border-radius: 50%; box-shadow: 0 0 8px rgba(255,255,255,0.9), 0 0 16px var(--gold-200); animation: twinkle 3s ease-in-out infinite; }
@keyframes twinkle { 0%,100% { transform: scale(0.4); opacity: 0.2; } 50% { transform: scale(1); opacity: 1; } }

.scroll-cue { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--muted-ink); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; }
.scroll-cue .mouse { width: 22px; height: 34px; border: 1.5px solid var(--plum-300); border-radius: 12px; position: relative; }
.scroll-cue .mouse::after { content:""; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 3px; height: 6px; border-radius: 2px; background: var(--plum-300); animation: wheel 1.8s ease-in-out infinite; }
@keyframes wheel { 0%{ opacity:0; transform: translate(-50%,0);} 40%{ opacity:1;} 80%{ opacity:0; transform: translate(-50%,10px);} 100%{opacity:0;} }

/* =========================================================
   SECTION SHELL
   ========================================================= */
.section { padding: 110px 0; }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 60px; }
.section-head .eyebrow { display: block; margin-bottom: 16px; }
.section-head h2 { font-size: clamp(2rem, 3.8vw, 3rem); color: var(--ink); }
.section-head p { color: var(--ink-soft); font-size: 1.08rem; margin-top: 18px; line-height: 1.65; }

/* ---------- Reassurance strip ---------- */
.strip { background: var(--paper); border-top: 1px solid rgba(42,20,38,0.06); border-bottom: 1px solid rgba(42,20,38,0.06); }
.strip-inner { display: flex; justify-content: center; flex-wrap: wrap; gap: 18px 46px; padding: 26px 28px; max-width: var(--max); margin: 0 auto; }
.strip-item { display: flex; align-items: center; gap: 10px; font-size: 0.92rem; font-weight: 500; color: var(--ink-soft); }
.strip-item .ic { width: 20px; height: 20px; color: var(--petrol); flex-shrink: 0; }

/* ---------- Problem ---------- */
.problem { background: var(--ivory-2); }
.problem-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.pcard { background: var(--paper); border-radius: var(--r-lg); padding: 34px 30px; box-shadow: var(--sh-sm); border: 1px solid rgba(42,20,38,0.05); }
.pcard .pic { width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.pcard .pic svg { width: 24px; height: 24px; color: #fff; }
.pcard h3 { font-size: 1.3rem; color: var(--ink); margin-bottom: 9px; }
.pcard p { color: var(--muted-ink); font-size: 0.96rem; line-height: 1.6; }

/* ---------- How it works ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; position: relative; }
.step { position: relative; text-align: center; padding: 0 10px; }
.step-orb { width: 88px; height: 88px; margin: 0 auto 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; background: var(--paper); box-shadow: var(--sh); }
.step-orb::before { content:""; position:absolute; inset:-6px; border-radius:50%; border:1.5px dashed rgba(194,147,58,0.5); }
.step-orb svg { width: 38px; height: 38px; }
.step-n { position: absolute; top: -4px; right: -4px; width: 26px; height: 26px; border-radius: 50%; background: var(--plum); color: #fff; font-size: 0.8rem; font-weight: 700; display: flex; align-items: center; justify-content: center; font-family: var(--body); }
.step h3 { font-size: 1.34rem; color: var(--ink); margin-bottom: 10px; }
.step p { color: var(--muted-ink); font-size: 0.97rem; max-width: 30ch; margin: 0 auto; }
.steps .connector { position: absolute; top: 44px; left: 16.66%; right: 16.66%; height: 1.5px; background: repeating-linear-gradient(90deg, rgba(194,147,58,0.45) 0 7px, transparent 7px 14px); z-index: -1; }

/* ---------- Differentiator ---------- */
.diff { background: radial-gradient(120% 100% at 80% 0%, #3a1a33 0%, var(--plum-700) 55%, var(--ink) 100%); color: #fff; position: relative; overflow: hidden; }
.diff .container { position: relative; z-index: 2; }
.diff-glow { position: absolute; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(231,155,188,0.22), transparent 70%); top: -120px; left: -80px; z-index: 1; }
.diff-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.diff .eyebrow { color: var(--gold-200); }
.diff h2 { font-size: clamp(2.1rem, 4vw, 3.2rem); margin: 16px 0 20px; }
.diff h2 em { font-style: italic; }
.diff-lead { color: rgba(255,255,255,0.72); font-size: 1.08rem; line-height: 1.7; margin-bottom: 28px; }
.diff-list { list-style: none; display: flex; flex-direction: column; gap: 15px; }
.diff-list li { display: flex; gap: 13px; align-items: flex-start; font-size: 1rem; color: rgba(255,255,255,0.88); }
.diff-list .chk { width: 24px; height: 24px; border-radius: 50%; background: rgba(232,206,139,0.16); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.diff-list .chk svg { width: 13px; height: 13px; color: var(--gold-200); }

/* book series */
.series { position: relative; height: 360px; }
.series-book { position: absolute; width: 184px; height: 240px; border-radius: 5px 13px 13px 5px; padding: 18px; box-shadow: var(--sh-lg); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; transition: transform .4s ease; }
.series-book::before { content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background: rgba(0,0,0,0.28); }
.series-book .sb-num { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.6); font-weight: 700; }
.series-book .sb-title { font-family: var(--display); font-size: 1.18rem; font-weight: 600; color: #fff; line-height: 1.12; }
.series-book .sb-orn { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.4); display: flex; align-items: center; justify-content: center; }
.series-book .sb-orn span { width: 14px; height: 14px; border-radius: 50%; }
.sbk1 { background: linear-gradient(150deg, #6a2f5a, var(--plum)); left: 0; bottom: 0; transform: rotate(-7deg); z-index: 1; }
.sbk2 { background: linear-gradient(150deg, #2a8689, var(--petrol)); left: 70px; bottom: 36px; transform: rotate(0deg); z-index: 2; }
.sbk3 { background: linear-gradient(150deg, #d2799b, var(--berry)); left: 140px; bottom: 72px; transform: rotate(7deg); z-index: 3; }
@media (hover: hover) {
.series:hover .sbk1 { transform: rotate(-11deg) translate(-8px,4px); }
.series:hover .sbk2 { transform: rotate(0deg) translateY(-8px); }
.series:hover .sbk3 { transform: rotate(11deg) translate(8px,4px); }
}
/* Touch-Geräte kennen kein Hover: dort fächert sich die Reihe einmal auf,
   sobald sie ins Bild scrollt, und bleibt so stehen. */
@media (hover: none) and (prefers-reduced-motion: no-preference) {
  .series.in .sbk1 { animation: fan1 .7s .35s ease both; }
  .series.in .sbk2 { animation: fan2 .7s .35s ease both; }
  .series.in .sbk3 { animation: fan3 .7s .35s ease both; }
}
@keyframes fan1 { to { transform: rotate(-11deg) translate(-8px,4px); } }
@keyframes fan2 { to { transform: rotate(0deg) translateY(-8px); } }
@keyframes fan3 { to { transform: rotate(11deg) translate(8px,4px); } }

/* ---------- Gallery ---------- */
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.gbook { perspective: 900px; }
.gbook-inner {
  border-radius: 6px 14px 14px 6px; height: 320px; position: relative; overflow: hidden;
  box-shadow: var(--sh); transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s;
  transform-style: preserve-3d;
}
@media (hover: hover) { .gbook:hover .gbook-inner { transform: rotateY(-14deg) translateY(-6px); box-shadow: var(--sh-lg); } }
.gbook-inner::before { content:""; position:absolute; left:0; top:0; bottom:0; width:8px; background: rgba(0,0,0,0.32); z-index: 2; }
.gbook-inner::after { content:""; position:absolute; inset:9px; border:1.4px solid rgba(255,255,255,0.22); border-radius:4px 9px 9px 4px; pointer-events:none; z-index: 3; }

/* cover image fills the card */
.gbook-img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 6px 14px 14px 6px; }

/* overlay: tag top-left, title bottom */
.gbook-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  justify-content: space-between; padding: 14px 14px 14px 18px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.38) 0%, transparent 38%, transparent 55%, rgba(0,0,0,0.72) 100%);
  z-index: 1;
}
.gb-tag { font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: rgba(255,255,255,0.88); background: rgba(0,0,0,0.28); backdrop-filter: blur(4px); padding: 3px 8px; border-radius: 20px; align-self: flex-start; }
.gb-info { }
.gb-title { font-family: var(--display); font-size: 1.15rem; font-weight: 600; color: #fff; line-height: 1.15; text-shadow: 0 1px 4px rgba(0,0,0,0.5); }
.gb-foot { font-size: 0.66rem; color: rgba(255,255,255,0.65); margin-top: 4px; letter-spacing: 0.04em; }
.gallery-note { text-align: center; margin-top: 38px; font-size: 0.92rem; color: var(--muted-ink); }

/* ---------- Pricing ---------- */
.pricing { background: var(--ivory-2); }
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.pcol { background: var(--paper); border-radius: var(--r-lg); padding: 38px 32px; border: 1px solid rgba(42,20,38,0.07); box-shadow: var(--sh-sm); display: flex; flex-direction: column; position: relative; }
.pcol.featured { border: 1.5px solid var(--gold); box-shadow: var(--sh); transform: translateY(-8px); }
.pcol.featured::before { content:"Beliebteste Wahl"; position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: linear-gradient(120deg, var(--gold-200), var(--gold)); color: var(--ink); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 16px; border-radius: var(--r-pill); white-space: nowrap; box-shadow: var(--sh-gold); }
.pcol .pname { font-family: var(--body); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--plum-300); margin-bottom: 14px; }
.pcol .pprice { font-family: var(--display); font-size: 3rem; font-weight: 600; color: var(--ink); line-height: 1; }
.pcol .pprice small { font-family: var(--body); font-size: 0.92rem; font-weight: 500; color: var(--muted-ink); }
.pcol .pdesc { font-size: 0.92rem; color: var(--muted-ink); margin: 12px 0 24px; line-height: 1.55; }
.pcol ul { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; flex: 1; }
.pcol ul li { display: flex; gap: 11px; font-size: 0.94rem; color: var(--ink-soft); align-items: flex-start; }
.pcol ul li svg { width: 17px; height: 17px; color: var(--petrol); flex-shrink: 0; margin-top: 2px; }
.pcol .btn { width: 100%; justify-content: center; }
.btn-outline { background: transparent; color: var(--ink-soft); border: 1.5px solid rgba(42,20,38,0.14); }
@media (hover: hover) { .btn-outline:hover { color: var(--plum); border-color: var(--plum-300); } }
.price-foot { text-align: center; margin-top: 30px; font-size: 0.9rem; color: var(--muted-ink); }

/* ---------- Anlässe ----------
   Anlass oben, Beschreibung darunter — bewusst kein Zitat-Layout, denn es
   sind keine Kundenstimmen. */
.tgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tcard { background: var(--paper); border-radius: var(--r-lg); padding: 34px; box-shadow: var(--sh-sm); border: 1px solid rgba(42,20,38,0.05); display: flex; flex-direction: column; }
.tcard p { font-size: 1.08rem; color: var(--ink-soft); line-height: 1.6; font-family: var(--display); font-style: italic; font-weight: 500; }
.tauthor { display: flex; align-items: center; gap: 12px; order: -1; margin-bottom: 18px; }
.tauthor .ava { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.tauthor .ava svg { width: 21px; height: 21px; }
.tauthor strong { display: block; font-size: 0.9rem; color: var(--ink); }
.tauthor span { font-size: 0.8rem; color: var(--muted-ink); }

/* ---------- FAQ ---------- */
.faq-wrap { max-width: 760px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid rgba(42,20,38,0.1); }
.faq-q { width: 100%; background: none; border: none; cursor: pointer; text-align: left; padding: 26px 0; display: flex; justify-content: space-between; align-items: center; gap: 20px; font-family: var(--display); font-size: 1.3rem; font-weight: 600; color: var(--ink); }
.faq-q .pm { width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; border: 1.5px solid var(--plum-300); position: relative; transition: background .2s, border-color .2s; }
.faq-q .pm::before, .faq-q .pm::after { content:""; position: absolute; background: var(--plum); top: 50%; left: 50%; transition: transform .25s; }
.faq-q .pm::before { width: 12px; height: 1.8px; transform: translate(-50%,-50%); }
.faq-q .pm::after { width: 1.8px; height: 12px; transform: translate(-50%,-50%); }
.faq-item.open .faq-q .pm { background: var(--plum); border-color: var(--plum); }
.faq-item.open .faq-q .pm::before, .faq-item.open .faq-q .pm::after { background: #fff; }
.faq-item.open .faq-q .pm::after { transform: translate(-50%,-50%) scaleY(0); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.faq-a p { padding: 0 0 26px; color: var(--ink-soft); font-size: 1rem; line-height: 1.7; max-width: 62ch; }

/* ---------- Final CTA / Waitlist ---------- */
.cta { position: relative; overflow: hidden; background: radial-gradient(120% 120% at 50% -10%, #5a2a4d 0%, var(--plum) 45%, var(--ink) 100%); color: #fff; text-align: center; }
.cta .blob2 { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.4; }
.cta .cb1 { width: 360px; height: 360px; background: var(--berry); top: -120px; left: 10%; }
.cta .cb2 { width: 320px; height: 320px; background: var(--petrol); bottom: -120px; right: 12%; }
.cta .container { position: relative; z-index: 2; }
.cta-inner { max-width: 600px; margin: 0 auto; }
.cta .bloom-mini { width: 64px; height: 64px; margin: 0 auto 24px; }
.cta h2 { font-size: clamp(2.2rem, 4.5vw, 3.4rem); margin-bottom: 16px; }
.cta h2 em { font-style: italic; }
.cta-sub { color: rgba(255,255,255,0.72); font-size: 1.1rem; margin-bottom: 36px; line-height: 1.6; }
.wl-form { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.wl-form input { padding: 16px 22px; border-radius: var(--r-pill); border: 1.5px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.08); color: #fff; font-family: var(--body); font-size: 1rem; width: 300px; outline: none; transition: border-color .2s, background .2s; }
.wl-form input::placeholder { color: rgba(255,255,255,0.4); }
.wl-form input:focus { border-color: var(--gold-200); background: rgba(255,255,255,0.13); }
/* Einwilligung (DSGVO): klein und leise, aber Pflicht vor dem Absenden. */
.wl-consent { flex-basis: 100%; margin-top: 8px; font-size: 0.84rem; line-height: 1.5; color: rgba(255,255,255,0.55); display: flex; align-items: flex-start; justify-content: center; gap: 9px; text-align: left; cursor: pointer; }
.wl-form .wl-consent input { width: 16px; height: 16px; padding: 0; margin-top: 2px; flex-shrink: 0; accent-color: var(--gold); cursor: pointer; }
.wl-form .wl-consent input:focus-visible { outline: 2px solid var(--gold-200); outline-offset: 2px; }
.wl-consent a { color: rgba(255,255,255,0.75); text-decoration: underline; text-underline-offset: 2px; }
.wl-consent a:hover { color: var(--gold-200); }
.wl-error { color: #ffb4b4; font-size: 0.9rem; margin-top: 10px; }
.wl-success { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 8px 0; }
.wl-success-icon { width: 54px; height: 54px; border-radius: 50%; background: linear-gradient(120deg, var(--gold-200), var(--gold)); display: flex; align-items: center; justify-content: center; box-shadow: var(--sh-gold); }
.wl-success-title { font-family: var(--display); font-size: 1.5rem; font-weight: 600; color: #fff; }
.wl-success-text { color: rgba(255,255,255,0.6); font-size: 0.95rem; }

/* ---------- Aktionsleiste unten (nur Handy) ----------
   Blendet ein, sobald der Hero-Button aus dem Bild ist, und verschwindet,
   wenn das Formular in Sicht kommt. Merkt sich nichts (kein Web-Storage). */
.mcta { display: none; }
@media (max-width: 720px) {
  .mcta {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    position: fixed; z-index: 90; left: 12px; right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    padding: 8px 8px 8px 20px; border-radius: var(--r-pill);
    background: rgba(42,20,38,0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 14px 40px rgba(42,20,38,0.35);
    transform: translateY(calc(100% + 24px)); visibility: hidden;
    transition: transform .35s cubic-bezier(.2,.8,.2,1), visibility 0s .35s;
  }
  .mcta.show { transform: none; visibility: visible; transition: transform .35s cubic-bezier(.2,.8,.2,1), visibility 0s; }
  .mcta-note { font-size: 0.86rem; font-weight: 600; color: var(--gold-200); line-height: 1.25; }
  .mcta .btn { padding: 12px 20px; font-size: 0.95rem; }
}
@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
  .mcta, .mcta.show { transition: none; }
}

/* ---------- Footer ---------- */
footer { background: var(--ink); color: rgba(255,255,255,0.6); padding: 60px 0 36px; }
.foot-inner { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.foot-brand .brand .name { color: #fff; }
.foot-brand .brand .claim { color: var(--gold-200); }
.foot-brand p { font-size: 0.9rem; line-height: 1.6; margin-top: 16px; max-width: 30ch; color: rgba(255,255,255,0.5); }
.socials { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.socials a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 11px; border: 1px solid rgba(255,255,255,0.16); border-radius: 999px; font-size: 0.88rem; font-weight: 500; color: rgba(255,255,255,0.75); transition: color .2s, border-color .2s; }
.socials svg { width: 20px; height: 20px; flex: none; }
.socials a:hover, .socials a:focus-visible { color: var(--gold-200); border-color: var(--gold-200); }
.foot-col h4 { font-family: var(--body); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-bottom: 16px; font-weight: 700; }
.foot-col a { display: block; font-size: 0.92rem; color: rgba(255,255,255,0.65); padding: 6px 0; transition: color .2s; }
.foot-col a:hover { color: var(--gold-200); }
.foot-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 26px; font-size: 0.82rem; color: rgba(255,255,255,0.35); flex-wrap: wrap; gap: 12px; }

/* ---------- Reveal ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
  .reveal.in { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-bg .blob, .stage-rays, .stage-float, .sparkle, .hero-badge .dot, .scroll-cue .mouse::after { animation: none; }
  .petal, .bloom-core { animation: none; opacity: 1; }
}

/* ---------- Responsive ---------- */
/* Auf Tablet und Handy ist neben dem Button kein Platz für den Claim – der Footer zeigt ihn weiter. */
@media (max-width: 720px) {
  .nav .brand .claim { display: none; }
}
@media (max-width: 980px) {
  .nav-links a.lnk { display: none; }

  /* Handy/Tablet: zuerst Botschaft + Button, dann das Buch — der Kern der
     Seite ist so ohne Scrollen sichtbar. */
  .hero { min-height: 0; padding: 112px 24px 40px; }
  .hero-inner { grid-template-columns: 1fr; gap: 0; text-align: center; }
  .hero-sub { margin-left: auto; margin-right: auto; }
  .hero-actions { justify-content: center; margin-bottom: 18px; }
  .hero-stage { height: 400px; margin-top: 8px; }
  .stage-float { transform-origin: center top; scale: 0.82; }
  .scroll-cue { display: none; }

  .diff-inner { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .series { order: -1; width: 330px; max-width: 100%; margin: 0 auto; }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
}
@media (max-width: 720px) {
  .container { padding: 0 20px; }
  .section { padding: 72px 0; }
  .section-head { margin-bottom: 40px; }
  .section-head p { font-size: 1rem; }

  .hero h1 { font-size: clamp(2.3rem, 10.5vw, 3rem); margin-bottom: 16px; }
  .hero-sub { font-size: 1.04rem; margin-bottom: 26px; }
  .hero-badge { margin-bottom: 18px; }
  .hero-actions { flex-direction: column; gap: 4px; }
  .hero-actions .btn-primary { width: 100%; max-width: 340px; justify-content: center; padding: 17px 26px; font-size: 1.05rem; }
  .hero-stage { height: 330px; margin-top: 72px; }
  .stage-float { scale: 0.68; }

  /* Vertrauens-Leiste als kompaktes 2×2-Raster statt vier Zeilen */
  .strip-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; padding: 20px; }
  .strip-item { font-size: 0.84rem; gap: 8px; line-height: 1.3; }
  .strip-item .ic { width: 18px; height: 18px; }

  .problem-cards, .steps, .tgrid, .price-grid { grid-template-columns: 1fr; }
  .problem-cards { gap: 14px; }
  /* Problemkarten: Symbol neben Titel — halb so hoch, gleich viel Inhalt */
  .pcard { display: grid; grid-template-columns: 46px 1fr; column-gap: 16px; padding: 22px; }
  .pcard .pic { margin-bottom: 0; grid-row: span 2; }
  .pcard h3 { margin-bottom: 4px; align-self: center; }

  /* Hero ruhiger: weniger und kleinere Farbwolken, Strahlen stehen still,
     nur fünf Funken — spart Akku, der Aufblüh-Moment bleibt. */
  .hero-bg .blob { filter: blur(60px); }
  .hero-bg .b1 { width: 340px; height: 340px; }
  .hero-bg .b2 { width: 380px; height: 380px; }
  .hero-bg .b3 { display: none; }
  .stage-rays { animation: none; }
  .hero-stage > .sparkle:nth-of-type(n+6) { display: none; }

  /* So geht's als senkrechte Zeitleiste: Symbol links, Text linksbündig,
     die gestrichelte Goldlinie verbindet die Schritte. */
  .steps { gap: 0; max-width: 460px; margin: 0 auto; }
  .steps .connector { display: none; }
  .step { display: grid; grid-template-columns: 60px 1fr; column-gap: 18px; text-align: left; padding: 0 0 34px; }
  .step:last-child { padding-bottom: 0; }
  .step:not(:last-child)::after { content: ""; position: absolute; left: 29px; top: 70px; bottom: 6px; border-left: 1.5px dashed rgba(194,147,58,0.5); }
  .step-orb { width: 60px; height: 60px; margin: 0; grid-row: span 2; box-shadow: var(--sh-sm); }
  .step-orb::before { inset: -4px; }
  .step-orb svg { width: 26px; height: 26px; }
  .step-n { width: 22px; height: 22px; font-size: 0.72rem; top: -6px; right: -6px; }
  .step h3 { font-size: 1.24rem; margin: 6px 0 6px; }
  .step p { max-width: none; margin: 0; }

  /* Anlässe als Wisch-Reihe: die nächste Karte schaut rechts hervor */
  .tgrid { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -20px; padding: 4px 20px 18px; scroll-padding: 0 20px; scrollbar-width: none; }
  .tgrid::-webkit-scrollbar { display: none; }
  .tcard { flex: 0 0 84%; scroll-snap-align: start; }

  .gallery-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .gbook-inner { height: auto; aspect-ratio: 3 / 4; }
  .gbook-overlay { padding: 10px 10px 10px 16px; }
  .gb-title { font-size: 1rem; }
  .gallery-note { margin-top: 28px; }

  /* Beliebtestes Paket zuerst zeigen */
  .price-grid { gap: 20px; }
  .pcol { padding: 30px 24px; }
  .pcol.featured { transform: none; order: -1; margin-top: 14px; }
  .pcol .pprice { font-size: 2.6rem; }

  .tcard { padding: 26px 24px; }
  .faq-q { font-size: 1.18rem; padding: 20px 0; min-height: 64px; }
  .faq-a p { padding-bottom: 22px; }

  .cta-sub { font-size: 1.02rem; margin-bottom: 28px; }
  .wl-form { flex-direction: column; align-items: stretch; max-width: 400px; margin: 0 auto; }
  .wl-form input { width: 100%; }
  .wl-form .btn { width: 100%; justify-content: center; padding: 17px 26px; }
  /* Einwilligung vor dem Button: erst abhaken, dann absenden — kein Fehlversuch */
  .wl-consent { order: 1; justify-content: flex-start; font-size: 0.86rem; padding: 4px 0 6px; margin-top: 2px; }
  .wl-form .btn { order: 2; }
  .wl-form .wl-consent input { width: 22px; height: 22px; margin-top: 0; }

  .foot-inner { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .foot-brand { grid-column: 1 / -1; }
  .foot-col a { padding: 10px 0; }
  .foot-bottom { flex-direction: column; align-items: flex-start; gap: 6px; }
}
@media (max-width: 460px) {
  /* Bücherreihe bleibt in voller Breite gebaut, wird nur verkleinert und
     mittig gesetzt — so läuft auf 320px nichts aus dem Bild. */
  .series { width: 330px; max-width: none; margin: 0; left: 50%; translate: -50% 0; scale: 0.84; transform-origin: center; height: 320px; }
  .foot-inner { grid-template-columns: 1fr 1fr; }
  .foot-inner .foot-col:last-child { grid-column: 1 / -1; }
}
@media (max-width: 400px) {
  .nav-inner { padding: 0 16px; height: 64px; }
  .brand { gap: 8px; }
  .brand svg { width: 54px; height: 36px; }
  .brand .name { font-size: 1.65rem; }
  .nav .btn { padding: 10px 16px; font-size: 0.9rem; }
  .nav-cta .cta-long { display: none; }
  .nav-cta .cta-short { display: inline; }
  .hero { padding: 96px 18px 32px; }
}