/* =====================================================================
   Weisswerk Funnels: Basis-Styles der Runtime-Screens (Quiz/Form/Danke).
   Brands ueberschreiben die Variablen in ihrer index.html (:root { … }).
   Landing-Sektionen stylt jeder Funnel selbst.
   ===================================================================== */
:root {
  --fn-primary: #1f2937;      /* Hauptfarbe (Buttons-Rahmen, Titel) */
  --fn-accent: #0a8048;       /* CTA-Farbe */
  --fn-accent-text: #ffffff;
  /* Bestaetigung: der Haken auf der Danke-Seite. Bewusst NICHT --fn-accent,
     sonst steht dort bei warmen Marken ein roter Haken und der liest sich
     wie eine Fehlermeldung (Boris, 06.08.). */
  --fn-ok: #2E7A57;
  --fn-bg: #ffffff;
  --fn-bg-soft: #f5f5f7;
  --fn-text: #1a1a1a;
  --fn-text-soft: #55555f;
  --fn-muted: #9b9ba6;
  --fn-border: #e2e2ea;
  --fn-radius: 12px;
  --fn-font: system-ui, -apple-system, sans-serif;
  --fn-max: 560px;
}

#funnel-root {
  font-family: var(--fn-font);
  color: var(--fn-text);
  background: var(--fn-bg);
  min-height: 70vh;
  max-width: var(--fn-max);
  margin: 0 auto;
}

.fn-pad { padding: 8px 20px 40px; }

/* Fortschritt */
.fn-prog-wrap { padding: 14px 20px 4px; }
.fn-prog { height: 6px; background: var(--fn-bg-soft); border-radius: 99px; overflow: hidden; }
.fn-prog i { display: block; height: 100%; background: var(--fn-accent); border-radius: 99px; transition: width .3s ease; }
.fn-prog-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.fn-back { border: 0; background: none; color: var(--fn-text-soft); font: inherit; font-size: .85rem; cursor: pointer; padding: 4px 0; }
.fn-prog-step { font-size: .8rem; color: var(--fn-muted); font-weight: 600; }

/* Frage */
.fn-q-title { font-size: 1.25rem; font-weight: 800; line-height: 1.3; color: var(--fn-primary); margin: 14px 0 6px; }
.fn-q-help { font-size: .88rem; color: var(--fn-text-soft); margin-bottom: 16px; }
/* Segmentierte Fortschrittsanzeige (progressBar mit seg): ein Balken je
   Frage. Basis-Fassung neutral, Farben setzt der Funnel. */
.fn-prog-seg { display: flex; gap: 6px; background: none; height: auto; }
.fn-prog-seg .fn-seg { flex: 1; height: 5px; border-radius: 3px; background: var(--fn-border); }
.fn-prog-seg .fn-seg.on { background: var(--fn-accent); }
.fn-prog-n { font-style: normal; }

/* Icon in der Antwort-Kachel (o.ic + F.icons in der Config) */
.fn-opt-ic { display: none; }
.fn-opt-ic svg { width: 100%; height: 100%; display: block; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.fn-opts { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
/* Zweitrangige Optionen (o.sec) stehen unter dem Raster, nicht darin.
   Basis-Fassung: gleiche Kachel, nur abgesetzt. Ein Funnel darf sie
   zurueckhaltender gestalten, siehe wien-d2d. */
.fn-opts-sec { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }

.fn-opt {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 14px 14px; text-align: left;
  background: var(--fn-bg); color: var(--fn-text);
  border: 2px solid var(--fn-border); border-radius: var(--fn-radius);
  font: inherit; cursor: pointer; transition: border-color .15s ease, background .15s ease;
  min-height: 56px;
}
.fn-opt:active { background: var(--fn-bg-soft); }
.fn-opt.sel { border-color: var(--fn-accent); background: color-mix(in srgb, var(--fn-accent) 7%, var(--fn-bg)); }
.fn-opt-radio {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid var(--fn-border); display: flex; align-items: center; justify-content: center;
  font-size: .8rem; color: var(--fn-accent-text); background: transparent;
}
.fn-opt.sel .fn-opt-radio { background: var(--fn-accent); border-color: var(--fn-accent); }
.fn-opt-lbl { flex: 1; display: flex; flex-direction: column; }
.fn-opt-lbl b { font-size: .98rem; font-weight: 700; }
.fn-opt-lbl span { font-size: .82rem; color: var(--fn-text-soft); }
.fn-opt-chev { color: var(--fn-muted); font-size: 1.3rem; line-height: 1; }

/* CTA */
.fn-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--fn-accent); color: var(--fn-accent-text);
  border: 0; border-radius: var(--fn-radius);
  padding: 16px 26px; font: inherit; font-size: 1.02rem; font-weight: 800;
  cursor: pointer; transition: filter .15s ease; min-height: 56px;
  text-decoration: none; /* der Telefon-Knopf auf der Danke-Seite ist ein <a> */
}
.fn-cta:hover { filter: brightness(.95); }
.fn-cta:disabled { opacity: .5; cursor: not-allowed; }
.fn-block { width: 100%; margin-top: 14px; }

/* Analyzing */
.fn-analyze { text-align: center; padding: 90px 24px; }
.fn-ring {
  width: 52px; height: 52px; margin: 0 auto 22px; border-radius: 50%;
  border: 4px solid var(--fn-bg-soft); border-top-color: var(--fn-accent);
  animation: fn-spin .9s linear infinite;
}
@keyframes fn-spin { to { transform: rotate(360deg); } }
.fn-analyze h2 { font-size: 1.25rem; font-weight: 800; color: var(--fn-primary); margin-bottom: 8px; }
.fn-analyze p { font-size: .92rem; color: var(--fn-text-soft); }

/* Formular */
.fn-eyebrow {
  display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .04em;
  color: var(--fn-accent); text-transform: uppercase; margin: 14px 0 4px;
}
.fn-form-hl { font-size: 1.45rem; font-weight: 800; color: var(--fn-primary); line-height: 1.25; margin: 4px 0 8px; }
.fn-form-sub { font-size: .92rem; color: var(--fn-text-soft); margin-bottom: 18px; }
.fn-recap {
  border: 1.5px solid var(--fn-border); border-radius: var(--fn-radius);
  background: var(--fn-bg-soft); padding: 4px 14px; margin-bottom: 16px;
}
.fn-recap-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--fn-border); font-size: .88rem;
}
.fn-recap-row:last-child { border-bottom: 0; }
.fn-recap-row span { color: var(--fn-text-soft); flex-shrink: 0; }
.fn-recap-row b { font-weight: 700; color: var(--fn-text); text-align: right; }
.fn-field { margin-bottom: 12px; }
.fn-field label { display: block; font-size: .82rem; font-weight: 700; color: var(--fn-text-soft); margin-bottom: 5px; }
.fn-field input {
  width: 100%; box-sizing: border-box; min-height: 56px;
  padding: 14px; font: inherit; font-size: 1rem;
  border: 2px solid var(--fn-border); border-radius: var(--fn-radius);
  transition: border-color .15s ease; background: var(--fn-bg); color: var(--fn-text);
}
.fn-field input:focus { outline: none; border-color: var(--fn-primary); }
.fn-field input::placeholder { color: var(--fn-muted); }
.fn-field textarea {
  width: 100%; box-sizing: border-box;
  padding: 14px; font: inherit; font-size: 1rem; line-height: 1.5;
  border: 2px solid var(--fn-border); border-radius: var(--fn-radius);
  transition: border-color .15s ease; background: var(--fn-bg); color: var(--fn-text);
  resize: vertical; min-height: 88px;
}
.fn-field textarea:focus { outline: none; border-color: var(--fn-primary); }
.fn-field textarea::placeholder { color: var(--fn-muted); }
/* Fehler am Feld (22.10.2026): der Absende-Knopf bleibt aktiv, markiert wird das Feld, das fehlt. */
.fn-field.fn-err input, .fn-field.fn-err textarea { border-color: var(--fn-error, #c62828); }
.fn-err-msg { margin: 6px 0 0; font-size: .875rem; font-weight: 600; line-height: 1.4; color: var(--fn-error, #c62828); }
.fn-form-note {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: .8rem; color: var(--fn-muted); margin-top: 14px; line-height: 1.5;
}

/* Danke / Leider nein */
.fn-final { text-align: center; padding: 70px 24px 30px; }
.fn-check {
  width: 72px; height: 72px; margin: 0 auto 20px; border-radius: 50%;
  background: var(--fn-ok); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; font-weight: 800;
}
.fn-check.fn-neutral { background: var(--fn-bg-soft); color: var(--fn-text-soft); }
.fn-final h1 { font-size: 1.5rem; font-weight: 800; color: var(--fn-primary); margin-bottom: 10px; }
.fn-final-sub { font-size: .95rem; color: var(--fn-text-soft); line-height: 1.6; max-width: 420px; margin: 0 auto; }
.fn-danke-video video { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: 14px; background: #000; }
.fn-dv-wrap { position: relative; }
.fn-dv-play { position: absolute; left: 50%; top: 74%; width: 104px; height: 104px; margin: -52px 0 0 -52px; border: 0; border-radius: 50%; background: rgba(255,255,255,.92); box-shadow: 0 10px 30px rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.fn-dv-play svg { width: 50px; height: 50px; margin-left: 6px; fill: var(--fn-primary, #1f1d5d); }
.fn-dv-play[hidden] { display: none; }

.fn-nein-link { color: var(--fn-primary); font-weight: 700; text-decoration: underline; }
.fn-waitlist { max-width: 420px; margin: 0 auto; }

.fn-steps-card {
  border: 2px solid var(--fn-border); border-radius: var(--fn-radius);
  padding: 18px; display: flex; flex-direction: column; gap: 16px; margin-top: 10px;
}
.fn-nstep { display: flex; gap: 12px; align-items: flex-start; }
.fn-n {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  background: var(--fn-primary); color: #fff; font-size: .82rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.fn-nstep b { display: block; font-size: .92rem; }
/* Nur die Beschreibung, NICHT die Nummer: .fn-n ist selbst ein <span> in
   .fn-nstep. Mit dem alten Selektor ".fn-nstep span" gewann diese Regel gegen
   ".fn-n" und faerbte die Ziffer grau auf petrolfarbenem Kreis. */
.fn-nstep div span { font-size: .84rem; color: var(--fn-text-soft); line-height: 1.5; }