{% extends "base.html" %}

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

{% block content %}
<section class="page-hero">
    <h1>Unser Ansatz fuer Schulen</h1>
    <p>Wir arbeiten strukturiert, persoenlich und mit Fokus auf den praktischen Nutzen im Sekretariat und in der Schulleitung.</p>
</section>

<section class="grid">
    <article class="member">
        <h2>Verstaendliche Beratung</h2>
        <p>Wir uebersetzen technische Moeglichkeiten in klare Entscheidungen: Was bringt im Schulalltag wirklich Entlastung und was nicht.</p>
        <p><strong>Ihr Vorteil:</strong> Keine unnoetigen Funktionen, sondern ein klarer Fahrplan mit nachvollziehbaren Prioritaeten.</p>
    </article>
    <article class="member">
        <h2>Saubere Einfuehrung</h2>
        <p>Das System wird gemeinsam mit Ihrem Team eingerichtet, ohne den laufenden Betrieb zu ueberlasten.</p>
        <p><strong>Ihr Vorteil:</strong> Schrittweise Umstellung mit Schulung direkt an Ihren typischen Arbeitsablaeufen.</p>
    </article>
    <article class="member">
        <h2>Zuverlaessige Begleitung</h2>
        <p>Nach der Einfuehrung bleiben wir erreichbar und unterstuetzen bei Anpassungen, Fragen und neuen Anforderungen.</p>
        <p><strong>Ihr Vorteil:</strong> Feste Ansprechpartner und verlässliche Rueckmeldung statt wechselnder Kontaktwege.</p>
    </article>
</section>

<section class="references">
    <h2>Werte, nach denen wir arbeiten</h2>
    <ul>
        <li>Klarheit vor Komplexitaet</li>
        <li>Datenschutz als Standard, nicht als Zusatz</li>
        <li>Respekt fuer die Arbeitsrealitaet 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 %}