/* Dokument-Werkstatt — Vollbild-Leseansicht einer KI-Antwort auf einer
   A4-proportionierten Seite. Bewusst ein eigenes Overlay (nicht der geteilte
   #dlg), damit Zoom, Markierung und spätere Komfortfunktionen Platz haben.
   Die Seite ist immer weiß wie Papier — unabhängig vom Thema; der Hintergrund
   ist gedämpft. A4-Dokumentstil aus der Druckvorlage übernommen. */

#werkstatt{position:fixed;inset:0;z-index:9000;display:none;flex-direction:column;
  background:rgba(10,31,68,.55)}
#werkstatt.auf{display:flex}

.wst-leiste{display:flex;align-items:center;gap:12px;padding:10px 16px;flex:0 0 auto;
  background:var(--nacht,#0A1F44);color:#fff}
.wst-leiste .wst-titel{font-weight:700;letter-spacing:.02em;white-space:nowrap;
  max-width:32ch;overflow:hidden;text-overflow:ellipsis}
.wst-werkzeuge{display:flex;gap:8px;align-items:center;flex:0 0 auto;flex-wrap:wrap}
.wst-rechts{display:flex;gap:8px;align-items:center;margin-left:auto}
.wst-zoom{display:flex;align-items:center;gap:2px}
.wst-btn{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.25);
  border-radius:7px;padding:5px 10px;font-size:13px;cursor:pointer;font-weight:600;white-space:nowrap}
.wst-btn:hover{background:rgba(255,255,255,.22)}
.wst-zoom-wert{min-width:52px;text-align:center;font-variant-numeric:tabular-nums;font-size:12.5px}

.wst-buehne{flex:1;overflow:auto;padding:28px 20px 64px;display:flex;
  justify-content:center;align-items:flex-start}

.wst-seite{--wst-breite:794px;--wst-zoom:1;background:#fff;color:#0A1F44;
  width:var(--wst-breite);min-height:calc(var(--wst-breite) * 297 / 210);
  box-shadow:0 8px 40px rgba(0,0,0,.35);border-radius:2px;padding:56px 64px;
  transform:scale(var(--wst-zoom));transform-origin:top center;
  font-family:Inter,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  font-size:13px;line-height:1.6}

.wst-kopf{display:flex;justify-content:space-between;align-items:baseline;
  border-bottom:2px solid #0A1F44;padding-bottom:8px;margin-bottom:20px}
.wst-kopf .wm{font-weight:800;letter-spacing:.13em;font-size:13px}
.wst-kopf .art{color:#6B7280;font-size:10.5px}

.wst-doc{white-space:pre-wrap;overflow-wrap:anywhere}
.wst-doc .md-h{font-weight:700;color:#0A1F44;margin:16px 0 6px}
.wst-doc .md-tab-wrap{white-space:normal;margin:12px 0;overflow-x:auto}
.wst-doc .md-tab{border-collapse:collapse;font-size:12px;line-height:1.4}
.wst-doc .md-tab th,.wst-doc .md-tab td{border:1px solid #C9CED6;padding:5px 9px;
  text-align:left;vertical-align:top}
.wst-doc .md-tab thead th{background:#F1F3F5;font-size:10px;text-transform:uppercase;
  letter-spacing:.05em;color:#6B7280}
.wst-doc .md-tab td.num,.wst-doc .md-tab th.num{text-align:right;
  font-family:"Courier New",monospace;white-space:nowrap}
.wst-doc .md-tab td.mitte,.wst-doc .md-tab th.mitte{text-align:center}
.wst-doc code{font-family:"Courier New",monospace;background:#F1F3F5;padding:1px 4px;border-radius:3px}
.wst-doc pre.md-code{font-family:"Courier New",monospace;background:#F1F3F5;border-radius:6px;
  padding:10px 12px;overflow-x:auto;white-space:pre}
.wst-doc a{color:#0A57C2}

/* Schwebendes Markierungs-Menü (Stufe 2). position:fixed = Viewport-Koordinaten
   aus getBoundingClientRect, unabhängig vom Zoom der Seite. */
.wst-auswahl{position:fixed;z-index:9100;display:none;gap:4px;
  background:var(--nacht,#0A1F44);border-radius:9px;padding:5px 6px;
  box-shadow:0 6px 24px rgba(0,0,0,.4)}
.wst-auswahl.auf{display:flex}
.wst-auswahl button{background:transparent;color:#fff;border:0;border-radius:6px;
  padding:6px 11px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.wst-auswahl button:hover{background:rgba(255,255,255,.18)}
.wst-auswahl.wst-arbeitet{opacity:.55;pointer-events:none}

/* Status-Zeile in der Kopfleiste — sichtbare Rückmeldung, was passiert / verändert wurde. */
.wst-status{flex:1;min-width:0;display:flex;align-items:center;gap:8px;
  font-size:12.5px;color:#e8eefc;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wst-status .wst-klein{opacity:.7;font-weight:400}
.wst-status-hinweis{opacity:.75;font-weight:400}
.wst-status-arbeit{color:#ffe9a8}
.wst-status-fertig{color:#c7f0cf}
.wst-status-warn{color:#ffc9c2}
.wst-spin{width:13px;height:13px;border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;border-radius:50%;display:inline-block;animation:wstSpin .7s linear infinite}
@keyframes wstSpin{to{transform:rotate(360deg)}}

/* Während eine KI-Aktion läuft: die Seite gedämpft + Wartecursor. */
.wst-seite.wst-lauft{opacity:.6;pointer-events:none;cursor:progress;transition:opacity .15s}

/* Kurzes Aufleuchten der gerade geänderten Stelle. */
.wst-neu{background:#FFF3C4;outline:2px solid #F0C000;border-radius:3px;
  animation:wstNeuFlash 3.2s ease-out forwards}
@keyframes wstNeuFlash{
  0%{background:#FFE08A;outline-color:#E0A800}
  15%{background:#FFE08A;outline-color:#E0A800}
  75%{background:#FFF3C4}
  100%{background:transparent;outline-color:transparent}}

/* Gut sichtbare Meldung über dem Dokument (der normale Toast läge hinter dem Overlay). */
.wst-meldung{position:fixed;top:64px;left:50%;transform:translate(-50%,-10px);
  z-index:9200;max-width:min(680px,90vw);padding:11px 20px;border-radius:10px;
  font-size:14px;font-weight:600;box-shadow:0 8px 30px rgba(0,0,0,.4);
  opacity:0;pointer-events:none;text-align:center;
  transition:opacity .2s ease, transform .2s ease}
.wst-meldung.auf{opacity:1;transform:translate(-50%,0)}
.wst-meldung-fertig{background:#1f7a3d;color:#fff}
.wst-meldung-warn{background:#b3261e;color:#fff}
.wst-meldung-info{background:var(--nacht,#0A1F44);color:#fff}

@media (max-width:900px){ .wst-seite{padding:34px 30px} .wst-status{display:none} .wst-titel{display:none} }