SpreadsheetView: multi-sheet tabs instead of unified single sheet

Each zone becomes its own Excel sheet tab with independent column widths:
- Sheet "Vokabeln": main content zone with EN/DE/example columns
- Sheet "Pounds and euros": Box 1 with its own 4-column layout
- Sheet "German leihen": Box 2 with single column for flowing text

This solves the column-width conflict: boxes have different column
widths optimized for their content, which is impossible in a single
unified sheet (Excel limitation: column width is per-column, not per-cell).

Sheet tabs visible at bottom (showSheetTabs: true).
Box sheets get colored tab (from box_bg_hex).
First sheet active by default.

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

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

@@ -67,16 +67,18 @@ export function StepAnsicht({ sessionId, onNext }: StepAnsichtProps) {
     }
   }, [sessionId])
 
-  // Load unified grid on mount (or build if missing)
+  // Load both grids on mount
   useEffect(() => {
     if (!sessionId) return
+    // Load multi-zone grid (for spreadsheet mode)
+    gridEditor.loadGrid()
+    // Load unified grid (for grid mode)
     ;(async () => {
       try {
         const res = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/unified-grid`)
         if (res.ok) {
           setUnifiedGrid(await res.json())
         } else {
-          // Not built yet — build it
           buildUnified()
         }
       } catch {
@@ -170,8 +172,8 @@ export function StepAnsicht({ sessionId, onNext }: StepAnsichtProps) {
 
         {/* RIGHT: Spreadsheet or Grid view */}
         <div className="flex-1 border border-gray-300 dark:border-gray-600 rounded-lg overflow-hidden bg-white dark:bg-gray-900" style={{ maxHeight: `${Math.max(700, leftHeight)}px` }}>
-          {viewMode === 'spreadsheet' && unifiedGrid ? (
-            <SpreadsheetView unifiedGrid={unifiedGrid} height={Math.max(650, leftHeight - 10)} />
+          {viewMode === 'spreadsheet' && (unifiedGrid || gridEditor.grid) ? (
+            <SpreadsheetView gridData={gridEditor.grid} height={Math.max(650, leftHeight - 10)} />
           ) : viewMode === 'grid' && unifiedZone ? (
             <div className="overflow-auto h-full">
               <div className="px-2 py-1 bg-teal-600/80 text-white text-[10px] font-medium sticky top-0 z-20">