UI redesign step 7 (Benutzer-Verwaltung): Stitch style

- Header gets the same title/subtitle pair + primary "Neuer Benutzer"
  pill on the right that the other tabs use, with the person_add
  glyph.
- Table shell now matches Übersicht/Provisionen: bordered white card,
  surface-container-high header band with label-caps column titles,
  zebra rows, hover highlight.
- "Admin" column renders a verified_user icon for admins and a long
  dash otherwise instead of the previous green check. The username
  column shows a small primary "Sie" badge for the logged-in user.
- Action column collapses to two icon-only buttons (edit / delete);
  delete is rendered with reduced opacity and disabled when it is
  the logged-in user's row.

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

public/index.html

@@ -1815,22 +1815,39 @@
 
         <!-- Benutzer-Verwaltung Tab (admin only) -->
         <div id="users" class="tab-content">
-            <h2>Benutzer-Verwaltung</h2>
-            <div style="margin-bottom: 20px;">
-                <button type="button" class="btn-success" onclick="openUserModal()">+ Neuer Benutzer</button>
+            <div class="flex flex-col gap-lg">
+
+                <!-- Page header -->
+                <div class="flex justify-between items-end flex-wrap gap-md">
+                    <div>
+                        <h1 class="text-headline-md text-on-background mb-xs">Benutzer-Verwaltung</h1>
+                        <p class="text-body-sm text-on-surface-variant">Verwalten Sie die Anmeldedaten und Berechtigungen der Anwender.</p>
+                    </div>
+                    <button type="button" onclick="openUserModal()"
+                            class="bg-primary-container text-on-primary hover:bg-primary transition-colors rounded-lg px-md py-sm text-body-sm flex items-center gap-sm shadow-sm">
+                        <span class="material-symbols-outlined text-[18px]">person_add</span>
+                        Neuer Benutzer
+                    </button>
+                </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 class="w-full text-left border-collapse">
+                            <thead class="bg-surface-container-high border-b-2 border-outline-variant">
+                                <tr>
+                                    <th class="px-md py-sm text-label-caps text-on-surface-variant uppercase">Username</th>
+                                    <th class="px-md py-sm text-label-caps text-on-surface-variant uppercase">Anzeigename</th>
+                                    <th class="px-md py-sm text-label-caps text-on-surface-variant uppercase text-center w-[80px]">Admin</th>
+                                    <th class="px-md py-sm text-label-caps text-on-surface-variant uppercase w-[180px]">Erstellt</th>
+                                    <th class="px-md py-sm text-label-caps text-on-surface-variant uppercase text-center w-[120px]">Aktionen</th>
+                                </tr>
+                            </thead>
+                            <tbody id="usersTableBody" class="text-body-sm text-on-surface"></tbody>
+                        </table>
+                    </div>
+                </div>
             </div>
-            <table class="data-table" style="width:100%; border-collapse: collapse;">
-                <thead>
-                    <tr>
-                        <th>Username</th>
-                        <th>Anzeigename</th>
-                        <th>Admin</th>
-                        <th>Erstellt</th>
-                        <th>Aktionen</th>
-                    </tr>
-                </thead>
-                <tbody id="usersTableBody"></tbody>
-            </table>
         </div>
 
         <!-- Modal: Benutzer anlegen / bearbeiten -->