feat: Komplett-Redesign + Ausbau zur Plattform

- Ruhiges Dark-Designsystem (Tokens, Karten, Badges/Pills, KPIs) in global.css,
  animierter PixelBlast-Hintergrund entfernt (kleineres Bundle)
- Aufgeraeumter App-Rahmen: feste Sidebar mit sichtbaren Labels, gruppierter
  Navigation, aktivem Zustand und Collapse
- Wiederverwendbare UI-Bausteine unter src/components/ui/
- Ticketliste als scanbare Karten (TicketCard) statt rowSpan-Tabelle
- Neue Bereiche: Kunden (CRM-360), Finanzen-Cockpit, Dokumente-Browser
- Dashboard als echtes Cockpit (Ticket-/Finanz-/Dokument-Kennzahlen)
- Alle Seiten auf einheitlichen PageHeader/Container/Tokens umgestellt

Co-authored-by: Cursor <cursoragent@cursor.com>

src/pages/AssetsPage.jsx

@@ -1,47 +1,40 @@
 import { useState } from 'react'
 import { FaServer, FaDesktop, FaPrint, FaNetworkWired } from 'react-icons/fa6'
+import { PageHeader, Card } from '../components/ui'
 
 export default function AssetsPage() {
   const [searchTerm, setSearchTerm] = useState('')
 
-  // Placeholder data - would come from Appwrite in production
   const assetCategories = [
-    { icon: FaServer, name: 'Servers', count: 0 },
-    { icon: FaDesktop, name: 'Workstations', count: 0 },
-    { icon: FaPrint, name: 'Printers', count: 0 },
-    { icon: FaNetworkWired, name: 'Network Devices', count: 0 }
+    { icon: FaServer, name: 'Server', count: 0 },
+    { icon: FaDesktop, name: 'Arbeitsplaetze', count: 0 },
+    { icon: FaPrint, name: 'Drucker', count: 0 },
+    { icon: FaNetworkWired, name: 'Netzwerkgeraete', count: 0 },
   ]
 
   return (
-    <div className="main-content">
-      <header className="text-center mb-2">
-        <h2>Assets Management</h2>
-      </header>
+    <div className="page">
+      <PageHeader title="Assets" subtitle="IT-Inventar und Geraete" />
 
-      <div className="search-bar mb-2">
-        <input
-          type="text"
-          placeholder="Search assets..."
-          value={searchTerm}
-          onChange={(e) => setSearchTerm(e.target.value)}
-          className="input"
-          style={{ width: '100%', maxWidth: '400px' }}
-        />
-      </div>
+      <input
+        className="form-control"
+        placeholder="Assets suchen..."
+        value={searchTerm}
+        onChange={(e) => setSearchTerm(e.target.value)}
+        style={{ maxWidth: 400, marginBottom: 16 }}
+      />
 
-      <div className="assets-grid">
+      <div className="kpi-grid">
         {assetCategories.map(({ icon: Icon, name, count }) => (
-          <div key={name} className="asset-card">
-            <Icon size={48} className="text-teal" />
-            <h4>{name}</h4>
-            <span className="asset-count">{count}</span>
+          <div key={name} className="kpi">
+            <span className="kpi-accent" />
+            <div className="kpi-label"><Icon /> {name}</div>
+            <div className="kpi-value">{count}</div>
           </div>
         ))}
       </div>
 
-      <div className="text-center mt-4 text-grey">
-        <p>Asset management module - Connect to Appwrite to manage your IT assets.</p>
-      </div>
+      <Card><p className="muted" style={{ margin: 0 }}>Asset-Modul - mit Appwrite verbinden, um IT-Assets zu verwalten.</p></Card>
     </div>
   )
 }