KI-AGENT: Selfhost-Script als Codeblock eingebaut

website/app/assets/css/main.css

@@ -348,6 +348,7 @@ footer {
 
 .workflow-section,
 .open-source-section,
+.script-section,
 .contact-section {
   align-items: start;
   display: grid;
@@ -423,6 +424,78 @@ footer {
   justify-self: end;
 }
 
+.script-section {
+  align-items: center;
+  border-top: 1px solid rgba(23, 33, 31, 0.12);
+  padding-bottom: 5rem;
+  padding-top: 0;
+}
+
+.script-section p {
+  color: #51605c;
+  font-size: 1.08rem;
+  line-height: 1.7;
+}
+
+.code-window {
+  background: #17211f;
+  border: 1px solid rgba(255, 255, 255, 0.22);
+  border-radius: 0.5rem;
+  box-shadow: 0 1.5rem 4rem rgba(23, 33, 31, 0.22);
+  color: #dff8d8;
+  overflow: hidden;
+}
+
+.code-window-toolbar {
+  align-items: center;
+  background: #24302d;
+  display: flex;
+  gap: 0.5rem;
+  min-height: 3rem;
+  padding: 0 1rem;
+}
+
+.code-window-toolbar span {
+  background: rgba(255, 255, 255, 0.7);
+  border-radius: 50%;
+  display: block;
+  height: 0.68rem;
+  width: 0.68rem;
+}
+
+.code-window-toolbar span:nth-child(2) {
+  background: var(--accent);
+}
+
+.code-window-toolbar strong {
+  color: rgba(255, 255, 255, 0.68);
+  font-size: 0.86rem;
+  margin-left: 0.4rem;
+}
+
+.code-window pre {
+  margin: 0;
+  overflow-x: auto;
+  padding: clamp(1.25rem, 3vw, 2rem);
+}
+
+.code-window code {
+  color: #dff8d8;
+  display: block;
+  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
+  font-size: clamp(0.92rem, 1.7vw, 1rem);
+  line-height: 1.8;
+  min-width: 34rem;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.code-window code::before {
+  color: var(--accent);
+  content: "$ ";
+  font-weight: 800;
+}
+
 .contact-section {
   background: #ffffff;
   border: 1px solid rgba(23, 33, 31, 0.1);
@@ -522,6 +595,7 @@ footer p {
   .hero-section,
   .workflow-section,
   .open-source-section,
+  .script-section,
   .contact-section {
     grid-template-columns: 1fr;
   }

website/app/pages/impressum.vue

@@ -8,6 +8,7 @@
       <nav aria-label="Hauptnavigation">
         <NuxtLink to="/#funktionen">Funktionen</NuxtLink>
         <NuxtLink to="/#open-source">Open Source</NuxtLink>
+        <NuxtLink to="/#selfhost">Selfhost</NuxtLink>
         <NuxtLink to="/#kontakt">Kontakt</NuxtLink>
         <a class="login-link" href="https://app.fedeo.de">Einloggen</a>
       </nav>

website/app/pages/index.vue

@@ -8,6 +8,7 @@
       <nav aria-label="Hauptnavigation">
         <a href="#funktionen">Funktionen</a>
         <a href="#open-source">Open Source</a>
+        <a href="#selfhost">Selfhost</a>
         <a href="#kontakt">Kontakt</a>
         <a class="login-link" href="https://app.fedeo.de">Einloggen</a>
       </nav>
@@ -130,6 +131,26 @@
       <a class="secondary-action" href="https://git.federspiel.tech/flfeders/FEDEO">Repository ansehen</a>
     </section>
 
+    <section id="selfhost" class="script-section">
+      <div>
+        <p class="eyebrow">Selfhosting</p>
+        <h2>FEDEO auf deinem Server starten.</h2>
+        <p>
+          Der Installer prüft die Basisumgebung, richtet Docker bei Bedarf ein, lädt FEDEO und startet danach den geführten Selfhost-Assistenten.
+        </p>
+      </div>
+
+      <div class="code-window" aria-label="FEDEO Selfhost Installationsbefehl">
+        <div class="code-window-toolbar">
+          <span></span>
+          <span></span>
+          <span></span>
+          <strong>Terminal</strong>
+        </div>
+        <pre><code>{{ installCommand }}</code></pre>
+      </div>
+    </section>
+
     <section id="kontakt" class="contact-section">
       <div>
         <p class="eyebrow">Jetzt anfragen</p>
@@ -196,4 +217,6 @@ const features = [
     description: 'FEDEO ist für Arbeit am Schreibtisch und für mobile Abläufe im Einsatz vorbereitet.'
   }
 ]
+
+const installCommand = 'curl -fsSL https://git.federspiel.tech/flfeders/FEDEO/raw/branch/dev/scripts/selfhost-install.sh | bash -s -- --simple --start'
 </script>