fix: Restore all files lost during destructive rebase

A previous `git pull --rebase origin main` dropped 177 local commits,
losing 3400+ files across admin-v2, backend, studio-v2, website,
klausur-service, and many other services. The partial restore attempt
(660295e2) only recovered some files.

This commit restores all missing files from pre-rebase ref 98933f5e
while preserving post-rebase additions (night-scheduler, night-mode UI,
NightModeWidget dashboard integration).

Restored features include:
- AI Module Sidebar (FAB), OCR Labeling, OCR Compare
- GPU Dashboard, RAG Pipeline, Magic Help
- Klausur-Korrektur (8 files), Abitur-Archiv (5+ files)
- Companion, Zeugnisse-Crawler, Screen Flow
- Full backend, studio-v2, website, klausur-service
- All compliance SDKs, agent-core, voice-service
- CI/CD configs, documentation, scripts

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

website/app/admin/brandbook/page.tsx

@@ -0,0 +1,629 @@
+'use client'
+
+/**
+ * Brandbook - Corporate Design & Styleguide
+ *
+ * Dokumentiert alle Designelemente:
+ * - Farben
+ * - Typografie
+ * - Komponenten
+ * - Logo-Verwendung
+ * - Tonalität
+ */
+
+import { useState } from 'react'
+import AdminLayout from '@/components/admin/AdminLayout'
+
+// Color palette from actual CSS variables
+const COLORS = {
+  primary: {
+    name: 'Primary (Sky Blue)',
+    shades: [
+      { name: '50', value: '#f0f9ff', text: 'dark' },
+      { name: '100', value: '#e0f2fe', text: 'dark' },
+      { name: '200', value: '#bae6fd', text: 'dark' },
+      { name: '300', value: '#7dd3fc', text: 'dark' },
+      { name: '400', value: '#38bdf8', text: 'dark' },
+      { name: '500', value: '#0ea5e9', text: 'light' },
+      { name: '600', value: '#0284c7', text: 'light' },
+      { name: '700', value: '#0369a1', text: 'light' },
+      { name: '800', value: '#075985', text: 'light' },
+      { name: '900', value: '#0c4a6e', text: 'light' },
+    ],
+  },
+  accent: {
+    name: 'Accent (Fuchsia)',
+    shades: [
+      { name: '50', value: '#fdf4ff', text: 'dark' },
+      { name: '100', value: '#fae8ff', text: 'dark' },
+      { name: '200', value: '#f5d0fe', text: 'dark' },
+      { name: '300', value: '#f0abfc', text: 'dark' },
+      { name: '400', value: '#e879f9', text: 'dark' },
+      { name: '500', value: '#d946ef', text: 'light' },
+      { name: '600', value: '#c026d3', text: 'light' },
+      { name: '700', value: '#a21caf', text: 'light' },
+      { name: '800', value: '#86198f', text: 'light' },
+      { name: '900', value: '#701a75', text: 'light' },
+    ],
+  },
+  success: {
+    name: 'Success (Emerald)',
+    shades: [
+      { name: '500', value: '#10b981', text: 'light' },
+      { name: '600', value: '#059669', text: 'light' },
+    ],
+  },
+  warning: {
+    name: 'Warning (Amber)',
+    shades: [
+      { name: '500', value: '#f59e0b', text: 'dark' },
+      { name: '600', value: '#d97706', text: 'light' },
+    ],
+  },
+  danger: {
+    name: 'Danger (Red)',
+    shades: [
+      { name: '500', value: '#ef4444', text: 'light' },
+      { name: '600', value: '#dc2626', text: 'light' },
+    ],
+  },
+  neutral: {
+    name: 'Neutral (Slate)',
+    shades: [
+      { name: '50', value: '#f8fafc', text: 'dark' },
+      { name: '100', value: '#f1f5f9', text: 'dark' },
+      { name: '200', value: '#e2e8f0', text: 'dark' },
+      { name: '300', value: '#cbd5e1', text: 'dark' },
+      { name: '400', value: '#94a3b8', text: 'dark' },
+      { name: '500', value: '#64748b', text: 'light' },
+      { name: '600', value: '#475569', text: 'light' },
+      { name: '700', value: '#334155', text: 'light' },
+      { name: '800', value: '#1e293b', text: 'light' },
+      { name: '900', value: '#0f172a', text: 'light' },
+    ],
+  },
+}
+
+const TYPOGRAPHY = {
+  fontFamily: "'Inter', system-ui, -apple-system, sans-serif",
+  weights: [
+    { weight: 400, name: 'Regular', usage: 'Fließtext, Beschreibungen' },
+    { weight: 500, name: 'Medium', usage: 'Labels, Buttons' },
+    { weight: 600, name: 'Semi-Bold', usage: 'Überschriften H3-H6' },
+    { weight: 700, name: 'Bold', usage: 'Überschriften H1-H2, CTAs' },
+  ],
+  sizes: [
+    { name: 'xs', size: '0.75rem (12px)', usage: 'Footnotes, Badges' },
+    { name: 'sm', size: '0.875rem (14px)', usage: 'Nebentext, Labels' },
+    { name: 'base', size: '1rem (16px)', usage: 'Fließtext, Body' },
+    { name: 'lg', size: '1.125rem (18px)', usage: 'Lead Text' },
+    { name: 'xl', size: '1.25rem (20px)', usage: 'H4, Card Titles' },
+    { name: '2xl', size: '1.5rem (24px)', usage: 'H3' },
+    { name: '3xl', size: '1.875rem (30px)', usage: 'H2' },
+    { name: '4xl', size: '2.25rem (36px)', usage: 'H1, Hero' },
+    { name: '5xl', size: '3rem (48px)', usage: 'Display' },
+  ],
+}
+
+const SPACING = [
+  { name: '0', value: '0px' },
+  { name: '1', value: '0.25rem (4px)' },
+  { name: '2', value: '0.5rem (8px)' },
+  { name: '3', value: '0.75rem (12px)' },
+  { name: '4', value: '1rem (16px)' },
+  { name: '5', value: '1.25rem (20px)' },
+  { name: '6', value: '1.5rem (24px)' },
+  { name: '8', value: '2rem (32px)' },
+  { name: '10', value: '2.5rem (40px)' },
+  { name: '12', value: '3rem (48px)' },
+  { name: '16', value: '4rem (64px)' },
+]
+
+const VOICE_TONE = {
+  attributes: [
+    'Professionell & Vertrauenswürdig',
+    'Freundlich & Zugänglich',
+    'Klar & Direkt',
+    'Hilfreich & Unterstützend',
+    'Modern & Innovativ',
+  ],
+  doList: [
+    'Einfache Sprache verwenden',
+    'Aktiv formulieren',
+    'Nutzenorientiert schreiben',
+    'Konkrete Beispiele geben',
+    'Empathie zeigen',
+  ],
+  dontList: [
+    'Fachjargon ohne Erklärung',
+    'Passive Formulierungen',
+    'Übertriebene Versprechen',
+    'Negative Formulierungen',
+    'Unpersönliche Ansprache',
+  ],
+}
+
+function ColorSwatch({ color, name }: { color: { name: string; value: string; text: string }; name: string }) {
+  const [copied, setCopied] = useState(false)
+
+  const copyToClipboard = () => {
+    navigator.clipboard.writeText(color.value)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  return (
+    <button
+      onClick={copyToClipboard}
+      className="group flex flex-col items-center"
+      title={`Klicken zum Kopieren: ${color.value}`}
+    >
+      <div
+        className="w-16 h-16 rounded-lg shadow-sm border border-slate-200 transition-transform group-hover:scale-110 flex items-center justify-center"
+        style={{ backgroundColor: color.value }}
+      >
+        {copied && (
+          <svg className={`w-5 h-5 ${color.text === 'light' ? 'text-white' : 'text-slate-900'}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+          </svg>
+        )}
+      </div>
+      <span className="text-xs text-slate-600 mt-1">{color.name}</span>
+      <span className="text-xs text-slate-400">{color.value}</span>
+    </button>
+  )
+}
+
+export default function BrandbookPage() {
+  const [activeTab, setActiveTab] = useState<'colors' | 'typography' | 'components' | 'logo' | 'voice'>('colors')
+
+  return (
+    <AdminLayout title="Brandbook" description="Corporate Design & Styleguide">
+      {/* Tabs */}
+      <div className="mb-6">
+        <div className="flex gap-1 bg-slate-100 p-1 rounded-lg w-fit">
+          {[
+            { id: 'colors', label: 'Farben' },
+            { id: 'typography', label: 'Typografie' },
+            { id: 'components', label: 'Komponenten' },
+            { id: 'logo', label: 'Logo' },
+            { id: 'voice', label: 'Tonalität' },
+          ].map((tab) => (
+            <button
+              key={tab.id}
+              onClick={() => setActiveTab(tab.id as typeof activeTab)}
+              className={`px-4 py-2 text-sm font-medium rounded-md transition-colors ${
+                activeTab === tab.id
+                  ? 'bg-white text-slate-900 shadow-sm'
+                  : 'text-slate-600 hover:text-slate-900'
+              }`}
+            >
+              {tab.label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Colors Tab */}
+      {activeTab === 'colors' && (
+        <div className="space-y-8">
+          {Object.entries(COLORS).map(([key, palette]) => (
+            <div key={key} className="bg-white rounded-xl border border-slate-200 p-6">
+              <h3 className="text-lg font-semibold text-slate-900 mb-4">{palette.name}</h3>
+              <div className="flex gap-4 flex-wrap">
+                {palette.shades.map((shade) => (
+                  <ColorSwatch key={shade.name} color={shade} name={shade.name} />
+                ))}
+              </div>
+            </div>
+          ))}
+
+          {/* Color Usage Guidelines */}
+          <div className="bg-white rounded-xl border border-slate-200 p-6">
+            <h3 className="text-lg font-semibold text-slate-900 mb-4">Verwendungsrichtlinien</h3>
+            <div className="grid grid-cols-2 gap-6">
+              <div>
+                <h4 className="font-medium text-slate-700 mb-2">Primary (Sky Blue)</h4>
+                <ul className="text-sm text-slate-600 space-y-1">
+                  <li>- Primäre Buttons und CTAs</li>
+                  <li>- Links und interaktive Elemente</li>
+                  <li>- Fokuszustände</li>
+                  <li>- Ausgewählte Navigation</li>
+                </ul>
+              </div>
+              <div>
+                <h4 className="font-medium text-slate-700 mb-2">Accent (Fuchsia)</h4>
+                <ul className="text-sm text-slate-600 space-y-1">
+                  <li>- Highlights und Akzente</li>
+                  <li>- Badges und Tags</li>
+                  <li>- Gradient-Akzente</li>
+                  <li>- Kreative Elemente</li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Typography Tab */}
+      {activeTab === 'typography' && (
+        <div className="space-y-6">
+          {/* Font Family */}
+          <div className="bg-white rounded-xl border border-slate-200 p-6">
+            <h3 className="text-lg font-semibold text-slate-900 mb-4">Schriftart: Inter</h3>
+            <div className="bg-slate-50 rounded-lg p-4 font-mono text-sm text-slate-600 mb-4">
+              font-family: {TYPOGRAPHY.fontFamily};
+            </div>
+            <p className="text-sm text-slate-600">
+              Inter ist eine moderne, variable Sans-Serif Schrift, optimiert für Bildschirme.
+              Sie ist unter der SIL Open Font License verfügbar und frei für kommerzielle Nutzung.
+            </p>
+          </div>
+
+          {/* Font Weights */}
+          <div className="bg-white rounded-xl border border-slate-200 p-6">
+            <h3 className="text-lg font-semibold text-slate-900 mb-4">Schriftschnitte</h3>
+            <div className="space-y-4">
+              {TYPOGRAPHY.weights.map((w) => (
+                <div key={w.weight} className="flex items-center gap-6">
+                  <span
+                    className="text-2xl w-48"
+                    style={{ fontWeight: w.weight }}
+                  >
+                    The quick brown fox
+                  </span>
+                  <div className="flex-1">
+                    <span className="font-medium text-slate-900">{w.name} ({w.weight})</span>
+                    <span className="text-sm text-slate-500 ml-4">{w.usage}</span>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Font Sizes */}
+          <div className="bg-white rounded-xl border border-slate-200 p-6">
+            <h3 className="text-lg font-semibold text-slate-900 mb-4">Schriftgrößen</h3>
+            <div className="space-y-3">
+              {TYPOGRAPHY.sizes.map((s) => (
+                <div key={s.name} className="flex items-baseline gap-4 border-b border-slate-100 pb-3">
+                  <span className="w-16 text-sm font-mono text-slate-500">{s.name}</span>
+                  <span className="w-32 text-sm text-slate-600">{s.size}</span>
+                  <span className="text-sm text-slate-500">{s.usage}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Headings Preview */}
+          <div className="bg-white rounded-xl border border-slate-200 p-6">
+            <h3 className="text-lg font-semibold text-slate-900 mb-4">Überschriften-Hierarchie</h3>
+            <div className="space-y-4">
+              <h1 className="text-4xl font-bold text-slate-900">H1: Hauptüberschrift</h1>
+              <h2 className="text-3xl font-bold text-slate-900">H2: Abschnittsüberschrift</h2>
+              <h3 className="text-2xl font-semibold text-slate-900">H3: Unterabschnitt</h3>
+              <h4 className="text-xl font-semibold text-slate-900">H4: Card-Titel</h4>
+              <h5 className="text-lg font-medium text-slate-900">H5: Kleiner Titel</h5>
+              <h6 className="text-base font-medium text-slate-900">H6: Label</h6>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Components Tab */}
+      {activeTab === 'components' && (
+        <div className="space-y-6">
+          {/* Buttons */}
+          <div className="bg-white rounded-xl border border-slate-200 p-6">
+            <h3 className="text-lg font-semibold text-slate-900 mb-4">Buttons</h3>
+            <div className="flex flex-wrap gap-4 mb-6">
+              <button className="px-6 py-2 bg-primary-600 text-white font-medium rounded-lg hover:bg-primary-700 transition-colors">
+                Primary
+              </button>
+              <button className="px-6 py-2 bg-slate-100 text-slate-700 font-medium rounded-lg hover:bg-slate-200 transition-colors">
+                Secondary
+              </button>
+              <button className="px-6 py-2 border border-slate-300 text-slate-700 font-medium rounded-lg hover:bg-slate-50 transition-colors">
+                Outline
+              </button>
+              <button className="px-6 py-2 text-primary-600 font-medium rounded-lg hover:bg-primary-50 transition-colors">
+                Ghost
+              </button>
+              <button className="px-6 py-2 bg-red-600 text-white font-medium rounded-lg hover:bg-red-700 transition-colors">
+                Danger
+              </button>
+            </div>
+            <div className="flex flex-wrap gap-4">
+              <button className="px-4 py-1.5 bg-primary-600 text-white text-sm font-medium rounded-lg">
+                Small
+              </button>
+              <button className="px-6 py-2 bg-primary-600 text-white font-medium rounded-lg">
+                Medium
+              </button>
+              <button className="px-8 py-3 bg-primary-600 text-white text-lg font-medium rounded-lg">
+                Large
+              </button>
+            </div>
+          </div>
+
+          {/* Inputs */}
+          <div className="bg-white rounded-xl border border-slate-200 p-6">
+            <h3 className="text-lg font-semibold text-slate-900 mb-4">Eingabefelder</h3>
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <label className="block text-sm font-medium text-slate-700 mb-1">Standard Input</label>
+                <input
+                  type="text"
+                  placeholder="Placeholder..."
+                  className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-slate-700 mb-1">Mit Icon</label>
+                <div className="relative">
+                  <input
+                    type="text"
+                    placeholder="Suchen..."
+                    className="w-full pl-10 pr-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
+                  />
+                  <svg className="w-5 h-5 text-slate-400 absolute left-3 top-2.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <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>
+              </div>
+            </div>
+          </div>
+
+          {/* Cards */}
+          <div className="bg-white rounded-xl border border-slate-200 p-6">
+            <h3 className="text-lg font-semibold text-slate-900 mb-4">Cards</h3>
+            <div className="grid grid-cols-3 gap-4">
+              <div className="bg-white rounded-xl border border-slate-200 p-4 hover:shadow-lg transition-shadow">
+                <div className="w-10 h-10 bg-primary-100 rounded-lg flex items-center justify-center mb-3">
+                  <svg className="w-5 h-5 text-primary-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+                  </svg>
+                </div>
+                <h4 className="font-semibold text-slate-900 mb-1">Feature Card</h4>
+                <p className="text-sm text-slate-600">Beschreibungstext für diese Feature-Karte.</p>
+              </div>
+              <div className="bg-gradient-to-br from-primary-500 to-primary-600 rounded-xl p-4 text-white">
+                <h4 className="font-semibold mb-1">Highlight Card</h4>
+                <p className="text-sm text-primary-100">Mit Gradient-Hintergrund.</p>
+              </div>
+              <div className="bg-slate-900 rounded-xl p-4 text-white">
+                <h4 className="font-semibold mb-1">Dark Card</h4>
+                <p className="text-sm text-slate-400">Dunkler Hintergrund.</p>
+              </div>
+            </div>
+          </div>
+
+          {/* Badges */}
+          <div className="bg-white rounded-xl border border-slate-200 p-6">
+            <h3 className="text-lg font-semibold text-slate-900 mb-4">Badges & Tags</h3>
+            <div className="flex flex-wrap gap-2">
+              <span className="px-2 py-1 bg-primary-100 text-primary-700 text-xs font-medium rounded">Primary</span>
+              <span className="px-2 py-1 bg-green-100 text-green-700 text-xs font-medium rounded">Success</span>
+              <span className="px-2 py-1 bg-amber-100 text-amber-700 text-xs font-medium rounded">Warning</span>
+              <span className="px-2 py-1 bg-red-100 text-red-700 text-xs font-medium rounded">Danger</span>
+              <span className="px-2 py-1 bg-slate-100 text-slate-700 text-xs font-medium rounded">Neutral</span>
+              <span className="px-2 py-1 bg-fuchsia-100 text-fuchsia-700 text-xs font-medium rounded">Accent</span>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Logo Tab */}
+      {activeTab === 'logo' && (
+        <div className="space-y-6">
+          {/* Logo Display */}
+          <div className="bg-white rounded-xl border border-slate-200 p-6">
+            <h3 className="text-lg font-semibold text-slate-900 mb-4">Logo</h3>
+            <div className="grid grid-cols-2 gap-8">
+              <div className="bg-white border border-slate-200 rounded-lg p-8 flex items-center justify-center">
+                <div className="flex items-center gap-3">
+                  <div className="w-12 h-12 bg-gradient-to-br from-primary-500 to-primary-600 rounded-xl flex items-center justify-center">
+                    <span className="text-2xl font-bold text-white">B</span>
+                  </div>
+                  <span className="text-2xl font-bold text-slate-900">BreakPilot</span>
+                </div>
+              </div>
+              <div className="bg-slate-900 rounded-lg p-8 flex items-center justify-center">
+                <div className="flex items-center gap-3">
+                  <div className="w-12 h-12 bg-gradient-to-br from-primary-400 to-primary-500 rounded-xl flex items-center justify-center">
+                    <span className="text-2xl font-bold text-white">B</span>
+                  </div>
+                  <span className="text-2xl font-bold text-white">BreakPilot</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Logo Variations */}
+          <div className="bg-white rounded-xl border border-slate-200 p-6">
+            <h3 className="text-lg font-semibold text-slate-900 mb-4">Logo-Varianten</h3>
+            <div className="grid grid-cols-4 gap-4">
+              <div className="border border-slate-200 rounded-lg p-4 flex flex-col items-center gap-2">
+                <div className="w-12 h-12 bg-gradient-to-br from-primary-500 to-primary-600 rounded-xl flex items-center justify-center">
+                  <span className="text-2xl font-bold text-white">B</span>
+                </div>
+                <span className="text-xs text-slate-600">Icon Only</span>
+              </div>
+              <div className="border border-slate-200 rounded-lg p-4 flex flex-col items-center gap-2">
+                <span className="text-xl font-bold text-slate-900">BreakPilot</span>
+                <span className="text-xs text-slate-600">Text Only</span>
+              </div>
+              <div className="border border-slate-200 rounded-lg p-4 flex flex-col items-center gap-2">
+                <div className="flex items-center gap-2">
+                  <div className="w-8 h-8 bg-gradient-to-br from-primary-500 to-primary-600 rounded-lg flex items-center justify-center">
+                    <span className="text-lg font-bold text-white">B</span>
+                  </div>
+                  <span className="text-lg font-bold text-slate-900">BreakPilot</span>
+                </div>
+                <span className="text-xs text-slate-600">Horizontal</span>
+              </div>
+              <div className="border border-slate-200 rounded-lg p-4 flex flex-col items-center gap-2">
+                <div className="flex flex-col items-center">
+                  <div className="w-10 h-10 bg-gradient-to-br from-primary-500 to-primary-600 rounded-xl flex items-center justify-center mb-1">
+                    <span className="text-xl font-bold text-white">B</span>
+                  </div>
+                  <span className="text-sm font-bold text-slate-900">BreakPilot</span>
+                </div>
+                <span className="text-xs text-slate-600">Stacked</span>
+              </div>
+            </div>
+          </div>
+
+          {/* Clear Space */}
+          <div className="bg-white rounded-xl border border-slate-200 p-6">
+            <h3 className="text-lg font-semibold text-slate-900 mb-4">Schutzzone</h3>
+            <p className="text-sm text-slate-600 mb-4">
+              Um das Logo herum sollte mindestens ein Abstand von der Höhe des Icons eingehalten werden.
+            </p>
+            <div className="bg-slate-50 rounded-lg p-8 inline-block">
+              <div className="border-2 border-dashed border-slate-300 p-8">
+                <div className="flex items-center gap-3">
+                  <div className="w-12 h-12 bg-gradient-to-br from-primary-500 to-primary-600 rounded-xl flex items-center justify-center">
+                    <span className="text-2xl font-bold text-white">B</span>
+                  </div>
+                  <span className="text-2xl font-bold text-slate-900">BreakPilot</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Don'ts */}
+          <div className="bg-white rounded-xl border border-slate-200 p-6">
+            <h3 className="text-lg font-semibold text-slate-900 mb-4">Nicht erlaubt</h3>
+            <div className="grid grid-cols-3 gap-4">
+              <div className="border border-red-200 bg-red-50 rounded-lg p-4 text-center">
+                <div className="flex items-center gap-2 justify-center opacity-50">
+                  <div className="w-8 h-8 bg-red-500 rounded-lg flex items-center justify-center">
+                    <span className="text-lg font-bold text-white">B</span>
+                  </div>
+                  <span className="text-lg font-bold text-red-500">BreakPilot</span>
+                </div>
+                <span className="text-xs text-red-600 mt-2 block">Falsche Farben</span>
+              </div>
+              <div className="border border-red-200 bg-red-50 rounded-lg p-4 text-center">
+                <div className="flex items-center gap-2 justify-center" style={{ transform: 'skewX(-10deg)' }}>
+                  <div className="w-8 h-8 bg-gradient-to-br from-primary-500 to-primary-600 rounded-lg flex items-center justify-center">
+                    <span className="text-lg font-bold text-white">B</span>
+                  </div>
+                  <span className="text-lg font-bold text-slate-900">BreakPilot</span>
+                </div>
+                <span className="text-xs text-red-600 mt-2 block">Verzerrt</span>
+              </div>
+              <div className="border border-red-200 bg-red-50 rounded-lg p-4 text-center">
+                <div className="flex items-center gap-2 justify-center">
+                  <div className="w-8 h-8 bg-gradient-to-br from-primary-500 to-primary-600 rounded-lg flex items-center justify-center">
+                    <span className="text-lg font-bold text-white">B</span>
+                  </div>
+                  <span className="text-lg font-bold text-slate-900">Break Pilot</span>
+                </div>
+                <span className="text-xs text-red-600 mt-2 block">Falsche Schreibweise</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Voice & Tone Tab */}
+      {activeTab === 'voice' && (
+        <div className="space-y-6">
+          {/* Brand Attributes */}
+          <div className="bg-white rounded-xl border border-slate-200 p-6">
+            <h3 className="text-lg font-semibold text-slate-900 mb-4">Markenpersönlichkeit</h3>
+            <div className="flex flex-wrap gap-3">
+              {VOICE_TONE.attributes.map((attr) => (
+                <span
+                  key={attr}
+                  className="px-4 py-2 bg-primary-100 text-primary-700 rounded-full font-medium"
+                >
+                  {attr}
+                </span>
+              ))}
+            </div>
+          </div>
+
+          {/* Do & Don't */}
+          <div className="grid grid-cols-2 gap-6">
+            <div className="bg-white rounded-xl border border-slate-200 p-6">
+              <h3 className="text-lg font-semibold text-green-600 mb-4 flex items-center gap-2">
+                <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                </svg>
+                So schreiben wir
+              </h3>
+              <ul className="space-y-2">
+                {VOICE_TONE.doList.map((item) => (
+                  <li key={item} className="flex items-center gap-2 text-slate-600">
+                    <span className="w-1.5 h-1.5 bg-green-500 rounded-full"></span>
+                    {item}
+                  </li>
+                ))}
+              </ul>
+            </div>
+            <div className="bg-white rounded-xl border border-slate-200 p-6">
+              <h3 className="text-lg font-semibold text-red-600 mb-4 flex items-center gap-2">
+                <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                </svg>
+                Das vermeiden wir
+              </h3>
+              <ul className="space-y-2">
+                {VOICE_TONE.dontList.map((item) => (
+                  <li key={item} className="flex items-center gap-2 text-slate-600">
+                    <span className="w-1.5 h-1.5 bg-red-500 rounded-full"></span>
+                    {item}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </div>
+
+          {/* Example Texts */}
+          <div className="bg-white rounded-xl border border-slate-200 p-6">
+            <h3 className="text-lg font-semibold text-slate-900 mb-4">Beispieltexte</h3>
+            <div className="space-y-4">
+              <div className="p-4 bg-green-50 border border-green-200 rounded-lg">
+                <span className="text-xs text-green-600 font-medium mb-2 block">GUT</span>
+                <p className="text-slate-700">
+                  "Sparen Sie Zeit bei der Korrektur - unsere KI unterstützt Sie mit intelligenten Vorschlägen."
+                </p>
+              </div>
+              <div className="p-4 bg-red-50 border border-red-200 rounded-lg">
+                <span className="text-xs text-red-600 font-medium mb-2 block">SCHLECHT</span>
+                <p className="text-slate-700">
+                  "Unsere revolutionäre KI-Lösung optimiert Ihre Korrekturworkflows durch state-of-the-art NLP."
+                </p>
+              </div>
+            </div>
+          </div>
+
+          {/* Target Audience */}
+          <div className="bg-white rounded-xl border border-slate-200 p-6">
+            <h3 className="text-lg font-semibold text-slate-900 mb-4">Zielgruppe</h3>
+            <div className="grid grid-cols-3 gap-4">
+              <div className="p-4 bg-slate-50 rounded-lg">
+                <div className="text-2xl mb-2">👩‍🏫</div>
+                <h4 className="font-semibold text-slate-900">Lehrkräfte</h4>
+                <p className="text-sm text-slate-600">Wünschen Zeitersparnis und einfache Bedienung</p>
+              </div>
+              <div className="p-4 bg-slate-50 rounded-lg">
+                <div className="text-2xl mb-2">🏫</div>
+                <h4 className="font-semibold text-slate-900">Schulleitung</h4>
+                <p className="text-sm text-slate-600">Fokus auf DSGVO, Kosten und Integration</p>
+              </div>
+              <div className="p-4 bg-slate-50 rounded-lg">
+                <div className="text-2xl mb-2">👨‍👩‍👧</div>
+                <h4 className="font-semibold text-slate-900">Eltern</h4>
+                <p className="text-sm text-slate-600">Wollen Transparenz und schnelles Feedback</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </AdminLayout>
+  )
+}