Website: Abo-Seiten an die Vertragsbedingungen angeglichen (Wechsel, Zusatzspeicher, Sicherheit), AGB-Verweise, Tests

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

src/pages/AGB.tsx

@@ -124,10 +124,10 @@ const AGB = () => {
                 <ol className="list-decimal list-inside space-y-2 text-muted-foreground leading-relaxed [&>li]:pl-2">
                   <li>
                     Hosting bietet WEBklar als Hosting-Abo an. Für das Hosting-Abo und das Wartungs-Abo gelten die{" "}
-                    <a href="https://project.webklar.com/abo-bedingungen.html" className="text-foreground underline hover:no-underline">Vertragsbedingungen der WEBklar-Abos</a>
-                    {" "}mit Leistungsbeschreibung; sie gehen diesen AGB vor.
+                    <a href="https://project.webklar.com/abo-bedingungen.html" className="text-foreground underline hover:no-underline">Vertragsbedingungen für die WEBklar-Abos</a>
+                    {" "}mit Leistungsbeschreibungen; sie gehen diesen AGB vor.
                   </li>
-                  <li>Bestehende Hostingverträge mit jährlicher Laufzeit behalten die bei ihrem Abschluss geltende Fassung dieses Moduls.</li>
+                  <li>Bestehende Hosting-Verträge mit jährlicher Laufzeit behalten die bei ihrem Abschluss vereinbarten Bedingungen.</li>
                   <li>WEBklar ist berechtigt, externe Anbieter (z. B. Rechenzentren) einzusetzen.</li>
                   <li>WEBklar übernimmt keine Haftung für Ausfälle externer Anbieter.</li>
                 </ol>
@@ -194,7 +194,7 @@ const AGB = () => {
                 <ol className="list-decimal list-inside space-y-2 text-muted-foreground leading-relaxed [&>li]:pl-2">
                   <li>Die Vergütung ergibt sich aus dem Angebot.</li>
                   <li>Projektleistungen sind nach Vereinbarung fällig.</li>
-                  <li>Für das Hosting-Abo und das Wartungs-Abo gelten die Zahlungsbedingungen der Vertragsbedingungen der WEBklar-Abos (monatlich im Voraus).</li>
+                  <li>Für die Abos gelten die Vertragsbedingungen für die WEBklar-Abos.</li>
                 </ol>
               </section>
               {contractDivider}
@@ -243,7 +243,7 @@ const AGB = () => {
                   12. Kündigung
                 </h2>
                 <ol className="list-decimal list-inside space-y-2 text-muted-foreground leading-relaxed [&>li]:pl-2">
-                  <li>Laufzeitverträge (z. B. Hosting, Wartung) können zum Ende der jeweiligen Laufzeit gekündigt werden. Laufzeit und Kündigung des Hosting-Abos und des Wartungs-Abos richten sich nach den Vertragsbedingungen der WEBklar-Abos (Mindestlaufzeit 12 Monate, danach jederzeit zum Ende des Abrechnungsmonats kündbar).</li>
+                  <li>Laufzeitverträge können zum Ende der jeweiligen Laufzeit gekündigt werden. Laufzeit und Kündigung der Abos richten sich nach den Vertragsbedingungen für die WEBklar-Abos.</li>
                   <li>Das Recht zur außerordentlichen Kündigung bleibt unberührt.</li>
                 </ol>
               </section>

src/pages/HostingAbo.tsx

@@ -19,7 +19,7 @@ const leistungen = [
   },
   {
     titel: "1 E-Mail-Postfach",
-    text: `Mit Ihrer eigenen Domain, 5 GB Speicher, Webmail und Zugriff per Outlook oder Smartphone. Mehr Platz gibt es über den E-Mail-Zusatzspeicher: je 5 GB für 1,00 € pro Monat (${STEUER}).`,
+    text: `Unter Ihrer eigenen Domain, 5 GB Speicher, Webmail und Zugriff per Outlook oder Smartphone. Mehr Platz gibt es über den E-Mail-Zusatzspeicher: je 5 GB für 1,00 € pro Monat (${STEUER}).`,
   },
   {
     titel: "Störungen inklusive",
@@ -36,12 +36,12 @@ const HostingAbo = () => {
             <Link to="/" className="flex items-center gap-2 group">
               <span className="text-xl font-display font-medium text-foreground tracking-tight">Webklar</span>
             </Link>
-            <Link to="/">
-              <Button variant="ghost" className="text-muted-foreground hover:text-foreground">
+            <Button asChild variant="ghost" className="text-muted-foreground hover:text-foreground">
+              <Link to="/">
                 <ArrowLeft className="w-4 h-4 mr-2" />
                 Zurück
-              </Button>
-            </Link>
+              </Link>
+            </Button>
           </div>
         </div>
       </header>
@@ -92,8 +92,8 @@ const HostingAbo = () => {
                   </p>
                   <p>
                     Updates und Pflege der Website selbst sind nicht enthalten; bei statischen Websites sind sie für den sicheren
-                    Betrieb nicht nötig. Braucht Ihre Website dynamische Teile oder wünschen Sie laufende Pflege und eine Stunde
-                    Arbeitszeit pro Monat, ist unser{" "}
+                    Betrieb in der Regel nicht nötig. Braucht Ihre Website dynamische Teile oder wünschen Sie laufende Pflege und
+                    eine Stunde Arbeitszeit pro Monat, ist unser{" "}
                     <Link to="/wartungs-abo" className={linkClass}>Wartungs-Abo</Link> das Richtige.
                   </p>
                 </div>
@@ -115,9 +115,9 @@ const HostingAbo = () => {
                 <h2 className="text-lg font-display font-medium uppercase tracking-tight mb-3">E-Mail-Zusatzspeicher</h2>
                 <p className="text-muted-foreground leading-relaxed">
                   Brauchen Sie mehr Platz für E-Mails, buchen Sie im Kundenportal unter „Verträge“ Zusatzspeicher: Pakete von je
-                  5 GB für 1,00 € pro Monat ({STEUER}), bis zu 10 Pakete. Die Zahl der Pakete können Sie dort jederzeit erhöhen
-                  oder verringern, solange Ihr Abo nicht gekündigt ist. Eine Verringerung wirkt zum Ende des Abrechnungsmonats.
-                  Einzelheiten:{" "}
+                  5 GB für 1,00 € pro Monat ({STEUER}), bis zu 10 Pakete. Bestellen und verringern können Sie die Pakete dort,
+                  sobald Ihr Abo begonnen hat, solange es nicht gekündigt ist und keine Zahlung offen ist. Eine Verringerung wirkt
+                  zum Ende des Abrechnungsmonats. Einzelheiten:{" "}
                   <a href={`${PORTAL}/abo-bedingungen.html#zusatzspeicher`} className={linkClass}>§ 10 der Vertragsbedingungen</a>.
                 </p>
               </section>
@@ -127,10 +127,10 @@ const HostingAbo = () => {
                 <h2 className="text-lg font-display font-medium uppercase tracking-tight mb-3">Wechsel ins Wartungs-Abo</h2>
                 <p className="text-muted-foreground leading-relaxed">
                   Braucht Ihre Website später dynamische Teile oder möchten Sie Pflege und Arbeitszeit dazubuchen, wechseln Sie
-                  im Kundenportal unter „Verträge“ jederzeit ins{" "}
-                  <Link to="/wartungs-abo" className={linkClass}>Wartungs-Abo</Link>, auch während der Mindestlaufzeit, solange
-                  Ihr Hosting-Abo nicht gekündigt ist. Mit dem Wechsel beginnt eine neue Mindestlaufzeit von 12 Monaten.
-                  Einzelheiten:{" "}
+                  im Kundenportal unter „Verträge“ ins{" "}
+                  <Link to="/wartungs-abo" className={linkClass}>Wartungs-Abo</Link>, auch während der Mindestlaufzeit: sobald
+                  Ihr Hosting-Abo begonnen hat, solange es nicht gekündigt ist und keine Zahlung offen ist. Mit dem Wechsel
+                  beginnt eine neue Mindestlaufzeit von 12 Monaten. Einzelheiten:{" "}
                   <a href={`${PORTAL}/abo-bedingungen.html#wechsel`} className={linkClass}>§ 9 der Vertragsbedingungen</a>.
                 </p>
               </section>
@@ -140,8 +140,8 @@ const HostingAbo = () => {
                 <h2 className="text-lg font-display font-medium uppercase tracking-tight mb-3">So schließen Sie das Abo ab</h2>
                 <p className="text-muted-foreground leading-relaxed">
                   Das Hosting-Abo schließen Sie in unserem Kundenportal ab. Den Zugang richten wir Ihnen ein, sprechen Sie uns
-                  einfach an. Nach der Anmeldung finden Sie das Angebot im Bereich „Verträge“. Dort sehen Sie danach jederzeit
-                  Ihre Verträge und Rechnungen, buchen Zusatzspeicher und können uns Aufträge schicken.
+                  einfach an. Nach der Anmeldung finden Sie das Angebot im Bereich „Verträge“. Im Kundenportal sehen Sie danach
+                  jederzeit Ihre Verträge und Rechnungen, buchen Zusatzspeicher und schicken uns Aufträge über den Chat.
                 </p>
               </section>
               {divider}
@@ -149,18 +149,19 @@ const HostingAbo = () => {
               <section>
                 <h2 className="text-lg font-display font-medium uppercase tracking-tight mb-3">Widerruf und Kündigung</h2>
                 <p className="text-muted-foreground leading-relaxed">
-                  Verbraucher können den Vertrag innerhalb von 14 Tagen widerrufen; das gilt für jede Bestellung, also für das
-                  Abo, den Wechsel ins Wartungs-Abo und den Zusatzspeicher. Bereits gezahlte Beträge erstatten wir dann nach der{" "}
+                  Verbraucher können jede Bestellung innerhalb von 14 Tagen ab Vertragsschluss widerrufen: den Abschluss des
+                  Abos, den Wechsel ins Wartungs-Abo und die Bestellung von Zusatzspeicher. Bereits gezahlte Beträge erstatten
+                  wir dann nach der{" "}
                   <a href={`${PORTAL}/abo-bedingungen.html#widerruf`} className={linkClass}>Widerrufsbelehrung</a>.
                   Kündigen können Sie online ohne Anmeldung oder per E-Mail.
                 </p>
                 <div className="mt-4 flex flex-wrap gap-3">
-                  <a href={`${PORTAL}/kuendigen.html`}>
-                    <Button variant="outline" className="rounded-full">Verträge hier kündigen</Button>
-                  </a>
-                  <a href={`${PORTAL}/widerrufen.html`}>
-                    <Button variant="outline" className="rounded-full">Vertrag widerrufen</Button>
-                  </a>
+                  <Button asChild variant="outline" className="rounded-full">
+                    <a href={`${PORTAL}/kuendigen.html`}>Verträge hier kündigen</a>
+                  </Button>
+                  <Button asChild variant="outline" className="rounded-full">
+                    <a href={`${PORTAL}/widerrufen.html`}>Vertrag widerrufen</a>
+                  </Button>
                 </div>
               </section>
               {divider}
@@ -168,7 +169,7 @@ const HostingAbo = () => {
               <section>
                 <h2 className="text-lg font-display font-medium uppercase tracking-tight mb-3">Unterlagen und Kontakt</h2>
                 <p className="text-muted-foreground leading-relaxed">
-                  <a href={`${PORTAL}/abo-bedingungen.html`} className={linkClass}>Vertragsbedingungen der WEBklar-Abos</a>
+                  <a href={`${PORTAL}/abo-bedingungen.html`} className={linkClass}>Vertragsbedingungen für die WEBklar-Abos</a>
                   {" · "}
                   <a href={`${PORTAL}/abo-bedingungen.html#hosting`} className={linkClass}>Leistungsbeschreibung A (Hosting-Abo)</a>
                   {" · "}
@@ -182,12 +183,12 @@ const HostingAbo = () => {
             </article>
 
             <div className="mt-16 pt-12 border-t border-border flex flex-wrap gap-4">
-              <a href={`${PORTAL}/login.html`}>
-                <Button className="btn-minimal rounded-full">Zum Kundenportal</Button>
-              </a>
-              <Link to="/kontakt">
-                <Button variant="outline" className="rounded-full">Kontakt aufnehmen</Button>
-              </Link>
+              <Button asChild className="btn-minimal rounded-full">
+                <a href={`${PORTAL}/login.html`}>Zum Kundenportal</a>
+              </Button>
+              <Button asChild variant="outline" className="rounded-full">
+                <Link to="/kontakt">Kontakt aufnehmen</Link>
+              </Button>
             </div>
           </div>
         </div>

src/pages/WartungsAbo.tsx

@@ -11,7 +11,7 @@ const linkClass = "text-foreground underline hover:no-underline";
 const leistungen = [
   {
     titel: "Betrieb & Pflege Ihrer Website",
-    text: "Hosting auf unserem Server in Deutschland, Sicherheitsupdates für Server und Website, SSL-Zertifikat, tägliche Datensicherung und Überwachung der Erreichbarkeit. Für alle Websites und Web-Anwendungen, die wir erstellt oder zur Betreuung übernommen haben, auch mit Content-Management-System, Login oder Datenbank.",
+    text: "Hosting auf unserem Server in Deutschland, Sicherheitsupdates für den Server und für die Software-Komponenten Ihrer Website, die wir einsetzen, SSL-Zertifikat, tägliche Datensicherung und Überwachung der Erreichbarkeit. Für alle Websites und Web-Anwendungen, die wir erstellt oder zur Betreuung übernommen haben, auch mit Content-Management-System, Login oder Datenbank.",
   },
   {
     titel: "1 Domain inklusive",
@@ -36,12 +36,12 @@ const WartungsAbo = () => {
             <Link to="/" className="flex items-center gap-2 group">
               <span className="text-xl font-display font-medium text-foreground tracking-tight">Webklar</span>
             </Link>
-            <Link to="/">
-              <Button variant="ghost" className="text-muted-foreground hover:text-foreground">
+            <Button asChild variant="ghost" className="text-muted-foreground hover:text-foreground">
+              <Link to="/">
                 <ArrowLeft className="w-4 h-4 mr-2" />
                 Zurück
-              </Button>
-            </Link>
+              </Link>
+            </Button>
           </div>
         </div>
       </header>
@@ -92,10 +92,11 @@ const WartungsAbo = () => {
                 <h2 className="text-lg font-display font-medium uppercase tracking-tight mb-3">E-Mail-Postfächer und Zusatzspeicher</h2>
                 <p className="text-muted-foreground leading-relaxed">
                   Im Wartungs-Abo richten wir Ihnen beliebig viele Postfächer unter Ihrer Domain ein, mit zusammen 5 GB
-                  Speicher. Wie der Speicher auf die Postfächer verteilt wird, bestimmen Sie. Brauchen Sie mehr
-                  Platz, buchen Sie im Kundenportal unter „Verträge“ Zusatzspeicher: Pakete von je 5 GB für 1,00 € pro Monat
-                  ({STEUER}), bis zu 10 Pakete. Die Zahl der Pakete können Sie dort jederzeit erhöhen oder verringern, solange
-                  Ihr Abo nicht gekündigt ist. Eine Verringerung wirkt zum Ende des Abrechnungsmonats. Einzelheiten:{" "}
+                  Speicher. Wie der Speicher auf die Postfächer verteilt wird, bestimmen Sie. Brauchen Sie mehr Platz, buchen Sie
+                  im Kundenportal unter „Verträge“ Zusatzspeicher: Pakete von je 5 GB für 1,00 € pro Monat ({STEUER}), bis zu
+                  10 Pakete. Bestellen und verringern können Sie die Pakete dort, sobald Ihr Abo begonnen hat, solange es nicht
+                  gekündigt ist und keine Zahlung offen ist. Eine Verringerung wirkt zum Ende des Abrechnungsmonats.
+                  Einzelheiten:{" "}
                   <a href={`${PORTAL}/abo-bedingungen.html#zusatzspeicher`} className={linkClass}>§ 10 der Vertragsbedingungen</a>.
                 </p>
               </section>
@@ -106,8 +107,11 @@ const WartungsAbo = () => {
                 <p className="text-muted-foreground leading-relaxed">
                   Sie haben eine statische Website und brauchen weder Pflege noch Arbeitszeit? Dann genügt vielleicht unser{" "}
                   <Link to="/hosting-abo" className={linkClass}>Hosting-Abo</Link> für 15,00 € pro Monat ({STEUER}). Vom
-                  Hosting- ins Wartungs-Abo können Sie jederzeit wechseln; ein Wechsel vom Wartungs- ins Hosting-Abo ist auf
-                  Anfrage nach Ablauf der Mindestlaufzeit möglich.
+                  Hosting- ins Wartungs-Abo wechseln Sie im Kundenportal, sobald das Hosting-Abo begonnen hat, solange es nicht
+                  gekündigt ist und keine Zahlung offen ist; mit dem Wechsel beginnt eine neue Mindestlaufzeit von 12 Monaten.
+                  Ein Wechsel vom Wartungs- ins Hosting-Abo ist auf Anfrage nach Ablauf der Mindestlaufzeit zum Ende eines
+                  Abrechnungsmonats möglich, wenn Ihre Website statisch ist. Einzelheiten in{" "}
+                  <a href={`${PORTAL}/abo-bedingungen.html#wechsel`} className={linkClass}>§ 9 der Vertragsbedingungen</a>.
                 </p>
               </section>
               {divider}
@@ -116,8 +120,8 @@ const WartungsAbo = () => {
                 <h2 className="text-lg font-display font-medium uppercase tracking-tight mb-3">So schließen Sie das Abo ab</h2>
                 <p className="text-muted-foreground leading-relaxed">
                   Das Wartungs-Abo schließen Sie in unserem Kundenportal ab. Den Zugang richten wir Ihnen ein, sprechen Sie uns
-                  einfach an. Nach der Anmeldung finden Sie das Angebot im Bereich „Verträge“. Dort sehen Sie danach jederzeit
-                  Ihr Stundenkontingent, Ihre Rechnungen und können uns Aufträge schicken.
+                  einfach an. Nach der Anmeldung finden Sie das Angebot im Bereich „Verträge“. Im Kundenportal sehen Sie danach
+                  jederzeit Ihr Stundenkontingent und Ihre Rechnungen und schicken uns Aufträge über den Chat.
                 </p>
               </section>
               {divider}
@@ -125,18 +129,19 @@ const WartungsAbo = () => {
               <section>
                 <h2 className="text-lg font-display font-medium uppercase tracking-tight mb-3">Widerruf und Kündigung</h2>
                 <p className="text-muted-foreground leading-relaxed">
-                  Verbraucher können den Vertrag innerhalb von 14 Tagen widerrufen; das gilt für jede Bestellung, also für das
-                  Abo und den Zusatzspeicher. Bereits gezahlte Beträge erstatten wir dann nach der{" "}
+                  Verbraucher können jede Bestellung innerhalb von 14 Tagen ab Vertragsschluss widerrufen: den Abschluss des
+                  Abos, den Wechsel ins Wartungs-Abo und die Bestellung von Zusatzspeicher. Bereits gezahlte Beträge erstatten
+                  wir dann nach der{" "}
                   <a href={`${PORTAL}/abo-bedingungen.html#widerruf`} className={linkClass}>Widerrufsbelehrung</a>.
                   Kündigen können Sie online ohne Anmeldung oder per E-Mail.
                 </p>
                 <div className="mt-4 flex flex-wrap gap-3">
-                  <a href={`${PORTAL}/kuendigen.html`}>
-                    <Button variant="outline" className="rounded-full">Verträge hier kündigen</Button>
-                  </a>
-                  <a href={`${PORTAL}/widerrufen.html`}>
-                    <Button variant="outline" className="rounded-full">Vertrag widerrufen</Button>
-                  </a>
+                  <Button asChild variant="outline" className="rounded-full">
+                    <a href={`${PORTAL}/kuendigen.html`}>Verträge hier kündigen</a>
+                  </Button>
+                  <Button asChild variant="outline" className="rounded-full">
+                    <a href={`${PORTAL}/widerrufen.html`}>Vertrag widerrufen</a>
+                  </Button>
                 </div>
               </section>
               {divider}
@@ -144,7 +149,7 @@ const WartungsAbo = () => {
               <section>
                 <h2 className="text-lg font-display font-medium uppercase tracking-tight mb-3">Unterlagen und Kontakt</h2>
                 <p className="text-muted-foreground leading-relaxed">
-                  <a href={`${PORTAL}/abo-bedingungen.html`} className={linkClass}>Vertragsbedingungen der WEBklar-Abos</a>
+                  <a href={`${PORTAL}/abo-bedingungen.html`} className={linkClass}>Vertragsbedingungen für die WEBklar-Abos</a>
                   {" · "}
                   <a href={`${PORTAL}/abo-bedingungen.html#wartung`} className={linkClass}>Leistungsbeschreibung B (Wartungs-Abo)</a>
                   {" · "}
@@ -158,12 +163,12 @@ const WartungsAbo = () => {
             </article>
 
             <div className="mt-16 pt-12 border-t border-border flex flex-wrap gap-4">
-              <a href={`${PORTAL}/login.html`}>
-                <Button className="btn-minimal rounded-full">Zum Kundenportal</Button>
-              </a>
-              <Link to="/kontakt">
-                <Button variant="outline" className="rounded-full">Kontakt aufnehmen</Button>
-              </Link>
+              <Button asChild className="btn-minimal rounded-full">
+                <a href={`${PORTAL}/login.html`}>Zum Kundenportal</a>
+              </Button>
+              <Button asChild variant="outline" className="rounded-full">
+                <Link to="/kontakt">Kontakt aufnehmen</Link>
+              </Button>
             </div>
           </div>
         </div>