/* СКРЫТИЕ FLUENT FORM */
.fluentform {
display: none;
}
.fluentform.show-form {
display: block !important;
}
.fluentform:not(.show-form) * {
display: none !important;
}
/* ОСНОВНЫЕ СТИЛИ */
.hausbewertung-form {
max-width: 600px;
margin: 0 auto;
padding: 40px;
}
.progress-container {
margin-bottom: 30px;
position: relative;
}
.progress-bar {
height: 8px;
background: #e9ecef;
border-radius: 4px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: var(–global-palette15, #007cba);
width: 0%;
transition: width 0.4s ease;
}
.progress-text {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
font-size: 14px;
color: #666;
}
.quiz-step {
display: none;
animation: slideIn 0.4s ease;
}
.quiz-step.active {
display: block;
}
.quiz-title {
color: #1a1a1a;
font-size: 28px;
font-weight: 700;
margin-bottom: 24px;
}
.quiz-label {
display: block;
font-weight: 600;
color: #333;
margin-bottom: 8px;
font-size: 15px;
}
.form-group {
margin-bottom: 24px;
}
.quiz-input {
width: 100%;
padding: 16px 20px !important;
border: 1px solid var(–global-palette15, #007cba) !important;
border-radius: 0 !important;
font-size: 16px;
box-sizing: border-box;
appearance: none;
}
.quiz-input:focus {
outline: none;
border-color: var(–global-palette15, #007cba) !important;
box-shadow: 0 0 0 2px rgba(0, 123, 186, 0.2);
}
/* RADIO-IMAGES */
.radio-images-group {
margin-bottom: 24px;
}
.radio-image-label {
cursor: pointer;
border: 2px solid #e1e5e9;
border-radius: 12px;
padding: 20px;
transition: all 0.3s ease;
background: white;
display: block;
box-sizing: border-box;
}
.radio-image-label:hover {
border-color: var(–global-palette15, #007cba);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.radio-image-label input {
display: none;
}
.radio-image {
text-align: center;
}
.radio-image img {
width: 80px;
height: 80px;
object-fit: contain;
margin-bottom: 12px;
display: block;
margin-left: auto;
margin-right: auto;
filter: grayscale(100%) opacity(0.6);
transition: all 0.3s ease;
}
.radio-image span {
font-size: 16px;
font-weight: 600;
color: #333;
display: block;
}
.radio-image-label input:checked + .radio-image img {
filter: none !important;
opacity: 1 !important;
}
.radio-image-label:has(input:checked) {
border-color: var(–global-palette15, #007cba) !important;
background: linear-gradient(135deg, rgba(var(–global-palette15-rgb, 0, 123, 186), 0.05), transparent);
box-shadow: 0 0 0 3px rgba(var(–global-palette15-rgb, 0, 123, 186), 0.1);
}
.haus-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
/* КНОПКИ */
.btn-row {
display: flex;
gap: 12px;
margin: 24px 0;
}
.btn-row .quiz-btn {
flex: 1;
}
.btn-full-width {
margin: 24px 0;
}
.btn-full-width .quiz-btn {
width: 100% !important;
}
.quiz-btn {
padding: 18px 24px !important;
border: none !important;
border-radius: 0 !important;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
box-sizing: border-box;
}
.quiz-btn-primary {
background-color: var(–global-palette15, #007cba) !important;
color: #ffffff !important;
}
.quiz-btn-secondary {
background-color: #6c757d !important;
color: white !important;
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
let quizGrundstueck = {};
let currentStep = 1;
const totalSteps = 4;
document.addEventListener(‘DOMContentLoaded’, function() {
document.querySelectorAll(‘.fluentform’).forEach(form => {
form.classList.remove(‘show-form’);
});
updateProgress();
});
function updateProgress() {
const progressFill = document.getElementById(‘progress-fill’);
const progressText = document.getElementById(‘progress-text’);
if (progressFill && progressText) {
const progress = (currentStep / totalSteps) * 100;
progressFill.style.width = progress + ‘%’;
progressText.textContent = `Schritt ${currentStep} von ${totalSteps}`;
}
}
function showStep(step) {
document.querySelectorAll(‘.quiz-step’).forEach(s => s.classList.remove(‘active’));
const stepEl = document.getElementById(`step${step}`);
if (stepEl) {
stepEl.classList.add(‘active’);
currentStep = step;
updateProgress();
}
}
function validateStep(step) {
switch(step) {
case 1:
return !!document.getElementById(‘flaeche’)?.value;
case 2:
return !!document.getElementById(‘strasse’)?.value &&
!!document.getElementById(‘plz-ort’)?.value &&
!!document.getElementById(‘bundesland’)?.value;
case 3:
return !!document.querySelector(‘input[name=”grundstueck_art”]:checked’);
default:
return true;
}
}
function collectStepData(step) {
switch(step) {
case 1:
quizGrundstueck.flaeche = document.getElementById(‘flaeche’)?.value;
break;
case 2:
quizGrundstueck.strasse = document.getElementById(‘strasse’)?.value;
quizGrundstueck.plz_ort = document.getElementById(‘plz-ort’)?.value;
quizGrundstueck.bundesland = document.getElementById(‘bundesland’)?.value;
break;
case 3:
quizGrundstueck.grundstueck_art = document.querySelector(‘input[name=”grundstueck_art”]:checked’)?.value;
break;
}
}
function nextStep(step) {
if (!validateStep(step)) {
alert(‘Bitte füllen Sie alle Felder aus!’);
return;
}
collectStepData(step);
if (step 1) {
showStep(step – 1);
}
}
function showContactForm() {
console.log(‘Показываем Fluent Form…’);
const quizContainer = document.getElementById(‘quiz-container’);
if (quizContainer) {
quizContainer.style.display = ‘none’;
}
const fluentForms = document.querySelectorAll(‘.fluentform’);
if (fluentForms.length > 0) {
fluentForms[0].classList.add(‘show-form’);
}
const progressFill = document.getElementById(‘progress-fill’);
const progressText = document.getElementById(‘progress-text’);
if (progressFill) progressFill.style.width = ‘100%’;
if (progressText) progressText.textContent = ‘Abschicken’;
setTimeout(() => {
const fluentForm = document.querySelector(‘.fluentform.show-form form’);
if (fluentForm) {
console.log(‘Заполняем поля формы:’, quizGrundstueck);
const fieldMapping = {
‘flaeche’: ‘flaeche’,
‘strasse’: ‘strasse’,
‘plz_ort’: ‘plz_ort’,
‘bundesland’: ‘bundesland’,
‘grundstueck_art’: ‘grundstueck_art’
};
Object.entries(fieldMapping).forEach(([quizKey, formFieldName]) => {
if (quizGrundstueck[quizKey]) {
const field = fluentForm.querySelector(`[name=”${formFieldName}”]`);
if (field) {
field.value = quizGrundstueck[quizKey];
console.log(`✅ Заполнено: ${formFieldName} = ${quizGrundstueck[quizKey]}`);
}
}
});
}
}, 600);
}
