style(web): Seiten auf Mosaik-Muster umgestellt

Einheitliche Seitenkoepfe mit Modul-Kachel, Knopf- und Linkklassen
statt gelber Schrift, Karten ohne harte Rahmen, Tabellenkoepfe ohne
Grossbuchstaben, Marktplatz mit Fluent-Reitern, Filterpillen und
Kachel-Karten, Einstellungs-/Verwaltungsnavigation mit Auswahlpille,
leere Zustaende mit Symbol im Kreis, Proxmox ohne leuchtende Schatten.

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

apps/web/src/app/(portal)/modules/proxmox/page.tsx

@@ -3,6 +3,7 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslations } from 'next-intl';
 import Link from 'next/link';
+import { PageHeader } from '@/components/layout/page-header';
 import { useAuthStore } from '@/lib/stores/auth-store';
 import { listServers, pollServer, type ProxmoxServer } from '@/lib/proxmox-api';
 import { HealthBar } from '@/components/proxmox/HealthBar';
@@ -36,7 +37,7 @@ function RefreshIcon({ spinning }: { spinning: boolean }) {
 
 function SkeletonCard() {
   return (
-    <div className="rounded-xl border border-border bg-card p-4 pl-5 shadow-[0_1px_2px_oklch(0_0_0/0.06)]">
+    <div className="rounded-xl bg-card p-4 pl-5 shadow-sm dark:border dark:border-border">
       <div className="flex items-start gap-3">
         <div className="h-8 w-8 rounded-lg bg-muted" />
         <div className="flex-1 space-y-2">
@@ -106,33 +107,31 @@ export default function ProxmoxPage() {
 
   return (
     <div className="mx-auto max-w-5xl space-y-6 p-3 sm:p-6">
-      <div className="flex flex-wrap items-start justify-between gap-4">
-        <div className="min-w-0">
-          <h1 className="text-2xl font-semibold tracking-tight">{t('title')}</h1>
-          <p className="mt-1 text-sm text-muted-foreground">{t('description')}</p>
-        </div>
-        {isAdmin && (
-          <div className="flex items-center gap-4">
-            <Link
-              href="/modules/proxmox/settings"
-              className="text-sm text-muted-foreground transition-colors hover:text-foreground"
-            >
-              {t('card.settingsNav')}
-            </Link>
-            {servers !== null && servers.length > 0 && (
-              <button
-                type="button"
-                onClick={handleRefresh}
-                disabled={isRefreshing}
-                className="inline-flex h-9 items-center gap-2 rounded-lg bg-primary px-3.5 text-sm font-medium text-primary-foreground shadow-sm transition-opacity hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-70"
-              >
-                <RefreshIcon spinning={isRefreshing} />
-                {isRefreshing ? t('card.refreshing') : t('card.refresh')}
-              </button>
-            )}
-          </div>
-        )}
-      </div>
+      <PageHeader
+        moduleSlug="proxmox"
+        title={t('title')}
+        description={t('description')}
+        actions={
+          isAdmin ? (
+            <>
+              <Link href="/modules/proxmox/settings" className="btn btn-subtle">
+                {t('card.settingsNav')}
+              </Link>
+              {servers !== null && servers.length > 0 && (
+                <button
+                  type="button"
+                  onClick={handleRefresh}
+                  disabled={isRefreshing}
+                  className="btn btn-primary"
+                >
+                  <RefreshIcon spinning={isRefreshing} />
+                  {isRefreshing ? t('card.refreshing') : t('card.refresh')}
+                </button>
+              )}
+            </>
+          ) : undefined
+        }
+      />
 
       {error && (
         <p className="rounded-lg border-l-4 border-status-down bg-status-down/8 px-4 py-3 text-sm text-foreground">