From ae44441cfbe465f34ba9c6370041dc9d978966f4 Mon Sep 17 00:00:00 2001
From: Jonas Menzel <jonasmenzel2012@googlemail.com>
Date: Sun, 25 Oct 2026 19:55:07 +0100
Subject: [PATCH] New web UI with iPhone web app

Redesigned status, log, tag generator and settings pages: spool rings in
filament colour, live job card (progress and time left read from CC2
Control's /api/printer while a job runs), log page with filters, iOS-style
settings with a write/dry-run switch. On phones: bottom tab bar, printer
switcher, slot details in a bottom sheet. Dark mode follows the system.
Web app manifest and home screen icons for "Add to Home Screen".

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_014GcEk5tkfFSYD6NTF66NkC
---
 README.md                   |   9 +-
 app/bridge.py               |  29 +++
 app/static/icon-180.png     | Bin 0 -> 2768 bytes
 app/static/icon-192.png     | Bin 0 -> 3038 bytes
 app/static/icon-512.png     | Bin 0 -> 10005 bytes
 app/static/icon.svg         |   1 +
 app/templates/base.html     | 294 ++++++++++++++++++++-------
 app/templates/log.html      |  78 ++++++++
 app/templates/settings.html | 210 +++++++++++++-------
 app/templates/status.html   | 385 +++++++++++++++++++++++++++++-------
 app/templates/tags.html     | 207 ++++++++++++-------
 app/web.py                  |  17 ++
 tests/fakes.py              |   5 +
 tests/test_bridge.py        |  14 ++
 tests/test_web.py           |  11 +-
 tools/mock_env.py           |   7 +
 16 files changed, 982 insertions(+), 285 deletions(-)
 create mode 100644 app/static/icon-180.png
 create mode 100644 app/static/icon-192.png
 create mode 100644 app/static/icon-512.png
 create mode 100644 app/static/icon.svg
 create mode 100644 app/templates/log.html

diff --git a/README.md b/README.md
index b609971..121258a 100644
--- a/README.md
+++ b/README.md
@@ -15,7 +15,7 @@ Bridge zwischen der Canvas eines oder mehrerer **Elegoo Centauri Carbon 2** (Com
 | System | Zugriff |
 |---|---|
 | Drucker | **nur lesen**: `cat /opt/usr/canvas_record_info.json` per SSH. Kein MQTT, keine Druckerbefehle, keine Registrierung als MQTT-Client. |
-| CC2 Control | Spulenverwaltung: `GET /api/spools`, `POST /api/spools/save`, `/assign`, `/enable` (nur nach Bestätigung) |
+| CC2 Control | Spulenverwaltung: `GET /api/spools`, `POST /api/spools/save`, `/assign`, `/enable` (nur nach Bestätigung); während eines Drucks zusätzlich `GET /api/printer` (nur für Fortschritt und Restzeit in der Oberfläche) |
 | Spoolman | `GET /spool`, `PATCH /spool/{id}` (`location`), `PUT /spool/{id}/use` |
 
 **Dry-Run ist Standard.** Solange er aktiv ist, werden alle Schreibaktionen nur als „würde …“ protokolliert.
@@ -70,6 +70,13 @@ Ein Update von v1 übernimmt Einstellungen, Zuordnungen, Buchungsstände und den
 Drucker heißt danach „CC2“ (Ort bleibt „CC2 Slot N“) und kann in den Einstellungen umbenannt werden – Ort und
 Felder in Spoolman ziehen dann mit.
 
+### Am iPhone als Web-App
+
+`http://10.10.6.10:5066` in Safari öffnen → *Teilen* → **Zum Home-Bildschirm**. Die Bridge startet dann ohne
+Safari-Leiste mit eigenem Icon. Unten liegen die Tabs Status, Protokoll, Tags und Einstellungen; auf *Status*
+wechselt man oben zwischen den Druckern, ein Tipp auf einen Slot zeigt Details und die Aktionen. Hell/Dunkel folgt
+der Systemeinstellung. Offline-Modus und Push-Mitteilungen gibt es nicht (dafür bräuchte es HTTPS).
+
 ### Umgebungsvariablen
 
 Siehe [`.env.example`](.env.example). `PRINTER_HOST`, `SSH_PORT`, `SSH_USER`, `CC2_URL`, `SPOOLMAN_URL`,
diff --git a/app/bridge.py b/app/bridge.py
index 3ee5146..a1f1586 100644
--- a/app/bridge.py
+++ b/app/bridge.py
@@ -198,6 +198,7 @@ class PrinterWorker:
         self.tray_status: dict[int, int] = {}
         self.record: dict | None = None
         self.cc2_data: dict | None = None
+        self.print_info: dict | None = None  # CC2 Control /api/printer, only read while a job runs
 
     @property
     def id(self) -> str:
@@ -250,6 +251,12 @@ class PrinterWorker:
             self._error("cc2", None)
         except CC2Error as e:
             self._error("cc2", str(e))
+        self.print_info = None
+        if self.cc2_data is not None and (self.cc2_data.get("job") or {}).get("active"):
+            try:
+                self.print_info = self.cc2.printer()
+            except CC2Error:
+                pass  # progress is only shown in the UI; the spool list above is what counts
         if self.record is not None:
             self._process_record(self.record)
         self._process_scans()
@@ -693,9 +700,31 @@ class PrinterWorker:
             "cc2_enabled": None if cc2 is None else bool(cc2.get("enabled")),
             "job_active": None if cc2 is None else bool((cc2.get("job") or {}).get("active")),
             "host_key": self.bridge.keys.host_key(self.id) is not None,
+            "job": self._job_summary(),
             "slots": slots,
         }
 
+    def _job_summary(self) -> dict | None:
+        job = (self.cc2_data or {}).get("job") or {}
+        if not job.get("active"):
+            return None
+        used = [s for s in job.get("slots") or [] if isinstance(s, dict)]
+        info = self.print_info or {}
+        pr, machine = info.get("print") or {}, info.get("machine") or {}
+        progress = machine.get("progress")
+        return {
+            "file": str(job.get("file") or pr.get("filename") or "").rsplit("/", 1)[-1],
+            "started": job.get("started"),
+            "grams": round(sum(_num(s.get("grams")) for s in used), 2),
+            "slots": [{"slot": i, "grams": round(_num(s.get("grams")), 2)} for i, s in enumerate(used)
+                      if _num(s.get("grams")) > 0],
+            "progress": progress if isinstance(progress, (int, float)) else None,
+            "layer": pr.get("current_layer"),
+            "layers": pr.get("total_layers"),
+            "remaining": pr.get("remaining"),
+            "state": pr.get("state"),
+        }
+
 
 class Bridge:
     def __init__(self, data_dir: Path, settings: SettingsStore, keys: KeyStore, *,
diff --git a/app/static/icon-180.png b/app/static/icon-180.png
new file mode 100644
index 0000000000000000000000000000000000000000..083571468137f619090b00c4cae00c30b6d35ae7
GIT binary patch
literal 2768
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

literal 0
HcmV?d00001

diff --git a/app/static/icon-192.png b/app/static/icon-192.png
new file mode 100644
index 0000000000000000000000000000000000000000..c540ee9a0cf4882f06add3dc72f0e62510b059ee
GIT binary patch
literal 3038
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

literal 0
HcmV?d00001

diff --git a/app/static/icon-512.png b/app/static/icon-512.png
new file mode 100644
index 0000000000000000000000000000000000000000..3d8b215d53ea45b6acb05db1002a172a7ad9bab4
GIT binary patch
literal 10005
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
UQE4t4>J%9KV{-X}w*BM(1LFHYcK`qY

literal 0
HcmV?d00001

diff --git a/app/static/icon.svg b/app/static/icon.svg
new file mode 100644
index 0000000..51ed50d
--- /dev/null
+++ b/app/static/icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" rx="14" fill="#14181F"/><circle cx="32" cy="32" r="23" fill="none" stroke="#fff" stroke-width="4.5"/><circle cx="32" cy="32" r="12" fill="none" stroke="#6E8BFF" stroke-width="9"/><circle cx="32" cy="32" r="3" fill="#fff"/></svg>
diff --git a/app/templates/base.html b/app/templates/base.html
index ab8e2cf..6e04714 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -2,98 +2,223 @@
 <html lang="de">
 <head>
 <meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
 <title>{% block title %}CC2 Bridge{% endblock %}</title>
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-title" content="CC2 Bridge">
+<meta name="apple-mobile-web-app-status-bar-style" content="default">
+<meta name="theme-color" content="#EDEFF2" media="(prefers-color-scheme: light)">
+<meta name="theme-color" content="#0E1116" media="(prefers-color-scheme: dark)">
+<meta name="format-detection" content="telephone=no">
+<link rel="manifest" href="/manifest.webmanifest">
+<link rel="icon" href="/static/icon.svg" type="image/svg+xml">
+<link rel="apple-touch-icon" href="/static/icon-180.png">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
 <style>
 :root {
-  --bg: #f6f7f9; --panel: #ffffff; --text: #1d2330; --muted: #5d6677; --line: #dde1e8;
-  --accent: #2856d9; --accent-text: #fff; --ok: #1b7f3b; --warn: #a15c00; --err: #b3261e;
-  --ok-bg: #e7f5ec; --warn-bg: #fff4e0; --err-bg: #fde8e7; --dry-bg: #eef1ff; --code: #f0f2f5;
-  --radius: 8px;
+  --bg: #EDEFF2; --surface: #FFFFFF; --surface2: #F6F7F9; --ink: #14181F; --muted: #5B6472; --faint: #9AA3B0;
+  --line: #DCE0E6; --line2: #EDEFF2; --track: #E4E7EC;
+  --accent: #2F5BEA; --accent-ink: #FFFFFF; --accent-bg: #E6ECFD;
+  --ok: #17803D; --ok-bg: #E3F4E9; --warn: #9A5B00; --warn-bg: #FFF1DC; --err: #B42318; --err-bg: #FDE7E5; --err-line: #F3C6C1;
+  --hero: #14181F; --hero-ink: #FFFFFF; --hero-muted: #A9B3C2; --hero-track: #2B323D; --hero-accent: #6E8BFF; --hero-line: #3A4250;
+  --tabbar: rgba(255, 255, 255, .92);
+  --radius: 16px; --radius-sm: 10px;
+  --font: Manrope, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+  color-scheme: light;
 }
 @media (prefers-color-scheme: dark) {
   :root {
-    --bg: #14171c; --panel: #1c2027; --text: #e6e9ef; --muted: #9aa3b2; --line: #2e343e;
-    --accent: #6d8dff; --accent-text: #0d1020; --ok: #5cc982; --warn: #f0b55c; --err: #ff8a80;
-    --ok-bg: #16301f; --warn-bg: #33270f; --err-bg: #3a1a18; --dry-bg: #1e2340; --code: #232832;
+    --bg: #0E1116; --surface: #171B22; --surface2: #1E232C; --ink: #E8ECF2; --muted: #9AA4B2; --faint: #6B7482;
+    --line: #2A303A; --line2: #222731; --track: #2A303A;
+    --accent: #7C97FF; --accent-ink: #0B1230; --accent-bg: #1D2747;
+    --ok: #5CC98A; --ok-bg: #13291C; --warn: #F0B55C; --warn-bg: #33270F; --err: #FF8A80; --err-bg: #3A1A18; --err-line: #5A2622;
+    --hero: #1F2531; --hero-track: #333B48; --hero-line: #3F4857;
+    --tabbar: rgba(23, 27, 34, .92);
+    color-scheme: dark;
   }
 }
 * { box-sizing: border-box; }
-body { margin: 0; background: var(--bg); color: var(--text);
-  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
-header { background: var(--panel); border-bottom: 1px solid var(--line); }
-.wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
-header .wrap { display: flex; align-items: center; gap: 24px; min-height: 52px; flex-wrap: wrap; }
-header h1 { font-size: 16px; margin: 0; font-weight: 650; }
-nav { display: flex; gap: 4px; flex-wrap: wrap; }
-nav a { color: var(--muted); text-decoration: none; padding: 6px 10px; border-radius: 6px; }
-nav a.on, nav a:hover { color: var(--text); background: var(--code); }
-.mode { margin-left: auto; font-size: 13px; padding: 3px 10px; border-radius: 99px; font-weight: 600; }
-.mode.dry { background: var(--dry-bg); color: var(--accent); }
+html { -webkit-text-size-adjust: 100%; }
+body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.45 var(--font); -webkit-font-smoothing: antialiased;
+  -webkit-tap-highlight-color: transparent; }
+a { color: var(--accent); }
+
+/* top bar (wide screens) */
+.top { background: var(--surface); border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top); }
+.top .in { max-width: 1240px; margin: 0 auto; padding: 0 24px; min-height: 64px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
+.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; letter-spacing: -.01em; color: var(--ink); text-decoration: none; }
+.brand img { width: 30px; height: 30px; border-radius: 8px; }
+.top nav { display: flex; gap: 4px; flex-wrap: wrap; }
+.top nav a { text-decoration: none; color: var(--muted); padding: 8px 14px; border-radius: var(--radius-sm); font-weight: 600; }
+.top nav a:hover { color: var(--ink); }
+.top nav a.on { color: var(--ink); background: var(--bg); font-weight: 700; }
+.top .right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
+.poll { font-size: 13px; color: var(--muted); }
+
+/* mode pill */
+.mode { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 13px; padding: 6px 12px; border-radius: 99px;
+  text-decoration: none; white-space: nowrap; }
+.mode::before { content: ""; width: 8px; height: 8px; border-radius: 99px; background: currentColor; }
+.mode.dry { background: var(--accent-bg); color: var(--accent); }
 .mode.live { background: var(--err-bg); color: var(--err); }
-main { padding: 20px 0 48px; }
-h2 { font-size: 18px; margin: 28px 0 12px; }
-h2:first-child { margin-top: 0; }
-h3 { font-size: 15px; margin: 0 0 8px; }
-.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
-.grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
+.mode:empty { display: none; }
+
+main { max-width: 1240px; margin: 0 auto; padding: 28px 24px 56px; }
+.pagehead { display: none; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
+.pagehead h1 { margin: 0; font-size: 32px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
+h2 { font-size: 20px; font-weight: 800; letter-spacing: -.01em; margin: 0; }
+h3 { font-size: 15px; font-weight: 800; margin: 0; }
+
+/* tab bar (phones) */
+.tabbar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--tabbar);
+  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
+  border-top: 1px solid var(--line); padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
+  grid-template-columns: repeat(4, minmax(0, 1fr)); }
+.tabbar a { text-decoration: none; color: var(--muted); display: flex; flex-direction: column; align-items: center; justify-content: center;
+  gap: 3px; min-height: 48px; font-size: 11px; font-weight: 700; }
+.tabbar a.on { color: var(--accent); }
+.tabbar svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
+
+@media (max-width: 759px) {
+  .top { display: none; }
+  .tabbar { display: grid; }
+  main { padding: calc(14px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) calc(96px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
+  .pagehead { display: flex; }
+  .desktop-only { display: none !important; }
+}
+@media (min-width: 760px) { .phone-only { display: none !important; } }
+
+/* building blocks */
+.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
+@media (max-width: 759px) { .card { border: 0; } }
+.stack { display: flex; flex-direction: column; gap: 14px; }
+.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
 .muted { color: var(--muted); }
 .small { font-size: 13px; }
-.banner { border-radius: var(--radius); padding: 10px 14px; margin-bottom: 12px; display: flex; gap: 12px;
-  align-items: center; flex-wrap: wrap; }
+.mono { font-family: var(--mono); }
+.label { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
+.section-label { margin: 22px 4px 8px; }
+.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 99px;
+  background: var(--bg); color: var(--muted); white-space: nowrap; }
+.chip.dot::before { content: ""; width: 7px; height: 7px; border-radius: 99px; background: currentColor; }
+.chip.ok { background: var(--ok-bg); color: var(--ok); }
+.chip.warn { background: var(--warn-bg); color: var(--warn); }
+.chip.err { background: var(--err-bg); color: var(--err); }
+.chip.accent { background: var(--accent-bg); color: var(--accent); }
+.banner { border-radius: 14px; padding: 12px 14px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 14px; font-weight: 600; }
 .banner.err { background: var(--err-bg); color: var(--err); }
 .banner.warn { background: var(--warn-bg); color: var(--warn); }
 .banner.ok { background: var(--ok-bg); color: var(--ok); }
-.banner.dry { background: var(--dry-bg); color: var(--accent); }
-button, .btn { font: inherit; border: 1px solid var(--line); background: var(--panel); color: var(--text);
-  padding: 6px 12px; border-radius: 6px; cursor: pointer; }
-button.primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
-button.danger { color: var(--err); }
+.banner.dry { background: var(--accent-bg); color: var(--accent); }
+.banner a { color: inherit; }
+
+button, .btn { font: inherit; font-size: 14px; font-weight: 700; min-height: 40px; padding: 0 14px; border-radius: var(--radius-sm);
+  border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center;
+  justify-content: center; gap: 8px; text-decoration: none; }
+button:hover, .btn:hover { border-color: var(--faint); }
+button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
+button.danger { color: var(--err); border-color: var(--err-line); }
+button.plain { border: 0; background: transparent; color: var(--accent); padding: 0; min-height: 44px; }
 button:disabled { opacity: .5; cursor: default; }
-input, select, textarea { font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line);
-  border-radius: 6px; padding: 6px 8px; width: 100%; }
-textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
-label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
-.field { margin-bottom: 12px; }
-.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
-.row > .field { flex: 1 1 160px; }
-code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
-code { background: var(--code); padding: 1px 5px; border-radius: 4px; overflow-wrap: anywhere; }
-pre { background: var(--code); padding: 10px; border-radius: 6px; overflow-x: auto; white-space: pre-wrap;
-  word-break: break-all; margin: 0; }
-table { width: 100%; border-collapse: collapse; }
-th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
-th { font-size: 13px; color: var(--muted); font-weight: 600; }
+button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
+  outline: 2px solid var(--accent); outline-offset: 2px; }
+
+input, select, textarea { font: inherit; font-size: 16px; color: var(--ink); background: var(--surface2); border: 1px solid var(--line);
+  border-radius: var(--radius-sm); padding: 0 12px; min-height: 44px; width: 100%; }
+textarea { padding: 10px 12px; font-family: var(--mono); font-size: 13px; }
+input[type=color] { padding: 4px; width: 52px; flex: 0 0 52px; }
+.field { display: flex; flex-direction: column; gap: 5px; }
+.field > label, .flabel { font-size: 13px; color: var(--muted); font-weight: 600; }
+.fields { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
+
+/* iOS-style switch */
+.switch { position: relative; display: inline-flex; flex: 0 0 auto; }
+.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; min-height: 0; cursor: pointer; }
+.switch span { width: 52px; height: 32px; border-radius: 99px; background: var(--track); transition: background .2s; position: relative; }
+.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 99px; background: #fff;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s; }
+.switch input:checked + span { background: var(--ok); }
+.switch.danger input:checked + span { background: var(--err); }
+.switch input:checked + span::after { transform: translateX(20px); }
+.switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
+
+/* grouped lists */
+.group { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
+@media (max-width: 759px) { .group { border: 0; } }
+.item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-height: 56px; border-top: 1px solid var(--line2); }
+.item:first-child { border-top: 0; }
+.item .grow { flex: 1; min-width: 0; }
+.item .title { font-weight: 800; }
+.item .sub { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.chev { width: 8px; height: 14px; flex: 0 0 8px; fill: none; stroke: var(--faint); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
+button.item { width: 100%; text-align: left; border: 0; border-top: 1px solid var(--line2); border-radius: 0; background: transparent;
+  font-weight: inherit; font-size: inherit; color: inherit; justify-content: flex-start; }
+button.item:first-child { border-top: 0; }
+button.item:hover { background: var(--surface2); }
+
+.swatch { display: inline-block; width: 14px; height: 14px; border-radius: 99px; border: 1px solid var(--line); vertical-align: -2px; }
+.ring { border-radius: 99px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; box-shadow: inset 0 0 0 1px var(--line); }
+.ring > div { border-radius: 99px; background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center; }
+.icon-badge { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
+  font-weight: 800; font-size: 14px; background: var(--bg); color: var(--ink); }
+.icon-badge svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
+
+code { font-family: var(--mono); font-size: 13px; background: var(--surface2); padding: 1px 6px; border-radius: 6px; overflow-wrap: anywhere; }
+pre { font-family: var(--mono); font-size: 12px; background: var(--surface2); padding: 12px; border-radius: var(--radius-sm); overflow-x: auto;
+  white-space: pre-wrap; word-break: break-all; margin: 0; }
+table { width: 100%; border-collapse: collapse; font-size: 14px; }
+th, td { text-align: left; padding: 8px; border-bottom: 1px solid var(--line2); vertical-align: top; }
+th { font-size: 12px; color: var(--muted); font-weight: 700; }
 .table-wrap { overflow-x: auto; }
-.swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--line);
-  vertical-align: -2px; }
-.tag { display: inline-block; font-size: 12px; padding: 1px 7px; border-radius: 99px; background: var(--code); }
-.tag.ok { background: var(--ok-bg); color: var(--ok); }
-.tag.warn { background: var(--warn-bg); color: var(--warn); }
-.tag.err { background: var(--err-bg); color: var(--err); }
-.tag.dry { background: var(--dry-bg); color: var(--accent); }
-dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: 3px 12px; margin: 0; font-size: 14px; }
+dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; font-size: 14px; }
 dl.kv dt { color: var(--muted); }
 dl.kv dd { margin: 0; overflow-wrap: anywhere; }
-.toast { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); background: var(--text);
-  color: var(--bg); padding: 8px 14px; border-radius: 6px; opacity: 0; transition: opacity .2s; pointer-events: none; }
+
+dialog.sheet { border: 0; padding: 0; background: var(--surface); color: var(--ink); border-radius: 20px; width: min(480px, calc(100% - 32px));
+  max-height: calc(100% - 48px); box-shadow: 0 20px 60px rgba(0, 0, 0, .3); }
+dialog.sheet::backdrop { background: rgba(10, 12, 16, .45); }
+dialog.sheet .sheet-in { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 16px; }
+@media (max-width: 759px) {
+  dialog.sheet { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 22px 22px 0 0; max-height: 88vh; }
+  dialog.sheet .sheet-in { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
+  dialog.sheet .grip { display: block; }
+}
+.grip { display: none; width: 40px; height: 5px; border-radius: 99px; background: var(--line); margin: 0 auto -6px; }
+
+.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--ink);
+  color: var(--bg); padding: 10px 16px; border-radius: 12px; font-weight: 700; font-size: 14px; opacity: 0; transition: opacity .2s;
+  pointer-events: none; z-index: 50; max-width: calc(100% - 32px); }
+@media (max-width: 759px) { .toast { bottom: calc(88px + env(safe-area-inset-bottom)); } }
 .toast.show { opacity: 1; }
 </style>
+{% block head %}{% endblock %}
 </head>
 <body>
-<header><div class="wrap">
-  <h1>CC2 ↔ Spoolman</h1>
-  <nav>
-    <a href="/" class="{{ 'on' if active == 'status.html' }}">Status</a>
-    <a href="/tags" class="{{ 'on' if active == 'tags.html' }}">Tag-Generator</a>
-    <a href="/settings" class="{{ 'on' if active == 'settings.html' }}">Einstellungen</a>
+{% set tabs = [
+  ('/', 'status.html', 'Status', 'M12 3a9 9 0 1 0 0 18a9 9 0 1 0 0-18M12 8a4 4 0 1 0 0 8a4 4 0 1 0 0-8'),
+  ('/log', 'log.html', 'Protokoll', 'M8 6h12M8 12h12M8 18h12M4 6h.01M4 12h.01M4 18h.01'),
+  ('/tags', 'tags.html', 'Tags', 'M6 8.5a8 8 0 0 1 0 7M10 6a12 12 0 0 1 0 12M14 3.5a16 16 0 0 1 0 17'),
+  ('/settings', 'settings.html', 'Einstellungen', 'M4 7h10M18 7h2M4 17h4M12 17h8M16 5v4M10 15v4'),
+] %}
+<header class="top"><div class="in">
+  <a class="brand" href="/"><img src="/static/icon.svg" alt="">CC2 Bridge</a>
+  <nav aria-label="Hauptnavigation">
+    {% for href, name, label, icon in tabs %}<a href="{{ href }}" class="{{ 'on' if active == name }}" {% if active == name %}aria-current="page"{% endif %}>{{ 'Tag-Generator' if name == 'tags.html' else label }}</a>{% endfor %}
   </nav>
-  <span id="mode" class="mode"></span>
+  <div class="right"><span class="poll" id="lastpoll"></span><a href="/settings" class="mode" id="mode"></a></div>
 </div></header>
-<main><div class="wrap">
-{% block content %}{% endblock %}
-</div></main>
-<div id="toast" class="toast"></div>
+<main>
+  <div class="pagehead"><h1>{% block heading %}CC2 Bridge{% endblock %}</h1><a href="/settings" class="mode" id="mode2"></a></div>
+  {% block content %}{% endblock %}
+</main>
+<nav class="tabbar" aria-label="Hauptnavigation">
+  {% for href, name, label, icon in tabs %}<a href="{{ href }}" class="{{ 'on' if active == name }}" {% if active == name %}aria-current="page"{% endif %}><svg viewBox="0 0 24 24" aria-hidden="true"><path d="{{ icon }}"/></svg>{{ label }}</a>{% endfor %}
+</nav>
+<div id="toast" class="toast" role="status" aria-live="polite"></div>
 <script>
 const $ = (id) => document.getElementById(id);
 const esc = (v) => String(v ?? '').replace(/[&<>"']/g, (c) => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
@@ -119,11 +244,38 @@ async function copyText(text) {
   toast('Kopiert');
 }
 function fmtTime(t) { return t ? new Date(t * 1000).toLocaleString('de-DE') : '–'; }
-function setMode(dry) {
-  const m = $('mode');
-  m.textContent = dry ? 'Dry-Run' : 'Schreiben aktiv';
-  m.className = 'mode ' + (dry ? 'dry' : 'live');
+function fmtClock(t, sec) {
+  return t ? new Date(t * 1000).toLocaleTimeString('de-DE', sec ? {} : { hour: '2-digit', minute: '2-digit' }) : '–';
 }
+function fmtNum(v, d = 0) { return Number(v).toLocaleString('de-DE', { minimumFractionDigits: d, maximumFractionDigits: d }); }
+function setMode(dry) {
+  for (const id of ['mode', 'mode2']) {
+    const m = $(id);
+    m.textContent = dry ? 'Dry-Run' : 'Schreiben aktiv';
+    m.className = 'mode ' + (dry ? 'dry' : 'live');
+  }
+}
+function setPoll(t) { $('lastpoll').textContent = t ? 'Abgefragt ' + fmtClock(t, true) : ''; }
+function logIcon(e) {
+  if (e.level === 'error') return ['!', 'var(--err-bg)', 'var(--err)'];
+  if (e.level === 'warn') return ['!', 'var(--warn-bg)', 'var(--warn)'];
+  if (e.level === 'dry') return ['D', 'var(--accent-bg)', 'var(--accent)'];
+  if (/gebucht/.test(e.msg)) return ['g', 'var(--ok-bg)', 'var(--ok)'];
+  if (/fragt nach/.test(e.msg)) return ['↻', 'var(--warn-bg)', 'var(--warn)'];
+  if (/zugeordnet/.test(e.msg)) return ['+', 'var(--accent-bg)', 'var(--accent)'];
+  return ['✓', 'var(--bg)', 'var(--ink)'];
+}
+function splitPrinter(msg, names) {
+  // "erledigt: CC2 Links: in CC2 Control …" -> ["CC2 Links", "In CC2 Control …"]; the check mark already says "erledigt".
+  let pre = '';
+  if (msg.startsWith('erledigt: ')) msg = msg.slice(10);
+  else if (msg.startsWith('würde ')) { pre = 'würde '; msg = msg.slice(6); }
+  let printer = 'Bridge';
+  for (const n of names) if (msg.startsWith(n + ': ')) { printer = n; msg = msg.slice(n.length + 2); break; }
+  msg = pre + msg;
+  return [printer, msg.charAt(0).toUpperCase() + msg.slice(1)];
+}
+const CHEV = '<svg class="chev" viewBox="0 0 8 14" aria-hidden="true"><path d="M1 1l6 6-6 6"/></svg>';
 api('GET', '/api/settings').then((s) => setMode(s.dry_run)).catch(() => {});
 </script>
 {% block script %}{% endblock %}
diff --git a/app/templates/log.html b/app/templates/log.html
new file mode 100644
index 0000000..7ab0d54
--- /dev/null
+++ b/app/templates/log.html
@@ -0,0 +1,78 @@
+{% extends "base.html" %}
+{% block title %}CC2 Bridge – Protokoll{% endblock %}
+{% block heading %}Protokoll{% endblock %}
+{% block head %}
+<style>
+.wrap { max-width: 860px; }
+.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
+.chips button { border-radius: 99px; min-height: 36px; font-size: 13px; }
+.chips button[aria-pressed=true] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
+.day { margin: 18px 4px 8px; }
+.entries { padding: 0 14px; }
+.entry { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line2); }
+.entry:first-child { border-top: 0; }
+.entry .msg { font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
+.entry .meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
+</style>
+{% endblock %}
+{% block content %}
+<div class="wrap">
+  <div class="chips" id="chips"></div>
+  <div id="list"><div class="card muted">Lade …</div></div>
+</div>
+{% endblock %}
+{% block script %}
+<script>
+const FILTERS = [
+  ['all', 'Alle', () => true],
+  ['book', 'Buchungen', (e) => /gebucht/.test(e.msg) && e.level !== 'dry'],
+  ['warn', 'Hinweise', (e) => e.level === 'warn' || e.level === 'dry'],
+  ['error', 'Fehler', (e) => e.level === 'error'],
+];
+let FILTER = 'all', DATA = null;
+
+function renderChips() {
+  $('chips').innerHTML = FILTERS.map(([k, label]) =>
+    `<button aria-pressed="${k === FILTER}" onclick="setFilter('${k}')">${label}</button>`).join('');
+}
+function setFilter(k) { FILTER = k; renderChips(); render(); }
+
+function dayLabel(t) {
+  const d = new Date(t * 1000), today = new Date();
+  const start = (x) => new Date(x.getFullYear(), x.getMonth(), x.getDate()).getTime();
+  const diff = Math.round((start(today) - start(d)) / 86400000);
+  if (diff === 0) return 'Heute';
+  if (diff === 1) return 'Gestern';
+  return d.toLocaleDateString('de-DE', { weekday: 'long', day: 'numeric', month: 'long' });
+}
+
+function render() {
+  if (!DATA) return;
+  const names = (DATA.printers || []).map((p) => p.name);
+  const fn = FILTERS.find((f) => f[0] === FILTER)[2];
+  const groups = [];
+  for (const e of (DATA.log || []).filter(fn)) {
+    const day = dayLabel(e.time);
+    if (!groups.length || groups[groups.length - 1].day !== day) groups.push({ day, items: [] });
+    groups[groups.length - 1].items.push(e);
+  }
+  $('list').innerHTML = groups.map((g) => `<div class="label day">${esc(g.day)}</div>
+    <div class="group entries">${g.items.map((e) => {
+      const [ic, bg, fg] = logIcon(e), [pn, msg] = splitPrinter(e.msg, names);
+      return `<div class="entry"><div class="icon-badge" style="background:${bg};color:${fg}">${ic}</div>
+        <div style="flex:1;min-width:0"><div class="msg">${esc(msg)}</div>
+        <div class="meta">${esc(pn)} · <span class="mono">${fmtClock(e.time, true)}</span>${e.level === 'dry' ? ' · Dry-Run' : ''}</div></div></div>`;
+    }).join('')}</div>`).join('') || '<div class="card muted">Keine Einträge</div>';
+}
+
+async function load() {
+  try { DATA = await api('GET', '/api/status'); } catch (e) { $('list').innerHTML = `<div class="banner err">${esc(e.message)}</div>`; return; }
+  setMode(DATA.dry_run);
+  setPoll(DATA.last_poll);
+  render();
+}
+renderChips();
+load();
+setInterval(() => { if (!document.hidden) load(); }, 5000);
+</script>
+{% endblock %}
diff --git a/app/templates/settings.html b/app/templates/settings.html
index fa0555e..1a0f985 100644
--- a/app/templates/settings.html
+++ b/app/templates/settings.html
@@ -1,133 +1,193 @@
 {% extends "base.html" %}
 {% block title %}CC2 Bridge – Einstellungen{% endblock %}
+{% block heading %}Einstellungen{% endblock %}
+{% block head %}
+<style>
+.wrap { max-width: 860px; }
+.wrap > .label:first-child { margin-top: 0; }
+.modecard { display: flex; align-items: center; gap: 14px; }
+details.pr { border-top: 1px solid var(--line2); }
+details.pr:first-child { border-top: 0; }
+details.pr > summary { list-style: none; cursor: pointer; }
+details.pr > summary::-webkit-details-marker { display: none; }
+details.pr > summary .item { border: 0; }
+details.pr[open] > summary .chev { transform: rotate(90deg); }
+.chev { transition: transform .15s; }
+.prbody { padding: 4px 14px 16px; display: flex; flex-direction: column; gap: 14px; }
+.printer-icon { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 10px; background: var(--bg); display: flex; align-items: center; justify-content: center; }
+.printer-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
+.frow { display: flex; align-items: center; gap: 12px; padding: 8px 14px; min-height: 56px; border-top: 1px solid var(--line2); }
+.frow:first-child { border-top: 0; }
+.frow > label { flex: 1 1 200px; font-weight: 600; }
+.frow > label small { display: block; font-weight: 500; color: var(--muted); font-size: 12px; }
+.frow > input { flex: 0 1 260px; text-align: right; background: transparent; border-color: transparent; }
+.frow > input:focus { background: var(--surface2); border-color: var(--line); text-align: left; }
+@media (max-width: 759px) { .frow > input { flex-basis: 150px; } }
+.actions { display: flex; gap: 8px; flex-wrap: wrap; }
+.savebar { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
+</style>
+{% endblock %}
 {% block content %}
-<h2>Drucker</h2>
-<div id="printers"></div>
-<div class="row" style="margin-bottom:8px">
-  <button onclick="addPrinter()">Drucker hinzufügen</button>
-  <button class="primary" onclick="saveSettings()">Speichern</button>
-  <span id="saved1" class="small muted"></span>
-</div>
-<p class="small muted">Neue oder geänderte Drucker erst speichern, dann „Verbindung testen“.</p>
+<div class="wrap">
+  <div class="card modecard">
+    <div style="flex:1">
+      <div style="font-weight:800" id="modetitle">Schreiben aktiv</div>
+      <div class="small muted">Aus = Dry-Run: Schreibaktionen in CC2 Control und Spoolman werden nur protokolliert.</div>
+    </div>
+    <label class="switch danger"><input type="checkbox" id="write" aria-label="Schreiben aktiv"><span></span></label>
+  </div>
 
-<h2>Allgemein</h2>
-<form id="settings" class="panel" onsubmit="event.preventDefault(); saveSettings()">
-  <div class="row">
-    <div class="field"><label for="spoolman_url">Spoolman-URL</label><input id="spoolman_url" required></div>
-    <div class="field"><label for="id_offset">ID-Offset</label><input id="id_offset" type="number" min="0" max="65000"></div>
+  <div class="label section-label">Drucker</div>
+  <div class="group">
+    <div id="printers"></div>
+    <button class="item" style="color:var(--accent);font-weight:700;min-height:48px" onclick="addPrinter()">Drucker hinzufügen</button>
   </div>
-  <div class="row">
-    <div class="field"><label for="poll_interval">Abfrage-Intervall (s)</label><input id="poll_interval" type="number" step="0.5" min="1" max="300"></div>
-    <div class="field"><label for="empty_grace">Slot leer nach (s)</label><input id="empty_grace" type="number" min="0"></div>
-    <div class="field"><label for="settle_seconds">Buchen nach Ruhe (s)</label><input id="settle_seconds" type="number" min="0"></div>
-  </div>
-  <div class="row">
-    <div class="field"><label for="location_slot">Ort im Slot (<code>{printer}</code> = Druckername, <code>{n}</code> = 1–4)</label><input id="location_slot" required></div>
-    <div class="field"><label for="location_storage">Ort im Lager</label><input id="location_storage" required></div>
-  </div>
-  <div class="field">
-    <label style="color:var(--text)"><input type="checkbox" id="spoolman_fields" style="width:auto"> Zusatzfelder „Drucker“ und „Slot“ in Spoolman pflegen</label>
-  </div>
-  <div class="field">
-    <label style="color:var(--text)"><input type="checkbox" id="dry_run" style="width:auto"> Dry-Run (Schreibaktionen nur protokollieren)</label>
-  </div>
-  <div class="row"><button class="primary" type="submit">Speichern</button><span id="saved2" class="small muted"></span></div>
-</form>
+  <p class="small muted" style="margin:8px 4px 0">Neue oder geänderte Drucker erst speichern, dann „Verbindung testen“.</p>
 
-<h2>SSH-Schlüssel für die Drucker</h2>
-<div class="panel">
-  <div id="keyinfo" class="field muted">Lade …</div>
-  <div class="field">
-    <label for="keytext">Privaten Schlüssel einfügen (ed25519, ohne Passphrase) oder Datei wählen – gilt für alle Drucker</label>
-    <textarea id="keytext" rows="6" placeholder="-----BEGIN OPENSSH PRIVATE KEY-----" autocomplete="off" spellcheck="false"></textarea>
+  <form id="settings" onsubmit="event.preventDefault(); saveSettings()">
+    <div class="label section-label">Spoolman &amp; Buchung</div>
+    <div class="group">
+      <div class="frow"><label for="spoolman_url">Spoolman-URL</label><input id="spoolman_url" required inputmode="url" autocapitalize="off" spellcheck="false"></div>
+      <div class="frow"><label for="location_slot">Ort im Slot<small><code>{printer}</code> = Druckername, <code>{n}</code> = 1–4</small></label><input id="location_slot" required></div>
+      <div class="frow"><label for="location_storage">Ort im Lager</label><input id="location_storage" required></div>
+      <div class="frow"><label for="spoolman_fields">Zusatzfelder „Drucker“ und „Slot“ in Spoolman pflegen</label><span class="switch"><input type="checkbox" id="spoolman_fields"><span></span></span></div>
+    </div>
+
+    <div class="label section-label">Abfrage</div>
+    <div class="group">
+      <div class="frow"><label for="poll_interval">Abfrage-Intervall<small>Sekunden</small></label><input id="poll_interval" type="number" step="0.5" min="1" max="300" inputmode="decimal"></div>
+      <div class="frow"><label for="empty_grace">Slot leer nach<small>Sekunden</small></label><input id="empty_grace" type="number" min="0" inputmode="numeric"></div>
+      <div class="frow"><label for="settle_seconds">Buchen nach Ruhe<small>Sekunden</small></label><input id="settle_seconds" type="number" min="0" inputmode="numeric"></div>
+      <div class="frow"><label for="id_offset">ID-Offset<small>weight = Offset + Spoolman-ID</small></label><input id="id_offset" type="number" min="0" max="65000" inputmode="numeric"></div>
+    </div>
+    <div class="savebar"><button class="primary" type="submit">Speichern</button><span id="saved" class="small muted"></span></div>
+  </form>
+
+  <div class="label section-label">SSH-Schlüssel für die Drucker</div>
+  <div class="card stack">
+    <div id="keyinfo" class="muted">Lade …</div>
+    <details>
+      <summary class="small" style="font-weight:700;cursor:pointer;min-height:32px">Schlüssel ersetzen</summary>
+      <div class="stack" style="padding-top:10px">
+        <div class="field">
+          <label for="keytext">Privaten Schlüssel einfügen (ed25519, ohne Passphrase) oder Datei wählen – gilt für alle Drucker</label>
+          <textarea id="keytext" rows="6" placeholder="-----BEGIN OPENSSH PRIVATE KEY-----" autocomplete="off" spellcheck="false" autocapitalize="off"></textarea>
+        </div>
+        <input type="file" id="keyfile" style="padding:8px 12px">
+        <div class="actions"><button class="primary" onclick="saveKey()">Schlüssel speichern</button><button class="danger" onclick="deleteKey()">Schlüssel löschen</button></div>
+      </div>
+    </details>
+    <p class="small muted" style="margin:0">Der Schlüssel wird mit Dateirechten 600 im Daten-Volume gespeichert und nie wieder angezeigt.</p>
   </div>
-  <div class="row">
-    <input type="file" id="keyfile" style="flex:1 1 220px">
-    <button class="primary" onclick="saveKey()">Schlüssel speichern</button>
-    <button class="danger" onclick="deleteKey()">Schlüssel löschen</button>
-  </div>
-  <p class="small muted">Der Schlüssel wird mit Dateirechten 600 im Daten-Volume gespeichert und nie wieder angezeigt.</p>
 </div>
 {% endblock %}
 {% block script %}
 <script>
 const FIELDS = ['spoolman_url', 'id_offset', 'poll_interval', 'empty_grace', 'settle_seconds', 'location_slot', 'location_storage'];
 const PFIELDS = [['name', 'Name'], ['host', 'Drucker-IP'], ['ssh_port', 'SSH-Port'], ['ssh_user', 'SSH-Benutzer'], ['cc2_url', 'CC2-Control-URL']];
-let current = {}, printers = [], hostKeys = {}, saved = new Set();
+const PRINTER_ICON = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 4h16v16H4zM4 9h16M10 13h4"/></svg>';
+let current = {}, printers = [], hostKeys = {}, saved = new Set(), openIdx = new Set();
 
-function printerCard(p, i) {
-  const hk = hostKeys[p.id];
-  const isSaved = saved.has(p.id);
-  return `<div class="panel" style="margin-bottom:12px" id="pc${i}">
-    <div class="row">${PFIELDS.map(([f, l]) => `<div class="field"><label>${l}</label>
-      <input data-i="${i}" data-f="${f}" value="${esc(p[f])}" ${f === 'ssh_port' ? 'type="number" min="1" max="65535"' : ''}></div>`).join('')}</div>
-    <div class="row" style="align-items:center">
-      <label style="margin:0;color:var(--text);flex:0 0 auto"><input type="checkbox" data-i="${i}" data-f="enabled" ${p.enabled ? 'checked' : ''} style="width:auto"> Abfrage aktiv</label>
-      <span class="small" style="flex:1 1 200px">${isSaved ? (hk ? `Host-Key <code>${esc(hk.fingerprint)}</code>` : '<span class="tag warn">Host-Key nicht bestätigt</span>') : '<span class="tag">noch nicht gespeichert</span>'}</span>
-      ${isSaved ? `<button class="primary" onclick="testSSH(${i})">Verbindung testen</button>
-        <button onclick="forgetHost(${i})">Host-Key vergessen</button>` : ''}
-      <button class="danger" onclick="removePrinter(${i})">Entfernen</button>
+function printerItem(p, i) {
+  const hk = hostKeys[p.id], isSaved = saved.has(p.id);
+  const chip = !isSaved ? '<span class="chip">nicht gespeichert</span>'
+    : !p.enabled ? '<span class="chip">pausiert</span>'
+    : hk ? '<span class="chip ok">SSH ok</span>' : '<span class="chip warn">Host-Key fehlt</span>';
+  return `<details class="pr" ${openIdx.has(i) || !p.id ? 'open' : ''} data-i="${i}">
+    <summary><div class="item"><div class="printer-icon">${PRINTER_ICON}</div>
+      <div class="grow"><div class="title">${esc(p.name || 'Neuer Drucker')}</div><div class="sub mono">${esc(p.host || '–')}</div></div>
+      ${chip}${CHEV}</div></summary>
+    <div class="prbody">
+      <div class="fields">${PFIELDS.map(([f, l]) => `<div class="field"><label for="p${i}${f}">${l}</label>
+        <input id="p${i}${f}" data-i="${i}" data-f="${f}" value="${esc(p[f])}" ${f === 'ssh_port' ? 'type="number" min="1" max="65535" inputmode="numeric"' : 'autocapitalize="off" spellcheck="false"'}></div>`).join('')}</div>
+      <label class="row" style="gap:10px;font-weight:600"><span class="switch"><input type="checkbox" data-i="${i}" data-f="enabled" ${p.enabled ? 'checked' : ''}><span></span></span>Abfrage aktiv</label>
+      ${isSaved ? `<div class="small">${hk ? `Host-Key <code>${esc(hk.fingerprint)}</code>` : '<span style="color:var(--warn)">Host-Key nicht bestätigt – Verbindung testen.</span>'}</div>` : ''}
+      <div class="actions">
+        ${isSaved ? `<button class="primary" onclick="testSSH(${i})">Verbindung testen</button>
+          <button onclick="forgetHost(${i})">Host-Key vergessen</button>` : `<button class="primary" onclick="saveSettings()">Speichern</button>`}
+        <button class="danger" onclick="removePrinter(${i})">Entfernen</button>
+      </div>
+      <div id="test${i}"></div>
     </div>
-    <div id="test${i}" style="margin-top:10px"></div>
-  </div>`;
+  </details>`;
 }
 
 function renderPrinters() {
-  $('printers').innerHTML = printers.map(printerCard).join('') || '<div class="panel muted">Kein Drucker eingerichtet.</div>';
+  $('printers').innerHTML = printers.map(printerItem).join('') || '<div class="item muted">Kein Drucker eingerichtet.</div>';
+  document.querySelectorAll('#printers details.pr').forEach((d) => d.addEventListener('toggle', () => {
+    const i = Number(d.dataset.i);
+    if (d.open) openIdx.add(i); else openIdx.delete(i);
+  }));
   document.querySelectorAll('#printers input[data-f]').forEach((el) => el.addEventListener('input', () => {
     const p = printers[el.dataset.i];
     p[el.dataset.f] = el.type === 'checkbox' ? el.checked : el.value;
   }));
 }
-
 function addPrinter() {
   printers.push({ id: '', name: '', host: '', ssh_port: 22, ssh_user: 'root', cc2_url: 'http://', enabled: true });
+  openIdx.add(printers.length - 1);
   renderPrinters();
 }
-
 function removePrinter(i) {
   const p = printers[i];
   if (!confirm(`Drucker „${p.name || 'neu'}“ entfernen?\n\nSeine Spulen werden nach dem Speichern in Spoolman ins Lager gebucht.`)) return;
   printers.splice(i, 1);
+  openIdx.clear();
   renderPrinters();
+  toast('Zum Übernehmen speichern');
+}
+
+function showMode(dry) {
+  $('write').checked = !dry;
+  $('modetitle').textContent = dry ? 'Dry-Run aktiv' : 'Schreiben aktiv';
+  setMode(dry);
 }
 
 async function loadSettings() {
   current = await api('GET', '/api/settings');
   for (const f of FIELDS) $(f).value = current[f];
-  $('dry_run').checked = current.dry_run;
   $('spoolman_fields').checked = current.spoolman_fields;
   printers = current.printers.map((p) => ({ ...p }));
   saved = new Set(printers.map((p) => p.id));
-  setMode(current.dry_run);
+  showMode(current.dry_run);
 }
 
 async function saveSettings() {
   const body = { printers };
   for (const f of FIELDS) body[f] = $(f).value;
-  body.dry_run = $('dry_run').checked;
   body.spoolman_fields = $('spoolman_fields').checked;
-  if (current.dry_run && !body.dry_run && !confirm(
-    'Dry-Run ausschalten?\n\nDie Bridge legt dann Spulen in CC2 Control an, weist Slots zu, pflegt Ort und Zusatzfelder in Spoolman und bucht Verbrauch.')) return;
   try {
     current = await api('POST', '/api/settings', body);
     printers = current.printers.map((p) => ({ ...p }));
     saved = new Set(printers.map((p) => p.id));
-    setMode(current.dry_run);
-    const t = 'Gespeichert ' + new Date().toLocaleTimeString('de-DE');
-    $('saved1').textContent = t; $('saved2').textContent = t;
+    showMode(current.dry_run);
+    $('saved').textContent = 'Gespeichert ' + new Date().toLocaleTimeString('de-DE');
+    toast('Gespeichert');
     await loadSSH();
   } catch (e) { toast(e.message); }
 }
 
+$('write').addEventListener('change', async () => {
+  const on = $('write').checked;
+  if (on && !confirm('Dry-Run ausschalten?\n\nDie Bridge legt dann Spulen in CC2 Control an, weist Slots zu, pflegt Ort und Zusatzfelder in Spoolman und bucht Verbrauch.')) {
+    $('write').checked = false; return;
+  }
+  try {
+    current = await api('POST', '/api/settings', { dry_run: !on });
+    showMode(current.dry_run);
+    toast(current.dry_run ? 'Dry-Run aktiv' : 'Schreiben aktiv');
+  } catch (e) { toast(e.message); showMode(current.dry_run); }
+});
+
 function renderKey(info) {
   const k = info.key;
-  if (!k) { $('keyinfo').innerHTML = '<span class="tag warn">Kein Schlüssel hinterlegt</span>'; return; }
-  if (k.error) { $('keyinfo').innerHTML = `<span class="tag err">${esc(k.error)}</span>`; return; }
-  $('keyinfo').innerHTML = `<dl class="kv"><dt>Typ</dt><dd>${esc(k.type)}</dd><dt>Fingerprint</dt><dd><code>${esc(k.fingerprint)}</code></dd></dl>
-    <p class="small muted" style="margin:10px 0 4px">Zeile für <code>/root/.ssh/authorized_keys</code> auf jedem Drucker (öffentlicher Schlüssel, eingeschränkt):</p>
+  if (!k) { $('keyinfo').innerHTML = '<span class="chip warn">Kein Schlüssel hinterlegt</span>'; return; }
+  if (k.error) { $('keyinfo').innerHTML = `<span class="chip err">${esc(k.error)}</span>`; return; }
+  $('keyinfo').innerHTML = `<div class="row" style="flex-wrap:nowrap"><div style="flex:1;min-width:0"><div style="font-weight:700;color:var(--ink)">${esc(k.type)}</div>
+    <div class="mono small muted" style="overflow-wrap:anywhere">${esc(k.fingerprint)}</div></div></div>
+    <p class="small muted" style="margin:12px 0 6px">Zeile für <code>/root/.ssh/authorized_keys</code> auf jedem Drucker (öffentlicher Schlüssel, eingeschränkt):</p>
     <pre id="authline">command="cat /opt/usr/canvas_record_info.json",from="10.10.6.10",no-pty,no-port-forwarding,no-agent-forwarding,no-X11-forwarding ${esc(k.public)}</pre>
-    <button style="margin-top:6px" onclick="copyText($('authline').textContent)">Kopieren</button>`;
+    <button style="margin-top:8px" onclick="copyText($('authline').textContent)">Kopieren</button>`;
 }
 
 async function loadSSH() {
@@ -177,10 +237,10 @@ async function testSSH(i) {
   }).join('');
   let host = `<div class="banner ok">Verbunden. Host-Key <code>${esc(r.host_key.fingerprint)}</code> stimmt mit dem gespeicherten überein.</div>`;
   if (!r.host_key_pinned) {
-    host = `<div class="banner warn">Neuer Host-Key: <code>${esc(r.host_key.fingerprint)}</code> (${esc(r.host_key.type)}). Vergleichen und bestätigen.
+    host = `<div class="banner warn"><span style="flex:1 1 240px">Neuer Host-Key: <code>${esc(r.host_key.fingerprint)}</code> (${esc(r.host_key.type)}). Vergleichen und bestätigen.</span>
       <button class="primary" onclick="acceptHost(${i}, '${esc(r.host_key.fingerprint)}')">Bestätigen und speichern</button></div>`;
   }
-  out.innerHTML = host + `<div class="table-wrap"><table><thead><tr><th>Slot</th><th>Tag</th><th>weight</th><th>Spoolman-ID</th></tr></thead><tbody>${rows}</tbody></table></div>`;
+  out.innerHTML = host + `<div class="table-wrap" style="margin-top:10px"><table><thead><tr><th>Slot</th><th>Tag</th><th>weight</th><th>Spoolman-ID</th></tr></thead><tbody>${rows}</tbody></table></div>`;
 }
 
 async function acceptHost(i, fp) {
diff --git a/app/templates/status.html b/app/templates/status.html
index b417fd3..4acfdbb 100644
--- a/app/templates/status.html
+++ b/app/templates/status.html
@@ -1,68 +1,307 @@
 {% extends "base.html" %}
 {% block title %}CC2 Bridge – Status{% endblock %}
+{% block heading %}Status{% endblock %}
+{% block head %}
+<style>
+.layout { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
+.printers { flex: 999 1 640px; min-width: 0; display: flex; flex-direction: column; gap: 32px; }
+.aside { flex: 1 1 300px; min-width: 0; padding: 18px 18px 8px; }
+.phead { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
+.phead h2 { font-size: 24px; letter-spacing: -.02em; }
+.phead .chip { margin-left: auto; font-size: 13px; padding: 5px 12px; }
+.printer { display: flex; flex-direction: column; gap: 14px; }
+
+.job { background: var(--hero); color: var(--hero-ink); border-radius: var(--radius); padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
+.job .k { font-size: 12px; color: var(--hero-muted); }
+.job .v { font-family: var(--mono); font-size: 20px; }
+.job .file { font-weight: 700; font-size: 16px; overflow-wrap: anywhere; }
+.job .stats { display: flex; gap: 28px; flex-wrap: wrap; }
+.job .bar { height: 6px; border-radius: 99px; background: var(--hero-track); overflow: hidden; }
+.job .bar div { height: 6px; border-radius: 99px; background: var(--hero-accent); }
+.job .note { font-size: 13px; color: var(--hero-muted); }
+.job .label { color: var(--hero-muted); }
+
+.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
+.slot { display: flex; flex-direction: column; gap: 14px; min-height: 236px; }
+.slot .sh { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+.slot .sh b { font-size: 14px; font-weight: 800; }
+.spool { display: flex; gap: 14px; align-items: center; text-align: left; border: 0; background: none; padding: 0; min-height: 0;
+  border-radius: 12px; font-weight: inherit; color: inherit; width: 100%; }
+.spool:hover .nm { text-decoration: underline; }
+.spool .nm { font-weight: 800; font-size: 16px; overflow-wrap: anywhere; }
+.facts { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
+.facts div { display: flex; justify-content: space-between; gap: 8px; }
+.facts span:first-child { color: var(--muted); }
+.facts span:last-child { text-align: right; }
+.slot .acts { margin-top: auto; display: flex; gap: 8px; }
+.slot .acts button { flex: 1; font-size: 13px; min-height: 36px; padding: 0 8px; }
+.emptybox { flex: 1; border: 2px dashed var(--line); border-radius: 12px; display: flex; align-items: center; justify-content: center;
+  color: var(--muted); font-size: 13px; font-weight: 600; min-height: 100px; }
+.dashed { border: 3px dashed var(--faint); }
+.hint { margin: 0; font-size: 13px; color: var(--muted); }
+.hint.warn { color: var(--warn); }
+
+.seg { display: grid; gap: 4px; background: var(--line); padding: 4px; border-radius: 12px; }
+.seg button { border: 0; min-height: 36px; border-radius: 9px; background: transparent; color: var(--muted); font-weight: 600; }
+.seg button[aria-selected=true] { background: var(--surface); color: var(--ink); font-weight: 700; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
+.seg button::before { content: ""; width: 7px; height: 7px; border-radius: 99px; background: var(--dot, var(--faint)); }
+
+.logrow { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line2); }
+.logrow .msg { font-size: 14px; overflow-wrap: anywhere; }
+.logrow .meta { font-size: 12px; color: var(--muted); }
+.lastbook { display: flex; gap: 12px; align-items: center; }
+
+@media (max-width: 759px) {
+  .printer:not(.sel) { display: none; }
+  .printers { gap: 14px; }
+  .phead { display: none; }
+  .single .phead { display: flex; }
+  .job { padding: 16px; }
+  .job .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
+  .job .v { font-size: 17px; }
+}
+</style>
+{% endblock %}
 {% block content %}
-<div id="banners"></div>
-<div id="printers"><div class="panel muted">Lade …</div></div>
-<p class="small muted" id="lastpoll"></p>
-<h2>Protokoll</h2>
-<div class="panel table-wrap">
-  <table><thead><tr><th style="width:170px">Zeit</th><th style="width:80px"></th><th>Aktion</th></tr></thead>
-  <tbody id="log"></tbody></table>
+<div id="banners" class="stack" style="margin-bottom:14px"></div>
+<div id="seg" class="seg phone-only" role="tablist" aria-label="Drucker" style="margin-bottom:14px"></div>
+<div class="layout">
+  <div id="printers" class="printers"><div class="card muted">Lade …</div></div>
+  <aside class="card aside desktop-only" aria-label="Protokoll">
+    <div class="row" style="justify-content:space-between;margin-bottom:6px"><h2 style="font-size:17px">Protokoll</h2><a href="/log" class="small" style="font-weight:700;text-decoration:none">Alle</a></div>
+    <div id="log"></div>
+  </aside>
 </div>
+<dialog id="sheet" class="sheet" aria-labelledby="sheet-title"><div class="sheet-in" id="sheet-in"></div></dialog>
 {% endblock %}
 {% block script %}
 <script>
 const QUESTION = { inserted: 'eingelegt', changed: 'geändert' };
-const TRAY = { 0: ['leer', 'warn'], 1: ['eingelegt', 'ok'], 2: ['fördert', 'ok'] };
-const LEVEL = { info: ['Info', ''], warn: ['Warnung', 'warn'], error: ['Fehler', 'err'], dry: ['Dry-Run', 'dry'] };
+const TRAY = { 0: ['leer', ''], 1: ['eingelegt', 'ok'], 2: ['fördert', 'accent'] };
+let ST = null, NAMES = {}, SEL = null, SHEET = null;
+try { SEL = localStorage.getItem('printer'); } catch (e) {}
 
-function colorOf(ch) {
-  const c = (ch.color || '').replace(/^0x/i, '');
-  return /^[0-9a-f]{6}$/i.test(c) ? c : null;
+function hex(c) { c = String(c || '').replace(/^0x|^#/i, ''); return /^[0-9a-f]{6}$/i.test(c) ? '#' + c : null; }
+
+function kindOf(s) {
+  if (s.mapping) return 'managed';
+  if (s.takeout) return 'takeout';
+  if (s.tray_status === 1 || s.tray_status === 2) return 'unmanaged';
+  return 'empty';
 }
 
-function slotCard(p, s) {
-  const ch = s.record.channel || {};
-  const tray = TRAY[s.tray_status];
-  const col = colorOf(ch);
-  const m = s.mapping, sm = s.spoolman, cc = s.cc2_spool;
-  let tag = '<span class="muted">kein Tag</span>';
-  if (s.record.occupied) {
-    tag = `${col ? `<span class="swatch" style="background:#${col}"></span> ` : ''}${esc(ch.detailed_type || ch.type)}` +
-      ` <span class="muted small">${esc(ch.manufacturer)}, weight ${esc(ch.weight)}</span>`;
+function info(s) {
+  const m = s.mapping, sm = s.spoolman, cc = s.cc2_spool, ch = s.record.channel || {};
+  const kind = kindOf(s);
+  const tagColor = hex(ch.color);
+  const out = { kind, tray: TRAY[s.tray_status] };
+  if (kind === 'managed') {
+    const rest = cc ? Number(cc.remaining) : (sm && sm.remaining != null ? Number(sm.remaining) : null);
+    const initial = (sm && sm.initial) || 1000;
+    out.color = (sm && hex(sm.color)) || tagColor || '#9AA3B0';
+    out.rest = rest; out.initial = initial;
+    out.pct = rest == null ? 0 : Math.max(0, Math.min(100, rest / initial * 100));
+    out.title = m.name || ('Spule ' + m.spool);
+    out.sub = sm ? [sm.vendor, sm.material].filter(Boolean).join(' ') : '';
+    if (s.cc2_matches) out.cc2 = ['zugewiesen', 'ok'];
+    else out.cc2 = m.cc2 ? ['nicht zugewiesen', 'warn'] : ['noch nicht angelegt', 'warn'];
+    if (s.cc2_question) out.question = 'CC2 fragt: Spule ' + (QUESTION[s.cc2_question] || s.cc2_question);
+  } else if (kind === 'takeout') {
+    out.title = s.takeout.name; out.color = tagColor || '#9AA3B0';
+    out.sub = 'In CC2 Control herausgenommen';
+    out.hint = `${s.takeout.name} steht in Spoolman im Lager, steckt aber noch. Was dieser Slot druckt, bucht die Bridge trotzdem auf ${s.takeout.name}, bis die Rolle entnommen wird. Wieder zuordnen: Rolle herausnehmen und neu einlegen.`;
+  } else if (kind === 'unmanaged') {
+    out.color = tagColor;
+    out.sub = s.record.occupied ? [ch.manufacturer, ch.detailed_type || ch.type].filter(Boolean).join(' ') : 'Rolle ohne Tag-Daten';
+    if (s.record.spool_id != null) {
+      out.title = 'Tag ' + s.record.spool_id + ' ohne Zuordnung';
+      out.hint = `Tag ${s.record.spool_id} steht noch im Slot, ist aber keiner Rolle zugeordnet. Liegt diese Rolle hier, sie herausnehmen und neu einlegen (oder in CC2 Control auswählen).`;
+    } else {
+      out.title = 'Ohne Spoolman-Tag';
+      out.hint = 'Verbrauch wird nicht gebucht. Rolle taggen und scannen, um sie zu verwalten.';
+    }
   }
-  let assign = '<span class="muted">–</span>';
-  if (m) {
-    assign = s.cc2_matches ? '<span class="tag ok">zugewiesen</span>'
-      : (m.cc2 ? '<span class="tag warn">nicht zugewiesen</span>' : '<span class="tag warn">noch nicht angelegt</span>');
-  }
-  if (s.cc2_question) assign += ` <span class="tag warn">CC2 fragt: Spule ${esc(QUESTION[s.cc2_question] || s.cc2_question)}</span>`;
-  const orphan = !m && !s.takeout && s.record.spool_id != null && (s.tray_status === 1 || s.tray_status === 2);
-  const lb = s.last_booking;
-  return `<div class="panel">
-    <h3>Slot ${s.slot + 1} ${tray ? `<span class="tag ${tray[1]}">${tray[0]}</span>` : ''}</h3>
-    <p class="small muted" style="margin:-4px 0 8px">Ort in Spoolman: ${esc(s.location)}</p>
-    <dl class="kv">
-      <dt>Tag</dt><dd>${tag}</dd>
-      <dt>Tag-ID</dt><dd>${s.record.spool_id ?? '<span class="muted">–</span>'}</dd>
-      <dt>Spoolman</dt><dd>${m ? `${sm && sm.color ? `<span class="swatch" style="background:#${sm.color}"></span> ` : ''}<b>${esc(m.name || m.spool)}</b> <span class="muted">#${m.spool}</span>` +
-        (sm ? `<br><span class="small muted">${esc(sm.vendor)} ${esc(sm.material)}, Rest ${sm.remaining != null ? Math.round(sm.remaining) + ' g' : '?'}</span>` : '') : '<span class="muted">nicht zugeordnet</span>'}</dd>
-      <dt>CC2 Control</dt><dd>${cc ? esc(cc.name) + ` <span class="small muted">Rest ${Number(cc.remaining).toFixed(1)} g</span><br>` : ''}${assign}</dd>
-      <dt>Buchung</dt><dd>${lb ? `${lb.grams.toFixed(2)} g <span class="small muted">${fmtTime(lb.time)}</span>` +
-        (lb.details ? `<br><span class="small muted">${esc(lb.details)}</span>` : '') : '<span class="muted">–</span>'}</dd>
-    </dl>
-    ${s.takeout ? `<p class="small" style="margin:10px 0 0;color:var(--warn)">${esc(s.takeout.name)} wurde in CC2 Control herausgenommen
-      und steht in Spoolman im Lager, steckt aber noch. Was dieser Slot druckt, bucht die Bridge trotzdem auf ${esc(s.takeout.name)},
-      bis die Rolle entnommen wird. Wieder zuordnen: Rolle herausnehmen und neu einlegen.</p>` : ''}
-    ${orphan ? `<p class="small" style="margin:10px 0 0;color:var(--warn)">Tag ${s.record.spool_id} steht noch im Slot, ist aber keiner Rolle
-      zugeordnet. Liegt diese Rolle hier, sie herausnehmen und neu einlegen (oder in CC2 Control auswählen).</p>` : ''}
-    ${m ? `<div class="row" style="margin-top:10px">
-      <button onclick="slotAction('${p.id}', ${s.slot}, 'reassign')">Zuordnung erneut senden</button>
-      <button class="danger" onclick="slotAction('${p.id}', ${s.slot}, 'release')">Aufheben</button></div>` : ''}
+  return out;
+}
+
+function ringHtml(i, size, hole, inner) {
+  const bg = i.kind === 'managed'
+    ? `conic-gradient(${i.color} 0 ${i.pct}%, var(--track) ${i.pct}% 100%)`
+    : (i.kind === 'empty' ? 'var(--bg)' : 'var(--surface)');
+  const cls = i.kind === 'unmanaged' || i.kind === 'takeout' ? ' dashed' : '';
+  return `<div class="ring${cls}" style="width:${size}px;height:${size}px;background:${bg}" aria-hidden="true">
+    <div style="width:${hole}px;height:${hole}px">${inner}</div></div>`;
+}
+
+function stateOf(p) {
+  if (!p.enabled) return ['Pausiert', ''];
+  if (Object.values(p.errors || {}).some(Boolean)) return ['Fehler', 'err'];
+  if (p.cc2_enabled === false) return ['Verwaltung aus', 'warn'];
+  if (p.job_active) return ['Druckt', 'accent'];
+  return ['Bereit', 'ok'];
+}
+
+function fmtLeft(sec) {
+  if (sec == null || sec < 0) return '–';
+  const h = Math.floor(sec / 3600), m = Math.round((sec % 3600) / 60);
+  return h ? `${h}:${String(m).padStart(2, '0')} h` : `${m} min`;
+}
+
+function jobCard(p) {
+  const j = p.job;
+  if (!j) return '';
+  const prog = j.progress != null ? Math.round(j.progress) : null;
+  return `<div class="job">
+    <div class="row" style="justify-content:space-between;gap:8px">
+      <span class="label">Druck läuft</span>
+      ${j.layer ? `<span class="mono small" style="color:var(--hero-muted)">Schicht ${j.layer}/${j.layers || '?'}</span>` : ''}
+    </div>
+    <div class="file">${esc(j.file || 'Unbekannte Datei')}</div>
+    ${prog != null ? `<div class="bar"><div style="width:${prog}%"></div></div>` : ''}
+    <div class="stats">
+      <div><div class="k">Fortschritt</div><div class="v">${prog != null ? prog + '%' : '–'}</div></div>
+      <div><div class="k">Restzeit</div><div class="v">${fmtLeft(j.remaining)}</div></div>
+      <div><div class="k">Verbraucht</div><div class="v">${fmtNum(j.grams, 1)} g</div></div>
+    </div>
+    <div class="note">Wird nach Druckende auf die Spoolman-Spulen gebucht.</div>
   </div>`;
 }
 
-let NAMES = {};
+function slotCard(p, s) {
+  const i = info(s), lb = s.last_booking;
+  const tray = i.tray ? `<span class="chip ${i.tray[1]}">${i.tray[0]}</span>` : '';
+  let body;
+  if (i.kind === 'managed') {
+    body = `<button class="spool" onclick="openSheet('${p.id}', ${s.slot})">
+        ${ringHtml(i, 76, 54, `<span class="mono" style="font-size:14px;line-height:1">${i.rest == null ? '?' : Math.round(i.rest)}</span><span style="font-size:10px;color:var(--muted)">g</span>`)}
+        <span style="min-width:0"><span class="nm" style="display:block">${esc(i.title)} <span class="muted small" style="font-weight:500">#${s.mapping.spool}</span></span>
+        <span class="small muted" style="display:block">${esc(i.sub)}</span>
+        <span class="small muted" style="display:block">von ${Math.round(i.initial)} g</span></span>
+      </button>
+      <div class="facts">
+        <div><span>CC2 Control</span><span style="font-weight:700;color:var(--${i.cc2[1]})">${i.cc2[0]}</span></div>
+        ${i.question ? `<div><span></span><span class="chip warn">${esc(i.question)}</span></div>` : ''}
+        <div><span>Zuletzt gebucht</span><span class="mono">${lb ? fmtNum(lb.grams, 2) + ' g · ' + fmtClock(lb.time) : '–'}</span></div>
+      </div>
+      <div class="acts">
+        <button onclick="slotAction('${p.id}', ${s.slot}, 'reassign')">Erneut senden</button>
+        <button class="danger" onclick="slotAction('${p.id}', ${s.slot}, 'release')">Aufheben</button>
+      </div>`;
+  } else if (i.kind === 'empty') {
+    body = '<div class="emptybox">Kein Filament</div>';
+  } else {
+    body = `<button class="spool" onclick="openSheet('${p.id}', ${s.slot})">
+        ${ringHtml(i, 76, 54, i.color ? `<span class="swatch" style="width:22px;height:22px;background:${i.color}"></span>` : '')}
+        <span style="min-width:0"><span class="nm" style="display:block;font-size:15px">${esc(i.title)}</span>
+        <span class="small muted" style="display:block">${esc(i.sub)}</span></span>
+      </button>
+      <p class="hint${i.kind === 'takeout' ? ' warn' : ''}" style="margin-top:auto">${esc(i.hint)}</p>`;
+  }
+  return `<article class="card slot"><div class="sh"><b>Slot ${s.slot + 1}</b>${tray}</div>${body}</article>`;
+}
+
+function slotRow(p, s) {
+  const i = info(s);
+  const inner = `<span style="font-weight:800;font-size:13px">${s.slot + 1}</span>`;
+  let title = i.title, sub = i.sub, rest = '';
+  if (i.kind === 'empty') { title = 'Leer'; sub = 'Kein Filament'; }
+  if (i.kind === 'managed') {
+    rest = i.rest == null ? '?' : Math.round(i.rest) + ' g';
+    sub = [i.sub, '#' + s.mapping.spool, i.question || i.cc2[0]].filter(Boolean).join(' · ');
+  }
+  const tray = i.tray || ['', ''];
+  const trayColor = { ok: 'var(--ok)', accent: 'var(--accent)' }[tray[1]] || 'var(--muted)';
+  const tag = i.kind === 'empty' ? 'div' : 'button';
+  return `<${tag} class="item" ${tag === 'button' ? `onclick="openSheet('${p.id}', ${s.slot})"` : ''}>
+    ${ringHtml(i, 48, 32, inner)}
+    <span class="grow"><span class="title" style="display:block">${esc(title)}</span><span class="sub" style="display:block">${esc(sub)}</span></span>
+    <span style="text-align:right"><span class="mono" style="display:block">${rest}</span><span style="display:block;font-size:12px;font-weight:700;color:${trayColor}">${tray[0]}</span></span>
+    ${tag === 'button' ? CHEV : '<span style="width:8px"></span>'}
+  </${tag}>`;
+}
+
+function lastBooking(p) {
+  const b = p.slots.map((s) => s.last_booking && { ...s.last_booking, name: s.mapping && s.mapping.name, spool: s.mapping && s.mapping.spool })
+    .filter(Boolean).sort((a, b) => b.time - a.time)[0];
+  if (!b) return '';
+  return `<div class="card lastbook phone-only">
+    <div class="icon-badge" style="background:var(--ok-bg);color:var(--ok)">g</div>
+    <div style="min-width:0"><div class="small muted">Letzte Buchung · ${fmtClock(b.time)}</div>
+    <div style="font-weight:700;font-size:14px">${fmtNum(b.grams, 2)} g auf ${esc(b.name || '')}${b.spool ? ` (Spoolman ${b.spool})` : ''}</div>
+    ${b.details ? `<div class="small muted" style="overflow-wrap:anywhere">${esc(b.details)}</div>` : ''}</div>
+  </div>`;
+}
+
+function printerSection(p) {
+  const st = stateOf(p), pb = [];
+  if (!p.enabled) pb.push('<div class="banner warn">Abfrage pausiert (in den Einstellungen deaktiviert).</div>');
+  else if (ST.ssh_key && !p.host_key) pb.push('<div class="banner warn">Host-Key noch nicht bestätigt. <a href="/settings">Verbindung testen</a></div>');
+  if (p.cc2_enabled === false) pb.push(`<div class="banner err"><span style="flex:1 1 220px">Spulenverwaltung in CC2 Control ist ausgeschaltet. Verbrauch wird nicht gezählt.</span><button class="primary" onclick="enableCC2('${p.id}')">Einschalten …</button></div>`);
+  for (const v of Object.values(p.errors || {})) if (v) pb.push(`<div class="banner err">${esc(v)}</div>`);
+  return `<section class="printer${p.id === SEL ? ' sel' : ''}" aria-label="${esc(p.name)}">
+    <div class="phead"><h2>${esc(p.name)}</h2><span class="mono small muted host">${esc(p.host)}</span><span class="chip dot ${st[1]}">${st[0]}</span></div>
+    ${pb.join('')}
+    ${jobCard(p)}
+    <div class="slots desktop-only">${p.slots.map((s) => slotCard(p, s)).join('')}</div>
+    <div class="group phone-only">${p.slots.map((s) => slotRow(p, s)).join('')}</div>
+    ${lastBooking(p)}
+  </section>`;
+}
+
+function renderSeg(printers) {
+  const seg = $('seg');
+  if (printers.length < 2) { seg.style.display = 'none'; return; }
+  seg.style.display = '';
+  seg.style.gridTemplateColumns = `repeat(${printers.length}, minmax(0, 1fr))`;
+  const dot = { ok: 'var(--ok)', accent: 'var(--accent)', err: 'var(--err)', warn: 'var(--warn)' };
+  seg.innerHTML = printers.map((p) => `<button role="tab" aria-selected="${p.id === SEL}" style="--dot:${dot[stateOf(p)[1]] || 'var(--faint)'}"
+    onclick="selectPrinter('${p.id}')">${esc(p.name)}</button>`).join('');
+}
+function selectPrinter(id) {
+  SEL = id;
+  try { localStorage.setItem('printer', id); } catch (e) {}
+  render();
+}
+
+function sheetHtml(p, s) {
+  const i = info(s), m = s.mapping, sm = s.spoolman, cc = s.cc2_spool, ch = s.record.channel || {}, lb = s.last_booking;
+  const rows = [];
+  rows.push(['Tag', s.record.occupied ? `${hex(ch.color) ? `<span class="swatch" style="background:${hex(ch.color)}"></span> ` : ''}${esc(ch.detailed_type || ch.type)} <span class="muted small">${esc(ch.manufacturer)}</span>` : '<span class="muted">kein Tag</span>']);
+  rows.push(['Tag-ID', s.record.spool_id ?? '<span class="muted">–</span>']);
+  if (m) rows.push(['Spoolman', `${sm && sm.color ? `<span class="swatch" style="background:#${sm.color}"></span> ` : ''}<b>${esc(m.name || m.spool)}</b> <span class="muted">#${m.spool}</span>` +
+    (sm ? `<br><span class="small muted">${esc(sm.vendor)} ${esc(sm.material)}${sm.name ? ' · ' + esc(sm.name) : ''}, Rest ${sm.remaining != null ? Math.round(sm.remaining) + ' g' : '?'}</span>` : '')]);
+  rows.push(['CC2 Control', (cc ? `${esc(cc.name)} <span class="small muted">Rest ${fmtNum(cc.remaining, 1)} g</span><br>` : '') +
+    (i.cc2 ? `<span class="chip ${i.cc2[1]}">${i.cc2[0]}</span>` : '<span class="muted">–</span>') + (i.question ? ` <span class="chip warn">${esc(i.question)}</span>` : '')]);
+  rows.push(['Ort in Spoolman', esc(s.location)]);
+  rows.push(['Buchung', lb ? `${fmtNum(lb.grams, 2)} g <span class="small muted">${fmtTime(lb.time)}</span>${lb.details ? `<br><span class="small muted">${esc(lb.details)}</span>` : ''}` : '<span class="muted">–</span>']);
+  const inner = i.kind === 'managed' ? `<span class="mono" style="font-size:15px;line-height:1">${i.rest == null ? '?' : Math.round(i.rest)}</span><span style="font-size:10px;color:var(--muted)">g</span>` : '';
+  return `<div class="grip"></div>
+    <div class="row" style="flex-wrap:nowrap;gap:14px">
+      ${ringHtml(i, 64, 44, inner)}
+      <div style="flex:1;min-width:0"><div class="small muted">${esc(p.name)} · Slot ${s.slot + 1}${i.tray ? ' · ' + i.tray[0] : ''}</div>
+      <h2 id="sheet-title" style="overflow-wrap:anywhere">${esc(i.title || 'Leer')}</h2>${i.sub ? `<div class="small muted">${esc(i.sub)}</div>` : ''}</div>
+      <button aria-label="Schließen" onclick="closeSheet()" style="min-width:40px;padding:0;border-radius:99px">✕</button>
+    </div>
+    ${i.hint ? `<p class="hint${i.kind === 'takeout' ? ' warn' : ''}">${esc(i.hint)}</p>` : ''}
+    <dl class="kv">${rows.map(([k, v]) => `<dt>${k}</dt><dd>${v}</dd>`).join('')}</dl>
+    ${m ? `<div class="row" style="flex-wrap:nowrap"><button style="flex:1;min-height:48px" onclick="slotAction('${p.id}', ${s.slot}, 'reassign')">Erneut senden</button>
+      <button class="danger" style="flex:1;min-height:48px" onclick="slotAction('${p.id}', ${s.slot}, 'release')">Aufheben</button></div>` : ''}`;
+}
+function openSheet(pid, slot) {
+  SHEET = { pid, slot };
+  renderSheet();
+  if (!$('sheet').open) $('sheet').showModal();
+}
+function renderSheet() {
+  if (!SHEET || !ST) return;
+  const p = ST.printers.find((x) => x.id === SHEET.pid);
+  if (!p) { closeSheet(); return; }
+  $('sheet-in').innerHTML = sheetHtml(p, p.slots[SHEET.slot]);
+}
+function closeSheet() { SHEET = null; if ($('sheet').open) $('sheet').close(); }
+$('sheet').addEventListener('close', () => { SHEET = null; });
+$('sheet').addEventListener('click', (ev) => { if (ev.target === $('sheet')) closeSheet(); });
+
 async function slotAction(pid, slot, action) {
   const name = NAMES[pid] || pid;
   const text = action === 'release'
@@ -83,33 +322,37 @@ async function enableCC2(pid) {
   } catch (e) { toast(e.message); }
 }
 
-async function load() {
-  let st;
-  try { st = await api('GET', '/api/status'); } catch (e) { $('banners').innerHTML = `<div class="banner err">${esc(e.message)}</div>`; return; }
-  setMode(st.dry_run);
+function render() {
+  const st = ST, printers = st.printers || [];
+  if (!printers.some((p) => p.id === SEL)) SEL = printers.length ? printers[0].id : null;
   const b = [];
   if (st.dry_run) b.push('<div class="banner dry">Dry-Run aktiv: Schreibaktionen werden nur protokolliert („würde …“). Umschalten unter Einstellungen.</div>');
   if (!st.ssh_key) b.push('<div class="banner warn">Kein SSH-Schlüssel hinterlegt. <a href="/settings">Einstellungen</a></div>');
   if (st.spoolman_error) b.push(`<div class="banner err">${esc(st.spoolman_error)}</div>`);
   $('banners').innerHTML = b.join('');
-  NAMES = Object.fromEntries((st.printers || []).map((p) => [p.id, p.name]));
-  if (st.printers) $('printers').innerHTML = st.printers.map((p) => {
-    const pb = [];
-    if (!p.enabled) pb.push('<div class="banner warn">Abfrage pausiert (in den Einstellungen deaktiviert).</div>');
-    else if (st.ssh_key && !p.host_key) pb.push('<div class="banner warn">Host-Key noch nicht bestätigt. <a href="/settings">Verbindung testen</a></div>');
-    if (p.cc2_enabled === false) pb.push(`<div class="banner err"><b>Spulenverwaltung in CC2 Control ist ausgeschaltet.</b> Verbrauch wird nicht gezählt. <button class="primary" onclick="enableCC2('${p.id}')">Einschalten …</button></div>`);
-    if (p.job_active) pb.push('<div class="banner ok">Druck läuft – Verbrauch wird nach dem Druck gebucht.</div>');
-    for (const v of Object.values(p.errors || {})) if (v) pb.push(`<div class="banner err">${esc(v)}</div>`);
-    return `<h2>${esc(p.name)} <span class="small muted" style="font-weight:400">${esc(p.host)}</span></h2>${pb.join('')}
-      <div class="grid">${p.slots.map((s) => slotCard(p, s)).join('')}</div>`;
-  }).join('') || '<div class="panel muted">Kein Drucker eingerichtet. <a href="/settings">Einstellungen</a></div>';
-  $('lastpoll').textContent = st.last_poll ? 'Letzte Abfrage: ' + fmtTime(st.last_poll) : 'Noch keine Abfrage';
-  $('log').innerHTML = (st.log || []).map((e) => {
-    const l = LEVEL[e.level] || [e.level, ''];
-    return `<tr><td class="small muted">${fmtTime(e.time)}</td><td><span class="tag ${l[1]}">${l[0]}</span></td><td>${esc(e.msg)}</td></tr>`;
-  }).join('') || '<tr><td colspan="3" class="muted">Noch keine Einträge</td></tr>';
+  $('banners').style.display = b.length ? '' : 'none';
+  renderSeg(printers);
+  $('printers').classList.toggle('single', printers.length < 2);
+  $('printers').innerHTML = printers.map(printerSection).join('')
+    || '<div class="card muted">Kein Drucker eingerichtet. <a href="/settings">Einstellungen</a></div>';
+  $('log').innerHTML = (st.log || []).slice(0, 8).map((e) => {
+    const [ic, bg, fg] = logIcon(e), [pn, msg] = splitPrinter(e.msg, Object.values(NAMES));
+    return `<div class="logrow"><div class="icon-badge" style="background:${bg};color:${fg}">${ic}</div>
+      <div style="min-width:0"><div class="msg">${esc(msg)}</div><div class="meta">${esc(pn)} · ${fmtClock(e.time)}</div></div></div>`;
+  }).join('') || '<p class="muted small">Noch keine Einträge</p>';
+  renderSheet();
+}
+
+async function load() {
+  try { ST = await api('GET', '/api/status'); }
+  catch (e) { $('banners').style.display = ''; $('banners').innerHTML = `<div class="banner err">${esc(e.message)}</div>`; return; }
+  setMode(ST.dry_run);
+  setPoll(ST.last_poll);
+  NAMES = Object.fromEntries((ST.printers || []).map((p) => [p.id, p.name]));
+  render();
 }
 load();
-setInterval(load, 3000);
+setInterval(() => { if (!document.hidden) load(); }, 3000);
+document.addEventListener('visibilitychange', () => { if (!document.hidden) load(); });
 </script>
 {% endblock %}
diff --git a/app/templates/tags.html b/app/templates/tags.html
index a0b62f9..2b758a9 100644
--- a/app/templates/tags.html
+++ b/app/templates/tags.html
@@ -1,70 +1,122 @@
 {% extends "base.html" %}
 {% block title %}CC2 Bridge – Tag-Generator{% endblock %}
+{% block heading %}Tag-Generator{% endblock %}
+{% block head %}
+<style>
+.tg { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 20px; align-items: start; }
+@media (max-width: 999px) { .tg { grid-template-columns: minmax(0, 1fr); } }
+.picker { display: flex; flex-direction: column; gap: 12px; }
+.spools { max-height: 560px; overflow-y: auto; margin: 0 -16px -16px; border-top: 1px solid var(--line2); }
+.spools .item { padding-left: 16px; padding-right: 16px; }
+.spools .item[aria-current=true] { background: var(--accent-bg); }
+.dot { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 99px; border: 1px solid var(--line); }
+.chosen { display: none; }
+.palette { display: flex; flex-wrap: wrap; gap: 8px; }
+.palette button { width: 32px; height: 32px; min-height: 0; padding: 0; border-radius: 99px; border: 1px solid var(--line); }
+.palette button[aria-pressed=true] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
+.cmd { background: var(--hero); color: var(--hero-ink); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
+.cmd .label { color: var(--hero-muted); }
+.cmd textarea { background: transparent; border: 0; color: #D6DCE5; padding: 0; min-height: 0; resize: none; line-height: 1.6; font-size: 12px; word-break: break-all; }
+.cmd .acts { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; }
+.cmd .acts button { min-height: 48px; }
+.cmd .primary { background: var(--hero-accent); border-color: var(--hero-accent); color: #0B1230; font-weight: 800; }
+.cmd .ghost { background: transparent; border-color: var(--hero-line); color: var(--hero-ink); }
+.cmd .check { font-size: 13px; color: var(--hero-muted); }
+.qr { background: #fff; padding: 10px; border-radius: 12px; width: max-content; max-width: 100%; overflow: auto; }
+details > summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
+details > summary::-webkit-details-marker { display: none; }
+details > summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--faint); border-bottom: 2px solid var(--faint); transform: rotate(45deg); margin: 0 4px 4px; }
+details[open] > summary::after { transform: rotate(-135deg); margin-bottom: -4px; }
+.radio { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; padding: 6px 0; }
+.radio input { width: 20px; min-height: 20px; height: 20px; margin: 1px 0 0; flex: 0 0 20px; }
+.steps { margin: 0; padding-left: 20px; font-size: 13px; color: var(--muted); display: flex; flex-direction: column; gap: 4px; }
+@media (max-width: 999px) {
+  .tg.picked .picker .listcard { display: none; }
+  .tg.picked .chosen { display: flex; }
+}
+</style>
+{% endblock %}
 {% block content %}
-<div class="banner err"><b>Wichtig:</b> In NFC Tools nie „Lock tag“ oder „Set password“ verwenden – der Tag wäre danach nicht mehr beschreibbar.</div>
-<h2>Spoolman-Spulen</h2>
-<div class="panel">
-  <div class="row" style="margin-bottom:10px">
-    <div class="field" style="margin:0"><label for="filter">Filter</label><input id="filter" placeholder="Label, Hersteller, Material …"></div>
-    <label style="flex:0 0 auto;margin:0 0 8px"><input type="checkbox" id="archived" style="width:auto"> archivierte zeigen</label>
-  </div>
-  <div class="table-wrap" style="max-height:340px;overflow-y:auto">
-    <table><thead><tr><th>ID</th><th>Label</th><th>Hersteller</th><th>Material</th><th>Farbe</th><th>Rest</th><th>Ort</th><th></th></tr></thead>
-    <tbody id="spools"><tr><td colspan="8" class="muted">Lade …</td></tr></tbody></table>
-  </div>
-</div>
-
-<div id="editor" style="display:none">
-  <h2 id="edtitle">Tag</h2>
-  <div class="panel">
-    <div class="row">
-      <div class="field"><label for="material">Elegoo-Material</label><select id="material"></select></div>
-      <div class="field"><label for="subtype">Untertyp (wählt das Slicer-Profil)</label><select id="subtype"></select></div>
-    </div>
-    <div class="row">
-      <div class="field"><label for="color">Tag-Farbe (RRGGBB)</label>
-        <div class="row" style="gap:6px;flex-wrap:nowrap"><input id="color" maxlength="7" class="mono"><input type="color" id="picker" style="width:48px;padding:2px"></div></div>
-      <div class="field"><label for="temp_min">Düse min (°C)</label><input id="temp_min" type="number" min="0" max="500"></div>
-      <div class="field"><label for="temp_max">Düse max (°C)</label><input id="temp_max" type="number" min="0" max="500"></div>
-      <div class="field"><label for="finish">Finish-Byte (hex)</label><input id="finish" maxlength="2" class="mono" value="FF"></div>
-    </div>
-    <div class="field"><label>Display-Palette</label><div id="palette" style="display:flex;flex-wrap:wrap;gap:4px"></div>
-      <div class="small muted" id="colorhint" style="margin-top:4px"></div></div>
-    <div class="field"><label>URL auf dem Tag (nur fürs Handy, der Drucker ignoriert sie)</label>
-      <label style="color:var(--text)"><input type="radio" name="url" value="elegoo" checked style="width:auto"> <code>https://www.elegoo.com</code> (verifizierte Vorlage)</label>
-      <label style="color:var(--text)"><input type="radio" name="url" value="spoolman" style="width:auto"> Link auf die Spule in Spoolman <span class="muted">(nicht am Drucker getestet)</span></label>
+<div class="tg" id="tg">
+  <div class="picker">
+    <button class="card item chosen" id="chosen" onclick="unpick()" aria-label="Andere Spule wählen"></button>
+    <div class="card listcard">
+      <div class="label" style="margin-bottom:10px">Spoolman-Spule</div>
+      <div class="row" style="flex-wrap:nowrap;margin-bottom:12px">
+        <input id="filter" type="search" placeholder="Suchen: Label, Hersteller, Material …" aria-label="Spulen filtern">
+      </div>
+      <label class="row small muted" style="gap:10px;margin-bottom:12px"><span class="switch"><input type="checkbox" id="archived"><span></span></span>Archivierte zeigen</label>
+      <div class="spools" id="spools"><p class="muted" style="padding:0 16px">Lade …</p></div>
     </div>
+    <div class="banner err">In NFC Tools nie „Lock tag“ oder „Set password“ verwenden – der Tag wäre danach nicht mehr beschreibbar.</div>
   </div>
 
-  <h2>Befehlskette für NFC Tools</h2>
-  <div class="panel">
-    <div id="tagerror"></div>
-    <textarea id="commands" rows="5" readonly></textarea>
-    <div class="row" style="margin-top:8px">
-      <button class="primary" onclick="copyText($('commands').value)">Kopieren</button>
-      <label style="margin:0;color:var(--text)"><input type="checkbox" id="showqr" style="width:auto"> QR-Code zeigen</label>
+  <div class="stack" id="editor" style="display:none">
+    <div class="card stack">
+      <div><div class="label">Tag für</div><h2 id="edtitle" style="margin-top:2px">–</h2></div>
+      <div class="fields" style="grid-template-columns:repeat(2,minmax(0,1fr))">
+        <div class="field"><label for="material">Material</label><select id="material"></select></div>
+        <div class="field"><label for="subtype">Untertyp</label><select id="subtype"></select></div>
+        <div class="field"><label for="temp_min">Düse min (°C)</label><input id="temp_min" type="number" min="0" max="500" inputmode="numeric"></div>
+        <div class="field"><label for="temp_max">Düse max (°C)</label><input id="temp_max" type="number" min="0" max="500" inputmode="numeric"></div>
+      </div>
+      <div class="field">
+        <span class="flabel">Tag-Farbe</span>
+        <div class="palette" id="palette"></div>
+        <div class="row" style="flex-wrap:nowrap;gap:8px;margin-top:4px">
+          <input id="color" maxlength="7" class="mono" aria-label="Farbe als Hex (RRGGBB)" autocapitalize="characters" spellcheck="false">
+          <input type="color" id="picker" aria-label="Farbe wählen">
+        </div>
+        <div class="small" id="colorhint"></div>
+      </div>
+      <details>
+        <summary>Erweitert</summary>
+        <div class="stack" style="padding-top:8px">
+          <div class="field" style="max-width:200px"><label for="finish">Finish-Byte (hex)</label><input id="finish" maxlength="2" class="mono" value="FF"></div>
+          <div class="field">
+            <span class="flabel">URL auf dem Tag (nur fürs Handy, der Drucker ignoriert sie)</span>
+            <label class="radio"><input type="radio" name="url" value="elegoo" checked><span><code>https://www.elegoo.com</code> (verifizierte Vorlage)</span></label>
+            <label class="radio"><input type="radio" name="url" value="spoolman"><span>Link auf die Spule in Spoolman <span class="muted">(nicht am Drucker getestet)</span></span></label>
+          </div>
+        </div>
+      </details>
     </div>
-    <div id="qr" style="display:none;margin-top:10px;background:#fff;padding:8px;border-radius:6px;width:max-content;max-width:100%;overflow:auto"></div>
-    <ol class="small muted" style="margin:14px 0 0;padding-left:20px">
-      <li>NFC Tools → <i>Other</i> → <i>Advanced NFC commands</i>.</li>
-      <li>Befehlskette einfügen, leeren NTAG213/215/216 ans Handy halten, ausführen.</li>
-      <li>Spule in die Canvas legen und den Scan am Display bestätigen.</li>
-    </ol>
-  </div>
 
-  <h2>Dekodier-Vorschau</h2>
-  <div class="panel"><dl class="kv" id="decoded"></dl></div>
+    <div class="cmd">
+      <div class="row" style="justify-content:space-between"><span class="label">Befehlskette für NFC Tools</span><span class="small" id="pages" style="color:var(--hero-muted)"></span></div>
+      <div id="tagerror"></div>
+      <textarea id="commands" rows="4" readonly aria-label="Befehlskette"></textarea>
+      <div class="acts">
+        <button class="primary" onclick="copyText($('commands').value)">Kopieren</button>
+        <button class="ghost" id="qrbtn" aria-pressed="false" onclick="toggleQR()">QR-Code</button>
+      </div>
+      <div id="qr" class="qr" style="display:none"></div>
+      <div class="check" id="check"></div>
+    </div>
+
+    <div class="card stack">
+      <details>
+        <summary>Dekodier-Vorschau</summary>
+        <dl class="kv" id="decoded" style="padding-top:8px"></dl>
+      </details>
+      <ol class="steps">
+        <li>NFC Tools → <i>Other</i> → <i>Advanced NFC commands</i>.</li>
+        <li>Befehlskette einfügen, leeren NTAG213/215/216 ans Handy halten, ausführen.</li>
+        <li>Spule in die Canvas legen und den Scan am Display bestätigen.</li>
+      </ol>
+    </div>
+  </div>
 </div>
 {% endblock %}
 {% block script %}
 <script>
-let META = null, SPOOLS = [], current = null, timer = null, spoolmanBase = '';
+let META = null, SPOOLS = [], current = null, timer = null;
 
 async function init() {
   META = await api('GET', '/api/materials');
   $('material').innerHTML = Object.keys(META.materials).map((m) => `<option>${m}</option>`).join('');
   $('palette').innerHTML = META.palette.map((c) =>
-    `<button type="button" title="#${c}" onclick="setColor('${c}')" style="width:26px;height:26px;padding:0;background:#${c}"></button>`).join('');
+    `<button type="button" aria-label="Farbe #${c}" aria-pressed="false" data-c="${c}" onclick="setColor('${c}')" style="background:#${c}"></button>`).join('');
   await loadSpools();
 }
 
@@ -73,21 +125,24 @@ async function loadSpools() {
     const r = await api('GET', '/api/spoolman/spools' + ($('archived').checked ? '?archived=true' : ''));
     SPOOLS = r.spools;
   } catch (e) {
-    $('spools').innerHTML = `<tr><td colspan="8"><div class="banner err" style="margin:0">${esc(e.message)}</div></td></tr>`;
+    $('spools').innerHTML = `<div class="banner err" style="margin:12px 16px">${esc(e.message)}</div>`;
     return;
   }
   renderSpools();
 }
 
+function spoolLine(s) {
+  return [s.vendor, s.material].filter(Boolean).join(' ') + (s.remaining != null ? ` · ${Math.round(s.remaining)} g` : '') + (s.location ? ` · ${s.location}` : '');
+}
+
 function renderSpools() {
   const q = $('filter').value.toLowerCase();
-  const rows = SPOOLS.filter((s) => !q || [s.label, s.vendor, s.material, s.name, s.location].join(' ').toLowerCase().includes(q));
-  $('spools').innerHTML = rows.map((s) => `<tr>
-    <td>${s.id}</td><td><b>${esc(s.label)}</b></td><td>${esc(s.vendor)}</td><td>${esc(s.material)} <span class="muted small">${esc(s.name)}</span></td>
-    <td>${s.color ? `<span class="swatch" style="background:#${s.color}"></span> <span class="mono small">${s.color}</span>` : '–'}</td>
-    <td>${s.remaining != null ? Math.round(s.remaining) + ' g' : '–'}</td><td class="small">${esc(s.location)}</td>
-    <td><button onclick="pick(${s.id})">Tag erstellen</button></td></tr>`).join('')
-    || '<tr><td colspan="8" class="muted">Keine Spulen</td></tr>';
+  const rows = SPOOLS.filter((s) => !q || [s.label, s.vendor, s.material, s.name, s.location, s.id].join(' ').toLowerCase().includes(q));
+  $('spools').innerHTML = rows.map((s) => `<button class="item" onclick="pick(${s.id})" aria-current="${current && current.id === s.id}">
+    <span class="dot" style="background:${s.color ? '#' + s.color : 'transparent'}"></span>
+    <span class="grow"><span class="title" style="display:block">${esc(s.label)} <span class="muted small" style="font-weight:500">#${s.id}</span></span>
+    <span class="sub" style="display:block">${esc(spoolLine(s))}</span></span>${CHEV}</button>`).join('')
+    || '<p class="muted" style="padding:0 16px">Keine Spulen</p>';
 }
 
 function fillSubtypes(material, selected) {
@@ -100,28 +155,47 @@ function setColor(c) {
   c = c.replace('#', '').toUpperCase();
   $('color').value = c;
   if (/^[0-9A-F]{6}$/.test(c)) $('picker').value = '#' + c;
+  markPalette();
   schedule();
 }
+function markPalette() {
+  const c = $('color').value.replace('#', '').toUpperCase();
+  document.querySelectorAll('#palette button').forEach((b) => b.setAttribute('aria-pressed', String(b.dataset.c.toUpperCase() === c)));
+}
 
 function pick(id) {
   current = SPOOLS.find((s) => s.id === id);
   const sg = current.suggest;
-  $('edtitle').textContent = `Tag für ${current.label} (Spoolman #${current.id})`;
+  $('edtitle').textContent = `${current.label} (Spoolman #${current.id})`;
+  $('chosen').innerHTML = `<span class="dot" style="background:${current.color ? '#' + current.color : 'transparent'}"></span>
+    <span class="grow"><span class="title" style="display:block">${esc(current.label)} <span class="muted small" style="font-weight:500">#${current.id}</span></span>
+    <span class="sub" style="display:block">${esc(spoolLine(current))}</span></span>
+    <svg class="chev" viewBox="0 0 14 8" style="width:14px;height:8px;flex-basis:14px" aria-hidden="true"><path d="M1 1l6 6 6-6"/></svg>`;
   $('material').value = sg.material;
   fillSubtypes(sg.material, sg.subtype);
   $('temp_min').value = sg.temp_min; $('temp_max').value = sg.temp_max;
   $('finish').value = 'FF';
-  $('colorhint').innerHTML = current.color
-    ? `Spoolman-Farbe <span class="swatch" style="background:#${current.color}"></span> <span class="mono">${current.color}</span> → Vorschlag <span class="mono">${sg.color}</span>`
-    : 'Spoolman-Spule hat keine Farbe.';
+  $('colorhint').innerHTML = !current.color ? '<span class="muted">Spoolman-Spule hat keine Farbe.</span>'
+    : current.color.toUpperCase() === String(sg.color).toUpperCase()
+      ? `<span class="muted">Spoolman-Farbe <span class="mono">#${current.color}</span> passt zur Display-Palette.</span>`
+      : `<span style="color:var(--warn)">Spoolman hat <span class="swatch" style="background:#${current.color}"></span> <span class="mono">#${current.color}</span>, am Display nächste Farbe <span class="mono">#${sg.color}</span>.</span>`;
   setColor(sg.color);
+  $('tg').classList.add('picked');
   $('editor').style.display = '';
-  $('editor').scrollIntoView({ behavior: 'smooth' });
+  renderSpools();
+  $('editor').scrollIntoView({ behavior: 'smooth', block: 'start' });
   generate();
 }
+function unpick() { $('tg').classList.remove('picked'); $('filter').focus(); }
 
 function schedule() { clearTimeout(timer); timer = setTimeout(generate, 250); }
 
+function toggleQR() {
+  const on = $('qr').style.display === 'none';
+  $('qr').style.display = on ? '' : 'none';
+  $('qrbtn').setAttribute('aria-pressed', String(on));
+}
+
 async function generate() {
   if (!current) return;
   const useSpoolman = document.querySelector('input[name=url]:checked').value === 'spoolman';
@@ -135,8 +209,10 @@ async function generate() {
     const r = await api('POST', '/api/tag', body);
     $('tagerror').innerHTML = '';
     $('commands').value = r.commands;
+    $('pages').textContent = r.commands.split(',').length + ' Seiten';
     $('qr').innerHTML = r.qr_svg;
     const d = r.decoded;
+    $('check').textContent = `Prüfung: Spule ${d.spool_id} · ${d.subtype_name} · #${d.color} · ${d.temp_min}–${d.temp_max} °C`;
     $('decoded').innerHTML = [
       ['Spoolman-ID', `${d.spool_id} <span class="muted small">(weight ${d.weight})</span>`],
       ['Hersteller', `${esc(d.manufacturer)} <span class="muted small">(Drucker zeigt ELEGOO)</span>`],
@@ -149,7 +225,7 @@ async function generate() {
     ].map(([k, v]) => `<dt>${k}</dt><dd>${v}</dd>`).join('');
   } catch (e) {
     $('tagerror').innerHTML = `<div class="banner err">${esc(e.message)}</div>`;
-    $('commands').value = '';
+    $('commands').value = ''; $('check').textContent = ''; $('pages').textContent = '';
   }
 }
 
@@ -160,10 +236,9 @@ $('material').addEventListener('change', () => {
   schedule();
 });
 for (const id of ['subtype', 'temp_min', 'temp_max', 'finish']) $(id).addEventListener('input', schedule);
-$('color').addEventListener('input', () => { const c = $('color').value.replace('#', ''); if (/^[0-9a-f]{6}$/i.test(c)) $('picker').value = '#' + c; schedule(); });
+$('color').addEventListener('input', () => { const c = $('color').value.replace('#', ''); if (/^[0-9a-f]{6}$/i.test(c)) $('picker').value = '#' + c; markPalette(); schedule(); });
 $('picker').addEventListener('input', () => setColor($('picker').value));
 document.querySelectorAll('input[name=url]').forEach((el) => el.addEventListener('change', schedule));
-$('showqr').addEventListener('change', () => { $('qr').style.display = $('showqr').checked ? '' : 'none'; });
 $('filter').addEventListener('input', renderSpools);
 $('archived').addEventListener('change', loadSpools);
 init();
diff --git a/app/web.py b/app/web.py
index e17ab5d..7a253c2 100644
--- a/app/web.py
+++ b/app/web.py
@@ -14,6 +14,7 @@ import paramiko
 import segno
 from fastapi import FastAPI, HTTPException, Request
 from fastapi.responses import HTMLResponse, JSONResponse, Response
+from fastapi.staticfiles import StaticFiles
 from fastapi.templating import Jinja2Templates
 
 from . import materials, tagcodec
@@ -53,6 +54,7 @@ def create_app(data_dir: Path | None = None, *, bridge: Bridge | None = None, st
     app = FastAPI(title="CC2 Spoolman Bridge", lifespan=lifespan, docs_url=None, redoc_url=None, openapi_url=None)
     app.state.bridge = bridge
     templates = Jinja2Templates(directory=str(HERE / "templates"))
+    app.mount("/static", StaticFiles(directory=str(HERE / "static")), name="static")
 
     user, password = env.get("BRIDGE_USER", ""), env.get("BRIDGE_PASSWORD", "")
 
@@ -87,6 +89,21 @@ def create_app(data_dir: Path | None = None, *, bridge: Bridge | None = None, st
     def index(request: Request):
         return page(request, "status.html")
 
+    @app.get("/log", response_class=HTMLResponse)
+    def log_page(request: Request):
+        return page(request, "log.html")
+
+    @app.get("/manifest.webmanifest")
+    def manifest():
+        return JSONResponse({
+            "name": "CC2 Bridge", "short_name": "CC2 Bridge", "lang": "de",
+            "start_url": "/", "scope": "/", "display": "standalone",
+            "background_color": "#EDEFF2", "theme_color": "#14181F",
+            "icons": [{"src": "/static/icon-192.png", "sizes": "192x192", "type": "image/png"},
+                      {"src": "/static/icon-512.png", "sizes": "512x512", "type": "image/png"},
+                      {"src": "/static/icon.svg", "sizes": "any", "type": "image/svg+xml"}],
+        }, media_type="application/manifest+json")
+
     @app.get("/tags", response_class=HTMLResponse)
     def tags(request: Request):
         return page(request, "tags.html")
diff --git a/tests/fakes.py b/tests/fakes.py
index bedd5c4..5563035 100644
--- a/tests/fakes.py
+++ b/tests/fakes.py
@@ -48,6 +48,7 @@ class FakeCC2:
         self.slots[4]["printer"] = None
         self.library: list[dict] = []
         self.job = {"active": False}
+        self.print_info = {"machine": {"progress": 40}, "print": {"current_layer": 12, "total_layers": 30, "remaining": 600}}
         self.log: list[dict] = []  # newest first, as CC2 Control lists it
         self.calls: list[tuple] = []
         self.fail = False
@@ -64,6 +65,10 @@ class FakeCC2:
         self._check()
         return copy.deepcopy(self.spools_json())
 
+    def printer(self):
+        self._check()
+        return copy.deepcopy(self.print_info)
+
     def canvas(self):
         self._check()
         return {}
diff --git a/tests/test_bridge.py b/tests/test_bridge.py
index 7ffdba6..106810f 100644
--- a/tests/test_bridge.py
+++ b/tests/test_bridge.py
@@ -759,3 +759,17 @@ def test_multicolour_print_books_each_roll(env):
     cc2.job = {"active": False}
     poll(env, 10)
     assert sorted(uses(env)) == [("use", 5, 6.0), ("use", 6, 3.0)]
+
+
+def test_job_progress_only_read_while_printing(env):
+    b = env["bridge"]
+    env["cc2"].print_info = None
+    poll(env)
+    assert b.snapshot["printers"][0]["job"] is None
+    env["cc2"].print_info = {"machine": {"progress": 40}, "print": {"current_layer": 12, "total_layers": 30, "remaining": 600}}
+    env["cc2"].job = {"active": True, "file": "/local/cube.gcode", "started": 1,
+                      "slots": [{"mm": 0, "grams": 0, "spool": ""}, {"mm": 330, "grams": 1.234, "spool": "s0001"}]}
+    poll(env)
+    job = b.snapshot["printers"][0]["job"]
+    assert job["file"] == "cube.gcode" and job["grams"] == 1.23 and job["slots"] == [{"slot": 1, "grams": 1.23}]
+    assert job["progress"] == 40 and job["layer"] == 12 and job["layers"] == 30 and job["remaining"] == 600
diff --git a/tests/test_web.py b/tests/test_web.py
index 0be07e7..96b97af 100644
--- a/tests/test_web.py
+++ b/tests/test_web.py
@@ -28,11 +28,20 @@ def make_client(tmp_path, env=None):
 
 def test_pages_render(tmp_path):
     c, _ = make_client(tmp_path)
-    for path in ("/", "/tags", "/settings"):
+    for path in ("/", "/log", "/tags", "/settings"):
         r = c.get(path)
         assert r.status_code == 200 and "CC2" in r.text
 
 
+def test_web_app_files(tmp_path):
+    c, _ = make_client(tmp_path)
+    m = c.get("/manifest.webmanifest")
+    assert m.status_code == 200 and m.json()["display"] == "standalone"
+    for icon in m.json()["icons"]:
+        assert c.get(icon["src"]).status_code == 200
+    assert c.get("/static/icon-180.png").headers["content-type"] == "image/png"
+
+
 def test_writes_need_marker_header(tmp_path):
     c, _ = make_client(tmp_path)
     assert c.post("/api/settings", json={"dry_run": False}).status_code == 403
diff --git a/tools/mock_env.py b/tools/mock_env.py
index a507a35..1419082 100644
--- a/tools/mock_env.py
+++ b/tools/mock_env.py
@@ -98,6 +98,13 @@ def make_cc2(host_header: str, P: dict) -> FastAPI:
             return {"available": True, "enabled": P["enabled"], "slots": P["slots"], "spools": P["spools"],
                     "job": P["job"], "log": P["log"]}
 
+    @app.get("/api/printer")
+    def printer_status():
+        active = P["job"]["active"]
+        return {"connected": True, "machine": {"status": 2 if active else 1, "progress": 42 if active else 0},
+                "print": {"filename": P["job"].get("file", ""), "state": "printing" if active else "standby",
+                          "current_layer": 23 if active else 0, "total_layers": 55, "remaining": 2940}}
+
     @app.get("/api/canvas")
     def canvas():
         return {"telemetry": {"result": {"canvas_info": {"canvas_list": [{"tray_list": [