<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Reitverein – Mitgliederportal</title>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
*{box-sizing:border-box;margin:0;padding:0}
:root{
--black:#111111;
--white:#FFFFFF;
--green:#2E7D32;
--green-light:#E8F5E9;
--green-mid:#4CAF50;
--red:#8B1A1A;
--red-light:#FDECEA;
--gray-100:#F5F5F5;
--gray-200:#E0E0E0;
--gray-400:#9E9E9E;
--gray-700:#424242;
--amber:#7B5E00;
--amber-light:#FFF8E1;
--blue-dark:#0D3B6B;
--blue-light:#E3F0FB;
--purple-dark:#4A1B6D;
--purple-light:#F3E8FF;
--teal-dark:#00514A;
--teal-light:#E0F2F1;
--font:'Noto Sans',sans-serif;
--h1:14pt;
--h2:11pt;
--body:9pt;
--radius:6px;
}
body{font-family:var(--font);font-size:var(--body);background:var(--gray-100);color:var(--black);min-height:100vh}
/* ===== TOPBAR ===== */
#topbar{background:var(--black);color:var(--white);display:flex;align-items:center;justify-content:space-between;padding:0 24px;height:52px;position:sticky;top:0;z-index:100}
#topbar .logo{font-size:var(--h1);font-weight:700;letter-spacing:.5px;display:flex;align-items:center;gap:10px}
#topbar .logo span{color:var(--green-mid)}
#topbar .user-info{display:flex;align-items:center;gap:12px;font-size:var(--body)}
#topbar .avatar{width:32px;height:32px;border-radius:50%;background:var(--green);color:var(--white);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11pt}
#topbar .badge{background:var(--red);color:var(--white);border-radius:10px;padding:1px 6px;font-size:8pt}
/* ===== LAYOUT ===== */
#layout{display:flex;min-height:calc(100vh - 52px)}
/* ===== SIDEBAR ===== */
#sidebar{width:200px;background:var(--black);color:var(--white);flex-shrink:0;padding:16px 0;display:flex;flex-direction:column;gap:4px}
.nav-section{padding:8px 16px 4px;font-size:8pt;font-weight:600;color:var(--gray-400);letter-spacing:.8px;text-transform:uppercase}
.nav-item{display:flex;align-items:center;gap:8px;padding:8px 16px;cursor:pointer;font-size:var(--body);color:var(--gray-200);border-left:3px solid transparent;transition:all .15s}
.nav-item:hover{background:rgba(255,255,255,.07);color:var(--white)}
.nav-item.active{background:rgba(46,125,50,.25);border-left-color:var(--green-mid);color:var(--white);font-weight:600}
.nav-icon{width:16px;height:16px;flex-shrink:0;opacity:.8}
/* ===== CONTENT ===== */
#content{flex:1;overflow-y:auto;padding:24px}
.page{display:none}
.page.active{display:block}
/* ===== PAGE HEADER ===== */
.page-header{margin-bottom:20px;border-bottom:2px solid var(--gray-200);padding-bottom:12px;display:flex;align-items:flex-end;justify-content:space-between}
.page-header h1{font-size:var(--h1);font-weight:700;color:var(--black)}
.page-header p{font-size:var(--body);color:var(--gray-700);margin-top:3px}
.btn{padding:6px 14px;border-radius:var(--radius);border:none;cursor:pointer;font-family:var(--font);font-size:var(--body);font-weight:600;transition:opacity .15s}
.btn:hover{opacity:.85}
.btn-green{background:var(--green);color:var(--white)}
.btn-red{background:var(--red);color:var(--white)}
.btn-outline{background:transparent;border:1.5px solid var(--gray-400);color:var(--gray-700)}
.btn-sm{padding:4px 10px;font-size:8pt}
/* ===== GRID ===== */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
/* ===== CARD ===== */
.card{background:var(--white);border-radius:var(--radius);border:1px solid var(--gray-200);padding:16px}
.card-header{font-size:var(--h2);font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:8px}
/* ===== SECTION COLORS ===== */
.sec-green{background:var(--green-light);border-left:4px solid var(--green)}
.sec-red{background:var(--red-light);border-left:4px solid var(--red)}
.sec-amber{background:var(--amber-light);border-left:4px solid #F9A825}
.sec-blue{background:var(--blue-light);border-left:4px solid #1565C0}
.sec-purple{background:var(--purple-light);border-left:4px solid #6A1B9A}
.sec-teal{background:var(--teal-light);border-left:4px solid var(--teal-dark)}
/* ===== STAT CARDS ===== */
.stat-card{padding:14px 16px;border-radius:var(--radius);border:1px solid var(--gray-200)}
.stat-card .num{font-size:22pt;font-weight:700;line-height:1}
.stat-card .label{font-size:var(--body);margin-top:4px}
.stat-card .sub{font-size:8pt;margin-top:2px;opacity:.75}
.stat-green{background:var(--green-light);color:var(--green)}
.stat-black{background:var(--black);color:var(--white)}
.stat-red{background:var(--red-light);color:var(--red)}
.stat-amber{background:var(--amber-light);color:var(--amber)}
/* ===== TABLE ===== */
table{width:100%;border-collapse:collapse;font-size:var(--body)}
th{background:var(--black);color:var(--white);padding:7px 10px;text-align:left;font-size:8pt;font-weight:600;letter-spacing:.3px}
td{padding:6px 10px;border-bottom:1px solid var(--gray-200)}
tr:last-child td{border-bottom:none}
tr:hover td{background:var(--gray-100)}
/* ===== BADGE ===== */
.tag{display:inline-block;padding:2px 8px;border-radius:10px;font-size:8pt;font-weight:600}
.tag-green{background:var(--green);color:var(--white)}
.tag-red{background:var(--red);color:var(--white)}
.tag-amber{background:#F9A825;color:#3E2A00}
.tag-gray{background:var(--gray-200);color:var(--gray-700)}
.tag-blue{background:#1565C0;color:var(--white)}
.tag-teal{background:var(--teal-dark);color:var(--white)}
/* ===== FORM ===== */
.form-group{margin-bottom:12px}
.form-group label{display:block;font-size:8pt;font-weight:600;margin-bottom:4px;color:var(--gray-700)}
.form-group input,.form-group select,.form-group textarea{width:100%;border:1.5px solid var(--gray-200);border-radius:var(--radius);padding:6px 10px;font-family:var(--font);font-size:var(--body);color:var(--black);background:var(--white)}
.form-group input:focus,.form-group select:focus{outline:none;border-color:var(--green)}
/* ===== HORSE CARD ===== */
.horse-card{background:var(--white);border-radius:var(--radius);border:1px solid var(--gray-200);overflow:hidden}
.horse-card .horse-top{background:var(--green);color:var(--white);padding:12px 14px;display:flex;align-items:center;gap:10px}
.horse-card .horse-avatar{width:40px;height:40px;background:rgba(255,255,255,.2);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18pt}
.horse-card .horse-name{font-size:var(--h2);font-weight:700}
.horse-card .horse-body{padding:12px 14px}
.horse-card .horse-row{display:flex;justify-content:space-between;font-size:var(--body);padding:3px 0;border-bottom:1px solid var(--gray-200)}
.horse-card .horse-row:last-child{border-bottom:none}
.horse-card .horse-row span:first-child{color:var(--gray-700)}
.horse-card .horse-row span:last-child{font-weight:600}
.horse-card .horse-footer{padding:8px 14px;background:var(--gray-100);display:flex;gap:6px}
/* ===== STALL PLAN ===== */
.stall-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:8px}
.box-cell{border-radius:var(--radius);padding:8px 6px;text-align:center;font-size:8pt;font-weight:600;border:1.5px solid transparent;cursor:pointer;transition:transform .1s}
.box-cell:hover{transform:scale(1.05)}
.box-free{background:var(--green-light);border-color:var(--green);color:var(--green)}
.box-own{background:var(--green);color:var(--white)}
.box-taken{background:var(--gray-200);color:var(--gray-700)}
.box-repair{background:var(--red-light);border-color:var(--red);color:var(--red)}
/* ===== CALENDAR ===== */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-top:8px}
.cal-day-head{text-align:center;font-size:8pt;font-weight:700;padding:4px;color:var(--gray-700)}
.cal-day{border-radius:4px;padding:4px;min-height:42px;border:1px solid var(--gray-200);font-size:8pt;cursor:pointer;background:var(--white)}
.cal-day:hover{background:var(--green-light)}
.cal-day .dn{font-weight:600;margin-bottom:2px}
.cal-day .ev{font-size:7pt;background:var(--green);color:var(--white);border-radius:3px;padding:1px 3px;margin-top:1px;display:block}
.cal-day .ev-red{background:var(--red)}
.cal-day.today{background:var(--green-light);border-color:var(--green)}
.cal-day.other{opacity:.4}
/* ===== TIMELINE ===== */
.timeline{list-style:none}
.timeline li{display:flex;gap:12px;padding:8px 0;border-bottom:1px solid var(--gray-200)}
.timeline li:last-child{border-bottom:none}
.tl-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;margin-top:3px}
.tl-green{background:var(--green)}
.tl-red{background:var(--red)}
.tl-amber{background:#F9A825}
.tl-blue{background:#1565C0}
/* ===== PROGRESS BAR ===== */
.progress{background:var(--gray-200);border-radius:4px;height:8px;overflow:hidden;margin-top:4px}
.progress-bar{height:100%;border-radius:4px;background:var(--green)}
.progress-bar.red{background:var(--red)}
.progress-bar.amber{background:#F9A825}
/* ===== NOTICE ===== */
.notice{border-radius:var(--radius);padding:10px 14px;font-size:var(--body);margin-bottom:8px;display:flex;gap:8px;align-items:flex-start}
.notice-icon{font-size:12pt;flex-shrink:0;margin-top:-1px}
.notice-green{background:var(--green-light);border-left:3px solid var(--green);color:var(--green)}
.notice-red{background:var(--red-light);border-left:3px solid var(--red);color:var(--red)}
.notice-amber{background:var(--amber-light);border-left:3px solid #F9A825;color:var(--amber)}
/* ===== SEPARATOR ===== */
.sep{margin:16px 0;border:none;border-top:1px solid var(--gray-200)}
.mt-sm{margin-top:8px}
.mt-md{margin-top:16px}
.flex-between{display:flex;justify-content:space-between;align-items:center}
.flex-gap{display:flex;gap:8px;align-items:center}
/* ===== TABS ===== */
.tabs{display:flex;border-bottom:2px solid var(--gray-200);margin-bottom:16px;gap:0}
.tab{padding:8px 16px;cursor:pointer;font-size:var(--body);font-weight:600;color:var(--gray-400);border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .15s}
.tab:hover{color:var(--black)}
.tab.active{color:var(--green);border-bottom-color:var(--green)}
</style>
</head>
<body>
<!-- TOPBAR -->
<div id="topbar">
<div class="logo">
<svg width="28" height="28" viewBox="0 0 28 28"><circle cx="14" cy="14" r="14" fill="#2E7D32"/><text x="14" y="19" text-anchor="middle" fill="white" font-size="14" font-family="serif">♞</text></svg>
<span>RV <span>Schwarzwald</span> e.V.</span>
</div>
<div class="user-info">
<span>Mo. 03. Apr. 2026</span>
<span>🔔 <span class="badge">3</span></span>
<div class="avatar">MS</div>
<span>Maria Schmidt</span>
</div>
</div>
<div id="layout">
<!-- SIDEBAR -->
<nav id="sidebar">
<div class="nav-section">Übersicht</div>
<div class="nav-item active" onclick="showPage('dashboard',this)">
<svg class="nav-icon" viewBox="0 0 16 16" fill="currentColor"><rect x="1" y="1" width="6" height="6" rx="1"/><rect x="9" y="1" width="6" height="6" rx="1"/><rect x="1" y="9" width="6" height="6" rx="1"/><rect x="9" y="9" width="6" height="6" rx="1"/></svg>
Dashboard
</div>
<div class="nav-section">Mein Bereich</div>
<div class="nav-item" onclick="showPage('profil',this)">
<svg class="nav-icon" viewBox="0 0 16 16" fill="currentColor"><circle cx="8" cy="5" r="3"/><path d="M2 14c0-3.31 2.69-6 6-6s6 2.69 6 6H2z"/></svg>
Mein Profil
</div>
<div class="nav-item" onclick="showPage('pferde',this)">
<svg class="nav-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 13V8l3-4h4l1 2 2 1v2l-2 1v3"/><circle cx="5" cy="13" r="1" fill="currentColor" stroke="none"/><circle cx="11" cy="13" r="1" fill="currentColor" stroke="none"/></svg>
Meine Pferde
</div>
<div class="nav-item" onclick="showPage('kalender',this)">
<svg class="nav-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="1" y="3" width="14" height="12" rx="1"/><path d="M1 7h14M5 1v4M11 1v4"/></svg>
Kalender
</div>
<div class="nav-item" onclick="showPage('nachrichten',this)">
<svg class="nav-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="1" y="3" width="14" height="10" rx="1"/><path d="M1 3l7 6 7-6"/></svg>
Nachrichten <span class="badge" style="margin-left:auto">3</span>
</div>
<div class="nav-section">Stallbetrieb</div>
<div class="nav-item" onclick="showPage('stallplan',this)">
<svg class="nav-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="1" y="5" width="14" height="10" rx="1"/><path d="M1 9h14M6 5V2h4v3"/></svg>
Stallplan
</div>
<div class="nav-item" onclick="showPage('dienstplan',this)">
<svg class="nav-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="1" y="1" width="14" height="14" rx="1"/><path d="M1 6h14M6 1v5M4 10h8M4 13h5"/></svg>
Dienstplan
</div>
<div class="nav-section">Sport & Training</div>
<div class="nav-item" onclick="showPage('turniere',this)">
<svg class="nav-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8 1l2 4 5 .5-3.5 3.5 1 5L8 12l-4.5 2 1-5L1 5.5 6 5z"/></svg>
Turniere
</div>
<div class="nav-item" onclick="showPage('training',this)">
<svg class="nav-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2 14V8l4-6h4l4 6v6"/><path d="M8 8v6M5 11h6"/></svg>
Training
</div>
<div class="nav-section">Verwaltung</div>
<div class="nav-item" onclick="showPage('mitglieder',this)">
<svg class="nav-icon" viewBox="0 0 16 16" fill="currentColor"><circle cx="5" cy="4" r="2.5"/><path d="M0 13c0-2.76 2.24-5 5-5s5 2.24 5 5H0z"/><circle cx="12" cy="4" r="2.5"/><path d="M9 13c0-1.46.5-2.8 1.3-3.86C11 9.05 11.49 9 12 9c2.76 0 5 2.24 5 5h-8z" opacity=".5"/></svg>
Mitglieder
</div>
<div class="nav-item" onclick="showPage('finanzen',this)">
<svg class="nav-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="1" y="4" width="14" height="9" rx="1"/><path d="M1 8h14M5 4V2h6v2"/></svg>
Finanzen
</div>
<div class="nav-item" onclick="showPage('dokumente',this)">
<svg class="nav-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 1h6l4 4v10H2V1h2z"/><path d="M10 1v4h4M5 9h6M5 12h4"/></svg>
Dokumente
</div>
</nav>
<!-- CONTENT -->
<main id="content">
<!-- ======================== DASHBOARD ======================== -->
<div class="page active" id="page-dashboard">
<div class="page-header">
<div><h1>Dashboard</h1><p>Willkommen zurück, Maria! Hier Ihre Übersicht für heute.</p></div>
<span class="tag tag-green">Mitglied seit 2018</span>
</div>
<div class="notice notice-amber"><span class="notice-icon">⚠</span><div><strong>Hinweis:</strong> Impfauffrischung für „Bella" fällig in 14 Tagen (17.04.2026).</div></div>
<div class="notice notice-red"><span class="notice-icon">!</span><div><strong>Reinigungsdienst</strong> morgen, Di. 04.04. — Box 12 & Box 14 (Sie sind eingeteilt).</div></div>
<div class="grid-4" style="margin-bottom:16px">
<div class="stat-card stat-black"><div class="num">100</div><div class="label">Mitglieder</div><div class="sub">+3 dieses Jahr</div></div>
<div class="stat-card stat-green"><div class="num">63</div><div class="label">Pferde im Stall</div><div class="sub">3 Boxen frei</div></div>
<div class="stat-card stat-red"><div class="num">5</div><div class="label">Offene Beiträge</div><div class="sub">Zahlungserinnerung</div></div>
<div class="stat-card stat-amber"><div class="num">2</div><div class="label">Turniere im April</div><div class="sub">Anmeldeschluss nächste Woche</div></div>
</div>
<div class="grid-2">
<div class="card sec-green">
<div class="card-header">♞ Meine Pferde – Schnellstatus</div>
<table>
<thead><tr><th>Pferd</th><th>Box</th><th>Nächster Termin</th><th>Status</th></tr></thead>
<tbody>
<tr><td><strong>Bella</strong></td><td>12</td><td>17.04. Impfung</td><td><span class="tag tag-amber">Bald fällig</span></td></tr>
<tr><td><strong>Sturm</strong></td><td>14</td><td>22.04. Hufschmied</td><td><span class="tag tag-green">OK</span></td></tr>
<tr><td><strong>Luna</strong></td><td>7</td><td>—</td><td><span class="tag tag-green">OK</span></td></tr>
</tbody>
</table>
</div>
<div class="card sec-teal">
<div class="card-header">📅 Nächste Termine</div>
<ul class="timeline">
<li><div class="tl-dot tl-amber"></div><div><strong>Di. 04.04.</strong> — Reinigungsdienst Box 12+14<br><span style="color:var(--gray-700)">07:00–08:30 Uhr</span></div></li>
<li><div class="tl-dot tl-green"></div><div><strong>Sa. 08.04.</strong> — Dressurtraining Gr. B<br><span style="color:var(--gray-700)">10:00–11:30 Uhr, Halle 1</span></div></li>
<li><div class="tl-dot tl-red"></div><div><strong>Mi. 17.04.</strong> — Impfauffrischung Bella<br><span style="color:var(--gray-700)">Dr. Müller, Tierarzt</span></div></li>
<li><div class="tl-dot tl-blue"></div><div><strong>Sa. 22.04.</strong> — Kreisturnier Offenburg<br><span style="color:var(--gray-700)">Anmeldeschluss: 10.04.</span></div></li>
</ul>
</div>
</div>
<div class="grid-2 mt-md">
<div class="card sec-purple">
<div class="card-header">📢 Vereinsmitteilungen</div>
<ul class="timeline">
<li><div class="tl-dot tl-green"></div><div><strong>Frühjahrsputz Stall</strong> — Sa. 12.04., 09:00 Uhr. Alle helfen mit! <span class="tag tag-green" style="margin-left:4px">Neu</span></div></li>
<li><div class="tl-dot tl-amber"></div><div><strong>Jahreshauptversammlung</strong> — Di. 29.04., 19:00 Uhr, Vereinsheim.</div></li>
<li><div class="tl-dot tl-blue"></div><div><strong>Neue Reitbahnbuchung</strong> — Ab sofort online buchbar (max. 2h/Tag).</div></li>
</ul>
</div>
<div class="card sec-red">
<div class="card-header">💰 Mein Beitragsstatus</div>
<div style="margin-bottom:10px">
<div class="flex-between"><span>Jahresbeitrag 2026</span><span class="tag tag-green">Bezahlt</span></div>
<div class="progress mt-sm"><div class="progress-bar" style="width:100%"></div></div>
</div>
<div style="margin-bottom:10px">
<div class="flex-between"><span>Boxenmiete März</span><span class="tag tag-green">Bezahlt</span></div>
<div class="progress mt-sm"><div class="progress-bar" style="width:100%"></div></div>
</div>
<div>
<div class="flex-between"><span>Boxenmiete April</span><span class="tag tag-amber">Offen</span></div>
<div class="progress mt-sm"><div class="progress-bar amber" style="width:0%"></div></div>
<div style="font-size:8pt;color:var(--red);margin-top:3px">Fällig: 10.04.2026 — 180 €</div>
</div>
</div>
</div>
</div>
<!-- ======================== PROFIL ======================== -->
<div class="page" id="page-profil">
<div class="page-header">
<div><h1>Mein Profil</h1><p>Persönliche Daten, Mitgliedschaft und Dokumente</p></div>
<button class="btn btn-green btn-sm">Profil bearbeiten</button>
</div>
<div class="grid-2">
<div>
<div class="card sec-green" style="margin-bottom:16px">
<div class="card-header">👤 Persönliche Daten</div>
<div class="grid-2">
<div class="form-group"><label>Vorname</label><input value="Maria" readonly></div>
<div class="form-group"><label>Nachname</label><input value="Schmidt" readonly></div>
<div class="form-group"><label>Geburtsdatum</label><input value="14.03.1985" readonly></div>
<div class="form-group"><label>Mitgliedsnr.</label><input value="RV-2018-047" readonly></div>
<div class="form-group"><label>Telefon</label><input value="0761 123456" readonly></div>
<div class="form-group"><label>E-Mail</label><input value="m.schmidt@mail.de" readonly></div>
</div>
<div class="form-group"><label>Adresse</label><input value="Waldstraße 12, 79100 Freiburg" readonly></div>
<div class="form-group"><label>Notfallkontakt</label><input value="Hans Schmidt – 0176 999888" readonly></div>
</div>
<div class="card sec-amber">
<div class="card-header">🎓 Qualifikationen & Lizenzen</div>
<table>
<thead><tr><th>Qualifikation</th><th>Jahr</th><th>Status</th></tr></thead>
<tbody>
<tr><td>Reitabzeichen Silber</td><td>2005</td><td><span class="tag tag-green">Gültig</span></td></tr>
<tr><td>Übungsleiterschein C</td><td>2019</td><td><span class="tag tag-amber">Läuft 2026 ab</span></td></tr>
<tr><td>Erste Hilfe Kurs</td><td>2024</td><td><span class="tag tag-green">Gültig</span></td></tr>
</tbody>
</table>
</div>
</div>
<div>
<div class="card sec-teal" style="margin-bottom:16px">
<div class="card-header">📋 Mitgliedschaft</div>
<div class="horse-row" style="display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--gray-200);font-size:var(--body)"><span style="color:var(--gray-700)">Mitgliedstyp</span><span class="tag tag-green">Aktiv mit Pferd</span></div>
<div class="horse-row" style="display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--gray-200);font-size:var(--body)"><span style="color:var(--gray-700)">Eintrittsdatum</span><strong>01.03.2018</strong></div>
<div class="horse-row" style="display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--gray-200);font-size:var(--body)"><span style="color:var(--gray-700)">Jahresbeitrag</span><strong>240 €</strong></div>
<div class="horse-row" style="display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--gray-200);font-size:var(--body)"><span style="color:var(--gray-700)">Boxenmiete/Monat</span><strong>3 × 180 € = 540 €</strong></div>
<div class="horse-row" style="display:flex;justify-content:space-between;padding:5px 0;font-size:var(--body)"><span style="color:var(--gray-700)">Bankverbindung (SEPA)</span><strong>DE89 3704 0044 ****</strong></div>
<hr class="sep">
<div style="font-size:8pt;color:var(--gray-700)">SEPA-Lastschrift autorisiert · Einzug zum 01. jedes Monats</div>
</div>
<div class="card sec-purple">
<div class="card-header">📁 Meine Dokumente</div>
<ul class="timeline">
<li><div class="tl-dot tl-green"></div><div><strong>Vereinssatzung 2024.pdf</strong><br><span style="font-size:8pt;color:var(--gray-700)">Heruntergeladen: 01.01.2024 · <a href="#" style="color:var(--green)">Download</a></span></div></li>
<li><div class="tl-dot tl-blue"></div><div><strong>SEPA-Mandat_Schmidt.pdf</strong><br><span style="font-size:8pt;color:var(--gray-700)">Unterzeichnet: 01.03.2018 · <a href="#" style="color:var(--green)">Download</a></span></div></li>
<li><div class="tl-dot tl-amber"></div><div><strong>Beitragsrechnung_2026.pdf</strong><br><span style="font-size:8pt;color:var(--gray-700)">Erstellt: 01.01.2026 · <a href="#" style="color:var(--green)">Download</a></span></div></li>
</ul>
</div>
</div>
</div>
</div>
<!-- ======================== PFERDE ======================== -->
<div class="page" id="page-pferde">
<div class="page-header">
<div><h1>Meine Pferde</h1><p>Verwalten Sie alle Ihre Pferde, Gesundheitsdaten und Termine</p></div>
<button class="btn btn-green btn-sm">+ Pferd hinzufügen</button>
</div>
<div class="notice notice-amber"><span class="notice-icon">⚠</span><div>Impfauffrischung für <strong>Bella</strong> ist in 14 Tagen fällig!</div></div>
<div class="grid-3 mt-md">
<!-- PFERD 1 -->
<div class="horse-card">
<div class="horse-top"><div class="horse-avatar">🐴</div><div><div class="horse-name">Bella</div><div style="font-size:8pt;opacity:.85">Stute · Hannoveraner · 11 J.</div></div></div>
<div class="horse-body">
<div class="horse-row"><span>Box</span><span>12</span></div>
<div class="horse-row"><span>Farbe</span><span>Fuchs</span></div>
<div class="horse-row"><span>Größe</span><span>168 cm</span></div>
<div class="horse-row"><span>Passportnr.</span><span>DE-276-2015-0412</span></div>
<div class="horse-row"><span>Tierarzt</span><span>Dr. Müller</span></div>
<div class="horse-row"><span>Nächste Impfung</span><span style="color:var(--red);font-weight:700">17.04.2026</span></div>
<div class="horse-row"><span>Hufschmied</span><span>12.05.2026</span></div>
<div class="horse-row"><span>Fütterung</span><span>Heu 2×, Kraftfutter A</span></div>
</div>
<div class="horse-footer">
<button class="btn btn-outline btn-sm">Akte</button>
<button class="btn btn-green btn-sm">Termin</button>
<button class="btn btn-outline btn-sm">Impfpass</button>
</div>
</div>
<!-- PFERD 2 -->
<div class="horse-card">
<div class="horse-top" style="background:var(--teal-dark)"><div class="horse-avatar">🐴</div><div><div class="horse-name">Sturm</div><div style="font-size:8pt;opacity:.85">Wallach · Westfale · 8 J.</div></div></div>
<div class="horse-body">
<div class="horse-row"><span>Box</span><span>14</span></div>
<div class="horse-row"><span>Farbe</span><span>Schwarzbraun</span></div>
<div class="horse-row"><span>Größe</span><span>174 cm</span></div>
<div class="horse-row"><span>Passportnr.</span><span>DE-276-2018-0887</span></div>
<div class="horse-row"><span>Tierarzt</span><span>Dr. Müller</span></div>
<div class="horse-row"><span>Nächste Impfung</span><span>15.08.2026</span></div>
<div class="horse-row"><span>Hufschmied</span><span>22.04.2026</span></div>
<div class="horse-row"><span>Fütterung</span><span>Heu 3×, Müsli spezial</span></div>
</div>
<div class="horse-footer">
<button class="btn btn-outline btn-sm">Akte</button>
<button class="btn btn-green btn-sm">Termin</button>
<button class="btn btn-outline btn-sm">Impfpass</button>
</div>
</div>
<!-- PFERD 3 -->
<div class="horse-card">
<div class="horse-top" style="background:var(--purple-dark)"><div class="horse-avatar">🐴</div><div><div class="horse-name">Luna</div><div style="font-size:8pt;opacity:.85">Stute · Araber · 6 J.</div></div></div>
<div class="horse-body">
<div class="horse-row"><span>Box</span><span>7</span></div>
<div class="horse-row"><span>Farbe</span><span>Schimmel</span></div>
<div class="horse-row"><span>Größe</span><span>158 cm</span></div>
<div class="horse-row"><span>Passportnr.</span><span>DE-276-2020-0124</span></div>
<div class="horse-row"><span>Tierarzt</span><span>Dr. Weis</span></div>
<div class="horse-row"><span>Nächste Impfung</span><span>10.07.2026</span></div>
<div class="horse-row"><span>Hufschmied</span><span>18.06.2026</span></div>
<div class="horse-row"><span>Fütterung</span><span>Heu 2×, Kraftfutter B</span></div>
</div>
<div class="horse-footer">
<button class="btn btn-outline btn-sm">Akte</button>
<button class="btn btn-green btn-sm">Termin</button>
<button class="btn btn-outline btn-sm">Impfpass</button>
</div>
</div>
</div>
<div class="card sec-teal mt-md">
<div class="card-header">📋 Gesundheitshistorie (alle Pferde)</div>
<table>
<thead><tr><th>Datum</th><th>Pferd</th><th>Behandlung</th><th>Tierarzt/Fachkraft</th><th>Kosten</th><th>Beleg</th></tr></thead>
<tbody>
<tr><td>12.02.2026</td><td>Bella</td><td>Impfung Influenza/Tetanus</td><td>Dr. Müller</td><td>85 €</td><td><a href="#" style="color:var(--green)">PDF</a></td></tr>
<tr><td>28.01.2026</td><td>Sturm</td><td>Zähne raspeln</td><td>P. Horn (Zahnarzt)</td><td>120 €</td><td><a href="#" style="color:var(--green)">PDF</a></td></tr>
<tr><td>10.01.2026</td><td>Luna</td><td>Kolik-Untersuchung</td><td>Dr. Weis</td><td>210 €</td><td><a href="#" style="color:var(--green)">PDF</a></td></tr>
<tr><td>03.12.2025</td><td>Bella</td><td>Hufschmied – Beschlag</td><td>M. Bauer</td><td>95 €</td><td><a href="#" style="color:var(--green)">PDF</a></td></tr>
</tbody>
</table>
</div>
</div>
<!-- ======================== STALLPLAN ======================== -->
<div class="page" id="page-stallplan">
<div class="page-header">
<div><h1>Stallplan</h1><p>Boxenbelegung, Reitbahnbuchung und Weidekalender</p></div>
<button class="btn btn-green btn-sm">Reitbahn buchen</button>
</div>
<div class="grid-2">
<div class="card sec-green">
<div class="card-header">🏠 Boxenplan – Stall A (24 Boxen)</div>
<div class="flex-gap" style="margin-bottom:10px;flex-wrap:wrap">
<span class="tag tag-green">■ Eigene Box</span>
<span class="tag tag-gray">■ Belegt</span>
<span class="tag" style="background:var(--green-light);color:var(--green);border:1px solid var(--green)">□ Frei</span>
<span class="tag tag-red">■ Gesperrt</span>
</div>
<div class="stall-grid">
<div class="box-cell box-taken">1<br><span style="font-size:7pt">Reno</span></div>
<div class="box-cell box-taken">2<br><span style="font-size:7pt">Falke</span></div>
<div class="box-cell box-free">3<br><span style="font-size:7pt">Frei</span></div>
<div class="box-cell box-taken">4<br><span style="font-size:7pt">Balu</span></div>
<div class="box-cell box-taken">5<br><span style="font-size:7pt">Candy</span></div>
<div class="box-cell box-taken">6<br><span style="font-size:7pt">Max</span></div>
<div class="box-cell box-own">7<br><span style="font-size:7pt">Luna ★</span></div>
<div class="box-cell box-taken">8<br><span style="font-size:7pt">Nero</span></div>
<div class="box-cell box-taken">9<br><span style="font-size:7pt">Susi</span></div>
<div class="box-cell box-free">10<br><span style="font-size:7pt">Frei</span></div>
<div class="box-cell box-taken">11<br><span style="font-size:7pt">Hugo</span></div>
<div class="box-cell box-own">12<br><span style="font-size:7pt">Bella ★</span></div>
<div class="box-cell box-taken">13<br><span style="font-size:7pt">Felix</span></div>
<div class="box-cell box-own">14<br><span style="font-size:7pt">Sturm ★</span></div>
<div class="box-cell box-taken">15<br><span style="font-size:7pt">Cara</span></div>
<div class="box-cell box-taken">16<br><span style="font-size:7pt">Rio</span></div>
<div class="box-cell box-taken">17<br><span style="font-size:7pt">Star</span></div>
<div class="box-cell box-free">18<br><span style="font-size:7pt">Frei</span></div>
<div class="box-cell box-taken">19<br><span style="font-size:7pt">Lara</span></div>
<div class="box-cell box-taken">20<br><span style="font-size:7pt">Bruno</span></div>
<div class="box-cell box-repair">21<br><span style="font-size:7pt">Gesperrt</span></div>
<div class="box-cell box-taken">22<br><span style="font-size:7pt">Mia</span></div>
<div class="box-cell box-taken">23<br><span style="font-size:7pt">Zeus</span></div>
<div class="box-cell box-taken">24<br><span style="font-size:7pt">Rosy</span></div>
</div>
<div style="margin-top:10px;font-size:8pt;color:var(--gray-700)">★ = Ihre Boxen | 21 belegt · 3 frei · 1 gesperrt</div>
</div>
<div>
<div class="card sec-teal" style="margin-bottom:16px">
<div class="card-header">🌿 Weidegruppen</div>
<table>
<thead><tr><th>Weide</th><th>Pferde</th><th>Uhrzeit</th><th>Status</th></tr></thead>
<tbody>
<tr><td>Nord-West</td><td>Bella, Susi, Candy</td><td>08:00–12:00</td><td><span class="tag tag-green">Aktiv</span></td></tr>
<tr><td>Süd</td><td>Sturm, Reno, Bruno</td><td>08:00–13:00</td><td><span class="tag tag-green">Aktiv</span></td></tr>
<tr><td>Ost-Klein</td><td>Luna, Lara, Mia</td><td>14:00–17:00</td><td><span class="tag tag-gray">Wartend</span></td></tr>
</tbody>
</table>
</div>
<div class="card sec-blue">
<div class="card-header">🏟 Reitbahnbuchung</div>
<div style="font-size:8pt;color:var(--gray-700);margin-bottom:8px">Heute, Mo. 03.04.2026 — max. 2h/Mitglied</div>
<table>
<thead><tr><th>Zeit</th><th>Halle 1</th><th>Halle 2</th><th>Außenplatz</th></tr></thead>
<tbody>
<tr><td>08:00–09:30</td><td><span class="tag tag-gray">Belegt</span></td><td><span class="tag tag-green">Frei</span></td><td><span class="tag tag-green">Frei</span></td></tr>
<tr><td>09:30–11:00</td><td><span class="tag tag-green">Frei</span></td><td><span class="tag tag-gray">Belegt</span></td><td><span class="tag tag-gray">Belegt</span></td></tr>
<tr><td>11:00–12:30</td><td style="background:rgba(46,125,50,.1)"><strong>M.Schmidt</strong></td><td><span class="tag tag-green">Frei</span></td><td><span class="tag tag-green">Frei</span></td></tr>
<tr><td>14:00–15:30</td><td><span class="tag tag-gray">Belegt</span></td><td><span class="tag tag-gray">Belegt</span></td><td><span class="tag tag-green">Frei</span></td></tr>
<tr><td>15:30–17:00</td><td><span class="tag tag-green">Frei</span></td><td><span class="tag tag-green">Frei</span></td><td><span class="tag tag-gray">Belegt</span></td></tr>
</tbody>
</table>
<button class="btn btn-green btn-sm" style="margin-top:10px">Slot buchen</button>
</div>
</div>
</div>
</div>
<!-- ======================== DIENSTPLAN ======================== -->
<div class="page" id="page-dienstplan">
<div class="page-header">
<div><h1>Dienstplan</h1><p>Putz- und Reinigungsdienste April 2026</p></div>
<button class="btn btn-green btn-sm">Dienst tauschen</button>
</div>
<div class="notice notice-red"><span class="notice-icon">!</span><div>Sie haben morgen <strong>Di. 04.04.</strong> Reinigungsdienst, 07:00–08:30 Uhr – Box 12 & 14.</div></div>
<div class="card sec-amber mt-md">
<div class="card-header">🗓 Meine Dienste im April</div>
<table>
<thead><tr><th>Datum</th><th>Tag</th><th>Zeit</th><th>Aufgabe</th><th>Boxen</th><th>Status</th></tr></thead>
<tbody>
<tr><td>04.04.</td><td>Dienstag</td><td>07:00–08:30</td><td>Ausmisten + Einstreuen</td><td>12, 14</td><td><span class="tag tag-amber">Morgen</span></td></tr>
<tr><td>12.04.</td><td>Samstag</td><td>09:00–12:00</td><td>Frühjahrsputz (alle)</td><td>Gesamtstall</td><td><span class="tag tag-blue">Freiwillig</span></td></tr>
<tr><td>19.04.</td><td>Samstag</td><td>07:00–08:30</td><td>Ausmisten + Einstreuen</td><td>7, 12, 14</td><td><span class="tag tag-gray">Geplant</span></td></tr>
<tr><td>28.04.</td><td>Montag</td><td>17:00–18:30</td><td>Stallgasse reinigen</td><td>A-Stall</td><td><span class="tag tag-gray">Geplant</span></td></tr>
</tbody>
</table>
</div>
<div class="card sec-teal mt-md">
<div class="card-header">👥 Gesamter Dienstplan April – Übersicht</div>
<table>
<thead><tr><th>KW</th><th>Montag</th><th>Dienstag</th><th>Mittwoch</th><th>Donnerstag</th><th>Freitag</th><th>Samstag</th></tr></thead>
<tbody>
<tr><td><strong>KW 14</strong></td><td>K. Bauer</td><td style="background:rgba(46,125,50,.1)"><strong>M. Schmidt</strong></td><td>T. Klein</td><td>H. Wolf</td><td>S. Braun</td><td>A. Kern</td></tr>
<tr><td><strong>KW 15</strong></td><td>L. Fuchs</td><td>P. Mayer</td><td>M. Roth</td><td>E. Koch</td><td>J. Hart</td><td>K. Bauer</td></tr>
<tr><td><strong>KW 16</strong></td><td>T. Klein</td><td>H. Wolf</td><td>L. Fuchs</td><td>P. Mayer</td><td style="background:rgba(46,125,50,.1)"><strong>M. Schmidt</strong></td><td>S. Braun</td></tr>
<tr><td><strong>KW 17</strong></td><td style="background:rgba(46,125,50,.1)"><strong>M. Schmidt</strong></td><td>A. Kern</td><td>M. Roth</td><td>J. Hart</td><td>E. Koch</td><td>T. Klein</td></tr>
</tbody>
</table>
</div>
</div>
<!-- ======================== KALENDER ======================== -->
<div class="page" id="page-kalender">
<div class="page-header">
<div><h1>Vereinskalender</h1><p>April 2026</p></div>
<div class="flex-gap">
<button class="btn btn-outline btn-sm">← März</button>
<button class="btn btn-outline btn-sm">Mai →</button>
</div>
</div>
<div class="card" style="margin-bottom:16px">
<div class="cal-grid">
<div class="cal-day-head">Mo</div><div class="cal-day-head">Di</div><div class="cal-day-head">Mi</div><div class="cal-day-head">Do</div><div class="cal-day-head">Fr</div><div class="cal-day-head">Sa</div><div class="cal-day-head">So</div>
<div class="cal-day other"><div class="dn">31</div></div>
<div class="cal-day today"><div class="dn">1</div></div>
<div class="cal-day today"><div class="dn">2</div></div>
<div class="cal-day today"><div class="dn" style="color:var(--green);font-weight:700">3</div></div>
<div class="cal-day"><div class="dn">4</div><span class="ev">Reinigung</span></div>
<div class="cal-day"><div class="dn">5</div></div>
<div class="cal-day"><div class="dn">6</div></div>
<div class="cal-day"><div class="dn">7</div></div>
<div class="cal-day"><div class="dn">8</div><span class="ev">Training B</span></div>
<div class="cal-day"><div class="dn">9</div></div>
<div class="cal-day"><div class="dn">10</div><span class="ev ev-red">Anm.-Schl.</span></div>
<div class="cal-day"><div class="dn">11</div></div>
<div class="cal-day"><div class="dn">12</div><span class="ev">Frühjahrsputz</span></div>
<div class="cal-day"><div class="dn">13</div></div>
<div class="cal-day"><div class="dn">14</div></div>
<div class="cal-day"><div class="dn">15</div></div>
<div class="cal-day"><div class="dn">16</div></div>
<div class="cal-day"><div class="dn">17</div><span class="ev ev-red">Impfung Bella</span></div>
<div class="cal-day"><div class="dn">18</div></div>
<div class="cal-day"><div class="dn">19</div><span class="ev">Dienst Stall</span></div>
<div class="cal-day"><div class="dn">20</div></div>
<div class="cal-day"><div class="dn">21</div></div>
<div class="cal-day"><div class="dn">22</div><span class="ev">Kreisturnier</span></div>
<div class="cal-day"><div class="dn">23</div></div>
<div class="cal-day"><div class="dn">24</div></div>
<div class="cal-day"><div class="dn">25</div><span class="ev">Training B</span></div>
<div class="cal-day"><div class="dn">26</div></div>
<div class="cal-day"><div class="dn">27</div></div>
<div class="cal-day"><div class="dn">28</div><span class="ev">Dienst Stall</span></div>
<div class="cal-day"><div class="dn">29</div><span class="ev ev-red">JHV 19:00</span></div>
<div class="cal-day"><div class="dn">30</div></div>
<div class="cal-day other"><div class="dn">1</div></div>
<div class="cal-day other"><div class="dn">2</div></div>
<div class="cal-day other"><div class="dn">3</div></div>
<div class="cal-day other"><div class="dn">4</div></div>
</div>
</div>
<div class="grid-2">
<div class="card sec-green">
<div class="card-header">Legende</div>
<div class="flex-gap" style="flex-wrap:wrap;gap:6px">
<span class="tag tag-green">Training</span>
<span class="tag tag-red">Tierarzt / Pflicht</span>
<span class="tag tag-amber">Dienst</span>
<span class="tag tag-blue">Turnier</span>
<span class="tag tag-teal">Vereins-Event</span>
</div>
</div>
<div class="card sec-amber">
<div class="card-header">Kommende Ereignisse (April)</div>
<ul class="timeline">
<li><div class="tl-dot tl-amber"></div><div><strong>04.04.</strong> Reinigungsdienst Box 12+14</div></li>
<li><div class="tl-dot tl-green"></div><div><strong>08.04.</strong> Dressurtraining Gruppe B</div></li>
<li><div class="tl-dot tl-red"></div><div><strong>10.04.</strong> Anmeldeschluss Kreisturnier</div></li>
<li><div class="tl-dot tl-green"></div><div><strong>12.04.</strong> Frühjahrsputz Gesamtstall</div></li>
<li><div class="tl-dot tl-red"></div><div><strong>17.04.</strong> Impfung Bella</div></li>
<li><div class="tl-dot tl-blue"></div><div><strong>22.04.</strong> Kreisturnier Offenburg</div></li>
<li><div class="tl-dot tl-red"></div><div><strong>29.04.</strong> Jahreshauptversammlung</div></li>
</ul>
</div>
</div>
</div>
<!-- ======================== TURNIERE ======================== -->
<div class="page" id="page-turniere">
<div class="page-header">
<div><h1>Turniere & Wettkämpfe</h1><p>Anmeldungen, Ergebnisse und Meldungen</p></div>
<button class="btn btn-green btn-sm">Zur Turniermeldung</button>
</div>
<div class="tabs">
<div class="tab active" onclick="switchTab(this,'t-aktuell')">Aktuelle Turniere</div>
<div class="tab" onclick="switchTab(this,'t-anmeldung')">Meine Anmeldungen</div>
<div class="tab" onclick="switchTab(this,'t-ergebnisse')">Ergebnisse</div>
</div>
<div id="t-aktuell">
<div class="card sec-blue" style="margin-bottom:12px">
<div class="card-header">🏆 Kreisturnier Offenburg – 22.04.2026</div>
<div class="grid-2">
<div>
<table>
<tr><td style="color:var(--gray-700)">Veranstalter</td><td><strong>RFV Offenburg e.V.</strong></td></tr>
<tr><td style="color:var(--gray-700)">Datum</td><td><strong>Sa.–So. 22.–23.04.2026</strong></td></tr>
<tr><td style="color:var(--gray-700)">Ort</td><td>Offenburg, Reitanlage Nord</td></tr>
<tr><td style="color:var(--gray-700)">Anmeldeschluss</td><td style="color:var(--red)"><strong>10.04.2026</strong></td></tr>
<tr><td style="color:var(--gray-700)">Nenngeld</td><td>35 € pro Start</td></tr>
</table>
</div>
<div>
<div style="font-size:8pt;font-weight:600;margin-bottom:6px">Verfügbare Prüfungen:</div>
<div style="font-size:var(--body);margin-bottom:4px">■ Dressurprüfung Kl. E · Sa. 09:00</div>
<div style="font-size:var(--body);margin-bottom:4px">■ Dressurprüfung Kl. A* · Sa. 11:00</div>
<div style="font-size:var(--body);margin-bottom:4px">■ Springprüfung Kl. E · So. 10:00</div>
<div style="font-size:var(--body);margin-bottom:12px">■ Kombinierte Prüfung Kl. A · So. 14:00</div>
<button class="btn btn-green btn-sm">Jetzt anmelden</button>
</div>
</div>
</div>
<div class="card sec-teal">
<div class="card-header">🏅 Vereinsinternes Dressurturnier – 14.06.2026</div>
<div class="grid-2">
<div>
<table>
<tr><td style="color:var(--gray-700)">Veranstalter</td><td><strong>RV Schwarzwald e.V.</strong></td></tr>
<tr><td style="color:var(--gray-700)">Datum</td><td><strong>Sa. 14.06.2026</strong></td></tr>
<tr><td style="color:var(--gray-700)">Ort</td><td>Vereinsanlage, Halle 1+2</td></tr>
<tr><td style="color:var(--gray-700)">Anmeldeschluss</td><td><strong>01.06.2026</strong></td></tr>
<tr><td style="color:var(--gray-700)">Nenngeld</td><td>Kostenlos für Mitglieder</td></tr>
</table>
</div>
<div><button class="btn btn-outline btn-sm">Vormerkung</button></div>
</div>
</div>
</div>
<div id="t-anmeldung" style="display:none">
<div class="card sec-amber">
<div class="card-header">📝 Meine Turnieranmeldungen 2026</div>
<table>
<thead><tr><th>Turnier</th><th>Pferd</th><th>Prüfung</th><th>Datum</th><th>Nenngeld</th><th>Status</th></tr></thead>
<tbody>
<tr><td>Kreisturnier Offenburg</td><td>Bella</td><td>Dressur Kl. A*</td><td>22.04.2026</td><td>35 €</td><td><span class="tag tag-amber">Offen</span></td></tr>
<tr><td>Frühjahrst. Lahr</td><td>Sturm</td><td>Dressur Kl. E</td><td>15.03.2026</td><td>35 €</td><td><span class="tag tag-green">Bestätigt</span></td></tr>
<tr><td>Vereinsturnier intern</td><td>Luna</td><td>Freizeitreiten</td><td>14.06.2026</td><td>—</td><td><span class="tag tag-blue">Vorgemerkt</span></td></tr>
</tbody>
</table>
</div>
</div>
<div id="t-ergebnisse" style="display:none">
<div class="card sec-purple">
<div class="card-header">🥇 Ergebnisse 2025/2026</div>
<table>
<thead><tr><th>Datum</th><th>Turnier</th><th>Pferd</th><th>Prüfung</th><th>Platz</th><th>Punkte</th></tr></thead>
<tbody>
<tr><td>15.03.2026</td><td>Frühjahrsturnier Lahr</td><td>Sturm</td><td>Dressur Kl. E</td><td>🥇 1. Platz</td><td>8,2</td></tr>
<tr><td>09.11.2025</td><td>Herbstturnier Freiburg</td><td>Bella</td><td>Dressur Kl. A*</td><td>🥈 2. Platz</td><td>7,8</td></tr>
<tr><td>12.09.2025</td><td>Kreismeisterschaft</td><td>Sturm</td><td>Dressur Kl. A*</td><td>5. Platz</td><td>7,1</td></tr>
<tr><td>14.06.2025</td><td>Vereinsturnier</td><td>Bella</td><td>Dressur Kl. E</td><td>🥇 1. Platz</td><td>8,5</td></tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- ======================== TRAINING ======================== -->
<div class="page" id="page-training">
<div class="page-header">
<div><h1>Training & Unterricht</h1><p>Trainingsstunden buchen und Gruppen verwalten</p></div>
<button class="btn btn-green btn-sm">Stunde buchen</button>
</div>
<div class="grid-2">
<div class="card sec-green">
<div class="card-header">🐎 Meine Trainingsgruppen</div>
<table>
<thead><tr><th>Gruppe</th><th>Trainer/in</th><th>Tag/Zeit</th><th>Pferd</th><th>Status</th></tr></thead>
<tbody>
<tr><td>Dressur B</td><td>K. Huber</td><td>Sa. 10:00</td><td>Bella</td><td><span class="tag tag-green">Aktiv</span></td></tr>
<tr><td>Springen E</td><td>T. Richter</td><td>Mi. 17:00</td><td>Sturm</td><td><span class="tag tag-green">Aktiv</span></td></tr>
<tr><td>Longe Basis</td><td>K. Huber</td><td>Di. 09:00</td><td>Luna</td><td><span class="tag tag-amber">Warteliste</span></td></tr>
</tbody>
</table>
</div>
<div class="card sec-blue">
<div class="card-header">📆 Nächste Trainingsstunden</div>
<ul class="timeline">
<li><div class="tl-dot tl-green"></div><div><strong>Sa. 05.04.</strong> – Dressur B · 10:00–11:30<br><span style="color:var(--gray-700)">Halle 1 · Bella · K. Huber</span></div></li>
<li><div class="tl-dot tl-blue"></div><div><strong>Mi. 09.04.</strong> – Springen E · 17:00–18:30<br><span style="color:var(--gray-700)">Außenplatz · Sturm · T. Richter</span></div></li>
<li><div class="tl-dot tl-green"></div><div><strong>Sa. 12.04.</strong> – Dressur B · 10:00–11:30<br><span style="color:var(--gray-700)">Halle 1 · Bella · K. Huber</span></div></li>
</ul>
</div>
</div>
<div class="card sec-amber mt-md">
<div class="card-header">📊 Trainingsstatistik 2026</div>
<div class="grid-3">
<div><div style="font-size:var(--body);font-weight:600;margin-bottom:4px">Bella – Dressur</div><div class="flex-between" style="font-size:8pt"><span>12 von 16 Stunden</span><span>75 %</span></div><div class="progress"><div class="progress-bar" style="width:75%"></div></div></div>
<div><div style="font-size:var(--body);font-weight:600;margin-bottom:4px">Sturm – Springen</div><div class="flex-between" style="font-size:8pt"><span>8 von 16 Stunden</span><span>50 %</span></div><div class="progress"><div class="progress-bar amber" style="width:50%"></div></div></div>
<div><div style="font-size:var(--body);font-weight:600;margin-bottom:4px">Luna – Longe</div><div class="flex-between" style="font-size:8pt"><span>Warteliste</span><span>0 %</span></div><div class="progress"><div class="progress-bar red" style="width:0%"></div></div></div>
</div>
</div>
</div>
<!-- ======================== NACHRICHTEN ======================== -->
<div class="page" id="page-nachrichten">
<div class="page-header">
<div><h1>Nachrichten</h1><p>Interne Vereinskommunikation</p></div>
<button class="btn btn-green btn-sm">+ Neue Nachricht</button>
</div>
<div class="grid-2">
<div class="card">
<div class="card-header">📥 Posteingang</div>
<ul class="timeline">
<li style="background:var(--green-light);padding:8px;border-radius:var(--radius);margin-bottom:6px"><div class="tl-dot tl-green" style="margin-top:5px"></div><div><strong>Vorstand</strong> – <span style="color:var(--gray-700)">01.04.2026</span><br>Jahreshauptversammlung am 29.04. – Bitte um Bestätigung Ihrer Teilnahme...<br><span class="tag tag-amber" style="margin-top:4px;display:inline-block">Ungelesen</span></div></li>
<li style="padding:8px"><div class="tl-dot tl-blue"></div><div><strong>K. Huber (Trainerin)</strong> – <span style="color:var(--gray-700)">31.03.2026</span><br>Trainingsstunde Sa. 05.04. findet wie geplant statt.</div></li>
<li style="padding:8px"><div class="tl-dot tl-red"></div><div><strong>Stallverwaltung</strong> – <span style="color:var(--gray-700)">30.03.2026</span><br>Erinnerung: Boxenmiete April offen – bitte bis 10.04. begleichen.<br><span class="tag tag-red" style="margin-top:4px;display:inline-block">Ungelesen</span></div></li>
<li style="padding:8px"><div class="tl-dot tl-amber"></div><div><strong>T. Richter (Trainer)</strong> – <span style="color:var(--gray-700)">28.03.2026</span><br>Springkurs im Mai – Anmeldung ab sofort möglich.</div></li>
</ul>
</div>
<div class="card sec-green">
<div class="card-header">✏ Neue Nachricht schreiben</div>
<div class="form-group"><label>Empfänger</label><select><option>Vorstand</option><option>Stallverwaltung</option><option>K. Huber (Trainerin)</option><option>T. Richter (Trainer)</option><option>Alle Mitglieder</option></select></div>
<div class="form-group"><label>Betreff</label><input placeholder="Betreff eingeben..."></div>
<div class="form-group"><label>Nachricht</label><textarea rows="4" placeholder="Ihre Nachricht..."></textarea></div>
<button class="btn btn-green">Senden</button>
</div>
</div>
</div>
<!-- ======================== MITGLIEDER (ADMIN) ======================== -->
<div class="page" id="page-mitglieder">
<div class="page-header">
<div><h1>Mitgliederverwaltung</h1><p>Nur für Vorstand und Administrator</p></div>
<div class="flex-gap">
<button class="btn btn-green btn-sm">+ Neues Mitglied</button>
<button class="btn btn-outline btn-sm">Export CSV</button>
</div>
</div>
<div class="grid-4" style="margin-bottom:16px">
<div class="stat-card stat-black"><div class="num">100</div><div class="label">Gesamt</div></div>
<div class="stat-card stat-green"><div class="num">82</div><div class="label">Aktiv mit Pferd</div></div>
<div class="stat-card stat-amber"><div class="num">13</div><div class="label">Fördermitglieder</div></div>
<div class="stat-card stat-red"><div class="num">5</div><div class="label">Beitrag offen</div></div>
</div>
<div class="card sec-teal">
<div class="card-header">👥 Mitgliederliste</div>
<div class="flex-gap" style="margin-bottom:10px">
<input placeholder="Suchen..." style="border:1.5px solid var(--gray-200);border-radius:var(--radius);padding:5px 10px;font-family:var(--font);font-size:var(--body);width:200px">
<select style="border:1.5px solid var(--gray-200);border-radius:var(--radius);padding:5px 10px;font-family:var(--font);font-size:var(--body)"><option>Alle Typen</option><option>Aktiv mit Pferd</option><option>Fördermitglied</option></select>
</div>
<table>
<thead><tr><th>Nr.</th><th>Name</th><th>Mitgliedstyp</th><th>Pferde</th><th>Beitrag 2026</th><th>Eintr.</th><th>Aktion</th></tr></thead>
<tbody>
<tr><td>047</td><td><strong>Schmidt, Maria</strong></td><td><span class="tag tag-green">Aktiv Pferd</span></td><td>3</td><td><span class="tag tag-green">Bezahlt</span></td><td>2018</td><td><button class="btn btn-outline btn-sm">Details</button></td></tr>
<tr><td>048</td><td>Bauer, Klaus</td><td><span class="tag tag-green">Aktiv Pferd</span></td><td>1</td><td><span class="tag tag-amber">Offen</span></td><td>2019</td><td><button class="btn btn-outline btn-sm">Details</button></td></tr>
<tr><td>049</td><td>Wolf, Hanna</td><td><span class="tag tag-green">Aktiv Pferd</span></td><td>2</td><td><span class="tag tag-green">Bezahlt</span></td><td>2020</td><td><button class="btn btn-outline btn-sm">Details</button></td></tr>
<tr><td>050</td><td>Kern, Andrea</td><td><span class="tag tag-teal">Fördermitgl.</span></td><td>0</td><td><span class="tag tag-green">Bezahlt</span></td><td>2021</td><td><button class="btn btn-outline btn-sm">Details</button></td></tr>
<tr><td>051</td><td>Mayer, Peter</td><td><span class="tag tag-green">Aktiv Pferd</span></td><td>1</td><td><span class="tag tag-red">Überfällig</span></td><td>2015</td><td><button class="btn btn-red btn-sm">Mahnung</button></td></tr>
<tr><td>052</td><td>Roth, Monika</td><td><span class="tag tag-green">Aktiv Pferd</span></td><td>2</td><td><span class="tag tag-green">Bezahlt</span></td><td>2012</td><td><button class="btn btn-outline btn-sm">Details</button></td></tr>
<tr><td>053</td><td>Fuchs, Lena</td><td><span class="tag tag-green">Aktiv Pferd</span></td><td>1</td><td><span class="tag tag-green">Bezahlt</span></td><td>2022</td><td><button class="btn btn-outline btn-sm">Details</button></td></tr>
</tbody>
</table>
<div style="margin-top:10px;font-size:8pt;color:var(--gray-700)">Zeige 7 von 100 Mitgliedern | <a href="#" style="color:var(--green)">Alle anzeigen</a></div>
</div>
</div>
<!-- ======================== FINANZEN ======================== -->
<div class="page" id="page-finanzen">
<div class="page-header">
<div><h1>Finanzen</h1><p>Beiträge, Zahlungen und Jahresabschluss 2026</p></div>
<button class="btn btn-outline btn-sm">Export PDF</button>
</div>
<div class="grid-4" style="margin-bottom:16px">
<div class="stat-card stat-green"><div class="num">28.400 €</div><div class="label">Einnahmen 2026</div><div class="sub">Stand: April</div></div>
<div class="stat-card stat-black"><div class="num">19.750 €</div><div class="label">Ausgaben 2026</div><div class="sub">Stand: April</div></div>
<div class="stat-card stat-amber"><div class="num">8.650 €</div><div class="label">Saldo</div><div class="sub">Positiv</div></div>
<div class="stat-card stat-red"><div class="num">1.890 €</div><div class="label">Offene Beiträge</div><div class="sub">5 Mitglieder</div></div>
</div>
<div class="grid-2">
<div class="card sec-green">
<div class="card-header">💵 Letzte Zahlungseingänge</div>
<table>
<thead><tr><th>Datum</th><th>Mitglied</th><th>Verwendungszweck</th><th>Betrag</th></tr></thead>
<tbody>
<tr><td>01.04.</td><td>Schmidt, M.</td><td>Boxenmiete März</td><td style="color:var(--green);font-weight:600">+540 €</td></tr>
<tr><td>01.04.</td><td>Wolf, H.</td><td>Boxenmiete März</td><td style="color:var(--green);font-weight:600">+360 €</td></tr>
<tr><td>31.03.</td><td>Roth, M.</td><td>Jahresbeitrag 2026</td><td style="color:var(--green);font-weight:600">+240 €</td></tr>
<tr><td>30.03.</td><td>Fuchs, L.</td><td>Boxenmiete März</td><td style="color:var(--green);font-weight:600">+180 €</td></tr>
</tbody>
</table>
</div>
<div class="card sec-red">
<div class="card-header">⚠ Offene Posten</div>
<table>
<thead><tr><th>Mitglied</th><th>Posten</th><th>Betrag</th><th>Fällig</th><th>Aktion</th></tr></thead>
<tbody>
<tr><td>Mayer, P.</td><td>JB + Boxenmiete</td><td style="color:var(--red);font-weight:600">-600 €</td><td style="color:var(--red)">01.03.</td><td><button class="btn btn-red btn-sm">Mahnung</button></td></tr>
<tr><td>Bauer, K.</td><td>Jahresbeitrag</td><td style="color:var(--red);font-weight:600">-240 €</td><td style="color:var(--red)">01.01.</td><td><button class="btn btn-red btn-sm">Mahnung</button></td></tr>
<tr><td>Schmidt, M.</td><td>Boxenmiete April</td><td style="color:var(--amber);font-weight:600">-180 €</td><td>10.04.</td><td><button class="btn btn-outline btn-sm">Erinnerung</button></td></tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- ======================== DOKUMENTE ======================== -->
<div class="page" id="page-dokumente">
<div class="page-header">
<div><h1>Dokumente</h1><p>Vereinsdokumente, Formulare und Protokolle</p></div>
<button class="btn btn-green btn-sm">+ Hochladen</button>
</div>
<div class="grid-2">
<div class="card sec-purple">
<div class="card-header">📑 Vereinsdokumente</div>
<ul class="timeline">
<li><div class="tl-dot tl-green"></div><div><strong>Vereinssatzung_2024.pdf</strong> <span class="tag tag-green">Aktuell</span><br><span style="font-size:8pt;color:var(--gray-700)">Beschlossen: 15.11.2024 · 248 KB · <a href="#" style="color:var(--green)">Download</a></span></div></li>
<li><div class="tl-dot tl-blue"></div><div><strong>Hausordnung_Stall_2025.pdf</strong><br><span style="font-size:8pt;color:var(--gray-700)">Stand: 01.03.2025 · 85 KB · <a href="#" style="color:var(--green)">Download</a></span></div></li>
<li><div class="tl-dot tl-blue"></div><div><strong>Datenschutzerklärung_DSGVO.pdf</strong><br><span style="font-size:8pt;color:var(--gray-700)">Stand: 01.01.2024 · 120 KB · <a href="#" style="color:var(--green)">Download</a></span></div></li>
<li><div class="tl-dot tl-amber"></div><div><strong>Beitragsordnung_2026.pdf</strong><br><span style="font-size:8pt;color:var(--gray-700)">Stand: 01.01.2026 · 45 KB · <a href="#" style="color:var(--green)">Download</a></span></div></li>
</ul>
</div>
<div class="card sec-teal">
<div class="card-header">📋 Protokolle & Formulare</div>
<ul class="timeline">
<li><div class="tl-dot tl-green"></div><div><strong>JHV_Protokoll_2025.pdf</strong><br><span style="font-size:8pt;color:var(--gray-700)">30.04.2025 · 210 KB · <a href="#" style="color:var(--green)">Download</a></span></div></li>
<li><div class="tl-dot tl-blue"></div><div><strong>Formular_Neumitglied.pdf</strong><br><span style="font-size:8pt;color:var(--gray-700)">Aktuell · 55 KB · <a href="#" style="color:var(--green)">Download</a></span></div></li>
<li><div class="tl-dot tl-blue"></div><div><strong>Formular_SEPA_Lastschrift.pdf</strong><br><span style="font-size:8pt;color:var(--gray-700)">Aktuell · 40 KB · <a href="#" style="color:var(--green)">Download</a></span></div></li>
<li><div class="tl-dot tl-amber"></div><div><strong>Formular_Pferdeanmeldung.pdf</strong><br><span style="font-size:8pt;color:var(--gray-700)">Aktuell · 62 KB · <a href="#" style="color:var(--green)">Download</a></span></div></li>
</ul>
</div>
</div>
</div>
</main>
</div>
<script>
function showPage(id, el) {
document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
document.getElementById('page-' + id).classList.add('active');
el.classList.add('active');
}
function switchTab(el, targetId) {
const page = el.closest('.page');
page.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
el.classList.add('active');
const panels = ['t-aktuell','t-anmeldung','t-ergebnisse'];
panels.forEach(id => {
const el2 = document.getElementById(id);
if (el2) el2.style.display = id === targetId ? 'block' : 'none';
});
}
</script>
</body>
</html>