/* ============================================================
   DER ANFRAGE-FUNNEL
   Sechs Schritte in der Gestaltung der Seite. Kein fremder Rahmen,
   keine fremde Schrift, keine Daten an Dritte.
   ============================================================ */
.funnel-rahmen{margin-top:30px;background:#fff;border:1px solid var(--linie);
  border-radius:var(--r-gross);padding:clamp(20px,3.4vw,40px);
  box-shadow:0 22px 50px rgba(13,27,40,.10),0 2px 6px rgba(13,27,40,.04);
  max-width:860px;position:relative;overflow:hidden}
.funnel-rahmen::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--blau),var(--licht))}

/* ---------- Kopf: Balken und Zähler ---------- */
.funnel-kopf{margin-bottom:clamp(22px,3vw,34px)}
.funnel-balken{height:6px;border-radius:999px;background:var(--linie);overflow:hidden}
.funnel-balken span{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--blau),var(--licht));
  transition:width .42s cubic-bezier(.22,.61,.36,1)}
.funnel-zaehler{display:flex;justify-content:space-between;gap:16px;margin-top:10px;
  font-family:var(--mono);font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-50)}
.funnel-zaehler b{color:var(--blau)}

/* ---------- Ein Schritt ---------- */
.funnel-schritt{border:0;margin:0;padding:0;min-width:0}
.funnel-frage{font-family:var(--titelschrift);font-size:clamp(1.3rem,2.6vw,1.74rem);font-weight:600;
  letter-spacing:-.018em;line-height:1.2;padding:0;margin:0 0 6px;color:var(--ink)}
.funnel-hinweis{color:var(--ink-50);font-size:.95rem;margin:0 0 22px}

@keyframes rein-rechts{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}
@keyframes rein-links{from{opacity:0;transform:translateX(-22px)}to{opacity:1;transform:none}}
.funnel-schritt.rein-rechts{animation:rein-rechts .34s cubic-bezier(.22,.61,.36,1) both}
.funnel-schritt.rein-links{animation:rein-links .34s cubic-bezier(.22,.61,.36,1) both}
@keyframes ruckeln{0%,100%{transform:none}22%{transform:translateX(-6px)}
  62%{transform:translateX(5px)}}
.funnel-schritt.ruckeln{animation:ruckeln .3s ease-in-out}

/* ---------- Schritt 1: Kacheln mit Bild ---------- */
.funnel-kacheln{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
@media (max-width:900px){.funnel-kacheln{grid-template-columns:repeat(3,1fr)}}
.kachel{position:relative;cursor:pointer;border-radius:var(--r-mittel);overflow:hidden;
  border:2px solid var(--linie);background:#fff;display:block;
  transition:border-color .18s,transform .18s,box-shadow .18s}
.kachel img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.kachel span{display:block;padding:11px 13px;font-weight:600;font-size:.9rem;min-height:3.1em;line-height:1.25;
  letter-spacing:-.01em;line-height:1.3}
.kachel input{position:absolute;opacity:0;width:1px;height:1px}
.kachel::after{content:"";position:absolute;top:10px;right:10px;width:22px;height:22px;
  border-radius:50%;background:var(--blau);opacity:0;transform:scale(.6);
  transition:opacity .18s,transform .18s;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size:14px;background-repeat:no-repeat;background-position:center}
.kachel:hover{border-color:var(--blau-hell);transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(13,27,40,.12)}
.kachel:hover img{transform:scale(1.04)}
.kachel:has(input:checked){border-color:var(--blau);box-shadow:0 0 0 4px rgba(4,107,210,.12)}
.kachel:has(input:checked)::after{opacity:1;transform:none}
.kachel:has(input:focus-visible){outline:3px solid var(--licht);outline-offset:2px}

/* ---------- Schritte 2 und 4: Wahlknöpfe ---------- */
.funnel-wahl{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:11px}
.funnel-wahl-schmal{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.wahl{position:relative;display:flex;align-items:center;gap:13px;min-height:62px;
  padding:14px 18px;cursor:pointer;background:#fff;
  border:2px solid var(--linie);border-radius:var(--r-mittel);
  font-weight:600;font-size:1rem;letter-spacing:-.01em;line-height:1.3;
  transition:border-color .18s,background .18s,transform .18s}
.wahl input{position:absolute;opacity:0;width:1px;height:1px}
.wahl svg{width:24px;height:24px;flex:none;fill:none;stroke:var(--blau);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .18s}
.wahl:hover{border-color:var(--blau-hell);background:var(--licht-weich);transform:translateY(-1px)}
.wahl:has(input:checked){border-color:var(--blau);background:var(--licht-weich)}
.wahl:has(input:focus-visible){outline:3px solid var(--licht);outline-offset:2px}

/* ---------- Schritt 3: Regler ---------- */
.funnel-zahl{display:block;font-family:var(--titelschrift);font-size:clamp(2.4rem,6vw,3.4rem);
  font-weight:700;letter-spacing:-.03em;color:var(--ink);margin-bottom:18px}
.funnel-zahl b{color:var(--blau);font-weight:700}
.funnel-regler{--gefuellt:6%;-webkit-appearance:none;appearance:none;width:100%;height:8px;
  border-radius:999px;background:linear-gradient(90deg,var(--blau) var(--gefuellt),
  var(--linie) var(--gefuellt));outline:none;cursor:pointer}
.funnel-regler::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;
  border-radius:50%;background:#fff;border:3px solid var(--blau);cursor:grab;
  box-shadow:0 4px 14px rgba(4,107,210,.32);transition:transform .14s}
.funnel-regler::-webkit-slider-thumb:active{transform:scale(1.12);cursor:grabbing}
.funnel-regler::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;
  border:3px solid var(--blau);cursor:grab;box-shadow:0 4px 14px rgba(4,107,210,.32)}
.funnel-regler:focus-visible{outline:3px solid var(--licht);outline-offset:4px}
.funnel-skala{display:flex;justify-content:space-between;margin-top:10px;
  font-family:var(--mono);font-size:.74rem;color:var(--ink-50)}

/* ---------- Schritte 5 und 6: Felder ---------- */
.funnel-felder{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.funnel-felder .feld:first-child{grid-column:1/-1}
.funnel-feld{width:100%;font:inherit;font-size:16px;padding:14px 16px;color:var(--ink);
  background:#fff;border:1px solid var(--linie);border-radius:var(--r-klein);
  transition:border-color .16s,box-shadow .16s}
.funnel-feld::placeholder{color:var(--ink-50)}
.funnel-feld:focus{outline:none;border-color:var(--blau);box-shadow:0 0 0 3px rgba(4,107,210,.14)}
textarea.funnel-feld{resize:vertical;min-height:110px}

/* ---------- Fuß: Knöpfe und Meldung ---------- */
.funnel-fuss{display:flex;gap:12px;align-items:center;margin-top:clamp(24px,3vw,34px);
  padding-top:clamp(18px,2.4vw,26px);border-top:1px solid var(--linie)}
.funnel-fuss .funnel-weiter,.funnel-fuss .funnel-senden{margin-left:auto}
.funnel-senden[disabled]{opacity:.62;cursor:progress}
.funnel-meldung{margin:14px 0 0;font-size:.94rem;color:var(--ink-70);min-height:1.2em}
.funnel-meldung.fehlt{color:var(--signal);font-weight:600}

/* Köderfeld. Nicht display:none - das füllen Maschinen trotzdem aus. */
.koeder{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- Dankeseite ---------- */
.funnel-danke{text-align:center;padding:clamp(30px,6vw,60px) 10px}
.funnel-danke svg{width:58px;height:58px;fill:none;stroke:var(--blau);stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;margin-bottom:18px}
.funnel-danke h3{font-size:clamp(1.4rem,3vw,1.9rem);margin-bottom:10px}
.funnel-danke p{color:var(--ink-70);max-width:46ch;margin:0 auto}

@media (max-width:720px){
  .funnel-rahmen{padding:18px 16px 22px;border-radius:var(--r-mittel)}
  .funnel-kacheln{grid-template-columns:1fr 1fr;gap:9px}
  .kachel span{padding:9px 10px;font-size:.86rem}
  .funnel-wahl{grid-template-columns:1fr}
  .funnel-felder{grid-template-columns:1fr}
  .funnel-fuss{flex-wrap:wrap}
  .funnel-fuss .knopf{flex:1;justify-content:center;min-height:50px}
}
@media (prefers-reduced-motion:reduce){
  .funnel-schritt,.kachel,.kachel img,.wahl,.funnel-balken span{animation:none!important;
    transition:none!important}
}