Direkt zum Inhalt .st0{fill:#0A60AA;} .st1{fill:#3C3C3C;} Main navigation DE Gratis Beratung var handleMouseOver = () => { var productsAll = document.querySelectorAll(".product, .product-image"); productsAll.forEach(function(e) { e.classList.add('paused'); }); }; var handleMouseLeave = () => { document.querySelectorAll(".product, .product-image").forEach(function(e) { e.classList.remove('paused'); e.classList.remove('opacity0'); e.classList.remove('opacity1'); }); }; var handleClickProduct = (productType) =>{ document.querySelectorAll(".product-active, .product-image").forEach(function(e) {e.classList.add('opacity0');}); var productClass = "." + productType + "-active"; document.querySelectorAll(productClass).forEach(function(e) { e.classList.remove('opacity0'); e.classList.add('opacity1'); }); }; var handleEvents = () => { var allProducts = document.querySelectorAll('.product'); allProducts.forEach(function(e) { e.addEventListener('mouseover', handleMouseOver); e.addEventListener('mouseleave', handleMouseLeave); }); document.querySelectorAll('.solar-active, .solar-inactive').forEach(function(e) { e.addEventListener('click', handleClickProduct.bind(this,'solar')); e.addEventListener('mouseover', handleClickProduct.bind(this,'solar')); }); document.querySelectorAll('.home-active, .home-inactive').forEach(function(e) { e.addEventListener('click', handleClickProduct.bind(this,'home')); e.addEventListener('mouseover', handleClickProduct.bind(this,'home')); }); document.querySelectorAll('.cloud-active, .cloud-inactive').forEach(function(e) { e.addEventListener('click', handleClickProduct.bind(this,'cloud')); e.addEventListener('mouseover', handleClickProduct.bind(this,'cloud')); }); document.querySelectorAll('.wallbox-active, .wallbox-inactive').forEach(function(e) { e.addEventListener('click', handleClickProduct.bind(this,'wallbox')); e.addEventListener('mouseover', handleClickProduct.bind(this,'wallbox')); }); }; window.addEventListener('load', handleEvents); .link-text { font-family:Din,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; font-size: 0.9rem; font-weight: 500; line-height: 1.66; text-align: left; fill: #0a60a7; background: #fff; letter-spacing: 0.05rem; } .title-text--active { font-family:Din,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; font-size: 1.6rem; font-weight: 500; line-height: 1.66; text-align: left; background-color: transparent; fill: #fff; letter-spacing: 0.05rem; } .title-text--inactive { font-family:Din,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; font-size: 1.6rem; font-weight: 500; line-height: 1.66; text-align: left; background-color: transparent; fill: #3c3c3c; letter-spacing: 0.05rem; } .description-text { font-family:Din,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; font-size: 0.9rem; font-weight: 400; line-height: 1.66; text-align: left; background-color: transparent; fill: #3c3c3c; letter-spacing: 0.05rem; } .solar-active { animation: hideshow 12s ease infinite; } .home-active { opacity: 0; animation: hideshow 12s 3s ease infinite; } .wallbox-active { opacity: 0; animation: hideshow 12s 6s ease infinite; } .cloud-active { opacity: 0; animation: hideshow 12s 9s ease infinite; } @keyframes hideshow { 0% { opacity: 1; } 25% { opacity: 1; } 30% { opacity: 0; } 100% { opacity: 0; } } svg > * { animation-play-state: running; } svg:hover > .paused { animation-play-state: paused; } .opacity1 { opacity: 1 !important; animation-play-state: paused; } .opacity0 { opacity: 0 !important; animation-play-state: paused; } 4.5 basierend auf 815 rezensionen Wir verwenden Cookies und ähnliche Technologien, um den Besuch unserer Webseite optimal zu gestalten und ständig zu verbessern. Dazu setzen wir Dienste von Drittanbietern ein die unter anderem die Daten an Drittländern (z.B. USA) übermitteln, die kein mit der EU vergleichbares Datenschutzniveau aufweisen. Sie können hier ablehnen. Lassen Sie mich wählen... Einverstanden