/*
 * Kunden-, Team- und allgemeine Seiten von fitpreneur-collective.com
 * (Willkommensseiten, Onboarding, Coaching-Tool, Kapazitätstafel, Stellenseite,
 * Reviews), nachgebaut aus Onepage am 14.10.2026. Hier steht, was mehrere
 * dieser Seiten teilen; das CSS einer einzelnen Seite liegt in kunden-*.css.
 *
 * Die Werte der Baukasten-Sektionen (Kopf mit Logo, Willkommen) sind an der
 * Live-Seite gemessen, Desktop 1440 und Handy 390; die Bausteine aus eigenem
 * Code (Fußzeile) kommen aus @siteui/site-footer. Werte unverändert.
 */

/* Onepage legt jede Sektion 1 px über die vorige (margin-top: -1px). */
.op-seite > main > *, .op-seite > footer { margin-top: -1px; }

/* ---------- Kopf mit Logo (globale Baukasten-Sektion der Willkommensseiten) ---------- */
.op-kopf { position: relative; z-index: 2; background: #f7f7f7; padding: 20px 32px 13px; }
.op-kopf__logo { display: block; width: 145px; margin: 0 auto 7px; line-height: 0; }
.op-kopf__logo img { display: block; width: 145px; height: auto; }
@media (max-width: 768px) { .op-kopf { padding: 9.5px 24px 6.5px; } }

/* ---------- Willkommen (Baukasten-Sektion: Titel, Text, Video, Text, Knöpfe) ---------- */
.willkommen {
  position: relative; z-index: 1; color: #010101;
  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%);
}
.willkommen__rahmen { min-height: 100vh; padding: 43px 32px 0; display: flex; flex-direction: column; justify-content: center; }
/* 19 von 24 Spalten eines Rasters von 1250 px mit 24 px Rinne, wie im Baukasten. */
.willkommen__spalte { width: calc((min(100%, 1250px) + 48px) * 19 / 24 - 48px); margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; }
.willkommen__spalte > * { margin-top: 0; margin-bottom: var(--abstand, 0px); }
.willkommen__titel { 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: #010101; width: 100%; }
.willkommen__text { font-family: var(--font-kit-text-font), 'Helvetica Neue', Arial, sans-serif; font-weight: 400; font-size: 16px; line-height: 24px; color: #010101; width: var(--breite, 100%); }
.willkommen__video { width: 100%; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; position: relative; }
.willkommen__knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; max-width: 100%; }
@media (max-width: 992px) { .willkommen__spalte { width: calc(100% - 38px); } }
@media (max-width: 768px) {
  .willkommen__rahmen { padding: 21px 24px 0; }
  .willkommen__spalte { width: 100%; }
  .willkommen__text { width: 100%; }
}

/* Markierung „Pinselstrich“ (brush-marker) im Titel: Verlauf in Fitpreneur-Blau, etwas breiter als das Wort. */
.marker { position: relative; z-index: 0; background: none; color: #080d19; padding: 0 .5ch; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.marker::before { content: ''; position: absolute; z-index: -1; left: calc(.5ch - 6px); top: 2%; width: calc(100% - 1ch + 12px); height: 100%; border-radius: .12em; background-image: linear-gradient(90deg, rgb(56 92 177 / .4), rgb(56 92 177 / .34) 4%, rgb(56 92 177 / .1)); pointer-events: none; }

/* Knöpfe des Baukastens: voll (solid) oder Linie, mit weichem Ring (soft-line). */
.op-knopf {
  position: relative; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; max-width: 100%; padding: 7px 28px; border-radius: var(--knopf-radius, 16px);
  font-family: var(--font-kit-text-font), 'Helvetica Neue', Arial, sans-serif; font-weight: 600; font-size: 15px; line-height: 1.5;
  text-align: center; text-decoration: none; white-space: normal; cursor: pointer; -webkit-user-select: none; user-select: none;
  background-color: #385cb1; color: #ffffff;
  box-shadow: 0 0 0 3px rgb(56 92 177 / .3), 0 0 0 16px rgb(56 92 177 / 0);
  transition: box-shadow .3s, background-color .3s;
}
.op-knopf:active { box-shadow: 0 0 0 3px rgb(56 92 177 / 0), 0 0 0 0 rgb(56 92 177 / .3); transition: box-shadow .1s; }
.op-knopf:focus-visible { outline: revert; outline-offset: 2px; }
.op-knopf--linie { background-color: transparent; color: #385cb1; box-shadow: inset 0 0 0 1px #95a1d6, 0 0 0 3px rgb(149 161 214 / .3), 0 0 0 16px rgb(149 161 214 / 0); }
.op-knopf--linie:active { box-shadow: inset 0 0 0 1px #95a1d6, 0 0 0 3px rgb(149 161 214 / 0), 0 0 0 0 rgb(149 161 214 / .3); }
@media (hover: hover) {
  .op-knopf:hover { box-shadow: 0 0 0 6px rgb(56 92 177 / .3), 0 0 0 16px rgb(56 92 177 / 0); }
  .op-knopf--linie:hover { box-shadow: inset 0 0 0 1px #95a1d6, 0 0 0 6px rgb(149 161 214 / .3), 0 0 0 16px rgb(149 161 214 / 0); background-color: rgb(149 161 214 / .1); }
}
.op-knopf__text { display: flex; flex-direction: column; align-items: center; max-width: 100%; transform: translateY(-3%); }
.op-knopf__label { display: flex; flex-direction: column; align-items: center; padding: 4px 0; }
.op-knopf__unter { font-size: 12px; font-weight: 400; line-height: 18px; letter-spacing: .5px; margin-top: -2px; opacity: .7; }
@media (max-width: 450px) {
  .op-knopf { line-height: 1.2; }
  .op-knopf__text { margin: 4px 0; }
  .willkommen__knoepfe .op-knopf { min-width: 100%; }
}

/* ---------- Wistia (bleibt bei Wistia eingebettet, wie bei Onepage) ---------- */
.wistia wistia-player { display: block; width: 100%; height: 100%; }
.wistia wistia-player:not(:defined) { background: center / cover no-repeat var(--swatch, none); filter: blur(5px); }

/* Das Video groß im Fenster (kunden.js, data-wistia-popup): quer 16:9 breit, hochkant 9:16 schmal. */
.wistia-fenster { position: fixed; inset: 0; z-index: 9999; background: #07071ae0; display: flex; align-items: center; justify-content: center; padding: 24px; }
.wistia-fenster__karte { position: relative; max-height: 86vh; border-radius: 18px; overflow: hidden; background: #000000; box-shadow: 0 40px 90px -30px #000000; }
.wistia-fenster__player { display: block; width: 100%; height: 100%; border: 0; }
.wistia-fenster__zu { position: absolute; top: 10px; right: 10px; z-index: 3; width: 34px; height: 34px; border: 0; border-radius: 50%; background: #07071a8f; color: #ffffff; font-size: 20px; line-height: 1; cursor: pointer; }
.wistia-fenster__zu:hover, .wistia-fenster__zu:focus-visible { background: #07071ad9; }

/* ---------- Fußzeile (@siteui/site-footer) ---------- */
.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; }
}

/* ---------- Kapazitätstafel (/intern-kapa): nur der Rahmen um die Tafel aus dem CSM ---------- */
.kapa { width: 100%; min-height: 100vh; display: flex; flex-direction: column; }
.kapa__rahmen { display: block; width: 100%; border: 0; min-height: 100vh; flex: 1 1 auto; }