Enhance DiaryView with member form handover functionality and styling improvements

Added a new feature to mark the member form as handed over, updating the member's status accordingly. Enhanced the participant list with conditional styling based on member activity and membership status. Introduced new CSS classes for better visual representation of inactive members and those with test memberships. Improved user interaction by adding an icon for marking the form handover.

frontend/src/views/DiaryView.vue

@@ -374,7 +374,12 @@
                     </div>
                     <h3>Teilnehmer ({{ participants.length }})</h3>
                     <ul>
-                        <li v-for="member in sortedMembers()" :key="member.id" class="checkbox-item">
+                        <li v-for="member in sortedMembers()" :key="member.id" class="checkbox-item" 
+                            :class="{ 
+                                'row-inactive': !member.active, 
+                                'row-test': member.testMembership && !member.memberFormHandedOver, 
+                                'row-test-form': member.testMembership && member.memberFormHandedOver 
+                            }">
                             <label class="checkbox-item">
                                 <input type="checkbox" :value="member.id" @change="toggleParticipant(member.id)"
                                     :checked="isParticipant(member.id)">
@@ -397,6 +402,12 @@
                             </select>
                             <span v-if="false" @click="openNotesModal(member)" class="clickable">📝</span>
                             <span @click="showPic(member)" class="img-icon" v-if="member.hasImage">&#x1F5BC;</span>
+                            <span v-if="member.testMembership === true && member.memberFormHandedOver !== true" 
+                                  @click.stop="markFormHandedOver(member)" 
+                                  class="pointer form-handover-icon" 
+                                  title="Mitgliedsformular ausgehändigt">
+                                📄
+                            </span>
                             <span class="pointer" @click="openTagInfos(member)">ℹ️</span>
                         </li>
                     </ul>
@@ -1035,6 +1046,36 @@ export default {
             }
         },
 
+        async markFormHandedOver(member) {
+            try {
+                const memberData = {
+                    id: member.id,
+                    firstname: member.firstName,
+                    lastname: member.lastName,
+                    street: member.street,
+                    city: member.city,
+                    birthdate: member.birthDate,
+                    phone: member.phone,
+                    email: member.email,
+                    gender: member.gender || 'unknown',
+                    active: member.active,
+                    testMembership: member.testMembership || false,
+                    picsInInternetAllowed: member.picsInInternetAllowed || false,
+                    memberFormHandedOver: true,
+                    ttr: member.ttr,
+                    qttr: member.qttr
+                };
+                
+                await apiClient.post(`/clubmembers/set/${this.currentClub}`, memberData);
+                // Lokales Member-Objekt aktualisieren
+                member.memberFormHandedOver = true;
+                this.showInfo('Erfolg', 'Mitgliedsformular als ausgehändigt markiert', '', 'success');
+            } catch (error) {
+                console.error('Fehler beim Markieren des Formulars:', error);
+                this.showInfo('Fehler', 'Fehler beim Markieren des Mitgliedsformulars', '', 'error');
+            }
+        },
+
         async addActivity() {
             const dateId = this.date.id;
             if (this.newActivity) {
@@ -2431,6 +2472,24 @@ li {
     margin-bottom: 5px;
 }
 
+/* Teilnehmer-Farben (wie in MembersView) */
+.row-inactive {
+    opacity: .6;
+}
+
+.row-test {
+    background-color: #fff3cd;
+}
+
+.row-test-form {
+    background-color: #ffffcc;
+}
+
+/* Icon für Mitgliedsformular ausgehändigt (wie Info- und Picture-Button) */
+.form-handover-icon {
+    margin-left: 0.25rem;
+}
+
 .multiselect {
     margin-bottom: 10px;
     width: 100%;

frontend/src/views/ScheduleView.vue

@@ -886,7 +886,7 @@ td {
     color: #dc3545;
 }
 
-/* Unentschieden: gelb hinterlegen */
+/* Unentschieden: gelb hinterlegen (wie .row-test in MembersView) */
 .result-cell.completed.draw {
     background-color: #fff3cd;
 }
@@ -1062,12 +1062,12 @@ li {
 
 .match-today {
     background-color: #fff3cd !important;
-    /* Gelb für heute */
+    /* Gelb für heute (wie .row-test in MembersView) */
 }
 
 .match-next-week {
-    background-color: #d1ecf1 !important;
-    /* Hellblau für nächste Woche */
+    background-color: #ffffcc !important;
+    /* Hellgelb für nächste Woche (wie .row-test-form in MembersView) */
 }
 
 .match-today:hover {
@@ -1076,8 +1076,8 @@ li {
 }
 
 .match-next-week:hover {
-    background-color: #b8daff !important;
-    /* Dunkleres Blau beim Hover */
+    background-color: #fff9cc !important;
+    /* Dunkleres Gelb beim Hover */
 }
 
 /* Tab Navigation */