From 438f56f1af68a79d47f652c54c6a1f8999419db5 Mon Sep 17 00:00:00 2001
From: Aiirondev_dev <iron.ai.dev@gmail.com>
Date: Mon, 13 Jul 2026 09:34:55 +0000
Subject: [PATCH] Website/templates/dienstleistungen.html aktualisiert

---
 Website/templates/dienstleistungen.html | 143 +++++++++++-------------
 1 file changed, 68 insertions(+), 75 deletions(-)

diff --git a/Website/templates/dienstleistungen.html b/Website/templates/dienstleistungen.html
index 0135cd7..18e6f95 100644
--- a/Website/templates/dienstleistungen.html
+++ b/Website/templates/dienstleistungen.html
@@ -7,6 +7,7 @@
 {% block head %}
 {{ super() }}
 <style>
+/* --- Bestehendes CSS --- */
 .page-hero {
     padding: 1.4rem 1.5rem;
     border-radius: 20px;
@@ -25,73 +26,64 @@
     line-height: 1.65;
 }
 
-.service-grid {
-    margin-top: 1rem;
-    display: grid;
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-    gap: 0.85rem;
+/* --- NEU: Screenshot Toggle (Der Kompromiss) --- */
+.screenshot-toggle {
+    margin-top: 0.6rem;
+    margin-bottom: 1rem;
+    border: 1px solid #e0e8e4;
+    border-radius: 8px;
+    background: #fafcfb;
+    overflow: hidden;
+    transition: all 0.2s ease;
 }
 
-.service-card,
-.highlight {
-    border-radius: 18px;
-    border: 1px solid #d8dfd7;
-    background: #ffffff;
+.screenshot-toggle:hover {
+    border-color: #c9d6d0;
 }
 
-.service-card {
-    padding: 1rem;
-    box-shadow: 0 10px 26px rgba(25, 45, 41, 0.04);
-}
-
-.service-card h2 {
+.screenshot-toggle summary {
+    padding: 0.5rem 0.8rem;
+    cursor: pointer;
+    font-size: 0.9rem;
+    font-weight: 600;
     color: #235159;
-    margin-bottom: 0.45rem;
-    font-size: clamp(1.05rem, 1.8vw, 1.35rem);
+    list-style: none; /* Versteckt den Standard-Pfeil */
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    user-select: none;
 }
 
-.service-card p {
-    color: #496267;
-    line-height: 1.6;
+/* Eigener, cleaner Pfeil */
+.screenshot-toggle summary::before {
+    content: "▶";
+    font-size: 0.75rem;
+    color: #6a8a8f;
+    transition: transform 0.2s ease;
 }
 
-.highlight {
-    margin-top: 1rem;
-    padding: 1.2rem;
-    background: linear-gradient(135deg, #f6fbf7 0%, #eef5ef 100%);
+.screenshot-toggle[open] summary::before {
+    transform: rotate(90deg);
 }
 
-.highlight h2 {
-    color: #2a4d53;
-    margin-bottom: 0.4rem;
-    font-size: clamp(1.1rem, 2.2vw, 1.55rem);
+/* Safari Fix für den Pfeil */
+.screenshot-toggle summary::-webkit-details-marker {
+    display: none;
 }
 
-.bento {
-    margin-top: 1rem;
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 0.85rem;
-}
-
-.bento-item {
-    padding: 1rem;
-    border-radius: 16px;
-    border: 1px solid #d8dfd7;
+.screenshot-wrapper {
+    padding: 0.75rem;
     background: #ffffff;
+    border-top: 1px solid #e0e8e4;
 }
 
-.bento-item strong {
+.screenshot-wrapper img {
     display: block;
-    margin-bottom: 0.25rem;
-    color: #173f46;
-}
-
-@media (max-width: 900px) {
-    .service-grid,
-    .bento {
-        grid-template-columns: 1fr;
-    }
+    max-width: 100%;
+    height: auto;
+    border-radius: 6px;
+    border: 1px solid #d8dfd7;
+    box-shadow: 0 4px 12px rgba(23, 63, 70, 0.05);
 }
 </style>
 {% endblock %}
@@ -114,21 +106,7 @@
 
     <div class="module-content" id="moduleContent">
         <article id="mod1" class="module-panel hidden">
-            <h2>Inventarsystem</h2>
-            <p class="lede">Kurze Zusammenfassung des Moduls. (Platzhalter — du ersetzt den Inhalt später.)</p>
-            <h3>Was ist das?</h3>
-            <p>Beschreibe hier den Zweck, Zielgruppe und schnelle Anwendungsfälle.</p>
-            <h3>Schnellstart</h3>
-            <ol>
-                <li>Schritt 1 — Kurzer Tipp.</li>
-                <li>Schritt 2 — Konfigurationsempfehlung.</li>
-                <li>Schritt 3 — Prüfpunkte.</li>
-            </ol>
-            <h3>FAQs</h3>
-            <dl>
-                <dt>Frage: Wie mache ich X?</dt>
-                <dd>Antwort: Kurze Anleitung.</dd>
-            </dl>
+            <!-- Platzhalter Inventarsystem -->
         </article>
 
         <article id="mod2" class="module-panel">
@@ -139,13 +117,38 @@
             <ol>
                 <li>
                     <strong>Die Bibliotheks-Übersicht öffnen:</strong> Navigieren Sie im System zum Modul "Bibliothek". Hier finden Sie die zentrale Übersicht Ihres Medienbestandes. Über die Suchleiste können Sie schnell nach bestimmten Titeln oder ISBNs suchen. Zu jedem Buch sehen Sie auf einen Blick den Bestand, den Status (z. B. "Verfügbar") und haben direkten Zugriff auf Schnellaktionen wie "Ausleihen" oder "Bearbeiten".
+                    
+                    <!-- Hier ist der neue Aufklapp-Mechanismus für Bilder -->
+                    <details class="screenshot-toggle">
+                        <summary>🖼️ Screenshot ansehen</summary>
+                        <div class="screenshot-wrapper">
+                            <img src="Screenshot 2026-07-13 102127.jpg" alt="Übersicht des Bibliotheks-Moduls mit Suchleiste" loading="lazy">
+                        </div>
+                    </details>
                 </li>
+                
                 <li>
                     <strong>Buchdetails und Historie einsehen:</strong> Klicken Sie in der Medienliste bei einem beliebigen Buch auf den Button "Details". Es öffnet sich ein übersichtliches Fenster mit allen wichtigen Informationen zum Werk, wie der genauen Beschreibung, dem Regalort und der Kategorie. Im unteren Bereich dieses Fensters finden Sie die Ausleihhistorie, die Ihnen genau anzeigt, welcher Nutzer das Buch wann ausgeliehen hat.
+                    
+                    <details class="screenshot-toggle">
+                        <summary>🖼️ Screenshot ansehen</summary>
+                        <div class="screenshot-wrapper">
+                            <img src="Screenshot 2026-07-13 102134.jpg" alt="Pop-up Fenster mit Buchdetails und Ausleihhistorie" loading="lazy">
+                        </div>
+                    </details>
                 </li>
+                
                 <li>
                     <strong>Medien gezielt filtern und Listen exportieren:</strong> Um spezifische Listen zu erstellen, klicken Sie rechts neben der Suchleiste auf den Button "Filter". Daraufhin öffnen sich erweiterte Optionen, mit denen Sie den Bestand nach bestimmten Kriterien (z. B. Medientyp oder Verfügbarkeitsstatus) eingrenzen können. Zusätzlich finden Sie hier praktische Export-Buttons, um Ihre gefilterten Ergebnisse oder alle ausgeliehenen Bücher bequem als Excel-Tabelle herunterzuladen.
+                    
+                    <details class="screenshot-toggle">
+                        <summary>🖼️ Screenshot ansehen</summary>
+                        <div class="screenshot-wrapper">
+                            <img src="Screenshot 2026-07-13 102154.jpg" alt="Filter-Menü mit Export-Funktionen" loading="lazy">
+                        </div>
+                    </details>
                 </li>
+                
                 <li>
                     <strong>Den passenden Scanner-Modus wählen:</strong> Um die Ausleihe effizienter zu gestalten, können Sie das Verhalten des Barcode-Scanners anpassen. Klicken Sie auf das Dropdown-Menü über der Medienliste (Standardmäßig auf "Nur Ausweis erfassen"). Wählen Sie hier beispielsweise den "Schnellmodus: Ausweis + Mediencode" aus. Das System erwartet dann nacheinander den Scan des Schülerausweises und direkt danach den Buchcode, was den Ausleihprozess an der Theke deutlich beschleunigt.
                 </li>
@@ -173,16 +176,6 @@
                 </li>
             </ol>
         </article>
-
-        <article id="mod3" class="module-panel hidden">
-            <h2>Terminplaner</h2>
-            <p class="lede">Platzhaltertext für Modul 3.</p>
-        </article>
-
-        <article id="mod4" class="module-panel hidden">
-            <h2>Mail Add On</h2>
-            <p class="lede">Platzhaltertext für Modul 4.</p>
-        </article>
     </div>
 </section>