Reskin auf Pinterest-Desktop-Optik, Funktionen unveraendert

Vorlage ist die Pinterest-Web-App. Geaendert wurde ausschliesslich die
Gestaltung: state, Tastaturkuerzel, deck/flash/commit/undo, die
Drag-Handler und die Beispieldaten sind Byte-fuer-Byte identisch.

- Hell statt dunkel: weisser Grund, Text #111, roter Akzent #e60023
  statt Mint auf Tannen-/Weinrot-Verlauf
- Sidebar (236px, beschriftet) wird zur 80px-Icon-Rail, Einstellungen
  sitzt unten; Zustaende ueber .rail/.rail.active statt inline, weil die
  dc-Laufzeit style-hover mit !important setzt und den aktiven Button
  sonst beim Hover aufhellt
- Kopfzeile bekommt das Pinterest-Suchfeld (Pille, 48px) plus Konto;
  Tabs wandern in eine eigene Leiste mit 3px-Unterstrich
- Karten randlos mit 16px-Radius; Merken-Pille erscheint beim Hover oben
  rechts, dazu ein Scrim - beides an :hover/:focus-within der Karte
- Profil-Galerie wird Masonry (columns:5, gestaffelte Hoehen)
- Nur noch Manrope, JetBrains Mono und backdrop-filter entfallen

Der Tageszaehler "Karten gesichtet" hat mit der schmalen Rail seinen
Platz verloren und sitzt jetzt in der Tab-Leiste.

Offen: das Suchfeld ist eine Attrappe - die App hat keine Suche. Im
README unter "Offene Punkte" vermerkt.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

design/desktop-ansicht/README.md

@@ -2,8 +2,17 @@
 
 ## Überblick
 Die bestehende Mobile-App („videogen", Swipe-Feed für Creator-/Produkt-Posts) als Desktop-Web-App.
-Statt einer schmalen Handy-Spalte im Browser: dreispaltiges App-Layout mit permanenter Navigation,
-zentralem Kartenstapel und Detailspalte. Swipen wird durch Maus-Drag, Buttons und Tastatur ersetzt.
+Statt einer schmalen Handy-Spalte im Browser: Icon-Rail links, breite Kopfzeile mit Suche,
+zentraler Kartenstapel und Detailspalte. Swipen wird durch Maus-Drag, Buttons und Tastatur ersetzt.
+
+**Visuelle Sprache: Pinterest Desktop.** Heller Hintergrund, schmale Icon-Leiste ohne Beschriftung,
+Suchfeld als breite Pille, rote Primäraktion („Merken"), randlose Karten mit 16px-Radius,
+Masonry-Raster im Profil. Referenz ist die Pinterest-Web-App (`de.pinterest.com`); der Screenshot
+dafür liegt bisher nicht im Repo, siehe [Offene Punkte](#offene-punkte).
+
+**Die Funktionen sind gegenüber dem ersten Entwurf unverändert** — Kartenstapel, Merken/Ablehnen,
+Undo, Tabs, die vier Screens und das State-Modell bleiben, wie sie waren. Geändert hat sich
+ausschließlich die Gestaltung.
 
 ## Zu den Design-Dateien
 Die Dateien in diesem Bundle sind **Design-Referenzen in HTML** — Prototypen, die Aussehen und
@@ -27,40 +36,40 @@ und sollen pixelgenau nachgebaut werden — mit den Komponenten/Utilities des Zi
 
 - Wurzel: `display:flex`, `min-height:100vh`, **`min-width:1180px`** (darunter horizontales Scrollen,
   die App ist Desktop-only gedacht).
-- Hintergrund (fix, nicht mitscrollend):
-  `radial-gradient(120% 80% at 50% 0%, #0d4c3d 0%, #0a3a30 34%, #24121a 68%, #40161b 100%)`,
-  `background-attachment: fixed`. Oben Tannengrün, unten Weinrot — direkt aus der App übernommen.
-- Grundschrift `#f2efe9` auf diesem Verlauf.
+- Hintergrund durchgehend `#ffffff`, Grundschrift `#111111`. Keine Verläufe, kein `backdrop-filter`.
 
-### 1. Sidebar (links)
-- Breite `236px`, `flex:none`, `position:sticky; top:0; height:100vh`.
-- `background: rgba(8,26,22,.42)`, `backdrop-filter: blur(14px)`, rechte Kante `1px solid rgba(255,255,255,.08)`.
-- Padding `26px 20px`, Inhalt als Flex-Spalte, `gap:28px`.
-- **Brand**: 30×30 Kachel, `border-radius:9px`, `linear-gradient(150deg,#2fa87f,#0e5442)`, Buchstabe „V" 15px/700;
-  daneben Wortmarke „videogen" 16px/600, `letter-spacing:-.01em`.
-- **Nav** (Flex-Spalte, `gap:4px`), Einträge: Feed, Profil, Erstellen, Einstellungen.
-  - Item: `display:flex; gap:11px; padding:11px 13px; border-radius:11px; font:500 14px Manrope; text-align:left; cursor:pointer`.
-  - Inaktiv: transparent, Text `rgba(242,239,233,.7)`, Border transparent.
-  - Aktiv: `background: rgba(126,226,184,.12)`, `border:1px solid rgba(126,226,184,.4)`, Text `#d6fbec`.
-  - Hover: `background: rgba(255,255,255,.09)`, Text `#ffffff`. Transition `.18s ease`.
-  - Icon-Slot 20px breit (im Prototyp Glyphen ◧ ◍ ＋ ⚙ — **in der Implementierung durch Lucide-Icons ersetzen**:
-    `layout-grid`, `user`, `plus`, `settings`).
-- **Fußbereich** (`margin-top:auto`):
-  - Statistik-Karte: `1px solid rgba(255,255,255,.12)`, `radius:14px`, `padding:14px`, `background: rgba(255,255,255,.03)`.
-    Kicker „HEUTE" 11px, `letter-spacing:.14em`, uppercase, `rgba(242,239,233,.5)`; Zahl 22px JetBrains Mono,
-    `font-variant-numeric: tabular-nums`, zweistellig mit führender Null; Label „Karten gesichtet" 12px `rgba(242,239,233,.55)`.
-  - Konto-Zeile: 32px Kreis `linear-gradient(140deg,#b2323c,#5d1620)`, Name 13px/600, Rolle 11px `rgba(242,239,233,.5)`.
+### 1. Icon-Rail (links)
+- Breite `80px`, `flex:none`, `position:sticky; top:0; height:100vh`, `background:#ffffff`,
+  rechte Kante `1px solid #efefef`. Padding `12px 0 16px`, Inhalt zentrierte Flex-Spalte, `gap:8px`.
+- **Brand**: 32×32 Kreis `#e60023` in einem 48px-Slot, weißes „V" 17px/700.
+- **Nav-Buttons**: 48×48, `border-radius:50%`, Icon 20px, **ohne Textlabel** — der Name steht im
+  `title`-Attribut und wird als Tooltip gezeigt.
+  - Inaktiv: transparent, Icon `#111111`. Hover: `background:#e9e9e9`.
+  - Aktiv: `background:#111111`, Icon `#ffffff`. Aktiv + Hover: `background:#000000`.
+  - Transition `.12s ease`.
+  - **Umsetzungshinweis:** Die Zustände gehören in Klassen (`.rail`, `.rail.active`), nicht in
+    Inline-Styles. Im Prototyp setzt die `.dc`-Laufzeit `style-hover` mit `!important`; ein inline
+    gesetztes Aktiv-Schwarz würde beim Hover überschrieben und der aktive Button hellte auf.
+  - Reihenfolge oben: **Feed, Profil, Erstellen**. Unten (`margin-top:auto`): **Einstellungen**.
+  - Icons (im Prototyp Unicode-Glyphen als Platzhalter) — **Lucide**: `home`, `user`, `plus`, `settings`.
 
-### 2. Kopfzeile (über dem Inhalt)
-- Höhe `72px`, `padding: 0 34px`, Unterkante `1px solid rgba(255,255,255,.07)`, Inhalt `space-between`.
-- **Tabs** links (`gap:6px`): „Videos", „Folge ich", „Posts". Jeder Tab wechselt den Kartenstapel und
-  springt zurück auf den Feed-Screen (Index/History zurücksetzen).
-  - `padding:9px 18px; border-radius:999px; font:500 16px Manrope`.
-  - Aktiv: `background: rgba(255,255,255,.08)`, `border:1px solid rgba(255,255,255,.22)`, Text `#fff`, 600.
-  - Inaktiv: transparent, Text `rgba(242,239,233,.58)`; Hover → `#fff`.
-- **Rechts**: Zähler „3 / 5" (12px JetBrains Mono, tabular-nums, `rgba(242,239,233,.5)`) und runder
-  Info-Button 36px (`border:1px solid rgba(255,255,255,.18)`, `background: rgba(255,255,255,.04)`;
-  Hover `rgba(255,255,255,.12)` + `translateY(-1px)`), toggelt das Kürzel-Panel.
+### 2. Kopfzeile
+- `padding:12px 16px 4px`, Flex-Zeile, `gap:8px`.
+- **Suchfeld**: `flex:1`, Höhe `48px`, `border-radius:24px`, `background:#efefef`, `padding:0 16px`,
+  Platzhaltertext „Suchen" 16px `#767676`; links Lupe, rechts Objektiv-Symbol
+  (Lucide `search` und `camera`).
+- **Konto**: 40px Kreis `linear-gradient(140deg,#b2323c,#5d1620)` mit weißer Initiale 15px/700,
+  daneben 28px Chevron-Button (`▾`, Hover `#e9e9e9`).
+
+### 3. Tab-Leiste
+- `padding:0 24px`, Unterkante `1px solid #efefef`, Tabs mit `gap:24px`, an der Grundlinie ausgerichtet.
+- **Tabs**: „Videos", „Folge ich", „Posts". Jeder Tab wechselt den Kartenstapel und springt zurück
+  auf den Feed-Screen (Index/History zurücksetzen).
+  - `padding:0 2px 12px`, Unterkante `3px solid` — aktiv `#111111`, inaktiv `transparent`.
+  - Aktiv: `#111111`, 700. Inaktiv: `#767676`, 500; Hover → `#111111`. Schriftgröße 16px.
+- **Rechts**: Tageszähler „**NN** heute gesichtet" (Zahl 700 `#111111` mit `tabular-nums`,
+  Rest 13px `#767676`), Stapelzähler „3 / 5" (13px `#767676`, `tabular-nums`) und runder
+  Info-Button 36px (transparent, Hover `#e9e9e9`), der das Kürzel-Panel toggelt.
 
 ---
 
@@ -77,108 +86,122 @@ und sollen pixelgenau nachgebaut werden — mit den Komponenten/Utilities des Zi
 - Es werden **bis zu 3 Karten** gestapelt gerendert (konfigurierbar 1–5).
   - Karte k (0 = oben): `transform: translate3d(0, -12px·k, 0) scale(1 - 0.045·k)`, `z-index: 10-k`,
     `pointer-events` nur auf der obersten.
-  - Karte: `position:absolute; inset:0; border-radius:26px; overflow:hidden;
-    border:1px solid rgba(255,255,255,.14); box-shadow: 0 26px 60px rgba(0,0,0,.45);
-    touch-action:none; user-select:none; cursor:grab` (beim Ziehen `grabbing`).
+  - Karte: `position:absolute; inset:0; border-radius:26px` → **`16px`**, `overflow:hidden`,
+    **kein Rahmen**, `box-shadow: 0 1px 20px rgba(0,0,0,.18)`,
+    `touch-action:none; user-select:none; cursor:grab` (beim Ziehen `grabbing`).
   - Transition: `transform .34s cubic-bezier(.22,.9,.3,1), opacity .3s ease` — während des aktiven Drags `none`.
 - **Karteninhalt (von unten nach oben gestapelt):**
   1. Grundfläche: `linear-gradient(155deg, <hue0> 0%, <hue1> 100%)` (pro Karte, siehe Daten unten).
   2. Streifen-Overlay: `repeating-linear-gradient(<40+9·i>deg, rgba(255,255,255,.08) 0 2px, transparent 2px 16px)`, `opacity:.5`.
      (Im Prototyp Platzhalter für das Video-/Bild-Asset — im Produkt liegt hier das Medium.)
-  3. Lesbarkeits-Verlauf: `linear-gradient(180deg, rgba(0,0,0,.32) 0%, transparent 26%, transparent 52%, rgba(0,0,0,.66) 100%)`.
-  4. **Pills** oben links (`padding:18px`, `gap:9px`): Art („Produkt"/„Video") und Assets („3 Bilder").
-     `padding:7px 15px; border-radius:999px; border:1px solid rgba(255,255,255,.34);
-     background: rgba(0,0,0,.22); backdrop-filter: blur(6px); font:600 13px`.
-  5. **Caption** mittig, 118px über der Unterkante: JetBrains Mono 15px, `padding:9px 16px`,
-     `border-radius:9px`, `background: rgba(0,0,0,.5)`, `backdrop-filter: blur(4px)`.
-  6. **Creator-Zeile** unten (`padding:20px`, `gap:13px`): 46px Avatar-Kreis (Farbverlauf, `border:2px solid rgba(255,255,255,.3)`),
-     Name 19px/700 `letter-spacing:-.01em`, Untertitel 14px `rgba(255,255,255,.72)`.
-  7. **Entscheidungs-Badge** (nur oberste Karte, erscheint ab 40px Drag oder beim Exit):
-     `top:86px`, links bei „GEMERKT" / rechts bei „SKIP", `padding:8px 16px; border-radius:10px;
-     font:800 15px; letter-spacing:.12em`, `border:2px solid` und Text in
-     Grün `rgba(126,226,184,.9)` / `#a9f0d0` bzw. Rot `rgba(232,120,120,.9)` / `#f0a8a8`,
-     `rotate(-10deg)` bzw. `rotate(10deg)`, Opacity `min(1, |dx|/110)`, Transition `.16s`.
-- **Leerzustand** (Stapel durch): gestrichelter Rahmen `1px dashed rgba(255,255,255,.2)`, `radius:26px`,
-  Titel „Alles gesichtet" 20px/600, Text „Für heute sind keine neuen Karten mehr in dieser Ansicht.",
-  Outline-Button „Stapel neu laden" (`border:1px solid rgba(126,226,184,.6)`, Text `#8fe3c1`,
-  Hover `background: rgba(126,226,184,.14)`), Einblendung `fadeIn .3s`.
-- **Aktions-Buttons** unter der Bühne (`gap:18px`), alle `border-radius:50%`,
-  `background: rgba(14,10,12,.72)`, `border:1px solid rgba(255,255,255,.16)`,
-  Transition `.18s`, Hover `translateY(-3px) scale(1.05)`, Active `scale(.95)`:
-  - ✕ Ablehnen — 62px, Hover-Border `rgba(230,120,120,.75)`, Hover-BG `rgba(120,32,38,.5)`.
-  - ↺ Zurück — 52px, Hover-Border `rgba(255,255,255,.4)`.
-  - ♥ Merken — 70px, Text `#8fe3c1`, Border `rgba(126,226,184,.45)`, Hover-BG `rgba(20,88,68,.6)`, Hover `scale(1.06)`.
-  (Icons in der Implementierung: Lucide `x`, `rotate-ccw`, `heart`.)
-- **Kürzel-Panel** (Info-Button): absolut `right:26px; top:26px`, 250px, `radius:14px`,
-  `background: rgba(10,26,22,.9)`, `blur(12px)`, `border:1px solid rgba(255,255,255,.14)`,
+  3. **Hover-Scrim**: `rgba(0,0,0,.24)`, `opacity` 0 → 1 in `.12s`, nur wenn die Karte gehovert wird.
+  4. Lesbarkeits-Verlauf: `linear-gradient(180deg, transparent 46%, rgba(0,0,0,.62) 100%)`.
+  5. **Pills** oben links (`padding:16px`, `gap:8px`): Art („Produkt"/„Video") und Assets („3 Bilder").
+     `padding:6px 12px; border-radius:16px; background: rgba(255,255,255,.94); color:#111111; font:600 13px`.
+  6. **Merken-Pille** oben rechts, **nur auf der obersten Karte und erst beim Hover**
+     (`opacity` 0 → 1 in `.12s`): `padding:11px 16px; border-radius:22px; background:#e60023;
+     color:#ffffff; font:700 15px`, Hover `#ad081b`. Klick = dieselbe Aktion wie „Merken"/→.
+  7. **Caption** mittig, 104px über der Unterkante: `font:600 15px`, `padding:8px 14px`,
+     `border-radius:16px`, `background: rgba(255,255,255,.94)`, `color:#111111`.
+  8. **Creator-Zeile** unten (`padding:18px`, `gap:12px`, Text weiß): 44px Avatar-Kreis (Farbverlauf,
+     ohne Rand), Name 18px/700 `letter-spacing:-.01em`, Untertitel 14px `rgba(255,255,255,.82)`.
+  9. **Entscheidungs-Badge** (nur oberste Karte, erscheint ab 40px Drag oder beim Exit):
+     `top:86px`, links bei „GEMERKT" / rechts bei „SKIP", `padding:10px 18px; border-radius:22px;
+     font:700 15px; letter-spacing:.08em`, Text immer `#ffffff`, Fläche
+     `#e60023` (GEMERKT) bzw. `#111111` (SKIP), `rotate(-10deg)` bzw. `rotate(10deg)`,
+     Opacity `min(1, |dx|/110)`, Transition `.16s`.
+- **Leerzustand** (Stapel durch): Fläche `#f5f5f5`, `radius:16px`, Titel „Alles gesichtet" 20px/700,
+  Text „Für heute sind keine neuen Karten mehr in dieser Ansicht." 15px `#5f5f5f`,
+  roter Pill-Button „Stapel neu laden" (`#e60023`, Hover `#ad081b`, weiß 15px/700,
+  `padding:12px 20px; radius:24px`), Einblendung `fadeIn .3s`.
+- **Aktions-Buttons** unter der Bühne (`gap:16px`), Hover `scale(1.04)`, Active `scale(.96)`,
+  Transition `.12s`:
+  - ✕ Ablehnen — 56px Kreis, `background:#efefef`, Icon `#111111`, Hover `#e2e2e2`.
+  - ↺ Zurück — 48px Kreis, gleiche Flächen.
+  - **Merken** — roter Pill statt Kreis: Höhe 56px, `padding:0 30px`, `border-radius:28px`,
+    `background:#e60023`, `color:#ffffff`, `font:700 17px`, Hover `#ad081b`.
+  (Icons in der Implementierung: Lucide `x`, `rotate-ccw`; „Merken" trägt Text, kein Icon.)
+- **Kürzel-Panel** (Info-Button): absolut `right:26px; top:26px`, 250px, `radius:16px`,
+  `background:#ffffff`, `box-shadow: 0 1px 20px rgba(0,0,0,.16)`, `padding:16px`,
   Einblendung `riseIn .22s`. Inhalt: ← Ablehnen, → Merken, ↑ Zurücknehmen, Maus Karte ziehen.
 
 #### A2 Detailspalte (rechts, 372px)
-- `border-left:1px solid rgba(255,255,255,.07)`, `background: rgba(8,22,19,.34)`, `padding:30px 28px`,
-  Flex-Spalte `gap:24px`, `overflow:auto`.
-- Kicker „AKTUELLE KARTE" (11px, `letter-spacing:.16em`, uppercase, `rgba(242,239,233,.45)`),
-  Titel = Caption der obersten Karte 26px/600 `letter-spacing:-.02em`, darunter „Name · Untertitel" 14px `rgba(242,239,233,.62)`.
-- Hairline `1px rgba(255,255,255,.09)`.
-- **Statistik-Raster** 3 Spalten, `gap:12px`: Kachel `border:1px solid rgba(255,255,255,.1)`, `radius:12px`,
-  `padding:12px`; Wert 17px JetBrains Mono tabular-nums, Label 11px `rgba(242,239,233,.5)`.
-- **Beschreibung**: Kicker + Fließtext 14px, `line-height:1.75`, `rgba(242,239,233,.78)`, `text-wrap:pretty`.
-- **Tags**: Pills `padding:6px 12px`, `radius:999px`, `border:1px solid rgba(255,255,255,.18)`, 12px.
-- **Aktionen unten** (`margin-top:auto`, `gap:10px`), beide `padding:13px; radius:12px`:
-  „Zur Sammlung hinzufügen" (Akzent-Outline `rgba(126,226,184,.55)`, Text `#8fe3c1`, Hover `rgba(126,226,184,.14)`) =
-  gleiche Aktion wie ♥; „Überspringen" (neutrale Outline) = gleiche Aktion wie ✕.
+- `border-left:1px solid #efefef`, `background:#ffffff`, `padding:28px`,
+  Flex-Spalte `gap:22px`, `overflow:auto`.
+- Kicker „Aktuelle Karte" 12px/600 `#767676`, Titel = Caption der obersten Karte 28px/700
+  `letter-spacing:-.02em`, darunter „Name · Untertitel" 15px `#5f5f5f`.
+- Hairline `1px #efefef`.
+- **Statistik-Raster** 3 Spalten, `gap:10px`: Kachel `background:#f5f5f5`, `radius:16px`,
+  `padding:14px`; Wert 18px/700 `tabular-nums`, Label 12px `#767676`.
+- **Beschreibung**: Kicker + Fließtext 15px, `line-height:1.7`, `#333333`, `text-wrap:pretty`.
+- **Tags**: Pills `padding:8px 14px`, `radius:18px`, `background:#efefef`, 13px/600 `#111111`.
+- **Aktionen unten** (`margin-top:auto`, `gap:8px`), beide `padding:14px; radius:24px; font:700 15px`:
+  „Zur Sammlung hinzufügen" (rot `#e60023`, weiß, Hover `#ad081b`) = gleiche Aktion wie „Merken";
+  „Überspringen" (`#efefef`, `#111111`, Hover `#e2e2e2`) = gleiche Aktion wie ✕.
 
 ### B. Profil
-- `padding:38px 44px`, `overflow:auto`, Einblendung `riseIn .26s`.
-- Kopf: 96px Avatar-Kreis (`linear-gradient(140deg,#b2323c,#5d1620)`, `border:2px solid rgba(255,255,255,.2)`),
-  Name 32px/600 `letter-spacing:-.02em`, Meta „Studio-Konto · seit März 2026" 14px `rgba(242,239,233,.6)`;
-  rechts drei Kennzahlen (`gap:34px`): Posts 38, Gemerkt (live aus dem Feed), Follower 1.204 —
-  Werte 22px JetBrains Mono tabular-nums, Labels 12px. Unterkante Hairline `rgba(255,255,255,.09)`, `padding-bottom:26px`.
-- Galerie: `grid-template-columns: repeat(4,1fr)`, `gap:18px`, `margin-top:28px`.
-  Kachel: Höhe 230px, `radius:16px`, `border:1px solid rgba(255,255,255,.12)`, Kartenverlauf + Streifen (`opacity:.45`),
-  Titel unten auf `linear-gradient(0deg, rgba(0,0,0,.7), transparent)`, 13px/600, `padding:14px`.
-  Hover: `translateY(-4px)`, Border `rgba(126,226,184,.5)`, Transition `.2s`.
+- `padding:32px 24px 40px`, `overflow:auto`, Einblendung `riseIn .26s`.
+- Kopf **zentriert** als Spalte, `gap:10px`, `padding-bottom:28px`: 120px Avatar-Kreis
+  (`linear-gradient(140deg,#b2323c,#5d1620)`, ohne Rand), Name 36px/700 `letter-spacing:-.02em`,
+  Meta „Studio-Konto · seit März 2026" 15px `#5f5f5f`; darunter drei Kennzahlen nebeneinander
+  (`gap:28px`, zentriert): Posts 38, Gemerkt (live aus dem Feed), Follower 1.204 —
+  Werte 18px/700 `tabular-nums`, Labels 13px `#767676`.
+- **Masonry-Raster** statt Gitter: `columns:5; column-gap:16px`.
+  Kachel: `break-inside:avoid; margin-bottom:16px`, **unterschiedliche Höhen**
+  (Zyklus 320 / 240 / 400 / 280 / 360 / 220 / 300 / 260 px), `radius:16px`, **kein Rahmen**,
+  Kartenverlauf + Streifen (`opacity:.45`), `cursor:zoom-in`.
+  Titel unten auf `linear-gradient(0deg, rgba(0,0,0,.62), transparent)`, 14px/600 weiß, `padding:14px`.
+  **Hover:** Scrim `rgba(0,0,0,.24)` und rote Merken-Pille oben rechts (`right:12px; top:12px`,
+  `padding:11px 16px; radius:22px`) blenden mit `.12s` ein.
 
 ### C. Erstellen
-- `padding:38px 44px`; Inhalt `max-width:920px`, `grid-template-columns: 1fr 320px`, `gap:34px`.
-- Titel „Neuen Post erstellen" 30px/600, Untertitel 14px `rgba(242,239,233,.6)`.
-- **Dropzone**: Höhe 220px, `border:1px dashed rgba(255,255,255,.24)`, `radius:18px`,
-  `background: rgba(255,255,255,.03)`; Hover Border `rgba(126,226,184,.6)`, BG `rgba(126,226,184,.06)`.
-  Text „Dateien hierher ziehen" 15px/600 + „MP4, MOV oder bis zu 10 Bilder" 13px.
-- **Felder** Titel und Untertitel: Label 12px uppercase `letter-spacing:.14em` `rgba(242,239,233,.5)`;
-  Input `padding:13px 15px`, `radius:11px`, `border:1px solid rgba(255,255,255,.16)`,
-  `background: rgba(0,0,0,.24)`, Text `#f2efe9`, 15px. Beide sind an die Live-Vorschau gebunden.
-- **Art**: Segmented Pills „Produkt / Video / Serie", `padding:10px 18px`, `radius:999px`;
-  aktiv `border rgba(126,226,184,.6)`, `background rgba(126,226,184,.12)`, Text `#a9f0d0`.
-- **Aktionen**: „Veröffentlichen" (Akzent-Outline, löst Toast „Post veröffentlicht" aus),
-  „Als Entwurf sichern" (neutrale Outline), beide `padding:13px 24px`, `radius:12px`.
-- **Vorschau** (rechte Spalte): Kicker + Karte 420px hoch, `radius:22px`,
+- `padding:32px 24px 40px`; Inhalt in einer weißen Karte: `max-width:920px`, zentriert,
+  `radius:24px`, `box-shadow: 0 1px 20px rgba(0,0,0,.12)`, `padding:32px`,
+  `grid-template-columns: 1fr 320px`, `gap:32px`.
+- Titel „Neuen Post erstellen" 30px/700, Untertitel 15px `#5f5f5f`.
+- **Dropzone**: Höhe 220px, `border:2px dashed #cdcdcd`, `radius:16px`, `background:#f5f5f5`;
+  Hover Border `#e60023`, BG `#fafafa`.
+  Text „Dateien hierher ziehen" 16px/700 + „MP4, MOV oder bis zu 10 Bilder" 14px `#767676`.
+- **Felder** Titel und Untertitel: Label 13px/700 `#111111` (keine Versalien, kein `letter-spacing`);
+  Input `padding:14px 16px`, `radius:16px`, `border:2px solid #cdcdcd`, `background:#ffffff`,
+  Text `#111111`, 15px. Beide sind an die Live-Vorschau gebunden.
+- **Art**: Pills „Produkt / Video / Serie", `padding:11px 18px`, `radius:22px`, `font:700 15px`;
+  aktiv `background:#111111`, Text `#ffffff`; inaktiv `background:#efefef`, Text `#111111`.
+- **Aktionen**: „Veröffentlichen" (rot `#e60023`, weiß, löst Toast „Post veröffentlicht" aus),
+  „Als Entwurf sichern" (`#efefef`), beide `padding:14px 24px`, `radius:24px`, `font:700 15px`.
+- **Vorschau** (rechte Spalte): Kicker 12px/600 `#767676` + Karte 420px hoch, `radius:16px`,
   `linear-gradient(155deg,#1f8163,#0d4034)` + `repeating-linear-gradient(48deg, rgba(255,255,255,.07) 0 2px, transparent 2px 15px)`,
-  unten Titel 18px/700 und Untertitel 13px auf schwarzem Verlauf — spiegelt die Eingaben live.
+  unten Titel 18px/700 und Untertitel 14px auf schwarzem Verlauf — spiegelt die Eingaben live.
 
 ### D. Einstellungen
-- `padding:38px 44px`, Inhalt `max-width:660px`. Titel „Einstellungen" 30px/600.
-- Liste: Container `border:1px solid rgba(255,255,255,.1)`, `radius:16px`, `overflow:hidden`.
-  Zeile `padding:18px 20px`, `background: rgba(255,255,255,.02)`, Trenner `1px solid rgba(255,255,255,.07)`;
-  Label 15px/600, Hinweis 13px `rgba(242,239,233,.55)`.
-- Toggle: Track 52×30, `radius:999px`; aus → `background rgba(255,255,255,.05)`, `border rgba(255,255,255,.2)`,
-  Knopf links 3px, `rgba(242,239,233,.55)`; an → `background rgba(126,226,184,.18)`,
-  `border rgba(126,226,184,.6)`, Knopf links 25px, `#8fe3c1`. Knopf 22px, Transition
-  `left .2s cubic-bezier(.22,.9,.3,1), background .2s`.
+- `padding:32px 24px 40px`, Inhalt `max-width:660px`, zentriert. Titel „Einstellungen" 30px/700.
+- Liste: Container `radius:16px`, `overflow:hidden`, `box-shadow: 0 1px 20px rgba(0,0,0,.12)`,
+  **kein Rahmen**. Zeile `padding:20px`, `background:#ffffff`, Trenner `1px solid #efefef`;
+  Label 16px/700, Hinweis 14px `#767676`.
+- Toggle: Track 52×30, `radius:999px`, kein Rahmen; aus → `background:#cdcdcd`,
+  an → `background:#e60023`. Knopf 24px, immer `#ffffff` mit `box-shadow: 0 1px 3px rgba(0,0,0,.25)`,
+  links 3px → 25px, Transition `left .2s cubic-bezier(.22,.9,.3,1)`.
 - Einträge: Videos automatisch abspielen (an), Ton beim Öffnen (aus), Wochenrückblick (an), Bewegte Übergänge (an).
 
 ---
 
 ## Interaktion & Verhalten
 
-**Karte entscheiden — drei gleichwertige Wege:**
+**Karte entscheiden — vier gleichwertige Wege:**
 1. **Maus-Drag**: Pointer Events auf der obersten Karte (`pointerdown` → `setPointerCapture`,
    `pointermove` → Delta, `pointerup`/`pointercancel` → Auswertung).
    Live-Transform: `translate3d(dx, dy, 0) rotate(dx/22 deg)`, Transition währenddessen aus.
    Schwelle **±120px**: `dx > 120` = merken, `dx < -120` = ablehnen, sonst Rücksprung (Transition wieder an).
-2. **Buttons** ✕ / ↺ / ♥ unter der Bühne (und die beiden Buttons in der Detailspalte).
-3. **Tastatur** (global, nur auf dem Feed-Screen, mit `preventDefault`):
+2. **Buttons** ✕ / ↺ / „Merken" unter der Bühne (und die beiden Buttons in der Detailspalte).
+3. **Merken-Pille auf der Karte** (erscheint beim Hover, oben rechts) — identisch mit „merken".
+4. **Tastatur** (global, nur auf dem Feed-Screen, mit `preventDefault`):
    `ArrowLeft` = ablehnen, `ArrowRight` = merken, `ArrowUp` = zurücknehmen.
 
+**Hover-Zustände:** Scrim und Merken-Pille hängen am Hover der *Karte*, nicht am eigenen Element
+(im Prototyp `.pin:hover .pin-save` / `.pin:hover .pin-scrim`, zusätzlich `:focus-within` für
+Tastaturbedienung). Im Ziel-Framework als Hover-State der Kartenkomponente umsetzen —
+und den Fokusfall nicht vergessen, sonst ist die Pille per Tastatur nicht erreichbar.
+
 **Exit-Animation:** `transform: translate3d(±620px, -40px, 0) rotate(±22deg)`, `opacity: 0`,
 Dauer **320ms**, danach Index +1 und `exiting` zurücksetzen. Während `exiting` sind weitere
 Entscheidungen gesperrt.
@@ -186,15 +209,15 @@ Entscheidungen gesperrt.
 **Undo:** letzte Entscheidung aus der History, Index zurück, „Gemerkt"-Zähler ggf. −1.
 Leere History → Toast „Nichts zurückzunehmen".
 
-**Toast:** fixiert `bottom:34px`, horizontal zentriert, `padding:12px 22px`, `radius:999px`,
-`background: rgba(10,24,20,.92)`, `blur(10px)`, `border:1px solid rgba(255,255,255,.16)`, 14px,
+**Toast:** fixiert `bottom:28px`, horizontal zentriert, `padding:16px 22px`, `radius:16px`,
+`background:#ffffff`, `box-shadow: 0 1px 20px rgba(0,0,0,.22)`, `color:#111111`, 15px/600,
 Einblendung `riseIn .2s`, verschwindet nach **1700ms**. Texte: „Zu ‚<Name>' gemerkt",
 „Übersprungen", „Nichts zurückzunehmen", „Post veröffentlicht".
 
 **Keyframes:**
 - `riseIn`: `opacity:0; translateY(14px)` → `opacity:1; none` (.2–.26s ease)
 - `fadeIn`: `opacity:0` → `1`
-- Fokus: `:focus-visible { outline: 2px solid #7ee2b8; outline-offset: 2px; }` — nie der Browser-Default.
+- Fokus: `:focus-visible { outline: 2px solid #0074e8; outline-offset: 2px; }` — nie der Browser-Default.
 
 **Responsive:** Desktop-only, `min-width:1180px`; darunter horizontal scrollen.
 Der Feed-Bereich scrollt bei geringer Fensterhöhe (`min-height:0; overflow:auto`).
@@ -205,13 +228,13 @@ Der Feed-Bereich scrollt bei geringer Fensterhöhe (`min-height:0; overflow:auto
 
 | State | Typ | Zweck |
 |---|---|---|
-| `screen` | `'feed' \| 'profile' \| 'create' \| 'settings'` | aktive Ansicht (Sidebar) |
+| `screen` | `'feed' \| 'profile' \| 'create' \| 'settings'` | aktive Ansicht (Icon-Rail) |
 | `tab` | `'videos' \| 'following' \| 'posts'` | aktiver Stapel; Wechsel setzt `idx`/`history` zurück und springt auf `feed` |
 | `idx` | number | Index der obersten Karte im aktuellen Stapel |
 | `drag` | `{x, y, active} \| null` | laufende Drag-Geste |
 | `exiting` | `'left' \| 'right' \| null` | laufende Exit-Animation (sperrt Eingaben) |
 | `history` | `{idx, dir}[]` | für Undo |
-| `seen`, `saved` | number | Zähler Sidebar / Profil |
+| `seen`, `saved` | number | Zähler Tab-Leiste / Profil |
 | `showInfo` | boolean | Kürzel-Panel |
 | `toast` | string | Toast-Text (leer = versteckt) |
 | `draftTitle`, `draftSub`, `draftKind` | string | Formular „Erstellen", live in der Vorschau |
@@ -229,33 +252,45 @@ Die drei Tabs liefern drei Stapel (Videos, Folge ich, Posts).
 **Farben**
 | Rolle | Wert |
 |---|---|
-| Seitenverlauf | `#0d4c3d` → `#0a3a30` → `#24121a` → `#40161b` |
-| Text | `#f2efe9` |
-| Text gedämpft | `rgba(242,239,233,.62)` / `.55` / `.5` / `.45` |
-| Akzent (Mint) | `#8fe3c1`, hell `#a9f0d0` / `#d6fbec`, Fokus `#7ee2b8` |
-| Akzent-Tint | `rgba(126,226,184,.12)` Fläche, `.4–.6` Rahmen, `.14` Hover |
-| Ablehnen | `rgba(232,120,120,.9)` Rahmen, `#f0a8a8` Text, `rgba(120,32,38,.5)` Hover |
-| Flächen | `rgba(8,26,22,.42)` Sidebar, `rgba(8,22,19,.34)` Detailspalte, `rgba(255,255,255,.02–.09)` |
-| Rahmen | `rgba(255,255,255,.07)` / `.1` / `.12` / `.16` / `.18` / `.22` |
+| Seite | `#ffffff` |
+| Text | `#111111` |
+| Text gedämpft | `#5f5f5f` (Fließtext sekundär), `#767676` (Labels, inaktive Tabs), `#333333` (Beschreibung) |
+| Akzent (Rot) | `#e60023`, Hover `#ad081b` |
+| Dunkel | `#111111` (aktiver Rail-Button, aktive Art-Pille, SKIP-Badge), Hover `#000000` |
+| Neutrale Flächen | `#efefef` (Suchfeld, Buttons, Tags), Hover `#e2e2e2`; `#e9e9e9` (Rail-Hover); `#f5f5f5` (Kacheln, Dropzone, Leerzustand) |
+| Linien | `#efefef` (Trenner, Kanten), `#cdcdcd` (Eingabe-Rahmen, Toggle aus) |
+| Auf Medien | `rgba(255,255,255,.94)` Pills, `rgba(255,255,255,.82)` Untertitel, `rgba(0,0,0,.24)` Hover-Scrim, `rgba(0,0,0,.62)` Lesbarkeitsverlauf |
+| Fokus | `#0074e8` |
 | Karten-Verläufe | grün `#1f8163→#0d4034`, blau `#256f8b→#0c2f3f`, ocker `#8a6a2f→#3a2a11`, rot `#7a2f38→#2c1014`, tannen `#2f6f5a→#0e332b`, türkis `#1c6f7f→#0a2c33`, violett `#6a2f7a→#26102c`, gold `#7a5a2a→#2f2110` |
 
-**Typografie** — Manrope 400/500/600/700 (UI), JetBrains Mono 400/500 (Zahlen, Captions).
-Skala: 32 / 30 / 26 / 22 / 19 / 17 / 16 / 15 / 14 / 13 / 12 / 11 px.
-Große Überschriften `letter-spacing:-.02em`, Kicker `+.14em`/`.16em` uppercase.
-Alle Zahlen mit `font-variant-numeric: tabular-nums`.
+**Typografie** — **nur Manrope** 400/500/600/700. JetBrains Mono entfällt; Zahlen laufen in Manrope
+mit `font-variant-numeric: tabular-nums`.
+Skala: 36 / 30 / 28 / 20 / 18 / 17 / 16 / 15 / 14 / 13 / 12 px.
+Große Überschriften `letter-spacing:-.02em`. Keine Versalien-Kicker mehr — Kicker sind
+12px/600 in `#767676`, normal geschrieben.
 
-**Abstände** 3 / 4 / 6 / 8 / 9 / 10 / 12 / 13 / 14 / 18 / 20 / 22 / 26 / 28 / 34 / 38 / 44 px.
-**Radien** 9 / 11 / 12 / 14 / 16 / 18 / 22 / 26 px, Pills `999px`, Kreise `50%`.
-**Schatten** nur an der Karte: `0 26px 60px rgba(0,0,0,.45)`.
-**Blur** 4 / 6 / 10 / 12 / 14 px (`backdrop-filter`).
-**Transitions** `.16s` / `.18s` / `.2s` / `.3s` ease, Karten-Bewegung `.34s cubic-bezier(.22,.9,.3,1)`, Exit `320ms`.
+**Abstände** 2 / 4 / 6 / 8 / 10 / 12 / 14 / 16 / 18 / 20 / 22 / 24 / 26 / 28 / 30 / 32 / 40 px.
+**Radien** 16px (Karten, Kacheln, Eingaben, Pills auf Medien, Toast, Panel),
+18 / 22 / 24 / 28px (Tag-, Art-, Button-Pillen), `50%` Kreise, `999px` Toggle-Track.
+**Schatten** `0 1px 20px rgba(0,0,0,.12)` Flächen/Listen · `.16` Kürzel-Panel · `.18` Karte ·
+`.22` Toast · `0 1px 3px rgba(0,0,0,.25)` Toggle-Knopf.
+**Kein `backdrop-filter`** — die Pinterest-Oberfläche ist deckend.
+**Transitions** `.12s ease` (Hover, Farbwechsel, Ein-/Ausblenden), `.16s` (Badge),
+`.2s` (Toggle), Karten-Bewegung `.34s cubic-bezier(.22,.9,.3,1)`, Exit `320ms`.
 
 ---
 
 ## Assets
-Keine Binärdateien. Alle Medien sind Platzhalter aus CSS-Verläufen und Streifenmustern —
-im Produkt durch echte Bilder/Videos ersetzen. Icons: **Lucide** (im Prototyp Unicode-Glyphen als Platzhalter).
-Fonts: Google Fonts — Manrope, JetBrains Mono.
+Keine Binärdateien im Prototyp. Alle Medien sind Platzhalter aus CSS-Verläufen und Streifenmustern —
+im Produkt durch echte Bilder/Videos ersetzen. Icons: **Lucide** (im Prototyp Unicode-Glyphen als
+Platzhalter). Fonts: Google Fonts — **nur Manrope**.
+
+## Offene Punkte
+- **Suchfeld ohne Funktion.** Die Pinterest-Kopfzeile lebt von der Suche, im Prototyp ist sie eine
+  reine Attrappe — es gibt bisher keine Suchfunktion in der App. Vor der Umsetzung klären, ob Suche
+  gebaut wird; wenn nicht, gehört das Feld raus, statt eine Funktion vorzutäuschen.
+- **Pinterest-Referenz liegt nicht im Repo.** Die Vorlage kam als Screenshot im Chat. Wer sie
+  dauerhaft braucht, legt sie als `referenz/pinterest-desktop.png` daneben.
 
 ## Dateien in diesem Bundle
 - `PROMPT.md` — fertiger Auftrag zum Einfügen in Claude Code.