Füge Geburtstags-Widget hinzu und implementiere Geburtstagsladefunktion; erweitere Sichtbarkeitseinstellungen für Geburtstage in Profil und API

pages/cms/index.vue

@@ -7,6 +7,26 @@
       <div class="w-24 h-1 bg-primary-600 mb-8" />
 
       <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+        <!-- Geburtstage Widget -->
+        <div class="bg-white p-6 rounded-xl shadow-lg border border-gray-100">
+          <div class="flex items-center mb-4">
+            <div class="w-12 h-12 bg-pink-100 rounded-lg flex items-center justify-center">
+              <Calendar :size="20" class="text-pink-600" />
+            </div>
+            <h2 class="ml-4 text-xl font-semibold text-gray-900">Geburtstage (nächste 4 Wochen)</h2>
+          </div>
+          <div v-if="loadingBirthdays" class="text-sm text-gray-500">Lade...</div>
+          <ul v-else class="space-y-2">
+            <li v-for="b in birthdays" :key="b.name + b.dayMonth" class="flex items-center justify-between p-3 border border-gray-100 rounded-lg">
+              <div class="min-w-0">
+                <div class="font-medium text-gray-900 truncate">{{ b.name }}</div>
+                <div class="text-xs text-gray-600">{{ b.dayMonth }}</div>
+              </div>
+              <div class="text-sm text-gray-500">{{ b.inDays === 0 ? 'Heute' : (b.inDays === 1 ? 'Morgen' : 'in ' + b.inDays + ' Tagen') }}</div>
+            </li>
+            <li v-if="birthdays.length === 0" class="text-sm text-gray-600">Keine Geburtstage in den nächsten 4 Wochen.</li>
+          </ul>
+        </div>
         <!-- Inhalte (gruppiert) -->
         <NuxtLink
           to="/cms/inhalte"
@@ -160,9 +180,30 @@
 
 <script setup>
 import { Newspaper, Calendar, Users, UserCog, Settings, Layout } from 'lucide-vue-next'
+import { ref, onMounted } from 'vue'
 
 const authStore = useAuthStore()
 
+const birthdays = ref([])
+const loadingBirthdays = ref(true)
+
+const loadBirthdays = async () => {
+  loadingBirthdays.value = true
+  try {
+    const res = await $fetch('/api/birthdays')
+    birthdays.value = res.birthdays || []
+  } catch (e) {
+    console.error('Fehler beim Laden der Geburtstage', e)
+    birthdays.value = []
+  } finally {
+    loadingBirthdays.value = false
+  }
+}
+
+onMounted(() => {
+  loadBirthdays()
+})
+
 definePageMeta({
   middleware: 'auth',
   layout: 'default'