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