/* Button Styling */
.stehr-offer-btn {
background-color: #0078bb;
color: white;
padding: 12px 24px;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
font-weight: bold;
transition: background-color 0.3s ease;
display: inline-block;
}
.stehr-offer-btn:hover {
background-color: #005a8c;
}
/* Modal (Pop-up) Styling */
.stehr-modal {
display: none; /* Standardmäßig versteckt */
position: fixed;
z-index: 99999;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.6); /* Dunkler Hintergrund */
}
.stehr-modal-content {
background-color: #fefefe;
margin: 5% auto; /* Mittig zentriert, responsiver Abstand nach oben */
padding: 25px;
border-radius: 8px;
width: 90%;
max-width: 500px; /* Maximale Breite auf großen Bildschirmen */
box-sizing: border-box;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
font-family: sans-serif;
}
/* Schließen-Button */
.stehr-close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
cursor: pointer;
line-height: 1;
}
.stehr-close:hover {
color: #333;
}
/* Formular Felder */
.stehr-form-group {
margin-bottom: 15px;
}
.stehr-form-group label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #333;
}
.stehr-form-group input,
.stehr-form-group textarea {
width: 100%;
padding: 10px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 4px;
font-family: inherit;
}
.stehr-form-group input:focus,
.stehr-form-group textarea:focus {
border-color: #0078bb;
outline: none;
}
/* Absende-Button */
.stehr-submit-btn {
background-color: #0078bb;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
width: 100%;
font-size: 16px;
font-weight: bold;
margin-top: 10px;
}
.stehr-submit-btn:hover {
background-color: #005a8c;
}
document.addEventListener("DOMContentLoaded", function() {
var modal = document.getElementById("offerModal");
var btn = document.getElementById("openFormBtn");
var span = document.getElementById("closeFormBtn");
var form = document.getElementById("stehrForm");
// Öffnet das Modal bei Klick auf den Button
btn.onclick = function() {
modal.style.display = "block";
}
// Schließt das Modal beim Klick auf das (x)
span.onclick = function() {
modal.style.display = "none";
}
// Schließt das Modal, wenn außerhalb der Box geklickt wird
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
// Abfangen des Formular-Submits
form.addEventListener('submit', function(e) {
e.preventDefault(); // Verhindert das Neuladen der Seite
// Empfänger-Logik (Frontend Zufall: 50% Chance)
var emails = ["bettray@stehr.com", "krause@stehr.com"];
var randomIndex = Math.floor(Math.random() * emails.length);
var selectedEmail = emails[randomIndex];
/* HINWEIS: Hier endet die Machbarkeit von reinem HTML/JS.
Um die Daten wirklich sicher per E-Mail zu senden, müssten die Daten
hier an eine API oder ein PHP-Skript in WordPress übergeben werden.
Für Testzwecke werfen wir hier nur eine Info aus:
*/
alert("Daten erfasst!\n\nDas System hat per Zufall folgende Adresse gewählt: " + selectedEmail + "\n\n(Um die E-Mail real zu versenden, muss das Formular an ein WordPress-Backend angebunden werden.)");
// Modal schließen und Formular leeren
modal.style.display = "none";
form.reset();
});
});