From 904a4184fcf93454581a04a79968012bce99dbfc Mon Sep 17 00:00:00 2001
From: Thomas Peterson <info@thomas-peterson.de>
Date: Sun, 31 May 2026 17:39:50 +0200
Subject: [PATCH] =?UTF-8?q?Karten-Editor:=20Komfort=20=E2=80=94=20Hintergr?=
 =?UTF-8?q?und-Vorschau,=20Resize,=20Undo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Hintergrund-PDF wird per pdf.js echt im Canvas gerendert (WYSIWYG);
  neuer Endpunkt GET .../card-template/background liefert das PDF
- Resize-Anfasser am ausgewählten Element (Breite/Höhe)
- Undo (↶ / Strg+Z) mit Snapshot-History; Snapshot erst bei echter Änderung

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../Controller/CardAssetUploadController.php  |  15 +
 frontend/package-lock.json                    | 278 ++++++++++++++++++
 frontend/package.json                         |   1 +
 frontend/src/views/CardEditorView.vue         |  98 +++++-
 4 files changed, 386 insertions(+), 6 deletions(-)

diff --git a/backend/src/Controller/CardAssetUploadController.php b/backend/src/Controller/CardAssetUploadController.php
index af08fa3..2c62a90 100644
--- a/backend/src/Controller/CardAssetUploadController.php
+++ b/backend/src/Controller/CardAssetUploadController.php
@@ -8,9 +8,11 @@ use App\Repository\CardTemplateRepository;
 use App\Security\TenantContext;
 use Doctrine\ORM\EntityManagerInterface;
 use Symfony\Component\DependencyInjection\Attribute\Autowire;
+use Symfony\Component\HttpFoundation\BinaryFileResponse;
 use Symfony\Component\HttpFoundation\File\UploadedFile;
 use Symfony\Component\HttpFoundation\JsonResponse;
 use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\HttpKernel\Exception\AccessDeniedHttpException;
 use Symfony\Component\HttpKernel\Exception\BadRequestHttpException;
 use Symfony\Component\HttpKernel\Exception\NotFoundHttpException;
@@ -52,6 +54,19 @@ final class CardAssetUploadController
         return new JsonResponse(['backgroundPath' => $path, 'fileName' => $file->getClientOriginalName()], 201);
     }
 
+    #[Route('/api/companies/{id}/card-template/background', name: 'card_bg_get', methods: ['GET'])]
+    public function getBackground(string $id): Response
+    {
+        $company = $this->company($id);
+        $template = $this->templates->findCardForCompany($company);
+        $path = $template?->getBackgroundPath();
+        if (!$path || !is_file($path)) {
+            throw new NotFoundHttpException('Kein Hintergrund-PDF.');
+        }
+
+        return new BinaryFileResponse($path, 200, ['Content-Type' => 'application/pdf']);
+    }
+
     #[Route('/api/companies/{id}/card-template/background', name: 'card_bg_delete', methods: ['DELETE'])]
     public function deleteBackground(string $id): JsonResponse
     {
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index ac07cea..529a4b4 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "axios": "^1.16.1",
+        "pdfjs-dist": "^6.0.227",
         "pinia": "^3.0.4",
         "vue": "^3.5.34",
         "vue-router": "^4.6.4"
@@ -108,6 +109,271 @@
       "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
       "license": "MIT"
     },
+    "node_modules/@napi-rs/canvas": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas/-/canvas-1.0.0.tgz",
+      "integrity": "sha512-Jqxcy1XOIqj+lH9sl1GT+il6GR3uQv13vI2mrwubP3uT8Olak2ClDrK2RnxlQKjwv8BRr4b3ug0YR7c6hBX8wg==",
+      "license": "MIT",
+      "optional": true,
+      "workspaces": [
+        "e2e/*"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      },
+      "optionalDependencies": {
+        "@napi-rs/canvas-android-arm64": "1.0.0",
+        "@napi-rs/canvas-darwin-arm64": "1.0.0",
+        "@napi-rs/canvas-darwin-x64": "1.0.0",
+        "@napi-rs/canvas-linux-arm-gnueabihf": "1.0.0",
+        "@napi-rs/canvas-linux-arm64-gnu": "1.0.0",
+        "@napi-rs/canvas-linux-arm64-musl": "1.0.0",
+        "@napi-rs/canvas-linux-riscv64-gnu": "1.0.0",
+        "@napi-rs/canvas-linux-x64-gnu": "1.0.0",
+        "@napi-rs/canvas-linux-x64-musl": "1.0.0",
+        "@napi-rs/canvas-win32-arm64-msvc": "1.0.0",
+        "@napi-rs/canvas-win32-x64-msvc": "1.0.0"
+      }
+    },
+    "node_modules/@napi-rs/canvas-android-arm64": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-android-arm64/-/canvas-android-arm64-1.0.0.tgz",
+      "integrity": "sha512-3hNKJObUK7JsCF9aJlVCs1J0/KE/gGfZNeK8MO1ge6bB3aicr5walGme9t9No1f/oyk9GgvdAT/rjSdsx3gbIw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-darwin-arm64": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-darwin-arm64/-/canvas-darwin-arm64-1.0.0.tgz",
+      "integrity": "sha512-ZIja19/BiGz2puhki+WUYSRriwFeFJ8Mi9eK3hZdSS85w4Y60cuEAJVhMCfKwswQkKkUtrnzdKMBuO7TupvexA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-darwin-x64": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-darwin-x64/-/canvas-darwin-x64-1.0.0.tgz",
+      "integrity": "sha512-hImggWc82jqZVpEsFR9S7PE9OQYjq/H/D7vwCGB6X1jRH+UVBP1+1niJTPBOat1B154T6GKK7/kcFtoWgjgFzQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-arm-gnueabihf": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm-gnueabihf/-/canvas-linux-arm-gnueabihf-1.0.0.tgz",
+      "integrity": "sha512-hlJRy6d+kWLKVOG/+1rEvNQVURZ0DxxRPJsLmEWwhwiXZUJc0BF5o9esALHSEP4CoJK4wChRtj3hnyBgVx2oWA==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-arm64-gnu": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm64-gnu/-/canvas-linux-arm64-gnu-1.0.0.tgz",
+      "integrity": "sha512-5Hru4T3RXkosRQafcjelv7AUzw9mXqmGYsxnzeDDOWveFCJyEPMSJltvGCM+jfH98seOCbfwm9KyFg6Jm5FhAA==",
+      "cpu": [
+        "arm64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-arm64-musl": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm64-musl/-/canvas-linux-arm64-musl-1.0.0.tgz",
+      "integrity": "sha512-LTUl9jS8WsLSUGaxQZKQkxfluOJRpgvBuxxdM4pYcjib+di8AU4OzQc6+L6SzGMLcKc9H0RAjojRatBhTMqYdg==",
+      "cpu": [
+        "arm64"
+      ],
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-riscv64-gnu": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-riscv64-gnu/-/canvas-linux-riscv64-gnu-1.0.0.tgz",
+      "integrity": "sha512-Iz931SAZf+WVDzpjk52Q3ffW3zw0YflFwEZMgs036Wfu1kX/LrwT9wGjsuSqyduqefUkl91/vTdAjn8hQu5ezA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-x64-gnu": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-x64-gnu/-/canvas-linux-x64-gnu-1.0.0.tgz",
+      "integrity": "sha512-pFEQ5eFK4JusgN1K6KkO9DKP/Hi1WMJOkF8Ch03/khTc4bFbCKkCCsJG4YcOMOW9bI4XbT2/eMAWxhO0xaWgPA==",
+      "cpu": [
+        "x64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-x64-musl": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-x64-musl/-/canvas-linux-x64-musl-1.0.0.tgz",
+      "integrity": "sha512-jnvr8NrLHiZ3NCiOKWqDbkI4Ah+QDrqtZ+sddPZBltEb1mQ2coSvCSJYfict+oAwcm0c970oTmVySpjKP/lnaA==",
+      "cpu": [
+        "x64"
+      ],
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-win32-arm64-msvc": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-win32-arm64-msvc/-/canvas-win32-arm64-msvc-1.0.0.tgz",
+      "integrity": "sha512-y2j9/Gfd5joqiqxdP/L1smqjQ+uAx3C4N0EC7bDHrnZEEH8ToM/OC5p3uHvtj4Lq591aHj+ArL01UDLNwT5HgQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-win32-x64-msvc": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-win32-x64-msvc/-/canvas-win32-x64-msvc-1.0.0.tgz",
+      "integrity": "sha512-qwdhh9N6Gge/hC4pL9S1tQp0iKwhSl/dYjg7+RGp9k26iRGRi5MqqUyKGOXIWli0zOcuy5Y2wIH/jk2ry6i/jA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
     "node_modules/@napi-rs/wasm-runtime": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.4.tgz",
@@ -1412,6 +1678,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/pdfjs-dist": {
+      "version": "6.0.227",
+      "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-6.0.227.tgz",
+      "integrity": "sha512-/P6M4SXw+70waMVLUM7rdRtvo+dEzqE1t6W/zQNvBETo2MaRa5rrvCcAYdfWGiUzadTgM0lJmRApUrW0d9zgKg==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=22.13.0 || >=24"
+      },
+      "optionalDependencies": {
+        "@napi-rs/canvas": "^1.0.0"
+      }
+    },
     "node_modules/perfect-debounce": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-1.0.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 4e05b5f..e183f47 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "axios": "^1.16.1",
+    "pdfjs-dist": "^6.0.227",
     "pinia": "^3.0.4",
     "vue": "^3.5.34",
     "vue-router": "^4.6.4"
diff --git a/frontend/src/views/CardEditorView.vue b/frontend/src/views/CardEditorView.vue
index 9211275..8736596 100644
--- a/frontend/src/views/CardEditorView.vue
+++ b/frontend/src/views/CardEditorView.vue
@@ -1,7 +1,11 @@
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted, onUnmounted } from 'vue'
 import { list } from '@/api/resources'
 import client from '@/api/client'
+import * as pdfjsLib from 'pdfjs-dist'
+import pdfWorkerUrl from 'pdfjs-dist/build/pdf.worker.min.mjs?url'
+
+pdfjsLib.GlobalWorkerOptions.workerSrc = pdfWorkerUrl
 
 interface El { type: string; [k: string]: any }
 interface Template {
@@ -34,6 +38,26 @@ const branding = computed(() => {
 const els = computed<El[]>(() => (tpl.value ? tpl.value[side.value] : []))
 const selected = computed(() => (selectedIndex.value !== null ? els.value[selectedIndex.value] : null))
 
+// Hintergrund-PDF als Bild (pro Seite) für die Canvas-Vorschau
+const bgImages = ref<{ front: string | null; back: string | null }>({ front: null, back: null })
+const currentBg = computed(() => bgImages.value[side.value])
+
+// Undo-History (Snapshots von front/back)
+const history = ref<string[]>([])
+function snapshot() {
+  if (!tpl.value) return
+  history.value.push(JSON.stringify({ front: tpl.value.front, back: tpl.value.back }))
+  if (history.value.length > 50) history.value.shift()
+}
+function undo() {
+  const snap = history.value.pop()
+  if (!snap || !tpl.value) return
+  const { front, back } = JSON.parse(snap)
+  tpl.value.front = front
+  tpl.value.back = back
+  selectedIndex.value = null
+}
+
 const BINDINGS = [
   ['fullName', 'Name'], ['firstName', 'Vorname'], ['lastName', 'Nachname'],
   ['position', 'Position'], ['department', 'Abteilung'], ['email', 'E-Mail'],
@@ -100,7 +124,34 @@ async function loadTemplate() {
   const { data } = await client.get<Template>(`/companies/${cid}/card-template`)
   tpl.value = data
   selectedIndex.value = null
+  history.value = []
   sample.value = employees.value.find((e) => e.company === selectedCompanyId.value) ?? null
+  await renderBackground()
+}
+
+// Rendert das Hintergrund-PDF (Seite 1 = Vorder-, 2 = Rückseite) als Bild für den Canvas
+async function renderBackground() {
+  bgImages.value = { front: null, back: null }
+  if (!tpl.value?.hasBackground) return
+  try {
+    const res = await client.get(`/companies/${selectedCompany.value!.id}/card-template/background`, { responseType: 'arraybuffer' })
+    const doc = await pdfjsLib.getDocument({ data: new Uint8Array(res.data as ArrayBuffer) }).promise
+    const pxW = (tpl.value.widthMm + 2 * tpl.value.bleedMm) * SCALE
+    for (let p = 1; p <= Math.min(2, doc.numPages); p++) {
+      const page = await doc.getPage(p)
+      const scale = pxW / page.getViewport({ scale: 1 }).width
+      const vp = page.getViewport({ scale })
+      const canvas = document.createElement('canvas')
+      canvas.width = vp.width
+      canvas.height = vp.height
+      await page.render({ canvas, canvasContext: canvas.getContext('2d')!, viewport: vp }).promise
+      const url = canvas.toDataURL('image/png')
+      if (p === 1) bgImages.value.front = url
+      else bgImages.value.back = url
+    }
+  } catch {
+    // Vorschau optional – bei Fehler bleibt der Hinweis-Hintergrund
+  }
 }
 async function load() {
   loading.value = true
@@ -119,7 +170,9 @@ function startDrag(e: MouseEvent, idx: number) {
   const el = els.value[idx]
   const sx = e.clientX, sy = e.clientY, ox = el.x, oy = el.y
   const w = tpl.value!.widthMm, h = tpl.value!.heightMm, bl = tpl.value!.bleedMm
+  let snapped = false
   const move = (ev: MouseEvent) => {
+    if (!snapped) { snapshot(); snapped = true }
     el.x = Math.min(w, Math.max(-bl, +(ox + (ev.clientX - sx) / SCALE).toFixed(1)))
     el.y = Math.min(h, Math.max(-bl, +(oy + (ev.clientY - sy) / SCALE).toFixed(1)))
   }
@@ -128,6 +181,24 @@ function startDrag(e: MouseEvent, idx: number) {
   e.preventDefault()
 }
 
+function startResize(e: MouseEvent, idx: number) {
+  selectedIndex.value = idx
+  const el = els.value[idx]
+  const sx = e.clientX, sy = e.clientY
+  const ow = el.w ?? 40, oh = el.h ?? 0
+  const hasH = ['rect', 'qr', 'image'].includes(el.type)
+  let snapped = false
+  const move = (ev: MouseEvent) => {
+    if (!snapped) { snapshot(); snapped = true }
+    el.w = Math.max(2, +(ow + (ev.clientX - sx) / SCALE).toFixed(1))
+    if (hasH) el.h = Math.max(2, +(oh + (ev.clientY - sy) / SCALE).toFixed(1))
+  }
+  const up = () => { window.removeEventListener('mousemove', move); window.removeEventListener('mouseup', up) }
+  window.addEventListener('mousemove', move); window.addEventListener('mouseup', up)
+  e.preventDefault()
+  e.stopPropagation()
+}
+
 // --- Elemente hinzufügen / löschen ---
 function add(type: string) {
   const defs: Record<string, El> = {
@@ -138,11 +209,13 @@ function add(type: string) {
     rect: { type: 'rect', x: 8, y: 8, w: 30, h: 15, fill: { ref: 'primary' } },
     line: { type: 'line', x: 8, y: 8, w: 25, h: 0, lineWidth: 0.5, color: { ref: 'primary' } },
   }
+  snapshot()
   els.value.push({ ...defs[type] })
   selectedIndex.value = els.value.length - 1
 }
 function removeSelected() {
   if (selectedIndex.value === null) return
+  snapshot()
   els.value.splice(selectedIndex.value, 1)
   selectedIndex.value = null
 }
@@ -181,12 +254,14 @@ async function uploadBackground(e: Event) {
     const fd = new FormData(); fd.append('file', file)
     await client.post(`/companies/${cidPath()}/card-template/background`, fd)
     tpl.value.hasBackground = true
+    await renderBackground()
   } catch { alert('Upload fehlgeschlagen (nur PDF).') } finally { uploading.value = false; (e.target as HTMLInputElement).value = '' }
 }
 async function removeBackground() {
   if (!tpl.value || !confirm('Hintergrund-PDF entfernen?')) return
   await client.delete(`/companies/${cidPath()}/card-template/background`)
   tpl.value.hasBackground = false
+  bgImages.value = { front: null, back: null }
 }
 async function uploadFont(e: Event) {
   const file = (e.target as HTMLInputElement).files?.[0]
@@ -207,7 +282,11 @@ async function previewPdf() {
   window.open(URL.createObjectURL(res.data as Blob), '_blank')
 }
 
-onMounted(load)
+function onKey(e: KeyboardEvent) {
+  if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'z') { e.preventDefault(); undo() }
+}
+onMounted(() => { load(); window.addEventListener('keydown', onKey) })
+onUnmounted(() => window.removeEventListener('keydown', onKey))
 </script>
 
 <template>
@@ -218,6 +297,7 @@ onMounted(load)
         <select v-if="companies.length > 1" class="input" v-model="selectedCompanyId" @change="loadTemplate">
           <option v-for="c in companies" :key="c['@id']" :value="c['@id']">{{ c.name }}</option>
         </select>
+        <button class="btn btn-ghost" :disabled="!history.length" @click="undo" title="Rückgängig (Strg+Z)">↶</button>
         <button class="btn btn-ghost" @click="previewPdf">PDF-Vorschau</button>
         <button class="btn btn-primary" :disabled="saving" @click="save">{{ saving ? 'Speichern…' : 'Speichern' }}</button>
       </div>
@@ -263,10 +343,12 @@ onMounted(load)
         <div class="stage">
           <!-- Beschnitt-Fläche -->
           <div class="bleed" :style="{ width: (tpl.widthMm + 2 * tpl.bleedMm) * SCALE + 'px', height: (tpl.heightMm + 2 * tpl.bleedMm) * SCALE + 'px' }">
+            <!-- Hintergrund-PDF als Bild (füllt inkl. Beschnitt) -->
+            <img v-if="currentBg" :src="currentBg" class="bg-img" />
             <!-- Endformat (Trim) -->
-            <div class="trim" :style="{ left: tpl.bleedMm * SCALE + 'px', top: tpl.bleedMm * SCALE + 'px', width: tpl.widthMm * SCALE + 'px', height: tpl.heightMm * SCALE + 'px' }" @mousedown.self="selectedIndex = null">
-              <!-- Hinweis: Hintergrund-PDF aktiv (echtes Bild in der PDF-Vorschau) -->
-              <div v-if="tpl.hasBackground" class="bg-note">Hintergrund-PDF aktiv<br /><small>sichtbar in der PDF-Vorschau</small></div>
+            <div class="trim" :class="{ transparent: !!currentBg }" :style="{ left: tpl.bleedMm * SCALE + 'px', top: tpl.bleedMm * SCALE + 'px', width: tpl.widthMm * SCALE + 'px', height: tpl.heightMm * SCALE + 'px' }" @mousedown.self="selectedIndex = null">
+              <!-- Hinweis nur, solange Hintergrund-PDF noch nicht gerendert ist -->
+              <div v-if="tpl.hasBackground && !currentBg" class="bg-note">Hintergrund-PDF wird geladen…</div>
               <!-- Sicherheitsabstand -->
               <div class="safe" :style="{ inset: tpl.safeMm * SCALE + 'px' }"></div>
               <!-- Elemente -->
@@ -280,6 +362,7 @@ onMounted(load)
                 <div v-else-if="el.type === 'qr'" class="ph-qr">QR</div>
                 <img v-else-if="el.type === 'image' && branding.logoUrl" :src="branding.logoUrl" class="logo-img" />
                 <div v-else-if="el.type === 'image'" class="ph-logo">Logo</div>
+                <div v-if="i === selectedIndex" class="handle" @mousedown.stop="startResize($event, i)"></div>
               </div>
             </div>
           </div>
@@ -377,7 +460,10 @@ onMounted(load)
 .bg-note small { font-size: 10px; }
 .stage { background: #ececec; border-radius: var(--radius); padding: 1.5rem; display: flex; flex-direction: column; align-items: center; overflow-x: auto; }
 .bleed { position: relative; background: #fbe9da; box-shadow: var(--shadow-sm); }
-.trim { position: absolute; background: #fff; overflow: hidden; }
+.bg-img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
+.trim { position: absolute; background: #fff; overflow: hidden; z-index: 1; }
+.trim.transparent { background: transparent; }
+.handle { position: absolute; right: -5px; bottom: -5px; width: 10px; height: 10px; background: var(--psc-orange); border: 2px solid #fff; border-radius: 2px; cursor: nwse-resize; z-index: 5; }
 .safe { position: absolute; border: 1px dashed #c9c9c9; pointer-events: none; }
 .el { position: absolute; cursor: move; user-select: none; }
 .el.sel { outline: 2px solid var(--psc-orange); outline-offset: 1px; }