Kundenansicht neu P7: Kündigen und Widerrufen in du (Fassung 6, C14)

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

public/auftrag-widerruf.js

@@ -2,7 +2,7 @@
    Rechtsfunktion: dieses Modul darf die anderen Vertragsarten nie stören. Fällt es aus, funktioniert der Widerruf wie bisher.
    Das Feld ist nur bei „Projektauftrag“ sichtbar; eine eingegebene, aber unpassende Nummer wird gemeldet und stoppt das Absenden,
    ein leeres Feld lässt den Widerruf durch (der Widerruf bleibt formfrei). Die Meldung steht in auftrag-ansicht.js. */
-import { abNummerNormalisiert, texte } from './auftrag-ansicht.js'
+import { ANREDE_DU, abNummerNormalisiert, texte } from './auftrag-ansicht.js'
 
 export function initProjektWiderruf(form) {
   const wrap = form?.querySelector('#ab-nummer-wrap')
@@ -39,7 +39,10 @@ export function initProjektWiderruf(form) {
     const nummer = abNummerNormalisiert(eingabe)
     if (!nummer) {
       ev.preventDefault()
-      fehler.textContent = texte().abNummerUngueltig
+      // Neue Seite (data-anrede="du"): die Meldung in du; ohne das Attribut bleibt der Satz aus auftrag-ansicht.js
+      fehler.textContent = form.getAttribute('data-anrede') === ANREDE_DU
+        ? 'Die Nummer sieht anders aus als AB-2026-0001. Bitte prüfe die Nummer oder lass das Feld leer.'
+        : texte().abNummerUngueltig
       fehler.classList.remove('hidden')
       eigeneMeldung = true
       feld.focus()

public/legal-form.js

@@ -3,6 +3,13 @@
 // Der Kunde waehlt den Vertrag (Kuendigung: Abo oder nur der Zusatzspeicher, ganz oder mit Paketzahl) bzw. die
 // Bestellung (Widerruf: Abschluss, Wechsel, Zusatzspeicher); die Auswahl geht in den Request und steht in der
 // Bestaetigung. Nach dem Absenden: Bestaetigung mit Datum/Uhrzeit, speicher- und druckbar.
+/** Paketzahl der Kündigung des Zusatzspeichers prüfen (nur die neue Seite mit data-anrede="du"): leer oder ganze Zahl von 1 bis max → '', sonst der du-Satz. */
+function legalFormPaketeFehler(wert, max) {
+  const text = String(wert ?? '').trim()
+  if (text === '') return ''
+  return /^\d+$/.test(text) && Number(text) >= 1 && Number(text) <= max ? '' : `Bitte gib 1 bis ${max} Pakete an oder lass das Feld leer (alle Pakete).`
+}
+
 function initLegalForm({ endpoint, fields }) {
   const form = document.getElementById('decl-form')
   const done = document.getElementById('done')
@@ -51,6 +58,15 @@ function initLegalForm({ endpoint, fields }) {
     for (const f of fields) payload[f] = String(form.elements[f]?.value ?? '').trim()
     if (form.elements.when?.value === 'datum' && !storageOnly()) payload.effective = dateInput?.value || ''
     if (form.elements.contract && !storageOnly()) delete payload.packages
+    // Neue Seite (data-anrede="du"): die Paketzahl wird hier geprüft, der Sie-Satz des Servers erreicht sie nicht
+    if (form.getAttribute('data-anrede') === 'du' && storageOnly()) {
+      const paketeFehler = legalFormPaketeFehler(payload.packages, Number(form.elements.packages?.max) || 10)
+      if (paketeFehler) {
+        errEl.textContent = paketeFehler
+        errEl.classList.remove('hidden')
+        return
+      }
+    }
     const btn = form.querySelector('button[type="submit"]')
     btn.disabled = true
     try {

public/neu/oeffentlich/kuendigen.html

@@ -15,7 +15,7 @@
   <div class="kn-markenzeile">WEBKLAR</div>
   <h1>Verträge hier kündigen</h1>
 
-  <form id="decl-form" class="kn-formular" novalidate>
+  <form id="decl-form" data-anrede="du" 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>
@@ -23,9 +23,9 @@
       <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>
+      <label for="packages" data-label-for="packages" data-label="Pakete">Zahl der Pakete, die du kündigst <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>
+      <p class="kn-hinweis">Die Kündigung des Zusatzspeichers wirkt zum Ende des laufenden Abrechnungsmonats. Das geht auch, wenn dein Abo schon gekündigt ist.</p>
     </div>
 
     <fieldset>
@@ -60,10 +60,10 @@
   </form>
 
   <div id="done" class="kn-bestaetigung hidden">
-    <h2>Ihre Kündigung ist eingegangen</h2>
+    <h2>Deine 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>
+    <p>Eine Eingangsbestätigung mit diesen Angaben haben wir an deine E-Mail-Adresse geschickt. Den Zeitpunkt, zu dem die Kündigung wirkt, bestätigen wir dir per E-Mail.</p>
     <button type="button" class="kn-drucken" id="print-btn">Diese Bestätigung drucken oder als PDF speichern</button>
   </div>
 </main>

public/neu/oeffentlich/widerrufen.html

@@ -15,7 +15,7 @@
   <div class="kn-markenzeile">WEBKLAR</div>
   <h1>Vertrag widerrufen</h1>
 
-  <form id="decl-form" class="kn-formular" novalidate>
+  <form id="decl-form" data-anrede="du" 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>
@@ -49,10 +49,10 @@
   </form>
 
   <div id="done" class="kn-bestaetigung hidden">
-    <h2>Ihr Widerruf ist bei uns eingegangen</h2>
+    <h2>Dein 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>
+    <p>Eine Eingangsbestätigung mit diesen Angaben haben wir an deine 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>