/* ═══════════════════════════════════════════════
   SchulUmfrage Survey – Design-System: birkensen.com
   ═══════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#0f1117;--surface:#161b22;--s2:#1c2333;--s3:#21262d;
  --border:#30363d;--border-m:#21262d;
  --text:#e6edf3;--muted:#8b949e;--dim:#6e7681;
  --blue:#388bfd;--blue-d:#1f6feb;
  --green:#3fb950;--green-d:#238636;
  --amber:#d29922;
  --red:#f85149;
  --r:6px;--rl:10px;
  --sans:'Segoe UI',system-ui,-apple-system,sans-serif;
  --mono:'Cascadia Code','Fira Code','Consolas',monospace;
}

body.light{
  --bg:#f6f8fa;--surface:#ffffff;--s2:#f0f2f5;--s3:#e8eaed;
  --border:#d0d7de;--border-m:#e8eaed;
  --text:#1f2328;--muted:#656d76;--dim:#909499;
  --blue:#0969da;--blue-d:#0550ae;
  --green:#1a7f37;--green-d:#116329;
  --amber:#9a6700;--red:#cf222e;
}

body{
  font-family:var(--sans);background:var(--bg);color:var(--text);
  font-size:14px;line-height:1.6;padding:24px 16px 60px;
  min-height:100vh;
}
body.light{background:var(--bg)}

.survey-wrap{max-width:660px;margin:0 auto}

/* ── HEADER ── */
.survey-header{
  background:var(--surface);border-radius:var(--rl);
  padding:24px;margin-bottom:16px;border:1px solid var(--border);
}
.survey-header h1{font-size:1.3rem;font-weight:800;margin-bottom:10px}
.survey-intro{color:var(--muted);font-size:.88rem;margin-bottom:10px}
.survey-anon{font-size:.78rem;color:var(--green);font-weight:600}

/* ── QUESTION BLOCK ── */
.question-block{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--rl);padding:20px;margin-bottom:12px;
  transition:border-color .15s;
}
.question-block.has-error{border-color:var(--red)}

.q-label{
  font-weight:700;font-size:.9rem;margin-bottom:12px;
  display:flex;gap:10px;align-items:flex-start;
}
.q-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;
  background:var(--blue-d);color:#fff;
  font-size:.75rem;font-weight:700;flex-shrink:0;margin-top:2px;
  font-family:var(--mono);
}
.q-req{color:var(--red);margin-left:2px}
.q-error{color:var(--red);font-size:.8rem;margin-bottom:8px}

/* ── INPUTS ── */
.input-text,.input-textarea{
  width:100%;padding:8px 11px;background:var(--s3);
  border:1px solid var(--border);border-radius:var(--r);
  font-size:.875rem;color:var(--text);font-family:var(--sans);
  transition:border-color .15s,box-shadow .15s;
}
.input-text:focus,.input-textarea:focus{
  outline:none;border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(56,139,253,.15);
}
.input-textarea{resize:vertical;min-height:80px}

/* ── CHOICE ── */
.choice-list{display:flex;flex-direction:column;gap:7px}
.choice-item{
  display:flex;align-items:center;gap:12px;
  padding:9px 13px;border:1px solid var(--border);
  border-radius:var(--r);cursor:pointer;background:var(--s3);
  transition:all .15s;
}
.choice-item:hover{border-color:var(--blue-d);background:rgba(56,139,253,.06)}
.choice-item input{width:15px;height:15px;accent-color:var(--blue);flex-shrink:0}
.choice-item input:checked~span{color:var(--blue);font-weight:600}

/* ── RATING ── */
.rating-wrap{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rating-label-min,.rating-label-max{font-size:.78rem;color:var(--muted)}
.rating-buttons{display:flex;flex-wrap:wrap;gap:6px}
.rating-btn{
  width:36px;height:36px;border:1px solid var(--border);
  border-radius:var(--r);cursor:pointer;font-size:.88rem;font-weight:600;
  background:var(--s3);color:var(--text);transition:all .15s;font-family:var(--mono);
}
.rating-btn:hover{border-color:var(--blue-d);color:var(--blue)}
.rating-btn.selected{background:var(--blue-d);color:#fff;border-color:var(--blue-d)}

/* ── GRADE ── */
.grade-wrap{display:flex;flex-wrap:wrap;gap:8px}
.grade-item{
  display:flex;flex-direction:column;align-items:center;
  padding:10px 12px;border:1px solid var(--border);
  border-radius:var(--r);cursor:pointer;transition:all .15s;
  min-width:80px;background:var(--s3);
}
.grade-item:hover{border-color:var(--blue-d)}
.grade-item.selected{border-color:var(--blue);background:rgba(56,139,253,.1)}
.grade-item input{display:none}
.grade-num{font-size:1.4rem;font-weight:800;color:var(--blue);font-family:var(--mono)}
.grade-text{font-size:.7rem;color:var(--muted);text-align:center;margin-top:2px}

/* ── SUBMIT ── */
.submit-area{margin-top:20px;text-align:center}
.btn-submit{
  display:inline-block;padding:10px 32px;
  background:var(--blue-d);color:#fff;
  border:none;border-radius:var(--r);font-size:.9rem;
  font-weight:700;cursor:pointer;transition:background .15s;
  width:100%;font-family:var(--sans);
}
.btn-submit:hover{background:var(--blue)}
.submit-note{margin-top:8px;font-size:.75rem;color:var(--dim)}

/* ── DONE MESSAGE ── */
.survey-done{
  background:var(--surface);border-radius:var(--rl);
  padding:48px 24px;text-align:center;border:1px solid var(--border);
}
.survey-done h2{font-size:1.4rem;font-weight:800;margin-bottom:12px;color:var(--green)}
.survey-done p{color:var(--muted);font-size:.88rem}
.survey-done strong{color:var(--text)}

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:var(--dim)}

@media(max-width:480px){
  .grade-wrap{gap:6px}
  .grade-item{min-width:calc(33% - 4px);padding:8px 6px}
  .rating-btn{width:32px;height:32px}
}