Update public/ki-kompetenzen.html

public/ki-kompetenzen.html

@@ -52,8 +52,21 @@ html lang="en">
       <p>Als zentrales Instrument erlaubt sie es, <strong>Kompetenzlücken gezielt zu identifizieren</strong> und diese durch individuelle Weiterbildung zu schließen. Sie ist gleichzeitig die Basis für das an der HFT entwickelte <strong>KI-Bildungszertifikat</strong>, das über das Projekt hinaus verfügbar bleibt.</p>
 
       <div class="image-frame">
-        <img src="assets/img/KI-KMatrix.png" alt="Darstellung der KI-Kompetenzmatrix" class="img-fluid">
-      </div>
+            <img id="kiMatrixImg" src="assets/img/KI-KMatrix.png" alt="KI-Kompetenzmatrix" style="cursor: pointer; max-width: 100%; height: auto;">
+          </div>
+
+          <div id="imgOverlay" style="
+            display:none;
+            position: fixed;
+            top:0; left:0; right:0; bottom:0;
+            background-color: rgba(0,0,0,0.8);
+            justify-content: center;
+            align-items: center;
+            z-index: 1000;
+          ">
+            <img id="largeImg" src="assets/img/KI-KMatrix.png" alt="KI-Kompetenzmatrix groß" style="max-width: 90%; max-height: 90%; box-shadow: 0 0 15px white; cursor: pointer;">
+          </div>
+
       <p class="fst-italic text-center">Die nachfolgende Darstellung dient dazu, die KI-Kompetenzmatrix verständlich und anschaulich aufzubereiten.</p>
     </article>
 
@@ -129,6 +142,20 @@ html lang="en">
   </footer>
 
   <script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
+  <script>
+  const img = document.getElementById('kiMatrixImg');
+  const overlay = document.getElementById('imgOverlay');
+  const largeImg = document.getElementById('largeImg');
+
+  img.addEventListener('click', () => {
+    overlay.style.display = 'flex';
+  });
+
+  overlay.addEventListener('click', () => {
+    overlay.style.display = 'none';
+  });
+</script>
+
 </body>
 
 </html>