feat: Kontaktformular als Popup, Grid zentriert, Straße gefixt

- Kontaktformular als Modal-Popup (Name, Organisation, E-Mail, Nachricht)
- Oeffnet per Button-Klick, schliessbar per X/Overlay/Escape
- Submit erstellt mailto-Link mit vorausgefuellten Feldern
- Feature-Grid: letzte 2 Cards zentriert statt linksbuendig
- Gladbacher Strasse -> Gladbacher Straße

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Dieser Commit ist enthalten in:
Claude Code
2026-04-06 19:48:40 +02:00
Ursprung 6ec058b874
Commit fa36d7267d
3 geänderte Dateien mit 107 neuen und 3 gelöschten Zeilen

Datei anzeigen

@@ -109,6 +109,10 @@ a { color:inherit; text-decoration:none; }
/* ==================== GRID ==================== */
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
#features .grid-3 { justify-items:center; }
#features .grid-3 .feature-card:nth-last-child(-n+2):nth-child(3n+1) { grid-column: 1; }
#features .grid-3 { display:flex; flex-wrap:wrap; justify-content:center; }
#features .grid-3 .feature-card { width:calc(33.333% - 20px); }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
/* ==================== PROBLEM ==================== */
@@ -226,6 +230,23 @@ a { color:inherit; text-decoration:none; }
.cta-text { font-size:1.1rem; color:var(--text-light); margin-bottom:32px; }
.cta-email { font-size:0.9rem; color:var(--text-light); margin-top:16px; }
/* ==================== CONTACT MODAL ==================== */
.modal-overlay { position:fixed; inset:0; z-index:9999; background:rgba(10,24,50,0.6); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; padding:24px; }
.modal-content { background:var(--white); border-radius:var(--radius-lg); padding:40px; max-width:520px; width:100%; position:relative; box-shadow:0 24px 64px rgba(10,24,50,0.3); max-height:90vh; overflow-y:auto; }
.modal-close { position:absolute; top:16px; right:20px; background:none; border:none; font-size:1.8rem; color:var(--gray-400); cursor:pointer; line-height:1; }
.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-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; }
.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; } }
/* ==================== FOOTER ==================== */
.footer { background:var(--navy); color:rgba(255,255,255,0.7); padding:40px 0; font-size:0.85rem; }
.footer-content { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; padding-bottom:24px; border-bottom:1px solid rgba(255,255,255,0.1); }