Fix: Use @shared/* alias instead of relative paths for Docker compat

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

studio-v2/components/learn/FlashCard.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import React, { useState, useCallback } from 'react'
+import { SyllableBow, simpleSyllableSplit } from './SyllableBow'
 
 interface FlashCardProps {
   front: string
@@ -11,6 +12,10 @@ interface FlashCardProps {
   onCorrect: () => void
   onIncorrect: () => void
   isDark: boolean
+  syllablesFront?: string[]
+  syllablesBack?: string[]
+  ipaFront?: string
+  ipaBack?: string
 }
 
 const boxLabels = ['Neu', 'Gelernt', 'Gefestigt']
@@ -25,6 +30,10 @@ export function FlashCard({
   onCorrect,
   onIncorrect,
   isDark,
+  syllablesFront,
+  syllablesBack,
+  ipaFront,
+  ipaBack,
 }: FlashCardProps) {
   const [isFlipped, setIsFlipped] = useState(false)
 
@@ -69,10 +78,15 @@ export function FlashCard({
             <span className={`text-xs font-medium mb-4 ${isDark ? 'text-white/40' : 'text-slate-400'}`}>
               ENGLISCH
             </span>
-            <span className={`text-3xl font-bold text-center ${isDark ? 'text-white' : 'text-slate-900'}`}>
-              {front}
-            </span>
-            <span className={`text-sm mt-6 ${isDark ? 'text-white/30' : 'text-slate-400'}`}>
+            {syllablesFront && syllablesFront.length > 0 ? (
+              <SyllableBow word={front} syllables={syllablesFront} isDark={isDark} size="md" />
+            ) : (
+              <span className={`text-3xl font-bold text-center ${isDark ? 'text-white' : 'text-slate-900'}`}>
+                {front}
+              </span>
+            )}
+            {ipaFront && <span className={`text-sm mt-2 ${isDark ? 'text-white/30' : 'text-slate-400'}`}>{ipaFront}</span>}
+            <span className={`text-sm mt-4 ${isDark ? 'text-white/30' : 'text-slate-400'}`}>
               Klick zum Umdrehen
             </span>
           </div>