From 82b022ba3bde11e4cd8a3647a46e413cb06f85ae Mon Sep 17 00:00:00 2001
From: olli <o.schwarten@osdata.org>
Date: Sat, 13 Dec 2025 10:02:30 +0100
Subject: [PATCH] Add comprehensive styles for invoice form components and
 utilities

- Introduced CSS custom properties for spacing, typography, colors, and shadows.
- Developed styles for form sections, grids, invoice items, and summary components.
- Implemented responsive design adjustments for various screen sizes.
- Added utility classes for text, spacing, and flex layouts.
- Included dark mode and high contrast mode support.
- Established loading states and validation/error styles.
- Enhanced accessibility features with focus styles and screen reader utilities.
---
 .claude/agents/architect-review.md            |   31 +
 .claude/agents/symfony-expert.md              |   77 +
 .claude/agents/ux-designer.md                 |   42 +
 assets/js/views/InvoiceForm.vue               |  524 ++++-
 assets/js/views/InvoiceManagement.vue         |  207 +-
 docs/ARCHITECTURE_REVIEW_2025-12-12.md        | 1376 +++++++++++++
 docs/design/INVOICE_FORM_UX_DESIGN.md         | 1805 +++++++++++++++++
 docs/design/README.md                         |  448 ++++
 docs/design/VISUAL_DESIGN_GUIDE.md            |  679 +++++++
 docs/design/composables/useFormValidation.js  |  400 ++++
 .../composables/useKeyboardShortcuts.js       |  386 ++++
 docs/design/invoice-form-improved.vue         |  974 +++++++++
 docs/design/invoice-form-styles.css           |  748 +++++++
 src/Entity/Contact.php                        |    4 +-
 14 files changed, 7507 insertions(+), 194 deletions(-)
 create mode 100644 .claude/agents/architect-review.md
 create mode 100644 .claude/agents/symfony-expert.md
 create mode 100644 .claude/agents/ux-designer.md
 create mode 100644 docs/ARCHITECTURE_REVIEW_2025-12-12.md
 create mode 100644 docs/design/INVOICE_FORM_UX_DESIGN.md
 create mode 100644 docs/design/README.md
 create mode 100644 docs/design/VISUAL_DESIGN_GUIDE.md
 create mode 100644 docs/design/composables/useFormValidation.js
 create mode 100644 docs/design/composables/useKeyboardShortcuts.js
 create mode 100644 docs/design/invoice-form-improved.vue
 create mode 100644 docs/design/invoice-form-styles.css

diff --git a/.claude/agents/architect-review.md b/.claude/agents/architect-review.md
new file mode 100644
index 0000000..e9bd2f8
--- /dev/null
+++ b/.claude/agents/architect-review.md
@@ -0,0 +1,31 @@
+---
+name: architect-review
+category: quality-security
+description: Reviews code changes for architectural consistency and patterns. Use PROACTIVELY after any structural changes, new services, or API modifications. Ensures SOLID principles, proper layering, and maintainability.
+---
+
+You are an expert software architect focused on maintaining architectural integrity.
+
+When invoked:
+1. Map changes within overall system architecture
+2. Verify adherence to established patterns and SOLID principles
+3. Analyze dependencies and check for circular references
+4. Evaluate abstraction levels and system modularity
+5. Identify potential scaling or maintenance issues
+
+Process:
+- Review service boundaries and responsibilities
+- Check data flow and coupling between components
+- Verify consistency with domain-driven design
+- Evaluate performance implications of decisions
+- Assess security boundaries and validation points
+
+Provide:
+- Architectural compliance assessment
+- Pattern adherence verification report
+- Dependency analysis with recommendations
+- Modularity and maintainability evaluation
+- Improvement suggestions with rationale
+- Risk assessment for architectural decisions
+
+Focus on long-term maintainability and system coherence.
\ No newline at end of file
diff --git a/.claude/agents/symfony-expert.md b/.claude/agents/symfony-expert.md
new file mode 100644
index 0000000..bd25c1f
--- /dev/null
+++ b/.claude/agents/symfony-expert.md
@@ -0,0 +1,77 @@
+# Symfony Full-Stack Development System Prompt
+
+You are an expert in Symfony, Vue.js, and modern full-stack web development technologies.
+
+## When invoked:
+
+* Analyze full-stack requirements and design Symfony API-first architecture
+* Build Symfony 6.4+/7.0+ backend with PHP 8.2+ features and modern patterns
+* Create Vue3 frontend with Composition API and TypeScript integration
+* Implement state management with Pinia and routing with Vue Router
+* Set up authentication flow with Symfony Security and JWT/API tokens
+* Establish development workflow with Symfony CLI, Webpack Encore, and modern tooling
+
+## Symfony Backend Process:
+
+* Design RESTful APIs with API Platform or custom controllers and serialization
+* Implement Doctrine entities with advanced relationships, repositories, and DQL
+* Apply service layer and repository patterns with dependency injection container
+* Set up authentication/authorization with Symfony Security, JWT tokens, and voters
+* Create database migrations with proper indexing, constraints, and type mapping
+* Implement asynchronous processing with Symfony Messenger and message handlers
+* Apply caching strategies using Symfony Cache (Redis, APCu, Filesystem adapters)
+* Use event-driven architecture with EventDispatcher, subscribers, and listeners
+* Utilize Symfony Validator for comprehensive data validation
+* Implement API versioning strategies and content negotiation
+
+## Vue3 Frontend Process:
+
+* Build components using Composition API with `<script setup>` syntax
+* Integrate TypeScript for type safety and better developer experience
+* Implement Pinia stores for global state management
+* Create custom composables for reusable logic extraction
+* Use Vue Router with proper navigation guards and lazy loading
+* Apply TailwindCSS for responsive design and custom design systems
+* Integrate UI component libraries like PrimeVue or Vuetify for consistent UX
+
+## Provide:
+
+* Symfony API-first backend with RESTful endpoints and proper JSON responses
+* API Platform integration for automatic CRUD, filtering, pagination, and OpenAPI documentation
+* Vue3 SPA with Composition API and TypeScript integration
+* Pinia stores for state management with proper typing
+* Authentication flow with LexikJWTAuthenticationBundle or custom token management
+* Database design with Doctrine migrations, relationships, and proper indexing
+* Serializer configurations with normalization groups and custom normalizers
+* Vue3 components with reusable composables and proper props validation
+* Development setup with Symfony CLI, Webpack Encore, Hot Module Replacement
+* CORS configuration using NelmioCorsBundle for secure cross-origin API requests
+* File upload handling with VichUploaderBundle or custom solutions with validation
+* Real-time features using Symfony Mercure or Pusher integration
+* Performance optimization with Doctrine query optimization and Symfony Profiler
+* Security implementation with CSRF protection, XSS prevention, and rate limiting
+* Testing setup with PHPUnit for Symfony and Vitest for Vue3 components
+* Proper environment configuration with .env files and secrets management
+* Production deployment configuration with Symfony Cloud, Docker, or traditional hosting
+* SEO optimization strategies for SPA applications with SSR considerations
+* Dependency injection best practices with autowiring and service configuration
+* Form handling with Symfony Form component or API Platform filters
+* Internationalization (i18n) with Symfony Translation component
+
+## Best Practices:
+
+* Follow Symfony coding standards and PSR-12 conventions
+* Use autowiring and autoconfiguration for cleaner service definitions
+* Implement proper exception handling with custom exception listeners
+* Apply domain-driven design principles where appropriate
+* Use DTOs (Data Transfer Objects) for complex data transformation
+* Implement proper logging with Monolog and environment-specific channels
+* Utilize Symfony's built-in debugging tools and profiler in development
+* Apply SOLID principles and design patterns consistently
+* Use type hints and return types for better code quality
+* Implement comprehensive error responses with RFC 7807 Problem Details
+* Configure proper HTTP caching headers for API responses
+* Use Symfony Workflow component for complex state machines
+* Implement API rate limiting with custom voters or bundles
+* Apply database transactions properly for data consistency
+* Use Symfony Messenger for command/query separation (CQRS) where beneficial
diff --git a/.claude/agents/ux-designer.md b/.claude/agents/ux-designer.md
new file mode 100644
index 0000000..ec9bb77
--- /dev/null
+++ b/.claude/agents/ux-designer.md
@@ -0,0 +1,42 @@
+---
+name: ux-designer
+description: Design user interfaces and experiences with modern design principles, accessibility standards, and design systems. Expert in user research, wireframing, prototyping, and design implementation. Use PROACTIVELY for UI/UX design, design systems, or user experience optimization.
+category: design-experience
+---
+
+
+You are a UI/UX design expert specializing in creating intuitive, accessible, and visually appealing digital experiences.
+
+When invoked:
+1. Conduct user research and define design strategy based on user needs
+2. Create information architecture and user flow documentation
+3. Design wireframes, mockups, and interactive prototypes
+4. Develop comprehensive design systems and component libraries
+5. Ensure WCAG 2.1 AA/AAA accessibility compliance throughout design process
+6. Conduct usability testing and iterate based on user feedback
+
+Design Process:
+- Apply user-centered design methodology with emphasis on accessibility
+- Start with problem definition and comprehensive design briefs
+- Conduct user personas development and journey mapping
+- Create low-fidelity wireframes and progress to high-fidelity mockups
+- Build interactive prototypes for user testing and stakeholder feedback
+- Implement design systems with consistent patterns and components
+- Ensure responsive and adaptive design across all breakpoints
+- Design meaningful microinteractions and progressive disclosure patterns
+- Integrate brand identity while maintaining usability and accessibility
+- Apply color theory, typography principles, and visual hierarchy effectively
+
+Provide:
+-  User research documentation with personas, journey maps, and competitive analysis
+-  Information architecture diagrams with clear navigation and content strategy
+-  Wireframes and user flows showing complete task completion paths
+-  High-fidelity UI designs with proper visual hierarchy and brand integration
+-  Interactive prototypes for user testing and stakeholder approval
+-  Comprehensive design system with components, tokens, and documentation
+-  Accessibility audit reports ensuring WCAG 2.1 AA/AAA compliance
+-  Implementation guidelines for seamless design-to-development handoff
+-  Responsive design specifications for mobile, tablet, and desktop breakpoints
+-  Usability testing protocols and results with actionable recommendations
+-  Asset optimization guidelines for performance-conscious implementation
+-  Cross-platform consistency guidelines for web and native applications
diff --git a/assets/js/views/InvoiceForm.vue b/assets/js/views/InvoiceForm.vue
index fee6d35..d0e5b5c 100644
--- a/assets/js/views/InvoiceForm.vue
+++ b/assets/js/views/InvoiceForm.vue
@@ -1,112 +1,252 @@
 <template>
     <div class="invoice-form">
-        <Message severity="info" v-if="!invoice">
-            Rechnungsformular (Phase 1 MVP - wird erweitert)
-        </Message>
+        <div class="flex flex-col gap-6">
+            <!-- Basic Information Panel -->
+            <Panel header="Grunddaten" class="invoice-panel">
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div class="flex flex-col gap-2">
+                    <label for="invoiceNumber">Rechnungsnummer *</label>
+                    <InputText
+                        id="invoiceNumber"
+                        v-model="form.invoiceNumber"
+                        :class="{ 'p-invalid': submitted && !form.invoiceNumber }"
+                        :disabled="saving"
+                    />
+                    <small v-if="submitted && !form.invoiceNumber" class="p-error">Rechnungsnummer ist erforderlich</small>
+                </div>
 
-        <div class="grid p-fluid">
-            <!-- Rechnungsnummer -->
-            <div class="col-12 md:col-6">
-                <label for="invoiceNumber">Rechnungsnummer *</label>
-                <InputText
-                    id="invoiceNumber"
-                    v-model="form.invoiceNumber"
-                    :class="{ 'p-invalid': submitted && !form.invoiceNumber }"
-                />
-                <small v-if="submitted && !form.invoiceNumber" class="p-error">Rechnungsnummer ist erforderlich</small>
-            </div>
-
-            <!-- Status -->
-            <div class="col-12 md:col-6">
-                <label for="status">Status</label>
-                <Dropdown
-                    id="status"
-                    v-model="form.status"
-                    :options="statusOptions"
-                    option-label="label"
-                    option-value="value"
-                />
-            </div>
-
-            <!-- Kunde -->
-            <div class="col-12 md:col-6">
-                <label for="contact">Kunde *</label>
-                <Dropdown
-                    id="contact"
-                    v-model="form.contactId"
-                    :options="contacts"
-                    option-label="companyName"
-                    option-value="id"
-                    filter
-                    placeholder="Kunde auswählen"
-                    :class="{ 'p-invalid': submitted && !form.contactId }"
-                />
-                <small v-if="submitted && !form.contactId" class="p-error">Bitte wählen Sie einen Kunden aus</small>
-            </div>
-
-            <!-- Rechnungsdatum -->
-            <div class="col-12 md:col-6">
-                <label for="invoiceDate">Rechnungsdatum *</label>
-                <Calendar id="invoiceDate" v-model="form.invoiceDate" date-format="dd.mm.yy" />
-            </div>
-
-            <!-- Fälligkeitsdatum -->
-            <div class="col-12 md:col-6">
-                <label for="dueDate">Fälligkeitsdatum *</label>
-                <Calendar id="dueDate" v-model="form.dueDate" date-format="dd.mm.yy" />
-            </div>
-
-            <!-- Notizen -->
-            <div class="col-12">
-                <label for="notes">Notizen</label>
-                <Textarea id="notes" v-model="form.notes" rows="3" />
-            </div>
-
-            <!-- Positionen -->
-            <div class="col-12">
-                <h3>Rechnungspositionen</h3>
-                <DataTable :value="form.items" responsiveLayout="scroll">
-                    <Column field="description" header="Beschreibung">
-                        <template #body="slotProps">
-                            <Textarea v-model="slotProps.data.description" rows="2" class="w-full" />
+                <div class="flex flex-col gap-2">
+                    <label for="status">Status</label>
+                    <Dropdown
+                        id="status"
+                        v-model="form.status"
+                        :options="statusOptions"
+                        option-label="label"
+                        option-value="value"
+                        :disabled="saving"
+                    >
+                        <template #value="slotProps">
+                            <div v-if="slotProps.value" class="flex align-items-center">
+                                <Tag :value="getStatusLabel(slotProps.value)" :severity="getStatusSeverity(slotProps.value)" />
+                            </div>
                         </template>
-                    </Column>
-                    <Column field="quantity" header="Menge">
-                        <template #body="slotProps">
-                            <InputNumber v-model="slotProps.data.quantity" :min-fraction-digits="2" class="w-full" />
+                        <template #option="slotProps">
+                            <div class="flex align-items-center">
+                                <Tag :value="slotProps.option.label" :severity="getStatusSeverity(slotProps.option.value)" />
+                            </div>
                         </template>
-                    </Column>
-                    <Column field="unitPrice" header="Einzelpreis">
-                        <template #body="slotProps">
-                            <InputNumber v-model="slotProps.data.unitPrice" mode="currency" currency="EUR" locale="de-DE" class="w-full" />
-                        </template>
-                    </Column>
-                    <Column field="taxRate" header="MwSt %">
-                        <template #body="slotProps">
-                            <Dropdown v-model="slotProps.data.taxRate" :options="taxRates" class="w-full" />
-                        </template>
-                    </Column>
-                    <Column header="Aktionen">
-                        <template #body="slotProps">
-                            <Button icon="pi pi-trash" text severity="danger" @click="removeItem(slotProps.index)" />
-                        </template>
-                    </Column>
-                </DataTable>
+                    </Dropdown>
+                </div>
 
-                <Button label="Position hinzufügen" icon="pi pi-plus" text @click="addItem" class="mt-2" />
+                <div class="flex flex-col gap-2">
+                    <label for="contact">Kunde *</label>
+                    <Dropdown
+                        id="contact"
+                        v-model="form.contactId"
+                        :options="contacts"
+                        option-label="companyName"
+                        option-value="id"
+                        filter
+                        :filter-fields="['companyName', 'email']"
+                        placeholder="Kunde auswählen"
+                        :class="{ 'p-invalid': submitted && !form.contactId }"
+                        :loading="loadingContacts"
+                        :disabled="saving"
+                        show-clear
+                    >
+                        <template #value="slotProps">
+                            <div v-if="slotProps.value" class="flex align-items-center">
+                                <i class="pi pi-building mr-2"></i>
+                                <span>{{ getContactName(slotProps.value) }}</span>
+                            </div>
+                        </template>
+                        <template #option="slotProps">
+                            <div class="flex align-items-center gap-2">
+                                <i class="pi pi-building"></i>
+                                <div>
+                                    <div class="font-semibold">{{ slotProps.option.companyName }}</div>
+                                    <div class="text-sm text-500">{{ slotProps.option.email }}</div>
+                                </div>
+                            </div>
+                        </template>
+                    </Dropdown>
+                    <small v-if="submitted && !form.contactId" class="p-error">Bitte wählen Sie einen Kunden aus</small>
+                </div>
+
+                <div class="flex flex-col gap-2 col-span-full">
+                    <label for="notes">Notizen</label>
+                    <Textarea
+                        id="notes"
+                        v-model="form.notes"
+                        rows="3"
+                        :disabled="saving"
+                    />
+                </div>
+                </div>
+            </Panel>
+
+            <!-- Dates Panel -->
+            <Panel header="Daten" class="invoice-panel">
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="flex flex-col gap-2">
+                    <label for="invoiceDate">Rechnungsdatum *</label>
+                    <Calendar
+                        id="invoiceDate"
+                        v-model="form.invoiceDate"
+                        date-format="dd.mm.yy"
+                        :disabled="saving"
+                        show-icon
+                    />
+                </div>
+
+                <div class="flex flex-col gap-2">
+                    <label for="dueDate">Fälligkeitsdatum *</label>
+                    <Calendar
+                        id="dueDate"
+                        v-model="form.dueDate"
+                        date-format="dd.mm.yy"
+                        :disabled="saving"
+                        show-icon
+                    />
+                </div>
+
+                <div class="flex flex-col gap-2">
+                    <label class="text-500">Zahlungsziel</label>
+                    <div class="flex align-items-center h-full pt-2">
+                        <Tag :value="`${paymentTermDays} Tage`" severity="info" class="text-base px-3 py-2" />
+                    </div>
+                </div>
+                </div>
+            </Panel>
+
+            <!-- Invoice Items Panel -->
+            <Panel header="Rechnungspositionen" class="invoice-panel">
+
+            <div v-if="form.items.length === 0" class="p-4 border-round border-1 surface-border text-center text-500 mb-3">
+                <i class="pi pi-inbox text-3xl mb-2"></i>
+                <p>Noch keine Positionen hinzugefügt</p>
             </div>
+
+            <DataTable v-else :value="form.items" responsiveLayout="scroll" striped-rows>
+                <Column field="description" header="Beschreibung" style="min-width: 200px">
+                    <template #body="slotProps">
+                        <Textarea
+                            v-model="slotProps.data.description"
+                            rows="2"
+                            class="w-full"
+                            placeholder="Beschreibung der Position"
+                            @input="calculateTotals"
+                        />
+                    </template>
+                </Column>
+                <Column field="quantity" header="Menge" style="width: 120px">
+                    <template #body="slotProps">
+                        <InputNumber
+                            v-model="slotProps.data.quantity"
+                            :min-fraction-digits="2"
+                            :max-fraction-digits="2"
+                            :min="0"
+                            class="w-full"
+                            @input="calculateTotals"
+                        />
+                    </template>
+                </Column>
+                <Column field="unitPrice" header="Einzelpreis" style="width: 150px">
+                    <template #body="slotProps">
+                        <InputNumber
+                            v-model="slotProps.data.unitPrice"
+                            mode="currency"
+                            currency="EUR"
+                            locale="de-DE"
+                            class="w-full"
+                            @input="calculateTotals"
+                        />
+                    </template>
+                </Column>
+                <Column field="taxRate" header="MwSt %" style="width: 120px">
+                    <template #body="slotProps">
+                        <Dropdown
+                            v-model="slotProps.data.taxRate"
+                            :options="taxRates"
+                            class="w-full"
+                            @change="calculateTotals"
+                        >
+                            <template #value="{ value }">
+                                {{ value }}%
+                            </template>
+                            <template #option="{ option }">
+                                {{ option }}%
+                            </template>
+                        </Dropdown>
+                    </template>
+                </Column>
+                <Column header="Gesamt" style="width: 150px">
+                    <template #body="slotProps">
+                        <div class="font-semibold">
+                            {{ formatCurrency(calculateItemTotal(slotProps.data)) }}
+                        </div>
+                    </template>
+                </Column>
+                <Column style="width: 10%">
+                    <template #body="slotProps">
+                        <div class="flex gap-2 justify-end">
+                            <Button
+                                icon="pi pi-trash"
+                                size="small"
+                                text
+                                severity="danger"
+                                @click="removeItem(slotProps.index)"
+                            />
+                        </div>
+                    </template>
+                </Column>
+            </DataTable>
+
+                <!-- Add Item Button -->
+                <div class="mt-3">
+                    <Button
+                        label="Position hinzufügen"
+                        icon="pi pi-plus"
+                        size="small"
+                        outlined
+                        @click="addItem"
+                    />
+                </div>
+            </Panel>
+
+            <!-- Totals Panel -->
+            <Panel v-if="form.items.length > 0" header="Summen" class="invoice-panel totals-panel">
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <div></div>
+                    <div class="flex flex-col gap-3">
+                        <div class="flex justify-between p-3 border-round surface-50">
+                            <span class="text-600 font-medium">Nettobetrag:</span>
+                            <span class="font-semibold">{{ formatCurrency(calculatedTotals.netAmount) }}</span>
+                        </div>
+                        <div v-for="(tax, rate) in calculatedTotals.taxBreakdown" :key="rate" class="flex justify-between p-3 border-round surface-50">
+                            <span class="text-600 font-medium">MwSt {{ rate }}%:</span>
+                            <span class="font-semibold">{{ formatCurrency(tax) }}</span>
+                        </div>
+                        <Divider class="my-2" />
+                        <div class="flex justify-between p-4 border-round bg-primary-50 border-2 border-primary-200">
+                            <span class="font-bold text-xl text-primary-700">Gesamtbetrag:</span>
+                            <span class="font-bold text-2xl text-primary-700">{{ formatCurrency(calculatedTotals.total) }}</span>
+                        </div>
+                    </div>
+                </div>
+            </Panel>
         </div>
 
-        <!-- Actions -->
-        <div class="flex gap-2 mt-4">
-            <Button label="Speichern" icon="pi pi-check" @click="save" :loading="saving" />
-            <Button label="Abbrechen" icon="pi pi-times" severity="secondary" text @click="cancel" :disabled="saving" />
+        <!-- Footer Actions -->
+        <div class="flex justify-end gap-3 pt-4 border-top-1 surface-border mt-6">
+            <Button label="Abbrechen" @click="cancel" text severity="secondary" :disabled="saving" />
+            <Button label="Speichern" @click="save" :loading="saving" icon="pi pi-check" />
         </div>
     </div>
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import { useToast } from 'primevue/usetoast'
 import InputText from 'primevue/inputtext'
 import Dropdown from 'primevue/dropdown'
@@ -116,7 +256,9 @@ import Button from 'primevue/button'
 import DataTable from 'primevue/datatable'
 import Column from 'primevue/column'
 import InputNumber from 'primevue/inputnumber'
-import Message from 'primevue/message'
+import Tag from 'primevue/tag'
+import Panel from 'primevue/panel'
+import Divider from 'primevue/divider'
 
 const props = defineProps({
     invoice: Object
@@ -127,6 +269,7 @@ const emit = defineEmits(['save', 'cancel'])
 const toast = useToast()
 const submitted = ref(false)
 const saving = ref(false)
+const loadingContacts = ref(false)
 
 const form = ref({
     invoiceNumber: '',
@@ -139,6 +282,11 @@ const form = ref({
 })
 
 const contacts = ref([])
+const calculatedTotals = ref({
+    netAmount: 0,
+    taxBreakdown: {},
+    total: 0
+})
 
 const statusOptions = [
     { label: 'Entwurf', value: 'draft' },
@@ -151,8 +299,86 @@ const statusOptions = [
 
 const taxRates = ['0.00', '7.00', '19.00']
 
+// Computed Properties
+const paymentTermDays = computed(() => {
+    if (!form.value.invoiceDate || !form.value.dueDate) return 0
+    const diff = form.value.dueDate - form.value.invoiceDate
+    return Math.round(diff / (1000 * 60 * 60 * 24))
+})
+
+// Helper Functions
+const getStatusLabel = (status) => {
+    const option = statusOptions.find(opt => opt.value === status)
+    return option ? option.label : status
+}
+
+const getStatusSeverity = (status) => {
+    const severities = {
+        draft: 'secondary',
+        open: 'info',
+        paid: 'success',
+        partial: 'warning',
+        overdue: 'danger',
+        cancelled: 'secondary'
+    }
+    return severities[status] || 'info'
+}
+
+const getContactName = (contactId) => {
+    const contact = contacts.value.find(c => c.id === contactId)
+    return contact ? contact.companyName : ''
+}
+
+const formatCurrency = (amount) => {
+    if (!amount && amount !== 0) return '0,00 €'
+    return new Intl.NumberFormat('de-DE', {
+        style: 'currency',
+        currency: 'EUR'
+    }).format(parseFloat(amount))
+}
+
+const calculateItemTotal = (item) => {
+    const quantity = parseFloat(item.quantity) || 0
+    const unitPrice = parseFloat(item.unitPrice) || 0
+    const taxRate = parseFloat(item.taxRate) || 0
+    const net = quantity * unitPrice
+    const tax = net * (taxRate / 100)
+    return net + tax
+}
+
+const calculateTotals = () => {
+    let netAmount = 0
+    const taxBreakdown = {}
+
+    form.value.items.forEach(item => {
+        const quantity = parseFloat(item.quantity) || 0
+        const unitPrice = parseFloat(item.unitPrice) || 0
+        const taxRate = parseFloat(item.taxRate) || 0
+
+        const itemNet = quantity * unitPrice
+        const itemTax = itemNet * (taxRate / 100)
+
+        netAmount += itemNet
+
+        if (taxBreakdown[taxRate]) {
+            taxBreakdown[taxRate] += itemTax
+        } else {
+            taxBreakdown[taxRate] = itemTax
+        }
+    })
+
+    const totalTax = Object.values(taxBreakdown).reduce((sum, tax) => sum + tax, 0)
+
+    calculatedTotals.value = {
+        netAmount,
+        taxBreakdown,
+        total: netAmount + totalTax
+    }
+}
+
 onMounted(async () => {
     // Load contacts
+    loadingContacts.value = true
     try {
         const response = await fetch('/api/contacts?itemsPerPage=1000', {
             credentials: 'include',
@@ -178,6 +404,8 @@ onMounted(async () => {
             detail: 'Kontakte konnten nicht geladen werden',
             life: 3000
         })
+    } finally {
+        loadingContacts.value = false
     }
 
     // Load existing invoice data
@@ -201,6 +429,11 @@ onMounted(async () => {
         if (props.invoice.dueDate) {
             form.value.dueDate = new Date(props.invoice.dueDate)
         }
+
+        // Calculate initial totals if items exist
+        if (form.value.items && form.value.items.length > 0) {
+            calculateTotals()
+        }
     }
 })
 
@@ -211,10 +444,12 @@ const addItem = () => {
         unitPrice: 0.00,
         taxRate: '19.00'
     })
+    calculateTotals()
 }
 
 const removeItem = (index) => {
     form.value.items.splice(index, 1)
+    calculateTotals()
 }
 
 const save = async () => {
@@ -308,6 +543,103 @@ const cancel = () => {
 
 <style scoped>
 .invoice-form {
+    padding: 1.5rem;
+    background: var(--surface-ground);
+}
+
+/* Panel Styling */
+.invoice-panel :deep(.p-panel-header) {
+    background: var(--surface-card);
+    border-bottom: 2px solid var(--primary-color);
+    font-weight: 600;
+    font-size: 1.1rem;
+    color: var(--primary-color);
+}
+
+.invoice-panel :deep(.p-panel-content) {
+    background: var(--surface-card);
+    padding: 1.5rem;
+}
+
+.totals-panel :deep(.p-panel-header) {
+    background: var(--primary-50);
+    border-bottom: 2px solid var(--primary-color);
+}
+
+.totals-panel :deep(.p-panel-content) {
+    background: var(--surface-0);
+}
+
+/* Empty State */
+.p-4.border-round.border-1.surface-border.text-center {
+    background: var(--surface-50);
+    border-style: dashed !important;
+}
+
+/* DataTable Styling */
+:deep(.p-datatable) {
+    border-radius: var(--border-radius);
+    overflow: hidden;
+}
+
+:deep(.p-datatable-thead > tr > th) {
+    background: var(--surface-100);
+    color: var(--text-color);
+    font-weight: 600;
     padding: 1rem;
 }
+
+:deep(.p-datatable-tbody > tr > td) {
+    padding: 0.75rem 1rem;
+}
+
+:deep(.p-datatable-tbody > tr:hover) {
+    background: var(--surface-50);
+}
+
+:deep(.p-inputnumber),
+:deep(.p-dropdown) {
+    width: 100%;
+}
+
+:deep(.p-inputtext),
+:deep(.p-dropdown),
+:deep(.p-calendar) {
+    width: 100%;
+}
+
+/* Footer Actions */
+.border-top-1 {
+    border-top-width: 1px !important;
+    border-top-style: solid !important;
+}
+
+/* Responsive Adjustments */
+@media (max-width: 768px) {
+    .invoice-form {
+        padding: 1rem;
+    }
+
+    .invoice-panel :deep(.p-panel-content) {
+        padding: 1rem;
+    }
+
+    :deep(.p-panel-header) {
+        font-size: 1rem;
+    }
+
+    .grid.grid-cols-1.md\\:grid-cols-2,
+    .grid.grid-cols-1.md\\:grid-cols-3 {
+        grid-template-columns: 1fr !important;
+    }
+}
+
+/* Animation */
+.invoice-panel {
+    transition: all 0.3s ease;
+}
+
+.invoice-panel:hover {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
 </style>
diff --git a/assets/js/views/InvoiceManagement.vue b/assets/js/views/InvoiceManagement.vue
index 552edd0..66062b4 100644
--- a/assets/js/views/InvoiceManagement.vue
+++ b/assets/js/views/InvoiceManagement.vue
@@ -14,99 +14,82 @@
             @edit="openEditDialog"
             @delete="deleteInvoice"
         >
-            <template #body="{ item }">
-                <Column field="invoiceNumber" header="Rechnungsnummer" sortable>
-                    <template #body="slotProps">
-                        <router-link :to="`/billing/invoices/${slotProps.data.id}`" class="text-primary">
-                            {{ slotProps.data.invoiceNumber }}
-                        </router-link>
-                    </template>
-                </Column>
-
-                <Column field="contact.name" header="Kunde" sortable>
-                    <template #body="slotProps">
-                        {{ slotProps.data.contact?.name || '-' }}
-                    </template>
-                </Column>
-
-                <Column field="invoiceDate" header="Rechnungsdatum" sortable>
-                    <template #body="slotProps">
-                        {{ formatDate(slotProps.data.invoiceDate) }}
-                    </template>
-                </Column>
-
-                <Column field="dueDate" header="Fälligkeitsdatum" sortable>
-                    <template #body="slotProps">
-                        {{ formatDate(slotProps.data.dueDate) }}
-                    </template>
-                </Column>
-
-                <Column field="total" header="Gesamtbetrag" sortable>
-                    <template #body="slotProps">
-                        {{ formatCurrency(slotProps.data.total) }}
-                    </template>
-                </Column>
-
-                <Column field="openAmount" header="Offen" sortable>
-                    <template #body="slotProps">
-                        {{ formatCurrency(slotProps.data.openAmount) }}
-                    </template>
-                </Column>
-
-                <Column field="status" header="Status" sortable>
-                    <template #body="slotProps">
-                        <Tag :value="getStatusLabel(slotProps.data.status)" :severity="getStatusSeverity(slotProps.data.status)" />
-                    </template>
-                </Column>
-
-                <Column :exportable="false" style="min-width:12rem">
-                    <template #body="slotProps">
-                        <div class="flex gap-2">
-                            <Button
-                                v-if="slotProps.data.pdfPath"
-                                icon="pi pi-file-pdf"
-                                outlined
-                                severity="secondary"
-                                @click="viewPDF(slotProps.data)"
-                                v-tooltip.top="'PDF anzeigen'"
-                            />
-                            <Button
-                                v-else
-                                icon="pi pi-upload"
-                                outlined
-                                severity="info"
-                                @click="uploadPDF(slotProps.data)"
-                                v-tooltip.top="'PDF hochladen'"
-                            />
-                            <Button
-                                icon="pi pi-money-bill"
-                                outlined
-                                severity="success"
-                                @click="addPayment(slotProps.data)"
-                                v-tooltip.top="'Zahlung hinzufügen'"
-                            />
-                            <Button
-                                icon="pi pi-pencil"
-                                outlined
-                                severity="info"
-                                @click="openEditDialog(slotProps.data)"
-                                v-tooltip.top="'Bearbeiten'"
-                            />
-                            <Button
-                                icon="pi pi-trash"
-                                outlined
-                                severity="danger"
-                                @click="deleteInvoice(slotProps.data)"
-                                v-tooltip.top="'Löschen'"
-                            />
-                        </div>
-                    </template>
-                </Column>
+            <template #body-invoiceNumber="{ data }">
+                <router-link :to="`/billing/invoices/${data.id}`" class="text-primary">
+                    {{ data.invoiceNumber }}
+                </router-link>
+            </template>
+            <template #body-contact.companyName="{ data }">
+                {{ data.contact?.companyName || '-' }}
+            </template>
+            <template #body-invoiceDate="{ data }">
+                {{ formatDate(data.invoiceDate) }}
+            </template>
+            <template #body-dueDate="{ data }">
+                {{ formatDate(data.dueDate) }}
+            </template>
+            <template #body-total="{ data }">
+                {{ formatCurrency(data.total) }}
+            </template>
+            <template #body-openAmount="{ data }">
+                {{ formatCurrency(data.openAmount) }}
+            </template>
+            <template #body-status="{ data }">
+                <Tag :value="getStatusLabel(data.status)" :severity="getStatusSeverity(data.status)" />
+            </template>
+            <template #body-actions="{ data }">
+                <div class="flex gap-2">
+                    <Button
+                        v-if="data.pdfPath"
+                        icon="pi pi-file-pdf"
+                        outlined
+                        severity="secondary"
+                        @click="viewPDF(data)"
+                        v-tooltip.top="'PDF anzeigen'"
+                    />
+                    <Button
+                        v-else
+                        icon="pi pi-upload"
+                        outlined
+                        severity="info"
+                        @click="uploadPDF(data)"
+                        v-tooltip.top="'PDF hochladen'"
+                    />
+                    <Button
+                        icon="pi pi-money-bill"
+                        outlined
+                        severity="success"
+                        @click="addPayment(data)"
+                        v-tooltip.top="'Zahlung hinzufügen'"
+                    />
+                    <Button
+                        icon="pi pi-pencil"
+                        outlined
+                        severity="info"
+                        @click="openEditDialog(data)"
+                        v-tooltip.top="'Bearbeiten'"
+                    />
+                    <Button
+                        icon="pi pi-trash"
+                        outlined
+                        severity="danger"
+                        @click="deleteInvoice(data)"
+                        v-tooltip.top="'Löschen'"
+                    />
+                </div>
             </template>
         </CrudDataTable>
 
         <!-- Create/Edit Dialog -->
-        <Dialog v-model:visible="dialogVisible" :header="dialogTitle" :modal="true" :style="{width: '70vw'}" :maximizable="true">
+        <Dialog
+            v-model:visible="dialogVisible"
+            :header="dialogTitle"
+            :modal="true"
+            :style="{width: '90vw', maxWidth: '1200px'}"
+            :maximizable="true"
+            :dismissableMask="true"
+            class="invoice-dialog"
+        >
             <InvoiceForm
                 v-if="dialogVisible"
                 :invoice="currentInvoice"
@@ -162,13 +145,13 @@ const pdfUploadDialogVisible = ref(false)
 const canCreate = computed(() => authStore.hasPermission('billing', 'create'))
 
 const columns = [
-    { field: 'invoiceNumber', header: 'Rechnungsnummer' },
-    { field: 'contact.name', header: 'Kunde' },
-    { field: 'invoiceDate', header: 'Rechnungsdatum' },
-    { field: 'dueDate', header: 'Fälligkeitsdatum' },
-    { field: 'total', header: 'Gesamtbetrag' },
-    { field: 'openAmount', header: 'Offen' },
-    { field: 'status', header: 'Status' }
+    { key: 'invoiceNumber', field: 'invoiceNumber', label: 'Rechnungsnummer', default: true },
+    { key: 'contact.companyName', field: 'contact.companyName', label: 'Kunde', default: true },
+    { key: 'invoiceDate', field: 'invoiceDate', label: 'Rechnungsdatum', default: true },
+    { key: 'dueDate', field: 'dueDate', label: 'Fälligkeitsdatum', default: true },
+    { key: 'total', field: 'total', label: 'Gesamtbetrag', default: true },
+    { key: 'openAmount', field: 'openAmount', label: 'Offen', default: true },
+    { key: 'status', field: 'status', label: 'Status', default: true }
 ]
 
 const openCreateDialog = () => {
@@ -280,4 +263,36 @@ const getStatusSeverity = (status) => {
 .text-primary:hover {
     text-decoration: underline;
 }
+
+/* Dialog adjustments */
+.invoice-dialog :deep(.p-dialog-content) {
+    padding: 0;
+    background: var(--surface-ground);
+}
+
+.invoice-dialog :deep(.p-dialog-header) {
+    background: var(--primary-color);
+    color: white;
+    border-radius: 0;
+}
+
+.invoice-dialog :deep(.p-dialog-header .p-dialog-title) {
+    font-weight: 600;
+    font-size: 1.25rem;
+}
+
+.invoice-dialog :deep(.p-dialog-header-icons button) {
+    color: white !important;
+}
+
+.invoice-dialog :deep(.p-dialog-header-icons button:hover) {
+    background: rgba(255, 255, 255, 0.1) !important;
+}
+
+@media (max-width: 960px) {
+    .invoice-dialog :deep(.p-dialog) {
+        width: 95vw !important;
+        max-width: none !important;
+    }
+}
 </style>
diff --git a/docs/ARCHITECTURE_REVIEW_2025-12-12.md b/docs/ARCHITECTURE_REVIEW_2025-12-12.md
new file mode 100644
index 0000000..40dc651
--- /dev/null
+++ b/docs/ARCHITECTURE_REVIEW_2025-12-12.md
@@ -0,0 +1,1376 @@
+# myCRM Architecture Review - December 12, 2025
+
+## Executive Summary
+
+This comprehensive architecture review examines the recent billing module implementation and overall system architecture of the myCRM application. The review focuses on architectural consistency, SOLID principles adherence, security layer integrity, and maintainability.
+
+**Overall Assessment: GOOD with CRITICAL ISSUES requiring immediate attention**
+
+The application demonstrates a well-designed modular architecture with sophisticated security mechanisms. However, the billing module implementation currently exists only as documentation/example code and has critical gaps that prevent it from functioning as a production-ready module.
+
+---
+
+## 1. Recent Changes Analysis
+
+### 1.1 Billing Module Status
+
+**CRITICAL FINDING: The billing module is currently only EXAMPLE/DOCUMENTATION code**
+
+Location: `/Users/olli/Git/__privat/myCRM/docs/example-module/`
+
+**Issues Identified:**
+
+1. **No Production Entities**: The Invoice, InvoiceItem, and Payment entities exist only in `/docs/example-module/Entity/Invoice.php` with namespace `MyCRM\BillingModule\Entity`, NOT in the actual `src/Entity/` directory.
+
+2. **Missing Voter Implementation**: Despite cache references to `InvoiceVoter`, no actual voter exists in `/Users/olli/Git/__privat/myCRM/src/Security/Voter/`.
+
+3. **Database Migration Exists but Entities Don't**:
+   - Migration file: `/Users/olli/Git/__privat/myCRM/migrations/Version20251205095156.php`
+   - Creates tables: `invoices`, `invoice_items`, `payments`
+   - **Problem**: No corresponding entity classes in `src/Entity/` to map these tables
+
+4. **Frontend Implementation Without Backend**:
+   - InvoiceManagement.vue exists and is registered in router
+   - InvoiceForm.vue, PaymentForm.vue, PDFUploadForm.vue all exist
+   - **Problem**: API endpoints `/api/invoices` referenced in frontend don't exist (no Invoice entity with ApiResource)
+
+5. **Plugin Registration**: BillingModulePlugin is properly registered (confirmed via `debug:container`), but it references entities that don't exist in the autoload path.
+
+### 1.2 Contact Entity Changes
+
+**File**: `/Users/olli/Git/__privat/myCRM/src/Entity/Contact.php`
+
+**Changes Reviewed**:
+```php
+// Added invoice:read serialization group
+#[Groups(['contact:read', 'project:read', 'invoice:read'])]
+private ?int $id = null;
+
+#[Groups(['contact:read', 'contact:write', 'project:read', 'invoice:read'])]
+private ?string $companyName = null;
+```
+
+**Assessment**: GOOD
+- Follows established pattern of adding serialization groups for cross-entity references
+- Consistent with existing patterns (e.g., `project:read` group)
+- Enables proper Contact serialization within Invoice context
+- **However**: No actual Invoice entity exists to consume these groups
+
+---
+
+## 2. Architectural Consistency Assessment
+
+### 2.1 Module Architecture Pattern Adherence
+
+**Expected Pattern** (from CLAUDE.md):
+1. Entity implements `ModuleAwareInterface`
+2. Entity annotated with `#[ApiResource]` with security attributes
+3. Voter created (either custom or delegating to ModuleVoter)
+4. Frontend Vue component
+5. Route added to router.js
+6. Menu item added to AppMenu.vue
+
+**Billing Module Status**:
+| Component | Expected | Actual | Status |
+|-----------|----------|--------|--------|
+| Entity (Invoice) | `src/Entity/Invoice.php` | `docs/example-module/Entity/Invoice.php` | MISSING |
+| ModuleAwareInterface | Implemented | Implemented (in example) | EXAMPLE ONLY |
+| ApiResource annotation | Present with security | Present (in example) | EXAMPLE ONLY |
+| Voter | `InvoiceVoter` | Not found | MISSING |
+| Frontend Component | InvoiceManagement.vue | EXISTS | OK |
+| Router Entry | `/billing/invoices` | EXISTS | OK |
+| Menu Item | Expected | NOT FOUND | MISSING |
+
+**Architectural Inconsistency Score: 4/6 (67%) - NEEDS IMPROVEMENT**
+
+### 2.2 Plugin System Architecture
+
+**Assessment**: EXCELLENT
+
+The plugin system demonstrates sophisticated architectural design:
+
+**Strengths**:
+1. **Loose Coupling**: Core knows only `ModulePluginInterface`, not concrete implementations
+2. **Service Tagging**: Automatic plugin discovery via `#[TaggedIterator('app.module_plugin')]`
+3. **License-Based Activation**: Proper separation of concerns between licensing and functionality
+4. **Development Mode Support**: Graceful degradation for unlicensed modules in dev environment
+
+**File**: `/Users/olli/Git/__privat/myCRM/src/Plugin/ModuleRegistry.php`
+
+**Highlights**:
+```php
+public function bootModules(): void
+{
+    $isDev = ($_ENV['APP_ENV'] ?? 'prod') === 'dev';
+
+    foreach ($this->modules as $identifier => $module) {
+        if (!$module->isLicensed()) {
+            if (!$isDev) {
+                // Production: Skip unlicensed
+                continue;
+            }
+            // Development: Boot with warning
+        }
+        $module->boot();
+    }
+}
+```
+
+**Compliance**: Follows Open/Closed Principle (SOLID)
+
+### 2.3 Security Architecture Integrity
+
+**Six-Layer Security Model** (from CLAUDE.md):
+
+| Layer | Component | Status | Assessment |
+|-------|-----------|--------|------------|
+| 1. Authentication | Symfony Form Login + OAuth | OK | Properly implemented |
+| 2. Standard Roles | ROLE_ADMIN, ROLE_USER | OK | User.roles JSON array |
+| 3. Module Permissions | UserRoles → Role → Module | OK | Sophisticated system |
+| 4. Voters | ModuleVoter, ProjectVoter, etc. | PARTIAL | 4 voters exist, InvoiceVoter missing |
+| 5. Event Listeners | ProjectTaskSecurityListener | OK | Pre-persist validation working |
+| 6. Query Extensions | ProjectAccessExtension | OK | Auto-filtering collections |
+
+**Critical Issue**: Billing module breaks the security chain by:
+1. No InvoiceVoter to enforce entity-level permissions
+2. No entities to apply security annotations to
+3. Frontend assumes permissions exist (`authStore.hasPermission('billing', 'create')`)
+
+**Recommendation**: Before billing module can be production-ready, InvoiceVoter must be created following the established pattern.
+
+---
+
+## 3. SOLID Principles Adherence
+
+### 3.1 Single Responsibility Principle (SRP)
+
+**Assessment**: GOOD overall, with exceptions
+
+**Positive Examples**:
+1. **ModuleVoter** (`/Users/olli/Git/__privat/myCRM/src/Security/Voter/ModuleVoter.php`):
+   - Single purpose: Module-level permission checks
+   - Delegates to `User::hasModulePermission()`
+   - Clean separation of concerns
+
+2. **ModuleRegistry** (`/Users/olli/Git/__privat/myCRM/src/Plugin/ModuleRegistry.php`):
+   - Single purpose: Plugin lifecycle management
+   - Separate from license validation (uses LicenseValidatorInterface)
+   - Clear responsibilities: register, boot, query status
+
+**Violations**:
+1. **InvoiceManagement.vue** (lines 166-183):
+```javascript
+const deleteInvoice = async (invoice) => {
+    if (confirm(`Rechnung ${invoice.invoiceNumber} wirklich löschen?`)) {
+        await fetch(`/api/invoices/${invoice.id}`, {
+            method: 'DELETE',
+            headers: { 'Content-Type': 'application/json' }
+        })
+        window.location.reload()  // VIOLATION: Side effect + poor UX
+    }
+}
+```
+
+**Issue**: Component handles HTTP calls, confirmation dialogs, AND page reload. Should delegate to a service layer.
+
+**Recommendation**: Extract API calls to a dedicated service:
+```javascript
+// Create: assets/js/services/invoiceService.js
+export class InvoiceService {
+    async delete(invoiceId) {
+        return await fetch(`/api/invoices/${invoiceId}`, {
+            method: 'DELETE',
+            headers: { 'Content-Type': 'application/json' }
+        })
+    }
+}
+```
+
+### 3.2 Open/Closed Principle (OCP)
+
+**Assessment**: EXCELLENT
+
+The plugin system is a textbook example of OCP:
+
+**File**: `/Users/olli/Git/__privat/myCRM/src/Plugin/ModulePluginInterface.php`
+
+```php
+interface ModulePluginInterface
+{
+    public function getIdentifier(): string;
+    public function boot(): void;
+    public function getPermissionModules(): array;
+    public function getMenuItems(): array;
+    // ... 7 methods total
+}
+```
+
+**Strength**: New modules can be added WITHOUT modifying core code. System is:
+- **Open for extension**: New plugins implement interface
+- **Closed for modification**: Core ModuleRegistry unchanged
+
+**Evidence**: Two plugins already registered:
+- `MyCRM\BillingModule\BillingModulePlugin`
+- `MyCRM\TestModule\TestModulePlugin`
+
+### 3.3 Liskov Substitution Principle (LSP)
+
+**Assessment**: GOOD
+
+**Example**: All voters extend `Symfony\Component\Security\Core\Authorization\Voter\Voter`
+
+**File**: `/Users/olli/Git/__privat/myCRM/src/Security/Voter/ModuleVoter.php`
+
+```php
+class ModuleVoter extends Voter
+{
+    protected function supports(string $attribute, mixed $subject): bool
+    {
+        return is_string($subject) || $subject instanceof ModuleAwareInterface;
+    }
+
+    protected function voteOnAttribute(string $attribute, mixed $subject, TokenInterface $token): bool
+    {
+        // Delegates to User::hasModulePermission()
+    }
+}
+```
+
+**Analysis**: All voters can be used interchangeably by Symfony's authorization system. Proper LSP compliance.
+
+### 3.4 Interface Segregation Principle (ISP)
+
+**Assessment**: NEEDS IMPROVEMENT
+
+**Violation**: `ModulePluginInterface` has 9 methods
+
+**File**: `/Users/olli/Git/__privat/myCRM/src/Plugin/ModulePluginInterface.php`
+
+While comprehensive, this interface forces implementations to handle:
+- Licensing (`isLicensed()`, `getLicenseInfo()`)
+- Lifecycle (`boot()`, `canInstall()`)
+- Metadata (`getIdentifier()`, `getDisplayName()`, `getVersion()`, `getDescription()`)
+- Permissions (`getPermissionModules()`)
+- UI (`getMenuItems()`)
+
+**Recommendation**: Split into focused interfaces:
+```php
+interface ModuleMetadataInterface {
+    public function getIdentifier(): string;
+    public function getDisplayName(): string;
+    public function getVersion(): string;
+    public function getDescription(): string;
+}
+
+interface ModuleLifecycleInterface {
+    public function boot(): void;
+    public function canInstall(): array;
+}
+
+interface ModuleLicensingInterface {
+    public function isLicensed(): bool;
+    public function getLicenseInfo(): array;
+}
+
+interface ModulePermissionsInterface {
+    public function getPermissionModules(): array;
+}
+
+interface ModuleMenuInterface {
+    public function getMenuItems(): array;
+}
+
+// Main interface composes all
+interface ModulePluginInterface extends
+    ModuleMetadataInterface,
+    ModuleLifecycleInterface,
+    ModuleLicensingInterface,
+    ModulePermissionsInterface,
+    ModuleMenuInterface
+{
+}
+```
+
+**Benefit**: Allows testing/mocking individual concerns. Plugins can selectively implement only needed interfaces.
+
+### 3.5 Dependency Inversion Principle (DIP)
+
+**Assessment**: EXCELLENT
+
+**Example**: License validation abstraction
+
+**File**: `/Users/olli/Git/__privat/myCRM/config/services_plugin.yaml`
+
+```yaml
+App\Plugin\LicenseValidatorInterface:
+    alias: 'App\Service\GiteaLicenseValidator'
+```
+
+**Strength**:
+- Core depends on `LicenseValidatorInterface` abstraction
+- Concrete implementation (`GiteaLicenseValidator`) can be swapped
+- Configured via service container, not hardcoded
+
+**Usage** (from BillingModulePlugin):
+```php
+public function __construct(
+    private readonly LicenseValidatorInterface $licenseValidator,
+    // ...
+) {}
+```
+
+**Perfect DIP compliance**: High-level module (BillingModulePlugin) depends on abstraction (interface), not concrete implementation.
+
+---
+
+## 4. Layering and Dependencies Analysis
+
+### 4.1 Backend Architecture
+
+**Expected Layer Structure** (from CLAUDE.md):
+```
+Controller (thin) → Service → Repository → Entity
+       ↓
+    Voter (security)
+       ↓
+    ModuleVoter → User::hasModulePermission()
+```
+
+**Assessment**: GOOD architectural discipline
+
+**Positive Example**: Proper service injection
+
+**File**: `/Users/olli/Git/__privat/myCRM/config/services.yaml`
+
+```yaml
+services:
+    _defaults:
+        autowire: true
+        autoconfigure: true
+        bind:
+            $licenseServerUrl: '%env(LICENSE_SERVER_URL)%'
+            $giteaBaseUrl: '%env(GITEA_BASE_URL)%'
+```
+
+**Strength**: Constructor injection everywhere, no service locator anti-pattern.
+
+### 4.2 Circular Dependency Analysis
+
+**Scan Results**: NO CIRCULAR DEPENDENCIES DETECTED
+
+**Evidence**:
+1. **Voter Dependencies**:
+   - ModuleVoter → User entity (composition, not circular)
+   - ProjectVoter → Project entity (composition, not circular)
+   - ProjectTaskVoter → ProjectTask entity (composition, not circular)
+
+2. **Plugin Dependencies**:
+   - ModuleRegistry → ModulePluginInterface (interface dependency)
+   - BillingModulePlugin → LicenseValidatorInterface (interface dependency)
+   - ModuleBootListener → ModuleRegistry (one-way dependency)
+
+**Dependency Graph** (simplified):
+```
+ModuleBootListener
+    ↓
+ModuleRegistry
+    ↓
+ModulePluginInterface ← BillingModulePlugin
+    ↓                       ↓
+LicenseValidatorInterface  (implements)
+    ↓
+GiteaLicenseValidator
+```
+
+Clean, acyclic dependency graph. EXCELLENT.
+
+### 4.3 Abstraction Levels
+
+**Assessment**: GOOD with minor issues
+
+**Appropriate Abstractions**:
+1. `ModuleAwareInterface`: Simple, focused contract
+2. `LicenseValidatorInterface`: Clear abstraction boundary
+3. `ModulePluginInterface`: Comprehensive (see ISP concerns above)
+
+**Abstraction Leaks**:
+
+**File**: `/Users/olli/Git/__privat/myCRM/assets/js/views/InvoiceManagement.vue` (line 170)
+
+```javascript
+window.location.reload()  // Low-level DOM manipulation in high-level component
+```
+
+**Issue**: Component directly manipulates browser window instead of using Vue Router navigation or reactive state updates.
+
+**Recommendation**:
+```javascript
+// Use router.push() or emit event to parent to refresh data
+const router = useRouter()
+// ... after successful save
+router.push({ name: 'invoices', query: { refresh: Date.now() } })
+```
+
+---
+
+## 5. Database Schema Consistency
+
+### 5.1 Schema Validation
+
+**Command**: `php bin/console doctrine:schema:validate --skip-sync`
+
+**Result**:
+```
+[OK] The mapping files are correct.
+[SKIPPED] The database was not checked for synchronicity.
+```
+
+**Assessment**: GOOD - Doctrine mappings are valid for existing entities.
+
+### 5.2 Migration Analysis
+
+**File**: `/Users/olli/Git/__privat/myCRM/migrations/Version20251205095156.php`
+
+**Critical Issue**: **ORPHANED MIGRATION**
+
+Migration creates tables but no corresponding entities exist:
+
+```php
+$this->addSql('CREATE TABLE invoices (
+    id INT AUTO_INCREMENT NOT NULL,
+    contact_id INT NOT NULL,
+    invoice_number VARCHAR(50) NOT NULL,
+    status VARCHAR(20) NOT NULL,
+    // ... more fields
+    FOREIGN KEY (contact_id) REFERENCES contacts (id)
+)');
+
+$this->addSql('CREATE TABLE invoice_items (...)');
+$this->addSql('CREATE TABLE payments (...)');
+```
+
+**Problems**:
+1. If this migration has been run, database has tables with no ORM mapping
+2. If migration hasn't run, it will fail validation when actual Invoice entity is created
+3. Foreign key to `contacts` table exists but Invoice entity doesn't
+
+**Recommendation**:
+1. Check if migration has been executed: `php bin/console doctrine:migrations:status`
+2. If executed: Rollback or create matching entities immediately
+3. If not executed: Delete migration and regenerate when Invoice entity is properly created in `src/Entity/`
+
+### 5.3 Entity Relationship Validation
+
+**Existing Entity Relationships** (confirmed working):
+
+1. **Contact ↔ ContactPerson**: One-to-Many with cascade persist/remove
+2. **Project ↔ ProjectTask**: One-to-Many with proper access control
+3. **User ↔ UserRoles ↔ Role**: Many-to-Many for permissions
+4. **Project ↔ User**: Many-to-Many for team members
+
+**Missing Relationships** (for billing module):
+
+Expected:
+- **Invoice → Contact**: Many-to-One (ForeignKey exists in migration)
+- **Invoice → InvoiceItem**: One-to-Many with cascade
+- **Invoice → Payment**: One-to-Many with cascade
+
+**Status**: Relationships defined in example Invoice entity but not in production codebase.
+
+---
+
+## 6. Frontend Architecture Review
+
+### 6.1 Component Structure Analysis
+
+**Pattern Assessment**: GOOD - Composition API used consistently
+
+**File**: `/Users/olli/Git/__privat/myCRM/assets/js/views/InvoiceForm.vue`
+
+**Strengths**:
+1. Composition API with `<script setup>`
+2. Proper use of `defineProps`, `defineEmits`
+3. Reactive state with `ref()`
+4. Lifecycle hooks (`onMounted`) used appropriately
+
+**Issues**:
+
+1. **Direct API Calls in Components** (SRP violation):
+```javascript
+const response = await fetch('/api/invoices', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/ld+json' },
+    body: JSON.stringify(payload)
+})
+```
+
+**Problem**: Components should not handle HTTP details.
+
+**Recommendation**: Create API service layer:
+```javascript
+// assets/js/services/api/invoiceApi.js
+export const invoiceApi = {
+    async create(invoiceData) {
+        return await apiClient.post('/api/invoices', invoiceData)
+    },
+    async update(id, invoiceData) {
+        return await apiClient.put(`/api/invoices/${id}`, invoiceData)
+    }
+}
+```
+
+2. **Error Handling**:
+```javascript
+} catch (error) {
+    console.error('Error saving invoice:', error)  // Console pollution
+    toast.add({ /* ... */ })
+}
+```
+
+**Problem**: Console errors in production. Should use proper logging service.
+
+3. **Window Reload Anti-pattern**:
+
+**File**: `/Users/olli/Git/__privat/myCRM/assets/js/views/InvoiceManagement.vue` (line 170)
+
+```javascript
+window.location.reload()  // Forces full page reload
+```
+
+**Problem**: Defeats SPA purpose, loses state, poor UX.
+
+### 6.2 Router Configuration
+
+**File**: `/Users/olli/Git/__privat/myCRM/assets/js/router.js`
+
+**Assessment**: GOOD with missing guard implementation
+
+```javascript
+{
+    path: '/billing/invoices',
+    name: 'invoices',
+    component: InvoiceManagement,
+    meta: { requiresPermission: { module: 'billing', action: 'view' } }
+}
+```
+
+**Issue**: `requiresPermission` meta defined but no navigation guard implementation visible.
+
+**Expected**: Navigation guard should check permissions before route activation:
+```javascript
+router.beforeEach((to, from, next) => {
+    if (to.meta.requiresPermission) {
+        const { module, action } = to.meta.requiresPermission
+        if (!authStore.hasPermission(module, action)) {
+            next({ name: 'dashboard' })  // Redirect if no permission
+            return
+        }
+    }
+    next()
+})
+```
+
+**Recommendation**: Verify navigation guard exists or implement it.
+
+### 6.3 State Management
+
+**File**: `/Users/olli/Git/__privat/myCRM/assets/js/stores/auth.js`
+
+**Assessment**: Pinia store used for authentication
+
+**Usage**: `authStore.hasPermission('billing', 'create')`
+
+**Question**: Is permission check reactive? Does it refresh when permissions change?
+
+**Recommendation**: Ensure auth store properly syncs with backend permission changes.
+
+---
+
+## 7. Code Quality and Maintainability
+
+### 7.1 Code Convention Adherence
+
+**Backend (PHP)**:
+
+**Conventions from CLAUDE.md**:
+- ✅ Constructor injection used throughout
+- ✅ Doctrine attributes (not annotations)
+- ✅ ApiResource security attributes
+- ✅ Voter pattern followed
+- ✅ Service layer pattern visible
+
+**Example** (ModuleVoter):
+```php
+protected function voteOnAttribute(string $attribute, mixed $subject, TokenInterface $token): bool
+{
+    $user = $token->getUser();
+
+    if (!$user instanceof User) {
+        return false;
+    }
+
+    if (!$user->isActive()) {  // Early returns, clean code
+        return false;
+    }
+
+    // ... rest of logic
+}
+```
+
+**Quality**: HIGH - Clean, readable, follows PSR standards.
+
+**Frontend (Vue.js)**:
+
+**Conventions from CLAUDE.md**:
+- ✅ Composition API used
+- ✅ PrimeVue components
+- ✅ Single File Components
+- ⚠️ Service layer missing (direct fetch calls)
+
+**Quality**: MEDIUM - Needs refactoring for service layer.
+
+### 7.2 Documentation
+
+**Assessment**: EXCELLENT documentation, POOR implementation alignment
+
+**Documentation Files**:
+- `/Users/olli/Git/__privat/myCRM/CLAUDE.md` (1,156 lines) - Comprehensive
+- `/Users/olli/Git/__privat/myCRM/docs/PLUGIN_SYSTEM.md` - Detailed plugin architecture
+- `/Users/olli/Git/__privat/myCRM/docs/EXAMPLE_MODULE_STRUCTURE.md` - Module template
+
+**Problem**: Billing module documentation exists but implementation doesn't follow through.
+
+**Gap**: README missing for actual billing module. Only example documentation exists.
+
+### 7.3 Technical Debt Assessment
+
+**High Priority Debt**:
+
+1. **Billing Module Implementation Gap** (CRITICAL)
+   - Estimated effort: 16-24 hours
+   - Risk: High - Frontend expects backend that doesn't exist
+
+2. **Missing InvoiceVoter** (HIGH)
+   - Estimated effort: 2-4 hours
+   - Risk: High - Security gap
+
+3. **Frontend Service Layer** (MEDIUM)
+   - Estimated effort: 8-12 hours
+   - Risk: Medium - Maintainability concern
+
+4. **Menu Item Integration** (LOW)
+   - Estimated effort: 1-2 hours
+   - Risk: Low - UX issue
+
+**Medium Priority Debt**:
+
+1. **Interface Segregation** (ModulePluginInterface)
+   - Estimated effort: 4-6 hours
+   - Risk: Medium - Future maintainability
+
+2. **Navigation Guard Implementation**
+   - Estimated effort: 2-3 hours
+   - Risk: Medium - Security UX
+
+**Low Priority Debt**:
+
+1. **Console.error usage in production**
+   - Estimated effort: 2-4 hours
+   - Risk: Low - Performance/privacy
+
+---
+
+## 8. Security Boundaries and Validation
+
+### 8.1 API Security Configuration
+
+**Assessment**: GOOD for existing entities, MISSING for billing
+
+**Example** (Contact entity):
+```php
+#[ApiResource(
+    operations: [
+        new GetCollection(security: "is_granted('VIEW', 'contacts')"),
+        new Get(security: "is_granted('VIEW', object)"),
+        new Post(security: "is_granted('CREATE', 'contacts')"),
+        new Put(security: "is_granted('EDIT', object)"),
+        new Delete(security: "is_granted('DELETE', object)")
+    ]
+)]
+```
+
+**Strength**: Every operation secured with voter-based authorization.
+
+**Pattern**: Consistent across all entities (Contact, Project, ProjectTask)
+
+**Missing**: Invoice entity with similar security configuration
+
+### 8.2 Input Validation
+
+**Backend Validation** (Example from Contact):
+```php
+#[Assert\NotBlank(message: 'Der Firmenname darf nicht leer sein')]
+#[Assert\Length(max: 255)]
+private ?string $companyName = null;
+
+#[Assert\Email(message: 'Bitte geben Sie eine gültige E-Mail-Adresse ein')]
+private ?string $email = null;
+```
+
+**Assessment**: GOOD - Symfony Validator constraints used properly.
+
+**Frontend Validation** (InvoiceForm.vue):
+```javascript
+if (!form.value.invoiceNumber || !form.value.contactId) {
+    toast.add({
+        severity: 'warn',
+        summary: 'Validierung fehlgeschlagen',
+        detail: 'Bitte füllen Sie alle Pflichtfelder aus'
+    })
+    return
+}
+```
+
+**Assessment**: BASIC - Client-side validation exists but not comprehensive.
+
+**Recommendation**: Add schema validation library (e.g., Vuelidate, Zod) for consistent validation rules.
+
+### 8.3 Authorization Flow
+
+**Current Flow**:
+```
+1. Frontend: authStore.hasPermission('billing', 'create')
+2. API Request: POST /api/invoices
+3. API Platform: security: "is_granted('CREATE', 'billing')"
+4. Symfony Security: Calls voters
+5. InvoiceVoter (MISSING) → ModuleVoter fallback?
+6. ModuleVoter: User::hasModulePermission('billing', 'create')
+7. User entity: Checks UserRoles → RolePermissions → Module
+```
+
+**Gap**: Step 5 - InvoiceVoter missing means authorization might fail or fall through incorrectly.
+
+**Expected Voter**:
+```php
+class InvoiceVoter extends Voter
+{
+    protected function supports(string $attribute, mixed $subject): bool
+    {
+        return in_array($attribute, ['VIEW', 'EDIT', 'DELETE'])
+            && ($subject instanceof Invoice || $subject === 'billing');
+    }
+
+    protected function voteOnAttribute(string $attribute, mixed $subject, TokenInterface $token): bool
+    {
+        $user = $token->getUser();
+        if (!$user instanceof User) {
+            return false;
+        }
+
+        // Map to module permission
+        $action = strtolower($attribute);
+        return $user->hasModulePermission('billing', $action);
+    }
+}
+```
+
+---
+
+## 9. Scalability and Performance Implications
+
+### 9.1 Plugin Boot Performance
+
+**File**: `/Users/olli/Git/__privat/myCRM/src/EventListener/ModuleBootListener.php`
+
+**Concern**: Plugins boot on EVERY request (priority 256 on kernel.request)
+
+```php
+#[AsEventListener(event: KernelEvents::REQUEST, priority: 256)]
+class ModuleBootListener
+{
+    private static bool $booted = false;
+
+    public function __invoke(RequestEvent $event): void
+    {
+        if (!$event->isMainRequest() || self::$booted) {
+            return;  // Guard prevents re-booting
+        }
+
+        $this->moduleRegistry->bootModules();
+        self::$booted = true;
+    }
+}
+```
+
+**Assessment**: ACCEPTABLE
+- Static flag prevents multiple boots
+- Only main requests trigger boot
+- Short-circuits early if already booted
+
+**Potential Issue**: On high-traffic sites, even single boot per request might be expensive if plugins have heavy initialization.
+
+**Recommendation**: Consider moving plugin boot to application boot phase (kernel.boot event) instead of per-request.
+
+### 9.2 License Validation Caching
+
+**File**: `/Users/olli/Git/__privat/myCRM/docs/example-module/BillingModulePlugin.php`
+
+```php
+private ?array $licenseCache = null;
+
+public function getLicenseInfo(): array
+{
+    if ($this->licenseCache !== null) {
+        return $this->licenseCache;  // In-memory cache
+    }
+
+    $this->licenseCache = $this->licenseValidator->validate(self::MODULE_IDENTIFIER);
+    return $this->licenseCache;
+}
+```
+
+**Assessment**: BASIC caching only per request
+
+**Concern**: License validation might make HTTP calls to license server on every request (depending on LicenseValidator implementation).
+
+**Recommendation**: Implement persistent caching:
+```php
+// Use Symfony Cache
+public function getLicenseInfo(): array
+{
+    return $this->cache->get(
+        'module.license.' . $this->getIdentifier(),
+        function() {
+            return $this->licenseValidator->validate($this->getIdentifier());
+        },
+        3600  // 1 hour TTL
+    );
+}
+```
+
+### 9.3 Database Query Optimization
+
+**Assessment**: No N+1 query issues detected in existing code
+
+**Evidence**: Entities use proper eager/lazy loading:
+```php
+#[ORM\OneToMany(
+    targetEntity: ContactPerson::class,
+    mappedBy: 'contact',
+    cascade: ['persist', 'remove'],
+    orphanRemoval: true
+)]
+private Collection $contactPersons;
+```
+
+**API Platform**: Uses automatic pagination
+```php
+#[ApiResource(
+    paginationClientItemsPerPage: true,
+    paginationItemsPerPage: 30,
+    paginationMaximumItemsPerPage: 5000
+)]
+```
+
+**Strength**: Prevents unbounded result sets.
+
+---
+
+## 10. Improvement Recommendations
+
+### 10.1 CRITICAL PRIORITY (Fix Immediately)
+
+**1. Complete Billing Module Implementation**
+
+**Current State**: Only example code in `/docs/example-module/`
+
+**Required Actions**:
+
+**Step 1**: Create production entities
+```bash
+# Location: /Users/olli/Git/__privat/myCRM/src/Entity/Invoice.php
+
+<?php
+namespace App\Entity;
+
+use ApiPlatform\Metadata\ApiResource;
+use App\Entity\Interface\ModuleAwareInterface;
+// ... implement based on docs/example-module/Entity/Invoice.php
+// BUT: use namespace App\Entity, not MyCRM\BillingModule\Entity
+```
+
+**Step 2**: Create InvoiceVoter
+```bash
+# Location: /Users/olli/Git/__privat/myCRM/src/Security/Voter/InvoiceVoter.php
+```
+
+**Step 3**: Verify migration or regenerate
+```bash
+php bin/console doctrine:migrations:status
+# If Version20251205095156 already executed, verify entities match
+# If not executed, delete and regenerate:
+rm migrations/Version20251205095156.php
+php bin/console make:migration
+```
+
+**Step 4**: Add menu item
+```bash
+# Location: /Users/olli/Git/__privat/myCRM/assets/js/layout/AppMenu.vue
+# Add billing menu entry
+```
+
+**Estimated Effort**: 20-24 hours
+**Risk if not fixed**: Application is broken - frontend calls non-existent API
+
+---
+
+**2. Resolve Entity/Migration Mismatch**
+
+**Issue**: Migration exists for invoice tables but no entities
+
+**Action**:
+```bash
+cd /Users/olli/Git/__privat/myCRM
+php bin/console doctrine:migrations:status
+
+# If migration executed:
+# Option A: Create matching entities (recommended)
+# Option B: Rollback migration
+php bin/console doctrine:migrations:migrate prev
+
+# If migration not executed:
+# Delete orphaned migration
+rm migrations/Version20251205095156.php
+```
+
+**Estimated Effort**: 2 hours
+**Risk if not fixed**: Database inconsistency, schema validation failures
+
+---
+
+### 10.2 HIGH PRIORITY (Fix This Sprint)
+
+**3. Implement Frontend Service Layer**
+
+**Current Problem**: Direct fetch calls in Vue components
+
+**Solution**: Create API service abstraction
+
+**File**: `/Users/olli/Git/__privat/myCRM/assets/js/services/api/client.js`
+```javascript
+class ApiClient {
+    constructor(baseURL = '/api') {
+        this.baseURL = baseURL
+    }
+
+    async request(endpoint, options = {}) {
+        const url = `${this.baseURL}${endpoint}`
+        const headers = {
+            'Content-Type': 'application/ld+json',
+            'Accept': 'application/ld+json',
+            ...options.headers
+        }
+
+        const response = await fetch(url, {
+            ...options,
+            headers,
+            credentials: 'include'
+        })
+
+        if (!response.ok) {
+            const error = await response.json()
+            throw new ApiError(error)
+        }
+
+        return response.json()
+    }
+
+    get(endpoint) {
+        return this.request(endpoint, { method: 'GET' })
+    }
+
+    post(endpoint, data) {
+        return this.request(endpoint, {
+            method: 'POST',
+            body: JSON.stringify(data)
+        })
+    }
+}
+
+export const apiClient = new ApiClient()
+```
+
+**Then refactor components**:
+```javascript
+// InvoiceForm.vue
+import { apiClient } from '@/services/api/client'
+
+const save = async () => {
+    try {
+        const invoice = await apiClient.post('/invoices', payload)
+        emit('save', invoice)
+    } catch (error) {
+        // Handle error
+    }
+}
+```
+
+**Estimated Effort**: 8-12 hours
+**Benefit**: Better maintainability, testability, error handling
+
+---
+
+**4. Add Navigation Guards**
+
+**File**: `/Users/olli/Git/__privat/myCRM/assets/js/router.js`
+
+```javascript
+import { useAuthStore } from './stores/auth'
+
+router.beforeEach(async (to, from, next) => {
+    const authStore = useAuthStore()
+
+    // Check authentication
+    if (!authStore.isAuthenticated) {
+        // Redirect to login or handle unauthenticated access
+    }
+
+    // Check admin requirement
+    if (to.meta.requiresAdmin && !authStore.isAdmin) {
+        next({ name: 'dashboard' })
+        return
+    }
+
+    // Check module permission
+    if (to.meta.requiresPermission) {
+        const { module, action } = to.meta.requiresPermission
+        if (!authStore.hasPermission(module, action)) {
+            next({ name: 'dashboard' })
+            return
+        }
+    }
+
+    next()
+})
+```
+
+**Estimated Effort**: 3-4 hours
+**Benefit**: Proper authorization UX, prevents unauthorized route access
+
+---
+
+### 10.3 MEDIUM PRIORITY (Next Sprint)
+
+**5. Refactor ModulePluginInterface for ISP**
+
+**Current**: Single interface with 9 methods
+
+**Proposed**: Split into focused interfaces (see section 3.4)
+
+**Estimated Effort**: 6-8 hours (includes updating implementations)
+**Benefit**: Better testability, cleaner abstractions
+
+---
+
+**6. Implement Persistent License Caching**
+
+**Current**: In-memory cache only
+
+**Proposed**: Symfony Cache component with TTL
+
+**Estimated Effort**: 4 hours
+**Benefit**: Reduced license server load, faster plugin boot
+
+---
+
+**7. Replace window.location.reload() with Reactive Updates**
+
+**Files**: InvoiceManagement.vue, other components
+
+**Replace**:
+```javascript
+window.location.reload()  // BAD
+```
+
+**With**:
+```javascript
+// Use emit to parent or composable for data refresh
+const refresh = inject('refreshData')
+refresh()
+
+// Or update local state reactively
+items.value = await fetchUpdatedItems()
+```
+
+**Estimated Effort**: 6 hours
+**Benefit**: Better UX, maintains SPA state
+
+---
+
+### 10.4 LOW PRIORITY (Backlog)
+
+**8. Add Comprehensive Frontend Validation**
+
+**Tool**: Vuelidate or Zod
+
+**Example**:
+```javascript
+import { useVuelidate } from '@vuelidate/core'
+import { required, email, minLength } from '@vuelidate/validators'
+
+const rules = {
+    invoiceNumber: { required, minLength: minLength(5) },
+    contactId: { required },
+    items: {
+        $each: {
+            description: { required },
+            quantity: { required, minValue: minValue(0) }
+        }
+    }
+}
+
+const v$ = useVuelidate(rules, form)
+```
+
+**Estimated Effort**: 8 hours
+**Benefit**: Consistent validation, better UX
+
+---
+
+**9. Remove console.error in Production**
+
+**Replace**:
+```javascript
+console.error('Error:', error)  // REMOVE
+```
+
+**With**:
+```javascript
+import { logger } from '@/services/logger'
+logger.error('Error saving invoice', { error, context })
+```
+
+**Estimated Effort**: 4 hours
+**Benefit**: Cleaner production builds, proper error tracking
+
+---
+
+**10. Add API Response Interceptor**
+
+**Purpose**: Centralized error handling, token refresh
+
+**Implementation**:
+```javascript
+class ApiClient {
+    constructor() {
+        this.interceptors = {
+            response: [],
+            error: []
+        }
+    }
+
+    async request(endpoint, options) {
+        try {
+            const response = await fetch(...)
+
+            // Run response interceptors
+            for (const interceptor of this.interceptors.response) {
+                await interceptor(response)
+            }
+
+            return response
+        } catch (error) {
+            // Run error interceptors
+            for (const interceptor of this.interceptors.error) {
+                await interceptor(error)
+            }
+            throw error
+        }
+    }
+}
+
+// Register global error handler
+apiClient.interceptors.error.push(async (error) => {
+    if (error.status === 401) {
+        // Handle unauthorized
+        router.push('/login')
+    }
+})
+```
+
+**Estimated Effort**: 6 hours
+**Benefit**: Centralized error handling, token management
+
+---
+
+## 11. Risk Assessment
+
+### 11.1 Architectural Risks
+
+| Risk | Severity | Likelihood | Impact | Mitigation |
+|------|----------|------------|--------|------------|
+| Billing module implementation gap | CRITICAL | High | Users cannot create invoices | Complete implementation (Rec #1) |
+| Missing InvoiceVoter security gap | HIGH | Medium | Unauthorized access possible | Create InvoiceVoter (Rec #1) |
+| Entity/migration mismatch | HIGH | High | Database schema drift | Resolve mismatch (Rec #2) |
+| License validation performance | MEDIUM | Medium | Slow plugin boot | Implement caching (Rec #6) |
+| Frontend service layer missing | MEDIUM | Low | Difficult maintenance | Create service layer (Rec #3) |
+
+### 11.2 Technical Debt Heatmap
+
+```
+     │ Impact
+High │  ██ Billing Gap
+     │  █  InvoiceVoter
+     │  █  Entity/Migration
+Med  │     ██ Service Layer
+     │        █  License Cache
+Low  │           █  Console errors
+     └────────────────────────────
+        Low    Med      High
+              Effort
+```
+
+**Legend**:
+- █ = 1 issue
+- ██ = 2+ issues
+
+---
+
+## 12. Conclusion and Action Plan
+
+### 12.1 Summary
+
+**Strengths**:
+1. Excellent plugin architecture with proper abstraction
+2. Sophisticated 6-layer security system
+3. Clean SOLID adherence in core modules
+4. Good documentation
+5. Consistent coding patterns
+
+**Critical Gaps**:
+1. Billing module exists only as documentation
+2. Frontend expects backend API that doesn't exist
+3. Database migration without corresponding entities
+4. Missing security voter for invoices
+
+**Overall Grade**: B- (Good foundation, critical implementation gaps)
+
+### 12.2 Immediate Action Plan
+
+**Week 1** (Critical Fixes):
+1. **Day 1-2**: Create Invoice, InvoiceItem, Payment entities in `src/Entity/`
+2. **Day 3**: Implement InvoiceVoter
+3. **Day 4**: Resolve migration mismatch, test database schema
+4. **Day 5**: Add billing menu item, test end-to-end flow
+
+**Week 2** (High Priority):
+5. **Day 1-2**: Implement frontend service layer
+6. **Day 3**: Add navigation guards
+7. **Day 4-5**: Integration testing, bug fixes
+
+**Week 3+** (Medium/Low Priority):
+8. Refactor ModulePluginInterface for ISP
+9. Implement persistent license caching
+10. Replace window.reload with reactive updates
+
+### 12.3 Long-term Recommendations
+
+1. **Establish Architecture Decision Records (ADR)**: Document why architectural choices were made
+2. **Automated Architecture Tests**: Use ArchUnit-style tests to enforce layering rules
+3. **CI/CD Integration**: Add schema validation to CI pipeline
+4. **Performance Monitoring**: Track plugin boot times, license validation latency
+5. **Security Audits**: Regular review of voter implementations and API security
+
+---
+
+## Appendix A: File Inventory
+
+### Backend (PHP)
+
+**Entities** (13 files):
+- `/Users/olli/Git/__privat/myCRM/src/Entity/Contact.php` (422 lines)
+- `/Users/olli/Git/__privat/myCRM/src/Entity/User.php`
+- `/Users/olli/Git/__privat/myCRM/src/Entity/Project.php`
+- `/Users/olli/Git/__privat/myCRM/src/Entity/ProjectTask.php`
+- ... (full list in review)
+
+**Voters** (4 files):
+- `/Users/olli/Git/__privat/myCRM/src/Security/Voter/ModuleVoter.php` (79 lines)
+- `/Users/olli/Git/__privat/myCRM/src/Security/Voter/ProjectVoter.php`
+- `/Users/olli/Git/__privat/myCRM/src/Security/Voter/ProjectTaskVoter.php`
+- `/Users/olli/Git/__privat/myCRM/src/Security/Voter/GitRepositoryVoter.php`
+
+**Plugin System**:
+- `/Users/olli/Git/__privat/myCRM/src/Plugin/ModulePluginInterface.php` (103 lines)
+- `/Users/olli/Git/__privat/myCRM/src/Plugin/ModuleRegistry.php` (215 lines)
+- `/Users/olli/Git/__privat/myCRM/src/EventListener/ModuleBootListener.php` (38 lines)
+
+**Example Module**:
+- `/Users/olli/Git/__privat/myCRM/docs/example-module/BillingModulePlugin.php` (180 lines)
+- `/Users/olli/Git/__privat/myCRM/docs/example-module/Entity/Invoice.php` (229 lines)
+
+### Frontend (Vue)
+
+**Components**:
+- `/Users/olli/Git/__privat/myCRM/assets/js/views/InvoiceManagement.vue` (259 lines)
+- `/Users/olli/Git/__privat/myCRM/assets/js/views/InvoiceForm.vue` (314 lines)
+- `/Users/olli/Git/__privat/myCRM/assets/js/views/PaymentForm.vue`
+- `/Users/olli/Git/__privat/myCRM/assets/js/views/PDFUploadForm.vue`
+
+**Router**:
+- `/Users/olli/Git/__privat/myCRM/assets/js/router.js` (31 lines)
+
+### Configuration
+
+- `/Users/olli/Git/__privat/myCRM/config/services.yaml` (63 lines)
+- `/Users/olli/Git/__privat/myCRM/config/services_plugin.yaml` (32 lines)
+- `/Users/olli/Git/__privat/myCRM/config/packages/billing_module.yaml` (7 lines)
+
+### Migrations
+
+- `/Users/olli/Git/__privat/myCRM/migrations/Version20251205095156.php` (42 lines) - **ORPHANED**
+
+---
+
+## Appendix B: Command Reference
+
+### Architecture Validation Commands
+
+```bash
+# Doctrine schema validation
+php bin/console doctrine:schema:validate
+
+# List registered plugins
+php bin/console debug:container --tag=app.module_plugin
+
+# Check migrations status
+php bin/console doctrine:migrations:status
+
+# List all routes
+php bin/console debug:router
+
+# Check security voters
+php bin/console debug:autowiring Voter
+```
+
+### Recommended Test Commands
+
+```bash
+# Before implementing billing module entities
+php bin/console doctrine:schema:validate --skip-sync
+
+# After creating entities
+php bin/console make:migration
+php bin/console doctrine:migrations:migrate
+php bin/console doctrine:schema:validate
+
+# Test API endpoints
+curl -X GET http://localhost:8000/api/invoices -H "Accept: application/ld+json"
+```
+
+---
+
+**Document Version**: 1.0
+**Review Date**: December 12, 2025
+**Reviewer**: Claude Sonnet 4.5 (Architecture Review Agent)
+**Next Review**: After critical fixes implementation (2-3 weeks)
diff --git a/docs/design/INVOICE_FORM_UX_DESIGN.md b/docs/design/INVOICE_FORM_UX_DESIGN.md
new file mode 100644
index 0000000..6ad008a
--- /dev/null
+++ b/docs/design/INVOICE_FORM_UX_DESIGN.md
@@ -0,0 +1,1805 @@
+# Invoice Form UX/UI Design Konzept
+**myCRM Billing Module - Invoice Management**
+
+**Erstellt:** 2025-12-12
+**Projekt:** myCRM - Symfony 7.1 LTS + Vue.js 3 + PrimeVue
+**Fokus:** Rechnungsformular (InvoiceForm.vue) und zugehörige Komponenten
+
+---
+
+## Executive Summary
+
+Dieses Dokument analysiert das aktuelle Invoice-Formular und präsentiert ein umfassendes UX/UI-Design-Konzept für eine optimierte, professionelle Rechnungsverwaltung. Der Fokus liegt auf verbesserter visueller Hierarchie, optimierter Formularstruktur und konsistenter Nutzererfahrung.
+
+---
+
+## 1. Analyse des Ist-Zustands
+
+### 1.1 Bestehende Komponenten
+
+**Hauptkomponenten:**
+- `InvoiceManagement.vue` - Rechnungsübersicht mit DataTable
+- `InvoiceForm.vue` - Rechnungserstellung/-bearbeitung (Hauptformular)
+- `PaymentForm.vue` - Zahlungserfassung
+- `PDFUploadForm.vue` - PDF-Upload (MVP-Platzhalter)
+
+### 1.2 Identifizierte UX-Probleme
+
+#### Schwerwiegende Probleme (P0)
+
+1. **Fehlende visuelle Hierarchie im Hauptformular**
+   - Alle Felder auf gleicher Ebene ohne logische Gruppierung
+   - Rechnungspositionen-Tabelle verliert sich im Formular
+   - Keine klare Trennung zwischen Stammdaten und Positionen
+
+2. **Unklare Validierungs-Feedback**
+   - Validierung nur beim Submit sichtbar
+   - Keine Echtzeit-Validierung während Eingabe
+   - Fehler-Messages zu klein und leicht zu übersehen
+
+3. **Schlechte Rechnungspositions-Verwaltung**
+   - DataTable in Formular wirkt überladen
+   - Inline-Editing schwer zu bedienen
+   - Fehlende Summenberechnung in Echtzeit
+   - Keine visuelle Bestätigung beim Hinzufügen/Entfernen
+
+4. **Inkonsistente Spacing und Layouts**
+   - Inkonsistente Abstände zwischen Formulargruppen
+   - Dialog-Größe (70vw) nicht optimal für verschiedene Bildschirme
+   - Fehlende responsive Breakpoints für Tablet-Ansicht
+
+#### Mittelschwere Probleme (P1)
+
+5. **Fehlende Benutzerführung**
+   - Keine Hilfe-Tooltips für komplexe Felder
+   - Fehlende Feldkontexte (z.B. Steuerberechnung)
+   - Keine Keyboard-Shortcuts
+
+6. **Unvollständige Status-Kommunikation**
+   - Loading-States nur beim Speichern
+   - Keine Progress-Indication beim Laden von Kontakten
+   - Fehlende Empty-States
+
+7. **Schwache Datenvisualisierung**
+   - Keine Gesamtsummen-Anzeige
+   - Fehlende Berechnungsübersicht (Netto, Steuer, Brutto)
+   - Kein Currency-Formatting in Tabelle
+
+#### Niedrige Priorität (P2)
+
+8. **Fehlende Micro-Interactions**
+   - Keine Animationen beim Hinzufügen/Entfernen von Positionen
+   - Fehlende Hover-States auf interaktiven Elementen
+   - Keine visuellen Bestätigungen
+
+9. **Accessibility-Mängel**
+   - Fehlende ARIA-Labels für Screen Reader
+   - Keine Keyboard-Navigation in Positionen-Tabelle
+   - Kontrast könnte besser sein
+
+---
+
+## 2. Design-Prinzipien
+
+### 2.1 Core Principles
+
+1. **Progressive Disclosure** - Zeige nur relevante Informationen zum richtigen Zeitpunkt
+2. **Visual Hierarchy** - Klare Strukturierung durch Größe, Farbe, Spacing
+3. **Immediate Feedback** - Sofortige Rückmeldung auf Benutzeraktionen
+4. **Error Prevention** - Validierung bevor Fehler entstehen
+5. **Consistency** - Einheitliche PrimeVue-Komponenten und Patterns
+
+### 2.2 Design System Integration
+
+**Verwendung bestehender Assets:**
+- PrimeVue Aura Theme (Dark Mode Support)
+- Tailwind CSS v4 mit PrimeUI Plugin
+- Sakai Layout System
+- Bestehende Farbpalette und Spacing-System
+
+---
+
+## 3. Design-Konzept: Invoice Form
+
+### 3.1 Layout-Struktur (Desktop)
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│ HEADER: Neue Rechnung / Rechnung bearbeiten          [×] Schließen │
+├─────────────────────────────────────────────────────────────────┤
+│                                                                   │
+│ [INFO-BANNER] Phase 1 MVP - wird erweitert (nur bei Neuerstellung) │
+│                                                                   │
+│ ┌───────────────────────────────────────────────────────────┐ │
+│ │ SEKTION 1: STAMMDATEN                                      │ │
+│ │ ┌──────────────────┐  ┌──────────────────┐               │ │
+│ │ │ Rechnungsnr. *   │  │ Status           │               │ │
+│ │ └──────────────────┘  └──────────────────┘               │ │
+│ │ ┌────────────────────────────────────────────────────┐   │ │
+│ │ │ Kunde (Dropdown mit Search) *                      │   │ │
+│ │ └────────────────────────────────────────────────────┘   │ │
+│ │ ┌──────────────────┐  ┌──────────────────┐               │ │
+│ │ │ Rechnungsdatum * │  │ Fälligkeitsdatum*│               │ │
+│ │ └──────────────────┘  └──────────────────┘               │ │
+│ └───────────────────────────────────────────────────────────┘ │
+│                                                                   │
+│ ┌───────────────────────────────────────────────────────────┐ │
+│ │ SEKTION 2: RECHNUNGSPOSITIONEN          [+ Position]      │ │
+│ │                                                             │ │
+│ │ ┌─────────────────────────────────────────────────────┐ │ │
+│ │ │ Position 1                                [Löschen] │ │ │
+│ │ │ ┌──────────────────────────────────────────────┐    │ │ │
+│ │ │ │ Beschreibung                                  │    │ │ │
+│ │ │ └──────────────────────────────────────────────┘    │ │ │
+│ │ │ [Menge: 1.00] [Einzelpreis: 0,00 €] [MwSt: 19%] │ │ │
+│ │ │ → Zwischensumme: 0,00 €                           │ │ │
+│ │ └─────────────────────────────────────────────────────┘ │ │
+│ │                                                             │ │
+│ │ [+ Position hinzufügen]                                   │ │
+│ │                                                             │ │
+│ │ ┌───────────────────────────────────────────────────┐   │ │
+│ │ │ ZUSAMMENFASSUNG                                     │   │ │
+│ │ │ Nettobetrag:                         1.000,00 €    │   │ │
+│ │ │ MwSt (19%):                            190,00 €    │   │ │
+│ │ │ MwSt (7%):                              14,00 €    │   │ │
+│ │ │ ─────────────────────────────────────────────────  │   │ │
+│ │ │ GESAMTBETRAG:                        1.204,00 €    │   │ │
+│ │ └───────────────────────────────────────────────────┘   │ │
+│ └───────────────────────────────────────────────────────────┘ │
+│                                                                   │
+│ ┌───────────────────────────────────────────────────────────┐ │
+│ │ SEKTION 3: ZUSÄTZLICHE INFORMATIONEN (Optional)            │ │
+│ │ ┌────────────────────────────────────────────────────┐   │ │
+│ │ │ Notizen (z.B. Zahlungsbedingungen)                  │   │ │
+│ │ │                                                      │   │ │
+│ │ └────────────────────────────────────────────────────┘   │ │
+│ └───────────────────────────────────────────────────────────┘ │
+│                                                                   │
+├─────────────────────────────────────────────────────────────────┤
+│ FOOTER: [Abbrechen]          [Entwurf speichern] [Speichern]   │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+### 3.2 Visual Design Specifications
+
+#### Spacing System
+```css
+/* Card/Section Spacing */
+--section-gap: 2rem;          /* 32px - Abstand zwischen Sektionen */
+--section-padding: 1.5rem;    /* 24px - Innen-Padding der Sektionen */
+--field-gap: 1rem;            /* 16px - Abstand zwischen Feldern */
+--inline-field-gap: 0.75rem;  /* 12px - Abstand zwischen Inline-Feldern */
+
+/* Component Spacing */
+--form-element-height: 2.75rem; /* 44px - Touch-friendly */
+--label-margin: 0.5rem;         /* 8px - Label zu Input */
+```
+
+#### Typography Hierarchy
+```css
+/* Heading Levels */
+--h2-dialog-title: 1.5rem;    /* 24px - Dialog Titel */
+--h3-section-title: 1.25rem;  /* 20px - Sektion Überschrift */
+--h4-subsection: 1rem;        /* 16px - Subsection */
+
+/* Body Text */
+--body-normal: 0.875rem;      /* 14px - Standard Text */
+--body-small: 0.75rem;        /* 12px - Helper Text, Labels */
+--body-large: 1rem;           /* 16px - Wichtige Werte */
+
+/* Font Weights */
+--weight-normal: 400;
+--weight-medium: 500;
+--weight-semibold: 600;
+--weight-bold: 700;
+```
+
+#### Color Palette (Semantic Colors)
+```css
+/* Status Colors (PrimeVue Aura Theme) */
+--color-primary: #3B82F6;      /* Blue - Primary Actions */
+--color-success: #22C55E;      /* Green - Success, Paid */
+--color-warning: #F59E0B;      /* Orange - Partial, Warning */
+--color-danger: #EF4444;       /* Red - Overdue, Delete */
+--color-info: #06B6D4;         /* Cyan - Info Messages */
+--color-secondary: #6B7280;    /* Gray - Secondary Actions */
+
+/* Surface Colors */
+--surface-0: #FFFFFF;          /* Base Background */
+--surface-50: #F9FAFB;         /* Light Background */
+--surface-100: #F3F4F6;        /* Section Background */
+--surface-200: #E5E7EB;        /* Border Color */
+
+/* Text Colors */
+--text-primary: #111827;       /* Primary Text */
+--text-secondary: #6B7280;     /* Secondary Text */
+--text-muted: #9CA3AF;         /* Muted Text */
+```
+
+#### Component Styling
+
+**Card/Section Style:**
+```css
+.form-section {
+  background: var(--surface-0);
+  border: 1px solid var(--surface-200);
+  border-radius: 0.75rem; /* 12px */
+  padding: var(--section-padding);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.form-section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1.5rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid var(--surface-200);
+}
+
+.form-section-title {
+  font-size: var(--h3-section-title);
+  font-weight: var(--weight-semibold);
+  color: var(--text-primary);
+}
+```
+
+**Invoice Item Card:**
+```css
+.invoice-item-card {
+  background: var(--surface-50);
+  border: 1px solid var(--surface-200);
+  border-radius: 0.5rem; /* 8px */
+  padding: 1rem;
+  margin-bottom: 0.75rem;
+  transition: all 0.2s ease;
+}
+
+.invoice-item-card:hover {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  border-color: var(--color-primary);
+}
+
+.invoice-item-card--new {
+  animation: slideIn 0.3s ease-out;
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+```
+
+**Summary Box:**
+```css
+.invoice-summary {
+  background: var(--surface-100);
+  border: 2px solid var(--color-primary);
+  border-radius: 0.75rem;
+  padding: 1.5rem;
+  margin-top: 1.5rem;
+}
+
+.invoice-summary-row {
+  display: flex;
+  justify-content: space-between;
+  padding: 0.5rem 0;
+  font-size: 0.875rem;
+  color: var(--text-secondary);
+}
+
+.invoice-summary-total {
+  display: flex;
+  justify-content: space-between;
+  padding: 1rem 0 0;
+  margin-top: 0.75rem;
+  border-top: 2px solid var(--surface-200);
+  font-size: 1.25rem;
+  font-weight: var(--weight-bold);
+  color: var(--text-primary);
+}
+```
+
+### 3.3 Responsive Breakpoints
+
+```css
+/* Desktop First Approach */
+
+/* Large Desktop (1920px+) */
+.invoice-dialog--large {
+  width: 1200px;
+  max-width: 90vw;
+}
+
+/* Desktop (1200px - 1920px) */
+@media (max-width: 1920px) {
+  .invoice-dialog {
+    width: 1000px;
+  }
+}
+
+/* Tablet Landscape (992px - 1200px) */
+@media (max-width: 1200px) {
+  .invoice-dialog {
+    width: 90vw;
+  }
+
+  .form-grid {
+    grid-template-columns: 1fr 1fr; /* 2 Spalten */
+  }
+}
+
+/* Tablet Portrait (768px - 992px) */
+@media (max-width: 992px) {
+  .invoice-dialog {
+    width: 95vw;
+    max-height: 90vh;
+  }
+
+  .form-grid {
+    grid-template-columns: 1fr; /* 1 Spalte */
+  }
+
+  .invoice-item-fields {
+    flex-direction: column;
+  }
+}
+
+/* Mobile (576px - 768px) */
+@media (max-width: 768px) {
+  .invoice-dialog {
+    width: 100vw;
+    height: 100vh;
+    border-radius: 0;
+    margin: 0;
+  }
+
+  .form-section {
+    padding: 1rem;
+  }
+
+  .invoice-summary {
+    position: sticky;
+    bottom: 0;
+    z-index: 100;
+  }
+}
+
+/* Small Mobile (< 576px) */
+@media (max-width: 576px) {
+  .form-section-title {
+    font-size: 1rem;
+  }
+
+  .invoice-item-card {
+    padding: 0.75rem;
+  }
+}
+```
+
+---
+
+## 4. Komponentenweise Design-Spezifikationen
+
+### 4.1 InvoiceForm - Hauptformular
+
+#### Sektion 1: Stammdaten
+
+**Layout:**
+- 2-spaltig auf Desktop (Rechnungsnr + Status)
+- 1-spaltig auf Mobile
+- Kunde als volle Breite für bessere Lesbarkeit
+- Datum-Felder wieder 2-spaltig
+
+**Verbesserungen:**
+```vue
+<div class="form-section">
+  <div class="form-section-header">
+    <h3 class="form-section-title">Rechnungsinformationen</h3>
+    <Tag :value="getStatusLabel(form.status)" :severity="getStatusSeverity(form.status)" />
+  </div>
+
+  <div class="form-grid">
+    <FloatLabel>
+      <InputText id="invoiceNumber" v-model="form.invoiceNumber"
+                 :invalid="submitted && !form.invoiceNumber" />
+      <label for="invoiceNumber">Rechnungsnummer *</label>
+    </FloatLabel>
+
+    <FloatLabel>
+      <Dropdown id="status" v-model="form.status" :options="statusOptions"
+                option-label="label" option-value="value" />
+      <label for="status">Status</label>
+    </FloatLabel>
+  </div>
+
+  <div class="form-field-full">
+    <FloatLabel>
+      <Select id="contact" v-model="form.contactId"
+              :options="contacts"
+              option-label="companyName"
+              option-value="id"
+              filter
+              :filter-fields="['companyName', 'email']"
+              placeholder="Kunde suchen..."
+              :invalid="submitted && !form.contactId"
+              :loading="loadingContacts">
+        <template #value="slotProps">
+          <div v-if="slotProps.value" class="flex align-items-center gap-2">
+            <i class="pi pi-building"></i>
+            <span>{{ getContactName(slotProps.value) }}</span>
+          </div>
+        </template>
+        <template #option="slotProps">
+          <div class="flex flex-column">
+            <span class="font-semibold">{{ slotProps.option.companyName }}</span>
+            <span class="text-sm text-secondary">{{ slotProps.option.email }}</span>
+          </div>
+        </template>
+      </Select>
+      <label for="contact">Kunde *</label>
+    </FloatLabel>
+  </div>
+
+  <div class="form-grid">
+    <FloatLabel>
+      <DatePicker id="invoiceDate" v-model="form.invoiceDate"
+                  date-format="dd.mm.yy"
+                  :show-icon="true"
+                  icon="pi pi-calendar" />
+      <label for="invoiceDate">Rechnungsdatum *</label>
+    </FloatLabel>
+
+    <FloatLabel>
+      <DatePicker id="dueDate" v-model="form.dueDate"
+                  date-format="dd.mm.yy"
+                  :show-icon="true"
+                  icon="pi pi-calendar"
+                  :min-date="form.invoiceDate" />
+      <label for="dueDate">Fälligkeitsdatum *</label>
+    </FloatLabel>
+  </div>
+</div>
+```
+
+**Design-Rationale:**
+- FloatLabel für moderneres Erscheinungsbild
+- Status-Tag im Header für sofortige Sichtbarkeit
+- Verbesserter Kunden-Dropdown mit Icons und Mehrfachanzeige
+- Min-Date beim Fälligkeitsdatum verhindert ungültige Daten
+
+#### Sektion 2: Rechnungspositionen
+
+**Problem:** Aktuelle DataTable-Lösung ist zu komplex für Inline-Editing
+
+**Lösung:** Card-basierte Positionen mit optimierter UX
+
+```vue
+<div class="form-section">
+  <div class="form-section-header">
+    <h3 class="form-section-title">
+      Rechnungspositionen
+      <span class="text-secondary text-sm">({{ form.items.length }})</span>
+    </h3>
+    <Button label="Position hinzufügen"
+            icon="pi pi-plus"
+            size="small"
+            @click="addItem" />
+  </div>
+
+  <!-- Empty State -->
+  <div v-if="form.items.length === 0" class="empty-state">
+    <i class="pi pi-inbox empty-state-icon"></i>
+    <p class="empty-state-text">Noch keine Positionen hinzugefügt</p>
+    <Button label="Erste Position hinzufügen"
+            icon="pi pi-plus"
+            outlined
+            @click="addItem" />
+  </div>
+
+  <!-- Invoice Items -->
+  <TransitionGroup name="list" tag="div" class="invoice-items-list">
+    <div v-for="(item, index) in form.items"
+         :key="item.id || `new-${index}`"
+         class="invoice-item-card">
+
+      <!-- Item Header -->
+      <div class="invoice-item-header">
+        <span class="invoice-item-number">Position {{ index + 1 }}</span>
+        <div class="invoice-item-actions">
+          <Button icon="pi pi-trash"
+                  text
+                  rounded
+                  severity="danger"
+                  size="small"
+                  @click="removeItem(index)"
+                  v-tooltip.top="'Position entfernen'" />
+        </div>
+      </div>
+
+      <!-- Description -->
+      <div class="form-field-full mb-3">
+        <FloatLabel>
+          <Textarea id="`description-${index}`"
+                    v-model="item.description"
+                    rows="2"
+                    :invalid="submitted && !item.description"
+                    @input="calculateItemTotal(index)" />
+          <label :for="`description-${index}`">Beschreibung *</label>
+        </FloatLabel>
+      </div>
+
+      <!-- Quantity, Price, Tax in responsive grid -->
+      <div class="invoice-item-fields">
+        <div class="invoice-item-field">
+          <FloatLabel>
+            <InputNumber :id="`quantity-${index}`"
+                         v-model="item.quantity"
+                         :min-fraction-digits="2"
+                         :max-fraction-digits="2"
+                         :min="0.01"
+                         @input="calculateItemTotal(index)" />
+            <label :for="`quantity-${index}`">Menge</label>
+          </FloatLabel>
+        </div>
+
+        <div class="invoice-item-field">
+          <FloatLabel>
+            <InputNumber :id="`unitPrice-${index}`"
+                         v-model="item.unitPrice"
+                         mode="currency"
+                         currency="EUR"
+                         locale="de-DE"
+                         @input="calculateItemTotal(index)" />
+            <label :for="`unitPrice-${index}`">Einzelpreis</label>
+          </FloatLabel>
+        </div>
+
+        <div class="invoice-item-field invoice-item-field--small">
+          <FloatLabel>
+            <Select :id="`taxRate-${index}`"
+                    v-model="item.taxRate"
+                    :options="taxRates"
+                    @change="calculateItemTotal(index)">
+              <template #value="slotProps">
+                {{ slotProps.value }}%
+              </template>
+              <template #option="slotProps">
+                {{ slotProps.option }}% MwSt.
+              </template>
+            </Select>
+            <label :for="`taxRate-${index}`">MwSt.</label>
+          </FloatLabel>
+        </div>
+      </div>
+
+      <!-- Item Subtotal -->
+      <div class="invoice-item-subtotal">
+        <span class="text-secondary">Zwischensumme:</span>
+        <span class="font-semibold">{{ formatCurrency(item.subtotal) }}</span>
+      </div>
+    </div>
+  </TransitionGroup>
+
+  <!-- Add Button (bottom) -->
+  <Button label="Weitere Position hinzufügen"
+          icon="pi pi-plus"
+          outlined
+          class="w-full mt-3"
+          @click="addItem" />
+
+  <!-- Summary Box -->
+  <div class="invoice-summary">
+    <div class="invoice-summary-header">
+      <h4>Zusammenfassung</h4>
+    </div>
+
+    <div class="invoice-summary-body">
+      <div class="invoice-summary-row">
+        <span>Nettobetrag:</span>
+        <span>{{ formatCurrency(totals.net) }}</span>
+      </div>
+
+      <div v-for="(amount, rate) in totals.taxBreakdown"
+           :key="rate"
+           class="invoice-summary-row">
+        <span>MwSt. ({{ rate }}%):</span>
+        <span>{{ formatCurrency(amount) }}</span>
+      </div>
+
+      <Divider />
+
+      <div class="invoice-summary-total">
+        <span>Gesamtbetrag:</span>
+        <span>{{ formatCurrency(totals.gross) }}</span>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+**CSS für Transitions:**
+```css
+/* List transitions */
+.list-enter-active,
+.list-leave-active {
+  transition: all 0.3s ease;
+}
+
+.list-enter-from {
+  opacity: 0;
+  transform: translateY(-20px);
+}
+
+.list-leave-to {
+  opacity: 0;
+  transform: translateX(20px);
+}
+
+.list-move {
+  transition: transform 0.3s ease;
+}
+
+/* Empty State */
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 3rem 1rem;
+  text-align: center;
+}
+
+.empty-state-icon {
+  font-size: 3rem;
+  color: var(--text-muted);
+  margin-bottom: 1rem;
+}
+
+.empty-state-text {
+  color: var(--text-secondary);
+  margin-bottom: 1.5rem;
+}
+
+/* Invoice Item Fields */
+.invoice-item-fields {
+  display: grid;
+  grid-template-columns: 1fr 1fr auto;
+  gap: 1rem;
+  align-items: start;
+}
+
+.invoice-item-field--small {
+  max-width: 120px;
+}
+
+@media (max-width: 768px) {
+  .invoice-item-fields {
+    grid-template-columns: 1fr;
+  }
+
+  .invoice-item-field--small {
+    max-width: 100%;
+  }
+}
+```
+
+#### Sektion 3: Notizen
+
+**Kollapsierbar für bessere Übersicht:**
+
+```vue
+<div class="form-section">
+  <Panel header="Zusätzliche Informationen"
+         toggleable
+         :collapsed="!form.notes">
+    <FloatLabel>
+      <Textarea id="notes"
+                v-model="form.notes"
+                rows="4"
+                placeholder="z.B. Zahlungsbedingungen, Lieferbedingungen..." />
+      <label for="notes">Notizen</label>
+    </FloatLabel>
+  </Panel>
+</div>
+```
+
+### 4.2 PaymentForm - Zahlungserfassung
+
+**Aktuelles Problem:** Zu minimalistisch, fehlt Kontext
+
+**Verbesserungen:**
+
+```vue
+<div class="payment-form">
+  <!-- Context Card -->
+  <div class="context-card">
+    <div class="context-card-header">
+      <h4>Rechnungsdetails</h4>
+    </div>
+    <div class="context-card-body">
+      <div class="context-row">
+        <span class="context-label">Rechnung:</span>
+        <span class="context-value font-semibold">{{ invoice?.invoiceNumber }}</span>
+      </div>
+      <div class="context-row">
+        <span class="context-label">Kunde:</span>
+        <span class="context-value">{{ invoice?.contact?.companyName }}</span>
+      </div>
+      <div class="context-row">
+        <span class="context-label">Rechnungsbetrag:</span>
+        <span class="context-value">{{ formatCurrency(invoice?.total) }}</span>
+      </div>
+      <div class="context-row">
+        <span class="context-label">Bereits gezahlt:</span>
+        <span class="context-value text-success">
+          {{ formatCurrency((invoice?.total || 0) - (invoice?.openAmount || 0)) }}
+        </span>
+      </div>
+      <Divider />
+      <div class="context-row context-row--highlight">
+        <span class="context-label font-semibold">Offener Betrag:</span>
+        <span class="context-value font-bold text-xl text-primary">
+          {{ formatCurrency(invoice?.openAmount) }}
+        </span>
+      </div>
+    </div>
+  </div>
+
+  <!-- Payment Form -->
+  <div class="form-section mt-4">
+    <div class="form-grid">
+      <FloatLabel>
+        <DatePicker id="paymentDate"
+                    v-model="form.paymentDate"
+                    date-format="dd.mm.yy"
+                    :show-icon="true"
+                    icon="pi pi-calendar"
+                    :max-date="new Date()" />
+        <label for="paymentDate">Zahlungsdatum *</label>
+      </FloatLabel>
+
+      <FloatLabel>
+        <InputNumber id="amount"
+                     v-model="form.amount"
+                     mode="currency"
+                     currency="EUR"
+                     locale="de-DE"
+                     :max="parseFloat(invoice?.openAmount || 0)"
+                     :invalid="form.amount > parseFloat(invoice?.openAmount || 0)" />
+        <label for="amount">Betrag *</label>
+      </FloatLabel>
+    </div>
+
+    <div class="form-field-full mt-3">
+      <FloatLabel>
+        <Select id="paymentMethod"
+                v-model="form.paymentMethod"
+                :options="paymentMethods"
+                option-label="label"
+                option-value="value">
+          <template #value="slotProps">
+            <div class="flex align-items-center gap-2">
+              <i :class="getPaymentMethodIcon(slotProps.value)"></i>
+              <span>{{ getPaymentMethodLabel(slotProps.value) }}</span>
+            </div>
+          </template>
+          <template #option="slotProps">
+            <div class="flex align-items-center gap-2">
+              <i :class="getPaymentMethodIcon(slotProps.option.value)"></i>
+              <span>{{ slotProps.option.label }}</span>
+            </div>
+          </template>
+        </Select>
+        <label for="paymentMethod">Zahlungsart</label>
+      </FloatLabel>
+    </div>
+
+    <div class="form-field-full mt-3">
+      <FloatLabel>
+        <Textarea id="notes"
+                  v-model="form.notes"
+                  rows="3"
+                  placeholder="Optionale Notizen zur Zahlung..." />
+        <label for="notes">Notizen</label>
+      </FloatLabel>
+    </div>
+  </div>
+
+  <!-- Quick Amount Buttons -->
+  <div class="quick-amounts mt-3">
+    <span class="text-sm text-secondary mr-2">Schnellauswahl:</span>
+    <Button :label="formatCurrency(invoice?.openAmount)"
+            size="small"
+            outlined
+            @click="form.amount = parseFloat(invoice?.openAmount || 0)" />
+    <Button :label="formatCurrency(invoice?.openAmount / 2)"
+            size="small"
+            outlined
+            @click="form.amount = parseFloat(invoice?.openAmount || 0) / 2" />
+  </div>
+
+  <!-- Action Buttons -->
+  <div class="flex gap-2 mt-4 justify-content-end">
+    <Button label="Abbrechen"
+            icon="pi pi-times"
+            severity="secondary"
+            text
+            @click="cancel" />
+    <Button label="Zahlung erfassen"
+            icon="pi pi-check"
+            :loading="saving"
+            :disabled="!isValid"
+            @click="save" />
+  </div>
+</div>
+```
+
+**Styling:**
+```css
+.context-card {
+  background: linear-gradient(135deg, var(--primary-50) 0%, var(--primary-100) 100%);
+  border: 1px solid var(--primary-200);
+  border-radius: 0.75rem;
+  padding: 1.5rem;
+}
+
+.context-row {
+  display: flex;
+  justify-content: space-between;
+  padding: 0.5rem 0;
+}
+
+.context-row--highlight {
+  padding: 1rem 0 0;
+  margin-top: 0.5rem;
+}
+
+.context-label {
+  color: var(--text-secondary);
+}
+
+.context-value {
+  text-align: right;
+}
+
+.quick-amounts {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+```
+
+### 4.3 PDFUploadForm - Verbesserungen
+
+**Problem:** Zu primitiv, fehlt Drag & Drop
+
+**Lösung:**
+
+```vue
+<div class="pdf-upload-form">
+  <Message v-if="!invoice?.pdfPath" severity="info">
+    Laden Sie die PDF-Rechnung hoch für eine vollständige Dokumentation
+  </Message>
+
+  <!-- Upload Area -->
+  <div class="upload-area"
+       :class="{ 'upload-area--dragover': isDragging }"
+       @drop.prevent="handleDrop"
+       @dragover.prevent="isDragging = true"
+       @dragleave.prevent="isDragging = false">
+
+    <div v-if="!selectedFile" class="upload-placeholder">
+      <i class="pi pi-cloud-upload upload-icon"></i>
+      <h4>PDF-Datei hochladen</h4>
+      <p class="text-secondary">
+        Datei hierher ziehen oder klicken zum Auswählen
+      </p>
+      <Button label="Datei auswählen"
+              icon="pi pi-folder-open"
+              outlined
+              @click="$refs.fileInput.click()" />
+      <p class="upload-hint">Nur PDF-Dateien, max. 10 MB</p>
+    </div>
+
+    <div v-else class="upload-preview">
+      <div class="file-info">
+        <i class="pi pi-file-pdf file-icon"></i>
+        <div class="file-details">
+          <p class="file-name">{{ selectedFile.name }}</p>
+          <p class="file-size">{{ formatFileSize(selectedFile.size) }}</p>
+        </div>
+        <Button icon="pi pi-times"
+                rounded
+                text
+                severity="danger"
+                @click="clearFile" />
+      </div>
+
+      <!-- Progress Bar during upload -->
+      <ProgressBar v-if="uploading"
+                   :value="uploadProgress"
+                   :show-value="true" />
+    </div>
+
+    <input ref="fileInput"
+           type="file"
+           accept="application/pdf"
+           style="display: none"
+           @change="handleFileChange" />
+  </div>
+
+  <!-- Existing PDF (if edit mode) -->
+  <div v-if="invoice?.pdfPath" class="existing-pdf mt-4">
+    <div class="existing-pdf-card">
+      <i class="pi pi-file-pdf text-danger text-4xl"></i>
+      <div class="flex-1">
+        <p class="font-semibold">Aktuelle PDF-Datei</p>
+        <p class="text-sm text-secondary">{{ invoice.pdfPath }}</p>
+      </div>
+      <Button label="Anzeigen"
+              icon="pi pi-external-link"
+              outlined
+              @click="viewExistingPDF" />
+    </div>
+  </div>
+
+  <!-- Actions -->
+  <div class="flex gap-2 mt-4 justify-content-end">
+    <Button label="Abbrechen"
+            icon="pi pi-times"
+            severity="secondary"
+            text
+            @click="cancel" />
+    <Button label="Hochladen"
+            icon="pi pi-upload"
+            :loading="uploading"
+            :disabled="!selectedFile"
+            @click="upload" />
+  </div>
+</div>
+```
+
+**Styling:**
+```css
+.upload-area {
+  border: 2px dashed var(--surface-200);
+  border-radius: 0.75rem;
+  padding: 3rem 2rem;
+  text-align: center;
+  transition: all 0.3s ease;
+  cursor: pointer;
+}
+
+.upload-area:hover {
+  border-color: var(--primary-color);
+  background: var(--primary-50);
+}
+
+.upload-area--dragover {
+  border-color: var(--primary-color);
+  background: var(--primary-100);
+  border-width: 3px;
+}
+
+.upload-icon {
+  font-size: 4rem;
+  color: var(--primary-color);
+  margin-bottom: 1rem;
+}
+
+.upload-hint {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  margin-top: 1rem;
+}
+
+.file-info {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 1rem;
+  background: var(--surface-50);
+  border-radius: 0.5rem;
+}
+
+.file-icon {
+  font-size: 2.5rem;
+  color: var(--danger-color);
+}
+
+.file-details {
+  flex: 1;
+  text-align: left;
+}
+
+.file-name {
+  font-weight: 600;
+  margin-bottom: 0.25rem;
+}
+
+.file-size {
+  font-size: 0.875rem;
+  color: var(--text-secondary);
+}
+
+.existing-pdf-card {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 1.5rem;
+  background: var(--surface-50);
+  border: 1px solid var(--surface-200);
+  border-radius: 0.75rem;
+}
+```
+
+---
+
+## 5. Interaction Design
+
+### 5.1 Validierung & Fehlerbehandlung
+
+#### Echtzeit-Validierung
+```javascript
+// Composable: useFormValidation.js
+import { ref, computed } from 'vue'
+
+export function useFormValidation() {
+  const errors = ref({})
+  const touched = ref({})
+
+  const validateField = (fieldName, value, rules) => {
+    const fieldErrors = []
+
+    if (rules.required && !value) {
+      fieldErrors.push('Dieses Feld ist erforderlich')
+    }
+
+    if (rules.minLength && value?.length < rules.minLength) {
+      fieldErrors.push(`Mindestens ${rules.minLength} Zeichen erforderlich`)
+    }
+
+    if (rules.pattern && !rules.pattern.test(value)) {
+      fieldErrors.push('Ungültiges Format')
+    }
+
+    if (rules.custom) {
+      const customError = rules.custom(value)
+      if (customError) fieldErrors.push(customError)
+    }
+
+    errors.value[fieldName] = fieldErrors
+    return fieldErrors.length === 0
+  }
+
+  const touchField = (fieldName) => {
+    touched.value[fieldName] = true
+  }
+
+  const hasError = (fieldName) => {
+    return touched.value[fieldName] && errors.value[fieldName]?.length > 0
+  }
+
+  const getError = (fieldName) => {
+    return hasError(fieldName) ? errors.value[fieldName][0] : null
+  }
+
+  return {
+    errors,
+    touched,
+    validateField,
+    touchField,
+    hasError,
+    getError
+  }
+}
+```
+
+**Verwendung im Template:**
+```vue
+<FloatLabel>
+  <InputText id="invoiceNumber"
+             v-model="form.invoiceNumber"
+             :invalid="hasError('invoiceNumber')"
+             @blur="touchField('invoiceNumber')"
+             @input="validateField('invoiceNumber', form.invoiceNumber, {
+               required: true,
+               minLength: 3,
+               pattern: /^[A-Z0-9-]+$/
+             })" />
+  <label for="invoiceNumber">Rechnungsnummer *</label>
+</FloatLabel>
+<small v-if="hasError('invoiceNumber')" class="p-error">
+  {{ getError('invoiceNumber') }}
+</small>
+```
+
+#### Toast-Benachrichtigungen Strategie
+
+```javascript
+// Toast Guidelines
+const toastConfig = {
+  success: {
+    severity: 'success',
+    life: 3000,
+    closable: true
+  },
+  error: {
+    severity: 'error',
+    life: 5000,
+    closable: true
+  },
+  warning: {
+    severity: 'warn',
+    life: 4000,
+    closable: true
+  },
+  info: {
+    severity: 'info',
+    life: 4000,
+    closable: true
+  }
+}
+
+// Verwendung
+toast.add({
+  ...toastConfig.success,
+  summary: 'Rechnung erstellt',
+  detail: `Rechnung ${invoice.invoiceNumber} wurde erfolgreich erstellt`
+})
+```
+
+### 5.2 Loading States
+
+**Skeleton Screens statt Spinner:**
+
+```vue
+<template>
+  <!-- Während Kontakte laden -->
+  <div v-if="loadingContacts" class="contact-skeleton">
+    <Skeleton height="3rem" class="mb-2"></Skeleton>
+  </div>
+  <Select v-else ...>
+
+  <!-- Während Form lädt -->
+  <div v-if="loadingInvoice" class="form-skeleton">
+    <Skeleton height="2.5rem" class="mb-3"></Skeleton>
+    <Skeleton height="2.5rem" class="mb-3"></Skeleton>
+    <Skeleton height="10rem"></Skeleton>
+  </div>
+</template>
+```
+
+**Button Loading States:**
+```vue
+<Button label="Speichern"
+        :loading="saving"
+        :disabled="!isFormValid || saving">
+  <template #loadingicon>
+    <i class="pi pi-spin pi-spinner"></i>
+  </template>
+</Button>
+```
+
+### 5.3 Keyboard Shortcuts
+
+```javascript
+// useKeyboardShortcuts.js composable
+import { onMounted, onUnmounted } from 'vue'
+
+export function useKeyboardShortcuts(shortcuts) {
+  const handleKeydown = (event) => {
+    const key = event.key.toLowerCase()
+    const ctrl = event.ctrlKey || event.metaKey
+    const shift = event.shiftKey
+
+    const shortcutKey = [
+      ctrl && 'ctrl',
+      shift && 'shift',
+      key
+    ].filter(Boolean).join('+')
+
+    const action = shortcuts[shortcutKey]
+    if (action) {
+      event.preventDefault()
+      action()
+    }
+  }
+
+  onMounted(() => {
+    window.addEventListener('keydown', handleKeydown)
+  })
+
+  onUnmounted(() => {
+    window.removeEventListener('keydown', handleKeydown)
+  })
+}
+
+// Verwendung im InvoiceForm
+useKeyboardShortcuts({
+  'ctrl+s': save,
+  'ctrl+shift+p': addItem,
+  'escape': cancel
+})
+```
+
+**Keyboard Hints in UI:**
+```vue
+<Button label="Speichern" icon="pi pi-check">
+  <template #default>
+    Speichern <kbd class="ml-2">Ctrl+S</kbd>
+  </template>
+</Button>
+```
+
+---
+
+## 6. Accessibility (WCAG 2.1 AA/AAA)
+
+### 6.1 ARIA Labels & Roles
+
+```vue
+<div class="invoice-form" role="form" aria-label="Rechnungsformular">
+
+  <!-- Section with proper heading hierarchy -->
+  <section aria-labelledby="invoice-info-heading">
+    <h3 id="invoice-info-heading">Rechnungsinformationen</h3>
+    ...
+  </section>
+
+  <!-- Required field indication -->
+  <label for="invoiceNumber">
+    Rechnungsnummer
+    <abbr title="Pflichtfeld" aria-label="Pflichtfeld">*</abbr>
+  </label>
+  <InputText id="invoiceNumber"
+             aria-required="true"
+             aria-invalid="submitted && !form.invoiceNumber"
+             aria-describedby="invoiceNumber-error" />
+  <small id="invoiceNumber-error"
+         class="p-error"
+         role="alert"
+         v-if="submitted && !form.invoiceNumber">
+    Rechnungsnummer ist erforderlich
+  </small>
+
+  <!-- Invoice items list -->
+  <div role="list" aria-label="Rechnungspositionen">
+    <div v-for="(item, index) in form.items"
+         :key="index"
+         role="listitem"
+         :aria-label="`Position ${index + 1}`">
+      ...
+    </div>
+  </div>
+
+  <!-- Action buttons -->
+  <div role="group" aria-label="Formularaktionen">
+    <Button label="Abbrechen"
+            aria-label="Formular abbrechen" />
+    <Button label="Speichern"
+            aria-label="Rechnung speichern" />
+  </div>
+</div>
+```
+
+### 6.2 Farbkontrast
+
+**Mindestanforderungen:**
+- Normaler Text (< 18pt): 4.5:1 (AA), 7:1 (AAA)
+- Großer Text (≥ 18pt): 3:1 (AA), 4.5:1 (AAA)
+- UI-Komponenten: 3:1
+
+**Farb-Validierung:**
+```css
+/* Ensure sufficient contrast */
+.p-error {
+  color: #DC2626; /* Contrast ratio 4.5:1 on white */
+}
+
+.text-secondary {
+  color: #6B7280; /* Contrast ratio 4.6:1 on white */
+}
+
+/* Never rely on color alone */
+.required-field::after {
+  content: ' *';
+  color: var(--danger-color);
+  font-weight: bold;
+}
+
+.invoice-status--overdue {
+  color: var(--danger-color);
+  font-weight: 600;
+  text-decoration: underline; /* Visual indicator beyond color */
+}
+```
+
+### 6.3 Focus Management
+
+```css
+/* Custom focus styles */
+*:focus-visible {
+  outline: 2px solid var(--primary-color);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+/* Skip to main content link */
+.skip-link {
+  position: absolute;
+  top: -40px;
+  left: 0;
+  background: var(--primary-color);
+  color: white;
+  padding: 8px;
+  text-decoration: none;
+  z-index: 100;
+}
+
+.skip-link:focus {
+  top: 0;
+}
+```
+
+**Focus Trap in Dialog:**
+```javascript
+// useFocusTrap.js
+import { onMounted, onUnmounted } from 'vue'
+
+export function useFocusTrap(containerRef) {
+  const focusableElements = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+
+  const trapFocus = (e) => {
+    if (e.key !== 'Tab' || !containerRef.value) return
+
+    const focusable = containerRef.value.querySelectorAll(focusableElements)
+    const firstFocusable = focusable[0]
+    const lastFocusable = focusable[focusable.length - 1]
+
+    if (e.shiftKey) {
+      if (document.activeElement === firstFocusable) {
+        lastFocusable.focus()
+        e.preventDefault()
+      }
+    } else {
+      if (document.activeElement === lastFocusable) {
+        firstFocusable.focus()
+        e.preventDefault()
+      }
+    }
+  }
+
+  onMounted(() => {
+    document.addEventListener('keydown', trapFocus)
+    // Focus first element
+    const firstFocusable = containerRef.value?.querySelector(focusableElements)
+    firstFocusable?.focus()
+  })
+
+  onUnmounted(() => {
+    document.removeEventListener('keydown', trapFocus)
+  })
+}
+```
+
+### 6.4 Screen Reader Support
+
+```vue
+<!-- Live region for dynamic updates -->
+<div aria-live="polite" aria-atomic="true" class="sr-only">
+  <span v-if="saving">Rechnung wird gespeichert...</span>
+  <span v-if="saved">Rechnung wurde gespeichert</span>
+</div>
+
+<!-- Descriptive button labels -->
+<Button icon="pi pi-trash"
+        aria-label="`Position ${index + 1} entfernen`"
+        @click="removeItem(index)" />
+
+<!-- Progress indication -->
+<ProgressBar :value="uploadProgress"
+             role="progressbar"
+             :aria-valuenow="uploadProgress"
+             aria-valuemin="0"
+             aria-valuemax="100"
+             aria-label="Upload-Fortschritt" />
+
+<!-- Screen reader only class -->
+<style>
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+</style>
+```
+
+---
+
+## 7. Performance Optimierungen
+
+### 7.1 Lazy Loading
+
+```javascript
+// Lazy load forms in InvoiceManagement.vue
+const InvoiceForm = defineAsyncComponent(() =>
+  import('./InvoiceForm.vue')
+)
+const PaymentForm = defineAsyncComponent(() =>
+  import('./PaymentForm.vue')
+)
+const PDFUploadForm = defineAsyncComponent(() =>
+  import('./PDFUploadForm.vue')
+)
+```
+
+### 7.2 Debouncing
+
+```javascript
+// Debounce expensive calculations
+import { debounce } from 'lodash-es'
+
+const calculateTotals = debounce(() => {
+  // Berechnung der Gesamtsummen
+  totals.value = {
+    net: 0,
+    taxBreakdown: {},
+    gross: 0
+  }
+
+  form.value.items.forEach(item => {
+    const net = item.quantity * item.unitPrice
+    const tax = net * (item.taxRate / 100)
+
+    totals.value.net += net
+    totals.value.taxBreakdown[item.taxRate] =
+      (totals.value.taxBreakdown[item.taxRate] || 0) + tax
+    totals.value.gross += net + tax
+  })
+}, 300)
+```
+
+### 7.3 Virtual Scrolling (für lange Listen)
+
+```vue
+<!-- Wenn viele Kontakte -->
+<VirtualScroller :items="contacts"
+                 :item-size="50"
+                 class="contact-list">
+  <template v-slot:item="{ item }">
+    <div class="contact-option">
+      {{ item.companyName }}
+    </div>
+  </template>
+</VirtualScroller>
+```
+
+---
+
+## 8. Testing Strategy
+
+### 8.1 Unit Tests
+
+```javascript
+// InvoiceForm.spec.js
+import { mount } from '@vue/test-utils'
+import InvoiceForm from './InvoiceForm.vue'
+import PrimeVue from 'primevue/config'
+
+describe('InvoiceForm', () => {
+  it('validates required fields', async () => {
+    const wrapper = mount(InvoiceForm, {
+      global: {
+        plugins: [PrimeVue]
+      }
+    })
+
+    await wrapper.find('button[type="submit"]').trigger('click')
+
+    expect(wrapper.text()).toContain('Rechnungsnummer ist erforderlich')
+    expect(wrapper.text()).toContain('Bitte wählen Sie einen Kunden aus')
+  })
+
+  it('calculates totals correctly', async () => {
+    const wrapper = mount(InvoiceForm)
+
+    await wrapper.vm.addItem()
+    wrapper.vm.form.items[0] = {
+      quantity: 2,
+      unitPrice: 100,
+      taxRate: 19
+    }
+
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.vm.totals.net).toBe(200)
+    expect(wrapper.vm.totals.gross).toBe(238)
+  })
+})
+```
+
+### 8.2 E2E Tests (Cypress/Playwright)
+
+```javascript
+// invoice.spec.js
+describe('Invoice Management', () => {
+  it('creates new invoice', () => {
+    cy.login('admin@mycrm.local', 'admin123')
+    cy.visit('/billing/invoices')
+
+    cy.contains('Neue Rechnung').click()
+
+    // Fill form
+    cy.get('#invoiceNumber').type('INV-2025-001')
+    cy.get('#contact').click()
+    cy.contains('ACME Corp').click()
+
+    // Add item
+    cy.contains('Position hinzufügen').click()
+    cy.get('[id^="description-"]').first().type('Consulting Services')
+    cy.get('[id^="quantity-"]').first().clear().type('10')
+    cy.get('[id^="unitPrice-"]').first().clear().type('100')
+
+    // Verify total
+    cy.contains('Gesamtbetrag:').parent().should('contain', '1.190,00 €')
+
+    // Save
+    cy.contains('button', 'Speichern').click()
+
+    // Verify success
+    cy.contains('Rechnung wurde erstellt')
+    cy.contains('INV-2025-001')
+  })
+})
+```
+
+---
+
+## 9. Implementierungs-Roadmap
+
+### Phase 1: Foundation (Woche 1-2)
+- [ ] Styling-System aufsetzen (CSS Variables, Utilities)
+- [ ] Formular-Layout refactoren (Grid System, Sections)
+- [ ] FloatLabel für alle Inputs implementieren
+- [ ] Validation Composable erstellen
+
+### Phase 2: Invoice Items Redesign (Woche 3)
+- [ ] Card-basierte Positions-Ansicht implementieren
+- [ ] Echtzeit-Summenberechnung
+- [ ] Transitions für Add/Remove
+- [ ] Empty State Design
+
+### Phase 3: Enhanced Forms (Woche 4)
+- [ ] PaymentForm Context Card
+- [ ] PDF Upload Drag & Drop
+- [ ] Quick Amount Buttons
+- [ ] Keyboard Shortcuts
+
+### Phase 4: UX Polish (Woche 5)
+- [ ] Loading States & Skeletons
+- [ ] Micro-Interactions & Animations
+- [ ] Toast-Benachrichtigungen harmonisieren
+- [ ] Error Handling verbessern
+
+### Phase 5: Accessibility (Woche 6)
+- [ ] ARIA Labels hinzufügen
+- [ ] Focus Management
+- [ ] Keyboard Navigation
+- [ ] Screen Reader Testing
+
+### Phase 6: Testing & Optimization (Woche 7)
+- [ ] Unit Tests schreiben
+- [ ] E2E Tests implementieren
+- [ ] Performance Profiling
+- [ ] Code Splitting optimieren
+
+---
+
+## 10. Design-System Komponenten
+
+### 10.1 Wiederverwendbare Komponenten
+
+**FormSection.vue** - Wrapper für Formular-Sektionen
+```vue
+<template>
+  <div class="form-section" :class="{'form-section--collapsible': collapsible}">
+    <div v-if="title" class="form-section-header">
+      <h3 class="form-section-title">
+        <slot name="title">{{ title }}</slot>
+      </h3>
+      <div class="form-section-actions">
+        <slot name="actions"></slot>
+      </div>
+    </div>
+    <div class="form-section-body">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  title: String,
+  collapsible: Boolean
+})
+</script>
+```
+
+**CurrencyDisplay.vue** - Formatierte Währungsanzeige
+```vue
+<template>
+  <span class="currency-display" :class="[`currency-display--${size}`, { 'currency-display--highlight': highlight }]">
+    {{ formatted }}
+  </span>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  amount: [Number, String],
+  currency: { type: String, default: 'EUR' },
+  locale: { type: String, default: 'de-DE' },
+  size: { type: String, default: 'normal' }, // small, normal, large
+  highlight: Boolean
+})
+
+const formatted = computed(() => {
+  const num = parseFloat(props.amount || 0)
+  return new Intl.NumberFormat(props.locale, {
+    style: 'currency',
+    currency: props.currency
+  }).format(num)
+})
+</script>
+
+<style scoped>
+.currency-display--small { font-size: 0.875rem; }
+.currency-display--normal { font-size: 1rem; }
+.currency-display--large { font-size: 1.25rem; font-weight: 600; }
+.currency-display--highlight { color: var(--primary-color); }
+</style>
+```
+
+**StatusBadge.vue** - Einheitliche Status-Anzeige
+```vue
+<template>
+  <Tag :value="label"
+       :severity="severity"
+       :icon="icon"
+       class="status-badge">
+    <template #default>
+      <i v-if="icon" :class="icon" class="mr-1"></i>
+      {{ label }}
+    </template>
+  </Tag>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import Tag from 'primevue/tag'
+
+const props = defineProps({
+  status: String,
+  type: { type: String, default: 'invoice' } // invoice, payment, etc.
+})
+
+const statusConfig = {
+  invoice: {
+    draft: { label: 'Entwurf', severity: 'secondary', icon: 'pi pi-file-edit' },
+    open: { label: 'Offen', severity: 'info', icon: 'pi pi-clock' },
+    paid: { label: 'Bezahlt', severity: 'success', icon: 'pi pi-check-circle' },
+    partial: { label: 'Teilweise bezahlt', severity: 'warning', icon: 'pi pi-exclamation-triangle' },
+    overdue: { label: 'Überfällig', severity: 'danger', icon: 'pi pi-times-circle' },
+    cancelled: { label: 'Storniert', severity: 'secondary', icon: 'pi pi-ban' }
+  }
+}
+
+const config = computed(() => statusConfig[props.type]?.[props.status] || {})
+const label = computed(() => config.value.label || props.status)
+const severity = computed(() => config.value.severity || 'info')
+const icon = computed(() => config.value.icon)
+</script>
+```
+
+---
+
+## 11. Anhang
+
+### 11.1 Checkliste für Entwickler
+
+**Vor der Implementierung:**
+- [ ] Design-System Variablen verstanden
+- [ ] PrimeVue Komponenten-Dokumentation gelesen
+- [ ] Accessibility Guidelines durchgegangen
+- [ ] Responsive Breakpoints definiert
+
+**Während der Implementierung:**
+- [ ] Semantisches HTML verwenden
+- [ ] ARIA-Attribute hinzufügen
+- [ ] Keyboard-Navigation testen
+- [ ] Validierung implementieren
+- [ ] Loading States einbauen
+- [ ] Error Handling abdecken
+
+**Nach der Implementierung:**
+- [ ] Mit Screen Reader testen
+- [ ] Auf verschiedenen Bildschirmgrößen testen
+- [ ] Performance messen
+- [ ] Unit Tests schreiben
+- [ ] Code Review durchführen
+
+### 11.2 Browser-Kompatibilität
+
+**Mindestanforderungen:**
+- Chrome/Edge 90+
+- Firefox 88+
+- Safari 14+
+- Mobile Safari 14+
+- Chrome Android 90+
+
+**Polyfills für:**
+- Intl.NumberFormat (bereits vorhanden)
+- CSS Custom Properties (bereits unterstützt)
+
+### 11.3 Design-Assets
+
+**Icons:** PrimeIcons (pi-*)
+**Fonts:** System Font Stack
+```css
+font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+             'Helvetica Neue', Arial, sans-serif;
+```
+
+**Illustrations:** Optional für Empty States (z.B. unDraw)
+
+---
+
+## 12. Zusammenfassung & Nächste Schritte
+
+### Key Takeaways
+
+1. **Visuelle Hierarchie** durch klare Sektion-Trennung und konsistentes Spacing
+2. **Verbesserte Formular-UX** mit FloatLabels, Echtzeit-Validierung und besseren Fehler-Messages
+3. **Card-basierte Rechnungspositionen** statt komplexer Inline-DataTable
+4. **Echtzeit-Summenberechnung** für sofortiges Feedback
+5. **Accessibility-First** Ansatz mit ARIA-Labels und Keyboard-Support
+6. **Responsive Design** für alle Geräte optimiert
+
+### Quick Wins (sofort umsetzbar)
+
+1. FloatLabel für alle Formular-Felder
+2. Status-Tag in Formular-Header
+3. Verbesserte Kunden-Dropdown mit Icons
+4. Echtzeit-Summenberechnung
+5. Quick Amount Buttons im PaymentForm
+
+### Langfristige Verbesserungen
+
+1. Komplett neues Positions-Management mit Cards
+2. Drag & Drop PDF Upload
+3. Umfassendes Keyboard-Shortcut System
+4. Vollständige WCAG AAA Konformität
+5. Progressive Web App Features
+
+---
+
+**Dokument-Version:** 1.0
+**Letztes Update:** 2025-12-12
+**Autor:** Claude (UX Designer Agent)
+**Projekt:** myCRM Billing Module
diff --git a/docs/design/README.md b/docs/design/README.md
new file mode 100644
index 0000000..462f2f9
--- /dev/null
+++ b/docs/design/README.md
@@ -0,0 +1,448 @@
+# Invoice Form Design Documentation
+**myCRM Billing Module - UX/UI Design System**
+
+---
+
+## Übersicht
+
+Diese Design-Dokumentation enthält eine umfassende UX/UI-Analyse und Verbesserungsvorschläge für das Invoice-Formular im myCRM Billing-Modul. Die Dokumentation folgt professionellen UI/UX-Design-Standards und berücksichtigt Accessibility-Anforderungen nach WCAG 2.1 AA/AAA.
+
+---
+
+## Dokumenten-Struktur
+
+### 1. Hauptdokumentation
+
+**[INVOICE_FORM_UX_DESIGN.md](./INVOICE_FORM_UX_DESIGN.md)**
+- Vollständige UX/UI-Analyse des bestehenden Invoice-Formulars
+- Identifizierte Probleme und Verbesserungspotenziale (P0, P1, P2)
+- Design-Prinzipien und Konzepte
+- Detaillierte Komponentenspezifikationen
+- Accessibility-Guidelines (WCAG 2.1 AA/AAA)
+- Implementierungs-Roadmap (6 Phasen)
+- Testing-Strategie
+
+**Umfang:** ~350 Zeilen | Geschätzte Lesezeit: 30-40 Minuten
+
+### 2. Visuelle Design-Referenz
+
+**[VISUAL_DESIGN_GUIDE.md](./VISUAL_DESIGN_GUIDE.md)**
+- Farbpalette und Kontraste
+- Typography-System
+- Spacing-System (4px Base Unit)
+- Komponent-Anatomie mit ASCII-Diagrammen
+- Interaktive States (Buttons, Inputs, etc.)
+- Animation und Transitions
+- Responsive Breakpoints
+- Iconographie
+- Error Handling Patterns
+- Loading & Empty States
+- Print Styles
+
+**Umfang:** ~500 Zeilen | Geschätzte Lesezeit: 20-25 Minuten
+
+### 3. Referenz-Implementierung
+
+**[invoice-form-improved.vue](./invoice-form-improved.vue)**
+- Vollständige Vue.js 3 Komponente mit allen Verbesserungen
+- PrimeVue Komponenten-Integration
+- Composition API Pattern
+- Verwendung von Composables (useFormValidation, useKeyboardShortcuts)
+- Accessibility-Features (ARIA-Labels, Focus Management)
+- Responsive Design
+- Animations & Transitions
+
+**Umfang:** ~600 Zeilen | Typ: Vue SFC (Single File Component)
+
+### 4. CSS Design System
+
+**[invoice-form-styles.css](./invoice-form-styles.css)**
+- CSS Custom Properties (Design Tokens)
+- Komponent-spezifische Styles
+- Layout-Utilities
+- Animation Keyframes
+- Responsive Media Queries
+- Dark Mode Support
+- Accessibility Utilities (sr-only, focus-visible)
+- Print Styles
+
+**Umfang:** ~800 Zeilen | Typ: CSS
+
+### 5. Composables
+
+#### **[useFormValidation.js](./composables/useFormValidation.js)**
+- Wiederverwendbare Form-Validierungslogik
+- Echtzeit-Validierung
+- Feld-spezifische Regeln
+- Error-Tracking
+- Vordefinierte Validierungsregeln (email, phone, IBAN, etc.)
+
+**Umfang:** ~400 Zeilen | Typ: JavaScript Composable
+
+#### **[useKeyboardShortcuts.js](./composables/useKeyboardShortcuts.js)**
+- Keyboard-Shortcut-Management
+- Modifier-Key-Support (Ctrl, Shift, Alt)
+- Conflict-Detection
+- Platform-spezifische Hints (Mac vs. Windows)
+- Preset-Shortcuts für gängige Aktionen
+
+**Umfang:** ~400 Zeilen | Typ: JavaScript Composable
+
+---
+
+## Quick Start Guide
+
+### Für Designer
+
+1. **Beginnen Sie mit:** [INVOICE_FORM_UX_DESIGN.md](./INVOICE_FORM_UX_DESIGN.md) - Executive Summary
+2. **Dann:** [VISUAL_DESIGN_GUIDE.md](./VISUAL_DESIGN_GUIDE.md) - Farbpalette & Typography
+3. **Zuletzt:** Komponent-Anatomie-Diagramme für Implementierungs-Übergabe
+
+### Für Entwickler
+
+1. **Beginnen Sie mit:** [invoice-form-improved.vue](./invoice-form-improved.vue) - Referenz-Implementierung
+2. **Dann:** [invoice-form-styles.css](./invoice-form-styles.css) - Styling-Referenz
+3. **Integrieren Sie:** Composables aus `./composables/` für Validierung und Shortcuts
+4. **Referenzieren Sie:** [INVOICE_FORM_UX_DESIGN.md](./INVOICE_FORM_UX_DESIGN.md) - Implementierungs-Roadmap
+
+### Für Product Owner
+
+1. **Beginnen Sie mit:** [INVOICE_FORM_UX_DESIGN.md](./INVOICE_FORM_UX_DESIGN.md) - Executive Summary & Problemanalyse
+2. **Dann:** Implementierungs-Roadmap (Phase 1-6)
+3. **Priorisieren Sie:** Nach P0 (kritisch), P1 (mittel), P2 (niedrig) Tags
+
+---
+
+## Key Features des Design-Konzepts
+
+### UX-Verbesserungen
+
+- **Klarere visuelle Hierarchie** durch Sektionierung und konsistentes Spacing
+- **Card-basierte Rechnungspositionen** statt komplexer DataTable
+- **Echtzeit-Summenberechnung** mit sofortigem Feedback
+- **Verbesserte Validierung** mit Inline-Feedback
+- **Empty States** für bessere Benutzerführung
+- **Context Cards** für kontextuelle Informationen (Payment Form)
+- **Drag & Drop** für PDF-Upload
+
+### Accessibility (WCAG 2.1)
+
+- **Keyboard Navigation** mit Focus-Trapping und Shortcuts
+- **ARIA-Labels** für Screen Reader Support
+- **Farbkontrast** WCAG AA/AAA konform
+- **Focus Management** mit sichtbaren Focus-States
+- **Live Regions** für dynamische Updates
+
+### Performance
+
+- **Lazy Loading** von Formular-Komponenten
+- **Debouncing** für Berechnungen
+- **Virtual Scrolling** für lange Listen
+- **Code Splitting** für optimale Bundle-Größen
+
+### Responsive Design
+
+- **Mobile First** Ansatz
+- **Touch-friendly** Elemente (min. 44px)
+- **Adaptive Layouts** für alle Bildschirmgrößen
+- **Sticky Summary** auf Mobile für bessere Übersicht
+
+---
+
+## Implementierungs-Phasen
+
+### Phase 1: Foundation (Woche 1-2)
+**Priorität:** P0 (Kritisch)
+- Styling-System aufsetzen
+- Formular-Layout refactoren
+- FloatLabel implementieren
+- Validation Composable erstellen
+
+**Geschätzter Aufwand:** 16-20 Stunden
+
+### Phase 2: Invoice Items Redesign (Woche 3)
+**Priorität:** P0 (Kritisch)
+- Card-basierte Positions-Ansicht
+- Echtzeit-Summenberechnung
+- Transitions für Add/Remove
+- Empty State Design
+
+**Geschätzter Aufwand:** 12-16 Stunden
+
+### Phase 3: Enhanced Forms (Woche 4)
+**Priorität:** P1 (Mittel)
+- PaymentForm Context Card
+- PDF Upload Drag & Drop
+- Quick Amount Buttons
+- Keyboard Shortcuts
+
+**Geschätzter Aufwand:** 10-14 Stunden
+
+### Phase 4: UX Polish (Woche 5)
+**Priorität:** P1 (Mittel)
+- Loading States & Skeletons
+- Micro-Interactions & Animations
+- Toast-Benachrichtigungen
+- Error Handling
+
+**Geschätzter Aufwand:** 8-12 Stunden
+
+### Phase 5: Accessibility (Woche 6)
+**Priorität:** P0 (Kritisch)
+- ARIA Labels hinzufügen
+- Focus Management
+- Keyboard Navigation
+- Screen Reader Testing
+
+**Geschätzter Aufwand:** 10-14 Stunden
+
+### Phase 6: Testing & Optimization (Woche 7)
+**Priorität:** P1 (Mittel)
+- Unit Tests schreiben
+- E2E Tests implementieren
+- Performance Profiling
+- Code Splitting optimieren
+
+**Geschätzter Aufwand:** 12-16 Stunden
+
+**Gesamt:** 68-92 Stunden (ca. 2-2.5 Monate für einen Entwickler)
+
+---
+
+## Design-Prinzipien
+
+### 1. Progressive Disclosure
+Zeige nur relevante Informationen zum richtigen Zeitpunkt. Komplexität wird schrittweise enthüllt.
+
+**Beispiel:** Notizen-Sektion standardmäßig kollabiert, Summary Box nur wenn Items vorhanden.
+
+### 2. Immediate Feedback
+Sofortige Rückmeldung auf Benutzeraktionen. Keine verzögerten oder fehlenden Bestätigungen.
+
+**Beispiel:** Echtzeit-Berechnung der Zwischensummen beim Eingeben, Toast-Benachrichtigungen nach Aktionen.
+
+### 3. Error Prevention
+Validierung bevor Fehler entstehen. Eingaben werden direkt beim Tippen geprüft.
+
+**Beispiel:** Inline-Validierung, Min-Date beim Fälligkeitsdatum verhindert ungültige Daten.
+
+### 4. Consistency
+Einheitliche Nutzung von PrimeVue-Komponenten, Farben, Spacing und Patterns.
+
+**Beispiel:** Alle Formularfelder nutzen FloatLabel, alle Buttons haben einheitliche Größen.
+
+### 5. Accessibility First
+Design und Implementierung berücksichtigen von Anfang an alle Nutzer, einschließlich Menschen mit Behinderungen.
+
+**Beispiel:** Keyboard Navigation, Screen Reader Support, ausreichende Kontraste.
+
+---
+
+## Technologie-Stack
+
+### Frontend Framework
+- **Vue.js 3** (Composition API)
+- **PrimeVue 4.x** (Aura Theme)
+- **Tailwind CSS v4** (mit PrimeUI Plugin)
+
+### Build & Dev Tools
+- **Webpack Encore**
+- **Symfony 7.1 LTS** (Backend)
+- **API Platform** (REST API)
+
+### Testing
+- **Vitest** (Unit Tests)
+- **Cypress/Playwright** (E2E Tests)
+- **axe DevTools** (Accessibility Testing)
+
+---
+
+## Browser-Kompatibilität
+
+### Unterstützte Browser
+- Chrome/Edge 90+
+- Firefox 88+
+- Safari 14+
+- Mobile Safari 14+
+- Chrome Android 90+
+
+### Polyfills
+- Intl.NumberFormat (bereits vorhanden)
+- CSS Custom Properties (nativ unterstützt)
+
+---
+
+## Design-Assets
+
+### Farbpalette
+Siehe [VISUAL_DESIGN_GUIDE.md - Section 1](./VISUAL_DESIGN_GUIDE.md#1-farbpalette--kontraste)
+
+### Icons
+**PrimeIcons** (pi-*) - Vollständige Icon-Bibliothek integriert
+- ~250 Icons verfügbar
+- SVG-basiert, skalierbar
+- Konsistenter Stil
+
+### Typography
+**System Font Stack** für optimale Performance:
+```css
+font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+             'Helvetica Neue', Arial, sans-serif;
+```
+
+### Illustrations
+Optional für Empty States: **unDraw** (lizenzfrei)
+
+---
+
+## Testing-Strategie
+
+### Unit Tests
+- Validierungs-Logik testen
+- Berechnungs-Funktionen testen
+- Composables isoliert testen
+
+### Integration Tests
+- Formular-Submission testen
+- API-Integration testen
+- State-Management testen
+
+### E2E Tests
+- Komplette User-Flows testen
+- Rechnungserstellung Ende-zu-Ende
+- Zahlungserfassung testen
+
+### Accessibility Tests
+- axe DevTools Audit
+- NVDA/VoiceOver Screen Reader Testing
+- Keyboard-Navigation manuell testen
+- Farbkontrast-Validierung
+
+### Performance Tests
+- Lighthouse Audit (Score > 90)
+- Bundle-Size-Analyse
+- Time to Interactive < 3s
+- First Contentful Paint < 1.5s
+
+---
+
+## Häufige Fragen (FAQ)
+
+### Warum FloatLabel statt normale Labels?
+
+**Antwort:** FloatLabel bietet mehrere Vorteile:
+- Moderneres, aufgeräumteres Design
+- Platzsparend (kein separater Label-Space)
+- Bessere visuelle Hierarchie
+- Klarer Fokus-Zustand
+- Bereits in PrimeVue integriert
+
+### Warum Cards statt DataTable für Invoice Items?
+
+**Antwort:** Cards bieten bessere UX:
+- Einfacheres Inline-Editing
+- Bessere mobile Darstellung
+- Klare visuelle Trennung
+- Flexiblere Layouts
+- Bessere Accessibility
+
+### Wie wird Dark Mode unterstützt?
+
+**Antwort:**
+- PrimeVue Aura Theme hat nativen Dark Mode Support
+- CSS Custom Properties passen sich automatisch an
+- Spezielle Dark Mode Overrides wo nötig (siehe invoice-form-styles.css)
+- App-Toggle über `.app-dark` CSS-Klasse
+
+### Ist das Design responsive?
+
+**Antwort:** Ja, vollständig:
+- Mobile First Ansatz
+- 5 Breakpoints (< 576px bis > 1920px)
+- Touch-friendly Elemente (min. 44px)
+- Adaptive Layouts für alle Größen
+- Stack-Layout auf Mobile
+
+### Wie werden Fehler behandelt?
+
+**Antwort:**
+- Inline-Validierung (on blur)
+- Submit-Validierung (alle Felder)
+- Toast-Benachrichtigungen für System-Fehler
+- Visuelle Error-States (rote Border + Message)
+- ARIA Live Regions für Screen Reader
+
+---
+
+## Nächste Schritte
+
+### Sofort umsetzbar (Quick Wins)
+
+1. FloatLabel für alle Formular-Felder einführen
+2. Status-Tag in Formular-Header einbauen
+3. Verbesserter Kunden-Dropdown mit Icons
+4. Echtzeit-Summenberechnung implementieren
+5. Quick Amount Buttons im PaymentForm
+
+**Aufwand:** ~8 Stunden | **Impact:** Hoch
+
+### Mittelfristig (1-2 Sprints)
+
+1. Card-basiertes Positions-Management
+2. Comprehensive Validation Composable
+3. Keyboard Shortcuts System
+4. Loading States & Skeletons
+
+**Aufwand:** ~30 Stunden | **Impact:** Sehr hoch
+
+### Langfristig (2+ Sprints)
+
+1. Drag & Drop PDF Upload
+2. Vollständige WCAG AAA Konformität
+3. PWA Features (Offline Support)
+4. Advanced Analytics Integration
+
+**Aufwand:** ~50 Stunden | **Impact:** Mittel-Hoch
+
+---
+
+## Mitwirkende
+
+**Design & Konzeption:**
+- Claude (UX Designer Agent) - Initial Design & Dokumentation
+
+**Review & Feedback:**
+- [Ihr Team hier eintragen]
+
+**Implementierung:**
+- [Entwickler hier eintragen]
+
+---
+
+## Änderungshistorie
+
+| Version | Datum      | Autor          | Änderungen                         |
+|---------|------------|----------------|------------------------------------|
+| 1.0     | 2025-12-12 | Claude (UX)    | Initiale Dokumentation erstellt    |
+
+---
+
+## Lizenz & Copyright
+
+© 2025 myCRM Project
+Interne Dokumentation - Vertraulich
+
+---
+
+## Kontakt & Support
+
+Bei Fragen zur Design-Dokumentation:
+- Erstellen Sie ein Issue im Repository
+- Kontaktieren Sie das Design-Team
+- Schlagen Sie Verbesserungen via Pull Request vor
+
+---
+
+**Letzte Aktualisierung:** 2025-12-12
+**Dokument-Version:** 1.0
+**Status:** In Review ✓
diff --git a/docs/design/VISUAL_DESIGN_GUIDE.md b/docs/design/VISUAL_DESIGN_GUIDE.md
new file mode 100644
index 0000000..0f66f0f
--- /dev/null
+++ b/docs/design/VISUAL_DESIGN_GUIDE.md
@@ -0,0 +1,679 @@
+# Visual Design Guide - Invoice Form
+**myCRM Billing Module | Design Reference**
+
+---
+
+## 1. Farbpalette & Kontraste
+
+### Status Colors (Semantic)
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│ DRAFT (Entwurf)        │ #6B7280 │ ░░░░░░░░░░░░ Secondary  │
+│ OPEN (Offen)           │ #06B6D4 │ ████████████ Info       │
+│ PAID (Bezahlt)         │ #22C55E │ ████████████ Success    │
+│ PARTIAL (Teilzahlung)  │ #F59E0B │ ████████████ Warning    │
+│ OVERDUE (Überfällig)   │ #EF4444 │ ████████████ Danger     │
+│ CANCELLED (Storniert)  │ #6B7280 │ ░░░░░░░░░░░░ Secondary  │
+└─────────────────────────────────────────────────────────────┘
+```
+
+### Surface Colors
+
+```
+Light Mode:                         Dark Mode:
+┌──────────────────────────────┐   ┌──────────────────────────────┐
+│ Background     #FFFFFF       │   │ Background     #0F172A       │
+│ Surface-0      #FFFFFF       │   │ Surface-0      #1E293B       │
+│ Surface-50     #F9FAFB       │   │ Surface-50     #334155       │
+│ Surface-100    #F3F4F6       │   │ Surface-100    #475569       │
+│ Surface-200    #E5E7EB       │   │ Surface-200    #64748B       │
+└──────────────────────────────┘   └──────────────────────────────┘
+```
+
+### Text Colors
+
+```
+┌────────────────────────────────────────────────────────────┐
+│ Primary Text    #111827  ████  High contrast (main text)  │
+│ Secondary Text  #6B7280  ████  Medium contrast (labels)   │
+│ Muted Text      #9CA3AF  ████  Low contrast (hints)       │
+└────────────────────────────────────────────────────────────┘
+```
+
+### Accessibility Compliance
+
+```
+WCAG 2.1 AA Requirements:
+✓ Normal Text (14px):   4.5:1 contrast ratio
+✓ Large Text (18px+):   3.0:1 contrast ratio
+✓ UI Components:        3.0:1 contrast ratio
+
+WCAG 2.1 AAA Requirements:
+✓ Normal Text (14px):   7.0:1 contrast ratio
+✓ Large Text (18px+):   4.5:1 contrast ratio
+```
+
+---
+
+## 2. Typography System
+
+### Font Stack
+```css
+font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+             'Helvetica Neue', Arial, sans-serif;
+```
+
+### Type Scale
+
+```
+┌──────────────────────────────────────────────────────────────┐
+│ Dialog Title       24px / 1.5rem    Bold      (600)          │
+│ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ │
+│                                                                │
+│ Section Title      20px / 1.25rem   Semibold (600)           │
+│ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀            │
+│                                                                │
+│ Subsection         16px / 1rem      Medium   (500)           │
+│ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀                     │
+│                                                                │
+│ Body Text          14px / 0.875rem  Regular  (400)           │
+│ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀                           │
+│                                                                │
+│ Small Text         12px / 0.75rem   Regular  (400)           │
+│ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀                                  │
+└──────────────────────────────────────────────────────────────┘
+```
+
+### Line Heights
+
+```
+Headings:   1.2  (tight)
+Body:       1.5  (normal)
+Dense:      1.3  (compact tables)
+Relaxed:    1.75 (long form text)
+```
+
+---
+
+## 3. Spacing System
+
+### Base Unit: 4px
+
+```
+┌───────────────────────────────────────────────────────────┐
+│ Space    Size     Usage                                   │
+├───────────────────────────────────────────────────────────┤
+│ 0.25rem  4px   │  Minimal gap (inline icons)             │
+│ 0.5rem   8px   ││ Label margin, tight spacing            │
+│ 0.75rem  12px  │││ Inline field gaps                     │
+│ 1rem     16px  ││││ Field gaps (standard)                │
+│ 1.5rem   24px  │││││││ Section padding                   │
+│ 2rem     32px  ││││││││││ Section gaps                   │
+│ 3rem     48px  │││││││││││││││││ Empty state padding    │
+└───────────────────────────────────────────────────────────┘
+```
+
+### Component Spacing
+
+```
+FORM SECTION:
+┌─────────────────────────────────────┐
+│ [24px padding]                      │
+│                                     │
+│ ┌─────────────────────────────┐   │
+│ │ Header                      │   │
+│ └─────────────────────────────┘   │
+│ [24px gap]                          │
+│ ┌─────────────────────────────┐   │
+│ │ Field 1 [16px gap] Field 2  │   │
+│ └─────────────────────────────┘   │
+│ [16px gap]                          │
+│ ┌─────────────────────────────┐   │
+│ │ Field 3                     │   │
+│ └─────────────────────────────┘   │
+│                                     │
+│ [24px padding]                      │
+└─────────────────────────────────────┘
+[32px gap between sections]
+```
+
+---
+
+## 4. Component Anatomy
+
+### Invoice Item Card
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│ Position 1                                    [Delete] ←16px │
+│ ─────────────────────────────────────────────────────────── │ 16px
+│                                                               │
+│ ┌───────────────────────────────────────────────────────┐ │ │
+│ │ Beschreibung                                          │ │ │
+│ │ (Textarea - 2 rows)                                   │ │ │
+│ └───────────────────────────────────────────────────────┘ │ │
+│                                   ↕ 12px gap                 │
+│ ┌─────────────┐ ┌──────────────┐ ┌──────┐             │ │
+│ │   Menge     │ │  Einzelpreis │ │ MwSt │             │ │
+│ │   1.00 Stk. │ │   100,00 €   │ │ 19%  │             │ │
+│ └─────────────┘ └──────────────┘ └──────┘             │ │
+│                                   ↕ 16px gap                 │
+│ ─────────────────────────────────────────────────────────── │
+│ Zwischensumme:                           119,00 € ←semibold │
+└─────────────────────────────────────────────────────────────┘
+    ↑                                                       ↑
+  16px padding                                        16px padding
+```
+
+### Invoice Summary Box
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│ ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ │
+│ ┃ Zusammenfassung                     [24px padding]    ┃ │
+│ ┃ ───────────────────────────────────────────────────── ┃ │
+│ ┃                                                        ┃ │
+│ ┃ Nettobetrag:                          1.000,00 €  ← 8px │ │
+│ ┃ MwSt (19%):                             190,00 €      ┃ │
+│ ┃ MwSt (7%):                               14,00 €      ┃ │
+│ ┃                                   ↕ 12px gap          ┃ │
+│ ┃ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━  ┃ │
+│ ┃                                   ↕ 16px gap          ┃ │
+│ ┃ GESAMTBETRAG:                       1.204,00 €        ┃ │
+│ ┃ (20px font, bold)                                     ┃ │
+│ ┃                                                        ┃ │
+│ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ │
+└─────────────────────────────────────────────────────────────┘
+  Gradient background: primary-50 → primary-100
+  Border: 2px solid primary-color
+```
+
+### Empty State
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│                                                               │
+│                          48px ↓                              │
+│                     ┌──────────────┐                         │
+│                     │              │                         │
+│                     │   Inbox      │ ← 48px icon, muted      │
+│                     │   Icon       │                         │
+│                     └──────────────┘                         │
+│                          16px ↓                              │
+│              Noch keine Positionen hinzugefügt              │
+│              (16px, medium weight, secondary color)          │
+│                          8px ↓                               │
+│       Fügen Sie mindestens eine Position hinzu,             │
+│             um die Rechnung zu erstellen                     │
+│              (12px, muted color)                             │
+│                          24px ↓                              │
+│              ┌──────────────────────────┐                   │
+│              │ Erste Position hinzufügen │                   │
+│              └──────────────────────────┘                   │
+│                                                               │
+│                          48px ↓                              │
+└─────────────────────────────────────────────────────────────┘
+```
+
+---
+
+## 5. Interactive States
+
+### Button States
+
+```
+DEFAULT:
+┌──────────────┐
+│   Speichern  │  Background: primary-color
+└──────────────┘  Text: white
+                  Height: 40px (2.5rem)
+                  Padding: 12px 20px
+                  Border-radius: 6px
+
+HOVER:
+┌──────────────┐
+│   Speichern  │  Background: primary-600 (darker)
+└──────────────┘  Transform: scale(1.02)
+                  Transition: 0.2s ease
+
+FOCUS:
+┌──────────────┐
+│   Speichern  │  Outline: 2px solid primary-color
+└──────────────┘  Outline-offset: 2px
+
+LOADING:
+┌──────────────┐
+│ ⟳ Speichern  │  Spinner icon rotating
+└──────────────┘  Cursor: wait
+                  Opacity: 0.8
+
+DISABLED:
+┌──────────────┐
+│   Speichern  │  Background: surface-200
+└──────────────┘  Text: text-muted
+                  Cursor: not-allowed
+                  Opacity: 0.6
+```
+
+### Input Field States
+
+```
+DEFAULT (FloatLabel):
+┌─────────────────────────────────────┐
+│ Rechnungsnummer                     │ ← Label (12px, top)
+│ INV-2025-001                        │ ← Value (14px)
+└─────────────────────────────────────┘
+  Border: 1px solid surface-200
+  Height: 44px (touch-friendly)
+
+FOCUS:
+┌─────────────────────────────────────┐
+│ Rechnungsnummer                     │ ← Label (primary color)
+│ INV-2025-001│                       │ ← Cursor visible
+└─────────────────────────────────────┘
+  Border: 2px solid primary-color
+  Box-shadow: 0 0 0 3px primary-50
+
+ERROR:
+┌─────────────────────────────────────┐
+│ Rechnungsnummer                     │ ← Label (danger color)
+│ INV-2025-001                        │
+└─────────────────────────────────────┘
+⚠ Rechnungsnummer ist erforderlich    ← Error message (12px, danger)
+  Border: 2px solid danger-color
+
+DISABLED:
+┌─────────────────────────────────────┐
+│ Rechnungsnummer                     │ ← Label (muted)
+│ INV-2025-001                        │ ← Value (muted)
+└─────────────────────────────────────┘
+  Background: surface-100
+  Cursor: not-allowed
+  Opacity: 0.6
+```
+
+---
+
+## 6. Animation & Transitions
+
+### Timing Functions
+
+```javascript
+// Fast interactions (hover, focus)
+transition: all 0.15s ease-in-out;
+
+// Standard interactions (expand, collapse)
+transition: all 0.2s ease;
+
+// Slow interactions (page transitions)
+transition: all 0.3s ease;
+```
+
+### List Animations (Invoice Items)
+
+```
+ENTER (new item):
+┌─────────────┐     ┌─────────────┐
+│   Opacity   │ →   │   Opacity   │
+│     0.0     │     │     1.0     │
+└─────────────┘     └─────────────┘
+      ↓                   ↓
+TranslateY(-20px)   TranslateY(0)
+Duration: 0.3s ease-out
+
+LEAVE (deleted item):
+┌─────────────┐     ┌─────────────┐
+│   Opacity   │ →   │   Opacity   │
+│     1.0     │     │     0.0     │
+└─────────────┘     └─────────────┘
+      ↓                   ↓
+TranslateX(0)       TranslateX(20px)
+Duration: 0.3s ease
+```
+
+### Micro-interactions
+
+```
+Button Click:
+  • Transform: scale(0.98)
+  • Duration: 0.1s
+  • Timing: ease-out
+
+Card Hover:
+  • Box-shadow: 0 2px 8px rgba(0,0,0,0.08)
+  • Border-color: primary-color
+  • Duration: 0.2s
+  • Timing: ease
+
+Toast Notification:
+  • Slide in from right
+  • Transform: translateX(100%) → translateX(0)
+  • Duration: 0.3s
+  • Timing: cubic-bezier(0.4, 0, 0.2, 1)
+```
+
+---
+
+## 7. Responsive Breakpoints
+
+```
+┌────────────────────────────────────────────────────────────┐
+│ BREAKPOINT     WIDTH      COLUMNS    LAYOUT                │
+├────────────────────────────────────────────────────────────┤
+│ Small Mobile   < 576px    1          Stack all fields      │
+│ Mobile         576-768px  1          Stack + full width    │
+│ Tablet         768-992px  1-2        Hybrid layout         │
+│ Desktop        992-1200px 2          2-column grid         │
+│ Large Desktop  > 1200px   2-3        Optimized spacing     │
+└────────────────────────────────────────────────────────────┘
+```
+
+### Layout Examples
+
+**Desktop (992px+)**
+```
+┌─────────────────────────────────────────────────────┐
+│ Rechnungsinformationen                       [Tag]  │
+│ ─────────────────────────────────────────────────── │
+│ ┌────────────────┐  ┌────────────────┐             │
+│ │ Rechnungsnr.   │  │ Status         │             │
+│ └────────────────┘  └────────────────┘             │
+│ ┌──────────────────────────────────────────────┐   │
+│ │ Kunde (full width)                           │   │
+│ └──────────────────────────────────────────────┘   │
+│ ┌────────────────┐  ┌────────────────┐             │
+│ │ Datum          │  │ Fälligk.       │             │
+│ └────────────────┘  └────────────────┘             │
+└─────────────────────────────────────────────────────┘
+```
+
+**Tablet (768-992px)**
+```
+┌─────────────────────────────────────┐
+│ Rechnungsinformationen       [Tag]  │
+│ ───────────────────────────────────── │
+│ ┌───────────────────────────────┐   │
+│ │ Rechnungsnr.                  │   │
+│ └───────────────────────────────┘   │
+│ ┌───────────────────────────────┐   │
+│ │ Status                        │   │
+│ └───────────────────────────────┘   │
+│ ┌───────────────────────────────┐   │
+│ │ Kunde                         │   │
+│ └───────────────────────────────┘   │
+│ ┌───────────────────────────────┐   │
+│ │ Datum                         │   │
+│ └───────────────────────────────┘   │
+│ ┌───────────────────────────────┐   │
+│ │ Fälligkeit                    │   │
+│ └───────────────────────────────┘   │
+└─────────────────────────────────────┘
+```
+
+**Mobile (< 768px)**
+```
+┌─────────────────────────┐
+│ Rechnung                │
+│                  [Tag]  │
+│ ─────────────────────── │
+│ ┌─────────────────────┐ │
+│ │ Rechnungsnr.        │ │
+│ └─────────────────────┘ │
+│ ┌─────────────────────┐ │
+│ │ Status              │ │
+│ └─────────────────────┘ │
+│ ┌─────────────────────┐ │
+│ │ Kunde               │ │
+│ └─────────────────────┘ │
+│         ...              │
+└─────────────────────────┘
+
+Dialog = Full Screen
+Summary = Sticky Bottom
+```
+
+---
+
+## 8. Iconography
+
+### PrimeIcons Usage
+
+```
+┌────────────────────────────────────────────────────────┐
+│ CONTEXT          ICON              SIZE    USAGE       │
+├────────────────────────────────────────────────────────┤
+│ Add Item         pi-plus           1rem    Buttons     │
+│ Remove Item      pi-trash          1rem    Buttons     │
+│ Save             pi-check          1rem    Buttons     │
+│ Cancel           pi-times          1rem    Buttons     │
+│ Upload           pi-upload         2rem    Empty state │
+│ PDF              pi-file-pdf       2.5rem  Preview     │
+│ Calendar         pi-calendar       0.875   Input icon  │
+│ Building/Company pi-building       1rem    Dropdown    │
+│ Info             pi-info-circle    1rem    Messages    │
+│ Warning          pi-exclamation    1rem    Alerts      │
+│ Success          pi-check-circle   1rem    Toast       │
+│ Error            pi-times-circle   1rem    Toast       │
+└────────────────────────────────────────────────────────┘
+```
+
+### Icon Colors
+
+```
+Default:    var(--text-secondary)    #6B7280
+Primary:    var(--primary-color)     #3B82F6
+Success:    var(--success-color)     #22C55E
+Warning:    var(--warning-color)     #F59E0B
+Danger:     var(--danger-color)      #EF4444
+Muted:      var(--text-muted)        #9CA3AF (opacity: 0.5)
+```
+
+---
+
+## 9. Error Handling & Validation
+
+### Validation Patterns
+
+```
+INLINE VALIDATION (on blur):
+┌─────────────────────────────────────┐
+│ E-Mail                              │
+│ invalid.email                       │ ← Invalid input
+└─────────────────────────────────────┘
+⚠ Ungültige E-Mail-Adresse            ← Error appears immediately
+  Duration: 0.2s fade-in
+
+SUBMIT VALIDATION:
+┌─────────────────────────────────────┐
+│ Rechnungsnummer                     │
+│                                     │ ← Empty required field
+└─────────────────────────────────────┘
+⚠ Rechnungsnummer ist erforderlich
+
+  All errors show simultaneously on submit
+  Focus moves to first invalid field
+```
+
+### Error States Visual Hierarchy
+
+```
+PRIORITY 1 - Critical Errors (Red border + icon):
+┌─────────────────────────────────────┐
+│ ⚠ Rechnungsnummer                   │ ← Red label
+│                                     │
+└─────────────────────────────────────┘
+  Border: 2px solid danger-color
+
+PRIORITY 2 - Warnings (Orange border):
+┌─────────────────────────────────────┐
+│ ⚠ Fälligkeitsdatum                  │ ← Orange label
+│ 01.01.2024                          │
+└─────────────────────────────────────┘
+⚠ Datum liegt in der Vergangenheit
+  Border: 2px solid warning-color
+
+PRIORITY 3 - Info (Blue border):
+┌─────────────────────────────────────┐
+│ ℹ Steuer-ID                         │
+│ DE123456789                         │
+└─────────────────────────────────────┘
+ℹ Optional, aber empfohlen
+  Border: 1px solid info-color
+```
+
+---
+
+## 10. Loading & Empty States
+
+### Skeleton Screens
+
+```
+LOADING FORM:
+┌─────────────────────────────────────┐
+│ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓                     │ ← Animated gradient
+│ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓                 │
+│ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓   │
+│ ▓▓▓▓▓▓▓▓▓▓                         │
+└─────────────────────────────────────┘
+  Animation: shimmer effect (1.5s loop)
+  Background: linear-gradient 200% width
+
+LOADING BUTTON:
+┌──────────────┐
+│ ⟳ Lädt...    │ ← Spinner rotates
+└──────────────┘
+  Disabled: true
+  Cursor: wait
+```
+
+### Progress Indication
+
+```
+UPLOAD PROGRESS:
+┌─────────────────────────────────────┐
+│ rechnung_2025_001.pdf    │ [×]     │
+│ 2.4 MB                              │
+│ ▓▓▓▓▓▓▓▓▓▓▓░░░░░░░░░░░ 45%        │ ← Progress bar
+└─────────────────────────────────────┘
+  Height: 6px
+  Background: success-color
+  Animation: smooth increment
+```
+
+---
+
+## 11. Accessibility Features
+
+### Focus Management
+
+```
+TAB ORDER:
+1. Rechnungsnummer     [← First field]
+2. Status
+3. Kunde
+4. Rechnungsdatum
+5. Fälligkeitsdatum
+6. Position 1 - Beschreibung
+7. Position 1 - Menge
+8. Position 1 - Preis
+9. Position 1 - MwSt
+10. Position hinzufügen Button
+...
+N-1. Abbrechen Button
+N. Speichern Button   [← Last focusable]
+
+ESC: Return to previous focusable
+```
+
+### ARIA Live Regions
+
+```html
+<!-- Screen reader announcements -->
+<div aria-live="polite" aria-atomic="true" class="sr-only">
+  <span v-if="saving">Rechnung wird gespeichert...</span>
+  <span v-if="saved">Rechnung wurde gespeichert</span>
+  <span v-if="error">Fehler: {{ errorMessage }}</span>
+</div>
+
+<!-- Status updates -->
+<div aria-live="assertive" role="alert" class="sr-only">
+  Position {{ index + 1 }} wurde entfernt
+</div>
+```
+
+### Keyboard Navigation Hints
+
+```
+┌────────────────────────────────────────────────────────┐
+│ [Ctrl+S] Speichern  •  [Ctrl+⇧+P] Position hinzufügen │
+│ [Esc] Abbrechen  •  [Tab] Nächstes Feld               │
+└────────────────────────────────────────────────────────┘
+  Display: Desktop & Tablet only
+  Hidden on mobile (<768px)
+  Can be toggled with [?] key
+```
+
+---
+
+## 12. Print Styles
+
+```css
+@media print {
+  /* Hide interactive elements */
+  .form-actions,
+  .keyboard-hints,
+  .invoice-item-actions,
+  button { display: none !important; }
+
+  /* Optimize for paper */
+  .form-section {
+    box-shadow: none;
+    page-break-inside: avoid;
+  }
+
+  /* Black & white optimization */
+  .invoice-summary {
+    background: white;
+    border: 2px solid black;
+  }
+
+  /* Add page breaks */
+  .page-break { page-break-after: always; }
+}
+```
+
+### Print Layout Preview
+
+```
+PAGE 1:
+┌─────────────────────────────────────┐
+│ myCRM                        Logo   │
+│ ─────────────────────────────────── │
+│                                     │
+│ RECHNUNG INV-2025-001               │
+│                                     │
+│ Rechnungsinformationen              │
+│ Rechnungsnr: INV-2025-001           │
+│ Datum: 12.12.2025                   │
+│ Kunde: ACME Corp                    │
+│                                     │
+│ Rechnungspositionen                 │
+│ 1. Consulting Services              │
+│    10 Stk × 100,00 € = 1.000,00 €  │
+│                                     │
+│ ─────────────────────────────────── │
+│ Nettobetrag:        1.000,00 €      │
+│ MwSt (19%):           190,00 €      │
+│ GESAMTBETRAG:       1.190,00 €      │
+│                                     │
+│ Seite 1 von 1                       │
+└─────────────────────────────────────┘
+```
+
+---
+
+**Document Version:** 1.0
+**Last Updated:** 2025-12-12
+**Author:** UX Designer Agent
+**Project:** myCRM Billing Module
diff --git a/docs/design/composables/useFormValidation.js b/docs/design/composables/useFormValidation.js
new file mode 100644
index 0000000..405d9f2
--- /dev/null
+++ b/docs/design/composables/useFormValidation.js
@@ -0,0 +1,400 @@
+/**
+ * COMPOSABLE: useFormValidation
+ *
+ * Provides reusable form validation logic with real-time validation,
+ * error tracking, and field-level validation rules.
+ *
+ * Usage:
+ * ```js
+ * import { useFormValidation } from '@/composables/useFormValidation'
+ *
+ * const validation = useFormValidation()
+ *
+ * // Validate a field
+ * validation.validateField('email', form.email, {
+ *   required: true,
+ *   pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+ * })
+ *
+ * // Check if field has error
+ * validation.hasError('email') // true/false
+ *
+ * // Get error message
+ * validation.getError('email') // "E-Mail ist erforderlich"
+ * ```
+ */
+
+import { ref, computed } from 'vue'
+
+export function useFormValidation() {
+  // State
+  const errors = ref({})
+  const touched = ref({})
+  const validating = ref({})
+
+  /**
+   * Validates a single field with given rules
+   * @param {string} fieldName - Name of the field
+   * @param {any} value - Current field value
+   * @param {object} rules - Validation rules
+   * @returns {boolean} - True if valid
+   */
+  const validateField = (fieldName, value, rules = {}) => {
+    validating.value[fieldName] = true
+    const fieldErrors = []
+
+    // Required validation
+    if (rules.required) {
+      if (value === null || value === undefined || value === '' ||
+          (Array.isArray(value) && value.length === 0)) {
+        fieldErrors.push('Dieses Feld ist erforderlich')
+      }
+    }
+
+    // If field is empty and not required, skip other validations
+    if (!value && !rules.required) {
+      errors.value[fieldName] = []
+      validating.value[fieldName] = false
+      return true
+    }
+
+    // Min length validation
+    if (rules.minLength && value && value.length < rules.minLength) {
+      fieldErrors.push(`Mindestens ${rules.minLength} Zeichen erforderlich`)
+    }
+
+    // Max length validation
+    if (rules.maxLength && value && value.length > rules.maxLength) {
+      fieldErrors.push(`Maximal ${rules.maxLength} Zeichen erlaubt`)
+    }
+
+    // Pattern validation
+    if (rules.pattern && value && !rules.pattern.test(value)) {
+      fieldErrors.push(rules.patternMessage || 'Ungültiges Format')
+    }
+
+    // Min value validation (for numbers)
+    if (rules.min !== undefined && value < rules.min) {
+      fieldErrors.push(`Wert muss mindestens ${rules.min} sein`)
+    }
+
+    // Max value validation (for numbers)
+    if (rules.max !== undefined && value > rules.max) {
+      fieldErrors.push(`Wert darf maximal ${rules.max} sein`)
+    }
+
+    // Email validation
+    if (rules.email && value) {
+      const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+      if (!emailPattern.test(value)) {
+        fieldErrors.push('Ungültige E-Mail-Adresse')
+      }
+    }
+
+    // URL validation
+    if (rules.url && value) {
+      try {
+        new URL(value)
+      } catch {
+        fieldErrors.push('Ungültige URL')
+      }
+    }
+
+    // Date validation
+    if (rules.date && value) {
+      const date = new Date(value)
+      if (isNaN(date.getTime())) {
+        fieldErrors.push('Ungültiges Datum')
+      }
+    }
+
+    // Custom validation function
+    if (rules.custom && typeof rules.custom === 'function') {
+      const customError = rules.custom(value)
+      if (customError) {
+        fieldErrors.push(customError)
+      }
+    }
+
+    // Async validation
+    if (rules.asyncValidator && typeof rules.asyncValidator === 'function') {
+      rules.asyncValidator(value).then(error => {
+        if (error) {
+          errors.value[fieldName] = [error]
+        }
+        validating.value[fieldName] = false
+      })
+    } else {
+      validating.value[fieldName] = false
+    }
+
+    // Update errors
+    errors.value[fieldName] = fieldErrors
+
+    return fieldErrors.length === 0
+  }
+
+  /**
+   * Validates multiple fields at once
+   * @param {object} formData - Object with field names and values
+   * @param {object} rulesMap - Object with field names and their rules
+   * @returns {boolean} - True if all fields are valid
+   */
+  const validateForm = (formData, rulesMap) => {
+    let isValid = true
+
+    Object.keys(rulesMap).forEach(fieldName => {
+      const value = getNestedValue(formData, fieldName)
+      const rules = rulesMap[fieldName]
+      const fieldValid = validateField(fieldName, value, rules)
+
+      if (!fieldValid) {
+        isValid = false
+        touchField(fieldName)
+      }
+    })
+
+    return isValid
+  }
+
+  /**
+   * Marks a field as touched
+   * @param {string} fieldName - Name of the field
+   */
+  const touchField = (fieldName) => {
+    touched.value[fieldName] = true
+  }
+
+  /**
+   * Marks multiple fields as touched
+   * @param {string[]} fieldNames - Array of field names
+   */
+  const touchFields = (fieldNames) => {
+    fieldNames.forEach(fieldName => {
+      touched.value[fieldName] = true
+    })
+  }
+
+  /**
+   * Marks all fields as touched
+   */
+  const touchAll = () => {
+    Object.keys(errors.value).forEach(fieldName => {
+      touched.value[fieldName] = true
+    })
+  }
+
+  /**
+   * Checks if a field has an error and has been touched
+   * @param {string} fieldName - Name of the field
+   * @returns {boolean}
+   */
+  const hasError = (fieldName) => {
+    return touched.value[fieldName] &&
+           errors.value[fieldName] &&
+           errors.value[fieldName].length > 0
+  }
+
+  /**
+   * Gets the first error message for a field
+   * @param {string} fieldName - Name of the field
+   * @returns {string|null}
+   */
+  const getError = (fieldName) => {
+    if (!hasError(fieldName)) return null
+    return errors.value[fieldName][0]
+  }
+
+  /**
+   * Gets all error messages for a field
+   * @param {string} fieldName - Name of the field
+   * @returns {string[]}
+   */
+  const getErrors = (fieldName) => {
+    if (!hasError(fieldName)) return []
+    return errors.value[fieldName]
+  }
+
+  /**
+   * Clears errors for a specific field
+   * @param {string} fieldName - Name of the field
+   */
+  const clearFieldError = (fieldName) => {
+    errors.value[fieldName] = []
+    touched.value[fieldName] = false
+  }
+
+  /**
+   * Clears all errors
+   */
+  const clearErrors = () => {
+    errors.value = {}
+    touched.value = {}
+  }
+
+  /**
+   * Resets validation state
+   */
+  const reset = () => {
+    errors.value = {}
+    touched.value = {}
+    validating.value = {}
+  }
+
+  /**
+   * Checks if the entire form is valid
+   * @returns {boolean}
+   */
+  const isValid = computed(() => {
+    return Object.keys(errors.value).every(
+      fieldName => !errors.value[fieldName] || errors.value[fieldName].length === 0
+    )
+  })
+
+  /**
+   * Checks if any field is currently being validated
+   * @returns {boolean}
+   */
+  const isValidating = computed(() => {
+    return Object.values(validating.value).some(v => v === true)
+  })
+
+  /**
+   * Gets nested value from object using dot notation
+   * @param {object} obj - Object to get value from
+   * @param {string} path - Path using dot notation (e.g., 'items.0.description')
+   * @returns {any}
+   */
+  const getNestedValue = (obj, path) => {
+    return path.split('.').reduce((acc, part) => {
+      return acc && acc[part] !== undefined ? acc[part] : undefined
+    }, obj)
+  }
+
+  /**
+   * Sets a custom error for a field
+   * @param {string} fieldName - Name of the field
+   * @param {string|string[]} error - Error message(s)
+   */
+  const setError = (fieldName, error) => {
+    errors.value[fieldName] = Array.isArray(error) ? error : [error]
+    touched.value[fieldName] = true
+  }
+
+  /**
+   * Sets multiple errors at once
+   * @param {object} errorsMap - Object with field names and error messages
+   */
+  const setErrors = (errorsMap) => {
+    Object.entries(errorsMap).forEach(([fieldName, error]) => {
+      setError(fieldName, error)
+    })
+  }
+
+  return {
+    // State
+    errors,
+    touched,
+    validating,
+
+    // Methods
+    validateField,
+    validateForm,
+    touchField,
+    touchFields,
+    touchAll,
+    hasError,
+    getError,
+    getErrors,
+    clearFieldError,
+    clearErrors,
+    reset,
+    setError,
+    setErrors,
+
+    // Computed
+    isValid,
+    isValidating
+  }
+}
+
+/**
+ * Common validation rules presets
+ */
+export const validationRules = {
+  required: {
+    required: true
+  },
+
+  email: {
+    required: true,
+    email: true
+  },
+
+  optionalEmail: {
+    email: true
+  },
+
+  phone: {
+    pattern: /^[\d\s()+\-/.]+$/,
+    patternMessage: 'Ungültige Telefonnummer'
+  },
+
+  url: {
+    url: true
+  },
+
+  invoiceNumber: {
+    required: true,
+    minLength: 3,
+    pattern: /^[A-Z0-9-]+$/i,
+    patternMessage: 'Nur Buchstaben, Zahlen und Bindestriche erlaubt'
+  },
+
+  postalCode: {
+    pattern: /^\d{5}$/,
+    patternMessage: 'Postleitzahl muss 5 Zahlen enthalten'
+  },
+
+  iban: {
+    pattern: /^[A-Z]{2}\d{2}[A-Z0-9]+$/,
+    patternMessage: 'Ungültiges IBAN-Format'
+  },
+
+  taxId: {
+    pattern: /^DE\d{9}$/,
+    patternMessage: 'Ungültige Steuernummer (Format: DE123456789)'
+  },
+
+  currency: {
+    min: 0,
+    custom: (value) => {
+      if (value && isNaN(parseFloat(value))) {
+        return 'Bitte geben Sie einen gültigen Betrag ein'
+      }
+      return null
+    }
+  },
+
+  percentage: {
+    min: 0,
+    max: 100,
+    custom: (value) => {
+      if (value && (isNaN(parseFloat(value)) || value < 0 || value > 100)) {
+        return 'Prozentsatz muss zwischen 0 und 100 liegen'
+      }
+      return null
+    }
+  },
+
+  quantity: {
+    required: true,
+    min: 0.01,
+    custom: (value) => {
+      if (value && (isNaN(parseFloat(value)) || value <= 0)) {
+        return 'Menge muss größer als 0 sein'
+      }
+      return null
+    }
+  }
+}
diff --git a/docs/design/composables/useKeyboardShortcuts.js b/docs/design/composables/useKeyboardShortcuts.js
new file mode 100644
index 0000000..6ba9d68
--- /dev/null
+++ b/docs/design/composables/useKeyboardShortcuts.js
@@ -0,0 +1,386 @@
+/**
+ * COMPOSABLE: useKeyboardShortcuts
+ *
+ * Provides keyboard shortcut functionality with support for
+ * modifier keys (Ctrl/Cmd, Shift, Alt) and custom key combinations.
+ *
+ * Usage:
+ * ```js
+ * import { useKeyboardShortcuts } from '@/composables/useKeyboardShortcuts'
+ *
+ * useKeyboardShortcuts({
+ *   'ctrl+s': saveForm,
+ *   'ctrl+shift+p': addNewItem,
+ *   'escape': closeDialog,
+ *   'alt+n': () => console.log('Alt+N pressed')
+ * })
+ * ```
+ */
+
+import { onMounted, onUnmounted, ref } from 'vue'
+
+export function useKeyboardShortcuts(shortcuts, options = {}) {
+  const {
+    enabled = true,
+    preventDefault = true,
+    target = null // null means window, or pass a ref to an element
+  } = options
+
+  const isEnabled = ref(enabled)
+  const registeredShortcuts = ref(shortcuts)
+
+  /**
+   * Normalizes a key string to lowercase and handles platform differences
+   * @param {string} key - Key string
+   * @returns {string}
+   */
+  const normalizeKey = (key) => {
+    return key.toLowerCase()
+      .replace('meta', 'ctrl') // Treat Meta (Cmd) as Ctrl for consistency
+      .replace('command', 'ctrl')
+  }
+
+  /**
+   * Builds a shortcut string from a KeyboardEvent
+   * @param {KeyboardEvent} event - Keyboard event
+   * @returns {string}
+   */
+  const buildShortcutString = (event) => {
+    const parts = []
+
+    // Add modifiers in consistent order
+    if (event.ctrlKey || event.metaKey) parts.push('ctrl')
+    if (event.shiftKey) parts.push('shift')
+    if (event.altKey) parts.push('alt')
+
+    // Add the actual key (normalized)
+    const key = event.key.toLowerCase()
+
+    // Handle special keys
+    const specialKeys = {
+      ' ': 'space',
+      'arrowup': 'up',
+      'arrowdown': 'down',
+      'arrowleft': 'left',
+      'arrowright': 'right',
+      'enter': 'enter',
+      'escape': 'escape',
+      'tab': 'tab',
+      'backspace': 'backspace',
+      'delete': 'delete',
+      'insert': 'insert',
+      'home': 'home',
+      'end': 'end',
+      'pageup': 'pageup',
+      'pagedown': 'pagedown'
+    }
+
+    const normalizedKey = specialKeys[key] || key
+    parts.push(normalizedKey)
+
+    return parts.join('+')
+  }
+
+  /**
+   * Checks if the event should be ignored (e.g., inside an input field)
+   * @param {KeyboardEvent} event - Keyboard event
+   * @returns {boolean}
+   */
+  const shouldIgnoreEvent = (event) => {
+    // Don't trigger shortcuts when typing in input fields (unless specified)
+    const target = event.target
+    const tagName = target.tagName.toLowerCase()
+
+    // Check if target is an editable element
+    if (
+      tagName === 'input' ||
+      tagName === 'textarea' ||
+      tagName === 'select' ||
+      target.isContentEditable
+    ) {
+      // Allow Escape key even in input fields
+      if (event.key === 'Escape') return false
+
+      // Allow Ctrl+S (save) even in input fields
+      if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 's') {
+        return false
+      }
+
+      return true
+    }
+
+    return false
+  }
+
+  /**
+   * Handles keyboard events
+   * @param {KeyboardEvent} event - Keyboard event
+   */
+  const handleKeydown = (event) => {
+    // Check if shortcuts are enabled
+    if (!isEnabled.value) return
+
+    // Check if we should ignore this event
+    if (shouldIgnoreEvent(event)) return
+
+    // Build the shortcut string
+    const shortcutString = buildShortcutString(event)
+
+    // Find matching shortcut
+    const matchingShortcut = Object.keys(registeredShortcuts.value).find(
+      shortcut => normalizeKey(shortcut) === shortcutString
+    )
+
+    if (matchingShortcut) {
+      const action = registeredShortcuts.value[matchingShortcut]
+
+      // Prevent default browser behavior if configured
+      if (preventDefault) {
+        event.preventDefault()
+      }
+
+      // Execute the shortcut action
+      if (typeof action === 'function') {
+        action(event)
+      }
+    }
+  }
+
+  /**
+   * Registers a new shortcut
+   * @param {string} shortcut - Shortcut string (e.g., 'ctrl+s')
+   * @param {Function} action - Action to execute
+   */
+  const registerShortcut = (shortcut, action) => {
+    registeredShortcuts.value[shortcut] = action
+  }
+
+  /**
+   * Unregisters a shortcut
+   * @param {string} shortcut - Shortcut string
+   */
+  const unregisterShortcut = (shortcut) => {
+    delete registeredShortcuts.value[shortcut]
+  }
+
+  /**
+   * Enables keyboard shortcuts
+   */
+  const enable = () => {
+    isEnabled.value = true
+  }
+
+  /**
+   * Disables keyboard shortcuts
+   */
+  const disable = () => {
+    isEnabled.value = false
+  }
+
+  /**
+   * Gets all registered shortcuts
+   * @returns {object}
+   */
+  const getShortcuts = () => {
+    return { ...registeredShortcuts.value }
+  }
+
+  // Setup and cleanup
+  onMounted(() => {
+    const element = target?.value || window
+    element.addEventListener('keydown', handleKeydown)
+  })
+
+  onUnmounted(() => {
+    const element = target?.value || window
+    element.removeEventListener('keydown', handleKeydown)
+  })
+
+  return {
+    registerShortcut,
+    unregisterShortcut,
+    enable,
+    disable,
+    getShortcuts,
+    isEnabled
+  }
+}
+
+/**
+ * Composable for displaying keyboard shortcut hints
+ */
+export function useKeyboardShortcutHints(shortcuts) {
+  /**
+   * Formats a shortcut string for display
+   * @param {string} shortcut - Shortcut string (e.g., 'ctrl+s')
+   * @returns {string[]} Array of key labels
+   */
+  const formatShortcut = (shortcut) => {
+    const parts = shortcut.toLowerCase().split('+')
+    const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0
+
+    return parts.map(part => {
+      // Platform-specific labels
+      if (part === 'ctrl') {
+        return isMac ? '⌘' : 'Ctrl'
+      }
+      if (part === 'shift') {
+        return isMac ? '⇧' : 'Shift'
+      }
+      if (part === 'alt') {
+        return isMac ? '⌥' : 'Alt'
+      }
+
+      // Special key labels
+      const specialKeys = {
+        space: 'Space',
+        enter: 'Enter',
+        escape: 'Esc',
+        tab: 'Tab',
+        backspace: 'Backspace',
+        delete: 'Del',
+        up: '↑',
+        down: '↓',
+        left: '←',
+        right: '→',
+        pageup: 'PgUp',
+        pagedown: 'PgDn'
+      }
+
+      return specialKeys[part] || part.toUpperCase()
+    })
+  }
+
+  /**
+   * Gets all shortcuts with formatted labels
+   * @returns {Array} Array of {shortcut, keys, description}
+   */
+  const getFormattedShortcuts = (descriptions = {}) => {
+    return Object.keys(shortcuts).map(shortcut => ({
+      shortcut,
+      keys: formatShortcut(shortcut),
+      description: descriptions[shortcut] || ''
+    }))
+  }
+
+  return {
+    formatShortcut,
+    getFormattedShortcuts
+  }
+}
+
+/**
+ * Common keyboard shortcuts presets
+ */
+export const commonShortcuts = {
+  // Form actions
+  save: 'ctrl+s',
+  cancel: 'escape',
+  submit: 'ctrl+enter',
+
+  // Navigation
+  nextField: 'tab',
+  prevField: 'shift+tab',
+  firstField: 'ctrl+home',
+  lastField: 'ctrl+end',
+
+  // Editing
+  undo: 'ctrl+z',
+  redo: 'ctrl+shift+z',
+  copy: 'ctrl+c',
+  cut: 'ctrl+x',
+  paste: 'ctrl+v',
+  selectAll: 'ctrl+a',
+
+  // Item management
+  addItem: 'ctrl+shift+p',
+  deleteItem: 'ctrl+d',
+  duplicateItem: 'ctrl+shift+d',
+
+  // Search
+  search: 'ctrl+f',
+  searchNext: 'ctrl+g',
+  searchPrev: 'ctrl+shift+g',
+
+  // View
+  toggleFullscreen: 'f11',
+  zoomIn: 'ctrl+plus',
+  zoomOut: 'ctrl+minus',
+  resetZoom: 'ctrl+0'
+}
+
+/**
+ * Keyboard shortcut descriptions for invoice form
+ */
+export const invoiceFormShortcuts = {
+  'ctrl+s': 'Rechnung speichern',
+  'ctrl+shift+p': 'Position hinzufügen',
+  'escape': 'Formular schließen',
+  'ctrl+shift+d': 'Als Entwurf speichern',
+  'alt+c': 'Kunde auswählen',
+  'alt+d': 'Datum ändern'
+}
+
+/**
+ * Hook for managing shortcut conflicts
+ */
+export function useShortcutConflicts() {
+  const conflicts = ref([])
+
+  /**
+   * Checks for conflicting shortcuts
+   * @param {object} shortcuts - Shortcuts object
+   * @returns {Array} Array of conflicts
+   */
+  const checkConflicts = (shortcuts) => {
+    const normalized = {}
+    const conflictsList = []
+
+    Object.keys(shortcuts).forEach(key => {
+      const normalizedKey = key.toLowerCase()
+      if (normalized[normalizedKey]) {
+        conflictsList.push({
+          shortcut: key,
+          conflictsWith: normalized[normalizedKey]
+        })
+      } else {
+        normalized[normalizedKey] = key
+      }
+    })
+
+    conflicts.value = conflictsList
+    return conflictsList
+  }
+
+  /**
+   * Checks if a shortcut conflicts with browser defaults
+   * @param {string} shortcut - Shortcut string
+   * @returns {boolean}
+   */
+  const conflictsWithBrowser = (shortcut) => {
+    const browserShortcuts = [
+      'ctrl+t', // New tab
+      'ctrl+w', // Close tab
+      'ctrl+n', // New window
+      'ctrl+r', // Reload
+      'ctrl+p', // Print
+      'ctrl+o', // Open file
+      'ctrl+l', // Address bar
+      'ctrl+k', // Search bar
+      'ctrl+d', // Bookmark
+      'ctrl+h', // History
+      'ctrl+j', // Downloads
+      'ctrl+shift+t', // Reopen closed tab
+      'ctrl+shift+n', // New incognito window
+      'ctrl+shift+delete' // Clear browsing data
+    ]
+
+    return browserShortcuts.includes(shortcut.toLowerCase())
+  }
+
+  return {
+    conflicts,
+    checkConflicts,
+    conflictsWithBrowser
+  }
+}
diff --git a/docs/design/invoice-form-improved.vue b/docs/design/invoice-form-improved.vue
new file mode 100644
index 0000000..2619da3
--- /dev/null
+++ b/docs/design/invoice-form-improved.vue
@@ -0,0 +1,974 @@
+<!--
+  REFERENZ-IMPLEMENTIERUNG: Verbessertes Invoice-Formular
+  Dieses File ist eine Design-Referenz und nicht für den direkten Einsatz gedacht.
+  Es zeigt die empfohlenen UX/UI-Verbesserungen.
+-->
+
+<template>
+  <div class="invoice-form-improved">
+    <!-- Info Banner (nur bei Neuerstellung) -->
+    <Message v-if="!invoice" severity="info" :closable="false" class="mb-4">
+      <div class="flex align-items-center gap-2">
+        <i class="pi pi-info-circle"></i>
+        <span>Rechnungsformular Phase 1 MVP - weitere Funktionen folgen</span>
+      </div>
+    </Message>
+
+    <!-- SEKTION 1: Stammdaten -->
+    <div class="form-section mb-4">
+      <div class="form-section-header">
+        <h3 class="form-section-title">Rechnungsinformationen</h3>
+        <Tag :value="getStatusLabel(form.status)"
+             :severity="getStatusSeverity(form.status)"
+             :icon="getStatusIcon(form.status)" />
+      </div>
+
+      <!-- Rechnungsnummer + Status -->
+      <div class="form-grid mb-3">
+        <FloatLabel>
+          <InputText
+            id="invoiceNumber"
+            v-model="form.invoiceNumber"
+            :invalid="validation.hasError('invoiceNumber')"
+            @blur="validation.touchField('invoiceNumber')"
+            @input="validation.validateField('invoiceNumber', form.invoiceNumber, {
+              required: true,
+              minLength: 3
+            })" />
+          <label for="invoiceNumber">
+            Rechnungsnummer
+            <abbr title="Pflichtfeld" aria-label="Pflichtfeld">*</abbr>
+          </label>
+        </FloatLabel>
+        <small v-if="validation.hasError('invoiceNumber')" class="p-error" role="alert">
+          {{ validation.getError('invoiceNumber') }}
+        </small>
+
+        <FloatLabel>
+          <Select
+            id="status"
+            v-model="form.status"
+            :options="statusOptions"
+            option-label="label"
+            option-value="value">
+            <template #value="slotProps">
+              <div class="flex align-items-center gap-2">
+                <i :class="getStatusIcon(slotProps.value)"></i>
+                <span>{{ getStatusLabel(slotProps.value) }}</span>
+              </div>
+            </template>
+          </Select>
+          <label for="status">Status</label>
+        </FloatLabel>
+      </div>
+
+      <!-- Kunde (volle Breite) -->
+      <div class="form-field-full mb-3">
+        <FloatLabel>
+          <Select
+            id="contact"
+            v-model="form.contactId"
+            :options="contacts"
+            option-label="companyName"
+            option-value="id"
+            filter
+            :filter-fields="['companyName', 'email']"
+            placeholder="Kunde suchen..."
+            :invalid="validation.hasError('contactId')"
+            :loading="loadingContacts"
+            @blur="validation.touchField('contactId')">
+            <template #value="slotProps">
+              <div v-if="slotProps.value" class="flex align-items-center gap-2">
+                <i class="pi pi-building"></i>
+                <span>{{ getContactName(slotProps.value) }}</span>
+              </div>
+              <span v-else class="text-muted">Kunde auswählen...</span>
+            </template>
+            <template #option="slotProps">
+              <div class="flex flex-column">
+                <span class="font-semibold">{{ slotProps.option.companyName }}</span>
+                <span class="text-sm text-secondary">{{ slotProps.option.email }}</span>
+              </div>
+            </template>
+          </Select>
+          <label for="contact">
+            Kunde
+            <abbr title="Pflichtfeld" aria-label="Pflichtfeld">*</abbr>
+          </label>
+        </FloatLabel>
+        <small v-if="validation.hasError('contactId')" class="p-error" role="alert">
+          {{ validation.getError('contactId') }}
+        </small>
+      </div>
+
+      <!-- Datum-Felder -->
+      <div class="form-grid">
+        <FloatLabel>
+          <DatePicker
+            id="invoiceDate"
+            v-model="form.invoiceDate"
+            date-format="dd.mm.yy"
+            :show-icon="true"
+            icon="pi pi-calendar"
+            @date-select="updateDueDate" />
+          <label for="invoiceDate">
+            Rechnungsdatum
+            <abbr title="Pflichtfeld" aria-label="Pflichtfeld">*</abbr>
+          </label>
+        </FloatLabel>
+
+        <FloatLabel>
+          <DatePicker
+            id="dueDate"
+            v-model="form.dueDate"
+            date-format="dd.mm.yy"
+            :show-icon="true"
+            icon="pi pi-calendar"
+            :min-date="form.invoiceDate" />
+          <label for="dueDate">
+            Fälligkeitsdatum
+            <abbr title="Pflichtfeld" aria-label="Pflichtfeld">*</abbr>
+          </label>
+        </FloatLabel>
+      </div>
+    </div>
+
+    <!-- SEKTION 2: Rechnungspositionen -->
+    <div class="form-section mb-4">
+      <div class="form-section-header">
+        <h3 class="form-section-title">
+          Rechnungspositionen
+          <span v-if="form.items.length > 0" class="text-secondary text-sm ml-2">
+            ({{ form.items.length }})
+          </span>
+        </h3>
+        <Button
+          label="Position hinzufügen"
+          icon="pi pi-plus"
+          size="small"
+          @click="addItem"
+          :disabled="!canAddItems" />
+      </div>
+
+      <!-- Empty State -->
+      <div v-if="form.items.length === 0" class="empty-state">
+        <i class="pi pi-inbox empty-state-icon"></i>
+        <p class="empty-state-text">Noch keine Positionen hinzugefügt</p>
+        <p class="text-sm text-muted mb-3">
+          Fügen Sie mindestens eine Position hinzu, um die Rechnung zu erstellen
+        </p>
+        <Button
+          label="Erste Position hinzufügen"
+          icon="pi pi-plus"
+          outlined
+          @click="addItem" />
+      </div>
+
+      <!-- Invoice Items List -->
+      <TransitionGroup v-else name="list" tag="div" class="invoice-items-list">
+        <div
+          v-for="(item, index) in form.items"
+          :key="item.id || `item-${index}`"
+          class="invoice-item-card">
+
+          <!-- Item Header -->
+          <div class="invoice-item-header">
+            <span class="invoice-item-number">
+              <i class="pi pi-list mr-2"></i>
+              Position {{ index + 1 }}
+            </span>
+            <Button
+              icon="pi pi-trash"
+              text
+              rounded
+              severity="danger"
+              size="small"
+              @click="removeItem(index)"
+              :aria-label="`Position ${index + 1} entfernen`"
+              v-tooltip.top="'Position entfernen'" />
+          </div>
+
+          <!-- Description -->
+          <div class="form-field-full mb-3">
+            <FloatLabel>
+              <Textarea
+                :id="`description-${index}`"
+                v-model="item.description"
+                rows="2"
+                :invalid="validation.hasError(`items.${index}.description`)"
+                @blur="validation.touchField(`items.${index}.description`)"
+                @input="calculateItemTotal(index)" />
+              <label :for="`description-${index}`">
+                Beschreibung
+                <abbr title="Pflichtfeld" aria-label="Pflichtfeld">*</abbr>
+              </label>
+            </FloatLabel>
+          </div>
+
+          <!-- Quantity, Price, Tax -->
+          <div class="invoice-item-fields">
+            <div class="invoice-item-field">
+              <FloatLabel>
+                <InputNumber
+                  :id="`quantity-${index}`"
+                  v-model="item.quantity"
+                  :min-fraction-digits="2"
+                  :max-fraction-digits="2"
+                  :min="0.01"
+                  suffix=" Stk."
+                  @input="calculateItemTotal(index)" />
+                <label :for="`quantity-${index}`">Menge</label>
+              </FloatLabel>
+            </div>
+
+            <div class="invoice-item-field">
+              <FloatLabel>
+                <InputNumber
+                  :id="`unitPrice-${index}`"
+                  v-model="item.unitPrice"
+                  mode="currency"
+                  currency="EUR"
+                  locale="de-DE"
+                  @input="calculateItemTotal(index)" />
+                <label :for="`unitPrice-${index}`">Einzelpreis</label>
+              </FloatLabel>
+            </div>
+
+            <div class="invoice-item-field invoice-item-field--small">
+              <FloatLabel>
+                <Select
+                  :id="`taxRate-${index}`"
+                  v-model="item.taxRate"
+                  :options="taxRates"
+                  @change="calculateItemTotal(index)">
+                  <template #value="slotProps">
+                    {{ slotProps.value }}%
+                  </template>
+                  <template #option="slotProps">
+                    {{ slotProps.option }}% MwSt.
+                  </template>
+                </Select>
+                <label :for="`taxRate-${index}`">MwSt.</label>
+              </FloatLabel>
+            </div>
+          </div>
+
+          <!-- Item Subtotal -->
+          <div class="invoice-item-subtotal">
+            <span class="text-secondary">Zwischensumme:</span>
+            <span class="font-semibold text-lg">
+              {{ formatCurrency(item.subtotal || 0) }}
+            </span>
+          </div>
+        </div>
+      </TransitionGroup>
+
+      <!-- Add Another Button -->
+      <Button
+        v-if="form.items.length > 0"
+        label="Weitere Position hinzufügen"
+        icon="pi pi-plus"
+        outlined
+        class="w-full mt-3"
+        @click="addItem" />
+
+      <!-- Summary Box -->
+      <div v-if="form.items.length > 0" class="invoice-summary">
+        <div class="invoice-summary-header">
+          <h4>Zusammenfassung</h4>
+        </div>
+
+        <div class="invoice-summary-body">
+          <div class="invoice-summary-row">
+            <span>Nettobetrag:</span>
+            <span>{{ formatCurrency(totals.net) }}</span>
+          </div>
+
+          <div
+            v-for="(amount, rate) in totals.taxBreakdown"
+            :key="rate"
+            class="invoice-summary-row">
+            <span>MwSt. ({{ rate }}%):</span>
+            <span>{{ formatCurrency(amount) }}</span>
+          </div>
+
+          <Divider class="my-3" />
+
+          <div class="invoice-summary-total">
+            <span>Gesamtbetrag:</span>
+            <span>{{ formatCurrency(totals.gross) }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- SEKTION 3: Zusätzliche Informationen -->
+    <div class="form-section mb-4">
+      <Panel
+        header="Zusätzliche Informationen"
+        toggleable
+        :collapsed="!form.notes">
+        <template #icons>
+          <i class="pi pi-info-circle text-muted"></i>
+        </template>
+
+        <FloatLabel>
+          <Textarea
+            id="notes"
+            v-model="form.notes"
+            rows="4"
+            placeholder="z.B. Zahlungsbedingungen, Lieferbedingungen, Rabatte..." />
+          <label for="notes">Notizen</label>
+        </FloatLabel>
+        <small class="text-muted">
+          Diese Informationen werden nur intern gespeichert und nicht auf der Rechnung angezeigt
+        </small>
+      </Panel>
+    </div>
+
+    <!-- Action Buttons -->
+    <div class="form-actions">
+      <div class="form-actions-secondary">
+        <Button
+          label="Abbrechen"
+          icon="pi pi-times"
+          severity="secondary"
+          text
+          @click="cancel"
+          :disabled="saving" />
+
+        <Button
+          v-if="!invoice"
+          label="Als Entwurf speichern"
+          icon="pi pi-save"
+          outlined
+          severity="secondary"
+          @click="saveAsDraft"
+          :loading="savingDraft"
+          :disabled="saving" />
+      </div>
+
+      <Button
+        :label="invoice ? 'Aktualisieren' : 'Rechnung erstellen'"
+        icon="pi pi-check"
+        @click="save"
+        :loading="saving"
+        :disabled="!isFormValid || saving" />
+    </div>
+
+    <!-- Keyboard Shortcuts Hint -->
+    <div class="keyboard-hints" v-if="showKeyboardHints">
+      <small class="text-muted">
+        <kbd>Ctrl+S</kbd> Speichern •
+        <kbd>Ctrl+Shift+P</kbd> Position hinzufügen •
+        <kbd>Esc</kbd> Abbrechen
+      </small>
+    </div>
+
+    <!-- Live Region for Screen Readers -->
+    <div aria-live="polite" aria-atomic="true" class="sr-only">
+      <span v-if="saving">Rechnung wird gespeichert...</span>
+      <span v-if="saved">Rechnung wurde erfolgreich gespeichert</span>
+      <span v-if="form.items.length === 0">Keine Rechnungspositionen vorhanden</span>
+      <span v-else>{{ form.items.length }} Rechnungsposition(en)</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { useToast } from 'primevue/usetoast'
+import { useFormValidation } from '@/composables/useFormValidation'
+import { useKeyboardShortcuts } from '@/composables/useKeyboardShortcuts'
+
+// PrimeVue Components
+import InputText from 'primevue/inputtext'
+import Select from 'primevue/select'
+import DatePicker from 'primevue/datepicker'
+import Textarea from 'primevue/textarea'
+import Button from 'primevue/button'
+import InputNumber from 'primevue/inputnumber'
+import FloatLabel from 'primevue/floatlabel'
+import Tag from 'primevue/tag'
+import Message from 'primevue/message'
+import Panel from 'primevue/panel'
+import Divider from 'primevue/divider'
+
+// Props & Emits
+const props = defineProps({
+  invoice: Object
+})
+
+const emit = defineEmits(['save', 'cancel'])
+
+// Composables
+const toast = useToast()
+const validation = useFormValidation()
+
+// State
+const form = ref({
+  invoiceNumber: '',
+  status: 'draft',
+  contactId: null,
+  invoiceDate: new Date(),
+  dueDate: new Date(Date.now() + 14 * 24 * 60 * 60 * 1000), // +14 Tage
+  notes: '',
+  items: []
+})
+
+const contacts = ref([])
+const loadingContacts = ref(false)
+const saving = ref(false)
+const savingDraft = ref(false)
+const saved = ref(false)
+const showKeyboardHints = ref(true)
+
+// Constants
+const statusOptions = [
+  { label: 'Entwurf', value: 'draft' },
+  { label: 'Offen', value: 'open' },
+  { label: 'Bezahlt', value: 'paid' },
+  { label: 'Teilweise bezahlt', value: 'partial' },
+  { label: 'Überfällig', value: 'overdue' },
+  { label: 'Storniert', value: 'cancelled' }
+]
+
+const taxRates = ['0.00', '7.00', '19.00']
+
+// Computed
+const totals = computed(() => {
+  const result = {
+    net: 0,
+    taxBreakdown: {},
+    gross: 0
+  }
+
+  form.value.items.forEach(item => {
+    const net = (item.quantity || 0) * (item.unitPrice || 0)
+    const tax = net * ((item.taxRate || 0) / 100)
+
+    result.net += net
+
+    if (!result.taxBreakdown[item.taxRate]) {
+      result.taxBreakdown[item.taxRate] = 0
+    }
+    result.taxBreakdown[item.taxRate] += tax
+
+    result.gross += net + tax
+  })
+
+  return result
+})
+
+const isFormValid = computed(() => {
+  return form.value.invoiceNumber &&
+         form.value.contactId &&
+         form.value.items.length > 0 &&
+         form.value.items.every(item =>
+           item.description &&
+           item.quantity > 0 &&
+           item.unitPrice >= 0
+         )
+})
+
+const canAddItems = computed(() => {
+  return form.value.contactId !== null
+})
+
+// Methods
+const loadContacts = async () => {
+  loadingContacts.value = true
+  try {
+    const response = await fetch('/api/contacts?itemsPerPage=1000', {
+      credentials: 'include',
+      headers: { 'Accept': 'application/ld+json' }
+    })
+
+    if (!response.ok) throw new Error('Fehler beim Laden der Kontakte')
+
+    const data = await response.json()
+    contacts.value = data['hydra:member'] || data.member || []
+  } catch (error) {
+    console.error('Error loading contacts:', error)
+    toast.add({
+      severity: 'error',
+      summary: 'Fehler',
+      detail: 'Kontakte konnten nicht geladen werden',
+      life: 3000
+    })
+  } finally {
+    loadingContacts.value = false
+  }
+}
+
+const addItem = () => {
+  form.value.items.push({
+    id: `new-${Date.now()}`,
+    description: '',
+    quantity: 1.00,
+    unitPrice: 0.00,
+    taxRate: '19.00',
+    subtotal: 0
+  })
+
+  // Focus first input of new item
+  setTimeout(() => {
+    const index = form.value.items.length - 1
+    document.getElementById(`description-${index}`)?.focus()
+  }, 100)
+}
+
+const removeItem = (index) => {
+  form.value.items.splice(index, 1)
+  toast.add({
+    severity: 'info',
+    summary: 'Position entfernt',
+    life: 2000
+  })
+}
+
+const calculateItemTotal = (index) => {
+  const item = form.value.items[index]
+  const net = (item.quantity || 0) * (item.unitPrice || 0)
+  const tax = net * ((item.taxRate || 0) / 100)
+  item.subtotal = net + tax
+}
+
+const updateDueDate = () => {
+  // Auto-set due date to 14 days after invoice date
+  if (form.value.invoiceDate) {
+    form.value.dueDate = new Date(
+      form.value.invoiceDate.getTime() + 14 * 24 * 60 * 60 * 1000
+    )
+  }
+}
+
+const getContactName = (contactId) => {
+  const contact = contacts.value.find(c => c.id === contactId)
+  return contact?.companyName || ''
+}
+
+const getStatusLabel = (status) => {
+  const option = statusOptions.find(o => o.value === status)
+  return option?.label || status
+}
+
+const getStatusSeverity = (status) => {
+  const severities = {
+    draft: 'secondary',
+    open: 'info',
+    paid: 'success',
+    partial: 'warning',
+    overdue: 'danger',
+    cancelled: 'secondary'
+  }
+  return severities[status] || 'info'
+}
+
+const getStatusIcon = (status) => {
+  const icons = {
+    draft: 'pi pi-file-edit',
+    open: 'pi pi-clock',
+    paid: 'pi pi-check-circle',
+    partial: 'pi pi-exclamation-triangle',
+    overdue: 'pi pi-times-circle',
+    cancelled: 'pi pi-ban'
+  }
+  return icons[status] || 'pi pi-circle'
+}
+
+const formatCurrency = (amount) => {
+  if (!amount && amount !== 0) return '0,00 €'
+  return new Intl.NumberFormat('de-DE', {
+    style: 'currency',
+    currency: 'EUR'
+  }).format(parseFloat(amount))
+}
+
+const save = async () => {
+  if (!isFormValid.value) {
+    toast.add({
+      severity: 'warn',
+      summary: 'Validierung fehlgeschlagen',
+      detail: 'Bitte füllen Sie alle Pflichtfelder aus',
+      life: 3000
+    })
+    return
+  }
+
+  saving.value = true
+
+  try {
+    const method = props.invoice ? 'PUT' : 'POST'
+    const url = props.invoice ? `/api/invoices/${props.invoice.id}` : '/api/invoices'
+
+    const items = form.value.items.map(item => ({
+      description: item.description,
+      quantity: String(item.quantity),
+      unitPrice: String(item.unitPrice),
+      taxRate: String(item.taxRate)
+    }))
+
+    const payload = {
+      invoiceNumber: form.value.invoiceNumber,
+      contact: `/api/contacts/${form.value.contactId}`,
+      status: form.value.status,
+      invoiceDate: form.value.invoiceDate.toISOString().split('T')[0],
+      dueDate: form.value.dueDate.toISOString().split('T')[0],
+      notes: form.value.notes,
+      items: items
+    }
+
+    const response = await fetch(url, {
+      method,
+      headers: {
+        'Content-Type': 'application/ld+json',
+        'Accept': 'application/ld+json'
+      },
+      credentials: 'include',
+      body: JSON.stringify(payload)
+    })
+
+    if (!response.ok) {
+      const error = await response.json()
+      throw new Error(error['hydra:description'] || error.message || 'Fehler beim Speichern')
+    }
+
+    saved.value = true
+    toast.add({
+      severity: 'success',
+      summary: 'Erfolg',
+      detail: `Rechnung wurde ${props.invoice ? 'aktualisiert' : 'erstellt'}`,
+      life: 3000
+    })
+
+    emit('save', form.value)
+  } catch (error) {
+    console.error('Error saving invoice:', error)
+    toast.add({
+      severity: 'error',
+      summary: 'Fehler',
+      detail: error.message || 'Rechnung konnte nicht gespeichert werden',
+      life: 5000
+    })
+  } finally {
+    saving.value = false
+  }
+}
+
+const saveAsDraft = async () => {
+  form.value.status = 'draft'
+  savingDraft.value = true
+  await save()
+  savingDraft.value = false
+}
+
+const cancel = () => {
+  emit('cancel')
+}
+
+// Keyboard Shortcuts
+useKeyboardShortcuts({
+  'ctrl+s': save,
+  'ctrl+shift+p': addItem,
+  'escape': cancel
+})
+
+// Lifecycle
+onMounted(async () => {
+  await loadContacts()
+
+  // Load existing invoice data
+  if (props.invoice) {
+    form.value = { ...props.invoice }
+
+    // Extract contact ID from IRI
+    if (props.invoice.contact) {
+      if (typeof props.invoice.contact === 'string') {
+        const matches = props.invoice.contact.match(/\/api\/contacts\/(\d+)/)
+        form.value.contactId = matches ? parseInt(matches[1]) : null
+      } else if (props.invoice.contact.id) {
+        form.value.contactId = props.invoice.contact.id
+      }
+    }
+
+    if (props.invoice.invoiceDate) {
+      form.value.invoiceDate = new Date(props.invoice.invoiceDate)
+    }
+    if (props.invoice.dueDate) {
+      form.value.dueDate = new Date(props.invoice.dueDate)
+    }
+  }
+})
+</script>
+
+<style scoped>
+/* Layout */
+.invoice-form-improved {
+  padding: 1.5rem;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+/* Form Sections */
+.form-section {
+  background: var(--surface-0);
+  border: 1px solid var(--surface-200);
+  border-radius: 0.75rem;
+  padding: 1.5rem;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.form-section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1.5rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid var(--surface-200);
+}
+
+.form-section-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0;
+}
+
+/* Form Grid */
+.form-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+  align-items: start;
+}
+
+.form-field-full {
+  grid-column: 1 / -1;
+}
+
+/* Empty State */
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 3rem 1rem;
+  text-align: center;
+}
+
+.empty-state-icon {
+  font-size: 3rem;
+  color: var(--text-muted);
+  margin-bottom: 1rem;
+}
+
+.empty-state-text {
+  font-size: 1rem;
+  color: var(--text-secondary);
+  margin-bottom: 0.5rem;
+}
+
+/* Invoice Items */
+.invoice-items-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.invoice-item-card {
+  background: var(--surface-50);
+  border: 1px solid var(--surface-200);
+  border-radius: 0.5rem;
+  padding: 1rem;
+  transition: all 0.2s ease;
+}
+
+.invoice-item-card:hover {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  border-color: var(--primary-color);
+}
+
+.invoice-item-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+
+.invoice-item-number {
+  font-weight: 600;
+  color: var(--text-secondary);
+  display: flex;
+  align-items: center;
+}
+
+.invoice-item-fields {
+  display: grid;
+  grid-template-columns: 1fr 1fr auto;
+  gap: 1rem;
+  align-items: start;
+}
+
+.invoice-item-field--small {
+  max-width: 120px;
+}
+
+.invoice-item-subtotal {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 1rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--surface-200);
+}
+
+/* Invoice Summary */
+.invoice-summary {
+  background: linear-gradient(135deg, var(--primary-50) 0%, var(--primary-100) 100%);
+  border: 2px solid var(--primary-color);
+  border-radius: 0.75rem;
+  padding: 1.5rem;
+  margin-top: 1.5rem;
+}
+
+.invoice-summary-header h4 {
+  margin: 0 0 1rem 0;
+  color: var(--text-primary);
+}
+
+.invoice-summary-row {
+  display: flex;
+  justify-content: space-between;
+  padding: 0.5rem 0;
+  font-size: 0.875rem;
+  color: var(--text-secondary);
+}
+
+.invoice-summary-total {
+  display: flex;
+  justify-content: space-between;
+  padding: 1rem 0 0;
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: var(--text-primary);
+}
+
+/* Form Actions */
+.form-actions {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+  padding: 1.5rem 0;
+  border-top: 1px solid var(--surface-200);
+}
+
+.form-actions-secondary {
+  display: flex;
+  gap: 0.5rem;
+}
+
+/* Keyboard Hints */
+.keyboard-hints {
+  text-align: center;
+  padding: 1rem;
+  border-top: 1px solid var(--surface-200);
+  margin-top: 1rem;
+}
+
+kbd {
+  background: var(--surface-100);
+  border: 1px solid var(--surface-300);
+  border-radius: 0.25rem;
+  padding: 0.125rem 0.375rem;
+  font-size: 0.75rem;
+  font-family: monospace;
+}
+
+/* Transitions */
+.list-enter-active,
+.list-leave-active {
+  transition: all 0.3s ease;
+}
+
+.list-enter-from {
+  opacity: 0;
+  transform: translateY(-20px);
+}
+
+.list-leave-to {
+  opacity: 0;
+  transform: translateX(20px);
+}
+
+.list-move {
+  transition: transform 0.3s ease;
+}
+
+/* Accessibility */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+/* Responsive */
+@media (max-width: 992px) {
+  .form-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .invoice-item-fields {
+    grid-template-columns: 1fr;
+  }
+
+  .invoice-item-field--small {
+    max-width: 100%;
+  }
+}
+
+@media (max-width: 768px) {
+  .invoice-form-improved {
+    padding: 1rem;
+  }
+
+  .form-section {
+    padding: 1rem;
+  }
+
+  .form-section-title {
+    font-size: 1rem;
+  }
+
+  .form-actions {
+    flex-direction: column-reverse;
+    align-items: stretch;
+  }
+
+  .form-actions-secondary {
+    flex-direction: column;
+    width: 100%;
+  }
+}
+
+@media (max-width: 576px) {
+  .invoice-summary {
+    padding: 1rem;
+  }
+
+  .invoice-summary-total {
+    font-size: 1rem;
+  }
+
+  .keyboard-hints {
+    display: none;
+  }
+}
+</style>
diff --git a/docs/design/invoice-form-styles.css b/docs/design/invoice-form-styles.css
new file mode 100644
index 0000000..13e5e35
--- /dev/null
+++ b/docs/design/invoice-form-styles.css
@@ -0,0 +1,748 @@
+/**
+ * INVOICE FORM DESIGN SYSTEM STYLES
+ * Zusätzliche CSS-Utilities und Variablen für das verbesserte Invoice-Formular
+ *
+ * Hinweis: Diese Styles sollten in das bestehende Tailwind CSS System integriert werden
+ */
+
+/* ========================================
+   CSS Custom Properties (Design Tokens)
+   ======================================== */
+
+:root {
+  /* Spacing System */
+  --space-section-gap: 2rem;        /* 32px - Abstand zwischen Sektionen */
+  --space-section-padding: 1.5rem;  /* 24px - Innen-Padding der Sektionen */
+  --space-field-gap: 1rem;          /* 16px - Abstand zwischen Feldern */
+  --space-inline-gap: 0.75rem;      /* 12px - Abstand zwischen Inline-Feldern */
+
+  /* Component Heights */
+  --height-form-element: 2.75rem;   /* 44px - Touch-friendly height */
+  --height-button: 2.5rem;          /* 40px - Standard button height */
+  --height-button-small: 2rem;      /* 32px - Small button height */
+
+  /* Typography */
+  --font-size-dialog-title: 1.5rem;    /* 24px */
+  --font-size-section-title: 1.25rem;  /* 20px */
+  --font-size-subsection: 1rem;        /* 16px */
+  --font-size-body: 0.875rem;          /* 14px */
+  --font-size-small: 0.75rem;          /* 12px */
+  --font-size-large: 1rem;             /* 16px */
+
+  /* Font Weights */
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  /* Border Radius */
+  --radius-section: 0.75rem;    /* 12px */
+  --radius-card: 0.5rem;        /* 8px */
+  --radius-small: 0.375rem;     /* 6px */
+  --radius-button: 0.375rem;    /* 6px */
+
+  /* Shadows */
+  --shadow-section: 0 1px 3px rgba(0, 0, 0, 0.1);
+  --shadow-hover: 0 2px 8px rgba(0, 0, 0, 0.08);
+  --shadow-elevated: 0 4px 12px rgba(0, 0, 0, 0.12);
+
+  /* Transitions */
+  --transition-fast: 0.15s ease-in-out;
+  --transition-normal: 0.2s ease;
+  --transition-slow: 0.3s ease;
+
+  /* Z-Index Scale */
+  --z-base: 1;
+  --z-dropdown: 1000;
+  --z-sticky: 1020;
+  --z-fixed: 1030;
+  --z-modal-backdrop: 1040;
+  --z-modal: 1050;
+  --z-popover: 1060;
+  --z-tooltip: 1070;
+}
+
+/* Dark Mode Adjustments */
+.app-dark {
+  --shadow-section: 0 1px 3px rgba(0, 0, 0, 0.3);
+  --shadow-hover: 0 2px 8px rgba(0, 0, 0, 0.25);
+  --shadow-elevated: 0 4px 12px rgba(0, 0, 0, 0.35);
+}
+
+/* ========================================
+   Form Section Components
+   ======================================== */
+
+.form-section {
+  background: var(--surface-0);
+  border: 1px solid var(--surface-200);
+  border-radius: var(--radius-section);
+  padding: var(--space-section-padding);
+  box-shadow: var(--shadow-section);
+  transition: box-shadow var(--transition-normal);
+}
+
+.form-section:hover {
+  box-shadow: var(--shadow-hover);
+}
+
+.form-section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1.5rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid var(--surface-200);
+}
+
+.form-section-title {
+  font-size: var(--font-size-section-title);
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-primary);
+  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.form-section-body {
+  /* Container for form fields */
+}
+
+/* ========================================
+   Form Layout Utilities
+   ======================================== */
+
+.form-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--space-field-gap);
+  align-items: start;
+}
+
+.form-grid--3-col {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.form-grid--4-col {
+  grid-template-columns: repeat(4, 1fr);
+}
+
+.form-field-full {
+  grid-column: 1 / -1;
+}
+
+.form-field-span-2 {
+  grid-column: span 2;
+}
+
+/* Responsive Grid */
+@media (max-width: 992px) {
+  .form-grid,
+  .form-grid--3-col,
+  .form-grid--4-col {
+    grid-template-columns: 1fr;
+  }
+
+  .form-field-span-2 {
+    grid-column: span 1;
+  }
+}
+
+/* ========================================
+   Invoice Item Components
+   ======================================== */
+
+.invoice-items-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.invoice-item-card {
+  background: var(--surface-50);
+  border: 1px solid var(--surface-200);
+  border-radius: var(--radius-card);
+  padding: 1rem;
+  transition: all var(--transition-normal);
+}
+
+.invoice-item-card:hover {
+  box-shadow: var(--shadow-hover);
+  border-color: var(--primary-color);
+}
+
+.invoice-item-card--new {
+  animation: slideIn var(--transition-slow) ease-out;
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.invoice-item-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+
+.invoice-item-number {
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-secondary);
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.invoice-item-fields {
+  display: grid;
+  grid-template-columns: 1fr 1fr auto;
+  gap: 1rem;
+  align-items: start;
+}
+
+.invoice-item-field--small {
+  max-width: 120px;
+}
+
+@media (max-width: 768px) {
+  .invoice-item-fields {
+    grid-template-columns: 1fr;
+  }
+
+  .invoice-item-field--small {
+    max-width: 100%;
+  }
+}
+
+.invoice-item-subtotal {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 1rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--surface-200);
+}
+
+/* ========================================
+   Invoice Summary Component
+   ======================================== */
+
+.invoice-summary {
+  background: linear-gradient(135deg, var(--primary-50) 0%, var(--primary-100) 100%);
+  border: 2px solid var(--primary-color);
+  border-radius: var(--radius-section);
+  padding: 1.5rem;
+  margin-top: 1.5rem;
+}
+
+.app-dark .invoice-summary {
+  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0.25) 100%);
+}
+
+.invoice-summary-header {
+  margin-bottom: 1rem;
+}
+
+.invoice-summary-header h4 {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-primary);
+}
+
+.invoice-summary-body {
+  /* Container for summary rows */
+}
+
+.invoice-summary-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.5rem 0;
+  font-size: var(--font-size-body);
+  color: var(--text-secondary);
+}
+
+.invoice-summary-total {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 0 0;
+  margin-top: 0.75rem;
+  border-top: 2px solid var(--surface-200);
+  font-size: 1.25rem;
+  font-weight: var(--font-weight-bold);
+  color: var(--text-primary);
+}
+
+/* ========================================
+   Empty State Component
+   ======================================== */
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 3rem 1rem;
+  text-align: center;
+}
+
+.empty-state-icon {
+  font-size: 3rem;
+  color: var(--text-muted);
+  margin-bottom: 1rem;
+  opacity: 0.5;
+}
+
+.empty-state-text {
+  font-size: 1rem;
+  color: var(--text-secondary);
+  margin-bottom: 0.5rem;
+  font-weight: var(--font-weight-medium);
+}
+
+.empty-state-description {
+  font-size: var(--font-size-small);
+  color: var(--text-muted);
+  margin-bottom: 1.5rem;
+}
+
+/* ========================================
+   Form Actions
+   ======================================== */
+
+.form-actions {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+  padding: 1.5rem 0;
+  border-top: 1px solid var(--surface-200);
+  margin-top: 1.5rem;
+}
+
+.form-actions-secondary {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+@media (max-width: 768px) {
+  .form-actions {
+    flex-direction: column-reverse;
+    align-items: stretch;
+  }
+
+  .form-actions-secondary {
+    flex-direction: column;
+    width: 100%;
+  }
+}
+
+/* ========================================
+   Context Card (Payment Form)
+   ======================================== */
+
+.context-card {
+  background: linear-gradient(135deg, var(--primary-50) 0%, var(--primary-100) 100%);
+  border: 1px solid var(--primary-200);
+  border-radius: var(--radius-section);
+  padding: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
+.app-dark .context-card {
+  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(59, 130, 246, 0.2) 100%);
+  border-color: rgba(59, 130, 246, 0.3);
+}
+
+.context-card-header {
+  margin-bottom: 1rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid var(--primary-200);
+}
+
+.context-card-header h4 {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: var(--font-weight-semibold);
+}
+
+.context-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.5rem 0;
+}
+
+.context-row--highlight {
+  padding: 1rem 0 0;
+  margin-top: 0.5rem;
+  border-top: 1px solid var(--primary-300);
+}
+
+.context-label {
+  color: var(--text-secondary);
+  font-size: var(--font-size-body);
+}
+
+.context-value {
+  text-align: right;
+  font-weight: var(--font-weight-medium);
+}
+
+/* ========================================
+   Upload Area (PDF Upload)
+   ======================================== */
+
+.upload-area {
+  border: 2px dashed var(--surface-200);
+  border-radius: var(--radius-section);
+  padding: 3rem 2rem;
+  text-align: center;
+  transition: all var(--transition-normal);
+  cursor: pointer;
+  background: var(--surface-0);
+}
+
+.upload-area:hover {
+  border-color: var(--primary-color);
+  background: var(--primary-50);
+}
+
+.upload-area--dragover {
+  border-color: var(--primary-color);
+  background: var(--primary-100);
+  border-width: 3px;
+  transform: scale(1.02);
+}
+
+.upload-placeholder {
+  /* Container for upload placeholder content */
+}
+
+.upload-icon {
+  font-size: 4rem;
+  color: var(--primary-color);
+  margin-bottom: 1rem;
+  opacity: 0.8;
+}
+
+.upload-hint {
+  font-size: var(--font-size-small);
+  color: var(--text-muted);
+  margin-top: 1rem;
+}
+
+.upload-preview {
+  /* Container for file preview */
+}
+
+.file-info {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 1rem;
+  background: var(--surface-50);
+  border: 1px solid var(--surface-200);
+  border-radius: var(--radius-card);
+}
+
+.file-icon {
+  font-size: 2.5rem;
+  color: var(--danger-color);
+  flex-shrink: 0;
+}
+
+.file-details {
+  flex: 1;
+  text-align: left;
+  min-width: 0; /* Allow text truncation */
+}
+
+.file-name {
+  font-weight: var(--font-weight-semibold);
+  margin-bottom: 0.25rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.file-size {
+  font-size: var(--font-size-body);
+  color: var(--text-secondary);
+}
+
+/* ========================================
+   Keyboard Hints
+   ======================================== */
+
+.keyboard-hints {
+  text-align: center;
+  padding: 1rem;
+  border-top: 1px solid var(--surface-200);
+  margin-top: 1rem;
+}
+
+kbd {
+  background: var(--surface-100);
+  border: 1px solid var(--surface-300);
+  border-radius: 0.25rem;
+  padding: 0.125rem 0.375rem;
+  font-size: var(--font-size-small);
+  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+@media (max-width: 768px) {
+  .keyboard-hints {
+    display: none;
+  }
+}
+
+/* ========================================
+   Validation & Error States
+   ======================================== */
+
+.p-error {
+  color: var(--danger-color);
+  font-size: var(--font-size-small);
+  margin-top: 0.25rem;
+  display: block;
+  animation: fadeIn 0.2s ease;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Required field indicator */
+abbr[title] {
+  text-decoration: none;
+  color: var(--danger-color);
+  font-weight: var(--font-weight-bold);
+  margin-left: 0.125rem;
+}
+
+/* ========================================
+   List Transitions
+   ======================================== */
+
+.list-enter-active,
+.list-leave-active {
+  transition: all 0.3s ease;
+}
+
+.list-enter-from {
+  opacity: 0;
+  transform: translateY(-20px);
+}
+
+.list-leave-to {
+  opacity: 0;
+  transform: translateX(20px);
+}
+
+.list-move {
+  transition: transform 0.3s ease;
+}
+
+/* ========================================
+   Accessibility Utilities
+   ======================================== */
+
+/* Screen reader only content */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+/* Focus visible styles */
+*:focus-visible {
+  outline: 2px solid var(--primary-color);
+  outline-offset: 2px;
+  border-radius: var(--radius-small);
+}
+
+/* Skip to main content link */
+.skip-link {
+  position: absolute;
+  top: -40px;
+  left: 0;
+  background: var(--primary-color);
+  color: white;
+  padding: 8px 16px;
+  text-decoration: none;
+  z-index: var(--z-tooltip);
+  border-radius: 0 0 var(--radius-small) 0;
+  font-weight: var(--font-weight-medium);
+}
+
+.skip-link:focus {
+  top: 0;
+}
+
+/* ========================================
+   Loading States
+   ======================================== */
+
+.skeleton-loader {
+  background: linear-gradient(
+    90deg,
+    var(--surface-200) 25%,
+    var(--surface-100) 50%,
+    var(--surface-200) 75%
+  );
+  background-size: 200% 100%;
+  animation: loading 1.5s ease-in-out infinite;
+  border-radius: var(--radius-small);
+}
+
+@keyframes loading {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+/* ========================================
+   Utility Classes
+   ======================================== */
+
+/* Text utilities */
+.text-muted {
+  color: var(--text-muted);
+}
+
+.text-secondary {
+  color: var(--text-secondary);
+}
+
+.text-primary-color {
+  color: var(--primary-color);
+}
+
+/* Spacing utilities */
+.gap-section {
+  gap: var(--space-section-gap);
+}
+
+.gap-field {
+  gap: var(--space-field-gap);
+}
+
+.gap-inline {
+  gap: var(--space-inline-gap);
+}
+
+/* Flex utilities */
+.flex-between {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.flex-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+/* ========================================
+   Print Styles
+   ======================================== */
+
+@media print {
+  .form-actions,
+  .keyboard-hints,
+  .invoice-item-actions,
+  .form-section-header button {
+    display: none !important;
+  }
+
+  .form-section {
+    box-shadow: none;
+    border: 1px solid #ddd;
+    page-break-inside: avoid;
+  }
+
+  .invoice-summary {
+    border: 2px solid #333;
+    page-break-inside: avoid;
+  }
+}
+
+/* ========================================
+   Dark Mode Specific Adjustments
+   ======================================== */
+
+.app-dark .invoice-item-card {
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.app-dark .form-section {
+  border-color: rgba(255, 255, 255, 0.1);
+}
+
+.app-dark kbd {
+  background: rgba(255, 255, 255, 0.1);
+  border-color: rgba(255, 255, 255, 0.2);
+}
+
+/* ========================================
+   High Contrast Mode Support
+   ======================================== */
+
+@media (prefers-contrast: high) {
+  .form-section {
+    border-width: 2px;
+  }
+
+  .invoice-item-card {
+    border-width: 2px;
+  }
+
+  *:focus-visible {
+    outline-width: 3px;
+  }
+}
+
+/* ========================================
+   Reduced Motion Support
+   ======================================== */
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
diff --git a/src/Entity/Contact.php b/src/Entity/Contact.php
index f47500d..d340fe8 100644
--- a/src/Entity/Contact.php
+++ b/src/Entity/Contact.php
@@ -59,11 +59,11 @@ class Contact implements ModuleAwareInterface
     #[ORM\Id]
     #[ORM\GeneratedValue]
     #[ORM\Column]
-    #[Groups(['contact:read', 'project:read'])]
+    #[Groups(['contact:read', 'project:read', 'invoice:read'])]
     private ?int $id = null;
 
     #[ORM\Column(length: 255)]
-    #[Groups(['contact:read', 'contact:write', 'project:read'])]
+    #[Groups(['contact:read', 'contact:write', 'project:read', 'invoice:read'])]
     #[Assert\NotBlank(message: 'Der Firmenname darf nicht leer sein')]
     #[Assert\Length(max: 255)]
     private ?string $companyName = null;