/*
 * SheEarnsGlobal: Bestätigungsseiten nach der Webinar-Anmeldung. Nachgebaut aus den Sektionen
 * der Onepage-Seite /liveworkshop-confirmation (Bestätigung, Videos, Footer) und, für die
 * Fassung mit WhatsApp-Nummer, aus „Bestätigung V2“ von fitpreneur-collective.com (13.10.2026).
 * Werte unverändert übernommen.
 */

/* Zwei Schritte */
.bestaetigung {
  width: 100%; background: #ffffff; padding: 50px 20px 70px;
  font-family: var(--font-kit-text-font), 'Helvetica Neue', Arial, sans-serif;
  --telefon-rand: #00000022; --telefon-trenner: #0000001a; --telefon-flaeche: #f6f4f0;
  --telefon-fokus-schein: #e04a1e1f; --telefon-fehler: var(--color-kit-key1, #e04a1e); --telefon-fehler-schein: #e04a1e2e;
  --telefon-platzhalter: #00000066;
}
.bestaetigung__container { max-width: 980px; margin: 0 auto; width: 100%; }
.bestaetigung__oben { text-align: center; }
.bestaetigung__pill { display: inline-flex; align-items: center; gap: 8px; background: #ffffff; border: 1.5px solid #e04a1e40; border-radius: 999px; padding: 7px 16px; font-family: var(--font-kit-text-font), 'Helvetica Neue', Arial, sans-serif; font-weight: 800; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: #e04a1e; margin-bottom: 20px; box-shadow: 0 6px 18px -10px #04044126; }
.bestaetigung__punkt { width: 8px; height: 8px; border-radius: 50%; background: #e04a1e; display: inline-block; animation: bestaetigung-punkt 1.4s ease-in-out infinite; }
@keyframes bestaetigung-punkt { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
.bestaetigung__headline { font-family: var(--font-kit-header-font), serif; font-size: 36px; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; color: #040441; margin: 0 auto; max-width: 760px; }
/* Gelber Kreis um die Wortgruppe, kursiv, wie im Hero von /liveworkshop */
.bestaetigung__hl { position: relative; white-space: nowrap; font-style: italic; }
.bestaetigung__hl::before { content: ''; position: absolute; left: -12px; right: -12px; top: -3px; bottom: -5px; border: 2.5px solid #fbb40d; border-radius: 50%; transform: rotate(-2.5deg); pointer-events: none; }

/* Platz-Meter unter der Headline: Prozent links, Balken rechts */
.bestaetigung__meter { display: flex; align-items: center; gap: 16px; max-width: 520px; margin: 26px auto 0; }
.bestaetigung__prozent { font-family: var(--font-kit-text-font), 'Helvetica Neue', Arial, sans-serif; font-weight: 800; font-size: 42px; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--color-kit-key1, #e04a1e); }
.bestaetigung__prozent-zeichen { font-size: 21px; font-weight: 700; letter-spacing: 0; }
.bestaetigung__balken { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.bestaetigung__spur { display: block; height: 14px; border-radius: 999px; background: #edf0f6; overflow: hidden; }
.bestaetigung__fuellung { display: block; height: 100%; border-radius: 999px; position: relative; overflow: hidden; background: var(--color-kit-key1, #e04a1e); transition: width .6s cubic-bezier(.16, 1, .3, 1); }
.bestaetigung__fuellung::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #ffffff00 0%, #ffffff59 50%, #ffffff00 100%); animation: bestaetigung-glanz 2.6s ease-in-out infinite; }
@keyframes bestaetigung-glanz { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }

/* Video unter dem Meter (Rahmen und Platzhalter: .videorahmen in basis.css) */
.bestaetigung__video { max-width: 760px; margin: 34px auto 0; }

.bestaetigung__zeitleiste { position: relative; max-width: 880px; margin: 52px auto 0; }
.bestaetigung__zeitleiste::before { content: ''; position: absolute; left: 50%; top: 18px; bottom: 18px; width: 2px; background: #e4e6ee; transform: translateX(-50%); }
.bestaetigung__zeile { position: relative; display: grid; grid-template-columns: 1fr 70px 1fr; align-items: start; margin-bottom: 48px; }
.bestaetigung__zeile:last-child { margin-bottom: 0; }
.bestaetigung__nummer { grid-column: 2; justify-self: center; width: 58px; height: 58px; border-radius: 14px; background: #f1f2f6; color: #040441; font-family: var(--font-kit-header-font), serif; font-weight: 800; font-size: 24px; display: flex; align-items: center; justify-content: center; z-index: 1; box-shadow: 0 0 0 6px #ffffff; }
.bestaetigung__nummer--heiss { color: #ffffff; background: #3cba63; box-shadow: 0 0 0 6px #ffffff, 0 14px 30px -14px #04044159; }
.bestaetigung__rechts { grid-column: 3; text-align: left; padding-left: 30px; min-width: 0; }
.bestaetigung__links { grid-column: 1; text-align: right; padding-right: 30px; }
.bestaetigung__karte { background: #ffffff; border: 1.5px solid #3cba634d; border-radius: 22px; padding: 26px 28px 28px; box-shadow: 0 30px 70px -38px #04044159; }
.bestaetigung__label { font-family: var(--font-kit-header-font), serif; font-weight: 800; font-size: 28px; color: #040441; margin-bottom: 8px; }
.bestaetigung__text { color: #444444; font-size: 16px; line-height: 1.55; margin-bottom: 18px; max-width: 380px; }
.bestaetigung__links .bestaetigung__text { margin-left: auto; }

/* Mockup des Bonus: Desktop groß links neben Schritt 1 (freie Spalte der Zeitleiste), Handy in der Karte */
.bestaetigung__seite { grid-column: 1; grid-row: 1; align-self: center; padding-right: 18px; }
.bestaetigung__seite-bild { display: block; width: calc(100% + 40px); max-width: none; height: auto; margin-left: -40px; }
.bestaetigung__mockup { display: none; width: calc(100% + 16px); max-width: none; height: auto; margin: -6px -8px 0; }

/* Schritt 1, vor dem Freischalten */
.bestaetigung__formular { display: flex; flex-direction: column; gap: 16px; }
.bestaetigung__formular[hidden] { display: none; }
.bestaetigung__knopf--absenden { width: 100%; border: 0; cursor: pointer; font-family: inherit; justify-content: center; }

/* Frist des Bonus über dem Nummernfeld */
.bestaetigung__uhr { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 12px; background: #fdf1e8; border: 1px solid #e04a1e33; color: #040441; font-size: 15px; font-weight: 600; line-height: 1.3; }
.bestaetigung__uhr svg { flex-shrink: 0; color: #e04a1e; }
.bestaetigung__uhr-text { white-space: nowrap; }
.bestaetigung__uhr-zeit { margin-left: auto; font-weight: 800; font-size: 20px; line-height: 1; color: #e04a1e; font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* Bonus nach dem Freischalten: die Roadmap als PDF */
.bestaetigung__bonus { display: flex; align-items: center; gap: 16px; width: 100%; box-sizing: border-box; padding: 14px; border: 1.5px solid #e6eaf3; border-radius: 16px; background: #fbfaf8; }
.bestaetigung__bonus-cover { width: 74px; height: 96px; object-fit: cover; border-radius: 8px; flex-shrink: 0; box-shadow: 0 10px 22px -12px #04044159; }
.bestaetigung__bonus-inhalt { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.bestaetigung__bonus-titel { font-family: var(--font-kit-header-font), serif; font-weight: 800; font-size: 17px; line-height: 1.25; color: #040441; }
.bestaetigung__bonus-text { font-size: 14px; line-height: 1.45; color: #5a6270; }
.bestaetigung__bonus-knopf { white-space: nowrap; margin-top: 6px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1.5px solid #e04a1e59; border-radius: 10px; font-family: var(--font-kit-text-font), 'Helvetica Neue', Arial, sans-serif; font-weight: 700; font-size: 14px; line-height: 1.2; text-decoration: none; color: #e04a1e; background: #ffffff; transition: transform .12s ease, background .12s ease; }
.bestaetigung__bonus-knopf:hover { transform: translateY(-1px); background: #fdf6f1; }
.bestaetigung__bonus-knopf:focus-visible { outline: 3px solid #040441; outline-offset: 2px; }

/* Schritt 1, nach dem Freischalten */
.bestaetigung__frei { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.bestaetigung__frei[hidden] { display: none; }
.bestaetigung__frei-zeile { display: flex; align-items: flex-start; gap: 8px; font-size: 15px; line-height: 1.4; color: #040441d9; }
.bestaetigung__frei-symbol { display: inline-flex; color: #1f9d55; flex-shrink: 0; }
.bestaetigung__frei-text { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 2px; min-width: 0; }
.bestaetigung__frei-nummer { font-variant-numeric: tabular-nums; white-space: nowrap; }
.bestaetigung__aendern { border: 0; background: none; padding: 0; font-family: inherit; font-size: 13px; color: #6b7280; text-decoration: underline; cursor: pointer; }
.bestaetigung__aendern:focus-visible { outline: 2px solid #040441; outline-offset: 2px; }

/* Knöpfe: Kalender in der Akzentfarbe, WhatsApp in Grün mit Puls */
.bestaetigung__knopf { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: #ffffff; background: #e04a1e; border-radius: 14px; padding: 14px 24px; box-shadow: 0 12px 26px -12px #04044159; transition: transform .12s ease, filter .12s ease; }
.bestaetigung__knopf:hover { transform: translateY(-1px); filter: brightness(1.04); }
.bestaetigung__knopf:focus-visible { outline: 3px solid #040441; outline-offset: 3px; }
.bestaetigung__knopf[hidden] { display: none; }
.bestaetigung__knopf svg { flex-shrink: 0; }
.bestaetigung__knopf--heiss { position: relative; gap: 14px; border-radius: 16px; padding: 18px 30px; background: #3cba63; box-shadow: 0 18px 38px -14px #04044166; }
.bestaetigung__knopf--heiss .bestaetigung__haupt { font-size: 20px; }
.bestaetigung__knopf--heiss .bestaetigung__unter { font-size: 13px; }
.bestaetigung__puls { position: absolute; inset: 0; border-radius: 16px; pointer-events: none; animation: bestaetigung-puls 2.1s ease-out infinite; }
@keyframes bestaetigung-puls { 0% { box-shadow: 0 0 0 0 #3cba6366; } 70% { box-shadow: 0 0 0 16px #3cba6300; } 100% { box-shadow: 0 0 0 0 #3cba6300; } }
.bestaetigung__beschriftung { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.bestaetigung__haupt { font-family: var(--font-kit-text-font), 'Helvetica Neue', Arial, sans-serif; font-weight: 800; font-size: 17px; }
.bestaetigung__unter { font-size: 12px; opacity: .9; font-weight: 500; }
.bestaetigung__apple { display: block; margin-top: 12px; color: #6b7280; font-size: 13px; text-decoration: underline; }
body .bestaetigung__apple { text-decoration: underline; }
.bestaetigung__apple[hidden] { display: none; }
.bestaetigung__folgt { display: inline-block; color: #9aa0aa; font-size: 14px; border: 1.5px dashed #d7dcec; border-radius: 14px; padding: 13px 20px; }
.bestaetigung__folgt[hidden] { display: none; }

@media (max-width: 760px) {
  .bestaetigung { padding: 40px 16px 60px; }
  .bestaetigung__headline { font-size: 26px; }
  .bestaetigung__meter { margin-top: 20px; gap: 12px; }
  .bestaetigung__prozent { font-size: 34px; }
  .bestaetigung__video { margin-top: 26px; }
  .bestaetigung__zeitleiste { margin-top: 40px; }
  .bestaetigung__zeitleiste::before { left: 21px; }
  .bestaetigung__zeile { grid-template-columns: 44px 1fr; margin-bottom: 34px; }
  .bestaetigung__nummer { grid-column: 1; width: 42px; height: 42px; font-size: 19px; border-radius: 12px; }
  .bestaetigung__rechts, .bestaetigung__links { grid-column: 2; text-align: left; padding: 0 0 0 12px; }
  .bestaetigung__links .bestaetigung__text { margin-left: 0; }
  .bestaetigung__karte { padding: 22px 14px 20px; border-radius: 18px; }
  .bestaetigung__label { font-size: 23px; }
  .bestaetigung__knopf--heiss { padding: 15px 16px; gap: 10px; width: 100%; }
  .bestaetigung__knopf--heiss svg { width: 24px; height: 24px; }
  .bestaetigung__knopf--heiss .bestaetigung__haupt { font-size: 17px; }
  .bestaetigung__seite { display: none; }
  .bestaetigung__mockup { display: block; }
  .bestaetigung__uhr { padding: 10px 12px; font-size: 14px; gap: 8px; }
  .bestaetigung__uhr-zeit { font-size: 18px; }
  .bestaetigung__bonus { padding: 12px; gap: 12px; }
  .bestaetigung__bonus-cover { width: 58px; height: 76px; }
  .bestaetigung__bonus-knopf { padding: 8px 11px; gap: 6px; font-size: 13px; }
}
/* Schmale Handys: „Bonus läuft ab in“ statt „Dein Bonus läuft ab in“, damit die Zeile hält. Der Knopf der
   Roadmap rückt unter Cover und Titel und nimmt die volle Breite, neben dem Cover ragte er aus der Karte. */
@media (max-width: 420px) {
  .bestaetigung__uhr-dein { display: none; }
  .bestaetigung__bonus { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 4px; }
  .bestaetigung__bonus-inhalt { display: contents; }
  .bestaetigung__bonus-cover { grid-row: 1 / span 2; align-self: center; }
  .bestaetigung__bonus-titel { align-self: end; }
  .bestaetigung__bonus-text { align-self: start; }
  .bestaetigung__bonus-knopf { grid-column: 1 / -1; justify-content: center; margin-top: 10px; }
}

/* Splittest-Seiten A, B, C (Philipp 21.10.2026): auf dem Handy stehen Nummernfeld und Knopf im ersten Bild.
   Der Kopf rückt enger zusammen; bei B steht das Mockup klein rechts im Bonus-Text statt groß darüber
   (vorher lag das Feld auf dem iPhone 13 erst bei 814 px, sichtbar sind 664 px). Texte unverändert. */
@media (max-width: 760px) {
  .bestaetigung--kompakt { padding-top: 22px; }
  .bestaetigung--kompakt .bestaetigung__pill { margin-bottom: 12px; padding: 6px 14px; font-size: 12px; }
  .bestaetigung--kompakt .bestaetigung__headline { font-size: 24px; }
  .bestaetigung--kompakt .bestaetigung__meter { margin-top: 12px; }
  .bestaetigung--kompakt .bestaetigung__prozent { font-size: 30px; }
  .bestaetigung--kompakt .bestaetigung__spur { height: 12px; }
  .bestaetigung--kompakt .bestaetigung__zeitleiste { margin-top: 20px; }
  .bestaetigung--kompakt .bestaetigung__zeitleiste::before { top: 10px; }
  .bestaetigung--kompakt .bestaetigung__karte { padding: 16px 14px 18px; }
  .bestaetigung--kompakt .bestaetigung__label { font-size: 20px; margin-bottom: 4px; }
  .bestaetigung--kompakt .bestaetigung__text { margin-bottom: 12px; font-size: 15px; line-height: 1.5; }
  .bestaetigung--kompakt .bestaetigung__formular { gap: 12px; }
  .bestaetigung--kompakt .bestaetigung__text .bestaetigung__mockup { float: right; width: 112px; margin: 2px -6px 4px 8px; }
}

/* Nachrichten aus der Academy, unter den Videos */
.belege { width: 100%; background: #ffffff; padding: 74px 20px 80px; font-family: var(--font-kit-text-font), 'Helvetica Neue', Arial, sans-serif; }
.belege__container { max-width: 980px; margin: 0 auto; width: 100%; }
.belege__titel { text-align: center; font-family: var(--font-kit-header-font), serif; font-size: 28px; font-weight: 800; color: #040441; margin-bottom: 34px; letter-spacing: -0.01em; }
.belege__raster { column-count: 2; column-gap: 20px; }
.belege__beleg { width: 100%; height: auto; display: block; border-radius: 14px; border: 1px solid #eceef6; box-shadow: 0 12px 30px -18px #04044133; margin-bottom: 20px; break-inside: avoid; }
@media (max-width: 760px) {
  .belege { padding: 56px 16px 60px; }
  .belege__titel { font-size: 22px; }
  .belege__raster { column-count: 1; }
}

/* Videos von Nicole */
.videos { width: 100%; padding: 78px 20px 86px; font-family: var(--font-kit-text-font), 'Helvetica Neue', Arial, sans-serif; overflow: hidden; background: var(--color-kit-light, #f6f4f0); color: #040441; }
.videos__container { max-width: 1250px; margin: 0 auto; width: 100%; }
.videos__kopf { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; max-width: 780px; margin: 0 auto 52px; }
.videos .titel { color: #040441; text-align: center; --hl-color: #fbb40d; }
.videos__raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 24px; }
.videos__fuss { margin-top: 58px; text-align: center; }
.videos__kanal { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-kit-text-font), 'Helvetica Neue', Arial, sans-serif; font-weight: 700; font-size: 15px; text-decoration: none; color: inherit; border: 1.5px solid #04044126; border-radius: 999px; padding: 14px 27px; line-height: normal; transition: background .18s ease, border-color .18s ease, transform .18s ease; }
.videos__kanal:hover { background: #0404410a; border-color: #04044147; transform: translateY(-1px); }
.videos__kanal:focus-visible { outline: 3px solid #040441; outline-offset: 3px; }
.videos__kanal svg { width: 20px; height: 20px; fill: currentColor; flex-shrink: 0; }
@media (max-width: 900px) {
  .videos__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
}
/* Vier Videos als 2x2, ungefähr so breit wie drei nebeneinander */
.videos__raster--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; margin: 0 auto; }
@media (max-width: 640px) {
  .videos { padding: 58px 18px 64px; }
  .videos__kopf { margin-bottom: 38px; gap: 15px; }
  .videos__raster, .videos__raster--zwei { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .videos__fuss { margin-top: 44px; }
}

/* @siteui/youtube-card: Vorschaubild, der Player lädt erst beim Klick (/_cm/cm.js) */
.yt-karte { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.yt-karte__rahmen { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #040441; box-shadow: 0 26px 60px -30px #000000a6; }
.yt-karte__fassade { position: absolute; inset: 0; display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; font-family: inherit; }
.yt-karte__fassade:focus-visible { outline: 3px solid #040441; outline-offset: 3px; }
.yt-karte__bild { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .55s cubic-bezier(.16,1,.3,1), filter .3s ease; }
.yt-karte__fassade:hover .yt-karte__bild, .yt-karte__fassade:focus-visible .yt-karte__bild { transform: scale(1.045); filter: brightness(.84); }
.yt-karte__schatten { position: absolute; inset: 0; background: linear-gradient(180deg, #04044100 45%, #040441d9 100%); pointer-events: none; }
.yt-karte__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 18px 44px -14px #000000b3; transition: transform .18s ease; pointer-events: none; background: var(--color-kit-key1, #e04a1e); }
.yt-karte__fassade:hover .yt-karte__play, .yt-karte__fassade:focus-visible .yt-karte__play { transform: translate(-50%, -50%) scale(1.09); }
.yt-karte__play svg { width: 22px; height: 22px; fill: #ffffff; margin-left: 3px; }
.yt-karte__dauer { position: absolute; right: 12px; bottom: 12px; background: #040441e0; color: #ffffff; font-family: var(--font-kit-text-font), 'Helvetica Neue', Arial, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .02em; padding: 5px 10px; border-radius: 8px; pointer-events: none; line-height: normal; }
.yt-karte__rahmen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-karte__titel { margin: 0; color: inherit; font-family: var(--font-kit-text-font), 'Helvetica Neue', Arial, sans-serif; font-size: 17px; font-weight: 600; line-height: 1.4; }
@media (max-width: 760px) {
  .yt-karte__play { width: 54px; height: 54px; }
  .yt-karte__play svg { width: 19px; height: 19px; }
  .yt-karte__titel { font-size: 16px; }
}

/* Fußzeile der Bestätigungsseiten */
.fusszeile { width: 100%; background: #f7f5f4; padding: 50px 20px 38px; font-family: var(--font-kit-text-font), 'Helvetica Neue', Arial, sans-serif; }
.fusszeile__container { max-width: 760px; margin: 0 auto; text-align: center; }
.fusszeile__logo { height: 34px; width: auto; display: inline-block; }
.fusszeile__sozial { display: flex; justify-content: center; gap: 12px; margin: 18px 0 22px; }
.fusszeile__sozial a { width: 40px; height: 40px; border-radius: 50%; background: #07071a; display: flex; align-items: center; justify-content: center; color: #ffffff; transition: transform .12s ease, opacity .12s ease; }
.fusszeile__sozial a:hover { transform: translateY(-2px); opacity: .85; }
.fusszeile__sozial svg { width: 19px; height: 19px; }
.fusszeile__hinweis { font-size: 11px; line-height: 1.6; color: #9aa0aa; margin-bottom: 14px; }
.fusszeile__links { display: flex; justify-content: center; gap: 18px; font-size: 12px; }
.fusszeile__links a { color: #6b7280; text-decoration: none; }
.fusszeile__links a:hover { text-decoration: underline; }
.fusszeile__copy { font-size: 12px; color: #9aa0aa; margin-top: 12px; }