# Bewegung

Schlossbote bewegt sich wie ein gutes iPhone: sofortige Reaktion auf die Berührung, weiches Nachfedern, kein Zappeln. Die Werte stehen als CSS-Variablen in `bundle.css` und gelten für alle Komponenten.

## Kurven und Dauern

| Variable | Wert | Wofür |
|---|---|---|
| `--sb-kurve-feder` | gedämpfte Feder (Dämpfung 0,72, 4 % Überschwingen), als CSS `linear()` | Loslassen von Buttons, Karten und Dialoge, Badges, Zahlen |
| `--sb-kurve-aus` | `cubic-bezier(.22, 1, .36, 1)` | Eindrücken, Einblenden, Farbwechsel |
| `--sb-kurve-inout` | `cubic-bezier(.65, 0, .35, 1)` | Schleifen: Atmen, Schütteln, Schweben |
| `--sb-dauer-tipp` | 90ms | Button gibt beim Drücken nach |
| `--sb-dauer-kurz` | 160ms | Farbwechsel, Hover |
| `--sb-dauer-mittel` | 260ms | Ein- und Ausblenden, Scrim |
| `--sb-dauer-feder` | 520ms | Federbewegungen |
| `--sb-dauer-scan` | 1600ms | Ein Umlauf des Face-ID-Rings |

Browser ohne `linear()` bekommen automatisch eine kubische Ersatzkurve.

## Abläufe

| Moment | Bewegung |
|---|---|
| Button drücken | `scale(.96)` in 90ms, beim Loslassen Feder zurück auf 1. Primär wird dabei `petrol-800`, die feine Lichtkante oben verschwindet. |
| Neue Änderung trifft ein | Banner fällt 24px von oben ein (Feder), Glocke schwingt einmal und danach alle 6 Sekunden, Signalton. Die Karte gleitet 18px hoch und atmet dann alle 2,8 Sekunden mit `petrol-glow`. |
| Face ID wartet | 40 Striche im Kreis, ein Lichtbogen mit Schweif läuft in 1,6 Sekunden herum, das Gesicht schwebt 2px, die Scheibe atmet um 3 %. |
| Touch ID wartet | Die Rillen zeichnen sich nacheinander (110ms versetzt) und laufen wieder zurück, bis ein Finger erkannt ist. |
| Erkannt | Striche bzw. Rillen werden `moos-600`, die Figur schrumpft auf 0,7 und blendet aus, ein Häkchen zeichnet sich in 420ms, die Figur hüpft einmal auf 1,07 und eine Welle läuft nach außen. Der Dialog schließt nach 1,5 Sekunden: Scrim und Sheet blenden in 260ms aus (`closing`). |
| Nicht erkannt | Figur wird `ziegel-600` und schüttelt sich in 520ms horizontal (12, 10, 7, 5, 2px), wie bei einer falschen Code-Eingabe auf dem iPhone. |
| Bestätigt | Badge springt von 0,86 auf 1, im Kartenfuß zeichnet sich ein Häkchen vor „Bestätigt von …“, die Karte schimmert eine Sekunde lang `moos-50`. Das Atmen endet, der Petrol-Rand geht. |
| Gästezahl ändert sich | Zählwerk: die alte Zahl rollt nach oben hinaus, die neue von unten herein und wird dabei scharf (`RollingNumber`). Sinkt die Zahl, läuft es andersherum. Die Differenz springt 120ms später ein. |
| Dialog öffnet | Scrim blendet in 260ms ein, das Sheet steigt 28px auf und wächst von 0,96 auf 1 (Feder). |
| Banner geht | `Collapse` zieht den Platz in 260ms zu, das Banner hebt sich dabei 12px und blendet aus. |
| Verbindung wird hergestellt | Punkt pulsiert in Messing alle 1,2 Sekunden. Offline steht still. |
| Protokoll bekommt Eintrag | Neue Zeile blendet 6px von unten ein. |

## Regeln

- Animiere nur `transform`, `opacity`, Farben und `stroke-dashoffset`. Kein `width`, `height` oder `top`.
- Eine Schleife pro Screen. Am Terminal ist das entweder der atmende Leuchtring oder der Biometrie-Scan, nie beides sichtbar.
- Mahlzeit-Kacheln und Protokollzeilen blenden beim Laden gestaffelt ein (70ms bzw. 40ms je Element), damit der Screen aufgebaut wirkt statt aufgeploppt.
- Nichts blinkt, nichts wackelt dauerhaft. Die Glocke schwingt nur alle 6 Sekunden einmal.
- Bewegung trägt nie allein eine Information. Jeder Zustand ist auch ohne Animation an Farbe, Wort und Icon erkennbar.
- `prefers-reduced-motion` schaltet alle Bewegung ab. Am Küchen-Terminal kann das über eine Einstellung erzwungen werden.