:root{
  --bg:#0b1020;
  --card:#0f1835;
  --muted:#a8b1d1;
  --text:#eef1ff;
  --line:rgba(255,255,255,.12);
  --btn:#3b82f6;
  --btn2:rgba(255,255,255,.08);
  --ok:#22c55e;
  --err:#ef4444;
  --radius:18px;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background: radial-gradient(1000px 600px at 10% 10%, rgba(59,130,246,.25), transparent),
              radial-gradient(900px 500px at 90% 20%, rgba(34,197,94,.18), transparent),
              var(--bg);
  color:var(--text);
  min-height:100vh;
}

.wrap{max-width:900px;margin:0 auto;padding:28px 18px}
.header{
  display:flex;gap:18px;justify-content:space-between;align-items:flex-start;
  flex-wrap:wrap;margin-bottom:18px;
}
h1{font-size:28px;margin:0 0 6px}
.sub{margin:0;color:var(--muted)}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px;
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}

.progress{min-width:280px;flex:1;max-width:420px}
.progress__meta{display:flex;justify-content:space-between;color:var(--muted);font-size:13px;margin-bottom:8px}
.progress__bar{height:10px;background:rgba(255,255,255,.08);border-radius:999px;overflow:hidden;border:1px solid var(--line)}
.progress__fill{height:100%;background:linear-gradient(90deg, #60a5fa, #22c55e);border-radius:999px;transition:width .25s ease}

.q{
  display:flex;flex-direction:column;gap:12px;
}
.q__title{font-size:18px;margin:0}
.q__desc{margin:0;color:var(--muted);font-size:14px}

fieldset{border:0;margin:0;padding:0}
.option{
  display:flex;align-items:center;gap:12px;
  padding:14px 14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(0,0,0,.12);
  cursor:pointer;
  transition: transform .08s ease, border-color .12s ease, background .12s ease;
}
.option:hover{transform: translateY(-1px);border-color: rgba(255,255,255,.22);background:rgba(0,0,0,.18)}
.option input{transform:scale(1.1)}

.stars{display:flex;gap:8px;flex-wrap:wrap}
.starBtn{
  padding:10px 12px;border-radius:12px;border:1px solid var(--line);
  background:rgba(0,0,0,.12);color:var(--text);cursor:pointer;
}
.starBtn[aria-pressed="true"]{border-color:rgba(34,197,94,.6);background:rgba(34,197,94,.12)}

.input{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.12);
  color:var(--text);
  outline:none;
}
.input:focus{border-color:rgba(96,165,250,.7)}
textarea.input{min-height:120px;resize:vertical}

.nav{display:flex;justify-content:space-between;gap:12px;margin-top:18px}
.btn{
  padding:12px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.18);
  background:var(--btn);color:white;cursor:pointer;font-weight:600;
}
.btn--ghost{background:var(--btn2);color:var(--text)}
.btn:disabled{opacity:.5;cursor:not-allowed}

.hint{margin:10px 0 0;color:var(--muted);min-height:18px}
.hint.error{color:var(--err)}
.hint.ok{color:var(--ok)}

.footer{margin-top:14px;color:var(--muted)}

.lead-badge {
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
  display: inline-block;
}

/* 🟢 Hot Lead */
.lead-hot {
  background: rgba(34, 197, 94, 0.18);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.35);
}

/* 🟡 Potenzial */
.lead-warm {
  background: rgba(250, 204, 21, 0.18);
  color: #facc15;
  border: 1px solid rgba(250, 204, 21, 0.35);
}

/* 🔴 Kein Fokus */
.lead-none {
  background: rgba(239, 68, 68, 0.18);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.35);
}