Aktualisiert die Mitgliederansicht in MembersView.vue, um Geschlechtssymbole und -bezeichnungen anzuzeigen. Entfernt die Geschlechtsspalte und implementiert neue Methoden zur Darstellung von Geschlecht. Fügt CSS-Klassen für die Geschlechtsdarstellung hinzu, um die Benutzeroberfläche zu verbessern.

frontend/src/views/MembersView.vue

@@ -60,7 +60,6 @@
                         <th>Geburtsdatum</th>
                         <th>Telefon-Nr.</th>
                         <th>Email-Adresse</th>
-                        <th>Geschlecht</th>
                         <th></th>
                     </tr>
                 </thead>
@@ -74,12 +73,16 @@
                                 <span>{{ member.picsInInternetAllowed ? '✓' : '' }}</span>
                             </td>
                             <td>{{ member.testMembership ? '*' : '' }}</td>
-                            <td>{{ member.lastName }}, {{ member.firstName }}</td>
+                            <td>
+                                <span class="gender-symbol" :class="'gender-' + (member.gender || 'unknown')" :title="labelGender(member.gender)">{{ genderSymbol(member.gender) }}</span>
+                                <span class="gender-name" :class="'gender-' + (member.gender || 'unknown')">
+                                    {{ member.lastName }}, {{ member.firstName }}
+                                </span>
+                            </td>
                             <td>{{ member.street }}, {{ member.city }}</td>
                             <td>{{ getFormattedBirthdate(member.birthDate) }}</td>
                             <td>{{ member.phone }}</td>
                             <td>{{ member.email }}</td>
-                            <td>{{ member.gender || 'unknown' }}</td>
                             <td>
                                 <button @click.stop="openNotesModal(member)">Notizen</button>
                             </td>
@@ -354,6 +357,20 @@ export default {
             const date = new Date(birthDate);
             return `${String(date.getDate()).padStart(2, '0')}.${String(date.getMonth() + 1).padStart(2, '0')}.${date.getFullYear()}`;
         },
+        labelGender(g) {
+            const v = (g || 'unknown');
+            if (v === 'male') return 'Männlich';
+            if (v === 'female') return 'Weiblich';
+            if (v === 'diverse') return 'Divers';
+            return 'Unbekannt';
+        },
+        genderSymbol(g) {
+            const v = (g || 'unknown');
+            if (v === 'male') return '♂';
+            if (v === 'female') return '♀';
+            if (v === 'diverse') return '⚧';
+            return '';
+        }
     }
 }
 </script>
@@ -448,4 +465,24 @@ table td {
     text-decoration: none;
     cursor: pointer;
 }
+
+.badge {
+    display: inline-block;
+    padding: 2px 8px;
+    border-radius: 999px;
+    font-size: 0.85rem;
+    border: 1px solid #ddd;
+    background: #f5f5f5;
+}
+.gender-symbol, .gender-name { background: transparent; border: none; }
+
+.gender-name.gender-male { color: #1a73e8; }
+.gender-name.gender-female { color: #d81b60; }
+.gender-name.gender-diverse { color: #6a1b9a; }
+.gender-name.gender-unknown { color: #444; }
+.gender-symbol.gender-male { color: #1a73e8; }
+.gender-symbol.gender-female { color: #d81b60; }
+.gender-symbol.gender-diverse { color: #6a1b9a; }
+.gender-symbol.gender-unknown { color: #444; }
+.gender-symbol { margin-right: .35rem; opacity: .9; font-size: 1.05em; display: inline-block; width: 1.1em; text-align: center; }
 </style>