/* ============================================================
   KiezQuiz — Web-App UI  ·  CI-konforme Umsetzung
   Tokens + Light(Papier)/Dark(Tinte) Theming + App-Komponenten
   Alles unter .kq gescoped, damit es das Design-Canvas nicht stört.
   ============================================================ */

.kq{
  /* Marken-Kernfarben (immer gleich) */
  --signal:#FF5233; --signal-tief:#E23E22;
  --strom:#C6F24E; --himmel:#5AA9FF; --pflaume:#9B7BFF; --bernstein:#F4B53C; --teal:#2BC4B4;
  /* Distrikt-Tönungen (Kartenzellen) */
  --d1:#FF5233; --d2:#C6F24E; --d3:#5AA9FF; --d4:#9B7BFF;
  --d5:#F4B53C; --d6:#2BC4B4; --d7:#FF8A5B; --d8:#E36BA6;
  /* Type */
  --display:"Bricolage Grotesque", system-ui, sans-serif;
  --text:"Hanken Grotesk", system-ui, sans-serif;
  --mono:"Space Mono", ui-monospace, monospace;
  --radius:18px; --radius-s:12px; --radius-xs:9px;

  font-family:var(--text);
  background:var(--bg);
  color:var(--text-1);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  width:100%; height:100%;
  position:relative; overflow:hidden;
}
.kq *{box-sizing:border-box;margin:0;padding:0}

/* ---------- DARK · Tinte ---------- */
.kq[data-theme="dark"]{
  --bg:#0F1118;            /* Tinte */
  --bg-grad:radial-gradient(120% 90% at 82% -8%, #1b1f2e 0%, #0F1118 56%);
  --surface:#171A24;       /* Nacht */
  --surface-2:#252938;     /* Beton */
  --surface-3:#30354a;     /* Beton-2 */
  --line:#363B4F;          /* Linie */
  --line-soft:#23283a;
  --text-1:#FCFBF8;        /* Kreide */
  --text-2:#C5C9D4;        /* Nebel-2 */
  --text-3:#9AA0B0;        /* Nebel */
  --text-4:#5b6072;
  --map-bg:#0c0e15;
  --on-signal:#fff;
  --shadow:0 18px 50px -18px rgba(0,0,0,.7);
}
/* ---------- LIGHT · Papier ---------- */
.kq[data-theme="light"]{
  --bg:#F1ECE0;            /* Papier */
  --bg-grad:radial-gradient(120% 90% at 82% -8%, #fbf8f1 0%, #F1ECE0 60%);
  --surface:#FCFBF8;       /* Kreide */
  --surface-2:#F3EEE2;
  --surface-3:#E7E0D0;     /* Papier-2 */
  --line:#DCD3C0;
  --line-soft:#E7E0D0;
  --text-1:#0F1118;        /* Tinte */
  --text-2:#2b2620;
  --text-3:#7d7666;        /* warm muted */
  --text-4:#a39a86;
  --map-bg:#E9E2D2;
  --on-signal:#fff;
  --shadow:0 16px 40px -20px rgba(60,50,30,.45);
}

/* ---------- Typo basics ---------- */
.kq h1,.kq h2,.kq h3,.kq h4{font-family:var(--display);font-weight:800;letter-spacing:-.025em;line-height:1.02;color:var(--text-1)}
.kq .mono{font-family:var(--mono)}
.kq .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--signal);display:inline-flex;align-items:center;gap:10px}
.kq .eyebrow::before{content:"";width:22px;height:1px;background:var(--signal)}
.kq strong{font-weight:700;color:var(--text-1)}
.kq ::selection{background:var(--signal);color:#fff}

/* ---------- Wordmark / Pin ---------- */
.kq-wm{display:inline-flex;align-items:flex-end;font-family:var(--display);font-weight:800;letter-spacing:-.045em;line-height:.8;color:var(--text-1)}
.kq-wm .pin{height:1.02em;width:auto;color:var(--signal);transform:translateY(.07em);margin:0 -.03em}
.kq-pin{color:var(--signal)}

/* ---------- Buttons ---------- */
.kq-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--text);
  font-weight:700;font-size:15px;border-radius:999px;padding:12px 22px;cursor:pointer;border:1px solid transparent;
  transition:transform .12s ease, background .15s, box-shadow .15s, border-color .15s;white-space:nowrap;line-height:1}
.kq-btn:active{transform:translateY(1px)}
.kq-btn.sig{background:var(--signal);color:var(--on-signal);box-shadow:0 8px 22px -10px var(--signal)}
.kq-btn.sig:hover{background:var(--signal-tief);box-shadow:0 12px 26px -10px var(--signal)}
.kq-btn.ghost{background:transparent;border-color:var(--line);color:var(--text-1)}
.kq-btn.ghost:hover{border-color:var(--text-3);background:color-mix(in srgb, var(--surface-2) 60%, transparent)}
.kq-btn.solid{background:var(--surface-2);color:var(--text-1);border-color:var(--line)}
.kq-btn.solid:hover{background:var(--surface-3)}
.kq-btn.sm{font-size:13px;padding:8px 15px}
.kq-btn .ic{width:17px;height:17px}

/* ---------- Pills / chips ---------- */
.kq-pill{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:12px;letter-spacing:.03em;
  padding:6px 12px;border:1px solid var(--line);border-radius:999px;color:var(--text-2);background:var(--surface)}
.kq-pill .dot{width:8px;height:8px;border-radius:50%}

/* ---------- Stat chips (Serie / Beste / XP) ---------- */
.kq-stats{display:flex;align-items:center;gap:9px}
.kq-stat{display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--line);
  border-radius:999px;padding:7px 14px 7px 10px;line-height:1}
.kq-stat .ic{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:0 0 26px}
.kq-stat .ic svg{width:15px;height:15px}
.kq-stat .v{font-family:var(--display);font-weight:800;font-size:16px;color:var(--text-1);letter-spacing:-.02em}
.kq-stat .l{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);margin-top:1px}
.kq-stat .lv{display:flex;flex-direction:column}

/* ---------- City tabs ---------- */
.kq-cities{display:inline-flex;flex-wrap:wrap;gap:8px;background:transparent;border:none;border-radius:0;padding:0}
.kq-citytab{display:inline-flex;align-items:center;gap:9px;border-radius:999px;padding:8px 16px;cursor:pointer;
  font-family:var(--display);font-weight:700;font-size:14.5px;color:var(--text-2);border:none;transition:.14s;letter-spacing:-.01em;background:transparent}
.kq-citytab .n{font-family:var(--mono);font-size:11px;color:var(--text-4);font-weight:400}
.kq-citytab:hover{color:var(--text-1)}
.kq-citytab.on{background:var(--signal);color:#fff}
.kq-citytab.on .n{color:rgba(255,255,255,.8)}

/* ---------- Mode cards ---------- */
.kq-modes{display:grid;gap:12px}
.kq-mode{display:flex;align-items:center;gap:14px;text-align:left;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-s);padding:14px 16px;cursor:pointer;transition:.15s;position:relative;width:100%}
.kq-mode:hover{border-color:var(--signal);background:var(--surface-2);transform:translateY(-1px)}
.kq-mode.on{border-color:var(--signal);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--signal)}
.kq-mode .mi{width:46px;height:46px;border-radius:12px;flex:0 0 46px;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb, var(--signal) 13%, var(--surface-2));border:1px solid color-mix(in srgb, var(--signal) 26%, transparent)}
.kq-mode .mi svg{width:24px;height:24px}
.kq-mode .mt{font-family:var(--display);font-weight:700;font-size:16px;color:var(--text-1);letter-spacing:-.01em}
.kq-mode .md{font-size:12.5px;color:var(--text-3);margin-top:2px;line-height:1.35}
.kq-mode .arr{margin-left:auto;color:var(--text-4);flex:0 0 auto;transition:.15s}
.kq-mode:hover .arr{color:var(--signal);transform:translateX(2px)}
.kq-mode .badge{margin-left:auto;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--strom);border:1px solid color-mix(in srgb,var(--strom) 40%,transparent);border-radius:999px;padding:3px 8px}

/* ---------- Cards / panels ---------- */
.kq-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.kq-card .kicker{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--signal);margin-bottom:11px;display:flex;align-items:center;justify-content:space-between}

/* ---------- Progress ---------- */
.kq-prog{display:flex;flex-direction:column;gap:11px}
.kq-prog .row{display:grid;grid-template-columns:14px 1fr auto;align-items:center;gap:11px}
.kq-prog .sw{width:11px;height:11px;border-radius:3px}
.kq-prog .nm{font-size:13.5px;color:var(--text-2)}
.kq-prog .bar{grid-column:2 / -1;height:6px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.kq-prog .bar > i{display:block;height:100%;border-radius:99px}
.kq-prog .pct{font-family:var(--mono);font-size:11.5px;color:var(--text-3)}

/* ---------- Stylized district MAP ---------- */
.kq-map{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--map-bg);border:1px solid var(--line);width:100%;height:100%}
.kq-map svg.field{position:absolute;inset:0;width:100%;height:100%;display:block}
.kq-map .cell{stroke:var(--line);stroke-width:.6;transition:.2s;cursor:pointer}
.kq-map .cell:hover{filter:brightness(1.18)}
.kq-map .clabel{font-family:var(--mono);font-size:3.1px;letter-spacing:.04em;fill:var(--text-2);text-anchor:middle;pointer-events:none}
.kq-map .topo{stroke:var(--line);fill:none;opacity:.35}
.kq-map .water{opacity:.9}
/* blinking active pin */
.kq-map .actpin{transform-box:fill-box;transform-origin:center bottom}
.kq-map .pulse{transform-box:fill-box;transform-origin:center;animation:kqpulse 1.8s ease-out infinite}
@keyframes kqpulse{0%{transform:scale(.4);opacity:.55}70%{transform:scale(2.4);opacity:0}100%{opacity:0}}
.kq-map .blink{animation:kqblink 1.1s steps(1,end) infinite}
@keyframes kqblink{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.kq-map .pulse,.kq-map .blink{animation:none}}

/* map overlay controls */
.kq-mapui{position:absolute;pointer-events:none;inset:0}
.kq-zoom{position:absolute;right:14px;bottom:14px;display:flex;flex-direction:column;gap:1px;border-radius:12px;overflow:hidden;
  border:1px solid var(--line);background:var(--surface);pointer-events:auto;box-shadow:var(--shadow)}
.kq-zoom button{width:38px;height:38px;background:var(--surface);color:var(--text-1);border:none;cursor:pointer;font-size:19px;
  display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700}
.kq-zoom button:hover{background:var(--surface-2);color:var(--signal)}
.kq-zoom button+button{border-top:1px solid var(--line)}
.kq-legend{position:absolute;left:14px;bottom:14px;display:flex;flex-wrap:wrap;gap:6px;max-width:62%;pointer-events:none}
.kq-legend .lg{display:inline-flex;align-items:center;gap:6px;background:color-mix(in srgb,var(--surface) 86%,transparent);
  backdrop-filter:blur(4px);border:1px solid var(--line);border-radius:999px;padding:4px 9px;font-family:var(--mono);font-size:10px;color:var(--text-2)}
.kq-legend .lg i{width:8px;height:8px;border-radius:2px}
.kq-maptag{position:absolute;left:14px;top:14px;pointer-events:none}

/* ---------- Quiz options ---------- */
.kq-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kq-opt{display:flex;align-items:center;gap:11px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-s);
  padding:14px 16px;cursor:pointer;transition:.14s;text-align:left;font-family:var(--display);font-weight:700;font-size:16px;color:var(--text-1);width:100%}
.kq-opt .key{font-family:var(--mono);font-weight:700;font-size:12px;color:var(--text-3);width:22px;height:22px;border-radius:6px;
  background:var(--surface-2);display:flex;align-items:center;justify-content:center;flex:0 0 22px}
.kq-opt:hover{border-color:var(--signal);transform:translateY(-1px)}
.kq-opt.correct{border-color:var(--strom);background:color-mix(in srgb,var(--strom) 16%,var(--surface));box-shadow:inset 0 0 0 1px var(--strom)}
.kq-opt.correct .key{background:var(--strom);color:#0F1118}
.kq-opt.wrong{border-color:var(--signal);background:color-mix(in srgb,var(--signal) 14%,var(--surface))}

/* progress dots / bar in quiz */
.kq-qbar{height:7px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.kq-qbar > i{display:block;height:100%;background:var(--strom);border-radius:99px}

/* ---------- Phone frame ---------- */
.kq-phone{position:relative;background:#05060a;border-radius:44px;padding:11px;box-shadow:0 30px 70px -28px rgba(0,0,0,.7), inset 0 0 0 2px #2a2e3a}
.kq-phone .screen{position:relative;border-radius:34px;overflow:hidden;background:var(--bg);width:100%;height:100%}
.kq-phone .notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:122px;height:28px;background:#05060a;border-radius:0 0 16px 16px;z-index:40}
.kq-statusbar{display:flex;justify-content:space-between;align-items:center;padding:11px 22px 4px;font-family:var(--text);font-weight:700;font-size:13px;color:var(--text-1);position:relative;z-index:30}
.kq-statusbar .r{display:flex;gap:6px;align-items:center}

/* ---------- nav / topbar (landing + app) ---------- */
.kq-topbar{display:flex;align-items:center;gap:18px;padding:15px 26px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg) 80%,transparent)}
.kq-navlinks{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:0;background:none;border:none}
.kq-navlinks a{padding:8px 13px;border-radius:999px;font-size:14px;font-weight:600;color:var(--text-3);cursor:pointer;transition:.14s;border:none;box-shadow:none}
.kq-navlinks a + a{border-left:none;border-right:none}
.kq-navlinks a:hover{color:var(--text-1);background:var(--surface)}
.kq-navlinks a.on{color:var(--text-1);background:var(--surface)}

/* tiny icon button */
.kq-iconbtn{width:38px;height:38px;border-radius:11px;border:1px solid var(--line);background:var(--surface);color:var(--text-2);
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.14s;flex:0 0 auto}
.kq-iconbtn:hover{color:var(--signal);border-color:var(--signal)}
.kq-iconbtn svg{width:18px;height:18px}

/* misc utility */
.kq-row{display:flex;align-items:center;gap:10px}
.kq-spread{display:flex;align-items:center;justify-content:space-between;gap:14px}
.kq .muted{color:var(--text-3)}
.kq .topo-bg{position:absolute;inset:0;pointer-events:none;opacity:.5}
.kq-divider{height:1px;background:var(--line)}