add ui_design.md with final design system documentation

docs/ui_design.md

@@ -0,0 +1,206 @@
+# HMS Licht & Ton – UI Design Dokumentation
+
+## 1. Projekt-Überblick
+
+**Projekt:** Neue Homepage für HMS Licht & Ton GbR, Veranstaltungstechnik aus Leipheim/Ellzee
+**Domain:** hms.media-on.de (nicht öffentlich indexiert)
+**Technologie:** Nuxt 3 (Vue 3 + Tailwind CSS, SSR/SSG) + FastAPI Backend + Coolify Deployment
+
+## 2. Design-Philosophie
+
+Das Design folgt einer **dunklen, professionellen Ästhetik** orientiert an den Agent Zero WebUI Grautönen. Orange (#EC6925) aus dem HMS-Logo wird **dezent als Akzentfarbe** eingesetzt – ausschließlich für Buttons, Badges, kleine Text-Highlights und den Logo-Rahmen. Keine großen Orange-Flächen.
+
+**Tonalität:** Professionell, erfahren, zuverlässig, technisch kompetent – nicht werblich oder übertrieben.
+
+## 3. Design Tokens
+
+### 3.1 Farbpalette
+
+#### Agent Zero Dark Theme (Hauptfarben)
+| Token | Hex | Verwendung |
+|-------|-----|-----------|
+| `--bg` | `#131313` | Seiten-Hintergrund |
+| `--panel` | `#1a1a1a` | Panels, Cards, Header |
+| `--surface` | `#212121` | Input-Felder, Surface-Level |
+| `--row` | `#272727` | List-Items, Zwischenebenen |
+| `--card` | `#2d2d2d` | Card-Hintergrund |
+| `--border` | `#444444a8` | Borders (mit Alpha) |
+| `--secondary` | `#656565` | Sekundärfarbe, Icons |
+| `--primary` | `#737a81` | Primärfarbe (leicht bläuliches Grau) |
+| `--text` | `#ffffff` | Haupttext |
+| `--text-muted` | `#d4d4d4` | Gedimmter Text |
+
+#### Orange Akzent (Dezent)
+| Token | Wert | Verwendung |
+|-------|------|-----------|
+| `--color-accent` | `#EC6925` | Buttons, Badges, Text-Akzente, Logo-Rahmen |
+| `--color-accent-hover` | `#d4581a` | Button Hover |
+| `--color-accent-light` | `rgba(236, 105, 37, 0.08)` | Badge-Hintergrund, Nav-Active |
+| `--color-accent-border` | `rgba(236, 105, 37, 0.25)` | Card Hover Border |
+| `--color-accent-dark` | `#b8461a` | Dunkle Variante |
+
+#### Status-Farben (Dark Theme adaptiert)
+| Token | Hex | Verwendung |
+|-------|-----|-----------|
+| `--color-success` | `#4ade80` | Erfolg-Meldungen |
+| `--color-success-bg` | `rgba(74, 222, 128, 0.08)` | Erfolg-Hintergrund |
+| `--color-error` | `#f87171` | Fehler-Meldungen, Pflichtfelder |
+| `--color-error-bg` | `rgba(248, 113, 113, 0.08)` | Fehler-Hintergrund |
+| `--color-warning` | `#fbbf24` | Warnungen |
+| `--color-info` | `#60a5fa` | Info-Meldungen |
+
+### 3.2 Border Radius (Minimal)
+| Token | Wert |
+|-------|------|
+| `--radius-sm` | `2px` |
+| `--radius-md` | `3px` |
+| `--radius-lg` | `4px` |
+| `--radius-xl` | `4px` |
+| `--radius-full` | `9999px` (Badges, Pills) |
+
+### 3.3 Typography
+- **Font Family:** Inter (Google Fonts)
+- **Weights:** 400 (Regular), 500 (Medium), 600 (Semibold), 700 (Bold), 800 (Extrabold)
+- **Größen:** xs: 0.75rem bis 6xl: 3.75rem
+- **Line Height:** 1.6 (Body), 1.1-1.3 (Headings)
+
+### 3.4 Spacing
+| Token | Wert |
+|-------|------|
+| `--space-xs` | 0.25rem (4px) |
+| `--space-sm` | 0.5rem (8px) |
+| `--space-md` | 1rem (16px) |
+| `--space-lg` | 1.5rem (24px) |
+| `--space-xl` | 2rem (32px) |
+| `--space-2xl` | 3rem (48px) |
+| `--space-3xl` | 4rem (64px) |
+| `--space-4xl` | 6rem (96px) |
+
+### 3.5 Shadows (Dark Theme)
+| Token | Wert |
+|-------|------|
+| `--shadow-sm` | `0 1px 2px 0 rgb(0 0 0 / 0.3)` |
+| `--shadow-md` | `0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3)` |
+| `--shadow-lg` | `0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3)` |
+| `--shadow-xl` | `0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.3)` |
+
+### 3.6 Transitions
+| Token | Dauer |
+|-------|-------|
+| `--transition-fast` | 150ms ease |
+| `--transition-base` | 250ms ease |
+| `--transition-slow` | 400ms ease |
+
+## 4. Layout-System
+
+### 4.1 Header
+- Sticky, Höhe: 4rem (Desktop), 3.5rem (Mobile)
+- Logo links, Desktop-Nav mittig/rechts, Mobile Hamburger rechts
+- Background: `var(--panel)`, Border-Bottom: `var(--border)`
+
+### 4.2 Main Content
+- Max-Width: 1280px (`max-w-7xl`)
+- Padding: 1rem (Mobile), 1.5rem (sm), 2rem (lg)
+
+### 4.3 Footer
+- 4-Spalten Grid (1-Spalte auf Mobile)
+- Background: `var(--bg)`, Border-Top: `var(--border)`
+
+### 4.4 Responsive Breakpoints
+- **sm:** 640px (Tablet Portrait)
+- **md:** 768px (Tablet Landscape, Desktop Nav visible)
+- **lg:** 1024px (Desktop, 3-4 Column Grids)
+- **Mobile-First:** Alle Layouts starten mit 1-Spalte, expandieren bei Breakpoints
+
+## 5. Seiten-Struktur (Sitemap)
+
+```
+Home (#/)
+  Referenzen (#/referenzen)
+  Mietkatalog (#/mietkatalog)
+    Equipment Detail (#/mietkatalog/:id)
+      Warenkorb (#/warenkorb)
+  Kontakt (#/kontakt)
+  Admin (#/admin)
+```
+
+## 6. Komponenten-Design
+
+### 6.1 Cards
+- Background: `var(--panel)`
+- Border: `1px solid var(--border)`
+- Border-Radius: `4px` (--radius-lg)
+- Hover: Border wird heller, Shadow wird stärker
+
+### 6.2 Buttons
+- **Primary:** Orange bg, white text, 3px radius
+- **Secondary:** Surface bg, muted text, border, 3px radius
+- **Ghost:** Transparent, muted text, hover surface bg
+
+### 6.3 Inputs
+- Background: `var(--surface)`
+- Border: `1px solid var(--border-strong)` (#555555)
+- Focus: Orange border + subtle orange box-shadow
+- Error: Red border + red box-shadow
+
+### 6.4 Badges
+- Border-Radius: `9999px` (pill shape)
+- Primary: Orange bg (8% alpha), orange text, orange border (20% alpha)
+
+### 6.5 Speaker Grid
+- CSS Grid: `repeat(auto-fill, minmax(160px, 1fr))`
+- Mobile: 2 columns
+- Icons: 48x48px SVG, gray default, orange on hover
+
+## 7. UX States
+
+Alle Views implementieren Loading, Empty, Error und Success States:
+- **Loading:** Skeleton-Shimmer Animationen
+- **Empty:** Icon + Titel + Message + CTA Button
+- **Error:** Alert-Icon + Titel + Message + Retry Button
+- **Success:** Checkmark + Bestätigungstext + Weiter-Button
+
+## 8. Accessibility (WCAG 2.1 AA)
+
+- **Skip Link:** Zum Hauptinhalt springen am Seitenanfang
+- **Semantic HTML:** header, main, footer, nav, section, article
+- **ARIA:** aria-label, aria-current, aria-expanded, aria-controls, aria-invalid, aria-describedby, role=alert, role=status
+- **Focus Visible:** 2px Orange Outline mit 2px Offset
+- **Form Labels:** Jedes Input hat label for=..., Pflichtfelder markiert mit *
+- **Heading Hierarchy:** h1 > h2 > h3, keine Levels übersprungen
+- **Keyboard Navigation:** Alle interaktiven Elemente per Tab erreichbar, Enter auf Cards
+- **Color Contrast:** Text #ffffff auf #131313 = 17.9:1 (AAA), Muted #d4d4d4 auf #131313 = 12.6:1 (AAA)
+
+## 9. KI-/SEO-Features
+
+- **robots:** noindex, nofollow, noarchive, nosnippet
+- **JSON-LD:** LocalBusiness Schema mit Adresse, Öffnungszeiten, Services (Schema.org)
+- **OpenGraph:** type, title, description, locale, site_name, url
+- **Twitter Card:** summary_large_image
+- **Semantic HTML5:** Korrekte Struktur für KI-Crawler
+
+## 10. Bilder
+
+- **Hero:** Unsplash Konzert-Bild (background-image, 35% opacity, dark gradient overlay)
+- **Über uns:** Unsplash Veranstaltungstechnik-Setup Bild
+- **Referenzen:** 9 echte HMS-Fotos (von hms-licht-ton.de, lokal auf Webspace gespeichert)
+- **Equipment:** Platzhalter-Icons, Felder für echte Bilder vorbereitet (item.image)
+- **Speaker Grid:** SVG-Icons (6 Lautsprecher-Typen)
+
+## 11. Prototyp-URLs
+
+- **Aktuell:** https://webspace.media-on.de/hms-prototype/index.html?v=8
+- **Dateien:** index.html, style.css, app.js, logo.svg, img/ref1-9.jpg
+
+## 12. Design-Entscheidungen
+
+| Entscheidung | Begründung |
+|-------------|------------|
+| Dark Theme (Agent Zero Grautöne) | User-Präferenz, professionelle Wirkung |
+| Orange nur als Akzent | User-Feedback: Übergänge zu Orange sollten subtil sein |
+| Minimale Border-Radius (2-4px) | User-Feedback: abgerundete Ecken nur ganz minimal |
+| Vue 3 SPA für Prototyp | Gleiche Framework wie Produktion (Nuxt 3) |
+| Echte HMS-Fotos für Referenzen | Authentizität, keine Stock-Fotos |
+| SVG-Icons für Speaker Grid | Kompakt, skalierbar, theme-bar |
+| Inter Font | Modern, clean, gute Lesbarkeit |
+| noindex meta | Domain hms.media-on.de nicht öffentlich |