{"uuid":"87420495-a6d2-4f14-bf24-bf0c93b6bfd1","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-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 {\n font-family: inherit;\n box-sizing: border-box;\n background: transparent;\n }\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 *,\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 *::before,\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 *::after {\n box-sizing: inherit;\n }\n\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 {\n --mc-bg: #0d1b2a;\n --mc-bg-card: rgba(255,255,255,0.04);\n --mc-gold: #b8a067;\n --mc-gold-hover: #c9b27e;\n --mc-text: rgba(255,255,255,0.85);\n --mc-text-muted: rgba(255,255,255,0.5);\n --mc-text-heading: #ffffff;\n --mc-border: rgba(255,255,255,0.12);\n --mc-modal-bg: #132238;\n --mc-radius: 4px;\n --mc-transition: 0.3s ease-out;\n }\n\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-wrapper {\n background: var(--mc-bg);\n min-height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 3rem 1.5rem;\n position: relative;\n overflow: hidden;\n }\n\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-step {\n display: none;\n width: 100%;\n max-width: 560px;\n margin: 0 auto;\n text-align: center;\n opacity: 0;\n transform: translateY(20px);\n transition: opacity 0.5s ease-out, transform 0.5s ease-out;\n }\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-step.active {\n display: block;\n }\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-step.visible {\n opacity: 1;\n transform: translateY(0);\n }\n\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-label {\n font-size: 0.75rem;\n font-weight: 600;\n letter-spacing: 0.25em;\n text-transform: uppercase;\n color: var(--mc-gold);\n margin-bottom: 1rem;\n display: block;\n }\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-heading {\n font-size: clamp(1.8rem, 5vw, 2.8rem);\n font-weight: 400;\n color: var(--mc-text-heading);\n margin: 0 0 1.5rem 0;\n line-height: 1.15;\n font-style: italic;\n }\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-heading-normal {\n font-style: normal;\n }\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-divider {\n width: 60px;\n height: 2px;\n background: var(--mc-gold);\n margin: 0 auto 1.5rem auto;\n border: none;\n }\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-subtitle {\n color: var(--mc-text-muted);\n font-size: 0.95rem;\n line-height: 1.6;\n margin-bottom: 2rem;\n display: block;\n }\n\n /* -- Buttons -- */\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-btn {\n display: block;\n width: 100%;\n max-width: 440px;\n margin: 0 auto;\n padding: 1rem 2rem;\n background: var(--mc-gold);\n color: var(--mc-bg);\n border: none;\n border-radius: var(--mc-radius);\n font-size: 0.85rem;\n font-weight: 600;\n letter-spacing: 0.2em;\n text-transform: uppercase;\n cursor: pointer;\n transition: background var(--mc-transition), transform 0.2s ease-out;\n text-align: center;\n text-decoration: none;\n line-height: 1.4;\n }\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-btn:hover {\n background: var(--mc-gold-hover);\n transform: scale(1.02);\n }\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-btn:focus-visible {\n outline: 2px solid var(--mc-gold);\n outline-offset: 3px;\n }\n\n /* -- Back link -- */\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-back {\n display: inline-flex;\n align-items: center;\n gap: 0.4rem;\n color: var(--mc-text-muted);\n font-size: 0.8rem;\n letter-spacing: 0.15em;\n text-transform: uppercase;\n cursor: pointer;\n background: none;\n border: none;\n font-family: inherit;\n padding: 0.5rem 0;\n margin-bottom: 2rem;\n transition: color var(--mc-transition);\n text-decoration: none;\n }\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-back:hover {\n color: var(--mc-text-heading);\n }\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-back:focus-visible {\n outline: 2px solid var(--mc-gold);\n outline-offset: 3px;\n }\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-back svg {\n width: 14px;\n height: 14px;\n stroke: currentColor;\n fill: none;\n stroke-width: 2;\n stroke-linecap: round;\n stroke-linejoin: round;\n }\n\n /* -- Form fields -- */\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-field {\n margin-bottom: 1.5rem;\n text-align: left;\n }\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-field-label {\n display: block;\n font-size: 0.7rem;\n font-weight: 600;\n letter-spacing: 0.2em;\n text-transform: uppercase;\n color: var(--mc-text-muted);\n margin-bottom: 0.75rem;\n }\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-field-label .mc-required {\n color: var(--mc-gold);\n margin-left: 0.25rem;\n }\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-input {\n width: 100%;\n background: transparent;\n border: none;\n border-bottom: 1px solid var(--mc-border);\n padding: 0.75rem 0;\n color: var(--mc-text-heading);\n font-size: 1rem;\n font-family: inherit;\n outline: none;\n transition: border-color var(--mc-transition);\n }\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-input::placeholder {\n color: var(--mc-text-muted);\n opacity: 0.6;\n }\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-input:focus {\n border-bottom-color: var(--mc-gold);\n }\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-field-error {\n color: #e74c3c;\n font-size: 0.78rem;\n margin-top: 0.5rem;\n display: none;\n }\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-field.has-error .mc-input {\n border-bottom-color: #e74c3c;\n }\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-field.has-error .mc-field-error {\n display: block;\n }\n\n /* -- Step 1: Invitation -- */\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-logo-img {\n width: clamp(180px, 40vw, 280px);\n height: auto;\n margin-bottom: 1rem;\n }\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-club-title {\n font-size: clamp(1.6rem, 4vw, 2.4rem);\n font-weight: 700;\n letter-spacing: 0.08em;\n color: var(--mc-text-heading);\n margin: 0;\n text-transform: uppercase;\n line-height: 1.2;\n }\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-club-sub {\n font-size: clamp(1.1rem, 3vw, 1.6rem);\n font-weight: 400;\n letter-spacing: 0.15em;\n color: var(--mc-text-muted);\n text-transform: uppercase;\n display: block;\n margin-top: 0.25rem;\n }\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-invitation-text {\n font-size: 0.8rem;\n letter-spacing: 0.25em;\n text-transform: uppercase;\n color: var(--mc-text-muted);\n margin: 1.5rem 0 2.5rem 0;\n display: block;\n }\n\n /* -- Event -- */\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-event-details {\n text-align: left;\n margin-bottom: 1.5rem;\n }\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-event-row {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n padding: 0.5rem 0;\n color: var(--mc-text);\n font-size: 0.95rem;\n }\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-event-icon {\n flex-shrink: 0;\n width: 20px;\n height: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-event-icon svg {\n width: 18px;\n height: 18px;\n stroke: var(--mc-gold);\n fill: none;\n stroke-width: 1.5;\n stroke-linecap: round;\n stroke-linejoin: round;\n }\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-event-quote {\n font-style: italic;\n color: var(--mc-text-muted);\n font-size: 1rem;\n margin: 1.5rem 0;\n text-align: left;\n display: block;\n border-left: 2px solid var(--mc-gold);\n padding-left: 1rem;\n }\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-event-list {\n text-align: left;\n margin: 1.5rem 0 2rem 0;\n list-style: none;\n padding: 0;\n }\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-event-list li {\n color: var(--mc-text);\n font-size: 0.95rem;\n padding: 0.5rem 0;\n padding-left: 1.25rem;\n position: relative;\n }\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-event-list li::before {\n content: '\\2022';\n position: absolute;\n left: 0;\n color: var(--mc-gold);\n font-size: 1.2rem;\n line-height: 1;\n top: 0.55rem;\n }\n\n /* -- Guests -- */\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-counter {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 2rem;\n margin: 2rem 0 1rem 0;\n }\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-counter-btn {\n width: 56px;\n height: 56px;\n border-radius: 50%;\n border: 1px solid var(--mc-border);\n background: transparent;\n color: var(--mc-text-heading);\n font-size: 1.5rem;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: border-color var(--mc-transition), color var(--mc-transition);\n line-height: 1;\n padding: 0;\n }\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-counter-btn:hover {\n border-color: var(--mc-gold);\n color: var(--mc-gold);\n }\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-counter-btn:focus-visible {\n outline: 2px solid var(--mc-gold);\n outline-offset: 3px;\n }\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-counter-value {\n font-size: clamp(2.5rem, 8vw, 4rem);\n font-weight: 300;\n color: var(--mc-text-heading);\n min-width: 60px;\n text-align: center;\n display: block;\n }\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-counter-label {\n font-size: 0.7rem;\n letter-spacing: 0.25em;\n text-transform: uppercase;\n color: var(--mc-text-muted);\n margin-bottom: 1.5rem;\n display: block;\n }\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-price-info {\n font-size: 0.9rem;\n color: var(--mc-text-muted);\n margin-bottom: 2rem;\n font-style: italic;\n display: block;\n }\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-price-info .mc-price-gold {\n color: var(--mc-gold);\n font-weight: 600;\n }\n\n /* -- Payment -- */\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-summary-text {\n font-size: 0.95rem;\n color: var(--mc-text-muted);\n margin-bottom: 2rem;\n display: block;\n }\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-summary-text .mc-price-gold {\n color: var(--mc-gold);\n font-weight: 600;\n }\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-option {\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: var(--mc-bg-card);\n border: 1px solid var(--mc-border);\n border-radius: var(--mc-radius);\n padding: 1.25rem 1.5rem;\n margin-bottom: 0.75rem;\n cursor: pointer;\n transition: border-color var(--mc-transition), background var(--mc-transition);\n }\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-option:hover {\n border-color: var(--mc-gold);\n background: rgba(184,160,103,0.06);\n }\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-option:focus-visible {\n outline: 2px solid var(--mc-gold);\n outline-offset: 2px;\n }\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-option.selected {\n border-color: var(--mc-gold);\n background: rgba(184,160,103,0.1);\n }\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-option-label {\n color: var(--mc-text);\n font-size: 0.95rem;\n font-weight: 500;\n }\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-option-radio {\n width: 22px;\n height: 22px;\n border-radius: 50%;\n border: 1px solid var(--mc-border);\n flex-shrink: 0;\n position: relative;\n transition: border-color var(--mc-transition);\n }\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-option.selected .mc-option-radio {\n border-color: var(--mc-gold);\n }\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-option.selected .mc-option-radio::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background: var(--mc-gold);\n }\n\n /* -- Modal -- */\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-modal-overlay {\n display: none;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0,0,0,0.6);\n align-items: center;\n justify-content: center;\n z-index: 10;\n padding: 1.5rem;\n }\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-modal-overlay.active {\n display: flex;\n }\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-modal {\n background: var(--mc-modal-bg);\n border-radius: 6px;\n padding: 2.5rem 2rem;\n width: 100%;\n max-width: 440px;\n text-align: center;\n opacity: 0;\n transform: scale(0.95);\n transition: opacity 0.3s ease-out, transform 0.3s ease-out;\n }\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-modal-overlay.active .mc-modal {\n opacity: 1;\n transform: scale(1);\n }\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-modal .mc-divider {\n margin-bottom: 1rem;\n margin-top: -0.5rem;\n }\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-cancel-link {\n display: inline-block;\n margin-top: 1rem;\n color: var(--mc-text-muted);\n font-size: 0.85rem;\n cursor: pointer;\n background: none;\n border: none;\n font-family: inherit;\n text-decoration: none;\n transition: color var(--mc-transition);\n padding: 0.5rem;\n }\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-cancel-link:hover {\n color: var(--mc-text-heading);\n }\n\n /* -- Confirmation -- */\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-check-icon {\n width: 72px;\n height: 72px;\n border-radius: 50%;\n border: 2px solid var(--mc-gold);\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 auto 1.5rem auto;\n }\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-check-icon svg {\n width: 32px;\n height: 32px;\n stroke: var(--mc-gold);\n fill: none;\n stroke-width: 2;\n stroke-linecap: round;\n stroke-linejoin: round;\n }\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-confirm-card {\n background: var(--mc-bg-card);\n border: 1px solid var(--mc-border);\n border-radius: 6px;\n padding: 1.5rem;\n margin: 2rem 0;\n text-align: left;\n }\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-confirm-row {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 0.75rem 0;\n border-bottom: 1px solid var(--mc-border);\n }\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-confirm-row:last-child {\n border-bottom: none;\n }\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-confirm-row-label {\n font-size: 0.7rem;\n letter-spacing: 0.2em;\n text-transform: uppercase;\n color: var(--mc-text-muted);\n }\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-confirm-row-value {\n color: var(--mc-text-heading);\n font-size: 0.95rem;\n font-weight: 500;\n }\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-confirm-event {\n padding: 1rem 0 0.5rem 0;\n }\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-confirm-event-date {\n color: var(--mc-text-heading);\n font-size: 0.95rem;\n font-weight: 500;\n display: block;\n }\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-confirm-event-loc {\n color: var(--mc-text-muted);\n font-size: 0.85rem;\n display: block;\n margin-top: 0.25rem;\n }\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-closing-quote {\n font-style: italic;\n color: var(--mc-text-muted);\n font-size: 1rem;\n margin: 1.5rem 0 2rem 0;\n display: block;\n }\n\n /* -- Progress dots -- */\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-progress {\n display: flex;\n justify-content: center;\n gap: 0.5rem;\n margin-top: 2.5rem;\n }\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: var(--mc-border);\n transition: background var(--mc-transition), transform var(--mc-transition);\n }\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-dot.active {\n background: var(--mc-gold);\n transform: scale(1.3);\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 *,\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 *::before,\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 *::after {\n transition-duration: 0.01ms !important;\n animation-duration: 0.01ms !important;\n }\n }\n\n @media (max-width: 480px) {\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-wrapper {\n padding: 2rem 1rem;\n }\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-modal {\n padding: 2rem 1.25rem;\n }\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-counter {\n gap: 1.25rem;\n }\n #wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1 .mc-counter-btn {\n width: 48px;\n height: 48px;\n }\n }\n</style>\n\n<div id=\"wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1\">\n <div class=\"mc-wrapper\">\n\n <!-- STEP 1: Invitation -->\n <div class=\"mc-step active visible\" data-step=\"1\">\n <img src=\"/s3/c/wsw.website.14054/public/images/pages/folder.27/e6fd9d51f-golden-logo.webp\" alt=\"Memberclub Zürich Wappen\" class=\"mc-logo-img\" draggable=\"false\">\n <h2 class=\"mc-club-title\">Memberclub<span class=\"mc-club-sub\">Zürich</span></h2>\n <div class=\"mc-divider\" style=\"margin-top:1.5rem\"></div>\n <span class=\"mc-invitation-text\">By Invitation Only</span>\n <button class=\"mc-btn\" data-action=\"next\" type=\"button\">Einladung öffnen</button>\n <div class=\"mc-progress\">\n <span class=\"mc-dot active\"></span>\n <span class=\"mc-dot\"></span>\n <span class=\"mc-dot\"></span>\n <span class=\"mc-dot\"></span>\n <span class=\"mc-dot\"></span>\n </div>\n </div>\n\n <!-- STEP 2: Identification -->\n <div class=\"mc-step\" data-step=\"2\">\n <button class=\"mc-back\" data-action=\"back\" type=\"button\">\n <svg viewBox=\"0 0 24 24\"><polyline points=\"15 18 9 12 15 6\"></polyline></svg>\n <span>Zurück</span>\n </button>\n <span class=\"mc-label\">Member Access</span>\n <h2 class=\"mc-heading\">Identifizieren Sie sich</h2>\n <div class=\"mc-divider\"></div>\n <span class=\"mc-subtitle\">Bitte geben Sie Ihre persönliche Member-Nummer ein</span>\n\n <div class=\"mc-field\" data-field=\"member\">\n <span class=\"mc-field-label\">Member Number <span class=\"mc-required\">*</span></span>\n <input type=\"text\" class=\"mc-input\" placeholder=\"MC-0000\" data-input=\"member\" aria-required=\"true\">\n <span class=\"mc-field-error\">Bitte geben Sie Ihre Member-Nummer ein</span>\n </div>\n <div class=\"mc-field\" data-field=\"firstname\">\n <span class=\"mc-field-label\">First Name</span>\n <input type=\"text\" class=\"mc-input\" placeholder=\"\" data-input=\"firstname\">\n </div>\n <div class=\"mc-field\" data-field=\"lastname\">\n <span class=\"mc-field-label\">Last Name</span>\n <input type=\"text\" class=\"mc-input\" placeholder=\"\" data-input=\"lastname\">\n </div>\n\n <div style=\"height:1.5rem\"></div>\n <button class=\"mc-btn\" data-action=\"next\" type=\"button\">Fortfahren</button>\n <div class=\"mc-progress\">\n <span class=\"mc-dot\"></span>\n <span class=\"mc-dot active\"></span>\n <span class=\"mc-dot\"></span>\n <span class=\"mc-dot\"></span>\n <span class=\"mc-dot\"></span>\n </div>\n </div>\n\n <!-- STEP 3: Main Event -->\n <div class=\"mc-step\" data-step=\"3\">\n <button class=\"mc-back\" data-action=\"back\" type=\"button\">\n <svg viewBox=\"0 0 24 24\"><polyline points=\"15 18 9 12 15 6\"></polyline></svg>\n <span>Zurück</span>\n </button>\n <span class=\"mc-label\">Exclusive Invitation</span>\n <h2 class=\"mc-heading mc-heading-normal\">MAIN EVENT</h2>\n <div class=\"mc-divider\"></div>\n\n <div class=\"mc-event-details\">\n <div class=\"mc-event-row\">\n <span class=\"mc-event-icon\"><svg viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect><line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"></line><line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"></line><line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"></line></svg></span>\n <span>18. Juni 2026</span>\n </div>\n <div class=\"mc-event-row\">\n <span class=\"mc-event-icon\"><svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"></circle><polyline points=\"12 6 12 12 16 14\"></polyline></svg></span>\n <span>ab 16:00 Uhr</span>\n </div>\n <div class=\"mc-event-row\">\n <span class=\"mc-event-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z\"></path><circle cx=\"12\" cy=\"10\" r=\"3\"></circle></svg></span>\n <span>Terrasse Restaurant</span>\n </div>\n <div class=\"mc-event-row\">\n <span class=\"mc-event-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z\"></path><circle cx=\"12\" cy=\"10\" r=\"3\"></circle></svg></span>\n <span>Limmatquai 3, 8001 Zürich</span>\n </div>\n </div>\n\n <span class=\"mc-event-quote\">\"Ein besonderer Abend in exklusivem Rahmen erwartet Sie.\"</span>\n\n <ul class=\"mc-event-list\">\n <li>Live-Übertragung: Schweiz – Bosnien &amp; Herzegowina</li>\n <li>Fussballtalk mit Rainer Maria Salzgeber</li>\n <li>Drinks, Food &amp; Networking</li>\n <li>Hochwertiges Networking &amp; Special Moments</li>\n </ul>\n\n <button class=\"mc-btn\" data-action=\"next\" type=\"button\">Teilnahme bestätigen</button>\n <div class=\"mc-progress\">\n <span class=\"mc-dot\"></span>\n <span class=\"mc-dot\"></span>\n <span class=\"mc-dot active\"></span>\n <span class=\"mc-dot\"></span>\n <span class=\"mc-dot\"></span>\n </div>\n </div>\n\n <!-- STEP 4: Guests -->\n <div class=\"mc-step\" data-step=\"4\">\n <button class=\"mc-back\" data-action=\"back\" type=\"button\">\n <svg viewBox=\"0 0 24 24\"><polyline points=\"15 18 9 12 15 6\"></polyline></svg>\n <span>Zurück</span>\n </button>\n <span class=\"mc-label\">Privileg</span>\n <h2 class=\"mc-heading\">Begleitpersonen</h2>\n <div class=\"mc-divider\"></div>\n <span class=\"mc-subtitle\">Als Member geniessen Sie besondere Privilegien. Sie können ausgewählte Gäste einladen.</span>\n\n <div class=\"mc-counter\">\n <button class=\"mc-counter-btn\" data-action=\"decrease\" type=\"button\" aria-label=\"Gäste verringern\">−</button>\n <span class=\"mc-counter-value\" data-counter=\"\">0</span>\n <button class=\"mc-counter-btn\" data-action=\"increase\" type=\"button\" aria-label=\"Gäste erhöhen\">+</button>\n </div>\n <span class=\"mc-counter-label\">Gäste</span>\n <span class=\"mc-price-info\">Gastbeitrag: <span class=\"mc-price-gold\">CHF 299.–</span> pro Person</span>\n\n <button class=\"mc-btn\" data-action=\"next\" type=\"button\">Weiter</button>\n <div class=\"mc-progress\">\n <span class=\"mc-dot\"></span>\n <span class=\"mc-dot\"></span>\n <span class=\"mc-dot\"></span>\n <span class=\"mc-dot active\"></span>\n <span class=\"mc-dot\"></span>\n </div>\n </div>\n\n <!-- STEP 5: Payment choice (only \"Auf Rechnung\") -->\n <div class=\"mc-step\" data-step=\"5\">\n <button class=\"mc-back\" data-action=\"back\" type=\"button\">\n <svg viewBox=\"0 0 24 24\"><polyline points=\"15 18 9 12 15 6\"></polyline></svg>\n <span>Zurück</span>\n </button>\n <span class=\"mc-label\">Abschluss</span>\n <h2 class=\"mc-heading\">Ihre Auswahl</h2>\n <div class=\"mc-divider\"></div>\n <span class=\"mc-summary-text\" data-summary=\"\"></span>\n\n <div class=\"mc-option\" data-payment=\"invoice\" tabindex=\"0\" role=\"radio\" aria-checked=\"false\">\n <span class=\"mc-option-label\">Auf Rechnung</span>\n <span class=\"mc-option-radio\"></span>\n </div>\n\n <div class=\"mc-progress\">\n <span class=\"mc-dot\"></span>\n <span class=\"mc-dot\"></span>\n <span class=\"mc-dot\"></span>\n <span class=\"mc-dot\"></span>\n <span class=\"mc-dot active\"></span>\n </div>\n </div>\n\n <!-- STEP 6: Confirmation -->\n <div class=\"mc-step\" data-step=\"6\">\n <div class=\"mc-check-icon\">\n <svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"></polyline></svg>\n </div>\n <span class=\"mc-label\">Confirmed</span>\n <h2 class=\"mc-heading\">Ihre Teilnahme<br>ist bestätigt</h2>\n <div class=\"mc-divider\"></div>\n\n <div class=\"mc-confirm-card\">\n <div class=\"mc-confirm-row\">\n <span class=\"mc-confirm-row-label\">Name</span>\n <span class=\"mc-confirm-row-value\" data-confirm-name=\"\"></span>\n </div>\n <div class=\"mc-confirm-row\">\n <span class=\"mc-confirm-row-label\">Begleitung</span>\n <span class=\"mc-confirm-row-value\" data-confirm-guests=\"\"></span>\n </div>\n <div class=\"mc-confirm-event\">\n <span class=\"mc-confirm-event-date\">18. Juni 2026 · ab 16:00 Uhr</span>\n <span class=\"mc-confirm-event-loc\">Terrasse Restaurant</span>\n <span class=\"mc-confirm-event-loc\">Limmatquai 3, 8001 Zürich</span>\n </div>\n </div>\n\n <span class=\"mc-closing-quote\">Wir freuen uns, Sie persönlich begrüssen zu dürfen.</span>\n <a href=\"https://calendar.google.com/calendar/render?action=TEMPLATE&amp;text=Memberclub%20Z%C3%BCrich%20%E2%80%93%20Main%20Event&amp;dates=20260618T140000Z/20260618T210000Z&amp;location=Terrasse%20Restaurant%2C%20Limmatquai%203%2C%208001%20Z%C3%BCrich&amp;details=Exklusives%20Event%20%E2%80%93%20Memberclub%20Z%C3%BCrich\" class=\"mc-btn\" target=\"_blank\" rel=\"noopener\" draggable=\"false\">Zum Kalender hinzufügen</a>\n </div>\n\n <!-- INVOICE MODAL -->\n <div class=\"mc-modal-overlay\" data-modal=\"invoice\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Rechnungs-E-Mail eingeben\">\n <div class=\"mc-modal\">\n <div class=\"mc-divider\" style=\"margin-top:0\"></div>\n <span class=\"mc-label\">Auf Rechnung</span>\n <h3 class=\"mc-heading\" style=\"font-size:clamp(1.3rem,calc(3.5 * var(--design-apply-one-vw)),1.8rem);\">Bitte geben Sie Ihre E-Mail-Adresse an</h3>\n\n <div class=\"mc-field\" data-field=\"email\" style=\"text-align:center;\">\n <span class=\"mc-field-label\" style=\"text-align:center;\">E-Mail <span class=\"mc-required\">*</span></span>\n <input type=\"email\" class=\"mc-input\" placeholder=\"ihre@email.ch\" data-input=\"email\" aria-required=\"true\" style=\"text-align:center;\">\n <span class=\"mc-field-error\">Bitte geben Sie eine gültige E-Mail-Adresse ein</span>\n </div>\n\n <button class=\"mc-btn\" data-action=\"confirm-invoice\" type=\"button\" style=\"margin-top:0.5rem;\">Bestätigen</button>\n <button class=\"mc-cancel-link\" data-action=\"cancel-invoice\" type=\"button\">Abbrechen</button>\n </div>\n </div>\n\n </div>\n</div>\n\n<script>\n(function() {\n 'use strict';\n\n var el = document.getElementById('wsw-snippet-87420495-a6d2-4f14-bf24-bf0c93b6bfd1');\n if (!el) return;\n\n var state = {\n step: 1,\n member: '',\n firstname: '',\n lastname: '',\n guests: 0,\n payment: '',\n email: ''\n };\n\n var PRICE_PER_GUEST = 299;\n\n function qs(sel) { return el.querySelector(sel); }\n function qsa(sel) { return el.querySelectorAll(sel); }\n\n function showStep(n) {\n var steps = qsa('.mc-step');\n steps.forEach(function(s) {\n s.classList.remove('active', 'visible');\n });\n var target = qs('[data-step=\"' + n + '\"]');\n if (!target) return;\n target.classList.add('active');\n void target.offsetWidth;\n setTimeout(function() { target.classList.add('visible'); }, 30);\n state.step = n;\n qs('.mc-wrapper').scrollTop = 0;\n }\n\n function validateStep2() {\n var valid = true;\n var memberField = qs('[data-field=\"member\"]');\n var memberInput = qs('[data-input=\"member\"]');\n if (!memberInput.value.trim()) {\n memberField.classList.add('has-error');\n valid = false;\n } else {\n memberField.classList.remove('has-error');\n }\n state.member = memberInput.value.trim();\n state.firstname = qs('[data-input=\"firstname\"]').value.trim();\n state.lastname = qs('[data-input=\"lastname\"]').value.trim();\n return valid;\n }\n\n function updateSummary() {\n var summaryEl = qs('[data-summary]');\n if (!summaryEl) return;\n if (state.guests === 0) {\n summaryEl.textContent = 'Keine Begleitpersonen';\n } else {\n var guestLabel = state.guests === 1 ? '1 Gast' : state.guests + ' G\\u00e4ste';\n var total = state.guests * PRICE_PER_GUEST;\n summaryEl.innerHTML = guestLabel + ' \\u00b7 Total <span class=\"mc-price-gold\">CHF ' + total + '.\\u2013</span>';\n }\n }\n\n function updateConfirmation() {\n var nameEl = qs('[data-confirm-name]');\n var guestsEl = qs('[data-confirm-guests]');\n if (nameEl) {\n var name = (state.firstname + ' ' + state.lastname).trim();\n nameEl.textContent = name || state.member;\n }\n if (guestsEl) {\n if (state.guests === 0) {\n guestsEl.textContent = 'Keine';\n } else {\n guestsEl.textContent = state.guests === 1 ? '1 Gast' : state.guests + ' G\\u00e4ste';\n }\n }\n }\n\n function determineGroup() {\n if (state.guests === 0) {\n return 'Ohne Begleitung';\n }\n return state.guests + ' Rechnung';\n }\n\n function prepareSubmissionData() {\n return {\n member: state.member,\n firstname: state.firstname,\n lastname: state.lastname,\n guests: state.guests,\n payment: 'invoice',\n email: state.email,\n group: determineGroup(),\n notifyEmails: ['info@memberclub.zuerich', 'clang@worldsoft.ch'],\n event: {\n name: 'Memberclub Z\\u00fcrich \\u2013 Main Event',\n date: '18. Juni 2026',\n time: 'ab 16:00 Uhr',\n location: 'Terrasse Restaurant, Limmatquai 3, 8001 Z\\u00fcrich'\n }\n };\n }\n\n function showModal(name) {\n var overlay = qs('[data-modal=\"' + name + '\"]');\n if (overlay) {\n overlay.classList.add('active');\n var input = overlay.querySelector('.mc-input');\n if (input) setTimeout(function() { input.focus(); }, 350);\n }\n }\n\n function hideModal(name) {\n var overlay = qs('[data-modal=\"' + name + '\"]');\n if (overlay) {\n overlay.classList.remove('active');\n }\n }\n\n function validateEmail(email) {\n return /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(email);\n }\n\n function finalizeRegistration() {\n updateConfirmation();\n var payload = prepareSubmissionData();\n\n /* FUTURE EXTENSION PLACEHOLDER:\n Data submission to WSW backend routes will be implemented\n via a dedicated secure API endpoint.\n See: ApiClient.php wsw-snippet route\n\n The payload object contains all registration data:\n - member, firstname, lastname, guests, payment, email\n - group: the computed group name for CRM assignment\n (e.g. \"Ohne Begleitung\", \"2 Rechnung\", \"5 Rechnung\")\n - notifyEmails: [\"info@memberclub.zuerich\", \"clang@worldsoft.ch\"]\n → A styled confirmation email with all registration details\n should be sent to BOTH addresses upon submission.\n - event: full event details for the confirmation email\n */\n\n showStep(6);\n }\n\n /* Counter */\n var counterVal = qs('[data-counter]');\n qs('[data-action=\"decrease\"]').addEventListener('click', function() {\n if (state.guests > 0) {\n state.guests--;\n counterVal.textContent = state.guests;\n }\n });\n qs('[data-action=\"increase\"]').addEventListener('click', function() {\n if (state.guests < 7) {\n state.guests++;\n counterVal.textContent = state.guests;\n }\n });\n\n /* Payment option (only invoice) */\n var options = qsa('.mc-option');\n options.forEach(function(opt) {\n opt.addEventListener('click', function() {\n options.forEach(function(o) {\n o.classList.remove('selected');\n o.setAttribute('aria-checked', 'false');\n });\n opt.classList.add('selected');\n opt.setAttribute('aria-checked', 'true');\n state.payment = 'invoice';\n\n setTimeout(function() {\n showModal('invoice');\n }, 300);\n });\n\n opt.addEventListener('keydown', function(e) {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n opt.click();\n }\n });\n });\n\n /* Invoice modal */\n qs('[data-action=\"confirm-invoice\"]').addEventListener('click', function() {\n var emailInput = qs('[data-input=\"email\"]');\n var emailField = qs('[data-field=\"email\"]');\n if (!validateEmail(emailInput.value.trim())) {\n emailField.classList.add('has-error');\n return;\n }\n emailField.classList.remove('has-error');\n state.email = emailInput.value.trim();\n hideModal('invoice');\n finalizeRegistration();\n });\n\n qs('[data-action=\"cancel-invoice\"]').addEventListener('click', function() {\n hideModal('invoice');\n options.forEach(function(o) {\n o.classList.remove('selected');\n o.setAttribute('aria-checked', 'false');\n });\n state.payment = '';\n });\n\n /* Next buttons */\n qsa('[data-action=\"next\"]').forEach(function(btn) {\n btn.addEventListener('click', function() {\n if (state.step === 1) {\n showStep(2);\n } else if (state.step === 2) {\n if (!validateStep2()) return;\n showStep(3);\n } else if (state.step === 3) {\n showStep(4);\n } else if (state.step === 4) {\n if (state.guests === 0) {\n state.payment = '';\n updateConfirmation();\n showStep(6);\n } else {\n updateSummary();\n showStep(5);\n }\n }\n });\n });\n\n /* Back buttons */\n qsa('[data-action=\"back\"]').forEach(function(btn) {\n btn.addEventListener('click', function() {\n if (state.step > 1) {\n showStep(state.step - 1);\n }\n });\n });\n\n /* Input clear error on typing */\n qsa('.mc-input').forEach(function(inp) {\n inp.addEventListener('input', function() {\n var field = inp.closest('.mc-field');\n if (field) field.classList.remove('has-error');\n });\n });\n\n /* Init */\n showStep(1);\n\n})();\n</script>","summary":null,"version":5,"inserted_version":5,"total_cost":6.515917869999999,"total_messages_sent":7,"summarized_at_total":0}