Vorschau-Layout und Hintergrund der Vorschauflaeche verbessert

Auf dem Handy stand die Vorschau ganz unten hinter der Gestaltung — man
musste an allen Reglern vorbeiscrollen, um den Code zu sehen. Die
Rasterplaetze werden jetzt ab "lg" ausdruecklich vergeben: auf dem Handy
folgt die Vorschau direkt auf die Eingabe, auf dem Desktop steht sie
weiterhin rechts daneben.

Das Schachbrettmuster hinter der Vorschau entfaellt. Es sollte
Transparenz sichtbar machen, aber jeder erzeugte Code bringt eine
deckende Hintergrundfarbe mit — es war nur Unruhe.

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);
 }

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>
   );