/* systemmap · dashboard.css
 * ════════════════════════════════════════════════════════════════════
 * Components of the Werter systemmap board. The foundation, tokens,
 * type, the radius and spacing rules, the metaline, the focus ring
 * and the empty-state pattern, lives in werter-tokens.css and is
 * binding for every Werter board. This file may not define colours
 * or radii of its own outside those rules.
 */

body {
  margin: 0;
  /* --boden, nicht --ground: der Seitengrund ist creme, damit die
     weissen Panels darauf als Karten lesbar werden. --ground bleibt
     weiss und gehoert den Kaesten selbst. */
  background: var(--boden);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.55;
}

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }


/* ── letterhead ────────────────────────────────────────────────────
   The head of the board is the head of the stationery: the green
   Werter logotype on white at the left, the contact block small at
   the right, a hairline underneath, and the controls in a quiet row
   of their own. */
/* DER BRIEFKOPF IST GRUEN (17.09.2026). Vorher weiss, und nur
   index.html trug ihn dunkel ueber .lh--dark -- also stand auf jeder
   Arbeitsseite ein weisser Streifen ueber dem gruenen Band, das
   direkt darunter beginnt. Die gruene Fassung war schon da; sie ist
   jetzt die Regel. Dieselbe Aenderung steht in rahmen.css, und beide
   Dateien muessen sie tragen: die sieben Seiten mit dashboard.css
   laden rahmen.css NICHT. */
.lh {
  --cream: #F9F2E4;
  background: var(--green);
  color: var(--cream);
}
.lh__in {
  max-width: 1480px; margin: 0 auto;
  padding: 24px 24px 16px;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.lh__logo { display: block; }
.lh__logo span {
  display: block; width: 148px; height: 33px;
  background: var(--cream);
  -webkit-mask: url(../img/werter-logo.png) no-repeat left center / contain;
  mask: url(../img/werter-logo.png) no-repeat left center / contain;
}
.lh__tag { display: block; margin-top: 8px; color: rgba(249, 242, 228, 0.62); }
.lh__contact {
  margin: 0; text-align: right;
  font-size: 0.75rem; line-height: 1.6; color: rgba(249, 242, 228, 0.82);
}
.lh__contact b { color: var(--cream); font-weight: 700; }
.lh__contact a { color: rgba(249, 242, 228, 0.82); text-decoration: none; }
.lh__contact a:hover { color: var(--cream); }
.lh__bar {
  max-width: 1480px; margin: 0 auto;
  padding: 0 24px 14px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  /* Terrakotta: ein gruener Strich auf Gruen waere keiner. */
  border-bottom: 2px solid var(--terra);
}
.lh__grow { flex: 1; }

/* the section nav: Home, Systemmapping, Firmenregister */
.lh__nav { display: flex; gap: 16px; align-items: center; }
.lh__nav a {
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(249, 242, 228, 0.72); text-decoration: none; padding: 6px 0;
}
.lh__nav a:hover { color: var(--cream); }
.lh__nav a[aria-current="page"] { color: var(--cream); border-bottom: 2px solid var(--terra); }
.lh__back { color: var(--cream); }

.lh__bar .meta { color: rgba(249, 242, 228, 0.72); }
.lh__bar .btn-quiet {
  color: var(--cream); border-color: rgba(249, 242, 228, 0.45); background: none;
}
.lh__bar .btn-quiet:hover {
  color: var(--green); background: var(--cream); border-color: var(--cream);
}
.lh a:focus-visible, .lh button:focus-visible { outline-color: var(--cream); }

/* Das Sprungfeld bleibt hell: es ist ein Eingabefeld und soll auch
   auf dunklem Grund aussehen wie eines. */
.lh__jump .search {
  background: var(--cream); border-color: transparent; color: var(--ink);
}
.lh__jump .search::placeholder { color: rgba(20, 24, 15, 0.55); }

/* ── the workspace shell: sidebar plus content ─────────────────── */
.shell {
  max-width: 1480px; margin: 0 auto;
  padding: 16px 24px 72px;
  display: grid; grid-template-columns: 230px minmax(0, 1fr);
  gap: 20px; align-items: start;
}
.side {
  position: sticky; top: 16px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 18px;
  padding: 10px 0 6px;
}
.side__nav > a {
  display: block; padding: 9px 18px;
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
  border-left: 3px solid transparent;
}
.side__nav > a:hover { color: var(--green); background: var(--hover); }
.side__nav > a[aria-current="page"] { color: var(--green); border-left-color: var(--terra); background: var(--hover); }
.side__sub { list-style: none; margin: 0 0 4px; padding: 0; }
.side__sub a {
  display: block; padding: 5px 18px 5px 32px;
  font-size: 0.8125rem; font-weight: 600; text-decoration: none; color: var(--text);
}
.side__sub a:hover { color: var(--green); background: var(--hover); }
.side__sub .meta { display: block; padding: 0 18px 4px 32px; }
.side__jump { padding: 12px 18px 8px; border-top: 1px solid var(--line); margin-top: 8px; }
.side__jump .search { width: 100%; margin-top: 4px; }
.side__hits { margin-top: 8px; }
.side__hits a {
  display: flex; justify-content: space-between; gap: 8px; align-items: baseline;
  padding: 6px 8px; border-radius: 8px;
  font-size: 0.8125rem; font-weight: 600; text-decoration: none; color: var(--text);
}
.side__hits a:hover { background: var(--hover); color: var(--green); }
.side__hits .empty { font-size: 0.75rem; }
/* Der Gruss. Ein Terrakotta-Strich darueber: die einzige Stelle auf
   der Startseite, an der die Akzentfarbe steht, und damit der Punkt,
   an dem das Auge zu lesen anfaengt. */
.greet { margin: 6px 0 0; padding-top: 18px; position: relative; }
.greet::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 52px; height: 3px; background: var(--terra);
}
.greet__h {
  font-family: var(--serif); font-size: clamp(1.9rem, 3.4vw, 2.5rem);
  font-weight: 900; line-height: 1.1; margin: 0; color: var(--green);
}
.greet__sub { margin: 8px 0 0; }
.stats--in { max-width: none; padding: 14px 0 0; }
.board--in { max-width: none; padding: 14px 0 0; }
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; padding: 12px 16px 48px; }
  .side { position: static; }
  .side__nav { display: flex; flex-wrap: wrap; }
  .side__nav > a { border-left: 0; }
  .side__sub, .side__sub .meta { display: none; }
}

/* ── the workspace launcher: one app tile per desk ──────────────── */
.home { max-width: 1180px; margin: 0 auto; padding: 30px 24px 72px; }

/* Die Gruppenueberschrift bekommt einen Haarstrich ueber sich. Die
   vier Gruppen standen vorher nur durch Abstand getrennt, und bei
   einem Mandanten, dem tor.js zwei davon wegnimmt, verlor die Seite
   damit jede Gliederung. Ein Strich haelt sie auch dann.

   ACHTUNG: zwischen dieser Ueberschrift und ihrer nav.apps darf nichts
   stehen -- tor.js nimmt eine leer gewordene Gruppe samt Ueberschrift
   weg und findet sie ueber previousElementSibling. */
.home__h {
  margin: 38px 0 0; padding-top: 14px;
  border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.home__h:first-of-type { margin-top: 30px; }
/* ── Kennzahlkacheln ─────────────────────────────────────────────────
   Die Bauform stammt aus den Dashboard-Bibliotheken, die der Nutzer am
   15.09.2026 als Vorbild gegeben hat (Tremor, shadcn/ui, Catalyst):
   ein Feld mit feinem Rand statt Schatten, ein kleines Versaletikett,
   darunter die Zahl gross, darunter eine Zeile Zusammenhang.
   Uebernommen ist die BAUFORM -- die Bibliotheken selbst setzen React,
   Tailwind und einen Build-Schritt voraus, und diese Seite hat keinen.

   Zwei Dinge sind bewusst anders als in den Vorlagen:

   KEINE VERAENDERUNGSMARKE. Dort steht unter der Zahl fast immer ein
   "+12 % zum Vormonat". Wir speichern keine Zeitreihe; eine solche
   Marke waere erfunden. Auf einer Seite, die sonst jede Zeile belegt,
   ist eine erfundene Zahl das Letzte, was stehen darf.

   ZIFFERN MIT FESTER BREITE. Ohne tabular-nums springt die Zahl, wenn
   sie sich beim Laden von 4 auf 12 aendert -- und ein springendes
   Dashboard sieht billig aus. */
.kpis {
  display: grid; gap: 12px; margin-top: 12px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.kpi {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 18px 20px;
}
.kpi__label {
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.kpi__zahl {
  font-family: var(--serif); font-size: 2rem; font-weight: 900;
  line-height: 1.05; color: var(--green);
  font-variant-numeric: tabular-nums;
}
.kpi__unter { font-size: 0.8125rem; line-height: 1.45; color: var(--muted); }

/* ── Die App-Kacheln ──────────────────────────────────────────────────
 *
 * Neu gefasst am 17.09.2026. Vorher: eine weisse Flaeche mit Haarrand
 * auf weissem Grund, darauf ein frei stehendes Strichbild und zwei
 * Textzeilen in derselben Groesse. Alles hatte dasselbe Gewicht, und
 * die Kachel sah aus wie ein Absatz mit Rahmen, nicht wie etwas, das
 * man anfasst.
 *
 * Jetzt: das Sinnbild sitzt in einer cremefarbenen Platte -- daran
 * erkennt man eine App, noch bevor man den Namen liest --, und die
 * ZAHL ist der Anker der Kachel. Sie ist das Einzige, was sich
 * aendert, wenn sich die Lage aendert, also gehoert ihr das Gewicht.
 *
 * Der Grund unter den Kacheln ist creme, die Kachel selbst weiss:
 * dadurch traegt die Kachel sich selbst und haengt nicht mehr allein
 * am Haarstrich.
 */
.apps {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 14px; margin-top: 14px;
}
.app {
  display: block; background: var(--panel);
  border: 1px solid var(--line); border-radius: 18px;
  padding: 18px 18px 17px; text-decoration: none; color: var(--text);
  transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}
.app:hover {
  border-color: var(--green); transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 51, 0, 0.09);
}

/* Die Platte. 8px Radius nach der Radiusregel -- sie ist ein Ding,
   das man anfasst, kein Panel. */
.app__icon {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 8px;
  background: var(--cream, #F9F2E4);
  transition: background 120ms ease;
}
.app:hover .app__icon { background: var(--green); }
.app__icon svg {
  width: 25px; height: 25px; display: block;
  fill: none; stroke: var(--green); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  transition: stroke 120ms ease;
}
.app:hover .app__icon svg { stroke: var(--cream, #F9F2E4); }
.app__icon .fill { fill: var(--terra); stroke: none; }
.app__icon .tick { stroke: var(--terratext); stroke-width: 2; }
/* Auf gruener Platte muessen die beiden Akzentteile mitwechseln,
   sonst verschwindet das Terrakotta im Dunkeln. */
.app:hover .app__icon .fill { fill: var(--terra); }
.app:hover .app__icon .tick { stroke: var(--terra); }

.app__name {
  display: block; margin-top: 14px;
  font-family: var(--serif); font-size: 1.0625rem; font-weight: 900;
  color: var(--green); line-height: 1.25;
}
.app__meta { display: block; margin-top: 6px; line-height: 1.7; }

/* Die Zahl. Gross, gruen, mit fester Ziffernbreite -- sie springt
   sonst, sobald home.js sie von 4 auf 84 setzt, und eine springende
   Kachel sieht billig aus. Kein Terrakotta: Terra markiert genau eine
   Sache auf einer Seite, und siebzehn Kacheln sind nicht eine Sache. */
.app__meta b {
  font-family: var(--mono); font-size: 1rem; font-weight: 700;
  color: var(--green); font-variant-numeric: tabular-nums;
}

/* Die Kennung eines Werkzeugs, das fuer DIESEN Mandanten gebaut wurde.
   Sie wird von tor.js zur Laufzeit angehaengt, nie ins HTML geschrieben
   -- damit steht kein Kuerzel im ausgelieferten Code, und ein anderer
   Mandant bekommt sie gar nicht erst geliefert.

   Leise gehalten: grau, klein, Schreibmaschinenschrift, 2px Radius wie
   alles Belegartige. Kein Terra -- Terra markiert genau eine Sache auf
   einer Seite, und das ist hier nicht die Katalognummer. */
.app__kennung {
  display: inline-block;
  margin-top: 6px;
  padding: 1px 5px;
  border: 1px solid var(--line);
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.lead-unit { text-decoration: none; color: var(--green); }
.lead-unit:hover b { text-decoration: underline; }
.home__note {
  max-width: 780px; margin: 28px 0 0;
  font-size: 0.8125rem; line-height: 1.55; color: var(--muted);
}
@media (max-width: 640px) {
  .home { padding: 14px 16px 48px; }
  .apps { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .app { padding: 14px; border-radius: 14px; }
}

/* the wire-volume chart: one series, bars per week */
.wv svg { display: block; width: 100%; height: auto; }
.wv-bar { fill: var(--chart); }
.wv-axis { stroke: var(--line); stroke-width: 1; }
.wv-base { stroke: var(--dim); stroke-width: 1; }
.wv-lbl { font-family: var(--mono); font-size: 11px; fill: var(--dim); }
.wv-val { font-family: var(--mono); font-size: 12px; font-weight: 700; fill: var(--text); }

/* ── home layer ────────────────────────────────────────────────── */
.home__list { list-style: none; margin: 0 0 16px; padding: 0; }
.home__list li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.home__list li:last-child { border-bottom: 0; }
.home__list a { font-family: var(--serif); font-size: 1.3125rem; font-weight: 700; text-decoration: none; }
.home__list--tight a { font-size: 1.125rem; }
.home__list a:hover { text-decoration: underline; }
.home__list .meta { margin-left: 8px; }
.home__reg { font-size: 0.875rem; color: var(--dim); max-width: 31rem; margin: 0 0 16px; }
a.home__go { display: inline-block; text-decoration: none; }

/* ── company register ──────────────────────────────────────────── */
.reg td a { font-weight: 700; }
.co-back { margin: 0 0 10px; }
.co-back a { color: var(--muted); text-decoration: none; }
.co-back a:hover { color: var(--green); }
.co-prog { font-family: var(--serif); font-size: 1.125rem; margin: 18px 0 4px; }
.co-prog:first-child { margin-top: 0; }
.co-prog .meta { margin-left: 8px; }

/* ── ministries desk ───────────────────────────────────────────── */
.min-hits { list-style: none; margin: 0 0 14px; padding: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.min-hits li { border-bottom: 1px solid var(--line); }
.min-hits li:last-child { border-bottom: 0; }
.min-hit {
  display: flex; align-items: baseline; gap: 10px; width: 100%; text-align: left;
  background: none; border: 0; padding: 8px 14px; cursor: pointer; font-family: var(--sans);
}
.min-hit:hover { background: var(--hover); }
.min-hit__k { font-family: var(--mono); font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
.min-hit__t { font-size: 0.8125rem; color: var(--dim); flex: 1; min-width: 0; }
.min-results { margin: 0 0 14px; }
.min-line { font-size: 0.875rem; margin: 8px 0 0; max-width: 44rem; }
.min-succ { list-style: none; margin: 4px 0 0; padding: 0; font-size: 0.875rem; }
.min-succ li { padding: 4px 0; }
.min-jump {
  font-family: var(--mono); font-size: 0.75rem; font-weight: 700;
  background: none; border: 1px solid var(--line); color: var(--green);
  border-radius: 8px; padding: 2px 8px; cursor: pointer;
}
.min-jump:hover { border-color: var(--green); background: var(--hover); }
.min-score { font-family: var(--mono); font-size: 0.625rem; color: var(--dim); }
.min-org {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px; align-items: start;
}
.min-abt { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; min-width: 0; }
.min-abt__h { margin: 0 0 6px; font-size: 0.8125rem; font-weight: 700; cursor: pointer; list-style: none; }
.min-abt__h::-webkit-details-marker { display: none; }
.min-abt__h::before {
  content: "›"; display: inline-block; margin-right: 7px;
  color: var(--terratext); transition: transform 0.12s;
}
.min-abt[open] > .min-abt__h::before { transform: rotate(90deg); }
.min-abt:not([open]) > .min-abt__h { margin-bottom: 0; }
@media print { .min-abt__h::before { content: none; } }
.min-abt__c {
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 700;
  color: var(--terratext); border: 1px solid var(--terra); border-radius: 2px;
  padding: 1px 6px; margin-right: 4px;
}
.min-unit {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  border-top: 1px solid var(--line); padding: 6px 2px; cursor: pointer;
  font-family: var(--sans); border-radius: 0;
}
.min-unit:hover { background: var(--hover); }
.min-unit.is-on { box-shadow: inset 2px 0 0 var(--terra); background: var(--hover); }
.min-unit__k { display: block; font-family: var(--mono); font-size: 0.6875rem; font-weight: 700; }
.min-unit__t { display: block; font-size: 0.75rem; color: var(--dim); line-height: 1.35; }

/* the plus beside the switcher: request a new programme */
.progadd {
  font-family: var(--mono); font-weight: 700; font-size: 1rem; line-height: 1;
  border: 1px solid var(--line); background: var(--surface); color: var(--green);
  border-radius: 8px; min-width: 36px; min-height: 36px; cursor: pointer;
  transition: border-color 0.12s, background-color 0.12s;
}
.progadd:hover { border-color: var(--green); background: var(--hover); }

/* the plus box on a company page: submit a person profile */
.peopleadd {
  display: flex; align-items: center; gap: 10px; width: 100%;
  margin: 12px 0 4px; padding: 12px 14px; cursor: pointer;
  font-family: var(--sans); font-size: 0.8125rem; color: var(--dim);
  border: 1px dashed var(--line); border-radius: 10px; background: var(--surface);
  transition: border-color 0.12s, background-color 0.12s, color 0.12s;
}
.peopleadd:hover { border-color: var(--green); background: var(--hover); color: var(--text); }
.peopleadd__plus {
  font-family: var(--mono); font-weight: 700; font-size: 1rem; line-height: 1;
  color: var(--green); border: 1px solid var(--line); border-radius: 8px;
  min-width: 30px; min-height: 30px; display: inline-flex;
  align-items: center; justify-content: center;
}
.req textarea.search { resize: vertical; min-height: 60px; }

/* company marks: small identification icons from the companies' own
   sites, next to the name only, never as decoration elsewhere */
.reg-logo {
  width: 18px; height: 18px; object-fit: contain;
  vertical-align: -3px; margin-right: 8px;
}
.co-logo {
  width: 28px; height: 28px; object-fit: contain;
  vertical-align: -4px; margin-right: 10px;
}
.co-about { margin-bottom: 4px; }

/* the global jump in the letterhead bar: same index as the
   workspace box, dropdown anchored under the input */
.lh__jump { position: relative; min-width: 0; }
.lh__jump .search { width: 240px; max-width: 58vw; }
.lh__jump .search:focus { width: 300px; }
.lh__hits {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
  min-width: 280px; max-width: 90vw; margin: 0; padding: 6px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(25, 28, 21, 0.12);
}
@media (max-width: 640px) {
  .lh__jump { flex: 1 1 100%; }
  .lh__jump .search, .lh__jump .search:focus { width: 100%; max-width: none; }
  .lh__hits { left: 0; right: 0; min-width: 0; }
}
@media print { .lh__jump { display: none; } }

.rec-stale { color: var(--terratext); margin: 8px 0 0; }
.printlink {
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--dim); background: none;
  border: 0; cursor: pointer; padding: 6px 0;
}
.printlink:hover { color: var(--green); }
@media print { .printlink { display: none; } }

/* a live-only panel with nothing to show folds to a quiet line
   instead of standing as an empty box on the first screen */
.panel.is-idle .panel__dek,
.panel.is-idle .panel__foot { display: none; }
.panel.is-idle .panel__body .empty { margin: 4px 0 2px; }

/* ── the request dialog: the one public write ──────────────────── */
.req {
  border: 1px solid var(--line); border-radius: 18px; padding: 0;
  max-width: 560px; width: calc(100vw - 32px);
  max-height: calc(100vh - 32px); overflow: auto;
  color: var(--text); background: var(--panel);
}
.req::backdrop { background: rgba(25, 28, 21, 0.3); }
.req .search { width: 100%; margin: 4px 0 14px; }
.req__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 14px; }
.req__actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 4px; }
.req__status { font-size: 0.75rem; margin: 8px 0 0; color: var(--dim); max-width: 31rem; }
.req__status.is-ok { color: var(--t-green); }
.req__status.is-err { color: var(--t-red); }


/* one query reaches the map, the drawing and the wire; the box sits
   with the table it filters first */
.mapbar { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: flex-start; margin: 0 0 10px; }
.mapbar .filters { margin: 4px 0 0; flex: 1; min-width: 260px; }

.wire__new {
  background: var(--st-green); color: var(--onfill);
  border-radius: 2px; padding: 1px 5px; font-size: 0.5625rem;
}
.truth__new { color: var(--t-green); font-weight: 700; }
.dfn-hot.is-dim, .zonekey.is-dim, .iso-part.is-dim { opacity: 0.3; }
.schem .dfn-hot.is-hit .dfn-hot__box { stroke: var(--green); stroke-width: 2.4; }
.schem .iso-part.is-hit .iso-tile { stroke: var(--green); stroke-width: 2; }
.zonekey.is-hit { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }

/* ── source-of-truth strip ─────────────────────────────────────── */
/* Die Herkunftsleiste. Sie sass auf derselben Breite wie der
   Briefkopf (1480px) und damit deutlich weiter aussen als der Inhalt
   der Startseite (1180px) -- die erste Zeile unter dem Kopf begann
   also woanders als alles darunter. Jetzt laeuft sie auf dem Mass des
   Inhalts. Der Haarstrich faellt weg: der Kopf bringt seine eigene
   Terrakotta-Kante mit, zwei Linien uebereinander sind eine zu viel. */
.truth {
  max-width: 1180px; margin: 0 auto; padding: 12px 24px 0;
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
}
.truth__pill {
  font-family: var(--mono); font-size: 0.625rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: 2px; padding: 2px 8px;
}
.truth__pill--live { background: var(--st-green); color: var(--onfill); }
.truth__pill--seed { background: var(--st-amber); color: var(--onfill); }
.truth__pill--err  { background: var(--st-red);   color: var(--onfill); }
.truth__line { font-family: var(--mono); font-size: 0.6875rem; color: var(--dim); }
.truth__line b { color: var(--text); font-weight: 700; }

/* ── the sum strip: four figures, each one a jump ──────────────── */
.stats {
  max-width: 1480px; margin: 0 auto; padding: 12px 24px 4px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
}
.stats:empty { display: none; }
.stat {
  display: block; text-decoration: none; position: relative;
  border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 16px 8px;
  transition: border-color 0.12s, background-color 0.12s;
}
/* the logotype's corner bracket, echoed on every figure */
.stat::after {
  content: ""; position: absolute; top: 8px; right: 10px;
  width: 10px; height: 10px;
  border-top: 2px solid var(--green); border-right: 2px solid var(--green);
  opacity: 0.85;
}
.stat:hover { border-color: var(--green); background: var(--hover); text-decoration: none; }
.stat__v {
  display: block; font-family: var(--serif); font-size: 1.75rem; font-weight: 800;
  color: var(--terratext); line-height: 1.15; font-variant-numeric: tabular-nums;
}
.stat__l { display: block; margin-top: 2px; }
@media (max-width: 900px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .stats { padding: 12px 16px 4px; } .stat__v { font-size: 1.3125rem; } }

/* ── the board ─────────────────────────────────────────────────── */
.board {
  max-width: 1480px; margin: 0 auto;
  padding: 16px 24px 72px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
  /* panels size to their content; a shorter neighbour ends where its
     content ends instead of stretching a void to match the row */
  align-items: start;
}
.panel {
  grid-column: span var(--w, 6);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 1px 0 var(--line);
  min-width: 0;
  position: relative;
  display: flex; flex-direction: column;
}
/* display:flex would silently override the hidden attribute */
.panel[hidden] { display: none; }
.panel[data-w="4"]  { --w: 4; }
.panel[data-w="6"]  { --w: 6; }
.panel[data-w="8"]  { --w: 8; }
.panel[data-w="12"] { --w: 12; }
/* tablet: wide panels take the row, narrow ones pair up two abreast */
@media (max-width: 1100px) {
  .panel[data-w="8"], .panel[data-w="12"] { grid-column: span 12; }
  .panel[data-w="4"], .panel[data-w="6"]  { grid-column: span 6; }
}
@media (max-width: 640px)  {
  .panel { grid-column: span 12 !important; }
  .board { padding: 12px 16px 48px; }
  .lh__in, .lh__bar, .truth { padding-left: 16px; padding-right: 16px; }
  .lh__in { padding-top: 16px; padding-bottom: 8px; }
  /* the address block lives in the page footer; on a phone the head
     is logo, tagline, switcher and nothing else */
  .lh__contact { display: none; }
  .rec-name { font-size: 2.625rem; }
}

/* Two panel weights. Instruments (record, schematic, risk, map) carry
   the full head: dark top rule, terracotta tab, the corner bracket
   from the logotype. Evidence panels (chain, trail, gaps, wire,
   standing) stand back: hairline top, smaller title, no tab. */
.panel__head {
  position: relative;
  border-top: 1px solid var(--line);
  border-radius: 18px 18px 0 0;
  padding: 16px 20px 0;
}
.panel--inst > .panel__head { border-top: 2px solid var(--text); }
.panel--inst > .panel__head::before {
  content: ""; position: absolute; left: 20px; top: 0;
  width: 52px; height: 8px; background: var(--terra);
}
/* the logotype's corner bracket, the house signature */
.panel--inst > .panel__head::after {
  content: ""; position: absolute; top: 14px; right: 16px;
  width: 12px; height: 12px;
  border-top: 2px solid var(--green); border-right: 2px solid var(--green);
}
.panel__kicker { display: block; margin-top: 8px; }
.panel__title {
  font-family: var(--serif);
  font-size: 1.3125rem; font-weight: 700; line-height: 1.2;
  margin: 2px 0 0;
}
.panel:not(.panel--inst) .panel__title { font-size: 1.125rem; }
.panel:not(.panel--inst) .panel__kicker { margin-top: 4px; }
.panel__dek { margin: 4px 0 12px; max-width: 31rem; font-size: 0.875rem; color: var(--dim); }
.panel__body { padding: 0 20px 16px; }

/* footer lines: hint, boundary, source. Every instrument carries
   them, folded behind one quiet summary so the honesty stays and the
   noise goes. Printing opens every fold (dashboard.js). */
.panel__foot { border-top: 1px solid var(--line); padding: 6px 20px 10px; }
.fold summary { list-style: none; cursor: pointer; }
.fold summary::-webkit-details-marker { display: none; }
.fold__s { display: flex; align-items: center; gap: 6px; padding: 4px 0; }
.fold__s::before { content: "▸"; font-size: 0.5625rem; color: var(--terratext); }
.fold[open] .fold__s::before { content: "▾"; }
.fold__s:hover { color: var(--text); }
.fold__b { padding: 2px 0 4px; }
.foot-line {
  font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.02em;
  color: var(--dim); margin: 4px 0 0; line-height: 1.5;
}
.foot-line b { font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.foot-line a { color: var(--link); }

/* ── record panel ──────────────────────────────────────────────── */
.rec-name {
  font-family: var(--serif); font-size: 3.625rem; font-weight: 900;
  line-height: 1.02; margin: 6px 0 10px; letter-spacing: -0.01em;
}
/* in the hero pairing the record shares its row with the drawing */
.panel[data-w="6"] .rec-name { font-size: 3.125rem; }
.rec-lead { max-width: 41rem; font-size: 1.125rem; line-height: 1.5; margin: 0 0 12px; }
.rec-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.rec-badges li {
  font-family: var(--mono); font-size: 0.625rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid var(--terra); color: var(--terratext);
  border-radius: 2px; padding: 3px 8px;
}
.rec-dl {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0; margin: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
}
.rec-dl > div { padding: 12px 16px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: -1px -1px 0 0; }
.rec-dl dt { font-family: var(--mono); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
.rec-dl dd { margin: 2px 0 0; font-size: 0.875rem; font-weight: 600; }
.rec-note { font-size: 0.75rem; color: var(--dim); margin: 8px 0 0; max-width: 31rem; }

/* ── chain ladder ──────────────────────────────────────────────── */
.chain { list-style: none; margin: 0; padding: 0; }
.chain li {
  display: grid; grid-template-columns: 132px 1fr; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.chain li:last-child { border-bottom: 0; }
.chain__lvl { font-family: var(--mono); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--terratext); padding-top: 3px; }
.chain__party { font-weight: 700; font-size: 0.875rem; }
.chain__note { font-size: 0.75rem; color: var(--dim); }

/* ── schematic ─────────────────────────────────────────────────── */
.schem { margin: 0; }
.schem__scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--ground); }
.schem svg { display: block; min-width: 640px; width: 100%; height: auto; }
.schem .dfn-ship__part { fill: var(--panel); stroke: var(--dim); stroke-width: 1.1; }
.schem .dfn-ship__wl { stroke: var(--iso-r); stroke-width: 1; }

/* the ship elevation: filled silhouette in the house palette, the
   hull below the waterline wears the terracotta of anti-fouling */
.schem .shp-sea  { fill: var(--iso-tile); opacity: 0.5; }
.schem .shp-hull { fill: var(--iso-l); stroke: var(--iso-line); stroke-width: 1.2; }
.schem .shp-uw   { fill: var(--terra); stroke: var(--iso-line); stroke-width: 1; }
.schem .shp-sup  { fill: var(--iso-t); stroke: var(--iso-line); stroke-width: 1.1; }
.schem .shp-det  { fill: var(--iso-r); stroke: var(--iso-line); stroke-width: 1; }
.schem .shp-dark { fill: var(--iso-line); stroke: none; }
.schem .shp-lead { stroke: var(--muted); stroke-width: 1; }
.schem .shp-prop { fill: var(--iso-line); opacity: 0.55; stroke: none; }
.schem .shp-seam { stroke: var(--iso-line); stroke-width: 1.4; stroke-dasharray: 5 4; }

/* the photographic schematic: a photograph with transparent numbered
   position boxes overlaid. Boxes stay faintly visible over the
   image; the wider viewBox needs larger chips and type. */
.schem .dfn-photo image { pointer-events: none; }
.schem .dfn-photo .dfn-hot__box {
  fill: transparent; stroke: var(--surface); stroke-opacity: 0.7; stroke-width: 2;
}
.schem .dfn-photo .dfn-hot:hover .dfn-hot__box,
.schem .dfn-photo .dfn-hot:focus .dfn-hot__box { stroke: var(--accent); stroke-opacity: 1; stroke-width: 3; }
.schem .dfn-photo .dfn-hot.is-on .dfn-hot__box { stroke: var(--terra); stroke-opacity: 1; stroke-width: 4; }
.schem .dfn-photo .dfn-hot.is-hit .dfn-hot__box { stroke: var(--st-green); stroke-opacity: 1; stroke-width: 4; }
.schem .dfn-photo .dfn-chip circle { stroke-width: 2.4; }
.schem .dfn-photo .dfn-hot__n { font-size: 26px; }

/* hotspots read as numbered survey chips; the region outline only
   appears on hover, selection and search, so the drawing stays a
   drawing and not a wireframe of boxes */
.schem .dfn-hot__box { fill: transparent; stroke: transparent; stroke-width: 1.6; rx: 3; cursor: pointer; }
.schem .dfn-hot:hover .dfn-hot__box, .schem .dfn-hot:focus .dfn-hot__box { stroke: var(--accent); stroke-width: 1.6; }
.schem .dfn-hot--gap .dfn-hot__box { stroke-dasharray: 5 4; }
.schem .dfn-chip circle { fill: var(--panel); stroke: var(--accent); stroke-width: 1.6; }
.schem .dfn-hot--gap .dfn-chip circle { stroke: var(--dim); stroke-dasharray: 4 3; }
.schem .dfn-hot__n { font-family: var(--mono); font-size: 15px; font-weight: 700; fill: var(--text); pointer-events: none; }
.schem .dfn-hot { cursor: pointer; outline: none; }
.schem .dfn-hot.is-on .dfn-hot__box { stroke: var(--terra); stroke-width: 2.4; }
.schem .dfn-hot.is-on .dfn-chip circle { stroke: var(--terra); stroke-width: 2.4; stroke-dasharray: none; }
.schem .dfn-hot.is-stressed .dfn-hot__box { stroke: var(--t-amber); stroke-width: 2; }
.schem .dfn-hot.is-stressed .dfn-chip circle { stroke: var(--t-amber); }
.schem .dfn-hot.is-hit .dfn-chip circle { stroke: var(--green); stroke-width: 2.4; stroke-dasharray: none; }

/* the isometric component matrix (A400M) */
.schem .iso-tile { fill: var(--iso-tile); stroke: var(--line); }
.schem .iso-t    { fill: var(--iso-t);    stroke: var(--iso-line); stroke-width: 1; }
.schem .iso-l    { fill: var(--iso-l);    stroke: var(--iso-line); stroke-width: 1; }
.schem .iso-r    { fill: var(--iso-r);    stroke: var(--iso-line); stroke-width: 1; }
.schem .iso-disc { fill: var(--iso-r);    stroke: var(--iso-line); stroke-width: 1.2; fill-opacity: 0.92; }
.schem .iso-chip circle { fill: var(--panel); stroke: var(--accent); stroke-width: 1.4; }
.schem .iso-chip text { font-family: var(--mono); font-size: 13px; font-weight: 700; fill: var(--text); text-anchor: middle; }
.schem .iso-part { transition: transform 0.12s ease; }
.schem .iso-part:hover, .schem .iso-part:focus { transform: translateY(-3px); }
.schem .iso-part:hover .iso-tile, .schem .iso-part:focus .iso-tile { stroke: var(--accent); stroke-width: 1.6; }
.schem .iso-part.is-on .iso-tile { stroke: var(--terra); stroke-width: 2; }
.schem .iso-part.is-on .iso-chip circle { stroke: var(--terra); stroke-width: 2; }
.schem .iso-part.is-stressed .iso-tile { stroke: var(--t-amber); stroke-width: 2; }
.schem__cap { font-size: 0.6875rem; color: var(--dim); margin: 8px 0 0; max-width: 41rem; font-style: italic; }

.zonekeys { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.zonekey {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: 0.75rem; font-weight: 600;
  background: none; border: 1px solid var(--line); color: var(--text);
  border-radius: 8px; padding: 5px 10px; cursor: pointer; min-height: 32px;
}
.zonekey__n { font-family: var(--mono); font-size: 0.6875rem; font-weight: 700; color: var(--accent); }
.zonekey--gap { border-style: dashed; color: var(--dim); }
.zonekey[aria-pressed="true"] { border-color: var(--terra); box-shadow: inset 0 0 0 1px var(--terra); }
.zonedetail { border: 1px solid var(--line); border-radius: 8px; padding: 12px 16px; }
/* before any selection the detail is a single quiet line, not a
   reserved void */
.zonedetail.is-idle { border-style: dashed; padding: 8px 16px; }
.zonedetail.is-idle .empty { font-size: 0.75rem; }
.zonedetail h4 { font-family: var(--serif); font-size: 1.125rem; margin: 0 0 2px; }
.zonedetail .zd-hint { font-size: 0.75rem; color: var(--dim); margin: 0 0 8px; }
.zd-row { border-top: 1px solid var(--line); padding: 8px 0; }
.zd-row .zd-sys { font-size: 0.875rem; font-weight: 600; margin: 0; }
.zd-row .zd-sup { font-size: 0.875rem; margin: 2px 0; }
.zd-row .zd-src { font-family: var(--mono); font-size: 0.625rem; color: var(--dim); margin: 2px 0 0; }
.zd-row .zd-quote { font-size: 0.75rem; font-style: italic; color: var(--dim); margin: 2px 0 0; }

/* ── status pills, shared ──────────────────────────────────────── */
.st { font-family: var(--mono); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 2px; padding: 2px 7px; border: 1px solid; white-space: nowrap; }
.st--confirmed { color: var(--t-green); border-color: var(--t-green); }
.st--reported  { color: var(--t-amber); border-color: var(--t-amber); }
.st--planned   { color: var(--dim); border-color: var(--dim); }
.st--option    { color: var(--disabled); border-color: var(--disabled); border-style: dashed; }

/* ── map table ─────────────────────────────────────────────────── */
.filters { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin: 0 0 10px; }
.filters .meta { margin-right: 2px; }
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
.map { border-collapse: collapse; width: 100%; min-width: 860px; font-size: 0.875rem; }
.map th {
  text-align: left; font-family: var(--mono); font-size: 0.625rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim);
  padding: 8px 16px; border-bottom: 1px solid var(--text); white-space: nowrap;
}
.map td { padding: 8px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.map tr:last-child td { border-bottom: 0; }
.map tr:hover td { background: var(--hover); }
.map .m-cat { font-family: var(--mono); font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--dim); white-space: nowrap; }
.map .m-sys { font-weight: 600; max-width: 30rem; }
.map .m-note { display: block; font-weight: 400; font-size: 0.75rem; color: var(--dim); }
.map .m-tier { font-family: var(--mono); font-size: 0.6875rem; white-space: nowrap; }
.map .m-src { font-size: 0.75rem; max-width: 17rem; }
.map .m-src .m-read { display: block; font-family: var(--mono); font-size: 0.625rem; color: var(--dim); }
.map .m-src .m-quote { display: block; font-style: italic; color: var(--dim); }
.map-count { margin: 8px 0 0; }

/* ── evidence trail ────────────────────────────────────────────── */
.trail { list-style: none; margin: 0; padding: 0; }
.trail li { display: grid; grid-template-columns: 92px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.trail li:last-child { border-bottom: 0; }
.trail time { font-family: var(--mono); font-size: 0.6875rem; font-weight: 700; }
.trail .ev-kind { display: block; margin-top: 2px; }
.trail h4 { font-family: var(--serif); font-size: 1rem; margin: 0 0 2px; line-height: 1.25; }
.trail p { margin: 0 0 4px; font-size: 0.75rem; color: var(--dim); }
.trail .ev-quote { font-style: italic; }
.trail .ev-src { font-family: var(--mono); font-size: 0.625rem; }

/* ── gaps ──────────────────────────────────────────────────────── */
.gaps ul { margin: 0 0 10px; padding: 0 0 0 18px; font-size: 0.875rem; }
.gaps li { margin: 4px 0; break-inside: avoid; }
/* a wide gaps panel folds its list into columns instead of a spike */
.panel[data-w="8"] .gaps ul  { columns: 2; column-gap: 32px; }
.panel[data-w="12"] .gaps ul { columns: 3; column-gap: 32px; }
@media (max-width: 900px) { .panel .gaps ul { columns: 1; } }
.gaps .gaps-note, .gaps .gaps-structural { font-size: 0.75rem; color: var(--dim); margin: 8px 0 0; max-width: 31rem; }
.gaps .gaps-structural { border-left: 2px solid var(--terra); padding-left: 12px; }

/* ── where the programme stands (ledger) ───────────────────────── */
.led-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.led { padding: 14px 16px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: -1px -1px 0 0; }
.led__v { font-family: var(--serif); font-size: 1.75rem; font-weight: 800; margin: 0; line-height: 1.1; }
.led__l { margin: 2px 0 6px; }
.led__n { font-size: 0.75rem; color: var(--dim); margin: 0 0 6px; }
.led__s { font-family: var(--mono); font-size: 0.625rem; margin: 0; }

/* ── risk instrument ───────────────────────────────────────────── */
.risk-warn { font-size: 0.875rem; max-width: 41rem; border-left: 2px solid var(--t-amber); padding-left: 12px; margin: 0 0 12px; }
.risk-grid { display: grid; grid-template-columns: 260px 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .risk-grid { grid-template-columns: 1fr; } }
.risk-ctls .ctl { margin: 0 0 14px; }
.risk-ctls label { display: flex; justify-content: space-between; gap: 8px; font-size: 0.75rem; font-weight: 700; }
.risk-ctls output { font-family: var(--mono); font-weight: 700; color: var(--accent); }
.risk-ctls .help { font-size: 0.6875rem; color: var(--dim); margin: 3px 0 0; }
.scen { margin: 0 0 14px; }
.scen__d { font-size: 0.6875rem; color: var(--dim); margin: 4px 0 0; }
.risk-ctls .btn-primary { width: 100%; }
.risk-ctls .btn-quiet { margin-top: 8px; font-size: 0.625rem; }

.risk-sum { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; margin: 0 0 4px; }
.risk-sum__range b { font-family: var(--serif); font-size: 1.75rem; font-weight: 800; }
.risk-sum__dash { color: var(--dim); padding: 0 6px; font-size: 0.875rem; }
.risk-sum__lab { display: block; width: 100%; }
.risk-sum__med { font-size: 0.875rem; color: var(--dim); }
.risk-sum__med b { color: var(--text); }
.risk-chart svg { display: block; width: 100%; height: auto; }
.rc-axis { stroke: var(--dim); stroke-width: 1; }
.rc-curve { fill: none; stroke: var(--accent); stroke-width: 2; }
.rc-band-edge { stroke: var(--terra); stroke-width: 1; stroke-dasharray: 2 3; }
.rc-base { stroke: var(--text); stroke-width: 1.2; }
.rc-mk { stroke: var(--dim); stroke-width: 1; stroke-dasharray: 4 3; }
.rc-mkl { font-family: var(--mono); font-size: 13px; font-weight: 700; fill: var(--text); }
.rc-mkd { font-family: var(--mono); font-size: 12px; fill: var(--dim); }
.rc-t { fill: var(--dim); }
.rc-axis-lbl { font-family: var(--mono); font-size: 12px; fill: var(--dim); }
.risk-perf { font-family: var(--mono); font-size: 0.625rem; color: var(--dim); margin: 4px 0 12px; }

.drv { list-style: none; margin: 0; padding: 0; }
.drv li { padding: 6px 0; border-bottom: 1px solid var(--line); }
.drv li:last-child { border-bottom: 0; }
.drv__top { display: flex; gap: 8px; align-items: baseline; margin: 0; flex-wrap: wrap; }
.drv__n { font-family: var(--mono); font-size: 0.6875rem; font-weight: 700; color: var(--accent); min-width: 22px; }
.drv__l { font-size: 0.75rem; font-weight: 600; flex: 1; min-width: 150px; }
.drv__z { display: block; font-weight: 400; font-family: var(--mono); font-size: 0.625rem; color: var(--dim); }
.drv__v { font-family: var(--mono); font-size: 0.75rem; font-weight: 700; }
.drv__unit { color: var(--dim); font-weight: 400; }
.drv__badge { font-family: var(--mono); font-size: 0.5625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; border: 1px solid var(--line); color: var(--dim); border-radius: 2px; padding: 1px 5px; }
.drv__badge--gap { border-color: var(--t-amber); color: var(--t-amber); }
.drv__bar { display: block; height: 3px; background: var(--line); border-radius: 2px; margin-top: 5px; }
.drv__bar span { display: block; height: 3px; background: var(--accent); border-radius: 2px; }
.drv-h { font-family: var(--serif); font-size: 1rem; margin: 14px 0 2px; }
.drv-help { font-size: 0.6875rem; color: var(--dim); margin: 0 0 6px; max-width: 31rem; }

/* ── the programme wire ────────────────────────────────────────── */
.wire { list-style: none; margin: 0; padding: 0; }
.wire li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.wire li:last-child { border-bottom: 0; }
.wire__meta { margin: 0; }
.wire__t { margin: 2px 0 0; font-size: 0.875rem; font-weight: 600; line-height: 1.35; }
.wire__hit { margin: 2px 0 0; color: var(--terratext); }

/* ── page footer ───────────────────────────────────────────────── */
.foot {
  max-width: 1480px; margin: 0 auto; padding: 24px;
  border-top: 1px solid var(--line);
}
.foot p { font-size: 0.75rem; color: var(--dim); max-width: 41rem; margin: 6px 0; }

/* ── print: the board as a document ────────────────────────────── */
@media print {
  .lh__bar, .btn-primary, .btn-quiet, .cite, .filters, .map__search { display: none !important; }
  /* the folds are opened by dashboard.js before printing; the
     summary line itself is chrome and stays off the page */
  .fold__s { display: none !important; }
  .truth { border-bottom: 1px solid #999; }
  .board { display: block; padding: 0; }
  .panel { display: block; margin: 0 0 16px; break-inside: avoid; border-radius: 0; box-shadow: none; }
  .panel[data-panel="map"] { break-inside: auto; }
  .schem__scroll, .tablewrap { overflow: visible; }
  .map { min-width: 0; font-size: 0.75rem; }
  a { text-decoration: none; color: inherit; }
}

/* the lot chip: which procurement lot or fleet scope a row's own
   source ties it to, read straight from the record's vocabulary */
.m-lot {
  display: inline-block; margin-left: 6px; vertical-align: 1px;
  padding: 1px 7px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--hover);
  font-family: var(--mono); font-size: 0.625rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--terratext); white-space: nowrap;
}

/* the leader register states, per ministry, how deep its plan prints
   names: a short block is then a gap in the source, not in the record */
.lead-depth { margin: 2px 0 10px; }
.lead-depth b { color: var(--terratext); font-weight: 700; }

/* ── Der Briefkopf auf dunklem Grund ──────────────────────────────────
   Die Hausfarbe als Flaeche statt als Schrift. Das Wortzeichen wird
   ohnehin als Maske gezeichnet, also kostet die Umkehr kein zweites
   Bild -- man faerbt die Maske um.

   Die Creme stammt aus dem Briefkopf selbst (Werter_Briefkopf.docx,
   word/media/image2.png): dort liegt dasselbe Wortzeichen in #F9F2E4
   fuer dunkle Untergruende bereit. Es ist also keine erfundene Farbe,
   sondern die zweite Fassung, die es im Haus schon gibt.

   Terra markiert die Unterkante: auf Gruen waere die gruene Linie
   unsichtbar, und die Kante ist es, die den Kopf vom Board trennt. */
.lh--dark {
  --cream: #F9F2E4;
  background: var(--green);
  color: var(--cream);
}
.lh--dark .lh__logo span { background: var(--cream); }
.lh--dark .lh__tag       { color: rgba(249, 242, 228, 0.62); }
.lh--dark .lh__contact,
.lh--dark .lh__contact b { color: rgba(249, 242, 228, 0.82); }
.lh--dark .lh__contact b { color: var(--cream); }
.lh--dark .lh__contact a { color: rgba(249, 242, 228, 0.82); }
.lh--dark .lh__contact a:hover { color: var(--cream); }
.lh--dark .lh__bar       { border-bottom: 2px solid var(--terra); }
.lh--dark .lh__nav a     { color: rgba(249, 242, 228, 0.72); }
.lh--dark .lh__nav a:hover,
.lh--dark .lh__back      { color: var(--cream); }
.lh--dark .lh__nav a[aria-current="page"] {
  color: var(--cream); border-bottom-color: var(--terra);
}
/* Das Sprungfeld bleibt hell: es ist ein Eingabefeld und soll auch
   auf dunklem Grund aussehen wie eines. */
.lh--dark .lh__jump .search {
  background: var(--cream); border-color: transparent; color: var(--ink);
}
.lh--dark .lh__jump .search::placeholder { color: rgba(20, 24, 15, 0.55); }
/* Was tor.js in die Leiste haengt -- Adresse und Abmelden -- kennt
   den dunklen Grund nicht und kaeme sonst in Grau auf Gruen daher,
   also unlesbar. Hier wird es festgelegt statt gehofft. */
.lh--dark .lh__bar .meta { color: rgba(249, 242, 228, 0.72); }
.lh--dark .lh__bar .btn-quiet {
  color: var(--cream); border-color: rgba(249, 242, 228, 0.45); background: none;
}
.lh--dark .lh__bar .btn-quiet:hover {
  color: var(--green); background: var(--cream); border-color: var(--cream);
}

/* ── Gemeinsamer Briefkopf: unser Zeichen und das des Mandanten ──────
   Das Zeichen des Kunden wird NICHT umgefaerbt. Es ist seine Marke,
   nicht unsere, und Enclustras Blau (#2151A8) kaeme auf unserem Gruen
   auf 2,00 : 1 -- praktisch unsichtbar. Es liegt deshalb auf einer
   hellen Platte in derselben Creme, die der Briefkopf ohnehin fuehrt:
   dort steht dasselbe Blau bei 6,71 : 1 und bleibt unangetastet.

   So macht man Co-Branding, ohne sich an fremden Marken zu vergreifen:
   nicht anpassen, sondern eine Flaeche geben, auf die sie gehoert. */
.lh__co {
  display: flex; align-items: center; gap: 16px; margin-top: 14px;
}
.lh__co__rule {
  width: 1px; align-self: stretch; min-height: 34px;
  background: rgba(249, 242, 228, 0.28);
}
.lh__co__plate {
  display: block; background: var(--cream, #F9F2E4);
  border-radius: 8px; padding: 7px 12px; line-height: 0;
}
.lh__co__plate img { display: block; height: 26px; width: auto; }
.lh__co__label {
  font-family: var(--mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(249, 242, 228, 0.55);
}
@media (max-width: 560px) {
  .lh__co__plate img { height: 21px; }
  .lh__co__label { display: none; }
}

/* ── Der Vorhang vor dem Werkzeugkasten ──────────────────────────────
   Gehört zu tor.js und ist ohne es sinnlos.

   tor.js schneidet den Kasten auf das zurecht, was diese Gruppe hat —
   aber erst, nachdem die Datenbank geantwortet hat. Das sind ein, zwei
   Zehntelsekunden, und in denen stand vorher der GANZE Kasten auf dem
   Schirm, auch die Werkbank, die nur dem Haus gehört. Ein Mandant hat
   das am 15.09.2026 gemeldet: auf dem Weg von einem Werkzeug zurück in
   den Workspace blitzen die abgeschalteten Kacheln auf, bevor sie
   verschwinden. Ein Lesegerät ist schneller als eine Datenbank.

   Also andersherum: verdeckt, bis das Tor entschieden hat.

   WARUM visibility UND NICHT display ODER hidden
   Das Attribut hidden würde von „.app { display: block }" weiter oben
   überstimmt — derselbe Tritt, den das Haus bei .panel schon einmal
   bekommen hat. display:none ließe die Seite beim Aufdecken in der
   Höhe springen. visibility lässt den Platz stehen und nimmt nur das
   Bild.

   Der Gruß darüber bleibt sichtbar. Der Leser sieht Briefkopf und
   Anrede, während die Kacheln kommen — keine leere Seite, nur ein
   Kasten, der sich noch nicht entschieden hat.

   Aufgedeckt wird über [data-tor] am <html>. tor.js setzt das in JEDEM
   Ausgang: nach dem Schnitt, ohne Schnitt, ohne auth.js und spätestens
   nach drei Sekunden. Wer diese Regel anfasst, muss dort nachsehen —
   eine Seite, die den Kasten nie zeigt, weil eine Abfrage hängt, wäre
   ein schlechterer Tausch als das Flackern. */
main.home .home__h,
main.home .apps { visibility: hidden; }
html[data-tor="fertig"] main.home .home__h,
html[data-tor="fertig"] main.home .apps { visibility: visible; }