Rechtliches: Impressum (DDG, Gesellschafter), Datenschutz, Abo-Seite, lokale Schriften

- Impressum: § 5 DDG, vertreten durch Kenso Grimm und Justin Klein
  (einzeln vertretungsberechtigt), Notizsatz und RStV-Abschnitt entfernt,
  Haftung nach DSA statt TMG, OS-Plattform-Link entfernt (abgeschaltet)
- /datenschutz leitet auf die gemeinsame Datenschutzerklaerung weiter
- /wartungs-abo: oeffentliche Leistungsbeschreibung (auch fuer Stripe)
- Footer: Datenschutz, 'Vertraege hier kuendigen', 'Vertrag widerrufen'
- Inter und Space Grotesk selbst gehostet statt Google Fonts; vier
  ungenutzte Google-Schriften entfernt

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

src/pages/Datenschutz.tsx

@@ -0,0 +1,20 @@
+import { useEffect } from "react";
+
+// Die Datenschutzerklärung gilt für webklar.com und das Kundenportal gemeinsam
+// und liegt zentral im Kundenportal.
+const URL = "https://project.webklar.com/datenschutz.html";
+
+const Datenschutz = () => {
+  useEffect(() => {
+    window.location.replace(URL);
+  }, []);
+  return (
+    <main className="min-h-screen flex items-center justify-center p-6 text-center">
+      <p>
+        Weiter zur <a href={URL} className="underline">Datenschutzerklärung</a> …
+      </p>
+    </main>
+  );
+};
+
+export default Datenschutz;

src/pages/Impressum.tsx

@@ -45,7 +45,7 @@ const Impressum = () => {
                 Impressum
               </h1>
               <p className="text-muted-foreground text-lg">
-                Angaben gemäß § 5 TMG
+                Angaben gemäß § 5 DDG
               </p>
             </div>
 
@@ -68,8 +68,8 @@ const Impressum = () => {
                   Vertreten durch
                 </h2>
                 <p className="text-muted-foreground leading-relaxed">
-                  Geschäftsführer:<br />
-                  Kenso Gri
+                  die Gesellschafter Kenso Grimm und Justin Klein<br />
+                  (jeder einzeln vertretungsberechtigt)
                 </p>
               </section>
               {impressumDivider}
@@ -100,21 +100,7 @@ const Impressum = () => {
                   Umsatzsteuer
                 </h2>
                 <p className="text-muted-foreground leading-relaxed">
-                  Gemäß § 19 UStG wird keine Umsatzsteuer erhoben (Kleinunternehmerregelung).<br />
-                  (Falls das nicht stimmt oder sich ändert, unbedingt sagen.)
-                </p>
-              </section>
-              {impressumDivider}
-
-              <section>
-                <h2 className="text-lg font-display font-medium uppercase tracking-tight text-foreground mb-3">
-                  Verantwortlich für den Inhalt nach § 55 Absatz 2 RStV
-                </h2>
-                <p className="text-muted-foreground leading-relaxed whitespace-pre-line">
-                  Kenso Gri<br />
-                  Schliertal 21<br />
-                  67468 Frankenstein<br />
-                  Deutschland
+                  Gemäß § 19 UStG wird keine Umsatzsteuer erhoben (Kleinunternehmerregelung).
                 </p>
               </section>
               {impressumDivider}
@@ -124,8 +110,8 @@ const Impressum = () => {
                   Haftung für Inhalte
                 </h2>
                 <p className="text-muted-foreground leading-relaxed space-y-2">
-                  Als Diensteanbieter sind wir gemäß § 7 Absatz 1 TMG für eigene Inhalte auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich.<br />
-                  Nach §§ 8 bis 10 TMG sind wir als Diensteanbieter jedoch nicht verpflichtet, übermittelte oder gespeicherte fremde Informationen zu überwachen oder nach Umständen zu forschen, die auf eine rechtswidrige Tätigkeit hinweisen.
+                  Für eigene Inhalte auf diesen Seiten sind wir nach den allgemeinen Gesetzen verantwortlich.<br />
+                  Für fremde Informationen, die wir lediglich übermitteln oder speichern, gelten die Haftungsbeschränkungen der Artikel 4 bis 6 der Verordnung (EU) 2022/2065 (Gesetz über digitale Dienste). Wir sind nicht verpflichtet, solche Informationen zu überwachen oder nach Umständen zu forschen, die auf eine rechtswidrige Tätigkeit hinweisen.
                 </p>
               </section>
               {impressumDivider}
@@ -155,22 +141,25 @@ const Impressum = () => {
 
               <section>
                 <h2 className="text-lg font-display font-medium uppercase tracking-tight text-foreground mb-3">
-                  Online-Streitbeilegung
+                  Verbraucherstreitbeilegung
                 </h2>
                 <p className="text-muted-foreground leading-relaxed space-y-2">
-                  Die Europäische Kommission stellt eine Plattform zur Online-Streitbeilegung (OS) bereit:<br />
-                  <a
-                    href="https://ec.europa.eu/consumers/odr"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="text-foreground underline hover:no-underline"
-                  >
-                    https://ec.europa.eu/consumers/odr
-                  </a>
-                  <br /><br />
                   Wir sind nicht verpflichtet und nicht bereit, an Streitbeilegungsverfahren vor einer Verbraucherschlichtungsstelle teilzunehmen.
                 </p>
               </section>
+              {impressumDivider}
+
+              <section>
+                <h2 className="text-lg font-display font-medium uppercase tracking-tight text-foreground mb-3">
+                  Datenschutz
+                </h2>
+                <p className="text-muted-foreground leading-relaxed">
+                  Informationen zur Verarbeitung personenbezogener Daten finden Sie in unserer{" "}
+                  <a href="https://project.webklar.com/datenschutz.html" className="text-foreground underline hover:no-underline">
+                    Datenschutzerklärung
+                  </a>.
+                </p>
+              </section>
             </article>
 
             {/* Back / Contact */}

src/pages/WartungsAbo.tsx

@@ -0,0 +1,146 @@
+import { Link } from "react-router-dom";
+import { Button } from "@/components/ui/button";
+import { ArrowLeft, ShieldCheck } from "lucide-react";
+
+const PORTAL = "https://project.webklar.com";
+
+const divider = <div className="my-8 border-t border-border" aria-hidden />;
+
+const leistungen = [
+  {
+    titel: "Betrieb & Pflege Ihrer Website",
+    text: "Hosting auf unserem Server in Deutschland, Sicherheitsupdates, SSL-Zertifikat, tägliche Datensicherung und Überwachung der Erreichbarkeit.",
+  },
+  {
+    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.",
+  },
+  {
+    titel: "1 Stunde Arbeitszeit pro Monat",
+    text: "Für Änderungen und Unterstützung rund um Ihre Website. Nicht genutzte Zeit bleibt 12 Monate verfügbar.",
+  },
+];
+
+const WartungsAbo = () => {
+  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">
+                <ShieldCheck 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">
+                Wartungs-Abo
+              </h1>
+              <p className="text-muted-foreground text-lg">
+                Betrieb, Pflege und Betreuung Ihrer Website: 50 € pro Monat, monatlich kündbar.
+              </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">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>Keine Mindestlaufzeit, jederzeit zum Ende des Abrechnungsmonats kündbar.</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>
+                </ul>
+              </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
+                  Stundenkontingent, Ihre Rechnungen 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. 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>.
+                  Kündigen können Sie jederzeit online, ohne Anmeldung, im Kundenportal 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="text-foreground underline hover:no-underline">Vertragsbedingungen mit Leistungsbeschreibung</a>
+                  {" · "}
+                  <a href={`${PORTAL}/WEBklar-Wartungs-Abo-Vertragsunterlagen.pdf`} className="text-foreground underline hover:no-underline">Vertragsunterlagen als PDF</a>
+                  {" · "}
+                  <a href={`${PORTAL}/datenschutz.html`} className="text-foreground underline hover:no-underline">Datenschutz</a>
+                  <br />
+                  WEBklar GbR, Am Schwimmbad 10, 67722 Winnweiler · Telefon 0176 23726355 · E-Mail kenso.gri@gmail.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 WartungsAbo;