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/App.tsx

@@ -10,6 +10,8 @@ import ContactPage from "./pages/Contact";
 import AGBPage from "./pages/AGB";
 import ImpressumPage from "./pages/Impressum";
 import AboutPage from "./pages/About";
+import WartungsAboPage from "./pages/WartungsAbo";
+import DatenschutzPage from "./pages/Datenschutz";
 import NotFound from "./pages/NotFound";
 
 const queryClient = new QueryClient();
@@ -28,6 +30,8 @@ const App = () => (
             <Route path="/agb" element={<AGBPage />} />
             <Route path="/impressum" element={<ImpressumPage />} />
             <Route path="/ueber-uns" element={<AboutPage />} />
+            <Route path="/wartungs-abo" element={<WartungsAboPage />} />
+            <Route path="/datenschutz" element={<DatenschutzPage />} />
             {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
             <Route path="*" element={<NotFound />} />
           </Routes>

src/components/Footer.tsx

@@ -12,6 +12,8 @@ type FooterLink = {
   to?: string;
   /** anchor / mailto / tel / external */
   href?: string;
+  /** hervorgehoben (z. B. Kündigungs- und Widerrufsbutton) */
+  strong?: boolean;
 };
 
 const footerLinks: { title: string; links: FooterLink[] }[] = [
@@ -22,6 +24,7 @@ const footerLinks: { title: string; links: FooterLink[] }[] = [
       { id: 2, title: "Über uns", to: "/ueber-uns" },
       { id: 3, title: "Leistungen", href: "/#services" },
       { id: 4, title: "Kontakt", to: "/kontakt" },
+      { id: 9, title: "Wartungs-Abo", to: "/wartungs-abo" },
     ],
   },
   {
@@ -36,6 +39,9 @@ const footerLinks: { title: string; links: FooterLink[] }[] = [
     links: [
       { id: 7, title: "AGB", to: "/agb" },
       { id: 8, title: "Impressum", to: "/impressum" },
+      { id: 10, title: "Datenschutz", href: "https://project.webklar.com/datenschutz.html" },
+      { id: 11, title: "Verträge hier kündigen", href: "https://project.webklar.com/kuendigen.html", strong: true },
+      { id: 12, title: "Vertrag widerrufen", href: "https://project.webklar.com/widerrufen.html", strong: true },
     ],
   },
 ];
@@ -84,7 +90,11 @@ const Footer: React.FC = () => {
                     ) : (
                       <a
                         href={link.href}
-                        className="transition-colors group-hover:text-neutral-200"
+                        className={
+                          link.strong
+                            ? "font-semibold text-white underline underline-offset-4"
+                            : "transition-colors group-hover:text-neutral-200"
+                        }
                       >
                         {link.title}
                       </a>

src/fonts.css

@@ -0,0 +1,37 @@
+/* Selbst gehostete Schriften (vorher per Google Fonts geladen). Lizenz: SIL Open Font License. */
+/* Inter – latin-ext */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 300 700;
+  font-display: swap;
+  src: url(/fonts/inter-latin-ext.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* Inter – latin */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 300 700;
+  font-display: swap;
+  src: url(/fonts/inter-latin.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* Space Grotesk – latin-ext */
+@font-face {
+  font-family: 'Space Grotesk';
+  font-style: normal;
+  font-weight: 300 700;
+  font-display: swap;
+  src: url(/fonts/space-grotesk-latin-ext.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* Space Grotesk – latin */
+@font-face {
+  font-family: 'Space Grotesk';
+  font-style: normal;
+  font-weight: 300 700;
+  font-display: swap;
+  src: url(/fonts/space-grotesk-latin.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

src/index.css

@@ -1,10 +1,4 @@
-/* Fonts first – @import must be at the very top */
+/* Schriften werden selbst gehostet (src/fonts.css), keine Verbindung zu Google Fonts */
-@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
-@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;500;600;700&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap");
 
 @tailwind base;
 @tailwind components;

src/main.tsx

@@ -1,5 +1,6 @@
 import { createRoot } from "react-dom/client";
 import App from "./App.tsx";
+import "./fonts.css";
 import "./index.css";
 
 createRoot(document.getElementById("root")!).render(<App />);

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 />
+                  die Gesellschafter Kenso Grimm und Justin Klein<br />
-                  Kenso Gri
+                  (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 />
+                  Gemäß § 19 UStG wird keine Umsatzsteuer erhoben (Kleinunternehmerregelung).
-                  (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
                 </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 />
+                  Für eigene Inhalte auf diesen Seiten sind wir 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 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;