feat: smartin3.de — lightbox on gallery click with caption

sites/smartin3.de/index.html

@@ -231,6 +231,7 @@
       aspect-ratio: 4/3;
       border: 1px solid var(--border);
       transition: border-color 0.3s, transform 0.3s;
+      cursor: pointer;
     }
 
     .gallery-item:hover {
@@ -283,6 +284,26 @@
       .gallery-grid { grid-template-columns: repeat(2, 1fr); }
     }
 
+    /* Lightbox */
+    .lightbox {
+      display: none; position: fixed; inset: 0; z-index: 200;
+      background: rgba(0,0,0,0.9); backdrop-filter: blur(10px);
+      justify-content: center; align-items: center;
+      cursor: pointer;
+    }
+    .lightbox.active { display: flex; }
+    .lightbox img {
+      max-width: 90vw; max-height: 85vh;
+      object-fit: contain; border-radius: 8px;
+    }
+    .lightbox-caption {
+      position: fixed; bottom: 24px; left: 50%;
+      transform: translateX(-50%);
+      color: var(--text-dim); font-size: 0.9rem;
+      font-family: 'Space Grotesk', sans-serif;
+      text-align: center; max-width: 80vw;
+    }
+
     /* Process */
     .process-steps {
       display: grid;
@@ -581,5 +602,25 @@
     </div>
   </section>
 
+  <div class="lightbox" id="lightbox" onclick="this.classList.remove('active')">
+    <img id="lightbox-img" src="" alt="">
+    <div class="lightbox-caption" id="lightbox-cap"></div>
+  </div>
+
+  <script>
+    document.querySelectorAll('.gallery-item').forEach(function(item) {
+      item.addEventListener('click', function() {
+        var img = item.querySelector('img');
+        var cap = item.querySelector('figcaption strong');
+        document.getElementById('lightbox-img').src = img.src;
+        document.getElementById('lightbox-cap').textContent = cap ? cap.textContent : '';
+        document.getElementById('lightbox').classList.add('active');
+      });
+    });
+    document.addEventListener('keydown', function(e) {
+      if (e.key === 'Escape') document.getElementById('lightbox').classList.remove('active');
+    });
+  </script>
+
 </body>
 </html>