/* ============================================================
   WOI — VSL-Funnel (/vsl-start, /vsl, /danke)
   Nachbau der Framer-Seiten (Stand 21.10.2026) auf den Tokens der Startseite.
   Design wird mit dem neuen Branding überarbeitet – hier nur Struktur + Texte 1:1.
   ============================================================ */

.vsl { background: var(--white); color: var(--ink-700); }
.vsl h1, .vsl h2, .vsl h3 { color: var(--ink-900); font-weight: 400; }
.vsl strong, .vsl .hl { color: var(--teal-700); font-weight: 500; }
.vsl .wrap { max-width: 68rem; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3rem); }
.vsl .narrow { max-width: 46rem; margin-left: auto; margin-right: auto; }
.vsl section { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.vsl .center { text-align: center; }

/* ---- Hero ---- */
.vsl-hero {
  background: url("../assets/vsl/hero-bg.png") center top / cover no-repeat, var(--teal-100);
  text-align: center;
  padding-top: 2rem !important;
}
.vsl-hero__logo { width: 180px; margin: 0 auto 1.5rem; }
.vsl-hero__logo--wide { width: 232px; }
.vsl-hero__kicker { font: var(--label); letter-spacing: var(--label-tracking); text-transform: uppercase; color: var(--teal-700); margin-bottom: 1rem; }
.vsl-hero h1 { font: var(--display-lg); max-width: 22ch; margin: 0 auto 1rem; }
.vsl-hero__sub { font: var(--text-lg); max-width: 40rem; margin: 0 auto 2rem; }

/* ---- Video ---- */
.vsl-video {
  max-width: 56rem; margin: 0 auto 2rem; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-lg); background: var(--teal-950);
}
.vsl-video video { width: 100%; height: auto; }

/* ---- Buttons ---- */
.vsl-btn {
  display: inline-block; padding: 1.05rem 2.2rem; border-radius: var(--radius-pill); border: 0; cursor: pointer;
  background: var(--teal-700); color: var(--white); font: 500 1rem/1.2 var(--font-sans); letter-spacing: 0.02em;
  box-shadow: var(--shadow-gold); transition: transform .2s var(--ease-soft), background .2s var(--ease-soft);
}
.vsl-btn:hover { background: var(--teal-800); color: var(--white); transform: translateY(-2px); }
.vsl-proof { display: flex; align-items: center; justify-content: center; gap: .6rem; margin-top: 1.1rem; font: var(--text-sm); }
.vsl-proof img { width: 106px; height: auto; }
.vsl-trust { width: 260px; margin: 1.2rem auto 0; }

/* ---- Karten #1–#3 ---- */
.vsl-title { font: var(--display-md); text-align: center; margin: 0 auto 2.5rem; max-width: 26ch; }
.vsl-cards { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.vsl-card { background: var(--teal-100); border-radius: var(--radius-lg); padding: 1.6rem; box-shadow: var(--shadow-sm); }
.vsl-card img { width: 100%; aspect-ratio: 347 / 206; object-fit: contain; margin-bottom: 1rem; }
.vsl-card h3 { font: var(--display-sm); margin-bottom: .6rem; }
.vsl-card__nr { color: var(--gold-700); margin-right: .35rem; }
.vsl-card p { font: var(--text-sm); }

/* ---- Liste mit Bild ---- */
.vsl-split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 860px) { .vsl-split { grid-template-columns: 1fr 1fr; } }
.vsl-split img { border-radius: var(--radius-xl); width: 100%; max-height: 40rem; object-fit: cover; }
.vsl-checks { list-style: none; display: grid; gap: 1rem; }
.vsl-checks li { position: relative; padding-left: 2rem; }
.vsl-checks li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--teal-700); font-weight: 600; }
.vsl-checks--no li::before { content: "✕"; color: var(--gold-700); }
.vsl-note { background: var(--gold-100); border: 1px solid var(--line-gold); border-radius: var(--radius-lg); padding: 1.4rem 1.6rem; margin-top: 2rem; }

/* ---- bedeutet / bedeutet nicht ---- */
.vsl-bg { background: url("../assets/vsl/section-bg.png") center / cover no-repeat, var(--teal-100); }
.vsl-compare { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin-top: 2rem; }
.vsl-compare > div { background: var(--white); border-radius: var(--radius-lg); padding: 1.6rem; box-shadow: var(--shadow-sm); }
.vsl-compare h3 { font: var(--display-sm); margin-bottom: 1rem; }

/* ---- Glaubenssätze ---- */
.vsl-belief { display: grid; gap: 2rem; align-items: center; padding: 2rem 0; border-top: 1px solid var(--line); }
@media (min-width: 860px) { .vsl-belief { grid-template-columns: 1fr 1fr; } }
.vsl-belief__nr { font: var(--label); letter-spacing: var(--label-tracking); text-transform: uppercase; color: var(--gold-700); }
.vsl-belief h3 { font: var(--display-sm); margin: .5rem 0 1rem; }
.vsl-belief p { margin-bottom: 1.4rem; }
.vsl-belief img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }

/* ---- Prose ---- */
.vsl-prose p { margin-bottom: 1.1rem; }
.vsl-sub { font: var(--display-sm); text-align: center; margin-bottom: 1.5rem; }

/* ---- Abschluss-CTA ---- */
.vsl-final { position: relative; color: var(--white); text-align: center; overflow: hidden; background: var(--teal-900); }
.vsl-final video, .vsl-final__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .35; }
.vsl-final .wrap { position: relative; }
.vsl-final h2 { font: var(--display-lg); color: var(--white); margin-bottom: 1.2rem; }
.vsl-final p { max-width: 40rem; margin: 0 auto 2rem; color: var(--teal-200); }
.vsl-final .vsl-btn { background: var(--white); color: var(--teal-800); }

/* ---- Schritte (Danke) ---- */
.vsl-steps { list-style: none; display: grid; gap: 1rem; counter-reset: s; max-width: 36rem; margin: 0 auto; }
.vsl-steps li { counter-increment: s; background: var(--teal-100); border-radius: var(--radius-lg); padding: 1.1rem 1.4rem 1.1rem 4rem; position: relative; text-align: left; }
.vsl-steps li::before { content: "#" counter(s); position: absolute; left: 1.4rem; top: 1.05rem; font: var(--display-sm); color: var(--gold-700); }

/* ---- Footer ---- */
.vsl-footer { padding: 2rem 0; text-align: center; font: var(--text-xs); color: var(--ink-400); border-top: 1px solid var(--line); }
.vsl-footer a { color: var(--ink-500); margin: 0 .6rem; }

/* ---- Formular-Popup (vsl-start) ---- */
.vsl-modal { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 1rem; background: rgba(13,26,26,.55); }
.vsl-modal[data-open] { display: flex; }
.vsl-modal__box { background: var(--white); border-radius: var(--radius-xl); padding: 2rem; width: 100%; max-width: 26rem; position: relative; box-shadow: var(--shadow-lg); }
.vsl-modal__close { position: absolute; top: .8rem; right: 1rem; background: none; border: 0; font-size: 1.6rem; line-height: 1; color: var(--ink-400); cursor: pointer; }
.vsl-form { display: grid; gap: 1rem; }
.vsl-form label { display: grid; gap: .35rem; font: var(--label); color: var(--ink-900); }
.vsl-form input { font: var(--text-base); padding: .8rem 1rem; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--white); color: var(--ink-900); }
.vsl-form input:focus { outline: 2px solid var(--focus-ring); border-color: transparent; }
.vsl-form .vsl-btn { width: 100%; }
.vsl-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.vsl-form__msg { font: var(--text-sm); color: var(--gold-700); min-height: 1.2em; }
.vsl-form__legal { font: var(--text-xs); color: var(--ink-400); }

/* ---- /go: Videos, Bewertungen, Listen, Social ---- */
.go-yt-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.go-yt { position: relative; display: block; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); aspect-ratio: 16 / 9; background: var(--teal-950); }
.go-yt img { width: 100%; height: 100%; object-fit: cover; }
.go-yt--big { max-width: 46rem; margin: 0 auto; }
.go-yt__play { position: absolute; inset: 50% auto auto 50%; width: 64px; height: 44px; transform: translate(-50%, -50%); border-radius: 12px; background: rgba(13,26,26,.75); }
.go-yt__play::after { content: ""; position: absolute; left: 26px; top: 13px; border-left: 16px solid #fff; border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.go-yt:hover .go-yt__play { background: #c4302b; }
.go-reviews { columns: 3 18rem; column-gap: 1rem; }
.go-reviews img { width: 100%; margin: 0 0 1rem; break-inside: avoid; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); background: var(--white); }
.go-list { list-style: none; display: grid; gap: .9rem; }
.go-list li { display: grid; grid-template-columns: 24px 1fr; gap: .75rem; align-items: start; }
.go-social { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); max-width: 52rem; margin: 0 auto; }
.go-social__card { display: grid; gap: .7rem; background: var(--white); border-radius: var(--radius-xl); padding: 1.2rem; box-shadow: var(--shadow-md); color: var(--ink-700); }
.go-social__card:hover { color: var(--ink-700); transform: translateY(-2px); }
.go-social__img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-lg); }
.go-social__head { display: flex; align-items: center; gap: .5rem; font: var(--display-sm); color: var(--ink-900); }
.go-social__btn { justify-self: start; padding: .5rem 1.1rem; border-radius: var(--radius-pill); background: var(--teal-700); color: var(--white); font: 500 .9rem/1.2 var(--font-sans); }