fix: Querformat-Bilder hochskalieren, Fabric-Overlay positioniert exakt

- renderImage skaliert auch hoch wenn img kleiner als Container (vorher
  blieb rechts leerer Platz bei kleinen Querformat-Handyfotos)
- max-width auf pdf-canvas entfernt (drawing-buffer != display size hat
  das Fabric-Overlay verrutschen lassen)
- resizeFabricToCanvas nutzt getBoundingClientRect für pixelgenaue
  Positionierung über requestAnimationFrame

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
[deploy]

css/bericht.css

@@ -107,7 +107,9 @@
     padding: 10px; border-radius: 4px;
     display: flex; align-items: flex-start; justify-content: center;
 }
-#pdf-canvas { background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,0.4); max-width: 100%; height: auto; }
+/* WICHTIG: kein max-width auf #pdf-canvas, sonst weicht display- von buffer-size ab
+   und das Fabric-Overlay rutscht weg. Stattdessen rendert JS auf passende Größe. */
+#pdf-canvas { background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,0.4); display: block; }
 #fabric-canvas.fabric-overlay { position: absolute !important; pointer-events: auto; }
 
 .bericht-page-note { margin-top: 8px; }

js/editor.js

@@ -127,11 +127,12 @@
         await new Promise((res) => {
             const img = new Image();
             img.onload = () => {
-                // Auf Container-Breite skalieren statt fixe 1200px
+                // Immer auf Container-Breite skalieren — auch hochskalieren wenn
+                // die Quelle kleiner ist (sonst entsteht rechts leerer Platz).
                 const target = getTargetCanvasWidth();
-                const ratio = img.width > target ? target / img.width : 1;
-                pdfCanvas.width = img.width * ratio;
-                pdfCanvas.height = img.height * ratio;
+                const ratio = target / img.width;
+                pdfCanvas.width = Math.round(img.width * ratio);
+                pdfCanvas.height = Math.round(img.height * ratio);
                 const ctx = pdfCanvas.getContext('2d');
                 ctx.clearRect(0, 0, pdfCanvas.width, pdfCanvas.height);
                 ctx.drawImage(img, 0, 0, pdfCanvas.width, pdfCanvas.height);
@@ -144,13 +145,25 @@
     }
 
     function resizeFabricToCanvas() {
+        // Die tatsächlich angezeigte Größe (nicht der Drawing-Buffer) bestimmt
+        // die Position des Fabric-Overlays. Wir setzen das Fabric-Canvas auf
+        // die Buffer-Größe (für scharfe Annotationen) und positionieren es
+        // exakt über dem sichtbaren PDF-Canvas.
         fabricCanvas.setWidth(pdfCanvas.width);
         fabricCanvas.setHeight(pdfCanvas.height);
-        // Overlay positionieren
+
+        // Warten bis der Browser die neue Größe applied hat
+        requestAnimationFrame(() => {
+            const rect = pdfCanvas.getBoundingClientRect();
+            const wrap = pdfCanvas.parentElement;
+            const wrapRect = wrap.getBoundingClientRect();
             const fc = document.getElementById('fabric-canvas');
             fc.style.position = 'absolute';
-        fc.style.left = pdfCanvas.offsetLeft + 'px';
-        fc.style.top  = pdfCanvas.offsetTop  + 'px';
+            fc.style.left   = (rect.left - wrapRect.left + wrap.scrollLeft) + 'px';
+            fc.style.top    = (rect.top  - wrapRect.top  + wrap.scrollTop)  + 'px';
+            fc.style.width  = pdfCanvas.clientWidth  + 'px';
+            fc.style.height = pdfCanvas.clientHeight + 'px';
+        });
     }
 
     async function loadPageMeta() {