Igl-Web-Design

{"uuid":"40d39c6d-e48a-427e-acb1-8567488fcdc3","provider":"wsw-nova","model":"sirius","image_strategy":"ai_self_select","image_quality":null,"image_size":null,"image_aspect_ratio":null,"use_website_data":true,"html":"<style>\n #wsw-snippet-40d39c6d-e48a-427e-acb1-8567488fcdc3 {\n font-family: inherit;\n box-sizing: border-box;\n background: var(--wsw-color-black, #000000);\n padding: 3.5rem 0;\n overflow: hidden;\n position: relative;\n }\n #wsw-snippet-40d39c6d-e48a-427e-acb1-8567488fcdc3 *,\n #wsw-snippet-40d39c6d-e48a-427e-acb1-8567488fcdc3 *::before,\n #wsw-snippet-40d39c6d-e48a-427e-acb1-8567488fcdc3 *::after {\n box-sizing: inherit;\n }\n\n #wsw-snippet-40d39c6d-e48a-427e-acb1-8567488fcdc3 .carousel-bg-glow {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 60%;\n height: 80%;\n transform: translate(-50%, -50%);\n background: radial-gradient(ellipse, rgba(153, 0, 0, 0.25) 0%, transparent 70%);\n pointer-events: none;\n z-index: 0;\n }\n\n #wsw-snippet-40d39c6d-e48a-427e-acb1-8567488fcdc3 .carousel-heading {\n text-align: center;\n margin-bottom: 2.5rem;\n position: relative;\n z-index: 2;\n }\n #wsw-snippet-40d39c6d-e48a-427e-acb1-8567488fcdc3 .carousel-heading h2 {\n color: var(--wsw-color-white, #ffffff);\n margin: 0;\n }\n\n #wsw-snippet-40d39c6d-e48a-427e-acb1-8567488fcdc3 .carousel-viewport {\n position: relative;\n z-index: 1;\n width: 100%;\n max-width: 1200px;\n margin: 0 auto;\n perspective: 1000px;\n }\n\n #wsw-snippet-40d39c6d-e48a-427e-acb1-8567488fcdc3 .carousel-track {\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n height: 420px;\n }\n\n #wsw-snippet-40d39c6d-e48a-427e-acb1-8567488fcdc3 .carousel-slide {\n position: absolute;\n width: 520px;\n max-width: 85vw;\n transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),\n opacity 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),\n filter 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);\n opacity: 0;\n filter: brightness(0.4) blur(2px);\n transform: scale(0.7) translateX(0);\n pointer-events: none;\n z-index: 0;\n text-decoration: none;\n display: block;\n }\n\n #wsw-snippet-40d39c6d-e48a-427e-acb1-8567488fcdc3 .carousel-slide[data-pos=\"0\"] {\n opacity: 1;\n filter: brightness(1) blur(0);\n transform: scale(1) translateX(0);\n z-index: 5;\n pointer-events: auto;\n }\n #wsw-snippet-40d39c6d-e48a-427e-acb1-8567488fcdc3 .carousel-slide[data-pos=\"-1\"] {\n opacity: 0.7;\n filter: brightness(0.45) blur(1px);\n transform: scale(0.78) translateX(-110%);\n z-index: 3;\n pointer-events: auto;\n }\n #wsw-snippet-40d39c6d-e48a-427e-acb1-8567488fcdc3 .carousel-slide[data-pos=\"1\"] {\n opacity: 0.7;\n filter: brightness(0.45) blur(1px);\n transform: scale(0.78) translateX(110%);\n z-index: 3;\n pointer-events: auto;\n }\n #wsw-snippet-40d39c6d-e48a-427e-acb1-8567488fcdc3 .carousel-slide[data-pos=\"-2\"] {\n opacity: 0.35;\n filter: brightness(0.3) blur(3px);\n transform: scale(0.6) translateX(-195%);\n z-index: 1;\n }\n #wsw-snippet-40d39c6d-e48a-427e-acb1-8567488fcdc3 .carousel-slide[data-pos=\"2\"] {\n opacity: 0.35;\n filter: brightness(0.3) blur(3px);\n transform: scale(0.6) translateX(195%);\n z-index: 1;\n }\n\n /* Badge */\n #wsw-snippet-40d39c6d-e48a-427e-acb1-8567488fcdc3 .slide-badge {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n margin: 0 auto 1rem;\n padding: 0.6rem 1.5rem;\n background: var(--wsw-color-dark, #40140f);\n border: 1px solid rgba(153, 0, 0, 0.6);\n border-radius: 50px;\n width: fit-content;\n position: relative;\n overflow: hidden;\n }\n #wsw-snippet-40d39c6d-e48a-427e-acb1-8567488fcdc3 .slide-badge::before {\n content: '';\n position: absolute;\n top: -1px;\n left: 50%;\n transform: translateX(-50%);\n width: 60%;\n height: 2px;\n background: linear-gradient(90deg, transparent, var(--wsw-color-accent, #990000), transparent);\n border-radius: 2px;\n }\n\n /* Shine overlay on badge */\n #wsw-snippet-40d39c6d-e48a-427e-acb1-8567488fcdc3 .slide-badge::after {\n content: '';\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n 120deg,\n transparent 0%,\n transparent 30%,\n rgba(255, 255, 255, 0.35) 50%,\n transparent 70%,\n transparent 100%\n );\n transition: none;\n pointer-events: none;\n }\n #wsw-snippet-40d39c6d-e48a-427e-acb1-8567488fcdc3 .slide-badge.shine::after {\n animation: wsw-badge-shine 0.7s ease-out forwards;\n }\n\n @keyframes wsw-badge-shine {\n 0% { left: -100%; }\n 100% { left: 100%; }\n }\n\n #wsw-snippet-40d39c6d-e48a-427e-acb1-8567488fcdc3 .slide-badge-icon {\n color: var(--wsw-color-accent, #990000);\n font-size: 1rem;\n line-height: 1;\n }\n #wsw-snippet-40d39c6d-e48a-427e-acb1-8567488fcdc3 .slide-badge-text {\n color: var(--wsw-color-white, #ffffff);\n font-size: 0.95rem;\n font-weight: 500;\n white-space: nowrap;\n }\n\n #wsw-snippet-40d39c6d-e48a-427e-acb1-8567488fcdc3 .slide-image-wrap {\n border-radius: 12px;\n overflow: hidden;\n border: 1px solid rgba(153, 0, 0, 0.3);\n box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5), 0 0 60px rgba(153, 0, 0, 0.1);\n background: var(--wsw-color-dark, #40140f);\n }\n #wsw-snippet-40d39c6d-e48a-427e-acb1-8567488fcdc3 .slide-image-wrap img {\n display: block;\n width: 100%;\n height: 280px;\n object-fit: cover;\n object-position: top center;\n }\n\n #wsw-snippet-40d39c6d-e48a-427e-acb1-8567488fcdc3 .carousel-dots {\n display: flex;\n justify-content: center;\n gap: 0.6rem;\n margin-top: 2rem;\n position: relative;\n z-index: 2;\n }\n #wsw-snippet-40d39c6d-e48a-427e-acb1-8567488fcdc3 .carousel-dot {\n width: 10px;\n height: 10px;\n border-radius: 50%;\n border: none;\n background: rgba(255, 255, 255, 0.25);\n cursor: pointer;\n transition: background 0.3s ease, transform 0.3s ease;\n padding: 0;\n }\n #wsw-snippet-40d39c6d-e48a-427e-acb1-8567488fcdc3 .carousel-dot:hover {\n background: rgba(255, 255, 255, 0.5);\n }\n #wsw-snippet-40d39c6d-e48a-427e-acb1-8567488fcdc3 .carousel-dot:focus-visible {\n outline: 2px solid var(--wsw-color-accent, #990000);\n outline-offset: 2px;\n }\n #wsw-snippet-40d39c6d-e48a-427e-acb1-8567488fcdc3 .carousel-dot.active {\n background: var(--wsw-color-accent, #990000);\n transform: scale(1.3);\n }\n\n #wsw-snippet-40d39c6d-e48a-427e-acb1-8567488fcdc3 .carousel-arrows {\n position: absolute;\n top: 50%;\n left: 0;\n right: 0;\n transform: translateY(-50%);\n display: flex;\n justify-content: space-between;\n pointer-events: none;\n z-index: 10;\n padding: 0 1rem;\n }\n #wsw-snippet-40d39c6d-e48a-427e-acb1-8567488fcdc3 .carousel-arrow {\n pointer-events: auto;\n width: 44px;\n height: 44px;\n border-radius: 50%;\n border: 1px solid rgba(255, 255, 255, 0.15);\n background: rgba(64, 20, 15, 0.7);\n color: var(--wsw-color-white, #ffffff);\n font-size: 1.2rem;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background 0.2s ease-out, border-color 0.2s ease-out;\n backdrop-filter: blur(4px);\n padding: 0;\n }\n #wsw-snippet-40d39c6d-e48a-427e-acb1-8567488fcdc3 .carousel-arrow:hover {\n background: var(--wsw-color-accent, #990000);\n border-color: var(--wsw-color-accent, #990000);\n }\n #wsw-snippet-40d39c6d-e48a-427e-acb1-8567488fcdc3 .carousel-arrow:focus-visible {\n outline: 2px solid var(--wsw-color-white, #ffffff);\n outline-offset: 2px;\n }\n\n #wsw-snippet-40d39c6d-e48a-427e-acb1-8567488fcdc3 .sparkle {\n position: absolute;\n color: var(--wsw-color-accent, #990000);\n font-size: 1.5rem;\n opacity: 0.35;\n z-index: 0;\n pointer-events: none;\n animation: wsw-sparkle-float 4s ease-in-out infinite;\n }\n #wsw-snippet-40d39c6d-e48a-427e-acb1-8567488fcdc3 .sparkle-1 { top: 15%; right: 12%; animation-delay: 0s; }\n #wsw-snippet-40d39c6d-e48a-427e-acb1-8567488fcdc3 .sparkle-2 { top: 60%; right: 8%; animation-delay: 1.5s; font-size: 1rem; }\n #wsw-snippet-40d39c6d-e48a-427e-acb1-8567488fcdc3 .sparkle-3 { top: 30%; left: 10%; animation-delay: 0.8s; font-size: 1.2rem; }\n\n @keyframes wsw-sparkle-float {\n 0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.35; }\n 50% { transform: translateY(-10px) rotate(15deg); opacity: 0.6; }\n }\n\n section.wsw-theme-w #wsw-snippet-40d39c6d-e48a-427e-acb1-8567488fcdc3,\n section.wsw-theme-wb #wsw-snippet-40d39c6d-e48a-427e-acb1-8567488fcdc3,\n section.wsw-theme-l #wsw-snippet-40d39c6d-e48a-427e-acb1-8567488fcdc3,\n section.wsw-theme-lb #wsw-snippet-40d39c6d-e48a-427e-acb1-8567488fcdc3,\n section.wsw-theme-al #wsw-snippet-40d39c6d-e48a-427e-acb1-8567488fcdc3 {\n background: var(--wsw-color-black, #000000);\n }\n\n @media (max-width: 768px) {\n #wsw-snippet-40d39c6d-e48a-427e-acb1-8567488fcdc3 { padding: 2.5rem 0; }\n #wsw-snippet-40d39c6d-e48a-427e-acb1-8567488fcdc3 .carousel-track { height: 340px; }\n #wsw-snippet-40d39c6d-e48a-427e-acb1-8567488fcdc3 .carousel-slide { width: 320px; max-width: 78vw; }\n #wsw-snippet-40d39c6d-e48a-427e-acb1-8567488fcdc3 .slide-image-wrap img { height: 200px; }\n #wsw-snippet-40d39c6d-e48a-427e-acb1-8567488fcdc3 .carousel-slide[data-pos=\"-2\"],\n #wsw-snippet-40d39c6d-e48a-427e-acb1-8567488fcdc3 .carousel-slide[data-pos=\"2\"] { opacity: 0; }\n #wsw-snippet-40d39c6d-e48a-427e-acb1-8567488fcdc3 .slide-badge-text { font-size: 0.82rem; }\n #wsw-snippet-40d39c6d-e48a-427e-acb1-8567488fcdc3 .sparkle { display: none; }\n #wsw-snippet-40d39c6d-e48a-427e-acb1-8567488fcdc3 .carousel-arrows { padding: 0 0.5rem; }\n }\n\n @media (max-width: 480px) {\n #wsw-snippet-40d39c6d-e48a-427e-acb1-8567488fcdc3 .carousel-track { height: 300px; }\n #wsw-snippet-40d39c6d-e48a-427e-acb1-8567488fcdc3 .carousel-slide { width: 260px; }\n #wsw-snippet-40d39c6d-e48a-427e-acb1-8567488fcdc3 .slide-image-wrap img { height: 170px; }\n #wsw-snippet-40d39c6d-e48a-427e-acb1-8567488fcdc3 .slide-badge { padding: 0.5rem 1rem; }\n #wsw-snippet-40d39c6d-e48a-427e-acb1-8567488fcdc3 .slide-badge-text { font-size: 0.75rem; }\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-40d39c6d-e48a-427e-acb1-8567488fcdc3 *,\n #wsw-snippet-40d39c6d-e48a-427e-acb1-8567488fcdc3 *::before,\n #wsw-snippet-40d39c6d-e48a-427e-acb1-8567488fcdc3 *::after {\n transition-duration: 0.01ms !important;\n animation-duration: 0.01ms !important;\n }\n }\n</style>\n\n<div id=\"wsw-snippet-40d39c6d-e48a-427e-acb1-8567488fcdc3\">\n <div class=\"carousel-bg-glow\"></div>\n\n <span class=\"sparkle sparkle-1\">✦</span>\n <span class=\"sparkle sparkle-2\">✦</span>\n <span class=\"sparkle sparkle-3\">✦</span>\n\n <div class=\"carousel-heading\">\n <h2>Webseiten, die überzeugen</h2>\n </div>\n\n <div class=\"carousel-viewport\">\n <div class=\"carousel-track\">\n\n <a class=\"carousel-slide\" href=\"https://www.holzerdach-dornbirn.at\" target=\"_blank\" rel=\"noopener\" data-pos=\"1\" aria-label=\"Webseiten für Handwerker\" draggable=\"false\">\n <div class=\"slide-badge shine\">\n <span class=\"slide-badge-icon\">✦</span>\n <span class=\"slide-badge-text\">Webseiten für Handwerker</span>\n </div>\n <div class=\"slide-image-wrap\">\n <img src=\"/s3/b/wsw.website.4349/public/images/pages/wwwholzerdach-dornbirnat.webp?_8953485\" alt=\"Webseiten für Handwerker – holzerdach-dornbirn.at Beispiel\" draggable=\"false\">\n </div>\n </a>\n\n <a class=\"carousel-slide\" href=\"https://www.seeblickmakler.at\" target=\"_blank\" rel=\"noopener\" data-pos=\"2\" aria-label=\"Webseiten für Versicherungsagenten\" draggable=\"false\">\n <div class=\"slide-badge shine\">\n <span class=\"slide-badge-icon\">✦</span>\n <span class=\"slide-badge-text\">Webseiten für Versicherungsagenten</span>\n </div>\n <div class=\"slide-image-wrap\">\n <img src=\"/s3/b/wsw.website.4349/public/images/pages/wwwseeblickmaklerat.webp?_8095892.299999952\" alt=\"Webseiten für Versicherungsagenten – seeblickmakler.at Beispiel\" loading=\"lazy\" draggable=\"false\">\n </div>\n </a>\n\n <a class=\"carousel-slide\" href=\"https://www.physio-feurstein.at\" target=\"_blank\" rel=\"noopener\" data-pos=\"2\" aria-label=\"Webseiten für Physiotherapeuten\" draggable=\"false\">\n <div class=\"slide-badge shine\">\n <span class=\"slide-badge-icon\">✦</span>\n <span class=\"slide-badge-text\">Webseiten für Physiotherapeuten</span>\n </div>\n <div class=\"slide-image-wrap\">\n <img src=\"/s3/b/wsw.website.4349/public/images/pages/wwwphysio-feursteinat.webp?_8705932.900000095\" alt=\"Webseiten für Physiotherapeuten – physio-feurstein.at Beispiel\" loading=\"lazy\" draggable=\"false\">\n </div>\n </a>\n\n <a class=\"carousel-slide\" href=\"https://www.koenig-bechter.at\" target=\"_blank\" rel=\"noopener\" data-pos=\"-2\" aria-label=\"Webseiten für Anwälte\" draggable=\"false\">\n <div class=\"slide-badge shine\">\n <span class=\"slide-badge-icon\">✦</span>\n <span class=\"slide-badge-text\">Webseiten für Anwälte</span>\n </div>\n <div class=\"slide-image-wrap\">\n <img src=\"/s3/b/wsw.website.4349/public/images/pages/wwwkoenig-bechterat.webp?_6994016.700000048\" alt=\"Webseiten für Anwälte – koenig-bechter.at Beispiel\" loading=\"lazy\" draggable=\"false\">\n </div>\n </a>\n\n <a class=\"carousel-slide\" href=\"https://www.bup-dienstleistungen.de\" target=\"_blank\" rel=\"noopener\" data-pos=\"-2\" aria-label=\"Webseiten für Gebäudereinigung\" draggable=\"false\">\n <div class=\"slide-badge shine\">\n <span class=\"slide-badge-icon\">✦</span>\n <span class=\"slide-badge-text\">Webseiten für Gebäudereinigung</span>\n </div>\n <div class=\"slide-image-wrap\">\n <img src=\"/s3/b/wsw.website.4349/public/images/pages/wwwpub-dienstleistungende.webp?_8320877.700000048\" alt=\"Webseiten für Gebäudereinigung – bup-dienstleistungen.de Beispiel\" loading=\"lazy\" draggable=\"false\">\n </div>\n </a>\n\n <a class=\"carousel-slide\" href=\"https://www.koeb-oele.at\" target=\"_blank\" rel=\"noopener\" data-pos=\"-2\" aria-label=\"Webseite für KMU\" draggable=\"false\">\n <div class=\"slide-badge shine\">\n <span class=\"slide-badge-icon\">✦</span>\n <span class=\"slide-badge-text\">Webseite für KMU</span>\n </div>\n <div class=\"slide-image-wrap\">\n <img src=\"/s3/b/wsw.website.4349/public/images/pages/wwwkoeb-oeleat.webp?_6662474.200000048\" alt=\"Webseite für KMU – koeb-oele.at Beispiel\" loading=\"lazy\" draggable=\"false\">\n </div>\n </a>\n\n <a class=\"carousel-slide\" href=\"https://www.igl-wingchun.com\" target=\"_blank\" rel=\"noopener\" data-pos=\"-1\" aria-label=\"Webseiten für Selbstverteidigung\" draggable=\"false\">\n <div class=\"slide-badge shine\">\n <span class=\"slide-badge-icon\">✦</span>\n <span class=\"slide-badge-text\">Webseiten für Selbstverteidigung</span>\n </div>\n <div class=\"slide-image-wrap\">\n <img src=\"/s3/b/wsw.website.4349/public/images/pages/wwwigl-wingchun.webp?_8543768.100000143\" alt=\"Webseiten für Selbstverteidigung – igl-wingchun.com Beispiel\" loading=\"lazy\" draggable=\"false\">\n </div>\n </a>\n\n <a class=\"carousel-slide\" href=\"https://www.dreh-kraft.de\" target=\"_blank\" rel=\"noopener\" data-pos=\"0\" aria-label=\"Webseiten für Dienstleister\" draggable=\"false\">\n <div class=\"slide-badge shine\">\n <span class=\"slide-badge-icon\">✦</span>\n <span class=\"slide-badge-text\">Webseiten für Dienstleister</span>\n </div>\n <div class=\"slide-image-wrap\">\n <img src=\"/s3/b/wsw.website.4349/public/images/pages/wwwdreh-kraftde.webp?_7661738.900000095\" alt=\"Webseiten für Dienstleister – dreh-kraft.de Beispiel\" loading=\"lazy\" draggable=\"false\">\n </div>\n </a>\n\n </div>\n\n <div class=\"carousel-arrows\">\n <button class=\"carousel-arrow carousel-prev\" aria-label=\"Vorheriges Slide\">‹</button>\n <button class=\"carousel-arrow carousel-next\" aria-label=\"Nächstes Slide\">›</button>\n </div>\n </div>\n\n <div class=\"carousel-dots\" role=\"tablist\" aria-label=\"Karussell-Navigation\"><button class=\"carousel-dot\" role=\"tab\" aria-label=\"Slide 1\"></button><button class=\"carousel-dot\" role=\"tab\" aria-label=\"Slide 2\"></button><button class=\"carousel-dot\" role=\"tab\" aria-label=\"Slide 3\"></button><button class=\"carousel-dot\" role=\"tab\" aria-label=\"Slide 4\"></button><button class=\"carousel-dot\" role=\"tab\" aria-label=\"Slide 5\"></button><button class=\"carousel-dot\" role=\"tab\" aria-label=\"Slide 6\"></button><button class=\"carousel-dot\" role=\"tab\" aria-label=\"Slide 7\"></button><button class=\"carousel-dot active\" role=\"tab\" aria-label=\"Slide 8\"></button><button class=\"carousel-dot\" role=\"tab\" aria-label=\"Slide 1\"></button><button class=\"carousel-dot\" role=\"tab\" aria-label=\"Slide 2\"></button><button class=\"carousel-dot\" role=\"tab\" aria-label=\"Slide 3\"></button><button class=\"carousel-dot\" role=\"tab\" aria-label=\"Slide 4\"></button><button class=\"carousel-dot\" role=\"tab\" aria-label=\"Slide 5\"></button><button class=\"carousel-dot\" role=\"tab\" aria-label=\"Slide 6\"></button><button class=\"carousel-dot\" role=\"tab\" aria-label=\"Slide 7\"></button><button class=\"carousel-dot\" role=\"tab\" aria-label=\"Slide 8\"></button></div>\n</div>\n\n<script>\n(function() {\n 'use strict';\n\n const el = document.getElementById('wsw-snippet-40d39c6d-e48a-427e-acb1-8567488fcdc3');\n if (!el) return;\n\n const slides = Array.from(el.querySelectorAll('.carousel-slide'));\n const badges = Array.from(el.querySelectorAll('.slide-badge'));\n const dotsContainer = el.querySelector('.carousel-dots');\n const prevBtn = el.querySelector('.carousel-prev');\n const nextBtn = el.querySelector('.carousel-next');\n const total = slides.length;\n let current = 0;\n let autoInterval = null;\n var AUTO_DELAY = 4000;\n\n /* Build dots */\n slides.forEach(function(_, i) {\n var dot = document.createElement('button');\n dot.className = 'carousel-dot' + (i === 0 ? ' active' : '');\n dot.setAttribute('role', 'tab');\n dot.setAttribute('aria-label', 'Slide ' + (i + 1));\n dotsContainer.appendChild(dot);\n });\n var dots = Array.from(dotsContainer.querySelectorAll('.carousel-dot'));\n\n function triggerShine() {\n badges.forEach(function(badge) {\n badge.classList.remove('shine');\n void badge.offsetWidth;\n badge.classList.add('shine');\n });\n }\n\n function updatePositions() {\n slides.forEach(function(slide, i) {\n var offset = i - current;\n if (offset > Math.floor(total / 2)) offset -= total;\n if (offset < -Math.floor(total / 2)) offset += total;\n if (offset < -2) offset = -2;\n if (offset > 2) offset = 2;\n slide.setAttribute('data-pos', offset);\n });\n dots.forEach(function(dot, i) {\n dot.classList.toggle('active', i === current);\n });\n }\n\n function goTo(index) {\n current = (index + total) % total;\n updatePositions();\n triggerShine();\n }\n\n function next() { goTo(current + 1); }\n function prev() { goTo(current - 1); }\n\n function startAuto() {\n stopAuto();\n autoInterval = setInterval(next, AUTO_DELAY);\n }\n function stopAuto() {\n if (autoInterval) { clearInterval(autoInterval); autoInterval = null; }\n }\n\n nextBtn.addEventListener('click', function() { next(); startAuto(); });\n prevBtn.addEventListener('click', function() { prev(); startAuto(); });\n\n dots.forEach(function(dot, i) {\n dot.addEventListener('click', function() { goTo(i); startAuto(); });\n });\n\n el.addEventListener('mouseenter', stopAuto);\n el.addEventListener('mouseleave', startAuto);\n\n var touchStartX = 0;\n var touchEndX = 0;\n el.addEventListener('touchstart', function(e) {\n touchStartX = e.changedTouches[0].screenX;\n stopAuto();\n }, { passive: true });\n el.addEventListener('touchend', function(e) {\n touchEndX = e.changedTouches[0].screenX;\n var diff = touchStartX - touchEndX;\n if (Math.abs(diff) > 50) {\n if (diff > 0) next(); else prev();\n }\n startAuto();\n }, { passive: true });\n\n updatePositions();\n startAuto();\n\n})();\n</script>","summary":"The user requested a dark-themed carousel/slider showcasing website examples for different industries, with the heading \"Webseiten, die überzeugen\" on a black (#000000) background with a dark red (#990000) accent color scheme. The carousel has 8 slides (Handwerker → holzerdach-dornbirn.at, Versicherungsagenten → seeblickmakler.at, Physiotherapeuten → physio-feurstein.at, Anwälte → koenig-bechter.at, Gebäudereinigung → currently linked to pub-dienstleistungen.de but needs re-linking to bup-dienstleistungen.de, KMU → koeb-oele.at, Selbstverteidigung → igl-wingchun.com, Dienstleister → dreh-kraft.de), each with a pill-shaped badge above a 280px-tall image in a 12px-rounded container, featuring 520px-wide slides with perspective-based positioning (scale/translate/blur/brightness transitions), arrow navigation, dot indicators, touch/swipe support, 4s auto-rotation, and decorative sparkle animations. All badges have a shine effect (light streak animation) triggered on each slide change, and all slide links open in new tabs. The current state has a bug where dots are duplicated many times in the HTML due to the JS appending dots on each re-initialization; the Gebäudereinigung slide link needs to be corrected from pub-dienstleistungen.de to bup-dienstleistungen.de as the latest requested change.","version":11,"inserted_version":11,"total_cost":8.253561855000001,"total_messages_sent":12,"summarized_at_total":12}

✦ ✦ ✦