{% extends "base.html" %}

{% block title %}Inventarsystem fuer Schulen | Uebersicht{% endblock %}

{% block content %}
<section class="page-hero">
    <h1>Inventarsystem fuer Schulen</h1>
    <p>Alle wichtigen Funktionen fuer den Schulalltag in einer klaren Oberflaeche: von Inventar ueber Lizenzen bis zur nachvollziehbaren Historie.</p>
</section>

<section class="split">
    <article class="panel">
        <h2>1. Bestand einfach pflegen</h2>
        <p>Jedes Geraet erhaelt eine eindeutige Akte mit Standort, Status, Kaufdaten und zustaendiger Person.</p>
        <ul>
            <li>Suche nach Seriennummer, Raum oder Geraetetyp</li>
            <li>Einheitliche Datenfelder fuer alle Standorte</li>
            <li>Schnelle Erfassung neuer Geraete</li>
        </ul>
    </article>

    <article class="panel">
        <h2>2. Standorte nachvollziehbar verwalten</h2>
        <p>Raeume, Etagen und Gebaeude werden klar strukturiert, damit jederzeit ersichtlich ist, wo sich ein Geraet befindet.</p>
        <ul>
            <li>Uebersicht je Raum oder Fachbereich</li>
            <li>Sammelverschiebung mehrerer Geraete</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 Unterstuetzung</h2>
        <p>Mit QR-Codes lassen sich Geraete 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>Aenderungen bleiben dokumentiert, damit Entscheidungen und Vorgaenge transparent bleiben.</p>
        <ul>
            <li>Wer hat wann was geaendert</li>
            <li>Leihvorgaenge und Rueckgaben nachvollziehen</li>
            <li>Klare Nachweise fuer 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 Verwaltung, Schulleitung und technischen Rollen.</p>
    <ul class="wide-list">
        <li><strong>Rollenbasiert:</strong> Nur relevante Funktionen pro Nutzergruppe sichtbar.</li>
        <li><strong>Datenschutzgerecht:</strong> Zugriff und Aenderungen werden protokolliert.</li>
        <li><strong>Exportierbar:</strong> Berichte und Bestandslisten koennen fuer Termine und Pruefungen ausgegeben werden.</li>
        <li><strong>Erweiterbar:</strong> Das System waechst mit Ihren 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 %}