migrate dashboard to real HeroUI v3 components and neutral theme

The frontend was built against HeroUI v2 props/classes (variant="light"/"flat",
color="primary", startContent, text-tiny, <Avatar src=/name=>) while
@heroui/react ^3.2.1 is installed, so most styling was silently ignored.
Rewrites every page/component onto the actual v3 API (variant/color enums,
Tooltip/Dropdown trigger-content structure, Avatar.Image/Fallback via a new
AppAvatar helper) and replaces the custom orange branding with HeroUI's
neutral default theme tokens. Also compacts the dashboard stat tiles, narrows
the sidebar, and swaps the activity stat grid for a single-hue comparison bar
chart.

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

frontend/src/pages/Statuspage.tsx

@@ -12,7 +12,7 @@ export function Statuspage() {
   return (
     <SectionCard title="Statuspage" subtitle="Statusseite und Service-Liste verwalten">
       <div className="grid gap-5 xl:grid-cols-[420px_1fr]">
-        <Card className="border border-default-100 bg-default-50/20">
+        <Card>
           <CardHeader className="px-5 pt-5 pb-0">
             <h3 className="text-base font-semibold">Konfiguration</h3>
           </CardHeader>
@@ -24,7 +24,7 @@ export function Statuspage() {
             <TextField>
               <Label>Channel ID</Label>
               <Input
-                placeholder="Channel f<EFBFBD>r Status-Updates"
+                placeholder="Channel für Status-Updates"
                 value={statusDraft?.channelId || ''}
                 onChange={(e) => setStatusDraft((s) => ({ ...(s || {}), channelId: e.target.value }))}
               />
@@ -39,39 +39,39 @@ export function Statuspage() {
               />
             </TextField>
 
-            <Button color="primary" startContent={<Save size={16} />} onPress={saveStatuspage}>
-              Statuspage speichern
+            <Button variant="primary" onPress={saveStatuspage}>
+              <Save size={16} /> Statuspage speichern
             </Button>
           </CardContent>
         </Card>
 
-        <Card className="border border-default-100 bg-default-50/20">
+        <Card>
           <CardHeader className="px-5 pt-5 pb-0">
             <h3 className="text-base font-semibold">Services ({services.length})</h3>
           </CardHeader>
           <CardContent className="flex flex-col gap-3 p-5">
             {services.length ? services.map((service) => (
-              <div key={service.id} className="flex items-center justify-between rounded-xl border border-default-100 bg-default-50/30 px-4 py-3 text-small">
+              <div key={service.id} className="bg-surface-tertiary flex items-center justify-between rounded-xl px-4 py-3 text-sm">
                 <div className="flex items-center gap-3 min-w-0">
                     <div className="size-2 rounded-full shrink-0" />
                   <div className="min-w-0">
                     <span className="font-medium">{service.name || 'Service'}</span>
-                    <span className="ml-2 text-default-400 text-tiny truncate">{service.url || ''}</span>
+                    <span className="ml-2 text-muted text-xs truncate">{service.url || ''}</span>
                   </div>
                 </div>
                 <div className="flex items-center gap-2">
-                  <Chip size="sm" variant="flat" color={
+                  <Chip size="sm" variant="soft" color={
                     service.status === 'operational' ? 'success' :
                     service.status === 'degraded' ? 'warning' :
                     service.status === 'down' ? 'danger' : 'default'
                   }>{service.status || 'unknown'}</Chip>
-                  <Button isIconOnly size="sm" variant="light" color="danger" onPress={() => deleteStatusService(service.id)}>
+                  <Button isIconOnly size="sm" variant="danger-soft" onPress={() => deleteStatusService(service.id)}>
                     <Trash2 size={14} />
                   </Button>
                 </div>
               </div>
             )) : (
-              <div className="flex flex-col items-center gap-2 py-4 text-center text-tiny text-default-400">
+              <div className="flex flex-col items-center gap-2 py-4 text-center text-xs text-muted">
                 <ActivityIcon size={20} />
                 Keine Services
               </div>
@@ -80,12 +80,12 @@ export function Statuspage() {
             <Separator />
 
             <div>
-              <h4 className="text-small font-semibold mb-2">Service hinzuf<EFBFBD>gen</h4>
+              <h4 className="text-sm font-semibold mb-2">Service hinzufügen</h4>
               <div className="flex flex-col gap-2">
                 <Input placeholder="Name" value={statusServiceDraft.name} onChange={(e) => setStatusServiceDraft((s) => ({ ...s, name: e.target.value }))} />
                 <Input placeholder="URL (optional)" value={statusServiceDraft.url} onChange={(e) => setStatusServiceDraft((s) => ({ ...s, url: e.target.value }))} />
-                <Button size="sm" color="primary" startContent={<Plus size={14} />} onPress={addStatusService}>
-                  Hinzuf<EFBFBD>gen
+                <Button size="sm" variant="primary" onPress={addStatusService}>
+                  <Plus size={14} /> Hinzufügen
                 </Button>
               </div>
             </div>