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/kuendigen.html

@@ -0,0 +1,75 @@
+<!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>Verträge hier kündigen – 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>Verträge hier kündigen</h1>
+
+  <form id="decl-form" class="kn-formular" novalidate>
+    <!-- § 312k Abs. 3 BGB: eindeutige Bezeichnung des Vertrags - das Abo (mit Zusatzspeicher) oder nur der Zusatzspeicher -->
+    <fieldset>
+      <legend data-label-for="contract" data-label="Vertrag">Vertrag</legend>
+      <label class="kn-auswahl"><input type="radio" name="contract" value="abo" data-text="Mein Abo (Hosting- oder Wartungs-Abo, mit Zusatzspeicher)" checked> Mein Abo (Hosting- oder Wartungs-Abo, mit Zusatzspeicher)</label>
+      <label class="kn-auswahl"><input type="radio" name="contract" value="zusatzspeicher" data-text="Nur den E-Mail-Zusatzspeicher"> Nur den E-Mail-Zusatzspeicher</label>
+    </fieldset>
+    <div id="packages-wrap" class="hidden">
+      <label for="packages" data-label-for="packages" data-label="Pakete">Zahl der Pakete, die Sie kündigen <small>(je 5 GB; leer = alle gebuchten Pakete)</small></label>
+      <input id="packages" name="packages" type="number" inputmode="numeric" min="1" max="10" step="1" placeholder="alle">
+      <p class="kn-hinweis">Die Kündigung des Zusatzspeichers wirkt zum Ende des laufenden Abrechnungsmonats. Das geht auch, wenn Ihr Abo schon gekündigt ist.</p>
+    </div>
+
+    <fieldset>
+      <legend data-label-for="kind" data-label="Art der Kündigung">Art der Kündigung</legend>
+      <label class="kn-auswahl"><input type="radio" name="kind" value="ordentlich" data-text="Ordentliche Kündigung" checked> Ordentliche Kündigung</label>
+      <label class="kn-auswahl"><input type="radio" name="kind" value="ausserordentlich" data-text="Außerordentliche Kündigung"> Außerordentliche Kündigung aus wichtigem Grund</label>
+      <label class="kn-auswahl"><input type="radio" name="kind" value="geschaeftsaufgabe" data-text="Sonderkündigung wegen Geschäftsaufgabe"> Sonderkündigung wegen Geschäftsaufgabe</label>
+    </fieldset>
+    <div id="reason-wrap" class="hidden">
+      <label for="reason" data-label-for="reason" data-label="Kündigungsgrund">Kündigungsgrund</label>
+      <textarea id="reason" name="reason" maxlength="2000"></textarea>
+    </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="email" data-label-for="email" data-label="E-Mail für die Bestätigung">E-Mail-Adresse <small>(dorthin schicken wir die Bestätigung)</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">
+
+    <fieldset id="when-wrap">
+      <legend>Zeitpunkt</legend>
+      <label class="kn-auswahl"><input type="radio" name="when" value="naechstmoeglich" checked> zum nächstmöglichen Zeitpunkt</label>
+      <label class="kn-auswahl"><input type="radio" name="when" value="datum"> zu einem bestimmten Datum</label>
+      <input type="date" id="effective-date" class="hidden">
+    </fieldset>
+
+    <p class="kn-fehlertext hidden" id="form-error"></p>
+    <button type="submit" class="kn-absenden">Jetzt kündigen</button>
+  </form>
+
+  <div id="done" class="kn-bestaetigung hidden">
+    <h2>Ihre Kündigung ist 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. Den Zeitpunkt, zu dem die Kündigung wirkt, bestätigen wir Ihnen per E-Mail.</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/cancel', fields: ['contract', 'packages', 'kind', 'reason', 'name', 'email', 'customerNumber', 'effective'] })
+</script>
+</body>
+</html>