feat(iace): block-aware risk table + benchmark quality badges

Risk Assessment tab now shows block grouping:
- BlockAwareRiskTable: Parents bold/purple, children indented
- Collapse/expand blocks, "Abgedeckt" badge for covered children
- Ungroup button to remove child from block
- Info bar showing block count and covered children

Benchmark tab improvements:
- Green/Yellow/Red quality badges (Exakt/Aehnlich/Schwach)
- GT risk factor detail (F/W/P/S) shown per entry
- Match counts in tab header (X exakt, Y aehnlich)

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

admin-compliance/app/sdk/iace/[projectId]/benchmark/_components/HazardComparisonTable.tsx

@@ -14,8 +14,12 @@ type TabType = 'matched' | 'missing' | 'extra'
 export function HazardComparisonTable({ matched, missing, extra }: Props) {
   const [tab, setTab] = useState<TabType>('matched')
 
+  // Compute quality levels for matched pairs
+  const greenCount = matched.filter(p => p.match_score >= 0.7).length
+  const yellowCount = matched.filter(p => p.match_score >= 0.4 && p.match_score < 0.7).length
+
   const tabs: { id: TabType; label: string; count: number; color: string }[] = [
-    { id: 'matched', label: 'Zugeordnet', count: matched.length, color: 'text-green-600' },
+    { id: 'matched', label: `Zugeordnet (${greenCount} exakt, ${yellowCount} aehnlich)`, count: matched.length, color: 'text-green-600' },
     { id: 'missing', label: 'Fehlend', count: missing.length, color: 'text-red-600' },
     { id: 'extra', label: 'Zusaetzlich', count: extra.length, color: 'text-gray-500' },
   ]
@@ -63,26 +67,38 @@ function MatchedTable({ pairs }: { pairs: HazardMatchPair[] }) {
         </tr>
       </thead>
       <tbody className="divide-y divide-gray-100 dark:divide-gray-700">
-        {pairs.map((p, i) => (
-          <tr key={i} className="hover:bg-gray-50 dark:hover:bg-gray-700/30">
-            <td className="px-3 py-2 text-gray-400">{p.gt_entry.nr}</td>
-            <td className="px-3 py-2">
-              <div className="font-medium text-gray-800 dark:text-gray-200">{p.gt_entry.hazard_type}</div>
-              <div className="text-gray-400 truncate max-w-[250px]">{p.gt_entry.component_zone}</div>
-            </td>
-            <td className="px-3 py-2 text-center">
-              <RiskBadge risk={p.gt_entry.risk_in.r} />
-            </td>
-            <td className="px-3 py-2">
-              <div className="font-medium text-gray-800 dark:text-gray-200">{p.engine_hazard.name}</div>
-              <div className="text-gray-400">{p.engine_hazard.category}</div>
-            </td>
-            <td className="px-3 py-2 text-center">
-              <ScoreBadge score={p.match_score} />
-            </td>
-            <td className="px-3 py-2 text-gray-400">{p.match_reason}</td>
-          </tr>
-        ))}
+        {pairs.map((p, i) => {
+          const quality = p.match_score >= 0.7 ? 'green' : p.match_score >= 0.4 ? 'yellow' : 'red'
+          const rowBg = quality === 'green' ? 'bg-green-50/30 dark:bg-green-900/5'
+            : quality === 'yellow' ? 'bg-yellow-50/30 dark:bg-yellow-900/5' : ''
+          const gtRiskLevel = p.gt_entry.risk_in.r >= 30 ? 'hoch' : p.gt_entry.risk_in.r >= 15 ? 'mittel' : 'niedrig'
+          return (
+            <tr key={i} className={`hover:bg-gray-50 dark:hover:bg-gray-700/30 ${rowBg}`}>
+              <td className="px-3 py-2 text-gray-400">{p.gt_entry.nr}</td>
+              <td className="px-3 py-2">
+                <div className="font-medium text-gray-800 dark:text-gray-200">{p.gt_entry.hazard_type}</div>
+                <div className="text-gray-400 truncate max-w-[250px]">{p.gt_entry.component_zone}</div>
+              </td>
+              <td className="px-3 py-2 text-center">
+                <RiskBadge risk={p.gt_entry.risk_in.r} />
+                <div className="text-[9px] text-gray-400 mt-0.5">
+                  F{p.gt_entry.risk_in.f} W{p.gt_entry.risk_in.w} P{p.gt_entry.risk_in.p} S{p.gt_entry.risk_in.s}
+                </div>
+              </td>
+              <td className="px-3 py-2">
+                <div className="font-medium text-gray-800 dark:text-gray-200">{p.engine_hazard.name}</div>
+                <div className="text-gray-400">{p.engine_hazard.category}</div>
+              </td>
+              <td className="px-3 py-2 text-center">
+                <ScoreBadge score={p.match_score} />
+              </td>
+              <td className="px-3 py-2">
+                <QualityBadge quality={quality} />
+                <div className="text-[10px] text-gray-400 mt-0.5">{p.match_reason}</div>
+              </td>
+            </tr>
+          )
+        })}
       </tbody>
     </table>
   )
@@ -153,6 +169,20 @@ function ScoreBadge({ score }: { score: number }) {
   return <span className={`font-bold ${color}`}>{pct}%</span>
 }
 
+function QualityBadge({ quality }: { quality: 'green' | 'yellow' | 'red' }) {
+  const styles = {
+    green: 'bg-green-100 text-green-700 border-green-200',
+    yellow: 'bg-yellow-100 text-yellow-700 border-yellow-200',
+    red: 'bg-red-100 text-red-700 border-red-200',
+  }
+  const labels = { green: 'Exakt', yellow: 'Aehnlich', red: 'Schwach' }
+  return (
+    <span className={`inline-block px-1.5 py-0.5 rounded border text-[10px] font-medium ${styles[quality]}`}>
+      {labels[quality]}
+    </span>
+  )
+}
+
 function EmptyState({ text }: { text: string }) {
   return <div className="px-4 py-8 text-center text-sm text-gray-400">{text}</div>
 }