From 905e02debf77cb53cf633321ec5f47cd9ed7ae72 Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Mon, 9 Feb 2026 09:58:46 +0100
Subject: [PATCH] Update CMS navigation links and remove membership application
 page

This commit modifies the Navigation component and the CMS index page to replace the "Mitglieder" link with "Mitgliederverwaltung" and updates the corresponding route. Additionally, it removes the outdated "mitgliedschaftsantraege" page, streamlining the CMS structure and improving user navigation.
---
 components/Navigation.vue                     |  22 +-
 components/cms/CmsMitglieder.vue              | 936 ++++++++++++++++++
 components/cms/CmsMitgliedschaftsantraege.vue | 307 ++++++
 pages/cms/index.vue                           |   8 +-
 pages/cms/mitgliederverwaltung.vue            |  36 +
 pages/cms/mitgliedschaftsantraege.vue         | 420 --------
 server/utils/cookies.js                       |  11 +-
 7 files changed, 1291 insertions(+), 449 deletions(-)
 create mode 100644 components/cms/CmsMitglieder.vue
 create mode 100644 components/cms/CmsMitgliedschaftsantraege.vue
 create mode 100644 pages/cms/mitgliederverwaltung.vue
 delete mode 100644 pages/cms/mitgliedschaftsantraege.vue

diff --git a/components/Navigation.vue b/components/Navigation.vue
index f72b23c..6c58c4f 100644
--- a/components/Navigation.vue
+++ b/components/Navigation.vue
@@ -365,11 +365,11 @@
                           Sportbetrieb
                         </NuxtLink>
                         <NuxtLink
-                          to="/mitgliederbereich/mitglieder"
+                          to="/cms/mitgliederverwaltung"
                           class="block px-4 py-2 text-sm text-gray-300 hover:bg-primary-600 hover:text-white transition-colors"
                           @click="showCmsDropdown = false"
                         >
-                          Mitglieder
+                          Mitgliederverwaltung
                         </NuxtLink>
                         <div class="border-t border-gray-700 my-1" />
                         <NuxtLink
@@ -379,13 +379,6 @@
                         >
                           Einstellungen
                         </NuxtLink>
-                        <NuxtLink
-                          to="/cms/mitgliedschaftsantraege"
-                          class="block px-4 py-2 text-sm text-gray-300 hover:bg-primary-600 hover:text-white transition-colors"
-                          @click="showCmsDropdown = false"
-                        >
-                          Mitgliedschaftsanträge
-                        </NuxtLink>
                         <NuxtLink
                           to="/cms/benutzer"
                           class="block px-4 py-2 text-sm text-gray-300 hover:bg-primary-600 hover:text-white transition-colors"
@@ -745,11 +738,11 @@
                   Sportbetrieb
                 </NuxtLink>
                 <NuxtLink
-                  to="/mitgliederbereich/mitglieder"
+                  to="/cms/mitgliederverwaltung"
                   class="block px-4 py-2 text-sm text-yellow-300 hover:text-white hover:bg-primary-700/50 rounded-lg transition-colors"
                   @click="isMobileMenuOpen = false"
                 >
-                  Mitglieder
+                  Mitgliederverwaltung
                 </NuxtLink>
                 <NuxtLink
                   to="/cms/inhalte"
@@ -772,13 +765,6 @@
                 >
                   Einstellungen
                 </NuxtLink>
-                <NuxtLink
-                  to="/cms/mitgliedschaftsantraege"
-                  class="block px-4 py-2 text-sm text-yellow-300 hover:text-white hover:bg-primary-700/50 rounded-lg transition-colors"
-                  @click="isMobileMenuOpen = false"
-                >
-                  Mitgliedschaftsanträge
-                </NuxtLink>
                 <NuxtLink
                   v-if="getAuthStore()?.hasAnyRole('admin', 'vorstand')"
                   to="/cms/benutzer"
diff --git a/components/cms/CmsMitglieder.vue b/components/cms/CmsMitglieder.vue
new file mode 100644
index 0000000..e0e984b
--- /dev/null
+++ b/components/cms/CmsMitglieder.vue
@@ -0,0 +1,936 @@
+<template>
+  <div>
+    <div class="flex justify-between items-center mb-6">
+      <div>
+        <h2 class="text-2xl sm:text-3xl font-display font-bold text-gray-900 mb-2">
+          Mitgliederliste
+        </h2>
+        <div class="w-24 h-1 bg-primary-600 mb-4" />
+      </div>
+      <div class="flex items-center space-x-3">
+        <button
+          class="flex items-center px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 font-semibold rounded-lg transition-colors"
+          @click="viewMode = viewMode === 'cards' ? 'table' : 'cards'"
+        >
+          <component
+            :is="viewMode === 'cards' ? Table2 : Grid3x3"
+            :size="20"
+            class="mr-2"
+          />
+          {{ viewMode === 'cards' ? 'Tabelle' : 'Karten' }}
+        </button>
+        <button
+          v-if="canEdit"
+          class="flex items-center px-4 py-2 bg-green-600 hover:bg-green-700 text-white font-semibold rounded-lg transition-colors"
+          @click="showBulkImportModal = true"
+        >
+          <svg
+            class="w-5 h-5 mr-2"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
+            />
+          </svg>
+          Bulk-Import
+        </button>
+        <button
+          v-if="canEdit"
+          class="flex items-center px-4 py-2 bg-primary-600 hover:bg-primary-700 text-white font-semibold rounded-lg transition-colors"
+          @click="openAddModal"
+        >
+          <UserPlus
+            :size="20"
+            class="mr-2"
+          />
+          Mitglied hinzufügen
+        </button>
+      </div>
+    </div>
+
+    <!-- Loading State -->
+    <div
+      v-if="isLoading"
+      class="flex items-center justify-center py-12"
+    >
+      <Loader2
+        :size="40"
+        class="animate-spin text-primary-600"
+      />
+    </div>
+
+    <!-- Table View -->
+    <div
+      v-else-if="viewMode === 'table'"
+      class="bg-white rounded-xl shadow-lg overflow-hidden"
+    >
+      <div class="overflow-x-auto">
+        <table class="min-w-full divide-y divide-gray-200">
+          <thead class="bg-gray-50">
+            <tr>
+              <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                Name
+              </th>
+              <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                E-Mail
+              </th>
+              <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                Telefon
+              </th>
+              <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                Mannschaft
+              </th>
+              <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                Status
+              </th>
+              <th
+                v-if="canEdit"
+                class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider"
+              >
+                Aktionen
+              </th>
+            </tr>
+          </thead>
+          <tbody class="bg-white divide-y divide-gray-200">
+            <tr
+              v-for="member in members"
+              :key="member.id"
+              class="hover:bg-gray-50"
+            >
+              <td class="px-4 py-3 whitespace-nowrap">
+                <div class="text-sm font-medium text-gray-900">
+                  {{ member.name }}
+                </div>
+                <div
+                  v-if="member.notes"
+                  class="text-xs text-gray-500"
+                >
+                  {{ member.notes }}
+                </div>
+              </td>
+              <td class="px-4 py-3 whitespace-nowrap">
+                <template v-if="canViewContactData">
+                  <a
+                    v-if="member.email"
+                    :href="`mailto:${member.email}`"
+                    class="text-sm text-primary-600 hover:text-primary-800"
+                  >
+                    {{ member.email }}
+                  </a>
+                  <span
+                    v-else
+                    class="text-sm text-gray-400"
+                  >-</span>
+                </template>
+                <span
+                  v-else
+                  class="text-sm text-gray-400"
+                >Nur für Vorstand</span>
+              </td>
+              <td class="px-4 py-3 whitespace-nowrap">
+                <template v-if="canViewContactData">
+                  <a
+                    v-if="member.phone"
+                    :href="`tel:${member.phone}`"
+                    class="text-sm text-primary-600 hover:text-primary-800"
+                  >
+                    {{ member.phone }}
+                  </a>
+                  <span
+                    v-else
+                    class="text-sm text-gray-400"
+                  >-</span>
+                </template>
+                <span
+                  v-else
+                  class="text-sm text-gray-400"
+                >Nur für Vorstand</span>
+              </td>
+              <td class="px-4 py-3 whitespace-nowrap">
+                <button
+                  v-if="canEdit"
+                  :class="[
+                    'px-2 py-1 text-xs font-medium rounded-full transition-colors',
+                    member.isMannschaftsspieler 
+                      ? 'bg-blue-100 text-blue-800 hover:bg-blue-200' 
+                      : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
+                  ]"
+                  title="Klicken zum Umschalten"
+                  @click="toggleMannschaftsspieler(member)"
+                >
+                  {{ member.isMannschaftsspieler ? 'Ja' : 'Nein' }}
+                </button>
+                <span
+                  v-else
+                  :class="[
+                    'px-2 py-1 text-xs font-medium rounded-full',
+                    member.isMannschaftsspieler 
+                      ? 'bg-blue-100 text-blue-800' 
+                      : 'bg-gray-100 text-gray-600'
+                  ]"
+                >
+                  {{ member.isMannschaftsspieler ? 'Ja' : 'Nein' }}
+                </span>
+              </td>
+              <td class="px-4 py-3 whitespace-nowrap">
+                <div class="flex items-center space-x-2">
+                  <span
+                    v-if="member.hasLogin"
+                    class="px-2 py-1 bg-green-100 text-green-800 text-xs font-medium rounded-full"
+                  >
+                    Login
+                  </span>
+                  <span
+                    :class="member.source === 'manual' ? 'bg-blue-100 text-blue-800' : 'bg-purple-100 text-purple-800'"
+                    class="px-2 py-1 text-xs font-medium rounded-full"
+                  >
+                    {{ member.source === 'manual' ? 'Manuell' : 'System' }}
+                  </span>
+                </div>
+              </td>
+              <td
+                v-if="canEdit"
+                class="px-4 py-3 whitespace-nowrap text-right text-sm font-medium"
+              >
+                <div
+                  v-if="member.editable"
+                  class="flex justify-end space-x-2"
+                >
+                  <button
+                    class="text-blue-600 hover:text-blue-900"
+                    title="Bearbeiten"
+                    @click="openEditModal(member)"
+                  >
+                    <Edit :size="18" />
+                  </button>
+                  <button
+                    class="text-red-600 hover:text-red-900"
+                    title="Löschen"
+                    @click="confirmDelete(member)"
+                  >
+                    <Trash2 :size="18" />
+                  </button>
+                </div>
+                <span
+                  v-else
+                  class="text-gray-400 text-xs"
+                >Nicht editierbar</span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      
+      <div
+        v-if="members.length === 0"
+        class="text-center py-12 text-gray-500"
+      >
+        Keine Mitglieder gefunden.
+      </div>
+    </div>
+
+    <!-- Cards View -->
+    <div
+      v-else
+      class="space-y-4"
+    >
+      <div
+        v-for="member in members"
+        :key="member.id"
+        class="bg-white p-6 rounded-xl shadow-lg border border-gray-100"
+      >
+        <div class="flex justify-between items-start">
+          <div class="flex-1">
+            <div class="flex items-center mb-2">
+              <h3 class="text-xl font-semibold text-gray-900">
+                {{ member.name }}
+              </h3>
+              <span
+                v-if="member.hasLogin"
+                class="ml-3 px-2 py-1 bg-green-100 text-green-800 text-xs font-medium rounded-full"
+              >
+                Hat Login
+              </span>
+              <span
+                v-if="member.source === 'manual'"
+                class="ml-2 px-2 py-1 bg-blue-100 text-blue-800 text-xs font-medium rounded-full"
+              >
+                Manuell
+              </span>
+              <span
+                v-else
+                class="ml-2 px-2 py-1 bg-purple-100 text-purple-800 text-xs font-medium rounded-full"
+              >
+                Aus Login-System
+              </span>
+              <button
+                v-if="canEdit"
+                :class="[
+                  'ml-2 px-2 py-1 text-xs font-medium rounded-full transition-colors',
+                  member.isMannschaftsspieler 
+                    ? 'bg-blue-100 text-blue-800 hover:bg-blue-200' 
+                    : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
+                ]"
+                title="Klicken zum Umschalten"
+                @click="toggleMannschaftsspieler(member)"
+              >
+                Mannschaftsspieler: {{ member.isMannschaftsspieler ? 'Ja' : 'Nein' }}
+              </button>
+              <span
+                v-else
+                :class="[
+                  'ml-2 px-2 py-1 text-xs font-medium rounded-full',
+                  member.isMannschaftsspieler 
+                    ? 'bg-blue-100 text-blue-800' 
+                    : 'bg-gray-100 text-gray-600'
+                ]"
+              >
+                Mannschaftsspieler: {{ member.isMannschaftsspieler ? 'Ja' : 'Nein' }}
+              </span>
+            </div>
+
+            <div class="grid sm:grid-cols-2 gap-3 text-gray-600">
+              <template v-if="canViewContactData">
+                <div
+                  v-if="member.email"
+                  class="flex items-center"
+                >
+                  <Mail
+                    :size="16"
+                    class="mr-2 text-primary-600"
+                  />
+                  <a
+                    :href="`mailto:${member.email}`"
+                    class="hover:text-primary-600"
+                  >{{ member.email }}</a>
+                </div>
+                <div
+                  v-if="member.phone"
+                  class="flex items-center"
+                >
+                  <Phone
+                    :size="16"
+                    class="mr-2 text-primary-600"
+                  />
+                  <a
+                    :href="`tel:${member.phone}`"
+                    class="hover:text-primary-600"
+                  >{{ member.phone }}</a>
+                </div>
+              </template>
+              <div
+                v-else
+                class="col-span-2 flex items-center text-gray-500 text-sm italic"
+              >
+                <Mail
+                  :size="16"
+                  class="mr-2"
+                />
+                Kontaktdaten nur für Vorstand sichtbar
+              </div>
+              <div
+                v-if="member.address"
+                class="flex items-start col-span-2"
+              >
+                <MapPin
+                  :size="16"
+                  class="mr-2 text-primary-600 mt-0.5"
+                />
+                <span>{{ member.address }}</span>
+              </div>
+              <div
+                v-if="member.notes"
+                class="flex items-start col-span-2"
+              >
+                <FileText
+                  :size="16"
+                  class="mr-2 text-primary-600 mt-0.5"
+                />
+                <span>{{ member.notes }}</span>
+              </div>
+              <div
+                v-if="member.lastLogin"
+                class="flex items-center col-span-2 text-sm text-gray-500"
+              >
+                <Clock
+                  :size="16"
+                  class="mr-2"
+                />
+                Letzter Login: {{ formatDate(member.lastLogin) }}
+              </div>
+            </div>
+          </div>
+
+          <div
+            v-if="canEdit && member.editable"
+            class="flex space-x-2 ml-4"
+          >
+            <button
+              class="p-2 text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
+              title="Bearbeiten"
+              @click="openEditModal(member)"
+            >
+              <Edit :size="20" />
+            </button>
+            <button
+              class="p-2 text-red-600 hover:bg-red-50 rounded-lg transition-colors"
+              title="Löschen"
+              @click="confirmDelete(member)"
+            >
+              <Trash2 :size="20" />
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div
+        v-if="members.length === 0"
+        class="text-center py-12 text-gray-500"
+      >
+        Keine Mitglieder gefunden.
+      </div>
+    </div>
+
+    <!-- Edit/Add Modal -->
+    <div
+      v-if="showModal"
+      class="fixed inset-0 z-50 bg-black/50 flex items-center justify-center p-4"
+      @click.self="closeModal"
+    >
+      <div class="bg-white rounded-xl shadow-2xl max-w-2xl w-full p-8">
+        <h2 class="text-2xl font-display font-bold text-gray-900 mb-6">
+          {{ editingMember ? 'Mitglied bearbeiten' : 'Mitglied hinzufügen' }}
+        </h2>
+
+        <form
+          class="space-y-4"
+          @submit.prevent="saveMember"
+        >
+          <div class="grid grid-cols-2 gap-4">
+            <div>
+              <label class="block text-sm font-medium text-gray-700 mb-2">Vorname *</label>
+              <input
+                v-model="formData.firstName"
+                type="text"
+                required
+                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
+                :disabled="isSaving"
+              >
+            </div>
+            <div>
+              <label class="block text-sm font-medium text-gray-700 mb-2">Nachname *</label>
+              <input
+                v-model="formData.lastName"
+                type="text"
+                required
+                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
+                :disabled="isSaving"
+              >
+            </div>
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-gray-700 mb-2">Geburtsdatum *</label>
+            <input
+              v-model="formData.geburtsdatum"
+              type="date"
+              required
+              class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
+              :disabled="isSaving"
+            >
+            <p class="text-xs text-gray-500 mt-1">
+              Wird zur eindeutigen Identifizierung benötigt
+            </p>
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-gray-700 mb-2">E-Mail</label>
+            <input
+              v-model="formData.email"
+              type="email"
+              class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
+              :disabled="isSaving"
+            >
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-gray-700 mb-2">Telefon</label>
+            <input
+              v-model="formData.phone"
+              type="tel"
+              class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
+              :disabled="isSaving"
+            >
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-gray-700 mb-2">Adresse</label>
+            <input
+              v-model="formData.address"
+              type="text"
+              class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
+              :disabled="isSaving"
+            >
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-gray-700 mb-2">Notizen</label>
+            <textarea
+              v-model="formData.notes"
+              rows="3"
+              class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
+              :disabled="isSaving"
+            />
+          </div>
+
+          <div class="flex items-center">
+            <input
+              id="isMannschaftsspieler"
+              v-model="formData.isMannschaftsspieler"
+              type="checkbox"
+              class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded"
+              :disabled="isSaving"
+            >
+            <label
+              for="isMannschaftsspieler"
+              class="ml-2 block text-sm font-medium text-gray-700"
+            >
+              Mannschaftsspieler
+            </label>
+          </div>
+
+          <div
+            v-if="errorMessage"
+            class="flex items-center p-3 rounded-md bg-red-50 text-red-700 text-sm"
+          >
+            <AlertCircle
+              :size="20"
+              class="mr-2"
+            />
+            {{ errorMessage }}
+          </div>
+
+          <div class="flex justify-end space-x-4 pt-4">
+            <button
+              type="button"
+              class="px-6 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
+              :disabled="isSaving"
+              @click="closeModal"
+            >
+              Abbrechen
+            </button>
+            <button
+              type="submit"
+              class="px-6 py-2 bg-primary-600 hover:bg-primary-700 text-white font-semibold rounded-lg transition-colors flex items-center"
+              :disabled="isSaving"
+            >
+              <Loader2
+                v-if="isSaving"
+                :size="20"
+                class="animate-spin mr-2"
+              />
+              <span>{{ isSaving ? 'Speichert...' : 'Speichern' }}</span>
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+
+    <!-- Bulk Import Modal -->
+    <div
+      v-if="showBulkImportModal"
+      class="fixed inset-0 z-50 bg-black/50 flex items-center justify-center p-4"
+      @click.self="closeBulkImportModal"
+    >
+      <div class="bg-white rounded-xl shadow-2xl max-w-4xl w-full max-h-[90vh] overflow-y-auto p-8">
+        <h2 class="text-2xl font-display font-bold text-gray-900 mb-6">
+          Bulk-Import von Mitgliedern
+        </h2>
+
+        <!-- CSV Upload Section -->
+        <div class="mb-6">
+          <label class="block text-sm font-medium text-gray-700 mb-2">CSV-Datei hochladen</label>
+          <div 
+            class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center hover:border-primary-400 hover:bg-primary-50 transition-colors cursor-pointer"
+            :class="{ 'border-primary-400 bg-primary-50': isDragOver }"
+            @click="triggerBulkFileInput"
+            @dragover.prevent
+            @dragenter.prevent="isDragOver = true"
+            @dragleave.prevent="isDragOver = false"
+            @drop.prevent="handleBulkFileDrop"
+          >
+            <svg
+              class="w-12 h-12 text-gray-400 mx-auto mb-4"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
+              />
+            </svg>
+            <p class="text-lg font-medium text-gray-900 mb-2">
+              CSV-Datei hochladen
+            </p>
+            <p class="text-sm text-gray-600 mb-4">
+              Klicken Sie hier oder ziehen Sie eine CSV-Datei hierher
+            </p>
+            <p
+              v-if="bulkSelectedFile"
+              class="text-sm text-primary-600 font-medium"
+            >
+              {{ bulkSelectedFile.name }}
+            </p>
+          </div>
+          <input 
+            ref="bulkFileInput"
+            type="file" 
+            accept=".csv"
+            class="hidden"
+            @change="handleBulkFileSelect"
+          >
+        </div>
+
+        <!-- CSV Format Info -->
+        <div class="bg-blue-50 border-l-4 border-blue-500 p-4 rounded-lg mb-6">
+          <h4 class="text-sm font-medium text-blue-800 mb-2">
+            Erwartetes CSV-Format:
+          </h4>
+          <div class="text-xs text-blue-700 space-y-1">
+            <p>• Erste Zeile: Spaltenüberschriften (firstName, lastName, geburtsdatum, email, phone, address, notes)</p>
+            <p>• <strong>Pflichtfelder:</strong> firstName, lastName, geburtsdatum</p>
+            <p>• <strong>Geburtsdatum:</strong> Format YYYY-MM-DD (z.B. 1990-01-15)</p>
+            <p>• Trennzeichen: Komma (,) oder Semikolon (;)</p>
+          </div>
+        </div>
+
+        <!-- Preview Section -->
+        <div
+          v-if="bulkPreviewData.length > 0"
+          class="mb-6"
+        >
+          <h3 class="text-lg font-semibold text-gray-900 mb-4">
+            Vorschau ({{ bulkPreviewData.length }} Einträge)
+          </h3>
+          <div class="max-h-64 overflow-y-auto border border-gray-200 rounded-lg">
+            <table class="min-w-full divide-y divide-gray-200 text-sm">
+              <thead class="bg-gray-50 sticky top-0">
+                <tr>
+                  <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">Vorname</th>
+                  <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">Nachname</th>
+                  <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">Geburtsdatum</th>
+                  <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">E-Mail</th>
+                </tr>
+              </thead>
+              <tbody class="bg-white divide-y divide-gray-200">
+                <tr
+                  v-for="(row, index) in bulkPreviewData.slice(0, 10)"
+                  :key="index"
+                  class="hover:bg-gray-50"
+                >
+                  <td class="px-3 py-2">{{ row.firstName || '-' }}</td>
+                  <td class="px-3 py-2">{{ row.lastName || '-' }}</td>
+                  <td class="px-3 py-2">{{ row.geburtsdatum || '-' }}</td>
+                  <td class="px-3 py-2">{{ row.email || '-' }}</td>
+                </tr>
+              </tbody>
+            </table>
+            <div
+              v-if="bulkPreviewData.length > 10"
+              class="px-3 py-2 text-xs text-gray-500 bg-gray-50 text-center"
+            >
+              ... und {{ bulkPreviewData.length - 10 }} weitere
+            </div>
+          </div>
+        </div>
+
+        <!-- Import Results -->
+        <div
+          v-if="bulkImportResults"
+          class="mb-6"
+        >
+          <div class="bg-gray-50 rounded-lg p-4">
+            <h3 class="text-lg font-semibold text-gray-900 mb-3">Import-Ergebnisse</h3>
+            <div class="grid grid-cols-3 gap-4 mb-4">
+              <div class="text-center">
+                <div class="text-2xl font-bold text-green-600">{{ bulkImportResults.summary.imported }}</div>
+                <div class="text-sm text-gray-600">Importiert</div>
+              </div>
+              <div class="text-center">
+                <div class="text-2xl font-bold text-yellow-600">{{ bulkImportResults.summary.duplicates }}</div>
+                <div class="text-sm text-gray-600">Duplikate</div>
+              </div>
+              <div class="text-center">
+                <div class="text-2xl font-bold text-red-600">{{ bulkImportResults.summary.errors }}</div>
+                <div class="text-sm text-gray-600">Fehler</div>
+              </div>
+            </div>
+            
+            <div v-if="bulkImportResults.results.duplicates.length > 0" class="mt-4">
+              <h4 class="text-sm font-medium text-gray-700 mb-2">Duplikate:</h4>
+              <div class="text-xs text-gray-600 space-y-1 max-h-32 overflow-y-auto">
+                <div v-for="dup in bulkImportResults.results.duplicates" :key="dup.index">
+                  Zeile {{ dup.index }}: {{ dup.member.firstName }} {{ dup.member.lastName }} - {{ dup.reason }}
+                </div>
+              </div>
+            </div>
+            
+            <div v-if="bulkImportResults.results.errors.length > 0" class="mt-4">
+              <h4 class="text-sm font-medium text-gray-700 mb-2">Fehler:</h4>
+              <div class="text-xs text-red-600 space-y-1 max-h-32 overflow-y-auto">
+                <div v-for="err in bulkImportResults.results.errors" :key="err.index">
+                  Zeile {{ err.index }}: {{ err.error }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="flex justify-end space-x-4 pt-4">
+          <button
+            type="button"
+            class="px-6 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
+            :disabled="isBulkImporting"
+            @click="closeBulkImportModal"
+          >
+            Schließen
+          </button>
+          <button
+            :disabled="!bulkPreviewData.length || isBulkImporting"
+            class="px-6 py-2 bg-primary-600 hover:bg-primary-700 text-white font-semibold rounded-lg transition-colors flex items-center disabled:bg-gray-400"
+            @click="processBulkImport"
+          >
+            <Loader2
+              v-if="isBulkImporting"
+              :size="20"
+              class="animate-spin mr-2"
+            />
+            <span>{{ isBulkImporting ? 'Importiert...' : 'Importieren' }}</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { UserPlus, Mail, Phone, MapPin, FileText, Clock, Edit, Trash2, Loader2, AlertCircle, Table2, Grid3x3 } from 'lucide-vue-next'
+
+const authStore = useAuthStore()
+
+const isLoading = ref(true)
+const isSaving = ref(false)
+const members = ref([])
+const showModal = ref(false)
+const editingMember = ref(null)
+const errorMessage = ref('')
+const viewMode = ref('cards')
+
+// Bulk import state
+const showBulkImportModal = ref(false)
+const bulkFileInput = ref(null)
+const bulkSelectedFile = ref(null)
+const bulkPreviewData = ref([])
+const isBulkImporting = ref(false)
+const bulkImportResults = ref(null)
+const isDragOver = ref(false)
+
+const formData = ref({
+  firstName: '',
+  lastName: '',
+  geburtsdatum: '',
+  email: '',
+  phone: '',
+  address: '',
+  notes: '',
+  isMannschaftsspieler: false
+})
+
+const canEdit = computed(() => {
+  return authStore.hasAnyRole('admin', 'vorstand')
+})
+
+const canViewContactData = computed(() => {
+  return authStore.hasRole('vorstand')
+})
+
+const loadMembers = async () => {
+  isLoading.value = true
+  try {
+    const response = await $fetch('/api/members')
+    members.value = response.members
+  } catch (error) {
+    console.error('Fehler beim Laden der Mitglieder:', error)
+  } finally {
+    isLoading.value = false
+  }
+}
+
+const openAddModal = () => {
+  editingMember.value = null
+  formData.value = { firstName: '', lastName: '', geburtsdatum: '', email: '', phone: '', address: '', notes: '', isMannschaftsspieler: false }
+  showModal.value = true
+  errorMessage.value = ''
+}
+
+const openEditModal = (member) => {
+  editingMember.value = member
+  formData.value = {
+    firstName: member.firstName || '',
+    lastName: member.lastName || '',
+    geburtsdatum: member.geburtsdatum || '',
+    email: member.email || '',
+    phone: member.phone || '',
+    address: member.address || '',
+    notes: member.notes || '',
+    isMannschaftsspieler: member.isMannschaftsspieler === true
+  }
+  showModal.value = true
+  errorMessage.value = ''
+}
+
+const closeModal = () => {
+  showModal.value = false
+  editingMember.value = null
+  errorMessage.value = ''
+}
+
+const saveMember = async () => {
+  isSaving.value = true
+  errorMessage.value = ''
+  try {
+    await $fetch('/api/members', {
+      method: 'POST',
+      body: { id: editingMember.value?.id, ...formData.value }
+    })
+    closeModal()
+    await loadMembers()
+    if (window.showSuccessModal) window.showSuccessModal('Erfolg', 'Mitglied erfolgreich gespeichert.')
+  } catch (error) {
+    console.error('Fehler beim Speichern:', error)
+    const errorMsg = error.data?.message || error.message || 'Fehler beim Speichern des Mitglieds.'
+    errorMessage.value = errorMsg
+    if ((error.statusCode === 409 || error.status === 409) && window.showErrorModal) {
+      window.showErrorModal('Duplikat gefunden', errorMsg)
+    }
+  } finally {
+    isSaving.value = false
+  }
+}
+
+const toggleMannschaftsspieler = async (member) => {
+  try {
+    const response = await $fetch('/api/members/toggle-mannschaftsspieler', {
+      method: 'POST',
+      body: { memberId: member.id }
+    })
+    member.isMannschaftsspieler = response.isMannschaftsspieler
+    await loadMembers()
+  } catch (error) {
+    console.error('Fehler beim Umschalten des Mannschaftsspieler-Status:', error)
+    if (window.showErrorModal) window.showErrorModal('Fehler', error.data?.message || 'Fehler beim Umschalten des Status.')
+  }
+}
+
+const confirmDelete = async (member) => {
+  window.showConfirmModal('Mitglied löschen', `Möchten Sie "${member.name}" wirklich löschen?`, async () => {
+    try {
+      await $fetch('/api/members', { method: 'DELETE', body: { id: member.id } })
+      await loadMembers()
+      window.showSuccessModal('Erfolg', 'Mitglied wurde erfolgreich gelöscht')
+    } catch (error) {
+      console.error('Fehler beim Löschen:', error)
+      window.showErrorModal('Fehler', 'Fehler beim Löschen des Mitglieds')
+    }
+  })
+}
+
+const formatDate = (dateString) => {
+  if (!dateString) return ''
+  return new Date(dateString).toLocaleDateString('de-DE', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' })
+}
+
+// Bulk import functions
+const triggerBulkFileInput = () => { bulkFileInput.value?.click() }
+const handleBulkFileSelect = (event) => { const file = event.target.files?.[0]; if (file) processBulkCSV(file) }
+const handleBulkFileDrop = (event) => { isDragOver.value = false; const file = event.dataTransfer?.files?.[0]; if (file && file.type === 'text/csv') processBulkCSV(file) }
+
+const processBulkCSV = async (file) => {
+  bulkSelectedFile.value = file
+  bulkImportResults.value = null
+  try {
+    const text = await file.text()
+    const lines = text.split('\n').filter(line => line.trim() !== '')
+    if (lines.length < 2) { window.showErrorModal('Fehler', 'CSV-Datei muss mindestens eine Kopfzeile und eine Datenzeile enthalten'); return }
+    const parseCSVLine = (line) => {
+      const tabCount = (line.match(/\t/g) || []).length
+      const semicolonCount = (line.match(/;/g) || []).length
+      const delimiter = tabCount > semicolonCount ? '\t' : (semicolonCount > 0 ? ';' : ',')
+      return line.split(delimiter).map(value => value.trim().replace(/^"|"$/g, ''))
+    }
+    const headers = parseCSVLine(lines[0]).map(h => h.toLowerCase())
+    const firstNameIdx = headers.findIndex(h => h.includes('firstname') || h.includes('vorname'))
+    const lastNameIdx = headers.findIndex(h => h.includes('lastname') || h.includes('nachname'))
+    const geburtsdatumIdx = headers.findIndex(h => h.includes('geburtsdatum') || h.includes('birthdate') || h.includes('geburt'))
+    const emailIdx = headers.findIndex(h => h.includes('email') || h.includes('e-mail'))
+    const phoneIdx = headers.findIndex(h => h.includes('phone') || h.includes('telefon') || h.includes('tel'))
+    const addressIdx = headers.findIndex(h => h.includes('address') || h.includes('adresse'))
+    const notesIdx = headers.findIndex(h => h.includes('note') || h.includes('notiz') || h.includes('bemerkung'))
+    if (firstNameIdx === -1 || lastNameIdx === -1 || geburtsdatumIdx === -1) { window.showErrorModal('Fehler', 'CSV muss Spalten für firstName, lastName und geburtsdatum enthalten'); return }
+    bulkPreviewData.value = lines.slice(1).map((line) => {
+      const values = parseCSVLine(line)
+      return {
+        firstName: values[firstNameIdx] || '',
+        lastName: values[lastNameIdx] || '',
+        geburtsdatum: values[geburtsdatumIdx] || '',
+        email: emailIdx !== -1 ? (values[emailIdx] || '') : '',
+        phone: phoneIdx !== -1 ? (values[phoneIdx] || '') : '',
+        address: addressIdx !== -1 ? (values[addressIdx] || '') : '',
+        notes: notesIdx !== -1 ? (values[notesIdx] || '') : ''
+      }
+    }).filter(row => row.firstName && row.lastName && row.geburtsdatum)
+  } catch (error) {
+    console.error('Fehler beim Parsen der CSV:', error)
+    window.showErrorModal('Fehler', 'Fehler beim Lesen der CSV-Datei: ' + error.message)
+  }
+}
+
+const processBulkImport = async () => {
+  if (!bulkPreviewData.value.length) return
+  isBulkImporting.value = true
+  bulkImportResults.value = null
+  try {
+    const response = await $fetch('/api/members/bulk', { method: 'POST', body: { members: bulkPreviewData.value } })
+    bulkImportResults.value = response
+    if (response.summary.imported > 0) {
+      await loadMembers()
+      window.showSuccessModal('Import erfolgreich', `${response.summary.imported} Mitglieder wurden erfolgreich importiert.`)
+    }
+  } catch (error) {
+    console.error('Fehler beim Bulk-Import:', error)
+    window.showErrorModal('Import-Fehler', error.data?.message || error.message || 'Fehler beim Import')
+  } finally {
+    isBulkImporting.value = false
+  }
+}
+
+const closeBulkImportModal = () => {
+  showBulkImportModal.value = false
+  bulkSelectedFile.value = null
+  bulkPreviewData.value = []
+  bulkImportResults.value = null
+  isDragOver.value = false
+  if (bulkFileInput.value) bulkFileInput.value.value = ''
+}
+
+onMounted(() => { loadMembers() })
+</script>
diff --git a/components/cms/CmsMitgliedschaftsantraege.vue b/components/cms/CmsMitgliedschaftsantraege.vue
new file mode 100644
index 0000000..71c7134
--- /dev/null
+++ b/components/cms/CmsMitgliedschaftsantraege.vue
@@ -0,0 +1,307 @@
+<template>
+  <div>
+    <div class="flex items-center justify-between mb-6">
+      <h2 class="text-2xl sm:text-3xl font-display font-bold text-gray-900">
+        Mitgliedschaftsanträge
+      </h2>
+      <button
+        :disabled="loading"
+        class="px-3 py-1.5 sm:px-4 sm:py-2 bg-primary-600 hover:bg-primary-700 disabled:bg-gray-400 text-white text-sm sm:text-base font-medium rounded-lg transition-colors"
+        @click="refreshApplications"
+      >
+        {{ loading ? 'Lädt...' : 'Aktualisieren' }}
+      </button>
+    </div>
+
+    <!-- Loading State -->
+    <div
+      v-if="loading"
+      class="text-center py-12"
+    >
+      <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600 mx-auto" />
+      <p class="mt-4 text-gray-600">
+        Lade Anträge...
+      </p>
+    </div>
+
+    <!-- Applications List -->
+    <div
+      v-else
+      class="space-y-6"
+    >
+      <div
+        v-for="application in applications"
+        :key="application.id"
+        class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden"
+      >
+        <!-- Application Header -->
+        <div class="px-6 py-4 border-b border-gray-200">
+          <div class="flex items-center justify-between">
+            <div>
+              <h3 class="text-lg font-semibold text-gray-900">
+                {{ application.personalData.vorname }} {{ application.personalData.nachname }}
+              </h3>
+              <p class="text-sm text-gray-600">
+                Eingereicht: {{ formatDate(application.timestamp) }}
+              </p>
+            </div>
+            <div class="flex items-center space-x-3">
+              <span
+                :class="[
+                  'px-3 py-1 rounded-full text-sm font-medium',
+                  getStatusClass(application.status)
+                ]"
+              >
+                {{ getStatusText(application.status) }}
+              </span>
+              
+              <div class="flex space-x-2">
+                <button
+                  class="px-3 py-1 text-sm bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition-colors"
+                  @click="viewApplication(application)"
+                >
+                  Anzeigen
+                </button>
+                <button
+                  v-if="application.metadata.pdfGenerated"
+                  class="px-3 py-1 text-sm bg-blue-100 hover:bg-blue-200 text-blue-700 rounded-lg transition-colors flex items-center"
+                  @click="downloadPDF(application.id)"
+                >
+                  <svg
+                    class="w-4 h-4 mr-1"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+                    />
+                  </svg>
+                  PDF
+                </button>
+                <button
+                  v-if="application.status === 'pending'"
+                  class="px-3 py-1 text-sm bg-green-100 hover:bg-green-200 text-green-700 rounded-lg transition-colors"
+                  @click="approveApplication(application.id)"
+                >
+                  Genehmigen
+                </button>
+                <button
+                  v-if="application.status === 'pending'"
+                  class="px-3 py-1 text-sm bg-red-100 hover:bg-red-200 text-red-700 rounded-lg transition-colors"
+                  @click="rejectApplication(application.id)"
+                >
+                  Ablehnen
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Application Details -->
+        <div class="px-6 py-4">
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div>
+              <h4 class="text-sm font-medium text-gray-900 mb-2">Kontaktdaten</h4>
+              <div class="space-y-1 text-sm text-gray-600">
+                <p><strong>E-Mail:</strong> {{ application.personalData.email }}</p>
+                <p v-if="application.personalData.telefon_privat"><strong>Telefon:</strong> {{ application.personalData.telefon_privat }}</p>
+                <p v-if="application.personalData.telefon_mobil"><strong>Mobil:</strong> {{ application.personalData.telefon_mobil }}</p>
+              </div>
+            </div>
+            <div>
+              <h4 class="text-sm font-medium text-gray-900 mb-2">Antragsdetails</h4>
+              <div class="space-y-1 text-sm text-gray-600">
+                <p><strong>Art:</strong> {{ application.metadata.mitgliedschaftsart === 'aktiv' ? 'Aktives Mitglied' : 'Passives Mitglied' }}</p>
+                <p><strong>Volljährig:</strong> {{ application.metadata.isVolljaehrig ? 'Ja' : 'Nein' }}</p>
+                <p><strong>PDF:</strong> {{ application.metadata.pdfGenerated ? 'Generiert' : 'Nicht verfügbar' }}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Application Detail Modal -->
+    <div
+      v-if="selectedApplication"
+      class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4"
+      @click.self="closeModal"
+    >
+      <div class="bg-white rounded-lg max-w-4xl w-full max-h-[90vh] overflow-y-auto">
+        <div class="px-6 py-4 border-b border-gray-200">
+          <div class="flex items-center justify-between">
+            <h2 class="text-xl font-semibold text-gray-900">
+              Antrag: {{ selectedApplication.personalData.vorname }} {{ selectedApplication.personalData.nachname }}
+            </h2>
+            <button
+              class="text-gray-400 hover:text-gray-600"
+              @click="closeModal"
+            >
+              <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+        </div>
+        
+        <div class="px-6 py-4">
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div>
+              <h3 class="text-lg font-medium text-gray-900 mb-4">Persönliche Daten</h3>
+              <div class="space-y-2 text-sm">
+                <p><strong>Name:</strong> {{ selectedApplication.personalData.vorname }} {{ selectedApplication.personalData.nachname }}</p>
+                <p><strong>E-Mail:</strong> {{ selectedApplication.personalData.email }}</p>
+                <p v-if="selectedApplication.personalData.telefon_privat"><strong>Telefon:</strong> {{ selectedApplication.personalData.telefon_privat }}</p>
+                <p v-if="selectedApplication.personalData.telefon_mobil"><strong>Mobil:</strong> {{ selectedApplication.personalData.telefon_mobil }}</p>
+              </div>
+            </div>
+            <div>
+              <h3 class="text-lg font-medium text-gray-900 mb-4">Antragsdetails</h3>
+              <div class="space-y-2 text-sm">
+                <p><strong>Status:</strong> {{ getStatusText(selectedApplication.status) }}</p>
+                <p><strong>Art:</strong> {{ selectedApplication.metadata.mitgliedschaftsart === 'aktiv' ? 'Aktives Mitglied' : 'Passives Mitglied' }}</p>
+                <p><strong>Volljährig:</strong> {{ selectedApplication.metadata.isVolljaehrig ? 'Ja' : 'Nein' }}</p>
+                <p><strong>Eingereicht:</strong> {{ formatDate(selectedApplication.timestamp) }}</p>
+              </div>
+            </div>
+          </div>
+          
+          <div class="mt-6 pt-6 border-t border-gray-200">
+            <div class="flex justify-end space-x-3">
+              <button class="px-4 py-2 text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors" @click="closeModal">Schließen</button>
+              <button
+                v-if="selectedApplication.metadata.pdfGenerated"
+                class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors flex items-center"
+                @click="downloadPDF(selectedApplication.id)"
+              >
+                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                </svg>
+                PDF herunterladen
+              </button>
+              <button
+                v-if="selectedApplication.status === 'pending'"
+                class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg transition-colors"
+                @click="approveApplication(selectedApplication.id)"
+              >
+                Genehmigen
+              </button>
+              <button
+                v-if="selectedApplication.status === 'pending'"
+                class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg transition-colors"
+                @click="rejectApplication(selectedApplication.id)"
+              >
+                Ablehnen
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+
+const applications = ref([])
+const loading = ref(false)
+const selectedApplication = ref(null)
+
+const hasApplications = computed(() => applications.value.length > 0)
+const isReady = computed(() => !loading.value)
+
+defineExpose({ hasApplications, isReady })
+
+const loadApplications = async () => {
+  loading.value = true
+  try {
+    const response = await $fetch('/api/membership/applications')
+    applications.value = response
+  } catch (error) {
+    console.error('Fehler beim Laden der Anträge:', error)
+    window.showErrorModal('Fehler', 'Fehler beim Laden der Anträge')
+  } finally {
+    loading.value = false
+  }
+}
+
+const refreshApplications = () => { loadApplications() }
+const viewApplication = (application) => { selectedApplication.value = application }
+const closeModal = () => { selectedApplication.value = null }
+
+const approveApplication = async (id) => {
+  window.showConfirmModal('Bestätigung erforderlich', 'Möchten Sie diesen Antrag wirklich genehmigen?', async () => {
+    try {
+      await $fetch('/api/membership/update-status', { method: 'PUT', body: { id, status: 'approved' } })
+      await loadApplications()
+      window.showSuccessModal('Erfolg', 'Antrag wurde erfolgreich genehmigt')
+    } catch (error) {
+      console.error('Fehler beim Genehmigen:', error)
+      window.showErrorModal('Fehler', 'Fehler beim Genehmigen des Antrags')
+    }
+  })
+}
+
+const rejectApplication = async (id) => {
+  window.showConfirmModal('Bestätigung erforderlich', 'Möchten Sie diesen Antrag wirklich ablehnen?', async () => {
+    try {
+      await $fetch('/api/membership/update-status', { method: 'PUT', body: { id, status: 'rejected' } })
+      await loadApplications()
+      window.showSuccessModal('Erfolg', 'Antrag wurde erfolgreich abgelehnt')
+    } catch (error) {
+      console.error('Fehler beim Ablehnen:', error)
+      window.showErrorModal('Fehler', 'Fehler beim Ablehnen des Antrags')
+    }
+  })
+}
+
+const downloadPDF = async (id) => {
+  try {
+    const filename = `beitrittserklärung_${id}.pdf`
+    const response = await fetch(`/uploads/${filename}`)
+    if (!response.ok) throw new Error('PDF nicht gefunden')
+    const blob = await response.blob()
+    const url = window.URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = filename
+    document.body.appendChild(a)
+    a.click()
+    window.URL.revokeObjectURL(url)
+    document.body.removeChild(a)
+    window.showSuccessModal('Erfolg', 'PDF wurde erfolgreich heruntergeladen')
+  } catch (error) {
+    console.error('Fehler beim Herunterladen:', error)
+    window.showErrorModal('Fehler', 'Fehler beim Herunterladen des PDFs')
+  }
+}
+
+const formatDate = (dateString) => {
+  return new Date(dateString).toLocaleDateString('de-DE', { year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit' })
+}
+
+const getStatusClass = (status) => {
+  switch (status) {
+    case 'pending': return 'bg-yellow-100 text-yellow-800'
+    case 'approved': return 'bg-green-100 text-green-800'
+    case 'rejected': return 'bg-red-100 text-red-800'
+    default: return 'bg-gray-100 text-gray-800'
+  }
+}
+
+const getStatusText = (status) => {
+  switch (status) {
+    case 'pending': return 'Ausstehend'
+    case 'approved': return 'Genehmigt'
+    case 'rejected': return 'Abgelehnt'
+    default: return 'Unbekannt'
+  }
+}
+
+onMounted(() => { loadApplications() })
+</script>
diff --git a/pages/cms/index.vue b/pages/cms/index.vue
index e71b84e..06641dc 100644
--- a/pages/cms/index.vue
+++ b/pages/cms/index.vue
@@ -69,9 +69,9 @@
           </p>
         </NuxtLink>
 
-        <!-- Mitglieder -->
+        <!-- Mitgliederverwaltung (gruppiert) -->
         <NuxtLink
-          to="/mitgliederbereich/mitglieder"
+          to="/cms/mitgliederverwaltung"
           class="bg-white p-6 rounded-xl shadow-lg border border-gray-100 hover:shadow-xl transition-all group"
         >
           <div class="flex items-center mb-4">
@@ -82,11 +82,11 @@
               />
             </div>
             <h2 class="ml-4 text-xl font-semibold text-gray-900">
-              Mitglieder
+              Mitgliederverwaltung
             </h2>
           </div>
           <p class="text-gray-600">
-            Mitgliederliste bearbeiten
+            Mitgliederliste &amp; Mitgliedschaftsanträge
           </p>
         </NuxtLink>
 
diff --git a/pages/cms/mitgliederverwaltung.vue b/pages/cms/mitgliederverwaltung.vue
new file mode 100644
index 0000000..b0e356b
--- /dev/null
+++ b/pages/cms/mitgliederverwaltung.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="min-h-screen bg-gray-50">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+      <div class="mb-6">
+        <h1 class="text-3xl font-display font-bold text-gray-900">Mitgliederverwaltung</h1>
+        <p class="mt-1 text-sm text-gray-500">Anträge und Mitgliederliste verwalten</p>
+      </div>
+
+      <!-- Mitgliedschaftsanträge oben (nur sichtbar wenn Anträge vorhanden) -->
+      <div v-show="antraegeRef?.hasApplications" class="mb-10">
+        <CmsMitgliedschaftsantraege ref="antraegeRef" />
+      </div>
+      <div v-if="antraegeRef?.hasApplications" class="border-t border-gray-300 mb-10" />
+
+      <!-- Mitgliederliste darunter -->
+      <CmsMitglieder />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import CmsMitglieder from '~/components/cms/CmsMitglieder.vue'
+import CmsMitgliedschaftsantraege from '~/components/cms/CmsMitgliedschaftsantraege.vue'
+
+const antraegeRef = ref(null)
+
+definePageMeta({
+  middleware: 'auth',
+  layout: 'default'
+})
+
+useHead({
+  title: 'Mitgliederverwaltung – CMS'
+})
+</script>
diff --git a/pages/cms/mitgliedschaftsantraege.vue b/pages/cms/mitgliedschaftsantraege.vue
deleted file mode 100644
index 5e699c5..0000000
--- a/pages/cms/mitgliedschaftsantraege.vue
+++ /dev/null
@@ -1,420 +0,0 @@
-<template>
-  <div class="min-h-screen bg-gray-50">
-    <!-- Fixed Header -->
-    <div class="fixed top-16 left-0 right-0 bg-white shadow-sm border-b border-gray-200 z-40">
-      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div class="flex items-center justify-between py-3 sm:py-4">
-          <h1 class="text-xl sm:text-3xl font-bold text-gray-900">
-            Mitgliedschaftsanträge
-          </h1>
-          <button
-            :disabled="loading"
-            class="px-3 py-1.5 sm:px-4 sm:py-2 bg-primary-600 hover:bg-primary-700 disabled:bg-gray-400 text-white text-sm sm:text-base font-medium rounded-lg transition-colors"
-            @click="refreshApplications"
-          >
-            {{ loading ? 'Lädt...' : 'Aktualisieren' }}
-          </button>
-        </div>
-      </div>
-    </div>
-
-    <!-- Content -->
-    <div class="pt-20 sm:pt-24">
-      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
-        <!-- Loading State -->
-        <div
-          v-if="loading"
-          class="text-center py-12"
-        >
-          <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600 mx-auto" />
-          <p class="mt-4 text-gray-600">
-            Lade Anträge...
-          </p>
-        </div>
-
-        <!-- Empty State -->
-        <div
-          v-else-if="applications.length === 0"
-          class="text-center py-12"
-        >
-          <div class="text-gray-400 text-6xl mb-4">
-            📋
-          </div>
-          <h3 class="text-lg font-medium text-gray-900 mb-2">
-            Keine Anträge vorhanden
-          </h3>
-          <p class="text-gray-600">
-            Es wurden noch keine Mitgliedschaftsanträge eingereicht.
-          </p>
-        </div>
-
-        <!-- Applications List -->
-        <div
-          v-else
-          class="space-y-6"
-        >
-          <div
-            v-for="application in applications"
-            :key="application.id"
-            class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden"
-          >
-            <!-- Application Header -->
-            <div class="px-6 py-4 border-b border-gray-200">
-              <div class="flex items-center justify-between">
-                <div>
-                  <h3 class="text-lg font-semibold text-gray-900">
-                    {{ application.personalData.vorname }} {{ application.personalData.nachname }}
-                  </h3>
-                  <p class="text-sm text-gray-600">
-                    Eingereicht: {{ formatDate(application.timestamp) }}
-                  </p>
-                </div>
-                <div class="flex items-center space-x-3">
-                  <!-- Status Badge -->
-                  <span
-                    :class="[
-                      'px-3 py-1 rounded-full text-sm font-medium',
-                      getStatusClass(application.status)
-                    ]"
-                  >
-                    {{ getStatusText(application.status) }}
-                  </span>
-                  
-                  <!-- Actions -->
-                  <div class="flex space-x-2">
-                    <button
-                      class="px-3 py-1 text-sm bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition-colors"
-                      @click="viewApplication(application)"
-                    >
-                      Anzeigen
-                    </button>
-                    <button
-                      v-if="application.metadata.pdfGenerated"
-                      class="px-3 py-1 text-sm bg-blue-100 hover:bg-blue-200 text-blue-700 rounded-lg transition-colors flex items-center"
-                      @click="downloadPDF(application.id)"
-                    >
-                      <svg
-                        class="w-4 h-4 mr-1"
-                        fill="none"
-                        stroke="currentColor"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
-                        />
-                      </svg>
-                      PDF
-                    </button>
-                    <button
-                      v-if="application.status === 'pending'"
-                      class="px-3 py-1 text-sm bg-green-100 hover:bg-green-200 text-green-700 rounded-lg transition-colors"
-                      @click="approveApplication(application.id)"
-                    >
-                      Genehmigen
-                    </button>
-                    <button
-                      v-if="application.status === 'pending'"
-                      class="px-3 py-1 text-sm bg-red-100 hover:bg-red-200 text-red-700 rounded-lg transition-colors"
-                      @click="rejectApplication(application.id)"
-                    >
-                      Ablehnen
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <!-- Application Details -->
-            <div class="px-6 py-4">
-              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                <div>
-                  <h4 class="text-sm font-medium text-gray-900 mb-2">
-                    Kontaktdaten
-                  </h4>
-                  <div class="space-y-1 text-sm text-gray-600">
-                    <p><strong>E-Mail:</strong> {{ application.personalData.email }}</p>
-                    <p v-if="application.personalData.telefon_privat">
-                      <strong>Telefon:</strong> {{ application.personalData.telefon_privat }}
-                    </p>
-                    <p v-if="application.personalData.telefon_mobil">
-                      <strong>Mobil:</strong> {{ application.personalData.telefon_mobil }}
-                    </p>
-                  </div>
-                </div>
-                
-                <div>
-                  <h4 class="text-sm font-medium text-gray-900 mb-2">
-                    Antragsdetails
-                  </h4>
-                  <div class="space-y-1 text-sm text-gray-600">
-                    <p><strong>Art:</strong> {{ application.metadata.mitgliedschaftsart === 'aktiv' ? 'Aktives Mitglied' : 'Passives Mitglied' }}</p>
-                    <p><strong>Volljährig:</strong> {{ application.metadata.isVolljaehrig ? 'Ja' : 'Nein' }}</p>
-                    <p><strong>PDF:</strong> {{ application.metadata.pdfGenerated ? 'Generiert' : 'Nicht verfügbar' }}</p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Application Detail Modal -->
-    <div
-      v-if="selectedApplication"
-      class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4"
-      @click.self="closeModal"
-    >
-      <div class="bg-white rounded-lg max-w-4xl w-full max-h-[90vh] overflow-y-auto">
-        <div class="px-6 py-4 border-b border-gray-200">
-          <div class="flex items-center justify-between">
-            <h2 class="text-xl font-semibold text-gray-900">
-              Antrag: {{ selectedApplication.personalData.vorname }} {{ selectedApplication.personalData.nachname }}
-            </h2>
-            <button
-              class="text-gray-400 hover:text-gray-600"
-              @click="closeModal"
-            >
-              <svg
-                class="w-6 h-6"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M6 18L18 6M6 6l12 12"
-                />
-              </svg>
-            </button>
-          </div>
-        </div>
-        
-        <div class="px-6 py-4">
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-            <!-- Personal Data -->
-            <div>
-              <h3 class="text-lg font-medium text-gray-900 mb-4">
-                Persönliche Daten
-              </h3>
-              <div class="space-y-2 text-sm">
-                <p><strong>Name:</strong> {{ selectedApplication.personalData.vorname }} {{ selectedApplication.personalData.nachname }}</p>
-                <p><strong>E-Mail:</strong> {{ selectedApplication.personalData.email }}</p>
-                <p v-if="selectedApplication.personalData.telefon_privat">
-                  <strong>Telefon:</strong> {{ selectedApplication.personalData.telefon_privat }}
-                </p>
-                <p v-if="selectedApplication.personalData.telefon_mobil">
-                  <strong>Mobil:</strong> {{ selectedApplication.personalData.telefon_mobil }}
-                </p>
-              </div>
-            </div>
-            
-            <!-- Application Details -->
-            <div>
-              <h3 class="text-lg font-medium text-gray-900 mb-4">
-                Antragsdetails
-              </h3>
-              <div class="space-y-2 text-sm">
-                <p><strong>Status:</strong> {{ getStatusText(selectedApplication.status) }}</p>
-                <p><strong>Art:</strong> {{ selectedApplication.metadata.mitgliedschaftsart === 'aktiv' ? 'Aktives Mitglied' : 'Passives Mitglied' }}</p>
-                <p><strong>Volljährig:</strong> {{ selectedApplication.metadata.isVolljaehrig ? 'Ja' : 'Nein' }}</p>
-                <p><strong>Eingereicht:</strong> {{ formatDate(selectedApplication.timestamp) }}</p>
-              </div>
-            </div>
-          </div>
-          
-          <!-- Actions -->
-          <div class="mt-6 pt-6 border-t border-gray-200">
-            <div class="flex justify-end space-x-3">
-              <button
-                class="px-4 py-2 text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors"
-                @click="closeModal"
-              >
-                Schließen
-              </button>
-              <button
-                v-if="selectedApplication.metadata.pdfGenerated"
-                class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors flex items-center"
-                @click="downloadPDF(selectedApplication.id)"
-              >
-                <svg
-                  class="w-4 h-4 mr-2"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
-                  />
-                </svg>
-                PDF herunterladen
-              </button>
-              <button
-                v-if="selectedApplication.status === 'pending'"
-                class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg transition-colors"
-                @click="approveApplication(selectedApplication.id)"
-              >
-                Genehmigen
-              </button>
-              <button
-                v-if="selectedApplication.status === 'pending'"
-                class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg transition-colors"
-                @click="rejectApplication(selectedApplication.id)"
-              >
-                Ablehnen
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue'
-
-const applications = ref([])
-const loading = ref(false)
-const selectedApplication = ref(null)
-
-const loadApplications = async () => {
-  loading.value = true
-  try {
-    const response = await $fetch('/api/membership/applications')
-    applications.value = response
-  } catch (error) {
-    console.error('Fehler beim Laden der Anträge:', error)
-    window.showErrorModal('Fehler', 'Fehler beim Laden der Anträge')
-  } finally {
-    loading.value = false
-  }
-}
-
-const refreshApplications = () => {
-  loadApplications()
-}
-
-const viewApplication = (application) => {
-  selectedApplication.value = application
-}
-
-const closeModal = () => {
-  selectedApplication.value = null
-}
-
-const approveApplication = async (id) => {
-  window.showConfirmModal('Bestätigung erforderlich', 'Möchten Sie diesen Antrag wirklich genehmigen?', async () => {
-    try {
-      await $fetch('/api/membership/update-status', {
-        method: 'PUT',
-        body: { id, status: 'approved' }
-      })
-      await loadApplications()
-      window.showSuccessModal('Erfolg', 'Antrag wurde erfolgreich genehmigt')
-    } catch (error) {
-      console.error('Fehler beim Genehmigen:', error)
-      window.showErrorModal('Fehler', 'Fehler beim Genehmigen des Antrags')
-    }
-  })
-}
-
-const rejectApplication = async (id) => {
-  window.showConfirmModal('Bestätigung erforderlich', 'Möchten Sie diesen Antrag wirklich ablehnen?', async () => {
-    try {
-      await $fetch('/api/membership/update-status', {
-        method: 'PUT',
-        body: { id, status: 'rejected' }
-      })
-      await loadApplications()
-      window.showSuccessModal('Erfolg', 'Antrag wurde erfolgreich abgelehnt')
-    } catch (error) {
-      console.error('Fehler beim Ablehnen:', error)
-      window.showErrorModal('Fehler', 'Fehler beim Ablehnen des Antrags')
-    }
-  })
-}
-
-const downloadPDF = async (id) => {
-  try {
-    const filename = `beitrittserklärung_${id}.pdf`
-    
-    // Direkter Download über die öffentliche Uploads-Route
-    const response = await fetch(`/uploads/${filename}`)
-    
-    if (!response.ok) {
-      throw new Error('PDF nicht gefunden')
-    }
-    
-    const blob = await response.blob()
-    const url = window.URL.createObjectURL(blob)
-    const a = document.createElement('a')
-    a.href = url
-    a.download = filename
-    document.body.appendChild(a)
-    a.click()
-    window.URL.revokeObjectURL(url)
-    document.body.removeChild(a)
-    
-    window.showSuccessModal('Erfolg', 'PDF wurde erfolgreich heruntergeladen')
-  } catch (error) {
-    console.error('Fehler beim Herunterladen:', error)
-    window.showErrorModal('Fehler', 'Fehler beim Herunterladen des PDFs')
-  }
-}
-
-const formatDate = (dateString) => {
-  return new Date(dateString).toLocaleDateString('de-DE', {
-    year: 'numeric',
-    month: 'long',
-    day: 'numeric',
-    hour: '2-digit',
-    minute: '2-digit'
-  })
-}
-
-const getStatusClass = (status) => {
-  switch (status) {
-    case 'pending':
-      return 'bg-yellow-100 text-yellow-800'
-    case 'approved':
-      return 'bg-green-100 text-green-800'
-    case 'rejected':
-      return 'bg-red-100 text-red-800'
-    default:
-      return 'bg-gray-100 text-gray-800'
-  }
-}
-
-const getStatusText = (status) => {
-  switch (status) {
-    case 'pending':
-      return 'Ausstehend'
-    case 'approved':
-      return 'Genehmigt'
-    case 'rejected':
-      return 'Abgelehnt'
-    default:
-      return 'Unbekannt'
-  }
-}
-
-onMounted(() => {
-  loadApplications()
-})
-
-useHead({
-  title: 'Mitgliedschaftsanträge - CMS - Harheimer TC',
-})
-</script>
-
-
-
diff --git a/server/utils/cookies.js b/server/utils/cookies.js
index ae8b474..10e6dd2 100644
--- a/server/utils/cookies.js
+++ b/server/utils/cookies.js
@@ -12,16 +12,13 @@ export function getCookieSecureDefault() {
 
 export function getSameSiteDefault() {
   // Cookie SameSite-Konfiguration
-  // - 'none': Erlaubt Cookies in Cross-Site-iframes (erfordert Secure: true)
-  // - 'lax': Erlaubt Cookies bei Navigation (Standard für Cross-Site)
-  // - 'strict': Blockiert alle Cross-Site-Cookies (sicherste Option, blockiert iframes)
+  // - 'lax': Erlaubt Cookies bei Navigation (Standard)
+  // - 'strict': Blockiert alle Cross-Site-Cookies (sicherste Option)
+  // - 'none': Erlaubt Cookies in Cross-Site-iframes (erfordert Secure: true / HTTPS)
   const v = (process.env.COOKIE_SAMESITE || '').toLowerCase().trim()
   if (v === 'strict' || v === 'lax' || v === 'none') return v
   
-  // Default: 'none' für Cross-Site-iframes (wenn in iframe eingebettet)
-  // WICHTIG: SameSite: none erfordert Secure: true (HTTPS)
-  // Falls iframe-Einbettung nicht benötigt wird, kann auf 'strict' oder 'lax' geändert werden
-  return 'none' // Ermöglicht Einbettung in iframes (z.B. von harheimertc.de)
+  return 'lax'
 }
 
 export function getAuthCookieOptions() {