/* ==========================================================================
   Spido — Design-Tokens & Komponenten
   Grundlage: Spido-UX-Entwurf (Canvas), Stand 10/2026.
   Dieses Stylesheet ist die gemeinsame Basis aller Spido-Ansichten.
   ========================================================================== */

:root {
  /* Flächen */
  --sp-bg: #F6F4F0;            /* App-Hintergrund (nie reines Weiß) */
  --sp-bg-nav: #FBFAF7;        /* Sidebar */
  --sp-surface: #FFFEFC;       /* Panels (Kundenkontext, Vorgang, Dokument) */
  --sp-surface-raised: #FFFFFF;/* Kacheln, Composer, Buttons */
  --sp-paper-backdrop: #EFECE5;/* Hintergrund hinter Dokument-Papier */

  /* Text */
  --sp-ink: #26221E;
  --sp-ink-2: #6B645C;         /* Sekundärtext */
  --sp-ink-3: #6F6860;         /* Labels, Captions, Meta */

  /* Linien */
  --sp-line: #ECE7DE;          /* Hairline auf App-Hintergrund */
  --sp-line-strong: #E9E4DA;   /* Panel-/Kachelrahmen */
  --sp-line-panel: #EEE9E0;    /* Trennlinien im Panel */

  /* Marke */
  --sp-primary: #6D28D9;       /* Objekte, primäre Buttons */
  --sp-primary-deep: #5B21B6;  /* Hover, Chips-Text, aktive Navigation */
  --sp-primary-bright: #7C3AED;/* Logo, Spido-Funke */
  --sp-chip-bg: #F1EBFA;       /* Vorgang-Chip */
  --sp-hint-bg: #F8F4FE;       /* Spido-Hinweisfläche */
  --sp-hint-ink: #4A3570;
  --sp-missing: #7E22CE;       /* fehlender Wert „—“ (nicht bekannt) */

  /* Status */
  --sp-warn: #B45309;          /* fällig / braucht Aufmerksamkeit */
  --sp-ok: #15803D;            /* in Ordnung / erledigt */

  /* Konturen */
  --sp-outline: #D7CBEF;       /* sekundärer Button */
  --sp-outline-neutral: #DDD6CA;
  --sp-help-border: #CFC8BC;

  /* Sonstiges */
  --sp-bubble: #EDE8DE;        /* Nutzer-Nachricht */
  --sp-tooltip-bg: #2A2520;

  /* Form */
  --sp-radius-panel: 16px;
  --sp-radius-tile: 14px;
  --sp-radius-pill: 999px;
  --sp-shadow-panel: 0 14px 40px rgba(44, 34, 14, 0.06);
  --sp-shadow-composer: 0 12px 32px rgba(44, 34, 14, 0.07);
  --sp-shadow-paper: 0 10px 30px rgba(44, 34, 14, 0.12);

  /* Typografie */
  --sp-font: 'Figtree', system-ui, -apple-system, sans-serif;
  --sp-font-doc: Georgia, 'Times New Roman', serif; /* nur Dokument-Faksimile */

  /* Geometrie — Breitenintention (Desktop)
     Navigation 228 px · Chat-ARBEITSINHALT 560 px · Kundenkontext 560 px.
     Bei 1440 px Fensterbreite bleiben links/rechts des Chatinhalts je 38 px
     Luft: 228 + (38 + 560 + 38) + 560 + 16 (Panel-Außenabstand) = 1440.
     Bei kleineren Desktopfenstern bleiben die Mindestbreiten erhalten und
     die GESAMTE Arbeitsfläche wird horizontal verschiebbar (body overflow-x),
     statt Chat oder Akte zusammenzustauchen. Der Dokument-Split (620 px,
     .context--doc) ist von dieser Kurzansicht-Geometrie unabhängig. */
  --sp-nav-w: 228px;
  --sp-chat-content: 560px;    /* Arbeitsinhalt des Chats */
  --sp-chat-gutter: 38px;      /* Luft links/rechts des Chatinhalts bei 1440 */
  --sp-chat-col: calc(var(--sp-chat-content) + 2 * var(--sp-chat-gutter));
  --sp-context-w: 560px;       /* Kunden-Kurzansicht / Akte / Vorgang */
  --sp-context-doc-w: 620px;   /* Dokument-Split, unabhängig */
  --sp-top-air: 48px;          /* Luft über dem Chat */
}

/* --------------------------------------------------------------------------
   Grundgerüst: Navigation | Chat (zentriert) | Kundenkontext
   Bei kleineren Desktopfenstern scrollt die Gesamtarbeitsfläche horizontal,
   statt zusammengedrückt zu werden.
   -------------------------------------------------------------------------- */

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--sp-font);
  color: var(--sp-ink);
  background: var(--sp-bg);
  overflow-x: auto; /* horizontale Verschiebbarkeit statt Zusammendrücken */
}

/* MYS-249 — `height: 100%` UND NICHT `100vh`. Der Unterschied sind 15 Pixel
   Nichts, und sie sind GEMESSEN (`werkzeuge/mys249-seite-rollt-nicht-probe.py`).
   `body` traegt `overflow-x: auto` (oben). Erscheint der waagerechte Balken,
   nimmt er 15 px aus dem INHALTSKASTEN des Koerpers - `clientHeight` faellt von
   813 auf 798 bei einem Fenster 1280x900. Eine Schale auf `100vh` bleibt bei
   813 und ragt damit um genau diese 15 px hinaus; die Seite bekommt einen
   senkrechten Balken, in dem KEIN Inhalt steht. Julia am 16.10.2026: „rechts
   gibt es jetzt drei vertikale Scrollleisten."
   `100%` greift auf `html, body { height: 100% }` zurueck und nimmt damit die
   VERFUEGBARE Hoehe - die um den Balken schon verringerte. Gemessen in fuenf
   Fenstern: senkrechter Ueberhang der Seite 0 px, mit und ohne waagerechten
   Balken; und waagerecht kommen 15 px Sichtbreite zurueck, weil der Balken
   rechts wegfaellt (1265 -> 1280 bei 1280x900).
   DER ANDERE WEG WAR GEMESSEN UND IST VERWORFEN: `body { overflow-y: hidden }`
   nimmt der Seite das Rollen auch dort, wo WIRKLICH Inhalt ueberhaengt - unter
   680 px Fensterhoehe greift `min-height` hier, und dann waere das untere Ende
   der Schale unerreichbar. Nicht rollen zu KOENNEN ist kein Gewinn gegenueber
   einem Balken ohne Inhalt. */
.app {
  display: flex;
  height: 100%;
  min-height: 680px;
  /* = 1440 px bei Standard-Kontextbreite; siehe Breitenintention oben */
  min-width: calc(var(--sp-nav-w) + var(--sp-chat-col) + var(--sp-context-w) + 16px);
}

.workspace {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
}

/* ------------------------------ Navigation ------------------------------ */

.nav {
  width: var(--sp-nav-w);
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  padding: 18px 14px 20px;
  background: var(--sp-bg-nav);
  border-right: 1px solid var(--sp-line);
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 20px;
  color: var(--sp-primary-deep);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.nav__group { display: flex; flex-direction: column; gap: 2px; }

.nav__spacer { flex: 1 1 auto; }

.nav__group--bottom { border-top: 1px solid var(--sp-line); padding-top: 12px; }

.nav__item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 500;
  color: #4A443D;
  text-decoration: none;
}

.nav__item:hover { background: #F3F0E9; color: #26221E; }

.nav__item[aria-current="page"] {
  background: #EFE8FB;
  color: var(--sp-primary-deep);
  font-weight: 600;
}

.nav__item svg { flex: 0 0 auto; }

.nav__label { flex: 1 1 auto; }

.nav__badge {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--sp-primary-deep);
  background: #EFE8FB;
  border-radius: var(--sp-radius-pill);
  padding: 2px 8px;
}

.nav__item[aria-current="page"] .nav__badge { background: var(--sp-surface-raised); }

.nav__meta { font-size: 11.5px; font-weight: 600; color: var(--sp-ink-3); }

/* --------------------------------- Chat --------------------------------- */

.chat {
  flex: 1 1 auto;
  min-width: var(--sp-chat-col); /* 560 px Inhalt + 2 × 38 px Luft */
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.chat__scroll {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  justify-content: center; /* Chat zentriert in seinem Raum */
}

.chat__inner {
  width: 100%;
  max-width: var(--sp-chat-col);
  padding: var(--sp-top-air) var(--sp-chat-gutter) 24px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  /* JULIAS WAAGERECHTER ROLLBALKEN (Bildschirmfoto 4 vom 23.10.2026, zu
     0-JULIA-VIER-AM-23-10-ABEND (2): "der Chat klebt hier am Dokument" - und
     die Chatspalte im geteilten Bild liess sich seitwaerts schieben). IHR
     SATZ IST DER MASSSTAB: "ein Chat, den man seitwaerts schieben muss, ist
     keiner."

     DIE URSACHE IST EIN PAAR UND NICHT EINE ZEILE, beides am 24.10.2026
     (Lauf 520) im Browser am AUSGELIEFERTEN Blatt gemessen und nicht
     gelesen:
       (a) `.chat--flow` setzt nur `overflow-y: auto`. Die andere Achse
           bleibt `visible`, und `visible` neben einem nicht-sichtbaren
           Wert RECHNET SICH ZU `auto` - gemessen: `.chat` traegt
           `overflow-x: auto`, obwohl im Blatt kein `overflow-x` steht. Die
           Spalte KANN also waagerecht rollen, ohne dass es jemand
           hingeschrieben hat.
       (b) In diesem Blatt stand KEINE EINZIGE Umbruchregel - 0 Vorkommen
           von `overflow-wrap`, 0 von `word-break` auf 81 782 Byte. Ein
           Wort, das der Browser nicht brechen darf, schiebt die Spalte
           damit auf.
     ZUSAMMEN SIND SIE JULIAS BILDSCHIRMFOTO: gemessen in der Spalte des
     Splits (432 px breit) ragte ein Dateipfad 39 px hinaus, ein deutsches
     Kompositum 101 px, eine Unterstrich-Kennung 175 px. NICHT hinaus ragen
     die URL und die Mailadresse - an `-` und `@` darf der Browser von sich
     aus brechen, nach `/` HIER NICHT (der Dateipfad ist dafuer der Beleg,
     und mein erster Entwurf dieses Kommentars hatte ihn falsch unter den
     unauffaelligen stehen). DAS IST DER GRUND, WARUM ES NICHT JEDE ANTWORT
     TRAF und der Mangel drei Naechte als "mal sehen" durchging.

     GEBROCHEN WIRD DER UMBRUCH UND NICHT DIE ROLLE. `overflow-x: hidden`
     waere die kuerzere Zeile und die schlechtere: sie versteckt den
     ueberstehenden Text, statt ihn lesbar zu machen - aus einem Rollbalken
     wuerde unerreichbarer Text. Gemessen mit `break-word`: Ueberstand 225 px
     -> 0 px, der Satz wird eine Zeile hoeher (45 -> 67 px) und bleibt ganz
     lesbar.

     EINE REGEL FUER DIE GANZE SPALTE, NICHT EINE JE BAUTEIL: `overflow-wrap`
     ERBT. Die Regel steht deshalb hier am Behaelter und wirkt in `.msg__body`,
     in den Listen und in allem, was spaeter dazukommt - am Glas nachgesehen,
     `.msg__body` meldet `break-word`, ohne selbst eine Zeile zu tragen.
     Keine zweite Fassung derselben Regel (U9).

     WAS DIESE REGEL NICHT KANN, damit es niemand fuer erledigt haelt: ein
     Bauteil, das aus sich heraus breiter ist als die Spalte - eine Tabelle,
     ein `pre` - wird von einem Wortumbruch nicht schmaler. Im Chat gibt es
     heute keines (gemessen: das Blatt fuehrt keine Regel fuer `pre`, `code`
     oder `table`, und der Antwortweg baut keines); kommt eines dazu, ist
     seine Behandlung eine Aussage ueber das Erzeugnis und gehoert nicht in
     einen Nachtlauf. */
  overflow-wrap: break-word;
}

.msg { display: flex; gap: 12px; font-size: 14.5px; line-height: 1.6; }

.msg__spark { flex: 0 0 auto; margin-top: 5px; }

.msg__body { flex: 1 1 0; min-width: 0; }
.msg__body p { margin: 0; }
.msg__body p + p { margin-top: 10px; }
.msg__body ul { margin: 10px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }

.msg--user {
  align-self: flex-end;
  max-width: 420px;
  background: var(--sp-bubble);
  border-radius: 16px 16px 4px 16px;
  padding: 11px 16px;
}

.msg__actions {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* --------------------------- Interaktionsarten --------------------------- */

/* Objekt: der Name selbst ist der Link — kein Symbol */
.obj {
  color: var(--sp-primary);
  font-weight: 600;
  text-decoration: none;
}
.obj:hover { color: var(--sp-primary-deep); text-decoration: underline; text-underline-offset: 2px; }

/* Vorgang: wie Objekt, mit dezentem Pill-Hintergrund */
.chip {
  color: var(--sp-primary-deep);
  font-weight: 600;
  text-decoration: none;
  background: var(--sp-chip-bg);
  border-radius: var(--sp-radius-pill);
  padding: 1px 9px;
}
.chip:hover { background: #E9E0F7; }

/* Aktion/Entscheidung */
.btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--sp-radius-pill);
  padding: 9px 16px;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.btn--primary { color: #FFFFFF; background: var(--sp-primary); }
.btn--primary:hover { background: var(--sp-primary-deep); }
.btn--secondary { color: var(--sp-primary-deep); background: var(--sp-surface-raised); border-color: var(--sp-outline); }
.btn--secondary:hover { background: var(--sp-chip-bg); }
.btn--neutral { color: #4A443D; background: var(--sp-surface-raised); border-color: var(--sp-outline-neutral); }
.btn--neutral:hover { background: #F3F0E9; }
.btn--sm { font-size: 12px; padding: 7px 13px; }

/* Erklärung: ?-Punkt mit Hover-Hinweis, öffnet keinen Arbeitsbereich */
.help {
  position: relative;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--sp-help-border);
  background: var(--sp-surface-raised);
  color: var(--sp-ink-3);
  font-size: 12.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: help;
  padding: 0;
  line-height: 1;
}
.help__tip {
  display: none;
  position: absolute;
  left: 32px;
  top: -8px;
  z-index: 20;
  width: max-content;
  max-width: 240px;
  background: var(--sp-tooltip-bg);
  color: #F6F4F0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  border-radius: 9px;
  padding: 9px 12px;
}
.help:hover .help__tip, .help:focus-visible .help__tip { display: block; }

/* ------------------------------- Composer ------------------------------- */

.composer-area {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px 24px 22px;
}

.composer-area__note { margin: 0; font-size: 11.5px; color: var(--sp-ink-3); }

.composer {
  width: 100%;
  max-width: var(--sp-chat-content);
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--sp-surface-raised);
  border: 1px solid #E8E2D7;
  border-radius: var(--sp-radius-pill);
  padding: 6px 6px 6px 8px;
  box-shadow: var(--sp-shadow-composer);
}

.composer__icon {
  width: 38px;
  height: 38px;
  border: none;
  background: transparent;
  color: var(--sp-ink-3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
}
.composer__icon:hover { background: #F3F0E9; }

.composer__input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--sp-ink);
  padding-left: 4px;
}
.composer__input::placeholder { color: var(--sp-ink-3); }
.composer__input:focus { outline: none; }

.composer__send {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--sp-primary);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.composer__send:hover { background: var(--sp-primary-deep); }

/* ------------------------- Kontext-Panel (rechts) ------------------------ */

/* Dokument-Split: unabhängig von der Kurzansicht-Geometrie */
.context--doc { width: var(--sp-context-doc-w); }

.context {
  width: var(--sp-context-w);
  flex: 0 0 auto;
  margin: 16px 16px 16px 0;
  background: var(--sp-surface);
  border: 1px solid var(--sp-line-strong);
  border-radius: var(--sp-radius-panel);
  box-shadow: var(--sp-shadow-panel);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.context__header {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 24px 20px 0 32px;
}

.context__head-main { flex: 1 1 0; min-width: 0; }

.context__kicker {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--sp-ink-3);
}

.context__title {
  margin: 4px 0 0;
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--sp-ink);
}

.context__meta { margin: 6px 0 0; font-size: 13px; color: var(--sp-ink-2); }

.context__open-record {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--sp-primary);
  text-decoration: none;
}
.context__open-record:hover { color: var(--sp-primary-deep); text-decoration: underline; text-underline-offset: 2px; }

.context__icon-btn {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border: none;
  background: transparent;
  color: var(--sp-ink-3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 8px;
}
.context__icon-btn:hover { background: #F3F0E9; }

.context__body {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  padding: 0 32px 24px;
}

/* Statuspunkt im Kopf */
.status { display: inline-flex; align-items: center; gap: 6px; }
.status__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sp-ok); }
.status__dot--warn { background: var(--sp-warn); }

/* ------------------------------- Module ---------------------------------
   Jede inhaltliche Einheit der Kurzansicht/Akte ist ein eigenständiges
   <section class="module" data-module="…">. Module sind unabhängig:
   ergänzen, entfernen oder umsortieren verändert die anderen nicht.
   -------------------------------------------------------------------------- */

.module { padding-top: 20px; }
.module + .module { border-top: 1px solid var(--sp-line-panel); margin-top: 20px; }
.module:first-child { padding-top: 16px; }

.module__label {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--sp-ink-3);
}

.module__more {
  display: inline-block;
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--sp-primary);
  text-decoration: none;
}
.module__more:hover { color: var(--sp-primary-deep); }

.module__text { margin: 0; font-size: 13.5px; line-height: 1.55; }
.module__note { margin: 10px 0 0; font-size: 12px; color: var(--sp-ink-2); }

.icon-spark { flex: 0 0 auto; margin-top: 2px; }

/* Schlüssel/Wert-Raster — alle Zeilen gleichrangig */
.kv {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  row-gap: 7px;
  column-gap: 16px;
  font-size: 13.5px;
  line-height: 1.5;
}
.kv dt { margin: 0; color: var(--sp-ink-3); font-weight: 400; }
.kv dd { margin: 0; color: var(--sp-ink); }

/* Datenplätze: [data-availability="pending-structured"] markiert Felder, die
   im Backend noch nicht als strukturierter Wert existieren (z. B. Pflegegrad,
   Hausarzt, Wohnsituation). Das Design zeigt den Zielzustand; die Integration
   darf diese Werte NICHT erfinden, sondern bindet sie erst an, wenn die
   strukturierte Quelle existiert. Visuell kein Unterschied — bewusst. */

/* Fehlender Wert: „noch nicht in Spido vorhanden“ — bewusst kein Fehlerbild.
   Fachlich Geklärtes („keine bekannt“) bleibt dagegen normaler Text. */
.missing { color: var(--sp-missing); font-weight: 600; }

/* Punktlisten (Aktuell wichtig) */
.flags { display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; line-height: 1.55; }
.flag { display: flex; gap: 9px; }
.flag__dot { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; margin-top: 7px; background: var(--sp-ink-3); }
.flag__dot--warn { background: var(--sp-warn); }
.flag__dot--ok { background: var(--sp-ok); }
.flag p { margin: 0; }

/* Zeilen mit rechtsbündiger Frist/Meta (Vorgänge, Unterlagen) */
.rows { display: flex; flex-direction: column; gap: 9px; font-size: 13.5px; line-height: 1.5; }
.row { display: flex; align-items: baseline; gap: 10px; }
.row__main { flex: 1 1 0; min-width: 0; margin: 0; }
.row__meta { flex: 0 0 auto; font-size: 12px; color: var(--sp-ink-3); }
.row__meta--warn { font-weight: 600; color: var(--sp-warn); }
.badge-new { font-weight: 700; color: var(--sp-primary-deep); }

/* Spido-Hinweis (dezent) */
.hint {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  background: var(--sp-hint-bg);
  border-radius: 10px;
  padding: 11px 14px;
  margin-top: 16px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--sp-hint-ink);
}
.hint p { margin: 0; }
/* Ein Hinweis, der NICHT nach Erfolg aussehen darf. `.hint` ist die ruhige
   Form des Systems; eine abgewiesene Eingabe in derselben Farbe wie eine
   gelungene Speicherung wäre eine Meldung, die das Gegenteil von sich
   behauptet.

   UMGEZOGEN AM 27.10.2026 (MYS-296) AUS `profil.css`. Dort war sie am
   falschen Ort: `.hint` steht hier, also gehört sein Beiwort auch hierher.
   Gemessen aufgefallen ist es an der Kundenakte — die lädt als Bereichsblatt
   `nka.css` und nicht `profil.css`, und der stockende Lauf hätte seine
   Warnfarbe damit NICHT bekommen. Ein Beiwort, das woanders wohnt als seine
   Grundform, wirkt nur dort, wo jemand das fremde Blatt mitlädt. */
.hint--warn { background: var(--sp-attn-bg); }
.hint__actions { margin-top: 9px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }

/* Akte: Bereichsnavigation (Anker innerhalb des scrollenden Panels) */
.record-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 14px 0 2px;
}
.record-nav a {
  font-size: 12px;
  font-weight: 600;
  color: var(--sp-ink-2);
  text-decoration: none;
  border: 1px solid var(--sp-line-strong);
  border-radius: var(--sp-radius-pill);
  padding: 5px 11px;
  background: var(--sp-surface-raised);
}
.record-nav a:hover { color: var(--sp-primary-deep); border-color: var(--sp-outline); }

/* Verlauf */
.log { display: flex; flex-direction: column; gap: 8px; font-size: 13px; line-height: 1.5; }
.log__row { display: flex; gap: 12px; }
.log__when { flex: 0 0 auto; width: 78px; color: var(--sp-ink-3); }
.log__what { flex: 1 1 0; min-width: 0; margin: 0; color: var(--sp-ink); }
.log__src { color: var(--sp-ink-3); }

/* ------------------------- Vorgang: Schrittleiste ------------------------ */

.steps { display: flex; align-items: center; gap: 10px; font-size: 13px; margin-top: 20px; }
.steps__item { display: flex; align-items: center; gap: 7px; color: var(--sp-ink-3); }
.steps__item--active { font-weight: 700; color: var(--sp-primary-deep); }
.steps__num {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  border: 1.5px solid var(--sp-help-border); color: var(--sp-ink-3);
}
.steps__item--active .steps__num { background: var(--sp-primary); border-color: var(--sp-primary); color: #FFFFFF; }
.steps__line { flex: 1 1 0; height: 1px; background: #E7E2DA; }

/* --------------------------- Dokument-Ansicht ---------------------------- */

.doc-toolbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 16px 14px 28px;
  border-bottom: 1px solid var(--sp-line-panel);
}
.doc-toolbar__main { flex: 1 1 0; min-width: 0; }
.doc-toolbar__title { margin: 0; font-size: 16px; font-weight: 700; color: var(--sp-ink); }
.doc-toolbar__meta { margin: 3px 0 0; font-size: 12.5px; color: var(--sp-ink-2); }

.doc-stage {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  background: var(--sp-paper-backdrop);
  display: flex;
  justify-content: center;
  padding: 28px 0;
}

.paper {
  width: 480px;
  height: fit-content;
  background: #FFFFFF;
  border-radius: 4px;
  box-shadow: var(--sp-shadow-paper);
  padding: 40px 44px;
  font-family: var(--sp-font-doc);
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--sp-ink);
}
.paper p { margin: 10px 0 0; }
.paper__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; border-bottom: 1px solid var(--sp-outline-neutral); padding-bottom: 12px; }
.paper__head p { margin: 0; }
.paper__small { font-size: 11px; color: #55504A; }
.paper__from { margin: 0; font-weight: 700; font-size: 13px; }
.paper__addr { margin-top: 18px !important; }
.paper__greet { margin-top: 14px !important; }
.paper__sig { margin-top: 20px !important; }
.paper__subject { font-weight: 700; margin-top: 18px !important; }
.paper mark {
  background: #F3EDFC;
  color: inherit;
  padding: 1px 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Spido-Annotation im Dokument */
.paper__spido {
  margin-top: 8px;
  display: flex;
  align-items: flex-start;
  gap: 7px;
  background: var(--sp-hint-bg);
  border-radius: 8px;
  padding: 7px 10px;
  font-family: var(--sp-font);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--sp-primary-deep);
}
.paper__spido p { margin: 0; }

/* ------------------------------ Hilfsklassen ----------------------------- */

.muted { color: var(--sp-ink-2); }
.small { font-size: 12px; }

/* ==========================================================================
   V1-Erweiterungen — Bereichsseiten, Zustände, weitere Komponenten
   ========================================================================== */

/* ------------------------------ Seitenaufbau -----------------------------
   Bereichsseiten (Posteingang, Vorgänge, …): eine Inhaltsspalte, zentriert,
   880 px, mit Seitenkopf. Composer bleibt unten erreichbar. */

.page {
  flex: 1 1 auto;
  min-width: var(--sp-chat-col);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.page__scroll {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  justify-content: center;
}

.page__inner {
  width: 100%;
  max-width: 880px;
  padding: 42px 38px 32px;
  display: flex;
  flex-direction: column;
}

.page__kicker {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--sp-ink-3);
}

.page__title {
  margin: 0;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--sp-ink);
}

.page__lede { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: var(--sp-ink-2); }

.page__head { display: flex; align-items: flex-start; gap: 16px; }
.page__head-main { flex: 1 1 0; min-width: 0; }
.page__head-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding-top: 4px; }

/* Abschnitt innerhalb einer Seite */
.section { margin-top: 28px; }
.section__label {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--sp-ink-3);
}
.section__note { margin: 6px 0 0; font-size: 12.5px; color: var(--sp-ink-2); }

/* ------------------------------ Themenkacheln ---------------------------- */

.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.tile {
  display: block;
  background: var(--sp-surface-raised);
  border: 1px solid var(--sp-line-strong);
  border-radius: var(--sp-radius-tile);
  padding: 15px 18px;
  text-decoration: none;
}
.tile:hover { border-color: var(--sp-outline); }
.tile__label {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--sp-ink-3);
}
.tile__line { margin: 7px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--sp-ink); }
.tile__go { margin: 8px 0 0; font-size: 12.5px; font-weight: 600; color: var(--sp-primary); }

/* ---------------------------------- Tabs --------------------------------- */

.tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  border-bottom: 1px solid var(--sp-line-strong);
  margin-top: 20px;
}
.tab {
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--sp-ink-2);
  text-decoration: none;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 14px;
  margin-bottom: -1px;
  cursor: pointer;
}
.tab:hover { color: var(--sp-ink); }
.tab[aria-current="page"], .tab--active {
  color: var(--sp-primary-deep);
  border-bottom-color: var(--sp-primary);
}
.tab__count { font-size: 11.5px; font-weight: 700; color: var(--sp-ink-3); margin-left: 5px; }

/* ------------------------------ Statusmarken ------------------------------
   EIN Vokabular für Zustände überall: Vorgang, Aufgabe, Eingang, Nachweis,
   Konto, Dokument. Farbe + Wort, nie Farbe allein. */

.mark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--sp-radius-pill);
  padding: 3px 10px;
  white-space: nowrap;
  color: var(--sp-ink-2);
  background: #F0ECE4;
}
.mark::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .75; }

.mark--offen           { color: #58514A; background: #F0ECE4; }
.mark--in-bearbeitung  { color: var(--sp-primary-deep); background: var(--sp-chip-bg); }
.mark--erledigt        { color: var(--sp-ok); background: #E8F3EC; }
.mark--abgeschlossen   { color: var(--sp-ok); background: #E8F3EC; }
.mark--ueberfaellig    { color: #9A3412; background: #FBEEE6; }
.mark--pruefung        { color: var(--sp-warn); background: #FAF0E0; }
.mark--entscheidung    { color: var(--sp-warn); background: #FAF0E0; }
.mark--konflikt        { color: #B91C1C; background: #FBEAEA; }
.mark--nicht-zugeordnet{ color: #58514A; background: #F0ECE4; }
.mark--gesperrt        { color: #B91C1C; background: #FBEAEA; }
.mark--eingeladen      { color: var(--sp-primary-deep); background: var(--sp-chip-bg); }
.mark--laeuft          { color: var(--sp-primary-deep); background: var(--sp-chip-bg); }
.mark--entwurf         { color: #58514A; background: #F0ECE4; }
.mark--bestanden       { color: var(--sp-ok); background: #E8F3EC; }
.mark--abgebrochen     { color: #58514A; background: #F0ECE4; text-decoration: none; }

/* „läuft noch“ mit Puls */
@keyframes sp-pulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
.mark--laeuft::before { animation: sp-pulse 1.4s ease-in-out infinite; }

/* Schutzklasse (Vertraulichkeit) */
.seal {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  color: #92400E;
  background: #FDF3E3;
  border: 1px solid #F0DDBB;
  border-radius: var(--sp-radius-pill);
  padding: 2px 9px;
  white-space: nowrap;
}

/* ------------------------------ Listenzeilen ----------------------------- */

.list { display: flex; flex-direction: column; }
.list-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--sp-line);
}
.list-row__main { flex: 1 1 0; min-width: 0; }
.list-row__title { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--sp-ink); }
.list-row__sub { margin: 3px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--sp-ink-2); }
.list-row__aside { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }
.list-row__meta { font-size: 12px; color: var(--sp-ink-3); }

/* Ausnahme-Zeile im Posteingang: Begründung gehört zur Zeile */
.list-row--why { align-items: flex-start; }
.list-row--why .list-row__aside { padding-top: 2px; }

/* gedämpfte Zeile (automatisch verarbeitet) */
.list-row--done { border-bottom-color: #F0EBE2; }
.list-row--done .list-row__title { font-size: 13.5px; color: #4A443D; }
.list-row--done .list-row__icon { color: var(--sp-ok); flex: 0 0 auto; }

/* -------------------------------- Tabellen -------------------------------
   Nur wo ein echtes Raster hilft (Fortbildungsstand, Jahresübersicht). */

.table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 12px; }
.table th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--sp-ink-3);
  padding: 8px 12px 8px 0;
  border-bottom: 1px solid var(--sp-line-strong);
}
.table td {
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--sp-line);
  color: var(--sp-ink);
  vertical-align: top;
}
.table tr:last-child td { border-bottom: none; }

/* ------------------------------- Formulare ------------------------------- */

.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-size: 12.5px; font-weight: 600; color: var(--sp-ink); }
.field__help { font-size: 12px; color: var(--sp-ink-2); margin: 0; }

.input, .select, .textarea {
  font-family: inherit;
  font-size: 14px;
  color: var(--sp-ink);
  background: var(--sp-surface-raised);
  border: 1px solid var(--sp-outline-neutral);
  border-radius: 10px;
  padding: 10px 12px;
  width: 100%;
  box-sizing: border-box;
}
.input:focus, .select:focus, .textarea:focus {
  outline: 2px solid var(--sp-outline);
  outline-offset: 0;
  border-color: var(--sp-outline);
}
.input::placeholder { color: var(--sp-ink-3); }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; margin-top: 14px; }
.form-grid .field--wide { grid-column: 1 / -1; }
.form-actions { display: flex; align-items: center; gap: 10px; margin-top: 18px; }

.check { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; line-height: 1.5; color: var(--sp-ink); }
.check input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--sp-primary); }

/* --------------------------------- Dialog -------------------------------- */

.dialog-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(38, 34, 30, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 50;
}
/* DIE GRUNDREGEL, DAMIT KEIN DIALOG SEINEN EIGENEN KNOPF VERSTECKEN KANN.
   Julia hat denselben Mangel ZWEIMAL gemeldet - am 22.10. am Hinweisdialog
   und am 23.10. am Aenderungsverlauf ("Hier fehlt auch die Scrollleiste").
   Gezaehlt am 23.10.: 8 von 10 `class="dialog"`-Stellen konnten aus dem
   Fenster wachsen. EINE REGEL STATT ACHT AENDERUNGEN - sie gilt auch fuer
   jeden kuenftigen Dialog, und das ist der Sinn.
   `.dialog--wide` mit `.dialog__body` bleibt daneben und ist die BESSERE
   Form (Titel und Knopfzeile stehen fest, nur die Mitte rollt) - ab jetzt
   die Kuer und nicht die Rettung. Dort rollt weiter der Rumpf: der aeussere
   Kasten ist Flex-Spalte mit derselben Hoehengrenze und laeuft nie ueber,
   also zeigt dieses `overflow-y` daneben keinen zweiten Rollbalken. */
.dialog {
  width: 520px;
  max-width: 100%;
  background: var(--sp-surface);
  border-radius: var(--sp-radius-panel);
  box-shadow: 0 24px 60px rgba(44, 34, 14, 0.25);
  padding: 24px 28px;
  max-height: calc(100dvh - 72px);
  overflow-y: auto;
}
.dialog__title { margin: 0; font-size: 17px; font-weight: 700; color: var(--sp-ink); }
.dialog__text { margin: 8px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--sp-ink-2); }
.dialog__actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 20px; }

/* ------------------------------ Leerzustände ----------------------------- */

.empty {
  border-left: 2px solid var(--sp-line-strong);
  padding: 2px 0 2px 14px;
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--sp-ink-2);
}
.empty p { margin: 0; }

/* ------------------------- Dokument-Split (34 : 66) ----------------------
   Unabhängig vom Kunden-Split: das Blatt braucht mehr Platz. */

.workspace--doc .chat { flex: 0 1 34%; min-width: 480px; }
.workspace--doc .context { width: auto; flex: 1 1 66%; min-width: 700px; }

/* ------------------------------ Buch / Blatt ------------------------------
   QM-Handbuch: Gliederung links, Blatt rechts — ein aufgeschlagenes Werk. */

.book {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  margin: 16px 16px 16px 0;
  background: var(--sp-surface);
  border: 1px solid var(--sp-line-strong);
  border-radius: var(--sp-radius-panel);
  box-shadow: var(--sp-shadow-panel);
  overflow: hidden;
}
.toc {
  flex: 0 0 340px;
  min-width: 0;
  border-right: 1px solid var(--sp-line-panel);
  overflow-y: auto;
  padding: 22px 20px 22px 26px;
}
.toc__label { margin: 0 0 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--sp-ink-3); }
.toc__chapter { margin: 16px 0 6px; font-size: 13.5px; font-weight: 700; color: var(--sp-ink); }
.toc__chapter:first-of-type { margin-top: 0; }
.toc a {
  display: flex;
  gap: 10px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--sp-ink-2);
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 8px;
}
.toc a:hover { background: #F3F0E9; color: var(--sp-ink); }
.toc a[aria-current="page"] { background: var(--sp-chip-bg); color: var(--sp-primary-deep); font-weight: 600; }
.toc__num { flex: 0 0 auto; color: var(--sp-ink-3); font-variant-numeric: tabular-nums; }

.sheet-pane { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.sheet-toolbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 12px 24px;
  border-bottom: 1px solid var(--sp-line-panel);
}
.sheet-stage { flex: 1 1 0; min-height: 0; overflow-y: auto; background: var(--sp-paper-backdrop); display: flex; justify-content: center; padding: 26px 0; }

/* Dokumentblatt (Handbuch, Nachweis, Zertifikat) */
.sheet {
  width: 560px;
  height: fit-content;
  background: #FFFFFF;
  border-radius: 4px;
  box-shadow: var(--sp-shadow-paper);
  padding: 44px 48px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--sp-ink);
}
.sheet h1 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.sheet h2 { margin: 22px 0 8px; font-size: 14.5px; font-weight: 700; }
.sheet p { margin: 8px 0 0; }
.sheet .table { font-size: 12.5px; }
.sheet__meta { margin: 4px 0 0; font-size: 11.5px; color: var(--sp-ink-3); }
.sheet__footer { margin-top: 26px; padding-top: 12px; border-top: 1px solid var(--sp-line); font-size: 11px; color: var(--sp-ink-3); display: flex; justify-content: space-between; gap: 12px; }

/* --------------------------- Vorgang / Fortschritt ------------------------ */

.progress { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--sp-ink-2); }
.progress__bar { width: 90px; height: 5px; border-radius: 999px; background: #EAE5DB; overflow: hidden; }
.progress__fill { display: block; height: 100%; border-radius: 999px; background: var(--sp-primary); }

/* ------------------------------ Upload-Zone ------------------------------ */

.upload {
  border: 1.5px dashed #D5CEC2;
  border-radius: 12px;
  background: #FDFCFA;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.upload__title { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--sp-ink); }
.upload__formats { margin: 0; font-size: 11.5px; color: var(--sp-ink-3); }
.upload__actions { display: flex; align-items: center; gap: 8px; }

/* -------------------------------- Lernkarte ------------------------------- */

.card-stack { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 14px; }
.lernkarte {
  width: 420px;
  max-width: 100%;
  min-height: 150px;
  background: var(--sp-surface-raised);
  border: 1px solid var(--sp-line-strong);
  border-radius: var(--sp-radius-panel);
  box-shadow: 0 10px 28px rgba(44, 34, 14, 0.07);
  padding: 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lernkarte__kicker { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--sp-ink-3); }
.lernkarte__text { margin: 0; font-size: 15px; line-height: 1.55; color: var(--sp-ink); }

/* Wissenstest-Antworten */
.quiz { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.quiz__option {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13.5px;
  line-height: 1.5;
  background: var(--sp-surface-raised);
  border: 1px solid var(--sp-outline-neutral);
  border-radius: 10px;
  padding: 11px 14px;
  cursor: pointer;
}
.quiz__option input { width: 15px; height: 15px; margin: 2px 0 0; accent-color: var(--sp-primary); }
.quiz__option:hover { border-color: var(--sp-outline); }

/* ----------------------------- Chat-Ergänzungen --------------------------- */

/* Quellenverweis mit Seitensprung */
.src { font-size: 12.5px; }
.src a { color: var(--sp-primary); font-weight: 600; text-decoration: none; }
.src a:hover { text-decoration: underline; text-underline-offset: 2px; }
.src__page { color: var(--sp-ink-3); }

/* Spido arbeitet noch */
.msg--pending .msg__body { color: var(--sp-ink-2); font-size: 13.5px; }

/* Kontextchip im Composer (Bezug der nächsten Frage) */
.composer__scope {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--sp-ink-2);
  border: 1px dashed var(--sp-outline-neutral);
  border-radius: var(--sp-radius-pill);
  padding: 6px 6px 6px 12px;
  margin-left: 4px;
  white-space: nowrap;
}
.composer__scope button {
  border: none;
  background: transparent;
  color: var(--sp-ink-3);
  font-size: 12px;
  cursor: pointer;
  padding: 2px 4px;
}

/* ------------------------------ Kleinkram -------------------------------- */

.back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--sp-ink-2); text-decoration: none; }
.back:hover { color: var(--sp-ink); }

.toolbar-title { margin: 0; font-size: 15px; font-weight: 700; color: var(--sp-ink); flex: 1 1 0; min-width: 0; }

.divider { border: none; border-top: 1px solid var(--sp-line); margin: 24px 0 0; }

.inline-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* Nachträge: verlinkte Listenzeilen, Hint-Körper, Abstände */
a.list-row { text-decoration: none; }
a.list-row:hover .list-row__title .obj { color: var(--sp-primary-deep); }
.hint__body { flex: 1 1 0; min-width: 0; }
.back + .page__head { margin-top: 10px; }
.page__head + .list, .page__head + .section { margin-top: 14px; }
.section .input { margin-top: 2px; }

/* Nachträge II: Buch-Spalte, Fortschrittsbreiten, Dialog-Demo */
.book-col { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.book-head { flex: 0 0 auto; padding: 32px 38px 0; }
.book-col .book { flex: 1 1 0; min-height: 0; margin: 18px 16px 0 16px; }
.book-col .composer-area { padding-top: 12px; }

.progress__fill { width: 40%; }
.progress__fill[data-width="7"]  { width: 7%; }
.progress__fill[data-width="35"] { width: 35%; }
.progress__fill[data-width="60"] { width: 60%; }
.progress__fill[data-width="90"] { width: 90%; }

/* Dialog in der Zustandsschau: eingebettet gezeigt, nicht über der Seite */
.dialog-backdrop--demo {
  position: static;
  background: #EDE9E1;
  border-radius: 14px;
  padding: 28px;
  justify-content: flex-start;
  margin-top: 12px;
}

/* ==========================================================================
   V2 — Dichte-Pass und Arbeitszonen
   Prinzip: mehr nutzbare Information pro Bildschirm, klare Hierarchie
   (Aufmerksamkeit → läuft → als Nächstes → erledigt → Hintergrund),
   Ruhe zwischen Gruppen statt zwischen jeder Zeile.
   ========================================================================== */

/* ------------------------------ Typo kompakter ---------------------------- */

.nav { padding: 14px 10px 14px; }
.nav__brand { font-size: 17px; padding: 4px 10px 14px; }
.nav__item { padding: 7px 10px; font-size: 13px; gap: 9px; border-radius: 8px; }
.nav__item svg { width: 16px; height: 16px; }
.nav__group--bottom .nav__item { font-size: 12.5px; color: #6F6860; padding: 6px 10px; }
.nav__group--bottom .nav__item svg { width: 14px; height: 14px; }
.nav__badge { font-size: 10.5px; padding: 1px 7px; }
.nav__meta { font-size: 10.5px; }

.page__scroll { justify-content: flex-start; }      /* Hauptbereich nach links */
.page__inner { max-width: 1020px; padding: 26px 40px 20px; }
.page__title { font-size: 19px; }
.page__kicker { font-size: 10.5px; margin-bottom: 3px; }
.page__lede { font-size: 13px; margin-top: 5px; max-width: 760px; }
.page__head-actions { padding-top: 0; }

.section { margin-top: 20px; }
.section__label { font-size: 10.5px; }
.section__note { font-size: 12px; margin-top: 5px; }

.list-row { padding: 9px 0; gap: 12px; }
.list-row__title { font-size: 13.5px; }
.list-row__sub { font-size: 12px; margin-top: 2px; }
.list-row--done { padding: 7px 0; }
.list-row--done .list-row__title { font-size: 12.5px; }

.btn { font-size: 12.5px; padding: 8px 14px; }
.btn--sm { font-size: 11.5px; padding: 6px 11px; }
.mark { font-size: 11px; padding: 2px 9px; }
.kv { font-size: 12.5px; row-gap: 5px; grid-template-columns: 130px minmax(0,1fr); }
.table { font-size: 12.5px; }
.table td { padding: 8px 12px 8px 0; }
.tile { padding: 12px 15px; }
.tabs { margin-top: 14px; }
.tab { font-size: 12.5px; padding: 8px 12px; }

.chat__inner { padding-top: 30px; gap: 18px; }
.msg { font-size: 14px; }
.composer-area { padding: 8px 24px 18px; }
.composer-area--left { align-items: flex-start; padding-left: 40px; }
.composer-area--left .composer { max-width: 720px; }
.composer__input { font-size: 13.5px; }
.composer__icon { width: 34px; height: 34px; }
.composer__send { width: 38px; height: 38px; }

/* ------------------------- Funktionale Kleinsymbole -----------------------
   14 px, Strich, immer mit Text — Orientierung, nie Dekoration. */

.ic { vertical-align: -2px; color: var(--sp-ink-3); flex: 0 0 auto; }
.ic--ok { color: var(--sp-ok); }
.ic--warn { color: var(--sp-warn); }
.ic--primary { color: var(--sp-primary); }

/* Faktenzeile: kurze, getrennte Angaben mit Symbol */
.facts { display: flex; flex-wrap: wrap; gap: 3px 16px; font-size: 12px; color: var(--sp-ink-2); margin-top: 3px; }
.fact { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.fact .obj, .fact .chip { font-size: 12px; }

/* --------------------------- A/B/C-Kennzeichnung --------------------------
   A = heute vorhanden (unmarkiert) · B = wahrscheinlich ableitbar ·
   C = braucht Core-Unterstützung. Nur für die Designabstimmung sichtbar. */

.ab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 14px;
  height: 14px;
  border-radius: 4px;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1;
  vertical-align: 2px;
  margin-left: 5px;
  cursor: help;
}
.ab--b { color: var(--sp-primary-deep); background: var(--sp-chip-bg); }
.ab--c { color: #92400E; background: #FDF3E3; }
.ab-legend {
  margin-top: 26px;
  padding-top: 10px;
  border-top: 1px solid var(--sp-line);
  font-size: 11.5px;
  color: var(--sp-ink-3);
}

/* ------------------------------ Arbeitszonen ------------------------------
   Unterschiedlich prominent: eine Entscheidung sieht anders aus als
   eine Erfolgsmeldung. */

.zone { margin-top: 20px; }
.zone__head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.zone__title {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sp-ink-3);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.zone__count { font-size: 11px; font-weight: 700; color: var(--sp-ink-3); }
.zone__more { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--sp-primary); text-decoration: none; }
.zone__more:hover { color: var(--sp-primary-deep); }

/* Aufmerksamkeit/Entscheidung: die EINE hervorgehobene Fläche der Seite */
.zone--attn .zone__title { color: #8A4A0B; }
.zone--attn .zone__body {
  background: #FBF5E9;
  border: 1px solid #EFDFC2;
  border-radius: 12px;
  padding: 2px 16px;
}
.zone--attn .list-row { border-bottom-color: #F0E3CB; }
.zone--attn .list-row:last-child { border-bottom: none; }

/* Spido hat erledigt: sichtbar und positiv, aber ruhig */
.zone--done .list-row { padding: 6px 0; border-bottom-color: #F0EBE2; }
.zone--done .list-row__title { font-size: 12.5px; color: #4A443D; }

/* Zweispaltige Zonenreihe (läuft / demnächst) */
.zone-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }

/* ------------------------- Kompakte Prozessdarstellung --------------------
   Kein starrer Workflow: bisheriger Verlauf (Punkte) + was als Nächstes
   ansteht. Punkte = Ereignisse, nicht Pflichtschritte. */

.trail { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 0; font-size: 11.5px; color: var(--sp-ink-3); margin-top: 5px; }
.trail__step { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.trail__dot { width: 8px; height: 8px; border-radius: 50%; box-sizing: border-box; }
.trail__step--done .trail__dot { background: #B9A7DD; }
.trail__step--done { color: var(--sp-ink-2); }
.trail__step--now .trail__dot { background: var(--sp-primary); outline: 3px solid var(--sp-chip-bg); }
.trail__step--now { color: var(--sp-primary-deep); font-weight: 600; }
.trail__step--next .trail__dot { background: transparent; border: 1.5px dashed #C9C0B2; }
.trail__link { width: 16px; height: 1px; background: #DDD6CA; margin: 0 6px; flex: 0 0 auto; }

/* ------------------------ Woche / Zeitleiste (Anstehend) ------------------- */

.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.day { border: 1px solid var(--sp-line-strong); border-radius: 10px; padding: 7px 9px 8px; background: var(--sp-surface-raised); min-height: 52px; }
.day--today { border-color: var(--sp-outline); background: #FAF7FE; }
.day--past { opacity: .55; }
.day__name { margin: 0; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--sp-ink-3); }
.day__items { margin: 5px 0 0; display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--sp-ink-2); }
.day__item { display: flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; }

/* ------------------------------ Mengen-Meter ------------------------------ */

.meter { display: flex; height: 6px; border-radius: 999px; overflow: hidden; background: #EAE5DB; min-width: 120px; }
.meter__seg--ok { background: #7FB89A; }
.meter__seg--run { background: #B9A7DD; }
.meter__seg--due { background: #E2B06E; }
.meter__seg[data-w="10"] { width: 10%; } .meter__seg[data-w="20"] { width: 20%; }
.meter__seg[data-w="25"] { width: 25%; } .meter__seg[data-w="30"] { width: 30%; }
.meter__seg[data-w="40"] { width: 40%; } .meter__seg[data-w="50"] { width: 50%; }
.meter__seg[data-w="60"] { width: 60%; } .meter__seg[data-w="75"] { width: 75%; }

/* ------------------------ Handbuch-Feinheiten (V2) ------------------------- */

.book-col .book { margin-top: 12px; }
.book-head { padding: 24px 40px 0; }
.toc { flex-basis: 300px; padding: 16px 14px 16px 20px; }
.toc a { font-size: 12px; padding: 3px 7px; }
.toc__chapter { font-size: 12.5px; margin: 12px 0 4px; }
.sheet-toolbar { padding: 10px 14px 10px 20px; flex-wrap: wrap; row-gap: 6px; }
.toolbar-title { font-size: 14px; }

/* Kompakte Kopf-Bilanz („heute: 18 · 14 verarbeitet …“) */
.tally { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 8px; font-size: 12.5px; color: var(--sp-ink-2); }
.tally__item { display: inline-flex; align-items: center; gap: 6px; }
.tally__item strong { color: var(--sp-ink); font-weight: 700; }

/* ==========================================================================
   V3 — Arbeitsräume: Prozesskette, mehrspaltige Seiten, breite Nutzung
   ========================================================================== */

/* Breite besser nutzen; Arbeitsräume dürfen horizontal Raum beanspruchen */
.page__inner { max-width: 1120px; padding: 24px 36px 20px; }
.page__inner--wide { max-width: 1400px; }
.page--wide { min-width: 1120px; }

/* Zweispaltiger Arbeitsraum: Arbeit links, Bestand/Kontext rechts */
.cols {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(300px, 5fr);
  gap: 0 44px;
  align-items: start;
}
.cols--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols > .zone:first-child, .cols > div > .zone:first-child { margin-top: 18px; }

/* Kompakte zweispaltige Liste (übrige Kunden, verarbeitete Eingänge) */
.list--cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }

/* ----------------------------- Prozesskette --------------------------------
   Fachlicher Verlauf eines Vorgangs: erledigt → jetzt → erwartet.
   Beschreibt, erzwingt nichts — keine Workflow-Engine. */

.chain { display: flex; align-items: flex-start; margin-top: 14px; }
.chain__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 92px;
  font-size: 11px;
  color: var(--sp-ink-3);
  text-align: center;
}
.chain__dot {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid #C9C0B2; background: var(--sp-surface-raised);
  box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
}
.chain__dot svg { display: block; }
.chain__label { font-weight: 600; color: var(--sp-ink-3); }
.chain__date { font-size: 10.5px; }
.chain__stage--done .chain__dot { background: var(--sp-primary); border-color: var(--sp-primary); }
.chain__stage--done .chain__label { color: var(--sp-ink-2); }
.chain__stage--now .chain__dot { border-color: var(--sp-primary); background: var(--sp-chip-bg); }
.chain__stage--now .chain__label { color: var(--sp-primary-deep); }
.chain__stage--blocked .chain__dot { border-color: var(--sp-warn); background: #FAF0E0; }
.chain__stage--blocked .chain__label { color: #8A4A0B; }
.chain__link { flex: 1 1 24px; min-width: 18px; height: 2px; background: #E3DCCF; margin-top: 7px; }
.chain__link--done { background: #C9B6E8; }

/* Mini-Kette in Listenzeilen */
.chain--sm { margin-top: 6px; }
.chain--sm .chain__stage { min-width: 64px; font-size: 10px; gap: 2px; }
.chain--sm .chain__dot { width: 11px; height: 11px; border-width: 1.5px; }
.chain--sm .chain__link { margin-top: 5px; min-width: 10px; }
.chain--sm .chain__date { display: none; }

/* Filterchips (Anstehend) */
.filters { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.filter {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600; color: var(--sp-ink-2);
  border: 1px solid var(--sp-line-strong); border-radius: var(--sp-radius-pill);
  background: var(--sp-surface-raised); padding: 4px 11px; text-decoration: none;
}
.filter[aria-pressed="true"], .filter--on { color: var(--sp-primary-deep); border-color: var(--sp-outline); background: var(--sp-chip-bg); }

/* Kleiner Zwischentitel innerhalb einer Zone (Gruppierung) */
.zone__sub { margin: 10px 0 2px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sp-ink-3); }

/* Composer auf Arbeitsräumen: an der Inhaltsspalte ausgerichtet */
.composer-area--left { padding-left: 36px; }

/* ==========================================================================
   V4 — Seitengrammatik und visuelles System
   Linie = Struktur · Fläche = besondere Bedeutung · Farbe = Zustand ·
   Symbol = Orientierung · Schriftgröße = Hierarchie · Violett = interaktiv.
   ========================================================================== */

:root {
  --sp-rule: #DCD4C5;          /* Bereichslinie */
  --sp-rule-strong: #C9BFAC;   /* Kopf-/Hauptlinie */
  --sp-work: #FFFFFF;          /* Arbeitsflächen: Tabellen, Kacheln */
  --sp-work-line: #E6DFD0;
  --sp-attn-bg: #FCF1DC;       /* Aufmerksamkeit — deutlich, nicht beige */
  --sp-attn-line: #EBD4A4;
  --sp-attn-ink: #7A4408;
}

/* Flächen differenzieren: Navigation dunkler als Inhalt */
body { background: #F5F2EC; }
.nav { background: #F1EDE4; border-right-color: #E2DACA; }
.workspace { background: #F8F6F1; }

/* ---------------------- Typografie: kompakter, kontrastreicher ------------ */

.nav__item { padding: 6px 9px; font-size: 12.5px; gap: 8px; }
.nav__item svg { width: 15px; height: 15px; }
.nav__brand { font-size: 16px; }
.nav__group--bottom .nav__item { font-size: 11.5px; padding: 5px 9px; }
.nav__group--bottom .nav__item svg { width: 13px; height: 13px; }

.page__inner { padding: 20px 36px 20px; }
.page__title { font-size: 20px; letter-spacing: -0.02em; }
.page__lede { font-size: 12.5px; }
.page__head { padding-bottom: 12px; border-bottom: 2px solid var(--sp-rule-strong); }

/* Auffällige Aussage/Zahl */
.stats { display: flex; gap: 30px; margin-top: 10px; }
.stat { display: flex; flex-direction: column; gap: 1px; }
.stat__n { font-size: 22px; font-weight: 700; line-height: 1.05; color: var(--sp-ink); }
.stat__n--warn { color: #A05A0C; }
.stat__n--ok { color: var(--sp-ok); }
.stat__l { font-size: 10.5px; color: var(--sp-ink-3); }

/* ----------------------- Bereiche: Linien statt Karten -------------------- */

.zone { margin-top: 0; border-top: 1px solid var(--sp-rule); padding: 11px 0 14px; }
.zone__head { margin-bottom: 7px; }
.zone__title { font-size: 11px; color: #57514A; }
.page__head + .zone, .stats + .zone, .filters + .zone, .week + .zone { border-top: none; }
.cols .zone:first-child, .cols > div > .zone:first-child { border-top: none; }

/* Aufmerksamkeit: die eine bedeutungstragende Fläche */
.zone--attn { border-top: none; padding-top: 14px; }
.zone--attn .zone__title { color: var(--sp-attn-ink); }
.zone--attn .zone__body {
  background: var(--sp-attn-bg);
  border: 1px solid var(--sp-attn-line);
  border-radius: 12px;
  padding: 2px 16px;
}
.zone--attn .list-row { border-bottom-color: #EEDCBA; }

/* Erledigt: ruhig, klein */
.zone--done .list-row { padding: 5px 0; border-bottom: none; }
.zone--done .list-row__title { font-size: 12px; }

.list-row { padding: 8px 0; }
.list-row__title { font-size: 13px; }
.list-row__sub { font-size: 11.5px; }
.list-row__meta { font-size: 11px; }
.facts { font-size: 11.5px; gap: 2px 14px; }
.log { font-size: 12px; }
.log__when { width: 72px; font-size: 11px; }
.section__note { font-size: 11px; color: var(--sp-ink-3); }
.ab-legend { font-size: 10.5px; }

/* --------------------------- Arbeitstabellen ------------------------------
   Für viele gleichartige, vergleichbare Objekte. Weiße Arbeitsfläche,
   Zeile = Information + Einstieg; Objekte klickbar, Aktion in der Zeile. */

.twrap {
  background: var(--sp-work);
  border: 1px solid var(--sp-work-line);
  border-radius: 12px;
  padding: 2px 16px 4px;
  margin-top: 10px;
  overflow-x: auto;
}
.table--work { width: 100%; border-collapse: collapse; font-size: 12.5px; margin: 0; }
.table--work th {
  text-align: left; font-size: 10px; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--sp-ink-3);
  padding: 10px 16px 7px 0; border-bottom: 1px solid var(--sp-line-strong);
  white-space: nowrap;
}
.table--work td {
  padding: 8px 16px 8px 0; border-bottom: 1px solid #F1ECE2;
  color: var(--sp-ink); vertical-align: middle;
}
.table--work tr:last-child td { border-bottom: none; }
.table--work tbody tr:hover td { background: #FAF7F1; }
.table--work .mark { font-size: 10.5px; padding: 2px 8px; }
.table--work .btn--sm { font-size: 11px; padding: 5px 10px; }
.td-num { text-align: right; font-variant-numeric: tabular-nums; }

/* -------------------------- Funktionskacheln ------------------------------
   Funktionaler Einstieg: klein, filigran, Icon + Wort. Kein Container. */

.fn-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.fn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; width: 94px; padding: 10px 6px 8px;
  background: var(--sp-work); border: 1px solid var(--sp-work-line); border-radius: 10px;
  font-size: 10.5px; font-weight: 600; color: #4A443D; text-decoration: none; text-align: center;
}
.fn svg { width: 16px; height: 16px; color: var(--sp-primary); }
.fn:hover { border-color: var(--sp-outline); color: var(--sp-primary-deep); }
.fn[aria-current="true"] { border-color: var(--sp-primary); background: #F8F5FE; color: var(--sp-primary-deep); }
.fn__meta { font-size: 9.5px; font-weight: 500; color: var(--sp-ink-3); }

/* Kompakte Zeilen-Kacheln (schmaler, in Panels) */
.fn--row { flex-direction: row; width: auto; padding: 6px 11px; gap: 7px; }
.fn--row svg { width: 13px; height: 13px; }

/* ------------------------------- Feinheiten -------------------------------- */

.chain { font-size: 10.5px; }
.chain__stage { min-width: 84px; }
.week { gap: 5px; }
.day { min-height: 48px; padding: 6px 8px; }
.context__title { font-size: 20px; }
.context__meta { font-size: 12px; }
.module__label { font-size: 10.5px; }
.module + .module { margin-top: 14px; }
.module { padding-top: 14px; }
.kv { font-size: 12.5px; }
.toc { flex-basis: 280px; }
.composer { padding: 5px 5px 5px 7px; }
.composer__send { width: 36px; height: 36px; }

/* ==========================================================================
   System-Nachträge (Runden Neukundenaufnahme & Fortbildungen)
   Gemeinsame Bestandteile — gelten produktweit, nicht je Seite definieren.
   ========================================================================== */

/* GRUNDREGEL BILDSCHIRMBREITE
   Eine Ansicht = kein horizontales Scrollen.
   Echter Split-Screen (mehrere eigenständige Arbeitsbereiche nebeneinander,
   z. B. Gespräch | Dokument) = horizontales Bewegen erlaubt, Mindestbreiten
   bleiben erhalten.
   `.app--fluid` setzt eine normale Draufsicht vollständig in die verfügbare
   Breite; die Standard-App (Splits) behält ihre Mindestbreiten. */
.app--fluid { min-width: 0; }
.app--fluid .page { min-width: 0; }
.app--fluid .page__inner { max-width: 1060px; }
.app--fluid .stats { gap: 34px; }
.app--fluid .stat__n { font-size: 27px; }

/* Rücksprung über dem Seitentitel */
.page__back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--sp-ink-2);
  text-decoration: none; margin-bottom: 10px;
}
.page__back:hover { color: var(--sp-primary); }

/* Zähler in Reitern */
.tab__count {
  display: inline-block; min-width: 18px; text-align: center;
  margin-left: 6px; padding: 1px 5px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700;
  background: var(--sp-surface-raised); color: var(--sp-ink-2);
}
.tab[aria-current="page"] .tab__count { background: var(--sp-chip-bg); color: var(--sp-primary-deep); }

/* Composer folgt dem Inhalt (keine künstliche Leerfläche):
   bei kurzem Inhalt direkt unter der letzten Interaktion, bei langem klebt
   er am unteren Rand des sichtbaren Bereichs. Varianten je Spaltentyp. */
.chat--flow { display: block; overflow-y: auto; }
.chat--flow .chat__scroll { flex: none; min-height: 0; overflow: visible; }
.chat--flow .chat__inner { padding-bottom: 6px; }
.chat--flow .composer-area {
  position: sticky; bottom: 0;
  padding-top: 14px;
  background: linear-gradient(to top, var(--sp-bg) 74%, rgba(246, 244, 240, 0));
}
.page--flow { display: block; overflow-y: auto; }
.page--flow .page__scroll { overflow: visible; display: block; }
.page--flow .page__inner { margin: 0 auto; }
.page--flow .composer-area {
  position: sticky; bottom: 0;
  padding-top: 14px;
  background: linear-gradient(to top, #F8F6F1 72%, rgba(248, 246, 241, 0));
}

/* Geöffnetes Dokument: der rechte Bereich ist ein vollständiger Arbeitsraum,
   keine Vorschaukarte — kein Kartenrand, kein Außenabstand, kein Radius.
   Echter Split: Mindestbreiten bleiben, horizontales Bewegen erlaubt. */
.workspace--doc .chat { flex: 0 1 30%; min-width: 420px; }
.workspace--doc .context--doc {
  flex: 1 1 70%; min-width: 760px; width: auto;
  margin: 0;
  border: none; border-left: 1px solid var(--sp-line-strong);
  border-radius: 0;
  box-shadow: none;
}

/* Eine sehr schmale Werkzeugzeile — maximale Höhe fürs Dokument */
.workspace--doc .doc-toolbar,
.docfull .doc-toolbar {
  min-height: 46px;
  padding: 6px 10px 6px 16px;
  gap: 8px;
  background: var(--sp-surface);
}
.doc-toolbar__line {
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  white-space: nowrap; overflow: hidden;
}
.doc-toolbar__name {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 700; color: var(--sp-ink);
}
.doc-toolbar__sep { flex: 0 0 auto; width: 1px; height: 16px; background: var(--sp-line-strong); }

/* Ruhiger neutraler Grund, DIN-A4-Blatt deutlich größer */
.workspace--doc .doc-stage,
.docfull .doc-stage { padding: 22px 28px 0; }
.workspace--doc .sheet,
.docfull .sheet {
  width: min(860px, calc(100% - 4px));
  min-height: 1150px;              /* A4-Proportion bei voller Breite */
  margin-bottom: 26px;
  padding: 62px 72px;
  font-size: 14px;
}
.workspace--doc .sheet h1,
.docfull .sheet h1 { font-size: 24px; }
.workspace--doc .sheet h2,
.docfull .sheet h2 { font-size: 16px; margin-top: 26px; }

/* Offene Stellen in Dokumenten: Bernstein statt Browser-Gelb */
.sheet mark {
  background: var(--sp-attn-bg); color: inherit;
  padding: 1px 3px; border-radius: 3px;
  box-shadow: inset 0 -1px 0 var(--sp-attn-line);
}

/* LIVE: konkrete Dokumentinstanz in der realen Arbeit (≠ Handbuchstandard).
   Bewusst die kräftigste Statusmarke — der Nutzer soll den Kontextwechsel sehen. */
.mark--live { background: var(--sp-primary); color: #FFFFFF; }

/* Dokument groß in der normalen Arbeitsfläche — eine konkrete Dokumentinstanz
   am Objekt (z. B. LIVE). Kein Split, kein Chat, kein Composer; Spido ist
   über die Werkzeugzeile zuschaltbar und macht daraus erst den echten Split. */
.docfull {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column;
  background: var(--sp-surface);
}

/* Kleiner Pfad zur Orientierung: Objekt → Bereich → Dokument (keine zweite Navigation) */
.crumbs {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 18px 7px 16px;
  font-size: 12px; color: var(--sp-ink-3);
  background: var(--sp-surface);
}
.crumbs a { color: var(--sp-ink-2); font-weight: 600; text-decoration: none; }
.crumbs a:hover { color: var(--sp-primary); }
.crumbs__sep { color: #C9C2B6; }
.crumbs__here { color: var(--sp-ink); font-weight: 600; }

/* Zustand, der Aufmerksamkeit braucht, ohne mit LIVE zu konkurrieren */
.mark--unvollstaendig { color: #9A6210; background: #FBF3DF; }

/* ---- Dokumentraum-Regel: Hinweise gehören zur Oberfläche, nie ins Blatt ----
   Spido-, Herkunfts- und Vollständigkeitshinweise stehen in dieser Zeile
   zwischen Werkzeugleiste und Bühne — das fachliche Dokument bleibt sauber
   und kann unverändert gespeichert/exportiert werden. */
.doc-note {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 18px;
  font-size: 12px; color: var(--sp-primary-deep);
  background: #F7F3FD; border-bottom: 1px solid #EDE5FA;
}
.doc-note p { margin: 0; }

/* ---- Weitere-Aktionen-Menü (⋯) ---- */
.menu {
  position: absolute; top: 44px; right: 10px; z-index: 40;
  min-width: 270px;
  background: var(--sp-surface); border: 1px solid var(--sp-line-strong);
  border-radius: 12px; box-shadow: 0 16px 40px rgba(44, 34, 14, 0.14);
  padding: 6px;
}
.menu__item {
  display: flex; align-items: center; gap: 8px;
  width: 100%; box-sizing: border-box; text-align: left; text-decoration: none;
  border: none; background: none; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--sp-ink);
  padding: 8px 10px; border-radius: 8px;
}
.menu__item:hover { background: #F3F0E9; }
/* Geschlossen heisst weg (MYS-262). `.menu` setzt selbst kein `display`,
   das `[hidden]` des Browsers wuerde also schon tragen - hingeschrieben
   wird es trotzdem, wie bei `.pick__list[hidden]` und `.suggest[hidden]`:
   wer hier spaeter ein `display:` erganzt, nimmt sonst still das
   Schliessen mit. */
.menu[hidden] { display: none; }
.menu__item--danger { color: #B4431C; }
.menu__item--danger:hover { background: #FBEFE9; }
.menu__sep { height: 1px; margin: 5px 8px; background: var(--sp-line); }
.doc-toolbar { position: relative; }

/* Eindeutige, ruhige Konsequenz (Löschen) */
.btn--danger { background: #B4431C; color: #FFFFFF; }
.btn--danger:hover { background: #9A3917; }

/* Erklärung als kleines i (auch als <span> nutzbar, z. B. im Menü) */
.help--i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; margin-left: auto;
  font-size: 11px; font-weight: 700;
  font-family: Georgia, 'Times New Roman', serif; font-style: italic;
}

/* ---- Spido-Stern: globales Muster für Dokument- und Objektansichten ----
   Keine Split-Ansicht, aber Spido sinnvoll zuschaltbar → kleiner
   feststehender Stern oben rechts. Hover reagiert dezent; Klick löst eine
   kurze Sparkle-Reaktion aus und öffnet den Spido-Bereich (echter Split).
   Verhalten: designsystem/spido-star.js — überall gleich. */
.spido-star {
  position: absolute; top: 96px; right: 22px; z-index: 30;
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--sp-surface); border: 1px solid #E8E2D7;
  box-shadow: 0 6px 18px rgba(44, 34, 14, 0.10);
  color: var(--sp-primary); cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.spido-star:hover {
  transform: translateY(-1px) scale(1.05);
  border-color: #D9CBF3;
  box-shadow: 0 10px 24px rgba(109, 40, 217, 0.18);
}
.spido-star:focus-visible { outline: 2px solid var(--sp-primary); outline-offset: 2px; }
.docfull { position: relative; }
.spido-star.is-firing svg { animation: sp-star-pop 0.45s ease; }
@keyframes sp-star-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.35) rotate(12deg); }
  100% { transform: scale(1); }
}
.spido-star__burst { position: absolute; inset: 0; pointer-events: none; }
.spido-star__burst i {
  position: absolute; left: 50%; top: 50%;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--sp-primary); opacity: 0;
}
.spido-star.is-firing .spido-star__burst i { animation: sp-burst 0.45s ease forwards; }
@keyframes sp-burst {
  0% { opacity: 0.9; transform: translate(-50%, -50%) scale(0.4); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .spido-star.is-firing svg, .spido-star.is-firing .spido-star__burst i { animation: none; }
}
/* Sparkle-Richtungen (CSS-only, keine Inline-Styles) */
.spido-star__burst i:nth-child(1) { --dx: 20px;  --dy: -12px; }
.spido-star__burst i:nth-child(2) { --dx: -18px; --dy: -16px; animation-delay: 0.02s; }
.spido-star__burst i:nth-child(3) { --dx: 14px;  --dy: 18px;  animation-delay: 0.04s; }
.spido-star__burst i:nth-child(4) { --dx: -15px; --dy: 14px;  animation-delay: 0.03s; }
.spido-star__burst i:nth-child(5) { --dx: 0px;   --dy: -22px; animation-delay: 0.05s; }
.spido-star__burst i:nth-child(6) { --dx: 22px;  --dy: 4px;   animation-delay: 0.01s; }

/* ====== Dokumentraum-Bausteine (aus dem Handbuch ins System gehoben) ======
   Blatt-Formulare, Seitenwechsel, Objektauswahl — ein Dokumentraum überall. */

/* Seitenwechsel unter dem Blatt, kompakt */
.doc-pager {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 10px 0 16px; font-size: 12px; color: var(--sp-ink-2);
  font-variant-numeric: tabular-nums;
}
.doc-pager a { color: var(--sp-primary-deep); text-decoration: none; font-size: 14px; padding: 2px 8px; border-radius: 8px; }
.doc-pager a:hover { background: var(--sp-chip-bg); }
/* DIE LEISTE STEHT UEBER DEM BLATT (Julia, 23.10.2026, 19:4x): "das Blaettern
   soll im Handbuch oben erfolgen ueber dem Handbuch, statt darunter, damit ich
   nicht immer scrollen muss." Verschoben ist die Marke in
   `dokumentraum.html`; hier dreht sich nur der Abstand, der fuer "unter dem
   Blatt" gedacht war (10 oben / 16 unten) - oben gehoert die Luft nach oben.

   WARUM EIN EIGENER NAME UND NICHT `.doc-pager` SELBST: `.doc-pager` steht
   doppelt im Haus (hier und in `handbuch.css`) und wird AUCH vom gemeinsamen
   Dokumentrenderer mit Knoepfen benutzt. Wer die Grundregel dreht, dreht
   Stellen mit, die niemand gemessen hat.
   ZWEI KLASSEN IM SELEKTOR, nicht eine: `handbuch.css` laedt NACH dieser
   Datei und setzt `.doc-pager` noch einmal. Ein einklassiger Selektor hier
   waere von der Reihenfolge der Blaetter abhaengig - dieser ist es nicht. */
.doc-pager.doc-pager--oben { padding: 16px 0 10px; }
/* Produktkorrektur (Multica): der gemeinsame Dokumentrenderer blättert
   über Buttons — gleiche Erscheinung wie die Links. */
.doc-pager button {
  border: none; background: none; cursor: pointer; font-family: inherit;
  color: var(--sp-primary-deep); font-size: 14px; padding: 2px 8px; border-radius: 8px;
}
.doc-pager button:hover:not(:disabled) { background: var(--sp-chip-bg); }
/* MULTICA, 03.10.2026: ZWEI ZEILEN NACHGETRAGEN. Claude hat die
   Pager-Knoepfe uebernommen (danke), aber ohne den Zustand `disabled` und
   ohne die Ziffernausrichtung. Der gemeinsame Dokumentrenderer setzt
   `disabled` auf dem ersten und letzten Blatt (`zeigen()` in
   `dokumentrenderer.js`); ohne diese Regel sieht ein toter Knopf aus wie ein
   lebender. `tabular-nums` haelt „1 / 5" beim Blaettern an derselben Stelle,
   statt die Seitenzahl bei jedem Klick springen zu lassen. */
.doc-pager button:disabled { color: #C9C2B6; cursor: default; }
.doc-pager output { font-variant-numeric: tabular-nums; }

/* --- Formulardarstellung im Blatt (Standard/Vorlage & LIVE-Instanz) ------ */
.fsec {
  display: flex; align-items: baseline; gap: 9px;
  margin: 24px 0 8px; padding-bottom: 5px;
  border-bottom: 2px solid #3A352F;
}
.fsec__num { font-size: 12px; font-weight: 700; color: var(--sp-ink-3); }
.fsec__title { margin: 0; font-size: 14.5px; font-weight: 700; }
.sheet .ftab { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.sheet .ftab th {
  text-align: left; font-size: 10px; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--sp-ink-3);
  padding: 5px 8px 5px 0; border-bottom: 1px solid var(--sp-line-strong);
}
.sheet .ftab td { padding: 7px 8px 7px 0; border-bottom: 1px solid var(--sp-line); vertical-align: top; }
.sheet .ftab .ftab__q { width: 58%; }
.sheet .ftab .ftab__c { width: 44px; text-align: center; }
/* Produktkorrektur (Multica): auf den Blatt-Kontext gescopet — die
   ungescopte Regel kollidierte mit den Checkbox-/Kreuzfeldern echter
   Spido-Master. */
.sheet .cb {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border: 1.4px solid #B9B1A2; border-radius: 4px;
  font-size: 10px; color: #FFFFFF; vertical-align: -2px;
}
.sheet .cb--on { background: var(--sp-primary); border-color: var(--sp-primary); }
.cbrow { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 8px 0 0; font-size: 12px; color: var(--sp-ink-2); }
.cbrow span.item { display: inline-flex; align-items: center; gap: 6px; }
.fnote {
  margin: 10px 0 0; min-height: 34px; border: 1px solid var(--sp-line);
  border-radius: 6px; padding: 7px 10px; font-size: 12px; color: var(--sp-ink-3);
}
.fnote--filled { color: var(--sp-ink); }

/* Schlanke Kundenauswahl im LIVE-Dialog */
.pick { margin-top: 14px; }
.pick__search {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 13px;
  padding: 9px 12px; border: 1px solid var(--sp-outline); border-radius: 10px;
  background: var(--sp-surface);
}
.pick__search::placeholder { color: var(--sp-ink-3); }
.pick__list { margin: 10px 0 0; }
.pick__row {
  display: flex; align-items: baseline; gap: 10px;
  padding: 9px 10px; border-radius: 10px; text-decoration: none;
  /* EINE ZEILE, DIE ABSENDET, DARF NICHT WIE EIN KNOPF AUSSEHEN.
     Gemessen am Glas, nicht geschlossen: ein `<button>` mit dieser Klasse
     kam mit 2px OUTSET Rahmen, Hintergrund rgb(239,239,239), eigener
     Schriftgroesse 13,33px und `cursor:default` heraus - ein grauer
     3D-Knopf. Der Entwurf verlangt ausdruecklich "kein Rahmen" und eine
     duenne Trennlinie (E-J64); E-J56 verlangt dieselbe Tabellenform.
     Die Uebergabe zeigt an dieser Stelle ein `<a>`, und genau daran ist der
     Mangel vorbeigelaufen: `<a>` traegt keine dieser Eigenschaften, also
     fiel am Entwurf nichts auf. Das Erzeugnis MUSS hier aber ein `<button>`
     sein - es entsteht eine LIVE-Instanz, und das geschieht mit POST und
     CSRF. Diese Gruppe nimmt dem Knopf genau die Knopfeigenschaften und
     laesst ihn, was er sein soll: eine Zeile. Fuer ein `<a>` ist sie
     wirkungslos - beide Formen rendern danach gleich. */
  width: 100%; box-sizing: border-box;
  border: 0; background: none; color: inherit; font: inherit;
  text-align: left; cursor: pointer;
  border-bottom: 1px solid var(--sp-line);
}
.pick__row:hover { background: var(--sp-chip-bg); }
.pick__row:last-child { border-bottom: none; }
.pick__name { font-size: 13.5px; font-weight: 650; color: var(--sp-primary-deep); }
.pick__meta { margin-left: auto; font-size: 11.5px; color: var(--sp-ink-3); }
.dialog__hint { margin: 12px 0 0; font-size: 11.5px; color: var(--sp-ink-3); }

/* LIVE direkt bearbeitbar: echte Felder im Blatt (LIVE = Benutzung) */
.cbx { width: 15px; height: 15px; margin: 0; accent-color: var(--sp-primary); vertical-align: -2px; }
.finput {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 12.5px;
  border: none; border-bottom: 1px dashed #D8D1C4; background: transparent;
  padding: 2px 0; color: var(--sp-ink);
}
.finput:focus { outline: none; border-bottom: 1px solid var(--sp-primary); }
.ftextarea {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 12.5px; line-height: 1.5;
  min-height: 44px; border: 1px solid var(--sp-line); border-radius: 6px;
  padding: 7px 10px; background: #FDFCFA; color: var(--sp-ink); resize: vertical;
}
.ftextarea:focus { outline: none; border-color: var(--sp-primary); }
.sheet--edit .ftab td { padding-top: 6px; padding-bottom: 6px; }

.doc-stage--col { flex-direction: column; align-items: center; justify-content: flex-start; }

.doc-pager .is-off { color: #C9C2B6; pointer-events: none; }

.doc-toolbar__quiet { font-size: 12px; color: var(--sp-ink-3); white-space: nowrap; }

/* Overlay für kompakte Dialoge über beliebigen Ansichten */
.dialog-overlay {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  background: rgba(38, 34, 30, 0.32);
}
.dialog-overlay .dialog { width: 430px; max-width: calc(100vw - 48px); }

/* Objektsuche im Dialog: Treffer erst während der Eingabe, keine Vorab-Liste */
.pick__hint { margin: 10px 2px 0; font-size: 12px; color: var(--sp-ink-3); }
.pick__none { margin: 10px 2px 0; font-size: 12.5px; color: var(--sp-ink-2); }
.pick__list[hidden], .pick__hint[hidden], .pick__none[hidden] { display: none; }

/* Spido schlägt einen erkannten Bezug vor — bestätigen oder verwerfen.
   Als schwebender Vorschlag am Feld (.fwrap) oder inline (z. B. im Chat). */
.fwrap { position: relative; }
.suggest {
  display: flex; align-items: center; gap: 10px;
  background: var(--sp-surface);
  border: 1px solid #E3D8F6; border-left: 3px solid var(--sp-primary);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 12.5px; color: var(--sp-ink);
  box-shadow: 0 10px 26px rgba(44, 34, 14, 0.12);
}
.fwrap > .suggest { position: absolute; top: calc(100% + 6px); left: 0; z-index: 35; width: max-content; max-width: 540px; }
.suggest--inline { margin-top: 10px; box-shadow: none; }
.suggest__q { margin: 0; }
.suggest__q strong { font-weight: 700; }
.suggest__meta { color: var(--sp-ink-3); font-size: 11.5px; }
.suggest__no {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: none; color: var(--sp-ink-3); cursor: pointer; padding: 0;
}
.suggest__no:hover { background: #F3F0E9; color: var(--sp-ink); }
.suggest[hidden] { display: none; }
.pick__search:focus { outline: none; border-color: var(--sp-primary); box-shadow: 0 0 0 3px #EFE8FB; }
.suggest .btn, .suggest .module__more { white-space: nowrap; }

/* ---- Dokument | Objektkontext — ENTFALLEN (R2 aus MYS-198, Julia 13.10.2026).
   Hier stand `.workspace--objctx .docfull { min-width: 700px }` fuer die
   Kurzansicht rechts neben dem Dokument.

   DIESE EINE ZEILE WAR MITURSACHE VON JULIAS BEFUND. Gemessen am 14.10.2026
   (`werkzeuge/mys198-ansichtsmodi-am-glas-messen.py`, Fenster 1280 px): mit
   der Kurzansicht stand die Dokumentspalte auf ihren 700 px Mindestbreite,
   die SEITE wurde dadurch 1488 px breit bei 1265 px Platz und bekam einen
   waagerechten Rollbalken. Der rollt die Seite und nicht die Buehne - genau
   Julias Satz "abgeschnitten, auch ganz nach rechts gerollt".

   Eine Spalte mit Mindestbreite kann nicht nachgeben; nachgegeben hat
   stattdessen das Fenster. Mit der Kurzansicht faellt beides weg.
   `.crumbs a[aria-current="true"]` stand ebenfalls hier und hat das aktive
   Glied im Objekt-Pfad gezeichnet - es gibt keinen Panelschalter mehr, der
   aktiv sein koennte. */

/* ---- Druck: das Blatt druckt sauber, die Oberfläche verschwindet ----
   (druckfähige Teilnehmerlisten, Nachweise, Protokolle) */
@media print {
  .nav, .crumbs, .doc-toolbar, .doc-note, .doc-pager, .composer-area,
  .spido-star, .ab-legend { display: none !important; }
  .app, .workspace, .docfull { display: block; min-width: 0; background: #FFFFFF; }
  .doc-stage { overflow: visible; padding: 0; background: #FFFFFF; display: block; }
  .sheet { width: auto; min-height: 0; margin: 0; box-shadow: none; border-radius: 0; padding: 0; }
}

/* ---- Scroll-Härtung: jeder Inhalt ist vertikal vollständig erreichbar ----
   Höhenkette html/body (100 %) → .app (100 %) → Spalte (min-height:0) →
   eigener Scrollbereich. Einzelansichten scrollen vertikal, nie horizontal.

   MYS-249: `100dvh` STAND HIER AN DER SCHALE und ist ERSATZLOS WEG. Der Grund
   steht bei `.app` oben: eine Schale auf einem Bildschirmmaß kennt den
   waagerechten Rollbalken des Körpers nicht und ragt um dessen 15 px hinaus.

   DER NAHELIEGENDE RETTUNGSVERSUCH IST GEMESSEN UND VERWORFEN. Das dynamische
   Maß an das obere Ende der Kette zu schieben — `html { height: 100dvh }`,
   `body` und `.app` auf `100 %` — sieht aus, als bliebe damit beides: das
   dvh-Maß und die verfügbare Höhe. Es bleibt aber der Balken. Gemessen
   (`werkzeuge/mys249-seite-rollt-nicht-probe.py`, Arm `dvh-an-html`, Fenster
   1280x900): mit der Zeile steht die Schale wieder auf 813 px statt 798, und
   der senkrechte Balken ist nicht weg, sondern nur UMGEZOGEN — er sitzt am
   Fenster statt am Körper und nimmt dort weiter 15 px Breite weg
   (`body.clientWidth` 1265 statt 1280). Ein festes `height` an `html` macht
   den Körper wieder blind für den Balken, eine Stufe höher.
   Ohne die Zeile fällt die Kette auf `html, body { height: 100% }` zurück
   (oben) — das ist das Maß, das den Balken kennt. Was verloren geht, ist das
   dynamische Maß für ein- und ausfahrende Browserleisten; bei einer Schale mit
   `min-width: 1440px` ist das kein Fall, der hier vorkommt, und ein Balken
   ohne Inhalt ist der höhere Preis. */
.app { height: 100%; min-height: 680px; }

/* MYS-257 — DIE SEITE SELBST ROLLT NICHT MEHR, wo die Flussseite ihren eigenen
   Rollbereich hat. Julia am 19.10.2026, mit Bildschirmfoto der Spido-Seite:
   „Außerdem laufen rechts zwei Scrollbalken. Das darf nur einer sein."

   DERSELBE FEHLERTYP WIE MYS-249, ABER EIN ANDERER VERURSACHER — und das ist
   gemessen, nicht übernommen (`werkzeuge/mys257-spido-ein-balken-probe.py`).
   Bei MYS-249 war es die Bezugsgröße der Höhe (`100vh` statt `100 %`); hier
   ist es die MINDESTHÖHE 680 px eine Zeile höher. Gemessen an `/360` im
   Behälter-Chromium:

     Fenster     Innenhöhe   .app    BODY roll/sicht   Über   Rand
     1280x900      813       813       813 /  813       + 0    0 px
     1280x760      673       680       680 /  673       + 7   15 px   <- Balken
     1024x740      653       680       680 /  653       +27   15 px   <- Balken
     1280x600      513       680       680 /  513      +167   15 px   <- Balken

   Unter 680 px Innenhöhe hält die Schale ihre Mindesthöhe und ragt um genau
   die Differenz hinaus; die Seite bekommt dafür rechts einen senkrechten
   Balken, in dem KEIN Inhalt steht — daneben steht der der Spalte, die
   wirklich rollt (`.page--flow`, Überhang hier 1123 bis 1531 px). Das sind
   Julias zwei Balken. Unter 680 px kommt man nicht nur mit einem kleinen
   Fenster: 150 % Browserzoom auf einem 1080er Schirm reicht.

   WARUM DIE MINDESTHÖHE HIER NICHTS KAUFT. Sie steht an `.app` als
   Erreichbarkeitsversicherung: lieber die Seite rollen lassen, als das untere
   Ende der Schale abzuschneiden (siehe MYS-249, Arm `gedeckelt`). Bei einer
   Flussseite ist der Inhalt aber ohnehin erreichbar — er liegt in
   `.page--flow`, und das Ding rollt selbst. Die Versicherung zahlt auf eine
   Police, die es nicht gibt, und kostet einen Balken.

   DESHALB `:has()` UND NICHT EINFACH `.app--fluid`. Die Mindesthöhe fällt nur
   dort, wo unter der Schale WIRKLICH eine Flussseite hängt. Die Dokumentansicht
   (`.docfull`, Vollansicht des Dokumentraums und `praesenzansicht`) trägt
   ebenfalls `.app--fluid`, hat aber einen anderen Rollbereich (`.doc-stage`)
   und bleibt damit unberührt — `a04-einpassung-schirm-probe.py` und
   `mys249-seite-rollt-nicht-probe.py` messen genau dort weiter. `:has()` steht
   in diesem Haus schon in `handbuch.css` und `alphatest.css`; es ist nichts
   Neues.

   GEMESSEN BLEIBT EIN FALL, in dem die Seite rollt, und er ist richtig: unter
   365 px Innenhöhe braucht die MENÜLEISTE mehr Platz als da ist — 365 px ist
   genau ihre Eigenhöhe. Dann rollt die Seite für etwas, das Inhalt IST, und
   das ist die Unterscheidung, um die Julia gebeten hat. Die Grenze ist auf den
   Pixel gemessen: 365 px Innenhöhe → 0 Überhang, 353 px → +12 px,
   333 px → +32 px. */
.app--fluid:has(> .workspace > .page--flow) { min-height: 0; }

.page--flow, .chat--flow, .docfull { min-height: 0; }
.page--flow .page__inner { padding-bottom: 40px; }
.docfull .doc-stage { padding-bottom: 40px; }

/* Breiter Dialog mit scrollbarem Rumpf (Listen-Auswahl) */
.dialog--wide { width: 600px; max-width: calc(100vw - 48px); max-height: calc(100dvh - 72px); display: flex; flex-direction: column; }
.dialog__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin-top: 6px; }

/* ===========================================================================
   DER FACHINHALT IN DER NEUEN SCHALE  (MYS-296, 27.10.2026)

   JULIAS GRUNDSATZENTSCHEIDUNG, Satz 3: "Die Umstellung soll möglichst durch
   die Integration des neuen Seitenrahmens erfolgen. Bereits funktionierende
   Fachkomponenten, Dokumentlayouts, Editoren, Fortbildungen und
   Arbeitsabläufe dürfen dabei nicht unnötig neu entwickelt oder verändert
   werden. Vorhandene fachbereichsspezifische CSS-Regeln dürfen erhalten
   bleiben. Sie sind nicht automatisch eine alte Oberfläche."

   Julias Regeln hängen hinter der Torklasse `.spido`. Auf einer Claude-Seite
   sind sie wirkungslos — deshalb bekommt der FACHINHALT sein Tor zurück,
   innerhalb des neuen Rahmens: `<div class="sp-fach spido">`. Damit gelten
   die rund 1770 Nachfahrenregeln Julias WIEDER, Zeile für Zeile dieselben,
   ohne Kopie und ohne zweite Herkunft.

   WAS DIESE REGEL TUT, UND WARUM ES GENAU VIER EIGENSCHAFTEN SIND. Das blanke
   `.spido` ist bei Julia der SEITENRAHMEN und setzt
   `display:flex; flex-direction:column; min-height:100vh; background:…`.
   Innerhalb des Claude-Rahmens wäre das ein zweiter, bildschirmhoher Rahmen
   im ersten. Genau diese vier werden zurückgenommen — mehr nicht; alles
   andere an Julias Blättern bleibt unberührt.

   `.spido.app` (ihr 248px-Raster mit der Seitenleiste) wird NICHT neutralisiert,
   weil die Hülle die Klasse `app` gar nicht trägt. Gemessen vor dieser Regel:
   von 1878 Regeln treffen 11 das Tor selbst, 6 davon verlangen `.spido.app`.
   Variablen kollidieren nicht (Julia setzt `--spido-*`, dieses System liest
   `--sp-*`; Schnittmenge 0).
   ========================================================================== */
.sp-fach.spido {
  display: block;
  min-height: 0;
  background: transparent;
}

/* ===========================================================================
   AB HIER: KLASSEN, DIE MYS-307 NEU EINFUEHRT.

   Jede davon muss NEU sein. Eine Regel, die einen Namen trifft, den es weiter
   oben schon gibt, steht spaeter und gewinnt - und aendert damit
   stillschweigend fremde Seiten.

   AM 04.11.2026 IST GENAU DAS PASSIERT: `.kv` gibt es seit je als
   `<dl class="kv">` mit dt/dd - Datenschutzseite, Kundenkontext,
   Massnahmenplan, acht Stellen. Meine Regel stand spaeter und hat sie alle auf
   zwei gleich breite Spalten gestellt. Sie heisst jetzt `.zkv` (Zugangszone).

   `mys307-benutzerverwaltung-probe` misst diese Grenze: kein Selektor hinter
   dieser Marke darf davor schon vorkommen.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Die Benutzerverwaltung (MYS-307, Julias Festlegungen vom 02.11.2026)

   IHR MASSSTAB STEHT IN IHREM ABSCHNITT 5: "ruhig, kompakt, verstaendlich und
   moeglichst ohne unnoetiges Scrollen" - und "Bitte die Schriftgroesse der
   Hinweise insgesamt reduzieren".

   WARUM DIESE REGELN HIER STEHEN UND NICHT IN EINEM `<style>` AM BLATT: jede
   Klasse im Markup braucht eine Regel in einem Stilblatt, das die Seite auch
   WIRKLICH LAEDT - AK-SCHALENDECKUNG misst genau das, und eine Regel im Blatt
   waere fuer sie unsichtbar. `spido-system.css` ist das Blatt des
   Claude-Systems und wird von der Administration geladen.
   --------------------------------------------------------------------------- */

/* Die Zugangszone: zwei Spalten Angabe/Wert, ruhig und ohne Kasten je Zeile. */
.zkv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 26px; }
.zkv__z { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0;
         border-bottom: 1px solid var(--sp-linie, rgba(0,0,0,.055)); font-size: 13.5px; }
.zkv__k { color: var(--sp-ink-2); }
.zkv__w { font-weight: 600; text-align: right; }
@media (max-width: 760px) { .zkv { grid-template-columns: 1fr; } }

/* Die Rechteliste im LESEMODUS: zwei Spalten, Haken statt Kaestchen. Ein
   fehlendes Recht steht MIT da und ist nur ruhiger - Julias Abschnitt 2:
   "zeigen die tatsaechlich vorhandenen Rechte sowie Abweichungen". Wer nur die
   vorhandenen zeigt, laesst die Frage offen, was es sonst noch gaebe. */
.rl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1px 26px; padding: 2px 0 2px 2px; }
.rl__z { display: flex; align-items: center; gap: 7px; font-size: 13.5px; padding: 2px 0; }
.rl__an { color: var(--sp-gut, #1b8a4b); font-weight: 700; width: 13px; flex: none; }
.rl__aus { color: var(--sp-ink-3, #c3c3c9); width: 13px; flex: none; }
.rl__z--aus { color: var(--sp-ink-2); }
@media (max-width: 760px) { .rl { grid-template-columns: 1fr; } }

/* Die Abweichungsmarke. KLEIN UND NEBEN DEM RECHT, nicht als eigene Liste:
   Julias Abschnitt 2 will sie "verstaendlich", nicht prominent. */
.pill { font-size: 11px; padding: 1px 6px; border-radius: 9px; font-weight: 650;
        white-space: nowrap; }
.pill--plus { background: rgba(27,138,75,.12); color: #15713e; }
.pill--minus { background: rgba(163,43,34,.1); color: #a32b22; }

/* Der kurze Sicherheitshinweis (ihr Abschnitt 5). */
.hint-s { font-size: 12.5px; color: var(--sp-ink-2); line-height: 1.5; }
.hint-s > details { display: inline; }
.hint-s > details > summary { display: inline; cursor: pointer; text-decoration: underline; }
.hint-s > details > summary::-webkit-details-marker { display: none; }

/* Die Aktionsreihe der Verwaltung - eine Zeile, kein Kasten je Knopf. */
.aktrow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

/* "Das aendert sich" vor dem Speichern (ihr Abschnitt 3) und die zusaetzliche
   Bestaetigung bei heiklen Erweiterungen (ihr Abschnitt 4). */
.diffbox { border: 1px solid var(--sp-linie, #e3e3e8); border-radius: 10px;
           padding: 11px 13px; background: var(--sp-flaeche-2, #fafafb); font-size: 13.5px; }
.diffbox > b { display: block; margin-bottom: 5px; font-size: 12px;
               text-transform: uppercase; letter-spacing: .03em; color: var(--sp-ink-2); }
.diffz { display: flex; gap: 8px; align-items: center; padding: 2px 0; }
.warnbox { border: 1px solid #f0d7a8; background: #fdf6e7; border-radius: 10px;
           padding: 11px 13px; font-size: 13.5px; }
.warnbox > b { display: block; margin-bottom: 4px; }

/* --- Die Berechtigungsgruppen (MYS-307, Julias UX-Vorgaben vom 03.11.2026) ---
   "Jede Gruppe erscheint als gut erkennbare, anklickbare Zeile mit
   Bezeichnung, kurzer Beschreibung und Berechtigungsstatus." */
.zone__head--klick { cursor: pointer; }
.zone__head--klick:hover { background: var(--sp-surface, rgba(0,0,0,.02)); }
.rg__besch { font-size: 12.5px; color: var(--sp-ink-2); font-weight: 400;
             flex: 1 1 auto; min-width: 0; }
@media (max-width: 760px) { .rg__besch { display: none; } }

/* "Nicht erlaubt" als WORT (ihr Abschnitt 3). Ein Zeichen allein laesst
   offen, ob es Status oder Aufzaehlung ist. */
.rl__nein { font-size: 11.5px; color: var(--sp-ink-2); font-style: italic;
            margin-left: auto; padding-left: 10px; white-space: nowrap; }

/* Das kleine ⓘ an einem einzelnen Recht (ihr Abschnitt 4) - statt eines
   pauschalen Warnkastens unter der Liste. Aufklappbar ohne Skript. */
.info { display: inline; }
.info > summary { display: inline; cursor: pointer; list-style: none;
                  color: var(--sp-akzent, #6b4df6); font-size: 12px; }
.info > summary::-webkit-details-marker { display: none; }
.info__text { display: block; margin: 4px 0 2px 20px; font-size: 12.5px;
              line-height: 1.5; color: var(--sp-ink-2);
              border-left: 2px solid var(--sp-linie, #e3e3e8); padding-left: 9px; }
/* Das Infozeichen als Kreis aus CSS statt als Schriftzeichen - ⓘ fehlt in
   vielen Schriften und wird dort zur leeren Box (gemessen am 03.11.2026). */
.info__zeichen { display: inline-flex; align-items: center; justify-content: center;
                 width: 14px; height: 14px; border-radius: 50%; font-size: 10px;
                 font-weight: 700; font-style: normal; line-height: 1;
                 border: 1px solid currentColor; vertical-align: text-bottom; }

/* Ein GEOEFFNETER Infotext nimmt die ganze Zeile (MYS-307, 04.11.2026).
   GEFUNDEN IM BROWSERGANG, nicht von einer Probe: `.rl` ist zweispaltig, und
   der aufgeklappte Text sass in EINER Zelle - er quetschte die Beschriftung
   daneben auf drei Woerter Breite ("Zugriff / auf eine / Unterlage / ändern").
   Ein Hinweis, der die Zeile unlesbar macht, erklaert nichts.
   `:has()` kennt jeder aktuelle Browser; wo es fehlt, bleibt es wie bisher. */
.rl__z:has(> details.info[open]) { grid-column: 1 / -1; align-items: flex-start; }
.rl__z:has(> details.info[open]) > span:first-child { padding-top: 1px; }
.info[open] { display: block; margin-left: 2px; }