/* =====================================================================
Funnel-Kacheln: optionale zweite Schicht ueber funnel.css.
Antwort-Optionen als grosse Kacheln im 2x2-Raster mit Symbol, Fortschritt
als Segmente, Danke-Seiten-Bausteine. Hochgehoben aus dem Traumbad-Wien-
Funnel (dort waren es Landing-lokale Overrides), Farben komplett ueber
Tokens. Einbinden NACH funnel.css:
Marken-Tokens (Defaults haengen an den --fn-*-Tokens aus funnel.css):
--fnk-tile-bg Kachel-Hintergrund
--fnk-tile-bg-hover Kachel-Hintergrund bei Hover/Auswahl
--fnk-tile-text Text in der Kachel
--fnk-tile-text-soft Unterzeile in der Kachel
--fnk-tile-shadow Kachel-Schatten
--fnk-dq-border/-hover Rahmen der zurueckgenommenen Ausstiegs-Option
--fnk-dq-text Text/Icon der Ausstiegs-Option
--fnk-radius Kachel-Radius
--fnk-title-font Schrift fuer Frage/Headlines (Default: --fn-font)
===================================================================== */
#funnel-root{
--fnk-tile-bg:var(--fn-primary);
--fnk-tile-bg-hover:color-mix(in srgb, var(--fn-primary) 82%, black);
--fnk-tile-text:#fff;
--fnk-tile-text-soft:rgba(255,255,255,.75);
--fnk-tile-shadow:0 12px 26px -16px rgba(0,0,0,.45);
--fnk-dq-border:color-mix(in srgb, var(--fn-border) 70%, var(--fn-text-soft));
--fnk-dq-border-hover:var(--fn-text-soft);
--fnk-dq-text:var(--fn-text-soft);
--fnk-radius:18px;
--fnk-title-font:var(--fn-font);
}
#funnel-root{background:var(--fn-bg-soft);max-width:none;min-height:100vh;}
#funnel-root>.fn-prog-wrap,#funnel-root>.fn-pad,#funnel-root>.fn-analyze{max-width:560px;margin-left:auto;margin-right:auto;}
#funnel-root .fn-q-title,#funnel-root .fn-form-hl,#funnel-root .fn-final h1,#funnel-root .fn-analyze h2{font-family:var(--fnk-title-font);font-weight:800;}
/* Frage deutlich groesser als die Basis-Fassung: der Platz auf dem Schirm
wird ohnehin nicht gebraucht, und die Frage ist das Wichtigste. */
#funnel-root .fn-q-title{font-size:clamp(1.625rem,7.2vw,2rem);line-height:1.2;margin:18px 0 10px;}
#funnel-root .fn-q-help{font-size:1rem;line-height:1.5;margin-bottom:20px;}
#funnel-root .fn-analyze p{font-size:1.0625rem;color:var(--fn-text);max-width:420px;margin:0 auto;line-height:1.55;}
/* Fortschritt: ein Segment je Frage statt eines durchlaufenden Balkens,
rechts "Frage / " mit hervorgehobener Zahl. */
#funnel-root .fn-prog-seg{gap:6px;margin-bottom:12px;}
#funnel-root .fn-prog-seg .fn-seg{height:5px;border-radius:3px;background:color-mix(in srgb, var(--fn-primary) 15%, transparent);}
#funnel-root .fn-prog-seg .fn-seg.on{background:var(--fn-accent);}
#funnel-root .fn-prog-step{color:var(--fn-text-soft);font-size:.9375rem;}
#funnel-root .fn-prog-n{font-weight:800;font-size:1.125rem;color:var(--fn-accent);padding-right:.1em;}
#funnel-root .fn-back{color:var(--fn-text-soft);font-size:.9375rem;}
/* grid-auto-rows:1fr zieht ALLE Zeilen auf dieselbe Hoehe. Ohne das richtet
sich jede Zeile nur nach ihrer eigenen laengsten Kachel. */
#funnel-root .fn-opts{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:12px;}
/* Weiter-Knopf einer Mehrfachauswahl-Frage steht im Raster: volle Breite. */
#funnel-root .fn-opts .fn-cta{grid-column:1/-1;}
/* Genau DREI Antworten teilen sich nie sauber auf zwei Spalten (2+1 mit
Waise). Sie werden als volle Zeilen gerendert, Kachel-Look bleibt. */
#funnel-root .fn-opts:has(> .fn-opt:nth-child(3)):not(:has(> .fn-opt:nth-child(4))){grid-template-columns:1fr;}
#funnel-root .fn-opts:has(> .fn-opt:nth-child(3)):not(:has(> .fn-opt:nth-child(4))) .fn-opt{flex-direction:row;min-height:76px;text-align:left;justify-content:flex-start;gap:14px;padding:14px 16px;}
#funnel-root .fn-opts:has(> .fn-opt:nth-child(3)):not(:has(> .fn-opt:nth-child(4))) .fn-opt-ic{width:38px;height:38px;}
#funnel-root .fn-opt{
position:relative;min-height:150px;min-width:0;
flex-direction:column;align-items:center;justify-content:center;gap:8px;
text-align:center;padding:16px 12px;border-radius:var(--fnk-radius);border-width:1.5px;
background:var(--fnk-tile-bg);border-color:var(--fnk-tile-bg);color:var(--fnk-tile-text);
box-shadow:var(--fnk-tile-shadow);
}
#funnel-root .fn-opt:hover{background:var(--fnk-tile-bg-hover);border-color:var(--fnk-tile-bg-hover);}
#funnel-root .fn-opt.sel{background:var(--fnk-tile-bg-hover);border-color:var(--fn-accent);}
/* Ausstiegs-Option (Klasse aus funnel.js): NUR zuruecknehmen, wenn die Frage
mehr als zwei Antworten hat. Bei genau zweien bleibt sie gleichwertig,
damit sie zur Landing passt. */
#funnel-root .fn-opts:has(> .fn-opt:nth-child(3)) .fn-opt-dq{
background:var(--fn-bg);border-color:var(--fnk-dq-border);color:var(--fnk-dq-text);box-shadow:0 2px 8px rgba(0,0,0,.06);
}
#funnel-root .fn-opts:has(> .fn-opt:nth-child(3)) .fn-opt-dq:hover{background:var(--fn-bg);border-color:var(--fnk-dq-border-hover);}
/* Grosses Symbol in jeder Antwort-Kachel; die Vektoren stehen als F.icons
in der Config. */
#funnel-root .fn-opt-ic{display:block;width:52px;height:52px;flex:0 0 auto;color:var(--fnk-tile-text);}
#funnel-root .fn-opt-ic svg{stroke-width:1.5;}
#funnel-root .fn-opts:has(> .fn-opt:nth-child(3)) .fn-opt-dq .fn-opt-ic{color:var(--fnk-dq-text);}
#funnel-root .fn-opt-lbl{flex:0 1 auto;align-items:center;min-width:0;max-width:100%;}
#funnel-root .fn-opt-lbl b{font-size:1.15625rem;line-height:1.25;overflow-wrap:break-word;hyphens:auto;}
#funnel-root .fn-opt-lbl span{
display:block;font-size:.8125rem;line-height:1.25;margin-top:3px;
color:var(--fnk-tile-text-soft);
}
#funnel-root .fn-opts:has(> .fn-opt:nth-child(3)) .fn-opt-dq .fn-opt-lbl span{color:var(--fnk-dq-text);}
/* Abgesetzte Zweit-Option (o.sec in der Config): keine Kachel, sondern eine
ruhige gestrichelte Zeile unter dem Raster. Voller Knopf, halbe Lautstaerke. */
#funnel-root .fn-opts-sec{margin-top:12px;}
#funnel-root .fn-opts-sec .fn-opt{
min-height:52px;flex-direction:row;justify-content:center;
background:transparent;border-color:var(--fnk-dq-border);color:var(--fnk-dq-text);box-shadow:none;
border-style:dashed;padding:12px 14px;
}
#funnel-root .fn-opts-sec .fn-opt:hover{background:var(--fn-bg);border-color:var(--fnk-dq-border-hover);box-shadow:none;}
#funnel-root .fn-opts-sec .fn-opt.sel{background:var(--fn-bg);border-style:solid;border-color:var(--fn-accent);}
#funnel-root .fn-opts-sec .fn-opt-lbl b{font-size:.9375rem;font-weight:600;}
#funnel-root .fn-opt-radio{border-color:var(--fnk-tile-text-soft);color:var(--fnk-tile-text);}
#funnel-root .fn-opt-dq .fn-opt-radio{border-color:var(--fnk-dq-border);color:var(--fnk-dq-text);}
#funnel-root .fn-opt-chev{display:none;}
/* Auswahlkreis erst zeigen, wenn die Kachel gewaehlt ist (sonst leere Kreise) */
#funnel-root .fn-opt-radio{position:absolute;top:10px;right:10px;width:22px;height:22px;font-size:.72rem;opacity:0;transition:opacity .12s ease;}
#funnel-root .fn-opt.sel .fn-opt-radio{opacity:1;}
#funnel-root .fn-field input,#funnel-root .fn-field textarea{background:var(--fn-bg);}
/* Neutraler Kreis der Leider-nein-Seite: auf der getoenten Flaeche braucht
er weissen Grund und eine Linie, sonst ist er unsichtbar. */
#funnel-root .fn-check.fn-neutral{background:var(--fn-bg);border:1px solid var(--fn-border);}
#funnel-root .fn-steps-card{background:var(--fn-bg);}
#funnel-root .fn-recap{background:var(--fn-bg-soft);}
/* Danke-Seite: Vordraengel-Block, zwei Abschnitte mit eigenen Ueberschriften,
zweite Liste bewusst ohne Nummern. */
#funnel-root .fn-danke-h2{font-family:var(--fnk-title-font);font-weight:800;font-size:1.375rem;color:var(--fn-primary);margin:26px 0 12px;}
#funnel-root .fn-danke-call{text-align:center;}
#funnel-root .fn-danke-call h2{font-family:var(--fnk-title-font);font-weight:800;font-size:1.375rem;color:var(--fn-primary);margin:0 0 6px;}
#funnel-root .fn-danke-call p{color:var(--fn-text-soft);font-size:1rem;line-height:1.5;margin:0 0 14px;}
/* Wer anruft: Name unter dem Knopf, darunter die Bitte, die Nummer
einzuspeichern. Die Nummer selbst steht im Knopf. */
#funnel-root .fn-danke-person{font-weight:700;font-size:1.0625rem;color:var(--fn-text);margin:16px 0 4px;}
#funnel-root .fn-danke-note{color:var(--fn-text-soft);font-size:.9375rem;line-height:1.5;margin:0;max-width:26em;margin-left:auto;margin-right:auto;}
#funnel-root .fn-danke-extra p{color:var(--fn-text-soft);font-size:1rem;line-height:1.5;margin:0 0 10px;}
#funnel-root .fn-danke-extra ul{list-style:none;margin:0;padding:0;}
#funnel-root .fn-danke-extra li{
position:relative;padding:10px 0 10px 26px;font-size:1rem;line-height:1.5;color:var(--fn-text);
border-bottom:1px solid var(--fn-border);
}
#funnel-root .fn-danke-extra li:last-child{border-bottom:0;}
/* Strich statt Nummer, damit die Fragen nicht als weitere Schritte gelesen
werden. Position in ganzen Pixeln: 10 px Innenabstand + halbe Zeile
(16 px * 1,5 / 2) = 22 px, Strich 2 px hoch, also top 21 px. */
#funnel-root .fn-danke-extra li::before{content:"";position:absolute;left:4px;top:21px;width:12px;height:2px;background:var(--fn-accent);}
/* Microcopy unter dem Absende-Knopf: Dreier-Zeile mit Trennpunkten, mittig. */
#funnel-root .fn-form-note{justify-content:center;text-align:center;font-size:.875rem;letter-spacing:.01em;margin-top:12px;}