feat(vocab): add grammar explanations to VocabLessonView and enhance localization

- Introduced new sections for grammar explanations in VocabLessonView, providing users with contextual insights during vocabulary lessons.
- Added localization keys in German, English, and Spanish for the new grammar explanation titles and introductions, improving user guidance across languages.
- Updated styles for the grammar explanation section to enhance visual clarity and user experience.

frontend/src/i18n/locales/de/socialnetwork.json

@@ -461,6 +461,8 @@
                 "learningGoals": "Lernziele",
                 "corePatterns": "Kernmuster",
                 "corePatternsHint": "Zuerst die Zielsprache lesen, darunter die deutsche Bedeutung — so lernst du jedes Muster bewusst in beiden Richtungen.",
+                "learningGrammarTitle": "Kurz die Grammatik einordnen",
+                "learningGrammarIntro": "Lies diese 1-2 Hinweise nach den Begriffen kurz durch. Danach gehst du mit mehr Orientierung in den Trainer.",
                 "vocabPrepTitle": "Vorbereitung vor dem Vokabeltrainer",
                 "vocabPrepStep1": "Lies Kernmuster und Wortliste (Deutsch ↔ Zielsprache) einmal in Ruhe durch.",
                 "vocabPrepProgress": "Durchgang {pass}: Begriff {current} von {total}",

frontend/src/i18n/locales/en/socialnetwork.json

@@ -461,6 +461,8 @@
                 "learningGoals": "Learning Goals",
                 "corePatterns": "Core Patterns",
                 "corePatternsHint": "Read the target language first, then the meaning below — you learn each pattern both ways.",
+                "learningGrammarTitle": "Briefly frame the grammar",
+                "learningGrammarIntro": "Read these 1-2 hints after the key terms. Then you go into the trainer with better orientation.",
                 "vocabPrepTitle": "Preparation before the vocabulary trainer",
                 "vocabPrepStep1": "Read through core patterns and the word list (native language ↔ target language) once.",
                 "vocabPrepProgress": "Pass {pass}: item {current} of {total}",

frontend/src/i18n/locales/es/socialnetwork.json

@@ -459,6 +459,8 @@
                 "learningGoals": "Objetivos",
                 "corePatterns": "Patrones básicos",
                 "corePatternsHint": "Primero la lengua meta; debajo, el significado en tu idioma.",
+                "learningGrammarTitle": "Ubicar brevemente la gramática",
+                "learningGrammarIntro": "Lee estas 1-2 pistas después de los términos clave. Así entras al entrenador con mejor orientación.",
                 "vocabPrepTitle": "Preparación antes del entrenador de vocabulario",
                 "vocabPrepStep1": "Lee una vez los patrones clave y la lista de palabras (idioma nativo ↔ lengua meta).",
                 "vocabPrepProgress": "Pasada {pass}: término {current} de {total}",

frontend/src/views/social/VocabLessonView.vue

@@ -139,6 +139,25 @@
             </div>
           </details>
 
+          <div v-if="visibleGrammarExplanations.length > 0" class="lesson-grammar-impulse didactic-card">
+            <div class="lesson-grammar-impulse__header">
+              <span class="lesson-primary-flow__eyebrow">{{ $t('socialnetwork.vocab.courses.grammarImpulse') }}</span>
+              <h4>{{ $t('socialnetwork.vocab.courses.learningGrammarTitle') }}</h4>
+            </div>
+            <p class="lesson-grammar-impulse__intro">{{ $t('socialnetwork.vocab.courses.learningGrammarIntro') }}</p>
+            <div class="lesson-grammar-impulse__list">
+              <article
+                v-for="(explanation, index) in visibleGrammarExplanations.slice(0, 2)"
+                :key="'primary-grammar-' + index"
+                class="lesson-grammar-impulse__item"
+              >
+                <strong>{{ explanation.title || $t('socialnetwork.vocab.courses.grammarImpulse') }}</strong>
+                <p>{{ explanation.text }}</p>
+                <p v-if="explanation.example" class="grammar-example">{{ explanation.example }}</p>
+              </article>
+            </div>
+          </div>
+
           <!-- Vokabeltrainer -->
           <div v-if="trainableLessonVocab.length > 0" class="vocab-trainer-section">
             <h4>{{ $t('socialnetwork.vocab.courses.vocabTrainer') }}</h4>
@@ -2793,6 +2812,46 @@ export default {
   color: #6b5535;
 }
 
+.lesson-grammar-impulse {
+  margin-top: 16px;
+  padding: 16px 18px;
+  border: 1px solid rgba(121, 100, 56, 0.18);
+  background: rgba(255, 255, 255, 0.72);
+}
+
+.lesson-grammar-impulse__header {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+
+.lesson-grammar-impulse__header h4 {
+  margin: 0;
+  color: #3f2d14;
+}
+
+.lesson-grammar-impulse__intro {
+  margin: 0 0 12px;
+  color: #6b5535;
+}
+
+.lesson-grammar-impulse__list {
+  display: grid;
+  gap: 12px;
+}
+
+.lesson-grammar-impulse__item {
+  padding: 12px 14px;
+  border-radius: 10px;
+  background: rgba(255, 249, 240, 0.88);
+  border: 1px solid rgba(121, 100, 56, 0.12);
+}
+
+.lesson-grammar-impulse__item p {
+  margin: 6px 0 0;
+}
+
 .vocab-trainer-locked-hint {
   margin: 0;
   color: #8a5a00;