feat: upload/recipe/job API routes + Klarbild visual identity

- api: /uploads (multipart, HEIC, 25MB guard, S3), /recipes (GET/POST),
  /jobs (create+snapshot+enqueue, list), /jobs/:id (status+items),
  /jobs/:id/:action (pause/resume/cancel/retry-failed), /items/:id/retry
- design: adopt Till mockup identity — Space Grotesk + Space Mono (self-hosted,
  no google/US), blue accent, paper/card, registration-mark motif; OKLCH tokens
- verified: astro build passes

src/styles/tokens.css

@@ -1,52 +1,37 @@
-/* Klarbild — Design-Tokens (OKLCH). Eigenständige, ruhige Produkt-Identität.
-   Kein Tailwind. Feinschliff folgt in der Design-Phase. */
+/* Klarbild — Design-Tokens (OKLCH; siehe 06 §6). Identität nach Till-Mockup:
+   Space Grotesk + Space Mono, kräftiges Blau, warmes Papier/Karte, Passermarke,
+   scharfe Ecken, technisch-editorial. Fonts self-hosted (kein Google/US). */
 :root {
-  /* Flächen */
-  --paper:      oklch(98.5% 0.006 95);   /* warmes Off-White */
-  --surface:    oklch(100% 0 0);
-  --surface-2:  oklch(96.5% 0.008 95);
-  --line:       oklch(89% 0.008 95);
+  /* Flächen (Papier/Karte) */
+  --paper:   oklch(92.8% 0.005 95);    /* #EAEAE3 */
+  --card:    oklch(98.4% 0.004 95);    /* #FBFBF7 */
+  --surface: var(--card);
+  --line:    oklch(86.8% 0.007 95);    /* #D7D6CC */
+  --mark:    oklch(70% 0.006 95);      /* #A7A69B Passermarke */
 
   /* Text */
-  --ink:        oklch(24% 0.02 260);      /* warmes Fast-Schwarz */
-  --ink-soft:   oklch(45% 0.02 260);
-  --ink-mute:   oklch(62% 0.015 260);
+  --ink:      oklch(21% 0.01 95);      /* #16150F */
+  --ink-soft: oklch(49% 0.008 95);     /* #6A685D */
+  --soft:     var(--ink-soft);
 
-  /* Akzent — klares Petrol/Teal */
-  --accent:     oklch(62% 0.12 210);
-  --accent-ink: oklch(30% 0.07 210);
-  --accent-bg:  oklch(95% 0.03 210);
-
-  /* Sekundär — warmer Sand */
-  --sand:       oklch(85% 0.05 75);
+  /* Akzent — kräftiges Blau */
+  --accent:   oklch(45% 0.23 267);     /* #1B3BE0 */
+  --accent-2: oklch(38% 0.21 267);     /* #122BA8 */
+  --accent-bg: oklch(45% 0.23 267 / 0.06);
 
   /* Zustände */
-  --ok:         oklch(65% 0.14 150);
-  --warn:       oklch(75% 0.14 75);
-  --err:        oklch(58% 0.17 25);
+  --ok:   oklch(60% 0.15 150);
+  --warn: oklch(72% 0.15 75);
+  --err:  oklch(55% 0.19 25);
 
   /* Form */
-  --radius:     14px;
-  --radius-sm:  9px;
-  --shadow:     0 1px 2px oklch(24% 0.02 260 / 0.06), 0 8px 24px oklch(24% 0.02 260 / 0.06);
-  --font-sans:  ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
-  --font-display: "Fraunces", Georgia, serif;
-  --maxw:       1160px;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --paper:     oklch(22% 0.012 260);
-    --surface:   oklch(26% 0.014 260);
-    --surface-2: oklch(30% 0.014 260);
-    --line:      oklch(36% 0.014 260);
-    --ink:       oklch(96% 0.006 95);
-    --ink-soft:  oklch(82% 0.01 95);
-    --ink-mute:  oklch(66% 0.012 95);
-    --accent:    oklch(72% 0.11 210);
-    --accent-bg: oklch(32% 0.05 210);
-    --shadow:    0 1px 2px oklch(0% 0 0 / 0.3), 0 10px 30px oklch(0% 0 0 / 0.35);
-  }
+  --radius:    4px;
+  --radius-sm: 3px;
+  --shadow: 0 1px 2px oklch(21% 0.01 95 / 0.05);
+  --font-sans: 'Space Grotesk', system-ui, -apple-system, sans-serif;
+  --font-display: 'Space Grotesk', system-ui, sans-serif;
+  --font-mono: 'Space Mono', ui-monospace, monospace;
+  --maxw: 1060px;
 }
 
 * { box-sizing: border-box; }
@@ -57,8 +42,21 @@ body {
   font-size: 16px; line-height: 1.55;
   -webkit-font-smoothing: antialiased;
 }
-a { color: var(--accent-ink); }
+a { color: var(--accent); }
+
+/* Mono-Label (uppercase, gesperrt) — durchgängiges UI-Motiv */
+.mono-label {
+  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em;
+  text-transform: uppercase; color: var(--soft);
+}
+
+/* Passermarke (Kreuz) — Markenelement */
+.regmark { width: 15px; height: 15px; position: relative; display: inline-block; }
+.regmark::before, .regmark::after { content: ''; position: absolute; background: var(--accent); }
+.regmark::before { left: 50%; top: 0; width: 1.5px; height: 100%; transform: translateX(-50%); }
+.regmark::after { top: 50%; left: 0; height: 1.5px; width: 100%; transform: translateY(-50%); }
+
 @media (prefers-reduced-motion: reduce) {
   * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
 }
-:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
+:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }