Add responsive styles and improve FAQ script handling

Introduced mobile and medium responsiveness in stylesheets for better layout on smaller screens. Adjusted FAQ script to properly remove duplicate event listeners and ensure functionality remains smooth on initialization.

docs/assets/javascript/faq.js

@@ -1,4 +1,5 @@
-document.addEventListener('DOMContentLoaded', function() {
+// Funktion zur Initialisierung der FAQ-Funktionalität
+function initFAQ() {
     // Finde alle FAQ-Fragen
     const faqQuestions = document.querySelectorAll('.custom-faq-question');
 
@@ -9,8 +10,18 @@ document.addEventListener('DOMContentLoaded', function() {
 
     console.log('Benutzerdefinierte FAQ-Elemente gefunden:', faqQuestions.length);
 
-    // Füge Event-Listener zu jeder Frage hinzu
+    // Entferne zuerst alle bestehenden Event-Listener, um Duplikate zu vermeiden
     faqQuestions.forEach(question => {
+        // Klonen des Elements, um alle Event-Listener zu entfernen
+        const newQuestion = question.cloneNode(true);
+        question.parentNode.replaceChild(newQuestion, question);
+    });
+
+    // Hole die aktualisierten Elemente nach dem Klonen
+    const updatedFaqQuestions = document.querySelectorAll('.custom-faq-question');
+
+    // Füge Event-Listener zu jeder Frage hinzu
+    updatedFaqQuestions.forEach(question => {
         question.addEventListener('click', function() {
             // Toggle active class auf der Frage
             this.classList.toggle('active');
@@ -21,7 +32,7 @@ document.addEventListener('DOMContentLoaded', function() {
 
             // Wenn diese Frage geöffnet wurde, schließe alle anderen
             if (this.classList.contains('active')) {
-                faqQuestions.forEach(otherQuestion => {
+                updatedFaqQuestions.forEach(otherQuestion => {
                     if (otherQuestion !== this && otherQuestion.classList.contains('active')) {
                         otherQuestion.classList.remove('active');
                         otherQuestion.nextElementSibling.classList.remove('active');
@@ -32,4 +43,52 @@ document.addEventListener('DOMContentLoaded', function() {
     });
 
     console.log('Benutzerdefinierte FAQ-Funktionalität initialisiert');
+}
+
+// Führe die Initialisierung beim ersten Laden der Seite aus
+document.addEventListener('DOMContentLoaded', initFAQ);
+
+// Führe die Initialisierung aus, wenn der Inhalt der Seite durch MkDocs aktualisiert wird
+document.addEventListener('DOMContentSwap', initFAQ);
+
+// Führe die Initialisierung aus, wenn die Seite über den Material for MkDocs-Router aktualisiert wird
+document.addEventListener('mdContentChanged', initFAQ);
+
+// Führe die Initialisierung aus, wenn der Inhalt der Seite durch andere Frameworks aktualisiert wird
+// MutationObserver, um Änderungen im DOM zu überwachen
+const observer = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+        if (mutation.addedNodes && mutation.addedNodes.length > 0) {
+            // Prüfe, ob FAQ-Elemente hinzugefügt wurden
+            for (let i = 0; i < mutation.addedNodes.length; i++) {
+                const node = mutation.addedNodes[i];
+                if (node.nodeType === 1 && (node.classList?.contains('custom-faq-item') ||
+                    node.querySelector?.('.custom-faq-item'))) {
+                    // FAQ-Elemente gefunden, initialisiere die Funktionalität
+                    setTimeout(initFAQ, 100); // Kurze Verzögerung, um sicherzustellen, dass alles geladen ist
+                    break;
+                }
+            }
+        }
+    });
 });
+
+// Starte die Beobachtung des Dokuments
+observer.observe(document.body, {
+    childList: true,
+    subtree: true
+});
+
+// Zusätzlicher Event-Listener für dynamisch geladene Inhalte
+window.addEventListener('load', function() {
+    // Verzögerte Initialisierung, um sicherzustellen, dass alle Inhalte geladen sind
+    setTimeout(initFAQ, 500);
+});
+
+// Für Material for MkDocs spezifische Ereignisse
+if (typeof document$.subscribe === 'function') {
+    document$.subscribe(function() {
+        // Verzögerte Initialisierung, um sicherzustellen, dass alle Inhalte geladen sind
+        setTimeout(initFAQ, 100);
+    });
+}