Files
MtoRagSystem/public/retriex.html
2026-04-22 17:35:17 +02:00

1156 lines
58 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>RetrieX Aus Unternehmenswissen werden KI-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."/>
<link href="/assets/retriex/bootstrap.css" rel="stylesheet">
<link href="/assets/retriex/fonts.css" rel="stylesheet">
<style>
:root {
--rx-primary: #2196F3;
--rx-dark: #0f172a;
--rx-text: #334155;
--rx-muted: #64748b;
--rx-bg: #f8fafc;
--rx-card: rgba(255, 255, 255, 0.85);
--rx-border: rgba(148, 163, 184, 0.18);
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Inter', sans-serif;
background: 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);
}
h1 {
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);
border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}
.navbar-brand {
font-weight: 800;
letter-spacing: -0.03em;
color: var(--rx-dark);
}
.hero {
padding: 8rem 0 5rem;
position: relative;
overflow: hidden;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.55rem 0.95rem;
border-radius: 999px;
background: rgba(13, 110, 253, 0.08);
color: var(--rx-primary);
font-weight: 600;
font-size: 0.92rem;
border: 1px solid rgba(13, 110, 253, 0.12);
}
.hero h1 {
font-size: clamp(2.5rem, 5vw, 4.9rem);
line-height: 0.97;
font-weight: 800;
letter-spacing: -0.05em;
color: var(--rx-dark);
max-width: 10.5em;
}
.hero p.lead {
font-size: 1.08rem;
line-height: 1.75;
color: var(--rx-muted);
max-width: 760px;
}
.hero-panel,
.glass-card {
background: var(--rx-card);
border: 1px solid var(--rx-border);
backdrop-filter: blur(12px);
box-shadow: 0 20px 70px rgba(15, 23, 42, 0.08);
border-radius: 1.75rem;
}
.hero-panel {
padding: 2rem;
}
.mini-stat {
border-radius: 1.25rem;
background: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(148, 163, 184, 0.14);
padding: 1rem;
height: 100%;
}
.mini-stat .label {
color: var(--rx-muted);
font-size: 0.88rem;
margin-bottom: 0.35rem;
}
.mini-stat .value {
color: var(--rx-dark);
font-size: 1.05rem;
font-weight: 700;
}
.btn-primary {
padding: 0.9rem 1.35rem;
font-weight: 600;
border-radius: 0.9rem;
box-shadow: 0 14px 30px rgba(13, 110, 253, 0.22);
}
.btn-outline-dark {
padding: 0.9rem 1.35rem;
font-weight: 600;
border-radius: 0.9rem;
}
.trust-bar {
padding: 1rem 1.25rem;
margin-top: 1.75rem;
}
.trust-item {
font-weight: 600;
color: var(--rx-dark);
letter-spacing: -0.02em;
}
.section {
padding: 5.5rem 0;
}
.section-kicker {
color: var(--rx-primary);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 0.82rem;
margin-bottom: 0.85rem;
}
.section h2 {
font-size: clamp(2rem, 3vw, 3rem);
line-height: 1.08;
font-weight: 800;
letter-spacing: -0.04em;
color: var(--rx-dark);
margin-bottom: 1rem;
}
.section .section-text {
color: var(--rx-muted);
font-size: 1.08rem;
line-height: 1.8;
max-width: 760px;
}
.feature-card,
.use-case-card,
.diff-card {
height: 100%;
padding: 1.8rem;
border-radius: 1.5rem;
background: rgba(255, 255, 255, 0.88);
border: 1px solid rgba(148, 163, 184, 0.14);
box-shadow: 0 16px 45px rgba(15, 23, 42, 0.06);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.feature-card:hover,
.use-case-card:hover,
.diff-card:hover {
transform: translateY(-4px);
box-shadow: 0 24px 60px rgba(15, 23, 42, 0.10);
}
.icon-badge {
width: 3rem;
height: 3rem;
border-radius: 1rem;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(13, 110, 253, 0.10);
color: var(--rx-primary);
font-size: 1.2rem;
margin-bottom: 1rem;
}
.feature-card h3,
.diff-card h3 {
font-size: 1.2rem;
font-weight: 700;
letter-spacing: -0.03em;
color: var(--rx-dark);
margin-bottom: 0.85rem;
}
.feature-card p,
.use-case-card p,
.diff-card p {
color: var(--rx-muted);
line-height: 1.7;
margin-bottom: 0;
}
.use-case-card {
display: flex;
align-items: center;
gap: 1rem;
min-height: 110px;
}
.use-case-bullet {
flex: 0 0 2.75rem;
width: 2.75rem;
height: 2.75rem;
border-radius: 0.95rem;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(13, 110, 253, 0.14), rgba(99, 102, 241, 0.12));
color: var(--rx-primary);
font-weight: 800;
}
.cta-box {
padding: 3rem;
border-radius: 2rem;
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
color: #fff;
box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22);
}
.cta-box h2 {
color: #fff;
margin-bottom: 1rem;
}
.cta-box p {
color: rgba(255, 255, 255, 0.78);
font-size: 1.06rem;
line-height: 1.8;
margin-bottom: 0;
}
.cta-box .btn-light {
padding: 0.95rem 1.35rem;
border-radius: 0.95rem;
font-weight: 700;
}
footer {
padding: 2.2rem 0 3rem;
color: var(--rx-muted);
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;
}
.hero-panel {
margin-top: 2rem;
}
}
@media (max-width: 480px) {
.section {
padding: 2.5rem 1rem;
margin: auto;
}
.hero {
padding-top: 3rem;
}
h1 {
font-size: 3rem !important;
}
h1, h2, h3 {
hyphens: auto;
overflow-wrap: break-word;
word-break: normal;
}
}
.animate-fade-up {
display: block;
opacity: 0;
transform: translateY(24px);
}
.animate-fade-up.is-visible {
animation: fadeUp 1.3s ease-out forwards;
}
@keyframes fadeUp {
to {
opacity: 1;
transform: translateY(0);
}
}
strong {
font-weight: 800;
}
.light-gradient{
background: 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%);
}
.accordion{
background-color: transparent;
}
.accordion-item {
color: var(--bs-accordion-color);
background-color: transparent;
border: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color);
}
.accordion-button{
background-color: transparent;
}
.accordion-button:not(.collapsed){
color: #000000;
background-color: #fff;
box-shadow: inset 0 calc(-1* var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
font-weight: 800;
}
</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-blue.png"
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">
<ul class="navbar-nav ms-auto align-items-lg-center gap-lg-2">
<li class="nav-item"><a class="nav-link " href="#problem">Problem</a></li>
<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="#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>
</div>
</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">Vertriebsassistent</div>
<div class="hero-badge mb-4">Kundenberater</div>
<div class="hero-badge mb-4">Einkaufsberater</div>
<div class="hero-badge mb-4">Wissenscoach</div>
<h1 class="mb-4 gr-ci-blue">Aus Unternehmenswissen werden KI-Antworten.</h1>
<p class="lead mb-4">
<strong>RetrieX</strong> macht aus Wissen einen operativ nutzbaren Vermögenswert. Statt
Informationen in Dokumenten, Silos und Einzelwissen zu verlieren, schafft das System eine
steuerbare KI-Infrastruktur, die Antworten beschleunigt, Expertise skaliert und digitale Kunden-
wie Serviceprozesse auf ein neues Niveau hebt. </p>
<div class="d-flex flex-wrap gap-3">
<a href="#cta" class="btn btn-primary btn-lg">Demo anfragen</a>
<a href="#problem" class="btn btn-outline-dark btn-lg">Mehr erfahren</a>
</div>
<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="trust-item">Steuerbar</div>
</div>
<div class="col-md-4">
<div class="trust-item">Produktiv einsetzbar</div>
</div>
</div>
</div>
</div>
<div class="col-lg-5">
<div class="hero-panel">
<div class="mb-4">
<div class="section-kicker">Plattform-Mehrwert</div>
<h2 class="mb-3" style="font-weight: 800; letter-spacing: -0.04em; color: var(--rx-dark);">
Wissen, Steuerung und Nutzbarkeit einfach und verständlich anwendbar</h2>
<p class="mb-0" style="color: var(--rx-muted); line-height: 1.8;">
<strong>RetrieX</strong> ist eine wissensbasierte KI-Plattform für Unternehmen, die auf
freigegebene Dokumente und Systeme zugreift, Antworten mit Quellenbezug liefert und
wahlweise in Deutschland oder On-Premise betrieben werden kann.
</p>
</div>
<div class="row g-3">
<div class="col-sm-6">
<div class="mini-stat">
<div class="label">Wissensbasis</div>
<div class="value">Dokumente,<br>Regeln, Produktwissen</div>
</div>
</div>
<div class="col-sm-6">
<div class="mini-stat">
<div class="label">Steuerung</div>
<div class="value">Governance,<br>+ 100 KI-Modelle, Konfigurationen</div>
</div>
</div>
<div class="col-sm-6">
<div class="mini-stat">
<div class="label">Nutzen</div>
<div class="value">Schnellere Entscheidungen und Beratung</div>
</div>
</div>
<div class="col-sm-6">
<div class="mini-stat">
<div class="label">Einsatz</div>
<div class="value">Produktiv im Unternehmenskontext</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="text-center section hero">
<div class="container">
<h2><span class="gr-ci-blue">Ihr Wissen. Ihr Wettbewerbsvorteil.</span></h2>
<div class="section-text mx-auto">Chatten Sie mit Ihren Dokumenten und Wissensdatenbanken. Wenn
Unternehmenswissen strukturiert nutzbar wird, entsteht daraus ein echter Vorteil für Vertrieb, Service
und nachhaltiges Wachstum.
</div>
</div>
<img src="assets/img/banner-rag.webp" style="max-width:70%">
</section>
<section class="section bg-white" 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 class="gr-ci-blue">Wissen ist vorhanden aber es ist nicht wirksam organisiert.</h2>
<p class="section-text mx-auto">
Richtlinien, PDFs, Produktinformationen und Fachwissen liegen oft verteilt in Systemen und
Dokumenten.
Teams suchen zu lange, Antworten bleiben uneinheitlich und KI bleibt ohne saubere Wissensbasis
unscharf.
</p>
<img src="assets/img/files.webp" class="img-fluid"/>
</div>
</div>
</div>
</section>
<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 class="gr-ci-blue"><strong>RetrieX</strong> macht daraus ein nutzbares KI-System.</h2>
<p class="section-text">
So wird aus verstreutem Wissen eine steuerbare Wissenslandschaft, die Informationen gezielt
nutzbar macht und verlässliche, halluzinationsarme Antworten ermöglicht.
</p>
</div>
<div class="col-lg-6">
<div class="diff-card">
<div class="icon-badge">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-chat-right-text" viewBox="0 0 16 16">
<path d="M2 1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h9.586a2 2 0 0 1 1.414.586l2 2V2a1 1 0 0 0-1-1zm12-1a2 2 0 0 1 2 2v12.793a.5.5 0 0 1-.854.353l-2.853-2.853a1 1 0 0 0-.707-.293H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2z"></path>
<path d="M3 3.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5M3 6a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9A.5.5 0 0 1 3 6m0 2.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5"></path>
</svg>
</div>
<h3>Von verstreutem Wissen zu nutzbaren Antworten</h3>
<p>
<strong>RetrieX</strong> verbindet Wissenszugriff, Antwortlogik und Steuerung zu einer
Plattform,
die nicht nur Inhalte findet, sondern sie für echte Arbeitsprozesse verfügbar macht.
</p>
</div>
</div>
</div>
</div>
</section>
<section class="section" id="benefits">
<div class="container">
<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">1.</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">2.</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">3.</div>
<h3>Für Betrieb und Organisation ✓</h3>
<p>
Versionierbare Inhalte, konfigurierbare Modelle und ein strukturierter Admin-Rahmen.
</p>
</div>
</div>
</div>
</div>
</section>
<section class="section" id="usecases" style="background: #dae8ff;">
<div class="container">
<div class="row justify-content-center">
<div class="col-xl-9 text-center">
<div class="section-kicker">Differenzierung / Einsatzfelder</div>
<h2 class="gr-ci-blue">Warum <strong>RetrieX</strong> nicht nur ein Chat ist</h2>
<p class="section-text mx-auto">
Weil nicht das Modell (LLM) im Mittelpunkt steht, sondern die Qualität der Wissensbasis,
die Steuerung der Antworten und die betriebliche Nutzbarkeit.
</p>
</div>
<div class="container">
<div class="row g-4">
<div class="col-md-6 col-xl-4">
<div class="use-case-card">
<div class="use-case-bullet">01</div>
<p>Internes Wissensportal</p>
</div>
</div>
<div class="col-md-6 col-xl-4">
<div class="use-case-card">
<div class="use-case-bullet">02</div>
<p>Kunden- und Serviceberatung</p>
</div>
</div>
<div class="col-md-6 col-xl-4">
<div class="use-case-card">
<div class="use-case-bullet">03</div>
<p>Vertriebsunterstützung</p>
</div>
</div>
<div class="col-md-6 col-xl-6">
<div class="use-case-card">
<div class="use-case-bullet">04</div>
<p>Produktspezifische Beratung</p>
</div>
</div>
<div class="col-md-6 col-xl-6">
<div class="use-case-card">
<div class="use-case-bullet">05</div>
<p>Dokumentengestützte KI-Assistenz</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section" id="core">
<div class="container">
<div class="row justify-content-center mb-5">
<div class="col-xl-9 text-center">
<div class="section-kicker">Systemüberblick</div>
<h2 class="gr-ci-blue">Wie <strong>RetrieX</strong> im Kern arbeitet</h2>
<p class="section-text mx-auto">
<strong>RetrieX</strong> ist ein dokumentenbasiertes RAG-Assistenzsystem mit Retrieval-Augmented
Generation.
Antworten entstehen nicht frei, sondern auf Basis aktivierter Wissensdokumente, strukturierter
Suchlogik und bei Produktanfragen optionaler Live-Shopdaten aus Ihrem Shopsystem oder
anderen Systemen wie ERP und WaWi.
</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">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-x-diamond-fill" viewBox="0 0 16 16">
<path d="M9.05.435c-.58-.58-1.52-.58-2.1 0L4.047 3.339 8 7.293l3.954-3.954L9.049.435zm3.61 3.611L8.708 8l3.954 3.954 2.904-2.905c.58-.58.58-1.519 0-2.098l-2.904-2.905zm-.706 8.614L8 8.708l-3.954 3.954 2.905 2.904c.58.58 1.519.58 2.098 0l2.905-2.904zm-8.614-.706L7.292 8 3.339 4.046.435 6.951c-.58.58-.58 1.519 0 2.098z"/>
</svg>
</div>
<h3>Vorhandenes Wissen endlich nutzbar machen</h3>
<p>
<strong>RetrieX</strong> 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">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-ui-checks-grid" viewBox="0 0 16 16">
<path d="M2 10h3a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1m9-9h3a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1m0 9a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1zm0-10a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h3a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM2 9a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h3a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2zm7 2a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2h-3a2 2 0 0 1-2-2zM0 2a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm5.354.854a.5.5 0 1 0-.708-.708L3 3.793l-.646-.647a.5.5 0 1 0-.708.708l1 1a.5.5 0 0 0 .708 0z"/>
</svg>
</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">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-chat-right-text" viewBox="0 0 16 16">
<path d="M2 1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h9.586a2 2 0 0 1 1.414.586l2 2V2a1 1 0 0 0-1-1zm12-1a2 2 0 0 1 2 2v12.793a.5.5 0 0 1-.854.353l-2.853-2.853a1 1 0 0 0-.707-.293H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2z"/>
<path d="M3 3.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5M3 6a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9A.5.5 0 0 1 3 6m0 2.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5"/>
</svg>
</div>
<h3>Relevante Antworten statt Datenflut</h3>
<p>
<strong>RetrieX</strong> 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">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-display" viewBox="0 0 16 16">
<path d="M0 4s0-2 2-2h12s2 0 2 2v6s0 2-2 2h-4q0 1 .25 1.5H11a.5.5 0 0 1 0 1H5a.5.5 0 0 1 0-1h.75Q6 13 6 12H2s-2 0-2-2zm1.398-.855a.76.76 0 0 0-.254.302A1.5 1.5 0 0 0 1 4.01V10c0 .325.078.502.145.602q.105.156.302.254a1.5 1.5 0 0 0 .538.143L2.01 11H14c.325 0 .502-.078.602-.145a.76.76 0 0 0 .254-.302 1.5 1.5 0 0 0 .143-.538L15 9.99V4c0-.325-.078-.502-.145-.602a.76.76 0 0 0-.302-.254A1.5 1.5 0 0 0 13.99 3H2c-.325 0-.502.078-.602.145"/>
</svg>
</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="row mb-4">
<div class="col-lg-7">
<div class="section-kicker">Ablauf</div>
<h2 class="gr-ci-blue">Vom digitalen Wissen zur gestreamten Antwort</h2>
<p class="mb-4">
Der Systemfluss ist klar strukturiert und reproduzierbar aufgebaut:
</p>
</div>
<div class="col-lg-5">
<img src="assets/img/stream.webp" class="img-fluid">
</div>
</div>
<div class="row g-4">
<div class="col-lg-4">
<div class="feature-card">
<div class="icon-badge">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
fill="currentColor" class="bi bi-file-earmark-arrow-up"
viewBox="0 0 16 16">
<path d="M8.5 11.5a.5.5 0 0 1-1 0V7.707L6.354 8.854a.5.5 0 1 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 7.707z"/>
<path d="M14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2M9.5 3A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5z"/>
</svg>
</div>
<h3>Dokumente & Wissensbasis</h3>
<div class="text-center">
<img src="assets/img/docs_and_knowledge.webp" class="img-fluid mb-2"
style="max-height: 300px">
</div>
<p>
Dokumente bilden den fachlichen Ausgangspunkt. Inhalte werden nicht lose
verwendet,
sondern kontrolliert als belastbare Wissensgrundlage in das System überführt.
</p>
</div>
</div>
<div class="col-lg-4">
<div class="feature-card">
<div class="icon-badge">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/>
</svg>
</div>
<h3>Retrieval- & KI-Systemlogik</h3>
<div class="text-center">
<img src="assets/img/retrieval.webp" class="img-fluid mb-2"
style="max-height: 300px">
</div>
<p>
<strong>RetrieX</strong> ermittelt gezielt die relevanten Inhalte, strukturiert
den Kontext und führt
die passenden Informationen reproduzierbar in den Antwortprozess ein.
</p>
</div>
</div>
<div class="col-lg-4">
<div class="feature-card">
<div class="icon-badge">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
fill="currentColor" class="bi bi-chat-right-text" viewBox="0 0 16 16">
<path d="M2 1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h9.586a2 2 0 0 1 1.414.586l2 2V2a1 1 0 0 0-1-1zm12-1a2 2 0 0 1 2 2v12.793a.5.5 0 0 1-.854.353l-2.853-2.853a1 1 0 0 0-.707-.293H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2z"></path>
<path d="M3 3.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5M3 6a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9A.5.5 0 0 1 3 6m0 2.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5"></path>
</svg>
</div>
<h3>Gestreamte KI-Antwort</h3>
<div class="text-center">
<img src="assets/img/ki-anwser.webp" class="img-fluid mb-2"
style="max-height: 300px">
</div>
<p>
Auf dieser Grundlage wird die Antwort erzeugt und direkt ins Frontend gestreamt
nachvollziehbar, nutzbar und auf einen klar definierten Systemfluss gestützt.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="text-center section hero bg-white">
<h2><span class="gr-ci-blue">Sichere KI beginnt mit der richtigen Infrastruktur</span></h2>
<div class="section-text mx-auto"><strong>RetrieX</strong> lässt sich mit einer frei wählbaren LLM-Infrastruktur
betreiben von On-Premise bis zur datenschutzgeeigneten Hosting-Umgebung. Dadurch können auch sensible
Daten kontrolliert verarbeitet werden. Wir beraten Sie bei der Auswahl der passenden Infrastruktur.
</div>
<img src="assets/img/banner-dsgvo.webp" class="img-fluid">
</section>
<section class="section bg-white" 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">Auch für datensensible Unternehmensanwendungen nach DSGVO</h2>
<p class="section-text mx-auto">
<strong>RetrieX</strong> 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">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-robot" viewBox="0 0 16 16">
<path d="M6 12.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5M3 8.062C3 6.76 4.235 5.765 5.53 5.886a26.6 26.6 0 0 0 4.94 0C11.765 5.765 13 6.76 13 8.062v1.157a.93.93 0 0 1-.765.935c-.845.147-2.34.346-4.235.346s-3.39-.2-4.235-.346A.93.93 0 0 1 3 9.219zm4.542-.827a.25.25 0 0 0-.217.068l-.92.9a25 25 0 0 1-1.871-.183.25.25 0 0 0-.068.495c.55.076 1.232.149 2.02.193a.25.25 0 0 0 .189-.071l.754-.736.847 1.71a.25.25 0 0 0 .404.062l.932-.97a25 25 0 0 0 1.922-.188.25.25 0 0 0-.068-.495c-.538.074-1.207.145-1.98.189a.25.25 0 0 0-.166.076l-.754.785-.842-1.7a.25.25 0 0 0-.182-.135"/>
<path d="M8.5 1.866a1 1 0 1 0-1 0V3h-2A4.5 4.5 0 0 0 1 7.5V8a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1v1a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-1a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1v-.5A4.5 4.5 0 0 0 10.5 3h-2zM14 7.5V13a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7.5A3.5 3.5 0 0 1 5.5 4h5A3.5 3.5 0 0 1 14 7.5"/>
</svg>
</div>
<h3>Eigene KI statt öffentliche Blackbox</h3>
<p>
<strong>RetrieX</strong> 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">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-shield" viewBox="0 0 16 16">
<path d="M5.338 1.59a61 61 0 0 0-2.837.856.48.48 0 0 0-.328.39c-.554 4.157.726 7.19 2.253 9.188a10.7 10.7 0 0 0 2.287 2.233c.346.244.652.42.893.533q.18.085.293.118a1 1 0 0 0 .101.025 1 1 0 0 0 .1-.025q.114-.034.294-.118c.24-.113.547-.29.893-.533a10.7 10.7 0 0 0 2.287-2.233c1.527-1.997 2.807-5.031 2.253-9.188a.48.48 0 0 0-.328-.39c-.651-.213-1.75-.56-2.837-.855C9.552 1.29 8.531 1.067 8 1.067c-.53 0-1.552.223-2.662.524zM5.072.56C6.157.265 7.31 0 8 0s1.843.265 2.928.56c1.11.3 2.229.655 2.887.87a1.54 1.54 0 0 1 1.044 1.262c.596 4.477-.787 7.795-2.465 9.99a11.8 11.8 0 0 1-2.517 2.453 7 7 0 0 1-1.048.625c-.28.132-.581.24-.829.24s-.548-.108-.829-.24a7 7 0 0 1-1.048-.625 11.8 11.8 0 0 1-2.517-2.453C1.928 10.487.545 7.169 1.141 2.692A1.54 1.54 0 0 1 2.185 1.43 63 63 0 0 1 5.072.56"/>
</svg>
</div>
<h3>Serverbetrieb in Deutschland</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">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-database-lock" viewBox="0 0 16 16">
<path d="M13 5.698a5 5 0 0 1-.904.525C11.022 6.711 9.573 7 8 7s-3.022-.289-4.096-.777A5 5 0 0 1 3 5.698V7c0 .374.356.875 1.318 1.313C5.234 8.729 6.536 9 8 9c.666 0 1.298-.056 1.876-.156-.43.31-.804.693-1.102 1.132A12 12 0 0 1 8 10c-1.573 0-3.022-.289-4.096-.777A5 5 0 0 1 3 8.698V10c0 .374.356.875 1.318 1.313C5.234 11.729 6.536 12 8 12h.027a4.6 4.6 0 0 0-.017.8A2 2 0 0 0 8 13c-1.573 0-3.022-.289-4.096-.777A5 5 0 0 1 3 11.698V13c0 .374.356.875 1.318 1.313C5.234 14.729 6.536 15 8 15c0 .363.097.704.266.997Q8.134 16.001 8 16c-1.573 0-3.022-.289-4.096-.777C2.875 14.755 2 14.007 2 13V4c0-1.007.875-1.755 1.904-2.223C4.978 1.289 6.427 1 8 1s3.022.289 4.096.777C13.125 2.245 14 2.993 14 4v4.256a4.5 4.5 0 0 0-1.753-.249C12.787 7.654 13 7.289 13 7zm-8.682-3.01C3.356 3.124 3 3.625 3 4c0 .374.356.875 1.318 1.313C5.234 5.729 6.536 6 8 6s2.766-.27 3.682-.687C12.644 4.875 13 4.373 13 4c0-.374-.356-.875-1.318-1.313C10.766 2.271 9.464 2 8 2s-2.766.27-3.682.687Z"/>
<path d="M9 13a1 1 0 0 1 1-1v-1a2 2 0 1 1 4 0v1a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1zm3-3a1 1 0 0 0-1 1v1h2v-1a1 1 0 0 0-1-1"/>
</svg>
</div>
<h3>Geeignet für sensible Datenprozesse</h3>
<p>
Bei passender technischer und organisatorischer Umsetzung kann <strong>RetrieX</strong> 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.
<strong>RetrieX</strong> 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>
<section class="section light-gradient">
<div class="container">
<div class="py-5 row justify-content-center">
<div class="col-lg-4">
<h2 class="fw-bold ">
<span class="gr-ci-blue">Häufige Fragen zu RetrieX</span></h2>
<p class="mb-4 fw-bolder">
Antworten auf die wichtigsten Fragen rund um Einsatz, Sicherheit und Architektur.
</p>
<p>
Darüber hinaus beantworten wir Ihre Fragen gerne in einem kostenlosen, unverbindlichen Workshop.
Wir sind überzeugt von RetrieX und zeigen Ihnen die Software gerne persönlich und praxisnah.
</p>
</div>
<div class="col-lg-8">
<div class="accordion accordion-flush" id="retriexFaq">
<div class="accordion-item">
<h3 class="accordion-header" id="faq-heading-1">
<button class="accordion-button" type="button" data-bs-toggle="collapse"
data-bs-target="#faq-collapse-1" aria-expanded="true"
aria-controls="faq-collapse-1">
Wie unterscheidet sich RetrieX von Copilot oder einem normalen KI-Chat?
</button>
</h3>
<div id="faq-collapse-1" class="accordion-collapse collapse show"
aria-labelledby="faq-heading-1" data-bs-parent="#retriexFaq">
<div class="accordion-body">
<strong>RetrieX</strong> ist kein freier Standard-Chat, sondern ein kontrolliertes,
dokumentenbasiertes Assistenzsystem. KI-Antworten entstehen auf Basis aktiver
Wissensdokumente, definierter Systemregeln, hybridem Retrieval und optionaler
Live-Daten.
</div>
</div>
</div>
<div class="accordion-item">
<h3 class="accordion-header" id="faq-heading-2">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#faq-collapse-2" aria-expanded="false"
aria-controls="faq-collapse-2">
Welche Datenquellen können angebunden werden?
</button>
</h3>
<div id="faq-collapse-2" class="accordion-collapse collapse" aria-labelledby="faq-heading-2"
data-bs-parent="#retriexFaq">
<div class="accordion-body">
<strong>RetrieX</strong> verarbeitet im aktuellen Stand vor allem hochgeladene
Wissensdokumente sowie optional URL-Inhalte aus Anfragen. Zusätzlich kann das System
bei produktbezogenen Fragen Live-Daten z. B. aus einer Shop-Store API lesen.
Grundsätzlich kann jedes beliebige Datensystem angebunden werden, das online
erreichbar und abfragbar ist.
</div>
</div>
</div>
<div class="accordion-item">
<h3 class="accordion-header" id="faq-heading-3">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#faq-collapse-3" aria-expanded="false"
aria-controls="faq-collapse-3">
Ist On-Premise möglich?
</button>
</h3>
<div id="faq-collapse-3" class="accordion-collapse collapse" aria-labelledby="faq-heading-3"
data-bs-parent="#retriexFaq">
<div class="accordion-body">
Ja. <strong>RetrieX</strong> ist so aufgebaut, dass ein On-Premise-Betrieb technisch
möglich ist. Dazu gehören lokale Anwendung, lokale Datenbank, lokaler
Wissensspeicher, lokaler Vektorindex und frei konfigurierbare Modellendpunkte.
</div>
</div>
</div>
<div class="accordion-item">
<h3 class="accordion-header" id="faq-heading-4">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#faq-collapse-4" aria-expanded="false"
aria-controls="faq-collapse-4">
Wie werden Halluzinationen reduziert?
</button>
</h3>
<div id="faq-collapse-4" class="accordion-collapse collapse" aria-labelledby="faq-heading-4"
data-bs-parent="#retriexFaq">
<div class="accordion-body">
<strong>RetrieX</strong> reduziert Halluzinationen strukturell: durch versionierte
Primärquellen, deterministische Indexierung, hybrides Retrieval, Guardrails gegen
Strukturdrift und klar getrennte Wissens- und Antwortebenen sowie Chunk &
Vector-Scoring. Die KI formuliert Antworten, die Wissensbasis bleibt kontrolliert.
</div>
</div>
</div>
<div class="accordion-item">
<h3 class="accordion-header" id="faq-heading-5">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#faq-collapse-5" aria-expanded="false"
aria-controls="faq-collapse-5">
Wie schnell ist ein Pilot live?
</button>
</h3>
<div id="faq-collapse-5" class="accordion-collapse collapse" aria-labelledby="faq-heading-5"
data-bs-parent="#retriexFaq">
<div class="accordion-body">
Der aktuelle Systemstand ist auf einen schnellen Pilot ausgelegt. Adminoberfläche,
Dokument-Upload, Ingest, Modellkonfiguration und Browser-Chat sind bereits
vorhanden, sodass ein erster Pilot mit klar abgegrenztem Use Case in kurzer Zeit
umgesetzt werden kann.
</div>
</div>
</div>
<div class="accordion-item">
<h3 class="accordion-header" id="faq-heading-6">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#faq-collapse-6" aria-expanded="false"
aria-controls="faq-collapse-6">
Können Antworten Quellen anzeigen?
</button>
</h3>
<div id="faq-collapse-6" class="accordion-collapse collapse" aria-labelledby="faq-heading-6"
data-bs-parent="#retriexFaq">
<div class="accordion-body">
Ja, <strong>RetrieX</strong> arbeitet dokumentenbasiert und mit eindeutigem
Quellenbezug im Retrieval. Die konkrete Darstellung von Quellenhinweisen in der
Oberfläche kann projektspezifisch ausgeprägt werden.
</div>
</div>
</div>
<div class="accordion-item">
<h3 class="accordion-header" id="faq-heading-7">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#faq-collapse-7" aria-expanded="false"
aria-controls="faq-collapse-7">
Welche Rechte- und Rollenmodelle gibt es?
</button>
</h3>
<div id="faq-collapse-7" class="accordion-collapse collapse" aria-labelledby="faq-heading-7"
data-bs-parent="#retriexFaq">
<div class="accordion-body">
<strong>RetrieX</strong> verfügt im aktuellen Stand über ein rollenbasiertes
Adminmodell mit Super Admin, Knowledge Admin, Editor und User. Sensible Bereiche wie
System-Prompts, Modellaktivierung, Reindexing und Log-Einsicht sind gezielt
abgesichert.
</div>
</div>
</div>
<div class="accordion-item">
<h3 class="accordion-header" id="faq-heading-9">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#faq-collapse-9" aria-expanded="false"
aria-controls="faq-collapse-9">
Was passiert mit sensiblen Daten?
</button>
</h3>
<div id="faq-collapse-9" class="accordion-collapse collapse" aria-labelledby="faq-heading-9"
data-bs-parent="#retriexFaq">
<div class="accordion-body">
<strong>RetrieX</strong> kann so betrieben werden, dass sensible Daten im eigenen
System verbleiben. Entscheidend dafür sind die gewählte Betriebsform, die
Infrastruktur und der konfigurierte Modellendpunkt. Für datensensible Szenarien ist
insbesondere ein kontrollierter On-Premise- oder Private-Endpoint-Betrieb sinnvoll.
</div>
</div>
</div>
<div class="accordion-item">
<h3 class="accordion-header" id="faq-heading-10">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#faq-collapse-10" aria-expanded="false"
aria-controls="faq-collapse-10">
Für welche Unternehmensgrößen ist RetrieX sinnvoll?
</button>
</h3>
<div id="faq-collapse-10" class="accordion-collapse collapse"
aria-labelledby="faq-heading-10" data-bs-parent="#retriexFaq">
<div class="accordion-body">
<strong>RetrieX</strong> ist für Unternehmen jeder Größe sinnvoll, sobald relevantes
Wissen strukturiert, auffindbar und kontrolliert nutzbar gemacht werden soll.
Besonders stark ist das System bei dokumentenzentrierten Wissens-, Support-,
Produkt- und Beratungsszenarien.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section mt-0" id="cta">
<div class="container">
<div class="cta-box">
<div class="row align-items-center g-4">
<div class="col-lg-8">
<div class="section-kicker text-white-50">Nächster Schritt</div>
<h2>Unternehmenswissen endlich produktiv nutzbar machen.</h2>
<p>
Wir zeigen, wie Wissen, Regeln und Produktinformationen in einer steuerbaren KI-Oberfläche
zusammengeführt werden können klar, nachvollziehbar und produktiv einsetzbar.
</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>
</div>
</div>
</div>
</div>
</section>
</main>
<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>
</footer>
<script src="/assets/retriex/bundle.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
const headings = document.querySelectorAll('h2');
headings.forEach(el => el.classList.add('animate-fade-up'));
const observer = new IntersectionObserver((entries, obs) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('is-visible');
obs.unobserve(entry.target);
}
});
}, {
threshold: 0.2,
rootMargin: '0px 0px -40px 0px'
});
headings.forEach(el => observer.observe(el));
});
</script>
</body>
</html>