/* CSS: ОБЩИЕ СТИЛИ */
#finanzierung-quiz-app, #finanzierung-quiz-app * { box-sizing: border-box !important; }
.finanzierung-form { max-width: 650px; margin: 0 auto; padding: 30px; background: #fff; }
/* СКРЫТИЕ ПО УМОЛЧАНИЮ */
#fluent-container { display: none !important; }
#fluent-container.show-form { display: block !important; }
.quiz-step { display: none !important; }
.quiz-step.active { display: block !important; animation: fadeIn 0.4s ease; }
/* ПРОГРЕСС-БАР */
.progress-container { margin-bottom: 30px; }
.progress-bar { height: 8px; background: #eee; border-radius: 0; overflow: hidden; }
.progress-fill { height: 100%; background: var(–global-palette15, #007cba); width: 0%; transition: width 0.4s ease; }
.progress-text { display: block; margin-top: 8px; font-size: 13px; color: #888; text-align: right; }
/* ТИПОГРАФИКА И ИНПУТЫ */
.quiz-title { font-size: 26px; font-weight: 700; color: #1a1a1a; margin-bottom: 24px; line-height: 1.2; }
.quiz-label { font-weight: 600; font-size: 15px; margin-bottom: 8px; display: block; color: #333; }
.quiz-input { width: 100% !important; padding: 16px 20px !important; border: 1px solid var(–global-palette15, #007cba) !important; border-radius: 0 !important; font-size: 16px !important; margin-bottom: 10px; background: #fff; }
.quiz-input.error { border-color: #dc3545 !important; background-color: #fff8f8 !important; }
/* СЕТКА С ИКОНКАМИ */
.radio-images-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 24px; }
.radio-image-label { cursor: pointer; border: 2px solid #e1e5e9; padding: 20px; text-align: center; transition: 0.3s; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.radio-image-label input { display: none; }
.radio-image-content img { width: 50px; height: 50px; margin-bottom: 12px; filter: grayscale(100%); opacity: 0.5; }
.radio-image-content span { display: block; font-size: 14px; font-weight: 600; color: #333; }
.radio-image-label:has(input:checked) { border-color: var(–global-palette15, #007cba) !important; background: #f0f7ff; }
.radio-image-label input:checked + .radio-image-content img { filter: none; opacity: 1; }
/* КНОПКИ */
.btn-row { display: flex !important; gap: 12px !important; margin-top: 24px !important; width: 100% !important; }
.btn-row .quiz-btn { flex: 1 !important; }
.btn-full-width .quiz-btn { width: 100% !important; margin-top: 24px; }
.quiz-btn-primary { background-color: var(–global-palette15, #007cba) !important; color: #fff !important; padding: 18px 24px !important; border: none !important; border-radius: 0 !important; font-size: 16px !important; font-weight: 600 !important; cursor: pointer; }
.quiz-btn-secondary { background-color: #6c757d !important; color: #fff !important; padding: 18px 24px !important; border: none !important; border-radius: 0 !important; font-size: 16px !important; font-weight: 600 !important; cursor: pointer; }
/* ГРИД ДАННЫХ */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.form-group.full-width { grid-column: span 2; }
.radio-group { display: flex; flex-direction: column; gap: 10px; }
.radio-label { border: 1px solid #ddd; padding: 15px; cursor: pointer; display: flex; align-items: center; }
.radio-label input { margin-right: 15px; }
.radio-label:has(input:checked) { border-color: var(–global-palette15, #007cba); background: #f0f7ff; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
let quizData = {};
let currentStep = 1;
let hasSecondPerson = false;
let isRental = false;
let isFinished = false;
function updateUI() {
const fill = document.getElementById(‘progress-fill’);
const txt = document.getElementById(‘progress-text’);
// РАСЧЕТ ОБЩЕГО КОЛИЧЕСТВА ШАГОВ
// 9 базовых (1,2,3,4,5,6,8,9 + Финальный)
let total = 9;
if (isRental) total++; // Шаг 7
if (hasSecondPerson) total++; // Шаг 10
// РАСЧЕТ ТЕКУЩЕГО ВИЗУАЛЬНОГО ШАГА
let visualStep = currentStep;
// Если мы на финальной форме
if (isFinished) {
visualStep = total;
} else {
// Если пропущен шаг 7, корректируем счетчик для шагов после него
if (!isRental && currentStep >= 8) visualStep–;
}
const progress = (visualStep / total) * 100;
if(fill) fill.style.width = progress + ‘%’;
if(txt) txt.textContent = `Schritt ${visualStep} von ${total}`;
}
function validateStep(s) {
const stepEl = document.getElementById(‘step’ + s);
let isValid = true;
stepEl.querySelectorAll(‘.quiz-input’).forEach(el => el.classList.remove(‘error’));
const radios = stepEl.querySelectorAll(‘input[type=”radio”]’);
if (radios.length > 0) {
const name = radios[0].name;
if (!stepEl.querySelector(`input[name=”${name}”]:checked`)) isValid = false;
}
stepEl.querySelectorAll(‘input[type=”number”], input[type=”text”], input[type=”date”], select’).forEach(el => {
if (!el.value.trim()) { el.classList.add(‘error’); isValid = false; }
});
if (!isValid) alert(“Bitte füllen Sie alle markierten Felder aus.”);
return isValid;
}
function collectData(s) {
const stepEl = document.getElementById(‘step’ + s);
if(!stepEl) return;
stepEl.querySelectorAll(‘input[type=”radio”]:checked’).forEach(el => {
quizData[el.name] = el.value;
if (el.name === ‘zweite_person’) {
hasSecondPerson = (el.value === ‘ja’);
updateUI(); // Пересчитываем счетчик сразу при выборе
}
if (el.name === ‘nutzung’) {
isRental = (el.value === ‘vermietung’);
updateUI(); // Пересчитываем счетчик сразу при выборе
}
});
stepEl.querySelectorAll(‘input[type=”number”], input[type=”text”], input[type=”date”], select’).forEach(el => {
if(el.id) quizData[el.id] = el.value;
});
}
function nextStep(s) {
if (!validateStep(s)) return;
collectData(s);
if (s === 6 && !isRental) {
showStep(8);
} else if (s === 9) {
if (hasSecondPerson) showStep(10); else finishQuiz();
} else if (s === 10) {
finishQuiz();
} else {
showStep(s + 1);
}
}
function prevStep(s) {
if (isFinished) {
isFinished = false;
document.getElementById(‘fluent-container’).classList.remove(‘show-form’);
document.getElementById(‘quiz-container’).style.display = ‘block’;
if (hasSecondPerson) showStep(10); else showStep(9);
return;
}
if (s === 8 && !isRental) showStep(6);
else if (s > 1) showStep(s – 1);
}
function showStep(s) {
document.querySelectorAll(‘.quiz-step’).forEach(el => el.classList.remove(‘active’));
document.getElementById(‘step’ + s).classList.add(‘active’);
currentStep = s;
updateUI();
window.scrollTo({ top: 0, behavior: ‘smooth’ });
}
function finishQuiz() {
isFinished = true;
document.getElementById(‘quiz-container’).style.display = ‘none’;
const fCont = document.getElementById(‘fluent-container’);
fCont.classList.add(‘show-form’);
updateUI();
setTimeout(() => {
const form = fCont.querySelector(‘form’);
if (form) {
for (let key in quizData) {
let input = form.querySelector(`[name=”${key}”]`);
if (input) {
input.value = quizData[key];
input.dispatchEvent(new Event(‘change’, { bubbles: true }));
}
}
}
}, 600);
window.scrollTo({ top: 0, behavior: ‘smooth’ });
}
document.addEventListener(‘DOMContentLoaded’, updateUI);
