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/layout.tsx

@@ -1,17 +1,39 @@
-import type { Metadata } from "next";
+import type { Metadata, Viewport } from "next";
+import { Source_Sans_3 } from "next/font/google";
 import "admin-lte/dist/css/adminlte.css";
 import "bootstrap-icons/font/bootstrap-icons.css";
 import "./globals.css";
 
+const sourceSans = Source_Sans_3({
+  subsets: ["latin"],
+  weight: ["300", "400", "600", "700"],
+  display: "swap",
+});
+
 export const metadata: Metadata = {
-  title: "ProxLedger",
-  description: "Proxmox Subscription Dashboard",
+  title: { default: "ProxLedger", template: "%s · ProxLedger" },
+  description: "Dashboard für den Subscription-Status aller Proxmox-Hosts",
 };
 
+export const viewport: Viewport = {
+  width: "device-width",
+  initialScale: 1,
+  themeColor: "#1E2A44",
+};
+
+/**
+ * Setzt das gespeicherte Farbschema, bevor der Browser zeichnet
+ * (verhindert Aufblitzen des hellen Designs).
+ */
+const THEMA_SKRIPT = `(function(){try{var t=localStorage.getItem("pl-theme");if(!t){t=window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light";}document.documentElement.dataset.bsTheme=t;}catch(e){document.documentElement.dataset.bsTheme="light";}})();`;
+
 export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
   return (
-    <html lang="de">
-      <body>{children}</body>
+    <html lang="de" data-bs-theme="light" suppressHydrationWarning>
+      <head>
+        <script dangerouslySetInnerHTML={{ __html: THEMA_SKRIPT }} />
+      </head>
+      <body className={`${sourceSans.className} layout-fixed sidebar-expand-lg`}>{children}</body>
     </html>
   );
 }