diff --git a/data/index.html b/data/index.html
new file mode 100644
index 0000000..2393f52
--- /dev/null
+++ b/data/index.html
@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <title>GeoTIFF Viewer</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
+  <style>
+    html, body, #map { height: 100%; margin: 0; padding: 0; }
+    .legend {
+      position: absolute;
+      bottom: 20px;
+      right: 20px;
+      background: white;
+      padding: 10px;
+      border-radius: 5px;
+      font-family: sans-serif;
+      font-size: 12px;
+      line-height: 1.2;
+      box-shadow: 0 0 5px rgba(0,0,0,0.3);
+    }
+    .legend-gradient {
+      height: 10px;
+      width: 200px;
+      background: linear-gradient(to right, #440154, #3b528b, #21918c, #5ec962, #fde725);
+      margin-bottom: 5px;
+    }
+    .legend-labels {
+      display: flex;
+      justify-content: space-between;
+    }
+  </style>
+</head>
+<body>
+  <div id="map"></div>
+  <div class="legend">
+    <div class="legend-gradient"></div>
+    <div class="legend-labels">
+      <span id="min-val">min</span>
+      <span id="max-val">max</span>
+    </div>
+  </div>
+
+<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
+<script src="https://unpkg.com/georaster"></script>
+<script src="https://unpkg.com/georaster-layer-for-leaflet"></script>
+<script src="https://unpkg.com/chroma-js/chroma.min.js"></script>
+<script>
+  const map = L.map("map").setView([50.0, 8.25], 10);
+
+  // Basiskarte
+  const baseLayer = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
+    attribution: "© OpenStreetMap contributors"
+  }).addTo(map);
+
+  const overlayLayers = {};
+
+  // GeoTIFF laden
+  fetch("class_Mainz_maxlike_gold.tif")
+    .then(response => response.arrayBuffer())
+    .then(tiffData => {
+      parseGeoraster(tiffData).then(georaster => {
+        const min = georaster.mins[0];
+        const max = georaster.maxs[7];
+
+        const colorScale = chroma.scale("viridis").domain([min, max]);
+
+        document.getElementById("min-val").textContent = min.toFixed(2);
+        document.getElementById("max-val").textContent = max.toFixed(2);
+
+        const geotiffLayer = new GeoRasterLayer({
+          georaster: georaster,
+          pixelValuesToColorFn: values => {
+            const val = values[0];
+            if (val === null || isNaN(val)) return null;
+            return colorScale(val).alpha(0.7).css();
+          },
+          resolution: 64
+        });
+
+        geotiffLayer.addTo(map);
+        map.fitBounds(geotiffLayer.getBounds());
+        overlayLayers["GeoTIFF Heatmap"] = geotiffLayer;
+      });
+    });
+
+  // GeoJSON laden
+  fetch("stadtgrenze.geojson")
+    .then(response => response.json())
+    .then(geojson => {
+      const geojsonLayer = L.geoJSON(geojson, {
+        style: {
+          color: "blue",
+          weight: 2
+        },
+        onEachFeature: (feature, layer) => {
+          if (feature.properties?.name) {
+            layer.bindPopup(feature.properties.name);
+          }
+        }
+      }).addTo(map);
+
+      overlayLayers["Stadtgrenze"] = geojsonLayer;
+    });
+
+  // Layer-Steuerung hinzufügen
+  setTimeout(() => {
+    L.control.layers({ "OpenStreetMap": baseLayer }, overlayLayers, { collapsed: false }).addTo(map);
+  }, 1000);
+</script>
+<div style="
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background: rgba(255,255,255,0.8);
+  text-align: center;
+  font-size: 11px;
+  font-family: sans-serif;
+  padding: 3px 6px;
+  z-index: 999;
+">
+  ©GeoBasis-DE / LVermGeoRP 2025, dl-de/by-2-0, <a href="https://www.lvermgeo.rlp.de" target="_blank">www.lvermgeo.rlp.de</a> [Daten bearbeitet]
+</div>
+</body>
+</html>
+
diff --git a/data/index.html.org b/data/index.html.org
new file mode 100644
index 0000000..3648fa5
--- /dev/null
+++ b/data/index.html.org
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <title>GeoTIFF Viewer</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
+  <style>
+    html, body, #map { height: 100%; margin: 0; padding: 0; }
+  </style>
+</head>
+<body>
+  <div id="map"></div>
+
+  <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
+  <script src="https://unpkg.com/georaster"></script>
+  <script src="https://unpkg.com/georaster-layer-for-leaflet"></script>
+  <script>
+    const map = L.map("map").setView([50.0, 8.25], 10);
+
+    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
+      attribution: "© OpenStreetMap contributors"
+    }).addTo(map);
+
+    fetch("class_Mainz_maxlike_gold.tif")
+      .then(response => response.arrayBuffer())
+      .then(tiffData => {
+        parseGeoraster(tiffData).then(georaster => {
+          const layer = new GeoRasterLayer({
+            georaster: georaster,
+            pixelValuesToColorFn: values => {
+              const val = values[0];
+              return `rgba(${val}, ${val}, ${val}, 0.7)`;
+            },
+            resolution: 64
+          });
+          layer.addTo(map);
+          map.fitBounds(layer.getBounds());
+        });
+      });
+  </script>
+</body>
+</html>
+
diff --git a/data/stadtgrenze.geojson b/data/stadtgrenze.geojson
new file mode 100644
index 0000000..e13ed4d
--- /dev/null
+++ b/data/stadtgrenze.geojson
@@ -0,0 +1,13 @@
+{
+  "type": "FeatureCollection",
+  "features": [{
+    "type": "Feature",
+    "geometry": {
+      "type": "Polygon",
+      "coordinates": [[[8.20, 50.00], [8.30, 50.00], [8.30, 50.05], [8.20, 50.05], [8.20, 50.00]]]
+    },
+    "properties": {
+      "name": "Stadtgrenze Mainz"
+    }
+  }]
+}
diff --git a/docker-compose.yaml b/docker-compose.yaml
new file mode 100644
index 0000000..5e1dd53
--- /dev/null
+++ b/docker-compose.yaml
@@ -0,0 +1,14 @@
+services:
+  geotiff-viewer:
+    image: nginx:alpine
+    container_name: geotiff-viewer
+    restart: unless-stopped
+    volumes:
+      - ./data:/usr/share/nginx/html:ro
+    networks:
+      - npm-network  # falls du Nginx Proxy Manager nutzt
+
+networks:
+  npm-network:
+    external: true
+
