StepAnsicht: use server-rendered OCR overlay image

Replace manual word_box positioning (wild/unsnapped) with the
server-rendered words-overlay image from the OCR step endpoint.
This shows the same cleanly snapped red letters as the OCR step.

Endpoint: /sessions/{id}/image/words-overlay

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

admin-lehrer/components/ocr-kombi/StepAnsicht.tsx

@@ -74,11 +74,6 @@ export function StepAnsicht({ sessionId, onNext }: StepAnsichtProps) {
   const avgRowH = (grid as any).layout_metrics?.avg_row_height_px || 31
   const scaledFont = Math.max(7, baseFontPx * scale)
 
-  // Collect all word boxes for OCR overlay
-  const allWordBoxes = grid.zones.flatMap((z) =>
-    z.cells.flatMap((c) => (c.word_boxes || []).map((wb) => ({ ...wb, zone: z })))
-  )
-
   return (
     <div className="space-y-3">
       {/* Header */}
@@ -124,32 +119,16 @@ export function StepAnsicht({ sessionId, onNext }: StepAnsichtProps) {
             Original + OCR
           </div>
 
-          {/* Scan image */}
+          {/* Server-rendered OCR overlay image (scan + red snapped letters) */}
           {sessionId && (
             <img
-              src={`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/image/cropped`}
-              alt="Original"
+              src={`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/image/words-overlay`}
+              alt="Original + OCR Overlay"
               className="absolute inset-0 w-full h-auto"
               style={{ height: `${panelHeight}px`, objectFit: 'contain' }}
             />
           )}
 
-          {/* OCR word overlay (red text) */}
-          {allWordBoxes.map((wb, i) => (
-            <div
-              key={i}
-              className="absolute text-red-500 font-mono leading-none pointer-events-none"
-              style={{
-                left: `${wb.left * scale}px`,
-                top: `${wb.top * scale}px`,
-                fontSize: `${Math.max(6, wb.height * scale * 0.75)}px`,
-                whiteSpace: 'nowrap',
-              }}
-            >
-              {wb.text}
-            </div>
-          ))}
-
           {/* Coordinate grid */}
           {showGrid && <CoordinateGrid imgW={imgW} imgH={imgH} scale={scale} spacing={gridSpacing} />}
         </div>