basic version by Felix

assets/icon-linkedin.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.5 2H3.5C3.10218 2 2.72064 2.15805 2.43934 2.43939C2.15804 2.72072 2 3.10229 2 3.50016V20.5019C2 20.8998 2.15804 21.2814 2.43934 21.5627C2.72064 21.844 3.10218 22.0021 3.5 22.0021H20.5C20.8978 22.0021 21.2794 21.844 21.5607 21.5627C21.842 21.2814 22 20.8998 22 20.5019V3.50016C22 3.10229 21.842 2.72072 21.5607 2.43939C21.2794 2.15805 20.8978 2 20.5 2ZM8 19.0018H5V10.0008H8V19.0018ZM6.5 8.25065C6.15618 8.24083 5.82288 8.12989 5.54175 7.9317C5.26062 7.73351 5.04411 7.45686 4.9193 7.13631C4.79448 6.81577 4.76687 6.46555 4.83994 6.1294C4.913 5.79326 5.0835 5.4861 5.33011 5.24631C5.57673 5.00652 5.88853 4.84473 6.22656 4.78115C6.5646 4.71758 6.91387 4.75503 7.23074 4.88884C7.5476 5.02266 7.81802 5.24689 8.00819 5.53352C8.19836 5.82015 8.29986 6.15648 8.3 6.50047C8.2921 6.97087 8.09834 7.41902 7.76105 7.74697C7.42376 8.07492 6.97039 8.25601 6.5 8.25065ZM19 19.0018H16V14.2613C16 12.8411 15.4 12.3311 14.62 12.3311C14.3913 12.3463 14.1679 12.4066 13.9625 12.5084C13.7572 12.6102 13.574 12.7517 13.4235 12.9245C13.273 13.0974 13.1581 13.2982 13.0854 13.5156C13.0127 13.733 12.9837 13.9626 13 14.1913C12.995 14.2378 12.995 14.2848 13 14.3313V19.0018H10V10.0008H12.9V11.301C13.1925 10.8559 13.5944 10.4935 14.0672 10.2483C14.54 10.0031 15.0677 9.88349 15.6 9.90083C17.15 9.90083 18.96 10.7609 18.96 13.5612L19 19.0018Z" fill="#7FD332"/>
+</svg>

assets/icon-mail.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 6.99988L12 11.9999L21 6.99988M3 5H21V19H3V5Z" stroke="#7FD332"/>
+</svg>

assets/icon-phone.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.87868 3.92262L7.24075 4.26745L7.24075 4.26744L6.87868 3.92262ZM17.1213 3.92262L17.4834 3.57779L17.4834 3.57778L17.1213 3.92262ZM17.1213 20.0774L17.4834 20.4223L17.4834 20.4222L17.1213 20.0774ZM6.87868 20.0774L6.5166 20.4222L6.51662 20.4222L6.87868 20.0774ZM11 17.5H10.5V18.5H11V18V17.5ZM10 6L9.52566 6.15811L9.63962 6.5H10V6ZM14 6V6.5H14.3604L14.4744 6.15805L14 6ZM6 9.3H6.5C6.5 7.8016 6.50096 6.72573 6.60579 5.9071C6.70907 5.10045 6.90537 4.61959 7.24075 4.26745L6.87868 3.92262L6.51662 3.57779C5.97331 4.14825 5.73027 4.87116 5.61388 5.78009C5.49904 6.67704 5.5 7.82856 5.5 9.3H6ZM6.87868 3.92262L7.24075 4.26744C7.57286 3.91873 8.02117 3.71727 8.77808 3.61042C9.55197 3.50117 10.571 3.5 12 3.5V3V2.5C10.6006 2.5 9.49829 2.49883 8.63829 2.62024C7.76131 2.74404 7.06318 3.00389 6.51661 3.57779L6.87868 3.92262ZM12 3V3.5C13.429 3.5 14.448 3.50117 15.2219 3.61042C15.9788 3.71727 16.4271 3.91873 16.7593 4.26746L17.1213 3.92262L17.4834 3.57778C16.9368 3.00389 16.2387 2.74404 15.3617 2.62024C14.5017 2.49883 13.3994 2.5 12 2.5V3ZM17.1213 3.92262L16.7593 4.26744C17.0946 4.61959 17.2909 5.10044 17.3942 5.9071C17.499 6.72573 17.5 7.8016 17.5 9.3H18H18.5C18.5 7.82855 18.501 6.67704 18.3861 5.78009C18.2697 4.87117 18.0267 4.14826 17.4834 3.57779L17.1213 3.92262ZM18 9.3H17.5V14.7H18H18.5V9.3H18ZM18 14.7H17.5C17.5 16.1984 17.499 17.2742 17.3942 18.0929C17.2909 18.8995 17.0946 19.3804 16.7593 19.7326L17.1213 20.0774L17.4834 20.4222C18.0267 19.8517 18.2697 19.1288 18.3861 18.2199C18.501 17.3229 18.5 16.1714 18.5 14.7H18ZM17.1213 20.0774L16.7593 19.7326C16.4271 20.0813 15.9788 20.2827 15.2219 20.3896C14.448 20.4988 13.429 20.5 12 20.5V21V21.5C13.3994 21.5 14.5017 21.5012 15.3617 21.3798C16.2387 21.256 16.9368 20.9961 17.4834 20.4223L17.1213 20.0774ZM12 21V20.5C10.571 20.5 9.55197 20.4988 8.77807 20.3896C8.02117 20.2827 7.57285 20.0813 7.24075 19.7326L6.87868 20.0774L6.51662 20.4222C7.06319 20.9961 7.76132 21.256 8.63829 21.3798C9.49829 21.5012 10.6006 21.5 12 21.5V21ZM6.87868 20.0774L7.24076 19.7326C6.90537 19.3804 6.70907 18.8995 6.60579 18.0929C6.50096 17.2742 6.5 16.1984 6.5 14.7H6H5.5C5.5 16.1714 5.49904 17.3229 5.61388 18.2199C5.73027 19.1288 5.97331 19.8517 6.5166 20.4222L6.87868 20.0774ZM6 14.7H6.5V9.3H6H5.5V14.7H6ZM11 18V18.5H13V18V17.5H11V18ZM9 3L8.52566 3.15811L9.52566 6.15811L10 6L10.4743 5.84189L9.47434 2.84189L9 3ZM10 6V6.5L14 6.5V6V5.5L10 5.5V6ZM14 6L14.4744 6.15805L15.4739 3.15805L14.9995 3L14.5252 2.84195L13.5256 5.84195L14 6Z" fill="#7FD332"/>
+</svg>

data/content.json

@@ -0,0 +1,15 @@
+{
+  "news": [
+    {
+      "title": {
+        "de": "Neue Röstung",
+        "en": "New Roast"
+      },
+      "text": {
+        "de": "Unsere neue Kaffeemischung ist da.",
+        "en": "Our new coffee blend has arrived."
+      },
+      "image": "/assets/IMG_News1.png"
+    }
+  ]
+}

index.html

@@ -0,0 +1,294 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>endex</title>
+
+<link rel="stylesheet" href="css/style.css">
+<link href="https://fonts.googleapis.com/css2?family=League+Spartan:wght@400;600&display=swap" rel="stylesheet">
+
+</head>
+<body>
+
+    <!-- NAV -->
+    <header>
+        <div class="nav">
+            <div class="logo" onclick="scrollToTop()">
+                <img src="assets/endex_Logo_endex-Logo_Dual-DE.svg" alt="endex Logo">
+            </div>
+            <nav class="nav-links">
+                <a href="#news">News</a>
+                <a href="#services">Leistungen</a>
+                <a href="#company">Unternehmen</a>
+                <a href="#clients">Kunden</a>
+                <a href="#contact">Kontakt</a>
+                <a href="#career">Karriere</a>
+            </nav>
+            <div class="mobile-menu">
+                <div class="lang-switch">
+                    <span id="lang-de" class="active">DE</span> |
+                    <span id="lang-en">EN</span>
+                </div>
+                <div class="burger" onclick="toggleBurger()">
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <!-- HERO -->
+    <section id="start" class="hero">
+        <div class="hero-overlay">
+            <h1 class="hero-title">endex</h1>
+            <p class="hero-subline">
+                endex makes geodata useful in the real world.<br>
+                We work across the full geospatial value chain, from capturing data<br>
+                to delivering clear insights that support better decisions. 
+            </p>
+
+            <a href="#services" class="hero-button">
+                Erfahre mehr zu uns
+            </a>
+        </div>
+    </section>
+
+
+    <!-- NEWS -->
+<section class="news" id="news">
+  <div class="news-container">
+    <h2 class="news-section-title">Aktuelle News</h2>
+    <div class="news-slider">
+      <div class="news-track">
+        <!-- NEWS SLIDES: copy & edit these for each article -->
+        <div class="news-slide">
+          <div class="news-media">
+            <img src="assets/IMG_News1.png" alt="Artikel 1">
+          </div>
+          <div class="news-content">
+            <h3 class="news-title">Artikel 1 Lorem ipsum</h3>
+            <h4 class="news-subline">H3 – Subline Lorem ipsum</h4>
+            <p class="news-text">P – Beschreibung Lorem ipsum dolor sit amet, consetetur sadipscing<br>
+                sed diam nonumy eirmod tempor invidunt ut labore et dolore magna<br>
+                sed diam voluptua. At vero eos et accusam et justo duo dolores et<br>
+                kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit<br>
+                Beschreibung Lorem ipsum dolor sit amet, consetetur sadipscing<br>
+                nonumy eirmod tempor invidunt ut labore et dolore magna.</p>
+          </div>
+        </div>
+        <div class="news-slide">
+          <div class="news-media">
+            <img src="assets/IMG_News1.png" alt="Artikel 2">
+          </div>
+          <div class="news-content">
+            <h3 class="news-title">Artikel 1 Lorem ipsum</h3>
+            <h4 class="news-subline">H3 – Subline Lorem ipsum</h4>
+            <p class="news-text">P – Beschreibung Lorem ipsum dolor sit amet, consetetur sadipscing<br>
+                sed diam nonumy eirmod tempor invidunt ut labore et dolore magna<br>
+                sed diam voluptua. At vero eos et accusam et justo duo dolores et<br>
+                kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit<br>
+                Beschreibung Lorem ipsum dolor sit amet, consetetur sadipscing<br>
+                kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit<br>
+                nonumy eirmod tempor invidunt ut labore et dolore magna.</p>
+            <a href=href="mailto: lukas.uptmoor@endex-geodaten.de" class="news-button">
+            Mehr dazu hier!
+            </a>
+          </div>
+        </div>
+        <div class="news-slide">
+          <div class="news-media">
+            <img src="assets/IMG_News1.png" alt="Artikel 3">
+          </div>
+          <div class="news-content">
+            <h3 class="news-title">Artikel 1 Lorem ipsum</h3>
+            <h4 class="news-subline">H3 – Subline Lorem ipsum</h4>
+            <p class="news-text">P – Beschreibung Lorem ipsum dolor sit amet, consetetur sadipscing<br>
+                sed diam nonumy eirmod tempor invidunt ut labore et dolore magna<br>
+                sed diam voluptua. At vero eos et accusam et justo duo dolores et<br>
+                nonumy eirmod tempor invidunt ut labore et dolore magna.</p>
+          </div>
+        </div>
+      </div>
+      <!-- DOT NAVIGATION -->
+      <div class="news-dots"></div>
+    </div>
+  </div>
+</section>
+
+
+
+
+    <!-- SERVICES -->
+    <section id="services">
+        <div class="services-header">
+            <h2>Unsere Services</h2>
+            <h3>Topline (kurze Beschreibung, Slogan, etc.)</h3>
+        </div>
+        <div class="services-grid">
+
+            <div class="service-box">
+            <img src="assets/service1.png">
+            <h3 class="service-title">Inspektion von Bauwerken & Technischen Anlagen</h3>
+            <div class="service-arrow">→</div>
+            <p class="service-text">
+                • Detektion von <strong>Funktionsstörungen und Wärmebrücken</strong> (z.B Solarparks, Gebäudedämmung)<br>
+                • <strong>Flächen-</strong> und <strong>Volumenberechnung</strong> (z.B. Solarpotential, Haufwerksgröße von Abfall-, Roh- und Baustoffen)<br>
+                • Detektion von <strong>Leckagen</strong> (z.B. Wasserleitungen, Deichanlagen)<br>
+                • Visualisierung für <strong>vereinfachte Inspektion und Wartung</strong> (z.B. Straßen und Brücken, Windparks, Hochspannungsleitungen)
+            </p>
+            </div>
+
+            <div class="service-box">
+            <img src="assets/service2.png">
+            <h3 class="service-title">Kartierung von Land- & Wasserflächen</h3>
+            <div class="service-arrow">→</div>
+            <p class="service-text">
+                • <strong>Umweltplanung</strong> (z.B. Artenschutz, Biotoptypen, Archäo- und Neobiota)<br>
+                • Dokumentation von <strong>Vitalität für Land- und Forstwirtschaft</strong> (z.B. Bewässerung, Pflanzenschutz, Nährstoffbedarf, Totholz)<br>
+                • Dokumentation von <strong>langfristigen Veränderungen</strong> (z.B. Desertifikation, Subsidenz, Wiedervernässung)<br>
+                • Dokumentation von <strong>kurzfristigen Veränderungen</strong> (z.B. Gewässerqualität, Katastrophenmanagement, Schadenanalyse)
+            </p>
+            </div>
+
+            <div class="service-box">
+            <img src="assets/service3.png">
+            <h3 class="service-title">Verarbeitung & Auswertung von Geodaten</h3>
+            <div class="service-arrow">→</div>
+            <p class="service-text">
+                • Aufbereitung von <strong>digitalen Höhenmodellen</strong> (z.B. DGM1, DOM1, nDOM1)<br>
+                • Aufbereitung von <strong>digitalen Orthophotos</strong> (z.B. DOP10, DOP20)<br>
+                • <strong>Vegetationsdetektierung</strong> für Baumkataster (z.B. Baumart, Baumgröße)<br>
+                • <strong>Landnutzungsklassifizierung</strong> (z.B. Versiegelungsanalyse)
+            </p>
+            </div>
+        </div>
+    </section>
+
+
+    
+
+    <!-- COMPANY -->
+    <section id="company" class="company">
+        <div class="company-content">
+            
+                <h2>Das Unternehmen</h2>
+                <h3>Topline (kurze Beschreibung, Slogan, etc.)</h3>
+            
+            <div class="company-text">
+                <p>
+                Ausführliche Beschreibung Lorem ipsum dolor sit amet, consetetur nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, at vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd takimata sanctus est Lorem ipsum dolor sit amet. Ausführliche sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor dolore magna aliquyam erat, sed diam.
+                </p>
+                Ausführliche Beschreibung Lorem ipsum dolor sit amet, consetetur nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, at vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd takimata sanctus est Lorem ipsum dolor sit amet. Ausführliche sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor dolore magna aliquyam erat.
+                </p>
+            </div>
+            <img src="assets/company.jpg">
+        </div>
+    </section>
+
+
+    <!-- DIVIDER 1 -->
+    <div id="divider-1">
+    </div>
+
+
+    <!-- CLIENTS -->
+    <section id="clients">
+    <h2>Unsere Kundschaft</h2>
+    <div class="logo-scroll">
+        <div class="logo-track">
+        <img src="assets/logo-1.svg">
+        <img src="assets/logo-2.svg">
+        <img src="assets/logo-3.svg">
+        <img src="assets/logo-4.svg">
+        </div>
+    </div>
+    </section>
+
+    <!-- CONTACTS -->
+    <section id="contact">
+        <h2>Bereit mit uns zu Arbeiten?</h2>
+        <p>
+            Wir freuen uns über deine Projektanfragen lorem ipsum dolor sit amet,<br>
+            consetetur sadipscing elitr. 
+        </p>
+        <div class="content-box">
+            <h3>Kontakt</h3>
+            <div class="contact-options">
+                <img src="assets/icon-mail.svg">
+                <a href="mailto: lukas.uptmoor@endex-geodaten.de
+" class="contact-link">lukas.uptmoor@endex-geodaten.de
+</a>
+            </div>
+            <div class="contact-options">
+                <img src="assets/icon-phone.svg">
+                <a href="tel:+4900000000000" class="contact-link">+49-000-00 00 00 00</a>
+            </div>
+            <div class="contact-options">
+                <img src="assets/icon-linkedin.svg">
+                <a href="https://de.linkedin.com/company/endex-geo" target="_blank" class="contact-link">LinkedIn</a>
+            </div>
+        </div>
+        <a href=href="mailto: lukas.uptmoor@endex-geodaten.de
+" class="contact-button">
+            Schicke uns eine Mail
+        </a>
+    </section>
+
+
+    <section id="career">
+        <h2>Jobs und Karriere</h2>
+        <h3>Wir suchen… /Topline (kurze Beschreibung, Slogan, etc.)</h3>
+        <p>• Stellenbeschreibung<br>
+            • etc.<br>
+            • etc.<br>
+            • etc.<br>
+            <br>
+            Ansprechpartner, etc. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,<br>
+            sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,<br>
+            sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.<br>
+            Stet clita kasd gubergren, no sea takimata sanctus est </p>
+    </section>
+
+    <!-- DIVIDER 2 -->
+    <div id="divider-2">
+    </div>
+
+    <!-- FOOTER -->
+    <footer>
+    <div class="footer-grid">
+        <img src="assets/endex_Logo_endex-Logo_Dual-DE.svg" id="footer-logo" alt="endex Logo">
+        <div>
+            <h4>Services</h4>
+                <a href="#news">Newsletter</a><br>
+                <a href="#services">Leistungen</a><br>
+                <a href="#company">Unternehmen</a><br>
+                <a href="#clients">Kunden</a><br>
+                <a href="#contact">Kontakt</a><br>
+                <a href="#career">Karriere</a>
+        </div>
+        <div>
+            <h4>Rechtliches</h4>
+                <a href="/legal/legals.html" target="_blank">Impressum</a><br>
+                <a href="/legal/legals.html" target="_blank">Datenschutz</a><br>
+        </div>
+        <div>
+            <h4>Anschrift</h4>
+                <a>Musterfirma GmbH<br>Frau Erika Mustermann<br>Hauptstraße 1<br>12345 Musterstadt</a>
+        </div>
+        <div>
+            <h4>Social</h4>
+                <a href="https://de.linkedin.com/company/endex-geo" target="_blank">
+                    <img src="assets/icon-linkedin.svg"></img>
+                </a>
+        </div>
+    </div>
+    <div class="copyright">
+        Copyright © 2026 endex
+    </div>
+    </footer>
+
+    <script src="js/script.js" defer></script>
+</body>
+</html>

js/script.js

@@ -0,0 +1,263 @@
+/* =====================================================
+GLOBAL STATE
+===================================================== */
+
+let index = 0;
+let track;
+let dots = [];
+
+
+/* =====================================================
+DOM CONTENT LOADED
+===================================================== */
+
+document.addEventListener("DOMContentLoaded", () => {
+  initServices();
+  initNavigation();
+  initNewsSlider();
+});
+
+
+/* =====================================================
+SERVICES EXPAND / COLLAPSE
+===================================================== */
+
+function initServices() {
+
+  const boxes = document.querySelectorAll(".service-box");
+
+  boxes.forEach(box => {
+
+    const arrow = box.querySelector(".service-arrow");
+    const text = box.querySelector(".service-text");
+
+    let closeTimeout;
+
+    arrow.addEventListener("click", () => {
+
+      boxes.forEach(b => {
+        if (b !== box) b.classList.remove("open");
+        if (b.closeTimeout) clearTimeout(b.closeTimeout);
+      });
+
+      box.classList.toggle("open");
+    });
+
+    /* AUTO CLOSE */
+    box.addEventListener("mouseleave", () => {
+      if (box.classList.contains("open")) {
+        box.classList.add("closing");
+
+        closeTimeout = setTimeout(() => {
+          box.classList.remove("open");
+        }, 600);
+
+        box.closeTimeout = closeTimeout;
+      }
+    });
+
+    /* CANCEL CLOSE */
+    box.addEventListener("mouseenter", () => {
+      if (closeTimeout) clearTimeout(closeTimeout);
+      box.classList.remove("closing");
+    });
+
+    /* CLEANUP CLASS */
+    text.addEventListener("transitionend", e => {
+      if (
+        e.propertyName === "max-height" &&
+        box.classList.contains("closing")
+      ) {
+        box.classList.remove("closing");
+      }
+    });
+  });
+}
+
+
+/* =====================================================
+SCROLL TO TOP
+===================================================== */
+
+function scrollToTop() {
+  window.scrollTo({
+    top: 0,
+    behavior: "smooth"
+  });
+}
+
+
+/* =====================================================
+MOBILE BURGER MENU
+===================================================== */
+
+function toggleBurger() {
+  document.querySelector(".nav").classList.toggle("open");
+}
+
+
+/* =====================================================
+ACTIVE NAVIGATION SCROLL
+===================================================== */
+
+function initNavigation() {
+
+  const sections = document.querySelectorAll("section");
+  const navLinks = document.querySelectorAll(".nav-links a");
+
+  window.addEventListener("scroll", () => {
+
+    let current = "";
+
+    sections.forEach(section => {
+      const top = section.offsetTop - 120;
+
+      if (window.scrollY >= top) {
+        current = section.getAttribute("id");
+      }
+    });
+
+    navLinks.forEach(link => {
+      link.classList.remove("active");
+
+      if (link.getAttribute("href") === "#" + current) {
+        link.classList.add("active");
+      }
+    });
+  });
+}
+
+
+/* =====================================================
+NEWS SLIDER
+===================================================== */
+
+function initNewsSlider() {
+
+  track = document.querySelector(".news-track");
+  const slider = document.querySelector(".news-slider");
+  const dotsContainer = document.querySelector(".news-dots");
+  const slides = document.querySelectorAll(".news-slide");
+
+  if (!track || !dotsContainer || slides.length === 0) return;
+
+  let autoSlide;
+  const INTERVAL = 8000; // 8 sec
+
+  /* -------------------------
+  CREATE DOTS
+  ------------------------- */
+
+  dotsContainer.innerHTML = "";
+  dots = [];
+
+  slides.forEach((slide, i) => {
+    const dot = document.createElement("div");
+    dot.classList.add("news-dot");
+    if (i === 0) dot.classList.add("active");
+
+    dot.addEventListener("click", () => {
+      index = i;
+      updateSlider();
+      restartAutoSlide();
+    });
+
+    dotsContainer.appendChild(dot);
+    dots.push(dot);
+  });
+
+  /* -------------------------
+  UPDATE SLIDER
+  ------------------------- */
+
+  function updateSlider() {
+    track.style.transform = `translateX(-${index * 100}%)`;
+
+    dots.forEach((dot, i) =>
+      dot.classList.toggle("active", i === index)
+    );
+  }
+
+  /* -------------------------
+  AUTO LOOP
+  ------------------------- */
+
+  function startAutoSlide() {
+    autoSlide = setInterval(() => {
+      index++;
+
+      if (index >= slides.length) {
+        index = 0; // LOOP BACK
+      }
+
+      updateSlider();
+    }, INTERVAL);
+  }
+
+  function stopAutoSlide() {
+    clearInterval(autoSlide);
+  }
+
+  function restartAutoSlide() {
+    stopAutoSlide();
+    startAutoSlide();
+  }
+
+/* -------------------------
+PAUSE ON HOVER
+------------------------- */
+
+const newsSection = document.querySelector("#news");
+
+newsSection.addEventListener("mouseenter", () => {
+  stopAutoSlide();
+});
+
+newsSection.addEventListener("mouseleave", () => {
+  startAutoSlide();
+});
+
+  /* -------------------------
+  TOUCH SUPPORT
+  ------------------------- */
+
+  let startX = 0;
+  let isDragging = false;
+
+  track.addEventListener("touchstart", e => {
+    startX = e.touches[0].clientX;
+    isDragging = true;
+    stopAutoSlide();
+  });
+
+  track.addEventListener("touchmove", e => {
+    if (!isDragging) return;
+
+    const delta = e.touches[0].clientX - startX;
+
+    track.style.transition = "none";
+    track.style.transform =
+      `translateX(calc(-${index * 100}% + ${delta}px))`;
+  });
+
+  track.addEventListener("touchend", e => {
+
+    isDragging = false;
+    track.style.transition = "transform 0.6s ease";
+
+    const delta = e.changedTouches[0].clientX - startX;
+
+    if (delta > 50 && index > 0) index--;
+    else if (delta < -50 && index < slides.length - 1) index++;
+
+    updateSlider();
+    restartAutoSlide();
+  });
+
+  /* -------------------------
+  INIT
+  ------------------------- */
+
+  updateSlider();
+  startAutoSlide();
+}

legal/legals.html

@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>endex Datenschutz</title>
+    <link rel="stylesheet" href="/css/style.css">
+    <link href="https://fonts.googleapis.com/css2?family=League+Spartan:wght@400;600&display=swap" rel="stylesheet">
+</head>
+
+<body>
+    <a href="https://endex-geodaten.de/"><img src="/assets/endex_Logo_endex-Logo_Dual-DE.svg" alt="endex Logo" id="legals-logo"></a>
+
+    <section id="impressum">
+        <h1>Impressum</h1>
+            <h2>Dienstanbieter</h2>
+                <p>endex Geodaten<br>
+                Musterstr. 123<br>
+                12345, Musterstadt<br>
+                Deutschland</p>
+
+            <h2>Kontaktmöglichkeiten</h2>
+                <p>E-Mail-Adresse: <a>info@endex.com</a><br>
+                Telefon: <a>0129132123124</a></p>
+
+            <h2>Angaben zum Unternehmen</h2>
+                <p>Infos nötig!!!!</p>
+
+            <h2>Social Media und andere Onlinepräsenzen</h2>
+                <p>Dieses Impressum gilt auch für die folgenden Social-Media-Präsenzen und Onlineprofile:<br>
+                <a href="https://www.linkedin.com/company/endex-geo/posts/?feedView=all" target="_blank">https://www.linkedin.com/company/endex-geo/posts/?feedView=all</a></p>
+    </section>
+
+
+    <section id="datenschutz">
+        <h1>Datenschutzerklärung</h1>
+
+            <h2>§ 1 Allgemeine Informationen</h2>
+                <p>In dieser Datenschutzerklärung finden Sie detaillierte Informationen darüber, was mit Ihren persönlichen Daten geschieht,<br>
+                    wenn Sie unsere Website <a href="https://endex-geodaten.de/" target="_blank">https://endex-geodaten.de/</a> besuchen. Alle Daten, die eine persönliche Identifizierung Ihrerseits<br>
+                    ermöglichen, sind personenbezogene Daten. Bei der Verarbeitung Ihrer Daten halten wir uns strikt an die gesetzlichen<br>
+                    Vorgaben, insbesondere die Datenschutzgrundverordnung („DSGVO“). Uns ist es sehr wichtig, dass Ihr Besuch auf unserer<br>
+                    Website vollkommen sicher ist.</p>
+
+            <h2>§ 2 Verantwortliche Stelle</h2>
+                <p>Die Verantwortung für die Erhebung und Verarbeitung personenbezogener Daten auf dieser Website liegt datenschutzrechtlich bei:</p>
+                <ul>
+                    <li><strong>Name:</strong> Lorem ipsum</li>
+                    <li><strong>Adresse:</strong> Lorem ipsum</li>
+                    <li><strong>Land:</strong> Lorem ipsum</li>
+                    <li><strong>E-Mail:</strong> Lorem ipsum</li>
+                    <li><strong>Tel.:</strong> Lorem ipsum</li>
+                </ul>
+
+            <h2>§ 3 Soziale Medien</h2>
+                <h3>A. LinkedIn Plugin</h3>
+                    <p>Auf unserer Website sind Funktionen des sozialen Netzwerks LinkedIn integriert.<br>
+                        Anbieter ist die LinkedIn Corporation, 2029 Stierlin Court, Mountain View, CA 94043, USA („LinkedIn“).</p>
+                    <ul>
+                        <li><strong>Shariff-Lösung: </strong>Im Interesse eines erhöhten Datenschutzes erfolgt die Einbindung nicht direkt,<br>
+                                                            sondern mittels eines HTML-Links (sogenannte „Shariff“-Lösung von c't).</li>
+                        <li><strong>Verbindungsaufbau: </strong>Dies gewährleistet, dass beim Aufruf der Seite zunächst keine Verbindung mit<br>
+                                                                den Servern von LinkedIn hergestellt wird. Die Verbindung wird erst durch eine aktive<br>
+                                                                Betätigung des Buttons in einem separaten Browserfenster initiiert.</li>
+                        <li><strong>Datenschutzerklärung LinkedIn: </strong>Informationen über Art und Umfang der Datenerhebung finden Sie unter:<br>
+                                                                            <a href="https://www.linkedin.com/legal/privacy-policy" target="_blank">https://www.linkedin.com/legal/privacy-policy</a>.</li>
+                    </ul>
+
+            <h2>§ 4 Kontaktaufnahme</h2>
+                <p>Wenn Sie mit uns Kontakt aufnehmen (z. B. per E-Mail), werden die dabei übermittelten Daten gespeichert, um Ihre Anfrage zu bearbeiten</p>
+                <ul>
+                    <li><strong>Weitergabe: </strong>Eine Weitergabe an Dritte erfolgt ohne Ihre ausdrückliche Einwilligung nicht.</li>
+                    <li><strong>Rechtsgrundlage: </strong>Die Verarbeitung erfolgt auf Grundlage Ihrer Einwilligung gemäß Art. 6 Abs. 1 lit. a DSGVO.</li>
+                    <li><strong>Widerruf: </strong>Sie können diese Einwilligung jederzeit formlos per E-Mail widerrufen. Die Rechtmäßigkeit der bis dahin erfolgten Verarbeitung bleibt unberührt.</li>
+                    <li><strong>Speicherdauer: </strong>Die Daten bleiben gespeichert, bis Sie uns zur Löschung auffordern, die Einwilligung widerrufen<br>
+                                                        oder der Zweck der Speicherung entfällt (unter Beachtung gesetzlicher Aufbewahrungsfristen).</li>
+                </ul>
+
+            <h2>§ 5 Verwendung und Weitergabe von Daten</h2>
+                <ul>
+                    <li><strong>Keine kommerzielle Nutzung: </strong>Wir versichern, dass Daten (wie Name oder E-Mail-Adresse) nicht an Dritte verkauft oder anderweitig kommerziell genutzt werden.</li>
+                    <li><strong>Zweckbindung: </strong>Die Verarbeitung erfolgt nur zur Korrespondenz und Erfüllung des Zwecks, für den Sie uns die Daten bereitgestellt haben.</li>
+                    <li><strong>Zahlungsabwicklung: </strong>Im Rahmen der Zahlungsabwicklung werden Daten an das beauftragte Kreditinstitut weitergeleitet.</li>
+                    <li><strong>Grundsätzliche Vertraulichkeit: </strong>Wir geben Daten grundsätzlich nicht an Dritte weiter, es sei denn, es besteht eine<br>
+                                                                        gesetzliche Verpflichtung oder Sie haben ausdrücklich zugestimmt.</li>
+                </ul>
+
+            <h2>§ 6 Verschlüsselung (SSL/TLS)</h2>
+                <p>Unsere Website verwendet eine SSL- bzw. TLS-Verschlüsselung, erkennbar an „https://“ und dem Schloss-Symbol in der Adresszeile.<br>
+                Dies stellt sicher, dass übermittelte Daten nicht von unbefugten Dritten mitgelesen werden können.</p>
+
+            <h2>§ 7 Speicherdauer</h2>
+                <p>Personenbezogene Daten werden nur so lange gespeichert, wie es zur Erreichung des jeweiligen Zwecks notwendig ist. Aufgrund handels-<br>
+                und steuerrechtlicher Pflichten kann die Speicherung jedoch bis zu 10 Jahre betragen.</p>
+
+
+            <h2>§ 8 Ihre Datenschutzrechte</h2>
+              <p>Als betroffene Person haben Sie folgende Rechte:</p>
+                <ul>
+                    <li><strong>Widerrufsrecht: </strong>Einwilligung zur Datenverarbeitung kann jederzeit mit Wirkung für die Zukunft widerrufen werden (Art. 7 Abs. 3 DSGVO).</li>
+                    <li><strong>Auskunftsrecht: </strong>Recht auf Bestätigung und Auskunft über die verarbeiteten Daten (Art. 15 DSGVO).</li>
+                    <li><strong>Recht auf Berichtigung: </strong>Korrektur unrichtiger oder unvollständiger Daten (Art. 16 DSGVO).</li>
+                    <li><strong>Recht auf Löschung: </strong>Anspruch auf Löschung der Daten unter bestimmten Voraussetzungen (Art. 17 DSGVO), sofern<br>
+                                keine gesetzlichen Ausnahmen (z. B. rechtliche Verpflichtungen) vorliegen.</li>
+                    <li><strong>Recht auf Einschränkung: </strong>Sperrung der Verarbeitung in spezifischen Fällen (Art. 18 DSGVO).</li>
+                    <li><strong>Recht auf Datenübertragbarkeit: </strong>Erhalt der Daten in einem maschinenlesbaren Format (Art. 20 DSGVO).</li>
+                    <li><strong>Widerspruchsrecht: </strong>Widerspruch gegen Verarbeitungen auf Basis von Interessenabwägungen (Art. 21 Abs. 1 DSGVO)<br>
+                                oder gegen Direktwerbung (Art. 21 Abs. 2 DSGVO).</li>
+                    <li><strong>Beschwerderecht: </strong>Recht auf Beschwerde bei einer Aufsichtsbehörde bei Verstößen gegen die DSGVO (Art. 77 DSGVO).</li>
+                </ul>
+
+
+            <h2>§ 9 Gültigkeit und Änderung</h2>
+                <p>Diese Datenschutzerklärung tritt am 26.02.2026 in Kraft. Wir behalten uns vor, diese Erklärung bei Bedarf zu ändern, um sie neuen rechtlichen Anforderungen oder<br>
+                technischen Änderungen anzupassen. Die jeweils aktuell auf der Website abrufbare Version ist bindend.</p>
+    </section>
+</body>
+</html>