mitai-jinkendo/.claude/docs/functional/RESPONSIVE_UI.md

# Fachliche Anforderungen: Responsive UI
**Modul:** parallel zu Features (kein festes Versions-Label)  
**Status:** Fachlich freigegeben, technische Implementierung ausstehend  
**Letzte Aktualisierung:** März 2026

---

## 1. Überblick

Die App soll vollständig responsive sein und auf allen Bildschirmgrößen optimal
funktionieren – vom iPhone über iPad bis zum Desktop-Browser. Die PWA-Funktionalität
auf dem iPhone bleibt vollständig erhalten.

---

## 2. Breakpoints

| Bereich | Breite | Layout |
|---------|--------|--------|
| Mobile | < 1024px | Bottom Navigation (wie jetzt) |
| Desktop | ≥ 1024px | Sidebar Navigation links, Content rechts |

Ein separates Tablet-Layout (768px) wird **nicht** eingeführt – unterhalb
1024px verhält sich alles wie Mobile.

---

## 3. Mobile Layout (< 1024px) – unverändert

Das bestehende Mobile-Layout bleibt exakt so wie es ist:
- Bottom Navigation mit Icons + Labels
- Volle Breite, 16px seitliches Padding
- 80px Bottom-Padding für Navigation
- PWA auf iPhone funktioniert wie bisher

---

## 4. Desktop Layout (≥ 1024px)

### 4.1 Grundstruktur

```
┌─────────────────────────────────────────────┐
│  Sidebar (220px)  │  Content (flex 1)        │
│                   │                          │
│  [Logo]           │  Seiteninhalt            │
│                   │  (max-width: 1200px,     │
│  Dashboard        │   zentriert)             │
│  Erfassung        │                          │
│  Verlauf          │                          │
│  Analyse          │                          │
│  Einstellungen    │                          │
│  Admin            │                          │
│                   │                          │
│  [Avatar + Name]  │                          │
└─────────────────────────────────────────────┘
```

### 4.2 Sidebar

**Position:** Fixed links, volle Höhe (100vh)  
**Breite:** 220px  
**Farben:** `var(--surface)` Hintergrund, `var(--border)` rechte Trennlinie

**Inhalt von oben nach unten:**

```
┌──────────────────┐
│  [Ensō-Logo]     │  ← Icon (40px) + "Mitai Jinkendo" Text
│  Mitai Jinkendo  │
├──────────────────┤
│                  │
│  🏠 Dashboard    │  ← Icons + Text (gleiche Nav-Items wie Bottom Nav)
│  ✏️ Erfassung    │  ← Aktive Seite: var(--accent) Hintergrund (leicht)
│  📊 Verlauf      │     + var(--accent) Text + linke Akzent-Linie (3px)
│  🧠 Analyse      │
│  ⚙️ Einstellungen│
│  👑 Admin        │  ← nur sichtbar wenn role='admin'
│                  │
├──────────────────┤
│  [Avatar]        │  ← Nutzer-Avatar (32px) + Name + Tier-Badge
│  Lars            │
│  selfhosted      │
└──────────────────┘
```

**Aktive Seite hervorheben:**
```css
/* Aktiver Nav-Item Desktop */
background: var(--accent-light);   /* #E1F5EE leicht grüner Hintergrund */
color: var(--accent);              /* #1D9E75 grüner Text */
border-left: 3px solid var(--accent);  /* linke Akzent-Linie */
border-radius: 0 8px 8px 0;
```

### 4.3 Content-Bereich

- `margin-left: 220px` (Sidebar-Breite)
- `padding: 24px 32px`
- `max-width: 1200px` (zentriert innerhalb des verfügbaren Raums)
- Kein Bottom-Padding für Navigation (Sidebar ersetzt Bottom Nav)

---

## 5. Seiten-spezifische Desktop-Layouts

### 5.1 Dashboard

**Mobile:** Alle Karten untereinander  
**Desktop:** 2-spaltig oder 4-spaltig je nach Kartentyp

```
┌──────────────────────────────────────────────┐
│  Hallo Lars 👋              Mo, 20. März 2026 │
├──────────┬──────────┬──────────┬─────────────┤
│ Gewicht  │ KF       │ Mager-   │ Kalorien    │
│ 86,1 kg  │ 19,9%    │ masse    │ 1.447 kcal  │
├──────────┴──────────┴──────────┴─────────────┤
│  Ziele                    [Details →]         │
│  ████████░░  Gewicht: 27%  ████░░░░  KF: 45% │
├──────────────────────────────────────────────┤
│  Kalorien + Gewicht (Chart – volle Breite)   │
└──────────────────────────────────────────────┘
```

### 5.2 Verlauf

**Mobile:** Tabs oben, Chart/Tabelle darunter  
**Desktop:** Tabs links als vertikale Liste, Chart/Tabelle rechts

```
┌────────────┬─────────────────────────────────┐
│ Gewicht ←  │  Chart + Tabelle                │
│ Körperfett │  (nimmt volle rechte Breite)    │
│ Umfänge    │                                 │
│ Ernährung  │                                 │
│ Aktivität  │                                 │
└────────────┴─────────────────────────────────┘
```

### 5.3 Analyse

**Mobile:** Prompt-Liste, dann Ergebnis darunter  
**Desktop:** Prompt-Liste links (300px), Ergebnis rechts

```
┌──────────────────┬──────────────────────────┐
│  Prompts         │  Ergebnis / Verlauf       │
│  ─────────────   │                          │
│  🔍 Gesamt       │  [Letzte Analyse]        │
│  🫧 Körper  ←    │  [Text der Analyse...]   │
│  🍽️ Ernährung   │                          │
│  🏋️ Training    │  [Ältere Analysen]       │
│  ─────────────   │                          │
│  Pipeline ▶      │                          │
└──────────────────┴──────────────────────────┘
```

### 5.4 Erfassung

**Mobile:** Formular volle Breite  
**Desktop:** Formular zentriert, max-width 600px

```
┌──────────────────────────────────────────────┐
│           Gewicht erfassen                   │
│                                              │
│     ┌─────────────────────────────┐          │
│     │  Datum    [20.03.2026]      │          │
│     │  Gewicht  [86,1    ] kg     │          │
│     │  Notiz    [         ]       │          │
│     │                             │          │
│     │  [Speichern]                │          │
│     └─────────────────────────────┘          │
└──────────────────────────────────────────────┘
```

### 5.5 Admin-Panel

**Mobile:** Tabellen horizontal scrollbar  
**Desktop:** Tabellen nutzen volle Breite, mehr Spalten sichtbar

---

## 6. Übergangsverhalten

### Fenster-Resize
- Beim Verkleinern unter 1024px: Sidebar verschwindet, Bottom Nav erscheint
- Beim Vergrößern über 1024px: Bottom Nav verschwindet, Sidebar erscheint
- Kein Flackern – CSS media queries, kein JavaScript-Resize-Listener nötig

### Aktiver Zustand synchronisiert
- Aktive Seite wird in Sidebar UND Bottom Nav korrekt hervorgehoben
- (Technisch: gleiche State-Variable, unterschiedliches Rendering)

---

## 7. Was sich nicht ändert

- Farben, CSS-Variablen, Design-Tokens bleiben identisch
- Alle Funktionen bleiben auf Desktop verfügbar
- PWA auf iPhone bleibt vollständig funktionsfähig
- Keine externen CSS-Frameworks (kein Tailwind, kein Bootstrap)
- Inline-Styles + CSS-Variablen-Ansatz bleibt erhalten

---

## 8. Abgrenzung & offene Fragen

### In diesem Modul enthalten:
- Sidebar Navigation Desktop
- Content-Bereich mit max-width
- Dashboard 4-spaltig
- Verlauf 2-spaltig (Tabs + Chart)
- Analyse 2-spaltig (Prompts + Ergebnis)
- Erfassung zentriert schmal
- Admin-Panel breite Tabellen

### Nicht in diesem Modul:
- Dark Mode – separates Feature
- Animationen / Transitions – optional später
- Collapsed Sidebar (Icon-only Modus) – optional später

### Offene Fragen für technische Planung:
1. Wird AppLayout als neue Wrapper-Komponente eingeführt oder App.jsx direkt angepasst?
2. CSS Media Queries in app.css oder CSS-in-JS (Inline-Style mit window.innerWidth)?
3. Wie wird der aktive Nav-Item-State zwischen Sidebar und Bottom Nav geteilt?
4. Verlauf-Tabs: werden sie zu einer vertikalen Liste refactored oder per CSS umgestaltet?