Hosting-Abo-Seite, Wartungs-Abo mit beliebig vielen Postfächern, AGB Modul C (Entwurf)

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

src/App.tsx

@@ -11,6 +11,7 @@ import AGBPage from "./pages/AGB";
 import ImpressumPage from "./pages/Impressum";
 import AboutPage from "./pages/About";
 import WartungsAboPage from "./pages/WartungsAbo";
+import HostingAboPage from "./pages/HostingAbo";
 import DatenschutzPage from "./pages/Datenschutz";
 import NotFound from "./pages/NotFound";
 
@@ -31,6 +32,7 @@ const App = () => (
             <Route path="/impressum" element={<ImpressumPage />} />
             <Route path="/ueber-uns" element={<AboutPage />} />
             <Route path="/wartungs-abo" element={<WartungsAboPage />} />
+            <Route path="/hosting-abo" element={<HostingAboPage />} />
             <Route path="/datenschutz" element={<DatenschutzPage />} />
             {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
             <Route path="*" element={<NotFound />} />

src/components/Footer.tsx

@@ -25,6 +25,7 @@ const footerLinks: { title: string; links: FooterLink[] }[] = [
       { id: 3, title: "Leistungen", href: "/#services" },
       { id: 4, title: "Kontakt", to: "/kontakt" },
       { id: 9, title: "Wartungs-Abo", to: "/wartungs-abo" },
+      { id: 13, title: "Hosting-Abo", to: "/hosting-abo" },
     ],
   },
   {

src/pages/AGB.tsx

@@ -118,12 +118,16 @@ const AGB = () => {
               {/* 5. Leistungsmodul C – Hosting */}
               <section>
                 <h2 className="text-lg font-display font-medium uppercase tracking-tight text-foreground mb-2">
-                  5. Leistungsmodul C – Hosting (jährlich)
+                  5. Leistungsmodul C – Hosting
                 </h2>
                 <p className="text-sm text-muted-foreground mb-4">(aktiv, wenn im Angebot enthalten)</p>
                 <ol className="list-decimal list-inside space-y-2 text-muted-foreground leading-relaxed [&>li]:pl-2">
-                  <li>WEBklar stellt optional Hosting-Leistungen zur Verfügung.</li>
+                  <li>
-                  <li>Hostingverträge haben eine jährliche Laufzeit und verlängern sich automatisch, sofern nicht fristgerecht gekündigt wird.</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.
+                  </li>
+                  <li>Bestehende Hostingverträge mit jährlicher Laufzeit behalten die bei ihrem Abschluss geltende Fassung dieses Moduls.</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>
@@ -190,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>Hosting-Leistungen sind jährlich im Voraus zu zahlen.</li>
+                  <li>Für das Hosting-Abo und das Wartungs-Abo gelten die Zahlungsbedingungen der Vertragsbedingungen der WEBklar-Abos (monatlich im Voraus).</li>
                 </ol>
               </section>
               {contractDivider}
@@ -239,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.</li>
+                  <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>Das Recht zur außerordentlichen Kündigung bleibt unberührt.</li>
                 </ol>
               </section>

src/pages/HostingAbo.tsx

@@ -0,0 +1,199 @@
+import { Link } from "react-router-dom";
+import { Button } from "@/components/ui/button";
+import { ArrowLeft, Server } from "lucide-react";
+
+const PORTAL = "https://project.webklar.com";
+const STEUER = "Endpreis, gemäß § 19 UStG ohne Umsatzsteuer";
+
+const divider = <div className="my-8 border-t border-border" aria-hidden />;
+const linkClass = "text-foreground underline hover:no-underline";
+
+const leistungen = [
+  {
+    titel: "Bereitstellung Ihrer Website",
+    text: "Hosting auf unserem Server in Deutschland, SSL-Zertifikat, tägliche Datensicherung, Überwachung der Erreichbarkeit sowie Updates von Betriebssystem und Server-Software.",
+  },
+  {
+    titel: "1 Domain inklusive",
+    text: "Registrierung auf Ihren Namen, Verlängerung und DNS-Verwaltung (.de, .com, .eu, .net oder .org).",
+  },
+  {
+    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}).`,
+  },
+  {
+    titel: "Störungen inklusive",
+    text: "Störungen an Server, Domain und Postfach in unserem Verantwortungsbereich beheben wir ohne Berechnung. Servicezeiten Montag bis Freitag 9 bis 17 Uhr (außer an gesetzlichen Feiertagen in Rheinland-Pfalz), Antwort spätestens bis zum Ende des nächsten Werktags.",
+  },
+];
+
+const HostingAbo = () => {
+  return (
+    <div className="min-h-screen bg-background">
+      <header className="fixed top-0 left-0 right-0 z-50 glass-nav py-4">
+        <div className="container mx-auto px-6">
+          <div className="flex items-center justify-between">
+            <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">
+                <ArrowLeft className="w-4 h-4 mr-2" />
+                Zurück
+              </Button>
+            </Link>
+          </div>
+        </div>
+      </header>
+
+      <main className="pt-32 pb-24">
+        <div className="container mx-auto px-6">
+          <div className="max-w-3xl mx-auto">
+            <div className="mb-12">
+              <div className="label-tag mb-4 flex items-center gap-2">
+                <Server className="w-4 h-4" />
+                Leistungen
+              </div>
+              <h1 className="text-4xl md:text-5xl font-display font-medium text-foreground tracking-tight uppercase mb-2">
+                Hosting-Abo
+              </h1>
+              <p className="text-muted-foreground text-lg">
+                Ihre statische Website auf unserem Server in Deutschland: 15,00 € pro Monat, 12 Monate Mindestlaufzeit.
+              </p>
+              <p className="text-muted-foreground text-sm mt-1">Alle Preise sind Endpreise, gemäß § 19 UStG ohne Umsatzsteuer.</p>
+            </div>
+
+            <article className="space-y-8 text-foreground">
+              <section>
+                <h2 className="text-lg font-display font-medium uppercase tracking-tight mb-4">Das ist enthalten</h2>
+                <ul className="grid gap-5 sm:grid-cols-2">
+                  {leistungen.map((l) => (
+                    <li key={l.titel} className="rounded-2xl border border-border p-5">
+                      <p className="font-medium mb-1">{l.titel}</p>
+                      <p className="text-muted-foreground text-sm leading-relaxed">{l.text}</p>
+                    </li>
+                  ))}
+                </ul>
+              </section>
+              {divider}
+
+              <section>
+                <h2 className="text-lg font-display font-medium uppercase tracking-tight mb-3">Nur für statische Websites</h2>
+                <div className="text-muted-foreground leading-relaxed space-y-3">
+                  <p>
+                    Das Hosting-Abo ist für statische Websites bestimmt, die wir erstellt oder zur Betreuung übernommen haben.
+                    Statisch heißt: Der Webserver liefert die Dateien Ihrer Website (HTML, CSS, JavaScript, Bilder) unverändert
+                    aus. Dazu gehören auch die React- und Vite-Websites, die wir erstellen.
+                  </p>
+                  <p>
+                    Nicht möglich sind ein Content-Management-System, ein Login, eine Datenbank und eigener serverseitiger Code
+                    (etwa PHP). Kontakt über E-Mail-Links auf der Website ist möglich. Formulare, die Eingaben an einen Server
+                    übermitteln, sind nicht enthalten; eine Lösung dafür bieten wir auf Anfrage gesondert an.
+                  </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{" "}
+                    <Link to="/wartungs-abo" className={linkClass}>Wartungs-Abo</Link> das Richtige.
+                  </p>
+                </div>
+              </section>
+              {divider}
+
+              <section>
+                <h2 className="text-lg font-display font-medium uppercase tracking-tight mb-3">Preis und Laufzeit</h2>
+                <ul className="text-muted-foreground leading-relaxed space-y-1 list-disc pl-5">
+                  <li>15,00 € pro Monat, monatlich im Voraus. {STEUER}.</li>
+                  <li>Mindestlaufzeit 12 Monate, kündbar zum Ende der Mindestlaufzeit bis einen Monat vorher; danach jederzeit zum Ende des Abrechnungsmonats. Bei Geschäftsaufgabe Sonderkündigung mit einem Monat Frist.</li>
+                  <li>Zahlung per Kreditkarte oder SEPA-Lastschrift über unseren Zahlungsdienstleister Stripe.</li>
+                  <li>Ein Stundenkontingent ist nicht enthalten. Änderungen an Ihrer Website und andere Aufträge führen wir nur nach Ihrer Freigabe aus: 100 € pro Stunde ({STEUER}), abgerechnet in 15-Minuten-Schritten. Vorher nennen wir Ihnen den geschätzten Aufwand.</li>
+                </ul>
+              </section>
+              {divider}
+
+              <section>
+                <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:{" "}
+                  <a href={`${PORTAL}/abo-bedingungen.html#zusatzspeicher`} className={linkClass}>§ 10 der Vertragsbedingungen</a>.
+                </p>
+              </section>
+              {divider}
+
+              <section>
+                <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:{" "}
+                  <a href={`${PORTAL}/abo-bedingungen.html#wechsel`} className={linkClass}>§ 9 der Vertragsbedingungen</a>.
+                </p>
+              </section>
+              {divider}
+
+              <section>
+                <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.
+                </p>
+              </section>
+              {divider}
+
+              <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{" "}
+                  <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>
+                </div>
+              </section>
+              {divider}
+
+              <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#hosting`} className={linkClass}>Leistungsbeschreibung A (Hosting-Abo)</a>
+                  {" · "}
+                  <a href={`${PORTAL}/WEBklar-Abo-Vertragsunterlagen.pdf`} className={linkClass}>Vertragsunterlagen als PDF</a>
+                  {" · "}
+                  <a href={`${PORTAL}/datenschutz.html`} className={linkClass}>Datenschutz</a>
+                  <br />
+                  WEBklar GbR, Am Schwimmbad 10, 67722 Winnweiler · Telefon 0176 23726355 · E-Mail support@webklar.com
+                </p>
+              </section>
+            </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>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+};
+
+export default HostingAbo;

src/pages/WartungsAbo.tsx

@@ -3,21 +3,23 @@ import { Button } from "@/components/ui/button";
 import { ArrowLeft, ShieldCheck } from "lucide-react";
 
 const PORTAL = "https://project.webklar.com";
+const STEUER = "Endpreis, gemäß § 19 UStG ohne Umsatzsteuer";
 
 const divider = <div className="my-8 border-t border-border" aria-hidden />;
+const linkClass = "text-foreground underline hover:no-underline";
 
 const leistungen = [
   {
     titel: "Betrieb & Pflege Ihrer Website",
-    text: "Hosting auf unserem Server in Deutschland, Sicherheitsupdates, SSL-Zertifikat, tägliche Datensicherung und Überwachung der Erreichbarkeit.",
+    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.",
   },
   {
     titel: "1 Domain inklusive",
     text: "Registrierung auf Ihren Namen, Verlängerung und DNS-Verwaltung (.de, .com, .eu, .net oder .org).",
   },
   {
-    titel: "1 E-Mail-Postfach",
+    titel: "Beliebig viele Postfächer",
-    text: "Mit Ihrer eigenen Domain, 5 GB Speicher, Webmail und Zugriff per Outlook oder Smartphone.",
+    text: `Unter Ihrer eigenen Domain, zusammen 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: "1 Stunde Arbeitszeit pro Monat",
@@ -56,8 +58,9 @@ const WartungsAbo = () => {
                 Wartungs-Abo
               </h1>
               <p className="text-muted-foreground text-lg">
-                Betrieb, Pflege und Betreuung Ihrer Website: 50 € pro Monat, 12 Monate Mindestlaufzeit.
+                Betrieb, Pflege und Betreuung Ihrer Website: 50,00 € pro Monat, 12 Monate Mindestlaufzeit.
               </p>
+              <p className="text-muted-foreground text-sm mt-1">Alle Preise sind Endpreise, gemäß § 19 UStG ohne Umsatzsteuer.</p>
             </div>
 
             <article className="space-y-8 text-foreground">
@@ -77,20 +80,44 @@ const WartungsAbo = () => {
               <section>
                 <h2 className="text-lg font-display font-medium uppercase tracking-tight mb-3">Preis und Laufzeit</h2>
                 <ul className="text-muted-foreground leading-relaxed space-y-1 list-disc pl-5">
-                  <li>50,00 € pro Monat, monatlich im Voraus. Gemäß § 19 UStG wird keine Umsatzsteuer berechnet.</li>
+                  <li>50,00 € pro Monat, monatlich im Voraus. {STEUER}.</li>
                   <li>Mindestlaufzeit 12 Monate, kündbar zum Ende der Mindestlaufzeit bis einen Monat vorher; danach jederzeit zum Ende des Abrechnungsmonats. Bei Geschäftsaufgabe Sonderkündigung mit einem Monat Frist.</li>
                   <li>Zahlung per Kreditkarte oder SEPA-Lastschrift über unseren Zahlungsdienstleister Stripe.</li>
-                  <li>Arbeit über die enthaltene Stunde hinaus nur nach Ihrer Freigabe, 100 € pro Stunde, abgerechnet in 15-Minuten-Schritten.</li>
+                  <li>Arbeit über die enthaltene Stunde hinaus nur nach Ihrer Freigabe, 100 € pro Stunde ({STEUER}), abgerechnet in 15-Minuten-Schritten.</li>
                 </ul>
               </section>
               {divider}
 
+              <section>
+                <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:{" "}
+                  <a href={`${PORTAL}/abo-bedingungen.html#zusatzspeicher`} className={linkClass}>§ 10 der Vertragsbedingungen</a>.
+                </p>
+              </section>
+              {divider}
+
+              <section>
+                <h2 className="text-lg font-display font-medium uppercase tracking-tight mb-3">Hosting-Abo für statische Websites</h2>
+                <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.
+                </p>
+              </section>
+              {divider}
+
               <section>
                 <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 auf der Startseite. Dort sehen Sie danach jederzeit Ihr
+                  einfach an. Nach der Anmeldung finden Sie das Angebot im Bereich „Verträge“. Dort sehen Sie danach jederzeit
-                  Stundenkontingent, Ihre Rechnungen und können uns Aufträge schicken.
+                  Ihr Stundenkontingent, Ihre Rechnungen und können uns Aufträge schicken.
                 </p>
               </section>
               {divider}
@@ -98,9 +125,9 @@ 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. Bereits gezahlte Beträge erstatten wir dann
+                  Verbraucher können den Vertrag innerhalb von 14 Tagen widerrufen; das gilt für jede Bestellung, also für das
-                  nach der{" "}
+                  Abo und den Zusatzspeicher. Bereits gezahlte Beträge erstatten wir dann nach der{" "}
-                  <a href={`${PORTAL}/abo-bedingungen.html#widerruf`} className="text-foreground underline hover:no-underline">Widerrufsbelehrung</a>.
+                  <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">
@@ -117,11 +144,13 @@ 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="text-foreground underline hover:no-underline">Vertragsbedingungen mit Leistungsbeschreibung</a>
+                  <a href={`${PORTAL}/abo-bedingungen.html`} className={linkClass}>Vertragsbedingungen der WEBklar-Abos</a>
                   {" · "}
-                  <a href={`${PORTAL}/WEBklar-Wartungs-Abo-Vertragsunterlagen.pdf`} className="text-foreground underline hover:no-underline">Vertragsunterlagen als PDF</a>
+                  <a href={`${PORTAL}/abo-bedingungen.html#wartung`} className={linkClass}>Leistungsbeschreibung B (Wartungs-Abo)</a>
                   {" · "}
-                  <a href={`${PORTAL}/datenschutz.html`} className="text-foreground underline hover:no-underline">Datenschutz</a>
+                  <a href={`${PORTAL}/WEBklar-Abo-Vertragsunterlagen.pdf`} className={linkClass}>Vertragsunterlagen als PDF</a>
+                  {" · "}
+                  <a href={`${PORTAL}/datenschutz.html`} className={linkClass}>Datenschutz</a>
                   <br />
                   WEBklar GbR, Am Schwimmbad 10, 67722 Winnweiler · Telefon 0176 23726355 · E-Mail support@webklar.com
                 </p>

src/test/abos.test.tsx

@@ -0,0 +1,51 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+import HostingAbo from "@/pages/HostingAbo";
+import WartungsAbo from "@/pages/WartungsAbo";
+import AGB from "@/pages/AGB";
+
+// Texte, die auf einer Seite mehrfach vorkommen können, werden mit getAllByText
+// geprüft (getByText wirft bei mehreren Treffern); Abwesenheit mit queryAllByText.
+
+describe("Abo-Seiten", () => {
+  it("Hosting-Abo-Seite: Preis, Postfach, Links", () => {
+    render(
+      <MemoryRouter>
+        <HostingAbo />
+      </MemoryRouter>,
+    );
+    expect(screen.getAllByText(/15,00 € pro Monat/).length).toBeGreaterThan(0);
+    expect(screen.getAllByText(/1 E-Mail-Postfach/).length).toBeGreaterThan(0);
+    expect(screen.getByRole("link", { name: "Verträge hier kündigen" })).toHaveAttribute(
+      "href",
+      "https://project.webklar.com/kuendigen.html",
+    );
+    expect(screen.getByRole("link", { name: /Vertragsunterlagen als PDF/ })).toHaveAttribute(
+      "href",
+      "https://project.webklar.com/WEBklar-Abo-Vertragsunterlagen.pdf",
+    );
+  });
+
+  it("Wartungs-Abo-Seite: beliebig viele Postfächer, Zusatzspeicher", () => {
+    render(
+      <MemoryRouter>
+        <WartungsAbo />
+      </MemoryRouter>,
+    );
+    expect(screen.getAllByText(/beliebig viele Postfächer/).length).toBeGreaterThan(0);
+    expect(screen.queryAllByText("1 E-Mail-Postfach").length).toBe(0);
+    expect(screen.queryAllByText(/1 E-Mail-Postfach/).length).toBe(0);
+    expect(screen.getAllByText(/1,00 €/).length).toBeGreaterThan(0);
+  });
+
+  it("AGB Modul C verweist auf das Hosting-Abo", () => {
+    render(
+      <MemoryRouter>
+        <AGB />
+      </MemoryRouter>,
+    );
+    expect(screen.getAllByText(/Hosting-Abo/).length).toBeGreaterThan(0);
+    expect(screen.queryAllByText(/verlängern sich automatisch/).length).toBe(0);
+  });
+});

vitest.config.ts

@@ -1,5 +1,5 @@
 import { defineConfig } from "vitest/config";
-import react from "@vitejs/plugin-react-swc";
+import react from "@vitejs/plugin-react";
 import path from "path";
 
 export default defineConfig({