{"id":1045,"date":"2026-10-08T21:57:00","date_gmt":"2026-10-08T19:57:00","guid":{"rendered":"https:\/\/the-yard.at\/?page_id=1045"},"modified":"2026-10-09T22:10:31","modified_gmt":"2026-10-09T20:10:31","slug":"gutschein","status":"publish","type":"page","link":"https:\/\/the-yard.at\/en\/gutschein\/","title":{"rendered":"Gutschein"},"content":{"rendered":"<div class=\"et_pb_section_0 et_pb_section et_section_regular et_block_section\">\n<div class=\"et_pb_row_0 et_pb_row et_block_row\">\n<div class=\"et_pb_column_0 et_pb_column et_pb_column_4_4 et-last-child et_block_column et_pb_css_mix_blend_mode_passthrough\">\n<div class=\"et_pb_code_0 et_pb_code et_pb_module\"><div class=\"et_pb_code_inner\"><style>\n.ap-voucher{box-sizing:border-box;max-width:764px;margin:0 auto;padding:26px 22px;font-family:inherit;color:#111}\n@media(max-width:600px){.ap-voucher{padding:22px 18px}}\n.ap-voucher *{box-sizing:border-box}\n.ap-voucher h2{font-size:clamp(26px,5vw,38px);line-height:1.05;margin:0 0 6px;text-transform:uppercase;letter-spacing:-.01em}\n.ap-voucher .ap-voucher-kicker{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#555;margin-bottom:10px}\n.ap-voucher .ap-voucher-lead{font-size:16px;line-height:1.55;margin:0 0 24px}\n.ap-voucher fieldset{border:0;padding:0;margin:0 0 22px}\n.ap-voucher legend{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;margin-bottom:10px;padding:0}\n.ap-voucher-amounts{display:flex;gap:10px;flex-wrap:wrap}\n.ap-voucher-amount{border:2px solid #111;background:#fff;padding:14px 20px;font-size:18px;font-weight:700;cursor:pointer;line-height:1}\n.ap-voucher-amount[aria-pressed=\"true\"]{background:#111;color:#fff}\n.ap-voucher-free{display:flex;align-items:center;gap:8px;margin-top:12px;flex-wrap:wrap}\n.ap-voucher-free input{width:140px;max-width:100%}\n.ap-voucher label.ap-voucher-field{display:block;margin:0 0 12px;font-size:14px;font-weight:600}\n.ap-voucher label.ap-voucher-field span{display:block;margin-bottom:4px}\n.ap-voucher input[type=text],.ap-voucher input[type=email],.ap-voucher input[type=number],.ap-voucher input[type=date],.ap-voucher textarea,.ap-voucher select{\nwidth:100%;padding:12px 14px;border:2px solid #111;background:#fff;font-size:16px;font-family:inherit;border-radius:0;color:#111}\n.ap-voucher select{appearance:none;-webkit-appearance:none;background-image:url(\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2012%208%27%3E%3Cpath%20d%3D%27M1%201l5%205%205-5%27%20fill%3D%27none%27%20stroke%3D%27%23111%27%20stroke-width%3D%272%27%2F%3E%3C%2Fsvg%3E\");background-repeat:no-repeat;background-position:right 14px center;background-size:12px;padding-right:38px}\n.ap-voucher textarea{min-height:92px;resize:vertical}\n.ap-voucher-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}\n@media(max-width:640px){.ap-voucher-grid{grid-template-columns:1fr}}\n.ap-voucher-check{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.5;margin:0 0 18px}\n.ap-voucher-check input{margin-top:3px;width:18px;height:18px;flex:0 0 auto}\n.ap-voucher-submit{background:#111;color:#fff;border:0;padding:16px 28px;font-size:17px;font-weight:700;cursor:pointer;width:100%;font-family:inherit}\n.ap-voucher-submit[disabled]{opacity:.55;cursor:progress}\n.ap-voucher-total{font-size:15px;margin:0 0 16px}\n.ap-voucher-note{font-size:13px;color:#555;line-height:1.5;margin:14px 0 0}\n.ap-voucher-msg{padding:13px 16px;border:2px solid #111;margin:0 0 18px;font-size:15px;line-height:1.45}\n.ap-voucher-msg.is-error{border-color:#b3261e;color:#b3261e}\n.ap-voucher-msg.is-ok{background:#111;color:#fff}\n.ap-voucher-check-row{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch}\n.ap-voucher-check-row input{flex:1 1 220px}\n.ap-voucher-check-row button{background:#111;color:#fff;border:0;padding:12px 22px;font-weight:700;cursor:pointer;font-family:inherit;font-size:15px}\n.ap-voucher-ticket{border:2px solid #111;padding:22px 18px;text-align:center;margin:22px 0}\n.ap-voucher-ticket-label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#555}\n.ap-voucher-ticket-code{font-size:clamp(24px,6vw,34px);font-weight:700;letter-spacing:.08em;margin-top:8px;word-break:break-all}\n.ap-voucher-ticket-value{font-size:16px;margin-top:10px}\n.ap-voucher-list{margin:20px 0;padding:0 0 0 20px;font-size:15px;line-height:1.6}\n.ap-voucher-list li{margin:0 0 8px}\n\n\/* ---------------------------------------------------------------\n   Divi: Layout-Absicherung (ab 1.0.43)\n\n   Dieselbe Sache wie auf der Splitzahlungsseite in 1.0.27: der\n   Divi-Seitenbereich bekommt durch die Module darin keine eigene Hoehe,\n   weil deren Inhalte schweben oder absolut sitzen. Der Footer rutscht\n   dann neben den Inhalt statt darunter und faengt die Klicks ab - die\n   Seite ist damit nicht mehr bedienbar.\n\n   display:flow-root laesst den Seitenbereich seinen Inhalt wieder\n   einschliessen; der Rest nimmt dem Abschnitt mit dem Gutschein das\n   Schweben und die feste Hoehe, und der Footer beginnt eine neue Zeile.\n   --------------------------------------------------------------- *\/\nbody:has(.ap-voucher) :is(#main-content, .et-l--post, .entry-content, article){display:flow-root !important}\nbody:has(.ap-voucher) .et_pb_section:has(.ap-voucher),\nbody:has(.ap-voucher) .et_pb_section:has(.ap-voucher) :is(.et_pb_row, .et_pb_column, .et_pb_module, .et_pb_code_inner){position:relative !important;float:none !important;height:auto !important}\nbody:has(.ap-voucher) .et-l--footer{clear:both !important}\n\n\/* Fuer Browser ohne :has() bleibt wenigstens der Block selbst sauber. *\/\n.ap-voucher{clear:both;float:none;position:relative}\n<\/style>    <div class=\"ap-voucher\" id=\"apv3316\">\n        <div class=\"ap-voucher-kicker\">Gift voucher<\/div>\n        <h2>A gift.<br>Your move.<\/h2>\n        <p class=\"ap-voucher-lead\">Pick an amount, pay, done \u2013 the voucher arrives by email as a PDF you can print, right away or on the day you choose. No expiry date, and whatever is left after redeeming stays on the code.<\/p>\n\n        <div class=\"ap-voucher-msg\" style=\"display:none;\" data-role=\"message\"><\/div>\n\n        <form data-role=\"form\" novalidate>\n            <fieldset>\n                <legend>Amount<\/legend>\n                <div class=\"ap-voucher-amounts\">\n                                            <button type=\"button\" class=\"ap-voucher-amount\" data-amount=\"50\"\n                            aria-pressed=\"false\">\u20ac50.00<\/button>\n                                            <button type=\"button\" class=\"ap-voucher-amount\" data-amount=\"100\"\n                            aria-pressed=\"true\">\u20ac100.00<\/button>\n                                            <button type=\"button\" class=\"ap-voucher-amount\" data-amount=\"150\"\n                            aria-pressed=\"false\">\u20ac150.00<\/button>\n                                            <button type=\"button\" class=\"ap-voucher-amount\" data-amount=\"200\"\n                            aria-pressed=\"false\">\u20ac200.00<\/button>\n                                    <\/div>\n                <div class=\"ap-voucher-free\">\n                    <label for=\"apv3316-free\" style=\"font-size:14px;font-weight:600;\">Other amount<\/label>\n                    <input type=\"number\" id=\"apv3316-free\" data-role=\"free\" min=\"20\"\n                        max=\"1000\" step=\"1\" placeholder=\"20\">\n                    <span style=\"font-size:13px;color:#555;\">\u20ac \u00b7 from \u20ac20.00 to \u20ac1,000.00<\/span>\n                <\/div>\n            <\/fieldset>\n\n            <fieldset>\n                <legend>From you<\/legend>\n                <div class=\"ap-voucher-grid\">\n                    <label class=\"ap-voucher-field\"><span>Name *<\/span><input type=\"text\" data-role=\"buyer_name\" required><\/label>\n                    <label class=\"ap-voucher-field\"><span>Email *<\/span><input type=\"email\" data-role=\"buyer_email\" required><\/label>\n                <\/div>\n                <p class=\"ap-voucher-note\">We send the voucher and the payment confirmation to this address.<\/p>\n            <\/fieldset>\n\n            <fieldset>\n                <legend>Who is it for?<\/legend>\n                <div class=\"ap-voucher-grid\">\n                    <label class=\"ap-voucher-field\"><span>Name *<\/span><input type=\"text\" data-role=\"recipient_name\" required><\/label>\n                    <!-- Die Adresse ist FREIWILLIG. Steht sie da, geht der\n                         Gutschein direkt an die beschenkte Person; bleibt sie\n                         leer, bekommt die Kaeuferin das PDF und uebergibt es\n                         selbst. Ein Pflichtfeld daraus zu machen, haette den\n                         haeufigsten Fall ueberhaupt verboten: ausdrucken und\n                         verschenken. -->\n                    <label class=\"ap-voucher-field\" data-role=\"recipient_email_field\"><span>Email<\/span><input type=\"email\" data-role=\"recipient_email\"><\/label>\n                <\/div>\n\n                <!-- Der Wunschtermin hat ohne Adresse niemanden, den er\n                     benachrichtigen koennte - er verschwindet dann, und der\n                     Hinweistext wechselt mit. -->\n                <label class=\"ap-voucher-field\" data-role=\"send_at_field\"><span>Hold it until this date<\/span><input type=\"date\" data-role=\"send_at\"><\/label>\n                <p class=\"ap-voucher-note\" data-role=\"recipient_note\">With an address the voucher goes straight to the person you\u2019re giving it to \u2013 right away, or held back until a date you pick, for a birthday say. Either way you get the PDF as well.<\/p>\n                <p class=\"ap-voucher-note\" data-role=\"deliver_note\" style=\"display:none;\">No address? Then you get the PDF and hand the voucher over yourself \u2013 print it and give it away.<\/p>\n\n                <label class=\"ap-voucher-field\"><span>Personal note<\/span><textarea data-role=\"personal_message\" maxlength=\"400\"><\/textarea><\/label>\n            <\/fieldset>\n\n            <fieldset>\n                <legend>The card<\/legend>\n                <label class=\"ap-voucher-field\">\n                    <span>Voucher language<\/span>\n                    <select data-role=\"voucher_language\">\n                                                    <option value=\"de\" >Deutsch<\/option>\n                                                    <option value=\"en\"  selected='selected'>English<\/option>\n                                            <\/select>\n                <\/label>\n                <p class=\"ap-voucher-note\">Applies to the card and to anything the recipient gets from us.<\/p>\n\n                <label class=\"ap-voucher-check\" style=\"margin-top:14px;\">\n                    <input type=\"checkbox\" data-role=\"hide_value\">\n                    <span>Don\u2019t show the amount on the voucher. The card then just says \u201cVoucher\u201d \u2013 the balance stays the same and can be checked any time.<\/span>\n                <\/label>\n            <\/fieldset>\n\n            <p class=\"ap-voucher-total\">To pay: <strong data-role=\"total\">\u20ac100.00<\/strong><\/p>\n\n            <label class=\"ap-voucher-check\">\n                <input type=\"checkbox\" data-role=\"terms\" required>\n                <span>I understand: whoever holds the voucher can redeem it, it can\u2019t be exchanged for cash, and any remaining balance stays on the code. *<\/span>\n            <\/label>\n\n            <p class=\"ap-voucher-note\" style=\"margin-top:-8px;\">Fields marked * are the ones we need. The recipient\u2019s email address is optional.<\/p>\n\n            <button type=\"submit\" class=\"ap-voucher-submit\" data-role=\"submit\">Buy voucher<\/button>\n            <p class=\"ap-voucher-note\">Payment is handled by our payment provider. The voucher becomes valid and is sent out once the payment is confirmed.<\/p>\n        <\/form>\n    <\/div>\n    <script>\n    (function(){\n      var root = document.getElementById(\"apv3316\");\n      if (!root) { return; }\n      var api = \"https:\\\/\\\/the-yard.at\\\/en\\\/wp-json\\\/activities\\\/v1\\\/voucher\\\/purchase\";\n      var txt = {\"amount\":\"Please choose an amount between {min} and {max}.\",\"round\":\"Please choose a whole euro amount.\",\"buyer_name\":\"Please enter your name.\",\"buyer_email\":\"Please enter a valid email address.\",\"recipient_name\":\"Please enter the name of the person receiving the voucher.\",\"recipient_email\":\"Please enter a valid email address for the person receiving the voucher.\",\"terms\":\"Please confirm the voucher conditions.\",\"start\":\"The payment could not be started.\",\"connection\":\"Connection failed. Please try again.\",\"submit\":\"Buy voucher\",\"busy\":\"Preparing payment \\u2026\"};\n\n      \/\/ Die Seitensprache aus dem <html lang>-Merkmal, der Serverwert als\n      \/\/ Rueckfall. Das hilft dort, wo das Formular ausserhalb eines normalen\n      \/\/ Seitenaufrufs gezeichnet wurde (Divi-Builder, Vorschau).\n      \/\/\n      \/\/ Gegen einen Seiten-Cache hilft es NICHT: <html lang> steht im selben\n      \/\/ zwischengespeicherten Dokument. Was dagegen schuetzt, ist, dass\n      \/\/ \/gutschein\/ und \/en\/gutschein\/ zwei verschiedene Adressen sind - jeder\n      \/\/ Cache, der je Adresse ablegt, kann sie nicht vermischen.\n      function docLang(fallback){\n        try {\n          var tag = (document.documentElement.getAttribute('lang') || '').toLowerCase();\n          if (tag.indexOf('en') === 0) { return 'en'; }\n          if (tag.indexOf('de') === 0) { return 'de'; }\n        } catch (e) {}\n        return fallback;\n      }\n      var pageLang = docLang(\"en\");\n      var min = 20, max = 1000;\n      var form = root.querySelector('[data-role=form]');\n      var msg = root.querySelector('[data-role=message]');\n      var free = root.querySelector('[data-role=free]');\n      var totalOut = root.querySelector('[data-role=total]');\n      var submit = root.querySelector('[data-role=submit]');\n      var buttons = Array.prototype.slice.call(root.querySelectorAll('.ap-voucher-amount'));\n      var amount = 100;\n      var mail = \/^[^@\\s]+@[^@\\s]+\\.[^@\\s]+$\/;\n\n      \/\/ Dieselbe Schreibweise wie ap_i18n_price() in PHP: deutsch \"100,00 \u20ac\",\n      \/\/ englisch \"\u20ac100.00\". Sonst stuende auf dem Knopf das eine und zwei\n      \/\/ Zeilen darunter das andere. Intl mit style:currency setzt das Zeichen\n      \/\/ auch im Deutschen davor, deshalb wird es hier selbst gesetzt.\n      function money(v){\n        try {\n          if (pageLang === 'en') {\n            return '\u20ac' + new Intl.NumberFormat('en-GB',{minimumFractionDigits:2,maximumFractionDigits:2}).format(v||0);\n          }\n          return new Intl.NumberFormat('de-AT',{minimumFractionDigits:2,maximumFractionDigits:2}).format(v||0) + ' \u20ac';\n        }\n        catch(e){ return pageLang === 'en' ? ('\u20ac' + (v||0)) : ((v||0)+' \u20ac'); }\n      }\n      function val(role){ var el = root.querySelector('[data-role='+role+']'); return el ? el.value.trim() : ''; }\n      function show(text, kind){\n        msg.textContent = text;\n        msg.className = 'ap-voucher-msg ' + (kind || '');\n        msg.style.display = text ? 'block' : 'none';\n        if (text) { msg.scrollIntoView({block:'nearest', behavior:'smooth'}); }\n      }\n      function paint(){\n        buttons.forEach(function(b){ b.setAttribute('aria-pressed', parseFloat(b.dataset.amount) === amount ? 'true' : 'false'); });\n        totalOut.textContent = money(amount);\n      }\n\n      \/\/ Die Adresse der beschenkten Person ist freiwillig. Bleibt sie leer,\n      \/\/ hat der Wunschtermin niemanden zu benachrichtigen - er verschwindet\n      \/\/ dann, und der Hinweis sagt, was statt dessen passiert.\n      var mailInput = root.querySelector('[data-role=recipient_email]');\n      var dateField = root.querySelector('[data-role=send_at_field]');\n      var dateInput = root.querySelector('[data-role=send_at]');\n      var recNote = root.querySelector('[data-role=recipient_note]');\n      var selfNote = root.querySelector('[data-role=deliver_note]');\n\n      function paintDelivery(){\n        var empty = !mailInput || mailInput.value.trim() === '';\n        if (dateField) { dateField.style.display = empty ? 'none' : ''; }\n        if (recNote) { recNote.style.display = empty ? 'none' : ''; }\n        if (selfNote) { selfNote.style.display = empty ? '' : 'none'; }\n        if (empty && dateInput) { dateInput.value = ''; }\n      }\n\n      if (mailInput) {\n        mailInput.addEventListener('input', paintDelivery);\n        mailInput.addEventListener('change', paintDelivery);\n      }\n\n      \/\/ Steht in der Auswahl noch die Serversprache, aber die Seite ist\n      \/\/ englisch (oder umgekehrt), zieht die Auswahl einmal nach.\n      var langSelect = root.querySelector('[data-role=voucher_language]');\n      if (langSelect) {\n        for (var i = 0; i < langSelect.options.length; i++) {\n          if (langSelect.options[i].value === pageLang) { langSelect.value = pageLang; break; }\n        }\n      }\n\n      buttons.forEach(function(b){\n        b.addEventListener('click', function(){ amount = parseFloat(b.dataset.amount) || 0; free.value = ''; paint(); });\n      });\n\n      free.addEventListener('input', function(){\n        var v = parseFloat(free.value.replace(',', '.'));\n        if (!isNaN(v)) { amount = v; }\n        paint();\n      });\n\n      form.addEventListener('submit', function(event){\n        event.preventDefault();\n        show('');\n\n        if (!(amount >= min && amount <= max)) {\n          show(txt.amount.replace('{min}', money(min)).replace('{max}', money(max)), 'is-error'); return;\n        }\n        if (Math.abs(amount - Math.round(amount)) > 0.004) { show(txt.round, 'is-error'); return; }\n        if (!val('buyer_name')) { show(txt.buyer_name, 'is-error'); return; }\n        if (!mail.test(val('buyer_email'))) { show(txt.buyer_email, 'is-error'); return; }\n        if (!val('recipient_name')) { show(txt.recipient_name, 'is-error'); return; }\n        \/\/ Leer ist in Ordnung - dann bekommt die Kaeuferin das PDF. Steht\n        \/\/ etwas drin, muss es eine Adresse sein: ein Tippfehler waere sonst\n        \/\/ ein Geschenk, das nie ankommt.\n        var rec = val('recipient_email');\n        if (rec !== '' && !mail.test(rec)) { show(txt.recipient_email, 'is-error'); return; }\n        if (!root.querySelector('[data-role=terms]').checked) { show(txt.terms, 'is-error'); return; }\n\n        submit.disabled = true;\n        submit.textContent = txt.busy;\n\n        fetch(api, {\n          method: 'POST',\n          headers: {'Content-Type': 'application\/json'},\n          body: JSON.stringify({\n            amount: amount,\n            buyer_name: val('buyer_name'),\n            buyer_email: val('buyer_email'),\n            recipient_name: val('recipient_name'),\n            recipient_email: rec,\n            personal_message: val('personal_message'),\n            send_at: rec === '' ? '' : val('send_at'),\n            hide_value: root.querySelector('[data-role=hide_value]').checked,\n            language: pageLang,\n            voucher_language: val('voucher_language'),\n            accept_terms: true\n          })\n        }).then(function(r){ return r.json().then(function(d){ return {ok: r.ok, data: d}; }); })\n        .then(function(res){\n          if (res.ok && res.data && res.data.checkout_url) { window.location.href = res.data.checkout_url; return; }\n          show((res.data && res.data.message) || txt.start, 'is-error');\n          submit.disabled = false;\n          submit.textContent = txt.submit;\n        })\n        .catch(function(){\n          show(txt.connection, 'is-error');\n          submit.disabled = false;\n          submit.textContent = txt.submit;\n        });\n      });\n\n      paint();\n      paintDelivery();\n    })();\n    <\/script>\n    <\/div><\/div>\n<\/div>\n<\/div>\n<\/div>","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-1045","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/the-yard.at\/en\/wp-json\/wp\/v2\/pages\/1045","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/the-yard.at\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/the-yard.at\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/the-yard.at\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/the-yard.at\/en\/wp-json\/wp\/v2\/comments?post=1045"}],"version-history":[{"count":5,"href":"https:\/\/the-yard.at\/en\/wp-json\/wp\/v2\/pages\/1045\/revisions"}],"predecessor-version":[{"id":1063,"href":"https:\/\/the-yard.at\/en\/wp-json\/wp\/v2\/pages\/1045\/revisions\/1063"}],"wp:attachment":[{"href":"https:\/\/the-yard.at\/en\/wp-json\/wp\/v2\/media?parent=1045"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}