diff --git a/app/templates/v2/screens/scorecard_portrait.html b/app/templates/v2/screens/scorecard_portrait.html
index 93e5b67..0972fa8 100644
--- a/app/templates/v2/screens/scorecard_portrait.html
+++ b/app/templates/v2/screens/scorecard_portrait.html
@@ -44,7 +44,10 @@
   }
 
   /* Browser-Preview — skaliert die Card auf Viewport-Breite, scrollbar
-     wenn die Hoehe nicht reicht. WeasyPrint ignoriert @media screen. */
+     wenn die Hoehe nicht reicht. WeasyPrint ignoriert @media screen.
+     Die eigentliche Skalierung wird per JS gesetzt (CSS calc/scale
+     mit Unit-Mismatch geht nicht), CSS-Defaults sorgen nur fuer das
+     Drumherum. */
   @media screen {
     html, body {
       background: #2a2724 !important;
@@ -61,15 +64,14 @@
       align-items: flex-start;
     }
     .card-viewport {
-      width: min(1080px, calc(100vw - 40px));
-      aspect-ratio: 1080 / 1350;
+      width: 1080px;
+      height: 1350px;
       overflow: hidden;
       position: relative;
       box-shadow: 0 30px 80px rgba(0,0,0,0.5);
       background: var(--paper);
     }
     .card {
-      transform: scale(calc(min(1080px, 100vw - 40px) / 1080));
       transform-origin: top left;
       position: absolute;
       top: 0; left: 0;
@@ -264,5 +266,34 @@
 </div>
 </div>{# .card-viewport #}
 
+<script>
+/* Browser-Preview-Skalierung: passt die 1080×1350-Card proportional auf
+   den verfuegbaren Viewport an. WeasyPrint fuehrt kein JS aus → PDF
+   bleibt bei skalierungsfreier Originalgroesse. */
+(function () {
+  function adjustScale() {
+    var card = document.querySelector('.card');
+    var viewport = document.querySelector('.card-viewport');
+    if (!card || !viewport) return;
+    var pad = 40;
+    var availW = window.innerWidth  - pad;
+    var availH = window.innerHeight - pad;
+    var scaleW = availW / 1080;
+    var scaleH = availH / 1350;
+    var scale  = Math.min(scaleW, 1);   // bei Desktop nicht hochskalieren
+    if (availH < 1350) {
+      // Wenn die Hoehe nicht reicht: scrollen statt nochmal verkleinern
+      // (User kann scrollen, lieber lesbar als mini).
+    }
+    card.style.transform = 'scale(' + scale + ')';
+    viewport.style.width  = (1080 * scale) + 'px';
+    viewport.style.height = (1350 * scale) + 'px';
+  }
+  adjustScale();
+  window.addEventListener('resize', adjustScale);
+  window.addEventListener('load', adjustScale);
+})();
+</script>
+
 </body>
 </html>