/* ==========================================================================
   MH Immobilien — Funnel: Fluent-Forms-Optik (Auswahlkarten, Steps)

   DOKUMENTIERTE AUSNAHME (Playbook §7): Fluent Forms ist Fremd-Markup und
   kein Bricks-Element — nur dafür ist eine CSS-Datei erlaubt. Alles andere
   im Funnel (Sections, Buttons, Header/Footer) wird im Bricks-UI gestylt.

   Geltungsbereich: nur Funnel-Seiten (enqueue in functions.php nur bei
   get_post_type() === 'funnel'), Selektoren zusätzlich auf .mh-funnel-form
   gescoped (Klasse der Formular-Section im Bricks-Baum).

   WICHTIG (Spezifität): fluent-forms-public.css lädt NACH dieser Datei und
   präfixt alles mit .fluentform / .ff-default (z. T. 5 Klassen tief). Die
   Selektoren hier übernehmen deshalb die FF-Originalselektoren 1:1 und
   stellen .mh-funnel-form davor — sonst gewinnt das Plugin-CSS.

   Basis-Formularfelder (Labels gold, Inputs weiß, Submit-Button) kommen
   bereits aus mh-blocks.css (.mh-formular…) — hier NUR, was der mehrstufige
   Funnel zusätzlich braucht: Auswahlkarten, Bildkarten, Step-Navigation,
   Progressbar, Eingabe-Feinschliff.

   Abschnitt „V2 Abendlicht" am Ende: Overrides unter body.mh-v2 — greifen
   nur, wo die Funnel-Posts das Meta _mh_v2 tragen (Staging-Kopie /v2/).
   ========================================================================== */

/* --- Formularspalte: schmale Lesebreite statt Content-Breite --------------
   Mike, 24.08.2026: „Die Form-Pages dürfen auch schmaler sein." Die 1120px
   aus mh-blocks.css (.mh-formular__inhalt) sind für einen Funnel unhandlich. */

.mh-funnel-form .mh-formular__inhalt {
  max-width: 760px;                /* Rohwert: Lesebreite für Formulare */
}

/* --- Auswahlkarten: Checkbox-/Radio-Listen (Steps 1–3) --------------------
   FF-Markup: .ff-el-form-check > label.ff-el-form-check-label > input + span
   Das Label wird zur Karte, der Input zum eigenen gezeichneten Indikator.
   Die GDPR-Zeile (input.ff_gdpr_field) wird weiter unten wieder entkartet. */

.mh-funnel-form .fluentform .ff-el-form-check {
  margin: 0 0 12px;                /* Rohwert: Kartenabstand */
}

.mh-funnel-form .fluentform .ff-el-form-check .ff-el-form-check-label {
  display: flex;
  align-items: center;
  gap: 14px;                       /* Rohwert: Indikator ↔ Text */
  width: 100%;
  margin: 0;
  padding: 16px 20px;              /* Rohwert: Karteninnenraum */
  background: var(--white);
  border: 1.5px solid var(--primary-semi-light); /* Rohwert 1.5px: wie Buttons */
  border-radius: 2px;              /* Rohwert: Marken-Radius */
  color: var(--primary-ultra-dark);
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  transition: border-color 300ms ease-in-out, background-color 300ms ease-in-out;
}

.mh-funnel-form .fluentform .ff-el-form-check .ff-el-form-check-label:hover {
  border-color: var(--primary);
}

/* Gewählte Karte: Gold-Rahmen + hauchzarte Gold-Tönung (keine Schatten) */
.mh-funnel-form .fluentform .ff-el-form-check .ff-el-form-check-label:has(input:checked) {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, var(--white));
}

/* Indikator: gezeichnete Checkbox/Radio statt Browser-Default */
.mh-funnel-form .fluentform .ff-el-form-check input.ff-el-form-check-input {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  flex: 0 0 22px;
  width: 22px;                     /* Rohwert: Indikatorgröße */
  height: 22px;
  min-width: 22px;                 /* min/max: erzwingt das Quadrat gegen FF-Maße */
  max-width: 22px;
  min-height: 22px;
  max-height: 22px;
  aspect-ratio: 1 / 1;
  margin: 0;
  padding: 0;                      /* Theme-Basis füllt inputs mit 0 12px — macht den Kreis oval */
  background: var(--white);
  border: 1.5px solid var(--primary-semi-light);
  border-radius: 2px;
  cursor: pointer;
  transition: border-color 300ms ease-in-out, background-color 300ms ease-in-out;
}

.mh-funnel-form .fluentform .ff-el-form-check input.ff-el-form-check-radio {
  border-radius: 50%;
}

.mh-funnel-form .fluentform .ff-el-form-check input.ff-el-form-check-input:checked {
  background-color: var(--primary);
  border-color: var(--primary);
}

/* Häkchen (Checkbox) als eingebettetes SVG, Punkt (Radio) als Gradient.
   ff_gdpr_field explizit mit: die GDPR-Checkbox trägt die -checkbox-Klasse NICHT. */
.mh-funnel-form .fluentform .ff-el-form-check input.ff_gdpr_field:checked,
.mh-funnel-form .fluentform .ff-el-form-check input.ff-el-form-check-checkbox:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3.2 8.6l3.1 3.1 6.5-7'/%3E%3C/svg%3E");
  background-size: 14px 14px;
  background-position: center;
  background-repeat: no-repeat;
}

.mh-funnel-form .fluentform .ff-el-form-check input.ff-el-form-check-radio:checked {
  background: radial-gradient(circle, var(--white) 0 4px, var(--primary) 5px);
  border-color: var(--primary);
}

/* Tastatur-Fokus sichtbar halten */
.mh-funnel-form .fluentform .ff-el-form-check input.ff-el-form-check-input:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Kartentext füllt die Restbreite */
.mh-funnel-form .fluentform .ff-el-form-check .ff-el-form-check-label > span {
  flex: 1 1 auto;
}

/* --- Zwischentitel im Formular (custom_html, z. B. „Wie dürfen wir Sie
   erreichen?"): irgendein Fremd-CSS versaliert h3 — Mike-Regel: keine
   Versalien, nirgends. ------------------------------------------------------ */

.mh-funnel-form .fluentform h2,
.mh-funnel-form .fluentform h3,
.mh-funnel-form .fluentform h4 {
  text-transform: none;
  letter-spacing: normal;
}

/* --- Fragetitel + Hinweis („Mehrfachauswahl möglich") --------------------- */

.mh-funnel-form .fluentform .ff-el-input--label label {
  font-size: var(--mh-h-3);
  font-weight: var(--mh-weight-heading);
  color: var(--primary-ultra-dark);
  line-height: 1.3;
}

.mh-funnel-form .fluentform .ff-el-input--label {
  margin-bottom: 16px;             /* Rohwert: Luft unter der Frage */
}

/* Pflicht-Sternchen dezent gold statt signalrot */
.mh-funnel-form .fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label:after {
  color: var(--primary);
}

/* --- GDPR-/Zustimmungszeile: keine Karte, nur saubere Zeile --------------- */

.mh-funnel-form .fluentform .ff-el-form-check .ff-el-form-check-label:has(input.ff_gdpr_field) {
  padding: 0;
  border: none;
  background: transparent;
  align-items: flex-start;
  font-weight: 400;
  font-size: 0.95rem;              /* Rohwert: Rechtstext kleiner */
}

.mh-funnel-form .fluentform .ff-el-form-check .ff-el-form-check-label:has(input.ff_gdpr_field):hover {
  border: none;
  background: transparent;
}

.mh-funnel-form .fluentform .ff-el-form-check input.ff_gdpr_field {
  margin-top: 2px;                 /* Rohwert: optische Ausrichtung erste Zeile */
}

/* --- Bildkarten-Radios (falls ein Step Foto-Optionen nutzt) --------------- */

.mh-funnel-form .fluentform .ff_el_checkable_photo_holders {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-m);
  margin: 0;
  overflow: visible;               /* FF-Default: overflow hidden + float-Layout */
}

/* FF-Originalselektor (5 Klassen) + Scope — deckt Border- UND Float-Regel ab */
.mh-funnel-form .fluentform .ff-el-group.ff_list_buttons .ff-el-form-check.ff-el-image-holder {
  float: none;                     /* FF-Default: float left + feste 200px */
  width: 100%;
  margin: 0;
  background: var(--white);
  border: 1.5px solid var(--primary-semi-light); /* Rohwert 1.5px: Marken-Border wie Buttons */
  border-radius: 2px;              /* Rohwert: Marken-Radius wie Buttons */
  overflow: hidden;
  transition: border-color 300ms ease-in-out;
}

.mh-funnel-form .fluentform .ff-el-image-input-src {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;             /* FF-Default: starre 200×200px */
}

.mh-funnel-form .fluentform .ff-el-image-holder .ff-el-form-check-label {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 12px 16px;              /* Rohwert: Karten-Fußzeile */
  border: none;                    /* Karte ist hier der Holder, nicht das Label */
  background: transparent;
}

.mh-funnel-form .fluentform .ff-el-group.ff_list_buttons .ff-el-form-check.ff-el-image-holder span {
  width: auto;
  margin: 0;
  color: var(--primary-ultra-dark);
  font-weight: 500;
}

/* Ausgewählt = Gold-Border (Schatten sind projektweit aus) */
.mh-funnel-form .fluentform .ff-el-group.ff_list_buttons .ff-el-form-check.ff-el-image-holder.ff_item_selected {
  border-color: var(--primary);
}

/* --- Step-Navigation: Weiter = gefüllt, Zurück = leise -------------------- */
/* FF: .ff-default .ff-btn-secondary:not(.ff_btn_no_style) — grau gefüllt */

.mh-funnel-form .ff-default .ff-btn-secondary:not(.ff_btn_no_style) {
  border-radius: 2px;
  padding: 14px 24px;              /* Rohwert: live --bde-button-padding-base */
  font-size: var(--text-l);
  font-weight: 500;
  transition: all 300ms ease-in-out;
}

/* Weiter → gefüllt gold, klare Haupt-Aktion */
.mh-funnel-form .ff-default .ff-btn-next.ff-btn-secondary:not(.ff_btn_no_style) {
  background: var(--primary);
  color: var(--white);
  border: 1.5px solid var(--primary);
}

.mh-funnel-form .ff-default .ff-btn-next.ff-btn-secondary:not(.ff_btn_no_style):hover,
.mh-funnel-form .ff-default .ff-btn-next.ff-btn-secondary:not(.ff_btn_no_style):focus {
  background: var(--primary-ultra-dark);
  border-color: var(--primary-ultra-dark);
  color: var(--white);
}

/* ← Zurück: subtil (Mike, 24.08.2026: „deutlich subtiler, nicht so groß").
   Gilt für die FF-Step-Buttons UND den manuellen Zurück-Link auf Schritt 1
   (FF-custom_html: .ff-custom_html p > a) — beide sehen identisch aus. */
.mh-funnel-form .ff-default .ff-btn-prev.ff-btn-secondary:not(.ff_btn_no_style),
.mh-funnel-form .fluentform .ff-custom_html p > a {
  background: transparent;
  border: none;
  padding: 6px 2px;                /* Rohwert: kompakt, kein Button-Körper */
  font-size: 0.95rem;              /* Rohwert: klein, unter Fließtext */
  font-weight: 500;
  color: color-mix(in srgb, var(--primary-ultra-dark) 60%, var(--white));
  text-decoration: none;
  transition: color 300ms ease-in-out;
}

.mh-funnel-form .ff-default .ff-btn-prev.ff-btn-secondary:not(.ff_btn_no_style):hover,
.mh-funnel-form .ff-default .ff-btn-prev.ff-btn-secondary:not(.ff_btn_no_style):focus,
.mh-funnel-form .fluentform .ff-custom_html p > a:hover,
.mh-funnel-form .fluentform .ff-custom_html p > a:focus {
  background: transparent;
  color: var(--primary-ultra-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Submit-Button: gefüllt wie „Weiter" ---------------------------------- */
/* FF gibt pro Formular einen Inline-Style aus: form.fluent_form_N .ff-btn-submit
   :not(.ff_btn_no_style) {background: var(--fluentform-primary)} — der schlägt
   die .mh-formular-Regel aus mh-blocks.css. Hier mit höherer Spezifität zurück
   auf die Marken-Optik. */

.mh-funnel-form .fluentform form .ff-btn-submit:not(.ff_btn_no_style) {
  background: var(--primary);
  color: var(--white);
  border: 1.5px solid var(--primary); /* Rohwert: 1.5px wie Buttons */
  border-radius: 2px;
  padding: 14px 24px;
  font-size: var(--text-l);
  font-weight: 500;
  transition: all 300ms ease-in-out;
}

.mh-funnel-form .fluentform form .ff-btn-submit:not(.ff_btn_no_style):hover,
.mh-funnel-form .fluentform form .ff-btn-submit:not(.ff_btn_no_style):focus {
  background: var(--primary-ultra-dark);
  border-color: var(--primary-ultra-dark);
  color: var(--white);
}

/* --- Progressbar: schlank, runde Enden, feiner Status --------------------- */

.mh-funnel-form .fluentform .ff-el-progress {
  height: 10px;                    /* Rohwert: schlanker Balken (FF: 20px) */
  background: color-mix(in srgb, var(--primary) 18%, var(--white)); /* heller Track — dunkler Track las sich invertiert (Prüf-Fund) */
  border-radius: 25px;             /* Rohwert: live Slider-Progressbar */
  overflow: hidden;
}

.mh-funnel-form .fluentform .ff-el-progress-bar {
  height: 100%;
  background: var(--primary);
  border-radius: 25px;
  transition: width 400ms ease-in-out;
}

/* Prozentzahl im Balken hat bei 10px keinen Platz — Status-Zeile reicht */
.mh-funnel-form .fluentform .ff-el-progress-bar span {
  display: none;
}

.mh-funnel-form .fluentform .ff-el-progress-status {
  margin-bottom: 8px;              /* Rohwert: Luft überm Balken */
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--primary-ultra-dark);
}

.mh-funnel-form .fluentform .ff-step-header {
  margin-bottom: 32px;             /* Rohwert: Luft zwischen Kopf und Frage */
}

/* --- Eingabefelder (Step Kontakt): ruhig, Gold-Fokus ---------------------- */

.mh-funnel-form .fluentform .ff-el-form-control {
  padding: 13px 16px;              /* Rohwert: Feldinnenraum */
  background: var(--white);
  border: 1.5px solid var(--primary-semi-light);
  border-radius: 2px;
  font-size: 1.05rem;              /* Rohwert: Lesegröße im Feld */
  color: var(--primary-ultra-dark);
  transition: border-color 300ms ease-in-out;
}

.mh-funnel-form .fluentform .ff-el-form-control:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: none;                /* FF-Default: blauer Glow */
}

.mh-funnel-form .fluentform .ff-el-form-control::placeholder {
  color: color-mix(in srgb, var(--primary-ultra-dark) 45%, var(--white));
}

.mh-funnel-form .fluentform textarea.ff-el-form-control {
  min-height: 140px;               /* Rohwert: Nachricht-Feld */
  resize: vertical;
}

.mh-funnel-form .fluentform .ff-el-group {
  margin-bottom: 24px;             /* Rohwert: Abstand zwischen Feldgruppen */
}

/* --- Fehlerzustand: warmes Rotbraun statt Signalrot ----------------------- */

.mh-funnel-form .fluentform .ff-el-is-error .ff-el-form-control,
.mh-funnel-form .fluentform .ff-el-is-error .ff-el-form-check .ff-el-form-check-label {
  border-color: #A4442E;           /* Rohwert: Fehlerton passend zur Palette */
}

.mh-funnel-form .fluentform .error,
.mh-funnel-form .fluentform .ff-errors-in-stack {
  color: #A4442E;
  font-size: 0.9rem;
}

/* --- Mobil ---------------------------------------------------------------- */

@media (max-width: 600px) {
  .mh-funnel-form .fluentform .ff_el_checkable_photo_holders { grid-template-columns: 1fr; }

  /* Submit-Zeile: FF-Spalten behalten sonst ihre Desktop-Breite und der
     Submit ragt aus dem Viewport (Prüf-Fund, V2 mobil abgeschnitten) */
  .mh-funnel-form .fluentform .ff-t-container {
    flex-wrap: wrap;
  }

  .mh-funnel-form .fluentform .ff-t-cell {
    width: 100%;
    min-width: 0;
    flex: 1 1 100%;
  }

  .mh-funnel-form .fluentform .ff-el-form-check .ff-el-form-check-label {
    padding: 14px 16px;
  }

  /* Step-Nav: Buttons stapeln, Haupt-Aktion volle Breite */
  .mh-funnel-form .ff-default .step-nav .ff-btn-next.ff-btn-secondary:not(.ff_btn_no_style),
  .mh-funnel-form .fluentform form .ff-btn-submit:not(.ff_btn_no_style) {
    float: none !important;        /* FF setzt float inline am Button */
    width: 100%;
  }

  .mh-funnel-form .ff-default .step-nav .ff-btn-prev.ff-btn-secondary:not(.ff_btn_no_style) {
    float: none !important;
    width: 100%;
    margin-bottom: 10px;           /* Rohwert: Abstand Zurück ↔ Weiter */
  }
}

/* ==========================================================================
   V2 „Abendlicht" — Overrides unter body.mh-v2 (Staging-Kopie /v2/).
   Tokens --v2-* kommen aus mh-v2.css (lädt nur, wenn der Funnel-Post das
   Meta _mh_v2 trägt). Fraunces für Fragetitel, Sand-Karten, Abendblau-CTA.
   ========================================================================== */

/* Schrift bleibt wie in Variante 1 (Mike, 24.08.2026: „keine andere Schrift") —
   im Funnel KEIN Fraunces, nur die Abendlicht-Farbwelt. */
body.mh-v2 .mh-funnel-form .fluentform .ff-el-input--label label {
  color: var(--v2-ink);
}

body.mh-v2 .mh-funnel-form .fluentform .ff-el-form-check .ff-el-form-check-label {
  background: var(--v2-sand);
  border-color: var(--v2-sand-tief);
  color: var(--v2-ink);
}

body.mh-v2 .mh-funnel-form .fluentform .ff-el-form-check .ff-el-form-check-label:hover {
  border-color: var(--v2-gold);
}

body.mh-v2 .mh-funnel-form .fluentform .ff-el-form-check .ff-el-form-check-label:has(input:checked) {
  border-color: var(--v2-gold);
  background: color-mix(in srgb, var(--v2-gold) 9%, var(--v2-sand));
}

body.mh-v2 .mh-funnel-form .fluentform .ff-el-form-check input.ff-el-form-check-input {
  background-color: var(--v2-paper); /* kein Shorthand: erhielte sonst das Häkchen-SVG der Basisregel */
  border-color: var(--v2-sand-tief);
}

body.mh-v2 .mh-funnel-form .fluentform .ff-el-form-check input.ff-el-form-check-input:checked {
  background-color: var(--v2-gold);
  border-color: var(--v2-gold);
}

body.mh-v2 .mh-funnel-form .fluentform .ff-el-form-check input.ff-el-form-check-radio:checked {
  background: radial-gradient(circle, var(--v2-paper) 0 4px, var(--v2-gold) 5px);
}

/* GDPR-Zeile zurück auf transparent (erbt sonst die Sand-Karte) */
body.mh-v2 .mh-funnel-form .fluentform .ff-el-form-check .ff-el-form-check-label:has(input.ff_gdpr_field) {
  background: transparent;
  border: none;
  color: var(--v2-ink-soft);
}

/* Haupt-Aktionen in Abendblau — die V2-Signatur */
body.mh-v2 .mh-funnel-form .ff-default .ff-btn-next.ff-btn-secondary:not(.ff_btn_no_style),
body.mh-v2 .mh-funnel-form .fluentform form .ff-btn-submit:not(.ff_btn_no_style) {
  background: var(--v2-dusk);
  border-color: var(--v2-dusk);
  color: var(--v2-cream);
}

body.mh-v2 .mh-funnel-form .ff-default .ff-btn-next.ff-btn-secondary:not(.ff_btn_no_style):hover,
body.mh-v2 .mh-funnel-form .ff-default .ff-btn-next.ff-btn-secondary:not(.ff_btn_no_style):focus,
body.mh-v2 .mh-funnel-form .fluentform form .ff-btn-submit:not(.ff_btn_no_style):hover,
body.mh-v2 .mh-funnel-form .fluentform form .ff-btn-submit:not(.ff_btn_no_style):focus {
  background: var(--v2-dusk-tief);
  border-color: var(--v2-dusk-tief);
  color: var(--v2-cream);
}

body.mh-v2 .mh-funnel-form .ff-default .ff-btn-prev.ff-btn-secondary:not(.ff_btn_no_style),
body.mh-v2 .mh-funnel-form .fluentform .ff-custom_html p > a {
  color: var(--v2-ink-soft);
}

body.mh-v2 .mh-funnel-form .ff-default .ff-btn-prev.ff-btn-secondary:not(.ff_btn_no_style):hover,
body.mh-v2 .mh-funnel-form .ff-default .ff-btn-prev.ff-btn-secondary:not(.ff_btn_no_style):focus,
body.mh-v2 .mh-funnel-form .fluentform .ff-custom_html p > a:hover,
body.mh-v2 .mh-funnel-form .fluentform .ff-custom_html p > a:focus {
  color: var(--v2-ink);
}

/* Progress: heller Sand-Track, Gold-Füllung — kein dunkler Balken im Abendlicht */
body.mh-v2 .mh-funnel-form .fluentform .ff-el-progress {
  background: var(--v2-sand-tief);
}

body.mh-v2 .mh-funnel-form .fluentform .ff-el-progress-bar {
  background: var(--v2-gold);
}

body.mh-v2 .mh-funnel-form .fluentform .ff-el-progress-status {
  color: var(--v2-ink-soft);
}

/* Eingabefelder auf Paper */
body.mh-v2 .mh-funnel-form .fluentform .ff-el-form-control {
  background: var(--v2-paper);
  border-color: var(--v2-sand-tief);
  color: var(--v2-ink);
}

body.mh-v2 .mh-funnel-form .fluentform .ff-el-form-control:focus {
  border-color: var(--v2-gold);
}

body.mh-v2 .mh-funnel-form .fluentform .ff-el-form-control::placeholder {
  color: var(--v2-ink-soft);
}