X-Taxi mobiler Service aus Vorarlberg

{"uuid":"0e145bfa-a7fd-42cd-881d-a7903008132f","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-0e145bfa-a7fd-42cd-881d-a7903008132f {\n box-sizing: border-box;\n font-family: inherit;\n background-color: #231F20;\n border-radius: 16px;\n padding: 2.5rem 2rem;\n max-width: 960px;\n margin: 0 auto;\n }\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f *,\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f *::before,\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f *::after {\n box-sizing: inherit;\n }\n\n /* ── Step Indicator ── */\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .step-indicator {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0;\n margin-bottom: 2rem;\n }\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .step-dot {\n width: 36px;\n height: 36px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-family: Poppins, sans-serif;\n font-weight: 700;\n font-size: 0.85rem;\n background-color: #2e2a2b;\n color: rgba(238, 237, 235, 0.35);\n border: 2px solid rgba(238, 237, 235, 0.12);\n transition: background-color 0.3s ease-out, color 0.3s ease-out, border-color 0.3s ease-out;\n flex-shrink: 0;\n }\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .step-dot.active {\n background-color: #F7C510;\n color: #231F20;\n border-color: #F7C510;\n }\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .step-dot.completed {\n background-color: rgba(247, 197, 16, 0.2);\n color: #F7C510;\n border-color: rgba(247, 197, 16, 0.5);\n }\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .step-line {\n width: 60px;\n height: 2px;\n background-color: rgba(238, 237, 235, 0.1);\n transition: background-color 0.3s ease-out;\n flex-shrink: 0;\n }\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .step-line.completed {\n background-color: rgba(247, 197, 16, 0.5);\n }\n\n /* ── Step Panels ── */\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .step-panel {\n display: none;\n opacity: 0;\n transform: translateY(12px);\n }\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .step-panel.active {\n display: block;\n animation: wswFadeIn 0.35s ease-out forwards;\n }\n @keyframes wswFadeIn {\n to { opacity: 1; transform: translateY(0); }\n }\n\n /* ── Row Layouts ── */\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .booking-row {\n display: flex;\n align-items: center;\n gap: 1rem;\n flex-wrap: wrap;\n margin-bottom: 1.5rem;\n }\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .booking-row:last-child {\n margin-bottom: 0;\n }\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .booking-row-bottom {\n display: flex;\n align-items: center;\n gap: 1rem;\n flex-wrap: wrap;\n }\n\n /* ── Transfer Dropdown ── */\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .dropdown-wrapper {\n position: relative;\n flex: 0 0 auto;\n }\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .dropdown-toggle {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0.75rem 1.25rem;\n background-color: #F7C510;\n color: #231F20;\n border: none;\n border-radius: 50px;\n font-family: Poppins, sans-serif;\n font-weight: 600;\n font-size: 0.95rem;\n cursor: pointer;\n transition: background-color 0.2s ease-out, transform 0.2s ease-out;\n white-space: nowrap;\n min-height: 48px;\n }\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .dropdown-toggle:hover {\n background-color: #e5b60e;\n transform: scale(1.02);\n }\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .dropdown-toggle:focus-visible {\n outline: 2px solid #F7C510;\n outline-offset: 3px;\n }\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .dropdown-arrow {\n display: inline-block;\n width: 0;\n height: 0;\n border-left: 5px solid transparent;\n border-right: 5px solid transparent;\n border-top: 6px solid #231F20;\n transition: transform 0.2s ease-out;\n }\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .dropdown-wrapper.open .dropdown-arrow {\n transform: rotate(180deg);\n }\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .dropdown-menu {\n position: absolute;\n top: calc(100% + 6px);\n left: 0;\n min-width: 220px;\n background-color: #2e2a2b;\n border: 1px solid rgba(247, 197, 16, 0.25);\n border-radius: 12px;\n padding: 0.5rem 0;\n z-index: 100;\n opacity: 0;\n visibility: hidden;\n transform: translateY(-8px);\n transition: opacity 0.2s ease-out, transform 0.2s ease-out, visibility 0.2s;\n box-shadow: 0 12px 32px rgba(0,0,0,0.4);\n }\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .dropdown-wrapper.open .dropdown-menu {\n opacity: 1;\n visibility: visible;\n transform: translateY(0);\n }\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .dropdown-item {\n display: block;\n width: 100%;\n padding: 0.7rem 1.25rem;\n background: none;\n border: none;\n color: #EEEDEB;\n font-family: Poppins, sans-serif;\n font-size: 0.9rem;\n font-weight: 400;\n text-align: left;\n cursor: pointer;\n transition: background-color 0.15s ease-out, color 0.15s ease-out;\n }\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .dropdown-item:hover,\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .dropdown-item:focus-visible {\n background-color: rgba(247, 197, 16, 0.12);\n color: #F7C510;\n }\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .dropdown-item.active {\n color: #F7C510;\n font-weight: 600;\n }\n\n /* ── Direction Buttons ── */\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .direction-group {\n display: flex;\n gap: 0;\n border-radius: 50px;\n overflow: hidden;\n border: 2px solid rgba(247, 197, 16, 0.35);\n flex: 0 0 auto;\n }\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .direction-btn {\n padding: 0.7rem 1.25rem;\n background-color: transparent;\n color: #EEEDEB;\n border: none;\n font-family: Poppins, sans-serif;\n font-weight: 500;\n font-size: 0.9rem;\n cursor: pointer;\n transition: background-color 0.2s ease-out, color 0.2s ease-out;\n white-space: nowrap;\n min-height: 48px;\n position: relative;\n }\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .direction-btn:not(:last-child)::after {\n content: '';\n position: absolute;\n right: 0;\n top: 20%;\n height: 60%;\n width: 1px;\n background-color: rgba(247, 197, 16, 0.25);\n }\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .direction-btn:hover {\n background-color: rgba(247, 197, 16, 0.1);\n }\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .direction-btn:focus-visible {\n outline: 2px solid #F7C510;\n outline-offset: -2px;\n }\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .direction-btn.active {\n background-color: #F7C510;\n color: #231F20;\n font-weight: 600;\n }\n\n /* ── Shared Input Styles ── */\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .input-wrapper {\n flex: 1 1 200px;\n position: relative;\n }\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .input-icon {\n position: absolute;\n left: 1rem;\n top: 50%;\n transform: translateY(-50%);\n color: #F7C510;\n font-size: 1.1rem;\n pointer-events: none;\n }\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .form-input {\n width: 100%;\n padding: 0.85rem 1rem 0.85rem 2.75rem;\n background-color: #2e2a2b;\n border: 2px solid rgba(238, 237, 235, 0.15);\n border-radius: 50px;\n color: #EEEDEB;\n font-family: inherit;\n font-size: 0.95rem;\n transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;\n min-height: 48px;\n }\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .form-input.no-icon {\n padding-left: 1.25rem;\n }\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .form-input::placeholder {\n color: rgba(238, 237, 235, 0.45);\n }\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .form-input:hover {\n border-color: rgba(247, 197, 16, 0.4);\n }\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .form-input:focus {\n outline: none;\n border-color: #F7C510;\n box-shadow: 0 0 0 3px rgba(247, 197, 16, 0.15);\n }\n\n /* Select styling */\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .form-select {\n width: 100%;\n padding: 0.85rem 2.5rem 0.85rem 1.25rem;\n background-color: #2e2a2b;\n border: 2px solid rgba(238, 237, 235, 0.15);\n border-radius: 50px;\n color: #EEEDEB;\n font-family: inherit;\n font-size: 0.95rem;\n transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;\n min-height: 48px;\n appearance: none;\n -webkit-appearance: none;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23F7C510' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-position: right 1.1rem center;\n cursor: pointer;\n }\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .form-select:hover {\n border-color: rgba(247, 197, 16, 0.4);\n }\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .form-select:focus {\n outline: none;\n border-color: #F7C510;\n box-shadow: 0 0 0 3px rgba(247, 197, 16, 0.15);\n }\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .form-select option {\n background-color: #2e2a2b;\n color: #EEEDEB;\n }\n\n /* ── Person Counter ── */\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .counter-wrapper {\n display: flex;\n align-items: center;\n gap: 0;\n border: 2px solid rgba(238, 237, 235, 0.15);\n border-radius: 50px;\n overflow: hidden;\n background-color: #2e2a2b;\n min-height: 48px;\n transition: border-color 0.2s ease-out;\n flex: 0 0 auto;\n }\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .counter-wrapper:hover {\n border-color: rgba(247, 197, 16, 0.4);\n }\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .counter-btn {\n width: 44px;\n height: 44px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: none;\n border: none;\n color: #F7C510;\n font-size: 1.25rem;\n font-weight: 700;\n cursor: pointer;\n transition: background-color 0.15s ease-out;\n flex-shrink: 0;\n font-family: Poppins, sans-serif;\n }\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .counter-btn:hover {\n background-color: rgba(247, 197, 16, 0.1);\n }\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .counter-btn:focus-visible {\n outline: 2px solid #F7C510;\n outline-offset: -2px;\n }\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .counter-btn:disabled {\n color: rgba(238, 237, 235, 0.2);\n cursor: default;\n }\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .counter-value {\n min-width: 48px;\n text-align: center;\n font-family: Poppins, sans-serif;\n font-weight: 600;\n font-size: 0.95rem;\n color: #EEEDEB;\n user-select: none;\n }\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .counter-label {\n padding-right: 1rem;\n font-family: Poppins, sans-serif;\n font-size: 0.8rem;\n color: rgba(238, 237, 235, 0.5);\n white-space: nowrap;\n }\n\n /* ── Field Label ── */\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .field-label {\n display: block;\n font-family: Poppins, sans-serif;\n font-size: 0.75rem;\n font-weight: 500;\n color: rgba(238, 237, 235, 0.5);\n margin-bottom: 0.4rem;\n padding-left: 1.25rem;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n }\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .field-group {\n flex: 1 1 180px;\n }\n\n /* ── Arrow Divider ── */\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .arrow-divider {\n display: flex;\n align-items: center;\n justify-content: center;\n flex: 0 0 40px;\n color: #F7C510;\n font-size: 1.3rem;\n }\n\n /* ── Step Title ── */\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .step-title {\n font-family: Poppins, sans-serif;\n font-weight: 600;\n font-size: 0.95rem;\n color: #F7C510;\n margin-bottom: 1.25rem;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n }\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .step-title-icon {\n font-size: 1.1rem;\n }\n\n /* ── Buttons Row ── */\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .btn-row {\n display: flex;\n gap: 0.75rem;\n flex-wrap: wrap;\n margin-top: 1.5rem;\n }\n\n /* ── CTA Button ── */\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .cta-book {\n padding: 0.85rem 2rem;\n background: linear-gradient(135deg, #F7C510 0%, #e5b60e 100%);\n color: #231F20;\n border: none;\n border-radius: 50px;\n font-family: Poppins, sans-serif;\n font-weight: 700;\n font-size: 1rem;\n cursor: pointer;\n transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;\n white-space: nowrap;\n min-height: 48px;\n flex: 0 0 auto;\n letter-spacing: 0.02em;\n text-transform: uppercase;\n }\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .cta-book:hover {\n transform: scale(1.04);\n box-shadow: 0 6px 20px rgba(247, 197, 16, 0.35);\n }\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .cta-book:active {\n transform: scale(0.98);\n }\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .cta-book:focus-visible {\n outline: 2px solid #EEEDEB;\n outline-offset: 3px;\n }\n\n /* ── Back Button ── */\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .btn-back {\n padding: 0.85rem 1.75rem;\n background: transparent;\n color: #EEEDEB;\n border: 2px solid rgba(238, 237, 235, 0.2);\n border-radius: 50px;\n font-family: Poppins, sans-serif;\n font-weight: 600;\n font-size: 0.9rem;\n cursor: pointer;\n transition: border-color 0.2s ease-out, color 0.2s ease-out, transform 0.2s ease-out;\n white-space: nowrap;\n min-height: 48px;\n flex: 0 0 auto;\n }\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .btn-back:hover {\n border-color: rgba(247, 197, 16, 0.5);\n color: #F7C510;\n transform: scale(1.02);\n }\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .btn-back:focus-visible {\n outline: 2px solid #F7C510;\n outline-offset: 3px;\n }\n\n /* ── Hint Text ── */\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .hint-text {\n color: rgba(238, 237, 235, 0.4);\n font-family: Poppins, sans-serif;\n font-size: 0.75rem;\n margin-left: auto;\n white-space: nowrap;\n }\n\n /* ── Success Message ── */\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .success-panel {\n display: none;\n text-align: center;\n padding: 2rem 1rem;\n }\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .success-panel.active {\n display: block;\n animation: wswFadeIn 0.35s ease-out forwards;\n opacity: 0;\n transform: translateY(12px);\n }\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .success-icon {\n font-size: 3rem;\n display: block;\n margin-bottom: 1rem;\n }\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .success-heading {\n font-family: Poppins, sans-serif;\n font-weight: 700;\n font-size: 1.25rem;\n color: #F7C510;\n margin-bottom: 0.5rem;\n }\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .success-text {\n font-family: Poppins, sans-serif;\n font-size: 0.9rem;\n color: rgba(238, 237, 235, 0.7);\n line-height: 1.5;\n max-width: 480px;\n margin: 0 auto;\n }\n\n /* ── Reduced Motion ── */\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f *,\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f *::before,\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f *::after {\n transition-duration: 0.01ms !important;\n animation-duration: 0.01ms !important;\n }\n }\n\n /* ── Responsive ── */\n @media (max-width: 768px) {\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f {\n padding: 1.5rem 1rem;\n border-radius: 12px;\n }\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .booking-row,\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .booking-row-bottom {\n flex-direction: column;\n align-items: stretch;\n }\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .dropdown-wrapper {\n width: 100%;\n }\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .dropdown-toggle {\n width: 100%;\n justify-content: space-between;\n }\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .dropdown-menu {\n width: 100%;\n }\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .direction-group {\n width: 100%;\n }\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .direction-btn {\n flex: 1;\n text-align: center;\n }\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .arrow-divider {\n transform: rotate(90deg);\n flex: 0 0 auto;\n align-self: center;\n }\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .input-wrapper,\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .field-group {\n flex: 1 1 auto;\n width: 100%;\n }\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .cta-book,\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .btn-back {\n width: 100%;\n }\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .hint-text {\n margin-left: 0;\n text-align: center;\n white-space: normal;\n }\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .counter-wrapper {\n width: 100%;\n justify-content: center;\n }\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .btn-row {\n flex-direction: column;\n }\n #wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f .step-line {\n width: 32px;\n }\n }\n</style>\n\n<div id=\"wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f\">\n\n <!-- Step Indicator -->\n <div class=\"step-indicator\">\n <span class=\"step-dot active\" data-step=\"1\">1</span>\n <span class=\"step-line\"></span>\n <span class=\"step-dot\" data-step=\"2\">2</span>\n <span class=\"step-line\"></span>\n <span class=\"step-dot\" data-step=\"3\">3</span>\n </div>\n\n <!-- ═══ STEP 1: Route ═══ -->\n <div class=\"step-panel active\" data-panel=\"1\">\n <span class=\"step-title\"><span class=\"step-title-icon\">📍</span> Fahrt &amp; Route</span>\n\n <div class=\"booking-row\">\n <div class=\"dropdown-wrapper\" aria-haspopup=\"listbox\">\n <button class=\"dropdown-toggle\" type=\"button\" aria-expanded=\"false\" aria-label=\"Transfer auswählen\">\n <span class=\"dropdown-label\">Transfer wählen</span>\n <span class=\"dropdown-arrow\"></span>\n </button>\n <div class=\"dropdown-menu\" role=\"listbox\">\n <button class=\"dropdown-item\" role=\"option\" data-value=\"Privatfahrt\">Privatfahrt</button>\n <button class=\"dropdown-item\" role=\"option\" data-value=\"Flughafentransfer\">Flughafentransfer</button>\n <button class=\"dropdown-item\" role=\"option\" data-value=\"Seniorentaxi\">Seniorentaxi</button>\n <button class=\"dropdown-item\" role=\"option\" data-value=\"Businessfahrt\">Businessfahrt</button>\n </div>\n </div>\n\n <div class=\"direction-group\" role=\"radiogroup\" aria-label=\"Fahrtrichtung\">\n <button class=\"direction-btn active\" role=\"radio\" aria-checked=\"true\" data-dir=\"Hinfahrt\">Hinfahrt</button>\n <button class=\"direction-btn\" role=\"radio\" aria-checked=\"false\" data-dir=\"Hin- und Rückfahrt\">Hin- und Rückfahrt</button>\n </div>\n\n <span class=\"hint-text\">* Mit Verwendung stimmen Sie der Nutzung von Google Maps zu.</span>\n </div>\n\n <div class=\"booking-row-bottom\">\n <div class=\"input-wrapper\">\n <span class=\"input-icon\">●</span>\n <input type=\"text\" class=\"form-input\" id=\"wsw-from\" placeholder=\"Von: Adresse eingeben\" aria-label=\"Abholadresse eingeben\">\n </div>\n\n <div class=\"arrow-divider\" aria-hidden=\"true\">➜</div>\n\n <div class=\"input-wrapper\">\n <span class=\"input-icon\" style=\"color: #EEEDEB;\">●</span>\n <input type=\"text\" class=\"form-input\" id=\"wsw-to\" placeholder=\"Nach: Adresse eingeben\" aria-label=\"Zieladresse eingeben\">\n </div>\n\n <button class=\"cta-book\" type=\"button\" data-action=\"next\" data-to=\"2\">Weiter</button>\n </div>\n </div>\n\n <!-- ═══ STEP 2: Date / Time / Persons ═══ -->\n <div class=\"step-panel\" data-panel=\"2\">\n <span class=\"step-title\"><span class=\"step-title-icon\">📅</span> Datum, Uhrzeit &amp; Personen</span>\n\n <div class=\"booking-row\">\n <div class=\"field-group\">\n <label class=\"field-label\" for=\"wsw-date\">Datum</label>\n <input type=\"date\" id=\"wsw-date\" class=\"form-input no-icon\" aria-label=\"Datum auswählen\">\n </div>\n\n <div class=\"field-group\">\n <label class=\"field-label\" for=\"wsw-time\">Uhrzeit</label>\n <input type=\"time\" id=\"wsw-time\" class=\"form-input no-icon\" aria-label=\"Uhrzeit auswählen\">\n </div>\n\n <div class=\"field-group\" style=\"flex: 0 0 auto;\">\n <label class=\"field-label\">Personen</label>\n <div class=\"counter-wrapper\">\n <button class=\"counter-btn\" type=\"button\" data-counter=\"minus\" aria-label=\"Person entfernen\" disabled=\"\">−</button>\n <span class=\"counter-value\" aria-live=\"polite\">1</span>\n <span class=\"counter-label\">Pers.</span>\n <button class=\"counter-btn\" type=\"button\" data-counter=\"plus\" aria-label=\"Person hinzufügen\">+</button>\n </div>\n </div>\n </div>\n\n <div class=\"btn-row\">\n <button class=\"btn-back\" type=\"button\" data-action=\"prev\" data-to=\"1\">← Zurück</button>\n <button class=\"cta-book\" type=\"button\" data-action=\"next\" data-to=\"3\">Weiter</button>\n </div>\n </div>\n\n <!-- ═══ STEP 3: Contact Details ═══ -->\n <div class=\"step-panel\" data-panel=\"3\">\n <span class=\"step-title\"><span class=\"step-title-icon\">👤</span> Kontaktdaten</span>\n\n <div class=\"booking-row\">\n <div class=\"field-group\" style=\"flex: 0 0 140px;\">\n <label class=\"field-label\" for=\"wsw-anrede\">Anrede</label>\n <select id=\"wsw-anrede\" class=\"form-select\" aria-label=\"Anrede auswählen\">\n <option value=\"\" disabled=\"\" selected=\"\">Bitte wählen</option>\n <option value=\"Herr\">Herr</option>\n <option value=\"Frau\">Frau</option>\n <option value=\"Divers\">Divers</option>\n </select>\n </div>\n\n <div class=\"field-group\">\n <label class=\"field-label\" for=\"wsw-vorname\">Vorname</label>\n <input type=\"text\" id=\"wsw-vorname\" class=\"form-input no-icon\" placeholder=\"Vorname\" aria-label=\"Vorname eingeben\">\n </div>\n\n <div class=\"field-group\">\n <label class=\"field-label\" for=\"wsw-nachname\">Nachname</label>\n <input type=\"text\" id=\"wsw-nachname\" class=\"form-input no-icon\" placeholder=\"Nachname\" aria-label=\"Nachname eingeben\">\n </div>\n </div>\n\n <div class=\"booking-row\">\n <div class=\"field-group\">\n <label class=\"field-label\" for=\"wsw-telefon\">Telefonnummer</label>\n <input type=\"tel\" id=\"wsw-telefon\" class=\"form-input no-icon\" placeholder=\"+43 ...\" aria-label=\"Telefonnummer eingeben\">\n </div>\n </div>\n\n <div class=\"btn-row\">\n <button class=\"btn-back\" type=\"button\" data-action=\"prev\" data-to=\"2\">← Zurück</button>\n <button class=\"cta-book\" type=\"button\" data-action=\"submit\">Buchung absenden</button>\n </div>\n </div>\n\n <!-- ═══ SUCCESS MESSAGE ═══ -->\n <div class=\"success-panel\" data-panel=\"success\">\n <span class=\"success-icon\">✔️</span>\n <span class=\"success-heading\">Vielen Dank!</span>\n <span class=\"success-text\">Ihr E-Mail-Programm wurde geöffnet. Bitte senden Sie die vorausgefüllte E-Mail ab, um Ihre Buchungsanfrage an x-taxi zu übermitteln.</span>\n </div>\n\n</div>\n\n<script>\n(function() {\n 'use strict';\n\n var el = document.getElementById('wsw-snippet-0e145bfa-a7fd-42cd-881d-a7903008132f');\n if (!el) return;\n\n var currentStep = 1;\n var totalSteps = 3;\n\n var panels = el.querySelectorAll('.step-panel');\n var dots = el.querySelectorAll('.step-dot');\n var lines = el.querySelectorAll('.step-line');\n var successPanel = el.querySelector('.success-panel');\n\n /* ── Navigate Steps ── */\n function goToStep(step) {\n if (step < 1 || step > totalSteps) return;\n\n panels.forEach(function(p) { p.classList.remove('active'); });\n successPanel.classList.remove('active');\n\n var target = el.querySelector('.step-panel[data-panel=\"' + step + '\"]');\n if (target) target.classList.add('active');\n\n dots.forEach(function(d, i) {\n var s = i + 1;\n d.classList.remove('active', 'completed');\n if (s === step) d.classList.add('active');\n else if (s < step) d.classList.add('completed');\n });\n\n lines.forEach(function(l, i) {\n l.classList.remove('completed');\n if (i < step - 1) l.classList.add('completed');\n });\n\n currentStep = step;\n }\n\n /* ── Collect Form Data ── */\n function collectData() {\n var activeItem = el.querySelector('.dropdown-item.active');\n var transfer = activeItem ? activeItem.getAttribute('data-value') : 'Nicht gewählt';\n\n var activeDir = el.querySelector('.direction-btn.active');\n var direction = activeDir ? activeDir.getAttribute('data-dir') : 'Hinfahrt';\n\n var fromInput = el.querySelector('#wsw-from');\n var toInput = el.querySelector('#wsw-to');\n var fromAddr = fromInput ? fromInput.value.trim() : '';\n var toAddr = toInput ? toInput.value.trim() : '';\n\n var dateInput = el.querySelector('#wsw-date');\n var timeInput = el.querySelector('#wsw-time');\n var datum = dateInput ? dateInput.value : '';\n var uhrzeit = timeInput ? timeInput.value : '';\n\n var counterVal = el.querySelector('.counter-value');\n var personen = counterVal ? counterVal.textContent.trim() : '1';\n\n var anredeSelect = el.querySelector('#wsw-anrede');\n var anrede = anredeSelect ? anredeSelect.value : '';\n\n var vornameInput = el.querySelector('#wsw-vorname');\n var nachnameInput = el.querySelector('#wsw-nachname');\n var telefonInput = el.querySelector('#wsw-telefon');\n\n var vorname = vornameInput ? vornameInput.value.trim() : '';\n var nachname = nachnameInput ? nachnameInput.value.trim() : '';\n var telefon = telefonInput ? telefonInput.value.trim() : '';\n\n return {\n transfer: transfer,\n direction: direction,\n from: fromAddr || '–',\n to: toAddr || '–',\n datum: datum || '–',\n uhrzeit: uhrzeit || '–',\n personen: personen,\n anrede: anrede || '–',\n vorname: vorname || '–',\n nachname: nachname || '–',\n telefon: telefon || '–'\n };\n }\n\n /* ── Build mailto link ── */\n function sendBookingEmail() {\n var d = collectData();\n\n var subject = 'Buchungsanfrage – ' + d.transfer + ' – ' + d.anrede + ' ' + d.vorname + ' ' + d.nachname;\n\n var body = 'BUCHUNGSANFRAGE x-taxi\\n'\n + '========================\\n\\n'\n + 'FAHRTDETAILS\\n'\n + ' Transferart: ' + d.transfer + '\\n'\n + ' Fahrtrichtung: ' + d.direction + '\\n'\n + ' Von: ' + d.from + '\\n'\n + ' Nach: ' + d.to + '\\n\\n'\n + 'TERMIN\\n'\n + ' Datum: ' + d.datum + '\\n'\n + ' Uhrzeit: ' + d.uhrzeit + '\\n'\n + ' Personen: ' + d.personen + '\\n\\n'\n + 'KONTAKTDATEN\\n'\n + ' Anrede: ' + d.anrede + '\\n'\n + ' Vorname: ' + d.vorname + '\\n'\n + ' Nachname: ' + d.nachname + '\\n'\n + ' Telefon: ' + d.telefon + '\\n\\n'\n + '========================\\n'\n + 'Gesendet über das Online-Buchungsformular auf x-taxi.at';\n\n var mailto = 'mailto:info@x-taxi.at'\n + '?subject=' + encodeURIComponent(subject)\n + '&body=' + encodeURIComponent(body);\n\n var link = document.createElement('a');\n link.href = mailto;\n link.style.display = 'none';\n el.appendChild(link);\n link.click();\n el.removeChild(link);\n\n /* Show success state */\n panels.forEach(function(p) { p.classList.remove('active'); });\n successPanel.classList.add('active');\n\n dots.forEach(function(d) {\n d.classList.remove('active');\n d.classList.add('completed');\n });\n lines.forEach(function(l) {\n l.classList.add('completed');\n });\n }\n\n /* ── Navigation Buttons ── */\n el.addEventListener('click', function(e) {\n var btn = e.target.closest('[data-action]');\n if (!btn) return;\n\n var action = btn.getAttribute('data-action');\n\n if (action === 'next') {\n var to = parseInt(btn.getAttribute('data-to'), 10);\n goToStep(to);\n } else if (action === 'prev') {\n var to2 = parseInt(btn.getAttribute('data-to'), 10);\n goToStep(to2);\n } else if (action === 'submit') {\n sendBookingEmail();\n }\n });\n\n /* ── Dropdown ── */\n var dropdownWrapper = el.querySelector('.dropdown-wrapper');\n var dropdownToggle = el.querySelector('.dropdown-toggle');\n var dropdownLabel = el.querySelector('.dropdown-label');\n var dropdownItems = el.querySelectorAll('.dropdown-item');\n\n dropdownToggle.addEventListener('click', function() {\n var isOpen = dropdownWrapper.classList.toggle('open');\n dropdownToggle.setAttribute('aria-expanded', isOpen);\n });\n\n dropdownItems.forEach(function(item) {\n item.addEventListener('click', function() {\n dropdownItems.forEach(function(i) { i.classList.remove('active'); });\n item.classList.add('active');\n dropdownLabel.textContent = item.textContent;\n dropdownWrapper.classList.remove('open');\n dropdownToggle.setAttribute('aria-expanded', 'false');\n });\n });\n\n document.addEventListener('click', function(e) {\n if (!dropdownWrapper.contains(e.target)) {\n dropdownWrapper.classList.remove('open');\n dropdownToggle.setAttribute('aria-expanded', 'false');\n }\n });\n\n dropdownWrapper.addEventListener('keydown', function(e) {\n if (e.key === 'Escape') {\n dropdownWrapper.classList.remove('open');\n dropdownToggle.setAttribute('aria-expanded', 'false');\n dropdownToggle.focus();\n }\n });\n\n /* ── Direction Toggle ── */\n var dirBtns = el.querySelectorAll('.direction-btn');\n dirBtns.forEach(function(btn) {\n btn.addEventListener('click', function() {\n dirBtns.forEach(function(b) {\n b.classList.remove('active');\n b.setAttribute('aria-checked', 'false');\n });\n btn.classList.add('active');\n btn.setAttribute('aria-checked', 'true');\n });\n });\n\n /* ── Person Counter ── */\n var counterValue = el.querySelector('.counter-value');\n var minusBtn = el.querySelector('[data-counter=\"minus\"]');\n var plusBtn = el.querySelector('[data-counter=\"plus\"]');\n var count = 1;\n var minCount = 1;\n var maxCount = 8;\n\n function updateCounter() {\n counterValue.textContent = count;\n minusBtn.disabled = count <= minCount;\n plusBtn.disabled = count >= maxCount;\n }\n\n minusBtn.addEventListener('click', function() {\n if (count > minCount) { count--; updateCounter(); }\n });\n\n plusBtn.addEventListener('click', function() {\n if (count < maxCount) { count++; updateCounter(); }\n });\n\n})();\n</script>","summary":null,"version":3,"inserted_version":3,"total_cost":1.5860941250000002,"total_messages_sent":3,"summarized_at_total":0}