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>
2026-09-25 14:49:01 +02:00
parent 219038b3ee
commit 30e4bc3a4f
75 changed files with 571 additions and 521 deletions
@@ -38,16 +38,16 @@ export function ModuleShell({ category, moduleSlug }: ModuleShellProps) {
    return (
      <div className="mx-auto max-w-2xl space-y-6 p-6">
        <div className="flex flex-col items-center justify-center py-16 text-center">
-          <div className="rounded-lg bg-muted p-4 mb-4">
+          <div className="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-muted">
            <svg
              aria-hidden="true"
              xmlns="http://www.w3.org/2000/svg"
-              width="48"
-              height="48"
+              width="28"
+              height="28"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
-              strokeWidth="1.5"
+              strokeWidth="1.75"
              strokeLinecap="round"
              strokeLinejoin="round"
              className="text-muted-foreground"
@@ -57,13 +57,13 @@ export function ModuleShell({ category, moduleSlug }: ModuleShellProps) {
              <path d="m9 9 6 6" />
            </svg>
          </div>
-          <h2 className="text-xl font-semibold mb-2">{t('notFound')}</h2>
+          <h2 className="mb-1 text-base font-semibold">{t('notFound')}</h2>
          <p className="text-sm text-muted-foreground mb-6">
            {t('notFoundDescription')}
          </p>
          <Link
            href={`/modules/${category}`}
-            className="text-sm font-medium text-primary hover:underline"
+            className="btn btn-secondary"
          >
            {t('backToCategory')}
          </Link>
@@ -1,6 +1,7 @@
 'use client';

 import { useTranslations } from 'next-intl';
+import { ModuleTile } from '@/components/modules/module-tile';
 import Link from 'next/link';

 /**
@@ -14,54 +15,6 @@ export interface ModuleCardProps {
  category: string;
 }

-/**
- * Default icon mapping for known module icons.
- * Renders inline SVG to avoid external icon library dependency.
- */
-function ModuleIcon({ icon }: { icon?: string }) {
-  // Globe icon for domain-related modules
-  if (icon === 'Globe') {
-    return (
-      <svg
-        aria-hidden="true"
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        className="text-primary"
-      >
-        <circle cx="12" cy="12" r="10" />
-        <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" />
-        <path d="M2 12h20" />
-      </svg>
-    );
-  }
-
-  // Default puzzle-piece icon for generic modules
-  return (
-    <svg
-      aria-hidden="true"
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      className="text-primary"
-    >
-      <path d="M19.439 7.85c-.049.322.059.648.289.878l1.568 1.568c.47.47.706 1.087.706 1.704s-.235 1.233-.706 1.704l-1.611 1.611a.98.98 0 0 1-.837.276c-.47-.07-.802-.48-.968-.925a2.501 2.501 0 1 0-3.214 3.214c.446.166.855.497.925.968a.979.979 0 0 1-.276.837l-1.61 1.61a2.404 2.404 0 0 1-1.705.707 2.402 2.402 0 0 1-1.704-.706l-1.568-1.568a1.026 1.026 0 0 0-.877-.29c-.493.074-.84.504-1.02.968a2.5 2.5 0 1 1-3.237-3.237c.464-.18.894-.527.967-1.02a1.026 1.026 0 0 0-.289-.877l-1.568-1.568A2.402 2.402 0 0 1 1.998 12c0-.617.236-1.234.706-1.704L4.315 8.685a.98.98 0 0 1 .837-.276c.47.07.802.48.968.925a2.501 2.501 0 1 0 3.214-3.214c-.446-.166-.855-.497-.925-.968a.979.979 0 0 1 .276-.837l1.61-1.61a2.404 2.404 0 0 1 1.705-.707c.617 0 1.234.236 1.704.706l1.568 1.568c.23.23.556.338.877.29.493-.074.84-.504 1.02-.968a2.5 2.5 0 1 1 3.237 3.237c-.464.18-.894.527-.967 1.02Z" />
-    </svg>
-  );
-}
-
 /**
 * Module card for the category grid view.
 *
@@ -69,7 +22,7 @@ function ModuleIcon({ icon }: { icon?: string }) {
 * to the expanded module view. Per D-05a: uniform card appearance,
 * compact, looks good even with a single module.
 */
-export function ModuleCard({ name, slug, description, icon, category }: ModuleCardProps) {
+export function ModuleCard({ name, slug, description, category }: ModuleCardProps) {
  const t = useTranslations('modules');
  const locale = (typeof window !== 'undefined' && document.documentElement.lang) || 'de';
  const localizedDescription = description[locale] || description.en || description.de || '';
@@ -79,14 +32,12 @@ export function ModuleCard({ name, slug, description, icon, category }: ModuleCa
      href={`/modules/${category}/${slug}`}
      className="group block"
    >
-      <div className="rounded-lg border border-border bg-card p-5 shadow-sm transition-all hover:shadow-md hover:border-primary/30 group-focus-visible:ring-2 group-focus-visible:ring-ring group-focus-visible:ring-offset-2">
+      <div className="rounded-lg bg-card p-4 shadow-sm transition-shadow hover:shadow-md dark:border dark:border-border group-focus-visible:ring-2 group-focus-visible:ring-ring group-focus-visible:ring-offset-2">
        {/* Header: icon + name */}
        <div className="flex items-start gap-3 mb-3">
-          <div className="rounded-md bg-muted p-2.5 shrink-0">
-            <ModuleIcon icon={icon} />
-          </div>
+          <ModuleTile slug={slug} size={40} />
          <div className="min-w-0">
-            <h3 className="font-semibold text-base leading-tight truncate">
+            <h3 className="truncate pt-2 text-base font-semibold leading-snug">
              {name}
            </h3>
          </div>
@@ -99,7 +50,7 @@ export function ModuleCard({ name, slug, description, icon, category }: ModuleCa

        {/* Footer: open link */}
        <div className="flex justify-end">
-          <span className="text-sm font-medium text-primary group-hover:underline">
+          <span className="text-sm font-medium text-link group-hover:underline">
            {t('openModule')}
          </span>
        </div>
@@ -95,7 +95,7 @@ export default function CategoryPage() {
    <div className="space-y-6 p-6">
      {/* Header */}
      <div>
-        <h1 className="text-2xl font-bold tracking-tight">
+        <h1 className="text-2xl font-semibold tracking-tight">
          {t('categoryTitle', { category: categoryTitle })}
        </h1>
      </div>
@@ -76,7 +76,7 @@ export function ConvertTab({ file, pemText, password, onTargetFormatChange }: Co
        type="button"
        onClick={handleConvert}
        disabled={loading || !canConvert}
-        className="bg-primary text-primary-foreground px-4 py-2 rounded text-sm font-medium disabled:opacity-50 hover:opacity-90 transition-opacity"
+        className="btn btn-primary"
      >
        {loading ? t('actions.processing') : t('actions.convert')}
      </button>
@@ -46,7 +46,7 @@ export function InspectTab({ file, pemText, password }: InspectTabProps) {
        type="button"
        onClick={handleInspect}
        disabled={loading || !canInspect}
-        className="bg-primary text-primary-foreground px-4 py-2 rounded text-sm font-medium disabled:opacity-50 hover:opacity-90 transition-opacity"
+        className="btn btn-primary"
      >
        {loading ? t('actions.processing') : t('actions.inspect')}
      </button>
@@ -139,7 +139,7 @@ export function MergeTab({ password, onOutputFormatChange }: MergeTabProps) {
        data-testid="merge-action-btn"
        onClick={handleMerge}
        disabled={loading || !canMerge}
-        className="bg-primary text-primary-foreground px-4 py-2 rounded text-sm font-medium disabled:opacity-50 hover:opacity-90 transition-opacity"
+        className="btn btn-primary"
      >
        {loading ? t('actions.processing') : t('actions.merge')}
      </button>
@@ -82,7 +82,7 @@ export function SplitTab({ file, pemText: _pemText, password: _password }: Split
          type="button"
          onClick={handleSplit}
          disabled={loading || !file}
-          className="bg-primary text-primary-foreground px-4 py-2 rounded text-sm font-medium disabled:opacity-50 hover:opacity-90 transition-opacity"
+          className="btn btn-primary"
        >
          {loading ? t('actions.processing') : t('actions.split')}
        </button>
@@ -1,5 +1,6 @@
 'use client';

+import { PageHeader } from '@/components/layout/page-header';
 import { useTranslations } from 'next-intl';
 import { useState } from 'react';
 import { DropZone } from './components/DropZone';
@@ -98,15 +99,11 @@ export default function CertManagerPage() {
  };

  return (
-    <div className="mx-auto max-w-4xl space-y-6 p-6">
-      {/* Header */}
-      <div>
-        <h1 className="text-2xl font-bold tracking-tight">{t('title')}</h1>
-        <p className="mt-1 text-sm text-muted-foreground">{t('description')}</p>
-      </div>
+    <div className="mx-auto max-w-4xl space-y-6 p-3 sm:p-6">
+      <PageHeader moduleSlug="cert-manager" title={t('title')} description={t('description')} />

      {/* Shared input card */}
-      <div className="rounded-lg border border-border bg-card p-6 shadow-sm space-y-4">
+      <div className="rounded-lg bg-card dark:border dark:border-border p-6 shadow-sm space-y-4">
        {/* DropZone */}
        <DropZone
          onFile={handleFile}
@@ -148,7 +145,7 @@ export default function CertManagerPage() {
            onClick={() => handleTabChange(tab)}
            className={`pb-2 text-sm font-medium transition-colors ${
              activeTab === tab
-                ? 'border-b-2 border-primary text-foreground'
+                ? 'border-b-2 border-primary-strong font-semibold text-foreground'
                : 'text-muted-foreground hover:text-foreground'
            }`}
          >
@@ -158,7 +155,7 @@ export default function CertManagerPage() {
      </nav>

      {/* Tab content card */}
-      <div className="rounded-lg border border-border bg-card p-6 shadow-sm">
+      <div className="rounded-lg bg-card dark:border dark:border-border p-6 shadow-sm">
        {renderActiveTab()}
      </div>
    </div>
@@ -61,7 +61,7 @@ export function ExportFileList({ historyItems }: ExportFileListProps) {
          <a
            href={exportFileUrl(filename)}
            download
-            className="text-sm text-primary hover:underline"
+            className="text-sm link"
          >
            {filename}
          </a>
@@ -89,7 +89,7 @@ export function InvoiceHistoryTable({
  const totalPages = Math.ceil(total / 25);

  const theadCls =
-    'px-4 py-3 text-xs font-semibold uppercase tracking-wider text-muted-foreground border-b border-border text-left';
+    'px-4 py-3 text-xs font-semibold text-muted-foreground border-b border-border text-left';

  return (
    <div className="rounded border border-border overflow-hidden">
@@ -170,7 +170,7 @@ export function InvoiceHistoryTable({
                    <a
                      href={exportFileUrl(row.exportFilename)}
                      download
-                      className="inline-flex items-center gap-1 text-primary text-sm hover:underline"
+                      className="inline-flex items-center gap-1 link text-sm"
                    >
                      <DownloadIcon />
                      {row.exportFilename}
@@ -4,6 +4,7 @@ import { useCallback, useState } from 'react';
 import { useTranslations } from 'next-intl';
 import { useParams } from 'next/navigation';
 import Link from 'next/link';
+import { PageHeader } from '@/components/layout/page-header';
 import { checkNow, type DkvHistoryEntry } from '@/lib/dkv-api';
 import { InvoiceHistoryTable } from './components/InvoiceHistoryTable';
 import { ExportFileList } from './components/ExportFileList';
@@ -75,51 +76,47 @@ export default function DkvFleetPage() {
  };

  return (
-    <div className="mx-auto max-w-5xl space-y-6 p-6">
-      {/* Page Header Row */}
-      <div className="flex items-start justify-between gap-4">
-        <div>
-          <h1 className="text-2xl font-semibold tracking-tight">
-            {t('pageTitle')}
-          </h1>
-          <p className="mt-1 text-sm text-muted-foreground">
-            {lastChecked
-              ? t('lastChecked', { time: formatLastChecked(lastChecked) })
-              : t('neverChecked')}
-          </p>
-        </div>
-
-        {/* Einstellungen-Link */}
-        <Link
-          href={`${basePath}/settings`}
-          className="rounded border border-border px-3 py-2 text-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
-          title={t('settingsTitle')}
-        >
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+    <div className="mx-auto max-w-5xl space-y-6 p-3 sm:p-6">
+      {/* Seitenkopf (Design „Mosaik“): App-Kachel, Titel, Stand; Aktionen rechts */}
+      <PageHeader
+        moduleSlug="dkv-fleet"
+        title={t('pageTitle')}
+        description={
+          lastChecked
+            ? t('lastChecked', { time: formatLastChecked(lastChecked) })
+            : t('neverChecked')
+        }
+        actions={
+          <>
+            <Link
+              href={`${basePath}/settings`}
+              className="btn btn-secondary btn-icon"
+              title={t('settingsTitle')}
+              aria-label={t('settingsTitle')}
+            >
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
            <circle cx="12" cy="12" r="3" />
            <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
          </svg>
-        </Link>
-
-        {/* "Jetzt prüfen" button per 07-UI-SPEC button states */}
-        <button
-          type="button"
-          onClick={handleCheckNow}
-          disabled={isChecking}
-          className={`rounded bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 flex items-center${
-            isChecking ? ' opacity-80 cursor-not-allowed' : ''
-          }`}
-        >
-          {isChecking ? (
-            <>
-              <SpinnerIcon />
-              {t('checking')}
-            </>
-          ) : (
-            t('checkNow')
-          )}
-        </button>
-      </div>
+            </Link>
+            <button
+              type="button"
+              onClick={handleCheckNow}
+              disabled={isChecking}
+              className="btn btn-primary"
+            >
+              {isChecking ? (
+                <>
+                  <SpinnerIcon />
+                  {t('checking')}
+                </>
+              ) : (
+                t('checkNow')
+              )}
+            </button>
+          </>
+        }
+      />

      {/* Error banner — conditional per UI-SPEC */}
      {pollError && (
@@ -103,14 +103,14 @@ export function CsvImportButton({ onImported }: CsvImportButtonProps) {
      <button
        type="button"
        onClick={handleButtonClick}
-        className="rounded border border-border px-4 py-2 text-sm text-foreground transition-colors hover:bg-muted"
+        className="btn btn-secondary"
      >
        {t('importCsv')}
      </button>

      {/* Import mode inline dialog (below button, per UI-SPEC) */}
      {showDialog && selectedFile && (
-        <div className="absolute right-0 top-10 z-30 w-80 rounded border border-border bg-card p-4 shadow-md">
+        <div className="absolute right-0 top-10 z-30 w-80 rounded bg-card dark:border dark:border-border p-4 shadow-md">
          <div className="mb-3 rounded bg-muted/50 px-3 py-2 text-xs text-muted-foreground space-y-0.5">
            <p>{t('csvFormatHelp')}</p>
            <p className="font-mono">{t('csvFormatExample')}</p>
@@ -185,7 +185,7 @@ export function CsvImportButton({ onImported }: CsvImportButtonProps) {
            <button
              type="button"
              onClick={handleCancel}
-              className="rounded border border-border px-3 py-1.5 text-sm text-foreground hover:bg-muted"
+              className="btn btn-secondary"
            >
              {t('form.cancelDialog')}
            </button>
@@ -525,7 +525,7 @@ export function InboxConfigForm() {
          type="button"
          onClick={handleTestConnection}
          disabled={isTesting || isSaving}
-          className="rounded border border-border px-4 py-2 text-sm text-foreground transition-colors hover:bg-muted disabled:opacity-50 disabled:cursor-not-allowed"
+          className="btn btn-secondary"
        >
          {isTesting ? t('form.testTesting') : t('form.testConnection')}
        </button>
@@ -533,7 +533,7 @@ export function InboxConfigForm() {
          type="button"
          onClick={handleSave}
          disabled={isSaving || isTesting}
-          className="rounded bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed"
+          className="btn btn-primary"
        >
          {t('form.save')}
        </button>
@@ -542,7 +542,7 @@ export function InboxConfigForm() {
            type="button"
            onClick={handleCheckNow}
            disabled={isChecking || isSaving || isTesting}
-            className="rounded border border-border px-4 py-2 text-sm text-foreground transition-colors hover:bg-muted disabled:opacity-50 disabled:cursor-not-allowed"
+            className="btn btn-secondary"
          >
            {isChecking ? 'Prüfe...' : 'Jetzt prüfen'}
          </button>
@@ -77,7 +77,7 @@ const vehicleToEdit = (v: DkvVehicle): EditState => ({

 // --- Shared classes ---
 const theadCls =
-  'px-3 py-3 text-xs font-semibold uppercase tracking-wider text-muted-foreground border-b border-border text-left';
+  'px-3 py-3 text-xs font-semibold text-muted-foreground border-b border-border text-left';
 const iconBtnCls =
  'p-1 rounded text-muted-foreground hover:text-foreground hover:bg-muted transition-colors';
 const editInputCls =
@@ -95,7 +95,7 @@ function DeleteDialog({ plate, isDeleting, onConfirm, onCancel }: DeleteDialogPr
  const t = useTranslations('dkvFleet');
  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
-      <div className="rounded border border-border bg-card px-6 py-5 shadow-lg max-w-sm w-full">
+      <div className="rounded bg-card dark:border dark:border-border px-6 py-5 shadow-lg max-w-sm w-full">
        <h3 className="text-base font-semibold text-foreground mb-2">
          {t('deleteVehicle')}
        </h3>
@@ -107,7 +107,7 @@ function DeleteDialog({ plate, isDeleting, onConfirm, onCancel }: DeleteDialogPr
            type="button"
            onClick={onCancel}
            disabled={isDeleting}
-            className="rounded border border-border px-4 py-2 text-sm text-foreground hover:bg-muted disabled:opacity-50 disabled:cursor-not-allowed"
+            className="btn btn-secondary"
          >
            {t('form.cancelDialog')}
          </button>
@@ -132,7 +132,7 @@ interface ToastProps {

 function Toast({ message }: ToastProps) {
  return (
-    <div className="fixed bottom-4 right-4 z-50 rounded border border-border bg-card shadow-md px-4 py-3 text-sm">
+    <div className="fixed bottom-4 right-4 z-50 rounded bg-card dark:border dark:border-border shadow-md px-4 py-3 text-sm">
      {message}
    </div>
  );
@@ -317,7 +317,7 @@ export function VehicleTable() {
            type="button"
            onClick={startAdd}
            disabled={isAddingNew}
-            className="rounded bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed"
+            className="btn btn-primary"
          >
            {t('addVehicle')}
          </button>
@@ -408,7 +408,7 @@ export function VehicleTable() {
                          aria-label={t('form.saveRow')}
                          onClick={() => saveEdit(v.id)}
                          disabled={isSavingRow}
-                          className={`${iconBtnCls} hover:text-primary`}
+                          className={`${iconBtnCls} hover:text-foreground`}
                        >
                          <CheckIcon />
                        </button>
@@ -515,7 +515,7 @@ export function VehicleTable() {
                      aria-label={t('form.saveRow')}
                      onClick={saveNew}
                      disabled={isSavingNew}
-                      className={`${iconBtnCls} hover:text-primary`}
+                      className={`${iconBtnCls} hover:text-foreground`}
                    >
                      <CheckIcon />
                    </button>
@@ -24,7 +24,7 @@ export default function DkvFleetSettingsPage() {
  const tabCls = (tab: ActiveTab) =>
    `px-4 py-2 text-sm transition-colors ${
      activeTab === tab
-        ? 'border-b-2 border-primary text-foreground font-medium'
+        ? 'border-b-2 border-primary-strong text-foreground font-semibold'
        : 'text-muted-foreground hover:text-foreground'
    }`;

@@ -33,7 +33,7 @@ export function DomainInput({ onSubmit, isLoading }: DomainInputProps) {
      <button
        type="submit"
        disabled={isLoading || !domain.trim()}
-        className="inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:opacity-90 transition-opacity disabled:pointer-events-none disabled:opacity-50"
+        className="btn btn-primary disabled:pointer-events-none"
      >
        {isLoading ? t('checking') : t('checkButton')}
      </button>
@@ -33,7 +33,7 @@ export function ResultList({ results }: ResultListProps) {

      {suggestions.length > 0 && (
        <div className="space-y-2">
-          <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
+          <p className="text-xs font-medium text-muted-foreground">
            {t('suggestions')}
          </p>
          {suggestions.map((result) => (
@@ -1,5 +1,6 @@
 'use client';

+import { PageHeader } from '@/components/layout/page-header';
 import { useTranslations } from 'next-intl';
 import { useState } from 'react';
 import { type DomainCheckResult, checkDomainAction } from './actions';
@@ -37,17 +38,11 @@ export default function DomaincheckPage() {
  };

  return (
-    <div className="mx-auto max-w-2xl space-y-6 p-6">
-      {/* Header */}
-      <div>
-        <h1 className="text-2xl font-bold tracking-tight">{t('title')}</h1>
-        <p className="text-sm text-muted-foreground mt-1">
-          {t('description')}
-        </p>
-      </div>
+    <div className="mx-auto max-w-2xl space-y-6 p-3 sm:p-6">
+      <PageHeader moduleSlug="domaincheck" title={t('title')} description={t('description')} />

      {/* Card panel (per D-05a) */}
-      <div className="rounded-lg border border-border bg-card p-6 shadow-sm space-y-4">
+      <div className="rounded-lg bg-card dark:border dark:border-border p-6 shadow-sm space-y-4">
        {/* Domain input */}
        <DomainInput onSubmit={handleSubmit} isLoading={isLoading} />

@@ -443,8 +443,8 @@ export function ServerCard({ server, isAdmin = false, now = Date.now() }: Server
      data-testid="server-card"
      data-health={health}
      aria-label={`${server.name}: ${t(`health.${health}`)}`}
-      className={`relative flex h-full flex-col overflow-hidden rounded-xl border bg-card ${
-        isOrphan ? 'border-dashed border-border' : 'border-border'
+      className={`relative flex h-full flex-col overflow-hidden rounded-lg bg-card ${
+        isOrphan ? 'border border-dashed border-border' : 'dark:border dark:border-border'
      } ${style.shadow}`}
    >
      <span aria-hidden="true" className={`absolute inset-y-0 left-0 w-1 ${style.fill}`} />
@@ -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">
@@ -179,7 +179,7 @@ export function ServerForm({ server, isAdmin, onSaved, onCancel }: ServerFormPro
  };

  return (
-    <div className="space-y-4 rounded-lg border border-border bg-card p-4 shadow-sm">
+    <div className="space-y-4 rounded-lg bg-card dark:border dark:border-border p-4 shadow-sm">
      <div>
        <label htmlFor="proxmox-name" className={labelCls}>
          {t('settings.nameLabel')}
@@ -368,7 +368,7 @@ export function ServerForm({ server, isAdmin, onSaved, onCancel }: ServerFormPro
            type="button"
            onClick={handleSave}
            disabled={isSaving || !form.name || !form.baseUrl}
-            className="rounded bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed"
+            className="btn btn-primary"
          >
            {isSaving ? t('settings.saving') : t('settings.save')}
          </button>
@@ -383,7 +383,7 @@ export function ServerForm({ server, isAdmin, onSaved, onCancel }: ServerFormPro
            type="button"
            onClick={handleTest}
            disabled={isTesting || !form.baseUrl}
-            className="rounded border border-border px-4 py-2 text-sm text-foreground hover:bg-muted disabled:opacity-50 disabled:cursor-not-allowed"
+            className="btn btn-secondary"
          >
            {isTesting ? t('settings.testTesting') : t('settings.testConnection')}
          </button>
@@ -17,7 +17,7 @@ function DeleteDialog({ name, isDeleting, onConfirm, onCancel }: DeleteDialogPro
  const t = useTranslations('proxmox');
  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
-      <div className="w-full max-w-sm rounded border border-border bg-card px-6 py-5 shadow-lg">
+      <div className="w-full max-w-sm rounded bg-card dark:border dark:border-border px-6 py-5 shadow-lg">
        <h3 className="mb-2 text-base font-semibold text-foreground">
          {t('settings.deleteConfirmTitle')}
        </h3>
@@ -29,7 +29,7 @@ function DeleteDialog({ name, isDeleting, onConfirm, onCancel }: DeleteDialogPro
            type="button"
            onClick={onCancel}
            disabled={isDeleting}
-            className="rounded border border-border px-4 py-2 text-sm text-foreground hover:bg-muted disabled:cursor-not-allowed disabled:opacity-50"
+            className="btn btn-secondary"
          >
            {t('settings.deleteCancelButton')}
          </button>
@@ -119,7 +119,7 @@ export default function ProxmoxSettingsPage() {
          <button
            type="button"
            onClick={() => setEditingId('new')}
-            className="rounded bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90"
+            className="btn btn-primary"
          >
            {t('settings.addServer')}
          </button>
@@ -155,7 +155,7 @@ export default function ProxmoxSettingsPage() {
          ) : (
            <li
              key={server.id}
-              className="flex items-center justify-between rounded-lg border border-border bg-card p-4 shadow-sm"
+              className="flex items-center justify-between rounded-lg bg-card dark:border dark:border-border p-4 shadow-sm"
            >
              <div>
                <div className="font-medium">{server.name}</div>
@@ -167,7 +167,7 @@ export default function ProxmoxSettingsPage() {
                <button
                  type="button"
                  onClick={() => setEditingId(server.id)}
-                  className="rounded border border-border px-3 py-1.5 text-sm text-foreground hover:bg-muted"
+                  className="btn btn-secondary"
                >
                  {t('settings.edit')}
                </button>
@@ -157,7 +157,7 @@ export function FilterPanel() {
  const labelCls = 'mb-1 block text-sm text-foreground';

  return (
-    <div className="rounded-lg border border-border bg-card p-4 shadow-sm space-y-4">
+    <div className="rounded-lg bg-card dark:border dark:border-border p-4 shadow-sm space-y-4">
      <div className="flex flex-wrap items-end gap-4">
        <div className="min-w-[220px] flex-1">
          <label htmlFor="tr-filter-q" className={labelCls}>
@@ -297,7 +297,7 @@ export function FilterPanel() {
            autoComplete="off"
          />
          {cpvMatches.length > 0 && (
-            <ul className="absolute z-10 mt-1 w-full max-h-56 overflow-auto rounded border border-border bg-card shadow-md">
+            <ul className="absolute z-10 mt-1 w-full max-h-56 overflow-auto rounded bg-card dark:border dark:border-border shadow-md">
              {cpvMatches.map((d) => (
                <li key={d.code}>
                  <button
@@ -65,7 +65,7 @@ export function PollNowButton({ onPolled }: PollNowButtonProps) {
        onClick={handlePoll}
        disabled={isPolling}
        title={t('page.pollNowTitle')}
-        className={`rounded bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 flex items-center${
+        className={`btn btn-primary flex items-center${
          isPolling ? ' opacity-80 cursor-not-allowed' : ''
        }`}
      >
@@ -210,7 +210,7 @@ export function ResultsList({ refreshKey = 0 }: { refreshKey?: number } = {}) {
  const totalPages = Math.max(1, Math.ceil(total / limit));

  const thStaticCls =
-    'px-4 py-3 text-xs font-semibold uppercase tracking-wider text-muted-foreground border-b border-border text-left';
+    'px-4 py-3 text-xs font-semibold text-muted-foreground border-b border-border text-left';
  const thSortCls = `${thStaticCls} cursor-pointer select-none hover:text-foreground transition-colors`;

  return (
@@ -219,7 +219,7 @@ export function SavedSearchBar() {
  };

  return (
-    <div className="rounded-lg border border-border bg-card p-4 shadow-sm space-y-3">
+    <div className="rounded-lg bg-card dark:border dark:border-border p-4 shadow-sm space-y-3">
      <h2 className="text-sm font-semibold text-foreground">{t('savedSearch.title')}</h2>

      <div className="flex flex-wrap items-end gap-2">
@@ -276,7 +276,7 @@ export function SavedSearchBar() {
                    type="button"
                    aria-label={t('savedSearch.renameConfirmAria', { name: profile.name })}
                    onClick={() => confirmRename(profile.id)}
-                    className="text-xs font-medium text-primary hover:underline"
+                    className="text-xs font-medium link"
                  >
                    {t('savedSearch.save')}
                  </button>
@@ -67,7 +67,7 @@ function formatPublished(value: string): string {
 }

 function fieldLabelCls() {
-  return 'text-xs font-semibold uppercase tracking-wider text-muted-foreground';
+  return 'text-xs font-semibold text-muted-foreground';
 }

 /**
@@ -234,7 +234,7 @@ export function TenderDetail({ tenderId, onClose }: TenderDetailProps) {
                          href={source.sourceUrl}
                          target="_blank"
                          rel="noopener noreferrer"
-                          className="inline-block text-sm font-medium text-primary underline underline-offset-2 hover:text-primary/80"
+                          className="inline-block text-sm font-medium link"
                        >
                          {t('detail.sourceLink', { portal: portalLabel(source.sourcePortal) })}
                        </a>
@@ -251,7 +251,7 @@ export function TenderDetail({ tenderId, onClose }: TenderDetailProps) {
                  href={tender.sourceUrl}
                  target="_blank"
                  rel="noopener noreferrer"
-                  className="mt-2 inline-block text-sm font-medium text-primary underline underline-offset-2 hover:text-primary/80"
+                  className="mt-2 inline-block text-sm font-medium link"
                >
                  {t('detail.sourceLinkFallback')}
                </a>
@@ -76,7 +76,7 @@ export default function TenderRadarMySourcesPage() {
        <div className="mt-8 border-t border-border pt-6">
          <Link
            href="/modules/tender-radar/settings"
-            className="text-sm text-primary hover:underline"
+            className="text-sm link"
          >
            {t('page.settingsTitle')} &rarr;
          </Link>
@@ -4,6 +4,7 @@ import { Suspense, useState } from 'react';
 import { useTranslations } from 'next-intl';
 import { useRouter, useSearchParams } from 'next/navigation';
 import Link from 'next/link';
+import { PageHeader } from '@/components/layout/page-header';
 import { CoverageBanner } from './components/CoverageBanner';
 import { FilterPanel } from './components/FilterPanel';
 import { PollNowButton } from './components/PollNowButton';
@@ -59,42 +60,41 @@ function TenderRadarContent() {
  };

  return (
-    <div className="mx-auto max-w-5xl space-y-6 p-6">
-      <div className="flex items-start justify-between gap-4">
-        <h1 className="text-2xl font-bold tracking-tight">
-          {t('page.title')}
-        </h1>
-
-        {/* Right-side cluster: settings gear + "Jetzt abrufen" trigger */}
-        <div className="flex items-center gap-2">
-          {/*
-           * Zahnrad-Link. Absolute literal href (NOT the dynamic
-           * [category]/[moduleSlug] basePath): tender-radar routes only
-           * exist as literal paths — the dynamic settings route returns
-           * "Modul nicht gefunden" for this module, so the gear must point
-           * at the literal path directly.
-           *
-           * Phase 17 Plan 03 (D-03): points at "Meine Quellen", not the
-           * admin-only settings page — that's the page every module user
-           * (not just administrators) is allowed to configure something
-           * on; administrators reach the platform-wide settings from there
-           * with one more click.
-           */}
-          <Link
-            href="/modules/tender-radar/my-sources"
-            className="rounded border border-border px-3 py-2 text-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
-            title={t('page.mySourcesTitle')}
-            aria-label={t('page.mySourcesTitle')}
-          >
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+    <div className="mx-auto max-w-5xl space-y-6 p-3 sm:p-6">
+      <PageHeader
+        moduleSlug="tender-radar"
+        title={t('page.title')}
+        actions={
+          <>
+            {/*
+             * Zahnrad-Link. Absolute literal href (NOT the dynamic
+             * [category]/[moduleSlug] basePath): tender-radar routes only
+             * exist as literal paths — the dynamic settings route returns
+             * "Modul nicht gefunden" for this module, so the gear must point
+             * at the literal path directly.
+             *
+             * Phase 17 Plan 03 (D-03): points at "Meine Quellen", not the
+             * admin-only settings page — that's the page every module user
+             * (not just administrators) is allowed to configure something
+             * on; administrators reach the platform-wide settings from there
+             * with one more click.
+             */}
+            <Link
+              href="/modules/tender-radar/my-sources"
+              className="btn btn-secondary btn-icon"
+              title={t('page.mySourcesTitle')}
+              aria-label={t('page.mySourcesTitle')}
+            >
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <circle cx="12" cy="12" r="3" />
              <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
            </svg>
-          </Link>
+            </Link>

-          <PollNowButton onPolled={() => setRefreshKey((k) => k + 1)} />
-        </div>
-      </div>
+            <PollNowButton onPolled={() => setRefreshKey((k) => k + 1)} />
+          </>
+        }
+      />

      <CoverageBanner />
      <SavedSearchBar />
@@ -449,7 +449,7 @@ export function EmailAlertConfigForm() {
          type="button"
          onClick={handleTestConnection}
          disabled={isTesting || isSaving}
-          className="rounded border border-border px-4 py-2 text-sm text-foreground transition-colors hover:bg-muted disabled:opacity-50 disabled:cursor-not-allowed"
+          className="btn btn-secondary"
        >
          {isTesting ? t('emailAlerts.testTesting') : t('emailAlerts.testConnection')}
        </button>
@@ -457,7 +457,7 @@ export function EmailAlertConfigForm() {
          type="button"
          onClick={handleSave}
          disabled={isSaving || isTesting}
-          className="rounded bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed"
+          className="btn btn-primary"
        >
          {isSaving ? t('emailAlerts.saving') : t('emailAlerts.save')}
        </button>
@@ -230,7 +230,7 @@ export function RssFeedListForm({ scope }: RssFeedListFormProps) {
          type="button"
          onClick={handleAdd}
          disabled={isAdding}
-          className="rounded bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed"
+          className="btn btn-primary"
        >
          {isAdding ? t('rssFeeds.adding') : t('rssFeeds.add')}
        </button>
@@ -216,7 +216,7 @@ export function SourceConfigForm() {
          type="button"
          onClick={handleSave}
          disabled={isSaving}
-          className="rounded bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed"
+          className="btn btn-primary"
        >
          {isSaving ? t('sourceConfig.saving') : t('sourceConfig.save')}
        </button>
@@ -71,7 +71,7 @@ export default function TenderRadarSettingsPage() {
        </p>
        <Link
          href="/modules/tender-radar/my-sources"
-          className="text-sm text-primary hover:underline"
+          className="text-sm link"
        >
          {t('mySources.title')} &rarr;
        </Link>