/* ==================== Matrix-Modul (Phase 0) ==================== */
/* Status-Gruppen (kategorisch, Kürzel steht immer dabei – Farbe nie allein) */
:root {
    --mx-ausb: #eb6834;
    --mx-stat: #eda100;
    --mx-fa:   #1baf7a;
    --mx-oa:   #2a78d6;
    --mx-prim: #4a3aa7;
    --mx-hatch: rgba(17, 24, 39, .35);
    --mx-warn-soft: #fff2cc;
    --mx-crit-soft: #fbe3e3;
    --mx-good-soft: #e2f4e2;
}
#matrixView .mx-tabs { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--gray-200); margin-bottom: 1rem; flex-wrap: wrap; }
/* Nur die Tab-Schaltflächen (Attribut data-mx) – die Aktionen rechts behalten ihr btn-Aussehen.
   Nicht „> button“: die Tabs liegen seit 29.09.2026 in Gruppen-<span>s. */
#matrixView .mx-tabs button[data-mx] { background: none; border: 0; border-bottom: 2px solid transparent; padding: .55rem .9rem; color: var(--gray-600); cursor: pointer; font-size: .95rem; }
#matrixView .mx-tabs button[data-mx].active { color: var(--gray-900); border-bottom-color: var(--primary); font-weight: 600; }
/* Gruppen (Einteilung des Users): Abteilung | Person | Verwaltung. Die Gruppe bleibt beim Umbruch
   zusammen (nowrap), getrennt durch eine feine Linie vor jeder Gruppe außer der ersten bzw. der
   ersten in einer neuen Zeile (Klasse „zeilenanfang“ setzt mxTabGruppen()). Die Verwaltungsgruppe
   ist nicht farbig, sondern nur gedämpft – Farbe bedeutet in der Matrix Stufe bzw. Warnung. */
#matrixView .mx-tabs .mx-tabgrp { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; position: relative; }
/* Der Abstand (padding-left) steht immer, die Linie wird darin absolut gezeichnet. Sonst ändert das
   Ein-/Ausblenden der Linie die Breite der Leiste und damit den Umbruch – und der Umbruch entscheidet
   wieder, ob die Linie gezeigt wird (Rückkopplung, beim ersten Versuch beobachtet). */
#matrixView .mx-tabs .mx-tabgrp + .mx-tabgrp { padding-left: 22px; }
#matrixView .mx-tabs .mx-tabgrp + .mx-tabgrp::before { content: ''; position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 1px; height: 18px; background: var(--gray-300); }
#matrixView .mx-tabs .mx-tabgrp.zeilenanfang::before { display: none; }
#matrixView .mx-tabs .mx-tabgrp.verw button[data-mx] { color: var(--gray-500); }
/* Der aktive Tab bleibt auch in der Verwaltungsgruppe dunkel – Zustand muss die Gruppenfarbe
   schlagen. Eigene Regel, weil die gedämpfte Regel sonst spezifischer ist als die .active-Regel. */
#matrixView .mx-tabs .mx-tabgrp.verw button[data-mx].active { color: var(--gray-900); }
#matrixView .mx-tabs-actions { margin-left: auto; display: flex; gap: .4rem; padding-bottom: .3rem; white-space: nowrap; }
#matrixView .mx-toolbar { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: center; margin-bottom: .75rem; }
#matrixView .mx-toolbar .spacer { flex: 1; }
#matrixView .mx-ctl { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--gray-300); background: #fff; border-radius: 6px; padding: .3rem .55rem; font-size: .85rem; white-space: nowrap; }
#matrixView .mx-ctl label { color: var(--gray-600); }
#matrixView .mx-ctl label.cb { display: inline-flex; align-items: center; gap: .4rem; margin: 0; color: inherit; cursor: pointer; }
/* Feste Breiten: sonst bestimmt jeder Browser die Eigenbreite von <select> selbst und die
   Leiste bricht in Safari früher um als in Chrome. */
#matrixView #mxRange, #matrixView #mxAbRange { width: 6.5rem; }
#matrixView .mx-vonm { width: 6.5rem; }
#matrixView .mx-vonj { width: 4.2rem; }
#matrixView #mxKreis, #matrixView #mxKmKreis { width: 13rem; }
#matrixView .mx-ctl select, #matrixView .mx-ctl input { border: 0; outline: 0; font: inherit; color: inherit; background: transparent; }
#matrixView .mx-seg { display: inline-flex; border: 1px solid var(--gray-300); border-radius: 6px; overflow: hidden; }
#matrixView .mx-seg button { border: 0; background: #fff; padding: .3rem .6rem; cursor: pointer; font-size: .85rem; color: var(--gray-600); }
#matrixView .mx-seg button + button { border-left: 1px solid var(--gray-200); }
#matrixView .mx-seg button.active { background: #dbeafe; color: var(--gray-900); font-weight: 600; }
#matrixView .mx-hint { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .6rem; border-radius: 6px; background: var(--mx-warn-soft); border: 1px solid var(--warning-color); font-size: .8rem; }
#matrixView .mx-hint[hidden] { display: none; }

/* Tooltip (ℹ) */
.mx-tip { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--gray-300); color: var(--gray-600); font-size: 10px; font-weight: 700; cursor: help; margin-left: 3px; background: #fff; flex: none; }
.mx-tip:hover, .mx-tip:focus { border-color: var(--primary); color: var(--primary); outline: none; }
.mx-tip::after { content: attr(data-tip); position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: 270px; background: var(--gray-900); color: #fff; padding: 8px 10px; border-radius: 6px; font-size: 12px; font-weight: 400; line-height: 1.4; white-space: normal; text-align: left; z-index: 60; opacity: 0; pointer-events: none; box-shadow: var(--shadow-lg); }
.mx-tip::before { content: ""; position: absolute; top: calc(100% + 3px); left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-bottom-color: var(--gray-900); opacity: 0; z-index: 61; }
.mx-tip:hover::after, .mx-tip:focus::after, .mx-tip:hover::before, .mx-tip:focus::before { opacity: 1; }
.mx-tip.left::after { left: auto; right: -8px; transform: none; }

/* Matrix-Tabelle */
/* Fenster in die Tabelle: nur dieser Kasten scrollt (Höhe = Rest des Fensters, von mxFitScroll()
   gesetzt), damit der sticky Monatskopf und die Namensspalte stehen bleiben und Werkzeugleiste,
   Tabs und der Kopf der Anwendung nicht mitscrollen. max-height, damit kurze Tabellen kurz bleiben.
   overscroll-behavior verhindert, dass das Scrollen am Tabellenende auf die Seite überspringt. */
#matrixView .mx-scroll { overflow: auto; max-height: var(--mx-vh, 70vh); overscroll-behavior: contain; background: #fff; border: 1px solid var(--gray-200); border-radius: var(--border-radius); box-shadow: var(--shadow); }
table.mx { border-collapse: separate; border-spacing: 0; font-size: .8rem; min-width: 100%; }
table.mx th, table.mx td { border-bottom: 1px solid var(--gray-200); padding: 0; vertical-align: middle; white-space: nowrap; }
table.mx thead th { position: sticky; top: 0; background: var(--gray-100); z-index: 2; font-weight: 600; color: var(--gray-600); font-size: .72rem; text-align: center; padding: .5rem .25rem; border-right: 1px solid var(--gray-200); }
table.mx thead th.q { border-right: 1px solid var(--gray-300); }
table.mx th.person, table.mx td.person { position: sticky; left: 0; background: #fff; z-index: 3; text-align: left; padding: .4rem .75rem; border-right: 1px solid var(--gray-300); min-width: 230px; }
table.mx thead th.person { z-index: 4; background: var(--gray-100); }
table.mx td.person .nm { font-weight: 600; color: var(--gray-900); }
table.mx td.person .sub { color: var(--gray-600); font-size: .72rem; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
table.mx tbody tr:hover td { background: #f8fbff; }
table.mx td.cell { padding: 3px 2px; text-align: center; border-right: 1px solid var(--gray-200); min-width: 54px; }
table.mx td.cell.today, table.mx thead th.today { box-shadow: inset 2px 0 0 var(--primary); }
table.mx thead th.today { color: var(--primary); }
.mx-chip { display: block; border-radius: 4px; padding: 3px 4px; font-weight: 600; font-size: .78rem; color: var(--gray-900); border-left: 3px solid var(--c, var(--gray-400)); background: color-mix(in oklab, var(--c, var(--gray-400)) 18%, #fff); position: relative; overflow: hidden; }
.mx-chip .fte { display: block; font-weight: 400; font-size: .66rem; color: var(--gray-600); }
.mx-chip.plan { border: 1px dashed var(--c, var(--gray-400)); border-left-width: 3px; background: color-mix(in oklab, var(--c, var(--gray-400)) 8%, #fff); }
.mx-chip.abw { background: repeating-linear-gradient(135deg, transparent 0 5px, var(--mx-hatch) 5px 6px), color-mix(in oklab, var(--gray-400) 12%, #fff); border-left-color: var(--gray-400); color: var(--gray-700); font-weight: 500; }
.mx-chip.empty { background: transparent; border-left-color: transparent; color: var(--gray-400); font-weight: 400; }
.mx-chip.exit { border-left-color: var(--gray-600); background: var(--gray-100); color: var(--gray-900); font-weight: 600; }
.mx-chip.exit.plan { border: 1px dashed var(--gray-600); border-left-width: 3px; background: transparent; }
.mx-stchip { display: inline-block; padding: 1px 7px; border-radius: 4px; font-weight: 600; font-size: .72rem; border-left: 3px solid var(--c, var(--gray-400)); background: color-mix(in oklab, var(--c, var(--gray-400)) 18%, #fff); }
.mx-exitwarn { margin-top: 3px; display: inline-block; font-size: .7rem; font-weight: 600; padding: 1px 6px; border-radius: 4px; background: var(--mx-warn-soft); border: 1px solid var(--warning-color); color: var(--gray-900); }
table.mx tr.agg td { background: var(--gray-100); font-weight: 600; color: var(--gray-600); }
table.mx tr.agg td.person { background: var(--gray-100); font-size: .78rem; }
table.mx tr.agg td.cell { font-family: ui-monospace, Menlo, monospace; font-size: .78rem; color: var(--gray-900); }
table.mx tr.agg td.cell.low { background: var(--mx-warn-soft); }
table.mx tr.rot td.person { background: #fbfbfd; }
table.mx tr.rot td.person .nm { font-weight: 500; }
table.mx tr.agg.first td { border-top: 2px solid var(--gray-300); }
#matrixView .mx-legend { display: flex; gap: .9rem; flex-wrap: wrap; padding: .6rem .9rem; font-size: .75rem; color: var(--gray-600); }
#matrixView .mx-legend .it { display: inline-flex; align-items: center; gap: .35rem; }
#matrixView .mx-legend .sw { width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--gray-300); display: inline-block; }

/* Kompetenz-Zellen (ordinal, eine Farbe) */
.mx-k { display: inline-grid; place-items: center; width: 32px; height: 24px; border-radius: 5px; font-family: ui-monospace, Menlo, monospace; font-weight: 600; font-size: .8rem; position: relative; }
.mx-k.k0 { background: transparent; border: 1px dashed var(--gray-300); color: var(--gray-400); font-weight: 400; }
/* Stufen: gelb = nur unter Aufsicht (1 pastell, 2 kräftig), blau = selbständig (3, 4 dunkel) */
.mx-k.k1 { background: #fef3c7; border: 1px solid #fcd34d; color: #1f2937; } .mx-k.k2 { background: #fbbf24; color: #1f2937; } .mx-k.k3 { background: #2a78d6; color: #fff; } .mx-k.k4 { background: #184f95; color: #fff; }
.mx-k.exp { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--warning-color); }
.mx-k.exp::after { content: "!"; position: absolute; right: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--warning-color); color: #1e1a00; font-size: 10px; font-weight: 700; display: grid; place-items: center; font-family: inherit; }
.mx-k.plan { outline: 1.5px dashed var(--gray-600); outline-offset: 1px; }
.mx-k.plan::before { content: "◌"; position: absolute; left: -9px; top: -8px; font-size: 10px; color: var(--gray-600); }
.mx-k.sm { width: 28px; height: 22px; font-size: .75rem; }   /* kleine Variante (früher .sub – kollidierte mit td.person .sub) */
table.mx th.bereich { cursor: pointer; user-select: none; }
table.mx th.bereich:hover { color: var(--gray-900); }
table.mx th.bereich .tw { display: inline-block; font-size: 9px; margin-left: 3px; color: var(--gray-400); }
table.mx th.teil { background: #eef4fb; font-weight: 500; font-size: .68rem; color: var(--gray-600); }
table.mx td.teil { background: #f6f9fd; }
table.mx td.txt { padding: 6px 10px; color: var(--gray-600); font-size: .78rem; }
table.mx td.num { padding: 6px 10px; text-align: right; font-family: ui-monospace, Menlo, monospace; font-size: .78rem; }
table.mx td.stat { padding: 6px 8px; }
table.mx tbody tr.clickable { cursor: pointer; }
.mx-datum.old { background: var(--mx-warn-soft); padding: 1px 5px; border-radius: 4px; color: var(--gray-900); }
table.mx-komp { width: 100%; border-collapse: collapse; font-size: .82rem; }
table.mx-komp th { text-align: left; font-size: .7rem; text-transform: uppercase; color: var(--gray-600); padding: .3rem .4rem; border-bottom: 1px solid var(--gray-200); }
table.mx-komp td { padding: .3rem .4rem; border-bottom: 1px solid var(--gray-100); vertical-align: middle; }
table.mx-komp tr.bereich td { background: var(--gray-50); }
table.mx-komp td.kname { white-space: nowrap; }
.mx-bewform { margin: .6rem 0; padding: .7rem .9rem; border: 1px solid var(--primary); border-radius: 8px; background: #f8fbff; display: grid; gap: .5rem; font-size: .85rem; }
.mx-bewform .t { font-size: .9rem; }
.mx-bewform .g, .mx-bewform .f { display: grid; gap: .2rem; }
.mx-bewform .g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.mx-bewform label { font-size: .7rem; text-transform: uppercase; letter-spacing: .03em; color: var(--gray-600); font-weight: 600; }
.mx-bewform input, .mx-bewform select { padding: .3rem .4rem; border: 1px solid var(--gray-300); border-radius: 4px; font: inherit; }
.stufe-pick { display: flex; gap: 6px; }
.stufe-pick button { width: 38px; height: 32px; border-radius: 6px; border: 1px solid var(--gray-300); background: #fff; cursor: pointer; font-family: ui-monospace, Menlo, monospace; font-weight: 600; }
.stufe-pick button.on { background: #2a78d6; color: #fff; border-color: #2a78d6; }
table#mxKatTable tr.inaktiv td { opacity: .55; }
table#mxKatTable td.c { text-align: center; }

/* Hauptdienst */
.mx-hd { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-weight: 600; font-size: .7rem; color: #fff; background: var(--c, var(--gray-400)); white-space: nowrap; }
.mx-hd.ovr::after { content: "✎"; font-size: .65rem; }
.mx-kos { display: inline-flex; gap: 3px; flex-wrap: wrap; }
.mx-ko { width: 12px; height: 12px; border-radius: 3px; display: inline-block; border: 1px solid var(--gray-300); background: #fff; }
.mx-ko.ok { background: #0ca30c; border-color: transparent; } .mx-ko.no { background: var(--danger-color); border-color: transparent; } .mx-ko.na { border-style: dashed; }
.mx-two { display: grid; grid-template-columns: 1.15fr .85fr; gap: 1rem; align-items: start; }
@media (max-width: 1100px) { .mx-two { grid-template-columns: 1fr; } }
table.mx-list tr.sel td { background: #dbeafe; }
.mx-card { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--border-radius); box-shadow: var(--shadow); padding: 1rem; }
.mx-card-head { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.mx-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--gray-100); display: grid; place-items: center; font-weight: 600; color: var(--gray-600); }
.mx-sklop { border: 1px solid var(--gray-200); border-radius: 8px; margin-bottom: .5rem; overflow: hidden; }
.mx-sklop .sh { display: flex; align-items: center; gap: .6rem; padding: .45rem .75rem; background: var(--gray-100); font-weight: 600; font-size: .82rem; }
.mx-sklop .sh .st { margin-left: auto; }
.mx-sklop .row { display: grid; grid-template-columns: 1fr auto auto; gap: .6rem; align-items: center; padding: .35rem .75rem; border-top: 1px solid var(--gray-100); font-size: .8rem; }
.mx-sklop .row .ko-tag { font-size: .62rem; font-weight: 700; letter-spacing: .05em; color: var(--danger-color); border: 1px solid currentColor; border-radius: 3px; padding: 0 4px; }
.mx-sklop .row .ko-tag.off { visibility: hidden; }
.stp { display: inline-grid; grid-template-columns: repeat(4, 12px); gap: 2px; }
.stp i { height: 12px; border-radius: 2px; background: var(--gray-200); }
.stp i.f { background: #2a78d6; } .stp i.need { outline: 1px dashed var(--danger-color); outline-offset: -1px; } .stp i.f.exp { background: var(--warning-color); }
.mx-result { display: flex; align-items: center; gap: 1rem; padding: .75rem; border: 1px solid var(--gray-200); border-radius: 8px; background: var(--gray-50); margin-top: .6rem; flex-wrap: wrap; }
.mx-result .big { font-size: 1.4rem; font-weight: 700; }
.mx-result .why { color: var(--gray-600); font-size: .8rem; max-width: 52ch; }
.mx-ovr { margin-top: .6rem; padding: .5rem .75rem; border-radius: 6px; background: var(--mx-warn-soft); border: 1px solid var(--warning-color); font-size: .82rem; }
.mx-ovrform { margin-top: .6rem; padding: .6rem .75rem; border: 1px dashed var(--gray-300); border-radius: 8px; font-size: .82rem; display: grid; gap: .5rem; }
.mx-ovrform .r { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.mx-ovrform select, .mx-ovrform input { font: inherit; border: 1px solid var(--gray-300); border-radius: 6px; padding: .25rem .45rem; }

/* Abdeckung: Heatmap, Kacheln, Gantt, Ausfall */
table.mx td.hm { text-align: center; font-family: ui-monospace, Menlo, monospace; font-weight: 600; font-size: .85rem; padding: 7px 4px; min-width: 46px; border-right: 1px solid var(--gray-200); cursor: pointer; }
table.mx td.hm.ok, table.mx tr.agg td.cell.ok { background: var(--mx-good-soft); } table.mx td.hm.low { background: var(--mx-warn-soft); } table.mx td.hm.crit, table.mx tr.agg td.cell.crit { background: var(--mx-crit-soft); color: var(--danger-color); }
table.mx td.hm.today { box-shadow: inset 2px 0 0 var(--primary); }
table.mx td.hm.nodata, table.mx tr.agg td.cell.nodata { background: var(--gray-100); color: var(--gray-400); font-weight: 400; }
#matrixView .mx-scroll[hidden], .mx-tiles[hidden] { display: none !important; }
table.mx tr.sel td { outline: 2px solid var(--primary); outline-offset: -2px; }
table.mx tr.sel td.person { background: #dbeafe; }
table.mx td.rowlab { padding: 6px 12px; font-weight: 600; font-size: .82rem; min-width: 200px; cursor: pointer; }
table.mx td.rowlab .sub { font-weight: 400; color: var(--gray-600); font-size: .68rem; white-space: normal; max-width: 260px; }
table.mx td.soll { text-align: center; font-family: ui-monospace, Menlo, monospace; color: var(--gray-600); font-size: .8rem; padding: 0 6px; border-right: 1px solid var(--gray-300); }
table.mx td.soll input { width: 3.2rem; text-align: center; border: 1px solid var(--gray-300); border-radius: 4px; padding: 2px; font: inherit; }
table.mx tr.grp td { background: var(--gray-100); font-size: .68rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--gray-600); padding: 4px 12px; }
.mx-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .6rem; padding: .8rem; background: #fff; border: 1px solid var(--gray-200); border-radius: var(--border-radius); }
.mx-tile { border: 1px solid var(--gray-200); border-radius: 8px; padding: .6rem .75rem .5rem; cursor: pointer; }
.mx-tile:hover, .mx-tile.sel { border-color: var(--primary); }
.mx-tile .t { display: flex; justify-content: space-between; align-items: baseline; font-size: .8rem; font-weight: 600; margin-bottom: 4px; }
.mx-tile .t .now { font-family: ui-monospace, Menlo, monospace; white-space: nowrap; margin-left: .5rem; } .mx-tile .t .now.crit { color: var(--danger-color); } .mx-tile .t .now.low { color: #b45309; }
.mx-tile svg { width: 100%; height: 56px; display: block; }
.mx-tile .x { display: flex; justify-content: space-between; font-size: .62rem; color: var(--gray-400); font-family: ui-monospace, Menlo, monospace; margin-top: 2px; }
.mx-panel { margin-top: 1rem; background: #fff; border: 1px solid var(--gray-200); border-radius: var(--border-radius); box-shadow: var(--shadow); }
.mx-panel-head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .6rem 1rem; border-bottom: 1px solid var(--gray-200); }
.mx-panel-head h3 { margin: 0; font-size: 1rem; }
.mx-panel .mx-scroll { border: 0; box-shadow: none; border-radius: 0; }
table.mx td.g { padding: 4px 1px; border-right: 1px solid var(--gray-200); min-width: 40px; }
table.mx td.g i { display: block; height: 16px; border-radius: 2px; }
table.mx td.g.on i { background: #2a78d6; } table.mx td.g.plan i { background: #e3ecf9; border: 1.5px dashed #2a78d6; }
table.mx td.g.abw i { background: repeating-linear-gradient(135deg, transparent 0 4px, var(--mx-hatch) 4px 5px), #f3f4f6; } table.mx td.g.off i { background: transparent; }
table.mx td.g.today { box-shadow: inset 2px 0 0 var(--primary); }
.mx-af { padding: .75rem 1rem; display: grid; gap: .6rem; }
.mx-af .sum { display: flex; gap: 1.2rem; flex-wrap: wrap; align-items: center; padding: .6rem .75rem; border: 1px solid var(--gray-200); border-radius: 8px; background: var(--gray-50); font-size: .85rem; }
.mx-af .sum b { font-size: 1.15rem; margin-right: 3px; } .mx-af .sum .bad b { color: var(--danger-color); }
.mx-af table { border-collapse: collapse; width: 100%; font-size: .82rem; }
.mx-af th { text-align: left; font-size: .68rem; text-transform: uppercase; color: var(--gray-600); padding: .35rem .5rem; border-bottom: 1px solid var(--gray-200); white-space: nowrap; }
.mx-af td { padding: .4rem .5rem; border-bottom: 1px solid var(--gray-100); vertical-align: middle; white-space: nowrap; }
.mx-af td.lab { font-weight: 600; } .mx-af td.delta { font-family: ui-monospace, Menlo, monospace; font-weight: 600; } .mx-af td.delta .arr { color: var(--gray-400); margin: 0 4px; font-weight: 400; }
.mx-af td.delta .to.crit { color: var(--danger-color); } .mx-af td.delta .to.low { color: #b45309; }
.mx-af .strip { display: inline-grid; grid-auto-flow: column; gap: 1px; }
.mx-af .strip i { width: 12px; height: 12px; border-radius: 2px; background: var(--gray-100); border: 1px solid var(--gray-200); }
.mx-af .strip i.ok { background: var(--mx-good-soft); } .mx-af .strip i.low { background: var(--mx-warn-soft); } .mx-af .strip i.crit { background: var(--mx-crit-soft); border-color: var(--danger-color); } .mx-af .strip i.pre { opacity: .35; }
.mx-af td.note-td { color: var(--gray-600); font-size: .78rem; white-space: normal; min-width: 180px; } .mx-af .bad { color: var(--danger-color); font-weight: 600; }
.mx-seg button.std { font-weight: 600; } .mx-seg button .badge { display: inline-block; margin-left: 5px; padding: 0 5px; border-radius: 999px; font-size: .58rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; background: #dbeafe; color: var(--primary); vertical-align: 1px; }

/* Personen-Modal: Tabs, Kompetenz-Karten, Historie */
.mx-modal { width: min(96vw, 1400px) !important; max-width: none !important; }
.mx-mtabs { display: flex; gap: 2px; border-bottom: 1px solid var(--gray-200); margin: -.25rem 0 .9rem; }
.mx-mtabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: .5rem .9rem; color: var(--gray-600); cursor: pointer; font-size: .9rem; }
.mx-mtabs button.active { color: var(--gray-900); border-bottom-color: var(--primary); font-weight: 600; }
.mx-kcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: .7rem; }
.mx-kcard { border: 1px solid var(--gray-200); border-radius: 8px; overflow: hidden; background: #fff; }
.mx-kcard .kc-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .45rem .7rem; background: var(--gray-100); font-weight: 600; font-size: .85rem; }
.kc-row { display: grid; grid-template-columns: minmax(150px, 1.1fr) auto minmax(180px, 1.4fr) auto; gap: .5rem; align-items: center; padding: .3rem .7rem; border-top: 1px solid var(--gray-100); font-size: .8rem; }
.kc-row .kc-name { color: var(--gray-900); }
.kc-row .kc-meta { color: var(--gray-600); font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kc-row .kc-ziel { color: var(--gray-700); font-weight: 600; }
.kc-row .kc-add { width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--gray-300); background: #fff; cursor: pointer; font-weight: 700; color: var(--primary); line-height: 1; }
.kc-row .kc-add:hover { border-color: var(--primary); background: #eff6ff; }
table.mx-hist { width: 100%; border-collapse: collapse; font-size: .8rem; }
table.mx-hist th { text-align: left; font-size: .68rem; text-transform: uppercase; color: var(--gray-600); padding: .3rem .4rem; border-bottom: 1px solid var(--gray-200); white-space: nowrap; }
table.mx-hist td { padding: .3rem .4rem; border-bottom: 1px solid var(--gray-100); white-space: nowrap; vertical-align: middle; }
table.mx-hist td.bem { max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
/* HD-Karte: Sklope zweispaltig */
.mx-card .mx-sklops { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: .5rem; }

/* Mitarbeiter-Liste */
/* border-collapse: separate (nicht collapse!) – bei zusammengefassten Rändern ignorieren die
   Browser position: sticky an th/thead, der Kopf würde also mitscrollen. Genau daran liegt es,
   dass es bei table.mx (separate) funktioniert. Ränder zeichnet jede Zelle selbst (border-bottom). */
table.mx-list { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; font-size: .85rem; border: 1px solid var(--gray-200); border-radius: var(--border-radius); }
/* Kopf der Listen (Mitarbeiter, Hauptdienst) bleibt am oberen Rand SEINES Scrollkastens stehen –
   wie table.mx. Nicht am Kopfband der Seite ausrichten: die Liste liegt in .mx-scroll. */
table.mx-list thead th { position: sticky; top: 0; z-index: 2; box-shadow: inset 0 -1px 0 var(--gray-200); }
table.mx-list th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--gray-600); background: var(--gray-100); padding: .5rem .75rem; border-bottom: 1px solid var(--gray-200); }
table.mx-list td { padding: .5rem .75rem; border-bottom: 1px solid var(--gray-200); vertical-align: middle; }
table.mx-list tr.clickable { cursor: pointer; }
table.mx-list tr.clickable:hover td { background: #f8fbff; }
table.mx-list tr.inaktiv td { color: var(--gray-400); }
.mx-tag { display: inline-block; font-size: .68rem; font-weight: 600; padding: 1px 6px; border-radius: 4px; background: var(--gray-100); border: 1px solid var(--gray-300); color: var(--gray-600); }
.mx-tag.err { background: var(--mx-warn-soft); border-color: var(--warning-color); color: var(--gray-900); }
.mx-tag.ok { background: var(--mx-good-soft); border-color: #86efac; color: #14532d; }

/* Detail-Modal: Perioden */
.mx-per { margin-top: 1rem; }
.mx-per h4 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .4rem; }
.mx-per table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.mx-per th { text-align: left; font-size: .7rem; text-transform: uppercase; color: var(--gray-600); padding: .3rem .4rem; border-bottom: 1px solid var(--gray-200); }
.mx-per td { padding: .3rem .4rem; border-bottom: 1px solid var(--gray-100); }
.mx-per td input, .mx-per td select { width: 100%; padding: .25rem .35rem; border: 1px solid var(--gray-300); border-radius: 4px; font: inherit; }
.mx-per tr.add td { background: var(--gray-50); }
.mx-per .btn-x { border: 0; background: none; color: var(--danger-color); cursor: pointer; font-size: 1rem; }
.mx-per .btn-e { border: 0; background: none; color: var(--primary); cursor: pointer; font-size: 1rem; }
.mx-stamm { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .6rem .9rem; }
.mx-stamm .form-group { margin: 0; }
.mx-stamm .form-group.wide { grid-column: 1 / -1; }
.mx-note { font-size: .78rem; color: var(--gray-600); }
.mx-note b { color: var(--gray-900); }

/* Berechtigungen */
table.mx-perm { width: 100%; border-collapse: collapse; background: #fff; font-size: .85rem; border: 1px solid var(--gray-200); }
table.mx-perm th { text-align: left; font-size: .72rem; text-transform: uppercase; color: var(--gray-600); background: var(--gray-100); padding: .5rem .75rem; border-bottom: 1px solid var(--gray-200); }
table.mx-perm td { padding: .45rem .75rem; border-bottom: 1px solid var(--gray-200); }
table.mx-perm td.c { text-align: center; }
.mx-empty { padding: 1.5rem; color: var(--gray-600); background: #fff; border: 1px dashed var(--gray-300); border-radius: var(--border-radius); text-align: center; }

@media print {
    .main-nav, .app-header, #matrixView .mx-tabs, #matrixView .mx-toolbar, #matrixView .mx-legend { display: none !important; }
    #matrixView .mx-scroll { overflow: visible; max-height: none !important; border: 0; box-shadow: none; }
    table.mx { font-size: 9px; }
}

/* Abdeckung: aufklappbare Teilkompetenzen + Engpass-Marker */
.mx-exp { display: inline-block; width: 16px; margin-left: -4px; margin-right: 4px; border: 0; background: none; color: var(--gray-600); font-size: .8rem; cursor: pointer; padding: 0; text-align: center; }
.mx-exp.tree { color: var(--gray-400); cursor: default; }
table.mx tr.teil td.rowlab { font-weight: 500; font-size: .78rem; padding-left: 26px; background: #fafbfc; }
table.mx tr.teil td.hm { font-size: .78rem; }
table.mx tr.open td.rowlab { border-bottom-style: dashed; }
table.mx td.hm { position: relative; }
table.mx td.hm .ep { position: absolute; right: 2px; top: 1px; font-style: normal; font-size: .58rem; line-height: 1; font-weight: 700; padding: 1px 3px; border-radius: 3px; color: #fff; background: #b45309; }
table.mx td.hm .ep.crit { background: var(--danger-color, #dc2626); }
.mx-tile.teil { background: #fafbfc; }
.mx-tile .ep { font-size: .68rem; color: var(--gray-600); margin-top: 4px; }
.mx-tile .ep b.crit { color: var(--danger-color, #dc2626); } .mx-tile .ep b.low { color: #b45309; } .mx-tile .ep.ok { color: var(--gray-400); }

/* Logbook (Phase 3) */
.kc-lb { display: block; font-size: .68rem; color: var(--gray-600); margin-top: 1px; }
.kc-lb.up { color: #1d4ed8; } .kc-lb.warn { color: #b45309; }
.kc-lb a { color: #1d4ed8; font-weight: 600; text-decoration: underline; }
.mx-lbnote { font-size: .78rem; background: #eef4fb; border: 1px solid #c7d7ee; border-radius: 6px; padding: .35rem .6rem; margin: .4rem 0 .6rem; }
.mx-lbsum { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: baseline; font-size: .82rem; margin-bottom: .6rem; }
table.mx-lbt td.n { text-align: right; font-family: ui-monospace, Menlo, monospace; }
table.mx-lbt tr.grp td { background: var(--gray-100); font-size: .68rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--gray-600); }
table.mx-lbt tr.up td { background: #eef4fb; } table.mx-lbt tr.stale td { background: #fff7ed; }
.mx-tag.warn { background: #fde68a; color: #7c2d12; }
tr.proz td { background: #fafbfc; font-size: .75rem; padding: 3px 8px 5px 24px !important; }
.mx-proz { display: inline-flex; align-items: center; gap: .3rem; border: 1px solid var(--gray-200); background: #fff; border-radius: 4px; padding: 1px 4px 1px 6px; margin: 1px 4px 1px 0; }
.mx-proz.off { opacity: .5; } .mx-proz i { color: var(--gray-600); font-size: .68rem; }
.mx-proz .btn-x { font-size: .7rem; padding: 0 2px; }
.mx-proz-add { display: inline-flex; gap: .25rem; align-items: center; margin-left: .5rem; }
.mx-proz-add input, .mx-proz-add select { font-size: .72rem; padding: 1px 4px; }
table.mx-lbt td, table.mx-lbt th { padding: 3px 8px; white-space: nowrap; }
table.mx-lbt td:first-child { white-space: normal; min-width: 180px; }
.mx-hdinfo { font-size: .8rem; line-height: 1.7; background: #f8fafc; border: 1px solid var(--gray-200); border-radius: 6px; padding: .5rem .8rem; }
.mx-hdinfo .mx-hd { margin: 0 2px 0 6px; }
.mx-abtbox { display: inline-flex; align-items: center; gap: .4rem; margin-left: auto; font-size: .8rem; color: var(--gray-600); }
.mx-abtbox .mx-abt { font-weight: 600; color: var(--gray-800); }
select.mx-abt { font-size: .82rem; padding: 3px 6px; }
#matrixView .view-header { display: flex; align-items: center; gap: 1rem; }
.mx-leer { margin: .6rem 0; padding: .6rem .9rem; background: #fffbeb; border: 1px solid #fde68a; border-radius: 6px; font-size: .82rem; }
/* Abdeckung – Zeitleiste */
#mxAbZl[hidden] { display: none !important; }
table.mx-zl tr.zl-head td { background: #f8fafc; font-weight: 600; cursor: pointer; }
table.mx-zl tr.zl-head.sel td.rowlab { box-shadow: inset 3px 0 0 var(--primary); }
table.mx-zl tr.zl-p td.person { padding: 3px 12px 3px 24px; font-size: .78rem; font-weight: 400; white-space: nowrap; }
table.mx-zl tr.zl-p { cursor: pointer; } table.mx-zl tr.zl-p:hover td { background: #f1f5f9; }
table.mx-zl td.g i { position: relative; height: 14px; }
table.mx-zl td.g i b { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: .62rem; color: #fff; line-height: 1; }
table.mx-zl td.g.plan i b, table.mx-zl td.g.abw i b { color: #1e40af; }
table.mx-zl tr.zl-p td.person .nm { display: inline; margin-right: 6px; }
table.mx-zl tr.zl-p td.person .mx-k, table.mx-zl tr.zl-p td.person .mx-hd { vertical-align: middle; }

/* Stufen-Chips in der Personenspalte: Textfarbe nicht von td.person .sub (grau) überschreiben lassen */
table.mx td.person .mx-k.k1, table.mx td.person .mx-k.k2 { color: #1f2937; }
table.mx td.person .mx-k.k3, table.mx td.person .mx-k.k4 { color: #fff; }
table.mx td.person .mx-k.k0 { color: var(--gray-400); }
table#mxHrTable tr.inaktiv td { opacity: .55; }
td.mv { white-space: nowrap; }
.btn-mv { border: 1px solid var(--gray-300); background: #fff; border-radius: 4px; font-size: .6rem; line-height: 1; padding: 3px 5px; cursor: pointer; color: var(--gray-600); margin-right: 2px; }
.btn-mv:hover { background: var(--gray-100); color: var(--gray-900); }
/* Balken nach Stufe: Stufe 2 (unter Aufsicht) gelb, ab 3 blau */
table.mx td.g.on.s2 i { background: #fbbf24; } table.mx td.g.plan.s2 i { background: #fef3c7; border-color: #d97706; }
table.mx-zl td.g.on.s2 i b { color: #1f2937; } table.mx-zl td.g.plan.s2 i b { color: #92400e; }
/* Herkunfts-Hervorhebung im Personen-Modal (Klick aus Kompetenzmatrix / Abdeckung) */
.mx-kcard.hl { outline: 2px solid var(--primary); outline-offset: 1px; box-shadow: 0 0 0 6px rgba(37, 99, 235, .12); transition: box-shadow .6s, outline-color .6s; }
.mx-kcard.hl .kc-head { background: #dbeafe; }
.mx-kcard.hl .kc-head > span:first-child::after { content: " aus Matrix ▸"; font-size: .68rem; font-weight: 500; color: var(--primary); margin-left: .4rem; }
.mx-kcard.hl.hl-soft { box-shadow: none; outline-color: #93c5fd; } .mx-kcard.hl.hl-soft .kc-head { background: var(--gray-100); } .mx-kcard.hl.hl-soft .kc-head > span:first-child::after { content: ""; }
.kc-row.hl { background: #eff6ff; box-shadow: inset 3px 0 0 var(--primary); transition: background .6s; }
.kc-row.hl.hl-soft { background: #f8fafc; }
table.mx tr.clickable { cursor: pointer; } table.mx tr.clickable:hover td { background: #f1f5f9; }
/* Kacheln: Gruppen (Bereich + Teile), Titel auf 2 Zeilen, Engpass-Badge, Träger-Fußzeile */
.mx-tgroup { grid-column: 1 / -1; border: 1px solid #c7d7ee; border-radius: 10px; padding: .5rem; background: #f8fafc; display: grid; grid-template-columns: minmax(230px, 1fr) 3fr; gap: .6rem; align-items: start; }
.mx-tgroup > .mx-tile { background: #fff; }
.mx-tsub { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .5rem; }
.mx-tsub .mx-tile.teil { background: #fff; padding: .45rem .6rem .4rem; } .mx-tsub .mx-tile.teil .t { font-size: .74rem; } .mx-tsub .mx-tile.teil svg { height: 40px; }
.mx-tile .t .ttl { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.25; min-height: 2.5em; }
.mx-tile .t { align-items: flex-start; }
.mx-tile .ep-badge { display: inline-block; font-style: normal; font-size: .6rem; font-weight: 700; padding: 1px 5px; border-radius: 3px; color: #fff; background: #b45309; margin-right: 6px; vertical-align: middle; font-family: inherit; }
.mx-tile .ep-badge.crit { background: var(--danger-color, #dc2626); }
.mx-tile .tr { font-size: .68rem; color: var(--gray-700); margin-top: 3px; font-family: ui-monospace, Menlo, monospace; }
@media (max-width: 900px) { .mx-tgroup { grid-template-columns: 1fr; } }
.kc-i { color: var(--primary); font-size: .72rem; cursor: help; opacity: .8; }
.kc-i:hover { opacity: 1; }
/* Personenspalte: Status-Chip und Stufen-Chip gleich hoch und mittig ausgerichtet */
table.mx td.person .sub { align-items: center; gap: 6px; }
table.mx td.person .sub .mx-stchip, table.mx td.person .sub .mx-hd { height: 22px; display: inline-flex; align-items: center; box-sizing: border-box; }
table.mx td.person .sub .mx-k.sm { height: 22px; }

/* Hauptdienst-Karte: Komponentenzeile führt zu den Kompetenzen der Person (Bewerten in zwei Klicks) */
.mx-sklop .row.link { cursor: pointer; }
.mx-sklop .row.link:hover { background: #f1f6fd; }
/* vierte Spalte für die Bewerten-Schaltfläche (sonst bricht sie in eine eigene Zeile um) */
.mx-sklop .row:has(.kc-add) { grid-template-columns: 1fr auto auto auto; }
.mx-sklop .row .kc-add { width: 20px; height: 20px; line-height: 18px; padding: 0; }
.mx-card-head .btn { white-space: nowrap; }
/* Rückrichtung: Kompetenz ist K.-o.-Komponente des Hauptdienst-Regelwerks */
.kc-row .kc-ko { display: inline-block; margin-left: .3rem; padding: 0 5px; border-radius: 999px; font-size: .64rem; font-weight: 600;
                 background: var(--mx-crit-soft); color: #9b1c1c; border: 1px solid #f3c2c2; white-space: nowrap; vertical-align: 1px; }

/* ---------- Kompetenzkatalog: aufklappbare Bereiche, Übersicht/Bearbeiten ---------- */
.kt-card { border: 1px solid var(--gray-200); border-radius: 8px; background: #fff; margin-bottom: .45rem; overflow: hidden; }
.kt-card.inaktiv .kt-head .nm { color: var(--gray-600); text-decoration: line-through; }
.kt-head { display: flex; align-items: center; gap: .45rem; padding: .5rem .7rem; cursor: pointer; background: var(--gray-50); }
.kt-head:hover { background: var(--gray-100); }
.kt-head .caret { width: .9rem; color: var(--gray-600); }
.kt-head .nm { font-weight: 600; }
.kt-head .sum { margin-left: auto; color: var(--gray-600); font-size: .74rem; text-align: right; }
.kt-inaktiv { font-size: .64rem; font-weight: 700; letter-spacing: .04em; color: var(--gray-600); border: 1px solid var(--gray-300); border-radius: 3px; padding: 0 4px; }
.kt-body { padding: .2rem .5rem .4rem; }
.kt-grp { display: inline-block; font-size: .76rem; font-weight: 600; color: var(--gray-900); background: #e8eef8; padding: .12rem .5rem; border-radius: 4px; }
table.kt { width: 100%; border-collapse: collapse; font-size: .82rem; }
table.kt th { text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .03em; color: var(--gray-600); font-weight: 600; padding: .3rem .4rem; border-bottom: 1px solid var(--gray-200); white-space: nowrap; }
table.kt td { padding: .28rem .4rem; border-bottom: 1px solid var(--gray-100); vertical-align: middle; }
table.kt td.c { text-align: center; }
table.kt td.mono { font-family: ui-monospace, Menlo, monospace; font-size: .78rem; color: var(--gray-600); }
table.kt tr.inaktiv td { opacity: .55; }
table.kt tr.edit td { background: #fbfdff; }
table.kt tr.grp td { border-bottom: 0; padding-top: .5rem; }
table.kt td .tree { color: var(--gray-400); margin-right: .3rem; }
table.kt tr:hover td { background: #f8fbff; }
table.kt .btn.leer { color: var(--gray-600); }

/* ==================== Gespräche (A2) ==================== */
/* Zwei Instrumente, ein Gerüst: Übersicht je Person mit Fälligkeiten, darunter das Protokoll als
   Formular. Gesperrte Protokolle sind an den deaktivierten Feldern erkennbar (kein eigenes Layout). */
label.mx-chk { display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; color: var(--gray-700); white-space: nowrap; }
table.gs-list td { vertical-align: top; }
table.gs-list td.gs-na { color: var(--gray-400); text-align: center; }
table.gs-list a { font-weight: 600; }
.gs-tag { display: inline-block; font-size: .68rem; font-weight: 600; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--gray-300); background: var(--gray-100); color: var(--gray-700); white-space: nowrap; }
.gs-tag.ok { background: var(--mx-good-soft); border-color: #86efac; color: #14532d; }
.gs-tag.off { background: var(--mx-warn-soft); border-color: var(--warning-color); color: #7c2d12; }
.gs-tag.draft { background: #fff7ed; border-color: #fdba74; color: #7c2d12; }
.gs-tag.sig { background: #eff6ff; border-color: #93c5fd; color: #1e3a8a; }
.gs-tag.vj { background: var(--gray-100); margin-bottom: .2rem; }

.gs-form { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--border-radius); padding: .9rem 1rem 1.2rem; }
.gs-head { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.gs-head h3 { margin: 0; font-size: 1.05rem; }
.gs-dirty { margin-left: auto; font-size: .78rem; color: var(--warning-color); font-weight: 600; }
.gs-hinweis { font-size: .8rem; color: var(--gray-700); background: var(--gray-50); border-left: 3px solid var(--gray-300); padding: .45rem .7rem; margin: .6rem 0 .9rem; }
.gs-h4 { margin: 1.3rem 0 .5rem; font-size: .95rem; border-bottom: 1px solid var(--gray-200); padding-bottom: .25rem; }
.gs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .5rem .75rem; }
.gs-grid .form-group.wide, .gs-form > .form-group.wide { grid-column: 1 / -1; }
.gs-form .form-group { margin-bottom: .5rem; }
.gs-form textarea { width: 100%; resize: vertical; font: inherit; }

table.gs-best td { vertical-align: top; }
table.gs-best tr.gs-ber td:first-child { font-weight: 600; }
table.gs-best tr.gs-teil td:first-child { padding-left: 1.8rem; font-weight: 400; color: var(--gray-700); }
table.gs-best tr.gs-teil td { background: #fcfdff; }
table.gs-best select, table.gs-best textarea { width: 100%; }
table.gs-best select.gs-abw { border-color: var(--warning-color); background: #fffdf5; }
.gs-toggle { border: 0; background: none; cursor: pointer; color: var(--gray-600); font-size: .9rem; padding: 0 .1rem; }

.gs-hd { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(220px, 1fr); gap: .75rem 1.2rem; align-items: start; }
.gs-hdl { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .4rem .75rem; }
.gs-hdl .form-group.wide { grid-column: 1 / -1; }
.gs-hdr { background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--border-radius); padding: .6rem .7rem; }
.gs-hdst { font-weight: 600; margin-bottom: .3rem; }
.gs-fehl { margin-top: .4rem; font-size: .8rem; }
.gs-fehl ul { margin: .2rem 0 0 1rem; padding: 0; }

table.gs-mass td { vertical-align: top; }
table.gs-mass textarea, table.gs-mass input, table.gs-mass select { width: 100%; }

.gs-sig { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .6rem 1rem; font-size: .85rem; }
.gs-sig > div { background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--border-radius); padding: .5rem .7rem; }
ul.gs-nt { margin: .3rem 0 .6rem; padding-left: 1.1rem; font-size: .85rem; }
ul.gs-nt li { margin-bottom: .4rem; }
.gs-actions { display: flex; gap: .5rem; justify-content: flex-end; margin-top: 1.2rem; border-top: 1px solid var(--gray-200); padding-top: .8rem; }
/* Tabellen im Protokoll scrollen nicht intern (das Formular wird von oben nach unten ausgefüllt);
   nur bei zu geringer Breite darf seitlich gescrollt werden. */
.gs-wrap { overflow-x: auto; }

/* Statuslücke in der Periodentabelle: kein Status zwischen zwei Perioden. Das ist zulässig
   (z. B. Unterbrechung des Dienstverhältnisses), die Person zählt dann aber nirgends mit. */
.mx-per tr.luecke td { background: var(--mx-warn-soft); color: #7c2d12; font-size: .78rem; }
/* Leitfragen eines Gesprächsabschnitts (Vorlage des Users) – Hilfetext, kein Eingabefeld. */
ul.gs-fragen { margin: .1rem 0 .5rem 1.1rem; padding: 0; font-size: .8rem; color: var(--gray-600); }
ul.gs-fragen li { margin-bottom: .12rem; }
/* Rückkopplung in die Matrix (Übernahme einer Zeile, HD-Override aus dem Gespräch). */
table.gs-best td.gs-ue { text-align: center; white-space: normal; }
.gs-ovr { margin-top: .5rem; border-top: 1px dashed var(--gray-300); padding-top: .45rem; display: flex; flex-direction: column; gap: .3rem; align-items: flex-start; }
/* Gemeinsamer Termin: Hinweis- und Knopfzeile unter den Unterschriften. */
.gs-partner { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: .6rem 0 .2rem; font-size: .85rem;
    background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--border-radius); padding: .45rem .6rem; }
/* Stufe 4 im fachlichen Gespräch: Merkmal neben „selbstständig“; Herabsetzung als Knopf gekennzeichnet. */
label.gs-s4 { display: inline-flex; align-items: flex-start; gap: .3rem; font-size: .75rem; color: var(--gray-700); margin-top: .2rem; line-height: 1.25; }
.btn.gs-runter { border-color: var(--warning-color); color: #7c2d12; background: var(--mx-warn-soft); }
/* Bestandsaufnahme: Schalter, stille Marke, HD-Kriteriengruppe und das Bewertungsfeld in der Zeile. */
.gs-schalter { display: flex; gap: 1rem; flex-wrap: wrap; margin: .1rem 0 .4rem; }
.gs-marke { display: block; font-size: .72rem; color: #7c2d12; margin-top: .15rem; }
table.gs-best tr.gs-hd-zeile td { background: #fbfcff; }
table.gs-best tr.gs-hd-zeile.gs-ber td:first-child { font-weight: 600; }
table.gs-best td.gs-ue { white-space: normal; line-height: 1.9; }
table.gs-best td.gs-ue .btn-e { border: 0; background: none; cursor: pointer; color: var(--gray-600); font-size: .95rem; padding: 0 .1rem; }
table.gs-best td.gs-ue .btn-e:hover { color: var(--primary); }
tr.gs-bewzeile td { background: #f4f8ff !important; }
.gs-bewbox { padding: .2rem 0 .1rem; }
.gs-stufen { display: flex; gap: .3rem; margin: .4rem 0; }
.gs-stufen .mx-k { cursor: pointer; border: 2px solid transparent; }
.gs-stufen .mx-k.sel { border-color: var(--gray-900); }
.gs-bewfelder { display: flex; gap: .7rem; flex-wrap: wrap; align-items: flex-end; }
.gs-bewfelder label { display: inline-flex; flex-direction: column; font-size: .75rem; color: var(--gray-600); gap: .15rem; }
.gs-bewfelder label.wide { flex: 1; min-width: 14rem; }
.gs-warn { margin-top: .4rem; font-size: .8rem; background: var(--mx-warn-soft); border: 1px solid var(--warning-color); border-radius: var(--border-radius); padding: .3rem .5rem; color: #7c2d12; }
.gs-bewakt { display: flex; gap: .4rem; margin-top: .5rem; }
/* Ankündigung, dass der Einsatzumfang der neuen Stufe folgt. */
.gs-anp { margin-top: .45rem; font-size: .8rem; background: #eff6ff; border: 1px solid #93c5fd; border-radius: var(--border-radius); padding: .35rem .5rem; display: flex; flex-direction: column; gap: .2rem; }