/*
 * Vorbereitung auf das Analysegespräch (leofitnesscoaching.com/vorbereitungsseite), nachgebaut aus den
 * Baukasten-Sektionen der Onepage-Seite und der Vibe-Sektion „Instagram CTA Bild“ (Stand 14.10.2026).
 * Auch Grundlage für /, die VSL-Seiten, /schritte, /willkommen, /bauchfett-reset und /vorbereitung
 * (über vsl.css): Änderungen dort mitprüfen.
 * Maße wie bei Onepage gemessen (Desktop 1440 px, Handy 390 px):
 *
 * - Raster 1250 px, darunter 1150, 970 und 750 px, am Handy volle Breite mit 24 px Rand (Desktop 32 px).
 * - Oben steht der Sektionsabstand plus ein Pixel, am Handy die Hälfte ohne den Pixel (--oben, --unten).
 * - Spaltenabstand 56 px in den Sektionen 1 bis 3 (Baukasten „xxl“), 48 px ab Sektion 5 („xl“). Am Handy
 *   stehen Spalten untereinander, 24 px auseinander. Eine Spalte ist n von 24 Teilen (--spalten).
 * - Unter jedem Baustein steht sein Abstand (--abstand, ohne Angabe 20 px), unter jeder Reihe außer der
 *   letzten der Reihenabstand (--reihenabstand; eigener Name, weil Variablen erben).
 * - Textkästen haben am Desktop die Breite aus dem Baukasten (--breite), am Handy 100 %.
 */

/* ---------- Sektion und Raster ---------- */
/* Onepage legt jede Sektion einen Pixel über die vorige und malt dabei die obere zuletzt (z-index fällt von oben nach
   unten): die gemeinsame Pixelzeile gehört der oberen Sektion. Sichtbar am Übergang zum dunklen Team-Abschnitt. */
.vb-seite > main > section:nth-child(1) { z-index: 8; }
.vb-seite > main > section:nth-child(2) { z-index: 7; }
.vb-seite > main > section:nth-child(3) { z-index: 6; }
.vb-seite > main > section:nth-child(4) { z-index: 5; }
.vb-seite > main > section:nth-child(5) { z-index: 4; }
.vb-seite > main > section:nth-child(6) { z-index: 3; }
.vb-seite > main > section:nth-child(7) { z-index: 2; }
.vb-seite > main > section:nth-child(8) { z-index: 1; }
.vb-sektion { background: var(--vb-grund, var(--color-kit-light, #fff9f9)); color: var(--color-kit-dark, #1a212a); padding: 0 32px; }
.vb-sektion--dunkel { --vb-grund: var(--color-kit-dark, #1a212a); color: #ffffff; }
.vb-sektion__rahmen { display: flex; flex-direction: column; justify-content: center; padding: calc(var(--oben, 0px) + 1px) 0 var(--unten, 0px); }
.vb-sektion--voll .vb-sektion__rahmen { min-height: 100vh; }
.vb-container { --rinne: 56px; width: 1250px; max-width: 100%; margin: 0 auto; }
.vb-sektion--xl .vb-container { --rinne: 48px; }
@media (min-width: 1200px) and (max-width: 1365.98px) { .vb-container { width: 1150px; } }
@media (min-width: 992px) and (max-width: 1199.98px) { .vb-container { width: 970px; } }
@media (min-width: 768px) and (max-width: 991.98px) { .vb-container { width: 750px; } }

/* Reihen stehen in der Mitte, wie die Sektionen (align_horizontal center). */
.vb-reihe { display: flex; align-items: flex-start; justify-content: center; gap: var(--rinne); margin-bottom: var(--reihenabstand, 0px); }
.vb-spalte { display: flex; flex-direction: column; align-items: flex-start; width: calc((100% + var(--rinne)) * var(--spalten, 24) / 24 - var(--rinne)); min-width: 0; }
.vb-spalte--mitte { align-items: center; }

@media (max-width: 768px) {
  .vb-sektion { padding: 0 24px; }
  .vb-sektion__rahmen { padding: calc(var(--oben, 0px) / 2) 0 calc(var(--unten, 0px) / 2); }
  .vb-reihe { flex-direction: column; align-items: stretch; gap: 24px; }
  .vb-spalte { width: 100%; }
}
@media (max-width: 767.98px) { .vb-container { width: 100%; } }

/* ---------- Texte: Überschriften aus dem Font-Kit (s 24 px, xs 20 px, m 32 px) und Fließtext ---------- */
.vb-titel {
  margin: 0; font-family: var(--font-kit-header-font), sans-serif; font-weight: 800;
  white-space: pre-wrap; overflow-wrap: break-word; color: inherit;
}
.vb-titel--s { font-size: 24px; line-height: 1.2096; }
.vb-titel--xs { font-size: 20px; line-height: 1.2144; }
.vb-titel--m { font-size: 32px; line-height: 1.2; }
.vb-text {
  margin: 0; font-family: var(--font-kit-text-font), sans-serif; font-weight: 500; font-size: 16px; line-height: 24px;
  white-space: pre-wrap; overflow-wrap: break-word; color: inherit;
}
.vb-text--xs { font-size: 12px; line-height: 18px; }
/* Der Abstand unter einem Baustein steht nach den Textregeln, damit deren margin: 0 ihn nicht aufhebt; die Breite
   aus dem Baukasten (vb-breit) steht danach, damit sie die volle Breite des Bausteins schlägt. */
.vb-baustein { width: 100%; margin: 0 0 var(--abstand, 20px); }
.vb-mitte { text-align: center; }
.vb-fett { font-weight: 700; }
.vb-rot { color: var(--color-kit-key1, #d12530); }
.vb-breit { width: var(--breite, 100%); }
@media (max-width: 768px) {
  /* Der Baukasten skaliert kleine Überschriften am Handy: 18 px bei 450 px Breite, 20 px bei 768 px. */
  .vb-titel--xs { font-size: calc(18px + (100vw - 450px) * 2 / 318); }
  .vb-breit { width: 100%; }
}

/* Hervorhebung (Highlight „background“): rote Fläche hinter dem Wort, einen halben Zeichenschritt breiter als der Text. */
.vb-hl { position: relative; z-index: 0; color: #ffffff; padding: 0 .5ch; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.vb-hl::before {
  content: ""; position: absolute; z-index: -1; left: calc(.5ch - .25em); right: calc(.5ch - .25em); top: 2%; height: 100%;
  border-radius: .08em; background: var(--color-kit-key1, #d12530); pointer-events: none;
}

/* ---------- Wistia: eigener Code (custom-code) und Video-Baustein ---------- */
.vb-wistia { position: relative; width: 100%; }
.vb-wistia wistia-player:not(:defined) { display: block; padding-top: 56.25%; background: center / contain no-repeat var(--swatch, none); filter: blur(5px); }
.vb-wistia--hoch wistia-player:not(:defined) { padding-top: 177.78%; }
/* Der Video-Baustein: 9:16 als 179 % Höhe, Ecken 4 px. */
.vb-video { position: relative; width: 100%; min-height: 150px; border-radius: 4px; overflow: hidden; }
.vb-video::after { content: ""; display: block; padding-bottom: 179%; }
.vb-video__player { position: absolute; inset: 0; overflow: hidden; }
.vb-video wistia-player { display: block; width: 100%; height: 100%; }

/* ---------- Laufband (Galerie „marquee“): volle Fensterbreite, Ränder ausgeblendet, hält beim Zeigen an ---------- */
.vb-band {
  position: relative; display: flex; overflow: hidden; width: 100vw; margin-left: calc(50% - 50vw);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
}
.vb-band__inhalt { position: relative; display: flex; width: max-content; will-change: transform; animation: vb-band var(--dauer, 55.5s) linear infinite; }
.vb-band:hover .vb-band__inhalt { animation-play-state: paused; }
.vb-band__reihe { display: flex; }
.vb-band__wiederholung { position: absolute; top: 0; left: 0; height: 100%; display: flex; transform: translateX(100%); }
.vb-band__bild { flex: 0 0 auto; padding: 0 8px; }
.vb-band__bild img { display: block; height: 108px; width: auto; border-radius: 16px; object-fit: cover; }
@keyframes vb-band { from { transform: translateX(0); } to { transform: translateX(-100%); } }

/* ---------- Bilderraster (Galerie „list“): drei Spalten, am Handy zwei, Format 4:3, Abstand 32 px ---------- */
.vb-raster { display: flex; flex-wrap: wrap; gap: 32px; }
.vb-raster__bild { width: calc((100% - 64px) / 3); aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; }
.vb-raster__bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 768px) { .vb-raster__bild { width: calc((100% - 32px) / 2); } }

/* ---------- Instagram CTA Bild (Vibe-Sektion) ---------- */
.vb-insta { display: flex; justify-content: center; padding: 40px 20px; background: var(--color-kit-light, #fff9f9); }
.vb-insta__rahmen { position: relative; width: 100%; max-width: 520px; border-radius: 18px; overflow: hidden; line-height: 0; box-shadow: 0 8px 24px -4px #1a212a28; }
.vb-insta__bild { display: block; width: 100%; height: auto; }
.vb-insta__ueber { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; }

/* ---------- Team: Karussell mit drei Karten (am Handy eine), Schleife, Wechsel alle 5 s ---------- */
/* Die Sektion schneidet die Karten außerhalb ab: sonst wäre die Seite am Handy so breit wie das ganze Karussell
   (das Fenster ließe sich herauszoomen, und Wistia rechnete mit dieser Breite). Die Nachbarkarten am Rand bleiben sichtbar. */
.vb-sektion--team { overflow: hidden; }
.vb-team { position: relative; align-self: stretch; margin: 0 -8px; }
.vb-team__spur { display: flex; touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; }
.vb-team__spur.ist-gezogen { cursor: grabbing; }
.vb-team__dia { display: flex; flex: 0 0 33.3333%; min-width: 0; padding: 0 8px; }
.vb-team__karte { display: flex; flex-direction: column; width: 100%; will-change: transform, opacity; }
.vb-team__bild { width: 100%; aspect-ratio: 1; margin-bottom: var(--abstand, 20px); border-radius: 16px; overflow: hidden; }
.vb-team__bild img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
.vb-team__text { color: #ffffff8a; }
.vb-team__leiste { display: flex; justify-content: space-between; align-items: center; padding-top: 8px; }
.vb-team__punkte { display: flex; align-items: center; padding: 0 8px; }
.vb-team__punkt { display: flex; align-items: center; justify-content: center; width: 21px; height: 21px; padding: 7px; border: 0; background: none; cursor: pointer; }
.vb-team__punkt::before { content: ""; display: block; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 100px; background: #ffffff; opacity: .35; transition: opacity .4s; }
.vb-team__punkt[aria-current="true"]::before { opacity: 1; }
.vb-team__punkt:focus-visible { outline: 2px solid #ffffff; outline-offset: 0; border-radius: 50%; }
.vb-team__pfeile { display: flex; gap: 9.6px; padding: 0 8px; }
.vb-team__pfeil {
  position: relative; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0;
  border: 0; border-radius: 100px; background: #ffffff; color: var(--color-kit-dark, #1a212a); cursor: pointer; transition: background-color .3s;
}
.vb-team__pfeil::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #1a212a1a; opacity: 0; transition: opacity .3s; }
.vb-team__pfeil:hover::before { opacity: 1; }
.vb-team__pfeil:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; }
.vb-team__pfeil svg { position: relative; display: block; width: 19.6px; height: 19.6px; fill: currentColor; }
.vb-team__pfeil--zurueck svg { transform: rotate(180deg); }
@media (min-width: 769px) and (max-width: 991.98px) { .vb-team__dia { flex-basis: 50%; } }
@media (max-width: 768px) { .vb-team__dia { flex-basis: 100%; } }