:root{
  --bg:#0b1024;
  --card:#0f172a;
  --edge:#1f2a44;
  --muted:#9aa4b2;
  --text:#e6eaf0;
  --accent:#22c55e;
  --warn:#ef4444;
  --brand:#38bdf8;
}

/* Globale Skalierung (~+22%) */
html { font-size: 20px; } /* Standard ist ~16px */

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: radial-gradient(1200px 600px at 10% 0%, #0c1440 0%, var(--bg) 55%) fixed;
  color:var(--text);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial;
  line-height: 1.4;
}

.app{max-width: 1000px; margin:0 auto; padding: 20px}

.topbar{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;margin:12px 0 18px;
}
.brand{font-weight:700;color:var(--brand);letter-spacing:.3px; font-size:1.1rem}
.tools{display:flex;gap:10px;flex-wrap:wrap}

select,button,input{
  background:#0d152f;border:1px solid var(--edge);color:var(--text);
  padding:12px 14px;border-radius:14px;outline:none;
  font-size:1rem;
}
select{min-width:260px}
.btn{cursor:pointer;transition:.15s ease}
.btn:hover{transform:translateY(-1px)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.primary{background:#172036;border-color:#2b3a5c}
.warn{background:#2a1414;border-color:#4a2323}

.card{
  background: rgba(15,23,42,.9);
  border:1px solid var(--edge);
  border-radius:20px;
  padding:22px;
  box-shadow: 0 10px 30px rgba(0,0,0,.3);
}
.meta{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.pill{
  padding:8px 12px;border-radius:999px;
  background:#0c1734;border:1px solid var(--edge);color:var(--muted);
  font-size:.95rem;
}
.muted{color:var(--muted)}
.small{font-size:.95rem}
.question{font-size:1.35rem;margin:10px 0 14px}

.answers{display:grid;gap:12px;margin:10px 0 16px}
.answers label{
  display:flex;gap:12px;align-items:flex-start;cursor:pointer;
  background:#0b142e;border:1px solid var(--edge);
  border-radius:14px;padding:12px;
  font-size:1.05rem;
}
.answers input{margin-top:4px; transform: scale(1.15)}

.actions{display:flex;gap:10px;flex-wrap:wrap}

.feedback{margin-top:10px;padding:10px 12px;border-radius:12px; font-size:1rem}
.feedback.ok{background:#112418;border:1px solid #2a5a3d;color:#b6f1c9}
.feedback.bad{background:#2a1515;border:1px solid #5a2a2a;color:#f2b6b6}
.hidden{display:none}

.progress{height:12px;border-radius:999px;background:#0a1226;margin-top:14px;overflow:hidden}
.bar{height:100%;background:linear-gradient(90deg,#22c55e,#06b6d4);transition:width .2s ease}

.foot{margin:14px 4px; font-size:.95rem}

/* Modal */
.modal{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.55);backdrop-filter: blur(3px);
}
.modal-card{
  width:min(560px,92vw);background:rgba(15,23,42,.98);border:1px solid var(--edge);
  border-radius:18px;padding:22px;box-shadow:0 10px 26px rgba(0,0,0,.35)
}
.modal-card h2{margin:0 0 8px; font-size:1.4rem}
.modal-card p{margin:0 0 14px;color:var(--muted); font-size:1rem}
.modal-card input{width:100%;margin-top:6px; font-size:1rem}
.modal-actions{display:flex;justify-content:flex-end;margin-top:14px}