/* =========================================================================
   ADS-FUNNEL TEMPLATE
   Struktur 1:1 nach hello.moms-health.de/ausbildung
   Handwerk nach kingkong.co (Sabri Suby): große Direct-Response-Typo,
   EINE Signalfarbe, volle CTA-Breite, keine Ablenkung.

   ┌────────────────────────────────────────────────────────────────────┐
   │  UMFÄRBEN: nur --accent (und ggf. --accent-ink) unten ändern.       │
   │  Alle CTAs, Marker, Icons und Akzente ziehen daraus.                │
   └────────────────────────────────────────────────────────────────────┘
   ========================================================================= */

/* ── Google Sans Flex — self-hosted, verbatim aus liakim-live-v2 (DSGVO: kein CDN) ── */
@font-face {
  font-family: "Google Sans Flex";
  font-style: oblique 0deg 10deg;
  font-weight: 400 500;
  font-stretch: 25% 150%;
  font-display: swap;
  src: url("fonts/google-sans-flex-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Google Sans Flex";
  font-style: oblique 0deg 10deg;
  font-weight: 400 500;
  font-stretch: 25% 150%;
  font-display: swap;
  src: url("fonts/google-sans-flex-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── LEMON MILK (Marsnev) — Display-Schrift für Überschriften.
   Self-hosted, kein CDN. WICHTIG: Die kostenlose Version hat KEINE echten
   Kleinbuchstaben — 'a' mappt auf die Glyphe 'A'. Alles rendert in
   Versalien. Deshalb ausschliesslich fuer Headlines/Kicker/Buttons,
   niemals fuer Fliesstext (waere unlesbar).
   Lizenz: Donationware — kommerzielle Nutzung gegen freiwillige Spende
   an marsnev@marsnev.com. ── */
@font-face {
  font-family: "Lemon Milk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/lemonmilk-medium.woff2") format("woff2");
}
@font-face {
  font-family: "Lemon Milk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/lemonmilk-bold.woff2") format("woff2");
}

:root {
  /* ---- SIGNALFARBE — Syncretism-Gold ---------------------------------- */
  --accent: #c9a227;          /* Gold aus liakim-live-v2                   */
  --accent-ink: #1c1838;      /* Indigo-Text AUF Gold                      */
  --accent-soft: rgba(201, 162, 39, 0.14);
  --violet: #7c5cff;
  --cyan: #2bb7ce;

  /* ---- Grundpalette — Rollen wie syncretism.live ---------------------- */
  --ink: #1c1838;             /* Text-Indigo                               */
  --ink-soft: #4a4570;        /* Text-Variante                             */
  --paper: #fbfaf6;           /* warmes Creme                              */
  --band: #fbfaf6;            /* v2: uniformes Creme, Trennung per Hairline */
  --card-bg: rgba(124, 92, 255, 0.045);  /* v2 --card-bg                    */
  --invert-bg: #211b43;       /* Indigo-Karten (wie v2 Primary)            */
  --invert-ink: #ffffff;
  --line: rgba(28, 24, 56, 0.08);        /* v2 --theme-outline-variant     */

  /* ---- Typografie -----------------------------------------------------
     Systemschriften: keine externen Requests, DSGVO-sauber, 0 kB.        */
  --font: "Google Sans Flex", "Google Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: "Lemon Milk", "Google Sans Flex", Impact, sans-serif;

  /* Direct-Response: bewusst groß. */
  --fs-body: 17.5px;            /* Antigravity --base-size */
  --lh-body: 1.5;
  --fs-h1: 72px;                /* --6xl · Stufen unten per Media Query */
  --fs-h2: 42px;                /* --4xl */
  --fs-h3: 22px;                /* --lg  */
  --fs-kicker: 14.5px;          /* --cta-sm-size */
  --fs-small: 14.5px;
  --cta-size: 17.5px;           /* v2 --cta-size   */
  --cta-lh: 25.38px;            /* v2 --cta-line-height */
  --cta-ls: 0.18px;             /* v2 --cta-letter-spacing */

  /* ---- Maße ------------------------------------------------------------ */
  --wrap: 1120px;
  --wrap-narrow: 760px;
  --gutter: 24px;
  --sec-y: clamp(56px, 8vw, 104px);
  --radius: 10px;
  --radius-lg: 18px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---- Reset / Basis ------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img,
svg,
video {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: inherit;
}
button {
  font: inherit;
}
h1,
h2,
h3 {
  font-weight: 450;
  margin: 0;
  text-wrap: balance;
}
h1 {
  font-size: var(--fs-h1);
  line-height: 72.04px;                               /* v2 --6xl-line-height */
  letter-spacing: -1.44px;
  font-variation-settings: "wdth" 100, "opsz" 144;    /* v2 Hero-Headline */
}
h2 {
  font-size: var(--fs-h2);
  line-height: 43.68px;                               /* v2 --4xl-line-height */
  letter-spacing: -0.73px;
  font-variation-settings: "wdth" 100, "opsz" 72;     /* v2 .heading-2 */
}
h3 {
  font-size: var(--fs-h3);
  line-height: 24.64px;                               /* v2 --lg-line-height */
  letter-spacing: -0.08px;
  font-weight: 500;
  font-variation-settings: "wdth" 100, "opsz" 54;     /* v2 .heading-3 */
}
b,
strong {
  font-weight: 500; /* Variable-Font endet bei 500 — kein Faux-Bold */
}
p {
  margin: 0 0 1em;
}
/* Browser-Default-Margins killen — <figure> bringt 40px je Seite mit
   und schrumpfte damit das Hero-Bild um 80px. */
figure,
blockquote,
ul,
ol {
  margin: 0;
}
p:last-child {
  margin-bottom: 0;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- Layout ------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow {
  max-width: var(--wrap-narrow);
}
.section {
  padding-block: var(--sec-y);
}
.section--band {
  background: var(--band);
  border-top: 1px solid var(--line);   /* v2 .section--divider */
}
.section--invert {
  background: var(--invert-bg);
  color: var(--invert-ink);
}
.section--invert .kicker {
  color: var(--accent);
}
.section--tight {
  padding-block: clamp(28px, 4vw, 48px);
}
.center {
  text-align: center;
}
.stack > * + * {
  margin-top: var(--space, 20px);
}

/* ---- Kicker / Eyebrow --------------------------------------------------- */
.kicker {
  font-size: var(--fs-kicker);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
}

/* ---- Lead-Absatz -------------------------------------------------------- */
.lead {
  font-size: 20px;             /* --md-size */
  line-height: 26px;           /* --md-line-height */
  letter-spacing: -0.05px;
  color: var(--ink-soft);
  max-width: 60ch;
}
.center .lead {
  margin-inline: auto;
}
.section--invert .lead {
  color: rgba(255, 255, 255, 0.8);
}

/* =========================================================================
   CTA — King-Kong-Prinzip: groß, laut, volle Breite auf Mobile
   ========================================================================= */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  text-decoration: none;
  font-family: var(--font);
  font-weight: 450;
  font-variation-settings: "wdth" 100, "opsz" 17.5;  /* v2 .call-to-action */
  font-size: var(--cta-size);
  line-height: var(--cta-lh);
  letter-spacing: var(--cta-ls);
  padding: 10px 24px;              /* v2 .button */
  border: 1px solid transparent;
  border-radius: 9999px;           /* --shape-corner-rounded */
  background: var(--invert-bg);    /* v2 --theme-primary-primary */
  color: #ffffff;
  cursor: pointer;
  transition: 0.15s all ease-out;
}
.cta:hover,
.cta:focus-visible {
  outline: none;
  background: #322a5e;             /* v2 primary hovered */
  color: #ffffff;
}
.cta:active {
  transform: translateY(1px);
}
/* Auf Indigo-Sektionen: heller Button, Gold-Hover (v2 .button-cta-light) */
.section--invert .cta,
.result .cta {
  background: #ffffff;
  color: var(--invert-bg);
}
.section--invert .cta:hover,
.section--invert .cta:focus-visible,
.result .cta:hover,
.result .cta:focus-visible {
  background: var(--gold, #c9a227);
  background: var(--accent);
  color: #1c1838;
}
.cta--ghost {
  background: transparent;
  color: inherit;
  border: 2px solid currentColor;
}
.cta--ghost:hover {
  background: rgba(124, 92, 255, 0.2);   /* Violett-Familie statt Gold-Soft */
}
.cta-row {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}
.cta-note {
  margin: 14px 0 0;
  font-size: var(--fs-small);
  color: var(--ink-soft);
  text-align: center;
}
.section--invert .cta-note {
  color: rgba(255, 255, 255, 0.72);
}

/* CTA-Leiste als Sektionstrenner (moms-health-Muster) */
.cta-band {
  background: rgba(124, 92, 255, 0.06);  /* v2 secondary-button-Tint */
  border-block: 1px solid var(--line);
}
.cta-band__text {
  font-size: 28px;              /* --2xl-size */
  font-weight: 450;
  font-variation-settings: "wdth" 100, "opsz" 42;
  letter-spacing: -0.1px;
  text-align: center;
  margin: 0 0 22px;
  text-wrap: balance;
}

/* =========================================================================
   PLATZHALTER — sollen auffallen. Nichts hiervon darf live gehen.
   ========================================================================= */
.ph {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82em;
  font-weight: 500;
  letter-spacing: 0;
  color: #8a6d00;
  background: repeating-linear-gradient(
    45deg,
    rgba(201, 162, 39, 0.16),
    rgba(201, 162, 39, 0.16) 10px,
    rgba(201, 162, 39, 0.28) 10px,
    rgba(201, 162, 39, 0.28) 20px
  );
  border: 1px dashed #b8a100;
  border-radius: 4px;
  padding: 2px 8px;
  display: inline-block;
  text-wrap: pretty;
}
.section--invert .ph {
  color: #fff8c2;
  border-color: rgba(201, 162, 39, 0.7);
  background: rgba(201, 162, 39, 0.14);
}
/* Platzhalter-Fläche (Bild / Video / Logo / Screenshot) */
.ph-box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  text-align: center;
  padding: 20px;
  border: 2px dashed #b8a100;
  border-radius: var(--radius-lg);
  background: repeating-linear-gradient(
    45deg,
    rgba(201, 162, 39, 0.08),
    rgba(201, 162, 39, 0.08) 12px,
    rgba(201, 162, 39, 0.16) 12px,
    rgba(201, 162, 39, 0.16) 24px
  );
  color: #7a6200;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  line-height: 1.4;
}
.ph-box b {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.ph-box--16x9 {
  aspect-ratio: 16 / 9;
}
.ph-box--4x3 {
  aspect-ratio: 4 / 3;
}
.ph-box--1x1 {
  aspect-ratio: 1 / 1;
}
.ph-box--3x4 {
  aspect-ratio: 3 / 4;
}
.ph-box--wide {
  aspect-ratio: 21 / 9;
}
.ph-box--bar {
  min-height: 92px;
}

/* =========================================================================
   HERO
   ========================================================================= */
.hero {
  padding-block: clamp(36px, 5vw, 64px) var(--sec-y);
}
.hero__visual {
  margin-bottom: clamp(28px, 4vw, 44px);
}
.hero h1 {
  margin-bottom: 22px;
}
.hero .lead {
  margin-inline: auto;
}

/* Advertorial-Band ganz oben (King-Kong-Muster „BREAKING …") */
.topbar {
  background: var(--invert-bg);
  color: var(--invert-ink);
  text-align: center;
  padding: 12px var(--gutter);
  font-size: var(--fs-kicker);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.topbar b {
  color: var(--accent);
}

/* =========================================================================
   PROOF-LEISTE (Sterne + Avatare) · LOGO-MARQUEE
   ========================================================================= */
.rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: var(--fs-small);
  color: var(--ink-soft);
}
.rating__faces {
  display: flex;
}
.rating__face {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  margin-right: -12px;
  border: 3px solid var(--paper);
  background: repeating-linear-gradient(45deg, rgba(201, 162, 39, 0.2), rgba(201, 162, 39, 0.2) 6px, rgba(201, 162, 39, 0.35) 6px, rgba(201, 162, 39, 0.35) 12px);
  outline: 1px dashed #b8a100;
}
.stars {
  letter-spacing: 3px;
  font-size: 20px;
  color: #f5a623;
}

.marquee {
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  gap: 48px;
  width: max-content;
  animation: marquee 72s linear infinite;
}
.marquee__item {
  flex: 0 0 auto;
  width: 168px;
  height: 62px;
}
@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    animation: none;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
  }
}

/* =========================================================================
   LISTEN — Problem-Checkliste / Qualifizierung
   ========================================================================= */
.checklist,
.xlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.checklist li,
.xlist li {
  position: relative;
  padding-left: 46px;
  text-wrap: pretty;
}
.checklist li::before,
.xlist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--violet), var(--cyan));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.2 5.2L20 7'/%3E%3C/svg%3E");
  background-size: 17px;
  background-repeat: no-repeat;
  background-position: center;
}
.xlist li::before {
  background-color: rgba(28, 24, 56, 0.08);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a4570' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E");
}

/* =========================================================================
   NUTZEN-BLÖCKE
   ========================================================================= */
.benefits {
  display: flex;
  flex-direction: column;
  gap: 34px;
}
.benefit h3 {
  margin-bottom: 8px;
}
.benefit p {
  color: var(--ink-soft);
}

/* =========================================================================
   RASTER — Mechanismus / Deliverables / Testimonials / Qualifizierung
   ========================================================================= */
.grid {
  display: grid;
  gap: 24px;
}
.grid--3 {
  grid-template-columns: repeat(3, 1fr);
}
.grid--2 {
  grid-template-columns: repeat(2, 1fr);
}
.card {
  border: 1px solid var(--line);
  border-radius: 36px;                 /* v2 --shape-corner-xl */
  padding: 28px;
  background: var(--card-bg);
}
.section--band .card {
  background: var(--card-bg);
}
.card h3 {
  margin-bottom: 10px;
}
.card p {
  color: var(--ink-soft);
  font-size: 18px;
}
.card__media {
  margin: -28px -28px 22px;
  border-radius: 36px 36px 0 0;
  overflow: hidden;
}
.card__icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  font-size: 26px;
}
.card ul {
  margin: 14px 0 0;
  padding-left: 20px;
  color: var(--ink-soft);
  font-size: 18px;
}
.card li + li {
  margin-top: 6px;
}

/* =========================================================================
   PEAK / GARANTIE (invertiert)
   ========================================================================= */
.peak h2 {
  margin-bottom: 24px;
}
.peak__triade {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 32px;                  /* --3xl-size */
  font-weight: 450;
  font-variation-settings: "wdth" 100, "opsz" 42;
  letter-spacing: -0.15px;
  margin-bottom: 26px;
}
.guarantee {
  border: 3px solid var(--accent);
  border-radius: 48px;
  padding: clamp(28px, 4vw, 46px);
  text-align: center;
}
.guarantee__seal {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  margin: 0 auto 20px;
}

/* Zahlen-Bar (King-Kong-Muster: große Beweiszahlen) */
.numbers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  text-align: center;
}
.number__value {
  display: block;
  font-size: clamp(32px, 5vw, 54px);   /* --5xl-size */
  font-weight: 450;
  font-variation-settings: "wdth" 100, "opsz" 42;
  letter-spacing: -0.95px;
  line-height: 1;
  color: var(--accent);
}
.number__label {
  display: block;
  margin-top: 10px;
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.75);
}

/* =========================================================================
   PROOF-PEAK (Screenshot-Collage) · PULL-QUOTE · GRÜNDER
   ========================================================================= */
.proof-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.pullquote {
  max-width: var(--wrap-narrow);
  margin-inline: auto;
  text-align: center;
}
.pullquote p {
  font-size: 32px;
  font-style: oblique 6deg;          /* Variable-Font-Oblique statt Kursiv-Fake */
  font-weight: 450;
  letter-spacing: -0.015em;
  line-height: 1.28;
}
.pullquote cite {
  display: block;
  margin-top: 18px;
  font-style: normal;
  font-size: var(--fs-kicker);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.founder {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

/* Testimonial-Karte */
.testimonial figcaption {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
  font-size: var(--fs-small);
  color: var(--ink-soft);
}
.testimonial__face {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  flex: 0 0 auto;
}

/* =========================================================================
   FAQ
   ========================================================================= */
.faq {
  max-width: var(--wrap-narrow);
  margin-inline: auto;
  border-top: 1px solid var(--line);
}
.faq details {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 24px 0;
  font-size: 22px;                  /* --lg-size */
  font-weight: 500;
  letter-spacing: -0.08px;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq__ic {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent);
  position: relative;
  transition: transform 0.24s var(--ease);
}
.faq__ic::before,
.faq__ic::after {
  content: "";
  position: absolute;
  background: var(--accent-ink);
  border-radius: 2px;
}
.faq__ic::before {
  inset: 14px 8px;
  height: 2.5px;
}
.faq__ic::after {
  inset: 8px 14px;
  width: 2.5px;
}
.faq details[open] .faq__ic {
  transform: rotate(135deg);
}
.faq__a {
  padding: 0 0 26px;
  color: var(--ink-soft);
  max-width: 62ch;
}

/* =========================================================================
   STICKY-CTA (mobil) — die klarste Lücke des Vorbilds
   ========================================================================= */
.sticky {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 80;
  display: none;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(251, 250, 246, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}
.sticky .cta {
  width: 100%;
  padding: 13px 20px;
}
@media (max-width: 900px) {
  .sticky:not([hidden]) {
    display: block;
  }
}

/* =========================================================================
   FOOTER
   ========================================================================= */
.footer {
  background: var(--band);
  padding-block: 40px;
  font-size: var(--fs-small);
  color: var(--ink-soft);
  text-align: center;
}
.footer nav {
  display: flex;
  gap: 24px;
  justify-content: center;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

/* =========================================================================
   CONSENT-BANNER
   ========================================================================= */
.consent {
  position: fixed;
  inset: auto 16px 16px;
  z-index: 100;
  max-width: 640px;
  margin-inline: auto;
  background: var(--invert-bg);
  color: var(--invert-ink);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3);
  font-size: var(--fs-small);
}
.consent p {
  margin: 0;
  flex: 1 1 240px;
  color: rgba(255, 255, 255, 0.84);
}
.consent a {
  color: var(--accent);
}
.consent__actions {
  display: flex;
  gap: 10px;
}
.consent .cta {
  padding: 10px 20px;
  font-size: 15px;
}

/* =========================================================================
   QUIZ
   ========================================================================= */
.quiz-head {
  padding-block: 26px;
  border-bottom: 1px solid var(--line);
}
.progress {
  max-width: 560px;
  margin-inline: auto;
}
.progress__bar {
  height: 10px;
  border-radius: 999px;
  background: rgba(28, 24, 56, 0.1);
  overflow: hidden;
}
.progress__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--violet), var(--cyan));
  transition: width 0.35s var(--ease);
}
.progress__label {
  margin: 12px 0 0;
  text-align: center;
  font-size: var(--fs-kicker);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.quiz {
  max-width: var(--wrap-narrow);
  margin-inline: auto;
  padding-block: clamp(36px, 6vw, 72px);
}
.quiz__title {
  text-align: center;
  margin-bottom: 12px;
}
.quiz__hint {
  text-align: center;
  color: var(--ink-soft);
  font-size: var(--fs-small);
  margin-bottom: 34px;
}
.options {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.option {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  text-align: left;
  padding: 18px 24px;
  border: 1.5px solid var(--line);
  border-radius: 24px;               /* v2 --shape-corner-lg */
  background: var(--card-bg);
  color: var(--ink);
  font-size: 17.5px;
  font-weight: 450;
  cursor: pointer;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease), transform 0.15s var(--ease);
}
.option:hover {
  border-color: rgba(124, 92, 255, 0.45);
  background: rgba(124, 92, 255, 0.12);  /* v2 nav-button-hover */
}
.option:active {
  transform: scale(0.995);
}
.option.is-on {
  border-color: var(--violet);
  background: rgba(124, 92, 255, 0.12);
}
.option__emoji {
  font-size: 28px;
  line-height: 1;
  flex: 0 0 auto;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}
.field label {
  font-weight: 500;
  font-size: var(--fs-small);
}
.field input,
.field textarea {
  font: inherit;
  font-size: 18px;
  padding: 16px 18px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  width: 100%;
}
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--ink);
}
.field textarea {
  min-height: 120px;
  resize: vertical;
}
.field__err {
  color: #c0392b;
  font-size: 15px;
  font-weight: 450;
}
.consent-check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: var(--fs-small);
  color: var(--ink-soft);
  margin-bottom: 22px;
}
.consent-check input {
  margin-top: 5px;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}
.quiz__nav {
  text-align: center;
  margin-top: 26px;
}
.back-btn {
  border: 0;
  background: none;
  color: var(--ink-soft);
  font-size: var(--fs-small);
  font-weight: 450;
  cursor: pointer;
  padding: 10px 16px;
  border-radius: 999px;
}
.back-btn:hover {
  background: rgba(28, 24, 56, 0.06);
  color: var(--ink);
}

/* Zwischenschritt „Überprüfung" */
.checking {
  text-align: center;
  padding-block: 40px;
}
.spinner {
  width: 62px;
  height: 62px;
  margin: 0 auto 26px;
  border-radius: 50%;
  border: 6px solid rgba(28, 24, 56, 0.12);
  border-top-color: var(--accent);
  animation: spin 0.9s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation-duration: 3s;
  }
}

/* Ergebnis */
.result {
  text-align: center;
  background: var(--invert-bg);
  color: var(--invert-ink);
  border-radius: 48px;               /* v2 --shape-corner-2xl */
  padding: clamp(32px, 5vw, 56px) clamp(22px, 4vw, 44px);
}
.result h1 {
  margin-bottom: 16px;
}
.result .checklist {
  text-align: left;
  max-width: 46ch;
  margin: 30px auto;
  color: rgba(255, 255, 255, 0.84);
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 900px) {
  .grid--3,
  .grid--2,
  .founder,
  .numbers {
    grid-template-columns: 1fr;
  }
  .proof-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .cta {
    width: 100%;
  }
  .cta-row {
    display: block;
  }
}
@media (max-width: 560px) {
  :root {
    --gutter: 18px;
  }
  .checklist li,
  .xlist li {
    padding-left: 40px;
  }
  .checklist li::before,
  .xlist li::before {
    width: 26px;
    height: 26px;
    background-size: 15px;
  }
}

/* =========================================================================
   RECHTSSEITEN (Impressum / Datenschutz)
   ========================================================================= */
.legal {
  max-width: 820px;
  padding-block: clamp(40px, 6vw, 72px);
}
.legal h1 {
  font-size: var(--fs-h2);
  margin-bottom: 6px;
}
.legal h2 {
  font-size: var(--fs-h3);
  margin: 44px 0 12px;
}
.legal p,
.legal li {
  font-size: 18px;
  color: var(--ink-soft);
}
.legal ul {
  padding-left: 22px;
}
.legal li + li {
  margin-top: 6px;
}
.legal a {
  color: var(--ink);
  text-underline-offset: 3px;
}
.legal-updated {
  font-size: var(--fs-small);
  color: var(--ink-soft);
  margin-bottom: 28px;
}
.legal-block {
  border-left: 4px solid var(--accent);
  padding: 4px 0 4px 20px;
  margin: 18px 0;
}
.legal-block p {
  margin-bottom: 4px;
}
.legal-top {
  border-bottom: 1px solid var(--line);
  padding-block: 18px;
}
.legal-top a {
  font-weight: 500;
  text-decoration: none;
  font-size: var(--fs-small);
}

/* Platzhalter INNERHALB großer Elemente: als Annotation herunterskalieren.
   Ohne das sprengen lange Anweisungstexte Headlines und Buttons. */
h1 .ph,
h2 .ph,
h3 .ph,
.cta .ph,
.cta-band__text .ph,
.peak__triade .ph,
.quiz__title .ph,
.number__value .ph,
.faq summary .ph {
  font-size: 15px;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  vertical-align: middle;
  max-width: 100%;
}
h1 .ph,
h2 .ph {
  font-size: 16px;
}
/* Platzhalter auf dunklen Flächen lesbar halten */
.topbar .ph,
.result .ph,
.consent .ph {
  color: #fff8c2;
  border-color: rgba(201, 162, 39, 0.7);
  background: rgba(201, 162, 39, 0.14);
}
/* CTA-Text darf umbrechen, statt den Button zu sprengen */
.cta {
  max-width: 100%;
  flex-wrap: wrap;
}

/* =========================================================================
   HERO — zweispaltig (Copy links, Medien rechts; Vorbild: Escape-Theory-Layout)
   ========================================================================= */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.18fr;   /* Bild bekommt die größere Spalte */
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.hero-copy {
  text-align: left;
}
.hero-kicker {
  display: inline-block;
  font-size: var(--fs-kicker);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 18px;
}
.hero-copy h1 {
  margin-bottom: 18px;
}
.hero-copy .lead {
  margin-bottom: 26px;
}
.hero-check {
  margin-bottom: 30px;
}
.hero-check li {
  font-weight: 450;
}
.hero-copy .cta-row {
  justify-content: flex-start;
  margin-top: 0;
}
.hero-copy .cta-note {
  text-align: left;
}
.hero-media {
  margin: 0;
  border-radius: 36px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(28, 24, 56, 0.18);
}
@media (min-width: 1180px) {
  /* Auf großen Schirmen bis in den Seitenrand ziehen — mehr Bildwirkung */
  .hero-media {
    margin-right: calc(var(--gutter) * -1);
  }
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3.15;
}
@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }
  /* order gilt jetzt fuer die ganze Bildspalte, nicht fuers Bild allein —
     sonst rutscht das Laufband innerhalb der Spalte ueber das Foto. */
  .hero-media {
    order: 0;
  }
  .hero-media img {
    aspect-ratio: 16 / 10.5;
  }
  .hero-media {
    margin-right: 0;
  }
}

/* ---- Marken-Lockup (Regenschirm + Wortmarke) für Eyebrow & Footer ---- */
.brand-line {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  color: var(--ink);
}
.brand-line svg {
  width: 24px;
  height: 24px;
}

/* =========================================================================
   LOGO-WAND — Wortmarken statt Bild-Platzhalter
   ========================================================================= */
.logo-item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 190px;
  height: 62px;
  color: var(--ink);
  opacity: 0.82;
  font-weight: 500;
  font-size: 19px;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.logo-item svg {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
}
.logo-item--patreon svg {
  width: 22px;
  height: 22px;
}

/* =========================================================================
   RATING-LEISTE mit echten Initialen (keine Stock-Gesichter)
   ========================================================================= */
.rating__init {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  margin-right: -12px;
  border: 3px solid var(--paper);
  background: var(--invert-bg);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rating__init--gold {
  background: linear-gradient(135deg, var(--violet), var(--cyan));
}

/* =========================================================================
   CHAT-WAND — echte Nachrichten (Proof-Peak)
   ========================================================================= */
.chat-wall {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: start;
}
.chat-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  border-top-left-radius: 4px;
  padding: 20px 22px;
  margin: 0;
  box-shadow: 0 10px 30px rgba(28, 24, 56, 0.06);
}
.chat-card__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: var(--fs-small);
  color: var(--ink-soft);
}
.chat-card__avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--invert-bg);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.chat-card__name {
  font-weight: 500;
  color: var(--ink);
}
.chat-card__time {
  margin-left: auto;
  font-size: 13px;
}
.chat-card blockquote {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
}
.chat-card__react {
  margin-top: 12px;
  font-size: 14px;
  color: var(--ink-soft);
}
@media (max-width: 900px) {
  .chat-wall {
    grid-template-columns: 1fr;
  }
}

/* Testimonial-Initialen */
.testimonial__init {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: linear-gradient(135deg, var(--violet), var(--cyan));
  color: #fff;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* =========================================================================
   ANTIGRAVITY-TYPO — responsive Stufen (Werte + Breakpoints aus liakim-live-v2)
   Bewusste Abweichung: die 107px-Stufe (>1600px) entfällt — der Hero ist hier
   zweispaltig, 107px sprengt die Textspalte. Alles andere verbatim.
   ========================================================================= */
@media (max-width: 1024px) {
  :root {
    --fs-h1: 56px;
    --fs-h2: 28px;   /* v2 --4xl-Stufe ≤1024 */
  }
  h1 { line-height: 56.04px; letter-spacing: -1.12px; }
  h2 { line-height: 29.12px; letter-spacing: -0.2px; }
}
@media (max-width: 767px) {
  :root {
    --fs-h1: 40px;
    --fs-body: 15px;   /* v2 --base-size mobil */
    --cta-size: 15px;  /* v2 --cta-size mobil  */
    --cta-lh: 22px;
    --cta-ls: 0.16px;
  }
  h1 { line-height: 44.04px; letter-spacing: -0.8px; }
}
@media (max-width: 425px) {
  :root {
    --fs-h1: 44px;   /* v2: bewusste Original-Inversion ggü. der 767er-Stufe */
  }
  h1 { line-height: 46.04px; letter-spacing: -0.6px; }
}

/* Eyebrow/Meta-Texte mit v2-Variation */
.kicker,
.hero-kicker,
.progress__label {
  font-variation-settings: "wdth" 100, "opsz" 17.5;
}

/* =========================================================================
   DYNAMIK — Typewriter, Scroll-Reveals, Micro-Motion
   Sichtbarer Zustand ist der Standard: alles hier greift NUR mit .js am
   <html> und wird von Failsafes in funnel.js abgesichert. Ohne JS oder bei
   prefers-reduced-motion ist die Seite sofort vollständig sichtbar.
   ========================================================================= */

/* ---- Scroll-Reveal (wie Antigravity-Section-Fades) ---- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: var(--rd, 0s);
}
.js [data-reveal].in {
  opacity: 1;
  transform: none;
}

/* ---- Hero-Entrance (choreografiert nach dem Typewriter) ---- */
.js .hero-anim {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.js .hero-anim.on {
  opacity: 1;
  transform: none;
}
.js .hero-media.hero-anim {
  transform: translateY(0) scale(0.97);
}
.js .hero-media.hero-anim.on {
  transform: none;
}

/* ---- Typewriter-H1 mit Gradient-Cursor (Antigravity-Signatur) ---- */
.tw-char {
  opacity: 0;
}
.tw-char.on {
  opacity: 1;
}
.tw-caret {
  display: inline-block;
  width: 0.09em;
  height: 0.82em;
  margin-left: 0.04em;
  border-radius: 999px;
  background: linear-gradient(180deg, #c9a227, #7c5cff, #2bb7ce);
  vertical-align: baseline;
  transform: translateY(0.08em);
}
.tw-caret.blink {
  animation: tw-blink 0.8s steps(1) infinite;
}
.tw-caret.out {
  transition: opacity 0.3s linear;
  opacity: 0;
}
@keyframes tw-blink {
  50% { opacity: 0; }
}

/* ---- Micro-Motion: Karten heben sich, Bilder atmen ---- */
.card {
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(28, 24, 56, 0.1);
}
.card__media img {
  transition: transform 0.6s var(--ease);
}
.card:hover .card__media img {
  transform: scale(1.04);
}
.chat-card {
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.chat-card:hover {
  transform: translateY(-3px) rotate(-0.4deg);
  box-shadow: 0 14px 36px rgba(28, 24, 56, 0.09);
}
.faq details[open] .faq__a {
  animation: faq-in 0.35s var(--ease);
}
@keyframes faq-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal],
  .js .hero-anim,
  .tw-char {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .tw-caret { display: none; }
  .card, .chat-card, .card__media img { transition: none; }
  .card:hover, .chat-card:hover { transform: none; }
}

/* =========================================================================
   INSTAGRAM-SEKTION — Text links, iPhone-Widget rechts
   Feed lädt erst nach Tap (Zwei-Klick, DSGVO) und scrollt IM Handy.
   ========================================================================= */
.ig-grid {
  display: grid;
  grid-template-columns: 1fr 1.18fr;   /* Bild bekommt die größere Spalte */
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.ig-note {
  font-size: var(--fs-small);
  color: var(--ink-soft);
  margin-top: 18px;
}

.phone {
  width: min(340px, 92vw);
  margin-inline: auto;
  aspect-ratio: 9 / 18.6;
  background: #0d0d16;
  border-radius: 54px;
  padding: 12px;
  position: relative;
  box-shadow:
    0 34px 80px rgba(28, 24, 56, 0.28),
    inset 0 0 0 2px rgba(255, 255, 255, 0.08);
}
/* Seitentasten */
.phone::before,
.phone::after {
  content: "";
  position: absolute;
  right: -3px;
  width: 3px;
  border-radius: 2px;
  background: #23233a;
}
.phone::before { top: 21%; height: 9%; }
.phone::after  { top: 33%; height: 6%; }
.phone__island {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 34%;
  height: 26px;
  border-radius: 999px;
  background: #000;
  z-index: 3;
}
.phone__screen {
  height: 100%;
  border-radius: 42px;
  overflow: hidden;
  background: #14142a;
  display: flex;
  flex-direction: column;
  position: relative;
}
.phone__statusbar {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 14px 26px 8px;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  background: #14142a;
  z-index: 2;
}
.phone__feed {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background: #fff;
}
.phone__feed::-webkit-scrollbar {
  display: none;
}
.phone__feed iframe {
  display: block;
  width: 100%;
  height: 620px;
  border: 0;
  background: #fff;
}
/* [hidden] muss gegen die eigenen display-Regeln gewinnen */
.phone__gate[hidden],
.phone__feed[hidden] {
  display: none;
}
.phone__gate {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 24px;
  color: #fff;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(124, 92, 255, 0.35), transparent 60%),
    radial-gradient(120% 80% at 50% 100%, rgba(43, 183, 206, 0.25), transparent 60%),
    #14142a;
}
.phone__gate svg {
  width: 54px;
  height: 54px;
  margin-bottom: 4px;
}
.phone__handle {
  font-size: 21px;
  font-weight: 500;
  margin: 0;
}
.phone__meta {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
}
.phone__hint {
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.6);
  margin: 10px 0 6px;
  max-width: 24ch;
}
.phone__gate .cta {
  padding: 10px 24px;
  background: #fff;
  color: var(--invert-bg);
}
.phone__gate .cta:hover {
  background: var(--accent);
  color: #1c1838;
}
@media (max-width: 900px) {
  .ig-grid {
    grid-template-columns: 1fr;
  }
  .phone {
    order: 2;
  }
}

/* =========================================================================
   VSL — Video direkt unter der Headline
   preload="none" + Klick-zu-Start: 0 Bytes bis zur Nutzergeste, danach
   läuft der Ton (die Geste erfüllt die Autoplay-Policy der Browser).
   ========================================================================= */
.vsl {
  position: relative;
  max-width: 940px;
  margin-inline: auto;
  border-radius: 36px;
  overflow: hidden;
  background: #0d0d16;
  box-shadow: 0 28px 70px rgba(28, 24, 56, 0.18);
}
.vsl__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #0d0d16;
}
.vsl__play {
  position: absolute;
  inset: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  border: 0;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(180deg, rgba(13, 13, 22, 0.15), rgba(13, 13, 22, 0.55));
  transition: background 0.25s var(--ease);
}
.vsl__play:hover {
  background: linear-gradient(180deg, rgba(13, 13, 22, 0.05), rgba(13, 13, 22, 0.45));
}
.vsl__play[hidden] {
  display: none;
}
.vsl__icon {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
  transition: transform 0.25s var(--ease);
}
.vsl__icon::after {
  content: "";
  border-left: 26px solid var(--invert-bg);
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
  margin-left: 7px;
}
.vsl__play:hover .vsl__icon {
  transform: scale(1.07);
}
.vsl__label {
  font-size: 20px;
  font-weight: 500;
  text-align: center;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
}
.vsl__label small {
  display: block;
  font-size: 14.5px;
  font-weight: 450;
  opacity: 0.8;
  margin-top: 4px;
}

/* =========================================================================
   MANIFEST — Liakims Stimme nach dem Video
   ========================================================================= */
.manifest__lead {
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.12;
  letter-spacing: -0.73px;
  font-weight: 450;
  font-variation-settings: "wdth" 100, "opsz" 72;
  color: #fff;
  margin: 0 0 28px;
}
.manifest__punch {
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.2;
  font-weight: 500;
  color: var(--accent);
  margin: 30px 0;
}
.manifest__body {
  font-size: 20px;
  line-height: 30px;
  color: rgba(255, 255, 255, 0.82);
  max-width: 56ch;
  margin-inline: auto;
}
.manifest__body + .manifest__body {
  margin-top: 18px;
}

/* =========================================================================
   Zweispaltige Checkliste (spart Scroll-Weg)
   ========================================================================= */
.checklist--2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 48px;
  max-width: 1000px;
  margin-inline: auto;
}

/* =========================================================================
   Abschluss: kaufen ODER Beratung
   ========================================================================= */
.close-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 40px;
  text-align: center;
}
.close-choice__card {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 36px;
  padding: 30px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}
.close-choice__label {
  font-size: var(--fs-kicker);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}
.close-choice__note {
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}
.close-choice .cta {
  width: 100%;
}

/* =========================================================================
   MOBILE-KORREKTUREN
   ========================================================================= */
@media (max-width: 900px) {
  .checklist--2col {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .close-choice {
    grid-template-columns: 1fr;
  }
  /* Handy-Widget war mobil zu groß — auf Viewport-Höhe deckeln */
  .phone {
    width: min(270px, 74vw);
    border-radius: 42px;
    padding: 9px;
  }
  .phone__screen {
    border-radius: 34px;
  }
  .phone__island {
    top: 18px;
    height: 20px;
  }
  .phone__statusbar {
    padding: 10px 20px 6px;
    font-size: 11.5px;
  }
  .phone__handle { font-size: 18px; }
  .phone__meta   { font-size: 12.5px; }
  .phone__hint   { font-size: 11.5px; }
  .phone__gate svg { width: 42px; height: 42px; }
  .phone__gate .cta { padding: 9px 18px; font-size: 14px; }
}
@media (max-width: 560px) {
  .vsl {
    border-radius: 24px;
  }
  .vsl__icon {
    width: 64px;
    height: 64px;
  }
  .vsl__icon::after {
    border-left-width: 19px;
    border-top-width: 12px;
    border-bottom-width: 12px;
  }
  .vsl__label { font-size: 16px; }
  .vsl__label small { font-size: 12.5px; }
  .manifest__body { font-size: 17.5px; line-height: 27px; }
  .phone {
    width: min(240px, 68vw);
  }
  .phone__feed iframe { height: 520px; }
  .close-choice__card { padding: 24px 18px; border-radius: 28px; }
}

/* =========================================================================
   HERO-HOOK — Punchline unter der H1 + Schnitt-Satz
   ========================================================================= */
.hero-punch {
  font-size: clamp(24px, 3.1vw, 38px);
  line-height: 1.14;
  letter-spacing: -0.6px;
  font-weight: 450;
  font-variation-settings: "wdth" 100, "opsz" 72;
  color: var(--accent);
  margin: 0 0 24px;
}
.hero-cut {
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.32;
  font-weight: 500;
  color: var(--ink);
  border-left: 3px solid var(--accent);
  padding-left: 18px;
  margin: 0 0 26px;
}
@media (max-width: 560px) {
  .hero-punch { margin-bottom: 18px; }
  .hero-cut {
    font-size: 18px;
    padding-left: 14px;
    margin-bottom: 22px;
  }
}

/* =========================================================================
   HERO-KORREKTUR — Schriftgrade eine Antigravity-Stufe runter
   H1 von --6xl (72px) auf --5xl (54px): die alte Groesse sprengte auf
   Mobile drei Zeilen und drueckte den CTA unter den Fold.
   ========================================================================= */
:root {
  --fs-h1: 54px;              /* --5xl-size */
}
h1 {
  line-height: 56.16px;       /* --5xl-line-height */
  letter-spacing: -0.95px;    /* --5xl-letter-spacing */
  font-variation-settings: "wdth" 100, "opsz" 72;
}
.lead {
  font-size: 19px;
  line-height: 27px;
}

/* Liakims Hook als Zitat unter der H1 */
.hero-quote {
  font-size: 18px;
  line-height: 1.42;
  font-style: oblique 6deg;
  color: var(--ink-soft);
  border-left: 3px solid var(--accent);
  padding-left: 16px;
  margin: 0 0 22px;
}
.hero-quote cite {
  display: block;
  margin-top: 6px;
  font-style: normal;
  font-size: var(--fs-kicker);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.hero-cut {
  font-size: 20px;
  border-left: 0;
  padding-left: 0;
  color: var(--ink);
}

@media (max-width: 1024px) {
  :root { --fs-h1: 44px; }
  h1 { line-height: 46px; letter-spacing: -0.8px; }
}
@media (max-width: 767px) {
  :root { --fs-h1: 36px; }
  h1 { line-height: 39px; letter-spacing: -0.5px; }
  .lead { font-size: 17px; line-height: 25px; }
  .hero-quote { font-size: 16px; padding-left: 13px; }
  .hero-cut { font-size: 17.5px; }
}
@media (max-width: 425px) {
  :root { --fs-h1: 34px; }
  h1 { line-height: 37px; }
}

/* =========================================================================
   HERO-SPALTE nach Escape-Theory-Rhythmus — aber linksbündig
   ========================================================================= */

/* CTA mit Subtext im Button */
.cta--stacked {
  flex-direction: column;
  gap: 3px;
  padding: 14px 30px;
  text-align: center;
}
.cta--stacked strong {
  font-weight: 500;
  font-size: var(--cta-size);
  line-height: 1.3;
}
.cta--stacked small {
  font-size: 13.5px;
  font-weight: 450;
  letter-spacing: 0;
  opacity: 0.72;
}

/* Social Proof direkt unter dem CTA */
.hero-proof {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--ink-soft);
}
.hero-proof__faces {
  display: flex;
  flex: 0 0 auto;
}
.hero-proof__faces .rating__init {
  margin-right: -10px;
  border: 2px solid var(--paper);
}
.hero-proof__text strong {
  color: var(--ink);
  font-weight: 500;
}
.hero-proof__sub {
  opacity: 0.75;
}

/* Zwei Absätze wie im Vorbild — der zweite etwas ruhiger */
.hero-copy .lead + .lead {
  margin-top: 14px;
}

@media (max-width: 900px) {
  /* Hero-CTA über die volle Breite, Proof darunter zentriert-links */
  .hero-copy .cta--stacked {
    width: 100%;
  }
}
@media (max-width: 560px) {
  .cta--stacked {
    padding: 13px 20px;
  }
  .cta--stacked small {
    font-size: 12.5px;
  }
  .hero-proof {
    gap: 11px;
    font-size: 13.5px;
  }
}

/* =========================================================================
   DISPLAY-SCHRIFT: LEMON MILK — nur Headlines, Kicker, Buttons
   Rendert IMMER in Versalien (Free-Version hat keine Kleinbuchstaben).
   Darum: kleinere Grade als bei einer Gemischtschrift, mehr Laufweite,
   engere Zeilen — sonst schreit die Seite und wird unleserlich.
   ========================================================================= */
h1,
h2,
h3,
.manifest__lead,
.manifest__punch,
.hero-punch,
.cta-band__text,
.quiz__title,
.number__value,
.faq summary,
.cta--stacked strong,
.close-choice__label,
.kicker,
.hero-kicker {
  font-family: var(--font-display);
  font-variation-settings: normal;   /* Lemon Milk hat keine Achsen */
  font-weight: 700;
}
h1 {
  font-size: 44px;
  line-height: 1.1;
  letter-spacing: 0.5px;
  word-spacing: 2px;
}
h2 {
  font-size: 32px;
  line-height: 1.16;
  letter-spacing: 0.4px;
}
h3 {
  font-size: 19px;
  line-height: 1.28;
  letter-spacing: 0.4px;
  font-weight: 500;
}
.faq summary {
  font-size: 17px;
  letter-spacing: 0.4px;
  font-weight: 500;
}
.manifest__lead {
  font-size: clamp(24px, 2.9vw, 34px);
  line-height: 1.18;
  letter-spacing: 0.4px;
}
.manifest__punch,
.hero-punch {
  font-size: clamp(19px, 2.2vw, 26px);
  letter-spacing: 0.4px;
  line-height: 1.24;
}
.cta-band__text {
  font-size: 24px;
  letter-spacing: 0.4px;
  line-height: 1.2;
}
.number__value {
  letter-spacing: 0.5px;
}
.quiz__title {
  font-size: 30px;
  line-height: 1.18;
  letter-spacing: 0.4px;
}
.cta--stacked strong {
  font-size: 16px;
  letter-spacing: 0.6px;
}
.kicker,
.hero-kicker {
  font-weight: 500;
  letter-spacing: 0.14em;
}
/* Liakims Zitat bleibt in der Lesenschrift — Versalien-Kursive gibt es nicht */
.hero-quote,
.pullquote p {
  font-family: var(--font);
  font-style: oblique 6deg;
  font-weight: 450;
}
.hero-quote { font-size: 18px; line-height: 1.45; }

@media (max-width: 1024px) {
  h1 { font-size: 36px; }
  h2 { font-size: 27px; }
}
@media (max-width: 767px) {
  h1 { font-size: 29px; line-height: 1.14; letter-spacing: 0.3px; }
  h2 { font-size: 23px; }
  h3 { font-size: 17.5px; }
  .faq summary { font-size: 15.5px; }
  .quiz__title { font-size: 24px; }
  .cta--stacked strong { font-size: 15px; }
  .hero-quote { font-size: 16px; }
}
@media (max-width: 425px) {
  h1 { font-size: 27px; }
}


/* =========================================================================
   AUFZÄHLUNGEN
   ========================================================================= */
/* Schlichte Punkte statt Häkchen — für „Erkennst du dich wieder" */
.dotlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.dotlist--2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 48px;
  max-width: 1000px;
  margin-inline: auto;
}
.dotlist li {
  position: relative;
  padding-left: 26px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.dotlist li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

/* Größere, deutlich sichtbarere Haken — „Für wen ist die Ausbildung" */
.checklist--big li,
.xlist--big li {
  padding-left: 46px;
  line-height: 1.5;
}
.checklist--big li::before {
  width: 30px;
  height: 30px;
  top: 0.1em;
  background-color: var(--accent);
  background-size: 17px;
  box-shadow: 0 2px 10px rgba(201, 162, 39, 0.35);
}
.xlist--big li::before {
  width: 30px;
  height: 30px;
  top: 0.1em;
  background-size: 15px;
}
.checklist--big li + li,
.xlist--big li + li {
  margin-top: 4px;
}

.section-sub {
  margin: 14px auto 0;
  max-width: 52ch;
  font-size: var(--fs-small);
  color: var(--ink-soft);
}

/* =========================================================================
   TESTIMONIAL-LAUFBAND — alle Stimmen laufen endlos durch
   Tempo bewusst langsam: 72 s pro Runde, damit jede Karte lesbar
   vorbeizieht. Hover pausiert, reduced-motion stoppt komplett.
   ========================================================================= */
.tmarquee {
  overflow: hidden;
  padding-block: 8px;
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.tmarquee__track {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: tmarquee 72s linear infinite;
}
.tmarquee:hover .tmarquee__track,
.tmarquee:focus-within .tmarquee__track {
  animation-play-state: paused;
}
@keyframes tmarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.tcard {
  flex: 0 0 auto;
  width: 340px;
  margin: 0;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.tcard p {
  margin: 0;
  color: var(--ink);
  font-size: 16.5px;
  line-height: 1.5;
}
.tcard figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  font-size: var(--fs-small);
  color: var(--ink-soft);
}
.tcard figcaption strong {
  color: var(--ink);
  font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
  .tmarquee__track {
    animation: none;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
  }
  .tcard[aria-hidden="true"] { display: none; }
}
@media (max-width: 767px) {
  .dotlist--2col { grid-template-columns: 1fr; gap: 16px; }
  .tcard { width: 280px; padding: 22px; border-radius: 24px; }
  .tcard p { font-size: 15.5px; }
  .tmarquee__track { animation-duration: 60s; }
  .checklist--big li,
  .xlist--big li { padding-left: 40px; }
  .checklist--big li::before,
  .xlist--big li::before { width: 26px; height: 26px; background-size: 15px; }
}

/* =========================================================================
   MARKEN-LOCKUP — allererste Zeile der Seite
   Regenschirm solide Indigo mit Gold-Kontur, Wortmarke in der Display-Schrift.
   ========================================================================= */
.brandbar {
  display: flex;
  justify-content: center;
  padding: 22px var(--gutter) 14px;
  background: var(--paper);
}
.brandbar__lockup {
  display: inline-flex;
  align-items: center;
  gap: 11px;
}
.brandbar__mark {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
}
.brandbar__word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: 1.2px;
  color: var(--ink);
  line-height: 1;
}
.brandbar__dot {
  color: var(--accent);
}
@media (max-width: 560px) {
  .brandbar { padding: 16px var(--gutter) 10px; }
  .brandbar__mark { width: 28px; height: 28px; }
  .brandbar__word { font-size: 17px; letter-spacing: 1px; }
}

/* =========================================================================
   BILDSPALTE — Foto + Marken-Laufband exakt darunter, gleiche Breite
   ========================================================================= */
.hero-media-col {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;            /* sonst sprengt das Laufband die Grid-Spalte */
}
.hero-media-col .marquee {
  width: 100%;
  padding-block: 6px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}
.hero-media-col .marquee__item {
  width: 132px;
  height: 46px;
}
.hero-media-col .marquee__track {
  gap: 34px;
}
@media (max-width: 900px) {
  .hero-media-col { order: 2; gap: 14px; }
  .hero-media-col .marquee__item { width: 112px; height: 40px; }
}

/* =========================================================================
   HERO VERDICHTET — Headline, Text, Button und Social Proof sollen ohne
   Scrollen sichtbar sein (Vorbild: the-escapetheory).
   Deshalb: mehr Breite fuer die Textspalte (H1 braucht eine Zeile weniger),
   engere Abstaende, kompakteres Zitat.
   ========================================================================= */
.hero {
  padding-block: 8px clamp(32px, 4vw, 56px);
}
.hero-grid {
  grid-template-columns: 1.22fr 1fr;   /* Textspalte breiter → H1 bricht seltener */
  align-items: start;
  gap: clamp(24px, 3vw, 44px);
}
.brandbar {
  padding: 14px var(--gutter) 8px;
}
.hero-kicker {
  margin-bottom: 12px;
}
.hero-copy h1 {
  margin-bottom: 14px;
}
.hero-quote {
  font-size: 17px;
  line-height: 1.4;
  padding-left: 14px;
  margin-bottom: 16px;
}
.hero-quote cite {
  margin-top: 3px;
}
.hero-copy .lead {
  font-size: 17.5px;
  line-height: 25px;
  margin-bottom: 0;
}
.hero-copy .lead + .lead {
  margin-top: 10px;
}
.hero-cut {
  font-size: 18px;
  line-height: 1.35;
  margin: 16px 0 18px;
}
.hero-copy .cta-row {
  margin-top: 0;
}
.hero-proof {
  margin-top: 14px;
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero { padding-block: 4px 32px; }
}
@media (max-width: 560px) {
  .hero-copy h1 { margin-bottom: 12px; }
  .hero-quote { font-size: 15.5px; margin-bottom: 14px; }
  .hero-copy .lead { font-size: 16.5px; line-height: 24px; }
  .hero-cut { font-size: 16.5px; margin: 14px 0 16px; }
}

/* =========================================================================
   HERO ATMET WIEDER (27.08., nach Okans „oben kann nicht mehr atmen")
   Die Verdichtung davor hatte zwei Nebenwirkungen: der Kicker klebte 11px
   unter der Brandbar, und die Video-Sektion ragte 158px in den ersten
   Bildschirm („Das Video darf nicht direkt sichtbar sein").
   Loesung: der Hero bekommt exakt eine Bildschirmhoehe und zentriert seinen
   Inhalt darin. Damit entsteht der Weissraum aus der ungenutzten Reserve
   (gemessen: 209px), ohne dass CTA und Social Proof unter die Falte rutschen
   — Inhalt bleibt gleich, nur die Luft kommt zurueck.
   50px statt der exakten Brandbar-Hoehe (56px Desktop / 54px mobil) als
   Sicherheitsabstand: so endet der Hero garantiert AUF oder UNTER der Falte,
   auf beiden Breakpoints.
   ========================================================================= */
.hero {
  min-height: calc(100vh - 50px);
  min-height: calc(100svh - 50px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 24px;
}

/* Innerer Rhythmus: die Abstaende aus der Verdichtung wieder aufmachen.
   Zusammen ~40px mehr Luft zwischen den Bloecken. */
.hero-kicker {
  margin-bottom: 18px;
}
.hero-copy h1 {
  margin-bottom: 20px;
}
.hero-quote {
  margin-bottom: 22px;
}
.hero-copy .lead + .lead {
  margin-top: 14px;
}
.hero-cut {
  margin: 22px 0 26px;
}
.hero-proof {
  margin-top: 18px;
}

@media (max-width: 900px) {
  /* Mobil ist der Hero laenger als der Schirm — min-height greift dann
     ohnehin nicht, das Zentrieren waere wirkungslos. Nur die Luft oben
     bleibt wichtig. */
  .hero {
    justify-content: flex-start;
    padding-block: 20px 32px;
  }
}

/* Laufband exakt auf Bildbreite: das Hero-Bild blutet ab 1180px um einen
   Gutter in den Seitenrand (.hero-media margin-right), das Laufband tat das
   nicht — gemessen 490px Bild zu 466px Laufband. Okan-Vorgabe war
   „direkt unters Bild in der Breite vom Bild", also gleicher Bleed. */
@media (min-width: 1180px) {
  .hero-media-col .marquee {
    /* width:100% wuerde den negativen Rand wirkungslos machen — die Breite
       muss explizit um den Gutter wachsen, damit sie das Bild trifft. */
    width: calc(100% + var(--gutter));
    margin-right: calc(var(--gutter) * -1);
  }
}

/* =========================================================================
   ERSTGESPRAECH-SEITE (erstgespraech.html)
   Zweiter Conversion-Pfad neben dem Quiz/Checkout: Okan wollte, dass aus
   „Beratung anfragen" kein mailto mehr wird, sondern das echte
   Erstgespraech-Formular (Jotform „Syncretism - Erstgespraech").
   Bewusst eine EIGENE Seite: die Landingpage behaelt damit ihre 0 externen
   Requests, der Jotform-Request faellt erst dort an, wo der Nutzer ihn
   ausdruecklich angefordert hat.
   ========================================================================= */
.brandbar__link {
  text-decoration: none;
  color: inherit;
}
.eg {
  padding-block: clamp(28px, 5vh, 64px) clamp(40px, 6vh, 80px);
}
.eg-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.eg-copy h1 {
  margin-bottom: 18px;
}
.eg-copy .lead {
  margin-bottom: 26px;
}
/* Der Hinweis aus Jotforms eigenem Formularkopf — der wird in der
   Einbettung ausgeblendet, die Info ist aber wichtig (12-20 Uhr). */
.eg-lead2 {
  margin-bottom: 26px;
}
.eg-list {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  gap: 12px;
}
.eg-list li {
  position: relative;
  padding-left: 30px;
  font-size: 17.5px;
  line-height: 1.45;
  color: var(--ink-soft);
}
.eg-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--violet, #7c5cff), var(--cyan, #2bb7ce));
}
.eg-list li::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 11px;
  width: 6px;
  height: 3px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}
.eg-note {
  border-top: 1px solid var(--line);
  padding-top: 20px;
  font-size: var(--fs-small);
  color: var(--ink-soft);
}
.eg-note a {
  color: var(--ink);
  font-weight: 500;
}
.eg-note__sub {
  display: block;
  margin-top: 4px;
  opacity: 0.75;
}

/* Handoff-Karte: verkauft den Termin, uebergibt dann an den echten
   Kalender auf syncretism.live (Zoom). Kein eingebettetes Formular mehr. */
.eg-card {
  background: var(--ink);
  color: #fff;
  border-radius: 36px;
  padding: clamp(28px, 3.4vw, 44px);
  box-shadow: 0 24px 60px rgba(28, 24, 56, 0.18);
}
.eg-card__label {
  font-size: var(--fs-kicker);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
}
.eg-card__big {
  font-family: var(--font-display, inherit);
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1.08;
  letter-spacing: 0.4px;
  margin: 0 0 24px;
}
.eg-card__facts {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  gap: 11px;
}
.eg-card__facts li {
  position: relative;
  padding-left: 26px;
  font-size: 16.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.86);
}
.eg-card__facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
}
.eg-card__note {
  margin: 16px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.66);
}
.eg-card__note strong {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
}
/* Voll breiter CTA in der dunklen Karte (v2-Muster button-cta-light) */
.cta--full {
  display: flex;
  width: 100%;
  justify-content: center;
  background: var(--paper);
  color: var(--ink);
}
.cta--full:hover {
  background: var(--accent);
  color: var(--ink);
}

@media (max-width: 900px) {
  .eg-grid {
    grid-template-columns: 1fr;
  }
  /* Formular zuerst — wer hier landet, will das Formular, nicht den Text. */
  .eg-formcol {
    order: -1;
  }
}

/* -------------------------------------------------------------------------
   ERSTGESPRAECH als sekundaerer Einstieg auf der Landingpage
   Okan: „wir brauchen definitiv mehr erstgespraech buttons".
   Bewusst als ruhiger Zweitweg gesetzt, damit der Hauptpfad
   (Quiz -> Checkout) optisch dominant bleibt.
   ------------------------------------------------------------------------- */
.cta-alt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.cta-alt:hover {
  color: var(--ink);
  border-color: var(--ink);
}
.section--invert .cta-alt {
  color: rgba(255, 255, 255, 0.82);
}
.section--invert .cta-alt:hover {
  color: #fff;
  border-color: #fff;
}
/* Eigene Zeile unter einem Haupt-CTA */
.cta-alt--block {
  display: flex;
  width: fit-content;
  margin-top: 16px;
}
.center .cta-alt--block {
  margin-inline: auto;
}

/* Sticky-Leiste: Zweitweg neben dem Haupt-CTA.
   Der Erstgespraech-Link ist bewusst klein und ohne Flaeche — er soll den
   Kauf-Button nicht kannibalisieren, aber dauerpraesent sein. */
.sticky {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.sticky__alt {
  display: block;
  text-align: center;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.sticky__alt:hover {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

/* Interner CRM-Einstieg im Footer — zurueckhaltend, damit er Besuchern nicht
   ins Auge springt. Fuehrt ueber /crm auf das gemeinsame CRM. */
.footer-intern { opacity: 0.45; }
.footer-intern:hover { opacity: 1; }

/* =========================================================================
   ERSTGESPRAECH-BUTTONS SICHTBARER (Okan: "so dass er auch etwas mehr
   herausschickt"). Vorher ein duenner Textlink mit Goldunterstrich — der ging
   neben den gefuellten Kauf-Buttons unter. Jetzt eine echte Pille mit
   Goldrand: klar als Knopf erkennbar, aber ungefuellt, damit der Kaufpfad
   optisch der Hauptweg bleibt.
   Kontraste bewusst sicher gewaehlt: Text immer Indigo auf Weiss bzw. Weiss
   auf Indigo — Gold traegt keinen Text (siehe Merksatz "Kontrast messen").
   ========================================================================= */
.cta-alt {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  padding: 13px 24px;
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--ink);
  text-decoration: none;
  background: #fff;
  border: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  border-radius: 9999px;
  box-shadow: 0 2px 12px rgba(201, 162, 39, 0.18);
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease,
    box-shadow 0.18s ease;
}
.cta-alt:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(28, 24, 56, 0.22);
}
/* Auf den dunklen Sektionen umgekehrt */
.section--invert .cta-alt {
  background: transparent;
  color: #fff;
  border-color: var(--accent);
  box-shadow: none;
}
.section--invert .cta-alt:hover {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
}
.cta-alt--block {
  display: inline-flex;
  width: auto;
}
@media (max-width: 560px) {
  .cta-alt {
    width: 100%;
    justify-content: center;
    text-align: center;
    padding: 14px 18px;
    font-size: 15px;
  }
}

/* Sticky-Leiste: der Zweitweg wird ebenfalls ein sichtbarer Knopf. */
.sticky__alt {
  display: block;
  padding: 11px 18px;
  text-align: center;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  background: #fff;
  border: 1.5px solid var(--accent);
  border-radius: 9999px;
}
.sticky__alt:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

/* =========================================================================
   MOBILE OEFFNUNGSANSICHT nach Vorbild hello.moms-health.de
   Okan: "Wenn man unser Funnel auf dem Handy oeffnet sieht es so uneinladend
   aus." Zu Recht: mobil kam zuerst ein zweizeiliger Kicker, dann eine
   vierzeilige Versal-Headline, dann Zitat und zwei lange Absaetze — das Bild
   lag weit unten. Das Vorbild empfaengt mit einem BILD und einer kurzen,
   mittigen Ansprache.

   Neue Reihenfolge auf dem Handy:
     BILD -> Kicker -> Headline -> ein kurzer Satz -> CTA -> Social Proof
   Zitat, zweiter Absatz und Schnittsatz rutschen darunter — sie gehen nicht
   verloren, empfangen den Besucher aber nicht mehr.

   Umsortiert wird NUR innerhalb von .hero-copy (eigener Flex-Kontext) und
   zwischen den beiden Hero-Spalten. Kein display:contents — das hatte die
   Kinder aus der Spalte gerissen und das Bild gesprengt.
   Desktop bleibt unveraendert.
   ========================================================================= */
@media (max-width: 900px) {
  /* BEWUSST Grid, nicht Flex: als Flex-Spalte verliert die Bildspalte ihre
     Breitenbegrenzung, und das Logo-Laufband darin blaeht sie auf ihre
     max-content-Breite auf (gemessen 2654px auf einem 390px-Schirm).
     Die 1fr-Spalte des Grids deckelt das zuverlaessig — und `order`
     funktioniert im Grid genauso. */
  .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .hero-media-col {
    order: 1;
    margin-bottom: 24px;
    gap: 12px;
    min-width: 0;
  }
  .hero-copy {
    order: 2;
    display: flex;
    flex-direction: column;
    min-width: 0;
    text-align: center;
  }

  .hero-kicker            { order: 1; margin-bottom: 14px; font-size: 12px; letter-spacing: 0.1em; line-height: 1.5; }
  .hero-copy h1           { order: 2; margin-bottom: 14px; line-height: 1.08; }
  .hero-copy .cta-row     { order: 4; justify-content: center; }
  .hero-copy .hero-proof  { order: 5; margin-top: 18px; justify-content: center; text-align: left; }
  .hero-copy .cta-alt     { order: 6; align-self: center; }
  .hero-quote             { order: 7; margin-top: 28px; text-align: left; }
  .hero-copy .lead        { order: 8; text-align: left; }
  .hero-cut               { order: 9; text-align: left; }
  /* NACH .hero-copy .lead, sonst ueberschreibt dessen order:8 die 3 hier —
     der Einleitungssatz traegt beide Klassen. */
  .hero-copy .hero-lead1  { order: 3; margin-bottom: 22px; text-align: center; }

  /* Der einladende Teil: grosses, weiches Bild wie im Vorbild. */
  .hero-media { border-radius: 24px; }
  .hero-media img { aspect-ratio: 16 / 11; }
  /* Logo-Band huebsch an das Bild anschliessen statt frei zu schweben —
     Okan will die Logos beim Ankommen sehen, sie sollen aber nicht zwischen
     Bild und Headline eine Luecke reissen. */
  .hero-media-col .marquee {
    padding-top: 10px;
    padding-block: 0;
    border-top: 0;
  }
  .hero-media-col .marquee__item { width: 96px; height: 34px; }
  .hero-media-col .marquee__track { gap: 22px; }
  /* Subtext im Haupt-CTA etwas ruhiger, damit er nicht dreizeilig wird */
  .cta--stacked small { font-size: 12px; line-height: 1.35; }

  /* Headline eine Spur kleiner, damit sie in 3 statt 4 Zeilen passt */
  :root { --fs-h1: 33px; }
  .hero-copy .cta--stacked { width: 100%; }
}
@media (max-width: 560px) {
  :root { --fs-h1: 30px; }
}