/* ============================================================
   Fragebogen 2.0 — 1:1 aus design-entwurf-2.0/fragebogen*.html.
   Teil 1: Original-fb-Styles des Prototyps (unverändert).
   Teil 2: Adapter, die das bestehende Engine-Markup
   (category_form.blade.php) auf den fb-Look mappen — Struktur,
   IDs, name-Attribute und das Engine-JS bleiben unberührt.
   ============================================================ */

/* Design-Tokens: siehe tokens.css (verbindliche Quelle: ci-drfuxx-2_0.pdf) */

/* ===== Teil 1: Prototyp-Styles ===== */
body.fb{background:radial-gradient(46% 34% at 88% -4%,rgba(123,66,246,.10),transparent 60%),linear-gradient(168deg,#eef3f1 0%,#cdddd7 32%,#9fb4ad 64%,#6e8b84 100%) fixed;min-height:100dvh;display:flex;flex-direction:column;color:var(--ink,#1B1922);}
.fb-top{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);border-bottom:1px solid rgba(27,25,34,.08);}
.fb-top__in{max-width:860px;margin:0 auto;padding:13px 22px 0;display:flex;align-items:center;gap:14px;}
.fb-brand{font-family:var(--font-display,'Hanken Grotesk',sans-serif);font-weight:800;font-size:1.06rem;color:var(--ink,#1B1922);display:inline-flex;align-items:center;gap:7px;text-decoration:none;}
.fb-brand .orb{width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#cdaaff,#7B42F6);box-shadow:0 0 0 3px rgba(123,66,246,.12);}
.fb-lock{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-family:var(--font-display,'Hanken Grotesk',sans-serif);font-weight:700;font-size:.78rem;color:var(--rd-violet-ink);}
.fb-lock svg{width:14px;height:14px;stroke:var(--rd-violet);stroke-width:2;fill:none;}
.fb-seg{max-width:860px;margin:11px auto 0;padding:0 22px;display:flex;gap:6px;}
.fb-seg__i{flex:1;height:5px;border-radius:999px;background:rgba(123,66,246,.13);overflow:hidden;position:relative;}
.fb-seg__i.done{background:rgba(123,66,246,.32);}
.fb-seg__i.act::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#7B42F6,#9D5BFF);border-radius:999px;box-shadow:0 0 10px rgba(157,91,255,.6);}
.fb-meta{max-width:860px;margin:9px auto 0;padding:0 22px 13px;display:flex;align-items:center;justify-content:space-between;}
.fb-meta__sec{font-family:var(--font-display,'Hanken Grotesk',sans-serif);font-weight:800;font-size:.95rem;color:var(--ink,#1B1922);}
.fb-meta__no{font-family:var(--font-display,'Hanken Grotesk',sans-serif);font-weight:700;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--rd-violet-ink);}
.fb-stage{flex:1;display:flex;flex-direction:column;align-items:center;width:100%;max-width:760px;margin:0 auto;padding:38px 22px 150px;}
.fb-step.in{animation:fbIn .42s cubic-bezier(.22,1,.36,1);}
.fb-step.back.in{animation:fbBack .42s cubic-bezier(.22,1,.36,1);}
@keyframes fbIn{from{opacity:0;transform:translateX(28px);}to{opacity:1;transform:none;}}
@keyframes fbBack{from{opacity:0;transform:translateX(-28px);}to{opacity:1;transform:none;}}
.fb-kick{font-family:var(--font-display,'Hanken Grotesk',sans-serif);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.76rem;color:var(--rd-violet-ink);}
.fb-conf{display:inline-flex;align-items:center;gap:7px;margin-top:14px;font-family:var(--font-display,'Hanken Grotesk',sans-serif);font-weight:700;font-size:.8rem;color:var(--rd-violet-ink);background:var(--rd-violet-wash);padding:6px 12px;border-radius:999px;}
.fb-conf svg{width:14px;height:14px;stroke:var(--rd-violet);stroke-width:2;fill:none;}
.fb-err{display:none;margin-top:14px;align-items:center;gap:9px;color:#b3261e;font-size:.92rem;font-weight:600;}
.fb-err.show{display:flex;}
.fb-err svg{width:18px;height:18px;stroke:#b3261e;stroke-width:2;fill:none;flex:0 0 18px;}
.fb-foot{position:fixed;left:0;right:0;bottom:0;z-index:45;background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid rgba(27,25,34,.08);padding-bottom:env(safe-area-inset-bottom);}
.fb-foot__in{max-width:760px;margin:0 auto;padding:14px 22px;display:flex;align-items:center;gap:14px;}
.fb-back{font-family:var(--font-display,'Hanken Grotesk',sans-serif);font-weight:700;color:var(--muted,#6E6878);padding:12px 8px;display:inline-flex;align-items:center;gap:7px;visibility:hidden;background:none;border:none;cursor:pointer;font-size:1rem;}
.fb-back:hover{color:var(--ink,#1B1922);}
.fb-back svg{width:18px;height:18px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.fb-next{margin-left:auto;min-width:170px;border:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:52px;border-radius:999px;background:linear-gradient(180deg,#8a52ff,#7B42F6);color:#fff;font-family:var(--font-display,'Hanken Grotesk',sans-serif);font-weight:800;font-size:1.02rem;box-shadow:0 18px 38px -18px rgba(123,66,246,.7);transition:transform .15s,box-shadow .2s,filter .2s;padding:0 26px;}
.fb-next:hover{transform:translateY(-2px);box-shadow:0 24px 48px -18px rgba(123,66,246,.8);filter:brightness(1.04);}
.fb-next svg{width:18px;height:18px;stroke:#fff;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.fb-next.is-submit{background:#E8A23D;color:#3a2a10;}
.fb-next.is-submit svg{stroke:#3a2a10;}
.fb-next.is-submit:hover{background:#f0b056;}
.fb-next:disabled{opacity:.6;cursor:wait;transform:none;}
.fb-trust{max-width:760px;margin:8px auto 0;font-size:.84rem;color:#2c4742;font-weight:500;display:flex;align-items:center;gap:8px;}
.fb-trust svg{width:15px;height:15px;stroke:#2c4742;stroke-width:2;fill:none;flex:0 0 15px;}
.fb-back:focus-visible,.fb-next:focus-visible{outline:3px solid var(--rd-violet);outline-offset:2px;}
@media (max-width:680px){
  .fb-stage{padding:24px 18px calc(150px + env(safe-area-inset-bottom));scroll-padding-bottom:calc(150px + env(safe-area-inset-bottom));}
  .fb-foot__in{padding:13px 18px;}
  .fb-next{min-width:0;flex:1;}
  .fb-meta__sec{font-size:.86rem;}
}
@media (prefers-reduced-motion:reduce){
  .fb-step.in,.fb-step.back.in{animation:none;}
}

/* ===== Teil 2: Adapter für das Engine-Markup ===== */

/* Altes Seiten-Chrome des Formulars ausblenden (Wizard ersetzt es) */
body.fb .rd-fb > div > .bg-white > .p-4.md\:p-6,          /* Kopfkarte (Icon + Name) */
body.fb .rd-fb .progress-container,
body.fb .rd-fb .questionnaire-section > .mb-6 {           /* Section-Header-Boxen */
  display: none !important;
}

/* Karte auflösen: Fragebogen liegt direkt auf dem fb-Hintergrund */
body.fb .rd-fb { padding: 0 !important; }
/* Aktive Frage vertikal mittig zwischen Kopf und Fußleiste (Typeform-Muster):
   .rd-fb füllt die Resthöhe (100svh − Kopf ~102 − Trust-Zeile − Fußleiste 135)
   und zentriert die Fragekarte; das Innen-Padding (oben 110 / unten 150 =
   Freiraum für die fixe Fußleiste) hält die optische Mitte leicht überhöht.
   Lange Inhalte (Final-Step) wachsen über die min-height hinaus und scrollen. */
body.fb .rd-fb {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - 270px);
  min-height: calc(100svh - 270px);
}
body.fb .rd-fb > div { max-width: 760px; margin: 0 auto; padding: 110px 22px calc(150px + env(safe-area-inset-bottom)); }
@media (max-width: 680px) {
  body.fb .rd-fb > div { padding-top: 34px; }
}
body.fb .rd-fb > div > .bg-white {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
body.fb .rd-fb .px-4.py-8.sm\:p-10, body.fb .rd-fb .sm\:p-10 { padding: 0 !important; }

/* Wizard: nur der aktive Schritt ist sichtbar */
body.fb .rd-fb .question-wrapper { display: none; margin: 0 !important; }
body.fb .rd-fb .question-wrapper.fb-active { display: block; }
body.fb .rd-fb #rdFinalStep { display: none; }
body.fb .rd-fb #rdFinalStep.fb-active { display: block; }

/* Fragetitel → fb-q */
body.fb .rd-fb .question-wrapper > label.block {
  font-family: var(--font-display,'Hanken Grotesk',sans-serif) !important;
  font-weight: 800 !important;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem) !important;
  line-height: 1.12 !important;
  letter-spacing: -.01em;
  color: var(--ink,#1B1922) !important;
  margin: 10px 0 0 !important;
  text-wrap: balance;
}
@media (max-width:680px){
  body.fb .rd-fb .question-wrapper > label.block { font-size: clamp(1.5rem, 7vw, 2rem) !important; }
}

/* Hilfetext → fb-help */
body.fb .rd-fb .question-wrapper > p.font-body {
  color: var(--muted,#6E6878) !important;
  font-size: 1.02rem !important;
  line-height: 1.55;
  margin-top: 14px !important;
  max-width: 52ch;
}

/* Eingabebereich Abstand wie fb-body */
body.fb .rd-fb .question-wrapper > .flex.flex-wrap.gap-2,
body.fb .rd-fb .question-wrapper > .space-y-4,
body.fb .rd-fb .question-wrapper textarea.question-input,
body.fb .rd-fb .question-wrapper input.question-input:not(.sr-only),
body.fb .rd-fb .question-wrapper select.question-input,
body.fb .rd-fb .question-wrapper .q-file-wrap,
body.fb .rd-fb .question-wrapper .flex:has(> input[type="number"]) {
  margin-top: 26px !important;
}

/* Radio-/Checkbox-Optionen → fb opt-Pills (Grid, Kreis-Check links) */
body.fb .rd-fb .question-wrapper > .flex.flex-wrap.gap-2 {
  display: grid !important;
  gap: 12px !important;
  grid-template-columns: 1fr;
}
body.fb .rd-fb .question-wrapper > .flex.flex-wrap.gap-2.rd-opts--two { grid-template-columns: 1fr 1fr; }
body.fb .rd-fb .question-wrapper > .space-y-4 { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
body.fb .rd-fb .question-wrapper > .space-y-4 > * + * { margin-top: 0 !important; }
@media (max-width:680px){
  body.fb .rd-fb .question-wrapper > .flex.flex-wrap.gap-2.rd-opts--two,
  body.fb .rd-fb .question-wrapper > .space-y-4 { grid-template-columns: 1fr; }
}
body.fb .rd-fb .question-wrapper .relative { width: 100%; }
body.fb .rd-fb .question-wrapper input.question-input + label {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 14px;
  width: 100%;
  min-height: 64px;
  padding: 16px 18px !important;
  background: #fff !important;
  border: 1.5px solid rgba(27,25,34,.12) !important;
  border-radius: 16px !important;
  cursor: pointer;
  text-align: left !important;
  font-family: var(--font-display,'Hanken Grotesk',sans-serif) !important;
  font-weight: 700 !important;
  font-size: 1.04rem !important;
  color: var(--ink,#1B1922) !important;
  transition: border-color .18s, background .18s, box-shadow .18s, transform .15s;
}
body.fb .rd-fb .question-wrapper input.question-input + label:hover {
  border-color: var(--rd-violet-2) !important;
  transform: translateY(-1px);
}
body.fb .rd-fb .question-wrapper input.question-input:checked + label {
  border-color: var(--rd-violet) !important;
  background: linear-gradient(180deg,#F7F2FF,#fff 70%) !important;
  color: var(--ink,#1B1922) !important;
  box-shadow: 0 16px 36px -24px rgba(123,66,246,.5) !important;
}
body.fb .rd-fb .question-wrapper input.question-input:focus-visible + label {
  outline: 3px solid var(--rd-violet); outline-offset: 2px;
}
/* Check-Kreis (vom Wizard-JS in jedes Label eingefügt) */
body.fb .rd-fb .opt__ck {
  flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid rgba(27,25,34,.12); display: grid; place-items: center;
  transition: border-color .18s, background .18s;
}
body.fb .rd-fb input[type="checkbox"] + label .opt__ck { border-radius: 7px; }
body.fb .rd-fb input:checked + label .opt__ck { border-color: var(--rd-violet); background: var(--rd-violet); }
body.fb .rd-fb .opt__ck svg { width: 13px; height: 13px; stroke: #fff; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; transform: scale(.4); opacity: 0; transition: .18s; }
body.fb .rd-fb input:checked + label .opt__ck svg { transform: scale(1); opacity: 1; }
body.fb .rd-fb .question-wrapper label .block.w-full { text-align: left !important; width: auto !important; }

/* bullet_list-Fragen (Bestätigungs-/Medikamentenlisten): opake CI-Karte mit
   Abstand zum Fragetitel — vorher klebte die Liste am Titel und lag ohne
   Hintergrund direkt auf dem fb-Verlauf. Ja/Nein-Pills kompakt statt
   full-width (Adapter-Optionsregel greift hier sonst mit 64px/100%). */
body.fb .rd-fb .bullet-list-block {
  margin-top: 26px;
  background: #fff;
  border: 1.5px solid rgba(27,25,34,.10);
  border-radius: 18px;
  padding: 22px 24px;
  box-shadow: 0 16px 38px -28px rgba(27,25,34,.4);
}
body.fb .rd-fb .bullet-list-block .bullet-list-items li {
  color: var(--rd-ink,#1B1922);
  margin-bottom: 10px !important;
}
body.fb .rd-fb .bullet-list-block .relative { width: auto; }
body.fb .rd-fb .bullet-list-block input.question-input + label,
body.fb .rd-fb .bullet-list-block input.sub-question-input + label {
  width: auto;
  min-height: 48px;
  min-width: 96px;
  justify-content: center !important;
  padding: 10px 22px !important;
}
@media (max-width: 680px) {
  body.fb .rd-fb .bullet-list-block { padding: 18px 16px; }
  body.fb .rd-fb .bullet-list-block .bullet-list-choice { width: 100%; }
  body.fb .rd-fb .bullet-list-block .bullet-list-choice .relative { flex: 1; }
}

/* Text/Zahl/Datum/Select/Textarea → fb-field */
body.fb .rd-fb .question-wrapper textarea.question-input,
body.fb .rd-fb .question-wrapper input.question-input:not([type="radio"]):not([type="checkbox"]):not([type="file"]),
body.fb .rd-fb .question-wrapper select.question-input {
  width: 100%;
  border: 1.5px solid rgba(27,25,34,.12) !important;
  border-radius: 16px !important;
  background: #fff !important;
  padding: 16px 18px !important;
  font-family: var(--font-body,'Inter',sans-serif) !important;
  font-size: 1.02rem !important;
  color: var(--ink,#1B1922);
  line-height: 1.5;
  transition: border-color .18s, box-shadow .18s;
}
body.fb .rd-fb .question-wrapper textarea.question-input { min-height: 140px; resize: vertical; }

/* Zahlen-Eingabe mit Einheit (Größe „cm“ / Gewicht „kg“) → verbundene CI-Optik.
   Robust: Input wird per Flex bemessen (NICHT width:100%), die Einheit dehnt
   sich auf die Input-Höhe. So sitzen beide bündig auf einer Linie. */
body.fb .rd-fb .question-wrapper .flex:has(> input.question-input:not([type="radio"]):not([type="checkbox"]):not([type="file"])) {
  display: flex !important;
  align-items: stretch !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
}
body.fb .rd-fb .question-wrapper .flex > input.question-input:not([type="radio"]):not([type="checkbox"]):not([type="file"]) {
  flex: 1 1 auto !important;
  width: auto !important;            /* kill Tailwind w-full, das den Flex-Umbruch verursacht */
  min-width: 0 !important;
  margin: 0 !important;              /* stray margin-top:26px versetzte das Input gegen die Einheit */
  height: 56px !important;
  min-height: 56px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right: none !important;
}
body.fb .rd-fb .question-wrapper .flex > input.question-input:not([type="radio"]):not([type="checkbox"]):not([type="file"]) + span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: stretch !important;    /* gleiche Höhe wie das Input, ohne 13px-Versatz */
  flex: 0 0 auto !important;
  min-width: 72px;
  box-sizing: border-box !important;
  border-width: 1.5px !important;
  border-style: solid !important;
  border-left: none !important;
  border-radius: 0 16px 16px 0 !important;
  /* Farbe (Grün = kg / Blau = cm) kommt aus dem Inline-Style am Element,
     passend zu den Einheiten-Badges am Label. Kein Violett erzwingen. */
  font-family: var(--font-display, 'Hanken Grotesk', sans-serif) !important;
  font-weight: 700 !important;
  padding: 0 20px !important;
  line-height: 1 !important;
}
body.fb .rd-fb .question-wrapper .question-input:focus {
  outline: none !important;
  border-color: var(--rd-violet) !important;
  box-shadow: 0 0 0 4px rgba(123,66,246,.14) !important;
}

/* Sub-Fragen (Verzweigung) → keine Wash-Karte: klares Eingabefeld direkt auf dem fb-Hintergrund (wie die Hauptfragen) */
body.fb .rd-fb .sub-question-wrapper {
  margin: 18px 0 0 !important;
  padding: 0 !important;
  border: none !important;
  border-left: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
/* Verschachtelte Unterfragen ebenfalls ohne Karte */
body.fb .rd-fb .nested-sub-questions-container .sub-question-wrapper {
  background: transparent !important;
  box-shadow: none !important;
}
/* Eingaben in Unterfragen: klar auf weißem Grund */
body.fb .rd-fb .sub-question-wrapper .sub-question-input,
body.fb .rd-fb .sub-question-wrapper textarea.sub-question-input,
body.fb .rd-fb .sub-question-wrapper select.sub-question-input {
  background: #fff !important;
}
body.fb .rd-fb .sub-question-wrapper > label {
  font-family: var(--font-display,'Hanken Grotesk',sans-serif) !important;
  font-weight: 700 !important;
  font-size: .95rem !important;
  color: var(--ink,#1B1922) !important;
}
body.fb .rd-fb .sub-question-wrapper .sub-question-input {
  border: 1.5px solid rgba(27,25,34,.12) !important;
  border-radius: 16px !important;
  padding: 16px 18px !important;
  font-size: 1.02rem !important;
}
body.fb .rd-fb .sub-question-wrapper .sub-question-input:focus {
  outline: none !important;
  border-color: var(--rd-violet) !important;
  box-shadow: 0 0 0 4px rgba(123,66,246,.14) !important;
}

/* Custom-Dropdown (Engine): Options-Panel war transparent (bg-white-Utility
   greift im fb-Kontext nicht) → Inhalte dahinter schienen durch. Deckende
   CI-Fläche + klare Kante, über Trust-Note/Chrome gestapelt. */
body.fb .rd-fb .custom-select-options {
  background: #fff !important;
  border: 1.5px solid rgba(27,25,34,.12) !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 44px -22px rgba(27,25,34,.35) !important;
  z-index: 1000 !important;
}
body.fb .rd-fb .custom-dropdown-container.open { z-index: 200 !important; }
/* Bei knappem Platz unter dem Trigger klappt das JS das Panel nach oben */
body.fb .rd-fb .custom-dropdown-container.drop-up .custom-select-options {
  top: auto !important;
  bottom: 100% !important;
  margin-bottom: 6px !important;
  margin-top: 0 !important;
}

/* Trigger des Custom-Dropdowns: wurde vom Karten-Auflöser (div.bg-white.font-body)
   miterfasst → wirkte wie nackter Text statt Auswahlfeld. Als opakes CI-Feld
   ausformen; Text nicht selektierbar (verhindert u.a. das Translate-Popup). */
body.fb .rd-fb .custom-select-trigger {
  background: #fff !important;
  border: 1.5px solid rgba(27,25,34,.16) !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 26px -18px rgba(27,25,34,.28) !important;
  padding: 10px 12px 10px 18px !important;
  min-height: 56px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  /* Tailwind-Utilities (flex/w-8/h-8) existieren im fb-Kontext nicht → Layout explizit */
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px;
}
body.fb .rd-fb .custom-select-trigger .selected-text {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 600; color: var(--rd-ink,#1B1922);
}
body.fb .rd-fb .custom-select-trigger .selected-text.text-gray-500 {
  color: var(--rd-muted,#6E6878); font-weight: 500;
}
body.fb .rd-fb .custom-select-trigger .trigger-icon-bg {
  flex: 0 0 36px; width: 36px !important; height: 36px !important;
  border-radius: 999px !important;
  display: flex; align-items: center; justify-content: center;
  background: var(--rd-violet-wash,#F1EAFE) !important;
  border: none !important; box-shadow: none !important;
}
body.fb .rd-fb .custom-select-trigger .dropdown-icon { color: var(--rd-violet,#7B42F6); }
body.fb .rd-fb .custom-select-trigger:hover,
body.fb .rd-fb .custom-dropdown-container.open .custom-select-trigger {
  border-color: var(--rd-violet) !important;
}
body.fb .rd-fb .custom-select-trigger:focus-visible {
  outline: none !important;
  border-color: var(--rd-violet) !important;
  box-shadow: 0 0 0 4px rgba(123,66,246,.14) !important;
}

/* Info-Steps */
body.fb .rd-fb .question-wrapper [style*="f5f0ff"] {
  border-radius: 16px !important;
  margin-top: 26px;
  font-size: 1rem !important;
}

/* Fehlertexte der Engine → fb-Fehlerfarbe */
body.fb .rd-fb [id^="error_"] { font-weight: 600; margin-top: 12px; }

/* Finaler Schritt (AGB + Erklärungen + Auth) → cl-Consent-Optik */
body.fb .rd-fb #rdFinalStep .fb-final-title {
  font-family: var(--font-display,'Hanken Grotesk',sans-serif);
  font-weight: 800; font-size: clamp(1.7rem,3.4vw,2.3rem); line-height: 1.12;
  margin: 10px 0 0; color: var(--ink,#1B1922);
}
body.fb .rd-fb #rdFinalStep .fb-final-help { color: var(--muted,#6E6878); font-size: 1.02rem; margin: 14px 0 10px; max-width: 52ch; }
body.fb .rd-fb #agb-question-wrapper { display: block !important; margin-top: 18px !important; }
body.fb .rd-fb #agb-question-wrapper > label { font-size: 1.05rem !important; margin-bottom: 10px !important; }
body.fb .rd-fb #agb-question-wrapper .border.border-gray-200,
body.fb .rd-fb #agb-question-wrapper .agb-content { border-radius: 14px !important; background: #fff; }
body.fb .rd-fb #truth-declaration-wrapper,
body.fb .rd-fb #health-data-consent-wrapper {
  background: #fff !important;
  border: 1.5px solid rgba(27,25,34,.12) !important;
  border-radius: 14px !important;
  transition: border-color .18s, background .18s;
}
body.fb .rd-fb #truth-declaration-wrapper:has(input:checked),
body.fb .rd-fb #health-data-consent-wrapper:has(input:checked) {
  border-color: var(--rd-violet) !important;
  background: linear-gradient(180deg,#F7F2FF,#fff 70%) !important;
}
body.fb .rd-fb #truth-declaration-wrapper input,
body.fb .rd-fb #health-data-consent-wrapper input { accent-color: var(--rd-violet); width: 18px; height: 18px; }

/* ===== Redesign finaler Einwilligungs-Schritt (CI 2.0) — nur Präsentation,
        alle input name/id + Auth-JS unverändert. ===== */

/* Einheitlicher vertikaler Rhythmus der Blöcke */
body.fb .rd-fb #rdFinalStep #agb-question-wrapper,
body.fb .rd-fb #rdFinalStep #truth-declaration-wrapper,
body.fb .rd-fb #rdFinalStep #health-data-consent-wrapper,
body.fb .rd-fb #rdFinalStep #inlineAuthSection { margin-bottom: 16px !important; }

/* --- AGB: gestapelt (kein schwebender „Ja“-Chip) --- */
body.fb .rd-fb #agb-question-wrapper .flex.flex-col {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 12px !important;
}
body.fb .rd-fb #agb-question-wrapper .flex.flex-col > div:first-child {
  width: 100% !important;
  flex: 0 0 auto !important;      /* md:flex-1 kollabierte die Box im Spalten-Layout auf 0 */
  max-height: 210px !important;
  overflow-y: auto !important;
}
body.fb .rd-fb #agb-question-wrapper .flex.gap-2,
body.fb .rd-fb #agb-question-wrapper .flex.gap-2 .relative { width: 100% !important; }
body.fb .rd-fb #agb-question-wrapper label[for="agb_consent_0"] {
  width: 100% !important;
  min-width: 0 !important;
  padding: 15px 18px !important;
  border-width: 1.5px !important;
  border-radius: 14px !important;
  font-family: var(--font-display,'Hanken Grotesk',sans-serif) !important;
  font-weight: 700 !important;
}

/* --- Consent-Karten einheitlich & sauber --- */
body.fb .rd-fb #rdFinalStep #truth-declaration-wrapper,
body.fb .rd-fb #rdFinalStep #health-data-consent-wrapper {
  padding: 16px 18px !important;
  gap: 14px !important;
  border-radius: 16px !important;
  align-items: flex-start !important;
}
/* Checkbox überall im finalen Schritt: Violett (kein Orange), größer, bündig */
body.fb .rd-fb #rdFinalStep input[type="checkbox"] {
  accent-color: var(--rd-violet) !important;
  width: 20px !important; height: 20px !important;
  margin-top: 1px !important;
  flex: 0 0 20px !important;
  border-radius: 6px !important;
}
body.fb .rd-fb #rdFinalStep #truth-declaration-wrapper label,
body.fb .rd-fb #rdFinalStep #health-data-consent-wrapper label {
  font-family: var(--font-body,'Inter',sans-serif) !important;
  font-size: .95rem !important; line-height: 1.5 !important; color: var(--ink,#1B1922) !important;
}

/* --- Account-Karte (Gäste) auf CI umgestellt --- */
body.fb .rd-fb #inlineAuthSection > div:first-child {      /* die #fafbff-Karte */
  background: #fff !important;
  border: 1.5px solid rgba(27,25,34,.12) !important;
  border-radius: 18px !important;
  padding: 22px !important;
  box-shadow: 0 18px 44px -30px rgba(27,25,34,.4) !important;
}
body.fb .rd-fb #inlineAuthSection h6 {
  font-family: var(--font-display,'Hanken Grotesk',sans-serif) !important;
  font-weight: 800 !important; font-size: 1.05rem !important; color: var(--ink,#1B1922) !important;
}
body.fb .rd-fb #inlineAuthSection small {
  font-family: var(--font-body,'Inter',sans-serif) !important; color: var(--muted,#6E6878) !important;
}
/* Tabs: nur Form/Größe – aktive Hintergrundfarbe bleibt JS-Inline-Style */
body.fb .rd-fb #inlineAuthSection #authTabLogin,
body.fb .rd-fb #inlineAuthSection #authTabRegister {
  border-radius: 12px !important;
  padding: 11px 16px !important;
  min-height: 46px !important;
  font-family: var(--font-display,'Hanken Grotesk',sans-serif) !important;
  font-weight: 700 !important;
}
/* Eingaben wie die Fragebogen-Felder */
body.fb .rd-fb #inlineAuthSection .form-control {
  border: 1.5px solid rgba(27,25,34,.12) !important;
  border-radius: 12px !important;
  background: #fff !important;
  padding: 12px 14px !important;
  height: auto !important;
  min-height: 48px !important;
  font-family: var(--font-body,'Inter',sans-serif) !important;
  font-size: .98rem !important;
  box-shadow: none !important;
}
body.fb .rd-fb #inlineAuthSection .form-control:focus {
  border-color: var(--rd-violet) !important;
  box-shadow: 0 0 0 4px rgba(123,66,246,.14) !important;
}
body.fb .rd-fb #inlineAuthSection a { color: var(--rd-violet) !important; font-weight: 600 !important; }

/* Terms-Checkbox-Karte konsistent zu den Consent-Karten */
body.fb .rd-fb #inlineAuthSection > div:nth-child(2) {     /* die mt-3-Karte */
  border: 1.5px solid rgba(27,25,34,.12) !important;
  border-radius: 16px !important;
  background: #fff !important;
  padding: 15px 18px !important;
  margin-top: 14px !important;
}
body.fb .rd-fb #inlineAuthSection .form-check-label {
  font-family: var(--font-body,'Inter',sans-serif) !important;
  font-size: .9rem !important; line-height: 1.5 !important; color: var(--ink,#1B1922) !important;
}

/* Engine-Footer (Back-Link + Submit-Button) im Wizard verstecken —
   fb-foot übernimmt; der echte Submit-Button wird programmatisch geklickt */
body.fb .rd-fb form > .bg-light.border-t { display: none !important; }

/* Inline-Auth-Block (Gäste) einpassen */
body.fb .rd-fb #inlineAuthBox, body.fb .rd-fb .rd-inline-auth {
  border-radius: 16px !important;
}

/* Alte Fortschritts-Leiste der Engine ausblenden (Elemente bleiben für das JS im DOM) */
body.fb .rd-fb .mb-6:has(#progressBar) { display: none !important; }

/* Karte endgültig auflösen (breiter Selektor: Struktur-Container, nicht Options-Labels) */
body.fb .rd-fb div.bg-white.font-body:not(.custom-select-options):not(.custom-select-trigger),
body.fb .rd-fb .questionnaire-section,
body.fb .rd-fb .shadow-sm.border-y {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* question-wrapper wird andernorts weiß eingefärbt — im fb-Wizard transparent */
body.fb .rd-fb .question-wrapper,
body.fb .rd-fb #rdFinalStep {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Mobile: Inhalts-Padding erzwingen (px-0-Utility des Containers überschreiben) */
body.fb .rd-fb > div {
  padding-left: 22px !important;
  padding-right: 22px !important;
}
@media (max-width: 680px) {
  body.fb .rd-fb > div {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}