/* Reset / Basics */
* { box-sizing: border-box; }
html, body { height: 100%; }
:root{
  --bg:#f5f7fb; --card:#fff; --text:#0f172a; --muted:#64748b; --border:#e2e8f0;
  --primary:#2563eb; --primary-600:#1d4ed8; --success:#16a34a; --shadow:0 10px 30px rgba(2,6,23,.06);
  --radius:14px;
}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans";
}
.container{max-width:920px;margin:0 auto;padding:24px 16px;}
.nav{display:flex;gap:.75rem;justify-content:space-between;align-items:center;margin-bottom:12px}
.link{color:var(--primary);text-decoration:none}
.link:hover{text-decoration:underline}

/* Headings & Card */
h1{font-size:1.55rem;margin:0 0 .35rem}
.form-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;box-shadow:var(--shadow);}

/* Progress */
.progress{height:10px;border-radius:999px;background:#eef2ff;border:1px solid var(--border);overflow:hidden}
.progress > div{height:100%;width:var(--pct,0%);background:var(--primary);transition:width .25s ease}
.progress-sm{height:8px}

/* Frage/Item (Wizard) */
.q{margin:1rem 0}
.q .qt{font-weight:700;font-size:1.08rem;margin-bottom:.6rem}
.help{color:var(--muted);font-size:.92rem}

/* Inputs (Text/Select/Textarea) */
input[type=text],input[type=number],select,textarea{
  width:min(720px,100%);padding:.58rem .65rem;border:1px solid #d9d9d9;border-radius:12px;background:#fff
}
textarea{resize:vertical}
input[type=text]:focus,input[type=number]:focus,select:focus,textarea:focus{
  outline:3px solid #bfdbfe;outline-offset:2px;border-color:#93c5fd
}

/* Chips (für Radios) */
.chips{display:grid;gap:.6rem}
.chips--n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.chips--n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.chips--n4{grid-template-columns:repeat(4,minmax(0,1fr))}
.chips--n5{grid-template-columns:repeat(5,minmax(0,1fr))}
.chips--n6{grid-template-columns:repeat(6,minmax(0,1fr))}
.chips--n7{grid-template-columns:repeat(7,minmax(0,1fr))}
.chip-input{position:absolute;left:-9999px;opacity:0;pointer-events:none}
.chip{
  display:flex;align-items:center;justify-content:center;text-align:center;
  border:1px solid var(--border);border-radius:9999px;padding:.65rem .95rem;background:#fff;box-shadow:var(--shadow);
  cursor:pointer;user-select:none;min-height:48px
}
.chip-input:checked + .chip{border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.15);background:#f8fbff}
.chip:hover{border-color:var(--primary-600)}

/* Fallback für altes Radio-Markup */
.scale{display:grid;gap:.6rem}
.scale--n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.scale--n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.scale--n4{grid-template-columns:repeat(4,minmax(0,1fr))}
.scale--n5{grid-template-columns:repeat(5,minmax(0,1fr))}
.scale--n6{grid-template-columns:repeat(6,minmax(0,1fr))}
.scale--n7{grid-template-columns:repeat(7,minmax(0,1fr))}
.choice{display:contents}
.choice input[type=radio]{position:absolute;left:-9999px;opacity:0;pointer-events:none}
.choice input[type=radio] + label{
  display:flex;align-items:center;justify-content:center;text-align:center;
  border:1px solid var(--border);border-radius:9999px;padding:.65rem .95rem;background:#fff;box-shadow:var(--shadow);
  cursor:pointer;min-height:48px
}
.choice input[type=radio]:checked + label{border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.15);background:#f8fbff}
.choice label:hover{border-color:var(--primary-600)}
.choice label .val{display:none}
.choice label .lab{color:inherit;font-size:1rem;margin:0}

/* Actions (Wizard Footer) */
.actions{
  position:sticky;bottom:0;background:#fff;border:1px solid var(--border);border-radius:14px;
  padding:.6rem;display:flex;gap:.5rem;box-shadow:var(--shadow);margin-top:1rem
}
.button{
  border:0;border-radius:12px;padding:.6rem .95rem;background:var(--primary);
  color:#fff;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center
}
.button.success{background:#16a34a}
.button:focus-visible{outline:3px solid #93c5fd;outline-offset:2px}

/* --------- Liste "Meine Fragebögen" --------- */
.forms{list-style:none;margin:.75rem 0 0 0;padding:0;display:grid;gap:.75rem;max-width:680px}
.form-item{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  background:#fff;border:1px solid var(--border);border-radius:14px;padding:.75rem 1rem;box-shadow:var(--shadow)
}
.form-item .left{flex:1}
.form-item .title{font-weight:700}
.form-item .meta{color:var(--muted);font-size:.92rem;margin:.15rem 0 .35rem}
.form-item .right{align-self:center}