:root{
  --brand:#0066cc;          /* Primärfarbe */
  --brand-dark:#0a3fd1;     /* Hover-Farbe */
  --bg:#ffffff;
  --fg:#0f172a;
  --muted:#475569;
  --border:#e2e8f0;
  --chip:#f1f5f9;
  --ok:#15803d;
  --bad:#b91c1c;
  --radius:16px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--fg);
  background: linear-gradient(#f8fafc,#fff);
}

a{ color:inherit; }
.wrap{ max-width:760px; margin:0 auto; padding:0 clamp(48px, 10vw, 64px); }

/* Header im SPEEDCOM-Stil */
header{
  position:sticky; top:0; z-index:10;
  background:#ffffffcc; backdrop-filter: blur(6px);
  border-bottom:1px solid var(--border);
}
.bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px; }
.score{ font-size:13px; color:#64748b; }

/* Cards / Buttons */
.card{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:#fff;
  padding:16px;
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
.btn{
  width:100%;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background:var(--brand); color:#fff;
  padding:12px 14px; border:none; border-radius:14px;
  cursor:pointer; font-weight:800;
}
.btn:hover{ background:var(--brand-dark); }
.btn.secondary{ background:#f1f5f9; color:#0f172a; font-weight:700; }
.btn.secondary:hover{ background:#e2e8f0; }
.btn.inline{ width:auto; }
.btn:disabled{ opacity:.6; cursor:not-allowed; }

.muted{ color:var(--muted); }
.center{ text-align:center; }
.small{ font-size: 13px; color:#64748b; }

.email{
  white-space: pre-wrap; background:#f8fafc; color:#0f172a;
  padding:12px; border-radius:10px; border:1px solid var(--border);
  max-height:44vh; overflow:auto;
}

.chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.chip{ background:var(--chip); color:#334155; padding:6px 10px; border-radius:999px; font-size:12px; }

.row{ display:grid; gap:10px; grid-template-columns:1fr; }
@media(min-width:560px){ .row.two{ grid-template-columns:1fr 1fr; } }

input, textarea{
  width:100%; border:1px solid var(--border); border-radius:12px; padding:12px 12px; font:inherit;
}
textarea{ resize:vertical; }

.footer{ border-top:1px solid var(--border); text-align:center; padding:18px 0; font-size:14px; color:#64748b; }

.progress{ height:10px; background:#f1f5f9; border-radius:999px; overflow:hidden; }
.progress > div{ height:100%; background:var(--brand); width:0%; transition: width .25s; }

.spacer{ height:10px; }
.ok{ color:var(--ok); font-weight:700; }
.bad{ color:var(--bad); font-weight:700; }
.stack{ display:flex; flex-direction:column; gap:12px; }
.hidden{ display:none; }

/* Überschriften */
h1{ margin:0 0 6px; font-size:26px; }
h2{ margin:2px 0 6px; font-size:18px; }

/* Quiz-Karte */
#q-card{ border-radius:20px; }

/* Mobile Wrap-Padding straffen */
@media (max-width: 768px) {
  .wrap {
    padding-left: 6px !important;
    padding-right: 6px !important;
    box-sizing: border-box;
  }
}