{"uuid":"fe01f867-87a4-4603-a558-c1a2e8394c05","provider":"wsw-nova","model":"sirius","image_strategy":"generate_gemini:nano_pro","image_quality":null,"image_size":null,"image_aspect_ratio":null,"use_website_data":true,"html":"<style>\n #wsw-snippet-fe01f867-87a4-4603-a558-c1a2e8394c05 {\n font-family: inherit;\n box-sizing: border-box;\n position: relative;\n width: 100%;\n overflow: hidden;\n background-color: var(--wsw-color-black, #212529);\n }\n #wsw-snippet-fe01f867-87a4-4603-a558-c1a2e8394c05 *,\n #wsw-snippet-fe01f867-87a4-4603-a558-c1a2e8394c05 *::before,\n #wsw-snippet-fe01f867-87a4-4603-a558-c1a2e8394c05 *::after {\n box-sizing: inherit;\n }\n\n /* Slider */\n #wsw-snippet-fe01f867-87a4-4603-a558-c1a2e8394c05 .hero-slider {\n position: relative;\n width: 100%;\n height: clamp(340px, 42vw, 540px);\n }\n\n /* Slides */\n #wsw-snippet-fe01f867-87a4-4603-a558-c1a2e8394c05 .hero-slide {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: 0;\n transition: opacity 1.2s ease-in-out;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1;\n }\n\n #wsw-snippet-fe01f867-87a4-4603-a558-c1a2e8394c05 .hero-slide.is-active {\n opacity: 1;\n z-index: 2;\n }\n\n #wsw-snippet-fe01f867-87a4-4603-a558-c1a2e8394c05 .hero-slide-bg {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-size: cover;\n background-position: center;\n background-repeat: no-repeat;\n }\n\n #wsw-snippet-fe01f867-87a4-4603-a558-c1a2e8394c05 .hero-slide-overlay {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n }\n\n /* Slide-specific overlays */\n #wsw-snippet-fe01f867-87a4-4603-a558-c1a2e8394c05 .hero-slide[data-slide=\"1\"] .hero-slide-overlay {\n background: linear-gradient(145deg, rgba(21, 88, 165, 0.82) 0%, rgba(33, 37, 41, 0.68) 100%);\n }\n #wsw-snippet-fe01f867-87a4-4603-a558-c1a2e8394c05 .hero-slide[data-slide=\"2\"] .hero-slide-overlay {\n background: linear-gradient(145deg, rgba(33, 37, 41, 0.72) 0%, rgba(21, 88, 165, 0.76) 100%);\n }\n #wsw-snippet-fe01f867-87a4-4603-a558-c1a2e8394c05 .hero-slide[data-slide=\"3\"] .hero-slide-overlay {\n background: linear-gradient(145deg, rgba(45, 45, 45, 0.75) 0%, rgba(21, 88, 165, 0.7) 100%);\n }\n #wsw-snippet-fe01f867-87a4-4603-a558-c1a2e8394c05 .hero-slide[data-slide=\"4\"] .hero-slide-overlay {\n background: linear-gradient(145deg, rgba(21, 88, 165, 0.72) 0%, rgba(45, 45, 45, 0.78) 100%);\n }\n #wsw-snippet-fe01f867-87a4-4603-a558-c1a2e8394c05 .hero-slide[data-slide=\"5\"] .hero-slide-overlay {\n background: linear-gradient(145deg, rgba(21, 88, 165, 0.78) 0%, rgba(33, 37, 41, 0.72) 100%);\n }\n #wsw-snippet-fe01f867-87a4-4603-a558-c1a2e8394c05 .hero-slide[data-slide=\"6\"] .hero-slide-overlay {\n background: linear-gradient(145deg, rgba(45, 45, 45, 0.7) 0%, rgba(21, 88, 165, 0.78) 100%);\n }\n\n /* Content */\n #wsw-snippet-fe01f867-87a4-4603-a558-c1a2e8394c05 .hero-content {\n position: relative;\n z-index: 3;\n text-align: center;\n max-width: 820px;\n padding: 1.5rem 1.5rem;\n }\n\n #wsw-snippet-fe01f867-87a4-4603-a558-c1a2e8394c05 .hero-badge {\n display: inline-block;\n padding: 0.375rem 1.125rem;\n border: 1px solid rgba(255, 255, 255, 0.35);\n border-radius: 50px;\n color: var(--wsw-color-white, #ffffff);\n font-size: 0.8rem;\n letter-spacing: 0.12rem;\n text-transform: uppercase;\n margin-bottom: 1.25rem;\n backdrop-filter: blur(6px);\n background: rgba(255, 255, 255, 0.1);\n }\n\n #wsw-snippet-fe01f867-87a4-4603-a558-c1a2e8394c05 .hero-content h1 {\n color: var(--wsw-color-white, #ffffff);\n margin: 0 0 1rem 0;\n font-size: clamp(1.5rem, 4vw, 2.5rem);\n line-height: 1.2;\n text-shadow: 0 2px 16px rgba(0, 0, 0, 0.25);\n white-space: nowrap;\n }\n\n #wsw-snippet-fe01f867-87a4-4603-a558-c1a2e8394c05 .hero-content h1 .hero-highlight {\n background: linear-gradient(135deg, rgba(255,255,255,0.97), rgba(190,215,255,0.97));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n\n #wsw-snippet-fe01f867-87a4-4603-a558-c1a2e8394c05 .hero-subtitle {\n color: rgba(255, 255, 255, 0.88);\n font-size: clamp(0.95rem, 1.8vw, 1.1rem);\n line-height: 1.6;\n margin: 0 0 1.5rem 0;\n max-width: 60ch;\n display: inline-block;\n }\n\n /* Wider subtitle for Kontakt slide */\n #wsw-snippet-fe01f867-87a4-4603-a558-c1a2e8394c05 .hero-slide[data-slide=\"6\"] .hero-subtitle {\n max-width: 80ch;\n }\n\n #wsw-snippet-fe01f867-87a4-4603-a558-c1a2e8394c05 .hero-cta-group {\n display: flex;\n gap: 1rem;\n justify-content: center;\n align-items: center;\n flex-wrap: wrap;\n }\n\n #wsw-snippet-fe01f867-87a4-4603-a558-c1a2e8394c05 .hero-cta {\n display: inline-block;\n padding: 0.75rem 2rem;\n background-color: var(--wsw-color-accent, #1558a5);\n color: var(--wsw-color-white, #ffffff);\n text-decoration: none;\n border-radius: 6px;\n font-weight: 500;\n font-size: 0.95rem;\n transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, background-color 0.2s ease-out;\n box-shadow: 0 4px 20px rgba(21, 88, 165, 0.35);\n }\n\n #wsw-snippet-fe01f867-87a4-4603-a558-c1a2e8394c05 .hero-cta:hover {\n transform: translateY(-2px);\n box-shadow: 0 6px 28px rgba(21, 88, 165, 0.5);\n background-color: var(--wsw-color-dark, #2d2d2d);\n }\n\n #wsw-snippet-fe01f867-87a4-4603-a558-c1a2e8394c05 .hero-cta:focus-visible {\n outline: 2px solid var(--wsw-color-white, #ffffff);\n outline-offset: 3px;\n }\n\n #wsw-snippet-fe01f867-87a4-4603-a558-c1a2e8394c05 .hero-cta-secondary {\n display: inline-block;\n padding: 0.75rem 2rem;\n background: rgba(255, 255, 255, 0.12);\n border: 1px solid rgba(255, 255, 255, 0.4);\n color: var(--wsw-color-white, #ffffff);\n text-decoration: none;\n border-radius: 6px;\n font-weight: 500;\n font-size: 0.95rem;\n backdrop-filter: blur(4px);\n transition: transform 0.2s ease-out, background-color 0.2s ease-out, border-color 0.2s ease-out;\n }\n\n #wsw-snippet-fe01f867-87a4-4603-a558-c1a2e8394c05 .hero-cta-secondary:hover {\n transform: translateY(-2px);\n background: rgba(255, 255, 255, 0.22);\n border-color: rgba(255, 255, 255, 0.7);\n }\n\n #wsw-snippet-fe01f867-87a4-4603-a558-c1a2e8394c05 .hero-cta-secondary:focus-visible {\n outline: 2px solid var(--wsw-color-white, #ffffff);\n outline-offset: 3px;\n }\n\n /* Arrows */\n #wsw-snippet-fe01f867-87a4-4603-a558-c1a2e8394c05 .hero-arrow {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n z-index: 5;\n width: 44px;\n height: 44px;\n border-radius: 50%;\n border: 2px solid rgba(255, 255, 255, 0.35);\n background: rgba(0, 0, 0, 0.2);\n backdrop-filter: blur(6px);\n color: var(--wsw-color-white, #ffffff);\n font-size: 1.125rem;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background-color 0.2s ease-out, border-color 0.2s ease-out, transform 0.2s ease-out;\n padding: 0;\n }\n\n #wsw-snippet-fe01f867-87a4-4603-a558-c1a2e8394c05 .hero-arrow:hover {\n background: rgba(21, 88, 165, 0.55);\n border-color: rgba(255, 255, 255, 0.7);\n transform: translateY(-50%) scale(1.08);\n }\n\n #wsw-snippet-fe01f867-87a4-4603-a558-c1a2e8394c05 .hero-arrow:focus-visible {\n outline: 2px solid var(--wsw-color-white, #ffffff);\n outline-offset: 3px;\n }\n\n #wsw-snippet-fe01f867-87a4-4603-a558-c1a2e8394c05 .hero-arrow-prev { left: 1.5rem; }\n #wsw-snippet-fe01f867-87a4-4603-a558-c1a2e8394c05 .hero-arrow-next { right: 1.5rem; }\n\n /* Dots */\n #wsw-snippet-fe01f867-87a4-4603-a558-c1a2e8394c05 .hero-dots {\n position: absolute;\n bottom: 1.5rem;\n left: 50%;\n transform: translateX(-50%);\n z-index: 5;\n display: flex;\n gap: 0.625rem;\n align-items: center;\n }\n\n #wsw-snippet-fe01f867-87a4-4603-a558-c1a2e8394c05 .hero-dot {\n width: 10px;\n height: 10px;\n border-radius: 50%;\n border: 2px solid rgba(255, 255, 255, 0.65);\n background: transparent;\n cursor: pointer;\n transition: background-color 0.3s ease-out, transform 0.3s ease-out, border-color 0.3s ease-out;\n padding: 0;\n }\n\n #wsw-snippet-fe01f867-87a4-4603-a558-c1a2e8394c05 .hero-dot:hover {\n background: rgba(255, 255, 255, 0.45);\n transform: scale(1.15);\n }\n\n #wsw-snippet-fe01f867-87a4-4603-a558-c1a2e8394c05 .hero-dot:focus-visible {\n outline: 2px solid var(--wsw-color-white, #ffffff);\n outline-offset: 3px;\n }\n\n #wsw-snippet-fe01f867-87a4-4603-a558-c1a2e8394c05 .hero-dot.is-active {\n background: var(--wsw-color-white, #ffffff);\n border-color: var(--wsw-color-white, #ffffff);\n transform: scale(1.2);\n }\n\n /* Progress bar */\n #wsw-snippet-fe01f867-87a4-4603-a558-c1a2e8394c05 .hero-progress {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 3px;\n z-index: 5;\n background: rgba(255, 255, 255, 0.12);\n }\n\n #wsw-snippet-fe01f867-87a4-4603-a558-c1a2e8394c05 .hero-progress-bar {\n height: 100%;\n width: 0%;\n background: linear-gradient(90deg, var(--wsw-color-accent, #1558a5), rgba(255,255,255,0.8));\n transition: width 0.1s linear;\n }\n\n /* Responsive */\n @media (max-width: 768px) {\n #wsw-snippet-fe01f867-87a4-4603-a558-c1a2e8394c05 .hero-slider {\n height: clamp(300px, 65vw, 420px);\n }\n #wsw-snippet-fe01f867-87a4-4603-a558-c1a2e8394c05 .hero-content h1 {\n white-space: normal;\n }\n #wsw-snippet-fe01f867-87a4-4603-a558-c1a2e8394c05 .hero-arrow {\n width: 38px;\n height: 38px;\n font-size: 0.95rem;\n }\n #wsw-snippet-fe01f867-87a4-4603-a558-c1a2e8394c05 .hero-arrow-prev { left: 0.75rem; }\n #wsw-snippet-fe01f867-87a4-4603-a558-c1a2e8394c05 .hero-arrow-next { right: 0.75rem; }\n #wsw-snippet-fe01f867-87a4-4603-a558-c1a2e8394c05 .hero-content {\n padding: 1.25rem 1rem;\n }\n #wsw-snippet-fe01f867-87a4-4603-a558-c1a2e8394c05 .hero-dots {\n bottom: 1rem;\n }\n #wsw-snippet-fe01f867-87a4-4603-a558-c1a2e8394c05 .hero-cta-group {\n flex-direction: column;\n gap: 0.75rem;\n }\n }\n\n @media (max-width: 480px) {\n #wsw-snippet-fe01f867-87a4-4603-a558-c1a2e8394c05 .hero-badge {\n font-size: 0.72rem;\n padding: 0.25rem 0.75rem;\n }\n #wsw-snippet-fe01f867-87a4-4603-a558-c1a2e8394c05 .hero-cta,\n #wsw-snippet-fe01f867-87a4-4603-a558-c1a2e8394c05 .hero-cta-secondary {\n padding: 0.625rem 1.5rem;\n font-size: 0.875rem;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-fe01f867-87a4-4603-a558-c1a2e8394c05 *,\n #wsw-snippet-fe01f867-87a4-4603-a558-c1a2e8394c05 *::before,\n #wsw-snippet-fe01f867-87a4-4603-a558-c1a2e8394c05 *::after {\n transition-duration: 0.01ms !important;\n animation-duration: 0.01ms !important;\n }\n }\n</style>\n\n<div id=\"wsw-snippet-fe01f867-87a4-4603-a558-c1a2e8394c05\">\n <div class=\"hero-slider\">\n\n <!-- Slide 1: Webseitenerstellung -->\n <div class=\"hero-slide\" data-slide=\"1\">\n <div class=\"hero-slide-bg\">\n <img src=\"/s3/d/wsw.website.2862/public/images/pages/folder.17/ai-snippet-69d4d018b427f.jpg\" alt=\"Modernes Laptop zeigt sauberen Website-Code und responsives Layout\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;\" draggable=\"false\">\n </div>\n <div class=\"hero-slide-overlay\"></div>\n <div class=\"hero-content\">\n <span class=\"hero-badge\">Webdesign &amp; Entwicklung</span>\n <h1><span class=\"hero-highlight\">Webseitenerstellung</span> die begeistert</h1>\n <span class=\"hero-subtitle\">Moderne, responsive Webseiten — individuell gestaltet<br>und für Suchmaschinen optimiert. Ihr professioneller Auftritt im Internet.</span>\n <div class=\"hero-cta-group\">\n <a href=\"/website\" class=\"hero-cta\" draggable=\"false\">Mehr erfahren</a>\n <a href=\"/kontakt#wsw-07d3c9f7-dbdf-4115-836d-cfa9fcad6c3c\" class=\"hero-cta-secondary\" draggable=\"false\">Termin vereinbaren</a>\n </div>\n </div>\n </div>\n\n <!-- Slide 2: App -->\n <div class=\"hero-slide\" data-slide=\"2\">\n <div class=\"hero-slide-bg\">\n <img src=\"/s3/d/wsw.website.2862/public/images/pages/folder.17/ai-snippet-69d4c457bef3c.jpg\" alt=\"Smartphone mit individueller Business-App auf modernem Schreibtisch\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;\" draggable=\"false\">\n </div>\n <div class=\"hero-slide-overlay\"></div>\n <div class=\"hero-content\">\n <span class=\"hero-badge\">Mobile Lösungen</span>\n <h1>Ihre <span class=\"hero-highlight\">App</span> — massgeschneidert</h1>\n <span class=\"hero-subtitle\">Ihre eigene Firmen-App als progressive Web App (PWA) —<br>perfekt auf Ihr Unternehmen zugeschnitten und bereit für Ihre Kunden.</span>\n <div class=\"hero-cta-group\">\n <a href=\"/app\" class=\"hero-cta\" draggable=\"false\">Mehr erfahren</a>\n <a href=\"/kontakt#wsw-07d3c9f7-dbdf-4115-836d-cfa9fcad6c3c\" class=\"hero-cta-secondary\" draggable=\"false\">Termin vereinbaren</a>\n </div>\n </div>\n </div>\n\n <!-- Slide 3: Onlinemarketing -->\n <div class=\"hero-slide\" data-slide=\"3\">\n <div class=\"hero-slide-bg\">\n <img src=\"/s3/d/wsw.website.2862/public/images/pages/folder.17/ai-snippet-69d4d72ea5df3.jpg\" alt=\"SEO- und Google-Ads-Analytics-Dashboard mit Wachstumskurven und Social-Media-Metriken\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;\" draggable=\"false\">\n </div>\n <div class=\"hero-slide-overlay\"></div>\n <div class=\"hero-content\">\n <span class=\"hero-badge\">Sichtbarkeit &amp; Reichweite</span>\n <h1><span class=\"hero-highlight\">Onlinemarketing</span> mit Wirkung</h1>\n <span class=\"hero-subtitle\">Von SEO über Google Ads bis Social Media — gezielte Strategien,<br>die Ihre Zielgruppe erreichen und Ihr Geschäft wachsen lassen.</span>\n <div class=\"hero-cta-group\">\n <a href=\"/marketing\" class=\"hero-cta\" draggable=\"false\">Mehr erfahren</a>\n <a href=\"/kontakt#wsw-07d3c9f7-dbdf-4115-836d-cfa9fcad6c3c\" class=\"hero-cta-secondary\" draggable=\"false\">Termin vereinbaren</a>\n </div>\n </div>\n </div>\n\n <!-- Slide 4: Verwaltung -->\n <div class=\"hero-slide\" data-slide=\"4\">\n <div class=\"hero-slide-bg\">\n <img src=\"/s3/d/wsw.website.2862/public/images/pages/folder.17/ai-snippet-69d4d5b242119.jpg\" alt=\"CRM-Dashboard mit Kundendaten, Diagrammen und Rechnungsübersicht auf einem modernen Monitor\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;\" draggable=\"false\">\n </div>\n <div class=\"hero-slide-overlay\"></div>\n <div class=\"hero-content\">\n <span class=\"hero-badge\">Pflege &amp; Betreuung</span>\n <h1>Automatisierte <span class=\"hero-highlight\">Online-Verwaltung</span></h1>\n <span class=\"hero-subtitle\">Automatisierte Prozesse, CRM und Fakturierung<br>für mehr Effizienz und Überblick.</span>\n <div class=\"hero-cta-group\">\n <a href=\"/verwaltung\" class=\"hero-cta\" draggable=\"false\">Mehr erfahren</a>\n <a href=\"/kontakt#wsw-07d3c9f7-dbdf-4115-836d-cfa9fcad6c3c\" class=\"hero-cta-secondary\" draggable=\"false\">Termin vereinbaren</a>\n </div>\n </div>\n </div>\n\n <!-- Slide 5: Datenschutz -->\n <div class=\"hero-slide\" data-slide=\"5\">\n <div class=\"hero-slide-bg\">\n <img src=\"/s3/d/wsw.website.2862/public/images/pages/folder.17/ai-snippet-69d4c4580ad4a.jpg\" alt=\"Digitaler Schutzschild symbolisiert Datenschutz und DSGVO-Konformität\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;\" draggable=\"false\">\n </div>\n <div class=\"hero-slide-overlay\"></div>\n <div class=\"hero-content\">\n <span class=\"hero-badge\">DSGVO &amp; Compliance</span>\n <h1><span class=\"hero-highlight\">Datenschutz</span> der schützt</h1>\n <span class=\"hero-subtitle\">DSGVO-konforme Lösungen für Ihre Webseite —<br>rechtssicher, transparent und vertrauensbildend für Ihre Besucher.</span>\n <div class=\"hero-cta-group\">\n <a href=\"/dsgvo\" class=\"hero-cta\" draggable=\"false\">Mehr erfahren</a>\n <a href=\"/kontakt#wsw-07d3c9f7-dbdf-4115-836d-cfa9fcad6c3c\" class=\"hero-cta-secondary\" draggable=\"false\">Termin vereinbaren</a>\n </div>\n </div>\n </div>\n\n <!-- Slide 6: Kontakt -->\n <div class=\"hero-slide is-active\" data-slide=\"6\">\n <div class=\"hero-slide-bg\">\n <img src=\"/s3/d/wsw.website.2862/public/images/pages/folder.17/ai-snippet-69d4fff525627.jpg\" alt=\"Moderner Arbeitsplatz mit Laptop, Kontaktformular und Smartphone bereit für eine Projektbesprechung\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;\" draggable=\"false\">\n </div>\n <div class=\"hero-slide-overlay\"></div>\n <div class=\"hero-content\">\n <span class=\"hero-badge\">Persönliche Beratung</span>\n <h1>Nehmen Sie jetzt <span class=\"hero-highlight\">Kontakt</span> mit uns auf</h1>\n <span class=\"hero-subtitle\">Profitieren Sie von einer persönlichen, kompetenten und unverbindlichen Beratung.<br>Gemeinsam besprechen wir Ihr Projekt und entwickeln die passende Lösung.</span>\n <div class=\"hero-cta-group\">\n <a href=\"/kontakt#wsw-07d3c9f7-dbdf-4115-836d-cfa9fcad6c3c\" class=\"hero-cta\" draggable=\"false\">Termin vereinbaren</a>\n </div>\n </div>\n </div>\n\n <!-- Navigation Arrows -->\n <button class=\"hero-arrow hero-arrow-prev\" aria-label=\"Vorheriger Slide\">❮</button>\n <button class=\"hero-arrow hero-arrow-next\" aria-label=\"Nächster Slide\">❯</button>\n\n <!-- Dots -->\n <div class=\"hero-dots\" role=\"tablist\" aria-label=\"Slide Navigation\">\n <button class=\"hero-dot\" role=\"tab\" aria-selected=\"false\" aria-label=\"Slide 1: Website\" data-dot=\"1\"></button>\n <button class=\"hero-dot\" role=\"tab\" aria-selected=\"false\" aria-label=\"Slide 2: App\" data-dot=\"2\"></button>\n <button class=\"hero-dot\" role=\"tab\" aria-selected=\"false\" aria-label=\"Slide 3: Marketing\" data-dot=\"3\"></button>\n <button class=\"hero-dot\" role=\"tab\" aria-selected=\"false\" aria-label=\"Slide 4: Verwaltung\" data-dot=\"4\"></button>\n <button class=\"hero-dot\" role=\"tab\" aria-selected=\"false\" aria-label=\"Slide 5: Datenschutz\" data-dot=\"5\"></button>\n <button class=\"hero-dot is-active\" role=\"tab\" aria-selected=\"true\" aria-label=\"Slide 6: Kontakt\" data-dot=\"6\"></button>\n </div>\n\n <!-- Progress bar -->\n <div class=\"hero-progress\">\n <div class=\"hero-progress-bar\" style=\"width: 72.5%;\"></div>\n </div>\n\n </div>\n</div>\n\n<script>\n(function() {\n 'use strict';\n\n var el = document.getElementById('wsw-snippet-fe01f867-87a4-4603-a558-c1a2e8394c05');\n if (!el) return;\n\n var slides = el.querySelectorAll('.hero-slide');\n var dots = el.querySelectorAll('.hero-dot');\n var prevBtn = el.querySelector('.hero-arrow-prev');\n var nextBtn = el.querySelector('.hero-arrow-next');\n var progressBar = el.querySelector('.hero-progress-bar');\n var totalSlides = slides.length;\n var INTERVAL = 6000;\n var TICK = 50;\n\n var currentIndex = 0;\n\n slides.forEach(function(slide, idx) {\n if (idx === 0) {\n slide.classList.add('is-active');\n } else {\n slide.classList.remove('is-active');\n }\n });\n\n dots.forEach(function(dot, idx) {\n if (idx === 0) {\n dot.classList.add('is-active');\n dot.setAttribute('aria-selected', 'true');\n } else {\n dot.classList.remove('is-active');\n dot.setAttribute('aria-selected', 'false');\n }\n });\n\n var progressTimer = null;\n var progress = 0;\n\n function goToSlide(index) {\n slides[currentIndex].classList.remove('is-active');\n dots[currentIndex].classList.remove('is-active');\n dots[currentIndex].setAttribute('aria-selected', 'false');\n\n currentIndex = (index + totalSlides) % totalSlides;\n\n slides[currentIndex].classList.add('is-active');\n dots[currentIndex].classList.add('is-active');\n dots[currentIndex].setAttribute('aria-selected', 'true');\n\n resetProgress();\n }\n\n function nextSlide() { goToSlide(currentIndex + 1); }\n function prevSlide() { goToSlide(currentIndex - 1); }\n\n function resetProgress() {\n progress = 0;\n if (progressBar) progressBar.style.width = '0%';\n }\n\n function startAutoplay() {\n stopAutoplay();\n progressTimer = setInterval(function() {\n progress += TICK;\n var pct = Math.min((progress / INTERVAL) * 100, 100);\n if (progressBar) progressBar.style.width = pct + '%';\n if (progress >= INTERVAL) { nextSlide(); }\n }, TICK);\n }\n\n function stopAutoplay() {\n if (progressTimer) {\n clearInterval(progressTimer);\n progressTimer = null;\n }\n }\n\n nextBtn.addEventListener('click', function() { nextSlide(); stopAutoplay(); startAutoplay(); });\n prevBtn.addEventListener('click', function() { prevSlide(); stopAutoplay(); startAutoplay(); });\n\n dots.forEach(function(dot) {\n dot.addEventListener('click', function() {\n var target = parseInt(dot.getAttribute('data-dot'), 10) - 1;\n if (target !== currentIndex) { goToSlide(target); stopAutoplay(); startAutoplay(); }\n });\n });\n\n el.addEventListener('mouseenter', function() { stopAutoplay(); });\n el.addEventListener('mouseleave', function() { startAutoplay(); });\n\n el.addEventListener('keydown', function(e) {\n if (e.key === 'ArrowLeft') { prevSlide(); stopAutoplay(); startAutoplay(); }\n else if (e.key === 'ArrowRight') { nextSlide(); stopAutoplay(); startAutoplay(); }\n });\n\n startAutoplay();\n\n})();\n</script>","summary":"The user built a 6-slide hero slider on a dark (#212529) background with blue accent (#1558a5), featuring fullscreen background images, gradient overlays (145deg, varying blue/dark combos per slide), centered white text content with badge, h1 (with gradient highlight keyword), subtitle, and CTA buttons, plus prev/next arrows, dot navigation, and an animated progress bar. The six slides cover Webseitenerstellung, App, Onlinemarketing, Verwaltung, Datenschutz, and Kontakt — each with unique background images that were iteratively replaced to match their subtitle themes (no people for several slides), and titles were changed multiple times (Verwaltung slide now reads \"Automatisierte Online-Verwaltung\", Kontakt slide reads \"Nehmen Sie jetzt Kontakt mit uns auf\" with updated two-line subtitle about persönliche Beratung). The autoplay interval was changed from 8s to 6s, the slider always starts at slide 1 (Webseitenerstellung), and the user's latest request is to ensure the Kontakt slide subtitle displays on only two lines — which it currently already does via a single `<br>` tag between the two sentences.","version":29,"inserted_version":29,"total_cost":27.8393066,"total_messages_sent":40,"summarized_at_total":36}