design(verwaltung): Einstellungen und Verwaltung aufgeraeumt

Gemeinsame Navigation fuer Einstellungen und Verwaltung (Verwaltung in
Benutzer und Zugang / Module / Anbindungen gegliedert), einheitlicher
Seitenkopf und Abschnittskarten, Speichern in der Kartenfusszeile.
Menuepunkt 'Administrator' heisst 'Verwaltung'; Seitentitel gleich den
Navigationseintraegen. Kein 'Zurueck zum Dashboard' mehr. Tabellen ohne
waagerechte Seitenscrollleiste; auf dem Handy Auswahlliste statt Liste.

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

apps/web/src/app/(portal)/settings/dashboard/calendar/page.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useTranslations } from 'next-intl';
+import { PageHeader } from '@/components/control-center/page-header';
 import { CalendarSettingsPanel } from '@/components/settings/calendar-settings-panel';
 
 /**
@@ -9,12 +10,11 @@ import { CalendarSettingsPanel } from '@/components/settings/calendar-settings-p
  */
 export default function CalendarSettingsPage() {
   const t = useTranslations('settings');
+  const tCc = useTranslations('controlCenter');
 
   return (
     <div>
-      <h1 className="mb-6 text-lg font-semibold text-foreground">
-        {t('categoryCalendar')}
-      </h1>
+      <PageHeader title={t('categoryCalendar')} description={tCc('descriptions.calendar')} />
       <CalendarSettingsPanel />
     </div>
   );

apps/web/src/app/(portal)/settings/dashboard/page.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useState } from 'react';
 import { useTranslations } from 'next-intl';
+import { PageHeader } from '@/components/control-center/page-header';
 import { WidgetSettingsPanel } from '@/components/settings/widget-settings-panel';
 import { fetchDashboards, fetchWidgets } from '@/lib/dashboard-api';
 
@@ -20,6 +21,7 @@ import { fetchDashboards, fetchWidgets } from '@/lib/dashboard-api';
  */
 export default function WidgetSettingsPage() {
   const t = useTranslations('settings');
+  const tCc = useTranslations('controlCenter');
   const tCommon = useTranslations('common');
   const [widgets, setWidgets] = useState<
     Array<{ id: string; widgetType: string; config: Record<string, unknown> }>
@@ -42,9 +44,7 @@ export default function WidgetSettingsPage() {
 
   return (
     <div>
-      <h1 className="mb-6 text-lg font-semibold text-foreground">
-        {t('categoryWidgets')}
-      </h1>
+      <PageHeader title={t('categoryWidgets')} description={tCc('descriptions.widgets')} />
 
       {isLoading ? (
         <p className="text-sm text-muted-foreground">{tCommon('loading')}</p>

apps/web/src/app/(portal)/settings/general/account/page.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useTranslations } from 'next-intl';
+import { PageHeader } from '@/components/control-center/page-header';
 import { AccountSettingsForm } from '@/components/settings/account-settings-form';
 
 /**
@@ -9,12 +10,11 @@ import { AccountSettingsForm } from '@/components/settings/account-settings-form
  */
 export default function AccountSettingsPage() {
   const t = useTranslations('settings');
+  const tCc = useTranslations('controlCenter');
 
   return (
     <div>
-      <h1 className="mb-6 text-lg font-semibold text-foreground">
-        {t('account.title')}
-      </h1>
+      <PageHeader title={t('account.title')} description={tCc('descriptions.account')} />
       <AccountSettingsForm />
     </div>
   );

apps/web/src/app/(portal)/settings/general/desktop/page.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useTranslations } from 'next-intl';
+import { PageHeader } from '@/components/control-center/page-header';
 import { DesktopAppSettings } from '@/components/settings/desktop-app-settings';
 
 /**
@@ -9,12 +10,11 @@ import { DesktopAppSettings } from '@/components/settings/desktop-app-settings';
  */
 export default function DesktopSettingsPage() {
   const t = useTranslations('settings');
+  const tCc = useTranslations('controlCenter');
 
   return (
     <div>
-      <h1 className="mb-6 text-lg font-semibold text-foreground">
-        {t('desktop.title')}
-      </h1>
+      <PageHeader title={t('desktop.title')} description={tCc('descriptions.desktop')} />
       <DesktopAppSettings />
     </div>
   );

apps/web/src/app/(portal)/settings/layout.tsx

@@ -1,48 +1,9 @@
-'use client';
-
-import Link from 'next/link';
-import { useTranslations } from 'next-intl';
-import { SettingsSidebar } from '@/components/settings/settings-sidebar';
+import { ControlCenterLayout } from '@/components/control-center/control-center-layout';
 
 /**
- * Settings nested layout (D-19, D-20).
- * Renders within the portal AppShell, adding its own sub-sidebar on the left.
- * Back-to-dashboard link at top of content area per UI-SPEC.
+ * Einstellungen und Verwaltung teilen sich einen Rahmen mit einer
+ * gemeinsamen Navigation (siehe ControlCenterLayout).
  */
-export default function SettingsLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  const t = useTranslations('settings');
-
-  return (
-    <div className="flex h-full flex-col md:flex-row">
-      <SettingsSidebar />
-      <div className="min-w-0 flex-1 overflow-y-auto p-3 sm:p-6">
-        {/* Back to Dashboard link */}
-        <Link
-          href="/"
-          className="mb-4 inline-flex items-center gap-1 text-sm text-muted-foreground transition-colors hover:text-foreground"
-        >
-          <svg
-            aria-hidden="true"
-            xmlns="http://www.w3.org/2000/svg"
-            width="16"
-            height="16"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          >
-            <polyline points="15 18 9 12 15 6" />
-          </svg>
-          {t('backToDashboard')}
-        </Link>
-        {children}
-      </div>
-    </div>
-  );
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return <ControlCenterLayout>{children}</ControlCenterLayout>;
 }

apps/web/src/app/(portal)/settings/page.tsx

@@ -1,8 +1,8 @@
 import { redirect } from 'next/navigation';
 
 /**
- * Settings index page — redirects to /settings/dashboard (the default category).
+ * Settings index page — leitet auf Konto um (erster Eintrag der Navigation).
  */
 export default function SettingsPage() {
-  redirect('/settings/dashboard');
+  redirect('/settings/general/account');
 }