[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>

studio-v2/app/messages/_components/ContactInfoPanel.tsx

@@ -0,0 +1,113 @@
+'use client'
+
+import {
+  getContactInitials,
+  getRoleLabel,
+  getRoleColor,
+  type Conversation,
+  type Contact,
+} from '@/lib/MessagesContext'
+
+interface ContactInfoPanelProps {
+  contact: Contact | undefined
+  conversation: Conversation
+  onClose: () => void
+  isDark: boolean
+}
+
+export function ContactInfoPanel({ contact, conversation, onClose, isDark }: ContactInfoPanelProps) {
+  return (
+    <div className={`w-80 backdrop-blur-2xl border-l flex flex-col ${
+      isDark
+        ? 'bg-white/5 border-white/10'
+        : 'bg-white/90 border-slate-200'
+    }`}>
+      {/* Header */}
+      <div className={`p-4 border-b ${isDark ? 'border-white/10' : 'border-slate-200'}`}>
+        <div className="flex items-center justify-between">
+          <span className={`font-semibold ${isDark ? 'text-white' : 'text-slate-900'}`}>Info</span>
+          <button
+            onClick={onClose}
+            className={`p-2 rounded-xl transition-colors ${
+              isDark ? 'hover:bg-white/10 text-white/60' : 'hover:bg-slate-100 text-slate-400'
+            }`}
+          >
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 overflow-y-auto p-4">
+        {/* Avatar & Name */}
+        <div className="text-center mb-6">
+          <div className={`w-20 h-20 mx-auto rounded-full flex items-center justify-center text-2xl font-bold mb-3 ${
+            isDark
+              ? 'bg-gradient-to-br from-green-500/30 to-emerald-500/30 text-green-300'
+              : 'bg-gradient-to-br from-green-100 to-emerald-100 text-green-700'
+          }`}>
+            {conversation.title ? getContactInitials(conversation.title) : '?'}
+          </div>
+          <h3 className={`text-lg font-semibold ${isDark ? 'text-white' : 'text-slate-900'}`}>
+            {conversation.title}
+          </h3>
+          {contact && (
+            <span className={`text-sm px-2 py-1 rounded-full ${getRoleColor(contact.role, isDark)}`}>
+              {getRoleLabel(contact.role)}
+            </span>
+          )}
+        </div>
+
+        {/* Contact Details */}
+        {contact && (
+          <div className="space-y-4">
+            {contact.email && (
+              <InfoField isDark={isDark} label="E-Mail" value={contact.email} />
+            )}
+            {contact.phone && (
+              <InfoField isDark={isDark} label="Telefon" value={contact.phone} />
+            )}
+            {contact.student_name && (
+              <InfoField isDark={isDark} label="Schueler/in"
+                value={`${contact.student_name} (${contact.class_name})`} />
+            )}
+            {contact.tags.length > 0 && (
+              <div className={`p-3 rounded-xl ${isDark ? 'bg-white/5' : 'bg-slate-50'}`}>
+                <span className={`text-xs block mb-2 ${isDark ? 'text-white/40' : 'text-slate-400'}`}>Tags</span>
+                <div className="flex flex-wrap gap-1">
+                  {contact.tags.map(tag => (
+                    <span key={tag} className={`text-xs px-2 py-1 rounded-full ${
+                      isDark ? 'bg-white/10 text-white/80' : 'bg-slate-200 text-slate-700'
+                    }`}>
+                      {tag}
+                    </span>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Group Members */}
+        {conversation.is_group && (
+          <div className={`p-3 rounded-xl ${isDark ? 'bg-white/5' : 'bg-slate-50'}`}>
+            <span className={`text-xs block mb-2 ${isDark ? 'text-white/40' : 'text-slate-400'}`}>
+              {conversation.participant_ids.length} Mitglieder
+            </span>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+function InfoField({ isDark, label, value }: { isDark: boolean; label: string; value: string }) {
+  return (
+    <div className={`p-3 rounded-xl ${isDark ? 'bg-white/5' : 'bg-slate-50'}`}>
+      <span className={`text-xs block mb-1 ${isDark ? 'text-white/40' : 'text-slate-400'}`}>{label}</span>
+      <span className={`text-sm ${isDark ? 'text-white' : 'text-slate-900'}`}>{value}</span>
+    </div>
+  )
+}