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/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;