{"id":8,"date":"2024-01-09T12:38:13","date_gmt":"2024-01-09T12:38:13","guid":{"rendered":"https:\/\/annamichel.weddingessentials.pro\/?page_id=8"},"modified":"2024-01-09T22:10:52","modified_gmt":"2024-01-09T22:10:52","slug":"wedding-page","status":"publish","type":"page","link":"https:\/\/annamichel.weddingessentials.pro\/","title":{"rendered":"Wedding Page"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"8\" class=\"elementor elementor-8\">\n\t\t\t\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-3b3ee1ef elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no\" data-id=\"3b3ee1ef\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-50e5ed80\" data-id=\"50e5ed80\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-72f4b687 elementor-widget elementor-widget-image\" data-id=\"72f4b687\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.18.0 - 20-12-2023 *\/\n.elementor-widget-image{text-align:center}.elementor-widget-image a{display:inline-block}.elementor-widget-image a img[src$=\".svg\"]{width:48px}.elementor-widget-image img{vertical-align:middle;display:inline-block}<\/style>\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"800\" height=\"800\" src=\"https:\/\/annamichel.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-1-11-1024x1024.png\" class=\"attachment-large size-large wp-image-40\" alt=\"\" srcset=\"https:\/\/annamichel.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-1-11-1024x1024.png 1024w, https:\/\/annamichel.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-1-11-300x300.png 300w, https:\/\/annamichel.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-1-11-150x150.png 150w, https:\/\/annamichel.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-1-11-768x768.png 768w, https:\/\/annamichel.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-1-11-1536x1536.png 1536w, https:\/\/annamichel.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-1-11.png 2000w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5fb4f706 elementor-widget elementor-widget-text-editor\" data-id=\"5fb4f706\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.18.0 - 20-12-2023 *\/\n.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#69727d;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#69727d;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}<\/style>\t\t\t\t<p>Einladung zu unserer Hochzeitsfeier<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-463983d0 elementor-widget elementor-widget-image\" data-id=\"463983d0\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"800\" height=\"450\" src=\"https:\/\/annamichel.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-29-1024x576.png\" class=\"attachment-large size-large wp-image-38\" alt=\"\" srcset=\"https:\/\/annamichel.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-29-1024x576.png 1024w, https:\/\/annamichel.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-29-300x169.png 300w, https:\/\/annamichel.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-29-768x432.png 768w, https:\/\/annamichel.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-29-1536x864.png 1536w, https:\/\/annamichel.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-29.png 1920w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-37cffe18 elementor-widget elementor-widget-text-editor\" data-id=\"37cffe18\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p class=\"_04xlpA direction-ltr align-center para-style-body\">CFK<br \/>Zum Nassenwald 1<br \/>66583 Spiesen-Elversberg<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-13841851 elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no\" data-id=\"13841851\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-66bbaf59\" data-id=\"66bbaf59\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-434f2a21 elementor-widget elementor-widget-image\" data-id=\"434f2a21\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"800\" height=\"450\" src=\"https:\/\/annamichel.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-32-1024x576.png\" class=\"attachment-large size-large wp-image-42\" alt=\"\" srcset=\"https:\/\/annamichel.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-32-1024x576.png 1024w, https:\/\/annamichel.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-32-300x169.png 300w, https:\/\/annamichel.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-32-768x432.png 768w, https:\/\/annamichel.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-32-1536x864.png 1536w, https:\/\/annamichel.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-32.png 1920w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-776d0b4 elementor-widget elementor-widget-text-editor\" data-id=\"776d0b4\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Details<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e1e5ca5 elementor-widget elementor-widget-text-editor\" data-id=\"e1e5ca5\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p class=\"_04xlpA direction-ltr align-center para-style-body\">Fahrdienst<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dafd1ef elementor-widget elementor-widget-text-editor\" data-id=\"dafd1ef\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Bei Bedarf k\u00f6nnt ihr unseren Shuttle-Service nutzen.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bae2e99 elementor-widget elementor-widget-text-editor\" data-id=\"bae2e99\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p class=\"_04xlpA direction-ltr align-center para-style-body\">Unterkunft<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8e323fe elementor-widget elementor-widget-text-editor\" data-id=\"8e323fe\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Bitte informiert uns bis zum 31.01.24, falls ihr eine \u00dcbernachtungsm\u00f6glichkeit ben\u00f6tigt.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9c29429 elementor-widget elementor-widget-text-editor\" data-id=\"9c29429\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p class=\"_04xlpA direction-ltr align-center para-style-body\">Gestaltung des Abends<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-20d55a2 elementor-widget elementor-widget-text-editor\" data-id=\"20d55a2\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Etwaige Programmpunkte koordinieren unsere Trauzeugen Stefanie Schneider, 0174\/6088398 und Markus Fillgraff, 0157\/78799463.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-df92a61 elementor-widget elementor-widget-text-editor\" data-id=\"df92a61\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p class=\"_04xlpA direction-ltr align-center para-style-body\">Geschenke<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f18b09b elementor-widget elementor-widget-text-editor\" data-id=\"f18b09b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Mir wolle noo Italien g\u00e4\u00e4r, wenn das nur nit so deier w\u00e4r. Drum bitte mir eich, uffzubessere unser Reisekass, dann macht der Urlaub doppelt Spass!<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8a14a43 elementor-widget elementor-widget-menu-anchor\" data-id=\"8a14a43\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.18.0 - 20-12-2023 *\/\nbody.elementor-page .elementor-widget-menu-anchor{margin-bottom:0}<\/style>\t\t<div id=\"rsvp\" class=\"elementor-menu-anchor\"><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2d12d47b elementor-widget elementor-widget-image\" data-id=\"2d12d47b\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"450\" src=\"https:\/\/annamichel.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-31-1024x576.png\" class=\"attachment-large size-large wp-image-41\" alt=\"\" srcset=\"https:\/\/annamichel.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-31-1024x576.png 1024w, https:\/\/annamichel.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-31-300x169.png 300w, https:\/\/annamichel.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-31-768x432.png 768w, https:\/\/annamichel.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-31-1536x864.png 1536w, https:\/\/annamichel.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-31.png 1920w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-543232da elementor-widget elementor-widget-text-editor\" data-id=\"543232da\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>RSVP<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-69b13846 elementor-widget elementor-widget-text-editor\" data-id=\"69b13846\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><strong>bis 29.02.24<\/strong><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2bdddbb1 elementor-widget elementor-widget-html\" data-id=\"2bdddbb1\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t  <!-- Initial Step -->\r\n  <div id=\"step-1\" class=\"step\">\r\n    <div class=\"acceptance-icons-container\">\r\n        <div class=\"acceptance-icons\" title=\"Accept\" onclick=\"toggleIcon('accept')\">\r\n            <div class=\"icon\" id='icon-accept'>\r\n                <img decoding=\"async\" src=\"https:\/\/annamichel.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/heart.png\">\r\n            <\/div>\r\n            <div class=\"acceptance-label\">ZUSAGE<\/div>\r\n        <\/div>\r\n        <div class=\"acceptance-icons\" title=\"Decline\" onclick=\"toggleIcon('deny')\">\r\n            <div class=\"icon\" id='icon-deny'>\r\n                <img decoding=\"async\" src=\"https:\/\/annamichel.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/broken-heart.png\">\r\n            <\/div>\r\n            <div class=\"acceptance-label\">ABSAGE<\/div>\r\n        <\/div>\r\n    <\/div>\r\n    <label for=\"name\">Name:<\/label>\r\n    <input type=\"text\" id=\"name\">\r\n    <label for=\"guests\">Anzahl der G\u00e4ste:<\/label>\r\n    <input type=\"number\" id=\"guests\" min=\"1\" value=\"1\">\r\n    <div id=\"error-message\" style=\"color: red;\"><\/div>\r\n    <div class=\"button-container\">\r\n        <button class=\"nextPrev-btn\" onclick=\"changeStep(1, 2)\">WEITER<\/button>\r\n    <\/div>\r\n<\/div>\r\n\r\n  <!-- Guest Step -->\r\n<div id=\"step-2\" class=\"step\" style=\"display: none;\">\r\n    <div id=\"guestsInfo\"><\/div>\r\n    <div id=\"error-message\" style=\"color: red;\"><\/div>\r\n    <div class=\"button-container\">\r\n        <button class=\"nextPrev-btn\" onclick=\"changeStep(2, 1)\">ZUR\u00dcCK<\/button>\r\n        <button class=\"nextPrev-btn\" onclick=\"changeStep(2, 3)\">WEITER<\/button>\r\n    <\/div>\r\n<\/div>\r\n\r\n  <!-- Review Step -->\r\n<div id=\"step-3\" class=\"step\" style=\"display: none;\">\r\n    <div id=\"review\"><\/div>\r\n    <div id=\"error-message\" style=\"color: red;\"><\/div>\r\n    <div class=\"button-container\">\r\n        <button class=\"nextPrev-btn\" onclick=\"changeStep(3, 2)\">ZUR\u00dcCK<\/button>\r\n        <button id=\"submit-btn\" onclick=\"submitForm()\">ABSCHICKEN<\/button>\r\n    <\/div>\r\n<\/div>\r\n\r\n\r\n  <!-- Loading Step -->\r\n<div id=\"step-loading\" style=\"display: none;\">\r\n  <div class=\"loading\">\r\n    <div class=\"loader\"><\/div>\r\n  <\/div>\r\n  <p>L\u00e4dt, bitte warten...<\/p>\r\n<\/div>\r\n\r\n\r\n <!-- Step Success: Display when the data has been sent successfully -->\r\n<div id=\"step-success\" style=\"display: none;\">\r\n  <h1>Dankesch\u00f6n!<\/h1>\r\n  <p>Deine Informationen wurden erfolgreich \u00fcbermittelt.<\/p>\r\n<\/div>\r\n\r\n<!-- Step Failure: Display when there was an error sending the data -->\r\n<div id=\"step-failure\" style=\"display: none;\">\r\n  <h1>Oops!<\/h1>\r\n  <p>Es gab einen Fehler bei der \u00dcbertragung. Bitte pausiere deine AdBlocker und versuche es erneuert.<\/p>\r\n<\/div>\r\n\r\n\r\n<style>\r\n.button-container {\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    gap: 10px; \/* Adds space between buttons *\/\r\n    margin: 15px auto; \/* Centers the container horizontally *\/\r\n}\r\n\r\n.nextPrev-btn {\r\n    width:50%;\r\n    background-color: #8C987D;\r\n    border: none;\r\n    color: white;\r\n    font-family: 'Playfair Display';\r\n    border-radius: 24px;\r\n}\r\n\r\n#submit-btn {\r\n    width: 80%;\r\n    background-color: #8C987D;\r\n    border: none;\r\n    color: white;\r\n    font-weight: bold;\r\n    font-family: 'Playfair Display';\r\n    border-radius: 24px;\r\n}\r\n\r\n\r\n.acceptance-icons-container {\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    margin-bottom: 20px;\r\n}\r\n\r\n.acceptance-icons {\r\n    display: flex;\r\n    width: 50%;\r\n    justify-content: center;\r\n    align-items: center;\r\n    flex-direction: column;\r\n    margin-right: 20px;\r\n    cursor: pointer;\r\n}\r\n\r\n.icon {\r\n    width: 64px;\r\n}\r\n\r\n.icon img {\r\n    max-width: 100%;\r\n}\r\n\r\n.acceptance-label {\r\n    text-align: center;\r\n    font-family: 20px;\r\n    font-weight: bold;\r\n    margin-top: 10px;\r\n    font-family: 'Playfair Display';\r\n}\r\n\r\n.guest-collapsible {\r\n    cursor: pointer;\r\n    border: 1px solid #f1f1f1;\r\n    margin: 10px 0;\r\n}\r\n\r\n.guest-content {\r\n    display: block;\r\n    padding: 10px;\r\n}\r\n\r\n\/* Styles for all input fields *\/\r\n.guest-content input {\r\n    width: 100%;                  \/* Make input take the full width of the container *\/\r\n    padding: 10px 15px;           \/* Add padding for better appearance *\/\r\n    border: 1px solid #ccc;       \/* Define a border *\/\r\n    border-radius: 4px;           \/* Round the corners slightly *\/\r\n    font-size: 16px;              \/* Font size *\/\r\n    background-color: white;      \/* Background color *\/\r\n    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); \/* Add a subtle inner shadow for depth *\/\r\n    margin-bottom: 10px;          \/* Space between input fields *\/\r\n    appearance: none;             \/* Remove browser default styling *\/\r\n    -webkit-appearance: none;\r\n    -moz-appearance: none;\r\n    transition: border-color 0.2s; \/* Transition for a smooth effect on focus *\/\r\n    height: 40px;\r\n}\r\n\r\n\/* Hover state *\/\r\n.guest-content input:hover {\r\n    border-color: #aaa;           \/* Slightly darken border on hover *\/\r\n}\r\n\r\n\/* Focus state *\/\r\n.guest-content input:focus {\r\n    border-color: #007BFF;        \/* Highlight border color when input is focused *\/\r\n    outline: none;                \/* Remove the default browser outline *\/\r\n    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2), 0 0 5px rgba(0, 123, 255, 0.5); \/* Enhance shadow on focus *\/\r\n}\r\n\r\n\/* Remove the default clear 'x' in IE and Edge *\/\r\n.guest-content input::-ms-clear {\r\n    display: none;\r\n}\r\n\r\n\/* Remove default spin buttons on number inputs for Firefox *\/\r\n.guest-content input[type=\"number\"]::-webkit-inner-spin-button,\r\n.guest-content input[type=\"number\"]::-webkit-outer-spin-button {\r\n    appearance: none;\r\n    margin: 0;\r\n}\r\n\r\n\/* Remove default spin buttons on number inputs for Firefox *\/\r\n.guest-content input[type=\"number\"] {\r\n    -moz-appearance: textfield;\r\n}\r\n\r\n\/* Handle styles for date pickers in Webkit browsers *\/\r\n.guest-content input[type=\"date\"]::-webkit-calendar-picker-indicator {\r\n    background-color: rgba(0, 123, 255, 0.3);\r\n    border-radius: 4px;\r\n    padding: 5px;\r\n    color: transparent;         \/* Transparent color for the default icon *\/\r\n    cursor: pointer;            \/* Cursor style *\/\r\n}\r\n\r\n\r\n\/* CSS for reviewDiv *\/\r\n#review {\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center; \/* Centers items horizontally *\/\r\n    width: 100%;\r\n    max-width: 600px; \/* Limiting the maximum width to ensure readability *\/\r\n    margin: 20px auto; \/* 20px vertical margin and auto horizontal margin to center the div *\/\r\n    padding: 20px;\r\n    border: 1px solid #e0e0e0;\r\n    border-radius: 8px;\r\n    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); \/* Optional subtle shadow for some depth *\/\r\n    background-color: #ffffff;\r\n}\r\n\r\n#review p {\r\n    width: 100%;\r\n    text-align: left; \/* Content aligned to left within each paragraph *\/\r\n    margin-bottom: 15px;\r\n    font-size: 16px;\r\n    line-height: 1.5;\r\n}\r\n\r\n#review h3 {\r\n    width: 100%;\r\n    margin-bottom: 10px; \/* Add some spacing below the headers *\/\r\n    font-size: 18px; \/* Adjust the font size as needed *\/\r\n    \/* Additional styling for headers as needed *\/\r\n}\r\n\r\n#step-loading, #step-success, #step-failure {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center; \/* Centers items horizontally *\/\r\n  justify-content: center; \/* Centers items vertically *\/\r\n  width: 50%; \/* Set the width to 50% *\/\r\n  margin: 0 auto; \/* Center the div on the page *\/\r\n  padding: 20px;\r\n  text-align: center; \/* Center-align the text *\/\r\n}\r\n\r\n#step-success, #step-failure {\r\n  text-align: center;\r\n  color: #333;\r\n  font-size: 18px;\r\n}\r\n\r\n#step-success h1,\r\n#step-failure h1 {\r\n  color: #aec5b3;\r\n  font-size: 24px;\r\n}\r\n\r\n.loading {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n\r\n#step-loading p {\r\n    text-align: center;\r\n    margin-top: 25px;\r\n}\r\n\r\n.loader {\r\n  border: 5px solid #f3f3f3;\r\n  border-radius: 50%;\r\n  border-top: 5px solid #3498db;\r\n  width: 50px;\r\n  height: 50px;\r\n  animation: spin 2s linear infinite;\r\n}\r\n\r\n@keyframes spin {\r\n  0% { transform: rotate(0deg); }\r\n  100% { transform: rotate(360deg); }\r\n}\r\n\r\n\r\n.error-message {\r\n  font-size: 16px; \r\n  color: red; \r\n  margin-top: 10px; \r\n  font-weight: bold; \r\n  display: none; \r\n}\r\n\r\nlabel {\r\n    text-transform: uppercase;\r\n}\r\n<\/style>\r\n\r\n<script>\r\n    function toggleIcon(selectedIconType) {\r\n        \/\/ Elements for both icons\r\n        const acceptIcon = document.getElementById('icon-accept');\r\n        const denyIcon = document.getElementById('icon-deny');\r\n\r\n        \/\/ Determine which icon is clicked and which is the other icon\r\n        const clickedIcon = selectedIconType === 'accept' ? acceptIcon : denyIcon;\r\n        const otherIcon = selectedIconType === 'accept' ? denyIcon : acceptIcon;\r\n\r\n        \/\/ Toggle the 'selected' class and update the image for the clicked icon\r\n        if (clickedIcon.classList.contains('selected')) {\r\n            clickedIcon.classList.remove('selected');\r\n            clickedIcon.querySelector('img').src = clickedIcon.querySelector('img').src.replace('-selected1.png', '.png');\r\n        } else {\r\n            clickedIcon.classList.add('selected');\r\n            clickedIcon.querySelector('img').src = clickedIcon.querySelector('img').src.replace('.png', '-selected1.png');\r\n        }\r\n\r\n        \/\/ Ensure the other icon is not selected and its image is the default one\r\n        if (otherIcon.classList.contains('selected')) {\r\n            otherIcon.classList.remove('selected');\r\n            otherIcon.querySelector('img').src = otherIcon.querySelector('img').src.replace('-selected1.png', '.png');\r\n        }\r\n    } \r\n\r\n\r\n    function hideAllSteps() {\r\n        const stepDivs = document.querySelectorAll('[id^=\"step-\"]');\r\n        stepDivs.forEach(div => div.style.display = 'none');\r\n    }\r\n\r\n    function changeStep(currentStep, targetStep) {\r\n        const isAccepted = document.getElementById('icon-accept').classList.contains('selected');\r\n\r\n        if (targetStep === 1) {}\r\n\r\n        if (targetStep === 2) {\r\n            if(currentStep === 1) {\r\n                if (!verifyStep1()) {\r\n                    return;\r\n                }\r\n                else if (!isAccepted) {\r\n                    targetStep = 3;\r\n                }\r\n                else {\r\n                    createGuestInfo();\r\n                }\r\n            }\r\n\r\n            if(currentStep === 3) {\r\n                if (!isAccepted) {\r\n                    targetStep = 1;\r\n                }\r\n            }\r\n        }\r\n\r\n        if (targetStep === 3) {\r\n            if (!verifyStep2()) {\r\n                return;\r\n            }\r\n\r\n            createReview();\r\n        }\r\n\r\n        hideAllSteps();\r\n        document.getElementById('step-' + targetStep).style.display = 'block';\r\n    }\r\n\r\n\r\n    function createGuestInfo() {\r\n        const numberOfGuests = parseInt(document.getElementById('guests').value);\r\n        const guestsInfoDiv = document.getElementById('guestsInfo');\r\n        guestsInfoDiv.innerHTML = ''; \/\/ Clear previous content\r\n\r\n        \/\/ Create options for guests\r\n        for (let j = 1; j <= numberOfGuests; j++) {\r\n            guestsInfoDiv.innerHTML += `\r\n                <div class=\"guest\">\r\n                    <h3>Gast #${j}<\/h3>\r\n                    <label>Name:<\/label>\r\n                    <input type=\"text\" class=\"guest-name\" oninput=\"updateGuestTitle(this, 'Gast', ${j})\">\r\n\r\n                    <!-- New line for further guest options  -->\r\n                    <div class=\"guest-options\">\r\n                    <\/div>\r\n                <\/div>\r\n            `;\r\n        }\r\n    }\r\n\r\n\r\n    function updateGuestTitle(inputElement, guestType, guestNumber) {\r\n        const guestName = inputElement.value;\r\n        const guestSection = inputElement.closest('.guest');\r\n        const titleElement = guestSection.querySelector('h3');\r\n\r\n        titleElement.textContent = guestName || `${guestType} #${guestNumber}`;\r\n    }\r\n\r\n\r\n    function verifyStep1() {\r\n        const isAccepted = document.getElementById('icon-accept').classList.contains('selected');\r\n        const isDenied = document.getElementById('icon-deny').classList.contains('selected');\r\n        const numberOfGuests = parseInt(document.getElementById('guests').value);\r\n        const name = document.getElementById('name').value;\r\n        const step1Div = document.getElementById('step-1');\r\n        const errorMessageDiv = step1Div.querySelector('#error-message');\r\n        errorMessageDiv.textContent = '';\r\n\r\n        \/\/ Check if either accepted or denied is selected\r\n        if (!isAccepted && !isDenied) {\r\n            errorMessageDiv.style.display = 'block';\r\n            errorMessageDiv.textContent = 'Bitte w\u00e4hle entweder Zusagen oder Absagen aus';\r\n            return false; \/\/ Return false indicating verification failed\r\n        }\r\n\r\n        if(numberOfGuests < 1) {\r\n            errorMessageDiv.style.display = 'block';\r\n            errorMessageDiv.textContent = 'Die Zahl der G\u00e4ste muss mindestens 1 sein';\r\n            return false; \/\/ Return false indicating verification failed \r\n        }\r\n\r\n        if(!name) {\r\n            errorMessageDiv.style.display = 'block';\r\n            errorMessageDiv.textContent = 'Bitte f\u00fclle deinen Namen aus';\r\n            return false; \/\/ Return false indicating verification failed\r\n        }\r\n\r\n        errorMessageDiv.style.display = 'none';\r\n        errorMessageDiv.textContent = '';\r\n        return true; \/\/ Return true indicating successful verification\r\n    }\r\n\r\n\r\n    function verifyStep2() {\r\n    const step2Div = document.getElementById('step-2');\r\n    const errorMessageDiv = step2Div.querySelector('#error-message');\r\n    errorMessageDiv.textContent = '';\r\n    \r\n    \/\/ Function to check if input or select is empty\r\n    const isEmpty = (element) => {\r\n        if (element.tagName === 'INPUT') {\r\n            return element.value.trim() === '';\r\n        } else if (element.tagName === 'SELECT') {\r\n            return element.options[element.selectedIndex].disabled;\r\n        }\r\n        return false;\r\n    };\r\n    \r\n    \/\/ Check if any guest names are empty\r\n    const guestElements = document.querySelectorAll('.guest-name, .guest-options select');\r\n    for (const element of guestElements) {\r\n        if (isEmpty(element)) {\r\n            errorMessageDiv.style.display = 'block';\r\n            errorMessageDiv.textContent = 'Bitte gib alle Namen an';\r\n            return false; \/\/ Return false indicating verification failed\r\n        }\r\n    }\r\n\r\n    \/\/ If all inputs have values\r\n    errorMessageDiv.style.display = 'none';\r\n    errorMessageDiv.textContent = '';\r\n    return true; \/\/ Return true indicating successful verification\r\n}\r\n\r\n\r\n\r\n    function createReview() {\r\n        const isAccepted = document.getElementById('icon-accept').classList.contains('selected');\r\n        const acceptanceStatus = isAccepted ? 'Zusage' : 'Absage';\r\n        const numberOfGuests = document.getElementById('guests').value;\r\n        const name = document.getElementById('name').value;\r\n\r\n        const reviewDiv = document.getElementById('review');\r\n        reviewDiv.innerHTML = `<h2>\u00dcberpr\u00fcfe deine Angaben<\/h2>`;\r\n        reviewDiv.innerHTML += `<p>Zustimmung: ${acceptanceStatus}<\/p>`;\r\n        reviewDiv.innerHTML += `<p>Name: ${name}<\/p>`;\r\n        reviewDiv.innerHTML += `<p>Anzahl der G\u00e4ste: ${numberOfGuests}<\/p>`;\r\n\r\n        if(isAccepted) {\r\n            const guestNames = document.querySelectorAll('.guest-name');\r\n            \r\n            reviewDiv.innerHTML += `<h3>G\u00e4ste:<\/h3>`;\r\n            guestNames.forEach((input, index) => {\r\n                reviewDiv.innerHTML += `<p>Gast #${index + 1}: ${input.value}<\/p>`;\r\n            });\r\n        }\r\n    }\r\n\r\n\r\n\r\n    function submitForm() {\r\n        changeStep(3, 'loading')\r\n        \r\n        const isAccepted = document.getElementById('icon-accept').classList.contains('selected');\r\n        const acceptanceStatus = isAccepted ? 'Zusage' : 'Absage';\r\n        const name = document.getElementById('name').value;\r\n        const numberOfGuests = parseInt(document.getElementById('guests').value, 10);\r\n    \r\n\r\n        \/\/ Gathering guest details\r\n        const guests = [];\r\n        if (isAccepted) {\r\n            const guestSections = document.querySelectorAll('.guest-options');\r\n            guestSections.forEach((guestSection, index) => {\r\n                const guestName = guestSection.parentElement.querySelector('.guest-name').value;\r\n\r\n                guests.push({\r\n                    id: index + 1,\r\n                    name: guestName,\r\n                });\r\n            });\r\n        }\r\n\r\n        const payload = {\r\n            acceptanceStatus,\r\n            name,\r\n            numberOfGuests,\r\n            guests\r\n        };\r\n\r\n\r\n\r\n        const url = 'https:\/\/europe-west4-wedding-rsvp-385418.cloudfunctions.net\/rsvp-annamichel';\r\n\r\n        fetch(url, {\r\n            method: 'POST',\r\n            headers: {\r\n                'Content-Type': 'application\/json',\r\n            },\r\n            body: JSON.stringify(payload)\r\n        })\r\n        .then(response => {\r\n            \/\/ Wait for at least 1 second before switching steps\r\n            setTimeout(() => {\r\n                if (response.ok) {\r\n                    \/\/ Received 200\r\n                    changeStep(3, 'success');\r\n                } else {\r\n                    console.log('Backend error');\r\n                    changeStep(3, 'failure');\r\n                }\r\n            }, 500);  \/\/ 1000 milliseconds = 1 second\r\n        })\r\n        .catch(error => {\r\n            \/\/ Wait for at least 1 second before switching steps\r\n            setTimeout(() => {\r\n                \/\/ Error sending data\r\n                changeStep(3, 'failure');\r\n            }, 500);  \/\/ 1000 milliseconds = 1 second\r\n        });\r\n        \r\n        \r\n        const rsvpElement = document.getElementById('rsvp');\r\n        if (rsvpElement) {\r\n            rsvpElement.scrollIntoView({ behavior: 'smooth' });\r\n        }\r\n    }\r\n<\/script>\r\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t<div class=\"elementor-element elementor-element-5dbddf9f e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-parent\" data-id=\"5dbddf9f\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\" data-core-v316-plus=\"true\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6baa4fde elementor-widget elementor-widget-text-editor\" data-id=\"6baa4fde\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Noch ein paar Tage, dann startet unser Liebesabenteuer!<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7601f9cc elementor-widget elementor-widget-eael-countdown\" data-id=\"7601f9cc\" data-element_type=\"widget\" data-widget_type=\"eael-countdown.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\n\t\t<div class=\"eael-countdown-wrapper\" data-countdown-id=\"7601f9cc\" data-expire-type=\"none\" data-countdown-type=\"due_date\">\n\t\t\t<div class=\"eael-countdown-container eael-countdown-label-block  eael-countdown-label-inline-mobile \">\n\t\t\t\t<ul id=\"eael-countdown-7601f9cc\" class=\"eael-countdown-items\" data-date=\"Apr 20 2024 16:30:00 +0\">\n\t\t\t\t\t<li class=\"eael-countdown-item\"><div class=\"eael-countdown-days\"><span data-days class=\"eael-countdown-digits\">00<\/span><span class=\"eael-countdown-label\">Tage<\/span><\/div><\/li>\t\t\t\t\t<li class=\"eael-countdown-item\"><div class=\"eael-countdown-hours\"><span data-hours class=\"eael-countdown-digits\">00<\/span><span class=\"eael-countdown-label\">Stunden<\/span><\/div><\/li>\t\t\t\t<li class=\"eael-countdown-item\"><div class=\"eael-countdown-minutes\"><span data-minutes class=\"eael-countdown-digits\">00<\/span><span class=\"eael-countdown-label\">Minuten<\/span><\/div><\/li>\t\t\t\t<li class=\"eael-countdown-item\"><div class=\"eael-countdown-seconds\"><span data-seconds class=\"eael-countdown-digits\">00<\/span><span class=\"eael-countdown-label\">Sekunden<\/span><\/div><\/li>\t\t\t\t<\/ul>\n                <div class=\"eael-countdown-expiry-template\" style=\"display: none;\">\n\t\t\t\t\t                <\/div>\n\t\t\t\t<div class=\"clearfix\"><\/div>\n\t\t\t<\/div>\n\t\t<\/div>\n\n\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\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Einladung zu unserer Hochzeitsfeier CFKZum Nassenwald 166583 Spiesen-Elversberg Details Fahrdienst Bei Bedarf k\u00f6nnt ihr unseren Shuttle-Service nutzen. Unterkunft Bitte informiert uns bis zum 31.01.24, falls ihr eine \u00dcbernachtungsm\u00f6glichkeit ben\u00f6tigt. Gestaltung des Abends Etwaige Programmpunkte koordinieren unsere Trauzeugen Stefanie Schneider, 0174\/6088398 und Markus Fillgraff, 0157\/78799463. Geschenke Mir wolle noo Italien g\u00e4\u00e4r, wenn das nur nit so [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"_links":{"self":[{"href":"https:\/\/annamichel.weddingessentials.pro\/index.php\/wp-json\/wp\/v2\/pages\/8"}],"collection":[{"href":"https:\/\/annamichel.weddingessentials.pro\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/annamichel.weddingessentials.pro\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/annamichel.weddingessentials.pro\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/annamichel.weddingessentials.pro\/index.php\/wp-json\/wp\/v2\/comments?post=8"}],"version-history":[{"count":44,"href":"https:\/\/annamichel.weddingessentials.pro\/index.php\/wp-json\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":81,"href":"https:\/\/annamichel.weddingessentials.pro\/index.php\/wp-json\/wp\/v2\/pages\/8\/revisions\/81"}],"wp:attachment":[{"href":"https:\/\/annamichel.weddingessentials.pro\/index.php\/wp-json\/wp\/v2\/media?parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}