Klarbild-Design, neues Logo, Ein-Klick-Einfügen, mobil überarbeitet, Spenden-Knopf

- Design auf Klarbild-Tokens umgestellt: Space Grotesk/Mono, Papier/Karte, Blau, Pills
- Neues Logo und App-Icon: Klemmbrett mit Pfeil (Zwischenablage -> Datei)
- Einfügen-Knopf liest die Zwischenablage direkt (HTML bevorzugt), Fallback-Hinweis
- Mobil: 44px-Ziele, 16px-Eingaben, Safe-Area, Bottom-Sheet, Datei öffnen, Speichern per Teilen-Menü
- Spenden-Knopf (PayPal) in Kopfzeile, Fußzeile und Rechtstexten; Datenschutz um PayPal und Zwischenablage ergänzt
- Service Worker: Seiten network-first (Impressum/Datenschutz froren im Cache ein), Cache v4
- nginx: no-cache für Seiten
- Listen mit einem Leerzeichen nach dem Aufzählungszeichen

DESIGN.md

@@ -1,51 +1,13 @@
 # clip2md — Design System
 
-Register: **product**. Color strategy: **Restrained** (tinted neutrals + one accent ≤10%).
-Theme: **dark**. Scene: Nutzer legt spätabends oder tagsüber am Monitor schnell einen langen
-Thread ab; eine ruhige, dunkle, blendfreie Fläche hält den Fokus auf dem Text, nicht auf dem UI.
+Seit September 2026 Teil der **Klarbild-Familie** (Tokens aus `klarbild-oss/src/styles/tokens.css`).
 
-## Color (OKLCH)
+- **Farbe:** warmes Papier `#EAEAE3`, Karte `#FBFBF7`, Linie `#D7D6CC`, Tinte `#16150F`, ein kräftiges Blau `#1B3BE0` (OKLCH 45% 0.23 267) für Primäraktion, Fokus, Logo. Dunkelmodus: blau getönte Neutrals, Blau aufgehellt.
+- **Schrift:** Space Grotesk (UI, Überschriften), Space Mono (Editor, Dateiname, Mono-Labels in Versalien mit 0.18em Sperrung). Self-hosted, keine Google-Fonts.
+- **Form:** Karten mit 4px Radius, Bedienelemente als Pills (999px). Kein Schatten außer 1px-Hauch und Toast/Sheet.
+- **Logo:** Klemmbrett mit Pfeil nach unten (Zwischenablage → Datei) in Blau, Wortmarke „clip**2**md" mit blauer 2. App-Icon: cremefarbenes Klemmbrett auf blauem Quadrat.
+- **Mobil:** Touch-Ziele ≥44px, Eingaben 16px (kein iOS-Zoom), `env(safe-area-inset-*)`, Einstellungen als Bottom-Sheet, Aktionsleiste als 5er-Raster mit Icon über Label, Speichern über Teilen-Menü.
+- **Motion:** ease-out-quint, 120–240ms, nur Opacity/Transform; `prefers-reduced-motion` respektiert.
 
-Neutrals sind zur Marken-Hue (kühles Blau-Grau, ~265) getönt — nie reines `#000`/`#fff`.
-
-| Token | OKLCH | Rolle |
-| --- | --- | --- |
-| `--bg` | `0.17 0.014 265` | App-Hintergrund (tief) |
-| `--surface` | `0.215 0.016 265` | Editor-Fläche |
-| `--raised` | `0.255 0.018 265` | Bars, Buttons |
-| `--line` | `0.32 0.02 265` | Ruhige Rahmen |
-| `--line-strong`| `0.42 0.024 265` | Aktive Rahmen |
-| `--text` | `0.95 0.006 265` | Primärtext |
-| `--muted` | `0.68 0.012 265` | Sekundärtext, Labels |
-| `--faint` | `0.5 0.012 265` | Tertiär, Legende |
-| `--accent` | `0.74 0.15 152` | Grün — Primäraktion, Fokus, „konvertiert" |
-| `--accent-ink` | `0.22 0.05 152` | Text auf Accent |
-| `--danger` | `0.66 0.16 25` | Fehler-Toast, destruktiv |
-
-Accent trägt <10% der Fläche: Save-Button, Fokus-Ring, „konvertiert"-Badge. Sonst Neutrals.
-
-## Typography
-
-- **Sans (UI-Chrome):** Inter / system-ui. Labels, Buttons, Legende.
-- **Mono (Daten):** ui-monospace / JetBrains Mono. Editor, Dateiname, Zähler — alles, was „Inhalt" ist.
-- Scale mit ≥1.25-Kontrast: 11 (legende) · 12.5 (meta) · 14 (body/editor) · 15 (buttons) · 18 (wordmark).
-- Editor-Zeilenhöhe 1.65, `tab-size: 2`, Body-Zeilen bleiben durch die Mono-Fläche natürlich lesbar.
-
-## Elevation & Layout
-
-- Drei Ebenen: `bg` (App) → `surface` (Editor, das Herzstück, bekommt den Raum) → `raised` (Bars/Buttons).
-- Keine Cards, keine Schatten außer einem weichen Toast-Drop. Trennung über 1px-Linien und Ton, nicht Boxen.
-- Spacing-Rhythmus variiert bewusst: großzügig um den Editor, kompakt in der Toolbar.
-- Radius 10–12px, konsistent.
-
-## Motion
-
-- Ease-out-quint (`cubic-bezier(0.22, 1, 0.36, 1)`), 120–240ms. Kein Bounce.
-- Nur Opacity/Transform animieren. Toast slidet ein, Button-Press senkt 1px, „konvertiert"-Badge pulst einmal kurz, auto-aktualisierter Dateiname flasht dezent.
-- `prefers-reduced-motion`: alle nicht-essenziellen Transitions aus.
-
-## Accessibility
-
-- `:focus-visible` Ring in Accent, überall. Touch-Ziele ≥40px.
-- Toasts über `aria-live="polite"`. Editor & Felder korrekt gelabelt.
-- Kontrast: Text/`bg` und Accent-Ink/Accent über WCAG AA.
+## Historie
+Vorher: dunkles Theme mit Grün (v1), dann helles Editorial mit Geist und Zinnober/Blau (v2). Beides abgelöst.