Fast geschafft!

{"uuid":"5236571c-0505-4711-8cc4-945aabd6d2a4","provider":"wsw-nova","model":"sirius","image_strategy":"ai_self_select","image_quality":null,"image_size":null,"image_aspect_ratio":null,"use_website_data":false,"html":"<style>\n #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 {\n font-family: inherit;\n box-sizing: border-box;\n background: transparent;\n padding: clamp(2rem, 6vw, 5rem) clamp(1rem, 4vw, 2rem);\n }\n #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 *,\n #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 *::before,\n #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 *::after {\n box-sizing: inherit;\n }\n\n #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .thankyou-wrapper {\n max-width: 720px;\n margin: 0 auto;\n text-align: center;\n }\n\n /* Checkmark circle */\n #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .check-circle {\n width: 96px;\n height: 96px;\n border-radius: 50%;\n background-color: var(--wsw-color-accent, #66002b);\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 auto 2rem;\n opacity: 0;\n transform: scale(0.5);\n animation: wsw-popIn 0.6s ease-out 0.2s forwards;\n }\n #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .check-circle svg {\n width: 48px;\n height: 48px;\n stroke: var(--wsw-color-white, #fff);\n stroke-width: 3;\n fill: none;\n stroke-linecap: round;\n stroke-linejoin: round;\n stroke-dasharray: 60;\n stroke-dashoffset: 60;\n animation: wsw-drawCheck 0.5s ease-out 0.7s forwards;\n }\n\n @keyframes wsw-popIn {\n to { opacity: 1; transform: scale(1); }\n }\n @keyframes wsw-drawCheck {\n to { stroke-dashoffset: 0; }\n }\n\n #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .thankyou-heading {\n color: var(--wsw-color-black, #383838);\n margin: 0 0 1rem;\n }\n #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .thankyou-sub {\n color: var(--wsw-color-dark, #949494);\n margin: 0 0 3rem;\n max-width: 560px;\n margin-left: auto;\n margin-right: auto;\n line-height: 1.6;\n }\n\n /* Steps */\n #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .steps {\n display: flex;\n align-items: flex-start;\n justify-content: center;\n gap: 0;\n margin: 0 auto 3rem;\n max-width: 640px;\n }\n\n #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .step {\n display: flex;\n flex-direction: column;\n align-items: center;\n flex: 1;\n position: relative;\n padding: 0 0.5rem;\n }\n\n #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .step-icon {\n width: 72px;\n height: 72px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 1rem;\n position: relative;\n z-index: 1;\n transition: transform 0.2s ease-out;\n }\n #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .step-icon svg {\n width: 32px;\n height: 32px;\n fill: none;\n stroke-width: 2;\n stroke-linecap: round;\n stroke-linejoin: round;\n }\n\n #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .step--done .step-icon {\n background-color: var(--wsw-color-accent, #66002b);\n }\n #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .step--done .step-icon svg {\n stroke: var(--wsw-color-white, #fff);\n }\n\n #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .step--active .step-icon {\n background-color: var(--wsw-color-white, #fff);\n border: 3px solid var(--wsw-color-accent, #66002b);\n animation: wsw-pulse 2s ease-in-out infinite;\n }\n #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .step--active .step-icon svg {\n stroke: var(--wsw-color-accent, #66002b);\n }\n\n #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .step--pending .step-icon {\n background-color: var(--wsw-color-light, #eeedeb);\n border: 2px dashed var(--wsw-color-dark, #949494);\n }\n #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .step--pending .step-icon svg {\n stroke: var(--wsw-color-dark, #949494);\n }\n\n @keyframes wsw-pulse {\n 0%, 100% { box-shadow: 0 0 0 0 rgba(102, 0, 43, 0.3); }\n 50% { box-shadow: 0 0 0 12px rgba(102, 0, 43, 0); }\n }\n\n #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .step-label {\n font-weight: 500;\n color: var(--wsw-color-black, #383838);\n margin-bottom: 0.25rem;\n }\n #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .step--pending .step-label {\n color: var(--wsw-color-dark, #949494);\n }\n #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .step-desc {\n color: var(--wsw-color-dark, #949494);\n font-size: 0.9rem;\n line-height: 1.4;\n }\n\n /* Connector lines */\n #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .connector {\n flex: 0 0 auto;\n width: 60px;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-top: 34px;\n }\n #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .connector-line {\n width: 100%;\n height: 3px;\n border-radius: 2px;\n }\n #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .connector--done .connector-line {\n background-color: var(--wsw-color-accent, #66002b);\n }\n #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .connector--pending .connector-line {\n background: repeating-linear-gradient(\n 90deg,\n var(--wsw-color-dark, #949494) 0,\n var(--wsw-color-dark, #949494) 6px,\n transparent 6px,\n transparent 12px\n );\n height: 2px;\n }\n\n /* Alert box */\n #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .alert-box {\n background-color: var(--wsw-color-light, #eeedeb);\n border-left: 4px solid var(--wsw-color-accent, #66002b);\n border-radius: 8px;\n padding: 1.5rem 2rem;\n text-align: left;\n max-width: 560px;\n margin: 0 auto 2.5rem;\n display: flex;\n align-items: flex-start;\n gap: 1rem;\n }\n #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .alert-box-icon {\n flex-shrink: 0;\n width: 28px;\n height: 28px;\n margin-top: 2px;\n }\n #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .alert-box-icon svg {\n width: 28px;\n height: 28px;\n fill: none;\n stroke: var(--wsw-color-accent, #66002b);\n stroke-width: 2;\n stroke-linecap: round;\n stroke-linejoin: round;\n }\n #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .alert-box-text {\n color: var(--wsw-color-black, #383838);\n line-height: 1.6;\n }\n #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .alert-box-text strong {\n color: var(--wsw-color-accent, #66002b);\n }\n\n /* Hint text */\n #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .hint-text {\n color: var(--wsw-color-dark, #949494);\n font-size: 0.9rem;\n line-height: 1.5;\n max-width: 480px;\n margin: 0 auto;\n }\n\n /* Dark theme overrides */\n section.wsw-theme-d #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .thankyou-heading,\n section.wsw-theme-db #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .thankyou-heading,\n section.wsw-theme-b #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .thankyou-heading,\n section.wsw-theme-bb #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .thankyou-heading {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-d #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .thankyou-sub,\n section.wsw-theme-db #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .thankyou-sub,\n section.wsw-theme-b #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .thankyou-sub,\n section.wsw-theme-bb #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .thankyou-sub {\n color: var(--wsw-color-light, #eeedeb);\n }\n section.wsw-theme-d #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .step-label,\n section.wsw-theme-db #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .step-label,\n section.wsw-theme-b #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .step-label,\n section.wsw-theme-bb #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .step-label {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-d #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .step--pending .step-label,\n section.wsw-theme-db #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .step--pending .step-label,\n section.wsw-theme-b #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .step--pending .step-label,\n section.wsw-theme-bb #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .step--pending .step-label {\n color: var(--wsw-color-dark, #949494);\n }\n section.wsw-theme-d #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .step-desc,\n section.wsw-theme-db #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .step-desc,\n section.wsw-theme-b #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .step-desc,\n section.wsw-theme-bb #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .step-desc {\n color: var(--wsw-color-light, #eeedeb);\n }\n section.wsw-theme-d #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .alert-box,\n section.wsw-theme-db #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .alert-box,\n section.wsw-theme-b #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .alert-box,\n section.wsw-theme-bb #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .alert-box {\n background-color: rgba(255, 255, 255, 0.08);\n }\n section.wsw-theme-d #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .alert-box-text,\n section.wsw-theme-db #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .alert-box-text,\n section.wsw-theme-b #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .alert-box-text,\n section.wsw-theme-bb #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .alert-box-text {\n color: var(--wsw-color-light, #eeedeb);\n }\n section.wsw-theme-d #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .hint-text,\n section.wsw-theme-db #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .hint-text,\n section.wsw-theme-b #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .hint-text,\n section.wsw-theme-bb #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .hint-text {\n color: var(--wsw-color-light, #eeedeb);\n }\n\n section.wsw-theme-d #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .step--active .step-icon,\n section.wsw-theme-db #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .step--active .step-icon,\n section.wsw-theme-b #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .step--active .step-icon,\n section.wsw-theme-bb #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .step--active .step-icon {\n background-color: var(--wsw-color-black, #383838);\n }\n section.wsw-theme-d #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .step--pending .step-icon,\n section.wsw-theme-db #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .step--pending .step-icon,\n section.wsw-theme-b #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .step--pending .step-icon,\n section.wsw-theme-bb #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .step--pending .step-icon {\n background-color: rgba(255, 255, 255, 0.08);\n border-color: var(--wsw-color-light, #eeedeb);\n }\n section.wsw-theme-d #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .step--pending .step-icon svg,\n section.wsw-theme-db #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .step--pending .step-icon svg,\n section.wsw-theme-b #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .step--pending .step-icon svg,\n section.wsw-theme-bb #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .step--pending .step-icon svg {\n stroke: var(--wsw-color-light, #eeedeb);\n }\n\n /* Accent theme */\n section.wsw-theme-a #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .thankyou-heading,\n section.wsw-theme-a #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .step-label,\n section.wsw-theme-a #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .alert-box-text {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-a #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .thankyou-sub,\n section.wsw-theme-a #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .step-desc,\n section.wsw-theme-a #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .hint-text {\n color: rgba(255, 255, 255, 0.75);\n }\n section.wsw-theme-a #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .check-circle {\n background-color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-a #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .check-circle svg {\n stroke: var(--wsw-color-accent, #66002b);\n }\n section.wsw-theme-a #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .step--done .step-icon {\n background-color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-a #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .step--done .step-icon svg {\n stroke: var(--wsw-color-accent, #66002b);\n }\n section.wsw-theme-a #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .step--active .step-icon {\n background-color: transparent;\n border-color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-a #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .step--active .step-icon svg {\n stroke: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-a #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .alert-box {\n background-color: rgba(255, 255, 255, 0.12);\n border-left-color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-a #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .alert-box-icon svg {\n stroke: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-a #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .alert-box-text strong {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-a #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .connector--done .connector-line {\n background-color: var(--wsw-color-white, #fff);\n }\n\n /* Mobile */\n @media (max-width: 768px) {\n #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .steps {\n flex-direction: column;\n align-items: center;\n gap: 0;\n }\n #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .connector {\n width: auto;\n height: 40px;\n padding-top: 0;\n }\n #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .connector-line {\n width: 3px !important;\n height: 100%;\n }\n #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .connector--pending .connector-line {\n background: repeating-linear-gradient(\n 180deg,\n var(--wsw-color-dark, #949494) 0,\n var(--wsw-color-dark, #949494) 6px,\n transparent 6px,\n transparent 12px\n ) !important;\n width: 2px !important;\n }\n #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .step {\n padding: 0;\n }\n #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 .alert-box {\n padding: 1.25rem 1.25rem;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 *,\n #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 *::before,\n #wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4 *::after {\n transition-duration: 0.01ms !important;\n animation-duration: 0.01ms !important;\n }\n }\n</style>\n\n<div id=\"wsw-snippet-5236571c-0505-4711-8cc4-945aabd6d2a4\">\n <div class=\"thankyou-wrapper\">\n\n <!-- Animated Checkmark -->\n <div class=\"check-circle\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\">\n <polyline points=\"6 12 10 16 18 8\"></polyline>\n </svg>\n </div>\n\n <h2 class=\"thankyou-heading\">Vielen Dank für deine Anmeldung!</h2>\n <span class=\"thankyou-sub\">Du hast dich erfolgreich für unser Webinar angemeldet. Nur noch ein kleiner Schritt, um deine Teilnahme zu sichern.</span>\n\n <!-- 3-Step Visual Process -->\n <div class=\"steps\" role=\"list\" aria-label=\"Anmeldeschritte\">\n\n <!-- Step 1: Done -->\n <div class=\"step step--done\" role=\"listitem\">\n <div class=\"step-icon\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\"><polyline points=\"6 12 10 16 18 8\"></polyline></svg>\n </div>\n <span class=\"step-label\">Eintragung</span>\n <span class=\"step-desc\">Erledigt ✓</span>\n </div>\n\n <!-- Connector -->\n <div class=\"connector connector--done\" aria-hidden=\"true\">\n <div class=\"connector-line\"></div>\n </div>\n\n <!-- Step 2: Active -->\n <div class=\"step step--active\" role=\"listitem\">\n <div class=\"step-icon\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\">\n <rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\"></rect>\n <polyline points=\"3 7 12 13 21 7\"></polyline>\n </svg>\n </div>\n <span class=\"step-label\">E-Mail bestätigen</span>\n <span class=\"step-desc\">Jetzt Postfach prüfen</span>\n </div>\n\n <!-- Connector -->\n <div class=\"connector connector--pending\" aria-hidden=\"true\">\n <div class=\"connector-line\"></div>\n </div>\n\n <!-- Step 3: Pending -->\n <div class=\"step step--pending\" role=\"listitem\">\n <div class=\"step-icon\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\">\n <circle cx=\"12\" cy=\"12\" r=\"9\"></circle>\n <polyline points=\"12 7 12 12 15 15\"></polyline>\n </svg>\n </div>\n <span class=\"step-label\">Webinar-Zugang</span>\n <span class=\"step-desc\">Nach Bestätigung</span>\n </div>\n\n </div>\n\n <!-- Alert Box -->\n <div class=\"alert-box\" role=\"alert\">\n <div class=\"alert-box-icon\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\">\n <path d=\"M22 12A10 10 0 1 1 12 2a10 10 0 0 1 10 10z\"></path>\n <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"></line>\n <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"></line>\n </svg>\n </div>\n <div class=\"alert-box-text\">\n <strong>Wichtig:</strong> Wir haben dir eine Bestätigungs-E-Mail gesendet. Bitte öffne diese und klicke auf den Bestätigungslink, um deine Anmeldung abzuschließen. Ohne Bestätigung können wir dir keinen Zugang zum Webinar senden.\n </div>\n </div>\n\n <span class=\"hint-text\">Keine E-Mail erhalten? Bitte prüfe auch deinen Spam-Ordner. Die E-Mail sollte innerhalb weniger Minuten eintreffen.</span>\n\n </div>\n</div>","summary":null,"version":2,"inserted_version":2,"total_cost":0.9031499400000002,"total_messages_sent":2,"summarized_at_total":0}