Wartungs-Abo (50 EUR/Monat) ueber Stripe mit Stundenkonto im Portal

- Bestellung auf der Portal-Startseite: Zusammenfassung, AGB- und
  Vorab-Leistungs-Zustimmung, Button 'Zahlungspflichtig bestellen',
  danach Stripe Checkout (Abo, Kleinunternehmer-Fusszeile)
- Stripe-Webhook /api/abo/webhook spiegelt Abos nach Appwrite
  (subscriptions) und schreibt je bezahlter Rechnung 60 min gut
  (hourCredits, idempotent ueber Invoice-ID, 12 Monate gueltig)
- Stundenkonto: FIFO-Verbrauch aus Worksheets mit countsToPlan,
  15-Minuten-Takt, Mehraufwand separat ausgewiesen
- Stripe-Kundenportal fuer Zahlungsart/Rechnungen/Kuendigung
- Oeffentlicher Kuendigungsbutton (§ 312k) und Widerrufsbutton
  (§ 356a) mit Eingangsbestaetigung per Mail
- Abo-Bedingungen inkl. Leistungsbeschreibung und Widerrufsbelehrung,
  als Anhang der Vertragsbestaetigung

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

public/widerrufen.html

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Vertrag widerrufen – Webklar</title>
+  <link rel="stylesheet" href="/legal-form.css">
+</head>
+<body>
+<main>
+  <nav><a href="/dashboard.html">← Kundenportal</a> · <a href="/abo-bedingungen.html#widerruf">Widerrufsbelehrung</a></nav>
+  <h1>Vertrag widerrufen</h1>
+
+  <div id="intro">
+    <p>Als Verbraucher können Sie Ihr Webklar Wartungs-Abo innerhalb von 14 Tagen nach Vertragsschluss ohne Angabe von Gründen widerrufen. Einzelheiten stehen in der <a href="/abo-bedingungen.html#widerruf">Widerrufsbelehrung</a>.</p>
+    <button type="button" class="big-btn primary" id="start-btn">Vertrag widerrufen</button>
+  </div>
+
+  <form id="decl-form" class="card hidden" novalidate>
+    <label for="name" data-label-for="name" data-label="Name">Name <small>(Pflicht)</small></label>
+    <input id="name" name="name" autocomplete="name" required maxlength="200">
+
+    <label for="email" data-label-for="email" data-label="E-Mail">E-Mail-Adresse, mit der Sie das Abo abgeschlossen haben <small>(Pflicht)</small></label>
+    <input id="email" name="email" type="email" autocomplete="email" required maxlength="255">
+
+    <label for="customerNumber" data-label-for="customerNumber" data-label="Kundennummer">Kundennummer <small>(optional)</small></label>
+    <input id="customerNumber" name="customerNumber" maxlength="50">
+
+    <label>Vertrag</label>
+    <input value="Webklar Wartungs-Abo" disabled>
+
+    <p class="error hidden" id="form-error"></p>
+    <button type="submit" class="big-btn">Widerruf bestätigen</button>
+    <p class="muted">Sie erhalten sofort eine Eingangsbestätigung per E-Mail.</p>
+  </form>
+
+  <div id="done" class="card ok hidden">
+    <h2 style="margin-top:0">Ihr Widerruf ist eingegangen</h2>
+    <p>Eingang: <strong id="done-at"></strong></p>
+    <dl id="done-list"></dl>
+    <p>Eine Eingangsbestätigung haben wir an Ihre E-Mail-Adresse geschickt. Es erfolgen keine weiteren Abbuchungen. Die Erstattung rechnen wir gesondert ab.</p>
+  </div>
+</main>
+<script src="/legal-form.js"></script>
+<script>
+  initLegalForm({ endpoint: '/api/abo/public/withdraw', fields: ['name', 'email', 'customerNumber'] })
+</script>
+</body>
+</html>