diff --git a/css/style.css b/css/style.css index 59ad1a9..62084bc 100644 --- a/css/style.css +++ b/css/style.css @@ -48,6 +48,14 @@ a { color:inherit; text-decoration:none; } .nav-extras { display:flex; align-items:center; gap:18px; } +/* Testzugang-Knopf in der Navigation */ +.nav-cta { display:inline-block; background:var(--gold); color:var(--navy); font-size:0.88rem; font-weight:600; padding:9px 18px; border-radius:var(--radius); white-space:nowrap; transition:background 0.2s; } +.nav-cta:hover { background:var(--gold-dark); color:var(--navy); } +.mobile-menu .nav-cta { display:block; text-align:center; margin:10px 0 4px; padding:13px 18px; font-size:1rem; } + +/* Zwei Knoepfe nebeneinander im Kontakt-Abschnitt */ +.cta-buttons { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; } + .mobile-menu-toggle { display:none; background:none; border:none; cursor:pointer; width:32px; height:24px; position:relative; flex-direction:column; justify-content:space-between; } .mobile-menu-toggle span { display:block; width:100%; height:2px; background:var(--navy); border-radius:2px; transition:transform 0.3s,opacity 0.3s; } .mobile-menu-toggle.active span:nth-child(1) { transform:rotate(45deg) translate(7px,7px); } @@ -286,12 +294,47 @@ a { color:inherit; text-decoration:none; } .modal-close:hover { color:var(--navy); } .modal-content h2 { font-size:1.5rem; font-weight:700; color:var(--navy); margin-bottom:8px; } .modal-sub { font-size:0.95rem; color:var(--text-light); margin-bottom:28px; } -.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; } +.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:end; } .form-group { margin-bottom:16px; } .form-group label { display:block; font-size:0.82rem; font-weight:600; color:var(--navy); margin-bottom:6px; text-transform:uppercase; letter-spacing:0.04em; } .form-group input, .form-group textarea { 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:var(--base); transition:border-color 0.2s; } .form-group input:focus, .form-group textarea:focus { outline:none; border-color:var(--gold); } .form-group textarea { resize:vertical; } +/* 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); } +/* 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; } .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; } +.form-group select:focus { outline:none; border-color:var(--gold); } +.form-group input[aria-invalid="true"] { border-color:#C0392B; } +.tf-note { display:block; font-size:0.85rem; margin-top:6px; line-height:1.5; } +.tf-note-error { color:#C0392B; } +.tf-note-ok { color:#1E7A44; } +.tf-note-warn { color:#8A6D1B; } +.tf-hint { font-size:0.82rem; color:var(--text-light); margin-left:5px; font-weight:400; text-transform:none; letter-spacing:0; white-space:nowrap; } +/* Kompakte Zeilenhoehe fuer mehrzeilige Labels; Felder einer Reihe per align-items:end buendig */ +#trial-form .form-row label { line-height:1.35; } +.tf-consent { display:flex; align-items:flex-start; gap:12px; margin:6px 0 22px; } +.tf-consent input { width:18px; height:18px; margin-top:2px; flex:0 0 auto; accent-color:var(--gold-dark); } +.tf-consent label { font-size:0.9rem; color:var(--text-light); line-height:1.6; font-weight:400; text-transform:none; letter-spacing:0; margin:0; } +.tf-consent a { color:var(--gold-dark); font-weight:600; text-decoration:underline; } +.tf-error { display:none; background:#FDECEA; border:1px solid #E7B3AC; color:#A5281B; border-radius:var(--radius); padding:13px 16px; font-size:0.92rem; line-height:1.6; margin-bottom:18px; } +.tf-success { display:none; text-align:center; padding:20px 0 6px; } +.tf-success h3 { color:var(--navy); font-size:1.3rem; margin:0 0 12px; } +.tf-success p { color:var(--text); line-height:1.75; margin:0 0 10px; } +.tf-success a { color:var(--gold-dark); text-decoration:underline; } +.tf-hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } +.tf-privacy { font-size:0.86rem; color:var(--text-light); line-height:1.7; margin-top:22px; } +.tf-privacy a { color:var(--gold-dark); text-decoration:underline; } +.contact-alt { font-size:0.92rem; color:var(--text-light); margin-top:18px; } +.contact-alt a { color:var(--gold-dark); font-weight:600; text-decoration:underline; } + .form-success { text-align:center; padding:40px 0; } .form-success p { font-size:1.05rem; color:var(--navy); font-weight:500; } @media(max-width:768px) { .form-row { grid-template-columns:1fr; } .modal-content { padding:28px 20px; } } @@ -308,6 +351,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; } @@ -315,8 +361,14 @@ a { color:inherit; text-decoration:none; } @media(max-width:768px) { .nav-menu { display:none; } + .nav-extras > .nav-cta { display:none; } .mobile-menu-toggle { display:flex; } + .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; } diff --git a/en/index.html b/en/index.html index d46da43..0e39d29 100644 --- a/en/index.html +++ b/en/index.html @@ -265,7 +265,7 @@ "name": "How do I get access to the AegisSight Monitor?", "acceptedAnswer": { "@type": "Answer", - "text": "Access is granted on individual request; pilot access is available for qualified organisations. Contact: info@aegis-sight.de." + "text": "Through a free trial access, requested via the form on aegis-sight.de. The trial runs for one week, includes your own topic with the full feature set and ends automatically. A work email address is required." } } ] @@ -288,6 +288,7 @@