{% extends "base.html" %}

{% block title %}Unser Ansatz | Invario{% endblock %}

{% block content %}
<section class="page-hero">
    <h1>Unser Ansatz für Schulen</h1>
    <p>Die Arbeitsweise ist strukturiert, persönlich und auf den praktischen Nutzen in der täglichen Verwaltung ausgerichtet.</p>
</section>

<section class="grid">
    <article class="member">
        <h2>Verständliche Beratung</h2>
        <p>Technische Möglichkeiten werden in klare Entscheidungen übersetzt: Was bringt im Schulalltag wirklich Entlastung und was nicht.</p>
        <p><strong>Ergebnis:</strong> Keine unnötigen Funktionen, sondern ein klarer Fahrplan mit nachvollziehbaren Prioritäten.</p>
    </article>
    <article class="member">
        <h2>Saubere Einführung</h2>
        <p>Das System wird gemeinsam mit den verantwortlichen Teams eingerichtet, ohne den laufenden Betrieb zu überlasten.</p>
        <p><strong>Ergebnis:</strong> Schrittweise Umstellung mit Schulung direkt an typischen Arbeitsabläufen.</p>
    </article>
    <article class="member">
        <h2>Zuverlässige Begleitung</h2>
        <p>Nach der Einführung bleibt das Team erreichbar und unterstützt bei Anpassungen, Fragen und neuen Anforderungen.</p>
        <p><strong>Ergebnis:</strong> Feste Ansprechpartner und verlässliche Rückmeldung statt wechselnder Kontaktwege.</p>
    </article>
</section>

<section class="references">
    <h2>Werte, nach denen wir arbeiten</h2>
    <ul>
        <li>Klarheit vor Komplexität</li>
        <li>Datenschutz als Standard, nicht als Zusatz</li>
        <li>Respekt für die Arbeitsrealität in Schulen</li>
        <li>Verbindliche Kommunikation und transparente Schritte</li>
    </ul>
</section>

<style>
.page-hero { margin-bottom: 1.2rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.9rem; }
.member, .references { background: #fff; border: 1px solid #d8dfd7; border-radius: 14px; padding: 1rem; box-shadow: 0 10px 24px rgba(25, 45, 41, 0.04); }
.member h2, .references h2 { color: #265057; margin-bottom: 0.45rem; font-size: clamp(1.05rem, 1.8vw, 1.35rem); }
.references { margin-top: 0.9rem; }
.references ul { margin: 0; padding-left: 1rem; color: #4a6267; display: grid; gap: 0.5rem; }
</style>
{% endblock %}