Update public/ki-kompetenzen.html

public/ki-kompetenzen.html

@@ -92,7 +92,7 @@ html lang="en">
     </section> -->
 
     <!--<section class="container"> -->
-      <div class="card">
+      <!--<div class="card">
         <h5 class="card-title">KNIGHT KI-Kompetenzmatrix</h5>
         <img src="assets/img/ki-kompetenz.png" class="card-img-top" alt="KI-Kompetenzmatrix">
         <div class="card-body">
@@ -100,7 +100,32 @@ html lang="en">
           <p>Das KI-Zertifikat ermöglicht den Nachweis erworbener Kompetenzen. Besonders aktive Teilnehmende werden im Zertifikat hervorgehoben.</p>
         </div>
       </div>
-    </section>
+    </section> -->
+    <div class="accordion" id="kiKompetenzAccordion">
+      <div class="accordion-item">
+        <h2 class="accordion-header" id="headingKompetenzMatrix">
+          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseKompetenzMatrix" aria-expanded="false" 
+          aria-controls="collapseKompetenzMatrix">
+            Übersicht der KI-Kompetenzmatrix  
+          </button>
+        </h2>
+        <div id="collapseKompetenzMatrix" class="accordion-collapse collapse" aria-labelledby="headingKompetenzMatrix" data-bs-parent="#kiKompetenzAccordion">
+          <div class="accordion-body">
+            <ul>
+              <li>Niveaubereiche</li>
+              <li>Fachkompetenz</li>
+              <li>Methodenkompetenz</li>
+              <li>Sozialkompetenz</li>
+              <li>Selbstkompetenz</li>
+              <li>Ethische Gestaltung und Reflexion</li>
+              <li>Grundkompetenz im Umgang mit KI-Systemen</li>
+              <li>Gestaltung des Kontextes von KI</li>
+            </ul>
+            <img src="pfad/zur/kompetenzmatrix.jpg" alt="KI-Kompetenzmatrix" class="img-fluid" />
+          </div>
+        </div>
+      </div>
+    </div>
 
     <section class="container my-5">
       <h2>Ergebnisse & Veröffentlichungen</h2>