/*
 * Fitpreneur: die Funnel-Seiten von fitpreneur-collective.com, nachgebaut aus
 * Onepage am 14.10.2026: Terminbuchung (/start, /start-intern), Vorbereitung
 * (/vorbereitungsseite, -2), Anleitungen (/deine-anleitung, -ob, /seite2),
 * VSL und Quiz (/yt, /quiz, /rechner, /video1, /video-freigegeben, /quiz-alt).
 *
 * Die Werte der Baukasten-Sektionen (Onepage-Bausteine ohne Quelltext) sind an
 * der Live-Seite gemessen, Desktop 1440 und Handy 390. Die Sektionen aus eigenem
 * Code (Fußzeile, Buchungsfenster, kein Termin, Rechner, Quiz) kommen aus ihrem
 * CSS-Modul und den @siteui-Paketen der Site. Werte unverändert, nur die
 * Klassennamen sind lesbar.
 *
 * Titel, Text und Knöpfe aus @siteui stehen in basis.css (.titel, .text, .knopf),
 * das Verhalten (Kalender, Formulare, Videos) in funnel.js.
 */

/* ---------- Grundgerüst ---------- */
.funnel { color: #000000; }
.funnel main { display: block; }
/* Onepage legt jede Sektion 1 px über die vorige (margin-top: -1px). */
.funnel main > section, .funnel main > div, .funnel > footer { position: relative; margin-top: -1px; }

/* Die Baukasten-Sektionen: Inhalt höchstens 1250 px breit, außen 32 px (Handy 24 px) Rand. */
.bk__innen { width: min(1250px, 100% - 64px); margin: 0 auto; }
@media (max-width: 768px) { .bk__innen { width: calc(100% - 48px); } }

/* Spalten des Baukastens: n von 24 Spalten. Die Rinne hängt am Abstand der Sektion (padding_key:
   xs 16 px, s 24, m 32, l 40, xl 48, xxl 56), Standard 48 px. Auf dem Handy volle Breite. */
.bk__spalte { width: calc((100% + var(--rinne, 48px)) * var(--spalten, 24) / 24 - var(--rinne, 48px)); margin-left: auto; margin-right: auto; }
@media (max-width: 768px) { .bk__spalte { width: 100%; } }

/* Markierung „Pinselstrich“ (brush-marker): Verlauf in der Farbe der Markierung, etwas breiter
   als das Wort, je Zeile neu. Farbe als RGB-Tripel (--pinsel), Deckkraft in der Mitte (--pinsel-alpha).
   Wie bei Onepage nimmt jedes Zeilenstück links und rechts 0,5ch ein; die Fläche liegt um
   (0,5ch − 0,25em) eingerückt darin. Der Rand ist durchsichtig und wird je Zeile wiederholt. */
.pinsel {
  --pinsel: 56 92 177; --pinsel-alpha: .3;
  color: #080d19;
  padding: 0 .25em; border: 0 solid transparent; border-left-width: calc(.5ch - .25em); border-right-width: calc(.5ch - .25em);
  border-radius: calc(.12em + .5ch - .25em) / .12em;
  background-image: linear-gradient(90deg, rgb(var(--pinsel) / .4), rgb(var(--pinsel) / var(--pinsel-alpha)) 4%, rgb(var(--pinsel) / .1));
  background-clip: padding-box; background-origin: padding-box;
  background-repeat: no-repeat; background-position: 0 .02em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  /* Bricht die Markierung um, bleibt das Leerzeichen am Zeilenende in ihr stehen (wie bei Onepage). */
  white-space: break-spaces;
}

/* Textlinks im Baukasten: Linie als Rahmen unten (1 px), Farbe des Textes. */
.bk-link { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
.bk-link:hover { color: inherit; }

/* ---------- Fußzeile (@siteui/site-footer, dieselbe wie in kunden.css) ---------- */
.seitenfuss { position: relative; width: 100%; box-sizing: border-box; padding: 52px 24px; border-top: 1px solid #07071a26; background: var(--color-kit-light, #f7f7f7); font-family: var(--font-kit-text-font), 'Helvetica Neue', Arial, sans-serif; }
.seitenfuss__innen { max-width: 1140px; margin: 0 auto; display: flex; flex-direction: column; gap: 26px; }
.seitenfuss__oben { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.seitenfuss__logo { display: block; width: auto; height: 28px; }
.seitenfuss__nav { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.seitenfuss__sozial { display: flex; align-items: center; gap: 14px; }
.seitenfuss__sozial a { box-sizing: border-box; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid #07071a33; color: #07071aa8; text-decoration: none; transition: border-color .2s ease, transform .14s ease, filter .14s ease; }
.seitenfuss__sozial a:hover { transform: translateY(-1px); border-color: currentColor; }
.seitenfuss__sozial a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.seitenfuss__sozial svg { width: 18px; height: 18px; display: block; fill: currentColor; }
.seitenfuss__link { font-size: 14px; line-height: 1.4; color: #07071aa8; text-decoration: none; transition: opacity .18s ease; }
.seitenfuss__link:hover { text-decoration: underline; }
.seitenfuss__link:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 3px; }
.seitenfuss__notiz { width: 100%; max-width: 760px; margin: 0; font-size: 14px; line-height: 1.55; color: #07071aa8; }
@media (max-width: 768px) {
  .seitenfuss { padding: 40px 18px; }
  .seitenfuss__innen { gap: 22px; }
  .seitenfuss__oben { flex-direction: column; align-items: flex-start; gap: 22px; }
  .seitenfuss__nav { gap: 18px; }
}

/* ---------- Terminbuchung: Sektion „calendly“ (Baukasten) ---------- */
.termin {
  background-color: #ffffff;
  background-image: radial-gradient(circle at 31% 0%, rgb(255 255 255) 0%, transparent 30%), radial-gradient(circle at 45% 94%, rgb(255 255 255) 0%, transparent 50%), radial-gradient(circle at 45% 0%, rgb(255 255 255) 0%, transparent 30%), radial-gradient(circle at 47% 45%, rgb(76 107 194 / 0.09) 0%, transparent 38%), radial-gradient(circle at 67% 0%, rgb(255 255 255) 0%, transparent 30%);
  padding: 57px 0 49.2px;
  text-align: center;
}
.termin__siegel { --spalten: 6; display: block; height: auto; }
.termin__titel {
  --spalten: 20; margin-top: 47.7px; margin-bottom: 12px;
  font-family: var(--font-kit-header-font), 'Helvetica Neue', Arial, sans-serif; font-weight: 800; font-size: 31px; line-height: 1.1; letter-spacing: -0.4px; color: #000000;
}
.termin__text { --spalten: 20; margin-top: 0; margin-bottom: 0; font-size: 16px; line-height: 24px; color: rgb(0 0 0 / .65); }
.termin__kalender { margin-top: 56px; width: 100%; height: 700px; min-width: 320px; }
.termin__kalender iframe { display: block; width: 100%; height: 100%; border: 0; }
.termin__hilfe { margin: 0; font-size: 16px; line-height: 24px; color: #000000; }
@media (max-width: 768px) {
  .termin { padding: 28px 0 34.8px; }
}

/* ---------- Buchungsfenster geschlossen (eigener Code, Sektion auf /start) ---------- */
.geschlossen {
  --bwc-border: #385cb126; --bwc-shadow: #385cb114; --bwc-tint: #385cb10f; --bwc-card: var(--color-kit-light); --bwc-accent: var(--color-kit-key1);
  width: 100%; padding: 64px 20px; box-sizing: border-box; font-family: var(--font-kit-text-font); background: var(--color-kit-white);
}
.geschlossen__innen { max-width: 1250px; margin: 0 auto; }
.geschlossen__karte {
  max-width: 620px; margin: 0 auto; background: var(--bwc-card); border: 1px solid var(--bwc-border); border-radius: 26px;
  padding: 42px 44px 44px; box-shadow: 0 18px 44px var(--bwc-shadow); display: flex; flex-direction: column; align-items: center; text-align: center;
}
.geschlossen__titel { margin: 0; font-size: 29px; line-height: 1.15; font-weight: 800; }
@media (max-width: 640px) {
  .geschlossen { padding: 44px 18px; }
  .geschlossen__karte { padding: 32px 22px 34px; border-radius: 22px; }
  .geschlossen__titel { font-size: 24px; }
}

/* Das Buchungsfenster (Seitencode von /start): ohne JavaScript bleibt der Kalender sichtbar. */
[data-bw-sektion="hinweis"] { display: none !important; }
html.bw-closed [data-bw-sektion="hinweis"] { display: block !important; }
html.bw-closed [data-bw-sektion="kalender"], html.bw-closed [data-bw-sektion="kein-termin"] { display: none !important; }

/* Fußzeile unten halten, auch wenn die Seite kurz ist (Seiten-CSS von /start). */
.funnel--klebefuss { display: flex; flex-direction: column; min-height: 100vh; }
.funnel--klebefuss > main { display: flex; flex-direction: column; flex: 1 0 auto; }
.funnel--klebefuss > footer { margin-top: auto; }

/* ---------- Kein passender Termin (eigener Code) ---------- */
.kein-termin {
  --nsf-border: #385cb133; --nsf-shadow: #385cb114; --nsf-box: var(--color-kit-light);
  width: 100%; padding: 12px 20px 56px; box-sizing: border-box; font-family: var(--font-kit-text-font); background: var(--color-kit-white);
}
.kein-termin__innen { max-width: 1250px; margin: 0 auto; }
.kein-termin__box {
  max-width: 540px; margin: 0 auto; display: flex; flex-direction: column; align-items: center;
  background: var(--nsf-box); border: 1px solid var(--nsf-border); border-radius: 22px; padding: 26px 32px 28px; box-shadow: 0 14px 34px var(--nsf-shadow);
}
.kein-termin__frage { margin: 0 0 6px; font-family: inherit; font-size: 18px; line-height: 1.45; font-weight: 600; color: var(--color-kit-dark); text-align: center; }
.kein-termin__text { margin: 0; font-family: inherit; font-size: 15px; line-height: 1.55; opacity: .78; color: var(--color-kit-dark); text-align: center; }
.kein-termin__zeile { margin-top: 18px; }
@media (max-width: 640px) {
  .kein-termin { padding: 8px 18px 44px; }
  .kein-termin__box { padding: 22px 20px 24px; border-radius: 18px; }
  .kein-termin__frage { font-size: 17px; }
  .kein-termin__text { font-size: 14px; }
}

/* @siteui/inline-link: Link mit Symbol, unterstrichen in der Akzentfarbe. */
.textlink { --il-accent: var(--color-kit-key1); display: inline-flex; align-items: center; gap: 8px; color: var(--il-accent); font-family: inherit; font-size: 14px; font-weight: 600; text-decoration: none; line-height: 1.4; transition: opacity .18s ease; }
.textlink__wort { border-bottom: 2px solid var(--il-accent); padding-bottom: 2px; }
.textlink:hover { opacity: .75; }
.textlink:hover .textlink__wort { border-bottom-color: transparent; }
.textlink:focus-visible { outline: 2px solid var(--il-accent); outline-offset: 4px; border-radius: 2px; }
.textlink svg { flex: 0 0 auto; width: 20px; height: 20px; display: block; fill: var(--il-accent); }

/* ---------- Knopf des Baukastens (link-group, Typ solid, Effekt soft-line) ----------
   Größe, Farbe und Abstände je Knopf als Variablen, gemessen an der Live-Seite. Mit Symbol steht
   das Zeichen links (Kasten so breit wie der Knopf hoch, ragt in den Innenabstand). */
.bk-knopf {
  --knopf-farbe: 56 92 177; --knopf-text: 255 255 255; --knopf-groesse: 18px; --knopf-hoehe: 72px;
  --knopf-pad-v: 9px; --knopf-pad-h: 36px; --knopf-radius: 8px; --knopf-zeile: 1.5;
  position: relative; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--knopf-hoehe); max-width: 100%; padding: var(--knopf-pad-v) var(--knopf-pad-h); border-radius: var(--knopf-radius);
  font-family: var(--font-kit-text-font), 'Helvetica Neue', Arial, sans-serif; font-size: var(--knopf-groesse); line-height: var(--knopf-zeile); letter-spacing: 0;
  text-align: center; text-decoration: none; white-space: normal; cursor: pointer; -webkit-user-select: none; user-select: none;
  background-color: rgb(var(--knopf-farbe)); color: rgb(var(--knopf-text));
  box-shadow: 0 0 0 3px rgb(var(--knopf-farbe) / .3), 0 0 0 16px rgb(var(--knopf-farbe) / 0);
  transition: box-shadow .3s, background-color .3s;
}
.bk-knopf:hover { color: rgb(var(--knopf-text)); }
@media (hover: hover) { .bk-knopf:hover { box-shadow: 0 0 0 6px rgb(var(--knopf-farbe) / .3), 0 0 0 16px rgb(var(--knopf-farbe) / 0); } }
.bk-knopf:active { box-shadow: 0 0 0 3px rgb(var(--knopf-farbe) / 0), 0 0 0 0 rgb(var(--knopf-farbe) / .3); transition: box-shadow .1s; }
.bk-knopf:focus-visible { outline: revert; outline-offset: 2px; }
.bk-knopf__symbol {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; position: relative;
  min-width: var(--symbol-breite, var(--knopf-hoehe)); margin-left: calc(var(--knopf-hoehe) / -2.5 + var(--knopf-radius) / 30);
}
.bk-knopf__symbol svg { display: block; width: var(--symbol, clamp(24px, calc(var(--knopf-groesse) * 2.5), 100px)); height: var(--symbol, clamp(24px, calc(var(--knopf-groesse) * 2.5), 100px)); transform: scale(.7); fill: currentColor; }
/* Ohne Unterzeile: Zeichen kleiner, Kasten schmaler (wie im Baukasten). */
.bk-knopf--einzeilig { --symbol-breite: calc(var(--knopf-hoehe) * .8); --symbol: clamp(24px, calc(var(--knopf-groesse) * 2), 100px); }
/* Dauer-Animationen der Knöpfe: Glanz (hardBlink) und Welle (ripple). */
.bk-knopf__animation { position: absolute; inset: 0; border-radius: var(--knopf-radius); pointer-events: none; }
.bk-knopf--glanz .bk-knopf__animation { overflow: hidden; z-index: 3; }
.bk-knopf--glanz .bk-knopf__animation::before {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0;
  background: linear-gradient(120deg, rgb(255 255 255 / 0), rgb(255 255 255 / 0) 40%, rgb(255 255 255 / .3) 40%, rgb(255 255 255 / .3) 60%, rgb(255 255 255 / 0) 60%);
  animation: bk-glanz 2.5s ease infinite;
}
@keyframes bk-glanz { 0% { transform: translate3d(-100%, 0, 0) scale(2); opacity: 1; } 50% { transform: translate3d(100%, 0, 0); opacity: 0; } 51% { transform: translate3d(-100%, 0, 0); opacity: 0; } 100% { transform: translate3d(-100%, 0, 0); opacity: 1; } }
.bk-knopf--welle .bk-knopf__animation { display: flex; animation: bk-welle 2.5s ease infinite; }
@keyframes bk-welle { 0%, 40%, 50% { box-shadow: 0 0 0 0 rgb(var(--knopf-farbe) / .4); } 85% { box-shadow: 0 0 0 20px rgb(var(--knopf-farbe) / 0); } 100% { box-shadow: 0 0 0 0 rgb(var(--knopf-farbe) / 0); } }
.bk-knopf__text { display: flex; flex-direction: column; align-items: center; max-width: 100%; transform: translateY(-3%); }
.bk-knopf__symbol + .bk-knopf__text { align-items: flex-start; text-align: left; }
.bk-knopf__haupt { display: flex; flex-direction: column; align-items: center; padding: 4px 0; font-weight: 600; }
.bk-knopf__unter { font-size: .8em; line-height: 1.5; font-weight: 400; letter-spacing: .5px; margin-top: -2px; opacity: .7; }
@media (max-width: 450px) {
  .bk-knopf { --knopf-zeile: 1.2; }
  .bk-knopf__text { margin: 4px 0; }
}

/* ---------- Anleitung (Baukasten „layout“: Video von vturb und ein Knopf, volle Höhe) ---------- */
.anleitung {
  --oben: 125px; --unten: 110px;
  box-sizing: border-box; min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
  padding: var(--oben) 0 var(--unten); background: #ffffff;
}
.anleitung__spalte { text-align: center; }
.anleitung__video { width: 100%; position: relative; margin-bottom: var(--abstand, 35px); }
.anleitung__video vturb-smartplayer { display: block; margin: 0 auto; width: 100%; }
@media (max-width: 768px) {
  .anleitung { --oben: 62px; --unten: 65px; }
}
.anleitung--ob { --oben: 86px; }
@media (max-width: 768px) { .anleitung--ob { --oben: 42.5px; } }

/* ---------- Baukasten-Atome, die mehrere Sektionen teilen ---------- */
/* Logo-Atom: Breite = 2,5 × Logogröße. */
.bk-logo { display: flex; justify-content: center; }
.bk-logo a { display: block; line-height: 0; }
.bk-logo img { display: block; width: calc(var(--logo, 46px) * 2.5); height: auto; max-width: 100%; }

/* Fortschrittsbalken (Atom stats, Darstellung progress-bar): Text links, Wert rechts, Balken darunter. */
.fortschritt { display: inline-flex; flex-direction: column; gap: var(--fortschritt-abstand, 6.4px); max-width: 100%; font-family: var(--font-kit-header-font), 'Helvetica Neue', Arial, sans-serif; font-weight: 600; color: #07071a; }
.fortschritt__kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; }
.fortschritt__text { font-family: var(--font-kit-text-font), 'Helvetica Neue', Arial, sans-serif; font-weight: 400; font-size: 14px; line-height: 1.5; color: rgb(7 7 26 / .5); }
.fortschritt__wert { display: block; font-size: 32px; line-height: 1; max-height: 1em; white-space: nowrap; }
.fortschritt__einheit { margin-left: .05em; }
.fortschritt__balken { width: 100%; height: var(--fortschritt-hoehe, 5px); border-radius: 4px; overflow: hidden; background: rgb(7 7 26 / .1); }
.fortschritt__fuellung { height: 100%; border-radius: 4px; background: rgb(var(--fuellung, 6 234 50)); width: 0; transition: width .3s ease; }

/* ---------- Seite 2 (Baukasten „Hero“: Logo, Fortschritt, drei Schritte, WhatsApp-Knopf) ---------- */
.schritte { padding: 34px 0 0; background: #ffffff; color: #07071a; }
.schritte__logo { margin-bottom: 54px; }
.schritte__fortschritt { margin-bottom: 34px; }
.schritte__punkt { margin: 0 0 var(--abstand, 34px); width: var(--breite, 100%); font-family: var(--font-kit-header-font), 'Helvetica Neue', Arial, sans-serif; font-weight: 600; font-size: 22px; line-height: 1.1; letter-spacing: -0.4px; color: #07071a; }
.schritte__punkt b { font-weight: 700; }
.schritte__aktion { padding-bottom: 55px; }
@media (max-width: 768px) {
  .schritte { padding-top: 16.5px; }
  .schritte__punkt { width: 100%; }
}
/* Die Zahl steht über ihrer Endfassung (unsichtbar), damit nichts springt, während sie zählt. */
.fortschritt__zahl { display: inline-grid; font-variant-numeric: tabular-nums; }
.fortschritt__zahl > * { grid-area: 1 / 1; text-align: right; }
.fortschritt__mass { visibility: hidden; }

/* ---------- Vorbereitung: Kopf (Baukasten „Hero“) ---------- */
.vorbereitung { --rinne: 16px; padding: 74px 0 0; background: #ffffff; text-align: center; color: #000000; }
.vorbereitung__unter { margin: 0 auto 6px; font-size: 16px; line-height: 24px; }
.vorbereitung__titel { margin: 0 auto 34px; font-family: var(--font-kit-header-font), 'Helvetica Neue', Arial, sans-serif; font-weight: 700; font-size: 32px; line-height: 1.3; letter-spacing: -0.4px; color: #000000; }
@media (max-width: 768px) { .vorbereitung { padding-top: 37px; } }

/* Erfahrungen der Startseite (startseite.css) ohne Kopf: die erste Reihe beginnt direkt. */
.start-erfahrungen__reihe.start-erfahrungen__reihe--ohne-kopf { margin-top: 0; }

/* ---------- Ergebnisse (eigener Code „Ergebnisse“, Masonry aus CSS-Spalten) ---------- */
.ergebnis-wand {
  width: 100%; padding: 60px 24px 63px; font-family: var(--font-kit-text-font), 'Helvetica Neue', Arial, sans-serif;
  background-color: var(--color-kit-white, #ffffff);
  background-image: radial-gradient(circle at 28% 58%, rgb(95 123 212 / 0.1) 0%, transparent 30%), radial-gradient(circle at 31% 0%, rgb(247 247 247) 0%, transparent 30%), radial-gradient(circle at 43% 100%, rgb(255 255 255) 0%, transparent 50%), radial-gradient(circle at 45% 0%, rgb(255 255 255) 0%, transparent 30%), radial-gradient(circle at 48% 55%, rgb(76 107 194 / 0.03) 0%, transparent 30%), radial-gradient(circle at 67% 0%, rgb(247 247 247) 0%, transparent 30%), radial-gradient(circle at 70% 51%, rgb(95 123 212 / 0.25) 0%, transparent 36%);
}
.ergebnis-wand__innen { max-width: 1250px; margin: 0 auto; }
.ergebnis-wand__titel { margin: 0 auto 40px; text-align: center; font-family: var(--font-kit-header-font), var(--font-kit-text-font), 'Helvetica Neue', Arial, sans-serif; font-weight: 800; font-size: 32px; line-height: 1.25; color: var(--color-kit-dark, #07071a); }
.ergebnis-wand__marke { background: rgb(56 92 177 / .35); border-radius: 6px; padding: 0 8px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ergebnis-wand__spalten { column-count: 3; column-gap: 32px; }
.ergebnis-wand__eintrag { break-inside: avoid; margin: 0 0 32px; }
.ergebnis-wand__bild { display: block; width: 100%; height: auto; border-radius: 16px; box-shadow: 2px 0 37px -12px rgb(0 0 0 / .46); }
@media (max-width: 1024px) { .ergebnis-wand__spalten { column-count: 2; } }
@media (max-width: 640px) { .ergebnis-wand__spalten { column-count: 1; } .ergebnis-wand { padding: 44px 16px 48px; } .ergebnis-wand__titel { font-size: 26px; } }

/* ---------- YouTube-Videos (Baukasten „yt“): drei nebeneinander, auf dem Handy untereinander ----------
   Wie im Baustein video: erst das Vorschaubild, der Player von YouTube lädt beim Klick (cm.js, data-youtube). */
.yt-sektion { padding: 28px 0 61px; background: #ffffff; }
.yt-sektion__titel { --spalten: 16; margin: 0 auto 56px; font-family: var(--font-kit-header-font), 'Helvetica Neue', Arial, sans-serif; font-weight: 600; font-size: 24px; line-height: 1.3104; letter-spacing: -0.4px; color: #07071a; text-align: center; }
.yt-sektion__raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 48px; }
.yt-video { position: relative; aspect-ratio: 16 / 9; margin-bottom: 20px; border-radius: 4px; overflow: hidden; background: #000000; }
.yt-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-video__fassade { position: absolute; inset: 0; display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: #000000; cursor: pointer; }
.yt-video__bild { display: block; width: 100%; height: 100%; object-fit: cover; }
.yt-video__play { position: absolute; left: 50%; top: 50%; width: 68px; height: 48px; transform: translate(-50%, -50%); }
.yt-video__play svg { display: block; width: 100%; height: 100%; }
.yt-video__fassade:focus-visible { outline: 3px solid #ffffff; outline-offset: -3px; }
@media (max-width: 768px) {
  .yt-sektion { padding: 13.5px 0 30.5px; }
  .yt-sektion__raster { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
}

/* Markierung „Hintergrund“ (highlight background): volle Fläche in der Farbe der Markierung, weiße Schrift. */
.pinsel.pinsel--voll { background-image: none; background-color: rgb(var(--pinsel)); color: #ffffff; border-radius: calc(.08em + .5ch - .25em) / .08em; }

/* ---------- Wistia-Player aus Code-Bausteinen (bleiben bei Wistia) ----------
   Bis das Skript von Wistia den Player kennt, steht die verschwommene Vorschau in 16:9 da (wie im Baustein). */
.wistia-einbettung { position: relative; width: 100%; }
.wistia-einbettung wistia-player { display: block; }
.wistia-einbettung wistia-player:not(:defined) { background: center / contain no-repeat var(--swatch, none); display: block; filter: blur(5px); padding-top: 56.25%; }

/* ---------- Vorbereitung, zweite Fassung: drei Schritte mit Videos ---------- */
.vorbereitung--zwei {
  color: #010101;
  background-image: radial-gradient(circle at 0% 36%, rgb(95 123 212 / 0.1) 0%, transparent 30%), radial-gradient(circle at 31% 0%, rgb(255 255 255) 0%, transparent 30%), radial-gradient(circle at 45% 94%, rgb(255 255 255) 0%, transparent 50%), radial-gradient(circle at 45% 0%, rgb(255 255 255) 0%, transparent 30%), radial-gradient(circle at 45% 21%, rgb(76 107 194 / 0.28) 0%, transparent 24%), radial-gradient(circle at 60% 0%, rgb(255 255 255) 0%, transparent 30%), radial-gradient(circle at 88% 9%, rgb(95 123 212 / 0.25) 0%, transparent 27%);
}
.vorbereitung--zwei .vorbereitung__unter { color: #010101; }
.vorbereitung__aufgabe { margin: 0 auto 34px; font-family: var(--font-kit-header-font), 'Helvetica Neue', Arial, sans-serif; font-weight: 700; font-size: 24px; line-height: 1.3104; letter-spacing: -0.4px; color: #010101; }
.vorbereitung__schritt { margin: 0 auto var(--abstand, 15px); font-family: var(--font-kit-header-font), 'Helvetica Neue', Arial, sans-serif; font-weight: 400; font-size: 20px; line-height: 1.1; letter-spacing: -0.4px; color: #010101; }
.vorbereitung__schritt b { font-weight: 700; }
.vorbereitung__schritt--gross { font-weight: 700; font-size: 24px; line-height: 1.3104; }
.vorbereitung__video { margin: 0 auto 54px; }
/* Die Fragen-Videos: drei je Reihe mit 16 px Rinne, auf dem Handy untereinander. */
.fragen-videos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 16px; align-items: start; margin-bottom: var(--reihe, 0px); }
.fragen-videos > * { margin-bottom: var(--abstand, 20px); }
@media (max-width: 768px) {
  .vorbereitung__aufgabe, .vorbereitung__schritt { width: 100% !important; }
  .fragen-videos { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
}

/* ---------- Ergebnisse als Galerie des Baukastens (Atom gallery, masonry) ----------
   Die Bilder gehen reihum in drei Spalten (1, 2, 3, 1, …); auf dem Handy eine Spalte in der Reihenfolge aus order. */
.galerie-sektion {
  padding: 61px 0 63px;
  background-color: #ffffff;
  background-image: radial-gradient(circle at 28% 58%, rgb(95 123 212 / 0.1) 0%, transparent 30%), radial-gradient(circle at 31% 0%, rgb(247 247 247) 0%, transparent 30%), radial-gradient(circle at 43% 100%, rgb(255 255 255) 0%, transparent 50%), radial-gradient(circle at 45% 0%, rgb(255 255 255) 0%, transparent 30%), radial-gradient(circle at 48% 55%, rgb(76 107 194 / 0.03) 0%, transparent 30%), radial-gradient(circle at 67% 0%, rgb(247 247 247) 0%, transparent 30%), radial-gradient(circle at 70% 51%, rgb(95 123 212 / 0.25) 0%, transparent 36%);
}
.galerie-sektion__titel { margin: 0 0 40px; text-align: center; font-family: var(--font-kit-header-font), 'Helvetica Neue', Arial, sans-serif; font-weight: 800; font-size: 32px; line-height: 1.4; letter-spacing: -0.4px; color: #010101; }
.galerie { display: flex; align-items: flex-start; gap: 32px; margin-bottom: 20px; }
.galerie__spalte { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 32px; }
.galerie__bild { display: block; width: 100%; height: auto; border-radius: 16px; box-shadow: 2px 0 37px -12px rgb(0 0 0 / .46); }
@media (max-width: 768px) {
  .galerie-sektion { padding: 30px 0 31.5px; }
  .galerie { flex-direction: column; align-items: stretch; }
  .galerie__spalte { display: contents; }
}
.yt-sektion { --titel-abstand: 56px; }
.yt-sektion .yt-sektion__titel { margin-bottom: var(--titel-abstand); }

/* ---------- Kopfzeile (Baukasten header-v2): Logo links, Instagram und YouTube rechts ----------
   Bis 992 px Breite steht rechts ein Menüknopf; das Menü klappt oben als Karte auf, dahinter ein
   dunkler, verschwommener Schleier (funnel.js, data-menue). */
.kopf { position: relative; z-index: 16; margin-top: -1px; background: #f7f7f7; color: #07071a; }
.kopf__zeile { display: flex; align-items: center; column-gap: 16px; }
.kopf__logo { flex: 0 0 auto; width: 80.477%; padding: 24px 0; }
.kopf__logo a, .kopf-menue__logo { display: block; width: 147.5px; line-height: 0; }
.kopf__logo img, .kopf-menue__logo img { display: block; width: 100%; height: auto; }
.kopf__sozial { flex: 0 0 auto; width: 16.959%; min-width: 118.39px; padding: 24px 0; display: flex; justify-content: flex-end; gap: 16px; }
/* Social-Atom ohne Fläche: Zeichen 18,2 px (26 px, auf 70 % verkleinert), etwas links vom Link wie im Baukasten. */
.sozial-symbol { display: flex; align-items: center; width: 24px; height: 19.5px; color: inherit; }
.sozial-symbol svg { flex: none; display: block; width: 26px; height: 26px; margin-left: -6px; transform: scale(.7); fill: currentColor; }
.kopf__menueknopf { display: none; margin-left: auto; padding: 24px 0; }
.kopf__burger {
  display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 4px;
  background: rgb(220 220 220); color: #07071a; cursor: pointer;
  box-shadow: 0 0 0 3px rgb(220 220 220 / .3), 0 0 0 16px rgb(220 220 220 / 0); transition: box-shadow .3s;
}
@media (hover: hover) { .kopf__burger:hover { box-shadow: 0 0 0 6px rgb(220 220 220 / .3), 0 0 0 16px rgb(220 220 220 / 0); } }
.kopf__burger svg { display: block; width: 21px; height: 21px; }
@media (max-width: 992px) {
  .kopf__logo { width: auto; }
  .kopf__sozial { display: none; }
  .kopf__menueknopf { display: flex; }
}
.kopf-menue[hidden] { display: none; }
.kopf-menue__schleier { position: fixed; inset: 0; z-index: 9999; background: rgb(0 0 0 / .23); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.kopf-menue__tafel { position: fixed; top: 0; left: 0; z-index: 10000; width: 100%; padding: 16px; }
.kopf-menue__karte {
  background: #ffffff; color: #07071a; border-radius: 8px; box-shadow: 0 16px 32px rgb(17 17 26 / .1), 0 95px 140px rgb(17 17 26 / .1);
  transform: translateY(-10%); transition: transform .6s cubic-bezier(0, .89, .13, .99);
}
.kopf-menue__kopf { position: relative; display: flex; align-items: center; padding: 24px; }
.kopf-menue__zu {
  position: absolute; right: 24px; top: 50%; display: flex; align-items: center; justify-content: center; width: 28px; height: 21px; margin-top: -10.5px;
  padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer;
}
.kopf-menue__zu svg { display: block; width: 19.6px; height: 19.6px; }
.kopf-menue__inhalt { padding: 24px; opacity: 0; transform: translateY(-20%); transition: transform .7s cubic-bezier(0, .89, .13, .99), opacity .3s ease; }
.kopf-menue__sozial { display: flex; gap: 16px; }
.kopf-menue.ist-offen .kopf-menue__karte, .kopf-menue.ist-offen .kopf-menue__inhalt { transform: none; opacity: 1; }

/* ---------- VSL-Kopf (Baukasten „Hero“ auf /yt): Titel, Text, Wistia-Video, Bewertung, Knopf ---------- */
.vsl-kopf { --rinne: 16px; padding: 54px 0 36px; background: #ffffff; text-align: center; color: #07071a; }
.vsl-kopf__titel { margin: 0 auto 8px; font-family: var(--font-kit-header-font), 'Helvetica Neue', Arial, sans-serif; font-weight: 800; font-size: 22px; line-height: 1.1; letter-spacing: -0.4px; color: #07071a; }
.vsl-kopf__text { margin: 0 auto 26px; font-size: 14px; line-height: 21px; color: rgb(7 7 26 / .65); }
.vsl-kopf__video { margin-bottom: 14px; border-radius: 4px; overflow: hidden; }
.vsl-kopf__bewertung { margin-bottom: 17px; }
.vsl-kopf__aktion { margin-bottom: 17px; }
.vsl-kopf__liste { margin: 0; font-size: 14px; line-height: 21px; color: rgb(7 7 26 / .83); }
@media (max-width: 768px) {
  .vsl-kopf { padding-top: 26.5px; }
  .vsl-kopf__titel, .vsl-kopf__text { width: 100% !important; }
}

/* Bewertung (Atom person): Gesichter überlappen sich, daneben fünf Sterne und eine Zeile Text. */
.bewertung { display: flex; justify-content: center; align-items: center; gap: 16px; }
.bewertung__bilder { display: flex; flex: 0 0 auto; }
.bewertung__bilder img { display: block; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.bewertung__bilder img + img { margin-left: -20.72px; }
.bewertung__text { text-align: left; }
.bewertung__sterne { display: flex; gap: 2px; height: 24px; color: rgb(255 214 20); }
.bewertung__sterne svg { display: block; width: 16px; height: 16px; padding: 2.4px; fill: currentColor; }
.bewertung__titel { margin: 0; font-size: 14px; line-height: 21px; color: #07071a; }

/* ---------- Referenzen (eigener Code): drei Interviews quer, acht Stimmen hochkant, alle bei Wistia ---------- */
.referenzen { width: 100%; padding: 56px 24px 64px; background: #ffffff; font-family: var(--font-kit-text-font), 'Helvetica Neue', Arial, sans-serif; }
.referenzen__innen { max-width: 1250px; margin: 0 auto; }
.referenzen__titel { margin: 0 auto 36px; max-width: 940px; text-align: center; }
.referenzen__marke { background: #d9def7; color: #07071a; border-radius: 8px; padding: 0 10px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.referenzen__quer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; max-width: 1250px; margin: 0 auto 18px; }
.referenzen__hoch { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.referenzen__karte { margin: 0; }
.referenzen__video { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; line-height: 0; background: center / cover no-repeat var(--swatch, none); }
.referenzen__video--hoch { aspect-ratio: 9 / 16; }
.referenzen__video wistia-player { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.referenzen__unterschrift { display: flex; flex-direction: column; align-items: center; gap: 1px; margin-top: 10px; text-align: center; }
.referenzen__name { font-weight: 700; font-size: 14px; line-height: 1.3; color: #07071a; }
.referenzen__handle { font-size: 13px; color: #385cb1; text-decoration: none; }
.referenzen__handle:hover { text-decoration: underline; }
@media (max-width: 1024px) { .referenzen__hoch { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px) { .referenzen__quer { grid-template-columns: minmax(0, 1fr); max-width: 520px; } }
@media (max-width: 560px) {
  .referenzen { padding: 40px 16px 48px; }
  .referenzen__hoch { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Wer steht hinter dem Fitpreneur Collective (Baukasten „layout“, nur auf dem Desktop) ---------- */
.team { padding: 52px 0 79px; background: #ffffff; text-align: center; color: #07071a; }
.team__titel { margin: 0 auto 30px; font-family: var(--font-kit-header-font), 'Helvetica Neue', Arial, sans-serif; font-weight: 700; font-size: 24px; line-height: 1.3104; letter-spacing: -0.4px; }
.team__text { margin: 0 auto 33px; font-size: 16px; line-height: 24px; color: rgb(7 7 26 / .67); }
.team__person { display: flex; justify-content: center; align-items: center; gap: 16px; margin-bottom: 20px; }
.team__person:last-child { margin-bottom: 0; }
.team__person img { flex: 0 0 auto; display: block; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.team__wer { text-align: left; }
.team__name { margin: 0; font-size: 18px; line-height: 27px; font-weight: 700; }
.team__rolle { margin: 0; font-size: 14px; line-height: 21px; }
/* Sichtbarkeit „desktop“ im Baukasten: erst ab 993 px Breite. */
@media (max-width: 992px) { .team { display: none; } }

/* ---------- Terminbuchung mit Handschrift (globale Baukasten-Sektion „calendly“ der Website) ---------- */
.buchung { padding: 50px 0 64px; background: #ffffff; text-align: center; color: #07071a; }
.buchung__hand { margin: 0; font-family: 'Caveat', cursive; font-size: 22px; line-height: 33px; color: rgb(7 7 26 / .83); }
.buchung__titel { margin: 0 0 8px; font-size: 20px; line-height: 30px; font-weight: 700; color: rgb(7 7 26 / .83); }
.buchung__hinweis { margin: 0 0 9px; font-size: 14px; line-height: 21px; color: rgb(0 0 0 / .56); }
.buchung__kalender { width: 100%; height: 700px; min-width: 320px; }
.buchung__kalender iframe { display: block; width: 100%; height: 100%; border: 0; }
.buchung__hilfe { margin: 0; font-size: 16px; line-height: 24px; color: #07071a; }
@media (max-width: 768px) { .buchung { padding: 24.5px 0 42px; } }

/* ---------- Fußleiste (Baukasten „Fußzeile“): Logo und zwei Social-Knöpfe, mittig ---------- */
.fussleiste { padding: 61px 0 90px; background: #f7f7f7; text-align: center; }
.fussleiste__logo { display: block; width: 165px; margin: 0 auto 28px; line-height: 0; }
.fussleiste__logo img { display: block; width: 100%; height: auto; }
.fussleiste__sozial { display: flex; justify-content: center; gap: 16px; }
.fussleiste__sozial a {
  display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 8px;
  background: rgb(220 220 220); color: #07071a; box-shadow: 0 0 0 3px rgb(220 220 220 / .3), 0 0 0 16px rgb(220 220 220 / 0); transition: box-shadow .3s;
}
@media (hover: hover) { .fussleiste__sozial a:hover { box-shadow: 0 0 0 6px rgb(220 220 220 / .3), 0 0 0 16px rgb(220 220 220 / 0); } }
.fussleiste__sozial svg { display: block; width: 19.6px; height: 19.6px; fill: currentColor; }
@media (max-width: 768px) { .fussleiste { padding: 30px 0 65px; } }

/* Ergebnisse als Galerie, zweite globale Sektion (auf /video1): weißer Grund, Überschrift im Schnitt „m“ des Baukastens. */
.galerie-sektion--weiss { background-image: none; }
.galerie-sektion__titel--m { font-weight: 600; line-height: 1.3; color: #07071a; }

/* ---------- VSL in zwei Schritten (Baukasten „layout“ auf /video1, volle Höhe) ----------
   Logo, „Schritt 1“ mit dem vturb-Player, „Schritt 2“ mit dem Knopf aus dem Code-Baustein. */
.vsl-schritte { box-sizing: border-box; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-top: 1px; background: #ffffff; text-align: center; color: #07071a; }
.vsl-schritte__logo { margin-bottom: 86px; }
.vsl-schritte__schritt { margin: 0 auto 20px; font-size: 18px; line-height: 27px; font-weight: 700; color: #07071a; }
/* flow-root: auch ohne geladenen Player (Höhe 0) bleiben beide Abstände stehen, wie die Abstandshalter im Baukasten. */
.vsl-schritte__video { display: flow-root; margin-bottom: 29px; }
.vsl-schritte__video vturb-smartplayer { display: block; margin: 0 auto; width: 100%; }
.vsl-schritte__code { margin-bottom: 20px; }
@media (max-width: 768px) {
  .vsl-schritte { padding-top: 0; }
  .vsl-schritte__schritt { width: 100% !important; }
}

/* ---------- Mehrstufiges Formular (Onepage-Formular: Fortschritt, eine Frage je Schritt) ----------
   Verhalten in funnel-formular.js. Werte gemessen an /video1 (Desktop 1440, Handy 390). */
.formular { padding: 51px 0 200px; background: #ffffff; color: #07071a; }
@media (max-width: 768px) { .formular { padding: 25px 0 100px; } }
.formular__fortschritt { display: flex; flex-direction: column; align-items: center; margin-bottom: 40px; }
.formular__fortschritt[hidden] { display: none; }
.formular__prozent { margin: 0 0 7px; font-size: 14px; line-height: 21px; color: #07071a; white-space: nowrap; }
.formular__balken { width: 140px; height: 7px; border-radius: 100px; overflow: hidden; background: rgb(7 7 26 / .1); }
.formular__fuellung { height: 100%; width: 0; border-radius: 100px; background: #385cb1; transition: width .3s ease; }
/* flow-root: der Abstand unter dem letzten Element bleibt im Schritt, wie die Abstandshalter im Baukasten. */
.formular__schritt { display: flow-root; }
.formular__schritt[hidden] { display: none; }
/* Schritte, deren Navigation nicht ausgeblendet ist, behalten deren Platz (Zeilenabstand 48 px und 24 px). */
.formular__schritt--navigation { padding-bottom: 72px; }
.formular__schritt > * { margin-top: 0; margin-bottom: var(--abstand, 20px); }
.formular__frage { margin-left: auto; margin-right: auto; font-family: var(--font-kit-header-font), 'Helvetica Neue', Arial, sans-serif; font-weight: 600; font-size: 32px; line-height: 1.3; letter-spacing: -0.4px; text-align: center; color: #07071a; }
.formular__frage b { font-weight: 700; }
.formular__text { font-size: 16px; line-height: 24px; text-align: center; color: #07071a; }
.formular__text p { margin: 0 0 16px; }
.formular__text p:last-child { margin-bottom: 0; }
.formular__aktion { display: flex; justify-content: center; }
button.bk-knopf { border: 0; margin: 0; }

/* Eingabefeld (Atome form-name, form-email, form-phone-number): 64 px hoch, Rahmen als Schatten, Fehler in Orange. */
.feld { display: block; text-align: left; font-size: 17px; line-height: 24px; }
.feld__label { display: block; padding-bottom: 8.5px; font-weight: 600; }
.feld__rahmen { position: relative; display: block; border-radius: 6px; background: #ffffff; box-shadow: 0 0 0 1px rgb(7 7 26 / .15), inset 0 0 0 .1px rgb(7 7 26 / .15); transition: box-shadow .3s ease; }
.feld__rahmen input {
  display: block; box-sizing: border-box; width: 100%; min-height: 64px; margin: 0; padding: 15.15px 19px 16.85px; border: 0; border-radius: 6px;
  background: transparent; font-family: var(--font-kit-text-font), 'Helvetica Neue', Arial, sans-serif; font-size: 17px; font-weight: 400; color: #07071a; outline: none;
}
.feld__rahmen input::placeholder { color: rgb(7 7 26 / .3); opacity: 1; }
.feld--fehler .feld__rahmen { box-shadow: 0 0 0 1px rgb(255 97 57), inset 0 0 0 .1px rgb(255 97 57); }
.feld__fehler { display: block; padding-top: 7.65px; font-size: 15.3px; line-height: 24px; color: rgb(255 97 57); }
.feld__fehler[hidden] { display: none; }
/* Telefon: Flagge links über einer unsichtbaren Länderwahl, die Nummer rückt ein. */
.feld--telefon .feld__rahmen input { padding-left: 64px; }
.feld__land { position: absolute; left: 0; top: 0; width: 64px; height: 100%; z-index: 1; }
.feld__land select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.feld__flagge { position: absolute; left: 19.3px; top: 50%; width: 25.5px; height: 17px; margin-top: -8.5px; overflow: hidden; background: rgb(238 240 239); pointer-events: none; display: flex; align-items: center; justify-content: center; font-size: 9px; line-height: 1; font-weight: 600; color: #07071a; }
.feld__flagge svg { display: block; width: 100%; height: 100%; }

/* Auswahl als Liste (form-select, checklist): je Option ein Feld mit Kreis, nach der Wahl geht es weiter. */
.auswahl { display: flex; flex-direction: column; gap: 15px; margin-left: 0; margin-right: 0; padding: 0; border: 0; min-width: 0; text-align: left; }
.auswahl__option {
  position: relative; display: flex; align-items: center; min-height: 56px; border-radius: 6px; cursor: pointer; -webkit-user-select: none; user-select: none;
  background: rgb(7 7 26 / .05); box-shadow: 0 0 0 1px rgb(7 7 26 / .15), inset 0 0 0 .1px rgb(7 7 26 / .15); font-size: 15px; line-height: 24px; color: #07071a;
}
.auswahl__option:active { transform: scale(.95); transition: transform .2s ease; }
.auswahl__option:has(input:focus-visible) { outline: 2px solid Highlight; outline: 2px solid -webkit-focus-ring-color; outline-offset: 2px; }
.auswahl__option input { position: absolute; left: 18.25px; top: 18.25px; width: 19.5px; height: 19.5px; margin: 0; opacity: 0; cursor: pointer; }
.auswahl__kreis {
  position: absolute; left: 18.25px; top: 18.25px; width: 21.45px; height: 21.45px; border-radius: 50%; display: flex; align-items: center; justify-content: center; pointer-events: none;
  background: rgb(7 7 26 / .05); box-shadow: 0 0 0 1px rgb(7 7 26 / .15), inset 0 0 0 .1px rgb(7 7 26 / .15);
}
.auswahl__kreis::before { content: ""; width: 11.7px; height: 11.7px; border-radius: 50%; background: #07071a; transform: scale(0); transition: transform .3s ease; }
.auswahl__option input:checked ~ .auswahl__kreis::before { transform: scale(1); }
.auswahl__beschriftung { display: flex; flex-direction: column; justify-content: center; gap: 1.5px; padding: 7px 17px 7px 56px; }
.auswahl__titel { display: block; }
.auswahl__option input:checked ~ .auswahl__beschriftung .auswahl__titel { font-weight: 600; }
.auswahl__beschreibung { display: block; padding-bottom: 2.4px; font-size: 12px; line-height: 1.4; color: rgb(7 7 26 / .7); }

/* Ladeanzeige (form-loader, bars_fade): drei Balken in der Akzentfarbe, danach geht es von selbst weiter. */
.formular__laden { display: flex; justify-content: center; height: 119px; }
.formular__laden svg { display: block; width: 112px; height: 112px; transform: scale(.7); fill: #385cb1; }

/* Absage („Disqualify“): Bild, Dank, Hinweise, Social-Knöpfe in den Markenfarben. */
.absage__bild { display: block; width: 100%; aspect-ratio: 100 / 43; height: auto; object-fit: cover; object-position: 50% 32%; border-radius: 24px; }
.absage__text { font-size: 18px; line-height: 27px; text-align: center; color: #07071a; }
.absage__text--leise { color: rgb(7 7 26 / .62); }
.absage__sozial { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; }
.marken-knopf {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 6px 24px; border-radius: 8px;
  font-size: 14px; line-height: 21px; font-weight: 600; color: #ffffff; text-decoration: none; transition: box-shadow .3s;
  box-shadow: 0 0 0 3px rgb(var(--marke) / .3), 0 0 0 16px rgb(var(--marke) / 0);
}
@media (hover: hover) { .marken-knopf:hover { box-shadow: 0 0 0 6px rgb(var(--marke) / .3), 0 0 0 16px rgb(var(--marke) / 0); } }
.marken-knopf:hover { color: #ffffff; }
.marken-knopf svg { flex: none; width: 28px; height: 28px; margin: -4px 1px -4px -8px; transform: scale(.7); fill: currentColor; }
.marken-knopf span { padding: 4px 0; }
.marken-knopf--instagram { --marke: 224 68 125; background: rgb(217 217 217) radial-gradient(92.18% 99.11% at 26.56% 107.7%, rgb(255 221 85) 0%, rgb(255 221 85) 10%, rgb(255 84 62) 50%, rgb(200 55 171) 100%); }
.marken-knopf--youtube { --marke: 255 0 0; background: rgb(255 0 0); }

/* Fortschrittsbalken mit der Zahl links (bar_content_position „top-left“ im Baukasten). */
.fortschritt__kopf--umgekehrt .fortschritt__wert { order: 1; }
.fortschritt__kopf--umgekehrt .fortschritt__text { order: 2; text-align: right; }

/* ---------- Video freigegeben (Formular „VSL Opt in Neu“): Ergebnis, zwei Felder, breiter Knopf ---------- */
.freigabe { padding: 101px 0 50px; background: #ffffff; text-align: center; color: #07071a; }
.freigabe__schritt { padding-bottom: 99px; }
.freigabe__schritt > * { margin-top: 0; margin-bottom: var(--abstand, 20px); }
.freigabe__klein { font-size: 14px; line-height: 21px; }
.freigabe__titel { font-family: var(--font-kit-header-font), 'Helvetica Neue', Arial, sans-serif; font-weight: 600; font-size: 27px; line-height: 1.2; letter-spacing: -0.4px; color: #07071a; }
.freigabe__titel .pinsel { color: #07071a; }
.freigabe__gross { font-size: 18px; line-height: 27px; }
.freigabe__text { font-size: 16px; line-height: 24px; }
.freigabe__stand { display: flex; justify-content: center; }
@media (max-width: 768px) { .freigabe { padding: 50px 0 25px; } }
/* Eingabefeld in Größe „m“ (15 px, 56 px hoch). */
.feld--m { font-size: 15px; }
.feld--m .feld__label { padding-bottom: 7.5px; }
.feld--m .feld__rahmen input { min-height: 56px; padding: 13.25px 17px 14.75px; font-size: 15px; }
.feld--m .feld__fehler { padding-top: 6.75px; font-size: 13.5px; }
/* Knopf über die ganze Breite (width_key 100). */
.bk-knopf.bk-knopf--breit { display: flex; width: 100%; }

/* ---------- Altes Quiz (/quiz-alt): sechs Fragen, Fortschritt als Linie oben über die ganze Breite ---------- */
.quiz-alt { position: relative; padding: 81px 0 0; background: #ffffff; text-align: center; color: #07071a; }
@media (max-width: 768px) { .quiz-alt { padding-top: 50px; } }
.formular__linie { position: absolute; top: 0; left: 0; width: 100%; height: 10px; background: rgb(7 7 26 / .1); }
.formular__linie .formular__fuellung { border-radius: 0; transition: width .3s ease; }
.quiz-alt__kopf > * { margin-top: 0; margin-bottom: var(--abstand, 20px); }
.quiz-alt__logo { margin-bottom: 10px; }
.quiz-alt__titel { font-family: var(--font-kit-header-font), 'Helvetica Neue', Arial, sans-serif; font-weight: 600; font-size: 32px; line-height: 1.3; letter-spacing: -0.4px; color: #07071a; }
.quiz-alt__text { font-size: 16px; line-height: 24px; }
.quiz-alt__haken { width: 30%; margin-left: auto; margin-right: auto; }
.quiz-alt__hinweis { font-size: 12px; line-height: 18px; font-weight: 700; }
.quiz-alt__frage { margin: 0 auto 20px; font-size: 18px; line-height: 27px; font-weight: 700; }
.quiz-alt__laden { width: 71.468%; margin-left: auto; margin-right: auto; }
@media (max-width: 768px) { .quiz-alt__haken, .quiz-alt__laden { width: 100%; } }
.formular__laden--kreis svg { fill: #385cb1; }
/* Auswahl mit Buchstaben statt Kreis (badge_type „letter“). */
.auswahl--buchstaben .auswahl__kreis { display: none; }
.auswahl__buchstabe {
  position: absolute; left: 10.1px; top: 10.1px; width: 35.8px; height: 35.8px; border-radius: 3.3px; pointer-events: none;
  display: flex; align-items: center; justify-content: center; background: rgb(7 7 26 / .1); font-size: 13.5px; font-weight: 600; color: #07071a;
}

/* ---------- VSL-Quiz mit Headline-Splittest (eigener Code „VSL Quiz (Splittest)“ auf /quiz) ----------
   Werte unverändert aus dem CSS-Modul, Verhalten in funnel-formular.js (data-vsl-quiz). */
.vsl-quiz { position: relative; width: 100%; background: var(--color-kit-white, #ffffff); padding: 54px 20px 80px; font-family: var(--font-kit-text-font), 'Helvetica Neue', Arial, sans-serif; color: var(--color-kit-dark, #07071a); }
.vsl-quiz [hidden] { display: none !important; }
.vsl-quiz__fortschritt { position: absolute; top: 0; left: 0; right: 0; height: 6px; background: #ececef; }
.vsl-quiz__fuellung { height: 100%; background: var(--color-kit-key1, #385cb1); transition: width .45s cubic-bezier(.4, 0, .2, 1); }
.vsl-quiz__innen { max-width: 760px; margin: 0 auto; }
.vsl-quiz__quiz { text-align: center; }
.vsl-quiz__logo { height: 46px; width: auto; display: inline-block; margin-bottom: 14px; }
.vsl-quiz__titel { font-family: var(--font-kit-header-font), sans-serif; font-size: 38px; font-weight: 800; margin: 0 0 14px; line-height: 1.12; }
.vsl-quiz__hook { font-size: 17px; margin: 0 0 16px; line-height: 1.45; }
.vsl-quiz__haken { font-size: 16px; margin: 0 0 18px; line-height: 1.6; white-space: pre-line; }
.vsl-quiz__fuss { font-size: 14px; font-weight: 700; margin: 0 0 34px; line-height: 1.5; white-space: pre-line; }
.vsl-quiz__block { margin-top: 4px; }
.vsl-quiz__frage { font-family: var(--font-kit-header-font), sans-serif; font-size: 21px; font-weight: 800; margin: 0 0 22px; line-height: 1.35; }
.vsl-quiz__optionen { display: flex; flex-direction: column; gap: 14px; }
.vsl-quiz__option { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: #f2f2f4; border: 1px solid #e4e4e8; border-radius: 10px; padding: 13px 16px; cursor: pointer; font-family: inherit; font-size: 16px; color: inherit; transition: background .15s ease, border-color .15s ease, transform .05s ease; }
.vsl-quiz__option:hover { background: #eaeaee; border-color: #d8d8de; }
.vsl-quiz__option:active { transform: scale(.995); }
.vsl-quiz__buchstabe { flex: 0 0 auto; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: #e2e2e6; border-radius: 6px; font-weight: 700; font-size: 15px; }
.vsl-quiz__text { flex: 1; line-height: 1.35; }
.vsl-quiz__laden { text-align: center; padding: 90px 0 60px; }
.vsl-quiz__kreisel { width: 64px; height: 64px; margin: 0 auto 46px; border-radius: 50%; border: 7px solid transparent; border-top-color: var(--color-kit-key1, #385cb1); border-right-color: var(--color-kit-key1, #385cb1); animation: vsl-quiz-dreh .9s linear infinite; }
@keyframes vsl-quiz-dreh { to { transform: rotate(360deg); } }
.vsl-quiz__laden-klein { font-size: 15px; margin: 0 0 10px; }
.vsl-quiz__laden-gross { font-family: var(--font-kit-header-font), sans-serif; font-size: 30px; font-weight: 800; margin: 0; }
.vsl-quiz__absage { text-align: center; padding-top: 10px; }
.vsl-quiz__absage-bild { width: 100%; max-width: 700px; height: auto; border-radius: 24px; display: block; margin: 0 auto 34px; }
.vsl-quiz__absage-titel { font-family: var(--font-kit-header-font), sans-serif; font-size: 34px; font-weight: 800; margin: 0 0 18px; }
.vsl-quiz__absage-text { font-size: 18px; margin: 0 0 16px; line-height: 1.5; }
.vsl-quiz__sozial { display: flex; gap: 12px; justify-content: center; margin-bottom: 26px; }
.vsl-quiz__ig, .vsl-quiz__yt { display: inline-flex; align-items: center; gap: 8px; color: #ffffff; font-weight: 700; font-size: 15px; text-decoration: none; padding: 10px 18px; border-radius: 8px; }
.vsl-quiz__ig:hover, .vsl-quiz__yt:hover { color: #ffffff; }
.vsl-quiz__ig { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
.vsl-quiz__yt { background: #ff0000; }
.vsl-quiz__seite { font-size: 17px; }
.vsl-quiz__seite a { color: inherit; text-decoration: underline; }
@media (max-width: 768px) {
  .vsl-quiz { padding: 40px 16px 60px; }
  .vsl-quiz__titel { font-size: 30px; }
  .vsl-quiz__frage { font-size: 19px; }
  .vsl-quiz__option { padding: 12px 13px; }
  .vsl-quiz__absage-titel { font-size: 27px; }
  .vsl-quiz__laden-gross { font-size: 24px; }
}

/* ---------- Rechner (eigener Code „Rechner + Cases“ auf /rechner) ----------
   Regler, Ergebnis, Stufen und Fälle; Werte unverändert aus dem CSS-Modul, Verhalten in funnel.js
   (data-fp-rechner). Die Köpfe erscheinen beim Laden wie mit framer-motion (rechner__auftritt). */
.rechner {
  width: 100%;
  padding: clamp(40px, 5vw, 72px) 20px clamp(56px, 6vw, 90px);
  background: var(--color-kit-light, #F7F7F7);
  color: var(--color-kit-dark, #07071a);
  font-family: var(--font-kit-text-font);
}
.rechner--voll {
  min-height: var(--con-kit-section-min-height, 100vh);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.rechner__container {
  max-width: 1250px;
  margin: 0 auto;
  width: 100%;
}
.rechner__kopf {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.rechner__eyebrow {
  display: inline-block;
  font-family: var(--font-kit-header-font);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-kit-key1, #385cb1);
  margin-bottom: 10px;
}
.rechner__intro {
  max-width: 560px;
  margin: 10px auto 0;
  color: #3a3a44;
}
.rechner__markiert {
  background: #385cb126;
  color: inherit;
  font-weight: 600;
  padding: 0 3px;
  border-radius: 4px;
}
.rechner__karte {
  max-width: 1080px;
  margin: clamp(20px, 2.6vw, 32px) auto 0;
  background: var(--color-kit-white, #ffffff);
  border: 1px solid #07071a0f;
  border-radius: 24px;
  padding: clamp(24px, 3.2vw, 44px);
  box-shadow: 0 30px 70px -38px #07071a4d;
}
.rechner__raster {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(24px, 3vw, 40px);
  align-items: stretch;
}
.rechner__eingaben {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.rechner__chips-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #07071a8c;
  margin-bottom: 8px;
}
.rechner__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.rechner__chip {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-kit-key1, #385cb1);
  background: #385cb10f;
  border: 1px solid #385cb133;
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}
.rechner__chip:hover {
  background: #385cb11f;
}
.rechner__chip:focus-visible {
  outline: 2px solid var(--color-kit-key1, #385cb1);
  outline-offset: 2px;
}
.rechner__chip--aktiv {
  background: var(--color-kit-key1, #385cb1);
  color: #ffffff;
  border-color: var(--color-kit-key1, #385cb1);
}
.rechner__ergebnis {
  background: var(--color-kit-dark, #07071a);
  border-radius: 18px;
  padding: clamp(22px, 2.6vw, 32px);
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.rechner__ergebnis-label {
  font-family: var(--font-kit-header-font);
  font-size: 14px;
  font-weight: 700;
  color: #9db4e8;
}
.rechner__ergebnis-wert {
  font-family: var(--font-kit-header-font);
  font-weight: 700;
  font-size: clamp(38px, 4.6vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.5px;
  margin: 10px 0 22px;
}
.rechner__ergebnis-raster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  border-top: 1px solid #ffffff1f;
  padding-top: 20px;
}
.rechner__ergebnis-feld {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.rechner__ergebnis-zahl {
  font-family: var(--font-kit-header-font);
  font-weight: 700;
  font-size: 20px;
}
.rechner__ergebnis-text {
  font-size: 12.5px;
  color: #ffffffa6;
  line-height: 1.4;
}
.rechner__aktion {
  margin-top: clamp(22px, 2.8vw, 32px);
  border-top: 1px solid #07071a12;
  padding-top: clamp(20px, 2.6vw, 30px);
  display: flex;
  justify-content: center;
}
.rechner__weg {
  max-width: 820px;
  margin: clamp(48px, 6vw, 80px) auto 0;
}
.rechner__leiste {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding-top: 44px;
}
.rechner__linie {
  position: absolute;
  top: 54px;
  left: 16.6667%;
  right: 16.6667%;
  border-top: 3px dashed #c9d4ef;
}
.rechner__linie-voll {
  position: absolute;
  top: 54px;
  left: 16.6667%;
  width: calc(66.6667% * var(--prog, 0));
  border-top: 3px solid var(--color-kit-key1, #385cb1);
  transition: width 0.7s cubic-bezier(0.3, 1, 0.4, 1);
}
.rechner__stufe {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.rechner__punkt {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--color-kit-white, #ffffff);
  border: 3px solid #c9d4ef;
  box-sizing: border-box;
  z-index: 1;
  transition:
    border-color 0.4s ease,
    background 0.4s ease,
    box-shadow 0.4s ease;
}
.rechner__stufe--erreicht .rechner__punkt {
  border-color: var(--color-kit-key1, #385cb1);
  background: var(--color-kit-key1, #385cb1);
}
.rechner__stufe--aktuell .rechner__punkt {
  box-shadow: 0 0 0 7px #385cb122;
  animation: rechner-puls 2.2s ease-in-out infinite;
}
@keyframes rechner-puls {
  0%, 100% {
    box-shadow: 0 0 0 6px #385cb126;
  }
  50% {
    box-shadow: 0 0 0 11px #385cb114;
  }
}
.rechner__marke {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 8px);
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.35s ease;
  background: var(--color-kit-dark, #07071a);
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 999px;
  white-space: nowrap;
  z-index: 2;
  pointer-events: none;
}
.rechner__stufe--aktuell .rechner__marke {
  opacity: 1;
  transform: translate(-50%, 0);
}
.rechner__stufe-text {
  margin-top: 12px;
}
.rechner__stufe-text b {
  display: block;
  font-family: var(--font-kit-header-font);
  font-weight: 700;
  font-size: 16px;
  color: var(--color-kit-key1, #385cb1);
}
.rechner__stufe-text > span {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: #07071a8c;
  margin-top: 2px;
}
.rechner__gesichter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 6px;
  margin-top: 10px;
}
.rechner__gesicht {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 2.5px solid #ffffff;
  box-shadow: 0 4px 10px #07071a2e;
  margin-left: -8px;
  background: var(--color-kit-key1, #385cb1);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-kit-header-font);
  font-size: 12px;
  font-weight: 700;
  overflow: hidden;
}
.rechner__gesicht:first-child {
  margin-left: 0;
}
.rechner__gesicht img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rechner__buehne {
  max-width: 1080px;
  margin: clamp(30px, 4vw, 48px) auto 0;
}
.rechner__buehne-kopf {
  text-align: center;
  margin-bottom: 20px;
}
.rechner__buehne-unter {
  margin: 10px 0 0;
  font-size: 14px;
  color: #07071a8c;
}
.rechner__stapel {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 640px;
  margin: 0 auto;
}
.rechner__fall {
  width: 100%;
  background: var(--color-kit-white, #ffffff);
  border: 1px solid #07071a0f;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 24px 54px -30px #07071a59;
}
.rechner__fall-medium {
  background: transparent;
}
.rechner__fall-medium--hoch {
  padding: 18px 18px 0;
  display: flex;
  justify-content: center;
}
.rechner__video-quer {
  width: 100%;
}
.rechner__video-hoch {
  width: min(58%, 250px);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 14px 34px -16px #07071a4d;
}
.rechner__fall-inhalt {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.rechner__wer {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rechner__wer img {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  object-fit: cover;
}
.rechner__initialen {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--color-kit-key1, #385cb1);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-kit-header-font);
  font-weight: 700;
  font-size: 13px;
  flex: none;
}
.rechner__wer b {
  display: block;
  font-family: var(--font-kit-header-font);
  font-size: 15.5px;
  line-height: 1.2;
}
.rechner__wer a {
  font-size: 12.5px;
  color: var(--color-kit-key1, #385cb1);
  text-decoration: none;
  font-weight: 600;
}
.rechner__wer a:hover {
  text-decoration: underline;
}
.rechner__wer a:focus-visible {
  outline: 2px solid var(--color-kit-key1, #385cb1);
  outline-offset: 2px;
}
.rechner__verlauf {
  display: flex;
  flex-direction: column;
}
.rechner__schritt {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 10px;
}
.rechner__schritt-linie {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.rechner__schritt-linie i {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #9db4e8;
  flex: none;
  margin-top: 5px;
}
.rechner__schritt:last-child .rechner__schritt-linie i {
  background: var(--color-kit-key1, #385cb1);
  box-shadow: 0 0 0 4px #385cb129;
}
.rechner__schritt-linie u {
  flex: 1;
  border-left: 2px dashed #c9d4ef;
  margin: 3px 0;
  text-decoration: none;
}
.rechner__schritt:last-child .rechner__schritt-linie u {
  display: none;
}
.rechner__schritt-text {
  padding-bottom: 12px;
}
.rechner__schritt-text small {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--color-kit-key1, #385cb1);
  font-family: var(--font-kit-header-font);
}
.rechner__schritt-text p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
}
.rechner__nachrichten {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rechner__blase {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 10px;
  align-items: start;
  background: var(--color-kit-white, #ffffff);
  border: 1px solid #07071a14;
  border-radius: 12px;
  padding: 11px 13px;
  box-shadow: 0 6px 18px -12px #07071a40;
}
.rechner__blase-bild {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  object-fit: cover;
}
.rechner__blase-initialen {
  background: var(--color-kit-key1, #385cb1);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-kit-header-font);
  font-weight: 700;
  font-size: 12px;
}
.rechner__blase-inhalt {
  min-width: 0;
}
.rechner__blase-kopf {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.rechner__blase-kopf b {
  font-size: 13.5px;
  font-family: var(--font-kit-header-font);
}
.rechner__blase-kopf span {
  font-size: 11px;
  color: #07071a66;
}
.rechner__blase-inhalt p {
  margin: 2px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
}
.rechner__reaktionen {
  display: flex;
  gap: 5px;
  margin-top: 7px;
}
.rechner__reaktionen i {
  font-style: normal;
  font-size: 11.5px;
  background: #f4f6fb;
  border: 1px solid #07071a14;
  border-radius: 999px;
  padding: 2px 9px;
}
.rechner__beweis img {
  border-radius: 12px;
  width: 100%;
  border: 1px solid #07071a14;
  box-shadow: 0 6px 18px -12px #07071a40;
}
.rechner__hinweis {
  margin: 18px auto 0;
  text-align: center;
  font-size: 12.5px;
  color: #07071a80;
  max-width: 640px;
}
@media (max-width: 900px) {
  .rechner__raster {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 759px) {
  .rechner__leiste {
    display: flex;
    flex-direction: column;
    gap: 26px;
    padding: 6px 0 0 4px;
  }
  .rechner__linie {
    left: 14px;
    top: 14px;
    bottom: 14px;
    right: auto;
    width: 0;
    border-top: none;
    border-left: 3px dashed #c9d4ef;
  }
  .rechner__linie-voll {
    left: 14px;
    top: 14px;
    width: 0;
    height: calc((100% - 28px) * var(--prog, 0));
    border-top: none;
    border-left: 3px solid var(--color-kit-key1, #385cb1);
    transition: height 0.7s cubic-bezier(0.3, 1, 0.4, 1);
  }
  .rechner__stufe {
    display: grid;
    grid-template-columns: 28px 1fr;
    column-gap: 14px;
    align-items: start;
    text-align: left;
  }
  .rechner__punkt {
    grid-column: 1;
    grid-row: 1;
    margin-top: 2px;
    justify-self: center;
  }
  .rechner__stufe-text {
    grid-column: 2;
    grid-row: 1;
    margin-top: 0;
  }
  .rechner__gesichter {
    justify-content: flex-start;
  }
  .rechner__marke {
    position: static;
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    transform: none;
    margin-top: 8px;
    display: none;
  }
  .rechner__stufe--aktuell .rechner__marke {
    display: inline-block;
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 480px) {
  .rechner__video-hoch {
    width: min(70%, 250px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .rechner__punkt,
  .rechner__linie-voll,
  .rechner__marke {
    transition: none;
  }
  .rechner__punkt {
    animation: none;
  }
}
.rechner__auftritt { animation: rechner-auftritt .6s ease-out both; }
.rechner__auftritt--spaet { --auftritt-y: 28px; animation-delay: .15s; }
@keyframes rechner-auftritt { from { opacity: 0; transform: translateY(var(--auftritt-y, 22px)); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rechner__auftritt { animation: none; } }
.wistia-kachel wistia-player { display: block; }
/* Die Bilder tragen hier Breite und Höhe im HTML; die Höhe folgt der Breite. */
.rechner__beweis img { height: auto; }

/* @siteui/range-slider (dieselben Werte wie .start-regler in startseite.css) */
.regler {
  width: 100%;
  font-family: var(--font-kit-text-font);
}
.regler__kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.regler__label {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-kit-dark, #07071a);
  line-height: 1.35;
}
.regler__wert {
  font-family: var(--font-kit-header-font);
  font-weight: 700;
  font-size: 15px;
  color: var(--color-kit-key1, #385cb1);
  background: #385cb114;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.regler__schieber {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background:
    linear-gradient(
      to right,
      var(--color-kit-key1, #385cb1) 0%,
      var(--color-kit-key1, #385cb1) var(--pct, 50%),
      #07071a14 var(--pct, 50%),
      #07071a14 100%);
  outline: none;
  cursor: pointer;
}
.regler__schieber::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--color-kit-white, #ffffff);
  border: 3px solid var(--color-kit-key1, #385cb1);
  box-shadow: 0 2px 6px #07071a2e;
  cursor: grab;
}
.regler__schieber::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--color-kit-white, #ffffff);
  border: 3px solid var(--color-kit-key1, #385cb1);
  box-shadow: 0 2px 6px #07071a2e;
  cursor: grab;
}
.regler__schieber:active::-webkit-slider-thumb {
  cursor: grabbing;
}
.regler__schieber:focus-visible {
  box-shadow: 0 0 0 3px #385cb14d;
}

/* @siteui/wistia-video: Vorschau aus Wistia als Hintergrund, der Player liegt darüber. */
.wistia-kachel {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  line-height: 0;
}
.wistia-kachel__player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ---------- Schluss mit Knopf (eigener Code „Call-CTA“ auf /rechner) ---------- */
.schluss {
  width: 100%;
  padding: clamp(56px, 7vw, 100px) 20px;
  font-family: var(--font-kit-text-font);
}
.schluss--voll {
  min-height: var(--con-kit-section-min-height, 100vh);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.schluss__container {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.schluss__eyebrow {
  display: inline-block;
  font-family: var(--font-kit-header-font);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9db4e8;
  margin-bottom: 14px;
}
.schluss__lead {
  max-width: 620px;
  margin: 14px auto 0;
}
.schluss__lead-text {
  opacity: 0.85;
}
.schluss__aktion {
  margin-top: clamp(24px, 3.4vw, 38px);
  display: flex;
  justify-content: center;
}

/* ---------- Fußzeile mittig (eigener Code „Footer“ auf /rechner) ---------- */
.fuss-mitte {
  width: 100%;
  padding: clamp(48px, 6vw, 80px) 24px clamp(36px, 4vw, 56px);
  background: var(--color-kit-light, #F7F7F7);
  color: var(--color-kit-dark, #07071a);
  font-family: var(--font-kit-text-font);
}
.fuss-mitte--voll {
  min-height: var(--con-kit-section-min-height, 100vh);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.fuss-mitte__container {
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
}
.fuss-mitte__logo-link {
  display: inline-block;
}
.fuss-mitte__logo {
  max-width: 190px;
  height: auto;
}
.fuss-mitte__sozial {
  display: flex;
  align-items: center;
  gap: 16px;
}
.fuss-mitte__symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-kit-key1, #385cb1);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.fuss-mitte__symbol:hover {
  opacity: 0.7;
  transform: translateY(-2px);
}
.fuss-mitte__symbol:focus-visible {
  outline: 2px solid var(--color-kit-key1, #385cb1);
  outline-offset: 4px;
  border-radius: 6px;
}
.fuss-mitte__recht {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.fuss-mitte__link {
  color: #07071acc;
  text-decoration: none;
}
.fuss-mitte__link:hover {
  text-decoration: underline;
}
.fuss-mitte__link:focus-visible {
  outline: 2px solid var(--color-kit-key1, #385cb1);
  outline-offset: 3px;
}
.fuss-mitte__punkt {
  color: #07071a66;
}
.fuss-mitte__copyright {
  margin: 0;
  font-size: 12px;
  color: #07071a80;
}