docs: README, Design-Dokumentation, Changelog und Seed

README mit Installation, Update-Weg und Backup-Anleitung; docs/DESIGN.md
hält Marke, Farbwerte samt gemessener Kontraste und die Bausteine fest.
Changelog nach Keep a Changelog, Release-Notes zusätzlich unter releases/.

docs/DESIGN.md

@@ -0,0 +1,122 @@
+# Flimmer — Design-Sprache
+
+Diese Datei hält fest, warum die Oberfläche aussieht, wie sie aussieht, und
+welche Werte dabei gelten. Sie ist die Referenz für alles, was später dazukommt.
+
+## Idee
+
+Der Name kommt von der **Flimmerkiste** und vom warmen Flimmern eines
+Bildschirms im abgedunkelten Zimmer. Genau das trägt die Gestaltung: ein sehr
+dunkler, blauvioletter Raum, in den ein warmes Licht fällt. Alles Farbige in
+der Oberfläche ist dieses Licht — es gibt keine zweite, konkurrierende
+Signalfarbe.
+
+## Marke
+
+| Variante | Datei | Einsatz |
+|---|---|---|
+| Bildmarke | `public/brand/flimmer-icon.svg` | App-Icon, Favicon, Avatare |
+| Bildmarke + Wortmarke | `public/brand/flimmer-logo.svg` | Header, Login, README |
+| Monochrom | `public/brand/flimmer-mono.svg` | Druck, E-Mail-Footer, Prägung |
+| Maskable | `public/brand/flimmer-icon-maskable.svg` | Android-Startbildschirm |
+| Wortmarke allein | `public/brand/flimmer-wordmark.svg` | Sonderfälle |
+
+Die Bildmarke ist ein abgerundetes Bildschirm-Rechteck mit weichem, warmem
+Glühen und einem Play-Dreieck; der angedeutete Standfuß macht daraus die
+Flimmerkiste. Die **Wortmarke ist aus Pfaden konstruiert** (geometrische, leicht
+gerundete Sans, Versalhöhe 90, x-Höhe 54, Strichstärke 15, runde Abschlüsse) —
+sie braucht damit keine installierte Schrift und sieht überall identisch aus.
+
+Im UI liegt die Marke als React-Komponente vor
+(`src/components/brand/FlimmerLogo.tsx`). Die Verläufe stehen einmalig in
+`<BrandDefs />` im Root-Layout; alle Instanzen referenzieren sie. Rasterdateien
+(Favicon, PWA-Icons, OG-Bild) sind reine Ableitungen und entstehen mit
+`npm run icons`.
+
+## Farbwelt
+
+Die Signaturfarbe ist kein einzelner Ton, sondern ein **Verlauf von Bernstein
+nach Magenta**. Er trägt Buttons, Fortschrittsbalken, aktive Navigation und das
+Glühen des Logos.
+
+### Dunkel (Standard)
+
+| Rolle | Wert | Kontrast auf Grund |
+|---|---|---|
+| Grund | `#0c0a14` | — |
+| Karte | `#171424` | — |
+| Rahmen | `#2e2745` | 1,4:1 (dekorativ) |
+| Text | `#f4f1fa` | **17,0:1** |
+| Text gedämpft | `#aca5c2` | **7,7:1** |
+| Text zurückhaltend | `#7c7594` | **4,6:1** |
+| Bernstein | `#ffb454` | **11,3:1** |
+| Magenta | `#ff4d9d` | **6,0:1** |
+| Text auf dem Verlauf | `#1a1024` | min. **5,5:1** (am Magenta-Ende) |
+
+### Hell
+
+| Rolle | Wert | Kontrast auf Grund |
+|---|---|---|
+| Grund | `#faf7f5` (warmgrau) | — |
+| Karte | `#ffffff` | — |
+| Text | `#1b1524` | **16,2:1** |
+| Text gedämpft | `#5b5268` | **6,7:1** |
+| Text zurückhaltend | `#766c84` | **4,6:1** |
+| Akzent als Text | `#8a4b00` | **6,4:1** |
+| Akzent-Alternative | `#b01262` | **6,4:1** |
+| Text auf dem Verlauf | `#23122c` | min. **6,1:1** |
+
+Damit erfüllt jede Text-/Hintergrund-Kombination **WCAG AA**.
+
+### Zwei Verläufe, nicht einer
+
+Der vollfarbige Verlauf funktioniert im Dunkeln überall — auf hellem Grund
+verschwindet sein Bernstein-Ende jedoch. Deshalb gibt es zwei Tokens:
+
+- `--fl-gradient` — Flächen (Buttons, Fortschritt, Glühen). In beiden Themes
+  vollfarbig, weil darauf immer dunkler Text (`--fl-on-accent`) sitzt.
+- `--fl-gradient-ink` — **Text** und feine Linien. Im Dunkeln identisch, im
+  Hellen abgedunkelt auf `#8a4b00 → #b01262`, damit AA gilt.
+
+Analog dazu die Logo-Stops `--fl-brand-1/2/3`: im Hellen tiefer angesetzt
+(`#c26a00 → #c9186f`), damit die Wortmarke auf warmem Weiß lesbar bleibt, ohne
+die Bewegung von Bernstein nach Magenta aufzugeben.
+
+## Tokens
+
+Alle Werte liegen als CSS-Variablen `--fl-*` in `src/app/globals.css` und werden
+über `@theme inline` an Tailwind durchgereicht. Ein Theme-Wechsel setzt nur das
+Attribut `data-theme` am `<html>`-Element; ein Inline-Skript im Layout tut das,
+bevor der erste Pixel gemalt wird, damit nichts aufblitzt.
+
+Ein zusätzliches Theme braucht daher genau einen neuen Selektor-Block mit
+denselben Variablennamen — keine Änderung an Komponenten.
+
+## Bausteine
+
+| Klasse | Zweck |
+|---|---|
+| `.fl-card` | Karte: halbtransparent, weicher Rahmen, Rückenunschärfe |
+| `.fl-poster-card` | Posterkachel mit sanftem Aufglimmen beim Hover |
+| `.fl-btn` + `.fl-btn-primary` / `.fl-btn-ghost` | Schaltflächen |
+| `.fl-input` | Eingabefelder samt Fokusring im Magenta |
+| `.fl-progress` | Fortschrittsbalken im Signaturverlauf |
+| `.fl-glimmer` | Mikro-Animation beim Abhaken einer Episode |
+
+## Bewegung
+
+Ruhig und kurz: 200–420 ms, `cubic-bezier(0.22, 1, 0.36, 1)`. Keine harten
+Blitze — beim Abhaken einer Episode glimmt die Zeile einmal warm auf und
+verklingt. `prefers-reduced-motion: reduce` schaltet sämtliche Übergänge ab.
+
+## Typografie
+
+**Outfit** — geometrisch, leicht gerundet, passt zur Wortmarke. Wird beim Bauen
+heruntergeladen und mit ausgeliefert; die laufende Instanz fragt nie bei Google
+an. Rückfallkette: Inter, dann System-Sans.
+
+## Grundhaltung
+
+Posterlastig und filmisch: großzügige Poster, abgerundete Ecken, weiche
+Verläufe statt harter Linien. Farbe ist knapp und bedeutet etwas — der Verlauf
+markiert, was gerade dran ist. Der Rest bleibt im Dunkeln.