Add hero logo strip section with responsive styling and images

Website/templates/main.html

@@ -102,6 +102,22 @@
 		border: 1px solid #3a6970;
 	}
 
+	.hero-logo-strip {
+		margin-bottom: 0.7rem;
+		display: grid;
+		grid-template-columns: repeat(3, minmax(0, 1fr));
+		gap: 0.4rem;
+	}
+
+	.hero-logo-strip img {
+		width: 100%;
+		height: 64px;
+		object-fit: cover;
+		border-radius: 8px;
+		border: 1px solid #4f7c82;
+		background: #ffffff;
+	}
+
 	.hero-card h3 {
 		font-size: clamp(1rem, 1.8vw, 1.35rem);
 		margin-bottom: 0.55rem;
@@ -352,6 +368,10 @@
 		.logo-grid {
 			grid-template-columns: 1fr;
 		}
+
+		.hero-logo-strip {
+			grid-template-columns: 1fr;
+		}
 	}
 </style>
 {% endblock %}
@@ -376,6 +396,11 @@
 		</div>
 	</div>
 	<aside class="hero-card" aria-label="Kurzfakten für Schulen">
+		<div class="hero-logo-strip" aria-label="Logo Varianten">
+			<img src="{{ url_for('static', filename='images/logo-1.jpeg', v='20260330') }}" alt="Invario Logo 1">
+			<img src="{{ url_for('static', filename='images/logo-2.jpeg', v='20260330') }}" alt="Invario Logo 2">
+			<img src="{{ url_for('static', filename='images/logo-3.jpeg', v='20260330') }}" alt="Invario Logo 3">
+		</div>
 		<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">