/* СКРЫТИЕ 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);
}
/* GRID ДЛЯ GEWERBE (6 элементов — 2 ряда по 3) */
.gewerbe-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 quizGewerbe = {};
let currentStepGewerbe = 1;
const totalStepsGewerbe = 4;
document.addEventListener(‘DOMContentLoaded’, function() {
// Скрываем Fluent Forms
document.querySelectorAll(‘.fluentform’).forEach(form => {
form.classList.remove(‘show-form’);
});
updateProgressGewerbe();
});
function updateProgressGewerbe() {
const progressFill = document.getElementById(‘progress-fill’);
const progressText = document.getElementById(‘progress-text’);
if (progressFill && progressText) {
const progress = (currentStepGewerbe / totalStepsGewerbe) * 100;
progressFill.style.width = progress + ‘%’;
progressText.textContent = `Schritt ${currentStepGewerbe} von ${totalStepsGewerbe}`;
}
}
function showStepGewerbe(step) {
document.querySelectorAll(‘.quiz-step’).forEach(s => s.classList.remove(‘active’));
const stepEl = document.getElementById(`step${step}`);
if (stepEl) {
stepEl.classList.add(‘active’);
currentStepGewerbe = step;
updateProgressGewerbe();
}
}
function validateStepGewerbe(step) {
switch(step) {
case 1:
return !!document.getElementById(‘nutzflaeche’)?.value;
case 2:
return !!document.getElementById(‘strasse’)?.value &&
!!document.getElementById(‘plz-ort’)?.value &&
!!document.getElementById(‘bundesland’)?.value;
case 3:
return !!document.querySelector(‘input[name=»gewerbe_kategorie»]:checked’);
default:
return true;
}
}
function collectStepDataGewerbe(step) {
switch(step) {
case 1:
quizGewerbe.nutzflaeche = document.getElementById(‘nutzflaeche’)?.value;
break;
case 2:
quizGewerbe.strasse = document.getElementById(‘strasse’)?.value;
quizGewerbe.plz_ort = document.getElementById(‘plz-ort’)?.value;
quizGewerbe.bundesland = document.getElementById(‘bundesland’)?.value;
break;
case 3:
quizGewerbe.kategorie = document.querySelector(‘input[name=»gewerbe_kategorie»]:checked’)?.value;
break;
}
}
function nextStepGewerbe(step) {
if (!validateStepGewerbe(step)) {
alert(‘Bitte füllen Sie alle Felder aus!’);
return;
}
collectStepDataGewerbe(step);
if (step 1) {
showStepGewerbe(step — 1);
}
}
function showContactFormGewerbe() {
console.log(‘Показываем Fluent Form ID=9…’, quizGewerbe);
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(‘Заполняем поля формы:’, quizGewerbe);
const fieldMapping = {
‘nutzflaeche’: ‘nutzflaeche’,
‘strasse’: ‘strasse’,
‘plz_ort’: ‘plz_ort’,
‘bundesland’: ‘bundesland’,
‘kategorie’: ‘kategorie’
};
Object.entries(fieldMapping).forEach(([quizKey, formFieldName]) => {
if (quizGewerbe[quizKey]) {
const field = fluentForm.querySelector(`[name=»${formFieldName}»]`);
if (field) {
field.value = quizGewerbe[quizKey];
console.log(`✅ Заполнено: ${formFieldName} = ${quizGewerbe[quizKey]}`);
}
}
});
}
}, 600);
}
