{% extends "base.html" %}

{% set meta_description = "Invario Leistungen für Schulen: Inventarverwaltung, Bibliothekssystem, Support, Sicherheit und Einführung ohne Installation. Klar für Schulen und Schulträger gegliedert." %}

{% block title %}Leistungen für Schulen | Invario{% 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%, #f5f8f4 100%);
    box-shadow: 0 16px 34px rgba(25, 45, 41, 0.06);
}

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

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

.service-grid {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
}

.service-card,
.highlight {
    border-radius: 18px;
    border: 1px solid #d8dfd7;
    background: #ffffff;
}

.service-card {
    padding: 1rem;
    box-shadow: 0 10px 26px rgba(25, 45, 41, 0.04);
}

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

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

.highlight {
    margin-top: 1rem;
    padding: 1.2rem;
    background: linear-gradient(135deg, #f6fbf7 0%, #eef5ef 100%);
}

.highlight h2 {
    color: #2a4d53;
    margin-bottom: 0.4rem;
    font-size: clamp(1.1rem, 2.2vw, 1.55rem);
}

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

.bento-item {
    padding: 1rem;
    border-radius: 16px;
    border: 1px solid #d8dfd7;
    background: #ffffff;
}

.bento-item strong {
    display: block;
    margin-bottom: 0.25rem;
    color: #173f46;
}

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

{% block content %}
<section class="page-hero">
    <h1>Module &amp; Leitfäden</h1>
    <p>Diese Seite stellt vier austauschbare Module dar. Jedes Modul ist als kompakter, wiki‑ähnlicher Leitfaden gehalten — übersichtlich, schnell zu scannen und leicht editierbar.</p>
</section>

<section class="module-shell" aria-label="Module Übersicht">
    <div class="module-nav" role="navigation" aria-label="Module Navigation">
        <ul>
            <li class="active" data-module="mod1"><a href="#mod1">Inventarsystem</a></li>
            <li data-module="mod2"><a href="#mod2">Bibliothekssystem</a></li>
            <li data-module="mod3"><a href="#mod3">Terminplaner</a></li>
            <li data-module="mod4"><a href="#mod4">Mail Add On</a></li>
        </ul>
    </div>

    <div class="module-content" id="moduleContent">
        <article id="mod1" class="module-panel">
            <h2>Inventarsystem</h2>
            <p class="lede">Kurze Zusammenfassung des Moduls. (Platzhalter — du ersetzt den Inhalt später.)</p>
            <h3>Was ist das?</h3>
            <p>Beschreibe hier den Zweck, Zielgruppe und schnelle Anwendungsfälle.</p>
            <h3>Schnellstart</h3>
            <ol>
                <li>Schritt 1 — Kurzer Tipp.</li>
                <li>Schritt 2 — Konfigurationsempfehlung.</li>
                <li>Schritt 3 — Prüfpunkte.</li>
            </ol>
            <h3>FAQs</h3>
            <dl>
                <dt>Frage: Wie mache ich X?</dt>
                <dd>Antwort: Kurze Anleitung.</dd>
            </dl>
        </article>

        <article id="mod2" class="module-panel hidden">
            <h2>Bibliothekssystem</h2>
            <p class="lede">Platzhaltertext für Modul 2.</p>
        </article>

        <article id="mod3" class="module-panel hidden">
            <h2>Terminplaner</h2>
            <p class="lede">Platzhaltertext für Modul 3.</p>
        </article>

        <article id="mod4" class="module-panel hidden">
            <h2>Mail Add On</h2>
            <p class="lede">Platzhaltertext für Modul 4.</p>
        </article>
    </div>
</section>

<style>
/* Module page styles */
.module-shell { display: grid; grid-template-columns: 260px 1fr; gap: 1rem; margin-top: 1rem; }
.module-nav { border: 1px solid #d8dfd7; border-radius: 10px; background: #fff; padding: 0.6rem; }
.module-nav ul { list-style: none; margin: 0; padding: 0; }
.module-nav li { margin: 0.25rem 0; }
.module-nav a { display: block; padding: 0.6rem 0.8rem; color: #173f46; text-decoration: none; border-radius: 8px; }
.module-nav li.active a { background: linear-gradient(90deg,#eaf6f4,#f3fbf8); font-weight:700; }
.module-content { border: 1px solid #d8dfd7; border-radius: 12px; padding: 1.1rem; background: #fff; }
.module-panel { max-width: 80ch; }
.module-panel.hidden { display: none; }
.module-panel h2 { margin-top: 0; color: #133e40; }
.module-panel .lede { color: #455e5e; font-weight: 600; }
.module-panel h3 { margin-top: 1rem; color: #22595b; }
.module-panel ol { margin-left: 1.1rem; }
.module-panel p,
.module-panel li,
.module-panel dd {
    line-height: 1.75;
}

@media (max-width: 900px) {
    .module-shell { grid-template-columns: 1fr; }
    .module-nav { order: 2; }
    .module-content { order: 1; }
}

@media (max-width: 700px) {
    .page-hero {
        padding: 1.15rem 1rem;
        border-radius: 16px;
    }

    .page-hero h1 {
        font-size: clamp(1.55rem, 7vw, 2rem);
    }

    .page-hero p {
        max-width: none;
        font-size: 1.02rem;
        line-height: 1.72;
    }

    .module-shell {
        gap: 0.75rem;
        margin-top: 0.85rem;
    }

    .module-nav {
        padding: 0.55rem;
        border-radius: 14px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        background: linear-gradient(180deg, #ffffff 0%, #f8fbf8 100%);
    }

    .module-nav::-webkit-scrollbar {
        display: none;
    }

    .module-nav ul {
        display: flex;
        gap: 0.5rem;
        min-width: max-content;
    }

    .module-nav li {
        margin: 0;
        flex: 0 0 auto;
    }

    .module-nav a {
        padding: 0.8rem 1rem;
        font-size: 0.96rem;
        line-height: 1.2;
        white-space: nowrap;
    }

    .module-nav li.active a {
        box-shadow: 0 8px 20px rgba(23, 63, 70, 0.08);
        background: linear-gradient(90deg, #e4f4f2, #f7fcfb);
    }

    .module-content {
        padding: 1rem;
        border-radius: 14px;
    }

    .module-panel {
        max-width: none;
    }

    .module-panel h2 {
        font-size: 1.32rem;
        line-height: 1.2;
    }

    .module-panel h3 {
        font-size: 1.02rem;
        margin-top: 1rem;
    }

    .module-panel p,
    .module-panel li,
    .module-panel dd {
        font-size: 1rem;
    }

    .module-panel ol {
        margin-left: 1rem;
        padding-left: 0.2rem;
    }

    .module-panel dl {
        margin: 0;
    }

    .module-panel dt {
        font-weight: 700;
        margin-top: 0.6rem;
    }

    .module-panel dd {
        margin: 0.2rem 0 0;
    }
}
</style>

<script>
// Simple client-side module switching for an immediate wiki-like experience
document.addEventListener('DOMContentLoaded', function () {
    var navItems = document.querySelectorAll('.module-nav li');
    navItems.forEach(function (li) {
        li.addEventListener('click', function (ev) {
            ev.preventDefault();
            var target = li.getAttribute('data-module');
            if (!target) return;
            // activate nav
            navItems.forEach(function (n) { n.classList.remove('active'); });
            li.classList.add('active');
            // show panel
            document.querySelectorAll('.module-panel').forEach(function (p) { p.classList.add('hidden'); });
            var panel = document.getElementById(target);
            if (panel) panel.classList.remove('hidden');
            // update hash
            history.replaceState(null, '', '#'+target);
            // scroll into view on small screens
            if (window.innerWidth < 900) panel.scrollIntoView({ behavior: 'smooth' });
        });
    });

    // If hash present on load, open that module
    var hash = window.location.hash.replace('#','');
    if (hash) {
        var initial = document.querySelector('.module-nav li[data-module="'+hash+'"]');
        if (initial) initial.click();
    }
});
</script>
{% endblock %}