diff --git a/index.html b/index.html
new file mode 100644
index 0000000..cb196e2
--- /dev/null
+++ b/index.html
@@ -0,0 +1,168 @@
+<!DOCTYPE html>
+<html lang="de">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Thin Sections - Geosphere Austria</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@10.9.0/ol.css">
+  <style>
+    html,
+    body {
+      margin: 0;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+    }
+
+    #map {
+      width: 100%;
+      height: 100%;
+    }
+
+    #info {
+      position: absolute;
+      top: 10px;
+      left: 70px;
+      z-index: 1000;
+      background: white;
+      padding: 8px 12px;
+      font-family: Arial;
+      font-size: 13px;
+      border-radius: 4px;
+      box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
+    }
+
+    .ol-tooltip {
+      position: relative;
+      background: rgba(0, 0, 0, 0.7);
+      border-radius: 4px;
+      color: white;
+      padding: 4px 8px;
+      opacity: 0.7;
+      white-space: nowrap;
+      font-family: Arial, sans-serif;
+      font-size: 12px;
+      pointer-events: none;
+    }
+
+    .ol-tooltip-static {
+      background-color: #0080ff;
+      color: white;
+      border: 1px solid white;
+    }
+  </style>
+
+  <script type="importmap">
+  {
+    "imports": {
+      "ol":         "https://esm.sh/ol@10.9.0",
+      "ol/":        "https://esm.sh/ol@10.9.0/",
+      "geotiff":    "https://esm.sh/geotiff@2.1.3",
+      "geotiff/":   "https://esm.sh/geotiff@2.1.3/",
+      "tiff":       "https://esm.sh/tiff@1.0.12",
+      "tiff/":      "https://esm.sh/tiff@1.0.12/",
+      "web-worker": "https://esm.sh/web-worker@1.3.0",
+      "lerc":       "https://esm.sh/lerc@3.0.0"
+    }
+  }
+  </script>
+<!-- Matomo -->
+<script>
+  var _paq = window._paq = window._paq || [];
+  /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
+  _paq.push(['trackPageView']);
+  _paq.push(['enableLinkTracking']);
+  (function() {
+    var u="https://webstat.geosphere.at/";
+    _paq.push(['setTrackerUrl', u+'matomo.php']);
+    _paq.push(['setSiteId', '18']);
+    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+    g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
+  })();
+</script>
+<!-- End Matomo Code -->
+</head>
+
+<body>
+  <div id="map"></div>
+  <div id="info">Initialisiere…</div>
+
+  <script type="module">
+    const { default: Map } = await import('ol/Map.js');
+    const { default: View } = await import('ol/View.js');
+    const { default: WebGLTileLayer } = await import('ol/layer/WebGLTile.js');
+    const { default: GeoTIFF } = await import('ol/source/GeoTIFF.js');
+    const { Projection, addProjection } = await import('ol/proj.js');
+
+    // Controls & Overlays
+    const { FullScreen, defaults: defaultControls } = await import('ol/control.js');
+    const { default: Overlay } = await import('ol/Overlay.js');
+
+    // Vektor- & Zeichen-Klassen (Für Messwerkzeug)
+    const { default: VectorSource } = await import('ol/source/Vector.js');
+    const { default: VectorLayer } = await import('ol/layer/Vector.js');
+    const { default: Draw } = await import('ol/interaction/Draw.js');
+    const { Style, Stroke } = await import('ol/style.js');
+
+    // ── ID + Pfad ─────────────────────────────────────────────────────────────
+    const parts = window.location.pathname.split('/').filter(Boolean);
+    const tifId = parts[1];
+    const res = await fetch('/tif-index.json');
+    const index = await res.json();
+    const tifUrl = '/cogs/' + index[tifId];
+    document.getElementById('info').textContent = 'TIFF: ' + tifId + ' — ' + index[tifId];
+
+    // ── GeoTIFF Source & Geometrie-Setup ──────────────────────────────────────
+    const source = new GeoTIFF({
+      normalize: true,
+      interpolate: true,
+      sources: [{ url: tifUrl }],
+    });
+
+    const vc = await source.getView();
+    const extent = vc.extent;
+    const [, , w, h] = extent;
+
+    // ── Pixel-Projektion ──────────────────────────────────────────────────────
+    const projCode = 'PIXEL:' + tifId;
+    addProjection(new Projection({
+      code: projCode, units: 'm', extent, global: false,
+    }));
+
+    // ── Raster-Layer (WebGL) ──────────────────────────────────────────────────
+    const layer = new WebGLTileLayer({
+      source: source,
+      style: {
+        color: [
+          'array',
+          ['+', ['band', 1], ['*', 1.402, ['-', ['band', 3], 0.5]]],
+          ['-', ['-', ['band', 1], ['*', 0.344136, ['-', ['band', 2], 0.5]]], ['*', 0.714136, ['-', ['band', 3], 0.5]]],
+          ['+', ['band', 1], ['*', 1.772, ['-', ['band', 2], 0.5]]],
+          1
+        ]
+      }
+    });
+
+    // ── View + Map erstellen ──────────────────────────────────────────────────
+    const map = new Map({
+      target: 'map',
+      layers: [layer], // Beide Layer hier einbinden
+      controls: defaultControls().extend([
+        new FullScreen()
+      ]),
+      view: new View({
+        projection: projCode,
+        center: [w / 2, h / 2],
+        extent,
+        showFullExtent: true,
+        resolutions: vc.resolutions,
+      }),
+    });
+
+    map.getView().fit(extent, { padding: [20, 20, 20, 20] });
+
+
+  </script>
+</body>
+
+</html>
\ No newline at end of file
