fix: show per-word colors in grid table instead of whole-cell coloring

When a cell has colored words (red !, blue phonetics), render each
word as a separate span with its own color instead of coloring the
entire input text with the first non-black color found.

Switches to editable input on cell selection (click).

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

admin-lehrer/components/grid-editor/GridTable.tsx

@@ -131,6 +131,9 @@ export function GridTable({
                 const isBold = col.bold || cell?.is_bold
                 const isLowConf = cell && cell.confidence > 0 && cell.confidence < 60
                 const cellColor = getCellColor(cell)
+                const hasColoredWords = cell?.word_boxes?.some(
+                  (wb) => wb.color_name && wb.color_name !== 'black',
+                ) ?? false
 
                 return (
                   <td
@@ -147,6 +150,32 @@ export function GridTable({
                           title={`Farbe: ${cell?.word_boxes?.find(wb => wb.color_name !== 'black')?.color_name}`}
                         />
                       )}
+                      {/* Per-word colored display when not editing */}
+                      {hasColoredWords && !isSelected ? (
+                        <div
+                          className={`w-full px-2 py-1.5 cursor-text truncate ${
+                            isBold ? 'font-bold' : 'font-normal'
+                          } ${row.is_header ? 'text-base' : 'text-sm'}`}
+                          onClick={() => {
+                            onSelectCell(cellId)
+                            setTimeout(() => document.getElementById(`cell-${cellId}`)?.focus(), 0)
+                          }}
+                        >
+                          {cell!.word_boxes!.map((wb, i) => (
+                            <span
+                              key={i}
+                              style={
+                                wb.color_name && wb.color_name !== 'black'
+                                  ? { color: wb.color }
+                                  : undefined
+                              }
+                            >
+                              {wb.text}
+                              {i < cell!.word_boxes!.length - 1 ? ' ' : ''}
+                            </span>
+                          ))}
+                        </div>
+                      ) : (
                         <input
                           id={`cell-${cellId}`}
                           type="text"
@@ -159,9 +188,9 @@ export function GridTable({
                           className={`w-full px-2 py-1.5 bg-transparent border-0 outline-none ${
                             isBold ? 'font-bold' : 'font-normal'
                           } ${row.is_header ? 'text-base' : 'text-sm'}`}
-                        style={cellColor ? { color: cellColor } : undefined}
                           spellCheck={false}
                         />
+                      )}
                     </div>
                   </td>
                 )