/*
 * Werkzeuge, die in mehreren Labs vorkommen (siehe tools.js), auf den Tokens aus
 * design.css. Stand Workplace V3: Die Werkzeuge fuellen ihr Fenster von Kante zu Kante,
 * Ebenen statt Kaesten, Befehlsleiste oben, Menues ueber DsMenu.
 *
 *   Verzeichnisdienst (D, E) -> Verzeichnis wie ADUC/Entra: heller Kopf mit Pfad,
 *                               Befehlsleiste, dichte Tabelle mit Kontosymbol,
 *                               Eigenschaften rechts mit Reitern.
 *   Dokumentenlenkung (G, H, I) -> ein gelenktes Dokument: Papieranmutung, Kennzeile mit
 *                               Lenkungsstand, Stammdaten, nummerierte Abschnitte.
 *   Posteingang (alle)        -> Mailprogramm: Kopfband mit Suche, Befehlsleiste,
 *                               Ordner, Liste, Lesebereich ohne Karte.
 *   Chat (C, F, H)            -> Team-Chat: Unterhaltungen links, Verlauf mit Blasen,
 *                               Eingabefeld mit Senden-Knopf.
 *   Werkzeugkopf (.thead)     -> Alias des Bausteins .ds-toolhead; Tools.head() setzt
 *                               beide Klassen, damit alte Selektoren halten.
 *
 * Die alten Regeln fuer Posteingang und Chat stehen noch in workspace.css; die Regeln
 * hier sind auf .ol bzw. .tm bezogen und gehen ihnen vor.
 */

/* Leerer Wert: ausgeschrieben statt Strich. Gemeinsame Klasse fuer alle Werkzeuge. */
.leer-wert { color: var(--ds-text-3); font-style: italic; }

/* ================= Verzeichnisdienst ================= */
.dir {
  --green: var(--ds-ok);
  --accent: var(--ds-ok);

  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 340px;
  background: var(--ds-bg-surface);
  font-family: var(--font-sans);
  color: var(--ds-text);
  font-variant-numeric: tabular-nums;
  container-type: inline-size; container-name: dir;
}

/* Kopf: hell wie das Admincenter, Marke in der Werkzeugfarbe, Pfad darunter */
.dir-head {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: var(--ds-head-h);
  padding: var(--sp-2) var(--sp-4);
  background: var(--ds-bg-surface);
  border-bottom: 1px solid var(--ds-border-subtle);
  flex-shrink: 0;
}
.dir-mark {
  width: 32px; height: 32px; border-radius: var(--r-m);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.12);
  flex-shrink: 0;
}
.dir-mark svg { width: 18px; height: 18px; }
.dir-brand { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.dir-name { font-size: var(--fs-l); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); }
.dir-sub.ds-crumbs { font-size: var(--fs-s); }
.dir-sub .mono { font-size: var(--fs-s); }
.dir-head-user { flex-shrink: 0; display: inline-flex; }

/* Befehlsleiste: Suche, Filter, Befehle, Zaehler */
.dir-toolbar.ds-cmdbar { gap: 6px; padding: var(--sp-2) var(--sp-3); }
.dir-searchwrap { position: relative; flex: 0 1 320px; min-width: 180px; display: block; margin: 0; }
.dir-search-icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--ds-icon); pointer-events: none; display: inline-flex;
}
.dir-search-icon svg { width: 100%; height: 100%; }
.dir .dir-search {
  width: 100%; height: var(--ds-control-h);
  border: 1px solid var(--ds-border-strong);
  border-radius: var(--r-s);
  padding: 0 var(--sp-3) 0 32px;
  font-size: var(--fs-m);
  font-family: inherit;
  background: var(--ds-bg-surface);
  color: var(--ds-text);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.dir-search::placeholder { color: var(--ds-gray-500); }
.dir .dir-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(31, 122, 76, 0.16); }
.dir-filter {
  height: var(--ds-control-h);
  border: 1px solid var(--ds-border-strong); border-radius: var(--r-s); background: var(--ds-bg-surface);
  padding: 0 28px 0 var(--sp-2); font-size: var(--fs-m); font-family: inherit; color: var(--ds-text);
  max-width: 220px; margin: 0;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6d79' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 14px;
  cursor: pointer;
}
.dir-filter:hover { border-color: var(--ds-gray-400); }
.dir-filter:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(31, 122, 76, 0.16); }
.dir .ds-cmd svg { color: var(--accent); }
.dir .ds-cmd:disabled svg { color: var(--ds-icon); }
.dir-count { font-size: var(--fs-s); color: var(--ds-text-3); flex-shrink: 0; padding-right: var(--sp-1); }

/* Tabelle */
.dir-main { flex: 1; min-height: 0; display: flex; position: relative; }
.dir-list { flex: 1; overflow: auto; min-width: 0; }
.dir-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-m); line-height: var(--lh-snug); }
.dir-table thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--ds-bg-surface);
  border-bottom: 1px solid var(--ds-border);
  height: 38px; padding: 0 10px;
  text-align: left; vertical-align: middle;
  font-size: var(--fs-s); font-weight: var(--fw-semibold);
  text-transform: none; letter-spacing: 0; line-height: var(--lh-tight);
  color: var(--ds-text-2);
}
.dir-table thead th:first-child, .dir-table td:first-child { padding-left: var(--sp-4); }
.dir-table thead th[data-sort] { cursor: pointer; user-select: none; }
.dir-table thead th[data-sort]:hover { background: var(--ds-bg-hover); color: var(--ds-text); }
.dir-table thead th.sortiert { color: var(--ds-text); }
.dir-table thead th:focus-visible { outline: var(--focus-outline); outline-offset: -2px; }
.dir-sortpfeil { display: inline-flex; margin-left: 4px; vertical-align: -2px; color: var(--accent); }
.dir-sortpfeil svg { width: 13px; height: 13px; }
.dir-sortpfeil:empty { display: none; }
.dir-table td {
  height: 42px; padding: 4px 10px;
  border-bottom: 1px solid var(--ds-border-subtle);
  vertical-align: middle;
}
.dir-table tbody tr { cursor: default; transition: background var(--dur-1) var(--ease); }
.dir-table tbody tr:hover { background: var(--ds-bg-hover); }
.dir-table tbody tr:focus { outline: none; }
.dir-table tbody tr:focus-visible { outline: var(--focus-outline); outline-offset: -2px; }
.dir-table tbody tr.sel, .dir-table tbody tr.sel:hover {
  background: color-mix(in srgb, var(--accent) 9%, white);
  box-shadow: inset 3px 0 0 var(--accent);
}
.dir-acct { white-space: nowrap; }
.dir-acct-in { display: inline-flex; align-items: center; gap: 8px; }
.dir-acct .mono { font-size: var(--fs-s); font-weight: var(--fw-semibold); color: var(--ds-text); }
.dir-av.ds-avatar--sm { font-size: var(--fs-xs); }
.dir-aus .dir-acct .mono, .dir-aus .dir-fn { color: var(--ds-text-2); }
.dir-desc { color: var(--ds-text-2); }
.dir-dim { color: var(--ds-text-3); white-space: nowrap; font-size: var(--fs-s); }
.dir-groups { color: var(--ds-text-2); font-size: var(--fs-s); }
.dir-grp { white-space: nowrap; }

/* Zustand, keine Bewertung: das Verzeichnis sagt was ist, nicht was richtig ist */
.dir-state.ds-pill { font-weight: var(--fw-medium); color: var(--ds-text-2); background: var(--ds-bg-muted); }
.dir-state.on::before { background: var(--ds-ok-dk); opacity: 1; }
.dir-state.off::before { background: var(--ds-gray-400); opacity: 1; }
.dir-state.off { color: var(--ds-text-3); }
/* In der Tabelle ohne Flaeche, nur Punkt und Text: die Spalte bleibt schmal. */
.dir-table .dir-state.ds-pill { background: transparent; padding: 0; height: auto; }

.dir-empty .ds-empty-v3 { min-height: 220px; }

/* Eigenschaften: Panel mit Reitern */
.dir-detail {
  width: clamp(300px, 24%, 400px); flex-shrink: 0;
  border-left: 1px solid var(--ds-border-subtle);
  background: var(--ds-bg-surface);
  display: flex; flex-direction: column; min-height: 0;
}
/* Schmales Fenster: Suche und Filter in der ersten Zeile, Befehle als Symbol mit Tooltip
   (title aus Tools.cmd) daneben oder darunter; die Leiste bricht geordnet um. */
@container dir (max-width: 680px) {
  .dir-searchwrap { flex: 1 1 180px; }
  .dir-filter { max-width: 170px; }
  .dir-toolbar .ds-cmd > span:not(.ds-cmd-caret) { display: none; }
  .dir-toolbar .ds-cmd { padding: 0 8px; }
  .dir-toolbar .ds-cmd-sep { display: none; }
  .dir-detail { width: min(400px, calc(100% - 48px)); }
}
@container dir (max-width: 980px) {
  .dir-detail { position: absolute; top: 0; right: 0; bottom: 0; box-shadow: -10px 0 24px -12px rgba(19, 26, 33, 0.35); z-index: 2; }
}
.dir-detail-kopf {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-4) var(--sp-2) var(--sp-5); flex-shrink: 0;
}
.dir-detail-kopf .ds-avatar--lg { width: 44px; height: 44px; }
.dir-detail-titel { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.dir-detail-titel strong { font-size: var(--fs-l); font-weight: var(--fw-semibold); color: var(--ds-text); }
.dir-detail-titel .mono { font-size: var(--fs-s); color: var(--ds-text-3); overflow-wrap: anywhere; }
.dir-detail-zu { align-self: flex-start; }
.dir-detail-status {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px var(--sp-2);
  padding: 0 var(--sp-5) var(--sp-3) calc(var(--sp-5) + 44px + var(--sp-3));
  font-size: var(--fs-s); color: var(--ds-text-3);
}
.dir-reiter.ds-tabs { padding: 0 var(--sp-3); border-bottom: 1px solid var(--ds-border-subtle); }
.dir-reiter .ds-tab.is-active { border-bottom-color: var(--accent); }
.dir-reiter .ds-tab.is-active .ds-tab-count { background: color-mix(in srgb, var(--accent) 12%, white); color: var(--ds-ok-text); }
.dir-detail-body { overflow-y: auto; padding: var(--sp-4) var(--sp-5) var(--sp-5); flex: 1; min-height: 0; }
.dir-dl { display: grid; grid-template-columns: 140px 1fr; gap: 10px var(--sp-3); margin: 0; font-size: var(--fs-m); }
.dir-dl dt { color: var(--ds-text-3); font-size: var(--fs-s); padding-top: 1px; }
.dir-dl dd { margin: 0; color: var(--ds-text); overflow-wrap: anywhere; }
.dir-dl dd.mono { font-size: var(--fs-s); }
.dir-mitglied { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.dir-gruppe {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: var(--ds-bg-surface); border: 1px solid var(--ds-border); border-radius: var(--r-m);
  height: 40px; padding: 0 var(--sp-3); margin: 0; cursor: pointer; font-family: inherit; font-size: var(--fs-m); color: var(--ds-text);
  font-weight: var(--fw-regular);
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.dir-gruppe:hover { border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: color-mix(in srgb, var(--accent) 6%, white); }
.dir-gruppe-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: var(--r-s);
  background: color-mix(in srgb, var(--accent) 12%, white); color: var(--accent); flex-shrink: 0;
}
.dir-gruppe-icon svg { width: 15px; height: 15px; }
.dir-gruppe-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dir-gruppe-n {
  font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--ds-text-2); font-variant-numeric: tabular-nums;
  background: var(--ds-bg-muted); border-radius: var(--r-pill); padding: 1px 8px;
}

/* ================= Dokumentenlenkung (Dokument auf Papier) ================= */
.doc {
  --papier: #f4f2ed;
  --kante: #e2ddd2;
  --braun: #6f6350;

  background: var(--ds-bg-surface);
  font-family: var(--font-sans);
  color: var(--ds-text);
}

/* Kopf: Kennzeile mit Lenkungsstand, Titel, Stammdaten */
.doc-head {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-8) var(--sp-10) var(--sp-5);
  border-bottom: 1px solid #ece7dc;
}
.doc-kicker { display: flex; align-items: center; gap: var(--sp-2); }
.doc-mark {
  width: 26px; height: 26px; border-radius: var(--r-s);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--papier); border: 1px solid #ddd6c8; color: var(--braun);
  flex-shrink: 0;
}
.doc-mark svg { width: 15px; height: 15px; }
.doc-sub {
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--ls-caps);
  color: var(--ds-ok-text);
}
.doc-brand { display: block; min-width: 0; }
.doc-name { display: block; font-size: var(--fs-xl); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); color: #2b2822; }
.doc-meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-3) var(--sp-6);
  margin: var(--sp-3) 0 0; padding-top: var(--sp-3); border-top: 1px dashed #e2ddd2;
}
.doc-meta dt { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--ds-text-3); text-transform: uppercase; letter-spacing: var(--ls-caps); margin-bottom: 2px; }
.doc-meta dd { margin: 0; font-size: var(--fs-s); color: var(--ds-text); }

/* Der Lenkungsstand faerbt den Kopf. Eine alte Fassung ist lesbar, sie gilt nur nicht. */
.doc-head.alt { background: #f3f1ec; border-bottom-color: #d8d2c4; }
.doc-head.alt .doc-mark { border-color: #cfc7b4; color: #6a6155; background: #fff; }
.doc-head.alt .doc-sub { color: #75612f; }
.doc-head.alt .doc-name { color: #4a463e; }
.doc-head.entw { background: #fdf6e8; border-bottom-color: #ecdcb8; }
.doc-head.entw .doc-mark { border-color: #e2cf9f; color: #8a5d08; background: #fff; }
.doc-head.entw .doc-sub { color: #8a5d08; }
/* Nachweis (Bericht, Protokoll, Vermerk): abgelegt, ohne Fassung und Lenkungsstand. */
.doc-head.nw { background: #f2f6fa; border-bottom-color: #d5dfea; }
.doc-head.nw .doc-mark { border-color: #c4d3e3; color: #34567a; background: #fff; }
.doc-head.nw .doc-sub { color: #34567a; }

.doc-warn {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  margin: 0 0 var(--sp-5);
  padding: var(--sp-2) var(--sp-3);
  border-left: 3px solid #c9b06a;
  border-radius: var(--r-xs);
  background: #fdf8ec;
  font-size: var(--fs-m); line-height: var(--lh-base); color: #6b5720;
}
.doc-warn-ic { display: inline-flex; width: 16px; height: 16px; margin-top: 2px; color: #a07a16; flex-shrink: 0; }
.doc-warn-ic svg { width: 16px; height: 16px; }

/* Lesespalte, nicht volle Breite: ein Dokument liest man */
.doc-body { padding: var(--sp-6) var(--sp-10) var(--sp-10); max-width: 820px; }
.doc-sec { margin-bottom: var(--sp-6); }
.doc-sec:last-child { margin-bottom: 0; }
.doc-sec-head {
  display: flex; align-items: baseline; gap: 10px;
  font-size: var(--fs-l); font-weight: var(--fw-semibold); color: #2b2822;
  margin: 0 0 var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid #ece7dc;
}
.doc-sec-num {
  font-size: var(--fs-s); font-weight: var(--fw-bold);
  color: var(--braun);
  font-family: var(--font-mono);
  flex-shrink: 0;
}
.doc-dl {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 10px var(--sp-5);
  margin: 0;
  font-size: var(--fs-m);
}
.doc-dl dt { color: var(--ds-text-2); font-weight: var(--fw-semibold); }
.doc-dl dd { margin: 0; color: var(--ds-text); line-height: var(--lh-relaxed); }

/* ---------- Abbildung im Dokument ---------- */
.doc-fig {
  margin: 0 0 var(--sp-6);
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
  background: #fbfaf7;
  border: 1px solid #e8e3d8;
  border-radius: var(--r-m);
}
.doc-fig figcaption {
  margin-top: var(--sp-3);
  padding-top: var(--sp-2);
  border-top: 1px solid #ece7dc;
  font-size: var(--fs-s);
  line-height: var(--lh-base);
  color: #6f6757;
}

/* ---------- Topologie ---------- */
.tp-svg { display: block; width: 100%; max-width: 640px; height: auto; margin: 0 auto; }
.tp-svg .tp-name { font-family: var(--font-sans); font-size: var(--fs-s); font-weight: var(--fw-semibold); fill: var(--ds-text); }
.tp-svg .tp-sub { font-family: var(--font-sans); font-size: var(--fs-xs); fill: var(--ds-text-3); }
.tp-svg .tp-fw-name { font-family: var(--font-sans); font-size: var(--fs-s); font-weight: var(--fw-bold); fill: #fff; }
.tp-svg .tp-fw-sub { font-family: var(--font-mono); font-size: var(--fs-xs); fill: #fff; }
/* Die Leitungen sind der Inhalt der Abbildung: Jeder Weg endet an der Firewall. */
.tp-svg .tp-line path { fill: none; stroke: var(--ds-gray-300); stroke-width: 1.5; }

/* ================= Werkzeugkopf (alle Fachwerkzeuge) ================= */
/* Tools.head() gibt "thead ds-toolhead ..." aus; die Gestaltung liegt in design.css
   (.ds-toolhead). Hier nur, was den Kopf in einem Werkzeug verankert, und das Konto
   ganz rechts. */
.thead { flex-shrink: 0; }
.thead-user { display: inline-flex; align-items: center; flex-shrink: 0; margin-left: auto; }
.thead-right + .thead-user { margin-left: var(--sp-4); padding-left: var(--sp-4); border-left: 1px solid rgba(255, 255, 255, 0.14); }
.ds-toolhead--light .thead-right + .thead-user,
.ds-toolhead--paper .thead-right + .thead-user { border-left-color: var(--ds-border); }
.ds-toolhead-sig + .thead-user { margin-left: auto; }
.thead-user .ds-avatar { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18); }
.ds-toolhead--light .thead-user .ds-avatar, .ds-toolhead--paper .thead-user .ds-avatar { box-shadow: none; }
/* Suchfeld im Kopf (head({ search })) */
.thead-suche { margin: 0; }
.thead-suche input {
  flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; padding: 0;
  font: inherit; color: inherit; outline: none;
}
.thead-suche input::placeholder { color: inherit; opacity: 0.75; }

/* Gemeinsamer Rahmen fuer Fachwerkzeuge: Flaeche ohne eigenen Rand. Im Fenster liegt
   das Werkzeug von Kante zu Kante (ws-body-fill). */
.tool {
  background: var(--ds-bg-surface);
  font-family: var(--font-sans);
  color: var(--ds-text);
  font-variant-numeric: tabular-nums;
  display: flex;
  flex-direction: column;
}
.ws-app:not(.ws-app-fill) > .tool { border-radius: var(--r-m); overflow: hidden; box-shadow: var(--sh-2); }

/* Meldeportal (Lab F): Formular einer Aufsichtsbehoerde, Lesebreite, ruhig, kein Chrome */
.mvp { max-width: 880px; }

/* Mikroetikett in Versalien: 12 px ist die Untergrenze, die Sperrung macht es lesbar. */
.etikett {
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: var(--ls-caps);
  color: var(--ds-text-3);
}
.mvp-body { padding: var(--sp-4) var(--sp-5); }

/* ================= Posteingang (Tools.mail) ================= */
/* --ol-akz: Werkzeugfarbe abgedunkelt, als Text und Kante auf Weiss und auf --ol-soft
   mindestens 4,5:1. --ol-band: Kopfband, weisse Schrift darauf mindestens 4,5:1. */
.mbox.ol {
  --ol-akz: color-mix(in srgb, var(--accent) 60%, #0b2a45);
  --ol-band: color-mix(in srgb, var(--accent) 62%, #0b2a45);
  --ol-soft: color-mix(in srgb, var(--accent) 11%, white);

  display: flex; flex-direction: column; height: 100%;
  background: var(--ds-bg-surface);
  border: 0; border-radius: 0; overflow: hidden;
  font-family: var(--font-sans); color: var(--ds-text);
  container-type: inline-size; container-name: mbox;
}

/* Kopfband: Marke, Suche, Konto */
.ol-top {
  display: flex; align-items: center; gap: var(--sp-4);
  height: 48px; padding: 0 var(--sp-3) 0 var(--sp-4);
  background: var(--ol-band); color: #fff; flex-shrink: 0;
}
.ol-brand { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-l); font-weight: var(--fw-semibold); width: 196px; flex-shrink: 0; }
.ol-brand svg { width: 20px; height: 20px; }
.ol-search {
  display: flex; align-items: center; gap: var(--sp-2);
  flex: 0 1 520px; height: 32px; margin: 0 auto 0 0; padding: 0 var(--sp-3);
  background: rgba(255, 255, 255, 0.94); border-radius: var(--r-s); color: var(--ds-text-3);
  transition: box-shadow var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.ol-search:focus-within { background: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.45); }
.ol-search svg { width: 15px; height: 15px; flex-shrink: 0; }
.ol-search input {
  flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; padding: 0; margin: 0;
  font-family: inherit; font-size: var(--fs-m); color: var(--ds-text); outline: none;
}
.ol-search input::placeholder { color: var(--ds-text-3); }
.ol-konto { display: inline-flex; flex-shrink: 0; }
.ol-konto .ds-avatar { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55); }

.ol .ol-cmdbar { padding: 6px var(--sp-3); }
.ol .ds-cmd svg { color: var(--ol-akz); }
.ol .ds-cmd:disabled svg { color: var(--ds-icon); }
.ol .ds-cmd[aria-pressed="true"] { background: var(--ol-soft); color: var(--ol-akz); }

.ol-main { flex: 1; min-height: 0; display: flex; }

/* Ordner */
.ol .mbox-ordner {
  display: block; width: 220px; flex-shrink: 0; padding: 0; gap: 0;
  background: var(--ds-bg-subtle); border-right: 1px solid var(--ds-border-subtle);
  overflow-y: auto;
}
.ol .mbox-konto { padding: var(--sp-3) var(--sp-2) var(--sp-2); }
.ol .mbox-ord {
  height: 34px; padding: 0 10px; gap: 10px; border-radius: var(--r-s);
  font-size: var(--fs-m); font-weight: var(--fw-regular); color: var(--ds-text-2);
}
.ol .mbox-ord:hover { background: var(--ds-bg-hover); color: var(--ds-text); }
.ol .mbox-ord.is-on { background: var(--ol-soft); color: var(--ds-text); font-weight: var(--fw-semibold); }
.ol .mbox-ord.is-on::before { background: var(--ol-akz); }
.ol .mbox-ord svg { width: 17px; height: 17px; color: var(--ds-icon); }
.ol .mbox-ord.is-on svg { color: var(--ol-akz); }
.ol .mbox-ord-zahl {
  background: none; padding: 0; border-radius: 0;
  font-size: var(--fs-s); font-weight: var(--fw-bold); color: var(--ol-akz);
}
.ol .mbox-ord.is-on .mbox-ord-zahl { background: none; }

/* Liste */
.ol .mbox-liste {
  width: clamp(320px, 32%, 440px); flex-shrink: 0;
  background: var(--ds-bg-surface); border-right: 1px solid var(--ds-border-subtle);
}
.ol .mbox-liste-kopf { height: 48px; padding: 0 var(--sp-3) 0 var(--sp-4); border-bottom: 1px solid var(--ds-border-subtle); }
.ol-ordnerwahl {
  display: inline-flex; align-items: center; gap: 4px;
  height: 32px; margin: 0 0 0 -6px; padding: 0 6px; border: 0; border-radius: var(--r-s);
  background: transparent; font-family: inherit; font-size: var(--fs-l); font-weight: var(--fw-semibold); color: var(--ds-text);
  pointer-events: none;
}
.ol-ordnerwahl:hover { background: var(--ds-bg-hover); }
.ol-ordnerwahl-pfeil { display: none; color: var(--ds-icon); }
.ol-ordnerwahl-pfeil svg { width: 14px; height: 14px; }
.ol .mbox-filter.ds-segment { padding: 2px; }
.ol .mbox-filter .ds-tab { height: 26px; padding: 0 10px; font-size: var(--fs-s); color: var(--ds-text-2); }
.ol .mbox-filter .ds-tab.is-active { color: var(--ds-text); font-weight: var(--fw-semibold); }

.ol .mbox-item {
  position: relative;
  flex-direction: row; align-items: flex-start; gap: var(--sp-3);
  padding: 10px var(--sp-4) 10px var(--sp-4);
  border-bottom: 1px solid var(--ds-border-subtle);
  box-shadow: none; background: transparent;
}
.ol .mbox-item:hover { background: var(--ds-bg-hover); }
.ol .mbox-item.aktiv, .ol .mbox-item.aktiv:hover { background: var(--ol-soft); box-shadow: inset 3px 0 0 var(--ol-akz); }
.ol .mbox-item .ol-row-av { margin-top: 2px; }
.ol-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ol .mbox-zeile { align-items: baseline; }
.ol .mbox-item.neu .mbox-zeile::before { content: none; }
.ol .mbox-von {
  display: block; flex: 1; min-width: 0;
  font-size: var(--fs-m); color: var(--ds-text); line-height: var(--lh-snug);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ol .mbox-zeit { font-size: var(--fs-xs); color: var(--ds-text-3); }
.ol .mbox-betreff {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-s); color: var(--ds-text); line-height: var(--lh-snug);
}
.ol-row-subj { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ol-row-ic { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.ol .mbox-betreff .mbox-flag, .ol .mbox-betreff .mbox-clip { width: 14px; height: 14px; margin: 0; vertical-align: 0; }
.ol .mbox-betreff svg { width: 14px; height: 14px; }
.ol .mbox-betreff .mbox-flag { color: var(--ds-bad); }
.ol .mbox-vorschau { font-size: var(--fs-s); color: var(--ds-text-3); }
/* Ungelesen: Absender fett, Betreff in der Werkzeugfarbe */
.ol .mbox-item.neu .mbox-von { font-weight: var(--fw-semibold); }
.ol .mbox-item.neu .mbox-betreff { font-weight: var(--fw-semibold); color: var(--ol-akz); }
.ol .mbox-leer { padding: 0; height: 100%; }

/* Lesebereich: kein Kasten, Text in Lesebreite */
.ol .mbox-lesen { flex: 1; min-width: 0; overflow-y: auto; padding: 0; background: var(--ds-bg-surface); }
.ol .mail-app-card {
  max-width: 840px; margin: 0; padding: var(--sp-6) var(--sp-8) var(--sp-10);
  border: 0; border-radius: 0; box-shadow: none; background: transparent;
}
.ol .mail-head { border-bottom: 1px solid var(--ds-border-subtle); padding-bottom: var(--sp-4); margin-bottom: var(--sp-5); }
.ol .mail-subject {
  font-size: var(--fs-xl); font-weight: var(--fw-semibold); line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight); color: var(--ds-text); margin: 0 0 var(--sp-4);
}
.ol .mail-absender { flex-wrap: nowrap; align-items: center; gap: var(--sp-3); }
.ol .mail-absender-txt { flex: 1 1 auto; gap: 2px; }
.ol .mail-meta { font-size: var(--fs-m); color: var(--ds-text-2); }
.ol .mail-meta .mail-from { font-weight: var(--fw-semibold); color: var(--ds-text); }
.ol .mail-adresse { display: inline; font-size: var(--fs-s); color: var(--ds-text-3); white-space: normal; }
.ol .mail-an { font-size: var(--fs-s); color: var(--ds-text-3); }
.ol-msg-rechts { display: inline-flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; align-self: flex-start; padding-top: 2px; }
.ol-msg-flag { display: inline-flex; color: var(--ds-bad); }
.ol-msg-flag svg { width: 15px; height: 15px; }
.ol .mail-zeit { font-size: var(--fs-s); color: var(--ds-text-3); }
.ol .mail-priority {
  display: flex; align-items: center; gap: var(--sp-2); height: auto;
  margin: var(--sp-4) 0 0; padding: 7px var(--sp-3);
  background: var(--ds-bad-soft); color: var(--ds-bad-text); border-radius: var(--r-s);
  font-size: var(--fs-s); font-weight: var(--fw-semibold); text-transform: none; letter-spacing: 0;
}
.ol .mail-priority svg { width: 14px; height: 14px; flex-shrink: 0; }
.ol .mail-anhaenge { margin-top: var(--sp-4); }
.ol .mail-anhang { gap: 10px; padding: 6px 12px 6px 6px; background: var(--ds-bg-surface); border: 1px solid var(--ds-border); border-radius: var(--r-m); max-width: 280px; }
.ol .mail-anhang-icon.ol-typ {
  width: 32px; height: 32px; border-radius: var(--r-s);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ds-gray-600); color: #fff;
  font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: 0.02em;
}
.ol .ol-typ svg { width: 16px; height: 16px; }
.ol .ol-typ--pdf { background: #b42318; }
.ol .ol-typ--xlsx, .ol .ol-typ--xls, .ol .ol-typ--csv { background: #1f7a4c; }
.ol .ol-typ--docx, .ol .ol-typ--doc { background: #2f6fae; }
.ol .ol-typ--zip { background: #8a5a06; }
.ol .mail-anhang-name { font-size: var(--fs-s); font-weight: var(--fw-medium); }
.ol .mail-body { max-width: 760px; }
.ol .mail-body p { font-size: var(--fs-m); line-height: var(--lh-relaxed); margin: 0 0 var(--sp-3); }
.ol .mail-body ul { font-size: var(--fs-m); }
.ol .mail-body em { font-size: var(--fs-m); }
.ol .mail-kv { font-size: var(--fs-m); }
.ol .mbox-leer-lesen { margin: 0; height: 100%; }

@container mbox (max-width: 980px) {
  .ol .mbox-ordner { display: none; }
  .ol-brand { width: auto; }
  .ol-ordnerwahl { pointer-events: auto; cursor: pointer; }
  .ol-ordnerwahl-pfeil { display: inline-flex; }
}
@container mbox (max-width: 720px) {
  .ol .mbox-liste { width: 280px; }
  .ol .mail-app-card { padding: var(--sp-4) var(--sp-5) var(--sp-8); }
  .ol .ol-cmdbar .ds-cmd > span:not(.ds-cmd-caret) { display: none; }
}

/* ================= Chat (Tools.chat) ================= */
.chat-card.tm {
  --tm-soft: color-mix(in srgb, var(--accent) 13%, white);

  height: 100%; max-width: none;
  border: 0; border-radius: 0; overflow: hidden;
  background: var(--ds-bg-surface);
  font-family: var(--font-sans); color: var(--ds-text);
  container-type: inline-size; container-name: tm;
}
.tm .chat-leer { flex: 1; padding: 0; }

/* Unterhaltungen */
.tm .chat-threads {
  width: 300px; flex-shrink: 0;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--ds-bg-subtle); border-right: 1px solid var(--ds-border-subtle);
}
.tm-side-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  height: 60px; padding: 0 var(--sp-2) 0 var(--sp-4); flex-shrink: 0;
}
.tm-side-titel { font-size: var(--fs-l); font-weight: var(--fw-semibold); }
.tm .ds-iconbtn.is-on { background: var(--tm-soft); color: var(--accent); }
.tm-filterhinweis {
  display: inline-flex; align-items: center; gap: 4px; align-self: flex-start;
  margin: 0 var(--sp-3) var(--sp-2); height: 24px; padding: 0 4px 0 10px; border-radius: var(--r-pill);
  background: var(--tm-soft); color: var(--accent); font-size: var(--fs-s); font-weight: var(--fw-semibold);
}
.tm-filter-x {
  display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin: 0; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer;
}
.tm-filter-x:hover { background: rgba(0, 0, 0, 0.06); }
.tm-filter-x svg { width: 12px; height: 12px; }
.tm-faeden { flex: 1; overflow-y: auto; padding: 0 var(--sp-2) var(--sp-2); }
.tm .chat-thread {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; margin: 0 0 2px; border-radius: var(--r-m);
  box-shadow: none; background: transparent;
}
.tm .chat-thread:hover { background: var(--ds-bg-hover); }
.tm .chat-thread.aktiv, .tm .chat-thread.aktiv:hover { background: var(--tm-soft); box-shadow: inset 3px 0 0 var(--accent); }
.tm .chat-thread .ds-avatar-dot { box-shadow: 0 0 0 2px var(--ds-bg-subtle); }
.tm .chat-thread.aktiv .ds-avatar-dot { box-shadow: 0 0 0 2px var(--tm-soft); }
.tm .chat-thread-txt { gap: 2px; }
.tm .chat-thread-zeile { align-items: center; }
.tm .chat-thread .chat-who { font-size: var(--fs-m); font-weight: var(--fw-regular); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm .chat-thread-letzte { flex: 1; min-width: 0; }
.tm .chat-thread.neu .chat-who, .tm .chat-thread.neu .chat-thread-letzte { font-weight: var(--fw-semibold); color: var(--ds-text); }
.tm .chat-thread-badge { background: var(--ds-bad); min-width: 18px; text-align: center; }

/* Unterhaltung */
.tm .chat-verlauf { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.tm .chat-head {
  height: 60px; gap: var(--sp-3); padding: 0 var(--sp-5);
  border-bottom: 1px solid var(--ds-border-subtle); background: var(--ds-bg-surface);
}
.tm-head-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tm .chat-head .chat-who { font-size: var(--fs-l); font-weight: var(--fw-semibold); }
.tm .chat-head .chat-role { font-size: var(--fs-s); color: var(--ds-text-3); }
.tm .chat-head .ds-avatar-dot { width: 11px; height: 11px; }
.tm .chat-log { flex: 1; overflow-y: auto; padding: var(--sp-5) var(--sp-6) var(--sp-4); background: var(--ds-bg-subtle); }
.tm .chat-msg { max-width: 980px; margin: var(--sp-4) auto 0; gap: 10px; }
.tm .chat-msg:first-child { margin-top: 0; }
.tm .chat-msg.folge { margin-top: 3px; }
.tm .chat-msg-avatar { width: 32px; height: 32px; }
.tm .chat-bubble {
  max-width: min(76%, 680px);
  background: var(--ds-bg-surface); border: 0; border-radius: var(--r-m);
  padding: 8px 14px 10px;
  box-shadow: 0 1px 2px rgba(19, 26, 33, 0.08), 0 0 0 1px rgba(19, 26, 33, 0.03);
  font-size: var(--fs-m); line-height: var(--lh-base); color: var(--ds-text);
}
.tm .chat-msg-kopf { gap: var(--sp-2); margin-bottom: 3px; }
.tm .chat-msg-name { font-size: var(--fs-s); font-weight: var(--fw-semibold); color: var(--ds-text-2); }
.tm .chat-time { font-size: var(--fs-xs); color: var(--ds-text-3); }
.tm .chat-msg.me { justify-content: flex-end; }
.tm-me { display: flex; flex-direction: column; align-items: flex-end; max-width: min(76%, 680px); }
.tm .chat-msg.me .chat-bubble {
  max-width: 100%;
  background: var(--tm-soft); border: 0; box-shadow: none;
}
.tm .chat-msg.me .chat-time { margin: 0 2px 3px; }

/* Eingabe (Schnittstelle 4) */
.tm .chat-input-row { display: block; padding: var(--sp-2) var(--sp-6) var(--sp-4); border-top: 0; background: var(--ds-bg-subtle); }
.tm-compose {
  display: flex; align-items: center; gap: var(--sp-2);
  max-width: 980px; margin: 0 auto;
  padding: 6px 6px 6px var(--sp-4);
  background: var(--ds-bg-surface); border: 1px solid var(--ds-border); border-radius: var(--r-m);
  box-shadow: var(--sh-1);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.tm-compose:focus-within { border-color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent), var(--sh-1); }
.tm .chat-input {
  flex: 1; min-width: 0; height: 34px; padding: 0; margin: 0;
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
  font-size: var(--fs-m);
}
.tm .chat-input:focus { border: 0; box-shadow: none; outline: none; }
.tm .chat-send {
  width: 36px; height: 34px; padding: 0; justify-content: center;
  background: var(--accent); border: 1px solid var(--accent); color: #fff; border-radius: var(--r-s);
}
.tm .chat-send svg { width: 17px; height: 17px; }
.tm .chat-send:hover { background: color-mix(in srgb, var(--accent) 82%, black); }
.tm .chat-input:placeholder-shown + .chat-send { background: transparent; border-color: transparent; color: var(--ds-icon); }

/* Schmales Fenster: Unterhaltungen als Leiste ueber dem Verlauf (Avatar und Name), wie
   Teams bei halber Bildschirmbreite. Vorher verschwand die Liste, und wer zwei Fenster
   nebeneinander hatte, kam an die anderen Unterhaltungen nicht mehr heran. */
/* Die Karte selbst ist der Container tm und laesst sich darin nicht umstellen; die
   Richtung haengt deshalb am Fenster (wz, siehe unten). */
@container wz (max-width: 700px) {
  .chat-card.chat-mehr.tm { flex-direction: column; }
}
@container tm (max-width: 700px) {
  .tm .chat-threads {
    width: auto; flex-direction: row; align-items: center;
    border-right: 0; border-bottom: 1px solid var(--ds-border-subtle);
  }
  .tm-side-kopf { order: 2; height: 48px; padding: 0 var(--sp-2); }
  .tm-side-titel { display: none; }
  .tm-filterhinweis { order: 1; margin: 0 0 0 var(--sp-2); flex-shrink: 0; }
  .tm-faeden {
    display: flex; gap: 2px; flex: 1; min-width: 0;
    overflow-x: auto; overflow-y: hidden; padding: 6px var(--sp-2);
    scrollbar-width: thin;
  }
  .tm .chat-thread { flex: 0 0 auto; width: auto; margin: 0; padding: 4px 10px 4px 4px; gap: var(--sp-2); }
  .tm .chat-thread .ds-avatar { width: 28px; height: 28px; font-size: var(--fs-xs); }
  .tm .chat-thread-txt { flex: 0 1 auto; }
  .tm .chat-thread-letzte, .tm .chat-thread-zeit { display: none; }
  /* Zaehler ungelesener Nachrichten bleibt sichtbar, oben am Avatar */
  .tm .chat-thread { position: relative; }
  .tm .chat-thread-zeile + .chat-thread-zeile { position: absolute; top: 0; left: 22px; }
  .tm .chat-thread.aktiv, .tm .chat-thread.aktiv:hover { box-shadow: inset 0 -2px 0 var(--accent); }
  .tm.tm-einzeln .chat-threads { display: none; }
  .tm .chat-head { padding: 0 var(--sp-4); }
  .tm .chat-log { padding: var(--sp-4) var(--sp-4) var(--sp-3); }
  .tm .chat-bubble, .tm-me { max-width: 88%; }
  .tm .chat-input-row { padding: var(--sp-2) var(--sp-4) var(--sp-3); }
}

/* ================= Zwei Fenster nebeneinander (Container wz) =================
   Jedes Werkzeugfenster ist ein Container "wz". Massstab ist die Breite des Fensters,
   nicht die des Bildschirms: Bei zwei angedockten Fenstern hat jedes gut 600 px
   (1366 x 768) bis 950 px (1920 x 1080). Die Regeln hier gelten fuer alle
   Fachwerkzeuge; was ein Werkzeug darueber hinaus braucht, steht in seiner Datei.
   Gewuenscht ist der Container am Fensterrumpf in workspace.css (.ws-app); bis dahin
   steht er hier. */
.ws-app { container: wz / inline-size; }

/* Werkzeugkopf: Suche und Reiter rutschen in eine eigene Zeile unter Marke und Zustand,
   statt sich mit dem Zustand rechts zu ueberlagern. Ein Signatur-Slot nur mit
   Umgebungs-Badge bleibt in der ersten Zeile. Der Zeilenumbruch ist fest (::before als
   volle Zeile), damit die Leiste beim Ziehen der Fensterbreite nicht springt. */
@container wz (max-width: 900px) {
  .ds-toolhead { flex-wrap: wrap; row-gap: 0; }
  .ds-toolhead-brand { flex: 1 1 auto; }
  .ds-toolhead-right { gap: var(--sp-4); }
  .thead-right + .thead-user { margin-left: var(--sp-3); padding-left: var(--sp-3); }
  .ds-toolhead:has(.ds-toolhead-search, .ds-toolhead-tabs)::before { content: ''; order: 9; flex: 0 0 100%; height: 0; }
  .ds-toolhead-sig:has(.ds-toolhead-search, .ds-toolhead-tabs) {
    order: 10; flex: 1 1 100%; margin: var(--sp-2) 0 0;
  }
  .ds-toolhead-sig:has(.ds-toolhead-search, .ds-toolhead-tabs) .ds-toolhead-search { max-width: none; }
  .ds-toolhead-sig:not(:has(.ds-toolhead-search, .ds-toolhead-tabs)) { flex: 0 0 auto; }
  /* Reiter in der zweiten Zeile: buendig zum Rand, unten auf der Akzentlinie */
  .ds-toolhead-sig:has(.ds-toolhead-tabs) { align-self: stretch; margin-bottom: calc(-1 * var(--sp-2)); }
  .ds-toolhead-sig .ds-toolhead-tabs {
    margin: 0 0 0 calc(-1 * var(--sp-3)); min-height: 36px;
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  }
  .ds-toolhead-sig .ds-toolhead-tab { flex-shrink: 0; white-space: nowrap; }
}
/* Sehr schmal: Der Zustand rechts wandert in die zweite Zeile, damit Name und Konto in
   der ersten Platz haben. Mit Suche oder Reitern steht er rechts daneben, sonst unter
   dem Namen. */
@container wz (max-width: 620px) {
  .ds-toolhead:has(.ds-toolhead-right)::before { content: ''; order: 9; flex: 0 0 100%; height: 0; }
  .ds-toolhead-right { order: 11; margin-top: var(--sp-2); gap: var(--sp-4); }
  .ds-toolhead-sig:has(.ds-toolhead-search, .ds-toolhead-tabs) { flex: 1 1 220px; }
  .ds-toolhead:has(.ds-toolhead-search, .ds-toolhead-tabs) .ds-toolhead-right { margin-left: auto; padding-left: var(--sp-3); }
  .ds-toolhead:not(:has(.ds-toolhead-search, .ds-toolhead-tabs)) .ds-toolhead-right { flex: 1 1 100%; justify-content: flex-start; margin-left: calc(30px + var(--sp-3)); }
  .ds-toolhead:not(:has(.ds-toolhead-search, .ds-toolhead-tabs)) .ds-toolhead-meta { align-items: flex-start; }
  .thead-right + .thead-user { margin-left: auto; padding-left: 0; border-left: 0; }
  .ds-toolhead-sig:not(:has(.ds-toolhead-search, .ds-toolhead-tabs)) { margin-left: 0; }
}

/* Befehlsleisten: einzeilig mit Beschriftung, solange Platz ist; im schmalen Fenster
   brechen sie geordnet um (Gruppen bleiben zusammen), statt aus dem Fenster zu laufen. */
@container wz (max-width: 900px) {
  .ds-cmdbar { row-gap: 4px; }
  .ds-toolbar { flex-wrap: wrap; row-gap: var(--sp-2); }
}

/* Posteingang schmal: Lesebereich unter der Liste (wie Outlook mit Lesebereich unten),
   Absenderzeile bricht geordnet um. */
@container mbox (max-width: 640px) {
  .ol-main { flex-direction: column; }
  .ol .mbox-liste { width: auto; flex: 0 0 auto; max-height: 40%; border-right: 0; border-bottom: 1px solid var(--ds-border); }
  .ol .mbox-liste-kopf { height: 44px; }
  .ol .mbox-lesen { min-height: 0; }
  .ol .mail-app-card { padding: var(--sp-4) var(--sp-4) var(--sp-6); }
  .ol .mail-subject { font-size: var(--fs-l); }
  .ol .mail-absender { flex-wrap: wrap; align-items: flex-start; }
  .ol .mail-absender-txt { flex: 1 1 200px; }
  .ol-msg-rechts { order: 3; flex-basis: 100%; padding: 0 0 0 calc(40px + var(--sp-3)); }
  .ol-brand { gap: 6px; }
  .ol-brand > span { display: none; }
  .ol-top { gap: var(--sp-3); }
}