fix: QR-Code overflowed Container — auf SVG umgestellt mit width/height 100%

Der QR wurde mit createImgTag() als fester Pixel-IMG gerendert und
ueberlappte den Warnhinweis + Button rechts daneben. Fix:

- createSvgTag mit cellSize=4 + scalable=true
- SVG skaliert auf width:100%/height:100% der 220x220 Box
- Container: flex-shrink:0 (damit Flex ihn nicht weiter schrumpft)
- overflow:hidden als Sicherheit

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

diagnostic/index.html

@@ -571,7 +571,7 @@
       </div>
       <div class="card" style="max-width:500px;">
         <div style="display:flex;gap:12px;align-items:flex-start;">
-          <div id="onboarding-qr" style="width:220px;height:220px;background:#1E1E2E;border-radius:6px;display:flex;align-items:center;justify-content:center;color:#555570;font-size:11px;text-align:center;padding:8px;">
+          <div id="onboarding-qr" style="width:220px;height:220px;flex-shrink:0;background:#1E1E2E;border-radius:6px;overflow:hidden;display:flex;align-items:center;justify-content:center;color:#555570;font-size:11px;text-align:center;">
             QR-Code wird geladen...
           </div>
           <div style="flex:1;font-size:11px;color:#8888AA;line-height:1.5;">
@@ -1605,8 +1605,12 @@
         const qr = window.qrcode(0, 'M');
         qr.addData(payload);
         qr.make();
-        box.innerHTML = qr.createImgTag(6, 4);
-        box.querySelector('img').style.cssText = 'background:#fff;padding:8px;border-radius:4px;display:block;';
+        // Als SVG rendern — skaliert sauber auf Container-Groesse
+        box.innerHTML = qr.createSvgTag({ cellSize: 4, margin: 2, scalable: true });
+        const svg = box.querySelector('svg');
+        if (svg) {
+          svg.style.cssText = 'width:100%;height:100%;background:#fff;border-radius:4px;padding:6px;box-sizing:border-box;display:block;';
+        }
       } catch (e) {
         box.innerHTML = `<div style="color:#FF6B6B;">Fehler: ${e.message}</div>`;
       }