:root {
  --bg: #f6f7f9; --card: #ffffff; --fg: #1c2330; --muted: #5d6675; --line: #e1e5ea;
  --accent: #2b6cb0; --accent-fg: #ffffff; --ok: #1f8a4c; --bad: #c0392b; --warn: #b7791f;
  --chip: #eef1f5; --code: #f0f3f7;
  --sev-none:#8a94a3; --sev-low:#4a7bb5; --sev-medium:#c99a1a; --sev-high:#d9731a; --sev-critical:#c0392b;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12161c; --card: #1a2029; --fg: #e6e9ee; --muted: #9aa4b2; --line: #2a323d;
    --accent: #5b9bd5; --accent-fg: #0f141a; --ok: #3ccf7a; --bad: #ef6b5b; --warn: #e0b04a;
    --chip: #232b36; --code: #202833;
  }
}
* { box-sizing: border-box; }
/* hidden-Attribut muss immer gewinnen, auch gegen display:flex/grid einzelner Klassen */
[hidden] { display:none !important; }

html, body { margin: 0; background: var(--bg); color: var(--fg);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
code, .vector { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.top { display:flex; align-items:center; gap:1.5rem; padding:.7rem 1.2rem; border-bottom:1px solid var(--line); background:var(--card); position:sticky; top:0; z-index:5; }
.brand { font-weight:700; letter-spacing:.2px; }
.tabs { display:flex; gap:.3rem; }
.tab { background:transparent; border:1px solid transparent; color:var(--muted); padding:.35rem .8rem; border-radius:6px; cursor:pointer; font:inherit; }
.tab.active { color:var(--fg); border-color:var(--line); background:var(--chip); }
.tab:disabled { opacity:.45; cursor:default; }
.session { margin-left:auto; color:var(--muted); font-variant-numeric: tabular-nums; }

main { max-width: 980px; margin: 0 auto; padding: 1.2rem; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:1.1rem 1.3rem; margin-bottom:1rem; }
.muted { color:var(--muted); }
.hint { color:var(--muted); font-size:.9rem; margin:.6rem 0 0; }
.label { font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:.15rem; }

.cve-meta { display:flex; flex-wrap:wrap; gap:.45rem; align-items:center; margin-bottom:.7rem; }
.cve-id { font-weight:700; font-size:1.15rem; margin-right:.3rem; }
.chip { background:var(--chip); border-radius:999px; padding:.15rem .65rem; font-size:.8rem; color:var(--muted); }
.chip-class { color:var(--fg); }
.desc { margin:0; font-size:1.02rem; white-space:pre-wrap; }

.metrics { display:grid; grid-template-columns: 1fr 1fr; gap:.7rem .9rem; }
@media (max-width: 720px) { .metrics { grid-template-columns: 1fr; } }
.metric { border:1px solid var(--line); border-radius:8px; padding:.6rem .75rem; }
.metric .mname { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.4rem; }
.metric .mname b { font-size:.95rem; }
.metric .mname .mk { color:var(--muted); font-size:.8rem; }
.opts { display:flex; flex-wrap:wrap; gap:.35rem; }
.opt { border:1px solid var(--line); background:transparent; color:var(--fg); border-radius:6px; padding:.3rem .6rem; cursor:pointer; font:inherit; font-size:.88rem; }
.opt:hover { border-color:var(--accent); }
.opt.sel { background:var(--accent); color:var(--accent-fg); border-color:var(--accent); }
.opt small { display:block; color:inherit; opacity:.75; font-size:.72rem; line-height:1.15; }
.metric.locked .opt { cursor:default; }
.metric.locked .opt:not(.sel) { opacity:.45; }

.livebar { display:flex; flex-wrap:wrap; gap:1.2rem; align-items:flex-end; margin-top:1rem; padding-top:.9rem; border-top:1px solid var(--line); }
.vector { background:var(--code); padding:.3rem .55rem; border-radius:6px; font-size:.86rem; display:inline-block; }
.score { font-weight:700; font-size:1.35rem; margin-right:.4rem; }
.sev { font-size:.75rem; font-weight:700; letter-spacing:.05em; padding:.15rem .5rem; border-radius:999px; color:#fff; }
.sev-NONE { background:var(--sev-none); } .sev-LOW { background:var(--sev-low); }
.sev-MEDIUM { background:var(--sev-medium); } .sev-HIGH { background:var(--sev-high); } .sev-CRITICAL { background:var(--sev-critical); }
.actions { margin-left:auto; display:flex; gap:.5rem; }
.actions.center { justify-content:center; margin:0 0 1.5rem; }
button.primary { background:var(--accent); color:var(--accent-fg); border:1px solid var(--accent); border-radius:7px; padding:.5rem 1rem; font:inherit; font-weight:600; cursor:pointer; }
button.primary:disabled { opacity:.45; cursor:not-allowed; }
button.ghost { background:transparent; color:var(--fg); border:1px solid var(--line); border-radius:7px; padding:.5rem 1rem; font:inherit; cursor:pointer; }
button.ghost.small { padding:.25rem .6rem; font-size:.85rem; }

.result-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:1rem; margin-bottom:.8rem; }
.result-head h2, #context h2 { margin:0; font-size:1.15rem; }
.official { text-align:right; }
.official .vector { margin-right:.5rem; }

table.cmp { width:100%; border-collapse:collapse; font-size:.93rem; }
table.cmp th { text-align:left; color:var(--muted); font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; padding:.35rem .5rem; border-bottom:1px solid var(--line); }
table.cmp td { padding:.5rem .5rem; border-bottom:1px solid var(--line); vertical-align:top; }
table.cmp td.v { font-family:ui-monospace,Menlo,monospace; font-weight:700; white-space:nowrap; }
table.cmp tr.ok td.mark { color:var(--ok); }
table.cmp tr.bad td.mark { color:var(--bad); }
table.cmp tr.bad td.v.you { color:var(--bad); }
td.mark { font-weight:700; width:1.5rem; }
.why { margin:0; }
.generic { margin:.2rem 0 0; font-size:.85rem; color:var(--muted); font-style:italic; }
.pitfall { margin:.35rem 0 0; padding:.45rem .6rem; border-left:3px solid var(--warn); background:color-mix(in srgb, var(--warn) 10%, transparent); border-radius:4px; font-size:.9rem; }
.pitfall b { color:var(--warn); }

.prov { margin-top:1rem; padding:.8rem .9rem; border:1px dashed var(--line); border-radius:8px; }
.prov h3 { margin:0 0 .4rem; font-size:.95rem; }
.prov .row { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; margin:.25rem 0; }
.prov .src { min-width:3.2rem; font-weight:700; }
.prov .dm { background:color-mix(in srgb, var(--bad) 18%, transparent); border-radius:3px; padding:0 .15rem; }
.prov ul { margin:.4rem 0 0; padding-left:1.1rem; }

.summary { font-size:1.02rem; margin:.4rem 0 .9rem; }
.ctx-grid { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; margin-bottom:.9rem; }
@media (max-width: 600px) { .ctx-grid { grid-template-columns:1fr; } }
.ctx-box { border:1px solid var(--line); border-radius:8px; padding:.7rem .85rem; }
.big { font-size:1.5rem; font-weight:700; }
.ctx-box.kev-yes { border-color:var(--bad); }
.ctx-text { margin:.4rem 0 .8rem; }
.refs a { display:block; font-size:.85rem; color:var(--accent); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.foot { max-width:980px; margin:0 auto; padding:.8rem 1.2rem 2rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; color:var(--muted); font-size:.85rem; }
.foot input { font:inherit; padding:.25rem .45rem; border:1px solid var(--line); border-radius:6px; background:var(--card); color:var(--fg); }

/* Klassen-Quiz */
.q-toolbar { margin-bottom:.7rem; font-size:.88rem; }
.q-opts { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
@media (max-width:720px){ .q-opts { grid-template-columns:1fr; } }
.q-opt { text-align:left; border:1px solid var(--line); background:transparent; color:var(--fg); border-radius:8px; padding:.55rem .75rem; cursor:pointer; font:inherit; }
.q-opt:hover { border-color:var(--accent); }
.q-opt small { display:block; color:var(--muted); font-size:.75rem; }
.q-opt.right { border-color:var(--ok); background:color-mix(in srgb, var(--ok) 12%, transparent); }
.q-opt.wrong { border-color:var(--bad); background:color-mix(in srgb, var(--bad) 12%, transparent); }
.q-opt:disabled { cursor:default; }
.q-result { margin-top:1rem; padding:.8rem .9rem; border-radius:8px; border:1px solid var(--line); }
.q-result.ok { border-color:var(--ok); } .q-result.bad { border-color:var(--bad); }
.q-result h3 { margin:0 0 .3rem; font-size:1rem; }
.q-result .conf { margin:.4rem 0 0; font-size:.9rem; color:var(--muted); }

/* Spaced Repetition */
.chip-sr { border:1px dashed var(--line); background:transparent; }
.chip-sr:empty { display:none; }
.st-fällig { color:var(--bad); font-weight:600; } .st-wiederholen { color:var(--warn); font-weight:600; }
.st-gefestigt { color:var(--ok); font-weight:600; } .st-neu { color:var(--muted); }
.bar { display:inline-block; height:.5rem; width:6rem; background:var(--chip); border-radius:3px; vertical-align:middle; margin-right:.4rem; overflow:hidden; }
.bar i { display:block; height:100%; background:var(--accent); }

/* Fehlerbilder */
.pat-cards { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
@media (max-width:760px){ .pat-cards { grid-template-columns:1fr; } }
.pat-card { border:1px solid var(--line); border-radius:9px; padding:.8rem .9rem; }
.pat-card h3 { margin:0 0 .3rem; font-size:1rem; }
.pat-card .metrics-hit { font-size:.85rem; color:var(--muted); margin:0 0 .5rem; }
.pat-card .quote { display:flex; align-items:center; gap:.5rem; margin:.4rem 0; }
.pat-card .quote b { font-size:1.2rem; font-variant-numeric:tabular-nums; }
.pat-card p.expl { margin:.4rem 0 0; font-size:.9rem; }
.pat-card.weak { border-color:var(--bad); }
.pat-card.good { border-color:var(--ok); }
.trap-banner { display:flex; justify-content:space-between; align-items:center; gap:1rem; background:var(--chip); border:1px solid var(--line); border-radius:8px; padding:.5rem .8rem; margin-bottom:1rem; font-size:.92rem; }
td .mini { font-size:.82rem; color:var(--muted); display:block; }

/* Export / Import */
.prog-actions { display:flex; gap:.4rem; flex-wrap:wrap; }
button.ghost.danger { color:var(--bad); border-color:color-mix(in srgb, var(--bad) 40%, var(--line)); }
.prog-io { margin:.2rem 0 .8rem; padding:.5rem .7rem; border-radius:7px; border:1px solid var(--line); font-size:.9rem; }
.prog-io.ok { border-color:var(--ok); } .prog-io.bad { border-color:var(--bad); }

/* PWA: Notch/Home-Indikator im Standalone-Modus respektieren */
.top { padding-left:max(1.2rem, env(safe-area-inset-left)); padding-right:max(1.2rem, env(safe-area-inset-right)); }
.foot { padding-bottom:max(2rem, env(safe-area-inset-bottom)); }

/* Fälligkeit + mobile Tabellen */
td.due { white-space:nowrap; }
td.due.due-now { color:var(--bad); font-weight:600; }
td.due .mini { font-weight:400; }
.tablewrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* Filterleiste (Klasse × Stack) */
.filterbar { display:flex; flex-wrap:wrap; gap:.5rem .9rem; align-items:center; margin-bottom:1rem; font-size:.9rem; }
.filterbar label { display:flex; align-items:center; gap:.4rem; color:var(--muted); }
.filterbar select { font:inherit; color:var(--fg); background:var(--card); border:1px solid var(--line); border-radius:6px; padding:.3rem .45rem; max-width:17rem; }
.filterbar select.active { border-color:var(--accent); }
.filterbar .fb-count { font-variant-numeric:tabular-nums; }
.filterbar .fb-count.warn { color:var(--warn); }
.fb-hint { flex-basis:100%; margin:.1rem 0 0; font-size:.85rem; color:var(--warn); }

/* Suche */
.browse-q { width:100%; font:inherit; font-size:1rem; padding:.55rem .7rem; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--fg); }
.browse-q:focus { outline:none; border-color:var(--accent); }
.browse-info { margin:.6rem 0 .4rem; font-size:.88rem; }
.browse-group { margin:.9rem 0 .3rem; font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.browse-list { display:flex; flex-direction:column; gap:.35rem; }
.b-row { display:block; width:100%; text-align:left; font:inherit; color:var(--fg); background:transparent; border:1px solid var(--line); border-radius:8px; padding:.5rem .7rem; cursor:pointer; }
.b-row:hover, .b-row:focus { border-color:var(--accent); outline:none; }
.b-row .b-head { display:flex; flex-wrap:wrap; gap:.2rem .6rem; align-items:baseline; }
.b-row .b-id { font-weight:700; font-family:ui-monospace,Menlo,monospace; }
.b-row .b-cls { color:var(--muted); font-size:.85rem; }
.b-row .b-snip { display:block; margin-top:.2rem; font-size:.85rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.b-more { font-size:.85rem; color:var(--muted); padding:.3rem .2rem; }

/* Kopfzeile: Tabs scrollen in sich statt die ganze Seite zu verbreitern */
.tabs { overflow-x:auto; flex-wrap:nowrap; min-width:0; max-width:100%; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.tabs::-webkit-scrollbar { display:none; }
.tab { white-space:nowrap; flex:0 0 auto; }
@media (max-width: 720px) {
  .top { flex-wrap:wrap; gap:.35rem .8rem; padding-top:.5rem; padding-bottom:.45rem; }
  .brand { flex:1 0 auto; }
  .session { font-size:.8rem; }
  .tabs { order:3; flex-basis:100%; }
}

/* Lange CVSS-Vektoren ohne Leerzeichen dürfen auf schmalen Bildschirmen umbrechen */
.vector { overflow-wrap:anywhere; word-break:break-all; max-width:100%; }
.livebar > div, .official, .prov .row { min-width:0; max-width:100%; }

/* Angriffsketten */
.ch-cards { display:flex; flex-direction:column; gap:.6rem; }
.ch-card { border:1px solid var(--line); border-radius:9px; padding:.6rem .75rem; display:flex; gap:.7rem; align-items:flex-start; flex-wrap:wrap; }
.ch-card .ch-text { flex:1 1 15rem; min-width:0; font-size:.95rem; }
.ch-card select { font:inherit; color:var(--fg); background:var(--card); border:1px solid var(--line); border-radius:6px; padding:.3rem .45rem; flex:0 0 auto; }
.ch-card select.set { border-color:var(--accent); }
.ch-card.ok { border-color:var(--ok); background:color-mix(in srgb, var(--ok) 9%, transparent); }
.ch-card.bad { border-color:var(--bad); background:color-mix(in srgb, var(--bad) 9%, transparent); }
.ch-card .ch-verdict { flex-basis:100%; font-size:.85rem; margin:0; }
.ch-card.ok .ch-verdict { color:var(--ok); } .ch-card.bad .ch-verdict { color:var(--bad); }
.ch-result { margin-top:1rem; padding:.8rem .9rem; border:1px solid var(--line); border-radius:8px; }
.ch-result.ok { border-color:var(--ok); } .ch-result.bad { border-color:var(--bad); }
.ch-result h3 { margin:0 0 .5rem; font-size:1rem; }
.ch-sol { display:flex; flex-direction:column; gap:.35rem; margin:0; padding:0; list-style:none; }
.ch-sol li { padding:.35rem .5rem; border-left:3px solid var(--accent); background:var(--code); border-radius:4px; font-size:.9rem; }
.ch-sol li b { color:var(--accent); }
.ch-sol li.dis { border-left-color:var(--warn); } .ch-sol li.dis b { color:var(--warn); }