{"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(420px, 56vw, 720px);\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(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=\"3\"] .hero-slide-overlay {\n background: linear-gradient(145deg, rgba(21, 88, 165, 0.72) 0%, rgba(45, 45, 45, 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: 2rem 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.5rem;\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 1.25rem 0;\n font-size: clamp(1.75rem, 4.5vw, 3rem);\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(1rem, 2vw, 1.2rem);\n line-height: 1.65;\n margin: 0 0 2rem 0;\n max-width: 60ch;\n display: inline-block;\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.875rem 2.25rem;\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: 1rem;\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.875rem 2.25rem;\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: 1rem;\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: 48px;\n height: 48px;\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.25rem;\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: 2rem;\n left: 50%;\n transform: translateX(-50%);\n z-index: 5;\n display: flex;\n gap: 0.75rem;\n align-items: center;\n }\n\n #wsw-snippet-fe01f867-87a4-4603-a558-c1a2e8394c05 .hero-dot {\n width: 12px;\n height: 12px;\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(360px, 80vw, 520px);\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: 40px;\n height: 40px;\n font-size: 1rem;\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.5rem 1rem;\n }\n #wsw-snippet-fe01f867-87a4-4603-a558-c1a2e8394c05 .hero-dots {\n bottom: 1.25rem;\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.75rem 1.75rem;\n font-size: 0.9rem;\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: Website -->\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-69ceb8a4cce32.jpg\" alt=\"Moderner Arbeitsplatz mit professionellem Webdesign auf dem Bildschirm\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;\">\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 und für Suchmaschinen optimiert. Ihr professioneller Auftritt im Internet.</span>\n <div class=\"hero-cta-group\">\n <a href=\"/website\" class=\"hero-cta\">Mehr erfahren</a>\n <a href=\"/kontakt#wsw-992a91eb-f67f-4377-a7e8-3d0505df14b8\" class=\"hero-cta-secondary\">Termin vereinbaren</a>\n </div>\n </div>\n </div>\n\n <!-- Slide 2: Marketing -->\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-69ceb8a4e7b07.jpg\" alt=\"Marketing-Team arbeitet an digitalen Kampagnen und Analysen\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;\">\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, die Ihre Zielgruppe erreichen und Ihr Geschäft wachsen lassen.</span>\n <div class=\"hero-cta-group\">\n <a href=\"/marketing\" class=\"hero-cta\">Mehr erfahren</a>\n <a href=\"/kontakt#wsw-992a91eb-f67f-4377-a7e8-3d0505df14b8\" class=\"hero-cta-secondary\">Termin vereinbaren</a>\n </div>\n </div>\n </div>\n\n <!-- Slide 3: Verwaltung -->\n <div class=\"hero-slide is-active\" data-slide=\"3\">\n <div class=\"hero-slide-bg\">\n <img src=\"/s3/d/wsw.website.2862/public/images/pages/folder.17/ai-snippet-69ceb8a5157fb.jpg\" alt=\"Professionelle IT-Verwaltung und Server-Infrastruktur\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;\">\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>Professionelle <span class=\"hero-highlight\">Verwaltung</span></h1>\n <span class=\"hero-subtitle\">Updates, Sicherheit und Content-Pflege — damit Ihre Webseite stets aktuell, sicher und leistungsfähig bleibt. Alles aus einer Hand.</span>\n <div class=\"hero-cta-group\">\n <a href=\"/verwaltung\" class=\"hero-cta\">Mehr erfahren</a>\n <a href=\"/kontakt#wsw-992a91eb-f67f-4377-a7e8-3d0505df14b8\" class=\"hero-cta-secondary\">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: Marketing\" data-dot=\"2\"></button>\n <button class=\"hero-dot is-active\" role=\"tab\" aria-selected=\"true\" aria-label=\"Slide 3: Verwaltung\" data-dot=\"3\"></button>\n </div>\n\n <!-- Progress bar -->\n <div class=\"hero-progress\">\n <div class=\"hero-progress-bar\" style=\"width: 86.25%;\"></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 = 8000;\n var TICK = 50;\n\n var currentIndex = 0;\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":null,"version":6,"inserted_version":6,"total_cost":3.81932355,"total_messages_sent":8,"summarized_at_total":0}