KI-AGENT: Kontaktformular und Datenschutzseite ergänzt

website/app/pages/kontakt.vue

@@ -0,0 +1,124 @@
+<template>
+  <main>
+    <header class="site-header">
+      <NuxtLink class="brand" to="/" aria-label="FEDEO Startseite">
+        <img src="/Logo.png" alt="FEDEO" />
+      </NuxtLink>
+
+      <nav aria-label="Hauptnavigation">
+        <NuxtLink to="/zielgruppen">Zielgruppen</NuxtLink>
+        <NuxtLink to="/#funktionen">Funktionen</NuxtLink>
+        <NuxtLink to="/#open-source">Open Source</NuxtLink>
+        <NuxtLink to="/#selfhost">Selfhost</NuxtLink>
+        <NuxtLink to="/#matrix">Matrix</NuxtLink>
+        <NuxtLink to="/kontakt">Kontakt</NuxtLink>
+        <a class="login-link" href="https://app.fedeo.de">Einloggen</a>
+      </nav>
+    </header>
+
+    <section class="contact-page">
+      <div class="contact-heading">
+        <p class="eyebrow">Kontakt</p>
+        <h1>Sprich mit uns über FEDEO.</h1>
+        <p>
+          Ob Demo, Selfhosting, Integrationen oder ein konkreter Ablauf im Betrieb: Schreib uns kurz, worum es geht.
+        </p>
+      </div>
+
+      <form class="contact-form" @submit.prevent="submitForm">
+        <div class="form-grid">
+          <label>
+            Name
+            <input v-model="form.name" name="name" autocomplete="name" required>
+          </label>
+          <label>
+            E-Mail
+            <input v-model="form.email" name="email" autocomplete="email" required type="email">
+          </label>
+        </div>
+
+        <label>
+          Unternehmen
+          <input v-model="form.company" name="company" autocomplete="organization">
+        </label>
+
+        <label class="honeypot">
+          Website
+          <input v-model="form.website" name="website" tabindex="-1" autocomplete="off">
+        </label>
+
+        <label>
+          Nachricht
+          <textarea v-model="form.message" name="message" required rows="8"></textarea>
+        </label>
+
+        <label class="check-row">
+          <input v-model="form.privacy" type="checkbox" required>
+          <span>
+            Ich habe die <NuxtLink to="/datenschutz">Datenschutzerklärung</NuxtLink> gelesen und bin mit der Verarbeitung meiner Angaben zur Kontaktaufnahme einverstanden.
+          </span>
+        </label>
+
+        <div class="form-actions">
+          <button class="primary-action" :disabled="pending" type="submit">
+            {{ pending ? 'Wird gesendet' : 'Anfrage senden' }}
+          </button>
+          <p v-if="statusMessage" :class="['form-status', statusType]">{{ statusMessage }}</p>
+        </div>
+      </form>
+    </section>
+
+    <footer>
+      <img src="/Logo.png" alt="FEDEO" />
+      <div>
+        <NuxtLink to="/zielgruppen">Zielgruppen</NuxtLink>
+        <NuxtLink to="/kontakt">Kontakt</NuxtLink>
+        <NuxtLink to="/impressum">Impressum</NuxtLink>
+        <NuxtLink to="/datenschutz">Datenschutz</NuxtLink>
+        <a href="https://app.fedeo.de">Einloggen</a>
+      </div>
+      <p>Copyright © 2026 Federspiel Technology UG haftungsbeschränkt.</p>
+    </footer>
+  </main>
+</template>
+
+<script setup lang="ts">
+const form = reactive({
+  company: '',
+  email: '',
+  message: '',
+  name: '',
+  privacy: false,
+  website: ''
+})
+
+const pending = ref(false)
+const statusMessage = ref('')
+const statusType = ref<'error' | 'success'>('success')
+
+const submitForm = async () => {
+  pending.value = true
+  statusMessage.value = ''
+
+  try {
+    await $fetch('/api/contact', {
+      body: form,
+      method: 'POST'
+    })
+
+    form.company = ''
+    form.email = ''
+    form.message = ''
+    form.name = ''
+    form.privacy = false
+    form.website = ''
+    statusType.value = 'success'
+    statusMessage.value = 'Danke, deine Nachricht wurde gesendet.'
+  } catch (error: any) {
+    statusType.value = 'error'
+    statusMessage.value = error?.statusMessage || 'Die Nachricht konnte gerade nicht gesendet werden.'
+  } finally {
+    pending.value = false
+  }
+}
+</script>