bugfix speech-to-text and implement avatar and personal greeting

frontend/chat.html

@@ -24,9 +24,20 @@
     <!-- Chat -->
     <div class="chat-container">
         <div class="chat-messages" id="chat-messages">
-            <div class="message message-assistant">
-                Hallo! 👋 I'm your personal German tutor. How can I help you today? You can type or use the microphone
-                to speak.
+            <!-- Welcome section injected by JS -->
+            <div class="welcome-section" id="welcome-section">
+                <div class="welcome-row">
+                    <div class="avatar-container" id="avatar-container">
+                        <div class="avatar-ring"></div>
+                        <div class="avatar-placeholder">🎓</div>
+                        <div class="avatar-pulse"></div>
+                    </div>
+                    <div class="welcome-text">
+                        <h2 class="welcome-greeting" id="welcome-greeting">Hallo! 👋</h2>
+                        <p class="welcome-subtitle" id="welcome-subtitle">Your personal AI German tutor</p>
+                        <p class="welcome-meta" id="welcome-meta"></p>
+                    </div>
+                </div>
             </div>
         </div>