Feat: Kontaktformular im Impressum + /api/contact Endpoint ohne Auth (SW by-v986)

backend/main.py

@@ -253,6 +253,7 @@ from routes.challenges     import router as challenges_router
 from routes.gassi_zeiten   import router as gassi_zeiten_router
 from routes.help           import router as help_router
 from routes.feedback       import router as feedback_router
+from routes.contact        import router as contact_router
 from routes.invoices       import router as invoices_router
 
 app.include_router(auth_router,       prefix="/api/auth",       tags=["Auth"])
@@ -318,6 +319,7 @@ app.include_router(challenges_router,     prefix="/api/challenges",           ta
 app.include_router(gassi_zeiten_router,   prefix="/api/gassi-zeiten",         tags=["Gassi-Zeiten"])
 app.include_router(help_router,           prefix="/api/help",                 tags=["Hilfe/FAQ"])
 app.include_router(feedback_router,       prefix="/api/feedback",              tags=["Feedback"])
+app.include_router(contact_router,        prefix="/api/contact",               tags=["Kontakt"])
 app.include_router(invoices_router)
 
 
@@ -408,7 +410,7 @@ async def serve_media(path: str, request: _Request):
         raise _HE(404, "Nicht gefunden.")
     return _media_response(filepath)
 
-APP_VER = "985"  # muss mit APP_VER in app.js übereinstimmen
+APP_VER = "986"  # muss mit APP_VER in app.js übereinstimmen
 
 @app.get("/.well-known/assetlinks.json")
 async def assetlinks():

backend/routes/contact.py

@@ -0,0 +1,52 @@
+"""
+BAN YARO — Öffentliches Kontaktformular (kein Login erforderlich)
+Für Impressum-Kontaktpflicht nach § 5 DDG.
+"""
+
+from fastapi import APIRouter, Request
+from pydantic import BaseModel, EmailStr, Field
+from typing import Annotated
+
+from mailer import send_email, email_html
+from ratelimit import check as rl_check
+
+router = APIRouter()
+
+CONTACT_MAIL = "hallo@banyaro.app"
+
+
+class ContactIn(BaseModel):
+    name:    Annotated[str, Field(min_length=2, max_length=100)]
+    email:   EmailStr
+    subject: Annotated[str, Field(min_length=3, max_length=150)]
+    message: Annotated[str, Field(min_length=10, max_length=3000)]
+
+
+@router.post("")
+async def submit_contact(payload: ContactIn, request: Request):
+    rl_check(request, max_requests=3, window_seconds=3600, key=f"contact_{payload.email}")
+
+    body = f"""
+    <p style="margin:0 0 16px">Neue Kontaktanfrage über das Impressum-Formular:</p>
+    <table style="width:100%;border-collapse:collapse;font-size:13px;margin-bottom:20px">
+      <tr><td style="padding:6px 10px;background:#f5f0ea;font-weight:600;width:100px">Name</td>
+          <td style="padding:6px 10px;border-bottom:1px solid #eee">{payload.name}</td></tr>
+      <tr><td style="padding:6px 10px;background:#f5f0ea;font-weight:600">E-Mail</td>
+          <td style="padding:6px 10px;border-bottom:1px solid #eee">{payload.email}</td></tr>
+      <tr><td style="padding:6px 10px;background:#f5f0ea;font-weight:600">Betreff</td>
+          <td style="padding:6px 10px;border-bottom:1px solid #eee">{payload.subject}</td></tr>
+    </table>
+    <div style="background:#fdf6ef;border-left:4px solid #C4843A;padding:14px 16px;
+                border-radius:0 8px 8px 0;white-space:pre-wrap;font-size:14px;line-height:1.6">
+{payload.message}
+    </div>"""
+
+    plain = f"Kontakt von {payload.name} ({payload.email})\nBetreff: {payload.subject}\n\n{payload.message}"
+
+    await send_email(
+        CONTACT_MAIL,
+        f"Kontakt: {payload.subject} — {payload.name}",
+        email_html(body),
+        plain,
+    )
+    return {"ok": True}

backend/static/js/app.js

@@ -3,7 +3,7 @@
    Router, State-Management, Navigation, Initialisierung.
    ============================================================ */
 
-const APP_VER     = '985'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
+const APP_VER     = '986'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
 const APP_VERSION = '1.6.0'; // ← semantische Version, wird bei make release gesetzt
 const IS_STAGING  = location.hostname === 'staging.banyaro.app';
 // Cache-Bust-Parameter nach Update-Reload sofort entfernen

backend/static/js/pages/impressum.js

@@ -24,11 +24,58 @@ window.Page_impressum = (() => {
         <section style="margin-bottom:var(--space-6)">
           <h2 style="font-size:var(--text-base);font-weight:var(--weight-semibold);
                      color:var(--c-text);margin:0 0 var(--space-2)">Kontakt</h2>
-          <p style="font-size:var(--text-sm);color:var(--c-text-secondary);line-height:1.7;margin:0">
+          <p style="font-size:var(--text-sm);color:var(--c-text-secondary);line-height:1.7;margin:0 0 var(--space-4)">
             E-Mail: <a href="mailto:hallo@banyaro.app"
                        style="color:var(--c-primary)">hallo@banyaro.app</a><br>
-            Wir antworten in der Regel innerhalb von 24 Stunden.
+            Oder nutze das Formular — wir antworten in der Regel innerhalb von 24 Stunden.
           </p>
+
+          <form id="contact-form" style="display:flex;flex-direction:column;gap:var(--space-3)">
+            <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
+              <div>
+                <label style="display:block;font-size:var(--text-xs);font-weight:600;margin-bottom:4px;color:var(--c-text)">Name *</label>
+                <input id="cf-name" type="text" required maxlength="100"
+                       placeholder="Dein Name"
+                       style="width:100%;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);
+                              border:1.5px solid var(--c-border);background:var(--c-surface);
+                              color:var(--c-text);font-size:var(--text-sm);box-sizing:border-box">
+              </div>
+              <div>
+                <label style="display:block;font-size:var(--text-xs);font-weight:600;margin-bottom:4px;color:var(--c-text)">E-Mail *</label>
+                <input id="cf-email" type="email" required maxlength="200"
+                       placeholder="deine@email.de"
+                       style="width:100%;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);
+                              border:1.5px solid var(--c-border);background:var(--c-surface);
+                              color:var(--c-text);font-size:var(--text-sm);box-sizing:border-box">
+              </div>
+            </div>
+            <div>
+              <label style="display:block;font-size:var(--text-xs);font-weight:600;margin-bottom:4px;color:var(--c-text)">Betreff *</label>
+              <input id="cf-subject" type="text" required maxlength="150"
+                     placeholder="Worum geht es?"
+                     style="width:100%;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);
+                            border:1.5px solid var(--c-border);background:var(--c-surface);
+                            color:var(--c-text);font-size:var(--text-sm);box-sizing:border-box">
+            </div>
+            <div>
+              <label style="display:block;font-size:var(--text-xs);font-weight:600;margin-bottom:4px;color:var(--c-text)">Nachricht *</label>
+              <textarea id="cf-message" required maxlength="3000" rows="5"
+                        placeholder="Deine Nachricht…"
+                        style="width:100%;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);
+                               border:1.5px solid var(--c-border);background:var(--c-surface);
+                               color:var(--c-text);font-size:var(--text-sm);resize:vertical;
+                               font-family:inherit;box-sizing:border-box"></textarea>
+            </div>
+            <div id="cf-status" style="display:none;padding:var(--space-2) var(--space-3);
+                 border-radius:var(--radius-md);font-size:var(--text-sm)"></div>
+            <button id="cf-submit" type="submit"
+                    style="align-self:flex-start;padding:var(--space-2) var(--space-5);
+                           border-radius:var(--radius-full);border:none;cursor:pointer;
+                           background:var(--c-primary);color:#fff;font-size:var(--text-sm);
+                           font-weight:600">
+              Nachricht senden
+            </button>
+          </form>
         </section>
 
         <section style="margin-bottom:var(--space-6)">
@@ -72,7 +119,58 @@ window.Page_impressum = (() => {
     `;
   }
 
+  function _initContactForm(container) {
+    const form    = container.querySelector('#contact-form');
+    const statusEl = container.querySelector('#cf-status');
+    const submitBtn = container.querySelector('#cf-submit');
+    if (!form) return;
+
+    form.addEventListener('submit', async e => {
+      e.preventDefault();
+      const name    = container.querySelector('#cf-name').value.trim();
+      const email   = container.querySelector('#cf-email').value.trim();
+      const subject = container.querySelector('#cf-subject').value.trim();
+      const message = container.querySelector('#cf-message').value.trim();
+
+      submitBtn.disabled = true;
+      submitBtn.textContent = 'Wird gesendet…';
+      statusEl.style.display = 'none';
+
+      try {
+        const res = await fetch('/api/contact', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ name, email, subject, message }),
+        });
+        if (!res.ok) {
+          const err = await res.json().catch(() => ({}));
+          throw new Error(err.detail || 'Fehler beim Senden.');
+        }
+        statusEl.style.display = 'block';
+        statusEl.style.background = 'var(--c-success-bg, #f0fdf4)';
+        statusEl.style.color = 'var(--c-success, #16a34a)';
+        statusEl.textContent = '✓ Nachricht gesendet — wir melden uns bald!';
+        form.reset();
+      } catch (err) {
+        statusEl.style.display = 'block';
+        statusEl.style.background = '#fef2f2';
+        statusEl.style.color = '#dc2626';
+        statusEl.textContent = err.message || 'Fehler beim Senden. Bitte versuche es später erneut.';
+        submitBtn.disabled = false;
+        submitBtn.textContent = 'Nachricht senden';
+      }
+    });
+  }
+
+  const _origInit = init;
+
   function refresh() {}
 
-  return { init, refresh };
+  return {
+    init(container) {
+      _origInit(container);
+      _initContactForm(container);
+    },
+    refresh
+  };
 })();

backend/static/sw.js

@@ -3,7 +3,7 @@
    Offline-Cache + Push Notifications + Tile-Cache
    ============================================================ */
 
-const CACHE_VERSION = 'by-v985';
+const CACHE_VERSION = 'by-v986';
 const CACHE_STATIC  = `${CACHE_VERSION}-static`;
 const CACHE_TILES   = 'ban-yaro-tiles-v1';  // bleibt über SW-Updates erhalten
 const CACHE_API     = 'ban-yaro-api-v1';    // API-Response-Cache