Add vocabulary information text and improve conditional rendering in VocabLessonView

- Introduced a new translation key for vocabulary information text in both English and German, providing context for users on vocabulary usage in exercises.
- Enhanced conditional rendering in VocabLessonView to ensure lesson data is properly checked before displaying cultural notes and vocabulary lists, improving robustness and user experience.

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

@@ -372,6 +372,7 @@
                 "learnVocabulary": "Vokabeln lernen",
                 "culturalNotes": "Kulturelle Notizen",
                 "importantVocab": "Wichtige Begriffe",
+                "vocabInfoText": "Diese Begriffe werden in den Übungen verwendet. Lerne sie hier passiv, bevor du zu den interaktiven Übungen wechselst.",
                 "noVocabInfo": "Lies die Beschreibung oben und die Erklärungen in den Übungen, um die wichtigsten Begriffe zu lernen.",
                 "startExercises": "Zu den Übungen",
                 "correctAnswer": "Richtige Antwort",

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

@@ -372,6 +372,7 @@
                 "learnVocabulary": "Learn Vocabulary",
                 "culturalNotes": "Cultural Notes",
                 "importantVocab": "Important Vocabulary",
+                "vocabInfoText": "These terms are used in the exercises. Learn them here passively before switching to the interactive exercises.",
                 "noVocabInfo": "Read the description above and the explanations in the exercises to learn the most important terms.",
                 "startExercises": "Start Exercises",
                 "correctAnswer": "Correct Answer",

frontend/src/views/social/VocabLessonView.vue

@@ -33,14 +33,15 @@
         <h3>{{ $t('socialnetwork.vocab.courses.learnVocabulary') }}</h3>
         
         <!-- Kulturelle Notizen -->
-        <div v-if="lesson.culturalNotes" class="cultural-notes">
+        <div v-if="lesson && lesson.culturalNotes" class="cultural-notes">
           <h4>{{ $t('socialnetwork.vocab.courses.culturalNotes') }}</h4>
           <p>{{ lesson.culturalNotes }}</p>
         </div>
 
-        <!-- Wichtige Begriffe aus den Übungen -->
-        <div v-if="importantVocab && importantVocab.length > 0" class="vocab-list">
+        <!-- Wichtige Begriffe aus den Übungen (nur Anzeige, keine Interaktion) -->
+        <div v-if="lesson && importantVocab && importantVocab.length > 0" class="vocab-list">
           <h4>{{ $t('socialnetwork.vocab.courses.importantVocab') }}</h4>
+          <p class="vocab-info-text">{{ $t('socialnetwork.vocab.courses.vocabInfoText') }}</p>
           <div class="vocab-items">
             <div v-for="(vocab, index) in importantVocab" :key="index" class="vocab-item">
               <strong>{{ vocab.learning }}</strong>
@@ -51,7 +52,7 @@
         </div>
 
         <!-- Hinweis wenn keine Vokabeln vorhanden -->
-        <div v-else class="no-vocab-info">
+        <div v-else-if="lesson" class="no-vocab-info">
           <p>{{ $t('socialnetwork.vocab.courses.noVocabInfo') }}</p>
         </div>