/* spt-kit.components.scoped.css — dieselben Bausteine wie spt-kit.components.css, begrenzt auf
   Elemente unter [data-kit-scope] (v1.9.1). Für den Light-DOM-Inhalt eines Web Components:
   das Element setzt data-kit-scope auf seinen Wirt; die Seite bindet Token-Datei und diese Datei ein.
   Gemessen in Chrome 155 und Firefox 158 (@scope). */
@scope ([data-kit-scope]) {
/* ---------- 01 Grundlagen ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:var(--fs);
  line-height:var(--lh);-webkit-font-smoothing:antialiased}
code,.mono{font-family:var(--mono)}
button,input,select,textarea{font-family:inherit}
a{color:var(--accent)}
h1,h2,h3{font-family:var(--font-title);letter-spacing:-.018em;font-weight:600}
.grow{flex:1}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;min-width:0}
.stack{display:flex;flex-direction:column;gap:8px}
.muted{color:var(--muted)}
.faint{color:var(--faint)}
.right{margin-left:auto}
.nowrap{white-space:nowrap}
.hidden{display:none !important}
:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* ---------- 02 Kopfzeile ---------- */
.top{height:var(--top-h);flex:0 0 auto;background:var(--top-bg);color:var(--top-fg);
  display:flex;align-items:center;gap:13px;padding:0 15px;border-bottom:1px solid var(--top-line)}
.brand{display:flex;align-items:center;gap:9px}
.brand-mark{width:26px;height:26px;border-radius:var(--radius);background:var(--mark-bg);
  color:var(--on-accent);
  display:grid;place-items:center;font-family:var(--mono);font-size:var(--fs-mini);font-weight:700;flex-shrink:0}
.brand-text{font-family:var(--font-title);font-weight:700;letter-spacing:-.015em;font-size:15px}
.brand-text em{font-style:normal;color:var(--top-accent)}
.brand-tag{font-family:var(--mono);font-size:var(--fs-xs);color:var(--top-sub);text-transform:uppercase;
  letter-spacing:.08em;border-left:1px solid var(--top-line);padding-left:12px;margin-left:4px}
.top .sep{width:1px;height:23px;background:var(--top-line);flex-shrink:0}
.top-title{font-weight:600;font-size:14px;line-height:1.25}
.top-title small{display:block;font-weight:400;font-size:var(--fs-xs);color:var(--top-sub)}
.top-actions{display:flex;align-items:center;gap:8px}
.top-meta{display:flex;gap:18px;align-items:center;font-family:var(--mono);font-size:var(--fs-mini);
  color:var(--top-sub);text-transform:uppercase;letter-spacing:.06em}
.top-search{display:flex;align-items:center;gap:7px;height:31px;padding:0 11px;border-radius:var(--radius);
  background:var(--top-hover);color:var(--top-fg);font-size:var(--fs-s);min-width:200px;border:0}
.icon-btn{width:32px;height:32px;border-radius:var(--radius);display:grid;place-items:center;
  background:transparent;border:0;color:inherit;opacity:.85;font-size:14px;cursor:pointer}
.icon-btn:hover{background:var(--top-hover);opacity:1}
.panel .icon-btn,.panel-head .icon-btn{width:24px;height:24px;border:1px solid var(--border);
  background:var(--surface);color:var(--muted)}
.panel-head .icon-btn:hover{background:var(--surface-2);color:var(--text)}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--accent-soft);color:var(--accent-2);
  display:grid;place-items:center;font-size:var(--fs-mini);font-weight:700;flex-shrink:0}
kbd,.kbd{font-family:var(--font);font-size:11px;font-weight:700;padding:2px 6px;border-radius:4px;
  border:1px solid var(--border-strong);background:var(--surface);color:var(--muted);line-height:1.3}

/* Text auf --accent-soft steht durchgehend in --accent-2, nicht --accent:
   der helle Akzent erreicht auf seiner eigenen weichen Fläche keine 4.5:1. */

/* ---------- 03 Rahmen und Navigation ---------- */
.app-shell{display:flex;flex-direction:column;height:100vh;overflow:hidden}
.app-body{flex:1;display:flex;min-height:0}
.main{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0}

.tool-nav{flex:0 0 var(--nav-w);background:var(--surface);border-right:1px solid var(--border);
  padding:11px 9px;display:flex;flex-direction:column;gap:2px;overflow-y:auto}
.nav-cap{font-family:var(--mono);font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);padding:8px 10px 6px}
.tool-nav a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--radius);
  color:var(--text);text-decoration:none;font-size:var(--fs-sm)}
.tool-nav a .i{width:18px;text-align:center;opacity:.6;font-size:var(--fs-s)}
.tool-nav a:hover{background:var(--surface-2)}
.tool-nav a.on{background:var(--accent-soft);color:var(--accent-2);font-weight:650;box-shadow:var(--sel-bar)}
.tool-nav a.on .i{opacity:1}

.nav-rail{flex:0 0 var(--rail-w);background:var(--surface);border-right:1px solid var(--border);
  padding:12px 0;display:flex;flex-direction:column;align-items:center;gap:6px}
.nav-rail a{width:48px;height:48px;border-radius:var(--radius-lg);display:grid;place-items:center;
  color:var(--muted);text-decoration:none;font-size:17px;position:relative}
.nav-rail a:hover{background:var(--surface-2);color:var(--text)}
.nav-rail a.on{background:var(--accent-soft);color:var(--accent-2)}
.nav-rail .lbl{display:none;position:absolute;left:56px;top:50%;transform:translateY(-50%);
  background:var(--top-bg);color:var(--top-fg);font-size:var(--fs-mini);padding:4px 8px;border-radius:var(--radius);
  white-space:nowrap;z-index:5;border:1px solid var(--border)}
.nav-rail a:hover .lbl{display:block}
.nav-rail .spacer{flex:1}

.nav-tabs{display:flex;gap:2px;padding:0 14px;background:var(--surface);
  border-bottom:1px solid var(--border);overflow-x:auto}
.nav-tabs a{padding:12px 13px 11px;font-size:var(--fs-sm);color:var(--muted);text-decoration:none;
  border-bottom:2px solid transparent;white-space:nowrap}
.nav-tabs a.on{color:var(--accent);border-bottom-color:var(--accent);font-weight:650}

.tabs{display:flex;gap:2px;border-bottom:1px solid var(--border)}
.tabs a,.tabs button{padding:9px 12px;font-size:var(--fs-s);color:var(--muted);text-decoration:none;
  border:0;border-bottom:2px solid transparent;background:transparent;cursor:pointer}
.tabs a.on,.tabs button.on{color:var(--accent);border-bottom-color:var(--accent);font-weight:650}

/* ---------- 04 Seitenkopf und Rubriken ---------- */
.pagehead{padding:var(--pad) var(--pad-lg);background:var(--surface);border-bottom:1px solid var(--border);
  display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}
.pagehead h1{font-size:var(--fs-h1);margin:0}
.crumb{font-size:var(--fs-mini);color:var(--muted);margin-bottom:4px;font-family:var(--crumb-ff);
  text-transform:var(--crumb-tt);letter-spacing:var(--crumb-ls)}
.page-actions{display:flex;gap:8px;align-items:center;margin-left:auto}
.eyebrow{display:var(--eyebrow-d);align-items:center;gap:10px;font-family:var(--mono);font-size:var(--fs-xs);
  text-transform:uppercase;letter-spacing:.14em;color:var(--accent);margin-bottom:8px}
.eyebrow::before{content:'';display:block;width:24px;height:1px;background:var(--accent)}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:end;margin-bottom:24px}
.hero h1{font-size:var(--fs-h1);line-height:1.14;margin:0 0 10px}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero-lede{font-size:var(--fs-sm);color:var(--muted);line-height:1.6;max-width:62ch}
.hero-lede strong{color:var(--text);font-weight:600}
/* Volle Spaltenbreite statt der Lesebreite von 62 Zeichen (v1.6) — für Werkzeuge,
   deren Einleitung über der ganzen Arbeitsfläche steht. */
.hero-lede.wide{max-width:none}
@media (max-width:900px){.hero{grid-template-columns:1fr;gap:20px}}

/* ---------- 05 Schaltflächen und Eingaben ---------- */
.btn{height:var(--ctl-h);padding:0 13px;border-radius:var(--radius);border:1px solid var(--border-strong);
  background:var(--surface);color:var(--btn-fg);font-size:var(--fs-sm);font-weight:var(--btn-fw);
  cursor:pointer;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  transition:background .12s,border-color .12s}
.btn:hover{background:var(--surface-2);border-color:var(--faint)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.primary:hover{background:var(--accent-2);border-color:var(--accent-2)}
.btn.ghost{border-color:transparent;background:transparent;color:var(--muted)}
.btn.ghost:hover{background:var(--surface-2);color:var(--text)}
.btn.danger{color:var(--err)}
.btn.danger:hover{background:var(--err-soft);border-color:var(--err)}
.btn.small{height:26px;padding:0 10px;font-size:var(--fs-mini)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn-group{display:flex}
.btn-group .btn{border-radius:0}
.btn-group .btn+.btn{border-left:0}
.btn-group .btn:first-child{border-radius:var(--radius) 0 0 var(--radius)}
.btn-group .btn:last-child{border-radius:0 var(--radius) var(--radius) 0}
.btn-group .btn.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}

.inp,.sel,textarea.inp{height:var(--ctl-h);padding:0 10px;border:1px solid var(--field-border);
  border-radius:var(--radius);background:var(--surface);color:var(--text);font-size:var(--fs-sm);width:100%}
textarea.inp{height:auto;padding:8px 10px;line-height:1.5;font-family:var(--mono);font-size:var(--fs-s2)}
.inp:focus,.sel:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.inp::placeholder{color:var(--faint)}
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field label{font-size:var(--fs-xs);color:var(--muted);font-weight:650}
.field.auto{flex:0 0 auto}
.ro{height:var(--ctl-h);display:flex;align-items:center;padding:0 10px;border-radius:var(--radius);
  background:var(--surface-2);border:1px solid var(--border);color:var(--muted);font-size:var(--fs-sm)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px 15px}
.form-grid .full{grid-column:1/-1}
.group-title{font-family:var(--mono);font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted);padding-top:7px;border-top:1px solid var(--border);
  grid-column:1/-1;margin-top:4px}
@media (max-width:640px){.form-grid{grid-template-columns:1fr}}

.filterbar{display:flex;gap:9px;align-items:flex-end;padding:10px var(--pad-lg);
  background:var(--surface-2);border-bottom:1px solid var(--border);flex-wrap:wrap}
.chip{height:27px;padding:0 10px;border-radius:999px;border:1px solid var(--border-strong);
  background:var(--surface);font-size:var(--fs-s2);color:var(--muted);display:inline-flex;align-items:center;
  gap:6px;cursor:pointer}
.chip.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-2);font-weight:650}
.chip-btn{font-family:var(--mono);font-size:var(--fs-mini);padding:6px 10px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius);color:var(--text);cursor:pointer;
  display:inline-flex;align-items:center;gap:6px}
.chip-btn:hover{background:var(--surface-2);border-color:var(--faint)}

/* ---------- 06 Panels ---------- */
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);display:flex;flex-direction:column;min-width:0;overflow:hidden}
/* Grundlinie statt Mitte (v1.6): Überschrift (13,5px) und Zusatztext (13px)
   stehen nebeneinander und sollen auf einer Linie sitzen. */
.panel-head{display:flex;align-items:baseline;gap:10px;padding:10px 14px;border-bottom:1px solid var(--border);
  background:var(--ph-bg);font-family:var(--ph-ff);font-size:var(--ph-fs);font-weight:var(--ph-fw);
  text-transform:var(--ph-tt);letter-spacing:var(--ph-ls);color:var(--text);flex-shrink:0}
.panel-head h2{font-family:var(--font-title);font-size:13.5px;text-transform:none;letter-spacing:-.01em;
  font-weight:600;margin:0}
.panel-head .count{font-weight:400;color:var(--muted);text-transform:none;letter-spacing:0}
.panel-actions{display:flex;gap:4px;margin-left:auto;align-self:center;align-items:center}
/* Der Kopf richtet Text an der Grundlinie aus; alles Bedienbare steht mittig. */
.panel-head>.btn,.panel-head>.btn-group,.panel-head>.icon-btn,.panel-head>.inp,.panel-head>.sel,.panel-head>.chip,.panel-head>.chip-btn,.panel-head>.badge,.panel-head>.status-chip{align-self:center}
.panel-search{padding:10px 14px;border-bottom:1px solid var(--border);flex-shrink:0}
.panel-search .inp{font-family:var(--mono);font-size:var(--fs-mini);background:var(--surface-2)}
.panel-body{flex:1;overflow:auto;min-height:0}
.panel-body.pad{padding:15px}
.panel-foot{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--border);
  background:var(--surface-2);flex-shrink:0}
.panel-foot .btn{flex:1;justify-content:center}

.workarea{flex:1;min-height:0;display:flex}
.workarea>.panel{border-radius:0;border:0;border-right:1px solid var(--border);box-shadow:none}
.workarea>.panel:last-child{border-right:0}
.split2{display:grid;grid-template-columns:420px 1fr;gap:18px;align-items:start}
.split3{display:grid;grid-template-columns:380px 1fr 380px;gap:18px;align-items:start}
@media (max-width:1100px){.split2,.split3{grid-template-columns:1fr}}

/* ---------- 07 Tabellen und Baumzeilen ---------- */
table.tbl{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.tbl thead th{text-align:left;padding:8px 14px;font-family:var(--ph-ff);font-size:var(--fs-xs);
  text-transform:uppercase;letter-spacing:.05em;color:var(--muted);background:var(--surface-2);
  border-bottom:1px solid var(--border);font-weight:700;white-space:nowrap;position:sticky;top:0;z-index:1}
.tbl tbody td{padding:var(--row-pad) 14px;border-bottom:1px solid var(--border);vertical-align:top}
.tbl tbody tr:hover{background:var(--surface-2)}
.tbl tbody tr.selected{background:var(--accent-soft)}
.tbl tbody tr.selected td:first-child{box-shadow:var(--sel-bar)}
.tbl .num{text-align:right;font-family:var(--mono)}
.val{font-family:var(--mono);font-size:var(--fs-s2);border:1px solid var(--val-bd);background:var(--val-bg);
  padding:var(--val-pad)}
.sub{display:block;color:var(--muted);font-size:var(--fs-xs);margin-top:2px}

/* Zebra-Streifung: trägt das Auge bei langen Listen, wo Hover nicht reicht.
   Eigenes Token, weil --surface-2 im Dunkeln zu nah an --surface liegt. */
.tbl.zebra tbody tr:nth-child(even){background:var(--zebra)}
.tbl.zebra tbody tr:hover{background:var(--surface-2)}
.tbl.zebra tbody tr.selected{background:var(--accent-soft)}

/* Dokumentansicht als Tabelle — dieselbe Rolle wie .tree-row, aber für lange
   Listen (Hunderte Zeilen): echter <thead> mit sticky, Zebra, td-Raster.
   .tree-row bleibt für kleine, aufklappbare Bäume in Panels. */
.tbl.tree tbody td{padding:4px 10px;font-family:var(--mono);font-size:var(--fs-s2);line-height:1.4;
  vertical-align:top;border-bottom:1px solid var(--border)}
.tbl.tree tbody td.pos{width:1%;white-space:nowrap;font-size:10px;color:var(--faint);
  padding-top:6px;user-select:none}
.tbl.tree tbody td.name{color:var(--muted)}
.tbl.tree tbody td.value{color:var(--text);width:50%}
.tbl.tree .val{word-break:break-word}

.tree-row{display:grid;grid-template-columns:auto 1fr;gap:10px;padding:5px 14px 5px 8px;
  border-bottom:1px solid var(--border);font-size:var(--fs-s2);line-height:1.4}
.tree-row:hover{background:var(--surface-2)}
.tree-row.clickable{cursor:pointer}
.tree-row.selected{background:var(--accent-soft);box-shadow:var(--sel-bar)}
.row-toggle{width:16px;height:16px;display:grid;place-items:center;color:var(--faint);cursor:pointer;
  user-select:none;flex-shrink:0}
.row-toggle.leaf{visibility:hidden}
.tree-pos{font-family:var(--mono);font-size:10px;color:var(--faint)}
.lvl-0{padding-left:0}.lvl-1{padding-left:14px}.lvl-2{padding-left:28px}.lvl-3{padding-left:42px}
.lvl-4{padding-left:56px}.lvl-5{padding-left:70px}.lvl-6{padding-left:84px}.lvl-7{padding-left:98px}
.lvl-8{padding-left:112px}

/* ---------- 08 Kennzeichen ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;height:21px;padding:0 8px;border-radius:var(--badge-r);
  font-size:var(--fs-xs);font-weight:700;border:1px solid var(--badge-bd);
  text-transform:var(--badge-tt);letter-spacing:var(--badge-ls)}
.badge.ok{background:var(--ok-soft);color:var(--ok)}
.badge.warn{background:var(--warn-soft);color:var(--warn)}
.badge.err{background:var(--err-soft);color:var(--err)}
.badge.info{background:var(--info-soft);color:var(--info)}
.badge.mute{background:var(--surface-2);color:var(--muted);border-color:var(--border)}
.dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0}
.status-chip{font-family:var(--mono);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;
  padding:6px 12px;border:1px solid var(--border);border-radius:var(--radius);color:var(--muted);
  background:var(--surface-2);display:inline-flex;align-items:center;gap:6px}
.status-chip .dot{background:var(--faint)}
.status-chip.ok .dot{background:var(--ok)}
.status-chip.warn .dot{background:var(--warn)}
.status-chip.err .dot{background:var(--err)}
/* Dreistufige Schwere für Berichte */
.sev{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;
  text-transform:uppercase;letter-spacing:.08em;padding:3px 8px;border:1px solid currentColor;
  border-radius:var(--badge-r)}
.sev.error{color:var(--err);background:var(--err-soft)}
.sev.warn{color:var(--warn);background:var(--warn-soft)}
.sev.info{color:var(--info);background:var(--info-soft)}
/* Kardinalität und Pflichtgrad */
.card-mark{font-family:var(--mono);font-size:9.5px;padding:1px 5px;border:1px solid var(--border);
  color:var(--muted);border-radius:var(--badge-r)}
.lv-badge{display:inline-grid;place-items:center;width:15px;height:15px;border-radius:var(--badge-r);
  font-family:var(--mono);font-size:9px;font-weight:700;flex-shrink:0}
.lv-badge.pflicht{background:var(--err-soft);color:var(--err)}
.lv-badge.normal{background:var(--info-soft);color:var(--info)}
.lv-badge.optional{background:var(--surface-2);color:var(--faint)}
.mark{background:var(--mark);color:#3f2d00;padding:0 2px}


/* ---------- 08b Signalkante ---------- */
/* „Linien statt Schatten" ist das Kernmittel des Kits — hier ist es einstellbar.
   Zwei Mechaniken unter denselben Namen, weil eine allein nicht überall trägt:
   · Block (Karte, Meldung, Befund): border-left — überlebt Graustufendruck.
   · Tabellenzeile: box-shadow inset auf der ersten Zelle — überschreibt die
     Zebra-Streifung, die ein border-left auf <tr> nicht überdeckt. */
.edge{border-left:var(--sig-w) solid var(--border-strong)}
.edge-ok{border-left:var(--sig-w) solid var(--ok)}
.edge-warn{border-left:var(--sig-w) solid var(--warn)}
.edge-err{border-left:var(--sig-w) solid var(--err)}
.edge-info{border-left:var(--sig-w) solid var(--accent)}
.tbl tr.edge-ok td:first-child{box-shadow:inset var(--sig-w) 0 0 var(--ok)}
.tbl tr.edge-warn td:first-child{box-shadow:inset var(--sig-w) 0 0 var(--warn)}
.tbl tr.edge-err td:first-child{box-shadow:inset var(--sig-w) 0 0 var(--err)}
.tbl tr.edge-info td:first-child{box-shadow:inset var(--sig-w) 0 0 var(--accent)}
.tbl tr.edge-ok,.tbl tr.edge-warn,.tbl tr.edge-err,.tbl tr.edge-info{border-left:0}

/* ---------- 09 Urteilsbanner ---------- */
.verdict{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 20px;
  background:var(--text);color:var(--verdict-fg)}
.verdict.pass{background:var(--ok)}
.verdict.warn{background:var(--warn)}
.verdict.fail{background:var(--err)}
.verdict-title{font-family:var(--font-title);font-weight:600;font-size:17px;letter-spacing:-.01em}
.verdict-desc{font-size:var(--fs-s);opacity:.92;margin-top:3px;max-width:78ch}
.verdict-stamp{font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.1em;
  padding:6px 11px;border:1px solid currentColor;flex-shrink:0;opacity:.85}

/* ---------- 10 Befunde und Regeln ---------- */
.findings{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);overflow:hidden}
.finding{padding:15px 18px;border-top:1px solid var(--border);cursor:pointer}
.finding:first-child{border-top:none}
.finding:where(:not(.static)):hover{background:var(--surface-2)}
.finding.active{background:var(--accent-soft);border-left:var(--sig-w) solid var(--accent);
  padding-left:15px}
.finding-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:7px}
.finding-rule{font-family:var(--mono);font-size:11.5px;color:var(--muted);font-weight:500}
.finding-title{font-family:var(--font-title);font-weight:600;font-size:14.5px;margin-bottom:6px;
  line-height:1.35}
.finding-bt{display:inline-block;font-family:var(--mono);font-size:11px;color:var(--accent-2);
  background:var(--accent-soft);padding:2px 8px;margin-bottom:7px;border:1px solid var(--border);
  border-radius:var(--badge-r)}
.finding-explain{font-size:var(--fs-s);color:var(--muted);line-height:1.5;margin-bottom:9px}
.finding-fix{background:var(--surface-2);border-left:var(--sig-w) solid var(--accent);
  padding:9px 13px;font-size:var(--fs-s)}
.fix-label{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);margin-bottom:4px}
.rule-list{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);overflow:hidden}
.rule-item{padding:11px 15px;border-top:1px solid var(--border);display:flex;gap:10px;align-items:baseline}
.rule-item:first-child{border-top:none}
.rule-id{font-family:var(--mono);font-size:11.5px;font-weight:700;color:var(--accent-2);flex-shrink:0}
.rule-text{font-size:var(--fs-s2);color:var(--muted);line-height:1.45}

/* ---------- 10b Befundbericht (v1.8, nach Befund vom 19.10.2026) ---------- */
/* Urteilsbalken mit großer Zahl links, Wertepaare BT-Plakette + Wert unter der
   Erklärung, leiser Zusatzsatz, Werte aus der Rechnung im Kästchen und eine
   Befundkarte, die nicht anklickbar ist. Gebraucht von Validatoren und
   Inbound Check; .finding-bt-value braucht keine eigene Regel, es steht immer
   zusammen mit .doc-elem-val.
   <div class="verdict fail"><div class="verdict-main">
     <div class="verdict-count">2</div>
     <div><div class="verdict-title">…</div><div class="verdict-desc">…</div></div></div>
     <div class="verdict-stamp">abgelehnt</div></div>
   <div class="finding-bt-list"><span class="finding-bt">BT-48</span>
     <span class="doc-elem-val finding-bt-value">123456789</span></div> */
.verdict-main{display:flex;align-items:center;min-width:0}
.verdict-count{font-family:var(--font-title);font-size:34px;font-weight:700;line-height:1;letter-spacing:-.02em;margin-right:18px;flex-shrink:0}
.finding-bt-list{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-bottom:8px}
.finding-bt-list .finding-bt{margin-bottom:0}
.doc-elem-val{color:var(--text);font-weight:600;background:var(--surface-2);padding:1px 6px;border:1px solid var(--border);border-radius:var(--badge-r)}
.doc-elem-val.is-missing{background:transparent;border-style:dashed;color:var(--faint);font-weight:400;font-style:italic}
.finding-explain-notice{font-size:var(--fs-mini);font-style:italic;color:var(--muted);margin:-6px 0 10px}
.finding.static{cursor:default}

/* ---------- 11 Kennzahlenband ---------- */
.meta-card{display:grid;grid-template-columns:repeat(4,1fr);background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);
  margin:18px 0;overflow:hidden}
.meta-item{padding:12px 16px;border-right:1px solid var(--border)}
.meta-item:last-child{border-right:none}
.meta-label{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);margin-bottom:4px}
.meta-value{font-size:var(--fs-sm);font-weight:600}
@media (max-width:820px){.meta-card{grid-template-columns:repeat(2,1fr)}
  .meta-item{border-bottom:1px solid var(--border)}}

/* ---------- 12 Dialog, Befehlspalette, Meldung, Leerzustand ---------- */
.modal-backdrop{position:fixed;inset:0;background:rgba(11,18,32,.45);display:grid;place-items:center;
  padding:20px;z-index:100}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);max-width:560px;width:100%;max-height:86vh;display:flex;flex-direction:column}
.modal-head{padding:13px 15px;border-bottom:1px solid var(--border);font-family:var(--font-title);
  font-weight:600;font-size:14.5px;display:flex;align-items:center;gap:10px}
.modal-body{padding:15px;font-size:var(--fs-sm);overflow:auto}
.modal-foot{padding:11px 15px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;
  gap:8px;background:var(--surface-2)}
.cmdpal{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);
  box-shadow:var(--shadow-lg);overflow:hidden;max-width:520px;width:100%}
.cmdpal-input{padding:11px 14px;border-bottom:1px solid var(--border);color:var(--muted);
  font-size:var(--fs-sm);display:flex;align-items:center;gap:9px}
.cmdpal-row{padding:10px 14px;display:flex;align-items:center;gap:10px;font-size:var(--fs-sm);
  border-bottom:1px solid var(--border);cursor:pointer}
.cmdpal-row:last-child{border-bottom:none}
.cmdpal-row.on{background:var(--accent-soft);color:var(--accent-2);font-weight:650}
.note{display:flex;align-items:flex-start;gap:10px;padding:11px 13px;border-radius:var(--radius);
  font-size:var(--fs-sm);border:1px solid;border-left-width:var(--sig-w)}
.note.ok{background:var(--ok-soft);color:var(--ok);border-color:var(--ok)}
.note.warn{background:var(--warn-soft);color:var(--warn);border-color:var(--warn)}
.note.err{background:var(--err-soft);color:var(--err);border-color:var(--err)}
.note.info{background:var(--info-soft);color:var(--info);border-color:var(--info)}
.note-mark{font-family:var(--mono);font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;padding:2px 6px;background:currentColor;flex-shrink:0}
.note-mark span{color:var(--surface)}
.empty{text-align:center;padding:30px 18px;color:var(--muted)}
.empty-icon{font-size:28px;opacity:.35}
.empty-title{font-family:var(--font-title);font-weight:600;font-size:14.5px;color:var(--text);
  margin:9px 0 4px}
.empty p{font-size:var(--fs-s);margin-bottom:13px}
/* Gegenstück zu .empty: nicht „nichts da", sondern „hier geht es weiter".
   Immer mit Zahl — die Grenze ist eine Aussage über die Daten, keine Fehlermeldung. */
.truncated{font-family:var(--mono);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);background:var(--surface-2);border-top:1px solid var(--border);padding:9px 14px}
.truncated::before{content:'';display:inline-block;width:18px;height:1px;vertical-align:middle;
  background:var(--border-strong);margin-right:10px}
.truncated b{color:var(--text);font-weight:700}
.tbl .truncated td,td.truncated{display:table-cell}

/* ---------- 13 Datei-Ablage (v1.5, nach O39) ---------- */
/* Eine Fläche für die ganze Reihe, gestaltet nach dem Viewer: eine mittige
   Spalte mit gestricheltem 2-px-Rahmen auf --surface-2. Die Breite steht in
   der Marke --drop-max; ein Werkzeug, das die Fläche anders braucht, setzt nur
   die Marke um. Zustände: :hover und :focus (Tastatur), .drag beim
   Darüberziehen einer Datei, .busy während der Verarbeitung.
   <div class="drop" tabindex="0" role="button" aria-label="Datei wählen">
     <div class="drop-title">Rechnung hier ablegen</div>
     <div class="drop-sub">oder klicken, um eine <code>PDF</code>- oder <code>XML</code>-Datei zu wählen</div>
   </div> */
.drop{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-align:center;min-height:150px;max-width:var(--drop-max);margin:0 auto;padding:28px;background:var(--surface-2);border:2px dashed var(--border-strong);border-radius:var(--radius-lg);cursor:pointer;transition:background .12s,border-color .12s}
.drop:hover,.drop:focus{border-color:var(--accent);background:var(--accent-soft)}
.drop.drag{border-color:var(--accent-2);background:var(--accent-soft)}
.drop.busy{opacity:.6;pointer-events:none}
.drop.busy::after{content:'';position:absolute;top:50%;left:50%;width:26px;height:26px;margin:-13px 0 0 -13px;box-sizing:border-box;border:3px solid var(--accent-soft);border-top-color:var(--accent-2);border-radius:50%;animation:drop-spin .8s linear infinite}
@keyframes drop-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.drop.busy::after{animation-duration:2.4s}}
/* Symbol über dem Titel (bisher nur in der Vergleichsprüfung) */
.drop-icon{width:52px;height:52px;margin-bottom:6px;border:1px solid var(--border);border-radius:var(--radius);display:grid;place-items:center;background:var(--surface);color:var(--accent);font-size:20px}
.drop-title{font-family:var(--font-title);font-weight:600;font-size:16px}
.drop-sub{color:var(--muted);font-size:var(--fs-s)}
/* Formatmarke im Satz: PDF, XML — Dateiformate, die in keiner Sprache übersetzt werden */
.drop-sub code{font-family:var(--mono);font-size:.92em;font-weight:600;letter-spacing:.04em;padding:1px 5px;border:1px solid var(--border-strong);border-radius:0;background:var(--surface);color:var(--text)}
.drop:hover .drop-sub code,.drop:focus .drop-sub code{border-color:var(--accent);color:var(--accent)}
.drop.drag .drop-sub code{border-color:var(--accent-2);color:var(--accent-2)}
.samples{margin-top:16px;display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap}
.samples-label{font-family:var(--mono);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--faint)}

/* ---------- 14 Code, Statusleiste, Fußzeile ---------- */
.codeblock{font-family:var(--mono);font-size:var(--fs-s2);line-height:1.55;background:var(--code-bg);
  border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;white-space:pre;
  overflow:auto;color:var(--text)}
.codeblock .k{color:var(--accent)}
.codeblock .s{color:var(--ok)}
.codeblock .c{color:var(--muted)}
.statusbar{flex:0 0 auto;height:35px;display:flex;align-items:center;gap:15px;padding:0 var(--pad-lg);
  background:var(--surface);border-top:1px solid var(--border);font-size:var(--fs-s2);color:var(--muted)}
.statusbar b{color:var(--text)}
.kbd-hints{display:flex;gap:12px}
.kbd-hints span{display:inline-flex;align-items:center;gap:5px}
.docfoot{margin-top:18px;padding-top:14px;border-top:1px solid var(--border);font-family:var(--mono);
  font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ---------- 15 Layout-Typ 2: Bericht / Dokument ---------- */
.doc{flex:1;overflow:auto;background:var(--bg)}
.doc-inner{max-width:var(--doc-w);margin:0 auto;padding:26px 24px 60px}
.doc-inner h1{font-size:var(--fs-h1);line-height:1.14;margin:0 0 10px}
.doc-inner h1 em{font-style:normal;color:var(--accent)}
.doc-inner h2{font-size:var(--fs-h2);margin:26px 0 10px}
.doc-cols{display:grid;grid-template-columns:1.5fr 1fr;gap:18px;align-items:start}
@media (max-width:900px){.doc-cols{grid-template-columns:1fr}}

/* ---------- 16 Schmale Fenster ---------- */
@media (max-width:820px){
  .tool-nav{display:none}
  .app-shell{height:auto;min-height:100vh;overflow:visible}
  .workarea{flex-direction:column}
  .workarea>.panel{border-right:0;border-bottom:1px solid var(--border)}
  .pagehead{align-items:flex-start;flex-direction:column;gap:10px}
  .page-actions{margin-left:0}
}


/* ---------- 17 Toast: kurze Rückmeldung unten mittig ---------- */
/* Markup einmal vor </body>: <div class="toast" id="toast"></div> · JS: toast('Gespeichert') */
.toast{position:fixed;left:50%;bottom:46px;transform:translate(-50%,10px);z-index:200;
  max-width:min(70ch,90vw);padding:9px 15px;border-radius:var(--radius);background:var(--top-bg);
  color:var(--top-fg);font-size:var(--fs-sm);box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;
  transition:opacity .16s,transform .16s}
.toast.show{opacity:1;transform:translate(-50%,0)}
/* Schriftfarbe wie beim Urteilsbanner: im Dunkelmodus sind --warn und --err
   aufgehellt, weiß darauf fällt unter 3:1. --verdict-fg dreht im Dunkeln auf
   dunkle Schrift. */
.toast.warn{background:var(--warn);color:var(--verdict-fg)}
.toast.err{background:var(--err);color:var(--verdict-fg)}

/* ---------- 17b Belegansicht (v1.4.1, nach O35, O37 und O38) ---------- */
/* Grundsatz: Jedes BG und jedes BT wird gezeigt, belegt oder nicht.
   Was ausgeblendet wird, entscheidet der Leser (Schalter .only-filled).
   Seit 1.4 hat die Belegansicht eigene Namen für Block, Blockkopf,
   Zwischenüberschrift, Feldzeile und Wertfeld (.doc-block, .doc-block-head,
   .doc-subhead, .doc-field, .doc-value). .panel, .panel-head und .field
   bleiben unverändert: Validatoren, Explorer und Technische Angaben benutzen
   sie, und eine dunkle Fahne gehört in einen Beleg, nicht in einen Prüfbericht. */

/* Dokumentkopf: Rechnungsart, Nummer und Datum links, Betrag rechts in einem
   gefüllten Feld. Verlauf von --accent-2 nach --accent, 3 px Unterkante.
   <div class="doc-head">
     <div class="doc-head-main">
       <div class="doc-head-type">Handelsrechnung · 380</div>
       <div class="doc-head-title">RE-2026-0815</div>
       <div class="doc-head-meta">Rechnungsdatum 07.10.2026</div></div>
     <div class="doc-head-amount">
       <div class="doc-head-label">Zahlbetrag</div>
       <div class="doc-head-value">1.190,00 EUR</div></div>
   </div> */
.doc-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;padding:16px 20px;background:linear-gradient(135deg,var(--accent-2),var(--accent));color:var(--on-accent);border-radius:var(--radius-lg);border-bottom:3px solid var(--accent-2)}
.doc-head-main{min-width:0}
.doc-head-type{font-family:var(--mono);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.1em;opacity:.9}
.doc-head-title{font-family:var(--font-title);font-size:26px;font-weight:700;letter-spacing:-.015em;line-height:1.25;margin-top:3px}
.doc-head-meta{font-size:var(--fs-sm);opacity:.92;margin-top:3px}
.doc-head-amount{margin-left:auto;text-align:right;padding:8px 14px;background:var(--accent-2);border-radius:var(--radius)}
.doc-head-label{font-family:var(--mono);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.1em;opacity:.9}
.doc-head-value{font-family:var(--mono);font-size:21px;font-weight:600;white-space:nowrap}

/* Dokumentraster: zwei gleich breite Spalten; .full läuft über alle Spalten.
   minmax(0,1fr) statt 1fr, damit eine breite Tabelle die Spalte nicht aufzieht. */
.doc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,max(300px,calc(50% - 7px))),1fr));gap:14px;align-items:start}
.doc-grid>.full{grid-column:1/-1}
@media (max-width:760px){.doc-grid{grid-template-columns:minmax(0,1fr)}}

/* Block der Belegansicht (ein BG). Der Blockkopf ist eine Fahne: nur so breit
   wie ihr Text, oben links auf dem Rahmen. Der Körper ist ein Container, an
   dessen Breite die Feldzeile ihre Form wählt.
   <section class="doc-block">
     <h3 class="doc-block-head">Verkäufer <span class="badge code">BG-4</span></h3>
     <div class="doc-block-body"> … .doc-field … .doc-subhead … </div>
   </section> */
.doc-block{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden;min-width:0;container-type:inline-size;container-name:docblock}
.doc-block-head{display:inline-flex;align-items:center;gap:8px;margin:0;padding:7px 16px;background:var(--accent-2);color:var(--on-accent);font-family:var(--font-title);font-size:14px;font-weight:700;letter-spacing:-.005em;line-height:1.35;border-radius:0 0 var(--radius) 0}
.doc-block-body{container-type:inline-size;padding:12px 16px 16px}

/* Zwischenüberschrift: eine Gruppe in einer Gruppe (etwa BG-12 in BG-11).
   Dieselbe Fahnenform, kleiner und hell. */
.doc-subhead{display:inline-flex;align-items:center;gap:8px;margin:10px 0 8px;padding:5px 12px;background:var(--surface-2);color:var(--accent-2);font-family:var(--font-title);font-size:13.5px;font-weight:700;line-height:1.35;border-radius:var(--radius)}
.doc-subgroup{margin-top:4px}

/* Feldzeile: zwei Spalten (Beschriftung 42 %, Wert), solange der Block breit
   genug ist; gestapelt, sobald der Block schmaler als 420 px ist. Die Abfrage
   richtet sich nach dem Block, nicht nach dem Fenster — derselbe Block kann
   im breiten Raster neben einem anderen oder allein über volle Breite stehen.
   <div class="doc-field">
     <div class="doc-label">Name <span class="badge code">BT-27</span></div>
     <div class="doc-value">Beispiel Handel GmbH</div></div> */
.doc-field{display:grid;grid-template-columns:42% minmax(0,1fr);gap:4px 12px;align-items:start;margin-bottom:8px}
.doc-field:last-child{margin-bottom:0}
.doc-label{font-size:var(--fs-s);color:var(--muted);padding-top:7px;min-width:0;overflow-wrap:anywhere}
/* Wertfeld in der Lauftextschrift, 14 px — nicht in --mono (O38): ein Beleg
   besteht zu neun Zehnteln aus Wertfeldern und soll sich nicht wie eine
   Protokolldatei lesen. Eine Feldzeile ist so 33 px hoch, mit 8 px Abstand. */
.doc-value{min-height:32px;padding:6px 10px;background:var(--accent-soft);color:var(--text);border-radius:var(--radius);font-family:var(--font);font-size:14px;line-height:1.5;min-width:0;overflow-wrap:anywhere}
@container (max-width:420px){.doc-field{grid-template-columns:minmax(0,1fr)}.doc-label{padding-top:0}}

/* Breiter Block (ab 900 px, nach O38): die Feldzeilen laufen in zwei Spalten
   nebeneinander, also vier Spalten in einer Reihe. Die Abfrage misst den
   Block (docblock) eine Ebene über dem Körper; die Feldzeile darin misst
   weiter den Körper und bleibt bei je 42 % Beschriftung. 900 px statt
   420 px, weil jede Hälfte wieder Platz für Beschriftung und Wert braucht.
   Eine Untergruppe läuft über beide Spalten: ihre Fahne gehört über ihre
   Felder und nicht neben ein fremdes Feld. Ihre eigenen Felder stehen
   darunter im selben Zweierraster wie die Felder des Blocks. */
@container docblock (min-width:900px){.doc-block-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:28px;row-gap:8px;align-items:start}.doc-block-body>.doc-field{margin-bottom:0}.doc-block-body>.doc-subgroup{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:28px;row-gap:8px;align-items:start}.doc-block-body>.doc-subgroup>.doc-subhead{grid-column:1/-1;justify-self:start;margin-bottom:0}.doc-block-body>.doc-subgroup>.doc-field{margin-bottom:0}}

/* Kennung auf dunklem Grund (Dokumentkopf, Blockkopf): Schrift in der Farbe
   des Grundes, Fläche als durchscheinende Stufe davon. */
.doc-head .badge.code,.doc-block-head .badge.code{color:var(--on-accent);background:color-mix(in srgb,var(--on-accent) 25%,transparent);border-color:transparent}

/* Positionsgruppe: hellgraue Fläche, 4 px Kante aus --accent, Überschrift in
   der Titelschrift; darin wieder ein .doc-grid mit .doc-block. */
.doc-group{background:var(--surface-2);border:1px solid var(--border);border-left:4px solid var(--accent);border-radius:var(--radius-lg);overflow:hidden}
.doc-group+.doc-group{margin-top:14px}
.doc-group-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 14px 0;color:var(--accent-2)}
.doc-group-head h2{font-family:var(--font-title);font-size:15px;font-weight:700;letter-spacing:-.01em;margin:0;color:var(--accent-2)}
.doc-group>.doc-grid{padding:12px 14px 14px}

/* Summenblock: senkrechte Liste aus Beschriftung und Betrag. Zwei Hervor-
   hebungen auf --accent-soft: .grand (Gesamtbetrag, 16 px) und .due (Zahlbetrag). */
.totals{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden}
.totals-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:baseline;padding:7px 14px;border-top:1px solid var(--border);font-size:var(--fs-sm)}
.totals-row:first-child{border-top:0}
.totals-label{color:var(--muted)}
.totals-amount{font-family:var(--mono);text-align:right;white-space:nowrap}
.totals-row.grand{background:var(--accent-soft);color:var(--accent-2);font-size:16px;font-weight:700;border-top-color:var(--border-strong)}
.totals-row.grand .totals-label{color:var(--accent-2)}
.totals-row.due{background:var(--accent-soft);color:var(--accent-2);font-weight:700;border-top-color:var(--border-strong)}
.totals-row.due .totals-label{color:var(--accent-2)}

/* Dichte Codemarke für BT/BG hinter einer Beschriftung. Passt in die Zeile,
   ohne sie höher zu machen (.badge ist 21 px hoch). */
.badge.code{height:auto;padding:1px 6px;font-family:var(--mono);font-size:var(--fs-xs);font-weight:600;line-height:1.15;text-transform:none;letter-spacing:0;vertical-align:baseline;color:var(--muted);background:var(--surface-2);border-color:var(--border)}

/* ---------- 17c Zustand „trägt keinen Wert" (v1.3, erweitert in v1.4) ---------- */
/* .blank steht immer neben dem Baustein selbst, nie allein: an einer Feld-
   zeile, an einer Tabellenzeile oder an einem ganzen Block. Sichtbar bleibt
   sie: der Leser soll sehen, welches Feld die Norm vorsieht und dieser Beleg
   weglässt. Eine Tabelle kann belegte und leere Zeilen mischen — die Marke
   gehört deshalb an jede Zeile. Ein Block, dessen Zeilen alle leer sind,
   bekommt selbst .blank, sonst bliebe seine Überschrift über nichts stehen.
   Platzhalter für den fehlenden Wert: <span class="val faint">—</span>. */
.field.blank .val,.tree-row.blank,.tbl tbody tr.blank td,.panel.blank .panel-body{color:var(--faint)}
.panel.blank>.panel-head{color:var(--faint)}
.tree-row.blank .val{background:transparent}
/* Belegansicht (v1.4): ein leeres Wertfeld steht kursiv in der blassen Farbe;
   ein leerer Block trägt eine helle Fahne statt der dunklen; eine leere
   Untergruppe blasst ihre Zwischenüberschrift ab. */
.doc-field.blank .doc-value{font-style:italic;color:var(--faint)}
.doc-block.blank>.doc-block-head{background:var(--accent-soft);color:var(--accent-2)}
.doc-block.blank>.doc-block-head .badge.code{color:var(--accent-2);background:color-mix(in srgb,var(--accent-2) 12%,transparent)}
.doc-subgroup.blank>.doc-subhead{color:var(--faint)}

/* „Nur gefüllte Felder anzeigen": der Schalter setzt allein diese Klasse am
   Behälter. Nichts wird neu gezeichnet und nichts aus dem Dokument entfernt. */
.only-filled .field.blank,.only-filled .tree-row.blank,.only-filled .tbl tbody tr.blank,.only-filled .panel.blank,.only-filled .doc-field.blank,.only-filled .doc-subgroup.blank,.only-filled .doc-block.blank{display:none}

/* ---------- 17d Schwere vor Auswahl (v1.3, nach O35) ---------- */
/* 1  Die Schwere bekommt eine eigene Fläche, nicht nur eine Kante. Blau bleibt
      dem Hinweis (.edge-info) und hat keine Fläche. */
.edge-ok{background:var(--ok-soft)}
.edge-warn{background:var(--warn-soft)}
.edge-err{background:var(--err-soft)}

/* 2  Tabelle: Fläche und Kante der Schwere stehen mit derselben Spezifität wie
      Auswahl, Zebra und Hover, aber später — und gewinnen deshalb. Die Auswahl
      zeigt sich an einer Schwere-Zeile als Rahmen innen. Kein !important.
      Der Rahmen liegt als innerer Schatten auf den Zellen, nicht als outline
      auf <tr>: outline an Tabellenzeilen zeichnen nicht alle Browser, und die
      Zeile wäre dann nicht als ausgewählt erkennbar (v1.3.1). */
.tbl tbody tr.edge-ok,.tbl.zebra tbody tr.edge-ok{background:var(--ok-soft)}
.tbl tbody tr.edge-warn,.tbl.zebra tbody tr.edge-warn{background:var(--warn-soft)}
.tbl tbody tr.edge-err,.tbl.zebra tbody tr.edge-err{background:var(--err-soft)}
.tbl tbody tr.edge-ok td:first-child{box-shadow:inset var(--sig-w) 0 0 var(--ok)}
.tbl tbody tr.edge-warn td:first-child{box-shadow:inset var(--sig-w) 0 0 var(--warn)}
.tbl tbody tr.edge-err td:first-child{box-shadow:inset var(--sig-w) 0 0 var(--err)}
.tbl tbody tr.edge-info td:first-child{box-shadow:inset var(--sig-w) 0 0 var(--accent)}
.tbl tbody tr.selected.edge-ok td,.tbl tbody tr.selected.edge-warn td,.tbl tbody tr.selected.edge-err td,.tbl tbody tr.selected.edge-info td{
  box-shadow:inset 0 2px 0 var(--accent),inset 0 -2px 0 var(--accent)}
.tbl tbody tr.selected.edge-ok td:last-child,.tbl tbody tr.selected.edge-warn td:last-child,.tbl tbody tr.selected.edge-err td:last-child,.tbl tbody tr.selected.edge-info td:last-child{
  box-shadow:inset -2px 0 0 var(--accent),inset 0 2px 0 var(--accent),inset 0 -2px 0 var(--accent)}
.tbl tbody tr.selected.edge-ok td:first-child{box-shadow:inset var(--sig-w) 0 0 var(--ok),
  inset 0 2px 0 var(--accent),inset 0 -2px 0 var(--accent)}
.tbl tbody tr.selected.edge-warn td:first-child{box-shadow:inset var(--sig-w) 0 0 var(--warn),
  inset 0 2px 0 var(--accent),inset 0 -2px 0 var(--accent)}
.tbl tbody tr.selected.edge-err td:first-child{box-shadow:inset var(--sig-w) 0 0 var(--err),
  inset 0 2px 0 var(--accent),inset 0 -2px 0 var(--accent)}
.tbl tbody tr.selected.edge-info td:first-child{box-shadow:inset var(--sig-w) 0 0 var(--accent),
  inset 0 2px 0 var(--accent),inset 0 -2px 0 var(--accent)}

/* 3  Baumansicht: dieselben vier Schweren wie die Tabellenzeile, mit innerem
      Schatten statt border-left, damit der Inhalt nicht springt. */
.tree-row.edge-ok{border-left:0;background:var(--ok-soft);box-shadow:inset var(--sig-w) 0 0 var(--ok)}
.tree-row.edge-warn{border-left:0;background:var(--warn-soft);box-shadow:inset var(--sig-w) 0 0 var(--warn)}
.tree-row.edge-err{border-left:0;background:var(--err-soft);box-shadow:inset var(--sig-w) 0 0 var(--err)}
.tree-row.edge-info{border-left:0;box-shadow:inset var(--sig-w) 0 0 var(--accent)}
.tree-row.selected.edge-ok{box-shadow:inset var(--sig-w) 0 0 var(--ok),inset 0 0 0 2px var(--accent)}
.tree-row.selected.edge-warn{box-shadow:inset var(--sig-w) 0 0 var(--warn),inset 0 0 0 2px var(--accent)}
.tree-row.selected.edge-err{box-shadow:inset var(--sig-w) 0 0 var(--err),inset 0 0 0 2px var(--accent)}
.tree-row.selected.edge-info{box-shadow:inset var(--sig-w) 0 0 var(--accent),inset 0 0 0 2px var(--accent)}

/* 4  Aktiver Befund in der Farbe seiner Schwere. Blau bleibt dem Hinweis. */
.finding.active.error{background:var(--err-soft);border-left-color:var(--err)}
.finding.active.warn{background:var(--warn-soft);border-left-color:var(--warn)}
/* ---------- 11 Ergänzungen 1.9 (Befunde vom 19.10.2026, inline-styles-bestand.md) ---------- */
/* 1  Tooltip: ein Auslöser mit .tip-wrap, die Blase als .tip; .tip.below öffnet nach unten.
      Sichtbar bei Hover und Tastaturfokus; nur Marken, keine festen Farben. */
.tip-wrap{position:relative;display:inline-flex;align-items:center}
.tip{position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);z-index:30;
  min-width:160px;max-width:320px;padding:7px 9px;background:var(--surface);color:var(--text);
  border:1px solid var(--border-strong);border-radius:var(--radius);box-shadow:var(--shadow);
  font-size:var(--fs-s2);line-height:1.4;text-align:left;pointer-events:none;opacity:0;visibility:hidden;
  transition:opacity .12s}
.tip.below{bottom:auto;top:calc(100% + 6px)}
.tip-wrap:hover>.tip,.tip-wrap:focus-within>.tip,.tip.open{opacity:1;visibility:visible}
.tip .tip-row{display:flex;gap:8px;justify-content:space-between;font-size:var(--fs-xs);color:var(--muted)}
.tip .tip-row b{color:var(--text);font-weight:600}
/* 2  Kästchen mit Beschriftung: <label class="chk"><input type="checkbox"> Text</label> */
.chk{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-sm);color:var(--text);cursor:pointer;
  user-select:none;line-height:1.3}
.chk input{width:15px;height:15px;margin:0;accent-color:var(--accent);flex-shrink:0}
.chk.small{font-size:var(--fs-s2)}
.chk.disabled,.chk:has(input:disabled){color:var(--faint);cursor:default}
/* 3  Breiter Dialog für Einstellungen mit Abschnitten. */
.modal.wide{max-width:860px;width:min(860px,calc(100vw - 32px))}
.modal.wide .modal-body{display:grid;gap:18px}
/* 4  Titelleiste eines Prüfberichts: Verlauf wie .doc-head, Urteil rechts. */
.report-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;
  background:linear-gradient(90deg,var(--surface-2),var(--surface));border:1px solid var(--border);
  border-bottom:0;border-radius:var(--radius) var(--radius) 0 0;font-family:var(--font-title);font-size:var(--fs-sm)}
.report-head .title{font-weight:600;color:var(--text);display:flex;gap:8px;align-items:center;min-width:0}
.report-head .title span{color:var(--muted);font-weight:400;font-family:var(--mono);font-size:var(--fs-xs)}
.report-head .verdict{font-family:var(--mono);font-size:var(--fs-xs);padding:3px 8px;border-radius:var(--radius);
  background:var(--surface-2);border:1px solid var(--border-strong);white-space:nowrap}
.report-head .verdict.ok{background:var(--ok-soft);color:var(--ok);border-color:transparent}
.report-head .verdict.warn{background:var(--warn-soft);color:var(--warn);border-color:transparent}
.report-head .verdict.err{background:var(--err-soft);color:var(--err);border-color:transparent}
/* 5  Baum mit fester Kennungsspalte: lange Listen bleiben bündig. --tree-key setzt die Breite. */
.tree.keyed{--tree-key:60px}
.tree.keyed .tree-row{grid-template-columns:var(--tree-key) minmax(0,1fr)}
/* 6  Kopfzeile, die umbrechen darf (viele Bedienelemente). */
.top.wrap{height:auto;min-height:var(--top-h);flex-wrap:wrap;row-gap:6px;padding-top:6px;padding-bottom:6px}
.top.wrap .sep{align-self:center}
/* 7  Rollende Liste im Fluss einer Seite: begrenzt auf einen Teil der Fensterhöhe. */
.panel-body.scroll{max-height:var(--scroll-h,74vh);overflow:auto}
.scroll-box{max-height:var(--scroll-h,74vh);overflow:auto;border:1px solid var(--border);border-radius:var(--radius)}
/* 8  Mehrzeiliges Feld: wächst mit, bleibt von Hand ziehbar. .tall für Editoren. */
textarea.inp{min-height:calc(var(--ctl-h) * 2.6);resize:vertical}
textarea.inp.tall{min-height:220px}
textarea.inp.text{font-family:var(--font);font-size:var(--fs-sm)}
/* 9  Kopf aus Titel und Einleitung untereinander (ohne zweite Spalte). */
.hero.stack{grid-template-columns:1fr;gap:10px;align-items:start}
.hero.stack .hero-lede{max-width:72ch}
/* 10 Knopf auf einem Link: keine Unterstreichung, auch im WordPress-Admin. */
a.btn,a.btn:hover,a.btn:focus,a.btn:visited{text-decoration:none;color:inherit}
a.btn.primary,a.btn.primary:hover,a.btn.primary:visited{color:var(--on-accent,#fff)}
/* 11 Kleine Bedienelemente auch für Auswahl und Eingabe, passend zu .btn.small. */
.sel.small,.inp.small{height:26px;padding:0 8px;font-size:var(--fs-mini)}
textarea.inp.small{height:auto;min-height:60px;padding:5px 8px}
/* 12 Inhalt im Light DOM eines Web Components: die Datei spt-kit.components.scoped.css
      liefert dieselben Bausteine in @scope ([data-kit-scope]); das Element setzt das
      Attribut auf seinen Wirt und bindet die Datei in der Seite ein. */
[data-kit-scope]{font-family:var(--font);font-size:var(--fs);color:var(--text);line-height:var(--lh)}


}