{% 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 Lehrmittelverwaltung 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;
	}

	.pictures {
		margin-top: 1rem;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1rem;
		align-items: stretch;
	}

	.picture {
		text-align: center;
		max-width: none;
	}

	.picture img {
		width: 100%;
		aspect-ratio: 4 / 5;
		object-fit: cover;
		border-radius: 12px;
		display: block;
	}

	.picture p {
		text-align: center;
		margin-top: 0.5rem;
		color: #2a4d53;
	}


	.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;
	}

	#zielgruppen .primary-focus-content {
		max-width: 100%;
	}

	#zielgruppen .section-grid {
		margin-top: 1.15rem;
		gap: 0.9rem;
	}

	#zielgruppen .card {
		background: linear-gradient(165deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 249, 243, 0.98) 100%);
		border: 1px solid rgba(201, 218, 208, 0.9);
		box-shadow: 0 10px 20px rgba(14, 39, 35, 0.12);
		padding: 1.1rem;
	}

	#zielgruppen .card h3 {
		color: #214e55;
		margin-bottom: 0.45rem;
	}

	#zielgruppen .card p {
		color: #3f5f64;
		line-height: 1.58;
		margin: 0;
	}

	.contact .btn {
	    display: table;
	    margin: 1.5rem auto 0 auto;
	}

	@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;
		}

		#zielgruppen .card {
			padding: 1rem;
		}
	}

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

		.pictures {
			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>
		<h1>Die Software, die iPads genauso effizient verwaltet wie das Schulbuch.</h1>
		<p>
			Einfachheit für Ihren Schulalltag. Starten Sie in nur 5 Minuten mit der modernen Inventarsoftware für alle Schularten. Intuitiv und sofort einsatzbereit.</p>
		<div class="cta-row">
			{% if 'username' in session %}
				<a class="btn btn-primary" href="{{ url_for('preise') }}">Jetzt kostenlos testen</a>
			{% else %}
				<a class="btn btn-primary" href="{{ url_for('login') }}">Jetzt kostenlos testen</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 80% beschleunigt. Die Beutzeroberflä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 Beutzeroberflä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 Organisationsebene</h2>
		<div class="section-grid">
			<article class="card">
				<h3>Kollegium</h3>
				<p>Ende der Zettelwirtschaft &amp; Barcode-Scan. Inventur und Rückgabe in Sekunden.</p>
			</article>
			<article class="card">
				<h3>IT‑Beauftragte</h3>
				<p>Zero Maintenance &amp; DSGVO‑Sicherheit. Web‑App ohne lokale Server, Daten auf deutschen Servern.</p>
			</article>
			<article class="card">
				<h3>Schulträger &amp; Kämmerer DigitalPakt 2.0 Software Förderung</h3>
				<p>DigitalPakt 2.0 Förderfähigkeit &amp; Rechtssicherheit. Revisionssichere Berichte und transparente Kostenplanung.</p>
			</article>
		</div>
	</div>
</section>

<section class="section reveal-on-scroll" id="warum">
	<h2>Warum Invario?</h2>
	<p>Alleinstellungsmerkmale auf einen Blick: schnell, transparent und sicher.</p>
	<div class="section-grid">
		<article class="card">
			<h3>Das 5‑Minuten‑Startversprechen</h3>
			<p>Browser öffnen, einloggen und Inventar erfassen – kein Installationsaufwand, sofort einsatzbereit.</p>
		</article>
		<article class="card">
			<h3>Preis‑Transparenz</h3>
			<p>Echte Flatrate statt versteckter Gebühren: 350 € Subscription pro Jahr für das Inventarsystem für alle Schulen – vergleichbare Enterprise-Produkte liegen bei weit über 1000 €.</p>
		</article>
		<article class="card">
			<h3>Zero Maintenance</h3>
			<p>Invario ist eine Web-App: automatische Updates erfolgen zentral, keine lokalen Server, kein Betriebsaufwand für Ihre IT. Sie benötigen ausschließlich ein Endgerät mit Internetzugang!</p>
		</article>
		<article class="card">
			<h3>Datenschutz &amp; DSGVO</h3>
			<p>Volle DSGVO‑Konformität und Datenspeicherung auf deutschen Servern.</p>
		</article>
		<article class="card">
			<h3>Revisionssichere Berichte</h3>
			<p>Erstellen Sie PDF‑Berichte auf Knopfdruck für Inventur, Prüfungen und Förderanträge.</p>
		</article>
		<article class="card">
			<h3>Einfache Bedienung</h3>
			<p>Intuitive Beutzeroberfläche für Lehrkräfte und Verwaltungspersonal – geringe Schulungszeiten.</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 über erforderliche Funktionen und Rechte verfügt.</p>
		</article>
		<article class="card">
			<h3>Protokollierung und Nachweis</h3>
			<p>Ausgaben, Rücknahmen und kritische Admin-Aktionen werden lückenlos dokumentiert und bestehen somit jederzeit einen Audit.</p>
		</article>
		<article class="card">
			<h3>Gesicherte Web-Session</h3>
			<p>Sicherheits-Header, Http-Only-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. Ihre Fragen klären wir gerne in persönlichen Gesprächen. Digitalisierung mit Bedacht eingesetzt, hilft Ihnen, Routineaufgaben effizienter zu gestalten, Prozesse zu automatisieren und mehr Zeit für kreative oder strategische Aufgaben zu gewinnen.</p>
</section>

<section class="testimonials reveal-on-scroll">
	<h2>Papierlos zur digitalen Transparenz in Rekordzeit.</h2>
	<div class="testimonials-grid" style="grid-template-columns: 1fr;">
		<article class="testimonial-card">
			<div>
				<h3 style="color: #21363b; font-size: 1.4rem; margin-bottom: 0.8rem;">Implementierungsbericht</h3>
				<p style="font-style: normal; color: #4f666c; line-height: 1.7; margin-bottom: 0.8rem;"><strong>So entstand die Partnerschaft:</strong> Invario wurde in enger Zusammenarbeit mit der Grundschule Albert-Schweitzer-Straße entwickelt und implementiert. Anforderungen wurden gemeinsam in Workshops definiert, und das System mit direktem Feedback der Lehrkräfte iterativ optimiert.</p>
				
				<p style="font-style: normal; color: #4f666c; line-height: 1.7; margin-bottom: 0.8rem;"><strong>Ergebnis im Schulalltag:</strong> Nach kurzer Einführungszeit arbeiten Lehrkräfte und Verwaltung intuitiv und gerne mit der Software. Mit Invario reduzieren sie die Benötigte Zeit für die Inventur der Ipad Koffer. Mit unserer Lösung scannt ihr Team die Bestände im Vorbeigehen. Das Ergebnis: 80 % Zeitersparnis und die sichere Gewissheit, dass jedes Lehrmittel dort ist, wo es hingehört.</p>
				
				<p style="font-style: normal; color: #4f666c; line-height: 1.7;"><strong>Warum das Modell funktioniert:</strong> Durch die enge Partnerschaft mit der Grundschule Ottobrunn an der Albertschweitzerstraße entstanden exakt die gewünschten und erforderlichen Lösungen, um die zeitaufwendigen und teilweise lästigen Routinearbeiten erheblich zu reduzieren und optimieren. Das erfreuliche Ergebnis - Zeit für Pädagogik statt Verwaltung.</p>
			    <a href="https://www.grundschule-albertschweitzerstrasse.de/" class="btn btn-secondary">Webseite besuchen</a>
			</div>
			<div style="border-top: 1px solid #e8ebe7; padding-top: 1rem; margin-top: 0.5rem;">
				<p style="color: #7c8f8c; font-size: 0.9rem; margin: 0;"> <strong style="color: #21363b;">Interessiert?</strong> Kontaktieren Sie uns gerne für einen Besuch, eine Demo oder ein persönliches Gespräch.</p>
			</div>
		</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>Visuell aufbereitete Materialverwaltung für den Grundschulalltag. Ideal für feste Klassenverbände. Spontane Vertretungsstunden können schnell mit Lehrmitteln gestaltet werden.</p>
        <div class="primary-points" aria-label="Vorteile für Grundschulen">
            <span>Visuelle Kisten- & Kisten-Set-Ausleihe</span>
            <span>Feste Klassen-Materialkisten</span>
            <span>Intuitiv & ohne Schulung nutzbar</span>
        </div>
        <div class="cta-row">
            <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, Gymnasium)</span>
        <h2>Mehr Übersicht für Klassen 5 bis 13</h2>
        <p>Kooridnierter Zugriff auf Fachräume, Experimentierkästen und digitale Gerätekoffer. Reibungslose Abläufe für große Kollegien und wechselnde Fachlehrer.</p>
        <div class="primary-points" aria-label="Vorteile für weiterführende Schulen">
            <span>Fachraum- & Inventarreservierung</span>
            <span>Koffer- & Tablet-Set-Verwaltung</span>
            <span>Parallele Ausleihen durch Fachlehrkräfte</span>
        </div>
        <div class="cta-row">
            <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: Berufliche Oberschulen (FOS, BOS)</span>
        <h2>Mehr Übersicht für Klassen 10 bis 13</h2>
        <p>Professionelles Ressourcenmanagement für Spezialausstattung, Praktikumsmaterialien und eigenverantwortliche Ausleihen im Kurssystem.</p>
        <div class="primary-points" aria-label="Vorteile für Oberschulen">
            <span>Schüler-Eigenausleihe & Zeitfenster</span>
            <span>Verwaltung von Spezial- & Labor-Equipment</span>
            <span>Export & Nachverfolgung für Inspektionen</span>
        </div>
        <div class="cta-row">
            <a class="btn btn-secondary" href="{{ url_for('kontakt') }}">Beratung für Oberschulen</a>
        </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 archiviert 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 dadurch mögliche Engpässe und Doppelbestellungen.</p>
		</article>
	</div>
</section>

<section class="section reveal-on-scroll" id="ablauf">
	<h2>Unser Team</h2>
	<p>Wir sind zwei ehemalige Schüler, die sich durch ihre Erfahrungen in verschiedenen Schulen mit deren Bedürfnisse vertraut machen konnten. Diese Erfahrungen haben uns dermaßen motiviert – eine einfache Lösung für den Schulalltag zu entwickeln.</p>
	<div class="pictures">
		<div class="picture">
				<img src="{{ url_for('static', filename='images/1778441641958.png') }}" alt="Simon Brieger">
				<p><strong>Simon Brieger</strong><br>Gründer & Geschäftsführer</p>
		</div>
		<div class="picture">
				<img src="{{ url_for('static', filename='images/1778441641957.png') }}" alt="Maximilian Gründinger">
				<p><strong>Maximilian Gründinger</strong><br>Gründer</p>
		</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="contact reveal-on-scroll" id="kontakt">
	<div>
		<h2>Beratung für den nächsten Digitalisierungsschritt</h2>
		<p>Ein persönliches Gespräch schafft Klarheit über Funktionalitäten, Prioritäten, Sicherheitsanforderungen und realistische Einführungsphasen für den Schulbetrieb.</p>
	</div>
	{% if 'username' in session %}
			<a class="btn btn-secondary" href="{{ url_for('preise') }}">In 5 Minuten startklar</a>
	{% else %}
			<a class="btn btn-secondary" href="{{ url_for('login') }}">Jetzt kostenlos testen</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 gemeinsamer 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 %}