Visitenkarten-Scanner: Stapelscan, Extraktion, Übersicht, vCard-Export

Selbst gehostete PWA, die Visitenkarten von einem Foto freistellt, ausliest
und als Kontakt bereitstellt.

- Stapelscan: OpenCV findet die Kartenrechtecke über mehrere Binärmasken,
  entzerrt sie perspektivisch und schneidet sie einzeln aus. Ohne Fund gilt
  das ganze Foto als eine Karte.
- Extraktion: ein Aufruf je Zuschnitt an das Vision-Modell mit
  JSON-Schema. Kein vorgeschaltetes OCR - das würde Layout und
  Schriftgrößen wegwerfen, aus denen die Feldzuordnung entsteht.
- Metadaten: Aufnahmezeit und GPS aus den EXIF-Daten des Fotos, Ortsname
  über Nominatim, Browserstandort nur als Rückfallebene.
- Übersicht mit Volltextsuche und Filtern, Detailansicht mit Korrekturmaske.
- Notizfeld je Karte, Erinnerungen per Mail inklusive Nachholen verpasster
  Termine nach einem Neustart.
- vCard 3.0 einzeln und als Sammeldatei, Karte gilt danach als exportiert.
- Anmeldung über ein Passwort, Sitzung als signiertes Cookie.
- Deployment per Tag-Push nach den Konventionen in DEPLOY.md.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

static/app.js

@@ -0,0 +1,576 @@
+/* Visitenkarten-Scanner: Routing, Ansichten, API-Aufrufe. */
+(() => {
+  "use strict";
+
+  const FIELD_LABELS = {
+    full_name: "Name",
+    first_name: "Vorname",
+    last_name: "Nachname",
+    job_title: "Position",
+    company: "Firma",
+    department: "Abteilung",
+    email: "E-Mail",
+    phone: "Telefon",
+    mobile: "Mobil",
+    fax: "Fax",
+    website: "Web",
+    street: "Straße",
+    postal_code: "PLZ",
+    city: "Ort",
+    country: "Land",
+  };
+  const FIELD_ORDER = Object.keys(FIELD_LABELS);
+
+  const state = {
+    route: "scan",
+    cardId: null,
+    query: "",
+    filter: "alle",
+    cards: [],
+    stats: { total: 0, offen: 0, erinnerungen: 0 },
+    editing: false,
+  };
+
+  const $ = (id) => document.getElementById(id);
+  const screens = {
+    scan: $("screen-scan"),
+    karten: $("screen-cards"),
+    karte: $("screen-detail"),
+    erinnerungen: $("screen-reminders"),
+  };
+
+  const esc = (value) =>
+    String(value ?? "").replace(/[&<>"']/g, (c) => ({
+      "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;",
+    })[c]);
+
+  // ------------------------------------------------------------------ Helfer
+
+  function toast(message) {
+    const node = $("toast");
+    node.textContent = message;
+    node.hidden = false;
+    clearTimeout(toast.timer);
+    toast.timer = setTimeout(() => { node.hidden = true; }, 3200);
+  }
+
+  function busy(on, text) {
+    $("busy-text").textContent = text || "Karten werden gelesen";
+    $("busy-overlay").hidden = !on;
+  }
+
+  async function api(path, options = {}) {
+    const response = await fetch(path, { credentials: "same-origin", ...options });
+    if (response.status === 401) {
+      $("login-overlay").hidden = false;
+      throw new Error("Nicht angemeldet");
+    }
+    if (!response.ok) {
+      let detail = `Fehler ${response.status}`;
+      try { detail = (await response.json()).detail || detail; } catch (_) {}
+      throw new Error(detail);
+    }
+    return response.status === 204 ? null : response.json();
+  }
+
+  const formatDate = (iso) => {
+    if (!iso) return "–";
+    const date = new Date(iso);
+    return Number.isNaN(date.getTime())
+      ? "–"
+      : date.toLocaleDateString("de-DE", { day: "2-digit", month: "2-digit", year: "numeric" });
+  };
+
+  const formatDateTime = (iso) => {
+    if (!iso) return "–";
+    const date = new Date(iso);
+    return Number.isNaN(date.getTime())
+      ? "–"
+      : date.toLocaleString("de-DE", {
+          day: "2-digit", month: "2-digit", year: "numeric",
+          hour: "2-digit", minute: "2-digit",
+        });
+  };
+
+  const displayName = (card) =>
+    card.full_name ||
+    [card.first_name, card.last_name].filter(Boolean).join(" ") ||
+    card.company ||
+    "Ohne Namen";
+
+  /** Position des Browsers als Rückfallebene. Die EXIF-Daten des Fotos sind
+   *  genauer, deshalb blockiert das hier nichts und scheitert leise. */
+  function browserPosition() {
+    return new Promise((resolve) => {
+      if (!navigator.geolocation) return resolve(null);
+      navigator.geolocation.getCurrentPosition(
+        (position) => resolve(position.coords),
+        () => resolve(null),
+        { timeout: 6000, maximumAge: 300000 }
+      );
+    });
+  }
+
+  // ----------------------------------------------------------------- Routing
+
+  function go(route, cardId) {
+    location.hash = cardId ? `#/${route}/${cardId}` : `#/${route}`;
+  }
+
+  function applyRoute() {
+    const parts = location.hash.replace(/^#\/?/, "").split("/");
+    const route = screens[parts[0]] ? parts[0] : "scan";
+    state.route = route;
+    state.cardId = route === "karte" ? parts[1] : null;
+
+    Object.entries(screens).forEach(([name, node]) => { node.hidden = name !== route; });
+    document.querySelectorAll(".tab").forEach((tab) => {
+      const active = tab.dataset.route === route || (route === "karte" && tab.dataset.route === "karten");
+      tab.setAttribute("aria-selected", active ? "true" : "false");
+    });
+    window.scrollTo(0, 0);
+
+    if (route === "karten") loadCards();
+    if (route === "karte") loadCard(state.cardId);
+    if (route === "erinnerungen") loadReminders();
+  }
+
+  // ------------------------------------------------------------------- Scan
+
+  async function runScan(file) {
+    if (!file) return;
+    busy(true, "Karten werden freigestellt");
+    const body = new FormData();
+    body.append("file", file);
+    const coords = await browserPosition();
+    if (coords) {
+      body.append("lat", coords.latitude);
+      body.append("lon", coords.longitude);
+    }
+    busy(true, "Karten werden gelesen");
+    try {
+      const result = await api("/api/scan", { method: "POST", body });
+      renderScanResult(result);
+      await refreshStats();
+      toast(`${result.count} Karte${result.count === 1 ? "" : "n"} erfasst`);
+    } catch (error) {
+      toast(error.message);
+    } finally {
+      busy(false);
+    }
+  }
+
+  function renderScanResult(result) {
+    const rows = result.cards
+      .map(
+        (card) => `
+        <button class="row" data-card="${esc(card.id)}">
+          <span class="row-head">
+            <span class="row-title">${esc(displayName(card))}</span>
+            <span class="row-meta">${card.has_contact ? "OK" : "Leer"}</span>
+          </span>
+          <span class="row-sub">${esc(card.company || card.email || "Keine Daten erkannt")}</span>
+        </button>`
+      )
+      .join("");
+
+    $("scan-result").innerHTML = `
+      <div class="section-label"><span class="label">Ergebnis</span></div>
+      <div class="strip" style="border-top:3px solid #000">
+        <span class="label">Gefundene Karten</span>
+        <span class="display d-lg mono-num">${result.count}</span>
+      </div>
+      ${result.fallback
+        ? `<p class="hint" style="margin-top:10px">Kein Kartenrechteck erkannt – das ganze Foto
+           wurde als eine Karte behandelt. Für einen Stapel hilft ein dunkler, einfarbiger
+           Untergrund mit Abstand zwischen den Karten.</p>`
+        : ""}
+      <div class="rows" style="margin-top:14px">${rows}</div>`;
+  }
+
+  // ------------------------------------------------------------- Kartenliste
+
+  async function loadCards() {
+    const params = new URLSearchParams({ q: state.query, filter: state.filter });
+    try {
+      const data = await api(`/api/cards?${params}`);
+      state.cards = data.cards;
+      state.stats = data.stats;
+      updateCounters();
+      renderCards();
+    } catch (error) {
+      toast(error.message);
+    }
+  }
+
+  function renderCards() {
+    const list = $("cards-list");
+    if (!state.cards.length) {
+      list.innerHTML = `<div class="empty">
+        <p class="label">Nichts gefunden</p>
+        <p class="hint" style="margin:8px 0 0">
+          ${state.query || state.filter !== "alle"
+            ? "Andere Suche oder anderer Filter."
+            : "Noch keine Karten erfasst."}
+        </p></div>`;
+      return;
+    }
+
+    const selectable = state.cards.map((c) => c.id).join(",");
+    list.innerHTML = `
+      <div class="strip" style="border-top:3px solid #000">
+        <span class="label">${state.cards.length} Karte${state.cards.length === 1 ? "" : "n"}</span>
+        <a class="badge" href="/vcf?ids=${esc(selectable)}" download>Alle als vCard</a>
+      </div>
+      <div class="rows">
+        ${state.cards
+          .map(
+            (card) => `
+          <button class="row" data-card="${esc(card.id)}">
+            <span class="row-head">
+              <span class="row-title">${esc(displayName(card))}</span>
+              <span class="row-meta">${esc(formatDate(card.captured_at || card.created_at))}</span>
+            </span>
+            <span class="row-sub">
+              ${esc([card.job_title, card.company].filter(Boolean).join(" · ") || "Keine Firma erkannt")}
+            </span>
+            <span class="row-sub">${esc(
+              [
+                card.place,
+                card.exported_at ? "exportiert" : "nicht exportiert",
+                card.extract_status !== "ok" ? "Lesefehler" : null,
+              ]
+                .filter(Boolean)
+                .join(" · ")
+            )}</span>
+          </button>`
+          )
+          .join("")}
+      </div>`;
+  }
+
+  // ----------------------------------------------------------- Kartendetail
+
+  async function loadCard(cardId) {
+    try {
+      const card = await api(`/api/cards/${cardId}`);
+      renderCard(card);
+    } catch (error) {
+      screens.karte.innerHTML = `<div class="empty"><p class="label">${esc(error.message)}</p></div>`;
+    }
+  }
+
+  function dataTable(card) {
+    const rows = FIELD_ORDER.filter((field) => card[field])
+      .map(
+        (field) =>
+          `<tr><th>${FIELD_LABELS[field]}</th><td>${esc(card[field])}</td></tr>`
+      )
+      .join("");
+    return rows
+      ? `<table class="data">${rows}</table>`
+      : `<p class="hint">Keine Felder erkannt. Über „Bearbeiten“ nachtragen.</p>`;
+  }
+
+  function editForm(card) {
+    return `<div class="stack-tight">${FIELD_ORDER.map(
+      (field) => `
+      <label class="field">
+        <span class="label">${FIELD_LABELS[field]}</span>
+        <input data-field="${field}" value="${esc(card[field] || "")}">
+      </label>`
+    ).join("")}</div>`;
+  }
+
+  function renderCard(card) {
+    const meta = [];
+    if (card.place) meta.push(esc(card.place));
+    if (card.lat != null) meta.push(`${card.lat.toFixed(4)}, ${card.lon.toFixed(4)}`);
+
+    const reminders = card.reminders.length
+      ? `<div class="rows">${card.reminders
+          .map(
+            (reminder) => `
+          <div class="row" style="cursor:default">
+            <span class="row-head">
+              <span class="row-title" style="font-size:14px">${esc(reminder.text)}</span>
+              <button class="badge" data-delete-reminder="${esc(reminder.id)}">Löschen</button>
+            </span>
+            <span class="row-sub">
+              ${esc(formatDateTime(reminder.due_at))}
+              ${reminder.sent_at ? " · verschickt" : ""}
+              ${reminder.send_error ? " · Versand fehlgeschlagen" : ""}
+            </span>
+          </div>`
+          )
+          .join("")}</div>`
+      : `<p class="hint">Keine Erinnerung gesetzt.</p>`;
+
+    screens.karte.innerHTML = `
+      <button class="chip" data-back>← Zurück</button>
+
+      <div class="block-invert">
+        <p class="label">${card.source === "stapel" ? "Aus Stapelscan" : "Einzelscan"}</p>
+        <h1 class="display d-lg" style="margin-top:8px">${esc(displayName(card))}</h1>
+        <p class="muted" style="margin:6px 0 0">
+          ${esc([card.job_title, card.company].filter(Boolean).join(" · ") || "Keine Firma erkannt")}
+        </p>
+        <div class="figures">
+          <span class="figure">
+            <span class="label">Erfasst</span>
+            <span class="display d-md">${esc(formatDate(card.captured_at || card.created_at))}</span>
+          </span>
+          <span class="figure">
+            <span class="label">Ort</span>
+            <span class="display d-md">${meta.length ? esc(meta[0]) : "Unbekannt"}</span>
+          </span>
+        </div>
+      </div>
+
+      ${card.image_url
+        ? `<img class="card-image" src="${esc(card.image_url)}" alt="Visitenkarte">`
+        : ""}
+
+      <a class="btn btn-primary" href="/vcf/${esc(card.id)}" download>
+        In Kontakte speichern <span class="arrow">→</span>
+      </a>
+
+      ${card.extract_status !== "ok"
+        ? `<p class="hint">Lesefehler: ${esc(card.extract_error || "unbekannt")}</p>`
+        : ""}
+
+      <div class="section-label">
+        <span class="label">Daten</span>
+      </div>
+      <button class="chip" data-toggle-edit style="margin-bottom:10px">
+        ${state.editing ? "Fertig" : "Bearbeiten"}
+      </button>
+      ${state.editing ? editForm(card) : dataTable(card)}
+
+      <div class="section-label"><span class="label">Notiz</span></div>
+      <label class="field">
+        <textarea data-field="notes" placeholder="Worum ging es im Gespräch?">${esc(card.notes || "")}</textarea>
+      </label>
+
+      <div class="section-label"><span class="label">Erinnerung</span></div>
+      ${reminders}
+      <form class="stack-tight" id="reminder-form" style="margin-top:14px">
+        <label class="field">
+          <span class="label">Text</span>
+          <input name="text" placeholder="Angebot nachfassen" required>
+        </label>
+        <label class="field">
+          <span class="label">Termin</span>
+          <input name="due" type="datetime-local" required>
+        </label>
+        <button class="btn" type="submit">Erinnerung anlegen <span class="arrow">→</span></button>
+      </form>
+
+      <div class="section-label"><span class="label">Karte entfernen</span></div>
+      <button class="btn btn-danger" data-delete-card="${esc(card.id)}">
+        Endgültig löschen <span class="arrow">×</span>
+      </button>`;
+
+    screens.karte.querySelectorAll("[data-field]").forEach((input) => {
+      input.addEventListener("change", async () => {
+        try {
+          await api(`/api/cards/${card.id}`, {
+            method: "PATCH",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ [input.dataset.field]: input.value }),
+          });
+          toast("Gespeichert");
+        } catch (error) {
+          toast(error.message);
+        }
+      });
+    });
+
+    $("reminder-form").addEventListener("submit", async (event) => {
+      event.preventDefault();
+      const form = event.currentTarget;
+      const due = form.elements.due.value;
+      if (!due) return;
+      try {
+        await api(`/api/cards/${card.id}/reminders`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            text: form.elements.text.value,
+            due_at: new Date(due).toISOString(),
+          }),
+        });
+        toast("Erinnerung angelegt");
+        loadCard(card.id);
+        refreshStats();
+      } catch (error) {
+        toast(error.message);
+      }
+    });
+  }
+
+  // ------------------------------------------------------------ Erinnerungen
+
+  async function loadReminders() {
+    try {
+      const data = await api("/api/reminders");
+      const list = $("reminders-list");
+      if (!data.reminders.length) {
+        list.innerHTML = `<div class="empty"><p class="label">Keine Erinnerungen</p>
+          <p class="hint" style="margin:8px 0 0">Erinnerungen legst du auf einer Karte an.</p></div>`;
+        return;
+      }
+      list.innerHTML = `
+        ${data.mail_configured ? "" : `<p class="hint">Kein SMTP konfiguriert – es wird nichts verschickt.</p>`}
+        <div class="rows">${data.reminders
+          .map(
+            (reminder) => `
+          <button class="row" data-card="${esc(reminder.card_id)}">
+            <span class="row-head">
+              <span class="row-title" style="font-size:15px">${esc(reminder.text)}</span>
+              <span class="row-meta">${reminder.sent_at ? "verschickt" : "offen"}</span>
+            </span>
+            <span class="row-sub">${esc(formatDateTime(reminder.due_at))}
+              · ${esc(reminder.full_name || reminder.company || "Kontakt")}</span>
+          </button>`
+          )
+          .join("")}</div>`;
+    } catch (error) {
+      toast(error.message);
+    }
+  }
+
+  // -------------------------------------------------------------- Zähler
+
+  function updateCounters() {
+    $("figure-total").textContent = state.stats.total;
+    $("figure-open").textContent = state.stats.offen;
+    $("tab-count-cards").textContent = state.stats.total;
+    $("tab-count-reminders").textContent = state.stats.erinnerungen;
+  }
+
+  async function refreshStats() {
+    try {
+      const data = await api("/api/cards?filter=alle");
+      state.stats = data.stats;
+      updateCounters();
+    } catch (_) { /* Zähler sind nicht kritisch */ }
+  }
+
+  // ------------------------------------------------------------- Ereignisse
+
+  document.addEventListener("click", (event) => {
+    const cardButton = event.target.closest("[data-card]");
+    if (cardButton) return go("karte", cardButton.dataset.card);
+
+    if (event.target.closest("[data-back]")) {
+      state.editing = false;
+      return go("karten");
+    }
+
+    if (event.target.closest("[data-toggle-edit]")) {
+      state.editing = !state.editing;
+      return loadCard(state.cardId);
+    }
+
+    const tab = event.target.closest(".tab");
+    if (tab) return go(tab.dataset.route);
+
+    const chip = event.target.closest("#filter-chips .chip");
+    if (chip) {
+      state.filter = chip.dataset.filter;
+      document.querySelectorAll("#filter-chips .chip").forEach((c) =>
+        c.setAttribute("aria-pressed", c === chip ? "true" : "false")
+      );
+      return loadCards();
+    }
+
+    const removeReminder = event.target.closest("[data-delete-reminder]");
+    if (removeReminder) {
+      event.preventDefault();
+      return api(`/api/reminders/${removeReminder.dataset.deleteReminder}`, { method: "DELETE" })
+        .then(() => { loadCard(state.cardId); refreshStats(); })
+        .catch((error) => toast(error.message));
+    }
+
+    const removeCard = event.target.closest("[data-delete-card]");
+    if (removeCard) {
+      if (!confirm("Karte und Bild endgültig löschen?")) return;
+      return api(`/api/cards/${removeCard.dataset.deleteCard}`, { method: "DELETE" })
+        .then(() => { toast("Karte gelöscht"); go("karten"); })
+        .catch((error) => toast(error.message));
+    }
+  });
+
+  let searchTimer;
+  $("search-input").addEventListener("input", (event) => {
+    state.query = event.target.value;
+    clearTimeout(searchTimer);
+    searchTimer = setTimeout(loadCards, 220);
+  });
+
+  $("search-clear").addEventListener("click", () => {
+    $("search-input").value = "";
+    state.query = "";
+    loadCards();
+  });
+
+  ["input-camera", "input-library"].forEach((id) => {
+    $(id).addEventListener("change", (event) => {
+      const file = event.target.files[0];
+      event.target.value = "";
+      runScan(file);
+    });
+  });
+
+  $("login-form").addEventListener("submit", async (event) => {
+    event.preventDefault();
+    const body = new FormData();
+    body.append("password", $("login-password").value);
+    try {
+      await fetch("/api/login", { method: "POST", body, credentials: "same-origin" })
+        .then((response) => {
+          if (!response.ok) throw new Error("Passwort stimmt nicht");
+        });
+      $("login-overlay").hidden = true;
+      $("login-error").hidden = true;
+      boot();
+    } catch (error) {
+      $("login-error").textContent = error.message;
+      $("login-error").hidden = false;
+    }
+  });
+
+  $("logout-button").addEventListener("click", async () => {
+    await api("/api/logout", { method: "POST" }).catch(() => {});
+    location.reload();
+  });
+
+  window.addEventListener("hashchange", applyRoute);
+
+  // --------------------------------------------------------------- Start
+
+  async function boot() {
+    try {
+      const session = await fetch("/api/session", { credentials: "same-origin" }).then((r) => r.json());
+      if (session.auth_required && !session.authenticated) {
+        $("login-overlay").hidden = false;
+        return;
+      }
+      $("logout-button").hidden = !session.auth_required;
+      if (!session.extraction_available) {
+        toast("Kein API-Schlüssel gesetzt – Karten werden nur zugeschnitten.");
+      }
+      await refreshStats();
+      applyRoute();
+    } catch (error) {
+      toast("Server nicht erreichbar");
+    }
+  }
+
+  if ("serviceWorker" in navigator) {
+    navigator.serviceWorker.register("/sw.js", { updateViaCache: "none" }).catch(() => {});
+  }
+
+  boot();
+})();

static/index.html

@@ -0,0 +1,136 @@
+<!doctype html>
+<html lang="de">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+<meta name="theme-color" content="#000000">
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-status-bar-style" content="black">
+<meta name="apple-mobile-web-app-title" content="Karten">
+<title>Visitenkarten Scanner</title>
+<link rel="manifest" href="/manifest.webmanifest">
+<link rel="apple-touch-icon" href="/static/icons/icon-192.png">
+<link rel="icon" href="/static/icons/icon-192.png">
+<link rel="stylesheet" href="/static/style.css">
+</head>
+<body>
+
+<div class="app">
+  <header class="topbar">
+    <span class="mark" aria-hidden="true">
+      <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2">
+        <rect x="2" y="5" width="20" height="14"></rect>
+        <path d="M6 10h5M6 14h8"></path>
+      </svg>
+    </span>
+    <span class="wordmark">
+      <span class="display d-md">Visitenkarten</span>
+      <span class="label">Scanner</span>
+    </span>
+    <span class="spacer"></span>
+    <button class="chip" id="logout-button" hidden>Abmelden</button>
+  </header>
+
+  <main>
+    <!-- ------------------------------------------------------------- Scan -->
+    <section class="screen stack" id="screen-scan">
+      <div class="block-invert">
+        <p class="label">Stapel oder Einzelkarte</p>
+        <h1 class="display d-xl" style="margin-top:8px">Karten<br>erfassen</h1>
+        <p class="muted" style="margin:12px 0 0">
+          Karten nebeneinander auf einen dunklen, einfarbigen Untergrund legen,
+          Handy parallel darüber halten. Ein Foto genügt für den ganzen Tisch.
+        </p>
+        <div class="figures">
+          <span class="figure">
+            <span class="label">Erfasst</span>
+            <span class="display d-lg mono-num" id="figure-total">0</span>
+          </span>
+          <span class="figure">
+            <span class="label">Nicht exportiert</span>
+            <span class="display d-lg mono-num" id="figure-open">0</span>
+          </span>
+        </div>
+      </div>
+
+      <label class="btn btn-primary" for="input-camera">
+        Foto aufnehmen <span class="arrow">→</span>
+        <input id="input-camera" type="file" accept="image/*" capture="environment" hidden>
+      </label>
+      <label class="btn" for="input-library">
+        Aus Fotos wählen <span class="arrow">↗</span>
+        <input id="input-library" type="file" accept="image/*" hidden>
+      </label>
+
+      <p class="hint">
+        Die Kamera liefert die volle Auflösung – bei zwanzig Karten auf einem Foto
+        ist das der Unterschied zwischen lesbar und nicht lesbar.
+      </p>
+
+      <div id="scan-result"></div>
+    </section>
+
+    <!-- ------------------------------------------------------------ Karten -->
+    <section class="screen stack" id="screen-cards" hidden>
+      <div class="search">
+        <input id="search-input" type="search" placeholder="Name, Firma, Ort, Notiz …"
+               autocomplete="off" enterkeyhint="search">
+        <button id="search-clear" type="button" aria-label="Suche leeren">×</button>
+      </div>
+      <div class="chips" id="filter-chips">
+        <button class="chip" data-filter="alle" aria-pressed="true">Alle</button>
+        <button class="chip" data-filter="offen" aria-pressed="false">Nicht exportiert</button>
+        <button class="chip" data-filter="unvollstaendig" aria-pressed="false">Unvollständig</button>
+        <button class="chip" data-filter="erinnerung" aria-pressed="false">Mit Erinnerung</button>
+      </div>
+      <div id="cards-list"></div>
+    </section>
+
+    <!-- ------------------------------------------------------------ Detail -->
+    <section class="screen stack" id="screen-detail" hidden></section>
+
+    <!-- ------------------------------------------------------ Erinnerungen -->
+    <section class="screen stack" id="screen-reminders" hidden>
+      <div class="section-label"><span class="label">Erinnerungen</span></div>
+      <div id="reminders-list"></div>
+    </section>
+  </main>
+
+  <nav class="tabs" role="tablist">
+    <button class="tab" role="tab" data-route="scan" aria-selected="true">Scan</button>
+    <button class="tab" role="tab" data-route="karten" aria-selected="false">
+      <span class="count mono-num" id="tab-count-cards">0</span>Karten
+    </button>
+    <button class="tab" role="tab" data-route="erinnerungen" aria-selected="false">
+      <span class="count mono-num" id="tab-count-reminders">0</span>Termine
+    </button>
+  </nav>
+</div>
+
+<!-- ------------------------------------------------------------------ Login -->
+<div class="overlay" id="login-overlay" hidden>
+  <form class="block stack" id="login-form">
+    <p class="label muted">Zugang</p>
+    <h2 class="display d-lg">Anmelden</h2>
+    <label class="field">
+      <span class="label">Passwort</span>
+      <input type="password" id="login-password" autocomplete="current-password" required>
+    </label>
+    <button class="btn btn-primary" type="submit">Weiter <span class="arrow">→</span></button>
+    <p class="hint" id="login-error" hidden></p>
+  </form>
+</div>
+
+<!-- -------------------------------------------------------------- Fortschritt -->
+<div class="overlay" id="busy-overlay" hidden>
+  <div class="block-invert stack" style="text-align:center">
+    <div class="spinner" style="margin:0 auto"></div>
+    <p class="label" id="busy-text">Karten werden gelesen</p>
+  </div>
+</div>
+
+<div class="toast" id="toast" hidden></div>
+
+<script src="/static/app.js"></script>
+</body>
+</html>

static/manifest.webmanifest

@@ -0,0 +1,16 @@
+{
+  "name": "Visitenkarten Scanner",
+  "short_name": "Karten",
+  "description": "Visitenkarten fotografieren, auslesen und als Kontakt speichern.",
+  "start_url": "/",
+  "scope": "/",
+  "display": "standalone",
+  "orientation": "portrait",
+  "background_color": "#ffffff",
+  "theme_color": "#000000",
+  "icons": [
+    { "src": "/static/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
+    { "src": "/static/icons/icon-512.png", "sizes": "512x512", "type": "image/png" },
+    { "src": "/static/icons/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
+  ]
+}

static/style.css

@@ -0,0 +1,381 @@
+/* Schwarzweiss, harte Kanten, keine Rundungen. Mobile first. */
+
+:root {
+  color-scheme: light;
+  --fg: #000;
+  --bg: #fff;
+  --muted: #6b6b6b;
+  --hair: #d5d5d5;
+  --wash: #f2f2f2;
+  --sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  --shell: 3px;
+  --pad: 18px;
+}
+
+* { box-sizing: border-box; }
+
+html, body {
+  margin: 0;
+  padding: 0;
+  background: var(--wash);
+  color: var(--fg);
+  font-family: var(--sans);
+  font-size: 15px;
+  line-height: 1.45;
+  -webkit-text-size-adjust: 100%;
+}
+
+body { overflow-x: hidden; }
+
+button, input, textarea, select {
+  font: inherit;
+  color: inherit;
+  border-radius: 0;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+a { color: inherit; }
+
+/* ------------------------------------------------------------------ Typografie */
+
+.display {
+  font-weight: 800;
+  font-stretch: 85%;
+  letter-spacing: -0.02em;
+  text-transform: uppercase;
+  line-height: 0.95;
+  margin: 0;
+}
+
+.d-xl { font-size: 40px; }
+.d-lg { font-size: 28px; }
+.d-md { font-size: 20px; }
+
+.label {
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  margin: 0;
+}
+
+.muted { color: var(--muted); }
+.mono-num { font-variant-numeric: tabular-nums; }
+
+/* ---------------------------------------------------------------------- Gerüst */
+
+.app {
+  max-width: 560px;
+  margin: 0 auto;
+  min-height: 100vh;
+  background: var(--bg);
+  border-left: 1px solid var(--fg);
+  border-right: 1px solid var(--fg);
+  display: flex;
+  flex-direction: column;
+}
+
+.topbar {
+  position: sticky;
+  top: 0;
+  z-index: 20;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 14px var(--pad);
+  background: var(--bg);
+  border-bottom: var(--shell) solid var(--fg);
+}
+
+.mark {
+  width: 34px;
+  height: 34px;
+  flex: 0 0 34px;
+  background: var(--fg);
+  display: grid;
+  place-items: center;
+}
+
+.mark svg { width: 20px; height: 20px; }
+
+.wordmark { line-height: 1; }
+.wordmark .d-md { display: block; }
+.wordmark .label { color: var(--muted); margin-top: 3px; }
+
+.topbar .spacer { margin-left: auto; }
+
+main { flex: 1; display: flex; flex-direction: column; }
+.screen { flex: 1; padding: var(--pad) var(--pad) 28px; }
+.screen[hidden] { display: none; }
+
+.stack > * + * { margin-top: 14px; }
+.stack-tight > * + * { margin-top: 8px; }
+
+/* ---------------------------------------------------------------------- Blöcke */
+
+.block {
+  border: var(--shell) solid var(--fg);
+  padding: 16px;
+}
+
+.block-invert {
+  background: var(--fg);
+  color: var(--bg);
+  border: var(--shell) solid var(--fg);
+  padding: 16px;
+}
+
+.block-invert .muted { color: #b4b4b4; }
+
+.strip {
+  border: var(--shell) solid var(--fg);
+  border-top: none;
+  padding: 12px 16px;
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.section-label {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin: 26px 0 10px;
+}
+
+.section-label::after {
+  content: "";
+  flex: 1;
+  height: 1px;
+  background: var(--fg);
+}
+
+.figures {
+  display: flex;
+  gap: 30px;
+  margin-top: 18px;
+}
+
+.figure { display: flex; flex-direction: column; }
+.figure .label { color: inherit; opacity: 0.7; margin-bottom: 5px; }
+
+/* --------------------------------------------------------------------- Buttons */
+
+.btn {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  width: 100%;
+  padding: 16px;
+  background: var(--bg);
+  border: var(--shell) solid var(--fg);
+  font-weight: 800;
+  font-size: 14px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  text-decoration: none;
+  cursor: pointer;
+  text-align: left;
+}
+
+.btn-primary { background: var(--fg); color: var(--bg); }
+.btn:disabled { opacity: 0.35; cursor: not-allowed; }
+.btn .arrow { font-weight: 400; font-size: 17px; }
+
+.btn-row { display: flex; gap: 10px; }
+.btn-row .btn { flex: 1; }
+
+.btn-small {
+  padding: 9px 12px;
+  font-size: 11px;
+  letter-spacing: 0.1em;
+  border-width: 2px;
+  width: auto;
+  justify-content: center;
+}
+
+.btn-danger { border-color: var(--fg); color: var(--fg); }
+
+/* --------------------------------------------------------------------- Formular */
+
+.field { display: block; }
+.field .label { color: var(--muted); margin-bottom: 5px; }
+
+.field input,
+.field textarea,
+.field select {
+  width: 100%;
+  padding: 11px 12px;
+  background: var(--bg);
+  border: 2px solid var(--fg);
+}
+
+.field input:focus,
+.field textarea:focus,
+.field select:focus { outline: 3px solid var(--fg); outline-offset: 1px; }
+
+.field textarea { min-height: 90px; resize: vertical; }
+
+.search {
+  display: flex;
+  border: var(--shell) solid var(--fg);
+}
+
+.search input { flex: 1; border: none; padding: 14px; background: var(--bg); }
+.search input:focus { outline: none; }
+.search button {
+  border: none;
+  border-left: 2px solid var(--fg);
+  background: var(--bg);
+  padding: 0 16px;
+  cursor: pointer;
+  font-weight: 800;
+}
+
+.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
+
+.chip {
+  padding: 7px 11px;
+  border: 2px solid var(--fg);
+  background: var(--bg);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  cursor: pointer;
+}
+
+.chip[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
+
+/* --------------------------------------------------------------------- Tabellen */
+
+.rows { border-top: 1px solid var(--fg); }
+
+.row {
+  display: block;
+  width: 100%;
+  text-align: left;
+  background: var(--bg);
+  border: none;
+  border-bottom: 1px solid var(--hair);
+  padding: 14px 0;
+  cursor: pointer;
+}
+
+.row:last-child { border-bottom: 1px solid var(--fg); }
+.row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
+.row-title { font-weight: 800; font-size: 16px; }
+.row-sub { color: var(--muted); font-size: 13px; margin-top: 2px; }
+.row-meta { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
+
+.data { width: 100%; border-collapse: collapse; }
+.data th, .data td { padding: 11px 0; border-bottom: 1px solid var(--hair); text-align: left; vertical-align: top; }
+.data th { width: 38%; font-weight: 400; color: var(--muted); font-size: 13px; }
+.data td { font-weight: 600; word-break: break-word; }
+.data tr:last-child th, .data tr:last-child td { border-bottom: none; }
+
+/* ----------------------------------------------------------------------- Bilder */
+
+.card-image {
+  display: block;
+  width: 100%;
+  border: var(--shell) solid var(--fg);
+  background: var(--wash);
+}
+
+.thumbs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
+.thumbs img { width: 100%; border: 2px solid var(--fg); display: block; }
+
+/* -------------------------------------------------------------------- Navigation */
+
+.tabs {
+  position: sticky;
+  bottom: 0;
+  z-index: 20;
+  display: flex;
+  background: var(--bg);
+  border-top: var(--shell) solid var(--fg);
+}
+
+.tab {
+  flex: 1;
+  padding: 14px 4px calc(14px + env(safe-area-inset-bottom));
+  background: var(--bg);
+  border: none;
+  border-left: 1px solid var(--fg);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  cursor: pointer;
+}
+
+.tab:first-child { border-left: none; }
+.tab[aria-selected="true"] { background: var(--fg); color: var(--bg); }
+.tab .count { display: block; font-size: 16px; font-weight: 800; margin-bottom: 2px; }
+
+/* ------------------------------------------------------------------- Zustände */
+
+.empty { border: 2px dashed var(--fg); padding: 28px 18px; text-align: center; }
+
+.badge {
+  display: inline-block;
+  padding: 3px 7px;
+  border: 2px solid var(--fg);
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.badge-solid { background: var(--fg); color: var(--bg); }
+
+.overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 60;
+  background: rgba(0, 0, 0, 0.82);
+  display: grid;
+  place-items: center;
+  padding: var(--pad);
+}
+
+.overlay[hidden] { display: none; }
+.overlay .block { background: var(--bg); width: 100%; max-width: 380px; }
+
+.spinner {
+  width: 26px;
+  height: 26px;
+  border: 3px solid var(--bg);
+  border-top-color: transparent;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin { to { transform: rotate(360deg); } }
+
+.toast {
+  position: fixed;
+  left: 50%;
+  bottom: 96px;
+  transform: translateX(-50%);
+  z-index: 70;
+  max-width: 90vw;
+  padding: 12px 16px;
+  background: var(--fg);
+  color: var(--bg);
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.toast[hidden] { display: none; }
+
+.hint { font-size: 12px; color: var(--muted); }
+
+@media (min-width: 600px) {
+  :root { --pad: 24px; }
+  .app { border: 1px solid var(--fg); margin: 24px auto; min-height: calc(100vh - 48px); }
+  .d-xl { font-size: 48px; }
+}

static/sw.js

@@ -0,0 +1,39 @@
+/* Nur die Programmhuelle wird gecacht. Kartendaten und Bilder kommen immer
+   frisch vom Server - eine veraltete Liste waere schlimmer als keine. */
+const CACHE = "bcs-shell-v1";
+const SHELL = ["/", "/static/style.css", "/static/app.js", "/manifest.webmanifest"];
+
+self.addEventListener("install", (event) => {
+  event.waitUntil(caches.open(CACHE).then((cache) => cache.addAll(SHELL)));
+  self.skipWaiting();
+});
+
+self.addEventListener("activate", (event) => {
+  event.waitUntil(
+    caches.keys().then((keys) =>
+      Promise.all(keys.filter((key) => key !== CACHE).map((key) => caches.delete(key)))
+    )
+  );
+  self.clients.claim();
+});
+
+self.addEventListener("fetch", (event) => {
+  const url = new URL(event.request.url);
+  if (event.request.method !== "GET" || url.origin !== self.location.origin) return;
+  if (url.pathname.startsWith("/api/") || url.pathname.startsWith("/vcf")) return;
+
+  // Fuer die Huelle den HTTP-Cache umgehen: sonst liefert ein Deploy noch
+  // tagelang die alte CSS- und JS-Datei aus.
+  const shell = SHELL.includes(url.pathname);
+  event.respondWith(
+    fetch(event.request, shell ? { cache: "no-store" } : undefined)
+      .then((response) => {
+        if (shell) {
+          const copy = response.clone();
+          caches.open(CACHE).then((cache) => cache.put(event.request, copy));
+        }
+        return response;
+      })
+      .catch(() => caches.match(event.request).then((hit) => hit || caches.match("/")))
+  );
+});