Feature: Termine-Anzeige auf der Startseite

- Neue CSV-Datei backend/data/termine.csv für Termine-Speicherung
- Backend-Controller und Router für /api/termine Endpoint
- TermineWidget Component zur Anzeige von bevorstehenden Terminen
- Integration in LoggedInView (Startseite für eingeloggte User)
- Zeigt Datum, Titel, Beschreibung, Ort und Uhrzeit an
- Sortiert nach Datum, filtert automatisch vergangene Termine

frontend/src/components/TermineWidget.vue

@@ -0,0 +1,151 @@
+<template>
+  <div class="termine-widget">
+    <h2>📅 Termine</h2>
+    <div v-if="loading" class="loading">Lade Termine...</div>
+    <div v-else-if="error" class="error">{{ error }}</div>
+    <div v-else-if="termine.length === 0" class="no-termine">
+      Keine bevorstehenden Termine
+    </div>
+    <div v-else class="termine-list">
+      <div v-for="termin in termine" :key="termin.datum + termin.titel" class="termin-item">
+        <div class="termin-datum">
+          {{ formatDatum(termin.datum) }}
+        </div>
+        <div class="termin-details">
+          <h3>{{ termin.titel }}</h3>
+          <p>{{ termin.beschreibung }}</p>
+          <div v-if="termin.ort" class="termin-ort">
+            📍 {{ termin.ort }}
+          </div>
+          <div v-if="termin.uhrzeit" class="termin-uhrzeit">
+            🕒 {{ termin.uhrzeit }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import apiClient from '@/utils/axios.js';
+
+export default {
+  name: 'TermineWidget',
+  data() {
+    return {
+      termine: [],
+      loading: true,
+      error: null
+    };
+  },
+  async mounted() {
+    await this.loadTermine();
+  },
+  methods: {
+    async loadTermine() {
+      try {
+        this.loading = true;
+        this.error = null;
+        const response = await apiClient.get('/api/termine');
+        this.termine = response.data;
+      } catch (error) {
+        console.error('Error loading termine:', error);
+        this.error = 'Termine konnten nicht geladen werden';
+      } finally {
+        this.loading = false;
+      }
+    },
+    formatDatum(dateStr) {
+      if (!dateStr) return '';
+      const date = new Date(dateStr);
+      const options = { 
+        weekday: 'long', 
+        year: 'numeric', 
+        month: 'long', 
+        day: 'numeric' 
+      };
+      return date.toLocaleDateString('de-DE', options);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.termine-widget {
+  background: #f8f9fa;
+  border: 1px solid #dee2e6;
+  border-radius: 8px;
+  padding: 20px;
+  margin: 20px 0;
+}
+
+.termine-widget h2 {
+  margin: 0 0 15px 0;
+  color: #333;
+  font-size: 1.5em;
+}
+
+.loading,
+.error,
+.no-termine {
+  text-align: center;
+  padding: 20px;
+  color: #666;
+}
+
+.error {
+  color: #dc3545;
+}
+
+.termine-list {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.termin-item {
+  display: flex;
+  gap: 15px;
+  background: white;
+  border-left: 4px solid #007bff;
+  padding: 15px;
+  border-radius: 4px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.termin-datum {
+  flex-shrink: 0;
+  text-align: center;
+  padding: 10px;
+  background: #007bff;
+  color: white;
+  border-radius: 4px;
+  min-width: 120px;
+  font-weight: bold;
+  font-size: 0.9em;
+}
+
+.termin-details {
+  flex: 1;
+}
+
+.termin-details h3 {
+  margin: 0 0 8px 0;
+  color: #333;
+  font-size: 1.1em;
+}
+
+.termin-details p {
+  margin: 0 0 8px 0;
+  color: #666;
+  line-height: 1.5;
+}
+
+.termin-ort,
+.termin-uhrzeit {
+  font-size: 0.9em;
+  color: #666;
+  margin-top: 5px;
+}
+</style>
+