/* ============================================================
   GOLDWACHT Funnel – mehrstufiger Klick-Fragebogen
   Nutzt die globalen CSS-Variablen aus index.css
   ============================================================ */
.gw-funnel{max-width:660px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:0 24px 60px rgba(15,30,46,.12);overflow:hidden}
.gw-funnel *{box-sizing:border-box}

.gw-fn-head{background:linear-gradient(135deg,#17293c,#0f1e2e);color:#fff;padding:24px 28px}
.gw-fn-head h3{margin:0;font-size:1.15rem;font-weight:800;letter-spacing:-.01em}
.gw-fn-steplabel{display:block;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-lite);font-weight:800;margin-bottom:12px}
.gw-fn-progress{height:6px;background:rgba(255,255,255,.16);border-radius:999px;overflow:hidden}
.gw-fn-bar{height:100%;width:0;background:linear-gradient(90deg,#e7c85b,#c9a227);border-radius:999px;transition:width .4s cubic-bezier(.2,.7,.3,1)}

.gw-fn-body{padding:28px}
.gw-fn-steptitle{font-size:1.3rem;font-weight:800;color:var(--navy);margin:0 0 4px;letter-spacing:-.01em}
.gw-fn-stepsub{margin:0 0 20px;color:var(--ink-soft);font-size:.95rem}

.gw-fn-field{margin-bottom:16px}
.gw-fn-field>label{display:block;font-weight:600;color:var(--ink);margin-bottom:7px;font-size:.95rem}
.gw-fn-field .req{color:var(--gold-strong)}
.gw-fn-field input{width:100%;padding:13px 15px;border:1px solid var(--line);border-radius:12px;font:inherit;color:var(--ink);background:var(--cream);transition:border-color .15s,box-shadow .15s}
.gw-fn-field input::placeholder{color:#9aa6b0}
.gw-fn-field input:focus{outline:none;border-color:var(--gold);background:#fff;box-shadow:0 0 0 3px rgba(201,162,39,.15)}
.gw-fn-field.err input{border-color:#c0413a;box-shadow:0 0 0 3px rgba(192,65,58,.12)}
.gw-fn-fielderr{display:none;color:#a5241f;font-size:.83rem;margin-top:6px}
.gw-fn-field.err .gw-fn-fielderr{display:block}

.gw-fn-opts{display:grid;gap:12px}
.gw-opt{display:flex;align-items:center;gap:14px;padding:16px 18px;border:2px solid var(--line);border-radius:14px;cursor:pointer;font-weight:700;color:var(--navy);background:#fff;transition:border-color .15s,background .15s,transform .1s}
.gw-opt:hover{border-color:var(--gold)}
.gw-opt:active{transform:scale(.99)}
.gw-opt.sel{border-color:var(--gold);background:rgba(201,162,39,.08)}
.gw-opt .tick{width:24px;height:24px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;flex:0 0 auto;color:transparent;font-size:.75rem;transition:all .15s}
.gw-opt.sel .tick{background:var(--gold);border-color:var(--gold);color:var(--navy)}

.gw-fn-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:24px}
.gw-fn-nav .spacer{flex:1}
.gw-fn-back{background:none;border:0;color:var(--ink-soft);font:inherit;font-weight:600;cursor:pointer;padding:12px 6px;display:inline-flex;align-items:center;gap:8px}
.gw-fn-back:hover{color:var(--navy)}
.gw-funnel .btn{cursor:pointer;border:0}

/* Zusammenfassung */
.gw-fn-summary{display:grid;gap:0;margin:0 0 8px;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.gw-fn-sumrow{display:flex;justify-content:space-between;gap:16px;padding:13px 16px;border-bottom:1px solid var(--line);font-size:.95rem}
.gw-fn-sumrow:last-child{border-bottom:0}
.gw-fn-sumrow:nth-child(odd){background:var(--cream)}
.gw-fn-sumrow .k{color:var(--ink-soft);font-weight:600}
.gw-fn-sumrow .v{color:var(--navy);font-weight:700;text-align:right;word-break:break-word}
.gw-fn-consent{display:flex;gap:10px;align-items:flex-start;margin:16px 0 0;font-size:.88rem;color:var(--ink-soft)}
.gw-fn-consent input{margin-top:3px;flex:0 0 auto}

/* Erfolg */
.gw-fn-done{text-align:center;padding:24px 10px}
.gw-fn-done .ic{width:66px;height:66px;border-radius:50%;background:rgba(30,122,82,.12);color:#186c48;display:grid;place-items:center;font-size:1.9rem;margin:0 auto 18px}
.gw-fn-done h3{margin:0 0 8px;color:var(--navy);font-size:1.3rem}
.gw-fn-done p{margin:0 auto 6px;color:var(--ink-soft);max-width:44ch}
.gw-fn-done .gw-fn-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:18px}

@media (max-width:640px){
  .gw-fn-body{padding:22px 18px}
  .gw-fn-head{padding:20px 18px}
  .gw-fn-nav .btn{padding-left:18px;padding-right:18px}
  .gw-fn-sumrow{flex-direction:column;gap:2px}
  .gw-fn-sumrow .v{text-align:left}
}