:root {
  /* MindBytes: Navy #002f4b, Pink #d33f77, Pflaume #5e3a60, Blau #006799 */
  --brand-navy: #002f4b; --brand-pink: #d33f77; --brand-plum: #5e3a60; --wordmark: #002f4b;
  --bg: #f6f7f9; --card: #fff; --text: #1d2330; --muted: #6b7280; --line: #e3e6eb; --accent: #006799;
  --crit: #b3261e; --high: #d9730d; --mid: #b59400; --low: #5f6b7a; --ok: #2e7d32;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #14171c; --card: #1c2027; --text: #e6e8eb; --muted: #9aa3ae; --line: #2c323b; --accent: #6ea8ff; }
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--bg); color: var(--text); }
main { max-width: 1200px; margin: 0 auto; padding: 16px; }
a { color: var(--accent); }
h1 { font-size: 1.5rem; } h2 { font-size: 1.15rem; } h3 { font-size: 1rem; margin-bottom: .3rem; }
.top { display: flex; gap: 24px; align-items: center; padding: 10px 16px; background: var(--card); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.top nav { display: flex; gap: 16px; flex: 1; flex-wrap: wrap; }
.top nav a { text-decoration: none; }
.brand { font-weight: 700; text-decoration: none; color: var(--text); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 16px; margin: 16px 0; }
.card.narrow { max-width: 460px; } .card.warn { border-color: var(--high); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.grid .card { margin: 0; }
.stack { display: grid; gap: 10px; } .stack label { display: grid; gap: 4px; }
input, select, textarea, button { font: inherit; padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--text); }
button { background: var(--accent); color: #fff; border: 0; cursor: pointer; }
button.secondary { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
button.link { background: none; color: var(--accent); padding: 0; text-decoration: underline; }
button.danger { background: var(--crit); }
form.inline { display: inline; }
table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: .85rem; color: var(--muted); font-weight: 600; }
td.num { text-align: right; white-space: nowrap; }
tr.unread td { background: color-mix(in srgb, var(--accent) 6%, transparent); }
tr.err td { color: var(--crit); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .8rem; font-weight: 600; border: 1px solid currentColor; white-space: nowrap; vertical-align: middle; }
.prio-kritisch, .expl-active { color: var(--crit); } .prio-hoch, .expl-poc { color: var(--high); }
.prio-mittel { color: var(--mid); } .prio-niedrig, .expl-none, .expl-unknown { color: var(--low); }
.status-erledigt, .status-informiert, .status-nicht_betroffen { color: var(--ok); } .status-neu { color: var(--accent); }
.kpis { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 12px 16px; min-width: 180px; color: var(--muted); }
.kpi span { display: block; font-size: 1.8rem; font-weight: 700; color: var(--text); }
.kpi.alert span { color: var(--crit); }
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.alias-form { display: flex; gap: 8px; } .alias-form textarea { flex: 1; min-width: 180px; }
.muted { color: var(--muted); } .error { color: var(--crit); } .small { font-size: .85rem; font-weight: normal; margin-left: 8px; }
.lead { font-size: 1.05rem; } dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; } dt { color: var(--muted); } dd { margin: 0; }
.refs { word-break: break-all; } details { margin: 12px 0; } details.danger summary { color: var(--crit); cursor: pointer; }
@media (max-width: 700px) { table { display: block; overflow-x: auto; } }
.badge.src { color: var(--muted); font-weight: 500; }

/* Navigation & Suche */
.top nav a.active { font-weight: 700; text-decoration: underline; text-underline-offset: 6px; }
.search input { width: 220px; }
.warn-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--crit); vertical-align: middle; }
/* Neu / Echtzeit */
:root { --fresh: #d33f77; }
@media (prefers-color-scheme: dark) { :root { --fresh: #f07aa6; --brand-navy: #9cc9e6; --wordmark: #ffffff; } }
.badge.fresh { color: #fff; background: var(--fresh); border-color: var(--fresh); animation: pulse 2.4s ease-in-out 3; }
.badge.fresh-expl { background: var(--crit); border-color: var(--crit); }
@keyframes pulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .badge.fresh { animation: none; } }
tr.fresh-row td:first-child { box-shadow: inset 4px 0 0 var(--fresh); }
.fresh-box { border: 2px solid var(--fresh); }
.fresh-box h2 { margin-top: 0; }
.fresh-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
a.kpi { text-decoration: none; }
a.kpi:hover { border-color: var(--accent); }
.kpi.fresh-kpi span { color: var(--fresh); }
.small-note { margin: 4px 0; font-size: .85rem; }
.nowrap { white-space: nowrap; }
.timeline { padding-left: 18px; margin: 0; } .timeline li { margin: 2px 0; }
details.template textarea { width: 100%; font-family: ui-monospace, monospace; font-size: .85rem; }
@media (max-width: 700px) { .search input { width: 100%; } .top form.search { flex-basis: 100%; } }
.badge.rt { color: var(--fresh); border-color: var(--fresh); }
.badge.hist { color: var(--muted); border-style: dashed; font-weight: 500; }
details.template { border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; margin: 8px 0; }
details.template label { display: grid; gap: 4px; margin-top: 8px; }
details.template input { width: 100%; font-family: ui-monospace, monospace; font-size: .85rem; }

/* Marke */
.brand { display: inline-flex; align-items: center; gap: 10px; padding: 2px 0; }
.brand img, .brand-logo { display: block; }
.brand .wordmark { font-weight: 800; letter-spacing: -.02em; color: var(--wordmark); font-size: 1.25rem; line-height: 1; }
.brand .wordmark span { color: var(--brand-pink); }
.brand-text { display: inline-flex; flex-direction: column; gap: 2px; }
.brand-sub { display: inline-flex; align-items: center; gap: 4px; font-size: .58rem; color: var(--muted);
  align-self: flex-end; letter-spacing: .02em; }
.brand-sub .mb-wordmark { display: inline-flex; align-items: center; }
.login-brand { text-align: center; } .login-brand h1 { font-size: 2rem; margin: 8px 0 0; }
button { background: var(--brand-navy); }
@media (prefers-color-scheme: dark) { button { background: var(--accent); } }
/* Kundenbereich */
.customer-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.customer-head h1 { margin: 4px 0; }
.inline-details { margin: 0; } .inline-details summary { cursor: pointer; color: var(--muted); }
.tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--line); margin: 8px 0 16px; flex-wrap: wrap; }
.tabs a { padding: 8px 14px; text-decoration: none; color: var(--text); border-bottom: 3px solid transparent; margin-bottom: -2px; }
.tabs a.active { border-bottom-color: var(--brand-pink); font-weight: 700; }
.count { display: inline-block; font-size: .75rem; padding: 0 7px; border-radius: 999px; background: var(--brand-pink); color: #fff; margin-left: 4px; }
.count.plain { background: var(--line); color: var(--text); }
.count.urgent { background: var(--crit); }
.kpi small { font-size: .75rem; }
ol.todo { padding-left: 20px; display: grid; gap: 12px; } ol.todo li > div { margin-bottom: 2px; }
a.button-link { display: inline-block; margin-top: 4px; padding: 3px 10px; border: 1px solid var(--accent); border-radius: 6px; text-decoration: none; font-size: .85rem; }
.ok-note { color: var(--ok); font-weight: 600; }
.plain-list { list-style: none; padding: 0; display: grid; gap: 6px; }
tr.bucket td { background: var(--bg); font-weight: 700; font-size: .85rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding-top: 12px; }
.hint { background: color-mix(in srgb, var(--accent) 8%, transparent); border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; }
.chip { display: inline-block; padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; }
.chip.active { background: var(--brand-navy); color: #fff; border-color: var(--brand-navy); }
.group-melden { border-left: 4px solid var(--brand-pink); }
.group-gemeldet { border-left: 4px solid var(--accent); }
.group-erledigt { border-left: 4px solid var(--ok); opacity: .9; }
.card.notice textarea, .card.notice input { width: 100%; font-family: ui-monospace, monospace; font-size: .85rem; }
.card.notice label { display: grid; gap: 4px; margin-top: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Frühwarnungen */
.signal-list { list-style: none; padding: 0; display: grid; gap: 10px; }
.signal { border: 1px solid var(--line); border-left: 4px solid var(--brand-plum); border-radius: 6px; padding: 8px 12px; background: var(--card); }
.signal p { margin: 6px 0; }
.badge.unconfirmed { color: var(--brand-plum); border-style: dashed; }
.badge.buzz { color: var(--brand-plum); }
.small-list { margin: 4px 0 8px; padding-left: 18px; }

/* Info-Seite, Changelog, Fuß */
.foot { max-width: 1200px; margin: 24px auto; padding: 12px 16px; border-top: 1px solid var(--line); display: flex; gap: 16px; flex-wrap: wrap; font-size: .85rem; color: var(--muted); }
.toc a { margin: 0 4px; }
.steps li { margin: 6px 0; }
.release.current { border-left: 4px solid var(--brand-pink); }
details.tech { border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; margin: 8px 0; }
details.tech > summary { cursor: pointer; font-weight: 600; }
details.tech[open] > summary { margin-bottom: 8px; }
.diagram { margin: 16px 0 0; overflow-x: auto; }
.diagram svg { width: 100%; min-width: 720px; height: auto; font-family: inherit; }
.diagram text { text-anchor: middle; fill: var(--text); font-size: 13px; }
.diagram .d-head { font-weight: 700; fill: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.diagram .d-title { font-weight: 700; font-size: 15px; }
.diagram .d-small { font-size: 11px; fill: var(--muted); }
.diagram rect { fill: var(--card); stroke: var(--line); stroke-width: 1.5; }
.diagram .d-intel { stroke: var(--brand-navy); stroke-width: 2; }
.diagram .d-kunden { stroke: var(--brand-pink); stroke-width: 2; }
.diagram .d-step rect { fill: var(--bg); }
.diagram .d-dashed, .diagram .d-dashed rect { stroke-dasharray: 5 4; }
.diagram .d-flow line, .diagram .d-flow path { stroke: var(--muted); stroke-width: 1.6; }
.diagram .d-flow .d-soft { stroke-dasharray: 4 4; }
.diagram .d-arrowhead { fill: var(--muted); }
.diagram .d-wall { stroke: var(--crit); stroke-width: 2; stroke-dasharray: 8 6; }
.diagram .d-wall-label { fill: var(--crit); font-size: 11px; font-weight: 600; }

/* Farbampel für Zeitangaben */
:root { --t-ok: #2e7d32; --t-warn: #c26a00; --t-old: #b3261e; }
@media (prefers-color-scheme: dark) { :root { --t-ok: #6fcf73; --t-warn: #ffb74d; --t-old: #ff6b6b; } }
.ts { font-weight: 600; white-space: nowrap; }
.ts.t-ok { color: var(--t-ok); } .ts.t-warn { color: var(--t-warn); } .ts.t-old { color: var(--t-old); }
.legend .ts { margin: 0 2px; }

blockquote.post, .post-sample { margin: 6px 0; padding: 4px 10px; border-left: 3px solid var(--line); color: var(--text); font-style: italic; background: var(--bg); }
.post-sample { display: inline-block; padding: 0 6px; margin: 0; }
ol.source-timeline { list-style: none; padding-left: 0; display: grid; gap: 6px; }
ol.source-timeline li { border-left: 3px solid var(--line); padding-left: 10px; }
ol.source-timeline li.own { border-left-color: var(--brand-pink); }
.ts-date { font-variant-numeric: tabular-nums; font-weight: 600; margin-right: 6px; }

.mb-wordmark img { height: 11px; width: auto; display: block; }
.brand-sub .mb-wordmark img { height: 10px; }
.login-brand .mb-wordmark img { height: 13px; }
/* „by MindBytes“ in einer Zeile, Schriftzug auf Höhe der Schrift */
.mb-wordmark { display: inline-flex; align-items: center; }
.login-by { display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap;
            flex-wrap: nowrap; margin: 6px 0 0; }
.login-brand .brand-sub { justify-content: center; border: 0; padding: 0; margin-top: 6px; font-size: .8rem; }

/* Lesbare CSAF-/BSI-Abschnitte */
.note-block { margin: 0 0 12px; }
.note-block h4 { margin: 0 0 2px; font-size: .95rem; color: var(--brand-navy); }
@media (prefers-color-scheme: dark) { .note-block h4 { color: var(--brand-navy); } }
.note-block p { margin: 2px 0; white-space: pre-line; }

/* Entwicklungsfeature-Kennzeichnung */
.count.dev { background: var(--brand-plum); }
.dev-card { border: 1px dashed var(--brand-plum); }
.dev-flag { display: inline-block; margin: 0 0 4px; font-size: .75rem; font-weight: 700; color: var(--brand-plum); text-transform: uppercase; letter-spacing: .05em; }
label.check { display: flex; gap: 8px; align-items: flex-start; font-size: .9rem; }
label.check input { margin-top: 3px; }
pre.scanlog { white-space: pre-wrap; background: var(--bg); padding: 8px; border-radius: 6px; font-size: .8rem; max-height: 300px; overflow: auto; }

summary.more { cursor: pointer; color: var(--accent); font-size: .9rem; }
summary.more:hover { text-decoration: underline; }

.foot .by-mb { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.ver { font-size: .82rem; color: var(--muted); }

/* Menü- und Fußzeilen-Text folgen dem Textton (im Dark-Mode weiß) statt Link-Blau */
.top nav a { color: var(--text); }
.top nav a:hover { color: var(--brand-pink); }
.top nav a.active { color: var(--text); border-bottom-color: var(--brand-pink); }
.foot, .foot a, .foot .muted { color: var(--text); }
.foot a { text-decoration: underline; }

/* Kopier-Buttons an Betreff/Mailtext */
.copy-row { position: relative; }
.copy-row label { display: grid; gap: 4px; }
.copy-btn { position: absolute; top: 26px; right: 6px; z-index: 1; width: 26px; height: 26px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; background: var(--card);
  color: var(--accent); border: 1px solid var(--line); border-radius: 6px; font-size: .95rem; cursor: pointer; }
.copy-btn:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.copy-btn.copied { color: var(--ok); border-color: var(--ok); }
/* Platz rechts, damit das Icon nicht auf dem Text liegt */
.copy-row input, .copy-row textarea { padding-right: 34px; }

form.rescan { margin-top: 10px; padding: 10px; border: 1px dashed var(--brand-plum); border-radius: 6px; max-width: 640px; }

.badge.exploit-confirmed { color: #fff; background: var(--crit); border-color: var(--crit); }

/* Tabellen: Sortieren/Filtern/Ansichten + Info-Icons */
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--brand-pink); }
th.sort-asc::after { content: " ▲"; font-size: .7em; }
th.sort-desc::after { content: " ▼"; font-size: .7em; }
tr.filter-row th, tr.filter-row td { padding: 4px 6px; background: var(--bg); }
.col-filter { width: 100%; box-sizing: border-box; padding: 3px 6px; font-size: .8rem; }
.table-views { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 6px 0; }
.table-views .view-btn { background: transparent; color: var(--accent); border: 1px solid var(--line); border-radius: 6px; padding: 3px 10px; font-size: .82rem; cursor: pointer; }
.table-views .view-btn:hover { border-color: var(--accent); }
.info { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px;
  border-radius: 50%; border: 1px solid currentColor; color: var(--muted); font-size: 10px; font-style: normal;
  font-weight: 700; cursor: help; margin-left: 3px; vertical-align: middle; }
.info:hover::after, .info:focus::after {
  content: attr(data-tip); position: absolute; z-index: 30; top: 150%; left: 0; transform: none;
  width: max-content; max-width: 280px; white-space: normal; text-align: left; font-weight: 400;
  text-transform: none; letter-spacing: normal; font-size: .8rem; line-height: 1.35;
  background: var(--brand-navy); color: #fff; padding: 8px 10px; border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
@media (prefers-color-scheme: dark) { .info:hover::after, .info:focus::after { background: #2c323b; } }
th:last-child .info:hover::after, th:last-child .info:focus::after { left: auto; right: 0; }

/* Tabellen-Gruppierung */
tr.grp-head td { background: color-mix(in srgb, var(--brand-navy) 10%, transparent); font-weight: 700;
  cursor: pointer; user-select: none; padding: 6px 10px; }
@media (prefers-color-scheme: dark) { tr.grp-head td { background: color-mix(in srgb, #fff 8%, transparent); } }

/* Versand-Tags (0.26.0): wie die übrigen Plaketten nur Schrift- und Randfarbe */
.badge.mail-kunde { color: var(--ok); }
.badge.mail-intern { color: var(--accent); }
.sent-list li { margin: 2px 0; }
.warn-mark { color: var(--high); cursor: help; margin-left: 2px; }
.todo-box { border-left: 4px solid var(--crit); }

/* Schwachstellen-Seite (0.28.0): Kennzahlen-Leiste, lesbare Beschreibung, zwei ausgewogene Spalten */
.facts-strip { padding-top: 12px; padding-bottom: 12px; }
dl.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px 20px; margin: 0; }
dl.facts > div { min-width: 0; }
dl.facts dt { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted, #667085); margin: 0 0 2px; }
dl.facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
dl.facts dd small { font-weight: 400; }
.card.readable p, .card.readable .note-block { max-width: 78ch; line-height: 1.55; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); align-items: start; }
@media (max-width: 900px) { .grid.two { grid-template-columns: 1fr; } }
details.collapsible > summary { cursor: pointer; list-style: none; }
details.collapsible > summary::-webkit-details-marker { display: none; }
details.collapsible > summary h2 { display: inline; }
details.collapsible > summary::before { content: "▸ "; color: var(--muted, #667085); }
details.collapsible[open] > summary::before { content: "▾ "; }
.badge.exploit-betroffen { color: var(--crit); } .badge.exploit-nicht_betroffen { color: var(--ok); }
.badge.exploit-unklar { color: var(--high); } .badge.exploit-nein, .badge.exploit-na { color: var(--low); }
.exploit-table input, .exploit-table select { width: 100%; min-width: 0; }
.exploit-table td:nth-child(3) { min-width: 220px; }
/* Bei allen Systemen manuell „nicht betroffen“: Zeile ausgegraut */
tr.not-affected td { opacity: .5; }
tr.not-affected:hover td { opacity: .85; }
/* Testinstanz (Pentest) */
.test-banner { background: repeating-linear-gradient(45deg, #b54708, #b54708 12px, #93370d 12px, #93370d 24px);
  color: #fff; font-weight: 700; text-align: center; padding: 6px 12px; font-size: .9rem; letter-spacing: .02em; }
/* 0.30.0: einheitliche Tabellen */
.status-in_pruefung { color: var(--high); }
.badge.state-on { color: var(--ok); } .badge.state-off { color: var(--low); border-style: dashed; }
.badge.state-run { color: var(--accent); } .badge.state-err { color: var(--crit); }
td.actions-cell { text-align: right; } td.actions-cell form { display: inline-flex; gap: 6px; }
td.actions-cell a.button-link { margin-top: 0; }
tr.empty td { padding: 14px 10px; }
.empty-note { margin: 4px 0 0; }
/* Kopfzeile mit Knopf rechts (z. B. „+ Neuer Kunde“) */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.page-head h1 { margin: 12px 0; }
details.new-item { position: relative; margin: 0; }
details.new-item > summary { list-style: none; }
details.new-item > summary::-webkit-details-marker { display: none; }
summary.button { display: inline-block; cursor: pointer; background: var(--brand-navy); color: #fff; padding: 6px 14px; border-radius: 6px; font-weight: 600; }
@media (prefers-color-scheme: dark) { summary.button { background: var(--accent); } }
details.new-item[open] > summary.button { opacity: .85; }
.new-item-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: min(380px, calc(100vw - 32px));
  background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.new-item-panel p { margin: 10px 0 0; }
/* Kompakte Tabellen-Leiste: „Filter“ und „Ansicht ▾“ */
.table-views { gap: 6px; }
.table-views .view-btn.on { background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: var(--accent); }
.table-views .view-panel { display: none; gap: 6px; flex-wrap: wrap; align-items: center; }
.table-views.open .view-panel { display: inline-flex; }
.table-views .view-state { font-size: .8rem; color: var(--muted); }
table.filters-hidden tr.filter-row { display: none; }
th.num { text-align: right; }
/* Exploit-Code an festem Platz (0.32.0) */
.exploit-card h2 .badge { margin-left: 6px; font-size: .75rem; }
.exploit-search a { white-space: nowrap; }
/* Bearbeiten per Stift-Icon (0.33.0) */
details.edit-inline { display: inline-block; position: relative; margin: 0; vertical-align: middle; }
details.edit-inline > summary { list-style: none; }
details.edit-inline > summary::-webkit-details-marker { display: none; }
.edit-btn { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  border: 1px solid var(--line); border-radius: 6px; color: var(--muted); font-size: .9rem; background: var(--card); }
.edit-btn:hover, details.edit-inline[open] > .edit-btn { color: var(--accent); border-color: var(--accent); }
.edit-panel { position: absolute; z-index: 25; top: calc(100% + 6px); left: 0; width: min(340px, calc(100vw - 32px));
  background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.18);
  text-align: left; font-weight: normal; white-space: normal; }
td.actions-cell .edit-panel { left: auto; right: 0; }
.edit-panel p { margin: 0; }
.customer-head, .title-edit { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.title-edit h1 { margin: 12px 0; }
td.with-edit .edit-btn { width: 20px; height: 20px; font-size: .75rem; margin-left: 4px; }
.license-warn { margin-top: 4px; color: var(--crit); max-width: 420px; }
/* Radarschirm (0.34.0): SVG vom Server, Animation nur per CSS */
.radar-card { display: grid; grid-template-columns: minmax(280px, 580px) 1fr; gap: 20px; align-items: center; }
@media (max-width: 760px) { .radar-card { grid-template-columns: 1fr; } }
svg.radar { width: 100%; height: auto; display: block; }
:root { --radar-bg: #06202f; --radar-line: rgba(120, 220, 200, .22); --radar-beam: #5ef2c8; --radar-text: rgba(190, 240, 225, .75); }
.radar-bg { fill: var(--radar-bg); stroke: var(--radar-line); stroke-width: 2; }
.radar-ring { fill: none; stroke: var(--radar-line); stroke-width: 1; }
.radar-axis { stroke: var(--radar-line); stroke-width: 1; stroke-dasharray: 3 5; }
.radar-ring-label { fill: var(--radar-text); font-size: 9px; }
.radar-q { font-size: 11px; font-weight: 700; text-anchor: middle; fill: var(--radar-text); letter-spacing: .04em; }
.radar-center { fill: var(--radar-beam); }
.blip { stroke: rgba(0,0,0,.45); stroke-width: 1; opacity: .9; pointer-events: none; }
.blip.prio-kritisch, .legend-dot.prio-kritisch { fill: #ff5a4f; background: #ff5a4f; }
.blip.prio-hoch, .legend-dot.prio-hoch { fill: #ffa53a; background: #ffa53a; }
.blip.prio-mittel, .legend-dot.prio-mittel { fill: #f2d543; background: #f2d543; }
.blip.prio-niedrig, .legend-dot.prio-niedrig { fill: #9fb3c8; background: #9fb3c8; }
.blip.has-customers { stroke: #fff; stroke-width: 1.6; opacity: 1; }
.blip-ring { fill: none; stroke-width: 1.5; animation: blip-pulse 2.4s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.blip-ring.prio-kritisch { stroke: #ff5a4f; } .blip-ring.prio-hoch { stroke: #ffa53a; }
.blip-ring.prio-mittel { stroke: #f2d543; } .blip-ring.prio-niedrig { stroke: #9fb3c8; }
@keyframes blip-pulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(3.2); opacity: 0; } }
.blip-hit { fill: transparent; cursor: pointer; }
.blip-ring { pointer-events: none; }
.blip-link:hover .blip, .blip-link:focus .blip { opacity: 1; stroke: #fff; stroke-width: 2.5; }
.blip-link:focus { outline: none; }
.radar-legend h2 { margin-top: 0; }
.radar-counts li { display: flex; align-items: center; gap: 8px; }
.legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.legend-ring { border: 2px solid var(--muted); background: transparent; width: 12px; height: 12px; }
@media (prefers-reduced-motion: reduce) { .blip-ring { animation: none; } }
/* Software-Kacheln auf der Kunden-Übersicht (0.34.0) */
.sw-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin: 8px 0; }
a.sw-tile { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-left: 5px solid var(--line);
  border-radius: 8px; text-decoration: none; color: var(--text); background: var(--card); transition: transform .12s, box-shadow .12s; }
a.sw-tile:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.12); border-color: var(--accent); }
a.sw-tile.rank-kritisch { border-left-color: var(--crit); } a.sw-tile.rank-hoch { border-left-color: var(--high); }
a.sw-tile.rank-mittel { border-left-color: var(--mid); } a.sw-tile.rank-niedrig { border-left-color: var(--low); }
a.sw-tile.rank-ok { border-left-color: var(--ok); }
.sw-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-ver { font-size: .8rem; color: var(--muted); }
.sw-num { font-size: 1.6rem; font-weight: 800; line-height: 1.1; margin-top: 4px; }
a.sw-tile.rank-kritisch .sw-num { color: var(--crit); } a.sw-tile.rank-hoch .sw-num { color: var(--high); }
.sw-num.ok { color: var(--ok); }
.sw-sub { font-size: .78rem; color: var(--muted); }
.sw-bar { width: 100%; height: 6px; margin-top: 6px; border-radius: 3px; overflow: hidden; }
.bar-rest { fill: var(--line); } .bar-open { fill: var(--crit); } .bar-rep { fill: var(--accent); }
.lg::before { content: ""; display: inline-block; width: 10px; height: 6px; border-radius: 2px; margin: 0 3px 0 6px; vertical-align: middle; }
.bar-open-lg::before { background: var(--crit); } .bar-rep-lg::before { background: var(--accent); } .bar-rest-lg::before { background: var(--line); }
@media (prefers-reduced-motion: reduce) { a.sw-tile { transition: none; } }
.radar-q.q-kritisch { fill: #ff5a4f; } .radar-q.q-hoch { fill: #ffa53a; } .radar-q.q-mittel { fill: #d9b800; } .radar-q.q-niedrig { fill: var(--muted); }
/* Radar-Filter als Knöpfe (0.35.1) */
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-bottom: 12px; }
.chip-group { display: flex; flex-wrap: wrap; gap: 6px; }
.chip:hover { border-color: var(--accent); }
.chip-reset { color: var(--muted); }
/* Kacheln nach Dringlichkeit (0.36.1) */
.sw-num small { font-size: .8rem; font-weight: 600; color: var(--muted); }
a.sw-tile.rank-mittel .sw-num { color: var(--mid); }
.sw-expl { color: var(--crit); }
.sw-p { white-space: nowrap; font-weight: 600; }
.sw-p.p-kritisch { color: var(--crit); } .sw-p.p-hoch { color: var(--high); } .sw-p.p-mittel { color: var(--mid); } .sw-p.p-niedrig { color: var(--low); }
.bar-kritisch { fill: var(--crit); } .bar-hoch { fill: var(--high); } .bar-mittel { fill: var(--mid); } .bar-niedrig { fill: var(--low); }
.lg-kritisch::before { background: var(--crit); } .lg-hoch::before { background: var(--high); }
.lg-mittel::before { background: var(--mid); } .lg-niedrig::before { background: var(--low); }
.sw-poc { color: var(--high); }
.sw-epss { font-size: .78rem; color: var(--text); margin-top: 2px; }
/* 0.39.1: offene Bearbeiten-Formulare ragen aus der Tabelle heraus (sonst abgeschnitten, kein Fokus möglich) */
table:has(details.edit-inline[open]) { overflow: visible; }
tr:has(details.edit-inline[open]) { position: relative; z-index: 30; }
.edit-panel { z-index: 40; }
.edit-panel input, .edit-panel select, .edit-panel textarea { width: 100%; }
@media (max-width: 700px) { table:has(details.edit-inline[open]) { overflow-x: visible; } }
/* Formular im Stift-Fenster immer untereinander – auch in Aktionsspalten (dort stehen Knöpfe sonst nebeneinander) */
.edit-panel form, td.actions-cell .edit-panel form { display: grid; gap: 10px; }
.edit-panel label { display: grid; gap: 4px; font-size: .9rem; }
.edit-panel { min-width: 300px; }
/* Verlauf: Tags „erstmals“ (CVE, Exploit-Code, Aktiv ausgenutzt, Cyberfunk) */
.source-timeline li.milestone { font-weight: 600; }
.badge.tag-cve { color: var(--accent); }
.badge.tag-exploit { color: var(--high); }
.badge.tag-active { color: var(--crit); }
.badge.tag-cyberfunk { color: var(--muted); border-style: dashed; }
/* Vermutlicher Fehlalarm (defaultStatus „affected“, Version außerhalb aller Bereiche) */
.badge.fp-hint { color: var(--low); border-style: dashed; cursor: help; }
.fp-hint-box { margin: 6px 0; font-size: .9rem; }