{"id":8511,"date":"2026-03-06T10:12:27","date_gmt":"2026-03-06T09:12:27","guid":{"rendered":"https:\/\/villaroberta.hr\/buchung\/"},"modified":"2026-04-24T10:52:58","modified_gmt":"2026-04-24T09:52:58","slug":"buchung","status":"publish","type":"page","link":"https:\/\/villaroberta.hr\/de\/buchung\/","title":{"rendered":"Buchung"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"8511\" class=\"elementor elementor-8511 elementor-7923\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-94c013a e-flex e-con-boxed e-con e-parent\" data-id=\"94c013a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-51faae1 elementor-widget elementor-widget-shortcode\" data-id=\"51faae1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">        <div id=\"vb-booking-app\" class=\"vb-booking-app\" data-nonce=\"6d37577c69\">\n\n            <!-- Header -->\n            <div class=\"vb-app-header\">\n                <h2 class=\"vb-app-title\">Villa Buchungskalender<\/h2>\n                <p class=\"vb-app-subtitle\">W\u00e4hlen Sie Ihren Aufenthalt \u2014 Samstag bis Samstag<\/p>\n            <\/div>\n\n            <!-- Legend -->\n            <div class=\"vb-legend-bar\">\n                <span class=\"vb-legend-item\"><span class=\"vb-leg-dot vb-leg-available\"><\/span>Verf\u00fcgbar<\/span>\n                <span class=\"vb-legend-item\"><span class=\"vb-leg-dot vb-leg-booked\"><\/span>Nicht verf\u00fcgbar<\/span>\n                <span class=\"vb-legend-item\"><span class=\"vb-leg-dot vb-leg-selected\"><\/span>Ihre Auswahl<\/span>\n                <span class=\"vb-legend-item\"><span class=\"vb-leg-dot vb-leg-saturday\"><\/span>Samstage (An-\/Abreise)<\/span>\n            <\/div>\n\n            <!-- Instruction Bar -->\n            <div class=\"vb-instruction-bar\">\n                <div class=\"vb-instruction-icon\">\n                    <svg width=\"20\" height=\"20\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\/><\/svg>\n                <\/div>\n                <span id=\"vb-instruction-text\">Klicken Sie auf einen Samstag, um Ihr Anreisedatum festzulegen<\/span>\n            <\/div>\n\n            <!-- Calendar Navigation -->\n            <div class=\"vb-cal-nav-bar\">\n                <button id=\"vb-pub-prev\" class=\"vb-pub-nav-btn\" aria-label=\"Vorheriger Monat\">\n                    <svg width=\"20\" height=\"20\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 19l-7-7 7-7\"\/><\/svg>\n                <\/button>\n                <div id=\"vb-pub-months-container\" class=\"vb-pub-months-container\">\n                    <div id=\"vb-pub-months\" class=\"vb-pub-months\"><\/div>\n                <\/div>\n                <button id=\"vb-pub-next\" class=\"vb-pub-nav-btn\" aria-label=\"N\u00e4chster Monat\">\n                    <svg width=\"20\" height=\"20\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"\/><\/svg>\n                <\/button>\n            <\/div>\n\n            <!-- Loading overlay -->\n            <div id=\"vb-loading\" class=\"vb-loading-overlay\" style=\"display:none;\">\n                <div class=\"vb-spinner\"><\/div>\n            <\/div>\n\n            <!-- Selection Summary Bar -->\n            <div id=\"vb-selection-bar\" class=\"vb-selection-bar\" style=\"display:none;\">\n                <div class=\"vb-selection-info\">\n                    <div class=\"vb-selection-dates\">\n                        <div class=\"vb-sel-date\">\n                            <span class=\"vb-sel-label\">Anreise<\/span>\n                            <span id=\"vb-sel-start\" class=\"vb-sel-value\">\u2014<\/span>\n                        <\/div>\n                        <div class=\"vb-sel-arrow\">\u2192<\/div>\n                        <div class=\"vb-sel-date\">\n                            <span class=\"vb-sel-label\">Abreise<\/span>\n                            <span id=\"vb-sel-end\" class=\"vb-sel-value\">\u2014<\/span>\n                        <\/div>\n                        <div class=\"vb-sel-date\">\n                            <span class=\"vb-sel-label\">Aufenthaltsdauer<\/span>\n                            <span id=\"vb-sel-weeks\" class=\"vb-sel-value\">\u2014<\/span>\n                        <\/div>\n                    <\/div>\n                    <div id=\"vb-sel-price\" class=\"vb-sel-price\"><\/div>\n                <\/div>\n                <div class=\"vb-selection-actions\">\n                    <button id=\"vb-clear-selection\" class=\"vb-btn-outline\">\n                        <svg width=\"16\" height=\"16\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"\/><\/svg>\n                        L\u00f6schen                    <\/button>\n                    <button id=\"vb-open-form-btn\" class=\"vb-btn-primary\">\n                        <svg width=\"16\" height=\"16\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z\"\/><\/svg>\n                        Anfragen                    <\/button>\n                <\/div>\n            <\/div>\n\n            <!-- Booking Modal -->\n            <div id=\"vb-booking-modal\" class=\"vb-modal\" style=\"display:none;\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"vb-modal-heading\">\n                <div class=\"vb-modal-backdrop\"><\/div>\n                <div class=\"vb-modal-outer\">\n                    <!-- Close button lives here, OUTSIDE the scrollable inner wrap -->\n                    <div class=\"vb-modal-topbar\">\n                        <button class=\"vb-modal-close-btn\" id=\"vb-close-modal\" aria-label=\"Schlie\u00dfen\">\n                            <svg width=\"20\" height=\"20\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" d=\"M6 18L18 6M6 6l12 12\"\/><\/svg>\n                        <\/button>\n                    <\/div>\n                    <div class=\"vb-modal-wrap\">\n\n                    <div id=\"vb-form-container\">\n                        <div class=\"vb-modal-hero\">\n                            <svg class=\"vb-modal-icon\" width=\"40\" height=\"40\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6\"\/><\/svg>\n                            <h2 id=\"vb-modal-heading\">Buchung anfragen<\/h2>\n                            <p>F\u00fcllen Sie Ihre Daten aus und wir melden uns in K\u00fcrze bei Ihnen.<\/p>\n                        <\/div>\n\n                        <div class=\"vb-booking-summary-box\">\n                            <div class=\"vb-summary-row\">\n                                <span>Anreise<\/span>\n                                <strong id=\"vb-form-start\"><\/strong>\n                            <\/div>\n                            <div class=\"vb-summary-row\">\n                                <span>Abreise<\/span>\n                                <strong id=\"vb-form-end\"><\/strong>\n                            <\/div>\n                            <div class=\"vb-summary-row\">\n                                <span>Aufenthaltsdauer<\/span>\n                                <strong id=\"vb-form-weeks\"><\/strong>\n                            <\/div>\n                            <div class=\"vb-summary-row vb-summary-total\" id=\"vb-form-price-row\" style=\"display:none;\">\n                                <span>Gesamtpreis<\/span>\n                                <strong id=\"vb-form-price\" class=\"vb-total-price\"><\/strong>\n                            <\/div>\n                        <\/div>\n\n                        <div class=\"vb-form-fields\">\n                            <div class=\"vb-field-row vb-field-2col\">\n                                <div class=\"vb-field-group\">\n                                    <label for=\"vb-f-firstname\">Vorname <span class=\"vb-req\">*<\/span><\/label>\n                                    <input type=\"text\" id=\"vb-f-firstname\" placeholder=\"Max\" required>\n                                <\/div>\n                                <div class=\"vb-field-group\">\n                                    <label for=\"vb-f-lastname\">Nachname <span class=\"vb-req\">*<\/span><\/label>\n                                    <input type=\"text\" id=\"vb-f-lastname\" placeholder=\"M\u00fcller\" required>\n                                <\/div>\n                            <\/div>\n                            <div class=\"vb-field-row vb-field-2col\">\n                                <div class=\"vb-field-group\">\n                                    <label for=\"vb-f-email\">E-Mail-Adresse <span class=\"vb-req\">*<\/span><\/label>\n                                    <input type=\"email\" id=\"vb-f-email\" placeholder=\"max@beispiel.de\" required>\n                                <\/div>\n                                <div class=\"vb-field-group\">\n                                    <label for=\"vb-f-phone\">Telefonnummer<\/label>\n                                    <input type=\"tel\" id=\"vb-f-phone\" placeholder=\"+385 91 234 5678\">\n                                <\/div>\n                            <\/div>\n                            <div class=\"vb-field-row\">\n                                <div class=\"vb-field-group\">\n                                    <label for=\"vb-f-message\">Nachricht \/ Besondere W\u00fcnsche<\/label>\n                                    <textarea id=\"vb-f-message\" rows=\"3\" maxlength=\"2000\" placeholder=\"Besondere W\u00fcnsche, Anzahl der G\u00e4ste, Fragen\u2026\"><\/textarea>\n                                    <div class=\"vb-char-counter\"><span id=\"vb-f-message-count\">0<\/span> \/ 2000<\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n\n                        <div id=\"vb-form-error\" class=\"vb-form-error\" style=\"display:none;\"><\/div>\n\n                        <div class=\"vb-form-footer\">\n                            <p class=\"vb-privacy-note\">\n                                <svg width=\"14\" height=\"14\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z\"\/><\/svg>\n                                Ihre Daten sind sicher und werden nicht an Dritte weitergegeben.                            <\/p>\n                            <button id=\"vb-submit-booking\" class=\"vb-btn-primary vb-btn-submit\">\n                                <svg width=\"18\" height=\"18\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z\"\/><\/svg>\n                                Buchungsanfrage senden                            <\/button>\n                        <\/div>\n                    <\/div>\n\n                    <!-- Success State -->\n                    <div id=\"vb-success-container\" style=\"display:none;\" class=\"vb-success-state\">\n                        <div class=\"vb-success-icon\">\n                            <svg width=\"60\" height=\"60\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\"\/><\/svg>\n                        <\/div>\n                        <h3>Anfrage gesendet!<\/h3>\n                        <p id=\"vb-success-message\">Vielen Dank! Ihre Buchungsanfrage wurde gesendet. Wir werden uns in K\u00fcrze bei Ihnen melden.<\/p>\n                        <button id=\"vb-close-success\" class=\"vb-btn-outline\">Schlie\u00dfen<\/button>\n                    <\/div>\n                <\/div><!-- \/.vb-modal-wrap -->\n                <\/div><!-- \/.vb-modal-outer -->\n            <\/div>\n\n        <\/div>\n        <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-8511","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/villaroberta.hr\/de\/wp-json\/wp\/v2\/pages\/8511","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/villaroberta.hr\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/villaroberta.hr\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/villaroberta.hr\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/villaroberta.hr\/de\/wp-json\/wp\/v2\/comments?post=8511"}],"version-history":[{"count":3,"href":"https:\/\/villaroberta.hr\/de\/wp-json\/wp\/v2\/pages\/8511\/revisions"}],"predecessor-version":[{"id":8634,"href":"https:\/\/villaroberta.hr\/de\/wp-json\/wp\/v2\/pages\/8511\/revisions\/8634"}],"wp:attachment":[{"href":"https:\/\/villaroberta.hr\/de\/wp-json\/wp\/v2\/media?parent=8511"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}