{% extends "base.html" %}

{# SEO: per-page description used in base.html meta tags #}
{% set meta_description = "Invario bündelt Lehrmittelverwaltung, Inventar und Ausleihe für Schulen – sicher, transparent und einfach zu bedienen." %}

{% block title %}Digitale Schulverwaltung mit Sicherheitsfokus{% endblock %}

{% block head %}
{{ super() }}
<style>
	html {
  		scroll-behavior: smooth;
	}   

	.hero {
		margin-top: 1rem;
		padding: 3.2rem;
		border-radius: 22px;
		background: linear-gradient(130deg, #f8f5ee 0%, #ece7d9 60%, #e0eadf 100%);
		border: 1px solid #cfd6cd;
		display: grid;
		grid-template-columns: 1.15fr 0.85fr;
		gap: 1.6rem;
		position: relative;
		overflow: hidden;
		box-shadow: 0 24px 46px rgba(28, 45, 41, 0.08);
	}

	.hero-right {
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}

	.hero::after {
		content: "";
		position: absolute;
		right: -60px;
		bottom: -70px;
		width: 220px;
		height: 220px;
		border-radius: 999px;
		background: radial-gradient(circle at center, #b3672e 0%, #b3672e 44%, transparent 72%);
		opacity: 0.12;
		pointer-events: none;
	}

	.eyebrow {
		display: inline-block;
		margin-bottom: 0.9rem;
		padding: 0.34rem 0.72rem;
		border-radius: 999px;
		font-size: clamp(0.76rem, 0.9vw, 0.88rem);
		font-weight: 700;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		color: #1f5158;
		background: #dbe8e5;
	}

	.hero h1 {
		font-size: clamp(2rem, 4.8vw, 3.6rem);
		color: #21363b;
		text-wrap: balance;
	}

	.hero p {
		max-width: 60ch;
		margin-top: 1rem;
		font-size: clamp(1.03rem, 1.3vw, 1.18rem);
		color: #4f666c;
	}

	.cta-row {
		margin-top: 1.8rem;
		display: flex;
		flex-wrap: wrap;
		gap: 0.72rem;
	}

	.btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border-radius: 999px;
		border: 1px solid transparent;
		padding: 0.7rem 1.2rem;
		font-weight: 700;
		font-size: 0.97rem;
		transition: transform 0.2s ease, box-shadow 0.2s ease;
	}

	.btn:hover {
		transform: translateY(-1px);
	}

	.btn-primary {
		color: #ffffff;
		background: linear-gradient(120deg, #296f78 0%, #1a5057 100%);
		box-shadow: 0 8px 18px rgba(25, 71, 77, 0.24);
	}

	.btn-secondary {
		color: #24525a;
		background: #ffffff;
		border-color: #bcc9c0;
	}

	.hero-testimonial {
		background: linear-gradient(135deg, #ffffff 0%, #f9faf8 100%);
		border: 1px solid #e0e6df;
		border-radius: 14px;
		padding: 1.4rem;
		box-shadow: 0 8px 16px rgba(28, 45, 41, 0.06);
		margin-bottom: 1rem;
	}

	.hero-testimonial .stars {
		display: flex;
		gap: 0.25rem;
		font-size: 1.05rem;
		margin-bottom: 0.8rem;
	}

	.hero-testimonial .stars .star {
		color: #f59e0b;
	}

	.hero-testimonial .quote {
		font-size: clamp(0.95rem, 1.05vw, 1.08rem);
		color: #4f666c;
		line-height: 1.6;
		font-style: italic;
		margin-bottom: 0.8rem;
	}

	.hero-testimonial .author {
		display: flex;
		align-items: center;
		gap: 0.7rem;
	}

	.hero-testimonial .avatar {
		width: 38px;
		height: 38px;
		border-radius: 50%;
		background: linear-gradient(135deg, #296f78 0%, #1a5057 100%);
		color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 700;
		font-size: 0.9rem;
	}

	.hero-testimonial .info h4 {
		margin: 0;
		font-size: 0.95rem;
		color: #21363b;
		font-weight: 700;
	}

	.hero-testimonial .info span {
		font-size: 0.82rem;
		color: #7c8f8c;
	}

	.hero-card {
		background: #1f4e55;
		color: #e4f2f1;
		border-radius: 16px;
		padding: 1.2rem;
		border: 1px solid #3a6970;
	}


	.hero-card h3 {
		font-size: clamp(1rem, 1.8vw, 1.35rem);
		margin-bottom: 0.55rem;
	}

	.hero-card p {
		color: #c7dfde;
		font-size: clamp(0.92rem, 1.05vw, 1.03rem);
		margin: 0;
	}

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

	.stats div {
		padding: 0.55rem 0.62rem;
		border-radius: 10px;
		background: #285e66;
		border: 1px solid #4a7c82;
	}

	.stats strong {
		display: block;
		color: #ffffff;
		font-size: 1.06rem;
	}

	.stats span {
		color: #d1e8e6;
		font-size: 0.82rem;
	}

	.section {
		margin-top: 2rem;
		padding: 1.9rem;
		border-radius: 18px;
		border: 1px solid #d0d7cf;
		background: #ffffff;
		box-shadow: 0 14px 30px rgba(28, 45, 41, 0.05);
	}

	.reveal-on-scroll {
		opacity: 0;
		transform: translateY(22px);
		transition: opacity 560ms ease, transform 560ms ease;
		will-change: opacity, transform;
	}

	.reveal-on-scroll.is-visible {
		opacity: 1;
		transform: translateY(0);
	}

	.section h2 {
		font-size: clamp(1.45rem, 3vw, 2.3rem);
		margin-bottom: 0.4rem;
		color: #21393e;
	}

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

	.card {
		padding: 1rem;
		border-radius: 14px;
		border: 1px solid #dae1d8;
		background: linear-gradient(165deg, #fcfcf8 0%, #f4f6ef 100%);
	}

	.card h3 {
		font-size: clamp(1.04rem, 1.5vw, 1.25rem);
		color: #275058;
		margin-bottom: 0.35rem;
	}

	.card p {
		font-size: clamp(0.95rem, 1vw, 1.02rem);
	}

	.routine-list {
		margin-top: 1rem;
		display: grid;
		gap: 0.7rem;
	}

	.routine {
		padding: 0.9rem 1rem;
		border-radius: 12px;
		border: 1px solid #d2d9d1;
		background: #f8f7f1;
		display: flex;
		gap: 1rem;
		justify-content: space-between;
		align-items: center;
	}

	.routine b {
		display: block;
		color: #2a4d53;
		margin-bottom: 0.18rem;
		font-size: clamp(1rem, 1.2vw, 1.1rem);
	}

	.routine span {
		font-size: 0.86rem;
		color: #5c716f;
		border: 1px solid #c5cec5;
		padding: 0.2rem 0.55rem;
		border-radius: 999px;
		white-space: nowrap;
	}

	.process {
		margin-top: 1.05rem;
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 0.6rem;
	}

	.step {
		padding: 0.78rem 0.65rem;
		text-align: center;
		border-radius: 12px;
		border: 1px solid #d0d8d0;
		background: #f4f6f2;
	}

	.step strong {
		display: block;
		margin-bottom: 0.2rem;
		font-size: clamp(0.9rem, 1.1vw, 1rem);
		color: #284a50;
	}

	.step small {
		color: #617572;
		font-size: clamp(0.8rem, 0.86vw, 0.9rem);
	}

	.contact {
		margin-top: 2rem;
		border-radius: 20px;
		padding: 2rem;
		border: 1px solid #2a636b;
		background: linear-gradient(120deg, #245a61 0%, #1b484f 100%);
		color: #d8ecea;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
	}

	.contact h2 {
		color: #ffffff;
		font-size: clamp(1.35rem, 3vw, 2.2rem);
		margin-bottom: 0.4rem;
	}

	.contact p {
		color: #c7e0de;
		font-size: clamp(0.95rem, 1.05vw, 1.08rem);
	}

	.contact .btn-secondary {
		border-color: rgba(255, 255, 255, 0.45);
		background: rgba(255, 255, 255, 0.14);
		color: #ffffff;
	}


	.testimonials {
		margin-top: 2rem;
		padding: 1.9rem;
		border-radius: 18px;
		border: 1px solid #d0d7cf;
		background: linear-gradient(135deg, #fafaf8 0%, #f5f7f3 100%);
		box-shadow: 0 14px 30px rgba(28, 45, 41, 0.05);
	}

	.testimonials h2 {
		font-size: clamp(1.45rem, 3vw, 2.3rem);
		margin-bottom: 1.5rem;
		color: #21393e;
		text-align: center;
	}

	.testimonials-grid {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1.2rem;
	}

	.testimonial-card {
		padding: 1.4rem;
		border-radius: 14px;
		border: 1px solid #e0e6df;
		background: #ffffff;
		box-shadow: 0 4px 12px rgba(28, 45, 41, 0.04);
		transition: transform 0.3s ease, box-shadow 0.3s ease;
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}

	.testimonial-card:hover {
		transform: translateY(-4px);
		box-shadow: 0 8px 20px rgba(28, 45, 41, 0.08);
	}

	.testimonial-stars {
		display: flex;
		gap: 0.25rem;
		font-size: 1.1rem;
	}

	.testimonial-stars .star {
		color: #f59e0b;
	}

	.testimonial-text {
		flex: 1;
		font-size: clamp(0.95rem, 1vw, 1.02rem);
		color: #4f666c;
		line-height: 1.6;
		font-style: italic;
	}

	.testimonial-author {
		display: flex;
		align-items: center;
		gap: 0.8rem;
		margin-top: 0.5rem;
		border-top: 1px solid #e8ebe7;
		padding-top: 0.8rem;
	}

	.testimonial-avatar {
		width: 42px;
		height: 42px;
		border-radius: 50%;
		background: linear-gradient(135deg, #296f78 0%, #1a5057 100%);
		color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 700;
		font-size: 1rem;
	}

	.testimonial-info h4 {
		margin: 0;
		font-size: 0.98rem;
		color: #21363b;
		font-weight: 700;
	}

	.testimonial-info span {
		font-size: 0.85rem;
		color: #7c8f8c;
	}

	#grundschule {
		background:
			linear-gradient(114deg, rgba(17, 57, 63, 0.9) 0%, rgba(30, 92, 99, 0.78) 42%, rgba(244, 248, 242, 0.92) 100%),
			url("{{ url_for('static', filename='images/Gemini_Generated_Image_mrmegrmrmegrmrme.png') }}") center/cover no-repeat;
	}
	
	#weiterführende-schulen {
		background:
			linear-gradient(114deg, rgba(17, 57, 63, 0.9) 0%, rgba(30, 92, 99, 0.78) 42%, rgba(244, 248, 242, 0.92) 100%),
			url("{{ url_for('static', filename='images/Gemini_Generated_Image_yjhhheyjhhheyjhh.png') }}") center/cover no-repeat;
	}

	#oberschulen {
		background:
			linear-gradient(114deg, rgba(17, 57, 63, 0.9) 0%, rgba(30, 92, 99, 0.78) 42%, rgba(244, 248, 242, 0.92) 100%),
			url("{{ url_for('static', filename='images/Gemini_Generated_Image_qc97wfqc97wfqc97.png') }}") center/cover no-repeat;
	}

	.primary-focus {
		margin-top: 2rem;
		border-radius: 20px;
		padding: 2rem;
		position: relative;
		overflow: hidden;
		border: 1px solid #bfcfc9;
		background:
			linear-gradient(114deg, rgba(17, 57, 63, 0.9) 0%, rgba(30, 92, 99, 0.78) 42%, rgba(244, 248, 242, 0.92) 100%),
			url("{{ url_for('static', filename='images/Gemini_Generated_Image_2cd74s2cd74s2cd7.png') }}") 76% center/cover no-repeat;
		color: #f2f8f7;
		box-shadow: 0 16px 34px rgba(22, 44, 40, 0.12);
	}

	.primary-focus::before {
		content: "";
		position: absolute;
		inset: 0;
		background: radial-gradient(circle at 15% 20%, rgba(255, 228, 151, 0.28) 0%, transparent 38%);
		pointer-events: none;
	}

	.primary-focus-content {
		position: relative;
		z-index: 1;
		max-width: 720px;
	}

	.primary-focus h2 {
		color: #ffffff;
		font-size: clamp(1.6rem, 3vw, 2.35rem);
		margin-bottom: 0.55rem;
	}

	.primary-focus p {
		color: #e4f0ef;
		font-size: clamp(0.96rem, 1.1vw, 1.08rem);
		max-width: 62ch;
	}

	.primary-points {
		margin-top: 1rem;
		display: flex;
		flex-wrap: wrap;
		gap: 0.6rem;
	}

	.primary-points span {
		padding: 0.38rem 0.78rem;
		border-radius: 999px;
		background: rgba(255, 255, 255, 0.14);
		border: 1px solid rgba(255, 255, 255, 0.3);
		font-size: 0.87rem;
		color: #ffffff;
	}

	@keyframes rise {
		from {
			opacity: 0;
			transform: translateY(14px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@media (max-width: 980px) {
		.hero {
			grid-template-columns: 1fr;
			padding: 2.1rem;
		}

		.section-grid {
			grid-template-columns: 1fr 1fr;
		}

		.testimonials-grid {
			grid-template-columns: 1fr 1fr;
		}

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

		.primary-focus {
			padding: 1.6rem;
		}
	}

	@media (max-width: 700px) {
		.section-grid {
			grid-template-columns: 1fr;
		}

		.testimonials-grid {
			grid-template-columns: 1fr;
		}

		.routine {
			flex-direction: column;
			align-items: flex-start;
		}

		.process {
			grid-template-columns: 1fr 1fr;
		}

		.contact {
			flex-direction: column;
			align-items: flex-start;
			padding: 1.5rem;
		}

		.primary-focus {
			background-position: right center;
		}

	}

	@media (prefers-reduced-motion: reduce) {
		.reveal-on-scroll {
			opacity: 1;
			transform: none;
			transition: none;
		}
	}
</style>
{% endblock %}

{% block content %}
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "WebSite",
      "@id": "{{ request.url_root.rstrip('/') }}#website",
      "url": "{{ request.url_root.rstrip('/') }}",
      "name": "Invario",
      "description": "{{ meta_description }}",
      "inLanguage": "de-DE",
      "publisher": { "@id": "{{ request.url_root.rstrip('/') }}#organization" },
      "potentialAction": {
        "@type": "ContactAction",
        "target": "{{ request.url_root.rstrip('/') }}/kontakt"
      }
    },
    {
      "@type": "Organization",
      "@id": "{{ request.url_root.rstrip('/') }}#organization",
      "name": "Invario",
      "url": "{{ request.url_root.rstrip('/') }}",
      "logo": {
        "@type": "ImageObject",
        "url": "{{ url_for('static', filename='images/logo-1.jpeg') }}"
      },
      "contactPoint": [
        {
          "@type": "ContactPoint",
          "contactType": "customer support",
          "url": "{{ request.url_root.rstrip('/') }}/kontakt",
          "availableLanguage": ["de", "en"]
        }
      ]
    },
    {
      "@type": "SoftwareApplication",
      "@id": "{{ request.url_root.rstrip('/') }}#software",
      "name": "Invario",
      "url": "{{ request.url_root.rstrip('/') }}",
      "description": "{{ meta_description }}",
      "operatingSystem": "Web",
      "applicationCategory": "EducationApplication",
      "softwareVersion": "1.0",
      "image": "{{ url_for('static', filename='images/logo-1.jpeg') }}",
      "author": { "@id": "{{ request.url_root.rstrip('/') }}#organization" },
      "publisher": { "@id": "{{ request.url_root.rstrip('/') }}#organization" },
      "inLanguage": "de-DE"
    },
    {
      "@type": "WebPage",
      "@id": "{{ request.url_root.rstrip('/') }}#webpage",
      "url": "{{ request.url_root.rstrip('/') }}",
      "name": "Invario Startseite",
      "description": "{{ meta_description }}",
      "isPartOf": { "@id": "{{ request.url_root.rstrip('/') }}#website" },
      "mainEntity": { "@id": "{{ request.url_root.rstrip('/') }}#software" }
    }
  ]
}
</script>
<header class="hero" id="top" aria-label="Seitenstart">
	<div>
		<span class="eyebrow">Lehrmittelverwaltungssoftware für Schulen</span>
		<h1>Invario ist die sichere Schulsoftware für Lehrmittelverwaltung, Inventar und Ausleihe.</h1>
		<p>
			Invario hilft Schulen, Lehrmittel, Medien und Ausleihprozesse übersichtlich, digital und DSGVO-konform zu organisieren. Die Oberfläche bleibt für Lehrkräfte und Bibliothekspersonal verständlich, während Sicherheitsfunktionen im Hintergrund für Verlässlichkeit sorgen.
		</p>
		<div class="cta-row">
			{% if 'username' in session %}
				<a class="btn btn-primary" href="{{ url_for('appointments') }}">Buchungsoption nutzen</a>
			{% else %}
				<a class="btn btn-primary" href="{{ url_for('login') }}">Buchungsoption nutzen</a>
			{% endif %}
			<a class="btn btn-secondary" href="{{ url_for('kontakt') }}">Kontakt aufnehmen</a>
		</div>
	</div>
	<div class="hero-right">
		<div class="hero-testimonial">
			<div class="stars">
				<span class="star">★</span>
				<span class="star">★</span>
				<span class="star">★</span>
				<span class="star">★</span>
				<span class="star">★</span>
			</div>
			<a href="#hilfe"><p class="quote">"Mit Invario haben wir unsere Lehrmittelausleihe um 70% beschleunigt. Die Oberfläche ist intuitiv und unsere Bibliothekare sparen täglich Zeit."</p></a>
			<div class="author">
				<div class="avatar">SA</div>
				<div class="info">
					<h4>Silke Arnold</h4>
					<a href="https://www.grundschule-albertschweitzerstrasse.de/"><span>Sekretariat, Grundschule Albert-Schweitzer-Straße</span></a>
				</div>
			</div>
		</div>
		<aside class="hero-card" aria-label="Kurzfakten für Schulen">
			<h3>Was Schulen besonders schätzen</h3>
			<p>Klare Abläufe, feste Ansprechpartner und verständliche Oberflächen für den täglichen Einsatz.</p>
			<div class="stats">
				<div><strong>5 Min</strong><span>Einstieg pro Aufgabe</span></div>
				<div><strong>1 Klick</strong><span>Status und Historie</span></div>
				<div><strong>DSGVO</strong><span>Konform dokumentiert</span></div>
			</div>
		</aside>
	</div>
</header>

<section class="primary-focus reveal-on-scroll" id="zielgruppen" aria-label="Zielgruppen">
	<div class="primary-focus-content">
		<span class="eyebrow">Für wen ist Invario?</span>
		<h2>Passend für jede Schulform</h2>
		<div class="primary-points">
			<a href="#grundschule" class="btn btn-secondary">Grundschule: Übersicht für Klassen 1–4</a>
			<a href="#weiterführende-schulen" class="btn btn-secondary">Weiterführende Schulen: Effizienz für Klassen 5–13</a>
			<a href="#oberschulen" class="btn btn-secondary">Oberschulen: Verwaltung für FOS/BOS</a>
		</div>
	</div>
</section>

<section class="section reveal-on-scroll" id="ablauf">
	<h2>So verläuft die Zusammenarbeit</h2>
	<p>Ein klarer Prozess sorgt für Sicherheit, besonders bei begrenzten Zeitfenstern im Schulbetrieb.</p>
	<div class="process" aria-label="Ablauf in fünf Schritten">
		<div class="step"><strong>1. Kennenlernen</strong><small>Ziele klären</small></div>
		<div class="step"><strong>2. Struktur</strong><small>Bestehende Abläufe erfassen</small></div>
		<div class="step"><strong>3. Einrichtung</strong><small>System passgenau einstellen</small></div>
		<div class="step"><strong>4. Online Einführung</strong><small>Online Videos zu allen Bereichen</small></div>
		<div class="step"><strong>5. Betrieb</strong><small>Persönlich begleiten</small></div>
	</div>
</section>

<section class="section reveal-on-scroll" id="nutzen">
	<h2>Nutzen-Inseln aus dem Schulalltag</h2>
	<div class="section-grid">
		<article class="card">
			<h3>Bücher sicher ausgeben und zurücknehmen</h3>
			<p>Mit Barcode oder QR-Code werden Bücher und Materialien schnell und nachvollziehbar ausgegeben und zurückgenommen – ohne Zettelwirtschaft.</p>
		</article>
		<article class="card">
			<h3>Den Überblick über Laptops und iPads behalten</h3>
			<p>IT-Geräte, Tablets und Medien werden gemeinsam verwaltet. Verantwortlichkeiten und Rückgaben sind jederzeit einsehbar.</p>
		</article>
		<article class="card">
			<h3>Lehrmittel für die Unterrichtsplanung</h3>
			<p>Lehrkräfte planen Materialbedarf im Voraus und vermeiden so Engpässe und Doppelbestellungen.</p>
		</article>
	</div>
</section>

<section class="section reveal-on-scroll" id="warum">
	<h2>Warum Invario?</h2>
	<p>Kurze Übersicht, warum Schulen und Einrichtungen Invario nutzen.</p>
	<div class="section-grid">
		<article class="card">
			<h3>Zeit sparen</h3>
			<p>Automatisierte Ausleihe und klare Prozesse reduzieren Verwaltungsaufwand.</p>
		</article>
		<article class="card">
			<h3>Datenschutz &amp; DSGVO</h3>
			<p>Datenschutzkonforme Speicherung und nachvollziehbare Protokolle.</p>
		</article>
		<article class="card">
			<h3>Einfache Bedienung</h3>
			<p>Intuitive Oberfläche für Lehrkräfte und Verwaltungspersonal.</p>
		</article>
		<article class="card">
			<h3>Transparenz</h3>
			<p>Alle Vorgänge sind dokumentiert – Verantwortlichkeiten bleiben klar.</p>
		</article>
		<article class="card">
			<h3>Schnelle Einrichtung</h3>
			<p>Passgenaue Konfiguration und kurze Einführungszeiten.</p>
		</article>
	</div>
</section>

<section class="section reveal-on-scroll" id="sicherheit">
	<h2>Datenschutz & Sicherheit</h2>
	<div class="section-grid">
		<article class="card">
			<h3>Rollen- und Bereichstrennung</h3>
			<p>Bibliothek, Verwaltung und IT erhalten abgestufte Rechte, sodass jede Rolle nur ihre benötigten Funktionen sieht.</p>
		</article>
		<article class="card">
			<h3>Protokollierung und Nachweis</h3>
			<p>Ausgaben, Rücknahmen und kritische Admin-Aktionen werden dokumentiert und sind jederzeit auditierbar.</p>
		</article>
		<article class="card">
			<h3>Gesicherte Web-Session</h3>
			<p>Sicherheits-Header, HttpOnly-Cookies und klare Session-Richtlinien schützen den laufenden Betrieb vor typischen Webangriffen.</p>
		</article>
	</div>
</section>

<section class="section reveal-on-scroll" id="hilfe">
	<h2>Wir lassen Sie nicht allein</h2>
	<p>Sie erhalten persönlichen Support – per E-Mail, über den Chat mit einem Administrator oder für die Einrichtung vor Ort. So bleibt keine Frage offen und die Hemmschwelle vor der Digitalisierung sinkt.</p>
</section>

<section class="testimonials reveal-on-scroll">
	<h2>Beispiel der Grundschule Albert-Schweitzer-Straße</h2>
	<div class="section-grid">
		<article >
			<h3>Implementierungsbericht — GS Albert‑Schweitzer‑Straße</h3>
			<p>Die Grundschule Albert-Schweitzer-Straße in München hat Invario erfolgreich implementiert, um ihre Lehrmittelverwaltung zu digitalisieren. Nach einer kurzen Einführungsphase konnten Lehrkräfte und Verwaltungspersonal die Software intuitiv nutzen, was zu einer erheblichen Zeitersparnis bei der Ausleihe von Materialien führte. Die klare Rollen- und Bereichstrennung ermöglichte es der Schule, den Datenschutzanforderungen gerecht zu werden, während die Protokollierungsfunktionen für Transparenz und Nachvollziehbarkeit sorgten. Insgesamt hat Invario den Schulalltag effizienter gestaltet und die Organisation von Lehrmitteln deutlich verbessert und damit Zeit für tatsächliche Pädagogik geschaffen.</p>
			<p>Um den Anforderungen von Schulen gerecht zuwerden wurde das System mit hilfe des direkten Feedbacks der Lehrkräfte weiterentwickelt.</p>
		    <p>Die Implementierung von Invario an der Grundschule Albert-Schweitzer-Straße zeigt, wie eine benutzerfreundliche und sichere Softwarelösung den Schulbetrieb nachhaltig verbessern kann. Durch die enge Zusammenarbeit mit der Schule konnten spezifische Bedürfnisse berücksichtigt und eine maßgeschneiderte Lösung geschaffen werden, die den Alltag von Lehrkräften und Verwaltungspersonal erleichtert.</p>
		</article>
	</div>
</section>

<section class="primary-focus reveal-on-scroll" id="grundschule" aria-label="Kategorie für Grundschulen">
	<div class="primary-focus-content">
		<span class="eyebrow">Kategorie: Grundschule, Förderschulen</span>
		<h2>Mehr Übersicht für Klassen 1 bis 4</h2>
		<p>Diese Ansicht ist auf den Schulalltag in Grundschulen zugeschnitten: schnelle Materialausgabe, klar erkennbare Verfügbarkeiten und einfache Workflows für Lehrkräfte ohne lange Einarbeitung.</p>
		<div class="primary-points" aria-label="Vorteile für Grundschulen">
			<span>Schnelle Ausleihe pro Klasse</span>
			<span>Farbcodes für Materialtypen</span>
			<span>Weniger Verwaltungsaufwand</span>
			<span>Kinderleichte Bedienung</span>
		</div>
		<div class="cta-row">
			<a class="btn btn-primary" href="{{ url_for('inventarsystem') }}">Grundschul-Modul ansehen</a>
			<a class="btn btn-secondary" href="{{ url_for('kontakt') }}">Beratung für Grundschule</a>
		</div>
	</div>
</section>

<section class="primary-focus reveal-on-scroll" id="weiterführende-schulen" aria-label="Kategorie für weiterführende Schulen">
	<div class="primary-focus-content">
		<span class="eyebrow">Kategorie: Weiterführende Schulen (Mittelschule, Realschule, Gymnasien, Förderschulen)</span>
		<h2>Mehr Übersicht für Klassen 5 bis 13</h2>
		<p>Diese Ansicht ist auf den Schulalltag in weiterführenden Schulen zugeschnitten: schnelle Materialausgabe, klar erkennbare Verfügbarkeiten und einfache Workflows für Lehrkräfte ohne lange Einarbeitung.</p>
		<div class="primary-points" aria-label="Vorteile für weiterführende Schulen">
			<span>Schnelle Ausleihe pro Klasse</span>
			<span>Farbcodes für Materialtypen</span>
			<span>Weniger Verwaltungsaufwand</span>
			<span>Kinderleichte Bedienung</span>
		</div>
		<div class="cta-row">
			<a class="btn btn-primary" href="{{ url_for('inventarsystem') }}">Modul ansehen</a>
			<a class="btn btn-secondary" href="{{ url_for('kontakt') }}">Beratung für Weiterführende Schulen</a>
		</div>
	</div>
</section>

<section class="primary-focus reveal-on-scroll" id="oberschulen" aria-label="Kategorie für Oberschulen">
	<div class="primary-focus-content">
		<span class="eyebrow">Kategorie: Oberschulen (FOS, BOS)</span>
		<h2>Mehr Übersicht für Klassen 10 bis 13</h2>
		<p>Diese Ansicht ist auf den Schulalltag in Oberschulen zugeschnitten: schnelle Materialausgabe, klar erkennbare Verfügbarkeiten und einfache Workflows für Lehrkräfte ohne lange Einarbeitung.</p>
		<div class="primary-points" aria-label="Vorteile für Oberschulen" >
			<span>Schnelle Ausleihe pro Klasse</span>
			<span>Farbcodes für Materialtypen</span>
			<span>Weniger Verwaltungsaufwand</span>
			<span>Kinderleichte Bedienung</span>
		</div>
		<div class="cta-row">
			<a class="btn btn-primary" href="{{ url_for('inventarsystem') }}">Modul ansehen</a>
			<a class="btn btn-secondary" href="{{ url_for('kontakt') }}">Beratung für Oberschulen</a>
		</div>
	</div>
</section>

<section class="contact reveal-on-scroll" id="kontakt">
	<div>
		<h2>Beratung für den nächsten Digitalisierungsschritt</h2>
		<p>Ein kurzes Gespräch schafft Klarheit über Prioritäten, Sicherheitsanforderungen und realistische Einführungsetappen für den Schulbetrieb.</p>
	</div>
	{% if 'username' in session %}
		<a class="btn btn-secondary" href="{{ url_for('appointments') }}">Buchungsoption nutzen</a>
	{% else %}
		<a class="btn btn-secondary" href="{{ url_for('login') }}">Buchungsoption nutzen</a>
	{% endif %}
</section>

<section class="contact reveal-on-scroll" id="schulträger">
	<div>
		<h2>Sie sind Schulträger?</h2>
		<p>In einer Persönlichen Präsentation klären wir Ihre Anforderungen und prüfen in Zusammenarbeit wie Invario ihren Digitalisierungsvorgang in ihren Schulen unterstützen kann.</p>
	</div>
	<a class="btn btn-secondary" href="{{ url_for('kontakt') }}">Beratungstermin vereinbaren</a>
</section>
<script>
document.addEventListener('DOMContentLoaded', () => {
	const revealItems = document.querySelectorAll('.reveal-on-scroll');

	if (!revealItems.length) {
		return;
	}

	if (window.matchMedia('(prefers-reduced-motion: reduce)').matches || !('IntersectionObserver' in window)) {
		revealItems.forEach((item) => item.classList.add('is-visible'));
		return;
	}

	const observer = new IntersectionObserver((entries, currentObserver) => {
		entries.forEach((entry) => {
			if (entry.isIntersecting) {
				entry.target.classList.add('is-visible');
				currentObserver.unobserve(entry.target);
			}
		});
	}, {
		root: null,
		threshold: 0.18,
		rootMargin: '0px 0px -8% 0px',
	});

	revealItems.forEach((item) => observer.observe(item));
});
</script>
{% endblock %}