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:
@@ -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); }
|
||||
|
||||
In neuem Issue referenzieren
Einen Benutzer sperren