/* ============================================================
   Dachstuhl.de — Anfragestrecke
   Ein Schritt je Ansicht. Auf dem Smartphone nahezu bildfüllend,
   am Schreibtisch eine ruhige Karte über abgedunkeltem Hintergrund.
   ============================================================ */

.funnel{
  width:min(660px, calc(100vw - 40px));
  max-width:none; max-height:min(86dvh, 860px);
  padding:0; border:0; border-radius:var(--r-l);
  background:var(--paper); color:var(--ink-2);
  box-shadow:var(--sh-l);
  overflow:hidden;
}
.funnel::backdrop{
  background:rgba(14,16,19,.55);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.funnel[open]{display:flex; flex-direction:column}

@media (prefers-reduced-motion:no-preference){
  .funnel[open]{animation:funnel-in .34s var(--ease-out)}
  .funnel[open]::backdrop{animation:fade-in .34s var(--ease-out)}
}
@keyframes funnel-in{from{opacity:0; transform:translateY(14px) scale(.985)} to{opacity:1; transform:none}}
@keyframes fade-in{from{opacity:0} to{opacity:1}}

/* --- Kopf mit Fortschritt ------------------------------------ */
.funnel__head{
  position:relative; flex:none;
  padding:18px 20px 16px;
  border-bottom:1px solid var(--line);
  background:var(--paper);
}
.funnel__bar{
  height:3px; background:var(--off-2);
  overflow:hidden; margin-bottom:14px;
}
.funnel__bar i{
  display:block; height:100%; width:0%;
  background:var(--accent); border-radius:inherit;
  transition:width .42s var(--ease-out);
}
.funnel__meta{display:flex; align-items:center; gap:14px}
.funnel__count{
  font-size:.8125rem; font-weight:600; letter-spacing:.02em;
  color:var(--ink-4); font-variant-numeric:tabular-nums;
}
.funnel__back,.funnel__close{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  background:none; border:0; cursor:pointer; border-radius:var(--r-xs);
  color:var(--ink-3); font-size:.875rem; font-weight:550;
  padding:8px 10px; min-height:40px;
}
.funnel__back svg{width:15px; height:15px}
.funnel__back:hover,.funnel__close:hover{color:var(--ink); background:var(--off-2)}
.funnel__back[hidden]{display:none}
.funnel__close{margin-inline-start:auto; width:40px; padding:0; font-size:1.25rem; line-height:1}

/* --- Formularrahmen: Kopf fest, Körper scrollt, Fuß fest ------ */
.funnel__form{display:flex; flex-direction:column; flex:1 1 auto; min-height:0}

/* --- Körper --------------------------------------------------- */
.funnel__body{
  flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:clamp(22px,3.4vw,34px) clamp(20px,3.4vw,34px) 8px;
}
.funnel__body:focus{outline:none}

.funnel h2{
  font-size:clamp(1.375rem,2.4vw,1.75rem);
  letter-spacing:-.026em; line-height:1.2; margin-bottom:.35em;
}
.funnel__hint{color:var(--ink-3); font-size:.9375rem; margin:0 0 24px}

@media (prefers-reduced-motion:no-preference){
  .funnel__step{animation:step-in .3s var(--ease-out)}
}
@keyframes step-in{from{opacity:0; transform:translateX(10px)} to{opacity:1; transform:none}}
.funnel__step.is-back{animation-name:step-in-back}
@keyframes step-in-back{from{opacity:0; transform:translateX(-10px)} to{opacity:1; transform:none}}

/* --- Auswahlkarten -------------------------------------------- */
.choices{display:grid; gap:10px; margin:0; padding:0; border:0}
.choices--cols{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}

.choice{
  position:relative;
  display:flex; align-items:center; gap:14px;
  min-height:62px; padding:16px 18px;
  background:var(--paper); border:1.5px solid var(--line);
  border-radius:var(--r-s); cursor:pointer;
  font-size:1rem; font-weight:520; color:var(--ink);
  transition:border-color .18s var(--ease), background .18s var(--ease),
             box-shadow .18s var(--ease);
}
.choice:hover{border-color:var(--line-2); background:var(--off)}
.choice input{
  position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none;
}
.choice__mark{
  flex:none; width:22px; height:22px; border-radius:var(--r-xs);
  border:1.5px solid var(--line-2); background:var(--paper);
  display:grid; place-items:center;
  transition:border-color .18s var(--ease), background .18s var(--ease);
}
.choice__mark svg{width:12px; height:12px; color:#fff; opacity:0; transition:opacity .18s var(--ease)}
.choice:has(input:checked){
  border-color:var(--accent); background:var(--blue-100);
  box-shadow:inset 0 0 0 1px var(--accent);
}
.choice:has(input:checked) .choice__mark{background:var(--accent); border-color:var(--accent)}
.choice:has(input:checked) .choice__mark svg{opacity:1; color:#fff}
.choice:has(input:focus-visible){outline:2px solid var(--focus); outline-offset:3px}

/* --- Eingabefelder -------------------------------------------- */
.field{display:block; margin-bottom:16px}
.field:last-of-type{margin-bottom:0}
.field > label{
  display:block; margin-bottom:7px;
  font-size:.875rem; font-weight:600; color:var(--ink);
}
.field input{
  width:100%; min-height:56px; padding:15px 17px;
  background:var(--off); border:1.5px solid var(--line); border-radius:var(--r-s);
  font-size:1rem; color:var(--ink);
  transition:border-color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
}
.field input::placeholder{color:var(--ink-4)}
.field input:hover{border-color:var(--line-2)}
.field input:focus{
  outline:none; background:var(--paper); border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-100);
}
.field input[aria-invalid="true"]{border-color:#c2373c; background:#fdf4f4}
.field input[aria-invalid="true"]:focus{box-shadow:0 0 0 3px #f6dcdd}

.field__error{
  display:none; margin-top:7px; color:#a82a2f; font-size:.8125rem; font-weight:550;
}
.field__error.is-on{display:block}

.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:0 14px}
@media (max-width:520px){ .grid-2{grid-template-columns:1fr} }

.divider-or{
  display:flex; align-items:center; gap:14px;
  margin:20px 0; color:var(--ink-4); font-size:.8125rem;
}
.divider-or::before,.divider-or::after{content:""; flex:1; height:1px; background:var(--line)}

/* --- Einwilligung --------------------------------------------- */
.consent{
  display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start;
  margin-top:22px; padding:16px; border:1px solid var(--line);
  border-radius:var(--r-s); background:var(--off);
  font-size:.8438rem; line-height:1.5; color:var(--ink-3); cursor:pointer;
}
.consent input{width:20px; height:20px; margin:1px 0 0; accent-color:var(--accent); flex:none}
.consent a{color:var(--accent)}
.consent:has(input[aria-invalid="true"]){border-color:#c2373c; background:#fdf4f4}

/* --- Fuß mit Weiter-Schaltfläche ------------------------------ */
.funnel__foot{
  flex:none; padding:16px clamp(20px,3.4vw,34px) clamp(24px,3.4vw,34px);
  background:linear-gradient(to top, var(--paper) 72%, rgba(255,255,255,0));
}
.funnel__foot .btn{width:100%}
.funnel__legal{
  margin:12px 0 0; text-align:center;
  font-size:.75rem; color:var(--ink-4); line-height:1.5;
}

/* --- Abschluss ------------------------------------------------- */
.done{text-align:center; padding:clamp(18px,3vw,30px) 0 clamp(8px,2vw,18px)}
.done__mark{
  width:66px; height:66px; margin:0 auto 26px;
  border-radius:var(--r-s); background:var(--blue-100);
  display:grid; place-items:center; color:var(--accent);
}
.done__mark svg{width:30px; height:30px}
.done h2{margin-bottom:.4em}
.done p{color:var(--ink-3); max-width:36ch; margin-inline:auto}
.done__summary{
  margin-top:28px; padding-top:22px; border-top:1px solid var(--line);
  text-align:left; display:grid; gap:9px;
}
.done__summary div{display:flex; justify-content:space-between; gap:18px; font-size:.875rem}
.done__summary dt{color:var(--ink-4); margin:0}
.done__summary dd{color:var(--ink); margin:0; font-weight:550; text-align:right}
.done__dev{
  margin-top:22px; padding:13px 16px; border-radius:var(--r-xs);
  background:#fff8e6; border:1px solid #f0dca8; color:#7a5c12;
  font-size:.8125rem; text-align:left; line-height:1.5;
}

/* --- Smartphone: nahezu bildfüllend --------------------------- */
@media (max-width:640px){
  .funnel{
    width:100%; max-width:100%; height:100dvh; max-height:100dvh;
    border-radius:0; margin:0;
  }
  .funnel__head{padding:14px 16px 12px}
  .funnel__body{padding:22px 16px 8px}
  .funnel__foot{padding:14px 16px calc(16px + env(safe-area-inset-bottom))}
  .choice{min-height:64px; font-size:1.0313rem}
  .funnel__foot .btn{min-height:58px}
}

/* --- Reduzierte Bewegung -------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .funnel[open],.funnel__step,.funnel[open]::backdrop{animation:none}
  .funnel__bar i{transition:none}
}

/* ============================================================
   Hinweisdialog (lokale Speicherung)
   ============================================================ */
.sheet{
  width:min(520px, calc(100vw - 40px));
  padding:clamp(26px,4vw,34px);
  border:0; border-radius:var(--r-l);
  background:var(--paper); color:var(--ink-2); box-shadow:var(--sh-l);
}
.sheet::backdrop{background:rgba(14,16,19,.5)}
.sheet h2{font-size:1.375rem; letter-spacing:-.024em}
.sheet p{font-size:.9375rem; color:var(--ink-3)}
.sheet__actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px}
.sheet__actions .btn{flex:1 1 180px; min-height:52px; font-size:1rem}