{"id":14713,"date":"2025-11-19T12:08:13","date_gmt":"2025-11-19T12:08:13","guid":{"rendered":"https:\/\/mecfs-research.org\/?page_id=14713"},"modified":"2026-01-30T13:58:29","modified_gmt":"2026-01-30T13:58:29","slug":"spende-abgebrochen","status":"publish","type":"page","link":"https:\/\/mecfs-research.org\/en\/support\/spende-abgebrochen\/","title":{"rendered":"Spende abgebrochen"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"14713\" class=\"elementor elementor-14713\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-6e68f0b elementor-section-boxed elementor-section-height-default elementor-section-height-default rael-particle-no\" data-id=\"6e68f0b\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;rae_animations_entrance&quot;:&quot;none&quot;}\">\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-5218b71 rael-particle-no\" data-id=\"5218b71\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-2a52329 elementor-widget elementor-widget-html\" data-id=\"2a52329\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- \n  TITEL: Feedback-Formular (Mit rotem Abbruch-Icon & Card Design)\n  INTEGRATION: HTML Widget\n-->\n\n<style>\n  \/* Hauptcontainer im \"Card\"-Design *\/\n  #feedback-widget { \n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n    background: #ffffff; \n    border: 1px solid #e5e5e5; \n    border-radius: 12px; \n    padding: 40px; \n    max-width: 600px; \n    margin: 20px auto; \n    box-shadow: 0 5px 20px rgba(0,0,0,0.03); \n    text-align: center;\n    color: #3c434a;\n    position: relative;\n    overflow: hidden;\n  }\n\n  \/* \u00dcberschriften *\/\n  #feedback-widget h3 { \n    margin-top: 15px; \n    color: #d63638; \/* WordPress Error Red *\/\n    font-size: 1.6rem;\n    font-weight: 600;\n    margin-bottom: 10px;\n  }\n\n  #feedback-widget h4.success-title {\n    color: #46b450; \/* Success Green *\/\n    font-size: 1.8rem;\n    margin: 20px 0 10px;\n    font-weight: bold;\n  }\n\n  #feedback-widget p {\n    color: #646970;\n    font-size: 1rem;\n    line-height: 1.6;\n    margin-bottom: 30px;\n  }\n\n  \/* Formular-Elemente linksb\u00fcndig\/zentriert mixen *\/\n  .form-content-left {\n    text-align: left;\n  }\n\n  \/* Modern Radio Cards *\/\n  .fw-option-group { \n    display: flex; \n    flex-direction: column; \n    gap: 12px; \n    margin-bottom: 25px; \n  }\n\n  .fw-option { \n    position: relative;\n    padding: 12px 16px; \n    border: 1px solid #dcdcde; \n    border-radius: 6px; \n    cursor: pointer; \n    display: flex; \n    align-items: center; \n    transition: all 0.2s ease;\n    background: #fff;\n    text-align: left;\n  }\n\n  .fw-option:hover { \n    border-color: #d63638; \/* Red Hover *\/\n    background: #fffafa;\n  }\n\n  .fw-option.selected {\n    border-color: #d63638;\n    background-color: #fcf0f1;\n    color: #b32d2e;\n    font-weight: 500;\n  }\n\n  .fw-option input[type=\"radio\"] { \n    margin-right: 15px; \n    accent-color: #d63638;\n    transform: scale(1.1);\n  }\n\n  \/* Textarea *\/\n  .fw-textarea { \n    width: 100%; \n    padding: 12px; \n    border: 1px solid #dcdcde; \n    border-radius: 4px; \n    min-height: 80px; \n    margin-bottom: 20px; \n    font-family: inherit;\n    font-size: 0.95rem;\n    resize: vertical;\n  }\n  .fw-textarea:focus {\n    outline: none;\n    border-color: #d63638;\n    box-shadow: 0 0 0 1px #d63638;\n  }\n\n  \/* Button *\/\n  .fw-submit-btn { \n    background-color: #d63638 !important; \/* Error Red Button *\/\n    color: white !important; \n    border: none !important; \n    padding: 12px 32px; \n    font-size: 1rem; \n    font-weight: 600; \n    border-radius: 50px; \n    cursor: pointer; \n    transition: transform 0.1s, background-color 0.2s;\n    display: inline-block;\n    text-decoration: none;\n  }\n\n  .fw-submit-btn:hover { \n    background-color: #b32d2e; \n  }\n\n  .fw-submit-btn:active {\n    transform: scale(0.98);\n  }\n\n  .fw-submit-btn:disabled {\n    background-color: #eebbbd;\n    cursor: default;\n    transform: none;\n  }\n\n  \/* Success View (Hidden by default) *\/\n  #feedback-success { \n    display: none; \n    animation: fadeIn 0.5s ease;\n  }\n\n  @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }\n\n  \/* --- ROTES KREUZ ANIMATION (F\u00fcr Abbruch) --- *\/\n  .cross-circle {\n    width: 80px;\n    height: 80px;\n    margin: 0 auto;\n    border-radius: 50%;\n    display: block;\n    stroke-width: 2;\n    stroke: #fff;\n    stroke-miterlimit: 10;\n    box-shadow: inset 0px 0px 0px #d63638;\n    animation: fillRed .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;\n    position: relative;\n  }\n\n  .cross-circle circle {\n    stroke-dasharray: 166;\n    stroke-dashoffset: 166;\n    stroke-width: 2;\n    stroke-miterlimit: 10;\n    stroke: #d63638;\n    fill: none;\n    animation: strokeRed 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;\n  }\n\n  .cross-mark {\n    transform-origin: 50% 50%;\n    stroke-dasharray: 48;\n    stroke-dashoffset: 48;\n    animation: strokeRed 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;\n  }\n\n  @keyframes strokeRed { 100% { stroke-dashoffset: 0; } }\n  @keyframes fillRed { 100% { box-shadow: inset 0px 0px 0px 50px #d63638; } }\n\n  \/* --- GR\u00dcNES H\u00c4KCHEN (F\u00fcr Success nach Feedback) --- *\/\n  .checkmark-circle {\n    width: 80px;\n    height: 80px;\n    margin: 0 auto;\n    border-radius: 50%;\n    display: block;\n    stroke-width: 2;\n    stroke: #fff;\n    stroke-miterlimit: 10;\n    box-shadow: inset 0px 0px 0px #46b450;\n    animation: fillGreen .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;\n    position: relative;\n  }\n  .checkmark-circle circle {\n    stroke-dasharray: 166;\n    stroke-dashoffset: 166;\n    stroke-width: 2;\n    stroke-miterlimit: 10;\n    stroke: #46b450;\n    fill: none;\n    animation: strokeGreen 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;\n  }\n  .checkmark-check {\n    transform-origin: 50% 50%;\n    stroke-dasharray: 48;\n    stroke-dashoffset: 48;\n    animation: strokeGreen 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;\n  }\n  @keyframes strokeGreen { 100% { stroke-dashoffset: 0; } }\n  @keyframes fillGreen { 100% { box-shadow: inset 0px 0px 0px 50px #46b450; } }\n\n<\/style>\n\n<div id=\"feedback-widget\">\n  \n  <!-- STATE 1: FORMULAR MIT ROTEM KREUZ -->\n  <div id=\"feedback-form-wrap\">\n    \n    <!-- Animiertes Rotes Kreuz Icon -->\n    <div style=\"margin-bottom: 15px;\">\n      <svg class=\"cross-circle\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 52 52\">\n        <circle class=\"cross-circle-bg\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\"\/>\n        <path class=\"cross-mark\" fill=\"none\" d=\"M16 16 36 36 M36 16 16 36\" \/>\n      <\/svg>\n    <\/div>\n\n    <h3>Schade, dass es nicht geklappt hat.<\/h3>\n    <p>Hilf uns kurz, besser zu werden (anonym).<\/p>\n\n    <form id=\"cancelFeedbackForm\" class=\"form-content-left\">\n      <div class=\"fw-option-group\">\n        <label class=\"fw-option\">\n          <input type=\"radio\" name=\"reason\" value=\"technical\" required> \n          <span>Es gab ein technisches Problem<\/span>\n        <\/label>\n        <label class=\"fw-option\">\n          <input type=\"radio\" name=\"reason\" value=\"payment_method\"> \n          <span>Meine bevorzugte Zahlungsart fehlte<\/span>\n        <\/label>\n        <label class=\"fw-option\">\n          <input type=\"radio\" name=\"reason\" value=\"amount\"> \n          <span>Der Betrag \/ Intervall passte nicht<\/span>\n        <\/label>\n        <label class=\"fw-option\">\n          <input type=\"radio\" name=\"reason\" value=\"other\"> \n          <span>Anderer Grund \/ \u00dcberlege noch<\/span>\n        <\/label>\n      <\/div>\n      <!-- Hidden Referrer -->\n      <input type=\"hidden\" name=\"referrer\" id=\"fb_referrer\">\n\n      <textarea name=\"message\" class=\"fw-textarea\" placeholder=\"M\u00f6chtest du uns noch etwas mitteilen? (Optional)\"><\/textarea>\n\n      <div style=\"text-align: center;\">\n        <button type=\"submit\" class=\"fw-submit-btn\" id=\"fb_submit_btn\">Feedback senden<\/button>\n      <\/div>\n    <\/form>\n  <\/div>\n\n  <!-- STATE 2: SUCCESS (Gr\u00fcnes H\u00e4kchen nach Absenden) -->\n  <div id=\"feedback-success\">\n    <!-- Animiertes Gr\u00fcnes H\u00e4kchen -->\n    <div style=\"margin-bottom: 20px;\">\n      <svg class=\"checkmark-circle\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 52 52\">\n        <circle class=\"checkmark-circle-bg\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\"\/>\n        <path class=\"checkmark-check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\/>\n      <\/svg>\n    <\/div>\n\n    <h4 class=\"success-title\">Vielen Dank!<\/h4>\n    \n    <p>\n      Dein Feedback ist bei uns eingegangen.<br>\n      Wir nutzen es, um den Prozess f\u00fcr alle zu verbessern.\n    <\/p>\n\n    <a href=\"\/\" class=\"fw-submit-btn\" style=\"background-color: #333333 !important;\">Zur\u00fcck zur Startseite<\/a>\n  <\/div>\n\n<\/div>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n  const form      = document.getElementById('cancelFeedbackForm');\n  const formWrap  = document.getElementById('feedback-form-wrap');\n  const successMsg= document.getElementById('feedback-success');\n  const btn       = document.getElementById('fb_submit_btn');\n  const refField  = document.getElementById('fb_referrer');\n  const options   = document.querySelectorAll('.fw-option');\n\n  \/\/ Referrer Tracking\n  refField.value = document.referrer || window.location.href;\n\n  \/\/ UI: Auswahl-Highlighting f\u00fcr die Optionen\n  options.forEach(opt => {\n    opt.addEventListener('click', () => {\n      options.forEach(o => o.classList.remove('selected'));\n      opt.classList.add('selected');\n      const radio = opt.querySelector('input[type=\"radio\"]');\n      if(radio) radio.checked = true;\n    });\n  });\n\n  \/\/ AJAX URL bauen\n  const WP_AJAX_URL = window.location.origin + '\/wp-admin\/admin-ajax.php';\n\n  form.addEventListener('submit', async function(e) {\n    e.preventDefault();\n\n    \/\/ UI: Button Status\n    btn.innerText = \"Sende...\";\n    btn.disabled = true;\n    btn.style.opacity = \"0.7\";\n\n    const formData = new FormData(form);\n    formData.append('action', 'submit_donation_feedback');\n\n    try {\n      const response = await fetch(WP_AJAX_URL, {\n        method: 'POST',\n        body: formData\n      });\n\n      \/\/ Ergebnis lesen\n      const raw = await response.text();\n      let result = null;\n      try { result = JSON.parse(raw); } catch (e) {}\n\n      if (result && result.success) {\n        \/\/ Switch to Success View\n        formWrap.style.display = 'none';\n        successMsg.style.display = 'block';\n        \n        \/\/ Smooth Scroll\n        document.getElementById('feedback-widget').scrollIntoView({behavior: 'smooth', block: 'center'});\n      } else {\n        console.error(\"Server Error:\", raw);\n        btn.disabled = false;\n        btn.style.opacity = \"1\";\n        btn.innerText = \"Fehler. Bitte nochmal.\";\n        alert(\"Es gab ein Problem beim Speichern: \" + (result?.data?.message || \"Unbekannt\"));\n      }\n    } catch (networkError) {\n      console.error(networkError);\n      btn.disabled = false;\n      btn.style.opacity = \"1\";\n      btn.innerText = \"Netzwerkfehler\";\n      alert(\"Bitte pr\u00fcfe deine Internetverbindung.\");\n    }\n  });\n});\n<\/script>\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<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Schade, dass es nicht geklappt hat. Hilf uns kurz, besser zu werden (anonym). Es gab ein technisches Problem Meine bevorzugte Zahlungsart fehlte Der Betrag \/ Intervall passte nicht Anderer Grund \/ \u00dcberlege noch Feedback senden Vielen Dank! Dein Feedback ist bei uns eingegangen. Wir nutzen es, um den Prozess f\u00fcr alle zu verbessern. Zur\u00fcck zur [&hellip;]<\/p>\n","protected":false},"author":9,"featured_media":0,"parent":144,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-14713","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/mecfs-research.org\/en\/wp-json\/wp\/v2\/pages\/14713","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mecfs-research.org\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mecfs-research.org\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mecfs-research.org\/en\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/mecfs-research.org\/en\/wp-json\/wp\/v2\/comments?post=14713"}],"version-history":[{"count":31,"href":"https:\/\/mecfs-research.org\/en\/wp-json\/wp\/v2\/pages\/14713\/revisions"}],"predecessor-version":[{"id":14788,"href":"https:\/\/mecfs-research.org\/en\/wp-json\/wp\/v2\/pages\/14713\/revisions\/14788"}],"up":[{"embeddable":true,"href":"https:\/\/mecfs-research.org\/en\/wp-json\/wp\/v2\/pages\/144"}],"wp:attachment":[{"href":"https:\/\/mecfs-research.org\/en\/wp-json\/wp\/v2\/media?parent=14713"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}