Fix: Build error + explanation above exercise + aligned columns + impressum link

1. Removed stale 'explanations' export that broke build
2. Explanation banner now spans full width ABOVE the 2/3+1/3 layout
   so exercise cards and native words start at the same height
3. Both columns use items-start for visual alignment
4. Impressum link added at bottom of learn layout

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

studio-v2/app/learn/layout.tsx

@@ -32,6 +32,11 @@ export default function LearnLayout({ children }: { children: React.ReactNode })
           />
         </div>
         {children}
+        <div className="text-center py-4">
+          <a href="/impressum" className={`text-[10px] ${isDark ? 'text-white/20 hover:text-white/40' : 'text-slate-300 hover:text-slate-500'}`}>
+            Impressum
+          </a>
+        </div>
       </div>
     </div>
   )

studio-v2/components/learn/ExerciseLayout.tsx

@@ -85,9 +85,27 @@ export function ExerciseLayout({
         </div>
       )}
 
-      {/* Main content: 2/3 left + 1/3 right */}
+      {/* Main content */}
       <div className="max-w-5xl mx-auto w-full px-6 py-6">
-        <div className="flex gap-0">
+        {/* Explanation banner — full width above exercise, only for non-DE/EN */}
+        {isThirdLanguage && explanation && (
+          <div className={`rounded-2xl p-4 mb-5 ${isDark ? 'bg-cyan-500/5 border border-cyan-400/20' : 'bg-cyan-50 border border-cyan-200'}`}>
+            <div className="flex items-start gap-3">
+              <span className="text-lg">💡</span>
+              <div>
+                <h3 className={`text-xs font-semibold mb-1 ${isDark ? 'text-cyan-300' : 'text-cyan-700'}`}>
+                  {nativeLang.toUpperCase()} · {t('english')} · {t('german')}
+                </h3>
+                <p className={`text-xs leading-relaxed ${isDark ? 'text-white/60' : 'text-slate-600'}`}>
+                  {explanation}
+                </p>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* 2/3 left + 1/3 right — both start at same height */}
+        <div className="flex gap-0 items-start">
           {/* Left: Exercise area (2/3 or full) */}
           <div className={isThirdLanguage ? 'w-2/3 pr-6' : 'w-full'}>
             {children}
@@ -98,24 +116,10 @@ export function ExerciseLayout({
             <div className={`w-px self-stretch ${isDark ? 'bg-white/10' : 'bg-slate-200'}`} />
           )}
 
-          {/* Right: Native language helper (1/3) — only for migrants */}
+          {/* Right: Native language words (1/3) */}
           {isThirdLanguage && (
             <div className="w-1/3 pl-6">
-              <div className="sticky top-20 space-y-4">
+              <div className="sticky top-20">
-                {/* Explanation card */}
-                {explanation && (
-                  <div className={`rounded-2xl p-4 ${isDark ? 'bg-cyan-500/5 border border-cyan-400/20' : 'bg-cyan-50 border border-cyan-200'}`}>
-                    <h3 className={`text-xs font-semibold mb-2 flex items-center gap-2 ${isDark ? 'text-cyan-300' : 'text-cyan-700'}`}>
-                      <span className="text-base">💡</span>
-                      {nativeLang.toUpperCase()} · {t('english')} · {t('german')}
-                    </h3>
-                    <p className={`text-xs leading-relaxed ${isDark ? 'text-white/60' : 'text-slate-600'}`}>
-                      {explanation}
-                    </p>
-                  </div>
-                )}
-
-                {/* Native words */}
                 {nativeHelper}
               </div>
             </div>
@@ -126,4 +130,3 @@ export function ExerciseLayout({
   )
 }
 
-export { explanations as exerciseExplanations }