{"id":1454,"date":"2022-06-16T07:53:39","date_gmt":"2022-06-16T07:53:39","guid":{"rendered":"https:\/\/optimus.qsandbox.com:3443\/apps\/qsandbox\/app_user\/qsu6361\/site\/utsav-tutor-demo.sites.qsandbox.com\/?page_id=72"},"modified":"2026-03-31T18:24:27","modified_gmt":"2026-03-31T16:24:27","slug":"contact-3","status":"publish","type":"page","link":"https:\/\/tila-angles.org\/?page_id=1454","title":{"rendered":"Kontakt"},"content":{"rendered":"\n<div class=\"wp-block-group alignfull has-global-padding is-layout-constrained wp-container-core-group-is-layout-08655630 wp-block-group-is-layout-constrained\" style=\"margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--80);padding-bottom:var(--wp--preset--spacing--80)\">\n<div class=\"wp-block-group alignwide is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"has-text-align-center is-style-text-display is-style-text-display--1\" style=\"font-style:normal;font-weight:400\">Hast du Fragen? <br><a href=\"https:\/\/tila-angles.org\/Das Attribut Modul-ID ist erforderlich!\" data-type=\"page\" data-id=\"1454\" rel=\"nofollow\">Dann kannst du mich gerne kontaktieren.<\/a><\/p>\n\n\n\n<div style=\"height:var(--wp--preset--spacing--40)\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul class=\"wp-block-social-links has-icon-color is-style-logos-only is-content-justification-center is-layout-flex wp-container-core-social-links-is-layout-a89b3969 wp-block-social-links-is-layout-flex\"><li class=\"wp-social-link wp-social-link-facebook has-contrast-color wp-block-social-link\"><a href=\"https:\/\/www.facebook.com\/share\/1CS3zJbHDi\" class=\"wp-block-social-link-anchor\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M12 2C6.5 2 2 6.5 2 12c0 5 3.7 9.1 8.4 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.3v7C18.3 21.1 22 17 22 12c0-5.5-4.5-10-10-10z\"><\/path><\/svg><span class=\"wp-block-social-link-label screen-reader-text\">Facebook<\/span><\/a><\/li>\n\n<li class=\"wp-social-link wp-social-link-telegram has-contrast-color wp-block-social-link\"><a href=\"https:\/\/t.me\/AllbewusstSein\" class=\"wp-block-social-link-anchor\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 128 128\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M28.9700376,63.3244248 C47.6273373,55.1957357 60.0684594,49.8368063 66.2934036,47.2476366 C84.0668845,39.855031 87.7600616,38.5708563 90.1672227,38.528 C90.6966555,38.5191258 91.8804274,38.6503351 92.6472251,39.2725385 C93.294694,39.7979149 93.4728387,40.5076237 93.5580865,41.0057381 C93.6433345,41.5038525 93.7494885,42.63857 93.6651041,43.5252052 C92.7019529,53.6451182 88.5344133,78.2034783 86.4142057,89.5379542 C85.5170662,94.3339958 83.750571,95.9420841 82.0403991,96.0994568 C78.3237996,96.4414641 75.5015827,93.6432685 71.9018743,91.2836143 C66.2690414,87.5912212 63.0868492,85.2926952 57.6192095,81.6896017 C51.3004058,77.5256038 55.3966232,75.2369981 58.9976911,71.4967761 C59.9401076,70.5179421 76.3155302,55.6232293 76.6324771,54.2720454 C76.6721165,54.1030573 76.7089039,53.4731496 76.3346867,53.1405352 C75.9604695,52.8079208 75.4081573,52.921662 75.0095933,53.0121213 C74.444641,53.1403447 65.4461175,59.0880351 48.0140228,70.8551922 C45.4598218,72.6091037 43.1463059,73.4636682 41.0734751,73.4188859 C38.7883453,73.3695169 34.3926725,72.1268388 31.1249416,71.0646282 C27.1169366,69.7617838 23.931454,69.0729605 24.208838,66.8603276 C24.3533167,65.7078514 25.9403832,64.5292172 28.9700376,63.3244248 Z\" \/><\/svg><span class=\"wp-block-social-link-label screen-reader-text\">Telegram<\/span><\/a><\/li>\n\n<li class=\"wp-social-link wp-social-link-instagram has-contrast-color wp-block-social-link\"><a href=\"https:\/\/www.instagram.com\/tilaangles\" class=\"wp-block-social-link-anchor\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M12,4.622c2.403,0,2.688,0.009,3.637,0.052c0.877,0.04,1.354,0.187,1.671,0.31c0.42,0.163,0.72,0.358,1.035,0.673 c0.315,0.315,0.51,0.615,0.673,1.035c0.123,0.317,0.27,0.794,0.31,1.671c0.043,0.949,0.052,1.234,0.052,3.637 s-0.009,2.688-0.052,3.637c-0.04,0.877-0.187,1.354-0.31,1.671c-0.163,0.42-0.358,0.72-0.673,1.035 c-0.315,0.315-0.615,0.51-1.035,0.673c-0.317,0.123-0.794,0.27-1.671,0.31c-0.949,0.043-1.233,0.052-3.637,0.052 s-2.688-0.009-3.637-0.052c-0.877-0.04-1.354-0.187-1.671-0.31c-0.42-0.163-0.72-0.358-1.035-0.673 c-0.315-0.315-0.51-0.615-0.673-1.035c-0.123-0.317-0.27-0.794-0.31-1.671C4.631,14.688,4.622,14.403,4.622,12 s0.009-2.688,0.052-3.637c0.04-0.877,0.187-1.354,0.31-1.671c0.163-0.42,0.358-0.72,0.673-1.035 c0.315-0.315,0.615-0.51,1.035-0.673c0.317-0.123,0.794-0.27,1.671-0.31C9.312,4.631,9.597,4.622,12,4.622 M12,3 C9.556,3,9.249,3.01,8.289,3.054C7.331,3.098,6.677,3.25,6.105,3.472C5.513,3.702,5.011,4.01,4.511,4.511 c-0.5,0.5-0.808,1.002-1.038,1.594C3.25,6.677,3.098,7.331,3.054,8.289C3.01,9.249,3,9.556,3,12c0,2.444,0.01,2.751,0.054,3.711 c0.044,0.958,0.196,1.612,0.418,2.185c0.23,0.592,0.538,1.094,1.038,1.594c0.5,0.5,1.002,0.808,1.594,1.038 c0.572,0.222,1.227,0.375,2.185,0.418C9.249,20.99,9.556,21,12,21s2.751-0.01,3.711-0.054c0.958-0.044,1.612-0.196,2.185-0.418 c0.592-0.23,1.094-0.538,1.594-1.038c0.5-0.5,0.808-1.002,1.038-1.594c0.222-0.572,0.375-1.227,0.418-2.185 C20.99,14.751,21,14.444,21,12s-0.01-2.751-0.054-3.711c-0.044-0.958-0.196-1.612-0.418-2.185c-0.23-0.592-0.538-1.094-1.038-1.594 c-0.5-0.5-1.002-0.808-1.594-1.038c-0.572-0.222-1.227-0.375-2.185-0.418C14.751,3.01,14.444,3,12,3L12,3z M12,7.378 c-2.552,0-4.622,2.069-4.622,4.622S9.448,16.622,12,16.622s4.622-2.069,4.622-4.622S14.552,7.378,12,7.378z M12,15 c-1.657,0-3-1.343-3-3s1.343-3,3-3s3,1.343,3,3S13.657,15,12,15z M16.804,6.116c-0.596,0-1.08,0.484-1.08,1.08 s0.484,1.08,1.08,1.08c0.596,0,1.08-0.484,1.08-1.08S17.401,6.116,16.804,6.116z\"><\/path><\/svg><span class=\"wp-block-social-link-label screen-reader-text\">Instagram<\/span><\/a><\/li><\/ul>\n<\/div>\n\n\n\n<div class=\"forminator-guttenberg\"><div class=\"forminator-ui forminator-custom-form forminator-custom-form-1594 forminator-design--default  forminator_ajax\" data-forminator-render=\"0\" data-form=\"forminator-module-1594\" data-uid=\"69df90112da93\"><br\/><\/div><form\n\t\t\t\tid=\"forminator-module-1594\"\n\t\t\t\tclass=\"forminator-ui forminator-custom-form forminator-custom-form-1594 forminator-design--default  forminator_ajax\"\n\t\t\t\tmethod=\"post\"\n\t\t\t\tdata-forminator-render=\"0\"\n\t\t\t\tdata-form-id=\"1594\"\n\t\t\t\t data-color-option=\"theme\" data-design=\"default\" data-grid=\"open\" style=\"display: none;\"\n\t\t\t\tdata-uid=\"69df90112da93\"\n\t\t\t><div role=\"alert\" aria-live=\"polite\" class=\"forminator-response-message forminator-error\" aria-hidden=\"true\"><\/div><div class=\"forminator-row\"><div id=\"name-1\" class=\"forminator-field-name forminator-col forminator-col-12 \"><div class=\"forminator-field\"><label for=\"forminator-field-name-1_69df90112da93\" id=\"forminator-field-name-1_69df90112da93-label\" class=\"forminator-label\">Vorname <span class=\"forminator-required\">*<\/span><\/label><input type=\"text\" name=\"name-1\" value=\"\" placeholder=\"\" id=\"forminator-field-name-1_69df90112da93\" class=\"forminator-input forminator-name--field\" aria-required=\"true\" autocomplete=\"name\" \/><\/div><\/div><\/div><div class=\"forminator-row\"><div id=\"email-1\" class=\"forminator-field-email forminator-col forminator-col-12 \"><div class=\"forminator-field\"><label for=\"forminator-field-email-1_69df90112da93\" id=\"forminator-field-email-1_69df90112da93-label\" class=\"forminator-label\">E-Mail-Adresse <span class=\"forminator-required\">*<\/span><\/label><input type=\"email\" name=\"email-1\" value=\"\" placeholder=\"\" id=\"forminator-field-email-1_69df90112da93\" class=\"forminator-input forminator-email--field\" data-required=\"true\" aria-required=\"true\" autocomplete=\"email\" \/><\/div><\/div><\/div><div class=\"forminator-row\"><div id=\"phone-1\" class=\"forminator-field-phone forminator-col forminator-col-12 \"><div class=\"forminator-field\"><label for=\"forminator-field-phone-1_69df90112da93\" id=\"forminator-field-phone-1_69df90112da93-label\" class=\"forminator-label\">Telefonnummer<\/label><input type=\"text\" name=\"phone-1\" value=\"\" placeholder=\"\" id=\"forminator-field-phone-1_69df90112da93\" class=\"forminator-input forminator-field--phone\" data-required=\"\" aria-required=\"false\" autocomplete=\"off\" \/><\/div><\/div><\/div><div class=\"forminator-row\"><div id=\"textarea-1\" class=\"forminator-field-textarea forminator-col forminator-col-12 \"><div class=\"forminator-field\"><label for=\"forminator-field-textarea-1_69df90112da93\" id=\"forminator-field-textarea-1_69df90112da93-label\" class=\"forminator-label\">Nachricht<\/label><span id=\"forminator-field-textarea-1_69df90112da93-description\" class=\"forminator-description\"><span data-limit=\"180\" data-type=\"characters\" data-editor=\"\">0 \/ 180<\/span><\/span><textarea name=\"textarea-1\" placeholder=\"\" id=\"forminator-field-textarea-1_69df90112da93\" class=\"forminator-textarea\" rows=\"6\" style=\"min-height:140px;\" maxlength=\"180\" ><\/textarea><\/div><\/div><\/div><input type=\"hidden\" name=\"referer_url\" value=\"\" \/><div class=\"forminator-row forminator-row-last\"><div class=\"forminator-col\"><div class=\"forminator-field\"><button class=\"forminator-button forminator-button-submit\">Absenden<\/button><\/div><\/div><\/div><input type=\"hidden\" id=\"forminator_nonce\" name=\"forminator_nonce\" value=\"c2bbbe5bdd\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/index.php?rest_route=%2Fwp%2Fv2%2Fpages%2F1454\" \/><input type=\"hidden\" name=\"form_id\" value=\"1594\"><input type=\"hidden\" name=\"page_id\" value=\"1454\"><input type=\"hidden\" name=\"form_type\" value=\"default\"><input type=\"hidden\" name=\"current_url\" value=\"https:\/\/tila-angles.org\/?page_id=1454\"><input type=\"hidden\" name=\"render_id\" value=\"0\"><input type=\"hidden\" name=\"action\" value=\"forminator_submit_form_custom-forms\"><\/form><\/div>\n<\/div>\n\n\n\n<!DOCTYPE html>\n<html lang=\"de\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Terminbuchung<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:wght@400;600&#038;family=DM+Sans:wght@300;400;500&#038;display=swap\" rel=\"stylesheet\">\n<style>\n  :root {\n    --cream: #F7F3EE;\n    --warm-dark: #1C1814;\n    --accent: #B5854A;\n    --accent-light: #E8D5B7;\n    --text-muted: #7A6F65;\n    --border: #DDD5C8;\n    --success: #4A7C59;\n  }\n\n  * { box-sizing: border-box; margin: 0; padding: 0; }\n\n  body {\n    font-family: 'DM Sans', sans-serif;\n    background: var(--cream);\n    color: var(--warm-dark);\n    min-height: 100vh;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 2rem;\n  }\n\n  .widget {\n    background: #fff;\n    border-radius: 20px;\n    box-shadow: 0 8px 60px rgba(28,24,20,0.10);\n    max-width: 820px;\n    width: 100%;\n    overflow: hidden;\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n  }\n\n  \/* LEFT PANEL *\/\n  .left-panel {\n    background: var(--warm-dark);\n    color: #fff;\n    padding: 2.5rem 2rem;\n    display: flex;\n    flex-direction: column;\n    gap: 1.5rem;\n  }\n\n  .provider-tag {\n    font-size: 0.7rem;\n    letter-spacing: 0.15em;\n    text-transform: uppercase;\n    color: var(--accent);\n    font-weight: 500;\n  }\n\n  .left-panel h2 {\n    font-family: 'Playfair Display', serif;\n    font-size: 1.7rem;\n    line-height: 1.25;\n    font-weight: 600;\n  }\n\n  .duration-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.5rem;\n    background: rgba(255,255,255,0.08);\n    border-radius: 100px;\n    padding: 0.4rem 0.9rem;\n    font-size: 0.82rem;\n    color: var(--accent-light);\n    width: fit-content;\n  }\n\n  .info-list {\n    list-style: none;\n    display: flex;\n    flex-direction: column;\n    gap: 0.75rem;\n    margin-top: auto;\n  }\n\n  .info-list li {\n    display: flex;\n    align-items: center;\n    gap: 0.75rem;\n    font-size: 0.82rem;\n    color: rgba(255,255,255,0.65);\n  }\n\n  .info-list li svg {\n    flex-shrink: 0;\n    opacity: 0.7;\n  }\n\n  \/* RIGHT PANEL *\/\n  .right-panel {\n    padding: 2.5rem 2rem;\n    display: flex;\n    flex-direction: column;\n    gap: 1.5rem;\n  }\n\n  .step-indicator {\n    display: flex;\n    gap: 0.4rem;\n  }\n\n  .step-dot {\n    height: 4px;\n    border-radius: 2px;\n    background: var(--border);\n    flex: 1;\n    transition: background 0.3s;\n  }\n\n  .step-dot.active { background: var(--accent); }\n  .step-dot.done { background: var(--accent-light); }\n\n  \/* CALENDAR *\/\n  .calendar-nav {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  }\n\n  .calendar-nav h3 {\n    font-family: 'Playfair Display', serif;\n    font-size: 1.05rem;\n  }\n\n  .nav-btn {\n    background: none;\n    border: 1.5px solid var(--border);\n    width: 32px; height: 32px;\n    border-radius: 8px;\n    cursor: pointer;\n    display: flex; align-items: center; justify-content: center;\n    color: var(--text-muted);\n    transition: all 0.2s;\n  }\n\n  .nav-btn:hover {\n    border-color: var(--accent);\n    color: var(--accent);\n  }\n\n  .calendar-grid {\n    display: grid;\n    grid-template-columns: repeat(7, 1fr);\n    gap: 3px;\n    text-align: center;\n  }\n\n  .weekday-label {\n    font-size: 0.68rem;\n    text-transform: uppercase;\n    letter-spacing: 0.08em;\n    color: var(--text-muted);\n    padding: 0.3rem 0;\n    font-weight: 500;\n  }\n\n  .cal-day {\n    aspect-ratio: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 8px;\n    font-size: 0.82rem;\n    cursor: pointer;\n    transition: all 0.15s;\n    font-weight: 400;\n    position: relative;\n  }\n\n  .cal-day:hover:not(.empty):not(.past) {\n    background: var(--accent-light);\n    color: var(--warm-dark);\n  }\n\n  .cal-day.selected {\n    background: var(--accent);\n    color: #fff;\n    font-weight: 600;\n  }\n\n  .cal-day.today::after {\n    content: '';\n    position: absolute;\n    bottom: 3px; left: 50%; transform: translateX(-50%);\n    width: 4px; height: 4px;\n    border-radius: 50%;\n    background: var(--accent);\n  }\n\n  .cal-day.today.selected::after { background: #fff; }\n\n  .cal-day.past { color: var(--border); cursor: default; }\n  .cal-day.empty { cursor: default; }\n\n  \/* TIME SLOTS *\/\n  .slots-section h4 {\n    font-size: 0.78rem;\n    text-transform: uppercase;\n    letter-spacing: 0.1em;\n    color: var(--text-muted);\n    margin-bottom: 0.6rem;\n    font-weight: 500;\n  }\n\n  .slots-grid {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 0.4rem;\n  }\n\n  .slot-btn {\n    padding: 0.45rem;\n    border: 1.5px solid var(--border);\n    border-radius: 8px;\n    background: none;\n    font-size: 0.8rem;\n    font-family: 'DM Sans', sans-serif;\n    cursor: pointer;\n    transition: all 0.15s;\n    color: var(--warm-dark);\n  }\n\n  .slot-btn:hover { border-color: var(--accent); color: var(--accent); }\n  .slot-btn.selected { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 500; }\n  .slot-btn.booked { background: var(--border); color: var(--text-muted); cursor: not-allowed; border-color: var(--border); text-decoration: line-through; }\n\n  \/* FORM *\/\n  .form-section { display: flex; flex-direction: column; gap: 0.75rem; }\n\n  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }\n\n  .form-group { display: flex; flex-direction: column; gap: 0.3rem; }\n\n  .form-group label {\n    font-size: 0.75rem;\n    color: var(--text-muted);\n    font-weight: 500;\n    letter-spacing: 0.04em;\n  }\n\n  .form-group input, .form-group textarea {\n    border: 1.5px solid var(--border);\n    border-radius: 8px;\n    padding: 0.55rem 0.75rem;\n    font-family: 'DM Sans', sans-serif;\n    font-size: 0.85rem;\n    color: var(--warm-dark);\n    outline: none;\n    transition: border 0.2s;\n    background: #fff;\n    resize: none;\n  }\n\n  .form-group input:focus, .form-group textarea:focus {\n    border-color: var(--accent);\n  }\n\n  .confirm-btn {\n    background: var(--warm-dark);\n    color: #fff;\n    border: none;\n    border-radius: 10px;\n    padding: 0.85rem;\n    font-family: 'DM Sans', sans-serif;\n    font-size: 0.9rem;\n    font-weight: 500;\n    cursor: pointer;\n    transition: all 0.2s;\n    letter-spacing: 0.02em;\n    margin-top: 0.25rem;\n  }\n\n  .confirm-btn:hover { background: var(--accent); transform: translateY(-1px); }\n  .confirm-btn:disabled { background: var(--border); cursor: not-allowed; transform: none; }\n\n  \/* SUCCESS *\/\n  .success-view {\n    display: none;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    text-align: center;\n    gap: 1rem;\n    padding: 1rem 0;\n    animation: fadeIn 0.4s ease;\n  }\n\n  @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }\n\n  .success-icon {\n    width: 56px; height: 56px;\n    background: #EAF4ED;\n    border-radius: 50%;\n    display: flex; align-items: center; justify-content: center;\n    color: var(--success);\n  }\n\n  .success-view h3 {\n    font-family: 'Playfair Display', serif;\n    font-size: 1.3rem;\n  }\n\n  .success-view p { font-size: 0.85rem; color: var(--text-muted); line-height: 1.5; }\n\n  .booking-summary {\n    background: var(--cream);\n    border-radius: 10px;\n    padding: 1rem 1.25rem;\n    font-size: 0.82rem;\n    color: var(--warm-dark);\n    width: 100%;\n    text-align: left;\n    line-height: 1.8;\n  }\n\n  .booking-summary strong { font-weight: 600; }\n\n  .reset-btn {\n    background: none;\n    border: 1.5px solid var(--border);\n    border-radius: 8px;\n    padding: 0.55rem 1.25rem;\n    font-family: 'DM Sans', sans-serif;\n    font-size: 0.82rem;\n    cursor: pointer;\n    color: var(--text-muted);\n    transition: all 0.2s;\n  }\n\n  .reset-btn:hover { border-color: var(--accent); color: var(--accent); }\n\n  \/* RESPONSIVE *\/\n  @media (max-width: 600px) {\n    .widget { grid-template-columns: 1fr; }\n    .left-panel { padding: 2rem; }\n    body { padding: 1rem; }\n  }\n\n  .hidden { display: none !important; }\n<\/style>\n<\/head>\n<body>\n\n<div class=\"widget\">\n  <!-- LEFT -->\n  <div class=\"left-panel\">\n    <div>\n      <p class=\"provider-tag\">Tila Angles<\/p>\n      <h2>Erstgespr\u00e4ch buchen<\/h2>\n    <\/div>\n    <div class=\"duration-badge\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"12 6 12 12 16 14\"\/><\/svg>\n      15 Minuten\n    <\/div>\n    <ul class=\"info-list\">\n      <li>\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z\"\/><circle cx=\"12\" cy=\"10\" r=\"3\"\/><\/svg>\n        Online (Link nach Buchung)\n      <\/li>\n      <li>\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"\/><line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"\/><line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"\/><line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"\/><\/svg>\n        Kostenloser Erstkontakt\n      <\/li>\n      <li>\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 9.81 19.79 19.79 0 01.03 1.18 2 2 0 012 0h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L6.09 7.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z\"\/><\/svg>\n        Best\u00e4tigung per E-Mail\n      <\/li>\n    <\/ul>\n  <\/div>\n\n  <!-- RIGHT -->\n  <div class=\"right-panel\">\n    <div class=\"step-indicator\">\n      <div class=\"step-dot active\" id=\"dot1\"><\/div>\n      <div class=\"step-dot\" id=\"dot2\"><\/div>\n      <div class=\"step-dot\" id=\"dot3\"><\/div>\n    <\/div>\n\n    <!-- STEP 1: Calendar -->\n    <div id=\"step1\">\n      <div class=\"calendar-nav\">\n        <button class=\"nav-btn\" onclick=\"changeMonth(-1)\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"15 18 9 12 15 6\"\/><\/svg>\n        <\/button>\n        <h3 id=\"month-label\"><\/h3>\n        <button class=\"nav-btn\" onclick=\"changeMonth(1)\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>\n        <\/button>\n      <\/div>\n      <div class=\"calendar-grid\" id=\"calendar-grid\"><\/div>\n    <\/div>\n\n    <!-- STEP 2: Time slots -->\n    <div id=\"step2\" class=\"hidden\">\n      <div class=\"slots-section\">\n        <h4 id=\"slots-date-label\">Verf\u00fcgbare Zeiten<\/h4>\n        <div class=\"slots-grid\" id=\"slots-grid\"><\/div>\n      <\/div>\n    <\/div>\n\n    <!-- STEP 3: Form -->\n    <div id=\"step3\" class=\"hidden\">\n      <div class=\"form-section\">\n        <div class=\"form-row\">\n          <div class=\"form-group\">\n            <label>Vorname<\/label>\n            <input type=\"text\" id=\"fname\" placeholder=\"Anna\">\n          <\/div>\n          <div class=\"form-group\">\n            <label>Nachname<\/label>\n            <input type=\"text\" id=\"lname\" placeholder=\"M\u00fcller\">\n          <\/div>\n        <\/div>\n        <div class=\"form-group\">\n          <label>E-Mail<\/label>\n          <input type=\"email\" id=\"email\" placeholder=\"anna@email.com\">\n        <\/div>\n        <div class=\"form-group\">\n          <label>Nachricht (optional)<\/label>\n          <textarea id=\"message\" rows=\"2\" placeholder=\"Womit kann ich dir helfen?\"><\/textarea>\n        <\/div>\n        <button class=\"confirm-btn\" id=\"confirm-btn\" onclick=\"submitBooking()\">Termin best\u00e4tigen \u2192<\/button>\n      <\/div>\n    <\/div>\n\n    <!-- SUCCESS -->\n    <div class=\"success-view\" id=\"success-view\">\n      <div class=\"success-icon\">\n        <svg width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\n      <\/div>\n      <h3>Termin gebucht!<\/h3>\n      <p>Du erh\u00e4ltst in K\u00fcrze eine Best\u00e4tigung per E-Mail mit dem Zoom-Link.<\/p>\n      <div class=\"booking-summary\" id=\"booking-summary\"><\/div>\n      <button class=\"reset-btn\" onclick=\"resetWidget()\">Neuen Termin buchen<\/button>\n    <\/div>\n  <\/div>\n<\/div>\n\n<script>\n  const MONTHS_DE = ['Januar','Februar','M\u00e4rz','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'];\n  const DAYS_DE = ['Mo','Di','Mi','Do','Fr','Sa','So'];\n\n  \/\/ Slots per weekday (0=Mo \u2026 6=So), weekend = empty\n  const SLOTS_BY_WEEKDAY = {\n    0: ['09:00','10:00','11:00','14:00','15:00','16:00'],\n    1: ['09:00','10:00','11:00','14:00','15:00'],\n    2: ['09:00','10:30','14:00','15:30','17:00'],\n    3: ['09:00','10:00','11:00','14:00','15:00','16:00'],\n    4: ['09:00','10:00','11:00'],\n  };\n\n  \/\/ Fake already-booked slots\n  const BOOKED = { '09:00': true, '15:00': true };\n\n  let currentDate = new Date();\n  let viewYear = currentDate.getFullYear();\n  let viewMonth = currentDate.getMonth();\n  let selectedDate = null;\n  let selectedSlot = null;\n\n  function renderCalendar() {\n    const label = document.getElementById('month-label');\n    label.textContent = `${MONTHS_DE[viewMonth]} ${viewYear}`;\n\n    const grid = document.getElementById('calendar-grid');\n    grid.innerHTML = '';\n\n    \/\/ Weekday headers\n    DAYS_DE.forEach(d => {\n      const el = document.createElement('div');\n      el.className = 'weekday-label';\n      el.textContent = d;\n      grid.appendChild(el);\n    });\n\n    const firstDay = new Date(viewYear, viewMonth, 1);\n    \/\/ Monday-first: 0=Mon\n    let startOffset = (firstDay.getDay() + 6) % 7;\n    const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();\n    const today = new Date();\n\n    for (let i = 0; i < startOffset; i++) {\n      const el = document.createElement('div');\n      el.className = 'cal-day empty';\n      grid.appendChild(el);\n    }\n\n    for (let d = 1; d <= daysInMonth; d++) {\n      const el = document.createElement('div');\n      el.className = 'cal-day';\n      el.textContent = d;\n\n      const thisDate = new Date(viewYear, viewMonth, d);\n      const dayOfWeek = (thisDate.getDay() + 6) % 7; \/\/ 0=Mon\n\n      const isToday = thisDate.toDateString() === today.toDateString();\n      const isPast = thisDate < new Date(today.getFullYear(), today.getMonth(), today.getDate());\n      const isWeekend = dayOfWeek >= 5;\n\n      if (isToday) el.classList.add('today');\n      if (isPast || isWeekend) {\n        el.classList.add('past');\n      } else {\n        const dateStr = `${viewYear}-${viewMonth+1}-${d}`;\n        if (selectedDate === dateStr) el.classList.add('selected');\n        el.addEventListener('click', () => selectDate(d, dayOfWeek, dateStr, el));\n      }\n\n      grid.appendChild(el);\n    }\n  }\n\n  function selectDate(day, weekday, dateStr, el) {\n    selectedDate = dateStr;\n    selectedSlot = null;\n    document.querySelectorAll('.cal-day.selected').forEach(e => e.classList.remove('selected'));\n    el.classList.add('selected');\n    showStep2(day, weekday);\n  }\n\n  function showStep2(day, weekday) {\n    document.getElementById('step1').classList.add('hidden');\n    document.getElementById('step2').classList.remove('hidden');\n    document.getElementById('dot1').classList.remove('active');\n    document.getElementById('dot1').classList.add('done');\n    document.getElementById('dot2').classList.add('active');\n\n    const label = document.getElementById('slots-date-label');\n    label.textContent = `${DAYS_DE[weekday]}, ${day}. ${MONTHS_DE[viewMonth]}`;\n\n    const slots = SLOTS_BY_WEEKDAY[weekday] || [];\n    const grid = document.getElementById('slots-grid');\n    grid.innerHTML = '';\n\n    if (slots.length === 0) {\n      grid.innerHTML = '<p style=\"font-size:0.82rem;color:var(--text-muted);grid-column:1\/-1\">Kein freier Termin an diesem Tag.<\/p>';\n      return;\n    }\n\n    slots.forEach(time => {\n      const btn = document.createElement('button');\n      btn.className = 'slot-btn';\n      btn.textContent = time;\n      if (BOOKED[time]) {\n        btn.classList.add('booked');\n        btn.disabled = true;\n      } else {\n        btn.addEventListener('click', () => selectSlot(time, btn));\n      }\n      grid.appendChild(btn);\n    });\n\n    \/\/ Back link\n    const back = document.createElement('button');\n    back.className = 'reset-btn';\n    back.style.marginTop = '0.5rem';\n    back.style.gridColumn = '1\/-1';\n    back.textContent = '\u2190 Datum \u00e4ndern';\n    back.addEventListener('click', () => {\n      document.getElementById('step2').classList.add('hidden');\n      document.getElementById('step1').classList.remove('hidden');\n      document.getElementById('dot2').classList.remove('active');\n      document.getElementById('dot1').classList.remove('done');\n      document.getElementById('dot1').classList.add('active');\n    });\n    grid.appendChild(back);\n  }\n\n  function selectSlot(time, btn) {\n    selectedSlot = time;\n    document.querySelectorAll('.slot-btn.selected').forEach(b => b.classList.remove('selected'));\n    btn.classList.add('selected');\n\n    setTimeout(() => {\n      document.getElementById('step2').classList.add('hidden');\n      document.getElementById('step3').classList.remove('hidden');\n      document.getElementById('dot2').classList.remove('active');\n      document.getElementById('dot2').classList.add('done');\n      document.getElementById('dot3').classList.add('active');\n    }, 280);\n  }\n\n  function submitBooking() {\n    const fname = document.getElementById('fname').value.trim();\n    const lname = document.getElementById('lname').value.trim();\n    const email = document.getElementById('email').value.trim();\n\n    if (!fname || !email) {\n      document.getElementById('fname').style.borderColor = fname ? '' : '#c0392b';\n      document.getElementById('email').style.borderColor = email ? '' : '#c0392b';\n      return;\n    }\n\n    \/\/ Show success\n    document.getElementById('step3').classList.add('hidden');\n    const sv = document.getElementById('success-view');\n    sv.style.display = 'flex';\n    document.getElementById('dot3').classList.remove('active');\n    document.getElementById('dot3').classList.add('done');\n\n    const [y, m, d] = selectedDate.split('-');\n    document.getElementById('booking-summary').innerHTML = `\n      <strong>${fname} ${lname}<\/strong><br>\n      \ud83d\udcc5 ${d}. ${MONTHS_DE[parseInt(m)-1]} ${y} \u00b7 ${selectedSlot} Uhr<br>\n      \u2709\ufe0f ${email}\n    `;\n  }\n\n  function resetWidget() {\n    selectedDate = null;\n    selectedSlot = null;\n    document.getElementById('success-view').style.display = 'none';\n    document.getElementById('step1').classList.remove('hidden');\n    document.getElementById('step2').classList.add('hidden');\n    document.getElementById('step3').classList.add('hidden');\n    ['dot1','dot2','dot3'].forEach(id => {\n      document.getElementById(id).classList.remove('active','done');\n    });\n    document.getElementById('dot1').classList.add('active');\n    document.getElementById('fname').value = '';\n    document.getElementById('lname').value = '';\n    document.getElementById('email').value = '';\n    document.getElementById('message').value = '';\n    renderCalendar();\n  }\n\n  function changeMonth(dir) {\n    viewMonth += dir;\n    if (viewMonth > 11) { viewMonth = 0; viewYear++; }\n    if (viewMonth < 0) { viewMonth = 11; viewYear--; }\n    renderCalendar();\n  }\n\n  renderCalendar();\n<\/script>\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hast du Fragen? Dann kannst du mich gerne kontaktieren. Terminbuchung Tila Angles Erstgespr\u00e4ch buchen 15 Minuten Online (Link nach Buchung) Kostenloser Erstkontakt Best\u00e4tigung per E-Mail Verf\u00fcgbare Zeiten Vorname Nachname E-Mail Nachricht (optional) Termin best\u00e4tigen \u2192 Termin gebucht! Du erh\u00e4ltst in K\u00fcrze eine Best\u00e4tigung per E-Mail mit dem Zoom-Link. Neuen Termin buchen<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-no-title","meta":{"footnotes":""},"class_list":["post-1454","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tila-angles.org\/index.php?rest_route=\/wp\/v2\/pages\/1454","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tila-angles.org\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tila-angles.org\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tila-angles.org\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/tila-angles.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1454"}],"version-history":[{"count":22,"href":"https:\/\/tila-angles.org\/index.php?rest_route=\/wp\/v2\/pages\/1454\/revisions"}],"predecessor-version":[{"id":1774,"href":"https:\/\/tila-angles.org\/index.php?rest_route=\/wp\/v2\/pages\/1454\/revisions\/1774"}],"wp:attachment":[{"href":"https:\/\/tila-angles.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1454"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}