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/index.html

@@ -1088,28 +1088,39 @@
         
         <!-- Gelöschte Schaltungen Tab -->
         <div id="geloeschte" class="tab-content">
-            <h2>Gelöschte Schaltungen</h2>
+            <div class="flex flex-col gap-lg">
-            <div class="table-container">
+
-                <table id="geloeschteSchaltungenTable">
+                <!-- Page header -->
-                    <thead>
+                <div class="flex justify-between items-end flex-wrap gap-md">
+                    <div>
+                        <h1 class="text-headline-md text-on-background mb-xs">Gelöschte Schaltungen</h1>
+                        <p class="text-body-sm text-on-surface-variant">Archiv aller soft-gelöschten Schaltungen mit Löschgrund und Zeitstempel.</p>
+                    </div>
+                </div>
+
+                <!-- Data table -->
+                <div class="bg-surface-container-lowest border border-outline-variant rounded-lg shadow-[0_2px_4px_rgba(0,0,0,0.04)] overflow-hidden">
+                    <div class="overflow-x-auto">
+                        <table id="geloeschteSchaltungenTable" class="w-full text-left border-collapse">
+                            <thead class="bg-surface-container-high border-b-2 border-outline-variant">
                                 <tr>
-                            <th>Schaltungs-ID</th>
+                                    <th class="px-md py-sm text-label-caps text-on-surface-variant uppercase text-right w-[80px]">ID</th>
-                            <th>Eingabe-Datum</th>
+                                    <th class="px-md py-sm text-label-caps text-on-surface-variant uppercase">Daten</th>
-                            <th>Schaltungs-Datum</th>
+                                    <th class="px-md py-sm text-label-caps text-on-surface-variant uppercase">Kunde / Firma</th>
-                            <th>Name</th>
+                                    <th class="px-md py-sm text-label-caps text-on-surface-variant uppercase">Rufnummer</th>
-                            <th>Firma</th>
+                                    <th class="px-md py-sm text-label-caps text-on-surface-variant uppercase">Anbieter</th>
-                            <th>Rufnummer</th>
+                                    <th class="px-md py-sm text-label-caps text-on-surface-variant uppercase">Tarif</th>
-                            <th>Anbieter</th>
+                                    <th class="px-md py-sm text-label-caps text-on-surface-variant uppercase">Hardware</th>
-                            <th>Tarif</th>
+                                    <th class="px-md py-sm text-label-caps text-on-surface-variant uppercase">Löschgrund</th>
-                            <th>Hardware</th>
+                                    <th class="px-md py-sm text-label-caps text-on-surface-variant uppercase w-[140px]">Gelöscht am</th>
-                            <th>Löschgrund</th>
-                            <th>Gelöscht am</th>
                                 </tr>
                             </thead>
-                    <tbody></tbody>
+                            <tbody class="text-body-sm text-on-surface"></tbody>
                         </table>
                     </div>
                 </div>
+            </div>
+        </div>
         
         <!-- Administration Tab -->
         <div id="admin" class="tab-content">

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
+        // Always refresh — the archive is rarely shown so this is cheap.
-        if (!document.getElementById('geloeschteList') || !document.getElementById('geloeschteList').innerHTML.trim()) {
         loadGeloeschteSchaltungen();
-        }
     } else if (tabName === 'admin') {
         // Check if admin data is already loaded
         if (!document.getElementById('anbieterList') || !document.getElementById('anbieterList').innerHTML.trim()) {
@@ -2037,25 +2035,41 @@ 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');
+            const tr = document.createElement('tr');
-            row.innerHTML = `
+            tr.className = 'border-b border-outline-variant/30 even:bg-surface-container-low/50 hover:bg-surface-variant/30 transition-colors';
-                <td>${escapeHtml(s.schaltungs_id)}</td>
+            tr.innerHTML = `
-                <td>${escapeHtml(formatDate(s.eingabe_datum))}</td>
+                <td class="px-md py-xs font-label-numeric text-label-numeric text-right text-on-surface-variant">${escapeHtml(s.schaltungs_id)}</td>
-                <td>${escapeHtml(formatDate(s.schaltungs_datum))}</td>
+                <td class="px-md py-xs">
-                <td>${escapeHtml(s.vorname)} ${escapeHtml(s.nachname)}</td>
+                    <div class="flex flex-col gap-0.5">
-                <td>${escapeHtml(s.firma || '-')}</td>
+                        <span class="font-label-numeric text-[11px] text-on-surface-variant">E: ${escapeHtml(formatDate(s.eingabe_datum))}</span>
-                <td>${escapeHtml(s.rufnummer)}</td>
+                        <span class="font-label-numeric text-[11px] text-primary">A: ${escapeHtml(formatDate(s.schaltungs_datum))}</span>
-                <td>${escapeHtml(s.anbieter_name)}</td>
+                    </div>
-                <td>${escapeHtml(s.tarif_name)}</td>
+                </td>
-                <td>${escapeHtml(s.hardware || '')}</td>
+                <td class="px-md py-xs">
-                <td><strong style="color: #e74c3c;">${escapeHtml(s.loeschgrund)}</strong></td>
+                    <div class="font-semibold text-on-background">${escapeHtml((s.vorname || '') + ' ' + (s.nachname || ''))}</div>
-                <td>${escapeHtml(formatDateTime(s.geloescht_am))}</td>
+                    <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) {