:root{
  --bg:#0a0a0a; --card:#101114; --card2:#12151a; --border:#1f2530;
  --fg:#e9f1ff; --muted:#9bb0c5; --accent:#39ff14; --accent2:#0ef; --err:#ef5350; --ok:#2ecc71;
  --btn:#1f6feb; --btnh:#1a5acc; --chip:#0f1720;
}

/* Smooth anchor scroll */
html{scroll-behavior:smooth}
#quiz, #result { scroll-margin-top: 80px; }

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:radial-gradient(1200px 500px at 20% -10%,#0d1721 0,#0a0a0a 40%), var(--bg);
  color:var(--fg);
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif
}

/* LINKS: jetzt grau statt hellblau */
a{
  color: var(--muted);
  text-decoration: none;
  transition: color .15s ease, opacity .15s ease;
}
a:hover,
a:focus{
  color: var(--fg);
  text-decoration: underline;
}
a:visited{ color:#8aa0b6; }
a:active{
  color: var(--fg);
  text-decoration: underline;
}

header{border-bottom:1px solid var(--border); background:linear-gradient(180deg,#0d1117,#0a0a0a)}
.container{max-width:1100px;margin:0 auto;padding:16px}
h1{margin:0;font-size:22px;display:flex;gap:8px;align-items:center}
h2{margin:0 0 10px 0;font-size:20px}
h3{margin:0 0 8px 0;font-size:17px}

/* Fragenbilder zentrieren (doppelt abgesichert) */
.card .question-img,
.question-img{
  display:block; margin:12px auto; max-width:100%; height:auto; float:none;
  border-radius:12px; border:1px solid #1f2733;
}

/* === Cards: softer Glow + Hover-Lift === */
.card{
  position:relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)),
    var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  box-shadow:
    0 10px 30px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.03);
  overflow:hidden;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.card::before{
  content:"";
  position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:
    radial-gradient(600px 220px at -10% -20%, rgba(57,255,20,.06), transparent 60%),
    radial-gradient(420px 180px at 120% -10%, rgba(14,239,255,.05), transparent 55%);
  mix-blend-mode: screen;
}
.card:hover{ transform:translateY(-1px); box-shadow:0 12px 34px rgba(0,0,0,.45); }
.card.alt{
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)),
    var(--card2);
}

/* Struktur & Badges */
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.badge{
  display:inline-flex;gap:6px;align-items:center;background:var(--chip);
  border:1px solid var(--border); padding:4px 10px; border-radius:999px;
  color:var(--muted); font-size:12px
}
.muted{color:var(--muted)}

/* Buttons */
button{
  background:var(--btn);
  color:#fff;
  border:none;
  padding:10px 14px;
  border-radius:10px;
  cursor:pointer;
  font-weight:600;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease;
  will-change: transform;
}
button:hover{background:var(--btnh)}
button:active{ transform:translateY(1px); }
button:focus-visible{ outline:2px solid rgba(14,239,255,.5); outline-offset:2px; }

.btn-ghost{
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  border:1px solid var(--border);
  color:var(--fg);
}
.btn-ghost:hover{ border-color:#2b3240; }

.btn-exit{
  background:#c80f0f; color:#fff; border:none; border-radius:10px;
  padding:10px 14px; font-weight:800; cursor:pointer;
}
.btn-exit:hover{ filter:brightness(.95) }

/* Inputs */
select,input[type=text],input[type=file],input[type=number]{
  width:100%;
  background:#0d1218;
  color:#e9f1ff;
  border:1px solid #1f2733;
  padding:10px 12px;
  border-radius:10px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
select:focus, input:focus{
  border-color:#2b3240;
  box-shadow:0 0 0 2px rgba(14,239,255,.15);
}

.grid{display:grid; gap:16px}
.layout{display:grid; gap:16px; grid-template-columns: 2fr 1fr}
@media (max-width: 900px){ .layout{grid-template-columns:1fr} }

/* Flash/Alerts */
.flash{
  margin:8px 0; padding:12px 14px; border-radius:12px;
  background:#0b0f14; border:1px solid #1e2a35; white-space:pre-line
}
.flash.ok{border-color:var(--ok)}
.flash.err{border-color:var(--err)}

/* Progress */
.progress{height:10px;background:#10151d;border:1px solid #1f2733;border-radius:999px;overflow:hidden}
.bar{height:100%;background:linear-gradient(90deg,var(--accent),#9cff44);width:0%}

/* Answers */
.answers{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width: 700px){ .answers{grid-template-columns:1fr} }
.answers button{
  text-align:left; background:#0e1420; border:1px solid #1e293b;
}
.answers button:hover{ border-color:#334155; transform:translateY(-1px); }
.answers button.disabled{opacity:.35; pointer-events:none}

/* Toast */
.toast{
  position:fixed;right:16px;bottom:16px;background:#0e1420;border:1px solid #1f2733;
  color:#fff;padding:10px 12px;border-radius:12px;box-shadow:0 6px 12px rgba(0,0,0,.4)
}

/* Table */
.table{width:100%; border-collapse:collapse}
.table th,.table td{border-bottom:1px solid var(--border); padding:8px 6px; text-align:left}

/* Avatars */
.avatar{height:28px;width:28px;border-radius:50%;object-fit:cover;border:1px solid #233143}

/* Chips/Helpers */
.chips{display:flex;gap:8px;flex-wrap:wrap}
.small{font-size:12px}
hr.sep{height:1px;border:none;background:var(--border);margin:8px 0}

/* Collapsibles */
.card details { display:block; }
.card details > summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; gap:8px;
  font-weight:700; font-size:18px; padding:4px 0 8px 0;
}
.card details > summary::-webkit-details-marker{ display:none; }
.card details[open] > summary { opacity:0.9; }
.summary-subtle { font-size:12px; color:var(--muted); font-weight:400; margin-left:8px; }

/* Joker Buttons: grün aktiv, grau wenn verbraucht */
#jokerForm button{
  background: linear-gradient(180deg, #28a745, #218838);
  border: 1px solid #1e7e34;
  color: #fff;
  font-weight: 700;
}
#jokerForm button:hover{ filter: brightness(1.08); }
#jokerForm button:disabled,
#jokerForm button.disabled{
  background:#3a3f44; border-color:#2f3439; color:#c9d1d9; opacity:0.6; cursor:not-allowed;
}

/* WWM Ladder (deine Farben beibehalten) */
.wwm-ladder{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.wwm-ladder .step{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;border-radius:10px;font-weight:700}
.wwm-ladder .step.future{background:#e6f0ff;color:#0a3d91}
.wwm-ladder .step.done{background:#dff7e3;color:#0a5b2a}
.wwm-ladder .step.current{background:#fff4cc;color:#7a5a00}
.wwm-ladder .step .no{opacity:.85}
.wwm-ladder .step .safe{background:#ffd6ea;color:#b30059;padding:2px 8px;border-radius:999px;font-size:12px;line-height:1;display:inline-flex;gap:6px;align-items:center;margin-left:8px}
.wwm-ladder .reward{font-weight:700;display:inline-flex;gap:10px;align-items:center}
.wwm-ladder .reward .coins{opacity:.85}

/* Banner (dein Original beibehalten) */
.banner-info{background:#e6f0ff;color:#0a3d91;border-left:4px solid #0a3d91;padding:10px 12px;border-radius:10px;margin:10px 0 14px;font-weight:600}
.banner-info .small{font-weight:400; opacity:.75; margin-left:8px}
.banner-live{background:#dff7e3;color:#0a5b2a;border-left:4px solid #0a5b2a;padding:10px 12px;border-radius:10px;margin:10px 0 14px;font-weight:600}
.banner-live .small{font-weight:400; opacity:.75; margin-left:8px}
.banner-ended{background:#ffe6e6;color:#8b0000;border-left:4px solid #8b0000;padding:10px 12px;border-radius:10px;margin:10px 0 14px;font-weight:600}
.banner-ended .small{font-weight:400; opacity:.75; margin-left:8px}