new website landingpage

public/assets/retriex/fonts.css

@@ -0,0 +1,37 @@
+/* latin */
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url('fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2') format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* latin */
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url('fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2') format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin */
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+    src: url('fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2') format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin */
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 800;
+    font-display: swap;
+    src: url('fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2') format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

public/retriex.html

@@ -4,16 +4,15 @@
     <meta charset="UTF-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <title>RetrieX – Aus Unternehmenswissen werden verlässliche Antworten</title>
-    <meta name="description" content="RetrieX macht Dokumente, Regeln und Produktwissen in einer steuerbaren KI-Oberfläche nutzbar – für schnellere Entscheidungen, bessere Beratung und produktive Wissensarbeit." />
+    <meta name="description"
+          content="RetrieX macht Dokumente, Regeln und Produktwissen in einer steuerbaren KI-Oberfläche nutzbar – für schnellere Entscheidungen, bessere Beratung und produktive Wissensarbeit."/>
 
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link href="/assets/retriex/bootstrap.css" rel="stylesheet">
-    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link href="/assets/retriex/fonts.css" rel="stylesheet">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
 
     <style>
         :root {
-            --rx-primary: #0d6efd;
+            --rx-primary: #2196F3;
             --rx-dark: #0f172a;
             --rx-text: #334155;
             --rx-muted: #64748b;
@@ -28,8 +27,7 @@
 
         body {
             font-family: 'Inter', sans-serif;
-            background:
+            background: radial-gradient(circle at top left, rgba(13, 110, 253, 0.12), transparent 32%),
-                    radial-gradient(circle at top left, rgba(13, 110, 253, 0.12), transparent 32%),
             radial-gradient(circle at top right, rgba(99, 102, 241, 0.12), transparent 28%),
             linear-gradient(180deg, #f8fbff 0%, #f8fafc 100%);
             color: var(--rx-text);
@@ -39,6 +37,12 @@
             font-size: 4.5rem !important;
         }
 
+        .btn-primary {
+            --bs-btn-color: #fff;
+            --bs-btn-bg: #2196F3;
+            --bs-btn-border-color: #2196F3;
+        }
+
         .navbar {
             backdrop-filter: blur(10px);
             background: rgba(248, 250, 252, 0.75);
@@ -273,6 +277,14 @@
             font-size: 0.95rem;
         }
 
+        .gr-ci-blue {
+            background: linear-gradient(to right, #0f172a, #0f172a, #2196F3);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            color: transparent;
+        }
+
         @media (max-width: 991.98px) {
             .hero {
                 padding-top: 7rem;
@@ -282,13 +294,17 @@
                 margin-top: 2rem;
             }
         }
+
+
     </style>
 </head>
 <body>
 <nav class="navbar navbar-expand-lg fixed-top">
     <div class="container">
-        <a class="navbar-brand" href="#top"><img src="assets/img/logo-website.png" style="max-width: 250px; padding:10px"></a>
+        <a class="navbar-brand" href="#top"><img src="assets/img/logo-website-blue.png"
-        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Navigation umschalten">
+                                                 style="max-width: 250px; padding:10px"></a>
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav"
+                aria-controls="mainNav" aria-expanded="false" aria-label="Navigation umschalten">
             <span class="navbar-toggler-icon"></span>
         </button>
         <div class="collapse navbar-collapse" id="mainNav">
@@ -297,7 +313,10 @@
                 <li class="nav-item"><a class="nav-link" href="#solution">Lösung</a></li>
                 <li class="nav-item"><a class="nav-link" href="#benefits">Nutzen</a></li>
                 <li class="nav-item"><a class="nav-link" href="#usecases">Einsatzfelder</a></li>
-                <li class="nav-item"><a class="nav-link" href="https://www.mitho-media.de/impressum/" target="_blank">Impressum</a></li>
+                <li class="nav-item"><a class="nav-link" href="#core">Arbeitsweise</a></li>
+                <li class="nav-item"><a class="nav-link" href="#compliance">DSGVO</a></li>
+                <li class="nav-item"><a class="nav-link" href="https://www.mitho-media.de/impressum/" target="_blank">Impressum</a>
+                </li>
                 <li class="nav-item ms-lg-2"><a class="btn btn-primary" href="#cta">Demo anfragen</a></li>
             </ul>
         </div>
@@ -305,14 +324,16 @@
 </nav>
 
 <main id="top">
+
     <section class="hero">
         <div class="container">
             <div class="row align-items-center g-5">
                 <div class="col-lg-7">
                     <div class="hero-badge mb-4">Steuerbare KI für produktive Wissensarbeit</div>
-                    <h1 class="mb-4">Aus Unternehmenswissen werden verlässliche Antworten.</h1>
+                    <h1 class="mb-4 gr-ci-blue">Aus Unternehmenswissen werden verlässliche KI-Antworten.</h1>
                     <p class="lead mb-4">
-                        RetrieX macht Dokumente, Regeln und Produktwissen in einer steuerbaren KI-Oberfläche nutzbar –
+                        Das RetrieX RAG-System macht Dokumente, Regeln und Produktwissen in einer steuerbaren
+                        KI-Oberfläche nutzbar –
                         für schnellere Entscheidungen, bessere Beratung und produktive Wissensarbeit.
                     </p>
                     <div class="d-flex flex-wrap gap-3">
@@ -322,9 +343,15 @@
 
                     <div class="glass-card trust-bar mt-4">
                         <div class="row text-center g-3">
-                            <div class="col-md-4"><div class="trust-item">Wissensbasiert</div></div>
+                            <div class="col-md-4">
-                            <div class="col-md-4"><div class="trust-item">Steuerbar</div></div>
+                                <div class="trust-item">Wissensbasiert</div>
-                            <div class="col-md-4"><div class="trust-item">Produktiv einsetzbar</div></div>
+                            </div>
+                            <div class="col-md-4">
+                                <div class="trust-item">Steuerbar</div>
+                            </div>
+                            <div class="col-md-4">
+                                <div class="trust-item">Produktiv einsetzbar</div>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -333,9 +360,11 @@
                     <div class="hero-panel">
                         <div class="mb-4">
                             <div class="section-kicker">Plattform-Mehrwert</div>
-                            <h3 class="mb-3" style="font-weight: 800; letter-spacing: -0.04em; color: var(--rx-dark);">Wissen, Steuerung und Nutzbarkeit in einem System</h3>
+                            <h2 class="mb-3" style="font-weight: 800; letter-spacing: -0.04em; color: var(--rx-dark);">
+                                Wissen, Steuerung und Nutzbarkeit in einem KI-RAG-System</h2>
                             <p class="mb-0" style="color: var(--rx-muted); line-height: 1.8;">
-                                Statt isolierter Chat-Experimente entsteht mit RetrieX eine kontrollierbare Wissensschicht,
+                                Statt isolierter Chat-Experimente entsteht mit RetrieX eine kontrollierbare
+                                Wissensschicht,
                                 die Inhalte strukturiert verfügbar macht und Antworten auf belastbare Grundlagen stellt.
                             </p>
                         </div>
@@ -370,28 +399,34 @@
             </div>
         </div>
     </section>
-
+    <section class="text-center section hero" style="background: #f5f8fa;">
+        <h2 class="gr-ci-blue">Unsere KI + Ihre Server = DSGVO-konform*</h2>
+        <div class="text-secondary"><small>* Bei DSGVO-konformem Betrieb durch Sie und Ihren Provider ist auch die Verarbeitung sensibler Daten (Kunden, Bestllungen etc.) möglich. Gerne beraten wir Sie zur passenden Infrastruktur.</small></div>
+        <img src="assets/img/banner-dsgvo.png" style="max-width:70%">
+    </section>
     <section class="section" id="problem">
         <div class="container">
             <div class="row justify-content-center">
                 <div class="col-xl-9 text-center">
                     <div class="section-kicker">Problem</div>
-                    <h2>Wissen ist vorhanden – aber nicht wirksam organisiert.</h2>
+                    <h2 class="gr-ci-blue">Wissen ist vorhanden – aber nicht wirksam organisiert.</h2>
                     <p class="section-text mx-auto">
-                        Richtlinien, PDFs, Produktinformationen und Fachwissen liegen verteilt in Systemen und Dokumenten.
+                        Richtlinien, PDFs, Produktinformationen und Fachwissen liegen verteilt in Systemen und
-                        Teams suchen zu lange, Antworten bleiben uneinheitlich und KI bleibt ohne saubere Wissensbasis unscharf.
+                        Dokumenten.
+                        Teams suchen zu lange, Antworten bleiben uneinheitlich und KI bleibt ohne saubere Wissensbasis
+                        unscharf.
                     </p>
                 </div>
             </div>
         </div>
     </section>
 
-    <section class="section pt-0" id="solution">
+    <section class="section" id="solution">
         <div class="container">
             <div class="row align-items-center g-4">
                 <div class="col-lg-6">
                     <div class="section-kicker">Lösung</div>
-                    <h2>RetrieX macht daraus ein nutzbares System.</h2>
+                    <h2 class="gr-ci-blue">RetrieX macht daraus ein nutzbares KI-System.</h2>
                     <p class="section-text">
                         Statt isolierter Chat-Experimente entsteht eine kontrollierbare Wissensschicht mit Retrieval,
                         Modellsteuerung und administrativer Governance.
@@ -416,7 +451,7 @@
             <div class="row mb-4">
                 <div class="col-lg-8">
                     <div class="section-kicker">Nutzen</div>
-                    <h2>Mehr Wirkung für Management, Fachbereiche und Betrieb.</h2>
+                    <h2 class="gr-ci-blue">Mehr Wirkung für Management, Fachbereiche und Betrieb.</h2>
                 </div>
             </div>
 
@@ -451,16 +486,18 @@
             </div>
         </div>
     </section>
-
     <section class="section" id="usecases">
         <div class="container">
-            <div class="row mb-4">
+            <div class="row justify-content-center">
-                <div class="col-lg-8">
+                <div class="col-xl-9 text-center">
-                    <div class="section-kicker">Einsatzfelder</div>
+                    <div class="section-kicker">Differenzierung / Einsatzfelder</div>
-                    <h2>Wo RetrieX im Alltag Mehrwert stiftet.</h2>
+                    <h2 class="gr-ci-blue">Warum RetrieX nicht nur ein Chat ist</h2>
+                    <p class="section-text mx-auto">
+                        Weil nicht das Modell im Mittelpunkt steht, sondern die Qualität der Wissensbasis,
+                        die Steuerung der Antworten und die betriebliche Nutzbarkeit.
+                    </p>
                 </div>
-            </div>
+                <div class="container">
-
                     <div class="row g-4">
                         <div class="col-md-6 col-xl-4">
                             <div class="use-case-card">
@@ -489,25 +526,207 @@
                         <div class="col-md-6 col-xl-6">
                             <div class="use-case-card">
                                 <div class="use-case-bullet">05</div>
-                        <p>Dokumentengestützte Assistenz</p>
+                                <p>Dokumentengestützte KI-Assistenz</p>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
         </div>
     </section>
 
-    <section class="section" id="difference">
+    <section class="section" id="core">
         <div class="container">
-            <div class="row justify-content-center">
+            <div class="row justify-content-center mb-5">
                 <div class="col-xl-9 text-center">
-                    <div class="section-kicker">Differenzierung</div>
+                    <div class="section-kicker">Systemüberblick</div>
-                    <h2>Warum RetrieX nicht nur ein Chat ist</h2>
+                    <h2 class="gr-ci-blue">Wie RetrieX im Kern arbeitet</h2>
                     <p class="section-text mx-auto">
-                        Weil nicht das Modell im Mittelpunkt steht, sondern die Qualität der Wissensbasis,
+                        RetrieX ist ein dokumentenbasiertes RAG-Assistenzsystem mit Retrieval-Augmented Generation.
-                        die Steuerung der Antworten und die betriebliche Nutzbarkeit.
+                        Antworten entstehen nicht frei, sondern auf Basis aktivierter Wissensdokumente, strukturierter
+                        Suchlogik und – bei Produktanfragen – optionaler Live-Shopdaten.
                     </p>
                 </div>
             </div>
+
+            <div class="row g-4 mb-4">
+                <div class="col-lg-6 col-xl-3">
+                    <div class="feature-card">
+                        <div class="icon-badge">1</div>
+                        <h3>Vorhandenes Wissen endlich nutzbar machen</h3>
+                        <p>
+                            RetrieX nutzt bestehende Unternehmensdokumente wie PDFs, Richtlinien, Produktunterlagen und
+                            interne
+                            Wissensquellen, damit wertvolles Know-how nicht in Dateien und Ordnerstrukturen verborgen
+                            bleibt,
+                            sondern im Arbeitsalltag sofort verfügbar wird.
+                        </p>
+                    </div>
+                </div>
+
+                <div class="col-lg-6 col-xl-3">
+                    <div class="feature-card">
+                        <div class="icon-badge">2</div>
+                        <h3>Klare Prozesse statt KI-Zufall</h3>
+                        <p>
+                            Die Wissensaufbereitung folgt einer klaren, reproduzierbaren Logik. So entsteht keine
+                            Blackbox, sondern
+                            ein belastbares System, das Informationen strukturiert verarbeitet und auf einer
+                            verlässlichen Basis
+                            bereitstellt.
+                        </p>
+                    </div>
+                </div>
+
+                <div class="col-lg-6 col-xl-3">
+                    <div class="feature-card">
+                        <div class="icon-badge">3</div>
+                        <h3>Relevante Antworten statt Datenflut</h3>
+                        <p>
+                            RetrieX wählt gezielt die Inhalte aus, die zur jeweiligen Frage wirklich passen. Das
+                            verkürzt
+                            Suchzeiten, reduziert Unsicherheit und unterstützt Mitarbeitende dabei, schneller zu
+                            belastbaren
+                            Ergebnissen zu kommen.
+                        </p>
+                    </div>
+                </div>
+
+                <div class="col-lg-6 col-xl-3">
+                    <div class="feature-card">
+                        <div class="icon-badge">4</div>
+                        <h3>Steuerbar, nachvollziehbar, produktiv</h3>
+                        <p>
+                            Unternehmen behalten die Kontrolle darüber, welche Wissensgrundlagen, Regeln und Daten in
+                            Antworten
+                            einfließen. So wird KI nicht zum Risiko, sondern zu einem steuerbaren Werkzeug für Beratung,
+                            Wissensarbeit und operative Prozesse.
+                        </p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="row g-4 align-items-stretch">
+                <div class="col-lg-12">
+                    <div class="diff-card h-100">
+
+                        <div class="section-kicker mb-2">Ablauf</div>
+                        <h3 style="font-size: 1.4rem;">Vom Dokument zur gestreamten Antwort</h3>
+                        <p class="mb-4">
+                            Der Systemfluss ist klar strukturiert und reproduzierbar aufgebaut:
+                        </p>
+                        <div class="row mb-4">
+                            <div class="col-lg-8">
+                                <div class="section-kicker">Nutzen</div>
+                                <h2 class="gr-ci-blue">Mehr Wirkung für Management, Fachbereiche und Betrieb.</h2>
+                            </div>
+                        </div>
+
+                        <div class="row g-4">
+                            <div class="col-lg-4">
+                                <div class="feature-card">
+                                    <div class="icon-badge">M</div>
+                                    <h3>Für Management</h3>
+                                    <p>
+                                        Bessere Nutzbarkeit von Unternehmenswissen und klarere Steuerbarkeit von KI.
+                                    </p>
+                                </div>
+                            </div>
+                            <div class="col-lg-4">
+                                <div class="feature-card">
+                                    <div class="icon-badge">F</div>
+                                    <h3>Für Fachbereiche</h3>
+                                    <p>
+                                        Schneller Zugriff auf relevantes Wissen in natürlicher Sprache.
+                                    </p>
+                                </div>
+                            </div>
+                            <div class="col-lg-4">
+                                <div class="feature-card">
+                                    <div class="icon-badge">O</div>
+                                    <h3>Für Betrieb und Organisation</h3>
+                                    <p>
+                                        Versionierbare Inhalte, konfigurierbare Modelle und ein strukturierter
+                                        Admin-Rahmen.
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="section" id="compliance">
+        <div class="container">
+            <div class="row justify-content-center mb-5">
+                <div class="col-xl-9 text-center">
+                    <div class="section-kicker">Datenschutz & Hosting</div>
+                    <h2 class="gr-ci-blue">Für datensensible Unternehmensanwendungen nach DSGVO</h2>
+                    <p class="section-text mx-auto">
+                        RetrieX ist für einen datenschutzorientierten Betrieb ausgelegt: mit eigener KI-Infrastruktur,
+                        kontrollierbarer Systemarchitektur und der Möglichkeit, Daten in einer deutschen Serverumgebung
+                        zu verarbeiten.
+                        So entsteht eine belastbare Grundlage für den Einsatz auch in sensiblen Unternehmenskontexten.
+                    </p>
+                </div>
+            </div>
+
+            <div class="row g-4 mb-4">
+                <div class="col-lg-4">
+                    <div class="feature-card">
+                        <div class="icon-badge">DS</div>
+                        <h3>Eigene KI statt öffentliche Blackbox</h3>
+                        <p>
+                            RetrieX kann mit eigener LLM-Infrastruktur betrieben werden. Dadurch bleiben Datenflüsse,
+                            Modellzugriff und technische Kontrolle in einem klar definierten Unternehmensrahmen.
+                        </p>
+                    </div>
+                </div>
+
+                <div class="col-lg-4">
+                    <div class="feature-card">
+                        <div class="icon-badge">DE</div>
+                        <h3>Serverbetrieb in Deutschland möglich</h3>
+                        <p>
+                            Das System ist so aufsetzbar, dass Verarbeitung und Hosting in einer deutschen
+                            Serverumgebung
+                            erfolgen können. Das schafft zusätzliche Sicherheit für Unternehmen mit hohen
+                            Datenschutzanforderungen.
+                        </p>
+                    </div>
+                </div>
+
+                <div class="col-lg-4">
+                    <div class="feature-card">
+                        <div class="icon-badge">✓</div>
+                        <h3>Geeignet für sensible Datenprozesse</h3>
+                        <p>
+                            Bei passender technischer und organisatorischer Umsetzung kann RetrieX auch in
+                            datensensiblen
+                            Szenarien eingesetzt werden – etwa dort, wo Kundeninformationen, internes Wissen oder
+                            operative
+                            Unternehmensdaten sicher verarbeitet werden müssen.
+                        </p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="row justify-content-center">
+                <div class="12">
+                    <div class="diff-card text-center">
+                        <h3 style="font-size: 1.35rem;">Datenschutz nicht als Zusatz, sondern als Betriebsprinzip</h3>
+                        <p>
+                            Für mittelständische Unternehmen ist entscheidend, dass KI nicht nur leistungsfähig, sondern
+                            auch kontrollierbar einsetzbar ist.
+                            RetrieX unterstützt genau dieses Ziel: mit eigener Modellanbindung, klarer Systemsteuerung
+                            und einer Infrastruktur,
+                            die auf datenschutzorientierten Betrieb ausgelegt ist.
+                        </p>
+                    </div>
+                </div>
+            </div>
         </div>
     </section>
 
@@ -524,7 +743,8 @@
                         </p>
                     </div>
                     <div class="col-lg-4 text-lg-end">
-                        <a href="mailto:anfrage@mitho-media.de?subject=Anfrage RetrieX" class="btn btn-light btn-lg">Demo anfragen</a>
+                        <a href="mailto:anfrage@mitho-media.de?subject=Anfrage RetrieX" class="btn btn-light btn-lg">Demo
+                            anfragen</a>
                     </div>
                 </div>
             </div>
@@ -535,10 +755,12 @@
 <footer>
     <div class="container d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-2">
         <div><strong>RetrieX</strong> – Wissensbasierte, steuerbare KI für mittelständische Unternehmen.</div>
-        <div>© 2026 RetrieX | powered by <a href="https://www.mitho-media.de/ki-loesungen-im-ecommerce/" target="_blank">mitho®</a> | Certified E-Commerce-Experts</div>
+        <div>© 2026 RetrieX | powered by <a href="https://www.mitho-media.de/ki-loesungen-im-ecommerce/"
+                                            target="_blank">mitho®</a> | Certified E-Commerce-Experts
+        </div>
     </div>
 </footer>
 
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+<script src="/assets/retriex/bundle.js"></script>
 </body>
 </html>