Restyle UI in tiptoi brand style (dark, orange accent, book-corner shape)

- Dark theme with tiptoi orange (#f2841e) as primary accent and
  Ravensburger blue (#3b9eea) as secondary color.
- Introduce the distinctive tiptoi book-cover corner shape
  (three corners rounded, one squared) as --radius-book /
  --radius-book-input, applied narrowly to buttons (squared
  bottom-left) and text inputs (mirrored, squared bottom-right) plus
  the icon-only copy/delete buttons.
- Cards, list items, pen-bar and the dev menu keep plain rounded
  corners; book cover thumbnails/images also stay plainly rounded so
  the special shape isn't overused.
- Add a subtle .btn--outline variant for the large 'QR-Code scannen'
  button so the accent color doesn't dominate the whole surface.

client/src/components/QrScanner.tsx

@@ -92,7 +92,7 @@ export default function QrScanner(props: Props) {
         </button>
       </Show>
       <Show when={!scanning()}>
-        <button class="btn" onClick={startScan}>
+        <button class="btn btn--outline" onClick={startScan}>
           QR-Code scannen
         </button>
       </Show>

client/src/index.css

@@ -6,18 +6,32 @@
 }
 
 :root {
-  --bg:        #0f0f13;
+  /* Tiptoi-Farbwelt: dunkler Grund, kräftiges Orange als Hauptakzent,
-  --bg-card:   #1a1a24;
+     Ravensburger-Blau als Sekundärfarbe */
-  --bg-input:  #222230;
+  --bg:         #12181f;
-  --border:    #2e2e40;
+  --bg-card:    #1c242e;
-  --accent:    #6c63ff;
+  --bg-input:   #242e3a;
-  --accent-dk: #534fc4;
+  --border:     #2f3b48;
-  --text:      #e8e8f0;
+  --accent:     #f2841e;
-  --text-muted:#8888aa;
+  --accent-dk:  #cf6d0f;
-  --ok:        #3ecf8e;
+  --accent-rgb: 242, 132, 30;
-  --err:       #f56565;
+  --accent2:    #3b9eea;
-  --radius:    14px;
+  --accent2-rgb:59, 158, 234;
-  --shadow:    0 4px 24px rgba(0,0,0,0.4);
+  --text:       #eef3f7;
+  --text-muted: #8ea1b2;
+  --ok:         #46c98f;
+  --ok-rgb:     70, 201, 143;
+  --err:        #ef5959;
+  --err-rgb:    239, 89, 89;
+  --warn:       #f2b705;
+  --warn-rgb:   242, 183, 5;
+  --radius:     16px;
+  /* Markante tiptoi-Ecke, ausschließlich für Buttons und Textfelder:
+     Buttons unten links eckig, Textfelder (gespiegelt) unten rechts eckig.
+     Die sehr großen Werte clampen automatisch auf max. 50% der Elementgröße. */
+  --radius-book:       200px 200px 200px 20px;
+  --radius-book-input: 200px 200px 20px 200px;
+  --shadow:     0 4px 20px rgba(0, 0, 0, 0.35);
 }
 
 html, body, #app {
@@ -137,8 +151,8 @@ body {
   content: '';
   position: absolute;
   inset: 12px;
-  border: 2px solid var(--accent);
+  border: 2px solid var(--accent2);
-  border-radius: 8px;
+  border-radius: 10px;
   pointer-events: none;
   box-shadow: 0 0 0 9999px rgba(0,0,0,0.45);
 }
@@ -153,7 +167,7 @@ body {
   background: var(--accent);
   color: #fff;
   border: none;
-  border-radius: 10px;
+  border-radius: var(--radius-book);
   font-size: 0.95rem;
   font-weight: 600;
   cursor: pointer;
@@ -176,6 +190,18 @@ body {
   background: var(--err);
 }
 
+/* Dezente Variante für große Flächen (z. B. "QR-Code scannen") – volles
+   Orange wäre auf so einer großen Fläche zu dominant. */
+.btn--outline {
+  background: rgba(var(--accent-rgb), 0.12);
+  color: var(--accent);
+  border: 1.5px solid rgba(var(--accent-rgb), 0.5);
+}
+
+.btn--outline:hover {
+  background: rgba(var(--accent-rgb), 0.2);
+}
+
 /* ── Input ────────────────────────────────────────────────── */
 .search-row {
   display: flex;
@@ -188,7 +214,7 @@ body {
   padding: 0.8rem 1rem;
   background: var(--bg-input);
   border: 1px solid var(--border);
-  border-radius: 10px;
+  border-radius: var(--radius-book-input);
   color: var(--text);
   font-size: 0.95rem;
   outline: none;
@@ -219,7 +245,7 @@ body {
   width: 140px;
   height: 147px;
   object-fit: contain;
-  border-radius: 10px;
+  border-radius: var(--radius);
   background: var(--bg-input);
 }
 
@@ -287,7 +313,7 @@ body {
   width: 36px;
   height: 36px;
   background: var(--accent);
-  border-radius: 8px;
+  border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -334,7 +360,7 @@ body {
   width: 48px;
   height: 50px;
   object-fit: cover;
-  border-radius: 6px;
+  border-radius: 8px;
   flex-shrink: 0;
 }
 
@@ -403,13 +429,13 @@ body {
 }
 
 .badge--ok {
-  background: rgba(62, 207, 142, 0.15);
+  background: rgba(var(--ok-rgb), 0.14);
   color: var(--ok);
 }
 
 .badge--warn {
-  background: rgba(245, 165, 36, 0.15);
+  background: rgba(var(--warn-rgb), 0.16);
-  color: #f5a524;
+  color: var(--warn);
 }
 
 /* ── Per-book copy button ─────────────────────────────────── */
@@ -422,14 +448,14 @@ body {
   width: 32px;
   height: 32px;
   padding: 0;
-  border-radius: 8px;
+  border-radius: var(--radius-book);
-  background: rgba(108, 99, 255, 0.12);
+  background: rgba(var(--accent-rgb), 0.12);
   color: var(--accent);
-  border: 1px solid rgba(108, 99, 255, 0.25);
+  border: 1px solid rgba(var(--accent-rgb), 0.25);
 }
 
 .copy-btn:hover {
-  background: rgba(108, 99, 255, 0.25);
+  background: rgba(var(--accent-rgb), 0.25);
 }
 
 .copy-btn:disabled {
@@ -439,23 +465,23 @@ body {
 }
 
 .copy-btn--danger {
-  background: rgba(245, 101, 101, 0.12);
+  background: rgba(var(--err-rgb), 0.12);
   color: var(--err);
-  border-color: rgba(245, 101, 101, 0.25);
+  border-color: rgba(var(--err-rgb), 0.25);
 }
 
 .copy-btn--danger:hover {
-  background: rgba(245, 101, 101, 0.25);
+  background: rgba(var(--err-rgb), 0.25);
 }
 
 .copy-btn--ghost {
-  background: rgba(136, 136, 170, 0.08);
+  background: rgba(92, 115, 133, 0.08);
   color: var(--text-muted);
-  border-color: rgba(136, 136, 170, 0.2);
+  border-color: rgba(92, 115, 133, 0.2);
 }
 
 .copy-btn--ghost:hover {
-  background: rgba(136, 136, 170, 0.18);
+  background: rgba(92, 115, 133, 0.18);
 }
 
 /* ── Copy progress bar ────────────────────────────────────── */