Implementiere Impressum/Datenschutz-System und bereinige URL-Konfiguration

- Neues Impressum/Datenschutz-Tab mit konfigurierbaren rechtlichen Daten
- Konfigurationsdatei legal-config.ts für alle rechtlichen Informationen
- RPC-Endpoint legal.getConfig() für rechtliche Daten
- Schöne Tab-Navigation zwischen Impressum und Datenschutz
- Responsive Design mit Loading-States und Fehlerbehandlung
- Alle rechtlichen Daten über Umgebungsvariablen konfigurierbar
- FRONTEND_URL entfernt - nur noch DOMAIN wird verwendet
- Hilfsfunktion generateUrl() für konsistente URL-Generierung
- Code-Duplikation in bookings.ts eliminiert
- .env.example aktualisiert mit allen neuen Variablen
- README.md dokumentiert neue rechtliche Konfiguration
- DSGVO- und TMG-konforme Inhalte implementiert

src/client/app.tsx

@@ -9,10 +9,11 @@ import { AdminCalendar } from "@/client/components/admin-calendar";
 import { InitialDataLoader } from "@/client/components/initial-data-loader";
 import { AdminAvailability } from "@/client/components/admin-availability";
 import CancellationPage from "@/client/components/cancellation-page";
+import LegalPage from "@/client/components/legal-page";
 
 function App() {
   const { user, isLoading, isOwner } = useAuth();
-  const [activeTab, setActiveTab] = useState<"booking" | "admin-treatments" | "admin-bookings" | "admin-calendar" | "admin-availability" | "profile">("booking");
+  const [activeTab, setActiveTab] = useState<"booking" | "admin-treatments" | "admin-bookings" | "admin-calendar" | "admin-availability" | "profile" | "legal">("booking");
 
   // Check for cancellation token in URL
   useEffect(() => {
@@ -58,8 +59,14 @@ function App() {
     return <LoginForm />;
   }
 
+  // Show legal page if legal tab is active
+  if (activeTab === "legal") {
+    return <LegalPage />;
+  }
+
   const tabs = [
     { id: "booking", label: "Termin buchen", icon: "📅", requiresAuth: false },
+    { id: "legal", label: "Impressum/Datenschutz", icon: "📋", requiresAuth: false },
     { id: "admin-treatments", label: "Behandlungen verwalten", icon: "💅", requiresAuth: true },
     { id: "admin-bookings", label: "Buchungen verwalten", icon: "📋", requiresAuth: true },
     { id: "admin-calendar", label: "Kalender", icon: "📆", requiresAuth: true },

src/client/components/legal-page.tsx

@@ -0,0 +1,241 @@
+import React, { useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { queryClient } from "@/client/rpc-client";
+
+export default function LegalPage() {
+  const [activeSection, setActiveSection] = useState<"impressum" | "datenschutz">("impressum");
+
+  const { data: legalConfig, isLoading, error } = useQuery({
+    queryKey: ["legal", "config"],
+    queryFn: () => queryClient.legal.getConfig(),
+  });
+
+  if (isLoading) {
+    return (
+      <div className="min-h-screen bg-gradient-to-br from-pink-50 to-purple-50 flex items-center justify-center">
+        <div className="bg-white p-8 rounded-lg shadow-lg max-w-md w-full">
+          <div className="flex items-center justify-center">
+            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-pink-500"></div>
+            <span className="ml-3 text-gray-600">Lade rechtliche Informationen...</span>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error || !legalConfig) {
+    return (
+      <div className="min-h-screen bg-gradient-to-br from-pink-50 to-purple-50 flex items-center justify-center">
+        <div className="bg-white p-8 rounded-lg shadow-lg max-w-md w-full">
+          <div className="text-center">
+            <div className="w-16 h-16 mx-auto mb-4 bg-red-100 rounded-full flex items-center justify-center">
+              <svg className="w-8 h-8 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
+              </svg>
+            </div>
+            <h2 className="text-xl font-bold text-gray-900 mb-2">Fehler</h2>
+            <p className="text-gray-600 mb-4">
+              Die rechtlichen Informationen konnten nicht geladen werden.
+            </p>
+            <a 
+              href="/" 
+              className="inline-flex items-center px-4 py-2 bg-pink-600 text-white rounded-lg hover:bg-pink-700 transition-colors"
+            >
+              Zur Startseite
+            </a>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-pink-50 to-purple-50">
+      <div className="max-w-4xl mx-auto px-4 py-8">
+        {/* Header */}
+        <div className="bg-white rounded-lg shadow-lg mb-6">
+          <div className="px-6 py-4 border-b border-gray-200">
+            <div className="flex items-center space-x-3">
+              <img
+                src="/assets/stargilnails_logo_transparent_112.png"
+                alt="Stargil Nails Logo"
+                className="w-12 h-12 object-contain"
+              />
+              <div>
+                <h1 className="text-2xl font-bold text-gray-900">Rechtliche Informationen</h1>
+                <p className="text-sm text-gray-600">Impressum und Datenschutz</p>
+              </div>
+            </div>
+          </div>
+          
+          {/* Tab Navigation */}
+          <div className="px-6 py-4">
+            <div className="flex space-x-1 bg-gray-100 p-1 rounded-lg">
+              <button
+                onClick={() => setActiveSection("impressum")}
+                className={`flex-1 py-2 px-4 rounded-md text-sm font-medium transition-colors ${
+                  activeSection === "impressum"
+                    ? "bg-white text-pink-600 shadow-sm"
+                    : "text-gray-600 hover:text-gray-900"
+                }`}
+              >
+                📋 Impressum
+              </button>
+              <button
+                onClick={() => setActiveSection("datenschutz")}
+                className={`flex-1 py-2 px-4 rounded-md text-sm font-medium transition-colors ${
+                  activeSection === "datenschutz"
+                    ? "bg-white text-pink-600 shadow-sm"
+                    : "text-gray-600 hover:text-gray-900"
+                }`}
+              >
+                🔒 Datenschutz
+              </button>
+            </div>
+          </div>
+        </div>
+
+        {/* Content */}
+        <div className="bg-white rounded-lg shadow-lg p-6">
+          {activeSection === "impressum" ? (
+            <div className="prose max-w-none">
+              <h2 className="text-2xl font-bold text-gray-900 mb-6">Impressum</h2>
+              
+              <div className="space-y-6">
+                <div>
+                  <h3 className="text-lg font-semibold text-gray-900 mb-2">Anbieter</h3>
+                  <p className="text-gray-700">
+                    <strong>{legalConfig.companyName}</strong><br />
+                    Inhaber: {legalConfig.ownerName}
+                  </p>
+                  <p className="text-sm text-gray-500 mt-2">
+                    ℹ️ Diese Informationen können über Umgebungsvariablen in der .env-Datei angepasst werden.
+                  </p>
+                </div>
+
+                <div>
+                  <h3 className="text-lg font-semibold text-gray-900 mb-2">Anschrift</h3>
+                  <p className="text-gray-700">
+                    {legalConfig.address.street}<br />
+                    {legalConfig.address.postalCode} {legalConfig.address.city}<br />
+                    {legalConfig.address.country}
+                  </p>
+                </div>
+
+                <div>
+                  <h3 className="text-lg font-semibold text-gray-900 mb-2">Kontakt</h3>
+                  <p className="text-gray-700">
+                    <strong>Telefon:</strong> {legalConfig.contact.phone}<br />
+                    <strong>E-Mail:</strong> {legalConfig.contact.email}<br />
+                    <strong>Website:</strong> {legalConfig.contact.website}
+                  </p>
+                </div>
+
+                {legalConfig.businessDetails.taxId && (
+                  <div>
+                    <h3 className="text-lg font-semibold text-gray-900 mb-2">Geschäftliche Angaben</h3>
+                    <p className="text-gray-700">
+                      {legalConfig.businessDetails.taxId && (
+                        <>Steuernummer: {legalConfig.businessDetails.taxId}<br /></>
+                      )}
+                      {legalConfig.businessDetails.vatId && (
+                        <>USt-IdNr.: {legalConfig.businessDetails.vatId}<br /></>
+                      )}
+                      {legalConfig.businessDetails.commercialRegister && (
+                        <>Handelsregister: {legalConfig.businessDetails.commercialRegister}<br /></>
+                      )}
+                      Verantwortlich für den Inhalt: {legalConfig.businessDetails.responsibleForContent}
+                    </p>
+                  </div>
+                )}
+
+                <div className="bg-gray-50 p-4 rounded-lg">
+                  <h3 className="text-lg font-semibold text-gray-900 mb-2">Haftungsausschluss</h3>
+                  <p className="text-sm text-gray-600">
+                    Die Inhalte unserer Seiten wurden mit größter Sorgfalt erstellt. Für die Richtigkeit, 
+                    Vollständigkeit und Aktualität der Inhalte können wir jedoch keine Gewähr übernehmen. 
+                    Als Diensteanbieter sind wir gemäß § 7 Abs.1 TMG für eigene Inhalte auf diesen Seiten 
+                    nach den allgemeinen Gesetzen verantwortlich.
+                  </p>
+                </div>
+              </div>
+            </div>
+          ) : (
+            <div className="prose max-w-none">
+              <h2 className="text-2xl font-bold text-gray-900 mb-6">Datenschutzerklärung</h2>
+              
+              <div className="space-y-6">
+                <div>
+                  <h3 className="text-lg font-semibold text-gray-900 mb-2">Verantwortlicher</h3>
+                  <p className="text-gray-700">
+                    {legalConfig.dataProtection.responsiblePerson}<br />
+                    E-Mail: {legalConfig.dataProtection.email}
+                  </p>
+                </div>
+
+                <div>
+                  <h3 className="text-lg font-semibold text-gray-900 mb-2">Zweck der Datenverarbeitung</h3>
+                  <p className="text-gray-700">{legalConfig.dataProtection.purpose}</p>
+                </div>
+
+                <div>
+                  <h3 className="text-lg font-semibold text-gray-900 mb-2">Rechtsgrundlage</h3>
+                  <p className="text-gray-700">{legalConfig.dataProtection.legalBasis}</p>
+                </div>
+
+                <div>
+                  <h3 className="text-lg font-semibold text-gray-900 mb-2">Datenspeicherung</h3>
+                  <p className="text-gray-700">{legalConfig.dataProtection.dataRetention}</p>
+                </div>
+
+                <div>
+                  <h3 className="text-lg font-semibold text-gray-900 mb-2">Ihre Rechte</h3>
+                  <p className="text-gray-700">{legalConfig.dataProtection.rights}</p>
+                </div>
+
+                <div>
+                  <h3 className="text-lg font-semibold text-gray-900 mb-2">Cookies</h3>
+                  <p className="text-gray-700">{legalConfig.dataProtection.cookies}</p>
+                </div>
+
+                {legalConfig.dataProtection.thirdPartyServices.length > 0 && (
+                  <div>
+                    <h3 className="text-lg font-semibold text-gray-900 mb-2">Drittanbieter-Services</h3>
+                    <ul className="list-disc list-inside text-gray-700 space-y-1">
+                      {legalConfig.dataProtection.thirdPartyServices.map((service, index) => (
+                        <li key={index}>{service}</li>
+                      ))}
+                    </ul>
+                  </div>
+                )}
+
+                <div>
+                  <h3 className="text-lg font-semibold text-gray-900 mb-2">Datensicherheit</h3>
+                  <p className="text-gray-700">{legalConfig.dataProtection.dataSecurity}</p>
+                </div>
+
+                <div className="bg-blue-50 p-4 rounded-lg">
+                  <h3 className="text-lg font-semibold text-blue-900 mb-2">Kontakt zum Datenschutz</h3>
+                  <p className="text-blue-800">{legalConfig.dataProtection.contactDataProtection}</p>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Back to Home */}
+        <div className="text-center mt-6">
+          <a 
+            href="/" 
+            className="inline-flex items-center px-4 py-2 bg-pink-600 text-white rounded-lg hover:bg-pink-700 transition-colors"
+          >
+            <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
+            </svg>
+            Zurück zur Startseite
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}