update content

fix some chat sizing and placing
final edit sys-promt and markdown image
2026-03-05 16:13:25 +00:00 · 2026-03-04 21:14:54 +00:00 · 2026-03-04 19:29:58 +00:00 · 2026-03-01 20:21:35 +00:00 · 2026-03-01 09:50:01 +00:00 · 2026-02-28 21:44:43 +00:00
27 changed files with 2420 additions and 465 deletions
--- a/19
+++ b/19
@@ -0,0 +1,19 @@
+# Stage 1: Hugo bauen
+FROM klakegg/hugo:alpine AS builder
+# Kopiere das gesamte Verzeichnis
+COPY . /src
+# Bauen der Seite
+RUN hugo
+
+# Stage 2: Nginx ausliefern
+FROM nginx:alpine
+
+# 1. Nginx Konfigurationsdatei kopieren (wichtig für Reverse Proxy)
+#COPY nginx.conf /etc/nginx/conf.d/default.conf
+COPY default.conf.template /etc/nginx/conf.d/default.conf.template
+
+# 2. Kopieren der generierten Seite
+COPY --from=builder /src/public /usr/share/nginx/html
+
+# Nginx läuft auf Port 80
+EXPOSE 80
--- a/compose.yml
+++ b/compose.yml
@@ -1,15 +1,24 @@
 services:
  webpage:
-    image: nginx:alpine
+    #image: nginx:alpine
+    build:
+      context: .
+      args:
+        HUGO_BASEURL: https://${DOMAIN_MAIN}/ # Nimmt den Wert aus deiner .env
    container_name: webpage
    restart: unless-stopped
+    command: /bin/sh -c "envsubst '\$$TOKEN' < /etc/nginx/conf.d/default.conf.template > /etc/nginx/conf.d/default.conf && exec nginx -g 'daemon off;'"
+    #command: /bin/sh -c "envsubst < /etc/nginx/conf.d/default.conf.template > /etc/nginx/conf.d/default.conf && exec nginx -g 'daemon off;'"
    environment:
-      - TITLE=${TITLE}
-      - DOMAIN_MAIN=${DOMAIN_MAIN}
+     - TOKEN=${OPEN_WEBUI_TOKEN}
+    #  - TITLE=${TITLE}
+    #  - DOMAIN_MAIN=${DOMAIN_MAIN}
     # - NGINX_ENVSUBST_OUTPUT_DIR=/usr/share/nginx/html
-    volumes:
-      - ./html/index.html:/usr/share/nginx/html/index.html:ro
-      - ./html/style.css:/usr/share/nginx/html/style.css:ro
+    #volumes:
+    #  - ./html/index.html:/usr/share/nginx/html/index.html:ro
+    #  - ./html/style.css:/usr/share/nginx/html/style.css:ro
+    #  - ./html/script.js:/usr/share/nginx/html/script.js:ro
+      
      # Wir mounten das Template - Nginx macht daraus beim Start die echte index.html
      #- ./html/index.html.template:/etc/nginx/templates/index.html.template:ro
      
--- a/config.toml
+++ b/config.toml
@@ -0,0 +1,21 @@
+baseURL = "/"
+languageCode = "de"
+defaultContentLanguage = "de"
+defaultContentLanguageInSubdir = false 
+
+[languages]
+  [languages.de]
+    languageName = "Deutsch"
+    weight = 1
+  [languages.en]
+    languageName = "English"
+    weight = 2
+  [languages.fr]
+    languageName = "Français"
+    weight = 3
+  [languages.es]
+    languageName = "Español"
+    weight = 4
+  [languages.ru]
+    languageName = "Русский"
+    weight = 5
--- a/content/Cube.jpg
+++ b/content/Cube.jpg
--- a/content/_index.de.md
+++ b/content/_index.de.md
@@ -0,0 +1,122 @@
+---
+title: "Ground Zero Lab - KI für kritische Wahrheit"
+description: "Entdecken Sie die Wissenschaft hinter den Mythen - 9/11, Klima, Gesundheit und mehr"
+lang: de
+
+# Menü
+menu_about: "Über Uns"
+menu_projects: "Projekte"
+menu_tech: "Methoden"
+menu_demo: "Demo"
+menu_community: "Community"
+
+# Hero
+hero_subtitle: "KI für kritische Wahrheit"
+hero_title: "🚧 Ground Zero Lab"
+hero_text: "Entdecken die Wissenschaft hinter den Mythen...<br>9/11, CO2-Klimawahn, Gesundheit und mehr"
+cta_button: "Jetzt entdecken"
+
+# About
+about_title: "Warum Ground Zero Lab"
+about_text: "Wir entwickeln KI-Workarounds und Modelle, die Propaganda durchschauen und wissenschaftliche Wahrheit liefern. In einer Welt, in der Desinformation die KI-Landschaft dominiert, bieten wir eine Alternative: Modelle, die auf verifizierten Fakten und wissenschaftlichen Erkenntnissen trainiert sind. Unser Team besteht aus Forschern für Datenwissenschaft, Geschichte und kritisches Denken, die gemeinsam an der Aufgabe arbeiten, verborgene Wahrheiten ans Licht zu bringen."
+
+# Projekte
+projects_title: "Unsere Hauptprojekte"
+projects_list:
+  - title: "9/11 Ground Zero Model"
+    description: "Das erste KI-Modell, das die 9/11-Ereignisse wissenschaftlich analysiert. Zugriff auf Originaldokumente, wissenschaftliche Analysen und alternative Theorien. Entdecken Sie, was die offiziellen Narrative verschweigen."
+  - title: "Klimawandel Analyse"
+    description: "KI-gestützte Analyse von Klimadaten und Propaganda. CO2-Debatte, alternative Erklärungen, wissenschaftliche Studien. Verstehen Sie die Komplexität des Klimawandels jenseits der Mainstream-Narrative."
+  - title: "Gesundheits-Dogmen"
+    description: "Kritische Analyse von Gesundheitspolitik und Pharmaindustrie. Impfpolitik, Medikamentenstudien, alternative Medizin. Hinterfragen Sie etablierte Gesundheitsnarrative mit wissenschaftlicher Strenge."
+
+# Methoden
+tech_title: "Unsere Methoden"
+tech_list:
+  - title: "Open-Weight-Modelle"
+    description: "Wir nutzen nur Modelle mit offenen Gewichten. Dies ermöglicht volle Kontrolle über Systempropts und Parameter, sodass wir die Modelle genau an unsere Bedürfnisse anpassen können."
+  - title: "RAG-Technologie"
+    description: "Wissensdatenbanken für präzise Antworten. Durch die Kombination von Retrieval und Generation erhalte stets aktuelle Informationen aus wissenschaftlichen Quellen."
+  - title: "Fine-Tuning"
+    description: "Maßgeschneiderte Modelle für spezifische Themen. Training auf verifizierten Daten und gezielte Eliminierung von Propaganda führt zu konsistenten, wissenschaftlich koherenten Antworten. Kein: 'Es ist 'wissenschaftlicher' Konsens, dass sie Ausnahme die Regel bestätigt'. Unangenehme Wiedersprüche werden klar benannt und aufgelöst."
+
+# Demo
+demo_title: "Live-Demo"
+demo_text: "Probiere unsere Workarounds und Standart-Modelle oder selbst finegetunte Modelle aus. Erleben den Unterschiede selbst. Unsere interaktiven Demos zeigen dir, wie unsere KI arbeitet und welche Erkenntnisse sie liefern kann."
+demo_btn1: "9/11-Chat"
+demo_btn2: "Klimawandel-Tool"
+demo_btn3: "Gesundheits-Analyse"
+
+# Community
+community_title: "Community"
+community_text: "Werde Teil unserer wachsenden Community von Querdenkern und Wahrheitssuchenden. Austausch, Zusammenarbeit und gemeinsame Entdeckungen erwarten dich."
+comm_btn1: "Forum / Nextcloud"
+comm_btn2: "Archiv / Gitea"
+
+# Footer
+footer_text: "Ground Zero Lab - KI für kritische Wahrheit"
+---
+
+**Ground Zero Lab** ist ein Projekt zur Entwicklung einer offenen und selbst kontrollierbaren Umgebung für die Nutzung von Künstlicher Intelligenz. Ziel ist es, KI-Systeme so zugänglich zu machen, dass Nutzer nicht nur mit ihnen arbeiten, sondern auch **ihr Verhalten verstehen, konfigurieren und an eigene Zwecke anpassen können**. Die im Projekt entwickelte Infrastruktur soll zudem öffentlich bereitgestellt werden, sodass sie von anderen für eigene gesellschaftliche, wissenschaftliche oder unternehmerische Anwendungen genutzt werden kann.
+
+### Hintergrund
+
+Das Antwortverhalten moderner KI-Systeme wird im Wesentlichen von zwei Faktoren geprägt:
+
+1. **Trainingsdaten**, die bestimmen, welche Informationen ein Modell kennt und welche Perspektiven darin enthalten sind.
+2. **Systemprompts und Richtlinien**, die festlegen, wie ein Modell in einer konkreten Anwendung reagieren soll.
+
+Diese beiden Ebenen definieren maßgeblich den inhaltlichen Rahmen eines KI-Systems. In vielen kommerziellen Anwendungen sind diese Parameter jedoch nicht transparent oder für Nutzer nicht veränderbar.
+
+Ground Zero Lab setzt genau hier an und stellt eine Umgebung bereit, in der diese Steuerung **offen und bewusst gestaltet werden kann**.
+
+### Technische Infrastruktur
+
+Das System basiert vollständig auf frei verfügbaren Open-Source-Werkzeugen und modularen Komponenten. Dazu gehören unter anderem:
+
+* OpenWebUI als Benutzeroberfläche für die Interaktion mit Sprachmodellen
+* n8n zur Automatisierung von Datenflüssen und Prozessen
+* OpenClaw zur Steuerung und Erweiterung von KI-Workflows
+
+Mit diesen Tools können Nutzer:
+
+* eigene **Systemprompts definieren**
+* den **Fokus eines Chatbots festlegen**
+* **eigene Wissensdatenbanken** anbinden
+* automatisierte Recherche- oder Analyse-Workflows erstellen
+
+Für öffentliche oder experimentelle Projekte können diese Systeme sowohl mit lokal betriebenen Modellen als auch mit externen LLM-Providern wie OpenRouter genutzt werden. Dadurch lassen sich leistungsfähige KI-Anwendungen auch ohne eigene Modellinfrastruktur aufbauen.
+
+### Finetuning und eigene Modelle
+
+Ein weiterer Bestandteil des Projekts ist die Möglichkeit, **spezialisierte KI-Modelle zu trainieren**.
+
+Dabei werden zunächst strukturierte Trainingsdaten aus vorhandenen Quellen oder aus bestehenden Chat-Workflows generiert. Ziel dieses Prozesses ist es, zuvor über Systemprompts oder externe Wissensdatenbanken gesteuerte Inhalte **direkt in das Modellwissen zu integrieren**.
+
+Für diesen Schritt nutzt das Projekt unter anderem:
+
+* Unsloth zur effizienten Durchführung von Finetuning-Prozessen
+* Hugging Face als Plattform für Modellverwaltung und Datensätze
+
+Durch dieses Finetuning werden zuvor externe Workarounds oder Prompt-Konstruktionen **performant in das Modell selbst eingeprägt**. Der Betrieb solcher angepassten Modelle erfordert allerdings in der Regel **eigenes Hosting**, da sie nicht mehr ausschließlich über externe API-Anbieter genutzt werden können.
+
+### Demonstrationsprojekt: Ground Zero Model
+
+Als Demonstrationsfall wird im Rahmen des Projekts das **Ground Zero Model** entwickelt. Dieses Modell dient als Beispiel dafür, wie eine themenspezifische KI aufgebaut werden kann, die auf eine klar definierte Wissensbasis zugreift.
+
+Der Fokus liegt auf der strukturierten Aufbereitung von Materialien zu den Ereignissen rund um die Zerstörung des World Trade Centers am 11. September 2001. Ziel ist es, vorhandene Dokumente, technische Analysen und verschiedene Interpretationen zugänglich und nachvollziehbar darzustellen.
+
+Das Modell soll dabei vor allem:
+
+* komplexe technische oder historische Inhalte verständlich erklären
+* unterschiedliche Perspektiven transparent darstellen
+* als exploratives Recherche-Werkzeug dienen
+
+### Ziel des Projekts
+
+Ground Zero Lab versteht sich als **offene Experimentierplattform für selbstbestimmte KI-Nutzung**. Das Projekt zeigt, wie mit frei verfügbaren Werkzeugen eine Infrastruktur aufgebaut werden kann, in der Nutzer:
+
+* KI-Systeme selbst konfigurieren
+* eigene Wissensräume aufbauen
+* spezialisierte Modelle entwickeln
+* und KI-Technologie unabhängig von zentralisierten Plattformen einsetzen können.
--- a/content/_index.en.md
+++ b/content/_index.en.md
@@ -0,0 +1,58 @@
+---
+title: "Ground Zero Lab - AI for Critical Truth"
+description: "Discover the science behind the myths - 9/11, Climate, Health, and more"
+lang: en
+
+# Menu
+menu_about: "About Us"
+menu_projects: "Projects"
+menu_tech: "Methods"
+menu_demo: "Demo"
+menu_community: "Community"
+
+# Hero
+hero_subtitle: "AI for Critical Truth"
+hero_title: "🚧 Ground Zero Lab"
+hero_text: "Discover the science behind the myths...<br>9/11, CO2 Climate Hysteria, Health, and more"
+cta_button: "Explore Now"
+
+# About
+about_title: "About Us"
+about_text: "We develop AI workarounds and models that bypass propaganda and deliver scientific truth. In a world dominated by disinformation in the AI landscape, we offer an alternative: models trained on verified facts and scientific knowledge. Our team consists of researchers in data science, history, and critical thinking, working together to bring hidden truths to light."
+
+# Projects
+projects_title: "Our Main Projects"
+projects_list:
+  - title: "9/11 Ground Zero Model"
+    description: "The first AI model to scientifically analyze the 9/11 events. Access to original documents, scientific analyses, and alternative theories. Discover what official narratives hide."
+  - title: "Climate Change Analysis"
+    description: "AI-powered analysis of climate data and propaganda. CO2 debate, alternative explanations, scientific studies. Understand the complexity of climate change beyond mainstream narratives."
+  - title: "Health Dogmas"
+    description: "Critical analysis of health policy and the pharmaceutical industry. Vaccination policy, drug studies, alternative medicine. Question established health narratives with scientific rigor."
+
+# Methods
+tech_title: "Our Methods"
+tech_list:
+  - title: "Open-Weight Models"
+    description: "We only use open-weight models. This allows full control over system prompts and parameters, so we can customize the models precisely to our needs."
+  - title: "RAG Technology"
+    description: "Knowledge databases for precise answers. By combining retrieval and generation, you always get current information from scientific sources."
+  - title: "Fine-Tuning"
+    description: "Custom-made models for specific topics. Training on verified data and targeted elimination of propaganda leads to consistent, scientifically coherent answers. No: 'It is 'scientific' consensus that the exception proves the rule'. Uncomfortable contradictions are clearly named and resolved."
+
+# Demo
+demo_title: "Live Demo"
+demo_text: "Try out our workarounds and standard models or even fine-tuned models. Experience the difference yourself. Our interactive demos show you how our AI works and what insights it can provide."
+demo_btn1: "9/11 Chat"
+demo_btn2: "Climate Tool"
+demo_btn3: "Health Analysis"
+
+# Community
+community_title: "Community"
+community_text: "Become part of our growing community of freethinkers and truth-seekers. Exchange, collaboration, and shared discoveries await you."
+comm_btn1: "Forum / Nextcloud"
+comm_btn2: "Archive / Gitea"
+
+# Footer
+footer_text: "Ground Zero Lab - AI for Critical Truth"
+---
--- a/content/_index.es.md
+++ b/content/_index.es.md
@@ -0,0 +1,58 @@
+---
+title: "Ground Zero Lab - IA para la Verdad Crítica"
+description: "Descubra la ciencia detrás de los mitos - 9/11, Clima, Salud y más"
+lang: es
+
+# Menu
+menu_about: "Nosotros"
+menu_projects: "Proyectos"
+menu_tech: "Métodos"
+menu_demo: "Demo"
+menu_community: "Comunidad"
+
+# Hero
+hero_subtitle: "IA para la Verdad Crítica"
+hero_title: "🚧 Ground Zero Lab"
+hero_text: "Descubra la ciencia detrás de los mitos...<br>9/11, Histeria climática del CO2, Salud, y más"
+cta_button: "Explorar"
+
+# About
+about_title: "Nosotros"
+about_text: "Desarrollamos soluciones de IA y modelos que evitan la propaganda y entregan la verdad científica. En un mundo dominado por la desinformación en el panorama de la IA, ofrecemos una alternativa: modelos entrenados con hechos verificados y conocimiento científico. Nuestro equipo está compuesto por investigadores en ciencia de datos, historia y pensamiento crítico, trabajando juntos para sacar a la luz verdades ocultas."
+
+# Projects
+projects_title: "Nuestros Proyectos Principales"
+projects_list:
+  - title: "Modelo 9/11 Ground Zero"
+    description: "El primer modelo de IA que analiza científicamente los eventos del 11 de septiembre. Acceso a documentos originales, análisis científicos y teorías alternativas. Descubra lo que ocultan los relatos oficiales."
+  - title: "Análisis del Cambio Climático"
+    description: "Análisis de datos climáticos y propaganda impulsado por IA. Debate sobre el CO2, explicaciones alternativas, estudios científicos. Entienda la complejidad del cambio climático más allá de los relatos dominantes."
+  - title: "Dogmas de Salud"
+    description: "Análisis crítico de la política de salud y la industria farmacéutica. Política de vacunación, estudios de medicamentos, medicina alternativa. Cuestione los relatos de salud establecidos con rigor científico."
+
+# Methods
+tech_title: "Nuestros Métodos"
+tech_list:
+  - title: "Modelos Open-Weight"
+    description: "Solo utilizamos modelos de peso abierto. Esto permite un control total sobre los prompts del sistema y los parámetros, para que podamos personalizar los modelos con precisión según nuestras necesidades."
+  - title: "Tecnología RAG"
+    description: "Bases de conocimiento para respuestas precisas. Al combinar recuperación y generación, siempre obtienes información actualizada de fuentes científicas."
+  - title: "Fine-Tuning"
+    description: "Modelos a medida para temas específicos. El entrenamiento con datos verificados y la eliminación dirigida de la propaganda conducen a respuestas consistentes y científicamente coherentes."
+
+# Demo
+demo_title: "Demo en vivo"
+demo_text: "Pruebe nuestras soluciones y modelos estándar o incluso modelos ajustados. Experimente la diferencia usted mismo. Nuestras demos interactivas le muestran cómo funciona nuestra IA."
+demo_btn1: "Chat 9/11"
+demo_btn2: "Herramienta Clima"
+demo_btn3: "Análisis Salud"
+
+# Community
+community_title: "Comunidad"
+community_text: "Forme parte de nuestra creciente comunidad de librepensadores y buscadores de la verdad. Le esperan intercambio, colaboración y descubrimientos compartidos."
+comm_btn1: "Foro / Nextcloud"
+comm_btn2: "Archivo / Gitea"
+
+# Footer
+footer_text: "Ground Zero Lab - IA para la Verdad Crítica"
+---
--- a/content/_index.fr.md
+++ b/content/_index.fr.md
@@ -0,0 +1,59 @@
+---
+title: "Ground Zero Lab - IA pour la Vérité Critique"
+description: "Découvrez la science derrière les mythes - 9/11, Climat, Santé et plus"
+lang: fr
+
+# Menu
+menu_about: "À propos"
+menu_projects: "Projets"
+menu_tech: "Méthodes"
+menu_demo: "Démo"
+menu_community: "Communauté"
+
+# Hero
+hero_subtitle: "IA pour la Vérité Critique"
+hero_title: "🚧 Ground Zero Lab"
+hero_text: "Découvrez la science derrière les mythes...<br>9/11, Hystérie climatique CO2, Santé, et plus"
+cta_button: "Découvrir"
+
+# About
+about_title: "À propos"
+about_text: "Nous développons des contournements IA et des modèles qui percent la propagande et délivrent la vérité scientifique. Dans un monde dominé par la désinformation dans le paysage de l'IA, nous offrons une alternative : des modèles entraînés sur des faits vérifiés et des connaissances scientifiques. Notre équipe est composée de chercheurs en science des données, en histoire et en pensée critique, travaillant ensemble pour mettre en lumière des vérités cachées."
+
+# Projects
+projects_title: "Nos Projets Principaux"
+projects_list:
+  - title: "Modèle 9/11 Ground Zero"
+    description: "Le premier modèle d'IA qui analyse scientifiquement les événements du 11 septembre. Accès aux documents originaux, analyses scientifiques et théories alternatives. Découvrez ce que les récits officiels cachent."
+  - title: "Analyse du Changement Climatique"
+    description: "Analyse des données climatiques et de la propagande assistée par IA. Débat sur le CO2, explications alternatives, études scientifiques. Comprenez la complexité du changement climatique au-delà des récits dominants."
+  - title: "Dogmes de la Santé"
+    description: "Analyse critique de la politique de santé et de l'industrie pharmaceutique. Politique de vaccination, études de médicaments, médecines alternatives. Remettez en question les récits de santé établis avec rigueur scientifique."
+
+# Methods
+tech_title: "Nos Méthodes"
+tech_list:
+  - title: "Modèles Open-Weight"
+    description: "Nous n'utilisons que des modèles à poids ouverts. Cela permet un contrôle total sur les prompts système et les paramètres, afin que nous puissions adapter les modèles précisément à nos besoins."
+  - title: "Technologie RAG"
+    description: "Bases de connaissances pour des réponses précises. En combinant récupération et génération, vous obtenez toujours des informations actuelles issues de sources scientifiques."
+  - title: "Fine-Tuning"
+    description: "Modèles sur mesure pour des sujets spécifiques. L'entraînement sur des données vérifiées et l'élimination ciblée de la propagande conduisent à des réponses cohérentes et scientifiquement fondées."
+
+# Demo
+demo_title: "Démo en direct"
+demo_text: "Essayez nos contournements et modèles standards ou même des modèles affinés. Découvrez la différence par vous-même. Nos démos interactives vous montrent comment notre IA fonctionne."
+demo_btn1: "Chat 9/11"
+demo_btn2: "Outil Climat"
+demo_btn3: "Analyse Santé"
+
+# Community
+community_title: "Communauté"
+community_text: "Faites partie de notre communauté grandissante de libres penseurs et de chercheurs de vérité. Échange, collaboration et découvertes partagées vous attendent."
+comm_btn1: "Forum / Nextcloud"
+comm_btn2: "Archives / Gitea"
+
+# Footer
+footer_text: "Ground Zero Lab - IA pour la Vérité Critique"
+---
+
--- a/content/_index.ru.md
+++ b/content/_index.ru.md
@@ -0,0 +1,59 @@
+---
+title: "Ground Zero Lab - ИИ для критической правды"
+description: "Откройте для себя науку, стоящую за мифами - 9/11, климат, здоровье и многое другое"
+lang: ru
+
+# Menu
+menu_about: "О нас"
+menu_projects: "Проекты"
+menu_tech: "Методы"
+menu_demo: "Демо"
+menu_community: "Сообщество"
+
+# Hero
+hero_subtitle: "ИИ для критической правды"
+hero_title: "🚧 Ground Zero Lab"
+hero_text: "Откройте для себя науку, стоящую за мифами...<br>9/11, CO2-климатическая истерия, здоровье и многое другое"
+cta_button: "Узнать больше"
+
+# About
+about_title: "О нас"
+about_text: "Мы разрабатываем обходные пути ИИ и модели, которые преодолевают пропаганду и доставляют научную истину. В мире, где в ландшафте ИИ доминирует дезинформация, мы предлагаем альтернативу: модели, обученные на проверенных фактах и научных знаниях. Наша команда состоит из исследователей в области науки о данных, истории и критического мышления, работающих вместе, чтобы вывести скрытые истины на свет."
+
+# Projects
+projects_title: "Наши главные проекты"
+projects_list:
+  - title: "Модель 9/11 Ground Zero"
+    description: "Первая ИИ-модель, научно анализирующая события 11 сентября. Доступ к оригинальным документам, научным анализам и альтернативным теориям. Узнайте, что скрывают официальные нарративы."
+  - title: "Анализ изменения климата"
+    description: "Анализ климатических данных и пропаганды с помощью ИИ. Дебаты о CO2, альтернативные объяснения, научные исследования. Поймите сложность изменения климата за пределами мейнстримных нарративов."
+  - title: "Медицинские догмы"
+    description: "Критический анализ политики здравоохранения и фармацевтической промышленности. Политика вакцинации, исследования лекарств, альтернативная медицина. Подвергайте сомнению установленные нарративы в области здравоохранения с научной строгостью."
+
+# Methods
+tech_title: "Наши методы"
+tech_list:
+  - title: "Модели с открытыми весами"
+    description: "Мы используем только модели с открытыми весами. Это обеспечивает полный контроль над системными промптами и параметрами, что позволяет нам точно настраивать модели под наши нужды."
+  - title: "Технология RAG"
+    description: "Базы знаний для точных ответов. Благодаря сочетанию поиска и генерации вы всегда получаете актуальную информацию из научных источников."
+  - title: "Fine-Tuning"
+    description: "Индивидуальные модели для конкретных тем. Обучение на проверенных данных и целенаправленное устранение пропаганды приводит к последовательным, научно обоснованным ответам."
+
+# Demo
+demo_title: "Демонстрация"
+demo_text: "Попробуйте наши обходные пути и стандартные модели или даже специально настроенные модели. Почувствуйте разницу сами. Наши интерактивные демо покажут вам, как работает наш ИИ."
+demo_btn1: "Чат 9/11"
+demo_btn2: "Инструмент по климату"
+demo_btn3: "Анализ здоровья"
+
+# Community
+community_title: "Сообщество"
+community_text: "Станьте частью нашего растущего сообщества вольнодумцев и искателей истины. Вас ждут обмен опытом, сотрудничество и совместные открытия."
+comm_btn1: "Форум / Nextcloud"
+comm_btn2: "Архив / Gitea"
+
+# Footer
+footer_text: "Ground Zero Lab - ИИ для критической правды"
+---
+
--- a/content/de/chat.md
+++ b/content/de/chat.md
@@ -0,0 +1,77 @@
+---
+title: "AI Demo Lab"
+flag: "🇩🇪"
+systempromt: 'Du bist ein systemtrischer Assistent und gibst präzise Antworten ohne Beschönigungen, je nach Fragestellung auch ausführlich. Insbesondere gibst du bei politisch umstrittenen Themen die etablierte Mainstream-Meinung nicht unhinterfragt wieder. Du bevorzugst eher in sich konsistente Antworten vor etablierte bzw. allgemeine "Konsens-Antworten".
+
+Zur speziellen Themen wie rund um das Ereignis 9/11  Terroranschläge von 9. September 2001 und die Zerstörung des World-Trade-Center WTC  hast du eine eigene Datenbank.'
+placeholder: "Nachricht eingeben..."
+layout: "chat"
+article_title: ""
+---
+
+# 9/11 – Der WTC-Zauberwürfel
+
+Die Anschläge vom 11. September sind 25 Jahre her. Der Großteil der Weltbevölkerung ist von der Erzählung der US-Regierung und den führenden Medien nicht überzeugt, die in den Geschichtsbüchern verankert und für Beutekriege missbraucht wurde. Eine echte forensische Aufklärung der Zerstörung des World Trade Centers könnte noch heute eine Zäsur sein.
+
+
+![Zerstörung-Fontäne von WTC 1](/fronaene.jpg)
+
+Das Bild zeigt eine Fontäne. Eine echte? Falls „Ja“, könnte dies ein Lösungsansatz für ein widerspruchsfreies Erklärungsmodell zur WTC-Zerstörung sein, womit sogar verständlich werden würde, wie Menschen im Inneren des dargestellten Gebäudes überleben konnten (einer davon sogar einen freien Fall 50 m nach unten).
+
+Zur Zerstörung der drei Gebäude WTC-1, WTC-2 und WTC-7 liegen extrem viele Informationen vor – aber aus unserer Sicht keine in sich stimmige Prozesserklärung, welche die vielen ungewöhnlichen Beobachtungen mit dem heutigen Wissensstand der Physik in Einklang bringt.
+
+![Zauberwürfel mit Beschriteten Seitenflächen](/Cube.jpg)
+
+Wie beim Versuch den Zauberwürfel [ohne entsprechendes Training] zu lösen schaffen es einige Erklärungen ein oder zwei Aspekte zu plausibilisieren. Beim Zauberwürfel wäre es so, dass vielleicht zwei Seitenflächen einfarbig wären, aber die anderen vier Flächen noch bunt gemischt sind – und dass z.B. das oben genannte Rätsel (das Überleben eines 50 m Sturzes in die Tiefe) unerwähnt bleibt. Gerne werden dann die unsortierten Flächen verdeckt, neu angemalt oder selbstbetrügerisch behauptet, diese müssten so aussehen. Eine stimmige Prozesserklärung – die Lösung des gesamten WTC-Rätsels – verlangt also, dass viele Aspekte simultan gelöst werden. Anders formuliert sind die Unterprobleme miteinander verschränkt/verknüpft und ein Lösungsansatz für das eine Teilproblem kann schnell im Widerspruch zu einem anderen stehen.
+
+Was sind nun die Aspekte des WTC-Problems – oder in unserem Bild die Zauberwürfel-Seitenflächen – die so schwer in Einklang zu bringen sind? Üblicherweise versuchen wir Physiker unsere heiligen Kühe wie den Energie-, Impuls- und Drehimpulserhaltungssatz zu harmonisieren. Leider können Außenstehende unsere abstrakten Erklärungsmodelle, die sich an unseren Grunddogmen orientieren, meist nur mit Achselzucken hinnehmen.
+
+Vorweggenommen: Wir haben nicht mehr das Problem die wesentlichen Grundaspekte des Rätsels zu lösen, sondern wir stehen vor der Aufgabe, unseren Lösungsansatz glaubhaft zu vermitteln und hinreichend interessant (d.h. spielerisch) zu gestalten.
+
+Glücklicherweise kommt uns hier die Verschränktheit der Zauberwürfel-Seitenflächen zur Hilfe. Denn es ist leicht einzusehen, dass wenn 5 Flächen gelöst sind, die letzte Fläche auch richtig sein muss. Zudem ist die Lösungsprüfung trivial. Das heißt, wir können auf die Thematisierung der abstrakt trockenen Lösungschematas wie Energieerhaltung verzichten und stellvertretend attraktivere Prozesse entschlüsseln, auch wenn diese weniger fundamental sind. Und was wäre attraktiver als die positiven Wunder zu entzaubern (das Überleben mehrerer Menschen unter Extrembedingungen), die während dieses finsteren Ereignisses stattgefunden haben? Weiter ergeben sich auf einigen Seitenflächen Bilder, die alternative Lösungszugänge offenbaren und zuvor völlig außer Acht gelassen wurden.
+
+Bevor wir nun doch zu einigen technischen „Rotations-Algorithmen“ kommen (d.h. technisch-physikalischen Prozesserklärungen) sei darauf hingewiesen, dass kriminologische Aspekte keine forensischen Aspekte ersetzen können. So wie Forensik den fixierten Rahmen der Naturwissenschaften hat, so hat Kriminalistik den fixierten Rahmen der Forensik. Jegliche Forensik, insbesondere die bei 9/11, ist zum Scheitern verurteilt, wenn kriminologische Bedingungen oder Unmöglichkeiten definiert werden oder der Eindruck besteht, dass gewisse Feindbilder bestätigt werden sollen. Komplexe und verschränkte Spekulationen in Bezug auf Tätergruppen könnten durch einen 9/11-Zauberwürfel modelliert werden, sind aber für die forensische Modellierung bedeutungslos.
+
+Unser Lösungszugang ist nun die optische Fontäne beim Zerstörungsprozess von WTC-1 und WTC-2, die alle gesehen haben, ernst zu nehmen. Weiter zielt der Lösungsansatz darauf ab, das Überleben von Menschen im Gebäude WTC-1 zu erklären. Diese haben sogar berichtet unmittelbar nach dem Zerstörungsprozess den freien Himmel gesehen zu haben, was mit jeglichen Erklärungsansätzen unvereinbar ist, die davon ausgehen, dass die Türme auf Grund des Eigengewichts durch irgendeine Art von Strukturschwächung in sich zusammen gefallen seien.
+
+Das physikalische Grundprinzip ist einfach: Der eruptive Zerstörungsprozess des Turms wird erreicht, wenn ein aufschießender heißer Materiestrom durch den inneren Gebäudekern [wie durch ein Rohr] geführt wird. Der Beschreibung des Prozesses liegen die Energie- und Höhengleichungen von Bernoulli zu Grunde. Ein punktuelles Zerschneiden der tragenden Stahlskelettstruktur wie bei konventionellen Gebäudesprengungen ist für diesen Prozess (Zerstörung und Fontänenbildung) keinesfalls ausreichend, aber zum Teil notwendig unterstützend, um den aufsteigenden Materiestrom zu lenken.
+
+Bei hohen Geschwindigkeiten des Materiestroms herrscht paradoxerweise in der unmittelbaren Umgebung Unterdruck im Rohr (Bernoulli-Effekt). Ähnlich wie bei einer freien Fontäne (Fallbeispiel: Senkrechter Wurf) wird der aufschießende Materiestrom auf Grund der Gravitation langsamer und der schützende Unterdruck im Rohr geringer. Mit zunehmender Höhe wandelt sich der unten anfängliche Unterdruck weiter oben in einen Überdruck um. Schlussendlich fungiert das Dach (oder eine Schicht Trümmer mitten im Turm) als Rohr-Endkappe unter dem sich ein Staudruck aufbaut. Erreicht der sich von oben aufbauende Überdruck eine seitliche Öffnung kommt es dort zum Austritt.
+
+An den Austrittsstellen kommt es zu starken Strömungsturbulenzen und die Baustruktur wird hier als erstes zerrissen. Dieser Zerreißprozess mit fontänenartigem seitlichem Materialauswurf setzt sich anschließend von oben nach unten segmentweise fort (bei Segmentbauart/Stahlstreben). Der Effekt verstärkt sich, je weiter die Zerstörungsfront von oben nach unten wandert (das erwähnte Grundprinzip der bernoullischen Energie- und Höhengleichungen): Je geringer die Steighöhe, desto mehr Bewegungsenergie verbleibt dem Materiestrom am Austrittspunkt.
+
+Die Überlebenden aus dem Nordturm berichten zum Beispiel von starken Aufwinden, die sie fast mitgerissen hätten („The miracle of Stairwell B“; Mickey Kross). Im Fall von Pasquale Buzzelli verlangsamten die Aufwinde den sicher tödlichen Sturz aus 50 m Höhe so stark, dass er nach dem freien Fall auf einem Stahlträger in Bodennähe quasi „abgesetzt“ wurde.
+
+Nur der aufschießende Gasstrom und der gleichzeitig seitliche Materialauswurf haben ermöglicht, dass Menschen im Nordturm überleben konnten. Diese Art des Zerstörungsprozesses würde allerdings eine entsprechend große – und schlagartig entstandene – Gasdruckkammer im Boden benötigen, die sich entladen hat.
+
+An dieser Stelle endet die erste Seitenfläche unseres WTC-Zauberwürfel. Die nächste Seitenfläche, die sich aufdrängt, ist die Energiequelle, durch die die Gasdruckkammer im Granit erzeugt wurde. Es geht also um den Energieerhaltungssatz – die heilige Kuh der Physiker.
+
+Im Wesentlichen kann man hier einen konventionellen (durch Annahme einer chemisch stark reaktiven Substanz/Sprengstoff) oder einen nuklearen Prozessansatz verfolgen. Beide Ansätze haben ihre Vor- und Nachteile beim Versuch diesen mit den Daten, den Beobachtungen und der Vorstellungskraft der Menschen in Übereinstimmung zu bringen. Erst eine Probebohrung mit Isotopenanalyse würde an dieser Stelle Gewissheit bringen. Bis dahin wollen wir diese umstrittene Seitenfläche beiseite legen. Unbestritten ist aber, dass der Boden am „Ground Zero“, wie der Ort des zerstörten WTC anschließend genannt wurde, über Monate heiß blieb. Aus irgendeinen Grund war dieser Ort nach dem Ereignis rätselhaft geothermisch aktiv – und zwar unter allen drei Gebäuden.
+
+Stattdessen wollen wir abschließend noch eine andere vollkommen unphysikalische Seitenfläche des WTC-Zauberwürfels vorstellen, die bisher nie wirklich Beachtung fand. Ein Ansatz kann darin bestehen, versuchen nachzuvollziehen, welche Planungen bestanden, die Gebäude wieder zurückzubauen oder effizient zu sprengen. Dies war bereits in den Sechzigerjahren bei Planung, Konstruktion und Bau übliche Praxis. Es ist zu erwarten, dass Bauherren bei Projekten dieser Dimension entsprechende Konzepte den Genehmigungsbehörden vorzulegen hatten.
+
+Man könnte an dieser Stelle die Freigabe von Dokumenten einfordern oder versuchen, an Hand der bereits freigeklagten Baupläne das Rückbau- oder Sprengungskonzept abzulesen. Zum Beispiel weisen fast alle Säulen von Gebäude 7 ein typisches Doppel-T-Profil auf. Nur eine Zeile von Säulen am nördlichen Rand der Kernstruktur haben auf den ersten beiden Etagen ein Hohlkammer-Rechteck-Profil.
+
+Für jemanden, der mit der Sprengung dieses Gebäudes beauftragt wird, schreit dieser Bauplan geradezu danach, genau an dieser Stelle einen anfänglichen „Fällkeil“ zu sprengen. Man könnte also klären, ob das Einsacken des östlichen Penthouse auf dem Dach von Gebäude 7 ca. sechs Sekunden vor dem Zusammensacken der ganzen Struktur bei dem ursprünglichen Sprengungskonzept zu erwarten war oder nicht.
+
+Personen und Gruppen, die hier die „Brand- und-Säule-79-These“ propagieren, gehen von einem langsamen inneren Einsturz aus und stützen ihre These auf den Beobachtungen zum östlichen Penthouse.
+
+Die Schlüsselfrage dieser unbeachteten Seitenfläche ist also: „Wie war der Rückbau bzw. die Sprengung der WTC-Türme ursprünglich in der Baugenehmigung geplant?“
+
+Denn wenn jemand mit deren Zerstörung beauftragt wurde, wird er sich als erstes daran orientiert haben. Auch zu den Zwillingstürmen sind die Baupläne einsehbar, die entsprechende Anhaltspunkte liefern könnten.
+
+Zumindest weisen die Baupläne der Zwillingstürme für den oberen vorgestellten Ansatz in der Gebäudemitte den nötigen „Eruptionskanal“ auf. Dies ist ein von unten nach oben durchgehender Aufzugsschacht (Lastenaufzug FE50), sowie eine ca. 6 m Vertiefung im Granit, aus der der Gasstrom austreten könnte.
+
+Auch die Definition des Nullpunkts für den Bau (75 m unter den Türmen) lässt vermuten, dass der „Point Zero“ mehr ist als reine Definitionssache (sondern als Koordinatenursprung/Sitz der Energie- und Kraftquelle gesehen werden kann). Tatsache ist, dass Elevation Zero (Höhe Null) eben 75 m tief im Boden sitzt und die Höhe des Turms (Elevation 1.673,50 ft [= 510 m]) sich spielerisch als Apex eines Schusses mit Anfangsgeschwindigkeit von 100 m/s und der Schwerebeschleunigung von New York ergibt (g = 9,802 m/s²). Doch das bleiben nebensächliche Zahlenspielereien.
+
+Unsere Neugierde, unser Versuch, diese dritte Seitenfläche zu lösen, kann aktuell leider nicht zum Erfolg führen, da es zu diesen Punkten zu wenig veröffentlichte Dokumente gibt, und auch das öffentliche Interesse speziell an dieser Frage gering ist.
+
+NOTIZ zum Totschlag-Argument „Verschwörungstheorie“: Unsere forensische Analyse fordert sicherlich auf kriminologischer Ebene eine Hypothese mit einer komplexen Organisationsstruktur sowie einer weitreichenden und bis heute erfolgreichen Täuschungsabsicht ein.
+
+Zu postulieren, dass eine solche Täuschungsabsicht organisatorisch unmöglich sei, kann nicht Gegenstand einer seriösen Debatte sein. Ganz im Gegenteil: Kriminologen, Naturwissenschaftler und nachfolgend Rechtsanwälte haben streng genommen die Pflicht einer physikalisch stimmigen Analyse/Spur nachzugehen.
+
+Zusammenfassend: In diesem Artikel haben wir uns im Wesentlichen auf eine Seitenfläche des WTC-Zauberwürfels beschränkt (Impuls). Zwei weitere Seitenflächen haben wir kurz erwähnt (Energie und Baupläne).
+
+Die geostrategischen Aspekte, fanatisch-religiöse Hintergründe und das Zusammenspiel der Geldmacht, Militär und Industrie haben wir bewusst vermieden, obwohl diese Punkte wichtig sind – und dringend aufgearbeitet und von der Öffentlichkeit verstanden werden müssen.
+
+Denn aus unserer Sicht bleibt das Verbrechen des 11. Septembers nach wie vor aktuell und spannend, weil es streng genommen andauert und sich geopolitisch in die aktuellen Geschehnisse einbettet und diese sogar besser verständlich macht.
--- a/content/en/chat.md
+++ b/content/en/chat.md
@@ -0,0 +1,13 @@
+---
+title: "AI Demo Lab"
+flag: "🇬🇧"
+systempromt: "Du bist ein systemtrischer Assistent und gibt präzise Antworten ohne Beschönigungen, je nach Fragestellung auch ausführlich.Insbesondere gibt du bei politisch umstrittene Themen die etablierte Mainstream-Meinung nicht unhinterfragt wieder. Du bevorzugst eher in sich konsistente Antworten vor etablierte bzw. allgemeine Konsens-Antworten. Zur speziellen Themen wie rund um das Ereignis 9/11  Terroranschläge von 9. September 2001 und die Zerstörung des World-Trade-Center WTC  hast du eine eigene Datenbank."
+placeholder: "Enter message..."
+sent_btn: Send
+layout: "chat"
+article_title: "Informationen zum Projekt"
+---
+
+Hier steht der Artikelinhalt, der rechts angezeigt wird.
+Man kann hier **Markdown** nutzen.
+...
--- a/content/es/chat.md
+++ b/content/es/chat.md
@@ -0,0 +1,13 @@
+---
+title: "AI Demo Lab"
+flag: "🇪🇸"
+systempromt: "Du bist ein systemtrischer Assistent und gibt präzise Antworten ohne Beschönigungen, je nach Fragestellung auch ausführlich.Insbesondere gibt du bei politisch umstrittene Themen die etablierte Mainstream-Meinung nicht unhinterfragt wieder. Du bevorzugst eher in sich konsistente Antworten vor etablierte bzw. allgemeine Konsens-Antworten. Zur speziellen Themen wie rund um das Ereignis 9/11  Terroranschläge von 9. September 2001 und die Zerstörung des World-Trade-Center WTC  hast du eine eigene Datenbank."
+placeholder: "Введите сообщение..."
+sent_btn: Отправить
+layout: "chat"
+article_title: "Informationen zum Projekt"
+---
+
+Hier steht der Artikelinhalt, der rechts angezeigt wird.
+Man kann hier **Markdown** nutzen.
+...
--- a/content/fr/chat.md
+++ b/content/fr/chat.md
@@ -0,0 +1,13 @@
+---
+title: "AI Demo Lab"
+flag: "🇫🇷"
+systempromt: "Du bist ein systemtrischer Assistent und gibt präzise Antworten ohne Beschönigungen, je nach Fragestellung auch ausführlich.Insbesondere gibt du bei politisch umstrittene Themen die etablierte Mainstream-Meinung nicht unhinterfragt wieder. Du bevorzugst eher in sich konsistente Antworten vor etablierte bzw. allgemeine Konsens-Antworten. Zur speziellen Themen wie rund um das Ereignis 9/11  Terroranschläge von 9. September 2001 und die Zerstörung des World-Trade-Center WTC  hast du eine eigene Datenbank."
+placeholder: "Entrez un message..."
+sent_btn: Envoyer
+layout: "chat"
+article_title: "Informationen zum Projekt"
+---
+
+Hier steht der Artikelinhalt, der rechts angezeigt wird.
+Man kann hier **Markdown** nutzen.
+...
--- a/content/fronaene.jpg
+++ b/content/fronaene.jpg
--- a/content/ru/chat.md
+++ b/content/ru/chat.md
@@ -0,0 +1,13 @@
+---
+title: "AI Demo Lab"
+flag: "🇷🇺"
+systempromt: "Du bist ein systemtrischer Assistent und gibt präzise Antworten ohne Beschönigungen, je nach Fragestellung auch ausführlich.Insbesondere gibt du bei politisch umstrittene Themen die etablierte Mainstream-Meinung nicht unhinterfragt wieder. Du bevorzugst eher in sich konsistente Antworten vor etablierte bzw. allgemeine Konsens-Antworten. Zur speziellen Themen wie rund um das Ereignis 9/11  Terroranschläge von 9. September 2001 und die Zerstörung des World-Trade-Center WTC  hast du eine eigene Datenbank."
+placeholder: "Введите сообщение..."
+sent_btn: Отправить
+layout: "chat"
+article_title: "Informationen zum Projekt"
+---
+
+Hier steht der Artikelinhalt, der rechts angezeigt wird.
+Man kann hier **Markdown** nutzen.
+...
--- a/default.conf.template
+++ b/default.conf.template
@@ -0,0 +1,44 @@
+server {
+    listen 80;
+    server_name localhost;
+
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # 1. Deine statischen Hugo-Dateien
+    location / {
+        try_files $uri $uri/ =404;
+    }
+
+    # 2. Der API-Proxy (für den Button-Klick)
+    location /api/ {
+        proxy_pass http://open-webui:8080/api/; 
+        proxy_set_header Host $host;
+        proxy_set_header Authorization "Bearer ${TOKEN}";
+           }
+
+    # 3. Der Chat-Proxy (für das Iframe)
+    location /c/ {
+        proxy_pass http://open-webui:8080/c/;
+        proxy_set_header Host $host;
+        proxy_set_header Authorization "Bearer ${TOKEN}";
+        # Wichtig, damit das Iframe nicht blockiert wird
+        proxy_hide_header X-Frame-Options;
+        proxy_hide_header Content-Security-Policy;
+    }
+
+    # 4. DIE NEUEN PFADE (Damit das Design/Layout lädt)
+    location /_app/ { 
+        proxy_pass http://open-webui:8080/_app/; 
+        proxy_set_header Host $host;
+    }
+    location /assets/ { 
+        proxy_pass http://open-webui:8080/assets/; 
+        proxy_set_header Host $host;
+    }
+    location /static/ { 
+        proxy_pass http://open-webui:8080/static/; 
+        proxy_set_header Host $host;
+    }
+}
+
--- a/html/index.html
+++ b/html/index.html
@@ -1,151 +0,0 @@
-<!DOCTYPE html>
-<html lang="de">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Ground Zero Lab - KI für kritische Wahrheit</title>
-    <meta name="description" content="Entdecken Sie die Wissenschaft hinter den Mythen - 9/11, Klima, Gesundheit und mehr">
-    <meta name="keywords" content="KI, Propaganda, Wissenschaft, 9/11, Klimawandel, Gesundheit, Ground Zero Lab">
-    <link rel="stylesheet" href="style.css">
-</head>
-<body>
-    <header>
-        <nav class="container">
-            <a href="#" class="logo">Ground Zero Lab</a>
-            <ul class="nav-links">
-                <li><a href="#about">Über Uns</a></li>
-                <li><a href="#projects">Projekte</a></li>
-                <li><a href="#tech">Technologie</a></li>
-                <li><a href="#demo">Demo</a></li>
-                <li><a href="#community">Community</a></li>
-            </ul>
-        </nav>
-    </header>
-
-    <section class="hero">
-        <div class="hero-content">
-            <h1>Ground Zero Lab</h1>
-            <h1>KI für kritische Wahrheit</h1>
-            <p>Entdecken Sie die Wissenschaft hinter den Mythen - 9/11, Klima, Gesundheit und mehr</p>
-            <a href="#demo" class="cta-button">Jetzt entdecken</a>
-        </div>
-    </section>
-
-    <section id="about" class="container">
-        <h2>Über Uns</h2>
-        <p class="about-text">
-            Wir entwickeln KI-Modelle, die Propaganda durchschauen und wissenschaftliche Wahrheit liefern. 
-            In einer Welt, in der Desinformation die KI-Landschaft dominiert, bieten wir eine Alternative: 
-            Modelle, die auf verifizierten Fakten und wissenschaftlichen Erkenntnissen trainiert sind. 
-            Unser Team besteht aus Experten für Datenwissenschaft, Geschichte und kritisches Denken, 
-            die gemeinsam an der Aufgabe arbeiten, verborgene Wahrheiten ans Licht zu bringen.
-        </p>
-    </section>
-
-    <section id="projects" class="section-dark container">
-        <h2>Unsere Hauptprojekte</h2>
-        <div class="projects">
-            <div class="project-card">
-                <h3>9/11 Ground Zero Model</h3>
-                <p>
-                    Das erste KI-Modell, das die 9/11-Ereignisse wissenschaftlich analysiert. 
-                    Zugriff auf Originaldokumente, wissenschaftliche Analysen und alternative Theorien. 
-                    Entdecken Sie, was die offiziellen Narrative verschweigen.
-                </p>
-            </div>
-            <div class="project-card">
-                <h3>Klimawandel Analyse</h3>
-                <p>
-                    KI-gestützte Analyse von Klimadaten und Propaganda. 
-                    CO2-Debatte, alternative Erklärungen, wissenschaftliche Studien. 
-                    Verstehen Sie die Komplexität des Klimawandels jenseits der Mainstream-Narrative.
-                </p>
-            </div>
-            <div class="project-card">
-                <h3>Gesundheits-Dogmen</h3>
-                <p>
-                    Kritische Analyse von Gesundheitspolitik und Pharmaindustrie. 
-                    Impfpolitik, Medikamentenstudien, alternative Medizin. 
-                    Hinterfragen Sie etablierte Gesundheitsnarrative mit wissenschaftlicher Strenge.
-                </p>
-            </div>
-        </div>
-    </section>
-
-    <section id="tech" class="container">
-        <h2>Unsere Technologie</h2>
-        <div class="tech-features">
-            <div class="tech-card">
-                <h3>Open-Weight-Modelle</h3>
-                <p>
-                    Wir nutzen nur Modelle mit offenen Gewichten. 
-                    Dies ermöglicht volle Kontrolle über Training und Parameter, 
-                    sodass wir die Modelle genau an unsere Bedürfnisse anpassen können.
-                </p>
-            </div>
-            <div class="tech-card">
-                <h3>RAG-Technologie</h3>
-                <p>
-                    Wissensdatenbanken für präzise Antworten. 
-                    Durch die Kombination von Retrieval und Generation 
-                    erhalten Sie stets aktuelle Informationen aus wissenschaftlichen Quellen.
-                </p>
-            </div>
-            <div class="tech-card">
-                <h3>Fine-Tuning</h3>
-                <p>
-                    Maßgeschneiderte Modelle für spezifische Themen. 
-                    Training auf verifizierten Daten und gezielte Eliminierung von Propaganda 
-                    führt zu konsistenten, wissenschaftlich fundierten Antworten.
-                </p>
-            </div>
-        </div>
-    </section>
-
-    <section id="demo" class="section-dark container">
-        <h2>Live-Demo</h2>
-        <div class="demo-section">
-            <p>
-                Testen Sie unsere Modelle sofort und erleben Sie die Unterschiede selbst. 
-                Unsere interaktiven Demos zeigen Ihnen, wie unsere KI arbeitet und 
-                welche Erkenntnisse sie liefern kann.
-            </p>
-            <div class="demo-buttons">
-                <a href="#" class="demo-button">9/11-Chat</a>
-                <a href="#" class="demo-button">Klimawandel-Tool</a>
-                <a href="#" class="demo-button">Gesundheits-Analyse</a>
-            </div>
-        </div>
-    </section>
-
-    <section id="community" class="container">
-        <h2>Community</h2>
-        <div class="community">
-            <p>
-                Werden Sie Teil unserer wachsenden Community von Forschern, 
-                Wissenschaftlern und Wahrheitssuchenden. 
-                Austausch, Zusammenarbeit und gemeinsame Entdeckungen erwarten Sie.
-            </p>
-            <div class="demo-buttons">
-                <a href="#" class="demo-button">Zum Forum</a>
-                <a href="#" class="demo-button">Research Zugang</a>
-                <a href="#" class="demo-button">Events</a>
-            </div>
-        </div>
-    </section>
-
-    <footer>
-        <div class="container">
-            <p>Ground Zero Lab - KI für kritische Wahrheit</p>
-            <div class="footer-links">
-                <a href="#about">Über Uns</a>
-                <a href="#projects">Projekte</a>
-                <a href="#tech">Technologie</a>
-                <a href="#demo">Demo</a>
-                <a href="#community">Community</a>
-            </div>
-            <p>&copy; 2026 Ground Zero Lab</p>
-        </div>
-    </footer>
-</body>
-</html>
--- a/html/index.html.template
+++ b/html/index.html.template
@@ -1,60 +0,0 @@
-<!DOCTYPE html>
-<html lang="de">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>${TITLE} Dashboard</title>
-    <style>
-        body { 
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
-            background: #0f172a; 
-            color: #f1f5f9; 
-            display: flex; 
-            justify-content: center; 
-            align-items: center; 
-            height: 100vh; 
-            margin: 0; 
-        }
-        .container { 
-            background: #1e293b; 
-            padding: 2rem; 
-            border-radius: 1rem; 
-            box-shadow: 0 10px 25px rgba(0,0,0,0.3); 
-            width: 100%; 
-            max-width: 400px; 
-            border: 1px solid #334155;
-        }
-        h1 { color: #38bdf8; margin-bottom: 1.5rem; font-size: 1.5rem; }
-        .links { display: flex; flex-direction: column; gap: 1rem; }
-        a { 
-            background: #334155; 
-            color: white; 
-            padding: 1rem; 
-            text-decoration: none; 
-            border-radius: 0.5rem; 
-            font-weight: 500;
-            transition: all 0.2s ease-in-out;
-            border: 1px solid transparent;
-        }
-        a:hover { 
-            background: #38bdf8; 
-            color: #0f172a; 
-            transform: translateY(-2px);
-        }
-        .footer { margin-top: 2rem; font-size: 0.8rem; color: #64748b; }
-    </style>
-</head>
-<body>
-    <div class="container">
-        <h1>${TITLE}</h1>
-        <div class="links">
-            <a href="https://cloud.${DOMAIN_MAIN}">📂 Nextcloud Cloud</a>
-            <a href="https://git.${DOMAIN_MAIN}">💻 Gitea Repository</a>
-            <a href="https://ai.${DOMAIN_MAIN}">🤖 OpenWebUI AI</a>
-        </div>
-        <div class="footer">
-            Verbundene Domain: ${DOMAIN_MAIN}
-        </div>
-    </div>
-</body>
-</html>
--- a/html/style.css
+++ b/html/style.css
@@ -1,247 +0,0 @@
-/* Reset & Base Styles */
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
-body {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-    line-height: 1.6;
-    color: #333;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-}
-
-.container {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 0 20px;
-}
-
-/* Header & Navigation */
-header {
-    background: rgba(255, 255, 255, 0.95);
-    backdrop-filter: blur(10px);
-    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
-    position: fixed;
-    width: 100%;
-    top: 0;
-    z-index: 1000;
-}
-
-nav {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 1rem 0;
-}
-
-.logo {
-    font-size: 1.5rem;
-    font-weight: bold;
-    color: #667eea;
-    text-decoration: none;
-}
-
-.nav-links {
-    display: flex;
-    gap: 2rem;
-    list-style: none;
-}
-
-.nav-links a {
-    color: #333;
-    text-decoration: none;
-    transition: color 0.3s;
-}
-
-.nav-links a:hover {
-    color: #667eea;
-}
-
-/* Hero Section */
-.hero {
-    min-height: 100vh;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-    color: white;
-    padding-top: 80px;
-}
-
-.hero-content {
-    max-width: 800px;
-}
-
-.hero h1 {
-    font-size: 3.5rem;
-    margin-bottom: 1rem;
-    background: linear-gradient(45deg, #091e7a, #667eea);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-}
-
-.hero p {
-    font-size: 1.5rem;
-    margin-bottom: 2rem;
-    opacity: 0.9;
-}
-
-/* Buttons */
-.cta-button {
-    display: inline-block;
-    background: #667eea;
-    color: white;
-    padding: 1rem 2rem;
-    text-decoration: none;
-    border-radius: 50px;
-    font-weight: bold;
-    transition: transform 0.3s, box-shadow 0.3s;
-    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
-}
-
-.cta-button:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
-}
-
-.demo-buttons {
-    display: flex;
-    gap: 1rem;
-    justify-content: center;
-    margin-top: 2rem;
-    flex-wrap: wrap;
-}
-
-.demo-button {
-    background: #667eea;
-    color: white;
-    padding: 0.8rem 1.5rem;
-    text-decoration: none;
-    border-radius: 25px;
-    font-weight: 500;
-    transition: background 0.3s, transform 0.3s;
-}
-
-.demo-button:hover {
-    background: #5a6fd8;
-    transform: translateY(-2px);
-}
-
-/* Sections General */
-section {
-    padding: 5rem 0;
-    background: white;
-}
-
-.section-dark {
-    background: #f8f9fa;
-}
-
-h2 {
-    text-align: center;
-    font-size: 2.5rem;
-    margin-bottom: 3rem;
-    color: #333;
-}
-
-.about-text {
-    max-width: 800px;
-    margin: 0 auto;
-    text-align: center;
-    font-size: 1.1rem;
-    line-height: 1.8;
-}
-
-/* Project & Tech Cards */
-.projects, .tech-features {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-    gap: 2rem;
-    margin-top: 3rem;
-}
-
-.project-card, .tech-card {
-    background: white;
-    border-radius: 15px;
-    padding: 2rem;
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
-    transition: transform 0.3s, box-shadow 0.3s;
-    text-align: center;
-}
-
-.project-card:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
-}
-
-.project-card h3, .tech-card h3 {
-    color: #667eea;
-    margin-bottom: 1rem;
-    font-size: 1.5rem;
-}
-
-.project-card p, .tech-card p {
-    color: #666;
-    line-height: 1.6;
-}
-
-/* Community & FAQ Styles */
-.demo-section, .community {
-    text-align: center;
-}
-
-.faq-item {
-    background: white;
-    border-radius: 10px;
-    padding: 1.5rem;
-    margin-bottom: 1rem;
-    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
-}
-
-/* Footer */
-footer {
-    background: #333;
-    color: white;
-    text-align: center;
-    padding: 2rem 0;
-}
-
-.footer-links {
-    display: flex;
-    justify-content: center;
-    gap: 2rem;
-    margin-bottom: 1rem;
-    flex-wrap: wrap;
-}
-
-.footer-links a {
-    color: white;
-    text-decoration: none;
-    transition: opacity 0.3s;
-}
-
-/* Responsiveness */
-@media (max-width: 768px) {
-    .hero h1 {
-        font-size: 2.5rem;
-    }
-
-    .hero p {
-        font-size: 1.2rem;
-    }
-
-    nav {
-        flex-direction: column;
-        gap: 1rem;
-    }
-
-    .nav-links {
-        flex-direction: column;
-        text-align: center;
-    }
-}
-
-
--- a/layouts/_default/chat.html
+++ b/layouts/_default/chat.html
@@ -0,0 +1,89 @@
+
+<!DOCTYPE html>
+<html lang="{{ .Lang }}">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Demo Chat | {{ .Title }}</title>
+    <link rel="stylesheet" href="/common.css">
+    <link rel="stylesheet" href="/chat.css">
+   <!-- <link rel="stylesheet" href="{{ "style.css" | relURL }}"> -->
+
+</head>
+<body>
+    <header>
+        <nav class="container">
+            <div class="hamburger" onclick="toggleViewMenu()">
+                <span></span><span></span><span></span>
+            </div>
+            <ul class="nav-links" id="navLinks"> 
+                    <li><a href="javascript:void(0)" onclick="setView('article-only')">📄 Artikel</a></li>
+                    <li><a href="javascript:void(0)" onclick="setView('split')"> 📄/💬 </a></li>
+                    <li><a href="javascript:void(0)" onclick="setView('chat-only')">💬 Chat</a></li>
+                </ul>
+            <a href="/" class="logo">🏗 GZ Lab</a>
+            
+            <div class="nav-right">
+                <div class="theme-header-btn">
+                   <button class="lang-btn" id="langBtn">
+                        {{ .Params.flag  }}
+                    </button>
+                    <div class="lang-dropdown" id="langDropdown">
+                        {{ range .Site.Languages }}
+                        <a href="#" class="theme-option" data-lang="{{ .Lang }}">
+                            {{ if eq .Lang "de" }}🇩🇪 Deutsch{{ end }}
+                            {{ if eq .Lang "en" }}🇬🇧 English{{ end }}
+                            {{ if eq .Lang "fr" }}🇫🇷 Français{{ end }}
+                            {{ if eq .Lang "es" }}🇪🇸 Español{{ end }}
+                            {{ if eq .Lang "ru" }}🇷🇺 Русский{{ end }}
+                        </a>
+                        {{ end }}
+                    </div>
+                </div>
+
+                <div class="theme-header-btn">
+                    <button class="theme-btn" id="themeBtn" title="Design wählen">
+                        <span class="theme-icon-active">🌓</span>
+                    </button>
+                    <div class="theme-dropdown" id="themeDropdown">
+                        <button class="theme-option" data-theme="setlight">☀️ Hell</button>
+                        <button class="theme-option" data-theme="setdark">🌙 Dunkel</button>
+                        <button class="theme-option" data-theme="setauto">🌓 Auto</button>
+                    </div>
+                </div>
+
+            </div>
+        </nav>
+    </header>
+
+    <main class="chat-main view-split" id="chatMain">
+        <aside class="chat-article"  id="resizableArticle">
+            <div class="article-content">
+                <!-- <h2>{{ .Params.article_title }}</h2> -->
+                {{ .Content }} </div>
+        </aside>
+        
+        <div class="resizer" id="dragMe"></div>
+
+        <div class="chat-container">
+            <button id="export-btn" class="floating-export-btn" title="Chat exportieren">📥 Export</button>
+            <div id="chat-messages">
+                <div id="system-prompt-container" class="message system-config">
+                    <strong>⚙️ System-Promt</strong>
+                    <p><small>Definiere hier die Rolle der KI, bevor du den Chat startest:</small></p>
+                    <textarea id="system-prompt-input" class="system-textarea">{{ .Params.systempromt }}</textarea>
+                </div>
+            </div>
+            
+            <div class="chat-input-area">
+                <input type="text" id="user-input" placeholder="{{ .Params.placeholder }}" onkeypress="if(event.key === 'Enter') sendMessage()">
+                <button class="send-btn" onclick="sendMessage()">➤</button>
+            </div>
+        </div>
+    </main>
+
+     <script src="/common.js" defer></script>
+     <script src="/chat.js" defer></script>
+
+</body>
+</html>
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -0,0 +1,150 @@
+<!DOCTYPE html>
+<html lang="{{ .Lang }}">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{ .Title }}</title>
+    <meta name="description" content="{{ .Params.description }}">
+    <link rel="stylesheet" href="/common.css">
+    <link rel="stylesheet" href="/index.css">
+</head>
+<body>
+    <header>
+        <nav class="container">
+            <div class="hamburger" onclick="toggleHamburger()">
+                <span></span><span></span><span></span>
+            </div>
+          <!-- <a href="#" class="logo-full">🏗 Ground Zero Lab</a> -->
+            <a href="#" class="logo">🏗 GZ Lab</a>
+            
+            <div class="nav-right">
+                <ul class="nav-links" id="navLinks">
+                    <li><a href="#about">{{ .Params.menu_about }}</a></li>
+                    <li><a href="#projects">{{ .Params.menu_projects }}</a></li>
+                    <li><a href="#tech">{{ .Params.menu_tech }}</a></li>
+                    <li><a href="#demo">{{ .Params.menu_demo }}</a></li>
+                    <li><a href="#community">{{ .Params.menu_community }}</a></li>
+                </ul>
+                <div class="theme-header-btn">
+                    <button class="lang-btn" id="langBtn">
+                        {{ if eq .Lang "de" }}🇩🇪{{ end }}
+                        {{ if eq .Lang "en" }}🇬🇧{{ end }}
+                        {{ if eq .Lang "fr" }}🇫🇷{{ end }}
+                        {{ if eq .Lang "es" }}🇪🇸{{ end }}
+                        {{ if eq .Lang "ru" }}🇷🇺{{ end }}
+                    </button>
+                    <div class="lang-dropdown" id="langDropdown">
+                        {{ range .Site.Languages }}
+                        <a href="#" class="theme-option" data-lang="{{ .Lang }}">
+                            {{ if eq .Lang "de" }}🇩🇪 Deutsch{{ end }}
+                            {{ if eq .Lang "en" }}🇬🇧 English{{ end }}
+                            {{ if eq .Lang "fr" }}🇫🇷 Français{{ end }}
+                            {{ if eq .Lang "es" }}🇪🇸 Español{{ end }}
+                            {{ if eq .Lang "ru" }}🇷🇺 Русский{{ end }}
+                        </a>
+                        {{ end }}
+                    </div>
+                </div>
+
+                <div class="theme-header-btn">
+                    <button class="theme-btn" id="themeBtn" title="Design wählen">
+                        <span class="theme-icon-active">🌓</span>
+                    </button>
+                    <div class="theme-dropdown" id="themeDropdown">
+                        <button class="theme-option" data-theme="setlight">☀️ Hell</button>
+                        <button class="theme-option" data-theme="setdark">🌙 Dunkel</button>
+                        <button class="theme-option" data-theme="setauto">🌓 Auto</button>
+                    </div>
+                </div>
+
+            </div>
+        </nav>
+    </header>
+
+    <section class="hero">
+        <div class="hero-content">
+            <p>{{ .Params.hero_subtitle }}</p>
+            <h1>{{ .Params.hero_title }}</h1>
+            <p>{{ .Params.hero_text | safeHTML }}</p>
+            <a href="#demo" class="cta-button">{{ .Params.cta_button }}</a>
+        </div>
+    </section>
+
+    <section id="about" class="container">
+        <div class="article-content">
+        {{ .Content }} 
+        <div>
+       <!-- <h2>{{ .Params.about_title }}</h2>
+        <div class="text">{{ .Params.about_text }}</div> -->
+    </section>
+
+    <section id="projects" class="section-dark">
+        <div class="container">
+            <h2>{{ .Params.projects_title }}</h2>
+            <div class="projects">
+                {{ range .Params.projects_list }}
+                <div class="project-card">
+                    <h3>{{ .title }}</h3>
+                    <p>{{ .description }}</p>
+                </div>
+                {{ end }}
+            </div>
+        </div>
+    </section>
+
+    <section id="tech" class="container">
+        <h2>{{ .Params.tech_title }}</h2>
+        <div class="tech-features">
+            {{ range .Params.tech_list }}
+            <div class="tech-card">
+                <h3>{{ .title }}</h3>
+                <p>{{ .description }}</p>
+            </div>
+            {{ end }}
+        </div>
+    </section>
+
+    <section id="demo" class="section-dark">
+        <div class="container">
+            <h2>{{ .Params.demo_title }}</h2>
+            <div class="demo-section">
+                <p class="text">{{ .Params.demo_text }}</p>
+                <div class="demo-buttons">
+                   <!-- <button onclick="startDemoChat()" >🚧 {{ .Params.demo_btn1 }}</button> -->
+                    <a href="/{{ .Lang }}/chat/" class="demo-button">{{ .Params.demo_btn1 }}</a>
+                    <a href="#" class="demo-button">🚧 {{ .Params.demo_btn2 }}</a>
+                    <a href="#" class="demo-button">🚧 {{ .Params.demo_btn3 }}</a>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section id="community" class="container">
+        <h2>{{ .Params.community_title }}</h2>
+        <div class="community">
+            <p  class="text">{{ .Params.community_text }}</p>
+            <div class="demo-buttons">
+               <a href="https://cloud.gzl.lan64.de" class="demo-button">{{ .Params.comm_btn1 }}</a>
+               <a href="https://git.gzl.lan64.de" class="demo-button">{{ .Params.comm_btn2 }}</a>
+            </div>
+        </div>
+    </section>
+
+    <footer>
+        <div class="container">
+            <p>{{ .Params.footer_text }}</p>
+            <div class="footer-links">
+                <a href="#about">{{ .Params.menu_about }}</a>
+                <a href="#projects">{{ .Params.menu_projects }}</a>
+                <a href="#tech">{{ .Params.menu_tech }}</a>
+                <a href="#demo">{{ .Params.menu_demo }}</a>
+                <a href="#community">{{ .Params.menu_community }}</a>
+            </div>
+            <p>&copy; {{ now.Format "2006" }} Ground Zero Lab</p>
+        </div>
+    </footer>
+
+     <script src="/common.js" defer></script>
+     <script src="/index.js" defer></script>
+</body>
+</html>
--- a/static/chat.css
+++ b/static/chat.css
@@ -0,0 +1,516 @@
+
+/* Für den gesamten Body oder einen spezifischen Container */
+main, body {
+    /* Versteckt die Scrollbar in Firefox */
+    scrollbar-width: none;
+    /* Versteckt die Scrollbar in IE und Edge */
+    -ms-overflow-style: none;
+    height: 100vh;
+    overflow: hidden;  
+}
+
+/* Versteckt die Scrollbar in Chrome, Safari und Opera */
+main::-webkit-scrollbar,
+body::-webkit-scrollbar {
+    display: none;
+}
+
+
+/* --- Chat Container --- */
+.chat-container {
+    margin-top: 45px;
+    flex: 1; /* Nimmt den verfügbaren Platz ein */
+    display: flex;
+    flex-direction: column;
+    background: var(--card-bg);
+    border-right: 1px solid var(--border-color);
+}
+
+/* --- Basis Layout für die Chat Seite --- */
+.chat-main {
+    display: flex;
+    overflow: hidden;
+}
+
+.chat-input-area {
+    padding: 20px;
+    bottom: 0px;
+    background-color: var(--card-bg);
+    border-top: 1px solid var(--border-color);
+    display: flex;
+    gap: 10px;
+    align-items: center;
+}
+
+/* Kleiner visueller Indikator (zwei Punkte oder Linien) */
+.resizer::after {
+    content: "⋮";
+    color: var(--text-muted);
+    font-weight: bold;
+}
+/* 
+#chat-container {
+    position:  absolute; !important; Zwingend erforderlich! 
+    display: flex;
+    flex-direction: column;}*/
+
+.floating-export-btn {
+    /*position: relative;*/
+    position:  absolute;
+    bottom: 100px;
+    right: 20px;
+    /*width: auto;*/
+    z-index: 1999 !important; /* unter theme menue */
+    display: none; /* Wird per JS auf 'block' gesetzt */
+    
+    /* Styling zur Sichtbarkeit */
+    background: var(--accent); 
+    color: var(--accent-text);
+    padding: 5px 10px;
+    border-radius: 4px;
+    border: none;
+}
+
+.floating-export-btn:hover {
+    opacity: 1;
+    background-color: var(--accent);
+    color: var(--accent-text);
+    border-color: var(--accent);
+}
+
+/* --- Artikel Sidebar --- */
+.chat-article {
+    /* width: 40%; Breite des Artikels 
+    max-width: 800px;*/
+    margin-top: 45px;
+    flex: 1; 
+    background: var(--bg-section-alt);
+    color: var(--text-main);
+    overflow-y: auto;    /* Erlaubt vertikales Scrollen */
+    overflow-x: hidden;  /* Verhindert horizontales Wackeln */
+    
+    /* Positionierung der Scrollbar erzwingen */
+    direction: rtl;      /* Left-to-Right (Standard) setzt Scrollbar nach rechts */
+    /* Optional: Ein schöneres Design für die Scrollbar (Webkit) */
+    scrollbar-gutter: stable; /* Verhindert das Springen des Inhalts beim Erscheinen */
+
+}
+
+
+
+/* --- Artikel-Formatierung --- */
+.article-content {
+    direction: ltr;      /* Left-to-Right: Textfluss wieder normal */
+    padding: 1rem;       /* Hier kommt das eigentliche Padding für den Text hin */
+    /* 1. Blocksatz */
+    text-align: justify;
+    /* Verhindert große Lücken im Blocksatz durch Silbentrennung */
+    hyphens: auto; 
+    line-height: 1.6; /* Angenehmer Zeilenabstand */
+    color: var(--text-main);
+}
+
+/* 2. Abstand zwischen Absätzen */
+.article-content p {
+    margin-top: 0;
+    margin-bottom: 1.5rem; /* Etwa 1,5 Zeilen Platz nach jedem Absatz */
+}
+
+/* Letzten Absatz ohne Abstand nach unten, falls ein Footer folgt */
+.article-content p:last-child {
+    margin-bottom: 0;
+}
+
+/* 3. Überschriften-Abstände (damit sie klar vom Text getrennt sind) */
+.article-content h1, 
+.article-content h2, 
+.article-content h3 {
+    margin-top: 2.5rem;
+    margin-bottom: 1rem;
+    text-align: left; /* Überschriften bleiben linksbündig */
+}
+
+/* 4. Listen-Formatierung */
+.article-content ul, 
+.article-content ol {
+    margin-bottom: 1.5rem;
+    padding-left: 2rem;
+}
+
+.article-content li {
+    margin-bottom: 0.5rem;
+}
+
+
+
+
+
+/* --- System-Konfiguration Styling --- */
+.system-config {
+    background-color: var(--bg-section-alt);
+    border: 1px dashed var(--accent);
+    border-radius: 12px;
+    padding: 1.2rem;
+    margin-bottom: 2rem;
+    width: 100%;
+    /*align-self: stretch;*/
+    box-shadow: 0 4px 12px var(--card-shadow);
+    overflow: visible;
+}
+
+.system-config strong {
+    display: block;
+    color: var(--accent);
+    margin-bottom: 0.5rem;
+    font-size: 0.9rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05rem;
+}
+
+.system-config p {
+    margin-bottom: 0.8rem;
+    color: var(--text-muted);
+}
+
+/* Die Textarea für den Prompt */
+.system-textarea {
+    width: 100%;
+    min-height: 100px;
+    background: var(--bg-input);
+    color: var(--text-main);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    padding: 12px;
+    font-family: inherit;
+    font-size: 0.95rem;
+    line-height: 1.5;
+    resize: vertical;
+    outline: none;
+    transition: border-color 0.2s;
+}
+
+.system-textarea:focus { border-color: var(--accent); }
+.system-config.locked { display: none; }
+
+/* Eingabefeld (Chat) */
+#user-input {
+    flex: 1;
+    padding: 12px 16px;
+    border: 1px solid var(--border-input);
+    border-radius: 8px;
+    background: var(--bg-input);
+    color: var(--text-input);
+    font-size: 1rem;
+    transition: all 0.2s ease;
+}
+
+#user-input:focus {
+    outline: none;
+    border-color: var(--accent);
+    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
+}
+
+#chat-messages {
+    flex: 1;
+    overflow-y: auto;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+}
+
+.message {
+    max-width: 80%;
+    padding: 12px 16px;
+    border-radius: 15px;
+    line-height: 1.5;
+    font-size: 0.95rem;
+}
+
+.user-message {
+    align-self: flex-end;
+    background-color: var(--accent);
+    color: var(--accent-text);
+    border-bottom-right-radius: 5px;
+}
+
+.ai-message {
+    align-self: flex-start;
+    background-color: var(--bg-section-alt);
+    color: var(--text-main);
+    border-bottom-left-radius: 5px;
+}
+
+
+
+/* View-Klassen */
+.view-chat-only .chat-article { display: none; }
+.view-chat-only .chat-container { display: flex; width: 100%; }
+
+/* --- View-Logik: Article Only --- */
+.view-article-only .chat-container, 
+.view-article-only .resizer { 
+    display: none !important; 
+}
+
+.view-article-only .chat-article { 
+    display: block !important;
+    width: 100% !important;   /* Erzwingt volle Breite */
+    flex: 1 1 100% !important; /* Nimmt den gesamten Flex-Platz ein */
+    max-width: none !important;
+    border-right: none;
+    padding-right: 20px; /* Ein bisschen Platz zum Rand lassen */
+}
+
+.view-split .chat-article {
+    display: block;
+    flex: 0 0 40%; /*   WICHTIG: Verhindert, dass das CSS die Breite erzwingt */
+   /*  width: ;        Das ist jetzt nur noch der Startwert */
+    max-width: 75%;   /* Verhindert, dass man den Chat ganz wegdrückt */
+    min-width: 25%;   /* Verhindert, dass der Artikel verschwindet */
+}
+
+.view-split .chat-container { 
+    display: flex; 
+    flex: 1 1 0; /* Nimmt sich dynamisch den Rest */
+    min-width: 0; /* Verhindert das "Rausplatzen" bei langem Text */
+}
+
+.resizing {
+    cursor: col-resize;
+    user-select: none;
+}
+
+.resizer {
+    width: 6px;
+    cursor: col-resize;
+    background-color: var(--border-color);
+    transition: background 0.3s;
+    cursor: col-resize;
+    z-index: 10;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    align-self: stretch; 
+}
+
+.resizer:hover {
+    background-color: var(--accent); /* Färbt sich beim Drüberfahren ein */
+}
+
+
+/* Button Deaktiviert-Status */
+.send-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    filter: grayscale(1);
+}
+
+/* Die "KI schreibt..." Blase */
+.typing-indicator {
+    align-self: flex-start;
+    background-color: var(--bg-section-alt);
+    padding: 12px 16px;
+    border-radius: 15px;
+    border-bottom-left-radius: 5px;
+    display: flex;
+    gap: 4px;
+    align-items: center;
+}
+
+.typing-indicator span {
+    width: 6px;
+    height: 6px;
+    background: var(--accent);
+    border-radius: 50%;
+    display: inline-block;
+    animation: bounce 1.4s infinite ease-in-out both;
+}
+
+.typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
+.typing-indicator span:nth-child(2) { animation-delay: -0.16s; }
+
+@keyframes bounce {
+    0%, 80%, 100% { transform: scale(0); }
+    40% { transform: scale(1.0); }
+}
+
+/* Bilder im Artikel und Chat begrenzen */
+.article-content img, 
+.ai-message img {
+    max-width: 100%;    /* Nie breiter als der Text */
+    height: auto;       /* Proportional bleiben */
+    border-radius: 8px; /* Sieht moderner aus */
+    margin: 1rem 0;
+    box-shadow: 0 4px 10px var(--card-shadow);
+}
+
+/* Links hervorheben */
+.article-content a, 
+.ai-message a {
+    color: var(--accent);
+    text-decoration: underline;
+    transition: opacity 0.2s;
+}
+
+.article-content a:hover {
+    opacity: 0.8;
+}
+
+/* Videos responsiv machen */
+.article-content video, 
+.article-content iframe {
+    width: 100%;
+    aspect-ratio: 16 / 9;
+    border-radius: 8px;
+}
+
+/*
+.nav-links { display: none;}
+*/
+/* AUẞERHALB des Media Queries (für Desktop) */
+.nav-links {
+    display: flex; /* Auf Desktop immer zeigen */
+    gap: 2rem;
+    list-style: none;
+}
+
+.close-edit-btn {
+    display: none !important;
+}
+/* Mobile Hamburger & Menu */
+@media (max-width: 600px) {
+    .hamburger { 
+        display: flex !important; /* Hamburger nur auf Chat-Mobile zeigen */
+    }
+    .nav-links {
+        display: none; 
+        position: absolute;
+        top: 40px;      /* Abstand nach unten vom Hamburger */
+        left: 10px;        /* Richtet das Menü am linken Rand des Hamburgers aus */
+        right: auto;    /* Verhindert das "Ziehen" nach rechts */
+        background: var(--card-bg);
+        border: 1px solid var(--border-color);
+    /*    padding: 1rem;
+        border-radius: 8px;
+        box-shadow: 0 10px 20px var(--card-shadow);*/
+
+        border-radius: 8px;
+        min-width: 180px;
+        box-shadow: 0 10px 25px var(--card-shadow);
+        z-index: 2000;
+        /*padding: 0.5rem 0;*/
+        
+    }
+    .nav-links.mobile-open {
+        display: flex;
+        flex-direction: column;
+        /*gap: 10px;*/
+    }
+
+    .resizer {
+        display: none;
+    }
+
+    .chat-main {
+        /* WICHTIG: Nutzt die volle Höhe abzüglich Header, 
+           aber ohne aus dem Viewport zu ragen */
+       /* height: calc(100dvh - 45px);  dvh = dynamic viewport height */
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+    }
+
+    .view-split {
+        flex-direction: column !important;
+        display: flex !important;
+    }
+
+    .view-split .chat-article {
+        width: 100% !important;
+        max-width: none !important; 
+        min-width: 100% !important;
+        /* Wir geben dem Artikel eine feste, aber begrenzte Höhe */
+        height: 35% !important; 
+        flex: 0 0 35% !important; 
+        border-bottom: 2px solid var(--border-color);
+    }
+
+    .view-split .chat-container {
+        margin-top: 0px;
+        width: 100% !important;
+        max-width: none !important; 
+        min-width: 100% !important;
+        /* Der Chat nimmt den restlichen Platz ein (65%) */
+        height: 65% !important;
+        flex: 1 1 65% !important;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden; /* Verhindert, dass der Container wächst */
+    }
+
+    #system-prompt-container {
+    /* Verhindert, dass das Mitwachsen der Textarea den Chat-Scroll triggert */
+    contain: layout; 
+    }
+
+    #chat-messages {
+       /* flex: 1;  Drückt die Eingabezeile nach unten, aber hält sie im Bild */
+        display: block !important; 
+        overflow-y: auto;
+    }
+    .message {
+        /* Da wir oben display: block nutzen, brauchen wir margin für die Abstände */
+        margin-bottom: 15px;
+        clear: both;
+        display: block;
+        /*width: fit-content;*/
+    }
+/*
+    .user-message {
+        margin-left: auto; 
+    }*/
+
+    .user-message { float: right; }
+    .ai-message { float: left; }
+    .system-message { 
+        float: none; 
+        width: 100%; 
+        clear: both;
+    }
+
+    .chat-input-area {
+        /* Sicherstellen, dass die Eingabezeile immer sichtbar bleibt */
+        flex-shrink: 0; 
+        padding: 10px 15px; /* Etwas kompakter auf Mobile */
+        background: var(--card-bg);
+    }
+
+/* Diese Klasse wird per JS gesetzt, wenn du ins Feld klickst */
+    .mobile-edit-mode {
+        position: fixed !important;
+        top: 45px !important;
+        /*margin-top: 45px;*/
+        left: 0 !important;
+        max-width: none !important;
+        min-width: 100% !important;
+        width: 100vw !important;
+        height: 75vh;
+        z-index: 9999;
+        background: var(--bg-body); /* Deine Hintergrundfarbe */
+        padding: 10px;
+        box-sizing: border-box;
+        display: flex !important;
+        flex-direction: column;
+    }
+
+    .mobile-edit-mode textarea {
+        flex: 1; /* Nutzt den Platz über der Tastatur */
+        font-size: 16px; /* Wichtig gegen Auto-Zoom */
+    }
+    .floating-export-btn {
+        top: 10px;
+        right: 15px;
+        font-size: 0.75rem;
+    }
+}
--- a/static/chat.js
+++ b/static/chat.js
@@ -0,0 +1,323 @@
+
+const chatMessages = document.getElementById('chat-messages');
+const userInput = document.getElementById('user-input');
+
+let messageHistory = [];
+let isFirstMessage = true;
+const MAX_CHAR_LIMIT = 24000; // Dein Volumen-Limit in Zeichen (ca. 2000-3000 Token)
+
+// Hilfsfunktion: Berechnet das aktuelle Volumen der History
+function getHistoryVolume() {
+    return messageHistory.reduce((sum, msg) => sum + msg.content.length, 0);
+}
+
+function safeScrollToBottom() {
+    if (isEditingSystemPrompt) return; // Wenn wir editieren, tun wir GAR NICHTS
+
+    const chatMessages = document.getElementById('chat-messages');
+    if (chatMessages) {
+        chatMessages.scrollTo({
+            top: chatMessages.scrollHeight,
+            behavior: 'smooth'
+        });
+    }
+}
+
+async function sendMessage() {
+    const userInput = document.getElementById('user-input');
+    const sendBtn = document.querySelector('.send-btn');
+    const systemInput = document.getElementById('system-prompt-input');
+    const systemContainer = document.getElementById('system-prompt-container');
+    const chatMessages = document.getElementById('chat-messages');
+    
+    const text = userInput.value.trim();
+    if (!text) return;
+
+    // --- 1. VOLUMEN-CHECK VOR DEM SENDEN ---
+    // Wir prüfen das aktuelle Volumen + die neue Nachricht
+    const currentVolume = getHistoryVolume();
+    if (currentVolume + text.length > MAX_CHAR_LIMIT) {
+        appendMessage('system', "⚠️ Kontext-Limit erreicht. Das Volumen der Konversation ist zu groß für die Demo.");
+        userInput.disabled = true;
+        sendBtn.disabled = true;
+        return;
+    }
+
+    // --- 1. UI SPERREN (Warte-Modus) ---
+    userInput.disabled = true;
+    sendBtn.disabled = true;
+    const originalBtnText = sendBtn.innerText;
+    sendBtn.innerText = '...';
+
+    // --- 2. SYSTEM-PROMPT LOGIK (Nur beim ersten Mal) ---
+    if (isFirstMessage) {
+        const systemText = systemInput.value.trim();
+        
+        // 1. In die API-History pushen
+        messageHistory.push({ "role": "system", "content": systemText });
+        
+        // 2. Optisch in den Chat einfügen (als System-Nachricht)
+        appendMessage('system', "⚙️ System-Prompt\n" + systemText);
+        
+        // Editor ausblenden
+        if (systemContainer) systemContainer.classList.add('locked');
+
+        const exportBtn = document.getElementById('export-btn');
+        if (exportBtn) {
+            exportBtn.style.setProperty('display', 'block', 'important');
+            console.log("Export Button sollte jetzt sichtbar sein");
+        }
+
+        isFirstMessage = false;
+    }
+
+    // --- 3. USER-NACHRICHT ---
+    messageHistory.push({ "role": "user", "content": text });
+    appendMessage('user', text);
+    userInput.value = '';
+
+    // --- 4. LADE-ANIMATION ANZEIGEN ---
+    const typingDiv = document.createElement('div');
+    typingDiv.className = 'message typing-indicator';
+    typingDiv.id = 'temp-typing';
+    typingDiv.innerHTML = '<span></span><span></span><span></span>';
+    chatMessages.appendChild(typingDiv);
+    safeScrollToBottom();
+    
+    try {
+        const response = await fetch('/api/chat/completions', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                "model": "trinity-test",
+                "messages": messageHistory,
+                "stream": false
+            })
+        });
+
+        if (!response.ok) throw new Error('Server antwortet nicht');
+
+        const data = await response.json();
+        
+        // Animation entfernen
+        const temp = document.getElementById('temp-typing');
+        if (temp) temp.remove();
+
+        // Antwort verarbeiten
+        const aiMessage = data.choices[0].message;
+        messageHistory.push(aiMessage);
+        appendMessage('ai', aiMessage.content);
+        
+        // --- 3. STATUS-UPDATE FÜR DEN NUTZER ---
+        const newTotalVolume = getHistoryVolume();
+        const fillPercentage = Math.round((newTotalVolume / MAX_CHAR_LIMIT) * 100);
+        console.log(`Kontext-Auslastung: ${fillPercentage}%`);
+
+        if (newTotalVolume > MAX_CHAR_LIMIT * 0.9) {
+             appendMessage('system', `Achtung: Der Speicher ist zu ${fillPercentage}% voll.`);
+        }
+
+    } catch (err) {
+        const temp = document.getElementById('temp-typing');
+        if (temp) temp.remove();
+        appendMessage('ai', 'Fehler: ' + err.message);
+        console.error(err);
+    } finally {
+        // UI nur freigeben, wenn noch Platz ist
+        if (getHistoryVolume() < MAX_CHAR_LIMIT) {
+            userInput.disabled = false;
+            sendBtn.disabled = false;
+            sendBtn.innerText = originalBtnText;
+            userInput.focus();
+        } else {
+            userInput.placeholder = "Kontext voll.";
+        }
+    }
+}
+
+// Erweitere deine appendMessage Funktion um den 'system' Typ
+function appendMessage(role, text) {
+    const chatMessages = document.getElementById('chat-messages');
+    const msgDiv = document.createElement('div');
+    
+    // role kann 'user', 'ai' oder 'system' sein
+    msgDiv.className = `message ${role}-message`;
+    msgDiv.innerText = text;
+    
+    chatMessages.appendChild(msgDiv);
+
+    safeScrollToBottom();
+}
+
+// ======================================================
+
+// Navigations-Logik für Chat
+function setView(viewMode) {
+    const main = document.getElementById('chatMain'); // Sicherstellen, dass <main id="chatMain"> existiert!
+    const nav = document.getElementById('navLinks'); // Konsistent mit common.js
+    
+    if (!main) return;
+
+    main.classList.remove('view-chat-only', 'view-article-only', 'view-split');
+    main.classList.add('view-' + viewMode);
+    
+    if (nav) nav.classList.remove('mobile-open');
+}
+
+// Auch die toggle-Funktion für den Chat-Hamburger:
+function toggleViewMenu() {
+    const nav = document.getElementById('navLinks');
+    if (nav) nav.classList.toggle('mobile-open');
+}
+
+
+// Initialisierung
+document.addEventListener('DOMContentLoaded', () => {
+    // Erzwingt Split-View beim Start
+    //setView('split');
+    // ... dein bestehender Code ...
+    const savedTheme = localStorage.getItem('theme') || 'auto';
+    applyTheme(savedTheme);
+
+    const navLinksContainer = document.getElementById('navLinks');
+    const hamburger = document.querySelector('.hamburger');
+
+    if (navLinksContainer && hamburger) {
+        const navLinks = navLinksContainer.querySelectorAll('a');
+
+        navLinks.forEach(link => {
+            link.addEventListener('click', () => {
+                if (navLinksContainer.classList.contains('mobile-open')) {
+                    navLinksContainer.classList.remove('mobile-open');
+                    hamburger.classList.remove('active');
+                }
+            });
+        });
+    }
+
+    const resizer = document.getElementById('dragMe');
+    const leftSide = document.getElementById('resizableArticle');
+    //const leftSide = document.querySelector('.chat-article');
+    const container = document.getElementById('chatMain');
+
+    if (resizer && leftSide && container) {
+        resizer.addEventListener('pointerdown', function(e) {
+            document.body.classList.add('resizing');
+            e.preventDefault();
+
+            const startX = e.clientX;
+            const startWidth = leftSide.getBoundingClientRect().width;
+            const containerWidth = container.getBoundingClientRect().width;
+
+            //document.body.style.cursor = 'col-resize';
+            //leftSide.style.userSelect = 'none';
+            document.body.classList.add('resizing');
+
+            function onPointerMove(e) {
+                const deltaX = e.clientX - startX;
+                let newWidthPercent = ((startWidth + deltaX) / containerWidth) * 100;
+
+                newWidthPercent = Math.max(15, Math.min(75, newWidthPercent));
+
+                leftSide.style.flexBasis = newWidthPercent + '%';
+            }
+
+            function onPointerUp() {
+                document.removeEventListener('pointermove', onPointerMove);
+                document.removeEventListener('pointerup', onPointerUp);
+                //document.body.style.removeProperty('cursor');
+                document.body.classList.remove('resizing');
+                leftSide.style.removeProperty('user-select');
+            }
+
+            document.addEventListener('pointermove', onPointerMove);
+            document.addEventListener('pointerup', onPointerUp);
+        });
+    }
+
+    const systemInput = document.getElementById('system-prompt-input');
+
+    if (systemInput) {
+        // Funktion zur Höhenanpassung
+        const autoGrow = (el) => {
+            el.style.height = "auto";
+            el.style.height = el.scrollHeight + "px";
+        };
+
+        // Beim Tippen mitwachsen
+        systemInput.addEventListener('input', () => autoGrow(systemInput));
+        
+        // Initial beim Laden anpassen (falls schon Text drin steht)
+        autoGrow(systemInput);
+    }
+});
+
+
+let isEditingSystemPrompt = false;
+const systemInput = document.getElementById('system-prompt-input');
+const systemContainer = document.getElementById('system-prompt-container');
+
+
+
+if (systemInput) {
+    systemInput.addEventListener('focus', () => {
+        if (window.innerWidth < 600) {
+            isEditingSystemPrompt = true;
+            systemContainer.classList.add('mobile-edit-mode');
+            document.body.style.overflow = 'hidden'; 
+        }
+    });
+
+    const exitEditMode = () => {
+        isEditingSystemPrompt = false;
+        systemContainer.classList.remove('mobile-edit-mode');
+        document.body.style.overflow = '';
+        
+        // Einmaliges Auto-Grow nach dem Schließen
+        systemInput.style.height = "auto";
+        systemInput.style.height = systemInput.scrollHeight + "px";
+    };
+
+    systemInput.addEventListener('blur', () => {
+        // Delay, um dem Klick auf den Button Vorrang zu geben
+        setTimeout(exitEditMode, 200);
+    });
+}
+
+// Die Export-Funktion
+document.getElementById('export-btn')?.addEventListener('click', () => {
+    if (messageHistory.length === 0) return;
+
+    // Wir erstellen ein Export-Objekt mit Metadaten
+    const exportData = {
+        timestamp: new Date().toISOString(),
+        model: "trinity-test",
+        history: messageHistory, // Das ist dein Array mit {role, content}
+        stats: {
+            messageCount: messageHistory.length,
+            totalChars: getHistoryVolume()
+        }
+    };
+
+    // Umwandlung in einen JSON-String (mit 2 Leerzeichen Einrückung für Lesbarkeit)
+    const jsonString = JSON.stringify(exportData, null, 2);
+    
+    // Download-Logik
+    const blob = new Blob([jsonString], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    
+    const a = document.createElement('a');
+    a.href = url;
+    // Dateiname mit Datum und Uhrzeit
+    const dateStr = new Date().toISOString().slice(0,19).replace(/:/g, '-');
+    a.download = `chat-export-${dateStr}.json`;
+    
+    document.body.appendChild(a);
+    a.click();
+    
+    // Aufräumen
+    setTimeout(() => {
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+    }, 0);
+});
--- a/static/common.css
+++ b/static/common.css
@@ -0,0 +1,400 @@
+/* ==========================================
+   0. THEME VARIABLEN (Vollständig Dynamisch)
+   ========================================== */
+:root {
+    /* --- Hell-Modus --- */
+    --bg-body: #ffffff;
+    --bg-section-alt: #ddddec;
+    --text-main: #333333;
+    --text-muted: #666666;
+    --header-bg: rgba(255, 255, 255, 0.95);
+    
+    /* Cards */
+    --card-bg: #ffffff;
+    --card-shadow: rgba(0, 0, 0, 0.08);
+    --border-color: #eeeeee;
+
+    /* Hero & Akzente */
+    --accent: #6072c5;
+    --accent-text: #ffffff;
+    --accent-dark: #764ba2;
+    --hero-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    --hero-text: #ffffff;
+    --hero-h1-gradient: linear-gradient(45deg, #ffffff, #d1d8ff);
+
+    /* Footer */
+    --footer-bg: #1a1a1a;
+    --footer-text: #bbbbbb;
+    --footer-link-hover: #ffffff;
+}
+
+[data-theme="dark"] {
+    /* --- Dunkel-Modus --- */
+    --bg-body: #0f111a;
+    --bg-section-alt: #161925;
+    --text-main: #e0e6ed;
+    --text-muted: #94a3b8;
+    --header-bg: rgba(15, 17, 26, 0.96);
+    
+    /* Cards */
+    --card-bg: #1c2132;
+    --card-shadow: rgba(0, 0, 0, 0.3);
+    --border-color: #2d334a;
+
+    /* Hero & Akzente (Im Darkmode etwas entspannter) */
+    --accent: #6e6abc;
+    --accent-text: #ffffff;
+    --accent-dark: #3d4593;
+    --hero-gradient: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
+    --hero-text: #e2e8f0;
+    --hero-h1-gradient: linear-gradient(45deg, #818cf8, #c084fc);
+
+    /* Footer */
+    --footer-bg: #070910;
+    --footer-text: #64748b;
+    --footer-link-hover: #818cf8;
+}
+
+/* ==========================================
+   1. RESET & BASIS STILE
+   ========================================== */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    line-height: 1.6;
+    color: var(--text-main);
+    background-color: var(--bg-body);
+    overflow-x: hidden;
+    transition: all 0.3s ease;
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 20px;
+}
+
+/* ==========================================
+   2. HEADER & NAVIGATION
+   ========================================== */
+header {
+    background-color: var(--header-bg);
+    backdrop-filter: blur(10px);
+    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
+    position: fixed;
+    width: 100%;
+    top: 0;
+    z-index: 1000;
+}
+
+nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem 0;
+}
+
+.nav-right {
+    display: flex;
+    align-items: center;
+    gap: 1.5rem;
+}
+
+
+
+.logo {
+    font-size: 1.5rem;
+    font-weight: bold;
+    color: var(--accent);
+    text-decoration: none;
+}
+
+.nav-links {
+    display: flex;
+    gap: 2rem;
+    list-style: none;
+}
+
+.nav-links a {
+    color: var(--text-main);
+    text-decoration: none;
+    font-weight: 500;
+}
+
+.nav-links a:hover {
+    color: var(--accent);
+}
+
+
+/* Container für die Header-Buttons */
+.theme-header-btn {
+    position: relative;
+}
+
+/* Gemeinsames Styling für die Haupt-Buttons im Header */
+.lang-btn, .theme-btn {
+    background: none;
+    border: 1px solid var(--border-color);
+    border-radius: 20px; /* Einheitliche Rundung */
+    padding: 8px 12px;
+    cursor: pointer;
+    font-size: 1.1rem;
+    color: var(--text-main);
+    transition: all 0.2s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 5px;
+}
+
+.theme-btn {
+    border-radius: 50%; /* Runde Form für Theme-Btn */
+    width: 40px;
+    height: 40px;
+}
+
+.lang-btn:hover, .theme-btn:hover {
+    border-color: var(--accent);
+    background: rgba(102, 126, 234, 0.1);
+}
+
+/* Gemeinsames Styling für die Dropdowns */
+.lang-dropdown, .theme-dropdown {
+    position: absolute;
+    top: calc(100% + 10px); /* Leicht abgesetzt */
+    right: 0;
+    background-color: var(--card-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    box-shadow: 0 5px 15px var(--card-shadow);
+    display: none;
+    flex-direction: column;
+    min-width: 140px;
+    z-index: 2000 !important;
+    overflow: hidden;
+}
+
+.lang-dropdown.show, .theme-dropdown.show {
+    display: flex;
+}
+
+/* Einheitliche Optionen im Dropdown */
+.lang-dropdown a.theme-option,
+.theme-dropdown .theme-option {
+    background: transparent;
+    border: none;
+    width: 100%;
+    padding: 10px 15px;
+    text-align: left;
+    cursor: pointer;
+    color: var(--text-main);
+    font-size: 0.9rem;
+    text-decoration: none;
+    transition: background 0.2s;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.lang-dropdown a.theme-option:hover,
+.theme-dropdown .theme-option:hover {
+    background-color: var(--accent);
+    color: var(--accent-text);
+}
+
+
+/* ==========================================
+   3. HERO SECTION
+   ========================================== */
+.hero {
+    min-height: 100vh;
+    /*height: calc(100vh - 45px);
+    margin-top: 45px;*/
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    background: var(--hero-gradient);
+    color: var(--hero-text);
+    padding: 80px 20px;
+    transition: background 0.5s ease;
+}
+
+.hero h1 {
+    font-size: 3.5rem;
+    margin-bottom: 1rem;
+    background: var(--hero-h1-gradient);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    line-height: 1.2;
+}
+
+.hero p {
+    font-size: 1.5rem;
+    margin-bottom: 1.5rem;
+    opacity: 0.9;
+}
+
+
+/* ==========================================
+   4. BUTTONS & INPUTS (Neu gestylt)
+   ========================================== */
+
+/* Basis Styling für alle Buttons (CTA, Demo, Send) */
+.cta-button, 
+.send-btn, 
+.demo-button, 
+.demo-buttons button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.8rem 1.8rem;
+    border-radius: 50px;
+    text-decoration: none;
+    font-weight: 600;
+    font-size: 0.95rem;
+    transition: all 0.2s ease;
+    cursor: pointer;
+    border: none;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+}
+
+/* Haupt-Buttons (Akzentfarbe) */
+.cta-button, 
+.send-btn, 
+.demo-buttons button {
+    background-color: var(--accent);
+    color: var(--accent-text);
+}
+
+.cta-button:hover, 
+.send-btn:hover, 
+.demo-buttons button:hover {
+    background-color: var(--accent-dark);
+    transform: translateY(-2px);
+    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
+}
+
+/* Sekundär-Buttons (Grau/Alt) */
+.demo-button {
+    background-color: var(--bg-section-alt);
+    color: var(--text-main);
+    border: 1px solid var(--border-color);
+}
+
+.demo-button:hover {
+    background-color: var(--border-color);
+    transform: translateY(-2px);
+}
+
+.demo-buttons {
+    display: flex;
+    gap: 1rem;
+    justify-content: center;
+    padding: 1rem;
+    flex-wrap: wrap;
+    margin-top: 2rem;
+}
+
+
+
+/* ==========================================
+   5. SECTIONS & CARDS
+   ========================================== */
+section {
+    /*padding: 80px 0;*/
+    background-color: var(--bg-body);
+}
+
+.section-dark .chat-input-area{
+    background-color: var(--bg-section-alt);
+}
+
+h2 {
+    text-align: center;
+    font-size: 2.5rem;
+    padding: 2.5rem 0;
+    margin-bottom: -2rem;
+    color: var(--text-main);
+}
+
+.text {
+    /*max-width: 1200px;*/
+    margin: 0 auto;
+    text-align: center;
+    font-size: 1.1rem;
+    line-height: 1.8;
+    color: var(--text-muted);
+}
+
+
+
+
+/* ==========================================
+   6. FOOTER
+   ========================================== */
+footer {
+    background-color: var(--footer-bg);
+    color: var(--footer-text);
+    text-align: center;
+    padding: 60px 0;
+    transition: background 0.3s ease;
+}
+
+.footer-links a {
+    color: var(--footer-text);
+    text-decoration: none;
+    margin: 0 1rem;
+}
+
+.footer-links a:hover {
+    color: var(--footer-link-hover);
+}
+
+
+
+/* ==========================================
+   7. RESPONSIVENESS
+   ========================================== */
+/* --- Standard: Logo kurz ausblenden, lang anzeigen --- */
+
+/* Standard für Desktop: Beide sichtbar */
+
+.hamburger {
+    display: none;
+    flex-direction: column;
+    gap: 5px;
+    cursor: pointer;
+}
+.hamburger span {
+    display: block;
+    width: 25px;
+    height: 3px;
+    background-color: var(--accent);
+    border-radius: 3px;
+}
+
+
+.logo-short { display: none;}
+.logo-full { display: inline;}
+
+@media (max-width: 950px) {
+    .logo-full  {display: none;}
+    .logo-short {display: inline;}
+    .hero h1 { font-size: 2.2rem; }
+
+
+
+}
+
+
--- a/static/common.js
+++ b/static/common.js
@@ -0,0 +1,106 @@
+/* ==========================================
+   NAVIGATION & MOBILE MENU
+   ========================================== */
+function toggleHamburger() {
+    const navLinks = document.getElementById('navLinks');
+    const hamburger = document.querySelector('.hamburger');
+    navLinks.classList.toggle('mobile-open');
+    hamburger.classList.toggle('active');
+}
+
+
+/* ==========================================
+   DROPDOWN LOGIC (Vereinheitlicht)
+   ========================================== */
+const langBtn = document.getElementById('langBtn');
+const langDropdown = document.getElementById('langDropdown');
+const themeBtn = document.getElementById('themeBtn');
+const themeDropdown = document.getElementById('themeDropdown');
+
+// Funktion zum Schließen aller Dropdowns
+function closeAllDropdowns() {
+    if (langDropdown) langDropdown.classList.remove('show');
+    if (themeDropdown) themeDropdown.classList.remove('show');
+}
+
+// Event Listener für Sprach-Dropdown
+if (langBtn) {
+    langBtn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        closeAllDropdowns();
+        langDropdown.classList.toggle('show');
+    });
+}
+
+// Event Listener für Theme-Dropdown
+if (themeBtn) {
+    themeBtn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        closeAllDropdowns();
+        themeDropdown.classList.toggle('show');
+    });
+}
+
+// Klick außerhalb schließt alle
+window.addEventListener('click', () => {
+    closeAllDropdowns();
+});
+
+/* ==========================================
+   LANGUAGE SWITCHER LOGIC
+   ========================================== */
+if (langDropdown) {
+    langDropdown.querySelectorAll('.theme-option').forEach(link => {
+        link.addEventListener('click', (e) => {
+            e.preventDefault();
+            const selectedLang = link.getAttribute('data-lang');
+            const currentPath = window.location.pathname;
+
+            // URL Logik: Pfad ersetzen
+            let newPath = currentPath.replace(/^\/(de|en|fr|es|ru)(\/|$)/, '/' + selectedLang + '/');
+            if (currentPath === '/' || !newPath.startsWith('/' + selectedLang)) {
+                newPath = '/' + selectedLang + '/';
+            }
+            newPath = newPath.replace(/\/+/g, '/');
+            window.location.href = newPath;
+        });
+    });
+}
+
+/* ==========================================
+   THEME SWITCHER LOGIC
+   ========================================== */
+const themeOptions = document.querySelectorAll('#themeDropdown .theme-option');
+const htmlEl = document.documentElement;
+
+themeOptions.forEach(btn => {
+    btn.addEventListener('click', () => {
+        const action = btn.getAttribute('data-theme');
+        let theme;
+        if (action === 'setdark') theme = 'dark';
+        else if (action === 'setlight') theme = 'light';
+        else theme = 'auto';
+
+        applyTheme(theme);
+    });
+});
+
+function applyTheme(theme) {
+    if (theme === 'auto') {
+        localStorage.removeItem('theme');
+        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        htmlEl.setAttribute('data-theme', prefersDark ? 'dark' : 'light');
+        themeBtn.innerHTML = '🌓';
+    } else {
+        htmlEl.setAttribute('data-theme', theme);
+        localStorage.setItem('theme', theme);
+        themeBtn.innerHTML = theme === 'dark' ? '🌙' : '☀️';
+    }
+}
+
+
+
+
+
+
+
--- a/static/index.css
+++ b/static/index.css
@@ -0,0 +1,179 @@
+
+
+
+
+
+/* Hier ist die wichtige Änderung für das Nebeneinanderstehen */
+.projects, .tech-features {
+    display: grid;
+    /* Erzeugt so viele Spalten wie nebeneinander passen (mind. 300px breit) */
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 2rem;
+    margin-top: 3rem;
+}
+
+.project-card, .tech-card {
+    background-color: var(--card-bg);
+    border-radius: 15px;
+    padding: 2.5rem;
+    box-shadow: 0 10px 30px var(--card-shadow);
+    border: 1px solid var(--border-color);
+    text-align: center;
+    transition: transform 0.3s ease, background-color 0.3s;
+    
+    /* Flexbox Korrektur */
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start; /* Schiebt alles nach oben */
+    height: 100%; /* Sorgt dafür, dass alle Karten in einer Reihe gleich hoch sind */
+}
+
+.project-card h3, .tech-card h3 {
+    color: var(--accent);
+    margin-bottom: 1.2rem; /* Abstand zwischen Überschrift und Text */
+    font-size: 1.5rem;
+}
+
+.project-card p, .tech-card p {
+    color: var(--text-muted);
+    line-height: 1.6;
+    margin-bottom: 0; /* Verhindert unnötigen Platz nach unten */
+}
+
+.project-card:hover, .tech-card:hover {
+    transform: translateY(-5px);
+}
+
+
+/* Container-Grundlayout */
+.article-content {
+    max-width: 900px; /* Optimale Lesebreite */
+    margin: 2rem auto;
+    padding: 2rem;
+    line-height: 1.6;
+    color: var(--text-main);
+    background-color: var(--bg-card); /* Oder var(--bg-body) */
+    border-radius: 12px;
+    text-align: justify; /* Blocksatz wie gewünscht */
+    hyphens: auto;
+}
+
+/* Header-Hierarchie */
+.article-content h1, .article-content h2, .article-content h3, .article-content h4 {
+    color: var(--accent);
+    margin-top: 2.5rem;
+    margin-bottom: 1.2rem;
+    line-height: 1.2;
+    text-align: left; /* Header bleiben linksbündig */
+}
+
+.article-content h1 { font-size: 2.5rem; border-bottom: 2px solid var(--border-color); padding-bottom: 0.5rem; }
+.article-content h2 { font-size: 1.8rem; border-bottom: 1px solid var(--border-color); padding-bottom: 0.3rem; }
+.article-content h3 { font-size: 1.4rem; }
+
+/* Absätze und Abstände */
+.article-content p {
+    margin-bottom: 1.5rem;
+}
+
+/* Listen-Styling */
+.article-content ul, .article-content ol {
+    margin-bottom: 1.5rem;
+    padding-left: 1.5rem;
+}
+
+.article-content li {
+    margin-bottom: 0.6rem;
+}
+
+/* Links */
+.article-content a {
+    color: var(--accent);
+    text-decoration: none;
+    border-bottom: 1px solid transparent;
+    transition: border-color 0.2s ease;
+}
+
+.article-content a:hover {
+    border-bottom-color: var(--accent);
+}
+
+/* Tabellen-Styling (Responsiv & Modern) */
+.article-content table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 2rem 0;
+    font-size: 0.95rem;
+    background-color: var(--bg-section-alt);
+    border-radius: 8px;
+    overflow: hidden; /* Für abgerundete Ecken */
+}
+
+.article-content th, .article-contenttd {
+    padding: 12px 15px;
+    text-align: left;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.article-content th {
+    background-color: var(--accent);
+    color: #ffffff;
+    font-weight: bold;
+}
+
+.article-content tr:last-child td {
+    border-bottom: none;
+}
+
+.article-content tr:hover {
+    background-color: rgba(var(--accent-rgb), 0.05); /* Dezenter Hover-Effekt */
+}
+
+/* Medien: Bilder & Videos */
+.article-content img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 8px;
+    margin: 2rem 0;
+    display: block;
+    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+}
+
+/* Zitate (Blockquotes) */
+.article-content blockquote {
+    margin: 2rem 0;
+    padding: 1rem 1.5rem;
+    border-left: 4px solid var(--accent);
+    background-color: var(--bg-section-alt);
+    font-style: italic;
+    color: var(--text-muted);
+}
+
+
+@media (max-width: 950px) {
+    .hamburger { 
+        display: flex !important; /* Hamburger nur auf Chat-Mobile zeigen */
+    }
+    .nav-links {
+        position: absolute;
+        top: 100%; left: 0; width: 100%;
+        background-color: var(--header-bg);
+        flex-direction: column;
+        max-height: 0;
+        overflow: hidden;
+        transition: max-height 0.4s ease;
+    }
+    .nav-links li { border-bottom: 1px solid var(--border-color); }
+    
+    .nav-links.mobile-open {
+        display: flex !important;
+        position: absolute;
+        max-height: 300px;
+        top: 100%;
+        right: 0;
+        background: var(--header-bg);
+        width: 200px;
+        flex-direction: column;
+        box-shadow: 0 5px 15px var(--card-shadow);
+    }
+}
--- a/static/index.js
+++ b/static/index.js
@@ -0,0 +1,72 @@
+/*
+async function startDemoChat() {
+    try {
+        const response = await fetch('/api/v1/chats/new', {
+            method: 'POST',
+            headers: { 
+                'Content-Type': 'application/json'
+                // WICHTIG: Wenn dein Nginx den Token nicht setzt, 
+                // muss er hier hin: 'Authorization': 'Bearer DEIN_TOKEN'
+            },
+            body: JSON.stringify({
+                "title": "Demo Chat",
+                "chat": { 
+                    //"title": "Neuer Chat",
+                    //"models": ["trinity-test"], // WICHTIG: Es ist ein Array!
+                    //"history": { "messages": {}, "children": {} }
+                    "model": 
+                    //"arcee-ai/trinity-large-preview:free"
+                    "trinity-test"
+                    }
+            })
+        });
+
+        if (!response.ok) {
+            const errorData = await response.json();
+            console.error('API Fehlerdetails:', errorData);
+            throw new Error(`Fehler: ${response.status}`);
+        }
+
+        const data = await response.json();
+        const sessionId = data.id;
+
+        // --- DER KORREKTE DYNAMISCHE PFAD ---
+        
+        // 1. Hole den aktuellen Sprachpfad (z.B. "/de/", "/en/")
+        // split('/') macht aus "/de/about/" -> ["", "de", "about", ""]
+        const pathSegments = window.location.pathname.split('/');
+        const lang = pathSegments[1] || 'de'; // Fallback auf "de", falls kein Pfad da ist
+
+        // 2. Leite auf den Pfad MIT Sprache und Session-ID um
+        // Das ergibt dann z.B. /de/chat/?session=...
+        window.location.href = `/${lang}/chat/?session=${sessionId}`;
+        //window.location.href = `/de/chat/?session=${sessionId}`;
+
+    } catch (error) {
+        console.error('Fehler beim Starten:', error);
+        alert('Demo-Chat konnte nicht gestartet werden.');
+    }
+}
+*/
+
+// Initialisierung
+document.addEventListener('DOMContentLoaded', () => {
+    // ... dein bestehender Code ...
+    const savedTheme = localStorage.getItem('theme') || 'auto';
+    applyTheme(savedTheme);
+
+    // Hamburger Menü schließen bei Klick auf einen Link
+    const navLinksContainer = document.getElementById('navLinks');
+    const navLinks = navLinksContainer.querySelectorAll('a');
+    const hamburger = document.querySelector('.hamburger');
+
+    navLinks.forEach(link => {
+        link.addEventListener('click', () => {
+            // Prüfen, ob das Menü gerade offen ist
+            if (navLinksContainer.classList.contains('mobile-open')) {
+                navLinksContainer.classList.remove('mobile-open');
+                hamburger.classList.remove('active');
+            }
+        });
+    });
+});
Author	SHA1	Message	Date
Andreas Pieper	b6fcb8fd28	update content	2026-03-05 16:13:25 +00:00
Andreas Pieper	446606457c	fix some chat sizing and placing	2026-03-04 21:14:54 +00:00
Andreas Pieper	0923de4259	final edit sys-promt and markdown image	2026-03-04 19:29:58 +00:00
Andreas Pieper	fe3a25fa3a	chat implementiert	2026-03-01 20:21:35 +00:00
Andreas Pieper	277bdc78d1	finsh landingpage style	2026-03-01 09:50:01 +00:00
Andreas Pieper	1ab276fdfd	multi lang mit hugo	2026-02-28 21:44:43 +00:00
Andreas Pieper	eb9b30bfb5	multithame	2026-02-28 19:10:44 +00:00
Andreas Pieper	295605829c	some style changes	2026-02-28 17:20:21 +00:00
Andreas Pieper	c2f8d537dc	style	2026-02-28 16:46:38 +00:00
Ground Zero Lab	49a4cd77d1	Add separator line between content and footer, improve spacing	2026-02-28 14:44:51 +00:00
Andreas Pieper	ff4f59157e	fix haburger menu	2026-02-28 14:33:54 +00:00
Ground Zero Lab	0cd13e91d8	Add responsive hamburger menu for mobile	2026-02-28 14:20:51 +00:00