feat: Implement member inbox with read status and question functionality

backend/controllers/memberController.js

@@ -9,6 +9,7 @@ import CalendarEvent from '../models/CalendarEvent.js';
 import TrainingGroup from '../models/TrainingGroup.js';
 import ClubCommunicationRecipient from '../models/ClubCommunicationRecipient.js';
 import ClubCommunicationThread from '../models/ClubCommunicationThread.js';
+import ClubCommunicationMessage from '../models/ClubCommunicationMessage.js';
 import ClubSepaMandate from '../models/ClubSepaMandate.js';
 import MemberProfileChangeRequest from '../models/MemberProfileChangeRequest.js';
 import MemberEventResponse from '../models/MemberEventResponse.js';
@@ -534,6 +535,90 @@ const reviewProfileChangeRequest = async (req, res) => {
     }
 };
 
+const getMemberInbox = async (req, res) => {
+    try {
+        const clubId = Number(req.params.clubId);
+        const userId = Number(req.user?.id);
+        const access = await getApprovedLinkedMember(clubId, userId);
+        if (access.error) return res.status(access.status).json({ error: access.error });
+        const recipients = await ClubCommunicationRecipient.findAll({
+            where: { clubId, memberId: access.member.id, deliveryStatus: 'sent' },
+            include: [{
+                model: ClubCommunicationThread,
+                as: 'thread',
+                required: true,
+                where: { status: 'sent' },
+                attributes: ['id', 'subject', 'threadType', 'replyTo', 'sentAt'],
+                include: [{ model: ClubCommunicationMessage, as: 'messages', required: false, attributes: ['id', 'body', 'direction', 'messageType', 'createdByUserId', 'createdAt'] }],
+            }],
+            order: [['deliveredAt', 'DESC']],
+        });
+        const items = recipients.map((recipient) => {
+            const thread = recipient.thread;
+            const messages = (thread?.messages || [])
+                .filter((message) => message.messageType === 'message' && (message.direction === 'outbound' || (message.direction === 'inbound' && Number(message.createdByUserId) === userId)))
+                .sort((a, b) => new Date(a.createdAt) - new Date(b.createdAt))
+                .map((message) => ({ id: message.id, body: message.body, direction: message.direction, createdAt: message.createdAt }));
+            const latestOutbound = [...messages].reverse().find((message) => message.direction === 'outbound');
+            return {
+                recipientId: recipient.id,
+                threadId: thread.id,
+                subject: thread.subject,
+                threadType: thread.threadType,
+                sentAt: recipient.deliveredAt || thread.sentAt,
+                readAt: recipient.readAt,
+                canAskQuestion: Boolean(thread.replyTo),
+                preview: latestOutbound?.body || '',
+                messages,
+            };
+        });
+        res.json({ items, unreadCount: items.filter((item) => !item.readAt).length });
+    } catch (error) {
+        console.error('[getMemberInbox] - Error:', error);
+        res.status(500).json({ error: 'Nachrichten konnten nicht geladen werden.' });
+    }
+};
+
+const markInboxItemRead = async (req, res) => {
+    try {
+        const clubId = Number(req.params.clubId);
+        const recipientId = Number(req.params.recipientId);
+        const access = await getApprovedLinkedMember(clubId, Number(req.user?.id));
+        if (access.error) return res.status(access.status).json({ error: access.error });
+        const recipient = await ClubCommunicationRecipient.findOne({ where: { id: recipientId, clubId, memberId: access.member.id, deliveryStatus: 'sent' } });
+        if (!recipient) return res.status(404).json({ error: 'Nachricht nicht gefunden.' });
+        if (!recipient.readAt) await recipient.update({ readAt: new Date() });
+        res.json({ recipientId, readAt: recipient.readAt });
+    } catch (error) {
+        console.error('[markInboxItemRead] - Error:', error);
+        res.status(500).json({ error: 'Lesestatus konnte nicht gespeichert werden.' });
+    }
+};
+
+const askInboxQuestion = async (req, res) => {
+    try {
+        const clubId = Number(req.params.clubId);
+        const recipientId = Number(req.params.recipientId);
+        const userId = Number(req.user?.id);
+        const body = String(req.body?.body || '').trim();
+        if (!body) return res.status(400).json({ error: 'Bitte formuliere deine Rückfrage.' });
+        if (body.length > 4000) return res.status(400).json({ error: 'Die Rückfrage ist zu lang.' });
+        const access = await getApprovedLinkedMember(clubId, userId);
+        if (access.error) return res.status(access.status).json({ error: access.error });
+        const recipient = await ClubCommunicationRecipient.findOne({
+            where: { id: recipientId, clubId, memberId: access.member.id, deliveryStatus: 'sent' },
+            include: [{ model: ClubCommunicationThread, as: 'thread', required: true, attributes: ['id', 'status', 'replyTo'] }],
+        });
+        if (!recipient?.thread || recipient.thread.status !== 'sent' || !recipient.thread.replyTo) return res.status(409).json({ error: 'Für diese Nachricht ist keine Rückfrage vorgesehen.' });
+        const message = await ClubCommunicationMessage.create({ threadId: recipient.thread.id, clubId, body, direction: 'inbound', messageType: 'message', createdByUserId: userId });
+        if (!recipient.readAt) await recipient.update({ readAt: new Date() });
+        res.status(201).json({ id: message.id, body: message.body, direction: message.direction, createdAt: message.createdAt });
+    } catch (error) {
+        console.error('[askInboxQuestion] - Error:', error);
+        res.status(500).json({ error: 'Rückfrage konnte nicht gesendet werden.' });
+    }
+};
+
 export {
     getClubMembers,
     getWaitingApprovals,
@@ -563,5 +648,8 @@ export {
     updateOwnTrainingAttendance,
     getEventResponses,
     getProfileChangeRequests,
-    reviewProfileChangeRequest
+    reviewProfileChangeRequest,
+    getMemberInbox,
+    markInboxItemRead,
+    askInboxQuestion
 };

backend/migrations/20260724_add_member_inbox_read_status.sql

@@ -0,0 +1,3 @@
+ALTER TABLE club_communication_recipients
+  ADD COLUMN read_at DATETIME NULL AFTER delivered_at,
+  ADD INDEX club_communication_recipients_member_read (club_id, member_id, read_at);

backend/models/ClubCommunicationRecipient.js

@@ -44,6 +44,11 @@ const ClubCommunicationRecipient = sequelize.define('ClubCommunicationRecipient'
     allowNull: true,
     field: 'delivered_at',
   },
+  readAt: {
+    type: DataTypes.DATE,
+    allowNull: true,
+    field: 'read_at',
+  },
   lastAttemptAt: {
     type: DataTypes.DATE,
     allowNull: true,

backend/routes/memberRoutes.js

@@ -27,7 +27,10 @@ import {
     updateOwnTrainingAttendance,
     getEventResponses,
     getProfileChangeRequests,
-    reviewProfileChangeRequest
+    reviewProfileChangeRequest,
+    getMemberInbox,
+    markInboxItemRead,
+    askInboxQuestion
 } from '../controllers/memberController.js';
 import express from 'express';
 import { authenticate } from '../middleware/authMiddleware.js';
@@ -55,6 +58,9 @@ router.put('/dashboard/:clubId/training/:diaryDateId/attendance', authenticate,
 router.get('/event-responses/:clubId/:eventId', authenticate, authorize('schedule', 'read'), getEventResponses);
 router.get('/profile-change-requests/:clubId', authenticate, authorize('members', 'read'), getProfileChangeRequests);
 router.patch('/profile-change-requests/:clubId/:requestId', authenticate, authorize('members', 'write'), reviewProfileChangeRequest);
+router.get('/inbox/:clubId', authenticate, getMemberInbox);
+router.patch('/inbox/:clubId/:recipientId/read', authenticate, markInboxItemRead);
+router.post('/inbox/:clubId/:recipientId/questions', authenticate, askInboxQuestion);
 router.get('/sepa/:clubId/:memberId', authenticate, authorize('members', 'read'), getMemberSepaMandate);
 router.put('/sepa/:clubId/:memberId', authenticate, authorize('members', 'write'), saveMemberSepaMandate);
 router.get('/play-interest/:clubId', authenticate, authorize('members', 'read'), getMemberPlayInterests);

backend/services/clubCommunicationService.js

@@ -648,6 +648,7 @@ class ClubCommunicationService {
           await recipient.update({
             deliveryStatus: 'sent',
             deliveredAt: now,
+            readAt: null,
             lastAttemptAt: now,
             attemptCount: nextAttemptNo,
             retryable: false,

docs/manual_sql_migrations.md

@@ -84,6 +84,20 @@ Die Daten enthalten keine Zahlungsdaten. Bestehende Vereins- und
 Mitgliedsdaten bleiben unverändert; die neuen Tabellen werden erst durch die
 persönlichen Rückmeldungen bzw. Änderungsanfragen befüllt.
 
+## 2026-07-24
+
+### `club_communication_recipients.read_at`
+
+Persönlicher Gelesen-Status für Nachrichten. Er wird ausschließlich für das
+jeweilige Empfänger-Mitglied erfasst; die Kommunikationsverwaltung kann daraus
+keine Kontakt- oder Zahlungsdaten ableiten.
+
+```sql
+ALTER TABLE club_communication_recipients
+  ADD COLUMN read_at DATETIME NULL AFTER delivered_at,
+  ADD INDEX club_communication_recipients_member_read (club_id, member_id, read_at);
+```
+
 ## 2026-03-17
 
 ### `predefined_activities.exclude_from_stats`

docs/member-pilot-checklist.md

@@ -0,0 +1,46 @@
+# Pilot-Checkliste: persönlicher Mitgliederbereich
+
+## Ziel und Rahmen
+
+Mit 3–5 echten Mitgliedern auf unterschiedlichen Geräten prüfen. Keine
+Produktivdaten, Bankdaten oder Screenshots von Nachrichten an unbeteiligte
+Personen weitergeben.
+
+## Rollen- und Rechte-Smoke-Test
+
+| Rolle | Erwartetes Ergebnis |
+| --- | --- |
+| Mitglied | Kann ausschließlich `/my-club` und eigene Daten, Termine, Nachrichten sowie Rückmeldungen nutzen. Kein Zugriff auf Finanzen, Archiv, Rollen, Mitgliederlisten oder fremde Nachrichten. |
+| Trainer | Sieht die erlaubten Trainings-/Terminwerkzeuge und Rückmeldungen entsprechend den Rollenrechten; kein Zugriff auf Finanz- und Rollenverwaltung ohne zusätzliche Rechte. |
+| Vorstand | Kann die Verwaltungsansichten, Profiländerungsanfragen und Kommunikationsvorgänge entsprechend seiner Rechte nutzen. |
+
+Pro Rolle testen:
+
+1. Login, Verein auswählen und Direktaufruf eines fremden/geschützten Pfads.
+2. Eigenes Profil, Termin-Zusage/Absage und Nachrichteneingang öffnen.
+3. Für ein Mitglied prüfen, dass die API keine fremde Nachricht oder Rückfrage
+   zurückgibt (abweichende `recipientId` ausprobieren).
+
+## Mobile Hauptabläufe
+
+Auf mindestens einem Gerät mit 360–430 px Breite testen:
+
+1. Erster Login: Onboarding verstehen und schließen.
+2. Profiländerung einreichen.
+3. Termin zu- oder absagen.
+4. Nachricht öffnen, als gelesen markieren und Rückfrage senden.
+5. Seite bei gedrosselter Verbindung neu laden: Lade-, Fehler- und
+   Wiederholen-Zustände müssen verständlich sein.
+
+## Feedbackbogen
+
+Für jede Person erfassen:
+
+- Gerät/Browser und Verbindungsart.
+- Konnte die Person Profil, Terminrückmeldung und Nachricht ohne Hilfe finden?
+- Unklare Begriffe oder fehlende Informationen.
+- Fehlermeldung, Zeitpunkt und reproduzierbarer Ablauf.
+- Freigabe für breiteren Rollout: ja / nein / mit Nachbesserung.
+
+Nach dem Pilot die Ergebnisse im Vereinsvorgang dokumentieren und nur dann die
+letzte Phase-4-Checkbox im [Plan](./simple-user-plan.md) abhaken.

docs/simple-user-plan.md

@@ -44,23 +44,30 @@ Abnahme:
 
 ### Phase 3: Kommunikation und Informationen
 
-- [ ] Persönlichen Nachrichteneingang bereitstellen.
-- [ ] Vereinsankündigungen nach Datum sortiert anzeigen.
-- [ ] Gelesen-/ungelesen-Status und einen klaren Rückfrageweg ergänzen.
-- [ ] Datenschutz- und Sichtbarkeitsregeln für Nachrichten und Kontaktinformationen prüfen.
+- [x] Persönlichen Nachrichteneingang bereitstellen.
+- [x] Vereinsankündigungen nach Datum sortiert anzeigen.
+- [x] Gelesen-/ungelesen-Status und einen klaren Rückfrageweg ergänzen.
+- [x] Datenschutz- und Sichtbarkeitsregeln für Nachrichten und Kontaktinformationen prüfen.
 
 Abnahme:
 
-- [ ] Neue Vereinsinformationen sind ohne Verwaltungsmenüs auffindbar.
-- [ ] Persönliche Nachrichten sind ausschließlich für den Empfänger sichtbar.
+- [x] Neue Vereinsinformationen sind ohne Verwaltungsmenüs auffindbar.
+- [x] Persönliche Nachrichten sind ausschließlich für den Empfänger sichtbar.
 
 ### Phase 4: Mobil, Qualität und Einführung
 
 - [ ] Mobilansicht und langsame Verbindungen prüfen.
 - [ ] Berechtigungstest mit Mitglied, Trainer und Vorstand durchführen.
-- [ ] Onboarding für ersten Login, Profilprüfung und Rückmeldungen erstellen.
+- [x] Onboarding für ersten Login, Profilprüfung und Rückmeldungen erstellen.
 - [ ] Pilot mit wenigen echten Mitgliedern durchführen und Feedback auswerten.
 
+Vorbereitet:
+
+- Die persönliche Startseite stapelt ihre Inhalte auf kleinen Bildschirmen;
+  Lade-, Fehler- und Wiederholen-Zustände sind vorhanden.
+- Eine konkrete [Pilot- und Rollen-Checkliste](./member-pilot-checklist.md)
+  dokumentiert die noch mit echten Konten und Geräten auszuführenden Prüfungen.
+
 Abnahme:
 
 - [ ] Die Testrollen sehen jeweils nur die vorgesehenen Daten und Aktionen.
@@ -74,10 +81,10 @@ Abnahme:
 
 ## Erste umsetzbare Tickets
 
-1. [ ] Bestehende `member`-Berechtigungen und Navigation auditieren.
-2. [ ] Datenvertrag und Wireframe für das persönliche Dashboard festlegen.
-3. [ ] Dashboard mit Terminen und Nachrichten implementieren.
+1. [x] Bestehende `member`-Berechtigungen und Navigation auditieren.
+2. [x] Datenvertrag und Wireframe für das persönliche Dashboard festlegen.
+3. [x] Dashboard mit Terminen und Nachrichten implementieren.
 4. [x] Profil- und Kontaktdaten-Änderungsanfrage implementieren.
 5. [x] Trainings- und Veranstaltungsrückmeldungen ergänzen.
-6. [ ] Nachrichteneingang und Benachrichtigungsstatus ergänzen.
+6. [x] Nachrichteneingang und Benachrichtigungsstatus ergänzen.
 7. [ ] Rollen- und Mobile-Smoke-Test mit Pilotgruppe durchführen.

frontend/src/views/MemberHomeView.vue

@@ -6,8 +6,26 @@
       <p>{{ profile ? 'Hier findest du deine nächsten Vereinstermine.' : 'Dein Konto ist noch keinem Mitgliedsprofil zugeordnet.' }}</p>
       <router-link class="btn-secondary" to="/personal-settings">Persönliche Einstellungen</router-link>
     </header>
+    <section v-if="showOnboarding" class="onboarding" aria-labelledby="onboarding-title">
+      <div class="onboarding-copy">
+        <p class="eyebrow">Erste Schritte</p>
+        <h3 id="onboarding-title">Gut angekommen?</h3>
+        <p>Mit diesen drei Dingen bist du im Vereinsbereich schnell auf dem Laufenden.</p>
+      </div>
+      <ol class="onboarding-steps">
+        <li><span aria-hidden="true">1</span><div><strong>Profil prüfen</strong><small>Kontaktdaten aktuell halten</small></div></li>
+        <li><span aria-hidden="true">2</span><div><strong>Termine zu- oder absagen</strong><small>Damit der Verein planen kann</small></div></li>
+        <li><span aria-hidden="true">3</span><div><strong>Nachrichten lesen</strong><small>Wichtige Infos nicht verpassen</small></div></li>
+      </ol>
+      <button class="btn-primary onboarding-dismiss" type="button" @click="dismissOnboarding">Verstanden</button>
+    </section>
     <section v-if="error" class="card state-banner state-banner-error"><p>{{ error }}</p><button class="btn-secondary" @click="load">Erneut versuchen</button></section>
     <section v-else-if="!profile && !loading" class="card state-banner"><h3>Mitgliedsprofil verbinden</h3><p>Bitte wende dich an die Vereinsverwaltung, damit dein Benutzerkonto mit deinem Mitgliedsprofil verknüpft wird.</p></section>
+    <section v-if="profile" class="card inbox-card">
+      <div class="section-header"><div><h3>Meine Nachrichten <span v-if="unreadCount" class="unread-badge">{{ unreadCount }}</span></h3><p>Persönliche Nachrichten und Vereinsankündigungen.</p></div><button class="btn-secondary" :disabled="inboxLoading" @click="loadInbox">{{ inboxLoading ? 'Lädt…' : 'Aktualisieren' }}</button></div>
+      <p v-if="inboxError" class="state-banner state-banner-error">{{ inboxError }}</p><p v-else-if="inboxLoading" class="state-banner">Nachrichten werden geladen…</p><p v-else-if="inboxItems.length === 0" class="state-banner">Du hast aktuell keine Vereinsnachrichten.</p>
+      <div v-else class="inbox-layout"><ul class="inbox-list"><li v-for="item in inboxItems" :key="item.recipientId" :class="{ selected: selectedInboxItem?.recipientId === item.recipientId, unread: !item.readAt }"><button @click="selectInboxItem(item)"><span class="inbox-subject">{{ item.subject }}</span><span class="inbox-date">{{ formatDate(item.sentAt) }}</span><span class="inbox-preview">{{ textPreview(item.preview) }}</span></button></li></ul><article v-if="selectedInboxItem" class="inbox-detail"><header><small>{{ selectedInboxItem.threadType === 'broadcast' ? 'Vereinsankündigung' : 'Nachricht' }} · {{ formatDate(selectedInboxItem.sentAt) }}</small><h4>{{ selectedInboxItem.subject }}</h4></header><div v-for="message in selectedInboxItem.messages" :key="message.id" :class="['message-bubble', message.direction]"><p>{{ message.body }}</p><small>{{ message.direction === 'inbound' ? 'Deine Rückfrage' : 'Vereinsnachricht' }} · {{ formatDate(message.createdAt) }}</small></div><form v-if="selectedInboxItem.canAskQuestion" class="question-form" @submit.prevent="sendQuestion"><label>Rückfrage an die Vereinsverwaltung<textarea v-model.trim="questionBody" rows="3" maxlength="4000" placeholder="Worum geht es?"></textarea></label><p v-if="questionError" class="form-error">{{ questionError }}</p><button class="btn-primary" :disabled="sendingQuestion">{{ sendingQuestion ? 'Wird gesendet…' : 'Rückfrage senden' }}</button></form><p v-else class="state-banner">Für diese Nachricht ist keine direkte Rückfrage vorgesehen.</p></article></div>
+    </section>
     <section v-else class="card">
       <div class="section-header"><h3>Nächste Termine</h3><router-link to="/calendar">Kalender öffnen</router-link></div>
       <p v-if="loading" class="state-banner">Deine Termine werden geladen…</p>
@@ -37,15 +55,16 @@
 <script>
 import { mapGetters } from 'vuex';
 import apiClient from '../apiClient.js';
+import { safeLocalStorage } from '../utils/storage.js';
 export default {
   name: 'MemberHomeView',
-  data: () => ({ loading: false, error: '', profile: null, events: [], trainingGroups: [], messages: [], trainingDates: [], membership: {}, openProfileChangeRequests: [], showProfileForm: false, profileForm: {}, profileFormError: '', savingProfile: false, savingEventId: null, savingTrainingId: null }),
+  data: () => ({ loading: false, error: '', profile: null, events: [], trainingGroups: [], messages: [], trainingDates: [], membership: {}, openProfileChangeRequests: [], showProfileForm: false, profileForm: {}, profileFormError: '', savingProfile: false, savingEventId: null, savingTrainingId: null, inboxItems: [], inboxLoading: false, inboxError: '', unreadCount: 0, selectedInboxItem: null, questionBody: '', questionError: '', sendingQuestion: false, onboardingDismissed: true }),
   watch: { currentClub: { immediate: true, handler() { this.load(); } } },
   methods: {
     async load() {
       if (!this.currentClub) return;
       this.loading = true; this.error = '';
-      try { const { data } = await apiClient.get(`/clubmembers/dashboard/${this.currentClub}`); this.profile = data.profile; this.events = data.upcomingEvents || []; this.trainingGroups = data.trainingGroups || []; this.messages = data.messages || []; this.trainingDates = data.upcomingTrainingDates || []; this.membership = data.membership || {}; this.openProfileChangeRequests = data.openProfileChangeRequests || []; this.profileForm = this.profile ? { email: this.profile.email || '', phone: this.profile.phone || '', street: this.profile.street || '', postalCode: this.profile.postalCode || '', city: this.profile.city || '' } : {}; }
+      try { const { data } = await apiClient.get(`/clubmembers/dashboard/${this.currentClub}`); this.profile = data.profile; this.events = data.upcomingEvents || []; this.trainingGroups = data.trainingGroups || []; this.messages = data.messages || []; this.trainingDates = data.upcomingTrainingDates || []; this.membership = data.membership || {}; this.openProfileChangeRequests = data.openProfileChangeRequests || []; this.profileForm = this.profile ? { email: this.profile.email || '', phone: this.profile.phone || '', street: this.profile.street || '', postalCode: this.profile.postalCode || '', city: this.profile.city || '' } : {}; this.onboardingDismissed = !this.profile || safeLocalStorage.getItem(this.onboardingStorageKey) === 'done'; if (this.profile) await this.loadInbox(); }
       catch (error) { this.error = error?.response?.data?.error || 'Dein Vereinsbereich konnte nicht geladen werden.'; }
       finally { this.loading = false; }
     },
@@ -56,12 +75,17 @@ export default {
     async respondToEvent(event, status) { this.savingEventId = event.id; try { await apiClient.put(`/clubmembers/dashboard/${this.currentClub}/events/${event.id}/response`, { status }); event.responseStatus = status; } catch (error) { this.error = error?.response?.data?.error || 'Die Rückmeldung konnte nicht gespeichert werden.'; } finally { this.savingEventId = null; } },
     async respondToTraining(training, attendanceStatus) { this.savingTrainingId = training.id; try { await apiClient.put(`/clubmembers/dashboard/${this.currentClub}/training/${training.id}/attendance`, { attendanceStatus }); training.attendanceStatus = attendanceStatus; } catch (error) { this.error = error?.response?.data?.error || 'Die Trainingsrückmeldung konnte nicht gespeichert werden.'; } finally { this.savingTrainingId = null; } },
     async submitProfileChange() { this.profileFormError = ''; this.savingProfile = true; try { await apiClient.post(`/clubmembers/profile/${this.currentClub}/change-requests`, this.profileForm); this.showProfileForm = false; await this.load(); } catch (error) { this.profileFormError = error?.response?.data?.error || 'Die Änderungsanfrage konnte nicht eingereicht werden.'; } finally { this.savingProfile = false; } },
+    async loadInbox() { if (!this.currentClub) return; this.inboxLoading = true; this.inboxError = ''; try { const { data } = await apiClient.get(`/clubmembers/inbox/${this.currentClub}`); this.inboxItems = data.items || []; this.unreadCount = data.unreadCount || 0; if (this.selectedInboxItem) this.selectedInboxItem = this.inboxItems.find((item) => item.recipientId === this.selectedInboxItem.recipientId) || null; } catch (error) { this.inboxError = error?.response?.data?.error || 'Nachrichten konnten nicht geladen werden.'; } finally { this.inboxLoading = false; } },
+    async selectInboxItem(item) { this.selectedInboxItem = item; this.questionBody = ''; this.questionError = ''; if (!item.readAt) { try { const { data } = await apiClient.patch(`/clubmembers/inbox/${this.currentClub}/${item.recipientId}/read`); item.readAt = data.readAt; this.unreadCount = Math.max(0, this.unreadCount - 1); } catch (error) { this.inboxError = error?.response?.data?.error || 'Lesestatus konnte nicht gespeichert werden.'; } } },
+    async sendQuestion() { this.questionError = ''; if (!this.questionBody) { this.questionError = 'Bitte formuliere deine Rückfrage.'; return; } this.sendingQuestion = true; try { const { data } = await apiClient.post(`/clubmembers/inbox/${this.currentClub}/${this.selectedInboxItem.recipientId}/questions`, { body: this.questionBody }); this.selectedInboxItem.messages.push(data); this.questionBody = ''; } catch (error) { this.questionError = error?.response?.data?.error || 'Rückfrage konnte nicht gesendet werden.'; } finally { this.sendingQuestion = false; } },
+    textPreview(value) { return String(value || '').replace(/<[^>]+>/g, ' ').replace(/\s+/g, ' ').trim().slice(0, 120) || 'Nachricht öffnen'; },
+    dismissOnboarding() { safeLocalStorage.setItem(this.onboardingStorageKey, 'done'); this.onboardingDismissed = true; },
   },
-  computed: { ...mapGetters(['currentClub']), addressLabel() { return [this.profile?.street, [this.profile?.postalCode, this.profile?.city].filter(Boolean).join(' ')].filter(Boolean).join(', ') || 'Nicht hinterlegt'; }, membershipStatus() { return this.membership.status === 'active' ? 'Aktive Mitgliedschaft' : (this.membership.status || 'Mitgliedschaft wird geprüft'); } },
+  computed: { ...mapGetters(['currentClub']), onboardingStorageKey() { return `memberHomeOnboarding:${this.currentClub || 'unknown'}`; }, showOnboarding() { return Boolean(this.profile) && !this.onboardingDismissed; }, addressLabel() { return [this.profile?.street, [this.profile?.postalCode, this.profile?.city].filter(Boolean).join(' ')].filter(Boolean).join(', ') || 'Nicht hinterlegt'; }, membershipStatus() { return this.membership.status === 'active' ? 'Aktive Mitgliedschaft' : (this.membership.status || 'Mitgliedschaft wird geprüft'); } },
 };
 </script>
 
 <style scoped>
-.member-home{max-width:900px;margin:0 auto;display:grid;gap:1rem}.hero{padding:1.5rem;background:linear-gradient(135deg,var(--primary-strong),var(--primary));color:#fff}.eyebrow{margin:0;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.8rem}.hero h2{margin:.45rem 0}.hero p{max-width:58ch}.hero .btn-secondary{display:inline-block;text-decoration:none;background:#fff;color:var(--primary-strong);margin-top:.5rem}.card{padding:1.25rem}.section-header{display:flex;justify-content:space-between;gap:1rem;align-items:center}.section-header h3,.section-header p{margin:.1rem 0}.event-list{list-style:none;margin:0;padding:0}.event-list li{display:flex;justify-content:space-between;gap:1rem;padding:1rem 0;border-top:1px solid var(--border-color)}.event-list span{display:block;color:var(--text-secondary)}.response-actions{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center}.response-actions .btn-secondary{font-size:.85rem}.status-chip{padding:.2rem .5rem;border-radius:999px;background:var(--surface-100);font-weight:600}.status-chip.attending,.status-chip.present{background:#dcfce7;color:#166534}.status-chip.declined,.status-chip.excused,.status-chip.cancelled{background:#fee2e2;color:#991b1b}.profile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:1rem 0}.profile-grid .address{grid-column:1/-1}.profile-grid dt{font-size:.8rem;color:var(--text-secondary)}.profile-grid dd{margin:.2rem 0 0}.change-form{display:grid;gap:.8rem;border-top:1px solid var(--border-color);padding-top:1rem}.change-form label{display:grid;gap:.3rem;font-weight:600}.change-form input{width:100%;padding:.55rem;border:1px solid var(--border-color);border-radius:.35rem}.form-row{display:grid;grid-template-columns:1fr 2fr;gap:.75rem}.form-error{color:#b91c1c;margin:0}.membership-card p{margin:.4rem 0}.membership-card small{color:var(--text-secondary)}@media(max-width:600px){.event-list li,.section-header{flex-direction:column;align-items:flex-start}.two-column,.profile-grid,.form-row{grid-template-columns:1fr}}
+.member-home{max-width:900px;margin:0 auto;display:grid;gap:1rem}.hero{padding:1.5rem;background:linear-gradient(135deg,var(--primary-strong),var(--primary));color:#fff}.eyebrow{margin:0;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.8rem}.hero h2{margin:.45rem 0}.hero p{max-width:58ch}.hero .btn-secondary{display:inline-block;text-decoration:none;background:#fff;color:var(--primary-strong);margin-top:.5rem}.card{padding:1.25rem}.onboarding{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,1.25fr) auto;gap:1rem;align-items:center;padding:1.25rem;border:1px solid color-mix(in srgb,var(--primary) 25%,var(--border-color));border-left:4px solid var(--primary);border-radius:.6rem;background:linear-gradient(115deg,color-mix(in srgb,var(--primary) 7%,#fff),#fff)}.onboarding h3,.onboarding-copy p{margin:.25rem 0}.onboarding-steps{list-style:none;display:grid;gap:.5rem;margin:0;padding:0}.onboarding-steps li{display:flex;align-items:center;gap:.55rem}.onboarding-steps li>span{display:grid;place-items:center;width:1.55rem;height:1.55rem;border-radius:50%;background:var(--primary);color:#fff;font-size:.8rem;font-weight:700}.onboarding-steps small{display:block;color:var(--text-secondary)}.section-header{display:flex;justify-content:space-between;gap:1rem;align-items:center}.section-header h3,.section-header p{margin:.1rem 0}.unread-badge{display:inline-grid;place-items:center;min-width:1.4rem;height:1.4rem;border-radius:1rem;background:var(--primary);color:#fff;font-size:.8rem;vertical-align:middle}.inbox-layout{display:grid;grid-template-columns:minmax(210px,.75fr) minmax(0,1.25fr);border-top:1px solid var(--border-color);margin-top:1rem}.inbox-list{list-style:none;margin:0;padding:0;border-right:1px solid var(--border-color)}.inbox-list li{border-bottom:1px solid var(--border-color)}.inbox-list button{width:100%;border:0;background:transparent;text-align:left;padding:.8rem;display:grid;gap:.2rem;cursor:pointer}.inbox-list .selected button{background:var(--surface-100)}.inbox-list .unread .inbox-subject{font-weight:800}.inbox-date,.inbox-preview,.inbox-detail small{color:var(--text-secondary);font-size:.82rem}.inbox-preview{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.inbox-detail{padding:1rem}.inbox-detail h4{margin:.25rem 0 1rem}.message-bubble{padding:.75rem;border-radius:.5rem;background:var(--surface-100);margin:.65rem 0}.message-bubble.inbound{background:#e8f2ff;margin-left:1.5rem}.message-bubble p{white-space:pre-wrap;margin:0 0 .4rem}.question-form{display:grid;gap:.55rem;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border-color)}.question-form label{display:grid;gap:.3rem;font-weight:600}.question-form textarea{width:100%;padding:.55rem;border:1px solid var(--border-color);border-radius:.35rem;resize:vertical}.event-list{list-style:none;margin:0;padding:0}.event-list li{display:flex;justify-content:space-between;gap:1rem;padding:1rem 0;border-top:1px solid var(--border-color)}.event-list span{display:block;color:var(--text-secondary)}.response-actions{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center}.response-actions .btn-secondary{font-size:.85rem}.status-chip{padding:.2rem .5rem;border-radius:999px;background:var(--surface-100);font-weight:600}.status-chip.attending,.status-chip.present{background:#dcfce7;color:#166534}.status-chip.declined,.status-chip.excused,.status-chip.cancelled{background:#fee2e2;color:#991b1b}.profile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:1rem 0}.profile-grid .address{grid-column:1/-1}.profile-grid dt{font-size:.8rem;color:var(--text-secondary)}.profile-grid dd{margin:.2rem 0 0}.change-form{display:grid;gap:.8rem;border-top:1px solid var(--border-color);padding-top:1rem}.change-form label{display:grid;gap:.3rem;font-weight:600}.change-form input{width:100%;padding:.55rem;border:1px solid var(--border-color);border-radius:.35rem}.form-row{display:grid;grid-template-columns:1fr 2fr;gap:.75rem}.form-error{color:#b91c1c;margin:0}.membership-card p{margin:.4rem 0}.membership-card small{color:var(--text-secondary)}@media(max-width:700px){.onboarding{grid-template-columns:1fr;align-items:start}.onboarding-dismiss{justify-self:start}}@media(max-width:600px){.event-list li,.section-header{flex-direction:column;align-items:flex-start}.two-column,.profile-grid,.form-row,.inbox-layout{grid-template-columns:1fr}.inbox-list{border-right:0;border-bottom:1px solid var(--border-color)}}
 .two-column{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.two-column h3{margin-top:0}.simple-list{list-style:none;margin:0;padding:0}.simple-list li{display:grid;gap:.25rem;padding:.75rem 0;border-top:1px solid var(--border-color)}.simple-list span{color:var(--text-secondary);font-size:.9rem}
 </style>