feat(ui): klickbarer Prototyp mit Beispieldaten (#002)

Layout im AdminLTE-Stil (Sidebar, Kopfleiste, Inhaltskopf, Footer), Logo als
SVG-Komponente, Farbschema mit Dark-Mode, Dashboard, Kunden- und Host-Ansichten,
Rechnungsuebersicht, Jahresbahn und globale Suche (Strg+K).

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

src/app/(dashboard)/einstellungen/benachrichtigungen/page.tsx

@@ -0,0 +1,24 @@
+import { ContentHeader } from "@/components/layout/ContentHeader";
+import { Card } from "@/components/ui/Card";
+
+export const metadata = { title: "Benachrichtigungen" };
+
+export default function BenachrichtigungenSeite() {
+  return (
+    <>
+      <ContentHeader
+        titel="Benachrichtigungen"
+        brotkrumen={[{ titel: "Einstellungen" }, { titel: "Benachrichtigungen" }]}
+      />
+      <div className="app-content">
+        <div className="container-fluid">
+          <Card titel="E-Mail und Webhook" rahmen="primary">
+            <p className="text-body-secondary mb-0">
+              SMTP (Microsoft 365), Webhooks und die tägliche Zusammenfassung werden in #012 umgesetzt.
+            </p>
+          </Card>
+        </div>
+      </div>
+    </>
+  );
+}

src/app/(dashboard)/einstellungen/system/page.tsx

@@ -0,0 +1,27 @@
+import { ContentHeader } from "@/components/layout/ContentHeader";
+import { Card } from "@/components/ui/Card";
+import { APP_VERSION } from "@/lib/version";
+
+export const metadata = { title: "System" };
+
+export default function SystemSeite() {
+  return (
+    <>
+      <ContentHeader titel="System" brotkrumen={[{ titel: "Einstellungen" }, { titel: "System" }]} />
+      <div className="app-content">
+        <div className="container-fluid">
+          <Card titel="Systeminformationen" rahmen="primary">
+            <dl className="row mb-0">
+              <dt className="col-4 fw-normal text-body-secondary">Version</dt>
+              <dd className="col-8">{APP_VERSION}</dd>
+              <dt className="col-4 fw-normal text-body-secondary">Datenquelle</dt>
+              <dd className="col-8">Beispieldaten (Prototyp, #002)</dd>
+              <dt className="col-4 fw-normal text-body-secondary">Warnregeln</dt>
+              <dd className="col-8">Konfigurierbar ab #011</dd>
+            </dl>
+          </Card>
+        </div>
+      </div>
+    </>
+  );
+}

src/app/(dashboard)/einstellungen/tokens/page.tsx

@@ -0,0 +1,37 @@
+import { ContentHeader } from "@/components/layout/ContentHeader";
+import { Card } from "@/components/ui/Card";
+import { CopyableCode } from "@/components/ui/CopyableCode";
+
+export const metadata = { title: "Agent-Tokens" };
+
+export default function TokensSeite() {
+  return (
+    <>
+      <ContentHeader
+        titel="Agent-Tokens"
+        brotkrumen={[{ titel: "Einstellungen" }, { titel: "Agent-Tokens" }]}
+      />
+      <div className="app-content">
+        <div className="container-fluid">
+          <Card titel="Agent installieren" rahmen="primary">
+            <p>
+              Auf dem Proxmox-Host als root ausführen. Der Enrollment-Token gilt bis zum angegebenen Datum und
+              kann mehrfach verwendet werden.
+            </p>
+            <pre className="bg-body-secondary p-3 rounded">
+              <code className="pl-mono">
+                curl -fsSL https://proxledger.example.de/install.sh | bash -s -- --token plx_e_BEISPIEL
+              </code>
+            </pre>
+            <CopyableCode wert="plx_e_BEISPIEL" />
+          </Card>
+          <Card titel="Vorhandene Tokens" rahmen="info">
+            <p className="text-body-secondary mb-0">
+              Ausgabe, Ablauf und Widerruf von Enrollment- und Host-Tokens folgen in #006.
+            </p>
+          </Card>
+        </div>
+      </div>
+    </>
+  );
+}