/* Funnel-Baukasten · Kern-Styles
   NIE pro Kunde ändern. Das Aussehen steuert der Kunde über diese Variablen
   (in seiner eigenen CSS-Datei auf :root überschreiben):

   --fk-akzent        Hauptfarbe (Knöpfe, Fortschritt, Auswahl)
   --fk-auf-akzent    Schrift auf der Hauptfarbe
   --fk-flaeche       Hintergrund von Karten und Feldern
   --fk-text          Schrift
   --fk-leise         Nebentext
   --fk-rand          Rahmen
   --fk-fehler        Fehlermeldungen
   --fk-rundung       Eckenradius
   --fk-schrift-kopf  Schrift für Fragen

   Grundsatz: Inhalte werden NIE über opacity versteckt (in Hintergrund-Tabs und
   für Crawler friert requestAnimationFrame ein – die Seite wäre leer). Einblendungen
   laufen nur als kurze transform-Animation auf bereits sichtbarem Inhalt. */

:root{
  --fk-akzent:#1f6feb; --fk-auf-akzent:#fff;
  --fk-flaeche:#fff; --fk-text:#16181d; --fk-leise:#5d6470; --fk-rand:#d9dde3;
  --fk-fehler:#b3261e; --fk-rundung:14px; --fk-schrift-kopf:inherit;
}

/* ---------- Formular-Rahmen ---------- */
form[data-funnel]{display:flex;flex-direction:column;gap:18px;width:100%;max-width:640px;margin:0 auto;color:var(--fk-text)}
.fk-kopf{display:flex;flex-direction:column;gap:9px}
.fk-label{margin:0;text-align:center;font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--fk-akzent)}
.fk-label:has([data-fk-label]:empty){display:none}
.fk-balken{display:flex;gap:6px}
.fk-balken i{flex:1;height:5px;border-radius:3px;background:var(--fk-rand);transition:background .3s ease}
.fk-balken i.an{background:var(--fk-akzent)}

.fk-schritt{display:flex;flex-direction:column;gap:16px;outline:none;border:0;padding:0;margin:0;min-width:0}
.fk-schritt[hidden]{display:none}
.fk-schritt.rein{animation:fkRein .34s cubic-bezier(.2,.7,.2,1) both}
.fk-schritt.rein.rueck{animation-name:fkRueck}
@keyframes fkRein{from{transform:translateX(18px)}to{transform:none}}
@keyframes fkRueck{from{transform:translateX(-18px)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.fk-schritt.rein{animation:none}}

.fk-schritt fieldset{border:0;padding:0;margin:0;min-width:0;display:flex;flex-direction:column;gap:10px}
.fk-frage{font-family:var(--fk-schrift-kopf);font-size:clamp(1.45rem,4.6vw,2.05rem);line-height:1.22;font-weight:700;text-align:center;margin:0 0 6px;padding:0;width:100%;text-wrap:balance}
.fk-hinweis{display:block;margin-top:8px;font-family:inherit;font-size:.92rem;font-weight:500;line-height:1.45;color:var(--fk-leise)}
.fk-grund{margin:0;text-align:center;font-size:.92rem;line-height:1.5;color:var(--fk-leise)}

/* color-mix() fehlt auf iOS < 16.2 – dort fiele die ganze box-shadow-Zeile weg. Deshalb steht
   jeweils ein fester Rückfallwert davor (wichtig für die Fehlermarkierung des Datenschutz-Hakens). */

/* ---------- Auswahl-Karten (Checkbox/Radio) ---------- */
.fk-option{display:block;position:relative;cursor:pointer}
.fk-option input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}   /* nur das native Kästchen, nie Inhalt */
.fk-karte{display:flex;align-items:center;gap:14px;min-height:64px;padding:14px 46px 14px 16px;background:var(--fk-flaeche);border:1.5px solid var(--fk-rand);border-radius:var(--fk-rundung);transition:border-color .15s ease,box-shadow .15s ease,transform .1s ease}
.fk-karte-emoji{flex:none;font-size:1.55rem;line-height:1;width:1.9rem;text-align:center}
.fk-karte-text{display:flex;flex-direction:column;gap:2px;min-width:0;overflow-wrap:anywhere}
.fk-karte-text strong{font-size:1rem;line-height:1.3}
.fk-karte-text small{font-size:.86rem;line-height:1.4;color:var(--fk-leise)}
.fk-option:hover .fk-karte{border-color:var(--fk-akzent)}
.fk-option:active .fk-karte{transform:scale(.99)}
.fk-option input:focus-visible + .fk-karte{outline:3px solid var(--fk-akzent);outline-offset:2px}
.fk-option input:checked + .fk-karte{border-color:var(--fk-akzent);box-shadow:0 0 0 3px rgba(0,0,0,.14);box-shadow:0 0 0 3px color-mix(in srgb,var(--fk-akzent) 22%,transparent)}
.fk-option input:checked + .fk-karte::after{content:"";position:absolute;right:16px;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;background:var(--fk-akzent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat}
.fk-raster{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:600px){.fk-raster--2{grid-template-columns:1fr 1fr}}

/* Foto-Kacheln (Einstiegsfrage wie bei den Vorbildern) */
.fk-kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.fk-kachel{display:flex;flex-direction:column;overflow:hidden;background:var(--fk-flaeche);border:1.5px solid var(--fk-rand);border-radius:var(--fk-rundung);transition:border-color .15s ease,box-shadow .15s ease}
.fk-kachel img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}   /* height:auto – sonst gewinnt das height-Attribut gegen aspect-ratio */
.fk-kachel span{padding:12px 10px;text-align:center;font-weight:700;background:var(--fk-akzent);color:var(--fk-auf-akzent)}
.fk-option:hover .fk-kachel,.fk-option input:checked + .fk-kachel{border-color:var(--fk-akzent);box-shadow:0 0 0 3px rgba(0,0,0,.14);box-shadow:0 0 0 3px color-mix(in srgb,var(--fk-akzent) 22%,transparent)}
.fk-option input:focus-visible + .fk-kachel{outline:3px solid var(--fk-akzent);outline-offset:2px}

/* ---------- Felder ---------- */
.fk-feld{display:flex;flex-direction:column;gap:6px;font-size:.92rem;font-weight:600}
.fk-feld input,.fk-feld textarea,.fk-feld select{font:inherit;font-weight:400;font-size:16px;   /* 16px: iOS zoomt sonst beim Antippen */
  width:100%;box-sizing:border-box;padding:14px 14px;min-height:52px;color:var(--fk-text);background:var(--fk-flaeche);border:1.5px solid var(--fk-rand);border-radius:calc(var(--fk-rundung) - 4px)}
.fk-feld textarea{min-height:96px;resize:vertical}
.fk-feld input:focus,.fk-feld textarea:focus,.fk-feld select:focus{outline:none;border-color:var(--fk-akzent);box-shadow:0 0 0 3px rgba(0,0,0,.14);box-shadow:0 0 0 3px color-mix(in srgb,var(--fk-akzent) 22%,transparent)}
.fk-feld .fk-feld-fehler,.fk-feld-fehler{border-color:var(--fk-fehler)!important;box-shadow:0 0 0 3px rgba(179,38,30,.25)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--fk-fehler) 20%,transparent)!important}
.fk-haken{display:flex;align-items:flex-start;gap:10px;font-size:.88rem;line-height:1.45;color:var(--fk-leise);cursor:pointer}
.fk-haken input{flex:none;width:22px;height:22px;margin:0;accent-color:var(--fk-akzent)}
.fk-haken a{color:inherit;text-decoration:underline}
.fk-hp{position:absolute;left:-9999px;width:1px;height:1px}   /* Honeypot: aus dem Bild geschoben, nicht per opacity/display */

/* ---------- Knöpfe ---------- */
.fk-btn{font:inherit;font-weight:700;font-size:1rem;line-height:1.25;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:54px;padding:14px 22px;border-radius:var(--fk-rundung);border:1.5px solid transparent;cursor:pointer;text-align:center;text-decoration:none;transition:filter .15s ease,transform .1s ease}
.fk-btn:active{transform:scale(.985)}
.fk-btn:disabled{cursor:progress;filter:saturate(.4) brightness(.95)}
.fk-btn--haupt{background:var(--fk-akzent);color:var(--fk-auf-akzent)}
.fk-btn--haupt:hover{filter:brightness(1.07)}
.fk-btn--leise{background:transparent;color:var(--fk-leise);border-color:var(--fk-rand)}
.fk-btn--leise:hover{color:var(--fk-text);border-color:var(--fk-text)}
.fk-btn:focus-visible{outline:3px solid var(--fk-akzent);outline-offset:3px}
.fk-btn-2z{display:flex;flex-direction:column;gap:2px}
.fk-btn-2z small{font-size:.8rem;font-weight:500;opacity:.92}
.fk-nav{display:flex;gap:10px;margin-top:4px}
.fk-nav .fk-btn--haupt{flex:1 1 auto;min-width:0}
.fk-nav .fk-btn--leise{flex:0 0 auto}
@media (max-width:560px){
  .fk-nav--absenden{flex-direction:column}
  .fk-nav--absenden .fk-btn--leise{order:2;align-self:center;border-color:transparent;min-height:44px}
}

/* ---------- Status, Vertrauen, Erfolg ---------- */
.fk-status{margin:0;font-weight:600;font-size:.95rem;text-align:center}
.fk-status:empty{display:none}
.fk-status.error{color:var(--fk-fehler)}
.fk-vertrauen{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;margin:0;padding:0;list-style:none;font-size:.85rem;color:var(--fk-leise)}
.fk-erfolg{text-align:center;padding:30px 10px}
.fk-erfolg[hidden]{display:none}
form[data-funnel].sent > :not(.fk-erfolg){display:none}

/* ---------- Einwilligungs-Dialog ---------- */
.fk-consent-scrim{position:fixed;inset:0;z-index:9998;background:rgba(10,12,16,.55);visibility:hidden;transition:visibility 0s .3s,background .3s ease}
.fk-consent-scrim.show{visibility:visible;transition-delay:0s}
.fk-consent-bar{position:fixed;left:50%;top:50%;z-index:9999;box-sizing:border-box;width:min(420px,calc(100vw - 32px));display:flex;flex-direction:column;gap:12px;padding:22px 22px 18px;background:var(--fk-flaeche);color:var(--fk-text);border:1px solid var(--fk-rand);border-radius:var(--fk-rundung);box-shadow:0 24px 70px -20px rgba(0,0,0,.45);transform:translate(-50%,-46%);visibility:hidden;transition:transform .3s ease,visibility 0s .3s;outline:none}
.fk-consent-bar.show{transform:translate(-50%,-50%);visibility:visible;transition-delay:0s}
.fk-consent-title{margin:0;font-size:1.05rem;font-weight:700;line-height:1.35}
.fk-consent-text{margin:0;font-size:.88rem;line-height:1.55;color:var(--fk-leise)}
.fk-consent-text a{color:inherit;text-decoration:underline;display:inline-block;padding:6px 3px;margin:-6px -3px}
.fk-consent-actions{display:flex;gap:10px}
.fk-consent-actions .fk-btn{flex:1;min-width:0;min-height:48px;padding:12px 10px;font-size:.9rem}   /* gleiche Größe: Ablehnen ist so leicht wie Zustimmen */
body.fk-consent-open{overflow:hidden}
@media (max-width:560px){
  .fk-consent-bar{left:10px;right:10px;top:auto;bottom:max(10px,env(safe-area-inset-bottom));width:auto;transform:translateY(20px)}
  .fk-consent-bar.show{transform:none}
}
@media (prefers-reduced-motion:reduce){.fk-consent-bar,.fk-consent-scrim{transition:none}}