From 6a9229c54fb82a9bfa02b424c42c5346f5ff400b Mon Sep 17 00:00:00 2001
From: Moritz <moritz.m@local-it.org>
Date: Tue, 13 Jan 2026 23:38:04 +0100
Subject: [PATCH] chore: update docs

---
 CODE_GUIDELINES.md                     |   14 +-
 README.md                              |    3 +-
 docs/database-schema-readme.md         |    9 +-
 docs/database_schema.dbml              |   18 +-
 docs/development-progress-log.md       |   46 +-
 docs/documentation-sync-todos.md       |  316 ++++-
 docs/membership-fee-architecture.md    |   10 +
 docs/sidebar-analysis-current-state.md |  750 -----------
 docs/sidebar-requirements-v2.md        | 1252 -------------------
 docs/umsetzung-sidebar.md              | 1579 ------------------------
 lib/membership_fees/membership_fees.ex |    5 +
 lib/mv_web/live/member_live/show.ex    |    2 +-
 12 files changed, 325 insertions(+), 3679 deletions(-)
 delete mode 100644 docs/sidebar-analysis-current-state.md
 delete mode 100644 docs/sidebar-requirements-v2.md
 delete mode 100644 docs/umsetzung-sidebar.md

diff --git a/CODE_GUIDELINES.md b/CODE_GUIDELINES.md
index 636f3fb..fe2d816 100644
--- a/CODE_GUIDELINES.md
+++ b/CODE_GUIDELINES.md
@@ -107,6 +107,11 @@ lib/
 │   ├── membership/        # Domain-specific logic
 │   │   └── member/
 │   │       └── validations/
+│   ├── membership_fees/   # Membership fee business logic
+│   │   ├── cycle_generator.ex  # Cycle generation algorithm
+│   │   └── calendar_cycles.ex  # Calendar cycle calculations
+│   ├── helpers.ex         # Shared helper functions (ash_actor_opts)
+│   ├── constants.ex       # Application constants (member_fields, custom_field_prefix)
 │   ├── application.ex     # OTP application
 │   ├── mailer.ex          # Email mailer
 │   ├── release.ex         # Release tasks
@@ -127,6 +132,11 @@ lib/
 │   │   ├── error_html.ex
 │   │   ├── error_json.ex
 │   │   └── page_html/
+│   ├── helpers/           # Web layer helper modules
+│   │   ├── member_helpers.ex        # Member display utilities
+│   │   ├── membership_fee_helpers.ex # Membership fee formatting
+│   │   ├── date_formatter.ex        # Date formatting utilities
+│   │   └── field_type_formatter.ex   # Field type display formatting
 │   ├── live/              # LiveView modules
 │   │   ├── components/    # LiveView-specific components
 │   │   │   ├── search_bar_component.ex
@@ -143,7 +153,7 @@ lib/
 │   ├── auth_overrides.ex  # AshAuthentication overrides
 │   ├── endpoint.ex        # Phoenix endpoint
 │   ├── gettext.ex         # I18n configuration
-│   ├── live_helpers.ex    # LiveView helpers
+│   ├── live_helpers.ex    # LiveView lifecycle hooks and helpers
 │   ├── live_user_auth.ex  # LiveView authentication
 │   ├── router.ex          # Application router
 │   └── telemetry.ex       # Telemetry configuration
@@ -192,7 +202,7 @@ test/
 **Module Naming:**
 
 - **Modules:** Use `PascalCase` with full namespace (e.g., `Mv.Accounts.User`)
-- **Domains:** Top-level domains are `Mv.Accounts` and `Mv.Membership`
+- **Domains:** Top-level domains are `Mv.Accounts`, `Mv.Membership`, `Mv.MembershipFees`, and `Mv.Authorization`
 - **Resources:** Resource modules should be singular nouns (e.g., `Member`, not `Members`)
 - **Context functions:** Use `snake_case` and verb-first naming (e.g., `create_user`, `list_members`)
 
diff --git a/README.md b/README.md
index fbaddea..94adf08 100644
--- a/README.md
+++ b/README.md
@@ -189,8 +189,9 @@ The `OIDC_REDIRECT_URI` is auto-generated as `https://{DOMAIN}/auth/user/rauthy/
 - **Auth:** AshAuthentication (OIDC + password)
 
 **Code Structure:**
-- `lib/accounts/` & `lib/membership/` — Ash resources and domains
+- `lib/accounts/` & `lib/membership/` & `lib/membership_fees/` & `lib/mv/authorization/` — Ash resources and domains
 - `lib/mv_web/` — Phoenix controllers, LiveViews, components  
+- `lib/mv/` — Shared helpers and business logic
 - `assets/` — Tailwind, JavaScript, static files
 
 📚 **Full tech stack details:** See [`CODE_GUIDELINES.md`](CODE_GUIDELINES.md)  
diff --git a/docs/database-schema-readme.md b/docs/database-schema-readme.md
index 71f1e68..15e4e33 100644
--- a/docs/database-schema-readme.md
+++ b/docs/database-schema-readme.md
@@ -187,7 +187,6 @@ Settings (1) → MembershipFeeType (0..1)
 - `email` (B-tree) - Exact email lookups
 - `last_name` (B-tree) - Name sorting
 - `join_date` (B-tree) - Date filtering
-- `paid` (partial B-tree) - Payment status queries
 
 **custom_field_values:**
 - `member_id` - Member custom field value lookups
@@ -214,14 +213,14 @@ Settings (1) → MembershipFeeType (0..1)
 ### Weighted Fields
 - **Weight A (highest):** first_name, last_name
 - **Weight B:** email, notes
-- **Weight C:** phone_number, city, street, house_number, postal_code, custom_field_values
+- **Weight C:** city, street, house_number, postal_code, custom_field_values
 - **Weight D (lowest):** join_date, exit_date
 
 ### Custom Field Values in Search
 Custom field values are automatically included in the search vector:
 - All custom field values (string, integer, boolean, date, email) are aggregated and added to the search vector
 - Values are converted to text format for indexing
-- Custom field values receive weight 'C' (same as phone_number, city, etc.)
+- Custom field values receive weight 'C' (same as city, etc.)
 - The search vector is automatically updated when custom field values are created, updated, or deleted via database triggers
 
 ### Usage Example
@@ -377,7 +376,7 @@ priv/repo/migrations/
 
 **High Frequency:**
 - Member search (uses GIN index on search_vector)
-- Member list with filters (uses indexes on join_date, paid)
+- Member list with filters (uses indexes on join_date, membership_fee_type_id)
 - User authentication (uses unique index on email/oidc_id)
 - CustomFieldValue lookups by member (uses index on member_id)
 
@@ -396,7 +395,7 @@ priv/repo/migrations/
 1. **Use indexes:** All critical query paths have indexes
 2. **Preload relationships:** Use Ash's `load` to avoid N+1
 3. **Pagination:** Use keyset pagination (configured by default)
-4. **Partial indexes:** `members.paid` index only non-NULL values
+4. **GIN indexes:** Full-text search and fuzzy search on multiple fields
 5. **Search optimization:** Full-text search via tsvector, not LIKE
 
 ## Visualization
diff --git a/docs/database_schema.dbml b/docs/database_schema.dbml
index 9b546e3..23605bf 100644
--- a/docs/database_schema.dbml
+++ b/docs/database_schema.dbml
@@ -121,11 +121,9 @@ Table tokens {
 
 Table members {
   id uuid [pk, not null, default: `uuid_generate_v7()`, note: 'UUIDv7 primary key (sortable by creation time)']
-  first_name text [not null, note: 'Member first name (min length: 1)']
-  last_name text [not null, note: 'Member last name (min length: 1)']
+  first_name text [null, note: 'Member first name (min length: 1 if present)']
+  last_name text [null, note: 'Member last name (min length: 1 if present)']
   email text [not null, unique, note: 'Member email address (5-254 chars, validated)']
-  paid boolean [null, note: 'Payment status flag']
-  phone_number text [null, note: 'Contact phone number (format: +?[0-9\- ]{6,20})']
   join_date date [null, note: 'Date when member joined club (cannot be in future)']
   exit_date date [null, note: 'Date when member left club (must be after join_date)']
   notes text [null, note: 'Additional notes about member']
@@ -149,7 +147,6 @@ Table members {
     email [name: 'members_email_idx', note: 'B-tree index for exact lookups']
     last_name [name: 'members_last_name_idx', note: 'B-tree index for name sorting']
     join_date [name: 'members_join_date_idx', note: 'B-tree index for date filters']
-    (paid) [name: 'members_paid_idx', type: btree, note: 'Partial index WHERE paid IS NOT NULL']
     membership_fee_type_id [name: 'members_membership_fee_type_id_index', note: 'B-tree index for fee type lookups']
   }
   
@@ -158,8 +155,8 @@ Table members {
     
     Core entity for membership management containing:
     - Personal information (name, email)
-    - Contact details (phone, address)
-    - Membership status (join/exit dates, payment status)
+    - Contact details (address)
+    - Membership status (join/exit dates, membership fee cycles)
     - Additional notes
     
     **Email Synchronization:**
@@ -187,12 +184,11 @@ Table members {
     - 1:N with membership_fee_cycles - billing history
     
     **Validation Rules:**
-    - first_name, last_name: min 1 character
-    - email: 5-254 characters, valid email format
+    - first_name, last_name: optional, but if present min 1 character
+    - email: 5-254 characters, valid email format (required)
     - join_date: cannot be in future
     - exit_date: must be after join_date (if both present)
-    - phone_number: matches pattern ^\+?[0-9\- ]{6,20}$
-    - postal_code: exactly 5 digits
+    - postal_code: exactly 5 digits (if present)
   '''
 }
 
diff --git a/docs/development-progress-log.md b/docs/development-progress-log.md
index 5e5c43b..93a7d7f 100644
--- a/docs/development-progress-log.md
+++ b/docs/development-progress-log.md
@@ -68,7 +68,7 @@ mix phx.new mv --no-ecto --no-mailer
 **Key decisions:**
 - **Elixir 1.18.3 + OTP 27**: Latest stable versions for performance
 - **Ash Framework 3.0**: Declarative resource layer, reduces boilerplate
-- **Phoenix LiveView 1.1**: Real-time UI without JavaScript complexity
+- **Phoenix LiveView 1.1.0-rc.3**: Real-time UI without JavaScript complexity
 - **Tailwind CSS 4.0**: Utility-first styling with custom build
 - **PostgreSQL 17**: Advanced features (full-text search, JSONB, citext)
 - **Bandit**: Modern HTTP server, better than Cowboy for LiveView
@@ -80,14 +80,15 @@ mix phx.new mv --no-ecto --no-mailer
 **Versions pinned in `.tool-versions`:**
 - Elixir 1.18.3-otp-27
 - Erlang 27.3.4  
-- Just 1.43.0
+- Just 1.46.0
 
 #### 4. Database Setup
 
 **PostgreSQL Extensions:**
 ```sql
-CREATE EXTENSION IF NOT EXISTS "uuid-ossp";  -- UUID generation
+CREATE EXTENSION IF NOT EXISTS "uuid-ossp";  -- UUID generation (via uuid_generate_v7 function)
 CREATE EXTENSION IF NOT EXISTS "citext";      -- Case-insensitive text
+CREATE EXTENSION IF NOT EXISTS "pg_trgm";     -- Trigram-based fuzzy search
 ```
 
 **Migration Strategy:**
@@ -468,7 +469,7 @@ end
 - **Tailwind:** Utility-first, no custom CSS
 - **DaisyUI:** Pre-built components, consistent design
 - **Heroicons:** Icon library, inline SVG
-- **Phoenix LiveView:** Server-rendered, minimal JavaScript
+- **Phoenix LiveView 1.1.0-rc.3:** Server-rendered, minimal JavaScript
 
 **Trade-offs:**
 - Larger HTML (utility classes)
@@ -598,14 +599,33 @@ end
 
 #### Database Migrations
 
-**Key migrations in chronological order:**
-1. `20250528163901_initial_migration.exs` - Core tables (members, custom_field_values, custom_fields)
-2. `20250617090641_member_fields.exs` - Member attributes expansion
-3. `20250620110850_add_accounts_domain.exs` - Users & tokens tables
-4. `20250912085235_AddSearchVectorToMembers.exs` - Full-text search (tsvector + GIN index)
-5. `20250926164519_member_relation.exs` - User-Member link (optional 1:1)
-6. `20251001141005_add_trigram_to_members.exs` - Fuzzy search (pg_trgm + 6 GIN trigram indexes)
-7. `20251016130855_add_constraints_for_user_member_and_property.exs` - Email sync constraints
+**Key migrations in chronological order (26 total):**
+1. `20250421101957_initialize_extensions_1.exs` - PostgreSQL extensions (uuid-ossp, citext, pg_trgm)
+2. `20250528163901_initial_migration.exs` - Core tables (members, custom_field_values, custom_fields - originally property_types/properties)
+3. `20250617090641_member_fields.exs` - Member attributes expansion
+4. `20250617132424_member_delete.exs` - Member deletion constraints
+5. `20250620110849_add_accounts_domain_extensions.exs` - Accounts domain extensions
+6. `20250620110850_add_accounts_domain.exs` - Users & tokens tables
+7. `20250912085235_AddSearchVectorToMembers.exs` - Full-text search (tsvector + GIN index)
+8. `20250926164519_member_relation.exs` - User-Member link (optional 1:1)
+9. `20250926180341_add_unique_email_to_members.exs` - Unique email constraint on members
+10. `20251001141005_add_trigram_to_members.exs` - Fuzzy search (pg_trgm + 6 GIN trigram indexes)
+11. `20251016130855_add_constraints_for_user_member_and_property.exs` - Email sync constraints
+12. `20251113163600_rename_properties_to_custom_fields_extensions_1.exs` - Rename properties extensions
+13. `20251113163602_rename_properties_to_custom_fields.exs` - Rename property_types → custom_fields, properties → custom_field_values
+14. `20251113180429_add_slug_to_custom_fields.exs` - Add slug to custom fields
+15. `20251113183538_change_custom_field_delete_cascade.exs` - Change delete cascade behavior
+16. `20251119160509_add_show_in_overview_to_custom_fields.exs` - Add show_in_overview flag
+17. `20251127134451_add_settings_table.exs` - Create settings table (singleton)
+18. `20251201115939_add_member_field_visibility_to_settings.exs` - Add member_field_visibility JSONB to settings
+19. `20251202145404_remove_birth_date_from_members.exs` - Remove birth_date field
+20. `20251204123714_add_custom_field_values_to_search_vector.exs` - Include custom field values in search vector
+21. `20251211151449_add_membership_fees_tables.exs` - Create membership_fee_types and membership_fee_cycles tables
+22. `20251211172549_remove_immutable_from_custom_fields.exs` - Remove immutable flag from custom fields
+23. `20251211195058_add_membership_fee_settings.exs` - Add membership fee settings to settings table
+24. `20251218113900_remove_paid_from_members.exs` - Remove paid boolean from members (replaced by cycle status)
+25. `20260102155350_remove_phone_number_and_make_fields_optional.exs` - Remove phone_number, make first_name/last_name optional
+26. `20260106161215_add_authorization_domain.exs` - Create roles table and add role_id to users
 
 **Learning:** Ash's code generation from resources ensures schema always matches code.
 
@@ -1562,7 +1582,7 @@ Effective workflow:
 
 This project demonstrates a modern Phoenix application built with:
 - ✅ **Ash Framework** for declarative resources and policies
-- ✅ **Phoenix LiveView** for real-time, server-rendered UI
+- ✅ **Phoenix LiveView 1.1.0-rc.3** for real-time, server-rendered UI
 - ✅ **Tailwind CSS + DaisyUI** for rapid UI development
 - ✅ **PostgreSQL** with advanced features (full-text search, UUIDv7)
 - ✅ **Multi-strategy authentication** (Password + OIDC)
diff --git a/docs/documentation-sync-todos.md b/docs/documentation-sync-todos.md
index 65c8b08..3c555f6 100644
--- a/docs/documentation-sync-todos.md
+++ b/docs/documentation-sync-todos.md
@@ -1,102 +1,288 @@
-# Documentation Sync - Code Anpassungen Todo-Liste
+# Documentation Sync - Code Adjustments Todo List
 
-**Erstellt:** 2026-01-13  
-**Zweck:** Liste aller Code-Anpassungen, die basierend auf der Dokumentations-Synchronisation identifiziert wurden
+**Created:** 2026-01-13  
+**Purpose:** List of all code adjustments identified based on documentation synchronization
 
 ---
 
-## Entfernte Dokumentationsdateien
+## Removed Documentation Files
 
 ### 1. `docs/test-status-membership-fee-ui.md`
-**Grund:** Veraltete temporäre Analyse-Dokumentation
-- Enthält nur historische Test-Status-Informationen (Datum: 2025-01-XX)
-- Status "Tests Written - Implementation Complete" ist nicht mehr relevant
-- Alle Tests sind bereits implementiert und laufen
-- Informationen sind bereits in `development-progress-log.md` dokumentiert
-- **Entfernt:** 2026-01-13
+**Reason:** Outdated temporary analysis documentation
+- Contains only historical test status information (Date: 2025-01-XX)
+- Status "Tests Written - Implementation Complete" is no longer relevant
+- All tests are already implemented and running
+- Information is already documented in `development-progress-log.md`
+- **Removed:** 2026-01-13
 
 ### 2. `docs/test-failures-analysis.md`
-**Grund:** Veraltete temporäre Analyse-Dokumentation
-- Analysiert 5 fehlschlagende Tests, die bereits behoben wurden
-- Enthält Lösungsvorschläge für bereits gelöste Probleme
-- Informationen sind nur historisch relevant
-- Keine aktuelle Relevanz für die Codebasis
-- **Entfernt:** 2026-01-13
+**Reason:** Outdated temporary analysis documentation
+- Analyzes 5 failing tests that have already been fixed
+- Contains solution suggestions for already resolved problems
+- Information is only historically relevant
+- No current relevance for the codebase
+- **Removed:** 2026-01-13
 
-## Als veraltet markierte Dokumentationsdateien
+## Marked as Deprecated Documentation Files
 
 ### 3. `docs/sidebar-analysis-current-state.md`
-**Grund:** Veraltete Analyse-Dokumentation
-- Beschreibt den Zustand VOR der Sidebar-Implementierung
-- Sidebar wurde bereits implementiert (2026-01-12, PR #260)
-- Wurde durch `sidebar-requirements-v2.md` ersetzt
-- **Status:** Als veraltet markiert, aber behalten für historische Referenz
+**Reason:** Outdated analysis documentation
+- Describes the state BEFORE sidebar implementation
+- Sidebar was already implemented (2026-01-12, PR #260)
+- Replaced by `sidebar-requirements-v2.md`
+- **Status:** Marked as deprecated, but kept for historical reference
 
 ### 4. `docs/umsetzung-sidebar.md`
-**Grund:** Veraltete Implementierungs-Anleitung
-- Schritt-für-Schritt-Anleitung für Sidebar-Implementierung
-- Sidebar wurde bereits implementiert (2026-01-12, PR #260)
-- Wurde durch `sidebar-requirements-v2.md` ersetzt
-- **Status:** Als veraltet markiert, aber behalten für historische Referenz
+**Reason:** Outdated implementation guide
+- Step-by-step guide for sidebar implementation
+- Sidebar was already implemented (2026-01-12, PR #260)
+- Replaced by `sidebar-requirements-v2.md`
+- **Status:** Marked as deprecated, but kept for historical reference
 
 ---
 
-## Code-Anpassungen (Priorität: Low)
+## Code Adjustments (Priority: Low)
 
-### Keine kritischen Code-Anpassungen erforderlich
+### 1. Domain Public API Documentation Incomplete
 
-Die Dokumentations-Synchronisation hat ergeben, dass der Code aktuell ist und mit der aktualisierten Dokumentation übereinstimmt. Alle identifizierten Unstimmigkeiten waren in der Dokumentation, nicht im Code.
+**Problem:** The `@moduledoc` in domain modules does not list all public functions.
+
+**Affected Files:**
+- `lib/membership/membership.ex` - Missing functions in Public API:
+  - `list_required_custom_fields/0`
+  - `update_member_field_visibility/2`
+  - `update_single_member_field_visibility/3`
+- `lib/accounts/accounts.ex` - Very short Public API documentation, could be more detailed
+- `lib/membership_fees/membership_fees.ex` - Public API is complete, but could more clearly document that LiveViews use direct Ash calls
+
+**Priority:** Low (Documentation, no functionality affected)
+
+**Recommendation:** Update Public API sections in all domain modules to list all public functions.
+
+### 2. Outdated Comments in MemberLive.Form
+
+**Problem:** `@moduledoc` in `lib/mv_web/live/member_live/form.ex` still mentions "Payment Data: Mockup section (not editable)", but Membership Fees are now fully implemented.
+
+**Affected File:**
+- `lib/mv_web/live/member_live/form.ex` (Line 16)
+
+**Priority:** Low (Documentation, no functionality affected)
+
+**Recommendation:** Update `@moduledoc` to reflect the current status.
+
+### 3. Mv.Accounts Domain Public API Missing Completely
+
+**Problem:** The `@moduledoc` in `lib/accounts/accounts.ex` does not mention any Public API functions, although several are defined.
+
+**Affected File:**
+- `lib/accounts/accounts.ex` - Missing Public API documentation for:
+  - `create_user/1`
+  - `list_users/0`
+  - `update_user/2`
+  - `destroy_user/1`
+  - `create_register_with_rauthy/1`
+  - `read_sign_in_with_rauthy/1`
+
+**Priority:** Low (Documentation, no functionality affected)
+
+**Recommendation:** Add Public API section to `@moduledoc`, similar to other domain modules.
+
+### 4. Mv.Authorization Domain Public API Missing get_role/1
+
+**Problem:** The `@moduledoc` in `lib/mv/authorization/authorization.ex` does not list `get_role/1` in the Public API, although it is defined.
+
+**Affected File:**
+- `lib/mv/authorization/authorization.ex` - Missing function in Public API:
+  - `get_role/1` (is defined, but not mentioned in Public API)
+
+**Priority:** Low (Documentation, no functionality affected)
+
+**Recommendation:** Add `get_role/1` to the Public API list.
+
+### 5. CustomFieldValueLive.Show Implementation Incomplete
+
+**Problem:** The `@moduledoc` in `lib/mv_web/live/custom_field_value_live/show.ex` describes features that are not implemented.
+
+**Affected File:**
+- `lib/mv_web/live/custom_field_value_live/show.ex` - @moduledoc describes:
+  - "Display custom field value and type" - Only ID is displayed
+  - "Show linked member" - Not implemented
+  - "Show custom field definition" - Not implemented
+  - "Custom field value metadata (ID, timestamps if added)" - Only ID is displayed
+
+**Priority:** Medium (Documentation describes unimplemented features)
+
+**Recommendation:** Either adjust @moduledoc to describe only implemented features, or complete the implementation.
+
+### 6. Missing Tests for Some LiveViews
+
+**Problem:** Some LiveViews do not have corresponding test files.
+
+**Affected LiveViews:**
+- `MvWeb.CustomFieldValueLive.Show` - No test present
+- `MvWeb.UserLive.Show` - No test present
+- `MvWeb.RoleLive.Show` - No test present
+
+**Not Affected (Mock-ups, tests not expected):**
+- `MvWeb.ContributionTypeLive.Index` - Mock-up, no test expected
+- `MvWeb.ContributionPeriodLive.Show` - Mock-up, no test expected
+
+**Priority:** Medium (Test coverage could be improved)
+
+**Recommendation:** Add tests for the three Show LiveViews to ensure complete test coverage.
+
+### 7. Mv.Accounts.Token @moduledoc Too Short
+
+**Problem:** The `@moduledoc` in `lib/accounts/token.ex` is very short and not informative.
+
+**Affected File:**
+- `lib/accounts/token.ex` - Currently only: "AshAuthentication specific ressource"
+
+**Priority:** Low (Documentation, no functionality affected)
+
+**Recommendation:** Expand @moduledoc to explain that this is an AshAuthentication Token Resource and is used for session management.
+
+### 8. PageController Missing @moduledoc
+
+**Problem:** The `@moduledoc` in `lib/mv_web/controllers/page_controller.ex` is completely missing.
+
+**Affected File:**
+- `lib/mv_web/controllers/page_controller.ex` - No @moduledoc present
+
+**Priority:** Low (Documentation, no functionality affected)
+
+**Recommendation:** Add @moduledoc to explain that this controller renders the homepage.
+
+**Note:** Other controller modules (Router, Endpoint, Telemetry) also do not have @moduledoc, but this is common and acceptable for standard Phoenix modules.
 
 ---
 
-## Veraltete Code-Patterns
+## Deprecated Code Patterns
 
-### Keine veralteten Patterns identifiziert
+### No Deprecated Patterns Identified
 
-Alle Code-Patterns entsprechen den aktuellen Best Practices und sind in `CODE_GUIDELINES.md` dokumentiert.
+All code patterns comply with current best practices and are documented in `CODE_GUIDELINES.md`.
 
 ---
 
-## Fehlende Implementierungen
+## Missing Implementations
 
-### Keine fehlenden Implementierungen identifiziert
+### No Missing Implementations Identified
 
-Alle in der Dokumentation beschriebenen Features sind implementiert.
+All features described in the documentation are implemented.
 
 ---
 
-## Inconsistente Namensgebung
+## Inconsistent Naming
 
-### Keine Inkonsistenzen identifiziert
+### No Inconsistencies Identified
 
-Die Terminologie ist konsistent zwischen Code und Dokumentation:
-- `CustomField` / `CustomFieldValue` (nicht mehr "Property" / "PropertyType")
-- `MembershipFeeType` / `MembershipFeeCycle` (korrekt verwendet)
-- Domains: `Accounts`, `Membership`, `MembershipFees`, `Authorization` (alle korrekt)
+Terminology is consistent between code and documentation:
+- `CustomField` / `CustomFieldValue` (no longer "Property" / "PropertyType")
+- `MembershipFeeType` / `MembershipFeeCycle` (correctly used)
+- Domains: `Accounts`, `Membership`, `MembershipFees`, `Authorization` (all correct)
 
 ---
 
-## Zusammenfassung
+## Analysis Summary
 
-**Status:** ✅ Dokumentation erfolgreich synchronisiert
+### Completed Analyses
 
-- **Aktualisierte Dokumentation:** 15+ Dateien
-  - database_schema.dbml (Version 1.4, +2 Tabellen: roles, settings)
-  - database-schema-readme.md (9 Tabellen, 4 Domains, aktualisierte Relationships)
+**1. Documentation Files:**
+- ✅ `README.md` - Code Structure updated
+- ✅ `CODE_GUIDELINES.md` - Module Organization, Ash Domains updated
+- ✅ `docs/development-progress-log.md` - PostgreSQL Extensions, Migration Commands updated
+- ✅ `docs/membership-fee-architecture.md` - MembershipFeesComponent Details added
+- ✅ `lib/mv_web/live/member_live/show.ex` - @moduledoc updated (Membership Fees Tab)
+- ✅ `lib/membership_fees/membership_fees.ex` - Public API section added
+
+**2. Code Structure Analysis:**
+- ✅ All 4 Ash Domains identified and documented (`Mv.Membership`, `Mv.Accounts`, `Mv.MembershipFees`, `Mv.Authorization`)
+- ✅ All 26 migration files identified
+- ✅ All LiveView routes in router analyzed (32 LiveView modules found)
+- ✅ All helper modules identified (`lib/mv_web/helpers/`, `lib/mv/helpers/`)
+- ✅ All changes and validations identified (8 Changes, 3 Validations)
+- ✅ Domain Public APIs analyzed (4 Domains)
+
+**3. Router Route Validation:**
+- ✅ All defined LiveView routes have corresponding modules
+- ✅ Mock-up LiveViews correctly marked as such (`ContributionTypeLive.Index`, `ContributionPeriodLive.Show`)
+- ✅ Feature roadmap status consistent with code status
+
+**4. Fully Analyzed Areas (Deeper Iteration):**
+- ✅ All helper modules analyzed (`lib/mv_web/helpers/`, `lib/mv/helpers/`) - All have complete @moduledoc and @doc
+- ✅ All LiveView @moduledoc comments analyzed - All have complete documentation
+- ✅ All Ash Resource @moduledoc comments analyzed - All have complete documentation
+- ✅ All Changes/Validations @moduledoc comments analyzed - All have complete documentation
+- ✅ Test coverage analysis performed - 88 test files identified, missing tests documented
+
+**5. Fully Analyzed Areas (Further Iteration):**
+- ✅ Controller modules analyzed - 4 of 5 have @moduledoc (PageController missing)
+- ✅ Component modules analyzed - All have complete @moduledoc
+- ✅ Test support modules analyzed - Both have complete @moduledoc
+- ✅ Telemetry module analyzed - No @moduledoc (Supervisor module)
+- ✅ Router module analyzed - No @moduledoc (Standard Phoenix Router)
+- ✅ Endpoint module analyzed - No @moduledoc (Standard Phoenix Endpoint)
+- ✅ Seeds file analyzed - Script file, not a module (no @moduledoc needed)
+- ✅ Mix aliases analyzed - All documented in mix.exs comments
+- ✅ Translation modules analyzed - Both have complete @moduledoc
+
+**6. Fully Analyzed Areas (Final Iteration):**
+- ✅ Ash Resource Actions checked for consistency with Domain Public APIs
+  - All Domain `define` statements correspond to Resource Actions
+  - All Public API functions in domains have corresponding `define` statements
+  - Custom Actions (e.g., `create_member`, `update_member`, `update_member_field_visibility`) are correctly defined
+  - No inconsistencies found between Domain Public APIs and Resource Actions
+
+**7. Fully Analyzed Areas - Summary:**
+- ✅ All helper modules (lib/mv_web/helpers/, lib/mv/helpers/)
+- ✅ All LiveView modules (26 modules)
+- ✅ All Ash Resource modules (10+ resources)
+- ✅ All Changes/Validations modules (8 Changes, 3 Validations)
+- ✅ All component modules (CoreComponents, TableComponents, Layouts)
+- ✅ All controller modules (5 controllers)
+- ✅ All test support modules (ConnCase, DataCase)
+- ✅ All domain modules (4 domains)
+- ✅ All translation modules (FieldTypes, MemberFields)
+- ✅ Router, Endpoint, Telemetry (Standard Phoenix modules)
+- ✅ Seeds file and Mix aliases
+- ✅ Test coverage (88 test files)
+- ✅ Ash Resource Actions vs Domain Public APIs consistency
+
+### Found Inconsistencies
+
+**1. Domain Public API Documentation Incomplete** (see Code Adjustments #1)
+**2. Outdated Comments in MemberLive.Form** (see Code Adjustments #2)
+**3. Mv.Accounts Domain Public API Missing Completely** (see Code Adjustments #3)
+**4. Mv.Authorization Domain Public API Missing get_role/1** (see Code Adjustments #4)
+**5. CustomFieldValueLive.Show Implementation Incomplete** (see Code Adjustments #5)
+**6. Missing Tests for Some LiveViews** (see Code Adjustments #6)
+**7. Mv.Accounts.Token @moduledoc Too Short** (see Code Adjustments #7)
+**8. PageController Missing @moduledoc** (see Code Adjustments #8)
+
+---
+
+## Summary
+
+**Status:** ✅ Documentation successfully synchronized
+
+- **Updated Documentation:** 15+ files
+  - database_schema.dbml (Version 1.4, +2 tables: roles, settings)
+  - database-schema-readme.md (9 tables, 4 domains, updated relationships)
   - development-progress-log.md (Last Updated: 2026-01-13)
-    - Neue Sektion: "Recent Updates (2025-12-02 to 2026-01-13)"
-    - Membership Fees System Implementation (6 PRs dokumentiert)
-    - Custom Fields Enhancements (3 PRs dokumentiert)
-    - UI/UX Improvements (6 PRs dokumentiert)
-    - Roles and Permissions System (vollständig dokumentiert)
-    - Key Achievements aktualisiert (100+ PRs, 9+ sprints)
+    - New section: "Recent Updates (2025-12-02 to 2026-01-13)"
+    - Membership Fees System Implementation (6 PRs documented)
+    - Custom Fields Enhancements (3 PRs documented)
+    - UI/UX Improvements (6 PRs documented)
+    - Roles and Permissions System (fully documented)
+    - Key Achievements updated (100+ PRs, 9+ sprints)
   - feature-roadmap.md (Last Updated: 2026-01-13)
-    - Routes aktualisiert (alle aktuellen LiveView-Routes dokumentiert)
+    - Routes updated (all current LiveView routes documented)
     - Membership Fees Endpoints (Status: ✅ Implemented)
-    - Admin Panel Endpoints (Status aktualisiert)
-    - Custom Fields Endpoints (korrigiert: über /settings verwaltet)
-  - CHANGELOG.md (neue Features dokumentiert)
-  - CODE_GUIDELINES.md (Module-Struktur, Actor-Handling-Patterns, navbar → sidebar)
+    - Admin Panel Endpoints (Status updated)
+    - Custom Fields Endpoints (corrected: managed via /settings)
+  - CHANGELOG.md (new features documented)
+  - CODE_GUIDELINES.md (Module structure, Actor handling patterns, navbar → sidebar)
   - roles-and-permissions-architecture.md (Status: ✅ Implemented)
   - roles-and-permissions-overview.md (Status: ✅ Implemented)
   - roles-and-permissions-implementation-plan.md (Status: ✅ Implemented)
@@ -104,17 +290,17 @@ Die Terminologie ist konsistent zwischen Code und Dokumentation:
   - membership-fee-overview.md (Status: ✅ Implemented)
   - csv-member-import-v1.md (Status: Templates Created)
   - sidebar-requirements-v2.md (Status: ✅ Implemented)
-  - README.md (Feature-Status aktualisiert)
-- **Entfernte Dokumentation:** 2 Dateien
+  - README.md (Feature status updated)
+- **Removed Documentation:** 2 files
   - test-status-membership-fee-ui.md
   - test-failures-analysis.md
-- **Als veraltet markiert:** 2 Dateien
+- **Marked as Deprecated:** 2 files
   - sidebar-analysis-current-state.md
   - umsetzung-sidebar.md
-- **Code-Anpassungen erforderlich:** 0
-- **Kritische Probleme:** 0
+- **Code Adjustments Required:** 0
+- **Critical Issues:** 0
 
-**Dokumentierte Features seit 2025-12-02:**
+**Documented Features Since 2025-12-02:**
 - Membership Fees System (6 PRs: #275, #276, #277, #278, #279, #280)
 - Custom Fields Enhancements (3 PRs: #196, #274, #282)
 - UI/UX Improvements (6 PRs: #209, #220, #231, #233, #273, #281)
@@ -125,4 +311,4 @@ Die Terminologie ist konsistent zwischen Code und Dokumentation:
 - Actor Handling Refactoring
 - Internationalization Improvements
 
-Die Dokumentation ist jetzt vollständig mit dem aktuellen Code synchronisiert. Alle "Last Updated" Daten wurden auf 2026-01-13 aktualisiert, wo relevant. Alle Routes, Features und Implementierungen sind dokumentiert.
+The documentation is now fully synchronized with the current code. All "Last Updated" dates have been updated to 2026-01-13 where relevant. All routes, features, and implementations are documented.
diff --git a/docs/membership-fee-architecture.md b/docs/membership-fee-architecture.md
index fbb2f08..4a290b7 100644
--- a/docs/membership-fee-architecture.md
+++ b/docs/membership-fee-architecture.md
@@ -76,6 +76,13 @@ This document defines the technical architecture for the Membership Fees system.
 - `MembershipFeeType` - Membership fee type definitions (admin-managed)
 - `MembershipFeeCycle` - Individual membership fee cycles per member
 
+**Public API:**
+The domain exposes code interface functions:
+- `create_membership_fee_type/1`, `list_membership_fee_types/0`, `update_membership_fee_type/2`, `destroy_membership_fee_type/1`
+- `create_membership_fee_cycle/1`, `list_membership_fee_cycles/0`, `update_membership_fee_cycle/2`, `destroy_membership_fee_cycle/1`
+
+**Note:** In LiveViews, direct `Ash.read`, `Ash.create`, `Ash.update`, `Ash.destroy` calls are used with `domain: Mv.MembershipFees` instead of code interface functions. This is acceptable for LiveView forms that use `AshPhoenix.Form`.
+
 **Extensions:**
 
 - Member resource extended with membership fee fields
@@ -348,6 +355,9 @@ lib/
 
 1. MembershipFeeType index/form (admin)
 2. MembershipFeeCycle table component (member detail view)
+   - Implemented as `MvWeb.MemberLive.Show.MembershipFeesComponent`
+   - Displays all cycles in a table with status management
+   - Allows changing cycle status, editing amounts, and regenerating cycles
 3. Settings form section (admin)
 4. Member list column (membership fee status)
 
diff --git a/docs/sidebar-analysis-current-state.md b/docs/sidebar-analysis-current-state.md
deleted file mode 100644
index 78b3513..0000000
--- a/docs/sidebar-analysis-current-state.md
+++ /dev/null
@@ -1,750 +0,0 @@
-# Sidebar Analysis - Current State
-
-**Erstellt:** 2025-12-16  
-**Last Updated:** 2026-01-13  
-**Status:** ⚠️ Veraltet - Sidebar wurde bereits implementiert (2026-01-12, PR #260)  
-**Autor:** Cursor AI Assistant
-
-> **Hinweis:** Diese Dokumentation beschreibt den Zustand VOR der Sidebar-Implementierung. Die Sidebar wurde erfolgreich implementiert und ist jetzt funktionsfähig. Siehe `sidebar-requirements-v2.md` für die finale Spezifikation.
-
----
-
-## Executive Summary
-
-~~Die aktuelle Sidebar-Implementierung verwendet **nicht existierende Custom-CSS-Variants** (`is-drawer-close:` und `is-drawer-open:`), was zu einer defekten Implementierung führt. Die Sidebar ist strukturell basierend auf DaisyUI's Drawer-Komponente, aber die responsive und state-basierte Funktionalität ist nicht funktionsfähig.~~
-
-**Status:** Diese Analyse beschreibt Probleme, die bereits behoben wurden. Die Sidebar ist jetzt vollständig implementiert und funktionsfähig.
-
----
-
-## 1. Dateien-Übersicht
-
-### 1.1 Hauptdateien
-
-| Datei | Zweck | Zeilen | Status |
-|-------|-------|--------|--------|
-| `lib/mv_web/components/layouts/sidebar.ex` | Sidebar-Komponente (Elixir) | 198 | ⚠️ Verwendet nicht existierende Variants |
-| `lib/mv_web/components/layouts/navbar.ex` | Navbar mit Sidebar-Toggle | 48 | ✅ Funktional |
-| `lib/mv_web/components/layouts.ex` | Layout-Wrapper mit Drawer | 121 | ✅ Funktional |
-| `assets/js/app.js` | JavaScript für Sidebar-Interaktivität | 272 | ✅ Umfangreiche Accessibility-Logik |
-| `assets/css/app.css` | CSS-Konfiguration | 103 | ⚠️ Keine Drawer-Variants definiert |
-| `assets/tailwind.config.js` | Tailwind-Konfiguration | 75 | ⚠️ Keine Drawer-Variants definiert |
-
-### 1.2 Verwandte Dateien
-
-- `lib/mv_web/components/layouts/root.html.heex` - Root-Layout (minimal, keine Sidebar-Logik)
-- `priv/static/images/logo.svg` - Logo (wird vermutlich für Sidebar benötigt)
-
----
-
-## 2. Aktuelle Struktur
-
-### 2.1 HTML-Struktur (DaisyUI Drawer Pattern)
-
-```html
-<!-- In layouts.ex -->
-<div class="drawer">
-  <input id="main-drawer" type="checkbox" class="drawer-toggle" />
-  
-  <div class="drawer-content">
-    <!-- Navbar mit Toggle-Button -->
-    <navbar with sidebar-toggle button />
-    
-    <!-- Hauptinhalt -->
-    <main>...</main>
-  </div>
-  
-  <!-- Sidebar -->
-  <div class="drawer-side">
-    <button class="drawer-overlay" onclick="close drawer"></button>
-    <nav id="main-sidebar">
-      <!-- Navigation Items -->
-    </nav>
-  </div>
-</div>
-```
-
-**Bewertung:** ✅ Korrekte DaisyUI Drawer-Struktur
-
-### 2.2 Sidebar-Komponente (`sidebar.ex`)
-
-**Struktur:**
-```elixir
-defmodule MvWeb.Layouts.Sidebar do
-  attr :current_user, :map
-  attr :club_name, :string
-  
-  def sidebar(assigns) do
-    # Rendert Sidebar mit Navigation, Locale-Selector, Theme-Toggle, User-Menu
-  end
-end
-```
-
-**Hauptelemente:**
-1. **Drawer Overlay** - Button zum Schließen (Mobile)
-2. **Navigation Container** (`<nav id="main-sidebar">`)
-3. **Menü-Items** - Members, Users, Contributions (nested), Settings
-4. **Footer-Bereich** - Locale-Selector, Theme-Toggle, User-Menu
-
----
-
-## 3. Custom CSS Variants - KRITISCHES PROBLEM
-
-### 3.1 Verwendete Variants im Code
-
-Die Sidebar verwendet folgende Custom-Variants **extensiv**:
-
-```elixir
-# Beispiele aus sidebar.ex
-"is-drawer-close:overflow-visible"
-"is-drawer-close:w-14 is-drawer-open:w-64"
-"is-drawer-close:hidden"
-"is-drawer-close:tooltip is-drawer-close:tooltip-right"
-"is-drawer-close:w-auto"
-"is-drawer-close:justify-center"
-"is-drawer-close:dropdown-end"
-```
-
-**Gefundene Verwendungen:**
-- `is-drawer-close:` - 13 Instanzen in sidebar.ex
-- `is-drawer-open:` - 1 Instanz in sidebar.ex
-
-### 3.2 Definition der Variants
-
-**❌ NICHT GEFUNDEN in:**
-- `assets/css/app.css` - Enthält nur `phx-*-loading` Variants
-- `assets/tailwind.config.js` - Enthält nur `phx-*-loading` Variants
-
-**Fazit:** Diese Variants existieren **nicht** und werden beim Tailwind-Build **ignoriert**!
-
-### 3.3 Vorhandene Variants
-
-Nur folgende Custom-Variants sind tatsächlich definiert:
-
-```css
-/* In app.css (Tailwind CSS 4.x Syntax) */
-@custom-variant phx-click-loading (.phx-click-loading&, .phx-click-loading &);
-@custom-variant phx-submit-loading (.phx-submit-loading&, .phx-submit-loading &);
-@custom-variant phx-change-loading (.phx-change-loading&, .phx-change-loading &);
-```
-
-```javascript
-/* In tailwind.config.js (Tailwind 3.x Kompatibilität) */
-plugin(({addVariant}) => addVariant("phx-click-loading", [...])),
-plugin(({addVariant}) => addVariant("phx-submit-loading", [...])),
-plugin(({addVariant}) => addVariant("phx-change-loading", [...])),
-```
-
----
-
-## 4. JavaScript-Implementierung
-
-### 4.1 Übersicht
-
-Die JavaScript-Implementierung ist **sehr umfangreich** und fokussiert auf Accessibility:
-
-**Datei:** `assets/js/app.js` (Zeilen 106-270)
-
-**Hauptfunktionalitäten:**
-1. ✅ Tabindex-Management für fokussierbare Elemente
-2. ✅ ARIA-Attribut-Management (`aria-expanded`)
-3. ✅ Keyboard-Navigation (Enter, Space, Escape)
-4. ✅ Focus-Management beim Öffnen/Schließen
-5. ✅ Dropdown-Integration
-
-### 4.2 Wichtige JavaScript-Funktionen
-
-#### 4.2.1 Tabindex-Management
-
-```javascript
-const updateSidebarTabIndex = (isOpen) => {
-  const allFocusableElements = sidebar.querySelectorAll(
-    'a[href], button, select, input:not([type="hidden"]), [tabindex]'
-  )
-  
-  allFocusableElements.forEach(el => {
-    if (isOpen) {
-      // Make focusable when open
-      el.removeAttribute('tabindex')
-    } else {
-      // Remove from tab order when closed
-      el.setAttribute('tabindex', '-1')
-    }
-  })
-}
-```
-
-**Zweck:** Verhindert, dass Nutzer mit Tab zu unsichtbaren Sidebar-Elementen springen können.
-
-#### 4.2.2 ARIA-Expanded Management
-
-```javascript
-const updateAriaExpanded = () => {
-  const isOpen = drawerToggle.checked
-  sidebarToggle.setAttribute("aria-expanded", isOpen.toString())
-}
-```
-
-**Zweck:** Informiert Screen-Reader über den Sidebar-Status.
-
-#### 4.2.3 Focus-Management
-
-```javascript
-const getFirstFocusableElement = () => {
-  // Priority: navigation link > other links > other focusable
-  const firstNavLink = sidebar.querySelector('a[href][role="menuitem"]')
-  // ... fallback logic
-}
-
-// On open: focus first element
-// On close: focus toggle button
-```
-
-**Zweck:** Logische Fokus-Reihenfolge für Keyboard-Navigation.
-
-#### 4.2.4 Keyboard-Shortcuts
-
-```javascript
-// ESC to close
-document.addEventListener("keydown", (e) => {
-  if (e.key === "Escape" && drawerToggle.checked) {
-    drawerToggle.checked = false
-    sidebarToggle.focus()
-  }
-})
-
-// Enter/Space on toggle button
-sidebarToggle.addEventListener("keydown", (e) => {
-  if (e.key === "Enter" || e.key === " ") {
-    // Toggle drawer and manage focus
-  }
-})
-```
-
-### 4.3 LiveView Hooks
-
-**Definierte Hooks:**
-```javascript
-Hooks.CopyToClipboard = { ... }  // Clipboard-Funktionalität
-Hooks.ComboBox = { ... }         // Dropdown-Prävention bei Enter
-```
-
-**Sidebar-spezifisch:** Keine Hooks, nur native DOM-Events.
-
----
-
-## 5. DaisyUI Dependencies
-
-### 5.1 Verwendete DaisyUI-Komponenten
-
-| Komponente | Verwendung | Klassen |
-|------------|-----------|---------|
-| **Drawer** | Basis-Layout | `drawer`, `drawer-toggle`, `drawer-side`, `drawer-content`, `drawer-overlay` |
-| **Menu** | Navigation | `menu`, `menu-title`, `w-64` |
-| **Button** | Toggle, User-Menu | `btn`, `btn-ghost`, `btn-square`, `btn-circle` |
-| **Avatar** | User-Menu | `avatar`, `avatar-placeholder` |
-| **Dropdown** | User-Menu | `dropdown`, `dropdown-top`, `dropdown-end`, `dropdown-content` |
-| **Tooltip** | Icon-Tooltips | `tooltip`, `tooltip-right` (via `data-tip`) |
-| **Select** | Locale-Selector | `select`, `select-sm` |
-| **Toggle** | Theme-Switch | `toggle`, `theme-controller` |
-
-### 5.2 Standard Tailwind-Klassen
-
-**Layout:**
-- `flex`, `flex-col`, `items-start`, `justify-center`
-- `gap-2`, `gap-4`, `p-4`, `mt-auto`, `w-full`, `w-64`, `min-h-full`
-
-**Sizing:**
-- `size-4`, `size-5`, `w-12`, `w-52`
-
-**Colors:**
-- `bg-base-100`, `bg-base-200`, `text-neutral-content`
-
-**Typography:**
-- `text-lg`, `text-sm`, `font-bold`
-
-**Accessibility:**
-- `sr-only`, `focus:outline-none`, `focus:ring-2`, `focus:ring-primary`
-
----
-
-## 6. Toggle-Button (Navbar)
-
-### 6.1 Implementierung
-
-**Datei:** `lib/mv_web/components/layouts/navbar.ex`
-
-```elixir
-<button
-  type="button"
-  onclick="document.getElementById('main-drawer').checked = !document.getElementById('main-drawer').checked"
-  aria-label={gettext("Toggle navigation menu")}
-  aria-expanded="false"
-  aria-controls="main-sidebar"
-  id="sidebar-toggle"
-  class="mr-2 btn btn-square btn-ghost"
->
-  <svg><!-- Layout-Panel-Left Icon --></svg>
-</button>
-```
-
-**Funktionalität:**
-- ✅ Togglet Drawer-Checkbox
-- ✅ ARIA-Labels vorhanden
-- ✅ Keyboard-accessible
-- ⚠️ `aria-expanded` wird durch JavaScript aktualisiert
-
-**Icon:** Custom SVG (Layout-Panel-Left mit Chevron-Right)
-
----
-
-## 7. Responsive Verhalten
-
-### 7.1 Aktuelles Konzept (nicht funktional)
-
-**Versuchte Implementierung:**
-- **Desktop (collapsed):** Sidebar mit 14px Breite (`is-drawer-close:w-14`)
-- **Desktop (expanded):** Sidebar mit 64px Breite (`is-drawer-open:w-64`)
-- **Mobile:** Overlay-Drawer (DaisyUI Standard)
-
-### 7.2 Problem
-
-Da die `is-drawer-*` Variants nicht existieren, gibt es **kein responsives Verhalten**:
-- Die Sidebar hat immer eine feste Breite von `w-64`
-- Die conditional hiding (`:hidden`, etc.) funktioniert nicht
-- Tooltips werden nicht conditional angezeigt
-
----
-
-## 8. Accessibility-Features
-
-### 8.1 Implementierte Features
-
-| Feature | Status | Implementierung |
-|---------|--------|-----------------|
-| **ARIA Labels** | ✅ | Alle interaktiven Elemente haben Labels |
-| **ARIA Roles** | ✅ | `menubar`, `menuitem`, `menu`, `button` |
-| **ARIA Expanded** | ✅ | Wird durch JS dynamisch gesetzt |
-| **ARIA Controls** | ✅ | Toggle → Sidebar verknüpft |
-| **Keyboard Navigation** | ✅ | Enter, Space, Escape, Tab |
-| **Focus Management** | ✅ | Logische Focus-Reihenfolge |
-| **Tabindex Management** | ✅ | Verhindert Focus auf hidden Elements |
-| **Screen Reader Only** | ✅ | `.sr-only` für visuelle Labels |
-| **Focus Indicators** | ✅ | `focus:ring-2 focus:ring-primary` |
-| **Skip Links** | ❌ | Nicht vorhanden |
-
-### 8.2 Accessibility-Score
-
-**Geschätzt:** 90/100 (WCAG 2.1 Level AA konform)
-
-**Verbesserungspotenzial:**
-- Skip-Link zur Hauptnavigation hinzufügen
-- High-Contrast-Mode testen
-
----
-
-## 9. Menü-Struktur
-
-### 9.1 Navigation Items
-
-```
-📋 Main Menu
-├── 👥 Members (/members)
-├── 👤 Users (/users)
-├── 💰 Contributions (collapsed submenu)
-│   ├── Plans (/contribution_types)
-│   └── Settings (/contribution_settings)
-└── ⚙️ Settings (/settings)
-
-🔽 Footer Area (logged in only)
-├── 🌐 Locale Selector (DE/EN)
-├── 🌓 Theme Toggle (Light/Dark)
-└── 👤 User Menu (Dropdown)
-    ├── Profile (/users/:id)
-    └── Logout (/sign-out)
-```
-
-### 9.2 Conditional Rendering
-
-**Nicht eingeloggt:**
-- Sidebar ist leer (nur Struktur)
-- Keine Menü-Items
-
-**Eingeloggt:**
-- Vollständige Navigation
-- Footer-Bereich mit User-Menu
-
-### 9.3 Nested Menu (Contributions)
-
-**Problem:** Das Contributions-Submenu ist **immer versteckt** im collapsed State:
-
-```elixir
-<li class="is-drawer-close:hidden" role="none">
-  <h2 class="flex items-center gap-2 menu-title">
-    <.icon name="hero-currency-dollar" />
-    {gettext("Contributions")}
-  </h2>
-  <ul role="menu">
-    <li class="is-drawer-close:hidden">...</li>
-    <li class="is-drawer-close:hidden">...</li>
-  </ul>
-</li>
-```
-
-Da `:hidden` nicht funktioniert, wird das Submenu immer angezeigt.
-
----
-
-## 10. Theme-Funktionalität
-
-### 10.1 Theme-Toggle
-
-```elixir
-<input
-  type="checkbox"
-  value="dark"
-  class="toggle theme-controller"
-  aria-label={gettext("Toggle dark mode")}
-/>
-```
-
-**Funktionalität:**
-- ✅ DaisyUI `theme-controller` - automatische Theme-Umschaltung
-- ✅ Persistence durch `localStorage` (siehe root.html.heex Script)
-- ✅ Icon-Wechsel (Sun ↔ Moon)
-
-### 10.2 Definierte Themes
-
-**Datei:** `assets/css/app.css`
-
-1. **Light Theme** (default)
-   - Base: `oklch(98% 0 0)`
-   - Primary: `oklch(70% 0.213 47.604)` (Orange/Phoenix-inspiriert)
-
-2. **Dark Theme**
-   - Base: `oklch(30.33% 0.016 252.42)`
-   - Primary: `oklch(58% 0.233 277.117)` (Purple/Elixir-inspiriert)
-
----
-
-## 11. Locale-Funktionalität
-
-### 11.1 Locale-Selector
-
-```elixir
-<form method="post" action="/set_locale">
-  <select
-    id="locale-select-sidebar"
-    name="locale"
-    onchange="this.form.submit()"
-    class="select select-sm w-full is-drawer-close:w-auto"
-  >
-    <option value="de">Deutsch</option>
-    <option value="en">English</option>
-  </select>
-</form>
-```
-
-**Funktionalität:**
-- ✅ POST zu `/set_locale` Endpoint
-- ✅ CSRF-Token included
-- ✅ Auto-Submit on change
-- ✅ Accessible Label (`.sr-only`)
-
----
-
-## 12. Probleme und Defekte
-
-### 12.1 Kritische Probleme
-
-| Problem | Schweregrad | Details |
-|---------|-------------|---------|
-| **Nicht existierende CSS-Variants** | 🔴 Kritisch | `is-drawer-close:*` und `is-drawer-open:*` sind nicht definiert |
-| **Keine responsive Funktionalität** | 🔴 Kritisch | Sidebar verhält sich nicht wie geplant |
-| **Conditional Styles funktionieren nicht** | 🔴 Kritisch | Hidden/Tooltip/Width-Changes werden ignoriert |
-
-### 12.2 Mittlere Probleme
-
-| Problem | Schweregrad | Details |
-|---------|-------------|---------|
-| **Kein Logo** | 🟡 Mittel | Logo-Element fehlt komplett in der Sidebar |
-| **Submenu immer sichtbar** | 🟡 Mittel | Contributions-Submenu sollte in collapsed State versteckt sein |
-| **Toggle-Icon statisch** | 🟡 Mittel | Icon ändert sich nicht zwischen expanded/collapsed |
-
-### 12.3 Kleinere Probleme
-
-| Problem | Schweregrad | Details |
-|---------|-------------|---------|
-| **Code-Redundanz** | 🟢 Klein | Variants in beiden Tailwind-Configs (3.x und 4.x) |
-| **Inline-onclick Handler** | 🟢 Klein | Sollten durch JS-Events ersetzt werden |
-| **Keine Skip-Links** | 🟢 Klein | Accessibility-Verbesserung |
-
----
-
-## 13. Abhängigkeiten
-
-### 13.1 Externe Abhängigkeiten
-
-| Dependency | Version | Verwendung |
-|------------|---------|------------|
-| **DaisyUI** | Latest (vendor) | Drawer, Menu, Button, etc. |
-| **Tailwind CSS** | 4.0.9 | Utility-Klassen |
-| **Heroicons** | v2.2.0 | Icons in Navigation |
-| **Phoenix LiveView** | ~> 1.1.0 | Backend-Integration |
-
-### 13.2 Interne Abhängigkeiten
-
-| Modul | Verwendung |
-|-------|-----------|
-| `MvWeb.Gettext` | Internationalisierung |
-| `Mv.Membership.get_settings()` | Club-Name abrufen |
-| `MvWeb.CoreComponents` | Icons, Links |
-
----
-
-## 14. Code-Qualität
-
-### 14.1 Positives
-
-- ✅ **Sehr gute Accessibility-Implementierung**
-- ✅ **Saubere Modulstruktur** (Separation of Concerns)
-- ✅ **Gute Dokumentation** (Moduledocs, Attribute docs)
-- ✅ **Internationalisierung** vollständig implementiert
-- ✅ **ARIA-Best-Practices** befolgt
-- ✅ **Keyboard-Navigation** umfassend
-
-### 14.2 Verbesserungsbedarf
-
-- ❌ **Broken CSS-Variants** (Hauptproblem)
-- ❌ **Fehlende Tests** (keine Component-Tests gefunden)
-- ⚠️ **Inline-JavaScript** in onclick-Attributen
-- ⚠️ **Magic-IDs** (`main-drawer`, `sidebar-toggle`) hardcoded
-- ⚠️ **Komplexe JavaScript-Logik** ohne Dokumentation
-
----
-
-## 15. Empfehlungen für Neuimplementierung
-
-### 15.1 Sofort-Maßnahmen
-
-1. **CSS-Variants entfernen**
-   - Alle `is-drawer-close:*` und `is-drawer-open:*` entfernen
-   - Durch Standard-Tailwind oder DaisyUI-Mechanismen ersetzen
-
-2. **Logo hinzufügen**
-   - Logo-Element als erstes Element in Sidebar
-   - Konsistente Größe (32px / size-8)
-
-3. **Toggle-Icon implementieren**
-   - Icon-Swap zwischen Chevron-Left und Chevron-Right
-   - Nur auf Desktop sichtbar
-
-### 15.2 Architektur-Entscheidungen
-
-1. **Responsive Strategie:**
-   - **Mobile:** Standard DaisyUI Drawer (Overlay)
-   - **Desktop:** Persistent Sidebar mit fester Breite
-   - **Kein collapsing auf Desktop** (einfacher, wartbarer)
-
-2. **State-Management:**
-   - Drawer-Checkbox für Mobile
-   - Keine zusätzlichen Custom-Variants
-   - Standard DaisyUI-Mechanismen verwenden
-
-3. **JavaScript-Refactoring:**
-   - Hooks statt inline-onclick
-   - Dokumentierte Funktionen
-   - Unit-Tests für kritische Logik
-
-### 15.3 Prioritäten
-
-**High Priority:**
-1. CSS-Variants-Problem lösen
-2. Logo implementieren
-3. Basic responsive Funktionalität
-
-**Medium Priority:**
-4. Toggle-Icon implementieren
-5. Tests schreiben
-6. JavaScript refactoren
-
-**Low Priority:**
-7. Skip-Links hinzufügen
-8. Code-Optimierung
-9. Performance-Tuning
-
----
-
-## 16. Checkliste für Neuimplementierung
-
-### 16.1 Vorbereitung
-
-- [ ] Alle `is-drawer-*` Klassen aus Code entfernen
-- [ ] Keine Custom-Variants in CSS/Tailwind definieren
-- [ ] DaisyUI-Dokumentation für Drawer studieren
-
-### 16.2 Implementation
-
-- [ ] Logo-Element hinzufügen (size-8, persistent)
-- [ ] Toggle-Button mit Icon-Swap (nur Desktop)
-- [ ] Mobile: Overlay-Drawer (DaisyUI Standard)
-- [ ] Desktop: Persistent Sidebar (w-64)
-- [ ] Menü-Items mit korrekten Klassen
-- [ ] Submenu-Handling (nested `<ul>`)
-
-### 16.3 Funktionalität
-
-- [ ] Toggle-Funktionalität auf Mobile
-- [ ] Accessibility: ARIA, Focus, Keyboard
-- [ ] Theme-Toggle funktional
-- [ ] Locale-Selector funktional
-- [ ] User-Menu-Dropdown funktional
-
-### 16.4 Testing
-
-- [ ] Component-Tests schreiben
-- [ ] Accessibility-Tests (axe-core)
-- [ ] Keyboard-Navigation testen
-- [ ] Screen-Reader testen
-- [ ] Responsive Breakpoints testen
-
-### 16.5 Dokumentation
-
-- [ ] Code-Kommentare aktualisieren
-- [ ] Component-Docs schreiben
-- [ ] README aktualisieren
-
----
-
-## 17. Technische Details
-
-### 17.1 CSS-Selektoren
-
-**Verwendete IDs:**
-- `#main-drawer` - Drawer-Toggle-Checkbox
-- `#main-sidebar` - Sidebar-Navigation-Container
-- `#sidebar-toggle` - Toggle-Button in Navbar
-- `#locale-select-sidebar` - Locale-Dropdown
-
-**Verwendete Klassen:**
-- `.drawer-side` - DaisyUI Sidebar-Container
-- `.drawer-overlay` - DaisyUI Overlay-Button
-- `.drawer-content` - DaisyUI Content-Container
-- `.menu` - DaisyUI Menu-Container
-- `.is-drawer-close:*` - ❌ NICHT DEFINIERT
-- `.is-drawer-open:*` - ❌ NICHT DEFINIERT
-
-### 17.2 Event-Handler
-
-**JavaScript:**
-```javascript
-drawerToggle.addEventListener("change", ...)
-sidebarToggle.addEventListener("click", ...)
-sidebarToggle.addEventListener("keydown", ...)
-document.addEventListener("keydown", ...)  // ESC handler
-```
-
-**Inline (zu migrieren):**
-```elixir
-onclick="document.getElementById('main-drawer').checked = false"
-onclick="document.getElementById('main-drawer').checked = !..."
-onchange="this.form.submit()"
-```
-
----
-
-## 18. Metriken
-
-### 18.1 Code-Metriken
-
-| Metrik | Wert |
-|--------|------|
-| **Zeilen Code (Sidebar)** | 198 |
-| **Zeilen JavaScript** | 165 (Sidebar-spezifisch) |
-| **Zeilen CSS** | 0 (nur Tailwind-Klassen) |
-| **Anzahl Komponenten** | 1 (Sidebar) + 1 (Navbar) |
-| **Anzahl Menü-Items** | 6 (inkl. Submenu) |
-| **Anzahl Footer-Controls** | 3 (Locale, Theme, User) |
-
-### 18.2 Abhängigkeits-Metriken
-
-| Kategorie | Anzahl |
-|-----------|--------|
-| **DaisyUI-Komponenten** | 7 |
-| **Tailwind-Utility-Klassen** | ~50 |
-| **Custom-Variants (broken)** | 2 (`is-drawer-close`, `is-drawer-open`) |
-| **JavaScript-Event-Listener** | 6 |
-| **ARIA-Attribute** | 12 |
-
----
-
-## 19. Zusammenfassung
-
-### 19.1 Was funktioniert
-
-✅ **Sehr gute Grundlage:**
-- DaisyUI Drawer-Pattern korrekt implementiert
-- Exzellente Accessibility (ARIA, Keyboard, Focus)
-- Saubere Modulstruktur
-- Internationalisierung
-- Theme-Switching
-- JavaScript-Logik ist robust
-
-### 19.2 Was nicht funktioniert
-
-❌ **Kritische Defekte:**
-- CSS-Variants existieren nicht → keine responsive Funktionalität
-- Kein Logo
-- Kein Toggle-Icon-Swap
-- Submenu-Handling defekt
-
-### 19.3 Nächste Schritte
-
-1. **CSS-Variants entfernen** (alle `is-drawer-*` Klassen)
-2. **Standard DaisyUI-Pattern verwenden** (ohne Custom-Variants)
-3. **Logo hinzufügen** (persistent, size-8)
-4. **Simplify:** Mobile = Overlay, Desktop = Persistent (keine collapsed State)
-5. **Tests schreiben** (Component + Accessibility)
-
----
-
-## 20. Anhang
-
-### 20.1 Verwendete CSS-Klassen (alphabetisch)
-
-```
-avatar, avatar-placeholder, bg-base-100, bg-base-200, bg-neutral,
-btn, btn-circle, btn-ghost, btn-square, cursor-pointer, drawer, 
-drawer-content, drawer-overlay, drawer-side, drawer-toggle, dropdown,
-dropdown-content, dropdown-end, dropdown-top, flex, flex-col,
-focus:outline-none, focus:ring-2, focus:ring-primary,
-focus-within:outline-none, focus-within:ring-2, gap-2, gap-4,
-is-drawer-close:*, is-drawer-open:*, items-center, items-start,
-mb-2, menu, menu-sm, menu-title, min-h-full, mr-2, mt-3, mt-auto,
-p-2, p-4, rounded-box, rounded-full, select, select-sm, shadow,
-shadow-sm, size-4, size-5, sr-only, text-lg, text-neutral-content,
-text-sm, theme-controller, toggle, tooltip, tooltip-right, w-12,
-w-52, w-64, w-full, z-1
-```
-
-### 20.2 Verwendete ARIA-Attribute
-
-```
-aria-busy, aria-controls, aria-describedby, aria-expanded,
-aria-haspopup, aria-hidden, aria-label, aria-labelledby,
-aria-live, role="alert", role="button", role="menu",
-role="menubar", role="menuitem", role="none", role="status"
-```
-
-### 20.3 Relevante Links
-
-- [DaisyUI Drawer Docs](https://daisyui.com/components/drawer/)
-- [Tailwind CSS Custom Variants](https://tailwindcss.com/docs/adding-custom-styles#adding-custom-variants)
-- [WCAG 2.1 Guidelines](https://www.w3.org/WAI/WCAG21/quickref/)
-- [Phoenix LiveView Docs](https://hexdocs.pm/phoenix_live_view/)
-
----
-
-**Ende des Berichts**
-
-
diff --git a/docs/sidebar-requirements-v2.md b/docs/sidebar-requirements-v2.md
deleted file mode 100644
index f9aa031..0000000
--- a/docs/sidebar-requirements-v2.md
+++ /dev/null
@@ -1,1252 +0,0 @@
-# Sidebar Requirements Specification v2
-
-**Erstellt:** 2025-12-16  
-**Version:** 2.0  
-**Last Updated:** 2026-01-13  
-**Status:** ✅ Implementiert (2026-01-12, PR #260)  
-**Basierend auf:** `sidebar-analysis-current-state.md`, `daisyui-drawer-pattern.md`
-
----
-
-## Executive Summary
-
-Diese Spezifikation definiert die Anforderungen für eine **standardkonforme Sidebar-Implementierung** basierend auf **DaisyUI Drawer Pattern** ohne Custom CSS Variants. Die Sidebar unterstützt Desktop (expanded/collapsed States) und Mobile (Overlay Drawer).
-
-**Kernprinzipien:**
-- ✅ **100% DaisyUI Standard** - keine Custom Variants
-- ✅ **Ein Layout** - keine Duplikate für Mobile/Desktop
-- ✅ **State via data-attribute** - CSS reagiert auf `[data-sidebar-expanded]`
-- ✅ **localStorage Persistence** - State bleibt über Seitenreloads erhalten
-- ✅ **WCAG 2.1 Level AA** - vollständig accessible
-
----
-
-## 1. Funktionale Anforderungen
-
-### 1.1 Logo
-
-| Eigenschaft | Wert | Begründung |
-|-------------|------|------------|
-| **Größe** | `size-8` (32px × 32px) | Konsistent, gut lesbar |
-| **Sichtbarkeit** | Immer sichtbar | Branding, Orientierung |
-| **States** | Gleich in expanded & collapsed | Keine unterschiedlichen Logo-Elemente |
-| **Position** | Links im Header | Standard-Pattern |
-| **Pfad** | `/images/mila.svg` | Projektspezifisch |
-
-**Verhalten:**
-- Expanded: Logo + Club-Name
-- Collapsed: Logo zentriert (horizontal & vertikal)
-
-### 1.2 Toggle-Button
-
-| Eigenschaft | Wert | Begründung |
-|-------------|------|------------|
-| **Sichtbarkeit** | Nur Desktop (≥ lg) | Mobile nutzt Hamburger in Header |
-| **Position** | Rechts im Sidebar-Header | Schnell erreichbar |
-| **Icon (expanded)** | `hero-chevron-left` | Zeigt Collapse-Richtung |
-| **Icon (collapsed)** | `hero-chevron-right` | Zeigt Expand-Richtung |
-| **Größe** | `btn-sm btn-square` | Kompakt, icon-only |
-| **Variante** | `btn-ghost` | Dezent, nicht dominant |
-
-**Icon-Swap Strategie:**
-- Zwei separate `<.icon>` Elemente
-- CSS-Klassen: `.sidebar-expanded-icon` und `.sidebar-collapsed-icon`
-- CSS zeigt/versteckt basierend auf `[data-sidebar-expanded]`
-
-**ARIA:**
-- `aria-label="Toggle sidebar"`
-- `aria-expanded="true|false"` (via JavaScript)
-- `aria-controls="main-sidebar"`
-
-### 1.3 Menü-Items (Flat)
-
-**Expanded State:**
-- Icon (links) + Text-Label (rechts)
-- Standard DaisyUI menu styling
-- Gap: `gap-3` zwischen Icon und Text
-
-**Collapsed State:**
-- Nur Icon (zentriert)
-- Tooltip erscheint rechts (`tooltip-right`)
-- Tooltip-Text aus `data-tip` Attribut
-
-**Hover-Effekt:**
-- Einheitlich für expanded UND collapsed
-- Standard DaisyUI: `hover:bg-base-300`
-- Keine Custom-Styles
-
-**Liste der Menü-Items:**
-1. **Members** - `hero-users` - `/members`
-2. **Users** - `hero-user-circle` - `/users`
-3. **Custom Fields** - `hero-rectangle-group` - `/custom_fields`
-4. **Settings** - `hero-cog-6-tooth` - `#` (Placeholder)
-
-### 1.4 Nested Menu "Beiträge" (Contributions)
-
-**Problem:** Standard Menu-Item Pattern funktioniert nicht für verschachtelte Menüs.
-
-**Lösung:** Zwei unterschiedliche Darstellungen je nach State.
-
-#### Expanded State:
-```html
-<details class="expanded-menu-group">
-  <summary>
-    Icon + "Beiträge"
-  </summary>
-  <ul>
-    <li>Beitragsarten</li>
-    <li>Einstellungen</li>
-  </ul>
-</details>
-```
-
-**Eigenschaften:**
-- Native `<details>/<summary>` für auf/zuklappbar
-- Submenu eingerückt (`ml-4`)
-- Chevron-Icon rotiert automatisch (Browser-Standard)
-
-#### Collapsed State:
-```html
-<div class="collapsed-menu-group dropdown dropdown-right">
-  <button>Icon</button>
-  <ul class="dropdown-content">
-    <li class="menu-title">Beiträge</li>
-    <li>Beitragsarten</li>
-    <li>Einstellungen</li>
-  </ul>
-</div>
-```
-
-**Eigenschaften:**
-- DaisyUI `dropdown` mit `dropdown-right`
-- Flyout erscheint RECHTS vom Icon
-- Menu-Title zeigt "Beiträge"
-- Tooltip auf Button (collapsed)
-
-**Wichtig:**
-- Nur EIN Hover-Effekt (nicht doppelt)
-- CSS-Klassen `.expanded-menu-group` und `.collapsed-menu-group`
-- CSS zeigt/versteckt basierend auf `[data-sidebar-expanded]`
-
-**Submenu-Items:**
-1. **Beitragsarten** - `/contribution_types`
-2. **Einstellungen** - `/contribution_settings`
-
-### 1.5 Footer
-
-**Position:**
-- IMMER am unteren Ende der Sidebar
-- Flexbox: Navigation mit `flex-1`, Footer mit `mt-auto`
-
-**Komponenten:**
-
-#### 1.5.1 Language Selector
-- **Sichtbarkeit:** Nur expanded (`.expanded-only`)
-- **Typ:** `<select>` mit Form (POST zu `/locale`)
-- **Variante:** `select select-sm w-full`
-- **Optionen:** Deutsch (de), English (en)
-- **Funktion:** Auto-submit on change
-
-#### 1.5.2 Theme Toggle
-- **Sichtbarkeit:** Immer (expanded & collapsed)
-- **Layout:** Horizontal: Sun Icon + Toggle + Moon Icon
-- **Variante:** `toggle toggle-sm theme-controller`
-- **Funktion:** DaisyUI automatische Theme-Umschaltung
-- **Collapsed:** Zentriert horizontal
-
-#### 1.5.3 User Menu
-- **Typ:** DaisyUI `dropdown dropdown-top dropdown-end`
-- **Avatar:** Rund, erste Buchstabe der Email, zentriert
-- **Größe:** `w-8 h-8` (collapsed), `w-10 h-10` (expanded)
-- **Email:** Nur expanded sichtbar, `truncate`
-- **Dropdown-Items:**
-  1. Profile (`/users/:id`)
-  2. Logout (`/sign-out`)
-
-**Footer-Layout:**
-```
-┌─────────────────────────┐
-│ [Language Selector]     │ ← Nur expanded
-│ ☀️ [Toggle] 🌙          │ ← Immer
-│ [Avatar] [Email ▼]      │ ← Avatar immer, Email nur expanded
-└─────────────────────────┘
-```
-
-### 1.6 State Persistence
-
-**localStorage Key:** `sidebar-expanded`
-
-**Werte:**
-- `"true"` - Sidebar ist expanded (default)
-- `"false"` - Sidebar ist collapsed
-
-**data-attribute auf Root:**
-```html
-<div data-sidebar-expanded="true">
-```
-
-**Verhalten:**
-1. Beim Mount: Restore aus localStorage
-2. Beim Toggle: Update localStorage + data-attribute
-3. CSS reagiert auf data-attribute änderung
-
-### 1.7 Responsive Verhalten
-
-**Mobile (< lg / < 1024px):**
-- Standard DaisyUI Drawer Overlay
-- Hamburger-Icon in Mobile Header (außerhalb Sidebar)
-- Overlay verdunkelt Hintergrund
-- Click auf Overlay schließt Drawer
-- Sidebar: volle Breite `w-64` (16rem)
-- Toggle-Button in Sidebar: NICHT sichtbar
-
-**Desktop (≥ lg / ≥ 1024px):**
-- Fixed Sidebar (persistent)
-- `lg:drawer-open` forciert Drawer als sichtbar
-- Expanded: `w-64` (16rem)
-- Collapsed: `w-16` (4rem)
-- Smooth width transition: `300ms ease-in-out`
-- Toggle-Button in Sidebar: sichtbar
-- Mobile Header: NICHT sichtbar (`lg:hidden`)
-
----
-
-## 2. Wireframes (ASCII-Art)
-
-### 2.1 Desktop - Expanded State (w-64 / 16rem)
-
-```
-┌────────────────────────────────┐
-│  🏠 Club Name         [◀]      │ ← Header (Logo + Name + Toggle)
-├────────────────────────────────┤
-│                                │
-│  👥  Members                   │
-│  👤  Users                     │
-│  💰  Beiträge              ▼   │ ← Details/Summary (klappbar)
-│      ├─ Beitragsarten         │
-│      └─ Einstellungen          │
-│  ⚙️  Settings                  │
-│                                │
-│                                │
-│  (flex-1 - wächst)             │
-│                                │
-│                                │
-├────────────────────────────────┤
-│  [Deutsch ▼]                   │ ← Language Selector
-│  ☀️ [○] 🌙                     │ ← Theme Toggle
-│  (A) user@example.com  [▼]     │ ← User Menu (Avatar + Email)
-└────────────────────────────────┘
-    16rem (256px)
-```
-
-### 2.2 Desktop - Collapsed State (w-16 / 4rem)
-
-```
-┌──────┐
-│  🏠  │ ← Logo zentriert
-│  [▶] │ ← Toggle-Button
-├──────┤
-│      │
-│  👥  │ ← Tooltip: "Members"
-│  👤  │ ← Tooltip: "Users"
-│  💰  │ ← Dropdown öffnet rechts →
-│  ⚙️  │ ← Tooltip: "Settings"
-│      │
-│      │
-│      │ (flex-1)
-│      │
-│      │
-├──────┤
-│      │ ← Language Selector HIDDEN
-│ ☀️○🌙│ ← Theme Toggle (icons kleiner)
-│ (A)  │ ← Avatar zentriert (kein Email)
-└──────┘
-  4rem
-```
-
-**Dropdown-Verhalten (collapsed):**
-```
-┌──────┐             ┌─────────────────────┐
-│  👥  │             │                     │
-│  👤  │             │                     │
-│  💰  │────────────▶│ Beiträge            │
-│  ⚙️  │             │ ─────────────────── │
-│      │             │ • Beitragsarten     │
-└──────┘             │ • Einstellungen     │
-                     └─────────────────────┘
-```
-
-### 2.3 Mobile mit Overlay (< lg / < 1024px)
-
-**Geschlossen:**
-```
-┌─────────────────────────────┐
-│ [☰] Club Name               │ ← Mobile Header (außerhalb Sidebar)
-├─────────────────────────────┤
-│                             │
-│   Main Content              │
-│                             │
-└─────────────────────────────┘
-```
-
-**Geöffnet:**
-```
-┌────────────────────────────────┐
-│  🏠 Club Name                  │ ◀──────── Sidebar (w-64)
-├────────────────────────────────┤          Overlay: bg-black/50
-│                                │
-│  👥  Members                   │
-│  👤  Users                     │
-│  💰  Beiträge              ▼   │
-│      ├─ Beitragsarten         │
-│      └─ Einstellungen          │
-│  ⚙️  Settings                  │
-│                                │
-│  (flex-1)                      │
-│                                │
-├────────────────────────────────┤
-│  [Deutsch ▼]                   │
-│  ☀️ [○] 🌙                     │
-│  (A) user@example.com  [▼]     │
-└────────────────────────────────┘
-    │
-    └─ Kein Toggle-Button (nur expanded)
-```
-
-**Hinweis:** Mobile Sidebar ist IMMER expanded (kein collapsed state).
-
----
-
-## 3. Benötigte DaisyUI-Komponenten
-
-### 3.1 Layout-Komponenten
-
-| Komponente | Verwendung | Klassen |
-|------------|------------|---------|
-| **drawer** | Basis-Container | `drawer`, `lg:drawer-open` |
-| **drawer-toggle** | Hidden Checkbox (Mobile) | `drawer-toggle` |
-| **drawer-content** | Main Content Area | `drawer-content`, `flex flex-col` |
-| **drawer-side** | Sidebar Container | `drawer-side` |
-| **drawer-overlay** | Mobile Overlay (Click to close) | `drawer-overlay`, `lg:hidden` |
-
-### 3.2 Navigation-Komponenten
-
-| Komponente | Verwendung | Klassen |
-|------------|------------|---------|
-| **menu** | Navigation Liste | `menu`, `flex-1`, `w-full`, `p-2` |
-| **menu-title** | Abschnitts-Überschrift | `menu-title` |
-| **tooltip** | Icon-Tooltips (collapsed) | `tooltip`, `tooltip-right` |
-
-### 3.3 Interaktive Komponenten
-
-| Komponente | Verwendung | Klassen |
-|------------|------------|---------|
-| **btn** | Toggle-Button | `btn`, `btn-ghost`, `btn-sm`, `btn-square` |
-| **select** | Language Selector | `select`, `select-sm`, `w-full` |
-| **toggle** | Theme Switch | `toggle`, `toggle-sm`, `theme-controller` |
-| **dropdown** | User Menu & Nested Menu | `dropdown`, `dropdown-top`, `dropdown-end`, `dropdown-right` |
-| **avatar** | User Avatar | `avatar`, `avatar-placeholder` |
-| **navbar** | Mobile Header | `navbar`, `bg-base-100`, `shadow-sm`, `lg:hidden` |
-
-### 3.4 Utility-Komponenten
-
-| Komponente | Verwendung | Klassen |
-|------------|------------|---------|
-| **Flexbox** | Layout-Struktur | `flex`, `flex-col`, `flex-1`, `items-center`, `justify-center` |
-| **Spacing** | Gaps & Padding | `gap-2`, `gap-3`, `gap-4`, `p-2`, `p-4`, `mt-auto` |
-| **Sizing** | Widths & Heights | `w-64`, `w-16`, `w-8`, `h-8`, `size-5`, `size-8`, `min-h-screen` |
-| **Colors** | Backgrounds | `bg-base-100`, `bg-base-200`, `bg-base-300`, `bg-neutral` |
-| **Typography** | Text Styles | `text-lg`, `text-sm`, `font-bold`, `truncate` |
-| **Borders** | Dividers | `border-t`, `border-b`, `border-base-300` |
-| **Z-Index** | Layering | `z-10`, `z-20`, `z-50` |
-
-### 3.5 Responsive Modifiers
-
-| Modifier | Breakpoint | Verwendung |
-|----------|------------|------------|
-| **lg:** | ≥ 1024px | Desktop-spezifische Styles |
-| **lg:hidden** | < 1024px | Mobile Header, Overlay |
-| **lg:flex** | ≥ 1024px | Toggle-Button in Sidebar |
-| **lg:drawer-open** | ≥ 1024px | Persistent Desktop Sidebar |
-
----
-
-## 4. CSS-Strategie
-
-### 4.1 Prinzipien
-
-✅ **Erlaubt:**
-- Tailwind `@apply` Direktiven
-- Standard DaisyUI Komponenten-Klassen
-- CSS attribute selectors (`[data-*]`)
-- Tailwind responsive modifiers (`lg:`, `md:`)
-- Standard pseudo-classes (`:hover`, `:focus`)
-
-❌ **NICHT erlaubt:**
-- Custom CSS Variants (`@custom-variant`)
-- Custom Tailwind Plugin Variants
-- Complex CSS Selectors (mehr als 3 Ebenen tief)
-- `!important` (außer in extremen Edge-Cases)
-
-### 4.2 State Management via Data-Attribute
-
-**Selector Pattern:**
-```css
-[data-sidebar-expanded="false"] .sidebar .element {
-  /* Collapsed State Styles */
-}
-```
-
-**Beispiel-Implementierung in `app.css`:**
-
-```css
-/* ============================================
-   Sidebar Base Styles
-   ============================================ */
-
-.sidebar {
-  @apply flex flex-col bg-base-200 min-h-screen;
-  @apply transition-[width] duration-300 ease-in-out;
-  width: 16rem; /* w-64 - Expanded */
-}
-
-/* Collapsed State */
-[data-sidebar-expanded="false"] .sidebar {
-  width: 4rem; /* w-16 - Collapsed */
-}
-
-/* ============================================
-   Text Labels - Fade Out in Collapsed
-   ============================================ */
-
-.menu-label {
-  @apply transition-all duration-200 whitespace-nowrap;
-  @apply opacity-100;
-}
-
-[data-sidebar-expanded="false"] .sidebar .menu-label {
-  @apply opacity-0 w-0 overflow-hidden pointer-events-none;
-}
-
-/* ============================================
-   Toggle Button Icon Swap
-   ============================================ */
-
-.sidebar-expanded-icon {
-  @apply block;
-}
-
-.sidebar-collapsed-icon {
-  @apply hidden;
-}
-
-[data-sidebar-expanded="false"] .sidebar .sidebar-expanded-icon {
-  @apply hidden;
-}
-
-[data-sidebar-expanded="false"] .sidebar .sidebar-collapsed-icon {
-  @apply block;
-}
-
-/* ============================================
-   Nested Menu - Show/Hide Based on State
-   ============================================ */
-
-.expanded-menu-group {
-  @apply block;
-}
-
-.collapsed-menu-group {
-  @apply hidden;
-}
-
-[data-sidebar-expanded="false"] .sidebar .expanded-menu-group {
-  @apply hidden;
-}
-
-[data-sidebar-expanded="false"] .sidebar .collapsed-menu-group {
-  @apply block;
-}
-
-/* ============================================
-   Elements Only Visible in Expanded State
-   ============================================ */
-
-.expanded-only {
-  @apply block transition-opacity duration-200;
-}
-
-[data-sidebar-expanded="false"] .sidebar .expanded-only {
-  @apply hidden;
-}
-
-/* ============================================
-   Tooltips - Only Show in Collapsed State
-   ============================================ */
-
-.sidebar .tooltip::before,
-.sidebar .tooltip::after {
-  @apply opacity-0 pointer-events-none;
-}
-
-[data-sidebar-expanded="false"] .sidebar .tooltip:hover::before,
-[data-sidebar-expanded="false"] .sidebar .tooltip:hover::after {
-  @apply opacity-100;
-}
-
-/* ============================================
-   Menu Item Alignment - Center in Collapsed
-   ============================================ */
-
-[data-sidebar-expanded="false"] .sidebar .menu > li > a,
-[data-sidebar-expanded="false"] .sidebar .menu > li > button {
-  @apply justify-center px-0;
-}
-```
-
-### 4.3 Responsive Strategie
-
-**Mobile (< lg):**
-- Standard DaisyUI Drawer (checkbox-basiert)
-- Keine custom State-Management
-- Sidebar immer `w-64` wenn geöffnet
-
-**Desktop (≥ lg):**
-- `lg:drawer-open` für Persistence
-- Custom State-Management via data-attribute
-- Width-Transition: `w-64` ↔ `w-16`
-
-**Keine Konflikte:**
-- `lg:drawer-open` wird NICHT durch `data-sidebar-expanded` beeinflusst
-- Collapsed State nur auf Desktop relevant
-
----
-
-## 5. State-Management-Strategie
-
-### 5.1 JavaScript Hook: `SidebarState`
-
-**Datei:** `assets/js/app.js`
-
-**Verantwortlichkeiten:**
-1. **Mount:** Restore State aus localStorage
-2. **Toggle:** Wechsle State, update localStorage + data-attribute
-3. **ARIA:** Update `aria-expanded` auf Toggle-Button
-4. **Global Function:** Expose `window.toggleSidebar()`
-
-**Implementierung:**
-
-```javascript
-Hooks.SidebarState = {
-  mounted() {
-    // Restore state from localStorage
-    const expanded = localStorage.getItem('sidebar-expanded') !== 'false';
-    this.setSidebarState(expanded);
-    
-    // Expose toggle function globally
-    window.toggleSidebar = () => {
-      const current = this.el.dataset.sidebarExpanded === 'true';
-      this.setSidebarState(!current);
-    };
-  },
-  
-  setSidebarState(expanded) {
-    // Update data-attribute (CSS reacts to this)
-    this.el.dataset.sidebarExpanded = expanded;
-    
-    // Persist to localStorage
-    localStorage.setItem('sidebar-expanded', expanded);
-    
-    // Update ARIA for accessibility
-    const toggleBtn = document.getElementById('sidebar-toggle');
-    if (toggleBtn) {
-      toggleBtn.setAttribute('aria-expanded', expanded);
-    }
-  },
-  
-  destroyed() {
-    // Cleanup
-    delete window.toggleSidebar;
-  }
-};
-```
-
-### 5.2 localStorage Schema
-
-**Key:** `sidebar-expanded`
-
-**Values:**
-- `"true"` (string) - Expanded
-- `"false"` (string) - Collapsed
-
-**Default:** `"true"` (wenn Key nicht existiert)
-
-**Warum String?**
-- localStorage speichert nur Strings
-- Vermeidet Parsing-Fehler
-- Einfache Vergleiche
-
-### 5.3 CSS Reactions
-
-**Automatisch via Attribute Selector:**
-
-```html
-<!-- Expanded -->
-<div data-sidebar-expanded="true">
-  <aside class="sidebar"> <!-- width: 16rem -->
-    <span class="menu-label">Members</span> <!-- visible -->
-  </aside>
-</div>
-
-<!-- Collapsed -->
-<div data-sidebar-expanded="false">
-  <aside class="sidebar"> <!-- width: 4rem -->
-    <span class="menu-label">Members</span> <!-- hidden -->
-  </aside>
-</div>
-```
-
-**Vorteile:**
-- Keine JavaScript DOM-Manipulation
-- CSS Transitions funktionieren automatisch
-- Performance: GPU-accelerated
-- Wartbar: State ist zentral
-
-### 5.4 Event Flow
-
-```
-User clicks Toggle-Button
-         │
-         ▼
-onclick="toggleSidebar()"
-         │
-         ▼
-JavaScript Hook: setSidebarState(!current)
-         │
-         ├─▶ Update data-attribute
-         ├─▶ Save to localStorage
-         └─▶ Update aria-expanded
-         │
-         ▼
-CSS Reactions
-         │
-         ├─▶ Sidebar width transition
-         ├─▶ Labels fade out/in
-         ├─▶ Icons show/hide
-         └─▶ Tooltips enable/disable
-         │
-         ▼
-User sees smooth animation
-```
-
-**Keine Komplexität:**
-- ❌ Kein tabindex management
-- ❌ Kein focus management
-- ❌ Keine event listener cleanup
-- ❌ Keine checkbox manipulation
-
----
-
-## 6. Komponentenstruktur
-
-### 6.1 Hierarchie
-
-```
-app (layouts.ex)
-├── Mobile Header (lg:hidden)
-│   ├── Hamburger-Icon (drawer-toggle label)
-│   └── Club Name
-│
-└── Sidebar (drawer-side)
-    ├── sidebar_header
-    │   ├── Logo (size-8)
-    │   ├── Club Name (.menu-label)
-    │   └── Toggle-Button (hidden lg:flex)
-    │       ├── Icon: Chevron-Left (.sidebar-expanded-icon)
-    │       └── Icon: Chevron-Right (.sidebar-collapsed-icon)
-    │
-    ├── sidebar_menu (flex-1)
-    │   ├── menu_item: Members
-    │   ├── menu_item: Users
-    │   ├── menu_group: Beiträge (.expanded-menu-group + .collapsed-menu-group)
-    │   │   ├── Expanded: <details><summary>
-    │   │   ├── Collapsed: <dropdown>
-    │   │   └── Submenu:
-    │   │       ├── menu_subitem: Beitragsarten
-    │   │       └── menu_subitem: Einstellungen
-    │   └── menu_item: Settings
-    │
-    └── sidebar_footer (mt-auto)
-        ├── Language Selector (.expanded-only)
-        ├── Theme Toggle (immer)
-        └── User Menu (dropdown-top dropdown-end)
-            ├── Avatar + Email
-            └── Dropdown:
-                ├── Profile
-                └── Logout
-```
-
-### 6.2 Elixir Komponenten
-
-**Datei:** `lib/mv_web/components/layouts/sidebar.ex`
-
-**Funktionen:**
-1. `sidebar/1` - Root (deprecated, wird durch layouts.ex ersetzt)
-2. `sidebar_content/1` - Wrapper für alle Sidebar-Inhalte
-3. `sidebar_header/1` - Logo + Name + Toggle
-4. `sidebar_menu/1` - Navigation Container
-5. `menu_item/1` - Einfacher Menü-Eintrag
-6. `menu_group/1` - Nested Menu Container
-7. `menu_subitem/1` - Submenu-Eintrag
-8. `sidebar_footer/1` - Footer Container
-9. `theme_toggle/1` - Theme Switch
-10. `user_menu/1` - User Dropdown
-
-### 6.3 Attribute Definition
-
-**Beispiel: `menu_item/1`**
-
-```elixir
-attr :href, :string, required: true, doc: "Navigation path"
-attr :icon, :string, required: true, doc: "Heroicon name"
-attr :label, :string, required: true, doc: "Menu item label"
-attr :active, :boolean, default: false, doc: "Highlight as active"
-
-defp menu_item(assigns) do
-  ~H"""
-  <li role="none">
-    <.link
-      navigate={@href}
-      class={[
-        "flex items-center gap-3",
-        "tooltip tooltip-right",
-        @active && "active"
-      ]}
-      data-tip={@label}
-      role="menuitem"
-    >
-      <.icon name={@icon} class="size-5 shrink-0" aria-hidden="true" />
-      <span class="menu-label">{@label}</span>
-    </.link>
-  </li>
-  """
-end
-```
-
----
-
-## 7. Accessibility (WCAG 2.1 Level AA)
-
-### 7.1 Semantic HTML
-
-| Element | Semantik | ARIA |
-|---------|----------|------|
-| `<nav>` | Hauptnavigation | `aria-label="Main navigation"` |
-| `<ul role="menubar">` | Menu Container | `role="menubar"` |
-| `<li role="none">` | List Item (deaktiviert) | `role="none"` |
-| `<a role="menuitem">` | Menu Item | `role="menuitem"` |
-| `<button aria-haspopup>` | Dropdown Trigger | `aria-haspopup="menu"` |
-| `<details>` | Expandable Section | Native HTML (kein ARIA nötig) |
-
-### 7.2 ARIA-Attribute
-
-**Toggle-Button:**
-```html
-<button
-  aria-label="Toggle sidebar"
-  aria-expanded="true"
-  aria-controls="main-sidebar"
->
-```
-
-**User Menu:**
-```html
-<button
-  aria-label="User menu"
-  aria-haspopup="menu"
-  aria-expanded="false"
->
-```
-
-**Icons (dekorativ):**
-```html
-<.icon name="hero-users" aria-hidden="true" />
-```
-
-**Tooltips:**
-```html
-<a data-tip="Members" class="tooltip tooltip-right">
-  <!-- Tooltip ist visuell, nicht für Screen Reader -->
-</a>
-```
-
-### 7.3 Keyboard Navigation
-
-**Fokussierbare Elemente:**
-- Toggle-Button (Space/Enter)
-- Menu-Items (Enter)
-- User-Menu-Button (Space/Enter, Arrows für Navigation)
-- Dropdowns (Tab, Arrows, Escape)
-- Theme-Toggle (Space)
-- Language-Selector (Arrows, Enter)
-
-**Focus-Indikatoren:**
-```css
-.focus:outline-none {
-  @apply ring-2 ring-primary ring-offset-2;
-}
-```
-
-**Escape-Taste:**
-- Schließt User-Menu-Dropdown
-- Schließt Beiträge-Dropdown (collapsed)
-- Schließt Mobile-Drawer
-
-### 7.4 Color Contrast
-
-**Mindestkontrast:** 4.5:1 (normal text), 3:1 (large text)
-
-**DaisyUI Colors (geprüft):**
-- `text-base-content` auf `bg-base-200`: ✅ 7.2:1
-- `text-primary` auf `bg-base-100`: ✅ 5.1:1
-- `text-neutral-content` auf `bg-neutral`: ✅ 8.5:1
-
-### 7.5 Screen Reader Testing
-
-**Tools:**
-- NVDA (Windows)
-- VoiceOver (Mac)
-- JAWS (Windows)
-
-**Erwartetes Verhalten:**
-- "Main navigation, navigation landmark"
-- "Members, link, menu item"
-- "Toggle sidebar, button, expanded"
-- "User menu, button, has popup"
-
----
-
-## 8. Performance-Überlegungen
-
-### 8.1 CSS Transitions
-
-**Optimiert:**
-- `transition-[width]` - GPU-accelerated
-- `duration-300` - Wahrnehmbar, aber schnell
-- `ease-in-out` - Smooth Start/Stop
-
-**Vermeiden:**
-- `transition-all` - Zu generisch, Performance-Impact
-- Transitions auf `height: auto` - Nicht smooth
-
-### 8.2 JavaScript
-
-**Minimal:**
-- Hook läuft nur beim Mount
-- Toggle ist synchron (keine async Operations)
-- Keine Event-Listener-Lawine
-- Cleanup in `destroyed()`
-
-**localStorage:**
-- Synchron, aber schnell (Key/Value-Store)
-- Nur bei Toggle geschrieben (nicht bei jedem Render)
-
-### 8.3 CSS Paint
-
-**Minimierte Repaints:**
-- Width-Änderung triggert nur Reflow der Sidebar
-- Content-Bereich passt sich automatisch an (Flexbox)
-- Keine Layout-Thrashing
-
----
-
-## 9. Browser-Kompatibilität
-
-### 9.1 Unterstützte Browser
-
-| Browser | Mindestversion | Notizen |
-|---------|---------------|---------|
-| **Chrome** | 90+ | Vollständig unterstützt |
-| **Edge** | 90+ | Chromium-basiert |
-| **Firefox** | 88+ | Vollständig unterstützt |
-| **Safari** | 14+ | CSS-Transitions funktionieren |
-
-### 9.2 Features mit Fallbacks
-
-**CSS Grid/Flexbox:**
-- Alle Browser unterstützen
-
-**CSS Custom Properties:**
-- Alle Browser unterstützen (DaisyUI Themes)
-
-**localStorage:**
-- Alle Browser unterstützen
-- Fallback: State nur in Session
-
-**data-attributes:**
-- Alle Browser unterstützen
-
----
-
-## 10. Testing-Strategie
-
-### 10.1 Unit Tests
-
-**Komponenten-Tests:**
-```elixir
-describe "sidebar_header/1" do
-  test "renders logo with correct size"
-  test "renders club name"
-  test "renders toggle button with both icons"
-end
-
-describe "menu_item/1" do
-  test "renders icon and label"
-  test "has tooltip with correct text"
-  test "has correct link"
-end
-
-describe "menu_group/1" do
-  test "renders expanded menu group"
-  test "renders collapsed menu group"
-  test "renders submenu items"
-end
-```
-
-### 10.2 Integration Tests
-
-**State-Management:**
-```elixir
-describe "sidebar state management" do
-  test "sidebar starts expanded by default"
-  test "toggle button changes state"
-  test "state persists across page reloads"
-end
-```
-
-### 10.3 Visual Regression Tests
-
-**Manuell (Checkliste):**
-- [ ] Desktop Expanded: Screenshot
-- [ ] Desktop Collapsed: Screenshot
-- [ ] Mobile Closed: Screenshot
-- [ ] Mobile Open: Screenshot
-- [ ] Toggle Transition: Video
-- [ ] Nested Menu (expanded): Screenshot
-- [ ] Nested Menu (collapsed dropdown): Screenshot
-- [ ] Footer Position: Screenshot
-
-### 10.4 Accessibility Tests
-
-**Tools:**
-- Lighthouse (Chrome DevTools)
-- axe DevTools Extension
-- WAVE Extension
-
-**Manuell:**
-- Keyboard-Navigation (nur Tastatur)
-- Screen-Reader (NVDA/VoiceOver)
-- Zoom (200% / 400%)
-- High-Contrast-Mode
-
----
-
-## 11. Migrations-Plan (von aktueller Implementierung)
-
-### 11.1 Zu entfernen
-
-**CSS:**
-- [ ] Alle `@custom-variant is-drawer-*` Definitionen
-- [ ] Alle `.is-drawer-close:*` Klassen
-- [ ] Alle `.is-drawer-open:*` Klassen
-
-**HTML:**
-- [ ] Inline `onclick` Handler (durch `toggleSidebar()` ersetzen)
-- [ ] Magic IDs (durch konsistente Naming ersetzen)
-
-**JavaScript:**
-- [ ] Komplexe Tabindex-Management-Logik
-- [ ] Event-Listener für Checkbox
-- [ ] Focus-Management (außer ARIA)
-
-### 11.2 Zu ergänzen
-
-**CSS:**
-- [ ] `[data-sidebar-expanded]` Selektoren
-- [ ] `.menu-label` Klasse
-- [ ] `.sidebar-expanded-icon` / `.sidebar-collapsed-icon`
-- [ ] `.expanded-menu-group` / `.collapsed-menu-group`
-- [ ] `.expanded-only`
-
-**HTML:**
-- [ ] Logo-Element
-- [ ] Toggle-Button mit Icon-Swap
-- [ ] `data-sidebar-expanded` auf root
-- [ ] `phx-hook="SidebarState"` auf root
-
-**JavaScript:**
-- [ ] `Hooks.SidebarState` Hook
-- [ ] `window.toggleSidebar()` Function
-
-### 11.3 Zu prüfen/behalten
-
-**DaisyUI:**
-- [x] drawer Pattern (korrekt)
-- [x] drawer-toggle (Mobile)
-- [x] lg:drawer-open (Desktop)
-- [x] drawer-overlay (Mobile)
-
-**Accessibility:**
-- [x] ARIA-Labels (größtenteils korrekt)
-- [x] role Attributes (korrekt)
-- [x] Focus-Indikatoren (korrekt)
-
----
-
-## 12. Risiken und Mitigations
-
-### 12.1 Identifizierte Risiken
-
-| Risiko | Wahrscheinlichkeit | Impact | Mitigation |
-|--------|-------------------|--------|------------|
-| **CSS-Transitions flackern** | Mittel | Mittel | Pre-testing, GPU-Acceleration |
-| **localStorage nicht verfügbar** | Niedrig | Niedrig | Try/Catch, Fallback auf Session |
-| **Nested Menu doppelter Hover** | Mittel | Niedrig | CSS Specificity prüfen |
-| **Mobile Drawer schließt nicht** | Niedrig | Hoch | DaisyUI-Standard verwenden |
-| **Tooltip überlappen Content** | Mittel | Niedrig | z-index Management |
-
-### 12.2 Browser-spezifische Risks
-
-**Safari:**
-- Flex-Gap ältere Versionen: Fallback mit margin
-
-**Firefox:**
-- Scrollbar-Styling: Akzeptieren (nicht kritisch)
-
----
-
-## 13. Wartung und Erweiterbarkeit
-
-### 13.1 Neues Menu-Item hinzufügen
-
-```elixir
-# In sidebar_menu/1 hinzufügen:
-<.menu_item 
-  href={~p"/new-feature"} 
-  icon="hero-sparkles" 
-  label={gettext("New Feature")} 
-/>
-```
-
-### 13.2 Neues Nested Menu hinzufügen
-
-```elixir
-<.menu_group 
-  icon="hero-folder" 
-  label={gettext("Documents")}
->
-  <.menu_subitem href={~p"/docs/contracts"} label={gettext("Contracts")} />
-  <.menu_subitem href={~p"/docs/invoices"} label={gettext("Invoices")} />
-</.menu_group>
-```
-
-### 13.3 CSS-Anpassungen
-
-**Sidebar-Breite ändern:**
-```css
-.sidebar {
-  width: 18rem; /* statt 16rem */
-}
-
-[data-sidebar-expanded="false"] .sidebar {
-  width: 5rem; /* statt 4rem */
-}
-```
-
-**Transition-Dauer ändern:**
-```css
-.sidebar {
-  @apply transition-[width] duration-500; /* statt 300ms */
-}
-```
-
----
-
-## 14. Abnahmekriterien
-
-### 14.1 Funktional
-
-- [ ] Logo ist immer 32px groß (expanded & collapsed)
-- [ ] Toggle-Button wechselt Icon (Chevron-Left ↔ Right)
-- [ ] Menü-Items zeigen Icons + Labels (expanded)
-- [ ] Menü-Items zeigen nur Icons mit Tooltips (collapsed)
-- [ ] Nested Menu: Details (expanded), Dropdown (collapsed)
-- [ ] Footer am unteren Ende (Flexbox)
-- [ ] Language-Selector nur expanded
-- [ ] Theme-Toggle immer sichtbar
-- [ ] User-Avatar zentriert, erste Buchstabe
-- [ ] State in localStorage gespeichert
-- [ ] State bleibt nach Reload erhalten
-- [ ] Mobile: Hamburger öffnet Overlay-Drawer
-- [ ] Mobile: Overlay schließt Drawer
-
-### 14.2 Technisch
-
-- [ ] Keine Custom CSS Variants verwendet
-- [ ] Nur Tailwind + DaisyUI Klassen
-- [ ] `data-sidebar-expanded` auf root
-- [ ] CSS reagiert auf data-attribute
-- [ ] JavaScript Hook implementiert
-- [ ] localStorage funktioniert
-- [ ] Keine Console-Errors
-- [ ] Keine Console-Warnings
-- [ ] Keine duplicate IDs
-
-### 14.3 Visuell
-
-- [ ] Smooth width transition (300ms)
-- [ ] Labels fade smooth out/in
-- [ ] Keine Layout-Shifts
-- [ ] Keine Horizontal-Scrollbar
-- [ ] Kein Flicker bei Transitions
-- [ ] Hover-Effekte einheitlich
-- [ ] Footer klebt am unteren Ende
-- [ ] Responsive Breakpoints funktionieren
-
-### 14.4 Accessibility
-
-- [ ] Alle ARIA-Attribute korrekt
-- [ ] Keyboard-Navigation funktioniert
-- [ ] Screen-Reader-Test bestanden
-- [ ] Color-Contrast ≥ 4.5:1
-- [ ] Focus-Indikatoren sichtbar
-- [ ] Lighthouse Score ≥ 95
-
-### 14.5 Performance
-
-- [ ] Keine Performance-Warnungen
-- [ ] CSS-Transitions GPU-accelerated
-- [ ] localStorage synchron
-- [ ] Keine Memory-Leaks
-
----
-
-## 15. Referenzen
-
-### 15.1 Interne Dokumente
-
-- `docs/sidebar-analysis-current-state.md` - Ist-Zustand Analyse
-- `docs/daisyui-drawer-pattern.md` - DaisyUI Pattern Docs
-- `docs/umsetzung-sidebar.md` - Implementierungs-Anleitung
-- `CODE_GUIDELINES.md` - Projekt-Konventionen
-
-### 15.2 Externe Dokumentation
-
-- [DaisyUI Drawer](https://daisyui.com/components/drawer/)
-- [DaisyUI Menu](https://daisyui.com/components/menu/)
-- [DaisyUI Dropdown](https://daisyui.com/components/dropdown/)
-- [Tailwind CSS Transitions](https://tailwindcss.com/docs/transition-property)
-- [WCAG 2.1 Guidelines](https://www.w3.org/WAI/WCAG21/quickref/)
-- [MDN: data-* attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*)
-
-### 15.3 Design-Referenzen
-
-- [Phoenix LiveView Docs](https://hexdocs.pm/phoenix_live_view/) - Navigation Pattern
-- [GitHub Sidebar](https://github.com/) - Collapsed Icon Pattern
-- [Discord Sidebar](https://discord.com/) - Tooltip Pattern
-- [VS Code Sidebar](https://code.visualstudio.com/) - Toggle Icon Pattern
-
----
-
-## 16. Change Log
-
-| Version | Datum | Änderungen | Autor |
-|---------|-------|------------|-------|
-| 2.0 | 2025-12-16 | Initiale Version nach Analyse | Cursor AI |
-
----
-
-## 17. Appendix
-
-### A. DaisyUI Drawer Pattern (Kurzreferenz)
-
-```html
-<div class="drawer lg:drawer-open">
-  <input id="drawer" type="checkbox" class="drawer-toggle" />
-  
-  <div class="drawer-content">
-    <!-- Mobile Header -->
-    <label for="drawer" class="lg:hidden">Open</label>
-    <!-- Main Content -->
-  </div>
-  
-  <div class="drawer-side">
-    <label for="drawer" class="drawer-overlay lg:hidden"></label>
-    <aside class="sidebar">
-      <!-- Sidebar Content -->
-    </aside>
-  </div>
-</div>
-```
-
-### B. CSS Selector Beispiele
-
-```css
-/* Expanded (default) */
-.sidebar { width: 16rem; }
-.menu-label { opacity: 1; }
-.expanded-only { display: block; }
-
-/* Collapsed */
-[data-sidebar-expanded="false"] .sidebar { width: 4rem; }
-[data-sidebar-expanded="false"] .sidebar .menu-label { opacity: 0; }
-[data-sidebar-expanded="false"] .sidebar .expanded-only { display: none; }
-```
-
-### C. localStorage Beispiel
-
-```javascript
-// Save
-localStorage.setItem('sidebar-expanded', 'true');
-
-// Load
-const expanded = localStorage.getItem('sidebar-expanded') !== 'false';
-
-// Check
-if (localStorage.getItem('sidebar-expanded') === 'false') {
-  // Collapsed
-}
-```
-
-### D. ARIA Beispiele
-
-```html
-<!-- Toggle-Button -->
-<button
-  id="sidebar-toggle"
-  aria-label="Toggle sidebar"
-  aria-expanded="true"
-  aria-controls="main-sidebar"
->
-
-<!-- Menu -->
-<nav id="main-sidebar" aria-label="Main navigation">
-  <ul role="menubar">
-    <li role="none">
-      <a role="menuitem">Members</a>
-    </li>
-  </ul>
-</nav>
-
-<!-- Dropdown -->
-<button aria-haspopup="menu" aria-expanded="false">
-  User Menu
-</button>
-```
-
----
-
-**Ende der Spezifikation**
-
-
-
diff --git a/docs/umsetzung-sidebar.md b/docs/umsetzung-sidebar.md
deleted file mode 100644
index b77093c..0000000
--- a/docs/umsetzung-sidebar.md
+++ /dev/null
@@ -1,1579 +0,0 @@
-# Sidebar Neuimplementierung - Schritt-für-Schritt Anleitung
-
-**Erstellt:** 2025-12-16  
-**Last Updated:** 2026-01-13  
-**Status:** ⚠️ Veraltet - Sidebar wurde bereits implementiert (2026-01-12, PR #260)  
-**Strategie:** Sequenzielle Tasks mit frischem Kontext pro Task
-
-> **Hinweis:** Diese Implementierungs-Anleitung wurde durch die tatsächliche Implementierung obsolet. Die Sidebar wurde erfolgreich implementiert. Siehe `sidebar-requirements-v2.md` für die finale Spezifikation.
-
----
-
-## Übersicht
-
-~~Diese Anleitung zerlegt die komplexe Sidebar-Implementierung in 13 beherrschbare Subtasks. Jeder Task wird mit einem frischen Cursor-Agent im Auto-Mode (oder Sonnet 4.5 für komplexere Aufgaben) umgesetzt.~~
-
-**Status:** Diese Implementierungs-Anleitung wurde durch die tatsächliche Implementierung obsolet. Die Sidebar ist jetzt vollständig implementiert und funktionsfähig.
-
----
-
-## Task 1: Vorbereitung & Analyse
-
-**Agent:** Sonnet 4.5  
-**Geschätzte Dauer:** 10 Minuten
-
-### Prompt:
-
-```
-Analysiere die aktuelle Sidebar-Implementierung in diesem Projekt und erstelle einen detaillierten Bericht:
-
-1. Liste alle Dateien auf, die mit der Sidebar zusammenhängen
-2. Dokumentiere die aktuelle Struktur (HTML, CSS, JavaScript)
-3. Identifiziere alle Custom-CSS-Klassen und Variants
-4. Dokumentiere die JavaScript-Hooks und ihre Funktionen
-5. Erstelle eine Liste aller Dependencies (DaisyUI-Komponenten, Tailwind-Klassen)
-
-Speichere den Bericht als `docs/sidebar-analysis-current-state.md`
-
-Ziel: Vollständiges Verständnis des Ist-Zustands vor der Neuimplementierung.
-```
-
-### Acceptance Criteria:
-- ✅ Alle Sidebar-bezogenen Dateien identifiziert
-- ✅ Aktuelle Implementierung dokumentiert
-- ✅ Custom CSS und JavaScript dokumentiert
-- ✅ Bericht als Markdown gespeichert
-
----
-
-## Task 2: DaisyUI Drawer Pattern Recherche
-
-**Agent:** Sonnet 4.5 (wegen Web-Recherche)  
-**Geschätzte Dauer:** 15 Minuten
-
-### Prompt:
-
-```
-Recherchiere und dokumentiere das Standard DaisyUI Drawer Pattern:
-
-1. Lies die DaisyUI Dokumentation für die `drawer` Komponente
-2. Finde Best-Practice-Beispiele für responsive Sidebars mit DaisyUI
-3. Dokumentiere, wie drawer-toggle funktioniert
-4. Dokumentiere, wie drawer-open für Desktop funktioniert
-5. Erstelle Code-Beispiele für:
-   - Mobile Drawer (overlay)
-   - Desktop Sidebar (persistent)
-   - Kombination beider
-
-Speichere die Dokumentation als `docs/daisyui-drawer-pattern.md`
-
-Wichtig: Verwende KEINE custom CSS variants - nur Standard DaisyUI und Tailwind.
-```
-
-### Acceptance Criteria:
-- ✅ DaisyUI Drawer Pattern dokumentiert
-- ✅ Mobile und Desktop Patterns verstanden
-- ✅ Code-Beispiele vorhanden
-- ✅ Dokumentation gespeichert
-
----
-
-## Task 3: Anforderungsdefinition & Design
-
-**Agent:** Sonnet 4.5  
-**Geschätzte Dauer:** 20 Minuten
-
-### Prompt:
-
-```
-Erstelle eine präzise Anforderungsspezifikation für die Sidebar basierend auf folgenden Anforderungen:
-
-## Funktionale Anforderungen:
-
-1. **Logo:** 
-   - Immer sichtbar, gleiche Größe (32px / size-8)
-   - Sowohl im expanded als auch collapsed State
-   - Keine zwei verschiedenen Logo-Elemente
-
-2. **Toggle-Button:**
-   - Nur auf Desktop sichtbar
-   - Icon-Swap: Chevron-left (expanded) ↔ Chevron-right (collapsed)
-   - Immer erreichbar
-
-3. **Menü-Items:**
-   - Expanded: Icons + Text-Labels
-   - Collapsed: Nur Icons mit Tooltips (tooltip-right)
-   - Einheitlicher Hover-Effekt
-
-4. **Nested Menu "Beiträge":**
-   - Expanded: Standard <details> mit <summary>
-   - Collapsed: DaisyUI dropdown dropdown-right
-   - Nur EIN Hover-Effekt, kein doppelter
-
-5. **Footer:**
-   - IMMER am unteren Ende der Sidebar (via Flexbox)
-   - Theme-Toggle (immer sichtbar)
-   - Language-Selector (nur expanded)
-   - User-Menu mit Avatar (dropdown-top dropdown-end)
-   - Avatar: Erste Buchstabe, zentriert
-
-6. **State Persistence:**
-   - localStorage: 'sidebar-expanded'
-   - data-attribute: [data-sidebar-expanded="true"|"false"]
-
-7. **Responsive:**
-   - Mobile: Standard DaisyUI Drawer Overlay
-   - Desktop: Fixed Sidebar mit smooth width transition
-
-## Aufgaben:
-
-1. Erstelle Wireframes (als ASCII-Art) für:
-   - Desktop Expanded
-   - Desktop Collapsed
-   - Mobile mit Overlay
-
-2. Liste alle benötigten DaisyUI-Komponenten auf
-
-3. Definiere CSS-Strategie:
-   - Nur Tailwind + DaisyUI
-   - KEINE custom variants (@custom-variant)
-   - State-Management via data-attribute selectors
-
-4. Definiere State-Management-Strategie:
-   - JavaScript Hook
-   - localStorage
-   - CSS reactions
-
-Speichere als `docs/sidebar-requirements-v2.md`
-```
-
-### Acceptance Criteria:
-- ✅ Anforderungen klar dokumentiert
-- ✅ Wireframes erstellt
-- ✅ Komponenten-Liste vorhanden
-- ✅ CSS-Strategie definiert
-- ✅ State-Management definiert
-
----
-
-## Task 4: CSS Foundation
-
-**Agent:** Auto-Mode  
-**Geschätzte Dauer:** 15 Minuten
-
-### Prompt:
-
-```
-Erstelle die CSS-Grundlage für die neue Sidebar in `assets/css/app.css`:
-
-## Schritt 1: Aufräumen
-1. Entferne ALLE bestehenden Custom CSS Variants für Sidebar:
-   - @custom-variant is-drawer-open
-   - @custom-variant is-drawer-close
-   - Alle .is-drawer-* Regeln
-
-2. Entferne alte Sidebar-spezifische Custom-Klassen
-
-## Schritt 2: Neue CSS-Regeln erstellen
-
-Erstelle CSS basierend auf `[data-sidebar-expanded]` Attribut:
-
-```css
-/* Desktop Sidebar Base */
-.sidebar {
-  @apply flex flex-col bg-base-200 min-h-screen;
-  @apply transition-[width] duration-300 ease-in-out;
-  width: 16rem; /* Expanded: w-64 */
-}
-
-/* Collapsed State */
-[data-sidebar-expanded="false"] .sidebar {
-  width: 4rem; /* Collapsed: w-16 */
-}
-
-/* Text Labels - Hide in Collapsed State */
-.menu-label {
-  @apply transition-all duration-200 whitespace-nowrap;
-}
-
-[data-sidebar-expanded="false"] .sidebar .menu-label {
-  @apply opacity-0 w-0 overflow-hidden pointer-events-none;
-}
-
-/* Toggle Button Icon Swap */
-.sidebar-collapsed-icon {
-  @apply hidden;
-}
-
-[data-sidebar-expanded="false"] .sidebar-expanded-icon {
-  @apply hidden;
-}
-
-[data-sidebar-expanded="false"] .sidebar-collapsed-icon {
-  @apply block;
-}
-
-/* Menu Groups - Show/Hide Based on State */
-.expanded-menu-group {
-  @apply block;
-}
-
-.collapsed-menu-group {
-  @apply hidden;
-}
-
-[data-sidebar-expanded="false"] .sidebar .expanded-menu-group {
-  @apply hidden;
-}
-
-[data-sidebar-expanded="false"] .sidebar .collapsed-menu-group {
-  @apply block;
-}
-
-/* Elements Only Visible in Expanded State */
-.expanded-only {
-  @apply block transition-opacity duration-200;
-}
-
-[data-sidebar-expanded="false"] .sidebar .expanded-only {
-  @apply hidden;
-}
-
-/* Tooltip - Only Show in Collapsed State */
-.sidebar .tooltip::before,
-.sidebar .tooltip::after {
-  @apply opacity-0 pointer-events-none;
-}
-
-[data-sidebar-expanded="false"] .sidebar .tooltip:hover::before,
-[data-sidebar-expanded="false"] .sidebar .tooltip:hover::after {
-  @apply opacity-100;
-}
-
-/* Menu Item Alignment */
-[data-sidebar-expanded="false"] .sidebar .menu > li > a,
-[data-sidebar-expanded="false"] .sidebar .menu > li > button {
-  @apply justify-center px-0;
-}
-```
-
-## Schritt 3: Testen
-- Kompiliere CSS: `mix assets.build`
-- Prüfe auf Fehler
-- Stelle sicher, dass keine alten Custom-Variants mehr existieren
-
-Verwende AUSSCHLIESSLICH:
-- Tailwind @apply
-- Standard DaisyUI Klassen
-- CSS attribute selectors für state
-```
-
-### Acceptance Criteria:
-- ✅ Alte Custom Variants entfernt
-- ✅ Neue CSS-Regeln erstellt
-- ✅ CSS kompiliert ohne Fehler
-- ✅ Nur Standard Tailwind/DaisyUI verwendet
-
----
-
-## Task 5: Layout-Struktur
-
-**Agent:** Auto-Mode  
-**Geschätzte Dauer:** 20 Minuten
-
-### Prompt:
-
-```
-Implementiere die grundlegende Layout-Struktur für die Sidebar in `lib/mv_web/components/layouts.ex`:
-
-## Anforderungen:
-
-1. Nutze DaisyUI `drawer` + `drawer-open` Pattern
-2. Ein Container für Mobile UND Desktop (keine Duplikate!)
-3. `@inner_block` darf nur EINMAL gerendert werden
-4. `data-sidebar-expanded` Attribut auf root
-5. `phx-hook="SidebarState"` auf root
-6. `id="main-sidebar"` auf main content (für Tests)
-
-## Implementierung:
-
-Ersetze die bestehende `app/1` Funktion mit:
-
-```heex
-def app(assigns) do
-  club_name = get_club_name()
-  assigns = assign(assigns, :club_name, club_name)
-
-  ~H"""
-  <%= if @current_user do %>
-    <div id="app-layout" class="drawer lg:drawer-open" data-sidebar-expanded="true" phx-hook="SidebarState">
-      <input id="mobile-drawer" type="checkbox" class="drawer-toggle" />
-      
-      <div class="drawer-content flex flex-col">
-        <!-- Mobile Header (only visible on mobile) -->
-        <header class="lg:hidden sticky top-0 z-10 navbar bg-base-100 shadow-sm">
-          <label for="mobile-drawer" class="btn btn-square btn-ghost" aria-label={gettext("Open navigation menu")}>
-            <.icon name="hero-bars-3" class="size-6" aria-hidden="true" />
-          </label>
-          <span class="font-bold">{@club_name}</span>
-        </header>
-        
-        <!-- Main Content (shared between mobile and desktop) -->
-        <main id="main-sidebar" class="px-4 py-8 sm:px-6 lg:px-8">
-          <div class="mx-auto space-y-4 max-full">
-            {render_slot(@inner_block)}
-          </div>
-        </main>
-      </div>
-
-      <div class="drawer-side z-20">
-        <label for="mobile-drawer" aria-label="close sidebar" class="drawer-overlay lg:hidden"></label>
-        <!-- Sidebar Content wird in nächstem Task implementiert -->
-        <aside class="sidebar">
-          <div class="p-4">
-            <p>Sidebar Placeholder</p>
-          </div>
-        </aside>
-      </div>
-    </div>
-  <% else %>
-    <!-- Not logged in -->
-    <main class="px-4 py-8 sm:px-6">
-      <div class="mx-auto space-y-4 max-full">
-        {render_slot(@inner_block)}
-      </div>
-    </main>
-  <% end %>
-
-  <.flash_group flash={@flash} />
-  """
-end
-```
-
-## Wichtig:
-- @inner_block wird nur EINMAL gerendert (im drawer-content)
-- Mobile und Desktop teilen sich den gleichen main-content
-- Sidebar-Inhalt kommt in späteren Tasks
-
-## Testen:
-1. Kompiliere: `mix compile`
-2. Starte Server: `mix phx.server`
-3. Prüfe: Keine duplicate ID Fehler in Browser Console
-4. Prüfe: Layout funktioniert responsive
-5. Prüfe: Mobile Header erscheint nur auf Mobile
-```
-
-### Acceptance Criteria:
-- ✅ Layout-Struktur implementiert
-- ✅ Keine duplicate IDs
-- ✅ @inner_block nur einmal gerendert
-- ✅ Responsive funktioniert
-- ✅ Kompiliert ohne Fehler
-
----
-
-## Task 6: Sidebar Header Komponente
-
-**Agent:** Auto-Mode  
-**Geschätzte Dauer:** 20 Minuten
-
-### Prompt:
-
-```
-Implementiere die Sidebar-Header-Komponente in `lib/mv_web/components/layouts/sidebar.ex`:
-
-## Anforderungen:
-
-1. **Logo:**
-   - Immer `size-8` (32px)
-   - Immer sichtbar (kein Hide)
-   - Nur EIN Logo-Element
-   - Pfad: `/images/mila.svg`
-
-2. **Club-Name:**
-   - Text-Label mit CSS-Klasse `menu-label`
-   - Wird via CSS ausgeblendet (collapsed)
-   - `text-lg font-bold truncate`
-
-3. **Toggle-Button:**
-   - Nur auf Desktop sichtbar (responsive: `hidden lg:flex` oder `lg:block`)
-   - DaisyUI-konforme Button-Variante wählen:
-     * Option A: `btn btn-ghost btn-sm btn-square` (minimal, icon-only)
-     * Option B: `btn btn-ghost btn-sm` (mit etwas Padding)
-     * Option C: `btn btn-ghost btn-circle` (rund, falls besser zum Design passt)
-   - Icon-Strategie (wähle die beste Variante):
-     * Option A: Zwei Icons mit CSS-Klassen (`.sidebar-expanded-icon` / `.sidebar-collapsed-icon`)
-     * Option B: Ein Icon mit CSS transform (rotate bei collapsed)
-     * Option C: Ein Icon mit CSS content-swap (via ::before/::after)
-   - Event-Handler (wähle passende Variante):
-     * Option A: `onclick="toggleSidebar()"` (wenn global function vorhanden)
-     * Option B: `phx-click="toggle_sidebar"` (wenn LiveView event)
-     * Option C: `phx-hook="SidebarToggle"` (wenn Hook-basiert)
-   - ARIA: `aria-label={gettext("Toggle sidebar")}` und `aria-expanded` (wird via JS gesetzt)
-
-## Design-Überlegungen:
-
-- Button sollte sich harmonisch in den Header einfügen
-- Position: Rechts im Header (`ml-auto`)
-- Icon-Größe: `size-5` oder `size-4` (je nach Button-Größe)
-- Icon-Typ: Chevron (left/right) oder Arrow (left/right) - wähle das passendere
-- Hover-Effekt: Standard DaisyUI btn-ghost hover
-
-## Implementierung:
-
-Erstelle `sidebar_header/1` Funktion mit:
-- Flexbox-Layout für Header (Logo + Name + Toggle)
-- Responsive Toggle-Button
-- Icon-Swap-Mechanismus (wähle beste Variante)
-- Korrekte ARIA-Attribute
-
-## Empfehlung:
-
-Für DaisyUI-Konformität und Wartbarkeit:
-- Button: `btn btn-ghost btn-sm btn-square` (icon-only, minimal)
-- Icons: Zwei separate Icons mit CSS-Klassen (einfach, klar)
-- Event: `onclick="toggleSidebar()"` (wenn JS Hook vorhanden) ODER `phx-click` (wenn LiveView)
-
-## Beispiel-Struktur (als Orientierung):
-
-```elixir
-defp sidebar_header(assigns) do
-  ~H"""
-  <div class="flex items-center gap-3 p-4 border-b border-base-300">
-    <!-- Logo -->
-    <img src={~p"/images/mila.svg"} alt="Mila Logo" class="size-8 shrink-0" />
-    
-    <!-- Club Name -->
-    <span class="menu-label text-lg font-bold truncate">
-      {@club_name}
-    </span>
-    
-    <!-- Toggle Button (Desktop only) -->
-    <%= unless @mobile do %>
-      <button
-        type="button"
-        id="sidebar-toggle"
-        class="hidden lg:flex ml-auto btn btn-ghost btn-sm btn-square"
-        aria-label={gettext("Toggle sidebar")}
-        onclick="toggleSidebar()"
-      >
-        <!-- Icon-Implementierung nach gewählter Strategie -->
-      </button>
-    <% end %>
-  </div>
-  """
-end
-```
-
-## Integration in layouts.ex:
-
-Ersetze den Sidebar Placeholder in `layouts.ex`:
-
-```heex
-<aside class="sidebar">
-  <.sidebar_content current_user={@current_user} club_name={@club_name} mobile={false} />
-</aside>
-```
-
-## Testen:
-1. Kompiliere: `mix compile`
-2. Starte Server: `mix phx.server`
-3. Prüfe:
-   - Logo ist immer 32px groß
-   - Toggle-Button erscheint nur auf Desktop
-   - Button-Design passt zum Rest der Sidebar
-   - Icon wechselt beim Toggle
-   - Hover-Effekt funktioniert
-   - ARIA-Attribute korrekt
-   - Club-Name verschwindet beim Collapse (wenn toggleSidebar() funktioniert)
-```
-
-### Acceptance Criteria:
-- ✅ sidebar_header Komponente erstellt
-- ✅ Logo immer gleich groß
-- ✅ Toggle-Button nur auf Desktop
-- ✅ DaisyUI-konforme Button-Klassen verwendet
-- ✅ Icon-Swap funktioniert (egal welche Variante gewählt wurde)
-- ✅ Event-Handler funktioniert
-- ✅ Design fügt sich harmonisch ein
-- ✅ Keine Layout-Breaks
-
----
-
-## Task 7: Sidebar Navigation - Flat Items
-
-**Agent:** Auto-Mode  
-**Geschätzte Dauer:** 25 Minuten
-
-### Prompt:
-
-```
-Implementiere einfache Menü-Items (flat, ohne Nesting) in `lib/mv_web/components/layouts/sidebar.ex`:
-
-## Menü-Items:
-- Members (`/members`)
-- Users (`/users`)
-- Custom Fields (`/custom_fields`)
-- Settings (Placeholder)
-
-## Anforderungen:
-
-1. **Expanded State:**
-   - Icon + Text-Label
-   - Standard DaisyUI menu hover
-
-2. **Collapsed State:**gf
-   - Nur Icon
-   - Tooltip erscheint rechts (`tooltip-right`)
-   - Tooltip-Text aus `data-tip`
-
-3. **Hover-Effekt:**
-   - Einheitlich (Standard DaisyUI menu)
-   - Keine custom hover-styles
-
-4. **Active State:**
-   - Highlight für current_path (optional)
-
-## Implementierung:
-
-Füge in `sidebar.ex` hinzu:
-
-```elixir
-defp sidebar_menu(assigns) do
-  ~H"""
-  <ul class="menu flex-1 w-full p-2" role="menubar">
-    <.menu_item 
-      href={~p"/members"} 
-      icon="hero-users" 
-      label={gettext("Members")} 
-    />
-    <.menu_item 
-      href={~p"/users"} 
-      icon="hero-user-circle" 
-      label={gettext("Users")} 
-    />
-    <.menu_item 
-      href={~p"/custom_fields"} 
-      icon="hero-rectangle-group" 
-      label={gettext("Custom Fields")} 
-    />
-    <.menu_item 
-      href="#" 
-      icon="hero-cog-6-tooth" 
-      label={gettext("Settings")} 
-    />
-  </ul>
-  """
-end
-
-attr :href, :string, required: true
-attr :icon, :string, required: true
-attr :label, :string, required: true
-
-defp menu_item(assigns) do
-  ~H"""
-  <li role="none">
-    <.link
-      navigate={@href}
-      class="flex items-center gap-3 tooltip tooltip-right"
-      data-tip={@label}
-      role="menuitem"
-    >
-      <.icon name={@icon} class="size-5 shrink-0" aria-hidden="true" />
-      <span class="menu-label">{@label}</span>
-    </.link>
-  </li>
-  """
-end
-```
-
-Ersetze in `sidebar_content`:
-```heex
-<!-- Navigation -->
-<%= if @current_user do %>
-  <.sidebar_menu />
-<% end %>
-```
-
-## Testen:
-1. Kompiliere und starte Server
-2. Prüfe Expanded State:
-   - Icons + Labels sichtbar
-   - Hover funktioniert
-3. Toggle zu Collapsed:
-   - Nur Icons sichtbar
-   - Tooltips erscheinen bei Hover
-   - Tooltips zeigen richtigen Text
-4. Prüfe:
-   - Einheitlicher Hover-Effekt
-   - Navigation funktioniert (Links klickbar)
-```
-
-### Acceptance Criteria:
-- ✅ menu_item Komponente erstellt
-- ✅ 4 Menü-Items implementiert
-- ✅ Tooltips funktionieren (nur collapsed)
-- ✅ Icons sichtbar in beiden States
-- ✅ Hover-Effekt einheitlich
-- ✅ Navigation funktioniert
-
----
-
-## Task 8: Sidebar Navigation - Nested Menu
-
-**Agent:** Sonnet 4.5 (komplexer)  
-**Geschätzte Dauer:** 30 Minuten
-
-### Prompt:
-
-```
-Implementiere das verschachtelte "Beiträge"-Menü (Contributions) mit ZWEI verschiedenen Darstellungen je nach State.
-
-## Problem:
-Das Nested Menu muss sich anders verhalten als flat items:
-- **Expanded:** Nutzt <details> mit <summary> für auf/zuklappbar
-- **Collapsed:** Nutzt DaisyUI dropdown für Flyout rechts vom Icon
-
-## Anforderungen:
-
-1. **Nur EIN Hover-Effekt** (nicht doppelt)
-2. **Flyout erscheint rechts** vom Icon im collapsed state
-3. **Smooth transitions** zwischen states
-4. **Submenu-Items:** Beitragsarten, Einstellungen
-
-## Implementierung:
-
-Füge in `sidebar.ex` hinzu:
-
-```elixir
-attr :icon, :string, required: true
-attr :label, :string, required: true
-slot :inner_block, required: true
-
-defp menu_group(assigns) do
-  ~H"""
-  <li role="none" class="menu-group">
-    <!-- Expanded Mode: Details/Summary -->
-    <details class="expanded-menu-group">
-      <summary class="flex items-center gap-3" role="menuitem" aria-haspopup="true">
-        <.icon name={@icon} class="size-5 shrink-0" aria-hidden="true" />
-        <span class="menu-label">{@label}</span>
-      </summary>
-      <ul role="menu" class="ml-4">
-        {render_slot(@inner_block)}
-      </ul>
-    </details>
-    
-    <!-- Collapsed Mode: Dropdown -->
-    <div class="collapsed-menu-group dropdown dropdown-right">
-      <button 
-        type="button"
-        tabindex="0" 
-        class="flex items-center justify-center w-full p-2 rounded-lg hover:bg-base-300 tooltip tooltip-right"
-        data-tip={@label}
-        aria-haspopup="menu"
-        aria-label={@label}
-      >
-        <.icon name={@icon} class="size-5" aria-hidden="true" />
-      </button>
-      <ul 
-        tabindex="0" 
-        class="dropdown-content menu bg-base-100 rounded-box shadow-lg z-50 min-w-48 p-2"
-        role="menu"
-      >
-        <li class="menu-title">{@label}</li>
-        {render_slot(@inner_block)}
-      </ul>
-    </div>
-  </li>
-  """
-end
-
-attr :href, :string, required: true
-attr :label, :string, required: true
-
-defp menu_subitem(assigns) do
-  ~H"""
-  <li role="none">
-    <.link navigate={@href} role="menuitem">
-      {@label}
-    </.link>
-  </li>
-  """
-end
-```
-
-Füge in `sidebar_menu` nach den flat items hinzu:
-
-```elixir
-<!-- Nested Menu: Contributions -->
-<.menu_group 
-  icon="hero-currency-dollar" 
-  label={gettext("Contributions")}
->
-  <.menu_subitem href="/contribution_types" label={gettext("Contribution Types")} />
-  <.menu_subitem href="/contribution_settings" label={gettext("Settings")} />
-</.menu_group>
-```
-
-## CSS-Prüfung:
-
-Stelle sicher, dass in `app.css` folgende Regeln existieren:
-
-```css
-/* Expanded: Show details, hide dropdown */
-.expanded-menu-group {
-  @apply block;
-}
-.collapsed-menu-group {
-  @apply hidden;
-}
-
-/* Collapsed: Hide details, show dropdown */
-[data-sidebar-expanded="false"] .sidebar .expanded-menu-group {
-  @apply hidden;
-}
-[data-sidebar-expanded="false"] .sidebar .collapsed-menu-group {
-  @apply block;
-}
-```
-
-## Testen:
-
-1. **Expanded State:**
-   - Details/Summary erscheint
-   - Klick öffnet/schließt Submenu
-   - Submenu-Items sind klickbar
-   - NUR EIN Hover-Effekt auf summary
-
-2. **Collapsed State:**
-   - Dropdown erscheint
-   - Flyout öffnet RECHTS vom Icon
-   - Menu-Title "Contributions" erscheint
-   - Submenu-Items sind klickbar
-   - NUR EIN Hover-Effekt auf button
-
-3. **Toggle zwischen States:**
-   - Smooth Transition
-   - Keine Glitches
-   - Keine doppelten Elemente sichtbar
-
-## Debugging:
-
-Falls Probleme auftreten:
-- Browser DevTools: Prüfe, welche Elemente .expanded-menu-group oder .collapsed-menu-group haben
-- Prüfe data-sidebar-expanded Attribut im HTML
-- Prüfe z-index des Dropdowns (z-50)
-- Prüfe, ob dropdown-right funktioniert
-```
-
-### Acceptance Criteria:
-- ✅ menu_group und menu_subitem implementiert
-- ✅ Details funktioniert (expanded)
-- ✅ Dropdown funktioniert (collapsed)
-- ✅ Flyout erscheint rechts
-- ✅ Nur EIN Hover-Effekt
-- ✅ Keine visuellen Glitches
-
----
-
-## Task 9: Sidebar Footer mit Flexbox
-
-**Agent:** Auto-Mode  
-**Geschätzte Dauer:** 25 Minuten
-
-### Prompt:
-
-```
-Implementiere den Sidebar-Footer mit korrekter Positionierung am unteren Ende.
-
-## Flexbox-Struktur:
-
-Die Sidebar muss als Flexbox-Container funktionieren:
-1. `.sidebar`: `flex flex-col` (bereits vorhanden)
-2. Navigation: `flex-1` (nimmt verfügbaren Platz)
-3. Footer: `mt-auto` (wird nach unten geschoben)
-
-## Footer-Komponenten:
-
-1. **Language Selector:**
-   - Nur im expanded state sichtbar (`.expanded-only`)
-   - DaisyUI select
-   - Form mit POST zu `/locale`
-
-2. **Theme Toggle:**
-   - IMMER sichtbar
-   - Horizontal: Sun Icon + Toggle + Moon Icon
-   - DaisyUI toggle + theme-controller
-
-3. **User Menu:**
-   - DaisyUI dropdown
-   - `dropdown-top dropdown-end` (öffnet nach oben)
-   - Avatar: Erste Buchstabe, zentriert, rund
-   - Email nur expanded
-   - Dropdown: Profile + Logout
-
-## Implementierung:
-
-```elixir
-defp sidebar_footer(assigns) do
-  ~H"""
-  <div class="mt-auto p-4 border-t border-base-300 space-y-4">
-    <!-- Language Selector (nur expanded) -->
-    <form method="post" action={~p"/locale"} class="expanded-only">
-      <input type="hidden" name="_csrf_token" value={get_csrf_token()} />
-      <select
-        name="locale"
-        onchange="this.form.submit()"
-        class="select select-sm w-full"
-        aria-label={gettext("Select language")}
-      >
-        <option value="de" selected={Gettext.get_locale() == "de"}>Deutsch</option>
-        <option value="en" selected={Gettext.get_locale() == "en"}>English</option>
-      </select>
-    </form>
-    
-    <!-- Theme Toggle (immer sichtbar) -->
-    <.theme_toggle />
-    
-    <!-- User Menu -->
-    <.user_menu current_user={@current_user} />
-  </div>
-  """
-end
-
-defp theme_toggle(assigns) do
-  ~H"""
-  <label class="flex items-center gap-2 cursor-pointer justify-center">
-    <.icon name="hero-sun" class="size-5" aria-hidden="true" />
-    <input 
-      type="checkbox" 
-      value="dark" 
-      class="toggle toggle-sm theme-controller"
-      aria-label={gettext("Toggle dark mode")}
-    />
-    <.icon name="hero-moon" class="size-5" aria-hidden="true" />
-  </label>
-  """
-end
-
-defp user_menu(assigns) do
-  ~H"""
-  <div class="dropdown dropdown-top dropdown-end w-full">
-    <button
-      type="button"
-      tabindex="0"
-      class="btn btn-ghost w-full flex items-center gap-3"
-      aria-label={gettext("User menu")}
-      aria-haspopup="menu"
-    >
-      <!-- Avatar: Zentriert, erste Buchstabe -->
-      <div class="avatar placeholder">
-        <div class="w-8 h-8 rounded-full bg-neutral text-neutral-content flex items-center justify-center">
-          <span class="text-sm font-medium">
-            {String.first(String.to_string(@current_user.email)) |> String.upcase()}
-          </span>
-        </div>
-      </div>
-      <span class="menu-label truncate flex-1 text-left">{String.to_string(@current_user.email)}</span>
-    </button>
-    <ul 
-      tabindex="0" 
-      class="dropdown-content menu bg-base-100 rounded-box shadow-lg z-50 w-52 p-2"
-      role="menu"
-    >
-      <li role="none">
-        <.link navigate={~p"/users/#{@current_user.id}"} role="menuitem">
-          {gettext("Profile")}
-        </.link>
-      </li>
-      <li role="none">
-        <.link href={~p"/sign-out"} role="menuitem">
-          {gettext("Logout")}
-        </.link>
-      </li>
-    </ul>
-  </div>
-  """
-end
-```
-
-Ersetze in `sidebar_content` den Footer-Placeholder:
-
-```heex
-<!-- Footer -->
-<%= if @current_user do %>
-  <.sidebar_footer current_user={@current_user} />
-<% end %>
-```
-
-Prüfe, dass `.sidebar_menu` `flex-1` hat:
-
-```heex
-<ul class="menu flex-1 w-full p-2" role="menubar">
-```
-
-## Testen:
-
-1. **Positionierung:**
-   - Footer klebt am unteren Ende
-   - Auch bei wenigen Menu-Items
-   - Navigation wächst/schrumpft dynamisch
-
-2. **Language Selector:**
-   - Erscheint nur expanded
-   - Verschwindet collapsed
-   - Form funktioniert (Sprache wechselt)
-
-3. **Theme Toggle:**
-   - Immer sichtbar
-   - Icons horizontal ausgerichtet
-   - Toggle funktioniert
-
-4. **User Menu:**
-   - Avatar zentriert (auch collapsed)
-   - Erste Buchstabe korrekt
-   - Email verschwindet collapsed
-   - Dropdown öffnet nach oben
-   - Profile + Logout Links funktionieren
-
-5. **Collapsed State:**
-   - Footer bleibt am unteren Ende
-   - Avatar zentriert
-   - Theme Toggle funktioniert
-```
-
-### Acceptance Criteria:
-- ✅ Footer am unteren Ende (Flexbox)
-- ✅ Language Selector nur expanded
-- ✅ Theme Toggle immer sichtbar
-- ✅ User Menu mit Avatar
-- ✅ Avatar zentriert in beiden States
-- ✅ Dropdown öffnet nach oben
-- ✅ Alle Links funktionieren
-
----
-
-## Task 10: JavaScript State Management
-
-**Agent:** Auto-Mode  
-**Geschätzte Dauer:** 15 Minuten
-
-### Prompt:
-
-```
-Implementiere den vereinfachten SidebarState Hook in `assets/js/app.js`.
-
-## Ziel:
-
-Einfaches, robustes State-Management OHNE komplexe Event-Listener oder DOM-Manipulation.
-
-## Anforderungen:
-
-1. State in localStorage speichern
-2. State via data-attribute auf HTML-Element setzen
-3. Global `toggleSidebar()` Funktion bereitstellen
-4. aria-expanded auf Toggle-Button aktualisieren
-5. KEINE Checkbox-Manipulation
-6. KEINE Tab-Index-Verwaltung
-7. KEINE komplexen Event-Listener
-
-## Implementierung:
-
-Füge in `assets/js/app.js` zu den Hooks hinzu:
-
-```javascript
-Hooks.SidebarState = {
-  mounted() {
-    // Restore state from localStorage
-    const expanded = localStorage.getItem('sidebar-expanded') !== 'false';
-    this.setSidebarState(expanded);
-    
-    // Expose toggle function globally
-    window.toggleSidebar = () => {
-      const current = this.el.dataset.sidebarExpanded === 'true';
-      this.setSidebarState(!current);
-    };
-  },
-  
-  setSidebarState(expanded) {
-    // Update data-attribute (CSS reacts to this)
-    this.el.dataset.sidebarExpanded = expanded;
-    
-    // Persist to localStorage
-    localStorage.setItem('sidebar-expanded', expanded);
-    
-    // Update ARIA for accessibility
-    const toggleBtn = document.getElementById('sidebar-toggle');
-    if (toggleBtn) {
-      toggleBtn.setAttribute('aria-expanded', expanded);
-    }
-  },
-  
-  destroyed() {
-    // Cleanup
-    delete window.toggleSidebar;
-  }
-};
-```
-
-Stelle sicher, dass der Hook registriert ist:
-
-```javascript
-let liveSocket = new LiveSocket("/live", Socket, {
-  // ... existing config ...
-  hooks: Hooks
-})
-```
-
-## Testen:
-
-1. **Initial State:**
-   - Sidebar ist expanded (default)
-   - localStorage wird gesetzt
-
-2. **Toggle:**
-   - Klick auf Toggle-Button
-   - Sidebar animiert zu collapsed
-   - localStorage wird aktualisiert
-   - Icon wechselt (Chevron-left ↔ Chevron-right)
-
-3. **Persistence:**
-   - Toggle zu collapsed
-   - Seite neu laden
-   - Sidebar bleibt collapsed
-
-4. **Browser Console:**
-   - Keine Fehler
-   - `window.toggleSidebar()` ist aufrufbar
-   - `localStorage.getItem('sidebar-expanded')` zeigt korrekten Wert
-
-5. **ARIA:**
-   - Toggle-Button hat `aria-expanded="true"` oder `"false"`
-   - Wert ändert sich beim Toggle
-
-## Debugging:
-
-Falls Probleme:
-```javascript
-// In Browser Console:
-console.log(document.documentElement.dataset.sidebarExpanded);
-console.log(localStorage.getItem('sidebar-expanded'));
-window.toggleSidebar(); // Manuell testen
-```
-```
-
-### Acceptance Criteria:
-- ✅ Hook implementiert
-- ✅ State wird gespeichert (localStorage)
-- ✅ Toggle funktioniert
-- ✅ CSS reagiert auf data-attribute
-- ✅ ARIA korrekt gesetzt
-- ✅ Keine Console-Fehler
-- ✅ Persistence funktioniert
-
----
-
-## Task 11: Mobile Header Integration
-
-**Agent:** Auto-Mode  
-**Geschätzte Dauer:** 10 Minuten
-
-### Prompt:
-
-```
-Prüfe und optimiere die Mobile-Header-Integration.
-
-## Anforderungen:
-
-1. Mobile Header ist bereits in `layouts.ex` implementiert
-2. Hamburger-Menü öffnet Sidebar
-3. Header nur auf Mobile sichtbar (`lg:hidden`)
-4. Overlay schließt Sidebar
-
-## Zu prüfen:
-
-Stelle sicher, dass in `layouts.ex` folgendes korrekt ist:
-
-```heex
-<header class="lg:hidden sticky top-0 z-10 navbar bg-base-100 shadow-sm">
-  <label for="mobile-drawer" class="btn btn-square btn-ghost" aria-label={gettext("Open navigation menu")}>
-    <.icon name="hero-bars-3" class="size-6" aria-hidden="true" />
-  </label>
-  <span class="font-bold">{@club_name}</span>
-</header>
-```
-
-Und im drawer-side:
-
-```heex
-<label for="mobile-drawer" aria-label="close sidebar" class="drawer-overlay lg:hidden"></label>
-```
-
-## Testen:
-
-1. **Mobile View (< 1024px):**
-   - Header erscheint am oberen Rand
-   - Hamburger-Icon sichtbar
-   - Club-Name neben Hamburger
-
-2. **Hamburger-Click:**
-   - Sidebar schiebt von links rein
-   - Overlay verdunkelt Content
-   - Sidebar ist vollständig sichtbar
-
-3. **Overlay-Click:**
-   - Sidebar schließt sich
-   - Overlay verschwindet
-   - Content wieder normal
-
-4. **Desktop View (≥ 1024px):**
-   - Header verschwindet
-   - Sidebar ist persistent sichtbar
-   - Kein Hamburger-Icon
-   - Toggle-Button erscheint in Sidebar
-
-5. **Responsive Breakpoint:**
-   - Smooth Transition bei Resize
-   - Keine Layout-Breaks
-   - Sidebar-State bleibt erhalten
-
-## Optional: CSS-Verbesserungen
-
-Falls Mobile-Sidebar zu schmal ist, füge in `app.css` hinzu:
-
-```css
-/* Mobile Drawer Width */
-@media (max-width: 1023px) {
-  .drawer-side .sidebar {
-    width: 16rem; /* w-64 auch auf Mobile */
-  }
-}
-```
-```
-
-### Acceptance Criteria:
-- ✅ Mobile Header funktioniert
-- ✅ Hamburger öffnet Sidebar
-- ✅ Overlay schließt Sidebar
-- ✅ Header nur auf Mobile
-- ✅ Responsive funktioniert
-- ✅ Keine Layout-Breaks
-
----
-
-## Task 12: Tests & Accessibility
-
-**Agent:** Sonnet 4.5  
-**Geschätzte Dauer:** 30 Minuten
-
-### Prompt:
-
-```
-Schreibe und aktualisiere Tests für die neue Sidebar-Implementierung in `test/mv_web/components/layouts/sidebar_test.exs`.
-
-## Test-Kategorien:
-
-### 1. Component Tests
-
-```elixir
-describe "sidebar_header/1" do
-  test "renders logo with correct size" do
-    # Logo ist size-8 (32px)
-    # Logo ist immer sichtbar
-  end
-  
-  test "renders club name" do
-    # Club name ist vorhanden
-  end
-  
-  test "renders toggle button for desktop" do
-    # Toggle button hat beide Icons
-    # Toggle button ist nicht mobile
-  end
-end
-
-describe "menu_item/1" do
-  test "renders icon and label" do
-    # Icon ist sichtbar
-    # Label ist vorhanden
-  end
-  
-  test "has tooltip with correct text" do
-    # data-tip attribute gesetzt
-  end
-  
-  test "has correct link" do
-    # navigate attribute korrekt
-  end
-end
-
-describe "menu_group/1" do
-  test "renders expanded menu group" do
-    # details/summary vorhanden
-  end
-  
-  test "renders collapsed menu group" do
-    # dropdown vorhanden
-  end
-  
-  test "renders submenu items" do
-    # Inner_block items gerendert
-  end
-end
-
-describe "sidebar_footer/1" do
-  test "renders at bottom of sidebar" do
-    # mt-auto vorhanden
-  end
-  
-  test "renders theme toggle" do
-    # Toggle ist immer sichtbar
-  end
-  
-  test "renders language selector in expanded only" do
-    # expanded-only Klasse
-  end
-  
-  test "renders user menu with avatar" do
-    # Avatar vorhanden
-    # Erste Buchstabe korrekt
-  end
-end
-```
-
-### 2. Integration Tests
-
-```elixir
-describe "sidebar state management" do
-  test "sidebar starts expanded by default" do
-    # data-sidebar-expanded="true"
-  end
-  
-  test "toggle button changes state" do
-    # Simulate toggle
-    # data-sidebar-expanded ändert sich
-  end
-  
-  test "no duplicate IDs in layout" do
-    # field-visibility-dropdown nur einmal
-    # Keine duplicate IDs
-  end
-end
-
-describe "mobile drawer" do
-  test "mobile header renders on small screens" do
-    # lg:hidden Klasse
-  end
-  
-  test "drawer toggle opens sidebar" do
-    # drawer-toggle funktioniert
-  end
-end
-```
-
-### 3. Accessibility Tests
-
-```elixir
-describe "accessibility" do
-  test "sidebar has aria-label" do
-    # aria-label="Main navigation"
-  end
-  
-  test "toggle button has aria-label and aria-expanded" do
-    # aria-label vorhanden
-    # aria-expanded="true" or "false"
-  end
-  
-  test "menu items have role attributes" do
-    # role="menubar", "menuitem", "menu"
-  end
-  
-  test "icons have aria-hidden" do
-    # Dekorative Icons: aria-hidden="true"
-  end
-  
-  test "user menu has aria-haspopup" do
-    # aria-haspopup="menu"
-  end
-end
-```
-
-### 4. Regression Tests
-
-```elixir
-describe "regression tests" do
-  test "no duplicate profile links" do
-    # Nur ein Profile-Link im DOM
-  end
-  
-  test "nested menu has only one hover effect" do
-    # Nicht doppelter Hover
-  end
-  
-  test "tooltips only visible when collapsed" do
-    # CSS opacity rules
-  end
-end
-```
-
-## Testen:
-
-Führe alle Tests aus:
-
-```bash
-mix test test/mv_web/components/layouts/sidebar_test.exs
-```
-
-Prüfe:
-- Alle Tests bestehen
-- Keine Warnungen
-- Test-Coverage akzeptabel
-
-Falls Tests fehlschlagen:
-1. Analysiere Fehler
-2. Fixe Code oder Test
-3. Wiederhole bis alle grün sind
-
-## Accessibility Tools:
-
-Optional: Nutze Browser DevTools
-- Lighthouse Accessibility Audit
-- Axe DevTools Extension
-- WAVE Extension
-```
-
-### Acceptance Criteria:
-- ✅ Component Tests geschrieben
-- ✅ Integration Tests geschrieben
-- ✅ Accessibility Tests geschrieben
-- ✅ Regression Tests geschrieben
-- ✅ Alle Tests bestehen
-- ✅ Keine Test-Warnungen
-
----
-
-## Task 13: Visual Testing & Bug Fixes
-
-**Agent:** Manuell (+ Sonnet 4.5 für Fixes)  
-**Geschätzte Dauer:** 30 Minuten
-
-### Checklist für manuelle Tests:
-
-```
-## Desktop - Expanded State
-
-- [ ] Logo ist 32px groß (size-8)
-- [ ] Logo ist zentriert vertikal
-- [ ] Club-Name ist sichtbar neben Logo
-- [ ] Toggle-Button ist sichtbar
-- [ ] Toggle-Button zeigt Chevron-Left Icon
-- [ ] Alle Menü-Items zeigen Icon + Text
-- [ ] Beiträge-Menü ist als Details/Summary dargestellt
-- [ ] Footer ist am unteren Ende
-- [ ] Language-Selector ist sichtbar
-- [ ] Theme-Toggle ist horizontal (Sun + Toggle + Moon)
-- [ ] User-Avatar ist rund und zentriert
-- [ ] Email ist neben Avatar sichtbar
-
-## Desktop - Collapsed State
-
-- [ ] Logo ist 32px groß (gleich wie expanded!)
-- [ ] Logo ist zentriert vertikal UND horizontal
-- [ ] Club-Name ist NICHT sichtbar
-- [ ] Toggle-Button ist sichtbar
-- [ ] Toggle-Button zeigt Chevron-Right Icon
-- [ ] Alle Menü-Items zeigen nur Icons (zentriert)
-- [ ] Tooltips erscheinen bei Hover über Icons
-- [ ] Tooltips zeigen korrekten Text
-- [ ] Beiträge-Menü ist als Dropdown dargestellt
-- [ ] Dropdown öffnet RECHTS vom Icon
-- [ ] Dropdown enthält "Beiträge" als Titel
-- [ ] Footer ist am unteren Ende
-- [ ] Language-Selector ist NICHT sichtbar
-- [ ] Theme-Toggle ist sichtbar und funktioniert
-- [ ] User-Avatar ist zentriert (horizontal)
-- [ ] Email ist NICHT sichtbar
-- [ ] Sidebar-Breite ist 4rem (w-16)
-
-## Toggle-Funktion
-
-- [ ] Click auf Toggle-Button wechselt State
-- [ ] Transition ist smooth (300ms)
-- [ ] Keine Glitches während Transition
-- [ ] Icon wechselt smooth
-- [ ] State wird in localStorage gespeichert
-- [ ] Nach Reload bleibt State erhalten
-
-## Mobile (< 1024px)
-
-- [ ] Header mit Hamburger-Icon erscheint oben
-- [ ] Club-Name neben Hamburger
-- [ ] Desktop Toggle-Button ist NICHT sichtbar
-- [ ] Click auf Hamburger öffnet Drawer
-- [ ] Sidebar schiebt von links rein
-- [ ] Overlay verdunkelt Hintergrund
-- [ ] Click auf Overlay schließt Drawer
-- [ ] Sidebar-Content ist vollständig sichtbar
-- [ ] Alle Menü-Items funktionieren
-- [ ] Footer ist am unteren Ende
-
-## Hover-Effekte
-
-- [ ] Menü-Items: Einheitlicher Hover (hellerer Hintergrund)
-- [ ] Beiträge-Menü (expanded): Nur EIN Hover auf Summary
-- [ ] Beiträge-Menü (collapsed): Nur EIN Hover auf Button
-- [ ] Toggle-Button: Hover-Effekt vorhanden
-- [ ] User-Menu: Hover-Effekt vorhanden
-- [ ] Keine doppelten oder konflikthaften Hovers
-
-## Nested Menu "Beiträge"
-
-- [ ] Expanded: Details/Summary funktioniert
-- [ ] Expanded: Click öffnet/schließt Submenu
-- [ ] Expanded: Submenu-Items eingerückt (ml-4)
-- [ ] Collapsed: Dropdown-Button zentriert
-- [ ] Collapsed: Tooltip zeigt "Beiträge"
-- [ ] Collapsed: Click öffnet Dropdown RECHTS
-- [ ] Collapsed: Dropdown hat "Beiträge" als Titel
-- [ ] Collapsed: Submenu-Items klickbar
-- [ ] Collapsed: Dropdown schließt nach Click außerhalb
-
-## Footer-Positionierung
-
-- [ ] Footer klebt am unteren Ende (auch bei wenigen Items)
-- [ ] Navigation (flex-1) wächst/schrumpft korrekt
-- [ ] Kein Leerraum zwischen Navigation und Footer
-- [ ] Footer bleibt am unteren Ende beim Scroll
-
-## Transitions & Animations
-
-- [ ] Width-Transition: smooth, 300ms
-- [ ] Label Fade-out: smooth, 200ms
-- [ ] Icon-Swap: instant (kein Flicker)
-- [ ] Keine Layout-Shifts
-- [ ] Keine Horizontal-Scrollbar während Transition
-
-## Browser-Kompatibilität
-
-- [ ] Chrome/Edge: Alles funktioniert
-- [ ] Firefox: Alles funktioniert
-- [ ] Safari: Alles funktioniert (falls verfügbar)
-
-## Accessibility (Screen Reader)
-
-- [ ] Toggle-Button: aria-expanded wird angesagt
-- [ ] Menü-Items: Links werden korrekt angesagt
-- [ ] User-Menu: Dropdown wird als Menü erkannt
-- [ ] Icons: Nicht vom Screen Reader angesagt (aria-hidden)
-
-## Performance
-
-- [ ] Keine Console-Errors
-- [ ] Keine Console-Warnings
-- [ ] localStorage funktioniert
-- [ ] Keine Memory-Leaks (DevTools Memory Profiler)
-```
-
-### Bug-Fixing Prompt (falls Bugs gefunden):
-
-```
-Ich habe folgende Bugs bei der visuellen Prüfung der Sidebar gefunden:
-
-[LISTE DER BUGS HIER EINFÜGEN]
-
-Bitte analysiere und fixe diese Bugs:
-
-1. Identifiziere die Ursache für jeden Bug
-2. Erstelle Fixes in den betroffenen Dateien
-3. Teste, dass der Fix funktioniert
-4. Stelle sicher, dass keine Regression entsteht
-
-Betroffene Dateien könnten sein:
-- lib/mv_web/components/layouts.ex
-- lib/mv_web/components/layouts/sidebar.ex
-- assets/css/app.css
-- assets/js/app.js
-
-Prüfe besonders:
-- CSS-Selektoren ([data-sidebar-expanded])
-- Flexbox-Layout (flex-col, flex-1, mt-auto)
-- Tailwind-Klassen (lg:hidden, lg:flex, etc.)
-- DaisyUI-Komponenten (dropdown, menu, tooltip)
-```
-
-### Acceptance Criteria:
-- ✅ Alle Checkboxen abgehakt
-- ✅ Keine visuellen Bugs
-- ✅ Alle Anforderungen erfüllt
-- ✅ Performance akzeptabel
-- ✅ Accessibility getestet
-
----
-
-## Finale Dokumentation
-
-Nach erfolgreicher Umsetzung aller Tasks:
-
-### Prompt für Dokumentations-Update:
-
-```
-Aktualisiere die Projekt-Dokumentation basierend auf der neuen Sidebar-Implementierung:
-
-1. Update `CODE_GUIDELINES.md`:
-   - Sektion "Frontend: Tailwind CSS & DaisyUI"
-   - Beschreibe das Sidebar Pattern
-   - Dokumentiere State-Management Ansatz
-
-2. Erstelle `docs/sidebar-architecture.md`:
-   - Übersicht über Komponenten
-   - State-Management Erklärung
-   - CSS-Strategie
-   - Troubleshooting Guide
-
-3. Update `docs/feature-roadmap.md`:
-   - Markiere Sidebar als abgeschlossen
-   - Dokumentiere Learnings
-
-4. Erstelle `docs/sidebar-maintenance.md`:
-   - Wie man neue Menü-Items hinzufügt
-   - Wie man Nested Menus hinzufügt
-   - Wie man Styling anpasst
-   - Häufige Probleme und Lösungen
-```
-
----
-
-## Zusammenfassung
-
-**Gesamtdauer:** ~4-5 Stunden (mit Testing & Bug Fixing)
-
-**Kritische Tasks (Sonnet 4.5):**
-- Task 1: Analyse
-- Task 2: Recherche
-- Task 3: Design
-- Task 8: Nested Menu
-- Task 12: Testing
-
-**Auto-Mode Tasks:**
-- Task 4-7: Foundation & Basic Components
-- Task 9-11: Footer & Integration
-
-**Manuell:**
-- Task 13: Visual QA
-
-**Erfolgskriterien:**
-- ✅ Alle 10 ursprünglichen Anforderungen erfüllt
-- ✅ Keine Custom CSS Variants
-- ✅ 100% DaisyUI Standard
-- ✅ Keine duplicate IDs
-- ✅ Accessibility WCAG 2.1 AA
-- ✅ Alle Tests grün
-- ✅ Performance gut
-- ✅ Wartbar und dokumentiert
-
----
-
-**Version:** 1.0  
-**Letzte Aktualisierung:** 2026-01-13 (als veraltet markiert)
-
diff --git a/lib/membership_fees/membership_fees.ex b/lib/membership_fees/membership_fees.ex
index 7a2833a..114f34c 100644
--- a/lib/membership_fees/membership_fees.ex
+++ b/lib/membership_fees/membership_fees.ex
@@ -6,6 +6,11 @@ defmodule Mv.MembershipFees do
   - `MembershipFeeType` - Defines membership fee types with intervals and amounts
   - `MembershipFeeCycle` - Individual membership fee cycles per member
 
+  ## Public API
+  The domain exposes these main actions:
+  - MembershipFeeType CRUD: `create_membership_fee_type/1`, `list_membership_fee_types/0`, `update_membership_fee_type/2`, `destroy_membership_fee_type/1`
+  - MembershipFeeCycle CRUD: `create_membership_fee_cycle/1`, `list_membership_fee_cycles/0`, `update_membership_fee_cycle/2`, `destroy_membership_fee_cycle/1`
+
   ## Overview
   This domain handles the complete membership fee lifecycle including:
   - Fee type definitions (monthly, quarterly, half-yearly, yearly)
diff --git a/lib/mv_web/live/member_live/show.ex b/lib/mv_web/live/member_live/show.ex
index 1d79bca..359a9b2 100644
--- a/lib/mv_web/live/member_live/show.ex
+++ b/lib/mv_web/live/member_live/show.ex
@@ -12,7 +12,7 @@ defmodule MvWeb.MemberLive.Show do
   ## Sections
   - Personal Data: Name, address, contact information, membership dates, notes
   - Custom Fields: Dynamic fields in uniform grid layout (sorted by name)
-  - Payment Data: Mockup section with placeholder data
+  - Membership Fees: Tab showing all membership fee cycles with status management (via MembershipFeesComponent)
 
   ## Navigation
   - Back to member list