Update app.py

app.py

@@ -762,35 +762,10 @@ with gr.Blocks(title="LinkedIn Translator") as demo:
             lb_out = gr.HTML(value=_render_leaderboard())
             hidden_sync_btn = gr.Button("sync", elem_id="hidden_sync_btn")
 
-    # ── Extras: Soundtrack & Behind the Scenes ────────────────────────────────
+    # ── Extras: Meta-Info & Soundtrack ────────────────────────────────────────
     with gr.Row():
-        # Linke Spalte: Soundtrack (Schmaler)
-        with gr.Column(scale=1, elem_classes=["tuning-card"]):
-            gr.HTML("""
-              <div style="display:flex;align-items:center;gap:8px;margin-bottom:14px;">
-              <span style="font-size:1.1rem;">🎵</span>
-              <span style="font-weight:700;font-size:.85rem;color:#004182;
-                         text-transform:uppercase;letter-spacing:.5px;">
-                 LinkedIn Translator Soundtrack
-              </span>
-              </div>
-              
-              <div style="max-width:320px; margin:0 auto;">
-                  <div style="width:100%; aspect-ratio:9/16; border-radius:8px; overflow:hidden; background:#000;">
-                      <iframe 
-                        src="https://www.youtube.com/embed/w2Cv_AL5ZQc"
-                        style="width:100%; height:100%; border:none;"
-                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-                        allowfullscreen>
-                      </iframe>
-                  </div>
-                  <p style="margin-top:0; margin-bottom:12px;">
-                  <em> Song aus Projektkontext mit Gemini 3.1 generiert. </em>
-                </p>
-              </div>
-            """)
-
-        # Rechte Spalte: Behind the Scenes (Breiter)
+        
+        # Linke Spalte: Behind the Scenes (Breiter, da scale=2)
         with gr.Column(scale=2, elem_classes=["tuning-card"]):
             gr.HTML("""
               <div style="display:flex;align-items:center;gap:8px;margin-bottom:14px;">
@@ -803,7 +778,7 @@ with gr.Blocks(title="LinkedIn Translator") as demo:
 
               <div style="font-size:.88rem; color:#444; line-height:1.6; margin-top:0; margin-bottom:16px;">
                 <p style="margin-top:0; margin-bottom:12px;">
-                  Dieses Projekt ist kein handgeschriebener Enterprise-Code, sondern ein <strong>Proof of Concept (PoC)</strong>, das zu 100% mit AI-Tooling auf fast komplett freien Ressourcen umgesetzt wurde. Es zeigt, was mit modernem Stacking möglich ist:
+                  Dieses Projekt ist kein handgeschriebener Enterprise-Code, sondern ein <strong>Proof of Concept (PoC)</strong>, das zu 100% mit AI-Tooling auf fast komplett freien Ressourcen in kurzer Zeit umgesetzt wurde. Es zeigt, was mit modernem AI Tooling möglich ist:
                 </p>
                 <ul style="padding-left:20px; margin-bottom:16px;">
                   <li><strong>Code Build Backend & UI:</strong> Generiert mit Claude Sonnet 4.6.</li>
@@ -824,6 +799,40 @@ with gr.Blocks(title="LinkedIn Translator") as demo:
             
             gr.Image("architektur.png", show_label=False, interactive=False, container=False)
 
+        # Rechte Spalte: Soundtrack (Schmaler, da scale=1)
+        with gr.Column(scale=1, elem_classes=["tuning-card"]):
+            gr.HTML("""
+              <div style="display:flex;align-items:center;gap:8px;margin-bottom:14px;">
+              <span style="font-size:1.1rem;">🎵</span>
+              <span style="font-weight:700;font-size:.85rem;color:#004182;
+                         text-transform:uppercase;letter-spacing:.5px;">
+                LinkedIn Translator Soundtrack
+              </span>
+              </div>
+              
+              <div style="max-width:320px; margin:0 auto;">
+                  <div style="width:100%; aspect-ratio:9/16; border-radius:8px; overflow:hidden; background:#000;">
+                      <iframe 
+                        src="https://www.youtube.com/embed/w2Cv_AL5ZQc"
+                        style="width:100%; height:100%; border:none;"
+                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                        allowfullscreen>
+                      </iframe>
+                  </div>
+                  
+                  <div style="font-size:.85rem; color:#444; line-height:1.5; margin-top:16px; background:#F3F2EF; padding:12px; border-radius:8px; border:1px solid #E0DFDC;">
+                    <p style="margin-top:0; margin-bottom:8px;"><strong>Über den Track:</strong><br>
+                    Der durch den Projektkontext von Gemini generierte Song liefert den perfekten Soundtrack zum Translator. Er beschreibt den Verlust von Authentizität zugunsten steriler Business-Sprache.</p>
+                    
+                    <p style="font-style:italic; color:#555; margin-bottom:8px; padding-left:10px; border-left:3px solid #0A66C2;">
+                    "Corporate buzzwords in a sterile row, watching the human nuance start to go. [...] Syntax error in the empathy code."
+                    </p>
+                    
+                    <p style="margin-bottom:0;">Genau das parodiert dieses Tool: Die Transformation von echtem Klartext in eine standardisierte Formelhaftigkeit, die am Ende im <em>"Semantic void"</em> (der inhaltlichen Leere) mündet. Ein musikalischer Abgesang auf die authentische Kommunikation im LinkedIn-Alltag.</p>
+                  </div>
+              </div>
+            """)
+
     if not HF_TOKEN:
         gr.HTML("""<div style="background:#FFF4CE;border:1px solid #F9C642;border-left:4px solid #F9C642;
                     border-radius:6px;padding:10px 14px;font-size:.85rem;color:#7A5800;margin-top:8px;">