From bf47ba11c9ce4d8a028e146c69a6f8ac04b517cf Mon Sep 17 00:00:00 2001
From: SysAdmin Agent <sysadmin@vhtv-stiftung.de>
Date: Wed, 11 Mar 2026 10:22:42 +0000
Subject: [PATCH] Phase 1: Sidebar-Navigation, Dashboard-Cockpit &
 HTMX-Integration

- New sidebar layout (6 sections: Dashboard, Personen, Land, Finanzen, Dokumente, System)
- Collapsible sidebar with localStorage persistence
- Top bar with user dropdown and breadcrumbs
- Dashboard cockpit with live KPI cards (Destinataere, Foerderungen, Zahlungen, Laendereien)
- Action items: overdue Nachweise, pending payments, upcoming events, new emails, expiring leases
- Quick actions panel and recent audit log
- HTMX (2.0.4) and Alpine.js (3.14.8) integration via CDN
- django-htmx middleware and CSRF token setup
- Fix IMAP_PORT empty string handling in settings

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 app/core/settings.py             |    4 +-
 app/requirements.txt             |    1 +
 app/stiftung/views/dashboard.py  |  101 ++-
 app/templates/base.html          | 1183 +++++++++++++++---------------
 app/templates/stiftung/home.html |  718 +++++++-----------
 5 files changed, 945 insertions(+), 1062 deletions(-)

diff --git a/app/core/settings.py b/app/core/settings.py
index dedda34..831bb04 100644
--- a/app/core/settings.py
+++ b/app/core/settings.py
@@ -35,6 +35,7 @@ INSTALLED_APPS = [
     "django.contrib.humanize",
     "rest_framework",
     "rest_framework.authtoken",
+    "django_htmx",
     "django_otp",
     "django_otp.plugins.otp_totp",
     "django_otp.plugins.otp_static",
@@ -48,6 +49,7 @@ MIDDLEWARE = [
     "django.middleware.security.SecurityMiddleware",
     "django.contrib.sessions.middleware.SessionMiddleware",
     "django.middleware.common.CommonMiddleware",
+    "django_htmx.middleware.HtmxMiddleware",
     "django.middleware.csrf.CsrfViewMiddleware",
     "django.contrib.auth.middleware.AuthenticationMiddleware",
     "django_otp.middleware.OTPMiddleware",
@@ -131,7 +133,7 @@ CELERY_BEAT_SCHEDULE = {
 # IMAP-Konfiguration für E-Mail-Eingang (Destinatäre)
 # Pflichtfelder: IMAP_HOST, IMAP_USER, IMAP_PASSWORD
 IMAP_HOST = os.getenv("IMAP_HOST", "")
-IMAP_PORT = int(os.getenv("IMAP_PORT", "993"))
+IMAP_PORT = int(os.getenv("IMAP_PORT") or "993")
 IMAP_USER = os.getenv("IMAP_USER", "paperless@vhtv-stiftung.de")
 IMAP_PASSWORD = os.getenv("IMAP_PASSWORD", "")
 IMAP_FOLDER = os.getenv("IMAP_FOLDER", "INBOX")
diff --git a/app/requirements.txt b/app/requirements.txt
index df51b84..7b44ac5 100644
--- a/app/requirements.txt
+++ b/app/requirements.txt
@@ -11,4 +11,5 @@ gunicorn==22.0.0
 python-dateutil==2.9.0
 markdown==3.6
 django-otp==1.2.4
+django-htmx==1.19.0
 qrcode[pil]==7.4.2
diff --git a/app/stiftung/views/dashboard.py b/app/stiftung/views/dashboard.py
index aa50cf9..93b20d2 100644
--- a/app/stiftung/views/dashboard.py
+++ b/app/stiftung/views/dashboard.py
@@ -1,5 +1,5 @@
 # views/dashboard.py
-# Phase 0: Vision 2026 – Code-Refactoring
+# Vision 2026 – Phase 1: Dashboard Cockpit
 
 import csv
 import io
@@ -59,38 +59,86 @@ from stiftung.forms import (
 
 @login_required
 def home(request):
-    """Home page for the Stiftungsverwaltung application"""
+    """Vision 2026 Dashboard Cockpit"""
     from stiftung.services.calendar_service import StiftungsKalenderService
-    
-    # Get upcoming events for the calendar widget
-    calendar_service = StiftungsKalenderService()
-    
-    # Get all events for the next 14 days
-    from datetime import timedelta
+
     today = timezone.now().date()
+    current_quarter = (today.month - 1) // 3 + 1
+    current_year = today.year
+
+    # ── Calendar events ──
+    calendar_service = StiftungsKalenderService()
     end_date = today + timedelta(days=14)
     all_events = calendar_service.get_all_events(today, end_date)
-    
-    # Filter for upcoming and overdue
     upcoming_events = [e for e in all_events if not getattr(e, 'overdue', False)]
     overdue_events = [e for e in all_events if getattr(e, 'overdue', False)]
-    
-    # Get current month events for mini calendar
-    from calendar import monthrange
-    _, last_day = monthrange(today.year, today.month)
-    month_start = today.replace(day=1)
-    month_end = today.replace(day=last_day)
-    current_month_events = calendar_service.get_all_events(month_start, month_end)
-    
+
+    # ── Stats ──
+    destinataer_count = Destinataer.objects.count()
+    paechter_count = Paechter.objects.count()
+    land_count = Land.objects.count()
+
+    # Active Foerderungen (not rejected/cancelled, current or future year)
+    foerderung_active = Foerderung.objects.filter(
+        jahr__gte=current_year,
+        status__in=['beantragt', 'genehmigt'],
+    ).count()
+
+    # ── Overdue Nachweise (current quarter) ──
+    overdue_nachweise = VierteljahresNachweis.objects.filter(
+        quartal=current_quarter,
+        jahr=current_year,
+        status__in=['offen', 'teilweise', 'nachbesserung'],
+    ).select_related('destinataer').order_by('jahr', 'quartal')[:10]
+
+    # ── Pending payments (not yet paid out) ──
+    pending_payments = DestinataerUnterstuetzung.objects.filter(
+        status__in=['geplant', 'faellig', 'in_bearbeitung'],
+    ).select_related('destinataer').order_by('faellig_am')[:10]
+
+    pending_payment_total = DestinataerUnterstuetzung.objects.filter(
+        status__in=['geplant', 'faellig', 'in_bearbeitung'],
+    ).aggregate(total=Coalesce(Sum('betrag'), Decimal('0')))['total']
+
+    # ── New emails ──
+    new_emails = DestinataerEmailEingang.objects.filter(
+        status='neu',
+    ).order_by('-eingangsdatum')[:5]
+    new_email_count = DestinataerEmailEingang.objects.filter(status='neu').count()
+
+    # ── Expiring leases (next 90 days) ──
+    lease_cutoff = today + timedelta(days=90)
+    expiring_leases = LandVerpachtung.objects.filter(
+        pachtende__lte=lease_cutoff,
+        pachtende__gte=today,
+    ).select_related('paechter', 'land').order_by('pachtende')[:5]
+
+    # ── Recent audit log ──
+    recent_audit = AuditLog.objects.order_by('-timestamp')[:5]
+
     context = {
-        "title": "Stiftungsverwaltung", 
-        "description": "Foundation Management System",
-        "upcoming_events": upcoming_events[:5],  # Show only 5 upcoming events
-        "overdue_events": overdue_events[:3],    # Show only 3 overdue events
-        "current_month_events": current_month_events,
+        "title": "Dashboard",
+        # Stats
+        "destinataer_count": destinataer_count,
+        "paechter_count": paechter_count,
+        "land_count": land_count,
+        "foerderung_active": foerderung_active,
+        # Calendar
+        "upcoming_events": upcoming_events[:5],
+        "overdue_events": overdue_events[:3],
         "today": today,
+        # Action items
+        "overdue_nachweise": overdue_nachweise,
+        "pending_payments": pending_payments,
+        "pending_payment_total": pending_payment_total,
+        "new_emails": new_emails,
+        "new_email_count": new_email_count,
+        "expiring_leases": expiring_leases,
+        "recent_audit": recent_audit,
+        "current_quarter": current_quarter,
+        "current_year": current_year,
     }
-    
+
     return render(request, "stiftung/home.html", context)
 
 
@@ -106,12 +154,7 @@ def health_check(request):
     )
 
 
-## Removed duplicate paperless_ping referencing non-existent PAPERLESS_URL
-
-
 # CSV Import Views
 @api_view(["GET"])
 def health(_request):
     return Response({"status": "ok"})
-
-
diff --git a/app/templates/base.html b/app/templates/base.html
index 4e7ebc4..d7ebb8b 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -3,14 +3,14 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{% block title %}van Hees-Theyssen-Vogel'sche Stiftung - Stiftungsverwaltung{% endblock %}</title>
-    
+    <title>{% block title %}van Hees-Theyssen-Vogel'sche Stiftung{% endblock %}</title>
+
     <!-- Bootstrap CSS -->
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
     <!-- Font Awesome -->
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
-    
-    <!-- Custom CSS - British Racing Green Theme -->
+
+    <!-- Custom CSS - Vision 2026 Sidebar Theme -->
     <style>
         /* British Racing Green Color Palette */
         :root {
@@ -23,137 +23,289 @@
             --orange-accent: #fd7e14;
             --orange-light: #ff922b;
             --orange-dark: #e8590c;
+            --sidebar-width: 260px;
+            --sidebar-collapsed-width: 64px;
+            --topbar-height: 56px;
         }
-        
+
         /* Global Typography */
         html {
             font-size: 15px;
         }
-        
+
         body {
-            font-size: 0.875rem; /* 12.25px */
+            font-size: 0.875rem;
             line-height: 1.4;
             font-weight: 400;
+            background-color: #f0f2f5;
+            overflow-x: hidden;
         }
-        
+
         .h1, .h2, .h3, .h4, .h5, .h6,
         h1, h2, h3, h4, h5, h6 {
             font-weight: 600;
             line-height: 1.3;
             margin-bottom: 0.75rem;
         }
-        
+
         .h1, h1 { font-size: 2rem; }
         .h2, h2 { font-size: 1.65rem; }
         .h3, h3 { font-size: 1.4rem; }
         .h4, h4 { font-size: 1.15rem; }
         .h5, h5 { font-size: 1rem; }
         .h6, h6 { font-size: 0.875rem; }
-        
-        /* Compact spacing */
-        .container, .container-fluid, .container-lg {
-            padding-left: 0.75rem;
-            padding-right: 0.75rem;
+
+        /* ============ SIDEBAR ============ */
+        .sidebar {
+            position: fixed;
+            top: 0;
+            left: 0;
+            bottom: 0;
+            width: var(--sidebar-width);
+            background: linear-gradient(180deg, var(--racing-green-dark) 0%, var(--racing-green) 100%);
+            z-index: 1040;
+            overflow-y: auto;
+            overflow-x: hidden;
+            transition: width 0.2s ease;
+            scrollbar-width: thin;
+            scrollbar-color: rgba(255,255,255,0.2) transparent;
         }
-        
-        .row {
-            margin-left: -0.5rem;
-            margin-right: -0.5rem;
+
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
         }
-        
-        .col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
-        .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
-        .col-auto, .col-sm, .col-sm-auto, .col-md, .col-md-auto,
-        .col-lg, .col-lg-auto, .col-xl, .col-xl-auto {
-            padding-left: 0.5rem;
-            padding-right: 0.5rem;
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
         }
-        
-        
-        .border-left-primary {
-            border-left: 0.25rem solid var(--racing-green) !important;
-        }
-        .border-left-success {
-            border-left: 0.25rem solid var(--racing-green-light) !important;
-        }
-        .border-left-info {
-            border-left: 0.25rem solid var(--grey-medium) !important;
-        }
-        .border-left-warning {
-            border-left: 0.25rem solid var(--orange-accent) !important;
-        }
-        .border-left-danger {
-            border-left: 0.25rem solid #dc3545 !important;
-        }
-        
-        /* Main navbar with racing green gradient */
-        .bg-gradient-primary {
-            background-color: var(--racing-green);
-            background-image: linear-gradient(180deg, var(--racing-green-light) 10%, var(--racing-green-dark) 100%);
-        }
-        
-        /* Navigation styling - More Compact */
-        .navbar {
-            padding: 0.375rem 0;
-        }
-        
-        .navbar-brand {
+
+        .sidebar-brand {
+            display: flex;
+            align-items: center;
+            padding: 1rem 1rem;
+            color: white;
+            text-decoration: none;
             font-weight: 700;
-            font-size: 1.1rem;
-            color: white !important;
-            padding: 0.375rem 0;
+            font-size: 0.95rem;
+            border-bottom: 1px solid rgba(255,255,255,0.1);
+            min-height: var(--topbar-height);
         }
-        
-        .navbar-nav .nav-link,
-        .navbar-nav .nav-link.dropdown-toggle {
-            padding: 0.375rem 0.5rem !important;
-            display: inline-flex !important;
-            align-items: center !important;
-            white-space: nowrap !important;
-            font-size: 0.8rem;
-        }
-        
-        .navbar-dark .navbar-nav .nav-link {
-            color: rgba(255, 255, 255, 0.9);
-        }
-        
-        .navbar-dark .navbar-nav .nav-link:hover {
+
+        .sidebar-brand:hover {
             color: var(--orange-light);
         }
-        
-        /* Dropdown menus - More Compact */
-        .dropdown-menu {
-            border: 1px solid #dee2e6;
-            box-shadow: 0 0.25rem 0.5rem rgba(0, 66, 37, 0.15);
+
+        .sidebar-brand i {
+            font-size: 1.25rem;
+            margin-right: 0.75rem;
+            flex-shrink: 0;
+        }
+
+        .sidebar-section {
+            padding: 0.5rem 0;
+            border-bottom: 1px solid rgba(255,255,255,0.06);
+        }
+
+        .sidebar-heading {
+            font-size: 0.65rem;
+            text-transform: uppercase;
+            letter-spacing: 0.08em;
+            color: rgba(255,255,255,0.4);
+            padding: 0.75rem 1rem 0.25rem;
+            font-weight: 600;
+        }
+
+        .sidebar-link {
+            display: flex;
+            align-items: center;
+            padding: 0.5rem 1rem;
+            color: rgba(255,255,255,0.75);
+            text-decoration: none;
             font-size: 0.8rem;
+            transition: all 0.15s;
+            border-left: 3px solid transparent;
         }
-        
-        .dropdown-item {
-            padding: 0.375rem 0.75rem;
-            font-size: 0.8rem;
+
+        .sidebar-link:hover {
+            color: white;
+            background: rgba(255,255,255,0.08);
+            border-left-color: var(--orange-accent);
         }
-        
-        .dropdown-item:hover {
-            background-color: rgba(0, 66, 37, 0.1);
-            color: var(--racing-green-dark);
+
+        .sidebar-link.active {
+            color: white;
+            background: rgba(255,255,255,0.12);
+            border-left-color: var(--orange-accent);
         }
-        
-        .dropdown-header {
-            font-size: 0.75rem;
-            padding: 0.25rem 0.75rem;
+
+        .sidebar-link i {
+            width: 1.25rem;
+            text-align: center;
+            margin-right: 0.75rem;
+            font-size: 0.85rem;
+            flex-shrink: 0;
         }
-        
-        /* Cards and content - More Compact */
+
+        .sidebar-link .badge {
+            margin-left: auto;
+            font-size: 0.65rem;
+        }
+
+        /* ============ TOPBAR ============ */
+        .topbar {
+            position: fixed;
+            top: 0;
+            left: var(--sidebar-width);
+            right: 0;
+            height: var(--topbar-height);
+            background: white;
+            border-bottom: 1px solid #dee2e6;
+            display: flex;
+            align-items: center;
+            padding: 0 1.5rem;
+            z-index: 1030;
+            transition: left 0.2s ease;
+        }
+
+        .topbar-toggle {
+            background: none;
+            border: none;
+            color: var(--grey-dark);
+            font-size: 1.1rem;
+            cursor: pointer;
+            padding: 0.25rem 0.5rem;
+            margin-right: 1rem;
+            border-radius: 0.25rem;
+        }
+
+        .topbar-toggle:hover {
+            background: var(--grey-light);
+        }
+
+        .topbar-breadcrumb {
+            font-size: 0.85rem;
+            color: var(--grey-medium);
+        }
+
+        .topbar-breadcrumb a {
+            color: var(--racing-green);
+            text-decoration: none;
+        }
+
+        .topbar-breadcrumb a:hover {
+            text-decoration: underline;
+        }
+
+        .topbar-actions {
+            margin-left: auto;
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+        }
+
+        /* ============ MAIN CONTENT ============ */
+        .main-content {
+            margin-left: var(--sidebar-width);
+            padding-top: var(--topbar-height);
+            min-height: 100vh;
+            transition: margin-left 0.2s ease;
+        }
+
+        .content-wrapper {
+            padding: 1.25rem 1.5rem;
+            max-width: 1600px;
+        }
+
+        /* ============ SIDEBAR COLLAPSED ============ */
+        body.sidebar-collapsed .sidebar {
+            width: var(--sidebar-collapsed-width);
+        }
+
+        body.sidebar-collapsed .sidebar .sidebar-brand span,
+        body.sidebar-collapsed .sidebar .sidebar-heading,
+        body.sidebar-collapsed .sidebar .sidebar-link span,
+        body.sidebar-collapsed .sidebar .sidebar-link .badge {
+            display: none;
+        }
+
+        body.sidebar-collapsed .sidebar .sidebar-brand i {
+            margin-right: 0;
+        }
+
+        body.sidebar-collapsed .sidebar .sidebar-link {
+            justify-content: center;
+            padding: 0.6rem;
+            border-left: none;
+        }
+
+        body.sidebar-collapsed .sidebar .sidebar-link i {
+            margin-right: 0;
+            font-size: 1rem;
+        }
+
+        body.sidebar-collapsed .topbar {
+            left: var(--sidebar-collapsed-width);
+        }
+
+        body.sidebar-collapsed .main-content {
+            margin-left: var(--sidebar-collapsed-width);
+        }
+
+        /* ============ MOBILE ============ */
+        @media (max-width: 991.98px) {
+            .sidebar {
+                transform: translateX(-100%);
+                width: var(--sidebar-width);
+            }
+
+            body.sidebar-open .sidebar {
+                transform: translateX(0);
+            }
+
+            body.sidebar-open .sidebar-overlay {
+                display: block;
+            }
+
+            .sidebar-overlay {
+                display: none;
+                position: fixed;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                background: rgba(0,0,0,0.4);
+                z-index: 1035;
+            }
+
+            .topbar {
+                left: 0;
+            }
+
+            .main-content {
+                margin-left: 0;
+            }
+
+            body.sidebar-collapsed .topbar {
+                left: 0;
+            }
+
+            body.sidebar-collapsed .main-content {
+                margin-left: 0;
+            }
+        }
+
+        /* ============ CARDS ============ */
         .card {
             border: 1px solid #e9ecef;
-            box-shadow: 0 0.125rem 1rem 0 rgba(0, 66, 37, 0.08);
+            box-shadow: 0 0.125rem 0.5rem rgba(0, 66, 37, 0.06);
             margin-bottom: 0.75rem;
+            border-radius: 0.5rem;
         }
-        
+
         .card-body {
             padding: 0.75rem;
         }
-        
+
         .card-header {
             background-color: var(--grey-light);
             border-bottom: 1px solid #dee2e6;
@@ -162,34 +314,40 @@
             font-size: 0.875rem;
             font-weight: 600;
         }
-        
+
         .card-header.bg-primary {
             background-color: var(--racing-green) !important;
             color: white;
         }
-        
+
         .card-header.bg-success {
             background-color: var(--racing-green-light) !important;
             color: white;
         }
-        
+
         .card-header.bg-info {
             background-color: var(--grey-medium) !important;
             color: white;
         }
-        
+
         .card-header.bg-warning {
             background-color: var(--orange-accent) !important;
             color: white;
         }
-        
+
         .card-title {
             font-size: 0.9rem;
             font-weight: 600;
             margin-bottom: 0;
         }
-        
-        /* Tables */
+
+        .border-left-primary { border-left: 0.25rem solid var(--racing-green) !important; }
+        .border-left-success { border-left: 0.25rem solid var(--racing-green-light) !important; }
+        .border-left-info { border-left: 0.25rem solid var(--grey-medium) !important; }
+        .border-left-warning { border-left: 0.25rem solid var(--orange-accent) !important; }
+        .border-left-danger { border-left: 0.25rem solid #dc3545 !important; }
+
+        /* ============ TABLES ============ */
         .table {
             font-size: 0.85rem;
             margin-bottom: 0.75rem;
@@ -205,22 +363,17 @@
             text-transform: uppercase;
             letter-spacing: 0.025em;
         }
-        
+
         .table td {
             padding: 0.5rem;
             border-top: 1px solid #dee2e6;
         }
-        
-        .table-sm th,
-        .table-sm td {
+
+        .table-sm th, .table-sm td {
             padding: 0.375rem;
         }
-        
-        .table-light {
-            background-color: var(--grey-light);
-        }
-        
-        /* Buttons - More Compact */
+
+        /* ============ BUTTONS ============ */
         .btn {
             font-size: 0.8rem;
             padding: 0.375rem 0.75rem;
@@ -228,551 +381,389 @@
             font-weight: 500;
             line-height: 1.3;
         }
-        
+
         .btn-sm {
             font-size: 0.75rem;
             padding: 0.25rem 0.5rem;
-            border-radius: 0.2rem;
         }
-        
+
         .btn-lg {
             font-size: 0.9rem;
             padding: 0.5rem 1rem;
-            border-radius: 0.3rem;
         }
-        
-        /* Form Controls - More Compact */
+
+        .btn-primary { background-color: var(--racing-green); border-color: var(--racing-green); }
+        .btn-primary:hover { background-color: var(--racing-green-dark); border-color: var(--racing-green-dark); }
+        .btn-success { background-color: var(--racing-green-light); border-color: var(--racing-green-light); }
+        .btn-success:hover { background-color: var(--racing-green); border-color: var(--racing-green); }
+        .btn-warning { background-color: var(--orange-accent); border-color: var(--orange-accent); color: white; }
+        .btn-warning:hover { background-color: var(--orange-dark); border-color: var(--orange-dark); color: white; }
+        .btn-outline-primary { color: var(--racing-green); border-color: var(--racing-green); }
+        .btn-outline-primary:hover { background-color: var(--racing-green); border-color: var(--racing-green); }
+        .btn-accent { background-color: var(--orange-accent); border-color: var(--orange-accent); color: white; }
+        .btn-accent:hover { background-color: var(--orange-dark); border-color: var(--orange-dark); color: white; }
+
+        /* ============ FORMS ============ */
         .form-control, .form-select {
             font-size: 0.8rem;
             padding: 0.375rem 0.5rem;
             line-height: 1.3;
         }
-        
         .form-control-sm, .form-select-sm {
             font-size: 0.75rem;
             padding: 0.25rem 0.375rem;
         }
-        
         .form-label {
             font-size: 0.8rem;
             font-weight: 500;
             margin-bottom: 0.25rem;
         }
-        
         .form-text {
             font-size: 0.7rem;
             margin-top: 0.15rem;
         }
-        
-        .form-check-label {
-            font-size: 0.8rem;
+        .form-control:focus, .form-select:focus {
+            border-color: var(--racing-green-light);
+            box-shadow: 0 0 0 0.15rem rgba(0, 66, 37, 0.25);
         }
-        
-        /* Badges - More Compact */
+
+        /* ============ BADGES ============ */
         .badge {
             font-size: 0.7rem;
             padding: 0.25em 0.5em;
             font-weight: 500;
         }
-        
-        /* Progress bars */
-        .progress {
-            height: 1rem;
-            font-size: 0.65rem;
-        }
-        
-        .progress-bar {
-            line-height: 1rem;
-        }
-        .btn-primary {
-            background-color: var(--racing-green);
-            border-color: var(--racing-green);
-        }
-        
-        .btn-primary:hover {
-            background-color: var(--racing-green-dark);
-            border-color: var(--racing-green-dark);
-        }
-        
-        .btn-success {
-            background-color: var(--racing-green-light);
-            border-color: var(--racing-green-light);
-        }
-        
-        .btn-success:hover {
-            background-color: var(--racing-green);
-            border-color: var(--racing-green);
-        }
-        
-        .btn-warning {
-            background-color: var(--orange-accent);
-            border-color: var(--orange-accent);
-            color: white;
-        }
-        
-        .btn-warning:hover {
-            background-color: var(--orange-dark);
-            border-color: var(--orange-dark);
-            color: white;
-        }
-        
-        .btn-outline-primary {
-            color: var(--racing-green);
-            border-color: var(--racing-green);
-        }
-        
-        .btn-outline-primary:hover {
-            background-color: var(--racing-green);
-            border-color: var(--racing-green);
-        }
-        
-        .btn-outline-secondary {
-            color: var(--grey-medium);
-            border-color: var(--grey-medium);
-        }
-        
-        .btn-outline-secondary:hover {
-            background-color: var(--grey-medium);
-            border-color: var(--grey-medium);
-        }
-        
-        /* Alerts - More Compact */
+        .badge.bg-primary { background-color: var(--racing-green) !important; }
+        .badge.bg-success { background-color: var(--racing-green-light) !important; }
+        .badge.bg-warning { background-color: var(--orange-accent) !important; color: white; }
+        .badge.bg-info { background-color: var(--grey-medium) !important; }
+
+        /* ============ ALERTS ============ */
         .alert {
             padding: 0.5rem 0.75rem;
             margin-bottom: 0.75rem;
             font-size: 0.8rem;
         }
-        
-        .alert-success {
-            background-color: rgba(0, 104, 55, 0.1);
-            border-color: var(--racing-green-light);
-            color: var(--racing-green-dark);
-        }
-        
-        .alert-warning {
-            background-color: rgba(253, 126, 20, 0.1);
-            border-color: var(--orange-accent);
-            color: var(--orange-dark);
-        }
-        
-        /* Responsive adjustments */
-        @media (max-width: 768px) {
-            html {
-                font-size: 13px;
-            }
+        .alert-success { background-color: rgba(0,104,55,0.1); border-color: var(--racing-green-light); color: var(--racing-green-dark); }
+        .alert-warning { background-color: rgba(253,126,20,0.1); border-color: var(--orange-accent); color: var(--orange-dark); }
 
-            body {
-                font-size: 0.8rem;
-            }
+        /* ============ PAGINATION ============ */
+        .pagination .page-link { color: var(--racing-green); font-size: 0.8rem; padding: 0.375rem 0.5rem; }
+        .pagination .page-item.active .page-link { background-color: var(--racing-green); border-color: var(--racing-green); }
 
-            .navbar-brand {
-                font-size: 1rem;
-            }
+        /* ============ PROGRESS ============ */
+        .progress { height: 1rem; font-size: 0.65rem; }
 
-            .navbar-nav .nav-link {
-                font-size: 0.75rem;
-                padding: 0.25rem 0.375rem !important;
-            }
+        /* ============ TEXT ============ */
+        .text-primary { color: var(--racing-green) !important; }
+        .text-success { color: var(--racing-green-light) !important; }
+        .bg-accent { background-color: var(--orange-accent) !important; color: white; }
 
-            .card-body {
-                padding: 0.5rem;
-            }
-
-            .btn {
-                font-size: 0.75rem;
-                padding: 0.25rem 0.5rem;
-            }
-
-            .table {
-                font-size: 0.75rem;
-            }
-
-            .table th,
-            .table td {
-                padding: 0.375rem;
-            }
-        }
-
-        @media (min-width: 768px) and (max-width: 1200px) {
-            html {
-                font-size: 14px;
-            }
-
-            .container, .container-lg {
-                max-width: 100%;
-            }
-
-            .table {
-                font-size: 0.8rem;
-            }
-        }
-
-        @media (min-width: 1400px) {
-            .container-lg {
-                max-width: 1600px;
-            }
-        }
-        
-        /* Table styling */
-        .table-light {
-            background-color: var(--grey-light);
-        }
-        
-        /* Badges */
-        .badge.bg-primary {
-            background-color: var(--racing-green) !important;
-        }
-        
-        .badge.bg-success {
-            background-color: var(--racing-green-light) !important;
-        }
-        
-        .badge.bg-warning {
-            background-color: var(--orange-accent) !important;
-            color: white;
-        }
-        
-        .badge.bg-info {
-            background-color: var(--grey-medium) !important;
-        }
-        
-        /* Pagination */
-        .pagination .page-link {
-            color: var(--racing-green);
-            border-color: #dee2e6;
-            font-size: 0.8rem;
-            padding: 0.375rem 0.5rem;
-        }
-        
-        .pagination .page-item.active .page-link {
-            background-color: var(--racing-green);
-            border-color: var(--racing-green);
-        }
-        
-        .pagination .page-link:hover {
-            color: var(--racing-green-dark);
-            background-color: var(--grey-light);
-        }
-        
-        /* Text colors */
-        .text-primary {
-            color: var(--racing-green) !important;
-        }
-        
-        .text-success {
-            color: var(--racing-green-light) !important;
-        }
-        
-        /* Form controls */
-        .form-control:focus {
-            border-color: var(--racing-green-light);
-            box-shadow: 0 0 0 0.15rem rgba(0, 66, 37, 0.25);
-        }
-        
-        .form-select:focus {
-            border-color: var(--racing-green-light);
-            box-shadow: 0 0 0 0.15rem rgba(0, 66, 37, 0.25);
-        }
-        
-        /* Footer */
-        .sticky-footer {
-            background-color: var(--grey-light) !important;
+        /* ============ FOOTER ============ */
+        .main-footer {
+            padding: 0.75rem 1.5rem;
+            font-size: 0.75rem;
+            color: var(--grey-medium);
             border-top: 1px solid #dee2e6;
-            padding: 0.75rem 0;
+            background: white;
+            text-align: center;
+        }
+
+        /* ============ DASHBOARD WIDGETS ============ */
+        .stat-card {
+            border-radius: 0.5rem;
+            border: none;
+            box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.06);
+        }
+
+        .stat-card .stat-icon {
+            width: 48px;
+            height: 48px;
+            border-radius: 0.5rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.25rem;
+            color: white;
+        }
+
+        .stat-card .stat-value {
+            font-size: 1.5rem;
+            font-weight: 700;
+            line-height: 1.2;
+            color: var(--grey-dark);
+        }
+
+        .stat-card .stat-label {
+            font-size: 0.75rem;
+            color: var(--grey-medium);
+            text-transform: uppercase;
+            letter-spacing: 0.03em;
+        }
+
+        .action-list .action-item {
+            display: flex;
+            align-items: center;
+            padding: 0.6rem 0.75rem;
+            border-bottom: 1px solid #f0f0f0;
+            text-decoration: none;
+            color: inherit;
+            transition: background 0.15s;
+        }
+
+        .action-list .action-item:last-child {
+            border-bottom: none;
+        }
+
+        .action-list .action-item:hover {
+            background: var(--grey-light);
+        }
+
+        .action-list .action-icon {
+            width: 32px;
+            height: 32px;
+            border-radius: 0.375rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
             font-size: 0.8rem;
+            margin-right: 0.75rem;
+            flex-shrink: 0;
         }
-        
-        /* Custom accent colors for specific elements */
-        .btn-accent {
-            background-color: var(--orange-accent);
-            border-color: var(--orange-accent);
-            color: white;
+
+        .action-list .action-text {
+            flex-grow: 1;
         }
-        
-        .btn-accent:hover {
-            background-color: var(--orange-dark);
-            border-color: var(--orange-dark);
-            color: white;
+
+        .action-list .action-title {
+            font-size: 0.8rem;
+            font-weight: 500;
         }
-        
-        .bg-accent {
-            background-color: var(--orange-accent) !important;
-            color: white;
+
+        .action-list .action-desc {
+            font-size: 0.7rem;
+            color: var(--grey-medium);
+        }
+
+        /* HTMX loading indicator */
+        .htmx-indicator {
+            display: none;
+        }
+        .htmx-request .htmx-indicator,
+        .htmx-request.htmx-indicator {
+            display: inline-block;
+        }
+
+        /* ============ RESPONSIVE ============ */
+        @media (max-width: 768px) {
+            html { font-size: 13px; }
+            .content-wrapper { padding: 0.75rem; }
+        }
+        @media (min-width: 768px) and (max-width: 1200px) {
+            html { font-size: 14px; }
         }
     </style>
-    
+
     {% block extra_css %}{% endblock %}
 </head>
 <body>
-    <!-- Navigation -->
-    <nav class="navbar navbar-expand-lg navbar-dark bg-gradient-primary fixed-top">
-        <div class="container">
-            <a class="navbar-brand" href="{% url 'stiftung:home' %}">
-                <i class="fas fa-landmark me-2"></i>van Hees-Theyssen-Vogel'sche Stiftung
-            </a>
-            
-            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
-                <span class="navbar-toggler-icon"></span>
-            </button>
-            
-            <div class="collapse navbar-collapse" id="navbarNav">
-                <ul class="navbar-nav me-auto">
-                    <li class="nav-item">
-                        <a class="nav-link" href="{% url 'stiftung:home' %}">
-                            <i class="fas fa-home me-1"></i>Home
-                        </a>
-                    </li>
-                    
-                    <!-- Destinatäre -->
-                    <li class="nav-item dropdown">
-                        <a class="nav-link dropdown-toggle" href="#" id="personenDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                            <i class="fas fa-users me-1"></i>Destinatäre
-                        </a>
-                        <ul class="dropdown-menu" aria-labelledby="personenDropdown">
-                            <li><h6 class="dropdown-header">Destinatäre</h6></li>
-                            <li><a class="dropdown-item" href="{% url 'stiftung:destinataer_list' %}">
-                                <i class="fas fa-list me-2"></i>Alle Destinatäre
-                            </a></li>
-                            <li><a class="dropdown-item" href="{% url 'stiftung:destinataer_create' %}">
-                                <i class="fas fa-plus me-2"></i>Neuer Destinatär
-                            </a></li>
-                            <li><hr class="dropdown-divider"></li>
-                            <li><h6 class="dropdown-header">Förderungen</h6></li>
-                            <li><a class="dropdown-item" href="{% url 'stiftung:foerderung_list' %}">
-                                <i class="fas fa-gift me-2"></i>Alle Förderungen
-                            </a></li>
-                            <li><a class="dropdown-item" href="{% url 'stiftung:foerderung_create' %}">
-                                <i class="fas fa-plus me-2"></i>Neue Förderung
-                            </a></li>
-                            <li><hr class="dropdown-divider"></li>
-                            <li><h6 class="dropdown-header">Unterstützungen</h6></li>
-                            <li><a class="dropdown-item" href="{% url 'stiftung:unterstuetzungen_all' %}">
-                                <i class="fas fa-hand-holding-usd me-2"></i>Alle Unterstützungen
-                            </a></li>
-                            <li><a class="dropdown-item" href="{% url 'stiftung:unterstuetzung_create' %}">
-                                <i class="fas fa-plus me-2"></i>Neue Unterstützung
-                            </a></li>
-                        </ul>
-                    </li>
-                    
-                    <!-- Land & Pacht -->
-                    <li class="nav-item dropdown">
-                        <a class="nav-link dropdown-toggle" href="#" id="immobilienDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                            <i class="fas fa-tree me-1"></i>Land & Pacht
-                        </a>
-                        <ul class="dropdown-menu" aria-labelledby="immobilienDropdown">
-                            <li><h6 class="dropdown-header">Ländereien</h6></li>
-                            <li><a class="dropdown-item" href="{% url 'stiftung:land_list' %}">
-                                <i class="fas fa-list me-2"></i>Alle Ländereien
-                            </a></li>
-                            <li><a class="dropdown-item" href="{% url 'stiftung:land_create' %}">
-                                <i class="fas fa-plus me-2"></i>Neue Länderei
-                            </a></li>
-                            <li><hr class="dropdown-divider"></li>
-                            <li><h6 class="dropdown-header">Verpachtungen</h6></li>
-                            <li><a class="dropdown-item" href="{% url 'stiftung:verpachtung_list' %}">
-                                <i class="fas fa-handshake me-2"></i>Alle Verpachtungen
-                            </a></li>
-                            <li><a class="dropdown-item" href="{% url 'stiftung:verpachtung_create' %}">
-                                <i class="fas fa-plus me-2"></i>Neue Verpachtung
-                            </a></li>
-                            <li><hr class="dropdown-divider"></li>
-                            <li><h6 class="dropdown-header">Abrechnungen</h6></li>
-                            <li><a class="dropdown-item" href="{% url 'stiftung:land_abrechnung_list' %}">
-                                <i class="fas fa-calculator me-2"></i>Alle Abrechnungen
-                            </a></li>
-                            <li><a class="dropdown-item" href="{% url 'stiftung:land_abrechnung_create' %}">
-                                <i class="fas fa-plus me-2"></i>Neue Abrechnung
-                            </a></li>
-                            <li><hr class="dropdown-divider"></li>
-                            <li><h6 class="dropdown-header">Pächter</h6></li>
-                            <li><a class="dropdown-item" href="{% url 'stiftung:paechter_list' %}">
-                                <i class="fas fa-user-tie me-2"></i>Alle Pächter
-                            </a></li>
-                        </ul>
-                    </li>
-                    
-                    <!-- Verwaltung & Dokumente -->
-                    <li class="nav-item dropdown">
-                        <a class="nav-link dropdown-toggle" href="#" id="verwaltungDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                            <i class="fas fa-briefcase me-1"></i>Verwaltung
-                        </a>
-                        <ul class="dropdown-menu" aria-labelledby="verwaltungDropdown">
-                            <li><a class="dropdown-item" href="{% url 'stiftung:dokument_management' %}">
-                                <i class="fas fa-folder-open me-2"></i>Dokumente
-                            </a></li>
-                            <li><a class="dropdown-item" href="{% url 'stiftung:geschaeftsfuehrung' %}">
-                                <i class="fas fa-briefcase me-2"></i>Geschäftsführung
-                            </a></li>
-                            <li><hr class="dropdown-divider"></li>
-                            <li><a class="dropdown-item" href="{% url 'stiftung:administration' %}">
-                                <i class="fas fa-cogs me-2"></i>Administration
-                            </a></li>
-                        </ul>
-                    </li>
-                    
-                    <!-- Kalender -->
-                    <li class="nav-item dropdown">
-                        <a class="nav-link dropdown-toggle" href="#" id="kalenderDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                            <i class="fas fa-calendar-alt me-1"></i>Kalender
-                        </a>
-                        <ul class="dropdown-menu" aria-labelledby="kalenderDropdown">
-                            <li><h6 class="dropdown-header">Ansichten</h6></li>
-                            <li><a class="dropdown-item" href="{% url 'stiftung:kalender' %}">
-                                <i class="fas fa-calendar me-2"></i>Kalender anzeigen
-                            </a></li>
-                            <li><hr class="dropdown-divider"></li>
-                            <li><h6 class="dropdown-header">Verwaltung</h6></li>
-                            <li><a class="dropdown-item" href="{% url 'stiftung:kalender_admin' %}">
-                                <i class="fas fa-cogs me-2"></i>Kalender Administration
-                            </a></li>
-                            <li><a class="dropdown-item" href="{% url 'stiftung:kalender_create' %}">
-                                <i class="fas fa-plus me-2"></i>Neuer Termin
-                            </a></li>
-                        </ul>
-                    </li>
-                    
-                    <!-- Veranstaltungen -->
-                    <li class="nav-item dropdown">
-                        <a class="nav-link dropdown-toggle" href="#" id="veranstaltungenDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                            <i class="fas fa-glass-cheers me-1"></i>Veranstaltungen
-                        </a>
-                        <ul class="dropdown-menu" aria-labelledby="veranstaltungenDropdown">
-                            <li><a class="dropdown-item" href="{% url 'stiftung:veranstaltung_list' %}">
-                                <i class="fas fa-list me-2"></i>Alle Veranstaltungen
-                            </a></li>
-                            <li><hr class="dropdown-divider"></li>
-                            <li><h6 class="dropdown-header">Aktionen</h6></li>
-                            <li><a class="dropdown-item" href="{% url 'stiftung:veranstaltung_list' %}">
-                                <i class="fas fa-envelope-open-text me-2"></i>Serienbrief drucken
-                            </a></li>
-                        </ul>
-                    </li>
+    <!-- Sidebar Overlay (mobile) -->
+    <div class="sidebar-overlay" onclick="document.body.classList.remove('sidebar-open')"></div>
 
-                    <!-- Geschichte -->
-                    <li class="nav-item">
-                        <a class="nav-link" href="{% url 'stiftung:geschichte_list' %}">
-                            <i class="fas fa-book-open me-1"></i>Geschichte
-                        </a>
-                    </li>
-                        
-                        <!-- User Menu -->
-                        {% if user.is_authenticated %}
-                            <li class="nav-item dropdown">
-                                <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                                    <i class="fas fa-user me-1"></i>{{ user.username }}
-                                    {% if user.is_staff %}
-                                    <span class="badge bg-warning ms-1">Staff</span>
-                                    {% endif %}
-                                    {% if user.is_superuser %}
-                                    <span class="badge bg-danger ms-1">Admin</span>
-                                    {% endif %}
-                                </a>
-                                <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userDropdown">
-                                    <li><h6 class="dropdown-header">{{ user.get_full_name|default:user.username }}</h6></li>
-                                    <li><hr class="dropdown-divider"></li>
-                                    <li><a class="dropdown-item" href="{% url 'stiftung:user_detail' user.pk %}">
-                                        <i class="fas fa-user me-2"></i>Mein Profil
-                                    </a></li>
-                                    <li><hr class="dropdown-divider"></li>
-                                    <li><h6 class="dropdown-header">Sicherheit</h6></li>
-                                    <li><a class="dropdown-item" href="{% url 'stiftung:two_factor_setup' %}">
-                                        <i class="fas fa-shield-alt me-2"></i>2FA verwalten
-                                    </a></li>
-                                    <li><hr class="dropdown-divider"></li>
-                                    {% if perms.stiftung.manage_users %}
-                                    <li><a class="dropdown-item" href="{% url 'stiftung:user_management' %}">
-                                        <i class="fas fa-users me-2"></i>Benutzerverwaltung
-                                    </a></li>
-                                    {% endif %}
-                                    {% if perms.stiftung.access_administration %}
-                                    <li><a class="dropdown-item" href="{% url 'stiftung:administration' %}">
-                                        <i class="fas fa-cogs me-2"></i>Administration
-                                    </a></li>
-                                    {% endif %}
-                                    <li><hr class="dropdown-divider"></li>
-                                    <li><a class="dropdown-item" href="{% url 'stiftung:logout' %}">
-                                        <i class="fas fa-sign-out-alt me-2"></i>Abmelden
-                                    </a></li>
-                                </ul>
-                            </li>
-                        {% else %}
-                            <li class="nav-item">
-                                <a class="nav-link" href="{% url 'stiftung:login' %}">
-                                    <i class="fas fa-sign-in-alt me-1"></i>Anmelden
-                                </a>
-                            </li>
-                        {% endif %}
-                </ul>
-            </div>
+    <!-- Sidebar Navigation -->
+    <nav class="sidebar" id="sidebar">
+        <a class="sidebar-brand" href="{% url 'stiftung:home' %}">
+            <i class="fas fa-landmark"></i>
+            <span>vHTV Stiftung</span>
+        </a>
+
+        <!-- Dashboard -->
+        <div class="sidebar-section">
+            <a class="sidebar-link {% if request.resolver_match.url_name == 'home' %}active{% endif %}" href="{% url 'stiftung:home' %}">
+                <i class="fas fa-tachometer-alt"></i>
+                <span>Dashboard</span>
+            </a>
+        </div>
+
+        <!-- Personen -->
+        <div class="sidebar-section">
+            <div class="sidebar-heading">Personen</div>
+            <a class="sidebar-link" href="{% url 'stiftung:destinataer_list' %}">
+                <i class="fas fa-users"></i>
+                <span>Destinataere</span>
+            </a>
+            <a class="sidebar-link" href="{% url 'stiftung:foerderung_list' %}">
+                <i class="fas fa-gift"></i>
+                <span>Foerderungen</span>
+            </a>
+            <a class="sidebar-link" href="{% url 'stiftung:paechter_list' %}">
+                <i class="fas fa-user-tie"></i>
+                <span>Paechter</span>
+            </a>
+        </div>
+
+        <!-- Land -->
+        <div class="sidebar-section">
+            <div class="sidebar-heading">Land & Pacht</div>
+            <a class="sidebar-link" href="{% url 'stiftung:land_list' %}">
+                <i class="fas fa-map"></i>
+                <span>Laendereien</span>
+            </a>
+            <a class="sidebar-link" href="{% url 'stiftung:verpachtung_list' %}">
+                <i class="fas fa-handshake"></i>
+                <span>Verpachtungen</span>
+            </a>
+            <a class="sidebar-link" href="{% url 'stiftung:land_abrechnung_list' %}">
+                <i class="fas fa-calculator"></i>
+                <span>Abrechnungen</span>
+            </a>
+        </div>
+
+        <!-- Finanzen -->
+        <div class="sidebar-section">
+            <div class="sidebar-heading">Finanzen</div>
+            <a class="sidebar-link" href="{% url 'stiftung:unterstuetzungen_all' %}">
+                <i class="fas fa-hand-holding-usd"></i>
+                <span>Unterstuetzungen</span>
+            </a>
+            <a class="sidebar-link" href="{% url 'stiftung:geschaeftsfuehrung' %}">
+                <i class="fas fa-briefcase"></i>
+                <span>Geschaeftsfuehrung</span>
+            </a>
+            <a class="sidebar-link" href="{% url 'stiftung:bericht_list' %}">
+                <i class="fas fa-chart-bar"></i>
+                <span>Berichte</span>
+            </a>
+        </div>
+
+        <!-- Dokumente -->
+        <div class="sidebar-section">
+            <div class="sidebar-heading">Dokumente</div>
+            <a class="sidebar-link" href="{% url 'stiftung:dokument_management' %}">
+                <i class="fas fa-folder-open"></i>
+                <span>Dokumentenverwaltung</span>
+            </a>
+            <a class="sidebar-link" href="{% url 'stiftung:dokument_list' %}">
+                <i class="fas fa-database"></i>
+                <span>Archiv</span>
+            </a>
+        </div>
+
+        <!-- System -->
+        <div class="sidebar-section">
+            <div class="sidebar-heading">System</div>
+            <a class="sidebar-link" href="{% url 'stiftung:kalender' %}">
+                <i class="fas fa-calendar-alt"></i>
+                <span>Kalender</span>
+            </a>
+            <a class="sidebar-link" href="{% url 'stiftung:veranstaltung_list' %}">
+                <i class="fas fa-glass-cheers"></i>
+                <span>Veranstaltungen</span>
+            </a>
+            <a class="sidebar-link" href="{% url 'stiftung:geschichte_list' %}">
+                <i class="fas fa-book-open"></i>
+                <span>Geschichte</span>
+            </a>
+            {% if perms.stiftung.access_administration %}
+            <a class="sidebar-link" href="{% url 'stiftung:administration' %}">
+                <i class="fas fa-cogs"></i>
+                <span>Administration</span>
+            </a>
+            {% endif %}
         </div>
     </nav>
 
-        <!-- Content Wrapper -->
-        <div id="content-wrapper" class="d-flex flex-column">
-            <!-- Main Content -->
-            <div id="content" style="padding-top: 60px;">
-                <!-- Messages -->
-                {% if messages %}
-                    <div class="container-lg mx-auto mt-2" style="max-width: 1400px;">
-                        {% for message in messages %}
-                            <div class="alert alert-{% if message.tags == 'error' %}danger{% else %}{{ message.tags }}{% endif %} alert-dismissible fade show" role="alert" style="padding: 0.5rem 0.75rem; font-size: 0.8rem;">
-                                {{ message }}
-                                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-                            </div>
-                        {% endfor %}
-                    </div>
-                {% endif %}
+    <!-- Top Bar -->
+    <header class="topbar">
+        <button class="topbar-toggle" onclick="toggleSidebar()" title="Sidebar umschalten">
+            <i class="fas fa-bars"></i>
+        </button>
 
-                <!-- Page Content -->
-                <div class="container-lg mx-auto" style="max-width: 1400px; padding: 15px;">
-                    {% block content %}
-                    {% endblock %}
-                </div>
-            </div>
-
-            <!-- Footer -->
-            <footer class="sticky-footer bg-white">
-                <div class="container-lg mx-auto my-auto" style="max-width: 1200px;">
-                    <div class="copyright text-center my-auto">
-                        <span>&copy; 2025 van Hees-Theyssen-Vogel'sche Stiftung. Alle Rechte vorbehalten.</span>
-                        <br>
-                        <small class="text-muted">
-                            <i class="fas fa-leaf text-success"></i> v3.0.0 - Calendar Integration & Payment System • Okt 2025 
-                            <span class="badge badge-success ml-2">✨ Major Release</span>
-                        </small>
-                    </div>
-                </div>
-            </footer>
+        <div class="topbar-breadcrumb">
+            {% block breadcrumb %}
+            <a href="{% url 'stiftung:home' %}">Stiftungsverwaltung</a>
+            {% endblock %}
         </div>
 
-    <!-- Import Modal -->
-    <div class="modal fade" id="importModal" tabindex="-1" aria-labelledby="importModalLabel" aria-hidden="true">
-        <div class="modal-dialog">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h5 class="modal-title" id="importModalLabel">Import Status</h5>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-                </div>
-                <div class="modal-body">
-                    <div id="importProgress" class="progress mb-3" style="display: none;">
-                        <div class="progress-bar" role="progressbar" style="width: 0%"></div>
-                    </div>
-                    <div id="importMessage"></div>
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Schließen</button>
-                </div>
+        <div class="topbar-actions">
+            {% if user.is_authenticated %}
+            <div class="dropdown">
+                <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
+                    <i class="fas fa-user me-1"></i>{{ user.username }}
+                    {% if user.is_superuser %}<span class="badge bg-danger ms-1">Admin</span>{% endif %}
+                </button>
+                <ul class="dropdown-menu dropdown-menu-end">
+                    <li><a class="dropdown-item" href="{% url 'stiftung:user_detail' user.pk %}"><i class="fas fa-user me-2"></i>Mein Profil</a></li>
+                    <li><a class="dropdown-item" href="{% url 'stiftung:two_factor_setup' %}"><i class="fas fa-shield-alt me-2"></i>2FA verwalten</a></li>
+                    {% if perms.stiftung.manage_users %}
+                    <li><hr class="dropdown-divider"></li>
+                    <li><a class="dropdown-item" href="{% url 'stiftung:user_management' %}"><i class="fas fa-users-cog me-2"></i>Benutzerverwaltung</a></li>
+                    {% endif %}
+                    <li><hr class="dropdown-divider"></li>
+                    <li><a class="dropdown-item" href="{% url 'stiftung:logout' %}"><i class="fas fa-sign-out-alt me-2"></i>Abmelden</a></li>
+                </ul>
             </div>
+            {% endif %}
         </div>
-    </div>
+    </header>
 
-    <!-- Bootstrap core JavaScript-->
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
+    <!-- Main Content -->
+    <main class="main-content">
+        <!-- Messages -->
+        {% if messages %}
+        <div class="content-wrapper" style="padding-bottom: 0;">
+            {% for message in messages %}
+            <div class="alert alert-{% if message.tags == 'error' %}danger{% else %}{{ message.tags }}{% endif %} alert-dismissible fade show" role="alert">
+                {{ message }}
+                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+            </div>
+            {% endfor %}
+        </div>
+        {% endif %}
 
-    <!-- Additional JavaScript -->
-    {% block javascript %}
-    {% endblock %}
+        <!-- Page Content -->
+        <div class="content-wrapper">
+            {% block content %}{% endblock %}
+        </div>
 
+        <!-- Footer -->
+        <footer class="main-footer">
+            &copy; 2026 van Hees-Theyssen-Vogel'sche Stiftung &middot;
+            <small>Vision 2026 &middot; v4.0.0</small>
+        </footer>
+    </main>
+
+    <!-- Bootstrap JS -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    <!-- HTMX -->
+    <script src="https://unpkg.com/htmx.org@2.0.4" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" crossorigin="anonymous"></script>
+    <!-- Alpine.js -->
+    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.8/dist/cdn.min.js"></script>
+
+    <script>
+        // HTMX CSRF token setup
+        document.body.addEventListener('htmx:configRequest', function(evt) {
+            const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]')?.value
+                || '{{ csrf_token }}';
+            evt.detail.headers['X-CSRFToken'] = csrfToken;
+        });
+
+        // Sidebar toggle
+        function toggleSidebar() {
+            if (window.innerWidth < 992) {
+                document.body.classList.toggle('sidebar-open');
+            } else {
+                document.body.classList.toggle('sidebar-collapsed');
+                localStorage.setItem('sidebar-collapsed', document.body.classList.contains('sidebar-collapsed'));
+            }
+        }
+
+        // Restore sidebar state
+        if (localStorage.getItem('sidebar-collapsed') === 'true' && window.innerWidth >= 992) {
+            document.body.classList.add('sidebar-collapsed');
+        }
+    </script>
+
+    {% block javascript %}{% endblock %}
 </body>
-</html> 
\ No newline at end of file
+</html>
\ No newline at end of file
diff --git a/app/templates/stiftung/home.html b/app/templates/stiftung/home.html
index ec3a9a1..5605ca1 100644
--- a/app/templates/stiftung/home.html
+++ b/app/templates/stiftung/home.html
@@ -1,455 +1,301 @@
 {% extends "base.html" %}
 
-{% block title %}{{ title }} - Foundation Management System{% endblock %}
+{% block title %}Dashboard - Stiftungsverwaltung{% endblock %}
 
 {% block content %}
+<!-- KPI Cards Row -->
+<div class="row g-3 mb-4">
+    <div class="col-xl-3 col-md-6">
+        <div class="card stat-card border-left-primary">
+            <div class="card-body d-flex align-items-center">
+                <div class="stat-icon me-3" style="background: var(--racing-green);">
+                    <i class="fas fa-users"></i>
+                </div>
+                <div>
+                    <div class="stat-value">{{ destinataer_count }}</div>
+                    <div class="stat-label">Destinataere</div>
+                </div>
+                <a href="{% url 'stiftung:destinataer_list' %}" class="stretched-link"></a>
+            </div>
+        </div>
+    </div>
+    <div class="col-xl-3 col-md-6">
+        <div class="card stat-card border-left-success">
+            <div class="card-body d-flex align-items-center">
+                <div class="stat-icon me-3" style="background: var(--racing-green-light);">
+                    <i class="fas fa-gift"></i>
+                </div>
+                <div>
+                    <div class="stat-value">{{ foerderung_active }}</div>
+                    <div class="stat-label">Aktive Foerderungen</div>
+                </div>
+                <a href="{% url 'stiftung:foerderung_list' %}" class="stretched-link"></a>
+            </div>
+        </div>
+    </div>
+    <div class="col-xl-3 col-md-6">
+        <div class="card stat-card border-left-warning">
+            <div class="card-body d-flex align-items-center">
+                <div class="stat-icon me-3" style="background: var(--orange-accent);">
+                    <i class="fas fa-euro-sign"></i>
+                </div>
+                <div>
+                    <div class="stat-value">{{ pending_payment_total|floatformat:0 }}</div>
+                    <div class="stat-label">Offene Zahlungen &euro;</div>
+                </div>
+                <a href="{% url 'stiftung:unterstuetzungen_all' %}" class="stretched-link"></a>
+            </div>
+        </div>
+    </div>
+    <div class="col-xl-3 col-md-6">
+        <div class="card stat-card border-left-info">
+            <div class="card-body d-flex align-items-center">
+                <div class="stat-icon me-3" style="background: var(--grey-medium);">
+                    <i class="fas fa-map"></i>
+                </div>
+                <div>
+                    <div class="stat-value">{{ land_count }}</div>
+                    <div class="stat-label">Laendereien</div>
+                </div>
+                <a href="{% url 'stiftung:land_list' %}" class="stretched-link"></a>
+            </div>
+        </div>
+    </div>
+</div>
 
-    <div class="row">
-        <div class="col-12">
-            <div class="card shadow">
-                <div class="card-body text-center py-5">
-                    <!-- Logo Placeholder -->
-                    <div class="mb-4">
-                        <div class="logo-placeholder mx-auto mb-3" style="width: 150px; height: 150px; border: 3px dashed #dee2e6; border-radius: 50%; display: flex; align-items: center; justify-content: center; background-color: #f8f9fa;">
-                            <div class="text-center text-muted">
-                                <i class="fas fa-image fa-2x mb-2"></i>
-                                <div style="font-size: 0.8rem;">Logo hier<br>einfügen</div>
-                            </div>
+<!-- Main Action Row -->
+<div class="row g-3">
+    <!-- Left Column: Action Items -->
+    <div class="col-lg-8">
+
+        {% if overdue_events %}
+        <!-- Overdue Events Alert -->
+        <div class="card border-left-danger mb-3">
+            <div class="card-header bg-danger text-white">
+                <i class="fas fa-exclamation-triangle me-2"></i>Ueberfaellige Termine ({{ overdue_events|length }})
+            </div>
+            <div class="card-body p-0">
+                <div class="action-list">
+                    {% for event in overdue_events %}
+                    <div class="action-item">
+                        <div class="action-icon bg-danger text-white">
+                            <i class="{{ event.icon }}"></i>
                         </div>
-                        <!-- Alternative: Replace above div with actual logo when available -->
-                        <!-- <img src="{% load static %}{% static 'images/stiftung-logo.png' %}" alt="Stiftung Logo" class="img-fluid mb-3" style="max-height: 150px;"> -->
-                    </div>
-                    
-                    <h1 class="display-4 mb-4">
-                        <i class="fas fa-landmark text-primary me-3"></i>van Hees-Theyssen-Vogel'sche Stiftung
-                    </h1>
-                    <p class="lead text-muted mb-5">Stiftungsverwaltung - Modern Foundation Management System</p>
-                    <div class="row justify-content-center mb-4">
-                        <div class="col-md-8">
-                            <div class="card border-0 bg-light">
-                                <div class="card-body text-center py-3">
-                                    <p class="mb-1"><i class="fas fa-map-marker-alt text-primary me-2"></i>Raesfelder Str. 3, 46499 Hamminkeln</p>
-                                    <p class="mb-0"><i class="fas fa-phone text-primary me-2"></i>+49 (0) 2852 12345</p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    
-                    <div class="row g-4 mb-5">
-                        <div class="col-md-4">
-                            <div class="card h-100 border-0 shadow-sm">
-                                <div class="card-body text-center p-4">
-                                    <i class="fas fa-users fa-3x text-primary mb-3"></i>
-                                    <h5 class="card-title">👥 Destinatäre</h5>
-                                    <p class="card-text">Verwalten Sie Stiftungsmitglieder, Familienzweige und Kontaktdaten zentral und übersichtlich.</p>
-                                    <a href="{% url 'stiftung:destinataer_list' %}" class="btn btn-outline-primary btn-sm mt-2">
-                                        <i class="fas fa-external-link-alt me-1"></i>Öffnen
-                                    </a>
-                                </div>
-                            </div>
-                        </div>
-                        
-                        <div class="col-md-4">
-                            <div class="card h-100 border-0 shadow-sm">
-                                <div class="card-body text-center p-4">
-                                    <i class="fas fa-hand-holding-usd fa-3x text-success mb-3"></i>
-                                    <h5 class="card-title">💰 Unterstützungsverwaltung</h5>
-                                    <p class="card-text">Erfassen und verfolgen Sie Unterstützungen, Beträge und Verwendungsnachweise systematisch.</p>
-                                    <a href="{% url 'stiftung:unterstuetzungen_all' %}" class="btn btn-outline-success btn-sm mt-2">
-                                        <i class="fas fa-external-link-alt me-1"></i>Öffnen
-                                    </a>
-                                </div>
-                            </div>
-                        </div>
-                        
-                        <div class="col-md-4">
-                            <div class="card h-100 border-0 shadow-sm">
-                                <div class="card-body text-center p-4">
-                                    <i class="fas fa-file-alt fa-3x text-info mb-3"></i>
-                                    <h5 class="card-title">📄 Dokumentenverwaltung</h5>
-                                    <p class="card-text">Stiftungsdokumente und Verträge</p>
-                                    <a href="{% url 'stiftung:dokument_management' %}" class="btn btn-outline-info btn-sm mt-2">
-                                        <i class="fas fa-external-link-alt me-1"></i>Öffnen
-                                    </a>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    
-                    <!-- Calendar and Events Section -->
-                    <div class="row g-4 mb-5">
-                        <div class="col-lg-8">
-                            <div class="card h-100 border-0 shadow-sm">
-                                <div class="card-header bg-primary text-white">
-                                    <h5 class="mb-0">
-                                        <i class="fas fa-calendar-alt me-2"></i>Anstehende Termine & Ereignisse
-                                    </h5>
-                                </div>
-                                <div class="card-body">
-                                    {% if overdue_events %}
-                                    <div class="alert alert-danger" role="alert">
-                                        <h6><i class="fas fa-exclamation-triangle me-2"></i>Überfällige Termine ({{ overdue_events|length }})</h6>
-                                        {% for event in overdue_events %}
-                                        <div class="d-flex justify-content-between align-items-center border-bottom py-2">
-                                            <div>
-                                                <i class="{{ event.icon }} me-2"></i>
-                                                <strong>{{ event.title }}</strong>
-                                                <small class="text-muted d-block">{{ event.description }}</small>
-                                            </div>
-                                            <span class="badge bg-danger">{{ event.date }}</span>
-                                        </div>
-                                        {% endfor %}
-                                    </div>
-                                    {% endif %}
-                                    
-                                    {% if upcoming_events %}
-                                    <h6 class="text-muted mb-3">Nächste {{ upcoming_events|length }} Termine</h6>
-                                    {% for event in upcoming_events %}
-                                    <div class="d-flex justify-content-between align-items-center border-bottom py-2">
-                                        <div class="flex-grow-1">
-                                            <i class="{{ event.icon }} me-2 text-{{ event.color }}"></i>
-                                            <strong>{{ event.title }}</strong>
-                                            {% if event.description %}
-                                            <small class="text-muted d-block">{{ event.description }}</small>
-                                            {% endif %}
-                                        </div>
-                                        <div class="text-end">
-                                            <span class="badge bg-{{ event.color }}">{{ event.date }}</span>
-                                            {% if event.time %}
-                                            <small class="d-block text-muted">{{ event.time }}</small>
-                                            {% endif %}
-                                        </div>
-                                    </div>
-                                    {% empty %}
-                                    <div class="text-center py-4 text-muted">
-                                        <i class="fas fa-calendar-check fa-3x mb-3"></i>
-                                        <p>Keine anstehenden Termine in den nächsten 14 Tagen.</p>
-                                    </div>
-                                    {% endfor %}
-                                    
-                                    <div class="text-center mt-3">
-                                        <a href="{% url 'stiftung:kalender' %}" class="btn btn-outline-primary btn-sm">
-                                            <i class="fas fa-calendar me-1"></i>Vollständigen Kalender anzeigen
-                                        </a>
-                                    </div>
-                                    {% endif %}
-                                </div>
-                            </div>
-                        </div>
-                        
-                        <div class="col-lg-4">
-                            <!-- Mini Calendar -->
-                            <div class="card border-0 shadow-sm mb-3">
-                                <div class="card-header bg-info text-white">
-                                    <h6 class="mb-0">
-                                        <i class="fas fa-calendar me-2"></i>{{ today|date:"F Y" }}
-                                    </h6>
-                                </div>
-                                <div class="card-body p-2">
-                                    <div class="mini-calendar">
-                                        <!-- Calendar will be generated by JavaScript -->
-                                        <div id="mini-calendar" data-events="{{ current_month_events|length }}">
-                                            <!-- Mini calendar grid will be inserted here -->
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                            
-                            <!-- Quick Actions -->
-                            <div class="card border-0 shadow-sm">
-                                <div class="card-header bg-success text-white">
-                                    <h6 class="mb-0">
-                                        <i class="fas fa-plus me-2"></i>Schnellzugriff
-                                    </h6>
-                                </div>
-                                <div class="card-body">
-                                    <div class="d-grid gap-2">
-                                        <a href="{% url 'stiftung:kalender_create' %}" class="btn btn-outline-primary btn-sm">
-                                            <i class="fas fa-calendar-plus me-1"></i>Termin hinzufügen
-                                        </a>
-                                        <a href="{% url 'stiftung:unterstuetzung_create' %}" class="btn btn-outline-success btn-sm">
-                                            <i class="fas fa-euro-sign me-1"></i>Zahlung planen
-                                        </a>
-                                        <a href="{% url 'stiftung:destinataer_create' %}" class="btn btn-outline-info btn-sm">
-                                            <i class="fas fa-user-plus me-1"></i>Destinatär anlegen
-                                        </a>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    
-                    <div class="row g-4 mb-5">
-                        <div class="col-md-4">
-                            <div class="card h-100 border-0 shadow-sm">
-                                <div class="card-body text-center p-4">
-                                    <i class="fas fa-chart-bar fa-3x text-warning mb-3"></i>
-                                    <h5 class="card-title">📊 Berichte & Auswertungen</h5>
-                                    <p class="card-text">Generieren Sie detaillierte Berichte und Auswertungen für Ihre Stiftungsarbeit.</p>
-                                    <a href="{% url 'stiftung:bericht_list' %}" class="btn btn-outline-warning btn-sm mt-2">
-                                        <i class="fas fa-external-link-alt me-1"></i>Öffnen
-                                    </a>
-                                </div>
-                            </div>
-                        </div>
-                        
-                        <div class="col-md-4">
-                            <div class="card h-100 border-0 shadow-sm">
-                                <div class="card-body text-center p-4">
-                                    <i class="fas fa-map fa-3x text-danger mb-3"></i>
-                                    <h5 class="card-title">🗺️ Ländereiverwaltung</h5>
-                                    <p class="card-text">Verwalten Sie Grundstücke, Flächen und Verpachtungen professionell.</p>
-                                    <a href="{% url 'stiftung:land_list' %}" class="btn btn-outline-danger btn-sm mt-2">
-                                        <i class="fas fa-external-link-alt me-1"></i>Öffnen
-                                    </a>
-                                </div>
-                            </div>
-                        </div>
-                        
-                        <div class="col-md-4">
-                            <div class="card h-100 border-0 shadow-sm">
-                                <div class="card-body text-center p-4">
-                                    <i class="fas fa-handshake fa-3x text-secondary mb-3"></i>
-                                    <h5 class="card-title">🤝 Verpachtungsverwaltung</h5>
-                                    <p class="card-text">Organisieren Sie Pachtverträge und deren Verwaltung effizient.</p>
-                                    <a href="{% url 'stiftung:verpachtung_list' %}" class="btn btn-outline-secondary btn-sm mt-2">
-                                        <i class="fas fa-external-link-alt me-1"></i>Öffnen
-                                    </a>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    
-                    <div class="row g-4 mb-5">
-                        <div class="col-md-6">
-                            <div class="card h-100 border-0 shadow-sm">
-                                <div class="card-body text-center p-4">
-                                    <i class="fas fa-link fa-3x text-purple mb-3"></i>
-                                    <h5 class="card-title">🔗 Dokumentenverknüpfung</h5>
-                                    <p class="card-text">Verknüpfen Sie Paperless-Dokumente direkt mit Destinatären, Ländereien und Verpachtungen.</p>
-                                    <a href="{% url 'stiftung:dokument_management' %}" class="btn btn-outline-purple btn-sm mt-2">
-                                        <i class="fas fa-external-link-alt me-1"></i>Öffnen
-                                    </a>
-                                </div>
-                            </div>
-                        </div>
-                        
-                        <div class="col-md-6">
-                            <div class="card h-100 border-0 shadow-sm">
-                                <div class="card-body text-center p-4">
-                                    <i class="fas fa-database fa-3x text-dark mb-3"></i>
-                                    <h5 class="card-title">🗃️ Dokumentenarchiv</h5>
-                                    <p class="card-text">Zentraler Zugriff auf alle verknüpften Dokumente und deren Metadaten.</p>
-                                    <a href="{% url 'stiftung:dokument_list' %}" class="btn btn-outline-dark btn-sm mt-2">
-                                        <i class="fas fa-external-link-alt me-1"></i>Öffnen
-                                    </a>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    
-                    <div class="d-flex justify-content-center gap-3 flex-wrap">
-                        <a href="{% url 'stiftung:destinataer_list' %}" class="btn btn-primary btn-lg">
-                            <i class="fas fa-users me-2"></i>Destinatäre
-                        </a>
-                        <a href="{% url 'stiftung:land_list' %}" class="btn btn-success btn-lg">
-                            <i class="fas fa-map me-2"></i>Ländereien
-                        </a>
-                        <a href="{% url 'stiftung:paechter_list' %}" class="btn btn-info btn-lg">
-                            <i class="fas fa-user-tie me-2"></i>Pächter
-                        </a>
-                        <a href="{% url 'stiftung:land_list' %}" class="btn btn-secondary btn-lg">
-                            <i class="fas fa-handshake me-2"></i>Verpachtungen
-                        </a>
-                        <a href="{% url 'stiftung:foerderung_list' %}" class="btn btn-warning btn-lg">
-                            <i class="fas fa-gift me-2"></i>Förderungen
-                        </a>
-                    </div>
-                    
-                    <div class="d-flex justify-content-center gap-3 flex-wrap mt-3">
-                        <a href="{% url 'stiftung:dokument_management' %}" class="btn btn-info btn-lg">
-                            <i class="fas fa-file-alt me-2"></i>Paperless Integration
-                        </a>
-                        <a href="{% url 'stiftung:dokument_management' %}" class="btn btn-purple btn-lg">
-                            <i class="fas fa-link me-2"></i>Dokumente verknüpfen
-                        </a>
-                        <a href="{% url 'stiftung:dokument_list' %}" class="btn btn-dark btn-lg">
-                            <i class="fas fa-database me-2"></i>Dokumentenarchiv
-                        </a>
+                        <div class="action-text">
+                            <div class="action-title">{{ event.title }}</div>
+                            <div class="action-desc">{{ event.description }}</div>
+                        </div>
+                        <span class="badge bg-danger">{{ event.date }}</span>
                     </div>
+                    {% endfor %}
                 </div>
             </div>
-            
-            <div class="text-center mt-4">
-                <div class="alert alert-success d-inline-block">
-                    <i class="fas fa-check-circle me-2"></i>
-                    <span class="fw-bold">System läuft erfolgreich</span>
-                    <br>
-                    <small class="text-muted">Entwickelt mit Django & Docker</small>
+        </div>
+        {% endif %}
+
+        {% if overdue_nachweise %}
+        <!-- Overdue Nachweise -->
+        <div class="card border-left-warning mb-3">
+            <div class="card-header">
+                <i class="fas fa-file-alt me-2 text-warning"></i>Ausstehende Nachweise Q{{ current_quarter }}/{{ current_year }}
+            </div>
+            <div class="card-body p-0">
+                <div class="action-list">
+                    {% for nachweis in overdue_nachweise %}
+                    <a class="action-item" href="{% url 'stiftung:destinataer_detail' nachweis.destinataer.pk %}">
+                        <div class="action-icon" style="background: rgba(253,126,20,0.15); color: var(--orange-accent);">
+                            <i class="fas fa-clock"></i>
+                        </div>
+                        <div class="action-text">
+                            <div class="action-title">{{ nachweis.destinataer.vorname }} {{ nachweis.destinataer.nachname }}</div>
+                            <div class="action-desc">{{ nachweis.get_status_display }}</div>
+                        </div>
+                        <span class="badge bg-warning">{{ nachweis.get_status_display }}</span>
+                    </a>
+                    {% endfor %}
+                </div>
+            </div>
+        </div>
+        {% endif %}
+
+        {% if pending_payments %}
+        <!-- Pending Payments -->
+        <div class="card border-left-primary mb-3">
+            <div class="card-header">
+                <i class="fas fa-hand-holding-usd me-2 text-primary"></i>Offene Zahlungen
+            </div>
+            <div class="card-body p-0">
+                <div class="action-list">
+                    {% for payment in pending_payments %}
+                    <a class="action-item" href="{% url 'stiftung:destinataer_detail' payment.destinataer.pk %}">
+                        <div class="action-icon" style="background: rgba(0,66,37,0.1); color: var(--racing-green);">
+                            <i class="fas fa-euro-sign"></i>
+                        </div>
+                        <div class="action-text">
+                            <div class="action-title">{{ payment.destinataer.vorname }} {{ payment.destinataer.nachname }}</div>
+                            <div class="action-desc">{{ payment.beschreibung|default:"Unterstuetzung" }} &middot; {{ payment.betrag|floatformat:2 }} &euro;</div>
+                        </div>
+                        <span class="badge bg-{% if payment.faellig_am < today %}danger{% else %}primary{% endif %}">{{ payment.faellig_am|date:"d.m.Y" }}</span>
+                    </a>
+                    {% endfor %}
+                </div>
+            </div>
+        </div>
+        {% endif %}
+
+        <!-- Upcoming Events -->
+        <div class="card mb-3">
+            <div class="card-header">
+                <i class="fas fa-calendar-alt me-2 text-primary"></i>Anstehende Termine
+                <a href="{% url 'stiftung:kalender' %}" class="float-end text-decoration-none" style="font-size: 0.75rem;">Alle anzeigen &rarr;</a>
+            </div>
+            <div class="card-body p-0">
+                <div class="action-list">
+                    {% for event in upcoming_events %}
+                    <div class="action-item">
+                        <div class="action-icon" style="background: rgba(0,66,37,0.1); color: var(--racing-green);">
+                            <i class="{{ event.icon }}"></i>
+                        </div>
+                        <div class="action-text">
+                            <div class="action-title">{{ event.title }}</div>
+                            {% if event.description %}
+                            <div class="action-desc">{{ event.description }}</div>
+                            {% endif %}
+                        </div>
+                        <span class="badge bg-{{ event.color }}">{{ event.date }}</span>
+                    </div>
+                    {% empty %}
+                    <div class="text-center py-4 text-muted">
+                        <i class="fas fa-calendar-check fa-2x mb-2 d-block"></i>
+                        Keine Termine in den naechsten 14 Tagen.
+                    </div>
+                    {% endfor %}
                 </div>
             </div>
         </div>
     </div>
 
-{% endblock %}
+    <!-- Right Column: Quick Actions & Info -->
+    <div class="col-lg-4">
 
-{% block extra_css %}
-<style>
-    .mini-calendar {
-        font-size: 0.8rem;
-    }
-    
-    .mini-calendar .calendar-day {
-        width: 32px;
-        height: 32px;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        margin: 1px;
-        border-radius: 4px;
-        cursor: pointer;
-    }
-    
-    .mini-calendar .calendar-day.today {
-        background-color: var(--bs-primary);
-        color: white;
-        font-weight: bold;
-    }
-    
-    .mini-calendar .calendar-day.has-events {
-        background-color: var(--bs-success);
-        color: white;
-    }
-    
-    .mini-calendar .calendar-day:hover {
-        background-color: var(--bs-light);
-    }
-    
-    .mini-calendar .calendar-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: 10px;
-    }
-    
-    .mini-calendar .calendar-grid {
-        display: grid;
-        grid-template-columns: repeat(7, 1fr);
-        gap: 1px;
-        text-align: center;
-    }
-    
-    .mini-calendar .calendar-weekday {
-        font-weight: bold;
-        color: var(--bs-secondary);
-        padding: 4px;
-        font-size: 0.7rem;
-    }
-</style>
-{% endblock %}
+        <!-- Quick Actions -->
+        <div class="card mb-3">
+            <div class="card-header bg-success text-white">
+                <i class="fas fa-bolt me-2"></i>Schnellzugriff
+            </div>
+            <div class="card-body">
+                <div class="d-grid gap-2">
+                    <a href="{% url 'stiftung:destinataer_create' %}" class="btn btn-outline-primary btn-sm">
+                        <i class="fas fa-user-plus me-1"></i>Neuer Destinataer
+                    </a>
+                    <a href="{% url 'stiftung:unterstuetzung_create' %}" class="btn btn-outline-primary btn-sm">
+                        <i class="fas fa-euro-sign me-1"></i>Neue Zahlung
+                    </a>
+                    <a href="{% url 'stiftung:kalender_create' %}" class="btn btn-outline-primary btn-sm">
+                        <i class="fas fa-calendar-plus me-1"></i>Neuer Termin
+                    </a>
+                    <a href="{% url 'stiftung:foerderung_create' %}" class="btn btn-outline-primary btn-sm">
+                        <i class="fas fa-gift me-1"></i>Neue Foerderung
+                    </a>
+                </div>
+            </div>
+        </div>
 
-{% block extra_js %}
-<script>
-document.addEventListener('DOMContentLoaded', function() {
-    // Generate mini calendar for current month
-    const today = new Date();
-    const currentMonth = today.getMonth();
-    const currentYear = today.getFullYear();
-    
-    function generateMiniCalendar(year, month) {
-        const firstDay = new Date(year, month, 1);
-        const lastDay = new Date(year, month + 1, 0);
-        const startDate = new Date(firstDay);
-        startDate.setDate(startDate.getDate() - firstDay.getDay()); // Start from Sunday
-        
-        const calendarEl = document.getElementById('mini-calendar');
-        
-        let html = '<div class="calendar-grid">';
-        
-        // Weekday headers
-        const weekdays = ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'];
-        weekdays.forEach(day => {
-            html += `<div class="calendar-weekday">${day}</div>`;
-        });
-        
-        // Generate calendar days
-        const currentDate = new Date(startDate);
-        for (let i = 0; i < 42; i++) { // 6 weeks
-            const isCurrentMonth = currentDate.getMonth() === month;
-            const isToday = currentDate.toDateString() === today.toDateString();
-            
-            let classes = ['calendar-day'];
-            if (isToday) classes.push('today');
-            if (!isCurrentMonth) classes.push('text-muted');
-            
-            html += `<div class="${classes.join(' ')}">${currentDate.getDate()}</div>`;
-            currentDate.setDate(currentDate.getDate() + 1);
-            
-            if (currentDate > lastDay && currentDate.getDay() === 0) {
-                break; // Stop at end of month on Sunday
-            }
-        }
-        
-        html += '</div>';
-        calendarEl.innerHTML = html;
-    }
-    
-    // Generate the current month calendar
-    generateMiniCalendar(currentYear, currentMonth);
-});
-</script>
+        {% if new_emails %}
+        <!-- New Emails -->
+        <div class="card mb-3">
+            <div class="card-header">
+                <i class="fas fa-envelope me-2 text-warning"></i>Neue E-Mails
+                <span class="badge bg-warning float-end">{{ new_email_count }}</span>
+            </div>
+            <div class="card-body p-0">
+                <div class="action-list">
+                    {% for email in new_emails %}
+                    <div class="action-item">
+                        <div class="action-icon" style="background: rgba(253,126,20,0.15); color: var(--orange-accent);">
+                            <i class="fas fa-envelope"></i>
+                        </div>
+                        <div class="action-text">
+                            <div class="action-title">{{ email.absender_name|default:email.absender_email|truncatechars:30 }}</div>
+                            <div class="action-desc">{{ email.betreff|truncatechars:40 }}</div>
+                        </div>
+                    </div>
+                    {% endfor %}
+                </div>
+            </div>
+        </div>
+        {% endif %}
 
-<style>
-/* Mini Calendar Styles */
-.mini-calendar .calendar-day {
-    width: 32px;
-    height: 32px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 0.8rem;
-    border-radius: 3px;
-    cursor: pointer;
-    transition: background-color 0.2s;
-}
+        {% if expiring_leases %}
+        <!-- Expiring Leases -->
+        <div class="card mb-3">
+            <div class="card-header">
+                <i class="fas fa-handshake me-2 text-info"></i>Auslaufende Pachtvertraege
+            </div>
+            <div class="card-body p-0">
+                <div class="action-list">
+                    {% for lease in expiring_leases %}
+                    <a class="action-item" href="{% url 'stiftung:verpachtung_detail' lease.pk %}">
+                        <div class="action-icon" style="background: rgba(108,117,125,0.15); color: var(--grey-medium);">
+                            <i class="fas fa-file-contract"></i>
+                        </div>
+                        <div class="action-text">
+                            <div class="action-title">{{ lease.paechter.vorname }} {{ lease.paechter.nachname }}</div>
+                            <div class="action-desc">{{ lease.land.bezeichnung|truncatechars:30 }}</div>
+                        </div>
+                        <span class="badge bg-info">{{ lease.pachtende|date:"d.m.Y" }}</span>
+                    </a>
+                    {% endfor %}
+                </div>
+            </div>
+        </div>
+        {% endif %}
 
-.mini-calendar .calendar-day:hover {
-    background-color: var(--bs-primary-bg-subtle);
-}
+        <!-- Stats Overview -->
+        <div class="card mb-3">
+            <div class="card-header">
+                <i class="fas fa-chart-pie me-2 text-primary"></i>Uebersicht
+            </div>
+            <div class="card-body">
+                <div class="d-flex justify-content-between mb-2">
+                    <span class="text-muted" style="font-size: 0.8rem;">Destinataere</span>
+                    <strong>{{ destinataer_count }}</strong>
+                </div>
+                <div class="d-flex justify-content-between mb-2">
+                    <span class="text-muted" style="font-size: 0.8rem;">Paechter</span>
+                    <strong>{{ paechter_count }}</strong>
+                </div>
+                <div class="d-flex justify-content-between mb-2">
+                    <span class="text-muted" style="font-size: 0.8rem;">Laendereien</span>
+                    <strong>{{ land_count }}</strong>
+                </div>
+                <div class="d-flex justify-content-between">
+                    <span class="text-muted" style="font-size: 0.8rem;">Aktive Foerderungen</span>
+                    <strong>{{ foerderung_active }}</strong>
+                </div>
+            </div>
+        </div>
 
-.mini-calendar .calendar-day.today {
-    background-color: var(--bs-primary);
-    color: white;
-    font-weight: bold;
-}
-
-.mini-calendar .calendar-header {
-    font-weight: 600;
-    color: var(--bs-secondary);
-    font-size: 0.75rem;
-}
-
-/* Calendar event indicators */
-.calendar-events-indicator {
-    position: absolute;
-    bottom: 2px;
-    right: 2px;
-    width: 6px;
-    height: 6px;
-    background-color: var(--bs-warning);
-    border-radius: 50%;
-}
-
-/* Overdue events styling */
-.alert-danger .border-bottom:last-child {
-    border-bottom: none !important;
-}
-
-/* Calendar card hover effects */
-.card.border-left-primary { border-left-color: var(--bs-primary) !important; }
-.card.border-left-success { border-left-color: var(--bs-success) !important; }
-.card.border-left-warning { border-left-color: var(--bs-warning) !important; }
-.card.border-left-danger { border-left-color: var(--bs-danger) !important; }
-.card.border-left-info { border-left-color: var(--bs-info) !important; }
-</style>
-{% endblock %} 
+        {% if recent_audit %}
+        <!-- Recent Activity -->
+        <div class="card">
+            <div class="card-header">
+                <i class="fas fa-history me-2"></i>Letzte Aktivitaeten
+            </div>
+            <div class="card-body p-0">
+                <div class="action-list">
+                    {% for entry in recent_audit %}
+                    <div class="action-item" style="padding: 0.4rem 0.75rem;">
+                        <div class="action-text">
+                            <div class="action-title">{{ entry.get_action_display }} - {{ entry.get_entity_type_display }}</div>
+                            <div class="action-desc">{{ entry.username }} &middot; {{ entry.timestamp|timesince }} her</div>
+                        </div>
+                    </div>
+                    {% endfor %}
+                </div>
+            </div>
+        </div>
+        {% endif %}
+    </div>
+</div>
+{% endblock %}
\ No newline at end of file