/* ═══════════════════════════════════════════════════════════════════════════
   reports-editor.css v2 — WYSIWYG Dokument-Editor

   Theme: bewusst dunkles Theme (wie Adobe/Figma-Editoren).
   Alle Farben über CSS-Variablen — wer ein Light-Theme will, kann
   `:root.rpe2-light` definieren und alle Vars dort überschreiben.
   ═══════════════════════════════════════════════════════════════════════════ */
.rpe2 {
  /* Theme-Variablen — Editor ist dunkel by design */
  --rpe2-bg:           #23272b;
  --rpe2-topbar:       #161a1d;
  --rpe2-fmtbar:       #1c2125;
  --rpe2-border:       rgba(255,255,255,.07);
  --rpe2-border-strong:rgba(255,255,255,.12);
  --rpe2-border-act:   rgba(255,255,255,.25);
  --rpe2-text:         #fff;
  --rpe2-text-mute:    rgba(255,255,255,.65);
  --rpe2-text-dim:     rgba(255,255,255,.35);
  --rpe2-hover:        rgba(255,255,255,.08);
  --rpe2-hover-strong: rgba(255,255,255,.12);
  --rpe2-active:       rgba(255,255,255,.09);
  --rpe2-accent:       #488078;
  --rpe2-accent-hover: #3d6e66;
  --rpe2-success:      #2e7d32;
  --rpe2-success-hover:#1b5e20;
  --rpe2-danger:       #dc2626;
  --rpe2-danger-hover: #b91c1c;
  --rpe2-saving:       #5aada2;
  --rpe2-saved:        #5cb85c;
  --rpe2-doc-bg:       #f0f2f5;
  --rpe2-doc-text:     #1a2926;
}

/* ── OVERLAY ─────────────────────────────────────────────────────────────── */
.rpe2 {
  position:fixed; inset:0; z-index:1500; display:flex; flex-direction:column;
  background:var(--rpe2-bg); font-family:inherit;
  animation:rpe2-fadein .2s cubic-bezier(.4,0,.2,1);
}
@media (prefers-reduced-motion: reduce) { .rpe2 { animation:none; } }
@keyframes rpe2-fadein { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }

/* ── TOPBAR ──────────────────────────────────────────────────────────────── */
.rpe2-top {
  display:flex; align-items:center; gap:8px; padding:0 16px;
  height:52px; background:var(--rpe2-topbar); border-bottom:1px solid var(--rpe2-border);
  flex-shrink:0;
}
.rpe2-back-btn {
  display:inline-flex; align-items:center; gap:6px; padding:6px 10px;
  border:1px solid var(--rpe2-border-strong); border-radius:6px;
  background:transparent; color:var(--rpe2-text-mute); font-family:inherit;
  font-size:.78rem; cursor:pointer; transition:all .12s; white-space:nowrap;
}
.rpe2-back-btn:hover { background:var(--rpe2-hover); color:var(--rpe2-text); }
.rpe2-doc-title {
  flex:1; min-width:120px; background:transparent; border:none; outline:none;
  color:var(--rpe2-text); font-size:.95rem; font-weight:600; font-family:inherit;
  padding:5px 8px; border-radius:5px; transition:background .12s;
}
.rpe2-doc-title:hover { background:rgba(255,255,255,.05); }
.rpe2-doc-title:focus { background:var(--rpe2-active); }
.rpe2-doc-title::placeholder { color:rgba(255,255,255,.25); font-weight:400; }
.rpe2-save-ind {
  font-size:.7rem; color:var(--rpe2-text-dim); padding:0 4px;
  transition:color .2s; white-space:nowrap;
}
.rpe2-save-ind.saving { color:var(--rpe2-saving); }
.rpe2-save-ind.saved  { color:var(--rpe2-saved); }
.rpe2-status-badge {
  padding:3px 10px; border-radius:12px; font-size:.68rem; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; flex-shrink:0;
}
.rpe2-top-sep { width:1px; height:22px; background:rgba(255,255,255,.1); flex-shrink:0; margin:0 2px; }
.rpe2-top-btn {
  display:inline-flex; align-items:center; gap:5px; padding:6px 11px;
  border:1px solid var(--rpe2-border-strong); border-radius:6px;
  background:rgba(255,255,255,.05); color:rgba(255,255,255,.75);
  font-family:inherit; font-size:.78rem; cursor:pointer;
  transition:all .12s; white-space:nowrap; flex-shrink:0;
}
.rpe2-top-btn:hover { background:var(--rpe2-hover-strong); color:var(--rpe2-text); border-color:var(--rpe2-border-act); }
.rpe2-top-btn.primary { background:var(--rpe2-accent); border-color:var(--rpe2-accent); color:#fff; }
.rpe2-top-btn.primary:hover { background:var(--rpe2-accent-hover); }
.rpe2-top-btn.success { background:var(--rpe2-success); border-color:var(--rpe2-success); color:#fff; }
.rpe2-top-btn.success:hover { background:var(--rpe2-success-hover); }
.rpe2-top-btn.danger { background:var(--rpe2-danger); border-color:var(--rpe2-danger); color:#fff; }
.rpe2-top-btn.danger:hover { background:var(--rpe2-danger-hover); }

/* ── REVIEW-BANNER ───────────────────────────────────────────────────────
   Erscheint zwischen Top-Bar und Format-Bar, je nach Status:
   - submitted (Admin)  → blauer „Endkontrolle"-Hinweis
   - rejected (User)    → roter Hinweis mit Begründung
   - approved           → grüner „freigegeben"-Hinweis
─────────────────────────────────────────────────────────────────────── */
.rpe2-review-banner {
  display:flex; align-items:flex-start; gap:12px;
  padding:10px 16px; margin:0;
  background:linear-gradient(90deg, rgba(59,130,246,.18), rgba(59,130,246,.06));
  border-bottom:1px solid rgba(59,130,246,.32);
  color:#cfe1ff;
  font-size:.84rem;
}
.rpe2-review-banner.rejected {
  background:linear-gradient(90deg, rgba(220,38,38,.22), rgba(220,38,38,.08));
  border-bottom-color:rgba(220,38,38,.4);
  color:#fed7d7;
}
.rpe2-review-banner.approved {
  background:linear-gradient(90deg, rgba(22,163,74,.22), rgba(22,163,74,.08));
  border-bottom-color:rgba(22,163,74,.4);
  color:#bef0d2;
}
.rpe2-review-banner > i {
  flex-shrink:0;
  font-size:1.1rem;
  margin-top:2px;
}
.rpe2-review-text { flex:1; }
.rpe2-review-title { font-weight:700; margin-bottom:2px; }
.rpe2-review-sub { font-size:.78rem; opacity:.85; line-height:1.4; }
.rpe2-top-btn.icon-only { padding:6px 8px; min-width:32px; justify-content:center; }

/* ── FORMAT BAR ─────────────────────────────────────────────────────────── */
.rpe2-fmt-bar {
  display:flex; align-items:center; gap:3px; padding:4px 14px;
  background:#1c2125; border-bottom:1px solid rgba(255,255,255,.07);
  flex-shrink:0; flex-wrap:wrap;
}
.rpe2-fmt-group { display:flex; gap:1px; }
.rpe2-fmt-sep {
  width:1px; height:18px; background:rgba(255,255,255,.12);
  margin:0 5px; flex-shrink:0;
}
.rpe2-fmt-btn {
  min-width:28px; height:28px; border:none; border-radius:5px;
  background:transparent; color:rgba(255,255,255,.62);
  font-size:.82rem; cursor:pointer; display:inline-flex;
  align-items:center; justify-content:center;
  font-family:inherit; transition:background .1s,color .1s; padding:0 6px;
}
.rpe2-fmt-btn b { font-family:Georgia,serif; font-size:.92rem; font-style:normal; }
.rpe2-fmt-btn i:not(.fa-solid):not(.fa-regular) { font-family:Georgia,serif; font-size:.88rem; font-style:italic; }
.rpe2-fmt-btn u { font-family:Georgia,serif; font-size:.88rem; }
.rpe2-fmt-btn s { font-family:Georgia,serif; font-size:.88rem; }
.rpe2-fmt-btn:hover { background:rgba(255,255,255,.1); color:#fff; }
.rpe2-fmt-btn.act { background:rgba(72,128,120,.35); color:#7ecfca; }

/* ── RICH TEXT CONTENTEDITABLE ─────────────────────────────────────────── */
.rpe2-rich {
  width:100%; min-height:90px; padding:9px 11px;
  background:rgba(255,255,255,.04); border:1.5px solid rgba(255,255,255,.08);
  border-radius:7px; color:#d8dde4; font-family:inherit;
  font-size:.88rem; line-height:1.65; outline:none;
  transition:border-color .15s,background .15s;
  word-wrap:break-word; box-sizing:border-box;
  cursor:text;
}
.rpe2-rich[contenteditable=true]:focus {
  border-color:rgba(72,128,120,.5); background:rgba(72,128,120,.05);
}
.rpe2-rich:empty::before,.rpe2-rich[data-placeholder]:not(:focus):empty::before {
  content:attr(data-placeholder);
  color:rgba(255,255,255,.2); pointer-events:none; display:block;
}
.rpe2-rich h3 { font-size:1rem; font-weight:700; margin:4px 0 3px; color:#eef; }
.rpe2-rich p { margin:2px 0; }
.rpe2-rich ul,.rpe2-rich ol { padding-left:20px; margin:4px 0; }
.rpe2-rich li { margin:1px 0; }
.rpe2-rich strong,.rpe2-rich b { color:#fff; }
.rpe2-rich-ro { pointer-events:none; opacity:.85; }

/* ── LS TAG CHIPS ─────────────────────────────────────────────────────── */
.rpe2-tag-wrap {
  display:flex; flex-wrap:wrap; gap:5px; align-items:center;
  background:rgba(255,255,255,.06); border:1.5px solid rgba(255,255,255,.12);
  border-radius:8px; padding:6px 10px; min-height:40px; cursor:text;
  transition:border-color .15s;
}
.rpe2-tag-wrap:focus-within { border-color:rgba(72,128,120,.5); }
.rpe2-tag {
  display:inline-flex; align-items:center; gap:4px;
  background:rgba(72,128,120,.25); border:1px solid rgba(72,128,120,.45);
  color:#7ecfca; border-radius:5px; padding:2px 7px;
  font-size:.75rem; font-weight:600; white-space:nowrap;
}
.rpe2-tag-del {
  background:none; border:none; color:rgba(126,207,202,.6);
  cursor:pointer; padding:0 0 0 2px; line-height:1;
  font-size:.9rem; font-family:inherit;
}
.rpe2-tag-del:hover { color:#ff6b6b; }
.rpe2-tag-inp {
  flex:1; min-width:80px; background:transparent; border:none; outline:none;
  color:rgba(255,255,255,.85); font-family:inherit; font-size:.85rem; padding:0;
}
.rpe2-tag-inp::placeholder { color:rgba(255,255,255,.25); }

/* ── BODY ────────────────────────────────────────────────────────────────── */
.rpe2-body { display:flex; flex:1; min-height:0; overflow:hidden; }

/* ── LEFT NAV (thumbnail strip) ─────────────────────────────────────────── */
.rpe2-nav {
  width:180px; flex-shrink:0; background:#161a1d;
  border-right:1px solid rgba(255,255,255,.07);
  display:flex; flex-direction:column; overflow:hidden;
  transition:width .2s; 
}
.rpe2-nav.hidden { width:0; }
.rpe2-nav-title {
  padding:10px 12px 6px; font-size:.64rem; font-weight:700;
  color:rgba(255,255,255,.3); text-transform:uppercase; letter-spacing:.06em;
}
.rpe2-nav-list { flex:1; overflow-y:auto; padding:4px 8px 60px; }
.rpe2-nav-item {
  display:flex; gap:8px; align-items:center; padding:6px 7px;
  border-radius:7px; cursor:pointer; margin-bottom:4px;
  border:1px solid transparent; transition:all .1s;
}
.rpe2-nav-item:hover { background:rgba(255,255,255,.05); }
.rpe2-nav-item.act { background:rgba(72,128,120,.15); border-color:rgba(72,128,120,.4); }
.rpe2-nav-thumb {
  width:40px; height:40px; border-radius:5px; flex-shrink:0;
  background:rgba(255,255,255,.08); overflow:hidden; display:flex;
  align-items:center; justify-content:center;
}
.rpe2-nav-thumb img { width:100%; height:100%; object-fit:cover; }
.rpe2-nav-thumb i { color:rgba(255,255,255,.25); font-size:.85rem; }
.rpe2-nav-label { flex:1; min-width:0; }
.rpe2-nav-num { font-size:.62rem; color:rgba(255,255,255,.35); }
.rpe2-nav-txt { font-size:.7rem; color:rgba(255,255,255,.55); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rpe2-nav-add {
  padding:8px; border-top:1px solid rgba(255,255,255,.07); flex-shrink:0;
}
.rpe2-nav-add-btn {
  width:100%; padding:7px; border-radius:6px; font-family:inherit; font-size:.75rem;
  border:1.5px dashed rgba(255,255,255,.15); background:transparent;
  color:rgba(255,255,255,.4); cursor:pointer; display:flex; align-items:center;
  justify-content:center; gap:5px; transition:all .12s; margin-bottom:4px;
}
.rpe2-nav-add-btn:last-child { margin-bottom:0; }
.rpe2-nav-add-btn:hover { border-color:#488078; color:#488078; background:rgba(72,128,120,.06); }

/* ── DOCUMENT CANVAS ─────────────────────────────────────────────────────── */
.rpe2-canvas {
  flex:1; overflow-y:auto; background:#2a2e32;
  display:flex; flex-direction:column; align-items:center;
  padding:36px 24px; gap:0;
}

/* A4-Dokument */
.rpe2-doc {
  width:100%; max-width:760px; min-height:800px;
  background:#fff; border-radius:2px;
  box-shadow:0 2px 30px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.2);
  position:relative; display:flex; flex-direction:column;
}

/* Dokument-Header */
.rpe2-doc-hdr {
  padding:30px 44px 22px; border-bottom:3px solid #488078;
  background:linear-gradient(160deg,#f4faf8 0%,#fff 60%);
  flex-shrink:0;
}
.rpe2-doc-hdr-type {
  font-size:.68rem; font-weight:700; color:#488078; text-transform:uppercase;
  letter-spacing:.08em; margin-bottom:6px;
}
.rpe2-doc-hdr-title {
  font-size:1.45rem; font-weight:800; color:#1a2926; line-height:1.2; margin-bottom:16px;
  font-family:inherit;
}
.rpe2-doc-meta {
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px 20px;
}
@media(max-width:600px){.rpe2-doc-meta{grid-template-columns:repeat(2,1fr);}}
.rpe2-meta-item {}
.rpe2-meta-key {
  font-size:.62rem; font-weight:700; color:#7aada8; text-transform:uppercase;
  letter-spacing:.05em; margin-bottom:2px;
}
.rpe2-meta-val {
  font-size:.85rem; font-weight:500; color:#1a2926;
  min-height:18px; padding:2px 0;
  border-bottom:1px solid transparent;
  outline:none; transition:border-color .12s;
  display:block;
}
.rpe2-meta-val[contenteditable=true]:hover { border-color:rgba(72,128,120,.3); }
.rpe2-meta-val[contenteditable=true]:focus { border-color:#488078; }
.rpe2-meta-val:empty::before {
  content:attr(data-ph); color:#ccc; pointer-events:none;
}

/* ── DRAG-DROP ZONE INDICATOR ────────────────────────────────────────────── */
.rpe2-drop-overlay {
  position:absolute; inset:0; z-index:20; pointer-events:none;
  background:rgba(72,128,120,.1); border:2px dashed #488078;
  border-radius:2px; display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .15s;
}
.rpe2-drop-overlay.active { opacity:1; pointer-events:none; }
.rpe2-drop-pill {
  background:#488078; color:#fff; padding:14px 28px; border-radius:12px;
  font-size:1rem; font-weight:600; display:flex; align-items:center; gap:10px;
  box-shadow:0 8px 32px rgba(72,128,120,.5);
}

/* ── ROWS ─────────────────────────────────────────────────────────────────── */
.rpe2-rows { flex:1; }
.rpe2-row {
  display:flex; position:relative; border-bottom:1px solid #edf1f3;
  transition:background .1s; group-type:row;
}
.rpe2-row:last-child { border-bottom:none; }
.rpe2-row.act { background:rgba(72,128,120,.04); }
.rpe2-row.drag-over-top { border-top:2px solid #488078; }
.rpe2-row.drag-over-bot { border-bottom:2px solid #488078; }
.rpe2-row.fullwidth .rpe2-row-img { display:none; }
.rpe2-row.fullwidth .rpe2-row-txt { padding:18px 44px; }

/* Drag handle */
.rpe2-row-handle {
  width:22px; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:2.5px; cursor:grab; opacity:0;
  transition:opacity .15s; flex-shrink:0; padding:0 4px;
}
.rpe2-row:hover .rpe2-row-handle { opacity:1; }
.rpe2-row-handle:active { cursor:grabbing; }
.rpe2-row-handle span {
  display:block; width:3px; height:3px; border-radius:50%;
  background:#b0bcc4;
}

/* Bild-Zelle */
.rpe2-row-img {
  flex:0 0 42%; min-width:160px; position:relative;
  background:#f0f3f2; cursor:pointer; overflow:hidden;
  border-right:1px solid #edf1f3; min-height:200px;
  display:flex; align-items:center; justify-content:center;
  transition:background .12s;
}
.rpe2-row-img:hover { background:#e8efed; }
/* contain = ganzes Bild sichtbar, kein Zuschneiden, kein Verzerren */
.rpe2-row-img img {
  width:100%; height:auto; object-fit:contain; display:block;
  max-height:420px; transition:opacity .15s;
}
/* Bildgröße-Badge */
.rpe2-img-dims {
  position:absolute; top:6px; right:6px;
  background:rgba(0,0,0,.52); color:rgba(255,255,255,.85);
  font-size:.58rem; padding:2px 6px; border-radius:8px;
  pointer-events:none; letter-spacing:.02em; font-variant-numeric:tabular-nums;
}
.rpe2-row-img-ph {
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:32px 20px; text-align:center; color:#b8c8c4; min-height:200px;
  width:100%;
}
.rpe2-row-img-ph i { font-size:2.2rem; opacity:.45; }
.rpe2-row-img-ph span { font-size:.78rem; line-height:1.4; }
/* Hover actions on image */
.rpe2-row-img-actions {
  position:absolute; inset:0; background:rgba(0,0,0,0);
  display:flex; align-items:center; justify-content:center; gap:8px;
  transition:background .15s; opacity:0;
}
.rpe2-row-img:hover .rpe2-row-img-actions { opacity:1; background:rgba(0,0,0,.4); }
.rpe2-img-act-btn {
  padding:7px 13px; border-radius:6px; border:none;
  background:rgba(255,255,255,.92); color:#1a2926;
  font-size:.75rem; font-family:inherit; cursor:pointer; font-weight:500;
  display:flex; align-items:center; gap:5px; transition:background .1s;
}
.rpe2-img-act-btn:hover { background:#fff; }
/* Original/Bearbeitet-Toggle — aktiver Zustand visuell hervorgehoben */
.rpe2-toggle-orig.active { background:#488078; color:#fff; }
.rpe2-toggle-orig.active:hover { background:#3a6b64; }

/* ── ROW-HISTORY-KARTEN (im rpDialog gerendert) ─────────────────────── */
.rpe2-hist-card {
  background:#f8faf9; border:1px solid #edf1f3;
  border-radius:8px; padding:10px 12px;
  display:flex; flex-direction:column; gap:6px;
}
.rpe2-hist-card.current {
  background:rgba(72,128,120,.08); border-color:rgba(72,128,120,.32);
}
.rpe2-hist-hdr {
  display:flex; align-items:center; gap:10px;
  font-size:.74rem; color:#7b8c8a;
}
.rpe2-hist-tag {
  background:#488078; color:#fff;
  font-size:.62rem; font-weight:700; padding:2px 8px;
  border-radius:10px; letter-spacing:.04em;
}
.rpe2-hist-by { font-weight:600; color:#1a2926; }
.rpe2-hist-when { color:#a0b0ae; font-variant-numeric:tabular-nums; }
.rpe2-hist-restore {
  margin-left:auto;
  background:transparent; border:1px solid #c5d0d0; color:#1a2926;
  padding:4px 10px; border-radius:6px; cursor:pointer;
  font-size:.7rem; font-family:inherit; font-weight:600;
  display:inline-flex; align-items:center; gap:4px;
}
.rpe2-hist-restore:hover { background:#fff; border-color:#488078; color:#488078; }
.rpe2-hist-text {
  font-size:.84rem; line-height:1.5; color:#1a2926;
  white-space:pre-wrap; word-break:break-word;
}
.rpe2-edited-tag {
  position:absolute; bottom:8px; left:8px;
  background:rgba(72,128,120,.88); color:#fff;
  font-size:.62rem; padding:2px 7px; border-radius:10px; font-weight:600;
  pointer-events:none;
}
.rpe2-env-tag {
  position:absolute; top:8px; left:8px;
  background:rgba(26,41,38,.72); color:#fff;
  font-size:.62rem; padding:2px 7px; border-radius:10px; pointer-events:none;
}
.rpe2-row-num {
  position:absolute; bottom:8px; right:8px;
  background:rgba(0,0,0,.35); color:rgba(255,255,255,.75);
  font-size:.62rem; padding:2px 7px; border-radius:10px; pointer-events:none;
}

/* Text-Zelle */
.rpe2-row-txt {
  flex:1; padding:20px 28px; display:flex; flex-direction:column; gap:0;
  min-width:0;
}
.rpe2-row-txt-num {
  font-size:.62rem; font-weight:700; color:#488078; text-transform:uppercase;
  letter-spacing:.05em; margin-bottom:8px;
}
.rpe2-row-ta {
  flex:1; border:none; outline:none; resize:none;
  font-size:.88rem; line-height:1.7; color:#1a2926;
  background:transparent; font-family:inherit; min-height:110px;
  padding:0; width:100%;
}
.rpe2-row-ta::placeholder { color:#c5d0d0; }
.rpe2-row-ta:focus { /* no border - looks clean in doc */ }

/* Row delete */
.rpe2-row-del {
  position:absolute; top:8px; right:8px; width:24px; height:24px;
  border-radius:50%; border:none; background:rgba(200,72,72,0); color:transparent;
  cursor:pointer; font-size:.72rem; display:flex; align-items:center; justify-content:center;
  transition:all .12s; z-index:2;
}
.rpe2-row:hover .rpe2-row-del { background:rgba(200,72,72,.1); color:#c84848; }
.rpe2-row-del:hover { background:rgba(200,72,72,.22) !important; }

/* Between-rows add button */
.rpe2-row-insert {
  display:flex; align-items:center; justify-content:center;
  height:0; overflow:hidden; transition:height .15s; position:relative;
}
.rpe2-row-insert.open { height:36px; }
.rpe2-row-insert-btn {
  padding:5px 14px; border-radius:14px; border:1.5px dashed #c8dbd8;
  background:#fff; color:#7aada8; font-size:.72rem; font-family:inherit;
  cursor:pointer; display:flex; align-items:center; gap:5px;
  transition:all .12s; position:absolute;
}
.rpe2-row-insert-btn:hover { border-color:#488078; color:#488078; }

/* ── ZUSAMMENFASSUNG ─────────────────────────────────────────────────────── */
.rpe2-summary {
  padding:24px 44px 32px; border-top:2px solid #edf1f3;
  background:linear-gradient(to bottom,#fff,#f8faf9);
}
.rpe2-summary-lbl {
  font-size:.68rem; font-weight:700; color:#488078; text-transform:uppercase;
  letter-spacing:.06em; margin-bottom:8px; display:flex; align-items:center; gap:5px;
}
.rpe2-summary-ta {
  width:100%; border:1.5px solid #e4eeec; border-radius:8px; padding:12px 14px;
  font-size:.88rem; line-height:1.65; font-family:inherit; color:#1a2926;
  background:#fff; resize:vertical; outline:none; min-height:80px;
  transition:border-color .15s, box-shadow .15s;
}
.rpe2-summary-ta:focus { border-color:#488078; box-shadow:0 0 0 3px rgba(72,128,120,.12); }

/* ── RIGHT SIDEBAR ───────────────────────────────────────────────────────── */
.rpe2-side {
  width:252px; flex-shrink:0; background:#1a1e22;
  border-left:1px solid rgba(255,255,255,.07);
  display:flex; flex-direction:column; overflow-y:auto;
}
.rpe2-side-sect { border-bottom:1px solid rgba(255,255,255,.07); }
.rpe2-side-hdr {
  display:flex; align-items:center; gap:6px; padding:10px 14px 8px;
  font-size:.65rem; font-weight:700; color:rgba(255,255,255,.35);
  text-transform:uppercase; letter-spacing:.06em; cursor:pointer;
  user-select:none;
}
.rpe2-side-hdr i.icon { color:#488078; }
.rpe2-side-hdr i.tog { margin-left:auto; transition:transform .15s; font-size:.6rem; }
.rpe2-side-sect.collapsed .rpe2-side-hdr i.tog { transform:rotate(-90deg); }
.rpe2-side-body { padding:0 14px 12px; }
.rpe2-side-sect.collapsed .rpe2-side-body { display:none; }
.rpe2-field { margin-bottom:8px; }
.rpe2-field:last-child { margin-bottom:0; }
.rpe2-field-lbl { font-size:.62rem; font-weight:600; color:rgba(255,255,255,.38); text-transform:uppercase; letter-spacing:.04em; margin-bottom:3px; }
.rpe2-field-inp {
  width:100%; padding:6px 8px; border-radius:5px; font-size:.78rem; font-family:inherit;
  border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.8); outline:none; transition:all .12s;
}
.rpe2-field-inp:focus { border-color:#488078; background:rgba(72,128,120,.12); color:#fff; }
.rpe2-field-inp::placeholder { color:rgba(255,255,255,.2); }
.rpe2-tool-btn {
  width:100%; padding:8px 10px; border-radius:6px; font-family:inherit; font-size:.75rem;
  border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.7); cursor:pointer; display:flex; align-items:center;
  gap:7px; transition:all .12s; margin-bottom:5px; text-align:left;
}
.rpe2-tool-btn:hover { background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.2); }
.rpe2-tool-btn:last-child { margin-bottom:0; }
.rpe2-tool-btn i { color:#488078; width:14px; text-align:center; flex-shrink:0; }
.rpe2-ai-result {
  border:1px solid rgba(72,128,120,.3); border-radius:7px;
  overflow:hidden; margin-top:8px; display:none;
}
.rpe2-ai-result.show { display:block; }
.rpe2-ai-text {
  padding:8px 10px; font-size:.75rem; line-height:1.5;
  color:rgba(255,255,255,.7); background:rgba(72,128,120,.08);
  border-bottom:1px solid rgba(72,128,120,.2); white-space:pre-wrap;
}
.rpe2-ai-btns { display:flex; gap:4px; padding:6px; }
.rpe2-ai-acc { flex:1; padding:5px; border-radius:5px; border:none; background:#488078; color:#fff; font-family:inherit; font-size:.72rem; cursor:pointer; }
.rpe2-ai-rej { flex:1; padding:5px; border-radius:5px; border:none; background:rgba(255,255,255,.08); color:rgba(255,255,255,.6); font-family:inherit; font-size:.72rem; cursor:pointer; }

/* ── CANVAS ANNOTATE OVERLAY ─────────────────────────────────────────────── */
.rpe2-annotate {
  position:fixed; inset:0; z-index:2000; background:rgba(0,0,0,.9);
  display:flex; flex-direction:column; animation:rpe2-fadein .15s ease;
}
.rpe2-ann-tools {
  display:flex; align-items:center; gap:5px; padding:10px 14px;
  background:#111; border-bottom:1px solid rgba(255,255,255,.1); flex-shrink:0; flex-wrap:wrap;
}
.rpe2-ann-tool {
  width:34px; height:34px; border-radius:6px; border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.06); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:.8rem;
  transition:all .1s; flex-shrink:0;
}
.rpe2-ann-tool:hover { background:rgba(255,255,255,.16); }
.rpe2-ann-tool.act { background:#488078; border-color:#488078; }
/* Transform-Buttons (Drehen/Spiegeln) – etwas kleinere Schrift für Klarheit */
.rpe2-ann-tool[data-transform] { font-size:.7rem; }
.rpe2-ann-sep { width:1px; height:22px; background:rgba(255,255,255,.12); margin:0 3px; }
.rpe2-ann-color {
  width:18px; height:18px; border-radius:4px; cursor:pointer;
  border:2px solid transparent; transition:transform .1s,border-color .1s;
  flex-shrink:0; box-shadow:inset 0 0 0 1px rgba(0,0,0,.2);
}
.rpe2-ann-color:hover { transform:scale(1.2); }
.rpe2-ann-color.act { border-color:#fff; transform:scale(1.2); box-shadow:0 0 0 2px rgba(255,255,255,.3),inset 0 0 0 1px rgba(0,0,0,.2); }
.rpe2-ann-canvas-wrap {
  flex:1; display:flex; align-items:center; justify-content:center;
  padding:16px; overflow:hidden;
}
.rpe2-ann-canvas { max-width:100%; max-height:100%; cursor:crosshair; display:block; touch-action:none; }
.rpe2-ann-footer {
  display:flex; gap:8px; padding:10px 14px; background:#111;
  border-top:1px solid rgba(255,255,255,.1); flex-shrink:0; justify-content:flex-end;
}

/* ── SPEECH INDICATOR ────────────────────────────────────────────────────── */
.rpe2-speech-badge {
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  background:#c84848; color:#fff; padding:8px 18px; border-radius:18px;
  font-size:.82rem; z-index:3000; display:flex; align-items:center; gap:7px;
  box-shadow:0 4px 20px rgba(200,72,72,.45);
  animation:rpe2-pulse 1.2s ease-in-out infinite;
}
@keyframes rpe2-pulse {
  0%,100%{box-shadow:0 4px 20px rgba(200,72,72,.4)}
  50%{box-shadow:0 4px 28px rgba(200,72,72,.75)}
}

/* ── META EDIT BUTTON ────────────────────────────────────────────────────── */
.rpe2-meta-edit-btn {
  display:inline-flex; align-items:center; gap:5px; margin-top:12px;
  padding:5px 12px; border-radius:6px; border:1px solid rgba(72,128,120,.25);
  background:rgba(72,128,120,.06); color:#488078; font-family:inherit;
  font-size:.72rem; font-weight:600; cursor:pointer; transition:all .12s;
}
.rpe2-meta-edit-btn:hover { background:rgba(72,128,120,.14); border-color:#488078; }
.rpe2-meta-edit-btn i { font-size:.65rem; }

/* ── INSERT ZONE ─────────────────────────────────────────────────────────── */
.rpe2-insert-zone {
  position:relative; height:2px; margin:0; overflow:visible;
  display:flex; align-items:center; justify-content:center;
}
.rpe2-insert-trigger {
  display:none; align-items:center; gap:5px; cursor:pointer;
  padding:3px 12px; border-radius:12px; border:1.5px dashed #c8dbd8;
  background:#fff; color:#7aada8; font-size:.7rem; font-family:inherit;
  white-space:nowrap; box-shadow:0 2px 10px rgba(0,0,0,.1);
  transition:all .12s; z-index:6; position:absolute;
  user-select:none;
}
.rpe2-insert-trigger:hover { background:#488078; color:#fff; border-color:#488078; box-shadow:0 3px 14px rgba(72,128,120,.4); }
.rpe2-insert-trigger i { font-size:.62rem; }
.rpe2-insert-zone:hover .rpe2-insert-trigger { display:inline-flex; }
.rpe2-insert-menu {
  position:absolute; top:16px; left:50%; transform:translateX(-50%);
  background:#fff; border-radius:10px;
  box-shadow:0 6px 24px rgba(0,0,0,.16); border:1px solid #edf1f3;
  display:none; flex-direction:column; z-index:50; min-width:180px; overflow:hidden;
}
.rpe2-insert-menu.open { display:flex; }
.rpe2-insert-menu button {
  display:flex; align-items:center; gap:8px; padding:10px 15px; border:none;
  background:transparent; font-family:inherit; font-size:.8rem; color:#1a2926;
  cursor:pointer; text-align:left; transition:background .1s; width:100%;
}
.rpe2-insert-menu button:hover { background:#f4f8f7; color:#488078; }
.rpe2-insert-menu button i { color:#488078; width:14px; text-align:center; flex-shrink:0; }

/* Bottom add-row bar */
.rpe2-add-row-bar {
  display:flex; gap:10px; padding:20px 44px; justify-content:center;
}

/* ── META-MASKE ──────────────────────────────────────────────────────────── */
.rpe2-mask-overlay {
  position:fixed; inset:0; z-index:1400;
  background:rgba(10,16,18,.72); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  padding:16px; animation:rpe2-fadein .2s cubic-bezier(.4,0,.2,1);
}
.rpe2-mask-box {
  background:#fff; border-radius:18px; width:100%; max-width:560px;
  box-shadow:0 32px 100px rgba(0,0,0,.38); overflow:hidden;
  display:flex; flex-direction:column; max-height:calc(100vh - 32px);
}
.rpe2-mask-hdr {
  display:flex; align-items:center; gap:14px; padding:22px 28px 18px;
  background:linear-gradient(135deg,#1a2926 0%,#2d4f49 100%);
  color:#fff; flex-shrink:0;
}
.rpe2-mask-hdr-icon {
  width:42px; height:42px; border-radius:11px; background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.15);
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; color:#7ecfca; flex-shrink:0;
}
.rpe2-mask-hdr-sub {
  font-size:.65rem; color:rgba(255,255,255,.45);
  text-transform:uppercase; letter-spacing:.08em; margin-bottom:2px;
}
.rpe2-mask-hdr-title { font-size:1.05rem; font-weight:700; }
.rpe2-mask-body {
  flex:1; overflow-y:auto; padding:22px 28px;
  display:flex; flex-direction:column; gap:14px;
}
.rpe2-mask-field { display:flex; flex-direction:column; gap:5px; }
.rpe2-mask-field-lbl {
  font-size:.68rem; font-weight:700; color:#4a5a58;
  text-transform:uppercase; letter-spacing:.05em;
}
.rpe2-mask-inp {
  width:100%; padding:9px 12px; border:1.5px solid #d4e0de; border-radius:9px;
  font-family:inherit; font-size:.88rem; color:#1a2926; outline:none;
  transition:border-color .14s, box-shadow .14s; background:#fff;
  box-sizing:border-box;
}
.rpe2-mask-inp:focus {
  border-color:#488078; box-shadow:0 0 0 3px rgba(72,128,120,.14);
}
.rpe2-mask-inp::placeholder { color:#c5d0d0; }
.rpe2-mask-row2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
/* Variant selector */
.rpe2-mask-variants { display:flex; flex-direction:column; gap:8px; }
.rpe2-mask-variant-row { display:flex; gap:10px; }
.rpe2-mask-variant { flex:1; cursor:pointer; list-style:none; }
.rpe2-mask-variant input[type=radio] { display:none; }
.rpe2-mask-variant-card {
  border:2px solid #e0eae8; border-radius:12px; padding:12px 10px 10px;
  text-align:center; transition:all .15s; background:#f8faf9;
}
.rpe2-mask-variant-card.act {
  border-color:#488078; background:rgba(72,128,120,.06);
  box-shadow:0 0 0 3px rgba(72,128,120,.12);
}
.rpe2-mask-vp {
  height:44px; margin-bottom:8px; padding:3px; border-radius:4px; overflow:hidden;
  background:#edf2f1;
}
.rpe2-mask-vp.v1 {
  display:grid; grid-template-columns:2fr 3fr; grid-template-rows:1fr 1fr; gap:2px;
}
.v1-img { background:#b8d0cc; border-radius:2px; }
.v1-txt { background:#dceae8; border-radius:2px; }
.rpe2-mask-vp.v2 { display:flex; flex-direction:column; gap:2px; }
.v2-full { background:#dceae8; border-radius:2px; height:40%; }
.v2-row { display:grid; grid-template-columns:2fr 3fr; gap:2px; flex:1; }
.v2-img { background:#b8d0cc; border-radius:2px; }
.v2-txt { background:#dceae8; border-radius:2px; }
.rpe2-mask-variant-name { font-size:.72rem; font-weight:700; color:#2d4a44; }
.rpe2-mask-variant-card.act .rpe2-mask-variant-name { color:#488078; }
.rpe2-mask-variant-desc { font-size:.62rem; color:#9aada8; margin-top:2px; }
/* Footer */
.rpe2-mask-footer {
  display:flex; align-items:center; gap:8px;
  padding:14px 28px; border-top:1px solid #edf1f3;
  background:#f8faf9; flex-shrink:0;
}
.rpe2-mask-btn-sec {
  padding:9px 18px; border-radius:9px; border:1.5px solid #d4e0de;
  background:#fff; color:#4a5a58; font-family:inherit; font-size:.85rem;
  cursor:pointer; transition:all .12s;
}
.rpe2-mask-btn-sec:hover { background:#edf1f0; }
.rpe2-mask-btn-pri {
  margin-left:auto; padding:9px 22px; border-radius:9px; border:none;
  background:#488078; color:#fff; font-family:inherit; font-size:.85rem;
  font-weight:700; cursor:pointer; display:flex; align-items:center; gap:7px;
  transition:background .12s; box-shadow:0 2px 10px rgba(72,128,120,.3);
}
.rpe2-mask-btn-pri:hover { background:#3d6e66; }
.rpe2-mask-btn-pri i { font-size:.8rem; }

/* ── TABLET (769–1024px) ─────────────────────────────────────────────────── */
@media(min-width:769px) and (max-width:1024px){
  .rpe2-nav { width:148px; }
  .rpe2-side { width:220px; }
  .rpe2-canvas { padding:20px 16px; }
  .rpe2-doc { max-width:680px; }
  .rpe2-fmt-btn { min-width:30px; height:30px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE ACTION BAR (always rendered, only shown on mobile)
══════════════════════════════════════════════════════════════════════════ */
.rpe2-mob-bar {
  display:none;
  position:fixed; bottom:0; left:0; right:0;
  background:#161a1d; border-top:1px solid rgba(255,255,255,.1);
  padding:6px 10px;
  padding-bottom:calc(6px + env(safe-area-inset-bottom));
  gap:4px; z-index:1600; align-items:stretch;
}
@media(max-width:768px){ .rpe2-mob-bar { display:flex; } }
.rpe2-mob-btn {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; padding:7px 3px; border-radius:8px; border:none;
  background:rgba(255,255,255,.04); color:rgba(255,255,255,.5);
  font-family:inherit; font-size:.57rem; cursor:pointer;
  text-transform:uppercase; letter-spacing:.04em;
  min-height:46px; transition:background .1s,color .1s,transform .1s;
  -webkit-tap-highlight-color:transparent;
}
.rpe2-mob-btn i { font-size:.95rem; margin-bottom:0; }
.rpe2-mob-btn:active { background:rgba(255,255,255,.1); color:#fff; transform:scale(.94); }
.rpe2-mob-btn.primary {
  background:#488078; color:#fff; flex:1.6;
  box-shadow:0 2px 10px rgba(72,128,120,.35);
}
.rpe2-mob-btn.primary:active { background:#3d6e66; transform:scale(.96); }
.rpe2-mob-btn.active-state { color:#7ecfca; }

/* ══════════════════════════════════════════════════════════════════════════
   BOTTOM SHEET
══════════════════════════════════════════════════════════════════════════ */
.rpe2-sheet-bg {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.62); z-index:1700;
}
.rpe2-sheet-bg.open { display:block; animation:rpe2-fadein .15s ease; }
.rpe2-sheet {
  position:absolute; bottom:0; left:0; right:0;
  background:#1a1e22; border-radius:18px 18px 0 0;
  max-height:78vh; overflow:hidden; display:flex; flex-direction:column;
  transform:translateY(100%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  padding-bottom:env(safe-area-inset-bottom);
}
.rpe2-sheet-bg.open .rpe2-sheet { transform:translateY(0); }
.rpe2-sheet-pill {
  display:flex; justify-content:center; padding:10px 0 4px; flex-shrink:0; cursor:pointer;
}
.rpe2-sheet-pill-bar {
  width:36px; height:4px; border-radius:2px; background:rgba(255,255,255,.18);
}
.rpe2-sheet-hdr {
  display:flex; align-items:center; justify-content:space-between;
  padding:0 16px 10px; flex-shrink:0;
}
.rpe2-sheet-hdr-title {
  font-size:.72rem; font-weight:700; color:rgba(255,255,255,.4);
  text-transform:uppercase; letter-spacing:.07em;
}
.rpe2-sheet-close-btn {
  width:28px; height:28px; border-radius:50%; border:none;
  background:rgba(255,255,255,.08); color:rgba(255,255,255,.45);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size:.72rem; flex-shrink:0; -webkit-tap-highlight-color:transparent;
}
.rpe2-sheet-body {
  flex:1; overflow-y:auto; padding:4px 14px 16px;
  -webkit-overflow-scrolling:touch;
}

/* ── ADD ROW GRID (sheet) ────────────────────────────────────────────────── */
.rpe2-add-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:4px 0 10px;
}
.rpe2-add-grid-btn {
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:14px 8px 12px; border-radius:11px;
  border:1.5px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.03); color:rgba(255,255,255,.65);
  font-family:inherit; font-size:.64rem; cursor:pointer;
  transition:all .12s; text-align:center; line-height:1.35;
  -webkit-tap-highlight-color:transparent;
}
.rpe2-add-grid-btn i { font-size:1.2rem; color:#7ecfca; }
.rpe2-add-grid-btn:active { background:rgba(72,128,120,.2); border-color:rgba(72,128,120,.5); color:#fff; }

/* ── CONTEXT MENU (long-press) ───────────────────────────────────────────── */
.rpe2-ctx {
  position:fixed; background:#1e2124;
  border:1px solid rgba(255,255,255,.1); border-radius:12px;
  min-width:196px; z-index:2500; overflow:hidden;
  box-shadow:0 8px 40px rgba(0,0,0,.6);
  animation:rpe2-fadein .12s ease;
}
.rpe2-ctx-item {
  display:flex; align-items:center; gap:11px; width:100%;
  padding:13px 16px; border:none; background:transparent;
  color:rgba(255,255,255,.8); font-family:inherit; font-size:.86rem;
  cursor:pointer; text-align:left; transition:background .08s;
  -webkit-tap-highlight-color:transparent;
}
.rpe2-ctx-item:active { background:rgba(255,255,255,.07); }
.rpe2-ctx-item i { color:#7ecfca; width:16px; text-align:center; flex-shrink:0; }
.rpe2-ctx-item.danger { color:#ff5252; }
.rpe2-ctx-item.danger i { color:#ff5252; }
.rpe2-ctx-divider { height:1px; background:rgba(255,255,255,.07); margin:0; }

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE (≤768px)
══════════════════════════════════════════════════════════════════════════ */
@media(max-width:768px){
  /* Hide desktop-only panels */
  .rpe2-nav, .rpe2-side { display:none !important; }

  /* Top bar — compact */
  .rpe2-top { height:50px; padding:0 10px; gap:6px; }
  .rpe2-back-btn { padding:7px 9px; gap:4px; font-size:.75rem; }
  .rpe2-doc-title { font-size:.87rem; padding:4px 6px; }
  .rpe2-save-ind { font-size:.65rem; }
  /* Hide desktop action buttons from top bar */
  #rpe2-save-btn, #rpe2-submit-btn, #rpe2-approve-btn,
  .rpe2-top-sep, #rpe2-add-img-btn, #rpe2-add-file-btn,
  #rpe2-nav-tog, #rpe2-side-tog { display:none !important; }

  /* Format bar — horizontally scrollable strip mit Snap-Anker für saubere
     Mobile-Bedienung. Skoll-Indikator (kleine Pfeile am Rand) signalisiert
     mehr Inhalte. */
  .rpe2-fmt-bar {
    padding:5px 10px; gap:2px;
    overflow-x:auto; flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
    scroll-snap-type: x proximity;
    position:relative;
  }
  .rpe2-fmt-bar::-webkit-scrollbar { display:none; }
  .rpe2-fmt-btn { min-width:40px; height:40px; flex-shrink:0; scroll-snap-align: start; }
  .rpe2-fmt-group { flex-shrink:0; }
  .rpe2-fmt-sep { flex-shrink:0; }
  .rpe2-fmt-sel { flex-shrink:0; min-height:36px; }
}

/* Touch-Geräte (auch große Tablets): Format-Bar-Buttons immer ≥44px (Apple HIG / Material 48dp). */
@media (pointer: coarse) {
  .rpe2-fmt-btn { min-width:44px; min-height:44px; }
  .rpe2-fmt-sel { min-height:44px; }
  .rpe2-tool-btn { min-height:44px; }
  .rpe2-img-act-btn { min-height:44px; padding:10px 14px; }
  .rpe2-row-tool { min-width:44px; min-height:44px; }
  .rpe2-top-btn { min-height:44px; }
}

/* Sehr schmale Phones (<400px): noch kompakter, nur essential. */
@media (max-width: 399px) {
  .rpe2-fmt-bar { padding:4px 6px; }
  .rpe2-fmt-sel { font-size:.7rem; padding:4px 6px; }
  .rpe2-doc-hdr { padding:10px 12px; }
}

/* Fortsetzung 768px-Mobile-Block (durch obige Erweiterung getrennt; hier wieder vereint) */
@media (max-width: 768px) {
  /* Canvas + doc */
  .rpe2-canvas { padding:0; }
  .rpe2-doc { border-radius:0; box-shadow:none; }
  .rpe2-doc-hdr { padding:14px 16px 12px; }
  .rpe2-doc-meta { grid-template-columns:1fr 1fr; gap:8px 14px; }
  .rpe2-meta-val { font-size:.82rem; }

  /* Rows */
  .rpe2-row-img { flex:0 0 40%; min-width:110px; min-height:140px; }
  .rpe2-row-img img { min-height:140px; max-height:220px; }
  .rpe2-row-txt { padding:12px 14px; }
  .rpe2-row-ta { min-height:80px; font-size:.9rem; line-height:1.6; }
  .rpe2-row-txt-num { font-size:.6rem; margin-bottom:6px; }

  /* Drag handle — hidden on mobile (long-press replaces it) */
  .rpe2-row-handle { display:none !important; }

  /* Image actions — always visible on touch (not hover-only) */
  .rpe2-row-img-actions { opacity:1 !important; background:rgba(0,0,0,.22) !important; }
  .rpe2-img-act-btn { padding:8px 10px; font-size:.72rem; gap:4px; }

  /* Delete button — always visible */
  .rpe2-row-del {
    background:rgba(200,72,72,.12) !important;
    color:#c84848 !important; width:28px; height:28px;
  }

  /* Insert zone — always show trigger on mobile (handles both display:none and opacity:0 variants) */
  .rpe2-insert-zone .rpe2-insert-trigger { display:inline-flex !important; opacity:1 !important; }
  .rpe2-insert-trigger { font-size:.65rem; padding:3px 10px; }

  /* Summary + add bar — extra bottom padding for mobile action bar */
  .rpe2-summary { padding:20px 16px 92px; }
  .rpe2-add-row-bar { padding:14px 14px 92px; gap:6px; }
  .rpe2-add-row-bar button { padding:9px 12px; font-size:.73rem; }

  /* Header zone */
  .rpe2-hdr-logo-col { min-width:68px; max-width:86px; padding:8px 6px; }
  .rpe2-hdr-info-col { padding:8px 10px 8px 0; }
  .rpe2-hdr-doc-title { font-size:1rem; }
  .rpe2-hdr-subtitle { font-size:.58rem; }

  /* Multi-image: 3-col and gallery adapt to 2-col on small screens */
  .rpe2-row.three-images .rpe2-multi-img-body { grid-template-columns:1fr 1fr; }

  /* Meta mask */
  .rpe2-mask-row2 { grid-template-columns:1fr; }
  .rpe2-mask-box { border-radius:14px; max-height:94vh; }
  .rpe2-mask-hdr { padding:16px 20px 14px; }
  .rpe2-mask-body { padding:16px 20px; }
  .rpe2-mask-footer { padding:12px 20px; }

  /* Annotation overlay */
  .rpe2-ann-tools { flex-wrap:wrap; gap:4px; padding:8px; }
  .rpe2-ann-tool { width:38px; height:38px; }
  .rpe2-ann-color { width:22px; height:22px; }
  #rpe2-ann-lw { width:60px; }

  /* Speech badge — above mobile bar */
  .rpe2-speech-badge { bottom:68px; }

  /* Sidebar tabs visible area tweak if shown in sheet */
  .rpe2-side-tabs { padding:4px 4px 0; }
  .rpe2-side-tab { font-size:.58rem; padding:5px 2px 6px; }
  .rpe2-side-tab i { font-size:.8rem; }
}

/* ════════════════════════════════════════════════════════════════════════
   F13: ehemals inline aus _extraCss() im Editor-JS — hierher migriert.
   Header/Footer-Zonen, Multi-Image-Rows, Checklist, Table, Divider, Spacer,
   Sidebar-Tabs, Design-Panel, Format-Bar-Extras, Insert-Zone, Add-Row-Bar,
   Speech-Badge, Template-Panel, Upload-Spinner.
   ════════════════════════════════════════════════════════════════════════ */

/* Header zone */
.rpe2-hdr-zone { display:flex; align-items:stretch; min-height:86px; position:relative; overflow:hidden; flex-shrink:0; }
.rpe2-hdr-logo-col { display:flex; align-items:center; justify-content:center; padding:12px 16px; min-width:108px; max-width:170px; flex-shrink:0; cursor:pointer; transition:background .15s; }
.rpe2-hdr-logo-col:hover { background:rgba(0,0,0,.08); }
.rpe2-hdr-logo { max-width:130px; max-height:62px; object-fit:contain; display:block; }
.rpe2-hdr-logo-ph { width:96px; height:54px; border:2px dashed rgba(255,255,255,.28); border-radius:7px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; opacity:.5; transition:opacity .15s; }
.rpe2-hdr-logo-col:hover .rpe2-hdr-logo-ph { opacity:.9; }
.rpe2-hdr-logo-ph i { font-size:1.3rem; }
.rpe2-hdr-logo-ph span { font-size:.56rem; text-transform:uppercase; letter-spacing:.07em; }
.rpe2-hdr-info-col { flex:1; display:flex; flex-direction:column; justify-content:center; padding:12px 20px 12px 0; }
.rpe2-hdr-subtitle { font-size:.63rem; letter-spacing:.09em; text-transform:uppercase; opacity:.65; margin-bottom:3px; outline:none; border-radius:3px; padding:1px 0; }
.rpe2-hdr-subtitle[contenteditable=true]:hover,
.rpe2-hdr-subtitle[contenteditable=true]:focus { background:rgba(255,255,255,.1); padding:1px 4px; }
.rpe2-hdr-doc-title { font-size:1.18rem; font-weight:700; line-height:1.25; margin-bottom:3px; }
.rpe2-hdr-company { font-size:.75rem; opacity:.58; outline:none; border-radius:3px; padding:1px 0; }
.rpe2-hdr-company[contenteditable=true]:hover,
.rpe2-hdr-company[contenteditable=true]:focus { background:rgba(255,255,255,.1); padding:1px 4px; }

/* Footer zone */
.rpe2-ftr-zone { display:flex; align-items:center; gap:12px; min-height:32px; padding:7px 18px; flex-shrink:0; }
.rpe2-ftr-text { flex:1; font-size:.71rem; outline:none; border-radius:3px; padding:1px 0; }
.rpe2-ftr-text[contenteditable=true]:hover,
.rpe2-ftr-text[contenteditable=true]:focus { background:rgba(0,0,0,.06); padding:1px 4px; }
.rpe2-ftr-pagenum { font-size:.7rem; opacity:.45; white-space:nowrap; flex-shrink:0; }

/* Multi-image rows */
.rpe2-row.two-images, .rpe2-row.three-images, .rpe2-row.gallery-row { flex-direction:column; }
.rpe2-multi-img-body { display:grid; gap:1px; width:100%; background:#edf1f3; }
.rpe2-row.two-images .rpe2-multi-img-body { grid-template-columns:1fr 1fr; }
.rpe2-row.three-images .rpe2-multi-img-body { grid-template-columns:1fr 1fr 1fr; }
.rpe2-row.gallery-row .rpe2-multi-img-body { grid-template-columns:1fr 1fr; grid-template-rows:auto auto; }
.rpe2-img-slot { display:flex; flex-direction:column; background:#fff; position:relative; }
.rpe2-img-slot .rpe2-row-img { min-height:130px; border-right:none !important; width:100%; }
.rpe2-img-slot .rpe2-row-img img { max-height:220px; }
.rpe2-img-cap { font-size:.72rem; color:#666; padding:4px 10px 6px; outline:none; min-height:18px; background:#fff; border-top:1px solid #f0f2f3; }
.rpe2-img-cap[contenteditable=true]:hover { background:#f8f9fa; }
.rpe2-img-cap:empty::before { content:attr(data-ph); color:#ccc; pointer-events:none; }

/* Checklist */
.rpe2-row.checklist { flex-direction:column; }
.rpe2-ck-body { padding:14px 20px 14px 44px; width:100%; }
.rpe2-ck-list { display:flex; flex-direction:column; gap:4px; margin-bottom:8px; }
.rpe2-ck-item { display:flex; align-items:flex-start; gap:8px; padding:2px 0; }
.rpe2-ck-item input[type=checkbox] { margin-top:3px; width:15px; height:15px; accent-color:var(--rpe2-accent,#488078); flex-shrink:0; cursor:pointer; }
.rpe2-ck-text { flex:1; font-size:.86rem; color:#1a2926; outline:none; line-height:1.5; }
.rpe2-ck-text:empty::before { content:"Eintrag…"; color:#ccc; pointer-events:none; }
.rpe2-ck-del-btn { background:none; border:none; color:rgba(0,0,0,.18); cursor:pointer; padding:0 2px; font-size:.8rem; flex-shrink:0; line-height:1; }
.rpe2-ck-del-btn:hover { color:rgba(200,72,72,.8); }
.rpe2-ck-add-btn { display:flex; align-items:center; gap:5px; background:none; border:1.5px dashed #d0e0dd; color:#7aada8; border-radius:5px; padding:5px 12px; cursor:pointer; font-size:.75rem; font-family:inherit; width:auto; }
.rpe2-ck-add-btn:hover { border-color:var(--rpe2-accent,#488078); color:var(--rpe2-accent,#488078); }

/* Table */
.rpe2-row.table-row { flex-direction:column; }
.rpe2-tbl-body { padding:12px 14px 16px 44px; width:100%; }
.rpe2-tbl-lbl { font-size:.62rem; font-weight:700; color:var(--rpe2-accent,#488078); text-transform:uppercase; letter-spacing:.05em; margin-bottom:7px; }
.rpe2-tbl { width:100%; border-collapse:collapse; }
.rpe2-tbl td { border:1px solid #e8eef0; padding:6px 10px; font-size:.83rem; color:#1a2926; vertical-align:top; }
.rpe2-tbl td[contenteditable=true] { outline:none; cursor:text; }
.rpe2-tbl td[contenteditable=true]:hover { background:#f4faf9; }
.rpe2-tbl td[contenteditable=true]:focus { background:#f0f7f6; outline:none; }
.rpe2-tbl td.tbl-k { font-weight:600; width:36%; background:#f8faf9; color:#2a4a44; }
.rpe2-tbl td.tbl-k:empty::before,
.rpe2-tbl td.tbl-v:empty::before { content:attr(data-ph); color:#ccc; pointer-events:none; }
.rpe2-tbl-add-btn { display:flex; align-items:center; gap:5px; background:none; border:1.5px dashed #d0e0dd; color:#7aada8; border-radius:5px; padding:5px 12px; cursor:pointer; font-size:.75rem; font-family:inherit; margin-top:6px; }
.rpe2-tbl-add-btn:hover { border-color:var(--rpe2-accent,#488078); color:var(--rpe2-accent,#488078); }
.rpe2-tbl-row-del { background:none; border:none; color:rgba(0,0,0,.15); cursor:pointer; padding:2px 4px; font-size:.7rem; }
.rpe2-tbl-row-del:hover { color:rgba(200,72,72,.8); }

/* Divider */
.rpe2-row.divider { min-height:unset !important; flex-direction:row; padding:10px 18px; }
.rpe2-divider-body { display:flex; align-items:center; gap:10px; flex:1; }
.rpe2-divider-line { flex:1; height:1px; background:#dde6e4; }
.rpe2-divider-label { font-size:.72rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:#7aada8; outline:none; white-space:nowrap; padding:1px 0; }
.rpe2-divider-label[contenteditable=true]:hover { color:var(--rpe2-accent,#488078); }
.rpe2-divider-label:empty::before { content:"Abschnitt"; color:#ccc; pointer-events:none; }

/* Spacer */
.rpe2-row.spacer { min-height:unset !important; border:1px dashed rgba(0,0,0,.08) !important; background:transparent !important; cursor:ns-resize; display:flex; align-items:center; justify-content:center; }
.rpe2-spacer-label { font-size:.63rem; color:#bbb; user-select:none; pointer-events:none; }

/* Sidebar tabs */
.rpe2-side-tabs { display:flex; padding:6px 6px 0; gap:1px; flex-shrink:0; background:var(--rpe2-topbar,#161a1d); border-bottom:1px solid var(--rpe2-border,rgba(255,255,255,.07)); }
.rpe2-side-tab { flex:1; background:none; border:none; border-bottom:2px solid transparent; color:rgba(255,255,255,.32); padding:6px 2px 7px; cursor:pointer; font-size:.63rem; display:flex; flex-direction:column; align-items:center; gap:2px; transition:all .12s; }
.rpe2-side-tab i { font-size:.88rem; }
.rpe2-side-tab.act { color:#7ecfca; border-bottom-color:var(--rpe2-accent,#488078); }
.rpe2-side-tab:hover:not(.act) { color:rgba(255,255,255,.6); }
.rpe2-side-panels { flex:1; overflow-y:auto; padding:10px 12px; }
.rpe2-side-panel { display:none; }
.rpe2-side-panel.act { display:block; }

/* Design panel */
.rpe2-dsect { margin-bottom:14px; }
.rpe2-dsect-title { font-size:.6rem; letter-spacing:.09em; text-transform:uppercase; color:rgba(255,255,255,.28); margin-bottom:6px; padding-bottom:4px; border-bottom:1px solid rgba(255,255,255,.06); }
.rpe2-dfield { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.rpe2-dfield label { font-size:.72rem; color:rgba(255,255,255,.48); flex:1; min-width:0; cursor:pointer; }
.rpe2-dfield input[type=color] { width:28px; height:22px; border:1px solid rgba(255,255,255,.14); border-radius:4px; padding:1px 2px; background:none; cursor:pointer; flex-shrink:0; }
.rpe2-dfield select,
.rpe2-dfield input[type=text] { flex:1; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.11); border-radius:5px; color:#fff; font-size:.75rem; padding:4px 7px; outline:none; }
.rpe2-dfield select option { background:#1e2124; color:#fff; }
.rpe2-dfield input[type=checkbox] { accent-color:var(--rpe2-accent,#488078); width:13px; height:13px; cursor:pointer; }
.rpe2-logo-upload-slot { width:100%; height:52px; border:1.5px dashed rgba(255,255,255,.18); border-radius:6px; display:flex; align-items:center; justify-content:center; gap:7px; cursor:pointer; margin-bottom:6px; transition:.15s; overflow:hidden; }
.rpe2-logo-upload-slot:hover { border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.02); }
.rpe2-logo-upload-slot img { max-height:44px; max-width:120px; object-fit:contain; }
.rpe2-logo-upload-slot .rpe2-logo-ph { font-size:.72rem; color:rgba(255,255,255,.35); display:flex; align-items:center; gap:6px; }
.rpe2-bg-upload-slot { width:100%; height:42px; border:1.5px dashed rgba(255,255,255,.18); border-radius:6px; display:flex; align-items:center; justify-content:center; cursor:pointer; margin-bottom:5px; transition:.15s; overflow:hidden; position:relative; }
.rpe2-bg-upload-slot:hover { border-color:rgba(255,255,255,.4); }
.rpe2-bg-upload-slot img { width:100%; height:100%; object-fit:cover; }
.rpe2-bg-upload-slot .rpe2-bg-ph { font-size:.72rem; color:rgba(255,255,255,.35); display:flex; align-items:center; gap:6px; }
.rpe2-bg-clear-btn { position:absolute; top:3px; right:3px; background:rgba(0,0,0,.6); border:none; color:#fff; border-radius:3px; width:16px; height:16px; cursor:pointer; font-size:.6rem; display:flex; align-items:center; justify-content:center; z-index:1; }

/* Format bar extras */
.rpe2-fmt-sel { height:24px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); border-radius:4px; color:#fff; font-size:.72rem; padding:0 3px; cursor:pointer; }
.rpe2-fmt-sel option { background:#1e2124; }
.rpe2-fmt-color-wrap { display:flex; flex-direction:column; align-items:center; cursor:pointer; gap:0; padding:0 2px; }
.rpe2-fmt-color-wrap i { font-size:.75rem; color:rgba(255,255,255,.6); }
.rpe2-fmt-color-strip { height:3px; border-radius:1px; width:14px; margin-top:1px; }
.rpe2-fmt-color-wrap input[type=color] { opacity:0; width:1px; height:1px; position:absolute; pointer-events:none; }

/* Insert zone */
.rpe2-insert-zone { height:0; overflow:visible; position:relative; z-index:3; display:flex; align-items:center; justify-content:center; }
.rpe2-insert-trigger { width:22px; height:22px; border-radius:50%; background:var(--rpe2-accent,#488078); color:#fff; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:.75rem; opacity:0; transition:opacity .15s; box-shadow:0 2px 8px rgba(72,128,120,.4); }
.rpe2-insert-zone:hover .rpe2-insert-trigger,
.rpe2-insert-trigger:focus { opacity:1; }
.rpe2-insert-menu { position:absolute; top:16px; left:50%; transform:translateX(-50%); background:#fff; border:1px solid #dde6e4; border-radius:9px; box-shadow:0 6px 24px rgba(0,0,0,.18); padding:6px; display:none; z-index:10; min-width:200px; }
.rpe2-insert-menu.open { display:grid; grid-template-columns:1fr 1fr; gap:3px; }
.rpe2-insert-menu button { padding:7px 9px; border:none; border-radius:6px; background:transparent; color:#2a4a44; font-size:.73rem; font-family:inherit; cursor:pointer; display:flex; align-items:center; gap:5px; white-space:nowrap; }
.rpe2-insert-menu button:hover { background:#f0f7f5; color:var(--rpe2-accent,#488078); }
.rpe2-insert-menu button i { color:#7aada8; width:14px; text-align:center; }

/* Add row bar */
.rpe2-add-row-bar { padding:14px 44px 20px; display:flex; gap:8px; flex-wrap:wrap; }
.rpe2-add-row-bar button { padding:6px 13px; border:1.5px dashed #c8dbd8; background:#fff; color:#7aada8; border-radius:6px; font-size:.74rem; font-family:inherit; cursor:pointer; display:flex; align-items:center; gap:5px; transition:all .12s; }
.rpe2-add-row-bar button:hover { border-color:var(--rpe2-accent,#488078); color:var(--rpe2-accent,#488078); background:#f0f7f5; }

/* Speech badge */
.rpe2-speech-badge { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:rgba(26,38,36,.95); color:#fff; padding:9px 18px; border-radius:20px; font-size:.8rem; z-index:4000; display:flex; align-items:center; gap:8px; box-shadow:0 4px 20px rgba(0,0,0,.4); }

/* Template panel */
.rpe2-tpl-item { display:flex; align-items:center; gap:7px; padding:6px 8px; border-radius:6px; border:1px solid rgba(255,255,255,.08); margin-bottom:4px; cursor:pointer; transition:.12s; }
.rpe2-tpl-item:hover { background:rgba(255,255,255,.05); border-color:rgba(72,128,120,.4); }
.rpe2-tpl-item-name { flex:1; font-size:.75rem; color:rgba(255,255,255,.7); }
.rpe2-tpl-del { background:none; border:none; color:rgba(255,255,255,.2); cursor:pointer; padding:2px 4px; font-size:.72rem; }
.rpe2-tpl-del:hover { color:rgba(200,72,72,.8); }

/* Uploading spinner overlay on img slot */
.rpe2-img-uploading { position:relative; }
.rpe2-img-uploading::after { content:""; position:absolute; inset:0; background:rgba(255,255,255,.6); display:flex; align-items:center; justify-content:center; }
.rpe2-upload-spin { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.5); z-index:5; }
.rpe2-upload-spin i { font-size:1.5rem; color:var(--rpe2-accent,#488078); }