{% extends "base.html" %}

{% block title %}Inventarsystem für Schulen | Übersicht{% endblock %}

{% block content %}
<section class="page-hero">
    <h1>Inventarsystem für Schulen</h1>
    <p>Alle wichtigen Funktionen für den Schulalltag in einer klaren Oberfläche: von Inventar über Lizenzen bis zur nachvollziehbaren Historie.</p>
</section>

<section class="split">
    <article class="panel">
        <h2>1. Bestand einfach pflegen</h2>
        <p>Jedes Gerät erhält eine eindeutige Akte mit Standort, Status, Kaufdaten und zuständiger Person.</p>
        <ul>
            <li>Suche nach Seriennummer, Raum oder Gerätetyp</li>
            <li>Einheitliche Datenfelder für alle Standorte</li>
            <li>Schnelle Erfassung neuer Geräte</li>
        </ul>
    </article>

    <article class="panel">
        <h2>2. Standorte nachvollziehbar verwalten</h2>
        <p>Räume, Etagen und Gebäude werden klar strukturiert, damit jederzeit ersichtlich ist, wo sich ein Gerät befindet.</p>
        <ul>
            <li>Übersicht je Raum oder Fachbereich</li>
            <li>Sammelverschiebung mehrerer Geräte</li>
            <li>Einfacher Abgleich bei Inventurterminen</li>
        </ul>
    </article>
</section>

<section class="split" style="margin-top:0.9rem;">
    <article class="panel">
        <h2>3. QR-Code Unterstützung</h2>
        <p>Mit QR-Codes lassen sich Geräte vor Ort direkt identifizieren und aktualisieren.</p>
        <ul>
            <li>Labels direkt aus dem System erzeugen</li>
            <li>Scannen und sofort zur richtigen Akte springen</li>
            <li>Nutzbar mit Handscanner oder Smartphone-Kamera</li>
        </ul>
    </article>

    <article class="panel">
        <h2>4. Historie und Verantwortung</h2>
        <p>Änderungen bleiben dokumentiert, damit Entscheidungen und Vorgänge transparent bleiben.</p>
        <ul>
            <li>Wer hat wann was geändert</li>
            <li>Leihvorgänge und Rückgaben nachvollziehen</li>
            <li>Klare Nachweise für interne Abstimmungen</li>
        </ul>
    </article>
</section>

<section class="panel" style="margin-top:0.9rem;">
    <h2>5. Rollen, Rechte und Exporte</h2>
    <p>Das System unterscheidet klar zwischen Verwaltungs- und Technikrollen.</p>
    <ul class="wide-list">
        <li><strong>Rollenbasiert:</strong> Nur relevante Funktionen pro Nutzergruppe sichtbar.</li>
        <li><strong>Datenschutzgerecht:</strong> Zugriff und Änderungen werden protokolliert.</li>
        <li><strong>Exportierbar:</strong> Berichte und Bestandslisten können für Termine und Prüfungen ausgegeben werden.</li>
        <li><strong>Sicher betrieben:</strong> Session-Schutz, sichere Header und Zugriffskontrollen sind standardmäßig aktiv.</li>
        <li><strong>Erweiterbar:</strong> Das System wächst mit organisatorischen Anforderungen.</li>
    </ul>
</section>

<style>
.page-hero { margin-bottom: 1.2rem; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.panel { background: #fff; border: 1px solid #d8dfd7; border-radius: 14px; padding: 1.15rem; box-shadow: 0 10px 24px rgba(25, 45, 41, 0.04); }
.panel h2 { color: #265057; margin-bottom: 0.5rem; font-size: clamp(1.05rem, 1.8vw, 1.35rem); }
.panel p { color: #496267; line-height: 1.55; margin-bottom: 0.8rem; font-size: 0.98rem; }
.panel ul { margin: 0; padding-left: 1.15rem; color: #496267; display: grid; gap: 0.45rem; }
.wide-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }

@media (max-width: 900px) {
    .split { grid-template-columns: 1fr; }
    .wide-list { grid-template-columns: 1fr; }
}
</style>
{% endblock %}