/* ============================================================================
   MyInvest24 — Lateral-Reskin für Conversion-Funnels (beratung/ + fb/)
   NUR CSS: Der Funnel-DOM-Vertrag (.funnel-step, .funnel-option[data-key],
   #contactForm, my-cal-inline-*) bleibt byte-identisch — Tracking/Lead-Scoring
   hängen daran. Lädt NACH mi24-system.css. Fonts/Tokens via mi24-lateral.css.
   ========================================================================== */

/* ---- Token-Remap: Blau-Welt -> Monochrom --------------------------------- */
:root {
  --m24-blue: rgb(8, 8, 8);
  --m24-blue-light: rgb(99, 99, 99);
  --m24-blue-deep: rgb(3, 3, 3);
  --m24-text: rgb(99, 99, 99);
  --m24-muted: rgb(112, 108, 106);
  --m24-ink: rgb(8, 8, 8);
  --m24-navy: rgb(10, 9, 8);
  --m24-success: rgb(8, 8, 8);
}

body.mi24-page-funnel,
body[class*="funnel"] {
  font-family: 'TASA Orbiter', Inter, sans-serif !important;
  background: rgb(249, 249, 249) !important;
  color: rgb(99, 99, 99);
}

/* ---- Headlines & Subzeilen ------------------------------------------------ */
.funnel-headline, .funnel-step__title, .funnel-summary__title,
.funnel-success h1, .funnel-success h2, .funnel-disqualify h2,
h1, h2 {
  font-family: 'Sentient', Georgia, serif !important;
  font-weight: 300 !important;
  letter-spacing: -0.04em;
  color: rgb(8, 8, 8) !important;
  text-wrap: balance;
}
.funnel-subline, .funnel-step__subtitle {
  font-family: 'TASA Orbiter', Inter, sans-serif !important;
  color: rgb(99, 99, 99) !important;
}

/* Progress: Hairline-Track + Ink-Füllung + Mono-Text
   (.funnel-progress ist nur der Wrapper — nicht anfassen) */
.funnel-progress-bar, [class*="progress-bar"]:not(.funnel-progress) {
  background: rgb(229, 229, 227) !important;
  border-radius: 0 !important;
  height: 2px !important;
}
.funnel-progress-fill, [class*="progress-fill"], [class*="progress__fill"] {
  background: rgb(8, 8, 8) !important;
  border-radius: 0 !important;
}
.funnel-progress-fill::after { animation: none !important; background: none !important; }
.funnel-progress-text, [class*="step-counter"], [class*="progress-text"] {
  font-family: 'Geist Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase;
  color: rgb(112, 108, 106) !important;
  background: transparent !important;
}

/* ---- Options-Karten ------------------------------------------------------- */
.funnel-option {
  background: rgb(255, 255, 255) !important;
  border: 1px solid rgb(229, 229, 227) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s !important;
}
.funnel-option:hover {
  border-color: rgb(99, 99, 99) !important;
  transform: translateY(-2px);
  box-shadow: none !important;
}
.funnel-option.selected, .funnel-option[aria-checked="true"], .funnel-option.is-selected {
  border-color: rgb(8, 8, 8) !important;
  background: rgb(249, 249, 249) !important;
  box-shadow: none !important;
}
.funnel-option__title { color: rgb(8, 8, 8) !important; font-weight: 500 !important; }
.funnel-option__icon {
  background: rgb(249, 249, 249) !important;
  border: 1px solid rgb(229, 229, 227) !important;
  border-radius: 12px !important;
  color: rgb(8, 8, 8) !important;
}
.funnel-option__icon svg, .funnel-option__icon svg * {
  stroke: rgb(8, 8, 8) !important;
  fill: none !important;
}

/* ---- Buttons: genau eine Pill-Form ---------------------------------------- */
.funnel-submit, .funnel-cta, .funnel-disqualify__btn, .funnel-sticky-cta a,
button[type="submit"], .btn-primary {
  background: rgb(3, 3, 3) !important;
  background-image: none !important;
  color: rgb(255, 255, 255) !important;
  border: 0 !important;
  border-radius: 45px !important;
  font-family: 'TASA Orbiter', Inter, sans-serif !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  transition: transform 0.2s ease-out, background-color 0.2s ease-out !important;
}
.funnel-submit:hover, .funnel-cta:hover, button[type="submit"]:hover {
  background: rgb(26, 26, 26) !important;
  transform: scale(1.02);
}
.funnel-back {
  color: rgb(99, 99, 99) !important;
  background: transparent !important;
  border: 0 !important;
}
.funnel-back:hover { color: rgb(8, 8, 8) !important; }

/* ---- Formularfelder -------------------------------------------------------- */
.funnel-input, .funnel-field input, .funnel-field select, .phone-prefix {
  border: 1px solid rgb(229, 229, 227) !important;
  border-radius: 12px !important;
  background: rgb(255, 255, 255) !important;
  font-family: 'TASA Orbiter', Inter, sans-serif !important;
  color: rgb(8, 8, 8) !important;
  box-shadow: none !important;
}
.funnel-input:focus, .funnel-field input:focus { border-color: rgb(8, 8, 8) !important; outline: none !important; }
.funnel-label {
  font-family: 'Geist Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase;
  color: rgb(112, 108, 106) !important;
}

/* ---- Trust / Social Proof / Logos ----------------------------------------- */
.funnel-trust-item, .funnel-trust-item * { color: rgb(99, 99, 99) !important; }
.funnel-trust-item svg, .funnel-trust-item svg * {
  fill: rgb(99, 99, 99) !important;
  stroke: none;
}
.funnel-trust-item svg[fill="none"] *, .funnel-trust-item svg [stroke] {
  fill: none !important;
  stroke: rgb(99, 99, 99) !important;
}
/* Trust-Avatare komplett ausblenden — die Mono-Zeile trägt allein */
.funnel-social-proof__avatars { display: none !important; }
.funnel-social-proof {
  justify-content: center;
}
.funnel-social-proof span {
  font-family: 'Geist Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase;
  color: rgb(112, 108, 106) !important;
}
.funnel-social img, .funnel-advisors img { object-position: center top; }
.funnel-logos__set img, [class*="logos"] img {
  filter: grayscale(1);
  opacity: 0.55;
}

/* Summary-Karte + Stats */
.funnel-summary {
  background: rgb(255, 255, 255) !important;
  border: 1px solid rgb(229, 229, 227) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}
.funnel-summary__stat-value {
  font-family: 'Sentient', Georgia, serif !important;
  font-weight: 300 !important;
  color: rgb(8, 8, 8) !important;
  font-variant-numeric: tabular-nums;
}
.funnel-summary__stat-label {
  font-family: 'Geist Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase;
  color: rgb(112, 108, 106) !important;
}

/* Karten-Container des Funnels: ruhige Hairline statt Schatten
   (body-Präfix schlägt die spezifischeren Altregeln aus signature/system) */
body .funnel-card, body .funnel-container, body .funnel-box, body [class*="funnel-wrapper"] {
  background: rgb(255, 255, 255) !important;
  border: 1px solid rgb(229, 229, 227) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 64px -32px rgba(8, 8, 8, 0.18) !important;
}
/* Formular sitzt nahtlos IN der Karte — kein eigener Kasten/Schatten */
body .funnel-form {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
}

/* Disqualify/Success-Icons monochrom */
.funnel-disqualify__icon, .funnel-success__icon { filter: grayscale(1); }

/* Anruf-Alternative ausblenden — Conversion-Fokus liegt auf der Eintragung */
.funnel-call-alt { display: none !important; }

/* Implizite Datenschutz-Zustimmung: Checkbox unsichtbar (bleibt im DOM für
   Validierung/Payload), nur der Hinweistext erscheint */
.funnel-checkbox-wrap--implicit .funnel-checkbox,
.funnel-checkbox-wrap--implicit .funnel-checkbox-box,
.funnel-checkbox-wrap--implicit .funnel-checkbox-custom {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  margin: 0 !important; padding: 0 !important; border: 0 !important;
}
.funnel-checkbox-wrap--implicit {
  cursor: default !important;
  display: block !important;
  /* Label-Klick darf die versteckte Checkbox NICHT togglen */
  pointer-events: none !important;
}
.funnel-checkbox-wrap--implicit a { pointer-events: auto !important; }
.funnel-checkbox-wrap--implicit .funnel-checkbox-text,
.funnel-checkbox-wrap--implicit .funnel-checkbox-label {
  display: block;
  text-align: center;
  font-size: 12px !important;
  color: rgb(112, 108, 106) !important;
  line-height: 1.5;
}
.funnel-checkbox-wrap--implicit a { color: rgb(8, 8, 8) !important; text-decoration: underline; }

/* Footer-Zeile */
footer, .funnel-footer { color: rgb(112, 108, 106) !important; }
footer a { color: rgb(112, 108, 106) !important; }
footer a:hover { color: rgb(8, 8, 8) !important; }

::selection { background: rgb(8, 8, 8); color: rgb(249, 249, 249); }