KI-AGENT: Matrix-Stack auf Webseite ergänzt

website/app/assets/css/main.css

@@ -347,6 +347,7 @@ footer {
 }
 
 .workflow-section,
+.matrix-section,
 .open-source-section,
 .script-section,
 .contact-section {
@@ -397,6 +398,78 @@ footer {
   width: 2rem;
 }
 
+.matrix-section {
+  border-top: 1px solid rgba(23, 33, 31, 0.12);
+  grid-template-columns: 1fr;
+  padding-top: 5rem;
+}
+
+.matrix-layout {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.82fr);
+}
+
+.matrix-stack {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.matrix-stack article {
+  background: rgba(255, 255, 255, 0.76);
+  border: 1px solid rgba(23, 33, 31, 0.1);
+  border-radius: 0.5rem;
+  padding: 1.35rem;
+}
+
+.matrix-stack span {
+  color: var(--accent-dark);
+  display: inline-block;
+  font-size: 0.82rem;
+  font-weight: 800;
+  margin-bottom: 1rem;
+}
+
+.matrix-stack p {
+  color: #51605c;
+  line-height: 1.6;
+  margin: 0;
+}
+
+.matrix-diagram {
+  align-self: stretch;
+  background: #17211f;
+  border-radius: 0.5rem;
+  color: #ffffff;
+  display: grid;
+  gap: 0.85rem;
+  padding: clamp(1.25rem, 3vw, 2rem);
+}
+
+.matrix-diagram div {
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 0.45rem;
+  font-weight: 800;
+  line-height: 1.45;
+  padding: 1rem;
+}
+
+.matrix-diagram small {
+  color: rgba(255, 255, 255, 0.64);
+  font-weight: 500;
+}
+
+.matrix-diagram span {
+  background: var(--accent);
+  border-radius: 999px;
+  display: block;
+  height: 1rem;
+  justify-self: center;
+  width: 0.24rem;
+}
+
 .open-source-section {
   align-items: center;
   background: #17211f;
@@ -602,6 +675,7 @@ footer p {
 @media (max-width: 980px) {
   .hero-section,
   .workflow-section,
+  .matrix-section,
   .open-source-section,
   .script-section,
   .contact-section {
@@ -614,8 +688,9 @@ footer p {
 
   .highlights,
   .feature-grid,
+  .matrix-layout,
   .legal-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-template-columns: 1fr;
   }
 
   .open-source-section .secondary-action {
@@ -669,6 +744,7 @@ footer p {
   .metric-row,
   .highlights,
   .feature-grid,
+  .matrix-stack,
   .legal-grid {
     grid-template-columns: 1fr;
   }

website/app/pages/impressum.vue

@@ -7,6 +7,7 @@
 
       <nav aria-label="Hauptnavigation">
         <NuxtLink to="/#funktionen">Funktionen</NuxtLink>
+        <NuxtLink to="/#matrix">Matrix</NuxtLink>
         <NuxtLink to="/#open-source">Open Source</NuxtLink>
         <NuxtLink to="/#selfhost">Selfhost</NuxtLink>
         <NuxtLink to="/#kontakt">Kontakt</NuxtLink>

website/app/pages/index.vue

@@ -7,6 +7,7 @@
 
       <nav aria-label="Hauptnavigation">
         <a href="#funktionen">Funktionen</a>
+        <a href="#matrix">Matrix</a>
         <a href="#open-source">Open Source</a>
         <a href="#selfhost">Selfhost</a>
         <a href="#kontakt">Kontakt</a>
@@ -120,6 +121,36 @@
       </ol>
     </section>
 
+    <section id="matrix" class="matrix-section">
+      <div class="section-heading">
+        <p class="eyebrow">Tief integriert</p>
+        <h2>Matrix als Kommunikationsschicht für FEDEO.</h2>
+        <p>
+          FEDEO verbindet Chat, Räume, Anrufe und Videokonferenzen mit Projekten, Vorgängen, Kontakten und Berechtigungen. Matrix läuft dabei nicht daneben, sondern wird durch FEDEO provisioniert, verknüpft und betrieben.
+        </p>
+      </div>
+
+      <div class="matrix-layout">
+        <div class="matrix-stack">
+          <article v-for="item in matrixStack" :key="item.title">
+            <span>{{ item.tag }}</span>
+            <h3>{{ item.title }}</h3>
+            <p>{{ item.description }}</p>
+          </article>
+        </div>
+
+        <div class="matrix-diagram" aria-label="Matrix Stack Architektur">
+          <div>FEDEO Web & App</div>
+          <span></span>
+          <div>FEDEO Backend<br><small>SSO, Rechte, Objektkontext</small></div>
+          <span></span>
+          <div>Matrix Homeserver<br><small>Synapse, Räume, Events</small></div>
+          <span></span>
+          <div>LiveKit, coturn, Element<br><small>Anrufe, Video, Gäste</small></div>
+        </div>
+      </div>
+    </section>
+
     <section id="open-source" class="open-source-section">
       <div>
         <p class="eyebrow">Open Source</p>
@@ -189,7 +220,7 @@ const features = [
   {
     tag: 'Büro',
     title: 'Aufgaben und Kommunikation',
-    description: 'Aufgaben, interne Nachrichten und betriebliche Abstimmung laufen dort zusammen, wo die Arbeit entsteht.'
+    description: 'Aufgaben, interne Nachrichten und Matrix-Räume laufen dort zusammen, wo die Arbeit entsteht.'
   },
   {
     tag: 'Warenfluss',
@@ -218,5 +249,28 @@ const features = [
   }
 ]
 
+const matrixStack = [
+  {
+    tag: 'Chat',
+    title: 'Projekt- und Vorgangsräume',
+    description: 'Matrix-Räume werden aus FEDEO-Kontexten wie Projekten, Tickets, Teams und Kontakten heraus genutzt.'
+  },
+  {
+    tag: 'Identität',
+    title: 'FEDEO bleibt führend',
+    description: 'Nutzer, Rollen und Raumzugriffe werden aus FEDEO heraus provisioniert und bei Änderungen synchronisiert.'
+  },
+  {
+    tag: 'Audio & Video',
+    title: 'MatrixRTC mit LiveKit',
+    description: 'Gruppenanrufe, Videokonferenzen und Bildschirmfreigaben laufen über MatrixRTC, LiveKit und coturn.'
+  },
+  {
+    tag: 'Betrieb',
+    title: 'Selfhost-ready Stack',
+    description: 'Synapse, PostgreSQL, Redis, .well-known, Element und TURN/STUN sind im Selfhost-Stack vorbereitet.'
+  }
+]
+
 const installCommand = 'curl -fsSL https://git.federspiel.tech/flfeders/FEDEO/raw/branch/dev/scripts/selfhost-install.sh | bash -s -- --simple --start'
 </script>