/*
 * Workspace-Hülle: simulierter Arbeitsplatz mit Desktop, Fenstern und Taskleiste.
 * Ein Lab-Widget hostet darin mehrere Werkzeuge (SIEM, Verzeichnis, IAM, Mail, ...),
 * zwischen denen die Teilnehmer wie an einem echten Arbeitsplatz wechseln.
 *
 * Alle Werte kommen aus design.css: helle Fenster auf ruhigem Desktop, dunkle Huelle
 * (Titelleiste, Taskleiste, Startmenue, Glocke, Toasts) aus dem Shell-Set. Die Werkzeuge
 * behalten ihren Charakter (hell oder dunkel) innerhalb des Fensters.
 */

.ws {
  /* Bezugsrahmen fuer das Startmenue und die Fenster: ohne position:relative haengt das
     absolut positionierte Startmenue am Viewport statt am Desktop. */
  position: relative;
  border: 1px solid var(--ds-border-strong);
  border-radius: var(--r-m);
  overflow: hidden;
  background: var(--ds-bg-app);
  box-shadow: var(--sh-3);
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  color: var(--ds-text);

  /* Fuellt, was .container.wide uebrig laesst (Flexbox, siehe style.css).
     min-height als Untergrenze: darunter wird die Fensterverwaltung unbedienbar.
     420: Auf einem Laptop mit 1366 x 768 bleiben unter Browserleiste und Kopfzeile rund
     600 px; eine hoehere Untergrenze liess die Seite senkrecht rollen. */
  flex: 1;
  min-height: 420px;
}

/* Kompakt: Der Desktop ist niedriger als 640 px (Laptop in Zoom) oder der Trainer hat
   den Modus fuer die Bildschirmfreigabe eingeschaltet. workspace.js setzt die Klasse
   und oeffnet Fenster dann in voller Desktopgroesse, eines sichtbar, Wechsel ueber die
   Taskleiste. Die Symbolspalte und das Startmenue ruecken enger zusammen. */
.ws.kompakt .ws-icons { gap: 2px 4px; }
.ws.kompakt .ws-icon { padding: 3px 2px; gap: 2px; width: 104px; }
.ws.kompakt .ws-icon-tile { width: 28px; height: 28px; border-radius: 8px; }
.ws.kompakt .ws-icon-tile svg { width: 16px; height: 16px; }

/* ---------- Systemleiste: Marke und Host links, Benutzer und Vorgangszeit rechts ----------
   Workplace V3: schmal und dunkel wie die Kopfleiste eines verwalteten Arbeitsplatzes. */
.ws-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 34px;
  background: #0a111d;
  color: var(--ds-shell-text);
  padding: 0 var(--sp-3) 0 var(--sp-3);
  font-size: var(--fs-s);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}
.ws-titlebar-left, .ws-titlebar-right { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ws-titlebar-left strong { font-weight: var(--fw-semibold); letter-spacing: 0.01em; color: #f1f5f9; }
.ws-brandmark { display: inline-flex; width: 18px; height: 18px; }
.ws-brandmark svg { width: 18px; height: 18px; }
.ws-net {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 9px 0 7px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.05); color: var(--ds-shell-text-dim);
  font-size: var(--fs-xs);
}
.ws-net svg { width: 13px; height: 13px; color: #34d399; }
.ws-userchip { display: inline-flex; align-items: center; gap: 7px; color: var(--ds-shell-text-dim); }
.ws-user { color: var(--ds-shell-text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.ws-userav {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #14b8a6, #3b82f6); color: #fff;
  font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: 0.02em;
}
.ws-clock {
  font-family: var(--font-mono); color: #e2e8f0; font-variant-numeric: tabular-nums;
  padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, 0.08);
}

/* ---------- Desktop: Hintergrund in den Hausfarben der Recplast ---------- */
.ws-desktop {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: var(--ds-wallpaper);
}

/* Zeichen und Firmenname unten rechts, wie ein Unternehmenshintergrund. */
.ws-wallmark {
  position: absolute; right: 34px; bottom: 26px;
  display: flex; align-items: center; gap: 12px;
  color: rgba(255, 255, 255, 0.78);
  pointer-events: none; user-select: none;
}
.ws-wallmark-zeichen { display: inline-flex; width: 36px; height: 36px; opacity: 0.92; }
.ws-wallmark-zeichen svg { width: 36px; height: 36px; }
.ws-wallmark-txt { display: flex; flex-direction: column; gap: 1px; line-height: 1.2; }
.ws-wallmark-txt strong { font-size: var(--fs-m); font-weight: var(--fw-semibold); color: rgba(255, 255, 255, 0.86); letter-spacing: 0.01em; }
.ws-wallmark-txt span { font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.62); letter-spacing: 0.04em; text-transform: uppercase; }

/* Grosse Uhr oben rechts: die Vorgangszeit, wie auf einem Sperrbildschirm. */
.ws-deskclock {
  position: absolute; top: 26px; right: 38px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  color: #fff; pointer-events: none; user-select: none;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}
.ws-dc-zeit { font-size: var(--fs-display); font-weight: 300; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.ws-dc-datum { font-size: var(--fs-m); color: rgba(255, 255, 255, 0.74); }

/* Vorschau beim Andocken eines gezogenen Fensters. */
.ws-snapvorschau {
  position: absolute; z-index: 9;
  border-radius: var(--r-win);
  background: rgba(96, 165, 250, 0.16);
  border: 1px solid rgba(147, 197, 253, 0.55);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  pointer-events: none;
  transition: left var(--dur-1) var(--ease), top var(--dur-1) var(--ease), width var(--dur-1) var(--ease), height var(--dur-1) var(--ease);
}

/* Startsymbole auf dem Desktop: von hier werden Werkzeuge geoeffnet. */
.ws-icons {
  position: absolute;
  inset: 14px auto 14px 12px;
  display: flex;
  flex-direction: column;
  /* Passt die Hoehe nicht, bricht die Spalte in eine zweite um, statt unten abzuschneiden.
     workspace.js misst die Breite der Symbolflaeche und legt die Fenster rechts davon an. */
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 6px 6px;
  max-width: 232px;
  z-index: 1;
}
.ws-icon {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  /* 110 px: "Verzeichnisdienst" passt in 12 px auf eine Zeile. */
  width: 110px;
  height: auto;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-m);
  padding: 8px 2px 7px;
  cursor: pointer;
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  margin: 0;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.ws-icon:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.12); }
.ws-icon:active { background: rgba(255, 255, 255, 0.14); }
.ws-icon:focus-visible { outline: 2px solid #93c5fd; outline-offset: 1px; }
.ws-icon-tile {
  position: relative;
  width: 42px; height: 42px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-m);
  font-weight: var(--fw-bold);
  color: #fff;
  overflow: hidden;
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition: transform var(--dur-1) var(--ease);
}
/* Glanz von oben: macht aus der Farbflaeche ein Programmsymbol. */
.ws-icon-tile::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0) 52%, rgba(0, 0, 0, 0.12));
  pointer-events: none;
}
.ws-icon-tile svg { width: 22px; height: 22px; position: relative; z-index: 1; }
.ws-icon:hover .ws-icon-tile { transform: translateY(-1px) scale(1.03); }
.ws-icon-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: #f1f5f9;
  line-height: 1.25;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  hyphens: auto;
  overflow-wrap: break-word;
  max-width: 100%;
}
.ws-icon-badge {
  position: absolute;
  top: 3px; right: 22px;
  background: #ef4444;
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  min-width: 18px; height: 18px;
  border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center;
  padding: 0 5px;
  box-shadow: 0 0 0 2px #0f1c30, 0 2px 6px rgba(0, 0, 0, 0.4);
  z-index: 2;
}

/* ---------- Fenster ---------- */
.ws-win {
  position: absolute;
  left: 98px; top: 20px;
  display: flex;
  flex-direction: column;
  /* Breite und Position setzt workspace.js (fit). Die HOEHE deckelt CSS zusaetzlich:
     Beim Oeffnen waehrend der Konstruktion steht die Flex-Hoehe des Desktops noch nicht
     fest; fit() rechnete dann mit einem zu grossen Wert. */
  max-height: calc(100% - 16px);
  background: var(--ds-bg-surface);
  border: 0;
  border-radius: var(--r-win);
  box-shadow: var(--sh-win);
  overflow: hidden;
  z-index: 10;
  transition: box-shadow var(--dur-2) var(--ease);
}
.ws-win[hidden] { display: none; }
.ws-win.focused { box-shadow: var(--sh-win-focus); }
.ws-win.ws-auf { animation: ws-win-in 220ms var(--ease-out) both; }
@keyframes ws-win-in { from { opacity: 0; transform: translateY(8px) scale(0.975); } to { opacity: 1; transform: none; } }

.ws-win-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  height: 40px;
  background: #eef1f5;
  border-bottom: 1px solid var(--ds-border-subtle);
  padding: 0 0 0 var(--sp-3);
  cursor: default;
  user-select: none;
  flex-shrink: 0;
  transition: background var(--dur-2) var(--ease);
}
.ws-win.focused .ws-win-bar { background: var(--ds-bg-surface); }
.ws-win-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-s);
  font-weight: var(--fw-semibold);
  color: var(--ds-text-3);
  font-family: var(--font-sans);
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ws-win-name { overflow: hidden; text-overflow: ellipsis; }
.ws-win.focused .ws-win-title { color: var(--ds-text); }
.ws-win-icon {
  width: 22px; height: 22px;
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-xs); font-weight: var(--fw-bold); color: #fff;
  flex-shrink: 0; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(15, 23, 42, 0.2);
  opacity: 0.75;
  transition: opacity var(--dur-2) var(--ease);
}
.ws-win.focused .ws-win-icon { opacity: 1; }
.ws-win-icon svg { width: 13px; height: 13px; stroke-width: 2.3; }
.ws-win-btns { display: flex; gap: 0; align-self: stretch; }
.ws-win-btn {
  width: 46px; height: 100%;
  border: none;
  background: transparent;
  color: var(--ds-text-2);
  border-radius: 0;
  cursor: pointer;
  font-size: var(--fs-l);
  line-height: 1;
  margin: 0;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.ws-win-btn svg { width: 15px; height: 15px; stroke-width: 1.6; }
.ws-win-btn:hover { background: rgba(15, 23, 42, 0.06); color: var(--ds-text); }
.ws-win-btn:focus-visible { outline: var(--focus-outline); outline-offset: -2px; }
.ws-win-close:hover { background: #c42b1c; color: #fff; }

.ws-win-body {
  flex: 1;
  overflow: auto;
  padding: var(--sp-3);
  background: var(--ds-bg-muted);
}
.ws-app { display: block; }

/* Werkzeuge, die ihr Scrollen selbst regeln (app.fill = true): von Kante zu Kante. */
.ws-body-fill { overflow: hidden; padding: 0; background: var(--ds-bg-surface); }
.ws-app-fill { height: 100%; }

/* ---------- Taskleiste ---------- */
.ws-taskbar {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 52px;
  background: rgba(10, 16, 28, 0.94);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 -10px 30px -12px rgba(0, 0, 0, 0.5);
  padding: 0 var(--sp-2);
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}
.ws-tb-sep { width: 1px; height: 26px; background: rgba(255, 255, 255, 0.10); margin: 0 6px; flex-shrink: 0; }
/* Startknopf: das vertraute Zeichen unten links. Von hier kommt man ueberall hin. */
.ws-startbtn {
  display: inline-flex; align-items: center; gap: 9px;
  height: 40px;
  background: transparent; border: 1px solid transparent;
  border-radius: var(--r-m); padding: 0 var(--sp-3) 0 9px;
  color: #f1f5f9; font-size: var(--fs-m); font-family: var(--font-sans);
  cursor: pointer; margin: 0;
  transition: background var(--dur-1) var(--ease);
}
.ws-startbtn:hover { background: rgba(255, 255, 255, 0.08); }
.ws-startbtn:focus-visible { outline: 2px solid #93c5fd; outline-offset: 1px; }
.ws-startbtn.auf { background: rgba(255, 255, 255, 0.13); color: #fff; }
.ws-startbtn-mark { display: inline-flex; transition: transform var(--dur-2) var(--ease); }
.ws-startbtn-mark svg { width: 24px; height: 24px; }
.ws-startbtn:hover .ws-startbtn-mark { transform: scale(1.06); }
.ws-startbtn-lbl { font-weight: var(--fw-semibold); }

.ws-tray { margin-left: auto; display: flex; align-items: center; gap: 2px; flex-shrink: 0; height: 100%; }

/* Ein Fenster (Kompaktmodus von Hand): Fenster oeffnen maximiert, eines ist sichtbar.
   Nur als Symbol mit Tooltip; derselbe Schalter steht im Desktopmenue. */
.ws-modebtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 38px;
  background: transparent; border: 1px solid transparent;
  border-radius: var(--r-m); padding: 0;
  color: var(--ds-shell-text-dim);
  cursor: pointer; flex-shrink: 0; margin: 0;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.ws-modebtn svg { width: 16px; height: 16px; }
.ws-modebtn:hover { background: rgba(255, 255, 255, 0.08); color: #f1f5f9; }
.ws-modebtn:focus-visible { outline: 2px solid #93c5fd; outline-offset: 1px; }
.ws-modebtn.an { color: #fff; background: rgba(59, 130, 246, 0.28); }

/* Vollbild des Browsers (Fullscreen-API) */
.ws-fsbtn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 38px;
  background: transparent; border: 1px solid transparent;
  border-radius: var(--r-m); padding: 0 var(--sp-3);
  color: var(--ds-shell-text-dim); font-size: var(--fs-s); font-family: var(--font-sans);
  cursor: pointer; flex-shrink: 0; margin: 0;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.ws-fs-ic { display: inline-flex; }
.ws-fsbtn svg { width: 15px; height: 15px; }
.ws-fsbtn:hover { background: rgba(255, 255, 255, 0.08); color: #f1f5f9; }
.ws-fsbtn:focus-visible { outline: 2px solid #93c5fd; outline-offset: 1px; }
.ws-fsbtn.an { color: #fff; background: rgba(255, 255, 255, 0.10); }

/* Desktop anzeigen: der schmale Streifen ganz rechts, wie unter Windows. */
.ws-showdesk {
  align-self: stretch; width: 8px; margin: 6px 0 6px 6px; padding: 0;
  background: transparent; border: 0; border-left: 1px solid rgba(255, 255, 255, 0.14);
  cursor: pointer; border-radius: 0;
}
.ws-showdesk:hover { background: rgba(255, 255, 255, 0.10); }

/* ---------- Startmenue: steigt ueber der Taskleiste auf, links unten ---------- */
.ws-startmenu {
  position: absolute;
  left: 10px; bottom: 62px;   /* ueber der 52 px hohen Taskleiste, mit Luft */
  width: min(760px, calc(100% - 20px));
  /* Bezug ist der Desktop, nicht eine feste Zahl: Bei 768 px Hoehe muessen alle acht
     Module stehen. */
  max-height: calc(100% - 72px);
  display: flex; flex-direction: column;
  background: rgba(16, 24, 38, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(24px) saturate(1.3);
  overflow: hidden;
  z-index: 9000;
  animation: ws-rise var(--dur-3) var(--ease-out) both;
}
@keyframes ws-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.ws-startmenu.einspaltig { width: min(400px, calc(100% - 20px)); }
.ws-sm-head { padding: 18px 20px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); flex-shrink: 0; }
.ws-sm-headrow { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.ws-sm-titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ws-sm-title { display: block; font-size: var(--fs-xl); font-weight: var(--fw-semibold); color: #f8fafc; letter-spacing: var(--ls-tight); }
.ws-sm-sub { display: block; font-size: var(--fs-s); color: var(--ds-shell-text-dim); }
.ws-sm-search {
  display: inline-flex; align-items: center; gap: 8px;
  width: 240px; height: 34px; padding: 0 10px; margin: 0;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.10); border-radius: var(--r-m);
  color: var(--ds-shell-text-dim); cursor: text;
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.ws-sm-search:focus-within { border-color: #60a5fa; background: rgba(255, 255, 255, 0.09); }
.ws-sm-search svg { width: 15px; height: 15px; flex-shrink: 0; }
.ws-sm-search input {
  flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0;
  background: transparent; border: 0; outline: none; box-shadow: none;
  color: #f1f5f9; font-family: inherit; font-size: var(--fs-m);
}
.ws-sm-search input::placeholder { color: var(--ds-shell-text-dim); }
.ws-sm-progress { display: block; height: 4px; margin-top: 14px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.ws-sm-progress > span { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #14b8a6, #3b82f6); transition: width var(--dur-3) var(--ease); }
/* Zwei Spalten, spaltenweise gefuellt (B bis E links, F bis I rechts). Die Zeilenzahl
   setzt workspace.js aus der Modulzahl; overflow-y bleibt als Rueckfallebene. */
.ws-sm-list {
  overflow-y: auto; padding: 10px 12px 12px; min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: column;
  gap: 4px 10px;
}
.ws-startmenu.einspaltig .ws-sm-list { grid-template-columns: minmax(0, 1fr); }
.ws-sm-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left; height: auto;
  background: transparent; border: 1px solid transparent;
  border-radius: 10px; padding: 10px 12px; margin: 0;
  cursor: pointer; font-family: inherit; font-weight: var(--fw-regular);
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.ws-sm-item.weg { display: none; }
.ws.kompakt .ws-sm-item { padding: 5px 8px; gap: 9px; }
.ws.kompakt .ws-sm-block { width: 28px; height: 28px; }
.ws.kompakt .ws-sm-head { padding: 10px 14px 8px; }
.ws.kompakt .ws-sm-foot { padding: 8px 14px; }
.ws.kompakt .ws-sm-progress { margin-top: 8px; }
.ws-sm-item:hover { background: rgba(255, 255, 255, 0.06); }
.ws-sm-item:focus-visible { outline: 2px solid #60a5fa; outline-offset: -2px; }
.ws-sm-item.hier { background: rgba(59, 130, 246, 0.14); border-color: rgba(96, 165, 250, 0.35); }
.ws-sm-block {
  position: relative;
  width: 38px; height: 38px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, #334155, #1e293b); color: #e2e8f0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px; font-weight: var(--fw-bold); font-size: var(--fs-l);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 4px 10px -4px rgba(0, 0, 0, 0.5);
}
.ws-sm-item.hier .ws-sm-block { background: linear-gradient(140deg, #3b82f6, #1d4ed8); color: #fff; border-color: transparent; }
.ws-sm-item.ton-ok .ws-sm-block { background: linear-gradient(140deg, #10b981, #047857); color: #fff; border-color: transparent; }
.ws-sm-item.ton-warn .ws-sm-block { background: linear-gradient(140deg, #f59e0b, #b45309); color: #fff; border-color: transparent; }
.ws-sm-item.ton-bad .ws-sm-block { background: linear-gradient(140deg, #ef4444, #b91c1c); color: #fff; border-color: transparent; }
.ws-sm-haken {
  position: absolute; right: -5px; bottom: -5px;
  width: 17px; height: 17px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #f8fafc; color: #0f172a; box-shadow: 0 0 0 2px rgba(16, 24, 38, 0.96);
}
.ws-sm-haken svg { width: 11px; height: 11px; stroke-width: 3; }
.ws-sm-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ws-sm-name { font-size: var(--fs-m); font-weight: var(--fw-semibold); color: #f1f5f9; line-height: 1.3; }
.ws-sm-verdict {
  font-size: var(--fs-xs); color: var(--ds-shell-text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ws-sm-chip {
  flex-shrink: 0;
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  border-radius: var(--r-pill); padding: 2px 9px;
  background: rgba(255, 255, 255, 0.06); color: var(--ds-shell-text-dim);
}
.ws-sm-chip.aktiv { background: rgba(59, 130, 246, 0.22); color: #bfdbfe; }
.ws-sm-chip.fertig { background: rgba(255, 255, 255, 0.08); color: #e2e8f0; }
.ws-sm-foot {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 12px 20px; border-top: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(0, 0, 0, 0.16);
  font-size: var(--fs-s); color: var(--ds-shell-text);
  flex-shrink: 0;
}
.ws-sm-foot-txt { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.ws-sm-foot-txt .ws-userav { width: 28px; height: 28px; }
.ws-sm-leave {
  flex-shrink: 0; height: 32px;
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: 0;
  border-radius: var(--r-m); padding: 0 var(--sp-3);
  color: var(--ds-shell-text-dim); font-size: var(--fs-s); cursor: pointer; font-family: inherit; margin: 0;
  font-weight: var(--fw-medium);
}
.ws-sm-leave svg { width: 15px; height: 15px; }
.ws-sm-leave:hover { background: rgba(255, 255, 255, 0.08); color: #f1f5f9; }

/* ---------- Auswertung: Analyse und Urteil als maximiertes Fenster ---------- */
.aus-fenster { display: flex; flex-direction: column; height: 100%; overflow-y: auto; background: var(--ds-bg-muted); }
.aus-analyse { flex-shrink: 0; }
.aus-urteil { flex-shrink: 0; padding: 0 var(--sp-6) var(--sp-8); max-width: 920px; margin: 0 auto; width: 100%; box-sizing: border-box; }

/* Das Urteil hat seinen Ton: gruen wenn sauber, bernstein bei wenigen, rot bei
   mehreren Feststellungen. Das Bucket-Label sagt das Urteil, die Farbe begleitet. */
.aus-verdict {
  margin: var(--sp-6) 0 var(--sp-3);
  padding: var(--sp-5) var(--sp-6);
  background: var(--ds-bg-surface);
  border: var(--bd);
  border-left: 4px solid var(--ds-gray-500);
  border-radius: var(--r-l);
  box-shadow: var(--sh-2);
}
.aus-verdict.tone-ok   { border-left-color: var(--ds-ok); }
.aus-verdict.tone-warn { border-left-color: var(--ds-warn); }
.aus-verdict.tone-bad  { border-left-color: var(--ds-bad); }
.aus-verdict-kicker {
  display: block;
  font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-caps);
  color: var(--ds-text-3);
}
.aus-verdict h2 { margin: 4px 0 0; font-size: var(--fs-xl); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); color: var(--ds-text); }
.aus-verdict.tone-ok   h2 { color: var(--ds-ok-text); }
.aus-verdict.tone-warn h2 { color: var(--ds-warn-text); }
.aus-verdict.tone-bad  h2 { color: var(--ds-bad-text); }
.aus-verdict-lead { margin: var(--sp-3) 0 0; font-size: var(--fs-l); line-height: var(--lh-relaxed); color: var(--ds-text-2); }
.aus-verdict-outcome { margin: var(--sp-2) 0 0; font-size: var(--fs-m); font-weight: var(--fw-semibold); color: var(--ds-text-2); }

/* Aufklappbare Abschnitte: nativ, tastaturbedienbar, ohne JS. */
.aus-block {
  background: var(--ds-bg-surface);
  border: var(--bd);
  border-radius: var(--r-m);
  margin-bottom: var(--sp-3);
  overflow: hidden;
}
.aus-block > summary {
  list-style: none; cursor: pointer;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-m); font-weight: var(--fw-semibold); color: var(--ds-text);
  display: flex; align-items: center; gap: var(--sp-2);
}
.aus-block > summary::-webkit-details-marker { display: none; }
.aus-block > summary::after {
  content: ''; margin-left: auto; width: 8px; height: 8px;
  border-right: 2px solid var(--ds-text-3); border-bottom: 2px solid var(--ds-text-3);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--dur-2) var(--ease);
}
.aus-block[open] > summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.aus-block > summary:hover { background: var(--ds-bg-hover); }
.aus-count {
  background: var(--ds-bg-sunken); color: var(--ds-text-2);
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  border-radius: var(--r-pill); padding: 2px 8px;
}
.aus-findings { list-style: none; margin: 0; padding: 4px var(--sp-4) var(--sp-4); }
.aus-findings li {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  padding: 9px 0;
  border-top: var(--bd-subtle);
  font-size: var(--fs-m); line-height: var(--lh-base); color: var(--ds-text-2);
}
.aus-findings li:first-child { border-top: none; }
.aus-find-dot {
  flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; margin-top: 7px;
  background: var(--ds-gray-500);
}
.aus-find-dot.tone-ok { background: var(--ds-ok); }
.aus-find-dot.tone-warn { background: var(--ds-warn); }
.aus-find-dot.tone-bad { background: var(--ds-bad); }
.aus-howto { padding: 2px var(--sp-4) var(--sp-4); }
.aus-howto p { margin: 0 0 10px; font-size: var(--fs-m); line-height: var(--lh-relaxed); color: var(--ds-text-2); }
.aus-metriken { display: flex; flex-wrap: wrap; gap: 6px var(--sp-5); margin-top: var(--sp-3); padding-top: var(--sp-2); border-top: var(--bd-subtle); }
.aus-metrik { display: inline-flex; align-items: baseline; gap: 6px; }
.aus-metrik span { font-size: var(--fs-s); color: var(--ds-text-3); }
.aus-metrik strong { font-size: var(--fs-m); color: var(--ds-text); font-variant-numeric: tabular-nums; }

.aus-next {
  padding: var(--sp-4) var(--sp-5);
  background: var(--ds-bg-surface);
  border: var(--bd);
  border-radius: var(--r-l);
}
.aus-next-stand { font-size: var(--fs-s); color: var(--ds-text-3); margin-bottom: var(--sp-3); }
.aus-next-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
/* Knoepfe der Auswertung: dieselbe Form wie .ds-btn (Module nutzen die Klasse ebenfalls). */
.aus-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  height: 34px; padding: 0 var(--sp-4);
  background: var(--ds-bg-surface); color: var(--ds-text); border: var(--bd-strong);
  border-radius: var(--r-s); font-size: var(--fs-m); font-weight: var(--fw-medium); cursor: pointer; font-family: inherit;
  margin: 0; white-space: nowrap;
  box-shadow: 0 1px 1px rgba(19, 26, 33, 0.04);
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.aus-btn:hover { background: var(--ds-bg-hover); border-color: var(--ds-gray-400); }
.aus-btn:focus-visible { outline: var(--focus-outline); outline-offset: 1px; }
.aus-btn.primary { background: var(--ds-primary); color: #fff; border-color: var(--ds-primary); }
.aus-btn.primary:hover { background: var(--ds-primary-hover); border-color: var(--ds-primary-hover); }
.aus-btn.ghost { background: transparent; border-color: transparent; color: var(--ds-text-2); box-shadow: none; }
.aus-btn.ghost:hover { background: var(--ds-bg-hover); }
.aus-next-hint { margin: var(--sp-3) 0 0; font-size: var(--fs-s); color: var(--ds-text-3); }

/* ---------- Leer-Desktop (nur noch fuer Aufrufer mit welcome-Option) ---------- */
.ws-welcome {
  position: absolute; inset: 0 0 0 min(56%, 760px);
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-6);
}
.ws-welcome-card {
  max-width: 440px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  padding: var(--sp-8) var(--sp-8) var(--sp-6);
  background: rgba(255, 255, 255, 0.92);
  border-radius: var(--r-l);
  box-shadow: var(--sh-win-focus);
}
.ws-welcome-mark { display: inline-flex; color: var(--ds-primary); margin-bottom: var(--sp-1); }
.ws-welcome-mark svg { width: 40px; height: 40px; stroke-width: 1.6; }
.ws-welcome-card h2 { margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); color: var(--ds-text); }
.ws-welcome-card p { margin: 0; font-size: var(--fs-m); line-height: var(--lh-base); color: var(--ds-text-2); }
.ws-welcome-cta {
  margin-top: var(--sp-3); height: 36px;
  background: var(--ds-primary); color: #fff; border: 1px solid var(--ds-primary);
  border-radius: var(--r-s); padding: 0 var(--sp-5);
  font-size: var(--fs-m); font-weight: var(--fw-semibold); cursor: pointer; font-family: inherit;
}

/* ---------- Taskleistenknoepfe: zeigen, was offen ist ---------- */
.ws-tasks { display: flex; align-items: center; gap: 3px; flex-wrap: nowrap; min-width: 0; flex: 1 1 auto; overflow: hidden; }
.ws-tasks.mess .ws-task { flex-shrink: 0; max-width: none; }
.ws-tasks.eng .ws-task { padding: 0 9px; min-width: 0; flex-shrink: 0; }
.ws-tasks.eng .ws-task > span:not(.ws-task-icon):not(.ws-task-badge) { display: none; }
.ws-task {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 40px;
  max-width: 200px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-m);
  padding: 0 12px 0 9px;
  color: #cbd5e1;
  font-size: var(--fs-s);
  font-weight: var(--fw-medium);
  font-family: var(--font-sans);
  cursor: pointer;
  position: relative;
  margin: 0;
  flex-shrink: 1;
  min-width: 44px;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.ws-task > span:not(.ws-task-icon):not(.ws-task-badge) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Laufanzeige unter dem Knopf: breit und blau fuer das Fenster vorn, kurz und grau fuer
   offene, minimierte Fenster. */
.ws-task::after {
  content: ''; position: absolute; left: 50%; bottom: 2px; height: 3px; width: 6px; border-radius: 3px;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.38);
  transition: width var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.ws-task:hover { background: rgba(255, 255, 255, 0.07); color: #f1f5f9; }
.ws-task:focus-visible { outline: 2px solid #93c5fd; outline-offset: 1px; }
.ws-task.active { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: rgba(255, 255, 255, 0.06); }
.ws-task.active::after { width: 18px; background: #60a5fa; }
/* Minimiert: gedaempft, aber lesbar. */
.ws-task.min { color: #94a3b8; }
.ws-task.min::after { width: 6px; background: rgba(255, 255, 255, 0.25); }
.ws-task-icon {
  width: 24px; height: 24px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: #fff;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 2px 6px -2px rgba(0, 0, 0, 0.5);
}
.ws-task-icon svg { width: 14px; height: 14px; stroke-width: 2.3; }
.ws-task-badge {
  position: absolute;
  top: 1px; left: 24px;
  background: #ef4444;
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  min-width: 17px;
  height: 17px;
  border-radius: var(--r-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  box-shadow: 0 0 0 2px #0a101c;
}

/* ---------- Desktop-Benachrichtigung (Toast): Stapel unten rechts ----------
   UAT2: Der Stapel liegt oft ueber Abgabe- und Hauptknoepfen der Werkzeuge (Freigabe in
   C, Fall anlegen in E, Kommentarfeld in B, Senden im Chat in D). Ein Klick auf den
   Toast oeffnete frueher sein Werkzeug und riss den Teilnehmer aus der Arbeit; jetzt
   schliesst ein Klick auf den Toast ihn nur, geoeffnet wird ueber "Oeffnen". Oben rechts
   war keine Loesung: Dort lag er ueber den Fensterknoepfen. */
.ws-toasts {
  /* Workplace V3: oben mittig unter der Systemleiste. Unten rechts lag der Stapel ueber
     den Fusszeilen der Werkzeuge mit ihren Abgabe- und Hauptknoepfen, oben rechts ueber
     den Fensterknoepfen (UAT2). In der Mitte oben liegt nur die Mitte der Fensterleisten
     darunter. Die neueste Meldung steht oben. */
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: min(420px, calc(100% - 24px));
  display: flex;
  flex-direction: column-reverse;
  gap: var(--sp-2);
  z-index: 8000;
  pointer-events: none;
}
.ws-toast {
  pointer-events: auto;
  background: rgba(22, 31, 46, 0.97);
  color: #cbd5e1;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  padding: 10px 12px 12px 14px;
  box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.7), 0 2px 8px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(20px);
  font-size: var(--fs-m);
  cursor: pointer;
  font-family: var(--font-sans);
  animation: ws-toast-down var(--dur-3) var(--ease-out) both;
}
@keyframes ws-toast-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes ws-toast-down { from { opacity: 0; transform: translateY(-14px) scale(0.98); } to { opacity: 1; transform: none; } }
.ws-toast:hover { background: rgba(28, 39, 57, 0.98); }
.ws-toast-knoepfe { display: inline-flex; align-items: center; gap: 4px; }
.ws-toast .ws-toast-auf {
  height: 26px; margin: 0; padding: 0 10px; border-radius: var(--r-s); border: 0;
  background: rgba(255, 255, 255, 0.08); color: #f1f5f9; font-size: var(--fs-xs); font-weight: var(--fw-semibold); cursor: pointer;
}
.ws-toast .ws-toast-auf:hover, .ws-toast .ws-toast-auf:focus-visible { background: #3b82f6; color: #fff; }
.ws-toast-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: 7px; }
.ws-toast-app { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-xs); color: #94a3b8; font-weight: var(--fw-semibold); }
.ws-toast-icon, .ws-np-icon {
  width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.ws-toast-icon svg, .ws-np-icon svg { width: 62%; height: 62%; color: #fff; stroke-width: 2.4; }
.ws-toast-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  background: transparent; border: none; color: #94a3b8; cursor: pointer;
  font-size: var(--fs-l); line-height: 1; padding: 0; margin: 0; border-radius: var(--r-s);
}
.ws-toast-x:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.ws-toast-title { font-weight: var(--fw-semibold); color: #f8fafc; margin-bottom: 2px; font-size: var(--fs-m); }
.ws-toast-sub { color: #cbd5e1; font-size: var(--fs-s); line-height: var(--lh-snug); }

/* ---------- Glocke in der Taskleiste und die Liste dahinter ---------- */
.ws-notibtn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 38px;
  background: transparent; border: 1px solid transparent; border-radius: var(--r-m);
  color: var(--ds-shell-text-dim); cursor: pointer; padding: 0; flex-shrink: 0; margin: 0;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.ws-notibtn svg { width: 17px; height: 17px; }
.ws-notibtn:hover { background: rgba(255, 255, 255, 0.08); color: #f1f5f9; }
.ws-notibtn:focus-visible { outline: 2px solid #93c5fd; outline-offset: 1px; }
.ws-notibtn.auf { background: rgba(255, 255, 255, 0.13); color: #fff; }
.ws-notibtn.neu { color: #fff; }
.ws-notibtn.neu svg { animation: ws-glocke 0.9s var(--ease) 1; transform-origin: 50% 10%; }
@keyframes ws-glocke { 0%, 100% { transform: none; } 20% { transform: rotate(14deg); } 45% { transform: rotate(-10deg); } 70% { transform: rotate(5deg); } }
.ws-noti-badge {
  position: absolute; top: 2px; right: 3px;
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: var(--r-pill);
  background: #ef4444; color: #fff; font-size: var(--fs-xs); font-weight: var(--fw-bold);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px #0a101c;
}
.ws-notipanel {
  position: absolute;
  right: 10px; bottom: 10px;
  width: 380px;
  max-height: calc(100% - 20px);
  display: flex; flex-direction: column;
  background: rgba(16, 24, 38, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(24px);
  overflow: hidden;
  z-index: 9001;
  font-family: var(--font-sans);
  animation: ws-toast-in var(--dur-3) var(--ease-out) both;
}
.ws-np-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: 14px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); flex-shrink: 0;
}
.ws-np-title { font-size: var(--fs-l); font-weight: var(--fw-semibold); color: #f8fafc; }
.ws-np-clear {
  height: 28px;
  background: transparent; border: 0; border-radius: var(--r-s);
  color: #93c5fd; font-size: var(--fs-s); font-weight: var(--fw-medium); padding: 0 var(--sp-2); cursor: pointer; margin: 0; font-family: inherit;
}
.ws-np-clear:hover { background: rgba(255, 255, 255, 0.08); color: #dbeafe; }
.ws-np-list { overflow-y: auto; padding: 8px; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.ws-np-item {
  display: flex; align-items: flex-start; gap: 10px;
  width: 100%; text-align: left; height: auto;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 10px;
  padding: 10px 12px; margin: 0; cursor: pointer; font-family: inherit; font-weight: var(--fw-regular);
  transition: background var(--dur-1) var(--ease);
}
.ws-np-item:hover { background: rgba(255, 255, 255, 0.08); }
.ws-np-icon { margin-top: 1px; }
.ws-np-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ws-np-app { font-size: var(--fs-xs); color: #94a3b8; }
.ws-np-t { font-size: var(--fs-m); font-weight: var(--fw-semibold); color: #f1f5f9; }
.ws-np-s { font-size: var(--fs-s); color: #cbd5e1; line-height: var(--lh-snug); }
.ws-np-leer { padding: var(--sp-8) var(--sp-3); text-align: center; color: #94a3b8; font-size: var(--fs-s); }

/* ---------- Maximieren und Wiederherstellen ---------- */
.ws-max-glyph, .ws-restore-glyph { display: inline-flex; }
.ws-restore-glyph { display: none; }
.ws-win.max .ws-max-glyph { display: none; }
.ws-win.max .ws-restore-glyph { display: inline-flex; }
.ws.kompakt .ws-win-max,
.ws.kompakt .ws-rs,
.ws-win.max .ws-rs { display: none; }
.ws.kompakt .ws-win-bar,
.ws-win.max .ws-win-bar { cursor: default; }
.ws-win.max { border-radius: var(--r-m); }

/* Griffe zum Aendern der Groesse: unsichtbare Streifen am Rand, sichtbar nur am Zeiger. */
.ws-rs { position: absolute; z-index: 3; }
.ws-rs-e { top: 30px; right: 0; bottom: 12px; width: 6px; cursor: ew-resize; }
.ws-rs-s { left: 0; right: 12px; bottom: 0; height: 6px; cursor: ns-resize; }
.ws-rs-se { right: 0; bottom: 0; width: 14px; height: 14px; cursor: nwse-resize; }

/* ---------- Mail-App (Nachricht im Lesebereich) ---------- */
.mail-head { border-bottom: var(--bd-subtle); padding-bottom: var(--sp-3); margin-bottom: var(--sp-4); }
.mail-subject { font-size: var(--fs-l); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); color: var(--ds-text); margin: 0 0 var(--sp-2); }
.mail-meta { font-size: var(--fs-m); color: var(--ds-text-2); }
.mail-meta .mail-from { font-weight: var(--fw-semibold); color: var(--ds-text); }
.mail-body p { font-size: var(--fs-l); line-height: var(--lh-relaxed); color: var(--ds-text); margin: 0 0 var(--sp-3); }
.mail-app-card {
  background: var(--ds-bg-surface);
  border: var(--bd);
  border-radius: var(--r-m);
  padding: var(--sp-5) var(--sp-6);
  max-width: 760px;
  box-shadow: var(--sh-1);
}
.mail-kv { border-collapse: collapse; margin: 4px 0 var(--sp-3); font-size: var(--fs-m); }
.mail-kv td { padding: 4px 0; vertical-align: top; border: 0; }
.mail-kv td:first-child {
  color: var(--ds-text-3);
  width: 110px;
  padding-right: 14px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.mail-body ul { margin: 6px 0 var(--sp-3); padding-left: 20px; font-size: var(--fs-m); line-height: var(--lh-relaxed); }
.mail-body em { color: var(--ds-text-3); font-size: var(--fs-m); }

/* Ein Werkzeug, das beim Bauen geworfen hat. Sichtbar statt raetselhaft leer. */
.ws-app-fehler {
  margin: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid color-mix(in srgb, var(--ds-bad) 30%, transparent);
  border-left: 3px solid var(--ds-bad);
  border-radius: var(--r-s);
  background: var(--ds-bad-soft);
  font-size: var(--fs-m);
  color: var(--ds-bad-text);
}
.ws-app-fehler strong { display: block; margin-bottom: 6px; }
.ws-app-fehler code { font-family: var(--font-mono); font-size: var(--fs-s); color: var(--ds-bad-text); }

/* ---------- Posteingang: Ordner, Liste, Nachricht ---------- */
.mbox {
  display: flex; height: 100%; background: var(--ds-bg-surface); border: var(--bd); border-radius: var(--r-m); overflow: hidden;
  container-type: inline-size; container-name: mbox;
}
.mbox-ordner {
  width: 196px; flex-shrink: 0;
  background: var(--ds-bg-subtle); border-right: var(--bd);
  padding: var(--sp-2); overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px;
}
@container mbox (max-width: 900px) { .mbox-ordner { display: none; } }
.mbox-konto {
  font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--ds-text-3);
  text-transform: uppercase; letter-spacing: var(--ls-caps); padding: 6px 8px 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mbox-ord {
  display: flex; align-items: center; gap: var(--sp-2);
  width: 100%; text-align: left; height: 30px; background: transparent; border: none; border-radius: var(--r-s);
  padding: 0 var(--sp-2); margin: 0; cursor: pointer; font-family: inherit;
  font-size: var(--fs-m); font-weight: var(--fw-regular); color: var(--ds-text-2);
  transition: background var(--dur-1) var(--ease);
}
.mbox-ord:hover { background: var(--ds-bg-active); }
.mbox-ord.aktiv { background: var(--ds-primary-soft); color: var(--ds-primary-text); font-weight: var(--fw-semibold); }
.mbox-ord-icon { display: inline-flex; width: 16px; height: 16px; color: var(--ds-icon); flex-shrink: 0; }
.mbox-ord-icon svg { width: 16px; height: 16px; }
.mbox-ord.aktiv .mbox-ord-icon { color: var(--ds-primary); }
.mbox-ord-name { flex: 1; min-width: 0; }
.mbox-ord-zahl { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--ds-primary-text); background: var(--ds-primary-soft); border-radius: var(--r-pill); padding: 1px 7px; }
.mbox-ord.aktiv .mbox-ord-zahl { background: var(--ds-bg-surface); }
.mbox-liste {
  width: 320px; flex-shrink: 0;
  border-right: var(--bd);
  background: var(--ds-bg-subtle);
  display: flex; flex-direction: column; min-height: 0;
}
.mbox-liste-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  height: 44px; padding: 0 var(--sp-3); border-bottom: var(--bd); background: var(--ds-bg-surface); flex-shrink: 0;
}
.mbox-liste-titel { font-size: var(--fs-m); font-weight: var(--fw-semibold); color: var(--ds-text); }
.mbox-filter { display: inline-flex; gap: 2px; background: var(--ds-bg-sunken); border-radius: var(--r-s); padding: 2px; }
.mbox-filter button {
  height: 24px; background: transparent; border: none; border-radius: var(--r-xs);
  padding: 0 var(--sp-2); margin: 0; cursor: pointer; font-family: inherit;
  font-size: var(--fs-s); font-weight: var(--fw-medium); color: var(--ds-text-3);
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.mbox-filter button.an { color: var(--ds-text); background: var(--ds-bg-surface); box-shadow: var(--sh-1); font-weight: var(--fw-semibold); }
.mbox-items { overflow-y: auto; flex: 1; min-height: 0; }
.mbox-vorschau {
  font-size: var(--fs-s); color: var(--ds-text-3); line-height: var(--lh-snug);
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.mbox-betreff .mbox-flag, .mbox-betreff .mbox-clip {
  display: inline-flex; width: 13px; height: 13px; vertical-align: -2px; margin-right: 3px;
}
.mbox-betreff .mbox-flag { color: var(--ds-bad); }
.mbox-betreff .mbox-clip { color: var(--ds-text-3); }
.mbox-betreff svg { width: 13px; height: 13px; }
.mbox-leer-lesen { margin-top: 40px; }

/* Lesebereich: Absender mit Kuerzel, Adresse und Empfaenger wie im Mailprogramm. */
.mail-absender { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 10px; }
.mail-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: var(--fs-s); font-weight: var(--fw-bold);
}
.mail-absender-txt { display: flex; flex-direction: column; gap: 2px; flex: 1 1 220px; min-width: 0; }
.mail-rolle { color: var(--ds-text-3); }
.mail-adresse { display: block; color: var(--ds-text-3); font-size: var(--fs-s); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-an { font-size: var(--fs-s); color: var(--ds-text-3); }
.mail-zeit { font-size: var(--fs-s); color: var(--ds-text-3); white-space: nowrap; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.mail-anhaenge { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.mail-anhang {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  border: var(--bd); border-radius: var(--r-s); padding: 6px 10px; background: var(--ds-bg-subtle);
  max-width: 260px;
}
.mail-anhang-icon { display: inline-flex; width: 18px; height: 18px; color: var(--ds-primary); flex-shrink: 0; }
.mail-anhang-icon svg { width: 18px; height: 18px; }
.mail-anhang-txt { display: flex; flex-direction: column; min-width: 0; }
.mail-anhang-name { font-size: var(--fs-s); color: var(--ds-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-anhang-gr { font-size: var(--fs-xs); color: var(--ds-text-3); }
.mbox-item {
  display: flex; flex-direction: column; gap: 3px;
  width: 100%; text-align: left; height: auto;
  background: none; border: none;
  border-bottom: var(--bd-subtle);
  box-shadow: inset 2px 0 0 transparent;
  padding: var(--sp-2) var(--sp-3);
  cursor: pointer; font-family: inherit; font-weight: var(--fw-regular); color: var(--ds-text);
  transition: background var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.mbox-item:hover { background: var(--ds-bg-hover); }
.mbox-item:focus-visible { outline: var(--focus-outline); outline-offset: -2px; }
.mbox-item.aktiv { background: var(--ds-bg-surface); box-shadow: inset 2px 0 0 var(--ds-primary); }
.mbox-zeile { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); width: 100%; }
.mbox-von {
  font-size: var(--fs-s); color: var(--ds-text-2); flex: 1; min-width: 0; text-align: left;
  line-height: var(--lh-snug); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mbox-zeit { font-size: var(--fs-xs); color: var(--ds-text-3); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.mbox-betreff {
  text-align: left;
  font-size: var(--fs-m); line-height: var(--lh-snug); color: var(--ds-text);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* Ungelesen: fett und ein Punkt am Rand, wie in jedem Mailprogramm */
.mbox-item.neu .mbox-von,
.mbox-item.neu .mbox-betreff { font-weight: var(--fw-bold); color: var(--ds-text); }
.mbox-item.neu .mbox-zeile::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ds-primary); flex-shrink: 0; align-self: center;
}
.mbox-lesen { flex: 1; overflow-y: auto; min-width: 0; padding: var(--sp-4); background: var(--ds-bg-muted); }
.mbox-lesen .mail-app-card { margin: 0 auto; }
.mbox-leer { padding: var(--sp-6); text-align: center; color: var(--ds-text-3); font-size: var(--fs-m); }

/* ---------- Chat: Kontaktspalte links, Verlauf rechts ---------- */
.chat-card.chat-mehr { display: flex; flex-direction: row; height: 100%; max-width: none; }
.chat-threads {
  width: 240px; flex-shrink: 0;
  border-right: var(--bd);
  background: var(--ds-bg-subtle);
  overflow-y: auto;
}
.chat-thread {
  display: flex; align-items: center; gap: 9px;
  width: 100%; text-align: left; height: auto;
  background: none; border: none;
  box-shadow: inset 2px 0 0 transparent;
  padding: var(--sp-2) 11px;
  cursor: pointer; font-family: inherit; font-weight: var(--fw-regular); color: var(--ds-text);
  transition: background var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.chat-thread:hover { background: var(--ds-bg-hover); }
.chat-thread.aktiv { background: var(--ds-bg-surface); box-shadow: inset 2px 0 0 var(--ds-primary); }
.chat-thread-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.chat-thread-letzte {
  font-size: var(--fs-s); color: var(--ds-text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-thread-badge {
  background: var(--ds-bad-dk); color: #fff;
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  border-radius: var(--r-pill); padding: 1px 6px; flex-shrink: 0;
}
.chat-verlauf { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.chat-mehr .chat-log { flex: 1; }
.ws-app-fill .chat-card { height: 100%; max-width: none; }
.chat-leer { padding: var(--sp-6); text-align: center; color: var(--ds-text-3); font-size: var(--fs-m); }

.chat-card {
  background: var(--ds-bg-surface);
  border: var(--bd);
  border-radius: var(--r-m);
  overflow: hidden;
  max-width: 620px;
  display: flex;
  flex-direction: column;
  height: 500px;
}
.chat-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  height: 52px;
  padding: 0 var(--sp-4);
  border-bottom: var(--bd);
  background: var(--ds-bg-surface);
  flex-shrink: 0;
}
.chat-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--ds-gray-600);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  flex-shrink: 0;
  position: relative;
}
.chat-who { font-weight: var(--fw-semibold); font-size: var(--fs-m); color: var(--ds-text); }
.chat-role { font-size: var(--fs-s); color: var(--ds-text-3); }
.chat-log { flex: 1; overflow-y: auto; padding: var(--sp-4) var(--sp-5); background: var(--ds-bg-muted); }
.chat-msg { display: flex; align-items: flex-start; gap: var(--sp-2); margin-top: var(--sp-3); }
.chat-msg:first-child { margin-top: 0; }
.chat-msg.folge { margin-top: 3px; }
.chat-msg.me { justify-content: flex-end; }
.chat-msg-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: var(--fs-xs); font-weight: var(--fw-bold);
}
.chat-msg.folge .chat-msg-avatar { visibility: hidden; height: 0; }
.chat-bubble {
  max-width: 78%;
  background: var(--ds-bg-surface);
  border: var(--bd);
  border-radius: var(--r-m);
  padding: 8px 12px 9px;
  font-size: var(--fs-m);
  line-height: var(--lh-base);
  color: var(--ds-text);
  box-shadow: var(--sh-1);
}
.chat-msg.me .chat-bubble { background: var(--ds-primary-soft); border-color: color-mix(in srgb, var(--ds-primary) 25%, transparent); }
.chat-msg-kopf { display: flex; align-items: baseline; gap: var(--sp-2); margin-bottom: 2px; }
.chat-msg-name { font-size: var(--fs-s); font-weight: var(--fw-semibold); color: var(--ds-text-2); }
.chat-time { font-size: var(--fs-xs); color: var(--ds-text-3); font-variant-numeric: tabular-nums; }
.chat-msg.me .chat-time { margin-bottom: 2px; text-align: right; }
.chat-praesenz {
  position: absolute; right: -1px; bottom: -1px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--ds-ok-dk); border: 2px solid var(--ds-bg-surface);
}
.chat-thread-zeile { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.chat-thread-zeit { font-size: var(--fs-xs); color: var(--ds-text-3); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.chat-thread.neu .chat-who, .chat-thread.neu .chat-thread-letzte { font-weight: var(--fw-bold); color: var(--ds-text); }
/* Eingabezeile (Schnittstelle 4): nur vorhanden, wenn das Modul onAntwort uebergibt. */
.chat-input-row { display: flex; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-top: var(--bd); background: var(--ds-bg-surface); flex-shrink: 0; }
.chat-input {
  flex: 1; min-width: 0; height: var(--ds-control-h);
  border: var(--bd-strong);
  border-radius: var(--r-s);
  padding: 0 var(--sp-3);
  font-size: var(--fs-m);
  font-family: inherit;
  color: var(--ds-text);
  background: var(--ds-bg-surface);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.chat-input::placeholder { color: var(--ds-gray-500); }
.chat-input:focus { outline: none; border-color: var(--ds-primary); box-shadow: var(--focus-ring); }
.chat-send {
  display: inline-flex; align-items: center; gap: 6px; height: var(--ds-control-h);
  background: var(--ds-primary); color: #fff; border: 1px solid var(--ds-primary); border-radius: var(--r-s);
  padding: 0 var(--sp-3); font-size: var(--fs-m); font-weight: var(--fw-semibold); cursor: pointer; margin: 0;
  font-family: inherit; flex-shrink: 0;
  transition: background var(--dur-1) var(--ease);
}
.chat-send svg { width: 14px; height: 14px; }
.chat-send:hover { background: var(--ds-primary-hover); }
.chat-send:focus-visible { outline: var(--focus-outline); outline-offset: 2px; }

.mail-priority {
  display: inline-flex; align-items: center; height: 20px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ds-bad-text);
  background: var(--ds-bad-soft);
  border-radius: var(--r-xs);
  padding: 0 8px;
  margin-bottom: var(--sp-2);
}

/* SVG-Icons in den Kacheln: die Kachel faerbt, das Icon erbt (currentColor). */
.ws-icon-tile svg,
.ws-win-icon svg,
.ws-task-icon svg {
  width: 62%;
  height: 62%;
  display: block;
  color: #fff;
}
.ws-icon-tile svg { stroke-width: 2; }
.ws-win-icon svg,
.ws-task-icon svg { stroke-width: 2.4; }

/* ---------- Ergebnisse nach dem letzten Modul ---------- */
.bil { max-width: 920px; margin: 0 auto; padding: var(--sp-8) var(--sp-8) var(--sp-10); }
.bil-kopf h2 { margin: 4px 0 var(--sp-2); font-size: var(--fs-xl); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); color: var(--ds-text); }
.bil-kopf p { margin: 0 0 var(--sp-5); color: var(--ds-text-3); font-size: var(--fs-s); line-height: var(--lh-base); }
.bil-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.bil-zeile {
  display: grid; grid-template-columns: 40px 1fr; gap: var(--sp-4); align-items: start;
  padding: var(--sp-4) var(--sp-5); border: var(--bd); border-radius: var(--r-l); background: var(--ds-bg-surface);
  box-shadow: var(--sh-1);
}
.bil-block {
  width: 40px; height: 40px; border-radius: 10px; color: #fff; font-size: var(--fs-l);
  background: linear-gradient(140deg, #64748b, #334155);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 6px 14px -8px rgba(15, 23, 42, 0.6);
  font-weight: var(--fw-bold); display: inline-flex; align-items: center; justify-content: center;
}
.bil-titel { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px var(--sp-3); }
.bil-titel strong { color: var(--ds-text); font-weight: var(--fw-semibold); }
.bil-oeffnen {
  margin: 0 0 0 auto; height: 26px; background: var(--ds-bg-surface); border: var(--bd-strong); border-radius: var(--r-xs);
  padding: 0 var(--sp-2); font-size: var(--fs-s); font-weight: var(--fw-medium); color: var(--ds-text); cursor: pointer; font-family: inherit;
}
.bil-oeffnen:hover { background: var(--ds-bg-hover); border-color: var(--ds-gray-400); }
.bil-urteil { font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 7px; border-radius: var(--r-xs); }
.bil-urteil.tone-ok   { background: var(--ds-ok-soft); color: var(--ds-ok-text); }
.bil-urteil.tone-warn { background: var(--ds-warn-soft); color: var(--ds-warn-text); }
.bil-urteil.tone-bad  { background: var(--ds-bad-soft); color: var(--ds-bad-text); }
.bil-bleibt { margin: 6px 0 0; color: var(--ds-text-2); font-size: var(--fs-s); line-height: var(--lh-base); }
@media (max-width: 640px) { .bil { padding: 18px 16px 28px; } }

/* ---------- Abgabe-Dialog (app.js) ---------- */
.abgabe-schleier {
  position: fixed; inset: 0; z-index: 9500; background: rgba(14, 22, 33, 0.55);
  display: flex; align-items: center; justify-content: center; padding: var(--sp-5);
  animation: ds-veil-in var(--dur-2) var(--ease-out) both;
}
.abgabe-dlg {
  width: 560px; max-width: 100%; background: var(--ds-bg-surface); border: 1px solid var(--ds-gray-400);
  border-radius: var(--r-l); box-shadow: var(--sh-4); overflow: hidden;
  font-family: var(--font-sans); color: var(--ds-text);
  animation: ds-dialog-in var(--dur-3) var(--ease-out) both;
}
.abgabe-dlg-bar {
  display: flex; align-items: center; gap: var(--sp-2); height: 36px; background: var(--ds-bg-muted);
  border-bottom: var(--bd); padding: 0 var(--sp-4); font-size: var(--fs-s); font-weight: var(--fw-semibold); color: var(--ds-text-2);
}
.abgabe-dlg-mark { width: 16px; height: 16px; border-radius: var(--r-xs); background: var(--ds-primary); display: inline-flex; align-items: center; justify-content: center; }
.abgabe-dlg-mark svg { width: 10px; height: 10px; color: #fff; }
.abgabe-dlg-body { padding: var(--sp-5) var(--sp-6) var(--sp-5); background: var(--ds-bg-surface); }
.abgabe-dlg-kicker { font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--ds-text-3); margin: 0 0 6px; }
.abgabe-dlg-frage { font-size: var(--fs-l); font-weight: var(--fw-semibold); margin: 0 0 var(--sp-3); line-height: var(--lh-snug); color: var(--ds-text); }
.abgabe-dlg textarea {
  width: 100%; min-height: 84px; resize: vertical; box-sizing: border-box;
  border: var(--bd-strong); border-radius: var(--r-s); padding: var(--sp-2) var(--sp-3);
  font: inherit; font-size: var(--fs-m); line-height: var(--lh-base); color: var(--ds-text); background: var(--ds-bg-surface);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.abgabe-dlg textarea::placeholder { color: var(--ds-gray-500); }
.abgabe-dlg textarea:focus { outline: none; border-color: var(--ds-primary); box-shadow: var(--focus-ring); }
.abgabe-dlg-zeile { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin: 6px 0 var(--sp-4); font-size: var(--fs-xs); color: var(--ds-text-3); }
.abgabe-dlg-zeile .voll { color: var(--ds-bad-text); font-weight: var(--fw-bold); }
.abgabe-dlg-sicher { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-m); font-weight: var(--fw-regular); margin: 0 0 var(--sp-4); cursor: pointer; color: var(--ds-text); }
.abgabe-dlg-sicher input {
  appearance: none; -webkit-appearance: none; width: 16px; height: 16px; margin: 0; flex-shrink: 0;
  border: 1.5px solid var(--ds-gray-400); border-radius: var(--r-xs); background: var(--ds-bg-surface); cursor: pointer;
  display: inline-grid; place-content: center;
}
.abgabe-dlg-sicher input::before {
  content: ''; width: 10px; height: 10px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><path d='m5 12 5 5 9-10'/></svg>") center / contain no-repeat;
  transform: scale(0); transition: transform var(--dur-1) var(--ease);
}
.abgabe-dlg-sicher input:checked { background: var(--ds-ok); border-color: var(--ds-ok); }
.abgabe-dlg-sicher input:checked::before { transform: scale(1); }
.abgabe-dlg-sicher input:focus-visible { outline: var(--focus-outline); outline-offset: 1px; }
.abgabe-dlg-fehler { font-size: var(--fs-s); color: var(--ds-bad-text); font-weight: var(--fw-semibold); margin: 0 0 var(--sp-2); }
.abgabe-dlg-knoepfe { display: flex; justify-content: flex-end; gap: var(--sp-2); }
.abgabe-dlg-knoepfe button {
  margin: 0; height: 36px; border-radius: var(--r-s); padding: 0 var(--sp-4); font: inherit; font-size: var(--fs-m); font-weight: var(--fw-semibold); cursor: pointer;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.abgabe-dlg-ab { background: var(--ds-primary); color: #fff; border: 1px solid var(--ds-primary); }
.abgabe-dlg-ab:hover { background: var(--ds-primary-hover); border-color: var(--ds-primary-hover); }
.abgabe-dlg-ab:disabled { opacity: 0.6; cursor: default; }
.abgabe-dlg-zurueck { background: var(--ds-bg-surface); color: var(--ds-text); border: var(--bd-strong); }
.abgabe-dlg-zurueck:hover { background: var(--ds-bg-hover); border-color: var(--ds-gray-400); }

/* ---------- Workplace V3: Ergebnisuebersicht ----------
   Die Kachel jedes Moduls nimmt die Farbe seines Urteils wie im Startmenue. */
.bil-kopf h2 { font-size: var(--fs-xxl); margin-bottom: var(--sp-5); }
.bil-liste { gap: var(--sp-3); }
.bil-zeile.tone-ok .bil-block { background: linear-gradient(140deg, #10b981, #047857); }
.bil-zeile.tone-warn .bil-block { background: linear-gradient(140deg, #f59e0b, #b45309); }
.bil-zeile.tone-bad .bil-block { background: linear-gradient(140deg, #ef4444, #b91c1c); }
.bil-urteil { border-radius: var(--r-pill); padding: 2px 10px; text-transform: none; letter-spacing: 0; font-weight: var(--fw-semibold); }
.bil-bleibt { font-size: var(--fs-m); }

/* ==========================================================================
   Plattformebene (Paket A2, 14.10.2026): Abgabe in der Taskleiste, Modulkarte,
   Fundstellen und "Darueber hinaus" in der Auswertung, Glossar, Grafik im Dokument.
   ========================================================================== */

/* ---------- Taskleiste: Modulkarte und "Modul abgeben" vor dem Infobereich ---------- */
.ws-modulknoepfe { display: flex; align-items: center; gap: 6px; flex-shrink: 0; height: 100%; padding: 0 6px 0 4px; }
.ws-modulknoepfe:has(> :not([hidden])) { border-right: 1px solid rgba(255, 255, 255, 0.10); margin-right: 4px; }
.ws-kartebtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 38px; margin: 0; padding: 0;
  background: transparent; border: 1px solid transparent; border-radius: var(--r-m);
  color: var(--ds-shell-text-dim); cursor: pointer;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.ws-kartebtn svg { width: 17px; height: 17px; }
.ws-kartebtn:hover { background: rgba(255, 255, 255, 0.08); color: #f1f5f9; }
.ws-kartebtn:focus-visible { outline: 2px solid #93c5fd; outline-offset: 1px; }
.ws-kartebtn[hidden], .ws-abgabe[hidden] { display: none; }
.ws-abgabe {
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; margin: 0; padding: 0 var(--sp-4) 0 var(--sp-3);
  background: rgba(42, 103, 178, 0.92); color: #fff;
  border: 1px solid rgba(147, 197, 253, 0.35); border-radius: var(--r-m);
  font-family: var(--font-sans); font-size: var(--fs-s); font-weight: var(--fw-semibold);
  cursor: pointer; white-space: nowrap;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.ws-abgabe svg { width: 15px; height: 15px; }
.ws-abgabe:hover { background: var(--ds-primary-hover); border-color: rgba(147, 197, 253, 0.6); }
.ws-abgabe:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; }
.ws-abgabe:disabled { opacity: 0.6; cursor: default; }
.ws-tasks.eng ~ .ws-modulknoepfe .ws-abgabe span { display: none; }
.ws-tasks.eng ~ .ws-modulknoepfe .ws-abgabe { padding: 0 var(--sp-3); }

/* Startmenue: Glossar in der Fusszeile */
.ws-sm-glossar {
  flex-shrink: 0; height: 32px;
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: 0;
  border-radius: var(--r-m); padding: 0 var(--sp-3);
  color: var(--ds-shell-text-dim); font-size: var(--fs-s); cursor: pointer; font-family: inherit; margin: 0;
  font-weight: var(--fw-medium);
}
.ws-sm-glossar svg { width: 15px; height: 15px; }
.ws-sm-glossar:hover { background: rgba(255, 255, 255, 0.08); color: #f1f5f9; }
.ws-sm-glossar:focus-visible { outline: 2px solid #93c5fd; outline-offset: 1px; }

/* Zusammenfassung im Abgabedialog */
.abgabe-dlg-zf {
  list-style: none; margin: 0 0 var(--sp-4); padding: var(--sp-3) var(--sp-4);
  background: var(--ds-bg-subtle); border: var(--bd-subtle); border-radius: var(--r-s);
  font-size: var(--fs-s); line-height: var(--lh-base); color: var(--ds-text-2);
}
.abgabe-dlg-zf li + li { margin-top: 4px; }

/* ---------- Modulkarte ---------- */
.mk-schleier {
  position: fixed; inset: 0; z-index: 9400; background: rgba(14, 22, 33, 0.55);
  display: flex; align-items: center; justify-content: center; padding: var(--sp-5);
  animation: ds-veil-in var(--dur-2) var(--ease-out) both;
}
.mk-karte {
  width: 680px; max-width: 100%; max-height: calc(100vh - 40px);
  display: flex; flex-direction: column;
  background: var(--ds-bg-surface); border: 1px solid var(--ds-gray-400);
  border-radius: var(--r-win, var(--r-l)); box-shadow: var(--sh-win-focus, var(--sh-4)); overflow: hidden;
  font-family: var(--font-sans); color: var(--ds-text);
  animation: ds-dialog-in var(--dur-3) var(--ease-out) both;
}
.mk-bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  height: 40px; flex-shrink: 0; padding: 0 6px 0 var(--sp-4);
  background: var(--ds-bg-muted); border-bottom: var(--bd);
  font-size: var(--fs-s); font-weight: var(--fw-semibold); color: var(--ds-text-2);
}
.mk-bar-titel { display: inline-flex; align-items: center; gap: var(--sp-2); }
.mk-bar-mark { width: 18px; height: 18px; border-radius: var(--r-xs); background: var(--ds-primary); display: inline-flex; align-items: center; justify-content: center; }
.mk-bar-mark svg { width: 11px; height: 11px; color: #fff; }
.mk-zu {
  width: 34px; height: 30px; margin: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: var(--r-s); color: var(--ds-text-2); cursor: pointer;
}
.mk-zu svg { width: 14px; height: 14px; }
.mk-zu:hover { background: var(--ds-bad); color: #fff; }
.mk-zu:focus-visible { outline: var(--focus-outline); outline-offset: -2px; }
.mk-body { padding: var(--sp-5) var(--sp-6) var(--sp-2); overflow-y: auto; }
.mk-kopf { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.mk-block {
  width: 46px; height: 46px; flex-shrink: 0; border-radius: var(--r-m);
  background: linear-gradient(140deg, #14b8a6, #2563eb); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-xl); font-weight: var(--fw-bold);
}
.mk-kopf-txt { display: flex; flex-direction: column; min-width: 0; }
.mk-kicker { font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--ds-text-3); }
.mk-titel { margin: 2px 0 0; font-size: var(--fs-xl); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); color: var(--ds-text); }
.mk-abschnitt { margin: 0 0 var(--sp-4); }
.mk-abschnitt h3 {
  margin: 0 0 6px; font-size: var(--fs-xs); font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--ds-text-3);
}
.mk-abschnitt p { margin: 0; font-size: var(--fs-m); line-height: var(--lh-relaxed); color: var(--ds-text); }
.mk-rolle p { padding: var(--sp-2) var(--sp-3); background: var(--ds-primary-soft); color: var(--ds-primary-text); border-radius: var(--r-s); }
.mk-liste { margin: 0; padding: 0; list-style: none; }
.mk-liste li {
  position: relative; padding: 5px 0 5px 22px;
  font-size: var(--fs-m); line-height: var(--lh-base); color: var(--ds-text);
}
.mk-liste li::before {
  content: ''; position: absolute; left: 4px; top: 13px; width: 7px; height: 7px; border-radius: 2px;
  background: var(--ds-primary);
}
.mk-extra .mk-liste li::before { background: transparent; border: 1.5px solid var(--ds-ok); border-radius: 50%; top: 12px; }
.mk-fuss {
  display: flex; justify-content: flex-end; gap: var(--sp-2); flex-shrink: 0;
  padding: var(--sp-3) var(--sp-6) var(--sp-4); border-top: var(--bd-subtle); background: var(--ds-bg-surface);
}
.mk-knopf {
  margin: 0; height: 36px; border-radius: var(--r-s); padding: 0 var(--sp-4);
  font: inherit; font-size: var(--fs-m); font-weight: var(--fw-semibold); cursor: pointer;
  background: var(--ds-bg-surface); color: var(--ds-text); border: var(--bd-strong);
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.mk-knopf:hover { background: var(--ds-bg-hover); }
.mk-knopf.mk-primaer { background: var(--ds-primary); color: #fff; border: 1px solid var(--ds-primary); }
.mk-knopf.mk-primaer:hover { background: var(--ds-primary-hover); border-color: var(--ds-primary-hover); }
.mk-knopf:focus-visible { outline: var(--focus-outline); outline-offset: 2px; }
@media (max-width: 640px) {
  .mk-body { padding: var(--sp-4); }
  .mk-fuss { padding: var(--sp-3) var(--sp-4); }
}

/* ---------- Auswertung: Fundstelle und "Darueber hinaus erfuellt" ---------- */
.pl-norm { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 6px; }
.pl-norm-ref {
  display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 2px 6px 2px 4px;
  background: transparent; border: 0; border-radius: var(--r-xs);
  font: inherit; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--ds-primary-text); cursor: pointer;
  text-align: left;
}
.pl-norm-ref svg { width: 12px; height: 12px; flex-shrink: 0; }
.pl-norm-ref:hover { background: var(--ds-primary-soft); }
.pl-norm-ref:focus-visible { outline: var(--focus-outline); outline-offset: 1px; }
.pl-norm-pfeil { display: inline-flex; transition: transform var(--dur-2) var(--ease); }
.pl-norm-ref.auf .pl-norm-pfeil { transform: rotate(180deg); }
.pl-norm-satz {
  display: block; padding: 6px 10px; border-left: 2px solid var(--ds-primary);
  background: var(--ds-bg-subtle); border-radius: 0 var(--r-xs) var(--r-xs) 0;
  font-size: var(--fs-s); line-height: var(--lh-base); color: var(--ds-text-2);
}
.pl-norm-satz[hidden] { display: none; }
.pl-norm-hinweis { display: block; margin-top: 4px; font-size: var(--fs-xs, 12px); color: var(--ds-text-3, var(--ds-text-2)); }
.pl-extras { border-color: var(--ds-ok); }
.pl-extras > summary { color: var(--ds-ok-text); }
.pl-extra-haken {
  flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; margin-top: 2px;
  background: var(--ds-ok-soft); color: var(--ds-ok-text);
  display: inline-flex; align-items: center; justify-content: center;
}
.pl-extra-haken svg { width: 11px; height: 11px; }
.pl-bil-extras { display: flex; align-items: flex-start; gap: var(--sp-2); margin: 6px 0 0; font-size: var(--fs-s); line-height: var(--lh-base); color: var(--ds-text-2); }

/* ---------- Glossar: Begriff im Text, Tooltip, Fenster ---------- */
.gl-begriff {
  text-decoration: underline dotted; text-decoration-color: var(--ds-text-3);
  text-underline-offset: 3px; text-decoration-thickness: 1.5px;
  cursor: help; border-radius: 2px;
}
.gl-begriff:hover, .gl-begriff[aria-expanded="true"] { text-decoration-color: var(--ds-primary); color: var(--ds-primary-text); }
.gl-begriff:focus-visible { outline: var(--focus-outline); outline-offset: 2px; }
.gl-tip {
  position: fixed; z-index: 9800; max-width: 320px;
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--sp-2) var(--sp-3);
  background: var(--ds-shell-bg, #111a26); color: #f1f5f9;
  border: 1px solid rgba(255, 255, 255, 0.10); border-radius: var(--r-m); box-shadow: var(--sh-menu, var(--sh-4));
  font-family: var(--font-sans); font-size: var(--fs-s); line-height: var(--lh-base);
  pointer-events: none;
}
.gl-tip[hidden] { display: none; }
.gl-tip-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.gl-tip-kopf strong { font-weight: var(--fw-bold); }
.gl-tip-kopf span { color: #cbd5e1; }
.gl-tip-text { color: #e2e8f0; }

.gl-fenster {
  position: fixed; z-index: 9300; top: 64px; right: 24px;
  width: 440px; max-width: calc(100vw - 32px); max-height: calc(100vh - 140px);
  display: flex; flex-direction: column;
  background: var(--ds-bg-surface); border: 1px solid var(--ds-gray-400);
  border-radius: var(--r-win, var(--r-l)); box-shadow: var(--sh-win-focus, var(--sh-4)); overflow: hidden;
  font-family: var(--font-sans); color: var(--ds-text);
  animation: ds-dialog-in var(--dur-3) var(--ease-out) both;
}
.gl-fenster-bar {
  display: flex; align-items: center; justify-content: space-between;
  height: 40px; flex-shrink: 0; padding: 0 6px 0 var(--sp-4); cursor: move;
  background: var(--ds-bg-muted); border-bottom: var(--bd);
  font-size: var(--fs-s); font-weight: var(--fw-semibold); color: var(--ds-text-2);
}
.gl-fenster-titel { display: inline-flex; align-items: center; gap: var(--sp-2); }
.gl-fenster-mark { width: 18px; height: 18px; border-radius: var(--r-xs); background: var(--ds-primary); display: inline-flex; align-items: center; justify-content: center; }
.gl-fenster-mark svg { width: 11px; height: 11px; color: #fff; }
.gl-fenster-zu {
  width: 34px; height: 30px; margin: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: var(--r-s); color: var(--ds-text-2); cursor: pointer;
}
.gl-fenster-zu svg { width: 14px; height: 14px; }
.gl-fenster-zu:hover { background: var(--ds-bad); color: #fff; }
.gl-fenster-zu:focus-visible { outline: var(--focus-outline); outline-offset: -2px; }
.gl-fenster-suche { padding: var(--sp-3) var(--sp-4); border-bottom: var(--bd-subtle); flex-shrink: 0; }
.gl-suche { display: flex; align-items: center; gap: var(--sp-2); height: var(--ds-control-h, 32px); padding: 0 var(--sp-3); border: var(--bd-strong); border-radius: var(--r-s); background: var(--ds-bg-surface); }
.gl-suche > svg { position: static; width: 14px; height: 14px; color: var(--ds-icon, var(--ds-text-3)); flex-shrink: 0; transform: none; }
.gl-suche input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font: inherit; font-size: var(--fs-m); color: var(--ds-text); padding: 0; height: 100%; margin: 0; box-shadow: none; }
.gl-suche:focus-within { border-color: var(--ds-primary); box-shadow: var(--focus-ring); }
.gl-liste { margin: 0; padding: var(--sp-2) var(--sp-4) var(--sp-4); overflow-y: auto; }
.gl-eintrag { padding: var(--sp-3) 0; border-top: var(--bd-subtle); }
.gl-eintrag:first-child { border-top: none; }
.gl-eintrag[hidden] { display: none; }
.gl-eintrag dt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: var(--fs-m); }
.gl-eintrag dt strong { font-weight: var(--fw-bold); color: var(--ds-text); }
.gl-eintrag dt span { color: var(--ds-text-2); font-size: var(--fs-s); }
.gl-eintrag dd { margin: 4px 0 0; font-size: var(--fs-s); line-height: var(--lh-base); color: var(--ds-text-2); }
.gl-leer { margin: 0; padding: var(--sp-4); font-size: var(--fs-s); color: var(--ds-text-3); }

/* ---------- Dokument: Blocktyp grafik (Tools, gemeinsame Dokumente) ---------- */
.doc-grafik-bild { overflow-x: auto; }
.doc-grafik-bild svg { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.doc-grafik-bild { position: relative; cursor: zoom-in; border-radius: var(--r-s); }
.doc-grafik-bild:focus-visible { outline: var(--focus-outline); outline-offset: 2px; }
.doc-grafik-lupe {
  position: absolute; top: 6px; right: 6px; width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ds-bg-surface); color: var(--ds-text-2); border: var(--bd); border-radius: var(--r-s);
  box-shadow: var(--sh-1); opacity: 0.85; transition: opacity var(--dur-1) var(--ease);
}
.doc-grafik-lupe svg { width: 14px; height: 14px; }
.doc-grafik-bild:hover .doc-grafik-lupe, .doc-grafik-bild:focus-visible .doc-grafik-lupe { opacity: 1; color: var(--ds-primary-text); }
.doc-lupe {
  position: fixed; inset: 0; z-index: 9600; display: flex; flex-direction: column;
  background: rgba(14, 22, 33, 0.82); animation: ds-veil-in var(--dur-2) var(--ease-out) both;
  font-family: var(--font-sans);
}
.doc-lupe-leiste {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  height: 48px; flex-shrink: 0; padding: 0 var(--sp-3) 0 var(--sp-5); color: #f1f5f9; font-size: var(--fs-m);
}
.doc-lupe-zu {
  width: 36px; height: 36px; margin: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.10); border: 0; border-radius: var(--r-m); color: #fff; cursor: pointer;
}
.doc-lupe-zu svg { width: 16px; height: 16px; }
.doc-lupe-zu:hover { background: var(--ds-bad); }
.doc-lupe-zu:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; }
.doc-lupe-flaeche { flex: 1; min-height: 0; overflow: auto; padding: 0 var(--sp-5) var(--sp-5); display: flex; }
.doc-lupe-blatt {
  margin: auto; background: #fbfaf7; border-radius: var(--r-m); padding: var(--sp-5);
  width: min(1400px, 100%); min-width: 900px; box-sizing: border-box; box-shadow: var(--sh-4);
}
.doc-lupe-blatt svg { display: block; width: 100%; height: auto; }

/* Blocktyp tabelle: rollt im Block, nicht die Seite */
.doc-tabelle-wrap { overflow-x: auto; max-width: 100%; border: var(--bd); border-radius: var(--r-s); background: var(--ds-bg-surface); }
.doc-tabelle-wrap:focus-visible { outline: var(--focus-outline); outline-offset: 2px; }
.doc-tabelle { width: 100%; border-collapse: collapse; font-size: var(--fs-s); line-height: var(--lh-snug); font-variant-numeric: tabular-nums; }
.doc-tabelle th {
  text-align: left; white-space: nowrap; padding: 7px 10px; background: var(--ds-bg-muted);
  border-bottom: var(--bd); font-weight: var(--fw-semibold); color: var(--ds-text-2);
}
.doc-tabelle td { padding: 7px 10px; border-top: var(--bd-subtle); color: var(--ds-text); vertical-align: top; }
.doc-tabelle tbody tr:first-child td { border-top: 0; }
.doc-tabelle-unterschrift { margin: 6px 0 0; font-size: var(--fs-s); color: var(--ds-text-2); line-height: var(--lh-base); }