Adding Slideshow for pictures in prompt examples

docs/anwendungen/index.md

@@ -23,6 +23,24 @@ Die folgenden Anwendungsbeispiele zeigen konkrete Einsatzmöglichkeiten für Kun
 
     <p><strong>Möglicher Prompt:</strong><br/>
     Erstellen Sie eine professionelle E-Mail-Antwort auf folgende Kundenanfrage: "Sehr geehrte Damen und Herren, ich habe am 15.05.2025 eine Bestellung mit der Nummer 12345 aufgegeben und möchte wissen, wann diese voraussichtlich geliefert wird."</p>
+
+    <div class="faq-slideshow">
+      <div class="faq-slideshow-container">
+        <div class="faq-slide">
+          <img src="/assets/images/screenshots/ki-gestuetzte-e-mail-erstellung-1.png" alt="KI-gestützte E-Mail-Erstellung Beispiel 1">
+        </div>
+        <div class="faq-slide">
+          <img src="/assets/images/screenshots/ki-gestuetzte-e-mail-erstellung-2.png" alt="KI-gestützte E-Mail-Erstellung Beispiel 2">
+        </div>
+      </div>
+      <div class="faq-slideshow-nav">
+        <button type="button" class="faq-slideshow-prev" aria-label="Vorheriges Bild"><i class="fa-sharp fa-thin fa-chevron-left"></i></button>
+        <button type="button" class="faq-slideshow-next" aria-label="Nächstes Bild"><i class="fa-sharp fa-thin fa-chevron-right"></i></button>
+      </div>
+      <div class="faq-slideshow-dots"></div>
+    </div>
+
+    
   </div>
 </div>
 
@@ -33,6 +51,21 @@ Die folgenden Anwendungsbeispiele zeigen konkrete Einsatzmöglichkeiten für Kun
 
     <p><strong>Möglicher Prompt:</strong><br/>
     Fassen Sie dieses Dokument in maximal 5 Sätzen zusammen: [Fügen Sie hier den Text des Dokuments ein].</p>
+
+    <div class="faq-slideshow">
+      <div class="faq-slideshow-container">
+        <div class="faq-slide">
+          <img src="/assets/images/screenshots/dokumentenanalyse-mit-ki.png" alt="Dokumentenanalyse mit KI Beispiel">
+        </div>
+      </div>
+      <div class="faq-slideshow-nav">
+        <button type="button" class="faq-slideshow-prev" aria-label="Vorheriges Bild"><i class="fa-sharp fa-thin fa-chevron-left"></i></button>
+        <button type="button" class="faq-slideshow-next" aria-label="Nächstes Bild"><i class="fa-sharp fa-thin fa-chevron-right"></i></button>
+      </div>
+      <div class="faq-slideshow-dots"></div>
+    </div>
+
+    
   </div>
 </div>
 
@@ -43,6 +76,30 @@ Die folgenden Anwendungsbeispiele zeigen konkrete Einsatzmöglichkeiten für Kun
 
     <p><strong>Möglicher Prompt:</strong><br/>
     Erstellen Sie eine detaillierte Schritt-für-Schritt-Anleitung zur Projektplanung, die folgende Punkte berücksichtigt: Zieldefinition, Aufgabenplanung, Ressourcenmanagement, Zeitplanung, Risikomanagement, Erfolgskontrolle.</p>
+
+    <div class="faq-slideshow">
+      <div class="faq-slideshow-container">
+        <div class="faq-slide">
+          <img src="/assets/images/screenshots/ki-gestuetzte-projektplanung-1.png" alt="KI-gestützte Projektplanung Beispiel 1">
+        </div>
+        <div class="faq-slide">
+          <img src="/assets/images/screenshots/ki-gestuetzte-projektplanung-2.png" alt="KI-gestützte Projektplanung Beispiel 2">
+        </div>
+        <div class="faq-slide">
+          <img src="/assets/images/screenshots/ki-gestuetzte-projektplanung-3.png" alt="KI-gestützte Projektplanung Beispiel 3">
+        </div>
+        <div class="faq-slide">
+          <img src="/assets/images/screenshots/ki-gestuetzte-projektplanung-4.png" alt="KI-gestützte Projektplanung Beispiel 4">
+        </div>
+      </div>
+      <div class="faq-slideshow-nav">
+        <button type="button" class="faq-slideshow-prev" aria-label="Vorheriges Bild"><i class="fa-sharp fa-thin fa-chevron-left"></i></button>
+        <button type="button" class="faq-slideshow-next" aria-label="Nächstes Bild"><i class="fa-sharp fa-thin fa-chevron-right"></i></button>
+      </div>
+      <div class="faq-slideshow-dots"></div>
+    </div>
+
+    
   </div>
 </div>
 

docs/assets/js/faq.js

@@ -38,6 +38,13 @@ function initFAQ() {
                         otherQuestion.nextElementSibling.classList.remove('active');
                     }
                 });
+
+                // Initialisiere Slideshows innerhalb der geöffneten Antwort
+                setTimeout(() => {
+                    if (typeof initSlideshows === 'function') {
+                        initSlideshows();
+                    }
+                }, 100);
             }
         });
     });

docs/assets/js/testimonials.js

@@ -1,3 +1,4 @@
+
 window.addEventListener('load', function() {
     // Testimonial-Wechsel-Funktionalität
     const testimonialImages = document.querySelectorAll('.satag--home-testimonial-image-wrapper');

mkdocs.yml

@@ -165,6 +165,7 @@ extra_javascript:
   - assets/js/testimonials.js
   - assets/js/wcag.js
   - assets/js/lightbox.js
+  - assets/js/slideshow.js
 
 
 # Navigation

overrides/assets/css/custom.scss

@@ -28,6 +28,7 @@
 @import 'modules/testimonials';
 @import "modules/faq";
 @import "modules/lightbox";
+@import "modules/slideshow";
 @import "modules/blog";
 
 

overrides/assets/css/modules/faq.scss

@@ -8,7 +8,7 @@
   overflow: hidden;
   border: 1px solid #d9d9d9;
   padding: 15px 20px;
-  font-size: 18px;
+  //font-size: 18px;
 }
 
 .custom-faq-question {
@@ -23,7 +23,7 @@
 
 .custom-faq-question::after {
   content: "\f078";
-  font-family: 'Font Awesome 6 Pro', sans-serif;
+  font-family: 'Font Awesome 6 Sharp', sans-serif;
   font-weight: 100;
   font-size: 1rem;
   position: absolute;
@@ -34,7 +34,7 @@
 
 .custom-faq-question.active::after {
   content: "\f077";
-  font-family: 'Font Awesome 6 Pro', sans-serif;
+  font-family: 'Font Awesome 6 Sharp', sans-serif;
   font-weight: 100;
   font-size: 1rem;
 
@@ -54,6 +54,5 @@
 
 .custom-faq-answer.active {
   padding: 0;
-  max-height: 1000px; /* Großer Wert, um sicherzustellen, dass der Inhalt vollständig angezeigt wird */
+  max-height: 3000px; /* Größerer Wert, um sicherzustellen, dass der Inhalt vollständig angezeigt wird */
 }
-