diff --git a/src/app/globals.css b/src/app/globals.css
index 428be25..ea39130 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -26,18 +26,8 @@ body {
   outline-offset: 2px;
 }
 
-/* Schachbrett hinter der Vorschau — macht helle Hintergrundfarben sichtbar. */
+/* Neutrale Fläche hinter der Vorschau. Der QR-Code bringt seine eigene
+   Hintergrundfarbe mit — der leichte Grauton hebt auch weiße Codes ab. */
 .qr-canvas {
-  background-color: #fff;
-  background-image:
-    linear-gradient(45deg, #eef2f7 25%, transparent 25%),
-    linear-gradient(-45deg, #eef2f7 25%, transparent 25%),
-    linear-gradient(45deg, transparent 75%, #eef2f7 75%),
-    linear-gradient(-45deg, transparent 75%, #eef2f7 75%);
-  background-size: 16px 16px;
-  background-position:
-    0 0,
-    0 8px,
-    8px -8px,
-    -8px 0;
+  background-color: var(--color-slate-100);
 }
diff --git a/src/components/qr-generator.tsx b/src/components/qr-generator.tsx
index c1c35a1..624fd56 100644
--- a/src/components/qr-generator.tsx
+++ b/src/components/qr-generator.tsx
@@ -236,9 +236,13 @@ export function QrGenerator({ typeId }: { typeId: QrTypeId }) {
         </div>
       </div>
 
+      {/*
+        Die Rasterplätze werden ab „lg“ ausdrücklich vergeben. Dadurch steht
+        die Vorschau auf dem Handy direkt unter der Eingabe — statt ganz unten
+        hinter der Gestaltung — und auf dem Desktop trotzdem rechts daneben.
+      */}
       <div className="grid grid-cols-1 items-start gap-6 lg:grid-cols-[minmax(0,1fr)_380px]">
-        {/* -------------------------------------------------- linke Spalte */}
-        <div className="space-y-6">
+        <div className="lg:col-start-1 lg:row-start-1">
           <Card>
             <CardTitle>Inhalt</CardTitle>
             {Form ? (
@@ -249,7 +253,25 @@ export function QrGenerator({ typeId }: { typeId: QrTypeId }) {
               </Notice>
             )}
           </Card>
+        </div>
 
+        <div className="lg:sticky lg:top-6 lg:col-start-2 lg:row-start-1 lg:row-span-3 lg:self-start">
+          <Card>
+            <CardTitle>Vorschau</CardTitle>
+            <QrPreview
+              dataUrl={shownPreview?.dataUrl ?? null}
+              content={shownPreview?.content ?? null}
+              size={design.size}
+              error={shownPreviewError ?? downloadError}
+              loading={shownPreviewLoading}
+              downloadDisabledReason={downloadDisabledReason}
+              onDownload={handleDownload}
+              downloading={downloading}
+            />
+          </Card>
+        </div>
+
+        <div className="lg:col-start-1 lg:row-start-2">
           <Card>
             <CardTitle
               hint="Statisch: die Adresse steckt direkt im Code und lässt sich später nicht mehr ändern. Dynamisch: der Code zeigt auf eine Kurz-URL, deren Ziel du jederzeit anpassen kannst."
@@ -389,7 +411,9 @@ export function QrGenerator({ typeId }: { typeId: QrTypeId }) {
               </div>
             ) : null}
           </Card>
+        </div>
 
+        <div className="lg:col-start-1 lg:row-start-3">
           <Card>
             <CardTitle hint="Farben, Größe und Fehlerkorrektur gelten für Vorschau und Download.">
               Gestaltung
@@ -397,23 +421,6 @@ export function QrGenerator({ typeId }: { typeId: QrTypeId }) {
             <DesignPanel design={design} onChange={setDesign} />
           </Card>
         </div>
-
-        {/* ------------------------------------------------- rechte Spalte */}
-        <div className="lg:sticky lg:top-6">
-          <Card>
-            <CardTitle>Vorschau</CardTitle>
-            <QrPreview
-              dataUrl={shownPreview?.dataUrl ?? null}
-              content={shownPreview?.content ?? null}
-              size={design.size}
-              error={shownPreviewError ?? downloadError}
-              loading={shownPreviewLoading}
-              downloadDisabledReason={downloadDisabledReason}
-              onDownload={handleDownload}
-              downloading={downloading}
-            />
-          </Card>
-        </div>
       </div>
     </div>
   );