Abo-Status und Protokoll ohne Karten und Icons, neuer Grundstil fuer admin-areas.css

Protokoll als Tabelle (Zeit, Mitarbeiter, Aktion) statt Liste mit festen Mindestbreiten, damit bei 390 px nichts mitten im Wort bricht. Abo-Status als dl.kv, Fehler als .msg.err. admin-areas.css: Haarlinien statt Kaesten, Kopfzeilen ohne Grossbuchstaben, Links ohne eigene Regel, Responsive-Bloecke am Dateiende.

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

src/components/customer/AboStatusCard.jsx

@@ -1,10 +1,8 @@
 import { useEffect, useState } from 'react'
-import { FaSpinner } from 'react-icons/fa6'
 import { Card, Badge } from '../ui'
 import { getCustomerAboStatus } from '../../lib/teamApi'
 import { fmtDate, productLabelOf } from '../../lib/format'
 import { storageLabel } from '../../lib/storageFormat'
-import '../../styles/admin-areas.css'
 
 // Abo-Status eines Kunden (Reiter "Abo & Angebote"): Appwrite-Spiegel des Stripe-Abos, fuer alle Mitarbeiter
 export default function AboStatusCard({ customerId }) {
@@ -23,13 +21,13 @@ export default function AboStatusCard({ customerId }) {
 
   return (
     <Card title="Abo">
-      {error && <div className="area-error">{error}</div>}
-      {!abo && !error && <FaSpinner className="spinner" />}
-      {abo && !abo.status && <span className="area-muted">kein Abo</span>}
+      {error && <div className="msg err" role="alert">{error}</div>}
+      {!abo && !error && <div className="loading">Wird geladen …</div>}
+      {abo && !abo.status && <p className="muted">kein Abo</p>}
       {abo && abo.status && (
-        <dl className="area-kv">
+        <dl className="kv">
           <dt>Abo</dt>
-          <dd className="area-inline">
+          <dd className="flex items-center gap-2 wrap">
             {productLabelOf(abo.productKey)}
             <Badge tone={abo.active ? 'ok' : 'danger'}>{abo.active ? 'aktiv' : abo.status}</Badge>
           </dd>