/*
 * Das Dashboard auf dem gemeinsamen Designsystem (../tokens.css).
 *
 * app.css hatte 50 Schriftgrößen, 12 Stärken und krumme Abstände. Die Kopie in
 * diesem Ordner ist deshalb mechanisch normalisiert: Größen auf die Skala, Stärken
 * auf 400 und 500, Abstände aufs 4-px-Raster, Ecken auf 6, 8 und 12. Diese Datei
 * setzt darauf die Tokens und alles, was gestaltet und nicht nur gerundet ist.
 *
 * Die Seitenleiste folgt den Maßen, die an Linear gemessen sind: Einträge in einer
 * Zeile mit 13 px Schrift, 8 px Ecken, kein Rahmen, keine Karte für den aktiven
 * Punkt, nur eine leichte Fläche.
 */

/* ── Dunkel und hell ─────────────────────────────────────────────────────── */
:root {
  --sans: var(--font); --mono: var(--font-mono);

  --bg: var(--g-50); --card: #ffffff; --panel: #fbfcfb; --panel2: #eff3f0;
  --rail: #eff3f0; --sunk: #f3f6f4;
  --ink: #0c1f17; --ink2: #2b3d34; --muted: #4a5c53; --faint: #64766c;
  --line: #e2e9e4; --line2: #d3dcd6;

  --brand: var(--mint); --onacc: #ffffff;
  --plate: var(--forest); --plateh: var(--forest-h);
  --acc: var(--leaf); --acc2: #086341; --acctint: #e6f4ec; --accline: #bfe3cf;

  --red: #b4403c; --high: #a35a18; --amber: #84690f; --green: var(--leaf); --low: #4a6d84;
  --fill-critical: #d95050; --fill-high: #dc8a3a; --fill-medium: #d0ad32; --fill-low: #7c9db3;
  --redt: #f8ecea; --hight: #f8efe4; --ambert: #f6f1dd; --greent: #e6f4ec; --lowt: #e9eff3;
  --on-sev: #ffffff;

  --sbbg: var(--rail); --sbline: var(--line); --sbink: var(--ink); --sbmuted: var(--muted); --sbfaint: var(--faint);
  --sbhover: rgba(12, 31, 23, .05); --sbactive: rgba(12, 31, 23, .07);
  --switch-off: #c7d2cb;
  --shadow: none; --shadow-lift: 0 8px 24px -12px rgba(12, 31, 23, .18);

  /* Fundarten in Stufen des Markengrüns statt in Grau: die Anteile lesen sich als
     eine Familie, und Farbe kommt ins Bild, ohne eine neue einzuführen. */
  --kind-1: #0b3d2a; --kind-2: #0a7a50; --kind-3: #3fae7f; --kind-4: #8fd1b0; --kind-5: #c5e6d4;
}

html.p1dark {
  --bg: var(--g-950); --card: var(--g-850); --panel: var(--g-850); --panel2: var(--g-800);
  --rail: var(--g-900); --sunk: var(--g-900);
  --ink: var(--g-100); --ink2: var(--g-200); --muted: var(--g-400); --faint: var(--g-500);
  --line: rgba(200, 235, 215, .09); --line2: rgba(200, 235, 215, .15);

  --onacc: var(--mint-ink);
  --plate: var(--mint); --plateh: var(--mint-h);
  --acc: var(--mint); --acc2: var(--mint-h); --acctint: rgba(92, 237, 163, .1); --accline: rgba(92, 237, 163, .24);

  --red: #ef8a88; --high: #f0a35e; --amber: #e6c867; --green: var(--mint); --low: #8fb0c4;
  --fill-critical: var(--sev-critical); --fill-high: var(--sev-high); --fill-medium: var(--sev-medium); --fill-low: var(--sev-low);
  --redt: rgba(239, 107, 107, .1); --hight: rgba(240, 163, 94, .1); --ambert: rgba(230, 200, 103, .1); --greent: rgba(92, 237, 163, .1); --lowt: rgba(143, 176, 196, .1);

  --sbhover: rgba(200, 235, 215, .05); --sbactive: rgba(200, 235, 215, .08); --switch-off: rgba(200, 235, 215, .2);
  --shadow: none; --shadow-lift: 0 8px 24px -12px rgba(0, 0, 0, .7);

  --kind-1: var(--mint); --kind-2: #3cb07c; --kind-3: #2a8160; --kind-4: #22604a; --kind-5: #1d4a3a;
}

/* ── Grundlage ───────────────────────────────────────────────────────────── */
html, body { font-size: 16px; }
body { font: 400 14px/20px var(--font); letter-spacing: -.006em; font-optical-sizing: auto; }
code, pre, .mono { font-family: var(--font-mono); letter-spacing: 0; }
::selection { background: rgba(92, 237, 163, .28); }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

/* ── Seitenleiste ────────────────────────────────────────────────────────── */
.shell { grid-template-columns: 240px minmax(0, 1fr); }
.side { background: var(--sbbg); border-right: 1px solid var(--sbline); }
.side-top { height: 64px; padding: 0 var(--s-3) 0 var(--s-5); align-items: center; }
.side-wordmark { font: 700 15px/1 var(--font-logo); letter-spacing: .005em; }
.side-collapse { width: 28px; height: 28px; border-radius: var(--r-m); color: var(--faint); opacity: 0; transition: opacity .15s; }
.side:hover .side-collapse, .side-collapse:focus-visible { opacity: 1; }
.side-collapse svg { width: 16px; height: 16px; }

.side-nav { padding: var(--s-2) var(--s-3); gap: 2px; }
.side-group { padding: var(--s-6) var(--s-2) var(--s-2); font: 500 12px/16px var(--font); letter-spacing: 0; text-transform: none; color: var(--faint); }
.side-nav a {
  height: 32px; padding: 0 var(--s-2); gap: 10px; border-radius: var(--r-m);
  font-size: 13px; font-weight: 500; line-height: 16px; color: var(--sbmuted); letter-spacing: -.003em;
  transition: background-color .12s, color .12s;
}
.side-nav a:hover { background: var(--sbhover); color: var(--sbink); }
.side-nav a[aria-current="page"] { background: var(--sbactive); color: var(--sbink); box-shadow: none; font-weight: 500; }
.side-nav a[aria-current="page"] svg { color: var(--sbink); }
.side-nav svg { width: 16px; height: 16px; stroke-width: 1.75; opacity: .85; }
.side-count { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; display: grid; place-items: center; border-radius: 999px; background: none; font: 500 12px/20px var(--font); color: var(--faint); font-variant-numeric: tabular-nums; }
.side-count.on { background: var(--sbactive); color: var(--sbink); }

.side-foot { padding: var(--s-2) var(--s-3) var(--s-3); display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; border-top: 1px solid var(--sbline); }
.side-toggle { height: 32px; padding: 0 var(--s-2); gap: 10px; font-size: 13px; font-weight: 500; color: var(--sbmuted); }
.side-toggle > svg { width: 16px; height: 16px; opacity: .85; }
.acct-card { height: 44px; padding: 0 var(--s-2); gap: 10px; border: 0; border-radius: var(--r-m); background: none; box-shadow: none; }
.acct-card:hover { background: var(--sbhover); }
.acct-card-av { width: 28px; height: 28px; border-radius: 999px; background: var(--forest); color: var(--mint); font: 500 12px/28px var(--font); }
.acct-card-name { font-size: 13px; font-weight: 500; line-height: 16px; }
.acct-card-mail { font-size: 12px; line-height: 16px; color: var(--faint); }

.mode-toggle { width: 28px; height: 16px; }
.mode-toggle::after { top: 2px; left: 2px; width: 12px; height: 12px; box-shadow: none; }
.mode-toggle[aria-pressed="true"] { background: var(--g-600); }
.mode-toggle[aria-pressed="true"]::after { transform: translateX(12px); background: var(--mint); }

/* ── Kopfzeile ───────────────────────────────────────────────────────────── */
.main { --colw: 1120px; }
.main-narrow { --colw: 920px; }
.topbar { height: 64px; padding: 0 var(--s-8); display: flex; align-items: center; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.topbar-in > div:first-child { display: flex; align-items: center; gap: var(--s-2); }
.topbar .account { font: 400 14px/20px var(--font); letter-spacing: -.006em; text-transform: none; color: var(--faint); }
.topbar .account::after { content: "/"; margin-left: var(--s-2); opacity: .6; }
.topbar .title { margin: 0; font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: -.006em; }

.view { padding: var(--s-8) var(--s-8) var(--s-16); }
.cards, .dash { gap: var(--s-4); }
.dash-row, .dash-row.thirds { gap: var(--s-4); }

/* ── Karten ──────────────────────────────────────────────────────────────── */
.card { padding: var(--s-6); border: 1px solid var(--line); border-radius: var(--r-l); background: var(--card); box-shadow: none; }
.card h2, .dash-head h2, .dash-wide .card-head h2 { font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: -.006em; }
.dash-head { align-items: center; margin-bottom: var(--s-4); }
.dash-head a, .dash-wide .card-head a { font-size: 13px; color: var(--faint) !important; }
.dash-head a:hover, .dash-wide .card-head a:hover { color: var(--ink) !important; text-decoration: none; }
.kicker, .field > span, .find-facts span, .rule { font: 500 12px/16px var(--font); letter-spacing: 0; text-transform: none; color: var(--faint); }

/* ── Knöpfe ──────────────────────────────────────────────────────────────── */
.btn-plate, .btn-small, .btn-on-plate, .btn-quiet {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 var(--s-3);
  border-radius: var(--r-m); font: 500 13px/16px var(--font); letter-spacing: -.003em; text-decoration: none;
  transition: background-color .12s, border-color .12s, color .12s;
}
.btn-plate { width: auto; background: var(--plate); color: var(--onacc); }
.btn-plate:hover:not(:disabled) { background: var(--plateh); }
.btn-small { background: var(--plate); color: var(--onacc); border: 0; }
.btn-small:hover:not(:disabled) { background: var(--plateh); }
.btn-ghost, .view .btn-small:not(.btn-ghost) { background: transparent; color: var(--ink); border: 1px solid var(--line2); }
.btn-ghost:hover:not(:disabled), .view .btn-small:not(.btn-ghost):hover:not(:disabled) { background: var(--sbhover); border-color: var(--line2); }
/* Knöpfe, die Links sind: `a.btn-small` aus app.css und elf `style`-Angaben in dashboard.js
   stellten wieder `inline-block` her, die Schrift stand dann oben im Knopf statt in der
   Mitte. Deshalb hier `!important`, und `:not([hidden])`, damit `hidden` weiter gilt. */
a.btn-small:not([hidden]), a.btn-plate:not([hidden]) { display: inline-flex !important; }
.field > input, .find-search { height: 36px; padding: 0 var(--s-3); border-radius: var(--r-m); font-size: 14px; }

/* ── Die Platte: die eine dunkelgrüne Fläche der App ─────────────────────────
 * Hier zeigt sich die Marke. Tiefes Waldgrün in beiden Themen, die Zahl groß und
 * leicht, darunter die Schweregrade als ruhige Zeile. Keine Kacheln, kein Rot. */
.plate {
  --plate: var(--mint); --plateh: var(--mint-h); --onacc: var(--mint-ink);
  display: block; padding: var(--s-6) var(--s-6) var(--s-5); border-radius: var(--r-l); background: var(--forest-deep); color: var(--g-100);
  box-shadow: inset 0 0 0 1px rgba(92, 237, 163, .14);
}
.plate::after { display: none; }
.plate-head-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.plate-k { font: 400 14px/20px var(--font); color: #a9c4b6; opacity: 1; }
.plate-v { margin-top: var(--s-2); align-items: baseline; gap: var(--s-3); }
.plate-v b { font: 400 64px/64px var(--font); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.plate-good { font-size: 14px; font-weight: 500; color: var(--mint); }
.plate .sevbar { max-width: none; height: 4px; margin-top: var(--s-5); gap: 2px; }
.plate .sevbar > i { border-radius: 1px; }
.plate .sevbar .none { background: rgba(255, 255, 255, .16); }
.plate-acts { gap: var(--s-2); flex-wrap: nowrap; }
.btn-on-plate { background: rgba(255, 255, 255, .08); color: #e8efea; border: 0; }
.btn-on-plate:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.btn-on-plate.primary { background: var(--mint); color: var(--mint-ink); }
.btn-on-plate.primary:hover { background: var(--mint-h); color: var(--mint-ink); }
.plate-stats { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); margin-top: var(--s-4); font-size: 13px; line-height: 20px; color: #a9c4b6; }
.plate-stats span { display: inline-flex; align-items: center; gap: var(--s-2); }
.plate-stats b { font-weight: 500; color: var(--g-100); font-variant-numeric: tabular-nums; }
.plate-stats i { width: 6px; height: 6px; border-radius: 999px; }
.plate-stats .critical { background: var(--sev-critical); } .plate-stats .high { background: var(--sev-high); }
.plate-stats .medium { background: var(--sev-medium); } .plate-stats .low { background: var(--sev-low); }
.plate-stats .push { margin-left: auto; }
.plate-note { margin-top: var(--s-2); font-size: 13px; line-height: 20px; color: #a9c4b6; opacity: 1; }
.plate-head { font-size: 24px; line-height: 32px; font-weight: 500; letter-spacing: -.02em; }
.plate-body { flex: 1; }

/* ── Schweregrad: Punkt und Wort ─────────────────────────────────────────────
 * Wie die Prioritäten bei Linear: Die Information steht im Text, die Farbe ist
 * nur ein 6-px-Punkt. Dadurch bleibt die Fläche grün-neutral, auch bei vielen Funden. */
.badge, .sevpill {
  display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0 !important; border-radius: 0; background: none;
  font: 500 13px/20px var(--font); letter-spacing: -.003em; text-transform: capitalize; color: var(--ink) !important;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--dot, var(--faint)); }
.sevpill i { display: block; width: 6px; height: 6px; border-radius: 999px; }
.badge.critical { --dot: var(--fill-critical); } .badge.high { --dot: var(--fill-high); }
.badge.medium { --dot: var(--fill-medium); } .badge.low { --dot: var(--fill-low); }
.sevpill.critical i { background: var(--fill-critical); } .sevpill.high i { background: var(--fill-high); }
.sevpill.medium i { background: var(--fill-medium); } .sevpill.low i { background: var(--fill-low); }
.sev.low { background: var(--lowt); color: var(--low); }
.noacct { padding: 0 6px; border: 1px solid var(--line2); border-radius: var(--r-s); background: none; color: var(--muted); font: 500 12px/18px var(--font); letter-spacing: 0; text-transform: none; }
.find-state { font: 500 12px/16px var(--font); letter-spacing: 0; text-transform: capitalize; color: var(--muted); }
.find-state.open { color: var(--muted); }
.find-state.retested { color: var(--acc); }
.pill { height: 20px; padding: 0 var(--s-2); display: inline-flex; align-items: center; border-radius: 999px; font: 500 12px/16px var(--font); letter-spacing: 0; text-transform: none; }
.pill.ok { background: var(--acctint); color: var(--acc); }

/* ── „What an attacker gets today" ───────────────────────────────────────── */
.dash-wide { grid-template-columns: minmax(0, 1fr) 240px; padding: 0; }
.dash-wide .card-head { height: 56px; padding: 0 var(--s-6); border-bottom: 1px solid var(--line); display: flex; align-items: center; }
.expose { padding: 0; }
.exp-row { display: grid; grid-template-columns: 88px minmax(0, 1fr) 48px; gap: var(--s-3); align-items: center; min-height: 72px; padding: var(--s-3) var(--s-6); transition: background-color .12s; }
.exp-row:hover { background: var(--sbhover); }
.exp-lead { font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: -.006em; }
.exp-sub { margin-top: 2px; font-size: 13px; line-height: 20px; color: var(--faint); }
.exp-age { font-size: 12px; line-height: 16px; color: var(--faint); }
.exp-age b { font-size: 13px; line-height: 16px; font-weight: 500; color: var(--ink2); }
.rail { padding: var(--s-6); gap: var(--s-5); justify-content: flex-start; }
.rail-k { font-size: 13px; line-height: 20px; color: var(--muted); }
.rail-v { margin-top: var(--s-1); gap: 6px; }
.rail-v b { font-size: 32px; line-height: 36px; font-weight: 400; letter-spacing: -.03em; }
.rail-v span { font-size: 13px; color: var(--faint); }
.rail .btn-small { margin-top: auto; background: var(--acctint); border-color: var(--accline); color: var(--acc2); }
.rail .btn-small:hover:not(:disabled) { background: var(--acctint); border-color: var(--acc); color: var(--acc2); }

/* ── Untere Karten ───────────────────────────────────────────────────────── */
.kindbar { height: 4px; gap: 2px; margin-bottom: var(--s-4); }
.kindbar > i { border-radius: 1px; }
.kindrow { grid-template-columns: 8px minmax(0, 1fr) auto; gap: var(--s-3); height: 32px; padding: 0; font-size: 13px; }
.kindrow i { width: 8px; height: 8px; border-radius: 2px; }
.kindrow b { font-weight: 500; }

/* ── Der Fund ────────────────────────────────────────────────────────────── */
.find-hero { padding: var(--s-6); }
.find-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-8); align-items: start; }
.find-head { gap: var(--s-3); }
.find-ref { font: 400 13px/20px var(--font-mono); color: var(--faint); }
.find-hero h2 { margin: var(--s-3) 0 0; font-size: 24px; line-height: 32px; font-weight: 500; letter-spacing: -.02em; text-wrap: balance; }
.find-lead { margin: var(--s-2) 0 0; max-width: 60ch; font-size: 14px; line-height: 20px; color: var(--muted); }
.find-score { text-align: right; }
.find-score b { display: block; font: 400 44px/44px var(--font); letter-spacing: -.035em; font-variant-numeric: tabular-nums; color: var(--ink); }
.find-score span { display: block; margin-top: var(--s-1); font-size: 12px; line-height: 16px; color: var(--faint); }
.find-hero .find-facts { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line); gap: var(--s-6); }
.find-facts b { font-size: 13px; line-height: 20px; font-weight: 500; }
.find-what { margin-top: var(--s-4); max-width: 60ch; }
.find-what p { margin: var(--s-1) 0 0; font-size: 14px; line-height: 20px; color: var(--muted); }
/* Die Behebung ist das, wofür der Kunde zahlt: volle Breite auf Waldgrün, wie die Platte
   mit denselben Knöpfen. `pre-line`, weil das Feld frei formuliert ist und Absätze haben kann. */
.find-fix { --plate: var(--mint); --plateh: var(--mint-h); --onacc: var(--mint-ink); padding: var(--s-6); background: var(--forest-deep); border-color: rgba(92, 237, 163, .14); color: var(--g-100); }
.find-fix h3 { margin: 0; font-size: 18px; line-height: 24px; font-weight: 500; letter-spacing: -.01em; color: var(--g-50); }
.find-fix p { margin: var(--s-3) 0 0; max-width: 68ch; font-size: 16px; line-height: 24px; color: var(--g-100); white-space: pre-line; }
.find-fix .find-actions { margin-top: var(--s-5); }
.find-fix .note, .find-proof .note { margin-top: var(--s-3); color: var(--g-200); }
.find-fix .note.err, .find-proof .note.err { color: var(--sev-critical); }
.btn-on-plate:disabled { opacity: .5; cursor: not-allowed; }
.find-proof { --ink: var(--g-100); --muted: var(--g-400); --faint: var(--g-500); --line: rgba(200, 235, 215, .09); --line2: rgba(200, 235, 215, .15); --sbhover: rgba(200, 235, 215, .08); background: var(--g-900); color: var(--g-100); border-color: rgba(200, 235, 215, .09); }
.find-raw { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-2); }
.find-raw p { margin: 0; max-width: 60ch; font-size: 13px; line-height: 20px; color: var(--muted); }
.find-raw .btn-small { flex: none; }
.find-proof .kicker { color: var(--g-400); }
.find-proof .find-pre { margin-top: var(--s-2); padding: var(--s-3) var(--s-4); border: 1px solid rgba(200, 235, 215, .09); border-radius: var(--r-m); background: var(--g-950); color: var(--g-100); font: 400 13px/20px var(--font-mono); }
.find-proof .find-steps { grid-template-columns: minmax(0, 1fr); overflow-wrap: anywhere; color: var(--g-200); font-size: 13px; line-height: 24px; }
.find-rowhead { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.find-copy { height: 24px; padding: 0 var(--s-2); border: 1px solid rgba(200, 235, 215, .15); border-radius: var(--r-s); background: none; color: var(--g-400); font: 500 12px/16px var(--font); cursor: pointer; }
.find-copy:hover { color: var(--g-100); border-color: rgba(200, 235, 215, .3); }

/* ── Tabellen ────────────────────────────────────────────────────────────── */
table th { font: 500 12px/16px var(--font); letter-spacing: 0; text-transform: none; color: var(--faint); }
table td { font-size: 13px; line-height: 20px; }


@media (max-width: 860px) {
  .shell { grid-template-columns: 56px minmax(0, 1fr); }
  .topbar { padding: 0 var(--s-4); }
  .view { padding: var(--s-4) var(--s-4) var(--s-12); }
  .dash-wide { grid-template-columns: minmax(0, 1fr); }
  .rail { border-left: 0; border-top: 1px solid var(--line); }
  .exp-row { grid-template-columns: minmax(0, 1fr) 40px; padding: var(--s-3) var(--s-4); }
  .exp-row .badge { grid-column: 1 / -1; }
  .plate-head-row { align-items: flex-start; flex-direction: column; }
  .plate-acts { flex-wrap: wrap; }
  .plate-stats .push { margin-left: 0; }
  .find-top { grid-template-columns: minmax(0, 1fr); }
  .find-score { text-align: left; }
  .find-raw { flex-direction: column; align-items: flex-start; }
}

.topbar { flex: none; }

/* Die Wortmarke behält ihre Form, Etiketten stehen in normaler Schreibung. */
.side-wordmark { text-transform: uppercase; letter-spacing: .005em; }
.find-facts span, .sev > span { display: block; }
.find-facts span::first-letter, .sev > span::first-letter { text-transform: uppercase; }

/* Die Platte auf Lauf- und Ergebnisseiten: Text links, Uhr oder Knopf rechts. */
.plate { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-6); }
.plate:has(.plate-head-row) { display: block; }
.plate-acts-clock { gap: var(--s-4); }
.plate-v b[style] { font: 500 24px/32px var(--font) !important; letter-spacing: -.02em; }

.btn-plate { padding-block: 0 !important; line-height: 16px; }
.unlock-price .btn-plate { padding-inline: var(--s-4); }

/* Die vier Zählfelder im Ergebnis: neutral, mit Punkt, wie überall. */
.sev.critical, .sev.high, .sev.medium, .sev.low { background: var(--panel2); color: var(--ink); }
.sev.zero { background: none; color: var(--faint); }
.sev > span { display: flex; align-items: center; gap: 6px; font: 500 12px/16px var(--font); color: var(--muted); }
.sev > span::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--faint); }
.sev.critical > span::before { background: var(--fill-critical); } .sev.high > span::before { background: var(--fill-high); }
.sev.medium > span::before { background: var(--fill-medium); } .sev.low > span::before { background: var(--fill-low); }
.sev > b { margin-top: var(--s-2); font-size: 32px; line-height: 36px; font-weight: 400; letter-spacing: -.03em; }

/* Schmale Leiste: nur der Schalter, kein Mond daneben, sonst läuft er über den Rand. */
@media (max-width: 860px) {
  .side-toggle { padding: 0; justify-content: center; }
  .side-toggle > svg { display: none; }
  .side-toggle .mode-switch { margin: 0; }
  .side-foot { padding-inline: var(--s-2); }
  .acct-card { padding: 0; justify-content: center; }
}
html.p1narrow .side-toggle { padding: 0; justify-content: center; }
html.p1narrow .side-toggle > svg { display: none; }
html.p1narrow .side-toggle .mode-switch { margin: 0; }

/* ── Anmeldung ───────────────────────────────────────────────────────────────
 * Links die Marke auf Waldgrün, rechts ein ruhiges Formular. Die Wortmarke steht
 * exakt wie im Original: Orbitron in Versalien, das O in Mint. */
.auth { grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); background: var(--bg); }
.auth-brand { padding: var(--s-6) var(--s-8); background: var(--forest-deep); }
.auth-brand::before { background: none; }
.aurora-field { opacity: .5; }
.auth-brand .wordmark { height: 32px; align-items: center; font: 700 18px/1 var(--font-logo); text-transform: uppercase; letter-spacing: .005em; }
.auth-brand .wordmark svg { fill: var(--mint); }
.auth-brand .claim { max-width: 400px; }
.auth-brand .claim p:first-child { font: 500 32px/40px var(--font); letter-spacing: -.024em; }
.auth-brand .claim p + p { margin-top: var(--s-4); font-size: 16px; line-height: 24px; color: #a9c4b6; }
.auth-form { padding: var(--s-10) var(--s-8); }
.auth-form > div { max-width: 360px; }
.auth-form h1 { margin: var(--s-2) 0 0; font: 500 24px/32px var(--font); letter-spacing: -.02em; }
.auth-head .kicker { font-size: 13px; line-height: 20px; }
.btn-provider { height: 40px; padding: 0 var(--s-3); gap: var(--s-2); border: 1px solid var(--line2); border-radius: var(--r-m); background: transparent; color: var(--ink); font: 500 14px/20px var(--font); letter-spacing: -.006em; transition: background-color .12s; }
.btn-provider:hover:not(:disabled) { background: var(--sbhover); border-color: var(--line2); }
.auth-form .field > input { height: 40px; background: transparent; }
.auth-form .field > input:focus { border-color: var(--acc); box-shadow: 0 0 0 3px var(--acctint); }
.auth-form .btn-plate { width: 100%; height: 40px; font-size: 14px; }
.auth-form .btn-quiet { width: 100%; background: none; color: var(--muted); }
.auth-form .rule { margin: var(--s-5) 0; font-size: 12px; }
.auth-fine { margin-top: var(--s-5); font-size: 13px; line-height: 20px; color: var(--faint); }
.mode-switch.pair { padding: 2px; gap: 2px; border-radius: var(--r-m); }
.mode-switch.pair button { width: 28px; height: 24px; border-radius: var(--r-s); }
.mode-switch.pair button[aria-pressed="true"] { background: var(--sbactive); color: var(--ink); }

/* Telefon: nur das Formular, mit der Wortmarke darüber, wie im Original ohne Bildteil. */
@media (max-width: 860px) {
  .auth { grid-template-columns: minmax(0, 1fr); }
  .auth-brand { display: none; }
  .auth-form { place-items: start center; padding: var(--s-12) var(--s-6); }
  .auth-form > div { max-width: none; }
}

/* ── Pixel-Bildsprache (pixels.js) ────────────────────────────────────────────
 * Dieselben Zellen wie das Pixelfeld der Website: 6 px, Fuge 2 px, Mint auf
 * Waldgrün. Kästchen zeigen Daten, ein Kästchen ist ein Fund. Die Illustrationen
 * zeigen den Gegenstand ihrer Seite. Bewegt sich nur ohne reduzierte Bewegung. */
.plate { position: relative; overflow: hidden; isolation: isolate; }
.plate > .px-field {
  position: absolute; top: 0; left: 0; z-index: -1; image-rendering: pixelated;
  mask:
    linear-gradient(90deg, transparent 30%, #000 80%),
    repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 8px),
    repeating-linear-gradient(180deg, #000 0 6px, transparent 6px 8px);
  mask-composite: intersect;
}

.px-tiles { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; margin-top: var(--s-5); max-width: 720px; }
.px-tiles i { width: 12px; height: 12px; border-radius: 2px; background: var(--sev-low); }
.px-tiles .critical { background: var(--sev-critical); }
.px-tiles .high { background: var(--sev-high); }
.px-tiles .medium { background: var(--sev-medium); }
.px-more { margin-left: var(--s-2); font-size: 12px; line-height: 16px; color: #a9c4b6; }

.px-waffle { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 3px; margin-bottom: var(--s-4); }
.px-waffle i { aspect-ratio: 1; border-radius: 2px; }

.px-meter { display: flex; flex-wrap: wrap; gap: 3px; margin-top: var(--s-3); }
.px-meter i { width: 10px; height: 10px; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--line2); }
.px-meter i.on { background: var(--acc); box-shadow: none; }
.px-meter.l i { width: 14px; height: 14px; }
.cov-meter { display: flex; align-items: center; gap: var(--s-3); margin: 0 0 var(--s-2); font-size: 13px; line-height: 20px; color: var(--muted); }
.cov-meter .px-meter { margin: 0; }
.cov-meter b { font-weight: 500; color: var(--ink); }

.px-art { display: block; width: auto; height: 118px; max-width: 100%; }
.px-art rect { fill: #84f4bb; opacity: var(--o); }
.px-art .t0 { --o: .07; }
.px-art .t1 { --o: .16; }
.px-art .t2 { --o: .32; }
.px-art .t3 { --o: .58; }
.px-art .t4 { --o: .92; }
.px-art .t5 { --o: 1; fill: #d2fde6; }

@media (prefers-reduced-motion: no-preference) {
  .px-tiles i, .px-waffle i, .px-meter i { animation: px-pop .45s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 24ms + 120ms); }
  .px-art .tw { animation: px-tw 4s ease-in-out infinite; }
  .px-art .pulse { animation: px-pulse 1.8s ease-in-out infinite; }
  .px-art .scan { animation: px-scan 3.6s ease-in-out infinite; }
  .px-art .sweep { animation: px-sweep 3s linear infinite; }
  .px-art .blip { animation: px-blip 3s linear infinite; }
  .px-art .flow { animation: px-flow 3s linear infinite; }
}
@keyframes px-pop { from { opacity: 0; transform: scale(.3); } }
@keyframes px-tw { 50% { opacity: 1; } }
@keyframes px-pulse { 50% { opacity: .45; } }
@keyframes px-scan { 0%, 30%, 100% { opacity: var(--o); } 8% { opacity: 1; } }
@keyframes px-sweep { 0% { opacity: .4; } 30%, 100% { opacity: var(--o); } }
@keyframes px-blip { 0%, 4% { opacity: 1; } 55%, 100% { opacity: var(--o); } }
@keyframes px-flow { 0% { opacity: 1; } 14%, 100% { opacity: var(--o); } }

/* Die Kopfplatte der Unterseiten: Zahlen links, Illustration rechts. */
.plate.page-plate { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-8); padding: var(--s-6); }
.pp-figs { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-10); }
.pp-fig b { display: block; font: 400 32px/36px var(--font); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--g-50); }
.pp-fig span { display: block; margin-top: var(--s-1); font-size: 13px; line-height: 20px; color: #a9c4b6; }
.page-plate .px-tiles { margin-top: var(--s-4); }
.pp-text { margin: var(--s-4) 0 0; max-width: 64ch; font-size: 14px; line-height: 22px; color: #a9c4b6; }
.pp-art { justify-self: end; }
.rail .px-meter { margin-top: var(--s-3); }

/* Berichte: ein kleines Blatt je Fassung, erkennbar am Inhalt. */
.report-row { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-5); }
.paper { position: relative; width: 44px; height: 56px; border-radius: 3px; overflow: hidden; background: #f6f8f6; box-shadow: 0 0 0 1px rgba(12, 31, 23, .1), 0 6px 16px -8px rgba(0, 0, 0, .45); }
.paper i { position: absolute; left: 7px; height: 3px; border-radius: 1px; background: #cfdbd4; }
.paper i:nth-child(1) { top: 8px; width: 16px; background: #0b3d2a; }
.paper i:nth-child(2) { top: 15px; width: 30px; }
.paper i:nth-child(3) { top: 21px; width: 24px; }
.paper::after { content: ""; position: absolute; left: 7px; right: 7px; top: 29px; bottom: 8px; border-radius: 2px; }
.paper-summary::after { background: linear-gradient(#5ceda3, #5ceda3) 0 0 / 12px 11px no-repeat, linear-gradient(#cfdbd4, #cfdbd4) 0 15px / 100% 3px no-repeat; }
.paper-technical::after { background: linear-gradient(#5ceda3, #5ceda3) 3px 4px / 12px 2px no-repeat, linear-gradient(#3a6b55, #3a6b55) 3px 9px / 18px 2px no-repeat, linear-gradient(#3a6b55, #3a6b55) 6px 14px / 12px 2px no-repeat, #082b1e; }
.paper-soc2::after, .paper-iso27001::after { background: repeating-linear-gradient(180deg, #cfdbd4 0 1px, transparent 1px 5px), linear-gradient(90deg, transparent 9px, #cfdbd4 9px 10px, transparent 10px); }
.paper-soc2::after { background-color: transparent; box-shadow: inset -4px 0 0 #5ceda3; }
.paper-iso27001::after { box-shadow: inset 4px 0 0 #0b3d2a; }

/* Pentest: die Läufe eines Projekts als Faden mit Knoten, der neueste gefüllt. */
.run-thread .find-row { position: relative; padding-left: 44px; border-top: 0; }
.run-thread .find-row::before { content: ""; position: absolute; left: 24px; top: 0; bottom: 0; width: 1px; background: var(--line2); }
.run-thread .find-row:first-child::before { top: 27px; }
.run-thread .find-row:last-child::before { bottom: calc(100% - 27px); }
.run-thread .find-row::after { content: ""; position: absolute; left: 20px; top: 23px; width: 9px; height: 9px; border-radius: 999px; background: var(--card); box-shadow: inset 0 0 0 2px var(--acc); }
.run-thread .find-row:first-child::after { background: var(--acc); box-shadow: 0 0 0 4px var(--acctint); }

/* Funde: der Status als Punkt und Wort, offen hohl, behoben gefüllt -- kein Knopf. */
.fstat { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font-size: 13px; color: var(--muted); }
.fstat::before { content: ""; width: 7px; height: 7px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--muted); }
.fstat.fixed::before, .fstat.retested::before { background: var(--acc); box-shadow: none; }

/* Domains: offene Funde als Zahl mit Punkt, ohne getönte Kästchen. */
.iss { gap: var(--s-3); }
.iss span { display: inline-flex; align-items: center; gap: 5px; min-width: 0; padding: 0; border: 0 !important; background: none !important; font-size: 13px; color: var(--faint) !important; }
.iss span.n { color: var(--ink) !important; }
.iss span.n::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--sev-low); }
.iss span.n.critical::before { background: var(--sev-critical); }
.iss span.n.high::before { background: var(--sev-high); }
.iss span.n.medium::before { background: var(--sev-medium); }

@media (max-width: 860px) {
  .plate.page-plate { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .pp-art { justify-self: start; order: -1; }
  .pp-art .px-art { height: 72px; }
  .pp-figs { gap: var(--s-4) var(--s-6); }
  .report-row { grid-template-columns: auto minmax(0, 1fr); }
  .report-row > :last-child { grid-column: 2; justify-content: flex-start !important; }
}

/* ── Breite ──────────────────────────────────────────────────────────────────
 * Listen bekommen 1440 px statt 1120 (`shell(…, { wide: true })`): Tabellen,
 * Kartenraster und Platten nutzen die Breite eines großen Schirms. Fließtext
 * bleibt bei rund 75 Zeichen, weil längere Zeilen schwer zu lesen sind. Ganz
 * ohne Grenze geht es nicht: Auf 2560 px fände das Auge den Knopf am Ende einer
 * Tabellenzeile nicht mehr. Der Rand wächst mit dem Schirm mit.
 * Ab 1240 px Inhalt (etwa 1600 px Fenster) stehen Anleitungen als Spalte neben
 * der Tabelle (`.split`), Projekte und Berichtsblätter zu zweit nebeneinander. */
.main-wide { --colw: 1440px; }
.view { container: view / inline-size; }
@media (min-width: 861px) {
  .topbar, .view { padding-inline: clamp(var(--s-8), 3vw, var(--s-12)); }
}
.main-wide .card p, .main-wide .card li { max-width: 75ch; }
.split, .proj-grid, .report-docs { display: grid; gap: var(--s-4); align-items: start; }
.split > *, .proj-grid > *, .report-docs > * { min-width: 0; }
.report-docs { gap: 0 var(--s-10); }
.trouble-card .trouble { margin: 0; padding: 0; border: 0; }
@container view (min-width: 1240px) {
  .split { grid-template-columns: minmax(0, 1fr) 420px; }
  .proj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-docs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-docs > .report-row:nth-child(2) { border-top: 0; padding-top: 0; }
}

/* ── Einrichtung: der Plan neben dem Schritt ─────────────────────────────────
 * Links die Frage, rechts der Lauf, wie er bis hierher aussieht: ein Radar aus
 * acht Achteln (pxRadar), darunter jede Antwort. Ab 1100 px; schmaler bleibt es
 * bei der Leiste oben, sonst würde die Frage zu eng. */
.tk-wrap { display: grid; grid-template-columns: minmax(0, 40rem); justify-content: center; align-items: start; gap: var(--s-12); }
.tk-col { max-width: none; margin: 0; }
.tk-plan { display: none; }
@media (min-width: 1100px) {
  .tk-wrap { grid-template-columns: minmax(0, 40rem) 340px; }
  .tk-plan.plate { display: block; position: sticky; top: var(--s-10); padding: var(--s-6); animation: p1in .35s ease both; }
}
.tkp-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.tkp-k { font-size: 13px; line-height: 20px; color: #a9c4b6; }
.tkp-n { font-size: 13px; line-height: 20px; color: #a9c4b6; }
.tkp-n b { margin-right: 6px; font: 400 32px/36px var(--font); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--g-50); }
.tkp-radar { display: grid; place-items: center; margin: var(--s-5) 0 var(--s-4); }
.tkp-radar .px-radar { height: 198px; }
.tkp-say { margin: 0; min-height: 40px; font-size: 13px; line-height: 20px; color: #a9c4b6; text-align: center; text-wrap: balance; }
.tk-plan.armed .tkp-say { color: var(--mint); }
.tkp-list { margin: var(--s-4) 0 0; padding: var(--s-2) 0 0; list-style: none; border-top: 1px solid rgba(200, 235, 215, .1); }
.tkp-list a {
  display: grid; grid-template-columns: 8px 104px minmax(0, 1fr); gap: var(--s-3); align-items: start;
  margin: 0 calc(var(--s-2) * -1); padding: 6px var(--s-2); border-radius: var(--r-s);
  color: inherit; text-decoration: none; font-size: 13px; line-height: 20px; transition: background-color .12s;
}
.tkp-list a:hover { background: rgba(200, 235, 215, .06); }
.tkp-list i { width: 8px; height: 8px; margin-top: 6px; border-radius: 2px; box-shadow: inset 0 0 0 1.5px rgba(169, 196, 182, .35); }
.tkp-l { color: #a9c4b6; }
.tkp-v { color: rgba(232, 239, 234, .5); overflow-wrap: anywhere; }
.tkp-row.done i { background: var(--mint); box-shadow: none; }
.tkp-row.done .tkp-v { color: var(--g-50); }
.tkp-row.now .tkp-l { color: var(--g-50); font-weight: 500; }
.tkp-row.now i { box-shadow: inset 0 0 0 1.5px var(--mint); }
.tkp-row.now.done i { background: var(--mint); box-shadow: 0 0 0 3px rgba(92, 237, 163, .2); }

/* Die Leiste oben in derselben Form: Kästchen statt Kreise. Ihre Beschriftungen
   erst ab 1280 px: darunter schob die Leiste die Wortmarke über den Projektnamen,
   und ab 1100 px stehen die Namen ohnehin im Plan daneben. */
@media (max-width: 1280px) { .tk-step { width: 2.6rem; } .tk-lab { display: none; } }
.tk-dot { border-radius: 3px; }
.tk-step.now .tk-dot::after { border-radius: 1px; }

/* Der Start-Knopf, sobald unterschrieben ist und nichts im Weg steht. */
.btn-plate.armed { box-shadow: 0 0 0 4px var(--acctint), 0 10px 24px -12px rgba(10, 122, 80, .7); }

/* Der Verkehr bei „Safety": Zellen auf Waldgrün, darüber wandernde Pakete mit Schweif. */
.px-stream {
  --cells: 80; --dur: 3s;
  position: relative; height: 34px; margin: var(--s-4) 0 var(--s-2); overflow: hidden; border-radius: var(--r-m);
  background: conic-gradient(from 90deg at 2px 2px, transparent 25%, rgba(132, 244, 187, .07) 0) 0 0 / 8px 8px, var(--forest-deep);
}
.px-stream i {
  position: absolute; left: -22px; top: calc(2px + var(--lane) * 8px); width: 6px; height: 6px; border-radius: 1px;
  background: #84f4bb; box-shadow: -8px 0 0 rgba(132, 244, 187, .45), -16px 0 0 rgba(132, 244, 187, .18);
  transform: translateX(calc(var(--k) * var(--cells) * 8px));
}
.px-stream.hot i { background: #e6c867; box-shadow: -8px 0 0 rgba(230, 200, 103, .45), -16px 0 0 rgba(230, 200, 103, .18); }

@media (prefers-reduced-motion: no-preference) {
  .px-stream i { animation: px-run var(--dur) steps(var(--cells)) infinite; animation-delay: calc(var(--k) * var(--dur) * -1); }
  .px-art .fill { animation: px-fill .7s ease-out both; }
  .px-art .beam { animation: px-beam 3s linear infinite; }
  .btn-plate.armed { animation: px-arm 2.4s ease-in-out infinite; }
}
@keyframes px-run { from { transform: translateX(0); } to { transform: translateX(calc(var(--cells) * 8px + 24px)); } }
@keyframes px-fill { from { opacity: .07; } 55% { opacity: 1; } }
@keyframes px-beam { 0%, 3% { opacity: 1; } 40%, 100% { opacity: var(--o); } }
@keyframes px-arm { 50% { box-shadow: 0 0 0 7px var(--acctint), 0 10px 24px -12px rgba(10, 122, 80, .7); } }