/* PTMS – stylesheet (Sitzung 03). No framework. Dense, calm work surface (briefing 6).
   House colour = Backoffice (Pantone 293, F-10): --primaer/--dunkel/--akzent mirror includes/config.example.php
   (PTMS_FARBE_*). If the colours change in the config, change the three variables below as well.
   CSP: style-src 'self' – no inline styles anywhere; widths/colours are classes or native elements. */

:root {
  --primaer: #1a3a6b; --dunkel: #12294c; --akzent: #e85d04;
  --bg: #F5F6F8; --flaeche: #ffffff; --text: #1F2937; --text-gedaempft: #4B5563; --rand: #cdd3dc; --rand-hell: #e5e8ee;
  --gruen: #15803D; --gelb: #B45309; --rot: #B91C1C;
  --grau-bg: #E5E7EB; --grau-fg: #374151; --blau-bg: #DBE7F7; --blau-fg: #1a3a6b;
  --gruen-bg: #DCFCE7; --gruen-fg: #14532D; --gelb-bg: #FEF3C7; --gelb-fg: #7C2D12; --rot-bg: #FEE2E2; --rot-fg: #7F1D1D;
  --abstand-1: 4px; --abstand-2: 8px; --abstand-3: 12px; --abstand-4: 16px; --abstand-5: 20px; --abstand-6: 24px; --abstand-8: 32px;
  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --nav-breite: 240px; --inhalt-max: 1400px; --radius: 4px;
  --fokus: 0 0 0 2px #fff, 0 0 0 4px var(--primaer);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; font: 14px/1.45 var(--schrift); background: var(--bg); color: var(--text); }
h1 { font-size: 22px; margin: 0 0 var(--abstand-4); line-height: 1.2; }
h2 { font-size: 17px; margin: var(--abstand-6) 0 var(--abstand-3); line-height: 1.25; }
h3 { font-size: 14px; margin: 0 0 var(--abstand-2); }
p { margin: 0 0 var(--abstand-3); }
a { color: var(--primaer); text-underline-offset: 2px; }
a:hover { color: var(--dunkel); }
:focus-visible { outline: 2px solid var(--primaer); outline-offset: 2px; }
:focus { scroll-margin-top: 72px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -999px; top: 0; background: #fff; color: var(--primaer); padding: var(--abstand-2) var(--abstand-4); z-index: 100; border: 2px solid var(--primaer); }
.skip-link:focus { left: var(--abstand-2); top: var(--abstand-2); }
.hinweis { color: var(--text-gedaempft); }
[hidden] { display: none !important; }

/* ---------- Shell: navigation 240 px, header, content max 1400 px ---------- */
.seitennav { position: fixed; top: 0; left: 0; bottom: 0; width: var(--nav-breite); background: var(--dunkel); color: #fff; overflow-y: auto; z-index: 20; }
.seitennav .logo { font-weight: 700; font-size: 18px; letter-spacing: .04em; padding: var(--abstand-4) var(--abstand-4) var(--abstand-3); display: flex; align-items: center; gap: var(--abstand-2); }
.logo-marke { width: 12px; height: 12px; background: var(--akzent); display: inline-block; border-radius: 2px; }
.seitennav ul { list-style: none; margin: 0; padding: 0; }
.seitennav li a, .seitennav li.folgt { display: block; padding: 8px var(--abstand-4); color: #fff; text-decoration: none; border-left: 3px solid transparent; }
.seitennav li a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.seitennav li.aktiv a { background: var(--primaer); border-left-color: var(--akzent); font-weight: 600; }
.seitennav li.folgt { color: #b9c4d8; cursor: default; }
.seitennav a:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.navgruppe { padding: var(--abstand-4) var(--abstand-4) var(--abstand-1); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #b9c4d8; }
.kopf { position: sticky; top: 0; z-index: 10; margin-left: var(--nav-breite); display: flex; justify-content: space-between; align-items: center; gap: var(--abstand-4);
        padding: var(--abstand-2) var(--abstand-6); background: var(--flaeche); border-bottom: 1px solid var(--rand); }
.kopf .benutzer { display: flex; align-items: center; gap: var(--abstand-3); white-space: nowrap; }
.kopf .benutzer-name { font-weight: 600; }
.inhalt { margin-left: var(--nav-breite); padding: var(--abstand-6); max-width: calc(var(--inhalt-max) + var(--nav-breite)); }
.inhalt:focus { outline: none; }
.ohne-nav-seite { background: var(--bg); }
.ohne-nav { max-width: 420px; margin: 60px auto; background: var(--flaeche); padding: var(--abstand-6); border: 1px solid var(--rand); border-radius: var(--radius); }
.schnellwahl { display: flex; align-items: center; gap: var(--abstand-2); min-width: 380px; }
.schnellwahl label { font-weight: 600; }
.schnellwahl .lookup { flex: 1; }

/* ---------- Typography helpers, tables ---------- */
.table-scroll { overflow: auto; max-height: 72vh; background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); }
.table-scroll:focus-visible { outline-offset: 0; }
table { width: 100%; border-collapse: collapse; background: var(--flaeche); font-size: 13px; }
.table-scroll table { border: 0; }
th, td { border-bottom: 1px solid var(--rand-hell); padding: 6px 10px; text-align: left; vertical-align: top; }
thead th { position: sticky; top: 0; z-index: 2; background: #eaeef4; border-bottom: 2px solid var(--rand); font-weight: 600; white-space: nowrap; }
thead th a { color: var(--text); text-decoration: none; display: block; }
thead th a:hover { text-decoration: underline; }
tbody tr:nth-child(even) { background: #f7f8fb; }
tbody tr:hover { background: #eef3fa; }
td.num, th.num, td.zahl, th.zahl, .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
th[aria-sort="ascending"], th[aria-sort="descending"] { background: #dde5f1; }
table[data-client-sort] thead th { cursor: pointer; }
table[data-client-sort] thead th[aria-sort="ascending"]::after { content: " ↑"; }
table[data-client-sort] thead th[aria-sort="descending"]::after { content: " ↓"; }
td.hinweis { padding: var(--abstand-6); text-align: center; }
.diff { margin: 0; padding-left: var(--abstand-4); }
.diff-tabelle { font-size: 12px; margin: var(--abstand-1) 0; border: 1px solid var(--rand-hell); }
.diff-alt { color: var(--rot-fg); background: var(--rot-bg); word-break: break-word; max-width: 360px; }
.diff-neu { color: var(--gruen-fg); background: var(--gruen-bg); word-break: break-word; max-width: 360px; }

/* ---------- Lists: filter bar, meta, pagination ---------- */
.list-filter, .filter { display: flex; flex-wrap: wrap; gap: var(--abstand-3); align-items: flex-end; margin-bottom: var(--abstand-3); padding: var(--abstand-3); background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); }
.list-filter > div, .filter > div { display: flex; flex-direction: column; gap: var(--abstand-1); min-width: 150px; }
.list-filter label, .filter label { font-weight: 600; font-size: 12px; color: var(--text-gedaempft); }
.list-filter .actions { flex-direction: row; gap: var(--abstand-2); align-items: center; }
.list-meta { display: flex; justify-content: space-between; align-items: center; margin: 0 0 var(--abstand-2); color: var(--text-gedaempft); }
.pagination { display: flex; gap: var(--abstand-4); align-items: center; margin-top: var(--abstand-3); color: var(--text-gedaempft); }
.filter input, .filter select { width: auto; }

/* ---------- Forms ---------- */
.form-grid, .formular { display: grid; grid-template-columns: repeat(2, minmax(260px, 1fr)); gap: var(--abstand-3) var(--abstand-6); background: var(--flaeche); padding: var(--abstand-4); border: 1px solid var(--rand); border-radius: var(--radius); }
.form-grid.plain { border: 0; padding: 0; background: transparent; grid-column: 1 / -1; }
.form-grid .voll, .formular .voll { grid-column: 1 / -1; }
.form-field label, .formular label { display: block; font-weight: 600; margin-bottom: var(--abstand-1); }
.formular > div > label input { margin-right: var(--abstand-2); }
input, select, textarea { font: inherit; color: var(--text); padding: 6px 8px; border: 1px solid #8892a2; border-radius: var(--radius); background: #fff; width: 100%; min-height: 34px; }
input[type=checkbox], input[type=radio] { width: auto; min-height: 0; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primaer); outline-offset: 0; border-color: var(--primaer); }
input[aria-invalid=true], select[aria-invalid=true], textarea[aria-invalid=true] { border: 2px solid var(--rot); }
input:disabled, select:disabled, textarea:disabled, input:read-only { background: #eef0f4; color: var(--text-gedaempft); }
.feldfehler { color: var(--rot); font-size: 12px; font-weight: 600; margin-top: var(--abstand-1); }
.feldfehler::before { content: "■ "; }
.b-klein { width: 80px; } .b-mittel { width: 160px; } .b-gross { width: 320px; }
fieldset { border: 1px solid var(--rand); border-radius: var(--radius); padding: var(--abstand-3) var(--abstand-4); margin: 0; min-width: 0; }
legend { font-weight: 600; padding: 0 var(--abstand-2); }
.json-list { background: #fafbfd; }
.json-row { margin: 0 0 var(--abstand-3); background: var(--flaeche); }

/* lookup combobox */
.lookup { position: relative; }
.lookup-results { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; margin: 2px 0 0; padding: 0; list-style: none; background: #fff; border: 1px solid #8892a2; border-radius: var(--radius); box-shadow: 0 6px 16px rgba(18, 41, 76, .18); max-height: 260px; overflow: auto; }
.lookup-results li { padding: 7px 10px; cursor: pointer; }
.lookup-results li[aria-selected=true], .lookup-results li:hover { background: var(--primaer); color: #fff; }

/* ---------- Buttons ---------- */
button, .button { font: inherit; font-weight: 600; min-height: 34px; padding: 6px 14px; background: var(--primaer); color: #fff; border: 1px solid var(--primaer); border-radius: var(--radius); cursor: pointer; text-decoration: none; display: inline-block; line-height: 1.3; }
button:hover, .button:hover { background: var(--dunkel); border-color: var(--dunkel); color: #fff; }
button:focus-visible, .button:focus-visible { outline: 2px solid var(--primaer); outline-offset: 2px; }
button.sekundar, .button.sekundar { background: #fff; color: var(--primaer); border-color: var(--primaer); }
button.sekundar:hover, .button.sekundar:hover { background: #eaf0fa; color: var(--dunkel); }
button.gefahr { background: var(--rot); border-color: var(--rot); }
button.gefahr:hover { background: #7F1D1D; border-color: #7F1D1D; }
button:disabled { background: #d1d5db; border-color: #d1d5db; color: #4B5563; cursor: not-allowed; }
button.link { background: none; border: 0; color: var(--primaer); padding: 0; min-height: 0; text-decoration: underline; font-weight: 400; }
button.link:hover { background: none; color: var(--dunkel); }
form.inline { display: inline; }
form.inline-form { display: flex; gap: var(--abstand-2); align-items: center; margin: 0 0 var(--abstand-1); }
form.inline-form select { width: auto; min-width: 150px; }
td form.inline-form button { min-height: 30px; padding: 3px 10px; }

/* ---------- Badges, traffic light, lock ---------- */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; border: 1px solid transparent; white-space: nowrap; }
.badge::before { font-size: 10px; line-height: 1; }
.badge-grau { background: var(--grau-bg); color: var(--grau-fg); border-color: #b9c0cb; } .badge-grau::before { content: "○"; }
.badge-blau { background: var(--blau-bg); color: var(--blau-fg); border-color: #9bb6dd; } .badge-blau::before { content: "▶"; }
.badge-gruen { background: var(--gruen-bg); color: var(--gruen-fg); border-color: #86c9a0; } .badge-gruen::before { content: "✓"; }
.badge-gelb { background: var(--gelb-bg); color: var(--gelb-fg); border-color: #e1b04a; } .badge-gelb::before { content: "▲"; }
.badge-rot { background: var(--rot-bg); color: var(--rot-fg); border-color: #e59a9a; } .badge-rot::before { content: "■"; }
.badge-neutral { background: #fff; color: var(--text); border-color: #8892a2; } .badge-neutral::before { content: none; }
.badge-vertraulich { background: #fff; color: var(--dunkel); border-color: var(--dunkel); } .badge-vertraulich::before { content: none; }
.badge-unbekannt { background: #fff; color: var(--rot-fg); border: 2px dashed var(--rot); } .badge-unbekannt::before { content: "?"; }
.ampel { font-weight: 600; white-space: nowrap; }
.ampel-gruen { color: var(--gruen); } .ampel-gelb { color: var(--gelb); } .ampel-rot { color: var(--rot); }
.vertraulich { display: inline-block; width: 12px; height: 12px; background: currentColor; vertical-align: -1px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 9V7a5 5 0 0 0-10 0v2H5v13h14V9h-2zm-8-2a3 3 0 0 1 6 0v2H9V7z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 9V7a5 5 0 0 0-10 0v2H5v13h14V9h-2zm-8-2a3 3 0 0 1 6 0v2H9V7z'/%3E%3C/svg%3E") center / contain no-repeat; }

/* ---------- Flash, tabs, error box ---------- */
.flash { padding: var(--abstand-2) var(--abstand-3); margin-bottom: var(--abstand-3); border-left: 4px solid; background: #fff; border-radius: 0 var(--radius) var(--radius) 0; display: flex; gap: var(--abstand-2); align-items: flex-start; flex-wrap: wrap; }
.flash ul { margin: var(--abstand-1) 0 0; padding-left: var(--abstand-5); flex-basis: 100%; }
.flash-ok { border-color: var(--gruen); } .flash-ok .flash-marke::before { content: "✓"; color: var(--gruen); font-weight: 700; }
.flash-fehler { border-color: var(--rot); } .flash-fehler .flash-marke::before { content: "■"; color: var(--rot); }
.flash-hinweis { border-color: var(--gelb); } .flash-hinweis .flash-marke::before { content: "▲"; color: var(--gelb); }
.tabs, [role=tablist] { display: flex; gap: 2px; border-bottom: 2px solid var(--primaer); margin: var(--abstand-3) 0; flex-wrap: wrap; }
.tabs a, .tabs span, [role=tab] { padding: 7px var(--abstand-4); background: #e5e8ee; text-decoration: none; color: var(--text); border: 0; border-radius: var(--radius) var(--radius) 0 0; font-weight: 400; min-height: 0; }
.tabs a.aktiv, [role=tab][aria-selected=true] { background: var(--primaer); color: #fff; font-weight: 600; }
[role=tab]:hover { background: #d2d8e3; color: var(--text); border: 0; }
[role=tab][aria-selected=true]:hover { background: var(--primaer); color: #fff; }
[role=tabpanel] { padding: var(--abstand-3) 0; }
.fehlerbox { background: #fff; padding: var(--abstand-5); border: 1px solid var(--rand); border-radius: var(--radius); }

/* ---------- Dashboard tiles ---------- */
.kpi-grid, .kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--abstand-4); margin-bottom: var(--abstand-6); }
.kpi-grid.vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpi { display: flex; flex-direction: column; gap: var(--abstand-1); background: var(--flaeche); border: 1px solid var(--rand); border-top: 4px solid var(--primaer); border-radius: var(--radius); padding: var(--abstand-4); color: var(--text); text-decoration: none; }
a.kpi:hover { border-color: var(--primaer); background: #f3f7fd; color: var(--text); }
.kpi-zahl { font-size: 30px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--dunkel); }
.kpi-label { font-weight: 600; }
.kpi-trend { font-size: 12px; color: var(--text-gedaempft); }
.kpi-trend-gut { color: var(--gruen-fg); } .kpi-trend-schlecht { color: var(--rot-fg); }
.kpi-gruen { border-top-color: var(--gruen); } .kpi-gelb { border-top-color: var(--gelb); } .kpi-rot { border-top-color: var(--rot); }
.kachel { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); padding: var(--abstand-3); }

/* ---------- Multi-page form ---------- */
.fortschritt { margin-bottom: var(--abstand-4); }
progress { width: 100%; height: 8px; appearance: none; -webkit-appearance: none; border: 0; background: #dde2ea; border-radius: 4px; overflow: hidden; display: block; }
progress::-webkit-progress-bar { background: #dde2ea; }
progress::-webkit-progress-value { background: var(--primaer); }
progress::-moz-progress-bar { background: var(--primaer); }
.schrittliste { display: flex; flex-wrap: wrap; gap: var(--abstand-2); list-style: none; margin: var(--abstand-3) 0 0; padding: 0; }
.schrittliste button { background: #fff; color: var(--text); border: 1px solid var(--rand); font-weight: 400; display: flex; gap: var(--abstand-2); align-items: center; }
.schrittliste li.aktiv button { border: 2px solid var(--primaer); font-weight: 700; color: var(--primaer); }
.schritt-nr { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; background: var(--grau-bg); align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.schrittliste li.aktiv .schritt-nr { background: var(--primaer); color: #fff; }
.entwurf-status { min-height: 20px; color: var(--text-gedaempft); margin: var(--abstand-2) 0; }
.entwurf-status.fehler { color: var(--rot-fg); font-weight: 600; }
.schritt-aktionen { display: flex; gap: var(--abstand-2); margin-top: var(--abstand-4); }
.schritt { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); padding: var(--abstand-4); }
.schritt h2 { margin-top: 0; }

/* ---------- Dialog ---------- */
dialog.dialog { border: 1px solid var(--primaer); border-radius: var(--radius); padding: var(--abstand-5); max-width: 560px; width: calc(100% - 32px); color: var(--text); }
dialog.dialog::backdrop { background: rgba(18, 41, 76, .55); }
dialog.dialog h2 { margin-top: 0; }
.dialog-aktionen { display: flex; justify-content: flex-end; gap: var(--abstand-2); margin-top: var(--abstand-4); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .kpi-grid, .kpi-grid.vier, .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .seitennav { position: static; width: auto; }
  .seitennav ul { display: flex; flex-wrap: wrap; }
  .navgruppe { display: none; }
  .kopf, .inhalt { margin-left: 0; }
  .kopf { position: static; flex-wrap: wrap; padding: var(--abstand-2) var(--abstand-3); }
  .kopf .benutzer { flex-wrap: wrap; white-space: normal; }
  .schnellwahl { min-width: 0; flex: 1 1 100%; }
  .form-grid, .formular { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .kpi-grid, .kpi-grid.vier, .kacheln { grid-template-columns: 1fr; }
  .inhalt { padding: var(--abstand-3); }
}
@media (forced-colors: active) {
  .badge, .kpi, button { border: 1px solid CanvasText; }
}

/* ---------- Print ---------- */
.sdv-matrix td { white-space: nowrap; font-size: 13px; }
.sdv-matrix th[scope="row"] { white-space: nowrap; }
.kennzahlen { color: var(--text-gedaempft); }
.brotkrumen { font-size: 13px; color: var(--text-gedaempft); margin: 0 0 var(--abstand-2); }
@media print {
  @page { size: A4 landscape; margin: 12mm; }
  body { background: #fff; color: #000; font-size: 10pt; }
  .seitennav, .kopf, .skip-link, .list-filter, .filter, .pagination, .schritt-aktionen, button, .button, form.inline { display: none !important; }
  .inhalt { margin: 0; padding: 0; max-width: none; }
  .table-scroll { max-height: none; overflow: visible; border: 0; }
  thead { display: table-header-group; }
  tr { break-inside: avoid; }
  thead th { position: static; background: #eee; }
  tbody tr:nth-child(even) { background: #f3f3f3; }
  .badge { border: 1px solid #000; background: #fff; color: #000; }
  a { color: #000; text-decoration: none; }
  .sdv-matrix td { font-size: 8pt; }
}
/* Sitzung 04: centre detail two columns; compact status buttons in tables */
.kacheln.zwei { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
.kacheln.zwei .kachel { overflow-x: auto; }
td button.sekundar[data-dialog-open] { min-height: 26px; padding: 2px 8px; margin: 0 2px 4px 0; font-size: 13px; }
/* Sitzung 04: Akte sub-navigation, inactive rows, centre detail */
/* K14 (F2-05): second-level navigation = pills WITHOUT the underline (the K12 pills sat on the 1px line in the
   report register / project file). One look for Berichtsregister, Akte and Rekrutierung (nav.tabs-klein below). */
.tabs.tabs-klein { border-bottom: 0; margin-top: 0; }
.tabs.tabs-klein a { padding: 5px 12px; font-size: 13px; margin-bottom: 0; }
tr.inaktiv td { color: var(--text-gedaempft); background: #f6f7f9; }
details.kachel > summary { cursor: pointer; font-weight: 600; }
details.kachel p button { margin: 0 4px 6px 0; }
.aktionen { display: flex; flex-wrap: wrap; gap: var(--abstand-2); align-items: center; margin: 0 0 var(--abstand-3); }
@media (max-width: 900px) { .kacheln.zwei { grid-template-columns: 1fr; } }
td.nowrap { white-space: nowrap; }

/* ---------- A5 reports (Sitzung 06) ---------- */
fieldset.antwort { border: 0; margin: 0; padding: 0; display: flex; gap: var(--abstand-3); flex-wrap: wrap; white-space: nowrap; }
fieldset.antwort label { font-weight: 400; margin: 0; }
table.fragen td:first-child { white-space: nowrap; width: 3.5em; }
table.fragen td.antw { width: 19em; }
table.fragen tr.offen td { background: #fff7e0; }
table.raster td, table.raster th { text-align: center; }
table.erfassung input, table.erfassung select, table.erfassung textarea { width: 100%; min-width: 5em; }
.schritt-nav { display: flex; justify-content: space-between; gap: var(--abstand-3); margin-top: var(--abstand-4); }
th.w-8 { width: 8em; } th.w-9 { width: 9em; } th.w-10 { width: 10em; }
table.raster th.links, table.raster td.links { text-align: left; }
.formular-block { background: var(--flaeche); padding: var(--abstand-4); border: 1px solid var(--rand); border-radius: var(--radius); }
.formular-block .form-grid { border: 0; padding: var(--abstand-3) 0; }
.formular-block table.raster { width: auto; min-width: 50%; }

/* ---- Sitzung 09: Rekrutierung, Diagramme, Import-Assistent, Subject-Liste ---- */
.diagramm-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--abstand-4); margin-bottom: var(--abstand-6); }
.diagramm { margin: 0; background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); padding: var(--abstand-3); }
.diagramm.breit { grid-column: 1 / -1; }
.diagramm figcaption { font-weight: 600; margin-bottom: var(--abstand-2); }
.diagramm-box { position: relative; height: 300px; }
.projektion-text { max-width: 80ch; line-height: 1.5; }
.tabelle-scroll { overflow-x: auto; max-width: 100%; border: 1px solid var(--rand); }
table.matrix { width: auto; min-width: 100%; }
table.matrix th, table.matrix td { padding: 3px 8px; }
table.matrix td.null { color: var(--rand); }
table.matrix td.summe, table.matrix tfoot th { font-weight: 700; background: #f3f5f9; }
table.matrix .sticky-links { position: sticky; left: 0; z-index: 1; background: var(--flaeche); border-right: 2px solid var(--rand); text-align: left; }
table.matrix thead .sticky-links { z-index: 3; background: #f3f5f9; }
table.matrix tfoot .sticky-links { background: #f3f5f9; }
.schritte { display: flex; gap: var(--abstand-2); list-style: none; padding: 0; margin: 0 0 var(--abstand-4); }
.schritte li { flex: 1; padding: var(--abstand-2) var(--abstand-3); border: 1px solid var(--rand); border-bottom: 4px solid var(--rand); background: var(--flaeche); color: var(--text-gedaempft); }
.schritte li.aktiv { border-bottom-color: var(--primaer); color: var(--text); font-weight: 700; }
.schritte li.fertig { border-bottom-color: var(--gruen); color: var(--text); }
tr.zeile-fehler td, tr.zeile-fehler th { background: var(--rot-bg); color: var(--rot-fg); }
tr.zeile-aendern td { background: var(--gelb-bg); }
tr.zeile-neu td { background: var(--gruen-bg); }
.diff-alt { color: var(--rot-fg); text-decoration: line-through; }
.diff-neu { color: var(--gruen-fg); font-weight: 600; }
.zaehler { display: flex; flex-wrap: wrap; gap: var(--abstand-2); margin: var(--abstand-3) 0; }
.zaehler .badge { font-size: 13px; padding: 4px 10px; }
.mapping-tabelle td, .mapping-tabelle th { vertical-align: middle; }
.visiten-liste { margin: 0; padding-left: var(--abstand-4); font-size: 12px; }
tr.visiten-zeile > td { background: #fafbfc; padding-left: var(--abstand-6); }
@media (max-width: 1100px) { .diagramm-raster { grid-template-columns: 1fr; } }
@media print {
  .diagramm { break-inside: avoid; border-color: CanvasText; }
  .diagramm-raster { grid-template-columns: 1fr 1fr; }
  .diagramm-box { height: 240px; }
  .tabelle-scroll { overflow: visible; }
  table.matrix .sticky-links { position: static; }
}
form.inline select, form.inline input:not([type=checkbox]):not([type=hidden]), .mapping-tabelle select, .mapping-tabelle input { width: auto; max-width: 100%; }
.mapping-tabelle select { min-width: 280px; }
form.inline label { margin-right: var(--abstand-1); }
form.wizard select { width: auto; min-width: 280px; max-width: 100%; }
form.wizard input[name=mapping_name] { width: 320px; }
.mapping-tabelle td.hinweis { text-align: left; padding: var(--abstand-2) var(--abstand-3); }
#filter-aktion { width: auto; }
/* Sitzung 11 – A7 service plan */
table.leistungsplan tr.pass-through td { background: #fbf6ea; }
table.leistungsplan tr.zwischensumme th, table.leistungsplan tr.zwischensumme td { background: #eef2f8; font-weight: 600; }
dl.kopfdaten { display: grid; grid-template-columns: max-content 1fr; gap: 2px var(--abstand-3); margin: 0 0 var(--abstand-4); }
dl.kopfdaten dt { font-weight: 600; } dl.kopfdaten dd { margin: 0; }
textarea.mono, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
@media print { table.leistungsplan tr.pass-through td { background: #f3f3f3; } dialog, details:not([open]) { display: none !important; } }
table.co-tabelle td:first-child, table.co-tabelle td:nth-child(2) { white-space: nowrap; }

/* ---- A8 dashboards (Sitzung 12) ---- */
.dash-filter { margin-bottom: var(--abstand-4); }
.kpi-grid + .kpi-grid { margin-top: calc(-1 * var(--abstand-2)); }
.kacheln.dash-zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ampel-gruende { margin: 0; padding-left: 1.1em; }
.ampel-gruende li { margin: 0 0 2px; }
.kpi .ampel { font-size: 20px; }
.zeitstrahl { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 3px solid var(--rand); }
.zeitstrahl li { position: relative; padding: 2px 0 6px 10px; }
.zeitstrahl li::before { content: ''; position: absolute; left: -22px; top: 7px; width: 11px; height: 11px; border-radius: 50%; background: var(--flaeche); border: 2px solid var(--text-gedaempft); }
.zeitstrahl li.zs-erreicht::before { background: var(--gruen); border-color: var(--gruen); }
.zeitstrahl li.zs-ueberfaellig::before { background: var(--rot); border-color: var(--rot); border-radius: 0; }
.zs-datum { font-variant-numeric: tabular-nums; font-weight: 600; display: inline-block; min-width: 6.5em; }
.diagramm-box.klein { height: 220px; }
.dash-stand { margin-top: var(--abstand-4); }
details.dash-tabelle { margin: var(--abstand-2) 0 var(--abstand-4); }
details.dash-tabelle summary { cursor: pointer; font-weight: 600; }
@media (max-width: 900px) { .kacheln.dash-zwei { grid-template-columns: 1fr; } }
@media print { .dash-filter { display: none; } }

/* Login (Backoffice-Stil, K2) – login, password reset, 403/404/500 without navigation. Replicates the Backoffice values (Tailwind there), no CDN. */
:root {
  --login-bg: #0f1f40;
  --login-ring: 0 0 0 2px rgba(26, 58, 107, .15);
  --login-schrift: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}
body.login-seite {
  min-height: 100vh; margin: 0; padding: 16px; display: flex; align-items: center; justify-content: center;
  font-family: var(--login-schrift);
  background-color: var(--login-bg);
  background-image: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(26, 58, 107, .8) 0%, transparent 70%),
                    radial-gradient(ellipse 40% 40% at 80% 80%, rgba(232, 93, 4, .12) 0%, transparent 60%);
  background-attachment: fixed;
}
.login-seite .login-huelle { width: 100%; max-width: 384px; }
.login-seite .login-logo { text-align: center; margin-bottom: 32px; }
.login-seite .login-logo img { display: block; width: 48px; height: 48px; margin: 0 auto 12px; }
.login-seite .login-firma { color: #fff; font-size: 18px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.login-seite .login-produkt { color: #93c5fd; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; margin-top: 2px; }
.login-seite .login-karte {
  background: #fff; border-radius: 16px; padding: 32px; color: #111827;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .28), 0 4px 16px rgba(0, 0, 0, .12);
}
.login-seite .login-karte:focus { outline: none; }
.login-seite .login-karte form > p { margin: 0 0 20px; }
.login-seite .login-karte label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: .05em; }
.login-seite .login-karte input {
  display: block; width: 100%; min-height: 0; padding: 12px 16px; font: inherit; font-size: 14px; color: #111827;
  background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 12px; outline: none; transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.login-seite .login-karte input::placeholder { color: #9ca3af; }
.login-seite .login-karte input:focus { border-color: #1a3a6b; background: #fff; box-shadow: var(--login-ring); outline: none; }
.login-seite .login-karte input[aria-invalid=true] { border: 1px solid var(--rot); }
.login-seite .login-karte input.login-totp { text-align: center; letter-spacing: .3em; font-size: 20px; }
.login-seite .login-karte button.login-knopf {
  display: block; width: 100%; min-height: 0; padding: 12px; margin-top: 4px; font: inherit; font-size: 14px; font-weight: 600; color: #fff;
  background: #1a3a6b; border: 0; border-radius: 12px; cursor: pointer; box-shadow: 0 1px 3px rgba(0, 0, 0, .15); transition: background-color .15s;
}
.login-seite .login-karte button.login-knopf:hover { background: #12294c; }
.login-seite .login-karte button.login-knopf:focus-visible { outline: 2px solid #1a3a6b; outline-offset: 2px; }
.login-seite .login-karte .flash { display: block; margin: 0 0 20px; padding: 12px 16px; border: 0; border-radius: 12px; font-size: 13px; line-height: 1.45; background: #DBE7F7; color: #1a3a6b; }
.login-seite .login-karte .flash-fehler { background: #FEE2E2; color: #7F1D1D; }
.login-seite .login-karte .flash-ok { background: #DCFCE7; color: #14532D; }
.login-seite .login-karte .flash-marke { display: none; }
.login-seite .login-karte .hinweis, .login-seite .login-karte .login-link { margin: 20px 0 0; font-size: 12px; color: #6b7280; text-align: center; }
.login-seite .login-karte .login-link { font-size: 13px; }
.login-seite .login-karte .login-link a, .login-seite .login-karte .fehlerbox a { color: #1a3a6b; font-weight: 600; }
.login-seite .login-karte h1 { font-size: 18px; font-weight: 600; color: #111827; margin: 0 0 20px; text-align: center; }
.login-seite .login-karte .fehlerbox { background: none; border: 0; padding: 0; text-align: center; }
.login-seite .login-karte .fehlerbox p { color: #4B5563; font-size: 14px; }
.login-seite .login-karte .fehlerbox p:last-child { margin: 24px 0 0; }
.login-seite .login-fuss { margin: 24px 0 0; text-align: center; font-size: 12px; color: rgba(96, 165, 250, .6); }
.login-seite .login-version { margin-left: 8px; font-size: 11px; opacity: .8; }
.login-seite .skip-link { font-family: var(--login-schrift); }
@media (max-width: 420px) { .login-seite .login-karte { padding: 24px; } }
html:has(body.login-seite) { background: var(--login-bg); }
.login-seite .login-karte form > .hinweis { margin: 0 0 20px; text-align: center; }

/* K5 usability round 1: centre register, site pool, status steps, project types */
td progress { width: 120px; display: inline-block; vertical-align: middle; margin-right: 6px; }
.unterzeile > td { background: var(--bg); padding: var(--abstand-3); }
table.eingebettet { background: var(--flaeche); }
th.zeilenkopf { text-align: left; background: transparent; font-weight: 400; position: static; }
ol.schritte { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0 0 var(--abstand-3); padding: 0; counter-reset: schritt; }
ol.schritte li { white-space: nowrap; counter-increment: schritt; padding: 4px 10px; border: 1px solid var(--rand); border-radius: 14px; background: #fff; color: var(--text-gedaempft); font-size: 13px; }
ol.schritte li::before { content: counter(schritt) ". "; }
ol.schritte li.erledigt { background: var(--gruen-bg); color: var(--gruen-fg); border-color: #86c9a0; }
ol.schritte li.erledigt::before { content: "✓ "; }
ol.schritte li.aktuell { background: var(--primaer); color: #fff; border-color: var(--primaer); font-weight: 600; }
.statusoption { margin: 0 0 var(--abstand-2); display: flex; flex-wrap: wrap; gap: var(--abstand-3); align-items: center; }
.statusoption p { margin: 0; flex: 1 1 260px; color: var(--text-gedaempft); }
.kopfkarte { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); padding: var(--abstand-4); margin: 0 0 var(--abstand-3); }
.kopfkarte dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--abstand-2) var(--abstand-4); margin: var(--abstand-3) 0 0; }
.kopfkarte dt { font-size: 12px; font-weight: 600; color: var(--text-gedaempft); }
.kopfkarte dd { margin: 0; }
.matrix th, .matrix td { text-align: center; }
.matrix th:first-child, .matrix td:first-child { text-align: left; }
.matrix svg { width: 18px; height: 18px; vertical-align: middle; }
.matrix .an { color: var(--gruen); } .matrix .aus { color: var(--text-gedaempft); }
.verschieben { display: inline-flex; gap: 2px; }
details.technik { margin: var(--abstand-3) 0; padding: var(--abstand-2) var(--abstand-3); background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); }
details.technik summary { cursor: pointer; font-weight: 600; }
/* K6 Leistungskennzahlen */
.perf-tabelle td, .perf-tabelle tbody th, .perf-tabelle tfoot th { white-space: nowrap; }
.perf-tabelle thead th { white-space: normal; min-width: 72px; max-width: 120px; vertical-align: bottom; font-size: 12px; line-height: 1.3; }
.perf-tabelle thead th:first-child { min-width: 150px; }
.perf-tabelle thead th abbr { text-decoration: underline dotted; cursor: help; }
.perf-tabelle tfoot .perf-vergleich th, .perf-tabelle tfoot .perf-vergleich td { background: var(--flaeche, #f6f7f9); font-weight: 600; }
.perf-abw { color: var(--text-gedaempft); font-size: 12px; }
.perf-definitionen dt { font-weight: 600; margin-top: 8px; }
.perf-definitionen dd { margin: 2px 0 0 0; }
/* K7 Erfassungsbogen-Import: compact change lists in the preview table */
ul.liste-kompakt { margin: 0; padding-left: 1.1em; }
ul.liste-kompakt li { margin: 0; font-size: 13px; }

/* K11: long cron URLs on the system page */
.url-umbruch { word-break: break-all; display: inline-block; max-width: 60rem; }

/* ==== K12 UI-Überarbeitung (UI-Audit 16.10.2026) ==== */
/* R0 Scroll-Hüllen als Bezugsrahmen: .sr-only-Texte (position:absolute) in Tabellen verbreitern sonst die Seite */
.table-scroll, .tabelle-scroll { position: relative; }
/* B0 Knopfleisten: .aktionen-leiste war im Markup benutzt, aber nie definiert */
.aktionen-leiste { display: flex; flex-wrap: wrap; gap: var(--abstand-2); align-items: center; margin: 0 0 var(--abstand-4); }
.aktionen-leiste > form, .aktionen > form { margin: 0; }
.aktionen { margin-bottom: var(--abstand-4); }
td .aktionen, td.aktionen-zelle { margin: 0; gap: var(--abstand-2) var(--abstand-3); }
/* B1 Abstand zwischen Knöpfen, die nur durch Leerzeichen getrennt sind (Sicherheitsnetz für Altmarkup) */
:where(p, div, td, li, section):not(.aktionen, .aktionen-leiste, .actions, .dialog-aktionen, .schritt-aktionen, .schritt-nav, .zaehler, .verschieben) > :is(.button, button:not(.link)) + :is(.button, button:not(.link), form.inline),
:where(p, div, td):not(.aktionen, .aktionen-leiste, .actions, .dialog-aktionen, .schritt-aktionen) > form.inline + :is(.button, form.inline) { margin-left: var(--abstand-2); }
/* B3 Link-Knöpfe (a.button) gleich hoch und zentriert wie <button> */
.button { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }
button, .button { white-space: nowrap; }
td button, td .button { white-space: normal; }
/* B2 Knopfleisten als Absatz (Leistungsplan, Rekrutierung) */
p:has(> .button:first-child) { display: flex; flex-wrap: wrap; gap: var(--abstand-2); align-items: center; margin-bottom: var(--abstand-4); }
p:has(> .button:first-child) > * { margin-left: 0 !important; }
/* Gleichartige Optionsgruppen (Projekttyp-Auswahl usw.) */
.umschalter { display: flex; flex-wrap: wrap; gap: var(--abstand-2); }
.checkbox-inline { display: inline-flex; align-items: center; gap: var(--abstand-1); font-weight: 400; }
tr.gedimmt td, .gedimmt { color: var(--text-gedaempft); }
/* T1 Kürzel/Nummern nicht am Bindestrich umbrechen */
.nowrap, td.nowrap { white-space: nowrap; }
td > a:only-child { white-space: nowrap; }
td.titel-spalte { min-width: 16rem; }
td .unterzeile { display: block; font-size: 12px; color: var(--text-gedaempft); }
/* F1 Inline-Formulare dürfen umbrechen */
form.inline-form { flex-wrap: wrap; }
/* K1 Überschrift als erstes Kind einer Kachel ohne Zusatzabstand; einheitliche Kachel-Überschriften */
.kachel > h2:first-child, .kachel > :first-child h2, .formular-block > h2:first-child { margin-top: 0; }
.kachel > h2, .kachel > h3 { font-size: 16px; margin: 0 0 var(--abstand-2); }
/* H1 Lange Hinweise eingeklappt */
details.hinweis-mehr { margin: 0 0 var(--abstand-3); color: var(--text-gedaempft); }
details.hinweis-mehr > summary { cursor: pointer; font-size: 13px; color: var(--primaer); }
details.hinweis-mehr > summary:hover { color: var(--dunkel); }
details.hinweis-mehr[open] > summary { margin-bottom: var(--abstand-1); }
.list-meta .aktionen { margin: 0; }
/* Status-Menü im Dialog */
fieldset.statusziele { border: 0; padding: 0; margin: 0 0 var(--abstand-3); }
fieldset.statusziele legend { font-weight: 600; margin-bottom: var(--abstand-2); }
fieldset.statusziele label { display: block; padding: var(--abstand-1) 0; font-weight: 400; }
fieldset.statusziele label .hinweis { display: block; margin-left: 22px; font-size: 12px; }
.leer-zustand { background: var(--flaeche); border: 1px dashed var(--rand); border-radius: var(--radius); padding: var(--abstand-4); margin: 0 0 var(--abstand-4); }
.leer-zustand p { margin: 0 0 var(--abstand-2); }
.leer-zustand .aktionen { margin: 0; }
/* Schnellwahl im Kopf breiter */
.schnellwahl { min-width: 380px; }
@media (max-width: 1100px) { .schnellwahl { min-width: 320px; } }
@media (max-width: 900px) {
  /* R1 Navigation als eine wischbare Zeile statt 6–8 Zeilen */
  .seitennav { display: flex; align-items: center; overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
  .seitennav .logo { padding: var(--abstand-2) var(--abstand-3); flex: none; }
  .seitennav ul { flex-wrap: nowrap; flex: none; }
  .seitennav ul + ul { border-left: 1px solid rgba(255,255,255,.25); }
  .seitennav li { flex: none; }
  .seitennav li a, .seitennav li.folgt { padding: 10px var(--abstand-3); border-left: 0; border-bottom: 3px solid transparent; white-space: nowrap; }
  .seitennav li.aktiv a { border-bottom-color: var(--akzent); }
  /* R2 Tabellen ohne Scroll-Hülle selbst scrollbar machen */
  .inhalt table:not(.table-scroll table, .tabelle-scroll table) { display: block; overflow-x: auto; max-width: 100%; position: relative; }
  .inhalt pre, .inhalt code { overflow-wrap: anywhere; }
  .inhalt pre { overflow-x: auto; max-width: 100%; }
  .url-umbruch { max-width: 100%; }
  td.titel-spalte { min-width: 12rem; }
  /* R3 Kopfzeile kompakter */
  .kopf { gap: var(--abstand-2); }
  .schnellwahl { min-width: 0; }
  .kopfkarte dl { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .tabs, [role=tablist] { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
  .tabs a, .tabs span, [role=tab] { flex: none; white-space: nowrap; }
}
@media (max-width: 640px) {
  /* R4 kleine Kennzahl-Kacheln zweispaltig */
  .kpi-grid, .kpi-grid.vier, .kacheln:not(.zwei, .dash-zwei) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--abstand-2); }
  .kpi { padding: var(--abstand-3); }
  .kpi-zahl { font-size: 22px; }
  .inhalt h1 { font-size: 22px; overflow-wrap: anywhere; }
  /* R5 Filterfelder volle Breite, Knöpfe als Leiste */
  .list-filter > div, .filter > div { flex: 1 1 calc(50% - var(--abstand-3)); min-width: 0; }
  .list-filter input, .list-filter select, .filter input, .filter select { width: 100%; }
  .list-filter .actions { flex-basis: 100%; }
  .list-filter .actions > * { flex: 1; text-align: center; }
  .list-meta { flex-wrap: wrap; gap: var(--abstand-2); }
  /* F2 Inline-Formulare mit Textfeld auf Telefon als Block */
  form.inline:has(input:not([type=hidden], [type=checkbox], [type=radio])) { display: flex; flex-wrap: wrap; gap: var(--abstand-2); margin: var(--abstand-2) 0; flex: 1 1 100%; min-width: 0; }
  form.inline:has(input:not([type=hidden], [type=checkbox], [type=radio])) input:not([type=hidden]) { flex: 1 1 100%; min-width: 0; }
  form.inline-form select { min-width: 0; max-width: 100%; }
  /* R6 Touch-Ziele */
  button:not(.link), .button, input:not([type=checkbox], [type=radio]), select { min-height: 40px; }
  button, .button { white-space: normal; }
  [role=tab], .tabs a { padding: 9px var(--abstand-3); }
  .form-grid, .formular { grid-template-columns: minmax(0, 1fr); padding: var(--abstand-3); }
  .formular > div, .form-grid > div { min-width: 0; }
  dialog.dialog { max-width: calc(100vw - 24px); }
}
.filter > div.actions, .list-filter > div.actions { flex-direction: row; flex-wrap: wrap; gap: var(--abstand-2); align-items: center; min-width: 0; }
.form-field > span.hinweis, .formular > div > span.hinweis, .voll > span.hinweis { display: block; font-size: 12px; margin-top: var(--abstand-1); }
p.hinweis, .hinweis-mehr p { max-width: 90ch; }
dd:empty::before { content: "–"; color: var(--text-gedaempft); }
/* K12 zweite Tab-Ebene (Rekrutierung: Übersicht / Subjects / CSV-Import) */
nav.tabs-klein { display: flex; flex-wrap: wrap; gap: var(--abstand-1); margin: 0 0 var(--abstand-3); }
nav.tabs-klein a { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--rand); background: #fff; color: var(--text); text-decoration: none; font-size: 13px; }
nav.tabs-klein a:hover { border-color: var(--primaer); color: var(--primaer); }
nav.tabs-klein a[aria-current="page"] { background: var(--primaer); border-color: var(--primaer); color: #fff; }
/* K12 einheitliche Kacheln: Beschriftung immer über der Zahl (DOM-Reihenfolge bleibt) */
.kpi > .kpi-label { order: -1; }
td .aktionen > button, td .aktionen > .button { white-space: nowrap; }
.pflicht-marke { font-size: 12px; color: var(--rot-fg); }
td .aktionen { flex-direction: column; align-items: flex-start; gap: var(--abstand-1); }
tr > th + td:empty::before { content: "–"; color: var(--text-gedaempft); }

/* ---------- K13: change reason, read-only imported values, visit order ---------- */
fieldset.schreibschutz { display: contents; }
fieldset.schreibschutz input, fieldset.schreibschutz select, fieldset.schreibschutz textarea { background: var(--grau-bg, #f3f4f6); cursor: not-allowed; }
tr.zeile-warnung td { background: var(--gelb-bg); }

/* ---------- K14: multi-select list filters (checkbox drop-down) and active filter chips ---------- */
.mehrfach-filter { position: relative; }
.mehrfach-filter .filter-label { font-weight: 600; font-size: 12px; color: var(--text-gedaempft); }
.mehrfach-filter details > summary { list-style: none; cursor: pointer; min-height: 34px; padding: 6px 30px 6px 10px; border: 1px solid var(--rand); border-radius: var(--radius); background: #fff; position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.mehrfach-filter details > summary::-webkit-details-marker { display: none; }
.mehrfach-filter details > summary::after { content: "▾"; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--text-gedaempft); }
.mehrfach-filter details[open] > summary { border-color: var(--primaer); }
.mehrfach-filter details > summary:focus-visible { outline: 2px solid var(--primaer); outline-offset: 2px; }
.mehrfach-filter fieldset { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; min-width: 220px; max-height: 320px; overflow-y: auto; background: #fff; border: 1px solid var(--rand); border-radius: var(--radius); box-shadow: 0 6px 18px rgba(0,0,0,.12); padding: var(--abstand-2) var(--abstand-3); display: flex; flex-direction: column; gap: 2px; }
.mehrfach-filter fieldset label.inline { font-weight: 400; font-size: 14px; color: var(--text); display: flex; gap: 8px; align-items: center; padding: 4px 0; white-space: nowrap; }
.mehrfach-filter .mehrfach-aktionen { border-top: 1px solid var(--rand); margin-top: var(--abstand-1); padding-top: var(--abstand-2); }
.mehrfach-filter button.klein { min-height: 28px; padding: 3px 10px; font-size: 13px; }
.filter-chips { list-style: none; margin: 0 0 var(--abstand-3); padding: 0; display: flex; flex-wrap: wrap; gap: var(--abstand-2); align-items: center; }
.filter-chips li { display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px 2px 10px; border: 1px solid var(--rand); border-radius: 999px; background: var(--bg); font-size: 13px; }
.filter-chips li a { text-decoration: none; color: var(--text-gedaempft); padding: 0 6px; font-size: 15px; line-height: 1; }
.filter-chips li a:hover { color: var(--rot-fg); }
.filter-chips li:last-child { border: 0; background: none; padding-left: 0; }
.filter-chips li a.alle-zuruecksetzen { font-size: 13px; color: var(--primaer); text-decoration: underline; }
.list-filter .mehrfach-filter input[type=checkbox] { width: auto; flex: 0 0 auto; margin: 0; }
@media (max-width: 640px) {
  .mehrfach-filter details > summary { max-width: none; }
  .mehrfach-filter fieldset { min-width: 100%; max-width: calc(100vw - 32px); }
}

/* ---------- K14: header quick selection shows "Nr. · Auftraggeber" ---------- */
.schnellwahl input[data-schnellwahl] { text-overflow: ellipsis; }
.lookup-results li .treffer-unterzeile { display: block; font-size: 12px; color: var(--text-gedaempft); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lookup-results li strong { font-weight: 600; }
.schnellwahl .lookup-results { min-width: 100%; width: max-content; max-width: min(520px, calc(100vw - 32px)); }
/* ---------- K15: tab "Datenmanagement" ---------- */
.dm-stufen { width: 100%; border: 0; }
.dm-stufen th { text-align: left; font-weight: 500; white-space: nowrap; }
.dm-stufen td, .dm-stufen th { border: 0; padding: 4px 8px 4px 0; }
.dm-balken-zelle { width: 45%; }
.dm-balken-zelle progress { width: 100%; height: 10px; }
.dm-zentren .hinweis { display: block; font-size: 12px; }
.dm-zentren td:first-child { white-space: nowrap; }