Kundenbereich: Abo-Karte heisst "Ihre Wartung", Status nur bei Kuendigung

- Seitenleiste: Ueberschrift "Ihre Wartung" statt "Ihr Wartungs-Abo"
- Kein "aktiv"-Label mehr; ein Status steht nur noch da, wenn gekuendigt
- Zahlungsproblem bleibt ueber den roten Hinweis sichtbar, spaeterer
  Beginn ueber die Datumszeile ("Beginn und erste Abbuchung am ...")
- Bei Kuendigung vor Leistungsbeginn keine "erste Abbuchung" mehr
- Ungenutzte Status-Styles entfernt

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

public/app.js

@@ -699,19 +699,16 @@ function renderAboSideOffer(card, data, { ended }) {
 function renderAboSideActive(card, data) {
   const sub = data.subscription
   const l = data.ledger || { balanceMinutes: 0 }
-  let status
-  if (sub.serviceStartsAt) status = `<span class="kb-status kb-status-wait">beginnt am ${fmtDateShort(sub.serviceStartsAt)}</span>`
-  else if (sub.paymentProblem) status = '<span class="kb-status kb-status-bad">Zahlung offen</span>'
-  else if (sub.cancelAtPeriodEnd) status = '<span class="kb-status kb-status-off">gekündigt</span>'
-  else status = '<span class="kb-status kb-status-ok">aktiv</span>'
-  const dateLine = sub.serviceStartsAt
-    ? `erste Abbuchung ${fmtDateShort(sub.serviceStartsAt)}`
-    : sub.cancelAtPeriodEnd
-      ? `Leistungen bis ${fmtDateShort(sub.cancelAt || sub.currentPeriodEnd)}`
+  // Status nur bei Kündigung; Zahlungsproblem (Hinweis unten) und späterer Beginn (Datumszeile) stehen im Text
+  const status = sub.cancelAtPeriodEnd ? '<span class="kb-status kb-status-off">gekündigt</span>' : ''
+  const dateLine = sub.cancelAtPeriodEnd
+    ? `Leistungen bis ${fmtDateShort(sub.cancelAt || sub.currentPeriodEnd)}`
+    : sub.serviceStartsAt
+      ? `Beginn und erste Abbuchung am ${fmtDateShort(sub.serviceStartsAt)}`
       : `nächste Abbuchung ${fmtDateShort(sub.currentPeriodEnd)}`
 
   card.innerHTML = `
-    <p class="kb-label">Ihr Wartungs-Abo</p>
+    <p class="kb-label">Ihre Wartung</p>
     ${status}
     <button type="button" class="kb-hours" data-view="abo" title="Stundenkonto und Verlauf ansehen" aria-label="${fmtHours(l.balanceMinutes)} Arbeitszeit verfügbar – Stundenkonto und Verlauf ansehen">
       <strong>${fmtHours(l.balanceMinutes)}</strong><span>Arbeitszeit verfügbar</span><em aria-hidden="true">›</em>

public/kundenbereich.css

@@ -130,9 +130,6 @@
 .kb-fine { margin: 10px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--kb-faint); }
 .kb-fine a { color: #fff; font-weight: 700; }
 .kb-status { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; }
-.kb-status-ok { color: #86efac; background: rgba(74, 222, 128, 0.1); border: 1px solid rgba(74, 222, 128, 0.4); }
-.kb-status-wait { color: #fcd34d; background: rgba(251, 191, 36, 0.1); border: 1px solid rgba(251, 191, 36, 0.4); }
-.kb-status-bad { color: #fca5a5; background: rgba(248, 113, 113, 0.1); border: 1px solid rgba(248, 113, 113, 0.45); }
 .kb-status-off { color: var(--kb-muted); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--kb-border-strong); }
 .kb-hours {
   display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin: 12px 0 2px; padding: 0; border: none;