feat: 180°-Rotation fuer Pixel-Matching im Overlay-Modus

- usePixelWordPositions: neuer rotation-Parameter (0 | 180)
- Bei 180°: Bild auf Canvas rotiert, Zell-Koordinaten transformiert,
  Cluster-Positionen zurueck-gespiegelt
- StepReconstruction: 180°-Toggle-Button in Overlay-Toolbar
- Default 180° bei Parent-Sessions mit Boxen
- Linkes Originalbild wird ebenfalls CSS-rotiert

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

admin-lehrer/components/ocr-pipeline/StepReconstruction.tsx

@@ -59,6 +59,7 @@ export function StepReconstruction({ sessionId, onNext }: StepReconstructionProp
   const [imageNaturalSize, setImageNaturalSize] = useState<{ w: number; h: number } | null>(null)
   const [fontScale, setFontScale] = useState(0.7)
   const [globalBold, setGlobalBold] = useState(false)
+  const [imageRotation, setImageRotation] = useState<0 | 180>(0)
   const reconRef = useRef<HTMLDivElement>(null)
   const [reconWidth, setReconWidth] = useState(0)
 
@@ -70,6 +71,7 @@ export function StepReconstruction({ sessionId, onNext }: StepReconstructionProp
     overlayImageUrl,
     mergedGridCells,
     editorMode === 'overlay',
+    imageRotation,
   )
 
   // Track reconstruction container width for font size calculation
@@ -138,6 +140,7 @@ export function StepReconstruction({ sessionId, onNext }: StepReconstructionProp
       const hasBoxes = subSessions.length > 0 && zones.some(z => z.zone_type === 'box')
 
       setIsParentWithBoxes(hasBoxes)
+      if (hasBoxes) setImageRotation(180) // Default: rotate for correct pixel matching
 
       if (columnResult?.columns) setParentColumns(columnResult.columns)
       if (rowResult?.rows) setParentRows(rowResult.rows)
@@ -493,6 +496,7 @@ export function StepReconstruction({ sessionId, onNext }: StepReconstructionProp
               src={dewarpedUrl}
               alt="Original"
               className="w-full h-auto"
+              style={imageRotation === 180 ? { transform: 'rotate(180deg)' } : undefined}
               onLoad={(e) => {
                 const img = e.target as HTMLImageElement
                 setImageNaturalSize({ w: img.naturalWidth, h: img.naturalHeight })
@@ -775,6 +779,17 @@ export function StepReconstruction({ sessionId, onNext }: StepReconstructionProp
               >
                 B
               </button>
+              <button
+                onClick={() => setImageRotation(r => r === 0 ? 180 : 0)}
+                className={`px-2 py-1 text-xs rounded border transition-colors ${
+                  imageRotation === 180
+                    ? 'bg-teal-600 text-white border-teal-600'
+                    : 'bg-white dark:bg-gray-700 text-gray-600 dark:text-gray-400 border-gray-300 dark:border-gray-600'
+                }`}
+                title="Bild 180° drehen"
+              >
+                180°
+              </button>
               <div className="w-px h-5 bg-gray-300 dark:bg-gray-600 mx-1" />
             </>
           )}