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/PlanboardPage.jsx

@@ -1,45 +1,42 @@
 import { useState } from 'react'
 import { format, addDays, startOfWeek } from 'date-fns'
+import { de } from 'date-fns/locale'
+import { FaChevronLeft, FaChevronRight } from 'react-icons/fa6'
+import { PageHeader, Card, Button } from '../components/ui'
 
 export default function PlanboardPage() {
   const [currentWeek, setCurrentWeek] = useState(startOfWeek(new Date(), { weekStartsOn: 1 }))
-
   const weekDays = Array.from({ length: 7 }, (_, i) => addDays(currentWeek, i))
-
-  const navigateWeek = (direction) => {
-    setCurrentWeek(prev => addDays(prev, direction * 7))
-  }
+  const navigateWeek = (dir) => setCurrentWeek((prev) => addDays(prev, dir * 7))
 
   return (
-    <div className="main-content">
-      <header className="text-center mb-2">
-        <h2>Planboard</h2>
-      </header>
-
-      <div className="planboard-nav text-center mb-2">
-        <button className="btn btn-dark" onClick={() => navigateWeek(-1)}>← Previous Week</button>
-        <span className="mx-2">
-          {format(currentWeek, 'dd.MM.yyyy')} - {format(addDays(currentWeek, 6), 'dd.MM.yyyy')}
-        </span>
-        <button className="btn btn-dark" onClick={() => navigateWeek(1)}>Next Week →</button>
-      </div>
-
-      <div className="planboard-grid">
-        {weekDays.map(day => (
-          <div key={day.toISOString()} className="planboard-day">
-            <div className="day-header">
-              <strong>{format(day, 'EEEE')}</strong>
-              <span>{format(day, 'dd.MM')}</span>
-            </div>
-            <div className="day-content">
-              <p className="text-grey text-small">No tasks scheduled</p>
-            </div>
+    <div className="page">
+      <PageHeader
+        title="Planboard"
+        subtitle="Wochenplanung"
+        actions={
+          <div className="flex gap-2 items-center">
+            <Button variant="ghost" onClick={() => navigateWeek(-1)}><FaChevronLeft /></Button>
+            <span className="muted" style={{ minWidth: 200, textAlign: 'center' }}>
+              {format(currentWeek, 'dd.MM.yyyy')} - {format(addDays(currentWeek, 6), 'dd.MM.yyyy')}
+            </span>
+            <Button variant="ghost" onClick={() => navigateWeek(1)}><FaChevronRight /></Button>
           </div>
-        ))}
-      </div>
+        }
+      />
 
-      <div className="text-center mt-4 text-grey">
-        <p>Drag and drop tickets to schedule them on the planboard.</p>
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 12 }}>
+        {weekDays.map((day) => (
+          <Card key={day.toISOString()} pad={false}>
+            <div style={{ padding: '10px 12px', borderBottom: '1px solid var(--border)', display: 'flex', flexDirection: 'column' }}>
+              <strong style={{ fontSize: 13 }}>{format(day, 'EEEE', { locale: de })}</strong>
+              <span className="faint" style={{ fontSize: 12 }}>{format(day, 'dd.MM')}</span>
+            </div>
+            <div style={{ padding: 12, minHeight: 120 }}>
+              <p className="faint" style={{ fontSize: 12 }}>Keine Termine</p>
+            </div>
+          </Card>
+        ))}
       </div>
     </div>
   )