fix: Etiketten werden beim Drucken abgeschnitten, wenn Spalten/Zeilen zu gross gewaehlt sind

Eine explizit im Etiketten-Designer eingetragene Spalten-/Zeilenzahl
wurde beim PDF-Rendern ungeprueft uebernommen. Passt sie nicht auf ein
A4-Blatt (z.B. 90mm breite Etiketten x 4 Spalten bei 5mm Rand), ragen
die hinteren Spalten/Zeilen ueber den Blattrand hinaus - der Drucker
schneidet sie dann einfach ab, statt sie zu drucken.

- Backend (label-templates.service.ts): Spalten/Zeilen werden jetzt auf
  das tatsaechlich auf A4 passende Maximum begrenzt, bevor gerendert
  wird - betrifft auch bereits gespeicherte Vorlagen mit zu grossen
  Werten.
- Frontend (label-designer.tsx): zeigt die maximal passende Spalten-/
  Zeilenzahl direkt im Seiten-Layout-Panel an und warnt inline, wenn
  der eingetragene Wert das Blatt sprengen wuerde.

Co-Authored-By: Claude Sonnet 5 <[email protected]>

ApiCore-Frontend/src/app/(app)/settings/label-templates/designer/label-designer.tsx

@@ -35,6 +35,8 @@ import { LabelCanvas } from "./label-canvas";
 import { ElementPropertiesPanel } from "./element-properties-panel";
 
 const ELEMENT_TYPES = ["text", "qrCode", "image", "line"] as const;
+const A4_WIDTH_MM = 210;
+const A4_HEIGHT_MM = 297;
 const ZOOM_STEPS: number[] = [0.5, 0.75, 1, 1.25, 1.5, 2];
 const ZOOM_MIN = ZOOM_STEPS[0];
 const ZOOM_MAX = ZOOM_STEPS[ZOOM_STEPS.length - 1];
@@ -152,6 +154,21 @@ export function LabelDesigner({ initial, onSubmit, submitLabel }: LabelDesignerP
 
   const selectedElement = elements.find((element) => element.id === selectedId) ?? null;
 
+  // Mirrors the backend's clamp in label-templates.service.ts exactly, so
+  // the hint shown here always matches what actually prints - a value typed
+  // in above this is silently capped server-side rather than running labels
+  // off the physical A4 page.
+  const maxColumns = Math.max(
+    1,
+    Math.floor((A4_WIDTH_MM - 2 * marginLeftMm + gapXMm) / (widthMm + gapXMm)),
+  );
+  const maxRows = Math.max(
+    1,
+    Math.floor((A4_HEIGHT_MM - 2 * marginTopMm + gapYMm) / (heightMm + gapYMm)),
+  );
+  const columnsExceedsMax = columns !== null && columns > maxColumns;
+  const rowsExceedsMax = rows !== null && rows > maxRows;
+
   function addElement(element: LabelElement) {
     setElements((current) => [...current, element]);
     setSelectedId(element.id);
@@ -365,9 +382,11 @@ export function LabelDesigner({ initial, onSubmit, submitLabel }: LabelDesignerP
           </CardHeader>
           <CardContent className="flex flex-col gap-4">
             <p className="text-xs text-muted-foreground">
-              Spalten/Zeilen leer lassen, um automatisch so viele einzuplanen wie passen. Feste
-              Werte eintragen, um exakt zum vorgedruckten Raster eines Etikettenbogens (z.B.
-              Avery-Vorlage) zu passen.
+              Spalten/Zeilen leer lassen, um automatisch so viele einzuplanen wie passen (aktuell{" "}
+              {maxColumns} × {maxRows}). Feste Werte eintragen, um exakt zum vorgedruckten Raster
+              eines Etikettenbogens (z.B. Avery-Vorlage) zu passen - mehr als {maxColumns} Spalten
+              bzw. {maxRows} Zeilen passen bei dieser Etikettengröße und diesen Rändern nicht auf
+              ein A4-Blatt und werden beim Drucken abgeschnitten.
             </p>
             <div className="flex gap-3">
               <div className="flex flex-1 flex-col gap-2">
@@ -382,6 +401,11 @@ export function LabelDesigner({ initial, onSubmit, submitLabel }: LabelDesignerP
                     setColumns(event.target.value === "" ? null : Number(event.target.value))
                   }
                 />
+                {columnsExceedsMax ? (
+                  <p className="text-xs text-destructive">
+                    Passt nicht auf A4 - maximal {maxColumns} Spalte{maxColumns === 1 ? "" : "n"}.
+                  </p>
+                ) : null}
               </div>
               <div className="flex flex-1 flex-col gap-2">
                 <Label htmlFor="designer-rows">Zeilen</Label>
@@ -395,6 +419,11 @@ export function LabelDesigner({ initial, onSubmit, submitLabel }: LabelDesignerP
                     setRows(event.target.value === "" ? null : Number(event.target.value))
                   }
                 />
+                {rowsExceedsMax ? (
+                  <p className="text-xs text-destructive">
+                    Passt nicht auf A4 - maximal {maxRows} Zeile{maxRows === 1 ? "" : "n"}.
+                  </p>
+                ) : null}
               </div>
             </div>
             <div className="flex gap-3">