[split-required] Split 500-1000 LOC files across all services

backend-lehrer (5 files):
- alerts_agent/db/repository.py (992 → 5), abitur_docs_api.py (956 → 3)
- teacher_dashboard_api.py (951 → 3), services/pdf_service.py (916 → 3)
- mail/mail_db.py (987 → 6)

klausur-service (5 files):
- legal_templates_ingestion.py (942 → 3), ocr_pipeline_postprocess.py (929 → 4)
- ocr_pipeline_words.py (876 → 3), ocr_pipeline_ocr_merge.py (616 → 2)
- KorrekturPage.tsx (956 → 6)

website (5 pages):
- mail (985 → 9), edu-search (958 → 8), mac-mini (950 → 7)
- ocr-labeling (946 → 7), audit-workspace (871 → 4)

studio-v2 (5 files + 1 deleted):
- page.tsx (946 → 5), MessagesContext.tsx (925 → 4)
- korrektur (914 → 6), worksheet-cleanup (899 → 6)
- useVocabWorksheet.ts (888 → 3)
- Deleted dead page-original.tsx (934 LOC)

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

studio-v2/app/_components/BackgroundBlobs.tsx

@@ -0,0 +1,41 @@
+'use client'
+
+interface BackgroundBlobsProps {
+  isDark: boolean
+}
+
+export function BackgroundBlobs({ isDark }: BackgroundBlobsProps) {
+  return (
+    <>
+      <div className="absolute inset-0 overflow-hidden pointer-events-none">
+        <div className={`absolute -top-40 -right-40 w-80 h-80 rounded-full mix-blend-multiply filter blur-3xl animate-blob ${
+          isDark ? 'bg-purple-500 opacity-70' : 'bg-purple-300 opacity-50'
+        }`} />
+        <div className={`absolute -bottom-40 -left-40 w-80 h-80 rounded-full mix-blend-multiply filter blur-3xl animate-blob animation-delay-2000 ${
+          isDark ? 'bg-blue-500 opacity-70' : 'bg-blue-300 opacity-50'
+        }`} />
+        <div className={`absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-80 h-80 rounded-full mix-blend-multiply filter blur-3xl animate-blob animation-delay-4000 ${
+          isDark ? 'bg-pink-500 opacity-70' : 'bg-pink-300 opacity-50'
+        }`} />
+      </div>
+
+      <style jsx>{`
+        @keyframes blob {
+          0% { transform: translate(0px, 0px) scale(1); }
+          33% { transform: translate(30px, -50px) scale(1.1); }
+          66% { transform: translate(-20px, 20px) scale(0.9); }
+          100% { transform: translate(0px, 0px) scale(1); }
+        }
+        .animate-blob {
+          animation: blob 7s infinite;
+        }
+        .animation-delay-2000 {
+          animation-delay: 2s;
+        }
+        .animation-delay-4000 {
+          animation-delay: 4s;
+        }
+      `}</style>
+    </>
+  )
+}

studio-v2/app/_components/DashboardContent.tsx

@@ -0,0 +1,385 @@
+'use client'
+
+import { useRouter } from 'next/navigation'
+import { useLanguage } from '@/lib/LanguageContext'
+import { useTheme } from '@/lib/ThemeContext'
+import { useAlerts } from '@/lib/AlertsContext'
+import { useMessages, formatMessageTime, getContactInitials } from '@/lib/MessagesContext'
+import { useActivity, formatDurationCompact } from '@/lib/ActivityContext'
+
+interface StatsItem {
+  labelKey: string
+  value: string
+  icon: string
+  color: string
+}
+
+interface RecentKlausur {
+  id: number
+  title: string
+  students: number
+  completed: number
+  statusKey: string
+}
+
+interface DashboardContentProps {
+  documents: { id: string }[]
+  setShowUploadModal: (show: boolean) => void
+  setSelectedTab: (tab: string) => void
+}
+
+export function DashboardContent({ documents, setShowUploadModal, setSelectedTab }: DashboardContentProps) {
+  const router = useRouter()
+  const { t } = useLanguage()
+  const { isDark } = useTheme()
+  const { alerts, unreadCount: alertsUnreadCount, markAsRead } = useAlerts()
+  const { conversations, unreadCount: messagesUnreadCount, contacts, markAsRead: markMessageAsRead } = useMessages()
+  const { stats: activityStats } = useActivity()
+
+  const timeSaved = formatDurationCompact(activityStats.weekSavedSeconds)
+  const timeSavedDisplay = activityStats.weekSavedSeconds > 0
+    ? `${timeSaved.value}${timeSaved.unit}`
+    : '0min'
+
+  const stats: StatsItem[] = [
+    { labelKey: 'stat_open_corrections', value: '12', icon: '📋', color: 'from-blue-400 to-blue-600' },
+    { labelKey: 'stat_completed_week', value: String(activityStats.activityCount), icon: '✅', color: 'from-green-400 to-green-600' },
+    { labelKey: 'stat_average', value: '2.3', icon: '📈', color: 'from-purple-400 to-purple-600' },
+    { labelKey: 'stat_time_saved', value: timeSavedDisplay, icon: '⏱', color: 'from-orange-400 to-orange-600' },
+  ]
+
+  const recentKlausuren: RecentKlausur[] = [
+    { id: 1, title: 'Deutsch LK - Textanalyse', students: 24, completed: 18, statusKey: 'status_in_progress' },
+    { id: 2, title: 'Deutsch GK - Erörterung', students: 28, completed: 28, statusKey: 'status_completed' },
+    { id: 3, title: 'Vorabitur - Gedichtanalyse', students: 22, completed: 10, statusKey: 'status_in_progress' },
+  ]
+
+  return (
+    <>
+      {/* Stats Kacheln */}
+      <div className="grid grid-cols-4 gap-6 mb-8">
+        {stats.map((stat, index) => (
+          <div
+            key={index}
+            className={`backdrop-blur-xl border rounded-3xl p-6 transition-all hover:scale-105 hover:shadow-xl cursor-pointer ${
+              isDark
+                ? 'bg-white/10 border-white/20 hover:bg-white/15'
+                : 'bg-white/70 border-black/10 hover:bg-white/90 shadow-lg'
+            }`}
+          >
+            <div className="flex items-center justify-between mb-4">
+              <div className={`w-12 h-12 bg-gradient-to-br ${stat.color} rounded-2xl flex items-center justify-center text-2xl shadow-lg`}>
+                {stat.icon}
+              </div>
+              <svg className={`w-5 h-5 ${isDark ? 'text-white/40' : 'text-slate-400'}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+              </svg>
+            </div>
+            <p className={`text-sm mb-1 ${isDark ? 'text-white/60' : 'text-slate-600'}`}>{t(stat.labelKey)}</p>
+            <p className={`text-3xl font-bold ${isDark ? 'text-white' : 'text-slate-900'}`}>{stat.value}</p>
+          </div>
+        ))}
+      </div>
+
+      {/* Dashboard Grid */}
+      <div className="grid grid-cols-3 gap-6">
+        {/* Aktuelle Klausuren Kachel */}
+        <div className={`col-span-2 backdrop-blur-xl border rounded-3xl p-6 ${
+          isDark
+            ? 'bg-white/10 border-white/20'
+            : 'bg-white/70 border-black/10 shadow-lg'
+        }`}>
+          <div className="flex items-center justify-between mb-6">
+            <h2 className={`text-xl font-semibold ${isDark ? 'text-white' : 'text-slate-900'}`}>{t('recent_klausuren')}</h2>
+            <button className={`text-sm transition-colors ${
+              isDark ? 'text-white/60 hover:text-white' : 'text-slate-500 hover:text-slate-900'
+            }`}>
+              {t('show_all')} →
+            </button>
+          </div>
+
+          <div className="space-y-4">
+            {recentKlausuren.map((klausur) => (
+              <div
+                key={klausur.id}
+                className={`flex items-center gap-4 p-4 rounded-2xl transition-all cursor-pointer group ${
+                  isDark
+                    ? 'bg-white/5 hover:bg-white/10'
+                    : 'bg-slate-50 hover:bg-slate-100'
+                }`}
+              >
+                <div className="w-14 h-14 bg-gradient-to-br from-blue-400 to-purple-500 rounded-2xl flex items-center justify-center">
+                  <span className="text-2xl">📝</span>
+                </div>
+                <div className="flex-1">
+                  <h3 className={`font-medium ${isDark ? 'text-white' : 'text-slate-900'}`}>{klausur.title}</h3>
+                  <p className={`text-sm ${isDark ? 'text-white/50' : 'text-slate-500'}`}>{klausur.students} {t('students')}</p>
+                </div>
+                <div className="text-right">
+                  <span className={`px-3 py-1 rounded-full text-xs font-medium ${
+                    klausur.statusKey === 'status_completed'
+                      ? isDark ? 'bg-green-500/20 text-green-300' : 'bg-green-100 text-green-700'
+                      : isDark ? 'bg-yellow-500/20 text-yellow-300' : 'bg-yellow-100 text-yellow-700'
+                  }`}>
+                    {t(klausur.statusKey)}
+                  </span>
+                  <div className="flex items-center gap-2 mt-2">
+                    <div className={`w-24 h-1.5 rounded-full overflow-hidden ${isDark ? 'bg-white/10' : 'bg-slate-200'}`}>
+                      <div
+                        className="h-full bg-gradient-to-r from-cyan-400 to-blue-500 rounded-full"
+                        style={{ width: `${(klausur.completed / klausur.students) * 100}%` }}
+                      />
+                    </div>
+                    <span className={`text-xs ${isDark ? 'text-white/50' : 'text-slate-500'}`}>{klausur.completed}/{klausur.students}</span>
+                  </div>
+                </div>
+                <svg className={`w-5 h-5 transition-colors ${
+                  isDark ? 'text-white/30 group-hover:text-white/60' : 'text-slate-300 group-hover:text-slate-600'
+                }`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                </svg>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Schnellaktionen Kachel */}
+        <div className={`backdrop-blur-xl border rounded-3xl p-6 ${
+          isDark
+            ? 'bg-white/10 border-white/20'
+            : 'bg-white/70 border-black/10 shadow-lg'
+        }`}>
+          <h2 className={`text-xl font-semibold mb-6 ${isDark ? 'text-white' : 'text-slate-900'}`}>{t('quick_actions')}</h2>
+
+          <div className="space-y-3">
+            <button className="w-full flex items-center gap-4 p-4 bg-gradient-to-r from-blue-500 to-purple-500 rounded-2xl text-white hover:shadow-xl hover:shadow-purple-500/30 transition-all hover:scale-105">
+              <span className="text-2xl">➕</span>
+              <span className="font-medium">{t('create_klausur')}</span>
+            </button>
+
+            <button
+              onClick={() => setShowUploadModal(true)}
+              className={`w-full flex items-center gap-4 p-4 rounded-2xl transition-all ${
+              isDark
+                ? 'bg-white/10 text-white hover:bg-white/20'
+                : 'bg-slate-100 text-slate-800 hover:bg-slate-200'
+            }`}>
+              <span className="text-2xl">📤</span>
+              <span className="font-medium">{t('upload_work')}</span>
+            </button>
+
+            <button
+              onClick={() => setSelectedTab('dokumente')}
+              className={`w-full flex items-center justify-between p-4 rounded-2xl transition-all ${
+              isDark
+                ? 'bg-white/10 text-white hover:bg-white/20'
+                : 'bg-slate-100 text-slate-800 hover:bg-slate-200'
+            }`}>
+              <div className="flex items-center gap-4">
+                <span className="text-2xl">📁</span>
+                <span className="font-medium">{t('nav_dokumente')}</span>
+              </div>
+              {documents.length > 0 && (
+                <span className={`px-2 py-1 text-xs font-medium rounded-full ${
+                  isDark ? 'bg-white/20' : 'bg-slate-200'
+                }`}>
+                  {documents.length}
+                </span>
+              )}
+            </button>
+
+            <button
+              onClick={() => router.push('/worksheet-editor')}
+              className={`w-full flex items-center gap-4 p-4 rounded-2xl transition-all ${
+              isDark
+                ? 'bg-gradient-to-r from-purple-500/20 to-pink-500/20 text-white hover:from-purple-500/30 hover:to-pink-500/30 border border-purple-500/30'
+                : 'bg-gradient-to-r from-purple-50 to-pink-50 text-slate-800 hover:from-purple-100 hover:to-pink-100 border border-purple-200'
+            }`}>
+              <span className="text-2xl">🎨</span>
+              <span className="font-medium">{t('nav_worksheet_editor')}</span>
+            </button>
+
+            <button className={`w-full flex items-center gap-4 p-4 rounded-2xl transition-all ${
+              isDark
+                ? 'bg-white/10 text-white hover:bg-white/20'
+                : 'bg-slate-100 text-slate-800 hover:bg-slate-200'
+            }`}>
+              <span className="text-2xl">✨</span>
+              <span className="font-medium">{t('magic_help')}</span>
+            </button>
+
+            <button className={`w-full flex items-center gap-4 p-4 rounded-2xl transition-all ${
+              isDark
+                ? 'bg-white/10 text-white hover:bg-white/20'
+                : 'bg-slate-100 text-slate-800 hover:bg-slate-200'
+            }`}>
+              <span className="text-2xl">📊</span>
+              <span className="font-medium">{t('fairness_check')}</span>
+            </button>
+          </div>
+
+          {/* AI Insight mini */}
+          <div className={`mt-6 p-4 rounded-2xl border ${
+            isDark
+              ? 'bg-gradient-to-r from-pink-500/20 to-purple-500/20 border-pink-500/30'
+              : 'bg-gradient-to-r from-pink-50 to-purple-50 border-pink-200'
+          }`}>
+            <div className="flex items-center gap-3 mb-2">
+              <span className="text-lg">🤖</span>
+              <span className={`text-sm font-medium ${isDark ? 'text-white/80' : 'text-slate-700'}`}>{t('ai_tip')}</span>
+            </div>
+            <p className={`text-sm ${isDark ? 'text-white/60' : 'text-slate-600'}`}>
+              {t('ai_tip_text')}
+            </p>
+          </div>
+
+          {/* Alerts Kachel */}
+          <div className={`mt-6 backdrop-blur-xl border rounded-2xl p-4 ${
+            isDark
+              ? 'bg-gradient-to-r from-amber-500/10 to-orange-500/10 border-amber-500/30'
+              : 'bg-gradient-to-r from-amber-50 to-orange-50 border-amber-200'
+          }`}>
+            <div className="flex items-center justify-between mb-3">
+              <h3 className={`font-semibold flex items-center gap-2 ${isDark ? 'text-white' : 'text-slate-900'}`}>
+                <span>🔔</span> Aktuelle Alerts
+              </h3>
+              {alertsUnreadCount > 0 && (
+                <span className="text-xs px-2 py-1 rounded-full bg-amber-500/20 text-amber-500 font-medium">
+                  {alertsUnreadCount} neu
+                </span>
+              )}
+            </div>
+
+            <div className="space-y-2">
+              {alerts.slice(0, 3).map(alert => (
+                <button
+                  key={alert.id}
+                  onClick={() => {
+                    markAsRead(alert.id)
+                    router.push('/alerts')
+                  }}
+                  className={`w-full text-left p-2 rounded-lg transition-all text-sm ${
+                    isDark
+                      ? `hover:bg-white/10 ${!alert.isRead ? 'bg-white/5' : ''}`
+                      : `hover:bg-white ${!alert.isRead ? 'bg-white/50' : ''}`
+                  }`}
+                >
+                  <div className="flex items-start gap-2">
+                    {!alert.isRead && (
+                      <span className="w-1.5 h-1.5 rounded-full bg-amber-500 mt-1.5 flex-shrink-0" />
+                    )}
+                    <p className={`truncate ${isDark ? 'text-white/80' : 'text-slate-700'}`}>
+                      {alert.title}
+                    </p>
+                  </div>
+                </button>
+              ))}
+              {alerts.length === 0 && (
+                <p className={`text-sm ${isDark ? 'text-white/40' : 'text-slate-400'}`}>
+                  Keine Alerts vorhanden
+                </p>
+              )}
+            </div>
+
+            <button
+              onClick={() => router.push('/alerts')}
+              className={`w-full mt-3 text-sm font-medium ${
+                isDark ? 'text-amber-400 hover:text-amber-300' : 'text-amber-600 hover:text-amber-700'
+              }`}
+            >
+              Alle Alerts anzeigen →
+            </button>
+          </div>
+
+          {/* Nachrichten Kachel */}
+          <div className={`mt-6 backdrop-blur-xl border rounded-2xl p-4 ${
+            isDark
+              ? 'bg-gradient-to-r from-green-500/10 to-emerald-500/10 border-green-500/30'
+              : 'bg-gradient-to-r from-green-50 to-emerald-50 border-green-200'
+          }`}>
+            <div className="flex items-center justify-between mb-3">
+              <h3 className={`font-semibold flex items-center gap-2 ${isDark ? 'text-white' : 'text-slate-900'}`}>
+                <span>💬</span> {t('nav_messages')}
+              </h3>
+              {messagesUnreadCount > 0 && (
+                <span className="text-xs px-2 py-1 rounded-full bg-green-500/20 text-green-500 font-medium">
+                  {messagesUnreadCount} neu
+                </span>
+              )}
+            </div>
+
+            <div className="space-y-2">
+              {conversations.slice(0, 3).map(conv => {
+                const contact = contacts.find(c => conv.participant_ids.includes(c.id))
+                return (
+                  <button
+                    key={conv.id}
+                    onClick={() => {
+                      if (conv.unread_count > 0) {
+                        markMessageAsRead(conv.id)
+                      }
+                      router.push('/messages')
+                    }}
+                    className={`w-full text-left p-2 rounded-lg transition-all text-sm ${
+                      isDark
+                        ? `hover:bg-white/10 ${conv.unread_count > 0 ? 'bg-white/5' : ''}`
+                        : `hover:bg-white ${conv.unread_count > 0 ? 'bg-white/50' : ''}`
+                    }`}
+                  >
+                    <div className="flex items-center gap-2">
+                      <div className={`w-8 h-8 rounded-full flex items-center justify-center text-xs font-medium flex-shrink-0 ${
+                        contact?.online
+                          ? isDark
+                            ? 'bg-green-500/30 text-green-300'
+                            : 'bg-green-200 text-green-700'
+                          : isDark
+                            ? 'bg-slate-600 text-slate-300'
+                            : 'bg-slate-200 text-slate-600'
+                      }`}>
+                        {conv.title ? getContactInitials(conv.title) : '?'}
+                      </div>
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-2">
+                          {conv.unread_count > 0 && (
+                            <span className="w-1.5 h-1.5 rounded-full bg-green-500 flex-shrink-0" />
+                          )}
+                          <span className={`font-medium truncate ${isDark ? 'text-white' : 'text-slate-900'}`}>
+                            {conv.title || 'Unbenannt'}
+                          </span>
+                        </div>
+                        {conv.last_message && (
+                          <p className={`text-xs truncate ${isDark ? 'text-white/50' : 'text-slate-500'}`}>
+                            {conv.last_message}
+                          </p>
+                        )}
+                      </div>
+                      {conv.last_message_time && (
+                        <span className={`text-xs flex-shrink-0 ${isDark ? 'text-white/40' : 'text-slate-400'}`}>
+                          {formatMessageTime(conv.last_message_time)}
+                        </span>
+                      )}
+                    </div>
+                  </button>
+                )
+              })}
+              {conversations.length === 0 && (
+                <p className={`text-sm ${isDark ? 'text-white/40' : 'text-slate-400'}`}>
+                  Keine Nachrichten vorhanden
+                </p>
+              )}
+            </div>
+
+            <button
+              onClick={() => router.push('/messages')}
+              className={`w-full mt-3 text-sm font-medium ${
+                isDark ? 'text-green-400 hover:text-green-300' : 'text-green-600 hover:text-green-700'
+              }`}
+            >
+              Alle Nachrichten anzeigen →
+            </button>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

studio-v2/app/_components/DocumentsTab.tsx

@@ -0,0 +1,91 @@
+'use client'
+
+import { useTheme } from '@/lib/ThemeContext'
+import { DocumentSpace } from '@/components/DocumentSpace'
+
+interface StoredDocument {
+  id: string
+  name: string
+  type: string
+  size: number
+  uploadedAt: Date
+  url?: string
+}
+
+interface DocumentsTabProps {
+  documents: StoredDocument[]
+  onDelete: (id: string) => void
+  onRename: (id: string, newName: string) => void
+  setShowUploadModal: (show: boolean) => void
+  setShowQRModal: (show: boolean) => void
+}
+
+export function DocumentsTab({ documents, onDelete, onRename, setShowUploadModal, setShowQRModal }: DocumentsTabProps) {
+  const { isDark } = useTheme()
+
+  return (
+    <div className="space-y-6">
+      {/* Upload-Optionen */}
+      <div className="grid grid-cols-2 gap-6">
+        <button
+          onClick={() => setShowUploadModal(true)}
+          className={`p-6 rounded-3xl border backdrop-blur-xl text-left transition-all hover:scale-105 ${
+            isDark
+              ? 'bg-white/10 border-white/20 hover:bg-white/15'
+              : 'bg-white/70 border-black/10 hover:bg-white/90 shadow-lg'
+          }`}
+        >
+          <div className={`w-14 h-14 rounded-2xl flex items-center justify-center text-3xl mb-4 ${
+            isDark ? 'bg-blue-500/20' : 'bg-blue-100'
+          }`}>
+            📤
+          </div>
+          <h3 className={`text-lg font-semibold mb-2 ${isDark ? 'text-white' : 'text-slate-900'}`}>
+            Direkt hochladen
+          </h3>
+          <p className={`text-sm ${isDark ? 'text-white/60' : 'text-slate-500'}`}>
+            Ziehen Sie Dateien hierher oder klicken Sie zum Auswaehlen
+          </p>
+        </button>
+
+        <button
+          onClick={() => setShowQRModal(true)}
+          className={`p-6 rounded-3xl border backdrop-blur-xl text-left transition-all hover:scale-105 ${
+            isDark
+              ? 'bg-white/10 border-white/20 hover:bg-white/15'
+              : 'bg-white/70 border-black/10 hover:bg-white/90 shadow-lg'
+          }`}
+        >
+          <div className={`w-14 h-14 rounded-2xl flex items-center justify-center text-3xl mb-4 ${
+            isDark ? 'bg-purple-500/20' : 'bg-purple-100'
+          }`}>
+            📱
+          </div>
+          <h3 className={`text-lg font-semibold mb-2 ${isDark ? 'text-white' : 'text-slate-900'}`}>
+            Mit Mobiltelefon hochladen
+          </h3>
+          <p className={`text-sm ${isDark ? 'text-white/60' : 'text-slate-500'}`}>
+            QR-Code scannen (nur im lokalen Netzwerk)
+          </p>
+        </button>
+      </div>
+
+      {/* Document Space */}
+      <div className={`rounded-3xl border backdrop-blur-xl p-6 ${
+        isDark
+          ? 'bg-white/10 border-white/20'
+          : 'bg-white/70 border-black/10 shadow-lg'
+      }`}>
+        <h2 className={`text-xl font-semibold mb-6 ${isDark ? 'text-white' : 'text-slate-900'}`}>
+          Meine Dokumente
+        </h2>
+        <DocumentSpace
+          documents={documents}
+          onDelete={onDelete}
+          onRename={onRename}
+          onOpen={(doc) => doc.url && window.open(doc.url, '_blank')}
+        />
+      </div>
+    </div>
+  )
+}

studio-v2/app/_components/HeaderBar.tsx

@@ -0,0 +1,150 @@
+'use client'
+
+import { useRouter } from 'next/navigation'
+import { useLanguage } from '@/lib/LanguageContext'
+import { useTheme } from '@/lib/ThemeContext'
+import { useAlerts, getImportanceColor, getRelativeTime } from '@/lib/AlertsContext'
+import { LanguageDropdown } from '@/components/LanguageDropdown'
+import { ThemeToggle } from '@/components/ThemeToggle'
+
+interface HeaderBarProps {
+  showAlertsDropdown: boolean
+  setShowAlertsDropdown: (show: boolean) => void
+}
+
+export function HeaderBar({ showAlertsDropdown, setShowAlertsDropdown }: HeaderBarProps) {
+  const router = useRouter()
+  const { t } = useLanguage()
+  const { isDark } = useTheme()
+  const { alerts, unreadCount, markAsRead } = useAlerts()
+
+  return (
+    <div className="flex items-center justify-between mb-8">
+      <div>
+        <h1 className={`text-4xl font-bold mb-2 ${isDark ? 'text-white' : 'text-slate-900'}`}>{t('dashboard')}</h1>
+        <p className={isDark ? 'text-white/60' : 'text-slate-600'}>{t('dashboard_subtitle')}</p>
+      </div>
+
+      {/* Search, Language & Actions */}
+      <div className="flex items-center gap-4">
+        <div className="relative">
+          <input
+            type="text"
+            placeholder={t('search_placeholder')}
+            className={`backdrop-blur-xl border rounded-2xl px-5 py-3 pl-12 focus:outline-none focus:ring-2 w-64 transition-all ${
+              isDark
+                ? 'bg-white/10 border-white/20 text-white placeholder-white/40 focus:ring-white/30'
+                : 'bg-white/70 border-black/10 text-slate-900 placeholder-slate-400 focus:ring-indigo-300'
+            }`}
+          />
+          <svg className={`absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 ${isDark ? 'text-white/40' : 'text-slate-400'}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+          </svg>
+        </div>
+
+        <LanguageDropdown />
+        <ThemeToggle />
+
+        {/* Notifications Bell with Glow Effect */}
+        <div className="relative">
+          <button
+            onClick={() => setShowAlertsDropdown(!showAlertsDropdown)}
+            className={`relative p-3 backdrop-blur-xl border rounded-2xl transition-all ${
+              unreadCount > 0
+                ? 'animate-pulse bg-gradient-to-r from-amber-500/20 to-orange-500/20 border-amber-500/30 shadow-lg shadow-amber-500/30'
+                : isDark
+                  ? 'bg-white/10 border-white/20 hover:bg-white/20'
+                  : 'bg-black/5 border-black/10 hover:bg-black/10'
+            } ${isDark ? 'text-white' : 'text-slate-700'}`}
+          >
+            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
+            </svg>
+            {unreadCount > 0 && (
+              <span className="absolute -top-1 -right-1 w-5 h-5 bg-red-500 rounded-full text-xs text-white flex items-center justify-center font-medium">
+                {unreadCount > 9 ? '9+' : unreadCount}
+              </span>
+            )}
+          </button>
+
+          {/* Alerts Dropdown */}
+          {showAlertsDropdown && (
+            <>
+              <div className="fixed inset-0 z-40" onClick={() => setShowAlertsDropdown(false)} />
+              <div className={`absolute right-0 mt-2 w-80 rounded-2xl border shadow-xl z-50 ${
+                isDark
+                  ? 'bg-slate-900 border-white/20'
+                  : 'bg-white border-slate-200'
+              }`}>
+                <div className={`p-4 border-b ${isDark ? 'border-white/10' : 'border-slate-100'}`}>
+                  <div className="flex items-center justify-between">
+                    <h3 className={`font-semibold ${isDark ? 'text-white' : 'text-slate-900'}`}>
+                      Aktuelle Alerts
+                    </h3>
+                    {unreadCount > 0 && (
+                      <span className="px-2 py-0.5 text-xs font-medium rounded-full bg-amber-500/20 text-amber-500">
+                        {unreadCount} neu
+                      </span>
+                    )}
+                  </div>
+                </div>
+                <div className="max-h-80 overflow-y-auto">
+                  {alerts.slice(0, 5).map(alert => (
+                    <button
+                      key={alert.id}
+                      onClick={() => {
+                        markAsRead(alert.id)
+                        setShowAlertsDropdown(false)
+                        router.push('/alerts')
+                      }}
+                      className={`w-full text-left p-4 transition-all ${
+                        isDark
+                          ? `hover:bg-white/5 ${!alert.isRead ? 'bg-amber-500/5 border-l-2 border-amber-500' : ''}`
+                          : `hover:bg-slate-50 ${!alert.isRead ? 'bg-amber-50 border-l-2 border-amber-500' : ''}`
+                      }`}
+                    >
+                      <div className="flex items-start gap-3">
+                        <span className={`px-1.5 py-0.5 rounded text-xs font-medium ${getImportanceColor(alert.importance, isDark)}`}>
+                          {alert.importance.slice(0, 4)}
+                        </span>
+                        <div className="flex-1 min-w-0">
+                          <p className={`text-sm font-medium truncate ${isDark ? 'text-white' : 'text-slate-900'}`}>
+                            {alert.title}
+                          </p>
+                          <p className={`text-xs ${isDark ? 'text-white/40' : 'text-slate-400'}`}>
+                            {getRelativeTime(alert.timestamp)}
+                          </p>
+                        </div>
+                      </div>
+                    </button>
+                  ))}
+                  {alerts.length === 0 && (
+                    <div className={`p-8 text-center ${isDark ? 'text-white/40' : 'text-slate-400'}`}>
+                      <span className="text-2xl block mb-2">📭</span>
+                      <p className="text-sm">Keine Alerts</p>
+                    </div>
+                  )}
+                </div>
+                <div className={`p-3 border-t ${isDark ? 'border-white/10' : 'border-slate-100'}`}>
+                  <button
+                    onClick={() => {
+                      setShowAlertsDropdown(false)
+                      router.push('/alerts')
+                    }}
+                    className={`w-full py-2 text-sm font-medium rounded-lg transition-all ${
+                      isDark
+                        ? 'text-amber-400 hover:bg-amber-500/10'
+                        : 'text-amber-600 hover:bg-amber-50'
+                    }`}
+                  >
+                    Alle Alerts anzeigen →
+                  </button>
+                </div>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

studio-v2/app/_components/UploadModals.tsx

@@ -0,0 +1,102 @@
+'use client'
+
+import { useTheme } from '@/lib/ThemeContext'
+import { DocumentUpload } from '@/components/DocumentUpload'
+import { QRCodeUpload } from '@/components/QRCodeUpload'
+
+interface StoredDocument {
+  id: string
+  name: string
+  type: string
+  size: number
+  uploadedAt: Date
+  url?: string
+}
+
+interface UploadModalProps {
+  documents: StoredDocument[]
+  onUploadComplete: (docs: any[]) => void
+  onClose: () => void
+  onGoToDocuments: () => void
+}
+
+export function UploadModal({ documents, onUploadComplete, onClose, onGoToDocuments }: UploadModalProps) {
+  const { isDark } = useTheme()
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+      <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" onClick={onClose} />
+      <div className={`relative w-full max-w-2xl rounded-3xl border p-6 max-h-[90vh] overflow-y-auto ${
+        isDark
+          ? 'bg-slate-900 border-white/20'
+          : 'bg-white border-slate-200 shadow-2xl'
+      }`}>
+        <div className="flex items-center justify-between mb-6">
+          <h2 className={`text-xl font-semibold ${isDark ? 'text-white' : 'text-slate-900'}`}>
+            Dokumente hochladen
+          </h2>
+          <button
+            onClick={onClose}
+            className={`p-2 rounded-lg ${isDark ? 'hover:bg-white/10' : 'hover:bg-slate-100'}`}
+          >
+            <svg className={`w-5 h-5 ${isDark ? 'text-white/60' : 'text-slate-400'}`} 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>
+        <DocumentUpload
+          onUploadComplete={(docs) => {
+            onUploadComplete(docs)
+          }}
+        />
+        {/* Aktions-Buttons */}
+        <div className={`mt-6 pt-6 border-t flex justify-between items-center ${
+          isDark ? 'border-white/10' : 'border-slate-200'
+        }`}>
+          <p className={`text-sm ${isDark ? 'text-white/50' : 'text-slate-500'}`}>
+            {documents.length > 0 ? `${documents.length} Dokument${documents.length !== 1 ? 'e' : ''} gespeichert` : 'Noch keine Dokumente'}
+          </p>
+          <div className="flex gap-3">
+            <button
+              onClick={onClose}
+              className={`px-4 py-2 rounded-xl text-sm font-medium ${
+                isDark ? 'text-white/60 hover:text-white' : 'text-slate-500 hover:text-slate-700'
+              }`}
+            >
+              Schliessen
+            </button>
+            <button
+              onClick={onGoToDocuments}
+              className="px-4 py-2 bg-gradient-to-r from-purple-500 to-pink-500 text-white rounded-xl text-sm font-medium hover:shadow-lg transition-all"
+            >
+              Zu meinen Dokumenten
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+interface QRModalProps {
+  sessionId: string
+  onClose: () => void
+}
+
+export function QRModal({ sessionId, onClose }: QRModalProps) {
+  const { isDark } = useTheme()
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+      <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" onClick={onClose} />
+      <div className={`relative w-full max-w-md rounded-3xl ${
+        isDark ? 'bg-slate-900' : 'bg-white'
+      }`}>
+        <QRCodeUpload
+          sessionId={sessionId}
+          onClose={onClose}
+        />
+      </div>
+    </div>
+  )
+}