ApiCore/docs/superpowers/specs/2026-10-13-t5-optik-design.md

# T5 Optik mit eigener Handschrift — Design

Stand: 2026-10-14, Nachtrag 2026-10-16 (§17 Bewegungs-Sprache, Frage 4 in §16; Anlass Beute-Spec §12.4, Issue #26) · Betrifft: ApiCore-Frontend (plus ein kleiner Zusatz am Backend-Endpunkt `GET /autopilot/today`) · Teilprojekt T5 aus `docs/superpowers/specs/2026-10-12-plattform-rueckgrat-und-fahrplan-design.md` §10

## 1. Ziel

ApiCore soll man draußen am Stand lesen können: in der Mittagssonne, mit Handschuhen, mit einer Hand. Und man soll es auf den ersten Blick als Imker-App erkennen, nicht als Verwaltungsvorlage.

- Jeder Text und jedes Bedienelement erfüllt WCAG 2.2 AA. Die wichtigen Stellen liegen deutlich darüber, damit noch genug Kontrast übrig bleibt, wenn die Sonne auf dem Display spiegelt.
- Es gibt hell, dunkel und einen Kontrastmodus „Sonne“. Der Wechsel geht mit einem Tipp und flackert nicht.
- Ein Motiv trägt die Handschrift: **die Wabenzelle**. Sie zeigt den Zustand der Völker (Waben-Standkarte, Kartenmarker), sitzt am Zeiger des Bienenjahr-Rads, rahmt die Bereichs-Icons und bildet das Markenzeichen. Verläufe, Glas-Effekte und Zierbewegung fallen weg.
- Der Baukasten wird durchgesetzt. Jede Auswahlgruppe, jede Checkbox, jede Tab-Leiste und jedes Plus/Minus-Feld kommt aus genau einem Baustein, mit einem gemeinsamen Fokusstil.

Technisch heißt das:

- Farben stehen nur noch als Tokens in `globals.css`. Es gibt vier geprüfte Sätze: hell, dunkel, Sonne hell, Sonne dunkel. Ein Wächter-Test misst jedes Paar aus Abschnitt 4.4. Ein Token, das einem Satz fehlt, lässt den Test scheitern.
- Neue Grafiken sind handgeschriebenes SVG, wie heute das Varroa-Diagramm. Keine neue Laufzeit-Bibliothek. `next-themes` fliegt raus.
- Wo T4-Daten (Saison, nächste Schritte, Varroa-Bänder) schon da sind, zeigen Rad und Lebenslinie sie an. Fehlen sie, greift ein Kalender-Rückfall. Die Oberfläche funktioniert vor T4 und bricht nach T4 nicht.

**Voraussetzungen:**
- T3-Plan `docs/superpowers/plans/2026-10-13-t3-erfassung-am-stand.md`: Tasks 7 (Navigation, `nav-config.ts`, Sheets), 8 (`NumberStepper`, `RatingScale` mit Richtung und Tönen, Kontrast-Wächter), 11 (Varroa-Trend) und 14 (Stand-Seite mit Ampel, `colonyStatusLight`, `StatusLightBadge`) sind gemergt. T5 baut darauf auf und nichts davon neu.
- Für T5b: T4-Plan `docs/superpowers/plans/2026-10-13-t4-logik-ketten.md`, Lieferung T4a mit den Tasks 13, 15, 17, 18 und 19, ist gemergt. T4b (Tasks 25, 26, 31) ist optional; ohne T4b gilt die Saison nach Kalender.

### Bindende Vorgaben (Inhaber, aus Fahrplan, T3 und T4)

- ADHS-freundlich: wenig kognitive Last, ein Hauptknopf je Ansicht, kurze deutsche Sätze, Zustand nie nur über Farbe (immer Icon plus Wort).
- Sicherheit hat Priorität 1, Konsistenz ist oberstes Gesetz: ein Muster, gemeinsame Bausteine, keine Kopien.
- Touch-Ziele mindestens 44 px, Sheet-Zeilen 56 px. WCAG 2.2 AA.
- Dark Mode wird angeschlossen, sonst fliegen die Tokens raus (Fahrplan §10). Diese Spec schließt ihn an.
- Vor jedem Next.js-Code die passende Anleitung unter `ApiCore-Frontend/node_modules/next/dist/docs/` lesen (`AGENTS.md`). Für T5 sind das vor allem `01-app/02-guides/preventing-flash-before-hydration.md`, `progressive-web-apps.md` und `01-app/03-api-reference/03-file-conventions/01-metadata/manifest.md` sowie `app-icons.md`.

### Entscheidungen

| Frage | Entscheidung |
|---|---|
| Wie wird der Hauptknopf lesbar? | **Honig als Fläche, dunkle Tinte als Text** (9,4:1). Das ersetzt Weiß auf Honigverlauf (2,3:1). Für Text, Links, Icons und den Fokusring auf hellen Flächen gibt es ein eigenes Token `--primary-ink` (dunkler Bernstein, 6,5:1). `text-primary` ist verboten, weil heller Honig als Schrift nicht lesbar ist. Abweichung zur Wahl: Offene Frage 1. |
| Wie unterscheidet sich ein gewählter Zustand? | Honigfläche **plus** 2 px Rahmen in Tinte **plus** Haken-Icon. Die Fläche allein hätte gegen die Karte nur 1,9:1. Rahmen und Haken tragen den Zustand, auch für Farbenblinde und in der Sonne. |
| Ampel-Abzeichen im Dunkelmodus | Heute steht dort dunkle Schrift auf dunkler Tönung (1,4:1). Darum bekommt jede Zustandsfarbe drei Tokens: Fläche (`--condition-x`), Text auf der Fläche (`-foreground`) und Text oder Icon auf normalen Flächen und Tönungen (`-ink`). |
| Kontrastmodus | **„Sonne“** als eigener Tokensatz (`html[data-contrast="sun"]`): reinweiße Fläche, fast schwarze Tinte, Rahmen in Tinte, keine Tönungen, Schatten oder Unschärfe, 3-px-Fokus, Nebentext 16 px. Sonne funktioniert hell und dunkel. Schaltbar im Profil und mit einem Tipp im Benutzermenü; `prefers-contrast: more` schaltet Sonne vor, solange der Nutzer nichts gewählt hat. |
| Wie wird umgeschaltet, ohne zu flackern? | Ein kleines Inline-Skript im `<head>` setzt vor dem ersten Bild `class="dark"`, `data-contrast` und `data-motion` auf `<html>` (Muster aus der Next-Anleitung „Preventing Flash“). Die Werte liegen je Gerät in `localStorage`, wie heute die Bewegungsstufe. `next-themes` wird entfernt. Ein Mechanismus für alle drei Einstellungen. |
| Standard-Farbschema | **Hell**, nicht „Wie Gerät“. Viele Handys stehen dauerhaft auf dunkel; draußen bei Tag ist eine helle Oberfläche besser lesbar. Wahl: Offene Frage 3. |
| Grundschrift | Fließtext, Formular-Beschriftungen, Auswahl-Knöpfe, Listentitel und Hauptknöpfe haben 16 px. Nebentext 14 px. `text-xs` wird 13 px und ist nur für Achsen, Legenden und Fußzeilen erlaubt. In Sonne 16 bzw. 14 px. |
| Kompakte Größen | Kompakt darf nur ein Gerät mit feinem Zeiger (`@media (pointer: fine)`) sein, nicht jeder Bildschirm ab `sm`. Heute bekommt ein Tablet am Stand 32-px-Knöpfe und 36-px-Felder. |
| Fokusstil | **Einer für alles:** 2 px durchgehender Ring in `--ring` mit 2 px Abstand (Sonne: 3 px). Er sitzt als Basisregel auf `:focus-visible`. Komponenten löschen ihn nicht mehr (`outline-none`, `ring-ring/50` werden entfernt). Der Abstand sorgt dafür, dass der Ring gegen den Hintergrund gemessen wird, nicht gegen den Knopf. |
| Ein Motiv | Die Wabenzelle (Sechseck mit spitzer Oberseite) ist das einzige grafische Motiv. Verläufe (`--gradient-honey/-sage/-sky`) werden entfernt, ebenso der Glas-Effekt in Sonne. Das Wabenmuster `HoneycombPattern` bleibt nur auf Login und Herkunftsseite. |
| Waben-Standkarte: Datenquelle | Der bestehende Endpunkt `GET /apiaries/:id/colony-overview` (T3, mit T4-Feldern) je Stand über `useQueries`. Cache und Offline-Paket-Rückfall der Stand-Seite gelten damit mit. Kein neuer Sammel-Endpunkt. |
| Randstärke der Zelle | Wie im Fahrplan zeigt die Randstärke die Tage seit der letzten Durchsicht, aber in **drei Stufen** statt stufenlos: dünn = frisch, mittel = bald fällig, dick und gestrichelt = fällig oder nie durchgesehen. Stufenlose Strichstärken sind draußen nicht unterscheidbar. Die genaue Zahl steht im Namen der Zelle und in der Liste. |
| Lebenslinie und Rad: Daten | Nur vorhandene Endpunkte (Volk, Durchsichten, Varroa, Behandlungen, Fütterungen, Schwarmkontrollen, Historie, Königin; ab T4 `next-steps` und Varroa-Bewertung). Einzige Backend-Änderung: `GET /autopilot/today` bekommt **additiv** den Saisonkalender und `segmentSince` je Stand (9.1). |
| Diagramm-Bibliothek | Keine. Handgeschriebenes SVG wie `colony-varroa.tsx`. Beim Bau den `dataviz`-Skill laden (wie T3/T4). |
| Bewegung | **Geändert 2026-10-16, siehe §17.** Eine Bewegungs-Sprache für die ganze App, abgeleitet aus der Beute: Bewegung nur, wo sie Orientierung gibt (woher kommt das Sheet, was ist weg, was hat geklappt), mit wenigen Tokens und den drei Stufen „Voll“, „Dezent“, „Aus“. Rad, Lebenslinie und Waben bleiben Daten und erscheinen weiter sofort (6.8, 8.5, 9.5). `motion` ist seit der Beute installiert und wird nur dort genutzt, wo CSS es nicht kann. |
| Icons | Lucide wie bisher. Eine Tabelle `AREAS` (Abschnitt 11) ist die einzige Quelle für Icon und Farbton je Bereich. Navigation, Kopfzeilen, „+ Neu“ und T4-Vorschläge lesen daraus. |
| App-Icons | Ein Master-SVG, daraus erzeugte PNGs (192/512 „any“, 192/512 „maskable“, 512 „monochrome“, 180 Apple, Favicon). Die erzeugten Dateien liegen im Repo; das Skript nutzt `sharp` als neue devDependency. |

## 2. Umfang

### 2.1 Im Umfang (§10 T5 → Lösung)

| Punkt aus §10 T5 | Lösung | Abschnitt |
|---|---|---|
| Waben-Standkarte: Stand = Wabe, Volk = Zelle, Füllung über `condition-*` plus Icon, Randstärke = Tage seit Durchsicht | `ApiaryComb` auf der Stand-Seite und der Bienenstände-Liste | 6 |
| Mini-Waben ersetzen die Leaflet-Marker | `L.divIcon` mit SVG-Rosette, Listen-Rückfall | 7 |
| Lebenslinie: senkrechte Zeitleiste, Stärkekurve, Band für Milben pro Tag, Königin als Punkt in Zeichenfarbe | `ColonyLifeline` auf der Volksseite | 8 |
| Bienenjahr-Rad auf dem Dashboard, ersetzt die Zählkacheln | `YearWheel` mit Saison, Fenstern, Zeiger, Aufgabenpunkten | 9 |
| Text auf Hauptknopf ≥ 4,5:1, Rahmen ≥ 3:1, Grundschrift 16 px | neue Tokens, `-ink`-Tokens, Schriftregeln | 4 |
| Optional ein Kontrastmodus | „Sonne“ | 4.3, 5 |
| Dark Mode anschließen oder Tokens raus | angeschlossen, Tokens repariert | 4, 5 |
| Manifest in Markenfarben mit PNG und maskable Icons | neues Markenzeichen, Icon-Satz, Shortcuts | 12 |
| Je ein Baustein für Auswahlgruppe, Checkbox, Tabs, Plus/Minus | `ChoiceGroup`, `Checkbox`/`CheckboxField`, `Tabs`, `NumberStepper` | 10 |
| Feste Icon- und Farbzuordnung pro Bereich | `AREAS`, `AreaIcon` | 11 |
| Fokusstil für alle eigenen Bedienelemente | globale Fokusregel | 4.6, 10.6 |
| Nachtrag 2026-10-16: eine Bewegungs-Sprache für die App, passend zur Beute (Beute-Spec §12.4) | Stufen, Tokens, Regeln je Muster, Wächter | 17 |
| §11 T5-Befunde: Weiß auf Honig 2,3:1, Eingaberahmen 1,56:1, Dark Mode unerreichbar, Auswahlgruppen von Hand, Checkboxen in 4, Tabs in 3 Varianten | alle behoben | 4.4, 5, 10 |

### 2.2 Befunde aus dem Code, die T5 zusätzlich behebt

Gemessen mit derselben OKLCH-Rechnung wie `src/lib/forms/rating-contrast.spec.ts`.

| Befund | Wert heute | Lösung | Abschnitt |
|---|---|---|---|
| Links und Icons in `text-primary` auf dem Seitenhintergrund | 3,66:1 | `--primary-ink`, Codemod für 32 Stellen | 4.2 |
| Fokusring `ring-ring/50` auf der Karte | 1,94:1 (dunkel 2,59) | durchgehender Ring mit Abstand | 4.6 |
| Ampel-Abzeichen (Text auf 15-%-Tönung) im Dunkelmodus | 1,36–1,43:1 | `-ink`-Tokens | 4.2 |
| Warn-Badge im Dunkelmodus | 1,49:1 | `--warning-ink` | 4.2 |
| Aktiver Navigationseintrag (`bg-primary text-primary-foreground`) | 4,04:1 | Honig plus Tinte, 9,38:1 | 4.2 |
| Weiße Icons auf Honigverlauf (Seitenkopf, Karten, Markenzeichen) | 2,39:1 | `AreaIcon`, `BrandMark` | 11, 12 |
| Warn-Icons `text-warning` auf der Karte | 2,90:1 | `text-warning-ink`, 6,09:1 | 4.2 |
| Diagrammfarbe `chart-3` | 2,90:1 | 3,93:1 | 4.2 |
| Ampelfläche „mittel“ als gewählte Skalenstufe | 2,65:1 | 3,03:1, dazu Rahmen und Haken | 4.2, 10.2 |
| Ab `sm` (640 px) Knöpfe 32 px und Felder 36 px, auch auf Tablets mit Touch | – | Kompaktmaß nur bei `pointer: fine` | 4.5 |
| `Toaster` nutzt `useTheme` aus `next-themes` ohne Provider und folgt damit dem System, die App aber nicht | – | eigener Appearance-Hook | 5 |
| `data-motion` wird erst in `useEffect` gesetzt | erster Seitenübergang läuft ungebremst | Inline-Skript setzt es vor dem ersten Bild | 5 |
| `TabSwitcher` und `ActiveHistoryTabs` haben `role="tablist"` ohne Tabpanel und ohne Pfeiltasten | – | ein `Tabs`-Baustein auf Base UI | 10.4 |
| Farbverläufe je Seite von Hand gewählt (Königinnen Salbei, Kalender Himmel, Inventar mal Salbei, mal Himmel) | – | Farbe aus `AREAS` | 11 |
| Abweichende Icons: Ernte-Detail `Boxes` statt `Scissors`, Schleuderung neu `Droplet` statt `FlaskConical`, Lager zusätzlich `Package` (= Abfüllung) | – | eine Quelle `AREAS` | 11 |
| Manifest: `theme_color #0a0a0a`, `background_color #ffffff`, nur `icon.svg`; das Icon zeigt drei gelbe Balken statt des Markenzeichens | – | neuer Icon-Satz | 12 |
| Leaflet-Popups sind immer weiß, auch im Dunkelmodus | – | Popup-Stil aus Tokens | 7 |
| `ui/*` hat eigene `dark:`-Klassen, die das Token-System umgehen | – | entfernt, Tokens tragen den Modus | 4.1 |

### 2.3 Nicht im Umfang

- Neue Fachlogik. Ampelregeln, Saison, Fälligkeit und Varroa-Bänder kommen aus T3 und T4.
- Echte Aufstellung der Völker am Stand (Position in der Reihe). Die Zellen stehen nach Volkscode, siehe Offene Frage 2.
- Neue Diagramme in der Statistik. Die Statistik bekommt nur die neuen Tokens und den Tabs-Baustein.
- Etiketten-Designer und PDF-Ausgaben. Sie bekommen nur Tokens und Bausteine, wo sie Bedienelemente der App nutzen; Druck bleibt immer hell.
- Native App, Umgebungslicht-Sensor (zu wenig Browserunterstützung), Haptik.
- Ein E2E-Framework (Playwright) im Frontend. Die Sichtprüfung läuft per Screenshot-Matrix (13.4).

### 2.4 Abgrenzung zu T3 und T4

| Baustein | Liefert | T5 ändert |
|---|---|---|
| T3 Task 8 `RatingScale`, `RATING_TONE_CLASS`, `rating-contrast.spec.ts` | Töne je Stufe, Kontrast-Wächter für Ampelflächen | Wächter geht in `src/styles/contrast.spec.ts` auf (alle Paare, vier Sätze). Gewählte Stufe bekommt Rahmen und Haken wie jede Auswahl. |
| T3 Task 8 `NumberStepper` | Plus/Minus-Feld | API bleibt. Weitere Zählfelder stellen darauf um (10.5). |
| T3 Task 14 `colonyStatusLight`, `StatusLightBadge`, `ApiaryColoniesCard` | Ampel je Volk, Zeilenliste | Die Ampel füllt die Zellen. Die Zeilenliste bleibt als Rückfall unter der Wabe. |
| T3 Task 7 `nav-config.ts`, `quick-actions.ts`, Sheets | eine Navigationsquelle | Icons kommen aus `AREAS`. |
| T3 Task 11 Varroa-Trend (SVG) | Muster für handgeschriebene Diagramme | Vorlage für Lebenslinie und Rad. |
| T4 Task 15 `ColonyOverviewRow.inspectionDueOn`, `ColonyNextSteps`, `AutopilotToday` | Fälligkeit, nächste Schritte, Saison je Stand | Randstufen der Zelle, Zukunftszone der Lebenslinie, Rad. `AutopilotToday` bekommt zwei Felder (9.1). |
| T4 Task 18 `SeasonChip`, `SEGMENT_LABELS`, Heute-Karten | Saison-Chips auf dem Dashboard | Die Saison je Stand zieht in die Rad-Karte. Die Chip-Zeile entfällt dort, um Doppelanzeige zu vermeiden. `SeasonChip` bleibt auf der Stand-Seite. |
| T4 Task 17 `INTENT_ICONS` | Icon je Absicht | Werte aus `AREAS` (Durchsicht, Varroa, Fütterung …). |
| T4 Task 19 Varroa-Bänder, `rating` je Messung | Ampel je Messung | Lebenslinie färbt mit `rating.light` und markiert `band.redAbove`. |
| T4 Task 31 `PHASE_SOURCE_LABELS` | „gemeldet“, „geschätzt“, „Kalender“ | Rad zeigt die Quelle damit. |

## 3. Gestaltungsgrundsätze für diese App

1. **Sonne zuerst.** Draußen spiegelt das Display, und Spiegelung frisst Kontrast. Darum liegen Fließtext und Hauptknopf über 7:1, nicht knapp über 4,5:1. Flächen sind hell und ruhig, Text ist dunkel. Unterschiede zeigen sich über Helligkeit, Form und Strichstärke, nicht über Sättigung.
2. **Handschuhe.** Jedes Ziel mindestens 44 × 44 px, Zeilen in Sheets 56 px. Kein Ziel, das nur durch Hover oder einen langen Druck erreichbar ist. Benachbarte Ziele haben mindestens 4 px Abstand.
3. **Ein Blick, eine Sache.** Jede Ansicht hat einen Hauptknopf in Honig. Alles andere ist umrandet oder Text. Eine Grafik beantwortet genau eine Frage:
   - Waben: Welches Volk braucht mich?
   - Lebenslinie: Wie hat sich das Volk entwickelt?
   - Rad: Wo stehen wir im Bienenjahr, was kommt?
4. **Nie nur Farbe.** Jeder Zustand hat ein Icon und ein Wort, jede Grafik einen Text und eine Tabelle. Die Zellen tragen den Volkscode und ein Zustands-Icon. Gestrichelte Ränder und Schraffuren unterscheiden auch ohne Farbsehen.
5. **Vertraute Bedienung, eigene Handschrift im Detail.** Knöpfe, Felder, Tabs und Sheets verhalten sich wie überall im Web. Die Handschrift sitzt in Material (Wachs und Honig), Tinte und dem einen Motiv Wabenzelle, nicht in erfundenen Bedienelementen.
6. **Ruhe.** Keine Verläufe, kein Glas, keine Zierbewegung, keine Großbuchstaben-Laufschrift. Schatten sind leise und entfallen in Sonne. Die Farbtöne der Bereiche erscheinen nur als Icon-Kachel, nicht als Fläche. Bewegung folgt §17. Glas, Leuchten und Ruhebewegung gibt es nur auf der Beute-Bühne (§17.8).

**Verboten** (der Wächter-Test prüft, was sich prüfen lässt):
- Weiß auf Honig
- `text-primary` als Schriftfarbe
- `ring-ring/50` und `outline-none` ohne Ersatz
- Farbverlauf als Hintergrund
- Text unter 13 px
- Zustand nur über Farbe
- eigene `role="radio|checkbox|tab"`-Bauten außerhalb des Baukastens
- Bewegung gegen §17: `motion-safe:` für Verschiebung, `transition-all`, animierte Breite, Höhe oder Unschärfe, bewegte Datenwerte

## 4. Tokens

### 4.1 Grundregeln

- Jede Farbe hat eine Rolle. **Fläche** (`--primary`, `--condition-good`, …) trägt ihren **Text auf der Fläche** (`--primary-foreground`, `--condition-good-foreground`). Für Text und Icons auf normalen Flächen gibt es **Tinte** (`--primary-ink`, `--warning-ink`, `--condition-good-ink`).
- Vier Sätze in dieser Reihenfolge in `globals.css`:
  1. `:root` (hell)
  2. `.dark` (dunkel)
  3. `:root[data-contrast="sun"]` (Sonne hell)
  4. `.dark[data-contrast="sun"]` (Sonne dunkel)

  Die Sonne-Sätze überschreiben nur die Tokens aus 4.3.
- `@custom-variant dark (&:where(.dark, .dark *));` statt heute `(&:is(.dark *))`, damit die Klasse direkt auf `<html>` greift. Dazu kommen die Varianten `sun`, `pointer-fine` und `pointer-coarse`.
- `ui/*` und `components/*` enthalten keine `dark:`-Klassen mehr. Ein Modus ist nur ein anderer Tokensatz. Einzige Ausnahme: Leaflet-Kacheln (7.4).
- Entfernt: `--gradient-honey`, `--gradient-sage`, `--gradient-sky`. Die Komponente `PageHeader`/`EntityCard` verliert den Prop `gradient`.
- `@media print` setzt immer den hellen Satz.
- `@media (forced-colors: active)`:
  - Zellen, Ränder, Ringe und Rad-Segmente bekommen `CanvasText`-Striche.
  - Zustände bleiben über Icon, Muster und Strichstärke erkennbar.
  - SVG-Flächen nutzen `forced-color-adjust: auto`.

### 4.2 Werte hell und dunkel

OKLCH ist die Quelle, Hex dient nur zur Orientierung. Alle Werte liegen im sRGB-Farbraum (vom Skript geprüft).

| Token | Hell | Dunkel | Verwendung |
|---|---|---|---|
| `--background` | `oklch(0.968 0.014 85)` #f9f4ea | `oklch(0.19 0.016 55)` #1a120d | Seite („Wachs“) |
| `--foreground` | `oklch(0.21 0.03 55)` #23140a | `oklch(0.95 0.018 80)` #f5ede1 | Text („Tinte“) |
| `--card`, `--popover`, `--sidebar` | `oklch(0.995 0.004 90)` #fefdfa | `oklch(0.235 0.018 55)` #251c16 | Karten, Sheets |
| `--muted` | `oklch(0.925 0.018 82)` #ece5d9 | `oklch(0.28 0.018 55)` #302720 | ruhige Flächen, Rad-Segmente |
| `--muted-foreground` | `oklch(0.44 0.03 60)` #5f4f42 | `oklch(0.76 0.025 75)` #bbafa0 | Nebentext |
| `--primary` | `oklch(0.80 0.145 78)` #f0b13f | `oklch(0.80 0.14 78)` #efb146 | Honig: Hauptknopf, Auswahl, aktiver Eintrag |
| `--primary-foreground` | `oklch(0.21 0.035 55)` #251408 | `oklch(0.19 0.03 55)` #1e1006 | Text auf Honig |
| `--primary-ink` **neu** | `oklch(0.47 0.115 55)` #8a4603 | `oklch(0.82 0.13 80)` #f0ba59 | Links, Akzent-Icons, aktiver Tab-Strich |
| `--ring` | = `--primary-ink` | = `--primary-ink` | Fokusring |
| `--secondary` / `-foreground` | `oklch(0.44 0.07 145)` / `oklch(0.98 0.015 100)` | `oklch(0.66 0.08 145)` / `oklch(0.16 0.02 145)` | Salbei, Zweitknopf |
| `--accent` / `-foreground` | `oklch(0.935 0.03 78)` / `oklch(0.25 0.045 50)` | `oklch(0.31 0.03 60)` / `oklch(0.95 0.018 80)` | Hover, Menüs |
| `--destructive` | `oklch(0.50 0.17 28)` #af2b25 | `oklch(0.70 0.15 28)` #ed7668 | Text, Icon, Rahmen |
| `--destructive-foreground` **neu** | `oklch(0.985 0.005 30)` | `oklch(0.17 0.03 30)` | Text auf voller Fläche (Bestätigen-Dialog) |
| `--border` | `oklch(0.86 0.022 78)` #d9d0c1 | `oklch(0.34 0.02 60)` #40362e | nur Trennlinien und Kartenkanten (Deko) |
| `--input` | `oklch(0.60 0.035 65)` #8f7c6b | `oklch(0.56 0.025 70)` #7e7265 | Rahmen jedes Bedienelements |
| `--warning` / `-foreground` | `oklch(0.79 0.15 80)` / `oklch(0.23 0.04 60)` | `oklch(0.80 0.14 80)` / `oklch(0.20 0.03 60)` | Warnfläche |
| `--warning-ink` **neu** | `oklch(0.50 0.11 65)` #8d5406 | `oklch(0.82 0.13 82)` #eebb58 | Warn-Icon und -Text |
| `--success` / `-foreground` | `oklch(0.46 0.08 145)` / `oklch(0.98 0.015 100)` | `oklch(0.70 0.09 145)` / `oklch(0.16 0.02 145)` | Erfolg |
| `--condition-excellent` / `-foreground` / `-ink` | `0.62 0.13 150` / `0.15 0.04 150` / `0.40 0.09 150` | `0.68 0.12 150` / `0.17 0.04 150` / `0.80 0.11 150` | Ampel „sehr gut“ |
| `--condition-good` / … | `0.645 0.13 125` / `0.17 0.04 125` / `0.41 0.09 125` | `0.72 0.12 125` / `0.18 0.04 125` / `0.83 0.11 125` | Ampel „gut“, Zelle grün |
| `--condition-average` / … | `0.665 0.125 88` / `0.19 0.04 90` / `0.44 0.09 85` | `0.77 0.13 90` / `0.20 0.04 90` / `0.86 0.11 90` | Ampel „Achtung“, Zelle gelb |
| `--condition-weak` / … | `0.665 0.14 58` / `0.18 0.04 55` / `0.46 0.12 52` | `0.74 0.13 60` / `0.19 0.04 55` / `0.82 0.11 60` | Ampel „schwach“ |
| `--condition-critical` / … | `0.62 0.17 30` / `0.15 0.04 30` / `0.47 0.16 28` | `0.68 0.16 28` / `0.16 0.04 30` / `0.78 0.11 28` | Ampel „kritisch“, Zelle rot |
| `--chart-1` … `--chart-5` | `0.56 0.13 55`, `0.46 0.08 145`, `0.60 0.12 85`, `0.50 0.17 28`, `0.52 0.08 250` | `0.78 0.13 70`, `0.70 0.09 145`, `0.82 0.12 90`, `0.70 0.15 28`, `0.72 0.08 250` | Diagramme; Rad-Fenster: Tracht = 3, Varroa = 4, Einwinterung = 5 |
| `--area-betrieb` **neu** | `oklch(0.46 0.08 150)` | `oklch(0.74 0.09 150)` | Bereichston (Abschnitt 11) |
| `--area-erfassung` **neu** | `oklch(0.50 0.12 60)` | `oklch(0.80 0.12 70)` | |
| `--area-arbeit` **neu** | `oklch(0.48 0.08 250)` | `oklch(0.76 0.07 250)` | |
| `--area-ernte` **neu** | `oklch(0.52 0.11 75)` | `oklch(0.80 0.10 80)` | |
| `--area-neutral` **neu** | `oklch(0.45 0.02 60)` | `oklch(0.76 0.02 70)` | |
| `--queen-white/-yellow/-red/-green/-blue` **neu** | `0.97 0.005 90`, `0.86 0.17 95`, `0.58 0.20 27`, `0.58 0.15 145`, `0.52 0.15 255` | gleich, außer rot `0.62 0.20 27`, grün `0.66 0.15 145`, blau `0.62 0.15 255` | Zeichenfarbe der Königin, immer mit 2-px-Ring in `--foreground` |
| `--radius` | `0.75rem` | gleich | unverändert |
| `--shadow-soft`, `--shadow-elevated` | unverändert | unverändert | in Sonne `none` |

Bestehende Klassen werden so umgestellt (Codemod, Abschnitt 10.8):
- `text-primary` → `text-primary-ink`
- `text-warning` → `text-warning-ink`
- `text-condition-x-foreground` in Abzeichen → `text-condition-x-ink` (`COLONY_CONDITION_TONE_CLASS`, `StatusLightBadge`)
- `border-primary` bei Auswahlzuständen → `border-foreground`

### 4.3 Kontrastmodus „Sonne“

Ziel: draußen bei voller Sonne alles mit maximaler Helligkeitsdifferenz lesbar, ohne dass sich Bedienung oder Anordnung ändern.

| Token | Sonne hell | Sonne dunkel |
|---|---|---|
| `--background`, `--card`, `--popover`, `--sidebar` | `oklch(1 0 0)` #ffffff | `oklch(0.10 0.005 55)` #040302 |
| `--foreground`, `--primary-foreground`, `--ring` | `oklch(0.13 0.02 55)` #0d0602 | `--foreground`/`--ring` `oklch(0.99 0.005 85)` |
| `--muted` | `oklch(0.95 0.01 80)` | `oklch(0.20 0.01 55)` |
| `--muted-foreground` | `oklch(0.32 0.03 60)` | `oklch(0.88 0.02 80)` |
| `--border` | `oklch(0.40 0.03 60)` | `oklch(0.70 0.02 70)` |
| `--input` | `oklch(0.20 0.03 55)` | `oklch(0.92 0.01 80)` |
| `--primary-ink` | `oklch(0.38 0.10 52)` | wie dunkel |

Dazu kommen Regeln unter `[data-contrast="sun"]`:
- **Schrift:** `--text-sm: 1rem`, `--text-xs: 0.875rem`. Tailwind 4 liest die Größen aus diesen Variablen, deshalb wirkt das ohne Klassenänderung.
- **Fokus:** `--focus-width: 3px`.
- **Rahmen:** Rahmen von Bedienelementen 2 px (`--control-border-width: 2px`).
- **Flächen:** keine Schatten (`--shadow-*: none`). Kopfzeile undurchsichtig (`backdrop-filter: none`, `bg-card`). Tönungen `bg-*/15` werden zu `bg-card` mit 2-px-Rahmen in der jeweiligen Tinte (Hilfsklasse `.tint` statt `/15`).
- **Grafik:** Wabenränder 3/5/7 px statt 2/4/6 px. Keine Honig-Tönung unter der Stärkekurve.

### 4.4 Gemessene Kontraste (Ist → Soll)

Grenzen: Text 4,5:1, Bedienrahmen, Fokus und Grafik 3:1. Für Fließtext und Hauptknopf ist das Ziel 7:1. Die Werte unten sind die Sollwerte, die der Wächter-Test prüft.

| Paar | Ist hell | Soll hell | Ist dunkel | Soll dunkel | Sonne hell | Sonne dunkel | Grenze |
|---|---|---|---|---|---|---|---|
| Text auf Hauptknopf | 2,31 (Verlaufsanfang) / 4,04 | **9,38** | 1,72 (Verlaufsende) | **9,77** | 10,61 | 9,77 | 7 |
| Grundtext / Seite | 15,25 | 16,23 | 15,21 | 15,98 | 20,15 | 20,01 | 7 |
| Grundtext / Karte | 17,15 | 17,56 | 13,46 | 14,45 | 20,15 | 20,01 | 7 |
| Nebentext / Seite | 5,77 | 7,13 | 6,78 | 8,60 | 12,77 | 14,33 | 4,5 |
| Nebentext / `--muted` | 4,88 | 6,27 | 5,29 | 6,81 | 11,03 | 12,62 | 4,5 |
| Link (`--primary-ink`) / Seite | 3,66 | **6,48** | 7,05 | 10,48 | 10,37 | 11,66 | 4,5 |
| Eingaberahmen / Karte | **1,56** | **3,92** | 1,66 | 3,58 | 18,19 | 16,25 | 3 |
| Eingaberahmen / Seite | – | 3,62 | – | 3,96 | 18,19 | 16,25 | 3 |
| Fokusring / Karte (mit Abstand) | 1,94 | 7,01 | 2,59 | 9,47 | 20,15 | 20,01 | 3 |
| Fokusring / Seite | – | 6,48 | – | 10,48 | 20,15 | 20,01 | 3 |
| Warn-Icon/-Text / Karte | 2,90 | 6,09 | 6,84 | 9,49 | 6,18 | 11,68 | 4,5 |
| Warn-Text / Warn-Tönung | 14,14 | 5,53 | 1,49 | 6,92 | 5,60 | 9,37 | 4,5 |
| Fehlertext / Karte | 6,41 | 6,45 | 4,10 | 5,87 | 6,54 | 7,23 | 4,5 |
| Fehlertext / Fehler-Tönung | 5,48 | 5,50 | 3,66 | 5,06 | 5,57 | 6,58 | 4,5 |
| Salbei-Knopf | 7,11 | 7,11 | 5,56 | 6,43 | 7,11 | 6,43 | 4,5 |
| Ampel-Abzeichen (Tinte / Tönung), schlechteste Stufe | 12,61 | 6,06 | **1,36** | 6,45 | 6,14 | 8,49 | 4,5 |
| Text auf Ampelfläche, schlechteste Stufe | 4,71 | 5,02 | 4,66 | 6,32 | 5,02 | 6,32 | 4,5 |
| Ampelfläche / Karte (Zelle, gewählte Stufe), schlechteste | 2,65 | 3,03 | 4,10 | 5,41 | 3,07 | 6,66 | 3 |
| Diagramm `chart-1…5` / Karte, schlechteste | 2,90 (`chart-3`) | 3,93 | 4,10 | 5,87 | 3,99 | 7,23 | 3 |
| Bereichston / Karte, schlechtester | – | 5,54 | – | 7,52 | 5,54 | 7,52 | 3 |
| Königinnenfarbe mit Tinten-Ring / Karte | – | 17,56 (Ring) | – | 14,45 (Ring) | 20,15 | 20,01 | 3 |

Abzeichen im hellen Modus fallen bewusst von 12–16:1 auf 6–7,4:1. Statt fast schwarzer Schrift zeigen sie nun den Farbton als Tinte, damit „Kritisch“ und „Gut“ auch ohne Icon verschieden aussehen. Sie bleiben deutlich über 4,5:1.

Die Honigfläche hat gegen die Karte nur 1,87:1. Das ist zulässig: Ein Knopf wird über seinen Text erkannt, und gewählte Zustände tragen Rahmen und Haken (Entscheidungen). Im Rad bekommt das aktuelle Segment einen 2-px-Rahmen in Tinte (9.3).

### 4.5 Schrift und Größen

| Rolle | Größe | Klasse | Familie |
|---|---|---|---|
| Fließtext, Formular-Beschriftung, Auswahl-Knöpfe, Listentitel, Knopftext, Eingabe | 16 px | `text-base` | Inter |
| Nebentext (Datum, Hinweis, Begründung) | 14 px (Sonne 16) | `text-sm` | Inter |
| Achsen, Legenden, Fußzeilen | 13 px (Sonne 14) | `text-xs` (`--text-xs: 0.8125rem`) | Inter |
| Überschriften h1–h4 | 20 / 24 / 30 px | wie heute | Space Grotesk, nie in Knöpfen oder Labels |
| Codes, Losnummern | wie Umgebung | `font-mono` | IBM Plex Mono |

- Diese Bausteine stellen Inhaltstext von `text-sm` auf `text-base` um:
  - `Field`-Label
  - `ChoiceGroup`-Option
  - `CheckboxField`-Label
  - Button-Größe `touch` (heute `text-[0.95rem]`)
  - `Input`/`Textarea` (`md:text-sm` entfällt; 16 px verhindert auch das Zoomen in iOS)
  - Zeilentitel in Listen, `DetailHeader`-Untertitel
  - `EmptyState`-Beschreibung
- Größen: `size="default"` bei Button und `Input` hat 44 px Höhe. 32 bzw. 36 px gibt es nur mit `pointer-fine:` statt `sm:`. `size="touch"` bleibt 44 px. In `ui/button.tsx`, `ui/input.tsx`, `ui/select.tsx`, `ui/textarea.tsx` und `ui/tabs.tsx` wird `sm:h-*` zu `pointer-fine:h-*`.
- Ziele: Icon-Knöpfe ohne Text (`icon`, `icon-sm`) bekommen bei `pointer-coarse` eine Trefferfläche von 44 px über ein `::after`-Element, ohne optisch zu wachsen.

### 4.6 Fokusstil

In `@layer base`:

```css
:root { --focus-width: 2px; --focus-offset: 2px; }
:where(:focus-visible) { outline: var(--focus-width) solid var(--ring); outline-offset: var(--focus-offset); }
```

- Alle `outline-none`, `focus-visible:ring-3 focus-visible:ring-ring/50` und `has-[:focus-visible]:outline-*` in `ui/*`, `components/*` und `app/*` entfallen (18 Stellen `ring-ring/50` in 17 Dateien, 22 `outline-none`).
- Wo der Fokus auf einem inneren Element liegt (Label-Zeile mit verstecktem Input, Wabenzelle), zeigt der Baustein den Ring am äußeren Element über `:has(:focus-visible)`. Bei der Wabenzelle ist das ein zweiter Sechseckpfad (6.6).
- Fehlerzustand (`aria-invalid`): Rahmen in `--destructive`, 2 px, dazu der Fehlertext am Feld. Der Fokusring bleibt in `--ring`.
- Fokus wird nicht verdeckt (WCAG 2.4.11): Das bestehende `scroll-padding` bleibt.

## 5. Darstellung umschalten

### 5.1 Einstellungen

| Einstellung | Werte | Standard | Attribut auf `<html>` | Speicher (je Gerät) |
|---|---|---|---|---|
| Farbschema | „Hell“, „Dunkel“, „Wie Gerät“ | Hell (Offene Frage 3) | `class="dark"` oder nichts | `localStorage` `apicore.theme` |
| Kontrast | „Normal“, „Sonne“ | Normal; ohne gespeicherten Wert Sonne bei `prefers-contrast: more` | `data-contrast="sun"` | `apicore.contrast` |
| Bewegung | „Voll“, „Dezent“, „Aus“ | Voll (wie heute) | `data-motion` | `apicore.motion` (heute schon) |

Alles wird je Gerät gespeichert, nicht am Konto. Draußen am Handy will man Sonne, am Schreibtisch nicht. Das folgt dem bestehenden Muster der Bewegungsstufe.

### 5.2 Ablauf

1. **Vor dem ersten Bild:** `src/components/appearance-script.tsx` rendert im `<head>` von `app/layout.tsx` ein Inline-Skript nach dem Muster `InlineScript` der Next-Anleitung „Preventing Flash“.
   - Es liest die drei Schlüssel in `try/catch` und setzt Klasse und Attribute.
   - Es setzt den Inhalt von `<meta name="theme-color">` auf die Seitenfarbe des aktiven Satzes.
   - `<html>` bekommt `suppressHydrationWarning`.
   - Das Skript kommt aus derselben Konstante wie der Hook (`APPEARANCE_KEYS`), damit Schlüssel und Werte nie auseinanderlaufen.
   - CSP: `script-src 'self' 'unsafe-inline'` (`proxy.ts`) erlaubt das schon. Wird die CSP später verschärft, kommt der SHA-256-Hash des Skripts in die Liste. Das Skript enthält keine Nutzerdaten.
2. **Zur Laufzeit:** `useAppearance()` (`src/lib/appearance/appearance.ts`) liefert die Werte und Setter.
   - Ein Setter schreibt `localStorage` und das Attribut.
   - Er hört auf `matchMedia('(prefers-color-scheme: dark)')`, solange „Wie Gerät“ gewählt ist, und auf `prefers-contrast`, solange nichts gewählt ist.
   - Er hört auf das `storage`-Ereignis, damit ein zweiter Tab mitzieht.
   - `motion-preference.ts` behält seine API; `applyMotionLevel` wird vom Skript übernommen, der `useEffect` in `providers.tsx` entfällt.
3. **Toaster:** `components/ui/sonner.tsx` liest `useAppearance().resolvedTheme` statt `next-themes`. `next-themes` wird aus `package.json` entfernt.
4. **Metadaten:** `viewport.themeColor` in `app/layout.tsx`:
   - `[{ media: '(prefers-color-scheme: light)', color: '#f9f4ea' }, { media: '(prefers-color-scheme: dark)', color: '#1a120d' }]`
   - Das Skript überschreibt den Wert bei manueller Wahl.

### 5.3 Bedienung

- **Profil → Karte „Darstellung“** (ersetzt die Karte „Bewegung & Effekte“, `appearance-section.tsx` statt `motion-section.tsx`). Drei `ChoiceGroup`-Felder (Aussehen „Karten“ mit Beschreibung, 10.2):
  - **Farbschema:** „Hell – am besten bei Tageslicht“, „Dunkel – für abends“, „Wie Gerät“.
  - **Kontrast:** „Normal“, „Sonne – maximaler Kontrast, größere Schrift, für draußen“.
  - **Bewegung:** Texte wie heute.
  - Darunter steht: „Gilt nur für dieses Gerät.“ Die Änderung wirkt sofort und ohne Übergang.
- **Schnellschalter:** Im Benutzermenü (Avatar) steht oben ein Eintrag „Sonnenmodus“ als `DropdownMenuCheckboxItem` (`role="menuitemcheckbox"`, 44 px), mit Sonnen-Icon und Haken. Vom Stand aus sind das zwei Tipps, ohne Seitenwechsel. Nach dem Umschalten erscheint der Toast „Sonnenmodus an“ bzw. „aus“.
- **Abmelden** löscht diese Einstellungen nicht. Sie sind Gerätevorlieben, keine Daten.

### 5.4 Seiten außerhalb der App

- Login und `/herkunft/[lot]` folgen denselben Tokens und Einstellungen. Ein Kunde ohne gespeicherten Wert sieht „Hell“.
- Druck (`@media print`) und PDF-Vorschau bleiben hell.

## 6. Waben-Standkarte

**Frage, die sie beantwortet:** Welches Volk an diesem Stand braucht mich, und wann war ich zuletzt dran?

### 6.1 Daten

- Je Stand `ColonyOverview` aus `GET /apiaries/:id/colony-overview`, Query-Key `["apiaries", apiaryId, "colony-overview"]` (wie T3 Task 14). Offline greift `withPackFallback` (T3 Task 15).
- Je Zeile: `code`, `status`, Bedingungen, `lastInspectionDate`, `openWarnings`, `openCritical`. Ab T4 zusätzlich `inspectionDueOn`, `segment`, `nextStepTitle`.
- Zustand der Zelle = `colonyStatusLight(row, { today, inspectionsVisible })`, unverändert aus T3/T4.
- Auf der Bienenstände-Liste lädt `useQueries` die Übersicht aller aktiven Stände, höchstens 20. Bei mehr Ständen zeigen die übrigen Karten nur die Zusammenfassung, ohne Wabe; das ist im Betrieb nicht zu erwarten.

### 6.2 Aufbau

Stand-Seite, Karte „Völker“ (Handy, 328 px Inhaltsbreite):

```
┌ Völker (7) ─────────────────────────────────────────┐
│ 5 Gut · 1 Achtung · 1 Kritisch · 2 Durchsichten fällig│
│                                                      │
│    ⬡B1   ⬡B2   ⬡B3   ⬡B4         ⬡ = Zelle 64 px     │
│       ⬡B5   ⬡B6   ⬡B7            versetzte Reihe     │
│                                                      │
│ ⬡ Gut  ⬡ Achtung  ⬡ Kritisch · Rand: dünn = frisch,  │
│ dick = Durchsicht fällig                             │
│ ──────────────────────────────────────────────────── │
│ Braucht Blick                                        │
│  B3  ▲ Achtung  Futter schwach · 16 Tage ohne Durchs.│
│  B6  ✕ Kritisch Weisellos                            │
│ [ Alle 7 Völker als Liste ▾ ]                        │
└──────────────────────────────────────────────────────┘
```

- Zusammenfassung oben: ein Satz mit Icons, nach Ampel gezählt, dazu fällige Durchsichten (ab T4 aus `inspectionDueOn`, vorher Stufe 3 der Randregel).
- Wabe: die Zellen.
- Legende: immer sichtbar, eine Zeile, 13 px. Sie erklärt die drei Füllungen mit Wort und Icon und den Rand.
- „Braucht Blick“: nur Völker mit Gelb oder Rot, mit Gründen. Das ist die Arbeitsliste. Bei null Völkern steht dort „Alle Völker sind in Ordnung.“
- „Alle 7 Völker als Liste“: ein Knopf mit `aria-expanded`, der die T3-Zeilenliste aufklappt. Das ist der Tabellen-Rückfall für alle, die die Wabe nicht lesen können oder wollen. Ab T4 zeigt die Liste auch „Durchsicht fällig in 2 Tagen“ und den nächsten Schritt (T4 Task 18).
- Der Hauptknopf der Seite bleibt „Runde starten“ (T3).

Bienenstände-Liste (`/apiaries`, Tab „Aktiv“): Jeder aktive Stand ist eine Karte.

```
┌ ⬡ Nordhang ──────────────── Schwarmzeit · alle 7 Tage ┐   ← AreaIcon, Name (Link), SeasonChip (T4)
│ 7 Völker · 1 Achtung · 1 Kritisch                     │
│   ⬡ ⬡ ⬡ ⬡                                              │   Zellen 56 px, verlinken zum Volk
│    ⬡ ⬡ ⬡                                               │
└───────────────────────────────────────────────────────┘
```

- Die Liste behält ihren Hauptknopf „+ Neuer Bienenstand“. Die Karten haben keine eigenen Knöpfe. Der Name führt zum Stand, die Zellen führen zu den Völkern.
- Der Tab „Historie“ bleibt eine `EntityCard`-Liste ohne Wabe.
- Die Legende steht einmal oben über allen Karten.

### 6.3 Zelle

- **Form:** Sechseck mit spitzer Oberseite. Breite (Abstand der senkrechten Seiten) 64 px bei `pointer-coarse`, 56 px bei `pointer-fine`, auf der Liste 56 bzw. 48 px. Höhe = Breite × 2/√3. Der Innenkreis (= Breite) ist immer mindestens 48 px, also mindestens 44 px Trefferfläche.
- **Anordnung:**
  - Reihen mit `n` Zellen. `n = floor((Breite_Container − (b + 4)/2) / (b + 4))`, mindestens 3, höchstens 10.
  - Jede zweite Reihe ist um `(b + 4)/2` nach rechts versetzt und um ein Viertel der Höhe nach oben verzahnt. Abstand 4 px.
  - `n` misst ein `ResizeObserver` (`useContainerWidth`).
  - Reihenfolge nach Volkscode, natürlich sortiert, wie Liste und Runde (Offene Frage 2).
- **Füllung** nach Ampel: Grün `--condition-good`, Gelb `--condition-average`, Rot `--condition-critical`. Text und Icon in `--condition-*-foreground`. Alle drei Flächen haben mindestens 3:1 gegen die Karte (4.4).
- **Inhalt:**
  - oben das Zustands-Icon (16 px; `CheckCircle2`, `AlertTriangle`, `XCircle` wie `StatusLightBadge`)
  - darunter der Volkscode (16 px halbfett; bis 6 Zeichen, länger mit Auslassung, voller Code im Namen)
  - Bei mehr als einem Grund steht ein kleiner Zähler „2“ unten rechts in der Zelle (13 px).
- **Rand = Tage seit der letzten Durchsicht**, in Tinte (`--foreground`), innen gezeichnet, damit die Zelle gleich groß bleibt:

  | Stufe | Bedeutung | ab T4 (mit `inspectionDueOn`) | vor T4 (`INSPECTION_STALE_DAYS = 14`) | Strich | Sonne |
  |---|---|---|---|---|---|
  | 1 frisch | alles gut | Fälligkeit mehr als 3 Tage entfernt, oder Winterruhe (`inspectionDueOn = null`) | höchstens 10 Tage her | 2 px durchgehend | 3 px |
  | 2 bald fällig | bald hin | fällig heute bis in 3 Tagen | 11–14 Tage her | 4 px durchgehend | 5 px |
  | 3 fällig | jetzt hin | Fälligkeit überschritten oder nie durchgesehen | mehr als 14 Tage oder nie | 6 px gestrichelt (6 4), kleines Uhr-Icon oben rechts | 7 px |

  - Ohne `inspections:read` (`inspectionsVisible = false`) gibt es einen 1-px-Rand in `--input` und keine Aussage zur Durchsicht.
  - Die 3-Tage-Grenze ist dieselbe wie „SOON“ in der T4-Rangfolge.
  - Die Funktion `rimStepOf(row, today, inspectionsVisible)` liegt in `src/lib/honeycomb/cell-state.ts`.
- **Zustand „Winterruhe“:** Ab T4 heißt die Rand-Erklärung im Namen „Winterruhe – keine Durchsicht nötig“.

### 6.4 Bedienung

- Jede Zelle ist ein Link zur Volksseite. Tippen öffnet das Volk; es gibt kein Menü und keinen langen Druck.
- Hover (nur `pointer-fine`) hebt die Zelle mit einem 2-px-Rahmen in `--primary-ink` hervor, ohne Bewegung und ohne Größenänderung.
- Kein Ziehen, kein Zoomen. Bei vielen Völkern wächst die Wabe in die Höhe.

### 6.5 Barrierefreiheit

- Semantik: `<ul aria-label="Völker am Stand {Name}">` mit `<li><a>` je Zelle. Die Sechseck-Form ist ein `aria-hidden`-SVG im Link; Text und Icon liegen als HTML darüber.
- Name jeder Zelle (`aria-label`, beginnt mit dem sichtbaren Code, damit Sprachsteuerung funktioniert): „B3 – Achtung: Futter schwach. Letzte Durchsicht vor 16 Tagen.“, ab T4 „… Durchsicht seit 2 Tagen fällig.“
- Tab-Reihenfolge = Codereihenfolge, Zeile für Zeile.
- Zusammenfassung und Legende sind normaler Text. Die aufklappbare Liste ist die Tabellen-Alternative.
- Forced Colors: Fläche `Canvas`, Rand `CanvasText`. Die Stufen bleiben über Strichstärke und Strichelung erkennbar, der Zustand über das Icon.

### 6.6 Fokus in der Zelle

Der Link selbst hat `outline: none` als einzige erlaubte Ausnahme. Stattdessen zeichnet ein zweiter Sechseckpfad 3 px außerhalb der Zelle den Ring in `--ring` (`.comb-cell:focus-visible .comb-focus { stroke: var(--ring) }`, Breite `var(--focus-width)`). Der Wächter-Test führt diese Datei in der Ausnahmeliste.

### 6.7 Leistung

- Ein `<symbol id="comb-hex">` je Seite, jede Zelle nutzt `<use href>`. Keine neue Abhängigkeit.
- Budget: `ApiaryComb` mit allen Teilen höchstens 5 kB gzip. 100 Zellen rendern in unter 30 ms Scripting auf einem Mittelklasse-Handy (Messung mit dem React Profiler bei 4-facher CPU-Drosselung).
- Die Layout-Rechnung `combLayout(count, columns)` ist eine reine Funktion, mit `useMemo`.

### 6.8 Bewegung

Keine Animation. Ändert sich der Zustand nach einem Sync, wechselt die Füllung sofort.

## 7. Mini-Waben auf der Karte

**Frage:** Wo steht welcher Stand, und braucht dort etwas meinen Blick?

### 7.1 Marker

- `L.divIcon({ html: miniCombSvg(summary), className: "stand-marker", iconSize: [48, 52], iconAnchor: [24, 26], popupAnchor: [0, -24] })` ersetzt `L.icon` mit den PNG-Markern. Die Dateien in `public/leaflet/` werden gelöscht.
- `miniCombSvg(summary)` (`src/lib/honeycomb/mini-comb-svg.ts`, reine Funktion, liefert einen SVG-String):
  - Hintergrund-Sechseck (Radius 24) in `--card` mit 2 px Rand in `--foreground`. So hebt sich der Marker von jeder Kachel ab.
  - Darauf eine Rosette aus 7 Zellen (Radius 7): eine Mitte, sechs ringsum.
  - Bis zu 7 Völker sind je eine Zelle, sortiert nach Ampel, das schlechteste in die Mitte. Freie Plätze sind Wachs-Umrisse (`--muted`, Rand `--input`).
  - Bei mehr als 7 Völkern zeigen die Zellen die 7 schlechtesten. Darunter steht ein Zählchip „12“ (13 px fett, `--card` mit Tinten-Rand).
  - Farben über `var(--condition-*)`. Weil das `divIcon` im DOM liegt, ziehen Theme und Sonne ohne Neuaufbau mit.
- Unter dem Marker steht der Standname als Chip (13 px, `--card`, Tinten-Rand), ab Zoomstufe 9. Darunter wird er ausgeblendet, damit sich nichts überlappt.
- Vor dem Laden der Übersicht zeigt der Marker eine einzelne Wachs-Zelle ohne Zahl.

### 7.2 Bedienung

- Tippen oder Enter öffnet das Popup:
  - Standname
  - Zusammenfassung wie in 6.2
  - Knopf „Stand öffnen“ (44 px, `size="touch"`, Umriss)
- Keine Bedienung einzelner Zellen auf der Karte. Sie wären für Handschuhe zu klein.
- Popup im Token-Stil: `.leaflet-popup-content-wrapper`, `.leaflet-popup-tip` mit `--popover`/`--popover-foreground` und Tinten-Rand. Den Schließknopf `.leaflet-popup-close-button` vergrößert ein Pseudo-Element auf 44 px.

### 7.3 Barrierefreiheit und Rückfall

- `L.marker(..., { keyboard: true, title })`. Nach `add` setzt der Code `aria-label` am Marker-Element: „Stand Nordhang: 7 Völker, 1 kritisch, 1 Achtung“.
- Unter der Karte steht die Liste „Stände auf der Karte“ (`<ul>`): Name als Link, Zusammenfassung, „2 Durchsichten fällig“. Sie ist die Alternative zur Karte und hilft auch, wenn die Kacheln offline nicht laden.
- Ohne Netz: Hinweis „Die Karte braucht Internet. Die Stände stehen unten als Liste.“ (`role="status"`).

### 7.4 Dunkel und Sonne

- Dunkel: Die Kachel-Ebene bekommt `filter: brightness(0.8) contrast(1.1)` (`.dark .leaflet-tile-pane`). Keine Farbumkehr, weil invertierte Karten Wasser und Wald falsch färben.
- Sonne: Kacheln unverändert, Marker-Rand 3 px.

### 7.5 Leistung

Ein SVG-String je Stand, gemerkt nach den Ampel-Zählern. Keine neue Abhängigkeit. Leaflet bleibt per `dynamic(..., { ssr: false })` nachgeladen.

## 8. Lebenslinie des Volks

**Frage:** Wie hat sich dieses Volk entwickelt, und was kommt als Nächstes?

### 8.1 Daten

`buildLifeline(input, today)` in `src/lib/colonies/lifeline.ts` ist eine reine Funktion. Sie liefert ein `LifelineModel` mit Zeitachse, Spuren und Ereignissen. `useColonyLifeline(colonyId)` sammelt die Queries; sie nutzen dieselben Keys wie die Karten der Volksseite, also keine Doppel-Requests.

| Spur | Quelle | Key | ab T4 |
|---|---|---|---|
| Lebensbeginn | `Colony.createdAt`, `ColonyHistory.lineageAsResult` | `["colonies", id]`, `["colonies", id, "history"]` | – |
| Stärke (besetzte Waben) | `Inspection.colonyStrength`, `date` | `["colonies", id, "inspections"]` | Obergrenze 40 (T4 4.14) |
| Milben pro Tag | `VarroaMeasurement` mit `method = NATURAL_MITE_FALL` und `calculatedValue`, Dauer aus `durationMinutes` | `["colonies", id, "varroa"]` (Key wie `colony-varroa.tsx`) | `rating.light`, `rating.band.redAbove` (T4 Task 19) |
| Ampel ohne T4 | `varroaLight(rate, threshold)` (T3) | `["varroa", "threshold"]` | entfällt |
| Behandlungen | `Treatment.date`, `endDate`, `product` | `["colonies", id, "treatments"]` | – |
| Königin | `ColonyHistory.queenHistory` (Beginn, Ende), je Königin `markingColor`, `code`, `hatchYear` | `["queens", queenId]` (höchstens 5) | – |
| Ereignisse | Fütterungen, Schwarmkontrollen, Umsetzen (`apiaryHistory`), Ableger/Vereinigung (`lineage*`), Königinwechsel | vorhandene Keys | – |
| Zukunft | offene Aufgaben des Volks mit Termin in den nächsten 21 Tagen, höchstens 3 | `["tasks", …]` | `GET /colonies/:id/next-steps` → `steps[].dueOn`, `title` (höchstens 3) |

- **Einheitswechsel der Stärke:** `colonyStrength` zählt erst seit T3 besetzte Waben, vorher war es eine Skala.
  - Die Konstante `STRENGTH_IN_FRAMES_SINCE` (`lifeline.ts`) ist das Rollout-Datum von T3 Task 9. Es wird beim Bau aus dem Deploy-Protokoll eingetragen.
  - Ältere Werte erscheinen nicht in der Kurve, nur in der Tabelle mit der Einheit „Skala (alt)“.
  - So vermischt die Kurve keine Einheiten.
- **Rechte:** Fehlt ein Leserecht (403), fällt die Spur weg, ohne Fehlermeldung. Das gilt für `inspections:read` (Stärke), `varroa:read` (Milben), `treatments:read` (Behandlungen) und `queens:read` (Königin). Die Kopfzeile nennt nur vorhandene Spuren.

### 8.2 Aufbau

Senkrechte Zeitleiste, oben die Gegenwart, darüber eine schmale Zukunftszone. Handy, 328 px:

```
 Lebenslinie                                   Stärke 0 ─5─10─15─20   Milben/Tag ┆10
 ┌──────┬────┬────┬────────────────────────────┬──────────────┐
 │      │    │ ⬡  │ Durchsicht mit Schwarmk. · 15.05.   (Zukunft, gestrichelt)
 │ heute│━━━━│━━━━│━━━━━━━━━━━━━━━━━━━━━━━━━━━━│━━━━━━━━━━━━━━│
 │ Mai  │ ┃  │ ●  │            ●9               │ ▇▇▇ 2,1      │
 │      │ ┃  │    │         ╱                   │              │
 │      │ ┃  │ 🍴 │      ●6                     │              │
 │ Apr  │ ┃  │    │    ╱                        │ ▇▇▇▇▇▇ 8,4 ▲ │
 │      │ ◉  │ 👑 │  ●4    Königin Q-12 (blau)  │              │
 │ Mär  │    │    │                             │░░░ Behandlung│
 └──────┴────┴────┴────────────────────────────┴──────────────┘
   Monat Königin Ereignisse   Stärke (besetzte Waben)   Milben pro Tag
 ● Q-12 · Schlupf 2025 · blau · seit 20.04.2026
 [ Ganzes Leben zeigen ]   [ Als Tabelle ▾ ]
```

Spalten (Handy / Desktop):

| Spalte | Breite | Inhalt |
|---|---|---|
| Monat | 44 px | Monatsnamen (13 px), Jahreswechsel fett |
| Königin | 16 px | Schiene 4 px in Zeichenfarbe mit 1 px Tinten-Rand für die Amtszeit. Zu Beginn ein Punkt (Radius 6, 2 px Ring in `--foreground`). Ohne Farbe: graue gestrichelte Schiene. |
| Ereignisse | 24 px | Icons 16 px aus `AREAS` in einer Kreiskachel 20 px. Am selben Tag nur ein Icon mit Zähler. |
| Stärke | Rest (≥ 160 px) | Achse 0 bis `max(20, aufgerundet auf 5)` Waben, Raster bei 5er-Schritten gepunktet. Linie in `--foreground`, 2 px. Punkte (Radius 4) je Durchsicht. Fläche unter der Linie `--primary` 18 % (Sonne ohne Fläche). Lücke über 45 Tage: Linie unterbrochen, gestrichelte Verbindung, im Text „keine Durchsicht“. |
| Milben | 64 px (Desktop 96) | Stufenband: je Messung ein Balken über ihre echte Liegezeit (1–7 Tage, mindestens 4 px hoch), Breite ∝ Milben/Tag bis zum Doppelten der Schwelle (darüber ▶). Farbe nach Ampel (`--condition-good/-average/-critical`), dazu Wert als Text bei Gelb, Rot und der letzten Messung. Schwelle: vor T4 eine gestrichelte senkrechte Linie mit Wert im Kopf; ab T4 je Balken ein Strich bei `band.redAbove`, weil die Grenze mit der Jahreszeit wechselt. Behandlungen: schraffierter Hintergrund (`--chart-4` 30 %, 45°-Streifen) von `date` bis `endDate`, Icon `Syringe` in der Ereignisspalte. |

- **Zeitmaß:** 1,6 px je Tag (etwa 48 px je Monat).
- **Standardausschnitt:** die letzten 12 Monate (höchstens seit Lebensbeginn) plus 21 Tage Zukunft.
- „Ganzes Leben zeigen“ schaltet auf die gesamte Lebenszeit. Der Knopftext wechselt zu „Letzte 12 Monate“ (`aria-pressed`).
- **Heute:** waagerechte Linie in `--foreground`, 2 px, über alle Spalten, beschriftet „heute“.
- **Zukunft** (über heute):
  - Höchstens drei Schritte als hohle Sechsecke in der Ereignisspalte, mit Titel und Datum in einer Zeile in der Stärke-Spalte.
  - Die Zukunftszone ist gestrichelt umrandet.
  - Ab T4 sind das `next-steps`, vorher offene Aufgaben.
  - Der Hinweis `withdrawalUntil` (T4) erscheint als Satz unter der Grafik: „Wartezeit bis 20.08.“
- **Wertbeschriftung:** Die Stärke-Kurve beschriftet nur den letzten Wert, den höchsten und den niedrigsten Wert im Ausschnitt sowie Punkte, die mindestens 24 px Abstand haben. So überlappen keine Zahlen.

### 8.3 Platzierung und Bedienung

- **Volksseite:** eigene Karte „Lebenslinie“ direkt unter der T4-Karte „Als Nächstes“, auf dem Desktop in der rechten Spalte oben. Der Hauptknopf der Seite bleibt „Durchsicht erfassen“.
- **Bedienung:** nur zwei Knöpfe, „Ganzes Leben zeigen“ und „Als Tabelle“ (`aria-expanded`). Punkte und Balken sind nicht antippbar; sie wären zu klein für Handschuhe. Details stehen in der Tabelle und in den bestehenden Karten (Durchsichten, Varroa, Behandlungen).
- **Leer:** Ohne Durchsicht und Messung steht dort „Noch keine Durchsicht. Die Lebenslinie wächst mit jeder Durchsicht.“ und der Knopf „Durchsicht erfassen“ als Umriss. Königin und Ereignisse erscheinen trotzdem, falls vorhanden.
- **Laden:** ein Skelett-Block in voller Höhe des Ausschnitts, kein Spinner.
- **Fehler:** `QueryState`-Muster mit „Erneut versuchen“.

### 8.4 Barrierefreiheit

- `<figure>` mit `<svg role="img" aria-labelledby="{titleId} {descId}">`.
- `<title>`: „Lebenslinie {Code}“.
- `<desc>` (aus dem Modell erzeugt, höchstens 4 Sätze):
  1. „Volk B3 seit 12.03.2025.“
  2. „Stärke zuletzt 9 Waben am 02.10., höchstens 14 Waben im Juli.“
  3. „Milben zuletzt 2,1 pro Tag am 28.09. – Gut.“
  4. „Königin Q-12, Schlupf 2025, blau, seit 20.04.2026. 2 Behandlungen in diesem Ausschnitt.“
- „Als Tabelle“ klappt eine `<table>` auf: Spalten Datum | Ereignis | Wert. Je Durchsicht „Durchsicht · 9 besetzte Waben · 5 Brutwaben“, je Messung „Varroa · 8,4 Milben/Tag · Achtung“, je Behandlung „Behandlung Oxuvar · 01.09.–14.09.“, dazu Königin, Fütterung, Umsetzen und Ableger. Die Tabelle stammt aus demselben `LifelineModel` wie die Grafik und hat dieselbe Zeitspanne.
- Zeichenfarbe der Königin immer zusätzlich als Wort („blau“).
- Forced Colors: Linie und Balken in `CanvasText`, Ampel über Text und Schraffur.

### 8.5 Leistung und Bewegung

- Ein SVG, höchstens 600 Knoten für drei Jahre Daten (etwa 150 Durchsichten).
- `buildLifeline` und das Rendern bleiben unter 50 ms Scripting bei 4-facher CPU-Drosselung.
- Komponente höchstens 8 kB gzip, keine Abhängigkeit.
- Keine Animation, kein Aufbau-Effekt.

## 9. Bienenjahr-Rad auf dem Dashboard

**Frage:** Wo stehen wir im Bienenjahr, und welches Arbeitsfenster kommt?

### 9.1 Daten

- **Saisonabschnitte und Kalender:**
  - Vor T4 aus `src/lib/season/season-defaults.ts`. Das sind exakt die T4-Standardwerte (`PHENOLOGY.calendarFallback`: Salweide 03-20, Kirsche 04-15, Apfel 04-28, Holunder 05-30, Linde 06-20, Trachtende 08-01, Herbst 09-15, Winter 11-15; `swarmSeason` Kirsche bis Linde; `SEASON_AUTOPILOT.winterVarroaWindow` 11-15 bis 12-20).
  - Ab T4 kommen sie aus dem Server, damit Änderungen in „Verwaltung > Automatisierung“ auch im Rad ankommen.
- **Additive Erweiterung von `GET /autopilot/today`** (T5-Task am Backend, Recht `colonies:read` wie bisher, keine Geheimnisse):

  ```ts
  interface AutopilotToday {
    // … unverändert aus T4 Task 15 …
    seasons: { apiaryId: string; apiaryName: string; segment: SeasonSegmentKey; phase: PhenologyPhaseKey | null;
      phaseSource: PhaseSourceKey | null;
      segmentSince: string;            // neu, aus SeasonState
      reportedOn: string | null;       // neu
      note: SeasonNote }[];            // neu: 'NO_COORDINATES' | 'WEATHER_GAPS' | 'WEATHER_STALE' | null
    seasonCalendar: {                  // neu, aus readRule(PHENOLOGY) und readRule(SEASON_AUTOPILOT)
      calendarFallback: Record<PhenologyPhaseKey, string>;   // 'MM-DD'
      swarmSeason: { from: PhenologyPhaseKey; until: PhenologyPhaseKey };
      winterVarroaWindow: { from: string; to: string };
    };
  }
  ```

  - Gebaut in `NextStepsService.today` aus `SeasonService.statesFor` (hat `segmentSince` schon) und `readRule`.
  - Fehlen die Felder (älteres Backend), nutzt das Frontend `season-defaults.ts`.
- **Bezugsstand:**
  - Das Rad zeigt den Abschnitt, in dem die meisten aktiven Stände sind.
  - Bei Gleichstand gilt der weiter fortgeschrittene Abschnitt. Lieber eine Durchsicht zu früh als einen Schwarm verpasst (T4 7.3).
  - Abweichende Stände nennt die dritte Zeile im Zentrum: „Südhang: noch Frühjahr“. Bei mehr als einem Stand steht dort „2 Stände weichen ab – siehe Tabelle“.
- **Aufgaben:** offene Aufgaben mit Termin aus der bestehenden Dashboard-Query `["tasks", "dashboard"]`.
  - Je Kalenderwoche ein Punkt.
  - Überfällige Aufgaben bilden einen eigenen Punkt kurz vor dem Zeiger.
  - Vorschläge (T4) zählt das Rad nicht. Sie haben ihre eigene Liste.
- **Modell:** `buildYearWheel(input, today)` in `src/lib/season/year-wheel.ts` (reine Funktion):

  ```ts
  interface YearWheelModel {
    year: number; today: string;
    segments: { key: SeasonSegmentKey; from: string; to: string; source: 'REPORT' | 'GTS' | 'CALENDAR'; current: boolean; estimated: boolean }[];
    windows: { key: 'TRACHT' | 'VARROA_SUMMER' | 'EINWINTERUNG' | 'VARROA_WINTER'; from: string; to: string }[];
    taskWeeks: { weekStart: string; count: number }[]; overdueCount: number;
    reference: { apiaryId: string; apiaryName: string } | null;
    deviations: { apiaryName: string; segment: SeasonSegmentKey }[];
  }
  ```

  - Fenster:
    - Tracht = Salweide bis Trachtende
    - Varroa Sommer = Trachtende bis Herbst
    - Einwinterung = Herbst bis Winter
    - Varroa Winter = `winterVarroaWindow`

    Die Fenster liegen nacheinander und überlappen nicht.
  - Der aktuelle Abschnitt beginnt bei `segmentSince` (gemeldet, geschätzt oder Kalender).
  - Vergangene und künftige Grenzen sind Kalenderwerte mit `estimated = true` und werden gestrichelt gezeichnet.
  - Ist ein Kalenderdatum schon vorbei, der Abschnitt aber noch nicht erreicht (späte Blüte), beginnt der nächste Abschnitt im Rad „ab morgen, noch offen“.
  - Die Winterruhe über den Jahreswechsel wird als zwei Bögen gezeichnet.

### 9.2 Aufbau

Feste Größe 320 × 320 px. Unter 328 px Containerbreite skaliert das Rad mit, Text bleibt dabei mindestens 13 px.

```
                 J
           D  ·  ┃  ·  F                 Monatsinitialen r=150 (13 px)
        N   ╭────┃────╮   M              Außenring r=124, 26 px: Saisonabschnitte
          ╭─╯ ╭──┃──╮ ╰─╮                  aktuell: Honig + Tinten-Rand, sonst --muted
     O   │  ╭─╯     ╰─╮  │   A           Innenring r=96, 10 px: Tracht / Varroa ▨ / Einwinterung
         │  │ HERBST   │  │              Aufgabenpunkte r=78
     S   │  │ seit 15.09.·Kalender │  M  Zentrum r<62: drei Zeilen Text
         │  │ Einwinterung bis ~15.11.│
          ╰─╮ ╰─────╯ ╭─╯              Zeiger: von r=66 bis r=140, 3 px Tinte,
        A   ╰─────⬡───╯   J             am Ende eine Wabenzelle (Honig, Tinten-Rand)
           J           J
 ▬ Tracht   ▨ Varroa-Behandlung   ▬ Einwinterung     ● Aufgabe   ◉ überfällig
 Jetzt: Herbst seit 15.09. (Kalender) · Danach: Winterruhe ab ca. 15.11.
 [ Als Tabelle ▾ ]                                     Zum Kalender →
```

- **Winkel:** Januar oben, im Uhrzeigersinn. `winkel(datum) = 360° × (Tag im Jahr − 1) / Tage im Jahr − 90°`; Schaltjahre werden berücksichtigt.
- **Außenring:**
  - Segmente mit 2 px Lücke in `--card`, Kontur 1,5 px in `--input`.
  - Das aktuelle Segment hat eine Honigfläche und 2 px Rahmen in `--foreground`.
  - Geschätzte Grenzen sind gestrichelt.
  - Keine Beschriftung im Ring: Bei 26 Tagen Frühjahr wäre der Bogen zu kurz für lesbare Schrift. Namen stehen im Zentrum, in der Zeile darunter und in der Tabelle.
- **Innenring:**
  - Tracht in `--chart-3` (voll)
  - Varroa in `--chart-4` mit 45°-Schraffur (zwei Fenster)
  - Einwinterung in `--chart-5` (voll)

  Muster plus Legende, damit die Fenster auch ohne Farbsehen unterscheidbar sind.
- **Aufgabenpunkte:**
  - Radius 3 px (1 Aufgabe), 4,5 px (2–3) bzw. 6 px (4 und mehr), in `--foreground`.
  - Überfällige: ein Punkt in `--condition-critical` mit 2 px Tinten-Ring, 4° vor dem Zeiger.
- **Zentrum:**
  1. Abschnitt (22 px, Space Grotesk halbfett)
  2. „seit {Datum} · {Quelle}“ (14 px; Quelle aus `PHASE_SOURCE_LABELS`: „gemeldet am 18.04.“, „geschätzt“, „Kalender“; bei `note` zusätzlich „Wetterdaten lückenhaft“ bzw. „ohne Koordinaten“)
  3. das laufende Arbeitsfenster mit Ende, oder die Abweichung eines Stands
- **Zeiger:** Linie in `--foreground` mit der Wabenzelle als Kappe. Er steht auf heute und bewegt sich nie animiert.
- **Darunter:** die Legende (eine Zeile, 13 px) und der Satz „Jetzt … · Danach …“.
- **Karte:** Überschrift „Bienenjahr“ (h2). Rechts steht der Textlink „Zum Kalender“ (44 px Trefferfläche) als einzige Aktion; „Als Tabelle“ ist eine Aufklapp-Steuerung.

### 9.3 Dashboard nach T5

Reihenfolge von oben nach unten:

1. **Kopf:** Gruß als `h1` in Tinte auf dem Seitenhintergrund und die Datumszeile, ohne Honigbanner und ohne Weiß auf Honig. Die Honigfarbe gehört allein dem Hauptknopf.
2. **„Als Nächstes“** (T4 aus `/autopilot/today`, offline aus Aufgaben): einziger Honigknopf der Seite.
3. **„Außerdem heute“.**
4. **T4-Karte „Durchsicht fällig“** je Stand.
5. **„Im Blick behalten“** (Meldungen).
6. **„Bienenjahr“** (Rad). Es ersetzt die Kacheln „Überblick“ (Zähler für Stände, Völker, Königinnen, Aufgaben, Honigchargen, Bestand). Die Zähler entfallen ersatzlos:
   - Die Bereiche sind über die Navigation erreichbar.
   - „unter Minimum“ steht schon als Meldung `LOW_STOCK` in „Im Blick behalten“.
   - Die T4-Chips „Saison je Stand“ ziehen in das Zentrum und die Tabelle des Rads.

### 9.4 Barrierefreiheit

- `<svg role="img">` mit `<title>` „Bienenjahr {Jahr}“ und `<desc>`: „Heute, 14.10.: Herbst seit 15.09. nach Kalender. Einwinterung läuft bis etwa 15.11. Danach Varroa-Winterbehandlung 15.11. bis 20.12. Offene Aufgaben mit Termin: 3 in den nächsten 4 Wochen, 1 überfällig.“
- „Als Tabelle“ öffnet zwei Tabellen:
  - Abschnitt | von | bis | Quelle (je Stand eine Spalte, wenn Stände abweichen)
  - Fenster | von | bis

  Dazu kommt die Zeile „Aufgaben je Woche“ für die nächsten 4 Wochen.
- Keine interaktiven Teile im SVG. Die Punkte wären zu klein (eine Woche entspricht etwa 15 px Bogen).

### 9.5 Leistung und Bewegung

- Etwa 150 SVG-Knoten, Rechnung in `useMemo`, höchstens 6 kB gzip, keine Abhängigkeit.
- Keine Animation, auch nicht bei „Voll“. Der Zeiger springt nicht und dreht sich nicht.

## 10. Baukasten durchsetzen

### 10.1 Bausteine

| Baustein | Datei | ersetzt | Stellen heute |
|---|---|---|---|
| Auswahlgruppe `ChoiceGroup` | `components/form/choice-group.tsx` (bleibt) | Ausgang des Winters (`winter-check-dialog.tsx`, Knöpfe mit `aria-pressed`), Linien-Ausrichtung im Etiketten-Designer (zwei Knöpfe), Bewegungsstufe im Profil (native Radio-Karten) | 3; die übrigen der 7 aus der Analyse vom 12.10. hat Paket 0 schon umgestellt |
| Checkbox `Checkbox` + `CheckboxField` | `components/ui/checkbox.tsx` (umgebaut), `components/form/checkbox-field.tsx` (neu) | `ToggleChip` (4 Dateien), native `type="checkbox"` (9 Stellen: Ernte-Dialog, Webhook anlegen/bearbeiten ×3, Aufgabenvorlage, Etiketten-Designer ×2, Aufgabenliste, `harvest-select-field`), Base-UI-Checkbox (3 Dateien), `honey-check` (Heute-Liste) | 4 Varianten, 17 Stellen |
| Tabs `Tabs` | `components/ui/tabs.tsx` (umgebaut) | `TabSwitcher` (2 Seiten), `ActiveHistoryTabs` (9 Seiten, wird Vorlage auf `Tabs`), Statistik (`ui/tabs`) | 3 Varianten, 12 Stellen |
| Plus/Minus `NumberStepper` | `components/form/number-stepper.tsx` (bleibt) | ganzzahlige Zählfelder am Stand (10.5) | 6 Felder |
| Fokus | `globals.css` | 4 Fokus-Varianten in Komponenten | 44 Stellen |
| Bereichs-Icon `AreaIcon` | `components/area-icon.tsx` (neu) | weiße Icons auf Verlauf in `PageHeader`, `DetailHeader`, `EntityCard` | 3 Komponenten, 10 `gradient`-Props |
| Markenzeichen `BrandMark` | `components/brand-mark.tsx` (neu) | `Hexagon` auf Verlauf in Sidebar, Kopfzeile, Login, Herkunft | 4 |

Der Wächter-Test `src/styles/baukasten-guard.spec.ts` prüft die Regeln aus 10.7.

### 10.2 Auswahlgruppe

- **Nicht gewählt:** Fläche `--card`, Rahmen 1 px `--input` (3,9:1), Text 16 px.
- **Gewählt (Antwort):** Fläche `--primary`, Text `--primary-foreground` halbfett, Rahmen 2 px `--foreground`, Haken-Icon (16 px) vor dem Label.
- **Gewählt, „Nicht geprüft“ (`null`):** Fläche `--muted`, Rahmen 2 px gestrichelt `--foreground`, Strich-Icon. Damit bleibt der T3-Gedanke „Nicht geprüft ist gedämpft“, ist aber erkennbar gewählt.
- **Skalen** (`RatingScale`): Die Ton-Fläche (`selectedClassName`) bleibt. Rahmen und Haken kommen dazu; der Haken steht vor der Zahl („✓ 4“).
- **Neues Prop `appearance`:**
  - `"buttons"` (Standard, wie heute Raster)
  - `"cards"`: Option mit Label (16 px) und Beschreibung (14 px), volle Breite, mindestens 56 px hoch; für Darstellung, Bewegung und Ausgang des Winters
- **Neues Feld `ChoiceOption.icon?`:** Lucide-Icon vor dem Label, z. B. beim Ausgang des Winters.
- **Tastatur** bleibt wie heute: ein Tab-Halt, Pfeiltasten, Home und End.
- **Toolbar-Umschalter** im Etiketten-Designer (fett, kursiv) sind keine Auswahlgruppe. Sie bekommen `aria-pressed` und `aria-label` am bestehenden `Button` (Prop `pressed`). Ausnahme im Wächter.
- **Kalender:** Die Tageswahl im Monatsraster bleibt ein Raster aus Tag-Knöpfen mit `aria-pressed` (Ausnahme im Wächter). Sie bekommt nur den globalen Fokus und die neue Auswahl-Optik.

### 10.3 Checkbox

- `ui/checkbox.tsx` (Base UI `Checkbox`):
  - Kästchen 20 px, Rahmen 2 px `--input`, Radius 6 px.
  - Gewählt: Fläche `--primary`, Rahmen `--foreground`, Haken 14 px in `--primary-foreground`, Strichstärke 3.
  - `indeterminate`: Strich-Icon.
  - Deaktiviert: 50 % Deckkraft, Hinweistext am Feld statt nur Grau.
- `CheckboxField` mit `label`, `description?`, `checked`, `onCheckedChange`, `disabled?`, `appearance`:
  - `"row"` (Standard): ganze Zeile klickbar, mindestens 44 px (in Sheets 56 px über `size="sheet"`), Text 16 px
  - `"tile"`: umrandete Kachel wie `ToggleChip`; gewählt mit Honig-Tönung und 2-px-Tinten-Rand; Sonne: `--card` mit Tinten-Rand
  - `"task"`: die Abhak-Zelle der Heute-Liste; die `honey-check`-Animation bleibt als einzige „Moment“-Bewegung, jetzt auf dem Base-UI-Primitiv statt eines eigenen `role="checkbox"`
- `ToggleChip` wird nach der Umstellung gelöscht.

### 10.4 Tabs

- `ui/tabs.tsx` mit einer Variante `segment` (Standard):
  - Leiste in `--muted`, Innenabstand 4 px.
  - Reiter 44 px (`pointer-fine`: 36 px), Text 16 px.
  - Aktiv: Fläche `--card`, Text `--foreground` halbfett, unten ein 3-px-Strich in `--primary-ink`. Der Zustand zeigt sich also über Fläche, Gewicht und Strich, nicht nur über Farbe.
- Base UI liefert `role="tab"`/`tabpanel`, `aria-controls` und Pfeiltasten.
- Die Variante `line` entfällt; die Statistik nutzt `segment`.
- `ActiveHistoryTabs` wird eine Vorlage auf `Tabs` (Props `value`, `onValueChange`, `activeCount`, `historyCount`, `children` je Panel). Die 9 Listen legen ihre Liste in das Panel. `TabSwitcher` wird gelöscht; die beiden Einstellungsseiten nutzen `Tabs` direkt.

### 10.5 Plus/Minus

- Regel: Ein ganzzahliger Zählwert, der typischerweise unter 100 liegt und am Stand erfasst wird, nutzt `NumberStepper`. Messwerte mit Komma (kg, Liter, %) und Einstellungswerte am Schreibtisch nutzen `Input inputMode="decimal"` bzw. `"numeric"`.
- Umstellung, beim Bau je Feld bestätigen:
  - Besetzte Wabengassen in der Einwinterung (`winter-seams`)
  - Milbenzahl in `varroa-edit-dialog` (wie im T3-Neuformular)
  - Weiselzellen in Schwarmkontrolle neu und bearbeiten
  - Entnahme und gezählter Bestand in `stock-card`
  - Startposition im Etikettendruck
- Bleibt Eingabefeld:
  - Wartezeit in Tagen (Einstellwert)
  - Schlupfjahr (Jahreszahl)
  - Mengen in Rohstoffen und Herstellung (Gramm)
  - MFA-Codes
  - Spalten und Zeilen im Etiketten-Designer
  - Werte in Aufgabenvorlagen und Regeln

### 10.6 Fokus für eigene Bedienelemente

Alle eigenen Bedienelemente nehmen den globalen Fokus aus 4.6:
- `ChoiceGroup`, `CheckboxField`, `NumberStepper`
- Tage im Kalender
- `honey-check`
- Wabenzelle (eigener Pfad, 6.6)
- Leaflet-Marker
- Links in Zeilen (`ApiaryColoniesCard`, `TodayRow`)

### 10.7 Wächter-Regeln (`baukasten-guard.spec.ts`)

Der Test durchsucht `src/**/*.tsx` ohne `*.spec.tsx`. Ausnahmen stehen als Liste mit Begründung im Test.

| Regel | Ausnahmen |
|---|---|
| kein `role="radio"`, `role="radiogroup"`, `type="radio"` außerhalb von `choice-group.tsx` | – |
| kein `role="checkbox"`, `type="checkbox"` außerhalb von `ui/checkbox.tsx` | – |
| kein `role="tablist"`, `role="tab"` außerhalb von `ui/tabs.tsx` | – |
| `aria-pressed` nur in `ui/button.tsx` (Prop `pressed`) und `calendar/page.tsx` | Kalender-Tage |
| kein `ring-ring/50`, kein `outline-none` | `honeycomb-cell.tsx` (6.6) |
| kein `text-primary` ohne `-foreground`/`-ink` | – |
| kein `gradient-` und kein `text-white` | `herkunft/[lot]/page.tsx` nur für das Foto-Overlay, falls nötig |
| kein `dark:` | `apiary-map.tsx` (Kachel-Filter, nur in CSS) |
| keine Schriftgröße unter 13 px (`text-[10px]`, `text-[11px]`, `text-[12px]`) | – |
| `PageHeader`, `DetailHeader`, `EntityCard` ohne Prop `gradient` | – (Typfehler) |

### 10.8 Migrationsreihenfolge (Seiten brechen nie)

Jeder Schritt ist ein eigener, grüner Commit des Orchestrators. Lint, Typecheck, `vitest run` und `next build` laufen nach jedem Schritt.

1. **Tokens additiv:**
   - Neue Tokens und Varianten in `globals.css` ergänzen (`-ink`, `area-*`, `queen-*`, `--destructive-foreground`, Sonne-Sätze, `pointer-*`, `sun`). Bestehende Werte bleiben noch.
   - `contrast.spec.ts` prüft schon die neuen Paare.
2. **Darstellung:**
   - Appearance-Modul und Inline-Skript.
   - Profil-Karte „Darstellung“ und Schnellschalter.
   - `next-themes` raus, Toaster umgestellt.
   - Dunkel ist ab hier erreichbar, aber noch mit alten Werten. Darum bleibt der Schalter „Dunkel“ bis Schritt 4 hinter einem Entwicklungs-Flag (`NEXT_PUBLIC_APPEARANCE_DARK=1`).
3. **Codemod Farben** (ein Skript `scripts/codemod-t5-colors.mjs`, Ergebnis per Diff geprüft):
   - `text-primary` → `text-primary-ink`, `text-warning` → `text-warning-ink`
   - Abzeichen-Klassen auf `-ink`
   - `border-primary` bei Auswahl → `border-foreground`
   - Die Honig-Fläche bleibt `bg-primary`.
4. **Tokenwerte umstellen:**
   - Werte aus 4.2 einsetzen, Verläufe entfernen.
   - `ui/button` Standard ohne Verlauf, `dark:`-Klassen aus `ui/*` entfernen.
   - Der Wächter `contrast.spec.ts` wird ab hier hart (alle vier Sätze).
   - Das Entwicklungs-Flag aus Schritt 2 entfällt.
5. **Fokus und Größen:**
   - Globale Fokusregel.
   - Entfernen der Komponenten-Fokusklassen (Codemod), `sm:h-*` → `pointer-fine:h-*`, Schriftgrößen aus 4.5.
6. **`AREAS` und `AreaIcon`:**
   - `nav-config.ts`, `quick-actions.ts`, `PageHeader`, `DetailHeader`, `EntityCard` (Prop `area` statt `gradient`), `BrandMark`, Icon-Abweichungen aus 2.2.
   - Ist T4 Task 17 gemergt: `INTENT_ICONS` aus `AREAS`.
7. **Auswahlgruppe:** neue Optik, `appearance="cards"`, die drei Umstellungen.
8. **Checkbox:** `Checkbox` umbauen, `CheckboxField` neu; dann je Datei umstellen (Formulare zuerst, dann Einstellungen, zuletzt `honey-check`). `ToggleChip` löschen.
9. **Tabs:** `ui/tabs` umbauen, `ActiveHistoryTabs` als Vorlage, die 9 Listen und 2 Einstellungsseiten umstellen. `TabSwitcher` löschen.
10. **Plus/Minus:** Felder aus 10.5.
11. **Wächter:** `baukasten-guard.spec.ts` wird hart.
12. **Manifest und Icons** (12), Service-Worker-Version.
13. **T5b** (Abschnitte 6–9):
    - Wabe auf der Stand-Seite, dann Bienenstände-Liste
    - Marker
    - Lebenslinie
    - Backend-Zusatz `/autopilot/today`, dann Rad und Dashboard-Umbau

Schritte 1–5 berühren viele Dateien mechanisch. Sie laufen in einem kurzen Fenster, in dem keine anderen Frontend-Tasks offen sind (15).

## 11. Icon und Farbe je Bereich

Quelle ist `src/lib/areas.ts`:

```ts
export type AreaTone = 'betrieb' | 'erfassung' | 'arbeit' | 'ernte' | 'neutral';
export interface Area { key: AreaKey; label: string; icon: LucideIcon; tone: AreaTone; href?: string }
export const AREAS: Readonly<Record<AreaKey, Area>>;
```

- `AreaIcon({ area, size })` zeichnet das Icon in einer Wabenzelle (Sechseck, 40 px; in Listen 32 px).
- Die Zelle ist mit dem Bereichston in 14 % getönt und hat 1 px Rand im Ton; das Icon steht im Ton. Sonne: Fläche `--card`, Rand 2 px.
- Die Navigation bleibt neutral (Icons in `--muted-foreground`, aktiv Honig). Bunte Navigationslisten wären Unruhe.
- Der Ton erscheint nur in:
  - `AreaIcon` (Seitenkopf, Detailkopf, Karten)
  - im „+ Neu“-Sheet
  - bei den Ereignis-Icons der Lebenslinie
  - bei den Absichts-Icons der T4-Vorschläge

**Regel:** Ein Bereichston ist nie eine Zustandsfarbe. Rot, Grün und Gelb der Ampel sowie `--destructive` und `--warning` sind für Zustände reserviert.

| Bereich | Schlüssel | Icon (lucide) | Ton | Hinweis |
|---|---|---|---|---|
| Start | `dashboard` | `LayoutDashboard` | neutral | |
| Suche | `search` | `Search` | neutral | |
| Bienenstände | `apiaries` | `MapPin` | betrieb | auch Kartenansicht |
| Völker | `colonies` | `Layers` | betrieb | Beute = gestapelte Zargen; das Sechseck ist der Marke vorbehalten |
| Königinnen | `queens` | `Crown` | betrieb | bisher Salbei-Verlauf von Hand |
| Überwinterung | `winter` | `Snowflake` | betrieb | |
| Pflanzenentwicklung (T4b) | `phenology` | `Flower2` | betrieb | |
| Durchsicht | `inspections` | `ClipboardCheck` | erfassung | |
| Varroa | `varroa` | `Bug` | erfassung | |
| Schwarmkontrolle | `swarm-control` | `Sprout` | erfassung | bleibt, weil schon gelernt (T3) |
| Behandlung | `treatments` | `Syringe` | erfassung | |
| Fütterung | `feedings` | `Utensils` | erfassung | bleibt, weil schon gelernt (T3) |
| Aufgaben | `tasks` | `ListTodo` | arbeit | |
| Kalender | `calendar` | `CalendarDays` | arbeit | bisher Himmel-Verlauf von Hand |
| Vorschläge (T4) | `suggestions` | `Lightbulb` | arbeit | wie T4 Task 17 |
| Meldungen | `notifications` | `Bell` | arbeit | |
| Ernten | `harvests` | `Scissors` | ernte | Detailseite bisher `Boxes` |
| Schleuderungen | `extractions` | `FlaskConical` | ernte | Neu-Seite bisher `Droplet` |
| Honigchargen | `honey-batches` | `Droplet` | ernte | |
| Abfüllungen | `bottling` | `Package` | ernte | |
| Produkte | `products` | `ShoppingBag` | ernte | |
| Rohstoffe | `raw-materials` | `Boxes` | ernte | |
| Herstellungschargen | `production-batches` | `Factory` | ernte | |
| Lager | `storage` | `Warehouse` | ernte | bisher zusätzlich `Package` |
| Inventar | `equipment` | `Wrench` | ernte | bisher Salbei oder Himmel |
| Statistik | `statistics` | `BarChart3` | neutral | |
| Benutzer & Rollen | `users-roles` | `Users` | neutral | |
| Automatisierung | `automation` | `Zap` | neutral | |
| Etikettenvorlagen | `label-templates` | `Tag` | neutral | bisher Himmel |
| Backup | `backup` | `Database` | neutral | |
| Audit-Log | `audit-log` | `History` | neutral | bisher Salbei |
| Profil | `profile` | `UserRound` | neutral | bisher Salbei |

- Eine Seite, die einen anderen Bereich nur erwähnt (z. B. die Schleuderung in der Honigcharge), darf dessen Icon tragen. Ein Icon bedeutet immer seinen Bereich.
- Die öffentliche Herkunftsseite behält ihre eigenen Icons.

## 12. Manifest und Icons

### 12.1 Markenzeichen

- **Form:** eine verdeckelte Wabenzelle.
  - Sechseck mit spitzer Oberseite in Honig (#f0b13f) mit 6 % Rand in Tinte.
  - Darin ein kleineres Sechseck in hellem Wachs (`oklch(0.88 0.11 85)` #f9d280) als Deckel, leicht nach oben versetzt.
  - Es ist bei 16 px als Honig-Sechseck lesbar.
- **Master:** `public/brand/apicore-mark.svg`.
- **App-Icon:** Hintergrund in dunkler Tinte `oklch(0.24 0.035 55)` #2c1b0f, Zelle mittig. Honig auf Tinte hat 8,7:1. Das ist eine Weiterentwicklung des bisherigen Schwarz-Gelb, kein Bruch.
- **`BrandMark`-Komponente:** dieselbe Zelle als SVG (24/32 px) neben dem Schriftzug „ApiCore“ (Space Grotesk). Sie ersetzt `Hexagon` auf Verlauf in Sidebar, Kopfzeile, Login und Herkunftsseite.

### 12.2 Dateien

| Datei | Größe | `purpose` | Inhalt |
|---|---|---|---|
| `public/icon.svg` | skalierbar | any | Zelle auf Tinte, Ecken 22 % gerundet (ersetzt die Balken) |
| `public/icons/icon-192.png`, `icon-512.png` | 192, 512 | any | wie `icon.svg` |
| `public/icons/maskable-192.png`, `maskable-512.png` | 192, 512 | maskable | Tinte randlos, Zelle innerhalb der sicheren Zone (Kreis mit 40 % Radius, also Zelle höchstens 66 % der Kante) |
| `public/icons/monochrome-512.png` | 512 | monochrome | Zellen-Silhouette, weiß auf transparent (Android-Themen-Icons) |
| `public/icons/shortcut-inspection-96.png`, `shortcut-varroa-96.png`, `shortcut-today-96.png` | 96 | – | Bereichs-Icon in Tinte auf Wachs |
| `src/app/apple-icon.png` | 180 | – | Zelle auf Tinte, ohne eigene Rundung (iOS maskiert). Ersetzt `apple-icon.tsx` (Satori-Balken). |
| `src/app/favicon.ico` | 16, 32, 48 | – | Zelle ohne Hintergrund |

- Erzeugt werden die Dateien mit `scripts/generate-icons.mjs` aus dem Master-SVG (`sharp` als devDependency; heute nur transitiv über Next vorhanden). Das Skript ist idempotent. Die Ausgabe wird committet, damit das Docker-Image nicht vom Skript abhängt.

### 12.3 `app/manifest.ts`

```ts
{
  id: "/", name: "ApiCore – Imkereiverwaltung", short_name: "ApiCore",
  description: "Digitale Imkereiverwaltung für Wabenhain", lang: "de", dir: "ltr",
  start_url: "/", scope: "/", display: "standalone",
  background_color: "#f9f4ea",          // = --background hell
  theme_color: "#f9f4ea",               // Statusleiste; dunkel über viewport.themeColor (5.2)
  categories: ["productivity", "business"],
  icons: [ /* any 192/512, maskable 192/512, monochrome 512, icon.svg any */ ],
  shortcuts: [
    { name: "Durchsicht erfassen", short_name: "Durchsicht", url: "/inspections/new", icons: [{ src: "/icons/shortcut-inspection-96.png", sizes: "96x96" }] },
    { name: "Varroa messen", short_name: "Varroa", url: "/varroa/new", icons: [ … ] },
    { name: "Heute", url: "/dashboard", icons: [ … ] },
  ],
}
```

- Die Shortcuts sind Routen der Service-Worker-Shell (T3 Task 15). Sie öffnen also auch offline.
- Ein langer Druck auf das App-Icon führt direkt zur Durchsicht.
- `proxy.ts`: Der `matcher` nimmt `/icons/` und `apple-icon.png` aus, wie heute `icon.svg`.
- `public/sw.js`:
  - `SHELL_ROUTES` bleiben.
  - Die neuen Icons kommen in den Shell-Cache.
  - Die Cache-Version steigt (`apicore-shell-v5`), damit installierte Apps das neue Icon und die neuen Tokens bekommen.

## 13. Tests

TDD wie in T3/T4: erst der fehlschlagende Test, dann der Code. Vitest + RTL im Frontend, Jest/Supertest für den Backend-Zusatz.

### 13.1 Wächter

- **`src/styles/contrast.spec.ts`** (ersetzt `src/lib/forms/rating-contrast.spec.ts`; gleiche OKLCH-Rechnung, ergänzt um Alpha-Mischung für Tönungen):
  - Liest die vier Sätze aus `globals.css`. Die Sonne-Sätze werden auf ihren Grundsatz gelegt.
  - Prüft jede Zeile aus 4.4 mit ihrer Grenze. Dazu kommen alle Ampelflächen (Text auf Fläche ≥ 4,5, Fläche auf Karte ≥ 3, Tinte auf Tönung ≥ 4,5), alle `chart-*` und `area-*` (≥ 3) und alle `queen-*` mit Tinten-Ring.
  - `it('every token in @theme inline exists in light and dark')`: der Wächter für „Dark angeschlossen“.
  - `it('all tokens are inside the sRGB gamut')`.
- **`src/styles/baukasten-guard.spec.ts`:** Regeln aus 10.7.
- **`src/lib/season/season-defaults.spec.ts`:** `it('defaults equal the T4 PHENOLOGY and SEASON_AUTOPILOT defaults')`. Der Test liest die Backend-Datei mit den Config-Standards (`ApiCore-Backend/src/automation/rule-config/*`, genauer Pfad aus T4 Task 1) per `readFileSync` und vergleicht die `MM-DD`-Werte. Ändert jemand nur eine Seite, schlägt der Test fehl.
- **`src/app/manifest.spec.ts`:**
  - Icons für 192/512 „any“ und „maskable“ sind vorhanden.
  - Jede Datei existiert unter `public/` mit der angegebenen Größe (PNG-Kopf lesen).
  - `background_color` und `theme_color` entsprechen dem hellen `--background`.
  - Die Shortcut-URLs stehen in `SHELL_ROUTES`.

### 13.2 Unit

- `appearance.spec.ts`:
  - Standard „Hell“
  - „Wie Gerät“ folgt `matchMedia` und reagiert auf Wechsel
  - `prefers-contrast: more` ohne gespeicherten Wert → Sonne
  - Blockierter Speicher fällt auf den Standard zurück
  - `storage`-Ereignis zieht mit
  - Das Inline-Skript nutzt dieselben Schlüssel (String enthält `APPEARANCE_KEYS`) und setzt `theme-color`
- `areas.spec.ts`:
  - Jeder `NAV_GROUPS`-Eintrag und jede `QUICK_ACTION` hat einen `AREAS`-Schlüssel und dasselbe Icon
  - Kein Ton ist eine Zustandsfarbe
- `honeycomb/layout.spec.ts`:
  - Spaltenzahl aus der Breite (3 bis 10)
  - Versatz jeder zweiten Reihe
  - Verzahnung um ein Viertel der Höhe
  - Reihenfolge nach Code natürlich sortiert (V-2 vor V-10)
- `honeycomb/cell-state.spec.ts` (Tabelle):
  - Randstufen vor T4 (10/11/14/15 Tage, nie)
  - Randstufen ab T4 (fällig in 4 Tagen → 1, in 3 → 2, gestern → 3, `null` → 1 mit „Winterruhe“)
  - ohne `inspections:read` → neutral
  - Name der Zelle beginnt mit dem Code und nennt Ampel, Gründe und Tage
- `mini-comb-svg.spec.ts`:
  - schlechtestes Volk in der Mitte
  - freie Plätze als Umriss
  - mehr als 7 → Zählchip
  - nur `var(--…)`-Farben, kein Hex
- `lifeline.spec.ts`:
  - Werte vor `STRENGTH_IN_FRAMES_SINCE` nicht in der Kurve, aber in der Tabelle
  - Lücke über 45 Tage bricht die Linie
  - Varroa-Balken über die echte Liegezeit
  - `rating.light` (T4) hat Vorrang vor `varroaLight` (T3)
  - Königinnen-Amtszeiten aus `queenHistory`, Farbe aus `markingColor`
  - unbekannte Farbe → gestrichelt
  - Behandlungsspannen
  - Zukunft: T4-Schritte, sonst Aufgaben, höchstens 3
  - fehlende Spur bei 403
  - `<desc>`-Text
- `year-wheel.spec.ts`:
  - Winkel für 01.01., 01.07. und 31.12. im Schaltjahr
  - Winterruhe als zwei Bögen
  - aktueller Abschnitt ab `segmentSince` (Kirsche am 05.04. gemeldet → Schwarmzeit ab 05.04.)
  - späte Blüte → nächster Abschnitt „ab morgen, noch offen“
  - Fenster lückenlos und überlappungsfrei
  - Bezugsstand nach Mehrheit, bei Gleichstand fortgeschrittener
  - Abweichungen
  - Aufgaben je Woche, überfällige gesammelt
  - ohne `seasonCalendar` → `season-defaults`

### 13.3 Komponenten (RTL)

- `ChoiceGroup`:
  - gewählte Option hat `aria-checked="true"`, das Haken-Icon und den Tinten-Rahmen
  - „Nicht geprüft“ gewählt hat das Strich-Icon
  - `appearance="cards"` zeigt die Beschreibung
  - Pfeiltasten wie bisher
- `CheckboxField`:
  - ganze Zeile schaltet
  - Name aus dem Label
  - Zeile mindestens 44 px (Klasse `min-h-11`), im Sheet `min-h-14`
  - `tile` und `task` haben `role="checkbox"` vom Primitiv
- `Tabs`: Pfeiltasten wechseln, Panel ist `tabpanel` mit `aria-labelledby`, `ActiveHistoryTabs` zeigt Zähler.
- `AppearanceSection`: Wahl setzt Klasse und Attribute auf `document.documentElement` und speichert. Schnellschalter im Benutzermenü ist ein `menuitemcheckbox`.
- `ApiaryComb`:
  - Liste mit benannten Links in Codereihenfolge
  - Legende sichtbar
  - „Braucht Blick“ nur mit Gelb und Rot
  - „Alle Völker als Liste“ klappt die T3-Liste auf (`aria-expanded`)
  - leerer Stand
  - offline aus dem Paket
- `ApiaryMap`: Marker mit `aria-label`, Popup mit „Stand öffnen“, Liste unter der Karte, Offline-Hinweis. Leaflet wird gemockt.
- `ColonyLifeline`:
  - `figure` mit Titel und Beschreibung
  - Tabelle aufklappbar mit denselben Einträgen
  - „Ganzes Leben zeigen“ ändert den Ausschnitt
  - Leerzustand mit Knopf
  - fehlende Varroa-Rechte → keine Milbenspalte
- `YearWheel`:
  - Zentrum zeigt Abschnitt, Quelle und Fenster
  - Tabelle aufklappbar
  - „Zum Kalender“
  - Dashboard ohne Zählkacheln und ohne Weiß auf Honig
- Backend `test/next-steps.e2e-spec.ts`: `it('GET /autopilot/today carries seasonCalendar and segmentSince per apiary')`, `it('seasonCalendar follows a changed PHENOLOGY config')`.

### 13.4 Sichtprüfung

- **Screenshot-Matrix:**
  - Werkzeug: Chrome DevTools (MCP `chrome-devtools`: `emulate`, `resize_page`, `take_screenshot`) gegen `npm run build && npm run start` mit Demo-Daten.
  - Seiten:
    - Start, Stand (Wabe), Bienenstände, Karte, Volk (Lebenslinie)
    - Durchsicht neu, Varroa neu, Profil > Darstellung
    - Login, Herkunft
  - Modi: hell, dunkel, Sonne hell, Sonne dunkel.
  - Breiten: 390 px (Touch), 820 px (Tablet, Touch-Emulation, prüft `pointer-coarse`), 1366 px.
  - Dazu `forced-colors: active` und `prefers-reduced-motion: reduce` je einmal auf Start, Stand und Volk.
  - Die Bilder liegen als Anhang am PR, nicht im Repo.
- **Automatisch:**
  - Lighthouse Barrierefreiheit mindestens 95 auf Start, Stand, Volk, Durchsicht neu und Profil, in hell und Sonne.
  - Danach einmal den Impeccable-Detektor über die geänderten Dateien laufen lassen (`impeccable detect --json`); 0 Befunde.
- **Draußen-Test** mit dem Inhaber: Handy, Mittagssonne, Arbeitshandschuhe, eine Hand, je einmal Normal und Sonne. Bestanden, wenn jede Aufgabe ohne Hilfe und ohne Fehlgriff gelingt:
  1. den Hauptknopf auf Start finden und tippen
  2. auf 50 cm Abstand sagen, welches Volk an einem Stand Kritisch ist und welches lange nicht durchgesehen wurde
  3. Brutwaben mit dem Stepper von 0 auf 6 bringen
  4. den Sonnenmodus einschalten
  5. im Rad sagen, welcher Abschnitt gerade ist

  Ergebnis und Zeit je Aufgabe stehen im PR. Ein Fehlschlag führt zu Token- oder Größenänderung, nicht zu neuer Bedienung.

## 14. Aufwand

| Baustein | PT |
|---|---|
| Tokens: vier Sätze, `-ink`-Tokens, Bereichs- und Königinnenfarben, Codemod Farben, `dark:` aus `ui/*`, Kontrast-Wächter | 1,0 |
| Darstellung: Appearance-Modul, Inline-Skript, Profil-Karte, Schnellschalter, `next-themes` raus, Toaster, `theme-color` | 0,5 |
| Fokus und Größen: globaler Fokus, Codemod, `pointer-fine` statt `sm`, Schrift 16 px | 0,5 |
| Baukasten: Auswahlgruppe (0,25), Checkbox mit 17 Stellen (0,5), Tabs mit 12 Stellen (0,5), Plus/Minus (0,25), `AREAS`/`AreaIcon`/`BrandMark` (0,5), Wächter (0,25) | 2,25 |
| Manifest, Icons, Skript, Service-Worker-Version | 0,5 |
| **T5a „Sonnentauglich und Baukasten“** | **4,75** |
| Waben-Standkarte: Layout, Zelle, Stand-Seite, Bienenstände-Liste | 1,25 |
| Mini-Waben-Marker, Popup-Stil, Listen-Rückfall | 0,5 |
| Lebenslinie: Modell, SVG, Tabelle | 1,5 |
| Bienenjahr-Rad: Backend-Zusatz (0,25), Modell, SVG, Tabelle, Dashboard-Umbau | 1,5 |
| Sichtprüfung (Matrix, Draußen-Test), Doku | 0,5 |
| **T5b „Handschrift“** | **5,25** |
| **Summe** | **10,0** |

Der Fahrplan nannte etwa 5 PT. Mehr wird es durch vier Punkte, die §10 nicht einpreist:

1. Der Dunkelmodus ist heute nicht nur unerreichbar, sondern unlesbar (Abzeichen 1,4:1). Er braucht einen vollständigen zweiten Satz, und mit Sonne werden es vier geprüfte Sätze.
2. Checkboxen und Tabs liegen an 29 Stellen, nicht an einer Handvoll.
3. Der Fokus ist an 44 Stellen von Hand gebaut.
4. Tablets bekommen heute Desktop-Größen.

**Vorschlag: zwei Lieferungen.**
- **T5a (≈ 4,75 PT)** bringt den größten Nutzen draußen und hängt nur an T3. Sie kann vor oder parallel zum T4-Backend laufen.
- **T5b (≈ 5,25 PT)** braucht T4a für die vollen Daten, läuft aber auch ohne (Kalender-Rückfall). Falls gekürzt werden muss, lassen sich die Mini-Waben-Marker (0,5 PT) auf später verschieben, ohne dass etwas anderes fehlt.

## 15. Rollout

1. **Reihenfolge:**
   - T3-Frontend Tasks 7, 8, 11 und 14 sind gemergt.
   - Dann T5a Schritte 1–5 (10.8) in einem Fenster ohne offene Frontend-Tasks. Am besten vor den T4-Frontend-Tasks 17–22, damit T4 schon auf dem neuen Baukasten baut (`CheckboxField`, `AreaIcon`, neue Tokens).
   - T5a Schritte 6–12 laufen parallel zum T4-Backend.
   - T5b nach T4a-Frontend (Tasks 17, 18, 19), weil T5b dieselben Dateien berührt (`dashboard/page.tsx`, `apiary-colonies-card.tsx`, Volksseite).
2. **Keine Migration, keine Cluster-Änderung.** T5a ist ein reines Frontend-Image. T5b bringt zusätzlich den Backend-Zusatz an `/autopilot/today` (additiv, alte Frontends ignorieren die Felder). Deploy wie gewohnt, jeder Cluster-Schritt nur mit Freigabe des Inhabers (Rückgrat-Runbook).
3. **Service Worker:**
   - Die Shell-Version steigt (`apicore-shell-v5`). Installierte Apps holen beim nächsten Start Tokens und Icons.
   - Das Icon auf dem Homescreen aktualisiert Android von selbst (kann Stunden dauern). iOS erst nach Entfernen und neu Hinzufügen; das steht im Changelog.
4. **Nutzerhinweis:** Einmalig erscheint auf Start der Hinweis „Neu: Sonnenmodus für draußen – im Benutzermenü.“ mit „Ausprobieren“ und „Schließen“ (gemerkt je Gerät). Danach nicht mehr.
5. **Erste Woche:**
   - Draußen-Test (13.4) mit dem Inhaber.
   - Tokenwerte dürfen danach nur zusammen mit `contrast.spec.ts` geändert werden; der Test hält die Grenzen.
6. **Doku:**
   - ARCHITECTURE bekommt neue Annahmen unter der dann nächsten freien Nummer (T3 und T4 vergeben 22–27 und folgende):
     - „Darstellung je Gerät“: hell, dunkel, Sonne; Inline-Skript; keine Kontodaten
     - „Ein Baukasten“: Bausteine aus 10.1, Wächter, Ausnahmen
   - ARCHITECTURE §2: `AREAS` als einzige Quelle für Icon und Ton, Wabenzelle als einziges Motiv.
   - TASKS.md: Abschnitt T5 mit Haken; Abschnitt R „Redesign“ verweist auf T5.
   - Empfohlen: `ApiCore-Frontend/DESIGN.md` per `/impeccable document` aus dem fertigen Stand erzeugen, damit spätere Seiten den Baukasten finden.

## 16. Offene Fragen an den Inhaber

1. **Farbe des Hauptknopfs.** Heute steht weiße Schrift auf einem Honigverlauf (2,3:1, draußen kaum lesbar).
   - A: Heller Honig (#f0b13f) mit dunkler Tinten-Schrift, 9,4:1. Wirkt wie ein Honigetikett. Links und Icons bekommen ein eigenes dunkles Bernstein.
   - B: Dunkler Bernstein (#9b4900) mit weißer Schrift, 6,1:1. Ein Token für Fläche und Text, dafür eher rostbraun als honigfarben.
   - C: Wie heute (verletzt AA, nicht empfohlen).
   - **Empfehlung: A.** Höchster Kontrast, bleibt in der Sonne lesbar, und die Honigfarbe wird zum Erkennungszeichen des einen Hauptknopfs.

2. **Reihenfolge der Zellen in der Waben-Standkarte.**
   - A: Nach Volkscode, wie Liste und Standrunde.
   - B: Wie die Beuten wirklich am Stand stehen. Dafür gibt es ein neues Feld `Colony.standSlot` mit Migration, Backup-Eintrag und einer Ansicht „Anordnen“ (+1 PT).
   - C: Schlechtestes Volk zuerst.
   - **Empfehlung: A jetzt.** Wer seine Völker nach Platz nummeriert, hat damit schon die echte Reihenfolge. B lohnt erst, wenn die Codes nicht zur Aufstellung passen. C würde die Zellen bei jeder Durchsicht umsortieren und das räumliche Gedächtnis stören.

3. **Standard-Farbschema auf einem neuen Gerät.**
   - A: Hell, Dunkel nur auf Wunsch.
   - B: Wie das Gerät. Ein Handy im Dunkelmodus zeigt die App dann auch draußen dunkel.
   - **Empfehlung: A.** Draußen bei Tag ist hell besser lesbar. Wer abends dunkel will, stellt einmal „Dunkel“ oder „Wie Gerät“ ein, und das Gerät merkt es sich.

4. **Bewegungs-Sprache (neu 2026-10-16, die Rückfrage aus Beute-Spec §12.4).** Wie viel Bewegung bekommt die App außerhalb der Beute?
   - A: Wie §17. Die App bleibt ruhig, die Beute ist die eine Bühne. Bewegung zeigt nur, woher etwas kommt, was weg ist und was geklappt hat. Das Abhaken bleibt der eine Moment.
   - B: Mehr Bewegung in der ganzen App: Karten heben sich, Zahlen zählen hoch, Seitenwechsel mit gleitenden Übergängen (View Transitions). Draußen kostet das Lesezeit und Akku.
   - C: Keine Bewegung außerhalb der Beute, auch kein Gleiten der Sheets.
   - **Empfehlung: A.** Hält die Beute als Höhepunkt und die Arbeit am Stand schnell. Die Stufe „Voll“ bleibt Standard; wer am Stand Ruhe will, stellt „Dezent“ ein.

## 17. Bewegungs-Sprache

Nachtrag 2026-10-16. Anlass: Die Beute (Spec `2026-10-15-beute-3d-design.md` §9.3, §9.8, §12.4) ist auf Wunsch des Inhabers stark animiert: Glas-Holo, Flug in den Fokus, Heben der Rähmchen, Federn. Die übrige App soll sich wie dieselbe App anfühlen. Dieser Abschnitt ersetzt die Regel „Keine neue Animation“ aus §1. Bestätigung durch den Inhaber: Frage 4 in §16.

### 17.1 Zweck

Draußen am Stand hat der Imker Sonne auf dem Display, Handschuhe an und eine Hand frei. Bewegung hat dort genau drei Aufgaben:

1. **Herkunft zeigen:** Ein Sheet kommt von seiner Kante, ein geöffnetes Teil fliegt aus seinem Stapel. Man sieht, wo man ist.
2. **Veränderung zeigen:** Eine Zeile geht weg, die anderen rücken nach. Man sieht, was sich geändert hat.
3. **Erfolg bestätigen:** Der Haken zeichnet sich, der Knopf gibt beim Drücken nach. Man weiß, dass der Tipp angekommen ist, auch mit Handschuh.

Bewegung schmückt nie und hält nie auf. Kein Ziel wartet auf eine Animation, und keine Zahl bewegt sich, während jemand sie liest.

### 17.2 Stufen

Es gilt die bestehende Bewegungsstufe je Gerät (`apicore.motion`, §5.1). Die Wörter in der Oberfläche heißen überall „Voll“, „Dezent“ und „Aus“ (die Beute-Spec nennt „Dezent“ an einer Stelle „ruhig“).

| Stufe | Wann | Ortswechsel (Gleiten, Fliegen, Heben, Nachrücken) | Zustandswechsel (Deckkraft, Farbe) | Ruhebewegung (Beute schwebt, Pegel wogt, Puls) |
|---|---|---|---|---|
| `full` „Voll“ | Standard, solange das System nicht reduziert | an, mit den Tokens aus 17.3 | an | an, nur sichtbar und im Vordergrund-Tab |
| `subtle` „Dezent“ | gewählt, **oder** „Voll“ plus `prefers-reduced-motion: reduce` | aus, Dinge stehen sofort am Ziel | Überblendung `--motion-fade` (150 ms) | aus |
| `off` „Aus“ | gewählt | aus | sofort (globale Regel in `globals.css`) | aus |

- **Eine Quelle für JavaScript:** `useEffectiveMotionLevel()` aus `src/lib/motion/motion-preference.ts`. Den Hook nutzt die Beute schon (`hive-canvas.tsx`, `hive-visual-slot.tsx`). Er verbindet die gewählte Stufe mit `prefers-reduced-motion` und reagiert sofort auf beides. Ab §5 setzt das Inline-Skript `data-motion` vor dem ersten Bild. `useAppearance().setMotion` löst dabei weiter `MOTION_EVENT` aus, damit Szene und DOM sofort mitziehen.
- **Eine Quelle für CSS:** die Variante `motion-full:` (gibt es schon in `globals.css`). Jede Verschiebung, Skalierung oder Drehung steht hinter `motion-full:`. `motion-safe:` fragt nur das System und übergeht die Stufe in der App; für Ortswechsel ist es darum verboten. Farb- und Deckkraft-Übergänge brauchen keine Variante, weil „Aus“ ihre Dauer global auf null setzt.
- **`motion` (`motion/react`):** Ein `AppMotion`-Rahmen im `(app)`-Layout setzt `MotionConfig` je Stufe. Bei `full` steht `reducedMotion` auf `"never"`, weil der Hook das System schon einrechnet. Bei `subtle` steht es auf `"always"`: Dann laufen nur Deckkraft und Farbe. Bei `off` gilt `transition={{ duration: 0 }}`.
- **Sonne ändert keine Bewegung.** Sonne betrifft nur Kontrast und Größen. Das Umschalten von Farbschema, Kontrast und Stufe wirkt sofort und ohne Übergang (§5.3).

### 17.3 Tokens

Die Werte kommen aus dem, was die Beute schon ausliefert, und aus den bestehenden CSS-Bewegungen. Darum fühlen sich Bühne und App gleich an. CSS-Variablen stehen in `globals.css` (`:root`). Den Spiegel in TypeScript liefert `src/lib/motion/tokens.ts`. Die Beute liest ihre Feder und ihre Überblendung künftig aus dieser Datei (`quality.ts`, `use-hive-motion.ts`), damit es nur eine Quelle gibt.

| Token | Wert | Herkunft | Verwendung |
|---|---|---|---|
| `--motion-fade` | 150 ms | `SUBTLE_FADE_SECONDS` (Beute), Overlay der Sheets | jede Überblendung, jeder Austritt, alle Wechsel bei „Dezent“ |
| `--motion-enter` | 200 ms | `ui/sheet.tsx` (200 ms) | Eintritt von Sheet, Dialog, Popover, Menü, Seite und neuer Listenzeile |
| `--motion-settle` | 350 ms | `DAMPING = 12` (Beute: nach 350 ms in Ruhe) | Ortswechsel ohne Feder: Zurückfedern, Aufklappen eines Abschnitts |
| `--motion-moment` | 420 ms | `.honey-check` (Wabe füllt sich) | der eine Moment: Abhaken |
| `--ease-out-expo` | `cubic-bezier(0.16, 1, 0.3, 1)` | Bestand in `globals.css` | alle Eintritte, der Moment |
| `--ease-in` **neu** | `cubic-bezier(0.4, 0, 1, 1)` | – | alle Austritte (schneller weg als da) |
| `--ease-spring` **neu** | `linear(…)`, aus der Feder unten erzeugt | `SPRING_STIFFNESS 210`, `SPRING_DAMPING 21` (`quality.ts`, Dämpfungsgrad ≈ 0,72, in Ruhe nach ≈ 0,5 s) | CSS-Ortswechsel mit leichtem Überschwingen, Dauer 500 ms |
| `SPRING_FLIGHT` (TS) | `{ type: "spring", stiffness: 210, damping: 21, mass: 1 }` | dieselbe Feder | `motion`: Nachrücken (`layout`), Loslassen nach dem Ziehen |
| `--motion-shift` **neu** | 8 px | Beute hebt ein Teil 8 mm, `next-step-in` 8 px | Weg beim Eintritt von Inhalt (Seite 6 px bleibt) |
| Sheet-Weg | 2,5 rem | Bestand `ui/sheet.tsx` | Sheet gleitet von seiner Kante |

**Grenzen:**
- Kein DOM-Übergang dauert länger als `--motion-moment` (420 ms).
- Ausnahmen gibt es nur zwei:
  - die Beute-Bühne (Federflug ≈ 0,5 s, Ruhebewegung)
  - das Wegfalten der Heute-Zeile nach dem Abhaken (`EXIT_DELAY_MS.full = 720`). Gespeichert ist dort sofort, „Rückgängig“ steht im Toast.
- Austritte sind nie länger als `--motion-fade`.

### 17.4 Regeln je Muster

| Muster | Voll | Dezent | Werkzeug |
|---|---|---|---|
| **Seite** (Routenwechsel) | Eintritt: Deckkraft 0 → 1 und 6 px nach oben, `--motion-enter`, `--ease-out-expo`. Kein Austritt: Die alte Seite verschwindet sofort, die Navigation wartet nicht. | nur Deckkraft, `--motion-fade` | CSS `animate-page-in` (`page-transition.tsx`, Dauer heute 260 ms → Token) |
| **Sheet, Dialog, Popover, Menü** (öffnen, schließen) | Sheet gleitet 2,5 rem von seiner Kante, Dialog und Popover blenden mit `scale(0.97 → 1)` ein; Eintritt `--motion-enter` mit `--ease-out-expo`, Austritt `--motion-fade` mit `--ease-in` auf demselben Weg zurück; Hintergrund nur Deckkraft. Der Fokus springt beim Öffnen sofort hinein, nicht erst nach der Animation. Beim Auf- oder Zugehen der Bildschirmtastatur bewegt sich das Sheet nicht. | nur Deckkraft | CSS über `data-starting-style`/`data-ending-style` von Base UI (Muster steht in `ui/sheet.tsx`). Dialog heute 100 ms, Sheet heute `ease-in-out` → Tokens. |
| **Listenzeile hinzu** (durch den Nutzer: Eintrag gespeichert, Zeile ergänzt) | nur die neue Zeile: Deckkraft und `--motion-shift`, `--motion-enter`. Kein Stagger, kein Einblenden beim Laden einer Liste. Daten stehen sofort da. | Deckkraft, `--motion-fade` | CSS (`animate-in` aus `tw-animate-css` oder `@starting-style`) |
| **Listenzeile weg** | Zeile blendet aus (`--motion-fade`), die übrigen rücken mit `SPRING_FLIGHT` nach. Das läuft über `transform` (`layout`), nicht über die Höhe. | Zeile blendet aus, der Rest steht sofort am Ziel | `motion`: `AnimatePresence` und `m.li layout`. Gilt für Heute-Liste, Aufgaben, Warteschlangen-Sheet und Sprachnotizen. |
| **Umsortieren** | `layout` mit `SPRING_FLIGHT` | sofort | `motion` |
| **Abschnitt auf/zu** (Aufklapp-Karten, „Als Tabelle“) | Pfeil dreht sich (`--motion-settle`). Der Inhalt erscheint sofort, ohne Höhen-Animation. | Pfeil springt | CSS `motion-full:transition-transform` (Bestand, bisher `motion-safe:`) |
| **Erfolg, Bestätigung** | **Abhaken** ist der eine Moment: Wabe füllt sich (`--motion-moment`), Haken zeichnet sich, Zeile faltet weg. **Speichern** endet mit Toast und Navigation; kein Konfetti, kein Knopf, der seine Form ändert. **Knopf-Druck:** Fläche wechselt sofort, bei Voll zusätzlich `scale(0.97)` beim Drücken, 100 ms. | Wabe und Haken blenden in 120 ms (Bestand), Knopf ohne Skalierung | CSS (`.honey-check`, `ui/button.tsx` `motion-full:active:scale-[0.97]`) |
| **Fokuswechsel** | Der Fokusring erscheint sofort und wird nie animiert. Programmatischer Fokus (erstes Fehlerfeld, geöffnetes Sheet, Live-Region) springt. Scrollen dorthin ist `smooth` nur bei Voll und bei weniger als einer Bildschirmhöhe, sonst sofort. Auf der Beute-Bühne fliegt die Kamera mit (Beute §9.4). | Scrollen sofort | `scrollBehaviorFor(level, distance)` in `src/lib/motion/tokens.ts` |
| **Laden, Skelett** | Das Skelett erscheint erst nach 150 ms, damit kurze Ladezeiten nicht blitzen. Pulsieren nur bei Voll (Deckkraft, 2 s). Spinner nur in Knöpfen ab 300 ms Wartezeit und immer mit Wort („Speichert …“). | Skelett ruhig; der Spinner wird ein ruhendes Icon mit Wort | CSS `motion-full:animate-pulse`, `motion-full:animate-spin` (bisher `motion-safe:`) |
| **Läuft gerade** (Aufnahme, Synchronisieren) | Punkt pulsiert (Deckkraft) | ruhiger Punkt; das Wort („Aufnahme läuft“) trägt den Zustand | CSS |
| **Hover** (nur `pointer-fine`) | nur Farbe und Rahmen, keine Verschiebung im DOM. Das Heben der Karten (`ui/card.tsx`) und das Vergrößern der Icons in der Seitenleiste entfallen. Auf der Beute-Bühne hebt sich das Teil (Beute §9.4), weil es dort zeigt, was der nächste Klick öffnet. | Farbe | CSS |
| **Wabenmotiv** | Die Wabenzelle bewegt sich nur an zwei Stellen: beim Abhaken (`.honey-check`) und auf der Beute-Bühne. Waben-Standkarte, Mini-Waben, Rad, Lebenslinie, `BrandMark` und `AreaIcon` stehen still (6.8, 8.5, 9.5 bleiben). Ein Ladezeichen in Wabenform gibt es nicht. | – | – |
| **Toast** | Sonner-Standard (gleitet), Dauer und Kurve auf die Tokens | ohne Gleiten, nur Deckkraft | CSS-Überschreibung an `[data-sonner-toaster]`, falls Sonner das nicht selbst tut |

### 17.5 Was nie animiert

- **Datenwerte, die der Imker liest:**
  - Zahlen, Ampeln, Zählungen, Balken, Kurven, Zellfüllungen, der Rad-Zeiger und die Zahl im Pegel-Etikett.
  - Nichts zählt hoch, kein Balken wächst, keine Linie zeichnet sich.
  - Ein neuer Wert nach dem Sync steht sofort da.
  - Bestand, der das verletzt: `stat-bar-list.tsx` (`transition-[width] duration-700`) verliert den Übergang.
  - Auf der Beute-Bühne wogt die Oberfläche des Pegels; seine Zahl springt.
- **Fehler und Warnungen:**
  - Feldfehler, `role="alert"`, Warn- und Sperr-Hinweise (Sperrbezirk, Wartezeit, 409) erscheinen sofort.
  - Kein Schütteln, kein Einblenden, kein verzögertes Erscheinen.
- **Während der Eingabe am Stand:**
  - Das Feld selbst, die Zahl im Stepper (keine rollenden Ziffern), die Umgebung des fokussierten Felds.
  - Nichts verschiebt sich, kein Toast legt sich über Feld oder Speichern-Leiste, nichts leitet von selbst weiter.
  - Eine Diktat- oder Sprachnotiz-Aufnahme bewegt nur ihren Status-Punkt.
- **Fokusring, Sonne an/aus, Farbschema, Druck und PDF.**
- **Warten:**
  - Kein Ziel ist während eines Eintritts gesperrt (`pointer-events` bleiben an).
  - Kein Klick wartet auf einen Austritt.
  - Einzige gewollte Verzögerung ist das Wegfalten der Heute-Zeile (17.3).

### 17.6 Leistung

- **Nur `transform` und `opacity`** bewegen sich.
  - Für Zustandswechsel kommen Farbe (`color`, `background-color`, `border-color`, `fill`, `stroke`) und `clip-path` dazu (`.honey-check`).
  - Nie animiert werden `width`, `height`, `top`, `left`, `margin`, `padding`, `grid-template-rows`, `box-shadow`, `filter` und `backdrop-filter`.
  - Bestand, der das verletzt:
    - `.today-row` faltet über `grid-template-rows` → `motion` `layout` (17.4)
    - `next-step-in` animiert `filter: blur(6px)` → nur Deckkraft und `--motion-shift`
    - `stat-bar-list` animiert die Breite → ohne Übergang
- **Kein `transition-all`:** Die Übergänge nennen ihre Eigenschaften (`transition-colors`, `transition-[opacity,transform]`). Heute gibt es 8 Stellen, 7 davon in `ui/*`.
- **Kein Layout-Thrash:**
  - Keine Messung (`getBoundingClientRect`, `offsetHeight`) in einem Animationsschritt.
  - `motion` misst bei `layout` einmal zu Beginn und bewegt dann per `transform`.
  - Kein React-State pro Bild. DOM-Bewegung läuft über CSS oder über das WAAPI von `motion`.
- **`will-change`** setzt nur `motion` selbst, nie dauerhaft in CSS. `backdrop-blur` nur auf ruhenden Flächen, in Sonne gar nicht (§4.3).
- **Ziel:** 60 fps auf einem Mittelklasse-Handy. Gemessen wird mit einem Performance-Trace bei 4-facher CPU-Drosselung und 390 px. Bei Sheet auf/zu, Abhaken mit Wegfalten, Zeile entfernen und Seitenwechsel ist kein Frame länger als 32 ms, und während der Bewegung gibt es keinen Layout-Eintrag außer der einen `layout`-Messung.
- **Bundle:**
  - `motion` nur über `LazyMotion` mit `strict`. Elemente kommen als `m.*` aus `motion/react-m`, die Features (`domMax` wegen `layout`) asynchron.
  - Geladen wird nur im `(app)`-Layout, nicht auf Login und Herkunft.
  - Budget: höchstens 30 kB gzip, im Build gemessen wie das 3D-Budget.
  - Die three.js-Szene nutzt `motion` nicht (eigene Federn in `use-animated-node.ts`).

### 17.7 Abnahme

1. **Wächter** (`src/styles/baukasten-guard.spec.ts`, Regelgruppe „Bewegung“, Ausnahmen mit Grund):
   - kein `motion-safe:` vor `translate`, `scale`, `rotate`, `slide-`, `zoom-`, `animate-` (→ `motion-full:`)
   - kein `transition-all`
   - kein `transition-[width|height]` und kein `duration-` über 420 ms (Ausnahme `components/hive/**`)
   - `hover:` mit `translate` oder `scale` nur in `components/hive/**`
   - `motion/react` liefert nur `LazyMotion`, `MotionConfig`, `AnimatePresence` und Hooks; Elemente nur als `m.*`
   - Keyframes und Übergänge in `globals.css` animieren keine Eigenschaft aus der Verbotsliste in 17.6 (der Test liest die Datei)
2. **Tokens** (`src/lib/motion/tokens.spec.ts`):
   - Die CSS-Variablen entsprechen den TS-Konstanten.
   - `SPRING_FLIGHT` hat dieselben Werte wie die Feder der Beute (eine Quelle).
   - Die Stützpunkte von `--ease-spring` weichen höchstens 0,02 von `springStep` ab.
3. **Komponenten:**
   - `AppMotion` setzt `reducedMotion` je Stufe.
   - Bei „Aus“ ist eine entfernte Zeile sofort weg, bei „Dezent“ ohne Verschiebung.
   - `scrollBehaviorFor` liefert `smooth` nur bei Voll und kurzer Strecke.
4. **Browser** (Chrome DevTools):
   - Jedes Muster aus 17.4 einmal in Voll, Dezent und Aus, dazu `prefers-reduced-motion: reduce` per `emulate`.
   - Bei Dezent und bei reduce verschiebt sich nichts, bei Aus geht alles sofort.
   - Dazu der Performance-Trace aus 17.6.
5. **Draußen-Test** (13.4) bekommt Aufgabe 6: eine Aufgabe mit Handschuh abhaken. Bestanden, wenn der Haken gesehen wird und niemand auf die Liste wartet.
6. **Review:** einmal `review-animations` bzw. `fixing-motion-performance` über den Diff (Skill-Routing: erst Konzept, dann CSS, dann `motion`, GSAP nicht).

### 17.8 Beute-Bühne im T5-Rahmen

- Die Bühne ist eine eigene, immer dunkle Fläche mit eigenen Tokens (`--holo-*`).
  - Nur hier gibt es Glas, Leuchten, Milchglas-Elemente und Ruhebewegung.
  - §3.6 und die Verbotsliste gelten außerhalb der Bühne. Wächter-Ausnahmen gelten nur für `components/hive/**` und `app/(app)/colonies/[id]/hive/**`.
- Bewegung auf der Bühne folgt Beute §9.8. Die Werte stammen aus denselben Tokens (17.3).
- Fokus auf der Bühne: Der Ring aus §4.6 in `--primary-ink` hat auf `--holo-bg` weniger als 3:1. Deshalb setzt ein Rahmen `.holo-stage` `--ring: var(--holo-edge-strong)`. `contrast.spec.ts` prüft das Paar (≥ 3) und die Etiketten `--holo-label-fg` auf `--holo-label-bg` (≥ 7).
- **Sonne:**
  - `--holo-*` bekommt Sonne-Sätze (Bühne schwarz, Kanten reinweiß).
  - Die Szene liest die Tokens beim Wechsel der Darstellung neu ein; heute geschieht das einmalig in `hive-scene/theme.ts`.
  - Ohne Bloom, Kanten 2 px, Rähmchen-Arten als Schraffur, Etiketten 16 px (Beute §9.3).