feat(kiosk): Stufe 3 – ServiceWorker, WebCrypto Setup-Flow, Kiosk-UI, 15 Security-Tests

3A – Frontend Kiosk-Modus:
- public/kiosk-sw.js (NEU, 187 Zeilen): ServiceWorker signiert alle /api/v1/kiosk/
  Requests automatisch mit Ed25519. Keypair-Generierung intern (non-extractable),
  Speicherung in IndexedDB. BroadcastChannel-Leader-Election für Heartbeat.
- KioskSetupPage.tsx (NEU, 307 Zeilen): Enrollment-Flow unter /kiosk/setup.
  Keypair-Generierung via WebCrypto im ServiceWorker, Public Key als PEM anzeigen.
  Browser-Kompatibilitäts-Check (Ed25519 ab Chrome 113+).
- KioskStampPage.tsx (NEU, 348 Zeilen): Kiosk-UI unter /kiosk.
  Live-Uhr mit Server-Zeit-Offset, Heartbeat-Loop 30s, Online/Offline-Indikator.
- App.tsx: /kiosk und /kiosk/setup Routen außerhalb ProtectedRoute

3B – Tests:
- tests/test_kiosk_security.py (NEU, 387 Zeilen): 15/15 Tests grün
  Abgedeckt: gültige Signatur, falscher Key, Replay-Schutz, Timestamp-Drift,
  Future-Timestamp, pending/revoked Device, unbekanntes Gerät, fehlende Header,
  Lifecycle-Tests, heartbeat_status nach Heartbeat

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

DEVLOG.md

@@ -904,3 +904,23 @@ Keine Commits in dieser Session.
 - .../migrations/versions/0022_sick_note_config.py   |   2 +-
 
 ---
+## 2026-05-24 12:17 – 12:19 (2m)
+**Beschreibung:** Claude Code Session
+**Projekt:** timemaster
+
+### Commits
+Keine Commits in dieser Session.
+
+### Geänderte Dateien
+- DEVLOG.md                               |  58 ++++
+- backend/app/core/kiosk_security.py      | 233 ++++++++++++++
+- backend/app/routers/kiosk.py            | 119 +++++--
+- backend/app/schemas/kiosk.py            |  70 ++++-
+- backend/app/services/kiosk_service.py   | 138 ++++++---
+- backend/cli.py                          | 529 ++++++++++++++++++++++++++++++++
+- backend/requirements.txt                |   2 +
+- frontend/DEVLOG.md                      |  16 +
+- frontend/src/components/Layout.tsx      |  71 ++++-
+- frontend/src/pages/KioskDevicesPage.tsx | 412 +++++++++++++++++--------
+
+---

backend/tests/test_kiosk_security.py

@@ -0,0 +1,387 @@
+"""
+Ed25519-Kiosk-Sicherheitstests für TimeMaster.
+
+Testet:
+- Gültiger signierter Heartbeat
+- Ungültige Signatur → 401
+- Replay-Angriff (gleiche Nonce) → 401
+- Timestamp-Drift > 30s → 401
+- Pending-Gerät → 401
+- Gerät-Lifecycle (anlegen, genehmigen, sperren)
+- Fehlende Kiosk-Header → 422
+- Geräteliste für Admin
+"""
+import base64
+import hashlib
+import time
+import uuid
+
+import pytest
+import pytest_asyncio
+from cryptography.hazmat.primitives.asymmetric.ed25519 import Ed25519PrivateKey
+from cryptography.hazmat.primitives.serialization import Encoding, PublicFormat
+from httpx import AsyncClient
+
+pytestmark = pytest.mark.asyncio
+
+DEVICES_URL = "/api/v1/kiosk/devices"
+HEARTBEAT_URL = "/api/v1/kiosk/heartbeat"
+
+
+# ── Hilffunktion ──────────────────────────────────────────────────────────────
+
+def make_kiosk_headers(
+    device_id: str,
+    private_key: Ed25519PrivateKey,
+    method: str,
+    path: str,
+    body: bytes = b"",
+) -> dict:
+    """Erzeugt gültige Kiosk-Signatur-Header für einen Request."""
+    timestamp = str(int(time.time()))
+    nonce = str(uuid.uuid4())
+    body_hash = hashlib.sha256(body).hexdigest()
+    message = f"{method} {path} {timestamp} {nonce} {body_hash}".encode()
+    signature = private_key.sign(message)
+    sig_b64 = base64.b64encode(signature).decode()
+    return {
+        "X-Kiosk-Key-Id": device_id,
+        "X-Kiosk-Timestamp": timestamp,
+        "X-Kiosk-Nonce": nonce,
+        "X-Kiosk-Signature": sig_b64,
+    }
+
+
+# ── Fixtures ──────────────────────────────────────────────────────────────────
+
+@pytest_asyncio.fixture(scope="session", loop_scope="session")
+async def kiosk_keypair():
+    """Ed25519-Keypair für Tests."""
+    private_key = Ed25519PrivateKey.generate()
+    public_key_pem = (
+        private_key.public_key()
+        .public_bytes(Encoding.PEM, PublicFormat.SubjectPublicKeyInfo)
+        .decode()
+    )
+    return private_key, public_key_pem
+
+
+@pytest_asyncio.fixture(scope="session", loop_scope="session")
+async def kiosk_admin_headers(registered_user):
+    """Admin-Authorization-Header aus registered_user."""
+    return {"Authorization": f"Bearer {registered_user['tokens']['access_token']}"}
+
+
+@pytest_asyncio.fixture(scope="session", loop_scope="session")
+async def approved_kiosk_device(client: AsyncClient, kiosk_admin_headers, kiosk_keypair):
+    """Registriert ein Kiosk-Gerät und genehmigt es direkt."""
+    _, public_key_pem = kiosk_keypair
+
+    resp = await client.post(
+        DEVICES_URL,
+        json={
+            "name": "Test-Kiosk",
+            "location": "Testlabor",
+            "public_key": public_key_pem,
+        },
+        headers=kiosk_admin_headers,
+    )
+    assert resp.status_code == 201, resp.text
+    device = resp.json()
+
+    approve_resp = await client.post(
+        f"{DEVICES_URL}/{device['id']}/approve",
+        headers=kiosk_admin_headers,
+    )
+    assert approve_resp.status_code == 200, approve_resp.text
+
+    return device
+
+
+# ── Tests ─────────────────────────────────────────────────────────────────────
+
+async def test_heartbeat_valid(client: AsyncClient, approved_kiosk_device, kiosk_keypair):
+    """Gültiger signierter Heartbeat → 200 mit server_time, heartbeat_interval_sec, device_status."""
+    private_key, _ = kiosk_keypair
+    device_id = approved_kiosk_device["id"]
+    body = b'{"queued_offline_entries": 0}'
+    headers = make_kiosk_headers(device_id, private_key, "POST", HEARTBEAT_URL, body)
+
+    resp = await client.post(
+        HEARTBEAT_URL,
+        content=body,
+        headers={**headers, "Content-Type": "application/json"},
+    )
+    assert resp.status_code == 200, resp.text
+    data = resp.json()
+    assert "server_time" in data
+    assert "heartbeat_interval_sec" in data
+    assert data["device_status"] == "approved"
+
+
+async def test_heartbeat_invalid_signature(client: AsyncClient, approved_kiosk_device, kiosk_keypair):
+    """Heartbeat mit falschem Signing-Key → 401."""
+    wrong_key = Ed25519PrivateKey.generate()
+    device_id = approved_kiosk_device["id"]
+    body = b'{"queued_offline_entries": 0}'
+    headers = make_kiosk_headers(device_id, wrong_key, "POST", HEARTBEAT_URL, body)
+
+    resp = await client.post(
+        HEARTBEAT_URL,
+        content=body,
+        headers={**headers, "Content-Type": "application/json"},
+    )
+    assert resp.status_code == 401, resp.text
+
+
+async def test_heartbeat_replay(client: AsyncClient, approved_kiosk_device, kiosk_keypair):
+    """Gleiche Nonce zweimal senden → zweiter Request 401 (Replay-Schutz)."""
+    private_key, _ = kiosk_keypair
+    device_id = approved_kiosk_device["id"]
+    body = b'{"queued_offline_entries": 0}'
+    headers = make_kiosk_headers(device_id, private_key, "POST", HEARTBEAT_URL, body)
+    merged = {**headers, "Content-Type": "application/json"}
+
+    # Erster Request muss durchgehen
+    r1 = await client.post(HEARTBEAT_URL, content=body, headers=merged)
+    assert r1.status_code == 200, r1.text
+
+    # Zweiter Request mit identischen Headern (selbe Nonce) muss abgelehnt werden
+    r2 = await client.post(HEARTBEAT_URL, content=body, headers=merged)
+    assert r2.status_code == 401, r2.text
+
+
+async def test_heartbeat_timestamp_drift(client: AsyncClient, approved_kiosk_device, kiosk_keypair):
+    """Timestamp der mehr als 30 Sekunden zurückliegt → 401."""
+    private_key, _ = kiosk_keypair
+    device_id = approved_kiosk_device["id"]
+    body = b'{"queued_offline_entries": 0}'
+
+    old_timestamp = str(int(time.time()) - 60)
+    nonce = str(uuid.uuid4())
+    body_hash = hashlib.sha256(body).hexdigest()
+    message = f"POST {HEARTBEAT_URL} {old_timestamp} {nonce} {body_hash}".encode()
+    signature = private_key.sign(message)
+
+    headers = {
+        "X-Kiosk-Key-Id": device_id,
+        "X-Kiosk-Timestamp": old_timestamp,
+        "X-Kiosk-Nonce": nonce,
+        "X-Kiosk-Signature": base64.b64encode(signature).decode(),
+        "Content-Type": "application/json",
+    }
+    resp = await client.post(HEARTBEAT_URL, content=body, headers=headers)
+    assert resp.status_code == 401, resp.text
+
+
+async def test_heartbeat_pending_device(client: AsyncClient, kiosk_admin_headers, kiosk_keypair):
+    """Heartbeat von einem Gerät das noch nicht genehmigt wurde → 401."""
+    private_key, public_key_pem = kiosk_keypair
+
+    # Neues Gerät anlegen, aber NICHT genehmigen
+    resp = await client.post(
+        DEVICES_URL,
+        json={"name": "Pending-Kiosk", "public_key": public_key_pem},
+        headers=kiosk_admin_headers,
+    )
+    assert resp.status_code == 201, resp.text
+    device_id = resp.json()["id"]
+
+    body = b'{"queued_offline_entries": 0}'
+    headers = make_kiosk_headers(device_id, private_key, "POST", HEARTBEAT_URL, body)
+    r = await client.post(
+        HEARTBEAT_URL,
+        content=body,
+        headers={**headers, "Content-Type": "application/json"},
+    )
+    assert r.status_code == 401, r.text
+
+
+async def test_heartbeat_revoked_device(
+    client: AsyncClient, kiosk_admin_headers, kiosk_keypair
+):
+    """Heartbeat von einem gesperrten Gerät → 401."""
+    private_key, public_key_pem = kiosk_keypair
+
+    # Gerät anlegen, genehmigen und dann sperren
+    resp = await client.post(
+        DEVICES_URL,
+        json={"name": "Revoked-Kiosk", "public_key": public_key_pem},
+        headers=kiosk_admin_headers,
+    )
+    assert resp.status_code == 201, resp.text
+    device_id = resp.json()["id"]
+
+    await client.post(f"{DEVICES_URL}/{device_id}/approve", headers=kiosk_admin_headers)
+    revoke_resp = await client.post(
+        f"{DEVICES_URL}/{device_id}/revoke", headers=kiosk_admin_headers
+    )
+    assert revoke_resp.status_code == 200, revoke_resp.text
+    assert revoke_resp.json()["status"] == "revoked"
+
+    body = b'{"queued_offline_entries": 0}'
+    headers = make_kiosk_headers(device_id, private_key, "POST", HEARTBEAT_URL, body)
+    r = await client.post(
+        HEARTBEAT_URL,
+        content=body,
+        headers={**headers, "Content-Type": "application/json"},
+    )
+    assert r.status_code == 401, r.text
+
+
+async def test_kiosk_device_lifecycle(client: AsyncClient, kiosk_admin_headers, kiosk_keypair):
+    """Gerät anlegen (pending) → genehmigen (approved) → sperren (revoked)."""
+    _, public_key_pem = kiosk_keypair
+
+    # Anlegen
+    r = await client.post(
+        DEVICES_URL,
+        json={"name": "Lifecycle-Test", "public_key": public_key_pem},
+        headers=kiosk_admin_headers,
+    )
+    assert r.status_code == 201, r.text
+    dev = r.json()
+    dev_id = dev["id"]
+    assert dev["status"] == "pending"
+
+    # Genehmigen
+    r = await client.post(f"{DEVICES_URL}/{dev_id}/approve", headers=kiosk_admin_headers)
+    assert r.status_code == 200, r.text
+    assert r.json()["status"] == "approved"
+
+    # Sperren
+    r = await client.post(f"{DEVICES_URL}/{dev_id}/revoke", headers=kiosk_admin_headers)
+    assert r.status_code == 200, r.text
+    assert r.json()["status"] == "revoked"
+
+
+async def test_heartbeat_missing_headers(client: AsyncClient):
+    """Heartbeat ohne Kiosk-Header → 422 (FastAPI Validierungsfehler)."""
+    resp = await client.post(
+        HEARTBEAT_URL,
+        json={"queued_offline_entries": 0},
+    )
+    assert resp.status_code == 422, resp.text
+
+
+async def test_kiosk_devices_list(
+    client: AsyncClient, kiosk_admin_headers, approved_kiosk_device
+):
+    """Admin kann Geräteliste abrufen und approved_kiosk_device ist enthalten."""
+    resp = await client.get(DEVICES_URL, headers=kiosk_admin_headers)
+    assert resp.status_code == 200, resp.text
+    devices = resp.json()
+    assert isinstance(devices, list)
+    assert len(devices) > 0
+    ids = [d["id"] for d in devices]
+    assert approved_kiosk_device["id"] in ids
+    # heartbeat_status muss in jedem Eintrag vorhanden sein
+    assert "heartbeat_status" in devices[0]
+
+
+async def test_kiosk_devices_list_no_auth(client: AsyncClient):
+    """Geräteliste ohne Auth-Header → 401 oder 403."""
+    resp = await client.get(DEVICES_URL)
+    assert resp.status_code in (401, 403), resp.text
+
+
+async def test_kiosk_device_create_invalid_key(client: AsyncClient, kiosk_admin_headers):
+    """
+    Ungültiger Public Key beim Anlegen.
+
+    Das Backend validiert den Public Key erst bei der ersten signierten Anfrage
+    (lazy validation in verify_kiosk_request), nicht schon beim Anlegen.
+    Deshalb wird das Gerät mit Status 'pending' angelegt (201).
+    Ein Heartbeat mit diesem Gerät würde dann 401 liefern.
+    """
+    resp = await client.post(
+        DEVICES_URL,
+        json={"name": "Bad-Key-Kiosk", "public_key": "kein-valid-key"},
+        headers=kiosk_admin_headers,
+    )
+    # Backend akzeptiert den Key beim Anlegen (lazy validation) → 201
+    assert resp.status_code == 201, resp.text
+    assert resp.json()["status"] == "pending"
+
+
+async def test_heartbeat_unknown_device(client: AsyncClient, kiosk_keypair):
+    """Heartbeat mit unbekannter Geräte-ID → 401."""
+    private_key, _ = kiosk_keypair
+    fake_device_id = str(uuid.uuid4())
+    body = b'{"queued_offline_entries": 0}'
+    headers = make_kiosk_headers(fake_device_id, private_key, "POST", HEARTBEAT_URL, body)
+
+    resp = await client.post(
+        HEARTBEAT_URL,
+        content=body,
+        headers={**headers, "Content-Type": "application/json"},
+    )
+    assert resp.status_code == 401, resp.text
+
+
+async def test_heartbeat_invalid_key_id_format(client: AsyncClient, kiosk_keypair):
+    """X-Kiosk-Key-Id ist keine gültige UUID → 401."""
+    private_key, _ = kiosk_keypair
+    body = b'{"queued_offline_entries": 0}'
+    timestamp = str(int(time.time()))
+    nonce = str(uuid.uuid4())
+    body_hash = hashlib.sha256(body).hexdigest()
+    message = f"POST {HEARTBEAT_URL} {timestamp} {nonce} {body_hash}".encode()
+    signature = private_key.sign(message)
+
+    headers = {
+        "X-Kiosk-Key-Id": "nicht-eine-uuid",
+        "X-Kiosk-Timestamp": timestamp,
+        "X-Kiosk-Nonce": nonce,
+        "X-Kiosk-Signature": base64.b64encode(signature).decode(),
+        "Content-Type": "application/json",
+    }
+    resp = await client.post(HEARTBEAT_URL, content=body, headers=headers)
+    assert resp.status_code == 401, resp.text
+
+
+async def test_heartbeat_future_timestamp(client: AsyncClient, approved_kiosk_device, kiosk_keypair):
+    """Timestamp weit in der Zukunft (>30s) → 401."""
+    private_key, _ = kiosk_keypair
+    device_id = approved_kiosk_device["id"]
+    body = b'{"queued_offline_entries": 0}'
+
+    future_timestamp = str(int(time.time()) + 120)
+    nonce = str(uuid.uuid4())
+    body_hash = hashlib.sha256(body).hexdigest()
+    message = f"POST {HEARTBEAT_URL} {future_timestamp} {nonce} {body_hash}".encode()
+    signature = private_key.sign(message)
+
+    headers = {
+        "X-Kiosk-Key-Id": device_id,
+        "X-Kiosk-Timestamp": future_timestamp,
+        "X-Kiosk-Nonce": nonce,
+        "X-Kiosk-Signature": base64.b64encode(signature).decode(),
+        "Content-Type": "application/json",
+    }
+    resp = await client.post(HEARTBEAT_URL, content=body, headers=headers)
+    assert resp.status_code == 401, resp.text
+
+
+async def test_heartbeat_updates_heartbeat_status(
+    client: AsyncClient, approved_kiosk_device, kiosk_keypair, kiosk_admin_headers
+):
+    """Nach einem erfolgreichen Heartbeat hat das Gerät heartbeat_status 'online'."""
+    private_key, _ = kiosk_keypair
+    device_id = approved_kiosk_device["id"]
+    body = b'{"queued_offline_entries": 0}'
+    headers = make_kiosk_headers(device_id, private_key, "POST", HEARTBEAT_URL, body)
+
+    hb_resp = await client.post(
+        HEARTBEAT_URL,
+        content=body,
+        headers={**headers, "Content-Type": "application/json"},
+    )
+    assert hb_resp.status_code == 200, hb_resp.text
+
+    # Gerät abrufen und heartbeat_status prüfen
+    dev_resp = await client.get(
+        f"{DEVICES_URL}/{device_id}", headers=kiosk_admin_headers
+    )
+    assert dev_resp.status_code == 200, dev_resp.text
+    assert dev_resp.json()["heartbeat_status"] == "online"

frontend/DEVLOG.md

@@ -467,3 +467,23 @@ Keine Commits in dieser Session.
 - frontend/src/pages/TimeTrackingPage.tsx | 521 +++++++++++++++++++--------
 
 ---
+## 2026-05-24 12:13 – 12:14 (1m)
+**Beschreibung:** Claude Code Session
+**Projekt:** timemaster
+
+### Commits
+- 0f83d13 feat(kiosk): Stufe 2 – Ed25519-Auth, CLI-Tool, neue KioskDevicesPage
+
+### Geänderte Dateien
+- DEVLOG.md                               |  58 ++++
+- backend/app/core/kiosk_security.py      | 233 ++++++++++++++
+- backend/app/routers/kiosk.py            | 119 +++++--
+- backend/app/schemas/kiosk.py            |  70 ++++-
+- backend/app/services/kiosk_service.py   | 138 ++++++---
+- backend/cli.py                          | 529 ++++++++++++++++++++++++++++++++
+- backend/requirements.txt                |   2 +
+- frontend/DEVLOG.md                      |  16 +
+- frontend/src/components/Layout.tsx      |  71 ++++-
+- frontend/src/pages/KioskDevicesPage.tsx | 412 +++++++++++++++++--------
+
+---

frontend/public/kiosk-sw.js

@@ -0,0 +1,187 @@
+// TimeMaster Kiosk ServiceWorker
+// Signs all /api/v1/kiosk/ requests with Ed25519 credentials stored in IndexedDB.
+
+const DB_NAME = 'kiosk-credentials';
+const DB_VERSION = 1;
+const STORE_NAME = 'credentials';
+const CRED_KEY = 'active';
+const CLIENT_VERSION = '1.0.0';
+
+// ── Lifecycle ──────────────────────────────────────────────────────────────
+
+self.addEventListener('install', (event) => {
+  event.waitUntil(self.skipWaiting());
+});
+
+self.addEventListener('activate', (event) => {
+  event.waitUntil(self.clients.claim());
+});
+
+// ── Fetch interception ─────────────────────────────────────────────────────
+
+self.addEventListener('fetch', (event) => {
+  const url = new URL(event.request.url);
+  if (!url.pathname.startsWith('/api/v1/kiosk/')) return;
+  event.respondWith(signAndFetch(event.request));
+});
+
+async function signAndFetch(request) {
+  const creds = await getCredentials();
+  if (!creds) {
+    // No keypair stored yet – pass through unsigned (e.g. during setup)
+    return fetch(request);
+  }
+
+  // Read body bytes for hashing (clone before consuming)
+  let bodyBytes = new Uint8Array(0);
+  if (request.body) {
+    bodyBytes = new Uint8Array(await request.clone().arrayBuffer());
+  }
+
+  // SHA-256 of body as lowercase hex
+  const bodyHashBuffer = await crypto.subtle.digest('SHA-256', bodyBytes);
+  const bodyHash = Array.from(new Uint8Array(bodyHashBuffer))
+    .map(b => b.toString(16).padStart(2, '0'))
+    .join('');
+
+  const timestamp = Math.floor(Date.now() / 1000).toString();
+  const nonce = crypto.randomUUID();
+
+  const url = new URL(request.url);
+  const path = url.pathname;
+  const method = request.method.toUpperCase();
+
+  // Signature message: "METHOD PATH TIMESTAMP NONCE BODYHASH"
+  const message = `${method} ${path} ${timestamp} ${nonce} ${bodyHash}`;
+  const messageBytes = new TextEncoder().encode(message);
+
+  const signatureBuffer = await crypto.subtle.sign(
+    'Ed25519',
+    creds.privateKey,
+    messageBytes
+  );
+  const signature = btoa(
+    String.fromCharCode(...new Uint8Array(signatureBuffer))
+  );
+
+  const newHeaders = new Headers(request.headers);
+  newHeaders.set('X-Kiosk-Key-Id', creds.deviceId);
+  newHeaders.set('X-Kiosk-Timestamp', timestamp);
+  newHeaders.set('X-Kiosk-Nonce', nonce);
+  newHeaders.set('X-Kiosk-Signature', signature);
+  newHeaders.set('X-Kiosk-Client-Version', CLIENT_VERSION);
+
+  const newRequest = new Request(request, { headers: newHeaders });
+  return fetch(newRequest);
+}
+
+// ── Message handler ────────────────────────────────────────────────────────
+// Handles messages from the page via MessageChannel.
+
+self.addEventListener('message', async (event) => {
+  const { type, deviceId, port } = event.data;
+  const replyPort = port || (event.ports && event.ports[0]);
+
+  if (type === 'GENERATE_KEYPAIR') {
+    try {
+      // Generate non-extractable Ed25519 keypair
+      const keyPair = await crypto.subtle.generateKey(
+        'Ed25519',
+        false, // non-extractable – private key stays inside SW
+        ['sign']
+      );
+
+      // Export public key in SPKI format → PEM
+      const spkiBuffer = await crypto.subtle.exportKey('spki', keyPair.publicKey);
+      const publicKeyPem = spkiToPem(spkiBuffer);
+
+      // Persist in IndexedDB
+      await saveCredentials(deviceId, keyPair.privateKey);
+
+      if (replyPort) {
+        replyPort.postMessage({ success: true, publicKeyPem });
+      }
+    } catch (err) {
+      if (replyPort) {
+        replyPort.postMessage({ success: false, error: err.message });
+      }
+    }
+    return;
+  }
+
+  if (type === 'CHECK_CREDENTIALS') {
+    const creds = await getCredentials();
+    if (replyPort) {
+      replyPort.postMessage({ hasCredentials: !!creds, deviceId: creds?.deviceId ?? null });
+    }
+    return;
+  }
+
+  if (type === 'CLEAR_CREDENTIALS') {
+    await clearCredentials();
+    if (replyPort) {
+      replyPort.postMessage({ success: true });
+    }
+    return;
+  }
+});
+
+// ── IndexedDB helpers ──────────────────────────────────────────────────────
+
+function openDb() {
+  return new Promise((resolve, reject) => {
+    const req = indexedDB.open(DB_NAME, DB_VERSION);
+    req.onupgradeneeded = (event) => {
+      const db = event.target.result;
+      if (!db.objectStoreNames.contains(STORE_NAME)) {
+        db.createObjectStore(STORE_NAME, { keyPath: 'key' });
+      }
+    };
+    req.onsuccess = () => resolve(req.result);
+    req.onerror  = () => reject(req.error);
+  });
+}
+
+async function getCredentials() {
+  const db = await openDb();
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction(STORE_NAME, 'readonly');
+    const store = tx.objectStore(STORE_NAME);
+    const req = store.get(CRED_KEY);
+    req.onsuccess = () => {
+      if (!req.result) { resolve(null); return; }
+      resolve({ deviceId: req.result.deviceId, privateKey: req.result.privateKey });
+    };
+    req.onerror = () => reject(req.error);
+  });
+}
+
+async function saveCredentials(deviceId, privateKey) {
+  const db = await openDb();
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction(STORE_NAME, 'readwrite');
+    const store = tx.objectStore(STORE_NAME);
+    const req = store.put({ key: CRED_KEY, deviceId, privateKey });
+    req.onsuccess = () => resolve();
+    req.onerror   = () => reject(req.error);
+  });
+}
+
+async function clearCredentials() {
+  const db = await openDb();
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction(STORE_NAME, 'readwrite');
+    const store = tx.objectStore(STORE_NAME);
+    const req = store.delete(CRED_KEY);
+    req.onsuccess = () => resolve();
+    req.onerror   = () => reject(req.error);
+  });
+}
+
+// ── Utilities ──────────────────────────────────────────────────────────────
+
+function spkiToPem(spkiBuffer) {
+  const b64 = btoa(String.fromCharCode(...new Uint8Array(spkiBuffer)));
+  const lines = b64.match(/.{1,64}/g).join('\n');
+  return `-----BEGIN PUBLIC KEY-----\n${lines}\n-----END PUBLIC KEY-----`;
+}

frontend/src/App.tsx

@@ -22,6 +22,8 @@ import { CompanySettingsPage } from './pages/CompanySettingsPage'
 import { ProfilePage } from './pages/ProfilePage'
 import { KioskDevicesPage } from './pages/KioskDevicesPage'
 import { AuditLogPage } from './pages/AuditLogPage'
+import { KioskSetupPage } from './pages/KioskSetupPage'
+import { KioskStampPage } from './pages/KioskStampPage'
 
 export default function App() {
   return (
@@ -32,6 +34,8 @@ export default function App() {
           <Route path='/register'           element={<RegisterPage />} />
           <Route path='/forgot-password'    element={<ForgotPasswordPage />} />
           <Route path='/auth/reset-password' element={<ResetPasswordPage />} />
+          <Route path='/kiosk/setup' element={<KioskSetupPage />} />
+          <Route path='/kiosk'       element={<KioskStampPage />} />
           <Route element={<ProtectedRoute />}>
             <Route path='/dashboard'      element={<DashboardPage />} />
             <Route path='/time'           element={<TimeTrackingPage />} />

frontend/src/pages/KioskSetupPage.tsx

@@ -0,0 +1,307 @@
+import { useEffect, useState, useRef } from 'react'
+import { useSearchParams, Link } from 'react-router-dom'
+
+type SetupStep = 'idle' | 'registering-sw' | 'generating' | 'done' | 'error'
+
+function isBrowserSupported(): boolean {
+  try {
+    // Ed25519 requires SubtleCrypto and the algorithm support
+    // We can only really verify at runtime, but check for the basics here
+    return (
+      typeof crypto !== 'undefined' &&
+      typeof crypto.subtle !== 'undefined' &&
+      typeof crypto.randomUUID === 'function' &&
+      'serviceWorker' in navigator
+    )
+  } catch {
+    return false
+  }
+}
+
+async function sendMessageToSW(
+  reg: ServiceWorkerRegistration,
+  message: object
+): Promise<Record<string, unknown>> {
+  return new Promise((resolve, reject) => {
+    const channel = new MessageChannel()
+    channel.port1.onmessage = (e) => resolve(e.data as Record<string, unknown>)
+    channel.port1.onmessageerror = () => reject(new Error('MessageChannel-Fehler'))
+    const sw = reg.active
+    if (!sw) { reject(new Error('ServiceWorker nicht aktiv')); return }
+    sw.postMessage({ ...message, port: channel.port2 }, [channel.port2])
+  })
+}
+
+export function KioskSetupPage() {
+  const [searchParams] = useSearchParams()
+  const deviceIdParam = searchParams.get('device_id') ?? ''
+
+  const [deviceId, setDeviceId]   = useState(deviceIdParam)
+  const [step, setStep]           = useState<SetupStep>('idle')
+  const [errorMsg, setErrorMsg]   = useState<string | null>(null)
+  const [publicKeyPem, setPublicKeyPem] = useState<string | null>(null)
+  const [copied, setCopied]       = useState(false)
+  const [existingDeviceId, setExistingDeviceId] = useState<string | null>(null)
+  const swRegRef = useRef<ServiceWorkerRegistration | null>(null)
+
+  const supported = isBrowserSupported()
+
+  // On mount: register SW and check for existing credentials
+  useEffect(() => {
+    if (!supported) return
+    ;(async () => {
+      try {
+        const reg = await navigator.serviceWorker.register('/kiosk-sw.js', { scope: '/' })
+        // Wait until the SW is active
+        if (!reg.active) {
+          await new Promise<void>((resolve) => {
+            const sw = reg.installing || reg.waiting
+            if (!sw) { resolve(); return }
+            sw.addEventListener('statechange', function handler() {
+              if (sw.state === 'activated') {
+                sw.removeEventListener('statechange', handler)
+                resolve()
+              }
+            })
+          })
+          // Re-fetch after activation
+          const updated = await navigator.serviceWorker.ready
+          swRegRef.current = updated
+        } else {
+          swRegRef.current = reg
+        }
+        // Check if credentials already exist
+        const ready = await navigator.serviceWorker.ready
+        swRegRef.current = ready
+        const result = await sendMessageToSW(ready, { type: 'CHECK_CREDENTIALS' })
+        if (result.hasCredentials) {
+          setExistingDeviceId(result.deviceId as string)
+        }
+      } catch {
+        // SW registration failure is non-fatal for the setup UI
+      }
+    })()
+  }, [supported])
+
+  async function handleGenerate() {
+    setErrorMsg(null)
+    setCopied(false)
+    setPublicKeyPem(null)
+
+    if (!deviceId.trim()) {
+      setErrorMsg('Bitte eine Geraete-ID eingeben (UUID des Kiosk-Geraets).')
+      return
+    }
+
+    setStep('registering-sw')
+    try {
+      if (!swRegRef.current) {
+        const reg = await navigator.serviceWorker.register('/kiosk-sw.js', { scope: '/' })
+        const ready = await navigator.serviceWorker.ready
+        swRegRef.current = reg.active ? reg : ready
+      }
+      const ready = await navigator.serviceWorker.ready
+      swRegRef.current = ready
+
+      setStep('generating')
+      const result = await sendMessageToSW(ready, {
+        type: 'GENERATE_KEYPAIR',
+        deviceId: deviceId.trim(),
+      })
+
+      if (!result.success) {
+        throw new Error((result.error as string) ?? 'Unbekannter Fehler im ServiceWorker')
+      }
+
+      setPublicKeyPem(result.publicKeyPem as string)
+      setExistingDeviceId(deviceId.trim())
+      setStep('done')
+    } catch (e: unknown) {
+      const msg = e instanceof Error ? e.message : String(e)
+      // Ed25519 not supported
+      if (msg.includes('Ed25519') || msg.includes('NotSupportedError') || msg.includes('algorithm')) {
+        setErrorMsg(
+          'Dieser Browser unterstuetzt kein Ed25519. Bitte Chrome 113+, Firefox 130+ oder Safari 16.4+ verwenden.'
+        )
+      } else {
+        setErrorMsg(msg)
+      }
+      setStep('error')
+    }
+  }
+
+  async function handleReset() {
+    if (!swRegRef.current) return
+    try {
+      await sendMessageToSW(swRegRef.current, { type: 'CLEAR_CREDENTIALS' })
+      setExistingDeviceId(null)
+      setPublicKeyPem(null)
+      setStep('idle')
+      setDeviceId(deviceIdParam)
+      setErrorMsg(null)
+      setCopied(false)
+    } catch (e: unknown) {
+      setErrorMsg(e instanceof Error ? e.message : 'Fehler beim Zuruecksetzen')
+    }
+  }
+
+  async function handleCopy() {
+    if (!publicKeyPem) return
+    try {
+      await navigator.clipboard.writeText(publicKeyPem)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    } catch {
+      // fallback: select textarea
+    }
+  }
+
+  const isGenerating = step === 'registering-sw' || step === 'generating'
+
+  if (!supported) {
+    return (
+      <div className='min-h-screen bg-gray-900 text-white flex items-center justify-center p-6'>
+        <div className='max-w-md w-full bg-gray-800 rounded-2xl p-8 text-center'>
+          <div className='text-4xl mb-4'>⚠️</div>
+          <h1 className='text-xl font-bold mb-2'>Browser nicht unterstuetzt</h1>
+          <p className='text-gray-400 text-sm'>
+            Dieser Browser unterstuetzt kein Ed25519 oder ServiceWorker.
+            Bitte Chrome 113+, Firefox 130+ oder Safari 16.4+ verwenden.
+          </p>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className='min-h-screen bg-gray-900 text-white flex items-center justify-center p-6'>
+      <div className='max-w-lg w-full space-y-6'>
+
+        {/* Header */}
+        <div className='text-center'>
+          <div className='text-5xl mb-3'>🔐</div>
+          <h1 className='text-2xl font-bold'>Kiosk einrichten</h1>
+          <p className='text-gray-400 text-sm mt-1'>
+            Generiert ein Ed25519-Schluessel&shy;paar fuer dieses Geraet.
+            Der private Schluessel verlässt den Browser nie.
+          </p>
+        </div>
+
+        {/* Existing credentials warning */}
+        {existingDeviceId && step !== 'done' && (
+          <div className='bg-yellow-900/50 border border-yellow-700 rounded-xl px-4 py-3 text-sm text-yellow-300'>
+            <span className='font-semibold'>Achtung:</span> Dieses Geraet hat bereits gespeicherte Credentials
+            fuer Geraet <code className='bg-yellow-900 rounded px-1'>{existingDeviceId}</code>.
+            Ein Neugenerieren ueberschreibt den vorhandenen Schluessel.{' '}
+            <button onClick={handleReset} className='underline hover:text-yellow-100 ml-1'>
+              Zuruecksetzen
+            </button>
+          </div>
+        )}
+
+        {/* Main card */}
+        <div className='bg-gray-800 rounded-2xl p-6 space-y-4'>
+          <label className='block'>
+            <span className='text-sm font-medium text-gray-300 block mb-1'>Geraete-ID (UUID)</span>
+            <input
+              value={deviceId}
+              onChange={e => setDeviceId(e.target.value)}
+              placeholder='z.B. 550e8400-e29b-41d4-a716-446655440000'
+              disabled={isGenerating || step === 'done'}
+              className='w-full bg-gray-700 border border-gray-600 rounded-lg px-3 py-2 text-sm text-white
+                         placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500
+                         disabled:opacity-50'
+            />
+            <p className='text-xs text-gray-500 mt-1'>
+              Die UUID des Geraets aus der Admin-Oberflaeche (Einstellungen → Kiosk-Geraete).
+            </p>
+          </label>
+
+          {errorMsg && (
+            <div className='bg-red-900/50 border border-red-700 rounded-lg px-3 py-2 text-sm text-red-300'>
+              {errorMsg}
+            </div>
+          )}
+
+          {step !== 'done' && (
+            <button
+              onClick={handleGenerate}
+              disabled={isGenerating || !deviceId.trim()}
+              className='w-full py-3 bg-blue-600 hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed
+                         rounded-xl font-semibold text-sm transition-colors'
+            >
+              {step === 'registering-sw' && 'ServiceWorker wird registriert…'}
+              {step === 'generating'     && 'Schluesselpaar wird generiert…'}
+              {(step === 'idle' || step === 'error') && 'Schluesselpaar generieren'}
+            </button>
+          )}
+
+          {/* Success state */}
+          {step === 'done' && publicKeyPem && (
+            <div className='space-y-4'>
+              <div className='flex items-center gap-2 text-green-400 text-sm font-medium'>
+                <span className='text-lg'>✓</span>
+                Schluesselpaar generiert und gespeichert.
+              </div>
+
+              <div>
+                <div className='flex items-center justify-between mb-1'>
+                  <span className='text-xs font-medium text-gray-400 uppercase tracking-wide'>
+                    Public Key (PEM-Format)
+                  </span>
+                  <button
+                    onClick={handleCopy}
+                    className='text-xs text-blue-400 hover:text-blue-300 transition-colors'
+                  >
+                    {copied ? '✓ Kopiert!' : 'Kopieren'}
+                  </button>
+                </div>
+                <pre className='bg-gray-900 rounded-lg p-3 text-xs text-green-300 font-mono
+                                overflow-x-auto whitespace-pre-wrap break-all border border-gray-700'>
+                  {publicKeyPem}
+                </pre>
+              </div>
+
+              <div className='bg-blue-900/40 border border-blue-700 rounded-lg px-3 py-3 text-xs text-blue-300 space-y-1'>
+                <p className='font-semibold text-blue-200'>Naechste Schritte:</p>
+                <ol className='list-decimal ml-4 space-y-1'>
+                  <li>Public Key oben kopieren und an den Admin schicken (E-Mail reicht – kein Geheimnis).</li>
+                  <li>
+                    Admin registriert das Geraet auf dem Server:{' '}
+                    <code className='bg-blue-950 rounded px-1'>timemaster kiosk add --pubkey ...</code>
+                  </li>
+                  <li>Admin gibt das Geraet in der Web-Oberflaeche frei.</li>
+                  <li>Kiosk-Modus starten.</li>
+                </ol>
+              </div>
+
+              <div className='flex gap-3'>
+                <Link
+                  to='/kiosk'
+                  className='flex-1 text-center py-2.5 bg-green-600 hover:bg-green-700 rounded-xl
+                             font-semibold text-sm transition-colors'
+                >
+                  Zum Kiosk →
+                </Link>
+                <button
+                  onClick={handleReset}
+                  className='px-4 py-2.5 border border-gray-600 text-gray-300 hover:bg-gray-700
+                             rounded-xl text-sm transition-colors'
+                >
+                  Zuruecksetzen
+                </button>
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Back link */}
+        {step !== 'done' && (
+          <p className='text-center text-xs text-gray-600'>
+            <Link to='/login' className='hover:text-gray-400 underline'>Zurueck zum Login</Link>
+          </p>
+        )}
+      </div>
+    </div>
+  )
+}

frontend/src/pages/KioskStampPage.tsx

@@ -0,0 +1,348 @@
+import { useEffect, useRef, useState } from 'react'
+import { Link } from 'react-router-dom'
+
+interface HeartbeatResponse {
+  server_time?: string
+  server_timestamp?: number
+  status?: string
+}
+
+// BroadcastChannel name – only one tab sends heartbeats
+const HEARTBEAT_CHANNEL = 'kiosk-heartbeat'
+const HEARTBEAT_INTERVAL_MS = 30_000
+const CLIENT_VERSION = '1.0.0'
+
+function formatTime(date: Date): string {
+  return date.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit', second: '2-digit' })
+}
+
+function formatDate(date: Date): string {
+  return date.toLocaleDateString('de-DE', {
+    weekday: 'long',
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  })
+}
+
+async function sendMessageToSW(
+  reg: ServiceWorkerRegistration,
+  message: object
+): Promise<Record<string, unknown>> {
+  return new Promise((resolve, reject) => {
+    const channel = new MessageChannel()
+    channel.port1.onmessage = (e) => resolve(e.data as Record<string, unknown>)
+    channel.port1.onmessageerror = () => reject(new Error('MessageChannel-Fehler'))
+    const sw = reg.active
+    if (!sw) { reject(new Error('ServiceWorker nicht aktiv')); return }
+    sw.postMessage({ ...message, port: channel.port2 }, [channel.port2])
+  })
+}
+
+export function KioskStampPage() {
+  const [displayTime, setDisplayTime]       = useState(new Date())
+  const [serverTimeOffset, setServerTimeOffset] = useState(0) // ms offset from server
+  const [isOnline, setIsOnline]             = useState(navigator.onLine)
+  const [heartbeatStatus, setHeartbeatStatus] = useState<'connected' | 'error' | 'pending'>('pending')
+  const [heartbeatError, setHeartbeatError] = useState<string | null>(null)
+  const [hasCredentials, setHasCredentials] = useState<boolean | null>(null)
+  const [deviceId, setDeviceId]             = useState<string | null>(null)
+  const [isLeaderTab, setIsLeaderTab]       = useState(false)
+
+  const heartbeatIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null)
+  const clockIntervalRef     = useRef<ReturnType<typeof setInterval> | null>(null)
+  const broadcastRef         = useRef<BroadcastChannel | null>(null)
+  const swRegRef             = useRef<ServiceWorkerRegistration | null>(null)
+  const startTimeRef         = useRef<number>(Date.now())
+
+  // Live clock – uses server time offset
+  useEffect(() => {
+    clockIntervalRef.current = setInterval(() => {
+      const localNow = Date.now()
+      setDisplayTime(new Date(localNow + serverTimeOffset))
+    }, 1000)
+    return () => {
+      if (clockIntervalRef.current) clearInterval(clockIntervalRef.current)
+    }
+  }, [serverTimeOffset])
+
+  // Online/Offline events
+  useEffect(() => {
+    const onOnline  = () => setIsOnline(true)
+    const onOffline = () => setIsOnline(false)
+    window.addEventListener('online',  onOnline)
+    window.addEventListener('offline', onOffline)
+    return () => {
+      window.removeEventListener('online',  onOnline)
+      window.removeEventListener('offline', onOffline)
+    }
+  }, [])
+
+  // ServiceWorker + BroadcastChannel setup
+  useEffect(() => {
+    let cancelled = false
+
+    async function init() {
+      // Register / retrieve SW
+      if ('serviceWorker' in navigator) {
+        try {
+          await navigator.serviceWorker.register('/kiosk-sw.js', { scope: '/' })
+          const ready = await navigator.serviceWorker.ready
+          swRegRef.current = ready
+
+          if (!cancelled) {
+            const result = await sendMessageToSW(ready, { type: 'CHECK_CREDENTIALS' })
+            setHasCredentials(!!result.hasCredentials)
+            setDeviceId(result.deviceId as string | null)
+          }
+        } catch {
+          if (!cancelled) {
+            setHasCredentials(false)
+          }
+        }
+      } else {
+        setHasCredentials(false)
+      }
+
+      if (cancelled) return
+
+      // Leader-election via BroadcastChannel:
+      // We announce ourselves; if we receive an announcement from another tab
+      // we yield. Simple "last writer wins for 1s window" approach.
+      const channel = new BroadcastChannel(HEARTBEAT_CHANNEL)
+      broadcastRef.current = channel
+
+      let isLeader = true
+
+      channel.onmessage = (e) => {
+        if (e.data?.type === 'HEARTBEAT_LEADER_ANNOUNCE') {
+          // Another tab claims leadership – we yield
+          isLeader = false
+          setIsLeaderTab(false)
+          if (heartbeatIntervalRef.current) {
+            clearInterval(heartbeatIntervalRef.current)
+            heartbeatIntervalRef.current = null
+          }
+        }
+        if (e.data?.type === 'HEARTBEAT_LEADER_YIELD' && !isLeader) {
+          // Previous leader stepped down – we take over
+          isLeader = true
+          setIsLeaderTab(true)
+          startHeartbeatLoop()
+        }
+      }
+
+      // Announce ourselves as leader after a short random delay
+      // to avoid simultaneous announcements on page reload
+      const delay = Math.random() * 500
+      await new Promise(r => setTimeout(r, delay))
+      if (!cancelled) {
+        channel.postMessage({ type: 'HEARTBEAT_LEADER_ANNOUNCE' })
+        setIsLeaderTab(isLeader)
+        if (isLeader) startHeartbeatLoop()
+      }
+    }
+
+    init()
+
+    return () => {
+      cancelled = true
+      if (heartbeatIntervalRef.current) clearInterval(heartbeatIntervalRef.current)
+      if (broadcastRef.current) {
+        broadcastRef.current.postMessage({ type: 'HEARTBEAT_LEADER_YIELD' })
+        broadcastRef.current.close()
+      }
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  function startHeartbeatLoop() {
+    // Send immediately, then on interval
+    sendHeartbeat()
+    if (heartbeatIntervalRef.current) clearInterval(heartbeatIntervalRef.current)
+    heartbeatIntervalRef.current = setInterval(sendHeartbeat, HEARTBEAT_INTERVAL_MS)
+  }
+
+  async function sendHeartbeat() {
+    if (!navigator.onLine) {
+      setHeartbeatStatus('error')
+      setHeartbeatError('Kein Netzwerk')
+      return
+    }
+
+    const uptimeSeconds = Math.floor((Date.now() - startTimeRef.current) / 1000)
+    const body = JSON.stringify({
+      uptime_seconds:         uptimeSeconds,
+      client_version:         CLIENT_VERSION,
+      queued_offline_entries: 0,
+      current_user_id:        null,
+    })
+
+    try {
+      const res = await fetch('/api/v1/kiosk/heartbeat', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body,
+      })
+
+      if (!res.ok) {
+        const errData = await res.json().catch(() => ({ detail: res.statusText }))
+        throw new Error(
+          typeof errData.detail === 'string' ? errData.detail : res.statusText
+        )
+      }
+
+      const data: HeartbeatResponse = await res.json().catch(() => ({}))
+
+      // Sync server time if provided
+      if (data.server_timestamp) {
+        const localNow = Date.now()
+        const serverMs = data.server_timestamp * 1000
+        setServerTimeOffset(serverMs - localNow)
+      } else if (data.server_time) {
+        const localNow = Date.now()
+        const serverMs = new Date(data.server_time).getTime()
+        if (!isNaN(serverMs)) {
+          setServerTimeOffset(serverMs - localNow)
+        }
+      }
+
+      setHeartbeatStatus('connected')
+      setHeartbeatError(null)
+    } catch (e: unknown) {
+      setHeartbeatStatus('error')
+      setHeartbeatError(e instanceof Error ? e.message : 'Verbindungsfehler')
+    }
+  }
+
+  return (
+    <div className='min-h-screen bg-gray-950 text-white flex flex-col'>
+
+      {/* Status bar */}
+      <div className='flex items-center justify-between px-6 py-3 bg-gray-900 border-b border-gray-800'>
+        <div className='flex items-center gap-3'>
+          <span className='text-sm font-semibold text-gray-300'>TimeMaster Kiosk</span>
+          {deviceId && (
+            <span className='text-xs text-gray-600 font-mono'>
+              {deviceId.slice(0, 8)}…
+            </span>
+          )}
+        </div>
+
+        <div className='flex items-center gap-4'>
+          {/* Heartbeat / connection status */}
+          {isLeaderTab && (
+            <div className='flex items-center gap-1.5 text-xs'>
+              {heartbeatStatus === 'connected' && (
+                <>
+                  <span className='w-2 h-2 rounded-full bg-green-500 animate-pulse' />
+                  <span className='text-green-400'>Verbunden</span>
+                </>
+              )}
+              {heartbeatStatus === 'error' && (
+                <>
+                  <span className='w-2 h-2 rounded-full bg-red-500' />
+                  <span className='text-red-400'>{heartbeatError ?? 'Verbindungsfehler'}</span>
+                </>
+              )}
+              {heartbeatStatus === 'pending' && (
+                <>
+                  <span className='w-2 h-2 rounded-full bg-yellow-500 animate-pulse' />
+                  <span className='text-yellow-400'>Verbinde…</span>
+                </>
+              )}
+            </div>
+          )}
+          {!isLeaderTab && (
+            <span className='text-xs text-gray-600'>Heartbeat: anderer Tab aktiv</span>
+          )}
+
+          {/* Online/Offline indicator */}
+          <div className='flex items-center gap-1.5 text-xs'>
+            {isOnline
+              ? <span className='text-gray-500'>Online</span>
+              : <span className='text-orange-400 font-semibold'>Offline</span>
+            }
+          </div>
+        </div>
+      </div>
+
+      {/* Main content */}
+      <div className='flex-1 flex flex-col items-center justify-center gap-8 px-6'>
+
+        {/* Clock */}
+        <div className='text-center'>
+          <div className='text-8xl font-bold font-mono tracking-tight tabular-nums'>
+            {formatTime(displayTime)}
+          </div>
+          <div className='text-xl text-gray-400 mt-2'>
+            {formatDate(displayTime)}
+          </div>
+          {Math.abs(serverTimeOffset) > 1000 && (
+            <div className='text-xs text-yellow-600 mt-1'>
+              Server-Zeit-Offset: {serverTimeOffset > 0 ? '+' : ''}{Math.round(serverTimeOffset / 1000)}s
+            </div>
+          )}
+        </div>
+
+        {/* Credentials missing warning */}
+        {hasCredentials === false && (
+          <div className='max-w-md w-full bg-yellow-900/50 border border-yellow-700 rounded-2xl p-5 text-center'>
+            <div className='text-3xl mb-2'>⚠️</div>
+            <p className='text-yellow-300 font-semibold mb-1'>Kiosk nicht eingerichtet</p>
+            <p className='text-yellow-500 text-sm mb-4'>
+              Dieses Geraet hat noch kein Ed25519-Schluesselpaar.
+              Bitte zuerst den Setup-Assistenten durchlaufen.
+            </p>
+            <Link
+              to='/kiosk/setup'
+              className='inline-block px-5 py-2.5 bg-yellow-600 hover:bg-yellow-500 rounded-xl
+                         font-semibold text-sm transition-colors'
+            >
+              Kiosk einrichten →
+            </Link>
+          </div>
+        )}
+
+        {/* Kiosk active state */}
+        {hasCredentials === true && (
+          <div className='max-w-md w-full bg-gray-800 rounded-2xl p-6 text-center space-y-4'>
+            <div className='text-4xl'>✅</div>
+            <p className='text-green-400 font-semibold text-lg'>Kiosk-Modus aktiv</p>
+            <p className='text-gray-400 text-sm'>
+              Alle Stempel-Anfragen werden automatisch per Ed25519 signiert.
+            </p>
+
+            {heartbeatStatus === 'error' && heartbeatError && (
+              <div className='bg-red-900/40 border border-red-700 rounded-lg px-3 py-2 text-sm text-red-300'>
+                Verbindungsfehler: {heartbeatError}
+              </div>
+            )}
+
+            <button
+              onClick={sendHeartbeat}
+              className='text-xs text-gray-500 hover:text-gray-300 underline transition-colors'
+            >
+              Heartbeat manuell senden
+            </button>
+          </div>
+        )}
+
+        {/* Loading state */}
+        {hasCredentials === null && (
+          <div className='text-gray-600 text-sm animate-pulse'>Initialisiere…</div>
+        )}
+      </div>
+
+      {/* Footer */}
+      <div className='px-6 py-4 text-center'>
+        <Link
+          to='/kiosk/setup'
+          className='text-xs text-gray-700 hover:text-gray-500 transition-colors underline'
+        >
+          Kiosk-Einrichtung
+        </Link>
+      </div>
+    </div>
+  )
+}