/* ═══════════════════════════════════════════════════════════════════════════
   WYSIWYG-Dokumenteditor (.dte-) — Vollbild-Arbeitsbereich für „Vorlagen &
   Dokumentdesign". Modell = Wahrheitsquelle, contenteditable nur Eingabefläche.
   Editor/Vorschau/PDF teilen dieselben Stilregeln. Nur Design-System-Tokens.
   ═══════════════════════════════════════════════════════════════════════════ */
.dte-root { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; background: var(--color-slate-100, #eef1f0); font-size: var(--text-sm); }

/* Topbar */
.dte-top { display: flex; align-items: center; gap: var(--space-2); padding: 8px 14px; background: var(--color-surface, #fff); border-bottom: 1px solid var(--border-default, var(--color-slate-200)); flex: 0 0 auto; min-height: 52px; flex-wrap: wrap; }
.dte-top .dte-t-name { font-weight: var(--fw-bold); color: var(--text-primary); }
.dte-top .dte-t-sub { font-size: var(--text-xs); color: var(--text-muted); }
.dte-sep { width: 1px; align-self: stretch; background: var(--border-default, var(--color-slate-200)); margin: 4px 2px; }
.dte-grow { flex: 1 1 auto; }
.dte-status { font-size: var(--text-xs); display: inline-flex; align-items: center; gap: 5px; }
.dte-status.is-dirty { color: var(--color-amber-600); }
.dte-status.is-saved { color: var(--color-success, var(--color-green-600)); }
.dte-status.is-saving { color: var(--text-muted); }
.dte-status.is-err { color: var(--color-danger); }
.dte-status .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.dte-btn { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 10px; border: 1px solid var(--border-default, var(--color-slate-200)); border-radius: var(--radius-sm); background: var(--color-surface, #fff); color: var(--text-primary); font-size: var(--text-sm); cursor: pointer; white-space: nowrap; }
.dte-btn:hover { background: var(--color-slate-50); border-color: var(--color-slate-300); }
.dte-btn:disabled { opacity: .45; cursor: not-allowed; }
.dte-btn.is-active { background: var(--color-forest-soft, var(--color-green-50)); border-color: var(--color-forest); color: var(--color-forest); }
.dte-btn.primary { background: var(--color-forest, #147A43); border-color: var(--color-forest, #147A43); color: var(--color-surface); }
.dte-btn.primary:hover { background: var(--color-forest-hover, #0f5f34); }
.dte-btn.icon { width: 32px; padding: 0; justify-content: center; font-size: var(--text-base); }
.dte-seg { display: inline-flex; border: 1px solid var(--border-default, var(--color-slate-200)); border-radius: var(--radius-sm); overflow: hidden; }
.dte-seg .dte-btn { border: none; border-radius: 0; height: 32px; }
.dte-seg .dte-btn + .dte-btn { border-left: 1px solid var(--border-default, var(--color-slate-200)); }
.dte-select { height: 32px; border: 1px solid var(--border-default, var(--color-slate-200)); border-radius: var(--radius-sm); background: var(--color-surface, #fff); padding: 0 6px; font-size: var(--text-sm); max-width: 210px; }
.dte-zoomval { min-width: 46px; text-align: center; font-variant-numeric: tabular-nums; }

.dte-main { flex: 1 1 auto; display: flex; min-height: 0; }
.dte-panel { flex: 0 0 auto; background: var(--color-surface, #fff); display: flex; flex-direction: column; min-height: 0; transition: width .12s ease; }
.dte-left { width: 270px; border-right: 1px solid var(--border-default, var(--color-slate-200)); }
.dte-right { width: 316px; border-left: 1px solid var(--border-default, var(--color-slate-200)); }
.dte-left.collapsed, .dte-right.collapsed { width: 42px; }
.dte-panel-h { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border-bottom: 1px solid var(--border-default, var(--color-slate-200)); flex: 0 0 auto; }
.dte-panel-h .t { font-size: var(--text-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.dte-panel-body { flex: 1 1 auto; overflow-y: auto; padding: 10px; }
.dte-collapse { background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: var(--text-base); padding: 2px 4px; border-radius: var(--radius-sm); }
.dte-collapse:hover { background: var(--color-slate-100); }
.dte-panel.collapsed .dte-panel-body, .dte-panel.collapsed .dte-panel-h .t { display: none; }
.dte-panel.collapsed .dte-panel-h { justify-content: center; padding: 8px 4px; }

.dte-canvasarea { flex: 1 1 auto; overflow: auto; background: var(--color-slate-200, #d9dedb); padding: 28px 20px 90px; min-width: 0; }
.dte-zoomwrap { transform-origin: top center; width: 794px; margin: 0 auto; }
.dte-sheet { background: var(--color-surface); width: 794px; box-shadow: 0 2px 14px rgba(15,23,20,.18); margin: 0 auto 24px; position: relative; box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; color: #1c2a22; line-height: 1.35; }
.dte-pageguide { position: absolute; left: 0; right: 0; border-top: 1px dashed rgba(20,122,67,.4); pointer-events: none; z-index: 1; }
.dte-pageguide span { position: absolute; right: 4px; top: -14px; font-size: 10px; color: var(--color-forest); background: var(--color-slate-200); padding: 0 4px; }
.dte-sheet .dte-marginbox { position: absolute; border: 1px dashed rgba(20,122,67,.25); pointer-events: none; z-index: 0; }
.dte-pagebadge { position: absolute; top: -20px; left: 2px; font-size: var(--text-xxs); color: var(--text-muted); }

.dte-lh-bg { position: absolute; z-index: 0; pointer-events: none; user-select: none; }
.dte-sheet.has-lh > .dte-zone, .dte-sheet.has-lh > .dte-lh-note, .dte-sheet.has-lh > .dte-pagebadge { position: relative; z-index: 1; }
.dte-pagenum { position: absolute; z-index: 1; text-align: right; color: var(--text-muted); pointer-events: none; user-select: none; }
.dte-lh-note { text-align: center; font-size: 10px; color: var(--color-sage, #7c9885); background: rgba(255,255,255,.72); padding: 2px; margin: 3px 0; border: 1px dashed var(--color-slate-300); border-radius: 3px; }
.dte-zone { position: relative; }
.dte-zone-tag { position: absolute; left: 0; top: -14px; font-size: 8.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-sage, #7c9885); padding: 0 3px; z-index: 2; opacity: .65; pointer-events: none; }
.dte-zone:hover > .dte-zone-tag { opacity: 1; }
.dte-zone.dropping { background: rgba(20,122,67,.05); }
.dte-headfoot-rule { border: none; border-top: 1px solid var(--color-slate-200); margin: 0; }

.dte-block { position: relative; }
.dte-block .dte-gutter { position: absolute; left: -30px; top: 0; width: 26px; display: none; flex-direction: column; align-items: center; gap: 2px; z-index: 3; }
.dte-block:hover > .dte-gutter, .dte-block.sel > .dte-gutter { display: flex; }
.dte-ghandle { cursor: grab; color: var(--color-slate-400); font-size: var(--text-base); line-height: 1; padding: 2px; border-radius: 3px; user-select: none; }
.dte-ghandle:hover { background: var(--color-slate-100); color: var(--text-primary); }
.dte-gplus { cursor: pointer; color: var(--color-slate-400); font-size: var(--text-base); padding: 0 2px; }
.dte-gplus:hover { color: var(--color-forest); }
.dte-gmove { cursor: pointer; color: var(--color-slate-400); font-size: var(--text-sm); line-height: 1; padding: 1px 3px; border-radius: 3px; user-select: none; }
.dte-gmove:hover { background: var(--color-slate-100); color: var(--color-forest); }
/* Verschachtelte (Spalten-)Elemente: kompakte Pfeile oben rechts im Element statt im Rand */
.dte-gutter.dte-gnest { left: auto; right: 2px; top: 2px; width: auto; flex-direction: row; gap: 1px; background: rgba(255,255,255,.85); border-radius: 4px; box-shadow: 0 1px 3px rgba(15,23,20,.14); }
.dte-block:hover > .dte-gutter.dte-gnest, .dte-block.sel > .dte-gutter.dte-gnest { display: flex; }
.dte-block > .dte-content { outline: 1.5px solid transparent; border-radius: 3px; transition: outline-color .1s; position: relative; }
.dte-block:hover > .dte-content { outline-color: var(--color-slate-200); }
.dte-block.sel > .dte-content { outline-color: var(--color-forest); }
.dte-block.cond .dte-condtag { position: absolute; right: -22px; top: 0; font-size: var(--text-xxs); color: var(--color-gold-ink); background: var(--color-gold-soft); border-radius: 3px; padding: 0 3px; cursor: help; z-index: 3; }
.dte-block.reqmiss > .dte-content { outline-color: var(--color-danger); outline-style: dashed; }

.dte-rt { outline: none; min-height: 1em; white-space: pre-wrap; word-wrap: break-word; }
.dte-rt:empty::before { content: attr(data-ph); color: var(--color-slate-400); pointer-events: none; }
.dte-fchip { border-radius: 3px; padding: 0 3px; background: var(--color-sage-soft, #e5efe8); color: var(--color-forest, #147A43); box-decoration-break: clone; -webkit-box-decoration-break: clone; cursor: default; }
.dte-fchip.showval { background: transparent; color: inherit; padding: 0; }
.dte-fchip.missing { background: var(--color-danger-soft); color: var(--color-danger-ink); }
.dte-fieldblock .dte-flabel { color: var(--text-muted); font-weight: var(--fw-semibold); }

.dte-spacer { position: relative; }
.dte-block:hover .dte-spacer::after, .dte-block.sel .dte-spacer::after { content: ""; position: absolute; inset: 2px 0; border: 1px dashed var(--color-slate-300); border-radius: 3px; background: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(0,0,0,.02) 5px, rgba(0,0,0,.02) 10px); }
.dte-pbreak { text-align: center; color: var(--color-slate-400); font-size: 10px; letter-spacing: .1em; border-top: 1px dashed var(--color-slate-300); margin: 6px 0; }
.dte-pbreak span { background: var(--color-surface); padding: 0 8px; position: relative; top: -8px; }

.dte-tbl { width: 100%; border-collapse: collapse; }
.dte-tbl th, .dte-tbl td { border-bottom: 1px solid var(--color-slate-200); padding: 4px 6px; text-align: left; }
.dte-tbl thead th { background: var(--color-slate-50); font-size: .92em; color: var(--text-muted); border-bottom-color: var(--color-slate-300); }
.dte-tbl td.num, .dte-tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
.dte-tbl tfoot td { font-weight: var(--fw-bold); border-top: 1px solid var(--color-slate-300); }

.dte-sig { display: flex; gap: 30px; }
.dte-sig > div { flex: 1; }
.dte-sig .line { border-bottom: 1px dashed #9aa8a0; height: 28px; }
.dte-sig .cap { font-size: .82em; color: var(--text-muted); }
.dte-infobox { border: 1px solid var(--color-slate-200); border-radius: var(--radius-sm); padding: 10px 12px; }
.dte-infobox .ib-title { font-size: .82em; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .03em; color: var(--color-forest); margin-bottom: 4px; }
.dte-infobox .dte-ibico { flex: none; }
.dte-infobox.dte-ibrow { display: flex; gap: 8px; align-items: flex-start; }
.dte-infobox.dte-ibrow .dte-ibico { margin-top: 1px; }
.dte-infobox.dte-warn { display: flex; gap: 8px; align-items: flex-start; border: 1px dashed #C9A24A; background: #FAEEDA; color: #854F0B; border-radius: var(--radius-sm); padding: 9px 12px; }
.dte-infobox.dte-warn .dte-ibico { color: #C9A24A; margin-top: 1px; }
.dte-infobox.dte-warn .dte-rt { color: #854F0B; }
.dte-hr { border: none; border-top: 1px solid var(--color-slate-300); }
/* Neue Dokumentbausteine — Editor-Pendant zum PDF-Renderer */
.dte-hrow { display: flex; align-items: center; gap: 4px; }
.dte-hico { display: inline-flex; align-items: center; flex: none; }
.dte-hbar { width: 3.5px; align-self: stretch; min-height: 1.05em; border-radius: 2px; flex: none; margin-right: 6px; }
.dte-metabox { display: inline-block; border: 1px solid #E2E0D8; border-radius: var(--radius-sm); padding: 7px 12px; text-align: left; box-sizing: border-box; }
.dte-mbrow { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 2px 0; }
.dte-mblbl { color: #6A6862; font-size: var(--text-xxs); white-space: nowrap; }
.dte-mbval { font-weight: 700; color: #1C2B26; font-size: var(--text-xs); white-space: nowrap; }
.dte-pill { display: inline-flex; align-items: center; gap: 3px; border-radius: var(--radius-xl); padding: 2px 9px; font-size: var(--text-xxs); font-weight: 700; line-height: 1.45; white-space: nowrap; }
.dte-pill-empty { background: var(--color-slate-100); color: var(--color-slate-400); }
.dte-summary { display: inline-block; text-align: left; box-sizing: border-box; }
.dte-sumrow { display: flex; justify-content: space-between; gap: 16px; padding: 5px 11px; font-size: var(--text-xs); border-top: 1px solid #ECECE6; }
.dte-sumrow:first-child { border-top: none; }
.dte-sumrow .dte-sumval { font-weight: 700; }
.dte-sumrow.hl { background: #E1F5EE; border-radius: 4px; border-top: none; color: #0F6E56; }
.dte-sumrow.hl span { font-weight: 700; }
.dte-logo-ph { display: inline-flex; align-items: center; justify-content: center; min-width: 150px; height: 46px; border: 1px dashed var(--color-slate-300); border-radius: 4px; color: var(--text-muted); font-size: .85em; }
.dte-qr-ph { width: 72px; height: 72px; border: 1px dashed var(--color-slate-300); display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: .72em; text-align: center; }

.dte-insline { height: 3px; background: var(--color-forest); border-radius: 2px; margin: 1px 0; box-shadow: 0 0 0 1px rgba(20,122,67,.25); }
.dte-drag-ghost { position: fixed; pointer-events: none; z-index: 3000; background: var(--color-forest); color: var(--color-surface); font-size: var(--text-xs); padding: 4px 9px; border-radius: 4px; opacity: .92; box-shadow: var(--shadow-md); }

.dte-libsearch { width: 100%; height: 30px; margin-bottom: 8px; border: 1px solid var(--border-default, var(--color-slate-200)); border-radius: var(--radius-sm); padding: 0 8px; }
.dte-libsec { margin-bottom: 14px; }
.dte-libsec > h5 { font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--text-secondary); margin: 0 0 6px; text-transform: uppercase; letter-spacing: .03em; }
.dte-libgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.dte-libitem { display: flex; align-items: center; gap: 7px; padding: 7px 8px; border: 1px solid var(--border-default, var(--color-slate-200)); border-radius: var(--radius-sm); background: var(--color-surface, #fff); cursor: grab; font-size: var(--text-xs); color: var(--text-primary); text-align: left; }
.dte-libitem:hover { border-color: var(--color-forest); background: var(--color-forest-soft, var(--color-green-50)); }
.dte-libitem .ic { font-size: var(--text-md); opacity: .8; }
.dte-libitem.full { grid-column: 1 / -1; }
.dte-fldcat { margin-bottom: 4px; }
.dte-fldcat > summary { cursor: pointer; font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--text-secondary); padding: 4px 0; list-style: none; }
.dte-fldcat > summary::-webkit-details-marker { display: none; }
.dte-fldcat > summary::before { content: "\25B8  "; color: var(--color-slate-400); }
.dte-fldcat[open] > summary::before { content: "\25BE  "; }
.dte-flditem { display: block; width: 100%; text-align: left; border: 1px solid transparent; border-radius: var(--radius-sm); background: var(--color-slate-50); padding: 5px 8px; margin: 2px 0; font-size: var(--text-xs); cursor: grab; color: var(--text-primary); }
.dte-flditem:hover { border-color: var(--color-sage); background: var(--color-surface); }

.dte-fmtbar { position: fixed; z-index: 2500; display: flex; align-items: center; gap: 2px; background: #1c2a22; border-radius: var(--radius-sm); padding: 4px; box-shadow: var(--shadow-xl); }
.dte-fmtbar button { min-width: 30px; height: 28px; border: none; background: transparent; color: #e7ece9; border-radius: 4px; cursor: pointer; font-size: var(--text-md); display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; }
.dte-fmtbar button:hover { background: rgba(255,255,255,.14); }
.dte-fmtbar button.on { background: var(--color-sage, #7c9885); color: var(--color-surface); }
.dte-fmtbar input[type=color] { width: 26px; height: 24px; border: none; background: none; padding: 0; cursor: pointer; }
.dte-fmtbar .msep { width: 1px; height: 20px; background: rgba(255,255,255,.18); margin: 0 3px; }
.dte-fmtbar select { height: 26px; background: rgba(255,255,255,.1); color: var(--color-surface); border: none; border-radius: 4px; font-size: var(--text-xs); }
.dte-fmtbar select option { color: var(--color-black); }

.dte-menu { position: fixed; z-index: 2600; background: var(--color-surface); border: 1px solid var(--border-default, var(--color-slate-200)); border-radius: var(--radius-md); box-shadow: var(--shadow-xl); width: 290px; max-height: 350px; overflow: hidden; display: flex; flex-direction: column; }
.dte-menu input { border: none; border-bottom: 1px solid var(--color-slate-200); height: 34px; padding: 0 10px; outline: none; font-size: var(--text-sm); }
.dte-menu-list { overflow-y: auto; }
.dte-menu-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; cursor: pointer; font-size: var(--text-sm); }
.dte-menu-item:hover, .dte-menu-item.hl { background: var(--color-forest-soft, var(--color-green-50)); }
.dte-menu-item .sub { font-size: var(--text-xxs); color: var(--text-muted); margin-left: auto; font-family: var(--font-mono); }
.dte-menu-grouphdr { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-subtle, var(--color-slate-400)); padding: 6px 10px 2px; }

.dte-pgroup { margin-bottom: 12px; }
.dte-pgroup > h5 { font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--text-secondary); margin: 0 0 6px; text-transform: uppercase; letter-spacing: .03em; }
.dte-prow { margin-bottom: 8px; }
.dte-prow > label { display: block; font-size: var(--text-xs); color: var(--text-muted); margin-bottom: 3px; }
.dte-prow input[type=text], .dte-prow input[type=number], .dte-prow select, .dte-prow textarea { width: 100%; height: 30px; border: 1px solid var(--border-default, var(--color-slate-200)); border-radius: var(--radius-sm); padding: 0 8px; font-size: var(--text-sm); box-sizing: border-box; }
.dte-prow textarea { height: auto; min-height: 54px; padding: 6px 8px; }
.dte-pcols { display: flex; gap: 6px; }
.dte-pcols > * { flex: 1; min-width: 0; }
.dte-chkrow { display: flex; align-items: center; gap: 6px; font-size: var(--text-sm); margin-bottom: 6px; }
.dte-adv > summary { cursor: pointer; font-size: var(--text-xs); color: var(--text-muted); padding: 6px 0; }
.dte-spacing-presets { display: flex; gap: 4px; }
.dte-spacing-presets button { flex: 1; border: 1px solid var(--border-default, var(--color-slate-200)); background: var(--color-surface); border-radius: var(--radius-sm); padding: 5px 2px; font-size: var(--text-xxs); cursor: pointer; }
.dte-spacing-presets button.on { background: var(--color-forest-soft, var(--color-green-50)); border-color: var(--color-forest); color: var(--color-forest); }
.dte-pnone { color: var(--text-muted); text-align: center; padding: 30px 10px; font-size: var(--text-sm); }
.dte-cond { border: 1px solid var(--border-default, var(--color-slate-200)); border-radius: var(--radius-sm); padding: 8px; margin-bottom: 6px; }
.dte-cond select, .dte-cond input { height: 28px; font-size: var(--text-xs); width: 100%; margin-bottom: 4px; border: 1px solid var(--border-default, var(--color-slate-200)); border-radius: var(--radius-sm); padding: 0 6px; box-sizing: border-box; }

.dte-preview { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; background: var(--color-slate-200); }
.dte-preview iframe { flex: 1 1 auto; border: none; width: 100%; background: var(--color-slate-200); }
.dte-preview .pv-issues { max-height: 132px; overflow-y: auto; background: var(--color-surface); border-top: 1px solid var(--border-default, var(--color-slate-200)); padding: 8px 14px; }
.dte-pv-issue { font-size: var(--text-xs); padding: 4px 8px; border-radius: var(--radius-sm); margin-bottom: 4px; }
.dte-pv-issue.error { background: var(--color-danger-soft); color: var(--color-danger-ink); }
.dte-pv-issue.warning { background: var(--color-warning-soft); color: var(--color-warning-ink); }
.dte-pv-issue.hint { background: var(--color-info-soft); color: var(--color-info-ink); }

.dte-ovpage { position: relative; background: var(--color-surface); box-shadow: var(--shadow-md); margin: 0 auto 20px; }
.dte-ovpage img { display: block; width: 100%; }
.dte-ovel { position: absolute; border: 1px dashed var(--color-forest); background: rgba(20,122,67,.08); font-size: var(--text-xxs); padding: 1px 3px; cursor: move; overflow: hidden; white-space: nowrap; }
.dte-ovel.sel { border-style: solid; box-shadow: 0 0 0 2px var(--color-forest); z-index: 3; }
.dte-ovel .rz { position: absolute; right: -4px; bottom: -4px; width: 9px; height: 9px; background: var(--color-forest); border: 1px solid var(--color-surface); border-radius: 2px; cursor: nwse-resize; }

.dte-empty-hint { text-align: center; color: var(--text-muted); padding: 40px 20px; font-size: var(--text-sm); }
.dte-empty-hint .big { font-size: var(--text-base); color: var(--text-secondary); margin-bottom: 6px; }

@media (max-width: 900px) {
  .dte-left, .dte-right { position: absolute; top: 52px; bottom: 0; z-index: 20; box-shadow: var(--shadow-xl); }
  .dte-left { left: 0; } .dte-right { right: 0; }
  .dte-left.collapsed, .dte-right.collapsed { box-shadow: none; }
}