/*
 * SheEarnsGlobal: Kunden- und Buchungsseiten von sheearnsglobal.com, nachgebaut aus
 * Onepage am 15.10.2026: Terminbuchung (/start, /start2, /start-intern), Bestätigung
 * der Buchung (/call-booked) und die Willkommensseiten (/welcome, /welcomepreaccess).
 * Die Fragebögen (/onboarding, /monthly-checkin) stehen in fragebogen.css.
 *
 * 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
 * (Buchungsfenster geschlossen, kein passender Termin, Fußzeile) kommen aus ihrem
 * CSS-Modul und den @siteui-Paketen der Site; Werte unverändert, nur die
 * Klassennamen sind lesbar. Das Verhalten (Kalender, Oval um die Hervorhebung)
 * steht in kunden.js.
 */

/* Kursive Schnitte, die /_cm/schrift/playfair-display.css und public-sans.css (noch) nicht haben:
   ohne sie nähme der Browser für 600 und 700 kursiv den Schnitt 800 kursiv (breiter) und für
   Public Sans eine schräg gestellte Normalschrift. Dateien unverändert von onecdn.io/font-storage. */
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:600;font-display:swap;src:url('/_cm/schrift/playfair-display-v40-latin-italic.woff2') format('woff2')}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:700;font-display:swap;src:url('/_cm/schrift/playfair-display-v40-latin-italic.woff2') format('woff2')}
@font-face{font-family:'Public Sans';font-style:italic;font-weight:400;font-display:swap;src:url('/_cm/schrift/public-sans-400italic.woff2') format('woff2')}

/* ---------- Grundgerüst ---------- */
/* Onepage glättet die Schrift der ganzen Seite (.con-kit-site): auf dem Mac dünner, vor allem hell auf dunkel. */
.kunden { color: #000000; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.kunden main { display: block; }
/* Onepage legt jede Sektion 1 px über die vorige (margin-top: -1px), auch die erste. */
.kunden main > section, .kunden > footer { position: relative; margin-top: -1px; }

/* Baukasten-Sektion: Abstand oben und unten aus den Einstellungen der Sektion, oben 1 px mehr;
   auf dem Handy die Hälfte (ohne das Pixel). Außen 32 px Rand (Handy 24 px), der Inhalt höchstens
   so breit wie der Container des Rasters bei Onepage: 750 px bis 991, 970 px bis 1199, 1150 px bis
   1365, darüber 1250 px. */
.bk { padding: calc(var(--bk-oben, 0px) + 1px) 0 var(--bk-unten, 0px); }
.bk__innen { width: min(var(--bk-container, 1250px), 100% - 64px); margin: 0 auto; }
@media (min-width: 769px) and (max-width: 991.98px) { .bk__innen { --bk-container: 750px; } }
@media (min-width: 992px) and (max-width: 1199.98px) { .bk__innen { --bk-container: 970px; } }
@media (min-width: 1200px) and (max-width: 1365.98px) { .bk__innen { --bk-container: 1150px; } }
@media (max-width: 768px) {
  .bk { padding: calc(var(--bk-oben, 0px) / 2) 0 calc(var(--bk-unten, 0px) / 2); }
  .bk__innen { width: calc(100% - 48px); }
}

/* „Volle Höhe“: mindestens so hoch wie das Fenster, der Inhalt steht in der Mitte. */
.bk--voll { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }

/* Spalten: n von 24, Rinne 48 px (Abstand xl der Sektion). Auf dem Handy volle Breite. */
.bk__spalte { width: calc((100% + 48px) * var(--spalten, 24) / 24 - 48px); margin-left: auto; margin-right: auto; }
@media (max-width: 768px) { .bk__spalte { width: 100%; } }
/* Tablet (768 bis 991 px) wie bei Onepage: die Zeile reicht je eine halbe Rinne über den Rand der
   Sektion hinaus, die Spalten sind dort voll breit und ohne Innenabstand; die Spaltenbreite gilt
   erst ab 992 px. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .bk__zeile { margin-left: -24px; margin-right: -24px; }
  .bk__spalte { width: 100%; }
}
/* Genau 992 px: Onepage nimmt dort schon die Spaltenbreite, aber noch keinen Innenabstand. */
@media (min-width: 992px) and (max-width: 992px) {
  .bk__zeile { margin-left: -24px; margin-right: -24px; }
  .bk__spalte { width: calc(100% * var(--spalten, 24) / 24); }
}

/* Ein Baustein (Atom): Abstand darunter aus den Einstellungen (--abstand), Breite des Textes in
   Prozent der Spalte (--breite, nur auf dem großen Bildschirm), zentriert. Zeilenumbrüche und
   doppelte Leerzeichen bleiben stehen wie im Baukasten (white-space: pre-wrap). */
.bk__atom { margin: 0 auto var(--abstand, 0px); width: var(--breite, 100%); white-space: pre-wrap; overflow-wrap: break-word; }
@media (max-width: 768px) { .bk__atom { width: 100%; } }
/* Unter einer Zeile der Sektion (außer der letzten): Abstand der Sektion (48 px) oder der eigene
   Wert der Zeile (--zeilenabstand). Der Abstand unter dem letzten Baustein bleibt in seiner Zeile
   (flow-root), statt mit dem Zeilenabstand zusammenzufallen. */
.bk__zeile { display: flow-root; }
.bk__zeile:not(:last-child) { margin-bottom: var(--zeilenabstand, 48px); }

/* Überschrift und Text des Baukastens */
.bk-titel { font-family: var(--font-kit-header-font), 'Helvetica Neue', Arial, sans-serif; font-weight: 600; letter-spacing: -0.4px; text-align: center; color: #010101; }
.bk-text { font-family: var(--font-kit-text-font), 'Helvetica Neue', Arial, sans-serif; font-weight: 400; font-size: 16px; line-height: 24px; text-align: center; color: var(--color-kit-dark); }
.bk-text--klein { font-size: 14px; line-height: 21px; }
/* Fett im Baukasten ist 700, auch in einer Überschrift mit 600 (strong wäre dort 900). */
.bk-titel strong, .bk-text strong { font-weight: 700; }
.bk-dunkel { color: var(--color-kit-dark); }
.bk-akzent { color: var(--color-kit-key1); }
/* 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; }

/* Hervorhebung „orlined“: ein gelbes Oval um die Wortgruppe. Die Wortgruppe bekommt links und
   rechts 0,75ch Luft; das Oval selbst zeichnet kunden.js je Zeile als SVG (wie Onepage: 130 %
   breit, 140 % hoch, um 16 % und 15 % nach links und oben versetzt). */
.oval { padding: 0 .75ch; }
.oval-traeger { position: relative; }
.oval__effekt { position: absolute; pointer-events: none; z-index: 1; }
.oval__effekt svg { position: absolute; left: -16%; top: -15%; width: 130%; height: 140%; overflow: visible; }
.oval__effekt ellipse, .oval__effekt path { fill: none; stroke: var(--oval-farbe, #fbb40d); stroke-width: calc(2 * .04em); stroke-miterlimit: 10; }

/* ---------- Terminbuchung: Sektion „calendly“ (Baukasten) ---------- */
.termin {
  --bk-oben: 59px; --bk-unten: 29px;
  background-color: #ffffff;
  background-image: radial-gradient(circle at 100% 0%, rgb(255 109 61 / 0.19) 0%, transparent 30%), radial-gradient(circle at 31% 0%, rgb(246 244 240) 0%, transparent 30%), radial-gradient(circle at 44% 95%, rgb(246 244 240) 0%, transparent 50%), radial-gradient(circle at 44% 1%, rgb(246 244 240) 0%, transparent 30%), radial-gradient(circle at 67% 0%, rgb(246 244 240) 0%, transparent 30%), radial-gradient(circle at 0% 45%, rgb(251 180 13 / 0.16) 0%, transparent 50%);
}
.termin__titel { font-weight: 700; font-size: 26px; line-height: 1.1; color: var(--color-kit-dark); }
/* /start2: Überschrift in der Größe m des Baukastens (32 px, Zeilenhöhe 1,3). */
.termin__titel--m { font-size: 32px; line-height: 1.3; color: #010101; }
.termin__hilfe--schwarz { color: #010101; }
/* Calendly wie im Baukasten-Baustein form-calendly: mindestens 700 px hoch, wächst mit der
   Höhe, die Calendly meldet (kunden.js). Bis das iframe geladen ist, hüpfen drei Punkte. */
.termin__kalender { position: relative; z-index: 0; width: 100%; min-width: 320px; height: 700px; min-height: 700px; }
.termin__kalender iframe { display: inline; width: 100%; height: 100%; border: 0; }
.calendly-spinner { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); text-align: center; z-index: -1; }
.calendly-spinner > div { display: inline-block; width: 18px; height: 18px; background-color: #e1e1e1; border-radius: 50%; vertical-align: middle; animation: calendly-bouncedelay 1.4s infinite ease-in-out; animation-fill-mode: both; }
.calendly-spinner .calendly-bounce1 { animation-delay: -0.32s; }
.calendly-spinner .calendly-bounce2 { animation-delay: -0.16s; }
@keyframes calendly-bouncedelay {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}

/* 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; }

/* ---------- Buchungsfenster geschlossen (eigener Code, Sektion auf /start) ---------- */
.geschlossen {
  --bwc-border: #0404411f; --bwc-shadow: #04044112; --bwc-tint: #fbb40d29;
  --bwc-card: var(--color-kit-white); --bwc-accent: var(--color-kit-key1); --bwc-text: var(--color-kit-dark);
  width: 100%; padding: 64px 20px; box-sizing: border-box; font-family: var(--font-kit-text-font); background: var(--color-kit-light);
}
.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__karte .geschlossen__titel { margin: 0; font-size: 27px; line-height: 1.15; font-weight: 700; }
@media (max-width: 640px) {
  .geschlossen { padding: 44px 18px; }
  .geschlossen__karte { padding: 32px 22px 34px; border-radius: 22px; }
  .geschlossen__karte .geschlossen__titel { font-size: 23px; }
}

/* ---------- Kein passender Termin (eigener Code) ---------- */
.kein-termin {
  --nsf-border: #04044126; --nsf-shadow: #04044112; --nsf-box: var(--color-kit-white);
  width: 100%; padding: 12px 20px 56px; box-sizing: border-box; font-family: var(--font-kit-text-font);
  /* Hintergrund „Übergang“: oben die Farbzeile, mit der die Calendly-Sektion endet, unten das Beige der Fußzeile. */
  background-image: linear-gradient(180deg, #F6F4F000 0%, #F6F4F0 82%), linear-gradient(90deg, #FEFCF6 0%, #FCFAF6 12%, #FAF9F4 25%, #F8F6F3 38%, #F7F6F2 50%, #FAF9F7 62%, #FCFBFA 75%, #FFFFFF 88%, #FFFFFF 100%);
}
.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__box .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__box .kein-termin__text { margin: 0; font-family: inherit; font-size: 15px; line-height: 1.55; font-weight: 400; 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__box .kein-termin__frage { font-size: 17px; }
  .kein-termin__box .kein-termin__text { font-size: 14px; }
}

/* @siteui/inline-link: Link mit Symbol, Linie unter dem Wort */
.textlink { --il-accent: var(--color-kit-key1); display: inline-flex; align-items: center; gap: 8px; color: var(--il-accent); font-family: inherit; 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; fill: var(--il-accent); }

/* ---------- Fußzeile der Buchungsseiten (eigener Code „Fußzeile“) ---------- */
.kunden-fuss { width: 100%; padding: 50px 24px; box-sizing: border-box; display: flex; justify-content: center; font-family: var(--font-kit-text-font); background: var(--color-kit-light); }
.kunden-fuss__container { max-width: 880px; width: 100%; display: flex; flex-direction: column; align-items: center; }
.kunden-fuss__logo { width: auto; max-width: 70%; height: 34px; display: block; }
.kunden-fuss__sozial { display: flex; gap: 12px; margin-top: 26px; }
.kunden-fuss__knopf { width: 44px; height: 44px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; transition: transform 0.15s ease; background: #ece6dc; color: var(--color-kit-dark); }
.kunden-fuss__knopf:hover { transform: translateY(-1px); }
.kunden-fuss__knopf:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.kunden-fuss__recht { font-family: inherit; font-size: 13px; text-align: center; margin: 30px 0 0; color: #04044180; }
.kunden-fuss__recht a { text-decoration: underline; color: #04044180; }
.kunden-fuss__trenner { margin: 0 10px; }
@media (max-width: 768px) {
  .kunden-fuss { padding: 40px 18px; }
  .kunden-fuss__sozial { margin-top: 22px; }
  .kunden-fuss__recht { margin-top: 26px; }
}

/* ---------- Buchung bestätigt: Sektion „layout“ (Baukasten, /call-booked) ---------- */
.gebucht {
  --bk-oben: 100px; --bk-unten: 129px;
  background-color: #ffffff;
  background-image: radial-gradient(circle at 24% 53%, rgb(255 109 61 / 0.19) 0%, transparent 30%), radial-gradient(circle at 31% 0%, rgb(246 244 240) 0%, transparent 30%), radial-gradient(circle at 43% 40%, rgb(255 197 42 / 0.03) 0%, transparent 30%), radial-gradient(circle at 44% 95%, rgb(246 244 240) 0%, transparent 50%), radial-gradient(circle at 44% 1%, rgb(246 244 240) 0%, transparent 30%), radial-gradient(circle at 64% 51%, rgb(255 215 63 / 0.33) 0%, transparent 36%), radial-gradient(circle at 67% 0%, rgb(246 244 240) 0%, transparent 30%);
}
.gebucht__vorzeile { color: rgb(1 1 1 / 0.64); }
.gebucht__titel { font-size: 22px; line-height: 1.1; }
/* Karte: Fläche weiß, Ecken 16 px, Schatten xl, innen der Abstand der Sektion (48 px, Handy 24 px). */
.gebucht__karte { background: #ffffff; border-radius: 16px; box-shadow: rgb(17 17 26 / 0.1) 0 16px 32px 0, rgb(17 17 26 / 0.1) 0 95px 140px 0; padding: 48px; }
@media (max-width: 768px) { .gebucht__karte { padding: 24px; } }

/* ---------- Willkommen: Sektion „layout“ (Baukasten, /welcome und /welcomepreaccess) ---------- */
.willkommen {
  --bk-oben: 74px; --bk-unten: 14px;
  background-color: #ffffff;
  background-image: radial-gradient(circle at 28% 29%, rgb(255 109 61 / 0.19) 0%, transparent 30%), radial-gradient(circle at 31% 0%, rgb(246 244 240) 0%, transparent 30%), radial-gradient(circle at 43% 22%, rgb(255 197 42 / 0.03) 0%, transparent 30%), radial-gradient(circle at 44% 95%, rgb(246 244 240) 0%, transparent 50%), radial-gradient(circle at 44% 1%, rgb(246 244 240) 0%, transparent 30%), radial-gradient(circle at 63% 35%, rgb(255 215 63 / 0.33) 0%, transparent 36%), radial-gradient(circle at 67% 0%, rgb(246 244 240) 0%, transparent 30%);
}
.willkommen__titel { font-size: 24px; line-height: 1.3104; color: var(--color-kit-dark); }
.willkommen__video { width: 100%; aspect-ratio: 16 / 9; border-radius: 4px; position: relative; white-space: normal; }
.willkommen__knoepfe { display: flex; justify-content: center; white-space: normal; }

/* ---------- 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); }

/* Knopf des Baukastens (link-group, voll): Fläche Orange, Schatten in der Farbe der Fläche
   (Effekt „shadow-key“), Ecken aus --knopf-radius (welcome 4 px, welcomepreaccess 8 px). */
.op-knopf {
  --knopf-farbe: 224 74 30;
  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, 4px);
  font-family: var(--font-kit-text-font), 'Helvetica Neue', Arial, sans-serif; font-weight: 600; font-size: 15px; line-height: 1.5; 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: #ffffff;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 .5px 1.1px rgb(var(--knopf-farbe) / .12), 0 1.3px 2.8px rgb(var(--knopf-farbe) / .17), 0 2.7px 5.5px rgb(var(--knopf-farbe) / .21), 0 5.5px 11.1px rgb(var(--knopf-farbe) / .26), 0 15px 29px rgb(var(--knopf-farbe) / .39);
  transition: box-shadow .3s ease;
}
.op-knopf:hover { color: #ffffff; }
.op-knopf:focus-visible { outline: revert; outline-offset: 2px; }
@media (hover: hover) {
  .op-knopf:hover { box-shadow: 0 .5px 1.1px rgb(var(--knopf-farbe) / .17), 0 1.3px 2.8px rgb(var(--knopf-farbe) / .21), 0 2.7px 5.5px rgb(var(--knopf-farbe) / .26), 0 5.5px 11.1px rgb(var(--knopf-farbe) / .39), 0 15px 29px rgb(var(--knopf-farbe) / .55); }
}
.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; }
@media (max-width: 450px) {
  .op-knopf { line-height: 1.2; }
  .op-knopf__text { margin: 4px 0; }
}