/* =========================================================
   MALERPLUS • PDF-VORSCHAU-EDITOR
   ========================================================= */
.mp-pdfed-ov{
  position:fixed; inset:0; z-index:10050;
  display:none; background:rgba(15,23,42,.55);
  -webkit-backdrop-filter:saturate(140%) blur(2px);
  backdrop-filter:saturate(140%) blur(2px);
}
.mp-pdfed-ov.is-open{ display:block; visibility:visible !important; }

.mp-pdfed-shell{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  background:#f1f5f9;
  --mp-pdfed-inspector-width:clamp(460px,42vw,640px);
}

/* Kopf */
.mp-pdfed-head{
  display:flex; align-items:center; gap:12px;
  padding:12px 18px;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid rgba(15,23,42,.08);
  box-shadow:0 2px 12px rgba(15,23,42,.04);
}
.mp-pdfed-title{
  font-weight:800; font-size:17px; color:#0f172a;
  letter-spacing:-.015em; display:flex; align-items:center; gap:8px;
}
.mp-pdfed-tabs{
  display:flex; gap:4px; margin-left:8px;
  background:rgba(15,23,42,.06); padding:4px; border-radius:12px;
}
.mp-pdfed-tab{
  border:0; background:transparent; cursor:pointer;
  padding:8px 16px; border-radius:9px; font-weight:700; font-size:13.5px; color:#475569;
  transition:all .15s ease;
}
.mp-pdfed-tab.is-active{
  background:#fff; color:#1278c8;
  box-shadow:0 1px 4px rgba(15,23,42,.12), 0 2px 8px rgba(18,120,200,.08);
}
.mp-pdfed-done{
  border:0; cursor:pointer;
  background:linear-gradient(135deg, #2bb0ff 0%, #1278c8 100%);
  color:#fff; font-weight:800; font-size:14.5px;
  padding:10px 22px; border-radius:12px;
  box-shadow:0 4px 14px rgba(43,176,255,.35), inset 0 1px 0 rgba(255,255,255,.25);
  display:inline-flex; align-items:center; gap:6px;
  transition:all .15s ease;
}
.mp-pdfed-done:hover{ filter:brightness(1.05); }
.mp-pdfed-done:active{ transform:translateY(1px); }

/* Kopf-Uploads (Logo/Briefpapier) — kompakt, modern */
.mp-pdfed-headuploads{ display:flex; align-items:center; gap:8px; margin-left:auto; flex-wrap:wrap; }
.mp-pdfed-headupload{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer; white-space:nowrap;
  background:#fff; color:#1e293b;
  border:1px solid rgba(15,23,42,.12); border-radius:10px;
  font-weight:700; font-size:13px; padding:8px 12px;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
  transition:all .15s ease;
}
.mp-pdfed-headupload:hover{ background:#f8fafc; border-color:rgba(43,176,255,.4); color:#1278c8; }
.mp-pdfed-headupload:active{ transform:translateY(1px); }
.mp-pdfed-headupload svg{ flex:none; stroke:currentColor; opacity:.9; }

/* Körper: Vorschau links, Panel rechts */
.mp-pdfed-body{ flex:1; display:flex; min-height:0; position:relative; }
.mp-pdfed-stage{
  flex:1; min-width:0; position:relative;
  display:flex; align-items:center; justify-content:center;
  padding:24px; overflow:hidden;
}
.mp-pdfed-scale{ transform-origin:center center; }

/* Hilfslinien im A4 (skalieren mit dem Dokument mit) */
.mp-pdfed-guides{ position:absolute; inset:0; pointer-events:none; z-index:6; }
.mp-pdfed-gline{ position:absolute; left:0; right:0; height:0; border-top:2px dashed #2bb0ff; }
.mp-pdfed-gline span{
  position:absolute; left:6mm; top:-8mm;
  font-size:3.4mm; font-weight:800; color:#0284c7; white-space:nowrap;
  background:rgba(255,255,255,.88); padding:0.5mm 2mm; border-radius:2mm;
  box-shadow:0 1px 4px rgba(15,23,42,.15);
}
.mp-pdfed-gzone{
  position:absolute; left:0; right:0; display:none;
  background:repeating-linear-gradient(135deg, rgba(255,138,61,.13) 0 5mm, rgba(255,138,61,.06) 5mm 10mm);
  border-top:2px dashed #ff8a3d; border-bottom:2px dashed #ff8a3d;
}
.mp-pdfed-gzone span{
  position:absolute; left:6mm; top:1.5mm;
  font-size:3.4mm; font-weight:800; color:#c2410c; white-space:nowrap;
  background:rgba(255,255,255,.88); padding:0.5mm 2mm; border-radius:2mm;
  box-shadow:0 1px 4px rgba(15,23,42,.15);
}
.mp-g-footer.is-footer-disabled{
  background:repeating-linear-gradient(135deg, rgba(245,158,11,.13) 0 5mm, rgba(245,158,11,.06) 5mm 10mm) !important;
  border-top:2px dashed #f59e0b !important;
  border-bottom:2px dashed #f59e0b !important;
}
.mp-g-footer.is-footer-disabled span{
  color:#b45309 !important;
  border:1px solid rgba(245,158,11,.35) !important;
  background:rgba(255,255,255,.95) !important;
}
html.dark .mp-g-footer.is-footer-disabled{
  background:repeating-linear-gradient(135deg, rgba(245,158,11,.18) 0 5mm, rgba(245,158,11,.08) 5mm 10mm) !important;
  border-top-color:#f59e0b !important;
  border-bottom-color:#f59e0b !important;
}
html.dark .mp-g-footer.is-footer-disabled span{
  color:#fde68a !important;
  background:rgba(15,23,42,.95) !important;
  border-color:rgba(245,158,11,.45) !important;
}

/* DIN 5008 Anschriftfeld (Brieffenster) */
.mp-pdfed-gbox{ position:absolute; display:none; }
.mp-g-din{
  left:20mm; top:45mm; width:85mm; height:40mm;
  border:2px dashed #7c3aed; background:rgba(124,58,237,.06); border-radius:1mm;
}
.mp-g-din span{
  position:absolute; left:0; top:-8mm;
  font-size:3.2mm; font-weight:800; color:#6d28d9; white-space:nowrap;
  background:rgba(255,255,255,.88); padding:0.5mm 2mm; border-radius:2mm;
  box-shadow:0 1px 4px rgba(15,23,42,.15);
}
/* Logo in der Vorschau ziehbar */
.mp-pdf-logo.mp-pdfed-logo-drag{
  pointer-events:auto !important; cursor:grab;
  outline:1.5px dashed rgba(43,176,255,.7); outline-offset:2px;
}

/* =========================================================
   ECHTE RENDERER-VORSCHAU (1:1-iframe)
   Der Editor rendert das reale PDF-HTML (returnRootOnly) in ein
   same-origin iframe und skaliert es per transform in die Bühne.
   ========================================================= */
.mp-pdfed-rscroll{
  position:absolute; inset:0; overflow:auto; -webkit-overflow-scrolling:touch;
  padding:20px; text-align:center;
}
.mp-pdfed-rbox{
  position:relative; margin:0 auto; overflow:hidden; text-align:left;
  background:#fff; box-shadow:0 4px 28px rgba(15,23,42,.20); border-radius:2px;
}
.mp-pdfed-riframe{
  position:absolute; top:0; left:0; width:794px; border:0; background:#fff;
  transform-origin:top left;
}
/* Hilfslinien-Overlay über dem iframe (per JS in Box-Pixel positioniert). */
.mp-pdfed-rguides{ position:absolute; inset:0; pointer-events:none; z-index:6; }
/* Label-Schrift/-Abstände fix in px (Overlay skaliert nicht per CSS mit). */
.mp-pdfed-rguides .mp-pdfed-gline span,
.mp-pdfed-rguides .mp-pdfed-gzone span,
.mp-pdfed-rguides .mp-g-din span{
  font-size:11px; left:6px;
  padding:1px 6px; border-radius:5px;
}
.mp-pdfed-rguides .mp-pdfed-gline span{ top:-19px; }
.mp-pdfed-rguides .mp-pdfed-gzone span{ top:3px; }
.mp-pdfed-rguides .mp-g-din{ border-radius:2px; }
.mp-pdfed-rguides .mp-g-din span{ top:-19px; left:0; }
.mp-pdfed-rloading{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#64748b; font-weight:700; font-size:14px; text-align:center; padding:24px;
}

/* =========================================================
   SELBSTTRAGENDE A4-VORSCHAU
   Der Editor darf NICHT davon abhängen, welche App-CSS gerade
   geladen ist (Tablet: Logo/Briefpapier unsichtbar, Regler ohne
   sichtbare Wirkung). Basis-Geometrie + Branding-Ebenen hier fest.
   ========================================================= */
.mp-pdfed-scale .mp-pdfed-a4-wrapper{ position:relative; }
.mp-pdfed-scale .a4-doc{
  position:relative; width:210mm; min-height:297mm;
  background:#fff; color:#111827; overflow:hidden;
  box-shadow:0 4px 28px rgba(15,23,42,.20); border-radius:2px;
  font-family:"Inter",Arial,Helvetica,sans-serif; font-size:13px; line-height:1.5;
}
/* Kopf-/Fußschnitt aus den Reglern WIRKLICH konsumieren */
.mp-pdfed-scale .a4-doc .a4-body{
  position:relative; z-index:1; box-sizing:border-box;
  padding:var(--a4-header-cut, 35mm) var(--mp-margin-right, var(--mp-margin-side, 12mm)) var(--a4-footer-cut, 60mm) var(--mp-margin-left, var(--mp-margin-side, 12mm));
}
/* Branding-Ebenen garantiert sichtbar/positioniert */
.mp-pdfed-scale .a4-doc .mp-pdf-briefpapier{
  position:absolute; inset:0; z-index:0; width:100%; height:100%;
  object-fit:cover; pointer-events:none;
}
.mp-pdfed-scale .a4-doc .mp-pdf-logo{
  position:absolute; top:15mm; right:20mm; z-index:2;
  max-width:80mm; max-height:28mm; object-fit:contain;
}
/* Tabellen-/Summen-Basis (falls App-CSS fehlt) */
.mp-pdfed-scale .doc-table{ width:100%; border-collapse:collapse; margin-top:12px; font-size:0.9rem; }
.mp-pdfed-scale .doc-table thead th{
  text-align:left; padding:8px 10px; font-size:10px; font-weight:600;
  text-transform:uppercase; letter-spacing:.05em;
  border-bottom:1px solid rgba(15,23,42,0.08);
}
.mp-pdfed-scale .doc-table td{ padding:7px 10px; border-bottom:1px solid rgba(0,0,0,0.08); vertical-align:top; }
.mp-pdfed-scale .doc-table .right, .mp-pdfed-scale .doc-table th.right{ text-align:right; }
.mp-pdfed-scale .summary-totals{
  margin-top:28px; margin-left:auto; max-width:440px; padding:18px 20px 20px;
  background:transparent !important;
  background-color:transparent !important; border:1px solid rgba(15,23,42,0.08); border-radius:12px;
  display:flex; flex-direction:column; gap:8px; font-size:12.5px; font-weight:600;
}
.mp-pdfed-scale .summary-row{ display:grid; grid-template-columns:1fr max-content; column-gap:16px; }
.mp-pdfed-scale .summary-row-strong{ margin-top:6px; padding-top:8px; border-top:1px dashed rgba(0,0,0,0.2); }
.mp-pdfed-scale .doc-header{ display:flex; justify-content:space-between; gap:16px; margin-bottom:14px; color:#475569; font-size:12px; }

/* Theme-Vorschau im Editor: dieselben var()-Regeln wie die PDF-Engine
   (Fallbacks = heutige Werte), gescoped auf die Editor-Vorschau. */
.mp-pdfed-scale .a4-doc h2{ color:var(--mp-pdf-accent, #111827); }
.mp-pdfed-scale .doc-table thead th{ color:var(--mp-pdf-th-color, #94a3b8); }
.mp-pdfed-scale .doc-table tbody tr:nth-child(even) td{ background:var(--mp-pdf-row-alt, transparent); }
.mp-pdfed-scale .summary-row-strong span:last-child{ color:var(--mp-pdf-strong-color, #111827); }

/* Farbwähler */
.mp-pdfed-ov input[type=color]{
  flex:1; min-height:44px; padding:4px; cursor:pointer;
  border:1px solid rgba(15,23,42,.14); border-radius:11px; background:#fff;
}
.mp-pdfed-tip{ font-size:12px; color:#94a3b8; margin:6px 0 0; }

/* Panel */
.mp-pdfed-panel{
  width:var(--mp-pdfed-inspector-width); max-width:46vw; flex-shrink:0;
  box-sizing:border-box;
  background:#fff; border-left:1px solid rgba(15,23,42,.10);
  padding:18px; overflow-y:auto;
}
.mp-pdfed-group{ margin-bottom:22px; }
.mp-pdfed-gtitle{ font-weight:800; font-size:13px; letter-spacing:.02em;
  text-transform:uppercase; color:#64748b; margin-bottom:10px; }

.mp-pdfed-seg{ display:flex; gap:6px; background:rgba(15,23,42,.06);
  padding:4px; border-radius:12px; margin-bottom:14px; }
.mp-pdfed-seg button{
  flex:1; border:0; background:transparent; cursor:pointer;
  padding:10px 8px; border-radius:9px; font-weight:700; font-size:14px; color:#475569;
}
.mp-pdfed-seg button.is-active{ background:#fff; color:#2bb0ff; box-shadow:0 1px 4px rgba(15,23,42,.12); }

.mp-pdfed-row{ display:flex; justify-content:space-between; align-items:center;
  font-weight:600; font-size:14px; color:#0f172a; margin:12px 0 6px; }
.mp-pdfed-val{ font-weight:800; color:#2bb0ff; font-variant-numeric:tabular-nums; }

/* ══ SCHIEBEREGLER (31.07.2026) ═══════════════════════════════════════════
   Marcel: „Diese Schieberegler passen nicht zu meiner App."
   Vorher stand hier nur `accent-color` + Höhe — also der Systemregler des
   Browsers, der zusätzlich das Aussehen eines Eingabefelds erbte (Rahmen,
   Fläche, Radius aus den allgemeinen input-Regeln). Daher der Eindruck einer
   hellen Box mit einem blauen Punkt darin.

   Jetzt eigene Bahn und eigener Knopf. Die Füllung links vom Knopf kann CSS
   in WebKit nicht allein — den Prozentwert liefert core/mp-range-fill.js als
   `--mp-pct`, hier wird daraus ein Verlauf mit hartem Farbwechsel.

   Runder Knopf ist hier bewusst richtig und kein Verstoß gegen „keine Pillen":
   Die Regel gilt für Knöpfe und Kacheln. Ein Reglergriff ist ein Griff — eckig
   wirkt er wie ein Schieber, den man nicht anfassen kann. */
.mp-pdfed-ov input[type=range]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:22px; margin:8px 0 4px; padding:0;
  background:transparent !important; border:0 !important; box-shadow:none !important;
  cursor:pointer;
  --mp-pct:0%;
}
.mp-pdfed-ov input[type=range]::-webkit-slider-runnable-track{
  height:6px; border-radius:6px; border:0;
  background:linear-gradient(90deg,
    #2bb0ff 0%, #2bb0ff var(--mp-pct),
    rgba(15,23,42,.10) var(--mp-pct), rgba(15,23,42,.10) 100%);
}
.mp-pdfed-ov input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:20px; height:20px; margin-top:-7px; border-radius:50%;
  background:linear-gradient(180deg,#35b6ff,#1f9eef);
  border:2px solid #fff;
  box-shadow:0 1px 2px rgba(15,23,42,.20), 0 4px 10px -3px rgba(31,158,239,.55);
  transition:transform .12s ease, box-shadow .18s ease;
}
.mp-pdfed-ov input[type=range]:active::-webkit-slider-thumb{ transform:scale(1.12); }
/* Firefox kann die Füllung selbst — dort braucht es die Variable nicht. */
.mp-pdfed-ov input[type=range]::-moz-range-track{
  height:6px; border-radius:6px; border:0; background:rgba(15,23,42,.10);
}
.mp-pdfed-ov input[type=range]::-moz-range-progress{
  height:6px; border-radius:6px; background:#2bb0ff;
}
.mp-pdfed-ov input[type=range]::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%; border:2px solid #fff;
  background:linear-gradient(180deg,#35b6ff,#1f9eef);
  box-shadow:0 1px 2px rgba(15,23,42,.20), 0 4px 10px -3px rgba(31,158,239,.55);
}
.mp-pdfed-ov input[type=range]:focus-visible{ outline:2px solid #2bb0ff; outline-offset:3px; border-radius:6px; }
html.dark .mp-pdfed-ov input[type=range]::-webkit-slider-runnable-track{
  background:linear-gradient(90deg,
    #2bb0ff 0%, #2bb0ff var(--mp-pct),
    rgba(255,255,255,.14) var(--mp-pct), rgba(255,255,255,.14) 100%);
}
html.dark .mp-pdfed-ov input[type=range]::-webkit-slider-thumb{ border-color:#111827; }

.mp-pdfed-check{ display:flex; align-items:center; gap:10px;
  font-weight:600; font-size:14px; color:#0f172a; margin:12px 0; cursor:pointer; }
.mp-pdfed-check input{ width:20px; height:20px; accent-color:#2bb0ff; }

.mp-pdfed-btnrow{ display:flex; gap:8px; margin:8px 0; }
.mp-pdfed-upload{
  flex:1; text-align:center; cursor:pointer;
  background:#eef0f3; color:#111827; font-weight:700; font-size:14px;
  padding:11px 12px; border:1px solid rgba(15,23,42,.10); border-radius:11px;
}
.mp-pdfed-ghost{
  border:1px solid rgba(15,23,42,.12); background:#f1f3f5; cursor:pointer;
  color:#111827; font-weight:700; font-size:14px; padding:11px 16px; border-radius:11px;
}
.mp-pdfed-upload:hover,.mp-pdfed-ghost:hover{ background:#e5e8ec; }

/* Layout-Profile: Dropdown + Primär-Button (fügt sich in den Panel-Look ein) */
.mp-pdfed-ov .mp-pdfed-select{
  width:100%; box-sizing:border-box; margin:0 0 8px;
  border:1px solid rgba(15,23,42,.14); background:#fff; cursor:pointer;
  color:#0f172a; font-weight:700; font-size:14px; padding:11px 12px; border-radius:11px;
  min-height:44px; appearance:menulist;
}
.mp-pdfed-primary{
  width:100%; box-sizing:border-box; border:1px solid rgba(15,23,42,.12); cursor:pointer;
  background:#eef0f3; color:#111827;
  font-weight:800; font-size:14px; padding:12px 14px; border-radius:11px; margin:0 0 8px;
}
.mp-pdfed-primary:hover{ background:#e5e8ec; }
.mp-pdfed-primary:active{ transform:translateY(1px); }
.mp-pdfed-hint{ font-size:12.5px; color:#64748b; line-height:1.5;
  background:rgba(15,23,42,.04); padding:12px; border-radius:11px; }

/* =========================================================
   SETTINGS: VISUELLES PDF STUDIO & HERO SHOWCASE
   ========================================================= */
.mp-pdf-hero-card{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:20px 22px; margin:0 0 18px 0;
  background:linear-gradient(135deg, rgba(43,176,255,.07) 0%, rgba(18,120,200,.025) 100%);
  border:1px solid rgba(43,176,255,.24); border-radius:18px;
  box-shadow:0 4px 20px -6px rgba(43,176,255,.12);
}
.mp-pdf-hero-left{ display:flex; align-items:flex-start; gap:16px; flex:1 1 auto; min-width:0; }
.mp-pdf-hero-iconbox{
  flex:0 0 46px; width:46px; height:46px;
  display:grid; place-items:center; border-radius:14px;
  background:linear-gradient(135deg, #2bb0ff 0%, #1278c8 100%);
  color:#fff; box-shadow:0 6px 16px -4px rgba(43,176,255,.5);
}
.mp-pdf-hero-info{ flex:1 1 auto; min-width:0; }
.mp-pdf-hero-kicker{
  font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:#1278c8; margin-bottom:2px;
}
.mp-pdf-hero-title{
  margin:0 0 4px 0; font-size:18px; font-weight:800; color:#0f172a;
  letter-spacing:-.015em; line-height:1.25;
}
.mp-pdf-hero-desc{
  margin:0 0 10px 0; font-size:13px; color:#475569; line-height:1.5;
}
.mp-pdf-hero-badges{ display:flex; flex-wrap:wrap; gap:6px; }
.mp-pdf-hero-badge{
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 9px; border-radius:8px;
  background:#fff; border:1px solid rgba(15,23,42,.09);
  font-size:12px; font-weight:700; color:#334155;
  box-shadow:0 1px 3px rgba(15,23,42,.03);
}
.mp-pdf-hero-badge svg{ stroke:#1278c8; flex:none; }

.mp-pdf-hero-action{ flex:0 0 auto; }
#mpOpenPdfEditor.mp-btn-pdf-hero,
#mpOpenPdfEditor{
  display:inline-flex; align-items:center; gap:12px; cursor:pointer;
  border:0; background:linear-gradient(135deg, #2bb0ff 0%, #1278c8 100%);
  color:#fff; padding:12px 22px; border-radius:14px;
  box-shadow:0 6px 20px -2px rgba(43,176,255,.45), inset 0 1px 0 rgba(255,255,255,.3);
  transition:all .18s cubic-bezier(.16,1,.3,1);
  text-decoration:none;
}
#mpOpenPdfEditor.mp-btn-pdf-hero:hover,
#mpOpenPdfEditor:hover{
  filter:brightness(1.06); transform:translateY(-1px);
  box-shadow:0 8px 24px -2px rgba(43,176,255,.55), inset 0 1px 0 rgba(255,255,255,.4);
}
#mpOpenPdfEditor.mp-btn-pdf-hero:active,
#mpOpenPdfEditor:active{ transform:translateY(1px); }
.mp-btn-pdf-hero-icon{
  display:grid; place-items:center; width:34px; height:34px; border-radius:10px;
  background:rgba(255,255,255,.2); color:#fff; flex:none;
}
.mp-btn-pdf-hero-texts{ text-align:left; line-height:1.25; }
.mp-btn-pdf-hero-label{ font-size:15px; font-weight:800; letter-spacing:-.01em; display:block; }
.mp-btn-pdf-hero-sub{ font-size:11.5px; font-weight:600; opacity:.92; display:block; margin-top:2px; }

/* Briefpapier Service Kachel im MalerPlus Card Standard */
.mp-briefpapier-service-tile{
  border:1px solid rgba(15,23,42,.10); border-radius:14px;
  background:#fff; padding:16px 18px; margin:0 0 14px 0;
  box-shadow:0 1px 4px rgba(15,23,42,.03);
}
.mp-briefpapier-service-head{
  display:flex; align-items:center; gap:12px; margin-bottom:10px;
}
.mp-briefpapier-service-iconbox{
  width:36px; height:36px; flex:0 0 36px; display:grid; place-items:center;
  border-radius:10px; background:linear-gradient(135deg, #f59e0b, #d97706);
  color:#fff; box-shadow:0 3px 8px rgba(245,158,11,.3);
}
.mp-briefpapier-service-title-box{ flex:1 1 auto; min-width:0; }
.mp-briefpapier-service-title{ font-size:15px; font-weight:800; color:#0f172a; }
.mp-briefpapier-service-status{ font-size:12px; color:#64748b; margin-top:1px; }
.mp-briefpapier-service-foot{
  display:flex; justify-content:flex-end; gap:10px; margin-top:12px;
  padding-top:12px; border-top:1px solid rgba(15,23,42,.06);
}
.mp-pdf-options-title{
  font-size:14px; font-weight:800; color:#0f172a; margin:14px 0 6px 0;
}

@media (max-width:767px){
  .mp-pdf-hero-card{ flex-direction:column; align-items:stretch; gap:16px; padding:16px; }
  .mp-pdf-hero-action{ width:100%; }
  #mpOpenPdfEditor.mp-btn-pdf-hero,
  #mpOpenPdfEditor{ width:100%; justify-content:center; box-sizing:border-box; }
}

/* Nur auf echten schmalen Telefonen stapeln. Tablets behalten den
   Split-View, damit Einstellungen und PDF gleichzeitig sichtbar bleiben. */
@media (max-width:640px){
  .mp-pdfed-body{ flex-direction:column; }
  .mp-pdfed-stage{ flex:none; height:38dvh; padding:12px; box-sizing:border-box; }
  .mp-pdfed-panel{ width:auto; max-width:none; min-height:0; flex:1; border-left:0;
    border-top:1px solid rgba(15,23,42,.10); }
  .mp-pdfed-head{ flex-wrap:wrap; gap:8px; }
  .mp-pdfed-title{ font-size:16px; }
  .mp-pdfed-tabs{ order:3; width:100%; margin-left:0; }
  .mp-pdfed-tab{ flex:1; }
  .mp-pdfed-done{ padding:10px 18px; }
  .mp-pdfed-headupload{ font-size:12px; padding:8px 10px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   FENSTER „FUSSZEILEN-ANGABEN"   (2026-07-31)
   ═══════════════════════════════════════════════════════════════════════════
   Marcel: „Mach das mal zu einem Menü, wo sich dann schön ein Fenster öffnet,
   und alles schön übersichtlich ist mit der Eingabe."

   Vorher standen dreizehn Zeilen aus Beschriftung, Schalter und Eingabefeld
   untereinander in der schmalen Seitenspalte — ein Stapel, in dem man nichts
   wiederfindet. Hier hat jede Angabe ihre eigene Zeile mit Luft, und ab
   640px stehen zwei nebeneinander.

   Das Fenster ist ein Kind des Editor-Overlays (z-index 10050) und braucht
   deshalb keine eigene absurde Höhe — es erbt dessen Stapel. Ein MP_SHEET
   wäre hier unsichtbar, weil die Sheet-Engine auf z-index 2000 sitzt.
   Optik nach Haus-Standard: Radius 18, Haarlinie, zweilagiger Schatten.
   ═══════════════════════════════════════════════════════════════════════════ */
.mp-fslot-ov{
  position:absolute; inset:0; z-index:90;
  display:none; align-items:center; justify-content:center;
  padding:20px; background:rgba(11,15,25,.42);
}
.mp-fslot-ov.is-on{ display:flex; }

.mp-fslot-win{
  width:min(640px,100%); max-height:min(84vh,760px);
  display:flex; flex-direction:column;
  background:#fff; border:1px solid rgba(11,15,25,.08); border-radius:18px;
  box-shadow:0 2px 4px rgba(11,15,25,.05), 0 16px 48px rgba(11,15,25,.14);
  overflow:hidden;
}

/* ── Kopf ── */
.mp-fslot-head{
  display:flex; align-items:flex-start; gap:12px;
  padding:16px 18px 12px; border-bottom:1px solid rgba(11,15,25,.07);
}
.mp-fslot-chip{
  flex:0 0 38px; width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  border-radius:11px; color:#fff;
  background:linear-gradient(180deg,#2bb0ff,#1a86c9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34), 0 2px 4px -1px rgba(26,134,201,.42);
}
.mp-fslot-ht{ flex:1 1 auto; min-width:0; padding-top:2px; }
.mp-fslot-title{ font-size:16px; font-weight:800; letter-spacing:-.01em; color:#0f172a; }
.mp-fslot-sub{ margin-top:2px; font-size:12.5px; color:#64748b; }
.mp-fslot-x{
  flex:0 0 34px; width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(15,23,42,.10); background:#fff; border-radius:12px;
  color:#475569; cursor:pointer;
}
.mp-fslot-x:hover{ background:rgba(15,23,42,.04); }

/* ── Körper: eine Angabe je Zeile, ab 640px zwei nebeneinander ── */
.mp-fslot-body{ flex:1 1 auto; overflow:auto; padding:14px 18px 6px; }
.mp-fslot-body .mp-pdfed-fields{
  display:grid; grid-template-columns:1fr; gap:12px 16px;
}
@media (min-width:640px){
  .mp-fslot-body .mp-pdfed-fields{ grid-template-columns:1fr 1fr; }
}
.mp-fslot-body .mp-pdfed-field--schaltbar{
  display:grid; grid-template-columns:1fr auto; align-items:center;
  gap:6px 10px; margin:0; cursor:default;
}
.mp-fslot-body .mp-pdfed-field--schaltbar > span{
  font-size:12px; font-weight:700; letter-spacing:.01em; color:#475569;
}
.mp-fslot-body .mp-pdfed-field--schaltbar > input[type=text]{
  grid-column:1 / -1; width:100%; box-sizing:border-box;
  border:1px solid rgba(15,23,42,.14); border-radius:12px;
  padding:10px 12px; font-size:14px; color:#0f172a; background:#fff;
}
.mp-fslot-body .mp-pdfed-field--schaltbar > input[type=text]:focus-visible{
  outline:2px solid #2bb0ff; outline-offset:1px;
}
/* Abgeschaltet: sichtbar aus dem Weg, aber nicht gelöscht. */
.mp-fslot-body .mp-pdfed-field--schaltbar.is-aus > span{ opacity:.45; }
.mp-fslot-body .mp-pdfed-field--schaltbar.is-aus > input[type=text]{
  opacity:.45; background:rgba(15,23,42,.03); cursor:not-allowed;
}

/* ── Ankreuzfeld: der Haus-Stil, kein eigener ─────────────────────────────
   Hier stand zuerst ein Umschalter. Marcel am 31.07.: „Die riesen Schalter
   sind ja mega hässlich, mach meine grünen Checkboxen." Er hat recht — ein
   Umschalter ist doppelt so breit wie ein Haken und in einer Liste aus
   dreizehn Zeilen schlicht laut. Es ist ein einfaches Ja/Nein je Angabe.

   Wie ein Ankreuzfeld in dieser App aussieht, steht bereits in
   css/mp-safe-style-patch.css (22px, Radius 7, grüner Haken über den
   .mp-cbx-Wrapper). Deshalb hier KEIN eigener Stil, nur die Position:
   rechts neben der Beschriftung, in derselben Zeile. Den .mp-cbx-Wrapper
   setzt ein JS-Patch erst zur Laufzeit — darum sind beide Formen genannt. */
.mp-fslot-body .mp-pdfed-field--schaltbar > .mp-fslot-cb,
.mp-fslot-body .mp-pdfed-field--schaltbar > .mp-cbx{
  grid-column:2; grid-row:1; justify-self:end; margin:0;
}

/* ── Fuss: ein Markenblau-Knopf, rechts aussen ── */
.mp-fslot-foot{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 18px 14px; border-top:1px solid rgba(11,15,25,.07);
}
.mp-fslot-zaehler{ font-size:12.5px; color:#64748b; min-width:0; }
.mp-fslot-go{
  flex:0 0 auto; border:0; cursor:pointer; color:#fff;
  padding:10px 20px; border-radius:12px;
  font:800 14px/1 'Inter', system-ui, sans-serif;
  background:linear-gradient(135deg,#2bb0ff,#1f9eef);
  box-shadow:0 4px 12px -4px rgba(31,158,239,.6);
}
.mp-fslot-go:hover{ filter:brightness(1.04); }

/* ── Knopf im Editor, der das Fenster öffnet ── */
.mp-pdfed-fslot-open{
  display:inline-flex; align-items:center; gap:8px; width:auto;
}

/* ── Dunkelmodus ── */
html.dark .mp-fslot-win{ background:#0f172a; border-color:rgba(148,163,184,.18); }
html.dark .mp-fslot-head, html.dark .mp-fslot-foot{ border-color:rgba(148,163,184,.14); }
html.dark .mp-fslot-title{ color:#e2e8f0; }
html.dark .mp-fslot-sub, html.dark .mp-fslot-zaehler{ color:#94a3b8; }
html.dark .mp-fslot-x{ background:rgba(255,255,255,.04); border-color:rgba(148,163,184,.18); color:#cbd5e1; }
html.dark .mp-fslot-body .mp-pdfed-field--schaltbar > span{ color:#94a3b8; }
html.dark .mp-fslot-body .mp-pdfed-field--schaltbar > input[type=text]{
  background:rgba(15,23,42,.5); border-color:rgba(148,163,184,.22); color:#e2e8f0;
}
/* Für das Ankreuzfeld braucht es hier keine Dunkelmodus-Regel — die bringt
   der Haus-Stil in css/mp-safe-style-patch.css schon mit. */

/* ═══════════════════════════════════════════════════════════════════════════
   MENÜ-STRUKTUR: FÜNF AUFKLAPPBARE ABSCHNITTE   (2026-07-31)
   ═══════════════════════════════════════════════════════════════════════════
   Marcel: „Dieses ganze Menü mal ein bisschen aufräumen, klarer machen,
   übersichtlicher, strukturierter."

   Vorher zehn gleichrangige Kästen in einer langen Spalte — alles gleich
   laut, und bis zu den Folgeseiten scrollte man an sieben Kästen vorbei.
   Jetzt fünf Abschnitte, benannt nach dem, was man tun will. Immer nur einer
   offen. Die Kästen selbst sind unverändert; sie sind nur eingerückt und
   ihre Überschrift ist eine Stufe leiser geworden.
   ═══════════════════════════════════════════════════════════════════════════ */
.mp-pdfed-sec{
  border:1px solid rgba(15,23,42,.10);
  border-radius:12px;
  background:#fff;
  margin:0 0 8px;
  overflow:hidden;
}
.mp-pdfed-sec-kopf{
  width:100%; box-sizing:border-box;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 14px; border:0; background:transparent; cursor:pointer;
  font:800 13.5px/1.2 'Inter', system-ui, sans-serif; color:#0f172a;
  text-align:left; letter-spacing:-.005em;
}
.mp-pdfed-sec-kopf:hover{ background:rgba(15,23,42,.03); }
.mp-pdfed-sec-main{ display:flex; min-width:0; align-items:center; gap:11px; }
.mp-pdfed-sec-icon{
  display:grid; width:34px; height:34px; flex:0 0 34px; place-items:center;
  border-radius:10px; background:linear-gradient(145deg,#38bdf8,#148fd2);
  color:#fff; box-shadow:0 6px 14px -8px rgba(14,165,233,.72);
}
.mp-pdfed-sec-icon svg{ width:18px; height:18px; }
.mp-pdfed-sec-chev{
  display:inline-flex; color:#94a3b8;
  transform:rotate(-90deg);
  transition:transform .22s cubic-bezier(.16,1,.3,1);
}
.mp-pdfed-sec.is-dialog-open .mp-pdfed-sec-chev{ transform:rotate(-90deg) translateY(2px); }
.mp-pdfed-sec.is-dialog-open .mp-pdfed-sec-kopf{ color:#1278c8; background:#eef8ff; }

/* Zu = wirklich zu. `display:none` statt Höhen-Animation, weil in den
   Kästen Regler und ein iframe-gebundener Vorschau-Bezug stecken — eine
   Höhen-Animation über 200 Zeilen Inhalt ruckelt auf dem iPad sichtbar. */
.mp-pdfed-sec-body{ display:none; padding:0 12px 10px; }
.mp-pdfed-sec.is-offen .mp-pdfed-sec-body{ display:block; }

/* Die Kästen im Abschnitt: kein zweiter Rahmen, nur Abstand. */
.mp-pdfed-sec-body .mp-pdfed-group{
  border:0; background:transparent; padding:0; margin:10px 0 0;
}
.mp-pdfed-sec-body .mp-pdfed-group:first-child{ margin-top:2px; }
.mp-pdfed-gtitle.is-unterpunkt{
  font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:#94a3b8; margin-bottom:6px;
}
html.dark .mp-pdfed-sec{ background:rgba(255,255,255,.03); border-color:rgba(148,163,184,.16); }
html.dark .mp-pdfed-sec-kopf{ color:#e2e8f0; }
html.dark .mp-pdfed-sec-kopf:hover{ background:rgba(255,255,255,.04); }
html.dark .mp-pdfed-sec.is-dialog-open .mp-pdfed-sec-kopf{ color:#7dd3fc; }

/* Bereichs-Inspector: Vollintegriertes Einstellungsfenster mit Schnell-Navigation
   und sauber strukturierten, harmonischen Karten. */
.mp-pdfed-settings-ov{
  position:absolute; top:0; right:0; bottom:0; z-index:70; display:none;
  width:var(--mp-pdfed-inspector-width); max-width:52vw;
  align-items:stretch; justify-content:stretch;
  background:#f8fafc; border-left:1px solid rgba(15,23,42,.10);
  box-shadow:-8px 0 28px -12px rgba(15,23,42,.12);
}
.mp-pdfed-settings-ov.is-on{ display:flex; }
.mp-pdfed-settings-win{
  display:flex; flex-direction:column;
  width:100%; min-width:0; height:100%; max-height:none; overflow:hidden;
  border:0; border-radius:0; background:#f8fafc; box-shadow:none;
}
.mp-pdfed-settings-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 20px; border-bottom:1px solid rgba(15,23,42,.07); background:#fff;
  flex:none;
}
.mp-pdfed-settings-head-main{ display:flex; align-items:center; gap:12px; min-width:0; }
.mp-pdfed-settings-icon{
  display:grid; width:42px; height:42px; flex:0 0 42px; place-items:center;
  border-radius:12px; background:linear-gradient(145deg,#38bdf8,#148fd2);
  color:#fff; font-size:20px; font-weight:850; box-shadow:0 6px 16px -6px rgba(14,165,233,.6);
}
.mp-pdfed-settings-icon svg{ width:22px; height:22px; }
.mp-pdfed-settings-head h2{ margin:0; color:#0f172a; font-size:18px; font-weight:800; line-height:1.2; letter-spacing:-.015em; }
.mp-pdfed-settings-head p{ margin:2px 0 0; color:#64748b; font-size:12px; }
.mp-pdfed-settings-x{
  display:grid; width:36px; height:36px; flex:0 0 36px; padding:0; place-items:center;
  border:1px solid rgba(15,23,42,.08); border-radius:10px; background:#f8fafc;
  color:#64748b; cursor:pointer; font-size:20px; font-weight:400; transition:all .15s ease;
}
.mp-pdfed-settings-x:hover{ background:#f1f5f9; color:#0f172a; border-color:rgba(15,23,42,.15); }

/* Schnell-Navigation zwischen den 5 Kategorien */
.mp-pdfed-settings-nav{
  display:flex; align-items:center; gap:6px;
  padding:8px 16px; background:#fff;
  border-bottom:1px solid rgba(15,23,42,.07);
  overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  flex:none;
}
.mp-pdfed-settings-nav::-webkit-scrollbar{ display:none; }
.mp-pdfed-nav-pill{
  display:inline-flex; align-items:center; gap:6px; flex:0 0 auto;
  padding:7px 12px; border-radius:9px; border:1px solid transparent;
  background:#f1f5f9; color:#475569;
  font:700 12.5px/1.2 'Inter', system-ui, sans-serif;
  cursor:pointer; transition:all .15s ease; white-space:nowrap;
}
.mp-pdfed-nav-pill:hover{ background:#e2e8f0; color:#0f172a; }
.mp-pdfed-nav-pill.is-active{
  background:#2bb0ff; color:#fff; font-weight:800;
  box-shadow:0 2px 8px -2px rgba(43,176,255,.5);
}
.mp-pdfed-nav-icon{ display:inline-flex; align-items:center; justify-content:center; }
.mp-pdfed-nav-icon svg{ width:14px; height:14px; }
.mp-pdfed-nav-pill.is-active .mp-pdfed-nav-icon svg{ stroke:#fff; }

/* Körper: Saubere vertikale Karten mit einheitlichen Abständen */
.mp-pdfed-settings-body{
  flex:1 1 auto; min-height:0; padding:16px 20px;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.mp-pdfed-settings-body > .mp-pdfed-sec-body{
  display:flex !important; flex-direction:column !important;
  gap:16px !important; padding:0 !important; width:100% !important; box-sizing:border-box !important;
}

/* Jede Karte als harmonischer, ruhiger Container */
.mp-pdfed-settings-body .mp-pdfed-group{
  min-width:0; margin:0 !important; padding:18px 20px !important;
  border:1px solid rgba(15,23,42,.08) !important; border-radius:16px !important;
  background:#fff !important;
  box-shadow:0 1px 3px rgba(15,23,42,.03), 0 4px 12px -4px rgba(15,23,42,.05) !important;
  box-sizing:border-box !important;
}
.mp-pdfed-settings-body .mp-pdfed-gtitle.is-unterpunkt{
  display:block;
  margin:0 0 14px 0; color:#0f172a;
  font-size:12.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
}

/* Segment-Umschalter (z.B. links / mitte / rechts) */
.mp-pdfed-settings-body .mp-pdfed-seg{
  display:flex; gap:4px; background:#f1f5f9; padding:4px;
  border-radius:12px; margin-bottom:12px;
  border:1px solid rgba(15,23,42,.05);
}
.mp-pdfed-settings-body .mp-pdfed-seg button{
  flex:1 1 0; border:0; background:transparent; cursor:pointer;
  padding:8px 12px; border-radius:9px;
  font:700 13px/1.2 'Inter', system-ui, sans-serif; color:#64748b;
  transition:all .12s ease;
}
.mp-pdfed-settings-body .mp-pdfed-seg button:hover{ color:#0f172a; }
.mp-pdfed-settings-body .mp-pdfed-seg button.is-active{
  background:#fff !important; color:#0f172a !important; font-weight:800 !important;
  box-shadow:0 1px 3px rgba(15,23,42,.10), 0 2px 6px rgba(15,23,42,.05) !important;
}

/* Schieberegler-Kacheln mit großzügiger Laufbreite und klaren Stepper-Tasten */
.mp-pdfed-control-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:12px; margin:8px 0 14px;
}
.mp-pdfed-control-tile{
  display:flex; flex-direction:column; justify-content:space-between;
  min-width:0; padding:12px 14px;
  border:1px solid rgba(15,23,42,.08); border-radius:13px; background:#f8fafc;
  box-sizing:border-box;
}
.mp-pdfed-control-tile .mp-pdfed-row{
  display:flex; align-items:center; justify-content:space-between;
  margin:0 0 10px; gap:8px; font-size:13px; font-weight:700; color:#334155;
  line-height:1.2;
}
.mp-pdfed-control-tile .mp-pdfed-row > span:first-child{ min-width:0; overflow-wrap:anywhere; }
.mp-pdfed-control-tile .mp-pdfed-val{
  padding:3px 8px; border-radius:7px;
  background:#e0f2fe; color:#0284c7; font-size:12px; font-weight:800;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.mp-pdfed-range-control{
  display:flex; align-items:center; gap:8px; width:100%;
}
.mp-pdfed-range-step{
  flex:0 0 32px; width:32px; height:32px; padding:0;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(15,23,42,.12); border-radius:9px;
  background:#fff; color:#1e293b; cursor:pointer;
  font-size:17px; font-weight:800;
  box-shadow:0 1px 2px rgba(15,23,42,.04); transition:all .12s ease;
}
.mp-pdfed-range-step:hover{ background:#f1f5f9; border-color:rgba(15,23,42,.22); }
.mp-pdfed-range-step:active{ transform:scale(.94); }
.mp-pdfed-range-control > input[type=range]{
  flex:1 1 auto; min-width:60px; height:20px; margin:0 !important;
}
.mp-pdfed-range-control > input[type=range]::-webkit-slider-runnable-track{ height:5px; border-radius:5px; }
.mp-pdfed-range-control > input[type=range]::-webkit-slider-thumb{ width:18px; height:18px; margin-top:-6.5px; }

/* Buttons & Aktionen */
.mp-pdfed-settings-body .mp-pdfed-btnrow{
  display:flex; align-items:stretch; gap:10px; margin:10px 0;
}
.mp-pdfed-settings-body .mp-pdfed-upload{
  flex:1 1 50%; min-height:42px; padding:9px 14px;
  display:inline-flex; align-items:center; justify-content:center; text-align:center;
  cursor:pointer; background:#f8fafc; color:#0369a1; font-weight:700; font-size:13.5px;
  border:1.5px dashed rgba(43,176,255,.45); border-radius:11px;
  transition:all .15s ease; box-sizing:border-box;
}
.mp-pdfed-settings-body .mp-pdfed-upload:hover{
  background:#f0f9ff; border-color:#2bb0ff; color:#0284c7;
}
.mp-pdfed-settings-body .mp-pdfed-ghost{
  flex:1 1 50%; min-height:42px; padding:9px 14px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(15,23,42,.10); background:#f8fafc;
  color:#334155; font-weight:700; font-size:13.5px; border-radius:11px;
  cursor:pointer; transition:all .15s ease; box-sizing:border-box;
}
.mp-pdfed-settings-body .mp-pdfed-ghost:hover{
  background:#f1f5f9; border-color:rgba(15,23,42,.18); color:#0f172a;
}
.mp-pdfed-settings-body #mpPdfEdPosReset{
  width:100%; min-height:38px; font-size:13px; color:#64748b;
  margin-top:10px; border:1px solid rgba(15,23,42,.08); background:#f8fafc;
}
.mp-pdfed-settings-body #mpPdfEdPosReset:hover{
  background:#f1f5f9; color:#0f172a; border-color:rgba(15,23,42,.15);
}

/* Farbauswahl & Standard-Button */
.mp-pdfed-settings-body .mp-pdfed-btnrow input[type=color]{
  flex:0 0 130px; height:42px; min-height:42px; padding:3px;
  border:1px solid rgba(15,23,42,.14); border-radius:10px;
  background:#fff; cursor:pointer; box-sizing:border-box;
}
.mp-pdfed-settings-body .mp-pdfed-btnrow input[type=color]::-webkit-color-swatch-wrapper{ padding:0; }
.mp-pdfed-settings-body .mp-pdfed-btnrow input[type=color]::-webkit-color-swatch{ border:0; border-radius:7px; }
.mp-pdfed-settings-body .mp-pdfed-btnrow input[type=color]::-moz-color-swatch{ border:0; border-radius:7px; }
.mp-pdfed-settings-body .mp-pdfed-btnrow button#mpPdfEdAccentReset,
.mp-pdfed-settings-body .mp-pdfed-btnrow button#mpPdfEdZebraReset,
.mp-pdfed-settings-body .mp-pdfed-btnrow button#mpPdfEdDescColorReset{
  flex:0 0 auto; min-width:96px; height:42px; min-height:42px;
}

/* Info- und Hinweis-Callouts */
.mp-pdfed-settings-body .mp-pdfed-tip{
  display:flex; align-items:flex-start; gap:8px;
  font-size:12.5px; line-height:1.45; color:#475569;
  background:rgba(43,176,255,.06); border:1px solid rgba(43,176,255,.18);
  border-radius:10px; padding:10px 12px; margin:10px 0 0; box-sizing:border-box;
}
.mp-pdfed-settings-body .mp-pdfed-tip::before{
  content:"ℹ"; display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; flex:0 0 16px; border-radius:50%;
  background:#2bb0ff; color:#fff; font-size:11px; font-weight:800; margin-top:1px;
}

/* Checkboxen */
.mp-pdfed-settings-body .mp-pdfed-check{
  display:flex; align-items:center; gap:10px;
  font-weight:600; font-size:13.5px; color:#1e293b;
  margin:10px 0; padding:6px 8px; border-radius:8px; cursor:pointer;
  transition:background .12s ease;
}
.mp-pdfed-settings-body .mp-pdfed-check:hover{ background:rgba(15,23,42,.03); }
.mp-pdfed-settings-body .mp-pdfed-check input{
  width:18px; height:18px; margin:0; accent-color:#2bb0ff; cursor:pointer;
}

/* Fußzeile */
.mp-pdfed-settings-foot{
  display:flex; min-height:60px; padding:10px 20px;
  align-items:center; justify-content:space-between; gap:12px;
  border-top:1px solid rgba(15,23,42,.08); background:#fff; flex:none;
}
.mp-pdfed-settings-foot > span{ color:#64748b; font-size:12.5px; font-weight:600; }
.mp-pdfed-settings-foot > span::before{
  content:""; display:inline-block; width:7px; height:7px; margin-right:8px;
  border-radius:50%; background:#10b981; box-shadow:0 0 0 4px rgba(16,185,129,.14);
  vertical-align:1px;
}
.mp-pdfed-settings-done{
  min-width:110px; min-height:42px; padding:0 22px; border:0; border-radius:12px;
  background:linear-gradient(145deg,#35b6ff,#168fd4); color:#fff; cursor:pointer;
  font-size:14px; font-weight:800; box-shadow:0 4px 14px -4px rgba(22,143,212,.65);
  transition:all .15s ease;
}
.mp-pdfed-settings-done:hover{ filter:brightness(1.05); }
.mp-pdfed-settings-done:active{ transform:translateY(1px); }

/* Dunkelmodus */
html.dark .mp-pdfed-settings-ov{ background:#0b1120; border-color:rgba(148,163,184,.14); }
html.dark .mp-pdfed-settings-win{ background:#0b1120; }
html.dark .mp-pdfed-settings-head, html.dark .mp-pdfed-settings-foot, html.dark .mp-pdfed-settings-nav{ background:#0f172a; border-color:rgba(148,163,184,.14); }
html.dark .mp-pdfed-settings-head h2{ color:#f8fafc; }
html.dark .mp-pdfed-settings-head p{ color:#94a3b8; }
html.dark .mp-pdfed-settings-x{ background:rgba(255,255,255,.05); border-color:rgba(148,163,184,.18); color:#cbd5e1; }
html.dark .mp-pdfed-nav-pill{ background:rgba(255,255,255,.06); color:#cbd5e1; }
html.dark .mp-pdfed-nav-pill:hover{ background:rgba(255,255,255,.10); color:#fff; }
html.dark .mp-pdfed-nav-pill.is-active{ background:#2bb0ff; color:#fff; }
html.dark .mp-pdfed-settings-body .mp-pdfed-group{ background:#0f172a !important; border-color:rgba(148,163,184,.14) !important; }
html.dark .mp-pdfed-settings-body .mp-pdfed-gtitle.is-unterpunkt{ color:#f8fafc; }
html.dark .mp-pdfed-settings-body .mp-pdfed-seg{ background:rgba(255,255,255,.05); border-color:rgba(148,163,184,.12); }
html.dark .mp-pdfed-settings-body .mp-pdfed-seg button{ color:#94a3b8; }
html.dark .mp-pdfed-settings-body .mp-pdfed-seg button.is-active{ background:rgba(255,255,255,.14) !important; color:#fff !important; }
html.dark .mp-pdfed-control-tile{ background:rgba(255,255,255,.03); border-color:rgba(148,163,184,.12); }
html.dark .mp-pdfed-control-tile .mp-pdfed-row{ color:#cbd5e1; }
html.dark .mp-pdfed-control-tile .mp-pdfed-val{ background:rgba(43,176,255,.15); color:#38bdf8; }
html.dark .mp-pdfed-range-step{ background:rgba(255,255,255,.06); border-color:rgba(148,163,184,.16); color:#f8fafc; }
html.dark .mp-pdfed-settings-body .mp-pdfed-upload{ background:rgba(43,176,255,.06); border-color:rgba(43,176,255,.35); color:#38bdf8; }
html.dark .mp-pdfed-settings-body .mp-pdfed-ghost{ background:rgba(255,255,255,.05); border-color:rgba(148,163,184,.16); color:#cbd5e1; }
html.dark .mp-pdfed-settings-body .mp-pdfed-check{ color:#e2e8f0; }
html.dark .mp-pdfed-settings-body .mp-pdfed-check:hover{ background:rgba(255,255,255,.04); }
html.dark .mp-pdfed-settings-body .mp-pdfed-tip{ background:rgba(43,176,255,.08); border-color:rgba(43,176,255,.20); color:#cbd5e1; }
html.dark .mp-pdfed-settings-body .mp-pdfed-btnrow input[type=color]{ background:#0f172a; border-color:rgba(148,163,184,.20); }
html.dark .mp-pdfed-settings-foot > span{ color:#94a3b8; }

@media(max-width:640px){
  .mp-pdfed-settings-ov{ top:38dvh; width:100%; max-width:100%; border-left:0; border-top:1px solid rgba(15,23,42,.10); }
  .mp-pdfed-settings-head{ padding:12px 16px; }
  .mp-pdfed-settings-icon{ width:36px; height:36px; border-radius:10px; }
  .mp-pdfed-settings-body{ padding:12px 14px; }
  .mp-pdfed-control-grid{ grid-template-columns:minmax(0,1fr); }
}



/* MP-20261004-015: Dark Mode für PDF-Editor Kopf & Hero-Studio */
html.dark .mp-pdfed-head{
  background:rgba(15,23,42,.92); border-color:rgba(148,163,184,.16);
}
html.dark .mp-pdfed-title{ color:#f8fafc; }
html.dark .mp-pdfed-tabs{ background:rgba(255,255,255,.08); }
html.dark .mp-pdfed-tab{ color:#94a3b8; }
html.dark .mp-pdfed-tab.is-active{ background:#1e293b; color:#38bdf8; box-shadow:0 1px 4px rgba(0,0,0,.3); }
html.dark .mp-pdfed-headupload{
  background:rgba(255,255,255,.06); color:#f8fafc; border-color:rgba(148,163,184,.2);
}
html.dark .mp-pdfed-headupload:hover{ background:rgba(255,255,255,.1); color:#38bdf8; }

html.dark .mp-pdf-hero-card{
  background:linear-gradient(135deg, rgba(43,176,255,.12) 0%, rgba(18,120,200,.04) 100%);
  border-color:rgba(43,176,255,.35);
}
html.dark .mp-pdf-hero-title{ color:#f8fafc; }
html.dark .mp-pdf-hero-desc{ color:#cbd5e1; }
html.dark .mp-pdf-hero-badge{
  background:rgba(15,23,42,.6); border-color:rgba(148,163,184,.2); color:#e2e8f0; 
}
html.dark .mp-briefpapier-service-tile{
  background:rgba(255,255,255,.03); border-color:rgba(148,163,184,.16);
}
html.dark .mp-briefpapier-service-title{ color:#f8fafc; }
html.dark .mp-briefpapier-service-status{ color:#94a3b8; }
html.dark .mp-pdf-options-title{ color:#f8fafc; }
/* MP-20261004-016: Formblatt Auftragserteilung Word-Editor & Vorlagen */
.mp-auftrag-kicker{
  font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#0284c7; margin-bottom:4px;
}
.mp-auftrag-head-row{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; flex-wrap:wrap; gap:10px;
}
.mp-auftrag-label{
  font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#64748b; margin:0;
}
.mp-auftrag-head-actions{
  display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap;
}

/* Vorlagen Picker & Reset */
.mp-template-picker-wrap{ position:relative; display:inline-block; }
.mp-btn-template-picker,
.mp-btn-reset-default{
  display:inline-flex; align-items:center; gap:6px; padding:7px 13px; border-radius:9px;
  font-weight:700; font-size:12.5px; background:#fff; color:#334155;
  border:1px solid rgba(15,23,42,.12); box-shadow:0 1px 2px rgba(15,23,42,.04);
  cursor:pointer; transition:all .15s ease;
}
.mp-btn-template-picker:hover,
.mp-btn-reset-default:hover{
  background:#f8fafc; border-color:rgba(43,176,255,.45); color:#0284c7; transform:translateY(-1px);
}
.mp-btn-template-picker:active,
.mp-btn-reset-default:active{ transform:translateY(1px); }

.mp-templates-dropdown{
  display:none; position:absolute; right:0; top:calc(100% + 6px); width:320px;
  background:#ffffff; border:1px solid rgba(15,23,42,.12); border-radius:12px;
  box-shadow:0 12px 32px rgba(15,23,42,.12), 0 2px 6px rgba(15,23,42,.06);
  padding:8px; z-index:1000; animation:mpFadeInMenu .15s ease-out;
}
.mp-templates-dropdown.is-open{ display:block; }
@keyframes mpFadeInMenu {
  from { opacity:0; transform:translateY(-4px); }
  to { opacity:1; transform:translateY(0); }
}
.mp-templates-dropdown-title{
  font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:#94a3b8; padding:6px 8px 4px 8px;
}
.mp-template-item{
  display:flex; flex-direction:column; width:100%; text-align:left; background:transparent;
  border:none; border-radius:8px; padding:8px 10px; cursor:pointer; transition:background .12s;
}
.mp-template-item:hover{ background:rgba(43,176,255,.08); }
.mp-template-item-name{ font-size:12.5px; font-weight:700; color:#0f172a; margin-bottom:2px; }
.mp-template-item-desc{ font-size:11px; color:#64748b; line-height:1.35; }

/* Tip-Banner */
.mp-word-tip-banner{
  display:flex; align-items:flex-start; gap:10px; padding:10px 14px; border-radius:11px;
  background:rgba(43,176,255,.07); border:1px solid rgba(43,176,255,.22); margin-bottom:12px;
}
.mp-word-tip-icon{
  display:flex; align-items:center; justify-content:center; width:22px; height:22px;
  color:#0284c7; flex:none; margin-top:1px;
}
.mp-word-tip-text{ font-size:12.5px; line-height:1.5; color:#334155; }
.mp-word-tip-text strong{ color:#0f172a; font-weight:700; }
.mp-word-tip-text code{
  background:rgba(43,176,255,.14); color:#0284c7; padding:1px 5px; border-radius:4px;
  font-family:monospace; font-size:11.5px; font-weight:700;
}

/* Chips Panel */
.mp-chips-panel{
  background:rgba(15,23,42,.025); border:1px solid rgba(15,23,42,.06);
  border-radius:12px; padding:10px 12px; margin-bottom:12px;
}
.mp-chips-hint{
  font-size:11.5px; color:#64748b; font-weight:600; margin-bottom:8px;
}
.mp-placeholder-chips{ display:flex; gap:7px; flex-wrap:wrap; }
.mp-chip-btn{
  display:inline-flex; flex-direction:column; align-items:flex-start; gap:1px;
  padding:5px 10px; border-radius:8px; background:#ffffff; border:1px solid rgba(43,176,255,.28);
  box-shadow:0 1px 2px rgba(15,23,42,.03); color:#0284c7; cursor:pointer; transition:all .15s ease;
}
.mp-chip-btn:hover{
  background:rgba(43,176,255,.12); border-color:rgba(43,176,255,.5);
  transform:translateY(-1px); box-shadow:0 3px 8px rgba(43,176,255,.18);
}
.mp-chip-btn:active{ transform:translateY(1px); }
.mp-chip-code{ font-family:monospace; font-weight:700; font-size:12px; }
.mp-chip-sub{ font-size:10px; color:#64748b; font-weight:600; }

/* Word Editor Box */
.mp-word-editor-box{
  width:100%; box-sizing:border-box; border:1px solid rgba(15,23,42,.14);
  border-radius:14px; background:#ffffff;
  box-shadow:0 3px 12px rgba(15,23,42,.03), 0 1px 3px rgba(15,23,42,.02);
  overflow:hidden; transition:border-color .15s, box-shadow .15s;
}
.mp-word-editor-box:focus-within{
  border-color:#2bb0ff; box-shadow:0 0 0 3px rgba(43,176,255,.18), 0 6px 20px rgba(15,23,42,.06);
}

/* Word Toolbar */
.mp-word-toolbar{
  display:flex; flex-wrap:wrap; align-items:center; gap:4px; padding:8px 10px;
  background:#f8fafc; border-bottom:1px solid rgba(15,23,42,.08);
}
.mp-word-select{
  height:30px; padding:0 24px 0 8px; border:1px solid rgba(15,23,42,.14);
  border-radius:6px; font-size:12px; font-weight:600; color:#334155;
  background:#ffffff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 6px center;
  appearance:none; -webkit-appearance:none; cursor:pointer; outline:none;
}
.mp-word-select:focus{ border-color:#2bb0ff; }
.mp-word-font-select{ min-width:130px; }
.mp-word-format-select{ min-width:115px; }

.mp-word-sep{
  width:1px; height:18px; background:rgba(15,23,42,.1); margin:0 3px;
}
.mp-word-btn{
  width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid transparent; border-radius:6px; background:transparent;
  color:#475569; font-size:13px; font-weight:700; cursor:pointer; transition:all .12s ease;
}
.mp-word-btn:hover{
  background:rgba(15,23,42,.06); color:#0f172a;
}
.mp-word-btn:active{ transform:translateY(1px); }
.mp-word-btn.is-active{
  background:rgba(43,176,255,.16); border-color:rgba(43,176,255,.4); color:#0284c7;
}

/* Word Schreibfläche (Dokumentenpapier) */
.mp-word-surface{
  min-height:220px; max-height:520px; overflow-y:auto; padding:18px 22px;
  font-family:'Inter',system-ui,-apple-system,sans-serif; font-size:14px;
  line-height:1.65; color:#0f172a; background:#ffffff; outline:none;
  box-sizing:border-box; word-break:break-word;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='24' viewBox='0 0 16 24'%3E%3Cpath d='M4 2h8M8 2v20M4 22h8' stroke='%230f172a' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") 8 12, text !important;
  caret-color: #0284c7 !important;
}
.mp-word-surface p{ margin:0 0 12px 0; }
.mp-word-surface p:last-child{ margin-bottom:0; }
.mp-word-surface h3{ margin:0 0 10px 0; font-size:16px; font-weight:700; color:#0f172a; }
.mp-word-surface h4{ margin:0 0 8px 0; font-size:14.5px; font-weight:700; color:#334155; }
.mp-word-surface ul,
.mp-word-surface ol{ margin:0 0 12px 0; padding-left:22px; }
.mp-word-surface li{ margin-bottom:4px; }
.mp-word-surface strong,
.mp-word-surface b{ font-weight:700; color:#0f172a; }
.mp-word-surface:empty::before{
  content:attr(data-placeholder); color:#94a3b8; pointer-events:none; display:block;
}

/* Statusleiste */
.mp-word-statusbar{
  display:flex; align-items:center; justify-content:space-between; padding:8px 14px;
  background:#f8fafc; border-top:1px solid rgba(15,23,42,.06); font-size:11.5px;
  color:#64748b; flex-wrap:wrap; gap:8px;
}
.mp-word-status-hint{ opacity:.85; line-height:1.35; flex:1; min-width:200px; }
.mp-word-status-metrics{ display:inline-flex; align-items:center; gap:6px; flex:none; }

.mp-counter-pill{
  display:inline-flex; align-items:center; padding:3px 9px; border-radius:999px;
  background:rgba(15,23,42,.05); border:1px solid rgba(15,23,42,.08);
  font-size:11.5px; font-weight:700; color:#64748b;
}

/* Dark Mode Formblatt Auftragserteilung Word-Editor */
html.dark .mp-auftrag-kicker{ color:#38bdf8; }
html.dark .mp-auftrag-label{ color:#94a3b8; }
html.dark .mp-btn-template-picker,
html.dark .mp-btn-reset-default{
  background:rgba(255,255,255,.05); border-color:rgba(148,163,184,.2); color:#cbd5e1;
}
html.dark .mp-btn-template-picker:hover,
html.dark .mp-btn-reset-default:hover{
  background:rgba(255,255,255,.1); color:#38bdf8;
}
html.dark .mp-templates-dropdown{
  background:#1e293b; border-color:rgba(148,163,184,.25); box-shadow:0 12px 36px rgba(0,0,0,.6);
}
html.dark .mp-templates-dropdown-title{ color:#64748b; }
html.dark .mp-template-item:hover{ background:rgba(255,255,255,.06); }
html.dark .mp-template-item-name{ color:#f8fafc; }
html.dark .mp-template-item-desc{ color:#94a3b8; }

html.dark .mp-word-tip-banner{
  background:rgba(43,176,255,.1); border-color:rgba(43,176,255,.3);
}
html.dark .mp-word-tip-icon{ color:#38bdf8; }
html.dark .mp-word-tip-text{ color:#cbd5e1; }
html.dark .mp-word-tip-text strong{ color:#f8fafc; }
html.dark .mp-word-tip-text code{ background:rgba(43,176,255,.2); color:#38bdf8; }

html.dark .mp-chips-panel{
  background:rgba(255,255,255,.02); border-color:rgba(148,163,184,.12);
}
html.dark .mp-chips-hint{ color:#94a3b8; }
html.dark .mp-chip-btn{
  background:rgba(30,41,59,.9); border-color:rgba(43,176,255,.35); color:#38bdf8;
}
html.dark .mp-chip-btn:hover{
  background:rgba(43,176,255,.2); border-color:rgba(43,176,255,.6);
}
html.dark .mp-chip-sub{ color:#94a3b8; }

html.dark .mp-word-editor-box{
  background:#0f172a; border-color:rgba(148,163,184,.2);
}
html.dark .mp-word-toolbar{
  background:#1e293b; border-bottom-color:rgba(148,163,184,.15);
}
html.dark .mp-word-select{
  background-color:#0f172a; border-color:rgba(148,163,184,.25); color:#f8fafc;
}
html.dark .mp-word-sep{ background:rgba(148,163,184,.15); }
html.dark .mp-word-btn{ color:#cbd5e1; }
html.dark .mp-word-btn:hover{ background:rgba(255,255,255,.08); color:#f8fafc; }
html.dark .mp-word-btn.is-active{
  background:rgba(43,176,255,.25); border-color:rgba(43,176,255,.6); color:#38bdf8;
}
html.dark .mp-word-surface{
  background:#0b1120; color:#f8fafc;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='24' viewBox='0 0 16 24'%3E%3Cpath d='M4 2h8M8 2v20M4 22h8' stroke='%2338bdf8' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") 8 12, text !important;
  caret-color: #38bdf8 !important;
}
html.dark .mp-word-surface strong,
html.dark .mp-word-surface b,
html.dark .mp-word-surface h3{ color:#ffffff; }
html.dark .mp-word-surface h4{ color:#cbd5e1; }
html.dark .mp-word-statusbar{
  background:#1e293b; border-top-color:rgba(148,163,184,.15); color:#94a3b8;
}
html.dark .mp-counter-pill{
  background:rgba(255,255,255,.06); border-color:rgba(148,163,184,.14); color:#94a3b8;
}
.mp-pdfed-title-icon{ display:grid; place-items:center; width:28px; height:28px; border-radius:8px; background:linear-gradient(135deg, #2bb0ff 0%, #1278c8 100%); color:#fff; flex:none; box-shadow:0 3px 8px rgba(43,176,255,.4); }