/*
 * fcp-maskenverwaltung.css — Optik der lesenden ADM-Maske /app/maskenverwaltung
 * ============================================================================
 * Owner-Zielbild ADM_MASKENVERWALTUNG_REFERENZFORMAT (05.09.2026): vier Spalten
 * in einer festen Buehne — globale Navigation (Shell, admin-board__nav) |
 * Maskeninventar | Werkbank | Inspector. Layout und Anordnung folgen dem
 * Referenzformat; das Aussehen folgt dem Portal — Tokens aus main.css
 * (--bg/--surface/--surface-2/--text/--muted/--line/--accent/--accent-warm),
 * NICHT die Inter/Pixelmasse des Referenzformat-Mockups. Kein !important,
 * keine zweite CSS-Ebene: alles hier ist scharf auf #maskenverwaltungAdmRoot
 * bzw. .mv-* Klassen dieser Maske geschnitten.
 *
 * Dunkelmodus: main.css schaltet auf /app/*-Seiten body[data-app-theme=
 * "fcp_tactical"] und dunkelt sie zusaetzlich unter
 * html[data-fcp-theme="dark"] body[data-app-theme="fcp_tactical"] ab (Owner-
 * Befund 04.09.2026, "die App wird ueberhaupt nicht dunkel"). Alle Flaechen-,
 * Text- und Linienfarben hier sind Aliasse auf genau diese Tokens, ziehen
 * also automatisch mit. Die Status-Pillen (gruen/rot/orange/blau/gelb/grau/
 * lila) bleiben bewusst helle Farbchips mit dunkler Schrift in beiden
 * Modi — wie Jira-/Linear-Labels ein in sich kontrastreicher Aufkleber,
 * kein Flaechenton der Seite; das ist beabsichtigt, kein Rest-Hell.
 *
 * Bauplan B1, Schritt 3. Keine Farbe ohne Wort — deshalb tragen alle Pillen
 * Text, nicht nur einen Farbton.
 */

.mv-panel {
  --mv-ink: var(--text);
  --mv-line: var(--line);
  --mv-akzent: var(--accent-warm);
  --mv-gedimmt: var(--muted);
  --mv-flaeche: var(--surface);
  --mv-flaeche-2: var(--surface-2);
  font-size: 12.5px;
  color: var(--mv-ink);
}

/* Die globale Eingabefeld-Optik fuer <button> (main.css,
   body[data-app-theme="fcp_tactical"] button:where(:not(.fcp-btn)...)) wird
   nicht hier per Spezifitaet ueberboten, sondern an der Quelle vermieden:
   fcp-maskenverwaltung-board.js vergibt jedem selbst gebauten <button> die
   Klasse "fcp-btn" (el()-Hilfsfunktion), die genau von dieser globalen Regel
   ausgenommen ist. Ohne das blieb im Dunkelmodus jeder Baum-Knoten, Reiter
   und Kette-Knoten dauerhaft hell hinterlegt (Sichtpruefung 05.09.2026) —
   eine ID-gescopte Gegenregel haette dieselbe Spezifitaet-Uebermacht dann
   auch gegen die eigenen .mv-*-Hintergrundfarben ausgespielt. */

/* src/styles/app-shell.css (Astro-gebuendelt, keine eigene Zeile hier zu
   duplizieren) laesst .admin-board__content/.admin-section/.admin-card ohne
   volle Breite, ausser ein Mask-Renderer traegt die Klasse
   "member-registry-board" (dort: width:100%/max-width:100%). Diese Maske hat
   diese Klasse nicht — ohne eigene Breitenregel bliebe die Buehne auf die
   Content-Spalte des Grids geclippt, statt sie zu fuellen. Scharf auf
   #maskenverwaltungAdmRoot geschnitten, keine Breitenaenderung fuer andere
   Masken. */
#maskenverwaltungAdmRoot .admin-board__content,
#maskenverwaltungAdmRoot .admin-section,
#maskenverwaltungAdmRoot .admin-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* ── Vier-Spalten-Buehne der Section "Masken" (Referenzformat) ───────────
   Spalte 1 (globale Navigation) ist die Shell selbst (admin-board__nav,
   position:left aus dem Vertrag) — hier nicht neu gebaut, nur mitgestylt
   (Abschnitt "Globale Navigation" unten). Spalten 2-4 sind die drei Panels
   dieser Section: mv_inventar | mv_werkbank | mv_inspector. Der Maskenlader
   stapelt sie als Geschwister in .admin-section — dieses Raster legt sie
   nebeneinander. Unter 1100px faellt es bewusst auf Stapel zurueck (mobil/
   schmal bleibt die Reihenfolge Inventar → Werkbank → Inspector lesbar). */
@media (min-width: 1100px) {
  .admin-section[data-section-id="mv_masken"] {
    display: grid;
    grid-template-columns: minmax(220px, 24fr) minmax(340px, 52fr) minmax(230px, 24fr);
    align-items: start;
    gap: 0;
  }
  .admin-section[data-section-id="mv_masken"] > .admin-card {
    min-width: 0;
    border-radius: 0;
    border-top: 0;
    border-bottom: 0;
  }
  .admin-section[data-section-id="mv_masken"] > .admin-card:first-child { border-left: 0; }
  .admin-section[data-section-id="mv_masken"] > .admin-card + .admin-card { border-left: 0; }
  .admin-section[data-section-id="mv_masken"] > [data-panel-id="mv_inventar"],
  .admin-section[data-section-id="mv_masken"] > [data-panel-id="mv_werkbank"],
  .admin-section[data-section-id="mv_masken"] > [data-panel-id="mv_inspector"] {
    max-height: calc(100vh - 220px);
    overflow-y: auto;
  }
}

.mv-panel > * { min-width: 0; }
.mv-panel .mv-hinweis {
  margin: 0;
  padding: 12px 14px;
  color: var(--mv-gedimmt);
  font-size: 12.5px;
  line-height: 1.5;
}
.mv-platzhalter {
  border: 1px dashed var(--mv-line);
  border-radius: 8px;
  margin: 12px;
  background: var(--mv-flaeche);
}
.mv-fussnote {
  margin: 10px 14px 12px;
  color: var(--mv-gedimmt);
  font-size: 11.5px;
  line-height: 1.5;
}

/* ── Inventar ─────────────────────────────────────────────────────────── */

.mv-inventar__kopf {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--mv-line);
}
.mv-inventar__zahl {
  font-size: 11.5px;
  color: var(--mv-gedimmt);
  letter-spacing: 0.01em;
}
.mv-suche {
  width: 100%;
  padding: 6px 9px;
  font: inherit;
  font-size: 12.5px;
  border: 1px solid var(--mv-line);
  border-radius: 6px;
  background: var(--mv-flaeche);
  color: var(--mv-ink);
}
.mv-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.mv-filter__select {
  font: inherit;
  font-size: 11.5px;
  padding: 4px 6px;
  border: 1px solid var(--mv-line);
  border-radius: 6px;
  background: var(--mv-flaeche);
  color: var(--mv-ink);
  max-width: 100%;
}

/* Owner-Grundsatz 04.09.2026: Touch-Zweig, damit iOS beim Fokus nicht zoomt. */
@media (pointer: coarse), (max-width: 899px) {
  .mv-filter__select {
    font-size: 16px;
  }
}

.mv-tabelle__rahmen { overflow: auto; max-height: 46vh; }
.mv-tabelle thead th { position: sticky; top: 0; background: var(--mv-flaeche); z-index: 1; }
.mv-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.mv-tabelle__th {
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--mv-gedimmt);
  padding: 8px 10px;
  border-bottom: 1px solid var(--mv-line);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.mv-tabelle__th.is-sortiert { color: var(--mv-akzent); }
.mv-zeile { cursor: pointer; border-bottom: 1px solid var(--mv-line); }
.mv-zeile:hover { background: var(--mv-flaeche); }
.mv-zeile.is-gewaehlt { background: rgba(212, 106, 32, 0.09); }
.mv-zeile.is-gewaehlt .mv-zelle--stark { color: var(--mv-akzent); }
.mv-zelle { padding: 7px 10px; vertical-align: top; line-height: 1.35; }
.mv-zelle--stark { font-weight: 600; }
.mv-zelle--code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
.mv-zelle--gedimmt { color: var(--mv-gedimmt); font-size: 11.5px; }
.mv-leer { padding: 16px 10px; color: var(--mv-gedimmt); }

/* Pillen: Farbe UND Wort. Grau bleibt grau — es wird nie automatisch rot. */
.mv-pille {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  background: #eceae5;
  color: #4c514b;
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.mv-pille--vertrag_importiert { background: #e9f2d8; color: #45651c; }
.mv-pille--vertrag_ohne_import { background: #fff0d9; color: #8f5813; }
.mv-pille--vertrag_ohne_auditscan_treffer { background: #fff0d9; color: #8f5813; }
.mv-pille--kein_vertrag { background: #eceae5; color: #5b5f58; }
.mv-pille--gruen { background: #e9f2d8; color: #45651c; }
.mv-pille--rot { background: #fbe3de; color: #8f3320; }
.mv-pille--blau { background: #e2ecf6; color: #2f5677; }
.mv-pille--gelb { background: #fdf3cf; color: #7d6209; }
.mv-pille--grau { background: #eceae5; color: #5b5f58; }
.mv-pille--verlagert { background: #ece7f4; color: #56407c; }
.mv-pille--nicht_beurteilbar { background: #eceae5; color: #5b5f58; }

/* ── Werkbank: Baum ───────────────────────────────────────────────────── */

.mv-baum__kopf,
.mv-vorschau__kopf,
.mv-inspector__kopf {
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--mv-line);
}
.mv-baum__titel,
.mv-vorschau__titel,
.mv-inspector__titel {
  font-weight: 700;
  font-size: 13px;
}
.mv-baum__pfad,
.mv-vorschau__pfad {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  color: var(--mv-gedimmt);
  margin-top: 3px;
  word-break: break-all;
}
.mv-baum__zahl { padding: 8px 14px 0; font-size: 11.5px; color: var(--mv-gedimmt); }

.mv-baum__liste,
.mv-baum__panels,
.mv-baum__felder {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mv-baum__liste { padding: 8px 10px 14px; }
.mv-baum__panels { padding-left: 12px; border-left: 1px solid var(--mv-line); margin-left: 6px; }
.mv-baum__felder { padding-left: 12px; border-left: 1px solid var(--mv-line); margin-left: 6px; }
.mv-baum__knoten {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 12px;
  background: none;
  border: 0;
  padding: 4px 6px;
  border-radius: 5px;
  color: var(--mv-ink);
  cursor: default;
  line-height: 1.4;
}
button.mv-baum__knoten { cursor: pointer; }
button.mv-baum__knoten:hover { background: var(--mv-flaeche-2); }
.mv-baum__knoten--section { font-weight: 700; margin-top: 6px; }
.mv-baum__knoten--panel { font-weight: 600; }
.mv-baum__knoten--feld { color: var(--mv-gedimmt); }
.mv-baum__knoten.is-gewaehlt {
  background: rgba(212, 106, 32, 0.13);
  color: var(--mv-akzent);
  font-weight: 700;
}
.mv-baum__marke {
  font-size: 10px;
  color: var(--mv-gedimmt);
  font-weight: 400;
  margin-left: 4px;
}

/* ── Werkbank: Vorschau ───────────────────────────────────────────────── */

.mv-vorschau__section { border-top: 1px solid var(--mv-line); padding: 10px 14px 12px; }
.mv-vorschau__section-titel { font-weight: 700; font-size: 12px; margin-bottom: 2px; }
.mv-vorschau__section-sub { font-size: 11px; color: var(--mv-gedimmt); margin-bottom: 8px; }
.mv-vorschau__panel {
  border: 1px solid var(--mv-line);
  border-radius: 8px;
  background: var(--mv-flaeche);
  margin-bottom: 8px;
  overflow: hidden;
}
.mv-vorschau__panel.is-gewaehlt { border-color: var(--mv-akzent); box-shadow: 0 0 0 1px rgba(212, 106, 32, 0.25); }
.mv-vorschau__panel-kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 7px 10px;
  background: var(--mv-flaeche);
  border-bottom: 1px solid var(--mv-line);
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 600;
}
.mv-vorschau__panel-art { font-weight: 400; font-size: 10.5px; color: var(--mv-gedimmt); }
.mv-vorschau__felder {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  padding: 10px;
}
.mv-feld { border: 1px solid transparent; border-radius: 6px; padding: 3px 4px; cursor: pointer; }
.mv-feld:hover { background: var(--mv-flaeche); }
.mv-feld.is-gewaehlt { border-color: var(--mv-akzent); background: rgba(212, 106, 32, 0.07); }
.mv-feld__label { display: block; font-size: 10.5px; font-weight: 600; color: var(--mv-ink); margin-bottom: 3px; }
.mv-feld__eingabe {
  border: 1px solid var(--mv-line);
  border-radius: 5px;
  background: var(--mv-flaeche);
  padding: 5px 7px;
  font-size: 11px;
  color: var(--mv-gedimmt);
  min-height: 26px;
}
.mv-feld__ziel {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9.5px;
  color: var(--mv-gedimmt);
  margin-top: 3px;
  word-break: break-all;
}
.mv-vorschau__spalten { padding: 10px; overflow-x: auto; }
.mv-vorschau__ohne { padding: 10px; font-size: 11.5px; color: var(--mv-gedimmt); }

/* ── Inspector ────────────────────────────────────────────────────────── */

.mv-inspector__umschalter { display: flex; gap: 4px; margin-top: 8px; }
.mv-inspector__knopf {
  font: inherit;
  font-size: 11px;
  padding: 4px 10px;
  border: 1px solid var(--mv-line);
  border-radius: 999px;
  background: var(--mv-flaeche);
  color: var(--mv-gedimmt);
  cursor: pointer;
}
.mv-inspector__knopf.is-aktiv {
  background: var(--mv-akzent);
  border-color: var(--mv-akzent);
  color: #fff;
  font-weight: 600;
}
.mv-inspector__gegenstand { font-size: 11px; color: var(--mv-gedimmt); margin-top: 4px; }
.mv-eigenschaften { padding: 10px 14px 14px; display: grid; gap: 7px; }
.mv-eigenschaft {
  display: grid;
  grid-template-columns: minmax(90px, 40%) 1fr;
  gap: 8px;
  border-bottom: 1px solid var(--mv-line);
  padding-bottom: 6px;
}
.mv-eigenschaft__k { font-size: 10.5px; color: var(--mv-gedimmt); text-transform: uppercase; letter-spacing: 0.03em; }
.mv-eigenschaft__v { font-size: 11.5px; word-break: break-word; }
.mv-eigenschaft__v--code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; }
.mv-eigenschaft__v--fehlt { color: var(--mv-gedimmt); font-style: italic; }
.mv-json {
  margin: 0;
  padding: 12px 14px;
  background: #23261f;
  color: #e8e6dd;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  line-height: 1.5;
  overflow-x: auto;
  white-space: pre;
}

/* ── Vier Bereiche einer Maske ohne Vertrag ───────────────────────────── */
.mv-ohne-vertrag { padding: 12px 14px; display: grid; gap: 8px; }
.mv-ohne-vertrag__eintrag {
  border: 1px solid var(--mv-line);
  border-left: 3px solid #c9c6bd;
  border-radius: 6px;
  padding: 8px 10px;
  background: var(--mv-flaeche);
}
.mv-ohne-vertrag__k { font-weight: 700; font-size: 11.5px; }
.mv-ohne-vertrag__v { font-size: 11px; color: var(--mv-gedimmt); margin-top: 2px; line-height: 1.5; }

/* ── Vier Kacheln (Bauplan B1, Schritt 5) ─────────────────────────────── */
/* Farbvertrag: SYSTEM/FCP/AUDIT/LIVE_AUDIT_GRAPH_UMSETZUNGSINDEX.md.
   Jede Farbe steht neben einem Wort; grau wird nie automatisch rot. */
.mv-kacheln { display: block; }
.mv-kacheln__kopf {
  padding: 10px 14px;
  border-bottom: 1px solid var(--mv-line);
  background: var(--mv-flaeche);
}
.mv-kacheln__titel { font-weight: 700; font-size: 13px; }
.mv-kacheln__pfad {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--mv-gedimmt);
}
.mv-kacheln__gitter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 12px;
  padding: 12px 14px 16px;
  align-items: start;
}
.mv-kachel {
  border: 1px solid var(--mv-line);
  border-radius: 8px;
  background: var(--mv-flaeche);
  overflow: hidden;
}
.mv-kachel--leer { background: #f6f5f1; border-style: dashed; }
.mv-kachel__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px 5px;
}
.mv-kachel__titel { font-size: 12.5px; font-weight: 700; margin: 0; }
.mv-kachel__herkunft {
  padding: 0 12px 6px;
  font-size: 10.5px;
  color: var(--mv-gedimmt);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  word-break: break-all;
}
.mv-kachel__wort {
  margin: 0 12px 8px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--mv-ink);
}
.mv-kachel__drift {
  margin: 0 12px 8px;
  padding: 6px 8px;
  font-size: 11px;
  line-height: 1.45;
  border-left: 3px solid #d09a2c;
  background: #fdf6e6;
  color: #6b5210;
}
.mv-kachel__koerper { padding: 0 12px 12px; }
.mv-kachel__zeile { font-size: 11.5px; line-height: 1.6; margin-bottom: 6px; }
.mv-kachel__block { margin-top: 10px; }
.mv-kachel__block h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mv-gedimmt);
  margin: 0 0 5px;
}
.mv-gedimmt { color: var(--mv-gedimmt); }
.mv-liste { margin: 0; padding-left: 16px; font-size: 11px; line-height: 1.55; }

.mv-zahlen { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.mv-zahl {
  flex: 1 1 64px;
  border: 1px solid var(--mv-line);
  border-radius: 6px;
  padding: 5px 7px;
  background: var(--mv-flaeche);
}
.mv-zahl__wert { font-size: 15px; font-weight: 700; line-height: 1.1; }
.mv-zahl__k { font-size: 10px; color: var(--mv-gedimmt); margin-top: 1px; }

.mv-tabelle--kompakt { font-size: 11px; }
.mv-tabelle--kompakt .mv-zelle { padding: 4px 6px; }
.mv-tabelle--kompakt .mv-tabelle__th { padding: 4px 6px; }

/* Prüfpunkte: Farbe UND Wort, nie nur Farbe. */
.mv-pp-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 5px;
}
.mv-pp {
  border: 1px solid var(--mv-line);
  border-radius: 6px;
  padding: 5px 6px;
  background: var(--mv-flaeche);
}
.mv-pp__nr { font-size: 10px; font-weight: 700; color: var(--mv-gedimmt); }
.mv-pp__wort { font-size: 10.5px; line-height: 1.3; margin-top: 1px; }
.mv-pp__empfaenger {
  font-size: 9.5px;
  margin-top: 3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #56407c;
  word-break: break-all;
}
.mv-pp--gruen { background: #e9f2d8; border-color: #bcd396; }
.mv-pp--rot { background: #fbe3de; border-color: #e3ab9c; }
.mv-pp--orange { background: #fdf0dd; border-color: #e6c188; }
.mv-pp--blau { background: #e2ecf6; border-color: #a8c4dd; }
.mv-pp--gelb { background: #fdf3cf; border-color: #e0cc82; }
.mv-pp--grau { background: #eceae5; border-color: #cfccc4; }
.mv-pp--verlagert { background: #ece7f4; border-color: #bfb0da; }
.mv-pp--nicht_beurteilbar { background: #eceae5; border-color: #cfccc4; }

.mv-punkt {
  display: inline-block;
  border-radius: 4px;
  padding: 1px 4px;
  font-size: 9.5px;
  white-space: nowrap;
}
.mv-punkt--gruen { background: #e9f2d8; color: #45651c; }
.mv-punkt--rot { background: #fbe3de; color: #8f3320; }
.mv-punkt--orange { background: #fdf0dd; color: #8a5c14; }
.mv-punkt--blau { background: #e2ecf6; color: #2f5677; }
.mv-punkt--gelb { background: #fdf3cf; color: #7d6209; }
.mv-punkt--grau { background: #eceae5; color: #5b5f58; }
.mv-punkt--verlagert { background: #ece7f4; color: #56407c; }
.mv-punkt--nicht_beurteilbar { background: #eceae5; color: #5b5f58; }

.mv-legende { display: grid; gap: 4px; }
.mv-legende__eintrag { display: flex; gap: 7px; align-items: baseline; }
.mv-legende__text { font-size: 10.5px; color: var(--mv-gedimmt); line-height: 1.4; }

.mv-pille--zustand-voll { background: #e9f2d8; color: #45651c; }
.mv-pille--zustand-leer { background: #eceae5; color: #5b5f58; }
.mv-pille--panelstate-live { background: #e9f2d8; color: #45651c; }
.mv-pille--panelstate-gap { background: #eceae5; color: #5b5f58; }
.mv-pille--panelstate-preview { background: #e2ecf6; color: #2f5677; }
.mv-pille--etappe-akte_vorhanden { background: #e2ecf6; color: #2f5677; }
.mv-pille--etappe-etappe_ohne_akte { background: #eceae5; color: #5b5f58; }
.mv-pille--ergebnis-gilt { background: #e9f2d8; color: #45651c; }
.mv-pille--ergebnis-giltnicht,
.mv-pille--ergebnis-gilt_nicht { background: #fbe3de; color: #8f3320; }
.mv-pille--ergebnis-nicht_geprueft { background: #eceae5; color: #5b5f58; }
.mv-pille--ergebnis-teilweise { background: #fdf3cf; color: #7d6209; }
.mv-pille--lz-aktiv { background: #fdf0dd; color: #8a5c14; }
.mv-pille--lz-abgeloest { background: #eceae5; color: #5b5f58; }
.mv-pille--lz-bewusst_stillgelegt { background: #e2ecf6; color: #2f5677; }
.mv-pille--lz-drift { background: #fbe3de; color: #8f3320; }
.mv-pille--lz-unbestimmt { background: #eceae5; color: #5b5f58; }

.mv-pe-liste { display: grid; gap: 7px; }
.mv-pe {
  border: 1px solid var(--mv-line);
  border-left: 3px solid #b9b4a8;
  border-radius: 6px;
  padding: 7px 9px;
  background: var(--mv-flaeche);
}
.mv-pe__kopf { display: flex; gap: 7px; align-items: baseline; flex-wrap: wrap; }
.mv-pe__id {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--mv-akzent);
}
.mv-pe__titel { font-size: 11.5px; font-weight: 600; }
.mv-pe__frage { font-size: 11px; line-height: 1.5; margin-top: 3px; color: var(--mv-ink); }
.mv-pe__fuss { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 5px; }
.mv-akte {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  color: #2f5677;
  word-break: break-all;
}

/* ── Kette Maske → Aktion → RPC/Edge → Tabelle (Bauplan B1, Schritt 6) ── */
.mv-kette__kopf {
  padding: 10px 14px;
  border-bottom: 1px solid var(--mv-line);
  background: var(--mv-flaeche);
}
.mv-kette__titel { font-weight: 700; font-size: 13px; }
.mv-kette__pfad {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--mv-gedimmt);
}
.mv-kette .mv-zahlen,
.mv-kette .mv-kachel__block,
.mv-kette .mv-hinweis,
.mv-kette .mv-fussnote,
.mv-kette > .mv-pille { margin-left: 14px; margin-right: 14px; }
.mv-kette__schichten {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(180px, 1fr);
  gap: 10px;
  padding: 10px 14px;
  overflow-x: auto;
  align-items: start;
}
.mv-kette__spalte {
  border: 1px solid var(--mv-line);
  border-radius: 8px;
  background: var(--mv-flaeche);
  min-width: 0;
}
.mv-kette__spaltenkopf {
  padding: 6px 9px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mv-gedimmt);
  border-bottom: 1px solid var(--mv-line);
  background: var(--mv-flaeche);
}
.mv-kette__liste {
  padding: 7px;
  display: grid;
  gap: 5px;
  max-height: 44vh;
  overflow-y: auto;
}
.mv-knoten {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid var(--mv-line);
  border-left-width: 4px;
  border-radius: 5px;
  padding: 5px 7px;
  font: inherit;
  color: var(--mv-ink);
  cursor: pointer;
  background: var(--mv-flaeche);
}
.mv-knoten:hover { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); }
.mv-knoten__label {
  display: block;
  color: var(--mv-ink);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  word-break: break-word;
}
.mv-knoten__wort { display: block; font-size: 9.5px; color: #5b5f58; margin-top: 1px; }
.mv-knoten--gruen { border-left-color: #7fa143; background: #f3f8ea; }
.mv-knoten--rot { border-left-color: #c2543a; background: #fdf1ee; }
.mv-knoten--orange { border-left-color: #d09a2c; background: #fdf7ec; }
.mv-knoten--blau { border-left-color: #5b86ad; background: #f1f6fb; }
.mv-knoten--grau { border-left-color: #b0ada5; background: #f5f4f0; }
.mv-kette__inspektor {
  margin: 4px 14px 14px;
  border: 1px solid var(--mv-line);
  border-radius: 8px;
  padding: 9px 11px;
  background: var(--mv-flaeche);
}
.mv-knoten-inspektor__id {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  color: var(--mv-akzent);
  word-break: break-all;
  margin-bottom: 6px;
}

/* ── Querschnitte: Datenbindungen · Rollen · Regeln (Bauplan B1, Schritt 7) ──
   Drei Projektionen desselben Bestands entlang anderer Achsen (Zielbild §5).
   Sie liegen je in einer eigenen Section mit genau einem Panel, deshalb reicht
   hier eine Blockdarstellung — kein Vier-Spalten-Raster wie bei „Masken". */
.mv-quer { display: block; }
.mv-quer__kopf {
  padding: 10px 14px;
  border-bottom: 1px solid var(--mv-line);
  background: var(--mv-flaeche);
}
.mv-quer__titel { font-weight: 700; font-size: 13px; }
.mv-quer__unter { font-size: 11px; color: var(--mv-gedimmt); line-height: 1.5; margin-top: 2px; }
.mv-quer .mv-zahlen,
.mv-quer .mv-quer__leiste,
.mv-quer > .mv-tabelle__rahmen,
.mv-quer > .mv-quer__zahl,
.mv-quer > .mv-fussnote,
.mv-quer > .mv-quer__block { margin: 10px 14px; }
.mv-quer__zahl { font-size: 11px; color: var(--mv-gedimmt); margin-bottom: 4px; }
.mv-quer__leiste { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mv-quer__leiste .mv-suche { flex: 1 1 220px; margin: 0; }
.mv-quer__block { border-top: 1px solid var(--mv-line); padding-top: 10px; }
.mv-quer__block > h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mv-gedimmt);
  margin: 0 0 6px;
}
.mv-quer__block .mv-tabelle__rahmen { max-height: 40vh; }
.mv-quer__masken,
.mv-quer__fehlt { display: flex; flex-wrap: wrap; gap: 5px; }

.mv-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.mv-chip {
  display: inline-block;
  border: 1px solid var(--mv-line);
  border-radius: 999px;
  padding: 3px 9px;
  font: inherit;
  font-size: 11px;
  background: var(--mv-flaeche);
  color: var(--mv-ink);
  cursor: pointer;
}
button.mv-chip:hover { border-color: var(--mv-akzent); }
.mv-chip.is-aktiv { background: rgba(212, 106, 32, 0.12); border-color: var(--mv-akzent); color: #8a4413; font-weight: 600; }
.mv-chip--fehlt { background: #f5f4f0; color: #5b5f58; border-style: dashed; cursor: default; }
.mv-chip--panelstate-live { background: #e9f2d8; color: #45651c; }
.mv-chip--panelstate-gap { background: #eceae5; color: #5b5f58; }
.mv-chip--panelstate-preview { background: #e2ecf6; color: #2f5677; }

/* Richtung und Zusage tragen ein Wort, nie nur eine Farbe. */
.mv-pille--richtung-load { background: #e2ecf6; color: #2f5677; }
.mv-pille--richtung-save { background: #fdf0dd; color: #8a5c14; }
.mv-pille--richtung-aktion { background: #ece7f4; color: #56407c; }
.mv-pille--zusage-ja { background: #e9f2d8; color: #45651c; }
.mv-pille--zusage-nein { background: #eceae5; color: #5b5f58; }
.mv-pille--zusage-offen { background: #fdf3cf; color: #7d6209; }

/* ── Verwaltbarkeit (Zug 13, Owner-Brocken 05.09.2026), Schritt 1 ────────── */
.mv-inventar__bauzeit {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px dashed var(--mv-line);
}

/* ── Verwaltbarkeit, Schritt 2: Kachel "Geprueft (DB) — live" ────────────── */
.mv-hinweis--fehler { color: #8f3320; }
.mv-kachel--dbaudit { grid-column: 1 / -1; }
.mv-kachel-db-container { grid-column: 1 / -1; }

/* ── Verwaltbarkeit, Schritt 3: Kette live gegen die Datenbank ───────────── */
.mv-pille--kette-ok { background: #e9f2d8; color: #45651c; }
.mv-pille--kette-warnung { background: #fdf3cf; color: #7d6209; }
.mv-pille--kette-fehlt { background: #fbe3de; color: #8f3320; }
.mv-pille--kette-nicht_pruefbar { background: #eceae5; color: #5b5f58; }
/* Owner-Ergaenzung 05.09.2026: eigene Farbe fuer ein Panel ohne Bindung und ohne
   relatedRpcContracts — kein technischer Fehler, aber ein offener Vertragspunkt. */
.mv-pille--kette-nicht_deklariert { background: #ece7f4; color: #56407c; }
.mv-kette-live-container,
.mv-kette-live {
  border-top: 1px solid var(--mv-line);
  padding-top: 10px;
  margin-top: 10px;
}

/* ── Verwaltbarkeit, Schritt 4: Begehungs-Ablage live ─────────────────────── */
.mv-begehung-live {
  border-top: 1px solid var(--mv-line);
  padding-top: 10px;
  margin-top: 10px;
}

/* ── Verwaltbarkeit, Schritt 5: globale Audit-Uebersicht (vier Kacheln) ──── */
.mv-audit-uebersicht {
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--mv-line);
  background: var(--mv-flaeche);
}
.mv-audit-uebersicht__reihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.mv-audit-uebersicht__kachel {
  border: 1px solid var(--mv-line);
  border-radius: 8px;
  background: var(--mv-flaeche);
  padding: 8px 10px;
}
.mv-audit-uebersicht__titel {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mv-gedimmt);
}
.mv-audit-uebersicht__wert { font-size: 14px; font-weight: 700; margin-top: 2px; }
.mv-audit-uebersicht__unter { font-size: 10.5px; color: var(--mv-gedimmt); margin-top: 3px; line-height: 1.4; }

/* ── Globale Navigation (Referenzformat Spalte 1) ────────────────────────
   Die Spalte selbst ist die Shell (admin-board__nav, workspaceNav.position
   "left" aus dem Vertrag) — hier nur mitgestylt, scharf auf diese Maske
   geschnitten (#maskenverwaltungAdmRoot), keine Aenderung fuer andere
   Masken mit derselben Shell-Klasse. */
#maskenverwaltungAdmRoot .admin-board__nav {
  width: 92px;
  flex: 0 0 92px;
  padding-top: 10px;
  gap: 2px;
}
#maskenverwaltungAdmRoot .admin-nav-btn {
  flex-direction: column;
  gap: 4px;
  font-size: 9.5px;
  line-height: 1.2;
  text-align: center;
  min-height: 56px;
  padding: 8px 4px;
}

/* ── Werkbank (Referenzformat Spalte 3) ───────────────────────────────── */
.mv-werkbank__kopf {
  padding: 12px 14px 0;
  border-bottom: 1px solid var(--mv-line);
}
.mv-werkbank__crumb {
  font-size: 10px;
  color: var(--mv-gedimmt);
  margin-bottom: 6px;
}
.mv-werkbank__titel {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 750;
  letter-spacing: -0.01em;
  color: var(--mv-ink);
}
.mv-werkbank__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.mv-werkbank__meta-karte {
  border: 1px solid var(--mv-line);
  border-radius: 6px;
  background: var(--mv-flaeche);
  padding: 7px 9px;
  min-width: 0;
}
.mv-werkbank__meta-k {
  font-size: 9px;
  font-weight: 650;
  color: var(--mv-gedimmt);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 5px;
}
.mv-werkbank__meta-v { font-size: 11px; font-weight: 650; word-break: break-word; }
.mv-werkbank__meta-sub { font-size: 9px; color: var(--mv-gedimmt); margin-top: 2px; }
.mv-werkbank__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-top: 2px;
}
.mv-werkbank__tab {
  font: inherit;
  font-size: 11px;
  padding: 9px 12px 8px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  color: var(--mv-gedimmt);
  cursor: pointer;
}
.mv-werkbank__tab:hover { color: var(--mv-ink); }
.mv-werkbank__tab.is-aktiv {
  border-bottom-color: var(--mv-akzent);
  color: var(--mv-ink);
  font-weight: 700;
}
.mv-werkbank__koerper { padding-top: 4px; }
.mv-werkbank__koerper--uebersicht > .mv-kette { margin-top: 10px; }

/* Reiter "Struktur": Werkzeugleiste + Baum/Vorschau nebeneinander (216px + Rest,
   wie im Referenzformat). Faellt unter 860px auf Stapel zurueck. */
.mv-werkbank__werkzeuge {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--mv-line);
}
.mv-knopf {
  height: 29px;
  border: 1px solid var(--mv-line);
  border-radius: 6px;
  background: var(--mv-flaeche);
  color: var(--mv-ink);
  padding: 0 11px;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.mv-knopf:hover { border-color: var(--mv-akzent); }
.mv-knopf--primary { background: var(--mv-akzent); border-color: var(--mv-akzent); color: var(--on-accent, #fff); font-weight: 600; }
.mv-knopf--deaktiviert,
.mv-knopf--deaktiviert:hover,
.mv-knopf[disabled] {
  cursor: not-allowed;
  border-color: var(--mv-line);
  background: var(--mv-flaeche-2);
  color: var(--mv-gedimmt);
}
/* Kein opacity:0.55 auf dem deaktivierten Primaerknopf ("Veröffentlichen"):
   #fff-Schrift (von .mv-knopf--primary) auf einer per opacity aufgehellten
   Flaeche fiel bei der Sichtpruefung 05.09.2026 in beiden Modi praktisch weg
   (weisser Text auf halbtransparentem Muted-Ton). Eigene, volldeckende, in
   beiden Modi kontrastreiche Kombination statt Transparenz. */
.mv-knopf--deaktiviert.mv-knopf--primary {
  background: var(--mv-flaeche-2);
  border-color: var(--mv-line);
  color: var(--mv-gedimmt);
}

.mv-werkbank__editor {
  display: grid;
  grid-template-columns: 216px 1fr;
  gap: 0;
  align-items: start;
}
.mv-werkbank__baum {
  border-right: 1px solid var(--mv-line);
  max-height: 60vh;
  overflow-y: auto;
}
.mv-werkbank__vorschau { min-width: 0; max-height: 60vh; overflow-y: auto; }
@media (max-width: 860px) {
  .mv-werkbank__editor { grid-template-columns: 1fr; }
  .mv-werkbank__baum { border-right: 0; border-bottom: 1px solid var(--mv-line); max-height: 40vh; }
}

/* ── Reiter "Felder" ──────────────────────────────────────────────────── */
.mv-felder { padding-bottom: 8px; }
.mv-felder .mv-tabelle__rahmen { margin: 8px 14px 12px; }
.mv-felder > .mv-baum__zahl { padding-left: 14px; }

/* ── Reiter "Vorschau": echte Route im iframe ─────────────────────────── */
.mv-route-vorschau { padding: 12px 14px 14px; }
.mv-route-vorschau__leiste { margin-bottom: 8px; }
.mv-route-vorschau__frame {
  width: 100%;
  height: 62vh;
  border: 1px solid var(--mv-line);
  border-radius: 8px;
  background: var(--mv-flaeche);
}

/* ── Fußzeile (Referenzformat): Bauzeit-Stand statt "Ungespeicherte
   Änderungen" — die Maske ist lesend (OE-04), es gibt nichts zu speichern. */
.mv-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 9px 16px;
  border-top: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-size: 11px;
}
.mv-footer__punkt { color: var(--accent-warm); }
.mv-footer strong { color: var(--text); font-weight: 650; }

/* Dunkelmodus (Owner-Befund 04.09.2026): die zwei Flaechen, die noch einen
   eigenen Hex-Wert statt eines Tokens tragen, weil sie in beiden Modi sichtbar
   von der Kartenflaeche abgesetzt bleiben muessen bzw. als Codeblock
   konventionell dunkel bleiben. Textfarben (.mv-knoten, .mv-baum__knoten--feld
   etc.) sind seit dem Zug 05.09.2026 direkt Aliase auf --text/--muted und
   brauchen deshalb hier keine Wiederholung mehr. */
html[data-fcp-theme="dark"] body[data-app-theme="fcp_tactical"] .mv-kachel--leer { background: var(--surface-2); }
html[data-fcp-theme="dark"] body[data-app-theme="fcp_tactical"] .mv-json { background: var(--surface-2); color: var(--text); }