/* Lazulian — Aufnahme-Mockup Styles
   Ruhiges, professionelles Card-Layout. Akzentfarbe: Lapislazuli-Blau.
   Self-contained: keine externen Fonts/Assets/CDNs. */

:root {
  --lapis: #1f4fb5;
  --lapis-dunkel: #163a86;
  --lapis-hell: #eaf0fc;
  --lapis-rand: #c6d5f4;
  --bg: #f4f6fb;
  --karte: #ffffff;
  --rand: #e2e6ee;
  --text: #1c2230;
  --text-schwach: #5a6478;
  --text-sehr-schwach: #8a93a6;
  --gefahr: #c62d3a;
  --gefahr-dunkel: #9e222d;
  --gefahr-hell: #fdeceD;
  --ok: #1f9d6b;
  --warn: #b7791f;
  --warn-hell: #fdf3e0;
  --schatten: 0 1px 2px rgba(20, 30, 60, .06), 0 4px 14px rgba(20, 30, 60, .06);
  --radius: 12px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Mockup-Demo-Leiste ---------- */
/* Bewusst im normalen Dokumentfluss (kein fixed/sticky), damit die Leiste im
   fullPage-Screenshot niemals Seiteninhalt (z.B. die Statuszeile) verdeckt. */
.mockup-demo {
  position: static;
  background: #10151f;
  color: #f2f5fb;
  border-bottom: 2px dashed #45506a;
  padding: 10px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.mockup-demo__marke {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #ffd257;
  background: rgba(255, 210, 87, .12);
  border: 1px solid rgba(255, 210, 87, .4);
  border-radius: 6px;
  padding: 3px 9px;
  margin-right: 6px;
}
.mockup-demo__gruppe {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.mockup-demo__trenner {
  width: 1px;
  align-self: stretch;
  background: #3a445c;
  margin: 0 4px;
}
.mockup-demo__label {
  font-size: 12px;
  color: #9aa4bb;
  margin: 0 4px 0 8px;
}
.demo-btn {
  font: inherit;
  font-size: 13px;
  color: #dbe3f5;
  background: #232b3b;
  border: 1px solid #3a445c;
  border-radius: 7px;
  padding: 6px 11px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
/* Hover bleibt bewusst neutral-grau (kein Blaustich), damit es nie mit dem
   aktiven Zustand verwechselt wird. */
.demo-btn:hover { background: #333c4e; border-color: #4a5670; }
.demo-btn:focus-visible { outline: 2px solid #8fa8e6; outline-offset: 2px; }
/* Genau der aktive Zustands-/Overlay-Button ist gefuellt; alle anderen sind
   zurueckgesetzt (aria-pressure="false" faellt auf die .demo-btn-Grundregel). */
.demo-btn[aria-pressed="true"] {
  background: var(--lapis);
  border-color: #7fa0ea;
  color: #fff;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}
.demo-btn[aria-pressed="true"]:hover { background: var(--lapis-dunkel); }
.demo-btn--overlay[aria-pressed="true"] {
  background: var(--warn);
  border-color: #e3b45a;
}
.demo-btn--overlay[aria-pressed="true"]:hover { background: #9c6716; }

/* ---------- App-Shell / Kopf ---------- */
.shell {
  max-width: 1320px;
  margin: 0 auto;
  padding: 22px 24px 60px;
}
.app-kopf {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 0 18px;
}
.app-logo {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--lapis), var(--lapis-dunkel));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 20px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.15), 0 2px 6px rgba(22,58,134,.35);
  flex: none;
}
.app-kopf__titel { display: flex; flex-direction: column; line-height: 1.25; }
.app-kopf__marke { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.app-kopf__marke span { color: var(--lapis); }
.app-kopf__pfad { font-size: 13px; color: var(--text-schwach); }
.app-kopf__pfad b { color: var(--text); font-weight: 600; }
.app-kopf__rechts { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.rolle-badge {
  font-size: 12px;
  color: var(--lapis-dunkel);
  background: var(--lapis-hell);
  border: 1px solid var(--lapis-rand);
  border-radius: 20px;
  padding: 4px 11px;
  font-weight: 600;
}

/* ---------- Warnbanner ---------- */
.warnbanner {
  background: var(--warn-hell);
  border: 1px solid #f0dca6;
  border-left: 4px solid var(--warn);
  color: #7a5410;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13.5px;
  margin-bottom: 16px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.warnbanner b { color: #6a4a0e; }

/* ---------- Karten / Panels ---------- */
.karte {
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 18px 20px;
  margin-bottom: 16px;
}
.karte h3 {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.karte__untertitel {
  color: var(--text-schwach);
  font-size: 13px;
  margin: -6px 0 14px;
}
.karten-icon {
  width: 22px; height: 22px; flex: none;
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--lapis-hell); color: var(--lapis);
  font-size: 13px;
}

.hinweis { color: var(--text-schwach); font-size: 13.5px; margin: 8px 0; }
.hinweis-klein { color: var(--text-sehr-schwach); font-size: 12.5px; }

/* ---------- Buttons ---------- */
.btn {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  padding: 9px 16px;
  border: 1px solid transparent;
  cursor: pointer;
  /* Kein Uebergang auf background: der Wechsel disabled<->enabled (grau<->satt-blau)
     muss sofort durchschlagen. Ein background-Transition wuerde beim Freischalten den
     Farbwechsel ueber ~120ms interpolieren -- ein computed-style-Messwert (oder das Auge)
     erwischt dann den grauen Zwischenwert. Nur box-shadow/opacity animieren. */
  transition: box-shadow .12s, opacity .12s;
}
/* Disabled: eindeutig ausgegraut (nicht nur transparent) -- klarer Kontrast
   zum satten enabled-Zustand. Faerbung/Schatten der Varianten werden neutralisiert. */
.btn:disabled {
  cursor: not-allowed;
  background: #e6e9f0 !important;
  color: #a2aab9 !important;
  border-color: #e6e9f0 !important;
  box-shadow: none !important;
}
.btn-primary {
  background: var(--lapis);
  color: #fff;
  box-shadow: 0 1px 2px rgba(22,58,134,.3);
}
/* Enabled: satt Lapislazuli, identisch zu "Aufnahme fortsetzen"/"Fortsetzen". */
.btn-primary:not(:disabled):hover { background: var(--lapis-dunkel); }
.btn-sekundaer {
  background: #fff;
  color: var(--text);
  border-color: var(--rand);
}
.btn-sekundaer:not(:disabled):hover { background: #f6f8fc; }
.btn-gefahr {
  background: var(--gefahr);
  color: #fff;
  box-shadow: 0 1px 2px rgba(198,45,58,.3);
}
.btn-gefahr:not(:disabled):hover { background: var(--gefahr-dunkel); }
.btn-klein { font-size: 13px; padding: 6px 11px; }

/* ---------- VORBEREITUNG: Attestierung ---------- */
.attest-label {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid var(--lapis-rand);
  background: var(--lapis-hell);
  border-radius: 10px;
  cursor: pointer;
}
.attest-label input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--lapis); }
.attest-label__text { font-size: 13.5px; color: #2c3752; }
.attest-label__text b { color: var(--text); }

/* ---------- Gast-Stimmproben ---------- */
.proben-liste { display: flex; flex-direction: column; gap: 8px; }
.proben-zeile {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--rand);
  border-radius: 9px;
  background: #fbfcfe;
}
.proben-name { font-weight: 600; }
.probe-status { font-size: 13px; color: var(--text-schwach); }
.probe-status.hat-probe { color: var(--ok); font-weight: 600; }

/* ---------- Steuerung / VU-Meter ---------- */
.vu-wrap { margin: 4px 0 14px; }
.vu-label { font-size: 12px; color: var(--text-sehr-schwach); margin-bottom: 5px; }
.vu {
  height: 14px;
  background: #eef1f6;
  border: 1px solid var(--rand);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}
.vu-bar {
  height: 100%;
  width: 62%;
  background: linear-gradient(90deg, #2fa06b 0%, #8bc34a 55%, #f0b429 82%, #e05252 100%);
  border-radius: 8px 0 0 8px;
  transition: width .2s;
}
.steuer-buttons { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }

.statuszeile {
  font-size: 13px;
  color: var(--text-schwach);
  background: #f6f8fc;
  border: 1px solid var(--rand);
  border-radius: 8px;
  padding: 8px 12px;
  font-variant-numeric: tabular-nums;
  margin: 0 0 10px;
}
.live-partial {
  font-style: italic;
  color: var(--text-sehr-schwach);
  font-size: 14px;
  min-height: 22px;
  padding: 6px 2px;
  border-left: 3px solid var(--lapis-rand);
  padding-left: 10px;
  margin: 0 0 6px;
}
.live-partial::before { content: "\201A"; }

/* ---------- Diagnose details ---------- */
.diagnose {
  margin-top: 12px;
  border: 1px solid var(--rand);
  border-radius: 9px;
  background: #fafbfd;
}
.diagnose > summary {
  cursor: pointer;
  padding: 10px 14px;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--lapis-dunkel);
  list-style: none;
  user-select: none;
}
.diagnose > summary::-webkit-details-marker { display: none; }
.diagnose > summary::before { content: "\25B8  "; color: var(--text-sehr-schwach); }
.diagnose[open] > summary::before { content: "\25BE  "; }
.diagnose__inhalt { padding: 4px 14px 14px; }

.vorlauf-regler {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0;
  flex-wrap: wrap;
}
.vorlauf-regler label { font-size: 13px; font-weight: 600; }
.vorlauf-regler input[type="range"] { flex: 1; min-width: 180px; accent-color: var(--lapis); }
.vorlauf-regler output {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--lapis-dunkel);
  min-width: 44px;
  text-align: right;
}
.vorlauf-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.chip {
  font: inherit;
  font-size: 13px;
  padding: 5px 12px;
  border: 1px solid var(--rand);
  background: #fff;
  border-radius: 20px;
  cursor: pointer;
}
.chip:hover { border-color: var(--lapis); color: var(--lapis-dunkel); }
.chip.aktiv { background: var(--lapis); color: #fff; border-color: var(--lapis); font-weight: 600; }

.diag-werte { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.diag-werte p { margin: 0; }
.diag-werte code {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 12.5px;
  background: #eef1f6;
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--text);
}

/* ---------- Sprecher-Zuordnung ---------- */
.tabelle-wrap { overflow-x: auto; }
table.mapping {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
table.mapping th, table.mapping td {
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid var(--rand);
  white-space: nowrap;
}
table.mapping thead th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-sehr-schwach);
  border-bottom: 2px solid var(--rand);
}
.label-pill {
  display: inline-block;
  font-weight: 700;
  font-family: monospace;
  background: var(--lapis-hell);
  color: var(--lapis-dunkel);
  border-radius: 5px;
  padding: 2px 8px;
}
.quelle-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  border-radius: 5px;
  padding: 2px 8px;
}
.quelle-tag--manuell { background: #e6f5ee; color: #1f7a54; }
.quelle-tag--auto { background: #eef0fb; color: #4753b5; }
.quelle-tag--offen { background: #f2f4f7; color: var(--text-sehr-schwach); }
.mapping select {
  font: inherit; font-size: 13px;
  padding: 4px 8px; border: 1px solid var(--rand); border-radius: 6px; background: #fff;
}
.vorschlag-bereich { margin-top: 12px; }
.vorschlag-box {
  display: none;
  margin-top: 10px;
  border: 1px dashed var(--lapis-rand);
  background: var(--lapis-hell);
  border-radius: 9px;
  padding: 12px 14px;
  font-size: 13.5px;
}
.vorschlag-box.sichtbar { display: block; }
.vorschlag-box ul { margin: 8px 0 0; padding-left: 18px; }

/* ---------- WOANDERS / BEENDET ---------- */
.zustand-info-icon {
  font-size: 28px;
  line-height: 1;
  display: block;
  margin-bottom: 8px;
}
.claim-karte { border-left: 4px solid var(--gefahr); }
.eigen-karte { border-left: 4px solid var(--warn); }
.beendet-karte { border-left: 4px solid var(--lapis); }
.abschluss-werte {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin: 14px 0 18px;
}
.abschluss-wert { display: flex; flex-direction: column; }
.abschluss-wert .zahl { font-size: 26px; font-weight: 800; color: var(--lapis-dunkel); font-variant-numeric: tabular-nums; }
.abschluss-wert .cap { font-size: 12px; color: var(--text-sehr-schwach); text-transform: uppercase; letter-spacing: .05em; }

/* ---------- Overlays ---------- */
.alarm-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(15, 20, 32, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
}
.alarm-box {
  background: #fff;
  border-top: 6px solid var(--gefahr);
  border-radius: 14px;
  padding: 28px 34px;
  max-width: 440px;
  text-align: center;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}
.alarm-box .alarm-ikon { font-size: 40px; }
.alarm-box strong { display: block; font-size: 18px; margin: 8px 0 6px; color: var(--gefahr-dunkel); }
.alarm-box p { color: var(--text-schwach); margin: 0; }
.alarm-box .spinner-text {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 14px; font-size: 13px; color: var(--text-sehr-schwach);
}
.spinner {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--lapis-rand); border-top-color: var(--lapis);
  animation: dreh .8s linear infinite;
}
@keyframes dreh { to { transform: rotate(360deg); } }

.resume-hinweis { border-left: 4px solid var(--warn); }
.resume-hinweis .zustand-info-icon { color: var(--warn); }

/* ---------- Sichtbarkeits-Steuerung ---------- */
[hidden] { display: none !important; }

/* ============================================================
   ERWEITERUNG — Restliche Ansichten (Nav, Hub, Karten-Varianten)
   Wiederverwendung der bestehenden Tokens; Aufnahme-Mockup unberuehrt.
   ============================================================ */

/* ---------- App-Navigation (gemeinsame Topnav) ---------- */
.app-nav {
  background: #fff;
  border-bottom: 1px solid var(--rand);
  box-shadow: 0 1px 3px rgba(20,30,60,.04);
}
.app-nav__inner {
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 24px;
  flex-wrap: wrap;
}
.app-nav__marke {
  display: flex;
  align-items: center;
  gap: 0;
  font-weight: 700;
  font-size: 16px;
  padding: 12px 14px 12px 0;
  margin-right: 6px;
  text-decoration: none;
  color: var(--text);
}
.app-nav__marke .app-logo { width: 30px; height: 30px; font-size: 15px; border-radius: 8px; margin-right: 9px; }
.app-nav__marke span { color: var(--lapis); }
.nav-link {
  text-decoration: none;
  color: var(--text-schwach);
  font-size: 14px;
  font-weight: 600;
  padding: 16px 12px;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}
.nav-link:hover { color: var(--text); background: #f6f8fc; }
.nav-link[aria-current="page"] {
  color: var(--lapis-dunkel);
  border-bottom-color: var(--lapis);
}
.app-nav__rechts { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.avatar {
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff;
  border: 2px solid #fff;
  flex: none;
}
/* Menschen-Farben: KEIN Mensch darf Blau verwenden.
   Josh (JB) = Violett · Mara (MA) = Grün · Jan (JA) = Amber.
   Blau (Lapislazuli, --lapis rgb(31,79,181)) ist EXKLUSIV für Lazulian (avatar--e). */
.avatar--a { background: #6b52b5; } /* Josh — Violett */
.avatar--b { background: #1f9d6b; } /* Mara — Grün */
.avatar--c { background: #b7791f; } /* Jan — Amber */
.avatar--d { background: #c62d3a; }
.avatar--e { background: var(--lapis); } /* Lazulian — Lapislazuli-Blau rgb(31,79,181), exklusiv */
.avatar-stack { display: flex; }
.avatar-stack .avatar:not(:first-child) { margin-left: -8px; }

/* ---------- Seiten-Titelzeile ---------- */
.seiten-titel { margin: 4px 0 18px; }
.seiten-titel h1 { margin: 0 0 4px; font-size: 24px; letter-spacing: -.02em; }
.seiten-titel p { margin: 0; color: var(--text-schwach); font-size: 14px; }
.titel-zeile { display: flex; align-items: center; gap: 14px; margin: 4px 0 18px; }
.titel-zeile h1 { margin: 0; font-size: 24px; letter-spacing: -.02em; flex: 1; }

/* ---------- Buttons: Groesse ---------- */
.btn-gross { font-size: 15px; padding: 11px 20px; }
a.btn { text-decoration: none; display: inline-block; }

/* ---------- Grid / Kacheln ---------- */
.grid { display: grid; gap: 16px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--auto { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
@media (max-width: 860px) {
  .grid--2, .grid--3 { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr !important; }
}

/* Hub-Kacheln */
.hub-kachel {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 18px;
}
.hub-kachel:hover { border-color: var(--lapis-rand); box-shadow: 0 2px 6px rgba(31,79,181,.12); }
.hub-kachel h3 { margin: 0 0 6px; font-size: 16px; color: var(--lapis-dunkel); }
.hub-kachel p { margin: 0; color: var(--text-schwach); font-size: 13.5px; }
.hub-kachel .kachel-icon { font-size: 22px; display: block; margin-bottom: 8px; }

/* Karten als Link */
a.karte { text-decoration: none; color: inherit; display: block; }
a.karte:hover { border-color: var(--lapis-rand); box-shadow: 0 2px 6px rgba(31,79,181,.12); }

/* ---------- Typ-Badges ---------- */
.typ-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  border-radius: 5px;
  padding: 2px 8px;
  vertical-align: middle;
}
.typ-person   { background: #e7ecfb; color: #3a49a8; }
.typ-ort      { background: #e3f4ec; color: #1c7a53; }
.typ-org      { background: #fdefda; color: #96631a; }
.typ-ereignis { background: #f3e9fb; color: #7038a8; }
.typ-objekt   { background: #fbe9ec; color: #b02c3a; }
.typ-konzept  { background: #e6f2f6; color: #1c6a86; }

/* Lazulian-Badge — Lapislazuli-Blau (exklusiv). */
.agent-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700;
  background: var(--lapis-hell); color: var(--lapis-dunkel);
  border-radius: 5px; padding: 2px 8px;
}
/* Menschen-Badge — neutral (NICHT blau; Blau ist exklusiv für Lazulian). */
.mensch-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700;
  background: #ecedf2; color: #4a5064;
  border-radius: 5px; padding: 2px 8px;
}

/* ---------- Listen (Sitzungen, Entitaeten, Ergebnisse) ---------- */
.liste { display: flex; flex-direction: column; }
.listen-zeile {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--rand);
  text-decoration: none; color: inherit;
}
.listen-zeile:last-child { border-bottom: none; }
.listen-zeile:hover { background: #f6f8fc; }
.listen-zeile__haupt { flex: 1; min-width: 0; }
.listen-zeile__titel { font-weight: 600; }
.listen-zeile__meta { font-size: 13px; color: var(--text-schwach); }
.status-pill {
  font-size: 11px; font-weight: 700; border-radius: 20px; padding: 2px 10px;
}
.status-pill--beendet { background: #eef0fb; color: #4753b5; }
.status-pill--laeuft { background: #fbe9ec; color: #b02c3a; }
.status-pill--entwurf { background: #f2f4f7; color: var(--text-sehr-schwach); }

/* ---------- Kennzahlen ---------- */
.kennzahl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px,1fr)); gap: 12px; }
.kennzahl {
  background: #f6f8fc; border: 1px solid var(--rand);
  border-radius: 10px; padding: 12px 14px;
}
.kennzahl .zahl { font-size: 22px; font-weight: 800; color: var(--lapis-dunkel); font-variant-numeric: tabular-nums; }
.kennzahl .cap { font-size: 12px; color: var(--text-sehr-schwach); }

/* ---------- Sphere-Karten ---------- */
.sphere-karte .sphere-kopf { display: flex; align-items: flex-start; gap: 12px; }
.sphere-emblem {
  width: 44px; height: 44px; border-radius: 11px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: #fff;
}
.sphere-emblem--rpg { background: linear-gradient(135deg, #6b52b5, #4a3a86); }
.sphere-emblem--team { background: linear-gradient(135deg, var(--lapis), var(--lapis-dunkel)); }
.sphere-emblem--buch { background: linear-gradient(135deg, #1f9d6b, #147a51); }
.sphere-kennzahlen { color: var(--text-schwach); font-size: 13px; margin-top: 10px; }

/* ---------- Login ---------- */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.login-panel {
  background: var(--karte); border: 1px solid var(--rand);
  border-radius: 16px; box-shadow: var(--schatten);
  padding: 34px 32px; width: 100%; max-width: 380px;
}
.login-marke { display: flex; align-items: center; gap: 12px; justify-content: center; margin-bottom: 6px; }
.login-marke .app-logo { width: 40px; height: 40px; }
.login-marke .wort { font-size: 24px; font-weight: 800; }
.login-marke .wort span { color: var(--lapis); }
.login-sub { text-align: center; color: var(--text-schwach); font-size: 13.5px; margin: 0 0 22px; }
.feld { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.feld label { font-size: 13px; font-weight: 600; }
.feld input, .feld textarea, .feld select {
  font: inherit; font-size: 14px;
  padding: 9px 11px; border: 1px solid var(--rand); border-radius: 8px; background: #fff;
}
.feld input:focus, .feld textarea:focus { outline: 2px solid var(--lapis-rand); border-color: var(--lapis); }
.login-panel .btn { width: 100%; margin-top: 4px; }
.login-links { text-align: center; margin-top: 16px; font-size: 13px; }
.login-links a { color: var(--lapis); text-decoration: none; }

/* ---------- Split-Layouts ---------- */
.split { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: start; }
.split--editor { grid-template-columns: 1fr 1fr; }

/* ---------- Markdown-Editor / Vorschau (entitaet) ---------- */
.md-editor, .md-vorschau {
  border: 1px solid var(--rand); border-radius: 10px; background: #fff;
  min-height: 320px; padding: 14px 16px;
}
.md-editor {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 13px; line-height: 1.7; color: #2c3346;
  white-space: pre-wrap; overflow-x: auto;
}
.md-editor .fm { color: var(--text-sehr-schwach); }
.md-editor .wl { color: var(--lapis); }
.md-vorschau { font-size: 14px; }
.md-vorschau h1, .md-vorschau h2 { letter-spacing: -.01em; }
.md-vorschau h2 { font-size: 17px; margin: 14px 0 6px; }
.md-vorschau a.wikilink { color: var(--lapis); text-decoration: none; border-bottom: 1px dotted var(--lapis-rand); }
.md-vorschau a.wikilink:hover { border-bottom-style: solid; }
.pane-titel { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-sehr-schwach); margin-bottom: 6px; font-weight: 700; }

/* Live-Cursor-Praesenz (nur visuell) */
.fremd-cursor { position: relative; background: rgba(31,157,107,.18); border-radius: 2px; padding: 0 1px; }
.fremd-cursor::before {
  content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 2px; background: #1f9d6b;
}
.fremd-cursor__label {
  position: absolute; top: -20px; left: -2px;
  background: #1f9d6b; color: #fff; font-size: 10px; font-weight: 700;
  padding: 1px 6px; border-radius: 4px; white-space: nowrap;
}

/* Agenten-(Lazulian-)Aenderungs-Markierung im Text — Lapislazuli-Blau (exklusiv) */
.agent-change {
  background: var(--lapis-hell); border-bottom: 2px solid var(--lapis); border-radius: 2px; padding: 0 2px;
}
.agent-hinweis {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--lapis-hell); border: 1px solid var(--lapis-rand); border-left: 4px solid var(--lapis);
  border-radius: 9px; padding: 10px 14px; font-size: 13.5px; color: var(--lapis-dunkel); margin-bottom: 14px;
}
.agent-hinweis .btn { margin-left: auto; }

/* Eigenschaften-Tabelle */
table.eigenschaften { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.eigenschaften th, table.eigenschaften td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--rand); }
table.eigenschaften th { color: var(--text-sehr-schwach); font-weight: 600; width: 34%; vertical-align: top; }

/* Backlinks */
.backlink-liste { display: flex; flex-direction: column; gap: 8px; }
.backlink { display: block; text-decoration: none; color: inherit; padding: 9px 11px; border: 1px solid var(--rand); border-radius: 8px; }
.backlink:hover { border-color: var(--lapis-rand); }
.backlink b { color: var(--lapis-dunkel); }
.backlink .kontext { font-size: 12.5px; color: var(--text-schwach); }

/* ---------- Protokoll ---------- */
.zitat {
  border-left: 3px solid var(--lapis-rand); background: #f6f8fc;
  padding: 8px 12px; margin: 8px 0; font-style: italic; color: var(--text-schwach); font-size: 13.5px;
}
.kandidat {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px; border: 1px solid var(--rand); border-radius: 10px; margin-bottom: 10px;
}
.kandidat__haupt { flex: 1; }
.kandidat__aktionen { display: flex; gap: 8px; flex: none; }
.turn { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--rand); }
.turn__sprecher { font-weight: 700; color: var(--lapis-dunkel); min-width: 90px; flex: none; }
.policy-hinweis {
  display: flex; align-items: center; gap: 8px;
  background: var(--lapis-hell); border: 1px solid var(--lapis-rand);
  border-radius: 9px; padding: 10px 14px; font-size: 13.5px; color: #2c3752; margin-bottom: 16px;
}

/* ---------- Graph ---------- */
.graph-flaeche {
  position: relative; background:
    radial-gradient(circle at 1px 1px, #dfe4ee 1px, transparent 0);
  background-size: 22px 22px;
  border: 1px solid var(--rand); border-radius: 12px; overflow: hidden; min-height: 420px;
}
.graph-legende { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.legende-eintrag { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.legende-punkt { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.filter-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }

/* Graph-Knoten (HTML-positioniert) */
.g-node {
  position: absolute; transform: translate(-50%,-50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-decoration: none; text-align: center;
}
.g-node .dot {
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 15px;
  box-shadow: 0 2px 8px rgba(20,30,60,.2); border: 2px solid #fff;
}
.g-node .g-label { font-size: 12px; font-weight: 600; color: var(--text); background: rgba(255,255,255,.85); padding: 0 4px; border-radius: 4px; }
.g-node--zentral .dot { width: 62px; height: 62px; font-size: 17px; }
.g-node.g-typ-person   .dot { background: #4753b5; }
.g-node.g-typ-ort      .dot { background: #1c7a53; }
.g-node.g-typ-org      .dot { background: #b7791f; }
.g-node.g-typ-ereignis .dot { background: #7038a8; }
.g-node.g-typ-objekt   .dot { background: #b02c3a; }

/* ---------- Historie / Diff ---------- */
.versions-liste { display: flex; flex-direction: column; }
.version-zeile {
  display: flex; align-items: center; gap: 12px; padding: 12px 4px;
  border-bottom: 1px solid var(--rand); cursor: pointer;
}
.version-zeile:hover { background: #f6f8fc; }
.version-zeile[aria-selected="true"] { background: var(--lapis-hell); border-left: 3px solid var(--lapis); padding-left: 10px; }
.version-zeile__haupt { flex: 1; }
.diff { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.diff__spalte { border: 1px solid var(--rand); border-radius: 9px; overflow: hidden; }
.diff__kopf { padding: 8px 12px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.diff__kopf--alt { background: var(--gefahr-hell); color: var(--gefahr-dunkel); }
.diff__kopf--neu { background: #e6f5ee; color: #1f7a54; }
.diff__inhalt { padding: 12px; font-family: "SFMono-Regular", Consolas, monospace; font-size: 12.5px; line-height: 1.7; white-space: pre-wrap; }
.diff .del { background: #fbe3e6; text-decoration: line-through; }
.diff .ins { background: #d9f2e4; }

/* ---------- Einstellungen ---------- */
.setting-block { margin-bottom: 6px; }
.mitglied-zeile { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rand); }
.mitglied-zeile:last-child { border-bottom: none; }
.mitglied-zeile__haupt { flex: 1; }
.mitglied-zeile .recht { font-size: 12px; color: var(--ok); font-weight: 600; }
.toggle-zeile { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rand); }
.toggle-zeile:last-child { border-bottom: none; }
.toggle-zeile__text { flex: 1; }
.toggle-zeile__text .h { font-weight: 600; }
.toggle-zeile__text .d { font-size: 13px; color: var(--text-schwach); }
.switch { position: relative; width: 42px; height: 24px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider { position: absolute; inset: 0; background: #cfd6e2; border-radius: 24px; transition: background .12s; }
.switch .slider::before { content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .12s; }
.switch input:checked + .slider { background: var(--lapis); }
.switch input:checked + .slider::before { transform: translateX(18px); }
textarea.prompt { width: 100%; min-height: 130px; font: inherit; font-size: 13.5px; padding: 11px; border: 1px solid var(--rand); border-radius: 9px; resize: vertical; }

/* Chip (allgemein, klickbar wie in Graph/Suche) */
.chip-filter {
  font: inherit; font-size: 13px; padding: 5px 12px;
  border: 1px solid var(--rand); background: #fff; border-radius: 20px; cursor: pointer; color: var(--text-schwach);
}
.chip-filter:hover { border-color: var(--lapis); }
.chip-filter[aria-pressed="true"] { background: var(--lapis); color: #fff; border-color: var(--lapis); font-weight: 600; }

.such-zeile { display: flex; gap: 10px; margin-bottom: 14px; }
.such-zeile input { flex: 1; font: inherit; font-size: 15px; padding: 11px 14px; border: 1px solid var(--rand); border-radius: 9px; }
.such-zeile input:focus { outline: 2px solid var(--lapis-rand); border-color: var(--lapis); }

.footer-hinweis { text-align: center; color: var(--text-sehr-schwach); font-size: 12.5px; margin-top: 26px; }

/* ============================================================
   ERWEITERUNG — Kollaboratives Live-Protokoll (protokoll-live)
   ============================================================ */

/* Live-Indikator im Kopf */
.live-indikator {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; letter-spacing: .03em;
  background: var(--gefahr-hell); color: var(--gefahr-dunkel);
  border: 1px solid #f2c4ca; border-radius: 20px; padding: 3px 11px;
  vertical-align: middle;
}
.live-punkt {
  width: 9px; height: 9px; border-radius: 50%; background: var(--gefahr);
  animation: live-puls 1.3s ease-in-out infinite;
}
@keyframes live-puls { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.7); } }

/* Steuerleiste */
.live-steuer {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--karte); border: 1px solid var(--rand); border-radius: 11px;
  padding: 12px 16px; margin-bottom: 16px; box-shadow: var(--schatten);
}
.live-steuer__gruppe { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.live-steuer__spacer { flex: 1; }

/* Issue #30: Auf schmalen Screens (Mobile, ~390px) darf die Steuerzeile keinen
   horizontalen Body-Overflow erzeugen. Die Gruppen (Buttons/Toggles/Praesenz/
   Verbindungsstatus) umbrechen, der Spacer verschwindet (kein Auseinanderdruecken),
   Abstaende + Controls werden kompakter. Reine Anzeige, keine Logik. */
@media (max-width: 480px) {
  .live-steuer { gap: 8px; padding: 10px 12px; }
  .live-steuer__gruppe { gap: 6px; }
  .live-steuer__spacer { flex: 0 0 100%; }
  .live-steuer .btn-klein { padding: 6px 9px; font-size: 12px; }
  .urheber-toggle, .beleg-folgt-toggle { font-size: 11px; gap: 5px; }
  .ws-verbindungsstatus { margin-left: 0; font-size: 0.72rem; }
}

/* ---------- #56 Slice 1: Aufnahme-"Pille" (relokierte Run-Controls, 4 Farbzustaende) ----------
   Semantische Zustandsfarben sind bewusst getrennt vom Lapis-Steuerungsblau (#1f4fb5 bleibt die
   Control-Farbe der Buttons): bereit=neutral, kalibrierung=orange, aufnehmend=rot, gestoppt=Fortsetzen.
   Die Farbe wird ueber den Rahmen/Hintergrund der Pille + den Statuspunkt transportiert, NICHT ueber
   die Button-Fuellung (Record bleibt Lapis-Primaer, Stopp bleibt Gefahr-Rot als eigene Semantik). */
.ts-af-pille {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 6px 10px; border: 1.5px solid var(--rand); border-radius: 999px;
  background: var(--karte);
}
.ts-af-pille__punkt {
  width: 10px; height: 10px; border-radius: 50%; flex: none;
  background: var(--text-sehr-schwach);
}
/* Statusbadge kompakt inline (das volle .statuszeile-Padding waere in der Pille zu wuchtig). */
.ts-af-pille__status {
  margin: 0; padding: 2px 8px; background: transparent; border: none;
  font-size: 12px; color: var(--text-schwach); white-space: nowrap;
}
.ts-af-pille__status:empty { display: none; }
/* VU-Bar kompakt inline (feste kleine Breite statt der vollbreiten .vu-wrap). */
.ts-af-pille__vu { flex: none; }
.ts-af-pille__vu .vu {
  width: 56px; height: 10px; background: #eef1f6; border: 1px solid var(--rand);
  border-radius: 6px; overflow: hidden; position: relative; display: block;
}
.ts-af-pille__vu .vu-bar {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #2fa06b 0%, #8bc34a 55%, #f0b429 82%, #e05252 100%);
  border-radius: 6px 0 0 6px; transition: width .2s;
}
/* Statuszeile (Session/gesendet/Turns/Rueckstand) -- nur sichtbar, wenn befuellt (aufnehmend). */
.ts-af-pille__statuszeile {
  margin: 0; padding: 2px 8px; background: transparent; border: none;
  font-size: 11px; color: var(--text-schwach); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ts-af-pille__statuszeile:empty { display: none; }
/* ▶ Fortsetzen-Slot (Slice 1 nur visuell) + WOANDERS-Notiz: default aus, je Zustand eingeblendet. */
.ts-af-pille__fortsetzen {
  display: none; font-size: 13px; font-weight: 600; color: var(--gefahr-dunkel);
  padding: 4px 10px; border: 1px solid var(--rand); border-radius: 999px; background: #fff;
}
.ts-af-pille__woanders {
  display: none; font-size: 12px; color: var(--text-schwach); font-style: italic;
}

/* --- Zustand: bereit (neutral) --- */
.ts-af-pille[data-zustand="bereit"] { border-color: var(--rand); }
/* Record sichtbar (bleibt per bestehendem Checkbox-Gate disabled), Stopp aus, kein Fortsetzen/woanders. */
.ts-af-pille[data-zustand="bereit"] .ts-af-pille__stopp,
.ts-af-pille[data-zustand="bereit"] .ts-af-pille__fortsetzen,
.ts-af-pille[data-zustand="bereit"] .ts-af-pille__woanders,
.ts-af-pille[data-zustand="bereit"] .ts-af-pille__statuszeile { display: none; }

/* --- Zustand: kalibrierung (orange) --- */
.ts-af-pille[data-zustand="kalibrierung"] { border-color: #e0891c; background: #fff8ef; }
.ts-af-pille[data-zustand="kalibrierung"] .ts-af-pille__punkt { background: #e0891c; }
/* Kalibriert = laeuft schon -> Record aus, Stopp aktiv, kein Fortsetzen/woanders. */
.ts-af-pille[data-zustand="kalibrierung"] .ts-af-pille__record,
.ts-af-pille[data-zustand="kalibrierung"] .ts-af-pille__fortsetzen,
.ts-af-pille[data-zustand="kalibrierung"] .ts-af-pille__woanders { display: none; }

/* --- Zustand: aufnehmend (rot) --- */
.ts-af-pille[data-zustand="aufnehmend"] { border-color: #d8382f; background: #fdecec; }
.ts-af-pille[data-zustand="aufnehmend"] .ts-af-pille__punkt { background: #d8382f; animation: ts-af-puls 1.4s ease-in-out infinite; }
/* Record aus, Stopp aktiv, kein Fortsetzen/woanders. */
.ts-af-pille[data-zustand="aufnehmend"] .ts-af-pille__record,
.ts-af-pille[data-zustand="aufnehmend"] .ts-af-pille__fortsetzen,
.ts-af-pille[data-zustand="aufnehmend"] .ts-af-pille__woanders { display: none; }

/* --- Zustand: gestoppt (BEENDET) -> Fortsetzen-Affordanz --- */
.ts-af-pille[data-zustand="gestoppt"] { border-color: var(--rand); background: #f6f8fc; }
.ts-af-pille[data-zustand="gestoppt"] .ts-af-pille__fortsetzen { display: inline-block; }
/* Record/Stopp nicht aktiv, kein woanders, keine Statuszeile. */
.ts-af-pille[data-zustand="gestoppt"] .ts-af-pille__record,
.ts-af-pille[data-zustand="gestoppt"] .ts-af-pille__stopp,
.ts-af-pille[data-zustand="gestoppt"] .ts-af-pille__woanders,
.ts-af-pille[data-zustand="gestoppt"] .ts-af-pille__vu,
.ts-af-pille[data-zustand="gestoppt"] .ts-af-pille__statuszeile { display: none; }

/* --- Zustand: woanders (Fremd-Claim / eigener inaktiver Claim) -> weder Record noch Stopp --- */
.ts-af-pille[data-zustand="woanders"] { border-color: var(--rand); background: #f6f8fc; }
.ts-af-pille[data-zustand="woanders"] .ts-af-pille__woanders { display: inline; }
.ts-af-pille[data-zustand="woanders"] .ts-af-pille__record,
.ts-af-pille[data-zustand="woanders"] .ts-af-pille__stopp,
.ts-af-pille[data-zustand="woanders"] .ts-af-pille__fortsetzen,
.ts-af-pille[data-zustand="woanders"] .ts-af-pille__vu,
.ts-af-pille[data-zustand="woanders"] .ts-af-pille__statuszeile { display: none; }

@keyframes ts-af-puls { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.75); } }
@media (prefers-reduced-motion: reduce) {
  .ts-af-pille[data-zustand="aufnehmend"] .ts-af-pille__punkt { animation: none; }
  .ts-af-pille__vu .vu-bar { transition: none; }
}

/* @390 (≤480px): die Pille faellt auf eine eigene Zeile (kein Body-Overflow), Kinder bleiben
   breitenbegrenzt und umbrechen -- spiegelt .live-steuer__spacer (flex:0 0 100%). */
@media (max-width: 480px) {
  .ts-af-pille { flex: 0 0 100%; max-width: 100%; }
  .ts-af-pille__status, .ts-af-pille__statuszeile { white-space: normal; }
}

/* Schutz-Umschalter (Segmented control) */
.seg {
  display: inline-flex; border: 1px solid var(--rand); border-radius: 9px; overflow: hidden; background: #f6f8fc;
}
.seg button {
  font: inherit; font-size: 13px; font-weight: 600;
  padding: 7px 13px; border: none; background: transparent; color: var(--text-schwach); cursor: pointer;
}
.seg button[aria-pressed="true"] { background: var(--lapis); color: #fff; }

/* ---- EIN durchgehendes, editierbares Protokoll-Dokument (kein Karten-Stack) ---- */
.live-doc-wrap { position: relative; }
.live-dokument {
  font-size: 14.5px; line-height: 1.75; color: var(--text);
  border: 1px solid var(--rand); border-radius: 11px; background: #fff;
  padding: 16px 18px; min-height: 260px; outline: none;
}
.live-dokument:focus { border-color: var(--lapis-rand); box-shadow: 0 0 0 3px rgba(31,79,181,.10); }

/* Leer-Hinweis fuer den kollaborativen (Yjs-)Pfad. Er lebt als CSS-::before-Platzhalter am
   Editor-Container und ist damit NICHT Teil des Textinhalts/der Selektion -- er kann niemals in
   das geteilte CRDT (Y.XmlFragment) geseedet werden.
   #11 Slice 1: Seit dem Editor-Swap auf ProseMirror rendert der Editor IMMER mindestens einen
   leeren Absatz -- `:empty` greift daher nicht mehr. Stattdessen setzt der Yjs-Client die Klasse
   `.live-dokument--leer`, solange das PM-Doc leer ist (genau ein leerer Absatz). Der Hinweis wird
   im leeren PM-Absatz per absoluter Positionierung angezeigt; im M2a-Polling-Fallback (kein
   .live-dokument--yjs) bleibt der bisherige <p>-Hinweis erhalten. */
.live-dokument--yjs.live-dokument--leer {
  position: relative;
}
.live-dokument--yjs.live-dokument--leer::before {
  content: "Noch kein Protokoll vorhanden — Lazulian schreibt mit, sobald genug gesprochen wurde.";
  position: absolute;
  top: 16px;
  left: 18px;
  right: 18px;
  color: var(--text-sehr-schwach);
  font-size: 12.5px;
  pointer-events: none;
  user-select: none;
}
/* ProseMirror-Editor fuellt den Container und uebernimmt Fokus/Outline vom .live-dokument. */
.live-dokument .ProseMirror { outline: none; min-height: 220px; }
.live-dokument .ProseMirror:focus { outline: none; }

/* #11 Slice 2: Live-Cursor/Presence (yCursorPlugin-Dekorationen).
   Die konkrete Farbe kommt IMMER inline aus dem cursorBuilder/selectionBuilder (user.color) --
   dieses CSS liefert nur Layout/Label. Lapis-Blau rgb(31,79,181) ist Lazulian vorbehalten und taucht
   hier bewusst nie auf. Das Caret ist ein null-breites, absolut positioniertes Widget zwischen den
   Zeichen; die linke Rahmenkante (border-color inline) bildet den senkrechten Strich. */
.ProseMirror-yjs-cursor {
  position: relative;
  margin-left: -1px;
  margin-right: -1px;
  border-left: 2px solid black;
  border-color: currentColor; /* Fallback; wird inline ueberschrieben */
  word-break: normal;
  pointer-events: none;
}
/* Namens-Label ueber dem Caret. Hintergrundfarbe wird inline gesetzt. */
.ProseMirror-yjs-cursor-label {
  position: absolute;
  top: -1.35em;
  left: -2px;
  font-size: 11px;
  line-height: 1;
  font-weight: 600;
  white-space: nowrap;
  color: #fff;
  padding: 2px 5px;
  border-radius: 4px 4px 4px 0;
  user-select: none;
  pointer-events: none;
}
/* Selektions-Highlight (background-color inline, halbtransparent). */
.ProseMirror-yjs-selection {
  border-radius: 1px;
}

/* Überschriften im Fließtext */
.live-dokument h2 { font-size: 16px; letter-spacing: -.01em; margin: 14px 0 4px; }
.live-dokument h2:first-child { margin-top: 0; }
/* Abschnitts-Titel (### / Heading3) bewusst dezent: kaum groesser als Fliesstext. */
.live-dokument h3 { font-size: 15px; font-weight: 600; color: #374151; letter-spacing: -.005em; margin: 12px 0 4px; }
.live-dokument h3:first-child { margin-top: 0; }
.live-dokument p { margin: 0 0 4px; }

/* Passagen sind INLINE-Teile EINES Textes (keine getrennten Widgets).
   Herkunft wird nur durch einen zarten linken Marginal-Streifen + leichte Tönung
   angedeutet — der Text bleibt ein zusammenhängendes Dokument. */
.passage {
  display: block;
  padding-left: 10px;
  margin-left: -10px;
  border-left: 3px solid transparent;
}
/* Lazulian-Passage: Lapislazuli-Blau (exklusiv). */
.passage--agent { border-left-color: var(--lapis); background: linear-gradient(90deg, var(--lapis-hell) 0%, transparent 60%); }
/* Menschlich berührte Passage: Violett (Josh), NICHT blau. */
.passage--manuell { border-left-color: #8a6fca; background: linear-gradient(90deg, #faf5ff 0%, transparent 60%); }
.passage--konflikt { border-left-color: var(--warn); background: var(--warn-hell); }

/* Inline-Herkunftsmarke am Zeilenanfang (klein, dezent) */
.passage__marke {
  font-size: 10px; font-weight: 700; letter-spacing: .03em;
  border-radius: 4px; padding: 0 5px; margin-right: 6px;
  vertical-align: 2px;
  user-select: none;
}
.passage--agent .passage__marke { background: var(--lapis-hell); color: var(--lapis-dunkel); }
.passage--manuell .passage__marke { background: #f3e9fb; color: #7038a8; }

/* V2 Multi-Author-Attribution: überlappender Avatar-Stack (Face-Pile) je Passage,
   in Beitragsreihenfolge (Lazulian zuerst, editierende Menschen hinten angehängt). */
.passage__autoren {
  display: inline-flex; vertical-align: middle; margin-right: 8px;
  user-select: none;
}
.passage__autoren .avatar {
  width: 22px; height: 22px; font-size: 9.5px; border-width: 1.5px;
}
.passage__autoren .avatar:not(:first-child) { margin-left: -8px; }
/* Issue #10 Slice 3: die Face-Pile ist eine Widget-Decoration am Blockanfang (nicht editierbar);
   sie soll im Text-Fluss nicht selektierbar sein und einen kleinen Abstand zur Ueberschrift halten. */
.live-dokument .passage__autoren { user-select: none; margin-right: 8px; vertical-align: baseline; }
/* Die author-Mark selbst rendert als unsichtbarer Inline-Span (Attribution steht im CRDT, nicht im
   sichtbaren Text) -- keine visuelle Wirkung, nur Traeger der data-author-Info. */
.live-dokument .author-mark { all: unset; }

/* Issue #23: Lazulian-Insert-Cursor (Variante A). Wenn Lazulian einen Abschnitt EINFUEGT
   (inkrementeller Tail-Append), blitzt die NEU eingefuegte Range kurz in Lapisblau auf und fadet
   aus. REIN KOSMETISCH: eine ProseMirror-Inline-Decoration (kein Doc-/Yjs-/Persistenz-Eingriff);
   die Deco entfernt sich nach ~1,5 s selbst. Hintergrund = --lapis-hell (Lazulians Eigenfarbe
   --lapis). Kein Border/kein Layout-Shift -> der Text springt nicht. */
.lazulian-flash {
  background-color: var(--lapis-hell);
  border-radius: 2px;
  box-shadow: 0 0 0 1px var(--lapis-rand);
  animation: lazulian-flash-fade 1.5s ease-out forwards;
}
@keyframes lazulian-flash-fade {
  0%   { background-color: var(--lapis-hell); box-shadow: 0 0 0 1px var(--lapis-rand); }
  100% { background-color: transparent;       box-shadow: 0 0 0 1px transparent; }
}
/* Auflage 3: bei reduzierter Bewegung KEINE Animation (kein Aufblitzen/Fade). */
@media (prefers-reduced-motion: reduce) {
  .lazulian-flash { animation: none; background-color: transparent; box-shadow: none; }
}

/* Issue #31 Slice 1: Beleg-Marker (🔗) — sichtbares In-Text-Icon je Abschnitt am Blockende
   (Widget-Decoration, side:1). Dezente Lapis-Pill; raeumlich getrennt von der #10-Face-Pile
   (Blockanfang). Nicht selektierbar (contenteditable=false); Hover/Focus-Ring fuer a11y. */
.live-dokument .beleg-marker {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; margin-left: 6px;
  font-size: 11px; line-height: 1; vertical-align: baseline;
  border: 1px solid var(--lapis-rand); border-radius: 999px;
  background: var(--lapis-hell); color: var(--lapis-dunkel);
  cursor: pointer; user-select: none;
  transition: background-color .12s ease, border-color .12s ease;
}
.live-dokument .beleg-marker:hover { background: #fff; border-color: var(--lapis); }
.live-dokument .beleg-marker:focus-visible {
  outline: 2px solid var(--lapis-rand); outline-offset: 2px; border-color: var(--lapis);
}
@media (prefers-reduced-motion: reduce) {
  .live-dokument .beleg-marker { transition: none; }
}

/* =========================================================================================
   Issue #33 Slice 1b: eingefuegtes Bild (protokollBild-Node, figure/img). Anzeige nur ueber toDOM;
   keine interaktive NodeView (Resize/Align/Float = Slice 3/4). Das Bild darf die Textspalte NIE
   ueberragen: max-width == Spaltenbreite (100% des Editorinhalts), img skaliert proportional.
   Die width des figure (px, aus dem A4-Fit-Insert) begrenzt zusaetzlich nach oben, wird aber von
   max-width:100% ueberstimmt, falls das Fenster schmaler ist als der px-Wert (responsiv). */
figure[data-protokoll-bild] {
  display: block;
  margin: 10px 0;
  max-width: 100%;
}
/* img fuellt die (per figure max-width:100% bereits auf die Spalte gedeckelte) figure. KEINE fixe
   px-Breite am img (die kam frueher inline aus der NodeView) -- width:100% laesst das Bild responsiv
   der figure-Breite folgen, sodass die effektive Breite = min(gespeicherte px, 100% der Spalte) ist
   und #protokoll-dokument auf KEINEM Viewport horizontal scrollt (Cross-Device Desktop->Mobile). */
figure[data-protokoll-bild] img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--rand);
}
/* data-align (links/mitte/rechts). Bei data-wrap="false" (Default, Block): Block-Ausrichtung via
   margin-auto -- konsistent zu toDOM-Fallback + Serializer (data-align). Float = Slice 4 (unten). */
figure[data-protokoll-bild][data-align="links"]  { margin-left: 0; margin-right: auto; }
figure[data-protokoll-bild][data-align="mitte"]   { margin-left: auto; margin-right: auto; }
figure[data-protokoll-bild][data-align="rechts"]  { margin-left: auto; margin-right: 0; }

/* =========================================================================================
   Issue #33 Slice 4: Umfliessen/Float. Bei data-wrap="true" floatet das Bild (links/rechts je nach
   data-align) und der nachfolgende Text fliesst daneben (Word/GDocs-nah). data-wrap="false" bleibt
   Block (Slice-3-Verhalten, oben, unveraendert).

   - Nur links/rechts floaten; data-align="mitte" ergibt beim Umfliessen keinen Sinn -> KEIN Float
     (bleibt Block, zentriert). Der Umfliessen-Toggle wird in der NodeView bei align=mitte deaktiviert;
     dieser CSS-Selektor (nur links/rechts) ist die zweite Sicherung (Remote/Legacy).
   - Breiten-Deckelung: ein gefloatetes Bild wird nie breiter als 55% der Spalte, damit sinnvoll Text
     danebenpasst. Die responsive Deckelung (max-width:100% + figure-Spaltenbreite aus Slice 3) greift
     weiterhin -> effektive Breite = min(gespeicherte px, 55% der Spalte).
   - margin: Abstand zum umfliessenden Text (rechts/unten bzw. links/unten je nach Float-Seite).
   ========================================================================================= */
figure[data-protokoll-bild][data-wrap="true"][data-align="links"] {
  float: left;
  margin: 0 1em 0.5em 0;
  max-width: 55%;
}
figure[data-protokoll-bild][data-wrap="true"][data-align="rechts"] {
  float: right;
  margin: 0 0 0.5em 1em;
  max-width: 55%;
}
/* CLEARING: der umgebende Editor ist ein BFC (display:flow-root) -> ein gefloatetes Bild kann NICHT
   aus dem Editor „ausbrechen", spaetere Bloecke/der Editor-Rand bleiben intakt. Der nachfolgende Text
   fliesst korrekt daneben; nach genuegend Text raeumt der Float von selbst ab. */
#protokoll-dokument .ProseMirror {
  display: flow-root;
}
/* MOBILE/schmal: unter 480px KEIN Float. Auf einer schmalen Spalte wuerde ein gefloatetes Bild nur
   noch einen Mini-Text-Umfluss (2-3 Woerter pro Zeile) erzeugen + Overflow riskieren -> Bild wird
   Block (volle, per Slice-3-Deckelung begrenzte Breite). Die 55%-Klemmung wird ebenfalls aufgehoben. */
@media (max-width: 480px) {
  figure[data-protokoll-bild][data-wrap="true"][data-align="links"],
  figure[data-protokoll-bild][data-wrap="true"][data-align="rechts"] {
    float: none;
    max-width: 100%;
    margin: 10px 0;
  }
  /* Block-Ausrichtung auf Mobile fuer gefloatete-aber-jetzt-Block Bilder wiederherstellen. */
  figure[data-protokoll-bild][data-wrap="true"][data-align="links"]  { margin-right: auto; }
  figure[data-protokoll-bild][data-wrap="true"][data-align="rechts"] { margin-left: auto; }
}
/* Atom-Node-Selektion (Cursor auf dem Bild): dezenter Lapis-Ring statt der PM-Default-Outline. */
.ProseMirror-selectednode figure[data-protokoll-bild] img {
  outline: 2px solid var(--lapis);
  outline-offset: 2px;
}

/* =========================================================================================
   Issue #33 Slice 3: interaktive Bild-NodeView (Resize-Griff + Ausrichtungs-Leiste). Griff +
   Leiste liegen absolut im figure; nur bei Selektion (.is-selected) sichtbar. contenteditable=false.
   ========================================================================================= */
figure.bild-nodeview {
  position: relative;
}
/* Resize-Ziehgriff (Ecke unten-rechts). Nur bei Selektion sichtbar. */
figure.bild-nodeview .bild-nodeview__griff {
  position: absolute;
  right: -6px; bottom: -6px;
  width: 14px; height: 14px;
  background: var(--lapis);
  border: 2px solid #fff;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  cursor: nwse-resize;
  touch-action: none; /* Pointer-Resize auf Touch nicht vom Scroll-Gesten-Handling wegnehmen */
  display: none;
  z-index: 2;
}
/* Ausrichtungs-Leiste (oben-links im figure). Nur bei Selektion sichtbar. */
figure.bild-nodeview .bild-nodeview__leiste {
  position: absolute;
  top: 6px; left: 6px;
  display: none;
  gap: 4px;
  padding: 3px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--rand);
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  z-index: 2;
}
figure.bild-nodeview.is-selected .bild-nodeview__griff,
figure.bild-nodeview.is-selected .bild-nodeview__leiste {
  display: flex;
}
figure.bild-nodeview .bild-nodeview__align {
  font-size: 11.5px;
  line-height: 1;
  padding: 4px 7px;
  color: var(--lapis-dunkel, #1f4fb5);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
}
figure.bild-nodeview .bild-nodeview__align:hover {
  background: var(--lapis-hell, #eaf1ff);
}
figure.bild-nodeview .bild-nodeview__align.is-aktiv {
  background: var(--lapis, #1f4fb5);
  color: #fff;
  border-color: var(--lapis, #1f4fb5);
}
/* Issue #33 Slice 4: Umfliessen-Toggle in der Leiste (gleicher Stil wie die Align-Buttons, mit
   einem dezenten Trenner links). is-aktiv = wrap:true; disabled = align=mitte (Float macht dort
   keinen Sinn). */
figure.bild-nodeview .bild-nodeview__wrap {
  font-size: 11.5px;
  line-height: 1;
  padding: 4px 7px;
  margin-left: 4px;
  color: var(--lapis-dunkel, #1f4fb5);
  background: transparent;
  border: 1px solid transparent;
  border-left: 1px solid var(--rand);
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
}
figure.bild-nodeview .bild-nodeview__wrap:hover:not(:disabled) {
  background: var(--lapis-hell, #eaf1ff);
}
figure.bild-nodeview .bild-nodeview__wrap.is-aktiv {
  background: var(--lapis, #1f4fb5);
  color: #fff;
  border-color: var(--lapis, #1f4fb5);
}
figure.bild-nodeview .bild-nodeview__wrap:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Upload-Platzhalter (Ladezustand beim Bild-Paste) — REIN lokale Widget-Decoration (kein Doc-/Yjs-
   Eingriff). Dezent, contenteditable=false. Verschwindet bei Erfolg/Fehler. */
.bild-upload-platzhalter {
  display: inline-flex; align-items: center;
  margin: 2px 0; padding: 6px 12px;
  font-size: 12.5px; color: var(--lapis-dunkel);
  background: var(--lapis-hell); border: 1px dashed var(--lapis-rand); border-radius: 8px;
  user-select: none;
}

/* Issue #33 Slice 2: dezentes Drag-Over-Feedback beim Ziehen einer Bild-Datei ueber den Editor.
   Rein visuell (kein Layout-Shift); die Klasse liegt an der .ProseMirror-Ebene und wird beim Drop/
   dragleave wieder entfernt. Nicht-stoerend -- der Default-Drop/interne Node-Move bleibt unberuehrt. */
.live-dokument--yjs .ProseMirror.live-dokument--drag-ueber {
  outline: 2px dashed var(--lapis-rand);
  outline-offset: -4px;
  background: var(--lapis-hell);
}

/* Dezenter Bild-Fehlerhinweis (Upload gescheitert). Selbst-abbauend (JS), im Doc-Wrap positioniert. */
.bild-fehler-hinweis {
  margin-top: 6px; padding: 8px 12px;
  font-size: 12.5px; color: #8a1c1c;
  background: #fdecec; border: 1px solid #f3c2c2; border-radius: 8px;
}

/* §Regen-Survival (no-silent-loss): sichtbarer Inline-Hinweis am Regenerieren-Button, VOR der
   Aktion -- eingefuegte Bilder werden beim Regenerieren ans Ende verschoben (V-min). */
.regen-bild-hinweis {
  color: var(--text-schwach);
  font-size: 11.5px;
  white-space: nowrap;
}
/* Issue #55 Slice 2: Abbrechen-Knopf im Protokoll-Kopf (neben #doc-status), nur waehrend eines
   Regen-Jobs sichtbar. Kleiner Abstand + vertikal ausgerichtet zum Ueberschriftentext. */
#btn-regen-abbrechen { margin-left: 10px; vertical-align: middle; }

/* Issue #28 Slice A: Verbindungsstatus-Anzeige (Auflage 3, additiv, per JS erzeugt). Dezent im
   Protokoll-Header. „Verbindung verloren, reconnecte…" bleibt sichtbar bis zum Reconnect. */
.ws-verbindungsstatus {
  font-size: 0.8rem;
  color: var(--lapis, #1f4fb5);
  opacity: 0.85;
  margin-left: 0.5rem;
  white-space: nowrap;
}

/* Toggle „Urheber anzeigen" im Protokoll-Header (client-seitig, default AN, localStorage). */
.urheber-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-schwach); cursor: pointer; user-select: none;
}
.urheber-toggle input { width: 15px; height: 15px; accent-color: var(--lapis); cursor: pointer; }

/* Issue #25 Slice 2c: Toggle „Beleg folgt Cursor" (client-seitig, default AUS, localStorage). */
.beleg-folgt-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-schwach); cursor: pointer; user-select: none;
}
.beleg-folgt-toggle input { width: 15px; height: 15px; accent-color: var(--lapis); cursor: pointer; }

/* #49 — Neu geordnete Steuerleiste: Dropdown-Menues + Schnellzugriff-Icons. Reine UI. */
.live-steuer__buttons { gap: 8px; }
.tb-menu { position: relative; display: inline-flex; }
.tb-menu__panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 50;
  display: flex; flex-direction: column; gap: 6px; min-width: 220px;
  background: var(--karte); border: 1px solid var(--rand); border-radius: 10px;
  padding: 8px; box-shadow: var(--schatten);
}
.tb-menu__panel[hidden] { display: none; }
/* Menuepunkte fuellen die Breite; im Menue linksbuendig lesbar. */
.tb-menu__item { width: 100%; justify-content: flex-start; text-align: left; }
.tb-menu__slot { display: flex; flex-direction: column; gap: 6px; }
/* Beleg-Leiste im Menue: volle Breite, kein Aussen-Margin (das Menue setzt den Abstand). */
.tb-menu__slot .beleg-leiste { margin: 0; width: 100%; }
/* Injizierte Toggles im Menue: als eigene Zeilen darstellen. */
.tb-menu__slot .urheber-toggle,
.tb-menu__slot .beleg-folgt-toggle { padding: 2px 2px; }

.tb-icons { display: inline-flex; align-items: center; gap: 4px; }
.tb-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; font-size: 16px; line-height: 1;
  background: var(--karte); border: 1px solid var(--rand); border-radius: 9px;
  cursor: pointer; color: var(--text);
}
.tb-icon:hover:not([disabled]) { border-color: var(--lapis-rand); }
.tb-icon:focus-visible { outline: 2px solid var(--lapis-rand); outline-offset: 2px; }
.tb-icon[disabled], .tb-icon[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.tb-menu__item[disabled], .tb-menu__item[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
@media (max-width: 480px) {
  .tb-menu__panel { min-width: 190px; }
  .tb-icon { width: 32px; height: 32px; font-size: 15px; }
}

/* Tail-Indikator „Agent schreibt…" am wachsenden Ende (nicht editierbar) */
.tail-indikator {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 8px; padding: 4px 10px;
  background: var(--lapis-hell); border: 1px dashed var(--lapis-rand); border-radius: 20px;
}
.tail-indikator[hidden] { display: none; }

/* Typing-Indikator (Lazulian) — Lapislazuli-Blau */
.typing {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; color: var(--lapis-dunkel);
}
.typing-dots { display: inline-flex; gap: 3px; }
.typing-dots i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--lapis); display: inline-block;
  animation: typing-bounce 1s infinite ease-in-out;
}
.typing-dots i:nth-child(2) { animation-delay: .15s; }
.typing-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes typing-bounce { 0%,80%,100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-4px); opacity: 1; } }

/* Konflikt-Diff inline im Dokument (an einer manuell bearbeiteten Passage) */
.block-konflikt {
  display: block; margin: 8px 0; border: 1px dashed #e3b45a; border-radius: 9px; overflow: hidden; background: #fff;
}
.block-konflikt__kopf { padding: 7px 12px; background: var(--warn-hell); color: #7a5410; font-size: 12px; font-weight: 700; }
/* alt/neu nebeneinander (das Dokument ist die breite Hauptspalte -> genug Platz) */
.block-konflikt .diff { padding: 10px; grid-template-columns: 1fr 1fr; }
.block-konflikt .diff__inhalt { white-space: normal; }
.block-konflikt__aktionen { display: flex; gap: 8px; padding: 0 10px 10px; flex-wrap: wrap; }
/* Auf schmalen Breiten die Diff-Spalten stapeln, damit sie lesbar bleiben */
@media (max-width: 720px) {
  .block-konflikt .diff { grid-template-columns: 1fr; }
}

/* Seiten-Layout Live-Protokoll: Dokument = breite Hauptspalte (~68%),
   Kandidaten schmaler daneben (~32%); auf schmalen Viewports darunter.
   minmax(0,…) verhindert, dass breite Kandidaten-Inhalte die Spuren aufblähen. */
.split--protokoll-live { grid-template-columns: minmax(0, 68fr) minmax(0, 32fr); }
@media (max-width: 860px) {
  .split--protokoll-live { grid-template-columns: minmax(0, 1fr); }
}
/* Issue #33 Slice 3 (Cross-Device-Overflow-Fix): Grid-Items haben per Default min-width:auto und
   weigern sich, unter ihre INHALTS-Min-Breite zu schrumpfen. Ein auf Desktop skaliertes Bild
   (figure style.width:{px}) exportiert diese px als Min-Content -> das Grid-Item bliebe {px} breit
   und ueberliefe auf Mobile den Viewport (Body scrollt horizontal). min-width:0 laesst das Item auf
   die Grid-Spur (Viewport) schrumpfen; erst dadurch greift figure{max-width:100%} gegen eine WIRKLICH
   gedeckelte Spalte -> effektive Bildbreite = min(gespeicherte px, 100% der Spalte). */
.split--protokoll-live > * { min-width: 0; }

/* Kandidat: bestätigt-Zustand */
.kandidat--bestaetigt { border-color: #bfe6d2; background: #f2fbf6; }
.kandidat__status {
  display: inline-block; font-size: 11px; font-weight: 700; border-radius: 5px; padding: 2px 8px; margin-top: 6px;
}
.kandidat__status--offen { background: #f2f4f7; color: var(--text-sehr-schwach); }
.kandidat__status--bestaetigt { background: #e6f5ee; color: #1f7a54; }

/* Relations-Kandidat (Subjekt —[Prädikat]→ Objekt) */
.relation {
  display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-weight: 600; font-size: 13.5px;
}
.relation .rel-ent { color: var(--lapis-dunkel); }
.relation .rel-praedikat {
  font-size: 11px; font-weight: 700; background: #f3e9fb; color: #7038a8;
  border-radius: 5px; padding: 1px 7px;
}
.relation .rel-pfeil { color: var(--text-sehr-schwach); font-weight: 700; }

/* Präsenz-Cursor im Block (benannt): Mara = Grün (nutzt die Basis-.fremd-cursor-Optik).
   Kein Blau — Blau ist exklusiv für Lazulian. */

/* ============================================================
   #19 — Geteilter Kopf + Reiter + rechtsseitiges Einstellungen-Panel
   Strikt nach mockups/einstellungen-overlay.html. EIGENER lz-*-Namensraum:
   die alte .app-kopf-Regel (Z. ~119, flexcolumn-Shell-Kopf) bleibt UNBERUEHRT,
   damit es keine Kollision gibt — der neue geteilte Gradient-Kopf ersetzt sie
   in allen vier Views konsistent (die Views tauschen ihren alten Kopf gegen
   dieses Fragment; die alte .app-kopf-Regel wird von keiner Seite mehr genutzt).
   ============================================================ */
:root { --schatten-panel: -8px 0 30px rgba(20,30,60,.14); }

/* ---- Kopf (auf allen Reitern gleich, blauer Gradient) ---- */
.lz-kopf { background: linear-gradient(135deg, var(--lapis), var(--lapis-dunkel)); color: #fff; }
.lz-kopf__inner { display: flex; align-items: center; gap: 16px; padding: 14px 24px; max-width: 1320px; margin: 0 auto; }
.lz-marke { font-weight: 700; font-size: 18px; letter-spacing: .2px; display: flex; align-items: center; gap: 9px; }
.lz-punkt { width: 11px; height: 11px; border-radius: 50%; background: #cfe0ff; box-shadow: 0 0 0 3px rgba(255,255,255,.18); }
.lz-pfad { font-size: 13px; color: #d6e2ff; margin-left: 2px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.lz-pfad a { color: #e6eeff; text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 1px; }
.lz-pfad a:hover { border-bottom-color: rgba(255,255,255,.6); }
.lz-pfad a:focus-visible { outline: 2px solid #cfe0ff; outline-offset: 2px; border-radius: 3px; }
.lz-sep { color: rgba(255,255,255,.45); }
.lz-akt { color: #fff; font-weight: 600; }
.lz-kopf-spacer { flex: 1; }
.lz-zahnrad {
  appearance: none; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.12);
  color: #fff; width: 38px; height: 38px; border-radius: 10px; cursor: pointer; display: grid; place-items: center;
  transition: background .15s, transform .15s;
}
.lz-zahnrad:hover { background: rgba(255,255,255,.22); }
.lz-zahnrad:focus-visible { outline: 3px solid #cfe0ff; outline-offset: 2px; }
.lz-zahnrad svg { width: 20px; height: 20px; }
.lz-zahnrad.aktiv { background: #fff; color: var(--lapis-dunkel); transform: rotate(30deg); }

/* ---- Reiter (Aufnahme / Protokoll / Debug) ---- */
.lz-reiter-leiste { background: #fff; border-bottom: 1px solid var(--rand); }
.lz-reiter { display: flex; gap: 2px; max-width: 1320px; margin: 0 auto; padding: 0 24px; }
.lz-reiter a {
  appearance: none; border: 0; background: transparent; color: var(--text-schwach);
  padding: 12px 16px 11px; font-size: 14px; font-weight: 600; cursor: pointer;
  border-bottom: 2.5px solid transparent; text-decoration: none;
}
.lz-reiter a[aria-selected="true"] { color: var(--lapis-dunkel); border-bottom-color: var(--lapis); }
.lz-reiter a:hover { color: var(--text); }
.lz-reiter a:focus-visible { outline: 2px solid var(--lapis-rand); outline-offset: -2px; border-radius: 4px; }

/* Inhalt der Views bekommt bei geteiltem Kopf denselben zentrierten Rahmen wie der Kopf.
   .shell (Seiteninhalt) traegt das schon; der Kopf sitzt ausserhalb der .shell (volle Breite). */

/* ---- Rechtsseitiges, NICHT-blockierendes Panel (kein Scrim, aria-modal=false) ---- */
.lz-panel {
  position: fixed; top: 0; right: 0; height: 100vh; width: 540px; max-width: 94vw; background: var(--karte);
  border-left: 1px solid var(--rand); box-shadow: var(--schatten-panel); transform: translateX(100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1); z-index: 40; display: flex; flex-direction: column;
}
.lz-panel.offen { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) { .lz-panel { transition: none; } }
.lz-panel__kopf { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--rand); }
.lz-panel__kopf h2 { margin: 0; font-size: 15px; }
.lz-panel__geltung {
  font-size: 12px; color: var(--lapis-dunkel); background: var(--lapis-hell); border: 1px solid var(--lapis-rand);
  padding: 3px 9px; border-radius: 999px; font-weight: 600;
}
.lz-panel__x {
  margin-left: auto; appearance: none; border: 0; background: transparent; font-size: 22px; line-height: 1;
  color: var(--text-schwach); cursor: pointer; padding: 2px 6px; border-radius: 8px;
}
.lz-panel__x:hover { background: #eef1f6; }
.lz-panel__body { padding: 6px 18px 22px; overflow-y: auto; }
.lz-abschnitt { padding: 16px 0; border-bottom: 1px solid var(--rand); }
.lz-abschnitt:last-child { border-bottom: 0; }
.lz-abschnitt__titel { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-sehr-schwach); margin: 0 0 12px; }
/* #50 — Scope-Zwischenüberschrift (gruppiert Panel-Sektionen nach Geltungsbereich). */
.scope{display:flex;align-items:center;gap:10px;margin:20px 0 8px;}
.scope::after{content:"";flex:1;height:1px;background:var(--rand);}
.scope b{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--lapis);}
.scope small{font-size:11px;color:var(--text-sehr-schwach);letter-spacing:0;text-transform:none;font-weight:500;}
.lz-feld { margin-bottom: 16px; }
.lz-feld:last-child { margin-bottom: 0; }
.lz-feld label { display: flex; justify-content: space-between; align-items: baseline; font-size: 13.5px; font-weight: 600; margin-bottom: 7px; }
.lz-feld .lz-wert { color: var(--lapis-dunkel); font-variant-numeric: tabular-nums; }
.lz-feld input[type=range] { width: 100%; accent-color: var(--lapis); }
.lz-hilf { font-size: 12px; color: var(--text-schwach); margin-top: 6px; line-height: 1.45; }
/* #22 — Glossar (geprägte Begriffe) im Einstellungen-Panel. */
.lz-glossar-eingabe { display: flex; gap: 8px; margin: 10px 0 4px; }
.lz-glossar-eingabe input { flex: 1; min-width: 0; padding: 7px 10px; border: 1px solid var(--rand); border-radius: 8px; font-size: 13.5px; }
.lz-glossar-eingabe input:focus { outline: none; border-color: var(--lapis); }
.lz-glossar-fehler { font-size: 12.5px; color: var(--gefahr); font-weight: 600; margin: 4px 0 0; }
.lz-glossar-liste { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lz-glossar-liste li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; border: 1px solid var(--rand); border-radius: 8px; font-size: 13.5px; }
.lz-glossar-liste li.lz-glossar--warn { border-color: var(--gefahr); background: var(--gefahr-hell); color: var(--gefahr-dunkel); }
.lz-glossar-liste li .lz-glossar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lz-glossar-x { border: 0; background: none; cursor: pointer; font-size: 16px; line-height: 1; color: var(--text-schwach); padding: 0 2px; }
.lz-glossar-x:hover { color: var(--gefahr); }
.lz-glossar-budget { font-size: 12.5px; color: var(--text-schwach); margin: 10px 0 0; }
.lz-glossar-budget.lz-glossar--warn { color: var(--warn); font-weight: 600; }
.lz-panel__fuss { margin-top: auto; padding: 14px 18px; border-top: 1px solid var(--rand); display: flex; gap: 10px; align-items: center; }
.lz-gespeichert { font-size: 12.5px; color: var(--ok); font-weight: 600; }
.lz-fuss-link { font-size: 12.5px; color: var(--text-schwach); }

/* ===================== Issue #20: Experimentiermodus (namespaced exp-*, kollisionsfrei) ===================== */
/* Portiert aus mockups/protokoll-experimentiermodus.html; nutzt die bestehenden CSS-Variablen. */
.exp-schutz { display:flex; gap:9px; align-items:center; background:var(--ok-hell,#e7f6ee); border:1px solid #b6e3cb;
  color:#136c47; border-radius:10px; padding:9px 13px; font-size:13px; margin-bottom:14px; }
.exp-regen-note { display:flex; gap:9px; align-items:flex-start; background:#fdf3e0; border:1px solid #f0dcae;
  color:#7a531a; border-radius:10px; padding:9px 13px; font-size:12.5px; line-height:1.5; margin-bottom:12px; }
.exp-testbar { background:var(--karte); border:1px solid var(--lapis-rand); border-radius:var(--radius);
  box-shadow:var(--schatten); padding:16px; margin-bottom:14px; }
.exp-testbar__kopf { display:flex; align-items:center; gap:9px; margin-bottom:10px; flex-wrap:wrap; }
.exp-testbar__kopf h3 { margin:0; font-size:15px; }
.exp-kap { font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-sehr-schwach); }
.exp-promptbox { width:100%; min-height:110px; border:1px solid var(--rand); border-radius:9px; padding:11px;
  font:inherit; font-size:13.5px; color:var(--text); resize:vertical; line-height:1.5; }
.exp-testbar__aktionen { display:flex; align-items:center; gap:10px; margin-top:11px; flex-wrap:wrap; }
.exp-hint { font-size:12.5px; color:var(--text-schwach); }
.exp-spinner { width:15px; height:15px; border:2px solid var(--lapis-rand); border-top-color:var(--lapis);
  border-radius:50%; animation:exp-spin .7s linear infinite; display:inline-block; vertical-align:-2px; }
@keyframes exp-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .exp-spinner { animation:none; } }
.exp-vergleich { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:820px){ .exp-vergleich { grid-template-columns:1fr; } }
.exp-spalte { background:var(--karte); border:1px solid var(--rand); border-radius:var(--radius); box-shadow:var(--schatten);
  overflow:hidden; display:flex; flex-direction:column; }
.exp-spalte.exp-neu { border-color:var(--lapis-rand); box-shadow:0 0 0 2px var(--lapis-hell), var(--schatten); }
.exp-spalte__kopf { display:flex; align-items:center; gap:9px; padding:12px 16px; border-bottom:1px solid var(--rand);
  font-size:13.5px; font-weight:700; }
.exp-tag { font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; }
.exp-tag-aktuell { background:#eef1f6; color:var(--text-schwach); }
.exp-tag-neu { background:var(--lapis-hell); color:var(--lapis-dunkel); border:1px solid var(--lapis-rand); }
.exp-doc { padding:14px 18px 18px; overflow-y:auto; max-height:440px; }
.exp-doc h2 { font-size:15px; margin:14px 0 6px; } .exp-doc h2:first-child { margin-top:2px; }
.exp-doc p { margin:7px 0; line-height:1.55; font-size:14px; }
.exp-doc ul { margin:6px 0 6px 2px; padding-left:18px; } .exp-doc li { margin:4px 0; line-height:1.5; font-size:14px; }
.exp-uebernahme { position:sticky; bottom:0; margin-top:16px; background:var(--karte); border:1px solid var(--rand);
  border-radius:var(--radius); box-shadow:0 -4px 16px rgba(20,30,60,.07); padding:14px 16px;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap; z-index:5; }
.exp-uebernahme .exp-frage { font-size:13.5px; font-weight:600; }
.exp-scope { display:flex; gap:8px; flex-wrap:wrap; }
.exp-scope label { display:flex; align-items:center; gap:8px; border:1px solid var(--rand); border-radius:10px;
  padding:8px 12px; cursor:pointer; font-size:13.5px; background:#fff; }
.exp-scope label:has(input:checked) { border-color:var(--lapis); background:var(--lapis-hell); color:var(--lapis-dunkel);
  font-weight:600; }
.exp-scope input { accent-color:var(--lapis); }
.exp-scope .exp-sub { display:block; font-size:11.5px; font-weight:400; color:var(--text-schwach); }
.exp-scope label:has(input:checked) .exp-sub { color:var(--lapis-dunkel); }
.exp-uebernahme .exp-rechts { margin-left:auto; display:flex; gap:9px; align-items:center; }
.exp-vergangen-hinweis { font-size:12px; color:var(--text-sehr-schwach); }
.exp-fehler { color:var(--gefahr); font-size:12.5px; }
/* Transkript-Overlay (rechts) */
.exp-tpanel { position:fixed; top:0; right:0; height:100vh; width:420px; max-width:94vw; background:var(--karte);
  border-left:1px solid var(--rand); box-shadow:-8px 0 30px rgba(20,30,60,.14); transform:translateX(100%);
  transition:transform .28s cubic-bezier(.4,0,.2,1); z-index:40; display:flex; flex-direction:column; }
.exp-tpanel.exp-offen { transform:translateX(0); }
@media (prefers-reduced-motion:reduce){ .exp-tpanel { transition:none; } }
.exp-tpanel__kopf { display:flex; align-items:center; gap:10px; padding:15px 16px; border-bottom:1px solid var(--rand); }
.exp-tpanel__kopf h2 { margin:0; font-size:15px; }
.exp-tpanel__x { appearance:none; border:0; background:transparent; font-size:22px; line-height:1;
  color:var(--text-schwach); cursor:pointer; padding:2px 6px; border-radius:8px; }
.exp-tpanel__x:hover { background:#eef1f6; }
/* Issue #25 (Fix F1): „← Live-Transkript"-Affordance im Beleg-Modus (nach kap, vor ×). */
.exp-tpanel__live { margin-left:auto; white-space:nowrap; }
.exp-tpanel__live[hidden] { display:none; }
.exp-tpanel__live ~ .exp-tpanel__x { margin-left:8px; }
/* Nur im Overlay-Kopf: kap schiebt Live-Button/× nach rechts (die anderen .exp-kap unberuehrt). */
.exp-tpanel__kopf .exp-kap { margin-right:auto; }
.beleg-leer { margin:0; padding:16px 0; }
.exp-tpanel__body { padding:8px 16px 18px; overflow-y:auto; flex:1 1 auto; min-height:0; }
.exp-tturn { display:flex; gap:9px; align-items:baseline; padding:7px 0; border-top:1px solid var(--rand);
  font-size:13.5px; line-height:1.5; }
.exp-tturn:first-child { border-top:0; }
.exp-tturn .exp-zeit { color:var(--text-sehr-schwach); font-size:11.5px; font-variant-numeric:tabular-nums; flex:0 0 auto; }
.exp-tturn .exp-sp { font-weight:700; color:var(--lapis-dunkel); flex:0 0 auto; }
.exp-tturn .exp-sp--roh { font-style:italic; color:var(--text-schwach); }

/* Issue #25 Slice 1: Beleg-Highlight -- dezenter Lapis-Balken + Hintergrund auf den Quell-Zeilen. */
.exp-tturn--beleg { background:var(--lapis-hell); border-left:3px solid var(--lapis);
  margin-left:-16px; margin-right:-16px; padding-left:13px; padding-right:16px; border-radius:0 4px 4px 0; }
.beleg-hinweis { margin:0; padding:8px 16px; font-size:12.5px; color:var(--lapis-dunkel);
  background:var(--lapis-hell); border-bottom:1px solid var(--lapis-rand); }

/* Issue #25 Slice 1 / #31: Beleg-Blockleiste („Belege · Abschnitte") -- schmal, additiv, RO,
   einklappbar (<details>, default ZU). Die In-Text-Icons (#31) sind der Haupteinstieg; diese Liste
   ist der server-durable Fallback. */
.beleg-leiste { margin:0 0 14px; padding:9px 12px;
  background:var(--lapis-hell); border:1px solid var(--lapis-rand); border-radius:var(--radius); }
.beleg-leiste__titel { font-weight:700; font-size:12.5px; color:var(--lapis-dunkel);
  cursor:pointer; list-style:none; user-select:none; display:flex; align-items:center; gap:6px; }
/* Dezenter Auf-/Zu-Indikator (ersetzt das native Dreieck) */
.beleg-leiste__titel::-webkit-details-marker { display:none; }
.beleg-leiste__titel::after { content:'▸'; margin-left:auto; font-size:11px; transition:transform .12s ease; }
.beleg-leiste[open] .beleg-leiste__titel::after { transform:rotate(90deg); }
.beleg-leiste__titel:focus-visible { outline:2px solid var(--lapis-rand); outline-offset:2px; border-radius:4px; }
.beleg-leiste__inhalt { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:8px; }
.beleg-leiste__leer { margin:0; }
.beleg-leiste__liste { display:flex; flex-wrap:wrap; gap:6px; }
@media (prefers-reduced-motion: reduce) {
  .beleg-leiste__titel::after { transition:none; }
}
.beleg-chip { appearance:none; cursor:pointer; font:inherit; font-size:12px; line-height:1.3;
  padding:3px 9px; border:1px solid var(--lapis-rand); border-radius:999px; background:var(--karte);
  color:var(--lapis-dunkel); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.beleg-chip:hover { background:#fff; border-color:var(--lapis); }
.beleg-chip[aria-pressed="true"] { background:var(--lapis); color:#fff; border-color:var(--lapis); }

/* ============================================================
   Issue #29 — In-App-Fokus-Modus + Editor-Toolbar (protokoll.html)
   Reine Layout-/CSS-Huelle. Der EINE Yjs/ProseMirror-Editor
   (#protokoll-dokument) wird NICHT neu gemountet oder im DOM
   verschoben -- ausschliesslich CSS. Kein Browser-Fullscreen.
   ============================================================ */

/* ---- Slice 2: Editor-Toolbar (Geschwister VOR #protokoll-dokument in .live-doc-wrap) ---- */
.pm-toolbar {
  position: sticky; top: 0; z-index: 6;
  display: flex; align-items: center; gap: 4px; flex-wrap: nowrap;
  padding: 6px 8px; margin: 0 0 8px;
  background: var(--karte); border: 1px solid var(--rand); border-radius: 9px;
  box-shadow: var(--schatten);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.pm-toolbar[hidden] { display: none; }
.pm-tb-btn {
  appearance: none; cursor: pointer; font: inherit; font-size: 13px; line-height: 1;
  min-width: 34px; height: 32px; padding: 0 9px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--rand); border-radius: 7px; background: #fff; color: var(--text);
  flex: 0 0 auto; white-space: nowrap;
}
.pm-tb-btn:hover { border-color: var(--lapis); background: var(--lapis-hell); }
.pm-tb-btn:focus-visible { outline: 2px solid var(--lapis-rand); outline-offset: 1px; }
.pm-tb-btn.aktiv { background: var(--lapis); color: #fff; border-color: var(--lapis); }
.pm-tb-btn:disabled { opacity: .4; cursor: default; }
.pm-tb-btn:disabled:hover { border-color: var(--rand); background: #fff; }
.pm-tb-sep { flex: 0 0 auto; width: 1px; align-self: stretch; margin: 3px 4px; background: var(--rand); }
/* Issue #32: Rückgängig/Wiederholen (↶ ↷) — Pfeil-Glyphen etwas groesser fuer Lesbarkeit. Der
   :disabled-Stil (Bestand oben: opacity .4, kein Hover) greift auch fuer diese Buttons. */
.pm-tb-btn[data-cmd="undo"], .pm-tb-btn[data-cmd="redo"] { font-size: 16px; }

/* ---- Slice 1: „Fokus verlassen"-Button (fixed oben rechts, nur im Fokus sichtbar) ---- */
#fokus-x { display: none; }
body.lz-fokus #fokus-x {
  display: inline-flex; align-items: center; gap: 6px;
  position: fixed; top: 12px; right: 14px; z-index: 60;
  appearance: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600;
  padding: 8px 13px; min-height: 40px;
  border: 1px solid var(--lapis-rand); border-radius: 10px;
  background: var(--karte); color: var(--lapis-dunkel);
  box-shadow: 0 4px 16px rgba(20,30,60,.18);
}
body.lz-fokus #fokus-x:hover { background: var(--lapis); color: #fff; border-color: var(--lapis); }
body.lz-fokus #fokus-x:focus-visible { outline: 2px solid var(--lapis-rand); outline-offset: 2px; }

/* #57: on-demand „Transkript ansehen" im Vollbild (Ansicht-Menue ist dort ausgeblendet). Fixed oben
   rechts LINKS neben dem Vollbild-verlassen-Button; nur sichtbar, wenn das Transkript noch ZU ist
   (offen -> das Panel-× uebernimmt das Schliessen). Proxy auf #btn-exp-transkript (kein Extra-JS). */
/* #57: standardmaessig ueberall AUS. Die on-demand-Affordance ist NUR im Handy-Vollbild noetig
   (dort ist die Ansicht-Menueleiste ausgeblendet); Desktop-Vollbild bleibt unveraendert (kein Button).
   Darum sind die Sichtbar-/Hover-/Fokus-Regeln bewusst in @media (max-width:860px) gekapselt. */
#fokus-transkript-auf { display: none; }
@media (max-width: 860px) {
  body.lz-fokus:not(.transkript-offen) #fokus-transkript-auf {
    display: inline-flex; align-items: center; gap: 6px;
    position: fixed; top: 12px; right: 190px; z-index: 60;
    appearance: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600;
    padding: 8px 13px; min-height: 40px;
    border: 1px solid var(--lapis-rand); border-radius: 10px;
    background: var(--karte); color: var(--lapis-dunkel);
    box-shadow: 0 4px 16px rgba(20,30,60,.18);
  }
  body.lz-fokus:not(.transkript-offen) #fokus-transkript-auf:hover { background: var(--lapis); color: #fff; border-color: var(--lapis); }
  body.lz-fokus:not(.transkript-offen) #fokus-transkript-auf:focus-visible { outline: 2px solid var(--lapis-rand); outline-offset: 2px; }
}

/* ---- Slice 1: Fokus-Modus — App-Chrome tritt zurueck, Protokoll fuellt das Fenster (Desktop) ---- */
body.lz-fokus .lz-kopf-wrap,
body.lz-fokus .lz-kopf,
body.lz-fokus .lz-reiter-leiste { display: none; }
body.lz-fokus .seiten-titel,
body.lz-fokus .policy-hinweis,
body.lz-fokus .beleg-leiste,
body.lz-fokus #kandidaten-panel,
body.lz-fokus .footer-hinweis { display: none; }
body.lz-fokus .shell { max-width: none; padding: 8px 12px; }
body.lz-fokus .split--protokoll-live { grid-template-columns: minmax(0, 1fr); }
/* Die Protokoll-Karte + Doc-Wrap fuellen die verfuegbare Hoehe; das Dokument scrollt intern.
   100dvh minus Steuerleiste (~64px) minus Karten-Kopf/Paddings (~90px). Grosszuegig geschaetzt;
   min-height:0 (Pflicht) laesst den inneren overflow greifen. #protokoll-dokument wird NICHT
   im DOM verschoben -- nur die Hoehe/Overflow via CSS gesetzt. */
body.lz-fokus .split--protokoll-live > .karte { min-height: 0; display: flex; flex-direction: column; }
body.lz-fokus .live-doc-wrap {
  display: flex; flex-direction: column; min-height: 0;
  height: calc(100dvh - 160px);
}
body.lz-fokus .live-dokument--yjs { flex: 1 1 auto; min-height: 0; overflow: auto; }

/* ---- Slice 3: Mobile-Split 50/50 (<=860px) ---- */
@media (max-width: 860px) {
  /* #57 „Nur Protokoll": Mobile-Vollbild = Protokoll auf VOLLER Hoehe; das Transkript oeffnet nicht
     automatisch. Erst wenn der Nutzer „Transkript ansehen" waehlt (Overlay -> `.exp-offen` +
     body.transkript-offen), wird auf den 50/50-Split gekoppelt. */
  body.lz-fokus .shell {
    display: grid; grid-template-rows: 1fr; height: 100dvh; overflow: auto;
    padding: 6px 10px;
  }
  body.lz-fokus.transkript-offen .shell { height: 50dvh; }
  /* Slots muessen scrollen koennen (Pflicht): min-height:0 + overflow. */
  body.lz-fokus .split--protokoll-live { min-height: 0; }
  body.lz-fokus .split--protokoll-live > .karte { min-height: 0; overflow: auto; }
  body.lz-fokus .live-doc-wrap { height: auto; min-height: 0; }
  body.lz-fokus .live-dokument--yjs { overflow: auto; min-height: 0; }

  /* Transkript = DIESELBE #exp-tpanel-Instanz, per CSS als untere Haelfte (kein zweiter Container,
     kein JS-Move -> #27-Poll/#25-Beleg-Bindung intakt). Geschlossen bleibt es unten weggeschoben
     (transform via Basis-Regel translateX(100%) reicht nicht bei bottom-Andockung -> explizit
     translateY(100%)); NUR wenn offen (`.exp-offen`) wird es sichtbar eingeblendet. */
  body.lz-fokus .exp-tpanel {
    position: fixed; top: auto; bottom: 0; left: 0; right: 0;
    width: 100%; max-width: none; height: 50dvh; transform: translateY(100%);
    border-left: 0; border-top: 1px solid var(--rand);
    box-shadow: 0 -8px 30px rgba(20,30,60,.14);
  }
  body.lz-fokus .exp-tpanel.exp-offen { transform: none; }
  /* #57: Der Transkript-eigene Schliess-Button (× im Panel-Kopf) MUSS im Mobile-Vollbild sichtbar
     sein — Schliessen faltet das Protokoll wieder auf volle Hoehe aus. (Zuvor bewusst ausgeblendet,
     da das Overlay dauerhaft offen war; das gilt seit #57 nicht mehr.) */
  body.lz-fokus .exp-tpanel .exp-tpanel__x { display: inline-block; }
}

/* Landscape auf schmalen Screens: nebeneinander statt uebereinander. */
@media (max-width: 860px) and (orientation: landscape) {
  /* #57: Protokoll voll (100dvh, volle Breite), solange das Transkript zu ist. */
  body.lz-fokus .shell {
    grid-template-columns: 1fr; grid-template-rows: auto;
    height: 100dvh; width: 100vw; margin: 0; overflow: auto;
  }
  body.lz-fokus.transkript-offen .shell { width: 50vw; }
  body.lz-fokus .exp-tpanel {
    top: 0; bottom: 0; left: auto; right: 0;
    width: 50vw; max-width: none; height: 100dvh; transform: translateX(100%);
    border-top: 0; border-left: 1px solid var(--rand);
    box-shadow: -8px 0 30px rgba(20,30,60,.14);
  }
  body.lz-fokus .exp-tpanel.exp-offen { transform: none; }
}

/* #42 Slice 1: Aufnahme-Overlay-Host auf der Protokoll-Seite. Immer im DOM, `hidden` gestartet
   (Record-Button toggelt nur [hidden]). Kein Scrim / kein Fokus-Trap -- das Live-Protokoll bleibt
   sichtbar/bedienbar. Der Inhalt (Fragment) bringt seine eigene .shell/.karte-Gestaltung mit; hier nur
   eine dezente Abtrennung nach oben. [hidden] muss zuverlaessig ausblenden (einige .karte-Regeln
   setzen display) -- daher explizit. */
.ts-af-overlay { border-top: 1px solid var(--rand); margin-top: 8px; }
.ts-af-overlay[hidden] { display: none !important; }

/* #42 Slice 2: Overlay prominent bei Record-Klick -- als NICHT-modales, gedocktes Panel.
   Kein Scrim, kein Fokus-Trap: das Live-Protokoll bleibt sichtbar UND bedienbar (der Sinn des
   Features). Das Panel wird beim Oeffnen fix im unteren Bereich des Viewports verankert (immer
   sofort sichtbar, egal wie weit gescrollt ist), bekommt ein eigenes Scrolling (max-height) und
   verdeckt den Live-Editor nicht dauerhaft: body.ts-af-open reserviert unten Platz, sodass das
   Doku-Ende erreichbar bleibt. Wird nur aktiv, wenn der Record-Button das Panel geoeffnet hat
   (Klasse ts-af-overlay--dock, gesetzt im Toggle-JS); ohne die Klasse bleibt das statische Inline-
   Layout (Slice-1-Fallback / kein JS). */
.ts-af-overlay--dock {
  position: fixed;
  right: 16px;
  bottom: 16px;
  left: auto;
  width: min(460px, calc(100vw - 32px));
  max-height: 72vh;
  overflow-y: auto;
  z-index: 1200;                 /* ueber dem Editor, unter dem Fokus-X (#fokus-x hoeher) */
  margin-top: 0;
  border: 1px solid var(--lapis-rand);
  border-radius: var(--radius);
  background: var(--karte);
  box-shadow: 0 8px 28px rgba(20, 30, 60, .22), 0 2px 8px rgba(20, 30, 60, .12);
  -webkit-overflow-scrolling: touch;
}
/* Die gedockte Variante bringt ihr eigenes Chrome mit -> die innere .shell des Fragments soll
   nicht nochmal zentrieren/breit werden, sondern kompakt ins Panel passen. */
.ts-af-overlay--dock #ts-af-seite { max-width: none; margin: 0; padding: 14px 16px 16px; }

/* Kompakter Panel-Kopf (Slice 2, Punkt 2): Titelzeile + Schliessen, damit der Nutzer das Panel
   klar als eigenstaendige Aufnahme-Bedienung erkennt und wieder zuklappen kann. Nur in der
   gedockten Variante sichtbar. */
.ts-af-overlay__kopf {
  display: none;
  position: sticky; top: 0; z-index: 1;
  align-items: center; gap: 10px;
  padding: 12px 16px;
  background: var(--lapis-hell);
  border-bottom: 1px solid var(--lapis-rand);
  border-radius: var(--radius) var(--radius) 0 0;
}
.ts-af-overlay--dock .ts-af-overlay__kopf { display: flex; }
.ts-af-overlay__kopf-punkt {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--gefahr); flex: 0 0 auto;
  box-shadow: 0 0 0 3px rgba(198, 45, 58, .18);
}
.ts-af-overlay__kopf-titel { font-weight: 700; font-size: 14.5px; color: var(--text); }
.ts-af-overlay__kopf-x {
  margin-left: auto; border: 1px solid var(--rand); background: #fff;
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  font-size: 18px; line-height: 1; color: var(--text-schwach);
}
.ts-af-overlay__kopf-x:hover { background: #f6f8fc; color: var(--text); }

/* Start-Attestierung im gedockten Panel hervorheben (Slice 2, Punkt 2): der Consent-Block
   (#ts-af-start-block) ist der erste Schritt -- klarer Rahmen + Akzent, damit der Start-Flow
   sofort gefunden wird. Reine Gestaltung; IDs/JS-Flow unveraendert. */
.ts-af-overlay--dock #ts-af-start-block .karte {
  border: 2px solid var(--lapis);
  background: var(--lapis-hell);
}
.ts-af-overlay--dock #ts-af-start-block .attest-label { font-weight: 500; }

/* body-Platzreservierung: solange das Panel gedockt offen ist, unten Luft lassen, damit das
   Live-Doku-Ende nicht dauerhaft hinter dem Panel verschwindet (Non-Verdeckung). */
body.ts-af-open .shell { padding-bottom: 76vh; }

@media (max-width: 720px) {
  /* Mobile: volle Breite unten als Bottom-Sheet, weiterhin nicht-modal (Doku darueber scrollbar). */
  .ts-af-overlay--dock {
    right: 0; left: 0; bottom: 0;
    width: 100%;
    max-height: 62vh;
    border-radius: var(--radius) var(--radius) 0 0;
    border-left: none; border-right: none; border-bottom: none;
  }
  body.ts-af-open .shell { padding-bottom: 66vh; }
}