:root {
  /* Fallbacks — werden von Base.astro aus der Config überschrieben */
  --accent: #16a34a;
  --accent-dark: #15803d;
  --ink: #14241a;
  --muted: #5b6b61;
  --bg: #ffffff;
  --soft: #f3f8f4;
  --radius: 14px;
  --font-heading: Georgia, serif;
  --font-body: system-ui, sans-serif;
  --border: #e6ebe7;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .brand { font-family: var(--font-heading); letter-spacing: -0.015em; }

.container { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; }
.narrow { max-width: 760px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  background: var(--accent); color: #fff; font-weight: 700; font-size: 1.05rem;
  font-family: var(--font-body);
  padding: 1rem 2.2rem; border: none; border-radius: var(--radius);
  cursor: pointer; text-decoration: none;
  transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--accent) 32%, transparent);
}
.btn:hover { transform: translateY(-2px); background: var(--accent-dark); }
.btn:disabled { opacity: 0.6; cursor: wait; transform: none; }
.btn--ghost {
  background: transparent; color: var(--accent);
  border: 2px solid var(--accent); box-shadow: none;
}
.btn--ghost:hover { background: var(--accent); color: #fff; }

/* ---------- Badges & chips ---------- */
.badge {
  display: inline-block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.03em;
  text-transform: uppercase; color: var(--accent-dark);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  padding: 0.35rem 0.8rem; border-radius: 999px;
}
.trustrow {
  display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; color: var(--muted);
  font-size: 0.92rem; margin-top: 1rem;
}
.trustrow span { display: flex; align-items: center; gap: 0.4rem; }
.trustrow span::before { content: "✓"; color: var(--accent); font-weight: 800; }

/* ---------- NAV ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 1.5rem; max-width: 1100px; margin: 0 auto; }
.brand { font-weight: 800; font-size: 1.35rem; display: flex; align-items: center; gap: 0.4rem; }
.nav__links { display: flex; gap: 1.6rem; }
.nav__links a { color: var(--ink); text-decoration: none; font-size: 0.95rem; font-weight: 500; opacity: 0.8; }
.nav__links a:hover { opacity: 1; color: var(--accent); }
.nav .btn { padding: 0.6rem 1.2rem; font-size: 0.95rem; }

/* ---------- Sections ---------- */
.section { padding: 5rem 0; }
.section.soft { background: var(--soft); }
.section h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); text-align: center; margin-bottom: 0.6rem; }
.section .lead { text-align: center; color: var(--muted); max-width: 640px; margin: 0 auto 3rem; font-size: 1.1rem; }

/* ---------- HERO ---------- */
.hero-section { position: relative; overflow: hidden; }
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
}
.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--bg) 93%, transparent) 0%,
    color-mix(in srgb, var(--bg) 80%, transparent) 48%,
    color-mix(in srgb, var(--bg) 55%, transparent) 100%);
}
.hero-section .hero { position: relative; z-index: 2; }
.hero { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3.5rem; align-items: center;
  /* padding-block statt padding: .hero sitzt auf DEMSELBEN Element wie .container und hat
     deren seitliche Polsterung sonst mit ueberschrieben - auf dem Handy klebte der ganze
     Hero-Text am Bildschirmrand (0 px Abstand). Nicht zu "padding" zuruecksetzen. */
  padding-block: 4.5rem; }
.hero h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.08; font-weight: 800; }
.hero .sub { font-size: 1.25rem; color: var(--muted); margin-top: 1.1rem; }
.hero .problem { font-weight: 600; margin-top: 1rem; }
.hero .stat { background: var(--soft); border-left: 4px solid var(--accent); padding: 0.9rem 1.1rem; border-radius: 8px; margin: 1.4rem 0; font-size: 0.98rem; }
.price { font-size: 1.5rem; font-weight: 800; margin: 1.4rem 0 0.4rem; }
.price small { color: var(--muted); font-weight: 400; font-size: 1rem; vertical-align: middle; margin-left: 0.7rem; }
.price-old { text-decoration: line-through; color: var(--muted); font-weight: 400; margin: 0 0.15rem 0 0.7rem; opacity: 0.7; vertical-align: middle; }
.bigprice .price-old { font-size: 1.4rem; }
.socialproof { color: var(--muted); font-size: 0.92rem; margin-top: 1.2rem; }
.socialproof strong { color: var(--ink); }

ul.bullets { list-style: none; margin: 1.4rem 0; display: grid; gap: 0.55rem; }
ul.bullets li { display: flex; gap: 0.6rem; align-items: flex-start; }
ul.bullets li::before { content: "✓"; color: var(--accent); font-weight: 800; }

/* ---------- 3D Book Mockup ---------- */
.book-scene { perspective: 2000px; display: flex; justify-content: center; padding: 2rem 0; }
.book {
  position: relative; width: 260px; aspect-ratio: 1 / 1.5;
  transform-style: preserve-3d; transform: rotateY(-28deg) rotateX(4deg);
  transition: transform 0.6s ease;
}
.book:hover { transform: rotateY(-12deg) rotateX(2deg); }
.book__cover {
  position: absolute; inset: 0; border-radius: 0; overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); transform: translateZ(15px);
}
.book__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.book__cover::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 35%, rgba(255,255,255,0) 100%);
}
/* Buchrücken (linke Kante, gebunden) — 30px Dicke, an die Cover-Kante gesetzt */
.book__spine {
  position: absolute; left: 0; top: 0; width: 30px; height: 100%;
  background: linear-gradient(90deg, #00000066, #00000022);
  transform: translateX(-15px) rotateY(90deg);
  border-radius: 0;
}
/* Seitenblock (rechte Kante / Fore-Edge) */
.book__pages {
  position: absolute; right: 0; top: 0; width: 30px; height: 100%;
  background: repeating-linear-gradient(90deg, #e6e6e6, #e6e6e6 1px, #fbfbfb 1px, #fbfbfb 3px);
  transform: translateX(15px) rotateY(90deg);
  border-radius: 0;
}

/* ---------- Pain ---------- */
.pain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.pain-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.8rem; }
.pain-card h3 { font-size: 1.1rem; margin-bottom: 0.5rem; color: var(--accent-dark); }
.pain-card p { color: var(--muted); font-size: 0.97rem; }
.pullquote { text-align: center; font-family: var(--font-heading); font-size: 1.4rem; font-style: italic; max-width: 720px; margin: 3rem auto 0; color: var(--ink); }

/* ---------- Overview grid ---------- */
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 1.8rem; }
.card .ico { font-size: 2rem; display: block; margin-bottom: 0.7rem; }
.card-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; margin-bottom: 0.9rem; }
.card--photo { padding: 0; overflow: hidden; }
.card-photo { aspect-ratio: 4/3; background-size: cover; background-position: center; display: flex; align-items: flex-end; padding: 1.2rem; position: relative; }
.card-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,0) 55%); }
.card-photo h3 { position: relative; z-index: 1; color: #fff; margin: 0; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.card--photo > p { padding: 1.3rem 1.5rem 1.6rem; color: var(--muted); }
.avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.tcard .who { display: flex; align-items: center; gap: 0.7rem; }
.card h3 { font-size: 1.15rem; margin-bottom: 0.4rem; }
.card p { color: var(--muted); font-size: 0.97rem; }

/* ---------- Syllabus ---------- */
.modules { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.15rem; }
.module { border: 1px solid var(--border); border-radius: var(--radius); padding: 1.35rem 1.4rem; background: #fff; position: relative; }
.module__num { position: absolute; top: -14px; left: 1.6rem; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 800; font-family: var(--font-body); }
.module h3 { font-size: 1.2rem; margin: 0.5rem 0 0.9rem; }
.module ul { list-style: none; display: grid; gap: 0.4rem; }
.module li { display: flex; gap: 0.5rem; font-size: 0.95rem; color: var(--muted); }
.module li::before { content: "—"; color: var(--accent); }

/* ---------- Gallery / Leseprobe ---------- */
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.gitem { margin: 0; cursor: zoom-in; }
.gitem .frame {
  position: relative; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--border); background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.07);
  aspect-ratio: 1240 / 1754; transition: transform 0.2s ease;
}
.gitem:hover .frame { transform: translateY(-4px); }
.gitem img, .gitem video { width: 100%; height: 100%; object-fit: cover; display: block; }
.gitem .play {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(0,0,0,0.25); color: #fff; font-size: 2.5rem;
}
.gitem figcaption { text-align: center; margin-top: 0.7rem; font-size: 0.9rem; color: var(--muted); }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 100; display: none;
  align-items: center; justify-content: center; padding: 2rem;
  background: rgba(0,0,0,0.85); backdrop-filter: blur(4px);
}
.lightbox.open { display: flex; }
.lightbox img, .lightbox video { max-width: 92vw; max-height: 88vh; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.lightbox .close { position: absolute; top: 1.2rem; right: 1.6rem; color: #fff; font-size: 2.5rem; cursor: pointer; line-height: 1; background: none; border: none; }

/* ---------- Bonus ---------- */
.bonus-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; max-width: 820px; margin: 0 auto; }
.bonus-card { background: #fff; border: 2px dashed var(--accent); border-radius: var(--radius); padding: 1.8rem; position: relative; }
/* WERT-Badge im Button-Look (gefuellter Accent, weisse Schrift, Schatten) — wie die Kauf-Buttons */
.bonus-card .value {
  position: absolute; top: 1rem; right: 1rem;
  background: var(--accent); color: #fff;
  font-weight: 800; font-size: 0.82rem; letter-spacing: 0.02em;
  padding: 0.5rem 1rem; border-radius: 999px;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 40%, transparent);
}
.bonus-card h3 { margin-bottom: 0.5rem; padding-right: 4rem; }
.bonus-card p { color: var(--muted); font-size: 0.95rem; }
.bonus-total { text-align: center; margin-top: 2.5rem; font-size: 1.2rem; }
.bonus-total strong { color: var(--accent-dark); }

/* ---------- Learnings ---------- */
.learn { columns: 2; column-gap: 2.5rem; max-width: 820px; margin: 0 auto; }
.learn li { break-inside: avoid; list-style: none; display: flex; gap: 0.6rem; margin-bottom: 0.9rem; }
.learn li::before { content: "✓"; color: var(--accent); font-weight: 800; }

/* ---------- Testimonials (shared style — both engines) ---------- */
.tgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 330px)); gap: 1.4rem; justify-content: center; }
.tcard { background: #faf7f2; border: 1px solid var(--border); border-radius: var(--radius); padding: 2.1rem 1.7rem; text-align: center; display: flex; flex-direction: column; align-items: center; }
.tc-avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.tc-quote { font-style: italic; line-height: 1.65; margin-bottom: 1.1rem; color: var(--ink); }
.tc-who { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 0.7rem; }
.tc-who-tx { display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; }
.tc-who strong { font-weight: 700; color: var(--ink); }
.tc-meta { color: var(--muted); font-size: 0.9rem; }
.rating { text-align: center; margin-top: 2rem; font-weight: 600; color: var(--muted); }

/* ---------- Fit ---------- */
.fit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.fit-card { text-align: center; padding: 1.8rem; }
.fit-card h3 { color: var(--accent-dark); margin-bottom: 0.5rem; }
.fit-card p { color: var(--muted); }

/* ---------- Author ---------- */
.author-box { display: flex; gap: 1.8rem; align-items: center; }
.author-avatar { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; flex-shrink: 0; box-shadow: 0 10px 30px rgba(0,0,0,.12); }
.author-eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; font-weight: 700; color: var(--accent); }
.author-name { font-size: 1.4rem; margin: .2rem 0 .6rem; }
.author-name span { color: var(--muted); font-weight: 400; font-size: 1rem; }
.author-box p { color: var(--muted); }

/* ---------- Offer box ---------- */
.offer-box { max-width: 620px; margin: 0 auto; background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 2.5rem; box-shadow: 0 24px 60px rgba(0,0,0,0.08); text-align: center; }
.offer-box ul { list-style: none; text-align: left; display: grid; gap: 0.7rem; margin: 1.5rem 0; }
.offer-box li { display: flex; gap: 0.6rem; }
.offer-box li::before { content: "✓"; color: var(--accent); font-weight: 800; }
.offer-box .oldval { color: var(--muted); }
.offer-box .bigprice { font-size: 2.4rem; font-weight: 800; font-family: var(--font-heading); margin: 0.3rem 0; }
.offer-box .fine { color: var(--muted); font-size: 0.85rem; margin-bottom: 1.5rem; }

/* ---------- FAQ ---------- */
.faq details { border-bottom: 1px solid var(--border); padding: 1.2rem 0; }
.faq summary { font-weight: 600; cursor: pointer; font-size: 1.05rem; list-style: none; display: flex; justify-content: space-between; }
.faq summary::after { content: "+"; color: var(--accent); font-weight: 800; }
.faq details[open] summary::after { content: "–"; }
.faq p { color: var(--muted); margin-top: 0.7rem; }

/* ---------- Final CTA ---------- */
.cta { text-align: center; padding: 5.5rem 0; }
.cta h2 { font-size: clamp(1.8rem,3vw,2.4rem); margin-bottom: 1.5rem; }
.cta .tagline { color: var(--muted); margin-top: 1.2rem; }

/* ---------- Sticky Buy Bar ---------- */
.sticky-buy {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: color-mix(in srgb, var(--bg) 95%, transparent);
  backdrop-filter: blur(12px); border-top: 1px solid var(--border);
  box-shadow: 0 -6px 24px rgba(0,0,0,.08);
  transform: translateY(110%); transition: transform .28s ease;
}
.sticky-buy.visible { transform: translateY(0); }
.sticky-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 1.5rem; }
.sticky-info { display: flex; flex-direction: column; line-height: 1.25; }
.sticky-info strong { font-size: .95rem; }
.sticky-price { font-size: .95rem; font-weight: 800; }
.sticky-buy .btn { padding: .75rem 1.6rem; white-space: nowrap; }
@media (max-width: 600px) {
  .sticky-info strong { display: none; }
  .sticky-inner { padding: .55rem .9rem; }
  .sticky-buy .btn { flex: 1; }
}

/* ---------- Footer ---------- */
footer { background: var(--ink); color: #fff; padding: 3rem 0; }
footer .container { display: grid; gap: 0.6rem; text-align: center; font-size: 0.9rem; opacity: 0.85; }
footer a { color: #fff; text-decoration: underline; opacity: 0.8; }
footer .flinks { display: flex; gap: 1.2rem; justify-content: center; flex-wrap: wrap; margin: 0.5rem 0; }

/* ---------- Responsive ---------- */
@media (max-width: 880px) {
  .hero { grid-template-columns: 1fr; text-align: center; }
  .hero .stat { text-align: left; }
  ul.bullets, .trustrow { justify-content: center; }
  .pain-grid, .grid3, .modules, .bonus-grid, .tgrid, .fit-grid { grid-template-columns: 1fr; }
  .learn { columns: 1; }
  .nav__links { display: none; }
}

/* ============ Mehr Farbe ============ */
/* Hero bekommt einen sanften Marken-Verlauf, auch ohne Hintergrundbild */
.hero-section:not(.has-bg) {
  background:
    radial-gradient(1100px 520px at 85% -8%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 60%),
    radial-gradient(900px 520px at -10% 115%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 55%),
    linear-gradient(180deg, var(--soft), var(--bg) 72%);
}
/* Akzent-Unterstrich unter jeder Section-Überschrift */
.section h2, .cta h2 { position: relative; }
.section h2::after, .cta h2::after {
  content: ""; display: block; width: 56px; height: 4px; border-radius: 3px; margin: .85rem auto 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-dark));
}
/* Marke + Pullquote farbig */
.brand { color: var(--accent-dark); }
.pullquote { color: var(--accent-dark); }
/* Karten: Akzent-Hover (Rand + farbiger Schatten + leichtes Anheben) */
.card, .pain-card, .module, .tcard, .fit-card, .bonus-card { transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.card:hover, .pain-card:hover, .module:hover, .tcard:hover, .fit-card:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow: 0 14px 34px color-mix(in srgb, var(--accent) 16%, transparent);
  transform: translateY(-3px);
}
/* Offer-Box & Hero-Stat kräftiger */
.offer-box { border-top: 5px solid var(--accent); }
.hero .stat { background: color-mix(in srgb, var(--accent) 9%, var(--bg)); }
.badge { background: color-mix(in srgb, var(--accent) 16%, transparent); }
/* Final-CTA: kräftiger Marken-Verlauf, weißer Text + weißer Button */
.cta.soft { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: #fff; }
.cta.soft h2 { color: #fff; }
.cta.soft h2::after { background: rgba(255,255,255,.85); }
.cta.soft .tagline { color: rgba(255,255,255,.88); }
.cta.soft .btn { background: #fff; color: var(--accent-dark); box-shadow: 0 12px 30px rgba(0,0,0,.20); }
.cta.soft .btn:hover { background: #fff; filter: brightness(.95); }

/* === Redesign: visueller Bonus + Autor 2-spaltig (Text links / Hochkant-Foto rechts) === */
.bonus-card.has-img { padding-top: 0; overflow: hidden; }
.bonus-card .bonus-img { margin: 0 -1.8rem 1.2rem; aspect-ratio: 16 / 10; overflow: hidden; background: color-mix(in srgb, var(--accent) 8%, var(--bg)); }
.bonus-card .bonus-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bonus-card.has-img .value { top: 0.8rem; right: 0.8rem; }
.bonus-cta .btn { min-width: 280px; }

.author-box { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2.6rem; align-items: center; }
.author-photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius); display: block; box-shadow: 0 18px 44px rgba(0,0,0,.16); }
@media (max-width: 760px) {
  .author-box { grid-template-columns: 1fr; }
  .author-photo { max-width: 320px; margin: 0 auto; }
}

/* === Finaler Kauf-CTA: groesser ziehen (hoeher + laenger) === */
.cta .btn { padding: 1.4rem 4rem; font-size: 1.2rem; min-width: 360px; }
@media (max-width: 560px) { .cta .btn { min-width: 0; width: 100%; padding: 1.3rem 1.5rem; } }

/* === Dark Mode (pro Shop im Builder schaltbar: theme.darkDefault -> <html data-theme="dark">; gilt fuer ALLE Besucher, kein Toggle) === */
/* :root[...] -> hoehere Spezifitaet als die Inline-<style>:root{themeVars} (sonst gewinnt #fff per Reihenfolge) */
:root[data-theme="dark"] {
  --ink: #e8edf1;
  --muted: #9aa6b0;
  --bg: #0f1217;
  --soft: #171c23;
  --border: #2a313b;
}
[data-theme="dark"] body { color: var(--ink); background: var(--bg); }
[data-theme="dark"] .card,
[data-theme="dark"] .module,
[data-theme="dark"] .bonus-card,
[data-theme="dark"] .tcard,
[data-theme="dark"] .offer-box,
[data-theme="dark"] .gitem { background: var(--soft); }
[data-theme="dark"] .offer-box { box-shadow: 0 24px 60px rgba(0,0,0,0.5); }
[data-theme="dark"] footer { background: #090b0e; }

/* === Custom-Logo (generiertes Icon) im Markentitel — ersetzt das Standard-Emoji === */
.brand-logo { height: 1.5em; width: 1.5em; object-fit: contain; vertical-align: -0.34em; margin-right: 0.12em; border-radius: 7px; }
.tagline .brand-logo { height: 1.3em; width: 1.3em; vertical-align: -0.28em; }

/* ── Zwei-Tier-Angebot (Standard / Premium) ── */
.tiers{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;max-width:920px;margin:2.5rem auto 0;align-items:stretch}
@media(max-width:760px){.tiers{grid-template-columns:1fr}}
.tier{position:relative;display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:1.9rem 1.7rem}
.tier--premium{border:2px solid var(--accent);box-shadow:0 12px 44px rgba(0,0,0,.20)}
.tier-badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;font-size:.72rem;font-weight:800;padding:.32rem .95rem;border-radius:999px;white-space:nowrap;text-transform:uppercase;letter-spacing:.03em}
.tier-name{font-family:var(--font-heading);font-size:1.15rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--accent)}
.tier-price{font-size:2.05rem;font-weight:800;margin:.45rem 0 1.1rem;line-height:1.1}
.tier-price small{font-size:.78rem;font-weight:400;color:var(--muted);display:block;margin-top:.2rem}
.tier ul{list-style:none;padding:0;margin:0 0 1.3rem;flex:1}
.tier li{padding:.42rem 0 .42rem 1.7rem;position:relative;font-size:.97rem;line-height:1.4}
.tier li::before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:800}
.tier--premium li::before{content:"◆"}
.addaudio{display:flex;align-items:center;gap:.55rem;font-size:.9rem;background:var(--soft);border:1px dashed var(--border);border-radius:9px;padding:.65rem .8rem;margin-bottom:1rem;cursor:pointer}
.addaudio strong{margin-left:auto;color:var(--accent);white-space:nowrap}
.tier-btn{margin-top:auto}

/* ==== Premium-Bundle-Tiers mit Buch (breiter, Premium klar dominanter) ==== */
.wide-offer{max-width:1180px}
.tiers--book{grid-template-columns:1fr 1.32fr;max-width:1180px;gap:1.8rem;align-items:start;margin-top:3rem}
/* Hier stand bis 27.08.2026 ein waagerechtes Karussell fuer kleine Bildschirme.
   ENTFERNT auf Ansage des Betreibers: auf dem Handy wird NICHT seitlich gewischt,
   nur nach unten. Was nebeneinander nicht mehr passt, stapelt sich - siehe den
   Block "Angebots-Karten auf kleinen Geraeten" am Dateiende. Nicht wieder einbauen;
   die Mobil-Wache meldet jeden waagerechten Schieber als Befund. */
.tiers--book .tier{padding:1.7rem 1.6rem}
.tier-book{display:flex;justify-content:center}
.tier-book .book-scene{padding:.2rem 0 1.1rem;perspective:1400px}
.tier-book .book{width:150px}
.tiers--book .tier--premium .tier-book .book{width:150px}
.tier-head{text-align:center;margin-bottom:.2rem}
.tiers--book .tier-name{font-family:var(--font-heading);font-size:1.5rem;text-transform:none;letter-spacing:0;color:var(--ink);font-weight:800;line-height:1.15}
.tiers--book .tier--premium .tier-name{color:var(--accent-dark,var(--accent))}
.tier-tag{font-style:italic;color:var(--muted);font-size:.95rem;margin:.35rem 0 0;line-height:1.35}
.tier-priceblock{text-align:center;margin:1rem 0 1.1rem}
.tier-priceline{display:flex;align-items:baseline;justify-content:center;gap:.5rem}
.tiers--book .tier-price{font-size:2.4rem;font-weight:800;margin:0;line-height:1}
.tiers--book .tier--premium .tier-price{font-size:3rem}
.tier-oldprice{text-decoration:line-through;color:var(--muted);font-size:1.15rem;font-weight:600}
.tier-save{color:var(--accent);font-weight:800;font-size:.82rem;letter-spacing:.03em;text-transform:uppercase;margin-top:.35rem}
.tier-feat{list-style:none;padding:0;margin:0 0 1.2rem}
.tier-allin{text-align:center;font-weight:700;font-size:.95rem;color:var(--ink);background:color-mix(in srgb,var(--accent) 12%,transparent);border-radius:10px;padding:.6rem;margin:0 0 .7rem}
.tier-audio{text-align:center;font-weight:600;font-size:.92rem;color:var(--ink);background:color-mix(in srgb,var(--accent) 8%,transparent);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);border-radius:10px;padding:.55rem;margin:0 0 1rem}
.tier-audio strong{color:var(--accent-dark,var(--accent))}
.tier-bonuses{border:1px dashed color-mix(in srgb,var(--accent) 55%,transparent);border-radius:12px;padding:1rem 1.1rem;margin:0 0 1.3rem;background:color-mix(in srgb,var(--accent) 6%,transparent)}
.tier-bonuses-h{text-align:center;font-weight:800;text-transform:uppercase;font-size:.78rem;letter-spacing:.05em;color:var(--accent-dark,var(--accent));margin-bottom:.7rem}
.tbonus{display:grid;grid-template-columns:auto 1fr auto;gap:.6rem;align-items:center;padding:.5rem 0;border-bottom:1px solid var(--border)}
.tbonus:last-child{border-bottom:0}
.tbonus-tag{background:var(--accent);color:#fff;font-size:.6rem;font-weight:800;padding:.22rem .5rem;border-radius:5px;text-transform:uppercase;white-space:nowrap;letter-spacing:.03em}
.tbonus-title{font-size:.92rem;line-height:1.3}
.tbonus-val{font-style:italic;color:var(--accent-dark,var(--accent));font-size:.82rem;white-space:nowrap;font-weight:600}
.tier-secure{text-align:center;font-size:.7rem;color:var(--muted);margin-top:.85rem;text-transform:uppercase;letter-spacing:.04em}
.tiers--book .tier--premium{padding-top:0;overflow:hidden;border-width:2px;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 9%,var(--bg)),var(--bg) 62%);box-shadow:0 22px 60px rgba(0,0,0,.22)}
.tier-ribbon{margin:0 -1.6rem 1.2rem;padding:.62rem 1rem;background:linear-gradient(90deg,var(--accent-dark,var(--accent)),var(--accent));color:#fff;text-align:center;font-weight:800;text-transform:uppercase;font-size:.76rem;letter-spacing:.05em}
.tr-stars{margin-right:.35rem}
.tiers--book .tier--premium .tier-btn.primary{padding:1.05rem}

/* Hero: kompaktes Zwei-Paket-Angebot (beide Optionen in der ersten Frame) */
.hero-offer2{display:grid;grid-template-columns:1fr 1.12fr;gap:.7rem;margin:1.4rem 0 .3rem;max-width:540px}
@media(max-width:560px){.hero-offer2{grid-template-columns:1fr}}
.hoc{position:relative;display:flex;flex-direction:column;gap:.12rem;text-align:left;background:var(--bg);border:1.5px solid var(--border);border-radius:14px;padding:.95rem 1rem;cursor:pointer;font-family:inherit;transition:transform .15s ease,box-shadow .15s ease}
.hoc:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.13)}
.hoc--prem{border-color:var(--accent);border-width:2px;background:color-mix(in srgb,var(--accent) 8%,var(--bg));box-shadow:0 12px 34px color-mix(in srgb,var(--accent) 20%,transparent);padding-top:1.35rem}
.hoc-badge{position:absolute;top:-11px;left:.9rem;background:var(--accent);color:#fff;font-size:.58rem;font-weight:800;text-transform:uppercase;letter-spacing:.03em;padding:.22rem .55rem;border-radius:999px;white-space:nowrap}
.hoc-name{font-family:var(--font-heading);font-weight:800;font-size:1rem;color:var(--ink)}
.hoc-price{font-weight:800;font-size:1.4rem;color:var(--ink);line-height:1.1}
.hoc--prem .hoc-price{font-size:1.65rem;color:var(--accent-dark,var(--accent))}
.hoc-price s{font-size:.82rem;color:var(--muted);font-weight:600}
.hoc-line{font-size:.76rem;color:var(--muted)}
.hoc-btn{margin-top:.6rem;text-align:center;background:var(--soft);color:var(--ink);font-weight:800;font-size:.82rem;padding:.6rem;border-radius:10px}
.hoc-btn.primary{background:var(--accent);color:#fff}
.hero-offer2-note{font-size:.78rem;color:var(--muted);margin:.2rem 0 0}

/* Audiobook-Upsell-Popup */
.audio-upsell{position:fixed;inset:0;z-index:9998;display:flex;align-items:center;justify-content:center;padding:1.2rem;background:rgba(15,20,25,.55);opacity:0;pointer-events:none;transition:opacity .2s}
.audio-upsell.open{opacity:1;pointer-events:auto}
.audio-upsell .au-card{background:var(--bg);border-radius:var(--radius);max-width:420px;width:100%;padding:2rem 1.8rem;text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.3);transform:translateY(10px);transition:transform .2s}
.audio-upsell.open .au-card{transform:none}
.audio-upsell .au-ic{font-size:2.2rem;margin-bottom:.3rem}
.audio-upsell h3{font-family:var(--font-heading);font-size:1.4rem;margin:0 0 .6rem;color:var(--ink)}
.audio-upsell p{color:var(--muted);line-height:1.55;margin:0 0 1.4rem;font-size:.98rem}
.audio-upsell .au-yes{display:block;width:100%;background:var(--accent);color:#fff;border:none;border-radius:var(--radius);padding:1rem;font-size:1rem;font-weight:700;cursor:pointer;margin-bottom:.55rem}
.audio-upsell .au-yes:hover{opacity:.92}
.audio-upsell .au-no{display:block;width:100%;background:none;border:none;color:var(--muted);padding:.55rem;font-size:.9rem;cursor:pointer}
.audio-upsell .au-no:hover{color:var(--ink)}


/* ── Dual-Angebot als Vollbild-Hintergrund-Hero mit Glas-Tiers (Option 2) ── */
.offer-hero { padding: 3rem 0 3.6rem; text-align: center; }
.offer-hero .hero-overlay { background: color-mix(in srgb, var(--bg) 74%, transparent); }
.offer-hero > .container { position: relative; z-index: 2; }
.offer-hero .badge { display: inline-block; margin-bottom: .35rem; }
.offer-hero-title { font-family: var(--font-heading); font-weight: 800; font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.1; margin: .5rem 0 .45rem; }
.offer-hero-sub { color: var(--muted); font-size: 1.1rem; max-width: 640px; margin: 0 auto 1rem; }
.offer-hero .tiers--book { margin-top: 2.2rem; text-align: left; }
.offer-hero-fine { text-align: center; margin-top: 1.3rem; }
.offer-hero-sp { text-align: center; margin-top: 1rem; }
/* Frosted-Glass-Karten auf dem Foto */
.tiers--glass .tier { background: color-mix(in srgb, var(--bg) 58%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.15); backdrop-filter: blur(16px) saturate(1.15); border: 1px solid color-mix(in srgb, #ffffff 45%, transparent); box-shadow: 0 24px 70px rgba(0,0,0,.22); }
.tiers--glass .tier--premium { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 20%, color-mix(in srgb, var(--bg) 50%, transparent)), color-mix(in srgb, var(--bg) 62%, transparent)); border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
@media (max-width: 760px) { .offer-hero .tiers--book { margin-left: -1.2rem; margin-right: -1.2rem; } }


/* Hero-Buch dezent groesser (Single/Story-Hero) */
.hero .book{width:300px}
@media(max-width:820px){.hero .book{width:220px}}


/* === Bonus-Karten Redesign: cleane Karten, Icon + Wert-Pill (kein Strichrand, kein Overlap) === */
.bonus-grid{grid-template-columns:repeat(3,1fr);gap:1.3rem;max-width:1060px}
.bonus-card2{display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--border);border-radius:calc(var(--radius) + 2px);padding:1.5rem 1.5rem 1.6rem;box-shadow:0 10px 30px rgba(0,0,0,.06);transition:transform .15s ease,box-shadow .15s ease;overflow:hidden}
.bonus-card2:hover{transform:translateY(-3px);box-shadow:0 20px 46px rgba(0,0,0,.11)}
.bonus-card2-top{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:1.05rem}
.bonus-card2-ico{width:46px;height:46px;flex:0 0 auto;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;background:color-mix(in srgb,var(--accent) 14%,transparent)}
.bonus-card2-val{background:var(--accent);color:#fff;font-weight:800;font-size:.76rem;letter-spacing:.02em;padding:.42rem .82rem;border-radius:999px;white-space:nowrap;box-shadow:0 8px 20px color-mix(in srgb,var(--accent) 32%,transparent)}
.bonus-card2-body h3{font-size:1.1rem;line-height:1.3;margin:0 0 .5rem}
.bonus-card2-body p{color:var(--muted);font-size:.94rem;line-height:1.5;margin:0}
.bonus-card2.has-img{padding:0}
.bonus-card2-img{position:relative;aspect-ratio:16/10;overflow:hidden;background:color-mix(in srgb,var(--accent) 8%,var(--bg))}
.bonus-card2-img img{width:100%;height:100%;object-fit:cover;display:block}
.bonus-card2-val.on-img{position:absolute;top:.8rem;right:.8rem}
.bonus-card2.has-img .bonus-card2-body{padding:1.4rem 1.5rem 1.6rem}
[data-theme="dark"] .bonus-card2{background:var(--soft)}

/* === Untere Angebots-Karte (Single): 2-Spalten, Buch + Preis, hochwertig === */
.offer-final{display:grid;grid-template-columns:auto 1fr;gap:2.6rem;align-items:center;max-width:880px;margin:2.5rem auto 0;background:var(--bg);border:1px solid var(--border);border-radius:calc(var(--radius) + 6px);padding:2.6rem 2.8rem;box-shadow:0 26px 74px rgba(0,0,0,.12)}
[data-theme="dark"] .offer-final{background:var(--soft)}
.offer-final-book{display:flex;justify-content:center}
.offer-final-book .book{width:255px}
.offer-final-main .badge{margin-bottom:.5rem}
.offer-final-tag{font-style:italic;color:var(--muted);margin:.1rem 0 1.1rem;font-size:1.02rem}
.offer-final-feat{list-style:none;padding:0;margin:0 0 1.1rem}
.offer-final-feat li{padding:.42rem 0 .42rem 1.8rem;position:relative;font-size:1rem;line-height:1.4}
.offer-final-feat li::before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:800}
.offer-final-oldval{color:var(--muted);font-size:.95rem;margin:0 0 .35rem}
.offer-final-priceline{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap}
.offer-final-price{font-family:var(--font-heading);font-size:2.35rem;font-weight:800;line-height:1.04}
.offer-final-old{text-decoration:line-through;color:var(--muted);font-size:1.25rem;font-weight:600}
.offer-final-save{color:var(--accent);font-weight:800;font-size:.85rem;letter-spacing:.03em;text-transform:uppercase;margin:.4rem 0 .1rem}
.offer-final-btn{width:100%;margin-top:1.1rem;padding:1rem}
.offer-final-fine{margin-top:.9rem}
@media(max-width:820px){.offer-final{grid-template-columns:1fr;text-align:center;padding:2rem 1.5rem;gap:1.6rem}.offer-final-book .book{width:200px}.offer-final-feat{text-align:left;display:inline-block;margin:0 auto 1.1rem}.offer-final-priceline{justify-content:center}}
@media(max-width:900px){.bonus-grid{grid-template-columns:1fr;max-width:520px}}

/* Fine-Print der Angebots-Karte einzeilig (Mobil darf umbrechen) */
.offer-final-fine{font-size:.8rem;white-space:nowrap;letter-spacing:0}
@media(max-width:820px){.offer-final-fine{white-space:normal;font-size:.76rem}}

/* Fine-Print mittig unter dem Button */
.offer-final-fine{text-align:center}

/* Untere Angebots-Sektion mit Hero-Hintergrund wie oben */
.offer-final-sec{position:relative;overflow:hidden}
.offer-final-sec>.container{position:relative;z-index:2}
.offer-final-sec .hero-overlay{background:color-mix(in srgb,var(--bg) 78%,transparent)}

/* Buch in Angebots-Karte groesser */
.offer-final{gap:2.9rem}

/* Bonus-Gesamtwert: alter Wert normal + rot durchgestrichen, Preis fett */
.bonus-total .bonus-old{font-weight:400;color:var(--ink);opacity:1;text-decoration:line-through;text-decoration-color:#e11d1d;text-decoration-thickness:1.5px}

/* ============================================================================
   MOBIL-GRUNDREGELN — 27.08.2026
   ----------------------------------------------------------------------------
   Diese Datei wird als /shop.css an JEDEN Shop ausgeliefert (public-site.js),
   also gilt hier Beschlossenes fuer alle bestehenden UND alle kuenftig
   erzeugten Shops. Der Block steht bewusst ganz unten: bei gleicher
   Spezifitaet gewinnt die spaetere Regel.

   Nachpruefbar mit:
     /opt/wachen/shop_mobil_wache.py --shop <id> --laut
   Die Wache laeuft taeglich ueber alle veroeffentlichten Shops und meldet
   Rueckfaelle nach Discord. Wer hier etwas aendert, laesst sie einmal laufen.
   ========================================================================== */

/* --- Nichts darf breiter sein als der Bildschirm --------------------------- */
/* Feste Mindestbreiten an Knoepfen haben auf 320-px-Geraeten ueber den Rand
   geragt (Bonus-CTA: min-width 280px + Polsterung > 272px Platz). */
.btn { max-width: 100%; }
.bonus-cta .btn { min-width: min(280px, 100%); }
.cta .btn { min-width: min(360px, 100%); }
img, video, svg { max-width: 100%; }

/* --- Schrift-Untergrenze --------------------------------------------------- */
/* Unter 12 px ist auf einem Telefon nichts mehr zu lesen; max() haelt die
   feine Typografie am Desktop und hebt nur den Boden an. Neue Kleinschrift-
   Klassen gehoeren hier ergaenzt - die Wache meldet, was vergessen wurde. */
.tbonus-tag      { font-size: max(.6rem, 12px); }
.hoc-badge       { font-size: max(.58rem, 12px); }
.tier-secure     { font-size: max(.7rem, 12px); }
.tier-badge      { font-size: max(.72rem, 12px); }
.tier-ribbon     { font-size: max(.76rem, 12px); }
.hoc-line        { font-size: max(.76rem, 12px); }
.bonus-card2-val { font-size: max(.76rem, 12px); }
.offer-final-fine{ font-size: max(.8rem, 12px); }
@media (max-width: 820px) { .offer-final-fine { font-size: max(.76rem, 12px); } }

/* --- Tippflaechen ---------------------------------------------------------- */
/* Ein 28 px hoher FAQ-Titel ist mit dem Daumen nicht zu treffen. */
.faq summary { min-height: 44px; align-items: center; gap: 1rem; padding: .2rem 0; }
.faq summary::after { flex: 0 0 auto; }

/* --- Kopfzeile ------------------------------------------------------------- */
/* Markenname UND Knopfbeschriftung brachen je zweizeilig um, sobald es eng
   wurde - nicht nur auf dem Handy, auch auf dem Tablet (768 px). Darum ohne
   Breiten-Bedingung: der Knopf bleibt immer einzeilig, der Markenname kuerzt
   sich zur Not mit "…" ab, statt die Kopfzeile aufzublaehen. */
.brand { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav .btn { flex: 0 0 auto; white-space: nowrap; min-height: 40px; }
@media (max-width: 760px) {
  .nav__inner { padding: .7rem 1.1rem; gap: .7rem; }
  .brand { font-size: 1.05rem; line-height: 1.3; }
  .nav .btn { padding: .55rem .9rem; font-size: .85rem; }
}
/* Unter 560 px reicht der Platz fuer beides nicht mehr. Dann hat der
   Markenname Vorrang: der Kauf-Knopf steht ohnehin gross im Hero und die
   Kaufleiste (.sticky-buy) faehrt beim Scrollen von unten ein. */
@media (max-width: 560px) { .nav .btn { display: none; } }

/* --- Kaufleiste unten ------------------------------------------------------ */
/* Auf 320 px schob der einzeilige Knopf den Preis links aus dem Bild. Lieber
   bricht die Knopfbeschriftung um, als dass der Preis verschwindet. */
@media (max-width: 480px) {
  .sticky-inner { gap: .5rem; padding: .5rem .75rem; }
  .sticky-info { min-width: 0; flex: 0 1 auto; }
  .sticky-price { font-size: .9rem; white-space: nowrap; }
  .sticky-buy .btn { flex: 1 1 auto; min-width: 0; min-height: 44px; white-space: normal; line-height: 1.2; padding: .65rem .8rem; font-size: .95rem; }
}

/* --- Angebots-Karten auf kleinen Geraeten ---------------------------------- */
/* Frueher lagen sie unter 760 px in einem waagerechten Karussell. Das sah
   messbar schlechter aus als am Laptop: sichtbar war nur die Standard-Karte,
   die Premium-Karte ("Best Choice") stand angeschnitten am Rand - genau der
   Premium-Fokus, der die Seite am grossen Bildschirm traegt, fiel weg. Neben
   der kuerzeren Karte blieb ausserdem Leerraum stehen.
   Darum bis 880 px (derselbe Punkt, an dem in dieser Datei auch alle anderen
   Raster einspaltig werden) UNTEREINANDER, Premium zuerst: beide Karten in
   voller Breite, nichts versteckt, dieselbe Reihenfolge der Aufmerksamkeit
   wie am Laptop. Auf dem 768-px-Tablet hoert damit auch das dreizeilige
   Umbrechen der Bonus-Zeilen auf. */
@media (max-width: 880px) {
  .tiers--book {
    display: grid; grid-template-columns: 1fr; gap: 1.2rem;
    overflow: visible; align-items: start;
    margin-left: 0; margin-right: 0; padding: 0;
    scroll-snap-type: none;
  }
  .tiers--book > .tier { flex: none; width: auto; height: auto; min-width: 0; margin-top: 0; }
  .tiers--book > .tier--premium { order: -1; }
  .tiers--book .tier .tier-btn { margin-top: 1rem; }
  .offer-hero .tiers--book { margin-left: 0; margin-right: 0; }
}

/* --- Bonus-Zeilen in der Angebots-Karte ------------------------------------ */
/* [BONUS 1] [Titel] [worth 49 $] nebeneinander: die mittlere Spalte ist 1fr und
   kann ohne min-width:0 nicht unter ihre min-content-Breite - der Wert rechts
   wurde auf 320 px aus dem Bild gedrueckt. Das war schon vorher so, nur lag es
   im alten Karussell und blieb dadurch unbemerkt.
   Bis 420 px steht der Wert darum in einer zweiten Zeile: dem Titel bleiben
   statt 80 px die ganze Breite. */
.tbonus-title { min-width: 0; }
@media (max-width: 420px) {
  .tbonus { grid-template-columns: auto 1fr; gap: .35rem .6rem; }
  .tbonus-val { grid-column: 2; justify-self: start; }
}

/* --- Rechtsseiten (Impressum, Datenschutz, Widerruf) ----------------------- */
/* Der "Zurueck zum Shop"-Link steht dort als nackter Text am Seitenende und war
   20 px hoch - mit dem Daumen nicht zu treffen. Nur dieser eine Link bekommt die
   Tippflaeche; Links MITTEN im Fliesstext (E-Mail, Aufsichtsbehoerde) bleiben
   normale Textlinks, alles andere waere falsch.
   Bewusst hier und nicht in public-site.js: das ist ein Servermodul, eine
   Aenderung dort wirkt erst nach einem Neustart von ebook-shop - und in dem
   Prozess laufen die Buch-Generierungen. */
.legaldoc > p:last-child > a:only-child {
  display: inline-flex; align-items: center; min-height: 44px; padding: .4rem 0;
}