{% extends "base.html" %}

{% block title %}Inventarlösungen{% endblock %}

{% block head %}
{{ super() }}
<style>
	.hero {
		margin-top: 1.2rem;
		padding: 3.8rem;
		border-radius: 24px;
		background: linear-gradient(135deg, #f8fcff 0%, #e1ecf3 70%, #d4e3ed 100%);
		border: 1px solid #cfdbe4;
		display: grid;
		grid-template-columns: 1.2fr 1fr;
		gap: 2rem;
		position: relative;
		overflow: hidden;
		box-shadow: 0 25px 55px rgba(17, 35, 50, 0.1);
	}

	.hero::after {
		content: "";
		position: absolute;
		right: -80px;
		bottom: -90px;
		width: 280px;
		height: 280px;
		border-radius: 999px;
		background: radial-gradient(circle at center, #0b5b89 0%, #0b5b89 40%, transparent 70%);
		opacity: 0.12;
		pointer-events: none;
	}

	.eyebrow {
		display: inline-block;
		margin-bottom: 0.85rem;
		padding: 0.3rem 0.65rem;
		border-radius: 999px;
		font-size: clamp(0.7rem, 0.9vw, 0.85rem);
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: #0c4f78;
		background: #d9ebf6;
	}

	.hero h1 {
		font-size: clamp(2rem, 5.5vw, 4rem);
		color: #06293e;
		text-wrap: balance;
	}

	.hero p {
		max-width: 56ch;
		margin-top: 1.1rem;
		font-size: clamp(0.95rem, 1.4vw, 1.2rem);
	}

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

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

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

	.btn-primary {
		color: #ffffff;
		background: linear-gradient(120deg, #0c5a86 0%, #08486c 100%);
		box-shadow: 0 8px 20px rgba(11, 87, 128, 0.26);
	}

	.btn-secondary {
		color: #0d4567;
		background: #ffffff;
		border-color: #b8cddc;
	}

	.hero-card {
		align-self: end;
		background: #0e2f44;
		color: #dcf0ff;
		border-radius: 18px;
		padding: 1.2rem;
		border: 1px solid #194b68;
	}

	.hero-card h3 {
		font-size: clamp(1rem, 2vw, 1.4rem);
		margin-bottom: 0.6rem;
	}

	.hero-card p {
		color: #b6d6ea;
		font-size: clamp(0.9rem, 1.1vw, 1.05rem);
		margin: 0;
	}

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

	.stats div {
		padding: 0.55rem 0.65rem;
		border-radius: 12px;
		background: #153a52;
		border: 1px solid #2a5673;
	}

	.stats strong {
		display: block;
		font-family: "Space Grotesk", system-ui, sans-serif;
		color: #ffffff;
		font-size: 1.08rem;
	}

	.stats span {
		color: #9ec5dc;
		font-size: 0.8rem;
	}

	.section {
		margin-top: 2.2rem;
		padding: 2rem;
		border-radius: 18px;
		border: 1px solid #d4dde5;
		background: #ffffff;
		box-shadow: 0 15px 35px rgba(20, 40, 55, 0.05);
		animation: rise 700ms ease both;
	}

	.section h2 {
		font-size: clamp(1.5rem, 3.2vw, 2.8rem);
		margin-bottom: 0.5rem;
		color: #0f334b;
	}

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

	.card {
		padding: 1rem;
		border-radius: 14px;
		border: 1px solid #d9e2ea;
		background: linear-gradient(160deg, #fbfdff 0%, #f4f8fb 100%);
	}

	.card h3 {
		font-size: clamp(1rem, 1.8vw, 1.3rem);
		color: #113c58;
		margin-bottom: 0.45rem;
	}

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

	.project-list {
		margin-top: 1.1rem;
		display: grid;
		gap: 0.8rem;
	}

	.project {
		padding: 0.95rem 1rem;
		border-radius: 14px;
		border: 1px solid #cfdae4;
		background: #f8fbfd;
		display: flex;
		gap: 1rem;
		justify-content: space-between;
		align-items: center;
	}

	.project b {
		display: block;
		color: #0b3753;
		margin-bottom: 0.2rem;
		font-size: clamp(1rem, 1.5vw, 1.15rem);
	}

	.project span {
		font-size: clamp(0.8rem, 0.95vw, 0.95rem);
		color: #4a6579;
		border: 1px solid #bfd0dd;
		padding: 0.2rem 0.55rem;
		border-radius: 999px;
		white-space: nowrap;
	}

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

	.step {
		padding: 0.8rem 0.65rem;
		text-align: center;
		border-radius: 12px;
		border: 1px solid #ccdae5;
		background: #f7fafc;
	}

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

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

	.team-note {
		margin-top: 0.85rem;
		padding: 0.9rem 1rem;
		border-radius: 12px;
		border: 1px solid #f0c18b;
		background: linear-gradient(120deg, #fffaf3 0%, #ffeed8 100%);
		color: #7d4f14;
		font-weight: 600;
	}

	.contact {
		margin-top: 2rem;
		border-radius: 20px;
		padding: 2.3rem;
		border: 1px solid #0f496f;
		background: linear-gradient(120deg, #114e75 0%, #0a3d5c 100%);
		color: #d2ebfa;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
	}

	.contact h2 {
		color: #ffffff;
		font-size: clamp(1.4rem, 3.2vw, 2.8rem);
		margin-bottom: 0.4rem;
	}

	.contact p {
		color: #b9d8ec;
		font-size: clamp(0.95rem, 1.2vw, 1.1rem);
	}

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

	.site-footer {
		margin-top: 2rem;
		padding: 1rem 0 0.3rem;
		color: #6a8192;
		display: flex;
		justify-content: space-between;
		gap: 1rem;
		font-size: 0.95rem;
	}

	.partnership {
	    margin-top: 2.2rem;
	    padding: 2.5rem;
	    border-radius: 18px;
	    background: linear-gradient(135deg, #f0f7fc 0%, #e6effa 100%);
	    border: 2px solid var(--brand);
	    display: grid;
	    grid-template-columns: 1fr 1.2fr;
	    gap: 2rem;
	    align-items: center;
	}

	.partnership-icon {
	    font-size: clamp(4rem, 8vw, 6rem);
	    text-align: center;
	    line-height: 1;
	}

	.partnership-content h3 {
	    font-size: clamp(1.3rem, 2.5vw, 1.8rem);
	    color: var(--brand);
	    margin-bottom: 0.8rem;
	}

	.partnership-content p {
	    margin-bottom: 0.8rem;
	    color: var(--text-soft);
	    font-size: clamp(0.95rem, 1.1vw, 1.05rem);
	}

	.partnership-badges {
	    display: flex;
	    flex-wrap: wrap;
	    gap: 0.6rem;
	    margin-top: 1rem;
	}

	.badge {
	    display: inline-block;
	    padding: 0.4rem 0.85rem;
	    border-radius: 999px;
	    background: var(--brand);
	    color: #ffffff;
	    font-size: clamp(0.8rem, 0.95vw, 0.95rem);
	    font-weight: 600;
	}

	@media (max-width: 700px) {
	    .partnership {
	        grid-template-columns: 1fr;
	        padding: 1.8rem;
	    }

	    .partnership-icon {
	        font-size: clamp(3rem, 6vw, 4rem);
	    }
	}

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

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

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

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

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

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

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

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

		.site-footer {
			flex-direction: column;
			padding-bottom: 1.2rem;
		}
	}
</style>
{% endblock %}

{% block content %}
<section class="hero" id="top">
	<div>
		<span class="eyebrow">IT Lösungen mit Haltung</span>
		<h1>Zuhören. Verstehen. Planen. Realisieren.</h1>
		<p>
			Wir sind spezialisiert auf Schulen aller Art und machen Schulinventur endlich einfach: Unser DSGVO-konformes Inventarsystem sorgt für klare Ordnung, volle Transparenz und schnelle Abläufe im Schulalltag. Jede Lösung wird individuell für Ihre Einrichtung entwickelt, mit passgenauen Features und einer besonders schnellen, unkomplizierten Inbetriebnahme.
		</p>
		<div class="cta-row">
			{% if 'username' in session %}
				<a class="btn btn-primary" href="{{ url_for('appointments') }}">Termin anfragen</a>
			{% else %}
				<a class="btn btn-primary" href="{{ url_for('login') }}">Termin anfragen</a>
			{% endif %}
			<a class="btn btn-primary" href="{{ url_for('kontakt') }}">Kontakt aufnehmen</a>
			<a class="btn btn-secondary" href="{{ url_for('dienstleistungen') }}">Dienstleistungen ansehen</a>
		</div>
	</div>
	<aside class="hero-card" aria-label="Kurzfakten">
		<h3>Inventur mit Verstand</h3>
		<p>
			Von Infrastruktur bis Governance: Wir verbinden konzeptionelle Tiefe mit
			pragmatischer Umsetzung im Tagesgeschäft.
		</p>
		<div class="stats">
			<div><strong>25+</strong><span>aktive Mandate</span></div>
			<div><strong>98%</strong><span>Zieltermine erreicht</span></div>
			<div><strong>24/7</strong><span>Servicebereit</span></div>
		</div>
	</aside>
</section>

<section class="partnership" id="entwicklung">
    <div class="partnership-icon">🤝</div>
    <div class="partnership-content">
        <h3>Entwickelt mit Schulen – für Schulen</h3>
        <p>
			Unser Inventarsystem wurde nicht theoretisch konzipiert, sondern in enger Zusammenarbeit mit einzelnen Schulen entwickelt. Wir verstehen die täglichen Herausforderungen im Schulbetrieb und entwickeln Lösungen, die wirklich einen Vorteil für den Schulalltag bringen.
        </p>
        <div class="partnership-badges">
            <span class="badge">✓ Schulgetestet</span>
            <span class="badge">✓ Praxisorientiert</span>
            <span class="badge">✓ DSGVO-konform</span>
            <span class="badge">✓ Einfach zu bedienen</span>
        </div>
    </div>
</section>

<section class="section" id="leistungen" style="animation-delay: 100ms;">
	<h2>Leistungsbereiche</h2>
	<p>Klare Gliederung in Konnektivität, Inventarverwaltung und laufenden Betrieb.</p>
	<div class="section-grid">
		<article class="card">
			<h3>Konnektivität und Netzwerk</h3>
			<p>Stabile Anbindung Ihrer Schulstandorte, saubere Netzstruktur und sichere Erreichbarkeit aller relevanten Systeme.</p>
		</article>
		<article class="card">
			<h3>Inventar und Lizenzmanagement</h3>
			<p>Zentrale Verwaltung von Geräten und Lizenzen mit schneller Übersicht, nachvollziehbaren Prozessen und klaren Zuständigkeiten.</p>
		</article>
		<article class="card">
			<h3>Support, Updates und Beratung</h3>
			<p>Persönliche Ansprechpartner, kurze Reaktionszeiten und planbare Updates für einen zuverlässigen Betrieb im Schulalltag.</p>
		</article>
	</div>
</section>

<section class="section" id="projekte" style="animation-delay: 180ms;">
	<h2>Sicherheit</h2>
	<p>Wir legen großen Wert auf die Sicherheit Ihrer Daten und Systeme. Die Daten liegen ausschließlich gesichert bei ihnen auf dem Server und wird in keinem Fall an dritte weitergegeben.</p>
	<div class="project-list">
		<div class="project">
			<div>
				<b>DSGVO</b>
				Alle Daten werden DSGVO-konform verarbeitet, mit klaren Einwilligungen, transparenter Dokumentation und sicheren Löschprozessen.
			</div>
			<span>Netzwerk</span>
		</div>
		<div class="project">
			<div>
	    		<b>Sicherheitsprüfungen</b>
	    		Automatisierte Sicherheitsprüfungen und klare Compliance-Standards für den Einsatz im öffentlichen Bereich. Alle an uns herangetragene Fehler werden umgehend behoben und mit einem transparenten Prozess dokumentiert.
			</div>
			<span>Security</span>
		</div>
		<div class="project">
			<div>
				<b>Betrieb und Updates</b>
				Regelmäßige Updates, schnelle Störungsbehebung und laufende Optimierung sorgen für einen dauerhaft stabilen Schulbetrieb.
			</div>
			<span>Updates</span>
		</div>
	</div>
</section>

<section class="section" id="team" style="animation-delay: 260ms;">
	<h2>Zusammenarbeit</h2>
	<p>Strukturiert, nachvollziehbar und mit festen Ansprechpartnern von der Analyse bis zum Betrieb.</p>
	<div class="process" aria-label="Prozessschritte">
		<div class="step"><strong>Zuhören</strong><small>Anforderungen erfassen</small></div>
		<div class="step"><strong>Verstehen</strong><small>Kontext analysieren</small></div>
		<div class="step"><strong>Besprechen</strong><small>Optionen priorisieren</small></div>
		<div class="step"><strong>Planen</strong><small>Roadmap festlegen</small></div>
		<div class="step"><strong>Realisieren</strong><small>Lösung liefern</small></div>
		<div class="step"><strong>Unterstützen</strong><small>Betrieb absichern</small></div>
	</div>
</section>

<section class="contact" id="kontakt">
	<div>
		<h2>Bereit für das nächste IT-Projekt?</h2>
		<p>In einem kurzen Erstgespräch klären wir gemeinsam Zielbild, Risiken und realistische Umsetzungsschritte. Erstellen Sie dafür einfach ein Konto über den Button oben rechts und buchen Sie anschließend über die Kalenderfunktion einen Termin mit Ihrem Schulnamen und dem Betreff „Erstgespräch“. Alternativ können Sie uns jederzeit per E-Mail kontaktieren oder unseren Website-Chat nutzen.</p>
	</div>
	{% if 'username' in session %}
		<a class="btn btn-secondary" href="{{ url_for('appointments') }}">Termin anfragen</a>
	{% else %}
		<a class="btn btn-secondary" href="{{ url_for('login') }}">Termin anfragen</a>
	{% endif %}
</section>
{% endblock %}