:root {
  color-scheme: dark;
  /* Dunkles Theme naeher an Schwarz (Lagezentrale-Optik aus Mockup UX2):
     der dunklere Grund laesst Bloecke, Jetzt-Linie und Markierungen staerker
     hervortreten. Die Flaechenhierarchie (bg < panel/surface < surface-2)
     und alle Kontrastverhaeltnisse bleiben erhalten. */
  --bg: #141414;
  --panel: #1b1b1b;
  --surface: #1b1b1b;
  --surface-2: #222222;
  --text: #e5e5e5;
  --muted: #bfbfbf;
  --line: #333333;
  --grid-line: #282828;
  --grid-strong: #404040;
  --accent: #ff3333;
  --accent-2: #ff0000;
  --focus: #1f6f9f;
  --ok: #4ade80;
  --warning: #fbbf24;
  --danger: #ff3333;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.4);
  --label-w: 240px;
  /* Steuerungs-Tokens (Mockup VP1): zwei Kontrollhoehen, zwei Radien (+ Pill
     999px), gegen die alle Bedienelemente schrittweise konvergieren. */
  --ctl-h: 32px;
  --ctl-h-sm: 28px;
  --radius: 6px;
  --radius-lg: 10px;
  /* Block-Radius (Mockup BS): Bloecke sind buendige Segmente der Spur,
     keine Karten - deutlich flacher als der Bedien-Radius. */
  --blk-r: 2px;
  /* Bewegungs-Tokens (Konzept AM): drei Dauern, zwei Kurven - jede Bewegung
     der App greift eines davon; freie Werte sind verboten. Benannte
     Ausnahmen ausserhalb des Rasters: der Lade-Sweep (760 ms, eigene Kurve),
     die Puls-Keyframes (Einmal-Gesten, 0,45-1,6 s) und die Jetzt-Linie
     (1 s linear - Zeit ist linear). */
  --mo-fast: 120ms;
  --mo-base: 200ms;
  --mo-slow: 320ms;
  --mo-ease: cubic-bezier(.2, 0, 0, 1);
  --mo-ease-in: cubic-bezier(.4, 0, 1, 1);
}

/* Zentrale reduced-motion-Weiche (Konzept AM): alle Token-Nutzer werden
   quasi-instant. Dauer-/Einmal-Keyframes brauchen zusaetzlich ihre
   Einzel-Ausnahmen (animation: none) bei den jeweiligen Bausteinen. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --mo-fast: 1ms;
    --mo-base: 1ms;
    --mo-slow: 1ms;
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f5f5;
  --panel: #ffffff;
  --surface: #ffffff;
  --surface-2: #fafafa;
  --text: #1d1d1d;
  --muted: #808080;
  --line: #d9d9d9;
  --grid-line: #e5e5e5;
  --grid-strong: #bfbfbf;
  --accent: #ff0000;
  --accent-2: #cc0000;
  --ok: #126b45;
  --warning: #9a6200;
  --danger: #cc0000;
  --shadow: 0 1px 2px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.06);
}

* {
  box-sizing: border-box;
}

html {
  /* Vertikale Scrollbar IMMER anzeigen: verhindert den horizontalen
     Layout-Versatz beim Wechsel zwischen Ansichten mit und ohne vertikales
     Scrollen (z. B. Matrix <-> Administration). Bewusst overflow-y: scroll
     statt scrollbar-gutter: stable - die leere Gutter-Rinne liess Topbar und
     Matrix am rechten Rand abgeschnitten wirken, die sichtbare Schiene
     schliesst die Kante sauber ab. */
  overflow-y: scroll;
  /* Dunkle Scrollbars (VP1): System-Scrollbars sind unter Windows hell und
     verraten sich auf jeder Scrollflaeche. Firefox via scrollbar-color,
     Chromium/WebKit unten via Pseudoelemente - einmal global. */
  scrollbar-width: thin;
  scrollbar-color: var(--grid-strong) transparent;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background: var(--grid-strong);
  border-radius: 999px;
  border: 3px solid var(--bg);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--muted);
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
  background: transparent;
}

/* EIN Fokus-Ring-Muster (VP1): :where() haelt die Spezifitaet bei 0, damit
   bestehende, bewusst abweichende :focus-visible-Regeln weiterhin gewinnen. */
:where(button, input, select, textarea, summary, a, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* In der Matrix (Desktop/Tablet, nicht Briefing) scrollt nur das Board intern;
   die Seite selbst scrollt nie. Daher die reservierte Seiten-Scrollrinne hier
   ausblenden - sie wird nicht mehr gebraucht. Nur ab 701px: das Telefon
   (<= 700px) scrollt die Matrix weiterhin ueber die Seite und braucht sie. */
@media (min-width: 701px) {
  html:has(body[data-app-view="matrix"]:not(.briefing)) {
    overflow-y: hidden;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.45 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}

body.locked #adminPanel {
  display: none;
}

body.locked .topbar {
  display: none;
}

body:not(.locked) .lock-screen {
  display: none;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  min-height: 49px;
  padding: 10px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow);
  position: sticky;
  top: 0;
  z-index: 20;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Linker Kopfbereich ist ein Button: Klick auf Logo/KAIROS/Operation fuehrt
   zurueck zur Matrix-Hauptansicht. Optik bleibt unveraendert (Reset). */
.topbar-home {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* Hover-Detail (Mini-Easteregg, Logo-Leitidee LS-02 "Jetzt-Linie als I"):
   statt des ganzen Worts KAIROS faerben sich nur das I und der
   Operationsname - das I wird zur Jetzt-Linie. */
.topbar-home:hover .brand-i,
.topbar-home:hover .topbar-context strong {
  color: var(--accent);
}

.topbar-home:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Abschnitts-Waehler im Header (benannte Zeitbereiche) */
.range-select { position: relative; display: inline-flex; }
.range-select[hidden] { display: none; }
/* Abschnitts-Pille auf der 28-px-Nebenrollen-Hoehe (VP2). */
.range-select-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 11px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  min-height: var(--ctl-h-sm);
  cursor: pointer;
}
.range-select-btn:hover { border-color: var(--accent); }
.range-select-btn.active { border-color: var(--accent); }
.range-select-btn .rs-caret { color: var(--muted); font-size: 9px; }
.range-select-btn .rs-star { color: var(--accent); }
.range-select-btn .rs-cur { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.range-select-btn .rs-span { color: var(--muted); font-weight: 500; font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Zeilen-Scope-Pille + Popover (Plan ZS-U, Weg A): Pille auf der Optik des
   Abschnittswaehlers nebenan; das Popover teilt die .scope-*-Listenteile mit
   dem Telefon-Scope-Sheet, nur kompakter (Maus- statt Touch-Ziele). */
.lane-scope { position: relative; display: inline-flex; }
.lane-scope[hidden] { display: none; }
.lane-scope svg { width: 13px; height: 13px; flex: 0 0 auto; }
.lane-scope .ls-cur { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lane-scope .ls-cnt { color: var(--muted); font-weight: 700; }
/* Aktiv-Punkt: markiert den nicht-neutralen Zustand ("Meine Zeilen"). */
.lane-scope .ls-dot { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* Das Popover traegt die Klasse .range-menu (Panel, .rs-item-Zeilen, Hover-
   und Aktiv-Zustand identisch zum Zeitbereich-Menue) - hier nur die
   Scope-Eigenheiten: Scroll-Deckel, Farbpunkt, Zaehler, Stern, Hinweis. */
.lane-scope-menu { max-height: min(60vh, 480px); overflow-y: auto; }
.lane-scope-menu .rs-nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lane-scope-menu .rs-cnt { flex: 0 0 auto; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.lane-scope-menu .rs-chk .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: 0; }
.lane-scope-menu .rs-fav { flex: 0 0 auto; color: var(--accent); font-size: 13px; line-height: 1; }
.lane-scope-menu .rs-fav.off { color: var(--muted); visibility: hidden; }
.lane-scope-menu .rs-item:hover .rs-fav.off { visibility: visible; }
.lane-scope-menu .ls-hint { padding: 7px 12px 3px; color: var(--muted); font-size: 11px; line-height: 1.45; }

.range-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 40;
  width: 296px;
  max-width: 80vw;
  padding: 4px 0 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: 0 14px 36px rgba(0, 0, 0, .28);
  font-size: 12.5px;
}
.range-menu[hidden] { display: none; }
.range-menu .menu-section-title { padding: 8px 12px 4px; }
.range-menu .rs-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  padding: 7px 12px;
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  min-height: 0;
  cursor: pointer;
}
.range-menu .rs-item:hover { background: var(--surface-2); }
.range-menu .rs-item.on { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.range-menu .rs-chk { flex: 0 0 14px; width: 14px; text-align: center; color: var(--accent); }
.range-menu .rs-nm { flex: 1; min-width: 0; line-height: 1.25; }
.range-menu .rs-nm small { display: block; color: var(--muted); font-size: 10px; font-weight: 500; }
.range-menu .rs-star { flex: 0 0 auto; color: var(--accent); }
.range-menu .rs-div { height: 1px; margin: 4px 0; background: var(--grid-line); }
.range-menu .rs-custom { display: grid; gap: 7px; padding: 4px 12px 8px; }
.range-menu .rs-cf { display: grid; gap: 3px; color: var(--muted); font-size: 10.5px; font-weight: 700; }
.range-menu .rs-cf input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  padding: 0 8px;
  font: inherit;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}
.range-menu .rs-apply {
  margin-top: 2px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 18%, var(--panel));
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 10px;
  cursor: pointer;
}
.range-menu .rs-apply:hover { background: color-mix(in srgb, var(--accent) 28%, var(--panel)); }

/* Abschnitts-Liste in der Administration */
#operationRangesList.empty { padding: 10px 2px; color: var(--muted); font-size: 12.5px; }
#operationRangesList .range-span { color: var(--muted); font-variant-numeric: tabular-nums; }
.range-default {
  width: 16px;
  height: 16px;
  min-height: 0;
  padding: 0;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  position: relative;
}
.range-default.on { border-color: var(--accent); }
.range-default.on::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--accent);
}
.range-default:disabled { cursor: default; opacity: .7; }
.check-inline { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; }
.check-inline input { width: auto; margin: 0; }

/* Topbar-Bausteine der zusammengefuehrten Kopfleiste (Variante A):
   Trenner, Operations-Kontext, flexibler Zwischenraum, Matrix-Werkzeuge. */
.topbar-sep {
  width: 1px;
  align-self: stretch;
  margin: 6px 2px;
  background: var(--line);
}

.topbar-spacer {
  flex: 1;
}

.topbar-context {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  line-height: 1.2;
}

.topbar-context strong {
  /* Gleiche Schriftgroesse wie die Marke "KAIROS" links daneben. */
  font-size: 16px;
  letter-spacing: .02em;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 320px;
}

.topbar-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Kompakte Werkzeug-Buttons, damit die Topbar in allen Ansichten gleich
   hoch bleibt (nur die direkten Leisten-Buttons, nicht das Popover). */
.topbar-tools > button,
.topbar-tools > .matrix-menu > button {
  min-height: var(--ctl-h);
  padding: 4px 12px;
  font-size: 12px;
}

/* + Neu: die einzige Akzent-Aktion der Leiste (VP2). Bewusst als stille
   Akzent-Kontur (Panel-Grund, roter Text und Rahmen) statt roter Vollflaeche -
   der gefuellte Button ueberstrahlte die restliche Werkzeugleiste. */
#matrixNewBtn {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: var(--panel);
  color: var(--accent);
  font-weight: 600;
}

#matrixNewBtn:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
}

/* Werkzeug-Gruppe (VP2): Ansicht, Suche und Aktivitaet teilen sich einen
   Rahmen - ein visuelles Objekt statt drei loser Kaestchen. Bewusst KEIN
   overflow:hidden, das Ansicht-Popover ankert innerhalb der Gruppe. */
.topbar-toolgroup {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 2px);
  background: var(--panel);
}

.topbar-toolgroup > button,
.topbar-toolgroup > .matrix-menu > button {
  min-height: calc(var(--ctl-h) - 2px);
  height: 100%;
  border: 0;
  border-right: 1px solid var(--grid-line);
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  padding: 4px 12px;
  font-size: 12px;
}

.topbar-toolgroup > :first-child > button,
.topbar-toolgroup > button:first-child {
  border-radius: calc(var(--radius) + 1px) 0 0 calc(var(--radius) + 1px);
}

.topbar-toolgroup > :last-child > button,
.topbar-toolgroup > button:last-child {
  border-right: 0;
  border-radius: 0 calc(var(--radius) + 1px) calc(var(--radius) + 1px) 0;
}

.topbar-toolgroup > button:hover,
.topbar-toolgroup > .matrix-menu > button:hover {
  /* Der interne Trenner bleibt neutral - der projektweite button:hover-Akzent
     darf im geteilten Gruppen-Rahmen keinen roten Rand erzeugen (VP2). */
  border-color: var(--grid-line);
  color: var(--text);
  background: color-mix(in srgb, var(--text) 5%, transparent);
}

.topbar-toolgroup .matrix-menu > button.active {
  /* Aktiv: nur der Text traegt den Akzent, der Trenner bleibt neutral (sonst
     leckt .matrix-menu > button.active einen roten Rand in die Gruppe). */
  border-color: var(--grid-line);
  color: var(--accent);
}

/* 32 px = exakt halbe viewBox-Groesse: gerade Logo-Koordinaten landen so
   auf ganzen Pixeln (scharfe Kanten statt Subpixel-Weichzeichnung). */
.brand-logo {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
}

/* Markenlogo: fixe dunkle Variante (identisch zum Favicon) in BEIDEN Themes -
   die theme-abhaengige helle Kachel ist abgeschafft. */
.brand-logo rect:first-child {
  fill: #1d1d1d;
}

.brand-logo rect:nth-child(2) {
  fill: #8c8c8c;
}

.brand-logo rect:nth-child(3) {
  fill: #ffffff;
}

.brand-logo rect:nth-child(4) {
  fill: #b5b5b5;
}

.brand-logo circle {
  fill: #ff0000;
}

.brand-logo path {
  stroke: #ff0000;
  stroke-width: 6;
  stroke-linecap: round;
}

.brand-stack {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.brand-stack strong {
  font-size: 16px;
  letter-spacing: .02em;
}

/* Das I in KAIROS (brand-i, Hover-Easteregg) erbt ohne Hover die Wortfarbe -
   die generische Daempfungs-Regel ".topbar span" unten wuerde es sonst grau
   einfaerben (hoehere Spezifitaet noetig, daher .brand-stack davor). */
.brand-stack .brand-i {
  color: inherit;
}

.topbar span,
.empty,
.muted {
  color: var(--muted);
}

/* Benutzer-Pill mit Dropdown-Menue (ersetzt das fruehere "Sitzung"-Panel). */
.user-menu-wrap {
  position: relative;
}

/* Benutzer-Pille auf der 28-px-Nebenrollen-Hoehe (VP2). */
.user-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: var(--ctl-h-sm);
  padding: 3px 11px 3px 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
  cursor: pointer;
}

.user-pill:hover {
  border-color: var(--muted);
  color: var(--text);
}

.user-pill.open {
  border-color: var(--accent);
  color: var(--text);
}

.user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--panel);
  color: var(--text);
  font-size: 9px;
  font-weight: 700;
}

.user-avatar[hidden] {
  display: none;
}

.user-chev {
  font-size: 9px;
  color: var(--muted);
}

.user-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 60;
  width: 250px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: 0 14px 36px rgba(0, 0, 0, .4);
}

.user-menu[hidden] {
  display: none;
}

.user-menu-head {
  padding: 11px 13px 9px;
  border-bottom: 1px solid var(--line);
}

.user-menu-head strong {
  display: block;
  font-size: 13px;
}

.user-menu-mail {
  color: var(--muted);
  font-size: 11px;
}

.user-menu-head .badges {
  margin-top: 7px;
}

.user-lang-row {
  display: flex;
  gap: 4px;
  padding: 6px;
  border-bottom: 1px solid var(--line);
}

.user-lang-row button {
  flex: 1;
  min-height: 0;
  padding: 4px 0;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
}

.user-lang-row button.active {
  border-color: var(--accent);
  color: var(--text);
}

.user-menu-sec {
  padding: 6px;
  border-bottom: 1px solid var(--line);
}

.user-menu .menu-section-title { margin: 3px 8px 4px; }

.user-menu-sec:last-child {
  border-bottom: 0;
}

.user-menu-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 0;
  padding: 7px 8px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text);
  font-size: 12px;
  text-align: left;
}

.user-menu-item:hover {
  background: var(--surface-2);
  border-color: transparent;
}

.user-menu-item small {
  margin-left: auto;
  color: var(--muted);
  font-size: 10px;
}

.user-menu-item.danger {
  color: var(--accent);
}

.user-menu-ico {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  color: var(--muted);
}

.user-menu-item.danger .user-menu-ico {
  color: var(--accent);
}

.user-menu-ico svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Toast als dezente, neutrale Flaeche (Mockup AM, Demo H): Panel mit duennem
   Rand statt getoenter Karte mit Farbkante - die Art der Meldung traegt ein
   kleiner Farb-Punkt (ok/Fehler), die Aussage traegt der Text. */
.status-toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: min(360px, calc(100vw - 36px));
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 500;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  /* Toast-Bahn (Konzept AM, Demo H): steigt 10 px von unten auf (Keyframe),
     sinkt beim Verschwinden 4 px ab (Transition auf den Grundzustand mit
     --mo-ease-in - nur Verschwindendes nutzt die Ein-Kurve). */
  transform: translateY(4px);
  transition: opacity var(--mo-base) var(--mo-ease-in), transform var(--mo-base) var(--mo-ease-in),
    right var(--mo-base) var(--mo-ease), bottom var(--mo-base) var(--mo-ease);
}

.status-toast.visible {
  opacity: 1;
  transform: translateY(0);
  /* Nur die Ausweich-Bahn (right/bottom) gleitet im sichtbaren Zustand -
     Erscheinen traegt weiterhin allein der toast-in-Keyframe. */
  transition: right var(--mo-base) var(--mo-ease), bottom var(--mo-base) var(--mo-ease);
  animation: toast-in var(--mo-base) var(--mo-ease);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* Farb-Punkt als stiller Art-Marker (ueberlebt das textContent-Ersetzen in
   showStatus, weil Pseudo-Element). */
.status-toast::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
}

.status-toast[data-kind="error"] {
  border-color: color-mix(in srgb, var(--danger) 45%, var(--line));
}

.status-toast[data-kind="error"]::before {
  background: var(--danger);
}

/* Ausweich-Bahn (Mockup TO): bei offenem Drawer weicht der Toast neben die
   Drawer-Kante aus, statt die Fuss-Aktionen zu verdecken. --drawer-clear
   traegt die gemessene Breite der breitesten offenen Ebene (app.js,
   updateDrawerClearance). Nur oberhalb 1100 px - dort passt neben den
   breitesten Drawer (680 px) immer der volle Toast (360 px). Darunter
   (Drawer bis 92 vw) hebt sich der Toast stattdessen ueber den Drawer-Fuss;
   unter 700 px gilt die Sheet-Variante im Telefon-Block. */
@media (min-width: 1101px) {
  body.drawer-open .status-toast {
    right: calc(var(--drawer-clear, 480px) + 18px);
  }
}

/* --drawer-foot-clear traegt die GEMESSENE Fuss-Hoehe der offenen Ebene
   (app.js, updateDrawerClearance) - der Fuss kann auf schmalen Breiten
   mehrzeilig umbrechen, eine feste Annahme wuerde dann wieder verdecken. */
@media (max-width: 1100px) and (min-width: 701px) {
  body.drawer-open .status-toast {
    bottom: calc(var(--drawer-foot-clear, 57px) + 12px);
  }
}

/* Lade-Animation LA1 "Sweep-Aufbau" (Mockup LA): nach dem Login deckt ein
   Overlay die noch leere Matrix ab; sobald die Daten stehen, wandert die
   Jetzt-Linie von links nach rechts und gibt die geladene Matrix darunter
   frei. Wird nur per JS (showLoadAnimation/finishLoadAnimation) ein- und
   ausgeblendet. */
.load-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
}
.load-overlay[hidden] { display: none; }
.load-overlay.is-loading { pointer-events: auto; }

.load-cover {
  position: absolute;
  inset: 0;
  background: var(--bg);
}

.load-sweep {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  margin-left: -1px;
  background: var(--accent);
  box-shadow: 0 0 16px 2px color-mix(in srgb, var(--accent) 70%, transparent);
  opacity: 0;
}

.load-brand {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.load-brand svg { width: 54px; height: 54px; }
.load-brand-name { font-size: 16px; font-weight: 800; letter-spacing: .2em; color: var(--text); }

/* Ladephase: Cover voll, Marke atmet leise. */
.load-overlay.is-loading .load-brand { animation: loadBreathe 1.6s ease-in-out infinite; }

/* Reveal: Jetzt-Linie wandert, Cover weicht nach rechts, Marke verblasst. */
.load-overlay.is-revealing .load-cover { animation: loadReveal var(--load-reveal, 760ms) cubic-bezier(.65, 0, .35, 1) forwards; }
.load-overlay.is-revealing .load-sweep { animation: loadSweep var(--load-reveal, 760ms) cubic-bezier(.65, 0, .35, 1) forwards; }
.load-overlay.is-revealing .load-brand { animation: loadBrandOut 280ms ease forwards; }

@keyframes loadBreathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.05); }
}
@keyframes loadReveal {
  from { clip-path: inset(0 0 0 0); }
  to { clip-path: inset(0 0 0 100%); }
}
@keyframes loadSweep {
  0% { left: 0; opacity: 1; }
  92% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}
@keyframes loadBrandOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .load-overlay.is-loading .load-brand,
  .load-overlay.is-revealing .load-cover,
  .load-overlay.is-revealing .load-sweep,
  .load-overlay.is-revealing .load-brand { animation: none !important; }
}

.confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0, 0, 0, .58);
}

.confirm-overlay[hidden] {
  display: none;
}

/* Confirm erscheint mit kurzem Fade + minimalem Absetzen des Dialogs
   (Konzept AM, Demo G) - vorher ein harter hidden-Toggle. */
.confirm-overlay:not([hidden]) {
  animation: scrim-in var(--mo-base) var(--mo-ease);
}

.confirm-overlay:not([hidden]) .confirm-dialog {
  animation: confirm-in var(--mo-base) var(--mo-ease);
}

@keyframes confirm-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

.confirm-dialog {
  width: min(420px, 100%);
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .34);
}

/* Titelzeile in Drawer-Kopf-Groesse (VP5) - der Dialog ist eine Rueckfrage,
   keine Ueberschrift. */
.confirm-dialog h2 {
  margin: 0 0 8px;
  font-size: 15px;
}

.confirm-dialog p {
  margin: 0;
}

/* Optionales Loesch-Kaestchen im Confirm (z. B. Geraet beim Logout bereinigen). */
.confirm-option {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.4;
  cursor: pointer;
}
.confirm-option[hidden] {
  display: none;
}
.confirm-option input {
  /* Globales input{width:100%} wuerde die Checkbox auf volle Breite ziehen und
     das Label aus dem Dialog schieben - hier zurueck auf native Groesse. */
  flex: 0 0 auto;
  width: auto;
  margin-top: 1px;
}
.confirm-option-warn {
  margin: 8px 0 0;
  font-size: 12.5px;
}
.confirm-option-warn[hidden] {
  display: none;
}

.confirm-actions {
  justify-content: flex-end;
  margin-top: 18px;
}

/* Abbrechen im Confirm als Ghost (VP5) - die bestaetigende Aktion traegt das
   Gewicht, wie in den Drawer-Fusszeilen. */
.confirm-actions .secondary {
  border-color: transparent;
  background: transparent;
  color: var(--muted);
}

.confirm-actions .secondary:hover {
  border-color: var(--line);
  color: var(--text);
}

.lock-screen {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 16px;
  background: var(--bg);
}

/* H2-Buehne (Mockup L): die Jetzt-Linie laeuft ueber die volle Hoehe HINTER
   der Karte durch - das Logo-Motiv in Bildschirmgroesse. Die horizontale
   Position folgt der Tageszeit (Easter Egg, gesetzt von updateLockNowLine). */
.lock-now-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: var(--accent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 40%, transparent);
  pointer-events: none;
}

.lock-card {
  position: relative;
  z-index: 1;
  width: min(400px, 100%);
  padding: 26px 26px 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.lock-card strong {
  display: block;
  font-size: 22px;
}

.lock-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 20px;
}

.lock-brand strong {
  font-size: 17px;
  letter-spacing: .02em;
  line-height: 1.1;
}

.lock-brand span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.lock-logo {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
}

/* Vertrauenszeile am Kartenfuss (ersetzt den frueheren Entwickler-Hinweis).
   Selektor mit Karten-Scope, damit er die generische .lock-card p-Regel
   (margin) sicher uebersteuert. */
.lock-card .lock-trust {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 18px;
  padding-top: 13px;
  border-top: 1px solid var(--grid-line);
  font-size: 11px;
}

.lock-trust svg {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
}

/* Stiller Handbuch-Link unter der Vertrauenszeile (Variante A, Mockup HB). */
.lock-card .lock-manual {
  margin: 6px 0 0;
  font-size: 11px;
}

.lock-manual a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px dotted var(--line);
}

.lock-manual a:hover {
  color: var(--text);
  border-bottom-color: var(--muted);
}

.lock-card > span,
.lock-card p {
  color: var(--muted);
}

.lock-card p {
  margin: 12px 0 0;
}

.auth-step {
  display: grid;
  gap: 8px;
  margin-top: 0;
  /* Der Lock-Screen ist keine Lageflaeche - der weiche Schrittwechsel bleibt
     bewusst (Konzept AM), nur auf die Tokens gezogen. */
  animation: authStepIn var(--mo-base) var(--mo-ease);
}

.auth-step[hidden] {
  display: none;
}

@keyframes authStepIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.auth-copy h1 {
  margin: 0 0 8px;
  color: var(--text);
  font-size: 21px;
  line-height: 1.15;
}

.auth-copy p {
  margin: 0;
}

/* ===== Auth-Detail-Bausteine (Mockup L, D1-D5) ===== */

/* Primaerbutton im Lock-Screen: ein Schritt, ein Button, volle Breite. */
.lock-card .auth-primary {
  width: 100%;
  margin-top: 4px;
}

/* Stille Textaktion unter dem Primaerbutton (ersetzt sekundaere Buttons). */
.auth-quiet {
  display: block;
  width: 100%;
  padding: 4px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}

.auth-quiet:hover {
  color: var(--text);
}

/* Ehrliche Hinweiszeile ohne Aktion (Passwort vergessen). */
.lock-card .auth-quiet-note {
  margin: 6px 0 0;
  font-size: 12px;
  text-align: center;
}

/* Diskreter Tipp im Schluesselimport (QR-Geraetewechsel): Icon oben buendig,
   da der Text mehrzeilig ist. */
.lock-card .auth-hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0 2px;
  padding: 10px 12px;
  border: 1px solid var(--grid-line);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  text-align: left;
}
.auth-hint svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--accent);
}
.auth-hint[hidden] {
  display: none;
}

/* D1: Konto-Chip - identifizierte Adresse mit Initiale, inline wechselbar. */
.auth-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 2px 0;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 12.5px;
}

.auth-chip-ava {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--panel);
  font-size: 10px;
  font-weight: 800;
}

.auth-chip-mail {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth-chip-change {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.auth-chip-change:hover {
  color: var(--accent);
}

/* D1: Passwortfeld mit Anzeigen/Verbergen. */
.pwd-wrap {
  position: relative;
  display: block;
}

.pwd-wrap input {
  width: 100%;
  padding-right: 38px;
}

.pwd-eye {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.pwd-eye:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--text) 7%, transparent);
}

.pwd-eye svg {
  width: 15px;
  height: 15px;
}

.pwd-eye .pwd-eye-off,
.pwd-eye.revealed .pwd-eye-on {
  display: none;
}

.pwd-eye.revealed .pwd-eye-off {
  display: block;
}

/* D1: CapsLock-Warnung unter dem Passwortfeld. */
.caps-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--warning);
  font-size: 11px;
  font-weight: 600;
}

/* display:flex wuerde sonst das [hidden]-Attribut (display:none) ueberschreiben. */
.caps-hint[hidden] {
  display: none;
}

.caps-hint svg {
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
}

/* Einladungs-Deep-Link (Plan D3-U): Bestaetigungs-Chip am E-Mail-Schritt,
   wenn ein gescannter #invite-Code auf seinen Einsatz wartet. */
.invite-hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 11px;
  border: 1px solid color-mix(in srgb, var(--ok) 40%, var(--line));
  border-radius: 7px;
  background: color-mix(in srgb, var(--ok) 7%, var(--panel));
  font-size: 12px;
  line-height: 1.5;
}

.invite-hint[hidden] {
  display: none;
}

.invite-hint svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--ok);
}

/* D2: Schritt-Anzeige fuers Einladungs-Onboarding (Code/Konto/Sicherung). */
.auth-stepper {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 6px;
}

.auth-stepper[hidden] {
  display: none;
}

.stp {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.stp .n {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  font-size: 10px;
}

.stp.active {
  color: var(--text);
}

.stp.active .n {
  border-color: var(--accent);
  color: var(--accent);
}

.stp.done {
  color: var(--ok);
}

.stp.done .n {
  border-color: var(--ok);
  color: var(--ok);
}

.stp-line {
  flex: 1;
  height: 1px;
  min-width: 10px;
  background: var(--line);
}

/* D2/D3: Code-Felder (Einladungscode, Recovery-Code) - mono und zentriert.
   .code-upper zusaetzlich fuer das XXXX-XXXX-Format des Recovery-Codes;
   der Einladungscode bleibt lowercase (Hex, exakter Hash-Vergleich). */
label.code-input input {
  text-align: center;
  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 12.5px;
  font-weight: 700;
}

label.code-input.code-upper input {
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* D2: Passwortstaerke statt Regel-Liste. */
.pwd-strength[hidden] {
  display: none;
}

.pwd-strength-bar {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pwd-strength-bar span {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: var(--line);
}

.pwd-strength-bar span.on {
  background: var(--ok);
}

.pwd-strength-bar span.on.weak {
  background: var(--warning);
}

.pwd-strength-label {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 11px;
}

.pwd-strength-label b {
  color: var(--ok);
}

.pwd-strength-label.weak b {
  color: var(--warning);
}

/* D3: Dropzone fuer die Schluesseldatei. */
.dropzone {
  display: grid;
  justify-items: center;
  gap: 6px;
  margin: 2px 0;
  padding: 18px 14px;
  border: 1.5px dashed var(--line);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
  text-align: center;
  cursor: pointer;
}

.dropzone:hover,
.dropzone.dragover {
  border-color: var(--accent);
}

.dropzone svg {
  width: 20px;
  height: 20px;
  opacity: .8;
}

.dropzone b {
  color: var(--text);
  font-size: 12.5px;
}

.dropzone.okfile {
  border: 1.5px solid color-mix(in srgb, var(--ok) 50%, var(--line));
}

.filechip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  padding: 3px 11px;
  border: 1px solid color-mix(in srgb, var(--ok) 45%, var(--line));
  border-radius: 999px;
  color: var(--ok);
  font-size: 11.5px;
  font-weight: 700;
}

.filechip svg {
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
}

.filechip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* D3: Inline-Fehler unter dem Code-Feld (statt Toast). */
.lock-card .auth-inline-error {
  margin: 0;
  color: var(--danger);
  font-size: 12px;
  font-weight: 600;
}

/* D4: Recovery-Code gross, kopierbar, Klick markiert alles. */
.rcode {
  margin: 2px 0;
  padding: 12px 10px;
  border: 1px dashed color-mix(in srgb, var(--accent) 40%, var(--line));
  border-radius: 8px;
  background: var(--surface-2);
  text-align: center;
}

.rcode > span {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .1em;
  user-select: all;
}

.rcode small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .05em;
  user-select: none;
}

/* D4: Button-Paar Kopieren / Herunterladen mit Erledigt-Zustand. */
.rrow {
  display: flex;
  gap: 8px;
}

.rrow button {
  flex: 1;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.rrow button:hover:not(:disabled) {
  border-color: var(--accent);
}

.rrow button:disabled {
  opacity: .5;
  cursor: default;
}

.rrow button.done {
  border-color: color-mix(in srgb, var(--ok) 45%, var(--line));
  color: var(--ok);
}

.rrow button svg {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
}

/* Download-/Erledigt-Umschaltung im Recovery-Button ueber die Reihenfolge der
   beiden Icons (1 = Download, 2 = Haken) statt ueber Icon-Klassen - so stammen
   die Icons klassenfrei aus der zentralen ICONS-Registry. */
.rrow button svg:nth-of-type(2) {
  display: none;
}

.rrow button.done svg:nth-of-type(1) {
  display: none;
}

.rrow button.done svg:nth-of-type(2) {
  display: block;
}

/* D4: Bestaetigungs-Haken schaltet "Weiter zu KAIROS" frei. */
.confirm-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 2px 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  cursor: pointer;
}

.confirm-row input {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin: 1px 0 0;
}

/* D5: Kein-Zugriff-Leerzustand. */
.auth-empty {
  display: grid;
  justify-items: center;
  padding: 6px 0 2px;
  text-align: center;
}

.auth-empty-ico {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  margin-bottom: 12px;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  color: var(--muted);
}

.auth-empty-ico svg {
  width: 20px;
  height: 20px;
}

.auth-empty h1 {
  margin: 0 0 6px;
  font-size: 21px;
  line-height: 1.15;
}

.auth-empty p {
  margin: 0 0 6px;
}

.auth-empty p b {
  color: var(--text);
}

.mono {
  display: block;
  overflow-wrap: anywhere;
  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 12px;
}

.layout {
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: 14px;
  padding: 14px;
}

body[data-app-view="matrix"] .layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  /* Hoehe unter der Topbar: deren TATSAECHLICHE Hoehe (per JS in --topbar-h
     gemessen), nicht eine fixe Annahme von 50px. Sonst lief der Body um die
     Differenz ueber (Topbar real hoeher / umgebrochen) und es erschien
     ZUSAETZLICH zur inneren Board-Scrollbar eine aeussere Seiten-Scrollbar. */
  min-height: calc(100vh - var(--topbar-h, 50px));
  padding: 0;
}

/* Tagesansicht (Plan TD-U S1): oberhalb des Telefons derselbe Vollflaechen-
   Rahmen wie die Matrix - EINE Spalte ohne Aussenabstand (statt der ersten
   Zelle des 3-Spalten-Grids), das Werkbank-Blatt zentriert sich darin selbst.
   Unter 700 px bleibt das Telefon-Layout bewusst unveraendert. */
@media (min-width: 701px) {
  body[data-app-view="day"] .layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    min-height: calc(100vh - var(--topbar-h, 50px));
    padding: 0;
  }
}

body[data-app-view="admin"] .layout,
body[data-app-view="security"] .layout {
  max-width: 1400px;
  margin: 0 auto;
}

/* Einheitlicher Segment-Stil (loeste 2026-07-03 den gleitenden .seg-ind-
   Indikator mit roter Akzentkante ab): aktives Segment = gefuellte Flaeche
   (--panel auf dunklerem Grund bzw. --surface-2 auf Panel) + feiner Line-Ring
   + Textfarbe. Kein Rot, kein Positionier-JS - Akzentrot bleibt der einen
   Hauptaktion und Statusanzeigen vorbehalten. Die konkreten Regeln stehen bei
   den jeweiligen Leisten (.block-track-seg, .activity-action-seg, .mz-seg,
   .agenda-sort, .subnav, .seg, .mtb-seg). */

/* Der View-Wechsel ist ein HARTER Schnitt (Konzept AM, Verbotsliste): wer die
   Ansicht wechselt, will die neue sofort - der fruehere viewIn-Fade ist
   bewusst entfernt. */

[data-view][hidden] {
  display: none !important;
}

.panel {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

body[data-app-view="matrix"] .panel {
  border-radius: 0;
}

.matrix-workspace {
  grid-column: 1;
  min-height: 0;
  border-inline: 0;
  border-top: 0;
  background: var(--surface);
}

body[data-app-view="matrix"] .matrix-workspace {
  grid-column: 1;
  padding: 0;
  border-bottom: 1px solid var(--line);
  /* Flex-Spalte: oben das Board (scrollt intern), unten der Legenden-Footer.
     Briefing ueberschreibt dies wieder auf Grid (spaetere Regel). */
  display: flex;
  flex-direction: column;
}

/* Feste Hoehe (Topbar = 50px), damit die Matrix-Flaeche INTERN scrollt: die
   Zeitachse bleibt sticky oben, der Legenden-Footer immer unten sichtbar.
   Nicht im Briefing (eigenes Vollbild-Grid) und nicht auf dem Telefon
   (Seiten-Scroll + Bottom-Bar, weiter unten zurueckgesetzt). */
body[data-app-view="matrix"]:not(.briefing) .matrix-workspace {
  height: calc(100vh - var(--topbar-h, 50px));
  overflow: hidden;
}

.block-editor-panel {
  min-width: 0;
}

/* Rechtes Fly-in: liegt als Overlay UEBER dem Inhalt, schiebt ihn nicht zur
   Seite. Standardmaessig rechts ausserhalb geparkt, faehrt bei .open ein. */
.drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(0, 0, 0, .45);
  /* Scrim blendet parallel zum Drawer ein (Konzept AM, Demo G); Schliessen
     bleibt instant (hidden-Toggle) - ohne Scrim-Verzoegerung. */
  animation: scrim-in var(--mo-base) var(--mo-ease);
}

@keyframes scrim-in {
  from { opacity: 0; }
}

.drawer-scrim[hidden] {
  display: none;
}

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 85;
  display: flex;
  flex-direction: column;
  width: min(480px, 100%);
  height: 100vh;
  height: 100dvh;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--grid-strong);
  border-radius: 0;
  background: var(--surface-2);
  transform: translateX(100%);
  /* Schliessen (Weg zum Grundzustand) mit der Ein-Kurve - nur Verschwindendes
     nutzt --mo-ease-in (Konzept AM). */
  transition: transform var(--mo-base) var(--mo-ease-in);
}

/* Drei Breiten (DR-U S3): schmal fuer Lese-/Anzeige-Drawer, Standard 480,
   breit fuer Karten-/Vergleichsinhalte (Zeilenrechte, Konflikt). */
.drawer--narrow {
  width: min(360px, 100%);
}

.drawer--wide {
  width: min(680px, 100%);
}

.drawer.open {
  transform: translateX(0);
  transition: transform var(--mo-base) var(--mo-ease);
  /* Schatten erst im offenen Zustand, sonst ragt er (zeigt nach links) bei
     ausgeblendetem Drawer in den rechten Bildschirmrand. */
  box-shadow: -16px 0 48px rgba(0, 0, 0, .38);
}

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--grid-line);
  background: var(--surface-2);
}

.drawer-head h2 {
  margin: 0;
  font-size: 15px;
}

/* Titel + optionale Kontext-Unterzeile als eigener Block im Kopf (DR-U S3). */
.drawer-head-text {
  flex: 1 1 auto;
  min-width: 0;
}

.drawer-sub {
  margin-top: 2px;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drawer-close {
  min-width: 34px;
  padding: 2px 8px;
  font-size: 20px;
  line-height: 1;
}

/* Zurueck-Pfeil der gestapelten Ebene 2 (DR-U S4). */
.drawer-back {
  min-width: 34px;
  padding: 2px 8px;
  font-size: 20px;
  line-height: 1;
}

/* Geruest (DR-U S1): der Kopf steht fest, der Koerper scrollt, der Fuss steht
   fest. Das bisherige Scrollmuster des Aktivitaets-Drawers ist der Standard. */
.drawer-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-inline: 16px;
}

.drawer-body > :last-child {
  margin-bottom: 16px;
}

.drawer > .drawer-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 12px 16px;
  border-top: 1px solid var(--grid-line);
  background: var(--surface-2);
}

/* display:flex wuerde sonst das [hidden]-Attribut ueberschreiben - noetig
   fuer zustandsweise gewechselte Fuesse (Einladungs-Drawer, Plan D3-U). */
.drawer > .drawer-foot[hidden] {
  display: none;
}

/* Ghost-Buttons im Fuss (Abbrechen/Zurueck): sichtbar, aber ohne Gewicht. */
.ghost-action,
.drawer-foot .drawer-cancel {
  border-color: transparent;
  background: transparent;
  color: var(--muted);
}

/* Destruktives rechts abgesetzt - nie neben der Primaeraktion. */
.drawer-foot .danger-action {
  margin-left: auto;
}

/* Ebene 1 unter einer gestapelten Ebene 2: sichtbar, aber inaktiv. */
.drawer.drawer-under {
  opacity: .55;
  pointer-events: none;
}

.drawer > :not(.drawer-head, .drawer-body, .drawer-foot) {
  padding-inline: 16px;
}

.drawer .event-grid {
  grid-template-columns: 1fr;
  gap: 6px;
  margin-top: 12px;
}

/* Start/Ende teilen sich eine Zeile im ansonsten einspaltigen Drawer-Grid. */
.drawer .event-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* ===== Blockeditor (Mockup D2/B1) ===== */

/* Kontextzeile: Zeilenfarbe + Zeilenname + Spur-Segmente. */
.block-ctx {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 2px;
  font-size: 12px;
  font-weight: 700;
}

.block-ctx[hidden] {
  display: none;
}

.block-ctx-dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
}

.block-ctx-lane {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.block-track-seg {
  position: relative;
  display: flex;
  margin-left: auto;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
}

.block-track-seg button {
  position: relative;
  z-index: 1;
  min-height: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  padding: 4px 13px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .03em;
}

.block-track-seg button.on {
  background: var(--surface-2);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line);
}

.block-track-seg button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.block-title-field input {
  font-size: 15px;
  font-weight: 700;
}

/* Zeit-Baustein ZA: Tag-Chip(s) + Trio Start/Ende/Dauer + Schnell-Chips. */
.block-day-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin: 4px 0 8px;
}

.block-day-chipwrap[hidden],
.block-day-arrow[hidden] {
  display: none;
}

/* Der dtp-Trigger des date-Inputs wird hier zum Tag-Chip. */
.block-day-chipwrap .dtp-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  min-height: 0;
  padding: 2px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  font-size: 11.5px;
  font-weight: 800;
}

.block-day-chipwrap .dtp-trigger:hover {
  border-color: var(--accent);
}

.block-day-arrow {
  color: var(--muted);
  font-size: 12px;
}

/* "Anderer Tag" als Ghost-Chip (VP6): sichtbare Affordanz statt nacktem
   Textlink neben dem Tag-Chip. */
.block-day-toggle {
  min-height: 24px;
  margin-left: auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 700;
}

.block-day-toggle:hover {
  color: var(--text);
  border-color: var(--grid-strong);
}

.block-time-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

.block-time-cell {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.block-stepper {
  display: flex;
  align-items: stretch;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  overflow: hidden;
}

.block-stepper:focus-within {
  border-color: var(--accent);
}

.block-stepper input {
  flex: 1;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: center;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 0 2px;
}

.block-stepper button {
  min-height: 0;
  width: 26px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  padding: 0;
}

.block-stepper button:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--text) 7%, transparent);
}

.block-quick-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.block-quick-chips button {
  min-height: 0;
  padding: 2px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
}

.block-quick-chips button:hover {
  border-color: var(--accent);
  color: var(--text);
}

/* Kategorie als Farb-Chips ueber dem versteckten Select. */
.block-cat-field {
  display: grid;
  gap: 5px;
  margin: 7px 0;
  color: var(--muted);
  font-size: 13px;
}

/* Ohne Katalog wird die ganze Zeile ausgeblendet (VP6) - display:grid wuerde
   das [hidden]-Attribut sonst ueberschreiben. */
.block-cat-field[hidden] {
  display: none;
}

.block-cat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.block-cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 0;
  padding: 3px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.block-cat-chip i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.block-cat-chip:hover {
  color: var(--text);
}

.block-cat-chip.on {
  color: var(--text);
  border-color: var(--accent);
}

/* Notiz-Aufklapper. */
.block-note-toggle {
  display: block;
  width: 100%;
  min-height: 0;
  margin: 7px 0;
  border: 1px dashed var(--line);
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 600;
  text-align: left;
}

.block-note-toggle:hover {
  border-color: var(--accent);
  color: var(--text);
}

.block-note-toggle[hidden] {
  display: none;
}

/* Verlauf aus den Replay-Events. */
.block-history {
  margin: 10px 0 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
}

.block-history[hidden] {
  display: none;
}

.block-history > summary {
  padding: 8px 11px;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.block-history > summary::before {
  content: "\203A";
  transition: transform var(--mo-fast) var(--mo-ease);
}

.block-history[open] > summary::before {
  transform: rotate(90deg);
}

.block-history-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 10px;
  padding: 6px 11px;
  border-top: 1px solid var(--grid-line);
  font-size: 11.5px;
}

.block-history-row time {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Stille E2EE-Hinweiszeile + Fusszeile mit Kebab. */
.block-lock-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 10.5px;
}

.block-lock-hint svg {
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
}

/* ===== Nur-Lese-Fall des Block-Drawers (Mockup RO, Variante B) =====
   Der Drawer behaelt die Formular-Geometrie, aber die Eingabe-Mechanik
   verschwindet - Werte stehen als stille Texte an der Stelle der Felder.
   Die versteckten kanonischen Felder bleiben unveraendert. */
.block-readonly .block-track-seg,
.block-readonly #blockTitle,
.block-readonly .block-day-row,
.block-readonly .block-time-grid,
.block-readonly .block-quick-chips,
.block-readonly #blockCategoryChips,
.block-readonly #blockNote,
.block-readonly .block-note-toggle,
.block-readonly .block-tracked,
.block-readonly .block-lock-hint,
.block-readonly .block-participant-add,
.block-readonly .block-participant-hint,
.block-readonly .tn-chip-x {
  display: none;
}

.block-track-ro {
  margin-left: auto;
  flex: 0 0 auto;
  padding: 1px 9px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .05em;
}

.block-ro-title {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--text);
  overflow-wrap: anywhere;
}

/* Stilles Zeit-Trio: gleiche Dreiteilung wie das Stepper-Trio, nur als Text.
   Start/Ende tragen das Datum mit (Nutzer-Vorgabe) - formatBlockTime. */
.block-time-ro {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

.block-time-ro-cell {
  display: grid;
  gap: 2px;
  color: var(--muted);
  font-size: 11px;
}

.block-time-ro-cell b {
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.block-ro-cat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.block-ro-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex: 0 0 auto;
}

.block-ro-note {
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.block-ro-quiet {
  margin: 0;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.5;
}

.block-editor-actions {
  align-items: stretch;
}

.block-save-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  background: var(--accent);
  color: #fff;
  font-weight: 800;
}

/* display:inline-flex wuerde sonst das [hidden]-Attribut (display:none)
   ueberschreiben - im Nur-Lese-Fall blieb der Speichern-Knopf sichtbar. */
.block-save-btn[hidden] { display: none; }

/* Im Flex-Button uebernimmt gap den Abstand - kein zusaetzlicher Span-Rand. */
.block-save-btn .btn-ico + span {
  margin-left: 0;
}

.block-save-btn:hover {
  filter: brightness(1.05);
}

.block-save-btn svg {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
}

.block-kebab {
  min-height: 0;
  width: 40px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--muted);
  font-size: 16px;
  font-weight: 800;
  padding: 0;
}

.block-kebab:hover {
  color: var(--text);
  border-color: var(--accent);
}

.block-kebab[hidden] {
  display: none;
}

.drawer label {
  margin: 7px 0;
}

/* Fuss-Buttons folgen der Vorlage (DR-U S2): Primaeraktion links, Ghost
   daneben, Destruktives rechts - kein Vollbreite-Strecken mehr. */
.drawer .actions {
  align-items: stretch;
}

.drawer .list {
  margin-top: 12px;
  margin-bottom: 16px;
}

/* Meta-Zeile im Block-Editor: Ersteller / letzte Aenderung (Autor + Zeit). */
.block-meta {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 11px;
}

/* Aktivitaetsfeed: chronologische Eintraege im rechten Drawer, gruppiert
   nach Tag (sticky Trenner), mit Aktions-Icon, Autor fett, Uhrzeit rechts
   und Kontextzeile (Zeilen-Farbpunkt + Zeilenname + SOLL/IST-Chip). */
.activity-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: 16px;
}

.activity-day {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 10px 2px 4px;
  background: var(--surface);
  border-bottom: 1px solid var(--grid-strong);
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.activity-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 8px 16px 8px 2px;
  border-bottom: 1px solid var(--grid-line);
  font-size: 12px;
}

.activity-item.clickable {
  cursor: pointer;
}

.activity-item.clickable:hover,
.activity-item.clickable:focus-visible {
  background: color-mix(in srgb, var(--text) 6%, transparent);
  outline: none;
}

/* Affordance fuer klickbare Eintraege: dezenter Chevron rechts. */
.activity-item.clickable::after {
  content: "\203A";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 14px;
  opacity: 0;
}

.activity-item.clickable:hover::after,
.activity-item.clickable:focus-visible::after {
  opacity: .8;
}

.activity-icon {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  margin-top: 2px;
  color: var(--muted);
}

.activity-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.activity-icon.icon-created {
  color: var(--ok);
}

.activity-icon.icon-archived {
  opacity: .7;
}

.activity-icon.icon-undecryptable {
  color: var(--warning);
}

.activity-text {
  flex: 1 1 auto;
  min-width: 0;
}

.activity-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.activity-msg {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.activity-time {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.activity-context {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.activity-lane-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
}

.activity-lane-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activity-track {
  flex: 0 0 auto;
  padding: 0 4px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  line-height: 14px;
}

.activity-truncated {
  padding-top: 8px;
}

/* ===== Aktivitaetsfeed F1+F3 (Mockup F): Filter, Neu-Marker, Verdichtung ===== */
.activity-filterbar {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--grid-line);
  background: var(--surface-2);
}
.activity-filterbar[hidden] { display: none; }
.activity-fchip {
  min-height: 0;
  padding: 2px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  font: inherit;
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
}
.activity-fchip:hover { color: var(--text); border-color: var(--accent); }
.activity-fchip.on { border-color: var(--accent); color: var(--text); }
.activity-fchip:disabled { opacity: .45; cursor: not-allowed; }
/* Die Eventart-Chips (Alle/Erstellt/Geaendert/Archiviert) sind als
   Segmentleiste gruppiert; der Schluessel-Chip und der Zeilen-Filter bleiben
   eigenstaendig. Innerhalb der Gruppe verlieren die Chips ihre Pillenkontur -
   aktiv = gefuellte Flaeche (einheitlicher Segment-Stil). */
.activity-action-seg {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}
.activity-action-seg .activity-fchip {
  border: 0;
  background: transparent;
  border-radius: 6px;
}
.activity-action-seg .activity-fchip.on {
  background: var(--surface-2);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line);
}
.activity-fchip-key { display: inline-flex; align-items: center; gap: 5px; }
.activity-fchip-key svg { width: 11px; height: 11px; }
.activity-fchip-key.on { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 50%, var(--line)); }

/* F2: Umschalter Chronologisch/Nach Zeile + Gruppenkopf der Zeilen-Ansicht. */
.activity-group-seg { display: inline-flex; gap: 4px; }
.activity-lane-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  position: sticky;
  top: 0;
  margin-top: 8px;
  padding: 6px 4px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  font-weight: 700;
}
.activity-lane-group-head .activity-lane-count {
  margin-left: auto;
  font-weight: 400;
  color: var(--muted);
}
.activity-lane-filter {
  width: auto;
  margin-left: auto;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
}

/* Neu-seit-letzter-Ansicht-Marker. */
.activity-newmark {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 4px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.activity-newmark::before, .activity-newmark::after {
  content: "";
  flex: 1;
  height: 1px;
  background: color-mix(in srgb, var(--accent) 45%, transparent);
}

/* Verdichtete Gruppe (mehrere Aenderungen). */
.activity-group { border-bottom: 1px solid var(--grid-line); }
.activity-group-head {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 2px;
  cursor: pointer;
}
.activity-group-head:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.activity-gchev {
  flex: 0 0 auto;
  align-self: center;
  color: var(--muted);
  font-size: 10px;
  transition: transform var(--mo-fast) var(--mo-ease);
}
.activity-group.open .activity-gchev { transform: rotate(90deg); }
.activity-jump {
  flex: 0 0 auto;
  align-self: center;
  min-height: 0;
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.activity-jump:hover { color: var(--text); border-color: var(--accent); }
.activity-sub {
  display: none;
  margin-left: 34px;
  padding: 0 0 9px;
  flex-direction: column;
  gap: 5px;
}
.activity-group.open .activity-sub { display: flex; }
.activity-sub-line {
  display: flex;
  gap: 8px;
  color: var(--muted);
  font-size: 11.5px;
}
.activity-sub-line time {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-size: 10.5px;
}

/* "Mehr laden". */
.activity-loadmore {
  display: block;
  width: calc(100% - 4px);
  margin: 10px 2px 4px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.activity-loadmore:hover { border-color: var(--accent); }

/* Zaehler-Badge (F3): Topbar-Button + Telefon-Bottom-Bar. */
.activity-btn { position: relative; }
.activity-btn-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
}
.activity-btn-badge[hidden] { display: none; }

/* ===== Wachposten (Detailkonzept WP) ===== */
/* Glocke: Badge-Muster des Aktivitaets-Buttons + einmaliger Flanken-Puls. */
.watch-btn { display: inline-flex; align-items: center; gap: 6px; }
.watch-bell-ico { display: inline-grid; place-items: center; }
.watch-bell-ico svg { width: 13px; height: 13px; }
.watch-btn.watch-flash .watch-bell-ico { animation: watch-flash var(--mo-slow) var(--mo-ease); }
@keyframes watch-flash {
  0% { transform: rotate(0); }
  30% { transform: rotate(-14deg); }
  60% { transform: rotate(11deg); }
  100% { transform: rotate(0); }
}

/* Melde-Zentrum: Kopfzeile mit Zaehler + "Alle als gesehen". */
.watch-headrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0 8px;
  border-bottom: 1px solid var(--grid-line);
}
.watch-count { font-size: 12px; color: var(--muted); }
.watch-count b { color: var(--text); }
.watch-markall {
  border: none;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 0;
}
.watch-markall:hover { color: var(--text); }

/* Meldung: Symbol (Form, nicht nur Farbe) + Titel/Untertitel/Aktionen. */
.watch-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 11px 0 10px;
  border-bottom: 1px solid var(--grid-line);
}
.watch-item.unseen { box-shadow: inset 2px 0 0 var(--accent); padding-left: 8px; }
.watch-ico {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  flex: none;
  margin-top: 1px;
}
.watch-ico svg { width: 14px; height: 14px; }
.watch-ico.missed { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.watch-ico.late { background: color-mix(in srgb, var(--warning) 14%, transparent); color: var(--warning); }
.watch-ico.soon { background: var(--surface-2); color: var(--muted); }
.watch-cp { flex: 1; min-width: 0; }
.watch-t { font-size: 12.5px; font-weight: 700; color: var(--text); line-height: 1.35; }
.watch-s { font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.45; }
.watch-act { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.watch-act button {
  border: none;
  background: transparent;
  padding: 0;
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}
.watch-act button:hover { text-decoration: underline; }
.watch-act .watch-go { color: var(--accent); }
.watch-act .watch-mute { color: var(--muted); font-weight: 500; }
.watch-time {
  display: block;
  margin-top: 5px;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 10.5px;
  color: var(--muted);
}
.watch-empty { margin: 14px 0 4px; }
.watch-empty-hint { font-size: 12px; margin: 2px 0 0; }

/* Einstellungs-Fuss: persoenliche Ebene (dieses Geraet). */
.watch-foot.drawer-foot {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}
.watch-foot .check-inline { font-size: 12px; color: var(--muted); }
.watch-mutedlanes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.watch-mutedlanes-label { font-size: 11px; color: var(--muted); font-weight: 700; }
.watch-mutechip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 6px 2px 9px;
  font-size: 11.5px;
  color: var(--text);
  background: var(--surface);
}
.watch-mutechip button {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
}
.watch-mutechip button:hover { color: var(--text); }
.watch-devicehint { margin: 2px 0 0; font-size: 11px; color: var(--muted); }

/* Wachposten-Regelzeilen im Zeilen-Drawer: Minutenfeld in der Zeile. */
.watch-rules-title { margin-top: 14px; }
.watch-rule-min { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.watch-rule-min input[type="number"] { width: 64px; min-width: 0; }

/* Kurzzeitige Hervorhebung nach Sprung (Aktivitaetsfeed/Lageleiste/Suche),
   Mockup BF Variante V1: pulsierender Akzentrahmen INNEN (negativer Offset),
   damit er auf allen vier Seiten innerhalb der Block-/Zeilenhoehe bleibt und
   nicht - wie zuvor mit outline-offset:1px - oben/unten von der Zeile
   abgeschnitten wird. Analog zur Entwurfs-Markierung. */
.matrix-block.focus {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
  animation: block-focus-pulse 1.2s ease-in-out 2;
}

/* Aufblitzen aus Mockup BF/V3: der Block leuchtet beim Ankommen zweimal kurz in
   der Akzentfarbe auf und blendet aus - zieht den Blick zum Block, zusaetzlich
   zum ruhigen Innen-Ring. Overlay liegt durch overflow:hidden sauber innerhalb
   der Blockflaeche; dezenter Spitzenwert, damit der Titel lesbar bleibt. */
.matrix-block.focus::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--accent);
  opacity: 0;
  pointer-events: none;
  animation: block-focus-flash 1.2s ease-out 2;
}

@keyframes block-focus-pulse {
  50% {
    outline-color: transparent;
  }
}

@keyframes block-focus-flash {
  0% { opacity: .42; }
  50% { opacity: 0; }
  100% { opacity: 0; }
}

/* Bei reduzierter Bewegung: statischer Innen-Ring, kein Pulsieren, kein Blitz. */
/* Sync-Ankommen (Konzept AM, Demo B): ein fremder Block blendet mit leichtem
   Anheben + kurzem Akzent-Ring ein - einmalig, dann Ruhe. Outline statt
   box-shadow, damit die inset-Zustands-Ringe (Konflikt/Auswahl) unberuehrt
   bleiben. */
.matrix-block.sync-arrived {
  outline: 2px solid transparent;
  outline-offset: 1px;
  animation: sync-arrived 450ms var(--mo-ease);
}

@keyframes sync-arrived {
  0% {
    opacity: 0;
    transform: translateY(3px);
    outline-color: color-mix(in srgb, var(--accent) 55%, transparent);
  }
  45% {
    opacity: 1;
    transform: none;
    outline-color: color-mix(in srgb, var(--accent) 45%, transparent);
  }
  100% {
    outline-color: transparent;
  }
}

/* Status-Kipp-Puls (Konzept AM, Demo C): das Badge erscheint mit einem
   einzigen kurzen Puls, dann steht es still. */
.status-flip {
  animation: status-flip 500ms var(--mo-ease);
}

@keyframes status-flip {
  0% {
    opacity: 0;
    transform: scale(.6);
  }
  40% {
    opacity: 1;
    transform: scale(1.12);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .matrix-block.focus { animation: none; }
  .matrix-block.focus::after { display: none; }
  .matrix-block.sync-arrived,
  .status-flip { animation: none; }
}

.conflict-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 12px 16px 0;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--warning) 60%, var(--line));
  border-radius: 6px;
  background: color-mix(in srgb, var(--warning) 12%, var(--panel));
  font-size: 12px;
  font-weight: 700;
}

.conflict-banner[hidden] {
  display: none;
}

#conflictDrawerBody {
  padding-bottom: 16px;
}

.conflict-grid {
  display: grid;
  grid-template-columns: 84px 1fr 1fr;
  gap: 8px;
  align-items: start;
  padding: 6px 0;
}

.conflict-head {
  position: sticky;
  top: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}

.conflict-row {
  border-bottom: 1px solid var(--grid-line);
}

/* Hinweis im Konflikt-Drawer, wenn die gewaehlte Start/Ende-Kombination ein
   Ende vor dem Start ergeben wuerde (Speichern ist dann gesperrt). */
.conflict-time-warning {
  margin: 10px 0 0;
  padding: 6px 8px;
  border: 1px solid color-mix(in srgb, var(--warning) 50%, var(--line));
  border-left: 3px solid var(--warning);
  border-radius: 4px;
  color: var(--warning);
  font-size: 12px;
}

.conflict-row.same {
  opacity: .6;
}

.conflict-field {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  padding-top: 4px;
}

.conflict-choice {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  padding: 4px 6px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
}

.conflict-choice input {
  width: auto;
  margin-top: 2px;
}

.conflict-choice:hover {
  border-color: var(--line);
}

.conflict-actions {
  justify-content: flex-end;
  margin-top: 14px;
}

/* v2: Schnellwege "ganze Version uebernehmen" (Mockup K2). */
.conflict-quick {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 4px;
  font-size: 12px;
}

.conflict-quick-btn {
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 12px;
  cursor: pointer;
}

.conflict-quick-btn:hover {
  border-color: var(--accent);
}

/* v2: stille Basis-Referenz je abweichendem Feld (Mockup K1). */
.conflict-base {
  display: block;
  margin-top: 2px;
  font-weight: 400;
  font-size: 10px;
  color: var(--muted);
}

/* v2: unveraenderte Felder zusammengefasst statt abgefragt. */
.conflict-same {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--grid-line);
}

.conflict-same-head {
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 4px;
}

.conflict-same-row {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 8px;
  padding: 2px 0;
  font-size: 12px;
}

.conflict-same-val {
  color: var(--text);
}

.wide {
  grid-column: 1 / -1;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

h2 {
  margin: 0 0 12px;
  font-size: 15px;
}

label {
  display: grid;
  gap: 5px;
  margin: 10px 0;
  color: var(--muted);
}

input,
select,
textarea {
  width: 100%;
  /* Gleiche Feldhoehe wie Custom-Dropdown (.cs-trigger) und Buttons. */
  min-height: var(--ctl-h);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 10px;
  background: transparent;
  color: var(--text);
  font: inherit;
  /* Nur vertikal vergroesserbar - horizontales Ziehen wuerde das Layout verziehen. */
  resize: vertical;
}

/* Custom-Checkbox projektweit (ersetzt das native Kaestchen). Fuer boolesche
   Formular-Optionen; Modi nutzen weiter den Switch, Mehrfachauswahl die Pills
   (z. B. Wochentage in .fold-wd). */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  min-width: 18px;
  /* Die generische Feldhoehe (--ctl-h) gilt nicht fuer Kaestchen. */
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 1.5px solid var(--line);
  border-radius: 5px;
  background: var(--surface-2);
  cursor: pointer;
  vertical-align: middle;
  transition: background-color var(--mo-fast) var(--mo-ease), border-color var(--mo-fast) var(--mo-ease);
}
input[type="checkbox"]:checked {
  background-color: var(--accent);
  border-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E");
  background-size: 13px 13px;
  background-position: center;
  background-repeat: no-repeat;
}
input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input[type="checkbox"]:disabled { opacity: .45; cursor: default; }
/* Radios analog zu den Checkboxen (rund, Akzent-Punkt) - statt Browserstandard. */
input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  background: var(--surface-2);
  cursor: pointer;
  vertical-align: middle;
  transition: background-color var(--mo-fast) var(--mo-ease), border-color var(--mo-fast) var(--mo-ease);
}
input[type="radio"]:checked {
  border-color: var(--accent);
  background-image: radial-gradient(circle, var(--accent) 0 5px, transparent 6px);
}
input[type="radio"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input[type="radio"]:disabled { opacity: .45; cursor: default; }

input[type="color"] {
  min-height: var(--ctl-h);
  padding: 3px;
}

/* Einheitliche Kontrollhoehe: Buttons, Textfelder und Custom-Dropdowns teilen
   sich --ctl-h (32px) - keine drei verschiedenen Feldhoehen nebeneinander.
   Bewusst KEIN display-Wechsel: der UA zentriert Button-Inhalt selbst, und
   die links ausgerichteten Menue-Buttons (Subnav, User-Menu, Popover-Zeilen)
   behalten ihr eigenes Flex-Layout. Kompakte Buttons (Chips, Segmente,
   Popover) ueberschreiben min-height gezielt. */
button {
  min-height: var(--ctl-h);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 4px 12px;
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  /* Ein Hover-Tempo projektweit (VP1). */
  transition: color var(--mo-fast) var(--mo-ease), background-color var(--mo-fast) var(--mo-ease), border-color var(--mo-fast) var(--mo-ease);
}

/* Aktions-Icon in Buttons (ICON_SAVE/EDIT/ARCHIVE/DELETE): einheitliche
   Groesse, sitzt im normalen Inline-Fluss vor dem Text-Span. Der Abstand
   haengt am Folge-Span (nicht am Icon), damit Icon-only-Buttons und fremde
   Icon-Kontexte (Touchbar, Faltungs-Buttons) keinen Versatz erben. */
button .btn-ico {
  display: inline-block;
  width: 13px;
  height: 13px;
  vertical-align: -2px;
}

button .btn-ico + span {
  margin-left: 6px;
}

button:hover {
  border-color: var(--accent);
}

.primary-action {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  background: var(--accent);
  color: #ffffff;
  font-weight: 800;
}

.primary-action:hover {
  filter: brightness(1.05);
}

button:disabled {
  cursor: not-allowed;
  opacity: .55;
}

/* Kleines Fragezeichen mit Tooltip (VP6): traegt Erklaertexte, die sonst als
   Fliesstext-Klotz das Formular sprengen wuerden. */
.hint-ico {
  display: inline-grid;
  place-items: center;
  width: 15px;
  height: 15px;
  margin-left: 6px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  cursor: help;
  flex: 0 0 auto;
}

.hint-ico:hover {
  color: var(--text);
  border-color: var(--grid-strong);
}

/* Karten-/Inline-Aktionen mit sichtbarer Affordanz (VP6): kompakte Ghost-
   Buttons statt nackter Textzeilen (vorher kaum als Aktionen erkennbar). */
.link-action {
  min-height: var(--ctl-h-sm);
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  padding: 4px 10px;
  font-size: 12px;
}

.link-action:hover {
  color: var(--text);
  border-color: var(--line);
  background: color-mix(in srgb, var(--text) 4%, transparent);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.inline-actions {
  display: flex;
  gap: 14px;
  margin-top: 2px;
}

.inline-actions .link-action {
  font-size: 12px;
  font-weight: 700;
}

.checks {
  display: grid;
  gap: 6px;
}

.theme-grid,
.diag-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(80px, 1fr));
  gap: 8px;
}

.key-backup-panel {
  background: color-mix(in srgb, var(--panel) 88%, #111111);
}

.key-backup-layout {
  display: grid;
  grid-template-columns: minmax(220px, .8fr) minmax(320px, 1.2fr);
  gap: 18px;
  align-items: start;
}

.key-backup-copy {
  display: grid;
  gap: 10px;
}

.eyebrow {
  color: var(--warning);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.warning-text {
  color: var(--warning);
  font-size: 12px;
  font-weight: 800;
}

.recovery-card {
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 72%, #111111);
}

.recovery-result {
  display: grid;
  gap: 10px;
}

/* Geraete-Transfer A (Mockup DT): QR + Schrittliste im rechten Drawer. */
.transfer-body {
  display: grid;
  gap: 14px;
}
.transfer-steps {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}
.transfer-qr {
  display: flex;
  justify-content: center;
  padding: 14px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.transfer-qr svg {
  width: 220px;
  height: 220px;
  display: block;
}
.transfer-qr.expired {
  opacity: 0.3;
  filter: grayscale(1);
}
.transfer-ttl {
  margin: 0;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}
.transfer-ttl strong {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.transfer-link-row textarea {
  width: 100%;
  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 11px;
  word-break: break-all;
  resize: none;
}

.recovery-result[hidden] {
  display: none;
}

.recovery-code-row .recovery-code-field {
  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--text);
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 9px 10px;
  background: transparent;
  min-width: 0;
  /* Eine Zeile ohne Scrollbar: die Schriftgroesse wird per JS eingepasst
     (fitRecoveryCode), overflow nur als Sicherheitsnetz. */
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
  min-height: 38px;
}

.recovery-code-copy {
  cursor: pointer;
}

.recovery-code-copy.blurred-secret {
  cursor: default;
}

.blurred-secret {
  filter: blur(6px);
  user-select: none;
}

.recovery-code-row {
  display: block;
  min-width: 0;
}

.recovery-actions {
  justify-content: flex-end;
}

.event-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 10px;
}

/* Sektions-Rhythmus im Blockeditor (VP6): Zeit- und Kategorie-Sektion
   schliessen mit einer dezenten Trennlinie - drei ruhige Gruppen (Was/Wann/
   Details) statt eines durchgehenden Feldstapels. */
.event-grid .block-time,
.event-grid .block-cat-field {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--grid-line);
}

.event-note {
  grid-column: 1 / -1;
}

/* display: grid (Label-Layout) wuerde sonst das [hidden]-Attribut
   (display: none) ueberschreiben - die Notiz waere immer sichtbar. */
.event-note[hidden] {
  display: none;
}

/* Konflikt: Warn-Rahmen + symmetrischer Innen-Ring (Mockup BS) - die
   fruehere verstaerkte linke Kante war der letzte Einzel-Kanten-Akzent. */
.matrix-block.conflict {
  border-color: color-mix(in srgb, var(--warning) 70%, var(--line));
  background: color-mix(in srgb, var(--warning) 10%, var(--panel));
  box-shadow: inset 0 0 0 1.5px var(--warning);
}

.matrix-menu {
  position: relative;
}

.matrix-menu > button.active {
  border-color: var(--accent);
  color: var(--accent);
}

.matrix-toolbar {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  width: 320px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: 0 14px 36px rgba(0, 0, 0, .28);
  font-size: 12.5px;
}

.matrix-toolbar[hidden],
.matrix-newmenu[hidden] {
  display: none;
}

/* M6-P1: das Ansicht-Popover ist in Zonen gegliedert (Zeitbereich /
   Darstellung / Modus / Ausgeben), darunter eine stille Wartungs-Fusszeile. */
.mtb-zone {
  padding: 10px 12px;
  border-bottom: 1px solid var(--grid-line);
}

/* Gemeinsame Abschnitts-Ueberschrift fuer Menues/Popovers (Typografie zentral;
   der Abstand bleibt kontextabhaengig - siehe die Overrides je Container). */
.menu-section-title {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.mtb-zone .menu-section-title {
  margin-bottom: 8px;
}

.mtb-range {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 9px;
}

.matrix-toolbar-field {
  display: grid;
  gap: 3px;
  margin: 0;
  min-width: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}

/* datetime-local hat eine grosse Eigenbreite - min-width:0 + border-box halten
   die Felder in ihrer Grid-Spalte (sonst laufen sie aus dem Popover heraus). */
.matrix-toolbar-field input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Aktions- und Schalter-Zeilen teilen sich die Grundform. */
.mtb-row,
.mtb-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 7px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  min-height: 0;
  cursor: pointer;
}

.mtb-row:hover,
.mtb-toggle:hover {
  background: var(--surface-2);
}

.mtb-zone .mtb-row + .mtb-row,
.mtb-zone .mtb-toggle + .mtb-toggle,
.mtb-zone .mtb-row + .mtb-toggle,
.mtb-zone .mtb-toggle + .mtb-row {
  margin-top: 2px;
}

.mtb-ico {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--muted);
}

.mtb-ico svg {
  width: 100%;
  height: 100%;
  display: block;
}

.mtb-row-label {
  flex: 1;
  min-width: 0;
  line-height: 1.25;
}

.mtb-row-label small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
  /* Einzeilig kappen (VP5): mehrzeilige Subs sprengen den Zeilen-Rhythmus des
     Popovers - die Langform gehoert in den Tooltip der Zeile. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mtb-row-label .badge {
  font-size: 9px;
  min-height: 15px;
  padding: 0 5px;
  vertical-align: 1px;
}

.mtb-go {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 13px;
}

/* Schalter-Optik fuer die echten Toggle-Zeilen; der Zustand folgt der
   bestehenden .active-Klasse (syncMatrixToolbar setzt sie). */
/* Zeile mit Mini-Segment statt Switch (Zeit-Navigator-Darstellung): gleiche
   Anatomie wie .mtb-toggle, aber kein Button - die Auswahl liegt im Segment. */
.mtb-seg-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px;
  border-radius: 6px;
  font-size: 12.5px;
}

.mtb-seg {
  flex: 0 0 auto;
  display: flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-2);
}

.mtb-seg button {
  min-height: 0;
  padding: 3px 8px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
}

.mtb-seg button.active {
  background: var(--panel);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line);
}

.mtb-switch {
  flex: 0 0 auto;
  width: 32px;
  height: 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  position: relative;
}

.mtb-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--muted);
  transition: left var(--mo-fast) var(--mo-ease);
}

.mtb-toggle.active .mtb-switch {
  background: color-mix(in srgb, var(--accent) 35%, var(--surface-2));
  border-color: var(--accent);
}

.mtb-toggle.active .mtb-switch::after {
  left: 16px;
  background: var(--accent);
}

.mtb-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 9px 12px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  text-align: left;
  min-height: 0;
  cursor: pointer;
}

.mtb-foot:hover {
  color: var(--text);
}

.mtb-foot svg {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
}

/* + Neu - Inhalte erzeugen (Meilenstein, Zeile), getrennt von der Ansicht. */
.matrix-newmenu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 40;
  width: 224px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: 0 14px 36px rgba(0, 0, 0, .28);
}

/* Groesserer Farb-Swatch im Meilenstein-Drawer (Basisklasse: 16 px Zeilenliste). */
.milestone-color-swatch {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
}

/* Poll-Status ist kein Button (VP2): stiller Countdown-Text mit Icon; der
   Klick (jetzt aktualisieren) bleibt moeglich, ohne Button-Kostuem. Ohne
   aktives Polling blendet updatePollCountdown das Element ganz aus. */
/* Zweizeiliger Sync-Countdown: Titel oben, Ring + Restzeit darunter -
   kompakt genug fuer die 32-px-Kontrollhoehe der Topbar. */
.poll-now {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding-top: 2px;
  padding-bottom: 2px;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  line-height: 1;
}

.poll-now-title {
  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.poll-now-row {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.poll-now:hover {
  border-color: transparent;
  color: var(--text);
}

.poll-now[hidden] {
  display: none;
}

/* Countdown-Ring (Konzept AM, Demo J): konischer Mini-Ring, der sich stetig
   leert - kein Drehen, kein Blinken. Steht er (offline), ist der Sync
   gestoert. */
.poll-ring {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: conic-gradient(var(--muted) var(--p, 0%), color-mix(in srgb, var(--muted) 22%, transparent) 0);
}

/* Kurzer Akzent-Tick, wenn ein Abgleich Aenderungen gebracht hat. */
.poll-ring.tick {
  animation: poll-ring-tick 450ms var(--mo-ease);
}

@keyframes poll-ring-tick {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  100% { box-shadow: 0 0 0 5px transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .poll-ring.tick { animation: none; }
}

.poll-countdown {
  min-width: 24px;
  text-align: right;
  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  font-weight: 500;
  color: var(--muted);
}

/* Verbindungsverlust: fehlgeschlagenes Polling rot am Countdown markieren. */
.poll-now.offline {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 55%, var(--line));
}

.poll-now.offline .poll-countdown {
  color: var(--danger);
}

.poll-now.offline .poll-ring {
  background: conic-gradient(var(--danger) var(--p, 0%), color-mix(in srgb, var(--danger) 25%, transparent) 0);
}

/* Zoom-/Falt-Gleiten (Konzept AM, Demo F): waehrend der Fahrt wandern Bloecke
   und Rasterlinien in EINER Bewegung zur neuen Geometrie; Interaktion ist
   kurz gesperrt (320 ms liegen unter der Reaktionsschwelle). Die Achse
   schaltet bewusst hart mit dem Rebuild um - nur Bloecke + Raster gleiten. */
.matrix-board.retiming {
  pointer-events: none;
}

.matrix-board.retiming .matrix-block {
  transition: left var(--mo-slow) var(--mo-ease), width var(--mo-slow) var(--mo-ease), opacity var(--mo-slow) var(--mo-ease);
}

.matrix-board.retiming .matrix-grid-line {
  transition: left var(--mo-slow) var(--mo-ease);
}

.matrix-board {
  display: block;
  margin-top: 0;
  background: var(--surface);
  /* Eigener Scroll-Container in BEIDE Richtungen (analog kairos-local
     .matrix-scroll): so greift die sticky Zeitachse (top:0) und die Legende
     bleibt als Flex-Footer immer sichtbar. Hoehe kommt aus dem flex board-wrap;
     ohne feste Workspace-Hoehe (Telefon) waechst das Board und die Seite
     scrollt wie zuvor. */
  overflow: auto;
  height: 100%;
  --time-w: 800px;
  /* Touch-Gesten (Pan/Pinch/Langdruck) implementiert der Pointer-Controller
     selbst (Mockup T/G) - natives Touch-Scrolling/-Zoomen hier aus. */
  touch-action: none;
}

.matrix-board.panning {
  cursor: grabbing;
  user-select: none;
}

.matrix-time-axis {
  display: grid;
  grid-template-columns: var(--label-w) 58px var(--time-w);
  width: calc(var(--label-w) + 58px + var(--time-w));
  border: 0;
  border-bottom: 1px solid var(--grid-strong);
  border-radius: 0;
  background: var(--surface-2);
  position: sticky;
  top: 0;
  z-index: 5;
}

.matrix-time-spacer {
  position: sticky;
  left: 0;
  z-index: 2;
  border-right: 1px solid var(--grid-strong);
  background: var(--surface-2);
  overflow: hidden;
}

/* Werkzeuge in der (frueher toten) Achsen-Ecke: Einklappen, Zoom, Fit, Jetzt
   (Mockup M3 V2) - immer sichtbar, am Ort der Wirkung. */
.matrix-corner-tools {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 100%;
  padding: 0 6px;
}

.matrix-corner-tools button {
  min-height: 0;
  min-width: 22px;
  padding: 2px 7px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
}

.matrix-corner-tools button:hover {
  color: var(--text);
  border-color: var(--line);
  background: var(--panel);
}

.matrix-corner-tools button svg {
  width: 12px;
  height: 12px;
  display: block;
}

.matrix-corner-sep {
  flex: 0 0 auto;
  width: 1px;
  height: 14px;
  margin: 0 2px;
  background: var(--line);
}

.matrix-corner-zoom {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Zoom-Kapsel: - / Wert / + als EIN zusammenhaengendes Stepper-Element. Der
   Wert sitzt mittig in fester Breite (steht beim Zoomen still), die +/--Buttons
   bleiben dadurch ortsfest. Einpassen liegt als eigenes Icon daneben. */
.matrix-zoom-capsule {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  overflow: hidden;
}

.matrix-corner-tools .matrix-zoom-capsule button {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 13px;
}

.matrix-corner-tools .matrix-zoom-capsule button:hover {
  border: 0;
  background: color-mix(in srgb, var(--text) 9%, transparent);
}

.matrix-zoom-capsule .matrix-corner-zoom {
  min-width: 40px;
  height: 22px;
  line-height: 22px;
  padding: 0 4px;
  text-align: center;
  color: var(--text);
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
}

.matrix-time-trackpad {
  position: sticky;
  left: var(--label-w);
  z-index: 2;
  border-right: 1px solid var(--grid-line);
  background: var(--surface-2);
}

.matrix-time-ticks {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  color: var(--muted);
  white-space: nowrap;
}

/* Kalender-Zeile (obere Etage des Achsenkopfs): traegt NUR die Tagessegmente
   mit dem sticky Tag-Chip (vom Folgetag verdraengt) und die Uhrzeit-Ticks.
   Keine Pill betritt diese Etage - der Chip ist konstruktiv immer lesbar. */
.matrix-axis-timeline {
  position: relative;
  height: var(--axis-cal-h);
}

/* Eigene Clip-Ebene NUR fuer die Uhrzeit-Ticks: das letzte Label (translateX
   -50%) ragt sonst ueber das Zeitflaechen-Ende hinaus und verbreitert den
   Scrollbereich (sichtbarer Hintergrundstreifen rechts). Nicht auf der
   Timeline selbst clippen - das braeche den sticky Tag-Chip. */
.matrix-axis-tickclip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.matrix-axis-day {
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: 1px solid var(--grid-strong);
  box-sizing: border-box;
}

.matrix-axis-day-label {
  position: sticky;
  left: calc(var(--label-w) + 59px);
  z-index: 1;
  display: inline-block;
  max-width: 100%;
  box-sizing: border-box;
  margin-top: 2px;
  padding: 0 7px;
  border-radius: 4px;
  line-height: 16px;
  font-size: 10px;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Voll deckend + schmaler Freistellungs-Ring: durchlaufende Ticks
     verschwinden sauber unter dem Chip statt durchzuscheinen. */
  background: color-mix(in srgb, var(--text) 12%, var(--surface-2));
  box-shadow: 0 0 0 3px var(--surface-2);
  cursor: pointer;
}

/* Klick auf das Tages-Label springt zum Tagesbeginn (00:00) - dezenter Hover. */
.matrix-axis-day-label:hover {
  background: color-mix(in srgb, var(--accent) 22%, var(--surface-2));
  color: var(--text);
}

.matrix-time-tick {
  position: absolute;
  top: 3px;
  transform: translateX(-50%);
  padding: 0 2px;
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.matrix-row {
  display: grid;
  grid-template-columns: var(--label-w) calc(58px + var(--time-w));
  width: calc(var(--label-w) + 58px + var(--time-w));
  min-height: 68px;
  border: 0;
  border-bottom: 1px solid var(--grid-strong);
  border-radius: 0;
  background: var(--surface);
}

.matrix-row.active {
  box-shadow: inset 3px 0 0 var(--accent);
}

/* Planungsmodus: nur die SOLL-Spur wird gerendert; die fuer zwei Spuren
   bemessene Mindesthoehe (68px) entfaellt, damit die Zeile auf die Hoehe einer
   einzelnen Spur zusammenfaellt (kompaktere SOLL-Uebersicht). */
body.matrix-planning .matrix-row {
  min-height: 0;
}

/* Spur ohne Leserecht wird ausgeblendet (statt gesperrt dargestellt): eine
   Zeile mit nur EINER lesbaren Spur faellt wie im Planungsmodus auf die
   Hoehe einer einzelnen Spur zusammen. */
.matrix-row.matrix-row-single {
  min-height: 0;
}

/* ===== Leerzustaende & Erstinbetriebnahme (Mockup E) ===== */
/* E2: rollenbewusste Leerzustands-Karte / E1: Erstlauf-Coach - zentriert im
   Matrix-Board statt nackter Textzeile. */
.matrix-emptystate {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 32px 16px;
}

.matrix-empty-card {
  width: min(360px, 100%);
  display: grid;
  justify-items: center;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  padding: 24px 20px 20px;
}
.matrix-empty-ico {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  color: var(--muted);
  margin-bottom: 13px;
}
.matrix-empty-ico svg { width: 20px; height: 20px; }
.matrix-empty-ico.warn { border-color: color-mix(in srgb, var(--warning) 50%, var(--line)); color: var(--warning); }
.matrix-empty-card h3 { margin: 0 0 6px; font-size: 15px; }
.matrix-empty-card p { margin: 0 0 14px; color: var(--muted); font-size: 12.5px; line-height: 1.55; max-width: 290px; }
.matrix-empty-card button {
  min-height: 0;
  padding: 8px 16px;
  border-radius: 7px;
  font-weight: 800;
  font-size: 12.5px;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--line));
  background: var(--accent);
  color: #fff;
  cursor: pointer;
}
.matrix-empty-card button.quiet { background: var(--panel); color: var(--text); border-color: var(--line); }
.matrix-empty-card button.quiet:hover { border-color: var(--accent); }
.matrix-empty-hint { margin: 10px 0 0; color: var(--muted); font-size: 11px; }

.matrix-coach {
  width: min(480px, 100%);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--shadow);
  padding: 22px 22px 12px;
}
.matrix-coach h2 { margin: 0 0 4px; font-size: 18px; }
.matrix-coach-intro { margin: 0 0 14px; color: var(--muted); font-size: 12.5px; }
.matrix-coach-step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 2px;
  border-bottom: 1px solid var(--grid-line);
}
.matrix-coach-step:last-of-type { border-bottom: 0; }
.matrix-coach-no {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 2px solid var(--line);
  border-radius: 50%;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}
.matrix-coach-step.done .matrix-coach-no { border-color: var(--ok); color: var(--ok); }
.matrix-coach-step.active .matrix-coach-no { border-color: var(--accent); color: var(--accent); }
.matrix-coach-body { flex: 1; min-width: 0; }
.matrix-coach-body h3 { margin: 1px 0 3px; font-size: 13.5px; }
.matrix-coach-step.done .matrix-coach-body h3 { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 60%, transparent); }
.matrix-coach-body p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.matrix-coach-act { display: inline-block; margin-top: 8px; }
.matrix-coach-act button {
  min-height: 0;
  padding: 7px 14px;
  border-radius: 7px;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--line));
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
}
.matrix-coach-donetag { flex: 0 0 auto; color: var(--ok); font-size: 11px; font-weight: 700; }
.matrix-coach-dismiss {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 8px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
}
.matrix-coach-dismiss:hover { color: var(--text); }

/* E3: Geisterblock-Hinweis in der ersten leeren, schreibbaren SOLL-Spur. */
.matrix-ghost-hint {
  position: absolute;
  top: 3px;
  left: 14px;
  height: 26px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1.5px dashed color-mix(in srgb, var(--accent) 50%, var(--line));
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  z-index: 1;
}
.matrix-ghost-hint svg { width: 12px; height: 12px; flex: 0 0 auto; }

.matrix-lane {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 5px 10px 5px 9px;
  /* Zeilenfarbe als linke Kante; transparent ohne Farbe (einheitliches Layout).
     Die Farbe setzt renderMatrix inline ueber border-left-color. */
  border-left: 4px solid transparent;
  border-right: 1px solid var(--grid-strong);
  background: var(--surface-2);
  position: sticky;
  left: 0;
  z-index: 3;
  overflow: hidden;
}

.matrix-lane-name {
  font-size: 12px;
  font-weight: 700;
  /* Voller Textton statt gedaempft (--muted), damit der Zeilenname heraussticht. */
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Unsichtbarer Klick-Streifen ueber der Farbkante (nur fuer Verwaltende):
   Klick oeffnet den Farb-Picker, Rechtsklick entfernt die Farbe. */
.matrix-lane-colorbar {
  position: absolute;
  left: -4px;
  top: 0;
  bottom: 0;
  width: 12px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
}

.matrix-lane-colorbar:hover {
  background: color-mix(in srgb, var(--text) 12%, transparent);
}

/* Zeilen-Farbe: kleiner runder Swatch in der Zeilenliste (Administration). */
.lane-color-swatch {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  min-height: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
}

.lane-actions {
  align-items: center;
}

/* Farb-Popover (eigene Palette statt nur OS-Picker). */
dialog.color-pop {
  position: fixed;
  inset: auto;
  margin: 0;
  padding: 10px;
  width: 210px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  color: var(--text);
}

dialog.color-pop::backdrop {
  background: transparent;
}

dialog.context-menu {
  position: fixed;
  inset: auto;
  margin: 0;
  padding: 4px;
  min-width: 160px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  color: var(--text);
}

dialog.context-menu::backdrop {
  background: transparent;
}

.context-menu-list {
  display: flex;
  flex-direction: column;
}

.context-menu-list button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  text-align: left;
  min-height: 0;
  padding: 7px 10px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

/* Aktions-Icon im Kontextmenue (gleiche Icons wie die Touch-Leiste). */
.context-menu-list .ctx-ico {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  color: var(--muted);
}

.context-menu-list .ctx-ico svg {
  width: 100%;
  height: 100%;
  display: block;
}

.context-menu-list button:hover {
  background: var(--surface-2);
}

.category-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}

.category-row input[type="text"] {
  flex: 1;
  min-width: 0;
}

/* Sigel-Eingabe (Mockup BS-D): kompaktes Kuerzel-Feld neben dem Namen. */
.category-row input.category-sigil {
  flex: 0 0 64px;
  text-transform: uppercase;
  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 12px;
}

.category-swatch {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  min-height: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
}

.category-swatch:disabled {
  cursor: default;
  opacity: .6;
}

.category-remove {
  flex: 0 0 auto;
  min-height: 0;
  padding: 4px 9px;
}

/* Reihenfolge per Drag (nur Admins): Griff + Drop-Indikator. */
.category-grip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 22px;
  color: var(--muted);
  cursor: grab;
}
.category-grip:active { cursor: grabbing; }
.category-grip svg { width: 14px; height: 14px; display: block; }
.category-row.drag-source { opacity: .5; }
.category-row.drop-before { box-shadow: inset 0 2px 0 var(--accent); }
.category-row.drop-after { box-shadow: inset 0 -2px 0 var(--accent); }

.color-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}

.color-grid button {
  width: 26px;
  height: 26px;
  min-height: 0;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
}

.color-grid button.sel {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18), 0 0 0 2px var(--accent);
}

.color-custom {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.color-custom label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

/* Eigener-Farbwert-Swatch sieht aus wie die Palette-Kreise (26px, rund). */
.color-custom input[type="color"] {
  width: 26px;
  height: 26px;
  min-height: 26px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
}

.color-custom input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: 50%;
}

.color-custom input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
  border-radius: 50%;
}

.color-custom input[type="color"]::-moz-color-swatch {
  border: none;
  border-radius: 50%;
}

.matrix-tracks {
  display: grid;
  grid-template-rows: auto auto;
}

.matrix-track {
  display: grid;
  grid-template-columns: 58px var(--time-w);
  min-width: 0;
  border-bottom: 1px solid var(--grid-line);
}

.matrix-track:last-child {
  border-bottom: 0;
}

.matrix-track-label {
  display: flex;
  align-items: center;
  padding: 0 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  border-right: 1px solid var(--grid-line);
  background: color-mix(in srgb, var(--surface) 82%, var(--line));
  position: sticky;
  left: var(--label-w);
  z-index: 2;
}

.matrix-track-act .matrix-track-body {
  background: color-mix(in srgb, var(--text) 5%, transparent);
}

.matrix-track-body {
  position: relative;
  display: block;
  min-height: 34px;
  min-width: 0;
  overflow: hidden;
}

.matrix-grid-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--grid-line);
  pointer-events: none;
}

.matrix-now-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--label-w) + 58px);
  right: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 6;
}

.matrix-now-overlay[hidden] {
  display: none;
}

/* Stetige Jetzt-Linie (Konzept AM, Demo A): zwischen den Sekunden-Ticks
   gleiten Linie + Pill linear weiter - Zeit ist linear, daher kein Easing
   (benannte Ausnahme ausserhalb des Token-Rasters). Die Klasse setzt NUR der
   Sekunden-Tick; Scroll/Zoom/Resize aktualisieren ohne sie. */
.matrix-now-overlay.gliding .matrix-now-line,
.matrix-now-overlay.gliding .matrix-now-label {
  transition: left 1s linear;
}

@media (prefers-reduced-motion: reduce) {
  .matrix-now-overlay.gliding .matrix-now-line,
  .matrix-now-overlay.gliding .matrix-now-label {
    transition: none;
  }
}

.matrix-now-line {
  position: absolute;
  /* Beginnt an der konstanten Achsen-Unterkante des Etagen-Kopfs
     (Kalender-Zeile + Marker-Band inkl. Border + 1px Achsen-Border). */
  top: calc(var(--axis-cal-h) + var(--axis-band-h) + 1px);
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: var(--accent);
  pointer-events: auto;
  cursor: pointer;
}

.matrix-now-label {
  position: absolute;
  /* Feste Position im Marker-Band (unter der Kalender-Zeile + Band-Border +
     1px Luft); die Pill ist kompakt (15px in 18px Band), damit sie weder oben
     in die Beschriftung noch unten in die Spuren ragt - keine JS-Messung. */
  top: calc(var(--axis-cal-h) + 2px);
  left: 50%;
  transform: translate(-50%, 0);
  display: inline-flex;
  align-items: stretch;
  overflow: hidden;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: auto;
  cursor: pointer;
}

.matrix-now-time {
  padding: 0 8px;
  line-height: 15px;
}

/* Verzugs-Zaehler-Segment der Jetzt-Pill (Mockup M4/B1): Klick springt
   zyklisch zum naechsten SOLL-Block ohne IST. */
.matrix-now-late {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  /* Kompakte Pill in der Achsenzeile - die generische Kontrollhoehe (--ctl-h)
     wuerde die ganze Jetzt-Pill aus dem Band druecken. */
  min-height: 0;
  padding: 0 8px;
  background: var(--warning);
  color: #1d1d1d;
  font: inherit;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

.matrix-now-late[hidden] {
  display: none;
}

.matrix-now-late svg {
  width: 11px;
  height: 11px;
}

/* Abschlusslinie unter der letzten Zeile (VP5): das Raster endet nicht mehr
   uebergangslos im Leerraum. */
.matrix-board-end {
  height: 0;
  border-top: 2px solid var(--grid-strong);
}

.matrix-board-wrap {
  position: relative;
  /* Fuellt in der Flex-Spalte den Raum zwischen oberen Leisten und dem
     Legenden-Footer; das Board scrollt darin (min-height:0 erlaubt Schrumpfen
     unter die Inhaltshoehe). In Nicht-Flex-Kontexten (Briefing-Grid) ignoriert. */
  flex: 1 1 auto;
  min-height: 0;
  /* Etagen-Modell des Achsenkopfs: Kalender-Zeile (nur Tag-Chip + Ticks) und
     IMMER vorhandenes Marker-Band (Pins/Kapseln/Jetzt-Pill/Rand-Marker).
     Einzige Masse-Quelle - auf dem Wrap, damit auch Jetzt-Overlay und
     Rand-Marker (Geschwister des Boards) dieselben Werte sehen. Kopfhoehe
     konstant: cal + 1px Band-Border + band + 1px Achsen-Border. */
  --axis-cal-h: 20px;
  --axis-band-h: 18px;
}

/* ===== Zeit-Navigator (Uebersichtsstreifen, Mockup ZN Weg C) ===== */
/* Schmale Leiste ueber dem Board: links Einklapp-Toggle in der Breite der
   Zeilenlabel-Spalte (Grid-Spalten setzt renderTimeNavigator passend zur
   tatsaechlichen Labelbreite), rechts der Streifen ueber die Zeitflaeche. */
.time-navigator {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 298px minmax(0, 1fr);
  border-bottom: 2px solid var(--grid-strong);
  background: var(--surface);
}

.time-navigator[hidden] {
  display: none;
}

.time-navigator .tn-label {
  display: flex;
  align-items: center;
  min-width: 0;
  border-right: 1px solid var(--grid-line);
}

/* Kompakter, gedaempfter Kopf (VP5): buendig zur Unterkante der Labelspalte
   statt frei schwebend in der Flaeche. */
.time-navigator .tn-toggle {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  min-height: 0;
  width: 100%;
  height: 100%;
  padding: 3px 10px 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: color-mix(in srgb, var(--muted) 75%, transparent);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}

.time-navigator .tn-toggle:hover {
  color: var(--text);
}

.time-navigator .tn-caret {
  flex: 0 0 auto;
  font-size: 9px;
  color: var(--ink, var(--muted));
}

.time-navigator .tn-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Eingeklappt: nur die schmale Toggle-Zeile, keine Streifenflaeche. */
.time-navigator.collapsed .tn-collapsed-track {
  display: block;
}

.time-navigator .tn-strip {
  position: relative;
  height: 54px;
  min-width: 0;
  overflow: hidden;
  cursor: crosshair;
  touch-action: none;
}

.time-navigator.dragging .tn-strip {
  cursor: grabbing;
}

/* Gemeinsame Marken */
.time-navigator .tn-day {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--grid-line);
  pointer-events: none;
}

/* Wochenend-Schattierung (Sa/So, analog kairos-local). */
.time-navigator .tn-we {
  position: absolute;
  top: 0;
  bottom: 0;
  background: color-mix(in srgb, var(--text) 4%, transparent);
  pointer-events: none;
}

/* Aktivitaets-Puls: neue Events seit dem letzten Poll leuchten einmal kurz
   auf (Animation laeuft genau einmal und endet unsichtbar). */
.time-navigator .tn-pulse {
  position: absolute;
  top: 10px;
  bottom: 0;
  border-radius: 3px;
  background: color-mix(in srgb, var(--accent) 30%, transparent);
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  animation: tnPulseFade 1.6s ease-out 1;
}

@keyframes tnPulseFade {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .time-navigator .tn-pulse { display: none; }
}

.time-navigator .tn-fold {
  position: absolute;
  top: 12px;
  bottom: 2px;
  min-width: 3px;
  background: repeating-linear-gradient(135deg, transparent 0 4px, color-mix(in srgb, var(--text) 14%, transparent) 4px 5px);
  border-inline: 1px solid var(--grid-strong);
  z-index: 3;
  pointer-events: none;
}

.time-navigator .tn-sect {
  position: absolute;
  top: 1px;
  z-index: 4;
  padding-left: 4px;
  border-left: 1px solid var(--grid-strong);
  color: var(--muted);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}

.time-navigator .tn-ms {
  position: absolute;
  top: 12px;
  bottom: 2px;
  width: 1.5px;
  background: var(--accent);
  z-index: 4;
  pointer-events: none;
}

.time-navigator .tn-now {
  position: absolute;
  top: 10px;
  bottom: 0;
  width: 2px;
  background: var(--accent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 60%, transparent);
  z-index: 5;
  pointer-events: none;
}

/* Renderer M: Mini-Zeilen + Milliblock-Kopien (analog kairos-local) */
.time-navigator .tn-sep {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: color-mix(in srgb, var(--grid-line) 60%, transparent);
  pointer-events: none;
}

.time-navigator .tn-lanecolor {
  position: absolute;
  left: 0;
  width: 2px;
  z-index: 3;
  pointer-events: none;
}

.time-navigator .tn-lost {
  position: absolute;
  left: 0;
  right: 0;
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--muted) 22%, transparent) 0 3px, transparent 3px 6px);
  pointer-events: none;
}

.time-navigator .tn-blk {
  position: absolute;
  min-width: 2px;
  border-radius: 1px;
  z-index: 2;
  /* Klickbar (fokussiert den Block in der Matrix) + Hover-Tooltip. */
  cursor: pointer;
}

.time-navigator .tn-blk:hover {
  filter: brightness(1.25);
}

.time-navigator .tn-blk.ist {
  opacity: .55;
}

/* Teilnehmer-Echos: verblasste Projektion (Klick springt zum Master-Block in
   der Ursprungszeile). Bewusst blasser als IST; der Legenden-Filter
   (.filtered-out, steht dahinter) gewinnt weiterhin. */
.time-navigator .tn-blk.echo {
  opacity: .3;
}

.time-navigator .tn-blk.conflict {
  outline: 1px solid var(--accent);
  opacity: 1;
  z-index: 3;
}

/* Legenden-Filter dimmt mit (gleiche Klasse wie die Matrix-Bloecke). */
.time-navigator .tn-blk.filtered-out {
  opacity: .12;
}

/* Renderer N: Dichteprofil (SOLL stahlblau, IST akzentfarben, gestapelt
   nebeneinander; bewusst farbarm und ruhig - Mockup ZN Variante N). */
.time-navigator {
  --tn-steel: #7d9bb8;
}

:root[data-theme="light"] .time-navigator {
  --tn-steel: #3d6088;
}

.time-navigator .tn-dens {
  position: absolute;
  bottom: 3px;
  min-width: 2px;
  border-radius: 1.5px 1.5px 0 0;
  background: color-mix(in srgb, var(--tn-steel) 55%, transparent);
  z-index: 2;
  pointer-events: none;
}

.time-navigator .tn-dens.act {
  background: color-mix(in srgb, var(--accent) 55%, transparent);
}

/* Konflikte als rote Punkte am oberen Rand (die Antwort auf "wo brennts"
   bleibt auch ohne Block-Kopien erhalten). */
.time-navigator .tn-conf {
  position: absolute;
  top: 12px;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: var(--accent);
  z-index: 4;
  pointer-events: none;
}

/* Grauer Sockel unter dem Profil: es existieren nicht entschluesselbare
   Events (der Umschlag traegt keine Zeiten - WO sie liegen, ist unbekannt). */
.time-navigator .tn-lost-base {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--muted) 35%, transparent) 0 3px, transparent 3px 6px);
  z-index: 1;
  pointer-events: none;
}

/* Ausschnitt-Fenster: persistiert optisch ruhig (keine Transition - Lehre aus
   kairos-local: animierte Viewports springen beim Re-Render). Pointer-
   transparent, damit Milliblocks darunter hover- und klickbar bleiben - die
   Zieh-Erkennung laeuft geometrisch in bindTimeNavigator. */
.time-navigator .tn-vp {
  position: absolute;
  top: 10px;
  bottom: 0;
  border: 1.5px solid var(--text);
  border-radius: 4px;
  background: color-mix(in srgb, var(--text) 7%, transparent);
  pointer-events: none;
  z-index: 6;
}

.time-navigator .tn-vp::before,
.time-navigator .tn-vp::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 14px;
  border-radius: 2px;
  background: var(--text);
}

.time-navigator .tn-vp::before { left: -2px; }
.time-navigator .tn-vp::after { right: -2px; }

@media print {
  .time-navigator { display: none !important; }
}

/* ===== Kategorie-Legende (Sticky-Footer, analog kairos-local) ===== */
.matrix-legend {
  /* Fester Flex-Footer am unteren Rand der Matrix-Flaeche (Board scrollt
     darueber intern) - immer sichtbar, kein Scrollen noetig. */
  flex: 0 0 auto;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 7px 10px;
  flex-wrap: wrap;
  padding: 7px 12px;
  border-top: 1px solid var(--grid-strong);
  background: var(--surface);
}
.matrix-legend[hidden] { display: none; }
/* Legenden-Politur (VP5): Eyebrow-Titel wie in den Popover-Zonen, Chips auf
   ruhiger Pill-Hoehe. */
.matrix-legend-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint, var(--muted));
}
.matrix-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 24px;
  padding: 3px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
}
.matrix-legend-item:hover { border-color: var(--line); background: var(--surface-2); }
.matrix-legend-item.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.matrix-legend-swatch {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
}
/* Block ausserhalb des aktiven Kategorie-Filters: gedimmt, nicht versteckt.
   Die Kombi-Regel hat Vorrang vor .matrix-block.untracked (opacity .8, gleiche
   Spezifitaet aber spaeter in der Datei) - sonst blieben gefilterte, nicht
   getrackte Bloecke bei .8 statt gedimmt. */
.matrix-block.filtered-out,
.matrix-block.untracked.filtered-out { opacity: .18; }

/* ===== Matrix-Suche (Mockup SU) ===== */
/* Treffer-Hervorhebung: bewusst bernsteinfarben (#f59e0b), klar getrennt von
   Rot (Akzent/Konflikt), Blau (Auswahl) und der Akzent-Puls-Markierung des
   Aktivitaetssprungs. Kontur INNEN (negativer outline-offset, wie .focus) -
   die Spur-/Board-Hoehe ist knapp, eine aussen liegende Kontur wuerde oben und
   unten vom Track-Overflow abgeschnitten. */
.matrix-block.search-match {
  outline: 2px solid #f59e0b;
  outline-offset: -2px;
  z-index: 5;
}
.matrix-block.search-current {
  outline: 2px solid #f59e0b;
  outline-offset: -2px;
  z-index: 6;
}
/* Aktueller Treffer zusaetzlich flaechig bernstein getoent, damit er sich klar
   vom blossen Treffer abhebt - als Overlay innerhalb des Blocks (wird nicht
   abgeschnitten). */
.matrix-block.search-current::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #f59e0b;
  opacity: .22;
  pointer-events: none;
}
/* Treffer bleiben sichtbar, auch wenn ein Kategorie-Filter dimmt oder der
   Block nicht getrackt ist (sonst waere der gesuchte Block kaum zu sehen). */
.matrix-block.search-match.filtered-out,
.matrix-block.search-current.filtered-out,
.matrix-block.untracked.search-match,
.matrix-block.untracked.search-current { opacity: 1; }

/* Lupen-Button in der Matrix-Werkzeugleiste. */
.matrix-search-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.matrix-search-open svg { width: 15px; height: 15px; display: block; }

/* Schwebende Such-Leiste oben mittig ueber dem Board (analog kairos-local). */
.matrix-search-bar {
  position: fixed;
  top: calc(var(--topbar-h, 50px) + 12px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 6px 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 9px;
  box-shadow: var(--shadow);
}
.matrix-search-bar[hidden] { display: none; }
.matrix-search-icon {
  display: inline-flex;
  align-items: center;
  color: var(--muted);
}
.matrix-search-icon svg { width: 15px; height: 15px; display: block; }
.matrix-search-bar input {
  width: 260px;
  padding: 6px 10px;
  font: inherit;
  font-weight: 500;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.matrix-search-bar input:focus { outline: none; border-color: var(--accent); }
.matrix-search-count {
  min-width: 50px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.matrix-search-count.zero { color: var(--warning); }
.matrix-search-sep {
  width: 1px;
  align-self: stretch;
  margin: 2px 1px;
  background: var(--line);
}
.matrix-search-nav {
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  border-radius: 6px;
  cursor: pointer;
}
.matrix-search-nav:hover { border-color: var(--line); color: var(--text); }
.matrix-search-nav:disabled { opacity: .35; cursor: not-allowed; }
.matrix-search-nav:disabled:hover { border-color: transparent; color: var(--muted); }
.matrix-search-nav svg { width: 15px; height: 15px; display: block; }

@media (max-width: 700px) {
  .matrix-search-bar { width: min(94vw, 420px); }
  .matrix-search-bar input { width: 100%; flex: 1; }
}

/* IST-Schnellerfassung (Mockup SK): schwebende Leiste oben mittig, analog der
   Such-Leiste, aber zweizeilig (Eingabe + Live-Vorschau). */
.quick-capture-bar {
  position: fixed;
  top: calc(var(--topbar-h, 50px) + 12px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 41;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(96vw, 560px);
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
}
.quick-capture-bar[hidden] { display: none; }
/* @Zeilen-Chips (Plan MT-U S3): reine Telefon-Hilfe, Desktop ist keyboard-first. */
.qc-lanes { display: none; }
.quick-capture-bar .qc-line { display: flex; align-items: center; gap: 8px; }
.qc-prompt { flex: 0 0 auto; color: var(--accent); font-weight: 800; font-size: 16px; line-height: 1; padding-left: 2px; }
.quick-capture-bar input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  font: inherit;
  font-weight: 500;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--accent);
  border-radius: 7px;
}
.quick-capture-bar input:focus { outline: none; }
.qc-submit, .qc-close {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  border-radius: 6px;
  cursor: pointer;
}
.qc-submit { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.qc-submit:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.qc-close:hover { border-color: var(--line); color: var(--text); }
.qc-submit svg, .qc-close svg { width: 16px; height: 16px; display: block; }
.qc-preview { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-left: 4px; }
.qc-lbl {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 2px;
}
.qc-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  white-space: nowrap;
}
.qc-chip-k { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.qc-chip-v { color: var(--text); }
.qc-chip-mut { color: var(--muted); font-weight: 500; font-style: italic; }
.qc-chip-warn { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 45%, transparent); }
.qc-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }

@media (max-width: 700px) {
  /* Schnellerfassung als Bottom-Sheet (Plan MT-U S3): Eingabe + @Zeilen-Chips
     + Vorschau ueber der Bottom-Nav; grosse Ziele fuer den Daumen. */
  .quick-capture-bar {
    top: auto;
    bottom: calc(62px + env(safe-area-inset-bottom));
    left: 0;
    right: 0;
    transform: none;
    width: auto;
    border-radius: 14px 14px 0 0;
    border-bottom: 0;
    z-index: 92;
    padding: 10px 12px;
  }
  .quick-capture-bar input { height: 44px; font-size: 16px; }
  .quick-capture-bar .qc-submit { width: 44px; height: 44px; }
  .quick-capture-bar .qc-close { width: 44px; height: 44px; }
  .qc-lanes:not([hidden]) { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0; scrollbar-width: none; }
  .qc-lane-chip {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--bg);
    color: var(--text);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
  }
  .qc-lane-chip.on { border-color: var(--accent); }
  .qc-lane-chip .qc-dot { width: 8px; height: 8px; border-radius: 50%; }
}

/* ===== Relative Zeitanker - Ablauf-Komponist (Stufe 1) ===== */
.seq-steps { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 10px; }
.seq-step { border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); padding: 10px 12px; }
.seq-step-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.seq-num { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 6px; text-align: center; font: 700 12px/22px ui-monospace, Consolas, monospace; color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); }
.seq-title { flex: 1; min-width: 0; }
.seq-mini { display: inline-flex; gap: 4px; flex: 0 0 auto; }
.seq-ico { width: 28px; height: 28px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--muted); cursor: pointer; }
.seq-ico:hover:not(:disabled) { border-color: var(--accent); color: var(--text); }
.seq-ico:disabled { opacity: .4; cursor: default; }
.seq-ico-del:hover:not(:disabled) { border-color: var(--danger); color: var(--danger); }
.seq-grid, .seq-anchor-fields { display: grid; grid-template-columns: 1fr; gap: 8px; align-items: end; }
@media (min-width: 380px) {
  .seq-grid { grid-template-columns: 1fr auto; }
  .seq-anchor-fields { grid-template-columns: 1fr auto; }
}
.seq-f { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--muted); }
/* Globale label-Margins (label{margin:10px 0} / .drawer label{margin:7px 0})
   neutralisieren - sonst werden die <label>-Spalten (Kategorie/Vorgaenger)
   gegenueber den <div>-Stepper-Spalten (Dauer/Puffer) vertikal versetzt. */
.seq-step .seq-f { margin: 0; }
.seq-f > span { font-weight: 600; }
.seq-f input, .seq-f select, .seq-title { font: inherit; font-size: 13px; height: 32px; box-sizing: border-box; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--text); }
/* Rastergebundener Stepper (Dauer/Puffer/Offset, nur 15-min-Schritte). Gleiche
   Hoehe wie Inputs/Selects, damit Kategorie/Dauer bzw. Vorgaenger/Puffer auf
   einer Linie liegen. */
.seq-stepper { display: inline-flex; align-items: stretch; align-self: flex-start; height: 32px; box-sizing: border-box; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--bg); }
.seq-stepbtn { width: 28px; height: 100%; padding: 0; border: 0; background: var(--bg); color: var(--muted); cursor: pointer; font: 600 15px/1 inherit; }
.seq-stepbtn:hover { color: var(--text); background: var(--surface-2); }
.seq-stepval { display: inline-flex; align-items: center; justify-content: center; min-width: 70px; padding: 0 4px; font: 600 12px/1 ui-monospace, Consolas, monospace; color: var(--text); }
.seq-anchor { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.seq-anchor-seg { display: inline-flex; align-self: flex-start; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.seq-anchor-seg button { font: 600 11px/1 inherit; padding: 7px 11px; background: var(--bg); color: var(--muted); border: 0; cursor: pointer; }
.seq-anchor-seg button.on { background: var(--accent); color: #fff; }
.seq-anchor-seg button:disabled { opacity: .4; cursor: default; }
.seq-rel { margin-top: 8px; font: 500 11px/1.35 ui-monospace, Consolas, monospace; color: var(--muted); }
.seq-add { width: 100%; }
.seq-place { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 12px; }
.seq-place h3 { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.seq-linked { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); margin-top: 4px; }

/* Vorlagen-Leiste im Ablauf-Drawer (Stufe 3). */
.seq-templates { border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 12px; }
.seq-tpl-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.seq-tpl-form { margin-top: 10px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: 8px; background: color-mix(in srgb, var(--accent) 6%, var(--panel)); display: flex; flex-direction: column; gap: 8px; }
.seq-tpl-shared { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); margin: 0; }
.seq-tpl-form-btns { display: flex; gap: 8px; }

/* ===== Custom-Dropdown (Mockup DD): einheitliche Selects ueber native <select> ===== */
.cs { position: relative; display: block; }
.cs .cs-native { display: none; }
.cs-trigger { box-sizing: border-box; width: 100%; height: 32px; display: flex; align-items: center; gap: 8px; justify-content: space-between; padding: 0 8px 0 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--bg); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.cs-trigger:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.cs.cs-open .cs-trigger, .cs-trigger:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent); }
.cs-trigger:disabled { opacity: .5; cursor: not-allowed; }
.cs-value { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.cs-value > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-value.cs-placeholder > span { color: var(--muted); }
.cs-swatch { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); }
.cs-caret { display: inline-flex; color: var(--muted); flex: 0 0 auto; transition: transform var(--mo-fast) var(--mo-ease); }
.cs-caret svg { width: 15px; height: 15px; display: block; }
.cs.cs-open .cs-caret { transform: rotate(180deg); }
/* reduced-motion deckt die zentrale Token-Weiche ab (Konzept AM). */
/* Panel wird beim Oeffnen ans <body> portiert und per JS (position:fixed) am
   Trigger ausgerichtet - so blaeht es keinen Card-/Drawer-Scrollbereich auf. */
.cs-panel { position: fixed; z-index: 1000; max-height: 264px; overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 4px; }
.cs-panel[hidden] { display: none; }
.cs-group { font: 700 9.5px/1 ui-monospace, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 9px 9px 4px; }
.cs-opt { box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px 9px; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 13px; text-align: left; border-radius: 6px; cursor: pointer; }
.cs-opt > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 1 auto; min-width: 0; }
.cs-opt:hover, .cs-opt.cs-active { background: var(--surface-2); }
.cs-opt.cs-sel { background: color-mix(in srgb, var(--accent) 14%, transparent); }
/* Haken direkt hinter dem Text (nur bei der ausgewaehlten Option), statt weit
   rechts schwebend. */
.cs-check { flex: 0 0 auto; margin-left: 6px; color: var(--accent); display: inline-flex; }
.cs-check svg { width: 15px; height: 15px; display: block; }
.cs-opt.cs-disabled { opacity: .45; cursor: default; }

/* Verknuepfung (Stufe 2): Editor-Panel + Badge am Matrix-Block. */
.block-link { border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--accent) 6%, var(--panel)); padding: 12px 14px; margin-top: 12px; }
.block-link-head { display: flex; align-items: center; gap: 8px; font: 800 11px/1 inherit; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.block-link-head svg { width: 15px; height: 15px; }
.block-link-desc { margin: 8px 0 10px; font-size: 13px; color: var(--text); }
.block-link-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* Verknuepfungs-Eck-Marker am Matrix-Block (breitenunabhaengig sichtbar). */
.matrix-block-link-mark { position: absolute; top: 2px; right: 3px; width: 11px; height: 11px; color: var(--accent); pointer-events: none; opacity: .9; }
.matrix-block-link-mark svg { width: 100%; height: 100%; display: block; }
.matrix-block-grouped .matrix-block-title { padding-right: 13px; }

/* ===== Zeitbereiche falten (Mockup ZF) ===== */
/* Faltband als Overlay in jedem Track-Body (wie Gitterlinien): schmal,
   schraffiert, volle Spurhoehe, klickbar zum Auf-/Zuklappen (Peek). */
/* Solide, durchgehende Fuellung (kein Diagonalmuster) - damit das Band ueber
   alle Zeilen als EIN zusammengehoeriger Bereich wirkt statt pro Zeile gestueckelt.
   z-index 0 + frueh im DOM: liegt ueber Gitter/Zeilenton, aber unter den Bloecken
   (ein durchlaufender Block bleibt sichtbar). */
/* WICHTIG: pointer-events:none - das Band/der Peek-Bereich fangen KEINE Klicks/
   Gesten ab, damit Drag-to-Create Vorrang behaelt. Auf-/Zuklappen laeuft ueber
   die Kapsel (Pill) im Achsenkopf. Die data-Attribute bleiben nur fuer das
   gruppierte Hover (per querySelectorAll). */
.matrix-fold-band {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
  /* "Eingeklappt" statt "hervorgehoben": leicht eingesenkte (gepresste) Optik
     mit Schatten an den Kanten + durchgehende Falt-Naht in der Mitte. Im Dunkel-
     modus ABGEDUNKELT (schwarzer Schleier), damit der Bereich zuruecktritt statt
     aufzuhellen; im Hellmodus ein dezenter dunkler Schleier (siehe unten). */
  background: rgba(0, 0, 0, .32);
  border-left: 1px solid var(--grid-strong);
  border-right: 1px solid var(--grid-strong);
  box-shadow: inset 5px 0 6px -4px rgba(0, 0, 0, .5), inset -5px 0 6px -4px rgba(0, 0, 0, .5);
}
:root[data-theme="light"] .matrix-fold-band,
:root[data-theme="light"] .matrix-fold-axis-band { background: rgba(0, 0, 0, .07); }
/* Durchgehende vertikale Falt-Naht (mittig) - zeilenunabhaengig, wirkt als EINE
   Linie ueber alle Spuren und signalisiert die zusammengeraffte Zeit. */
.matrix-fold-band::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  border-left: 1px dashed color-mix(in srgb, var(--muted) 60%, transparent);
}
/* Hover gruppiert (JS setzt .band-hover auf ALLE Segmente derselben Faltung). */
.matrix-fold-band.band-hover {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-color: var(--accent);
}
.matrix-fold-band.band-hover::before { border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
/* Gepeekter (temporaer aufgeklappter) Bereich: dezente Akzent-Toenung ueber
   alle Spuren, gestrichelte Kanten - klar als "offen" erkennbar. Rein visuell. */
.matrix-fold-peek {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  border-left: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--line));
  border-right: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--line));
}
.matrix-fold-peek.peek-hover { background: color-mix(in srgb, var(--accent) 15%, transparent); }
.matrix-fold-cap.band-hover { border-color: var(--accent); color: var(--text); }
/* Achsenkopf-Streifen: heben den gefalteten/aufgeklappten Bereich ueber BEIDE
   Etagen des Kopfs ab (liegen direkt in .matrix-time-ticks, hinter
   Kalender-Zeile und Marker-Band; die Kapseln sitzen im Band darueber). */
.matrix-fold-axis-band, .matrix-fold-axis-peek {
  position: absolute;
  top: 0;
  bottom: 0;
  pointer-events: none;
}
.matrix-fold-axis-band {
  background: rgba(0, 0, 0, .32);
  border-left: 1px solid var(--grid-strong);
  border-right: 1px solid var(--grid-strong);
}
.matrix-fold-axis-peek {
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border-left: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--line));
  border-right: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--line));
}
/* Kapseln im Marker-Band: Label + gefaltete Dauer + verborgener Zaehler.
   Auf die innere Bandhoehe getrimmt (line-height 13 + 2x1px Padding + 2x1px
   Rahmen = 17px = Band minus border-top), damit die Kapsel das Band
   konstruktiv nicht verlassen kann. */
.matrix-fold-caps { position: absolute; left: 0; top: 0; height: 100%; pointer-events: none; }
.matrix-fold-cap {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 220px;
  min-height: 0;
  padding: 1px 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  font-size: 10px;
  font-weight: 800;
  line-height: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: zoom-in;
  pointer-events: auto;
  /* Unter den sticky Label-/Spur-Spalten (z-index 2), damit die Pill nicht ueber
     den fixierten linken Rand ragt. */
  z-index: 1;
}
.matrix-fold-cap:hover { border-color: var(--accent); }
.matrix-fold-cap.peeked { border-style: dashed; color: var(--muted); cursor: zoom-out; }
.matrix-fold-cap .mfc-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 12px;
  height: 12px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 8.5px;
}
.matrix-fold-cap .mfc-lock { display: inline-flex; color: var(--muted); }
.matrix-fold-cap .mfc-lock svg { width: 9px; height: 9px; display: block; }

/* ---- Falt-Drawer ---- */
.fold-body { padding: 4px 16px 16px; }
.fold-intro { margin: 6px 0 12px; color: var(--muted); font-size: 12.5px; }
.fold-presets { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.fold-presets .chip,
.fold-form .chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel); color: var(--text); font-size: 12px; font-weight: 700; cursor: pointer;
}
.fold-presets .chip:hover { border-color: var(--accent); }
.fold-presets .chip.suggest { border-style: dashed; }
.fold-h { margin: 16px 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.fold-list { display: grid; gap: 8px; }
.fold-empty { margin: 0; color: var(--muted); font-size: 12.5px; }
.fold-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
}
.fold-row-copy { min-width: 0; flex: 1; }
.fold-row-copy strong { display: block; font-size: 12.5px; }
.fold-row-copy span { color: var(--muted); font-size: 11px; }
.fold-row-act { display: inline-flex; gap: 5px; flex: 0 0 auto; }
.fold-scope {
  display: inline-block; margin-left: 4px; padding: 0 6px;
  border: 1px solid var(--line); border-radius: 999px;
  font-size: 9.5px; font-weight: 700; color: var(--muted);
}
.fold-scope.shared { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.fold-icon {
  width: 28px; height: 28px; min-height: 0; padding: 0; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer;
}
.fold-icon:hover { color: var(--text); border-color: var(--accent); }
.fold-icon:disabled { opacity: .4; cursor: not-allowed; }
.fold-icon.on { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.fold-icon svg { width: 14px; height: 14px; }
.fold-hidden-note { margin: 8px 0 0; color: var(--muted); font-size: 11.5px; }
.linklike { border: 0; background: transparent; color: var(--accent); cursor: pointer; font: inherit; min-height: 0; padding: 0; text-decoration: underline; }
.fold-form { display: grid; gap: 10px; }
.fold-name { display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
.fold-name input { width: 100%; }
.fold-times { display: flex; gap: 10px; }
.fold-times label { display: grid; gap: 4px; font-size: 12px; color: var(--muted); flex: 1; }
.fold-weekdays { display: flex; flex-wrap: wrap; gap: 6px; }
/* Wochentage als Pill-Mehrfachauswahl (B3): die Checkbox selbst ist versteckt,
   der Pill faerbt sich ueber :has(:checked). */
.fold-wd { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); color: var(--muted); font-size: 11.5px; font-weight: 700; cursor: pointer; user-select: none; }
.fold-wd input { position: absolute; opacity: 0; width: 0; height: 0; min-width: 0; pointer-events: none; }
.fold-wd:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--surface-2)); color: var(--text); }
.fold-check { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text); cursor: pointer; }

/* Inline-Editor (A1) einer aktiven Faltung. */
.fold-edit {
  margin: 6px 0 12px;
  padding: 12px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 6%, var(--panel));
  display: grid;
  gap: 10px;
}
.fold-edit-title {
  margin: 0;
  color: var(--accent);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.fold-edit-actions { display: flex; gap: 8px; }

/* Entwurfsmodus (Mockup EM): Statusleiste oben in der Matrix - sichtbar nur bei
   aktivem Entwurf (renderDraftBar). Akzent-getoenter, fester Flex-Streifen ueber
   dem intern scrollenden Board. */
.matrix-draftbar {
  flex: 0 0 auto;
  z-index: 6;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding: 8px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, var(--grid-strong));
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  font-size: 12.5px;
}
.matrix-draftbar[hidden] { display: none; }
.matrix-draftbar .dm-dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.matrix-draftbar .dm-text { color: var(--text); }
.matrix-draftbar .dm-text strong { font-weight: 800; }
.matrix-draftbar .dm-sub { color: var(--muted); margin-left: 6px; }
.matrix-draftbar .dm-count {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}
.matrix-draftbar .dm-sp { flex: 1 1 auto; }
.matrix-draftbar button {
  flex: 0 0 auto;
  border-radius: 7px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--line);
}
.matrix-draftbar .dm-discard { background: transparent; color: var(--text); }
.matrix-draftbar .dm-discard:hover { border-color: var(--danger); color: var(--danger); }
.matrix-draftbar .dm-commit {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.matrix-draftbar .dm-commit:hover { filter: brightness(1.06); }

/* Entwurfs-Markierung eines Blocks (Mockup EM): GESTRICHELTER Umriss als
   "provisorisch/noch nicht gespeichert" - dieselbe Sprache wie der Geisterblock,
   klar verschieden vom soliden Auswahl-/Konflikt-Rahmen und unabhaengig von der
   Kategoriefarbe. INNENliegend (outline-offset negativ), damit der Rahmen auf
   allen vier Seiten innerhalb der Block- und Zeilenhoehe bleibt und oben/unten
   nicht von der Zeile abgeschnitten wird. Etwas mehr Innenabstand, damit der Text
   nicht unter den Strich rutscht. Neu vs. geaendert steht im Tooltip. */
/* Entwurf: GEPUNKTETER Innen-Umriss (Mockup BS-D: gestrichelt gehoert
   seit der Segment-Umstellung eindeutig der SOLL-Spur). */
.matrix-block.draft {
  outline: 2px dotted color-mix(in srgb, var(--accent) 88%, transparent);
  outline-offset: -3px;
  padding: 3px 10px;
}
.matrix-block.draft-changed { outline-color: var(--warning); }

/* Touch-Zoom-Presets (Mockup FZ/B1): schlanke Leiste ueber dem Board, nur auf
   Touch-Geraeten (Sichtbarkeit steuert renderMatrixZoomBar via hidden). */
.matrix-zoom-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--grid-line);
  background: var(--surface-2);
}
.matrix-zoom-bar[hidden] { display: none; }
.matrix-zoom-bar .mz-label {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.matrix-zoom-bar .mz-seg {
  display: flex;
  flex: 1;
  gap: 3px;
  max-width: 380px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}
.matrix-zoom-bar .mz-btn {
  flex: 1;
  min-height: 32px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.matrix-zoom-bar .mz-btn.on {
  background: var(--surface-2);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line);
}

/* EINE Steuer-Zeile der Telefon-Matrix (Plan MK-U S3): der Wrapper ist am
   Desktop/Tablet display:contents (aendert dort nichts); unter 700 px legt er
   Scope-Pille und Fenster-Segment in EINE Flex-Zeile. Das Label "Fenster"
   entfaellt auf dem Telefon - das Segment erklaert sich selbst. */
.matrix-ctl-row { display: contents; }
@media (max-width: 700px) {
  .matrix-ctl-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--grid-line); background: var(--surface); }
  /* Die Kinder verlieren ihr eigenes Leisten-Chrome - die Zeile traegt es. */
  .matrix-ctl-row .phone-focus-bar { flex: 0 1 auto; min-width: 0; padding: 0; border: 0; background: transparent; }
  .matrix-ctl-row .phone-scope-bar { flex: 0 0 auto; padding: 0; border: 0; background: transparent; }
  .matrix-ctl-row .matrix-zoom-bar { flex: 1; justify-content: flex-end; padding: 0; border: 0; background: transparent; }
  .matrix-ctl-row .mz-label { display: none; }
  .matrix-ctl-row .mz-seg { flex: 0 1 auto; max-width: none; }
  .matrix-ctl-row .mz-btn { padding: 0 10px; }
  /* Sind beide Leisten versteckt (Desktop-Ansicht, kein Board), verschwindet
     auch die Zeile selbst - kein leerer Streifen. */
  .matrix-ctl-row:not(:has(> :not([hidden]))) { display: none; }
}

.now-edge {
  position: absolute;
  /* Feste Position im Marker-Band (wie die Jetzt-Pill); kompakt, damit der
     Rand-Marker im Band bleibt - keine JS-Messung. */
  top: calc(var(--axis-cal-h) + 2px);
  z-index: 12;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 0;
  padding: 0 7px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--panel);
  color: var(--accent);
  font-size: 9.5px;
  /* Gesamthoehe = line-height + 2x Rahmen = 15px, buendig zur Jetzt-Pill
     (ragt nicht aus dem Marker-Band). */
  line-height: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow);
}

.now-edge[hidden] {
  display: none;
}

.now-edge-left {
  left: calc(var(--label-w) + 58px + 6px);
}

.now-edge-right {
  right: 6px;
}

/* Verzugs-Badge am Rand-Marker (Mockup M4/B1): der Zaehler wirkt auch,
   wenn JETZT gerade off-screen ist. */
.now-edge-late {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 3px;
  color: var(--warning);
  font-weight: 800;
}

.now-edge-late[hidden] {
  display: none;
}

.now-edge-late svg {
  width: 10px;
  height: 10px;
}

/* Beschaeftigt-Schleier beim Zeitbereichswechsel: liegt ueber dem Board
   (matrix-board-wrap ist position:relative), faengt Klicks und blendet erst
   nach kurzer Verzoegerung ein - schnelle Wechsel bleiben schleierfrei. */
.matrix-busy {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  opacity: 0;
  animation: matrixBusyIn 160ms ease 150ms forwards;
}

.matrix-busy[hidden] {
  display: none;
}

.matrix-busy-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 13px;
  color: var(--text);
}

.matrix-busy-spin {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  animation: matrixBusySpin 700ms linear infinite;
}

@keyframes matrixBusyIn {
  to { opacity: 1; }
}

@keyframes matrixBusySpin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .matrix-busy { animation: none; opacity: 1; }
  .matrix-busy-spin { animation: none; }
}

/* Custom Date/Time-Picker */
.dtp-wrap {
  position: relative;
  display: block;
}

.dtp-wrap > input[type="datetime-local"],
.dtp-wrap > input[type="date"],
.dtp-wrap > input[type="time"] {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.dtp-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 32px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.dtp-trigger:hover {
  border-color: var(--accent);
}

.dtp-trigger.open {
  border-color: var(--accent);
  color: var(--accent);
}

.dtp-trigger:disabled {
  opacity: .6;
  cursor: default;
}

.dtp-display {
  flex: 1;
  min-width: 0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dtp-display.empty {
  color: var(--muted);
}

.dtp-chev {
  color: var(--muted);
  font-size: 11px;
}

.dtp-pop {
  position: fixed;
  z-index: 200;
  width: 300px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .34);
}

.dtp-month {
  display: flex;
  align-items: center;
  gap: 4px;
}

.dtp-month-label {
  flex: 1;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
}

.dtp-nav {
  min-width: 30px;
  padding: 4px 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dtp-nav svg { width: 14px; height: 14px; display: block; }

.dtp-weekdays,
.dtp-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.dtp-weekdays > div {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}

.dtp-weekdays > div.we {
  color: var(--accent);
}

.dtp-day {
  height: 30px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.dtp-day:hover {
  background: var(--surface-2);
  border-color: var(--line);
}

.dtp-day.muted {
  color: var(--muted);
}

.dtp-day.weekend {
  color: var(--muted);
}

.dtp-day.today {
  border-color: var(--accent);
  color: var(--accent);
}

.dtp-day.selected {
  background: var(--accent);
  color: #fff;
  border-color: transparent;
}

.dtp-time {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dtp-time-section {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.dtp-time-lbl {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}

.dtp-hour-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 3px;
}

.dtp-min-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
}

.dtp-hour-grid button,
.dtp-min-grid button {
  min-height: 0;
  padding: 4px 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.dtp-hour-grid button:hover,
.dtp-min-grid button:hover {
  border-color: var(--accent);
}

.dtp-hour-grid button.selected,
.dtp-min-grid button.selected {
  background: var(--accent);
  color: #fff;
  border-color: transparent;
}

.dtp-foot {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dtp-foot-spacer {
  flex: 1;
}

.dtp-foot button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  padding: 6px;
}

.dtp-foot button svg { width: 16px; height: 16px; display: block; }

.matrix-block {
  position: absolute;
  box-sizing: border-box;
  min-width: 3px;
  /* Zweizeilig (Mockup M7): Titel oben, Zeit + Meta darunter. Inhalt OBEN
     ausgerichtet (flex-start), damit der Titel immer auf derselben Hoehe
     sitzt - auch wenn Zeile 2 (Zeit) bei schmalen Bloecken entfaellt. So
     liegen alle Block-Titel auf einer Linie. */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 1px;
  /* Eigener Stacking-Context, damit der Fortschritts-Layer (z-index -1)
     ueber dem Block-Hintergrund, aber unter dem Text liegt. */
  z-index: 0;
  /* Segment statt Karte (Mockup BS): flacher Radius, kein Schwebe-Schatten,
     kein Glanz-Ring - Trennung entsteht durch Flaechenkontrast zur Spur. */
  border: 1px solid var(--line);
  border-radius: var(--blk-r);
  padding: 2px 8px;
  background: var(--panel);
  overflow: hidden;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.15;
  white-space: nowrap;
  cursor: pointer;
}

/* Schmaler Block (nur Titel): Layout bleibt die Spalte mit oben sitzendem
   Titel (gleiche Hoehe wie bei zweizeiligen Bloecken); Zeile 2 entfaellt. */
.matrix-block.oneline .matrix-block-sub {
  display: none;
}

/* Spur-Grundform (Mockup BS, Variante A): SOLL (plan) = rundum GESTRICHELTER
   kategoriefarbener Umriss + leichte Toenung (gestrichelt gehoert ab jetzt
   eindeutig der Spur; der Entwurf ist gepunktet); IST (act) = randloser
   Vollton. Kategoriefarbe aus --block-c (Fallback Akzent), Textfarbe auf der
   Flaeche aus --block-tc (per Luminanz gerechnet, categoryTextColor()). */
/* Toenung 18% / Kante 80% (Deckkraft-Politur 2026-07-25, Nutzer-Feedback:
   SOLL-Bloecke wirkten auf dem Desktop zu blass; vorher 12% / 70%). */
.matrix-block.mb-plan {
  border: 1.5px dashed color-mix(in srgb, var(--block-c, var(--accent)) 80%, var(--line));
  background-color: var(--panel);
  background-image: linear-gradient(
    color-mix(in srgb, var(--block-c, var(--accent)) 18%, transparent),
    color-mix(in srgb, var(--block-c, var(--accent)) 18%, transparent));
}

.matrix-block.mb-act {
  border: 0;
  background: var(--block-c, var(--accent));
  color: var(--block-tc, #fff);
}
.matrix-block.mb-act .matrix-block-title { color: var(--block-tc, #fff); }
.matrix-block.mb-act .matrix-block-time,
.matrix-block.mb-act .matrix-block-ico { color: color-mix(in srgb, var(--block-tc, #fff) 82%, transparent); }
.matrix-block.mb-act .matrix-block-pulse { background: var(--block-tc, #fff); }
/* Auf der Vollton-Flaeche traegt der Fortschritt eine Fuellung im Text-Ton
   statt gruen (sonst kaum sichtbar). */
.matrix-block.mb-act .matrix-block-progress {
  background: color-mix(in srgb, var(--block-tc, #fff) 18%, transparent);
  border-right-color: color-mix(in srgb, var(--block-tc, #fff) 55%, transparent);
}

/* Zeile 2: Zeit (links) + Verzugs-Chip + Meta-Icons (rechtsbuendig). */
.matrix-block-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  line-height: 1.05;
}
.matrix-block.oneline .matrix-block-sub { display: none; }
.matrix-block-meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  flex: 0 0 auto;
}

/* Zeitanzeige in Zeile 2: bleibt auch auf schmalen Bloecken sichtbar und
   kappt per Ellipsis statt auszublenden (wie der Titel). */
.matrix-block-time {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Kleine Inline-Icons (Notiz-Hinweis). */
.matrix-block-ico {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  color: var(--muted);
}

.matrix-block-ico svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Teilnehmer-Marker (Mockup TN/TM1): Personen-Icon + Anzahl am Master-Block. */
.matrix-block-parts {
  width: auto;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 9px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.matrix-block-parts svg { width: 11px; height: 11px; }

/* Teilnehmer-Echo-Block (Mockup TN/TM1): read-only Projektion eines Masters.
   Gestrichelt + schraffiert in der Master-Kategorie-/Zeilenfarbe, Cursor-Hinweis
   read-only. */
.matrix-block-echo {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Linksbuendig wie normale Bloecke (.matrix-block setzt align-items:center,
     was im Spalten-Layout horizontal zentrieren wuerde). */
  align-items: flex-start;
  gap: 1px;
  padding: 2px 7px;
  border: 1px dashed color-mix(in srgb, var(--echo-color, var(--accent)) 65%, var(--line));
  border-radius: var(--blk-r);
  background:
    repeating-linear-gradient(135deg,
      color-mix(in srgb, var(--echo-color, var(--accent)) 13%, var(--panel)) 0 5px,
      color-mix(in srgb, var(--echo-color, var(--accent)) 4%, var(--panel)) 5px 10px);
  color: var(--muted);
  cursor: pointer;
  overflow: hidden;
}
.matrix-block-echo:hover { border-color: var(--echo-color, var(--accent)); }
.matrix-block-echo .matrix-block-title {
  align-self: stretch;
  font-style: italic;
  font-weight: 600;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.matrix-echo-origin {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  font-size: 9px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.matrix-echo-origin svg { width: 10px; height: 10px; flex: 0 0 auto; }

/* Laufender Block ("jetzt" liegt in der Zeitspanne, SOLL wie IST):
   Puls-Punkt + Fortschrittsfuellung. Der Status ist bewusst implizit. */
.matrix-block-pulse {
  /* Absolut oben rechts, damit der Puls im zweizeiligen (Spalten-)Layout keine
     eigene Zeile beansprucht. */
  position: absolute;
  top: 3px;
  right: 6px;
  z-index: 2;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
  /* Dauer-Puls entfernt (Konzept AM, Grundsatz 3): genau EINE Dauer-Animation
     im Bild (ueberfaellig). Den Zustand "laeuft" traegt die Fortschritts-
     fuellung; der Punkt bleibt als statisches Zeichen stehen (Sichtentscheid
     am echten Board, bevor er ganz faellt). */
}

.matrix-block-progress {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
  border-right: 1px solid color-mix(in srgb, var(--ok) 45%, transparent);
  border-radius: calc(var(--blk-r) - 1px) 0 0 calc(var(--blk-r) - 1px);
  background: color-mix(in srgb, var(--ok) 14%, transparent);
  pointer-events: none;
}

/* Verzug (Mockup M4/A2): Warn-Schraffur des verstrichenen SOLL-Anteils
   ohne IST - das gelbe Pendant zur gruenen Fortschrittsfuellung. Waechst
   vom Blockstart bis zur Jetzt-Linie; .full = Ende verstrichen, komplett
   schraffiert ("ohne IST geblieben"). */
.matrix-block-late {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
  border-right: 1px solid color-mix(in srgb, var(--warning) 55%, transparent);
  border-radius: calc(var(--blk-r) - 1px) 0 0 calc(var(--blk-r) - 1px);
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--warning) 32%, transparent) 0 3px, transparent 3px 7px);
  pointer-events: none;
}

.matrix-block-late.full {
  border-right: 0;
  border-radius: calc(var(--blk-r) - 1px);
}

/* Kandidat noch nicht im Verzug (Breite 0.0%): die Leitkante nicht als
   1-px-Strich am linken Rand zeigen. Greift fuer Render UND Sekunden-Tick
   (beide setzen die Breite per toFixed(1), also exakt "0.0%"). */
.matrix-block-late[style*="width:0.0%"] {
  border-right-width: 0;
}

/* ===== Offenes Ende (Mockup LV) ==========================================
   Ein IST-Block, dessen Ende niemand bestaetigt hat, darf nicht aussehen wie
   einer mit erfasster Endzeit. Ab der Jetzt-Linie (--open-from, im
   Sekunden-Tick nachgefuehrt) blendet der Block aus - bewusst per Maske statt
   per aufgelegter Farbflaeche: so verblasst er in JEDEN Untergrund (Spur-Ton,
   Zeilen-Toenung, beide Themes) und die rechte Kante loest sich mit auf.
   Der Rest-Anteil bleibt sichtbar - "unbestaetigt", nicht "weg". */
.matrix-block.open-end {
  -webkit-mask-image: linear-gradient(90deg, #000 var(--open-from, 100%), rgba(0, 0, 0, .14) 100%);
  mask-image: linear-gradient(90deg, #000 var(--open-from, 100%), rgba(0, 0, 0, .14) 100%);
}

/* Ueberlauf: JETZT ist ueber das provisorische Ende hinaus. Die Maske bleibt
   am Deckel (BLOCK_OPEN_MASK_MAX_PCT), die Kante also weiter aufgeloest; den
   Ueberlauf selbst traegt ein Warn-Innenring. */
.matrix-block.open-end.open-overrun {
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--warning) 70%, transparent);
}

/* Kompaktspur (Telefon/Uebersicht): gleiche Maske, duennerer Ring. */
.matrix-block.mb-compact.open-end.open-overrun {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warning) 75%, transparent);
}

/* Tagesansicht: stehende Achse, also blendet der Block nach UNTEN aus. */
.day-blk.open-end {
  -webkit-mask-image: linear-gradient(180deg, #000 var(--open-from, 100%), rgba(0, 0, 0, .14) 100%);
  mask-image: linear-gradient(180deg, #000 var(--open-from, 100%), rgba(0, 0, 0, .14) 100%);
}

.day-blk.open-end.open-overrun {
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--warning) 70%, transparent);
}

/* Verzugs-Pill (Mockup BS-D): sitzt INNEN oben rechts in der Blockflaeche,
   geklemmt auf die Blockbreite - kann die Zeile konstruktiv nicht verlassen.
   Degradiert nach Blockbreite: Symbol + Text (.pill-full) -> nur Symbol
   (.sym) -> Eckpunkt (.dot); darunter tragen Schraffur/Tooltip den Status. */
.matrix-block-late-chip {
  position: absolute;
  top: 2px;
  right: 2px;
  z-index: 2;
  max-width: calc(100% - 4px);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 5px;
  border: 1px solid color-mix(in srgb, var(--warning) 55%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--warning) 16%, var(--panel));
  color: var(--warning);
  font-size: 9px;
  font-weight: 800;
  line-height: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  pointer-events: none;
}

.matrix-block-late-chip svg {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
}

.matrix-block-late-chip.sym { padding: 1px 3px; }

.matrix-block-late-chip.dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 1px solid var(--bg);
  border-radius: 50%;
  background: var(--warning);
}
.matrix-block-late-chip.dot svg { display: none; }
.matrix-block.late-missed .matrix-block-late-chip.dot { background: var(--danger); }

.matrix-block-late-chip[hidden] {
  display: none;
}

/* Platz fuer die volle Pill: Titelzeile weicht rechts aus; der
   Verknuepfungs-Marker zieht bei vorhandener Pill nach unten rechts. */
.matrix-block.pill-full .matrix-block-title { padding-right: 56px; }
.matrix-block.has-pill .matrix-block-link-mark { top: auto; bottom: 2px; }

/* ===== Kategoriefarbe: Flaeche / Sigel (Mockup BS-D, Schalter C) =====
   Flaeche ist der Default (Board ohne bzw. mit data-catmode="area").
   Im Sigel-Modus werden die Segmentflaechen neutral, die Kategorie sitzt
   als Kuerzel-Chip im Titel (Farbe + gerechnete Textfarbe inline). Gilt
   bewusst NUR fuer Matrix-Bloecke - Zeit-Navigator, Lageleiste und Legende
   behalten die Kategoriefarbe (zu klein fuer Sigel). */
.matrix-block-sig {
  display: none;
  flex: 0 0 auto;
  margin-right: 5px;
  padding: 1px 4px;
  border-radius: 3px;
  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.2;
  vertical-align: 1px;
}

#matrixBoard[data-catmode="sigil"] .matrix-block-sig { display: inline-block; }

#matrixBoard[data-catmode="sigil"] .matrix-block.mb-act {
  border: 1px solid var(--grid-strong);
  background: var(--surface-2);
  color: var(--text);
}
#matrixBoard[data-catmode="sigil"] .matrix-block.mb-act .matrix-block-title { color: var(--text); }
#matrixBoard[data-catmode="sigil"] .matrix-block.mb-act .matrix-block-time,
#matrixBoard[data-catmode="sigil"] .matrix-block.mb-act .matrix-block-ico { color: var(--muted); }
#matrixBoard[data-catmode="sigil"] .matrix-block.mb-act .matrix-block-pulse { background: var(--ok); }
#matrixBoard[data-catmode="sigil"] .matrix-block.mb-act .matrix-block-progress {
  background: color-mix(in srgb, var(--ok) 14%, transparent);
  border-right-color: color-mix(in srgb, var(--ok) 45%, transparent);
}
#matrixBoard[data-catmode="sigil"] .matrix-block.mb-plan {
  border-color: var(--grid-strong);
  background-image: none;
}
#matrixBoard[data-catmode="sigil"] .matrix-block-echo {
  border-color: var(--grid-strong);
  background: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--text) 7%, var(--panel)) 0 5px,
    var(--panel) 5px 10px);
}


.matrix-block:hover {
  filter: brightness(1.04);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 14%, transparent);
}

.matrix-block.writable {
  cursor: grab;
}

.matrix-block.dragging {
  cursor: grabbing;
  z-index: 4;
  opacity: .92;
  box-shadow: 0 0 0 2px var(--accent), var(--shadow);
}

/* Auswahl (im Editor geoeffnet): symmetrischer Akzent-Innen-Ring statt
   Aussen-Glow - bleibt garantiert innerhalb der Zeile (Mockup BS). */
.matrix-block.selected {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 75%, transparent);
}

/* Ueberfaellig (SOLL-Ende ohne IST verstrichen): Gefahren-Innen-Ring; wird
   auch vom Sekunden-Tick live gesetzt (updateBlockLateness). */
.matrix-block.late-missed {
  box-shadow: inset 0 0 0 1.5px var(--danger);
  /* Die EINZIGE erlaubte Dauer-Animation (Konzept AM, Demo D): der Ring
     pendelt langsam in der Intensitaet - kein Blinken, keine Groesse.
     Ueberfaellig ist der einzige Zustand, der aktiv um Aufmerksamkeit
     werben darf. */
  animation: overdue-breathe 2.4s ease-in-out infinite;
}

@keyframes overdue-breathe {
  0%, 100% { box-shadow: inset 0 0 0 1.5px var(--danger); }
  50% { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--danger) 45%, var(--line)); }
}

.matrix-block.late-missed.selected {
  box-shadow: inset 0 0 0 1.5px var(--danger), inset 0 0 0 4px color-mix(in srgb, var(--accent) 55%, transparent);
  /* Auswahl kombiniert zwei Ringe - dann statisch, das Atmen wuerde den
     Auswahl-Ring mit ueberschreiben. */
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .matrix-block.late-missed { animation: none; }
}

.matrix-block-grip {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 7px;
  cursor: ew-resize;
  z-index: 1;
}

.matrix-block-grip-l {
  left: 0;
}

.matrix-block-grip-r {
  right: 0;
}

/* E2EE-Verlustfall: dezenter Hinweis im fixierten Spur-Label, wenn Events der
   Spur nicht entschluesselt werden koennen (Schluessel fehlt/veraltet).
   Bewusst gedaempft - Details traegt der Tooltip. */
.matrix-track-lost {
  /* Absolut in der Ecke verankert, damit das SOLL/IST-Label exakt zentriert
     bleibt und das Badge nie Layout verschiebt. */
  position: absolute;
  right: 3px;
  bottom: 3px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--muted);
  opacity: .6;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  cursor: help;
}

.matrix-track-lost svg {
  width: 9px;
  height: 9px;
  display: block;
}

/* E2EE-Verlustfall: Zeilenname nicht entschluesselbar - gedaempftes Icon in
   der Ecke des Zeilenkopfs (gleiche Zurueckhaltung wie das Spur-Badge). */
.matrix-lane-lost {
  position: absolute;
  right: 8px;
  bottom: 4px;
  width: 11px;
  height: 11px;
  color: var(--muted);
  opacity: .6;
  cursor: help;
}

/* Zeilen-Sichtbarkeit (Plan SV-U): verborgene Zeilen sieht nur der Admin -
   Kopf-Inhalte + Spuren gedimmt, Spuren zusaetzlich mit stiller Diagonal-
   Schraffur, Bedienbarkeit unveraendert (bewusst KEIN pointer-events: none).
   WICHTIG: Die Deckkraft liegt auf den Kopf-INHALTEN, nie auf dem sticky
   Zeilenkopf selbst - ein transparenter Kopf liesse die Spuren beim
   horizontalen Scrollen durchscheinen (gleiche Klammer wie die Zeilen-
   Toenung, die als background-image-Layer laeuft). */
.matrix-row-hidden .matrix-lane-headrow,
.matrix-row-hidden .matrix-lane-lost,
.matrix-row-hidden .mxc-head > *,
.matrix-row-hidden .matrix-tracks {
  opacity: .55;
}

.matrix-row-hidden .matrix-track-body {
  background-image: repeating-linear-gradient(45deg, transparent 0 7px, color-mix(in srgb, var(--text) 5%, transparent) 7px 8px);
}

/* Zeilen-Sichtbarkeit: nacktes Inline-Symbol in der Kopfzeile (Text nur im
   Tooltip). Bewusst ohne Chip-Chrome und kleiner als die Zeilenhoehe, damit
   es die Kopfzeile NIE hoeher macht - auch nicht bei eingeklappten oder
   einspurigen Zeilen. */
.lane-vis-ico {
  display: inline-flex;
  align-items: center;
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  color: var(--muted);
  opacity: .7;
  cursor: help;
}

.lane-vis-ico svg {
  width: 100%;
  height: 100%;
  display: block;
}

.matrix-lane-lost svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Gruppenbalken: volle Matrix-Zeile, Label-Teil sticky links. Farbgebung
   analog kairos-local: Ebene 1 schwarz, Ebenen 2/3 in dunklen Grautoenen -
   bewusst themenunabhaengig (fixe Toene), heller Text. */
.matrix-group-row {
  display: grid;
  grid-template-columns: var(--label-w) calc(58px + var(--time-w));
  width: calc(var(--label-w) + 58px + var(--time-w));
  border-bottom: 1px solid var(--grid-strong);
  background: #0d0d0d;
  color: #f2f2f2;
}

.matrix-group-label {
  position: sticky;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  min-width: 0;
  padding: 0 10px 0 8px;
  border: 0;
  border-radius: 0;
  background: inherit;
  color: inherit;
  font-size: 11px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.matrix-group-caret {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  color: rgba(255, 255, 255, .55);
  transition: transform var(--mo-fast) var(--mo-ease);
}

.matrix-group-caret svg {
  width: 100%;
  height: 100%;
  display: block;
}

.matrix-group-row.collapsed .matrix-group-caret {
  transform: rotate(-90deg);
}

.matrix-group-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.matrix-group-count {
  flex: 0 0 auto;
  color: rgba(255, 255, 255, .55);
  font-size: 10px;
  font-weight: 400;
}

.matrix-group-row.level-1 .matrix-group-label {
  min-height: 28px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.matrix-group-row.level-2 {
  background: #2b2b2b;
  color: #e8e8e8;
}

.matrix-group-row.level-2 .matrix-group-label {
  padding-left: 20px;
}

.matrix-group-row.level-3 {
  background: #454545;
  color: #dcdcdc;
}

.matrix-group-row.level-3 .matrix-group-label {
  padding-left: 32px;
}

/* Im Dark-Theme duerfen die Unterebenen dunkler bleiben - die helleren
   Grautoene sind fuer den Kontrast auf hellem Hintergrund gedacht. */
[data-theme="dark"] .matrix-group-row.level-2 {
  background: #131313;
}

[data-theme="dark"] .matrix-group-row.level-3 {
  background: #1f1f1f;
}

/* Gruppen-Manager in der Administration: feste Grid-Spalten, damit Name,
   Eltern-Select und Buttons stabil in einer Zeile bleiben (minmax(0, ...)
   erlaubt den Feldern zu schrumpfen statt umzubrechen). */
.lane-group-create {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.lane-group-create .actions {
  margin: 0;
}

/* Unterer Label-Rand wuerde Felder gegenueber dem Button hochschieben. */
.lane-group-create label {
  margin-bottom: 0;
}

.lane-group-row {
  display: grid;
  grid-template-columns: auto minmax(0, 3fr) minmax(0, 2fr) auto auto;
  gap: 8px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--grid-line);
}

/* Verschiebe-Griff im Gruppen-Manager (nur Admins; analog zur Matrix). Bei
   Nicht-Admins haelt ein leerer Platzhalter die Griff-Spalte des Grids. */
.lane-group-grip {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  color: var(--muted);
  opacity: .55;
  cursor: grab;
  transition: opacity var(--mo-fast) var(--mo-ease);
}
.lane-group-row:hover .lane-group-grip { opacity: .9; }
.lane-group-grip:active { cursor: grabbing; }
.lane-group-grip svg { width: 100%; height: 100%; display: block; }
.lane-group-grip-empty { cursor: default; opacity: 0; }
.lane-group-row.drag-source { opacity: .5; }
.lane-group-row.drop-before { box-shadow: inset 0 2px 0 var(--accent); }
.lane-group-row.drop-after { box-shadow: inset 0 -2px 0 var(--accent); }
.lane-group-row.drop-into { box-shadow: inset 0 0 0 2px var(--accent); }

.lane-group-row input[type="text"],
.lane-group-row select {
  width: 100%;
  min-width: 0;
  margin: 0;
}

.lane-group-row button {
  margin: 0;
  white-space: nowrap;
}

.lane-group-row.level-2 {
  padding-left: 20px;
}

.lane-group-row.level-3 {
  padding-left: 40px;
}

.matrix-board.dragging {
  cursor: grabbing;
  user-select: none;
}

.matrix-board.creating {
  user-select: none;
}

/* Freie Flaeche einer beschreibbaren Spur: Aufziehen legt einen Block an. */
.matrix-track-body.writable {
  cursor: crosshair;
}

.matrix-track-body.writable .matrix-block {
  cursor: grab;
}

/* Vorschau-Rechteck waehrend des Aufziehens. */
.matrix-create-ghost {
  position: absolute;
  top: 3px;
  bottom: 3px;
  z-index: 4;
  border: 1px dashed var(--accent);
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  pointer-events: none;
}

.matrix-drag-tooltip {
  position: fixed;
  z-index: 95;
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--panel);
  box-shadow: var(--shadow);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
}

.matrix-block-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.1;
}

.matrix-empty {
  position: absolute;
  inset: 50% auto auto 10px;
  transform: translateY(-50%);
}

.checks label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.checks input {
  width: auto;
}

.list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.list.compact {
  margin-top: 8px;
}

.invite-prep {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.invite-token {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  align-items: center;
  margin-top: 8px;
}

.invite-token span {
  grid-column: 1 / -1;
}

.invite-token code {
  min-width: 0;
  overflow-wrap: anywhere;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 7px 8px;
  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 12px;
}

.prepared-permissions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

/* Offene Einladung ohne abrufbaren Code (Plan D3-U): Erklaertext + Aktion. */
/* Einmal-Passwort-Box des System-Admin-Resets (Muster Einladungs-Code). */
.temp-password {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  align-items: center;
  margin-top: 8px;
}

.temp-password code {
  min-width: 0;
  overflow-wrap: anywhere;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 7px 8px;
  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 12px;
}

.temp-password .muted {
  grid-column: 1 / -1;
  font-size: 12px;
}

.invite-token-gone {
  display: flex;
  align-items: center;
  gap: 8px;
}

.invite-token-gone span {
  font-size: 12px;
}

/* --- Einladungs-Uebergabe (Plan D3-U): Karte im Ergebnis-Zustand ---------- */
.handover-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.handover-head .handover-ico {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 2px solid var(--ok);
  border-radius: 50%;
  color: var(--ok);
}

.handover-head .handover-ico svg {
  width: 15px;
  height: 15px;
}

.handover-head h3 {
  margin: 0;
  font-size: 15px;
}

.handover-head p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.handover-person {
  display: grid;
  gap: 2px;
  margin-bottom: 12px;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  font-size: 12.5px;
}

.handover-person span {
  color: var(--muted);
  font-size: 11.5px;
}

/* 64-Hex-Code in 4er-Gruppen (reine Optik); klicken markiert alles,
   kopiert wird der Roh-Code ueber den Knopf darunter. */
.handover-code {
  margin-bottom: 8px;
  padding: 11px 12px;
  border: 1px dashed color-mix(in srgb, var(--accent) 40%, var(--line));
  border-radius: 8px;
  background: var(--surface);
  text-align: center;
  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.8;
  overflow-wrap: anywhere;
  user-select: all;
}

.handover-code small {
  display: block;
  margin-top: 4px;
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
  user-select: none;
}

.handover-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.handover-actions button {
  flex: 1;
}

.handover-actions button.done,
.handover-text-head button.done {
  border-color: color-mix(in srgb, var(--ok) 45%, var(--line));
  color: var(--ok);
}

.handover-text {
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  overflow: hidden;
}

.handover-text-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px 6px 11px;
  border-bottom: 1px solid var(--grid-line);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.handover-text-body {
  padding: 9px 11px;
  font-size: 12px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.handover-qr {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.handover-qr-box {
  flex: 0 0 auto;
  display: block;
  width: 112px;
  height: 112px;
  padding: 8px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.handover-qr-box svg {
  display: block;
  width: 100%;
  height: 100%;
}

.handover-qr p {
  margin: 0;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.5;
}

.handover-once {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 11px;
  border: 1px solid color-mix(in srgb, var(--warning) 45%, var(--line));
  border-left: 3px solid var(--warning);
  border-radius: 7px;
  background: color-mix(in srgb, var(--warning) 7%, var(--panel));
  font-size: 11.5px;
  line-height: 1.5;
}

.handover-once svg {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--warning);
}

h3 {
  margin: 16px 0 0;
  font-size: 13px;
}

.item {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 9px 10px;
  background: rgba(0, 0, 0, .025);
}

.item strong {
  display: block;
  margin-bottom: 3px;
}

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}

/* Dezente, kompakte Pills (Vorbild: Badges im Benutzermenue) - gilt
   einheitlich fuer alle Status-Chips in Listen, Tabellen und Kartenkoepfen. */
.badge {
  display: inline-flex;
  align-items: center;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 7px;
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
}

.badge.ok {
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 45%, var(--line));
}

.badge.warn {
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 45%, var(--line));
}

.badge.warn {
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 45%, var(--line));
}

.theme-preview {
  margin-top: 10px;
}

.theme-preview-surface {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px;
  background: rgba(0, 0, 0, .025);
}

.theme-preview-surface span {
  color: var(--muted);
}

.theme-swatches {
  display: flex;
  gap: 6px;
}

.theme-swatches i {
  width: 26px;
  height: 18px;
  border: 1px solid var(--line);
  border-radius: 4px;
}

/* ===== Zeilenrechte-Drawer (Variante P1): Personen-Karten mit
   3-Stufen-Schaltern statt 5-Spalten-Checkbox-Tabelle. Passt ohne
   horizontale Scrollbar in die normale Drawer-Breite. ===== */

/* Segmented Control: Kein Zugriff / Lesen / Bearbeiten (genau eine Stufe). */
.seg {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
}

.seg button {
  min-height: 0;
  padding: 4px 10px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

.seg button:hover {
  color: var(--text);
  border-color: transparent;
}

.seg button:disabled {
  opacity: .55;
}

.seg button.active {
  background: var(--surface-2);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line);
}

/* Schreibende Stufe bekommt den Akzent als Kante - hebt die maechtigste
   Auswahl dezent hervor. */
.seg button.active.write {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 60%, var(--line));
}

/* Schnell-Leiste der Rechtevergabe (Konzept ZRS): Personen-Chips + Preset +
   Anwenden ueber den Karten. */
.perm-quickbar {
  margin: 12px 0;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.perm-quickbar-title {
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.perm-quickbar-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 9px;
  font-size: 12px;
}

.perm-quick-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px 3px 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  font-size: 12px;
}

.perm-quick-chip .avatar {
  width: 18px;
  height: 18px;
  font-size: 8px;
  line-height: 18px;
}

.perm-quick-chip button {
  min-height: 0;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
}

.perm-quickbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.perm-quickbar-row select {
  flex: 0 1 auto;
}

.perm-quick-picker {
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px dashed var(--grid-line);
}

.perm-quick-picker input {
  width: 100%;
  margin-bottom: 7px;
}

.perm-quick-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 180px;
  overflow-y: auto;
}

.perm-quick-list button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 7px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  text-align: left;
}

.perm-quick-list button:hover {
  background: var(--surface-2);
}

.perm-quick-list .avatar {
  width: 20px;
  height: 20px;
  font-size: 8px;
  line-height: 20px;
}

/* Filterzeile ueber den Personen-Karten (ZRS). */
.perm-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
}

.perm-filter input {
  flex: 1 1 160px;
  min-width: 0;
}

.perm-card {
  padding: 10px 0 12px;
  border-bottom: 1px solid var(--grid-line);
}

.perm-card:last-child {
  border-bottom: 0;
}

.perm-card-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
}

.perm-card-head .who {
  flex: 1;
  min-width: 0;
  line-height: 1.25;
}

.perm-card-head .who strong {
  display: block;
  font-size: 13px;
}

.perm-card-head .who span {
  color: var(--muted);
  font-size: 11px;
}

.perm-track-row {
  display: grid;
  grid-template-columns: 38px 1fr;
  align-items: center;
  gap: 8px;
  margin: 5px 0;
}

.perm-track-row .track-lbl {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.perm-card-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 7px;
}

.perm-card-foot label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.perm-card-foot input[type="checkbox"] {
  margin: 0;
}

/* ===== Stufen-Zeile (Mockup RE): 6 Stufen als Ein-Klick-Segment ===== */

/* Der Personen-/Zeilenname ist zugleich die Kreuz-Navigation zwischen
   Zeilen- und Benutzer-Editor (gestapelter Drawer). */
.perm-crosslink {
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.perm-crosslink:hover {
  text-decoration: underline;
}

/* Chip-Zone im Kartenkopf: Dirty-Punkt, Individuell, Schluessel-Rotation. */
.perm-chips {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.perm-dirty-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.perm-chip {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 700;
  white-space: nowrap;
}

.perm-chip.warn {
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 45%, var(--line));
}

/* Teams (Konzept GR): Herkunfts-Chip des Team-Sockels an der Rechte-Karte. */
.perm-chip.team {
  color: var(--info, #7d9bb8);
  border-color: color-mix(in srgb, var(--info, #7d9bb8) 45%, var(--line));
  flex: 0 0 auto;
}

/* 6-Stufen-Segment: gleichbreite Knoepfe, Ellipsis statt Umbruch - die
   aktive Stufe ist immer sichtbar (kein Dropdown). */
.perm-stufe-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.perm-stufe {
  flex: 1;
  min-width: 0;
}

.perm-stufe button {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 5px 4px;
  font-size: 10.5px;
}

.perm-fine-btn {
  flex: 0 0 auto;
  min-height: 0;
  margin: 0;
  padding: 5px 7px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: none;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
}

.perm-fine-btn:hover,
.perm-fine-btn.on {
  color: var(--text);
  border-color: var(--line);
}

/* Fein-Aufklapper: die fuenf Flags (SOLL/IST je 3 Stufen + Verwalten). */
.perm-fine {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dashed var(--grid-line);
}

/* Benutzerrechte-Drawer: gesperrte Zeilen (nur Verwalter) treten zurueck. */
.perm-card.locked {
  opacity: .62;
}

/* Gruppen-Header zwischen den Zeilen-Stufen-Zeilen. */
.perm-group {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Bulk-Leiste "Alle Zeilen auf ..." (wertet nur auf, kein Bulk-Entzug). */
.perm-allrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 12px 0;
  padding: 10px 13px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  font-size: 12px;
}

.perm-allrow select {
  width: auto;
}

/* ===== Einladung: Zeilenrechte als Presets (Variante E1) ===== */

.preset-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--grid-line);
}

.preset-row:last-of-type {
  border-bottom: 0;
}

.preset-lane {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 600;
}

.preset-lane-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preset-row select {
  width: 100%;
  min-width: 0;
  padding: 5px 8px;
  font-size: 11.5px;
}

/* Master-Zeile "Alle Zeilen": setzt jedes Zeilen-Preset auf einmal. */
.preset-row.preset-master {
  border-bottom: 1px solid var(--grid-strong);
  padding-bottom: 9px;
}

.preset-row.preset-master .preset-lane {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Gruppen-Zwischentitel in der Preset-Liste (gleiche Reihenfolge wie Matrix). */
.preset-group {
  padding: 8px 0 2px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

pre {
  min-height: 180px;
  max-height: 360px;
  overflow: auto;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(0, 0, 0, .05);
  white-space: pre-wrap;
}

/* ===== Matrix: Zeilenkopf (4-V3), Uebersichtsmodus (5-V2), Ueberlappung (6-V1) ===== */

/* Kopfzeile des Zeilenkopfs: Chevron fest, Name flexibel, Griff bei Hover. */
.matrix-lane-headrow {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.matrix-lane-headrow .matrix-lane-name {
  flex: 1;
  min-width: 0;
}

.matrix-lane-caret {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.matrix-lane-caret:hover {
  color: var(--text);
  border-color: transparent;
  background: color-mix(in srgb, var(--text) 8%, transparent);
}

.matrix-lane-caret svg {
  width: 12px;
  height: 12px;
  display: block;
  transition: transform var(--mo-fast) var(--mo-ease);
}

.matrix-lane-caret.collapsed svg {
  transform: rotate(-90deg);
}

/* Verschiebe-Griff (nur Admins): unsichtbar, bis der Zeilenkopf gehovert wird. */
.matrix-lane-grip {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  color: var(--muted);
  opacity: 0;
  cursor: grab;
  transition: opacity var(--mo-fast) var(--mo-ease);
}

.matrix-lane:hover .matrix-lane-grip {
  opacity: .8;
}

.matrix-lane-grip svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Favoriten-Stern (Plan ZS-U S2, Griff-Muster): dezent und NUR beim
   Ueberfahren des Zeilenkopfs sichtbar (Nutzer-Feedback 2026-07-24) - auch
   favorisierte Zeilen zeigen ihn nicht dauerhaft; den Zustand tragen die
   Fuellung (voll/umrissen), die Scope-Pille und die Fusszeile. Auf Touch
   entfaellt er - dort pflegen Scope-Sheet und Zeilen-Sheet die Favoriten. */
.matrix-lane-fav {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  line-height: 1;
  min-height: 0;
  padding: 0 2px;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--mo-fast) var(--mo-ease);
}
.matrix-lane:hover .matrix-lane-fav,
.matrix-lane-fav:focus-visible { opacity: .6; }
.matrix-lane:hover .matrix-lane-fav:hover,
.matrix-lane-fav:focus-visible { opacity: 1; }
.matrix-lane-fav.on { color: var(--accent); }
@media (pointer: coarse) {
  .matrix-lane-fav { display: none; }
}

/* Ehrlichkeits-Fusszeile des Zeilen-Scopes (Plan ZS-U, Konvention 7): bleibt
   beim horizontalen Scrollen lesbar (sticky) und bewusst dezent. */
.matrix-scope-foot {
  position: sticky;
  left: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  padding: 7px 10px 9px;
  color: var(--muted);
  font-size: 12px;
}
.matrix-scope-foot button {
  border: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  min-height: 0;
  padding: 0;
  cursor: pointer;
}
.matrix-scope-foot button:hover { text-decoration: underline; border-color: transparent; }

/* Eingeklappte Zeile: eine kompakte Spur statt SOLL/IST in voller Hoehe. */
.matrix-row-collapsed {
  min-height: 0;
}

.matrix-track-label-compact {
  font-size: 9px;
}

.matrix-track-compact {
  position: relative;
  height: 24px;
  min-height: 24px;
  overflow: hidden;
}

/* Mini-Balken: SOLL als Kontur oben, IST gefuellt (Kategoriefarbe) unten.
   Hoehe 10px (statt 7) bei knappen 1-px-Raendern + 2-px-Mittenabstand - nutzt
   die 24-px-Spur besser aus, ohne die Zeilenhoehe zu aendern. */
.matrix-mini {
  position: absolute;
  height: 10px;
  border-radius: 3px;
  pointer-events: none;
}

.matrix-mini.plan {
  top: 1px;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--text) 45%, transparent);
}

.matrix-mini.act {
  bottom: 1px;
}

/* +N-Chip am Stapelende: blaettert durch ueberlappende Bloecke. Sitzt HINTER
   dem Stapel, damit er die Warn-Ecke des obersten Blocks nicht verdeckt. */
.matrix-stack-chip {
  position: absolute;
  top: 8px;
  /* Ueber den Bloecken (z 0), aber UNTER den fixierten Spur-/Zeilen-Labels
     (z 2/3) - sonst ueberlagert der Chip beim horizontalen Scrollen die
     sticky Zeilenkoepfe. */
  z-index: 1;
  min-width: 22px;
  min-height: 0;
  padding: 0 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
  cursor: pointer;
  box-shadow: var(--shadow);
}

.matrix-stack-chip:hover {
  color: var(--text);
  border-color: var(--accent);
}

/* Warn-Ecke: zeitliche Ueberlappung mit anderen Bloecken (fachlicher Hinweis). */
.matrix-block-overlap {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 9px 9px 0;
  border-color: transparent var(--warning) transparent transparent;
  pointer-events: none;
}

/* ===== Marker-Band (untere Etage des Achsenkopfs) + Meilensteine ===== */

/* Das Marker-Band traegt ALLE Ereignis-Marker des Kopfs: Meilenstein-Pins,
   Falt-Kapseln sowie (per fester CSS-Position) Jetzt-Pill und Rand-Marker.
   Es ist IMMER vorhanden (auch leer) - konstante Kopfhoehe, nichts springt.
   Das overflow:hidden ist die Containment-Klammer: kein Bewohner kann in die
   Spuren darunter malen; der sticky Tag-Chip liegt bewusst NICHT hier. */
.matrix-axis-band {
  position: relative;
  height: var(--axis-band-h);
  border-top: 1px solid var(--grid-line);
  overflow: hidden;
}

/* Vorrang-Regel im Band (Jetzt-Pill > Falt-Kapsel > Meilenstein-Pin, gesetzt
   in updateNowBar): der unterlegene Nachbar dimmt, statt verdeckt zu werden -
   Tooltip und Klick bleiben, Hover holt ihn kurz zurueck. */
.matrix-axis-band .matrix-fold-cap,
.matrix-axis-band .matrix-milestone-pin {
  transition: opacity .15s ease;
}

@media (prefers-reduced-motion: reduce) {
  .matrix-axis-band .matrix-fold-cap,
  .matrix-axis-band .matrix-milestone-pin {
    transition: none;
  }
}

.matrix-axis-band .axis-dim {
  opacity: .3;
}

.matrix-axis-band .axis-dim:hover {
  opacity: 1;
}

/* Meilenstein-Pins: Diamant-Marker in Meilensteinfarbe, Titel per Tooltip,
   Klick oeffnet den Drawer. */
.matrix-milestone-pin {
  position: absolute;
  top: 0;
  bottom: 0;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 16px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--accent);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}

.matrix-milestone-pin:hover {
  background: color-mix(in srgb, var(--text) 10%, transparent);
  border-color: transparent;
}

.matrix-milestone-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent);
  pointer-events: none;
}

/* ===== SOLL/IST-Abgleich (M1.3): Geist + Delta-Chip auf der IST-Spur ===== */

.matrix-deviation-ghost {
  position: absolute;
  /* Hoehe setzt renderTrackDeviation inline aus matrixSlotHeight() (Normal/
     Touch/Briefing); 28px nur als Fallback. */
  height: 28px;
  box-sizing: border-box;
  border: 1px dashed color-mix(in srgb, var(--text) 38%, transparent);
  border-radius: var(--blk-r);
  /* Bewusst nicht interaktiv: die freie Flaeche darunter bleibt fuer das
     Aufziehen neuer Bloecke nutzbar. */
  pointer-events: none;
}

.matrix-deviation-chip {
  position: absolute;
  z-index: 1;
  min-height: 0;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  line-height: 17px;
  white-space: nowrap;
  cursor: help;
}

.matrix-deviation-chip.late {
  border: 1px solid color-mix(in srgb, var(--warning) 50%, var(--line));
  background: color-mix(in srgb, var(--warning) 18%, var(--panel));
  color: var(--warning);
}

.matrix-deviation-chip.early {
  border: 1px solid color-mix(in srgb, var(--ok) 45%, var(--line));
  background: color-mix(in srgb, var(--ok) 14%, var(--panel));
  color: var(--ok);
}

/* Einfuege-Indikator beim Zeilen-Drag: deutliche Akzentlinie mit Pfeilspitze
   GENAU an der Zielposition (Oberkante = davor, Unterkante = danach), damit
   klar ist, wo die Zeile landet. Die Quellzeile wird waehrenddessen gedimmt. */
.matrix-row.drag-source {
  opacity: .45;
}

.matrix-row.drop-before,
.matrix-row.drop-after,
.matrix-group-row.drop-after {
  position: relative;
}

.matrix-row.drop-before::after,
.matrix-row.drop-after::after,
.matrix-group-row.drop-after::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent);
  z-index: 7;
  pointer-events: none;
}

.matrix-row.drop-before::after {
  top: -2px;
}

.matrix-row.drop-after::after,
.matrix-group-row.drop-after::after {
  bottom: -1px;
}

/* Pfeilspitze am linken Rand der Einfuegelinie. */
.matrix-row.drop-before::before,
.matrix-row.drop-after::before,
.matrix-group-row.drop-after::before {
  content: "";
  position: absolute;
  left: 0;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-left: 9px solid var(--accent);
  z-index: 8;
  pointer-events: none;
}

.matrix-row.drop-before::before {
  top: -7px;
}

.matrix-row.drop-after::before,
.matrix-group-row.drop-after::before {
  bottom: -6px;
}

/* Gruppen anordnen: Griff am Gruppenbalken + Drop-Indikatoren (analog zur
   Zeilen-Funktion). */
.matrix-group-grip {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin-left: auto;
  color: rgba(255, 255, 255, .6);
  opacity: 0;
  cursor: grab;
  transition: opacity var(--mo-fast) var(--mo-ease);
}
.matrix-group-row:hover .matrix-group-grip { opacity: .85; }
.matrix-group-grip:active { cursor: grabbing; }
.matrix-group-grip svg { width: 100%; height: 100%; display: block; }
.matrix-group-row.drag-source { opacity: .5; }

/* Davor-Einfuegen (obere Kante) + Pfeilspitze. */
.matrix-group-row.drop-before { position: relative; }
.matrix-group-row.drop-before::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -2px;
  height: 3px;
  background: var(--accent);
  z-index: 7;
  pointer-events: none;
}
.matrix-group-row.drop-before::before {
  content: "";
  position: absolute;
  left: 0;
  top: -7px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-left: 9px solid var(--accent);
  z-index: 8;
  pointer-events: none;
}
/* Hineinziehen (verschachteln): Balken hervorheben. */
.matrix-group-row.drop-into {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* hidden-Attribut schlaegt eigene display-Regeln (flex/inline-flex/grid). */
.badge[hidden],
.callout[hidden],
.status-hero[hidden] {
  display: none;
}

/* ===== Administration (Entwurf A1) und Security (Entwurf S1) =====
   Beide Ansichten organisieren sich selbst: die Administration als
   Unternavigation + Fokusbereiche, Security als Status-Hero + Karten.
   Das aeussere .layout-Grid faehrt dafuer auf eine Spalte zurueck. */

body[data-app-view="admin"] .layout,
body[data-app-view="security"] .layout {
  grid-template-columns: minmax(0, 1fr);
}

body[data-app-view="security"] .layout {
  max-width: 1140px;
}

/* ---------- Administration: Unternavigation + Bereiche ---------- */

.admin-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

/* Gestapelte Rollen-Sicht (Nicht-Admins, nur zwei Bereiche): keine
   Unternavigation, der Inhalt nutzt die volle Breite. */
.admin-layout.stacked {
  grid-template-columns: minmax(0, 1fr);
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}

.subnav {
  position: sticky;
  /* Exakt die natuerliche Position (Topbar ~50px + Layout-Padding 14px):
     ein groesserer Wert wuerde die Leiste initial nach unten druecken -
     ausser in kurzen Bereichen (z. B. Kategorien), wo der Platz dafuer
     fehlt, und die Leiste dann sichtbar hoeher haengt als sonst. */
  top: 64px;
  display: grid;
  gap: 2px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

/* Die display-Regeln oben/unten schlagen das UA-Stylesheet fuer [hidden] -
   Rollen-Sicht (setAdminSection) blendet Leiste, Eintraege und Zonen-Titel
   per hidden-Attribut aus, das muss gewinnen. */
.subnav[hidden],
.subnav button[hidden],
.subnav .subnav-zone[hidden],
.subnav .nav-quiet[hidden] {
  display: none !important;
}

.subnav button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-weight: 600;
  text-align: left;
}

.subnav button:hover { background: var(--surface-2); color: var(--text); }

.subnav button.active {
  background: var(--surface-2);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line);
}

.subnav-ico {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  opacity: .75;
}

.subnav-ico svg {
  width: 100%;
  height: 100%;
  display: block;
}

.subnav .count {
  margin-left: auto;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 400;
}

/* Zonen-Titel der Unternavigation (Mockup AN, wie die Zonen im
   Ansicht-Popover): gliedern Operation / Inhalt / System. */
.subnav .subnav-zone {
  margin: 8px 4px 3px;
  font-size: 9.5px;
  letter-spacing: .09em;
}

.subnav .subnav-zone:first-child {
  margin-top: 2px;
}

/* Ruhiger Hinweis unter der Navigation (z. B. Geltungsbereich der
   Benutzerkonten). */
.nav-quiet {
  margin: 6px 4px 2px;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.45;
}

.admin-content {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.admin-section {
  display: grid;
  gap: 14px;
}

.admin-section[hidden] {
  display: none;
}

/* Duo-Raster (Mockup AN): zwei kurze Panels teilen sich eine Zeile
   (Synchronisation + Operationsdauer, Abschnitte + Snapshot). */
.panel-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}

.head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Icon-Button (z. B. Aktualisieren, Zeilenaktionen): gleiche Hoehe wie die
   uebrigen Kontrollen; in Tabellenzeilen kompakter (--ctl-h-sm, s. u.). */
.icon-btn {
  min-height: var(--ctl-h);
  padding: 4px 10px;
  font-size: 14px;
  line-height: 1;
  color: var(--muted);
}

table.data .icon-btn,
.row-actions .icon-btn {
  min-height: var(--ctl-h-sm);
}

.icon-btn:hover {
  color: var(--text);
}

.inline-select,
select.inline-select {
  width: auto;
  padding: 6px 9px;
  font-size: 12px;
}

/* Destruktive Zeilen-/Kartenaktionen als stiller Text-Link (VP7): kein
   Button-Kostuem - das Rot traegt die Warnung. Die Klasse war bislang
   ungestylt und fiel auf die Standard-Button-Optik zurueck. */
button.danger-link {
  min-height: var(--ctl-h-sm);
  padding: 4px 9px;
  border-color: transparent;
  background: transparent;
  color: var(--danger);
  font-size: 12px;
}

button.danger-link:hover {
  border-color: transparent;
  background: color-mix(in srgb, var(--danger) 10%, transparent);
}

/* Stiller Text-Link ohne Warnfarbe - Muster von .danger-link, aber neutral.
   Traegt die Sammelzeile der erledigten Einladungen. */
button.quiet-link {
  min-height: var(--ctl-h-sm);
  padding: 4px 9px;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
}

button.quiet-link:hover {
  border-color: transparent;
  background: var(--surface-2);
  color: var(--text);
}

/* Sammelzeile der erledigten Einladungen: keine Datenzeile, darum ohne
   Zeilen-Hover und optisch abgesetzt. */
table.data tr.people-closed-toggle > td {
  padding-top: 2px;
  padding-bottom: 2px;
}

/* Rollen-Legende der Personen-Seite: schmale Badge-Spalte, Fliesstext daneben. */
.role-legend {
  margin: 0 0 11px;
}

.role-legend-row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 10px;
  align-items: start;
  font-size: 12px;
  color: var(--muted);
}

.role-legend-row .badge {
  justify-self: start;
}

.role-legend .tech-body > p {
  margin: 2px 0 0;
  font-size: 12px;
}

@media (max-width: 700px) {
  .role-legend-row {
    grid-template-columns: 1fr;
    gap: 3px;
  }
}

/* Aktionsspalte der Personenliste: der Entfernen-Slot ist immer gleich breit
   und wird ohne Entfernen-Recht (eigene Zeile, Eigentuemer) als unsichtbarer
   Platzhalter reserviert - so sitzt "Rechte" in allen Zeilen buendig. */
table.data td.num .danger-link,
table.data td.num .icon-slot {
  box-sizing: border-box;
  display: inline-block;
  width: 33px;
  padding-left: 0;
  padding-right: 0;
  text-align: center;
}

table.data td.num .icon-slot {
  visibility: hidden;
}

/* Selects in Tabellenzellen kompakt (VP7): die Standardhoehe dominierte die
   Zeile (Personenliste, Zeilen & Gruppen). */
table.data .cs-trigger {
  height: var(--ctl-h-sm);
  font-size: 12px;
}

/* Eingabebreiten-Raster (VP4): drei Breiten statt zufaelliger Feldbreiten.
   S = kurze Zahlen, M = Selects/kompakte Werte, field-narrow = Datums-/
   Textfelder mittlerer Laenge, ohne Klasse = volle Breite. */
.w-s {
  max-width: 120px;
}

.w-m {
  max-width: 240px;
}

/* Schmales Einstellungsfeld (Selects in Einstellungs-Karten). */
.field-narrow {
  max-width: 360px;
}

.field-hint {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 12px;
}

/* Einleitungszeile in Karten. */
.panel > .lead {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 12.5px;
}

/* Objekt-Kopf der aktiven Operation: staendiger Kontext ueber allen
   Bereichen (Mockup AN) - links Identitaet + Kennzahlen (dynamisch),
   rechts Operationswahl + Neue Operation (statisch). */
.op-header {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.op-head-main {
  flex: 1;
  min-width: 240px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.op-head-main.empty {
  color: var(--muted);
}

.op-header .op-ident {
  flex: 1;
  min-width: 0;
}

.op-header h1 {
  margin: 0;
  font-size: 17px;
}

.op-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Kennzahlen im Kopf: Wert gross, Beschriftung darunter. */
.op-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin-top: 6px;
}

.op-facts .fact {
  color: var(--muted);
  font-size: 11.5px;
}

.op-facts .fact b {
  display: block;
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Gefahrenzone: bewusst abgesetzt, einzige rote Flaeche der Administration. */
.danger-zone {
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--danger) 4%, var(--panel));
}

.danger-zone h3 {
  margin: 0 0 4px;
  font-size: 13px;
  color: var(--danger);
}

.danger-zone p {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 12.5px;
}

.danger-action {
  border-color: color-mix(in srgb, var(--danger) 50%, var(--line));
  background: transparent;
  color: var(--danger);
}

/* ---------- Daten-Tabellen (Personen, Zeilen, Diagnose-Details) ---------- */

.table-wrap {
  overflow-x: auto;
}

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

table.data th,
table.data td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--grid-line);
  text-align: left;
  vertical-align: middle;
}

table.data th {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--grid-strong);
}

table.data tbody tr:hover {
  background: color-mix(in srgb, var(--text) 4%, transparent);
}

table.data td .sub {
  display: block;
  color: var(--muted);
  font-size: 11.5px;
}

table.data td.num {
  text-align: right;
  white-space: nowrap;
}

/* Gruppenbalken in der Zeilen-Tabelle: gleiche Bildsprache wie die Matrix
   (Ebene 1 dunkel/Versalien, Ebenen 2/3 eingerueckt). */
table.data tr.row-group td {
  background: #0d0d0d;
  color: #f2f2f2;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--grid-strong);
}

table.data tr.row-group.level-2 td {
  background: #131313;
  padding-left: 22px;
  text-transform: none;
}

table.data tr.row-group.level-3 td {
  background: #1f1f1f;
  padding-left: 34px;
  text-transform: none;
}

:root[data-theme="light"] table.data tr.row-group td {
  background: #2b2b2b;
}

:root[data-theme="light"] table.data tr.row-group.level-2 td {
  background: #454545;
}

:root[data-theme="light"] table.data tr.row-group.level-3 td {
  background: #5c5c5c;
}

.person-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.person-cell .who {
  min-width: 0;
}

.person-cell .who strong {
  display: block;
  font-size: 13px;
}

.person-cell .who span {
  color: var(--muted);
  font-size: 11.5px;
}

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface-2);
  font-size: 10px;
  font-weight: 700;
}

/* Status-Punkt fuer Tabellenzellen (kompakter als Badge). */
.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--muted);
  vertical-align: 1px;
}

.dot.ok { background: var(--ok); }
.dot.warn { background: var(--warning); }
.dot.err { background: var(--danger); }

/* Inline-Umbenennen in der Benutzerliste (System-Bereich, nur System-Admins). */
.who.rename-form {
  flex: 1;
}

.who.rename-form input {
  width: 100%;
  min-width: 160px;
  margin: 0 0 2px;
  padding: 4px 8px;
  font-size: 12.5px;
}

.lane-name-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* Zeilen-Sichtbarkeit (Plan SV-U): verborgene Zeilen sind fuer Admins in der
   Zeilenliste gedimmt; das Badge traegt Auge-aus-Icon + Zustandstext. */
.lane-row-hidden .lane-name-cell strong,
.lane-row-hidden .lane-access {
  opacity: 0.55;
}

.lane-vis-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.lane-vis-badge svg {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
}


/* Drei-Stufen-Segment der Sichtbarkeit im Zeilen-Drawer (data-perm-seg-Optik,
   aber volle Breite im schmalen Drawer). */
.lane-vis-seg {
  display: flex;
  margin: 4px 0 10px;
}

.lane-vis-seg button {
  flex: 1;
}

/* Zeilendefault-Chip (Konzept ZD): Kategorie-Farbpunkt im Badge. */
.lane-default-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 5px;
  border-radius: 50%;
  vertical-align: -1px;
}

/* Verschiebe-Griff in der Zeilentabelle (nur Admins; analog zur Matrix), erst
   beim Zeilen-Hover sichtbar. */
.lane-grip {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  color: var(--muted);
  opacity: 0;
  cursor: grab;
  transition: opacity var(--mo-fast) var(--mo-ease);
}
table.data tbody tr:hover .lane-grip { opacity: .8; }
.lane-grip:active { cursor: grabbing; }
.lane-grip svg { width: 100%; height: 100%; display: block; }

/* Drop-Marker beim Zeilen-Drag in der Admin-Tabelle (box-shadow auf den Zellen,
   da der Tabellen-Rahmen kollabiert ist). */
#lanesList tr.drag-source > td { opacity: .5; }
#lanesList tr.drop-before > td { box-shadow: inset 0 2px 0 var(--accent); }
#lanesList tr.drop-after > td { box-shadow: inset 0 -2px 0 var(--accent); }
#lanesList tr.drop-into > td { box-shadow: inset 0 0 0 2px var(--accent); }

.lane-color-static {
  display: inline-block;
}

.lane-access {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.row-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.row-actions button {
  min-height: 0;
  padding: 5px 10px;
  font-size: 12px;
}

/* ---------- Handlungshinweis (Callout) ---------- */

/* Hinweis-Callout: linke Kante + Flaeche statt Vollrahmen (VP7) - traegt die
   Warnfarbe, ohne wie ein Fehlerkasten zu schreien. */
.callout {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 0;
  border-left: 3px solid var(--warning);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: color-mix(in srgb, var(--warning) 7%, var(--panel));
  font-size: 12.5px;
}

.callout.ok {
  border-color: color-mix(in srgb, var(--ok) 40%, var(--line));
  border-left-color: var(--ok);
  background: color-mix(in srgb, var(--ok) 6%, var(--panel));
}

.callout-spacer {
  flex: 1;
}

.callout button {
  min-height: 0;
  padding: 5px 10px;
  font-size: 12px;
}

/* ---------- Security: Status-Hero ---------- */

.sec-layout {
  display: grid;
  gap: 14px;
}

.sec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
  align-items: start;
}

.status-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--ok) 40%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--ok) 7%, var(--panel));
}

.status-hero .status-ico {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 2px solid var(--ok);
  border-radius: 50%;
  color: var(--ok);
  font-size: 19px;
  font-weight: 800;
}

.status-hero .status-copy {
  flex: 1;
  min-width: 0;
}

.status-hero h1 {
  margin: 0;
  font-size: 16px;
}

.status-hero p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12.5px;
}

.status-hero.warn {
  border-color: color-mix(in srgb, var(--warning) 50%, var(--line));
  background: color-mix(in srgb, var(--warning) 8%, var(--panel));
}

.status-hero.warn .status-ico {
  border-color: var(--warning);
  color: var(--warning);
}

.status-hero.err {
  border-color: color-mix(in srgb, var(--danger) 50%, var(--line));
  background: color-mix(in srgb, var(--danger) 8%, var(--panel));
}

.status-hero.err .status-ico {
  border-color: var(--danger);
  color: var(--danger);
}

/* ---------- Pruefzeilen (Status-Kreis + Label + Wert) ---------- */

.check-list {
  display: grid;
}

.check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 2px;
  border-bottom: 1px solid var(--grid-line);
  font-size: 13px;
}

.check-row:last-child {
  border-bottom: 0;
}

.check-state {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--ok);
  border-radius: 50%;
  color: var(--ok);
  font-size: 11px;
  font-weight: 800;
}

.check-state.warn { border-color: var(--warning); color: var(--warning); }
.check-state.err { border-color: var(--danger); color: var(--danger); }
.check-state.idle { border-color: var(--line); color: var(--muted); }

.check-label {
  flex: 1;
  min-width: 0;
}

.check-label small {
  display: block;
  color: var(--muted);
  font-size: 11.5px;
}

.check-value {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.check-area {
  display: grid;
  gap: 10px;
}

/* ---------- Aufklappbare technische Details ---------- */

details.tech {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-2);
}

details.tech > summary {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}

details.tech > summary::-webkit-details-marker {
  display: none;
}

details.tech > summary::before {
  content: "\203A";
  transition: transform var(--mo-fast) var(--mo-ease);
}

details.tech[open] > summary::before {
  transform: rotate(90deg);
}

details.tech > .tech-body {
  display: grid;
  gap: 8px;
  padding: 2px 11px 11px;
}

.kv {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 4px 12px;
  margin: 0;
  font-size: 12px;
}

.kv dt {
  color: var(--muted);
}

.kv dd {
  margin: 0;
}

/* ---------- Protokoll-Feed (feste Spalten Zeit | Text) ---------- */

.feed {
  display: grid;
}

.feed-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: baseline;
  gap: 12px;
  padding: 7px 2px;
  border-bottom: 1px solid var(--grid-line);
  font-size: 12.5px;
}

.feed-item:last-child {
  border-bottom: 0;
}

.feed-item time {
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.feed-item .feed-msg {
  min-width: 0;
  overflow-wrap: anywhere;
}

.log-feed {
  max-height: 420px;
  overflow-y: auto;
}

.log-detail summary {
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
}

.log-detail pre {
  min-height: 0;
  max-height: 240px;
  margin-top: 4px;
  font-size: 11px;
}

/* ---------- Drawer-Ergaenzungen ---------- */

.drawer .drawer-hint {
  margin: 10px 0 0;
  font-size: 12px;
}

.drawer-body > h3 {
  margin: 16px 0 0;
}

@media (max-width: 980px) {
  .layout {
    grid-template-columns: 1fr;
  }

  .admin-layout {
    grid-template-columns: 1fr;
  }

  .subnav {
    position: static;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .subnav button {
    width: auto;
  }

  /* Umbruch in eine Zeilenleiste: Zonen-Titel und Hinweis stoeren dort. */
  .subnav .subnav-zone,
  .subnav .nav-quiet {
    display: none;
  }

  .panel-duo {
    grid-template-columns: 1fr;
  }

  .kv {
    grid-template-columns: 1fr;
  }

  body[data-app-view="matrix"] .layout {
    grid-template-columns: 1fr;
  }

  .topbar {
    align-items: stretch;
  }

  .brand {
    min-width: 0;
  }

  .session-state {
    margin-left: 0;
  }

  .event-grid,
  .key-backup-layout {
    grid-template-columns: 1fr;
  }

  /* --label-w auf dem Wrap (nicht nur auf dem Board): die Jetzt-Overlay/
     Rand-Marker sind Geschwister des Boards im Wrap und muessen denselben
     Spaltenversatz erben, sonst sitzt die Jetzt-Linie falsch (Root-Default). */
  .matrix-board-wrap {
    --label-w: 160px;
  }

  .matrix-lane {
    border-right: 1px solid var(--grid-strong);
    border-bottom: 0;
  }
}

/* ===== Telefon-Layout (Mockup S) ==========================================
   Layout-Wechsel an der BREITE (< 700 px), getrennt vom Touch-Modus
   (pointer: coarse). Bottom-Navigation, abgespeckte Topbar, Drawer als
   Sheets, Telefon-Agenda. Desktop bleibt unberuehrt. */
.phone-nav { display: none; }
/* Status-Kopf (Plan MT-U S1): existiert nur auf dem Telefon. */
.phone-status-tools { display: none; }

@media (max-width: 700px) {
  /* Topbar abspecken: Werkzeuge + Seiten-Nav weichen der Bottom-Bar. Der
     Trenner zwischen Marke und Operationsname bleibt aber sichtbar. */
  .topbar { gap: 8px; padding: 8px 12px; }
  .topbar-tools { display: none; }
  /* Zeilen-Scope-Pille entfaellt auf dem Telefon - dort uebernimmt die
     Scope-Pille der Matrix-Steuer-Zeile (#phoneScopeBar). */
  .lane-scope { display: none; }
  .topbar-context { min-width: 0; }
  .topbar-context strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* User-Pille entfaellt auf dem Telefon (Plan MT-U S1) - ihre Inhalte
     wohnen in der Konto-Zone des Werkzeug-Decks. */
  .topbar-sep, .user-menu-wrap { display: none; }

  /* Status-Kopf: drei 40-px-Ziele (Suche, Wachposten, Sync) statt der
     versteckten Werkzeugleiste. */
  .phone-status-tools:not([hidden]) {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
  }
  .phone-status-tools button {
    position: relative;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--bg);
    color: var(--muted);
    cursor: pointer;
    padding: 0;
  }
  .phone-status-tools button svg { width: 17px; height: 17px; }
  .phone-status-tools button[hidden] { display: none; }
  .phone-status-tools .activity-btn-badge { top: -5px; right: -5px; }
  .phone-sync-dot {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ok);
  }
  #phoneSyncBtn.offline .phone-sync-dot { background: var(--warning); }
  #phoneSyncBtn.offline { color: var(--warning); }
  /* Flanken-Puls der Glocke auch am Telefon-Ziel (Motion-Grammatik). */
  #phoneWatchBtn.watch-flash svg { animation: watch-flash var(--mo-slow) var(--mo-ease); }

  /* Inhalt bekommt unten Platz fuer die fixe Bottom-Bar. */
  .layout { padding: 10px; padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
  .agenda-view { padding: 0; border: 0; background: transparent; }
  /* Kategorie-Legende auf dem Telefon aus (Konflikt mit der fixen Bottom-Bar);
     der JS-Render blendet sie ohnehin aus (phoneMatrixActive). */
  .matrix-legend { display: none; }
  /* Telefon scrollt weiter ueber die Seite (Bottom-Bar), kein internes
     Board-Scrollen / keine feste Workspace-Hoehe. */
  body[data-app-view="matrix"] .matrix-workspace { height: auto; overflow: visible; }
  .matrix-board { height: auto; }

  /* Bottom-Navigation. */
  .phone-nav {
    display: grid;
    /* Uebergangszustand: drei Tabs (Tag/Aktivitaet/Mehr) - der Matrix-Tab ist
       bis zur Touch-Ueberarbeitung ausgeblendet (hidden in app.html). */
    grid-template-columns: repeat(3, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    border-top: 1px solid var(--grid-strong);
    background: var(--surface);
    padding: 4px 0 calc(6px + env(safe-area-inset-bottom));
  }
  /* Auf dem Lock-/Onboarding-Screen gibt es keine Operation - Bottom-Bar und
     FAB bleiben weg, bis die App freigegeben ist. */
  body.locked .phone-nav,
  body.locked .phone-fab { display: none; }

  /* Toast ueber die Bottom-Bar heben (sonst verdeckt er die Navigation, 62 px
     hoch). Im Zeilen-Fokus sitzt zusaetzlich der FAB unten rechts - dann den
     Toast darueber legen. Auf dem Lock-Screen (keine Bar) bleibt er unten. */
  .status-toast {
    bottom: calc(62px + 12px + env(safe-area-inset-bottom));
  }
  body.locked .status-toast {
    bottom: calc(18px + env(safe-area-inset-bottom));
  }
  body.phone-focus .status-toast {
    bottom: calc(124px + env(safe-area-inset-bottom));
  }
  /* Ausweich-Bahn (Mockup TO) am Telefon: das Sheet ist vollbreit UND liegt
     auf z 100 (gleiche Ebene wie der Toast, aber spaeter im DOM) - ohne
     z-Anhebung verschwindet die Meldung HINTER dem Sheet. Der Toast hebt
     sich ueber den Sheet-Fuss; --drawer-foot-clear ist GEMESSEN (inkl.
     mehrzeilig umgebrochener Fuesse und safe-area im Sheet-Fussabstand).
     Gewinnt gegen die Bottom-Bar- und die phone-focus-Regel durch die
     spaetere Position im Stylesheet. */
  body.drawer-open .status-toast {
    bottom: calc(var(--drawer-foot-clear, 71px) + 12px);
    z-index: 101;
  }
  .phone-nav button {
    position: relative;
    display: grid; justify-items: center; gap: 2px;
    border: 0; background: transparent; color: var(--muted);
    font: inherit; font-size: 10px; font-weight: 800; cursor: pointer;
    padding: 6px 0 2px;
  }
  .phone-nav button[hidden] { display: none; }
  .phone-nav button.on { color: var(--text); }
  .phone-nav button.on::before { content: ""; position: absolute; top: -4px; left: 30%; right: 30%; height: 2px; border-radius: 999px; background: var(--accent); }
  .phone-nav svg { width: 18px; height: 18px; }
  .phone-nav-badge {
    position: absolute; top: 0; right: 26%;
    min-width: 14px; height: 14px; display: grid; place-items: center;
    padding: 0 3px; border-radius: 999px;
    background: var(--accent); color: #fff; font-size: 8.5px; font-weight: 800;
  }
  .phone-nav-badge[hidden] { display: none; }

  /* Drawer -> Bottom-Sheet: von unten, volle Breite, runde Oberkante.
     bottom:0 verankert das Sheet am Viewport-Rand - sonst schiebt
     translateY(100%) (= eigene Hoehe) das geschlossene Sheet nicht aus dem Bild. */
  .drawer {
    top: auto; bottom: 0; right: 0; left: 0;
    /* Ueber der Bottom-Bar (z 90) und dem FAB (z 88), sonst verdeckt die Nav
       die unteren Eintraege des Sheets. */
    z-index: 100;
    width: 100%; height: auto; max-height: 88vh; max-height: 88dvh;
    border-left: 0; border-top: 1px solid var(--grid-strong);
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
  }
  .drawer.open { transform: translateY(0); box-shadow: 0 -16px 48px rgba(0, 0, 0, .38); }
  /* Drag-Handle (Plan MT-U S6): sichtbarer Griff + Wisch-zum-Schliessen
     (phone-chrome.js zieht das Sheet am Kopf mit dem Finger mit). */
  .drawer.open::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--grid-strong);
    z-index: 1;
  }
  .drawer.sheet-dragging { transition: none; }
  .drawer .drawer-head { touch-action: none; }
  /* Scrim ueber Bottom-Bar/FAB ziehen (sonst leuchten sie durch das Dimmen),
     aber unter dem Sheet (z 100). */
  .drawer-scrim { z-index: 95; }
  /* Confirm-Overlay MUSS ueber dem Sheet liegen (Desktop: 90 > 85; hier hebt
     das Sheet auf z 100 - sonst erscheint die Rueckfrage HINTER dem Sheet). */
  .confirm-overlay { z-index: 110; }
  /* Gestapelte Sheets: volle Breite; Ebene 2 bleibt etwas niedriger, damit
     die Oberkante von Ebene 1 sichtbar bleibt (Plan MT-U S6) - der Rueckweg
     ist damit SICHTBAR, nicht nur der Zurueck-Pfeil im Kopf. */
  .drawer.drawer-stacked { max-width: none; }
  /* Ebene 1 unter dem Stapel: opak abdunkeln statt Transparenz - das Sheet
     fuellt hier fast den Bildschirm, mit opacity schiene die Matrix durch. */
  .drawer.drawer-under { opacity: 1; filter: brightness(.55); }
  .drawer.open.drawer-stacked { max-height: 80vh; max-height: 80dvh; }
  .drawer-head { border-radius: 16px 16px 0 0; }
  /* iOS-Auto-Zoom vermeiden: Eingaben >= 16 px. */
  .drawer input, .drawer select, .drawer textarea { font-size: 16px; }

  /* "Mehr"-Liste. */
  .more-list { display: flex; flex-direction: column; }
  .more-row {
    display: flex; align-items: center; gap: 12px;
    min-height: 52px; padding: 0 16px;
    border: 0; border-bottom: 1px solid var(--grid-line); border-radius: 0;
    background: transparent; color: var(--text);
    font: inherit; font-size: 14px; font-weight: 700; text-align: left; cursor: pointer;
  }
  /* Die globale button:hover-Regel (border-color: accent) wuerde hier die
     einzige sichtbare Kante - die untere Trennlinie - rot faerben; auf Touch
     klebt der Hover-Zustand nach dem Tipp. Trennlinie bleibt neutral. */
  .more-row:hover { border-color: var(--grid-line); }
  .more-row .more-ico { flex: 0 0 auto; color: var(--muted); }
  .more-row .more-ico svg { width: 20px; height: 20px; display: block; }
  .more-row .more-label { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
  .more-row .more-label small { color: var(--muted); font-size: 11px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .more-row .more-chev { color: var(--muted); font-size: 13px; }
  .more-row.danger .more-label { color: var(--danger); }

  /* Werkzeug-Deck (Plan MT-U S2): Zonen-Titel, Schalter-Zeilen, Sprach-Zeile. */
  .more-sec {
    margin: 10px 0 0;
    padding: 8px 16px 5px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .more-tgl {
    flex: none;
    width: 40px;
    height: 22px;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--grid-strong);
    position: relative;
    transition: background var(--mo-fast) var(--mo-ease), border-color var(--mo-fast) var(--mo-ease);
  }
  .more-tgl::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--muted);
    transition: left var(--mo-fast) var(--mo-ease), background var(--mo-fast) var(--mo-ease);
  }
  .more-tgl.on { background: color-mix(in srgb, var(--accent) 35%, var(--surface-2)); border-color: var(--accent); }
  .more-tgl.on::after { left: 20px; background: #fff; }
  .more-lang { cursor: default; }
  .more-lang-btns { display: flex; gap: 6px; }
  .more-lang-btns button {
    min-width: 40px;
    height: 32px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bg);
    color: var(--muted);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
  }
  .more-lang-btns button.on { color: var(--text); border-color: var(--accent); }

  /* Telefon-Agenda (read-only Verfolgung). */
  .phone-agenda { padding: 2px 0 8px; }
  .pa-sec { padding: 11px 14px 4px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
  .pa-sec.warn { color: var(--warning); }
  .pa-empty { padding: 8px 14px; color: var(--muted); font-size: 12px; }
  .pa-card {
    display: flex; align-items: center; gap: 10px;
    width: 100%; text-align: left;
    margin: 0 0 1px; padding: 10px 14px;
    border: 0; border-left: 4px solid var(--accent); border-bottom: 1px solid var(--grid-line);
    background: var(--surface); color: var(--text);
    font: inherit; cursor: pointer;
  }
  .pa-main { flex: 1; min-width: 0; }
  .pa-main b { display: block; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pa-main span { color: var(--muted); font-size: 11.5px; }
  .pa-state { flex: 0 0 auto; font-size: 11px; font-weight: 800; color: var(--muted); }
  .pa-state.late { color: var(--warning); }
  /* Verzugs-Karte mit Direkt-Aktion (Plan MT-U S3): Aktions-Zeile unter der
     Karte, 38-px-Ziele; die Karte selbst bleibt Sprungziel. */
  .pa-card.pa-actionable { flex-wrap: wrap; }
  .pa-acts { width: 100%; display: flex; gap: 8px; margin-top: 8px; }
  .pa-act {
    flex: 1;
    height: 38px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--bg);
    color: var(--text);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
  }
  .pa-act.prim { background: var(--accent); border-color: var(--accent); color: #fff; }
  .pa-state.run { color: var(--ok); }
  .pa-chev { flex: 0 0 auto; color: var(--muted); font-size: 13px; }
  /* Agenda-Sortier-Umschalter (P3). */
  .agenda-sort { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 4px 10px 6px; padding: 3px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
  .agenda-sort button { border: 0; border-radius: 6px; background: transparent; color: var(--muted); font: inherit; font-size: 11px; font-weight: 800; padding: 6px 0; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .agenda-sort button.on { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
  /* EINE Steuer-Zeile der Agenda (Plan MK-U S2): Scope-Pille + Liste|Tag +
     Sortier-Symbol nebeneinander; die Sortier-Modi wohnen im Sheet. */
  .agenda-ctl { display: flex; align-items: center; gap: 8px; padding: 8px 10px 6px; }
  .agenda-ctl .agenda-sort { margin: 0; flex: 0 0 auto; }
  .agenda-ctl .agenda-sort button { padding: 6px 10px; }
  .agenda-ctl-sp { flex: 1; }
  .agenda-sort-btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 32px; padding: 0 8px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--muted); cursor: pointer; }
  .agenda-sort-btn svg { width: 15px; height: 15px; }
  /* Chronologisch: Zeit-Vorspalte + Jetzt-Trenner. */
  .pa-time { flex: 0 0 auto; width: 40px; color: var(--muted); font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; }
  .pa-now { display: flex; align-items: center; gap: 8px; margin: 8px 14px; color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: .06em; white-space: nowrap; }
  .pa-now::before, .pa-now::after { content: ""; flex: 1; height: 1px; background: color-mix(in srgb, var(--accent) 45%, transparent); }
  /* Nach Zeile: Gruppenkopf. */
  .pa-lane-hdr { display: flex; align-items: center; gap: 7px; padding: 11px 14px 4px; font-size: 11px; font-weight: 800; }
  .pa-lane-hdr .dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 3px; }

  /* Zeilen-Fokus (S2): Unter-Kopf mit Zurueck + Name, Zeilen-Schnellwechsel. */
  .phone-focus-bar { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-bottom: 1px solid var(--grid-line); background: var(--surface); }
  .phone-focus-bar[hidden] { display: none; }
  .phone-focus-back { flex: 0 0 auto; width: 32px; height: 32px; display: grid; place-items: center; border: 0; background: transparent; color: var(--text); cursor: pointer; }
  .phone-focus-back svg { width: 18px; height: 18px; }
  .phone-focus-dot { flex: 0 0 auto; width: 11px; height: 11px; border-radius: 50%; }
  .phone-focus-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Zeilen-Fokus: der vertikale Zeilenkopf-Name ist redundant zum Fokus-Bar. */
  body.phone-focus .matrix-lane-headrow .matrix-lane-name { display: none; }

  /* Im Fokus traegt der Fokus-Bar Name + Farbe der fokussierten Zeile - deren
     Zeilenkopf-Spalte links entfaellt (Breite 0), ihren Platz gewinnt der
     Zeitstrahl. Die SOLL/IST-Spaltenlabels bleiben. */
  body.phone-focus .matrix-lane { padding: 0; border-left-width: 0; border-right-width: 0; }

  /* ===== Telefon-Kompakt-Matrix (Plan MK-U S4/S5) =====
     body.phone-mx = Matrix-Tab auf dem Telefon (Uebersicht UND Fokus): die
     Zeilenkopf-Spalte entfaellt (--label-w 0 auf dem Wrap, damit Grid,
     Jetzt-Overlay und matrixViewportTimeWidth konsistent 0 lesen) -
     Kompaktzeilen tragen ihren Namen als Kopfzeile QUER ueber die Breite. */
  body.phone-mx .matrix-board-wrap { --label-w: 0px; }
  /* Gruppenbalken: Label ueber die volle Breite statt in der 0-Spalte. */
  body.phone-mx .matrix-group-label { grid-column: 1 / -1; max-width: 100vw; }

  /* Kompaktzeile: Kopf + Spuren stapeln als Block (kein Kopf-Spalten-Grid). */
  body.phone-mx .matrix-row-collapsed.mxc { display: block; min-height: 0; }
  .mxc-head { position: sticky; left: 0; z-index: 2; display: flex; align-items: center; gap: 7px; width: 100vw; min-height: 24px; padding: 3px 10px 0; cursor: pointer; }
  .mxc-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; }
  .mxc-name { flex: 0 1 auto; min-width: 0; font-size: 11px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mxc-head .matrix-lane-lost { position: static; flex: 0 0 auto; }
  .mxc-chip { margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; font: 700 10px/1 ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-variant-numeric: tabular-nums; color: var(--warning); white-space: nowrap; }
  .mxc-chip svg { width: 11px; height: 11px; }
  .mxc-chip.missed { color: var(--danger); }

  /* Spuren-Koerper: zwei 19-px-Etagen (SOLL oben, IST unten) + Raender. */
  body.phone-mx .mxc .matrix-track-compact { height: 47px; min-height: 47px; }

  /* Kompaktblock: echte .matrix-block-Mechanik in kleiner Bauhoehe. Kein
     Spalten-Layout, kein Padding-Ueberhang; Titel kappt per Ellipsis. Die
     Trefferflaeche waechst unsichtbar (::after), Optik bleibt 19 px. */
  .mb-compact { display: block; height: 19px; padding: 0 5px; overflow: visible; font-size: 9.5px; line-height: 17px; }
  .mb-compact.mxc-t-plan { top: 3px; }
  .mb-compact.mxc-t-act { top: 25px; }
  .mb-compact .matrix-block-title { display: block; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 700; font-size: 9.5px; line-height: 17px; }
  .mb-compact .matrix-block-title.mxc-sig { text-align: center; font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace; }
  .mb-compact::after { content: ""; position: absolute; inset: -4px 0; }
  .mb-compact .matrix-block-late { border-radius: inherit; }

  /* Echo-Bloecke (read-only Projektion): gestrichelter neutraler Traeger. */
  .mxc-echo { position: absolute; height: 19px; border: 1px dashed var(--grid-strong); border-radius: var(--blk-r, 2px); opacity: .55; }
  .mxc-echo.mxc-t-plan { top: 3px; }
  .mxc-echo.mxc-t-act { top: 25px; }

  /* FAB (neuen Block in der fokussierten Zeile erfassen): runder Icon-Knopf,
     Beschriftung nur als title/aria-label (renderPhoneFab). */
  .phone-fab {
    position: fixed; right: 14px; bottom: calc(70px + env(safe-area-inset-bottom)); z-index: 88;
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; padding: 0;
    border: 0; border-radius: 50%;
    background: var(--accent); color: #fff;
    font: inherit;
    box-shadow: var(--shadow); cursor: pointer;
  }
  .phone-fab[hidden] { display: none; }
  .phone-fab svg { width: 20px; height: 20px; }
}

/* ===== Zeilen-Scope (Mockup P2b) ==========================================
   Pille (Uebersicht/Agenda) + Scope-Sheet mit Favoriten-Sternen. Die Elemente
   tauchen nur auf dem Telefon auf (JS-gesteuert), daher keine Media-Gate-Pflicht. */
.phone-scope-bar { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-bottom: 1px solid var(--grid-line); background: var(--surface); }
.phone-scope-bar[hidden] { display: none; }
.scope-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid var(--accent); border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--text); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.scope-pill svg { width: 13px; height: 13px; flex: 0 0 auto; }
.scope-pill .cnt { color: var(--muted); font-weight: 700; }
.scope-sheet-body { padding: 6px 0 4px; }
.scope-row { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 46px; padding: 0 16px; border: 0; border-bottom: 1px solid var(--grid-line); border-radius: 0; background: transparent; color: var(--text); font: inherit; font-size: 13.5px; font-weight: 800; text-align: left; cursor: pointer; }
/* Wie .more-row/.op-row: Trennlinie bleibt auch bei (klebendem) Hover neutral. */
.scope-row:hover { border-color: var(--grid-line); }
.scope-row .cnt { margin-left: auto; color: var(--muted); font-size: 12px; font-weight: 700; }
.scope-row.on { color: var(--accent); }
.scope-sec { padding: 9px 16px 4px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.scope-sec.muted { text-transform: none; letter-spacing: 0; font-weight: 600; }
.scope-lane { display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-bottom: 1px solid var(--grid-line); font-size: 13px; }
.scope-lane .dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; }
.scope-lane .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scope-star { flex: 0 0 auto; width: 36px; height: 36px; border: 0; background: transparent; color: var(--line); font-size: 18px; cursor: pointer; }
.scope-star.on { color: var(--accent); }

/* Operations-Sheet (Mockup P4): Operation wechseln. */
.op-sheet-body { padding: 6px 0 4px; }
.op-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 0 16px; border: 0; border-bottom: 1px solid var(--grid-line); border-radius: 0; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
/* Wie .more-row: die globale button:hover-Regel darf die Trennlinie nicht
   rot faerben (klebender Hover nach dem Tipp auf Touch). */
.op-row:hover { border-color: var(--grid-line); }
.op-row .op-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.op-row .op-main b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-row .op-main span { color: var(--muted); font-size: 11px; }
.op-row.on .op-main b { color: var(--accent); }
.op-row .op-check { flex: 0 0 auto; color: var(--accent); font-size: 15px; font-weight: 900; }

/* ===== Touch-Modus (Mockup T1 + Gestenmodell G) ============================
   Faehigkeit statt Breite: Groessen/Zeilenkopf haengen am groben Primaer-
   zeiger (pointer: coarse); die Gesten-Verzweigung passiert in app.js pro
   Event ueber pointerType. Die Block-/Spurhoehen rechnet matrixSlotHeight()
   in app.js passend dazu (44-px-Ziele). */

/* Schwebende Aktionsleiste der Touch-Auswahl (immer definiert - sie folgt
   der Auswahl, nicht dem Medium; sichtbar nur mit ausgewaehltem Block). */
.matrix-touchbar {
  position: fixed;
  z-index: 96;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.matrix-touchbar[hidden] {
  display: none;
}

/* Kurzinfo-Zeile ueber den Aktionen (Plan MT-U S4): Zeit/Dauer/Verzug des
   ausgewaehlten Blocks - ersetzt den auf Touch verlorenen Block-Tooltip. */
.matrix-touchbar .touchbar-info {
  padding: 3px 8px 2px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.matrix-touchbar .touchbar-info .late { color: var(--warning); }
.matrix-touchbar .touchbar-actions { display: flex; gap: 2px; }

/* Ordnen-Sheet (Plan MT-U S5): grosse Griffe, 44-px-Zeilen. */
.order-sec {
  padding: 10px 16px 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.order-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 12px;
  border-bottom: 1px solid var(--grid-line);
}
.order-row.dragging { background: var(--surface-2); opacity: .85; }
.order-grip {
  touch-action: none;
  cursor: grab;
  color: var(--muted);
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
}
.order-grip svg { width: 18px; height: 18px; }
.order-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.order-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-btns { display: flex; gap: 4px; }
.order-btns button {
  width: 36px;
  height: 36px;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.matrix-touchbar button {
  width: 40px;
  height: 40px;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.matrix-touchbar button:hover {
  background: var(--surface-2);
}

.matrix-touchbar button.danger {
  color: var(--danger);
}

.matrix-touchbar button svg {
  width: 16px;
  height: 16px;
}

.matrix-touchbar .vsep {
  width: 1px;
  margin: 6px 2px;
  background: var(--grid-line);
}

/* Touch-Auswahl am Block: Akzentrahmen + fingergrosse Knopf-Griffe an
   Start und Ende (Mockup T1). */
.matrix-block.touch-selected {
  overflow: visible;
  z-index: 5;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 75%, transparent);
}

.matrix-touch-knob {
  position: absolute;
  top: 50%;
  width: 22px;
  height: 22px;
  border: 2.5px solid var(--accent);
  border-radius: 50%;
  background: var(--bg);
  z-index: 6;
  transform: translate(-50%, -50%);
  cursor: ew-resize;
}

.matrix-touch-knob-l {
  left: 0;
}

.matrix-touch-knob-r {
  left: 100%;
}

/* Unsichtbar vergroesserte Trefferflaeche der Knoepfe. */
.matrix-touch-knob::after {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 50%;
}

/* ===== Monitoring (Plan MD-U): Zahlenleiste, Tabellen, schmale Trends -
   bewusst kein Karten-Dashboard (Policy 10). ===== */
.mon-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mon-statrow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  border: 1px solid var(--grid-strong);
  border-radius: 10px;
  overflow: hidden;
  margin: 12px 0;
  background: var(--bg);
}
.mon-stat { padding: 11px 14px; border-right: 1px solid var(--grid-line); }
.mon-stat:last-child { border-right: 0; }
.mon-stat .v {
  font: 700 19px/1.15 ui-monospace, "SFMono-Regular", Consolas, monospace;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.mon-stat .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.mon-stat .dot.ok { background: var(--ok); }
.mon-stat .dot.warn { background: var(--warning); }
.mon-stat .dot.bad { background: var(--danger); }
.mon-stat .k { display: block; margin-top: 3px; font-size: 10px; color: var(--muted); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.mon-line {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 2px;
  border-bottom: 1px solid var(--grid-line);
  font-size: 13px;
}
.mon-line .lbl { color: var(--muted); min-width: 150px; font-size: 12px; }
.mon-line b { color: var(--text); }
.mon-line .spacer { flex: 1; }
.mon-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 26px; }
.mon-bars i { width: 9px; background: color-mix(in srgb, var(--accent) 55%, var(--muted)); opacity: .8; border-radius: 2px 2px 0 0; }
.mon-quiet { color: var(--muted); font-size: 12px; }
.mon-quiet-sub { display: block; color: var(--muted); font-size: 10.5px; }
.mon-sub { margin: 18px 0 6px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.mon-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 2px;
  border: 0;
  border-bottom: 1px solid var(--grid-line);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  text-align: left;
}
.mon-row b { color: var(--text); }
.mon-row .spacer { flex: 1; }
.mon-row .mon-go { color: var(--accent); font-size: 12px; font-weight: 700; }
button.mon-row { cursor: pointer; }
button.mon-row:hover .mon-go { text-decoration: underline; }
.mon-row.mon-ok { color: var(--muted); font-size: 12.5px; }
.mon-table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin: 4px 0 6px; }
.mon-table th { text-align: left; padding: 7px 8px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; border-bottom: 1px solid var(--grid-strong); }
.mon-table td { padding: 8px; border-bottom: 1px solid var(--grid-line); vertical-align: middle; }
.mon-table tr.mon-finding td { background: color-mix(in srgb, var(--warning) 5%, transparent); }
.mon-pill { display: inline-block; border-radius: 999px; padding: 2px 8px; font-size: 10px; font-weight: 800; white-space: nowrap; }
.mon-pill.ok { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.mon-pill.warn { background: color-mix(in srgb, var(--warning) 14%, transparent); color: var(--warning); }
.mon-pill.bad { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.mon-feed { border: 1px solid var(--grid-line); border-radius: 9px; overflow: hidden; }
.mon-feedrow { display: flex; gap: 10px; padding: 7px 11px; border-bottom: 1px solid var(--grid-line); font-size: 12.5px; align-items: baseline; }
.mon-feedrow:last-child { border-bottom: 0; }
.mon-feedrow time { font: 600 10.5px/1.5 ui-monospace, Consolas, monospace; color: var(--ink-faint, var(--muted)); min-width: 92px; }
.mon-more { margin-top: 8px; }

/* ===== Tablet-Deck (Plan MT-U S7): grober Zeiger + breiter als Telefon ===== */
/* Basis: Dock + Toggle existieren nur im Tablet-Modus; die Topbar-Icons
   (tb-ico) bleiben am Desktop unsichtbar - dort tragen die Woerter. */
.tablet-dock { display: none; }
.tablet-dock-btn { display: none; }
.topbar-tools .tb-ico { display: none; }

@media (pointer: coarse) and (min-width: 701px) {
  /* S7a Icon-Topbar: Beschriftungen kollabieren zu 44-px-Icon-Zielen; die
     Woerter stehen weiterhin in den Popovers und Tooltips. */
  .topbar-tools button { min-height: 44px; }
  .topbar-tools .tb-label { display: none; }
  .topbar-tools .tb-ico { display: grid; place-items: center; }
  .topbar-tools .tb-ico svg { width: 18px; height: 18px; }
  #matrixNewBtn, #matrixViewOptionsBtn, #activityBtn, #watchBtn, #matrixSearchBtn, #tabletDockBtn {
    min-width: 44px;
    min-height: 44px;
    height: auto;
    justify-content: center;
  }
  #matrixSearchBtn svg { width: 18px; height: 18px; }

  /* S7b Dock-Leiste: fixed rechts unter der Topbar, die Matrix rueckt per
     margin zusammen (Board rechnet seine Breite ohnehin pro Render). */
  .tablet-dock-btn:not([hidden]) { display: grid; place-items: center; }
  .tablet-dock-btn svg { width: 18px; height: 18px; }
  .tablet-dock-btn.active { color: var(--text); border-color: var(--accent); }
  .tablet-dock:not([hidden]) {
    display: block;
    position: fixed;
    top: var(--topbar-h, 50px);
    right: 0;
    bottom: 0;
    width: 300px;
    z-index: 40;
    border-left: 1px solid var(--grid-strong);
    background: var(--surface);
    overflow-y: auto;
    padding: 8px 10px calc(10px + env(safe-area-inset-bottom));
  }
  body.tablet-dock-open[data-app-view="matrix"]:not(.briefing) .matrix-workspace {
    margin-right: 300px;
  }
  .td-sec {
    padding: 10px 4px 5px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .td-sec.warn { color: var(--warning); }
  .td-empty { padding: 4px; color: var(--muted); font-size: 12px; }
  .td-card {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 0 0 6px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
  }
  .td-main { flex: 1; min-width: 0; }
  .td-main b { display: block; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .td-main span { color: var(--muted); font-size: 11px; }
  .td-chip { flex: none; font-size: 11px; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
  .td-chip.late { color: var(--warning); }
}

/* S7c Drawer-Responsivitaet: seitliche Drawer klemmen auf die Fensterbreite. */
@media (max-width: 1100px) and (min-width: 701px) {
  .drawer { max-width: 92vw; }
  .drawer--wide { width: min(680px, 92vw); }
}

@media (pointer: coarse) {
  /* Fingerdimensionierte Kontrollen (Plan MT-U S6): die Tokens tragen die
     Vergroesserung durch alle Formulare, Drawer und Custom-Selects. */
  :root {
    --ctl-h: 40px;
    --ctl-h-sm: 34px;
  }
  /* Kleinstziele: unsichtbar vergroesserte Trefferflaechen (~44 px) fuer
     Verzugs-Pills und Abweichungs-Chips - die Optik bleibt dicht, nur die
     Physik waechst. */
  .matrix-block-late-chip::after,
  .matrix-deviation-chip::after {
    content: "";
    position: absolute;
    inset: -12px;
  }
  /* Bewohner des Marker-Bands wachsen nur HORIZONTAL: vertikal begrenzt das
     Band (overflow:hidden als Containment-Klammer) - eine vertikale Halo
     wuerde abgeschnitten bzw. stahl frueher Taps in der ersten Spurzeile. */
  .matrix-milestone-pin::after,
  .matrix-fold-cap::after {
    content: "";
    position: absolute;
    inset: 0 -12px;
  }
  /* Datetime-Picker: groessere Stunden-/Minuten-Ziele. */
  .dtp-hour-grid button,
  .dtp-min-grid button {
    min-height: 38px;
    font-size: 12px;
  }

  /* Kein Textselektieren/iOS-Callout beim Langdruck auf der Arbeitsflaeche. */
  .matrix-board {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }

  /* T1: schmaler, vertikaler Zeilenkopf - mehr Zeitflaeche, Farbkante
     bleibt, Name um 90 Grad gedreht; Chevron oben, Hover-Griff entfaellt
     (Reorder weiterhin ueber Administration/Kontextmenue). */
  /* Auf dem Wrap, damit Jetzt-Overlay/Rand-Marker (Geschwister des Boards)
     denselben schmalen Spaltenversatz erben wie das Board selbst. */
  .matrix-board-wrap {
    --label-w: 46px;
  }

  /* Der ganze Zeilenkopf ist das Tippziel zum Ein-/Ausklappen (Click-Handler,
     wie das Gruppen-Label) - daher Zeiger-Cursor. */
  .matrix-lane {
    padding: 6px 2px;
    cursor: pointer;
  }

  /* Touch: kein Chevron-Icon (der ganze Kopf togglet) - der vertikale Name
     bekommt die frei werdende Hoehe. Der Name ist absolut positioniert: der
     Zeilenkopf traegt nichts zur Zeilenhoehe bei (die bestimmen allein die
     Spuren), der Name nutzt genau die vorhandene Hoehe (Ellipsis kappt). */
  .matrix-lane-headrow {
    position: static;
  }

  .matrix-lane-caret {
    display: none;
  }

  .matrix-lane-headrow .matrix-lane-name {
    position: absolute;
    top: 8px;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%) rotate(180deg);
    min-width: 0;
    writing-mode: vertical-rl;
    font-size: 11px;
    letter-spacing: .04em;
  }

  /* Eingeklappte Zeilen muessen kompakt BLEIBEN (Sinn des Einklappens):
     der Name steht wieder horizontal und legt sich als Overlay ueber
     Zeilenkopf- UND Spur-Label-Spalte (beide sticky, zusammen ~104 px);
     das kompakte S/I-Label weicht ihm. */
  .matrix-row-collapsed .matrix-lane {
    overflow: visible;
    padding: 2px;
  }

  .matrix-row-collapsed .matrix-lane-headrow .matrix-lane-name {
    top: 50%;
    bottom: auto;
    left: 8px;
    right: -54px;
    writing-mode: horizontal-tb;
    transform: translateY(-50%);
    z-index: 1;
  }

  .matrix-row-collapsed .matrix-track-label-compact {
    visibility: hidden;
  }

  /* Kompakt-Spur etwas hoeher als auf dem Desktop (Tipp-Ziel), aber weit
     unter zwei vollen Spuren. */
  .matrix-track-compact {
    height: 32px;
    min-height: 32px;
  }

  /* 32-px-Tippspur: etwas hoehere Mini-Balken (12px), 3-px-Raender +
     2-px-Mittenabstand - kein Ueberlappen, bessere Platznutzung. */
  .matrix-mini {
    height: 12px;
  }

  .matrix-mini.plan {
    top: 3px;
  }

  .matrix-mini.act {
    bottom: 3px;
  }

  .matrix-lane-grip {
    display: none !important;
  }

  .matrix-lane-lost {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }

  /* Hover-Griffe sind ohne Maus nutzlos - Groessern laeuft ueber die
     Knopf-Griffe der Auswahl. */
  .matrix-block-grip {
    display: none;
  }


  /* Achsen-Ecke auf Touch ganz weg - auch im Briefing (Nutzerentscheid):
     Pinch zoomt (normale Matrix UND Lagewand), Tipp auf den Zeilenkopf klappt
     ein, Folgen/Doppeltipp uebernehmen JETZT - es bleibt keine Aktion fuer
     die Ecke. (Desktop/Maus behaelt die Ecke - feiner Zeiger.) */
  .matrix-corner-tools {
    display: none;
  }

  /* Gruppenbalken: der Label-Teil nimmt zusaetzlich die Spur-Label-Spalte
     mit (46 px allein waeren fuer den Gruppennamen zu schmal); groessere
     Tipp-Hoehe. */
  .matrix-group-row {
    grid-template-columns: calc(var(--label-w) + 58px) var(--time-w);
  }

  .matrix-group-label {
    min-height: 34px;
  }
}

/* ===== Briefing-Modus (Mockup M5/B3): Lagewand mit Lageleiste ===== */
/* Kein eigener View - body.briefing schaltet die Matrix in die read-only
   Lagewand-Darstellung: Topbar weicht der Briefing-Kopfzeile, rechts die
   ein-/ausblendbare Lageleiste, alles auf Distanz lesbar. */

.briefing-bar {
  display: none;
}

body.briefing .topbar {
  display: none;
}

body.briefing .briefing-bar {
  position: sticky;
  top: 0;
  z-index: 60;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

/* Briefing-Kopfzeile: links Marke+Operation, Mitte grosse Uhr (absolut
   zentriert ueber die ganze Leiste, unabhaengig von den Seitenbreiten),
   rechts die drei Pills + ESC-Hinweis. */
.briefing-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.briefing-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

body.briefing .briefing-bar .briefing-clock {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Lagewand/Lagezentrale fuellen exakt den Viewport: Kopfzeile fix oben,
   darunter die Matrix-Flaeche - das Board scrollt INTERN, die Seite selbst
   nie (sonst schiebt eine hohe Zeilenliste die Bottom-Bar aus dem Bild). */
html:has(body.briefing) {
  overflow-y: hidden;
}

body.briefing {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
}

body.briefing .layout {
  flex: 1 1 auto;
  min-height: 0;
  /* Genau eine sichtbare Grid-Zeile (die Matrix); sie darf unter die
     Inhaltshoehe schrumpfen, damit das Board intern scrollt. */
  grid-template-rows: minmax(0, 1fr);
}

/* Folgen-Tag (Icon J2 Fadenkreuz): Statusanzeige, kein Button. */
/* Einheitliche Kopfzeilen-Chips (Folgen, Verzug, Lageleiste): gleiche Groesse
   und Form - die Bedeutung steckt in Icon + Label (und beim Verzug zusaetzlich
   in der Warnfarbe), nicht in unterschiedlichen Dimensionen. */
.briefing-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}

.briefing-chip svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

/* Aktiver Zustand: Folgen an (JETZT bleibt mittig) bzw. Lageleiste sichtbar. */
.briefing-chip.active {
  border-color: var(--accent);
  color: var(--text);
}

/* Verzugs-Chip (Bildsprache aus Mockup M4): gleiche Groesse, Bedeutung ueber
   die Warnfarbe. Reine Anzeige, daher kein Zeiger-Cursor. */
.briefing-chip.briefing-late {
  border-color: color-mix(in srgb, var(--warning) 55%, var(--line));
  background: color-mix(in srgb, var(--warning) 14%, var(--panel));
  color: var(--warning);
  cursor: default;
}

.briefing-late[hidden] {
  display: none;
}

/* Monospace-Uhr HH:MM:SS - alle Stellen gleich gross, kein Zittern im Tick. */
.briefing-clock {
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

.briefing-esc {
  min-height: 0;
  padding: 2px 4px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 10.5px;
  cursor: pointer;
}

/* Split (B3): Matrix links, Lageleiste rechts. Die auto-Spalte kollabiert,
   wenn die Leiste ausgeblendet ist ([hidden]). */
body.briefing .matrix-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  /* Zeile 1: Board + Aside (schrumpfbar -> internes Scrollen), Zeile 2 die
     Bottom-Bar der Lagezentrale. Hoehe kommt aus der Layout-Grid-Zeile. */
  grid-template-rows: minmax(0, 1fr) auto;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

body.briefing .matrix-board-wrap {
  min-width: 0;
}

.briefing-aside {
  width: 300px;
  border-left: 1px solid var(--grid-strong);
  background: var(--surface);
  font-size: 13px;
  overflow-y: auto;
}

.briefing-aside[hidden] {
  display: none;
}

.briefing-aside h3 {
  margin: 0;
  padding: 9px 14px 7px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--grid-line);
}

.briefing-aside h3.warn {
  color: var(--warning);
}

.brief-aside-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--grid-line);
}

/* Block-Eintraege sind anklickbar (Sprung zum Block). */
.brief-aside-row.clickable {
  cursor: pointer;
}

.brief-aside-row.clickable:hover,
.brief-aside-row.clickable:focus-visible {
  background: var(--panel);
  outline: none;
}

.brief-aside-sw {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  /* Farbe diskret: gegen die Flaeche gemischt, damit der Punkt die Zeile noch
     erkennbar macht, ohne in der ruhigen Lageleiste zu dominieren. */
  background: color-mix(in srgb, var(--sw, var(--accent)) 55%, var(--surface));
}

.brief-aside-dia {
  flex: 0 0 auto;
  width: 10px;
  color: var(--accent);
  font-size: 13px;
  text-align: center;
}

.brief-aside-what {
  flex: 1;
  min-width: 0;
}

.brief-aside-what strong {
  display: block;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brief-aside-what span {
  color: var(--muted);
  font-size: 11.5px;
}

.brief-aside-when {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.brief-aside-when.warn {
  color: var(--warning);
}

/* Zustands-Aussage eines Laufend-Eintrags (Mockup LV): "im Plan"/"frueher
   fertig" ruhig gruen, "+N min"/"laeuft ueber" in der Warnfarbe. */
.brief-aside-when.ok {
  color: var(--ok);
}

.brief-aside-empty {
  padding: 8px 14px;
  border-bottom: 1px solid var(--grid-line);
  color: var(--muted);
  font-size: 12px;
}

/* Read-only: keine Block-Bearbeitung, keine Hover-Werkzeuge. Zoom (Achsen-Ecke
   + Strg-Wheel) und Zeilen-Ein-/Ausklappen bleiben bedienbar. Im Folgen-Modus
   steuert JETZT den Ausschnitt (kein Scrollbalken); ist Folgen aus, darf der
   Ausschnitt frei horizontal geschwenkt werden (body.briefing-free). */
body.briefing .matrix-board {
  overflow-x: hidden;
}

body.briefing.briefing-free .matrix-board {
  overflow-x: auto;
  cursor: grab;
}

body.briefing.briefing-free .matrix-board.panning {
  cursor: grabbing;
}

body.briefing .matrix-board button,
body.briefing .matrix-now-overlay,
body.briefing .now-edge,
body.briefing .matrix-now-line,
body.briefing .matrix-now-label {
  pointer-events: none;
}

/* Bedienbar bleiben: Zeilen-/Gruppen-Toggle und die Achsen-Werkzeuge (Zoom).
   Selektoren mit .matrix-board, damit sie die obige Stilllegung (gleiche
   Spezifitaet) ueberstimmen. */
body.briefing .matrix-board .matrix-lane-caret,
body.briefing .matrix-board .matrix-group-label,
body.briefing .matrix-board .matrix-corner-tools,
body.briefing .matrix-board .matrix-corner-tools button {
  pointer-events: auto;
}

body.briefing .matrix-block {
  cursor: default;
}

body.briefing .matrix-block-grip,
body.briefing .matrix-touch-knob,
body.briefing .matrix-touchbar {
  display: none !important;
}

/* Jetzt-Linie im Briefing bewusst kraeftiger (Mockup M5). */
body.briefing .matrix-now-line {
  width: 3px;
  margin-left: -1.5px;
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 45%, transparent);
}

/* Vergangenheit gedimmt; Verzuege bleiben voll sichtbar (Klasse "past"
   vergibt renderMatrixBlock nur ohne Verzugs-Kandidatur). */
body.briefing .matrix-block.past {
  opacity: .55;
}

/* Auf Distanz lesbar: groessere Schrift fuer Bloecke, Zeilen und Achse. */
body.briefing .matrix-block {
  font-size: 13px;
  border-radius: 7px;
  padding: 2px 9px;
}

body.briefing .matrix-block-title {
  font-size: 13.5px;
}

body.briefing .matrix-block-time {
  font-size: 11.5px;
}

body.briefing .matrix-lane {
  font-size: 13.5px;
}

body.briefing .matrix-time-tick {
  font-size: 12px;
}

/* Meilenstein-Titel direkt sichtbar - auf der Lagewand gibt es keinen Hover. */
.matrix-milestone-pin-title {
  display: none;
}

/* Das Marker-Band waechst im Briefing fuer die eingeblendeten Pin-Titel;
   Jetzt-Pill/Rand-Marker/Jetzt-Linie folgen automatisch ueber die Variable. */
body.briefing .matrix-board-wrap {
  --axis-band-h: 21px;
}

body.briefing .matrix-milestone-pin {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: auto;
  padding: 0 4px;
}

body.briefing .matrix-milestone-pin-title {
  display: inline;
  color: var(--text);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

.matrix-milestone-pin-at {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ===== Getrackt-Flag im Block-Editor ===== */
/* Ungetrackte Bloecke sind rein informativ (kein Verzug, kein Lageleisten-
   Eintrag): auf der Matrix treten sie dezent zurueck und tragen ein kleines
   Info-Zeichen (Mockup M8 C). */
.block-tracked {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
}

.block-tracked input {
  margin: 0;
}

/* Nicht getrackt (Mockup M8 C): der Block tritt dezent zurueck (leicht
   reduzierte Deckkraft, beim SOLL-Umriss duennere Kante) und traegt in Zeile 2
   ein kleines Info-Zeichen - statt der frueheren, zu auffaelligen gestrichelten
   Kante. Deckkraft .9 statt .8 (Politur 2026-07-25: ungetrackte Bloecke
   wirkten zu blass; der Ruecktritt lebt von Kante + Info-Zeichen). */
.matrix-block.untracked {
  opacity: .9;
}
.matrix-block.untracked.mb-plan {
  border-width: 1px;
}

/* ===== Lagezentrale (Mockup LZ): unbediente Auspraegung des Briefings ===== */
/* Eine Groessenstufe skaliert Kopf, Zeilen, Bloecke und Leiste gemeinsam
   (tisch 1.0 / wand 1.4 / saal 1.8; JS setzt --display-scale, LZ5). */
body.briefing-display {
  --display-scale: 1.4;
}

/* Bedien-Chips weichen der Info-Zeile; der Verzugs-Chip bleibt (LZ1). */
body.briefing-display #briefingFollowBtn,
body.briefing-display #briefingAsideBtn,
body.briefing-display #briefingExitBtn {
  display: none;
}

/* Aktiver Abschnitt/Anzeigespanne unter dem Operationsnamen. */
.briefing-range {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.briefing-range[hidden] {
  display: none;
}

/* Sync-Ampel + E2EE-Stand (LZ4). */
.briefing-sync {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: calc(10px * var(--display-scale, 1));
  font-weight: 600;
  letter-spacing: .05em;
  white-space: nowrap;
}

.briefing-sync[hidden] { display: none; }

.briefing-sync i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
  flex: 0 0 auto;
}

.briefing-sync.warn { color: var(--warning); }
.briefing-sync.warn i { background: var(--warning); }
.briefing-sync.err { color: var(--danger); font-weight: 800; }
.briefing-sync.err i { background: var(--danger); }

/* Folge-Status: Anzeige, keine Bedienung (LZ3). */
.briefing-followstate {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px;
  border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ok) 10%, transparent);
  color: var(--ok);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: calc(9.5px * var(--display-scale, 1));
  font-weight: 700;
  letter-spacing: .06em;
  white-space: nowrap;
}

.briefing-followstate[hidden] { display: none; }

.briefing-followstate i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}

.briefing-followstate.paused {
  border-color: color-mix(in srgb, var(--warning) 45%, transparent);
  background: color-mix(in srgb, var(--warning) 10%, transparent);
  color: var(--warning);
}

/* Offline: roter Dauer-Rahmen um die ganze Anzeige - bleibt, bis die
   Verbindung zurueck ist (Toasts verschwinden, der Rahmen nicht; LZ4). */
body.briefing-offline::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 998;
  pointer-events: none;
  box-shadow: inset 0 0 0 4px var(--danger);
}

/* Lageleiste als Bottom-Bar (LZ2 Form A): drei Zellen unter dem Board.
   Bewusst "lagebar" - .briefing-bar ist der Briefing-KOPF (Header). */
.briefing-lagebar {
  flex: 0 0 auto;
  /* Im Briefing-Grid (.matrix-workspace: Board | Aside) belegt die Bar die
     volle zweite Zeile unter dem Board. */
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 2px solid var(--grid-strong);
  background: var(--surface);
  z-index: 6;
}

.briefing-lagebar[hidden] { display: none; }

.brief-bar-cell {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: calc(64px * var(--display-scale, 1));
  padding: 10px 16px;
  border-right: 1px solid var(--grid-line);
}

/* Eintragsliste einer Zelle: ALLE Eintraege im DOM; der Hoehendeckel laesst
   die vierte Zeile angeschnitten sichtbar (signalisiert Scrollbarkeit),
   darueber hinaus scrollt die Liste - kein Eintrag verschwindet. */
.brief-bar-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: calc(78px * var(--display-scale, 1));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.brief-bar-cell:last-child { border-right: 0; }

.brief-bar-title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 7px;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: calc(10px * var(--display-scale, 1));
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.brief-bar-title .cnt { font-size: 1.2em; }
.brief-bar-cell.crit .brief-bar-title { color: var(--danger); }
.brief-bar-cell.run .brief-bar-title { color: var(--warning); }
.brief-bar-cell.next .brief-bar-title { color: var(--focus); }

.brief-bar-li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  padding: 2px 0;
  font-size: calc(12px * var(--display-scale, 1));
  color: var(--text);
}

.brief-bar-li b {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brief-bar-li .sub {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 0 1 auto;
  min-width: 0;
}

.brief-bar-li .t {
  margin-left: auto;
  flex: 0 0 auto;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: calc(10.5px * var(--display-scale, 1));
  color: var(--muted);
  white-space: nowrap;
}

.brief-bar-li .t.warn { color: var(--warning); }
.brief-bar-li .t.ok { color: var(--ok); }

.brief-bar-li.clickable { cursor: pointer; border-radius: 5px; }
.brief-bar-li.clickable:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }

.brief-bar-empty {
  color: var(--muted);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: calc(10px * var(--display-scale, 1));
  padding: 2px 0;
}

/* Ticker (LZ2 Form C): eine Zeile, rotierende Auswahl. */
.briefing-lagebar.ticker-form {
  display: block;
}

.brief-ticker {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 16px;
  overflow: hidden;
  white-space: nowrap;
}

.brief-ticker-item {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-size: calc(12.5px * var(--display-scale, 1));
  color: var(--text);
  min-width: 0;
}

.brief-ticker-item b { font-weight: 700; }
.brief-ticker-item .sub { color: var(--muted); }

.brief-ticker-item .tag {
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: .72em;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 6px;
  border-radius: 4px;
}

.brief-ticker-item .tag.crit { background: color-mix(in srgb, var(--danger) 20%, transparent); color: var(--danger); }
.brief-ticker-item .tag.run { background: color-mix(in srgb, var(--warning) 18%, transparent); color: var(--warning); }
.brief-ticker-item .tag.next { background: color-mix(in srgb, var(--focus) 22%, transparent); color: var(--focus); }
.brief-ticker-sep { color: var(--grid-strong); }

/* Groessenstufe: Schriften der Matrix wachsen mit der Slot-Hoehe (LZ5). */
body.briefing-display .matrix-lane-name { font-size: calc(12px * var(--display-scale)); }
body.briefing-display .matrix-block-title { font-size: calc(11.5px * var(--display-scale)); }
body.briefing-display .matrix-block-time { font-size: calc(10.5px * var(--display-scale)); }
body.briefing-display .matrix-track-label { font-size: calc(11px * var(--display-scale)); }
body.briefing-display .matrix-time-tick { font-size: calc(11px * var(--display-scale)); }
body.briefing-display .briefing-clock { font-size: calc(22px * var(--display-scale)); }
body.briefing-display #briefingOpName { font-size: calc(15px * var(--display-scale)); }

/* ===== Teilnehmer-Zeilen im Editor (Mockup TN/TM1) ===== */
.block-participants { display: grid; gap: 7px; }
.block-participants[hidden] { display: none; }
.block-participants-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  color: var(--muted); font-size: 12px; font-weight: 600;
}
.block-participant-add {
  min-height: 0; padding: 4px 9px;
  border: 1px solid var(--line); border-radius: 6px;
  background: transparent; color: var(--text);
  font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
}
.block-participant-add:hover { border-color: var(--accent); }
.block-participant-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.block-participant-empty { color: var(--muted); font-size: 12px; }
.tn-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 4px 3px 9px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface-2); font-size: 12px; font-weight: 600;
}
.tn-chip-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.tn-chip-x {
  min-width: 0; width: 18px; height: 18px; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 50%; background: transparent;
  color: var(--muted); font-size: 14px; line-height: 1; cursor: pointer;
}
.tn-chip-x:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.block-participant-picker {
  display: grid; gap: 8px;
  padding: 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2);
}
.block-participant-picker[hidden] { display: none; }
.block-participant-list { display: grid; gap: 4px; max-height: 190px; overflow: auto; }
.block-participant-row {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 9px; border: 1px solid transparent; border-radius: 6px;
  background: transparent; color: var(--text);
  font: inherit; font-size: 13px; text-align: left; cursor: pointer; width: 100%;
}
.block-participant-row:hover { border-color: var(--line); background: color-mix(in srgb, var(--text) 4%, transparent); }
.block-participant-row .bp-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.block-participant-row .bp-plus { color: var(--muted); font-size: 16px; line-height: 1; }
.block-participant-hint { margin: 0; color: var(--muted); font-size: 11.5px; }

/* ===== Teilnehmer-Ansicht (read-only Panel beim Klick auf ein Echo) ===== */
/* align-content: start ist Pflicht: .drawer-body fuellt per flex die volle
   Drawer-Hoehe, und der Grid-Default (stretch) wuerde die ueberschuessige
   Hoehe in die Auto-Zeilen pumpen - Banner/Felder ruecken dann weit
   auseinander statt kompakt oben zu stehen. */
.participant-body { padding: 4px 16px 16px; display: grid; gap: 12px; align-content: start; }
.tn-ro-banner {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 9px 11px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  border-left: 3px solid var(--accent); border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 7%, var(--panel));
  font-size: 12.5px;
}
.tn-ro-banner svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 1px; color: var(--accent); }
.tn-field { display: grid; gap: 3px; }
.tn-field .tn-lab { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.tn-field .tn-val { font-size: 13.5px; }
.tn-field .tn-val.tn-note { padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); white-space: pre-wrap; }

/* ===================================================================
   Drucken / Export (Mockup D)
   - Optionen im rechten Drawer (Bildschirm)
   - Eigene Druck-Render-Schicht (#kairosPrintRoot): am Bildschirm
     ausserhalb des Viewports gehalten, im Druck als einzige Sicht.
   =================================================================== */

/* ---- Optionen-Drawer (Bildschirm) ---- */
.print-opt-group { display: grid; gap: 7px; margin: 14px 0; }
.print-opt-title { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.print-seg {
  display: inline-flex; width: fit-content; gap: 2px; padding: 2px;
  border: 1px solid var(--line); border-radius: 7px; background: var(--surface-2);
}
.print-seg button {
  min-height: 28px; padding: 5px 14px; border: 0; border-radius: 5px;
  background: transparent; color: var(--muted); font-weight: 700; font-size: 12.5px; cursor: pointer;
}
.print-seg button.active { background: var(--panel); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.print-seg button:disabled { opacity: .45; cursor: not-allowed; }
.print-radio { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.print-radio input { width: 15px; height: 15px; margin: 0; }
.print-range-row { display: flex; gap: 8px; margin-top: 2px; }
.print-range-row input { flex: 1; min-width: 0; }
.print-check { display: grid; gap: 7px; }
.print-check label { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.print-check input { width: 15px; height: 15px; margin: 0; }
.print-preview {
  display: flex; align-items: center; gap: 9px;
  margin: 14px 0 4px; padding: 9px 11px;
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 6px; background: var(--surface-2); font-size: 12.5px;
}

/* Zeilen-Auswahl im Druck-Drawer (DX5). */
.print-lane-list { display: flex; flex-direction: column; gap: 2px; max-height: 180px; overflow-y: auto; margin-bottom: 6px; }
.print-lane-row { display: flex; align-items: center; justify-content: flex-start; gap: 7px; margin: 0; font-size: 12.5px; color: var(--text); }
.print-lane-row input { flex: 0 0 auto; margin: 0; }
.print-lane-row.group { color: var(--muted); font-weight: 700; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; margin-top: 4px; }
.print-lane-row.lane.grouped { padding-left: 16px; }
.print-lane-row.all { margin-bottom: 4px; }
.print-lane-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }

/* Wandbahn-Massstab (DX6). */
.print-wall-row { display: flex; align-items: center; gap: 7px; margin-top: 7px; font-size: 11.5px; }
.print-wall-row input { width: 70px; }
.print-wall-row .muted { font-size: 11px; }

/* Deckblatt-Freitexte (DX1). */
.print-cover-field { display: grid; gap: 4px; margin: 8px 0 0; }
.print-cover-field > span { font-size: 11.5px; font-weight: 600; color: var(--muted); }

/* ---- Druck-Render-Schicht: am Bildschirm aus dem Weg ---- */
#kairosPrintRoot { position: fixed; left: -10000px; top: 0; width: 0; height: 0; overflow: hidden; }

/* ---- Ein Blatt: immer Papier (hell), unabhaengig vom App-Theme ---- */
.psheet {
  --pbg: #ffffff; --pink: #1a1a1a; --pmut: #6b6b6b;
  --pline: #cfcfcf; --pgrid: #ededed; --pstrong: #9a9a9a;
  background: var(--pbg); color: var(--pink);
  display: flex; flex-direction: column; overflow: hidden;
  font: 11px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif;
  print-color-adjust: exact; -webkit-print-color-adjust: exact;
}
.psheet.gray { filter: grayscale(1); }
.ps-inner { display: flex; flex-direction: column; height: 100%; box-sizing: border-box; }

.ps-head { display: flex; align-items: center; gap: 10px; border-bottom: 1.5px solid var(--pstrong); flex: 0 0 auto; }
.ps-brand { display: flex; align-items: center; gap: 6px; }
.ps-brand svg { width: 17px; height: 17px; }
.ps-brand strong { font-size: 12px; letter-spacing: .03em; }
.ps-sep { width: 1px; align-self: stretch; margin: 2px 0; background: var(--pline); }
.ps-op { font-size: 13px; font-weight: 800; }
.ps-op small { display: block; font-size: 8px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pmut); }
.ps-spacer { flex: 1; }
.ps-meta { text-align: right; color: var(--pmut); font-size: 10px; line-height: 1.35; }
.ps-meta b { color: var(--pink); font-weight: 700; }

.ps-grid { flex: 1 1 auto; display: grid; align-content: start; min-height: 0; }
.ps-corner { border-right: 1px solid var(--pstrong); border-bottom: 1px solid var(--pstrong); }
.ps-axis { position: relative; border-bottom: 1px solid var(--pstrong); }
.ps-ax-day { position: absolute; left: 4px; top: 2px; font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--pmut); }
.ps-ax-tick { position: absolute; bottom: 2px; transform: translateX(-50%); font-size: 9.5px; color: var(--pmut); font-variant-numeric: tabular-nums; }
.ps-ax-tick::before { content: ""; position: absolute; left: 50%; bottom: -2px; height: 4px; width: 1px; background: var(--pstrong); }
/* Rand-Ticks: Beschriftung nach innen klemmen statt sie am Spaltenrand zu
   halbieren - die erste/letzte Uhrzeit bleibt vollstaendig lesbar. */
.ps-ax-tick.edge-l { transform: translateX(0); }
.ps-ax-tick.edge-l::before { left: 0; }
.ps-ax-tick.edge-r { transform: translateX(-100%); }
.ps-ax-tick.edge-r::before { left: 100%; }

.ps-lane-label {
  grid-column: 1; border-right: 1px solid var(--pstrong); border-bottom: 1px solid var(--pstrong);
  border-left: 3px solid var(--pstrong); padding: 3px 6px;
  display: flex; align-items: center; justify-content: space-between; gap: 4px;
  font-size: 10.5px; font-weight: 700; line-height: 1.15; overflow: hidden;
}
.ps-lane-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Gruppenbalken: spannt im Raster ueber Label- und Zeitspalte. */
.ps-group {
  grid-column: 1 / -1; display: flex; align-items: center;
  padding: 0 6px; border-bottom: 1px solid var(--pstrong);
  background: color-mix(in srgb, var(--pink) 8%, var(--pbg));
  font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--pmut); overflow: hidden; white-space: nowrap;
}
.ps-group-l2 { padding-left: 16px; background: color-mix(in srgb, var(--pink) 5%, var(--pbg)); }
.ps-group-l3 { padding-left: 26px; background: color-mix(in srgb, var(--pink) 3%, var(--pbg)); }
.ps-tracks { grid-column: 2; border-bottom: 1px solid var(--pstrong); }
.ps-track { position: relative; border-bottom: 1px dashed var(--pgrid); overflow: hidden; }
.ps-track:last-child { border-bottom: 0; }
.ps-track.act { background: color-mix(in srgb, var(--pink) 3%, transparent); }
.ps-tlab { position: absolute; left: 0; top: 0; bottom: 0; width: 14px; display: grid; place-items: center; z-index: 3; font-size: 7.5px; font-weight: 800; color: var(--pmut); background: color-mix(in srgb, var(--pbg) 75%, transparent); }
.ps-now { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1.5px solid var(--accent); z-index: 4; }
.ps-track.locked { background: repeating-linear-gradient(135deg, var(--pgrid) 0 4px, transparent 4px 9px); }
.ps-lock { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 5px; font-size: 8.5px; font-weight: 700; color: var(--pmut); }
.ps-lock svg { width: 10px; height: 10px; }
.ps-lost { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 2px; padding: 0 4px; border: 1px solid var(--pline); border-radius: 999px; background: var(--pbg); color: var(--pmut); font-size: 8px; font-weight: 700; }
.ps-lost svg { width: 9px; height: 9px; }

.ps-block {
  position: absolute; top: 2px; bottom: 2px; left: 0; z-index: 2;
  display: flex; align-items: center; gap: 5px; padding: 0 5px;
  border-radius: 3px; font-size: 9.5px; font-weight: 650; line-height: 1.1;
  white-space: nowrap; overflow: hidden;
}
.ps-block .ps-bn { overflow: hidden; text-overflow: ellipsis; }
.ps-block .ps-bt { color: var(--pmut); font-size: 8.5px; font-weight: 600; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.ps-block.plan { border: 1px solid var(--pc, #888); border-left-width: 3px; background: color-mix(in srgb, var(--pc, #888) 14%, var(--pbg)); }
.ps-block.act { border: 1px solid color-mix(in srgb, var(--pc, #888) 60%, #000); background: var(--pc, #888); color: #fff; }
.ps-block.act .ps-bt { color: rgba(255,255,255,.82); }
.ps-block.past { opacity: .6; }
.ps-block.untracked { opacity: .8; }
.ps-block.conflict { border-color: var(--danger); border-style: dashed; }
.ps-block.late { background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--warning) 38%, transparent) 0 4px, transparent 4px 9px); }
.ps-late-chip { flex: 0 0 auto; padding: 0 4px; border-radius: 999px; font-size: 8px; font-weight: 800; border: 1px solid #c08a00; color: #8a6200; background: #fff4d6; }
/* Offenes Ende im Druck (Mockup LV): die rechte Kante bleibt offen (gepunktet)
   statt geschlossen - auf Papier ersetzt sie den Auslauf des Bildschirms. */
.ps-block.endopen { border-right-style: dotted; border-right-width: 1.5px; }
.ps-ghost { position: absolute; top: 2px; bottom: 2px; z-index: 1; border: 1px dashed var(--pstrong); border-radius: 3px; }
.ps-delta { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; padding: 0 4px; border-radius: 999px; font-size: 8px; font-weight: 800; border: 1px solid var(--pline); background: var(--pbg); }
.ps-delta.late { color: #8a6200; border-color: #c08a00; }
.ps-delta.early { color: #126b45; border-color: #2f9e6a; }

/* ---- Echo-Bloecke im Druck (DX-U 02): gestrichelt + gedimmt wie am Bildschirm. */
.ps-block.ps-echo {
  border: 1px dashed color-mix(in srgb, var(--pc, #888) 70%, #666);
  background: color-mix(in srgb, var(--pc, #888) 8%, var(--pbg));
  color: var(--pink); opacity: .78; font-weight: 600;
}
.ps-echo-origin { flex: 0 0 auto; font-size: 8px; color: var(--pmut); }

/* ---- Kennzeichnungs-Stempel (DX1) im Blattkopf + Auszug-Vermerk (DX5). */
.ps-mark {
  flex: 0 0 auto; align-self: center; padding: 2px 7px;
  border: 1.5px solid #c22; color: #c22; border-radius: 2px;
  font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.ps-excerpt { display: block; font-size: 8px; font-weight: 700; color: var(--pmut); }

/* ---- Raster-Wrapper: Traeger fuer Meilenstein-Overlay + Klebekante. */
.ps-gridwrap { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.ps-gridwrap > .ps-grid { flex: 1 1 auto; }

/* ---- Meilenstein-Pins (DX4): Raute auf der Achse + Fall-Linie. */
.ps-mslayer { position: absolute; top: 0; right: 0; bottom: 0; pointer-events: none; z-index: 5; overflow: hidden; }
.ps-msline { position: absolute; top: 7mm; bottom: 0; width: 0; border-left: 1px dashed #555; }
.ps-msdot { position: absolute; top: calc(7mm - 3.5px); width: 7px; height: 7px; margin-left: -3.5px; background: #333; transform: rotate(45deg); }
.ps-mscaption { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 2px 0 1px; font-size: 8.5px; font-weight: 600; color: var(--pink); flex: 0 0 auto; }

/* ---- Fussnoten-Leiste (DX3) zwischen Matrix und Fusszeile. */
.ps-notes { flex: 0 0 auto; border-top: 1px solid var(--pstrong); padding: 2px 0 1px; font-size: 8.5px; line-height: 1.5; color: var(--pink); }
.ps-notes b { font-variant-numeric: tabular-nums; }
.ps-fn { font-size: 7px; font-weight: 800; vertical-align: super; line-height: 1; }

/* ---- Graustufen-Fuellmuster (DX4): deterministisch je Kategorie; die
   Legende traegt dieselben Klassen. !important schlaegt die --pc-Fuellungen
   der Spur-Varianten - bewusst, das Muster IST der Kanal im Graumodus. */
.psheet .ps-pat-0 { background: #f0f0f0 !important; color: #1a1a1a !important; border: 1px solid #777 !important; }
.psheet .ps-pat-1 { background: repeating-linear-gradient(45deg, #b5b5b5 0 2px, #f2f2f2 2px 5px) !important; color: #1a1a1a !important; border: 1px solid #555 !important; }
.psheet .ps-pat-2 { background: repeating-linear-gradient(-45deg, #9a9a9a 0 2px, #ececec 2px 6px) !important; color: #1a1a1a !important; border: 1px solid #555 !important; }
.psheet .ps-pat-3 { background: radial-gradient(#7d7d7d 0.8px, #f5f5f5 0.9px) !important; background-size: 4px 4px !important; color: #1a1a1a !important; border: 1px solid #555 !important; }
.psheet .ps-pat-4 { background: repeating-linear-gradient(90deg, #a8a8a8 0 1.5px, #f0f0f0 1.5px 5px) !important; color: #1a1a1a !important; border: 1px solid #555 !important; }
.psheet .ps-pat-5 { background: repeating-linear-gradient(0deg, #8f8f8f 0 1.5px, #ededed 1.5px 5px) !important; color: #1a1a1a !important; border: 1px solid #555 !important; }
.psheet .ps-pat-6 { background: repeating-linear-gradient(45deg, #666 0 3px, #dcdcdc 3px 6px) !important; color: #1a1a1a !important; border: 1px solid #555 !important; }
.psheet .ps-pat-7 { background: #d9d9d9 !important; color: #1a1a1a !important; border: 1px solid #555 !important; }
.psheet .ps-pat-8 { background: #bfbfbf !important; color: #1a1a1a !important; border: 1px solid #555 !important; }
.psheet .ps-pat-9 { background: #a3a3a3 !important; color: #1a1a1a !important; border: 1px solid #555 !important; }
.psheet .ps-block[class*="ps-pat-"] .ps-bt { color: #444; }

/* ---- Klebekante (DX6): markierte Ueberlapp-Zone am rechten Bahnenrand. */
.ps-glue {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 6;
  background: repeating-linear-gradient(0deg, transparent 0 5px, rgba(200, 60, 60, .12) 5px 10px);
  border-left: 1px dashed #c66;
}

/* ---- Schnittlinie (DX6): Folgebahnen werden links entlang dieser Linie
   beschnitten und auf die Klebekante der Vorbahn geklebt. */
.ps-cutline {
  position: absolute; top: 0; left: 0; bottom: 0; z-index: 6; width: 0;
  border-left: 1px dashed #c66;
}

/* ---- Leerformular (DX6): leere IST-Spur, SOLL blass als Absicht. */
.ps-track.blank { background: var(--pbg); }
.ps-block.blankplan { opacity: .45; }

/* ---- Deckblatt (DX1). */
.ps-cover { position: relative; display: flex; flex-direction: column; }
.ps-cover-stamp {
  position: absolute; top: 10mm; right: 10mm; padding: 5px 12px;
  border: 2px solid #c22; color: #c22; border-radius: 2px; transform: rotate(-4deg);
  font-size: 15px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
}
.ps-cover-brand { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 800; letter-spacing: .06em; }
.ps-cover-brand svg { width: 24px; height: 24px; }
.ps-cover-eyebrow { margin-top: 18mm; font-size: 10px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--pmut); }
.ps-cover-title { margin-top: 3mm; font-size: 30px; font-weight: 800; line-height: 1.12; }
.ps-cover-range { margin-top: 2mm; font-size: 13px; color: var(--pink); font-variant-numeric: tabular-nums; }
.ps-cover-meta { margin-top: 10mm; display: grid; grid-template-columns: 34mm 1fr; gap: 2.5mm 6mm; max-width: 150mm; font-size: 11.5px; }
.ps-cover-meta b { font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--pmut); align-self: baseline; }
.ps-cover-foot { margin-top: auto; font-size: 9px; color: var(--pmut); font-variant-numeric: tabular-nums; }

/* ---- Anhangseiten (DX2): Tabellen ueber die volle Blattbreite. */
.ps-apx { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.ps-apx-title { padding: 2mm 0 1.5mm; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--pmut); }
.ps-apx-table { width: 100%; border-collapse: collapse; font-size: 9.5px; line-height: 1.3; }
.ps-apx-table th { text-align: left; padding: 1mm 1.5mm; border-bottom: 1px solid var(--pstrong); font-size: 8px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--pmut); }
.ps-apx-table td { padding: 1mm 1.5mm; border-bottom: 1px solid var(--pgrid); vertical-align: top; }
.ps-apx-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ps-apx-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 4px; vertical-align: 0; }
.ps-apx-mut { color: var(--pmut); }
.ps-apx-note { color: #333; }
.ps-apx-crit { color: #b00020; }
.ps-apx-warn { color: #8a6200; }
.ps-apx-ok { color: #126b45; }
.ps-apx-section td { padding-top: 2.5mm; font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--pmut); border-bottom: 1px solid var(--pstrong); }
.ps-apx-lost td { color: var(--pmut); }
.ps-apx-lost svg { width: 9px; height: 9px; vertical-align: -1px; }

.ps-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border-top: 1.5px solid var(--pstrong); font-size: 9.5px; color: var(--pmut); flex: 0 0 auto; overflow: hidden; }
.ps-leg { display: inline-flex; align-items: center; gap: 5px; }
.ps-sw { width: 9px; height: 9px; border-radius: 2px; border: 1px solid rgba(0,0,0,.2); }
.ps-sw-open { border-right-style: dotted; border-right-width: 1.5px; background: transparent; }
.ps-foot-spacer { flex: 1; }
.ps-pageno { font-weight: 700; color: var(--pink); }

/* ---- Druck: nur die Blaetter zeigen, App-Chrome ausblenden ---- */
@media print {
  body.printing > *:not(#kairosPrintRoot) { display: none !important; }
  body.printing #kairosPrintRoot { position: static; left: auto; top: auto; width: auto; height: auto; overflow: visible; }
  body.printing .psheet { break-after: page; page-break-after: always; }
  body.printing .psheet:last-child { break-after: auto; page-break-after: auto; }
}

/* ===================================================================
   Vereinheitlichtes Tooltip-System (Mockup TT)
   Ein wiederverwendetes #appTooltip; .tt = Container, Rich-Bausteine.
   Variante ohne Pfeil, kompaktes vertikales Padding.
   =================================================================== */
#appTooltip {
  position: fixed; left: 0; top: 0; z-index: 400;
  opacity: 0; transition: opacity var(--mo-fast) var(--mo-ease);
}
#appTooltip.visible { opacity: 1; }
#appTooltip[hidden] { display: none; }

.tt {
  display: inline-block; max-width: 300px;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--line); border-radius: 7px;
  box-shadow: var(--shadow);
  padding: 4px 10px 5px;
  font-size: 12px; line-height: 1.4; text-align: left;
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
  pointer-events: none;
}
/* Reiner Text-Tooltip: pre-line NUR hier (\n bleibt Umbruch); Rich-Tooltips
   duerfen pre-line nicht haben, sonst werden Markup-Umbrueche zu Leerzeilen. */
.tt.text { font-weight: 600; max-width: 260px; white-space: pre-line; }

/* Info-Tipp (Plan MT-U S4): gepinnte Karte ist anfassbar (Aktions-Knoepfe). */
.tt.pinned { pointer-events: auto; }
.tt-actions {
  display: flex;
  gap: 14px;
  margin-top: 7px;
  padding-top: 6px;
  border-top: 1px dashed var(--grid-line);
}
.tt-actions button {
  border: none;
  background: transparent;
  padding: 4px 0;
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--accent);
  cursor: pointer;
}
.tt-actions button:hover { text-decoration: underline; }

.tt-title { font-weight: 750; font-size: 12.5px; color: var(--text); }
/* Inline-Symbole in Tooltip-/Info-Karten-Titeln (z. B. Verzugs-Dreieck)
   bleiben Textzeichen-gross. */
.tt-title svg { width: 12px; height: 12px; vertical-align: -1px; }
.tt-sub { color: var(--muted); font-size: 11px; font-weight: 600; margin-top: 1px; }
.tt-sub svg { width: 11px; height: 11px; vertical-align: -1px; }
.tt-rows { display: grid; gap: 2px; margin-top: 4px; }
.tt-row { display: grid; grid-template-columns: 58px 1fr; gap: 10px; font-size: 11.5px; align-items: baseline; }
.tt-row .k { color: var(--muted); }
.tt-row .v { color: var(--text); display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; }
.tt-row .v svg { width: 12px; height: 12px; flex: 0 0 auto; color: var(--muted); }
.tt-swatch { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.tt-sep { height: 1px; margin: 5px -10px; background: var(--line); }
.tt-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.tt-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 7px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface-2);
  color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .02em;
}
.tt-chip svg { width: 11px; height: 11px; }
.tt-chip.warn { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 50%, var(--line)); background: color-mix(in srgb, var(--warning) 12%, var(--panel)); }
.tt-chip.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 50%, var(--line)); background: color-mix(in srgb, var(--danger) 10%, var(--panel)); }
.tt-chip.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); background: color-mix(in srgb, var(--ok) 10%, var(--panel)); }
.tt-chip.accent { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); background: color-mix(in srgb, var(--accent) 10%, var(--panel)); }
/* Dezente Delta-Werte (Abweichung): nur farbiger Text, keine Pille. */
.tt-delta { font-weight: 700; font-variant-numeric: tabular-nums; }
.tt-delta.late { color: var(--warning); }
.tt-delta.early { color: var(--ok); }
.tt-hint { margin-top: 5px; padding-top: 5px; border-top: 1px dashed var(--line); color: var(--muted); font-size: 10.5px; font-weight: 600; display: flex; gap: 6px; align-items: flex-start; }
.tt-hint svg { width: 12px; height: 12px; flex: 0 0 auto; margin-top: 1px; }

/* ===== Tagesansicht (Mockup TA, Plan TA-U S1/S2; Desktop Plan TD-U) =====
   Stehende Zeitachse: EIN Kalendertag, Zeit nach unten; ein bis drei
   Einsatz-Zeilen als Spalten (je SOLL/IST-Halbspalten, Anzahl aus dem
   Breiten-Maximum in js/day-view.js) plus die persoenliche Spalte einspurig.
   Spaltenraster und Blattbreite kommen als Variablen (--day-cols,
   --day-sheet-max) aus renderDayView() - EINE Quelle fuer Kopfzeile und
   Koerper. Bloecke positioniert js/day-view.js absolut; das Stundenraster
   teilt sich mit ihnen das Token --day-px-h (eine Quelle, kein Drift). */
.day-view-panel { border: 0; border-radius: 0; background: var(--bg); padding: 0; height: calc(100vh - var(--topbar-h, 50px)); overflow: hidden; }
.day-view { display: flex; flex-direction: column; height: 100%; max-width: var(--day-sheet-max, 1000px); margin: 0 auto; min-height: 0; }
/* Werkbank-Blatt (Plan TD-U S1): auf dem Desktop bekommt die zentrierte
   Spalte einen Koerper in der Werkstoff-Sprache der Matrix - Surface-Flaeche
   plus 1-px-Seitenkanten; den unteren Kopf-Abschluss liefert .day-headrow. */
@media (min-width: 701px) {
  .day-view { background: var(--surface); border-inline: 1px solid var(--line); }
}
.day-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px 8px; }
/* "+ Zeile" (Plan TD-U S3): existiert nur, wenn das Breiten-Maximum > 1 ist
   (renderDayView rendert den Knopf auf dem Telefon gar nicht erst). */
.day-add-lane { min-height: var(--ctl-h); padding: 0 10px; border-color: transparent; background: transparent; color: var(--muted); font-weight: 700; font-size: 12px; white-space: nowrap; }
.day-add-lane:hover { color: var(--text); border-color: var(--line); }
.day-nav-btn { min-height: var(--ctl-h); min-width: 34px; padding: 0 10px; font-size: 16px; line-height: 1; }
/* Titel = Wochentag ueber Datum (zwei Zeilen, nie abgeschnitten); der
   Operationsname steht bereits in der Topbar und wird hier nicht wiederholt.
   Seit dem Datums-Sprung ein Button (oeffnet den Date-Picker): flaechig ohne
   Rahmen, damit er weiter wie ein Titel wirkt - nur der Hover verraet ihn. */
.day-title { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; text-align: center; min-height: 0; padding: 2px 8px; border: 0; border-radius: var(--radius); background: none; font: inherit; }
/* Feste Titel-Breite auf dem Desktop: der Wochentag ist je nach Tag
   unterschiedlich breit - ohne fixe Breite ruecken Blaettern- und
   Heute-Knopf beim Tageswechsel hin und her. 140 px fasst den laengsten
   Wochentag aller vier Sprachen (Donnerstag); Ellipsis sichert den Rest.
   Das Telefon bleibt bei flex: 1 (Titel fuellt, Knoepfe sind fix). */
@media (min-width: 701px) { .day-title { width: 140px; flex: 0 0 auto; } }
.day-title:hover { background: var(--surface-2); }
.day-title b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.day-title small { font: 600 10.5px/1.3 ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
/* Heute = Fadenkreuz-Symbol mit FESTEM Platz (Plan MK-U S1): nie versteckt,
   heute gedimmt/disabled, sonst Akzent - kein Layoutsprung beim Blaettern. */
.day-today { min-height: var(--ctl-h); min-width: 34px; padding: 0 9px; display: inline-flex; align-items: center; justify-content: center; color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.day-today svg { width: 16px; height: 16px; display: block; }
.day-today:disabled { color: var(--muted); border-color: var(--line); opacity: .45; }
.day-spacer { flex: 1; }
/* Segment Liste|Tag existiert nur auf dem Telefon (Agenda-Paar). */
.day-mode-seg { display: none; }
/* Zeilenwahl im Spaltenkopf: der Kopf IST der Picker (custom-select mit
   Swatch); Trigger flaechig ohne Rahmen, damit er wie ein Kopf wirkt. */
.day-col-head-pick { padding: 3px 8px 3px 4px; gap: 8px; }
.day-col-head-pick .cs { flex: 1; min-width: 0; }
.day-col-head-pick .cs-trigger { min-height: 28px; padding: 3px 8px; font-size: 12px; font-weight: 700; border-color: transparent; background: transparent; }
.day-col-head-pick .cs-trigger:hover { border-color: var(--line); }
/* Spur-Chips (Mockup TS Variante A, Plan TS-U; ersetzten den statischen
   Hinweis .day-tracks-hint): SOLL/IST je Spalte an/aus, auf allen Breiten.
   Segment-Stil der App: aktiv = Panel-Fuellung + inset Line-Ring, kein
   Akzentrot (das bleibt Statusanzeigen vorbehalten). */
.day-track-chips { margin-left: auto; display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); flex: 0 0 auto; }
.day-track-chip { position: relative; min-height: 0; border: 0; border-radius: 4px; background: transparent; color: var(--muted); font: 700 9px/1 system-ui, -apple-system, "Segoe UI", sans-serif; padding: 4px 7px; cursor: pointer; }
.day-track-chip.on { background: var(--panel); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.day-track-chip:hover { color: var(--text); }
/* Touch: etwas groessere Chips + unsichtbar vergroesserte Trefferflaeche
   (Kleinstziel-Muster aus Plan MT-U S6) - Optik bleibt dicht. */
@media (pointer: coarse) {
  .day-track-chip { padding: 6px 9px; font-size: 10px; }
  .day-track-chip::after { content: ""; position: absolute; inset: -8px -3px; }
}
/* Ehrlichkeits-Punkt: offener Verzug lebt auf der SOLL-Spur - ist sie
   ausgeblendet, weist der Kopf darauf hin statt ihn zu verschlucken. */
.day-late-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); }
/* Telefon-Spaltenkopf (Plan TS-U Telefon-Ausbau): EIN Knopf oeffnet das
   Spalten-Sheet - der Zeilenname bekommt die volle Kopfbreite (die Chips
   kappten ihn nach wenigen Zeichen), eine aktive Einzelspur zeigt sich als
   kleines Tag. renderDayView baut den Knopf nur beim Breiten-Maximum 1. */
.day-col-pickbtn { flex: 1; min-width: 0; min-height: 28px; display: flex; align-items: center; gap: 7px; margin: 0; padding: 2px 6px; border: 0; border-radius: var(--radius); background: transparent; color: var(--text); font: 700 12px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif; text-align: left; cursor: pointer; }
.day-col-pickbtn .day-col-name { flex: 1 1 auto; }
.day-col-modetag { flex: 0 0 auto; padding: 1px 5px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); font: 700 8.5px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: .04em; }
.day-col-caret { flex: 0 0 auto; display: inline-flex; color: var(--muted); }
.day-col-caret svg { width: 12px; height: 12px; display: block; }
/* Spalten-Sheet: Zeilenliste (scope-row-Bauform) + Spur-Segment. */
.day-sheet-lanes { margin: 0 -16px; }
.day-sheet-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.day-sheet-check { margin-left: auto; display: inline-flex; color: var(--accent); flex: 0 0 auto; }
.day-sheet-check svg { width: 15px; height: 15px; display: block; }
.day-sheet-sect { margin: 14px 0 8px; }
.day-sheet-seg { margin: 0 0 14px; }
/* padding-right = gemessene Scrollbalken-Breite des Tages-Koerpers (JS setzt
   --day-sbw nach dem Render): der Kopf liegt AUSSERHALB von .day-scroll und
   waere sonst um den Scrollbalken breiter als die Spalten darunter - die
   fr-Spalten fluchteten nicht mehr. */
.day-headrow { display: grid; grid-template-columns: var(--day-cols, 46px minmax(0, 1fr) minmax(0, 1fr)); padding-right: var(--day-sbw, 0px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); }
.day-headpad { border-right: 1px solid var(--line); }
.day-col-head { display: flex; align-items: center; gap: 7px; padding: 7px 10px; border-right: 1px solid var(--line); font-size: 12px; font-weight: 700; min-width: 0; }
.day-col-head-pers { border-right: 0; color: var(--muted); }
.day-col-head small { margin-left: auto; color: var(--muted); font-weight: 600; font-size: 9.5px; white-space: nowrap; }
/* Spalte entfernen (Plan TD-U S3): dezentes x im Spaltenkopf - nur beim
   Ueberfahren sichtbar (Hover-Muster wie der Zeilen-Verschiebe-Griff),
   auf Touch dauerhaft leicht sichtbar (Hover existiert dort nicht).
   renderDayView baut den Knopf nur ab 2 Einsatz-Spalten. */
.day-col-x { flex: 0 0 auto; width: 20px; height: 20px; min-height: 0; display: grid; place-items: center; margin: 0; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--muted); font-size: 14px; line-height: 1; opacity: 0; cursor: pointer; }
.day-col-head:hover .day-col-x, .day-col-x:focus-visible { opacity: 1; }
.day-col-x:hover { color: var(--danger); background: var(--surface-2); }
@media (pointer: coarse) { .day-col-x { opacity: .7; } }
.day-col-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.day-swatch { width: 10px; height: 10px; border-radius: 3px; background: var(--line); flex: 0 0 auto; }
.day-swatch-pers { opacity: .45; background: var(--muted); }
/* overflow-x hidden: der Richtungs-Schub (unten) versetzt .day-cols kurz
   horizontal - ohne Klammer wuerde ein Scrollbalken aufblitzen. */
.day-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; min-height: 0; position: relative; }
.day-cols { --day-px-h: 56px; position: relative; display: grid; grid-template-columns: var(--day-cols, 46px minmax(0, 1fr) minmax(0, 1fr)); height: calc(var(--day-px-h) * 24); background-image: repeating-linear-gradient(180deg, var(--grid-line) 0 1px, transparent 1px var(--day-px-h)); }
/* Richtungs-Schub beim Tageswechsel (Mockup TW Variante A): der neue Tag
   schiebt sich aus der Blaetter-Richtung ein. Nur transform/opacity
   (kompositor-freundlich, kein Layout); ueber die --mo-Tokens kollabiert
   die Bewegung bei prefers-reduced-motion automatisch auf 1 ms. */
@keyframes day-enter-next { from { transform: translateX(26px); opacity: .3; } to { transform: none; opacity: 1; } }
@keyframes day-enter-prev { from { transform: translateX(-26px); opacity: .3; } to { transform: none; opacity: 1; } }
.day-cols.enter-next { animation: day-enter-next var(--mo-base) var(--mo-ease); }
.day-cols.enter-prev { animation: day-enter-prev var(--mo-base) var(--mo-ease); }
.day-gutter { position: relative; border-right: 1px solid var(--line); }
.day-gutter b { position: absolute; right: 6px; transform: translateY(-50%); font: 600 10px/1 ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-variant-numeric: tabular-nums; color: var(--muted); }
.day-col-body { position: relative; border-right: 1px solid var(--line); min-width: 0; }
.day-col-pers { border-right: 0; }
/* Block: SOLL = gestrichelter Umriss, IST = Vollton (Bildsprache BS/AK4);
   Farbe faehrt als --day-c mit, IST-Textfarbe gerechnet als --day-tc. */
/* Flex-Spalte mit Top-Ausrichtung: Buttons zentrieren ihren Inhalt sonst
   vertikal (Browser-Eigenheit, auch bei display: block) - Titel/Zeit
   gehoeren fuer die Lesbarkeit konsequent an die Blockoberkante.
   Clipping per clip-path statt overflow: ein Vorfahre mit overflow !=
   visible wuerde zum Sticky-Bezugskontext und braeche den Sticky-Titel
   (.day-blk-c); clip-path clippt nur die Malerei. */
.day-blk { position: absolute; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; margin: 0; padding: 3px 7px; border: 0; border-radius: var(--blk-r, 2px); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; clip-path: inset(0 round var(--blk-r, 2px)); min-width: 0; min-height: 0; }
/* Titel/Zeit kleben beim Scrollen an der Oberkante des Sichtfensters,
   solange der Block sie schneidet - sticky ist von Haus aus auf die
   Parent-Box begrenzt, der Inhalt wandert also nie unter das Blockende. */
.day-blk-c { position: sticky; top: 2px; display: block; min-width: 0; }
.day-blk b { display: block; font-size: 11px; font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.day-blk small { display: block; font: 500 9px/1.35 ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-variant-numeric: tabular-nums; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* min-height: 0 oben ist Pflicht: die globale button-Mindesthoehe (--ctl-h,
   32 px) klemmte sonst jeden Block unter ~34 Minuten auf 32 px - die
   Unterkante lag dann UNTER der effektiven Endzeit.
   Kurze Bloecke (Hoehe unter DAY_BLOCK_SLIM_PX): nur der Titel, vertikal
   zentriert - eine angeschnittene Zeitzeile liess den Block voller/laenger
   wirken. Zeiten (und beim Echo die Herkunft) traegt der Tooltip. */
.day-blk.slim { padding-top: 0; padding-bottom: 0; justify-content: center; }
.day-blk.slim small { display: none; }
/* Toenung 14% statt 8% (Deckkraft-Politur 2026-07-25, im Gleichschritt mit
   den Matrix-SOLL-Bloecken). */
.day-blk.plan { border: 1.5px dashed var(--day-c, var(--muted)); color: var(--day-c, var(--text)); background: color-mix(in srgb, var(--day-c, var(--muted)) 14%, transparent); }
.day-blk.act { background: var(--day-c, var(--accent)); color: var(--day-tc, #ffffff); }
.day-blk.late { box-shadow: inset 0 0 0 1.5px var(--danger); }
.day-blk.missed { border-color: var(--danger); color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, transparent); }
.day-blk.conflict { box-shadow: inset 0 0 0 1.5px var(--warning); }
/* .8 statt .55 (Deckkraft-Politur 2026-07-25): gleicher Ruecktritt wie in
   der Matrix - ungetrackt bleibt erkennbar, aber lesbar. */
.day-blk.untracked { opacity: .8; }
/* Teilnehmer-Echo: read-only Projektion, Bildsprache wie .matrix-block-echo
   (gestrichelt + schraffiert, kursiver Titel, Herkunftszeile). Erscheint in
   jeder sichtbaren Teilnehmer-Spalte - auch wenn die Master-Zeile gerade
   keine Spalte ist. Klick oeffnet die Teilnehmer-Ansicht, keinen Editor. */
.day-blk.echo {
  border: 1px dashed color-mix(in srgb, var(--day-c, var(--accent)) 65%, var(--line));
  background: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--day-c, var(--accent)) 13%, var(--panel)) 0 5px,
    color-mix(in srgb, var(--day-c, var(--accent)) 4%, var(--panel)) 5px 10px);
  color: var(--muted);
}
.day-blk.echo:hover { border-color: var(--day-c, var(--accent)); }
.day-blk.echo b { font-style: italic; font-weight: 600; }
.day-echo-origin { display: block; font: 700 8.5px/1.35 system-ui, sans-serif; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.day-now { position: absolute; left: 0; right: 0; border-top: 2px solid var(--accent); z-index: 5; pointer-events: none; }
.day-now span { position: absolute; left: 3px; top: -9px; padding: 3px 5px; border-radius: 3px; background: var(--accent); color: #ffffff; font: 800 9px/1 ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-variant-numeric: tabular-nums; }
/* Persoenliche Spalte: Einfuehrungs-Hinweis (bis TA-U S3/S4) klebt beim
   Scrollen oben - ehrlich sichtbar, kein toter Knopf. */
.day-pers-intro { position: sticky; top: 12px; margin: 14px 10px; padding: 10px 12px; border: 1px dashed var(--grid-strong); border-radius: 8px; background: var(--panel); color: var(--muted); font-size: 12px; line-height: 1.5; }
.day-empty-col { position: sticky; top: 12px; margin: 14px 10px; padding: 10px 12px; border: 1px dashed var(--grid-strong); border-radius: 8px; text-align: center; color: var(--muted); font-size: 12px; }
.day-empty { padding: 48px 16px; text-align: center; color: var(--muted); }

@media (max-width: 700px) {
  /* Unter der Topbar, ueber der Bottom-Bar (62 px) - interner Scroll wie am
     Desktop, damit der Sprung zu JETZT funktioniert. */
  .day-view-panel { height: calc(100dvh - var(--topbar-h, 50px) - 62px - env(safe-area-inset-bottom)); }
  /* EINE Kopfzeile, kein Umbruch: Segment + Blaettern + Datum + Heute. Die
     Zeilenwahl sitzt im Spaltenkopf, die Operation steht in der Topbar. */
  .day-head { flex-wrap: nowrap; gap: 6px; padding: 3px 8px; }
  .day-title { flex: 1; min-width: 0; }
  .day-title b { font-size: 12.5px; }
  .day-title small { font-size: 10px; }
  .day-today { min-width: 30px; padding: 0 7px; }
  .day-spacer { display: none; }
  /* Das Modus-Segment Liste|Tag bleibt ausgeblendet (Basisregel), solange die
     Agenda-Liste auf dem Telefon ausgeblendet ist (Uebergangszustand). */
  /* Das Spaltenraster kommt auch hier aus --day-cols (renderDayView setzt
     den 38-px-Gutter unter 700 px selbst) - keine eigene Grid-Definition. */
  .day-col-head { padding: 3px 8px; }
  .day-col-head-pick { padding: 1px 6px 1px 1px; }
  /* Matrix-Suche ist matrixgebunden - solange die Telefon-Matrix ausgeblendet
     ist, entfaellt die Lupe auf dem Telefon komplett; Wachposten-Glocke und
     Sync-Punkt bleiben sichtbar. */
  #phoneSearchBtn { display: none; }
  /* Agenda-Kopf: das Modus-Segment Liste|Tag hat zwei statt drei Zellen. */
  .agenda-mode-seg { grid-template-columns: repeat(2, 1fr); }
}

/* Persoenliche Spalte aktiv (Plan TA-U S4): einspurige Eintraege mit eigener
   Bauform (feiner Rahmen + Toenung - bewusst weder SOLL-Umriss noch
   IST-Vollton), Erfassen-Knopf unten rechts, ehrliche Zustands-Hinweise. */
:root { --day-pers: #7aa77a; }
:root[data-theme="light"] { --day-pers: #2e5c2e; }
.day-blk.pers { border: 1px solid color-mix(in srgb, var(--day-pers) 70%, var(--line)); color: var(--day-pers); background: color-mix(in srgb, var(--day-pers) 11%, transparent); }
.day-pers-locked { border-color: color-mix(in srgb, var(--warning) 55%, var(--line)); color: var(--warning); }
.day-pers-create { display: block; margin-top: 10px; width: 100%; min-height: var(--ctl-h); font-weight: 700; }
/* Gleicher Erfassen-Look wie der Matrix-/Agenda-FAB (.phone-fab): randlos,
   feines SVG-Plus statt Text. min-height: 0 explizit - die globale
   button-Regel (min-height: --ctl-h) hob den Kreis unter pointer: coarse
   sonst auf 36x40, oval statt rund. Auf Touch waechst er als GANZES auf
   46x46 (exakt die phone-fab-Masse). */
.day-pers-add { position: sticky; top: calc(100% - 46px); left: calc(100% - 46px); width: 36px; height: 36px; min-height: 0; display: grid; place-items: center; margin: 0; padding: 0; border: 0; border-radius: 50%; background: var(--accent); color: #ffffff; box-shadow: var(--shadow); z-index: 6; cursor: pointer; }
.day-pers-add svg { width: 16px; height: 16px; display: block; }
.day-pers-add:hover { filter: brightness(1.06); }
@media (pointer: coarse) {
  .day-pers-add { top: calc(100% - 56px); left: calc(100% - 56px); width: 46px; height: 46px; }
  .day-pers-add svg { width: 20px; height: 20px; }
}