Wählen Sie Ihren Standort und Termin

var showroomDefaultActive = 'landshut'; function showroomGetActiveId() { var activeButton = document.querySelector('.showroom-location-button[data-active="true"]'); if (activeButton) { return activeButton.getAttribute('data-showroom'); } return showroomDefaultActive; } function showroomResetButtons() { document.querySelectorAll('.showroom-location-button').forEach(function (btn) { btn.style.background = '#fff'; btn.style.color = '#000'; btn.style.borderColor = '#ddd'; btn.style.borderWidth = '2px'; btn.style.borderRadius = '8px'; btn.style.marginBottom = '10px'; btn.setAttribute('data-active', 'false'); }); } function showroomSetActiveButton(showroom) { showroomResetButtons(); var activeButton = document.querySelector('.showroom-location-button[data-showroom="' + showroom + '"]'); if (activeButton) { activeButton.style.background = '#575757'; activeButton.style.color = '#fff'; activeButton.style.borderColor = '#575757'; activeButton.style.borderWidth = '2px'; activeButton.setAttribute('data-active', 'true'); if (window.innerWidth <= 768) { activeButton.style.borderRadius = '8px 8px 0 0'; activeButton.style.marginBottom = '0'; } } } function showroomMovePanelsToContent() { var content = document.querySelector('.showroom-content-area'); var panels = Array.prototype.slice.call(document.querySelectorAll('.showroom-card-panel')); if (!content) return; panels.sort(function (a, b) { return parseInt(a.getAttribute('data-showroom-order'), 10) - parseInt(b.getAttribute('data-showroom-order'), 10); }); panels.forEach(function (panel) { content.appendChild(panel); }); } function showroomMoveActivePanelUnderButton(showroom) { var activePanel = document.getElementById('showroom-' + showroom); var activeButton = document.querySelector('.showroom-location-button[data-showroom="' + showroom + '"]'); if (activePanel && activeButton && activeButton.parentNode) { activeButton.parentNode.insertBefore(activePanel, activeButton.nextSibling); } } function showroomApplyCardOrder(isMobile) { document.querySelectorAll('.showroom-card-panel').forEach(function (panel) { var image = panel.querySelector('.showroom-card-image'); var cardContent = panel.querySelector('.showroom-card-content'); if (!image || !cardContent) return; if (isMobile) { if (panel.firstElementChild !== cardContent) { panel.insertBefore(cardContent, image); } cardContent.style.padding = '20px 18px 22px'; } else { if (panel.firstElementChild !== image) { panel.insertBefore(image, cardContent); } cardContent.style.padding = '24px'; } }); } function showroomShowPanel(showroom, animate) { document.querySelectorAll('.showroom-card-panel').forEach(function (panel) { panel.style.display = 'none'; panel.style.opacity = '0'; panel.style.transform = 'translateX(28px)'; panel.style.transition = 'none'; }); var activePanel = document.getElementById('showroom-' + showroom); if (activePanel) { activePanel.style.display = 'block'; activePanel.style.opacity = animate ? '0' : '1'; activePanel.style.transform = animate ? 'translateY(8px)' : 'translateY(0)'; activePanel.style.transition = animate ? 'opacity .25s ease, transform .25s ease' : 'none'; setTimeout(function () { activePanel.style.opacity = '1'; activePanel.style.transform = 'translateY(0)'; }, 20); } } function showroomApplyResponsiveLayout() { var wrapper = document.querySelector('.showroom-booking-wrapper'); var menu = document.querySelector('.showroom-location-menu'); var content = document.querySelector('.showroom-content-area'); var panels = document.querySelectorAll('.showroom-card-panel'); var activeShowroom = showroomGetActiveId(); var isMobile = window.innerWidth <= 768; if (!wrapper || !menu || !content) return; showroomApplyCardOrder(isMobile); if (isMobile) { wrapper.style.flexDirection = 'column'; wrapper.style.maxWidth = '520px'; wrapper.style.padding = '24px 12px 0'; menu.style.width = '100%'; menu.style.borderRadius = '12px'; menu.style.boxSizing = 'border-box'; menu.style.alignSelf = 'auto'; content.style.width = '100%'; content.style.minHeight = '0'; content.style.display = 'none'; panels.forEach(function (panel) { panel.style.borderRadius = '0 0 8px 8px'; panel.style.width = '100%'; panel.style.boxSizing = 'border-box'; panel.style.boxShadow = '0 6px 18px rgba(0,0,0,.08)'; panel.style.marginBottom = '10px'; }); showroomMoveActivePanelUnderButton(activeShowroom); showroomSetActiveButton(activeShowroom); showroomShowPanel(activeShowroom, false); } else { showroomMovePanelsToContent(); wrapper.style.flexDirection = 'row'; wrapper.style.maxWidth = '860px'; wrapper.style.padding = '24px 16px 0'; menu.style.width = '260px'; menu.style.borderRadius = '12px 0 0 12px'; menu.style.boxSizing = 'border-box'; menu.style.alignSelf = 'stretch'; content.style.width = '520px'; content.style.minHeight = '520px'; content.style.display = 'flex'; panels.forEach(function (panel) { panel.style.borderRadius = '0 12px 12px 0'; panel.style.width = '100%'; panel.style.boxSizing = 'border-box'; panel.style.boxShadow = '0 6px 18px rgba(0,0,0,.08)'; panel.style.marginBottom = '0'; }); showroomSetActiveButton(activeShowroom); showroomShowPanel(activeShowroom, false); } } document.querySelectorAll('.showroom-location-button').forEach(function (button) { button.addEventListener('click', function () { var showroom = this.getAttribute('data-showroom'); var isMobile = window.innerWidth <= 768; showroomSetActiveButton(showroom); if (isMobile) { showroomMoveActivePanelUnderButton(showroom); } else { showroomMovePanelsToContent(); } showroomApplyResponsiveLayout(); showroomShowPanel(showroom, true); }); }); document.querySelectorAll('.showroom-cta').forEach(function (cta) { cta.addEventListener('mouseenter', function () { this.style.background = '#ff1743'; this.style.color = '#fff'; this.style.borderColor = '#ff1743'; }); cta.addEventListener('mouseleave', function () { this.style.background = '#fff'; this.style.color = '#ff1743'; this.style.borderColor = '#ff1743'; }); }); showroomSetActiveButton(showroomDefaultActive); showroomApplyResponsiveLayout(); window.addEventListener('resize', showroomApplyResponsiveLayout);