From 434ec96e4ef601d98407cd09da17c203ae8a0771 Mon Sep 17 00:00:00 2001
From: AegisSight <info@aegis-sight.de>
Date: Wed, 22 Jul 2026 22:11:32 +0200
Subject: [PATCH] Kontakt-Popup wird zum Testzugang-Formular, nur noch ein
 Knopf

Im Kontakt-Abschnitt steht nur noch "Testzugang anfragen" und oeffnet
das Popup. Darin liegt jetzt das Testzugang-Formular ohne die Frage nach
dem Thema, also Name, Behoerde, Funktion, Telefon, dienstliche E-Mail und
Nutzerzahl. Die Freemail-Sperre und die Erkennung von Behoerdendomains
greifen dort genauso wie auf der Seite.

Wer zuerst eine Frage hat, findet unter dem Knopf einen direkten
Mail-Hinweis. Das alte submitContact in app.js entfaellt, beide Formulare
laufen ueber js/trial-form.js. Die gemeinsamen Formular-Styles liegen
jetzt in css/style.css statt doppelt in den Seiten.
---
 css/style.css              | 24 +++++++++++++
 en/index.html              | 71 +++++++++++++++++++++++++++++---------
 en/trial-access/index.html | 23 +-----------
 index.html                 | 71 +++++++++++++++++++++++++++++---------
 js/app.js                  | 40 ++-------------------
 js/trial-form.js           | 18 +++++-----
 testzugang/index.html      | 23 +-----------
 7 files changed, 145 insertions(+), 125 deletions(-)

diff --git a/css/style.css b/css/style.css
index 7ff1839..8903684 100644
--- a/css/style.css
+++ b/css/style.css
@@ -300,6 +300,30 @@ a { color:inherit; text-decoration:none; }
 .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; }
+/* Testzugang-Formular, genutzt auf /testzugang/ und im Modal 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-required-note { font-size:0.88rem; color:var(--text-light); margin:0 0 24px; }
+.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-hint { display:block; font-size:0.82rem; color:var(--text-light); margin-top:6px; font-weight:400; text-transform:none; letter-spacing:0; }
+.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; } }
diff --git a/en/index.html b/en/index.html
index 4ff9d18..4ed2573 100644
--- a/en/index.html
+++ b/en/index.html
@@ -650,11 +650,11 @@
     <section class="section section-base" id="contact">
         <div class="container cta-container">
             <h2 class="section-title">Interested in AegisSight Monitor?</h2>
-            <p class="cta-text">Test the Monitor for one week with your own topic, or talk to us about your use case first.</p>
+            <p class="cta-text">Test the Monitor for one week with your own topic, free of charge and without obligation.</p>
             <div class="cta-buttons">
-                <a class="btn btn-primary btn-lg" href="/en/trial-access/">Request trial access</a>
-                <button class="btn btn-outline btn-lg" onclick="openContactModal()">Get in touch</button>
+                <button class="btn btn-primary btn-lg" onclick="openContactModal()">Request trial access</button>
             </div>
+            <p class="contact-alt">Have a question first. Write to us at <a href="mailto:info@aegis-sight.de">info@aegis-sight.de</a>.</p>
         </div>
     </section>
 
@@ -768,38 +768,75 @@
     <div class="modal-overlay" id="contact-modal" style="display:none">
         <div class="modal-content">
             <button class="modal-close" onclick="closeContactModal()" aria-label="Close">&times;</button>
-            <h2>Get in touch</h2>
-            <p class="modal-sub">Talk to us about your use case.</p>
-            <form id="contact-form" onsubmit="return submitContact(event)">
+            <h2>Request trial access</h2>
+            <p class="modal-sub">Test the Monitor for one week with the full feature set, free of charge and without obligation. We need your work email address for the request.</p>
+
+            <div class="tf-error" id="tf-error" role="alert"></div>
+
+            <form id="trial-form" novalidate>
                 <div class="form-row">
                     <div class="form-group">
-                        <label for="cf-name">Name</label>
-                        <input type="text" id="cf-name" name="name" required>
+                        <label for="tf-name">Name</label>
+                        <input type="text" id="tf-name" name="name" autocomplete="name" required>
                     </div>
                     <div class="form-group">
-                        <label for="cf-org">Organisation</label>
-                        <input type="text" id="cf-org" name="organisation">
+                        <label for="tf-org">Authority or organisation</label>
+                        <input type="text" id="tf-org" name="organisation" autocomplete="organization" required>
+                    </div>
+                </div>
+                <div class="form-row">
+                    <div class="form-group">
+                        <label for="tf-role">Role or department</label>
+                        <input type="text" id="tf-role" name="role" autocomplete="organization-title" required>
+                    </div>
+                    <div class="form-group">
+                        <label for="tf-phone">Phone <span class="tf-hint">optional</span></label>
+                        <input type="tel" id="tf-phone" name="phone" autocomplete="tel">
                     </div>
                 </div>
                 <div class="form-group">
-                    <label for="cf-email">Email</label>
-                    <input type="email" id="cf-email" name="email" required>
+                    <label for="tf-email">Work email address</label>
+                    <input type="email" id="tf-email" name="email" autocomplete="email" required aria-describedby="tf-email-note">
+                    <span class="tf-note" id="tf-email-note"></span>
                 </div>
                 <div class="form-group">
-                    <label for="cf-message">Message</label>
-                    <textarea id="cf-message" name="message" rows="4" required></textarea>
+                    <label for="tf-users">Planned number of users <span class="tf-hint">optional</span></label>
+                    <select id="tf-users" name="users">
+                        <option value="">Please select</option>
+                        <option value="1 person">1 person</option>
+                        <option value="2 to 5 people">2 to 5 people</option>
+                        <option value="6 to 20 people">6 to 20 people</option>
+                        <option value="more than 20 people">more than 20 people</option>
+                    </select>
                 </div>
-                <button type="submit" class="btn btn-primary btn-block">Send message</button>
+
+                <div class="tf-hp" aria-hidden="true">
+                    <label for="tf-website">Website</label>
+                    <input type="text" id="tf-website" name="website" tabindex="-1" autocomplete="off">
+                </div>
+
+                <div class="tf-consent">
+                    <input type="checkbox" id="tf-consent" name="consent" required>
+                    <label for="tf-consent">I agree that my details may be stored and processed in order to handle this request. Further information is available in the <a href="/en/privacy.html">privacy policy</a>.</label>
+                </div>
+
+                <button type="submit" class="btn btn-primary btn-block">Request trial access</button>
             </form>
-            <div class="form-success" id="form-success" style="display:none">
-                <p>Thank you for your message. We will get back to you shortly.</p>
+
+            <div class="tf-success" id="tf-success">
+                <h3>Thank you for your request</h3>
+                <p>We have received your details and will normally get back to you within two working days.</p>
+                <p>If you have any questions in the meantime, you can reach us at <a href="mailto:info@aegis-sight.de">info@aegis-sight.de</a>.</p>
             </div>
+
+            <p class="tf-privacy">All details about the trial are on the <a href="/en/trial-access/">trial access page</a>.</p>
         </div>
     </div>
 
     <script src="/assets/vendor/leaflet/leaflet.js"></script>
     <script src="/assets/vendor/leaflet/leaflet.markercluster.js"></script>
     <script src="/js/app.js"></script>
+    <script src="/js/trial-form.js"></script>
     <script src="/cookie-consent.js"></script>
 </body>
 </html>
diff --git a/en/trial-access/index.html b/en/trial-access/index.html
index af12dba..686b5aa 100644
--- a/en/trial-access/index.html
+++ b/en/trial-access/index.html
@@ -131,30 +131,9 @@
         /* Form */
         .tf-form-wrap { background: var(--base); border: 1px solid var(--gray-100); border-radius: var(--radius-lg); padding: 34px 36px; scroll-margin-top: calc(var(--nav-height) + 16px); }
         .tf-form-wrap h2 { margin-top: 0; }
-        .tf-required-note { font-size: 0.88rem; color: var(--text-light); margin: 0 0 24px; }
         .tf-form-wrap .form-group input,
         .tf-form-wrap .form-group textarea,
-        .tf-form-wrap .form-group select { width: 100%; padding: 11px 14px; border: 1px solid var(--gray-200); border-radius: var(--radius); font-family: inherit; font-size: 0.95rem; color: var(--text); background: var(--white); transition: border-color .2s; }
-        .tf-form-wrap .form-group select { 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; }
-        .tf-form-wrap .form-group input:focus,
-        .tf-form-wrap .form-group textarea:focus,
-        .tf-form-wrap .form-group select:focus { outline: none; border-color: var(--gold); }
-        .tf-form-wrap .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-hint { display: block; font-size: 0.82rem; color: var(--text-light); margin-top: 6px; font-weight: 400; text-transform: none; letter-spacing: 0; }
-        .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-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; }
+        .tf-form-wrap .form-group select { background-color: var(--white); }
 
         @media (max-width: 768px) {
             .sol-hero h1 { font-size: 1.85rem; }
diff --git a/index.html b/index.html
index 0e818d9..d21d5b0 100644
--- a/index.html
+++ b/index.html
@@ -650,11 +650,11 @@
     <section class="section section-base" id="contact">
         <div class="container cta-container">
             <h2 class="section-title">Interesse am AegisSight Monitor?</h2>
-            <p class="cta-text">Testen Sie den Monitor eine Woche lang mit Ihrem eigenen Thema, oder sprechen Sie zuerst mit uns über Ihren Anwendungsfall.</p>
+            <p class="cta-text">Testen Sie den Monitor eine Woche lang mit Ihrem eigenen Thema, kostenfrei und ohne Verpflichtung.</p>
             <div class="cta-buttons">
-                <a class="btn btn-primary btn-lg" href="/testzugang/">Testzugang anfragen</a>
-                <button class="btn btn-outline btn-lg" onclick="openContactModal()">Kontakt aufnehmen</button>
+                <button class="btn btn-primary btn-lg" onclick="openContactModal()">Testzugang anfragen</button>
             </div>
+            <p class="contact-alt">Sie haben zuerst eine Frage. Schreiben Sie uns an <a href="mailto:info@aegis-sight.de">info@aegis-sight.de</a>.</p>
         </div>
     </section>
 
@@ -768,38 +768,75 @@
     <div class="modal-overlay" id="contact-modal" style="display:none">
         <div class="modal-content">
             <button class="modal-close" onclick="closeContactModal()">&times;</button>
-            <h2>Kontakt aufnehmen</h2>
-            <p class="modal-sub">Sprechen Sie mit uns über Ihren Anwendungsfall.</p>
-            <form id="contact-form" onsubmit="return submitContact(event)">
+            <h2>Testzugang anfragen</h2>
+            <p class="modal-sub">Eine Woche lang mit vollem Funktionsumfang testen, kostenfrei und ohne Verpflichtung. Für die Anfrage benötigen wir Ihre dienstliche E-Mail-Adresse.</p>
+
+            <div class="tf-error" id="tf-error" role="alert"></div>
+
+            <form id="trial-form" novalidate>
                 <div class="form-row">
                     <div class="form-group">
-                        <label for="cf-name">Name</label>
-                        <input type="text" id="cf-name" name="name" required>
+                        <label for="tf-name">Name</label>
+                        <input type="text" id="tf-name" name="name" autocomplete="name" required>
                     </div>
                     <div class="form-group">
-                        <label for="cf-org">Organisation</label>
-                        <input type="text" id="cf-org" name="organisation">
+                        <label for="tf-org">Behörde oder Organisation</label>
+                        <input type="text" id="tf-org" name="organisation" autocomplete="organization" required>
+                    </div>
+                </div>
+                <div class="form-row">
+                    <div class="form-group">
+                        <label for="tf-role">Funktion oder Dienststelle</label>
+                        <input type="text" id="tf-role" name="role" autocomplete="organization-title" required>
+                    </div>
+                    <div class="form-group">
+                        <label for="tf-phone">Telefon <span class="tf-hint">optional</span></label>
+                        <input type="tel" id="tf-phone" name="phone" autocomplete="tel">
                     </div>
                 </div>
                 <div class="form-group">
-                    <label for="cf-email">E-Mail</label>
-                    <input type="email" id="cf-email" name="email" required>
+                    <label for="tf-email">Dienstliche E-Mail-Adresse</label>
+                    <input type="email" id="tf-email" name="email" autocomplete="email" required aria-describedby="tf-email-note">
+                    <span class="tf-note" id="tf-email-note"></span>
                 </div>
                 <div class="form-group">
-                    <label for="cf-message">Nachricht</label>
-                    <textarea id="cf-message" name="message" rows="4" required></textarea>
+                    <label for="tf-users">Geplante Nutzerzahl <span class="tf-hint">optional</span></label>
+                    <select id="tf-users" name="users">
+                        <option value="">Bitte wählen</option>
+                        <option value="1 Person">1 Person</option>
+                        <option value="2 bis 5 Personen">2 bis 5 Personen</option>
+                        <option value="6 bis 20 Personen">6 bis 20 Personen</option>
+                        <option value="mehr als 20 Personen">mehr als 20 Personen</option>
+                    </select>
                 </div>
-                <button type="submit" class="btn btn-primary btn-block">Nachricht senden</button>
+
+                <div class="tf-hp" aria-hidden="true">
+                    <label for="tf-website">Website</label>
+                    <input type="text" id="tf-website" name="website" tabindex="-1" autocomplete="off">
+                </div>
+
+                <div class="tf-consent">
+                    <input type="checkbox" id="tf-consent" name="consent" required>
+                    <label for="tf-consent">Ich bin damit einverstanden, dass meine Angaben zur Bearbeitung dieser Anfrage gespeichert und verarbeitet werden. Weitere Hinweise finden sich in der <a href="/datenschutz.html">Datenschutzerklärung</a>.</label>
+                </div>
+
+                <button type="submit" class="btn btn-primary btn-block">Testzugang anfragen</button>
             </form>
-            <div class="form-success" id="form-success" style="display:none">
-                <p>Vielen Dank für Ihre Nachricht. Wir melden uns zeitnah bei Ihnen.</p>
+
+            <div class="tf-success" id="tf-success">
+                <h3>Vielen Dank für Ihre Anfrage</h3>
+                <p>Wir haben Ihre Angaben erhalten und melden uns in der Regel innerhalb von zwei Werktagen bei Ihnen.</p>
+                <p>Sollten Sie in der Zwischenzeit Fragen haben, erreichen Sie uns unter <a href="mailto:info@aegis-sight.de">info@aegis-sight.de</a>.</p>
             </div>
+
+            <p class="tf-privacy">Alle Einzelheiten zum Testzugang stehen auf der <a href="/testzugang/">Seite zum Testzugang</a>.</p>
         </div>
     </div>
 
     <script src="/assets/vendor/leaflet/leaflet.js"></script>
     <script src="/assets/vendor/leaflet/leaflet.markercluster.js"></script>
     <script src="js/app.js"></script>
+    <script src="/js/trial-form.js"></script>
     <script src="/cookie-consent.js"></script>
 </body>
 </html>
diff --git a/js/app.js b/js/app.js
index cff2409..fca7e69 100644
--- a/js/app.js
+++ b/js/app.js
@@ -646,44 +646,8 @@ function mdToHtml(md) {
         }
     });
 
-    // Form submit -> server-side SMTP
-    window.submitContact = function (e) {
-        e.preventDefault();
-        var lang = (document.documentElement.lang || 'de').toLowerCase().indexOf('en') === 0 ? 'en' : 'de';
-        var T = lang === 'en'
-            ? { sending: 'Sending...', send: 'Send message', sendError: 'Error sending message', netError: 'Connection error. Please try again.' }
-            : { sending: 'Wird gesendet...', send: 'Nachricht senden', sendError: 'Fehler beim Senden', netError: 'Verbindungsfehler. Bitte versuchen Sie es erneut.' };
-        var btn = e.target.querySelector('button[type="submit"]');
-        if (btn) { btn.disabled = true; btn.textContent = T.sending; }
-
-        fetch('/api/contact', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({
-                name: document.getElementById('cf-name').value,
-                organisation: document.getElementById('cf-org').value,
-                email: document.getElementById('cf-email').value,
-                message: document.getElementById('cf-message').value,
-                lang: lang
-            })
-        })
-        .then(function (r) { return r.json().then(function (d) { return { ok: r.ok, data: d }; }); })
-        .then(function (res) {
-            if (res.ok) {
-                document.getElementById('contact-form').style.display = 'none';
-                document.getElementById('form-success').style.display = 'block';
-                if (window.umami) umami.track('contact_form_success');
-            } else {
-                alert(res.data.error || T.sendError);
-                if (btn) { btn.disabled = false; btn.textContent = T.send; }
-            }
-        })
-        .catch(function () {
-            alert(T.netError);
-            if (btn) { btn.disabled = false; btn.textContent = T.send; }
-        });
-        return false;
-    };
+    /* Der Versand des Modal-Formulars liegt seit dem Umbau auf Testzugang
+       in js/trial-form.js, gemeinsam mit der Seite /testzugang/. */
 
     /* ==================== LOAD DEEPFAKES DATA ==================== */
     function loadDeepfakesData() {
diff --git a/js/trial-form.js b/js/trial-form.js
index 5b384d3..4130c10 100644
--- a/js/trial-form.js
+++ b/js/trial-form.js
@@ -198,21 +198,21 @@
 
             var L = T.labels;
             var e_ = L.empty;
-            var body = [
+            var zeilen = [
                 L.head,
                 '',
                 L.org + ' = ' + (val('tf-org') || e_),
                 L.role + ' = ' + (val('tf-role') || e_),
                 L.mail + ' = ' + email,
                 L.phone + ' = ' + (val('tf-phone') || e_),
-                L.users + ' = ' + (val('tf-users') || e_),
-                L.start + ' = ' + (val('tf-start') || e_),
-                '',
-                L.topic,
-                val('tf-topic') || e_,
-                '',
-                L.domain + ' = ' + (looksOfficial(email) ? L.domainOk : L.domainCheck)
-            ].join('\n');
+                L.users + ' = ' + (val('tf-users') || e_)
+            ];
+            /* Startwunsch und Themenfeld gibt es nur auf der Testzugang-Seite,
+               im Modal der Startseite fehlen sie bewusst. */
+            if (document.getElementById('tf-start')) zeilen.push(L.start + ' = ' + (val('tf-start') || e_));
+            if (document.getElementById('tf-topic')) zeilen.push('', L.topic, val('tf-topic') || e_);
+            zeilen.push('', L.domain + ' = ' + (looksOfficial(email) ? L.domainOk : L.domainCheck));
+            var body = zeilen.join('\n');
 
             fetch('/api/contact', {
                 method: 'POST',
diff --git a/testzugang/index.html b/testzugang/index.html
index 7768d53..e17d6db 100644
--- a/testzugang/index.html
+++ b/testzugang/index.html
@@ -131,30 +131,9 @@
         /* Formular */
         .tf-form-wrap { background: var(--base); border: 1px solid var(--gray-100); border-radius: var(--radius-lg); padding: 34px 36px; scroll-margin-top: calc(var(--nav-height) + 16px); }
         .tf-form-wrap h2 { margin-top: 0; }
-        .tf-required-note { font-size: 0.88rem; color: var(--text-light); margin: 0 0 24px; }
         .tf-form-wrap .form-group input,
         .tf-form-wrap .form-group textarea,
-        .tf-form-wrap .form-group select { width: 100%; padding: 11px 14px; border: 1px solid var(--gray-200); border-radius: var(--radius); font-family: inherit; font-size: 0.95rem; color: var(--text); background: var(--white); transition: border-color .2s; }
-        .tf-form-wrap .form-group select { 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; }
-        .tf-form-wrap .form-group input:focus,
-        .tf-form-wrap .form-group textarea:focus,
-        .tf-form-wrap .form-group select:focus { outline: none; border-color: var(--gold); }
-        .tf-form-wrap .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-hint { display: block; font-size: 0.82rem; color: var(--text-light); margin-top: 6px; font-weight: 400; text-transform: none; letter-spacing: 0; }
-        .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-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; }
+        .tf-form-wrap .form-group select { background-color: var(--white); }
 
         @media (max-width: 768px) {
             .sol-hero h1 { font-size: 1.85rem; }