Hintergrundverarbeitung, Bildaufbereitung, Sammelexport entfernt

Auslesen im Hintergrund: /api/scan antwortet, sobald die Karten freigestellt und gespeichert sind, und stößt die Extraktion als Task an. Ein Zwanzigerstapel blockierte vorher den Upload für die ganze Dauer aller Modellaufrufe. Die Oberfläche zeigt "wird gelesen" und lädt nach, solange etwas offen ist. Zwei Folgen davon sind mitbehandelt: Beim Schreiben der Ergebnisse steht COALESCE, damit ein Handeintrag während des Lesens nicht überschrieben wird, und offene Karten werden beim Start nachgeholt, statt dauerhaft in der Warteschlange zu hängen. Bildaufbereitung des Zuschnitts: - Der Einzug zieht die erkannten Ecken um 1,5 % zur Mitte, damit kein Untergrund im Zuschnitt bleibt. - Die Beleuchtung wird ausgeglichen (Division durch eine weichgezeichnete Fassung), damit das Papier weiß wird statt grau. Dunkle Karten bleiben unangetastet - bei ihnen ist das Dunkle das Papier, kein Schatten. - Das Modell meldet die nötige Drehung im Schema; das gespeicherte Bild wird entsprechend gedreht. Geometrisch ist die Lage nicht bestimmbar. Sammelexport entfernt: Der Button "Alle als vCard" ist weg, mit ihm der Endpunkt /vcf sowie vcard.build_many und db.execute_many, die dadurch keinen Aufrufer mehr hatten. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
effort-Parameter modellabhängig senden, Design-Hierarchie, iOS-Datumsfeld
2026-09-06 12:56:58 +02:00 · 2026-09-06 12:36:24 +02:00 · 2026-09-06 12:22:37 +02:00
17 changed files with 744 additions and 247 deletions
--- a/DEPLOY.md
+++ b/DEPLOY.md
@@ -149,7 +149,7 @@ Neuer Proxy Host:

 | Feld | Wert |
 |---|---|
-| Domain Names | `business-card-scanner.lucas-orth.de` |
+| Domain Names | `scanner.lucas-orth.de` |
 | Scheme | `http` |
 | Forward Hostname / IP | `business-card-scanner`  (= `container_name`) |
 | Forward Port | `8080` |
--- a/README.md
+++ b/README.md
@@ -7,11 +7,23 @@ Kontakt aufs iPhone holen. Selbst gehostete PWA, ein Container.

 **Stapelscan.** Ein Foto von zwanzig Karten auf dem Tisch reicht. OpenCV findet
 die Kartenrechtecke, entzerrt sie perspektivisch und schneidet sie einzeln aus –
-ohne manuelle Nacharbeit. Jeder Zuschnitt geht als Bild an das Vision-Modell,
-das Name, Firma, Position und Kontaktdaten als strukturiertes JSON zurückgibt.
-Ein vorgeschalteter OCR-Schritt wäre kontraproduktiv: er würde Layout und
-Schriftgrößen wegwerfen, also genau die Information, aus der die Feldzuordnung
-entsteht.
+ohne manuelle Nacharbeit. Der Zuschnitt wird dabei leicht enger gesetzt als die
+erkannte Kante, damit kein Untergrund stehen bleibt, und die Beleuchtung wird
+ausgeglichen, damit das Papier weiß wird statt grau.
+
+Jeder Zuschnitt geht als Bild an das Vision-Modell, das Name, Firma, Position
+und Kontaktdaten als strukturiertes JSON zurückgibt. Ein vorgeschalteter
+OCR-Schritt wäre kontraproduktiv: er würde Layout und Schriftgrößen wegwerfen,
+also genau die Information, aus der die Feldzuordnung entsteht. Das Modell sagt
+außerdem, wie herum die Karte gehört – geometrisch ist das nicht bestimmbar –
+und das gespeicherte Bild wird entsprechend gedreht.
+
+**Die Antwort wartet nicht auf das Modell.** Der Scan liefert die freigestellten
+Karten sofort zurück, das Auslesen läuft danach im Hintergrund weiter; die
+Oberfläche lädt nach. Ein Zwanzigerstapel blockiert damit keine Minute im
+Upload. Wer eine Karte in der Zwischenzeit von Hand ergänzt, verliert die
+Eingabe nicht – das Modell füllt nur leere Felder. Bricht der Server mitten im
+Lauf ab, holt er die offenen Karten beim nächsten Start nach.

 **Metadaten.** Aufnahmezeit und GPS kommen aus den EXIF-Daten des Fotos, nicht
 aus dem Browser – Karten werden oft erst abends am Schreibtisch abfotografiert,
@@ -24,6 +36,8 @@ Filter für „nicht exportiert“, „unvollständig“ und „mit Erinnerung

 **Export.** Ein Tippen auf *In Kontakte speichern* liefert eine vCard 3.0, die
 iOS direkt in die Kontakte-App übernimmt. Die Karte gilt danach als exportiert.
+Bewusst einzeln: ein Sammelexport schiebt zwanzig Kontakte ungeprüft ins
+Adressbuch.

 **Notizen und Erinnerungen.** Freitext pro Karte. Erinnerungen mit Termin gehen
 als Mail raus; verpasste Termine holt der Scheduler beim nächsten Start nach.
@@ -56,7 +70,7 @@ Tag-Push nach den Konventionen in [DEPLOY.md](DEPLOY.md). Vor dem ersten Tag:
   nach dem Muster in [.env.example](.env.example). `SECRET_KEY` mit
   `openssl rand -hex 32` erzeugen.
 2. **Proxy Host** im Nginx Proxy Manager:
-   `business-card-scanner.lucas-orth.de` → `business-card-scanner` : `8080`,
+   `scanner.lucas-orth.de` → `business-card-scanner` : `8080`,
   danach Let's-Encrypt-Zertifikat und „Force SSL“.
 3. **Deployen:** `git tag v1.0.0 && git push origin v1.0.0`

--- a/app/db.py
+++ b/app/db.py
@@ -91,10 +91,3 @@ def execute(sql: str, params: Iterable[Any] = ()) -> None:
        conn.execute(sql, tuple(params))
        conn.commit()

-
-def execute_many(statements: list[tuple[str, Iterable[Any]]]) -> None:
-    with _lock:
-        conn = connect()
-        for sql, params in statements:
-            conn.execute(sql, tuple(params))
-        conn.commit()
--- a/app/extract.py
+++ b/app/extract.py
@@ -11,7 +11,7 @@ import logging

 import anthropic

-from . import config
+from . import config, imaging

 log = logging.getLogger(__name__)

@@ -28,9 +28,17 @@ SCHEMA = {
            "type": "boolean",
            "description": "False, wenn der Ausschnitt keine Visitenkarte zeigt.",
        },
+        "rotation": {
+            "type": "integer",
+            "enum": [0, 90, 180, 270],
+            "description": (
+                "Grad im Uhrzeigersinn, um die das Bild gedreht werden muss, "
+                "damit die Schrift aufrecht steht."
+            ),
+        },
        **{name: {"type": ["string", "null"]} for name in FIELDS},
    },
-    "required": ["is_business_card", *FIELDS],
+    "required": ["is_business_card", "rotation", *FIELDS],
    "additionalProperties": False,
 }

@@ -48,13 +56,29 @@ Regeln:
  first_name und last_name ohne Titel.
 - website ohne Protokollpraefix.
 - Zeigt der Ausschnitt keine Visitenkarte (Tischkante, Notizzettel, leere
-  Flaeche), setze is_business_card auf false und alle Felder auf null."""
+  Flaeche), setze is_business_card auf false und alle Felder auf null.
+- rotation sagt, um wie viel Grad im Uhrzeigersinn das Bild gedreht werden
+  muss, damit die Schrift aufrecht steht. Steht sie schon richtig, ist der
+  Wert 0. Steht die Karte auf dem Kopf, ist er 180."""

 PROMPT = "Lies diese Visitenkarte aus."

+# Nicht jedes Modell nimmt jeden Parameter an: die kleinen Modelle kennen
+# output_config.effort nicht (400), der server-seitige Fallback gilt nur fuer
+# die groessten.
+_NO_EFFORT = ("claude-haiku-", "claude-sonnet-4-5")
+_WITH_FALLBACK = ("claude-opus-5", "claude-fable-")
+
 _client = None


+def _output_config(with_effort: bool) -> dict:
+    settings = {"format": {"type": "json_schema", "schema": SCHEMA}}
+    if with_effort:
+        settings["effort"] = "low"  # reines Ablesen, keine Denkarbeit
+    return settings
+
+
 def available() -> bool:
    return bool(config.ANTHROPIC_API_KEY)

@@ -67,7 +91,8 @@ def _get_client() -> anthropic.AsyncAnthropic:


 def _empty(reason: str) -> dict:
-    return {"is_business_card": False, "_error": reason, **{f: None for f in FIELDS}}
+    return {"is_business_card": False, "rotation": 0, "_error": reason,
+            **{f: None for f in FIELDS}}


 def _has_content(result: dict) -> bool:
@@ -92,27 +117,28 @@ async def _ask(image_jpeg: bytes) -> dict:
            ],
        }
    ]
-    common = dict(
-        model=config.ANTHROPIC_MODEL,
-        max_tokens=2000,
-        system=SYSTEM,
-        messages=messages,
-        output_config={
-            "format": {"type": "json_schema", "schema": SCHEMA},
-            "effort": "low",  # reines Ablesen, keine Denkarbeit
-        },
-    )
+    model = config.ANTHROPIC_MODEL
+    common = dict(model=model, max_tokens=2000, system=SYSTEM, messages=messages)
+    effort = not model.startswith(_NO_EFFORT)
    try:
-        response = await client.beta.messages.create(
-            betas=["server-side-fallback-2026-07-01"],
-            fallbacks="default",
-            **common,
+        if model.startswith(_WITH_FALLBACK):
+            response = await client.beta.messages.create(
+                betas=["server-side-fallback-2026-07-01"],
+                fallbacks="default",
+                output_config=_output_config(effort),
+                **common,
+            )
+        else:
+            response = await client.messages.create(
+                output_config=_output_config(effort), **common
+            )
+    except anthropic.BadRequestError as exc:
+        # Ein Modell mit engerem Parametersatz, als die Listen oben kennen.
+        # Einmal ohne Zusatzparameter nachfassen, statt die Karte zu verlieren.
+        log.warning("Anfrage abgelehnt (%s) - Wiederholung ohne Zusatzparameter", exc)
+        response = await client.messages.create(
+            output_config=_output_config(with_effort=False), **common
        )
-    except anthropic.BadRequestError:
-        # Der Fallback-Parameter haengt am Modell. Ohne ihn laeuft die Anfrage
-        # weiter, sie bricht bei einer Ablehnung nur ohne Ersatzmodell ab.
-        log.warning("Server-side fallback abgelehnt, Anfrage ohne Fallback")
-        response = await client.messages.create(**common)

    if response.stop_reason == "refusal":
        return _empty("Vom Modell abgelehnt")
@@ -123,11 +149,12 @@ async def _ask(image_jpeg: bytes) -> dict:
    return json.loads(text)


-async def extract(image_jpeg: bytes, rotated_jpeg: bytes = None) -> dict:
+async def extract(image_jpeg: bytes) -> dict:
    """Ein Kartenbild auslesen.

    Bleibt das Ergebnis leer, wird einmal um 180 Grad gedreht nachgefasst:
    wie herum die Karte auf dem Tisch lag, ist geometrisch nicht bestimmbar.
+    Die gedrehte Fassung entsteht erst hier, nicht auf Vorrat fuer jede Karte.
    """
    if not available():
        return _empty("Kein ANTHROPIC_API_KEY gesetzt")
@@ -137,23 +164,26 @@ async def extract(image_jpeg: bytes, rotated_jpeg: bytes = None) -> dict:
        log.exception("Extraktion fehlgeschlagen")
        return _empty(f"{type(exc).__name__}: {exc}")

-    if not _has_content(result) and rotated_jpeg is not None:
+    if not _has_content(result):
        try:
-            retry = await _ask(rotated_jpeg)
+            rotated = await asyncio.to_thread(imaging.rotate_jpeg, image_jpeg, 180)
+            retry = await _ask(rotated)
            if _has_content(retry):
-                retry["_rotated"] = True
+                # Der zweite Anlauf sah das Bild gedreht - dann stimmt auch
+                # seine Rotationsangabe relativ zum gedrehten Bild.
+                retry["rotation"] = (int(retry.get("rotation") or 0) + 180) % 360
                return retry
        except Exception:
            log.exception("Zweiter Versuch (gedreht) fehlgeschlagen")
    return result


-async def extract_all(pairs: list) -> list:
+async def extract_all(images: list) -> list:
    """Alle Karten eines Fotos parallel auslesen."""
    limit = asyncio.Semaphore(max(1, config.EXTRACT_CONCURRENCY))

-    async def one(upright: bytes, rotated: bytes) -> dict:
+    async def one(image_jpeg: bytes) -> dict:
        async with limit:
-            return await extract(upright, rotated)
+            return await extract(image_jpeg)

-    return await asyncio.gather(*(one(u, r) for u, r in pairs))
+    return await asyncio.gather(*(one(image) for image in images))
--- a/app/imaging.py
+++ b/app/imaging.py
@@ -79,3 +79,14 @@ def encode_jpeg(rgb_or_bgr: np.ndarray, quality: int = 88, bgr: bool = True) ->
    Image.fromarray(array).save(buffer, format="JPEG", quality=quality, optimize=True)
    return buffer.getvalue()

+
+def rotate_jpeg(raw: bytes, degrees: int) -> bytes:
+    """Im Uhrzeigersinn drehen. Arbeitet auf dem fertigen JPEG, nicht auf dem
+    grossen Rohbild - gebraucht wird das nur fuer einzelne Karten."""
+    if degrees % 360 == 0:
+        return raw
+    image = Image.open(io.BytesIO(raw)).rotate(-degrees, expand=True)
+    buffer = io.BytesIO()
+    image.save(buffer, format="JPEG", quality=88, optimize=True)
+    return buffer.getvalue()
+
--- a/app/main.py
+++ b/app/main.py
@@ -6,7 +6,6 @@ from contextlib import asynccontextmanager
 from datetime import datetime, timezone
 from pathlib import Path

-import cv2
 from fastapi import Depends, FastAPI, Form, HTTPException, Request, Response, UploadFile
 from fastapi.responses import FileResponse, JSONResponse, PlainTextResponse
 from fastapi.staticfiles import StaticFiles
@@ -34,6 +33,14 @@ async def lifespan(app: FastAPI):
        log.warning("APP_PASSWORD ist leer - die App ist ohne Anmeldung erreichbar.")
    if not extract.available():
        log.warning("ANTHROPIC_API_KEY fehlt - Karten werden nur zugeschnitten, nicht ausgelesen.")
+
+    # Karten, die beim letzten Herunterfahren noch in der Warteschlange
+    # standen, wuerden sonst dauerhaft auf "wird gelesen" stehen bleiben.
+    unfinished = db.query("SELECT id FROM cards WHERE extract_status = 'offen'")
+    if unfinished:
+        log.info("%d Karte(n) aus dem letzten Lauf werden nachgeholt", len(unfinished))
+        start_reading([row["id"] for row in unfinished])
+
    task = asyncio.create_task(reminders.run_forever())
    try:
        yield
@@ -104,20 +111,66 @@ def logout(response: Response) -> dict:
 # ------------------------------------------------------------------------------ Scan

 def _process_photo(raw: bytes) -> tuple:
-    """Rechenlastiger Teil: dekodieren, freistellen, als JPEG kodieren."""
+    """Rechenlastiger Teil: dekodieren, freistellen, als JPEG kodieren.
+
+    Die Zuschnitte werden einzeln kodiert und sofort freigegeben - bei zwanzig
+    Karten liegen sonst rund 70 MB Rohbild gleichzeitig im Speicher.
+    """
    meta = imaging.read_metadata(raw)
-    image = imaging.decode(raw)
-    crops, fallback = segment.segment(image)
-    encoded = [
-        (
-            imaging.encode_jpeg(crop),
-            imaging.encode_jpeg(cv2.rotate(crop, cv2.ROTATE_180)),
-        )
-        for crop in crops
-    ]
+    crops, fallback = segment.segment(imaging.decode(raw))
+    encoded = []
+    while crops:
+        encoded.append(imaging.encode_jpeg(crops.pop(0)))
    return meta, encoded, fallback


+# Laufende Lesevorgaenge festhalten, sonst raeumt die Garbage Collection sie
+# mitten im Lauf weg.
+_reading: set = set()
+
+
+def start_reading(card_ids: list) -> None:
+    task = asyncio.create_task(_read_cards(card_ids))
+    _reading.add(task)
+    task.add_done_callback(_reading.discard)
+
+
+async def _read_cards(card_ids: list) -> None:
+    """Das Auslesen laeuft nach der Antwort weiter - der Nutzer sieht seine
+    Karten sofort, die Felder tropfen nach."""
+    rows = [db.query_one("SELECT * FROM cards WHERE id = ?", (i,)) for i in card_ids]
+    rows = [row for row in rows if row is not None]
+    images = [(config.IMAGE_DIR / row["image_file"]).read_bytes() for row in rows]
+
+    results = await extract.extract_all(images)
+
+    for row, result in zip(rows, results):
+        rotation = int(result.get("rotation") or 0) % 360
+        if rotation:
+            # Die Lage der Karte auf dem Tisch ist geometrisch nicht
+            # bestimmbar - das Modell sagt uns, wie herum sie gehoert.
+            path = config.IMAGE_DIR / row["image_file"]
+            path.write_bytes(
+                await asyncio.to_thread(imaging.rotate_jpeg, path.read_bytes(), rotation)
+            )
+        fields = {f: (result.get(f) or None) for f in extract.FIELDS}
+        # COALESCE, weil das Auslesen laeuft, waehrend die Karte schon
+        # sichtbar ist: was in der Zwischenzeit von Hand eingetragen wurde,
+        # darf das Modell nicht ueberschreiben.
+        assignments = ", ".join(f"{name} = COALESCE({name}, ?)" for name in fields)
+        db.execute(
+            f"UPDATE cards SET {assignments}, extract_status = ?, extract_error = ? "
+            "WHERE id = ? AND extract_status = 'offen'",
+            [
+                *fields.values(),
+                "fehler" if result.get("_error") else "ok",
+                result.get("_error"),
+                row["id"],
+            ],
+        )
+    log.info("%d Karte(n) ausgelesen", len(rows))
+
+
@app.post("/api/scan", dependencies=[auth])
 async def scan(
    file: UploadFile,
@@ -146,13 +199,11 @@ async def scan(
        geo_source = None
    place = await asyncio.to_thread(geocode.reverse, meta["lat"], meta["lon"])

-    results = await extract.extract_all(encoded)
-
    batch_id = uuid.uuid4().hex
    created = now_iso()
    source = "einzel" if fallback else "stapel"
    cards = []
-    for (upright, _), result in zip(encoded, results):
+    for upright in encoded:
        card_id = uuid.uuid4().hex
        image_file = f"{card_id}.jpg"
        (config.IMAGE_DIR / image_file).write_bytes(upright)
@@ -168,11 +219,8 @@ async def scan(
            "lon": meta["lon"],
            "place": place,
            "geo_source": geo_source,
-            "extract_status": "fehler" if result.get("_error") else "ok",
-            "extract_error": result.get("_error"),
+            "extract_status": "offen",
        }
-        for field in extract.FIELDS:
-            columns[field] = (result.get(field) or None)
        names = ", ".join(columns)
        placeholders = ", ".join("?" for _ in columns)
        db.execute(
@@ -180,6 +228,9 @@ async def scan(
        )
        cards.append(card_dict(db.query_one("SELECT * FROM cards WHERE id = ?", (card_id,))))

+    # Antwort geht sofort raus, das Auslesen laeuft danach weiter.
+    start_reading([card["id"] for card in cards])
+
    log.info("Scan %s: %d Karte(n), Fallback=%s", batch_id, len(cards), fallback)
    return JSONResponse(
        {"batch_id": batch_id, "count": len(cards), "fallback": fallback, "cards": cards}
@@ -204,7 +255,8 @@ def list_cards(q: str = "", filter: str = "alle") -> dict:
        where.append("exported_at IS NULL")
    elif filter == "unvollstaendig":
        where.append(
-            "(extract_status <> 'ok' OR (full_name IS NULL AND company IS NULL))"
+            "(extract_status = 'fehler' "
+            "OR (extract_status = 'ok' AND full_name IS NULL AND company IS NULL))"
        )
    elif filter == "erinnerung":
        where.append(
@@ -218,7 +270,8 @@ def list_cards(q: str = "", filter: str = "alle") -> dict:
    totals = db.query_one(
        """
        SELECT COUNT(*) AS total,
-               SUM(CASE WHEN exported_at IS NULL THEN 1 ELSE 0 END) AS offen
+               SUM(CASE WHEN exported_at IS NULL THEN 1 ELSE 0 END) AS offen,
+               SUM(CASE WHEN extract_status = 'offen' THEN 1 ELSE 0 END) AS laeuft
        FROM cards
        """
    )
@@ -231,6 +284,7 @@ def list_cards(q: str = "", filter: str = "alle") -> dict:
            "total": totals["total"] or 0,
            "offen": totals["offen"] or 0,
            "erinnerungen": pending["n"] or 0,
+            "laeuft": totals["laeuft"] or 0,
        },
    }

@@ -290,17 +344,10 @@ def card_image(card_id: str) -> FileResponse:

 # ---------------------------------------------------------------------------- Export

-def _mark_exported(ids: list) -> None:
-    stamp = now_iso()
-    db.execute_many(
-        [("UPDATE cards SET exported_at = ? WHERE id = ?", (stamp, i)) for i in ids]
-    )
-
-
@app.get("/vcf/{card_id}", dependencies=[auth])
 def download_vcard(card_id: str) -> Response:
    card = dict(_card_or_404(card_id))
-    _mark_exported([card_id])
+    db.execute("UPDATE cards SET exported_at = ? WHERE id = ?", (now_iso(), card_id))
    return Response(
        content=vcard.build(card),
        media_type="text/vcard; charset=utf-8",
@@ -308,23 +355,6 @@ def download_vcard(card_id: str) -> Response:
    )


-@app.get("/vcf", dependencies=[auth])
-def download_vcards(ids: str = "") -> Response:
-    wanted = [i for i in ids.split(",") if i.strip()]
-    if not wanted:
-        raise HTTPException(status_code=400, detail="Keine Karten ausgewaehlt")
-    placeholders = ", ".join("?" for _ in wanted)
-    rows = db.query(f"SELECT * FROM cards WHERE id IN ({placeholders})", wanted)
-    if not rows:
-        raise HTTPException(status_code=404, detail="Karten nicht gefunden")
-    _mark_exported([r["id"] for r in rows])
-    return Response(
-        content=vcard.build_many([dict(r) for r in rows]),
-        media_type="text/vcard; charset=utf-8",
-        headers={"Content-Disposition": 'attachment; filename="kontakte.vcf"'},
-    )
-
-
 # ----------------------------------------------------------------------- Erinnerungen

@app.get("/api/reminders", dependencies=[auth])
--- a/app/segment.py
+++ b/app/segment.py
@@ -11,9 +11,14 @@ import numpy as np
 CARD_RATIO = 85.6 / 54.0
 RATIO_MIN, RATIO_MAX = 1.25, 2.05

-OUT_WIDTH = 1400
+OUT_WIDTH = 1400   # Obergrenze; kleinere Karten werden nicht hochskaliert
+MIN_WIDTH = 600
 OUT_HEIGHT = round(OUT_WIDTH / CARD_RATIO)

+# Das gefundene Rechteck liegt auf der Kartenkante. Ein schmaler Streifen
+# davon ist noch Tisch - der faellt weg, bevor zugeschnitten wird.
+INSET = 0.015
+
 DETECT_EDGE = 1600          # Aufloesung, auf der gesucht wird
 MIN_AREA_FRACTION = 0.004   # kleiner ist Rauschen, kein Kartenfund
 MAX_AREA_FRACTION = 0.60    # groesser ist der Tisch, nicht die Karte
@@ -129,19 +134,56 @@ def segment(image: np.ndarray) -> tuple[list[np.ndarray], bool]:
    crops = []
    for rect in _reading_order(rects):
        quad = _order_quad(cv2.boxPoints(rect)) / scale  # zurueck auf volle Aufloesung
+        quad = _shrink(quad)
+        width, height = _target_size(quad)
        target = np.array(
-            [[0, 0], [OUT_WIDTH, 0], [OUT_WIDTH, OUT_HEIGHT], [0, OUT_HEIGHT]],
-            dtype="float32",
+            [[0, 0], [width, 0], [width, height], [0, height]], dtype="float32"
        )
        matrix = cv2.getPerspectiveTransform(quad, target)
-        crops.append(
-            cv2.warpPerspective(
-                image, matrix, (OUT_WIDTH, OUT_HEIGHT), flags=cv2.INTER_CUBIC
-            )
-        )
+        crop = cv2.warpPerspective(image, matrix, (width, height), flags=cv2.INTER_CUBIC)
+        crops.append(flatten(crop))
    return crops, False


+def _shrink(quad: np.ndarray, factor: float = INSET) -> np.ndarray:
+    """Ecken zur Mitte ziehen, damit kein Untergrund im Zuschnitt bleibt."""
+    center = quad.mean(axis=0)
+    return (center + (quad - center) * (1.0 - factor)).astype("float32")
+
+
+def flatten(card: np.ndarray) -> np.ndarray:
+    """Beleuchtung ausgleichen, damit das Papier weiss wird statt grau.
+
+    Geteilt wird durch eine stark weichgezeichnete Fassung des Bildes - das
+    ist die Beleuchtung. Uebrig bleibt der Aufdruck. Dunkle Karten bleiben
+    unangetastet: bei ihnen ist das Dunkle das Papier, kein Schatten.
+    """
+    gray = cv2.cvtColor(card, cv2.COLOR_BGR2GRAY)
+    if np.median(gray) < 120:
+        return card
+
+    sigma = max(card.shape[1] / 16.0, 3.0)
+    illumination = cv2.GaussianBlur(gray, (0, 0), sigma).astype(np.float32)
+    gain = np.clip(250.0 / np.maximum(illumination, 1.0), 1.0, 2.2)
+    lifted = card.astype(np.float32) * gain[:, :, None]
+    return np.clip(lifted, 0, 255).astype(np.uint8)
+
+
+def _target_size(quad: np.ndarray) -> tuple:
+    """Zuschnitt so gross wie die Vorlage, hoechstens OUT_WIDTH.
+
+    Auf einem Stapelfoto ist eine Karte nur ein paar hundert Pixel breit.
+    Sie auf 1400 hochzurechnen erzeugt vier Mal so viele Pixel ohne ein
+    Quentchen mehr Information - und kostet Speicher, Bildgroesse und
+    Bildtokens beim Modellaufruf.
+    """
+    long_edge = max(
+        np.linalg.norm(quad[1] - quad[0]), np.linalg.norm(quad[2] - quad[3])
+    )
+    width = int(min(OUT_WIDTH, max(MIN_WIDTH, round(long_edge))))
+    return width, round(width / CARD_RATIO)
+
+
 def _fit_whole(image: np.ndarray) -> np.ndarray:
    """Ohne Fund: das ganze Bild als eine Karte behandeln."""
    height, width = image.shape[:2]
--- a/app/vcard.py
+++ b/app/vcard.py
@@ -80,10 +80,6 @@ def build(card: dict) -> str:
    return "\r\n".join(lines) + "\r\n"


-def build_many(cards: list) -> str:
-    return "".join(build(card) for card in cards)
-
-
 def filename(card: dict) -> str:
    base = _display_name(card).replace(" ", "-")
    safe = "".join(c for c in base if c.isalnum() or c in "-_")
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -12,6 +12,11 @@ services:
    restart: unless-stopped
    # Wird im Workflow aus dem Secret DOTENV erzeugt.
    env_file: .env
+    # Deckel gegen Ausreisser: ein Stapelscan braucht im Normalfall deutlich
+    # unter 500 MB. Laeuft er aus dem Ruder, stirbt der Container - nicht der
+    # Host, auf dem auch Jitsi und die Datenbank liegen.
+    mem_limit: 1g
+    cpus: 1.5
    volumes:
      - business-card-scanner-data:/data
    networks:
--- a/static/app.js
+++ b/static/app.js
@@ -111,6 +111,24 @@
    });
  }

+  /** Zustand einer Karte als abgestufte Pillen: schwarz, was erledigt ist,
+   *  grau umrandet, was noch offen oder auffaellig ist. */
+  function cardTags(card) {
+    const tags = [];
+    if (card.place) tags.push(["", card.place]);
+    if (card.extract_status === "offen") {
+      tags.push(["pill-solid", "wird gelesen"]);
+    } else {
+      tags.push(
+        card.exported_at ? ["pill-solid", "exportiert"] : ["", "nicht exportiert"]
+      );
+      if (card.extract_status === "fehler") tags.push(["", "Lesefehler"]);
+    }
+    return tags
+      .map(([extra, text]) => `<span class="pill ${extra}">${esc(text)}</span>`)
+      .join("");
+  }
+
  // ----------------------------------------------------------------- Routing

  function go(route, cardId) {
@@ -152,7 +170,9 @@
      const result = await api("/api/scan", { method: "POST", body });
      renderScanResult(result);
      await refreshStats();
-      toast(`${result.count} Karte${result.count === 1 ? "" : "n"} erfasst`);
+      toast(
+        `${result.count} Karte${result.count === 1 ? "" : "n"} erfasst, wird gelesen`
+      );
    } catch (error) {
      toast(error.message);
    } finally {
@@ -167,9 +187,9 @@
        <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 class="row-meta">wird gelesen</span>
          </span>
-          <span class="row-sub">${esc(card.company || card.email || "Keine Daten erkannt")}</span>
+          <span class="row-sub">${esc(card.company || card.email || "Zuschnitt gespeichert")}</span>
        </button>`
      )
      .join("");
@@ -198,11 +218,24 @@
      state.stats = data.stats;
      updateCounters();
      renderCards();
+      schedulePoll();
    } catch (error) {
      toast(error.message);
    }
  }

+  /** Das Auslesen laeuft auf dem Server weiter, nachdem der Scan geantwortet
+   *  hat. Solange noch etwas offen ist, holen wir den Stand nach. */
+  function schedulePoll() {
+    clearTimeout(schedulePoll.timer);
+    if (!state.stats.laeuft) return;
+    schedulePoll.timer = setTimeout(() => {
+      if (state.route === "karten") loadCards();
+      else if (state.route === "karte") loadCard(state.cardId);
+      else refreshStats();
+    }, 3000);
+  }
+
  function renderCards() {
    const list = $("cards-list");
    if (!state.cards.length) {
@@ -216,11 +249,10 @@
      return;
    }

-    const selectable = state.cards.map((c) => c.id).join(",");
    list.innerHTML = `
-      <div class="strip" style="border-top:3px solid #000">
+      <div class="strip">
        <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>
+        ${state.stats.laeuft ? `<span class="pill">${state.stats.laeuft} werden gelesen</span>` : ""}
      </div>
      <div class="rows">
        ${state.cards
@@ -234,15 +266,7 @@
            <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>
+            <span class="row-tags">${cardTags(card)}</span>
          </button>`
          )
          .join("")}
@@ -255,6 +279,10 @@
    try {
      const card = await api(`/api/cards/${cardId}`);
      renderCard(card);
+      if (card.extract_status === "offen") {
+        state.stats = { ...state.stats, laeuft: 1 };
+        schedulePoll();
+      }
    } catch (error) {
      screens.karte.innerHTML = `<div class="empty"><p class="label">${esc(error.message)}</p></div>`;
    }
@@ -335,7 +363,10 @@
        In Kontakte speichern <span class="arrow">→</span>
      </a>

-      ${card.extract_status !== "ok"
+      ${card.extract_status === "offen"
+        ? `<p class="hint">Die Karte wird gerade ausgelesen – die Felder erscheinen gleich.</p>`
+        : ""}
+      ${card.extract_status === "fehler"
        ? `<p class="hint">Lesefehler: ${esc(card.extract_error || "unbekannt")}</p>`
        : ""}

@@ -367,7 +398,7 @@
      </form>

      <div class="section-label"><span class="label">Karte entfernen</span></div>
-      <button class="btn btn-danger" data-delete-card="${esc(card.id)}">
+      <button class="btn btn-quiet" data-delete-card="${esc(card.id)}">
        Endgültig löschen <span class="arrow">×</span>
      </button>`;

@@ -454,6 +485,7 @@
      const data = await api("/api/cards?filter=alle");
      state.stats = data.stats;
      updateCounters();
+      schedulePoll();
    } catch (_) { /* Zähler sind nicht kritisch */ }
  }

--- a/static/index.html
+++ b/static/index.html
@@ -57,7 +57,7 @@
        Foto aufnehmen <span class="arrow">→</span>
        <input id="input-camera" type="file" accept="image/*" capture="environment" hidden>
      </label>
-      <label class="btn" for="input-library">
+      <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>
--- a/static/style.css
+++ b/static/style.css
@@ -1,14 +1,24 @@
-/* Schwarzweiss, harte Kanten, keine Rundungen. Mobile first. */
+/* Schwarzweiss mit Grau als Hierarchiestufe. Harte Kanten, keine Rundungen.
+   Mobile first.
+
+   Drei Ebenen, konsequent durchgehalten:
+   Flaeche  weiss -> --fill (gruppiert) -> schwarz (das eine Wichtige)
+   Text     --ink -> --ink-2 (erlaeuternd) -> --ink-3 (Beiwerk)
+   Linie    3px schwarz (traegt) -> 1px schwarz (gliedert) -> --rule (trennt)  */

 :root {
  color-scheme: light;
-  --fg: #000;
+
+  --ink: #000;
+  --ink-2: #4a4a4a;
+  --ink-3: #8a8a8a;
+
  --bg: #fff;
-  --muted: #6b6b6b;
-  --hair: #d5d5d5;
-  --wash: #f2f2f2;
+  --fill: #f4f4f4;
+  --page: #e4e4e4;
+  --rule: #d4d4d4;
+
  --sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
-  --shell: 3px;
  --pad: 18px;
 }

@@ -17,8 +27,8 @@
 html, body {
  margin: 0;
  padding: 0;
-  background: var(--wash);
-  color: var(--fg);
+  background: var(--page);
+  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.45;
@@ -42,36 +52,37 @@ a { color: inherit; }
 .display {
  font-weight: 800;
  font-stretch: 85%;
-  letter-spacing: -0.02em;
+  letter-spacing: -0.025em;
  text-transform: uppercase;
-  line-height: 0.95;
+  line-height: 0.94;
  margin: 0;
 }

-.d-xl { font-size: 40px; }
-.d-lg { font-size: 28px; }
-.d-md { font-size: 20px; }
+.d-xl { font-size: 42px; }
+.d-lg { font-size: 30px; }
+.d-md { font-size: 19px; letter-spacing: -0.01em; }

 .label {
  font-size: 10px;
  font-weight: 700;
-  letter-spacing: 0.16em;
+  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0;
 }

-.muted { color: var(--muted); }
+.muted { color: var(--ink-2); }
+.hint { font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
 .mono-num { font-variant-numeric: tabular-nums; }

-/* ---------------------------------------------------------------------- Gerüst */
+/* ---------------------------------------------------------------------- Geruest */

 .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);
+  border-left: 1px solid var(--ink);
+  border-right: 1px solid var(--ink);
  display: flex;
  flex-direction: column;
 }
@@ -83,83 +94,94 @@ a { color: inherit; }
  display: flex;
  align-items: center;
  gap: 12px;
-  padding: 14px var(--pad);
+  padding: 13px var(--pad);
  background: var(--bg);
-  border-bottom: var(--shell) solid var(--fg);
+  border-bottom: 3px solid var(--ink);
 }

 .mark {
-  width: 34px;
-  height: 34px;
-  flex: 0 0 34px;
-  background: var(--fg);
+  width: 32px;
+  height: 32px;
+  flex: 0 0 32px;
+  background: var(--ink);
  display: grid;
  place-items: center;
 }

-.mark svg { width: 20px; height: 20px; }
+.mark svg { width: 19px; height: 19px; }

 .wordmark { line-height: 1; }
 .wordmark .d-md { display: block; }
-.wordmark .label { color: var(--muted); margin-top: 3px; }
+.wordmark .label { color: var(--ink-3); margin-top: 4px; }

 .topbar .spacer { margin-left: auto; }

 main { flex: 1; display: flex; flex-direction: column; }
-.screen { flex: 1; padding: var(--pad) var(--pad) 28px; }
+.screen { flex: 1; padding: var(--pad) var(--pad) 30px; }
 .screen[hidden] { display: none; }

-.stack > * + * { margin-top: 14px; }
+.stack > * + * { margin-top: 12px; }
 .stack-tight > * + * { margin-top: 8px; }

-/* ---------------------------------------------------------------------- Blöcke */
-
-.block {
-  border: var(--shell) solid var(--fg);
-  padding: 16px;
-}
+/* ---------------------------------------------------------------------- Bloecke */

+/* Oberste Ebene: das eine Wichtige pro Ansicht. Nur einmal verwenden. */
 .block-invert {
-  background: var(--fg);
+  background: var(--ink);
  color: var(--bg);
-  border: var(--shell) solid var(--fg);
+  padding: 20px 18px;
+}
+
+.block-invert .muted { color: #a9a9a9; }
+.block-invert .label { color: #a9a9a9; }
+
+/* Mittlere Ebene: gruppiert, tritt zurueck. */
+.block {
+  background: var(--fill);
+  border: 1px solid var(--rule);
  padding: 16px;
 }

-.block-invert .muted { color: #b4b4b4; }
-
+/* Kopfband ueber einer Liste - ordnet zu, konkurriert aber nicht. */
 .strip {
-  border: var(--shell) solid var(--fg);
-  border-top: none;
-  padding: 12px 16px;
  display: flex;
-  align-items: baseline;
+  align-items: center;
  justify-content: space-between;
  gap: 12px;
+  padding: 11px 14px;
+  background: var(--fill);
+  border: 1px solid var(--ink);
+  border-bottom: none;
 }

+.strip .label { color: var(--ink-2); }
+
 .section-label {
  display: flex;
  align-items: center;
-  gap: 10px;
-  margin: 26px 0 10px;
+  gap: 12px;
+  margin: 34px 0 12px;
 }

+.section-label .label { color: var(--ink); }
+
 .section-label::after {
  content: "";
  flex: 1;
  height: 1px;
-  background: var(--fg);
+  background: var(--rule);
 }

 .figures {
  display: flex;
-  gap: 30px;
-  margin-top: 18px;
+  gap: 32px;
+  margin-top: 20px;
+  padding-top: 16px;
+  border-top: 1px solid rgba(255, 255, 255, 0.28);
 }

 .figure { display: flex; flex-direction: column; }
-.figure .label { color: inherit; opacity: 0.7; margin-bottom: 5px; }
+.figure .label { margin-bottom: 6px; }

 /* --------------------------------------------------------------------- Buttons */

@@ -171,7 +193,7 @@ main { flex: 1; display: flex; flex-direction: column; }
  width: 100%;
  padding: 16px;
  background: var(--bg);
-  border: var(--shell) solid var(--fg);
+  border: 2px solid var(--ink);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.06em;
@@ -181,54 +203,81 @@ main { flex: 1; display: flex; flex-direction: column; }
  text-align: left;
 }

-.btn-primary { background: var(--fg); color: var(--bg); }
+/* Was man hier tun soll. */
+.btn-primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
+
+/* Vorhanden, aber leise. */
+.btn-quiet {
+  border: 1px solid var(--rule);
+  color: var(--ink-2);
+  font-weight: 700;
+}
+
 .btn:disabled { opacity: 0.35; cursor: not-allowed; }
 .btn .arrow { font-weight: 400; font-size: 17px; }
-
-.btn-danger { border-color: var(--fg); color: var(--fg); }
+.btn-quiet .arrow { color: var(--ink-3); }

 /* --------------------------------------------------------------------- Formular */

 .field { display: block; }
-.field .label { color: var(--muted); margin-bottom: 5px; }
+.field .label { color: var(--ink-3); margin-bottom: 6px; }

 .field input,
-.field textarea,
-.field select {
+.field textarea {
  width: 100%;
  padding: 11px 12px;
  background: var(--bg);
-  border: 2px solid var(--fg);
+  border: 1px solid var(--ink);
 }

 .field input:focus,
-.field textarea:focus,
-.field select:focus { outline: 3px solid var(--fg); outline-offset: 1px; }
+.field textarea:focus { outline: 2px solid var(--ink); outline-offset: 1px; }

-.field textarea { min-height: 90px; resize: vertical; }
+.field textarea { min-height: 88px; resize: vertical; }

-.search {
-  display: flex;
-  border: var(--shell) solid var(--fg);
+/* iOS rendert Datumsfelder eigenwillig: der Wert sitzt zentriert, die Hoehe
+   sackt ein, der Innenabstand kommt vom System. Das zieht sie auf die Form
+   der uebrigen Felder. */
+.field input[type="datetime-local"] {
+  min-height: 46px;
+  line-height: 1.2;
+  text-align: left;
+  font-variant-numeric: tabular-nums;
 }

-.search input { flex: 1; border: none; padding: 14px; background: var(--bg); }
+.field input[type="datetime-local"]::-webkit-date-and-time-value {
+  text-align: left;
+  margin: 0;
+  min-height: 20px;
+}
+
+.field input[type="datetime-local"]::-webkit-calendar-picker-indicator {
+  opacity: 0.5;
+  filter: grayscale(1);
+}
+
+.search { display: flex; border: 2px solid var(--ink); }
+.search input { flex: 1; border: none; padding: 13px 14px; background: var(--bg); }
 .search input:focus { outline: none; }
+
 .search button {
  border: none;
-  border-left: 2px solid var(--fg);
-  background: var(--bg);
+  border-left: 1px solid var(--rule);
+  background: var(--fill);
+  color: var(--ink-2);
  padding: 0 16px;
  cursor: pointer;
-  font-weight: 800;
+  font-weight: 700;
 }

-.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
+.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }

+/* Ungewaehlt zurueckgenommen, damit die Auswahl ueberhaupt auffaellt. */
 .chip {
  padding: 7px 11px;
-  border: 2px solid var(--fg);
+  border: 1px solid var(--rule);
  background: var(--bg);
+  color: var(--ink-3);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
@@ -236,11 +285,15 @@ main { flex: 1; display: flex; flex-direction: column; }
  cursor: pointer;
 }

-.chip[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
+.chip[aria-pressed="true"] {
+  background: var(--ink);
+  border-color: var(--ink);
+  color: var(--bg);
+}

-/* --------------------------------------------------------------------- Tabellen */
+/* --------------------------------------------------------------------- Listen */

-.rows { border-top: 1px solid var(--fg); }
+.rows { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }

 .row {
  display: block;
@@ -248,30 +301,93 @@ main { flex: 1; display: flex; flex-direction: column; }
  text-align: left;
  background: var(--bg);
  border: none;
-  border-bottom: 1px solid var(--hair);
-  padding: 14px 0;
+  border-bottom: 1px solid var(--rule);
+  padding: 14px;
  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; }
+.row:last-child { border-bottom: none; }
+
+.row-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.row-title { font-weight: 800; font-size: 17px; letter-spacing: -0.01em; }
+.row-sub { color: var(--ink-2); font-size: 13.5px; margin-top: 3px; }
+
+.row-meta {
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--ink-3);
+  white-space: nowrap;
+}
+
+.row-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
+
+.pill {
+  display: inline-block;
+  padding: 3px 7px;
+  border: 1px solid var(--rule);
+  background: var(--bg);
+  color: var(--ink-3);
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.pill-solid { background: var(--ink); border-color: var(--ink); color: var(--bg); }
+
+.badge {
+  display: inline-block;
+  padding: 5px 9px;
+  border: 1px solid var(--ink);
+  background: var(--bg);
+  color: var(--ink);
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+/* --------------------------------------------------------------------- Tabelle */
+
+.data {
+  width: 100%;
+  border-collapse: collapse;
+  border-top: 1px solid var(--ink);
+  border-bottom: 1px solid var(--ink);
+}
+
+.data tr:nth-child(even) { background: var(--fill); }
+.data th, .data td { padding: 10px 12px; text-align: left; vertical-align: top; }
+
+.data th {
+  width: 36%;
+  font-weight: 600;
+  font-size: 10px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--ink-3);
+  padding-top: 13px;
+}

-.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);
+  border: 1px solid var(--ink);
+  background: var(--fill);
 }

 /* -------------------------------------------------------------------- Navigation */
@@ -282,15 +398,16 @@ main { flex: 1; display: flex; flex-direction: column; }
  z-index: 20;
  display: flex;
  background: var(--bg);
-  border-top: var(--shell) solid var(--fg);
+  border-top: 3px solid var(--ink);
 }

 .tab {
  flex: 1;
-  padding: 14px 4px calc(14px + env(safe-area-inset-bottom));
+  padding: 12px 4px calc(12px + env(safe-area-inset-bottom));
  background: var(--bg);
  border: none;
-  border-left: 1px solid var(--fg);
+  border-left: 1px solid var(--rule);
+  color: var(--ink-3);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
@@ -299,35 +416,47 @@ main { flex: 1; display: flex; flex-direction: column; }
 }

 .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; }
+.tab[aria-selected="true"] { background: var(--ink); color: var(--bg); }

-/* ------------------------------------------------------------------- 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;
+.tab .count {
+  display: block;
+  font-size: 17px;
+  font-weight: 800;
+  color: var(--ink);
+  margin-bottom: 1px;
 }

+.tab[aria-selected="true"] .count { color: var(--bg); }
+
+/* ------------------------------------------------------------------- Zustaende */
+
+.empty {
+  border: 1px dashed var(--rule);
+  background: var(--fill);
+  padding: 30px 18px;
+  text-align: center;
+}
+
+.empty .label { color: var(--ink-2); }
+
 .overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
-  background: rgba(0, 0, 0, 0.82);
+  background: rgba(0, 0, 0, 0.86);
  display: grid;
  place-items: center;
  padding: var(--pad);
 }

 .overlay[hidden] { display: none; }
-.overlay .block { background: var(--bg); width: 100%; max-width: 380px; }
+
+.overlay .block {
+  background: var(--bg);
+  border: 3px solid var(--ink);
+  width: 100%;
+  max-width: 380px;
+}

 .spinner {
  width: 26px;
@@ -347,7 +476,7 @@ main { flex: 1; display: flex; flex-direction: column; }
  z-index: 70;
  max-width: 90vw;
  padding: 12px 16px;
-  background: var(--fg);
+  background: var(--ink);
  color: var(--bg);
  font-size: 13px;
  font-weight: 600;
@@ -355,10 +484,8 @@ main { flex: 1; display: flex; flex-direction: column; }

 .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; }
+  :root { --pad: 26px; }
+  .app { border: 1px solid var(--ink); margin: 26px auto; min-height: calc(100vh - 52px); }
+  .d-xl { font-size: 52px; }
 }
--- a/tests/test_api.py
+++ b/tests/test_api.py
@@ -3,16 +3,31 @@
 Ohne ANTHROPIC_API_KEY laeuft die Extraktion in den Leerlauf - Freistellen,
 Speichern, Suchen, Bearbeiten und Export werden trotzdem vollstaendig gepruft.
 """
+import asyncio
+import time
 from datetime import datetime, timedelta, timezone

 import pytest
 from fastapi.testclient import TestClient

-from app import db, mailer, reminders
+from app import db, extract, mailer, reminders
 from app.main import app
 from tests.helpers import photo_bytes


+def warte_bis_gelesen(client, card_ids, timeout=15.0):
+    """Das Auslesen laeuft im Hintergrund - hier auf das Ende warten."""
+    frist = time.monotonic() + timeout
+    while time.monotonic() < frist:
+        stati = [
+            client.get(f"/api/cards/{i}").json()["extract_status"] for i in card_ids
+        ]
+        if all(status != "offen" for status in stati):
+            return stati
+        time.sleep(0.1)
+    raise AssertionError("Karten wurden nicht fertig gelesen")
+
+
@pytest.fixture(scope="module")
 def client():
    with TestClient(app) as test_client:
@@ -25,7 +40,9 @@ def scanned(client):
        "/api/scan", files={"file": ("tisch.jpg", photo_bytes(4), "image/jpeg")}
    )
    assert response.status_code == 200
-    return response.json()
+    data = response.json()
+    warte_bis_gelesen(client, [c["id"] for c in data["cards"]])
+    return data


 def test_healthz(client):
@@ -97,14 +114,6 @@ def test_filter_offen_blendet_exportierte_karten_aus(client, scanned):
    assert all(card["exported_at"] is None for card in offen)


-def test_sammelexport_mehrerer_karten(client, scanned):
-    ids = ",".join(card["id"] for card in scanned["cards"][:3])
-
-    response = client.get("/vcf", params={"ids": ids})
-
-    assert response.text.count("BEGIN:VCARD") == 3
-
-
 def test_erinnerung_anlegen_und_filtern(client, scanned):
    card_id = scanned["cards"][2]["id"]
    due = datetime.now(timezone.utc) + timedelta(days=3)
@@ -181,3 +190,75 @@ def test_pwa_dateien_werden_ausgeliefert(client):
    assert client.get("/sw.js").status_code == 200
    assert client.get("/manifest.webmanifest").status_code == 200
    assert client.get("/static/app.js").status_code == 200
+
+
+def test_scan_antwortet_bevor_das_auslesen_fertig_ist(client, monkeypatch):
+    """Der Kern der Hintergrundverarbeitung: die Antwort wartet nicht auf das
+    Modell. Ohne das haengt ein Zwanzigerstapel eine Minute im Upload."""
+    original = extract.extract_all
+
+    async def langsam(images):
+        await asyncio.sleep(1.5)
+        return await original(images)
+
+    monkeypatch.setattr(extract, "extract_all", langsam)
+
+    start = time.monotonic()
+    response = client.post(
+        "/api/scan", files={"file": ("einzel.jpg", photo_bytes(1), "image/jpeg")}
+    )
+    dauer = time.monotonic() - start
+    card_id = response.json()["cards"][0]["id"]
+
+    assert dauer < 1.2, f"Antwort brauchte {dauer:.2f}s, hat also gewartet"
+    assert client.get(f"/api/cards/{card_id}").json()["extract_status"] == "offen"
+
+    monkeypatch.undo()
+    warte_bis_gelesen(client, [card_id])
+
+
+def test_offene_karten_zaehlen_nicht_als_unvollstaendig(client):
+    """Waehrend des Lesens sind Felder naturgemaess leer - das ist kein Mangel."""
+    created = client.post(
+        "/api/scan", files={"file": ("einzel.jpg", photo_bytes(1), "image/jpeg")}
+    ).json()
+    card_id = created["cards"][0]["id"]
+    warte_bis_gelesen(client, [card_id])  # sonst ueberschreibt der Hintergrundlauf
+    db.execute("UPDATE cards SET extract_status = 'offen' WHERE id = ?", (card_id,))
+
+    unvollstaendig = client.get(
+        "/api/cards", params={"filter": "unvollstaendig"}
+    ).json()["cards"]
+
+    assert card_id not in [c["id"] for c in unvollstaendig]
+    assert client.get("/api/cards").json()["stats"]["laeuft"] >= 1
+
+    db.execute("UPDATE cards SET extract_status = 'ok' WHERE id = ?", (card_id,))
+
+
+def test_sammelexport_ist_entfernt(client):
+    assert client.get("/vcf", params={"ids": "egal"}).status_code == 404
+
+
+def test_handeintrag_ueberlebt_den_hintergrundlauf(client, monkeypatch):
+    """Die Karte ist sichtbar, bevor sie gelesen ist. Wer in der Zwischenzeit
+    etwas eintraegt, darf es nicht wieder verlieren."""
+    original = extract.extract_all
+
+    async def langsam(images):
+        await asyncio.sleep(1.0)
+        return await original(images)
+
+    monkeypatch.setattr(extract, "extract_all", langsam)
+    card_id = client.post(
+        "/api/scan", files={"file": ("einzel.jpg", photo_bytes(1), "image/jpeg")}
+    ).json()["cards"][0]["id"]
+
+    client.patch(f"/api/cards/{card_id}", json={"full_name": "Von Hand", "notes": "Messe"})
+
+    monkeypatch.undo()
+    warte_bis_gelesen(client, [card_id])
+
+    card = client.get(f"/api/cards/{card_id}").json()
+    assert card["full_name"] == "Von Hand"
+    assert card["notes"] == "Messe"
--- a/tests/test_bildaufbereitung.py
+++ b/tests/test_bildaufbereitung.py
@@ -0,0 +1,89 @@
+"""Zuschnitt aufhellen, Untergrund abschneiden, richtig herum drehen."""
+import io
+
+import numpy as np
+from PIL import Image
+
+from app import imaging, segment
+from tests.helpers import photo_with_cards
+
+
+def _jpeg(width: int, height: int, color=(255, 255, 255)) -> bytes:
+    buffer = io.BytesIO()
+    Image.new("RGB", (width, height), color).save(buffer, format="JPEG")
+    return buffer.getvalue()
+
+
+def _size(raw: bytes) -> tuple:
+    return Image.open(io.BytesIO(raw)).size
+
+
+def test_drehung_um_null_grad_laesst_die_datei_unangetastet():
+    raw = _jpeg(40, 20)
+
+    assert imaging.rotate_jpeg(raw, 0) is raw
+    assert imaging.rotate_jpeg(raw, 360) is raw
+
+
+def test_drehung_um_180_grad_behaelt_das_format():
+    assert _size(imaging.rotate_jpeg(_jpeg(40, 20), 180)) == (40, 20)
+
+
+def test_drehung_um_90_grad_tauscht_die_seiten():
+    assert _size(imaging.rotate_jpeg(_jpeg(40, 20), 90)) == (20, 40)
+    assert _size(imaging.rotate_jpeg(_jpeg(40, 20), 270)) == (20, 40)
+
+
+def test_drehrichtung_ist_im_uhrzeigersinn():
+    # Oben links schwarz: nach 90 Grad im Uhrzeigersinn liegt es oben rechts.
+    image = np.full((20, 40, 3), 255, dtype=np.uint8)
+    image[:10, :20] = 0
+    buffer = io.BytesIO()
+    Image.fromarray(image).save(buffer, format="PNG")
+    gedreht = np.asarray(
+        Image.open(io.BytesIO(imaging.rotate_jpeg(buffer.getvalue(), 90)))
+    )
+
+    assert gedreht[:10, -10:].mean() < 60   # oben rechts jetzt dunkel
+    assert gedreht[:10, :10].mean() > 195   # oben links jetzt hell
+
+
+def test_helle_karte_wird_aufgehellt():
+    # Karte mit Helligkeitsverlauf, wie ihn schraeges Licht erzeugt.
+    verlauf = np.linspace(150, 225, 400, dtype=np.float32)
+    karte = np.repeat(verlauf[None, :, None], 250, axis=0).repeat(3, axis=2)
+    karte = karte.astype(np.uint8)
+
+    aufgehellt = segment.flatten(karte)
+
+    assert aufgehellt.mean() > karte.mean() + 20
+    # Der Verlauf ist danach deutlich flacher als vorher.
+    vorher = float(karte[:, -1].mean() - karte[:, 0].mean())
+    nachher = float(aufgehellt[:, -1].mean() - aufgehellt[:, 0].mean())
+    assert nachher < vorher / 2
+
+
+def test_dunkle_karte_bleibt_dunkel():
+    dunkel = np.full((250, 400, 3), 40, dtype=np.uint8)
+
+    assert np.array_equal(segment.flatten(dunkel), dunkel)
+
+
+def test_zuschnitt_laesst_den_untergrund_draussen():
+    # Der Untergrund im Testfoto ist dunkel. Bleibt ein Streifen davon im
+    # Zuschnitt, waeren die Randspalten deutlich dunkler als die Mitte.
+    crops, _ = segment.segment(photo_with_cards(count=4))
+
+    for crop in crops:
+        rand = np.concatenate([crop[:, :3], crop[:, -3:]], axis=1)
+        assert rand.mean() > 170
+
+
+def test_einzug_zieht_die_ecken_zur_mitte():
+    quad = np.array([[0, 0], [100, 0], [100, 100], [0, 100]], dtype="float32")
+
+    kleiner = segment._shrink(quad, factor=0.1)
+
+    assert kleiner[0][0] > quad[0][0]
+    assert kleiner[2][0] < quad[2][0]
+    assert np.allclose(kleiner.mean(axis=0), quad.mean(axis=0))
--- a/tests/test_extract.py
+++ b/tests/test_extract.py
@@ -0,0 +1,45 @@
+"""Der Parametersatz haengt am Modell - das war ein echter Produktionsfehler:
+claude-haiku-4-5 lehnt output_config.effort mit einem 400 ab.
+"""
+from app import extract
+
+
+def test_effort_nur_fuer_modelle_die_es_koennen():
+    assert "claude-haiku-4-5".startswith(extract._NO_EFFORT)
+    assert "claude-sonnet-4-5".startswith(extract._NO_EFFORT)
+    assert not "claude-opus-5".startswith(extract._NO_EFFORT)
+    assert not "claude-sonnet-5".startswith(extract._NO_EFFORT)
+
+
+def test_server_seitiger_fallback_nur_fuer_die_grossen():
+    assert "claude-opus-5".startswith(extract._WITH_FALLBACK)
+    assert "claude-fable-5-1".startswith(extract._WITH_FALLBACK)
+    assert not "claude-haiku-4-5".startswith(extract._WITH_FALLBACK)
+    assert not "claude-sonnet-5".startswith(extract._WITH_FALLBACK)
+
+
+def test_output_config_ohne_effort_bleibt_gueltig():
+    ohne = extract._output_config(with_effort=False)
+    mit = extract._output_config(with_effort=True)
+
+    assert "effort" not in ohne
+    assert ohne["format"]["type"] == "json_schema"
+    assert mit["effort"] == "low"
+    assert mit["format"] == ohne["format"]
+
+
+def test_schema_verlangt_alle_felder_und_verbietet_zusaetze():
+    assert extract.SCHEMA["additionalProperties"] is False
+    assert set(extract.SCHEMA["required"]) == {
+        "is_business_card",
+        "rotation",
+        *extract.FIELDS,
+    }
+    for field in extract.FIELDS:
+        assert extract.SCHEMA["properties"][field]["type"] == ["string", "null"]
+
+
+def test_rotation_ist_auf_vier_werte_beschraenkt():
+    """Das Modell sagt uns, wie herum die Karte gehoert - geometrisch ist das
+    nicht bestimmbar."""
+    assert extract.SCHEMA["properties"]["rotation"]["enum"] == [0, 90, 180, 270]
--- a/tests/test_segment.py
+++ b/tests/test_segment.py
@@ -17,7 +17,16 @@ def test_zuschnitte_haben_kartenformat():

    for crop in crops:
        height, width = crop.shape[:2]
-        assert (width, height) == (segment.OUT_WIDTH, segment.OUT_HEIGHT)
+        assert abs(width / height - segment.CARD_RATIO) < 0.01
+        assert segment.MIN_WIDTH <= width <= segment.OUT_WIDTH
+
+
+def test_zuschnitt_wird_nicht_hochskaliert():
+    # Auf einem Stapelfoto ist eine Karte schmaler als OUT_WIDTH - der
+    # Zuschnitt darf die Vorlage nicht kuenstlich aufblasen.
+    crops, _ = segment.segment(photo_with_cards(count=12))
+
+    assert all(crop.shape[1] < segment.OUT_WIDTH for crop in crops)


 def test_zuschnitt_enthaelt_die_karte_und_nicht_den_tisch():
--- a/tests/test_vcard.py
+++ b/tests/test_vcard.py
@@ -58,13 +58,6 @@ def test_firma_ersetzt_den_namen_wenn_keiner_erkannt_wurde():
    assert "FN:Berg & Partner GmbH" in output


-def test_mehrere_karten_in_einer_datei():
-    output = vcard.build_many([BASE, {"full_name": "Bea Kurz"}])
-
-    assert output.count("BEGIN:VCARD") == 2
-    assert output.count("END:VCARD") == 2
-
-
 def test_dateiname_ist_dateisystemtauglich():
    assert vcard.filename(BASE) == "Dr-Anna-Berg.vcf"
    assert vcard.filename({}) == "Unbenannt.vcf"