Better allignment for the main window

Website/templates/main.html

@@ -213,7 +213,18 @@
 		border: 1px solid #d0d7cf;
 		background: #ffffff;
 		box-shadow: 0 14px 30px rgba(28, 45, 41, 0.05);
-		animation: rise 680ms ease both;
+	}
+
+	.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 {
@@ -344,8 +355,6 @@
 		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 {
@@ -549,6 +558,14 @@
 		}
 
 	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.reveal-on-scroll {
+			opacity: 1;
+			transform: none;
+			transition: none;
+		}
+	}
 </style>
 {% endblock %}
 
@@ -660,7 +677,7 @@
 	</div>
 </header>
 
-<section class="primary-focus" id="zielgruppen" aria-label="Zielgruppen">
+<section class="primary-focus reveal-on-scroll" id="zielgruppen" aria-label="Zielgruppen">
 	<div class="primary-focus-content">
 		<span class="eyebrow">Für wen ist das?</span>
 		<h2>Passend für jede Schulform</h2>
@@ -672,7 +689,7 @@
 	</div>
 </section>
 
-<section class="section" id="ablauf" style="animation-delay: 100ms;">
+<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">
@@ -684,7 +701,7 @@
 	</div>
 </section>
 
-<section class="section" id="nutzen" style="animation-delay: 180ms;">
+<section class="section reveal-on-scroll" id="nutzen">
 	<h2>Nutzen-Inseln aus dem Schulalltag</h2>
 	<div class="section-grid">
 		<article class="card">
@@ -702,7 +719,7 @@
 	</div>
 </section>
 
-<section class="section" id="sicherheit" style="animation-delay: 220ms;">
+<section class="section reveal-on-scroll" id="sicherheit">
 	<h2>Datenschutz & Sicherheit</h2>
 	<div class="section-grid">
 		<article class="card">
@@ -720,12 +737,12 @@
 	</div>
 </section>
 
-<section class="section" id="hilfe" style="animation-delay: 240ms;">
+<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">
+<section class="testimonials reveal-on-scroll">
 	<h2>Das sagen andere Schulleitungen</h2>
 	<div class="testimonials-grid">
 		<div class="testimonial-card">
@@ -782,7 +799,7 @@
 	</div>
 </section>
 
-<section class="primary-focus" id="grundschule" aria-label="Kategorie für Grundschulen">
+<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>
@@ -800,7 +817,7 @@
 	</div>
 </section>
 
-<section class="primary-focus" id="weiterführende-schulen" aria-label="Kategorie für weiterführende Schulen">
+<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>
@@ -818,7 +835,7 @@
 	</div>
 </section>
 
-<section class="primary-focus" id="oberschulen" aria-label="Kategorie für Oberschulen">
+<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>
@@ -836,7 +853,7 @@
 	</div>
 </section>
 
-<section class="contact" id="kontakt">
+<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>
@@ -848,11 +865,40 @@
 	{% endif %}
 </section>
 
-<section class="contact" id="schulträger">
+<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 %}