/* ============================================================
   Alexandra Feuerer – Webinar Landing Pages
   Design Tokens & Shared Styles
   Farben abgeleitet von alexandra-feuerer.de (Navy + Gold/Champagner)
   Fonts: La Luxes Serif Pro (Headlines) + Montserrat (Text)
   ============================================================ */

@font-face {
  font-family: "La Luxes Serif Pro";
  src: url("../fonts/LaLuxesSerifPro-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "La Luxes Serif Pro";
  src: url("../fonts/LaLuxesSerifPro-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "La Luxes Serif Pro";
  src: url("../fonts/LaLuxesSerifPro-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand */
  --navy: #344258;
  --navy-deep: #273349;
  --navy-soft: #5d6c7b;
  --gold: #bfa14a;
  --gold-deep: #a3873a;
  --champagne: #cdba99;
  --champagne-soft: #dbbd8e;
  --champagne-light: #f9e2b5;
  --cream: #fdfbf7;
  --cream-warm: #fff3e2;
  --white: #ffffff;

  /* Semantik */
  --text: var(--navy);
  --text-muted: #5f6b7d;
  --bg: var(--cream);
  --cta-grad: linear-gradient(135deg, #d9bd7a 0%, #bfa14a 100%);
  --cta-grad-hover: linear-gradient(135deg, #e2c98c 0%, #c9ab54 100%);
  --live-red: #e2544a;
  /* WhatsApp-Markenfarbe – nur für die Community-Buttons der Danke-Seite */
  --wa: #25d366;
  --wa-deep: #128c7e;

  /* Typo – Headlines dünn/medium, nie fett */
  --font-sans: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "La Luxes Serif Pro", Georgia, serif;

  /* Layout */
  --container: 1200px;
  --radius: 16px;
  --shadow-soft: 0 10px 40px rgba(52, 66, 88, 0.10);
  --shadow-card: 0 8px 30px rgba(52, 66, 88, 0.14);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

strong {
  font-weight: 600;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* ============================================================
   Topbar
   ============================================================ */

.topbar {
  background: var(--white);
  border-bottom: 1px solid rgba(52, 66, 88, 0.08);
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}

.brand__logo {
  width: 48px;
  height: 46px;
  flex-shrink: 0;
}

.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.brand__name {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: var(--navy);
}

.brand__claim {
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 500;
}

.topbar__date {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--navy);
  white-space: nowrap;
}

.topbar__date svg {
  color: var(--gold-deep);
  flex-shrink: 0;
}

/* ============================================================
   Hero (Above the fold)
   ============================================================ */

.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1000px 600px at 85% 20%, rgba(249, 226, 181, 0.45), transparent 65%),
    radial-gradient(800px 500px at 0% 100%, rgba(205, 186, 153, 0.22), transparent 60%),
    var(--cream);
}

/* Dezentes Karo-Muster, das nach außen ausläuft */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(52, 66, 88, 0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(52, 66, 88, 0.055) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(ellipse 90% 90% at 45% 10%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 90% 90% at 45% 10%, #000 20%, transparent 75%);
  pointer-events: none;
}

/* Wandernder Gold-Glow hinter dem Visual */
.hero__glow {
  position: absolute;
  top: 10%;
  right: -5%;
  width: 540px;
  height: 420px;
  background: radial-gradient(closest-side, rgba(249, 226, 181, 0.55), transparent 70%);
  filter: blur(50px);
  animation: glow-drift 12s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes glow-drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-90px, 50px) scale(1.15); }
}

/* Schwebende Gold-Partikel */
.hero__sparkles span {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(230, 200, 118, 0.9), rgba(191, 161, 74, 0.35));
  opacity: 0;
  animation: sparkle-drift 9s ease-in-out infinite;
  pointer-events: none;
}

.hero__sparkles span:nth-child(1) { width: 7px;  height: 7px;  left: 8%;  top: 66%; animation-delay: 0s;   animation-duration: 9s; }
.hero__sparkles span:nth-child(2) { width: 5px;  height: 5px;  left: 30%; top: 22%; animation-delay: 1.6s; animation-duration: 11s; }
.hero__sparkles span:nth-child(3) { width: 9px;  height: 9px;  left: 47%; top: 74%; animation-delay: 3.1s; animation-duration: 8s; }
.hero__sparkles span:nth-child(4) { width: 4px;  height: 4px;  left: 60%; top: 18%; animation-delay: 0.8s; animation-duration: 10s; }
.hero__sparkles span:nth-child(5) { width: 6px;  height: 6px;  left: 76%; top: 30%; animation-delay: 2.3s; animation-duration: 9.5s; }
.hero__sparkles span:nth-child(6) { width: 8px;  height: 8px;  left: 90%; top: 58%; animation-delay: 4s;   animation-duration: 12s; }

@keyframes sparkle-drift {
  0%   { transform: translateY(0); opacity: 0; }
  15%  { opacity: 0.8; }
  50%  { opacity: 0.45; }
  85%  { opacity: 0.7; }
  100% { transform: translateY(-70px); opacity: 0; }
}

/* Gestaffelte Entrance-Animation */
[data-reveal] {
  opacity: 0;
  animation: reveal-rise 0.75s cubic-bezier(0.22, 0.9, 0.3, 1) forwards;
}

[data-reveal="1"] { animation-delay: 0.05s; }
[data-reveal="2"] { animation-delay: 0.18s; }
[data-reveal="3"] { animation-delay: 0.32s; }
[data-reveal="4"] { animation-delay: 0.46s; }
[data-reveal="5"] { animation-delay: 0.58s; }
[data-reveal="6"] { animation-delay: 0.7s; }
[data-reveal="7"] { animation-delay: 0.85s; }

@keyframes reveal-rise {
  from {
    opacity: 0;
    transform: translateY(24px);
    filter: blur(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: end;
  gap: 36px;
}

.hero__copy {
  padding-top: 44px;
  padding-bottom: 56px;
}

/* Live-Badge */
.badge-live {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  border: 1px solid rgba(191, 161, 74, 0.45);
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
  box-shadow: var(--shadow-soft);
}

.badge-live__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--live-red);
  animation: pulse 1.8s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(226, 84, 74, 0.45); }
  50% { box-shadow: 0 0 0 7px rgba(226, 84, 74, 0); }
}

.hero h1 {
  margin: 24px 0 16px;
  font-family: var(--font-serif);
  font-size: clamp(2.1rem, 3.6vw, 3rem);
  line-height: 1.18;
  font-weight: 400;
  letter-spacing: 0.005em;
  color: var(--navy-deep);
}

/* Gold-Schimmer, der über den Akzent läuft */
.hero h1 .accent {
  font-weight: 500;
  background: linear-gradient(100deg,
    var(--gold-deep) 25%, #e0c274 42%, #f6e5ae 50%, #e0c274 58%, var(--gold-deep) 75%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--gold-deep);
  animation: accent-shimmer 4s linear infinite;
}

@keyframes accent-shimmer {
  from { background-position: 110% 0; }
  to   { background-position: -110% 0; }
}

.hero h1 .subline {
  display: block;
  margin-top: 12px;
  font-family: var(--font-sans);
  font-size: 0.44em;
  line-height: 1.4;
  font-weight: 500;
  color: var(--navy-soft);
  letter-spacing: 0;
}

.hero__sub {
  max-width: 560px;
  margin: 0 0 24px;
  font-size: 1rem;
  font-weight: 400;
  color: var(--text-muted);
}

.hero__sub strong {
  color: var(--navy);
  font-weight: 600;
}

/* Meta-Chips */
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--white);
  border: 1px solid rgba(52, 66, 88, 0.10);
  border-radius: 999px;
  padding: 9px 14px;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--navy);
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(52, 66, 88, 0.06);
}

/* Auf Desktop bleiben alle drei Chips in einer Zeile */
@media (min-width: 961px) {
  .hero__meta {
    flex-wrap: nowrap;
  }
}

.chip svg {
  color: var(--gold-deep);
  flex-shrink: 0;
}

/* Countdown */
.countdown {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 26px;
}

.countdown__label {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-right: 6px;
}

.countdown__tile {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-width: 58px;
  padding: 7px 10px 6px;
  background: var(--white);
  border: 1px solid rgba(191, 161, 74, 0.35);
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(52, 66, 88, 0.06);
}

.countdown__num {
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.15;
  color: var(--navy-deep);
  font-variant-numeric: tabular-nums;
}

.countdown__unit {
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* CTA – Navy mit goldener Ziernaht, Serif-Label und Glanz-Sweep */
.cta {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: linear-gradient(150deg, #3e4f69 0%, #273349 55%, #1f2937 100%);
  color: var(--champagne-light);
  text-decoration: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-sans);
  border-radius: 14px;
  padding: 16px 46px 14px;
  overflow: hidden;
  box-shadow:
    0 18px 38px rgba(39, 51, 73, 0.35),
    0 4px 18px rgba(191, 161, 74, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Goldene "Naht" innen */
.cta::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1.5px dashed rgba(223, 196, 130, 0.55);
  border-radius: 9px;
  pointer-events: none;
  transition: border-color 0.15s ease;
}

/* Automatischer Glanz-Sweep (läuft alle paar Sekunden) */
.cta::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -70%;
  width: 45%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  transform: skewX(-18deg);
  animation: cta-shine 4.5s ease-in-out 1.8s infinite;
  pointer-events: none;
}

@keyframes cta-shine {
  0%   { left: -70%; }
  22%  { left: 130%; }
  100% { left: 130%; }
}

.cta:hover {
  transform: translateY(-2px);
  box-shadow:
    0 24px 46px rgba(39, 51, 73, 0.42),
    0 6px 26px rgba(191, 161, 74, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.cta:hover::before {
  border-color: rgba(240, 214, 150, 0.85);
}

.cta:focus-visible {
  outline: 3px solid rgba(191, 161, 74, 0.6);
  outline-offset: 3px;
}

.cta__label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: #f5e3b8;
}

.cta__label svg {
  color: var(--gold);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.cta:hover .cta__label svg {
  transform: translateX(3px);
}

.cta__note {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(245, 227, 184, 0.78);
}

/* Kompakte Variante: gleicher Look, aber leiser – für sekundäre Sprungmarken
   (z. B. Hero -> Kalender), die dem Haupt-CTA einer Seite nicht die Show stehlen. */
.cta--sm {
  padding: 12px 30px 11px;
  border-radius: 12px;
  box-shadow:
    0 12px 26px rgba(39, 51, 73, 0.28),
    0 3px 12px rgba(191, 161, 74, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.cta--sm::before {
  inset: 4px;
  border-radius: 8px;
}

.cta--sm .cta__label {
  gap: 10px;
  font-size: 1.02rem;
}

.cta--sm .cta__label svg {
  width: 20px;
  height: 11px;
}

/* Trust-Zeile mit ProvenExpert-Siegel */
.hero__trust {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
}

.hero__trust-badge {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
  flex-shrink: 0;
}

.hero__trust-text {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.hero__trust-text strong {
  display: block;
  font-weight: 600;
  font-size: 0.94rem;
  color: var(--navy);
}

/* Hero Visual: Freisteller mittig, Chart-Grafik dahinter,
   Karo-Muster scheint durch */
.hero__visual {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-top: 0;
}

.hero__chart {
  position: absolute;
  z-index: 0;
  bottom: 8%;
  /* Ragt überdimensional bis ~24px an den rechten Viewport-Rand
     (50vw - 576px = Abstand Spaltenkante → Viewport-Kante bei Container 1200px);
     auf schmalen Desktops bleibt er an der Spaltenkante, statt abgeschnitten zu werden */
  right: min(0px, calc(600px - 50vw));
  /* Der Chart darf in die Textspalte hineinragen – aber nie bis an den CTA-Button.
     Weil die rechte Kante feststeht, begrenzt die Breite die linke: Sie endet
     mindestens 530px rechts der Container-Innenkante (Button-Breite ~490px +
     40px Luft). Ohne diese Schranke schoben sich die Balken zwischen ~960px und
     ~1450px Viewport-Breite hinter den Button.
     Klammer 1 = Container-Innenbreite, Klammer 2 = Überstand über die Spalte hinaus. */
  width: min(
    148%,
    calc(min(100vw - 48px, 1152px) + max(0px, 50vw - 600px) - 530px)
  );
  max-width: 880px;
  height: auto;
  color: var(--gold);
  opacity: 0.45;
  pointer-events: none;
}

.hero__photo {
  /* Füllt die volle Höhe der Hero-Sektion (Höhe kommt von der Copy-Spalte),
     kleine Luft nach oben; Breite folgt aus dem Seitenverhältnis */
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  height: 96%;
  width: auto;
  max-width: none;
  filter: drop-shadow(0 24px 45px rgba(52, 66, 88, 0.22));
}

/* Floating Badge-Karte: poppt auf und schwebt danach dauerhaft */
.float-card {
  position: absolute;
  z-index: 2;
  left: -22px;
  bottom: 44px;
  background: var(--white);
  border-radius: var(--radius);
  padding: 14px 20px;
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: 0;
  animation:
    card-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 1s forwards,
    card-float 4.5s ease-in-out 1.55s infinite;
}

@keyframes card-pop {
  from { opacity: 0; transform: translateY(18px) scale(0.85); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes card-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* Zweites Widget: Testimonial-Avatare + "Über 2.000 Kunden" –
   rechts positioniert, Timing versetzt, damit beide Karten
   nicht synchron schweben */
.float-card--investors {
  left: auto;
  right: -18px;
  bottom: 200px;
  animation:
    card-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 1.35s forwards,
    card-float 5.2s ease-in-out 1.9s infinite;
}

.float-card__avatars {
  display: flex;
  flex-shrink: 0;
}

.float-card__avatars img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--white);
  object-fit: cover;
}

.float-card__avatars img + img {
  margin-left: -13px;
}

.float-card__icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--cream-warm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-deep);
  flex-shrink: 0;
}

.float-card__title {
  font-weight: 600;
  font-size: 0.94rem;
  color: var(--navy-deep);
  line-height: 1.25;
}

.float-card__sub {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ============================================================
   Sektions-Bausteine (Kicker, Titel, Subline)
   ============================================================ */

.section-kicker {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 14px;
}

.section-title {
  margin: 0 0 14px;
  font-family: var(--font-serif);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.2;
  font-weight: 400;
  color: var(--navy-deep);
}

.section-title .accent {
  color: var(--gold-deep);
  font-weight: 500;
}

.section-sub {
  max-width: 620px;
  margin: 0 auto;
  font-size: 1rem;
  color: var(--text-muted);
}

/* ============================================================
   Vorteile / "Das erwartet Dich im Workshop"
   ============================================================ */

.benefits {
  position: relative;
  background:
    radial-gradient(900px 500px at 100% 0%, rgba(249, 226, 181, 0.28), transparent 60%),
    radial-gradient(700px 450px at 0% 100%, rgba(205, 186, 153, 0.16), transparent 60%),
    var(--white);
  padding: 76px 0 84px;
}

.benefits__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 48px;
}

.benefits__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.benefit {
  position: relative;
  background: var(--cream);
  border: 1px solid rgba(191, 161, 74, 0.22);
  border-radius: var(--radius);
  padding: 28px 26px 26px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

/* Feine Gold-Linie oben, die beim Hover "aufleuchtet" */
.benefit::before {
  content: "";
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 2px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, transparent, rgba(191, 161, 74, 0.55), transparent);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.benefit:hover {
  transform: translateY(-5px);
  border-color: rgba(191, 161, 74, 0.5);
  box-shadow: var(--shadow-card);
}

.benefit:hover::before {
  opacity: 1;
}

.benefit__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-bottom: 18px;
  border-radius: 14px;
  background: linear-gradient(145deg, var(--cream-warm), #fbe9c9);
  border: 1px solid rgba(191, 161, 74, 0.3);
  color: var(--gold-deep);
  box-shadow: 0 4px 14px rgba(191, 161, 74, 0.16);
}

.benefit__title {
  margin: 0 0 8px;
  font-family: var(--font-sans);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--navy-deep);
}

.benefit__text {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--text-muted);
}

.benefits__cta {
  display: flex;
  justify-content: center;
  margin-top: 44px;
}

/* ---------- Scroll-Reveal (per IntersectionObserver in main.js) ---------- */

html[data-js] [data-scroll-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.65s cubic-bezier(0.22, 0.9, 0.3, 1),
              transform 0.65s cubic-bezier(0.22, 0.9, 0.3, 1);
}

html[data-js] [data-scroll-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Gestaffeltes Einblenden der Karten */
.benefits__grid .benefit:nth-child(2) { transition-delay: 0.08s; }
.benefits__grid .benefit:nth-child(3) { transition-delay: 0.16s; }
.benefits__grid .benefit:nth-child(4) { transition-delay: 0.08s; }
.benefits__grid .benefit:nth-child(5) { transition-delay: 0.16s; }
.benefits__grid .benefit:nth-child(6) { transition-delay: 0.24s; }

/* ============================================================
   Zitat-Band – Einwand "zu alt" (bewusst kompakt, kein voller
   Sektions-Aufbau: nur Zitat + Autorenzeile + Watermark)
   ============================================================ */

.quoteband {
  position: relative;
  overflow: hidden;
  text-align: center;
  background:
    radial-gradient(700px 320px at 50% 0%, rgba(249, 226, 181, 0.30), transparent 70%),
    var(--cream-warm);
  padding: 56px 0 60px;
}

/* Riesiges Serif-Watermark hinter dem Zitat (vgl. Inspo "BÖRSE") */
.quoteband__watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(4.5rem, 15vw, 10.5rem);
  letter-spacing: 0.05em;
  line-height: 1;
  color: rgba(191, 161, 74, 0.09);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.quoteband__inner {
  position: relative;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.quoteband__mark {
  color: var(--gold);
  opacity: 0.85;
}

.quoteband__quote {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(1.2rem, 2.6vw, 1.65rem);
  line-height: 1.55;
  letter-spacing: 0.01em;
  color: var(--navy);
}

/* Der Einwand selbst in Gold, kursiv – Rest der Antwort in Navy */
.quoteband__quote em {
  font-style: italic;
  color: var(--gold-deep);
}

.quoteband__author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.quoteband__avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(191, 161, 74, 0.55);
  box-shadow: 0 4px 14px rgba(52, 66, 88, 0.18);
}

.quoteband__person {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

.quoteband__name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--navy-deep);
}

.quoteband__role {
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

@media (max-width: 720px) {
  .quoteband {
    padding: 46px 0 50px;
  }

  .quoteband__inner {
    gap: 16px;
  }
}

/* ============================================================
   Über Alexandra – dunkle Story-Sektion
   ============================================================ */

.about {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 560px at 88% 12%, rgba(191, 161, 74, 0.16), transparent 60%),
    radial-gradient(760px 480px at 0% 95%, rgba(191, 161, 74, 0.10), transparent 60%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 55%, #1e2839 100%);
  color: var(--cream);
  padding: 84px 0 92px;
}

/* Feines Karo wie im Hero, hier hell auf Navy */
.about::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(249, 226, 181, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(249, 226, 181, 0.05) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(ellipse 85% 85% at 25% 30%, #000 15%, transparent 75%);
  mask-image: radial-gradient(ellipse 85% 85% at 25% 30%, #000 15%, transparent 75%);
  pointer-events: none;
}

.about__glow {
  position: absolute;
  top: 18%;
  left: -8%;
  width: 520px;
  height: 420px;
  background: radial-gradient(closest-side, rgba(249, 226, 181, 0.16), transparent 70%);
  filter: blur(55px);
  animation: glow-drift 14s ease-in-out infinite alternate;
  pointer-events: none;
}

.about__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  align-items: center;
  gap: 64px;
}

/* Bild mit goldener Rahmen-Silhouette dahinter */
.about__visual {
  position: sticky;
  top: 40px;
  align-self: start;
}

.about__frame {
  position: relative;
  border-radius: var(--radius);
}

/* Versetzter Gold-Rahmen hinter dem Foto */
.about__frame::before {
  content: "";
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 1.5px solid rgba(191, 161, 74, 0.55);
  border-radius: var(--radius);
  pointer-events: none;
}

/* Gold-Ecke oben links als Akzent */
.about__frame::after {
  content: "";
  position: absolute;
  top: -12px;
  left: -12px;
  width: 74px;
  height: 74px;
  border-top: 3px solid var(--gold);
  border-left: 3px solid var(--gold);
  border-top-left-radius: var(--radius);
  pointer-events: none;
}

.about__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 22%;
  border-radius: var(--radius);
  box-shadow: 0 30px 60px rgba(15, 22, 34, 0.45);
}

/* Signatur-Karte unterhalb des Fotos */
.about__signature {
  position: absolute;
  z-index: 2;
  right: -14px;
  bottom: 26px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: rgba(39, 51, 73, 0.82);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(191, 161, 74, 0.45);
  border-radius: 12px;
  padding: 12px 20px;
  box-shadow: 0 14px 34px rgba(15, 22, 34, 0.4);
}

.about__signature-quote {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--champagne-light);
  line-height: 1.2;
}

.about__signature-name {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(249, 226, 181, 0.75);
}

/* Copy-Spalte */
.section-kicker--gold {
  color: var(--champagne-soft);
}

.section-title--light {
  color: var(--cream);
}

.section-title--light .accent {
  color: var(--champagne-soft);
}

.about__lead {
  margin: 4px 0 18px;
  font-size: 1.12rem;
  line-height: 1.6;
  font-weight: 400;
  color: rgba(253, 251, 247, 0.92);
}

.about__lead strong {
  color: var(--champagne-light);
  font-weight: 600;
}

.about__text {
  margin: 0 0 18px;
  font-size: 0.97rem;
  line-height: 1.75;
  color: rgba(253, 251, 247, 0.78);
}

.about__text strong {
  color: var(--champagne-light);
  font-weight: 600;
}

/* Persönliches Zitat – Serif, goldene Linie */
.about__quote {
  position: relative;
  margin: 26px 0;
  padding: 6px 0 6px 26px;
  border-left: 2px solid var(--gold);
}

.about__quote p {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.22rem;
  line-height: 1.55;
  font-weight: 300;
  letter-spacing: 0.01em;
  color: var(--champagne-light);
}

/* Fakten-Liste mit Gold-Häkchen */
.about__facts {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 24px;
}

.about__facts li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9rem;
  line-height: 1.5;
  font-weight: 500;
  color: rgba(253, 251, 247, 0.88);
}

.about__fact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: 50%;
  background: rgba(191, 161, 74, 0.16);
  border: 1px solid rgba(191, 161, 74, 0.45);
  color: var(--champagne-light);
  flex-shrink: 0;
}

.about__cta {
  margin-top: 34px;
}

/* ============================================================
   Fuer wen dieser Workshop ist ("#fuer-dich")
   Qualifiziert ueber die Botschaft. Der Verlauf von Weiss nach
   Creme traegt den Uebergang von den Vorteilen (weiss) in den
   Mythen-Check (creme) - beide Nachbarsektionen bleiben dadurch
   ohne harte Kante.
   ============================================================ */
.foryou {
  position: relative;
  padding: 72px 0 76px;
  background: linear-gradient(180deg, var(--white) 0%, var(--cream) 100%);
}

.foryou__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 40px;
}

.foryou__cols {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 22px;
  align-items: start;
}

.foryou__col {
  border-radius: 16px;
  padding: 28px 30px 30px;
}

/* Die "Ja"-Spalte ist die eigentliche Botschaft und tritt deshalb
   als gefuellte Karte auf; die "Nein"-Spalte bleibt bewusst leiser. */
.foryou__col--yes {
  background: var(--white);
  border: 1px solid rgba(191, 161, 74, 0.28);
  box-shadow: 0 18px 40px rgba(52, 66, 88, 0.07);
}

.foryou__col--no {
  border: 1px dashed rgba(93, 108, 123, 0.32);
  background: rgba(255, 255, 255, 0.4);
}

.foryou__title {
  margin: 0 0 18px;
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--navy-deep);
}

.foryou__col--no .foryou__title {
  font-weight: 400;
  color: var(--navy-soft);
}

.foryou__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 13px;
}

.foryou__list li {
  position: relative;
  padding-left: 27px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text);
}

.foryou__col--no .foryou__list li {
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* Haken bzw. Strich als reine CSS-Form – kein Glyph, der je nach
   System als Emoji gerendert wuerde. */
.foryou__col--yes .foryou__list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 6px;
  width: 6px;
  height: 11px;
  border: solid var(--gold-deep);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.foryou__col--no .foryou__list li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 12px;
  width: 13px;
  height: 2px;
  border-radius: 2px;
  background: var(--navy-soft);
  opacity: 0.5;
}

@media (max-width: 860px) {
  .foryou__cols {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 600px) {
  .foryou {
    padding: 54px 0 58px;
  }

  .foryou__head {
    margin-bottom: 28px;
  }

  .foryou__col {
    padding: 22px 20px 24px;
  }

  .foryou__list li {
    font-size: 0.92rem;
  }
}


/* ----------------------------------------------------------------
   Mythen-Check ("#mythen")
   Zwei Spalten kompakter Karten: Vorurteil als Serif-Zitat, darunter die
   Antwort. Absichtlich flach gehalten, damit acht Einwaende nicht die
   halbe Seite fuellen.
   ---------------------------------------------------------------- */
.myths {
  position: relative;
  padding: 74px 0 78px;
  background:
    radial-gradient(700px 400px at 88% 0%, rgba(205, 186, 153, 0.2), transparent 66%),
    var(--cream);
  overflow: clip;
}

.myths__head {
  max-width: 60ch;
  margin-bottom: 34px;
}

.myths__lead {
  margin: 14px 0 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-muted);
}

.myths__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.myth {
  position: relative;
  padding: 20px 22px 20px 24px;
  border: 1px solid rgba(191, 161, 74, 0.24);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
}

/* Goldener Balken links – ersetzt ein Icon und haelt die Karte flach */
.myth::before {
  content: "";
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--champagne-soft), var(--gold-deep));
}

.myth__claim {
  margin: 0 0 9px;
  font-family: var(--font-serif);
  font-size: 1.12rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--navy);
}

.myth__truth {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--text-muted);
}

.myth__tag {
  display: inline-block;
  margin-right: 7px;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

@media (max-width: 860px) {
  .myths__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 600px) {
  .myths {
    padding: 56px 0 60px;
  }

  .myths__head {
    margin-bottom: 26px;
  }

  .myth {
    padding: 17px 18px 17px 20px;
  }

  .myth__claim {
    font-size: 1.04rem;
  }

  .myth__truth {
    font-size: 0.86rem;
  }
}

/* ----------------------------------------------------------------
   Persönlicher Brief ("#brief")
   Papier-Karte auf Creme-Grund, leicht gekippt. Der Text wird beim
   Scrollen wortweise aufgedeckt – die Wörter kommen aus main.js
   (setupLetter) als .letter__w und werden mit .is-inked sichtbar.
   Wichtig: Das Abdunkeln hängt an html[data-js], damit der Brief ohne
   JavaScript vollständig lesbar bleibt.
   ---------------------------------------------------------------- */
.letter {
  position: relative;
  padding: 76px 0 84px;
  background:
    radial-gradient(780px 440px at 12% 0%, rgba(249, 226, 181, 0.38), transparent 66%),
    radial-gradient(620px 380px at 92% 100%, rgba(205, 186, 153, 0.22), transparent 70%),
    var(--cream);
  overflow: clip;
}

.letter__wrap {
  display: flex;
  justify-content: center;
}

.letter__paper {
  position: relative;
  width: min(768px, 100%);
  padding: 52px 56px 44px;
  transform: rotate(-0.35deg);
  border: 1px solid rgba(191, 161, 74, 0.26);
  border-radius: 3px;
  background:
    linear-gradient(180deg, #fffefb 0%, #fffdf6 100%);
  box-shadow:
    0 28px 64px -30px rgba(52, 66, 88, 0.36),
    0 2px 14px -8px rgba(52, 66, 88, 0.14);
}

/* Goldener Rand links wie beim Notizblock */
.letter__paper::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 26px;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(191, 161, 74, 0.32) 12%, rgba(191, 161, 74, 0.32) 88%, transparent);
}

/* Klebestreifen oben – macht aus der Karte eine angepinnte Notiz */
.letter__tape {
  position: absolute;
  top: -13px;
  left: 50%;
  width: 128px;
  height: 26px;
  transform: translateX(-50%) rotate(-1.6deg);
  background: linear-gradient(180deg, rgba(249, 226, 181, 0.82), rgba(205, 186, 153, 0.62));
  border-left: 1px dashed rgba(255, 255, 255, 0.5);
  border-right: 1px dashed rgba(255, 255, 255, 0.5);
  box-shadow: 0 2px 6px -3px rgba(52, 66, 88, 0.3);
}

.letter__head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 26px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(191, 161, 74, 0.2);
}

.letter__avatar {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(191, 161, 74, 0.4);
}

.letter__intro {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.letter__kicker {
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 500;
}

.letter__title {
  margin: 0;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: 400;
}

.letter__body p {
  margin: 0 0 18px;
  font-size: 1.04rem;
  line-height: 1.85;
  color: var(--text);
}

.letter__body p:last-child {
  margin-bottom: 0;
}

.letter__body em {
  font-style: italic;
  color: var(--navy);
}

.letter__body strong {
  font-weight: 600;
  color: var(--navy);
}

/* Der Scroll-Effekt: noch nicht "geschriebene" Wörter stehen blass da.
   Ohne data-js greift die Regel nicht – dann ist alles sofort lesbar. */
html[data-js] .letter__body .letter__w {
  opacity: 0.15;
  transition: opacity 480ms ease;
}

html[data-js] .letter__body .letter__w.is-inked {
  opacity: 1;
}

.letter__sign {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 30px;
}

/* Unterschrift: gefuellte Konturen einer Breitfeder – die Strichstaerke
   wechselt mit der Zugrichtung (Abstriche dick, Aufstriche haarfein).
   Deshalb KEINE stroke-Angaben setzen, die Form steckt in der Fuellung.
   Das "Schreiben" beim Scrollen macht main.js ueber eine clip-path-Blende
   von links nach rechts. Ohne JS steht die Unterschrift sofort da.
   Neu erzeugen: tools/signature.py (siehe dort). */
.letter__sig {
  display: block;
  width: min(304px, 80%);
  height: auto;
  overflow: visible;
  color: var(--gold-deep);
  transform: rotate(-2.2deg);
  transform-origin: left center;
}

.letter__role {
  margin-top: 10px;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.letter__cta {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid rgba(191, 161, 74, 0.2);
}

@media (max-width: 720px) {
  .letter {
    padding: 58px 0 64px;
  }

  .letter__paper {
    padding: 40px 26px 34px;
    transform: none;
  }

  .letter__paper::before {
    left: 13px;
  }

  .letter__head {
    gap: 13px;
    margin-bottom: 22px;
  }

  .letter__avatar {
    width: 52px;
    height: 52px;
  }

  .letter__body p {
    font-size: 0.98rem;
    line-height: 1.8;
  }

  .letter__cta .cta {
    width: 100%;
  }

  .letter__sig {
    width: min(232px, 86%);
  }
}

/* Kein Aufdecken bei reduzierter Bewegung – der Brief steht sofort da.
   Das JS überspringt den Effekt zusätzlich, das hier ist der CSS-Fallback. */
@media (prefers-reduced-motion: reduce) {
  html[data-js] .letter__body .letter__w,
  html[data-js] .letter__body .letter__w.is-inked {
    opacity: 1;
    transition: none;
  }

  .letter__paper,
  .letter__sig {
    transform: none;
  }
}

/* ============================================================
   Video-Testimonials ("Stimmen")
   ============================================================ */

.stories {
  position: relative;
  background:
    radial-gradient(900px 500px at 0% 0%, rgba(249, 226, 181, 0.30), transparent 60%),
    radial-gradient(750px 480px at 100% 100%, rgba(205, 186, 153, 0.18), transparent 60%),
    var(--white);
  padding: 80px 0 88px;
}

.stories__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 48px;
}

.stories__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
  max-width: 1020px;
  margin: 0 auto;
}

/* Gestaffeltes Einblenden der Video-Karten */
.stories__grid .story:nth-child(2) { transition-delay: 0.08s; }
.stories__grid .story:nth-child(3) { transition-delay: 0.08s; }
.stories__grid .story:nth-child(4) { transition-delay: 0.16s; }

.story {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--cream);
  border: 1px solid rgba(191, 161, 74, 0.24);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.story:hover {
  transform: translateY(-5px);
  border-color: rgba(191, 161, 74, 0.5);
  box-shadow: var(--shadow-card);
}

/* Video-Fläche: Button mit Thumbnail, Klick lädt den Vimeo-Player (main.js) */
.story__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--navy-deep);
  cursor: pointer;
  overflow: hidden;
}

.story__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}

.story__media:hover .story__thumb,
.story__media:focus-visible .story__thumb {
  transform: scale(1.05);
}

/* Leichte Navy-Abdunklung, damit der Play-Button sitzt */
.story__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(39, 51, 73, 0.05) 55%, rgba(39, 51, 73, 0.45) 100%);
  pointer-events: none;
}

.story__play {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--cta-grad);
  border: 1.5px solid rgba(253, 251, 247, 0.55);
  color: var(--navy-deep);
  box-shadow: 0 12px 32px rgba(39, 51, 73, 0.4), 0 0 0 0 rgba(191, 161, 74, 0.45);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  animation: play-pulse 2.6s ease-out infinite;
}

.story__play svg {
  margin-left: 4px;
}

.story__media:hover .story__play,
.story__media:focus-visible .story__play {
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: 0 14px 36px rgba(39, 51, 73, 0.45), 0 0 0 12px rgba(191, 161, 74, 0.15);
}

@keyframes play-pulse {
  0%   { box-shadow: 0 12px 32px rgba(39, 51, 73, 0.4), 0 0 0 0 rgba(191, 161, 74, 0.45); }
  70%  { box-shadow: 0 12px 32px rgba(39, 51, 73, 0.4), 0 0 0 18px rgba(191, 161, 74, 0); }
  100% { box-shadow: 0 12px 32px rgba(39, 51, 73, 0.4), 0 0 0 0 rgba(191, 161, 74, 0); }
}

/* Unten links, damit das im Thumbnail eingebaute Siegel (rechts) frei bleibt */
.story__duration {
  position: absolute;
  z-index: 1;
  left: 12px;
  bottom: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(39, 51, 73, 0.72);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(249, 226, 181, 0.35);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--champagne-light);
}

/* Eingesetzter Player (ersetzt den Button nach Klick) */
.story__media--playing {
  cursor: default;
}

.story__media--playing::after {
  content: none;
}

.story__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.story__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 16px;
  padding: 22px 24px 24px;
}

.story__quote {
  margin: 0;
  flex: 1;
  font-family: var(--font-serif);
  font-size: 1.08rem;
  line-height: 1.55;
  font-weight: 300;
  letter-spacing: 0.01em;
  color: var(--navy-deep);
}

.story__person {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 14px;
  border-top: 1px solid rgba(191, 161, 74, 0.28);
}

.story__name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--navy-deep);
}

.story__role {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.stories__cta {
  display: flex;
  justify-content: center;
  margin-top: 44px;
}

/* ============================================================
   Kurz-Bewertungen (Trust-Band, #bewertungen)
   Kompakte 5-Sterne-Karten – dunkle Navy-Fläche als Kontrast
   zwischen Video-Stimmen (weiß) und FAQ (creme).
   ============================================================ */

.reviews {
  position: relative;
  /* clip statt hidden: hidden machte die Sektion zum Scroll-Container und
     hebelte damit den Mobile-Sticky-Karten-Stapel (position: sticky) aus */
  overflow: clip;
  background:
    radial-gradient(820px 460px at 88% 0%, rgba(191, 161, 74, 0.16), transparent 60%),
    radial-gradient(700px 420px at 0% 100%, rgba(205, 186, 153, 0.10), transparent 60%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 60%, #1e2839 100%);
  padding: 64px 0 72px;
  color: var(--cream);
}

/* Karo-Muster wie im Hero – helle Champagner-Linien auf Navy,
   läuft per Maske weich nach unten aus */
.reviews::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(249, 226, 181, 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(249, 226, 181, 0.07) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(ellipse 90% 90% at 50% 0%, #000 20%, transparent 78%);
  mask-image: radial-gradient(ellipse 90% 90% at 50% 0%, #000 20%, transparent 78%);
  pointer-events: none;
}

/* Inhalt über dem Muster halten */
.reviews > .container {
  position: relative;
}

.reviews__head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 34px;
}

/* Bewusst kleiner als .section-title – die Sektion soll kompakt bleiben */
.reviews__title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.45rem, 3vw, 1.9rem);
  line-height: 1.25;
  color: var(--cream);
}

.reviews__accent {
  color: var(--champagne-soft);
}

/* Flex statt Grid: 5 Karten brechen zentriert in 3 + 2 um */
.reviews__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  max-width: 1020px;
  margin: 0 auto;
}

.reviews__grid .review:nth-child(2) { transition-delay: 0.06s; }
.reviews__grid .review:nth-child(3) { transition-delay: 0.12s; }
.reviews__grid .review:nth-child(4) { transition-delay: 0.06s; }
.reviews__grid .review:nth-child(5) { transition-delay: 0.12s; }

.review {
  position: relative;
  flex: 0 1 312px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 22px 22px;
  /* Helle Karte als Kontrast zum dunklen Navy-Band; opaker Verlauf –
     Pflicht für den Mobile-Stapel (nichts scheint durch) */
  background: linear-gradient(165deg, #fffdf8, #f6efe2);
  border: 1px solid rgba(191, 161, 74, 0.45);
  border-radius: var(--radius);
  box-shadow: 0 14px 32px rgba(15, 22, 36, 0.45);
  transition: transform 0.25s ease, border-color 0.25s ease;
}

/* Dekoratives Zitat-Zeichen oben rechts (Gegengewicht zum Avatar links) */
.review::after {
  content: "”";
  position: absolute;
  top: 14px;
  right: 20px;
  font-family: var(--font-serif);
  font-size: 3.1rem;
  line-height: 0.6;
  font-weight: 400;
  color: var(--gold);
  opacity: 0.55;
  pointer-events: none;
}

.review:hover {
  transform: translateY(-4px);
  border-color: rgba(191, 161, 74, 0.75);
}

.review__top {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Deckt Initialen-Platzhalter (span) und späteres rundes Bild (img) ab */
.review__avatar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--champagne-light), var(--champagne-soft));
  border: 1.5px solid rgba(191, 161, 74, 0.55);
  object-fit: cover;
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--navy-deep);
}

.review__person {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.review__name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--navy-deep);
}

.review__role {
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.review__stars {
  display: inline-flex;
  gap: 3px;
  color: var(--gold);
}

.review__quote {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.02rem;
  line-height: 1.5;
  font-weight: 300;
  letter-spacing: 0.01em;
  color: rgba(39, 51, 73, 0.92);
}

@media (max-width: 720px) {
  .reviews {
    padding: 54px 0 60px;
  }

  .reviews__grid {
    gap: 14px;
  }

  .review {
    flex-basis: 100%;
  }
}

/* --- Desktop: Slider statt 3+2-Raster ---
   Eine Kartenzeile mit Scroll-Snap hält die Sektion flach; Pfeile + Punkte
   unter dem Track. Auf Mobile (< 601px) bleiben Spalte/Sticky-Stapel aktiv,
   die Controls sind dort ausgeblendet. JS: setupReviewsSlider in main.js. */

/* Kein Slider auf Mobile: Pfeile/Punkte grundsätzlich verstecken –
   sichtbar nur auf Desktop UND wenn der Track überläuft (has-overflow). */
.reviews__controls {
  display: none;
}

@media (min-width: 601px) {
  .reviews__slider {
    max-width: 1020px;
    margin: 0 auto;
  }

  .reviews__grid {
    flex-wrap: nowrap;
    justify-content: flex-start;
    max-width: none;
    overflow-x: auto;
    /* Nur horizontal scrollen: ohne das explizite hidden würde overflow-y
       auf auto rechnen (CSS-Regel bei overflow-x: auto) – der Track ließ
       sich dann minimal hoch/runter wischen. */
    overflow-y: hidden;
    /* Am Ende des Tracks nicht die Seite bzw. die Zurück-Wischgeste auslösen */
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* Raum für Hover-Lift (oben) und Karten-Schatten (unten) */
    padding: 8px 2px 16px;
  }

  .reviews__grid::-webkit-scrollbar {
    display: none;
  }

  .reviews__slider .review {
    /* 2 Karten pro Ansicht (1 × gap), ab 900px 3 pro Ansicht */
    flex: 0 0 calc((100% - 18px) / 2);
    scroll-snap-align: start;
  }

  /* Reveal im Slider ohne Y-Verschiebung (nur Fade): translateY(26px) ragt
     unten aus dem Scroll-Container heraus – das erzeugte den vertikalen
     Scroll-Overflow und würde jetzt vom overflow-y: hidden beschnitten. */
  html[data-js] .reviews__slider .review[data-scroll-reveal] {
    transform: none;
  }

  .reviews__controls {
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 4px;
  }

  /* Nur zeigen, wenn der Track wirklich überläuft (setzt JS) */
  .reviews__slider.has-overflow .reviews__controls {
    display: flex;
  }

  .reviews__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(191, 161, 74, 0.45);
    background: rgba(249, 226, 181, 0.06);
    color: var(--champagne-soft);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
  }

  .reviews__arrow:hover:not(:disabled) {
    border-color: rgba(191, 161, 74, 0.8);
    background: rgba(249, 226, 181, 0.12);
    color: var(--cream);
  }

  .reviews__arrow:disabled {
    opacity: 0.35;
    cursor: default;
  }

  .reviews__dots {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .reviews__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(249, 226, 181, 0.28);
    cursor: pointer;
    transition: background 0.25s ease, width 0.25s ease;
  }

  .reviews__dot.is-active {
    width: 22px;
    background: var(--gold, #bfa14a);
  }
}

@media (min-width: 900px) {
  .reviews__slider .review {
    /* 3 Karten pro Ansicht (2 × gap = 36px) */
    flex-basis: calc((100% - 36px) / 3);
  }
}

/* ============================================================
   FAQ / Einwände ("Noch nicht ganz überzeugt?")
   ============================================================ */

.faq {
  position: relative;
  background:
    radial-gradient(800px 500px at 0% 0%, rgba(249, 226, 181, 0.3), transparent 60%),
    radial-gradient(700px 450px at 100% 100%, rgba(205, 186, 153, 0.18), transparent 60%),
    var(--cream);
  padding: 76px 0 84px;
}

.faq__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: 56px;
  align-items: start;
}

/* Linke Spalte bleibt beim Scrollen durch die Antworten stehen */
.faq__head {
  position: sticky;
  top: 48px;
}

.faq__sub {
  margin: 0 0 28px;
  font-size: 1rem;
  color: var(--text-muted);
  max-width: 400px;
}

.faq__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.faq__item {
  background: var(--white);
  border: 1px solid rgba(191, 161, 74, 0.22);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.faq__item:hover {
  border-color: rgba(191, 161, 74, 0.45);
}

.faq__item[open] {
  border-color: rgba(191, 161, 74, 0.55);
  box-shadow: var(--shadow-card);
}

.faq__q {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.faq__q::-webkit-details-marker {
  display: none;
}

.faq__q:focus-visible {
  outline: 3px solid rgba(191, 161, 74, 0.6);
  outline-offset: -3px;
  border-radius: var(--radius);
}

/* Goldene Serif-Nummer wie auf der Hauptseite */
.faq__num {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1;
  color: var(--gold-deep);
  opacity: 0.85;
  flex-shrink: 0;
  min-width: 26px;
}

.faq__q-text {
  flex: 1;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--navy-deep);
}

.faq__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--cream-warm);
  border: 1px solid rgba(191, 161, 74, 0.3);
  color: var(--gold-deep);
  flex-shrink: 0;
  transition: transform 0.3s ease, background 0.25s ease;
}

/* Plus dreht sich zum "Schließen-Kreuz" */
.faq__item[open] .faq__icon {
  transform: rotate(45deg);
  background: #fbe9c9;
}

.faq__a {
  padding: 0 22px 22px 64px;
}

.faq__a p {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.7;
  color: var(--text-muted);
}

/* Antwort blendet weich ein */
.faq__item[open] .faq__a {
  animation: faq-open 0.35s cubic-bezier(0.22, 0.9, 0.3, 1);
}

@keyframes faq-open {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   Finale CTA (#anmelden) – kompakte dunkle Box auf hellem Grund:
   Zitat + Freisteller + Verknappung + Countdown + CTA
   ============================================================ */

.finalcta {
  padding: 8px 0 88px;
}

/* Die eigentliche Karte: helle Creme-Fläche mit Gold-Radials */
.finalcta__box {
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  border: 1px solid rgba(191, 161, 74, 0.45);
  background:
    radial-gradient(680px 420px at 78% 88%, rgba(191, 161, 74, 0.14), transparent 62%),
    radial-gradient(520px 340px at 6% 10%, rgba(191, 161, 74, 0.08), transparent 60%),
    linear-gradient(155deg, var(--white) 0%, var(--cream) 45%, var(--cream-warm) 100%);
  color: var(--text);
  padding: 48px 56px 0;
  box-shadow: var(--shadow-card);
}

/* Feines Karo wie im Hero, Navy auf Creme */
.finalcta__box::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(52, 66, 88, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(52, 66, 88, 0.06) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(ellipse 80% 85% at 30% 40%, #000 15%, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 85% at 30% 40%, #000 15%, transparent 75%);
  pointer-events: none;
}

.finalcta__glow {
  position: absolute;
  right: -6%;
  bottom: -10%;
  width: 420px;
  height: 340px;
  background: radial-gradient(closest-side, rgba(249, 226, 181, 0.5), transparent 70%);
  filter: blur(55px);
  animation: glow-drift 14s ease-in-out infinite alternate;
  pointer-events: none;
}

.finalcta__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  align-items: end;
  gap: 24px;
}

/* Copy-Spalte – unten Luft, weil das Bild bündig abschließt */
.finalcta__copy {
  padding: 0 0 48px;
}

/* Das eine große Statement – Serif wie im Beispiel */
.finalcta__quote {
  margin: 14px 0 18px;
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 2.3vw, 1.85rem);
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--navy-deep);
  text-wrap: balance;
}

.finalcta__quote-accent {
  color: var(--gold-deep);
  font-weight: 500;
}

.finalcta__person {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 22px;
  padding-left: 16px;
  border-left: 2px solid var(--gold);
}

.finalcta__person-name {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--navy-deep);
}

.finalcta__person-role {
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Verknappung + Countdown */
.finalcta__urgency {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 24px;
}

.finalcta__limit {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  border: 1px solid rgba(191, 161, 74, 0.5);
  border-radius: 999px;
  background: rgba(191, 161, 74, 0.1);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--navy);
}

.finalcta__limit svg {
  color: var(--gold-deep);
  flex-shrink: 0;
}

.finalcta__limit strong {
  color: var(--navy-deep);
  font-weight: 600;
}

/* Der Countdown in der Box nutzt die helle Standard-Variante;
   nur der untere Abstand entfällt (kommt vom Urgency-Wrapper) */
.finalcta__urgency .countdown {
  margin-bottom: 0;
}

/* Bild-Spalte: Freisteller schließt bündig mit Box-Unterkante ab und
   läuft rechts randbündig aus (kaschiert die Knie-Schnittkante) */
.finalcta__visual {
  position: relative;
  align-self: end;
  display: flex;
  justify-content: flex-end;
  margin-right: -56px;
}

.finalcta__visual::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 360px;
  height: 360px;
  max-width: 90vw;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(191, 161, 74, 0.28), transparent 72%);
  filter: blur(30px);
  pointer-events: none;
}

/* Breite = native Bildbreite (304px) – nicht hochskalieren, Quellbild ist klein */
.finalcta__photo {
  position: relative;
  width: min(304px, 100%);
  height: auto;
  filter: drop-shadow(0 20px 40px rgba(52, 66, 88, 0.28));
}

/* ============================================================
   Anmelde-Popup (Modal)
   ============================================================ */

.modal {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(440px, calc(100vw - 32px));
  width: 100%;
}

.modal::backdrop {
  background: rgba(39, 51, 73, 0.55);
  backdrop-filter: blur(3px);
}

.modal__card {
  position: relative;
  background: var(--white);
  border-radius: 20px;
  padding: 32px 30px 28px;
  box-shadow: 0 30px 80px rgba(39, 51, 73, 0.35);
}

.modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(52, 66, 88, 0.06);
  color: var(--navy);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}

.modal__close:hover {
  background: rgba(52, 66, 88, 0.12);
}

.modal__title {
  margin: 0 0 6px;
  font-family: var(--font-serif);
  font-size: 1.55rem;
  font-weight: 400;
  line-height: 1.25;
  color: var(--navy-deep);
  padding-right: 28px;
}

.modal__title .accent {
  color: var(--gold-deep);
  font-weight: 500;
}

.modal__sub {
  margin: 0 0 22px;
  font-size: 0.88rem;
  color: var(--text-muted);
}

.form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Labels sind bewusst unsichtbar (Kundenwunsch: minimalere Formulare) –
   die Beschriftung steht im Placeholder. Sie bleiben aber im DOM und per
   `for` verknüpft, damit Screenreader und Autofill das Feld weiter kennen.
   Deshalb kein `display:none`, sondern aus dem Bild geclippt.
   Wer ein Feld ergänzt: Placeholder-Text nicht vergessen, sonst steht dort
   eine leere Box. */
.form label,
.quiz__fields label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.form input,
.form select,
.quiz__fields input,
.quiz__fields select {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--navy-deep);
  background: var(--cream);
  border: 1px solid rgba(52, 66, 88, 0.16);
  border-radius: 10px;
  padding: 12px 14px;
  width: 100%;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form input:focus,
.form select:focus,
.quiz__fields input:focus,
.quiz__fields select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(191, 161, 74, 0.18);
  background: var(--white);
}

.form input::placeholder,
.quiz__fields input::placeholder {
  color: #9aa4b2;
}

/* Validierungsfehler */
.form input.is-invalid,
.quiz__fields input.is-invalid {
  border-color: #cf4a40;
  background: #fff6f5;
}

.form__error {
  margin: 5px 0 0;
  font-size: 0.75rem;
  font-weight: 500;
  color: #c23b32;
}

/* Validierungsfehler */
.form input.is-invalid,
.quiz__fields input.is-invalid {
  border-color: #c0392b;
  background: #fdf3f2;
}

.form input.is-invalid:focus,
.quiz__fields input.is-invalid:focus {
  border-color: #c0392b;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.15);
}

.form__error {
  margin: 5px 0 0;
  font-size: 0.76rem;
  line-height: 1.4;
  color: #c0392b;
}

/* Telefon: Ländervorwahl + Nummer in einer Zeile */
.phone-group {
  display: flex;
  gap: 8px;
}

.phone-group select {
  flex: 0 0 118px;
  padding-right: 8px;
}

.phone-group input {
  flex: 1;
  min-width: 0;
}

.form .cta {
  width: 100%;
  margin-top: 6px;
  padding: 15px 20px;
}

.form__note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 2px 0 0;
  font-size: 0.76rem;
  color: var(--text-muted);
  text-align: center;
}

.form__note svg {
  color: var(--gold-deep);
  flex-shrink: 0;
}

/* ---- Honeypot ----
   Bewusst kein display:none und kein hidden-Attribut: Beides erkennen
   viele Spam-Bots und lassen das Feld dann leer. Aus dem Sichtfeld
   geschoben füllen sie es aus – und werden serverseitig verworfen. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- Sendezustand ----
   Zwischen Klick und Weiterleitung wartet die Seite kurz auf das CRM.
   Ohne sichtbares Feedback wirkt der Button in dieser Zeit kaputt. */
.cta.is-sending {
  opacity: 0.72;
  cursor: progress;
}

.cta.is-sending .cta__label {
  opacity: 0.85;
}

.cta:disabled {
  pointer-events: none;
}

/* ============================================================
   Danke-Seite
   ============================================================ */

/* ---- Personalisierung ----
   [data-name-if] ist standardmäßig aus und wird nur sichtbar, wenn
   main.js einen plausiblen Vornamen gefunden hat (?vorname=…). */
[data-name-if] {
  display: none;
}

.has-name [data-name-if] {
  display: inline;
}

/* ---- Konfetti beim Ankommen ----
   Das Canvas haengt main.js (setupConfetti) auf Seiten mit [data-confetti]
   ein und raeumt es nach dem letzten Schnipsel selbst wieder ab. Liegt
   ueber allem (auch ueber der Sticky-Leiste, z-index 60), faengt aber
   keine Klicks ab. Das Modal ist ein <dialog> und liegt im Top-Layer –
   also ohnehin darueber. */
.confetti {
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
}

/* ---- Hero der Danke-Seite ----
   Dreiteiliges Grid: Text und Termin-Block links untereinander,
   das Video rechts über beide Zeilen. Auf Mobile fällt alles in eine
   Spalte – das Video liegt dann per DOM-Reihenfolge direkt unter der
   Überschrift, also noch above the fold. */
.dhero__inner {
  position: relative;
  display: grid;
  gap: 12px 44px;
  padding-top: 30px;
  /* Knapp gehalten, damit der Kalender-Block direkt hinter dem Video sitzt.
     Seit 25.08.2026 stehen hier weder Termin-Karte noch Countdown mehr, ohne
     das kuerzere Polster bliebe unter dem CTA eine leere Flaeche stehen. */
  padding-bottom: 28px;
}

.badge-done {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--white);
  border: 1px solid rgba(191, 161, 74, 0.5);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy);
  box-shadow: 0 4px 16px rgba(191, 161, 74, 0.16);
}

.badge-done svg {
  color: var(--gold-deep);
  flex-shrink: 0;
}

.dhero h1 {
  margin: 18px 0 14px;
  font-size: clamp(1.95rem, 3.2vw, 2.75rem);
}

/* Glückwunsch-Zeile über der Headline. Steht immer – der Vorname darin
   (data-name-if) erscheint nur, wenn einer übergeben wurde. */
.dhero__hello {
  display: block;
  margin-bottom: 10px;
  font-size: 0.62em;
  color: var(--gold-deep);
}

.dhero__lead {
  max-width: 52ch;
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--text-muted);
}

.dhero__lead strong {
  font-weight: 600;
  color: var(--navy);
}

/* Organisatorischer Hinweis – gleiche Schriftgroesse wie der Lead
   (Kundenwunsch), nur der Ton bleibt zurueckhaltend. */
.dhero__note {
  max-width: 52ch;
  margin: 12px 0 0;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--text-muted);
}

.dhero__meta {
  padding-bottom: 4px;
}

/* Termin-Zeile */
.dhero__when {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  margin: 22px 0 18px;
  padding: 13px 20px 13px 16px;
  background: var(--white);
  border: 1px solid rgba(191, 161, 74, 0.32);
  border-left: 3px solid var(--gold);
  border-radius: 12px;
  box-shadow: 0 6px 22px rgba(52, 66, 88, 0.07);
}

.dhero__when-icon {
  display: flex;
  color: var(--gold-deep);
  flex-shrink: 0;
}

.dhero__when-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dhero__when-text strong {
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--navy-deep);
}

.dhero__when-text span {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.dhero__cta {
  margin-top: 4px;
}

/* Video-Spalte */
.dhero__video {
  position: relative;
  align-self: center;
}

/* Bewusst kein Flex: Der personalisierte Teil (" für Dich, Anna") würde
   sonst zu einem eigenen Flex-Item und in eine neue Zeile rutschen. */
.dhero__video-label {
  margin: 0 0 10px;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--navy);
}

.dhero__video-dot {
  display: inline-block;
  vertical-align: middle;
  width: 8px;
  height: 8px;
  margin: -2px 9px 0 0;
  border-radius: 50%;
  background: var(--live-red);
  box-shadow: 0 0 0 4px rgba(226, 84, 74, 0.16);
}

.dhero__video-note {
  margin: 12px 0 0;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--text-muted);
}

/* ---- Video-Player (Click-to-Play) ----
   Eigenes Präfix, weil die Danke-Seite 16:9- und 1:1-Videos mischt.
   main.js baut beim Klick .vplayer__media--playing + .vplayer__iframe. */
.vplayer {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: var(--navy-deep);
  border: 1px solid rgba(191, 161, 74, 0.35);
  box-shadow: 0 18px 46px rgba(39, 51, 73, 0.24);
}

.vplayer__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  background: var(--navy-deep);
  cursor: pointer;
  overflow: hidden;
}

/* Die Antwort-Videos laufen bewusst im Quadrat (Entscheidung 24.08.2026).
   Sie liegen bei Vimeo als 1:1 vor, alle fuenf 640x640, geprueft ueber die
   oEmbed-API. Der Rahmen folgt dem Quellformat, damit Vimeo nichts zentrieren
   muss und oben wie unten kein Vorschaubild durchscheint.
   Kein Provisorium: nicht auf 9 / 16 zurueckstellen. */
.vplayer--square .vplayer__media {
  aspect-ratio: 1 / 1;
}

.vplayer__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.vplayer__media:hover .vplayer__thumb,
.vplayer__media:focus-visible .vplayer__thumb {
  transform: scale(1.04);
}

.vplayer__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(39, 51, 73, 0.5), transparent 45%);
  pointer-events: none;
}

.vplayer__media:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: -3px;
}

.vplayer__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 66px;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 5px;
  border-radius: 50%;
  background: var(--cta-grad);
  color: var(--navy-deep);
  box-shadow: 0 8px 26px rgba(39, 51, 73, 0.45);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  z-index: 1;
}

.vplayer--square .vplayer__play {
  width: 54px;
  height: 54px;
}

.vplayer__media:hover .vplayer__play,
.vplayer__media:focus-visible .vplayer__play {
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: 0 12px 32px rgba(39, 51, 73, 0.55);
}

.vplayer__duration {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 4px 9px;
  border-radius: 6px;
  background: rgba(39, 51, 73, 0.82);
  color: var(--champagne-light);
  font-size: 0.72rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  z-index: 1;
}

.vplayer__media--playing {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.vplayer--square .vplayer__media--playing {
  aspect-ratio: 1 / 1;
}

.vplayer__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Ton-Schaltflaeche ueber dem stumm gestarteten Autoplay-Video.
   Browser erlauben Autoplay nur ohne Ton – der Knopf deckt deshalb die
   ganze Videoflaeche ab: ein Tipp irgendwo schaltet den Ton ein, main.js
   entfernt ihn danach und gibt die Vimeo-Steuerung frei. */
.vplayer__unmute,
.story__unmute {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 12px 16px;
  border: 0;
  background: linear-gradient(to top, rgba(39, 51, 73, 0.6), rgba(39, 51, 73, 0) 45%);
  cursor: pointer;
  z-index: 2;
}

.vplayer__unmute-pill,
.story__unmute-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--cta-grad);
  color: var(--navy-deep);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 10px 26px rgba(39, 51, 73, 0.45);
  animation: unmute-pulse 2.6s ease-in-out infinite;
}

.vplayer__unmute:hover .vplayer__unmute-pill,
.vplayer__unmute:focus-visible .vplayer__unmute-pill,
.story__unmute:hover .story__unmute-pill,
.story__unmute:focus-visible .story__unmute-pill {
  animation: none;
  transform: scale(1.06);
}

.vplayer__unmute:focus-visible,
.story__unmute:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: -3px;
}

@keyframes unmute-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 10px 26px rgba(39, 51, 73, 0.45);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 14px 34px rgba(191, 161, 74, 0.5);
  }
}

/* ---- Trust-Band unter dem Hero ---- */
.trustrow {
  background: var(--white);
  border-top: 1px solid rgba(191, 161, 74, 0.2);
  border-bottom: 1px solid rgba(191, 161, 74, 0.2);
}

.trustrow__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px 34px;
  padding-top: 20px;
  padding-bottom: 20px;
}

.trustrow__seal {
  width: 62px;
  height: 62px;
  object-fit: contain;
  border-radius: 8px;
  flex-shrink: 0;
}

.trustrow__facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px 30px;
}

.trustfact {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 4px;
}

.trustfact__num {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.1;
  color: var(--gold-deep);
}

.trustfact__label {
  font-size: 0.76rem;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}

/* ---- Die drei nächsten Schritte ---- */
.steps {
  padding: 68px 0 74px;
  background:
    radial-gradient(700px 400px at 80% 0%, rgba(249, 226, 181, 0.32), transparent 65%),
    var(--cream);
}

.steps__head {
  text-align: center;
  margin-bottom: 26px;
}

/* Fortschritt über den drei Karten – macht sichtbar, was noch offen ist */
.steps__progress {
  max-width: 380px;
  margin: 0 auto 34px;
  text-align: center;
}

.steps__bar {
  height: 7px;
  border-radius: 999px;
  background: rgba(52, 66, 88, 0.1);
  overflow: hidden;
}

.steps__bar-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: var(--cta-grad);
  transition: width 0.45s cubic-bezier(0.22, 0.9, 0.3, 1);
}

.steps__count {
  margin: 10px 0 0;
  font-size: 0.84rem;
  color: var(--text-muted);
}

.steps__count strong {
  font-weight: 600;
  color: var(--gold-deep);
}

.steps__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 860px;
  margin-inline: auto;
}

.step {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 20px;
  padding: 26px 30px;
  background: var(--white);
  border: 1px solid rgba(191, 161, 74, 0.24);
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.step:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

.step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(150deg, #3e4f69 0%, #273349 100%);
  color: var(--champagne-light);
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 500;
  flex-shrink: 0;
  transition: background 0.3s ease, color 0.3s ease;
}

/* Erledigt-Haken oben rechts – erscheint erst nach dem Klick */
.step__check {
  position: absolute;
  top: 18px;
  right: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--cta-grad);
  color: var(--navy-deep);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.34, 1.6, 0.64, 1);
}

.step.is-done {
  border-color: rgba(191, 161, 74, 0.6);
  background: linear-gradient(180deg, var(--cream-warm) 0%, var(--white) 60%);
}

.step.is-done .step__check {
  opacity: 1;
  transform: scale(1);
}

.step.is-done .step__num {
  background: var(--cta-grad);
  color: var(--navy-deep);
}

.step__title {
  margin: 2px 0 8px;
  padding-right: 34px;
  font-family: var(--font-serif);
  font-size: 1.28rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--navy-deep);
}

.step__text {
  margin: 0 0 10px;
  font-size: 0.94rem;
  line-height: 1.65;
  color: var(--text-muted);
}

.step__meta {
  margin: 0 0 16px;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.step__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ---- Buttons: Kalender + WhatsApp ---- */
.btn-cal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 11px;
  background: var(--white);
  border: 1px solid rgba(52, 66, 88, 0.18);
  color: var(--navy-deep);
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.btn-cal svg {
  color: var(--gold-deep);
  flex-shrink: 0;
}

.btn-cal:hover {
  transform: translateY(-2px);
  border-color: var(--gold);
  box-shadow: 0 8px 20px rgba(52, 66, 88, 0.12);
}

.btn-cal:focus-visible {
  outline: 3px solid rgba(191, 161, 74, 0.6);
  outline-offset: 2px;
}

.btn-cal--solid {
  background: linear-gradient(150deg, #3e4f69 0%, #273349 100%);
  border-color: transparent;
  color: var(--champagne-light);
}

.btn-cal--solid svg {
  color: var(--champagne-light);
}

.btn-wa {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 11px;
  background: linear-gradient(150deg, var(--wa) 0%, var(--wa-deep) 100%);
  border: 0;
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(18, 140, 126, 0.28);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-wa:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(18, 140, 126, 0.38);
}

.btn-wa:focus-visible {
  outline: 3px solid rgba(18, 140, 126, 0.55);
  outline-offset: 3px;
}

.btn-wa--lg {
  padding: 16px 30px;
  font-size: 1rem;
}

/* ---- Antwort-Videos (dunkles Band, damit die Videos herausstechen) ---- */
.answers {
  position: relative;
  padding: 66px 0 72px;
  background:
    radial-gradient(760px 420px at 15% 0%, rgba(93, 108, 123, 0.34), transparent 62%),
    var(--navy-deep);
  overflow: clip;
}

.answers__head {
  text-align: center;
  margin-bottom: 36px;
}

.answers__sub {
  max-width: 560px;
  margin: 0 auto;
  font-size: 0.98rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.72);
}

.answers__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
}

.answer {
  display: flex;
  flex-direction: column;
}

.answer .vplayer {
  border-color: rgba(191, 161, 74, 0.45);
  box-shadow: 0 14px 34px rgba(15, 22, 35, 0.45);
}

.answer__q {
  margin: 14px 2px 0;
  font-family: var(--font-serif);
  font-size: 1.02rem;
  font-weight: 400;
  line-height: 1.35;
  text-align: center;
  color: var(--champagne-light);
}

/* ---- Abschluss: WhatsApp-Community (helle Box, kein dunkles Band) ---- */
.wacta {
  padding: 68px 0 76px;
  background:
    radial-gradient(680px 380px at 20% 100%, rgba(205, 186, 153, 0.26), transparent 62%),
    var(--cream);
}

.wacta__box {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px;
  max-width: 940px;
  margin: 0 auto;
  padding: 40px 44px 40px;
  background: linear-gradient(160deg, var(--white) 0%, var(--cream-warm) 100%);
  border: 1px solid rgba(191, 161, 74, 0.42);
  border-radius: 26px;
  box-shadow: 0 20px 54px rgba(52, 66, 88, 0.13);
  overflow: hidden;
}

.wacta__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px;
  border-radius: 999px;
  background: rgba(37, 211, 102, 0.12);
  border: 1px solid rgba(18, 140, 126, 0.3);
  color: var(--wa-deep);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.wacta__quote {
  margin: 18px 0 12px;
  max-width: 30ch;
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 2.3vw, 1.85rem);
  font-weight: 400;
  line-height: 1.32;
  color: var(--navy-deep);
}

.wacta__text {
  max-width: 46ch;
  margin: 0 0 22px;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--text-muted);
}

.wacta__signoff {
  margin: 20px 0 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.wacta__sign {
  display: block;
  margin-top: 4px;
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--gold-deep);
}

/* Freisteller läuft unten rechts randbündig aus der Box –
   nicht über 304px hochskalieren (Originalbild ist klein). */
.wacta__img {
  width: 244px;
  max-width: 100%;
  height: auto;
  align-self: end;
  margin: 0 -44px -40px 0;
  filter: drop-shadow(0 14px 26px rgba(52, 66, 88, 0.2));
}

/* ============================================================
   Footer (minimal, rechtlich notwendig)
   ============================================================ */

.footer {
  background: var(--navy-deep);
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.85rem;
  font-weight: 400;
}

.footer__disclaimer {
  padding-top: 26px;
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.55);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding-bottom: 18px;
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 18px;
  padding-bottom: 22px;
}

.footer a {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  margin-left: 18px;
}

.footer a:hover {
  color: var(--champagne-light);
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 960px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .hero__copy {
    padding-top: 36px;
    padding-bottom: 40px;
    text-align: center;
  }

  .hero__sub {
    margin-left: auto;
    margin-right: auto;
  }

  .hero__meta,
  .hero__trust {
    justify-content: center;
  }

  .hero__trust {
    text-align: left;
  }

  .hero__visual {
    margin-top: 0;
    padding-top: 8px;
  }

  .hero__photo {
    position: relative;
    bottom: auto;
    height: auto;
    margin: 0;
    width: 100%;
    max-width: min(360px, 88%);
  }

  .hero__chart {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    width: 108%;
    max-width: 560px;
  }

  .float-card {
    left: 8px;
    bottom: 24px;
    padding: 11px 16px;
  }

  .float-card--investors {
    left: auto;
    right: 8px;
    bottom: auto;
    top: 10px;
  }

  .float-card__avatars img {
    width: 32px;
    height: 32px;
  }

  .topbar__date {
    display: none;
  }

  .benefits {
    padding: 56px 0 64px;
  }

  .benefits__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  /* Über Alexandra: einspaltig, Bild oben */
  .about {
    padding: 60px 0 68px;
  }

  /* Video-Testimonials: einspaltig, Karten zentriert */
  .stories {
    padding: 56px 0 64px;
  }

  .stories__grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 560px;
    margin: 0 auto;
    gap: 22px;
  }

  /* Einspaltig braucht keine Staffelung */
  .stories__grid .story {
    transition-delay: 0s;
  }

  .about__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .about__visual {
    position: relative;
    top: 0;
    max-width: 440px;
    margin: 0 auto;
  }

  .about__frame::before {
    inset: 14px -12px -14px 12px;
  }

  .about__signature {
    right: -6px;
    bottom: 20px;
  }

  /* FAQ: einspaltig, Kopf zentriert über der Liste */
  .faq {
    padding: 56px 0 64px;
  }

  .faq__inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .faq__head {
    position: static;
    text-align: center;
  }

  .faq__sub {
    margin-left: auto;
    margin-right: auto;
  }

  .faq__cta {
    display: flex;
    justify-content: center;
  }

  /* Finale CTA: einspaltig, Bild unten bündig wie im Desktop */
  .finalcta {
    padding-bottom: 64px;
  }

  .finalcta__box {
    padding: 36px 26px 0;
    border-radius: 20px;
  }

  .finalcta__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .finalcta__copy {
    padding-bottom: 0;
    text-align: center;
  }

  .finalcta__person {
    align-items: center;
    padding-left: 0;
    border-left: 0;
  }

  .finalcta__person::after {
    content: "";
    width: 54px;
    height: 2px;
    margin-top: 10px;
    background: var(--gold);
  }

  .finalcta__urgency {
    align-items: center;
  }

  .finalcta__urgency .countdown {
    justify-content: center;
  }

  .finalcta__visual {
    margin-right: -26px;
  }

  .finalcta__photo {
    width: min(260px, 78%);
  }
}

@media (max-width: 600px) {
  /* Hero kompakt: CTA-Button soll auch auf kleineren iPhones (< iPhone Max)
     ohne Scrollen sichtbar sein (Kundenfeedback) – schlankere Topbar, engere
     Abstände, kleinere Headline und CTA per order vor den Countdown gezogen */
  .topbar__inner {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .brand__logo {
    width: 40px;
    height: 38px;
  }

  .brand__name {
    font-size: 1.16rem;
  }

  .brand__claim {
    font-size: 0.56rem;
  }

  .hero__copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 20px;
    padding-bottom: 34px;
  }

  .badge-live {
    padding: 7px 15px;
    font-size: 0.72rem;
  }

  .hero h1 {
    margin: 15px 0 12px;
    font-size: clamp(1.66rem, 7vw, 2.1rem);
  }

  .hero h1 .subline {
    margin-top: 9px;
  }

  .hero__sub {
    margin-bottom: 16px;
    font-size: 0.95rem;
  }

  .hero__meta {
    margin-bottom: 18px;
  }

  /* CTA direkt nach den Chips, Countdown + Trust-Zeile dahinter */
  .hero__copy .countdown {
    order: 1;
    margin-top: 20px;
    margin-bottom: 0;
  }

  .hero__copy .hero__trust {
    order: 2;
  }

  /* Vorteile: einspaltig, kompaktere Karten */
  .benefits__grid {
    grid-template-columns: 1fr;
  }

  .benefit {
    padding: 24px 22px 22px;
  }

  /* Einspaltig braucht keine Staffelung */
  .benefits__grid .benefit {
    transition-delay: 0s;
  }

  /* Über Alexandra: Fakten einspaltig, Zitat kompakter */
  .about__facts {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .about__quote p {
    font-size: 1.1rem;
  }

  .about__lead {
    font-size: 1.04rem;
  }

  .about__signature-quote {
    font-size: 1.1rem;
  }

  /* Video-Testimonials: kompaktere Quote-Karte */
  .story__body {
    padding: 18px 20px 20px;
  }

  .story__quote {
    font-size: 1.02rem;
  }

  /* Chips kompakt in einer Zeile: Langtexte ausblenden */
  .chip__opt {
    display: none;
  }

  .hero__meta {
    gap: 7px;
    flex-wrap: nowrap;
    justify-content: center;
  }

  .chip {
    padding: 7px 11px;
    font-size: 0.79rem;
    gap: 5px;
  }

  .chip svg {
    width: 13px;
    height: 13px;
  }

  /* Countdown: Label über den Kacheln, alle vier Kacheln in einer Zeile */
  .countdown {
    justify-content: center;
  }

  .countdown__label {
    flex-basis: 100%;
    text-align: center;
    margin-right: 0;
    margin-bottom: 2px;
  }

  .countdown__tile {
    min-width: 52px;
    padding: 6px 8px 5px;
  }

  .countdown__num {
    font-size: 1.05rem;
  }

  /* FAQ: kompaktere Karten, Antwort bündig unter der Frage */
  .faq__q {
    padding: 16px 16px;
    gap: 12px;
  }

  .faq__q-text {
    font-size: 0.94rem;
  }

  .faq__num {
    min-width: 22px;
    font-size: 1.05rem;
  }

  .faq__icon {
    width: 30px;
    height: 30px;
  }

  .faq__a {
    padding: 0 16px 18px 50px;
  }
}

/* Sehr schmale Displays (z. B. iPhone SE/mini, 375px): Chips weiter
   verdichten, damit alle drei in einer Zeile bleiben */
@media (max-width: 400px) {
  .hero__meta {
    gap: 5px;
  }

  .chip {
    padding: 6px 8px;
    font-size: 0.74rem;
    gap: 4px;
  }

  .chip svg {
    width: 12px;
    height: 12px;
  }
}

/* Niedrige Viewports (kleinere iPhones mit sichtbarer Safari-Leiste):
   Hero weiter stauchen, damit der CTA-Button ohne Scrollen sichtbar ist */
@media (max-width: 600px) and (max-height: 700px) {
  .hero__copy {
    padding-top: 14px;
  }

  .badge-live {
    font-size: 0.68rem;
    padding: 6px 13px;
  }

  .hero h1 {
    margin-top: 12px;
    font-size: clamp(1.5rem, 6.4vw, 1.9rem);
  }

  .hero__sub {
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 14px;
  }

  .hero__meta {
    margin-bottom: 14px;
  }
}

/* Mobile: Karten-Stapel in der Vorteile-Sektion.
   Jede Karte klebt beim Scrollen unter der Viewport-Oberkante, die nächste
   schiebt sich darüber; JS skaliert/dimmt die überdeckte Karte (Tiefen-Effekt).
   Flex statt Grid: in Grid wäre die Grid-Zelle der Containing Block und
   position: sticky hätte keinen Bewegungsspielraum. */
@media (max-width: 600px) and (prefers-reduced-motion: no-preference) {
  html[data-js] .benefits__grid {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  html[data-js] .benefits__grid .benefit {
    position: sticky;
    top: calc(16px + var(--stack-i, 0) * 12px);
    transform-origin: center top;
    /* Stapel-Effekt ersetzt hier die Scroll-Reveal-Animation */
    opacity: 1;
    transform: none;
    transition: none;
    box-shadow: 0 -14px 30px rgba(52, 66, 88, 0.12);
    will-change: transform, filter;
  }

  html[data-js] .benefits__grid .benefit:nth-child(2) { --stack-i: 1; }
  html[data-js] .benefits__grid .benefit:nth-child(3) { --stack-i: 2; }
  html[data-js] .benefits__grid .benefit:nth-child(4) { --stack-i: 3; }
  html[data-js] .benefits__grid .benefit:nth-child(5) { --stack-i: 4; }
  html[data-js] .benefits__grid .benefit:nth-child(6) { --stack-i: 5; }
}

/* Mobile: gleicher Karten-Stapel für die Kurz-Bewertungen (#bewertungen).
   Mechanik identisch zur Vorteile-Sektion, JS: setupCardStack in main.js. */
@media (max-width: 600px) and (prefers-reduced-motion: no-preference) {
  html[data-js] .reviews__grid {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 16px;
  }

  html[data-js] .reviews__grid .review {
    position: sticky;
    top: calc(16px + var(--stack-i, 0) * 12px);
    transform-origin: center top;
    /* Stapel-Effekt ersetzt hier die Scroll-Reveal-Animation */
    opacity: 1;
    transform: none;
    transition: none;
    box-shadow: 0 -14px 30px rgba(15, 22, 36, 0.45);
    will-change: transform, filter;
  }

  html[data-js] .reviews__grid .review:nth-child(2) { --stack-i: 1; }
  html[data-js] .reviews__grid .review:nth-child(3) { --stack-i: 2; }
  html[data-js] .reviews__grid .review:nth-child(4) { --stack-i: 3; }
  html[data-js] .reviews__grid .review:nth-child(5) { --stack-i: 4; }
}

@media (max-width: 480px) {
  .cta {
    width: 100%;
    padding: 16px 20px;
  }

  /* Die kompakte Variante bleibt auch auf schmalen Screens kompakt –
     sie ist eine Sprungmarke, kein Formular-Abschluss. */
  .cta--sm {
    width: auto;
    max-width: 100%;
    padding: 12px 24px 11px;
  }

  .float-card__sub {
    display: none;
  }

  .brand__name {
    font-size: 1.1rem;
  }

  .brand__logo {
    width: 40px;
    height: 38px;
  }

  .modal__card {
    padding: 26px 20px 22px;
  }
}

/* ============================================================
   Reduzierte Bewegung: alle dekorativen Animationen aus
   ============================================================ */

/* ---------- Sticky-CTA (nur Mobile) ----------
   Fixe Anmelde-Leiste am unteren Rand. Wird per JS (.is-visible) eingeblendet,
   sobald der Hero-CTA nach oben aus dem Viewport gescrollt ist, und wieder
   ausgeblendet, sobald der Footer sichtbar wird (verdeckt sonst Impressum). */
.sticky-cta {
  display: none;
}

@media (max-width: 720px) {
  .sticky-cta {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    /* Weicher Verlauf statt harter Kante – Seite bleibt darunter klickbar */
    background: linear-gradient(to top, rgba(253, 251, 247, 0.97) 55%, rgba(253, 251, 247, 0));
    pointer-events: none;
    visibility: hidden;
    transform: translateY(110%);
    transition: transform 0.3s ease, visibility 0.3s ease;
  }

  .sticky-cta.is-visible {
    visibility: visible;
    transform: none;
  }

  .sticky-cta__btn {
    pointer-events: auto;
    width: 100%;
    padding: 13px 24px 12px;
    border-radius: 12px;
    box-shadow:
      0 10px 26px rgba(39, 51, 73, 0.35),
      0 3px 12px rgba(191, 161, 74, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.14);
  }

  .sticky-cta__btn .cta__label {
    font-size: 1.05rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  .float-card {
    animation: none;
    opacity: 1;
  }

  html[data-js] [data-scroll-reveal] {
    transition: none;
    opacity: 1;
    transform: none;
  }

  .hero__glow,
  .about__glow,
  .hero__sparkles span,
  .cta::after,
  .badge-live__dot,
  .story__play {
    animation: none;
  }

  .story__thumb,
  .story__play {
    transition: none;
  }

  .faq__item[open] .faq__a {
    animation: none;
  }

  .faq__icon {
    transition: none;
  }

  .hero h1 .accent {
    animation: none;
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--gold-deep);
  }
}

/* ============================================================
   Responsive: Danke-Seite
   ============================================================ */

/* Desktop: Text + Termin links untereinander, Video rechts daneben
   über beide Zeilen. Darunter greift die einspaltige Reihenfolge
   aus dem DOM (Text → Video → Termin/CTA). */
@media (min-width: 961px) {
  .dhero__inner {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  }

  .dhero__copy {
    grid-column: 1;
    grid-row: 1;
  }

  .dhero__meta {
    grid-column: 1;
    grid-row: 2;
  }

  .dhero__video {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

@media (max-width: 960px) {
  .dhero__video {
    margin: 26px 0 2px;
  }

  .answers__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Freisteller unter den Text statt daneben */
  .wacta__box {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
    padding: 36px 30px 0;
  }

  .wacta__quote,
  .wacta__text {
    max-width: 100%;
  }

  .wacta__img {
    width: 210px;
    margin: 12px 0 0;
  }
}

@media (max-width: 720px) {
  .answers__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

@media (max-width: 600px) {
  .dhero__inner {
    padding-top: 22px;
    padding-bottom: 40px;
  }

  .dhero h1 {
    margin: 14px 0 12px;
    font-size: clamp(1.66rem, 7vw, 2.1rem);
  }

  .dhero__lead {
    font-size: 0.95rem;
  }

  .dhero__note {
    font-size: 0.95rem;
  }

  /* Der personalisierte Zusatz (" fuer Dich, Anna") wuerde das Label auf zwei
     Zeilen zwingen. Auf Mobile bleibt deshalb nur der Kernsatz stehen –
     gleiches Prinzip wie .chip__opt bei den Meta-Chips. */
  .dhero__video-label {
    font-size: 0.76rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }

  .has-name .dhero__video-label [data-name-if] {
    display: none;
  }

  .dhero__when {
    display: flex;
    margin: 18px 0 16px;
    padding: 12px 16px 12px 13px;
  }

  .dhero__cta {
    display: flex;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }

  .dhero__video-note {
    font-size: 0.8rem;
  }

  .steps {
    padding: 52px 0 56px;
  }

  /* Nummer über den Text statt daneben – schafft Breite für die Buttons */
  .step {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 22px 20px;
  }

  .step__num {
    width: 38px;
    height: 38px;
    font-size: 1.1rem;
    margin-bottom: 14px;
  }

  .step__check {
    top: 22px;
    right: 18px;
  }

  .step__title {
    font-size: 1.14rem;
    padding-right: 30px;
  }

  .step__actions .btn-cal {
    flex: 1 1 auto;
    justify-content: center;
  }

  .answers {
    padding: 52px 0 56px;
  }

  .answer__q {
    font-size: 0.9rem;
  }

  .wacta {
    padding: 52px 0 56px;
  }

  .btn-wa--lg {
    width: 100%;
    justify-content: center;
    padding: 15px 20px;
  }

  /* Die drei Fakten müssen in EINE Reihe passen (Kundenwunsch). Deshalb feste
     Drittel-Spalten ohne Umbruch – lange Labels brechen innerhalb ihrer Spalte
     statt den vierten Fakt in eine zweite Reihe zu schieben. */
  .trustrow__facts {
    flex-wrap: nowrap;
    gap: 10px;
    width: 100%;
  }

  .trustfact {
    flex: 1 1 0;
    min-width: 0;
    padding: 0;
  }

  .trustfact__num {
    font-size: 1.15rem;
    white-space: nowrap;
  }

  .trustfact__label {
    font-size: 0.66rem;
    letter-spacing: 0.02em;
    line-height: 1.3;
  }
}

@media (max-width: 400px) {
  .answers__grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 300px;
    margin-inline: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Fallback – setupConfetti startet hier ohnehin nicht */
  .confetti {
    display: none;
  }

  .steps__bar-fill,
  .step,
  .step__num,
  .step__check,
  .vplayer__thumb,
  .vplayer__play,
  .btn-cal,
  .btn-wa {
    transition: none;
  }

  .vplayer__unmute-pill {
    animation: none;
  }
}

/* ============================================================
   Kernschritt "Umfrage" auf der Danke-Seite
   ============================================================ */

.step--key {
  border-color: rgba(191, 161, 74, 0.55);
  background: linear-gradient(165deg, var(--white) 0%, var(--cream-warm) 100%);
  box-shadow: 0 16px 44px rgba(191, 161, 74, 0.2);
}

.step--key .step__num {
  background: var(--cta-grad);
  color: var(--navy-deep);
}

.step__ribbon {
  display: inline-block;
  margin-bottom: 10px;
  padding: 5px 13px;
  border-radius: 999px;
  background: var(--navy-deep);
  color: var(--champagne-light);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Geschenk-Hinweis im Schritt */
.step__gift {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 12px;
  padding: 12px 15px;
  border: 1px dashed rgba(191, 161, 74, 0.6);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--navy);
}

.step__gift svg {
  color: var(--gold-deep);
  flex-shrink: 0;
  margin-top: 2px;
}

.step__gift strong {
  font-weight: 600;
  color: var(--navy-deep);
}

.step__cta {
  padding: 14px 30px 12px;
}

.step__cta .cta__label {
  font-size: 1.02rem;
}

/* ============================================================
   Umfrage-Quiz (danke/umfrage/)
   ============================================================ */

.quizpage {
  background:
    radial-gradient(760px 460px at 85% 0%, rgba(249, 226, 181, 0.42), transparent 62%),
    radial-gradient(620px 420px at 0% 100%, rgba(205, 186, 153, 0.2), transparent 60%),
    var(--cream);
  min-height: 100vh;
}

.quiz {
  padding: 34px 20px 70px;
}

.quiz__inner {
  max-width: 720px;
  margin: 0 auto;
}

/* Geschenk-Erinnerung – hält die Motivation über alle Schritte sichtbar */
.quiz__gift {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 18px;
  margin-bottom: 22px;
  border: 1px solid rgba(191, 161, 74, 0.42);
  border-radius: 14px;
  background: linear-gradient(150deg, var(--white) 0%, var(--cream-warm) 100%);
  box-shadow: 0 8px 26px rgba(52, 66, 88, 0.08);
}

.quiz__gift-icon {
  display: flex;
  color: var(--gold-deep);
  flex-shrink: 0;
}

.quiz__gift-text {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.quiz__gift-text strong {
  display: block;
  font-weight: 600;
  color: var(--navy-deep);
}

.quiz__progress {
  margin-bottom: 26px;
}

.quiz__bar {
  height: 7px;
  border-radius: 999px;
  background: rgba(52, 66, 88, 0.1);
  overflow: hidden;
}

.quiz__bar-fill {
  display: block;
  width: 14%;
  height: 100%;
  border-radius: 999px;
  background: var(--cta-grad);
  transition: width 0.4s cubic-bezier(0.22, 0.9, 0.3, 1);
}

.quiz__count {
  margin: 9px 0 0;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.quiz__count strong {
  font-weight: 600;
  color: var(--gold-deep);
}

/* Nur der aktive Schritt ist sichtbar */
.quiz__step {
  display: none;
  border: 0;
  margin: 0;
  padding: 0;
}

.quiz__step.is-active {
  display: block;
  animation: quiz-in 0.4s cubic-bezier(0.22, 0.9, 0.3, 1);
}

@keyframes quiz-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.quiz__q {
  display: block;
  padding: 0;
  margin: 0 0 8px;
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 3vw, 1.95rem);
  font-weight: 400;
  line-height: 1.25;
  color: var(--navy-deep);
}

.quiz__q:focus {
  outline: none;
}

.quiz__hint {
  margin: 0 0 20px;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.quiz__options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Antwort-Karten: das native Input liegt unsichtbar darunter */
.qopt {
  display: block;
  cursor: pointer;
}

.qopt input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.qopt__box {
  display: block;
  position: relative;
  padding: 16px 20px 16px 54px;
  background: var(--white);
  border: 1px solid rgba(52, 66, 88, 0.15);
  border-radius: 13px;
  font-size: 0.97rem;
  line-height: 1.45;
  color: var(--navy-deep);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

/* Auswahl-Kreis links */
.qopt__box::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border: 2px solid rgba(52, 66, 88, 0.22);
  border-radius: 50%;
  background: var(--white);
  transition: border-color 0.15s ease, background 0.15s ease;
}

/* Häkchen, erscheint bei Auswahl */
.qopt__box::after {
  content: "";
  position: absolute;
  left: 25px;
  top: 50%;
  width: 6px;
  height: 11px;
  margin-top: -2px;
  border: solid var(--navy-deep);
  border-width: 0 2.5px 2.5px 0;
  transform: translateY(-50%) rotate(45deg) scale(0.4);
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.2s cubic-bezier(0.34, 1.6, 0.64, 1);
}

/* Mehrfachauswahl bekommt ein abgerundetes Quadrat statt eines Kreises */
.qopt input[type="checkbox"] + .qopt__box::before {
  border-radius: 7px;
}

.qopt:hover .qopt__box {
  border-color: var(--gold);
  transform: translateY(-1px);
}

.qopt input:focus-visible + .qopt__box {
  outline: 3px solid rgba(191, 161, 74, 0.55);
  outline-offset: 2px;
}

.qopt input:checked + .qopt__box {
  border-color: var(--gold-deep);
  background: var(--cream-warm);
  box-shadow: 0 6px 20px rgba(191, 161, 74, 0.22);
}

.qopt input:checked + .qopt__box::before {
  border-color: var(--gold-deep);
  background: var(--cta-grad);
}

.qopt input:checked + .qopt__box::after {
  opacity: 1;
  transform: translateY(-50%) rotate(45deg) scale(1);
}

.quiz__textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 0.97rem;
  line-height: 1.6;
  color: var(--navy-deep);
  background: var(--white);
  border: 1px solid rgba(52, 66, 88, 0.16);
  border-radius: 13px;
  padding: 15px 17px;
  outline: none;
  resize: vertical;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.quiz__textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(191, 161, 74, 0.18);
}

.quiz__textarea::placeholder {
  color: #9aa4b2;
}

.quiz__fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  background: var(--white);
  border: 1px solid rgba(191, 161, 74, 0.3);
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
}

.quiz__legal {
  margin: 14px 0 0;
  font-size: 0.76rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.quiz__legal a {
  color: var(--gold-deep);
}

.quiz__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 26px;
}

.quiz__back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 16px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}

.quiz__back:hover {
  color: var(--navy-deep);
  background: rgba(52, 66, 88, 0.06);
}

.quiz__back[hidden] {
  display: none;
}

.quiz__next {
  margin-left: auto;
  padding: 14px 32px 12px;
}

.quiz__error {
  margin: 14px 0 0;
  padding: 11px 15px;
  border-radius: 10px;
  background: #fdf3f2;
  border: 1px solid rgba(192, 57, 43, 0.3);
  font-size: 0.85rem;
  font-weight: 500;
  color: #c0392b;
}

.quiz__error[hidden] {
  display: none;
}

/* ============================================================
   Geschenk- / Termin-Seite (danke/geschenk/)
   ============================================================ */

.ghero__inner {
  position: relative;
  max-width: 760px;
  padding-top: 38px;
  padding-bottom: 40px;
  text-align: center;
}

/* Kleines Porträt über dem Badge – der Hero-Text ist in der Ich-Form
   geschrieben ("Ich lese jede einzelne selbst"), das Bild gibt ihm ein
   Gesicht. Quelle ist der 160x160-Avatar, deshalb nicht groesser als 100px. */
.ghero__me {
  display: block;
  width: 100px;
  height: 100px;
  margin: 0 auto 18px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--cream);
  box-shadow:
    0 0 0 2px rgba(191, 161, 74, 0.55),
    0 10px 26px rgba(52, 66, 88, 0.18);
}

.ghero h1 {
  margin: 18px 0 16px;
  font-size: clamp(1.95rem, 3.2vw, 2.75rem);
}

.ghero__lead {
  max-width: 60ch;
  margin: 0 auto;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--text-muted);
}

.ghero__note {
  max-width: 52ch;
  margin: 16px auto 0;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--navy-deep);
}

/* Sprungmarke auf den Kalender – bewusst die kleine CTA-Variante: der
   eigentliche Abschluss ist das Calendly-Widget direkt darunter. */
.ghero__cta {
  margin-top: 24px;
}

/* ---- Terminbuchung: Calendly direkt eingebettet ---- */
.booking {
  padding: 52px 0 40px;
  background:
    radial-gradient(700px 400px at 15% 0%, rgba(249, 226, 181, 0.3), transparent 62%),
    var(--cream);
}

.booking__head {
  text-align: center;
  margin-bottom: 24px;
}

.booking__scarcity {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 22px 0 0;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(226, 84, 74, 0.1);
  border: 1px solid rgba(226, 84, 74, 0.35);
  color: #b3453c;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.booking__frame {
  max-width: 1000px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid rgba(191, 161, 74, 0.32);
  border-radius: 20px;
  box-shadow: 0 18px 46px rgba(52, 66, 88, 0.14);
  overflow: hidden;
}

/* Feste Höhe: ohne Calendlys widget.js gibt es keine Auto-Anpassung.
   Der Kalender scrollt bei Bedarf innerhalb des Rahmens. */
.booking__frame iframe {
  display: block;
  width: 100%;
  height: 720px;
  border: 0;
}

.booking__fallback {
  margin: 16px 0 0;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.booking__fallback a {
  color: var(--gold-deep);
  font-weight: 500;
}

/* ---- Was im Gespräch passiert ---- */
.gift {
  padding: 8px 0 70px;
  background: var(--cream);
}

.gift__card {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 34px;
  background: var(--white);
  border: 1px solid rgba(191, 161, 74, 0.28);
  border-radius: 20px;
  box-shadow: var(--shadow-soft);
}

.gift__value {
  display: inline-block;
  margin-bottom: 14px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--cta-grad);
  color: var(--navy-deep);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.gift__title {
  margin: 0 0 20px;
  font-family: var(--font-serif);
  font-size: 1.42rem;
  font-weight: 500;
  color: var(--navy-deep);
}

.gift__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.gift__list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.gift__list strong {
  font-weight: 600;
  color: var(--navy-deep);
}

.gift__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--cream-warm);
  border: 1px solid rgba(191, 161, 74, 0.4);
  color: var(--gold-deep);
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-weight: 500;
}

.gift__ticks {
  list-style: none;
  margin: 22px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid rgba(52, 66, 88, 0.1);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
}

.gift__ticks li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.gift__ticks svg {
  color: var(--gold-deep);
  flex-shrink: 0;
  margin-top: 3px;
}

.gift__soft {
  margin: 18px 0 0;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--text-muted);
}

/* ---- Kalender-Erinnerung (Geschenk-Seite, vor dem WhatsApp-Abschluss) ----
   Bewusst als flache, breite "Widget"-Leiste gebaut und nicht als zweite
   grosse Box wie .wacta__box – sonst konkurrieren zwei Karten um dieselbe
   Aufmerksamkeit. Buttons nutzen .btn-cal aus dem Danke-Seiten-Block. */
.calcta {
  padding: 0 0 8px;
  background: var(--cream);
}

.calcta__box {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 26px;
  max-width: 940px;
  margin: 0 auto;
  padding: 26px 30px;
  background: linear-gradient(160deg, var(--white) 0%, var(--cream-warm) 100%);
  border: 1px solid rgba(191, 161, 74, 0.34);
  border-radius: 20px;
  box-shadow: var(--shadow-soft);
}

/* Kalenderblatt mit dem Datum – gibt dem Block auf einen Blick den Kontext */
.calcta__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 66px;
  flex-shrink: 0;
  border-radius: 13px;
  background: var(--white);
  border: 1px solid rgba(191, 161, 74, 0.45);
  box-shadow: 0 6px 16px rgba(52, 66, 88, 0.1);
  overflow: hidden;
}

.calcta__date-m {
  width: 100%;
  padding: 4px 0 3px;
  background: var(--cta-grad);
  color: var(--navy-deep);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
}

.calcta__date-d {
  flex: 1;
  display: flex;
  align-items: center;
  font-family: var(--font-serif);
  font-size: 1.72rem;
  font-weight: 500;
  line-height: 1;
  color: var(--navy-deep);
}

.calcta__chip {
  display: inline-block;
  margin-bottom: 8px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.calcta__title {
  margin: 0 0 8px;
  font-family: var(--font-serif);
  font-size: clamp(1.16rem, 2vw, 1.38rem);
  font-weight: 500;
  line-height: 1.3;
  text-wrap: balance;
  color: var(--navy-deep);
}

.calcta__text {
  max-width: 52ch;
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.calcta__meta {
  margin: 10px 0 0;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.calcta__actions {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 176px;
}

.calcta__actions .btn-cal {
  justify-content: flex-start;
}

@media (max-width: 900px) {
  /* Buttons unter den Text, Datum bleibt neben der Ueberschrift */
  .calcta__box {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 18px 20px;
    padding: 24px 22px;
  }

  .calcta__actions {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    min-width: 0;
  }

  .calcta__actions .btn-cal {
    flex: 1 1 auto;
    justify-content: center;
  }
}

@media (max-width: 520px) {
  .calcta__box {
    grid-template-columns: minmax(0, 1fr);
    padding: 22px 18px;
  }

  .calcta__date {
    width: 54px;
    height: 58px;
  }

  .calcta__date-d {
    font-size: 1.5rem;
  }

  /* Ohne den Wochentag passt die Termin-Zeile in eine Zeile –
     gleiches Prinzip wie .chip__opt bei den Meta-Chips. */
  .calcta__meta-day {
    display: none;
  }

  .calcta__actions .btn-cal {
    flex: 1 1 100%;
  }
}

/* ============================================================
   Responsive: Quiz + Geschenk-Seite
   ============================================================ */

@media (max-width: 760px) {
  /* Calendly braucht auf schmalen Viewports deutlich mehr Höhe */
  .booking__frame iframe {
    height: 1040px;
  }
}

@media (max-width: 600px) {
  .quiz {
    padding: 22px 16px 54px;
  }

  .quiz__gift {
    gap: 11px;
    padding: 11px 14px;
    margin-bottom: 18px;
  }

  .quiz__gift-text {
    font-size: 0.8rem;
  }

  .qopt__box {
    padding: 14px 16px 14px 48px;
    font-size: 0.92rem;
  }

  .qopt__box::before {
    left: 15px;
    width: 20px;
    height: 20px;
  }

  .qopt__box::after {
    left: 21px;
  }

  .quiz__fields {
    padding: 18px;
  }

  .quiz__nav {
    margin-top: 20px;
  }

  .quiz__next {
    flex: 1 1 auto;
    padding-left: 18px;
    padding-right: 18px;
  }

  .quiz__next .cta__label {
    font-size: 1rem;
  }

  .ghero__inner {
    padding-top: 26px;
    padding-bottom: 34px;
  }

  .ghero__me {
    width: 80px;
    height: 80px;
    margin-bottom: 14px;
  }

  .ghero__cta {
    margin-top: 20px;
    padding-left: 22px;
    padding-right: 22px;
  }

  .ghero__cta .cta__label {
    font-size: 0.95rem;
  }

  .ghero h1 {
    font-size: clamp(1.66rem, 7vw, 2.1rem);
  }

  .gift {
    padding: 48px 0 54px;
  }

  .gift__card {
    padding: 24px 20px;
  }

  .step__cta {
    display: flex;
    width: 100%;
    padding-left: 18px;
    padding-right: 18px;
  }

  .step__cta .cta__label {
    font-size: 0.95rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .quiz__step.is-active {
    animation: none;
  }

  .quiz__bar-fill,
  .qopt__box,
  .qopt__box::before,
  .qopt__box::after {
    transition: none;
  }
}


/* ============================================================
   Termin-Seite (termin/)
   Der Link wird live im Webinar-Raum ausgegeben. Der Kalender ist
   der Star der Seite, der Hero hält sich deshalb bewusst kurz.
   Kalender-Rahmen, Kopf und Fallback kommen aus dem .booking__*-Block
   der Geschenk-Seite – hier nur das Zweispalten-Layout und die
   dunkle Kontext-Box daneben (.tbook__*).
   ============================================================ */

.thero__inner {
  position: relative;
  max-width: 720px;
  padding-top: 38px;
  padding-bottom: 40px;
  text-align: center;
}

.thero h1 {
  margin: 18px 0 16px;
  font-size: clamp(1.95rem, 3.2vw, 2.75rem);
}

.thero__lead {
  max-width: 58ch;
  margin: 0 auto;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--text-muted);
}

.thero__note {
  max-width: 50ch;
  margin: 16px auto 0;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--navy-deep);
}

/* Textlink statt CTA-Button: der Kalender steht direkt darunter,
   ein zweiter großer Button würde nur vom Buchen ablenken. */
.thero__jump {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid rgba(191, 161, 74, 0.45);
  background: var(--white);
  color: var(--navy-deep);
  font-size: 0.86rem;
  font-weight: 500;
  text-decoration: none;
  box-shadow: var(--shadow-soft);
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.thero__jump:hover {
  transform: translateY(-2px);
  border-color: var(--gold);
}

.thero__jump svg {
  color: var(--gold-deep);
}

/* Kalender links (breite Spalte), Kontext rechts daneben */
.tbook__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.85fr);
  align-items: start;
  gap: 26px;
  max-width: 1120px;
  margin: 0 auto;
}

.tbook__cal {
  min-width: 0;
}

.tbook__cal .booking__fallback {
  margin-top: 12px;
}

.tbook__side {
  position: sticky;
  top: 24px;
  padding: 28px 26px;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(39, 51, 73, 0.32);
}

/* Wie .booking__scarcity, aber für den dunklen Untergrund aufgehellt */
.tbook__scarcity {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(226, 84, 74, 0.16);
  border: 1px solid rgba(226, 84, 74, 0.4);
  color: #f3b4ae;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.tbook__sidetext {
  margin: 0 0 22px;
  font-size: 0.92rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.8);
}

.tbook__sidetitle {
  margin: 0 0 18px;
  padding-top: 20px;
  border-top: 1px solid rgba(249, 226, 181, 0.18);
  font-family: var(--font-serif);
  font-size: 1.24rem;
  font-weight: 500;
  color: var(--champagne-light);
}

.tbook__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tbook__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.88rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
}

.tbook__list strong {
  font-weight: 600;
  color: var(--white);
}

.tbook__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(249, 226, 181, 0.1);
  border: 1px solid rgba(191, 161, 74, 0.5);
  color: var(--champagne-light);
  font-family: var(--font-serif);
  font-size: 0.9rem;
  font-weight: 500;
}

.tbook__ticks {
  list-style: none;
  margin: 22px 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(249, 226, 181, 0.18);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tbook__ticks li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.84rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
}

.tbook__ticks svg {
  color: var(--gold);
  flex-shrink: 0;
  margin-top: 3px;
}

/* Abschluss-Box: hier geht es zurück zum Kalender, nicht zu WhatsApp –
   der Chip bekommt deshalb Gold statt WhatsApp-Grün. */
.wacta__chip--gold {
  background: rgba(191, 161, 74, 0.14);
  border-color: rgba(191, 161, 74, 0.45);
  color: var(--gold-deep);
}

@media (max-width: 1000px) {
  .tbook__grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 760px;
  }

  .tbook__side {
    position: static;
  }
}

@media (max-width: 600px) {
  .thero__inner {
    padding-top: 24px;
    padding-bottom: 30px;
  }

  .thero h1 {
    font-size: clamp(1.66rem, 7vw, 2.1rem);
  }

  .tbook__side {
    padding: 24px 20px;
  }
}

/* ============================================================
   404 – Seite nicht gefunden (/404.html)
   Nutzt den Hero-Hintergrund (.hero), aber als zentrierte
   Einzelspalte: kein Freisteller, damit die Seite in jeder
   Fenstergröße ohne Scrollen komplett sichtbar bleibt.
   ============================================================ */

.e404__inner {
  position: relative;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 46px;
  padding-bottom: 68px;
}

.e404__badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--white);
  border: 1px solid rgba(191, 161, 74, 0.45);
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
  box-shadow: var(--shadow-soft);
}

.e404__badge svg {
  color: var(--gold-deep);
  flex-shrink: 0;
}

/* Ziffern + goldener Kurs-Chart dahinter */
.e404__code {
  position: relative;
  display: inline-block;
  margin: 18px 0 -6px;
}

.e404__chart {
  position: absolute;
  left: 50%;
  top: 54%;
  width: 148%;
  transform: translate(-50%, -50%);
  color: rgba(191, 161, 74, 0.3);
  pointer-events: none;
}

.e404__num {
  position: relative;
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(4.6rem, 15vw, 8.4rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.08em;
  /* Gold-Schimmer wie beim H1-Akzent der Optin-Seite */
  background: linear-gradient(100deg,
    var(--gold-deep) 25%, #e0c274 42%, #f6e5ae 50%, #e0c274 58%, var(--gold-deep) 75%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--gold-deep);
  animation: accent-shimmer 4s linear infinite;
}

.e404 h1 {
  max-width: 640px;
  margin: 20px 0 14px;
  font-size: clamp(1.95rem, 3.4vw, 2.7rem);
  text-wrap: balance;
}

.e404__lead {
  max-width: 560px;
  margin: 0 0 26px;
  font-size: 1rem;
  color: var(--text-muted);
  text-wrap: pretty;
}

.e404__lead strong {
  color: var(--navy);
  font-weight: 600;
}

.e404__meta {
  justify-content: center;
}

.e404__alt {
  margin: 22px 0 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.e404__alt a {
  color: var(--gold-deep);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid rgba(191, 161, 74, 0.45);
  transition: color 0.15s ease, border-color 0.15s ease;
}

.e404__alt a:hover {
  color: var(--navy-deep);
  border-color: var(--navy-deep);
}

.e404__alt a:focus-visible {
  outline: 3px solid rgba(191, 161, 74, 0.6);
  outline-offset: 3px;
}

/* Signaturzeile – gleiche Optik wie die Autorenzeile im Zitat-Band */
.e404__sign {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 520px;
  margin-top: 34px;
  padding-top: 24px;
  border-top: 1px solid rgba(52, 66, 88, 0.12);
  text-align: left;
}

.e404__avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid rgba(191, 161, 74, 0.55);
  box-shadow: 0 4px 14px rgba(52, 66, 88, 0.18);
}

.e404__sign-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}

.e404__sign-quote {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--navy);
}

.e404__sign-name {
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

@media (max-width: 720px) {
  .e404__inner {
    padding-top: 32px;
    padding-bottom: 52px;
  }

  .e404__chart {
    width: 128%;
  }

  .e404 h1 {
    font-size: clamp(1.6rem, 6.6vw, 2rem);
  }

  .e404__lead {
    font-size: 0.94rem;
  }

  .e404__sign {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .e404 .cta {
    display: flex;
    width: 100%;
    padding-left: 18px;
    padding-right: 18px;
  }

  .e404 .cta__label {
    font-size: 1.05rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .e404__num {
    animation: none;
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--gold-deep);
  }
}


/* ================================================================
   Mobile-Nachtraege: Karten-Stapel fuer den Mythen-Check und
   Karussell fuer die Video-Testimonials. Stehen bewusst am Dateiende,
   damit sie die frueheren Mobile-Regeln der beiden Sektionen
   ueberschreiben.
   ================================================================ */

/* ---- Mythen-Check als Karten-Stapel (#mythen) ----
   Gleiche Mechanik wie Vorteile und Bewertungen (setupCardStack in
   main.js): Die Karten kleben untereinander fest, die naechste schiebt
   sich ueber die vorige, die darunter wird kleiner und dunkler.
   Wichtig: Die Karte braucht hier einen deckenden Hintergrund – normal
   ist sie halbtransparent, gestapelt schiene der Text durch.
   Der Versatz ist mit 9px knapper als bei den Vorteilen, weil hier
   acht statt sechs Karten uebereinanderliegen. */
@media (max-width: 600px) and (prefers-reduced-motion: no-preference) {
  html[data-js] .myths__grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  html[data-js] .myths__grid .myth {
    position: sticky;
    top: calc(16px + var(--stack-i, 0) * 9px);
    transform-origin: center top;
    /* Stapel-Effekt ersetzt hier die Scroll-Reveal-Animation */
    opacity: 1;
    transform: none;
    transition: none;
    background: #fff;
    box-shadow: 0 -14px 30px rgba(52, 66, 88, 0.14);
    will-change: transform, filter;
  }

  html[data-js] .myths__grid .myth:nth-child(2) { --stack-i: 1; }
  html[data-js] .myths__grid .myth:nth-child(3) { --stack-i: 2; }
  html[data-js] .myths__grid .myth:nth-child(4) { --stack-i: 3; }
  html[data-js] .myths__grid .myth:nth-child(5) { --stack-i: 4; }
  html[data-js] .myths__grid .myth:nth-child(6) { --stack-i: 5; }
  html[data-js] .myths__grid .myth:nth-child(7) { --stack-i: 6; }
  html[data-js] .myths__grid .myth:nth-child(8) { --stack-i: 7; }
}

/* ---- Video-Testimonials als Karussell (#stimmen, nur Mobile) ----
   Auf Desktop bleibt das 2x2-Grid unveraendert. Die Steuerung ist
   grundsaetzlich aus und wird nur eingeblendet, wenn der Track
   tatsaechlich ueberlaeuft – auf Desktop passiert das nie. */
.stories__controls {
  display: none;
}

@media (max-width: 600px) {
  .stories__grid {
    display: flex;
    flex-wrap: nowrap;
    max-width: none;
    gap: 14px;
    overflow-x: auto;
    /* Nur horizontal scrollen: ohne explizites hidden rechnet overflow-y
       auf auto – der Track liesse sich dann vertikal verwischen. */
    overflow-y: hidden;
    /* Am Ende des Tracks nicht die Zurueck-Wischgeste ausloesen */
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 4px 2px 12px;
  }

  .stories__grid::-webkit-scrollbar {
    display: none;
  }

  .stories__grid .story {
    flex: 0 0 100%;
    scroll-snap-align: center;
  }

  /* Reveal ohne Y-Verschiebung – translateY ragt sonst unten aus dem
     Scroll-Container und wird vom overflow-y: hidden beschnitten. */
  html[data-js] .stories__grid .story[data-scroll-reveal] {
    transform: none;
  }

  .stories__slider.has-overflow .stories__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 4px;
  }

  /* Helle Sektion – daher Navy/Gold statt der Champagner-Toene
     aus dem dunklen Bewertungs-Slider. */
  .stories__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(191, 161, 74, 0.5);
    background: rgba(249, 226, 181, 0.16);
    color: var(--gold-deep);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
  }

  .stories__arrow:disabled {
    opacity: 0.32;
    cursor: default;
  }

  .stories__dots {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .stories__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(52, 66, 88, 0.22);
    cursor: pointer;
    transition: background 0.25s ease, width 0.25s ease;
  }

  .stories__dot.is-active {
    width: 22px;
    background: var(--gold-deep);
  }
}

/* ============================================================
   Danke-Seite: Hero-Fakten, WhatsApp-CTA, Rest-Streifen
   ------------------------------------------------------------
   Stand 25.08.2026. Die Danke-Seite hat genau ein Ziel: die
   WhatsApp-Community. Der Button steht deshalb im Hero ueber dem
   Video, damit er auf dem Handy ohne Scrollen sichtbar ist. Die
   belegten Fakten sind aus dem eigenen Trust-Band nach oben
   gewandert, das Band ist ersatzlos entfallen - eine Sektion
   weniger heisst spuerbar weniger Weg bis zur Handlung.
   ============================================================ */

/* Der eine CTA der Seite. Auf schmalen Schirmen ueber die volle Breite,
   damit er nicht neben dem Fliesstext untergeht. */
/* Der Hero-CTA ist seit 25.08.2026 ein eigener Block mit Chip, Zitat und einem
   Satz Einordnung. Vorher stand dort nur der nackte Button, und aus dem Kontext
   gerissen war nicht erkennbar, wofuer man sich da anmeldet. Der Rahmen ist
   derselbe wie im Abschluss-Block, nur ohne Alexandras Freisteller. */
.dhero__wa {
  margin: 20px 0 8px;
  padding: 22px 24px 24px;
  background: linear-gradient(165deg, var(--white) 0%, var(--cream-warm) 100%);
  border: 1px solid rgba(191, 161, 74, 0.4);
  border-radius: 16px;
  box-shadow: 0 14px 36px rgba(191, 161, 74, 0.16);
}

.dhero__wa-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 12px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(191, 161, 74, 0.45);
  color: var(--gold-deep);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.dhero__wa-quote {
  margin-bottom: 8px;
  font-family: var(--font-serif);
  font-size: 1.32rem;
  font-weight: 500;
  line-height: 1.28;
  color: var(--navy-deep);
}

.dhero__wa-text {
  margin-bottom: 16px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--navy-soft);
}

.dhero__wa .cta {
  /* Der CTA traegt Alexandras CI, nicht WhatsApp-Gruen: das Gruen fiel aus dem
     Markenbild. Das WhatsApp-Logo im Label zeigt trotzdem, wohin es geht. */
  width: auto;
}

.dhero__wa-note {
  margin-top: 8px;
  font-size: 0.78rem;
  color: var(--text-muted);
}

@media (max-width: 640px) {
  .dhero__wa .cta {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }

  .dhero__wa .cta__label {
    font-size: 1.05rem;
  }
}

/* Termin und Fragen: bewusst klein, sie sollen dem WhatsApp-CTA keine
   Konkurrenz machen. Hier standen bis 25.08.2026 drei grosse
   Schritt-Karten mit Fortschrittsbalken. */
.nextbits {
  padding: 32px 0 36px;
  background: var(--cream);
  border-top: 1px solid rgba(191, 161, 74, 0.18);
}

.nextbits__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px 40px;
}

.nextbits__item {
  flex: 1 1 280px;
  max-width: 420px;
}

.nextbits__label {
  margin-bottom: 10px;
  font-size: 0.86rem;
  color: var(--navy-soft);
}

.nextbits__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Kurzfrage im Rest-Streifen. Ersetzt den Button zur langen Umfrage:
   ein Klick statt Seitenwechsel plus sechs Fragen. Nach der Antwort
   bleibt nur die Dankzeile stehen, gesteuert ueber .is-done. */
.miniq__q {
  margin-bottom: 10px;
  font-size: 0.86rem;
  color: var(--navy-soft);
}

.miniq__q strong {
  display: block;
  margin-top: 2px;
  color: var(--navy-deep);
}

.miniq__options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.miniq__opt {
  padding: 10px 16px;
  border-radius: 11px;
  background: var(--white);
  border: 1px solid rgba(52, 66, 88, 0.18);
  color: var(--navy-deep);
  font-family: var(--font-sans);
  font-size: 0.84rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.miniq__opt:hover {
  transform: translateY(-2px);
  border-color: var(--gold);
  box-shadow: 0 8px 20px rgba(52, 66, 88, 0.1);
}

.miniq__opt:focus-visible {
  outline: 3px solid rgba(191, 161, 74, 0.55);
  outline-offset: 2px;
}

.miniq__done {
  display: none;
  font-size: 0.86rem;
  color: var(--gold-deep);
}

.miniq__step[hidden] {
  display: none;
}

.miniq.is-done .miniq__step {
  display: none;
}

.miniq.is-done .miniq__done {
  display: block;
}


/* ============================================================
   A/B-TEST DER HEADLINE
   ------------------------------------------------------------
   Beide Varianten stehen im Markup, sichtbar ist immer genau eine.
   Welche, entscheidet das data-variant-Attribut, das der Inline-Skript
   im head VOR dem ersten Paint setzt. Deshalb blitzt nichts auf.

   Die Grundstellung blendet B aus, nicht A. Ohne JavaScript, in alten
   Browsern und wenn localStorage blockiert ist, sieht die Besucherin
   damit die bisherige Headline und nie beide gleichzeitig.

   display:block ist korrekt, weil beide Traeger <h1> sind. Wird das
   Muster spaeter auf andere Elemente uebertragen, gehoert der Wert
   je Element geprueft.
   ============================================================ */

.ab-b { display: none; }

[data-variant="optin-b"] .ab-a { display: none; }
[data-variant="optin-b"] .ab-b { display: block; }