feat(training): add Media Pipeline — TTS Audio, Presentation Video, Bulk Generation

Phase A: 8 new IT-Security training modules (SEC-PWD, SEC-DESK, SEC-KIAI,
SEC-BYOD, SEC-VIDEO, SEC-USB, SEC-INC, SEC-HOME) with CTM entries.
Bulk content and quiz generation endpoints for all 28 modules.

Phase B: Piper TTS service (Python/FastAPI) for local German speech synthesis.
training_media table, TTSClient in Go backend, audio generation endpoints,
AudioPlayer component in frontend. MinIO storage integration.

Phase C: FFmpeg presentation video pipeline — LLM generates slide scripts,
ImageMagick renders 1920x1080 slides, FFmpeg combines with audio to MP4.
VideoPlayer and ScriptPreview components in frontend.

New files: 15 created, 9 modified
- compliance-tts-service/ (Dockerfile, main.py, tts_engine.py, storage.py,
  slide_renderer.py, video_generator.py)
- migrations 014-016 (training engine, IT-security modules, media table)
- training package (models, store, content_generator, media, handlers)
- frontend (AudioPlayer, VideoPlayer, ScriptPreview, api, types, page)

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

admin-compliance/components/training/ScriptPreview.tsx

@@ -0,0 +1,86 @@
+'use client'
+
+import { useState } from 'react'
+import type { VideoScript } from '@/lib/sdk/training/types'
+import { previewVideoScript } from '@/lib/sdk/training/api'
+
+interface ScriptPreviewProps {
+  moduleId: string
+}
+
+export default function ScriptPreview({ moduleId }: ScriptPreviewProps) {
+  const [script, setScript] = useState<VideoScript | null>(null)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  async function handlePreview() {
+    setLoading(true)
+    setError(null)
+    try {
+      const result = await previewVideoScript(moduleId)
+      setScript(result as VideoScript)
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Fehler bei der Script-Vorschau')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="border rounded-lg p-4 bg-white">
+      <div className="flex items-center justify-between mb-3">
+        <h4 className="text-sm font-medium text-gray-700">Folien-Vorschau</h4>
+        <button
+          onClick={handlePreview}
+          disabled={loading}
+          className="px-3 py-1.5 text-xs bg-gray-600 text-white rounded hover:bg-gray-700 disabled:opacity-50"
+        >
+          {loading ? 'Generiere Vorschau...' : 'Script-Vorschau'}
+        </button>
+      </div>
+
+      {error && (
+        <div className="text-xs text-red-600 mb-2">{error}</div>
+      )}
+
+      {loading && (
+        <div className="flex items-center gap-2 text-sm text-gray-500">
+          <div className="animate-spin h-4 w-4 border-2 border-gray-500 border-t-transparent rounded-full" />
+          Folien-Script wird generiert...
+        </div>
+      )}
+
+      {script && (
+        <div className="space-y-3">
+          <h5 className="text-sm font-medium text-gray-900">{script.title}</h5>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+            {script.sections.map((section, i) => (
+              <div key={i} className="border rounded-lg p-3 bg-gray-50">
+                <div className="flex items-center gap-2 mb-2">
+                  <span className="text-xs font-medium text-white bg-blue-900 rounded-full w-6 h-6 flex items-center justify-center">
+                    {i + 1}
+                  </span>
+                  <h6 className="text-sm font-medium text-gray-800">{section.heading}</h6>
+                </div>
+                {section.text && (
+                  <p className="text-xs text-gray-600 mb-2">{section.text}</p>
+                )}
+                {section.bullet_points && section.bullet_points.length > 0 && (
+                  <ul className="space-y-1">
+                    {section.bullet_points.map((bp, j) => (
+                      <li key={j} className="text-xs text-gray-600 flex items-start gap-1">
+                        <span className="text-blue-500 mt-0.5">{String.fromCharCode(8226)}</span>
+                        {bp}
+                      </li>
+                    ))}
+                  </ul>
+                )}
+              </div>
+            ))}
+          </div>
+          <p className="text-xs text-gray-400">{script.sections.length} Folien</p>
+        </div>
+      )}
+    </div>
+  )
+}