/* Gemeinsame Stile für alle Abruf-Quizze · Stadtwerke Lindenau IT-Security
   House-Style: Inter, Navy #1A2B4A, Blocksatz-Anmutung. Läuft offline. */
:root{
  --navy:#1A2B4A; --navy2:#27406b; --ink:#1b2430; --muted:#5b6673;
  --line:#d9dee6; --bg:#f4f6f9; --card:#ffffff;
  --ok:#1f7a4d; --okbg:#e7f4ec; --bad:#b23a2e; --badbg:#f8ebe9;
  --warn:#8a6d1f; --warnbg:#f6f0db; --gold:#b8922f;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  line-height:1.55; padding:24px 16px 64px;
}
.wrap{max-width:760px; margin:0 auto}
.wrap.breit{max-width:900px}

/* Kopf */
header.kopf{border-bottom:3px solid var(--navy); padding-bottom:14px; margin-bottom:22px}
.krume{font-size:.8rem; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); font-weight:600}
.krume a{color:var(--navy2); text-decoration:none}
h1{font-size:1.6rem; margin:.25rem 0 .35rem; color:var(--navy); letter-spacing:-.01em}
.unter{color:var(--muted); font-size:.98rem; margin:0}

/* Hinweiskästen */
.hinweis{background:var(--warnbg); border:1px solid #e6d9ad; color:#5f4e16;
  border-radius:10px; padding:12px 14px; margin:18px 0; font-size:.92rem}
.hinweis.info{background:#eef2f8; border-color:#cfdbec; color:var(--navy2)}
.hinweis b{color:inherit}

/* Fortschritt */
.fortschritt{font-size:.85rem; color:var(--muted); margin:6px 0 14px; font-weight:600}

/* Karten / Fragen */
.karte{background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:18px 18px 16px; margin:0 0 16px; box-shadow:0 1px 2px rgba(20,30,50,.04)}
.tag{display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.03em;
  color:var(--navy2); background:#eef2f8; border-radius:6px; padding:2px 8px; margin-bottom:9px}
.frage{font-weight:600; font-size:1.06rem; margin:0 0 12px; text-align:justify}
.fnr{color:var(--navy2); font-weight:700; margin-right:.4em}

/* Optionen (MC / Wahr-Falsch) */
.opts{display:flex; flex-direction:column; gap:9px}
.opts.zwei{flex-direction:row; flex-wrap:wrap}
.opts.zwei .opt{flex:1 1 calc(50% - 5px); min-width:150px; justify-content:center; text-align:center}
.opt{display:flex; align-items:flex-start; gap:10px; text-align:left;
  border:1.5px solid var(--line); background:#fff; color:var(--ink);
  border-radius:10px; padding:11px 13px; font-size:.98rem; cursor:pointer;
  transition:border-color .12s, background .12s; font-family:inherit; line-height:1.4}
.opt .buchst{font-weight:700; color:var(--navy2); flex:0 0 auto}
.opt:hover:not(:disabled){border-color:var(--navy2)}
.opt:disabled{cursor:default}
.opt.gewaehlt{border-color:var(--navy2)}
.opt.richtig{background:var(--okbg); border-color:var(--ok); color:var(--ok)}
.opt.richtig .buchst{color:var(--ok)}
.opt.falsch{background:var(--badbg); border-color:var(--bad); color:var(--bad)}
.opt.falsch .buchst{color:var(--bad)}

/* Erklärung */
.erkl{margin:12px 0 0; padding:11px 13px; border-radius:9px; font-size:.93rem;
  background:#f1f4f8; border-left:3px solid var(--navy2); text-align:justify; display:none}
.erkl.sichtbar{display:block}
.erkl.r{background:var(--okbg); border-left-color:var(--ok)}
.erkl.f{background:var(--badbg); border-left-color:var(--bad)}
.erkl b{color:var(--navy)}

/* Lückentext */
.lueck{line-height:2.1; font-size:1.04rem; text-align:justify}
.lueck input{border:0; border-bottom:2px solid var(--navy2); background:#f7f9fc;
  font-family:inherit; font-size:1rem; font-weight:600; color:var(--navy);
  padding:2px 6px; min-width:140px; text-align:center; border-radius:4px 4px 0 0}
.lueck input:focus{outline:none; background:#eef2f8}
.lueck input.ok{border-color:var(--ok); background:var(--okbg); color:var(--ok)}
.lueck input.nein{border-color:var(--bad); background:var(--badbg); color:var(--bad)}
.wortvorrat{background:#eef2f8; border-radius:9px; padding:10px 13px; font-size:.9rem;
  color:var(--navy2); margin:4px 0 14px}
.wortvorrat b{color:var(--navy)}

/* Zuordnen (Karte -> Topf) */
.zuordnen{display:flex; flex-direction:column; gap:14px}
.poolzeile{display:flex; gap:8px; flex-wrap:wrap}
.chip{border:1.5px solid var(--line); background:#fff; border-radius:9px; padding:8px 12px;
  font-size:.95rem; cursor:pointer; font-family:inherit; transition:border-color .12s, background .12s; line-height:1.35}
.chip:hover:not(.platziert){border-color:var(--navy2)}
.chip.aktiv{border-color:var(--navy2); background:#eef2f8}
.chip.platziert{opacity:.45; cursor:default}
.toepfe{display:flex; gap:10px; flex-wrap:wrap}
.topf{flex:1 1 180px; min-width:150px; border:1.5px dashed var(--line); border-radius:11px;
  padding:10px; min-height:70px; background:#fafbfc}
.topf.ziel{border-color:var(--navy2); background:#eef2f8}
.topf .topftitel{font-weight:700; color:var(--navy); font-size:.9rem; margin-bottom:7px; text-align:center}
.topf .drin{display:flex; flex-direction:column; gap:6px}
.topf .gesetzt{border-radius:8px; padding:7px 10px; font-size:.9rem; display:flex; justify-content:space-between; gap:8px; align-items:center}
.topf .gesetzt.r{background:var(--okbg); border:1px solid #bfe3cd}
.topf .gesetzt.f{background:var(--badbg); border:1px solid #e9c6c1}
.topf .gesetzt .x{cursor:pointer; color:var(--muted); font-weight:700}

/* Sortieren (Reihenfolge) */
.sortier{display:flex; flex-direction:column; gap:8px}
.sitem{display:flex; align-items:center; gap:10px; border:1.5px solid var(--line);
  background:#fff; border-radius:10px; padding:10px 12px}
.sitem .pos{font-weight:800; color:var(--navy2); width:24px; text-align:center; flex:0 0 auto}
.sitem .txt{flex:1; font-size:.96rem; line-height:1.35}
.sitem .pfeile{display:flex; flex-direction:column; gap:2px; flex:0 0 auto}
.sitem .pfeile button{border:0; background:#eef2f8; color:var(--navy2); border-radius:5px;
  width:28px; height:20px; cursor:pointer; font-weight:800; font-family:inherit; line-height:1; font-size:.8rem}
.sitem.r{background:var(--okbg); border-color:#bfe3cd}
.sitem.f{background:var(--badbg); border-color:#e9c6c1}

/* Code-Review (Zeilen anklicken) */
.codeblock{background:#0f1b2d; border-radius:11px; padding:14px 8px; overflow-x:auto; margin:4px 0 10px}
.codezeile{display:flex; gap:12px; font-family:"Latin Modern Mono",ui-monospace,Menlo,Consolas,monospace;
  font-size:.86rem; padding:2px 10px; cursor:pointer; border-radius:5px; color:#e6ecf5; white-space:pre}
.codezeile:hover{background:#1b2b44}
.codezeile .lnr{color:#64748b; width:26px; text-align:right; flex:0 0 auto; user-select:none}
.codezeile .code{white-space:pre}
.codezeile.markiert{background:#3a2a1a}
.codezeile.markiert .lnr{color:#d6a94e}
.codezeile.treffer{background:#14361f}
.codezeile.treffer .lnr{color:#6ee29e}
.codezeile.verpasst{background:#3a1a16}
.codezeile.verpasst .lnr{color:#e58b7e}

/* Predict / Aufdecken */
.predict{display:flex; flex-direction:column; gap:10px}
.prow{border:1px solid var(--line); border-radius:10px; padding:11px 13px; background:#fff}
.prow .pfrage{font-weight:600; margin-bottom:8px; font-size:.98rem}
.aufdeck{background:var(--navy); color:#fff; border:0; border-radius:9px; padding:10px 18px;
  font-weight:700; font-family:inherit; cursor:pointer; font-size:.95rem; margin-top:4px}

/* Buttons generisch */
.btnzeile{display:flex; gap:10px; justify-content:center; margin-top:16px; flex-wrap:wrap}
.btn{border:0; background:var(--navy); color:#fff; font-weight:700; font-family:inherit;
  border-radius:9px; padding:10px 18px; font-size:.95rem; cursor:pointer}
.btn.hell{background:#fff; color:var(--navy); border:1.5px solid var(--line)}
.btn.ghost{background:transparent; border:1.5px solid rgba(255,255,255,.6); color:#fff}
.btn:disabled{opacity:.5; cursor:default}

/* Ergebnisbanner */
.ergebnis{background:var(--navy); color:#fff; border-radius:14px; padding:22px;
  text-align:center; margin-top:6px; display:none}
.ergebnis.sichtbar{display:block}
.ergebnis .score{font-size:2.3rem; font-weight:800; letter-spacing:-.02em}
.ergebnis .txt{opacity:.9; margin-top:4px}

footer{color:var(--muted); font-size:.8rem; text-align:center; margin-top:30px}
.auswertleiste{position:sticky; bottom:0; background:var(--bg);
  padding:12px 0 4px; margin-top:8px; display:flex; gap:10px; justify-content:center}
@media (max-width:480px){
  h1{font-size:1.35rem}
  .opts.zwei .opt{flex:1 1 100%}
  .toepfe{flex-direction:column}
}