/* FA-Funnel — 1:1 aus Vorlage v03-mosaic extrahiert (Modal-CSS). NICHT manuell editieren; via _build/extract.py regenerieren. */
    #fa-overlay {
      position: fixed; inset: 0; z-index: 9999;
      background: rgba(29,39,45,.85);
      backdrop-filter: blur(8px);
      display: flex; align-items: center; justify-content: center;
      padding: 1rem;
      opacity: 0; pointer-events: none;
      transition: opacity .3s ease;
    }
    #fa-overlay.open { opacity: 1; pointer-events: all; }

    /* ── MODAL BOX ── */
    #fa-box {
      background: #fff;
      border-radius: 1.375rem;
      width: 100%; max-width: 960px;
      max-height: 93vh;
      overflow-y: auto;
      position: relative;
      transform: translateY(32px) scale(.96);
      transition: transform .38s cubic-bezier(.34,1.3,.64,1);
      box-shadow: 0 40px 100px rgba(29,39,45,.32), 0 2px 12px rgba(29,39,45,.12);
      display: flex; flex-direction: column;
    }
    #fa-overlay.open #fa-box { transform: translateY(0) scale(1); }
    #fa-box::-webkit-scrollbar { width: 4px; }
    #fa-box::-webkit-scrollbar-thumb { background: #d4dde0; border-radius: 99px; }

    /* ── STICKY HEADER ── */
    .fa-modal-header {
      position: sticky; top: 0; z-index: 20;
      background: #fff;
      border-radius: 1.375rem 1.375rem 0 0;
      padding: 1rem 1.25rem .875rem;
      border-bottom: 1px solid #eef1f2;
    }
    .fa-header-top {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: .75rem;
    }
    .fa-logo-row { display: flex; align-items: center; gap: .6rem; }
    .fa-logo-badge {
      background: #eaf6f9; border-radius: .5rem;
      width: 2rem; height: 2rem;
      display: flex; align-items: center; justify-content: center;
    }
    .fa-modal-title { font-size: .8125rem; font-weight: 700; color: #1d272d; }
    .fa-close-btn {
      width: 2.125rem; height: 2.125rem; border-radius: 9999px;
      background: #f3f5f6; border: none; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      color: #7c8a93; transition: background .15s, color .15s;
    }
    .fa-close-btn:hover { background: #e2e8ea; color: #1d272d; }

    .fa-progress-track { background: #eef1f2; border-radius: 99px; height: 4px; overflow: hidden; }
    .fa-progress-fill {
      height: 100%; background: linear-gradient(90deg,#1D8DA3,#5fb6c8);
      border-radius: 99px; transition: width .45s ease;
    }
    .fa-progress-label { font-size: .7rem; color: #a0b0b8; margin-top: .35rem; text-align: right; font-weight: 500; }

    /* ── SCREENS ── */
    .fa-screen { display: none; }
    .fa-screen.active { display: flex; flex-direction: column; }
    @keyframes faSlideIn {
      from { opacity: 0; transform: translateX(20px); }
      to   { opacity: 1; transform: translateX(0); }
    }
    .fa-screen.active { animation: faSlideIn .26s ease forwards; }

    /* ── SCREEN BODY ── */
    .fa-body { padding: 1.625rem 1.5rem; flex: 1; }
    @media (max-width: 480px) { .fa-body { padding: 1.25rem 1.125rem; } }

    /* ── EYEBROW ── */
    .fa-eyebrow {
      font-size: .7rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: .1em; color: #1D8DA3;
      display: inline-flex; align-items: center; gap: .45rem;
      margin-bottom: .625rem;
    }
    .fa-eyebrow::before {
      content: ''; width: 4px; height: 4px; border-radius: 9999px;
      background: #1D8DA3; flex-shrink: 0;
    }

    /* ── HEADLINES ── */
    .fa-h1 { font-size: clamp(1.375rem,3.5vw,1.625rem); font-weight: 800; color: #1d272d; line-height: 1.25; margin-bottom: .5rem; }
    .fa-sub { font-size: 1rem; color: #7c8a93; line-height: 1.65; margin-bottom: 1.5rem; }

    /* ── IMAGE CHOICE CARDS ── */
    .fa-card-grid { display: grid; gap: .75rem; margin-bottom: 1.25rem; }
    .fa-card {
      border: 2px solid #e2e8ea; border-radius: 1rem; overflow: hidden;
      cursor: pointer; transition: border-color .18s, box-shadow .18s, transform .18s;
      background: #fff;
    }
    .fa-card:hover { border-color: #1D8DA3; transform: translateY(-2px); }
    .fa-card:focus-visible { outline: 3px solid #1D8DA3; outline-offset: 2px; }
    .fa-card.selected {
      border-color: #1D8DA3;
      box-shadow: 0 0 0 3px rgba(29,141,163,.18), 0 6px 20px rgba(29,141,163,.12);
    }
    .fa-card-img {
      width: 100%; aspect-ratio: 4/3; object-fit: cover;
      background: #eef1f2;
      display: flex; align-items: center; justify-content: center;
      font-size: 2.5rem;
    }
    .fa-card-label { padding: .625rem .75rem .75rem; font-size: 1rem; font-weight: 700; color: #1d272d; }
    .fa-card-desc  { font-size: .875rem; color: #7c8a93; margin-top: .15rem; line-height: 1.5; }
    .fa-card.selected .fa-card-label { color: #1D8DA3; }

    /* ── GUT ZU WISSEN ── */
    .fa-info-box {
      background: #f0f9fb; border-left: 3px solid #1D8DA3;
      border-radius: 0 .75rem .75rem 0;
      padding: 1rem 1.125rem; margin-bottom: 1.5rem;
      display: flex; gap: .75rem;
    }
    .fa-info-icon { flex-shrink: 0; width: 1.25rem; height: 1.25rem; color: #1D8DA3; margin-top: .15rem; }
    .fa-info-text { font-size: .9375rem; color: #4A616C; line-height: 1.65; }
    .fa-info-text strong { color: #1d272d; }

    /* ── PILLS ── */
    .fa-pills { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
    .fa-pill {
      border: 1.5px solid #d4dde0; border-radius: 9999px;
      padding: .625rem 1.125rem; font-size: .9375rem; font-weight: 500;
      min-height: 44px; display: inline-flex; align-items: center;
      cursor: pointer; transition: all .15s; color: #4A616C; background: #fff;
    }
    .fa-pill:hover { border-color: #1D8DA3; color: #1D8DA3; }
    .fa-pill:focus-visible { outline: 3px solid #1D8DA3; outline-offset: 2px; }
    .fa-pill.selected { background: #1D8DA3; border-color: #1D8DA3; color: #fff; }

    /* ── RADIO ROWS ── */
    .fa-radio-list { display: flex; flex-direction: column; gap: .625rem; margin-bottom: 1.25rem; }
    .fa-radio-row {
      display: flex; align-items: center; gap: .875rem;
      border: 1.5px solid #e2e8ea; border-radius: .875rem;
      padding: 1rem 1.125rem; min-height: 60px; cursor: pointer;
      transition: border-color .15s, background .15s;
    }
    .fa-radio-row:hover { border-color: #1D8DA3; background: #f8fcfd; }
    .fa-radio-row.selected { border-color: #1D8DA3; background: #eaf6f9; }
    .fa-radio-row:focus-visible { outline: 3px solid #1D8DA3; outline-offset: 2px; }
    .fa-radio-dot {
      width: 1.375rem; height: 1.375rem; border-radius: 9999px;
      border: 2px solid #d4dde0; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      transition: border-color .15s;
    }
    .fa-radio-row.selected .fa-radio-dot { border-color: #1D8DA3; }
    .fa-radio-dot::after { content: ''; width: .55rem; height: .55rem; border-radius: 9999px; background: #1D8DA3; display: none; }
    .fa-radio-row.selected .fa-radio-dot::after { display: block; }
    .fa-radio-text { font-size: 1rem; color: #2c3a42; line-height: 1.4; }
    .fa-radio-desc { font-size: .875rem; color: #7c8a93; margin-top: .2rem; }

    /* ── INPUTS ── */
    .fa-label { display: block; font-size: .9375rem; font-weight: 600; color: #4A616C; margin-bottom: .5rem; }
    .fa-optional { font-weight: 400; color: #7c8a93; font-size: .8125rem; margin-left: .3rem; }
    .fa-input-field {
      width: 100%; border: 1.5px solid #d4dde0; border-radius: .75rem;
      padding: .875rem 1rem; min-height: 52px;
      font-family: 'Sora', sans-serif; font-size: 1rem; color: #1d272d;
      outline: none; transition: border-color .15s, box-shadow .15s; background: #fff;
    }
    .fa-input-field:focus { border-color: #1D8DA3; box-shadow: 0 0 0 3px rgba(29,141,163,.18); }
    .fa-input-field::placeholder { color: #a0b0b8; }
    textarea.fa-input-field { resize: vertical; min-height: 96px; }
    .fa-field-group { margin-bottom: 1.125rem; }
    .fa-input-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
    @media (max-width: 440px) { .fa-input-row { grid-template-columns: 1fr; } }

    /* ── SECTION DIVIDER ── */
    .fa-divider { font-size: .9375rem; font-weight: 700; color: #4A616C; margin: 1.375rem 0 1rem; padding-bottom: .5rem; border-bottom: 1.5px solid #eef1f2; }

    /* ── TRUST CHECKLIST ── */
    .fa-trust-list { list-style: none; padding: 0; margin: 0 0 1.25rem; display: flex; flex-direction: column; gap: .625rem; }
    .fa-trust-item { display: flex; align-items: flex-start; gap: .625rem; font-size: .9375rem; color: #4A616C; line-height: 1.5; }
    .fa-trust-check { width: 1.25rem; height: 1.25rem; border-radius: 9999px; background: #eaf6f9; flex-shrink: 0; margin-top: .1rem; display: flex; align-items: center; justify-content: center; }

    /* ── UPLOAD AREA ── */
    .fa-upload-area {
      border: 2px dashed #d4dde0; border-radius: .875rem;
      padding: 1.75rem 1.25rem; text-align: center; cursor: pointer;
      transition: border-color .15s, background .15s; background: #fafbfc;
    }
    .fa-upload-area:hover { border-color: #1D8DA3; background: #f0f9fb; }
    .fa-upload-area:focus-visible { outline: 3px solid #1D8DA3; outline-offset: 2px; }
    .fa-upload-area.dragover { border-color: #1D8DA3; background: #e6f4f8; border-style: solid; }
    .fa-upload-icon { font-size: 2.25rem; margin-bottom: .625rem; }
    .fa-upload-text { font-size: .9375rem; color: #7c8a93; line-height: 1.6; }

    /* ── DATEI-LISTE (Upload) ── */
    .fa-file-list { display: flex; flex-direction: column; gap: .5rem; margin-top: .75rem; }
    .fa-file-list:empty { display: none; }
    .fa-file-item {
      display: flex; align-items: center; gap: .75rem;
      background: #f3f5f6; border: 1px solid #e1e6e8; border-radius: .625rem;
      padding: .5rem .625rem;
    }
    .fa-file-thumb { width: 2.75rem; height: 2.75rem; object-fit: cover; border-radius: .375rem; flex-shrink: 0; background: #d4dde0; }
    .fa-file-meta { flex: 1; min-width: 0; }
    .fa-file-name { font-size: .875rem; color: #1d272d; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .fa-file-size { font-size: .75rem; color: #7c8a93; margin-top: .1rem; }
    .fa-file-remove {
      background: transparent; border: 0; cursor: pointer; padding: .375rem;
      border-radius: .375rem; color: #7c8a93; display: flex; align-items: center; justify-content: center;
      transition: background .15s, color .15s; flex-shrink: 0;
    }
    .fa-file-remove:hover { background: #fde2e2; color: #c53030; }
    .fa-file-remove:focus-visible { outline: 2px solid #1D8DA3; outline-offset: 2px; }

    /* ── STICKY FOOTER ── */
    .fa-modal-footer {
      position: sticky; bottom: 0; background: #fff;
      border-top: 1px solid #eef1f2; padding: 1rem 1.5rem;
      border-radius: 0 0 1.375rem 1.375rem;
      display: flex; gap: .75rem; align-items: center;
    }
    .fa-btn-back {
      display: flex; align-items: center; gap: .35rem;
      background: #f3f5f6; border: 1.5px solid #e2e8ea; border-radius: .75rem;
      padding: .75rem 1.25rem; min-height: 52px;
      font-family: 'Sora', sans-serif; font-size: 1rem; font-weight: 600;
      color: #4A616C; cursor: pointer; transition: background .15s, color .15s;
      white-space: nowrap; flex-shrink: 0;
    }
    .fa-btn-back:hover { background: #e6ebed; }
    .fa-btn-back:focus-visible { outline: 3px solid #1D8DA3; outline-offset: 2px; }
    .fa-btn-next {
      flex: 1; background: #1D8DA3; border: none; border-radius: .75rem;
      padding: .875rem 1.25rem; min-height: 52px;
      font-family: 'Sora', sans-serif; font-size: 1rem; font-weight: 700;
      color: #fff; cursor: pointer; transition: background .18s;
      display: flex; align-items: center; justify-content: center; gap: .5rem;
    }
    .fa-btn-next:hover { background: #156d7e; }
    .fa-btn-next:focus-visible { outline: 3px solid #1D8DA3; outline-offset: 3px; }
    .fa-btn-next.submit-btn { background: #1d272d; }
    .fa-btn-next.submit-btn:hover { background: #111c22; }

    /* ── CONTACT ALTS ── */
    .fa-contact-alts { display: flex; flex-direction: column; gap: .625rem; margin-top: 1rem; }
    .fa-contact-link {
      display: flex; align-items: center; gap: .875rem;
      background: #f3f5f6; border-radius: .875rem;
      padding: .875rem 1.125rem; min-height: 56px;
      text-decoration: none; transition: background .15s;
    }
    .fa-contact-link:hover { background: #e6ebed; }
    .fa-contact-link:focus-visible { outline: 3px solid #1D8DA3; outline-offset: 2px; }
    .fa-contact-link-label { font-size: .8125rem; color: #7c8a93; }
    .fa-contact-link-value { font-size: 1rem; font-weight: 600; color: #1d272d; }

    /* ── SUCCESS ── */
    .fa-success-check {
      width: 5.5rem; height: 5.5rem; border-radius: 9999px;
      background: linear-gradient(135deg,#eaf6f9,#d6eff4);
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 1.5rem;
      box-shadow: 0 8px 28px rgba(29,141,163,.2);
    }
    @keyframes checkPop {
      0%   { transform: scale(.6); opacity: 0; }
      70%  { transform: scale(1.15); }
      100% { transform: scale(1); opacity: 1; }
    }
    #screen-success.active .fa-success-check { animation: checkPop .5s cubic-bezier(.34,1.3,.64,1) .1s both; }

    .fa-portrait-wrap {
      border-radius: 1rem; overflow: hidden; background: #eef1f2;
      aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center;
      margin-bottom: 1.25rem; font-size: 4rem;
    }

    /* Back-Button auf Screen 0 & Success ausblenden */
    #screen-choose .fa-btn-back,
    #screen-success .fa-modal-footer { display: none; }

/* ════════════════════════════════════════════════════════════════
   FA-WP-INTEGRATION CSS — Korrekturen gegen Theme-Bleed.
   Die Vorlage läuft mit Tailwind-Preflight (resettet button-Padding/
   -Border/-Background auf 0/none/transparent). In WP fehlt dieser Reset,
   darum erben ungestylte Modal-Buttons das globale Theme-<button>-Styling.
   Hier nur die nachweislich abweichenden Stellen gegen die Vorlage messen+fixen.
   ════════════════════════════════════════════════════════════════ */

/* Close-Button: Theme-Padding (8px 16px) quetschte das 14px-X auf ~2px → unsichtbar.
   Vorlage misst padding:0. font-weight nur zur Sauberkeit (Button hat keinen Text). */
#fa-overlay .fa-close-btn { padding: 0; font-weight: 400; }

/* Auswahlkarten-Label: Theme/Kit erzwang text-transform:uppercase + letter-spacing:0.6px
   (Vorlage none/normal) sowie font-size 16→12px und Farbe #1d272d→#7c8a93 (grau).
   Auswahl-Türkis (.selected) per höherer Spezifität erhalten. */
#fa-overlay .fa-card-label { text-transform: none; letter-spacing: normal; font-size: 1rem; color: #1d272d; }
#fa-overlay .fa-card.selected .fa-card-label { color: #1D8DA3; }

/* ── Weitere Theme-Bleeds (per Voll-Fingerabdruck @375 gefunden, alle Screens) ── */

/* Zeilenhöhe: Vorlage-Basis 1.5 (Tailwind-html). WP setzt sie direkt auf Elemente
   (schlägt Vererbung) → gezielt auf die betroffenen Klassen mit höherer Spezifität.
   Kind-Spans (Pflicht-*, Optional-Hinweis) erben von .fa-label. */
#fa-overlay { line-height: 1.5; }
#fa-overlay .fa-card-label,
#fa-overlay .fa-label,
#fa-overlay .fa-optional { line-height: 1.5; }

/* Überschriften: WP-Theme ergänzt margin-top (Vorlage 0). Nur Top zurücksetzen,
   Bottom bleibt klassengesteuert (.fa-h1 etc.). */
#fa-overlay h1, #fa-overlay h2, #fa-overlay h3 { margin-top: 0; }

/* Absatz-Margins: Vorlage 0 (Preflight), WP-Theme fügt margin-bottom (~14.4px) hinzu.
   .fa-sub behält seine gewollte Margin (per :not ausgenommen). */
#fa-overlay p:where(:not(.fa-sub)) { margin: 0; }

/* Eingabefelder: Theme-`input[type=…]`-Regeln (höhere Spezifität als .fa-input-field)
   drückten Padding 14→8px und Radius 12→3px → Vorlage-Werte erzwingen. */
#fa-overlay .fa-input-field { padding: .875rem 1rem; border-radius: .75rem; }

/* Buttons: Theme drückte font-weight 700→600. */
#fa-overlay .fa-btn-next { font-weight: 700; }

/* ══ MOBIL-FIXES (2026-07-09, User-Auftrag „Funnel mobil kaputt") ══
   Zwei gemessene Defekte @375px:
   1. Inline-Styles im Markup erzwingen 3 Karten-Spalten (94px breit →
      Titel wie „Komplette Badsanierung" hart abgeschnitten). Inline
      schlägt jedes Stylesheet → !important in der Media-Query nötig.
   2. Submit-Button (2 Zeilen-Spans) erbt white-space:nowrap vom Theme
      und lief 114px über den rechten Modal-Rand hinaus.
   Zusätzlich wird das Modal vollflächig (Standard-Mobile-Pattern,
   mehr nutzbare Höhe statt schwebender Box mit 93vh). */
@media (max-width: 640px) {
  /* Vollbild-Modal */
  #fa-overlay { padding: 0; }
  #fa-box {
    width: 100%; max-width: 100%;
    height: 100%;
    max-height: 100vh; max-height: 100dvh;
    border-radius: 0;
  }
  .fa-modal-header, .fa-modal-footer { border-radius: 0; }

  /* Karten-Grids: nie 3-spaltig */
  #fa-overlay .fa-card-grid { grid-template-columns: 1fr 1fr !important; }

  /* Karten-Titel umbrechen statt abschneiden. „Fliesenberatung" (Sora 700)
     ist das längste Einzelwort und muss in die 2er-Spalte passen → 13px +
     reduziertes Seiten-Padding (live gemessen: 14px/12px-Padding brach um). */
  #fa-overlay .fa-card-label { font-size: .8125rem; padding-left: .5rem; padding-right: .5rem; hyphens: auto; overflow-wrap: break-word; }

  /* Weiter-/Submit-Button darf umbrechen (min-width:0 — lange Einzelwörter
     wie „Ausstellungsbesuch" setzen sonst die min-content-Breite über die
     verfügbare Flex-Breite; hyphens bricht sie sauber) */
  #fa-overlay .fa-btn-next { white-space: normal; text-align: center; min-width: 0; hyphens: auto; }

  /* SHK-Tooltip (inline nowrap) nicht breiter als der Viewport */
  #fa-overlay #shk-tip { white-space: normal !important; max-width: 78vw; }

  /* Absenden-Screens (User-Wunsch 2026-07-09): Submit-Button volle Breite,
     ÜBER dem Zurück-Button gestapelt (DOM: back vor next → column-reverse). */
  #fa-overlay .fa-modal-footer:has(.submit-btn) { flex-direction: column-reverse; gap: .625rem; }
  #fa-overlay .fa-modal-footer:has(.submit-btn) .fa-btn-next,
  #fa-overlay .fa-modal-footer:has(.submit-btn) .fa-btn-back { width: 100%; justify-content: center; }
}