/* ════════════════════════════════════════════════════════════════
   APEX · Rechnungs-Editor V3.1
   Mockup: APEX___Rechnungs-Editor_V3_1_final260523.html (freigegeben 2026-05-23)
   Mockup-Namespace direkt übernommen (pd-*, ag-*, ed-*, panel, vr-*).
   Feature-Flag: ?editorV3=1
   ════════════════════════════════════════════════════════════════ */

/* ============================================================
   APEX TOKENS — Shared across mockups (mirror of APEX_Tokens.md)
   Claude Code: kopiere als shared/tokens/web-tokens.css
   ============================================================ */
:root {
  --bg:                 #F2F2F7;
  --bg-zebra:           #FAFAFC;
  --bg-hover:           #F7F7FB;
  --surface:            #FFFFFF;
  --separator:          #E5E5EA;
  --separator-strong:   #D1D1D6;
  --text-primary:       #1C1C1E;
  --text-secondary:     #6E6E73;
  --text-tertiary:      #8E8E93;
  --text-quaternary:    #AEAEB2;

  --brand-blue:         #0356B1;
  --brand-blue-hover:   #024A99;
  --brand-blue-deep:    #1A3A5C;
  --brand-cyan:         #0AA9BD;
  --topbar:             #15314D;
  --accent-orange:      #E05A00;
  --accent-orange-tint: #FBE8D6;

  --semantic-green:       #1E7B3A;
  --semantic-green-tint:  #E4F2EA;
  --semantic-amber:       #B87800;
  --semantic-amber-tint:  #FBF2DD;
  --semantic-red:         #C0392B;
  --semantic-red-tint:    #FBE9E9;
  --semantic-blue:        #0356B1;
  --semantic-blue-tint:   #EAF1FB;

  --font-stack: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
                "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --radius-card:        14px;
  --radius-row-group:   12px;
  --radius-button:      11px;
  --radius-input:       10px;
  --radius-image:       7px;
  --radius-pill:        999px;

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-16: 64px;

  --screen-tablet-min:        768px;
  --screen-desktop-min:       1280px;
  --layout-max-width:         1600px;
  --layout-max-width-narrow:  980px;
  --page-pad-x:   32px;
  --page-pad-y:   28px;
  --topbar-h:     48px;
  --tabbar-h:     52px;
  --row-h-compact:      36px;
  --row-h-default:      44px;
  --row-h-comfortable:  52px;
  --cell-pad-x:   14px;

  --shadow-card:    0 1px 0 rgba(0,0,0,0.03), 0 8px 24px rgba(0,0,0,0.04);
  --shadow-modal:   0 24px 64px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.06);
  --shadow-popover: 0 8px 24px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.06);
  --shadow-focus:   0 0 0 3px rgba(3,86,177,0.4);
}

/* ── Base reset: REDUNDANT entfernt 2026-05-29 (Phase 3.1 UI-Hotfix).
   * box-sizing kommt global aus css/design-system.css:9.
   * html/body kommt global aus css/design-system.css:34-46.
   Dieses Stylesheet leakte vorher diese Regeln ungescoped in die App-Shell
   und drückte u.a. die Topbar nach unten (Forensik-Befund Phase 3.1 §1).
   ──────────────────────────────────────────────────────────── */
button { font-family: inherit; }

/* ============================================================
   FAKTURA LV-EDITOR v5 — Pixel-Treue zum PDF-Render-Stack
   Quellen: briefvorlage_v2.js · pdf-design.js · pdf_branding.js
   Alle Werte 1:1 aus BRANDING.BRIEFVORLAGE + pdfDesign.css übernommen.
   ============================================================ */

[hidden] { display: none !important; }

:root {
  /* ── Tokens aus pdf_branding.js (BRIEFVORLAGE) ── */
  --bv-font:                'Barlow', Arial, Helvetica, sans-serif;
  --bv-body-size:           8.5pt;
  --bv-body-lh:             1.3;
  --bv-body-pl:             25mm;
  --bv-page-pad:            12mm 20mm 12mm 0;     /* @page margin */

  /* Briefkopf */
  --bv-logo-h:              14mm;
  --bv-absender-size:       7pt;
  --bv-briefkopf-mb:        8mm;

  /* Anschrift + Info */
  --bv-kopf-gap:            10mm;
  --bv-kopf-mb:             6mm;
  --bv-anschrift-w:         85mm;
  --bv-adresse-size:        8.5pt;
  --bv-ruecksende-size:     5.5pt;
  --bv-info-size:           7.5pt;
  --bv-info-label-size:     6pt;
  --bv-info-row-gap:        1.5mm;

  /* Betreff / Bezug */
  --bv-betreff-size:        11pt;
  --bv-betreff-mb:          1mm;
  --bv-bezug-size:          7pt;
  --bv-bezug-mb:            4mm;

  /* Gruß */
  --bv-gruss-mt:            8mm;
  --bv-gruss-size:          8.5pt;
  --bv-titel-size:          7.5pt;

  /* Falzmarken (DIN 5008) */
  --bv-mark-left:           5mm;
  --bv-mark-w:              4mm;
  --bv-loch-w:              7mm;
  --bv-mark-border:         #777;
  --bv-falt1-top:           93mm;
  --bv-loch-top:            136.5mm;
  --bv-falt2-top:           198mm;

  /* Footer */
  --bv-footer-pad:          1.5mm 20mm 0 25mm;
  --bv-footer-border:       0.3pt solid #D1DCE8;
  --bv-footer-size:         5.5pt;
  --bv-footer-color:        #555;
  --bv-footer-lh:           1.35;

  /* Wasserzeichen */
  --bv-wm-size:             80pt;
  --bv-wm-weight:           500;
  --bv-wm-color:            rgba(0,0,0,0.04);

  /* ── Tokens aus pdf-design.js ── */
  --pd-text:                #000;
  --pd-line-light:          #e8edf2;
  --pd-header-bg:           #f0f4f8;
  --pd-zahl-bg:             #f8fafc;
  --pd-zahl-border:         #D1DCE8;
  --pd-ul-color:            #555;

  /* ── Editor-Affordances (NUR Editor-Layer, nicht im Papier) ── */
  --edit-hover:             rgba(0,0,0,0.04);
  --edit-focus:             #0356b1;
  --pflicht-tint:           rgba(245, 188, 0, 0.20);
  --pflicht-tint-hover:     rgba(245, 188, 0, 0.30);
  --pflicht-bar:            #B87800;
}

/* ── App-Hintergrund: NUR im Editor-Kontext (body.editor-v3-active),
   gesetzt von js/modules/rechnungs_editor_v31.js MutationObserver,
   sobald #paperAngebot mountet. Verhindert das App-weite Leaken auf
   die Shell (Forensik-Befund Phase 3.1 §1).
   `*`-Reset entfernt — Duplikat von css/design-system.css:9.
   ──────────────────────────────────────────────────────────── */
body.editor-v3-active {
  background: #e9e9ee;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   APP-CHROME — Editor liegt unterhalb der APEX-Shell-Topbar
   (#topbar 56px + #main-tabbar 52px aus css/components/topbar.apex.css
   + css/components/tabbar.apex.css). Eigene .app-bar wurde 2026-05-25
   aus SHELL_HTML entfernt; CSS-Karteileiche dazu 2026-05-29 (Phase 3.3
   Variante 1) gelöscht (.app-bar, .app-brand[-mark], .app-crumbs[*],
   .app-bar-spacer, .app-tenant[-dot]).
   ============================================================ */

/* Editor-Toolbar (Primär-Toolbar im .scroll-Container, sticky am
   Scroll-Top — direkt unter #faktura-nav, nicht mehr unter Phantom-app-bar) */
.ed-bar {
  position: sticky; top: 0; z-index: 40;
  height: 52px;
  background: rgba(255,255,255,0.94);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid #E5E5EA;
  display: flex; align-items: center;
  padding: 0 20px;
  gap: 14px;
  font-family: 'Inter', sans-serif;
}
.ed-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 9px 4px 7px;
  background: #FBF2DD;
  color: #B87800;
  border-radius: 5px;
  font: 600 10.5px/1 'Inter';
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.ed-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ed-title { font: 600 13.5px/1.2 'Inter'; letter-spacing: -0.1px; color: #1C1C1E; display: flex; align-items: baseline; gap: 6px; }
.ed-title .id { font: 500 12px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; color: #8E8E93; }
.ed-sync { display: inline-flex; align-items: center; gap: 6px; font: 500 11.5px/1.2 'Inter'; color: #8E8E93; }
.ed-sync .check { width: 13px; height: 13px; border-radius: 50%; background: #1E7B3A; color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.ed-sync.is-saving .check { background: #8E8E93; animation: edPulse 1s ease-in-out infinite; }
/* K5: Fehler-Eskalation — Save fehlgeschlagen / Versionskonflikt */
.ed-sync.is-error { color: #C0392B; font-weight: 600; }
.ed-sync.is-error .check { background: #C0392B; animation: none; }
@keyframes edPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
.ed-compliance { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px; background: #FBF2DD; color: #B87800; font: 600 10.5px/1 'Inter'; }
.ed-compliance .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ed-compliance.is-ok { background: #E4F2EA; color: #1E7B3A; }
.ed-bar-spacer { flex: 1; }
.ed-actions { display: flex; align-items: center; gap: 6px; }
/* Lebenszyklus-Buttons: Sichtbarkeit rein per CSS aus data-doc-status (CSP: kein inline display-Toggle) */
.ed-actions[data-doc-status="entwurf"]         [data-doc-state="festgeschrieben"] { display: none; }
.ed-actions[data-doc-status="festgeschrieben"] [data-doc-state="entwurf"]          { display: none; }
.ed-iconbtn { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; border-radius: 7px; cursor: pointer; color: #6E6E73; }
.ed-iconbtn:hover { background: #F7F7FB; color: #1C1C1E; }
.ed-iconbtn .ic, .ed-btn .ic { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ed-btn .ic-caret { width: 11px; height: 11px; }
.ed-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border: 1px solid transparent; border-radius: 7px; background: transparent; font: 500 12px/1 'Inter'; cursor: pointer; color: #1C1C1E; }
.ed-btn.is-ghost { border-color: #D1D1D6; background: #fff; }
.ed-btn.is-ghost:hover { background: #F7F7FB; }
.ed-btn.is-primary { background: #0356b1; color: #fff; }
.ed-btn.is-primary:hover { background: #024A99; }
.ed-sep { width: 1px; height: 22px; background: #E5E5EA; margin: 0 2px; }

/* ============================================================
   CANVAS + A4-PAPIER (mm-genau)
   ============================================================ */
.canvas {
  padding: 28px 28px 100px;
  display: flex; flex-direction: column; align-items: center;
  gap: 18px;
}

/* Das Papier: A4 = 210mm × 297mm.
   @page margin entspricht dem Padding des Papiers, body padding-left additiv. */
.paper {
  position: relative;
  width: 210mm;
  min-height: 297mm;
  background: #fff;
  box-shadow:
    0 1px 0 rgba(0,0,0,0.04),
    0 10px 28px rgba(0,0,0,0.10),
    0 28px 70px rgba(0,0,0,0.07);
  /* @page margin: 12mm 20mm 12mm 0  +  body padding-left: 25mm = 12mm 20mm 12mm 25mm */
  padding: 12mm 20mm 12mm 25mm;
  font-family: var(--bv-font);
  font-size: var(--bv-body-size);
  line-height: var(--bv-body-lh);
  color: var(--pd-text);
  /* Faltmarken sind absolute → relative-Container hier */
}
.paper.is-entwurf::after {
  content: 'ENTWURF';
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-35deg);
  font-size: var(--bv-wm-size);
  font-weight: var(--bv-wm-weight);
  color: var(--bv-wm-color);
  pointer-events: none;
  z-index: 1;
  font-family: var(--bv-font);
  letter-spacing: -1px;
}

/* DIN 5008 Falzmarken (1:1 aus briefvorlage_v2) */
.bv2-falt1, .bv2-falt2, .bv2-loch {
  position: absolute;
  left: var(--bv-mark-left);
  width: var(--bv-mark-w);
  height: 0;
  border-top: 0.5pt solid var(--bv-mark-border);
}
.bv2-falt1 { top: var(--bv-falt1-top); }
.bv2-loch  { top: var(--bv-loch-top); width: var(--bv-loch-w); }
.bv2-falt2 { top: var(--bv-falt2-top); }

/* Briefkopf */
.bv2-briefkopf {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--bv-briefkopf-mb);
  position: relative; z-index: 2;
}
.bv2-logo { display: flex; align-items: center; }
.bv2-logo img,
.bv2-logo .logo-fallback {
  height: var(--bv-logo-h);
  width: auto;
  display: block;
}
.bv2-logo .logo-fallback {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--bv-logo-h);
  background: #0356b1; color: #fff;
  font-family: var(--bv-font);
  font-weight: 700; font-size: 14pt;
  letter-spacing: 0.3pt;
  border-radius: 1.5mm;
}
.bv2-absender {
  text-align: right;
  font-size: var(--bv-absender-size);
  color: var(--pd-text);
  line-height: var(--bv-body-lh);
}

/* Anschrift + Infoblock */
.bv2-kopf-row {
  display: flex;
  gap: var(--bv-kopf-gap);
  margin-bottom: var(--bv-kopf-mb);
  position: relative; z-index: 2;
}
.bv2-anschrift { flex: 0 0 var(--bv-anschrift-w); }
.bv2-ruecksende {
  font-size: var(--bv-ruecksende-size);
  color: var(--pd-text);
  border-bottom: 0.15pt solid #999;
  padding-bottom: 0.5mm;
  margin-bottom: 1.5mm;
  display: inline-block;
}
.bv2-adresse {
  font-size: var(--bv-adresse-size);
  line-height: var(--bv-body-lh);
}
.bv2-adresse strong { font-weight: 400; }   /* Regel 118: max 400 */
.paper-lieferadresse {
  margin-top: 3mm;
  font-size: var(--bv-adresse-size);
  line-height: var(--bv-body-lh);
  font-style: italic;
  color: var(--pd-text);
  white-space: pre-line;
}
.paper-lieferadresse:empty { display: none; }
.bv2-info {
  flex: 1;
  text-align: right;
  font-size: var(--bv-info-size);
  color: var(--pd-text);
  line-height: var(--bv-body-lh);
}
.bv2-info .label {
  font-size: var(--bv-info-label-size);
  text-transform: uppercase;
  letter-spacing: 0.3pt;
  color: var(--pd-text);
}
.bv2-info .wert { font-weight: 400; }
.bv2-info .ib-row { margin-top: var(--bv-info-row-gap); }
.bv2-info .ib-row.first { margin-top: 0; }

/* Betreff + Bezug */
.bv2-betreff {
  font-size: var(--bv-betreff-size);
  font-weight: 400;
  margin-bottom: var(--bv-betreff-mb);
  position: relative; z-index: 2;
}
.bv2-bezug {
  font-size: var(--bv-bezug-size);
  margin-bottom: var(--bv-bezug-mb);
  position: relative; z-index: 2;
}

/* Anschreiben + ext-Felder (Rechnungs-Extras) */
.ext-felder {
  font-size: 6.5pt;
  margin-bottom: 4mm;
  position: relative; z-index: 2;
}
.ext-felder .ext { white-space: nowrap; }
.ext-felder .ext + .ext::before { content: ' · '; }
.anschreiben {
  margin-bottom: 5mm;
  font-size: 8.5pt;
  line-height: 1.3;
  white-space: pre-line;
  position: relative; z-index: 2;
}

/* ============================================================
   pd-table (Positions-Tabelle) — 1:1 aus pdf-design.js
   ============================================================ */
.pd-wrap { position: relative; z-index: 2; }
table.pd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 8pt;
  margin-top: 3mm;
  table-layout: fixed;
}
.pd-table th {
  text-align: left;
  padding: 1.5mm 2mm;
  border-bottom: 0.25pt solid #000;
  font-weight: 400;
  font-size: 7.5pt;
  color: #000;
}
.pd-table th.r { text-align: right; }
.pd-table td {
  padding: 2mm 2mm 1mm;
  vertical-align: top;
  color: #000;
  font-size: 8pt;
}
.pd-table td.r { text-align: right; }
.pd-table td.m { text-align: center; }
.pd-table tr { page-break-inside: avoid; }

/* Spaltenbreiten exakt nach rechnung_pdf.js renderPositionenTabelle: */
.pd-table colgroup col.c-pos    { width: 16mm; }
.pd-table colgroup col.c-menge  { width: 18mm; }
.pd-table colgroup col.c-bez    { width: auto; }
.pd-table colgroup col.c-ep     { width: 20mm; }
.pd-table colgroup col.c-gp     { width: 22mm; }

.pd-pos-name { font-weight: 400; color: #000; }
.pd-pos-desc {
  margin-top: 1mm;
  font-size: 7.5pt;
  color: #000;
  line-height: 1.3;
  white-space: pre-line;
}

/* Titel-Zeile */
tr.pd-titel td {
  text-align: left !important;
  font-weight: 400;
  font-size: 8.5pt;
  letter-spacing: 0.2pt;
  padding-top: 3mm;
  color: #000;
}
tr.pd-titel { page-break-after: avoid; }

/* Untertitel */
tr.pd-untertitel td {
  font-size: 8.5pt;
  padding-top: 2mm;
  font-weight: 400;
  text-align: left;
}
/* Phase 4.2 (2026-05-29) — ersetzen Inline-Styles in render()-DOM-Inject */
tr.pd-titel-row td   { font-size: 9pt; }
tr.pd-untertitel td.pd-ut-bez { padding-left: 2mm; }
.editor-load-error {
  padding: 24px;
  color: var(--semantic-red, #C0392B);
  font: 400 13px/1.6 var(--font-stack);
}

/* UT-Sum (kleine unterstrichene Summenzeile am Ende eines Untertitels) */
tr.pd-ut-sum td {
  font-size: 7pt;
  text-align: right;
  text-decoration: underline;
  text-decoration-thickness: 0.3pt;
  text-underline-offset: 1.5pt;
  text-decoration-color: var(--pd-ul-color);
  padding: 0.3mm 2mm;
  padding-bottom: 3mm;
}

/* Summen / pd-sums */
.pd-sums {
  margin: 4mm 0;
  page-break-inside: avoid;
  position: relative; z-index: 2;
}
.pd-sums table {
  width: 100%;
  border-collapse: collapse;
  font-size: 8pt;
  margin-left: auto;
}
.pd-sums table.is-totals {
  width: 90mm;       /* schmaler rechts unten */
  margin-left: auto;
}
.pd-sums table.is-totals col.pd-col-betrag { width: 34mm; }
.pd-sums td { padding: 1mm 2mm; color: #000; }
.pd-sums td.r { text-align: right; }
.pd-sums .pd-sum-sub td { font-size: 7.5pt; color: #000; }
.pd-sums .pd-sum-sep td { border-top: 0.15pt solid #000; }
.pd-sums .pd-sum-total td {
  font-weight: 400;
  font-size: 9pt;
  border-top: 0.1pt solid #000;
  padding-top: 2mm;
}

/* Kumulative Tabelle */
.pd-kum-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 8pt;
}
.pd-kum-table col.pd-col-nr  { width: 16mm; }
.pd-kum-table col.pd-col-val { width: 24mm; }
.pd-kum-table td {
  padding: 1.5mm 2mm;
  font-weight: 400;
  color: #000;
}
.pd-kum-table td.r { text-align: right; }
.pd-kum-table .pd-kum-spacer td { padding: 1.5mm 0; }
.pd-kum-table .pd-kum-head td {
  border-bottom: 0.1pt solid #000;
  padding-bottom: 1.5mm;
}
.pd-kum-table .pd-kum-head td:first-child {
  font-weight: 400;
  font-size: 8.5pt;
  letter-spacing: 0.2pt;
}
.pd-kum-table .pd-kum-line-above td {
  border-top: 0.1pt solid #000;
  padding-top: 1.5mm;
}
.pd-kum-table .pd-kum-line-below td {
  border-bottom: 0.1pt solid #000;
  padding-bottom: 1.5mm;
}
.pd-kum-table .pd-kum-bold td:first-child {
  font-weight: 400;
  font-size: 8.5pt;
  letter-spacing: 0.2pt;
}
.pd-kum-table .pd-kum-ul td {
  text-decoration: underline;
  text-decoration-thickness: 0.15pt;
  text-underline-offset: 0.8mm;
  text-decoration-color: var(--pd-ul-color);
}

/* Zahlungsbox */
.pd-zahlungsbox {
  background: var(--pd-zahl-bg);
  border: 0.25pt solid var(--pd-zahl-border);
  border-radius: 2mm;
  padding: 3mm 4mm;
  margin: 4mm 0;
  font-size: 8pt;
  line-height: 1.3;
  color: #000;
  page-break-inside: avoid;
  position: relative; z-index: 2;
}
.pd-zahlungsbox strong { font-weight: 400; }
.pd-skonto-hint { font-size: 7.5pt; color: #555; }

/* Nachbemerkung */
.nachbemerkung { margin: 4mm 0; font-size: 8pt; line-height: 1.3; white-space: pre-line; position: relative; z-index: 2; }
.nachbemerkung-titel { font-size: 8.5pt; font-weight: 400; margin-bottom: 2mm; color: #000; }

/* ── Angebotskonditionen-Block auf dem Briefpapier ───────── */
.pd-konditionen {
  margin: 4mm 0 5mm;
  font-size: 8.5pt;
  line-height: 1.4;
  position: relative;
  z-index: 2;
}
.pd-konditionen-titel {
  font-size: 8.5pt;
  font-weight: 400;
  margin-bottom: 1.8mm;
  color: #000;
}
.pd-konditionen-grid {
  display: grid;
  grid-template-columns: 38mm 1fr;
  row-gap: 0.6mm;
  column-gap: 4mm;
}
.pd-konditionen-grid .k-label {
  color: #333;
}
.pd-konditionen-grid .k-val {
  color: #000;
  font-variant-numeric: tabular-nums;
}

/* ── Titelzusammenstellung am Ende des LV ────────────────── */
/* Typo-Gesetz: 1 Nummer größer als LV-Positions-Schrift (8.5pt → 9.5pt) */
.pd-titelzus {
  margin: 5mm 0 4mm;
  font-size: 9.5pt;
  line-height: 1.45;
  position: relative;
  z-index: 2;
}
.pd-titelzus-titel {
  font-size: 9.5pt;
  font-weight: 500;
  margin-bottom: 2mm;
  color: #000;
  border-bottom: 0.4pt solid #000;
  padding-bottom: 1.5mm;
}
.pd-titelzus-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  row-gap: 1.4mm;
  column-gap: 10mm;
}
.pd-titelzus-grid .tz-name {
  color: #000;
}
.pd-titelzus-grid .tz-num {
  color: #444;
  margin-right: 4mm;
  font-variant-numeric: tabular-nums;
}
.pd-titelzus-grid .tz-sum {
  color: #000;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pd-titelzus-foot {
  margin-top: 2mm;
  padding-top: 1.5mm;
  border-top: 0.25pt solid #999;
  display: grid;
  grid-template-columns: 1fr auto;
  font-weight: 500;
}
.pd-titelzus-foot .tz-sum { font-weight: 500; }

/* Grußformel */
.bv2-gruss {
  margin-top: var(--bv-gruss-mt);
  font-size: var(--bv-gruss-size);
  line-height: var(--bv-body-lh);
  position: relative; z-index: 2;
}
.bv2-gruss .sig-img {
  display: block; height: 7mm;
  margin: 2mm 0 1mm;
  color: #000; font-family: 'Caveat', cursive;
  font-size: 18pt;
}
/* Sprint A: Echtes Faksimile-PNG aus /api/firmendaten (statt Caveat-Font-Text) */
.bv2-gruss .sig-img img {
  display: block;
  height: 100%;
  width: auto;
}
.bv2-gruss .name { font-weight: 400; }
.bv2-gruss .titel { font-size: var(--bv-titel-size); color: #000; }

/* Footer (Puppeteer footerTemplate-Nachbau, statisch auf jeder Papier-Instanz) */
.bv2-footer {
  margin-top: 12mm;
  padding: var(--bv-footer-pad);
  padding-right: 0; padding-left: 0;
  border-top: var(--bv-footer-border);
  font-size: var(--bv-footer-size);
  color: var(--bv-footer-color);
  font-family: Arial, Helvetica, sans-serif;
  line-height: var(--bv-footer-lh);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  position: relative; z-index: 2;
}
.bv2-footer .apex-foot {
  text-align: right;
  white-space: nowrap;
  opacity: 0.5;
  font-family: var(--bv-font);
  letter-spacing: 0.2pt;
}
/* Sprint A.1: PDF-Paritaet — echtes APEX-SVG aus /api/firmendaten statt Hardcode-Text.
   Werte gespiegelt von BRANDING.GLOBAL.APEX_LOGO_HEIGHT + FOOTER_APEX_MARGIN_LEFT.
   Opacity wird durch Container .apex-foot (0.5) bereits angewandt. */
.apex-foot-logo {
  height: 6mm;
  vertical-align: bottom;
  margin-left: 3mm;
  width: auto;
}

/* ============================================================
   EDITOR LAYER (Hover, Focus, Pflichtfelder, Drag-Handles)
   — ALLES nicht-druckend; im PDF unsichtbar.
   ============================================================ */

/* Inline-edit: text bleibt im Lese-Modus identisch zum PDF */
.lv-edit {
  display: inline;
  padding: 0;
  margin: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  cursor: text;
  border-radius: 1px;
  transition: background-color .08s ease;
}
.lv-edit.is-block { display: block; }
.lv-edit:hover {
  background: var(--edit-hover);
  box-shadow: 0 0 0 1px var(--edit-hover);
}
.lv-edit:focus {
  background: #fff;
  box-shadow:
    0 0 0 1px rgba(3,86,177,0.35),
    0 2px 8px rgba(3,86,177,0.10);
}

/* Issue 6 / D5-9: Mengen-Eingabe als designte Inline-Zelle im Apex-Look,
   konsistent zum apex-unit-field daneben. Gleiche Edit-Mechanik (contenteditable) —
   nur das Design-System-Aussehen (Rahmen, Radius, IKT-Fokus). */
.lv-edit.lv-num {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 38px;
  padding: 3px 7px;
  border: 1px solid #E5E5EA;
  border-radius: 6px;
  background: #fff;
  font-variant-numeric: tabular-nums;
  transition: border-color .1s ease, box-shadow .1s ease, background-color .1s ease;
}
.lv-edit.lv-num:hover { background: #F7F7FB; border-color: #C7CCD2; box-shadow: none; }
.lv-edit.lv-num:focus { background: #fff; border-color: #0356b1; box-shadow: 0 0 0 2px rgba(3,86,177,0.18); }

/* OZ-Suggestion-Mode: graue System-Vorschläge bis User manuell tippt */
.lv-edit.oz-suggestion {
  color: #B0B0B6;
  font-style: normal;
}
.lv-edit.oz-suggestion:hover { color: #1C1C1E; }
.lv-edit.oz-suggestion:focus { color: #1C1C1E; }
.lv-edit.oz-locked { color: var(--pd-text); }

/* E-Rechnung-Pflicht-leer */
.lv-edit.is-empty-required {
  background: var(--pflicht-tint);
  box-shadow: 0 0 0 1px rgba(184,120,0,0.35);
  border-radius: 1px;
}
.lv-edit.is-empty-required:hover { background: var(--pflicht-tint-hover); }
.lv-edit.is-empty-required:focus {
  background: #fff;
  box-shadow: 0 0 0 1px var(--pflicht-bar), 0 2px 8px rgba(184,120,0,0.12);
}
.lv-edit.is-empty-required:empty::before {
  content: attr(data-placeholder);
  color: var(--pflicht-bar);
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0;
}

/* Ungueltige Eingabe (z.B. "abc" in Menge/EP) — rot, blockiert NaN-Fortpflanzung in Totals */
.lv-edit.is-invalid {
  background: rgba(255,59,48,0.08);
  box-shadow: 0 0 0 1px rgba(255,59,48,0.55);
  border-radius: 1px;
}
.lv-edit.is-invalid:focus {
  background: #fff;
  box-shadow: 0 0 0 1px #FF3B30, 0 2px 8px rgba(255,59,48,0.18);
}

/* ════════════════════════════════════════════════════════════════
   Inline-Editing Final (Mockup 33) — apex-unit-field + apex-desc-host
   CSP-135-konform: nur classList-Toggles, keine Inline-Styles.
   Spiegel zu css/components/angebots-editor.apex.css.
   ════════════════════════════════════════════════════════════════ */

/* ── Einheit-Dropdown ───────────────────────────── */
.apex-unit-field { position: relative; display: inline-block; }
.apex-unit-trigger {
  font: 500 13.5px/1.4 var(--font-stack, -apple-system, BlinkMacSystemFont, sans-serif);
  color: #1C1C1E;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 6px;
  padding: 4px 7px;
  margin: -4px -7px;
  cursor: pointer;
  text-align: left;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.apex-unit-trigger::after {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  border-right: 1.5px solid #8E8E93;
  border-bottom: 1.5px solid #8E8E93;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .12s;
}
.apex-unit-trigger:hover { background: #F7F7FB; border-color: #E5E5EA; }
.apex-unit-trigger:focus-visible {
  outline: none;
  background: #FFFFFF;
  border-color: #0356B1;
  box-shadow: 0 0 0 3px rgba(3,86,177,0.4);
}
.apex-unit-field.is-open .apex-unit-trigger::after { transform: translateY(1px) rotate(-135deg); }

.apex-unit-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: -7px;
  z-index: 40;
  min-width: 168px;
  background: #FFFFFF;
  border: 1px solid #D1D1D6;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.06);
  padding: 6px;
  display: none;
  max-height: 320px;
  overflow-y: auto;
}
.apex-unit-field.is-open .apex-unit-menu { display: block; }
.apex-unit-menu .apex-unit-menu-label {
  font: 600 10px/1 var(--font-stack, -apple-system);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #8E8E93;
  padding: 6px 8px 8px;
}
.apex-unit-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font: 500 13.5px/1 var(--font-stack, -apple-system);
  color: #1C1C1E;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
}
.apex-unit-opt:hover, .apex-unit-opt.is-active { background: #F7F7FB; }
.apex-unit-opt[aria-selected="true"] { color: #0356B1; font-weight: 600; }
.apex-unit-opt .apex-unit-check { color: #0356B1; font-size: 13px; opacity: 0; }
.apex-unit-opt[aria-selected="true"] .apex-unit-check { opacity: 1; }
.apex-unit-custom {
  border-top: 1px solid #E5E5EA;
  margin-top: 6px;
  padding-top: 8px;
}
.apex-unit-custom input {
  width: 100%;
  font: 500 13px/1.4 var(--font-stack, -apple-system);
  border: 1px solid #D1D1D6;
  border-radius: 8px;
  padding: 8px 10px;
  color: #1C1C1E;
  background: #FFFFFF;
}
.apex-unit-custom input::placeholder { color: #AEAEB2; }
.apex-unit-custom input:focus {
  outline: none;
  border-color: #0356B1;
  box-shadow: 0 0 0 3px rgba(3,86,177,0.4);
}

/* ── Beschreibungs-Popover: WYSIWYG-Display + PDF-breites Editor-Feld ─ */
.apex-desc-host { position: relative; margin-top: 3px; }
.apex-desc-display {
  font: 400 12px/1.5 var(--font-stack, -apple-system);
  color: #6E6E73;
  white-space: pre-wrap;
  word-break: break-word;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 3px 6px;
  margin: -3px -6px;
  cursor: text;
}
.apex-desc-display:hover { background: #F7F7FB; border-color: #E5E5EA; }
.apex-desc-display.is-empty { font-style: italic; color: #AEAEB2; }

/* Popover spannt exakt die Spaltenbreite per left/right-Anker → PDF-Umbruch-Treue ohne JS */
.apex-desc-pop {
  position: absolute;
  top: -4px;
  left: -8px;
  right: -8px;
  z-index: 35;
  background: #FFFFFF;
  border: 1px solid #0356B1;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.06);
  padding: 8px;
  display: none;
}
.apex-desc-host.is-open .apex-desc-pop { display: block; }
.apex-desc-host.is-open .apex-desc-display { visibility: hidden; }
.apex-desc-pop textarea {
  width: 100%;
  font: 400 12px/1.5 var(--font-stack, -apple-system);
  color: #1C1C1E;
  border: none;
  background: transparent;
  outline: none;
  resize: none;
  padding: 0;
  field-sizing: content;
  min-height: 1.5em;
  overflow: hidden;
  white-space: pre-wrap;
  word-break: break-word;
}
@supports not (field-sizing: content) {
  /* Safari ≤17.3 / Firefox: feste Mindesthoehe statt Auto-Grow */
  .apex-desc-pop textarea { min-height: 4.5em; overflow: auto; resize: vertical; }
}
.apex-desc-pop textarea::placeholder { font-style: italic; color: #AEAEB2; }
.apex-desc-pop-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #E5E5EA;
  font: 11px/1 var(--font-stack, -apple-system);
  color: #AEAEB2;
}
.apex-desc-pop-foot kbd {
  font: 500 10px/1 var(--font-mono, ui-monospace, monospace);
  background: #F2F2F7;
  border: 1px solid #D1D1D6;
  border-radius: 4px;
  padding: 2px 4px;
}

/* Drag-Handle: schwebt LINKS außerhalb des Papier-Padding-Rands.
   Wird per JS auf die aktive Zeile positioniert (CSS-only fällt sonst durch). */
.lv-grab {
  position: absolute;
  width: 18px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #8E8E93;
  background: rgba(255,255,255,0.6);
  border-radius: 4px;
  cursor: grab;
  opacity: 0;
  z-index: 5;
  transition: opacity .1s, background .1s, color .1s;
  pointer-events: none;
}
.lv-grab.is-visible { opacity: 0.55; pointer-events: auto; }
.lv-grab:hover { opacity: 1; background: #fff; color: #1C1C1E; box-shadow: 0 1px 4px rgba(0,0,0,0.12); }
.lv-grab svg { width: 14px; height: 14px; pointer-events: none; }
.lv-grab.is-dragging { cursor: grabbing; }

/* Drop-Indikator (über/unter Zeile) */
tr.is-drop-before { box-shadow: inset 0 2px 0 #0356b1; }
tr.is-drop-after  { box-shadow: inset 0 -2px 0 #0356b1; }
tr.is-dragging { opacity: 0.45; }

/* + Insert-Bar zwischen Zeilen — schmaler Hairline-Hover-Hint */
.lv-row-insert {
  position: relative;
  height: 0;
  padding: 0; border: 0;
}
.lv-row-insert > td {
  position: relative;
  padding: 0 !important;
  border: 0;
}
.lv-row-insert .ins-trigger {
  position: absolute;
  left: 0; right: 0; top: -7px;
  height: 14px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .1s;
}
.lv-row-insert:hover .ins-trigger,
.lv-row-insert.is-open .ins-trigger { opacity: 1; pointer-events: auto; }
.lv-row-insert .ins-trigger::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 50%;
  height: 0.5pt; background: #0356b1;
}
.lv-row-insert .ins-trigger > span {
  position: relative;
  background: #fff;
  border: 0.4pt solid #0356b1;
  color: #0356b1;
  font: 600 7pt/1 var(--bv-font);
  padding: 1mm 2.5mm;
  border-radius: 999px;
  cursor: pointer;
  letter-spacing: 0.1pt;
  text-transform: uppercase;
}

/* Insert-Popover */
.lv-popover {
  position: absolute;
  z-index: 80;
  background: #fff;
  border: 1px solid #E5E5EA;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.06);
  padding: 5px;
  min-width: 200px;
  font-family: 'Inter', sans-serif;
}
.lv-popover.is-hidden { display: none; }
.lv-popover button {
  display: grid; grid-template-columns: 14px 1fr auto;
  gap: 8px; align-items: center;
  width: 100%;
  padding: 6px 8px;
  background: transparent; border: none;
  border-radius: 5px;
  text-align: left;
  font: 500 12px/1 'Inter';
  color: #1C1C1E;
  cursor: pointer;
}
.lv-popover button:hover { background: #F7F7FB; }
.lv-popover .k { font: 500 10.5px/1 ui-monospace, Menlo, monospace; color: #8E8E93; }
.lv-popover .glyph { width: 13px; height: 13px; color: #8E8E93; }
.lv-popover hr { border: 0; border-top: 1px solid #E5E5EA; margin: 4px 2px; }

/* Currency / number alignment for editable cells */
.lv-currency { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Hint-Footer (out-of-paper) */
.canvas-hint {
  font: 500 11px/1.4 'Inter';
  color: #8E8E93;
  display: flex; gap: 12px; align-items: center;
  background: #fff;
  border: 1px solid #E5E5EA;
  border-radius: 999px;
  padding: 6px 14px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.03);
}
.canvas-hint kbd {
  font: 500 10.5px/1 ui-monospace, Menlo, monospace;
  background: #F2F2F7;
  border: 1px solid #D1D1D6;
  border-radius: 4px;
  padding: 1px 5px;
  color: #6E6E73;
}
.canvas-hint .sep { width: 1px; height: 12px; background: #E5E5EA; }

/* ============================================================
   SHELL · DOCKING-GRID · PANELS
   ============================================================ */
.shell {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
  align-items: start;
  min-height: calc(100vh - 100px);
}
.shell > main.canvas { padding-top: 24px; padding-left: 28px; padding-right: 28px; transition: padding .18s ease; }

/* Rails: kollabieren auf 0 wenn leer (kein sichtbares Panel)
   2026-05-25 Rails verbreitert von fix 304px auf clamp(280px, 24vw, 400px) —
   Cards skalieren mit Viewport, Papier (210mm DIN A4 fix) bleibt unangetastet.
   Floor 280px schützt das 1180px-Stacking-Breakpoint, Ceiling 400px verhindert
   leere Cards auf Ultrawide-Displays. */
.rail {
  width: clamp(280px, 24vw, 400px);
  background: #f4f4f7;
  border-color: #E5E5EA;
  padding: 22px 18px 32px;
  position: sticky;
  top: 100px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: #1C1C1E;
  scrollbar-width: thin;
  display: flex; flex-direction: column; gap: 14px;
  transition: width .2s ease, padding .2s ease;
}
.rail.rail-left  { border-right: 1px solid #E5E5EA; }
.rail.rail-right { border-left:  1px solid #E5E5EA; }
.rail:empty {
  width: 0;
  padding: 0;
  border: none;
}

@media (max-width: 1180px) {
  .shell { grid-template-columns: 1fr; }
  .rail { position: relative; top: 0; max-height: none; width: 100%; border: none; }
}

/* ── Panel ────────────────────────────────────────────────── */
.panel {
  background: #fff;
  border: 1px solid #E5E5EA;
  border-radius: 10px;
  overflow: hidden;
}
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 10px 10px 14px;
  border-bottom: 1px solid #f0f0f3;
}
.panel-head h4 {
  margin: 0;
  font: 600 11.5px/1.2 'Inter';
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #1C1C1E;
  display: flex; align-items: center; gap: 7px;
}
.panel-head h4 .meta {
  font: 500 10.5px/1 ui-monospace, Menlo, monospace;
  letter-spacing: 0; color: #8E8E93; text-transform: none;
}
.panel-tools { display: flex; gap: 2px; }
.panel-tool {
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; border-radius: 5px;
  cursor: pointer; color: #8E8E93;
}
.panel-tool:hover { background: #F2F2F7; color: #1C1C1E; }
.panel-tool svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.panel-body {
  padding: 12px 14px 14px;
}

/* ── Collapsible ─────────────────────────────────────────── */
.panel-head { cursor: pointer; user-select: none; }
.panel-head h4 { flex: 1; min-width: 0; }
.panel-chevron {
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #8E8E93; flex: none;
  transition: transform .15s ease;
  margin-right: 2px;
}
.panel-chevron svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.panel[data-collapsed="true"] .panel-chevron { transform: rotate(-90deg); }
.panel[data-collapsed="true"] .panel-body { display: none; }
.panel[data-collapsed="true"] .panel-resize { display: none; }
.panel[data-collapsed="true"] .panel-head { border-bottom: none; }

/* ── Status indicator (✓ / ⚠) im Header der Rechnungscheck-Card ── */
.panel-status {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  margin-right: 6px;
  font: 700 10.5px/1 'Inter';
  flex: none;
}
.panel-status.is-ok   { background: #1E7B3A; color: #fff; }
.panel-status.is-warn { background: #FBF2DD; color: #B87800; border: 1px solid rgba(184,120,0,0.5); }
.panel-status svg { width: 8px; height: 8px; stroke-width: 2.4; stroke: currentColor; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.panel-status.is-warn::before { content: "!"; }

/* ── Resize-Handle (am unteren Rand der Card) ────────────── */
.panel-body { position: relative; overflow-y: auto; }
.panel[data-resized="true"] .panel-body { /* height von JS gesetzt */ }
.panel-resize {
  height: 6px;
  cursor: row-resize;
  display: flex; align-items: center; justify-content: center;
  border-top: 1px solid #f0f0f3;
  background: #fafafa;
  position: relative;
  transition: background .12s;
}
.panel-resize:hover { background: #F2F2F7; }
.panel-resize::after {
  content: ""; width: 28px; height: 2px;
  background: #C7CCD2; border-radius: 1px;
}
.panel-resize.is-dragging { background: #EAF1FB; }
.panel-resize.is-dragging::after { background: #0356b1; }

/* ── LV-Baukasten Panel ──────────────────────────────────── */
.bk-intro {
  font: 400 11.5px/1.4 'Inter';
  color: #6E6E73;
  margin-bottom: 10px;
}
.bk-add-inline {
  background: #F2F2F7;
  padding: 1px 6px;
  border-radius: 4px;
  font: 600 11px/1.2 'Inter';
  color: #0356b1;
}
.bk-badge {
  display: grid;
  grid-template-columns: 28px 1fr 18px;
  gap: 10px;
  align-items: center;
  padding: 10px 11px;
  background: #fff;
  border: 1.5px solid #0356b1;
  border-radius: 9px;
  cursor: grab;
  box-shadow: 0 1px 0 rgba(3,86,177,0.06), 0 4px 12px rgba(3,86,177,0.10);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s;
}
.bk-badge:hover { transform: translateY(-1px); box-shadow: 0 2px 0 rgba(3,86,177,0.08), 0 8px 18px rgba(3,86,177,0.14); }
.bk-badge.is-dragging { opacity: 0.5; cursor: grabbing; }
.bk-badge .bk-glyph {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #EAF1FB;
  color: #0356b1;
  border-radius: 6px;
}
.bk-badge .bk-glyph svg { width: 15px; height: 15px; }
.bk-badge .bk-oz {
  display: block;
  font: 700 14px/1.1 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #0356b1;
  letter-spacing: -0.2px;
}
.bk-badge .bk-typ {
  display: block;
  font: 500 11px/1.2 'Inter';
  color: #6E6E73;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-top: 2px;
}
.bk-badge .bk-grip {
  display: inline-flex; align-items: center; justify-content: center;
  color: #AEAEB2;
}

.bk-depth-row {
  display: grid;
  grid-template-columns: 28px 1fr 28px auto;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
}
.bk-depth-btn {
  width: 28px; height: 28px;
  border: 1px solid #C7CCD2;
  background: #fff;
  border-radius: 7px;
  font: 600 15px/1 'Inter';
  color: #1C1C1E;
  cursor: pointer;
}
.bk-depth-btn:hover:not([disabled]) { background: #F7F7FB; border-color: #0356b1; color: #0356b1; }
.bk-depth-btn[disabled] { opacity: 0.35; cursor: not-allowed; }
.bk-depth-track {
  display: flex; align-items: center; justify-content: space-between;
  height: 28px;
}
.bk-depth-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #E5E5EA;
  transition: background .12s, transform .12s;
}
.bk-depth-dot.is-active { background: #0356b1; }
.bk-depth-dot.is-current { transform: scale(1.6); background: #0356b1; }
.bk-depth-label {
  font: 500 11px/1 ui-monospace, Menlo, monospace;
  color: #8E8E93;
}
.bk-legend {
  display: flex; flex-direction: column; gap: 2px;
  margin-top: 12px;
  font: 500 10.5px/1.35 'Inter';
  color: #8E8E93;
}
.bk-legend span.is-current {
  color: #0356b1;
  font-weight: 600;
}

/* ── Paper drop target highlight ─────────────────────────── */
.paper.is-dropping {
  outline: 2px dashed #0356b1;
  outline-offset: -2px;
}
.bk-drop-hint {
  position: fixed;
  pointer-events: none;
  z-index: 95;
  background: #0356b1;
  color: #fff;
  font: 600 11px/1.2 'Inter';
  padding: 6px 10px;
  border-radius: 6px;
  display: none;
  box-shadow: 0 4px 12px rgba(3,86,177,0.35);
}
.bk-drop-hint.is-visible { display: block; }

/* ── "[+ Position]" Mini-Button unter Titel-Reihen ─────── */
tr.lv-row-addpos > td {
  padding: 0 !important;
  border: 0;
}
.lv-add-pos-btn {
  display: inline-flex; align-items: center; gap: 4px;
  margin: 2mm 0 2mm 14mm;
  padding: 1.5mm 3mm;
  background: transparent;
  border: 0.5pt dashed #C7CCD2;
  border-radius: 999px;
  font: 500 8pt/1 'Inter';
  color: #6E6E73;
  cursor: pointer;
  letter-spacing: 0.1pt;
}
.lv-add-pos-btn:hover {
  border-color: #0356b1;
  color: #0356b1;
  background: #F7FAFE;
}
.lv-add-pos-btn svg { width: 9px; height: 9px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── Block-Modal (Speichern blockiert) ───────────────────── */
.block-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.18);
  display: none;
  align-items: center; justify-content: center;
  z-index: 100;
  font-family: 'Inter', sans-serif;
}
.block-overlay.is-open { display: flex; }
.block-modal {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.22), 0 2px 6px rgba(0,0,0,0.08);
  width: 460px;
  max-width: calc(100vw - 40px);
  overflow: hidden;
}
.block-modal-head {
  padding: 22px 24px 8px;
  display: flex; gap: 12px; align-items: flex-start;
}
.block-modal-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: #FBF2DD;
  color: #B87800;
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
  font: 700 18px/1 'Inter';
}
.block-modal-title {
  font: 600 16px/1.3 'Inter';
  color: #1C1C1E;
  margin: 0 0 4px;
  letter-spacing: -0.2px;
}
.block-modal-sub {
  font: 400 13px/1.4 'Inter';
  color: #6E6E73;
  margin: 0;
}
.block-modal-list {
  padding: 8px 24px 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.block-modal-list .item {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 8px;
  font: 500 12.5px/1.35 'Inter';
  color: #1C1C1E;
  padding: 6px 8px;
  border-radius: 6px;
  background: #FFFBF0;
}
.block-modal-list .item::before {
  content: "";
  width: 8px; height: 8px;
  background: #FBF2DD;
  border: 1.5px solid #B87800;
  border-radius: 50%;
  margin-top: 4px;
}
.block-modal-actions {
  padding: 12px 16px 16px;
  border-top: 1px solid #F0F0F3;
  display: flex; justify-content: flex-end; gap: 8px;
}

/* Signal-Gelb für blockierte Pflichtfelder (signalisiert vom Senden-Workflow) */
.lv-edit.is-blocked {
  background: rgba(245, 188, 0, 0.45);
  box-shadow: 0 0 0 2px #B87800, 0 0 0 5px rgba(184,120,0,0.20);
  animation: blockedPulse 1.4s ease-in-out 3;
}
@keyframes blockedPulse {
  0%, 100% { box-shadow: 0 0 0 2px #B87800, 0 0 0 5px rgba(184,120,0,0.20); }
  50%      { box-shadow: 0 0 0 2px #B87800, 0 0 0 9px rgba(184,120,0,0.05); }
}

/* ── Module Launcher (im ed-bar) ─────────────────────────── */
.module-launcher {
  position: relative;
  display: inline-flex;
}
.module-launcher .menu {
  position: absolute;
  top: 36px; left: 0;
  z-index: 60;
  min-width: 240px;
  background: #fff;
  border: 1px solid #E5E5EA;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.06);
  padding: 5px;
  display: none;
}
.module-launcher.is-open .menu { display: block; }
.module-launcher .menu button {
  display: grid; grid-template-columns: 16px 1fr auto; gap: 8px;
  align-items: center; width: 100%;
  padding: 7px 8px; border: 0; background: transparent;
  border-radius: 6px; text-align: left;
  font: 500 12px/1 'Inter'; color: #1C1C1E; cursor: pointer;
}
.module-launcher .menu button:hover { background: #F7F7FB; }
.module-launcher .menu button .chk {
  width: 14px; height: 14px;
  border: 1.2px solid #C7CCD2; background: #fff;
  border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  color: transparent;
}
.module-launcher .menu button.is-on .chk { background: #0356b1; border-color: #0356b1; color: #fff; }
.module-launcher .menu button .chk svg { width: 9px; height: 9px; stroke-width: 2.2; }
.module-launcher .menu button .dock { font: 500 10.5px/1 ui-monospace, Menlo, monospace; color: #8E8E93; }
.module-launcher .menu hr { border: 0; border-top: 1px solid #E5E5EA; margin: 4px 2px; }

/* ── TIMELINE Panel (Lead-to-Cash) ───────────────────────── */
.tl-list {
  position: relative;
  padding-left: 6px;
  display: flex; flex-direction: column;
  gap: 0;
}
.tl-list::before {
  content: ''; position: absolute;
  left: 11px; top: 12px; bottom: 12px;
  width: 1px; background: #E5E5EA;
}
.tl-step {
  position: relative;
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: start;
  gap: 8px;
  padding: 7px 0 7px 0;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: 6px;
  text-align: left;
  font-family: 'Inter';
  color: #1C1C1E;
}
.tl-step:hover { background: #F7F7FB; }
.tl-step .dot {
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 1.4px solid #C7CCD2;
  display: inline-flex; align-items: center; justify-content: center;
  color: transparent;
  margin-left: 2px;
  z-index: 1;
}
.tl-step.is-done .dot { background: #1E7B3A; border-color: #1E7B3A; color: #fff; }
.tl-step.is-current .dot { background: #fff; border-color: #0356b1; box-shadow: 0 0 0 3px rgba(3,86,177,0.18); }
.tl-step .dot svg { width: 9px; height: 9px; stroke-width: 2.4; }
.tl-step .body { display: flex; flex-direction: column; gap: 2px; }
.tl-step .title { font: 500 12px/1.3 'Inter'; }
.tl-step.is-done .title { color: #6E6E73; }
.tl-step .meta { font: 500 10.5px/1 ui-monospace, Menlo, monospace; color: #8E8E93; }
.tl-step.is-current .title { color: #0356b1; font-weight: 600; }
.tl-step .ref { font: 500 10.5px/1.3 'Inter'; color: #0356b1; margin-top: 2px; }
.tl-step.is-future .title { color: #AEAEB2; }

/* ── Doctype-Switcher (kompakter) ────────────────────────── */
.doctype-row { display: flex; gap: 6px; flex-wrap: wrap; }
.doctype-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  background: #F7F7FB;
  border: 1px solid #E5E5EA;
  border-radius: 999px;
  font: 500 11.5px/1.2 'Inter';
  color: #1C1C1E;
  cursor: pointer;
  position: relative;
}
.doctype-btn:hover { background: #fff; border-color: #C7CCD2; }
.doctype-btn.is-active { background: #0356b1; border-color: #0356b1; color: #fff; }
.doctype-btn[disabled],
.doctype-btn.is-locked {
  color: #AEAEB2; cursor: not-allowed; opacity: 0.55;
}
.doctype-btn .lock { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.doctype-btn .chev { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2; }
.doctype-hint {
  font: 500 10.5px/1.3 'Inter';
  color: #8E8E93;
  margin-top: 8px;
}

/* Submenu unter "Rechnung" */
.doctype-sub {
  margin-top: 8px;
  display: none;
  padding: 8px;
  border: 1px dashed #E5E5EA;
  border-radius: 8px;
  background: #FAFAFC;
}
.doctype-sub.is-open { display: block; }
.doctype-sub-label {
  font: 600 10.5px/1.2 'Inter';
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #8E8E93;
  margin: 0 0 6px;
}
.doctype-sub-btn {
  display: block; width: 100%;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid #E5E5EA;
  border-radius: 7px;
  font: 500 12px/1.3 'Inter';
  color: #1C1C1E;
  cursor: pointer;
  text-align: left;
  margin-bottom: 4px;
}
.doctype-sub-btn:hover { border-color: #C7CCD2; background: #F7F7FB; }
.doctype-sub-btn.is-active { border-color: #0356b1; background: #EAF1FB; color: #0356b1; }
.doctype-sub-btn .sub { font: 400 10.5px/1.3 'Inter'; color: #8E8E93; display: block; margin-top: 2px; }
.doctype-sub-btn.is-active .sub { color: rgba(3,86,177,0.7); }

/* ── E-Rechnungs-Checkliste ──────────────────────────────── */
.rail-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rail-check {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  gap: 8px; align-items: start;
  font: 500 11.5px/1.35 'Inter';
  color: #1C1C1E;
}
.rail-check .marker {
  width: 14px; height: 14px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 1px;
  font: 700 10px/1 'Inter';
}
.rail-check.is-ok   .marker { background: #E4F2EA; color: #1E7B3A; }
.rail-check.is-warn .marker { background: #FBF2DD; color: #B87800; }
.rail-check .sub { font: 400 10.5px/1.3 'Inter'; color: #8E8E93; display: block; margin-top: 1px; }
.rail-check .count { font: 600 10.5px/1 ui-monospace, Menlo, monospace; color: #8E8E93; }

/* ── Zusatzfelder (Key-Value) ────────────────────────────── */
.zf-list { display: flex; flex-direction: column; gap: 6px; }
.zf-row {
  display: grid;
  grid-template-columns: 1fr 1fr 22px;
  gap: 6px;
  align-items: center;
}
.zf-row input {
  font: 500 11.5px/1.3 'Inter';
  color: #1C1C1E;
  padding: 6px 8px;
  border: 1px solid #E5E5EA;
  border-radius: 6px;
  background: #fff;
  outline: none;
  width: 100%;
}
.zf-row input:focus { border-color: #0356b1; box-shadow: 0 0 0 2px rgba(3,86,177,0.18); }
.zf-row input.is-key { font-weight: 600; color: #6E6E73; }
.zf-row .del {
  width: 22px; height: 22px; border-radius: 5px;
  border: 0; background: transparent; color: #AEAEB2; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.zf-row .del:hover { background: #FBE9E9; color: #C0392B; }
.zf-row .del svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.zf-add {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 10px;
  background: transparent;
  border: 1px dashed #C7CCD2;
  border-radius: 7px;
  font: 500 11.5px/1.2 'Inter';
  color: #6E6E73;
  cursor: pointer;
  margin-top: 4px;
}
.zf-add:hover { border-color: #0356b1; color: #0356b1; background: #EAF1FB; }
.zf-add svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.zf-empty {
  font: 500 11px/1.4 'Inter'; color: #8E8E93;
  padding: 4px 0 2px;
}
.zf-inherit-note {
  font: 500 10.5px/1.35 'Inter'; color: #6E6E73;
  background: #F2F2F7;
  border-radius: 6px;
  padding: 7px 9px;
  margin-top: 8px;
  display: flex; gap: 6px; align-items: flex-start;
}
.zf-inherit-note svg { width: 12px; height: 12px; flex: none; margin-top: 1px; color: #6E6E73; }

/* ── Kalkulationsmatrix (per-Position) ───────────────────── */
.kalk-table { width: 100%; border-collapse: collapse; font: 500 11px/1.3 'Inter'; }
.kalk-table th, .kalk-table td {
  text-align: right;
  padding: 4px 6px;
  font-variant-numeric: tabular-nums;
}
.kalk-table th {
  font: 600 9.5px/1.2 'Inter';
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #8E8E93;
  border-bottom: 1px solid #E5E5EA;
  padding-bottom: 5px;
}
.kalk-table td:first-child,
.kalk-table th:first-child { text-align: left; }
.kalk-table .num { font: 500 10.5px/1 ui-monospace, Menlo, monospace; color: #8E8E93; }
.kalk-table .pos-name {
  display: block; max-width: 160px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: 500 11px/1.3 'Inter'; color: #1C1C1E;
}
.kalk-table tr.foot td {
  border-top: 1px solid #1C1C1E;
  font-weight: 600; color: #1C1C1E;
  padding-top: 7px;
}
.kalk-table .pos { color: #6E6E73; }
.kalk-table .marge-pos { color: #1E7B3A; }
.kalk-table .marge-neg { color: #C0392B; }

/* ── Vorrechnungen-Liste ─────────────────────────────────── */
.vr-list { display: flex; flex-direction: column; gap: 4px; }
.vr-toggle {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 8px;
  align-items: start;
  padding: 7px 9px;
  border-radius: 7px;
  cursor: pointer;
  font: 500 11.5px/1.3 'Inter';
  color: #1C1C1E;
  background: transparent;
  border: 1px solid transparent;
}
.vr-toggle:hover { background: #F7F7FB; }
.vr-toggle.is-on { background: #EAF1FB; border-color: rgba(3,86,177,0.25); color: #0356b1; }
.vr-toggle .chk {
  width: 16px; height: 16px;
  border: 1.2px solid #C7CCD2; background: #fff;
  border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 1px;
  color: transparent;
}
.vr-toggle.is-on .chk { background: #0356b1; border-color: #0356b1; color: #fff; }
.vr-toggle .chk svg { width: 10px; height: 10px; stroke-width: 2.2; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.vr-toggle .meta-line {
  display: flex; gap: 6px; align-items: baseline;
  font: 500 10.5px/1.3 ui-monospace, Menlo, monospace;
  color: #8E8E93;
  margin-top: 2px;
}
.vr-toggle .vr-id { color: #1C1C1E; font-weight: 600; }
.vr-toggle.is-on .vr-id { color: #0356b1; }
.vr-toggle .amount { font: 600 11px/1 ui-monospace, Menlo, monospace; color: #1C1C1E; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vr-toggle.is-on .amount { color: #0356b1; }
.vr-totals {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #E5E5EA;
  font: 500 11px/1.3 'Inter';
  color: #6E6E73;
  font-variant-numeric: tabular-nums;
}
.vr-totals .v { color: #1C1C1E; font-weight: 600; text-align: right; }

/* Phase-Pill in der ed-bar (statt Entwurf-Pill) */
.ed-phase {
  font: 500 11px/1.2 'Inter';
  color: #6E6E73;
  display: inline-flex; align-items: center; gap: 6px;
}
.ed-phase .badge {
  padding: 3px 8px;
  border-radius: 999px;
  font: 600 10.5px/1 'Inter';
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.ed-phase.is-angebot .badge { background: #FBF2DD; color: #B87800; }
.ed-phase.is-auftrag .badge { background: #EAF1FB; color: #0356b1; }
.ed-phase.is-rechnung .badge { background: #E4F2EA; color: #1E7B3A; }
.ed-phase.is-festgeschrieben .badge { background: #EAF1FB; color: #0356b1; }

/* ── Editor-Lock im Status „festgeschrieben" ─────────────── */
body.doc-locked .lv-row-del,
body.doc-locked .lv-row-addpos,
body.doc-locked .lv-row-insert,
body.doc-locked #addHaupttitelBtn,
body.doc-locked .tb-trigger,
body.doc-locked #lvGrab,
body.doc-locked .zf-row .del,
body.doc-locked .panel-tool { display: none !important; }
body.doc-locked .ag-card select,
body.doc-locked .ag-card textarea,
body.doc-locked .ag-customer-trigger,
body.doc-locked .panel input,
body.doc-locked .panel textarea { opacity: 0.65; cursor: not-allowed; }
body.doc-locked .panel-head[data-act="toggle-collapse"] { pointer-events: auto; } /* Einklappen bleibt erlaubt */

/* "+ Hauptkapitel"-Button im Floating-Header */
.add-haupttitel-btn {
  position: fixed; bottom: 28px; right: 28px;
  z-index: 70;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 14px;
  background: #1C1C1E; color: #fff;
  border: 0; border-radius: 999px;
  font: 600 12px/1 'Inter';
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0,0,0,0.18), 0 1px 3px rgba(0,0,0,0.10);
}
.add-haupttitel-btn:hover { background: #000; }
.add-haupttitel-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── Zeilen-Lösch-Icon ───────────────────────────────────── */
/* TR muss position:relative sein damit absolute children korrekt sitzen */
tr.lv-row { position: relative; }
tr.lv-row td:last-child { position: relative; }
.lv-row-del {
  position: absolute;
  right: -8mm;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: #C0392B;
  opacity: 0;
  cursor: pointer;
  border-radius: 5px;
  transition: opacity .1s, background .1s;
}
tr.lv-row:hover .lv-row-del { opacity: 0.55; }
.lv-row-del:hover { opacity: 1 !important; background: #FBE9E9; }
.lv-row-del svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }

/* ── Bezeichnung Auto-Complete Dropdown ──────────────────── */
.bz-autocomplete {
  position: absolute;
  z-index: 90;
  background: #fff;
  border: 1px solid #E5E5EA;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.06);
  padding: 4px;
  min-width: 320px;
  max-width: 460px;
  max-height: 300px;
  overflow-y: auto;
  font-family: 'Inter', sans-serif;
}
.bz-autocomplete.is-hidden { display: none; }
.bz-suggestion {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 9px;
  border: 0;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  font-family: 'Inter';
}
.bz-suggestion:hover, .bz-suggestion.is-active { background: #F7F7FB; }
.bz-suggestion .name {
  display: block;
  font: 500 12.5px/1.3 'Inter';
  color: #1C1C1E;
}
.bz-suggestion .meta {
  display: flex; gap: 10px;
  font: 500 10.5px/1 'Inter';
  color: #8E8E93;
  margin-top: 3px;
}
.bz-suggestion .meta .kuerzel {
  background: #F2F2F7;
  color: #6E6E73;
  padding: 1px 5px;
  border-radius: 3px;
  font: 600 10px/1.2 ui-monospace, Menlo, monospace;
}
.bz-suggestion .meta .price {
  margin-left: auto;
  color: #1C1C1E;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.bz-suggestion mark {
  background: #FFF3D6;
  color: #1C1C1E;
  font-weight: 600;
  padding: 0;
}
.bz-empty {
  padding: 10px;
  font: 500 11.5px/1.3 'Inter';
  color: #8E8E93;
  text-align: center;
}

/* ── Strict-Hover-Trigger im Metadaten-Block (kein contenteditable) ── */
.kk-locked {
  cursor: default;
  user-select: text;
}
.kk-trigger {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 4px;
  margin: -1px -4px;
  border-radius: 3px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color .08s ease, border-color .08s ease;
}
.kk-trigger:hover {
  background: rgba(0,0,0,0.04);
}
.kk-trigger.is-open {
  background: #fff;
  border-color: #0356b1;
  box-shadow: 0 0 0 2px rgba(3,86,177,0.18);
}
.kk-trigger .kk-glyph {
  width: 10px; height: 10px;
  opacity: 0;
  flex: none;
  transition: opacity .1s;
}
.kk-trigger:hover .kk-glyph,
.kk-trigger.is-open .kk-glyph { opacity: 0.55; }
.kk-suffix:empty::before {
  content: attr(data-placeholder);
  color: #AEAEB2;
  font-style: italic;
}
.wert.is-big { font-size: 10pt; font-weight: 400; }

/* ── Kaufmännische Konditionen Panel ─────────────────────── */
.kk-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  row-gap: 8px;
  column-gap: 10px;
  align-items: center;
}
.kk-grid .label {
  font: 500 11.5px/1.3 'Inter';
  color: #6E6E73;
}
.kk-value {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  font: 500 12px/1.2 'Inter';
  color: #1C1C1E;
  border: 1px solid transparent;
  background: transparent;
  font-variant-numeric: tabular-nums;
}
.kk-value:hover { background: #F7F7FB; border-color: #E5E5EA; }
.kk-value:focus, .kk-value.is-open { background: #fff; border-color: #0356b1; box-shadow: 0 0 0 2px rgba(3,86,177,0.18); outline: none; }
.kk-value.is-zero { color: #AEAEB2; font-style: normal; }
.kk-value .chev {
  width: 10px; height: 10px;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  margin-left: 2px; opacity: 0.45;
}
.kk-value:hover .chev { opacity: 0.85; }

.kk-summary {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #E5E5EA;
  font: 500 10.5px/1.4 'Inter';
  color: #8E8E93;
}
.kk-summary strong { color: #1C1C1E; font-weight: 600; }

/* ── NEU · Angebotsdetails & Konditionen Card ────────────── */
.ag-card { display: flex; flex-direction: column; gap: 12px; }
.ag-row { display: flex; flex-direction: column; gap: 5px; }
.ag-row--full { width: 100%; }
.ag-label {
  font: 500 10.5px/1.2 'Inter';
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #6E6E73;
}
.ag-label-hint {
  color: var(--text-tertiary);
  font-weight: 400;
}
.ag-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
}
.ag-input-wrap {
  display: flex;
  align-items: stretch;
  border: 1px solid #D1D1D6;
  border-radius: 8px;
  background: #fff;
  transition: border-color .08s ease, box-shadow .08s ease;
}
.ag-input-wrap:hover { border-color: #C7CCD2; }
.ag-input-wrap:focus-within { border-color: #0356b1; box-shadow: 0 0 0 2px rgba(3,86,177,0.18); }

/* Strikte Dropdowns für Konditionen (kein Freitext) */
.ag-select-wrap {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid #D1D1D6;
  border-radius: 8px;
  background: #fff;
  transition: border-color .08s ease, box-shadow .08s ease;
}
.ag-select-wrap:hover { border-color: #C7CCD2; }
.ag-select-wrap:focus-within { border-color: #0356b1; box-shadow: 0 0 0 2px rgba(3,86,177,0.18); }
.ag-select {
  flex: 1 1 auto;
  border: 0;
  background: transparent;
  padding: 7px 28px 7px 9px;
  font: 500 13px/1.2 'Inter';
  color: #1C1C1E;
  font-variant-numeric: tabular-nums;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  outline: none;
  cursor: pointer;
  border-radius: 8px;
}
.ag-select-wrap .chev {
  position: absolute;
  right: 9px;
  width: 11px; height: 11px;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  color: #8E8E93;
  pointer-events: none;
}
.ag-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 7px 9px;
  font: 500 13px/1.2 'Inter';
  color: #1C1C1E;
  font-variant-numeric: tabular-nums;
  outline: none;
  -moz-appearance: textfield;
}
.ag-input::-webkit-outer-spin-button,
.ag-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ag-suffix {
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border-left: 1px solid #E5E5EA;
  font: 500 11.5px/1.2 'Inter';
  color: #6E6E73;
  background: #FAFAFC;
  border-radius: 0 8px 8px 0;
}
.ag-textarea {
  width: 100%;
  border: 1px solid #D1D1D6;
  border-radius: 8px;
  background: #fff;
  padding: 8px 10px;
  font: 400 12.5px/1.45 'Inter';
  color: #1C1C1E;
  resize: vertical;
  min-height: 64px;
  outline: none;
  transition: border-color .08s ease, box-shadow .08s ease;
}
.ag-textarea:hover { border-color: #C7CCD2; }
.ag-textarea:focus { border-color: #0356b1; box-shadow: 0 0 0 2px rgba(3,86,177,0.18); }
.ag-customer-trigger {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #D1D1D6;
  border-radius: 8px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .08s ease, box-shadow .08s ease, background-color .08s ease;
}
.ag-customer-trigger:hover { border-color: #C7CCD2; background: #F7F7FB; }
.ag-customer-trigger.is-open { border-color: #0356b1; background: #fff; box-shadow: 0 0 0 2px rgba(3,86,177,0.18); }
.ag-customer-glyph {
  width: 26px; height: 26px;
  border-radius: 6px;
  background: #EAF1FB;
  color: #0356b1;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 26px;
}
.ag-customer-glyph svg { width: 13px; height: 13px; }
.ag-customer-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ag-customer-name { font: 600 13px/1.25 'Inter'; color: #1C1C1E; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-customer-meta { font: 400 11px/1.3 'Inter'; color: #8E8E93; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-customer-trigger .chev {
  width: 11px; height: 11px;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  color: #8E8E93;
  flex: 0 0 11px;
}
.ag-summary {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid #E5E5EA;
  font: 400 11px/1.4 'Inter';
  color: #8E8E93;
}

/* ── Read-only Mirror auf dem Briefpapier ───────────────── */
.ro-mirror {
  user-select: text;
  cursor: default;
}
.ro-mirror[data-mirror-empty="true"] { display: none; }

/* ── Textbaustein-Picker (Anschreiben / Nachbemerkung) ── */
.tb-host { position: relative; }
.tb-trigger {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff;
  border: 1px solid #D1D1D6;
  border-radius: 6px;
  color: #0356b1;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity .12s ease, transform .12s ease, background-color .08s ease, border-color .08s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  z-index: 5;
}
.tb-host:hover > .tb-trigger,
.tb-host:focus-within > .tb-trigger,
.tb-trigger.is-open { opacity: 1; transform: translateY(0); }
.tb-trigger:hover { background: #EAF1FB; border-color: #0356b1; }
.tb-trigger svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tb-popover {
  position: absolute;
  top: 24px;
  right: -4px;
  min-width: 320px;
  max-width: 440px;
  background: #fff;
  border: 1px solid #E5E5EA;
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.06);
  padding: 6px;
  z-index: 60;
  display: none;
}
.tb-popover.is-open { display: block; }
.tb-popover-title {
  font: 600 10.5px/1.2 'Inter';
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #6E6E73;
  padding: 8px 10px 6px;
}
.tb-opt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 6px;
  padding: 8px 10px;
  cursor: pointer;
  font-family: inherit;
  color: #1C1C1E;
}
.tb-opt:hover { background: #F2F2F7; }
.tb-opt-title { font: 600 12px/1.25 'Inter'; }
.tb-opt-body { font: 400 11.5px/1.4 'Inter'; color: #6E6E73; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ── Inline-Select Popover (Einheit, Zahlungsziel, Skonto …) ── */
.kk-popover {
  position: absolute;
  z-index: 92;
  background: #fff;
  border: 1px solid #E5E5EA;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.06);
  padding: 4px;
  min-width: 180px;
  font-family: 'Inter', sans-serif;
}
.kk-popover.is-hidden { display: none; }
.kk-popover-title {
  padding: 6px 8px 4px;
  font: 600 10px/1 'Inter';
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #8E8E93;
}
.kk-popover button.kk-opt {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  width: 100%;
  padding: 7px 9px;
  border: 0;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  font: 500 12.5px/1.3 'Inter';
  color: #1C1C1E;
}
.kk-popover button.kk-opt:hover, .kk-popover button.kk-opt.is-active { background: #F7F7FB; }
.kk-popover button.kk-opt .sub { font: 500 10.5px/1 'Inter'; color: #8E8E93; }
.kk-popover button.kk-opt .checkmark {
  width: 13px; height: 13px;
  color: #0356b1;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0;
}
.kk-popover button.kk-opt.is-active .checkmark { opacity: 1; }
.kk-popover button.kk-opt .checkmark svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.kk-popover .kk-freetext {
  border-top: 1px solid #E5E5EA;
  padding: 6px 6px 4px;
  margin-top: 4px;
}
.kk-popover .kk-freetext input {
  width: 100%;
  border: 1px solid #C7CCD2;
  border-radius: 6px;
  padding: 6px 8px;
  font: 500 12px/1.2 'Inter';
  color: #1C1C1E;
  outline: none;
}
.kk-popover .kk-freetext input:focus { border-color: #0356b1; box-shadow: 0 0 0 2px rgba(3,86,177,0.18); }

/* ── Einheit-Trigger in der Positionstabelle ─────────────── */
.lv-einheit {
  display: inline-flex; align-items: center; gap: 2px;
  cursor: pointer;
  padding: 0 2px;
  margin: 0 -2px;
  border-radius: 2px;
  color: var(--doc-soft, #6e6e6e);
}
.lv-einheit:hover { background: rgba(0,0,0,0.04); }
.lv-einheit .chev {
  width: 8px; height: 8px;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0;
}
.lv-einheit:hover .chev { opacity: 0.6; }

/* ── Lohnkosten-Footer / Sicherheitseinbehalt-Zeile ──────── */
.pd-sums .pd-sum-rabatt td { font-size: 7.5pt; color: #000; }
.pd-sums .pd-sum-sicher td { font-size: 7.5pt; color: #000; }
.pd-sums .pd-sum-auszahlung td { font-weight: 600; border-top: 0.25pt solid #000; padding-top: 1.5mm; padding-bottom: 1mm; }
.pd-sums .pd-sum-lohnkosten td {
  font-size: 7pt; color: #555;
  padding-top: 2.5mm;
  font-style: italic;
}
.pd-13b-hinweis {
  font-size: 7.5pt; color: #000;
  font-style: italic;
  margin: 3mm 0;
  padding: 2mm 0 0 0;
  border-top: 0.15pt solid #ddd;
}



/* ─── Rechnung-spezifische Additionen (vom Faktura-Logikkern verwendet) ─── */

/* ── Rechnung: Datum-Range ──────────────────────────────────── */
.ag-date-range {
  display: flex; align-items: center; gap: 6px;
}
.ag-date-range .ag-input-wrap { flex: 1; }
.ag-date-sep {
  font: 500 11px/1 'Inter'; color: #8E8E93; white-space: nowrap;
}

/* ── Rechnung: Typ-Auswahl ──────────────────────────────────── */
.re-typ-btn {
  display: flex; align-items: flex-start; gap: 10px;
  width: 100%; padding: 9px 10px; background: #fff;
  border: 1px solid #E5E5EA; border-radius: 8px;
  cursor: pointer; text-align: left; margin-bottom: 5px;
  transition: border-color .08s, background .08s;
}
.re-typ-btn:hover { border-color: #C7CCD2; background: #FAFAFC; }
.re-typ-btn.is-active { border-color: #0356b1; background: #EAF1FB; }
.re-typ-dot {
  width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid #C7CCD2; background: #fff;
  flex: none; margin-top: 2px;
  transition: border-color .08s, background .08s;
}
.re-typ-btn.is-active .re-typ-dot { background: #0356b1; border-color: #0356b1; box-shadow: 0 0 0 3px rgba(3,86,177,0.18); }
.re-typ-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.re-typ-title { font: 500 12.5px/1.3 'Inter'; color: #1C1C1E; }
.re-typ-btn.is-active .re-typ-title { color: #0356b1; }
.re-typ-sub { font: 400 10.5px/1.3 'Inter'; color: #8E8E93; }

/* ── Hinweis-Blöcke ─────────────────────────────────────────── */
.ag-hint-warn {
  font: 500 11px/1.4 'Inter'; color: #B87800;
  background: #FBF2DD; border-radius: 6px; padding: 6px 9px;
  margin-top: 6px;
}
.ag-hint-info {
  font: 500 11px/1.4 'Inter'; color: #0356b1;
  background: #EAF1FB; border-radius: 6px; padding: 6px 9px;
  margin-top: 8px;
}
.ag-hint-future {
  display: flex; align-items: center; gap: 6px;
  font: 500 10.5px/1.35 'Inter'; color: #8E8E93;
  background: #F2F2F7; border-radius: 6px; padding: 6px 9px;
  margin-top: 8px;
}

/* GoBD-Lock: globale Read-only-Anzeige bei festgeschrieben */
body.doc-locked .lv-row-del,
body.doc-locked .lv-row-insert,
body.doc-locked .lv-row-addpos,
body.doc-locked .tb-trigger,
body.doc-locked .kk-glyph,
body.doc-locked #addHaupttitelBtn { display: none !important; }
body.doc-locked .ed-compliance.is-warn { display: none !important; }
body.doc-locked [contenteditable="false"] { cursor: default; }

/* Rechnungs-Editor: LV ist STRICT-READONLY (au\u00dfer Menge).
   Insert-Rows, Add-Position-Buttons und Row-L\u00f6schen sind permanent ausgeblendet.

   SCOPE-FIX 2026-05-23: Regel war vorher unscoped global und hat in den Angebots-Editor
   geleakt (gleiche Klassen, beide CSS-Files in index.html geladen). Jetzt gescoped auf
   #paperAngebot[data-doctype="rechnung"]. Die fr\u00fcher mit-versteckten Floating-Elemente
   .add-haupttitel-btn und #lvInsertPopover sind hier raus, weil das RE-SHELL_HTML sie
   gar nicht rendert (verifiziert via grep am Modul-Output) \u2014 die Regel war f\u00fcr RE
   redundant und f\u00fcr AG sch\u00e4dlich. */
#paperAngebot[data-doctype="rechnung"] .lv-row-insert,
#paperAngebot[data-doctype="rechnung"] .lv-row-addpos,
#paperAngebot[data-doctype="rechnung"] .lv-row-del { display: none !important; }

/* Einheit-Zelle: read-only Look (kein Chevron, keine Interaktion) */
.lv-einheit.is-locked {
  color: #1C1C1E;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: default;
  pointer-events: none;
}
.lv-einheit.is-locked .chev { display: none; }

/* AP-LAYOUT-FIX 2026-05-23: Die globale Regel `.panel { display:none; flex:1;
   min-width:320px }` aus css/design-system.css (Z.67, Page-Level-Container) kollidiert
   mit den mockup-internen <section class="panel">-Karten in den Rails — sie werden
   unsichtbar und die Rails wirken leer. Höher-spezifischer Selector im Editor-Scope
   stellt die Mockup-Defaults wieder her. */
.shell .panel,
.rail .panel {
  display: block;
  flex: none;
  min-width: 0;
}

/* Vorrechnungen-Card · default per CSS unsichtbar; renderPanels() blendet sie nur ein,
   wenn STATE.panels.vorrechnungen.visible = true (gesteuert durch Rechnungstyp). */
.panel[data-panel="vorrechnungen"] { display: none; }
.rail .panel[data-panel="vorrechnungen"] { display: block; }

/* Festgeschrieben-Phase-Pill (gr\u00fcn) */
.ed-phase.is-festgeschrieben {
  background: #E4F2EA;
  color: #1E7B3A;
}

/* Rechnungscheck-Compliance-Pill im ed-bar bleibt sichtbar im Entwurf,
   verschwindet automatisch sobald docStatus = festgeschrieben (siehe body.doc-locked oben). */

/* Festgeschrieben: Rechnungstyp-Buttons (re-typ-btn) auch sperren */
body.doc-locked .re-typ-btn,
body.doc-locked .vr-toggle,
body.doc-locked .panel button:not(.panel-tool-toggle) {
  pointer-events: none;
  opacity: 0.65;
  cursor: not-allowed;
}
body.doc-locked .panel-head[data-act="toggle-collapse"] {
  pointer-events: auto; opacity: 1; cursor: pointer;
}