hms-licht-ton/docs/ui_design.md

# 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 – noindex, nofollow)
**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)
  │    └─ Mietanfrage (#/mietanfrage)
  ├─ Kontakt (#/kontakt)
  ├─ Admin (#/admin)
  ├─ Impressum (#/impressum)
  ├─ Datenschutz (#/datenschutz)
  └─ AGB Vermietung (#/agb-vermietung)
```

**Route-Beschreibungen:**
- `#/warenkorb` – Artikel anzeigen, Mengen steuern, entfernen, CTA → /mietanfrage
- `#/mietanfrage` – Veranstaltungsdaten + Kontaktdaten + Nachricht, Submit an Rentman
- `#/impressum` – Statische rechtliche Angaben (§5 TMG)
- `#/datenschutz` – Statische Datenschutzerklärung (DSGVO)
- `#/agb-vermietung` – Statische AGB Vermietung

## 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

**Zusätzliche States pro Seite:**
- **MietanfragePage:** form, submitting, success, error, validation-error
- **AdminPage:** login, idle, syncing, sync-complete, sync-error
- **Legal Pages (Impressum/Datenschutz/AGB):** loading, content

## 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-/Meta-Features

- **robots:** noindex, nofollow, noarchive, nosnippet (KEINE Indexierung gewünscht)
- **JSON-LD:** LocalBusiness Schema mit Adresse, Öffnungszeiten, Services (Schema.org) – KI-tauglich
- **OpenGraph:** type, title, description, locale, site_name, url
- **Twitter Card:** summary_large_image
- **Semantic HTML5:** Korrekte Struktur für KI-Crawler
- **KEINE sitemap.xml** – nicht gewünscht (noindex)
- **KEINE Indexierung** – Domain hms.media-on.de nicht öffentlich indexiert

## 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 indexiert |
| Mietanfrage separat vom Warenkorb | Warenkorb = Items verwalten, Mietanfrage = Formular mit Event-/Kontaktdaten |
| Legal Pages als eigene Routes | Impressum, Datenschutz, AGB Vermietung als statische Seiten mit eigenem Routing |
| Admin Dashboard mit Sync-States | Post-Login: Sync-Trigger, Status-Anzeige, Sync-Log Viewer |
| JSON-LD trotz noindex | KI-Crawler sollen strukturierte Daten erkennen können, ohne Indexierung |