{"uuid":"d766edf5-b56a-40dd-ab98-d8732d2019fb","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-d766edf5-b56a-40dd-ab98-d8732d2019fb {\n font-family: inherit;\n box-sizing: border-box;\n background-color: #112119;\n padding: clamp(2rem, 6vw, 5rem) clamp(1rem, 4vw, 2rem);\n overflow: hidden;\n }\n #wsw-snippet-d766edf5-b56a-40dd-ab98-d8732d2019fb *,\n #wsw-snippet-d766edf5-b56a-40dd-ab98-d8732d2019fb *::before,\n #wsw-snippet-d766edf5-b56a-40dd-ab98-d8732d2019fb *::after {\n box-sizing: inherit;\n }\n\n /* --- Layout Container --- */\n #wsw-snippet-d766edf5-b56a-40dd-ab98-d8732d2019fb .so-container {\n max-width: 960px;\n margin: 0 auto;\n display: flex;\n flex-direction: column;\n align-items: center;\n }\n\n /* --- Hero / Top Section --- */\n #wsw-snippet-d766edf5-b56a-40dd-ab98-d8732d2019fb .so-hero {\n text-align: center;\n margin-bottom: 3.5rem;\n opacity: 0;\n transform: translateY(28px);\n }\n #wsw-snippet-d766edf5-b56a-40dd-ab98-d8732d2019fb .so-hero.so-visible {\n opacity: 1;\n transform: translateY(0);\n transition: opacity 0.7s ease-out, transform 0.7s ease-out;\n }\n #wsw-snippet-d766edf5-b56a-40dd-ab98-d8732d2019fb .so-eyebrow {\n display: inline-block;\n font-size: 0.75rem;\n font-weight: 700;\n letter-spacing: 0.18em;\n text-transform: uppercase;\n color: #89C964;\n margin-bottom: 1rem;\n background: rgba(137, 201, 100, 0.12);\n padding: 0.35rem 1rem;\n border-radius: 999px;\n }\n #wsw-snippet-d766edf5-b56a-40dd-ab98-d8732d2019fb .so-hero h1 {\n color: #ffffff;\n margin: 0 0 1.25rem 0;\n font-size: clamp(1.6rem, 4vw, 2.5rem);\n line-height: 1.3;\n }\n #wsw-snippet-d766edf5-b56a-40dd-ab98-d8732d2019fb .so-hero h1 .so-highlight {\n color: #89C964;\n }\n #wsw-snippet-d766edf5-b56a-40dd-ab98-d8732d2019fb .so-hero-desc {\n color: rgba(255, 255, 255, 0.65);\n max-width: 580px;\n margin: 0 auto;\n line-height: 1.6;\n font-size: 1rem;\n }\n\n /* --- Cards Grid --- */\n #wsw-snippet-d766edf5-b56a-40dd-ab98-d8732d2019fb .so-cards {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 1.75rem;\n width: 100%;\n margin-bottom: 4rem;\n }\n #wsw-snippet-d766edf5-b56a-40dd-ab98-d8732d2019fb .so-card {\n --card-glow: rgba(2, 91, 19, 0);\n background: #163328;\n border: 1px solid rgba(255, 255, 255, 0.06);\n border-radius: 16px;\n padding: 2.5rem 2rem 2rem;\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n position: relative;\n transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;\n box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25), 0 0 0 0 var(--card-glow);\n opacity: 0;\n transform: translateY(28px);\n }\n #wsw-snippet-d766edf5-b56a-40dd-ab98-d8732d2019fb .so-card.so-visible {\n opacity: 1;\n transform: translateY(0);\n transition: opacity 0.7s ease-out, transform 0.7s ease-out;\n }\n #wsw-snippet-d766edf5-b56a-40dd-ab98-d8732d2019fb .so-card.so-visible:hover {\n transform: translateY(-6px);\n box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), 0 0 30px rgba(2, 91, 19, 0.2);\n }\n #wsw-snippet-d766edf5-b56a-40dd-ab98-d8732d2019fb .so-card-delay {\n transition-delay: 0.15s;\n }\n #wsw-snippet-d766edf5-b56a-40dd-ab98-d8732d2019fb .so-card-icon {\n width: 56px;\n height: 56px;\n border-radius: 14px;\n background: rgba(2, 91, 19, 0.15);\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 1.5rem;\n flex-shrink: 0;\n }\n #wsw-snippet-d766edf5-b56a-40dd-ab98-d8732d2019fb .so-card-icon svg {\n width: 26px;\n height: 26px;\n stroke: #3ddc6e;\n fill: none;\n stroke-width: 1.8;\n stroke-linecap: round;\n stroke-linejoin: round;\n }\n #wsw-snippet-d766edf5-b56a-40dd-ab98-d8732d2019fb .so-card h3 {\n color: #ffffff;\n margin: 0 0 0.75rem 0;\n font-size: 1.2rem;\n line-height: 1.35;\n }\n #wsw-snippet-d766edf5-b56a-40dd-ab98-d8732d2019fb .so-card-text {\n color: rgba(255, 255, 255, 0.55);\n font-size: 0.9rem;\n line-height: 1.6;\n margin-bottom: 1.75rem;\n flex-grow: 1;\n }\n #wsw-snippet-d766edf5-b56a-40dd-ab98-d8732d2019fb .so-btn {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n background: #025B13;\n color: #ffffff;\n font-size: 0.875rem;\n font-weight: 600;\n padding: 0.75rem 1.5rem;\n border: none;\n border-radius: 10px;\n cursor: pointer;\n text-decoration: none;\n transition: background 0.25s ease-out, transform 0.2s ease-out, box-shadow 0.25s ease-out;\n white-space: nowrap;\n }\n #wsw-snippet-d766edf5-b56a-40dd-ab98-d8732d2019fb .so-btn:hover {\n background: #037a1a;\n transform: scale(1.03);\n box-shadow: 0 0 18px rgba(2, 91, 19, 0.35);\n }\n #wsw-snippet-d766edf5-b56a-40dd-ab98-d8732d2019fb .so-btn:focus-visible {\n outline: 2px solid #3ddc6e;\n outline-offset: 3px;\n }\n #wsw-snippet-d766edf5-b56a-40dd-ab98-d8732d2019fb .so-btn svg {\n width: 16px;\n height: 16px;\n stroke: currentColor;\n fill: none;\n stroke-width: 2;\n stroke-linecap: round;\n stroke-linejoin: round;\n flex-shrink: 0;\n }\n\n /* --- FAQ Section --- */\n #wsw-snippet-d766edf5-b56a-40dd-ab98-d8732d2019fb .so-faq {\n width: 100%;\n margin-bottom: 4rem;\n opacity: 0;\n transform: translateY(28px);\n }\n #wsw-snippet-d766edf5-b56a-40dd-ab98-d8732d2019fb .so-faq.so-visible {\n opacity: 1;\n transform: translateY(0);\n transition: opacity 0.7s ease-out, transform 0.7s ease-out;\n }\n #wsw-snippet-d766edf5-b56a-40dd-ab98-d8732d2019fb .so-faq h2 {\n color: #ffffff;\n text-align: center;\n margin: 0 0 2rem 0;\n font-size: clamp(1.3rem, 3vw, 2rem);\n }\n #wsw-snippet-d766edf5-b56a-40dd-ab98-d8732d2019fb .so-faq h2 .so-highlight {\n color: #89C964;\n }\n #wsw-snippet-d766edf5-b56a-40dd-ab98-d8732d2019fb .so-accordion {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n }\n #wsw-snippet-d766edf5-b56a-40dd-ab98-d8732d2019fb .so-accordion-item {\n background: #163328;\n border: 1px solid rgba(255, 255, 255, 0.06);\n border-radius: 12px;\n overflow: hidden;\n transition: box-shadow 0.3s ease-out;\n }\n #wsw-snippet-d766edf5-b56a-40dd-ab98-d8732d2019fb .so-accordion-item:hover {\n box-shadow: 0 0 16px rgba(2, 91, 19, 0.12);\n }\n #wsw-snippet-d766edf5-b56a-40dd-ab98-d8732d2019fb .so-accordion-trigger {\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 1rem;\n padding: 1.15rem 1.5rem;\n background: none;\n border: none;\n color: #ffffff;\n font-size: 0.95rem;\n font-weight: 600;\n font-family: inherit;\n text-align: left;\n cursor: pointer;\n transition: color 0.2s ease-out;\n }\n #wsw-snippet-d766edf5-b56a-40dd-ab98-d8732d2019fb .so-accordion-trigger:hover {\n color: #3ddc6e;\n }\n #wsw-snippet-d766edf5-b56a-40dd-ab98-d8732d2019fb .so-accordion-trigger:focus-visible {\n outline: 2px solid #3ddc6e;\n outline-offset: -2px;\n border-radius: 12px;\n }\n #wsw-snippet-d766edf5-b56a-40dd-ab98-d8732d2019fb .so-accordion-icon {\n width: 22px;\n height: 22px;\n flex-shrink: 0;\n position: relative;\n }\n #wsw-snippet-d766edf5-b56a-40dd-ab98-d8732d2019fb .so-accordion-icon::before,\n #wsw-snippet-d766edf5-b56a-40dd-ab98-d8732d2019fb .so-accordion-icon::after {\n content: '';\n position: absolute;\n background: #3ddc6e;\n border-radius: 2px;\n transition: transform 0.3s ease-out, opacity 0.3s ease-out;\n }\n #wsw-snippet-d766edf5-b56a-40dd-ab98-d8732d2019fb .so-accordion-icon::before {\n width: 14px;\n height: 2px;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n #wsw-snippet-d766edf5-b56a-40dd-ab98-d8732d2019fb .so-accordion-icon::after {\n width: 2px;\n height: 14px;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n #wsw-snippet-d766edf5-b56a-40dd-ab98-d8732d2019fb .so-accordion-item.so-open .so-accordion-icon::after {\n transform: translate(-50%, -50%) rotate(90deg);\n opacity: 0;\n }\n #wsw-snippet-d766edf5-b56a-40dd-ab98-d8732d2019fb .so-accordion-body {\n max-height: 0;\n overflow: hidden;\n transition: max-height 0.4s ease-out, padding 0.4s ease-out;\n padding: 0 1.5rem;\n }\n #wsw-snippet-d766edf5-b56a-40dd-ab98-d8732d2019fb .so-accordion-item.so-open .so-accordion-body {\n padding: 0 1.5rem 1.25rem;\n }\n #wsw-snippet-d766edf5-b56a-40dd-ab98-d8732d2019fb .so-accordion-answer {\n color: rgba(255, 255, 255, 0.55);\n font-size: 0.9rem;\n line-height: 1.65;\n }\n\n /* --- Contact Card --- */\n #wsw-snippet-d766edf5-b56a-40dd-ab98-d8732d2019fb .so-contact {\n background: #163328;\n border: 1px solid rgba(255, 255, 255, 0.06);\n border-radius: 16px;\n padding: 2.5rem 2rem;\n text-align: center;\n width: 100%;\n max-width: 520px;\n box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);\n opacity: 0;\n transform: translateY(28px);\n }\n #wsw-snippet-d766edf5-b56a-40dd-ab98-d8732d2019fb .so-contact.so-visible {\n opacity: 1;\n transform: translateY(0);\n transition: opacity 0.7s ease-out, transform 0.7s ease-out;\n }\n #wsw-snippet-d766edf5-b56a-40dd-ab98-d8732d2019fb .so-contact h3 {\n color: #ffffff;\n margin: 0 0 0.5rem 0;\n font-size: 1.25rem;\n }\n #wsw-snippet-d766edf5-b56a-40dd-ab98-d8732d2019fb .so-contact-text {\n color: rgba(255, 255, 255, 0.55);\n font-size: 0.9rem;\n line-height: 1.6;\n margin-bottom: 1.5rem;\n }\n\n /* --- Reduced Motion --- */\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-d766edf5-b56a-40dd-ab98-d8732d2019fb *,\n #wsw-snippet-d766edf5-b56a-40dd-ab98-d8732d2019fb *::before,\n #wsw-snippet-d766edf5-b56a-40dd-ab98-d8732d2019fb *::after {\n transition-duration: 0.01ms !important;\n animation-duration: 0.01ms !important;\n }\n }\n\n /* --- Mobile --- */\n @media (max-width: 768px) {\n #wsw-snippet-d766edf5-b56a-40dd-ab98-d8732d2019fb .so-cards {\n grid-template-columns: 1fr;\n }\n #wsw-snippet-d766edf5-b56a-40dd-ab98-d8732d2019fb .so-card {\n padding: 2rem 1.5rem 1.75rem;\n }\n #wsw-snippet-d766edf5-b56a-40dd-ab98-d8732d2019fb .so-contact {\n padding: 2rem 1.5rem;\n }\n #wsw-snippet-d766edf5-b56a-40dd-ab98-d8732d2019fb .so-accordion-trigger {\n font-size: 0.875rem;\n padding: 1rem 1.25rem;\n }\n #wsw-snippet-d766edf5-b56a-40dd-ab98-d8732d2019fb .so-accordion-body {\n padding: 0 1.25rem;\n }\n #wsw-snippet-d766edf5-b56a-40dd-ab98-d8732d2019fb .so-accordion-item.so-open .so-accordion-body {\n padding: 0 1.25rem 1rem;\n }\n }\n</style>\n\n<div id=\"wsw-snippet-d766edf5-b56a-40dd-ab98-d8732d2019fb\">\n <div class=\"so-container\">\n\n <!-- Hero -->\n <div class=\"so-hero so-visible\" data-so-animate=\"\">\n <span class=\"so-eyebrow\">Onboarding Formulare</span>\n <h1>Wähle das passende <span class=\"so-highlight\">Onboarding Formular</span>.</h1>\n <span class=\"so-hero-desc\">Starte hier dein Projekt, indem du das passende Formular auswählst. So können wir deine Anfrage schnell und effizient bearbeiten.</span>\n </div>\n\n <!-- Cards -->\n <div class=\"so-cards\">\n <!-- Card 1 -->\n <div class=\"so-card so-visible\" data-so-animate=\"\">\n <div class=\"so-card-icon\">\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <circle cx=\"9\" cy=\"21\" r=\"1\"></circle>\n <circle cx=\"20\" cy=\"21\" r=\"1\"></circle>\n <path d=\"M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6\"></path>\n </svg>\n </div>\n <h3>Shop Onboarding Formular</h3>\n <span class=\"so-card-text\">Für alle, die einen Online Shop aufbauen oder optimieren möchten. Erzähle uns mehr über dein Projekt.</span>\n <a href=\"https://tally.so/r/1A2AVb\" class=\"so-btn\" aria-label=\"Zum Shop Onboarding Formular\" target=\"_blank\" rel=\"noopener noreferrer\" draggable=\"false\">\n <span>Zum Shop Onboarding</span>\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M5 12h14\"></path><path d=\"M12 5l7 7-7 7\"></path></svg>\n </a>\n </div>\n\n <!-- Card 2 -->\n <div class=\"so-card so-card-delay so-visible\" data-so-animate=\"\">\n <div class=\"so-card-icon\">\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\" ry=\"2\"></rect>\n <line x1=\"8\" y1=\"21\" x2=\"16\" y2=\"21\"></line>\n <line x1=\"12\" y1=\"17\" x2=\"12\" y2=\"21\"></line>\n </svg>\n </div>\n <h3>Website Onboarding Formular</h3>\n <span class=\"so-card-text\">Für alle, die eine professionelle Website erstellen oder überarbeiten lassen möchten.</span>\n <a href=\"https://tally.so/r/vGxGY4\" class=\"so-btn\" aria-label=\"Zum Website Onboarding Formular\" target=\"_blank\" rel=\"noopener noreferrer\" draggable=\"false\">\n <span>Zum Website Onboarding</span>\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M5 12h14\"></path><path d=\"M12 5l7 7-7 7\"></path></svg>\n </a>\n </div>\n </div>\n\n <!-- FAQ -->\n <div class=\"so-faq so-visible\" data-so-animate=\"\">\n <h2>Häufig gestellte <span class=\"so-highlight\">Fragen</span></h2>\n <div class=\"so-accordion\">\n\n <div class=\"so-accordion-item\">\n <button class=\"so-accordion-trigger\" aria-expanded=\"false\">\n <span>Was ist der Unterschied zwischen den Formularen?</span>\n <span class=\"so-accordion-icon\" aria-hidden=\"true\"></span>\n </button>\n <div class=\"so-accordion-body\" role=\"region\" style=\"\">\n <span class=\"so-accordion-answer\">Das Shop Formular ist für E-Commerce Projekte gedacht. Das Website Formular für klassische Websites und Unternehmensseiten.</span>\n </div>\n </div>\n\n <div class=\"so-accordion-item\">\n <button class=\"so-accordion-trigger\" aria-expanded=\"false\">\n <span>Wie lange dauert die Bearbeitung meiner Anfrage?</span>\n <span class=\"so-accordion-icon\" aria-hidden=\"true\"></span>\n </button>\n <div class=\"so-accordion-body\" role=\"region\" style=\"\">\n <span class=\"so-accordion-answer\">In der Regel melden wir uns innerhalb von 24 Stunden bei dir zurück.</span>\n </div>\n </div>\n\n <div class=\"so-accordion-item\">\n <button class=\"so-accordion-trigger\" aria-expanded=\"false\">\n <span>Was passiert nach dem Absenden des Formulars?</span>\n <span class=\"so-accordion-icon\" aria-hidden=\"true\"></span>\n </button>\n <div class=\"so-accordion-body\" role=\"region\" style=\"\">\n <span class=\"so-accordion-answer\">Wir prüfen deine Angaben und melden uns mit den nächsten Schritten bei dir.</span>\n </div>\n </div>\n\n <div class=\"so-accordion-item\">\n <button class=\"so-accordion-trigger\" aria-expanded=\"false\">\n <span>Kann ich nach dem Absenden noch etwas ändern?</span>\n <span class=\"so-accordion-icon\" aria-hidden=\"true\"></span>\n </button>\n <div class=\"so-accordion-body\" role=\"region\" style=\"\">\n <span class=\"so-accordion-answer\">Ja, du kannst uns jederzeit zusätzliche Infos nachreichen.</span>\n </div>\n </div>\n\n <div class=\"so-accordion-item so-open\">\n <button class=\"so-accordion-trigger\" aria-expanded=\"true\">\n <span>Welche Informationen sollte ich bereithalten?</span>\n <span class=\"so-accordion-icon\" aria-hidden=\"true\"></span>\n </button>\n <div class=\"so-accordion-body\" role=\"region\" style=\"max-height: 51px;\">\n <span class=\"so-accordion-answer\">Projektziel, Inhalte, Wünsche und ggf. vorhandene Materialien.</span>\n </div>\n </div>\n\n </div>\n </div>\n\n <!-- Contact Card -->\n <div class=\"so-contact so-visible\" data-so-animate=\"\">\n <h3>Noch Fragen?</h3>\n <span class=\"so-contact-text\">Unser Team steht dir gerne zur Verfügung.</span>\n <a href=\"mailto:info@somdia.de\" class=\"so-btn\" draggable=\"false\">\n <span>Kontakt aufnehmen</span>\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M5 12h14\"></path><path d=\"M12 5l7 7-7 7\"></path></svg>\n </a>\n </div>\n\n </div>\n</div>\n\n<script>\n(function() {\n 'use strict';\n\n var el = document.getElementById('wsw-snippet-d766edf5-b56a-40dd-ab98-d8732d2019fb');\n if (!el) return;\n\n /* --- Scroll Animations --- */\n var animTargets = el.querySelectorAll('[data-so-animate]');\n if ('IntersectionObserver' in window) {\n var observer = new IntersectionObserver(function(entries) {\n entries.forEach(function(entry) {\n if (entry.isIntersecting) {\n entry.target.classList.add('so-visible');\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.15 });\n animTargets.forEach(function(t) { observer.observe(t); });\n } else {\n animTargets.forEach(function(t) { t.classList.add('so-visible'); });\n }\n\n /* --- Accordion --- */\n var triggers = el.querySelectorAll('.so-accordion-trigger');\n triggers.forEach(function(btn) {\n btn.addEventListener('click', function() {\n var item = btn.closest('.so-accordion-item');\n var body = item.querySelector('.so-accordion-body');\n var isOpen = item.classList.contains('so-open');\n\n /* close all */\n el.querySelectorAll('.so-accordion-item.so-open').forEach(function(openItem) {\n openItem.classList.remove('so-open');\n var openBody = openItem.querySelector('.so-accordion-body');\n openBody.style.maxHeight = null;\n openItem.querySelector('.so-accordion-trigger').setAttribute('aria-expanded', 'false');\n });\n\n /* toggle current */\n if (!isOpen) {\n item.classList.add('so-open');\n body.style.maxHeight = body.scrollHeight + 20 + 'px';\n btn.setAttribute('aria-expanded', 'true');\n }\n });\n\n btn.addEventListener('keydown', function(e) {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n btn.click();\n }\n });\n });\n\n})();\n</script>","summary":null,"version":5,"inserted_version":5,"total_cost":2.9008895299999997,"total_messages_sent":5,"summarized_at_total":0}