{% 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);
}
</style>
{% endblock %}

{% block content %}
<section class="page-hero">
    <h1>Module &amp; Leitfäden</h1>
    <p>Diese Seite stellt vier austauschbare Module dar. Jedes Modul ist als kompakter, wiki‑ähnlicher Leitfaden gehalten — übersichtlich, schnell zu scannen und leicht editierbar.</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 class="active" 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 hidden">
            <!-- Platzhalter Inventarsystem -->
        </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="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>
                <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.
                </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.
                </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.
                </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.
                </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.
                </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.
                </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="mod2"]');
        if (defaultTab) defaultTab.click();
    }
});
</script>
{% endblock %}