/* ═══════════════════════════════════════════════════════════════════════════════
   Geschäftsbriefe & Schreiben (docs/LETTERS.md)
   Namensräume:  .ltr-  Schreiben-Assistent · .lpa-  Briefpapier/Layout-Administration
                 .bcd-  Digitale Visitenkarte
   Es werden ausschließlich Tokens aus css/design-system.css verwendet — keine Hex-Werte,
   keine rohen px-Schriftgrößen. Dynamische Werte (Zonenpositionen im Layout-Assistenten,
   Fortschrittsbreiten) kommen als Inline-Style aus dem JS, wie im Projekt erlaubt.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ══════════════ 1 · Arbeitsfenster (KEIN Modal — Hintergrund bleibt bedienbar) ══ */
#ltr-layer {
  position: fixed; inset: 0; pointer-events: none; z-index: 8200;
}
#ltr-layer > * { pointer-events: auto; }

.ltr-win {
  position: fixed; right: var(--space-5); bottom: var(--space-5);
  width: min(1180px, calc(100vw - var(--space-6)));
  height: min(840px, calc(100vh - var(--space-6)));
  display: flex; flex-direction: column;
  background: var(--color-surface); color: var(--gray-900);
  border: 1px solid var(--gray-300); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); overflow: hidden;
}
.ltr-win.is-min { height: auto; width: min(420px, calc(100vw - var(--space-6))); }
.ltr-win.is-min .ltr-body, .ltr-win.is-min .ltr-foot { display: none; }
.ltr-win.is-max { right: var(--space-3); bottom: var(--space-3); left: var(--space-3); top: var(--space-3); width: auto; height: auto; }

.ltr-head {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-forest); color: var(--color-surface); flex: 0 0 auto; cursor: default;
}
.ltr-head-title { font-weight: 600; font-size: var(--text-sm); flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ltr-head-sub { font-size: var(--text-xs); opacity: .8; font-weight: 400; }
.ltr-head-actions { display: flex; gap: var(--space-1); flex: 0 0 auto; }
.ltr-iconbtn {
  border: none; background: rgba(255,255,255,.12); color: var(--color-surface);
  width: 28px; height: 28px; border-radius: var(--radius-sm); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font-size: var(--text-sm); line-height: 1;
}
.ltr-iconbtn:hover { background: rgba(255,255,255,.24); }

.ltr-body { flex: 1 1 auto; display: grid; grid-template-columns: 224px minmax(0,1fr) minmax(0,0.95fr); min-height: 0; }
.ltr-win.no-preview .ltr-body { grid-template-columns: 224px minmax(0,1fr); }

/* ── Schritt-Navigation ─────────────────────────────────────────────────────── */
.ltr-steps { border-right: 1px solid var(--gray-300); background: var(--gray-100); padding: var(--space-3) 0; overflow-y: auto; }
.ltr-step {
  display: flex; gap: var(--space-3); align-items: flex-start; width: 100%;
  padding: var(--space-3) var(--space-4); border: none; background: transparent;
  text-align: left; cursor: pointer; color: var(--gray-700); font-size: var(--text-sm);
  border-left: 3px solid transparent;
}
.ltr-step:hover { background: var(--color-sage-soft); }
.ltr-step.is-active { background: var(--color-surface); border-left-color: var(--color-forest); color: var(--gray-900); font-weight: 600; }
.ltr-step.is-active .ltr-step-no { background: var(--color-forest); color: var(--color-surface); }
.ltr-step.is-done .ltr-step-no { background: var(--color-success-soft); color: var(--color-success-ink); }
.ltr-step.has-error .ltr-step-no { background: var(--color-danger-soft); color: var(--color-danger-ink); }

/* ── Inhaltsspalte ─────────────────────────────────────────────────────────── */
.ltr-pane { overflow-y: auto; padding: var(--space-5); min-width: 0; }
.ltr-sec { margin-bottom: var(--space-5); }
.ltr-sec-title { font-size: var(--text-lg); font-weight: 600; margin: 0 0 var(--space-3); color: var(--color-forest); }
.ltr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); }
.ltr-grid.cols-1 { grid-template-columns: 1fr; }
.ltr-field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.ltr-field.span-2 { grid-column: span 2; }
.ltr-field > label { font-size: var(--text-xs); font-weight: 600; color: var(--gray-700); }
.ltr-field .req { color: var(--color-danger-ink); }
.ltr-field input[type=text], .ltr-field input[type=date], .ltr-field input[type=number],
.ltr-field input[type=email], .ltr-field select, .ltr-field textarea {
  width: 100%; padding: var(--space-2) var(--space-3);
  border: 1px solid var(--gray-300); border-radius: var(--radius-md);
  font: inherit; font-size: var(--text-sm); background: var(--color-surface); color: var(--gray-900);
}
.ltr-field textarea { min-height: 76px; resize: vertical; }
.ltr-field input:focus, .ltr-field select:focus, .ltr-field textarea:focus {
  outline: 2px solid var(--color-sage); outline-offset: 1px; border-color: var(--color-sage);
}
.ltr-field.is-invalid input, .ltr-field.is-invalid select, .ltr-field.is-invalid textarea { border-color: var(--color-danger); }
.ltr-help { font-size: var(--text-xs); color: var(--gray-500); overflow-wrap: anywhere; }
.ltr-check { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--text-sm); color: var(--gray-900); }
.ltr-check input { margin-top: 3px; flex: 0 0 auto; }

.ltr-card { border: 1px solid var(--gray-300); border-radius: var(--radius-md); padding: var(--space-4); background: var(--color-surface); }
.ltr-card + .ltr-card { margin-top: var(--space-3); }
.ltr-card-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.ltr-card-head h4 { margin: 0; font-size: var(--text-sm); font-weight: 600; flex: 1 1 auto; }

/* Empfängerauswahl */
.ltr-recip-group { margin-bottom: var(--space-3); }
.ltr-recip-group > h5 { margin: 0 0 var(--space-2); font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: .04em; color: var(--gray-500); font-weight: 600; }
.ltr-recip-list { display: flex; flex-direction: column; gap: var(--space-1); }
.ltr-recip {
  display: flex; align-items: baseline; gap: var(--space-2); width: 100%;
  padding: var(--space-2) var(--space-3); border: 1px solid var(--gray-300);
  border-radius: var(--radius-md); background: var(--color-surface);
  cursor: pointer; text-align: left; font-size: var(--text-sm); color: var(--gray-900);
  white-space: normal; overflow-wrap: anywhere;
}
.ltr-recip:hover { border-color: var(--color-sage); background: var(--color-sage-soft); }
.ltr-recip.is-active { border-color: var(--color-forest); background: var(--color-forest-soft); }
.ltr-recip-name { font-weight: 600; }
.ltr-recip-meta { color: var(--gray-500); font-size: var(--text-xs); }

/* Bezüge */
.ltr-links { display: flex; flex-direction: column; gap: var(--space-2); }
.ltr-link-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3);
  border: 1px solid var(--gray-300); border-radius: var(--radius-md); font-size: var(--text-sm); }
.ltr-link-row .ltr-link-label { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.ltr-link-type { font-size: var(--text-xs); color: var(--gray-500); }

/* ── Editor ────────────────────────────────────────────────────────────────── */
.ltr-toolbar {
  display: flex; flex-wrap: wrap; gap: var(--space-1); padding: var(--space-2);
  border: 1px solid var(--gray-300); border-bottom: none;
  border-radius: var(--radius-md) var(--radius-md) 0 0; background: var(--gray-100);
}
.ltr-tb {
  border: 1px solid transparent; background: transparent; color: var(--gray-700);
  border-radius: var(--radius-sm); padding: var(--space-1) var(--space-2);
  cursor: pointer; font-size: var(--text-xs); line-height: 1.4; white-space: nowrap;
}
.ltr-tb:hover { background: var(--color-surface); border-color: var(--gray-300); }
.ltr-tb.is-on { background: var(--color-forest-soft); border-color: var(--color-sage); color: var(--color-forest); }
.ltr-tb-sep { width: 1px; align-self: stretch; background: var(--gray-300); margin: 0 var(--space-1); }

.ltr-editor {
  min-height: 300px; max-height: 52vh; overflow-y: auto;
  border: 1px solid var(--gray-300); border-radius: 0 0 var(--radius-md) var(--radius-md);
  padding: var(--space-4); background: var(--color-surface);
  font-size: var(--text-sm); line-height: 1.6; color: var(--gray-900);
}
.ltr-editor:focus { outline: 2px solid var(--color-sage); outline-offset: -2px; }
.ltr-editor p { margin: 0 0 var(--space-3); }
.ltr-editor h3 { font-size: var(--text-base); font-weight: 600; margin: var(--space-4) 0 var(--space-2); }
.ltr-editor ul, .ltr-editor ol { margin: 0 0 var(--space-3) var(--space-5); }
.ltr-editor li { margin-bottom: var(--space-1); }
.ltr-editor table { border-collapse: collapse; width: 100%; margin-bottom: var(--space-3); }
.ltr-editor th, .ltr-editor td { border: 1px solid var(--gray-300); padding: var(--space-1) var(--space-2); font-size: var(--text-sm); }
.ltr-editor th { background: var(--gray-100); text-align: left; font-weight: 600; }
.ltr-editor hr.ltr-pb { border: none; border-top: 2px dashed var(--color-sage); margin: var(--space-4) 0; }

/* Variablen-Chip — der Nutzer sieht NIE den technischen Schlüssel */
.ltr-var {
  display: inline-block; padding: 1px var(--space-2); border-radius: var(--radius-sm);
  background: var(--color-sage-soft); color: var(--color-info-ink);
  font-size: var(--text-xs); font-weight: 600; white-space: nowrap; cursor: default;
}
.ltr-var::before { content: '⌗ '; opacity: .6; }

.ltr-pop {
  position: absolute; z-index: 9400; min-width: 280px; max-width: 360px; max-height: 60vh; overflow-y: auto;
  background: var(--color-surface); border: 1px solid var(--gray-300);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: var(--space-2);
}
.ltr-pop-search { width: 100%; padding: var(--space-2); margin-bottom: var(--space-2);
  border: 1px solid var(--gray-300); border-radius: var(--radius-sm); font: inherit; font-size: var(--text-sm); }
.ltr-pop-group { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em;
  color: var(--gray-500); font-weight: 600; padding: var(--space-2) var(--space-2) var(--space-1); }
.ltr-pop-item {
  display: block; width: 100%; text-align: left; border: none; background: transparent;
  padding: var(--space-2); border-radius: var(--radius-sm); cursor: pointer;
  font-size: var(--text-sm); color: var(--gray-900); white-space: normal; overflow-wrap: anywhere;
}
.ltr-pop-item:hover, .ltr-pop-item.is-active { background: var(--color-sage-soft); }
.ltr-pop-item small { display: block; color: var(--gray-500); font-size: var(--text-xs); }

/* Textbaustein-/Abschnittsliste */
.ltr-blocks { display: flex; flex-direction: column; gap: var(--space-1); }
.ltr-block {
  display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-2) var(--space-3);
  border: 1px solid var(--gray-300); border-radius: var(--radius-md); font-size: var(--text-sm);
}
.ltr-block.is-required { background: var(--gray-100); }
.ltr-block-label { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.ltr-block-tag { font-size: var(--text-xs); color: var(--gray-500); }

/* ── Vorschau ──────────────────────────────────────────────────────────────── */
.ltr-preview { border-left: 1px solid var(--gray-300); display: flex; flex-direction: column; min-width: 0; background: var(--gray-100); }
.ltr-preview-bar { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--gray-300); background: var(--color-surface); flex: 0 0 auto; }
.ltr-preview-bar .spacer { flex: 1 1 auto; }
.ltr-preview-frame { flex: 1 1 auto; border: none; width: 100%; background: var(--gray-100); }
.ltr-preview-empty { flex: 1 1 auto; display: flex; align-items: center; justify-content: center;
  padding: var(--space-5); text-align: center; color: var(--gray-500); font-size: var(--text-sm); }

/* ── Prüfmeldungen ─────────────────────────────────────────────────────────── */
.ltr-issues { display: flex; flex-direction: column; gap: var(--space-2); }
.ltr-issue {
  display: flex; gap: var(--space-3); align-items: flex-start; width: 100%; text-align: left;
  padding: var(--space-3); border-radius: var(--radius-md); border: 1px solid transparent;
  font-size: var(--text-sm); cursor: pointer; white-space: normal; overflow-wrap: anywhere;
}
.ltr-issue.lv-blocker { background: var(--color-danger-soft); border-color: var(--color-danger); color: var(--color-danger-ink); }
.ltr-issue.lv-warning { background: var(--color-warning-soft); border-color: var(--color-warning); color: var(--color-warning-ink); }
.ltr-issue.lv-hint { background: var(--gray-100); border-color: var(--gray-300); color: var(--gray-700); }
.ltr-issue-icon { flex: 0 0 auto; font-weight: 700; }
.ltr-issue-go { flex: 0 0 auto; font-size: var(--text-xs); text-decoration: underline; }

/* ── Fußleiste ─────────────────────────────────────────────────────────────── */
.ltr-foot {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  padding: var(--space-3) var(--space-4); border-top: 1px solid var(--gray-300);
  background: var(--color-surface); flex: 0 0 auto;
}
.ltr-foot .spacer { flex: 1 1 auto; }
.ltr-autosave { font-size: var(--text-xs); color: var(--gray-500); }
.ltr-btn, .ltr-btn-primary, .ltr-btn-ghost {
  border-radius: var(--radius-md); padding: var(--space-2) var(--space-4);
  font: inherit; font-size: var(--text-sm); font-weight: 600; cursor: pointer;
  white-space: normal; overflow-wrap: anywhere; line-height: 1.3;
}
.ltr-btn { border: 1px solid var(--gray-300); background: var(--color-surface); color: var(--gray-900); }
.ltr-btn:hover { border-color: var(--color-sage); background: var(--color-sage-soft); }
.ltr-btn-primary { border: 1px solid var(--color-forest); background: var(--color-forest); color: var(--color-surface); }
.ltr-btn-primary:hover { background: var(--color-forest-hover); }
.ltr-btn-primary[disabled], .ltr-btn[disabled] { opacity: .5; cursor: not-allowed; }
.ltr-btn-ghost { border: 1px solid transparent; background: transparent; color: var(--color-sage); }
.ltr-btn-ghost:hover { background: var(--color-sage-soft); }

/* Statusanzeige */
.ltr-status {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 2px var(--space-2); border-radius: var(--radius-pill);
  font-size: var(--text-xs); font-weight: 600; white-space: nowrap;
}
.ltr-status.st-draft { background: var(--gray-100); color: var(--gray-700); }
.ltr-status.st-in_review { background: var(--color-info-soft); color: var(--color-info-ink); }
.ltr-status.st-approved, .ltr-status.st-finalized, .ltr-status.st-sent { background: var(--color-success-soft); color: var(--color-success-ink); }
.ltr-status.st-cancelled { background: var(--color-warning-soft); color: var(--color-warning-ink); }

/* Entwurfsleiste (minimierte Fenster) */
#ltr-tray { position: fixed; right: var(--space-5); bottom: var(--space-2); display: flex; gap: var(--space-2); z-index: 8300; }

/* Liste der Schreiben im Vorgangs-Dokumente-Tab */
.ltr-caselist { display: flex; flex-direction: column; gap: var(--space-2); }
.ltr-caseitem { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-2) var(--space-3);
  border: 1px solid var(--gray-300); border-radius: var(--radius-md); font-size: var(--text-sm); }
.ltr-caseitem .t { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }

/* ══════════════ 2 · Briefpapier- und Layout-Administration (.lpa-) ══════════ */
.lpa-wrap { display: flex; flex-direction: column; gap: var(--space-4); }
.lpa-toolbar { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.lpa-toolbar .spacer { flex: 1 1 auto; }
.lpa-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-3); }
.lpa-item { border: 1px solid var(--gray-300); border-radius: var(--radius-md); padding: var(--space-4); background: var(--color-surface); }
.lpa-item h4 { margin: 0 0 var(--space-1); font-size: var(--text-sm); font-weight: 600; overflow-wrap: anywhere; }
.lpa-item .num { font-size: var(--text-xs); color: var(--gray-500); font-variant-numeric: tabular-nums; }
.lpa-item .meta { font-size: var(--text-xs); color: var(--gray-700); margin-top: var(--space-2); }
.lpa-item .acts { display: flex; gap: var(--space-2); margin-top: var(--space-3); flex-wrap: wrap; }
.lpa-badge { display: inline-block; padding: 1px var(--space-2); border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 600; }
.lpa-badge.ok { background: var(--color-success-soft); color: var(--color-success-ink); }
.lpa-badge.draft { background: var(--gray-100); color: var(--gray-700); }
.lpa-badge.warn { background: var(--color-warning-soft); color: var(--color-warning-ink); }

/* Layout-Assistent */
.lpa-designer { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: var(--space-4); align-items: start; }
.lpa-stage-wrap { overflow: auto; background: var(--gray-100); border: 1px solid var(--gray-300);
  border-radius: var(--radius-md); padding: var(--space-4); }
.lpa-stage { position: relative; margin: 0 auto; background: var(--color-surface); box-shadow: var(--shadow-sm); }
.lpa-stage-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.lpa-zone {
  position: absolute; border: 1px dashed var(--color-sage); background: rgba(61,107,79,.07);
  cursor: move; font-size: var(--text-xs); color: var(--color-info-ink); overflow: hidden;
}
.lpa-zone.is-off { opacity: .3; border-style: dotted; }
.lpa-zone.is-sel { border: 2px solid var(--color-forest); background: rgba(26,48,37,.1); z-index: 3; }
.lpa-zone-lbl { position: absolute; top: 0; left: 0; padding: 0 3px; background: var(--color-forest); color: var(--color-surface);
  font-size: 10px; line-height: 1.5; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.lpa-zone-handle { position: absolute; right: -4px; bottom: -4px; width: 10px; height: 10px;
  background: var(--color-forest); border: 1px solid var(--color-surface); cursor: nwse-resize; }
.lpa-noprint { position: absolute; border: 1px solid var(--color-danger); background: rgba(163,77,63,.08); pointer-events: none; }
.lpa-side { display: flex; flex-direction: column; gap: var(--space-3); }
.lpa-zonelist { display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow-y: auto; }
.lpa-zonebtn { display: flex; align-items: center; gap: var(--space-2); width: 100%; padding: var(--space-1) var(--space-2);
  border: 1px solid transparent; background: transparent; border-radius: var(--radius-sm); cursor: pointer;
  font-size: var(--text-sm); text-align: left; color: var(--gray-900); }
.lpa-zonebtn:hover { background: var(--gray-100); }
.lpa-zonebtn.is-sel { background: var(--color-forest-soft); border-color: var(--color-sage); font-weight: 600; }
.lpa-zonebtn .nm { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.lpa-numgrid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-2); }

/* ══════════════ 3 · Digitale Visitenkarte (.bcd-) ══════════════════════════ */
.bcd-wrap { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); gap: var(--space-5); align-items: start; }
.bcd-sections { display: flex; flex-direction: column; gap: var(--space-4); }
.bcd-sec { border: 1px solid var(--gray-300); border-radius: var(--radius-md); background: var(--color-surface); }
.bcd-sec > summary {
  cursor: pointer; padding: var(--space-3) var(--space-4); font-weight: 600; font-size: var(--text-sm);
  color: var(--color-forest); list-style: none; display: flex; align-items: center; gap: var(--space-2);
}
.bcd-sec > summary::-webkit-details-marker { display: none; }
.bcd-sec > summary::before { content: '▸'; transition: transform .15s; color: var(--gray-500); }
.bcd-sec[open] > summary::before { transform: rotate(90deg); }
.bcd-sec-body { padding: 0 var(--space-4) var(--space-4); }
.bcd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-3); }
.bcd-f { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.bcd-f > label { font-size: var(--text-xs); font-weight: 600; color: var(--gray-700); display: flex; gap: var(--space-2); align-items: baseline; }
.bcd-f input, .bcd-f select { width: 100%; padding: var(--space-2) var(--space-3); border: 1px solid var(--gray-300);
  border-radius: var(--radius-md); font: inherit; font-size: var(--text-sm); background: var(--color-surface); color: var(--gray-900); }
.bcd-f input[disabled] { background: var(--gray-100); color: var(--gray-500); }
.bcd-lock { font-size: var(--text-xs); font-weight: 500; color: var(--gray-500); }
.bcd-vis { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-1); }
.bcd-vis label { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); color: var(--gray-700); }

.bcd-preview { position: sticky; top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.bcd-card {
  border: 1px solid var(--gray-300); border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface);
}
.bcd-card > h4 { margin: 0; padding: var(--space-2) var(--space-3); background: var(--gray-100);
  font-size: var(--text-xs); font-weight: 600; color: var(--gray-700); text-transform: uppercase; letter-spacing: .04em; }
.bcd-card-body { padding: var(--space-4); font-size: var(--text-sm); }
.bcd-contact-name { font-size: var(--text-base); font-weight: 600; color: var(--color-forest); }
.bcd-contact-row { color: var(--gray-700); margin-top: 2px; overflow-wrap: anywhere; }
.bcd-letterblock { font-size: var(--text-sm); }
.bcd-letterblock .lbl { font-size: var(--text-xs); color: var(--gray-500); }
.bcd-letterblock .val { color: var(--gray-900); margin-bottom: var(--space-2); overflow-wrap: anywhere; }
.bcd-sig-lines { font-size: var(--text-sm); color: var(--gray-900); line-height: 1.5; }
.bcd-sig-lines div { overflow-wrap: anywhere; }
.bcd-missing { background: var(--color-warning-soft); color: var(--color-warning-ink);
  border: 1px solid var(--color-warning); border-radius: var(--radius-md); padding: var(--space-3); font-size: var(--text-sm); }
.bcd-sigimg { max-width: 220px; max-height: 70px; object-fit: contain; background: var(--color-surface);
  border: 1px solid var(--gray-300); border-radius: var(--radius-sm); padding: var(--space-1); }
.bcd-siglist { display: flex; flex-direction: column; gap: var(--space-2); }
.bcd-sigrow { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  border: 1px solid var(--gray-300); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); }
.bcd-sigrow .nm { flex: 1 1 auto; min-width: 0; font-size: var(--text-sm); overflow-wrap: anywhere; }

/* ══════════════ 4 · Tablet ══════════════════════════════════════════════════ */
@media (max-width: 1180px) {
  .ltr-body { grid-template-columns: 190px minmax(0,1fr); }
  .ltr-preview { display: none; }
  .ltr-win.show-preview .ltr-body { grid-template-columns: 190px minmax(0,1fr); }
  .ltr-win.show-preview .ltr-pane { display: none; }
  .ltr-win.show-preview .ltr-preview { display: flex; }
  .lpa-designer { grid-template-columns: minmax(0,1fr); }
  .bcd-wrap { grid-template-columns: minmax(0,1fr); }
  .bcd-preview { position: static; }
}
@media (max-width: 820px) {
  .ltr-win { right: 0; left: 0; bottom: 0; top: 0; width: auto; height: auto; border-radius: 0; }
  .ltr-body { grid-template-columns: minmax(0,1fr); }
  .ltr-steps { display: none; }
  .ltr-win.show-steps .ltr-steps { display: block; }
}


/* Feedback #3 §7.1: Verwerfen ist ein Löschvorgang — es sieht auch so aus,
   bleibt aber zurückhaltend (Textknopf, keine rote Fläche). */
.ltr-btn-danger { color: var(--color-danger, #B3261E); }
.ltr-btn-danger:hover { background: var(--red-50, #FDF1F0); border-color: var(--color-danger, #B3261E); }