/* Lead-Funnel auf /kontakt – gebaut im Stil des grünen Kastens („Passt das zu Ihrem Betrieb?“).
   Die Effekte (Spiegelblitz im Kasten, Schimmer auf dem Absenden-Button, Lichtkante + Magnet auf den Antwort-Pillen,
   Lichtkante um die Felder) kommen unverändert aus fx.js; hier steht nur das Aussehen. */
.funnel-section{padding:0}
.funnel-or-sec{padding:64px 0 0}
.funnel-or-sec + section{padding-top:36px}
.funnel-or{margin:0;text-align:center;font-family:var(--font-head);font-weight:700;color:var(--ink-soft);font-size:1.02rem}

.cta-band.funnel{padding:38px 18px;scroll-margin-top:96px}
@media(min-width:640px){.cta-band.funnel{padding:48px 32px}}
@media(min-width:901px){.cta-band.funnel{padding:56px 56px 52px}}
.funnel h2{margin-bottom:.35em}
.funnel .lede{margin:0 auto 26px;max-width:640px}
.funnel-noscript{margin:0;font-size:.98rem}
.funnel-noscript a{text-decoration:underline}

/* Fortschritt */
.funnel-progress{max-width:420px;margin:0 auto 30px}
.funnel-count{display:block;font-family:var(--font-head);font-weight:700;font-size:.85rem;color:#101728b8;margin-bottom:9px;letter-spacing:.01em}
.funnel-bar{height:8px;border-radius:100px;background:#10172826;overflow:hidden}
.funnel-fill{display:block;height:100%;width:12.5%;border-radius:100px;background:var(--navy);transition:width .45s var(--ease)}

/* Schritte */
.funnel-nav .btn[hidden],.funnel-form[hidden],.funnel-step[hidden],.funnel-progress[hidden],.funnel-nav[hidden],.funnel-other[hidden],.funnel-msg[hidden]{display:none}
.funnel-form{margin:0}
.funnel-step{max-width:760px;margin:0 auto}
.funnel-q{font-size:clamp(1.3rem,2.7vw,1.8rem);line-height:1.2;margin:0 0 8px;color:var(--navy);outline:none;text-wrap:balance}
.funnel-hint{margin:0 auto 24px;font-size:.98rem;color:#101728b8;max-width:520px}
.funnel-q + .funnel-opts,.funnel-q + .contact-form{margin-top:22px}
@media(prefers-reduced-motion:no-preference){
  .funnel-step:not([hidden]){animation:fnIn .38s var(--ease) both}
  @keyframes fnIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  .funnel-done-ico circle{stroke-dasharray:220;stroke-dashoffset:220;animation:fnDraw .7s .1s var(--ease) forwards}
  .funnel-done-ico path{stroke-dasharray:60;stroke-dashoffset:60;animation:fnDraw .45s .55s var(--ease) forwards}
  @keyframes fnDraw{to{stroke-dashoffset:0}}
}

/* Antwort-Pillen (echte Radio-/Checkbox-Felder, optisch die grünen Pillen) */
.funnel-opts{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.funnel-input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.funnel-opts .btn.funnel-opt{margin:0;min-height:52px;white-space:normal;text-align:center;line-height:1.25;justify-content:center;background:#ffffff38;cursor:pointer;user-select:none;-webkit-user-select:none}
.funnel-opts .btn.funnel-opt:hover{background:#fff}
html .funnel-form .funnel-input:checked + .btn.funnel-opt{background:var(--navy);color:#fff;border-color:var(--navy);box-shadow:0 1px 2px #00000026,0 10px 22px -10px #00000080}
html .funnel-form .funnel-input:checked + .btn.funnel-opt:hover{background:#000;border-color:#000;color:#fff}
.funnel-input:checked + .btn.funnel-opt::before{content:"\2713";font-weight:800;margin-right:2px}
.funnel-input:focus-visible + .btn.funnel-opt{outline:3px solid var(--navy);outline-offset:3px}
@media(max-width:560px){
  .funnel-opts{flex-direction:column;align-items:stretch}
  .funnel-opts .btn.funnel-opt{width:100%}
}
.funnel-other{max-width:420px;margin:16px auto 0}

/* Felder: weiße Pillen, Lichtkante kommt über .contact-form aus fx.js */
.funnel .funnel-fields{display:flex;flex-direction:column;gap:14px;max-width:480px;margin:0 auto;text-align:left}
.funnel .funnel-fields label{color:var(--navy);margin-bottom:6px;padding-left:6px}
.funnel .funnel-fields .field:focus-within label{color:var(--navy)}
.funnel .contact-form input[type=text],.funnel .contact-form input[type=email],.funnel .contact-form input[type=tel]{border-radius:100px;padding:15px 24px;border:1.5px solid #10172859;background:#fff;color:var(--navy)}
.funnel .contact-form input[type=text]:hover,.funnel .contact-form input[type=email]:hover,.funnel .contact-form input[type=tel]:hover{border-color:var(--navy)}
.funnel .contact-form input[type=text]:focus,.funnel .contact-form input[type=email]:focus,.funnel .contact-form input[type=tel]:focus{border-color:var(--navy);box-shadow:0 0 0 4px #10172829}
.funnel .contact-form input.invalid{border-color:#b3261e;box-shadow:0 0 0 3px #fbe2e0}
.funnel .contact-form .consent{color:#101728d9;margin-top:6px;padding:0 6px}
.funnel .contact-form .consent input{accent-color:var(--navy)}
.funnel .contact-form .consent a{color:var(--navy);text-decoration:underline}
.funnel-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* Navigation + Meldung */
.funnel-nav{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.funnel-nav .btn{min-width:150px;justify-content:center}
.funnel-nav .btn[disabled]{opacity:.65;cursor:progress}
@media(max-width:560px){.funnel-nav{flex-direction:column-reverse;align-items:stretch}.funnel-nav .btn{width:100%}}
.funnel-msg{max-width:520px;margin:18px auto 0;text-align:left}

/* Endbilder (Nein / Danke) */
.funnel-done-ico{width:76px;height:76px;margin:0 auto 14px;display:block}
.funnel-end-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:24px}
@media(max-width:560px){.funnel-end-actions{flex-direction:column;align-items:stretch}.funnel-end-actions .btn{width:100%;justify-content:center}}
.funnel.is-end > h2,.funnel.is-end > .lede{display:none}
.funnel-end-text{margin:0 auto;max-width:520px;font-size:1.05rem;color:#101728d9}
.funnel .funnel-other label{color:var(--navy);text-align:left;padding-left:6px;margin-bottom:6px}
.funnel .funnel-q + .funnel-fields{margin-top:22px}