/* Gemeinsame visuelle Regeln der Verwaltung. Fachliche Zustände bleiben in app.js. */
.admin-ui { font-size: var(--fs-base); line-height: var(--lh); }
.admin-ui .app { grid-template-columns: 248px minmax(0,1fr); }
.admin-ui .sidebar { padding: 22px 14px; scrollbar-width: thin; }
.admin-ui .brand { align-items: flex-start; gap: 2px; padding: 0 4px 22px; }
.admin-ui .brand b { font-size: 20px; letter-spacing: -.6px; }
.admin-ui .brand span { font-size: 12px; }
.mobil-menue { display: none; }
.richtlinien-hinweise { padding: 14px 18px; border-bottom: 1px solid var(--line-2); }
.richtlinien-hinweise summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.richtlinien-hinweise p { max-width: 85ch; color: var(--ink-2); line-height: 1.7; }
.nav-suche { padding: 0 4px 18px; }
.nav-suche input { width: 100%; min-width: 0; padding: 9px 10px; }
.nav-bereich { border-bottom: 1px solid var(--line-2); padding: 6px 0 10px; }
.nav-bereich summary { cursor: pointer; padding: 10px 8px; color: var(--ink-2); font-weight: 650; font-size: 12px; letter-spacing: .03em; }
.bereich-count { float: right; background: var(--warn-bg); color: var(--warn); border-radius: 20px; padding: 0 7px; }
.admin-ui .nav a { min-height: 38px; margin: 2px 0; padding: 8px 12px; font-size: 14px; }
.admin-ui .nav a.active { box-shadow: inset 3px 0 var(--accent); }
.admin-ui .topbar { gap: 12px; padding: 14px 28px; flex-wrap: wrap; }
.admin-ui .topbar input[type=search] { min-width: 180px; padding: 10px 12px; max-width: 560px; }
.orientierung { display: flex; gap: 9px; padding: 20px 30px 0; font-size: 12px; color: var(--ink-3); }
.orientierung strong { font-weight: 600; color: var(--ink-2); }
.admin-ui .content { padding: 18px 30px 40px; max-width: 1720px; }
.admin-ui h1 { font-size: 27px; line-height: 1.2; letter-spacing: -.6px; margin-bottom: 9px; }
.admin-ui h2 { font-size: 18px; }
.admin-ui .lede { font-size: 14px; line-height: 1.6; }
.admin-ui .panel { margin-top: 20px; overflow-x: auto; }
.admin-ui .panel > header { padding: 15px 18px; flex-wrap: wrap; }
.admin-ui .panel > header h2, .admin-ui .panel > header h3 { font-size: 15px; }
.admin-ui .panel .body { padding: 18px; }
.admin-ui .card { padding: 18px; box-shadow: none; }
.admin-ui .card .v { font-size: 30px; }
.admin-ui table { font-size: 14px; }
.admin-ui th { font-size: 11px; padding: 12px 14px; }
.admin-ui td { padding: 12px 14px; line-height: 1.5; }
.admin-ui td .btn, .admin-ui td button { white-space: nowrap; }
.admin-ui .tabs { overflow-x: auto; scrollbar-width: thin; padding-bottom: 3px; max-width: 100%; }
.admin-ui .tabs button { flex-shrink: 0; white-space: nowrap; padding: 12px 14px; font-size: 14px; }
.admin-ui .tabs button.active { background: var(--accent-2); border-radius: 7px 7px 0 0; }
.admin-ui .note { line-height: 1.6; padding: 13px 16px; }
.admin-ui button, .admin-ui .btn { min-height: 34px; }
.admin-ui :is(button,a,input,select,summary,textarea,[tabindex]):focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.admin-ui dialog { border-radius: 16px; max-height: calc(100dvh - 48px); padding: 0; overflow: hidden; }
.admin-ui dialog[open] { display: flex; flex-direction: column; }
.admin-ui dialog > header { flex-shrink: 0; font-size: 18px; padding: 20px 24px; }
.admin-ui dialog > .body { min-height: 0; overflow: auto; padding: 22px 24px; }
.admin-ui dialog > footer { flex-shrink: 0; padding: 16px 24px; background: var(--panel-2); }
.admin-ui .ablaufkarte { border-radius: 12px; }
@media(max-width: 1100px) {
 .admin-ui .app { grid-template-columns: 210px minmax(0,1fr); }
 .admin-ui .sidebar { position: sticky; top: 0; height: 100vh; flex-direction: column; overflow-y: auto; }
 .admin-ui .nav { display: block; }
 .admin-ui .content { padding: 16px 20px 32px; }
 .orientierung { padding-left: 20px; }
 .admin-ui .topbar { padding: 12px 20px; }
 .admin-ui .topbar .who { display: none; }
}
@media(max-width: 700px) {
 .admin-ui .app { grid-template-columns: minmax(0,1fr); }
 .admin-ui .sidebar { position: relative; height: auto; padding: 14px; }
 .admin-ui .brand { flex-direction: row; align-items: baseline; gap: 10px; padding-bottom: 12px; }
 .admin-ui .mobil-menue { display: block; margin-left: auto; }
 .admin-ui .sidebar .nav, .admin-ui .sidebar .nav-suche { display: none; }
 .admin-ui .menue-offen .sidebar .nav, .admin-ui .menue-offen .sidebar .nav-suche { display: block; }
 .admin-ui .nav-suche { padding-bottom: 4px; }
 .admin-ui .content { padding: 16px 14px 30px; }
 /* Ältere Tabellen ohne eigenen Scrollbereich scrollen in sich statt die Seite zu verbreitern (Dok. 113, Kriterium 2). */
 .admin-ui .content table:not(.datentabelle):not(.mini) { display: block; overflow-x: auto; max-width: 100%; }
 .admin-ui .topbar { position: static; padding: 12px 14px; }
 .admin-ui .topbar .mandant { max-width: 100%; }
 .admin-ui .topbar select { max-width: 100%; }
 .admin-ui h1 { font-size: 23px; }
 .admin-ui dialog { max-width: calc(100vw - 20px); max-height: calc(100dvh - 20px); }
}
.erfassung-wege { display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:24px; margin-bottom:20px; }
.erfassung-wege section { padding:18px; background:var(--panel-2); border:1px solid var(--line); border-radius:12px; }
.erfassung-wege h3 { margin-top:0; }
.erfassung-wege input { display:block; max-width:100%; margin:12px 0; }
@media(max-width:800px){.erfassung-wege {grid-template-columns:1fr;}}
.vorlagen-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;margin:20px 0}.vorlage-card{border:1px solid #456070;border-radius:14px;overflow:hidden;display:flex;flex-direction:column}.vorlage-inhalt{padding:18px;display:flex;flex-direction:column;gap:10px;flex:1}.vorlage-inhalt h3,.vorlage-inhalt p{margin:0}.vorlage-inhalt>p{font-size:13px;line-height:1.55}.vorlage-inhalt button{margin-top:auto;align-self:flex-start}.vorlage-bild{height:144px;position:relative;background:linear-gradient(135deg,#163d58,#168d99);display:grid;place-items:center;overflow:hidden}.vorlage-bild>span{position:absolute;bottom:8px;right:12px;font-size:10px;letter-spacing:2px;color:#d7ffff}.vorlage-screen{width:168px;height:100px;background:#c7e0f0;border:5px solid #0c2437;border-radius:6px;position:relative}.vorlage-window{position:absolute;left:15px;top:12px;width:85px;height:57px;background:#f5fbff;border-radius:4px;padding:10px}.vorlage-window i{display:block;height:5px;background:#91c9de;margin:5px 0}.vorlage-taskbar{position:absolute;bottom:0;left:0;right:0;height:17px;background:#153147;display:flex;gap:5px;justify-content:center;align-items:center}.vorlage-taskbar i{width:9px;height:9px;background:#43c9dc;border-radius:2px}.wallpaper .vorlage-screen{background:linear-gradient(155deg,#ffc776 10%,#429baf 48%,#224273 49%)}.wallpaper .vorlage-window{display:none}.theme .vorlage-screen{background:linear-gradient(90deg,#e7edf2 50%,#18283b 50%)}.theme .vorlage-window{background:#354d68}.power-symbol{font-size:86px;color:#91f5c1;line-height:1}.shield-symbol{font-size:48px;color:white;border:4px solid #76e3c3;border-radius:24px 24px 44px 44px;width:78px;height:86px;text-align:center}.cis-bezug{color:#819eae}@media(max-width:600px){.vorlagen-grid{grid-template-columns:1fr}}

/* Kompakter Themenbaum: Inhalte erst im Vorlageneditor. */
.vorlagen-baum{margin-top:14px;border:1px solid var(--line-2);border-radius:10px;overflow:hidden}
.vorlagen-zweig+.vorlagen-zweig{border-top:1px solid var(--line-2)}
.vorlagen-zweig>summary{cursor:pointer;padding:13px 16px;font-weight:650;color:var(--ink);list-style-position:inside}
.vorlagen-zweig>summary:hover,.vorlagen-eintrag:hover{background:var(--accent-soft,rgba(60,170,210,.1))}
.vorlagen-zweigtitel{margin-left:8px}.vorlagen-anzahl{float:right;color:var(--ink-2);font-size:12px;font-weight:400}
.vorlagen-ast{margin:0 20px 14px 25px;border-left:1px solid var(--line-2);padding-left:18px}
.vorlagen-bereich{font-size:12px;color:var(--ink-2);padding:5px 0;font-weight:600}
.vorlagen-ast ul{list-style:none;margin:0;padding:0}.vorlagen-ast li{margin:0}
.vorlagen-eintrag{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;padding:9px 12px;border:0;background:transparent;white-space:normal;color:var(--ink);font-weight:400;border-radius:5px}
.vorlagen-eintrag>span{overflow-wrap:anywhere}.vorlagen-eintrag small{flex-shrink:0}
.vorlagen-werkzeuge{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:12px}.vorlagen-werkzeuge button{margin-left:6px;font-size:12px}
.vorlagen-filter{display:flex;flex-wrap:wrap;gap:10px}.vorlagen-filter input{flex:1;min-width:180px}.vorlagen-filter select{max-width:100%}
.vorlagen-leer{padding:18px}.vorlagen-zweig summary:focus-visible,.vorlagen-eintrag:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
@media(max-width:600px){.vorlagen-filter>*{width:100%}.vorlagen-ast{margin-left:14px;margin-right:8px;padding-left:10px}.vorlagen-eintrag{align-items:flex-start;flex-direction:column;gap:2px}.vorlagen-werkzeuge button{margin:0 6px 0 0}}
/* ------------------------------------------------------- Laufende Rollouts --
   Eine Karte je Gerät statt einer Tabellenzeile: der Fortschrittsbalken ist
   das, was man aus zwei Metern Entfernung liest, und in einer Tabellenzelle
   ist er nicht mehr lesbar. Die Kante links trägt den Ton — sichtbar auch
   dann, wenn jemand nur überfliegt. */
.rollout-panel .body { display: flex; flex-direction: column; gap: 16px; }
.rollout-panel header .sub { font-variant-numeric: tabular-nums; }
.rollout-liste { display: flex; flex-direction: column; gap: 10px; }
.rollout-abschnitt { display: flex; flex-direction: column; gap: 10px; }
.rollout-abschnitt h3 { margin: 6px 0 0; font-size: 14px; color: var(--ink-2); }

.rollout-karte {
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--panel-2);
}
.rollout-karte.ton-ok { border-left-color: var(--ok); }
.rollout-karte.ton-warn { border-left-color: var(--warn); }
.rollout-karte.ton-bad { border-left-color: var(--bad); }
.rollout-karte > summary {
  cursor: pointer; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px;
  list-style-position: inside;
}
.rollout-karte > summary::-webkit-details-marker { display: none; }
.rollout-karte > summary:hover { background: var(--line-2); }
.rollout-karte > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.rollout-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rollout-kopf .spacer { flex: 1; }
.rollout-wer { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rollout-wer .seriennummer { font-size: 15px; font-weight: 650; }
.rollout-wer .sub { font-size: 12px; color: var(--ink-3); }

/* Der Balken wandert, statt zu springen: ein Sprung liest sich wie ein
   Neuladen, eine Bewegung wie Fortschritt. */
.rollout-karte .bahn .stueck { transition: width .6s ease; }
@media (prefers-reduced-motion: reduce) {
  .rollout-karte .bahn .stueck { transition: none; }
}

.rollout-tiefer {
  padding: 4px 14px 14px; display: flex; flex-direction: column; gap: 9px;
  border-top: 1px solid var(--line-2);
}
.rollout-zeile {
  display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 4px 10px;
  align-items: baseline; font-size: 13px;
}
.rollout-zeile .k {
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-3); font-weight: 600;
}
.rollout-satz { font-size: 13px; color: var(--ink-2); }
.rollout-agent { display: flex; flex-direction: column; gap: 6px; }
.rollout-agent .k {
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-3); font-weight: 600;
}

@media (max-width: 720px) {
  .rollout-zeile { grid-template-columns: auto 1fr; }
}

/* Seit dem letzten Abruf dazugekommen. Eine Runde lang markiert: bei 200
   Zeilen ist sonst nicht zu sehen, was neu ist - und genau das ist die Frage,
   wegen der jemand die Liste offen haelt. */
.zeile-neu > td { background: var(--ok-bg); }
.zeile-neu > td:first-child { box-shadow: inset 3px 0 0 var(--ok); }

/* ========================================================== G1 24.09.2026 ==
   Professionelle Arbeitsoberfläche (Dokument 113): helle Arbeitsfläche,
   dunkelblaue Navigation, zurückhaltender Türkis-Akzent, klare
   Tabellenlinien. Alle Werte aus /shared/tokens.css. */

.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; }

/* ---- Navigation: dunkelblau ---- */
.admin-ui .sidebar { background: var(--nav-grad); border-right: 1px solid var(--nav-line); color: var(--nav-ink); box-shadow: 1px 0 0 rgba(255,255,255,.03) inset; }
.admin-ui .brand b { color: var(--nav-ink-strong); }
.admin-ui .brand span { color: var(--nav-ink-3); }
.admin-ui .nav-suche input { background: rgba(255,255,255,.06); border-color: var(--nav-line); color: var(--nav-ink-strong); border-radius: 999px; padding-left: 14px; }
.admin-ui .nav-suche input:focus { background: rgba(255,255,255,.1); border-color: var(--nav-accent); box-shadow: 0 0 0 4px rgba(79,209,197,.2); }
.admin-ui .nav-suche input::placeholder { color: var(--nav-ink-3); }
.admin-ui .nav-bereich { border-bottom-color: transparent; padding: 3px 0 5px; }
.admin-ui .nav-bereich + .nav-bereich { border-top: 1px solid var(--nav-line); }
.admin-ui .nav-bereich summary { display: flex; align-items: center; gap: 9px; color: var(--nav-ink); font-size: 12.5px; letter-spacing: .02em; list-style: none; border-radius: var(--radius-sm); }
.admin-ui .nav-bereich summary::-webkit-details-marker { display: none; }
.admin-ui .nav-bereich summary::after { content: ""; margin-left: auto; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); opacity: .7; }
.admin-ui .nav-bereich[open] > summary::after { transform: rotate(45deg); }
.admin-ui .nav-bereich summary { transition: background-color var(--dauer) var(--ease), color var(--dauer) var(--ease); }
.admin-ui .nav-bereich summary:hover { color: var(--nav-ink-strong); background: rgba(255,255,255,.06); }
.admin-ui .nav-bereich summary .icon { color: var(--nav-accent); flex: none; padding: 5px; box-sizing: content-box; margin: -5px -3px -5px -5px; border-radius: 9px; background: rgba(79,209,197,.12); }
.admin-ui .bereich-count { order: 2; margin-left: 4px; background: var(--nav-accent); color: var(--nav-bg); font-weight: 700; font-size: 11px; }
.admin-ui .nav a { position: relative; color: var(--nav-ink); padding-left: 37px; min-height: 34px; font-size: 13.5px; border-radius: 9px; }
.admin-ui .nav a:hover { background: rgba(255,255,255,.07); color: var(--nav-ink-strong); }
.admin-ui .nav a.active { background: linear-gradient(90deg, rgba(79,209,197,.20), rgba(79,209,197,.05)); color: var(--nav-ink-strong); box-shadow: none; font-weight: 650; }
.admin-ui .nav a.active::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--nav-accent); box-shadow: 0 0 12px var(--nav-accent); }
.admin-ui .nav .count { background: var(--nav-accent); color: var(--nav-bg); }
.admin-ui .nav a.active .count { background: var(--nav-accent); }
.admin-ui .sidebar :is(a,button,input,summary):focus-visible { outline-color: var(--nav-accent); }
.admin-ui .mobil-menue { display: none; background: var(--nav-bg-2); color: var(--nav-ink-strong); border-color: var(--nav-line); }
.orientierung[hidden] { display: none; }
.admin-ui .topbar input[type=search] { flex: 1 1 220px; }
.admin-ui .topbar .mandant { flex: 0 1 230px; margin-left: 0; }
.admin-ui .topbar .mandant select { width: 100%; }

/* ---- Kopfzeile ---- */
.admin-ui .topbar { border-bottom: 1px solid var(--line); padding: 10px 28px; }
.admin-ui .topbar input[type=search] { background: var(--panel-2); }
.admin-ui button, .admin-ui .btn { display: inline-flex; align-items: center; gap: 6px; }
.admin-ui button.primary, .admin-ui .btn.primary { color: var(--accent-ink); }
.admin-ui .sidebar button { box-shadow: none; }
.admin-ui a.btn:hover { text-decoration: none; }
.admin-ui .content { padding: 20px 28px 48px; }

/* ---- Seitenkopf mit Kontextpfad und Hauptaktion ---- */
.seitenkopf, .aktenkopf { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.brotkrumen ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); color: var(--ink-3); }
.brotkrumen li + li::before { content: "/"; margin-right: 6px; color: var(--line-strong); }
.brotkrumen a { color: var(--ink-2); }
.brotkrumen [aria-current] { color: var(--ink); font-weight: 600; }
.seitenkopf-zeile, .aktenkopf-zeile { display: flex; align-items: flex-start; gap: var(--space-4); flex-wrap: wrap; }
.seitenkopf-titel { flex: 1; min-width: 240px; }
.admin-ui .seitenkopf h1, .admin-ui .aktenkopf h1 { font-size: var(--fs-xl); margin: 0; letter-spacing: -.025em; font-weight: 700; }
.seitenkopf-unter, .aktenkopf-unter { margin: 4px 0 0; color: var(--ink-3); font-size: var(--fs-sm); max-width: 90ch; }
.seitenkopf-aktionen { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; margin-left: auto; }
.seitenkopf-kontext { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; font-size: var(--fs-sm); }
.seitenkopf-kontext > div { display: flex; align-items: center; gap: 8px; }
.seitenkopf-kontext dt { color: var(--ink-3); }
.seitenkopf-kontext dd { margin: 0; color: var(--ink); font-weight: 600; }
.seitenkopf-kontext select { width: auto; padding: 3px 8px; }

/* ---- Kennzahlenzeile: kompakt, eine Zeile ---- */
.kennzahlzeile { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin: 0 0 var(--space-4);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.kennzahlzeile .kz { display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; border-right: 1px solid var(--line-2);
  color: inherit; text-decoration: none; border-top: 3px solid transparent;
  transition: background-color var(--dauer) var(--ease); }
.kennzahlzeile .kz:last-child { border-right: none; }
.kennzahlzeile a.kz:hover { background: var(--panel-2); text-decoration: none; }
.kennzahlzeile dt { font-size: var(--fs-xs); color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.kennzahlzeile dd { margin: 0; display: flex; flex-direction: column; gap: 2px; }
/* Glocke mit Zahl offener Befunde (Vorbild PowerTerm) */
.glocke { position: relative; display: inline-grid; place-items: center; width: 38px; height: 34px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--panel); color: var(--ink-2); box-shadow: var(--shadow-sm); transition: background-color var(--dauer) var(--ease), border-color var(--dauer) var(--ease); }
.glocke:hover { background: var(--panel-2); border-color: var(--line-strong); text-decoration: none; }
.glocke-zahl { position: absolute; top: -8px; right: -8px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center;
  background: #c62828; color: #fff; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--panel); }
.kennzahlzeile .kz { position: relative; }
.kennzahlzeile .kz dt { padding-right: 42px; }
.kz-chip { position: absolute; top: 12px; right: 14px; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: var(--accent-2); color: var(--accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent); }
.kz.ton-ok .kz-chip { background: var(--ok-bg); color: var(--ok); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 18%, transparent); }
.kz.ton-warn .kz-chip { background: var(--warn-bg); color: var(--warn); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 20%, transparent); }
.kz.ton-bad .kz-chip { background: var(--bad-bg); color: var(--bad); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bad) 20%, transparent); }
.kz-wert { font-family: var(--font-display); font-size: 28px; font-weight: 680; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--ink); line-height: 1.2; }
.kz-wert.ungemessen { font-size: 16px; font-weight: 600; color: var(--ink-3); font-style: italic; padding: 4px 0; }
.kz-unter { font-size: var(--fs-xs); color: var(--ink-3); }
.kz.ton-ok { border-top-color: var(--ok); background: linear-gradient(180deg, var(--ok-bg), transparent 70%); }
.kz.ton-warn { border-top-color: var(--warn); background: linear-gradient(180deg, var(--warn-bg), transparent 70%); }
.kz.ton-bad { border-top-color: var(--bad); background: linear-gradient(180deg, var(--bad-bg), transparent 70%); }

/* ---- Status: Icon + Text + Zeitbezug ---- */
.status { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 600; line-height: 1.3; color: var(--idle); }
.status .icon { flex: none; }
.status-text { white-space: nowrap; }
.status-zeit { font-weight: 400; color: var(--ink-3); white-space: nowrap; }
.status-zeit::before { content: "· "; }
.status-ok { color: var(--ok); } .status-warn { color: var(--warn); } .status-bad { color: var(--bad); }
.status-info { color: var(--info); } .status-idle { color: var(--idle); }

/* ---- Lade-, Leer-, Fehler-, Berechtigungszustand ---- */
.zustandsbox { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); color: var(--ink-2); }
.zustandsbox.kompakt { padding: var(--space-3) var(--space-4); }
.zustandsbox p { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--ink-3); max-width: 80ch; }
.zustandsbox > button { margin-left: auto; }
.zustandsbox .icon { flex: none; margin-top: 2px; color: var(--ink-3); }
.zb-fehler { background: var(--bad-bg); border-left: 3px solid var(--bad); }
.zb-fehler .icon, .zb-fehler b { color: var(--bad); }
.zb-berechtigung { background: var(--warn-bg); border-left: 3px solid var(--warn); }
.zb-berechtigung .icon, .zb-berechtigung b { color: var(--warn); }

/* ---- Filterleiste ---- */
.filterleiste { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; }
.filterfeld { display: flex; flex-direction: column; gap: 3px; min-width: 150px; flex: 0 1 200px; }
.filterfeld.breit { flex: 1 1 280px; }
.filterfeld label { margin: 0; font-weight: 600; color: var(--ink-2); font-size: var(--fs-xs); }
.admin-ui .filterleiste :is(input, select) { min-height: var(--control-h); }

/* ---- Datentabelle ---- */
.arbeitsflaeche > .body { border-bottom: 1px solid var(--line); background: var(--panel-2); }
.tabellenkopf { display: flex; align-items: center; gap: var(--space-3); padding: 10px 16px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.tabellenkopf h2 { margin: 0; font-size: var(--fs-md); }
.tabellenwerkzeug { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.tabellenbereich { overflow-x: auto; max-width: 100%; }
.tabellenbereich:focus-visible { outline-offset: -3px; }
.datentabelle { border-collapse: separate; border-spacing: 0; }
.admin-ui .datentabelle th { background: var(--panel-2); color: var(--ink-3); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 1; }
.admin-ui .datentabelle td { border-bottom: 1px solid var(--line-2); vertical-align: middle; padding: var(--row-y) var(--row-x); }
.datentabelle tr.klickbar { cursor: pointer; }
.datentabelle tbody tr:hover { background: color-mix(in srgb, var(--accent-2) 70%, transparent); }
.datentabelle .zeilenlink { color: inherit; display: block; }
.datentabelle .zeilenlink:hover { text-decoration: none; }
.datentabelle .zeilenlink .mono { color: var(--accent); font-weight: 600; }
.sortkopf { all: unset; cursor: pointer; display: inline-flex; gap: 4px; align-items: center; font: inherit; text-transform: inherit; letter-spacing: inherit; }
.sortkopf:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.sortzeichen { color: var(--ink-3); font-size: 10px; }
th[aria-sort="ascending"] .sortzeichen, th[aria-sort="descending"] .sortzeichen { color: var(--accent); }
tr.zeile-markiert > td { background: var(--warn-bg); }
tr.zeile-markiert > td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.paginierung { display: flex; align-items: center; gap: var(--space-2); justify-content: flex-end; padding: 10px 16px; flex-wrap: wrap; border-top: 1px solid var(--line); }
.paginierung-text { margin-right: auto; color: var(--ink-3); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.paginierung select { width: auto; }
.spaltenwahl { position: relative; }
.spaltenwahl > summary { list-style: none; }
.spaltenwahl > summary::-webkit-details-marker { display: none; }
.spaltenwahl fieldset { position: absolute; right: 0; top: calc(100% + 4px); z-index: 10; min-width: 220px; margin: 0;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-3); box-shadow: var(--shadow); }
.spaltenwahl label.check { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: var(--fs-sm); margin: 4px 0; }
.spaltenwahl input[type=checkbox] { width: auto; }
.zahl-link { font-weight: 700; }

/* ---- Detailpanel ---- */
.detailpanel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.detailpanel > header { display: flex; align-items: center; gap: var(--space-2); padding: 12px 16px; border-bottom: 1px solid var(--line); }
.detailpanel > header h2 { margin: 0; font-size: var(--fs-md); flex: 1; }
.detailpanel-inhalt { padding: var(--space-4); }

/* ---- Geräteakte: fester Kopf ---- */
.geraeteakte .aktenkopf { position: sticky; top: 58px; z-index: 4; background: var(--bg); padding: 10px 0 12px;
  border-bottom: 1px solid var(--line); margin: -8px 0 12px; }
.aktenkopf-fakten { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--space-2) var(--space-5); margin: 0; }
.aktenkopf-fakten dt { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); font-weight: 600; }
.aktenkopf-fakten dd { margin: 2px 0 0; }
.aktenkopf-fakten dd.sub { font-size: var(--fs-xs); color: var(--ink-3); }
.admin-ui .geraeteakte .tabs { margin-bottom: var(--space-3); }
.admin-ui .tabs button.active { background: transparent; color: var(--accent); border-bottom-color: var(--accent); }
.admin-ui .tabs button[role=tab] { border-radius: 0; }
.soll-ist-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
.soll-ist-raster > * { margin-top: 0 !important; min-width: 0; }
@media (max-width: 1200px) { .soll-ist-raster { grid-template-columns: 1fr; } }
.body-hinweis { padding: 0 18px 12px; margin: 0; max-width: none; }
.beleglink { white-space: nowrap; font-weight: 600; }

/* ---- Übersicht ---- */
.panel + .kennzahlzeile, .kennzahlzeile + .panel { margin-top: var(--space-4); }
.kompaktzeile { margin: var(--space-3) 0; padding: 11px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink-2); font-size: var(--fs-sm); box-shadow: var(--shadow-sm); }
ul.wartend { list-style: none; margin: 0; padding: 6px 16px; display: flex; flex-wrap: wrap; gap: 4px 24px; }
ul.wartend li { padding: 6px 0; }
.admin-ui .note { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

@media (max-width: 700px) {
  .admin-ui .mobil-menue { display: inline-flex; margin-left: auto; }
  .admin-ui .kennzahlzeile { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-ui .kennzahlzeile .kz { min-width: 0; border-bottom: 1px solid var(--line); }
  .admin-ui .kennzahlzeile .kz:last-child:nth-child(odd) { grid-column: 1 / -1; border-bottom: 0; }
  .geraeteakte .aktenkopf { position: static; }
  .seitenkopf-aktionen { margin-left: 0; }
  .sr-kompakt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* ================================================= G3 Verwaltung ===
   Gruppen, Softwarekatalog, Paketablauf, Richtlinien, Updates. Nur Tokens. */
.zweispaltig { display: grid; grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.zweispaltig > * { min-width: 0; margin-top: 0 !important; }
.gruppenliste { position: sticky; top: 70px; }
.gruppenliste-eintraege { list-style: none; margin: 0; padding: var(--space-2); display: flex; flex-direction: column; gap: 2px; }
.gruppenliste-eintraege a { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--space-2); padding: 10px 12px; border-radius: var(--radius-sm);
  color: var(--ink); text-decoration: none; border-left: 3px solid transparent; }
.gruppenliste-eintraege a:hover { background: var(--panel-2); }
.gruppenliste-eintraege a.aktiv { background: var(--accent-2); border-left-color: var(--accent); }
.gl-name { font-weight: 600; }
.gl-fakten { grid-column: 1 / -1; font-size: var(--fs-xs); color: var(--ink-3); }
.tag-dynamisch { background: var(--info-bg); color: var(--info); }
.gruppendetail { display: flex; flex-direction: column; gap: var(--space-4); }
.gruppendetail > .panel { margin: 0; }
.gruppenkopf h2.gruppenname { font-size: var(--fs-lg); margin: 0; display: flex; gap: 8px; align-items: center; }
.gruppenkopf .aktenkopf-fakten { margin: var(--space-3) 0; }
.gruppen-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.gruppen-raster > .panel { margin: 0; }
.regelanzeige ul { margin: 6px 0 12px; padding-left: 20px; }
.regel-ausnahmen { display: grid; grid-template-columns: minmax(140px, 30%) 1fr; gap: 6px 12px; margin: 0 0 8px; font-size: var(--fs-sm); }
.regel-ausnahmen dt { color: var(--ink-3); } .regel-ausnahmen dd { margin: 0; }
.konfliktliste { list-style: none; margin: 0; padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.konfliktliste .hinweis { margin: 2px 0 0; }
.gruppen-chips { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }

/* Arbeitsseite für mehrstufige Eingriffe */
.arbeitsseite { display: flex; flex-direction: column; gap: var(--space-4); max-width: 1400px; }
.arbeitsseite > .panel { margin: 0; }
.arbeitsseite-fuss { display: flex; gap: var(--space-2); justify-content: flex-end; align-items: center; margin-top: var(--space-4); flex-wrap: wrap; }
.schrittleiste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); counter-reset: none; }
.schritt { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel); color: var(--ink-3); font-size: var(--fs-sm); }
.schritt-nr { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--idle-bg); color: var(--ink-2); font-weight: 700; font-size: 12px; }
.schritt-aktiv { border-color: var(--accent); color: var(--ink); font-weight: 600; }
.schritt-aktiv .schritt-nr { background: var(--accent); color: var(--accent-ink); }
.schritt-erledigt { color: var(--ok); }
.schritt-erledigt .schritt-nr { background: var(--ok-bg); color: var(--ok); }
.regelblock { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-3) var(--space-4); margin: var(--space-3) 0; }
.regelblock legend { font-weight: 650; padding: 0 6px; }
.verknuepfung { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-bottom: var(--space-2); }
.admin-ui label.check, label.check { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--ink); margin: 0; }
label.check input { width: auto; }
.kriterium { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(130px, 1fr) minmax(160px, 2fr) auto; gap: var(--space-2); margin: var(--space-2) 0; align-items: center; }

/* Katalog */
.mit-monogramm { display: flex; gap: 10px; align-items: center; }
.monogramm { flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; font-weight: 700; font-size: 12px;
  letter-spacing: .02em; background: var(--accent-2); color: var(--accent); }
.monogramm.mono-1 { background: var(--info-bg); color: var(--info); }
.monogramm.mono-2 { background: var(--ok-bg); color: var(--ok); }
.monogramm.mono-3 { background: var(--warn-bg); color: var(--warn); }
.monogramm.mono-4 { background: var(--idle-bg); color: var(--ink-2); }
.monogramm.mono-5 { background: var(--bad-bg); color: var(--bad); }
.zeilenaktionen { display: flex; gap: 6px; flex-wrap: nowrap; align-items: center; }
.verteilung .status-text { white-space: normal; }
.paketschritt > header .status { margin-left: auto; }
.kontextwahl { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-2) var(--space-4); margin: 0 0 var(--space-3); }
.kontextwahl legend { font-weight: 650; padding: 0 6px; }
.kontextwahl p { margin: 6px 0; }
.pilotformular { margin-top: var(--space-3); border-top: 1px solid var(--line); padding-top: var(--space-3); }
.pilotformular > summary { cursor: pointer; font-weight: 600; color: var(--accent); }
pre.klein, .mono.klein { font-size: var(--fs-xs); }
pre.klein { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--space-2); overflow-x: auto; max-height: 240px; }
.vorlagenblock > summary { cursor: pointer; padding: 12px 16px; list-style: none; }
.vorlagenblock > summary h2 { display: inline; font-size: var(--fs-md); margin: 0; }
.vorlagenblock > summary::before { content: "▸ "; color: var(--ink-3); }
.vorlagenblock[open] > summary::before { content: "▾ "; }
.admin-ui .content > .detailpanel, .admin-ui .content > div > .detailpanel { margin: 0 0 var(--space-4); }
.detailpanel h3 { font-size: var(--fs-md); margin: var(--space-3) 0 var(--space-2); }

@media (max-width: 1100px) {
  .zweispaltig, .gruppen-raster { grid-template-columns: 1fr; }
  .gruppenliste { position: static; }
}
@media (max-width: 700px) {
  .kriterium { grid-template-columns: 1fr; }
}
.nowrap { white-space: nowrap; }

/* ---- G4: Werkstatt, Vorgang, Nachweise, Befunde (nur Tokens) ---- */
.vorgangskontext { position: sticky; top: 58px; z-index: 3; background: var(--panel); border: 1px solid var(--line);
  border-left: 4px solid var(--accent); border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px 16px; margin: 0 0 var(--space-3); }
.vorgangskontext dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--space-2) var(--space-5); margin: 0; }
.vorgangskontext dt { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); font-weight: 600; }
.vorgangskontext dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.vorgangskontext dd .sub { display: block; font-weight: 400; }
.aufnahme .vorgangskontext { position: static; margin-top: var(--space-3); }
.phasenleiste { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.phase { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); color: var(--ink-2); min-width: 0; }
.phase-nr { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--idle-bg);
  color: var(--ink-2); font-weight: 700; font-size: 13px; }
.phase-text { display: flex; flex-direction: column; min-width: 0; }
.phase-zustand { font-size: var(--fs-sm); }
.phase-erledigt { color: var(--ok); border-color: var(--ok); }
.phase-erledigt .phase-nr { background: var(--ok-bg); color: var(--ok); }
.phase-aktiv { border: 2px solid var(--accent); color: var(--ink); }
.phase-aktiv .phase-nr { background: var(--accent); color: var(--accent-ink); }
.phase-fehler { border: 2px solid var(--bad); color: var(--bad); background: var(--bad-bg); }
.phase-fehler .phase-nr { background: var(--bad); color: var(--panel); }
.phase-abgebrochen { border-style: dashed; }
.nachweis-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.nachweis-raster > .panel { margin: 0; }
.nachweisliste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.nachweisliste li { display: flex; flex-direction: column; gap: 2px; }
.liste-mit-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); gap: var(--space-4); align-items: start; }
.liste-mit-detail > * { min-width: 0; margin-top: 0 !important; }
.befund-detail:empty { display: none; }
.liste-mit-detail:has(.befund-detail:empty) { grid-template-columns: minmax(0, 1fr); }
.befund-detail .detailpanel { position: sticky; top: 70px; max-height: calc(100vh - 90px); overflow: auto; }
.befund-detail h3 { font-size: var(--fs-md); margin: var(--space-4) 0 var(--space-2); }
.datentabelle tr[aria-selected="true"] > td { background: var(--accent-2); }
.datentabelle tr.schwer-bad > td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
.freigabeliste { display: grid; gap: var(--space-3); padding: var(--space-3) var(--space-4) var(--space-4); }
.freigabekarte { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-3) var(--space-4); background: var(--panel-2); }
.freigabekarte > header { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between; align-items: flex-start; }
.freigabekarte h3 { margin: 0; font-size: var(--fs-lg); }
.freigabe-status { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.freigabekarte .tags { list-style: none; padding: 0; margin: var(--space-2) 0; }
.freigabe-felder { margin-top: var(--space-3); align-items: flex-end; }
.aufnahme-raster { display: grid; grid-template-columns: minmax(260px, 360px) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.aufnahme-raster > .panel { margin-top: 0; }
.codefeld { font-size: 20px; letter-spacing: 2px; text-transform: uppercase; width: 100%; }
.codewert { font-size: var(--fs-md); letter-spacing: 1px; }
.aufnahme .zeilenaktionen { margin: var(--space-3) 0; flex-wrap: wrap; }
.aufnahme > .tabellenkopf h3 { margin: 0; font-size: var(--fs-md); }
.quellenliste { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
@media (max-width: 1100px) {
  .nachweis-raster, .liste-mit-detail, .aufnahme-raster { grid-template-columns: minmax(0, 1fr); }
  .phasenleiste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .befund-detail .detailpanel { position: static; max-height: none; }
}
@media (max-width: 700px) {
  .vorgangskontext { position: static; }
  .phasenleiste { grid-template-columns: minmax(0, 1fr); }
  .freigabe-status { align-items: flex-start; }
  .zeilenaktionen { flex-wrap: wrap; }
}

/* Zweispaltige Aktenansicht (Validierung, Los): Die linke Spalte darf schrumpfen. Ohne minmax(0,...)
   erzwingt eine lange Journalzeile ihre eigene Breite und schiebt Entscheid und Nachweis aus dem Bild
   (gemeldet 01.10.2026). Bei schmalem Fenster steht die Entscheidung vor dem Journal. */
.admin-ui .split { grid-template-columns: minmax(0, 1fr) 340px; }
.admin-ui .split > * { min-width: 0; }
.admin-ui .split .mono { overflow-wrap: anywhere; white-space: pre-wrap; }
@media (max-width: 1100px) {
  .admin-ui .split { grid-template-columns: minmax(0, 1fr); }
  .admin-ui .split > :nth-child(2) { order: -1; }
}

/* ---------------------------------------------------- Bereich Deployment --- */
/* Profilformular (deployment.js): Erklärung unter jedem Feld, App-Liste mit Version. */
.profilformular .profilfeld { margin-bottom: 14px; }
.profilformular .profilhilfe { margin: 4px 0 0; font-size: 12px; color: var(--ink-3); }
.profilformular .profilraster { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 16px; }
.profilformular textarea { resize: vertical; }
.profilformular .applisten { max-height: 220px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 4px 10px; margin-top: 6px; }
.profilformular .applisten label.appzeile { display: flex; width: 100%; align-items: center; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--line-2); }
.profilformular .applisten .appzeile:last-child { border-bottom: 0; }
.profilformular .applisten .appname { flex: 1; min-width: 0; }
.profilformular .applisten .appzeile input { flex: none; }
.tag.warnung { background: var(--warn-bg); color: var(--warn); }
.profil-gruende { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--bad); }
.profil-gruende li { margin: 2px 0; }
.profil-legende { margin: 10px 16px 14px; max-width: 80ch; }
.datentabelle tr.zeile-warnung > td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
.profilname { white-space: nowrap; }
.profilname .tag { margin-left: 8px; }

/* ===================================================== Baukasten (07.10.2026) ==
   Katalog links, Auswahl rechts: Richtliniensätze und Profile zusammenstellen
   (baukasten.js, baukasten-brett.js). Nur Variablen aus tokens.css, damit hell
   und dunkel stimmen. */
.bk-begriffe { margin: 0 0 var(--space-4); padding: 10px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.bk-begriffe > summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.bk-begriffe dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 12px 0 8px; }
.bk-begriffe dt { font-weight: 650; }
.bk-begriffe dd { margin: 0; color: var(--ink-2); max-width: 80ch; }
@media (max-width: 700px) { .bk-begriffe dl { grid-template-columns: 1fr; } .bk-begriffe dd { margin-bottom: 6px; } }
.bk-kopf { padding: 14px 16px 4px; margin-bottom: var(--space-4); }
.bk-kopfzeile { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 var(--space-4); }
.bk-kopfzeile .field p.sub { margin: 4px 0 0; font-size: 12px; }
.bk-weitere { margin: 0 0 10px; }
.bk-weitere > summary { cursor: pointer; color: var(--accent); font-weight: 600; padding: 4px 0 10px; }

.bk-brett { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; margin-bottom: var(--space-4); }
@media (max-width: 980px) { .bk-brett { grid-template-columns: minmax(0, 1fr); } }
.bk-rechts { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.bk-links { min-width: 0; }
.bk-spalte { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 0; }
.bk-spalte > header { display: flex; align-items: baseline; gap: 10px; padding: 12px 16px 4px; }
.bk-spalte > header h2 { margin: 0; font-size: 15px; }
.bk-unter { margin: 0; padding: 0 16px 8px; font-size: 12.5px; }
.bk-filter { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 16px 12px; border-bottom: 1px solid var(--line-2); align-items: center; }
.bk-filter input[type=search] { flex: 1 1 220px; min-width: 0; }
.bk-filter select { flex: 0 1 170px; width: auto; min-width: 0; }
.bk-nurfrei { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; white-space: nowrap; }
.bk-nurfrei input { width: auto; }

.bk-liste, .bk-eintraege { list-style: none; margin: 0; padding: 0; }
.bk-liste { max-height: 62vh; overflow: auto; overscroll-behavior: contain; }
.bk-gruppe { position: sticky; top: 0; z-index: 1; padding: 6px 16px; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; font-weight: 650;
  color: var(--ink-3); background: var(--panel-2); border-bottom: 1px solid var(--line-2); }
.bk-leer { padding: 28px 20px; text-align: center; color: var(--ink-3); }

.bk-karte, .bk-eintrag { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px 10px 10px; border-bottom: 1px solid var(--line-2); background: var(--panel); }
.bk-karte[draggable=true], .bk-eintrag[draggable=true] { cursor: grab; }
.bk-karte:hover, .bk-eintrag:hover { background: var(--panel-2); }
.bk-karte:focus-visible, .bk-eintrag:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.bk-karte.ist-drin { opacity: .62; }
.bk-karte.ist-drin .bk-titel b::after { content: " · schon dabei"; font-weight: 500; color: var(--ink-3); }
.bk-karte.zieht, .bk-eintrag.zieht { opacity: .35; }
.bk-griff { flex: none; align-self: center; color: var(--line-strong); letter-spacing: -2px; font-size: 14px; user-select: none; }
.bk-text { flex: 1; min-width: 0; }
.bk-titel { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.bk-titel b { overflow-wrap: anywhere; }
.bk-sub { margin-top: 2px; color: var(--ink-3); font-size: 12.5px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.bk-warn { margin-top: 3px; font-size: 12px; color: var(--warn); }
.bk-eintrag.fehlt { background: var(--bad-bg); }
.bk-marke { white-space: nowrap; }
.bk-marke.ok { background: var(--ok-bg); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.bk-marke.warn { background: var(--warn-bg); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.bk-marke.bad { background: var(--bad-bg); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 30%, transparent); }
.bk-marke.info { background: var(--info-bg); color: var(--info); border-color: color-mix(in srgb, var(--info) 30%, transparent); }
.bk-mehr { margin-top: 4px; font-size: 12.5px; }
.bk-mehr > summary { cursor: pointer; color: var(--accent); }
.bk-mehr p { margin: 4px 0; color: var(--ink-2); max-width: 70ch; }

.bk-plus, .bk-weg, .bk-pfeil { flex: none; }
.bk-plus { align-self: center; width: 34px; height: 34px; padding: 0; border-radius: 50%; font-size: 20px; line-height: 1; font-weight: 500;
  color: var(--accent); border-color: var(--accent); background: var(--accent-2); }
.bk-plus:hover:not(:disabled) { background: var(--accent); color: var(--accent-ink); }
.bk-plus:disabled { opacity: .7; color: var(--ok); border-color: var(--ok); background: var(--ok-bg); cursor: default; font-size: 16px; }
.bk-knoepfe { display: flex; gap: 4px; align-items: center; }
.bk-pfeil, .bk-weg { width: 30px; padding: 4px 0; text-align: center; }
.bk-weg:hover:not(:disabled) { background: var(--bad); border-color: var(--bad); color: #fff; }
.bk-nr { flex: none; align-self: center; width: 24px; height: 24px; display: inline-grid; place-items: center; border-radius: 50%;
  background: var(--accent-2); color: var(--accent); font-weight: 700; font-size: 12px; font-variant-numeric: tabular-nums; }

.bk-ziel { margin: 12px 16px 16px; border: 2px dashed var(--line-strong); border-radius: var(--radius); background: var(--panel-2); min-height: 120px; transition: border-color var(--dauer) var(--ease), background-color var(--dauer) var(--ease); }
.bk-ziel.bk-voll { border-style: solid; border-color: var(--line); background: var(--panel); overflow: hidden; }
.bk-ziel .bk-eintrag:last-child { border-bottom: 0; }
.bk-ziel.bk-ziel-aktiv, .bk-katalog.bk-ziel-aktiv { border-color: var(--accent); background: var(--accent-2); }
.bk-leerziel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 116px; padding: 16px; text-align: center; color: var(--ink-3); }
.bk-leerziel b { color: var(--ink-2); }
.bk-leerziel[hidden], .bk-eintraege[hidden] { display: none; }
.bk-einfuegen-vor { box-shadow: inset 0 3px 0 var(--accent); }
.bk-eintraege.bk-einfuegen-ende { box-shadow: inset 0 -3px 0 var(--accent); }
body.bk-zieht .bk-katalog.bk-ziel-aktiv::after { content: "Hier loslassen: aus der Auswahl entfernen"; position: absolute; inset: 0; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent-2) 88%, transparent); color: var(--accent); font-weight: 650; pointer-events: none; border-radius: var(--radius); }
.bk-gesperrt { opacity: .55; pointer-events: none; }

.bk-reiter { display: flex; gap: 4px; margin-bottom: 8px; }
.bk-reiter button { border-radius: var(--radius-sm); }
.bk-reiter button[aria-selected=true] { background: var(--accent-2); border-color: var(--accent); color: var(--accent); font-weight: 650; }

.bk-leiste { position: sticky; bottom: 0; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 12px 16px;
  margin: 0 0 var(--space-4); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.bk-status { flex: 1 1 360px; min-width: 0; }
.bk-status .status { align-items: flex-start; }
.bk-status .status-text { white-space: normal; overflow-wrap: anywhere; }
.bk-status .status { max-width: 100%; }
.bk-grund { flex: 1 1 100%; margin: 0; order: 3; }
.bk-grund[hidden] { display: none; }
.bk-aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.bk-aktionen [hidden] { display: none; }
.bk-ergebnis .body { padding: 14px 16px; }
.baukasten-hinweis { margin: 0 0 12px; font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .bk-ziel { transition: none; } }