Update public/index.html

public/index.html

@@ -419,10 +419,15 @@ body {
       <!-- Section Title -->
       <div class="container section-title" data-aos="fade-up">
          <h2>Arbeitspakete</h2>
-         <p> Sieben Arbeitspakete bilden das Fundament unseres Forschungsvorhabens. Sie sind interdisziplinär angelegt und eng miteinander verzahnt.</p>
+         <p> Die Arbeitspakete bilden das Fundament unseres Forschungsvorhabens.</p>
         <!--<p>Check Our Wok Packages<br></p>-->
       </div><!-- End Section Title -->
 
+      
+
+      <div class="container">
+
+
         <!-- themen zu addieren juni 25-->
               <!-- Themenbuttons -->
                 <div class="topic-buttons">
@@ -466,8 +471,6 @@ body {
                 </div>
       <!-- end themen -->
 
-      <div class="container">
-
         <div class="row gy-4">
           
           <!-- AP1  -->
@@ -1505,6 +1508,34 @@ Implementations, and Perspectives
       });
     </script>
 
+
+     <!-- Script für themen -->
+          <script>
+            function toggleTopic(topicId, btn) {
+              // Alle anderen Texte ausblenden
+              document.querySelectorAll('.topic-details').forEach(el => el.style.display = 'none');
+              // Aktuellen Text anzeigen
+              const topicEl = document.getElementById('topic-' + topicId);
+              topicEl.style.display = 'block';
+
+              // Button-Status aktualisieren
+              document.querySelectorAll('.topic-buttons button').forEach(b => b.classList.remove('active'));
+              btn.classList.add('active');
+            }
+
+            function resetTopic() {
+              document.querySelectorAll('.topic-details').forEach(el => el.style.display = 'none');
+              document.querySelectorAll('.topic-buttons button').forEach(b => b.classList.remove('active'));
+            }
+
+            function toggleDetails(id) {
+              document.querySelectorAll('.details').forEach(el => {
+                el.style.display = (el.id === id && el.style.display !== 'block') ? 'block' : 'none';
+              });
+            }
+          </script>
+
+
 </body>