Board: Charge-Abstand + Aufgaben-Umschalter unter Weiteres; Kontakte/Statistik-Farben

- Board Charge-Karte: gleichmaessige Abstaende (Flex-Spalte), Notiz mit Label,
  aufgeklappte Teil-Auftraege klar abgetrennt + Luft (kein Aneinanderkleben)
- Board "Weiteres": Versandart, Frankierung, Kuvertierung, Brief/Kuvert gedruckt
  direkt umschaltbar (setOrderFeld); frankiert+versanddatum in Order-Abfrage ergaenzt
- Kontakte + Statistik: gleiche kontraststarke feste Farben + sichtbare Rahmen nachgezogen

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

extensions/directus-extension-skrift-kontakte/dist/index.js

@@ -42,29 +42,29 @@ const FIELDS = ['id', 'salutation', 'first_name', 'last_name', 'company', 'stree
   'source_order.order_number'];
 
 // ── Stil-Helfer ──────────────────────────────────────────────────────────────
-const CARD = 'border:1px solid var(--border-subdued);border-radius:10px;padding:16px 18px;background:var(--background-page,#fff);box-shadow:0 1px 3px rgba(0,0,0,.08);';
+const CARD = 'border:1px solid #d2dae6;border-radius:10px;padding:16px 18px;background:#ffffff;box-shadow:0 1px 3px rgba(0,0,0,.08);';
 // Klar erkennbares Eingabefeld: kräftigere Umrandung + leicht getönter Grund,
 // damit es sich deutlich von der weißen Karte abhebt.
-const S_INPUT = 'width:100%;padding:11px 12px;border:1.5px solid var(--border-normal,#c4cdde);border-radius:8px;background:var(--background-subdued,#eef1f7);color:var(--foreground-normal);font:inherit;font-size:15px;box-sizing:border-box;';
+const S_INPUT = 'width:100%;padding:11px 12px;border:1.5px solid #b4c0d2;border-radius:8px;background:#eef2f8;color:#1b2430;font:inherit;font-size:15px;box-sizing:border-box;';
-const LBL = 'font-size:12px;font-weight:600;color:var(--foreground-subdued);margin:0 0 4px;text-transform:uppercase;letter-spacing:.03em;';
+const LBL = 'font-size:12px;font-weight:600;color:#566070;margin:0 0 4px;text-transform:uppercase;letter-spacing:.03em;';
 
 function btn(label, onClick, kind) {
   const base = 'cursor:pointer;border-radius:8px;padding:10px 16px;font:inherit;font-size:14px;border:1px solid;';
   const style = kind === 'primary'
     ? base + `border-color:${ACCENT};background:${ACCENT};color:#fff;`
     : kind === 'ghost'
-      ? base + 'border-color:transparent;background:transparent;color:var(--foreground-normal);'
+      ? base + 'border-color:transparent;background:transparent;color:#1b2430;'
-      : base + 'border-color:var(--border-normal);background:var(--background-subdued);color:var(--foreground-normal);';
+      : base + 'border-color:#b4c0d2;background:#eef2f8;color:#1b2430;';
   return h('button', { type: 'button', onClick, style }, label);
 }
 function chip(text, farbe) {
   return h('span', {
     style: 'display:inline-flex;align-items:center;gap:4px;font-size:12px;padding:3px 10px;border-radius:20px;'
-      + `background:${farbe || 'var(--background-subdued)'};color:#fff;white-space:nowrap;`,
+      + `background:${farbe || '#eef2f8'};color:#fff;white-space:nowrap;`,
   }, text);
 }
 function subdued(text, extra) {
-  return h('div', { style: `color:var(--foreground-subdued);font-size:14px;${extra || ''}` }, text);
+  return h('div', { style: `color:#566070;font-size:14px;${extra || ''}` }, text);
 }
 function feld(label, node) {
   return h('div', { style: 'margin-bottom:14px;' }, [h('div', { style: LBL }, label), node]);
@@ -260,7 +260,7 @@ const Board = defineComponent({
       return h('div', {
         onClick: () => { aktivId.value = k.id; fehler.value = ''; },
         style: CARD + 'cursor:pointer;margin-bottom:10px;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;'
-          + (istGewaehlt(k.id) ? 'outline:2px solid var(--primary,#1E50A5);' : ''),
+          + (istGewaehlt(k.id) ? 'outline:2px solid #1E50A5;' : ''),
       }, [
         h('input', {
           type: 'checkbox', checked: istGewaehlt(k.id),
@@ -294,7 +294,7 @@ const Board = defineComponent({
           ]),
         ]),
         h('div', { style: 'display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:space-between;' }, [
-          h('label', { style: 'display:flex;align-items:center;gap:6px;font-size:13px;color:var(--foreground-subdued);cursor:pointer;' }, [
+          h('label', { style: 'display:flex;align-items:center;gap:6px;font-size:13px;color:#566070;cursor:pointer;' }, [
             h('input', { type: 'checkbox',
               checked: gefiltert.value.length > 0 && auswahl.value.size >= gefiltert.value.length,
               onChange: (e) => { e.target.checked ? selAlle() : selKeine(); }, style: 'width:16px;height:16px;cursor:pointer;' }),
@@ -308,7 +308,7 @@ const Board = defineComponent({
       ]);
       // Bulk-Leiste, sobald mindestens ein Kontakt ausgewählt ist.
       const bulk = auswahl.value.size ? h('div', {
-        style: 'position:sticky;top:8px;z-index:5;background:var(--primary,#1E50A5);color:#fff;border-radius:10px;padding:10px 14px;margin-bottom:12px;display:flex;gap:10px;flex-wrap:wrap;align-items:center;',
+        style: 'position:sticky;top:8px;z-index:5;background:#1E50A5;color:#fff;border-radius:10px;padding:10px 14px;margin-bottom:12px;display:flex;gap:10px;flex-wrap:wrap;align-items:center;',
       }, [
         h('span', { style: 'font-weight:600;' }, `${auswahl.value.size} ausgewählt`),
         h('span', {}, 'Status:'),
@@ -347,10 +347,10 @@ const Board = defineComponent({
         btn('◀ Liste', () => { aktivId.value = null; }, 'ghost'),
         h('div', { style: 'display:flex;align-items:center;gap:8px;' }, [
           h('button', { type: 'button', disabled: idx <= 0, onClick: () => geh(-1),
-            style: 'cursor:pointer;border:1px solid var(--border-normal);background:var(--background-subdued);border-radius:8px;padding:8px 12px;font-size:16px;' + (idx <= 0 ? 'opacity:.4;cursor:not-allowed;' : '') }, '◀'),
+            style: 'cursor:pointer;border:1px solid #b4c0d2;background:#eef2f8;border-radius:8px;padding:8px 12px;font-size:16px;' + (idx <= 0 ? 'opacity:.4;cursor:not-allowed;' : '') }, '◀'),
           subdued(gesamt ? `${idx + 1} / ${gesamt}` : '–'),
           h('button', { type: 'button', disabled: idx >= gesamt - 1, onClick: () => geh(1),
-            style: 'cursor:pointer;border:1px solid var(--border-normal);background:var(--background-subdued);border-radius:8px;padding:8px 12px;font-size:16px;' + (idx >= gesamt - 1 ? 'opacity:.4;cursor:not-allowed;' : '') }, '▶'),
+            style: 'cursor:pointer;border:1px solid #b4c0d2;background:#eef2f8;border-radius:8px;padding:8px 12px;font-size:16px;' + (idx >= gesamt - 1 ? 'opacity:.4;cursor:not-allowed;' : '') }, '▶'),
         ]),
       ]);
 
@@ -409,10 +409,10 @@ const Board = defineComponent({
       ]);
 
       const preset = (label, d) => h('button', { type: 'button',
-        style: 'cursor:pointer;border-radius:20px;padding:6px 12px;font:inherit;font-size:13px;border:1px solid var(--border-normal);'
+        style: 'cursor:pointer;border-radius:20px;padding:6px 12px;font:inherit;font-size:13px;border:1px solid #b4c0d2;'
-          + (rueckruf.date === ymd(isoDatum(d)) ? `background:${ACCENT};color:#fff;` : 'background:var(--background-page);color:var(--foreground-normal);'),
+          + (rueckruf.date === ymd(isoDatum(d)) ? `background:${ACCENT};color:#fff;` : 'background:#ffffff;color:#1b2430;'),
         onClick: () => { rueckruf.date = ymd(isoDatum(d)); } }, label);
-      const rueckrufForm = rueckruf.open ? h('div', { style: 'border:1px solid var(--border-normal);border-radius:10px;padding:14px;margin-top:10px;margin-bottom:12px;background:var(--background-subdued);' }, [
+      const rueckrufForm = rueckruf.open ? h('div', { style: 'border:1px solid #b4c0d2;border-radius:10px;padding:14px;margin-top:10px;margin-bottom:12px;background:#eef2f8;' }, [
         h('div', { style: 'display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px;' }, [preset('Morgen', 1), preset('In 3 Tagen', 3), preset('Nächste Woche', 7)]),
         h('div', { style: 'display:flex;gap:10px;flex-wrap:wrap;' }, [
           h('div', { style: 'flex:2;min-width:150px;' }, feld('Datum', h('input', { type: 'date', value: rueckruf.date, style: S_INPUT, onInput: (e) => { rueckruf.date = e.target.value; } }))),
@@ -421,18 +421,18 @@ const Board = defineComponent({
         h('div', { style: 'display:flex;gap:8px;' }, [btn('Erinnerung setzen', () => planeRueckruf(k), 'primary'), btn('Abbrechen', () => { rueckruf.open = false; }, 'ghost')]),
       ]) : null;
 
-      const mailForm = mailMich.open ? h('div', { style: 'border:1px solid var(--border-normal);border-radius:10px;padding:14px;margin-top:10px;margin-bottom:12px;background:var(--background-subdued);' }, [
+      const mailForm = mailMich.open ? h('div', { style: 'border:1px solid #b4c0d2;border-radius:10px;padding:14px;margin-top:10px;margin-bottom:12px;background:#eef2f8;' }, [
         feld('Notiz an mich', h('textarea', { value: mailMich.note, rows: 3, placeholder: 'Was soll dir per Mail zugehen? (Eckdaten kommen automatisch mit)', style: S_INPUT + 'resize:vertical;', onInput: (e) => { mailMich.note = e.target.value; } })),
         h('div', { style: 'display:flex;gap:8px;' }, [btn('Mail an mich senden', () => sendeMail(k), 'primary'), btn('Abbrechen', () => { mailMich.open = false; }, 'ghost')]),
       ]) : null;
 
       const offene = aktionen.value.filter((a) => a.type === 'rueckruf' && a.status === 'offen');
       const offeneListe = offene.length ? h('div', { style: 'margin-bottom:12px;display:flex;flex-direction:column;gap:6px;' }, offene.map((a) => h('div', {
-        style: 'display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--border-normal);border-radius:8px;padding:8px 12px;background:var(--background-page);',
+        style: 'display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid #b4c0d2;border-radius:8px;padding:8px 12px;background:#ffffff;',
       }, [
         h('div', { style: 'font-size:13px;' }, [
           h('span', { style: 'font-weight:600;' }, '📞 Rückruf ' + (a.due_date ? new Date(a.due_date).toLocaleString('de-DE', { dateStyle: 'short', timeStyle: 'short' }) : '')),
-          a.note ? h('div', { style: 'color:var(--foreground-subdued);margin-top:2px;white-space:pre-wrap;' }, a.note) : null,
+          a.note ? h('div', { style: 'color:#566070;margin-top:2px;white-space:pre-wrap;' }, a.note) : null,
         ]),
         btn('✓ erledigt', () => erledige(a, k), 'default'),
       ]))) : null;
@@ -448,12 +448,12 @@ const Board = defineComponent({
       const inhalt = h('div', { style: 'max-width:760px;margin:0 auto;padding:20px 16px 60px;' }, [
         // Aktions-Buttons: am Desktop nebeneinander (gleich breit), am Handy gestapelt in voller Breite.
         h('style', {}, '.sk-akt{display:flex;gap:8px;flex-wrap:wrap;}.sk-akt>*{flex:1 1 auto;justify-content:center;}@media(max-width:600px){.sk-akt{flex-direction:column;}.sk-akt>*{width:100%;flex:none;}}'),
-        fehler.value ? h('div', { style: 'background:var(--danger-25,rgba(198,40,40,.12));color:var(--danger,#c62828);padding:10px 14px;border-radius:8px;margin-bottom:12px;font-size:14px;' }, fehler.value) : null,
+        fehler.value ? h('div', { style: 'background:#fbe3e0;color:#c0392b;padding:10px 14px;border-radius:8px;margin-bottom:12px;font-size:14px;' }, fehler.value) : null,
-        meldung.value ? h('div', { style: 'background:var(--success-25,rgba(46,125,50,.15));color:var(--success,#2e7d32);padding:10px 14px;border-radius:8px;margin-bottom:12px;font-size:14px;' }, meldung.value) : null,
+        meldung.value ? h('div', { style: 'background:#dff2e2;color:#1b6b2e;padding:10px 14px;border-radius:8px;margin-bottom:12px;font-size:14px;' }, meldung.value) : null,
         aktivId.value ? detailAnsicht() : listenAnsicht(),
       ]);
       return h(resolveComponent('private-view'), { title: 'Kontakte' }, {
-        default: () => h('div', { style: 'min-height:100%;background:var(--background-subdued,#f1f4f9);' }, [inhalt]),
+        default: () => h('div', { style: 'min-height:100%;background:#eef2f8;' }, [inhalt]),
       });
     };
   },

extensions/directus-extension-skrift-produktion/dist/index.js

@@ -263,7 +263,7 @@ const Board = defineComponent({
     // Basis-Felder ohne die evtl. noch nicht gebootstrapten Felder – diese
     // werden separat versucht, damit ein fehlendes Feld nicht das ganze Board sperrt.
     const ORDER_FELDER = 'id,order_number,order_name,status,payment_status,production_status,needs_envelope,envelope_format,'
-      + 'envelope_labeling,shipping_type,shipping_day,keep_contacts,entries_count,count_inland,count_ausland,brief_gedruckt,kuvert_gedruckt,'
+      + 'envelope_labeling,shipping_type,shipping_day,keep_contacts,entries_count,count_inland,count_ausland,brief_gedruckt,kuvert_gedruckt,frankiert,versanddatum,'
       + 'date_updated,date_created,format.key,format.name,product.name,product.type,product.input_mode,'
       + 'source,api_client.id,api_client.name,motif_mode,motif.name,shipping_address,'
       + 'source_file,internal_note,approval_status,approval_note,linked_order.id,linked_order.order_number,'
@@ -393,6 +393,11 @@ const Board = defineComponent({
       try { await api.patch('/items/orders/' + order.id, { internal_note: val }); order.internal_note = val; }
       catch { fehler.value = 'Notiz konnte nicht gespeichert werden.'; }
     }
+    // Einzelne Auftrags-Felder (Versandart, Frankierung, Druck-/Kuvert-Flags) direkt setzen.
+    async function setOrderFeld(order, patch) {
+      try { await api.patch('/items/orders/' + order.id, patch); Object.assign(order, patch); flash(`${order.order_number}: aktualisiert`); }
+      catch (e) { fehler.value = e?.message || 'Konnte nicht gespeichert werden.'; }
+    }
     // Verknüpften Auftrag (Kuverts) setzen/ändern/entfernen – per Auftragsnummer.
     async function setOrderLink(order, nr) {
       const num = String(nr || '').trim();
@@ -1381,6 +1386,17 @@ const Board = defineComponent({
               nm ? h('div', { style: 'color:#566070;' }, `Erster: ${nm.erste}${nm.anzahl > 1 ? ` · Letzter: ${nm.letzte}` : ''}`) : null,
             ]),
           ]),
+          // Aufgaben umstellen: Versandart, Frankierung, Kuvertierung, Druck-Flags.
+          h('div', { style: 'border-top:1px solid #d2dae6;padding-top:14px;' }, [
+            h('div', { style: 'font-size:11.5px;font-weight:500;color:#566070;text-transform:uppercase;letter-spacing:.03em;margin-bottom:8px;' }, 'Aufgaben umstellen'),
+            h('div', { style: 'display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;' }, [
+              h('div', {}, [feldLabel('Versandart'), segToggle(o.shipping_type === 'einzeln' ? 'einzeln' : 'sammel', [{ key: 'einzeln', label: 'Einzelversand' }, { key: 'sammel', label: 'Sammelversand' }], (k) => setOrderFeld(o, { shipping_type: k }))]),
+              h('div', {}, [feldLabel('Frankierung'), segToggle(((typeof o.frankiert === 'boolean') ? o.frankiert : (o.shipping_type !== 'sammel')) ? 'ja' : 'nein', [{ key: 'ja', label: 'Frankieren' }, { key: 'nein', label: 'Nicht' }], (k) => setOrderFeld(o, { frankiert: k === 'ja' }))]),
+              h('div', {}, [feldLabel('Kuvertierung'), segToggle(o.needs_envelope ? 'ja' : 'nein', [{ key: 'ja', label: 'Mit Kuvert' }, { key: 'nein', label: 'Ohne' }], (k) => setOrderFeld(o, { needs_envelope: k === 'ja' }))]),
+              h('div', {}, [feldLabel('Brief gedruckt'), segToggle(o.brief_gedruckt ? 'ja' : 'nein', [{ key: 'ja', label: 'Ja' }, { key: 'nein', label: 'Nein' }], (k) => setOrderFeld(o, { brief_gedruckt: k === 'ja' }))]),
+              h('div', {}, [feldLabel('Kuvert gedruckt'), segToggle(o.kuvert_gedruckt ? 'ja' : 'nein', [{ key: 'ja', label: 'Ja' }, { key: 'nein', label: 'Nein' }], (k) => setOrderFeld(o, { kuvert_gedruckt: k === 'ja' }))]),
+            ]),
+          ]),
           // Verknüpfungen: beschriftete Felder.
           h('div', { style: 'display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;' }, [
             h('div', {}, [feldLabel('Verknüpfter Auftrag'),
@@ -1552,15 +1568,15 @@ const Board = defineComponent({
       const sumKuvert = c.orders.reduce((a, o) => a + (o.needs_envelope ? (Number(o.entries_count) || 0) : 0), 0);
       const fmts = [...new Set(c.orders.map((o) => o.format?.name || o.format?.key).filter(Boolean))];
       const versands = [...new Set(c.orders.map((o) => o.shipping_type === 'einzeln' ? 'Einzel' : 'Sammel'))];
-      const chargeSpecs = h('div', { style: 'display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-top:12px;' }, [
+      const chargeSpecs = h('div', { style: 'display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;' }, [
         tile('Schriftstücke', String(sumSchrift), true),
         tile('Kuverts', sumKuvert ? String(sumKuvert) : 'ohne', true),
         tile('Format', fmts.length ? fmts.join(', ') : '—'),
         tile('Versand', versands.length === 1 ? versands[0] : versands.join('/')),
       ]);
-      const body = auf ? h('div', { style: 'margin-top:12px;display:flex;flex-direction:column;gap:2px;' }, c.orders.map((o) => orderCard(o, opts))) : null;
+      const body = auf ? h('div', { style: 'margin-top:2px;padding-top:16px;border-top:1px solid #d2dae6;display:flex;flex-direction:column;gap:14px;' }, c.orders.map((o) => orderCard(o, opts))) : null;
-      const chargeNotiz = notizFeld(chargeNotizen.value[c.key], (v) => setChargeNotiz(c.key, v), 'Notiz zur Charge …');
+      const chargeNotiz = h('div', {}, [feldLabel('Notiz zur Charge'), notizFeld(chargeNotizen.value[c.key], (v) => setChargeNotiz(c.key, v), 'Notiz zur Charge …')]);
-      return h('div', { key: 'c' + c.key, style: 'border:1px solid #b4c0d2;border-radius:12px;background:#ffffff;padding:16px 18px;margin-bottom:14px;' }, [kopf, chargeSpecs, chargeNotiz, body]);
+      return h('div', { key: 'c' + c.key, style: 'border:1px solid #b4c0d2;border-radius:12px;background:#ffffff;padding:18px 20px;margin-bottom:16px;display:flex;flex-direction:column;gap:16px;' }, [kopf, chargeSpecs, chargeNotiz, body].filter(Boolean));
     }
 
     // Aufträge einer Ansicht rendern: bei aktiver Suche als EINZELaufträge (damit

extensions/directus-extension-skrift-statistik/dist/index.js

@@ -14,12 +14,12 @@ import { defineComponent, ref, computed, onMounted, h, resolveComponent } from '
 import { useApi } from '@directus/extensions-sdk';
 
 const ACCENT = '#1E50A5';
-const CARD = 'border:1px solid var(--border-subdued);border-radius:10px;padding:16px 18px;background:var(--background-page,#fff);box-shadow:0 1px 3px rgba(0,0,0,.08);';
+const CARD = 'border:1px solid #d2dae6;border-radius:10px;padding:16px 18px;background:#ffffff;box-shadow:0 1px 3px rgba(0,0,0,.08);';
-const S_INPUT = 'border:1px solid var(--border-normal,#c9d3e0);border-radius:8px;padding:9px 12px;font:inherit;font-size:14px;background:var(--background-page,#fff);color:var(--foreground-normal);outline:none;width:100%;';
+const S_INPUT = 'border:1px solid #b4c0d2;border-radius:8px;padding:9px 12px;font:inherit;font-size:14px;background:#ffffff;color:#1b2430;outline:none;width:100%;';
 
-const subdued = (t, extra) => h('div', { style: `color:var(--foreground-subdued);font-size:13px;${extra || ''}` }, t);
+const subdued = (t, extra) => h('div', { style: `color:#566070;font-size:13px;${extra || ''}` }, t);
 function chip(text, farbe) {
-  return h('span', { style: `display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;background:${farbe || 'var(--background-subdued,#eef2f7)'};color:var(--foreground-normal);` }, text);
+  return h('span', { style: `display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;background:${farbe || '#eef2f8'};color:#1b2430;` }, text);
 }
 const kundeName = (c) => [c?.first_name, c?.last_name].filter(Boolean).join(' ') || c?.email || '—';
 
@@ -84,17 +84,17 @@ const Board = defineComponent({
 
     const toggle = (key) => { const s = new Set(offen.value); s.has(key) ? s.delete(key) : s.add(key); offen.value = s; };
 
-    const th = (t, extra) => h('th', { style: `text-align:${extra || 'left'};padding:9px 12px;border-bottom:2px solid var(--border-subdued);font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--foreground-subdued);white-space:nowrap;` }, t);
+    const th = (t, extra) => h('th', { style: `text-align:${extra || 'left'};padding:9px 12px;border-bottom:2px solid #d2dae6;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:#566070;white-space:nowrap;` }, t);
-    const td = (t, extra) => h('td', { style: `padding:9px 12px;border-bottom:1px solid var(--border-subdued);${extra || ''}` }, t);
+    const td = (t, extra) => h('td', { style: `padding:9px 12px;border-bottom:1px solid #d2dae6;${extra || ''}` }, t);
 
     function auftragsListe(z) {
       const rows = z.orders.slice().sort((a, b) => String(b.versandt_am || '').localeCompare(String(a.versandt_am || '')));
-      return h('tr', {}, h('td', { colspan: 5, style: 'padding:0 12px 12px;background:var(--background-subdued,#f7f9fc);' }, [
+      return h('tr', {}, h('td', { colspan: 5, style: 'padding:0 12px 12px;background:#eef2f8;' }, [
         h('table', { style: 'width:100%;border-collapse:collapse;font-size:13px;' }, [
           h('tbody', {}, rows.map((o) => h('tr', {}, [
             td(`#${o.order_number}`, 'font-weight:600;'),
-            td(String(o.versandt_am || o.date_updated || '').slice(0, 10) || '—', 'color:var(--foreground-subdued);'),
+            td(String(o.versandt_am || o.date_updated || '').slice(0, 10) || '—', 'color:#566070;'),
-            td(o.product?.name || '—', 'color:var(--foreground-subdued);'),
+            td(o.product?.name || '—', 'color:#566070;'),
             td(`🇩🇪 ${inlandVon(o)}`, 'text-align:right;'),
             td(`🌍 ${auslandVon(o)}`, 'text-align:right;'),
           ]))),
@@ -111,12 +111,12 @@ const Board = defineComponent({
         h('input', { type: 'search', value: suche.value, placeholder: '🔎 Kunde, E-Mail, Auftragsnr. …',
           style: S_INPUT + 'width:auto;flex:1;min-width:200px;', onInput: (e) => { suche.value = e.target.value; } }),
         h('button', { type: 'button', onClick: laden,
-          style: 'cursor:pointer;border:1px solid var(--border-normal);background:var(--background-subdued);border-radius:7px;padding:8px 14px;font:inherit;font-size:13px;' }, '↻'),
+          style: 'cursor:pointer;border:1px solid #b4c0d2;background:#eef2f8;border-radius:7px;padding:8px 14px;font:inherit;font-size:13px;' }, '↻'),
       ]);
       const summen = h('div', { style: 'display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;' }, [
-        chip(`🇩🇪 Inland: ${s.inland}`, 'var(--primary-25,rgba(30,80,165,.14))'),
+        chip(`🇩🇪 Inland: ${s.inland}`, '#e3ecfa'),
-        chip(`🌍 Ausland: ${s.ausland}`, 'var(--warning-25,rgba(230,160,0,.15))'),
+        chip(`🌍 Ausland: ${s.ausland}`, '#fbeccb'),
-        chip(`Σ Gesamt: ${s.gesamt} Briefe`, 'var(--success-25,rgba(46,125,50,.15))'),
+        chip(`Σ Gesamt: ${s.gesamt} Briefe`, '#dff2e2'),
       ]);
       const inhalt = loading.value ? subdued('Lädt …')
         : !s.zeilen.length ? subdued('Keine versendeten Briefe in diesem Monat.')
@@ -129,7 +129,7 @@ const Board = defineComponent({
                   onClick: () => toggle(z.key),
                   style: 'cursor:pointer;',
                 }, [
-                  td(auf ? '▾' : '▸', 'color:var(--foreground-subdued);width:24px;'),
+                  td(auf ? '▾' : '▸', 'color:#566070;width:24px;'),
                   td(h('div', {}, [
                     h('div', { style: 'font-weight:600;' }, z.kunde),
                     z.email ? subdued(z.email, 'font-size:12px;') : null,
@@ -143,11 +143,11 @@ const Board = defineComponent({
             ]),
           ]);
       const seite = h('div', { style: 'max-width:960px;margin:0 auto;padding:24px 20px 60px;' }, [
-        fehler.value ? h('div', { style: 'background:var(--danger-25,rgba(198,40,40,.12));color:var(--danger,#c62828);padding:10px 14px;border-radius:8px;margin-bottom:12px;font-size:14px;' }, fehler.value) : null,
+        fehler.value ? h('div', { style: 'background:#fbe3e0;color:#c0392b;padding:10px 14px;border-radius:8px;margin-bottom:12px;font-size:14px;' }, fehler.value) : null,
         kopf, summen, inhalt,
       ]);
       return h(resolveComponent('private-view'), { title: 'Statistik' }, {
-        default: () => h('div', { style: 'min-height:100%;background:var(--background-subdued,#f1f4f9);' }, [seite]),
+        default: () => h('div', { style: 'min-height:100%;background:#eef2f8;' }, [seite]),
       });
     };
   },