effort-Parameter modellabhängig senden, Design-Hierarchie, iOS-Datumsfeld

Fehler: claude-haiku-4-5 lehnt output_config.effort mit einem 400 ab, jede
Karte lief in einen Lesefehler. effort und der server-seitige Fallback
werden jetzt nur an Modelle geschickt, die sie annehmen; ein unbekanntes
Modell mit engerem Parametersatz wird einmal ohne Zusatzparameter
wiederholt, statt die Karte zu verlieren. Tests decken die Zuordnung ab.

Design: Grau kommt als Hierarchiestufe dazu. Drei Ebenen für Fläche
(weiß / grau gefüllt / schwarz), Text (schwarz / --ink-2 / --ink-3) und
Linie (3px / 1px schwarz / graue Haarlinie). Vorher trug alles dieselbe
3px-Kante und dasselbe Schwarz, dadurch war keine Ordnung erkennbar.
Konkret: nicht gewählte Filter treten zurück, Listenzeilen bekommen drei
Textstufen und Statuspillen statt einer gleichförmigen Zeile, das
Kopfband über Listen ist grau hinterlegt, zweitrangige und zerstörende
Aktionen sind leiser als die primäre.

iOS: Datumsfelder zentrieren ihren Wert und sacken in der Höhe ein. Die
WebKit-Pseudoelemente ziehen sie auf die Form der übrigen Felder.

Dazu die Domain in der Dokumentation auf scanner.lucas-orth.de.

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

static/app.js

@@ -111,6 +111,20 @@
     });
   }
 
+  /** 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]);
+    tags.push(
+      card.exported_at ? ["pill-solid", "exportiert"] : ["", "nicht exportiert"]
+    );
+    if (card.extract_status !== "ok") tags.push(["", "Lesefehler"]);
+    return tags
+      .map(([extra, text]) => `<span class="pill ${extra}">${esc(text)}</span>`)
+      .join("");
+  }
+
   // ----------------------------------------------------------------- Routing
 
   function go(route, cardId) {
@@ -167,7 +181,7 @@
         <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">${card.has_contact ? "Gelesen" : "Leer"}</span>
           </span>
           <span class="row-sub">${esc(card.company || card.email || "Keine Daten erkannt")}</span>
         </button>`
@@ -234,15 +248,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("")}
@@ -367,7 +373,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>`;
 

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>

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; }
 }