Design: UI-Bausteine rendern die neuen Klassen (Button, Badge, Card, Kopf, Reiter, Stat)

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

src/components/ui/StatusPill.jsx

@@ -1,21 +1,12 @@
-import { statusLabel, statusClass, isUrgent } from '../../lib/ticketStatus'
-
-const pillBase = {
-  display: 'inline-flex',
-  alignItems: 'center',
-  gap: 6,
-  padding: '3px 10px',
-  borderRadius: 999,
-  fontSize: 12,
-  fontWeight: 700,
-}
+import { statusLabel, statusTone, isUrgent } from '../../lib/ticketStatus'
 
 export function StatusPill({ status }) {
-  return <span className={statusClass(status)} style={pillBase}>{statusLabel(status)}</span>
+  const tone = statusTone(status)
+  return <span className={tone ? `badge ${tone}` : 'badge'}>{statusLabel(status)}</span>
 }
 
 // Nur dringende Tickets bekommen ein Abzeichen
 export function UrgentPill({ priority }) {
   if (!isUrgent(priority)) return null
-  return <span className="priority-critical" style={pillBase}>Dringend</span>
+  return <span className="badge red">Dringend</span>
 }