{% extends "base.html" %}

{% set meta_description = "Invario Inventarsystem für Schulen: 250 € pro Jahr, 5-Minuten-Start, PDF-Berichte, Serverstandort Deutschland und entwickelt mit der Grundschule Albert-Schweitzer-Straße." %}

{% block title %}Inventarsystem für Schulen | 250 € / Jahr{% endblock %}

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

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

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

.hero-pills,
.feature-grid {
    margin-top: 1rem;
    display: grid;
    gap: 0.8rem;
}

.hero-pills {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pill,
.panel {
    border-radius: 16px;
    border: 1px solid #d8dfd7;
    background: #ffffff;
}

.pill {
    padding: 0.9rem 1rem;
}

.pill strong {
    display: block;
    color: #153e45;
    margin-bottom: 0.2rem;
}

.pill span {
    color: #536c71;
}

.split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
    margin-top: 0.9rem;
}

.panel {
    padding: 1.15rem;
    box-shadow: 0 10px 24px rgba(25, 45, 41, 0.04);
}

.panel h2 {
    color: #235159;
    margin-bottom: 0.45rem;
    font-size: clamp(1.05rem, 1.8vw, 1.35rem);
}

.panel p,
.panel li {
    color: #496267;
    line-height: 1.6;
}

.feature-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.feature-card {
    padding: 1rem;
    border-radius: 16px;
    border: 1px solid #d8dfd7;
    background: linear-gradient(180deg, #ffffff 0%, #f8faf8 100%);
}

.feature-card h2 {
    margin-bottom: 0.35rem;
    color: #235159;
    font-size: clamp(1.02rem, 1.7vw, 1.25rem);
}

.feature-card p {
    color: #496267;
    line-height: 1.6;
}

.proof {
    margin-top: 1rem;
    padding: 1.1rem 1.15rem;
    border-radius: 18px;
    border: 1px solid #d6dfda;
    background: linear-gradient(135deg, #eef6f1 0%, #fbfcfb 100%);
}

.proof strong {
    color: #173f46;
}

.cta-row {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
}

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

{% block content %}
<section class="page-hero">
    <h1>Inventarsystem für Schulen</h1>
    <p>Das Inventarsystem kostet 250 € pro Jahr, läuft ohne Installation im Browser und wurde mit der Grundschule Albert-Schweitzer-Straße als Entwicklungspartner für den Schulalltag geformt.</p>
    <div class="hero-pills" aria-label="Kernfakten">
        <div class="pill"><strong>250 € / Jahr</strong><span>Planbare Flatrate für Inventarverwaltung</span></div>
        <div class="pill"><strong>5 Minuten</strong><span>Start ohne lokale Installation</span></div>
        <div class="pill"><strong>PDF-Export</strong><span>Berichte für Inventur und Nachweise</span></div>
    </div>
    <div class="cta-row">
        <a class="nav-btn primary" href="{{ url_for('preise') }}">Preise ansehen</a>
        <a class="nav-btn" href="{{ url_for('kontakt') }}">Beratung anfragen</a>
    </div>
</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="feature-grid" aria-label="Kernfunktionen">
    <article class="feature-card">
        <h2>3. QR-Code Unterstützung</h2>
        <p>Mit QR-Codes lassen sich Geräte vor Ort direkt identifizieren und aktualisieren.</p>
    </article>

    <article class="feature-card">
        <h2>4. Historie und Verantwortung</h2>
        <p>Änderungen bleiben dokumentiert, damit Entscheidungen und Vorgänge transparent bleiben.</p>
    </article>

    <article class="feature-card">
        <h2>5. BFSG-bewusste Nutzung</h2>
        <p>Klare Kontraste, große Bedienelemente und eine reduzierte Oberfläche unterstützen die tägliche Arbeit im Sekretariat.</p>
    </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>

<section class="proof">
    <strong>Leuchtturm:</strong> Die Grundschule Albert-Schweitzer-Straße nutzt Invario als Referenz aus der Praxis. Genau daraus entsteht der Leitsatz: Von Praktikern für Praktiker entwickelt.
</section>

{% endblock %}