Anlass, Dubletten, Rückseite, Teilen; Startseite und App-Anmutung

Vier Funktionen:

- Anlass: ein Feld auf der Startseite gilt für alle folgenden Scans und
  wird im Browser gemerkt. Ordnet den Bestand verlässlicher als der
  Ortsname aus den Koordinaten. Durchsuchbar, nachträglich änderbar.
- Dubletten: die Detailansicht zeigt Karten, die dieselbe Person meinen
  könnten - gleiche E-Mail, gleiche Telefonnummer (verglichen werden die
  letzten acht Ziffern, damit +49 511 123456 und 0511/123456 aufeinander
  passen) oder gleicher Nachname bei gleicher Firma.
- Rückseite: nachträglich ein zweites Bild zur Karte. Es füllt nur
  Felder, die die Vorderseite offen gelassen hat.
- Schnellwahl bei Erinnerungen: in 3 Tagen / 1 Woche / 2 Wochen /
  1 Monat, jeweils 9 Uhr. Das Datumsfeld braucht man damit selten.

Teilen als vCard über das System-Teilenblatt, mit Download als
Rückfallebene, wo es kein Teilenblatt gibt.

Oberfläche:

- Startseite führt jetzt: Anlass, große Aufnahmefläche mit Symbol statt
  Textzeile, leise Alternative, darunter die zuletzt erfassten Karten.
  Vorher stand dort eine Überschrift mit Zahlen und man musste raten.
- Weniger Webseite, mehr App: kein Seitenrahmen auf dem Telefon, Symbole
  in der Tableiste mit Zählerblasen, kein Tap-Highlight, keine
  Textmarkierung auf Bedienelementen, Safe-Area oben, Einblendung beim
  Ansichtswechsel, Mindesthöhe 54 px für Schaltflächen.
- Die Marken "exportiert" / "nicht exportiert" sind aus der Liste raus;
  dafür gibt es den Filter.

Neue Spalten occasion und back_image_file kommen per ALTER TABLE in
bestehende Datenbanken - CREATE TABLE IF NOT EXISTS rührt eine
vorhandene Tabelle nicht an.

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

static/index.html

@@ -34,46 +34,44 @@
   <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="field">
+        <span class="label">Anlass · gilt für die nächsten Scans</span>
+        <input id="occasion-input" placeholder="z. B. Hannover Messe 2026"
+               autocomplete="off" enterkeyhint="done">
+      </label>
 
-      <label class="btn btn-primary" for="input-camera">
-        Foto aufnehmen <span class="arrow">→</span>
+      <label class="action" for="input-camera">
+        <span class="action-icon" aria-hidden="true">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
+            <path d="M3 7h3l1.5-2h9L18 7h3v12H3z"></path>
+            <circle cx="12" cy="13" r="3.6"></circle>
+          </svg>
+        </span>
+        <span class="action-body">
+          <span class="display d-lg">Foto aufnehmen</span>
+          <span class="action-hint">
+            Karten nebeneinander auf einen dunklen Untergrund legen.
+            Ein Foto reicht für den ganzen Tisch.
+          </span>
+        </span>
         <input id="input-camera" type="file" accept="image/*" capture="environment" hidden>
       </label>
+
       <label class="btn btn-quiet" 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>
+
+      <div class="section-label"><span class="label">Zuletzt erfasst</span></div>
+      <div id="recent-list"></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 …"
+        <input id="search-input" type="search" placeholder="Name, Firma, Anlass, Notiz …"
                autocomplete="off" enterkeyhint="search">
         <button id="search-clear" type="button" aria-label="Suche leeren">×</button>
       </div>
@@ -97,12 +95,34 @@
   </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="scan" aria-selected="true">
+      <span class="tab-icon" aria-hidden="true">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9">
+          <path d="M3 7h3l1.5-2h9L18 7h3v12H3z"></path>
+          <circle cx="12" cy="13" r="3.4"></circle>
+        </svg>
+      </span>
+      <span class="tab-label">Scannen</span>
+    </button>
     <button class="tab" role="tab" data-route="karten" aria-selected="false">
-      <span class="count mono-num" id="tab-count-cards">0</span>Karten
+      <span class="tab-icon" aria-hidden="true">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9">
+          <rect x="3" y="6" width="18" height="13"></rect>
+          <path d="M7 11h5M7 15h8"></path>
+        </svg>
+      </span>
+      <span class="tab-label">Karten</span>
+      <span class="tab-badge mono-num" id="tab-count-cards" hidden>0</span>
     </button>
     <button class="tab" role="tab" data-route="erinnerungen" aria-selected="false">
-      <span class="count mono-num" id="tab-count-reminders">0</span>Termine
+      <span class="tab-icon" aria-hidden="true">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9">
+          <circle cx="12" cy="12" r="8.5"></circle>
+          <path d="M12 7v5.2l3.4 2"></path>
+        </svg>
+      </span>
+      <span class="tab-label">Termine</span>
+      <span class="tab-badge mono-num" id="tab-count-reminders" hidden>0</span>
     </button>
   </nav>
 </div>
@@ -125,7 +145,7 @@
 <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>
+    <p class="label" id="busy-text">Karten werden freigestellt</p>
   </div>
 </div>