KI-AGENT: Zielgruppen-Seite für Webseite ergänzt

website/app/assets/css/main.css

@@ -392,6 +392,7 @@ footer {
 }
 
 .workflow-section,
+.audience-teaser,
 .matrix-section,
 .open-source-section,
 .script-section,
@@ -443,6 +444,17 @@ footer {
   width: 2rem;
 }
 
+.audience-teaser {
+  align-items: center;
+  border-top: 1px solid rgba(23, 33, 31, 0.12);
+  grid-template-columns: minmax(0, 1fr) auto;
+}
+
+.audience-teaser h2 {
+  font-size: clamp(1.8rem, 3vw, 2.8rem);
+  max-width: 52rem;
+}
+
 .matrix-section {
   border-top: 1px solid rgba(23, 33, 31, 0.12);
   grid-template-columns: 1fr;
@@ -663,6 +675,79 @@ footer {
   padding: clamp(3rem, 7vw, 6rem) clamp(1rem, 4vw, 2rem) 5rem;
 }
 
+.audience-page {
+  margin: 0 auto;
+  max-width: 1180px;
+  padding: clamp(3rem, 7vw, 6rem) clamp(1rem, 4vw, 2rem) 5rem;
+}
+
+.audience-heading {
+  max-width: 58rem;
+  margin-bottom: 2.5rem;
+}
+
+.audience-heading h1 {
+  max-width: 12ch;
+}
+
+.audience-heading p {
+  color: #51605c;
+  font-size: 1.08rem;
+  line-height: 1.7;
+  max-width: 46rem;
+}
+
+.audience-grid {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.audience-grid article {
+  background: rgba(255, 255, 255, 0.76);
+  border: 1px solid rgba(23, 33, 31, 0.1);
+  border-radius: 0.5rem;
+  padding: 1.35rem;
+}
+
+.audience-grid span {
+  color: var(--accent-dark);
+  display: inline-block;
+  font-size: 0.82rem;
+  font-weight: 800;
+  margin-bottom: 1rem;
+}
+
+.audience-grid h2 {
+  font-size: 1.2rem;
+  margin-bottom: 0.75rem;
+}
+
+.audience-grid p,
+.audience-grid li,
+.audience-fit li {
+  color: #51605c;
+  line-height: 1.6;
+}
+
+.audience-grid ul,
+.audience-fit ul {
+  display: grid;
+  gap: 0.55rem;
+  margin: 1rem 0 0;
+  padding-left: 1.1rem;
+}
+
+.audience-fit {
+  align-items: start;
+  border-top: 1px solid rgba(23, 33, 31, 0.12);
+  display: grid;
+  gap: 2rem;
+  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
+  margin-top: 5rem;
+  padding-top: 4rem;
+}
+
 .legal-heading {
   max-width: 45rem;
   margin-bottom: 2.5rem;
@@ -742,6 +827,7 @@ footer p {
 @media (max-width: 980px) {
   .hero-section,
   .workflow-section,
+  .audience-teaser,
   .matrix-section,
   .open-source-section,
   .script-section,
@@ -755,6 +841,8 @@ footer p {
 
   .highlights,
   .feature-grid,
+  .audience-grid,
+  .audience-fit,
   .matrix-layout,
   .federation-panel,
   .legal-grid {
@@ -797,6 +885,11 @@ footer p {
     font-size: 3rem;
   }
 
+  .audience-heading h1 {
+    font-size: 2.55rem;
+    max-width: none;
+  }
+
   .product-preview {
     min-height: auto;
   }
@@ -812,6 +905,7 @@ footer p {
   .metric-row,
   .highlights,
   .feature-grid,
+  .audience-grid,
   .matrix-stack,
   .legal-grid {
     grid-template-columns: 1fr;

website/app/pages/impressum.vue

@@ -6,6 +6,7 @@
       </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>
@@ -97,6 +98,7 @@
     <footer>
       <img src="/Logo.png" alt="FEDEO" />
       <div>
+        <NuxtLink to="/zielgruppen">Zielgruppen</NuxtLink>
         <NuxtLink to="/impressum">Impressum</NuxtLink>
         <a href="https://federspiel.tech/datenschutz">Datenschutz</a>
         <a href="https://app.fedeo.de">Einloggen</a>

website/app/pages/index.vue

@@ -6,6 +6,7 @@
       </a>
 
       <nav aria-label="Hauptnavigation">
+        <NuxtLink to="/zielgruppen">Zielgruppen</NuxtLink>
         <a href="#funktionen">Funktionen</a>
         <a href="#open-source">Open Source</a>
         <a href="#selfhost">Selfhost</a>
@@ -127,6 +128,14 @@
       </ol>
     </section>
 
+    <section class="audience-teaser">
+      <div>
+        <p class="eyebrow">Für wen</p>
+        <h2>Gemacht für Teams, bei denen Büro und Einsatzort zusammenarbeiten müssen.</h2>
+      </div>
+      <NuxtLink class="secondary-action" to="/zielgruppen">Zielgruppen ansehen</NuxtLink>
+    </section>
+
     <section id="open-source" class="open-source-section">
       <div>
         <p class="eyebrow">Open Source</p>
@@ -212,6 +221,7 @@
     <footer>
       <img src="/Logo.png" alt="FEDEO" />
       <div>
+        <NuxtLink to="/zielgruppen">Zielgruppen</NuxtLink>
         <NuxtLink to="/impressum">Impressum</NuxtLink>
         <a href="https://federspiel.tech/datenschutz">Datenschutz</a>
         <a href="https://app.fedeo.de">Einloggen</a>

website/app/pages/zielgruppen.vue

@@ -0,0 +1,138 @@
+<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="audience-page">
+      <div class="audience-heading">
+        <p class="eyebrow">Zielgruppen</p>
+        <h1>FEDEO passt zu Betrieben, die viele kleine Abläufe sauber zusammenhalten müssen.</h1>
+        <p>
+          Die Software ist besonders stark dort, wo Projekte, Einsatzorte, Mitarbeitende, Material, Kommunikation und kaufmännische Vorgänge in einem Alltag zusammenlaufen.
+        </p>
+      </div>
+
+      <div class="audience-grid">
+        <article v-for="audience in audiences" :key="audience.title">
+          <span>{{ audience.tag }}</span>
+          <h2>{{ audience.title }}</h2>
+          <p>{{ audience.description }}</p>
+          <ul>
+            <li v-for="item in audience.points" :key="item">{{ item }}</li>
+          </ul>
+        </article>
+      </div>
+
+      <div class="audience-fit">
+        <div>
+          <p class="eyebrow">Passt besonders gut, wenn</p>
+          <h2>dein Team nicht noch ein weiteres isoliertes Tool braucht.</h2>
+        </div>
+        <ul>
+          <li>Informationen heute über Tabellen, Messenger, E-Mail und Bauchgefühl verteilt sind.</li>
+          <li>Projektarbeit, Dokumentation, Zeiten und kaufmännische Abläufe enger zusammenrücken sollen.</li>
+          <li>Selfhosting, Open Source und eigene Datenhoheit echte Kriterien sind.</li>
+          <li>Kommunikation nicht lose neben der Arbeit laufen soll, sondern im Projektkontext bleibt.</li>
+        </ul>
+      </div>
+    </section>
+
+    <section class="contact-section">
+      <div>
+        <p class="eyebrow">Einordnung</p>
+        <h2>Nicht sicher, ob FEDEO zu deinem Betrieb passt?</h2>
+        <p>In einer Demo lässt sich schnell prüfen, welche Abläufe FEDEO direkt abdecken kann.</p>
+      </div>
+      <a class="primary-action" href="https://fedeo.de/kontakt">Demo anfragen</a>
+    </section>
+
+    <footer>
+      <img src="/Logo.png" alt="FEDEO" />
+      <div>
+        <NuxtLink to="/zielgruppen">Zielgruppen</NuxtLink>
+        <NuxtLink to="/impressum">Impressum</NuxtLink>
+        <a href="https://federspiel.tech/datenschutz">Datenschutz</a>
+        <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 audiences = [
+  {
+    tag: 'Service',
+    title: 'Technische Dienstleister',
+    description: 'Für Teams, die Einsätze planen, Geräte betreuen und Arbeit nachvollziehbar dokumentieren müssen.',
+    points: [
+      'Projekt- und Objektakten für wiederkehrende Arbeiten',
+      'Zeiten, Material und Kommunikation im gleichen Kontext',
+      'Mobile Nutzung für Mitarbeitende vor Ort'
+    ]
+  },
+  {
+    tag: 'Handwerk',
+    title: 'Handwerks- und Montagebetriebe',
+    description: 'Für Betriebe, bei denen Büro, Baustelle, Lager und Abrechnung jeden Tag ineinandergreifen.',
+    points: [
+      'Plantafel für Mitarbeitende, Fahrzeuge und Ressourcen',
+      'Rapporte und Arbeitszeiten aus dem Einsatz heraus',
+      'Bestände, Geräte und Belege ohne Medienbruch'
+    ]
+  },
+  {
+    tag: 'Betrieb',
+    title: 'Kleine und mittlere Unternehmen',
+    description: 'Für Unternehmen, die mehr Struktur brauchen, aber keine schwere Konzernsoftware einführen wollen.',
+    points: [
+      'Zentrale Stammdaten für Kontakte, Objekte und Projekte',
+      'Aufgaben, Kommunikation und Dokumente an einem Ort',
+      'Selfhost-Option für Kontrolle über Betrieb und Daten'
+    ]
+  },
+  {
+    tag: 'Verwaltung',
+    title: 'Organisationen mit vielen Vorgängen',
+    description: 'Für Teams, die wiederkehrende Abläufe, Zuständigkeiten und Nachweise ruhig organisieren müssen.',
+    points: [
+      'Vorgänge mit Historie, Dokumentation und Zuständigkeit',
+      'Rollen und Berechtigungen für unterschiedliche Teams',
+      'Nachvollziehbare Kommunikation über Matrix-Räume'
+    ]
+  },
+  {
+    tag: 'IT-nah',
+    title: 'Open-Source-orientierte Betreiber',
+    description: 'Für Betreiber, die Software verstehen, anpassen und auf eigener Infrastruktur betreiben wollen.',
+    points: [
+      'Offener Code und nachvollziehbare Architektur',
+      'Docker-basierter Selfhost-Stack',
+      'Matrix-Föderation und Integrationen kontrollierbar betreiben'
+    ]
+  },
+  {
+    tag: 'Wachstum',
+    title: 'Teams im Übergang von Tools zu System',
+    description: 'Für Betriebe, die aus Tabellen, Messenger-Chaos und Insellösungen herauswachsen.',
+    points: [
+      'Schrittweise Einführung statt Big-Bang-Projekt',
+      'Module für die wichtigsten Betriebsbereiche',
+      'Ein gemeinsames System für Büro, Leitung und Ausführung'
+    ]
+  }
+]
+</script>