Kündigung und Widerruf: Vertrag bzw. Bestellung auswählbar (§ 312k, § 356a BGB)

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

public/widerrufen.html

@@ -14,12 +14,17 @@
   <h1>Vertrag widerrufen</h1>
 
   <form id="decl-form" class="card" novalidate>
+    <!-- § 356a BGB: welche Bestellung widerrufen wird (jede hat ihre eigene Widerrufsfrist) -->
+    <fieldset>
+      <legend data-label-for="order" data-label="Vertrag">Vertrag</legend>
+      <label class="radio"><input type="radio" name="order" value="abschluss" data-text="Abschluss meines Abos" checked> Abschluss meines Abos</label>
+      <label class="radio"><input type="radio" name="order" value="wechsel" data-text="Wechsel ins Wartungs-Abo"> Wechsel ins Wartungs-Abo</label>
+      <label class="radio"><input type="radio" name="order" value="zusatzspeicher" data-text="E-Mail-Zusatzspeicher"> E-Mail-Zusatzspeicher</label>
+    </fieldset>
+
     <label for="name" data-label-for="name" data-label="Name">Name</label>
     <input id="name" name="name" autocomplete="name" required maxlength="200">
 
-    <label>Vertrag</label>
-    <input value="WEBklar Wartungs-Abo" disabled>
-
     <label for="customerNumber" data-label-for="customerNumber" data-label="Kundennummer">Kundennummer <small>(optional)</small></label>
     <input id="customerNumber" name="customerNumber" maxlength="50">
 
@@ -40,7 +45,7 @@
 </main>
 <script src="/legal-form.js"></script>
 <script>
-  initLegalForm({ endpoint: '/api/abo/public/withdraw', fields: ['name', 'customerNumber', 'email'] })
+  initLegalForm({ endpoint: '/api/abo/public/withdraw', fields: ['order', 'name', 'customerNumber', 'email'] })
 </script>
 </body>
 </html>