{% extends "base.html" %}

{% set meta_description = "Invario Leistungen für Schulen: Inventarverwaltung, Bibliothekssystem, Support, Sicherheit und Einführung ohne Installation. Klar für Schulen und Schulträger gegliedert." %}

{% block title %}Leistungen für Schulen | Invario{% endblock %}

{% block head %}
{{ super() }}
<style>
/* --- Bestehendes CSS --- */
.page-hero {
    padding: 1.4rem 1.5rem;
    border-radius: 20px;
    border: 1px solid #d6dfda;
    background: linear-gradient(135deg, #ffffff 0%, #f5f8f4 100%);
    box-shadow: 0 16px 34px rgba(25, 45, 41, 0.06);
}

.page-hero h1 {
    margin-bottom: 0.4rem;
}

.page-hero p {
    max-width: 72ch;
    color: #496267;
    line-height: 1.65;
}

/* --- 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;
}

.screenshot-toggle:hover {
    border-color: #c9d6d0;
}

.screenshot-toggle summary {
    padding: 0.5rem 0.8rem;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    color: #235159;
    list-style: none; /* Versteckt den Standard-Pfeil */
    display: flex;
    align-items: center;
    gap: 0.5rem;
    user-select: none;
}

/* Eigener, cleaner Pfeil */
.screenshot-toggle summary::before {
    content: "▶";
    font-size: 0.75rem;
    color: #6a8a8f;
    transition: transform 0.2s ease;
}

.screenshot-toggle[open] summary::before {
    transform: rotate(90deg);
}

/* Safari Fix für den Pfeil */
.screenshot-toggle summary::-webkit-details-marker {
    display: none;
}

.screenshot-wrapper {
    padding: 0.75rem;
    background: #ffffff;
    border-top: 1px solid #e0e8e4;
}

.screenshot-wrapper img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    border: 1px solid #d8dfd7;
    box-shadow: 0 4px 12px rgba(23, 63, 70, 0.05);
}

.download-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: #eef5ef;
    color: #173f46;
    border: 1px solid #d8dfd7;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.2s;
}

.download-btn:hover {
    background: #dceae0;
}
</style>
{% endblock %}

{% block content %}
<section class="page-hero">
    <h1>Module &amp; Leitfäden</h1>
    <p>Diese Seite stellt die Produkt Suite der Invario UG vollständig dar und gibt nützliche Tipps.</p>
</section>

<section class="module-shell" aria-label="Module Übersicht">
    <div class="module-nav" role="navigation" aria-label="Module Navigation">
        <ul>
            <li data-module="mod1"><a href="#mod1">Inventarsystem</a></li>
            <li data-module="mod2"><a href="#mod2">Bibliothekssystem</a></li>
            <li data-module="mod3"><a href="#mod3">Terminplaner</a></li>
            <li data-module="mod4"><a href="#mod4">Mail Add On</a></li>
        </ul>
    </div>

    <div class="module-content" id="moduleContent">
        <article id="mod1" class="module-panel">
            <h2>Inventarsystem</h2>
            <p class="lede">Verwalten und überwachen Sie Ihr gesamtes schulisches Inventar: Von der schnellen Suche und Detailansicht bis hin zur revisionssicheren Defektverwaltung.</p>
            
            <h3>Suchen, Filtern und Ansicht (Navigation)</h3>
            <ol>
                <li>
                    <strong>Präzise Filter- und Suchfunktionen anwenden:</strong> Um die Suche nach Artikeln im Inventar zu verfeinern, bietet die Suchmaske interaktive Dropdown-Menüs. Über das Dropdown „Schlagwort“ können Sie gezielt nach festgelegten Tags wie „Klasse 1“ oder „Geographie“ filtern. Ein weiteres Menü über dem Titelsuchfeld erlaubt es, den grundsätzlichen Status der angezeigten Objekte einzugrenzen (Auswahl zwischen „Alle Objekte“, „Nur Ausleihbare“ oder „Nur gesperrte/defekte“). Zusätzlich können Sie über ein kleines Zahnrad- oder Einstellungs-Icon neben der Suchleiste exakt bestimmen, in welchen Datenfeldern (z. B. nur im „Titel“ oder auch in der „Beschreibung“) der eingegebene Text gesucht werden soll.
                    
                    <details class="screenshot-toggle">
                        <summary>🖼️ Screenshots ansehen</summary>
                        <div class="screenshot-wrapper">
                            <img src="{{ url_for('static', filename='images/Bildschirmfoto zu 2026-07-30 12-08-11.png') }}" alt="Suchmaske Dropdowns" loading="lazy" style="margin-bottom: 1rem;">
                        </div>
                    </details>
                </li>
                
                <li>
                    <strong>Ansichtsmodus der Inventarliste wechseln:</strong> Das System bietet unterschiedliche Darstellungsformen für die durchsuchten Inventarobjekte. Standardmäßig werden die Ergebnisse in einer Kachelansicht präsentiert, die das Artikelbild, wichtige Kurzinfos und Schnellzugriffs-Buttons direkt anzeigt. Wenn Sie mit der Maus über ein Objekt fahren oder dieses auswählen, wird dies durch einen grünen Rahmen visuell hervorgehoben. Oben rechts befinden sich zwei kleine Icons, mit denen Sie das Layout umstellen können. Ein Klick darauf wechselt die Ansicht von den Kacheln in ein kompaktes, tabellarisches Listenformat, in dem alle Metadaten (Name, Ort, System/Bereich, etc.) zeilenweise nebeneinander dargestellt werden.
                    
                    <details class="screenshot-toggle">
                        <summary>🖼️ Screenshots ansehen</summary>
                        <div class="screenshot-wrapper">
                            <img src="{{ url_for('static', filename='images/Bildschirmfoto zu 2026-07-30 12-08-06.png') }}" alt="Kachelansicht Inventar" loading="lazy" style="margin-bottom: 1rem;">
                            <img src="{{ url_for('static', filename='images/Bildschirmfoto zu 2026-07-30 12-08-29.png') }}" alt="Objekt in der Kachelansicht fokussiert" loading="lazy" style="margin-bottom: 1rem;">
                            <img src="{{ url_for('static', filename='images/Bildschirmfoto zu 2026-07-30 12-08-39.png') }}" alt="Kompaktes Listenformat" loading="lazy">
                        </div>
                    </details>
                </li>
            </ol>

            <h3>Objektdetails und Aktionen</h3>
            <ol start="3">
                <li>
                    <strong>Objekte identifizieren und Detailinformationen abrufen:</strong> In der Übersicht "Inventar Objekte" lässt sich ein spezifischer Artikel durch Anklicken visuell markieren (erkennbar am grünen Rahmen und der hellgelben Hervorhebung). Durch das Öffnen des Artikels gelangen Sie in die detaillierte Modal-Ansicht. Diese Ansicht zentriert das Produktbild und listet alle Stammdaten übersichtlich untereinander auf, was besonders für eine schnelle, ablenkungsfreie Kontrolle der Artikeldaten vor einer Ausleihe oder Bearbeitung nützlich ist.
                    
                    <details class="screenshot-toggle">
                        <summary>🖼️ Screenshots ansehen</summary>
                        <div class="screenshot-wrapper">
                            <img src="{{ url_for('static', filename='images/Bildschirmfoto zu 2026-07-30 12-07-37.png') }}" alt="Visuelle Hervorhebung eines Objekts" loading="lazy" style="margin-bottom: 1rem;">
                            <img src="{{ url_for('static', filename='images/Bildschirmfoto zu 2026-07-30 12-07-41_2.png') }}" alt="Detail-Informationen aufrufen" loading="lazy">
                        </div>
                    </details>
                </li>
                
                <li>
                    <strong>Objektdetails im Vollbild einsehen:</strong> Wenn Sie weitere Informationen zu einem spezifischen Artikel benötigen, öffnet sich eine fokussierte Detailansicht in einem Pop-up-Fenster. Diese Maske präsentiert das Objektbild (inklusive Navigationspfeilen zum Durchschalten, falls mehrere Bilder vorhanden sind) sowie alle hinterlegten Stammdaten in einer übersichtlichen Liste (z. B. Ort, System/Bereich, Anschaffungspreis). Am unteren Rand des Fensters ist zudem das Feld für die ausführliche Textbeschreibung des Artikels vollständig einsehbar.
                    
                    <details class="screenshot-toggle">
                        <summary>🖼️ Screenshot ansehen</summary>
                        <div class="screenshot-wrapper">
                            <img src="{{ url_for('static', filename='images/Bildschirmfoto zu 2026-07-30 12-07-41.png') }}" alt="Vollbild der Objektdetails" loading="lazy">
                        </div>
                    </details>
                </li>

                <li>
                    <strong>Verfügbarkeit prüfen, Historie einsehen und Aktionen ausführen:</strong> Dieses erweiterte Aktions-Fenster bietet verschiedene Verwaltungswerkzeuge für ein Einzelobjekt. Im oberen Bereich können Sie unter „Defekthistorie (Letzte 5)“ vergangene Meldungen einsehen oder über einen Button einen neuen Defekt melden. Darunter befindet sich der Bereich „Verfügbarkeit prüfen“. Ein Klick auf „Kalender anzeigen“ klappt eine interaktive Monatsansicht auf, um Belegungen zu prüfen. Im unteren Abschluss des Fensters finden Sie eine Reihe farbiger Aktions-Buttons: Hierüber lässt sich der Artikel unter anderem direkt „Ausleihen“, „Reservieren“, in den Status „In Reparatur“ oder „Defekt/...“ versetzen oder aus dem System „Löschen“.
                    
                    <details class="screenshot-toggle">
                        <summary>🖼️ Screenshots ansehen</summary>
                        <div class="screenshot-wrapper">
                            <img src="{{ url_for('static', filename='images/Bildschirmfoto zu 2026-07-30 12-07-46.png') }}" alt="Defekthistorie einsehen" loading="lazy" style="margin-bottom: 1rem;">
                            <img src="{{ url_for('static', filename='images/Bildschirmfoto zu 2026-07-30 12-07-58.png') }}" alt="Verfügbarkeit über Kalender prüfen" loading="lazy" style="margin-bottom: 1rem;">
                            <img src="{{ url_for('static', filename='images/Bildschirmfoto zu 2026-07-30 12-08-03.png') }}" alt="Aktions-Buttons" loading="lazy">
                        </div>
                    </details>
                </li>
            </ol>

            <h3>Defektverwaltung und Administration</h3>
            <ol start="6">
                <li>
                    <strong>Defekte Items überwachen:</strong> Die Ansicht "Defekte Items" dient als zentrales Dashboard für alle Artikel, die als beschädigt gemeldet wurden oder sich in Reparatur befinden. Die Maske bietet eine Suchleiste, um gezielt nach dem Namen, Code, Typ oder Aufbewahrungsort eines defekten Objekts zu suchen. Die darunterliegende Tabelle ist strukturiert nach "Bild", "Status", "Fehlerbeschreibung" sowie "Aktionen" und "Aktiv seit", um den Reparatur- oder Ersatzprozess transparent nachverfolgen zu können.
                    
                    <details class="screenshot-toggle">
                        <summary>🖼️ Screenshot ansehen</summary>
                        <div class="screenshot-wrapper">
                            <img src="{{ url_for('static', filename='images/Bildschirmfoto zu 2026-07-30 12-07-33.png') }}" alt="Dashboard für defekte Items" loading="lazy">
                        </div>
                    </details>
                </li>
                
                <li>
                    <strong>Revisionssichere Audit-Reports analysieren:</strong> Das System exportiert bei Bedarf revisionssichere Protokolle aller Systemvorgänge als PDF-Dokument. Der Bericht enthält eine "Prüfsummary zur Audit-Chain", welche die Integrität bestätigt und die Häufigkeit bestimmter Ereignisse aggregiert (beispielsweise Einträge für Rückgaben oder gemeldete Schäden). Die detaillierte Liste darunter schlüsselt jedes Ereignis mit einem Zeitstempel, dem ausführenden Benutzer, der IP-Adresse und einem kryptografischen Hash-Wert ab. Für formelle Prüfungen schließt das Dokument mit Unterschriftsfeldern für die Schulleitung und den IT-Beauftragten.
                    <br><br>
                    <a href="{{ url_for('static', filename='downloads/audit-official-report-20260730-100236.pdf') }}" 
                       class="download-btn" target="_blank" rel="noopener noreferrer">
                       📥 Audit-Report herunterladen (PDF)
                    </a>
                </li>
                
                <li>
                    <strong>Schadensersatzrechnungen generieren:</strong> Wenn ein Artikel irreparabel beschädigt wird, kann das System eine Rechnung zur Schadensregulierung erstellen. Das Dokument weist einen spezifischen Rechnungsbetrag aus, der dem verantwortlichen Benutzer in Rechnung gestellt wird. Die Schadensbeschreibung auf dem Dokument vermerkt transparent, dass das Objekt während der Ausleihe beschädigt oder zerstört wurde, und fordert dazu auf, den Betrag bei der Verwaltung zu begleichen.
                    <br><br>
                    <a href="{{ url_for('static', filename='downloads/rechnung_INV-20260730-100002-577983.pdf') }}" 
                       class="download-btn" target="_blank" rel="noopener noreferrer">
                       📥 Muster-Rechnung herunterladen (PDF)
                    </a>
                </li>
            </ol>
        </article>

        <article id="mod2" class="module-panel">
            <h2>Bibliothekssystem</h2>
            <p class="lede">Digitalisieren Sie Ihre Schulbibliothek: Verwalten Sie Ihren Medienbestand, Ausleihen und Bibliotheksausweise zentral, schnell und intuitiv.</p>
            
            <h3>Medienverwaltung & Ausleihe</h3>
            <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="{{ url_for('static', filename='images/Screenshot 2026-07-13 102127.png') }}" 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="{{ url_for('static', filename='images/Screenshot 2026-07-13 102134.png') }}" 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="{{ url_for('static', filename='images/Screenshot 2026-07-13 102154.png') }}" 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.

                    <details class="screenshot-toggle">
                        <summary>🖼️ Screenshot ansehen</summary>
                        <div class="screenshot-wrapper">
                            <img src="{{ url_for('static', filename='images/Screenshot 2026-07-13 102200.png') }}" alt="Filter-Menü mit Export-Funktionen" loading="lazy">
                        </div>
                    </details>
                </li>
                <li>
                    <strong>Neue Bücher anlegen oder gesammelt importieren:</strong> Wenn Sie neue Medien ins System aufnehmen möchten, wechseln Sie in den Bereich zum Hochladen von Büchern. Für große Mengen nutzen Sie ganz oben den "Excel-Import", um eine vorgefertigte Liste direkt einzulesen. Für einzelne Bücher füllen Sie das Formular darunter aus. Besonders praktisch: Scannen oder tippen Sie unten im Formular die ISBN ein und klicken Sie auf "Informationen abrufen", um Buchdaten automatisch ausfüllen zu lassen. Legen Sie abschließend noch fest, ob der Artikel im Voraus reservierbar sein soll.

                    <details class="screenshot-toggle">
                        <summary>🖼️ Screenshot ansehen</summary>
                        <div class="screenshot-wrapper">
                            <img src="{{ url_for('static', filename='images/Screenshot 2026-07-13 102214.png') }}" alt="Neue Bücher anlegen oder gesammelt importieren" loading="lazy">
                        </div>
                    </details>
                </li>
                <li>
                    <strong>Rückgaben verwalten und Schäden dokumentieren:</strong> Um ausgeliehene Medien zurückzunehmen, öffnen Sie die Ansicht "Bibliotheks-Ausleihen". Hier sehen Sie alle aktuell verliehenen Bücher. Klicken Sie bei Rückgabe einfach auf "Zurücksetzen", um das Buch wieder als "Verfügbar" im System zu vermerken. Sollte ein Medium beschädigt zurückgegeben werden, klicken Sie auf "Schaden melden". Das System markiert das Element dann deutlich mit einem roten Warnhinweis. Sobald das Buch repariert wurde, können Sie es über den neuen Button "Als repariert markieren" wieder regulär für den Verleih freigeben.
                
                    <details class="screenshot-toggle">
                        <summary>🖼️ Screenshot ansehen</summary>
                        <div class="screenshot-wrapper">
                            <img src="{{ url_for('static', filename='images/Screenshot 2026-07-13 102223.png') }}" alt="Rückgaben verwalten und Schäden dokumentieren" loading="lazy">
                        </div>
                    </details>
                </li>
            </ol>

            <h3>Nutzer, Stammdaten & System</h3>
            <ol start="7">
                <li>
                    <strong>Bibliotheksausweise anlegen und verwalten:</strong> In der Ausweisverwaltung können Sie die Ausleihberechtigungen für Ihre Schüler organisieren. Sie können einzelne Ausweise manuell anlegen oder bestehende bearbeiten, indem Sie die Ausweis-ID (Barcode-Nummer), den Namen, die Klasse und die gewünschte Standard-Ausleihdauer eintragen. Alternativ bietet das System oben einen praktischen Excel-Import, um ganze Klassenlisten auf einmal einzulesen. In der Liste unten lassen sich alle Ausweise verwalten oder über den Button "PDF" direkt als druckfertige Dokumente (inklusive scanbarem Barcode) exportieren.

                    <a href="{{ url_for('download_sample') }}" 
                       class="download-btn" 
                           download>
                       📥 Muster-Ausweis herunterladen (PDF)
                    </a>
                    <details class="screenshot-toggle">
                        <summary>🖼️ Screenshot ansehen</summary>
                        <div class="screenshot-wrapper">
                            <img src="{{ url_for('static', filename='images/Screenshot 2026-07-13 102331.png') }}" alt="Bibliotheksausweise anlegen und verwalten 1" loading="lazy">
                        </div>
                    </details>
                    <details class="screenshot-toggle">
                        <summary>🖼️ Screenshot ansehen</summary>
                        <div class="screenshot-wrapper">
                            <img src="{{ url_for('static', filename='images/Screenshot 2026-07-13 102335.png') }}" alt="Bibliotheksausweise anlegen und verwalten 2" loading="lazy">
                        </div>
                    </details>
                </li>
                <li>
                    <strong>Schulstammdaten für offizielle Dokumente hinterlegen:</strong> Damit alle Berichte, PDFs und exportierten Ausweise direkt richtig zugeordnet werden können, rufen Sie die "Schulstammdaten" auf. Hier tragen Sie zentrale Basisdaten wie den Schulnamen, die Adresse und einen Ansprechpartner ein. Zudem können Sie hier Ihr Schullogo hochladen. Das System zeigt Ihnen in der "Aktuellen Vorschau" auf der rechten Seite sofort an, wie diese Angaben später auf amtlichen Dokumenten oder Ausweisen erscheinen werden.
                
                    <details class="screenshot-toggle">
                        <summary>🖼️ Screenshot ansehen</summary>
                        <div class="screenshot-wrapper">
                            <img src="{{ url_for('static', filename='images/Screenshot 2026-07-13 102343.png') }}" alt="Schulstammdaten für offizielle Dokumente hinterlegen" loading="lazy">
                        </div>
                    </details>
                </li>
                <li>
                    <strong>Benutzermenü und Kontoeinstellungen öffnen:</strong> Klicken Sie in der dunklen Hauptleiste ganz rechts auf Ihren Benutzernamen (z. B. "admin"), um das Dropdown-Menü zu öffnen. Dieses kleine Menü dient als Schnellzugriff für Ihre Kontoverwaltung. Von hier aus können Sie mit nur einem Klick Ihr Passwort ändern, das System über "Logout" sicher verlassen oder direkt in die Übersicht Ihrer ungelesenen Systemmeldungen ("Benachrichtigungen") springen.
                
                    <details class="screenshot-toggle">
                        <summary>🖼️ Screenshot ansehen</summary>
                        <div class="screenshot-wrapper">
                            <img src="{{ url_for('static', filename='images/Screenshot 2026-07-13 102424.png') }}" alt="Benutzermenü und Kontoeinstellungen" loading="lazy">
                        </div>
                    </details>
                </li>
                <li>
                    <strong>Benachrichtigungen und System-Hinweise prüfen:</strong> Das Benachrichtigungs-Modul ist Ihre zentrale Anlaufstelle für wichtige Ereignisse im laufenden Betrieb. Hier informiert Sie die Software proaktiv über Handlungsbedarf – zum Beispiel, wenn ein Nutzer ein beschädigtes Buch gemeldet hat oder Rückgabe-Erinnerungen anstehen. Sobald Sie eine Meldung geprüft und das Problem gelöst haben, klicken Sie einfach auf "Als gelesen", um den Hinweis zu archivieren und Ihre Übersicht stets aufgeräumt zu halten.

                    <details class="screenshot-toggle">
                        <summary>🖼️ Screenshot ansehen</summary>
                        <div class="screenshot-wrapper">
                            <img src="{{ url_for('static', filename='images/Screenshot 2026-07-13 102428.png') }}" alt="Benachrichtigungen und System-Hinweise" loading="lazy">
                        </div>
                    </details>
                </li>
            </ol>
        </article>

        <article id="mod3" class="module-panel hidden">
            <h2>Terminplaner</h2>
            <p class="lede">Planen und verwalten Sie Schultermine, Sprechstunden oder Elternsprechtage effizient – inklusive digitaler Buchungsstrecke, QR-Code-Einladungen und iCal-Export.</p>
            
            <h3>Modul-Dashboard &amp; Konfiguration</h3>
            <ol>
                <li>
                    <strong>Terminplaner-Dashboard aufrufen:</strong> Das Dashboard bildet den zentralen Einstiegspunkt in das Modul „Terminplaner“. Über drei Kacheln („Kalender“, „Neue Planung“, „Buchungslink“) können Administratoren direkt in die Kalenderansicht wechseln, eine neue Terminplanung konfigurieren oder Links abrufen. Im unteren Bereich zeigt die Maske den aktuellen Anmeldestatus sowie eine Liste kommender Termine an.
                    
                    <details class="screenshot-toggle">
                        <summary>🖼️ Screenshot ansehen</summary>
                        <div class="screenshot-wrapper">
                            <img src="{{ url_for('static', filename='images/Bildschirmfoto zu 2026-07-30 13-29-35.png') }}" alt="Terminplaner-Dashboard" loading="lazy">
                        </div>
                    </details>
                </li>
                
                <li>
                    <strong>Terminplan erstellen und Zeitfenster festlegen:</strong> In dieser Administrationsmaske richten Sie neue Terminveranstaltungen (z. B. Elternsprechtage) ein. Sie vergeben einen Titel, legen den Datumszeitraum fest und definieren die täglichen Arbeits- und Pausenzeiten („Standard-Start“, „Standard-Ende“, „Pause-Start“, „Pause-Ende“). Das System berechnet daraus automatisch die verfügbaren Zeitfenster (z. B. 15-Minuten-Slots) und zeigt die Gesamtzahl der generierten Termine an. Zudem können benutzerdefinierte Abfragefelder (wie Vorname, Nachname, E-Mail-Adresse) aktiviert, Datenschutz-Einwilligungen eingebunden und der aktive Buchungs-Link generiert werden.
                    
                    <details class="screenshot-toggle">
                        <summary>🖼️ Screenshots ansehen</summary>
                        <div class="screenshot-wrapper">
                            <img src="{{ url_for('static', filename='images/Bildschirmfoto zu 2026-07-30 13-29-40.png') }}" alt="Terminplan erstellen 1" loading="lazy" style="margin-bottom: 1rem;">
                            <img src="{{ url_for('static', filename='images/Bildschirmfoto zu 2026-07-30 13-29-42.png') }}" alt="Terminplan erstellen 2" loading="lazy" style="margin-bottom: 1rem;">
                            <img src="{{ url_for('static', filename='images/Bildschirmfoto zu 2026-07-30 13-30-07.png') }}" alt="Zeitfenster Definition" loading="lazy" style="margin-bottom: 1rem;">
                            <img src="{{ url_for('static', filename='images/Bildschirmfoto zu 2026-07-30 13-30-13.png') }}" alt="Benutzerdefinierte Felder" loading="lazy" style="margin-bottom: 1rem;">
                            <img src="{{ url_for('static', filename='images/Bildschirmfoto zu 2026-07-30 13-30-30.png') }}" alt="Datenschutz-Einwilligung" loading="lazy" style="margin-bottom: 1rem;">
                            <img src="{{ url_for('static', filename='images/Bildschirmfoto zu 2026-07-30 13-30-35.png') }}" alt="Aktiver Buchungs-Link" loading="lazy">
                        </div>
                    </details>
                </li>
            </ol>

            <h3>Verwaltung &amp; Kalender-Überwachung</h3>
            <ol start="3">
                <li>
                    <strong>Gebuchte Termine verwalten und exportieren:</strong> Diese Ansicht fasst alle Buchungen einer bestimmten Terminplanung zusammen. Die linke Infokarte zeigt Eckdaten wie den Zeitraum und die Slot-Dauer. Im rechten Bereich werden die eingegangenen Buchungen in einer Tabelle dargestellt. Über eine Suchleiste lässt sich gezielt nach Eintragsdaten filtern, und über die entsprechende Schaltfläche können die Buchungsdaten exportiert werden.
                    
                    <details class="screenshot-toggle">
                        <summary>🖼️ Screenshots ansehen</summary>
                        <div class="screenshot-wrapper">
                            <img src="{{ url_for('static', filename='images/Bildschirmfoto zu 2026-07-30 13-30-39.png') }}" alt="Buchungsübersicht und Tabelle" loading="lazy" style="margin-bottom: 1rem;">
                            <img src="{{ url_for('static', filename='images/Bildschirmfoto zu 2026-07-30 13-32-11.png') }}" alt="Export und Filter" loading="lazy">
                        </div>
                    </details>
                </li>

                <li>
                    <strong>Schulstunden-Terminplan im Kalender überwachen:</strong> In der Kalenderübersicht des Administrationsbereichs werden alle erstellten Terminraster in einer strukturierten Wochen- oder Tagesansicht dargestellt. Gebuchte Einheiten und belegte Zeitfenster werden farblich hervorgehoben (z. B. lila Blöcke), sodass Verwalter jederzeit den Überblick über die Gesamtauslastung und freie Kapazitäten behalten.
                    
                    <details class="screenshot-toggle">
                        <summary>🖼️ Screenshot ansehen</summary>
                        <div class="screenshot-wrapper">
                            <img src="{{ url_for('static', filename='images/Bildschirmfoto zu 2026-07-30 13-32-27.png') }}" alt="Kalender-Anzeige Admin" loading="lazy">
                        </div>
                    </details>
                </li>
            </ol>

            <h3>Endnutzer-Buchung &amp; Dokumente</h3>
            <ol start="5">
                <li>
                    <strong>Freie Termine auswählen und buchen:</strong> Über den bereitgestellten Buchungslink gelangen Endnutzer in die Buchungsansicht im Dark Mode. Links werden die Veranstaltungsdetails (z. B. Slot-Länge) aufgeführt. Im Kalender-Grid auf der rechten Seite wählen Nutzer einen der blau hervorgehobenen freien Zeitslots aus. Anschließend öffnet sich unterhalb des Kalenders das Formular zur Eingabe der Kontaktdaten (Name, E-Mail-Adresse), um die Reservierung verbindlich abzuschließen (inklusive Captcha/Bestätigungs-Overlay).
                    
                    <details class="screenshot-toggle">
                        <summary>🖼️ Screenshots ansehen</summary>
                        <div class="screenshot-wrapper">
                            <img src="{{ url_for('static', filename='images/Bildschirmfoto zu 2026-07-30 13-31-10.png') }}" alt="Buchungsansicht Dark Mode" loading="lazy" style="margin-bottom: 1rem;">
                            <img src="{{ url_for('static', filename='images/Bildschirmfoto zu 2026-07-30 13-31-18.png') }}" alt="Zeitslot auswählen" loading="lazy" style="margin-bottom: 1rem;">
                            <img src="{{ url_for('static', filename='images/Bildschirmfoto zu 2026-07-30 13-31-38.png') }}" alt="Formular Kontaktdaten" loading="lazy" style="margin-bottom: 1rem;">
                            <img src="{{ url_for('static', filename='images/Bildschirmfoto zu 2026-07-30 13-31-43.png') }}" alt="Reservierung abschicken" loading="lazy" style="margin-bottom: 1rem;">
                            <img src="{{ url_for('static', filename='images/Bildschirmfoto zu 2026-07-30 13-32-02.png') }}" alt="Bestätigungs-Overlay" loading="lazy">
                        </div>
                    </details>
                </li>
                
                <li>
                    <strong>Termin buchen und iCal-Kalendereintrag exportieren:</strong> Nach der Eingabe der Kontaktdaten und dem Absenden der Reservierung erhält der Nutzer eine Bestätigungsmaske („Buchung erfolgreich“). Von dort aus kann eine iCalendar-Datei (.ics) heruntergeladen werden. Diese ermöglicht es dem Buchenden, den vereinbarten Termin mit allen relevanten Details (Start-/Endzeit, Beschreibung und Buchungslink) direkt in persönliche Kalenderanwendungen (wie Outlook, Apple Calendar oder Google Calendar) zu importieren.
                    
                    <br><br>
                    <a href="{{ url_for('static', filename='downloads/termin-6a6b35d9fce0c73b4e57798a-6a6b35d9fce0c73b4e57798a-2026-08-01_1100.ics') }}" 
                       class="download-btn" target="_blank" rel="noopener noreferrer">
                       📥 iCal-Kalendereintrag herunterladen (.ics)
                    </a>
                    <details class="screenshot-toggle" style="margin-top: 0.75rem;">
                        <summary>🖼️ Screenshot ansehen</summary>
                        <div class="screenshot-wrapper">
                            <img src="{{ url_for('static', filename='images/Bildschirmfoto zu 2026-07-30 13-31-50.png') }}" alt="Buchungsbestätigung und iCal-Export" loading="lazy">
                        </div>
                    </details>
                </li>

                <li>
                    <strong>Einladungsschreiben mit Buchungs-QR-Code generieren:</strong> Zur einfachen Verteilung von Terminbuchungen (z. B. für Elternsprechtage) generiert das System ein druckfähiges Einladungsschreiben. Dieses enthält neben den grundlegenden Veranstaltungsinformationen einen direkt anklickbaren Online-Buchungslink sowie einen integrierten QR-Code, den Empfänger direkt mit dem Smartphone scannen können, um zur Buchungsmaske zu gelangen.
                    
                    <br><br>
                    <a href="{{ url_for('static', filename='downloads/Einladung_Elternsprechtag.pdf') }}" 
                       class="download-btn" target="_blank" rel="noopener noreferrer">
                       📥 Einladungsschreiben herunterladen (PDF)
                    </a>
                    <details class="screenshot-toggle" style="margin-top: 0.75rem;">
                        <summary>🖼️ Screenshot ansehen</summary>
                        <div class="screenshot-wrapper">
                            <img src="{{ url_for('static', filename='images/Bildschirmfoto zu 2026-07-30 13-33-02.png') }}" alt="Einladungsschreiben mit QR-Code" loading="lazy">
                        </div>
                    </details>
                </li>
            </ol>
        </article>
    </div>
</section>

<style>
/* Module page styles */
.module-shell { display: grid; grid-template-columns: 260px 1fr; gap: 1rem; margin-top: 1rem; }
.module-nav { border: 1px solid #d8dfd7; border-radius: 10px; background: #fff; padding: 0.6rem; }
.module-nav ul { list-style: none; margin: 0; padding: 0; }
.module-nav li { margin: 0.25rem 0; }
.module-nav a { display: block; padding: 0.6rem 0.8rem; color: #173f46; text-decoration: none; border-radius: 8px; }
.module-nav li.active a { background: linear-gradient(90deg,#eaf6f4,#f3fbf8); font-weight:700; }
.module-content { border: 1px solid #d8dfd7; border-radius: 12px; padding: 1.1rem; background: #fff; }
.module-panel { max-width: 80ch; }
.module-panel.hidden { display: none; }
.module-panel h2 { margin-top: 0; color: #133e40; }
.module-panel .lede { color: #455e5e; font-weight: 600; }
.module-panel h3 { margin-top: 1.5rem; color: #22595b; }
.module-panel ol { margin-left: 1.2rem; padding-left: 0.5rem; }
.module-panel ol li { margin-bottom: 0.75rem; }
.module-panel p,
.module-panel li,
.module-panel dd {
    line-height: 1.75;
}

@media (max-width: 900px) {
    .module-shell { grid-template-columns: 1fr; }
    .module-nav { order: 2; }
    .module-content { order: 1; }
}

@media (max-width: 700px) {
    .page-hero {
        padding: 1.15rem 1rem;
        border-radius: 16px;
    }

    .page-hero h1 {
        font-size: clamp(1.55rem, 7vw, 2rem);
    }

    .page-hero p {
        max-width: none;
        font-size: 1.02rem;
        line-height: 1.72;
    }

    .module-shell {
        gap: 0.75rem;
        margin-top: 0.85rem;
    }

    .module-nav {
        padding: 0.55rem;
        border-radius: 14px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        background: linear-gradient(180deg, #ffffff 0%, #f8fbf8 100%);
    }

    .module-nav::-webkit-scrollbar {
        display: none;
    }

    .module-nav ul {
        display: flex;
        gap: 0.5rem;
        min-width: max-content;
    }

    .module-nav li {
        margin: 0;
        flex: 0 0 auto;
    }

    .module-nav a {
        padding: 0.8rem 1rem;
        font-size: 0.96rem;
        line-height: 1.2;
        white-space: nowrap;
    }

    .module-nav li.active a {
        box-shadow: 0 8px 20px rgba(23, 63, 70, 0.08);
        background: linear-gradient(90deg, #e4f4f2, #f7fcfb);
    }

    .module-content {
        padding: 1rem;
        border-radius: 14px;
    }

    .module-panel {
        max-width: none;
    }

    .module-panel h2 {
        font-size: 1.32rem;
        line-height: 1.2;
    }

    .module-panel h3 {
        font-size: 1.02rem;
        margin-top: 1rem;
    }

    .module-panel p,
    .module-panel li,
    .module-panel dd {
        font-size: 1rem;
    }

    .module-panel ol {
        margin-left: 1rem;
        padding-left: 0.2rem;
    }

    .module-panel dl {
        margin: 0;
    }

    .module-panel dt {
        font-weight: 700;
        margin-top: 0.6rem;
    }

    .module-panel dd {
        margin: 0.2rem 0 0;
    }
}
</style>

<script>
// Simple client-side module switching for an immediate wiki-like experience
document.addEventListener('DOMContentLoaded', function () {
    var navItems = document.querySelectorAll('.module-nav li');
    navItems.forEach(function (li) {
        li.addEventListener('click', function (ev) {
            ev.preventDefault();
            var target = li.getAttribute('data-module');
            if (!target) return;
            // activate nav
            navItems.forEach(function (n) { n.classList.remove('active'); });
            li.classList.add('active');
            // show panel
            document.querySelectorAll('.module-panel').forEach(function (p) { p.classList.add('hidden'); });
            var panel = document.getElementById(target);
            if (panel) panel.classList.remove('hidden');
            // update hash
            history.replaceState(null, '', '#'+target);
            // scroll into view on small screens
            if (window.innerWidth < 900) panel.scrollIntoView({ behavior: 'smooth' });
        });
    });

    // If hash present on load, open that module
    var hash = window.location.hash.replace('#','');
    if (hash) {
        var initial = document.querySelector('.module-nav li[data-module="'+hash+'"]');
        if (initial) initial.click();
    } else {
        // Standardmäßig Modul 2 (Bibliothek) öffnen, wenn kein Hash vorliegt
        var defaultTab = document.querySelector('.module-nav li[data-module="mod1"]');
        if (defaultTab) defaultTab.click();
    }
});
</script>
{% endblock %}