{% extends "base.html" %}

{% block title %}Leistungen fuer Schulen | Invario{% endblock %}

{% block content %}
<section class="page-hero">
    <h1>Leistungen fuer Schulsekretariat und Schulleitung</h1>
    <p>Praxisnahe Module fuer Schulen in Deutschland: verstaendlich, sicher und ohne unnoetige Komplexitaet.</p>
</section>

<section class="cards">
    <article class="card">
        <h2>Digitale Inventarverwaltung</h2>
        <p>Alle Geraete, Raeume und Zustaendigkeiten an einem Ort. So finden Sie Informationen schneller und reduzieren Rueckfragen.</p>
    </article>
    <article class="card">
        <h2>Lizenz- und Fristenkontrolle</h2>
        <p>Lizenzlaufzeiten werden transparent angezeigt, inklusive Hinweise auf bald ablaufende Nutzungen.</p>
    </article>
    <article class="card">
        <h2>Support mit klaren Prioritaeten</h2>
        <p>Stoerungen werden strukturiert aufgenommen, priorisiert und mit nachvollziehbarem Status bearbeitet.</p>
    </article>
    <article class="card">
        <h2>DSGVO-konforme Dokumentation</h2>
        <p>Vorgaenge und Aenderungen bleiben nachvollziehbar dokumentiert, damit Pruefungen und Abstimmungen einfacher werden.</p>
    </article>
    <article class="card">
        <h2>Einrichtung und Schulung</h2>
        <p>Wir richten das System gemeinsam mit Ihrem Team ein und schulen in klaren, alltagsnahen Schritten.</p>
    </article>
    <article class="card">
        <h2>Begleitung im laufenden Betrieb</h2>
        <p>Feste Ansprechpartner unterstuetzen Ihr Team bei Fragen, Erweiterungen und organisatorischen Anpassungen.</p>
    </article>
</section>

<section class="highlight">
    <h2>Besonders geeignet fuer Teams mit wenig Zeit</h2>
    <p>Die Oberflaeche ist bewusst reduziert aufgebaut: grosse, klare Bedienelemente, eindeutige Bezeichnungen und kurze Klickwege fuer taegliche Verwaltungsaufgaben.</p>
</section>

<style>
.page-hero { margin-bottom: 1.2rem; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.9rem; }
.card { background: #fff; border: 1px solid #d8dfd7; border-radius: 14px; padding: 1rem; box-shadow: 0 10px 26px rgba(25, 45, 41, 0.04); }
.card h2 { color: #24525a; margin-bottom: 0.45rem; font-size: clamp(1.05rem, 1.8vw, 1.35rem); }
.highlight { margin-top: 1rem; background: linear-gradient(135deg, #f8f4eb 0%, #eef3eb 100%); border: 1px solid #d4dbd2; border-radius: 14px; padding: 1.1rem; }
.highlight h2 { color: #2a4d53; margin-bottom: 0.4rem; font-size: clamp(1.1rem, 2.2vw, 1.55rem); }
</style>
{% endblock %}