Kundenansicht neu P2: öffentliche Seiten und Auftragsbestätigung im neuen Stil, Text unverändert

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

public/neu/oeffentlich/widerrufen.html

@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+  <meta name="theme-color" content="#ffffff">
+  <title>Vertrag widerrufen – WEBklar</title>
+  <link rel="stylesheet" href="/neu/tokens.css">
+  <link rel="stylesheet" href="/neu/oeffentlich/oeffentlich.css">
+</head>
+<body class="kn kn-seite kn-recht">
+<main>
+  <!-- Nur in der installierten App sichtbar: dort gibt es keinen Zurück-Knopf des Browsers -->
+  <a class="kn-zurueck no-print" href="/dashboard.html">‹ Zurück zum Kundenbereich</a>
+  <div class="kn-markenzeile">WEBKLAR</div>
+  <h1>Vertrag widerrufen</h1>
+
+  <form id="decl-form" class="kn-formular" 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="kn-auswahl"><input type="radio" name="order" value="abschluss" data-text="Abschluss meines Abos" checked> Abschluss meines Abos</label>
+      <label class="kn-auswahl"><input type="radio" name="order" value="wechsel" data-text="Wechsel ins Wartungs-Abo"> Wechsel ins Wartungs-Abo</label>
+      <label class="kn-auswahl"><input type="radio" name="order" value="zusatzspeicher" data-text="E-Mail-Zusatzspeicher"> E-Mail-Zusatzspeicher</label>
+      <label class="kn-auswahl"><input type="radio" name="order" value="funktion" data-text="Funktion (z. B. News-Pinnwand)"> Funktion (z. B. News-Pinnwand)</label>
+      <label class="kn-auswahl"><input type="radio" name="order" value="termine" data-text="Terminplaner (Einrichtung)"> Terminplaner (Einrichtung)</label>
+      <label class="kn-auswahl"><input type="radio" name="order" value="shop" data-text="Webshop (Einrichtung)"> Webshop (Einrichtung)</label>
+      <label class="kn-auswahl"><input type="radio" name="order" value="zeiten" data-text="Öffnungszeiten live"> Öffnungszeiten live</label>
+      <label class="kn-auswahl"><input type="radio" name="order" value="projekt" data-text="Projektauftrag (Auftragsbestätigung)"> Projektauftrag (Auftragsbestätigung)</label>
+    </fieldset>
+
+    <!-- Nur bei „Projektauftrag“ und freiwillig (auftrag-widerruf.js blendet das Feld sonst aus und leert es); ohne das Skript bleibt es sichtbar -->
+    <div id="ab-nummer-wrap">
+      <label for="abNummer" data-label-for="abNummer" data-label="Nummer der Auftragsbestätigung">Nummer der Auftragsbestätigung <small>(falls zur Hand, zum Beispiel AB-2026-0001)</small></label>
+      <input id="abNummer" name="abNummer" maxlength="20" autocomplete="off" autocapitalize="characters" spellcheck="false" placeholder="AB-2026-0001">
+    </div>
+
+    <label for="name" data-label-for="name" data-label="Name">Name</label>
+    <input id="name" name="name" autocomplete="name" required maxlength="200">
+
+    <label for="customerNumber" data-label-for="customerNumber" data-label="Kundennummer">Kundennummer <small>(optional)</small></label>
+    <input id="customerNumber" name="customerNumber" maxlength="50">
+
+    <label for="email" data-label-for="email" data-label="E-Mail für die Eingangsbestätigung">E-Mail-Adresse <small>(dorthin schicken wir die Eingangsbestätigung)</small></label>
+    <input id="email" name="email" type="email" autocomplete="email" required maxlength="255">
+
+    <p class="kn-fehlertext hidden" id="form-error"></p>
+    <button type="submit" class="kn-absenden">Widerruf bestätigen</button>
+  </form>
+
+  <div id="done" class="kn-bestaetigung hidden">
+    <h2>Ihr Widerruf ist bei uns eingegangen</h2>
+    <p>Eingang: <strong id="done-at"></strong></p>
+    <dl id="done-list"></dl>
+    <p>Eine Eingangsbestätigung mit diesen Angaben haben wir an Ihre E-Mail-Adresse geschickt.</p>
+    <button type="button" class="kn-drucken" id="print-btn">Diese Bestätigung drucken oder als PDF speichern</button>
+  </div>
+</main>
+<script src="/legal-form.js"></script>
+<script>
+  initLegalForm({ endpoint: '/api/abo/public/withdraw', fields: ['order', 'abNummer', 'name', 'customerNumber', 'email'] })
+</script>
+<script type="module" src="/auftrag-widerruf.js"></script>
+</body>
+</html>