Add interactive learning modules MVP (Phases 1-3.1)

New feature: After OCR vocabulary extraction, users can generate interactive
learning modules (flashcards, quiz, type trainer) with one click.

Frontend (studio-v2):
- Fortune Sheet spreadsheet editor tab in vocab-worksheet
- "Lernmodule generieren" button in ExportTab
- /learn page with unit overview and exercise type cards
- /learn/[unitId]/flashcards — Flip-card trainer with Leitner spaced repetition
- /learn/[unitId]/quiz — Multiple choice quiz with explanations
- /learn/[unitId]/type — Type-in trainer with Levenshtein distance feedback
- AudioButton component using Web Speech API for EN+DE TTS

Backend (klausur-service):
- vocab_learn_bridge.py: Converts VocabularyEntry[] to analysis_data format
- POST /sessions/{id}/generate-learning-unit endpoint

Backend (backend-lehrer):
- generate-qa, generate-mc, generate-cloze endpoints on learning units
- get-qa/mc/cloze data retrieval endpoints
- Leitner progress update + next review items endpoints

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

studio-v2/app/learn/[unitId]/flashcards/page.tsx

@@ -0,0 +1,189 @@
+'use client'
+
+import React, { useState, useEffect, useCallback } from 'react'
+import { useParams, useRouter } from 'next/navigation'
+import { useTheme } from '@/lib/ThemeContext'
+import { FlashCard } from '@/components/learn/FlashCard'
+import { AudioButton } from '@/components/learn/AudioButton'
+
+interface QAItem {
+  id: string
+  question: string
+  answer: string
+  leitner_box: number
+  correct_count: number
+  incorrect_count: number
+}
+
+function getBackendUrl() {
+  if (typeof window === 'undefined') return 'http://localhost:8001'
+  const { hostname, protocol } = window.location
+  if (hostname === 'localhost') return 'http://localhost:8001'
+  return `${protocol}//${hostname}:8001`
+}
+
+export default function FlashcardsPage() {
+  const { unitId } = useParams<{ unitId: string }>()
+  const router = useRouter()
+  const { isDark } = useTheme()
+
+  const [items, setItems] = useState<QAItem[]>([])
+  const [currentIndex, setCurrentIndex] = useState(0)
+  const [isLoading, setIsLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [stats, setStats] = useState({ correct: 0, incorrect: 0 })
+  const [isComplete, setIsComplete] = useState(false)
+
+  const glassCard = isDark
+    ? 'bg-white/10 backdrop-blur-xl border border-white/10'
+    : 'bg-white/80 backdrop-blur-xl border border-black/5'
+
+  useEffect(() => {
+    loadQA()
+  }, [unitId])
+
+  const loadQA = async () => {
+    setIsLoading(true)
+    try {
+      const resp = await fetch(`${getBackendUrl()}/api/learning-units/${unitId}/qa`)
+      if (!resp.ok) throw new Error(`HTTP ${resp.status}`)
+      const data = await resp.json()
+      setItems(data.qa_items || [])
+    } catch (err: any) {
+      setError(err.message)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handleAnswer = useCallback(async (correct: boolean) => {
+    const item = items[currentIndex]
+    if (!item) return
+
+    // Update Leitner progress
+    try {
+      await fetch(
+        `${getBackendUrl()}/api/learning-units/${unitId}/leitner/update?item_id=${item.id}&correct=${correct}`,
+        { method: 'POST' }
+      )
+    } catch (err) {
+      console.error('Leitner update failed:', err)
+    }
+
+    setStats((prev) => ({
+      correct: prev.correct + (correct ? 1 : 0),
+      incorrect: prev.incorrect + (correct ? 0 : 1),
+    }))
+
+    if (currentIndex + 1 >= items.length) {
+      setIsComplete(true)
+    } else {
+      setCurrentIndex((i) => i + 1)
+    }
+  }, [items, currentIndex, unitId])
+
+  if (isLoading) {
+    return (
+      <div className={`min-h-screen flex items-center justify-center ${isDark ? 'bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-800' : 'bg-gradient-to-br from-slate-100 via-blue-50 to-cyan-100'}`}>
+        <div className={`w-8 h-8 border-4 ${isDark ? 'border-blue-400' : 'border-blue-600'} border-t-transparent rounded-full animate-spin`} />
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className={`min-h-screen flex items-center justify-center ${isDark ? 'bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-800' : 'bg-gradient-to-br from-slate-100 via-blue-50 to-cyan-100'}`}>
+        <div className={`${glassCard} rounded-2xl p-8 text-center max-w-md`}>
+          <p className={isDark ? 'text-red-300' : 'text-red-600'}>Fehler: {error}</p>
+          <button onClick={() => router.push('/learn')} className="mt-4 px-4 py-2 rounded-xl bg-blue-500 text-white text-sm">
+            Zurueck
+          </button>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className={`min-h-screen flex flex-col ${isDark ? 'bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-800' : 'bg-gradient-to-br from-slate-100 via-blue-50 to-cyan-100'}`}>
+      {/* Header */}
+      <div className={`${glassCard} border-0 border-b`}>
+        <div className="max-w-2xl mx-auto px-6 py-4 flex items-center justify-between">
+          <button
+            onClick={() => router.push('/learn')}
+            className={`flex items-center gap-2 text-sm ${isDark ? 'text-white/60 hover:text-white' : 'text-slate-500 hover:text-slate-900'}`}
+          >
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+            </svg>
+            Zurueck
+          </button>
+          <h1 className={`text-lg font-bold ${isDark ? 'text-white' : 'text-slate-900'}`}>
+            Karteikarten
+          </h1>
+          <span className={`text-sm ${isDark ? 'text-white/50' : 'text-slate-500'}`}>
+            {items.length} Karten
+          </span>
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 flex items-center justify-center px-6 py-8">
+        {isComplete ? (
+          <div className={`${glassCard} rounded-3xl p-10 text-center max-w-md w-full`}>
+            <div className="text-5xl mb-4">
+              {stats.correct > stats.incorrect ? '🎉' : '💪'}
+            </div>
+            <h2 className={`text-2xl font-bold mb-2 ${isDark ? 'text-white' : 'text-slate-900'}`}>
+              Geschafft!
+            </h2>
+            <div className={`flex justify-center gap-8 mb-6 ${isDark ? 'text-white/80' : 'text-slate-700'}`}>
+              <div>
+                <span className="text-3xl font-bold text-green-500">{stats.correct}</span>
+                <p className="text-sm mt-1">Richtig</p>
+              </div>
+              <div>
+                <span className="text-3xl font-bold text-red-500">{stats.incorrect}</span>
+                <p className="text-sm mt-1">Falsch</p>
+              </div>
+            </div>
+            <div className="flex gap-3">
+              <button
+                onClick={() => { setCurrentIndex(0); setStats({ correct: 0, incorrect: 0 }); setIsComplete(false); loadQA() }}
+                className="flex-1 py-3 rounded-xl bg-gradient-to-r from-blue-500 to-cyan-500 text-white font-medium"
+              >
+                Nochmal
+              </button>
+              <button
+                onClick={() => router.push('/learn')}
+                className={`flex-1 py-3 rounded-xl border font-medium ${isDark ? 'border-white/20 text-white/80' : 'border-slate-300 text-slate-700'}`}
+              >
+                Zurueck
+              </button>
+            </div>
+          </div>
+        ) : items.length > 0 ? (
+          <div className="w-full max-w-lg">
+            <FlashCard
+              front={items[currentIndex].question}
+              back={items[currentIndex].answer}
+              cardNumber={currentIndex + 1}
+              totalCards={items.length}
+              leitnerBox={items[currentIndex].leitner_box}
+              onCorrect={() => handleAnswer(true)}
+              onIncorrect={() => handleAnswer(false)}
+              isDark={isDark}
+            />
+            {/* Audio Button */}
+            <div className="flex justify-center mt-4">
+              <AudioButton text={items[currentIndex].question} lang="en" isDark={isDark} />
+            </div>
+          </div>
+        ) : (
+          <div className={`${glassCard} rounded-2xl p-8 text-center`}>
+            <p className={isDark ? 'text-white/60' : 'text-slate-500'}>Keine Karteikarten verfuegbar.</p>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}