/* AI Implemented · Python-Einstufungsquiz (Leinwand + Handy)
   Baut auf assets/ai.css auf (Tokens, Buttons, Formulare).
   Antwortfarben validiert (dark, CVD ΔE ≥ 8) + Formen als zweite Kodierung. */
:root{
  --q-a:#d9675a; --q-b:#4f86e0; --q-c:#b8891f; --q-d:#239c6e; --q-ink:#0b0d12;
}
[hidden]{display:none!important}
body.quiz{min-height:100dvh}
.q-top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;padding:12px var(--gutter);
  background:rgba(9,10,15,.82);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.q-top .brand{margin-right:0}
.q-top .q-meta{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.q-chip{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--line2);border-radius:99px;padding:6px 12px;color:var(--soft);white-space:nowrap}
.q-chip b{color:var(--accent);font-weight:500}
.q-main{max-width:1240px;margin:0 auto;padding:clamp(24px,4vw,48px) var(--gutter) 80px;position:relative;z-index:1}
.q-screen[hidden]{display:none!important}
.q-center{max-width:520px;margin:0 auto}
.q-panel{padding:28px}
.q-h{font-size:clamp(28px,4vw,48px);font-weight:600;letter-spacing:-.04em;line-height:1.05;margin:16px 0 14px}
.q-h em{color:var(--accent)}
.q-sub{color:var(--body);font-size:16px}
.q-err{display:none;margin-top:14px;padding:12px 16px;border-radius:14px;border:1px solid rgba(239,154,143,.4);background:rgba(239,154,143,.08);color:var(--danger);font-size:14px}
.q-err.show{display:block}
.q-pininput{font-family:var(--mono)!important;font-size:28px!important;letter-spacing:.3em;text-align:center}

/* Antwort-Kacheln */
.q-answers{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.q-ans{position:relative;display:flex;align-items:center;gap:14px;min-height:92px;padding:16px 18px;border-radius:18px;border:0;cursor:pointer;
  color:var(--q-ink);font:600 17px/1.3 var(--font);text-align:left;transition:transform .35s var(--ease),opacity .35s var(--ease),box-shadow .35s var(--ease)}
.q-ans:active{transform:scale(.97)}
.q-ans:focus-visible{outline:3px solid var(--text);outline-offset:3px}
.q-ans .shape{flex-shrink:0;width:34px;height:34px;display:grid;place-items:center;font-size:22px;line-height:1;color:rgba(11,13,18,.82)}
.q-ans .txt{white-space:pre-wrap;word-break:break-word;font-family:var(--font)}
.q-ans .txt.code{font-family:var(--mono);font-size:15px;font-weight:500}
.q-a{background:var(--q-a)} .q-b{background:var(--q-b)} .q-c{background:var(--q-c)} .q-d{background:var(--q-d)}
.q-answers.revealed .q-ans{opacity:.28}
.q-answers.revealed .q-ans.correct{opacity:1;box-shadow:0 0 0 3px var(--bg),0 0 0 6px var(--text)}
.q-answers.revealed .q-ans.correct::after{content:"✓ richtig";position:absolute;top:10px;right:14px;font:600 12px var(--mono);letter-spacing:.06em;color:var(--q-ink)}
.q-answers.locked .q-ans{cursor:default}
.q-answers.locked .q-ans:not(.picked){opacity:.3}
.q-ans.picked{box-shadow:0 0 0 3px var(--bg),0 0 0 6px var(--accent)}
.q-count{position:absolute;right:14px;bottom:10px;font:500 13px var(--mono);color:rgba(11,13,18,.8)}

/* Frage */
.q-qhead{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.q-question{font-size:clamp(22px,3.2vw,40px);font-weight:600;letter-spacing:-.03em;line-height:1.15;margin-bottom:16px}
.q-code{font-family:var(--mono);font-size:clamp(14px,1.6vw,20px);line-height:1.6;background:#07080c;border:1px solid var(--line);border-radius:16px;padding:16px 20px;white-space:pre;overflow-x:auto;color:var(--soft);margin-bottom:22px}
.q-code .k{color:var(--accent)} .q-code .s{color:#e6d3a3} .q-code .n{color:#b9c4ff} .q-code .c{color:var(--dim)}

/* Timer */
.q-timer{position:relative;width:76px;height:76px;flex-shrink:0}
.q-timer svg{width:100%;height:100%;transform:rotate(-90deg)}
.q-timer circle{fill:none;stroke-width:6}
.q-timer .bg{stroke:var(--line2)}
.q-timer .fg{stroke:var(--accent);stroke-linecap:round;transition:stroke-dashoffset .25s linear}
.q-timer.low .fg{stroke:var(--q-a)}
.q-timer span{position:absolute;inset:0;display:grid;place-items:center;font:500 24px var(--mono)}
.q-bar{height:6px;border-radius:6px;background:var(--line);overflow:hidden;margin:6px 0 18px}
.q-bar i{display:block;height:100%;background:var(--accent);transition:width .25s linear}
.q-bar.low i{background:var(--q-a)}

/* Leinwand-Layout */
.q-stage{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start}
.q-side{position:sticky;top:90px}
.q-big-pin{font:500 clamp(54px,9vw,120px)/1 var(--mono);letter-spacing:.08em;color:var(--accent);margin:8px 0 4px}
.q-url{font-family:var(--mono);font-size:clamp(15px,2vw,22px);color:var(--soft)}
.q-players{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.q-player{padding:8px 14px;border-radius:99px;background:rgba(255,255,255,.05);border:1px solid var(--line2);font-weight:500;animation:pop .4s var(--ease)}
.q-player.done{border-color:var(--accent-mid);color:var(--accent)}
.q-stat{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:12px 0;border-bottom:1px solid var(--line)}
.q-stat b{font:500 28px var(--mono);letter-spacing:-.02em}
.q-stat span{color:var(--dim);font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase}

/* Auflösung: Verteilung */
.q-dist{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;align-items:end;height:200px;margin:8px 0 18px}
.q-dist .col{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px;height:100%}
.q-dist .bar{width:100%;border-radius:4px 4px 0 0;min-height:4px;transition:height .6s var(--ease)}
.q-dist .lab{font:500 15px var(--mono);color:var(--soft)}
.q-dist .col.wrong .bar{opacity:.35}
.q-expl{padding:16px 18px;border-left:2px solid var(--accent);background:var(--accent-soft);border-radius:0 14px 14px 0;color:var(--soft);margin-bottom:18px}
.q-lead{list-style:none;display:grid;gap:6px;counter-reset:r}
.q-lead li{counter-increment:r;display:flex;justify-content:space-between;gap:12px;padding:10px 14px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid var(--line)}
.q-lead li::before{content:counter(r);font-family:var(--mono);color:var(--accent);margin-right:10px}
.q-lead li span:first-child{margin-right:auto}
.q-lead li b{font-family:var(--mono);font-weight:500}

/* Handy-Feedback */
.q-feedback{text-align:center;padding:36px 22px}
.q-feedback .icon{width:84px;height:84px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;font-size:40px}
.q-feedback.ok .icon{background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent-mid)}
.q-feedback.no .icon{background:rgba(217,103,90,.12);color:var(--q-a);border:1px solid rgba(217,103,90,.45)}
.q-feedback .pts{font:500 40px var(--mono);margin:8px 0}

/* Podium */
.q-podium{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;align-items:end;max-width:760px;margin:30px auto}
.q-podium .p{text-align:center}
.q-podium .blk{border-radius:16px 16px 0 0;background:linear-gradient(180deg,var(--bg4),var(--bg2));border:1px solid var(--line2);display:grid;place-items:center;font:500 34px var(--mono);color:var(--accent)}
.q-podium .p1 .blk{height:170px} .q-podium .p2 .blk{height:120px} .q-podium .p3 .blk{height:90px}
.q-podium .nm{font-weight:600;font-size:20px;margin-bottom:4px;word-break:break-word}
.q-podium .sc{font-family:var(--mono);color:var(--dim);margin-bottom:10px}

/* Auswertung */
.q-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.q-tile{padding:18px 18px 16px;border-radius:18px;background:linear-gradient(180deg,var(--bg3),var(--bg2));border:1px solid var(--line)}
.q-tile .v{font:500 34px var(--mono);letter-spacing:-.03em;line-height:1}
.q-tile .l{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-top:10px}
.q-tile .s{font-size:12.5px;color:var(--body);margin-top:6px}
.q-hbars{display:grid;gap:12px}
.q-hrow{display:grid;grid-template-columns:200px 1fr 64px;gap:12px;align-items:center;font-size:14.5px}
.q-hrow .track{position:relative;height:16px;border-radius:4px;background:rgba(255,255,255,.04)}
.q-hrow .fill{height:100%;border-radius:0 4px 4px 0;background:var(--accent)}
.q-hrow .thr{position:absolute;top:-4px;bottom:-4px;width:0;border-left:1.5px dashed var(--soft)}
.q-hrow .val{font-family:var(--mono);text-align:right;color:var(--soft)}
.q-hrow .name{color:var(--body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.q-hrow[data-tip]{cursor:default}
.q-table{width:100%;border-collapse:collapse;font-size:14.5px}
.q-table th{font-family:var(--mono);font-weight:400;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);text-align:left;padding:10px 10px;border-bottom:1px solid var(--line2);cursor:pointer;white-space:nowrap}
.q-table td{padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.q-table td.num{font-family:var(--mono);text-align:right}
.q-table th.num{text-align:right}
.q-mini{display:inline-block;width:56px;height:6px;border-radius:3px;background:rgba(255,255,255,.06);vertical-align:middle;margin-left:8px;overflow:hidden}
.q-mini i{display:block;height:100%;background:var(--accent)}
.q-pill{display:inline-block;padding:4px 10px;border-radius:99px;font-size:12.5px;border:1px solid var(--accent-mid);color:var(--accent);background:var(--accent-soft);white-space:nowrap}
.q-tip{position:fixed;z-index:90;pointer-events:none;padding:8px 12px;border-radius:10px;background:var(--bg4);border:1px solid var(--line2);font-size:13px;color:var(--text);box-shadow:0 10px 30px -10px #000;opacity:0;transition:opacity .15s}
.q-sec{margin-top:36px}
.q-sec h3{font-size:20px;margin-bottom:6px}
.q-sec>p.small{margin-bottom:16px}
.q-list{list-style:none;display:grid;gap:8px}
.q-list li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.02)}

@media (max-width:1000px){
  .q-stage{grid-template-columns:1fr}
  .q-side{position:static}
  .q-tiles{grid-template-columns:repeat(2,1fr)}
  .q-hrow{grid-template-columns:120px 1fr 52px}
}
@media (max-width:560px){
  .q-answers{grid-template-columns:1fr}
  .q-ans{min-height:70px;font-size:16px}
  .q-dist{height:150px}
  .q-podium .nm{font-size:15px}
  .q-table .hide-s{display:none}
}
@media print{
  body::before,body::after,.q-top,.no-print{display:none!important}
  body{background:#fff;color:#000}
  .q-tile,.q-table td,.q-table th{color:#000;border-color:#ccc}
}