# Grotti: Alltag und Oberfläche

Stand **18.10.2026**, v3.3.0.

## Design

- Dunkles UI mit Orange-Akzent; Light-Theme über dieselben Tokens (`html[data-theme]`).
- Schrift **Inter** (variable, lokal unter `web/static/fonts/`).
- Icons: **Lucide** als Sprite `web/static/icons.svg` (bauen mit `python scripts/build_icons.py`), IDs `i-<name>`.
- Komponenten: Toolbar, Card-Head, KPI-Karten, Chips (Zustände + Queue + Urteile), Dialog-Kopf/Fuß, Empty-States, Skeleton.
- Primär: `btn-primary` / `go-btn`; Danger: `btn-danger` / `warn`; Icon-Buttons mit `title`/`aria-label`.
- **Anzeige pro Browser**: Desktop oder Regal (Touch); Zeitzone; Nav einklappbar.
- PWA: `manifest.webmanifest` + Service-Worker (Shell-Cache inkl. Icons/Font).
- Live: SSE `/api/v1/stream` plus Poll-Fallback; Verbindungsbanner.
- Ctrl+K: globale Suche (`/api/v1/suche`); Knopf in der Topbar.
- Kamera: Snapshot (gecacht) oder MJPEG-Stream (`/api/v1/kamera/stream`), Browser-Einstellung `grotti-camera`.

## Seitenleiste und Topbar

- Sidebar: Abschnittslabels **Live** / **Rückschau** / **Verwalten** (ohne Live-Panel).
- Topbar-Live-Chips (**Jetzt** · Läufe · Senden · Meldungen) mit Popover; Farm-ETA nur bei mehreren Läufen.
- Mobile: Tab **Jetzt** (`/jetzt`) statt Aktivität in der unteren Leiste; Aktivität unter Mehr.
- Topbar: Suche, Einstellungen, Doku, Benutzer-Menü (Avatar → Abmelden, Version, Copyright).
- Mobile: Bottom-Nav Drucker · Dateien · Warteschlange · Aktivität · **Mehr** (Sheet inkl. Abmelden); Topbar ausgeblendet, Suche als Icon in der Brand-Zeile.

## Wand und Abräumen

- Karten + Cockpit; Technik-Fold mit Icons je Abschnitt.
- **Platte geräumt** öffnet Dialog: gut/Ausschuss, Grund, Stückzahlen.

## Aufträge und Wartung

- `/auftraege`: Kunden, Positionen, Einreihen, Lieferschein. Status als Chip.
- `/wartung`: Stunden/Meter und Verschleißteile.

## Dateien, Material, Statistik

- Bibliothek mit Toolbar/Suche; Senden-Schritte nummeriert.
- Material: Spulen/Sorten-Tabs, Filter-Toolbar.
- Statistik: KPI-Karten mit Icons.