Add Mitgliederverwaltungs-UI (Phase 1 MVP)

- List view with live search and member count
- Create form (/mitglieder/neu) with group checkboxes
- Detail/Edit view with inline edit toggle
- Delete with confirmation dialog
- Makefile: skip migration files already on DS (avoid root permission error)

app/src/routes/(app)/mitglieder/neu/+page.svelte

@@ -0,0 +1,174 @@
+<script lang="ts">
+	import { pb } from '$lib/pb';
+	import { goto } from '$app/navigation';
+	import { onMount } from 'svelte';
+
+	let gruppen = $state<any[]>([]);
+	let vorname     = $state('');
+	let nachname    = $state('');
+	let email       = $state('');
+	let iban        = $state('');
+	let status      = $state('aktiv');
+	let gruppe_ids  = $state<string[]>([]);
+	let error       = $state('');
+	let loading     = $state(false);
+
+	onMount(async () => {
+		gruppen = await pb.collection('gruppen').getFullList({ sort: 'name' });
+	});
+
+	function toggleGruppe(id: string) {
+		gruppe_ids = gruppe_ids.includes(id)
+			? gruppe_ids.filter(g => g !== id)
+			: [...gruppe_ids, id];
+	}
+
+	async function speichern() {
+		error = '';
+		loading = true;
+		try {
+			const verein_id = (pb.authStore.record ?? pb.authStore.model)?.verein_id;
+			await pb.collection('mitglieder').create({
+				verein_id,
+				vorname: vorname.trim(),
+				nachname: nachname.trim(),
+				email: email.trim(),
+				iban: iban.trim(),
+				status,
+				gruppe_ids
+			});
+			goto('/mitglieder');
+		} catch (e: unknown) {
+			error = e instanceof Error ? e.message : 'Fehler beim Speichern.';
+		} finally {
+			loading = false;
+		}
+	}
+</script>
+
+<svelte:head><title>Neues Mitglied — vereins.haus</title></svelte:head>
+
+<div class="top">
+	<a class="back" href="/mitglieder">← Zurück</a>
+	<h1>Neues Mitglied</h1>
+</div>
+
+<form onsubmit={(e) => { e.preventDefault(); speichern(); }}>
+	<div class="row">
+		<div class="field">
+			<label for="vorname">Vorname *</label>
+			<input id="vorname" type="text" bind:value={vorname} required autocomplete="given-name" />
+		</div>
+		<div class="field">
+			<label for="nachname">Nachname *</label>
+			<input id="nachname" type="text" bind:value={nachname} required autocomplete="family-name" />
+		</div>
+	</div>
+
+	<div class="field">
+		<label for="email">E-Mail</label>
+		<input id="email" type="email" bind:value={email} autocomplete="email" />
+	</div>
+
+	<div class="field">
+		<label for="iban">IBAN</label>
+		<input id="iban" type="text" bind:value={iban} placeholder="DE12 3456 7890 …" />
+	</div>
+
+	<div class="field">
+		<label for="status">Status</label>
+		<select id="status" bind:value={status}>
+			<option value="aktiv">Aktiv</option>
+			<option value="passiv">Passiv</option>
+			<option value="ausgetreten">Ausgetreten</option>
+		</select>
+	</div>
+
+	{#if gruppen.length > 0}
+		<div class="field">
+			<label>Gruppen</label>
+			<div class="checkboxes">
+				{#each gruppen as g (g.id)}
+					<label class="check-label">
+						<input
+							type="checkbox"
+							checked={gruppe_ids.includes(g.id)}
+							onchange={() => toggleGruppe(g.id)}
+						/>
+						{g.name}
+					</label>
+				{/each}
+			</div>
+		</div>
+	{/if}
+
+	{#if error}
+		<p class="error">{error}</p>
+	{/if}
+
+	<div class="actions">
+		<a class="btn-ghost" href="/mitglieder">Abbrechen</a>
+		<button type="submit" class="btn-primary" disabled={loading || !vorname || !nachname}>
+			{loading ? 'Speichern…' : 'Mitglied anlegen'}
+		</button>
+	</div>
+</form>
+
+<style>
+	.top { margin-bottom: 1.25rem; }
+	.back { font-size: 0.9rem; color: #1e40af; text-decoration: none; display: block; margin-bottom: 0.5rem; }
+	h1 { font-size: 1.4rem; font-weight: 700; color: #1e293b; }
+	.row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
+	.field { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 1rem; }
+	label { font-size: 0.875rem; font-weight: 500; color: #475569; }
+	input, select {
+		padding: 0.65rem 0.85rem;
+		border: 1.5px solid #e2e8f0;
+		border-radius: 8px;
+		font-size: 1rem;
+		background: #fff;
+		transition: border-color 0.15s;
+		width: 100%;
+		box-sizing: border-box;
+	}
+	input:focus, select:focus { outline: none; border-color: #1e40af; }
+	.checkboxes { display: flex; flex-wrap: wrap; gap: 0.5rem; }
+	.check-label {
+		display: flex;
+		align-items: center;
+		gap: 0.4rem;
+		padding: 0.4rem 0.75rem;
+		border: 1.5px solid #e2e8f0;
+		border-radius: 20px;
+		font-size: 0.875rem;
+		cursor: pointer;
+		transition: border-color 0.15s, background 0.15s;
+	}
+	.check-label:has(input:checked) { border-color: #1e40af; background: #e0e7ff; color: #1e40af; }
+	.check-label input { display: none; }
+	.error { color: #dc2626; font-size: 0.875rem; margin-bottom: 0.75rem; }
+	.actions { display: flex; gap: 0.75rem; margin-top: 1.5rem; }
+	.btn-primary {
+		flex: 1;
+		padding: 0.75rem;
+		background: #1e40af;
+		color: #fff;
+		border: none;
+		border-radius: 8px;
+		font-size: 1rem;
+		font-weight: 600;
+		transition: background 0.15s;
+	}
+	.btn-primary:hover:not(:disabled) { background: #1d3a9e; }
+	.btn-primary:disabled { opacity: 0.55; cursor: not-allowed; }
+	.btn-ghost {
+		padding: 0.75rem 1rem;
+		background: none;
+		border: 1.5px solid #e2e8f0;
+		border-radius: 8px;
+		font-size: 1rem;
+		color: #64748b;
+		text-decoration: none;
+		text-align: center;
+	}
+</style>