UI redesign step 4: Gelöschte Schaltungen in Stitch style

- Page header gets a title + subtitle stack that matches Übersicht /
  Provisionen.
- Same data-table shell: bordered white card, surface-container-high
  sticky header with label-caps column titles, zebra-striped 40px
  rows, hover highlight.
- Eingabe/Schaltungs-Datum merged into a single "Daten" cell (E:/A:)
  to match Übersicht. Anbieter as a primary pill, Löschgrund as a
  red error-tinted pill. Gelöscht am right-aligned in monospaced
  label-numeric.
- showTab('geloeschte') now always re-fetches: the old check looked
  up a non-existent #geloeschteList element so the call already
  happened on every tab switch; this just clarifies the intent.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

public/script.js

@@ -277,10 +277,8 @@ function showTab(tabName) {
             loadProvisionen();
         }
     } else if (tabName === 'geloeschte') {
-        // Check if data is already loaded, if not load it
-        if (!document.getElementById('geloeschteList') || !document.getElementById('geloeschteList').innerHTML.trim()) {
-            loadGeloeschteSchaltungen();
-        }
+        // Always refresh — the archive is rarely shown so this is cheap.
+        loadGeloeschteSchaltungen();
     } else if (tabName === 'admin') {
         // Check if admin data is already loaded
         if (!document.getElementById('anbieterList') || !document.getElementById('anbieterList').innerHTML.trim()) {
@@ -2037,27 +2035,43 @@ async function loadGeloeschteSchaltungen() {
     try {
         const geloeschte = await apiRequest('/api/geloeschte-schaltungen');
         const tbody = document.querySelector('#geloeschteSchaltungenTable tbody');
-        
+        if (!tbody) return;
         tbody.innerHTML = '';
-        
+
+        if (!geloeschte.length) {
+            tbody.innerHTML = '<tr><td colspan="9" class="px-md py-lg text-center text-body-sm text-on-surface-variant">Keine gelöschten Schaltungen</td></tr>';
+            return;
+        }
+
         geloeschte.forEach(s => {
-            const row = document.createElement('tr');
-            row.innerHTML = `
-                <td>${escapeHtml(s.schaltungs_id)}</td>
-                <td>${escapeHtml(formatDate(s.eingabe_datum))}</td>
-                <td>${escapeHtml(formatDate(s.schaltungs_datum))}</td>
-                <td>${escapeHtml(s.vorname)} ${escapeHtml(s.nachname)}</td>
-                <td>${escapeHtml(s.firma || '-')}</td>
-                <td>${escapeHtml(s.rufnummer)}</td>
-                <td>${escapeHtml(s.anbieter_name)}</td>
-                <td>${escapeHtml(s.tarif_name)}</td>
-                <td>${escapeHtml(s.hardware || '')}</td>
-                <td><strong style="color: #e74c3c;">${escapeHtml(s.loeschgrund)}</strong></td>
-                <td>${escapeHtml(formatDateTime(s.geloescht_am))}</td>
+            const tr = document.createElement('tr');
+            tr.className = 'border-b border-outline-variant/30 even:bg-surface-container-low/50 hover:bg-surface-variant/30 transition-colors';
+            tr.innerHTML = `
+                <td class="px-md py-xs font-label-numeric text-label-numeric text-right text-on-surface-variant">${escapeHtml(s.schaltungs_id)}</td>
+                <td class="px-md py-xs">
+                    <div class="flex flex-col gap-0.5">
+                        <span class="font-label-numeric text-[11px] text-on-surface-variant">E: ${escapeHtml(formatDate(s.eingabe_datum))}</span>
+                        <span class="font-label-numeric text-[11px] text-primary">A: ${escapeHtml(formatDate(s.schaltungs_datum))}</span>
+                    </div>
+                </td>
+                <td class="px-md py-xs">
+                    <div class="font-semibold text-on-background">${escapeHtml((s.vorname || '') + ' ' + (s.nachname || ''))}</div>
+                    <div class="text-[12px] text-on-surface-variant">${escapeHtml(s.firma || '–')}</div>
+                </td>
+                <td class="px-md py-xs font-label-numeric text-label-numeric text-on-surface-variant">${escapeHtml(s.rufnummer || '–')}</td>
+                <td class="px-md py-xs">
+                    <span class="bg-primary/10 text-primary border border-primary/20 px-2 py-0.5 rounded-full text-label-caps">${escapeHtml(s.anbieter_name || '')}</span>
+                </td>
+                <td class="px-md py-xs">${escapeHtml(s.tarif_name || '')}</td>
+                <td class="px-md py-xs text-on-surface-variant">${escapeHtml(s.hardware || '–')}</td>
+                <td class="px-md py-xs">
+                    <span class="bg-error/10 text-error border border-error/20 px-2 py-0.5 rounded-full text-label-caps">${escapeHtml(s.loeschgrund || '')}</span>
+                </td>
+                <td class="px-md py-xs font-label-numeric text-label-numeric text-on-surface-variant">${escapeHtml(formatDateTime(s.geloescht_am))}</td>
             `;
-            tbody.appendChild(row);
+            tbody.appendChild(tr);
         });
-        
+
     } catch (error) {
         console.error('Fehler beim Laden der gelöschten Schaltungen:', error);
     }