[split-required] Split website + studio-v2 monoliths (Phase 3 continued)

Website (14 monoliths split):
- compliance/page.tsx (1,519 → 9), docs/audit (1,262 → 20)
- quality (1,231 → 16), alerts (1,203 → 10), docs (1,202 → 11)
- i18n.ts (1,173 → 8 language files)
- unity-bridge (1,094 → 12), backlog (1,087 → 6)
- training (1,066 → 8), rag (1,063 → 8)
- Deleted index_original.ts (4,899 LOC dead backup)

Studio-v2 (5 monoliths split):
- meet/page.tsx (1,481 → 9), messages (1,166 → 9)
- AlertsB2BContext.tsx (1,165 → 5 modules)
- alerts-b2b/page.tsx (1,019 → 6), korrektur/archiv (1,001 → 6)

All existing imports preserved. Zero new TypeScript errors.

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

website/app/admin/backlog/_components/BacklogItemCard.tsx

@@ -0,0 +1,133 @@
+'use client'
+
+import type { BacklogItem, BacklogCategory } from './types'
+import { statusLabels, priorityLabels } from './types'
+
+export function BacklogItemCard({
+  item,
+  category,
+  isExpanded,
+  onToggleExpand,
+  onUpdateStatus,
+  onToggleSubtask,
+}: {
+  item: BacklogItem
+  category: BacklogCategory | undefined
+  isExpanded: boolean
+  onToggleExpand: () => void
+  onUpdateStatus: (status: BacklogItem['status']) => void
+  onToggleSubtask: (subtaskId: string) => void
+}) {
+  const completedSubtasks = item.subtasks?.filter((st) => st.completed).length || 0
+  const totalSubtasks = item.subtasks?.length || 0
+
+  return (
+    <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
+      <div
+        className="p-4 cursor-pointer hover:bg-slate-50 transition-colors"
+        onClick={onToggleExpand}
+      >
+        <div className="flex items-start gap-4">
+          {/* Expand Icon */}
+          <button className="mt-1 text-slate-400">
+            <svg
+              className={`w-5 h-5 transition-transform ${isExpanded ? 'rotate-90' : ''}`}
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M9 5l7 7-7 7"
+              />
+            </svg>
+          </button>
+
+          {/* Content */}
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center gap-3 mb-1">
+              <h3 className="font-semibold text-slate-900 truncate">{item.title}</h3>
+              <span
+                className={`px-2 py-0.5 rounded text-xs font-medium ${
+                  priorityLabels[item.priority].color
+                }`}
+              >
+                {priorityLabels[item.priority].label}
+              </span>
+            </div>
+            <p className="text-sm text-slate-500 mb-2">{item.description}</p>
+            <div className="flex items-center gap-4 text-xs">
+              <span className={`px-2 py-1 rounded border ${category?.color}`}>
+                {category?.name}
+              </span>
+              {totalSubtasks > 0 && (
+                <span className="text-slate-500">
+                  {completedSubtasks}/{totalSubtasks} Teilaufgaben
+                </span>
+              )}
+            </div>
+          </div>
+
+          {/* Status */}
+          <select
+            value={item.status}
+            onChange={(e) => {
+              e.stopPropagation()
+              onUpdateStatus(e.target.value as BacklogItem['status'])
+            }}
+            onClick={(e) => e.stopPropagation()}
+            className={`px-3 py-1.5 rounded-lg text-sm font-medium border-0 cursor-pointer ${
+              statusLabels[item.status].color
+            }`}
+          >
+            {Object.entries(statusLabels).map(([value, { label }]) => (
+              <option key={value} value={value}>
+                {label}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        {/* Progress Bar for subtasks */}
+        {totalSubtasks > 0 && (
+          <div className="mt-3 ml-9">
+            <div className="w-full bg-slate-200 rounded-full h-1.5">
+              <div
+                className="bg-green-500 h-1.5 rounded-full transition-all"
+                style={{ width: `${(completedSubtasks / totalSubtasks) * 100}%` }}
+              />
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Expanded Subtasks */}
+      {isExpanded && item.subtasks && item.subtasks.length > 0 && (
+        <div className="border-t border-slate-200 bg-slate-50 p-4 pl-14">
+          <h4 className="text-sm font-medium text-slate-700 mb-3">Teilaufgaben</h4>
+          <ul className="space-y-2">
+            {item.subtasks.map((subtask) => (
+              <li key={subtask.id} className="flex items-center gap-3">
+                <input
+                  type="checkbox"
+                  checked={subtask.completed}
+                  onChange={() => onToggleSubtask(subtask.id)}
+                  className="w-4 h-4 rounded border-slate-300 text-primary-600 focus:ring-primary-500"
+                />
+                <span
+                  className={`text-sm ${
+                    subtask.completed ? 'text-slate-400 line-through' : 'text-slate-700'
+                  }`}
+                >
+                  {subtask.title}
+                </span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  )
+}