/* Gestaltung nach dem Design von sv49-admin.de: monochrome Graustufen,
 * schwarzer Akzent, Linien statt Schatten, scharfe Ecken, Serifen-Titel und
 * Versal-Beschriftungen. Buntfarben tragen nur Zustände (ok/warn/error) und
 * die vom Nutzer gewählten Tag-Farben. Alle Werte kommen aus tokens.css. */

* { box-sizing: border-box; }
/* Gemeinsame Höhe von Eingabefeld, Auswahl und Knopf (Schrift × Zeilenhöhe +
 * Innenabstand + Rahmen), damit alles in einer Zeile auf einer Linie steht;
 * dazu der Abstand vom Label-Oberrand bis zum Feld. */
:root { --feld-hoehe: calc(var(--svb-size-base) * var(--svb-leading-normal) + 2 * var(--svb-space-2) + 2 * var(--svb-border-hairline));
        --label-hoehe: calc(var(--svb-size-sm) * var(--svb-leading-normal) + var(--svb-space-1)); }
body { margin: 0; background: var(--svb-color-surface-sunken); color: var(--svb-color-text);
       font-family: var(--svb-font-sans); font-size: var(--svb-size-base);
       line-height: var(--svb-leading-normal); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--svb-color-text-muted); }
main { max-width: 1280px; margin: 0 auto; padding: var(--svb-space-5) var(--svb-space-6) var(--svb-space-12); }
h1 { font-family: var(--svb-font-serif); font-size: var(--svb-size-xl); font-weight: var(--svb-weight-semibold);
     line-height: var(--svb-leading-tight); letter-spacing: var(--svb-tracking-tight); margin: var(--svb-space-2) 0 var(--svb-space-5); }
h2 { font-family: var(--svb-font-serif); font-size: var(--svb-size-lg); font-weight: var(--svb-weight-semibold);
     line-height: var(--svb-leading-tight); margin: var(--svb-space-8) 0 var(--svb-space-3); }
code { font-family: var(--svb-font-mono); font-size: var(--svb-size-sm); background: var(--svb-color-surface-raised);
       padding: 1px var(--svb-space-1); border-radius: var(--svb-radius-md); word-break: break-all; }
.muted { color: var(--svb-color-text-muted); }
/* Figurinen wie im Report: SVG-Figuren, Größe und Lage relativ zur Schrift */
.fm { white-space: nowrap; }
.fig { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -0.2em; margin: 0 -0.04em 0 -0.06em; overflow: visible; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }

/* ---------- Kopfzeile: dunkle Leiste, Name in Serifen; bleibt beim Scrollen oben stehen (schmal nicht, dort bricht sie um) ---------- */
.top { display: flex; align-items: center; gap: var(--svb-space-6); padding: var(--svb-space-3) var(--svb-space-6);
       background: var(--svb-color-surface-inverse); color: var(--svb-color-text-inverse); flex-wrap: wrap;
       position: sticky; top: 0; z-index: 50; }
/* Ankersprünge landen unter der Kopfzeile (--top-h setzt _top.html) */
html { scroll-padding-top: var(--top-h, 0px); }
.brand { font-family: var(--svb-font-serif); font-size: var(--svb-size-xl); font-weight: var(--svb-weight-semibold);
         letter-spacing: var(--svb-tracking-tight); }
.brand:hover { color: inherit; }
.top nav { display: flex; gap: var(--svb-space-1); flex: 1; }
.top nav a { padding: var(--svb-space-2) var(--svb-space-3); color: var(--svb-palette-gray-400);
             font-size: var(--svb-size-sm); font-weight: var(--svb-weight-semibold); letter-spacing: var(--svb-tracking-wide); }
.top nav a:hover { color: var(--svb-color-text-inverse); }
/* Aktive Stelle: Balken statt nur Farbton, wie die Seitenleiste in sv49 */
.top nav a.on { color: var(--svb-color-text-inverse); box-shadow: inset 0 calc(-1 * var(--svb-border-marke)) 0 currentColor; }

/* ---------- Modulleiste (_modbar.html): helle Leiste unter der Kopfzeile, Kontext links, Aktionen des Moduls rechts; scrollt mit ---------- */
.modbar { background: var(--svb-color-surface); border-bottom: var(--svb-border-hairline) solid var(--svb-color-border-soft); }
.modbar-in { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--svb-space-2) var(--svb-space-4);
             max-width: 1280px; margin: 0 auto; padding: var(--svb-space-2) var(--svb-space-6); }
.modbar-ctx { font-size: var(--svb-size-sm); color: var(--svb-color-text-muted); }
.modbar-ctx a:hover { color: var(--svb-color-text); }
.modbar-actions { display: flex; gap: var(--svb-space-1); flex-wrap: wrap; margin-left: auto; }
@media (max-width: 720px) { .modbar-in { padding: var(--svb-space-2) var(--svb-space-4); } }
/* Knöpfe der Leiste: Symbol (_icon.html) und ein Wort, alle gleich dezent umrandet; „Bearbeiten“/„Details“ offen gefüllt */
.modbar .btn { display: inline-flex; align-items: center; gap: 6px; min-height: 2rem; padding: 0 var(--svb-space-2);
  border: var(--svb-border-hairline) solid var(--svb-color-border); border-radius: var(--svb-radius-md); background: none; color: var(--svb-color-text);
  font: inherit; font-size: var(--svb-size-sm); font-weight: var(--svb-weight-semibold); letter-spacing: var(--svb-tracking-wide);
  text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .15s; }
.modbar .btn:hover { background: var(--svb-color-accent-bg); color: var(--svb-color-text); }
.modbar .btn[aria-expanded="true"] { background: var(--svb-color-accent); border-color: var(--svb-color-accent); color: var(--svb-color-accent-on); }
.modbar .btn.danger:hover { background: var(--svb-delete-bg); border-color: var(--svb-delete-bg); color: var(--svb-palette-white); }
.modbar .ico { width: 1.1rem; height: 1.1rem; flex: none; }
.modbar-actions form { display: contents; }
.modbar-ctx { display: flex; flex-wrap: wrap; align-items: center; gap: var(--svb-space-1) var(--svb-space-2); }
/* Ansicht der Reports (Liste | ECO): zwei aneinanderstoßende Knöpfe wie .btn, die gezeigte gefüllt wie ein offenes Panel */
.view-switch { display: inline-flex; }
.view-switch a { display: inline-flex; align-items: center; min-height: 2rem; padding: 0 var(--svb-space-3);
  border: var(--svb-border-hairline) solid var(--svb-color-border); color: var(--svb-color-text); text-decoration: none;
  font-weight: var(--svb-weight-semibold); letter-spacing: var(--svb-tracking-wide); white-space: nowrap; transition: background .15s; }
.view-switch a + a { border-left: none; }
.view-switch a:first-child { border-radius: var(--svb-radius-md) 0 0 var(--svb-radius-md); }
.view-switch a:last-child { border-radius: 0 var(--svb-radius-md) var(--svb-radius-md) 0; }
.modbar-ctx .view-switch a:hover { background: var(--svb-color-accent-bg); color: var(--svb-color-text); }
.modbar-ctx .view-switch a[aria-current="page"] { background: var(--svb-color-accent); border-color: var(--svb-color-accent); color: var(--svb-color-accent-on); }
/* Schmal nur die Symbole; das Wort bleibt für Screenreader (title zeigt es beim Zeigen) */
@media (max-width: 720px) {
  .modbar .btn { padding: 0 var(--svb-space-2); }
  .modbar .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--feld-hoehe);
       padding: 0 var(--svb-space-4); border: none; border-radius: var(--svb-radius-md);
       background: var(--svb-button-bg); color: var(--svb-color-text-inverse);
       font: inherit; font-size: var(--svb-size-sm); font-weight: var(--svb-weight-semibold);
       letter-spacing: var(--svb-tracking-wide); cursor: pointer; transition: background .15s; white-space: nowrap; }
.btn:hover { background: var(--svb-button-hover-bg); color: var(--svb-color-text-inverse); }
.btn.primary { background: var(--svb-color-accent); color: var(--svb-color-accent-on); font-weight: var(--svb-weight-bold); }
.btn.primary:hover { background: var(--svb-color-accent-hover); color: var(--svb-color-accent-on); }
.btn.danger { background: var(--svb-delete-bg); color: var(--svb-palette-white); }
.btn.danger:hover { background: var(--svb-delete-hover-bg); }
.btn.ghost { background: none; color: var(--svb-color-text); text-decoration: underline;
             text-underline-offset: .15em; text-decoration-color: var(--svb-color-border); }
.btn.ghost:hover { color: var(--svb-color-text-muted); }
.btn.small { min-height: 1.75rem; padding: 0 var(--svb-space-3); font-size: var(--svb-size-xs); }
.btn[disabled] { opacity: .45; cursor: default; }

/* ---------- Meldungen: Balken links trägt den Zustand mit ---------- */
.msg { padding: var(--svb-space-3) var(--svb-space-4); margin: var(--svb-space-2) 0; font-size: var(--svb-size-sm);
       background: var(--svb-color-surface); border-left: var(--svb-space-1) solid var(--svb-color-border-strong);
       border-radius: 0 var(--svb-radius-md) var(--svb-radius-md) 0; }
.msg.success { border-color: var(--svb-ok); background: var(--svb-ok-bg); }
.msg.warning { border-color: var(--svb-warn); background: var(--svb-warn-bg); }
.msg.error { border-color: var(--svb-error); background: var(--svb-error-bg); }

/* ---------- Eingaben ---------- */
input, select, textarea { font: inherit; font-size: var(--svb-size-base); color: var(--svb-color-text);
                          background: var(--svb-color-surface); border: var(--svb-border-hairline) solid var(--svb-color-border);
                          border-radius: var(--svb-radius-md); padding: var(--svb-space-2) var(--svb-space-3); max-width: 100%; }
/* Safari und Chrome zeichnen <select> nativ und übergehen dabei Innenabstand
 * und Höhe; mit appearance: none gilt dieselbe Box wie beim Textfeld, den Pfeil
 * zeichnen wir selbst (derselbe wie in sv49-admin.de). */
select:not([multiple]) { -webkit-appearance: none; appearance: none; height: var(--feld-hoehe);
                         background-image: url(img/icon-auswahlpfeil.svg); background-repeat: no-repeat;
                         background-position: right var(--svb-space-3) center; padding-right: var(--svb-space-8); }
input:focus, select:focus, textarea:focus { border-color: var(--svb-color-border-strong);
                                            outline: var(--svb-border-hairline) solid var(--svb-color-border-strong); outline-offset: 0; }
input[type=checkbox] { accent-color: var(--svb-color-accent); }

/* ---------- Filter und Sortierung ----------
 * Filter grenzen ein und stehen als Karte mit beschrifteten Zeilen; die
 * Sortierung ordnet nur und sitzt als Leiste direkt über der Tabelle. */
.filters { margin-bottom: var(--svb-space-6); background: var(--svb-color-surface);
           border: var(--svb-border-hairline) solid var(--svb-color-border-soft); border-radius: var(--svb-radius-md); }
.filter-row { display: flex; flex-wrap: wrap; gap: var(--svb-space-2); align-items: center;
              padding: var(--svb-space-3) var(--svb-space-4); }
.filter-row + .filter-row { border-top: var(--svb-border-hairline) solid var(--svb-color-border-soft); }
.filter-row > .label { flex: 0 0 6.5rem; }
.filter-row input[type=search] { flex: 1 1 240px; }
.filter-row input[type=search] + .check { margin: 0 var(--svb-space-2); }
.filter-row .btn.ghost { margin-left: auto; }
.filter-row .check { display: inline-flex; align-items: center; gap: var(--svb-space-1); font-size: var(--svb-size-sm); white-space: nowrap; }
.tagbar { gap: var(--svb-space-1); }

.list-bar { display: flex; flex-wrap: wrap; gap: var(--svb-space-2) var(--svb-space-4); align-items: center;
            justify-content: space-between; margin-bottom: var(--svb-space-2); font-size: var(--svb-size-sm); }
.sort { display: flex; align-items: center; gap: var(--svb-space-2); }

/* ---------- Tags, ECO-Codes, Chips ----------
 * Tags behalten die gewählte Farbe (sie ist Information, keine Dekoration);
 * ECO-Codes und Chips bleiben monochrom. */
.tag { display: inline-block; padding: 0 var(--svb-space-2); margin: 1px 2px; border-radius: var(--svb-radius-md);
       font-size: var(--svb-size-xs); text-transform: none; letter-spacing: normal; font-weight: var(--svb-weight-normal);
       --tag: var(--svb-color-text-muted); border: var(--svb-border-hairline) solid var(--tag); color: var(--svb-color-text);
       background: color-mix(in srgb, var(--tag) 12%, transparent); }
.tag:hover { color: var(--svb-color-text); background: color-mix(in srgb, var(--tag) 24%, transparent); }
.tag.active, .tag.active:hover { background: var(--tag); color: var(--svb-palette-white); }
.chip { font-family: var(--svb-font-mono); font-size: var(--svb-size-sm); padding: 2px var(--svb-space-2);
        border-radius: var(--svb-radius-md); background: var(--svb-color-accent); color: var(--svb-color-accent-on); }
.eco { font-family: var(--svb-font-mono); font-size: var(--svb-size-sm); font-weight: var(--svb-weight-semibold); padding: 0 var(--svb-space-1);
       border: var(--svb-border-hairline) solid var(--svb-color-border); border-radius: var(--svb-radius-md);
       background: var(--svb-color-surface-raised); color: var(--svb-color-text); }
a.eco:hover { background: var(--svb-color-accent); border-color: var(--svb-color-accent); color: var(--svb-color-accent-on); }
.new-report .muted { font-size: var(--svb-size-xs); margin-left: var(--svb-space-1); white-space: nowrap; }
.kind { font-size: var(--svb-size-2xs); font-weight: var(--svb-weight-bold); letter-spacing: var(--svb-tracking-wide);
        color: var(--svb-color-text-muted); border: var(--svb-border-hairline) solid var(--svb-color-border);
        border-radius: var(--svb-radius-md); padding: 0 var(--svb-space-1); margin-left: var(--svb-space-1); }
.line { color: var(--svb-color-text-muted); font-size: var(--svb-size-sm); }
/* Hinweis unter dem Titel: eingehängter Zug-/FEN-Report (Variante unter …) bzw. gleiche Stellung */
.hint { color: var(--svb-color-text-muted); font-size: var(--svb-size-xs); }
/* Eingabe-Filter FEN/Züge: der getroffene Report in der Grundstellung des ECO-Reports */
.hint.hit { background: var(--svb-color-accent-bg); }
/* ✎ hinter Links auf Reports mit Notizen (_notes_mark.html) */
.has-notes { color: var(--svb-color-accent); font-weight: var(--svb-weight-bold); cursor: help; white-space: nowrap; }
.hint a { text-decoration: underline; text-underline-offset: .15em; text-decoration-color: var(--svb-color-border); }
.count { font-family: var(--svb-font-sans); font-size: var(--svb-size-xs); color: var(--svb-color-text-muted);
         font-weight: var(--svb-weight-normal); margin-left: var(--svb-space-1); font-variant-numeric: tabular-nums; }

.status { font-size: var(--svb-size-2xs); font-weight: var(--svb-weight-bold); text-transform: uppercase;
          letter-spacing: var(--svb-tracking-wide); padding: 1px var(--svb-space-2); border-radius: var(--svb-radius-md);
          border: var(--svb-border-hairline) solid currentColor; white-space: nowrap; }
.status.done { color: var(--svb-ok); background: var(--svb-ok-bg); }
.status.pending, .status.running { color: var(--svb-warn); background: var(--svb-warn-bg); }
.status.failed { color: var(--svb-error); background: var(--svb-error-bg); }
/* Symbol in der Tabelle: quadratisch, Bedeutung im Tooltip */
.status.icon { display: inline-flex; align-items: center; justify-content: center; width: 1.375rem; height: 1.375rem;
               padding: 0; font-size: var(--svb-size-sm); text-transform: none; letter-spacing: 0; cursor: help; }
@keyframes dreht { to { transform: rotate(360deg); } }
/* Läuft: der Springer aus der Kopfzeile tanzt – kleiner Sprung mit Kippen und Seitwärtsschritt (auch groß auf der
 * Detailseite, im Report eigene Kopie in _report_appbar.html). Ohne Bewegungswunsch steht er still. */
.knight-dance { display: inline-block; font-family: var(--svb-font-serif); font-weight: var(--svb-weight-semibold);
                line-height: 1; transform-origin: 50% 90%; animation: tanzt 1.2s ease-in-out infinite; }
@keyframes tanzt {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  20% { transform: translate(-.06em, -.28em) rotate(-12deg); }
  40% { transform: translate(0, 0) rotate(0); }
  60% { transform: translate(.06em, -.28em) rotate(12deg); }
  80% { transform: translate(0, 0) rotate(0); }
}
@media (prefers-reduced-motion: reduce) { .knight-dance { animation: none; } }
.status.icon.running { border: 0; background: none; color: var(--svb-color-text); font-size: 1.35rem; overflow: visible; }
/* Wartet: ruhiges „…“ ohne Kasten, gedämpft – fällt neben dem tanzenden Springer nicht auf */
.status.icon.pending { border: 0; background: none; color: var(--svb-color-text-muted); font-size: var(--svb-size-base); font-weight: var(--svb-weight-bold); }
/* Fertig ist der Normalfall: nur ein grüner Haken ohne Kasten, damit die Ausnahmen auffallen */
.status.icon.done { border: 0; background: none; font-weight: var(--svb-weight-normal); }

/* ---------- Tabellen: Versalkopf mit kräftiger Unterlinie, Zebra wie ein Brett ---------- */
table.reports { width: 100%; border-collapse: collapse; background: var(--svb-color-surface);
                border: var(--svb-border-hairline) solid var(--svb-color-border-soft); font-variant-numeric: tabular-nums; }
table.reports.narrow { width: auto; min-width: 420px; }
.reports th, .reports td { text-align: left; padding: var(--svb-space-2) var(--svb-space-3);
                           border-bottom: var(--svb-border-hairline) solid var(--svb-color-border-soft); vertical-align: top; }
.reports .num { text-align: right; }
.reports.jobs form.inline { display: inline; }
.reports .center, .reports thead th.center { text-align: center; width: 1%; }
.reports thead th { font-size: var(--svb-size-2xs); font-weight: var(--svb-weight-bold); text-transform: uppercase;
                    letter-spacing: var(--svb-tracking-wider); color: var(--svb-color-text); background: var(--svb-color-surface-sunken);
                    border-bottom: var(--svb-border-strong) solid var(--svb-color-border-strong); }
.reports thead th.num { text-align: right; }
.reports > tbody > tr:nth-child(even) { background: var(--svb-color-surface-sunken); }
/* Reportliste: hinter jeder Reportzeile eine (meist verborgene) Variantenzeile – Streifen nach jeder zweiten Reportzeile */
.reports.with-variants > tbody > tr:nth-child(even) { background: none; }
.reports.with-variants > tbody > tr:nth-child(4n+3) { background: var(--svb-color-surface-sunken); }
.reports > tbody > tr:not(.var-row):hover > * { background: var(--svb-color-accent-bg); }
/* Zahl der Varianten: Hintergrund zeigt, zu wie vielen es schon einen Report gibt (grau keine, gelb manche, grün alle) */
.var-count { font: inherit; font-variant-numeric: tabular-nums; min-width: 2rem; padding: 0 var(--svb-space-1);
             border: var(--svb-border-hairline) solid var(--svb-color-border); border-radius: var(--svb-radius-md);
             background: var(--svb-color-surface-raised); color: var(--svb-color-text); cursor: pointer; }
.var-count.some { background: var(--svb-warn-bg); border-color: var(--svb-warn); }
.var-count.all { background: var(--svb-ok-bg); border-color: var(--svb-ok); }
.var-count[aria-expanded="true"] { box-shadow: inset 0 0 0 1px currentColor; }
/* Aufgeklappte Varianten: eigener Block mit Rahmen und Kopf; Zugfolgen wie in der Spalte „Zugfolge“ (.line) */
.reports .var-row > td { padding: 0 var(--svb-space-3) var(--svb-space-3); background: var(--svb-color-surface); }
.empty { padding: var(--svb-space-6); text-align: center; color: var(--svb-color-text-muted); background: var(--svb-color-surface);
         border: var(--svb-border-hairline) solid var(--svb-color-border-soft); border-radius: var(--svb-radius-md); }
.empty a, .notes a { text-decoration: underline; text-underline-offset: .15em; text-decoration-color: var(--svb-color-border); }

/* ---------- Detailseite ---------- */
.detail-head { display: flex; justify-content: space-between; gap: var(--svb-space-4); align-items: flex-start; flex-wrap: wrap; }
.detail-head h1 { margin: var(--svb-space-1) 0 var(--svb-space-2); }
.actions { display: flex; gap: var(--svb-space-2); flex-wrap: wrap; align-items: center; }
.actions form { margin: 0; }
.crumbs { margin: 0; color: var(--svb-color-text-muted); font-size: var(--svb-size-xs); letter-spacing: var(--svb-tracking-wide); }
.crumbs a:not(.eco):hover { color: var(--svb-color-text); }
.meta { display: flex; flex-wrap: wrap; gap: var(--svb-space-2) var(--svb-space-6); padding: var(--svb-space-3) var(--svb-space-4);
        background: var(--svb-color-surface); border: var(--svb-border-hairline) solid var(--svb-color-border-soft);
        border-radius: var(--svb-radius-md); margin: var(--svb-space-3) 0; align-items: center; font-size: var(--svb-size-sm); }
.label { font-size: var(--svb-size-2xs); font-weight: var(--svb-weight-bold); color: var(--svb-color-text-muted);
         text-transform: uppercase; letter-spacing: var(--svb-tracking-wider); margin-right: var(--svb-space-1); }
.notes { background: var(--svb-color-surface); border: var(--svb-border-hairline) solid var(--svb-color-border-soft);
         border-radius: var(--svb-radius-md); margin: var(--svb-space-3) 0; overflow: hidden; }
.notes > :not(h2) { margin-left: var(--svb-space-4); margin-right: var(--svb-space-4); }
/* Modulkopf: schwarze Versalleiste wie in sv49 */
.notes h2, .volume h2 { font-family: var(--svb-font-sans); font-size: var(--svb-size-2xs); font-weight: var(--svb-weight-bold);
                        text-transform: uppercase; letter-spacing: var(--svb-tracking-wider); margin: 0;
                        padding: var(--svb-space-2) var(--svb-space-3);
                        background: var(--svb-color-surface-inverse); color: var(--svb-color-text-inverse); }

/* ---------- Formulare ---------- */
.form { max-width: 720px; }
.form.row, fieldset.row { display: flex; flex-wrap: wrap; gap: var(--svb-space-3); max-width: none;
                          /* Felder mit und ohne Hilfetext: an der Oberkante ausrichten, damit Labels und Eingaben je eine Linie bilden */
                          align-items: flex-start; }
/* Was kein Label über sich hat (Checkbox, Knopf), rückt um die Labelhöhe herunter */
.form.row .field.check, fieldset.row .field.check { margin-top: var(--label-hoehe); min-height: var(--feld-hoehe); }
.form.row > .btn { margin-top: var(--label-hoehe); }
fieldset { background: var(--svb-color-surface); border: var(--svb-border-hairline) solid var(--svb-color-border-soft);
           border-radius: var(--svb-radius-md); padding: var(--svb-space-3) var(--svb-space-4); margin: 0 0 var(--svb-space-4); }
legend { font-size: var(--svb-size-2xs); font-weight: var(--svb-weight-bold); text-transform: uppercase;
         letter-spacing: var(--svb-tracking-wider); padding: 0 var(--svb-space-1); }
.field { margin-bottom: var(--svb-space-4); display: flex; flex-direction: column; gap: var(--svb-space-1); }
.field input:not([type=checkbox]):not([type=radio]), .field select, .field textarea { width: 100%; }
/* Auswahlknöpfe (z. B. Perspektive der ausführlichen Analyse): Optionen nebeneinander, Knopf vor dem Text */
.field div:has(> div > label > input[type=radio]) { display: flex; flex-wrap: wrap; gap: var(--svb-space-2) var(--svb-space-6); padding: var(--svb-space-1) 0; }
.field label:has(> input[type=radio]) { display: inline-flex; align-items: center; gap: var(--svb-space-2); font-weight: var(--svb-weight-normal);
                                        font-size: var(--svb-size-base); cursor: pointer; }
input[type=radio] { accent-color: var(--svb-color-accent); margin: 0; }
fieldset .field, .form.row .field { margin-bottom: 0; }
.field.check { flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: var(--svb-space-2); }
/* Checkbox mit Hilfetext: Kästchen vor dem Label, Hilfe und Fehler darunter eingerückt */
.field.check:has(small) { display: grid; grid-template-columns: auto 1fr; column-gap: var(--svb-space-2); row-gap: var(--svb-space-1); }
.field.check:has(small) > input { grid-row: 1; grid-column: 1; margin: 0; }
.field.check:has(small) > label { grid-row: 1; grid-column: 2; cursor: pointer; }
.field.check:has(small) > small, .field.check:has(small) > .error { grid-column: 2; }
.stack { display: grid; gap: var(--svb-space-3); }
/* Einklappbarer Formularblock im Stil eines Fieldsets, die Zusammenfassung wie dessen Legende */
details.fold { background: var(--svb-color-surface); border: var(--svb-border-hairline) solid var(--svb-color-border-soft);
               border-radius: var(--svb-radius-md); padding: var(--svb-space-2) var(--svb-space-4); margin: 0 0 var(--svb-space-4); }
details.fold > summary { cursor: pointer; font-size: var(--svb-size-2xs); font-weight: var(--svb-weight-bold); text-transform: uppercase;
                         letter-spacing: var(--svb-tracking-wider); padding: var(--svb-space-1) 0; }
details.fold[open] > summary { margin-bottom: var(--svb-space-3); }
details.fold .field { margin-bottom: 0; }
.field label { font-weight: var(--svb-weight-semibold); font-size: var(--svb-size-sm); }
.field small { color: var(--svb-color-text-muted); font-size: var(--svb-size-xs); line-height: var(--svb-leading-relaxed); }
.field ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--svb-space-1) var(--svb-space-4); }
.field ul label { font-weight: var(--svb-weight-normal); }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--svb-error); }
.error, .errorlist { color: var(--svb-error); font-size: var(--svb-size-xs); }

/* ---------- ECO-Übersicht ---------- */
.volume { background: var(--svb-color-surface); border: var(--svb-border-hairline) solid var(--svb-color-border-soft);
          border-radius: var(--svb-radius-md); padding: 0 0 var(--svb-space-3); margin-bottom: var(--svb-space-5); overflow: hidden; }
.volume h2 { margin-bottom: var(--svb-space-2); }
.volume h2 a:hover { color: var(--svb-palette-gray-400); }
.volume h2 .count { color: var(--svb-palette-gray-400); text-transform: none; letter-spacing: normal; }
.group { padding: 0 var(--svb-space-4); }
.group summary { cursor: pointer; padding: var(--svb-space-1) 0; }
.range { font-family: var(--svb-font-mono); font-size: var(--svb-size-sm); color: var(--svb-color-text-muted); display: inline-block; min-width: 7.5em; }
.codes { list-style: none; padding: 0 0 var(--svb-space-2) var(--svb-space-5); margin: 0; columns: 2 420px; font-size: var(--svb-size-sm); }
.codes li { break-inside: avoid; padding: 1px 0; display: flex; gap: var(--svb-space-2); align-items: baseline; }
.codes li .name { flex: 1; color: var(--svb-color-text-muted); }
.codes li.has .name { color: var(--svb-color-text); font-weight: var(--svb-weight-semibold); }
.codes .moves { font-weight: var(--svb-weight-normal); color: var(--svb-color-text-muted); font-size: var(--svb-size-xs); margin-left: var(--svb-space-1); }
.codes li a { font-size: var(--svb-size-xs); white-space: nowrap; text-decoration: underline;
              text-underline-offset: .15em; text-decoration-color: var(--svb-color-border); }
/* Reports in Erzeugung: Status-Symbol am Code, in der Gruppenzeile und im Hinweis oben */
.codes li a.busy { text-decoration: none; align-self: center; }
.codes .status.icon, .group summary .status.icon, .busy-note .status.icon { width: 1.125rem; height: 1.125rem; font-size: var(--svb-size-xs); vertical-align: middle; }
.busy-note a { margin-left: var(--svb-space-2); white-space: nowrap; }

/* ---------- Handbuch: Kopf, Reiter der Teile, Inhaltsverzeichnis links, Fließtext in Lesebreite, Karten und Hinweise ---------- */
.handbook { max-width: 72rem; margin: 0 auto; }
.handbook .kicker { font-size: var(--svb-size-2xs); letter-spacing: var(--svb-tracking-wider); text-transform: uppercase;
                    color: var(--svb-color-text-muted); font-weight: var(--svb-weight-bold); }
.hb-head { padding: var(--svb-space-6) 0 var(--svb-space-5); border-bottom: var(--svb-border-marke) solid var(--svb-color-text); }
.hb-head h1 { margin: var(--svb-space-1) 0 var(--svb-space-3); font-size: var(--svb-size-2xl); max-width: 44rem; }
.hb-lead { font-family: var(--svb-font-serif); font-size: var(--svb-size-md); line-height: var(--svb-leading-relaxed);
           color: var(--svb-color-text-muted); max-width: 44rem; margin: 0 0 var(--svb-space-4); }
.hb-whoami { font-size: var(--svb-size-sm); color: var(--svb-color-text-muted); margin: 0; }
.badge { display: inline-block; padding: 0 var(--svb-space-2); border: var(--svb-border-hairline) solid var(--svb-color-border-strong);
         border-radius: var(--svb-radius-sm); font-size: var(--svb-size-2xs); font-weight: var(--svb-weight-bold);
         letter-spacing: var(--svb-tracking-wider); text-transform: uppercase; line-height: 1.6; vertical-align: .1em;
         color: var(--svb-color-text); background: var(--svb-color-surface); white-space: nowrap; }
.badge.autor { background: var(--svb-color-surface-raised); }
.badge.redakteur { background: var(--svb-color-surface-inverse); color: var(--svb-color-text-inverse); border-color: var(--svb-color-surface-inverse); }

.hb-tabs { display: flex; gap: var(--svb-space-1); flex-wrap: wrap; border-bottom: var(--svb-border-hairline) solid var(--svb-color-border);
           margin-bottom: var(--svb-space-6); }
.hb-tabs a { padding: var(--svb-space-3) var(--svb-space-4); font-size: var(--svb-size-sm); font-weight: var(--svb-weight-semibold);
             letter-spacing: var(--svb-tracking-wide); color: var(--svb-color-text-muted); margin-bottom: calc(-1 * var(--svb-border-hairline)); }
.hb-tabs a:hover { color: var(--svb-color-text); }
.hb-tabs a.on { color: var(--svb-color-text); box-shadow: inset 0 calc(-1 * var(--svb-border-marke)) 0 currentColor; }

.hb-layout { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: var(--svb-space-8); align-items: start; }
.hb-toc { position: sticky; top: calc(var(--top-h, 0px) + var(--svb-space-4)); font-size: var(--svb-size-sm);
          border-left: var(--svb-border-hairline) solid var(--svb-color-border); padding-left: var(--svb-space-4); }
.hb-toc-title { font-size: var(--svb-size-2xs); font-weight: var(--svb-weight-bold); text-transform: uppercase;
                letter-spacing: var(--svb-tracking-wider); color: var(--svb-color-text-muted); margin-bottom: var(--svb-space-2); }
.hb-toc ol { list-style: none; margin: 0; padding: 0; }
.hb-toc li + li { margin-top: var(--svb-space-2); }
.handbook .hb-toc a { text-decoration: none; color: var(--svb-color-text-muted); }
.handbook .hb-toc a:hover { color: var(--svb-color-text); }
.hb-body { max-width: 46rem; }
.hb-body > section:first-child h2, .hb-body > .callout:first-child + section h2 { margin-top: 0; }
.hb-body > .callout:first-child { margin-top: 0; }
.handbook section { scroll-margin-top: var(--svb-space-4); }
.handbook h2 { padding-top: var(--svb-space-2); border-top: var(--svb-border-hairline) solid var(--svb-color-border-soft); }
.handbook h3 { font-size: var(--svb-size-base); font-weight: var(--svb-weight-bold); margin: var(--svb-space-6) 0 var(--svb-space-2); }
.handbook p, .handbook li { max-width: 42rem; line-height: var(--svb-leading-relaxed); }
.handbook li + li { margin-top: var(--svb-space-1); }
.handbook a { text-decoration: underline; text-underline-offset: .15em; text-decoration-color: var(--svb-color-border); }
.hb-next { display: flex; justify-content: space-between; gap: var(--svb-space-4); flex-wrap: wrap; margin-top: var(--svb-space-10);
           padding-top: var(--svb-space-4); border-top: var(--svb-border-marke) solid var(--svb-color-text); font-weight: var(--svb-weight-semibold); }
.hb-next a:last-child { margin-left: auto; }

/* Karten: Vorteile, Rollen-Wegweiser (verlinkt, eigene Rolle mit dunklem Rand) */
.hb-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--svb-space-4); margin: var(--svb-space-4) 0; }
.hb-cards-3 { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.hb-card { display: flex; flex-direction: column; background: var(--svb-color-surface); padding: var(--svb-space-4) var(--svb-space-5);
           border: var(--svb-border-hairline) solid var(--svb-color-border-soft); border-top: var(--svb-border-marke) solid var(--svb-color-text); }
.hb-card h3 { font-family: var(--svb-font-serif); font-size: var(--svb-size-md); font-weight: var(--svb-weight-semibold); margin: var(--svb-space-1) 0 var(--svb-space-2); }
.hb-card p, .hb-card ul { font-size: var(--svb-size-sm); margin: var(--svb-space-1) 0 0; }
.hb-card ul { padding-left: var(--svb-space-5); }
.hb-card-kicker { font-size: var(--svb-size-2xs); font-weight: var(--svb-weight-bold); text-transform: uppercase;
                  letter-spacing: var(--svb-tracking-wider); color: var(--svb-color-text-muted); }
.handbook a.hb-role { text-decoration: none; color: inherit; transition: border-color .15s, background .15s; }
.handbook a.hb-role:hover { background: var(--svb-color-surface-raised); color: inherit; }
.hb-role.mine { border-color: var(--svb-color-text); border-width: var(--svb-border-strong); border-top-width: var(--svb-border-marke); }
.hb-more { margin-top: auto; padding-top: var(--svb-space-3); font-size: var(--svb-size-sm); font-weight: var(--svb-weight-bold); }

/* Hinweise: neutral, Tipp (Rand), belastbar (ok), Vorsicht (warn); paarweise nebeneinander */
.callout { background: var(--svb-color-surface); border: var(--svb-border-hairline) solid var(--svb-color-border-soft);
           border-left: var(--svb-border-marke) solid var(--svb-color-border-strong); padding: var(--svb-space-3) var(--svb-space-4); margin: var(--svb-space-4) 0; }
.callout.tip { border-left-color: var(--svb-color-text); }
.callout.ok { background: var(--svb-ok-bg); border-left-color: var(--svb-ok); }
.callout.caution { background: var(--svb-warn-bg); border-left-color: var(--svb-warn); }
.callout h3 { margin-top: 0; }
.callout ul { padding-left: var(--svb-space-5); margin: 0; }
.callout li { font-size: var(--svb-size-sm); }
.hb-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: var(--svb-space-4); margin: var(--svb-space-4) 0; }
.hb-pair > .callout { margin: 0; }

/* Nummerierte Schritte mit Kreisziffern */
.hb-steps { list-style: none; counter-reset: step; padding: 0; margin: var(--svb-space-4) 0; }
.hb-steps > li { counter-increment: step; position: relative; padding-left: 2.75rem; min-height: 2rem; }
.hb-steps > li + li { margin-top: var(--svb-space-3); }
.hb-steps > li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 1.875rem; height: 1.875rem;
                         display: grid; place-items: center; border-radius: 50%; background: var(--svb-color-surface-inverse);
                         color: var(--svb-color-text-inverse); font-size: var(--svb-size-sm); font-weight: var(--svb-weight-bold); }
.hb-steps ul { padding-left: var(--svb-space-5); }

/* Ablauf der Erzeugung: Kästen mit Pfeilen, schmal untereinander */
.hb-flow { list-style: none; padding: 0; margin: var(--svb-space-4) 0; display: grid;
           grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--svb-space-5); }
.handbook .hb-flow li { position: relative; margin: 0; background: var(--svb-color-surface); padding: var(--svb-space-3);
                        border: var(--svb-border-hairline) solid var(--svb-color-border); font-size: var(--svb-size-sm); line-height: var(--svb-leading-normal); }
.hb-flow li strong { display: block; }
.hb-flow li span:last-child { color: var(--svb-color-text-muted); font-size: var(--svb-size-xs); }
.hb-flow-n { float: right; font-family: var(--svb-font-serif); font-size: var(--svb-size-lg); line-height: 1; color: var(--svb-color-text-subtle); }
.hb-flow li + li::before { content: "→"; position: absolute; left: calc(-1 * var(--svb-space-5)); top: 50%; width: var(--svb-space-5);
                           transform: translateY(-50%); text-align: center; color: var(--svb-color-text-muted); }

/* Kennzeichen des Variantenbaums (wie im Report) und ihre Legende */
.handbook .dicon { display: inline-flex; width: 1.05em; height: 1.05em; vertical-align: -.15em; color: var(--svb-color-text-muted); }
.handbook .dicon svg { width: 100%; height: 100%; }
.handbook .dicon.best, .handbook .dicon.chance { color: var(--svb-ok); }
.handbook .dicon.warn { color: var(--svb-error); }
.hb-legend { list-style: none; padding: 0; display: grid; gap: var(--svb-space-2); }
.hb-legend li { display: flex; gap: var(--svb-space-3); align-items: baseline; }
.hb-legend .dicon { flex: none; width: 1.25em; height: 1.25em; vertical-align: -.25em; }

/* Glossar und Rechte-Tabelle */
.hb-glossary { display: grid; grid-template-columns: max-content 1fr; gap: var(--svb-space-2) var(--svb-space-5); font-size: var(--svb-size-sm); }
.hb-glossary dt { font-weight: var(--svb-weight-bold); }
.hb-glossary dd { margin: 0; }
.hb-matrix td.yes, .hb-matrix td.no, .hb-matrix th:not(:first-child) { text-align: center; width: 6rem; }
.hb-matrix td.yes { font-weight: var(--svb-weight-bold); }
.hb-matrix td.no { color: var(--svb-color-text-subtle); }

.handbook .table-wrap { overflow-x: auto; margin: var(--svb-space-3) 0; }
.handbook table { width: 100%; border-collapse: collapse; background: var(--svb-color-surface); font-size: var(--svb-size-sm);
                  border: var(--svb-border-hairline) solid var(--svb-color-border-soft); }
.handbook th, .handbook td { text-align: left; vertical-align: top; padding: var(--svb-space-2) var(--svb-space-3);
                             border-bottom: var(--svb-border-hairline) solid var(--svb-color-border-soft); }
.handbook thead th { font-size: var(--svb-size-2xs); font-weight: var(--svb-weight-bold); text-transform: uppercase;
                     letter-spacing: var(--svb-tracking-wider); color: var(--svb-color-text-muted); }
.handbook tbody tr:nth-child(even) { background: var(--svb-color-surface-sunken); }
.handbook td, .handbook th { line-height: var(--svb-leading-normal); }
.handbook kbd { font-family: var(--svb-font-mono); font-size: var(--svb-size-xs); padding: 0 var(--svb-space-1); white-space: nowrap;
                border: var(--svb-border-hairline) solid var(--svb-color-border); border-radius: var(--svb-radius-md); background: var(--svb-color-surface); }

@media (max-width: 900px) {
  .hb-layout { grid-template-columns: minmax(0, 1fr); gap: var(--svb-space-4); }
  .hb-toc { position: static; border: var(--svb-border-hairline) solid var(--svb-color-border-soft); background: var(--svb-color-surface);
            padding: var(--svb-space-3) var(--svb-space-4); }
  .hb-toc ol { columns: 2 12rem; }
  .hb-flow li + li::before { content: "↓"; left: 50%; top: calc(-1 * var(--svb-space-5)); transform: translateX(-50%); height: var(--svb-space-5); width: auto; }
  .hb-flow { grid-template-columns: minmax(0, 1fr); }
  .hb-glossary { grid-template-columns: minmax(0, 1fr); }
  .hb-glossary dd { margin-bottom: var(--svb-space-2); }
}
.hb-print { margin: 0 0 var(--svb-space-4); }
@media print {
  @page { margin: 12mm 14mm; }
  .top, .hb-tabs, .hb-toc, .hb-next, .hb-print, .hb-whoami, .hb-lead { display: none; }
  .hb-layout { display: block; }
  main { padding: 0; }
  .hb-head { padding: 0 0 var(--svb-space-2); margin-bottom: var(--svb-space-3); }
  .hb-head h1 { margin: 0; }
  .hb-body, .handbook p, .handbook li { max-width: none; }
  .handbook h2 { border-top: 0; padding-top: 0; }
}

@media (max-width: 720px) {
  .top { padding: var(--svb-space-3) var(--svb-space-4); gap: var(--svb-space-3); position: static; }
  main { padding: var(--svb-space-4) var(--svb-space-4) var(--svb-space-10); }
  .reports .line, .reports th:nth-child(3) { display: none; }
  .filter-row > .label { flex-basis: 100%; }
  table.reports.narrow { min-width: 0; width: 100%; }
  /* Aufträge: dort ist die dritte Spalte der ECO-Code, nicht die Zugfolge – schmal ihn und die Zeiten ausblenden */
  .reports.jobs th:nth-child(3) { display: table-cell; }
  table.reports.jobs .eco-col, table.reports.jobs .time-col { display: none; }
  .reports.jobs th, .reports.jobs td { padding: var(--svb-space-2); }
  /* Navigation bricht um statt über den Rand zu laufen (mit „Aufträge (n)“ wird sie breiter) */
  .top nav { flex: 1 1 100%; flex-wrap: wrap; }
  .top nav a { padding: var(--svb-space-2); }
}

/* ---------- Benutzer (nur Server) ---------- */
.top .user { display: flex; align-items: center; gap: var(--svb-space-3); font-size: var(--svb-size-sm); }
.top .user a, .top .user .linkish { color: var(--svb-palette-gray-400); }
.top .user a:hover, .top .user .linkish:hover { color: var(--svb-color-text-inverse); }
.top .user form { display: contents; }
.linkish { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.form.narrow { max-width: 360px; }

/* ---------- Umschalter hell/dunkel/automatisch (theme.js) ---------- */
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0;
                border: 0; background: none; color: var(--svb-palette-gray-400); cursor: pointer; }
.theme-toggle:hover { color: var(--svb-color-text-inverse); }
.theme-toggle svg { width: 1.15rem; height: 1.15rem; display: none; }
:root:not([data-theme="light"]):not([data-theme="dark"]) .theme-icon-auto,
:root[data-theme="light"] .theme-icon-light, :root[data-theme="dark"] .theme-icon-dark { display: block; }

/* ---------- Neuer Report: Vorschau der ECO-Einordnung ---------- */
/* Brett links, so groß wie in der Detailansicht des Reports: passt samt Kopfzeile und Knopfleiste unter der
   Kopfzeile der App ins Fenster, höchstens 60 % der Breite; das Formular nimmt den Rest. Schmal untereinander,
   dort das Formular zuerst (Reihenfolge im HTML). */
.create-layout { display: grid; grid-template-columns: max(280px, min(calc(100vh - var(--top-h, 0px) - 170px), 60%)) minmax(0, 1fr);
                 gap: var(--svb-space-8); align-items: start; }
.create-layout > .preview { grid-column: 1; grid-row: 1; }
.create-layout > .form { grid-column: 2; grid-row: 1; }
@media (max-width: 960px) {
  .create-layout { grid-template-columns: minmax(0, 1fr); }
  .create-layout > .preview, .create-layout > .form { grid-column: auto; grid-row: auto; }
  .create-layout > .preview { width: min(100%, calc(100vh - 110px)); min-width: min(100%, 320px); }
}
.preview { position: sticky; top: calc(var(--top-h, 0px) + var(--svb-space-4)); }
.preview:empty { display: none; }
/* Dauert die Suche (preview.js: nach 250 ms): Spinner über der Kopfzeile der (abgeblendeten) vorigen Vorschau –
   liegt darüber statt davor, damit nichts verrutscht. Nach einem Zug auf dem Brett (loading-quiet) zeigt das Brett
   den Zug schon und bleibt hell. */
.preview.loading > :not(.preview-spinner) { opacity: .35; }
.preview.loading.loading-quiet > .preview-board { opacity: 1; }
.preview-spinner { position: absolute; inset: 0 0 auto; z-index: 1; display: flex; align-items: center; gap: var(--svb-space-2);
                   padding-bottom: var(--svb-space-2); background: var(--svb-color-surface-sunken);
                   font-size: var(--svb-size-sm); color: var(--svb-color-text-muted); }
.leave-ok { text-align: center; }
.leave-ok strong { display: block; margin-bottom: var(--svb-space-1); }
.leave-ok a { text-decoration: underline; text-underline-offset: .15em; }
.generating { display: flex; flex-direction: column; align-items: center; gap: var(--svb-space-3); padding: var(--svb-space-10) 0;
               text-align: center; }
.generating .knight-dance { font-size: 5.5rem; }
.generating .progress { color: var(--svb-color-text-muted); font-size: var(--svb-size-sm); }
.spin { width: 1rem; height: 1rem; flex: none; border-radius: 50%; border: 2px solid var(--svb-color-border);
        border-top-color: var(--svb-color-text); animation: dreht .8s linear infinite; }
@media (prefers-reduced-motion: reduce) { .spin { animation-duration: 2.4s; } }
/* Platz für Name und Gruppenzeile, damit das Brett nicht springt, wenn die Gruppenzeile kommt oder geht */
.preview-head { margin-bottom: var(--svb-space-3); line-height: var(--svb-leading-relaxed);
                min-height: calc(var(--svb-leading-relaxed) * (1em + var(--svb-size-sm))); }
.preview-head .muted { font-size: var(--svb-size-sm); }
/* Brett, Rahmen und Knopfleiste der Vorschau: board.css */
.preview .controls { margin-bottom: 0; }
.preview .board-help { margin: var(--svb-space-2) 0 0; }
.preview .line-moves { margin: var(--svb-space-3) 0; font-size: var(--svb-size-sm); line-height: 1.8; }
.preview .mv { display: inline-block; white-space: nowrap; padding: 0 4px; border-radius: var(--svb-radius-md); cursor: pointer; }
.preview .mv:hover { background: var(--svb-color-accent-bg); }
/* Züge bis zur benannten Stellung tragen den Namen: kräftig; die Züge danach blass */
.preview .mv { color: var(--svb-color-text); font-weight: var(--svb-weight-semibold); }
.preview .mv.off:not(.active) { color: var(--svb-color-text-muted); font-weight: var(--svb-weight-normal); opacity: .75; }
.preview .mv.active, .preview .mv.active:hover { background: var(--svb-color-accent); color: var(--svb-color-accent-on); }
/* Hinweise zur Eingabe unter dem Brett: ein Block wie .meta, je Thema eine Zeile mit Versal-Beschriftung (.label) */
.preview-info-fold { margin: var(--svb-space-3) 0; background: var(--svb-color-surface);
                     border: var(--svb-border-hairline) solid var(--svb-color-border-soft); border-radius: var(--svb-radius-md);
                     font-size: var(--svb-size-sm); line-height: var(--svb-leading-relaxed); }
/* Kopfzeile: „Hinweise“ wie die Beschriftungen, dahinter die Themen; Pfeil wie bei den Klappblöcken des Reports */
.preview-info-fold > summary { list-style: none; cursor: pointer; padding: var(--svb-space-2) var(--svb-space-4);
  font-size: var(--svb-size-2xs); font-weight: var(--svb-weight-bold); color: var(--svb-color-text-muted);
  text-transform: uppercase; letter-spacing: var(--svb-tracking-wider); }
.preview-info-fold > summary::-webkit-details-marker { display: none; }
.preview-info-fold > summary::before { content: "▸"; display: inline-block; width: 1.3em; }
.preview-info-fold[open] > summary::before { content: "▾"; }
.preview-info-fold > summary:hover { color: var(--svb-color-text); }
.fold-topics { margin-left: var(--svb-space-2); text-transform: none; letter-spacing: 0; font-size: var(--svb-size-xs);
               font-weight: var(--svb-weight-normal); }
.fold-topics:not(:empty)::before { content: "· "; }
.preview-info-fold[open] .fold-topics { display: none; }
.preview-info { display: grid; grid-template-columns: max-content minmax(0, 1fr); margin: 0;
                padding: 0 var(--svb-space-4) var(--svb-space-1); border-top: var(--svb-border-hairline) solid var(--svb-color-border-soft); }
.preview-info dt, .preview-info dd { padding: var(--svb-space-2) 0; margin: 0; }
.preview-info dt:not(:first-of-type), .preview-info dt:not(:first-of-type) + dd { border-top: var(--svb-border-hairline) solid var(--svb-color-border-soft); }
.preview-info dt { padding-right: var(--svb-space-4); font-size: var(--svb-size-2xs); font-weight: var(--svb-weight-bold);
                   color: var(--svb-color-text-muted); text-transform: uppercase; letter-spacing: var(--svb-tracking-wider);
                   line-height: calc(var(--svb-size-sm) * var(--svb-leading-relaxed)); }  /* Zeile auf Höhe der ersten Inhaltszeile */
.preview-info dd { color: var(--svb-color-text); }
.preview-info small { display: block; margin-top: 2px; color: var(--svb-color-text-muted); font-size: var(--svb-size-xs); }
.preview-info .muted { font-size: var(--svb-size-xs); }
.preview-info a { text-decoration: underline; text-underline-offset: .15em; }
.info-list { list-style: none; margin: var(--svb-space-1) 0 0; padding: 0; }
.info-list li { padding: 1px 0; }
/* Zugfolge wie die Linie über dem Block (Proportionalschrift: keine breite Lücke nach „5.“), gedämpft */
.info-moves { margin-left: var(--svb-space-1); color: var(--svb-color-text-muted); font-weight: var(--svb-weight-semibold); white-space: nowrap; }
/* Schmal: Beschriftung über dem Inhalt (Breite der Vorschau-Spalte) */
.create-layout > .preview { container-type: inline-size; }
@container (max-width: 420px) {
  .preview-info { grid-template-columns: minmax(0, 1fr); }
  .preview-info dt { padding-bottom: 0; }
  .preview-info dt + dd { padding-top: var(--svb-space-1); border-top: 0 !important; }
}
/* Vollbild-Ansicht (board.js, Knopf am Brett): ohne Kopfzeile und Überschrift, Brett so groß wie das Fenster erlaubt;
   das Formular bleibt rechts daneben */
html.fs body > header.top, html.fs body > .modbar, html.fs main > h1 { display: none; }
html.fs main { max-width: none; }
@media (min-width: 961px) { html.fs .create-layout { grid-template-columns: max(280px, min(calc(100vh - 190px), 65%)) minmax(0, 1fr); } }
html.fs .preview { top: var(--svb-space-4); }
/* Anderer Report mit derselben Endstellung: nur Hinweis, sperrt nichts */
.existing small { display: block; margin-top: var(--svb-space-1); color: var(--svb-color-text-muted); font-size: var(--svb-size-xs);
                  line-height: var(--svb-leading-relaxed); }
.existing a { text-decoration: underline; text-underline-offset: .15em; }

/* ---------- Ausführliche Analyse starten: Ausgangsstellung links (wie die Vorschau bei „Neuer Report“) ---------- */
.deep-start-board .controls { margin-bottom: var(--svb-space-2); }
.deep-start-hint { font-size: var(--svb-size-xs); }
.deep-existing { margin-top: var(--svb-space-8); }
/* Im Dialog der Report-Seite (iframe, base_embed.html): knapper Rand, Brett fest 260 px (Höhe des iframes folgt dem
   Inhalt, 100vh taugt dort nicht), schmal untereinander */
body.embed main { padding: var(--svb-space-5) var(--svb-space-6); }
body.embed .create-layout > .preview { position: static; width: min(100%, 260px); min-width: 0; }
@media (min-width: 641px) {
  body.embed .create-layout { grid-template-columns: 260px minmax(0, 1fr); }
  body.embed .create-layout > .preview { grid-column: 1; grid-row: 1; width: auto; }
  body.embed .create-layout > .form { grid-column: 2; grid-row: 1; }
}
@media (max-width: 640px) { body.embed main { padding: var(--svb-space-4); } }
.deep-existing ul { list-style: none; padding: 0; margin: 0; }
.deep-existing li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--svb-space-2); padding: var(--svb-space-2) 0;
                    border-bottom: var(--svb-border-hairline) solid var(--svb-color-border-soft); }
.deep-existing form { margin-left: auto; }

/* Eigene Datenbanken: Übersicht (database_list.html) und Prüfbericht (database_rejected.html) */
table.databases td.num { white-space: nowrap; }
@media (max-width: 720px) { table.databases .wide-only { display: none; } }
.reasons { display: flex; flex-wrap: wrap; align-items: center; gap: var(--svb-space-2); margin: 0 0 var(--svb-space-4); }
.reason-chip { padding: 2px var(--svb-space-3); border: var(--svb-border-hairline) solid var(--svb-color-border); border-radius: var(--svb-radius-md);
               font-size: var(--svb-size-sm); color: var(--svb-color-text); text-decoration: none; }
.reason-chip:hover { background: var(--svb-color-accent-bg); }
.reason-chip.on { background: var(--svb-color-accent); border-color: var(--svb-color-accent); color: var(--svb-color-accent-on); }
.reason-chip.on .muted { color: inherit; }
.reasons .btn { margin-left: auto; }
.rejected { padding: var(--svb-space-3) 0; border-bottom: var(--svb-border-hairline) solid var(--svb-color-border-soft); }
.rejected-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--svb-space-1) var(--svb-space-3); }
.rejected-head .muted { font-size: var(--svb-size-sm); }
.rejected .reason { font-size: var(--svb-size-xs); font-weight: var(--svb-weight-semibold); padding: 0 var(--svb-space-2);
                    border-left: var(--svb-space-1) solid var(--svb-error); background: var(--svb-error-bg); }
.rejected details { margin-top: var(--svb-space-2); }
.rejected summary { cursor: pointer; font-size: var(--svb-size-sm); color: var(--svb-color-text-muted); }
.rejected textarea { width: 100%; box-sizing: border-box; margin-top: var(--svb-space-2); font-family: var(--svb-font-mono);
                     font-size: var(--svb-size-xs); }
.rejected-actions { display: flex; flex-wrap: wrap; gap: var(--svb-space-2); margin-top: var(--svb-space-2); }
.pager { display: flex; align-items: center; gap: var(--svb-space-3); margin-top: var(--svb-space-4); }

/* Werkzeuge (tools.html, tool_run.html): je Werkzeug eine Karte mit Optionen und „Starten“, die Ausgabe eines Laufs wie im Terminal */
.tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--svb-space-4); }
.tool { max-width: none; display: flex; flex-direction: column; padding: var(--svb-space-4); background: var(--svb-color-surface);
        border: var(--svb-border-hairline) solid var(--svb-color-border-soft); border-radius: var(--svb-radius-md); }
.tool h3 { margin: 0 0 var(--svb-space-2); font-size: var(--svb-size-base); }
.tool h3 code { font-weight: var(--svb-weight-normal); font-size: var(--svb-size-xs); }
.tool > p { margin: 0 0 var(--svb-space-3); font-size: var(--svb-size-sm); }
.tool-fields { display: flex; flex-wrap: wrap; column-gap: var(--svb-space-3); }
.tool-fields .field { flex: 1 1 140px; margin-bottom: var(--svb-space-3); }
.tool-fields .field.check { flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: var(--svb-space-2); }
.tool-fields small { font-size: var(--svb-size-xs); color: var(--svb-color-text-muted); }
.tool > .btn { margin-top: auto; align-self: flex-start; }
.tool-state { margin: 0 0 var(--svb-space-3); font-size: var(--svb-size-sm); }
.tool-fail { color: var(--svb-error); }
.tool-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--svb-space-2); margin: 0 0 var(--svb-space-3); }
.tool-log { margin: 0; max-height: 70vh; overflow: auto; padding: var(--svb-space-3) var(--svb-space-4);
            background: var(--svb-color-surface); border: var(--svb-border-hairline) solid var(--svb-color-border-soft);
            border-radius: var(--svb-radius-md); font-family: var(--svb-font-mono); font-size: var(--svb-size-xs);
            line-height: var(--svb-leading-normal); white-space: pre-wrap; overflow-wrap: anywhere; }