appwrite anbindung

docs/APPWRITE-CORS.md

@@ -0,0 +1,32 @@
+# Appwrite CORS / Plattformen einrichten
+
+Wenn das Kontaktformular mit **403 (Forbidden)** oder **CORS** fehlschlägt, fehlt deine Origin in Appwrite.
+
+## In der Appwrite Console
+
+1. Öffne **https://appwrite.webklar.com** (oder deine Appwrite-Installation).
+2. Wähle dein **Projekt** (Project ID: `696b82270034001dab69`).
+3. Gehe zu **Settings** (Projekt-Einstellungen).
+4. Unter **Platforms** (Plattformen) siehst du z. B. eine Web-App mit `http://localhost:8080`.
+
+## Erlaubte Origins hinzufügen
+
+Du musst **jede URL**, von der aus die Webseite läuft, als **Plattform** anlegen (oder die bestehende Web-Plattform um weitere Hostnamen erweitern, falls deine Appwrite-Version das unterstützt).
+
+Typischerweise:
+
+| Umgebung | URL (Origin) |
+|----------|----------------|
+| Lokal / Dev | `http://localhost:8080` |
+| Server (IP) | `http://100.84.12.11:8080` |
+| Produktion | `https://webklar.com` (bzw. deine echte Domain) |
+
+### Vorgehen
+
+- **Neue Plattform** → **Web App** anlegen:
+  - **Name:** z. B. „Webklar Produktion“
+  - **Hostname:** `webklar.com` (ohne https://)  
+    Oder für die IP: `100.84.12.11` (und ggf. Port in den Einstellungen, falls nötig).
+- Oder in der **bestehenden** Web-App alle benötigten Hostnames eintragen (je nach Appwrite-Version: mehrere Hostnames oder mehrere Web-Apps).
+
+Nach dem Speichern sind die neuen Origins erlaubt und der CORS-Fehler sollte verschwinden. Seite und Kontaktformular neu laden und testen.

src/App.tsx

@@ -16,7 +16,7 @@ const App = () => (
     <TooltipProvider>
       <Toaster />
       <Sonner />
-      <BrowserRouter>
+      <BrowserRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
         <Routes>
           <Route path="/" element={<Index />} />
           <Route path="/kontakt" element={<ContactPage />} />

src/index.css

@@ -139,6 +139,7 @@
     @apply bg-background text-foreground antialiased;
     font-family: 'Inter', system-ui, sans-serif;
     letter-spacing: -0.01em;
+    position: relative; /* für Motion useScroll – Scroll-Container braucht nicht-static position */
   }
 
   h1, h2, h3, h4, h5, h6 {