/*
 * Fitpreneur: alte Seiten von fitpreneur-collective.com, nachgebaut aus Onepage am 15.10.2026
 * (Gruppe „fp-alt“): /live-workshop-0, /live-workshop-bestatigung-a,
 * /live-workshop-nutrilize-bestatigung, /nutrilize-workshop-replay, /hiring-closer.
 *
 * Alles Baukasten-Sektionen ohne Quelltext: die Werte sind an der Live-Seite gemessen,
 * Desktop 1440 und Handy 390. Was die Funnel-Seiten schon haben, kommt aus funnel.css
 * (Grundgerüst .funnel, Spalten .bk__innen, Markierung .pinsel, Knopf .bk-knopf,
 * Bewertung .bewertung, Fußzeile .seitenfuss); hier steht nur, was diese Seiten zusätzlich
 * brauchen. Verhalten in alt.js.
 *
 * Sektionen, die Onepage je Gerät getrennt pflegt (auf /live-workshop-0 Kopf, Vorteile und
 * „Ist dieses Event für dich?“), stehen zweimal im HTML: .nur-desktop und .nur-handy.
 */

/* Plus Jakarta Sans 800 für die roten Live-Pillen aus den Code-Bausteinen (bei Onepage von Google Fonts). */
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url('/_cm/schrift/plus-jakarta-sans-800.woff2') format('woff2'); }

.nur-handy { display: none !important; }
@media (max-width: 768px) {
  .nur-desktop { display: none !important; }
  .nur-handy { display: block !important; }
}

/* ---------- Bausteine des Baukastens ---------- */

/* Überschrift (Atom header): Größe je Schnitt, auf dem Handy gleiten xs und l wie bei Onepage. */
.alt-titel {
  margin: 0 auto var(--abstand, 0px); width: var(--breite, 100%);
  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; text-align: center;
}
.alt-titel--xs { font-size: 20px; line-height: 1.3156; }
.alt-titel--m { font-size: 32px; line-height: 1.3; }
.alt-titel--l { font-size: 48px; line-height: 1.2792; }
.alt-titel--dunkel { color: #07071a; }
.alt-titel--blau { color: #385cb1; }
@media (max-width: 768px) {
  .alt-titel--xs { font-size: calc(15.17px + 0.629vw); line-height: 1.3156; }
  .alt-titel--l { font-size: calc(9.36px + 5.03vw); }
}

/* Text (Atom plain-text): Schnitte xl 20, l 18, m 16, s 14, xs 12. */
.alt-text {
  margin: 0 auto var(--abstand, 0px); width: var(--breite, 100%);
  font-family: var(--font-kit-text-font), 'Helvetica Neue', Arial, sans-serif; font-weight: 400;
  font-size: 16px; line-height: 24px; color: rgb(1 1 1 / var(--deckkraft, 1)); text-align: center;
}
.alt-text--xl { font-size: 20px; line-height: 30px; }
.alt-text--l { font-size: 18px; line-height: 27px; }
.alt-text--s { font-size: 14px; line-height: 21px; }
.alt-text--xs { font-size: 12px; line-height: 18px; }
.alt-text--dunkel { color: rgb(7 7 26 / var(--deckkraft, 1)); }
.alt-text a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
@media (max-width: 768px) { .alt-text--xl { font-size: 16px; line-height: 24px; } }

/* Abstand nach einem Baustein (Onepage „indent“). */
.alt-abstand { margin-bottom: var(--abstand, 0px); }

/* Person (Atom person): Bild rund, Name fett, Beschreibung blass. */
.alt-person { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 auto var(--abstand, 0px); text-align: left; }
.alt-person img { flex: none; display: block; width: var(--bild, 72px); height: var(--bild, 72px); border-radius: 50%; object-fit: cover; }
.alt-person__name { display: block; font-size: 16px; line-height: 24px; font-weight: 700; color: #010101; }
.alt-person__info { font-size: 12px; line-height: 18px; color: rgb(1 1 1 / .53); }
.alt-person__info span { display: block; }

/* Bewertung (Atom person mit Sternen) wie .bewertung in funnel.css, mit Abstand danach. */
.alt-bewertung { margin-bottom: var(--abstand, 0px); }

/* Karte mit Verlauf (text-block solid, Verlauf aus key2): „Der Live Workshop beginnt in“, „Bis hier gescrollt?“. */
.alt-verlaufskarte {
  width: min(var(--karte, 773px), 100%); margin: 0 auto; padding: 48px; border-radius: 16px; text-align: center;
  background-image: radial-gradient(circle at 0% 100%, rgb(247 247 247) 0%, transparent 70%), radial-gradient(circle at 25% 49%, rgb(95 123 212 / .24) 0%, transparent 60%), radial-gradient(circle at 47% 0%, rgb(247 247 247) 0%, transparent 70%), radial-gradient(circle at 63% 47%, rgb(76 107 194 / .42) 0%, transparent 70%), radial-gradient(circle at 90% 94%, rgb(247 247 247) 0%, transparent 70%), radial-gradient(circle at 92% 24%, rgb(95 123 212 / .05) 0%, transparent 30%);
}
.alt-verlaufskarte--b {
  background-image: radial-gradient(circle at 0% 100%, rgb(56 92 177 / .27) 0%, transparent 32%), radial-gradient(circle at 19% 60%, rgb(247 247 247) 0%, transparent 49%), radial-gradient(circle at 27% 35%, rgb(95 123 212 / .24) 0%, transparent 60%), radial-gradient(circle at 43% 0%, rgb(247 247 247) 0%, transparent 70%), radial-gradient(circle at 87% 84%, rgb(255 255 255) 0%, transparent 100%), radial-gradient(circle at 98% 7%, rgb(95 123 212 / .17) 0%, transparent 28%);
}
@media (max-width: 768px) { .alt-verlaufskarte { padding: 24px; } }

/* Knopf mit Ticket-Symbol in voller Pillenform; auf dem Handy etwas breiter als die Spalte (wie gemessen). */
.alt-knopfzeile { display: flex; justify-content: center; margin-bottom: var(--abstand, 0px); }
.alt-knopfzeile--breit .bk-knopf { min-width: calc(100% + 18px); margin: 0 -9px; }
@media (min-width: 769px) { .alt-knopfzeile--breit .bk-knopf { min-width: 0; margin: 0; } }

/* Galerie (Atom gallery, masonry): drei Spalten reihum, auf dem Handy eine Spalte in der Reihenfolge der Daten. */
.alt-galerie { display: flex; align-items: flex-start; gap: var(--luecke, 32px); margin: 0 auto var(--abstand, 0px); }
.alt-galerie__spalte { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--luecke-v, 33px); }
.alt-galerie img { display: block; width: 100%; height: auto; border-radius: 16px; box-shadow: var(--schatten, 0 0 8px 2px rgb(0 0 0 / .14)); }
@media (max-width: 768px) {
  .alt-galerie { flex-direction: column; align-items: stretch; gap: var(--luecke-handy, 16px); }
  .alt-galerie__spalte { display: contents; }
}

/* Fußzeile (globale Baukasten-Sektion „Fußzeile“): Logo, zwei Social-Knöpfe, Hinweis mit Links. */
.alt-fuss { position: relative; margin-top: -1px; padding: 51px 0 70px; background: #f7f7f7; text-align: center; }
.alt-fuss__logo { display: block; width: 178px; margin: 0 auto 28px; line-height: 0; }
.alt-fuss__logo img { display: block; width: 100%; height: auto; }
.alt-fuss .fussleiste__sozial { margin-bottom: 40px; }
.alt-fuss__hinweis { width: min(1250px, 100% - 64px); margin: 0 auto; font-size: 12px; line-height: 18px; color: rgb(7 7 26 / .37); white-space: pre-line; }
.alt-fuss__hinweis a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
@media (max-width: 768px) {
  .alt-fuss { padding: 25px 0 46px; }
  .alt-fuss__hinweis { width: calc(100% - 48px); }
}

/* Rote Live-Pille aus den Code-Bausteinen, wörtlich (pulsierender Schein und Punkt). */
.alt-pille {
  display: inline-flex; align-items: center; gap: 6px; background: #ffffff; color: #d62828;
  font-family: 'Plus Jakarta Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 800; font-size: 11px; letter-spacing: 0.6px;
  text-decoration: none; padding: 5px 14px; border: 1.5px solid #d62828; border-radius: 999px;
  box-shadow: 0 0 6px rgba(214,40,40,0.55), 0 0 14px rgba(214,40,40,0.4);
  animation: alt-pille-schein 1.8s ease-in-out infinite; white-space: nowrap; cursor: default;
}
.alt-pille:hover { color: #d62828; }
.alt-pille__punkt { display: inline-block; width: 6px; height: 6px; background: #d62828; border-radius: 50%; box-shadow: 0 0 4px rgba(214,40,40,0.9); animation: alt-pille-punkt 1.8s ease-in-out infinite; }
@keyframes alt-pille-schein { 0%, 100% { box-shadow: 0 0 5px rgba(214,40,40,0.5), 0 0 10px rgba(214,40,40,0.3); } 50% { box-shadow: 0 0 10px rgba(214,40,40,0.9), 0 0 22px rgba(214,40,40,0.6); } }
@keyframes alt-pille-punkt { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.85); } }

/* ==================== /live-workshop-0 ==================== */

/* Volle Breite mit 32 px (Handy 24 px) Rand: so breit legt Onepage diese Sektionen an. */
.alt-voll { width: calc(100% - 64px); margin: 0 auto; }
@media (max-width: 768px) { .alt-voll { width: calc(100% - 48px); } }

/* Kopf: Bild aus dem Code-Baustein mit weichen Rändern, Pille unten darauf (Code wörtlich, Klassen umbenannt). */
.alt-held { position: relative; padding: 0 0 32px; background-color: #ffffff;
  background-image: radial-gradient(circle at 28% 30%, rgb(95 123 212 / .1) 0%, transparent 30%), radial-gradient(circle at 31% 0%, rgb(247 247 247) 0%, transparent 30%), radial-gradient(circle at 45% 0%, rgb(247 247 247) 0%, transparent 30%), radial-gradient(circle at 45% 67%, rgb(255 255 255) 0%, transparent 100%), radial-gradient(circle at 48% 26%, rgb(76 107 194 / .03) 0%, transparent 30%), radial-gradient(circle at 67% 0%, rgb(247 247 247) 0%, transparent 30%), radial-gradient(circle at 72% 19%, rgb(95 123 212 / .25) 0%, transparent 36%);
}
.alt-held__spalte { width: calc((100% + 72px) * 19 / 24 - 72px); margin: 0 auto; text-align: center; }
.alt-held__bild { position: relative; max-width: 700px; margin: 0 auto; line-height: 0; }
.alt-held__rahmen { overflow: hidden; line-height: 0; }
.alt-held__bild img {
  width: 100%; height: auto; display: block;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%), linear-gradient(to bottom, black 70%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%), linear-gradient(to bottom, black 70%, transparent 100%);
  mask-composite: intersect;
}
.alt-held__pille { position: absolute; left: 50%; bottom: 3%; transform: translateX(-50%); line-height: normal; width: max-content; }
.alt-held__pille .alt-pille { gap: 8px; font-size: 13px; padding: 7px 18px; }
.alt-held__pille .alt-pille__punkt { width: 8px; height: 8px; }
.alt-held__titel { font-size: 39px; line-height: 1.4; }
.alt-held__karte { margin-top: 19px; }
.alt-held__karte .alt-titel { margin-bottom: 23px; }
@media (max-width: 768px) {
  .alt-held { padding-bottom: 16px;
    background-image: radial-gradient(circle at 0% 0%, rgb(113 139 230 / .09) 0%, transparent 23%), radial-gradient(circle at 24% 41%, rgb(255 255 255) 0%, transparent 70%), radial-gradient(circle at 52% 41%, rgb(255 255 255) 0%, transparent 70%), radial-gradient(circle at 100% 39%, rgb(56 92 177 / .1) 0%, transparent 17%);
  }
  .alt-held__spalte { width: 100%; }
  .alt-held__bild { width: 100vw; max-width: none; left: 50%; margin-left: -50vw; }
  .alt-held__bild img { width: 120%; max-width: none; margin-left: -10%; -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%); mask-image: linear-gradient(to bottom, black 70%, transparent 100%); -webkit-mask-composite: source-over; mask-composite: add; }
  .alt-held__pille .alt-pille { gap: 6px; font-size: 11px; padding: 5px 14px; }
  .alt-held__pille .alt-pille__punkt { width: 6px; height: 6px; }
  .alt-held__titel { font-size: 24px; line-height: 1.3104; }
  .alt-held__karte { margin-top: 39px; margin-bottom: 20px; }
  .alt-held__karte .alt-titel { margin-bottom: 0; }
  .alt-held .alt-person { justify-content: flex-start; }
}

/* Vorteile: Karte mit Liste, „Warum du live dabei sein solltest“, Stimmen, Karte mit Knopf. */
.alt-vorteile { position: relative; padding: 65px 0 17px; background-color: #ffffff;
  background-image: radial-gradient(circle at 20% 0%, rgb(255 255 255) 0%, transparent 25%), radial-gradient(circle at 28% 26%, rgb(95 123 212 / .07) 0%, transparent 30%), radial-gradient(circle at 31% 0%, rgb(255 255 255) 0%, transparent 30%), radial-gradient(circle at 35% 49%, rgb(255 255 255) 0%, transparent 21%), radial-gradient(circle at 43% 100%, rgb(255 255 255) 0%, transparent 50%), radial-gradient(circle at 43% 22%, rgb(76 107 194 / .03) 0%, transparent 30%), radial-gradient(circle at 44% 0%, rgb(255 255 255) 0%, transparent 30%), radial-gradient(circle at 59% 24%, rgb(95 123 212 / .05) 0%, transparent 36%), radial-gradient(circle at 67% 0%, rgb(255 255 255) 0%, transparent 30%);
}
.alt-vorteile__karte {
  width: min(820px, 100%); margin: 0 auto 86px; padding: 48px 61px 48px 49px; border-radius: 16px;
  background: rgb(255 255 255 / .89); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 8px 56px rgb(17 17 26 / .1), 0 32px 140px rgb(17 17 26 / .1);
}
.alt-vorteile__karte .alt-titel { font-weight: 700; width: 90.44%; margin-bottom: 23px; color: #07071a; }
.alt-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.alt-liste li { display: flex; gap: 13px; align-items: flex-start; font-size: 16.8px; line-height: 25.2px; color: #07071a; }
.alt-liste svg { flex: none; width: 19px; height: 19px; margin-top: 4px; fill: #385cb1; }
.alt-vorteile__warum { width: min(712px, 100%); margin: 0 auto 67px; }
.alt-vorteile__warum .alt-titel { width: 90.44%; }
.alt-vorteile__stimmen { width: min(1250px, 100%); margin: 0 auto 64px; }
.alt-vorteile__stimmen .alt-titel { width: 90.44%; }
@media (max-width: 768px) {
  .alt-vorteile { padding: 39px 0 8px;
    background-image: radial-gradient(circle at 20% 0%, rgb(255 255 255) 0%, transparent 25%), radial-gradient(circle at 30% 19%, rgb(95 123 212 / .06) 0%, transparent 30%), radial-gradient(circle at 31% 1%, rgb(255 255 255) 0%, transparent 18%), radial-gradient(circle at 35% 49%, rgb(255 255 255) 0%, transparent 21%), radial-gradient(circle at 43% 100%, rgb(255 255 255) 0%, transparent 50%), radial-gradient(circle at 43% 17%, rgb(76 107 194 / .03) 0%, transparent 30%), radial-gradient(circle at 43% 0%, rgb(255 255 255) 0%, transparent 15%), radial-gradient(circle at 53% 0%, rgb(255 255 255) 0%, transparent 18%), radial-gradient(circle at 58% 19%, rgb(95 123 212 / .05) 0%, transparent 36%), radial-gradient(circle at 67% 0%, rgb(255 255 255) 0%, transparent 30%);
  }
  .alt-vorteile__karte { padding: 24px 37px 25px 24px; margin-bottom: 37px; }
  .alt-vorteile__karte .alt-titel { width: 100%; }
  .alt-liste li { padding-left: 4px; }
  .alt-vorteile__warum { margin-bottom: 45px; }
  .alt-vorteile__warum .alt-titel, .alt-vorteile__stimmen .alt-titel { width: 100%; }
  .alt-vorteile__stimmen { margin-bottom: 26px; }
}

/* „Ist dieses Event für dich?“: drei Karten A, B, C. */
.alt-fuerdich { position: relative; padding: 55px 0 64px; background-color: #ffffff;
  background-image: radial-gradient(circle at 24% 100%, rgb(255 255 255) 0%, transparent 12%), radial-gradient(circle at 28% 58%, rgb(95 123 212 / .1) 0%, transparent 30%), radial-gradient(circle at 31% 0%, rgb(255 255 255) 0%, transparent 30%), radial-gradient(circle at 45% 0%, rgb(255 255 255) 0%, transparent 30%), radial-gradient(circle at 48% 55%, rgb(76 107 194 / .03) 0%, transparent 30%), radial-gradient(circle at 50% 99%, rgb(255 255 255) 0%, transparent 19%), radial-gradient(circle at 67% 0%, rgb(255 255 255) 0%, transparent 30%), radial-gradient(circle at 70% 100%, rgb(255 255 255) 0%, transparent 50%), radial-gradient(circle at 70% 51%, rgb(95 123 212 / .25) 0%, transparent 36%);
}
.alt-fuerdich__raster { width: calc((100% + 48px) * 22 / 24 - 48px); margin: 32px auto 41px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.alt-fuerdich__karte { padding: 28px; border-radius: 16px; background: #ffffff; box-shadow: 0 4px 32px rgb(17 17 26 / .05), 0 8px 48px rgb(17 17 26 / .05); }
.alt-fuerdich__karte .alt-titel { text-align: left; margin-bottom: 4px; }
.alt-fuerdich__karte .alt-text { text-align: left; margin-bottom: 8px; color: #07071a; }
.alt-fuerdich .alt-text b { font-weight: 700; }
@media (max-width: 768px) {
  .alt-fuerdich { padding: 27px 0 37px; }
  .alt-fuerdich__raster { width: 100%; grid-template-columns: 1fr; margin: 32px 0 40px; }
  .alt-fuerdich__karte { padding: 24px; }
  .alt-fuerdich__karte .alt-titel { margin-bottom: 3px; }
}

/* Dein Host: Bild links, Text rechts, mittig zueinander. */
.alt-host { position: relative; padding: 43px 0 60px; background: #ffffff; }
.alt-host__raster { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.alt-host__bild { display: block; width: 100%; height: auto; aspect-ratio: 597 / 478; object-fit: cover; border-radius: 16px; }
.alt-host__marke { margin: 0 0 0; font-size: 12px; line-height: 20px; letter-spacing: .5px; color: #385cb1; }
.alt-host .alt-titel { text-align: left; margin: 0 0 8px; color: #07071a; }
.alt-host .alt-text { text-align: left; margin: 0; width: 89.816%; }
@media (max-width: 768px) {
  .alt-host { padding: 22px 0 30px; }
  .alt-host__raster { grid-template-columns: 1fr; gap: 23px; }
  .alt-host__bild { aspect-ratio: 342 / 274; }
  .alt-host .alt-text { width: 100%; }
}

/* Häufige Fragen: fünf Karten in einer Reihe, darunter die Karte „Bis hier gescrollt?“. */
.alt-fragen { position: relative; padding: 38px 0 105px; background-color: #ffffff;
  background-image: radial-gradient(circle at 28% 30%, rgb(95 123 212 / .1) 0%, transparent 30%), radial-gradient(circle at 31% 0%, rgb(255 255 255) 0%, transparent 30%), radial-gradient(circle at 45% 0%, rgb(255 255 255) 0%, transparent 30%), radial-gradient(circle at 45% 67%, rgb(255 255 255) 0%, transparent 100%), radial-gradient(circle at 48% 26%, rgb(76 107 194 / .03) 0%, transparent 30%), radial-gradient(circle at 67% 0%, rgb(255 255 255) 0%, transparent 30%), radial-gradient(circle at 64% 29%, rgb(95 123 212 / .25) 0%, transparent 36%);
}
.alt-fragen__raster { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin: 31px 0 72px; }
.alt-fragen__karte { padding: 32px 32px 33px; border-radius: 16px; background: #ffffff; box-shadow: 0 4px 32px rgb(17 17 26 / .05), 0 8px 48px rgb(17 17 26 / .05); }
.alt-fragen__karte .alt-titel { text-align: left; margin-bottom: 6px; color: #07071a; }
.alt-fragen__karte .alt-text { text-align: left; margin: 0; }
@media (max-width: 1100px) { .alt-fragen__raster { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) {
  .alt-fragen { padding: 19px 0 53px; }
  .alt-fragen__raster { grid-template-columns: 1fr; margin: 30px 0 72px; }
  .alt-fragen__karte { padding: 24px; }
  .alt-fragen__karte .alt-titel { margin-bottom: 6px; }
}
.alt-fragen .alt-verlaufskarte .alt-text { --deckkraft: .63; }

/* Bewertung in den Karten: auf dem Handy rutschen Sterne und Text unter die Bilder. */
@media (max-width: 768px) {
  .alt-verlaufskarte .bewertung { flex-wrap: wrap; justify-content: flex-start; row-gap: 8px; }
  .alt-verlaufskarte .bewertung__text { width: 100%; }
}

/* ---------- Anmeldefenster (Onepage-Modal „Webinar Optin Beginner“) ---------- */
.alt-fenster { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: rgb(0 0 0 / .7); animation: fensterauf .2s ease; }
.alt-fenster[hidden] { display: none; }
.alt-fenster__zu {
  position: absolute; top: 24px; right: 24px; width: 48px; height: 48px; border: 0; border-radius: 100px; padding: 6px 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; background: #ffffff; color: #07071a;
  box-shadow: 0 0 0 3px rgb(255 255 255 / .3), 0 0 0 16px rgb(255 255 255 / 0); transition: box-shadow .3s;
}
@media (hover: hover) { .alt-fenster__zu:hover { box-shadow: 0 0 0 6px rgb(255 255 255 / .3), 0 0 0 16px rgb(255 255 255 / 0); } }
.alt-fenster__zu svg { width: 20px; height: 20px; }
.alt-fenster__karte {
  position: relative; width: min(863px, 100% - 48px); max-height: calc(100vh - 48px); overflow-y: auto; padding: 60px 98px 47px; border-radius: 16px; text-align: center;
  background-color: #ffffff;
  background-image: radial-gradient(circle at 25% 59%, rgb(95 123 212 / .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 47% 59%, rgb(56 92 177 / .17) 0%, transparent 38%), radial-gradient(circle at 67% 0%, rgb(255 255 255) 0%, transparent 30%), radial-gradient(circle at 77% 54%, rgb(95 123 212 / .14) 0%, transparent 36%);
}
.alt-fenster__titel { margin: 0 0 1px; font-family: var(--font-kit-header-font), 'Helvetica Neue', Arial, sans-serif; font-weight: 600; font-size: 27px; line-height: 37.8px; color: #010101; }
.alt-fenster__frage { margin: 0 0 4px; font-family: var(--font-kit-header-font), 'Helvetica Neue', Arial, sans-serif; font-weight: 600; font-size: 21px; line-height: 29.4px; color: #010101; }
.alt-fenster__termin { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 18px; font-size: 15px; line-height: 22.5px; color: #010101; }
.alt-fenster__termin svg { width: 17px; height: 17px; fill: #385cb1; }
.alt-fenster__formular { display: flex; flex-direction: column; }
.alt-eingabe {
  display: block; width: 100%; height: 56px; padding: 0 17px; border: 0; border-radius: 6px; margin: 0 0 14px; background: #ffffff;
  font: 400 15px var(--font-kit-text-font), 'Helvetica Neue', Arial, sans-serif; color: #07071a;
  box-shadow: 0 0 0 1px rgb(1 1 1 / .15); outline: none; transition: box-shadow .2s;
}
.alt-eingabe + .alt-eingabe { margin-bottom: 22px; }
.alt-eingabe::placeholder { color: rgb(7 7 26 / .4); }
.alt-eingabe:focus { box-shadow: 0 0 0 1px #385cb1, 0 0 0 3px rgb(56 92 177 / .2); }
.alt-fenster__tippfehler { margin: -14px 0 14px; font-size: 13px; line-height: 20px; color: rgb(7 7 26 / .6); }
.alt-fenster__tippfehler button { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: #385cb1; text-decoration: underline; cursor: pointer; }
.alt-fenster__fehler { margin: 12px 0 0; font-size: 14px; line-height: 20px; color: #d62828; }
.alt-fenster__aktion { display: flex; justify-content: center; margin-bottom: 20px; }
.alt-fenster__aktion .bk-knopf:disabled { opacity: .75; cursor: progress; }
.alt-fenster .alt-person { --bild: 67px; }
@media (max-width: 768px) {
  .alt-fenster { align-items: flex-end; }
  .alt-fenster__karte { width: 100%; max-height: calc(100vh - 96px); padding: 30px 24px; border-radius: 16px 16px 0 0; }
}

/* Plätze-Balken aus dem Code-Baustein im Fenster, wörtlich (Klassen umbenannt). */
.alt-plaetze { font-family: 'Plus Jakarta Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; width: 50vw; max-width: 360px; margin: 16px auto 21px; }
.alt-plaetze__text { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 8px; color: #d62828; font-weight: 800; font-size: 13px; line-height: 24px; letter-spacing: 0.4px; }
.alt-plaetze__punkt { width: 8px; height: 8px; background: #d62828; border-radius: 50%; box-shadow: 0 0 4px rgba(214, 40, 40, 0.9); animation: alt-pille-punkt 1.8s ease-in-out infinite; }
.alt-plaetze__zahl { display: inline-block; min-width: 1.3em; text-align: center; transition: transform 0.4s ease, color 0.4s ease; }
.alt-plaetze__zahl.tick { transform: scale(1.25); color: #b91c1c; }
.alt-plaetze__spur { position: relative; height: 10px; background: rgba(214, 40, 40, 0.10); border-radius: 999px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(214, 40, 40, 0.18); }
.alt-plaetze__fuellung { position: absolute; top: 0; left: 0; bottom: 0; width: 0%; background: linear-gradient(90deg, #ffb4b4 0%, #f87171 35%, #ef4444 70%, #d62828 100%); border-radius: 999px; box-shadow: 0 0 8px rgba(214, 40, 40, 0.55), 0 0 16px rgba(214, 40, 40, 0.35); animation: alt-plaetze-puls 1.8s ease-in-out infinite; transition: width 1s cubic-bezier(0.22, 1, 0.36, 1); }
.alt-plaetze__glanz { position: absolute; top: 0; bottom: 0; width: 50%; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.45) 50%, transparent 100%); animation: alt-plaetze-glanz 3.8s ease-in-out infinite; }
.alt-plaetze__spitze { position: absolute; right: -2px; top: -3px; bottom: -3px; width: 4px; background: #fff; border-radius: 999px; box-shadow: 0 0 6px rgba(255, 80, 80, 0.9), 0 0 12px rgba(214, 40, 40, 0.7); animation: alt-plaetze-spitze 1.8s ease-in-out infinite; }
@keyframes alt-plaetze-puls { 0%, 100% { box-shadow: 0 0 6px rgba(214, 40, 40, 0.5), 0 0 12px rgba(214, 40, 40, 0.3); } 50% { box-shadow: 0 0 12px rgba(214, 40, 40, 0.9), 0 0 24px rgba(214, 40, 40, 0.6); } }
@keyframes alt-plaetze-spitze { 0%, 100% { opacity: 0.85; transform: scaleY(1); } 50% { opacity: 1; transform: scaleY(1.15); } }
@keyframes alt-plaetze-glanz { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(220%); } }

/* ==================== /live-workshop-bestatigung-a, /live-workshop-nutrilize-bestatigung ==================== */

/* Zwei Schritte (Baukasten „Webinar 2603 Formular“): Pille, Titel, Zeitleiste, Ergebnisse, WhatsApp-Knopf. */
.alt-schritte { position: relative; padding: 114px 0 100px; background: #ffffff; }
.alt-schritte__pille { display: flex; justify-content: center; margin-bottom: var(--abstand, 16px); line-height: 24px; }
.alt-schritte__titel { margin-bottom: 52px; }

/* Zeitleiste (Raster „timeline“ mit Nummern und Fortschrittslinie): Schritt 1 rechts, Schritt 2 links. */
.alt-zeitleiste { position: relative; width: min(1280px, 100%); margin: 0 auto; }
.alt-zeitleiste__linie { position: absolute; left: 50%; top: 0; bottom: var(--linie-unten, -21px); width: 2px; margin-left: -1px; background: rgb(7 7 26 / .1); }
.alt-zeitleiste__fuellung { position: absolute; left: 0; top: 0; width: 100%; height: 0; background: #385cb1; }
.alt-zeitleiste__schritt { position: relative; display: grid; grid-template-columns: 1fr 56px 1fr; column-gap: 48px; align-items: start; }
.alt-zeitleiste__schritt + .alt-zeitleiste__schritt { margin-top: 55px; }
.alt-zeitleiste__nummer { grid-column: 2; grid-row: 1; position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 4px; background: #f2f2f2; font-family: var(--font-kit-header-font), 'Helvetica Neue', Arial, sans-serif; font-weight: 600; font-size: 22.4px; line-height: 1; color: #07071a; }
.alt-zeitleiste__inhalt { grid-row: 1; grid-column: 3; text-align: left; }
.alt-zeitleiste__schritt--links .alt-zeitleiste__inhalt { grid-column: 1; text-align: right; }
.alt-zeitleiste__inhalt .alt-titel { text-align: inherit; margin: 0 0 9px; color: #07071a; }
.alt-zeitleiste__inhalt .alt-text { text-align: inherit; margin: 0 0 var(--abstand, 25px); }
.alt-zeitleiste__knopf { display: flex; margin-bottom: var(--abstand, 0px); }
.alt-zeitleiste__schritt--links .alt-zeitleiste__knopf { justify-content: flex-end; }
.alt-zeitleiste__apple { margin: 0; font-size: 14px; line-height: 21px; color: #07071a; text-align: right; }
.alt-zeitleiste__apple a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
@media (max-width: 768px) {
  .alt-zeitleiste__linie { left: 20px; --linie-unten: -22px; }
  .alt-zeitleiste__schritt { grid-template-columns: 40px 1fr; column-gap: 12px; }
  .alt-zeitleiste__nummer { grid-column: 1; width: 40px; height: 40px; font-size: 16px; }
  .alt-zeitleiste__inhalt, .alt-zeitleiste__schritt--links .alt-zeitleiste__inhalt { grid-column: 2; text-align: left; }
  .alt-zeitleiste__schritt--links .alt-zeitleiste__knopf { justify-content: flex-start; }
  .alt-zeitleiste__inhalt .alt-text { margin-bottom: var(--abstand-handy, var(--abstand, 25px)); }
}

.alt-schritte__ergebnisse { margin-top: 97px; }
.alt-schritte__ergebnisse .alt-titel { margin-bottom: 31px; color: #07071a; }
.alt-schritte__schluss { width: min(773px, 100%); margin: 131px auto 0; }
.alt-schritte__schluss .alt-titel { margin-bottom: 26px; color: #07071a; }
@media (max-width: 768px) {
  .alt-schritte { padding: 57px 0 50px; }
  /* Die Markierung macht die Zeile breiter als bei Onepage; ein paar Pixel Luft halten den Umbruch gleich. */
  .alt-schritte__titel { width: calc(100% + 12px); margin: 0 -6px 52px; }
}

/* ==================== /nutrilize-workshop-replay ==================== */

/* Baukasten „layout“: Abzeichen, Titel, Text, Wistia-Video aus dem Code-Baustein, zwei Knöpfe; volle Höhe. */
.alt-replay {
  position: relative; box-sizing: border-box; min-height: 100vh; padding: 42px 0 0; 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%);
}
.alt-replay__spalte { width: calc((100% + 48px) * 15 / 24 - 48px); margin: 0 auto; text-align: center; }
.alt-abzeichen { display: inline-block; margin-bottom: 20px; padding: 4px 12px; border-radius: 100px; background: rgb(212 27 22); color: #ffffff; font-size: 12px; line-height: 20px; letter-spacing: .5px; }
.alt-replay__video { margin-bottom: 40px; }
.alt-replay__video wistia-player { display: block; width: 100%; }
.alt-replay__video wistia-player:not(:defined) { background: center / contain no-repeat url('https://fast.wistia.com/embed/medias/qdm2kyqtk5/swatch'); filter: blur(5px); padding-top: 62.5%; }
.alt-replay__knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; padding-bottom: 110px; }
@media (max-width: 768px) {
  .alt-replay { padding-top: 31px; }
  .alt-replay__spalte, .alt-replay__spalte .alt-text { width: 100%; }
  .alt-replay__knoepfe { flex-direction: column; }
  .alt-replay__knoepfe .bk-knopf { width: 100%; }
}

/* ==================== /hiring-closer ==================== */

/* Startschritt des Bewerbungsformulars (Baukasten „Hiring Closer“), volle Höhe, Fortschrittslinie oben. */
.alt-stelle { position: relative; box-sizing: border-box; min-height: 100vh; padding: 0 0 102px; background: #f7f7f7; }
.alt-stelle__fortschritt { position: sticky; top: 0; z-index: 5; height: 8px; background: rgb(7 7 26 / .1); }
.alt-stelle__fortschritt span { display: block; width: 7%; height: 100%; background: #385cb1; }
.alt-stelle__kopf { padding-top: 102px; text-align: center; }
.alt-stelle__ort { margin: 0 0 9px; font-size: 16.8px; line-height: 25.2px; color: #07071a; }
.alt-stelle .pinsel { color: #ffffff; }
.alt-stelle__video { position: relative; padding-bottom: 56.25%; height: 0; margin-bottom: 20px; }
.alt-stelle__video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.alt-stelle__hinweis { margin: 0 0 25px; text-align: center; font-size: 12px; line-height: 18px; }
.alt-stelle__hinweis a { color: #07071a; text-decoration: none; border-bottom: 1px solid currentColor; }
.alt-stelle__karte {
  width: min(609px, 100%); margin: 0 auto 27px; padding: 48px; border-radius: 16px; background: #ffffff; text-align: center;
  box-shadow: 0 8px 56px rgb(17 17 26 / .1), 0 32px 140px rgb(17 17 26 / .1);
}
.alt-stelle__karte .alt-titel { margin-bottom: 5px; color: #07071a; }
.alt-stelle__karte .alt-text { color: #07071a; margin: 0; }
.alt-stelle__aktion { display: flex; justify-content: center; scroll-margin-top: 40px; }

/* Laufband (Atom gallery, marquee): Bilder 273 px hoch, 32 px Abstand, über die volle Breite, läuft nach links.
   Die vier Bilder stehen dreimal im HTML; die Spur wandert genau einen Satz weit und beginnt dann von vorn. */
.alt-laufband { overflow: hidden; margin-bottom: 52px; }
.alt-laufband__spur { display: flex; gap: 32px; width: max-content; animation: alt-laufband 30s linear infinite; }
.alt-laufband__spur img { display: block; height: 273px; width: auto; max-width: none; border-radius: 16px; object-fit: cover; }
@keyframes alt-laufband { from { transform: translateX(0); } to { transform: translateX(calc((100% + 32px) / -3)); } }
@media (max-width: 768px) {
  .alt-stelle { padding-bottom: 74px; }
  .alt-stelle__kopf { padding-top: 57px; }
  .alt-stelle__karte { padding: 24px; }
}

/* Bei Onepage liegt die volle Sektion 1 px über der Fußzeile und verdeckt deren obere Linie. */
.alt-ohne-fusslinie .seitenfuss { border-top-color: transparent; }