/* ============================================================
   bewegungs-art — Webinar-Anmeldeseite
   Ruhige Struktur nach Annettes Entwurf, Farben und Schrift
   strikt nach der gemessenen CI: Inter durchgehend, Orange als
   einzige CTA-Farbe, Teal fuer Akzente.
   Das Anmeldeformular ist eigenes Markup (kein Elementor):
   es postet auf /wp-json/bewegungs-art/v1/webinar-anmeldung.
   Quelle des Markups: mu-plugins/bewegungs-art-webinar.php.
   ============================================================ */

:root{
  /* Gemessen an den gerenderten Elementen von /qi-gong-ausbildung/ */
  --ink:#202020;          /* Überschriften */
  --ink-soft:#333333;     /* Fließtext */
  --ink-faint:#767676;    /* Nebentext, Labels */
  --paper:#FFFFFF;
  --paper-tint:#F7FBFF;   /* helle Sektionsfläche der Marke */
  --surface:#00727B;      /* tragende Flächenfarbe: Marken-Teal, eine Stufe tiefer,
                             damit auch Kleinschrift darauf lesbar bleibt */
  --surface-deep:#005F68; /* Fuß, noch einen Schritt tiefer abgesetzt */
  --cta:#FF8300;          /* Marken-Orange, einzige CTA-Farbe */
  --cta-hover:#E67500;
  --accent:#008B96;       /* Marken-Teal: Linien, Labels, Akzente */
  --accent-text:#00727B;  /* dasselbe Teal, abgedunkelt fuer Fliesstext-Links */
  --accent-soft:#E6F4F5;
  --rule:#E4E4E4;         /* Linienfarbe der Marke */
  --rule-soft:#F3F3F3;
  --focus:#008B96;

  --wrap:1180px;
  --gut:clamp(20px,5vw,64px);
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px; --s7:140px;

  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --radius:6px;           /* Button-Radius der Marke */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body.ba-webinar{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.65;
  font-feature-settings:"kern" 1;-webkit-font-smoothing:antialiased;
}

.ba-wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}

h1,h2,h3{font-family:var(--sans);font-weight:700;letter-spacing:-.02em;margin:0;color:var(--ink)}
h1{font-size:clamp(2.4rem,6.2vw,4.4rem);line-height:1.04}
h2{font-size:clamp(1.9rem,4.2vw,3.1rem);line-height:1.12}
h3{font-size:clamp(1.15rem,2vw,1.35rem);line-height:1.3;font-weight:600}
p{margin:0 0 1.1em}
a{color:var(--accent-text)}

/* Eyebrow / Sektions-Label */
.ba-label{
  font-family:var(--sans);font-size:.72rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent-text);
  margin:0 0 var(--s3);display:block;
}
.ba-section{padding-block:clamp(56px,9vw,var(--s7))}
.ba-section--warm{background:var(--paper-tint)}
.ba-section--tint{background:var(--accent-soft)}

/* ---------- Kopfzeile: Logo statt Menü ---------- */
.ba-head{padding:var(--s3) 0;background:var(--surface)}
.ba-head__in{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.ba-head a{display:inline-block;padding:3px 0}
.ba-head img{height:42px;width:auto;display:block}
.ba-head__meta{font-size:.8rem;color:#fff;letter-spacing:.04em;text-align:right;margin:0}
.ba-head a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

/* ---------- HERO ---------- */
.ba-hero{position:relative;overflow:hidden;background:var(--paper)}
.ba-hero::after{ /* ruhiger Farbverlauf statt flacher Fläche */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 80% at 88% 8%,rgba(0,139,150,.10),transparent 62%);
}
.ba-hero__in{position:relative;z-index:1;max-width:var(--wrap);margin:0 auto;
  padding:clamp(40px,6vw,84px) var(--gut) clamp(48px,7vw,96px);
  display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,5vw,64px);align-items:start}
@media(min-width:1000px){.ba-hero__in{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}

.ba-hero__sub{font-size:clamp(1.02rem,1.7vw,1.2rem);color:var(--ink-soft);
  max-width:34em;margin-top:var(--s3)}
.ba-hero__for{border-left:2px solid var(--accent);padding-left:var(--s2);
  margin-top:var(--s3);color:var(--ink-soft);font-size:.97rem;max-width:32em}

/* Fakten-Leiste */
.ba-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:1px solid var(--rule);margin-top:var(--s4)}
@media(min-width:620px){
  .ba-facts{grid-template-columns:1.7fr .9fr 1.05fr .8fr}
  .ba-facts dd{white-space:nowrap}
}
.ba-facts div{padding:var(--s2) var(--s2) var(--s2) 0;border-bottom:1px solid var(--rule)}
@media(min-width:620px){.ba-facts div{border-bottom:0}}
.ba-facts dt{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:600;margin-bottom:4px}
.ba-facts dd{margin:0;font-size:1rem;font-weight:600;color:var(--ink)}

/* Countdown */
.ba-count{margin-top:var(--s4);display:flex;align-items:baseline;gap:var(--s2);flex-wrap:wrap}
.ba-count__lbl{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);font-weight:600}
.ba-count__vals{display:flex;gap:var(--s2)}
.ba-count__v{font-size:1.7rem;font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.ba-count__v span{display:block;font-family:var(--sans);font-size:.62rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);
  font-variant-numeric:normal;margin-top:6px;font-weight:600}
.ba-count__past{font-size:.95rem;color:var(--ink-soft);max-width:36em}

/* Gastgeberin im Hero: klein, neben dem Text, direkt unter dem Countdown.
   Loest das Loch, das entstand, als das grosse Portrait allein unter dem
   Formular haengen blieb. */
.ba-host{display:flex;align-items:center;gap:var(--s2);
  margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--rule)}
.ba-host img{width:84px;height:84px;flex:0 0 84px;border-radius:50%;
  object-fit:cover;object-position:50% 18%;
  box-shadow:0 8px 24px -12px rgba(20,50,41,.45)}
.ba-host b{display:block;font-size:.98rem;color:var(--ink);line-height:1.35}
.ba-host span{display:block;margin-top:3px;font-size:.86rem;color:var(--ink-faint);line-height:1.45}

/* Portrait */
.ba-portrait{position:relative}
.ba-portrait img{width:100%;height:auto;display:block;border-radius:2px;
  box-shadow:0 24px 60px -28px rgba(20,50,41,.45)}
.ba-hero .ba-portrait img{aspect-ratio:4/5;object-fit:cover;object-position:50% 22%}
.ba-portrait figcaption{margin-top:var(--s2);font-size:.82rem;color:var(--ink-faint)}

/* ---------- FORMULAR ---------- */
.ba-form{background:#fff;border:1px solid var(--rule);border-radius:var(--radius);
  padding:clamp(20px,3vw,30px);margin-top:var(--s4);
  box-shadow:0 2px 0 var(--rule-soft)}
.ba-form__h{font-family:var(--sans);font-size:1.28rem;font-weight:600;margin:0 0 var(--s1)}
.ba-form__hint{font-size:.88rem;color:var(--ink-soft);margin:0 0 var(--s3)}

.ba-form .ba-field{margin-bottom:var(--s2);display:block}
.ba-form label{
  display:block;font-size:.8rem;font-weight:600;letter-spacing:.03em;
  color:var(--ink);margin-bottom:6px}
.ba-form input[type=text],.ba-form input[type=email]{
  width:100%;min-height:52px;padding:13px 15px;font-family:var(--sans);
  font-size:16px;color:var(--ink);background:#fff;
  border:1px solid #C9CDD1;border-radius:var(--radius);transition:border-color .18s ease,box-shadow .18s ease}
.ba-form input::placeholder{color:var(--ink-faint)}
.ba-form input:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,139,150,.18)}
.ba-form input[aria-invalid="true"]{border-color:#B3261E}

.ba-form button{
  width:100%;min-height:56px;margin-top:var(--s1);cursor:pointer;
  font-family:var(--sans);font-size:1.02rem;font-weight:600;letter-spacing:.01em;
  color:var(--ink);background:var(--cta);border:0;border-radius:var(--radius);
  transition:background .18s ease,transform .18s ease}
.ba-form button:hover{background:var(--cta-hover);color:var(--ink)}
.ba-form button:active{transform:translateY(1px)}
.ba-form button:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.ba-form button[disabled]{opacity:.72;cursor:progress}

.ba-reassure{margin:var(--s3) 0 0;padding:0;list-style:none;
  font-size:.85rem;line-height:1.5;color:var(--ink-soft)}
.ba-reassure li{position:relative;padding-left:22px;margin-bottom:9px}
.ba-reassure li::before{content:"";position:absolute;left:0;top:.55em;
  width:9px;height:9px;border-radius:50%;border:1.5px solid var(--accent)}
.ba-reassure li:last-child{margin-bottom:0}
.ba-reassure a{color:var(--ink-soft);text-underline-offset:2px;
  display:inline-block;padding:10px 2px;margin:-10px 0}

/* Turnstile-Feld nicht anfassen, nur Abstand */
.ba-turnstile{margin:var(--s2) 0 var(--s1);min-height:66px}

/* Honigtopf: fuer Menschen unsichtbar, fuer Bots ein Feld wie jedes andere.
   Bewusst kein display:none — manche Bots fuellen nur sichtbare Felder. */
.ba-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* Rueckmeldung des Endpunkts (Fehlerfall). Steht IM Formular, nicht als Alert. */
.ba-form__msg{margin:var(--s2) 0 0;padding:12px 14px;border-radius:var(--radius);
  background:#FDECEA;border:1px solid #F3C4BF;color:#8C1D18;font-size:.9rem}
.ba-form__msg[hidden]{display:none}

/* Gleiche Form, ruhiger Ton: Das hier ist keine Fehlermeldung, sondern
   die Rueckmeldung waehrend des Absendens. */
.ba-form__msg--info{background:var(--accent-soft);border-color:#B9DDE0;color:var(--ink-soft)}

/* ---------- Video ---------- */
.ba-video{max-width:860px;margin:var(--s4) auto 0}
.ba-video__frame{position:relative;aspect-ratio:16/9;background:#0B4B51;
  border-radius:3px;overflow:hidden;box-shadow:0 24px 60px -30px rgba(20,50,41,.5)}
.ba-video__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- Zwei-Spalten-Textsektion ---------- */
.ba-split{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start}
@media(min-width:900px){.ba-split{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}}
.ba-split p{font-size:1.05rem;color:var(--ink-soft);max-width:38em}

/* ---------- Nummerierte Liste ---------- */
.ba-steps{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.ba-steps li{display:grid;grid-template-columns:auto 1fr;gap:var(--s3);
  padding:clamp(20px,3vw,32px) 0;border-bottom:1px solid var(--rule)}
@media(min-width:700px){.ba-steps li{gap:var(--s4)}}
.ba-steps .n{font-family:var(--sans);font-size:.95rem;color:var(--accent);
  font-variant-numeric:tabular-nums;padding-top:.28em}
.ba-steps h3{margin-bottom:6px}
.ba-steps p{margin:0;color:var(--ink-soft);font-size:.99rem;max-width:46em}

/* ---------- Gastgeberin ----------
   Die Spalten waren verkehrt herum: Ihre Geschichte stand in 423 px,
   waehrend Bild und Zahlen 572 px bekamen — die Zahlen liefen dadurch
   nach rechts ins Leere. Text bekommt jetzt die breitere Spalte, Bild und
   Zahlen stehen als schmaler Block daneben und fluchten miteinander.
   Angesprochen wird die Sektion ueber ihren Inhalt, damit die Vorlage
   dafuer nicht angefasst werden muss. */
@media(min-width:900px){
  .ba-section--warm:has(.ba-portrait) .ba-split{
    grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr)}
}
.ba-section--warm:has(.ba-portrait) .ba-split > div:last-child{max-width:360px}
.ba-section--warm .ba-portrait{max-width:340px;margin:0}
.ba-section--warm .ba-portrait img{aspect-ratio:4/5;object-fit:cover;object-position:50% 20%}
.ba-section--warm .ba-stats{margin-top:var(--s4)}
.ba-stats{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.ba-stats li{padding:var(--s3) 0;border-bottom:1px solid var(--rule)}
.ba-stats b{display:block;font-size:2.1rem;font-weight:700;
  line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.ba-stats span{font-size:.82rem;color:var(--ink-faint)}
.ba-role{color:var(--cta);font-weight:600;margin-bottom:var(--s2)}
.ba-cred{font-size:.88rem;color:var(--ink-faint);line-height:1.6;margin-top:var(--s3)}
.ba-bridge{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--rule);
  font-size:1.02rem;color:var(--ink-soft)}

/* ---------- Stimmen ---------- */
.ba-quotes{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s4);margin-top:var(--s4)}
@media(min-width:820px){.ba-quotes{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.ba-quote{border-left:2px solid var(--accent);padding-left:var(--s3)}
.ba-quote blockquote{margin:0;font-family:var(--sans);font-size:1.14rem;
  line-height:1.5;color:var(--ink)}
.ba-quote cite{display:block;margin-top:var(--s2);font-style:normal;
  font-size:.84rem;color:var(--ink-faint)}
.ba-proof{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--rule);
  display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;
  font-size:.9rem;color:var(--ink-soft)}
.ba-proof b{font-size:1.3rem;color:var(--ink);font-weight:700}
.ba-proof img{height:52px;width:auto}

/* ---------- FAQ ---------- */
.ba-faq{margin-top:var(--s4);border-top:1px solid var(--rule);max-width:820px}
.ba-faq details{border-bottom:1px solid var(--rule)}
.ba-faq summary{cursor:pointer;list-style:none;padding:var(--s3) 44px var(--s3) 0;
  position:relative;font-weight:600;font-size:1.03rem;min-height:44px;display:flex;align-items:center}
.ba-faq summary::-webkit-details-marker{display:none}
.ba-faq summary:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
.ba-faq summary::after{content:"";position:absolute;right:8px;top:50%;
  width:11px;height:11px;margin-top:-7px;border-right:1.5px solid var(--cta);
  border-bottom:1.5px solid var(--cta);transform:rotate(45deg);
  transition:transform .22s ease}
.ba-faq details[open] summary::after{transform:rotate(-135deg);margin-top:-3px}
.ba-faq p{margin:0 0 var(--s3);color:var(--ink-soft);max-width:64ch}

/* ---------- Abschluss-Sektion ---------- */
.ba-close{background:var(--surface);color:#fff;position:relative;overflow:hidden}
.ba-close::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 70% at 12% 0%,rgba(255,255,255,.14),transparent 60%)}
.ba-close__in{position:relative;z-index:1;max-width:var(--wrap);margin:0 auto;
  padding:clamp(56px,8vw,120px) var(--gut);
  display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
@media(min-width:960px){.ba-close__in{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}}
/* Auf der tuerkisen Flaeche gilt Weiss — aber NUR fuer die Textspalte.
   Vorher traf die Regel jeden Absatz in der Sektion, also auch die im
   weissen Formularkasten: "Ich bin dabei" stand weiss auf weiss und war
   nur beim Markieren zu sehen. Deshalb ist die Regel jetzt auf die
   Textspalte begrenzt, und der Kasten setzt seine Farben zusaetzlich
   ausdruecklich zurueck. */
.ba-close h2{color:#fff;max-width:14em}
.ba-close__in > div p{color:#fff;max-width:32em;margin-top:var(--s3);font-size:1.06rem}
.ba-close__when{margin-top:var(--s3);font-family:var(--sans);font-size:1.05rem;
  color:#fff;padding-top:var(--s3);border-top:1px solid rgba(255,255,255,.22)}

/* Das Label war Marken-Tuerkis auf Marken-Tuerkis — 1,3:1, praktisch
   unsichtbar. Weiss auf dieser Flaeche liegt bei 5,1:1 und bleibt durch
   Groesse und Laufweite trotzdem der Ueberschrift untergeordnet. */
.ba-close .ba-label{color:rgba(255,255,255,.85)}

.ba-close .ba-form{margin-top:0}
.ba-close .ba-form .ba-form__h{color:var(--ink);max-width:none;margin-top:0;font-size:1.28rem}
.ba-close .ba-form .ba-form__hint,
.ba-close .ba-form .ba-form__msg,
.ba-close .ba-reassure li{color:var(--ink-soft);max-width:none;font-size:.88rem}
.ba-close .ba-form label{color:var(--ink)}

/* ---------- Fußzeile ---------- */
.ba-foot{background:var(--surface-deep);color:rgba(255,255,255,.88);
  padding:var(--s4) 0;font-size:.85rem}
.ba-foot__in{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut);
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);justify-content:space-between}
.ba-foot a{color:#fff;text-decoration:none;text-underline-offset:3px;
  display:inline-block;padding:12px 2px}
.ba-foot a:hover{text-decoration:underline}
.ba-foot a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- Danke-Seite ---------- */
.ba-thanks{max-width:760px;margin:0 auto;padding:clamp(48px,8vw,110px) var(--gut)}
.ba-thanks h1{font-size:clamp(2rem,5vw,3.2rem)}
.ba-thanks__lead{font-size:1.12rem;color:var(--ink-soft);margin-top:var(--s3)}
.ba-note{background:#fff;border:1px solid var(--rule);border-left:3px solid var(--accent);
  border-radius:2px;padding:var(--s3);margin:var(--s4) 0}
.ba-note p{margin:0 0 .6em;font-size:.95rem;color:var(--ink-soft)}
.ba-note p:last-child{margin:0}
.ba-note strong{color:var(--ink)}
.ba-when{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:var(--s3) 0;margin:var(--s4) 0}
@media(min-width:620px){.ba-when{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ba-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 26px;background:var(--cta);color:var(--ink);
  font-weight:600;text-decoration:none;border-radius:var(--radius);transition:background .18s ease}
.ba-btn:hover{background:var(--cta-hover);color:var(--ink)}
.ba-btn:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

/* ---------- Bewegung: einmal beim Laden, nur im Hero ----------
   Bewusst KEIN Scroll-Reveal weiter unten: Inhalt, der erst durch
   JavaScript sichtbar wird, bleibt sonst auf Mobilgeräten und in
   Screenshots unsichtbar. Der Rest der Seite ist immer da. */
@media (prefers-reduced-motion:no-preference){
  .js .ba-hero .ba-rise{
    opacity:0;transform:translateY(14px);
    animation:ba-rise-in .62s cubic-bezier(.22,.61,.36,1) forwards;
    animation-delay:calc(var(--i,0) * 85ms);
  }
}
@keyframes ba-rise-in{to{opacity:1;transform:none}}

/* ---------- Mobile Sticky-CTA ----------
   Standardmäßig NICHT vorhanden. Nur wenn JavaScript läuft und das
   Formular gerade nicht im Bild ist, wird die Leiste eingeblendet.
   Fällt JavaScript aus, fehlt lediglich die Leiste — es verschwindet
   kein Inhalt. */
.ba-sticky{display:none}
@media(max-width:999px){
  .js .ba-sticky{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:rgba(0,114,123,.97);backdrop-filter:blur(6px);
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    border-top:1px solid rgba(255,255,255,.14);
    transform:translateY(110%);transition:transform .28s cubic-bezier(.22,.61,.36,1);
  }
  .js .ba-sticky.is-on{transform:none}
  .ba-sticky a{display:flex;align-items:center;justify-content:center;gap:10px;
    min-height:52px;background:var(--cta);color:var(--ink);border-radius:var(--radius);
    font-weight:700;text-decoration:none;font-size:1rem}
  .ba-sticky a:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
  .ba-sticky small{display:block;text-align:center;color:rgba(255,255,255,.72);
    font-size:.72rem;margin-top:7px}
  body.ba-webinar{padding-bottom:0}
}
@media(max-width:999px) and (prefers-reduced-motion:reduce){
  .js .ba-sticky{transition:none}
}

/* ---------- Danke-Seite: die einzelnen Zustaende ----------
   Es ist immer nur EIN Zustand auf der Seite. Deshalb braucht es hier
   keine Unterscheidung per Farbe — der Text traegt allein. */

/* Die drei Schritte im Zustand "neu". Gleiche Optik wie die Schritt-Liste
   der Anmeldeseite, nur enger, weil die Seite kuerzer ist. */
.ba-steps--danke{margin-top:var(--s4)}
.ba-steps--danke li{padding:var(--s3) 0}
.ba-steps--danke p{margin:0}
.ba-steps--danke a{color:var(--accent-text)}

/* Termin-Block. Die Auszeichnungen standen vorher als inline-styles im HTML. */
.ba-when dt{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:600;margin-bottom:4px}
.ba-when dd{margin:0;font-weight:600;font-size:1.02rem;color:var(--ink)}

.ba-thanks__video{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--rule)}
.ba-thanks__video h2{font-size:clamp(1.5rem,3.2vw,2.2rem)}
.ba-thanks__video p{color:var(--ink-soft);max-width:38em;margin-top:var(--s2)}
.ba-thanks__video .ba-video{margin-top:var(--s3)}

.ba-thanks__ende{margin-top:var(--s5);padding-top:var(--s4);
  border-top:1px solid var(--rule);color:var(--ink-soft)}

/* ---------- Schmale Handys ----------
   Das Turnstile-Feld von Cloudflare hat eine feste Mindestbreite von 300 px.
   Auf einem 360-px-Handy bleiben nach Seitenrand und Formular-Innenabstand
   nur 280 px uebrig — das Feld sprengt dann die Rasterspalte, und der
   Ueberstand wandert in ALLE Elemente derselben Spalte, auch in die
   Ueberschrift darueber. Genau das war am 24.08. auf dem Handy zu sehen.

   Deshalb hier: Raender enger, und wenn es immer noch nicht reicht, das
   Feld selbst maszvoll herunterskalieren. Gemessen bei 320, 360, 375 und
   414 px. */
@media (max-width:420px){
  :root{ --gut:16px }
  .ba-form{ padding:20px 16px }
}

.ba-turnstile{ display:flex; justify-content:flex-start }

@media (max-width:400px){
  .ba-turnstile{ overflow:hidden }
  .ba-turnstile .cf-turnstile{ transform:scale(.95); transform-origin:0 50% }
}
@media (max-width:344px){
  .ba-turnstile .cf-turnstile{ transform:scale(.82) }
}