From e04a659fe9e970f5e834a8d31dad343b3856f024 Mon Sep 17 00:00:00 2001
From: AegisSight <info@aegis-sight.de>
Date: Wed, 22 Jul 2026 22:48:27 +0200
Subject: [PATCH] Problem-Punkte bleiben in einer Reihe, Anwendungsfall-Karten
 bundig

Die drei Punkte im Problem-Abschnitt standen ab 1024 Pixel Fensterbreite
abwaerts in zwei Spalten, die dritte rutschte allein in die naechste
Zeile. Sie bleiben jetzt bis 768 Pixel dreispaltig, mit engerem Abstand.
Auf dem Telefon stehen sie weiter untereinander, dreispaltig waere dort
unlesbar.

Bei den Anwendungsfall-Karten brach nur eine Ueberschrift einzeilig um,
die beiden anderen zweizeilig. Dadurch hatte die erste Karte unten 58
Pixel Luft und die anderen 27. Die Ueberschrift hat jetzt zwei Zeilen
Mindesthoehe, alle Absaetze beginnen auf gleicher Hoehe. Auf dem Telefon
entfaellt die Mindesthoehe, dort steht jede Karte fuer sich.
---
 css/style.css | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/css/style.css b/css/style.css
index e2953e3..8366a94 100644
--- a/css/style.css
+++ b/css/style.css
@@ -303,9 +303,11 @@ a { color:inherit; text-decoration:none; }
 /* Anwendungsfaelle unter der Karte im Bereich Live-Lagebilder */
 .einsatz-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; margin-top:40px; }
 .einsatz-card { background:var(--white); border:1px solid var(--gray-100); border-radius:var(--radius-lg); padding:26px 28px; box-shadow:var(--shadow); }
-.einsatz-card h3 { color:var(--navy); font-size:1.2rem; margin:0 0 10px; }
+/* Zwei Zeilen Mindesthoehe, damit die Absaetze aller drei Karten auf
+   gleicher Hoehe beginnen und unten gleich viel Luft bleibt. */
+.einsatz-card h3 { color:var(--navy); font-size:1.2rem; line-height:1.35; margin:0 0 10px; min-height:2.7em; }
 .einsatz-card p { color:var(--text-light); font-size:0.97rem; line-height:1.6; margin:0; }
-@media(max-width:768px) { .einsatz-grid { gap:16px; margin-top:28px; } .einsatz-card { padding:20px 22px; } }
+@media(max-width:768px) { .einsatz-grid { gap:16px; margin-top:28px; } .einsatz-card { padding:20px 22px; } .einsatz-card h3 { min-height:0; } }
 
 /* Testzugang-Formular im Anfrage-Popup der Startseite */
 .form-group select { width:100%; padding:10px 14px; border:1px solid var(--gray-200); border-radius:var(--radius); font-family:inherit; font-size:0.95rem; color:var(--text); background-color:var(--base); transition:border-color 0.2s; appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6478' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; background-size:18px; padding-right:38px; }
@@ -346,6 +348,9 @@ a { color:inherit; text-decoration:none; }
 @media(max-width:1024px) {
     .grid-3 { grid-template-columns:repeat(2,1fr); }
     .grid-4 { grid-template-columns:repeat(2,1fr); }
+    /* Die drei Punkte im Problem-Abschnitt bleiben in einer Reihe */
+    #problem .grid-3 { grid-template-columns:repeat(3,1fr); gap:16px; }
+    #problem .problem-card { padding:28px 10px; }
     .hero-title { font-size:2.5rem; }
     .section { padding:64px 0; }
     .workflow-connector { width:40px; }
@@ -358,6 +363,9 @@ a { color:inherit; text-decoration:none; }
     .cta-buttons { flex-direction:column; }
     .cta-buttons .btn { width:100%; }
     .grid-3,.grid-4 { grid-template-columns:1fr; gap:20px; }
+    /* Auf dem Telefon untereinander, drei Spalten waeren dort unlesbar */
+    #problem .grid-3 { grid-template-columns:1fr; gap:20px; }
+    #problem .problem-card { padding:32px 20px; }
     .hero { min-height:75vh; }
     .hero-brand { padding:0 20px; }
     .hero-title { font-size:1.9rem; }