{% extends "base.html" %}

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

{% block head %}
{{ super() }}
<style>
	.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);
		animation: rise 680ms ease both;
	}

	.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);
		animation: rise 680ms ease both;
		animation-delay: 50ms;
	}

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

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

	}
</style>
{% endblock %}

{% block content %}
<section class="hero" id="top">
	<div>
		<span class="eyebrow">Lehrmittelverwaltungssoftware für Schulen</span>
		<h1>Lehrmittel, Schul-IT und Ausleihen in einem sicheren System.</h1>
		<p>
			Invario ist eine Lehrmittelverwaltungssoftware, die Schulbibliothek, Inventar und digitale Ausleihe zusammenführt. Prozesse bleiben bewusst schlank und schnell, während Sicherheitsfunktionen wie rollenbasierte Rechte, Sitzungsabsicherung und nachvollziehbare Protokolle im Hintergrund dauerhaft aktiv sind.
		</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('dienstleistungen') }}">Leistungen ansehen</a>
			<a class="btn btn-secondary" href="{{ url_for('team') }}">Team ansehen</a>
			<a class="btn btn-secondary" href="{{ url_for('kontakt') }}">Direkt kontaktieren</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>
			<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>
			<div class="author">
				<div class="avatar">SR</div>
				<div class="info">
					<h4>Sabine Roth</h4>
					<span>Schulleitung, Sekundarschule Zentral</span>
				</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>
</section>

<section class="testimonials">
	<h2>Das sagen unsere Schulen</h2>
	<div class="testimonials-grid">
		<div class="testimonial-card">
			<div class="testimonial-stars">
				<span class="star">★</span>
				<span class="star">★</span>
				<span class="star">★</span>
				<span class="star">★</span>
				<span class="star">★</span>
			</div>
			<p class="testimonial-text">"Mit Invario haben wir unsere Lehrmittelausleihe um 70% beschleunigt. Die Schüler wissen sofort, welche Materialien verfügbar sind, ohne die Bibliothek zu stören."</p>
			<div class="testimonial-author">
				<div class="testimonial-avatar">SR</div>
				<div class="testimonial-info">
					<h4>Sabine Roth</h4>
					<span>Schulleitung, Sekundarschule Zentral</span>
				</div>
			</div>
		</div>
		<div class="testimonial-card">
			<div class="testimonial-stars">
				<span class="star">★</span>
				<span class="star">★</span>
				<span class="star">★</span>
				<span class="star">★</span>
				<span class="star">★</span>
			</div>
			<p class="testimonial-text">"Die Sicherheitsfeatures und die klare Dokumentation geben uns ein beruhigendes Gefühl. Datenschutz ist für uns als Schule essentiell – hier sind wir bestens aufgehoben."</p>
			<div class="testimonial-author">
				<div class="testimonial-avatar">MT</div>
				<div class="testimonial-info">
					<h4>Martin Thalter</h4>
					<span>IT-Koordinator, Gymnasium Nord</span>
				</div>
			</div>
		</div>
		<div class="testimonial-card">
			<div class="testimonial-stars">
				<span class="star">★</span>
				<span class="star">★</span>
				<span class="star">★</span>
				<span class="star">★</span>
				<span class="star">★</span>
			</div>
			<p class="testimonial-text">"Die Schnittstelle zwischen Inventarbuchhaltung und Lehrmittelausleihe ist brillant gelöst. Wir sparen monatlich Stunden an manueller Verwaltungsarbeit."</p>
			<div class="testimonial-author">
				<div class="testimonial-avatar">KM</div>
				<div class="testimonial-info">
					<h4>Karina Müller</h4>
					<span>Verwaltungsleiterin, Primarschule West</span>
				</div>
			</div>
		</div>
	</div>
</section>

<section class="primary-focus" id="grundschule" aria-label="Kategorie für Grundschulen">
	<div class="primary-focus-content">
		<span class="eyebrow">Kategorie: Grundschule</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="section" id="nutzen" style="animation-delay: 100ms;">
	<h2>Vorteile für Verwaltung und Bibliothek</h2>
	<p>Alle Daten zu Lehrmitteln, Geräten und Ausleihen sind gebündelt, sodass Rückfragen schnell geklärt werden können.</p>
	<div class="section-grid">
		<article class="card">
			<h3>Lehrmittel für einfache Unterichtsplanung</h3>
			<p>Bücher und Unterrichtsmaterialien lassen sich schon im vorhinein ganz bequem von zuhause Planen. Dadurch vermeiden sich doppel benötigungen durch Lehrkräfte und somit Spannungen im Kollegium.</p>
		</article>
		<article class="card">
			<h3>Scanner-gestuetzte Ausleihe</h3>
			<p>Barcode- oder QR-Workflows beschleunigen Ausgabe und Rücknahme deutlich, auch bei grossen Bestandsmengen.</p>
		</article>
		<article class="card">
			<h3>IT- und Medienbestand kombiniert</h3>
			<p>Tablets, Laptops, Webcams, Print-Medien und Lehrmittel werden gemeinsam verwaltet statt in voneinander getrennten Listen.</p>
		</article>
	</div>
</section>

<section class="section" id="alltag" style="animation-delay: 180ms;">
	<h2>Typische Lehrmittel-Szenarien</h2>
	<p>Die folgenden Beispiele orientieren sich an realen Schulabläufen mit Fokus auf Tempo und Nachvollziehbarkeit.</p>
	<div class="routine-list">
		<div class="routine">
			<div>
				<b>Neue Klassensätze treffen ein</b>
				Lehrmittel werden etikettiert, Klassen zugeordnet und mit Ausgabehistorie gespeichert.
			</div>
			<span>Lehrmittel</span>
		</div>
		<div class="routine">
			<div>
				<b>Rückfrage zu ausgeliehenen Medien</b>
				Verfügbarkeit, Entleiher und Rückgabedatum sind sofort sichtbar, ohne manuelle Listenpflege.
			</div>
			<span>Ausleihe</span>
		</div>
		<div class="routine">
			<div>
				<b>Defekt bei einem Endgerät</b>
				Zustand, Schaden und Verantwortlichkeiten werden dokumentiert, inklusive klarer Eskalationswege.
			</div>
			<span>Sicherheit</span>
		</div>
	</div>
</section>

<section class="section" id="sicherheit" style="animation-delay: 220ms;">
	<h2>Erweiterte Sicherheit für den Schulbetrieb</h2>
	<p>Die Plattform setzt auf Datenschutz und Betriebssicherheit, damit personenbezogene Daten und Inventardaten langfristig geschützt bleiben.</p>
	<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 benoetigten 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" id="ablauf" style="animation-delay: 260ms;">
	<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. Schulung</strong><small>Praxisnah einführen</small></div>
		<div class="step"><strong>5. Betrieb</strong><small>Persönlich begleiten</small></div>
	</div>
</section>

<section class="contact" 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>
{% endblock %}