{"id":14972,"date":"2025-11-26T14:29:12","date_gmt":"2025-11-26T14:29:12","guid":{"rendered":"https:\/\/mecfs-research.org\/?page_id=14972"},"modified":"2026-02-12T11:31:55","modified_gmt":"2026-02-12T11:31:55","slug":"spendenabo","status":"publish","type":"page","link":"https:\/\/mecfs-research.org\/en\/support\/spendenabo\/","title":{"rendered":"Donation subscription"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"14972\" class=\"elementor elementor-14972\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-6196952 elementor-section-full_width elementor-section-height-default elementor-section-height-default rael-particle-no\" data-id=\"6196952\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&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-9e086b0 rael-particle-no\" data-id=\"9e086b0\" 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-188c704 elementor-widget elementor-widget-html\" data-id=\"188c704\" 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     ME\/CFS SPENDENABO WIDGET - ELEMENTOR SNIPPET\n     ============================================= -->\n\n<!-- 1. Externe Bibliotheken -->\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n\n<!-- React & Babel -->\n<script src=\"https:\/\/unpkg.com\/react@18\/umd\/react.development.js\" crossorigin><\/script>\n<script src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.development.js\" crossorigin><\/script>\n<script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\n\n<!-- Stripe -->\n<script src=\"https:\/\/js.stripe.com\/v3\/\"><\/script>\n\n<!-- 2. Tailwind Config -->\n<script>\n    tailwind.config = {\n        theme: {\n            extend: {\n                colors: {\n                    white: '#ffffff',\n                    ci: {\n                        blue: '#16355d',    \n                        dark: '#1f2433',    \n                        highlight: '#6ec1e4', \n                        copy: '#7a7a7a',    \n                        bgLight: '#f5f8fb', \n                        bgWhite: '#fbfbfb', \n                        grey: '#f0f1ec'     \n                    },\n                    slate: {\n                        100: '#f1f5f9',\n                        200: '#e2e8f0',\n                        300: '#cbd5e1',\n                        400: '#94a3b8',\n                    }\n                },\n                fontFamily: {\n                    sans: ['\"DM Sans\"', 'sans-serif'],\n                },\n                maxWidth: {\n                    'ci': '1140px', \n                }\n            }\n        }\n    }\n<\/script>\n\n<!-- 3. Styles -->\n<style>\n    \/* ============================================\n       BULLETPROOF CSS RESETS f\u00fcr Elementor\/WordPress\n       ============================================ *\/\n    \n    \/* --- ROOT SCOPE: Alle Styles auf diesen Container beschr\u00e4nken --- *\/\n    .merf-5euro-widget,\n    .merf-5euro-widget * {\n        box-sizing: border-box !important;\n    }\n\n    \/* --- TYPOGRAFIE & RESET OVERRIDES --- *\/\n    .merf-5euro-widget {\n        font-family: 'DM Sans', sans-serif !important;\n        color: #7a7a7a !important;\n    }\n    .merf-5euro-widget h1, \n    .merf-5euro-widget h2, \n    .merf-5euro-widget h3, \n    .merf-5euro-widget h4, \n    .merf-5euro-widget h5, \n    .merf-5euro-widget h6 {\n        font-family: 'DM Sans', sans-serif !important;\n        margin-top: 0 !important;\n        line-height: 1.3 !important;\n        \/* KEINE color hier - wird \u00fcber Utility-Klassen gesteuert *\/\n    }\n    .merf-5euro-widget p, \n    .merf-5euro-widget li, \n    .merf-5euro-widget span, \n    .merf-5euro-widget div, \n    .merf-5euro-widget a, \n    .merf-5euro-widget button, \n    .merf-5euro-widget input, \n    .merf-5euro-widget label {\n        font-family: 'DM Sans', sans-serif !important;\n    }\n    \n    \/* --- WEISZE HEADLINES (f\u00fcr dunkle Bereiche) --- *\/\n    .merf-5euro-widget .text-white,\n    .merf-5euro-widget .\\!text-white,\n    .merf-5euro-widget h1.text-white,\n    .merf-5euro-widget h2.text-white,\n    .merf-5euro-widget h3.text-white,\n    .merf-5euro-widget h4.text-white,\n    .merf-5euro-widget h5.text-white,\n    .merf-5euro-widget h1.\\!text-white,\n    .merf-5euro-widget h2.\\!text-white,\n    .merf-5euro-widget h3.\\!text-white,\n    .merf-5euro-widget h4.\\!text-white,\n    .merf-5euro-widget h5.\\!text-white {\n        color: #ffffff !important;\n    }\n    \n    \/* --- BLOCKQUOTE RESET --- *\/\n    .merf-5euro-widget blockquote {\n        border: none !important;\n        border-left: none !important;\n        padding-left: 0 !important;\n        margin: 0 !important;\n    }\n\n    \/* --- LISTEN-RESETS gegen Elementor --- *\/\n    .merf-5euro-widget ul, \n    .merf-5euro-widget ol {\n        list-style-type: none;\n        padding-left: 0;\n        margin: 0;\n    }\n    .merf-5euro-widget ul li, \n    .merf-5euro-widget ol li {\n        list-style: none;\n        padding-left: 0;\n    }\n    .merf-5euro-widget ul li::before, \n    .merf-5euro-widget ol li::before {\n        content: none;\n        display: none;\n    }\n    .merf-5euro-widget ul li::marker, \n    .merf-5euro-widget ol li::marker {\n        content: none;\n        display: none;\n    }\n    \n    \/* --- AUSNAHME: Listen mit expliziten Tailwind-Klassen wiederherstellen --- *\/\n    .merf-5euro-widget ul.\\!list-disc,\n    .merf-5euro-widget ul.list-disc {\n        list-style-type: disc !important;\n    }\n    .merf-5euro-widget ul.\\!list-inside,\n    .merf-5euro-widget ul.list-inside {\n        list-style-position: inside !important;\n    }\n    .merf-5euro-widget ul.\\!list-disc li,\n    .merf-5euro-widget ul.list-disc li {\n        list-style: inherit !important;\n    }\n    .merf-5euro-widget ul.\\!list-disc li::marker,\n    .merf-5euro-widget ul.list-disc li::marker {\n        content: unset !important;\n        display: unset !important;\n    }\n\n    \/* --- LINK-RESETS gegen WordPress Theme --- *\/\n    .merf-5euro-widget a {\n        text-decoration: none;\n        transition: all 0.2s ease !important;\n    }\n    .merf-5euro-widget a:hover {\n        text-decoration: none;\n    }\n\n    \/* --- BILD-RESETS --- *\/\n    .merf-5euro-widget img {\n        max-width: 100% !important;\n        height: auto !important;\n        border: none !important;\n        outline: none !important;\n    }\n\n    \/* CRITICAL: Link Color Protections *\/\n    .force-white-text {\n        color: #ffffff !important;\n    }\n    \n    \/* Spezifischer Schutz f\u00fcr den Strategie-Button gegen Elementor *\/\n    #strategy-btn {\n        color: #cbd5e1 !important; \/* Slate 300 *\/\n        text-decoration: none !important;\n    }\n    #strategy-btn:hover {\n        color: #ffffff !important;\n        border-color: #6ec1e4 !important; \/* CI Highlight *\/\n    }\n    #strategy-btn span, #strategy-btn i {\n        color: inherit !important;\n    }\n\n    \/* --- SECTION & CARD STYLES (Bulletproof) --- *\/\n    .merf-5euro-widget section {\n        position: relative !important;\n        width: 100% !important;\n    }\n\n    \/* Cards \/ Box Styles - Bulletproof *\/\n    .merf-5euro-widget .bg-ci-bgLight {\n        background-color: #f5f8fb !important;\n    }\n    .merf-5euro-widget .bg-ci-bgWhite {\n        background-color: #fbfbfb !important;\n    }\n    .merf-5euro-widget .bg-ci-blue {\n        background-color: #16355d !important;\n    }\n    .merf-5euro-widget .bg-ci-dark {\n        background-color: #1f2433 !important;\n    }\n    .merf-5euro-widget .bg-white {\n        background-color: #ffffff !important;\n    }\n\n    \/* Text Colors (Bulletproof) - H\u00f6chste Spezifit\u00e4t *\/\n    .merf-5euro-widget .text-ci-dark,\n    .merf-5euro-widget .\\!text-ci-dark {\n        color: #1f2433 !important;\n    }\n    .merf-5euro-widget .text-ci-copy {\n        color: #7a7a7a !important;\n    }\n    .merf-5euro-widget .text-ci-highlight {\n        color: #6ec1e4 !important;\n    }\n    .merf-5euro-widget .text-ci-blue {\n        color: #16355d !important;\n    }\n    .merf-5euro-widget .text-slate-100,\n    .merf-5euro-widget .\\!text-slate-100 {\n        color: #f1f5f9 !important;\n    }\n    .merf-5euro-widget .text-slate-200,\n    .merf-5euro-widget .\\!text-slate-200 {\n        color: #e2e8f0 !important;\n    }\n    .merf-5euro-widget .text-slate-300,\n    .merf-5euro-widget .\\!text-slate-300 {\n        color: #cbd5e1 !important;\n    }\n    .merf-5euro-widget .text-slate-400,\n    .merf-5euro-widget .\\!text-slate-400 {\n        color: #94a3b8 !important;\n    }\n\n    \/* Rounded Corners - Bulletproof *\/\n    .merf-5euro-widget .rounded-2xl {\n        border-radius: 1rem !important;\n    }\n    .merf-5euro-widget .rounded-full {\n        border-radius: 9999px !important;\n    }\n    .merf-5euro-widget .rounded-lg {\n        border-radius: 0.5rem !important;\n    }\n    .merf-5euro-widget .rounded-xl {\n        border-radius: 0.75rem !important;\n    }\n\n    \/* Container Helper *\/\n    .merf-5euro-widget .ci-container {\n        max-width: 1140px !important;\n        margin-left: auto !important;\n        margin-right: auto !important;\n        width: 100% !important;\n        padding-left: 0 !important;\n        padding-right: 0 !important;\n    }\n\n    \/* --- FONT AWESOME ICONS (Bulletproof) --- *\/\n    .merf-5euro-widget .fa-solid, \n    .merf-5euro-widget .fa-regular, \n    .merf-5euro-widget [class^=\"fa-\"], \n    .merf-5euro-widget [class*=\" fa-\"] {\n        font-family: \"Font Awesome 5 Free\";\n        font-style: normal;\n        font-weight: 900 !important;\n        display: inline-block;\n        text-rendering: auto !important;\n        -webkit-font-smoothing: antialiased !important;\n    }\n    .merf-5euro-widget .fa-solid {\n        font-weight: 900 !important;\n    }\n    .merf-5euro-widget i.fa-solid, \n    .merf-5euro-widget i.fa-regular {\n        font-style: normal !important;\n        line-height: 1 !important;\n    }\n\n    \/* --- TESTIMONIAL CARDS (Bulletproof) --- *\/\n    .merf-5euro-widget .testimonial-card {\n        background-color: #f5f8fb !important;\n        padding: 2rem !important;\n        border-radius: 1rem !important;\n        position: relative !important;\n    }\n    .merf-5euro-widget .testimonial-card p {\n        color: #7a7a7a !important;\n        font-style: italic !important;\n        line-height: 1.6 !important;\n    }\n    .merf-5euro-widget .testimonial-avatar {\n        width: 4rem !important;\n        height: 4rem !important;\n        border-radius: 9999px !important;\n        overflow: hidden !important;\n        flex-shrink: 0 !important;\n    }\n    .merf-5euro-widget .testimonial-avatar img {\n        width: 100% !important;\n        height: 100% !important;\n        object-fit: cover !important;\n    }\n\n    \/* --- IMPACT CARDS (Bulletproof) --- *\/\n    .merf-5euro-widget .impact-card {\n        display: flex !important;\n        align-items: center !important;\n        gap: 1.5rem !important;\n        padding: 1.5rem !important;\n        border-radius: 1rem !important;\n    }\n    .merf-5euro-widget .impact-card-icon {\n        width: 4rem !important;\n        height: 4rem !important;\n        border-radius: 9999px !important;\n        display: flex !important;\n        align-items: center !important;\n        justify-content: center !important;\n        font-size: 1.5rem !important;\n        flex-shrink: 0 !important;\n    }\n\n    \/* --- CTA BUTTONS (Bulletproof) --- *\/\n    .merf-5euro-widget .cta-button {\n        display: inline-block !important;\n        background-color: #6ec1e4 !important;\n        color: #16355d !important;\n        font-weight: 700 !important;\n        font-size: 1.125rem !important;\n        padding: 1rem 2.5rem !important;\n        border-radius: 9999px !important;\n        border: none !important;\n        cursor: pointer !important;\n        text-decoration: none !important;\n        transition: all 0.2s ease !important;\n        box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important;\n    }\n    .merf-5euro-widget .cta-button:hover {\n        background-color: #ffffff !important;\n        transform: translateY(-2px) !important;\n    }\n\n    \/* Hero Background *\/\n    .hero-bg {\n        background: linear-gradient(165deg, #2a5a85 0%, #16355d 55%, #152a45 100%);\n    }\n    \n    \/* Wei\u00dfe Texte in dunklen Bereichen - Bulletproof *\/\n    .hero-bg h1,\n    .hero-bg h2.text-white,\n    .hero-bg h3.text-white,\n    .hero-bg h4.text-white,\n    .hero-bg h5.text-white,\n    .hero-bg h1.\\!text-white,\n    .hero-bg h2.\\!text-white,\n    .hero-bg h3.\\!text-white {\n        color: #ffffff !important;\n    }\n    .hero-bg .text-ci-highlight,\n    .hero-bg h2.text-ci-highlight {\n        color: #6ec1e4 !important;\n    }\n    .bg-ci-blue h1,\n    .bg-ci-blue h2,\n    .bg-ci-blue h3,\n    .bg-ci-blue h4,\n    .bg-ci-blue .text-white,\n    .bg-ci-blue .\\!text-white {\n        color: #ffffff !important;\n    }\n\n    \/* --- SLIDER RESETS --- *\/\n    #research-funding-root input[type=range] {\n        -webkit-appearance: none !important; \n        appearance: none !important;\n        background: transparent !important; \n        border: none !important;\n        outline: none !important;\n        box-shadow: none !important;\n        padding: 0 !important;\n        margin: 0 !important;\n        height: 32px !important;\n        width: 100% !important;\n        display: block !important;\n        position: absolute; \n        top: 0;\n        left: 0;\n        z-index: 1; \n        cursor: pointer;\n    }\n    #research-funding-root input[type=range]:focus {\n        outline: none !important;\n        border: none !important;\n        box-shadow: none !important;\n    }\n    #research-funding-root input[type=range]::-webkit-slider-runnable-track {\n        width: 100%;\n        height: 32px;\n        background: transparent !important;\n        border: none !important;\n        box-shadow: none !important;\n        outline: none !important;\n    }\n    #research-funding-root input[type=range]::-moz-range-track {\n        width: 100%;\n        height: 32px;\n        background: transparent !important;\n        border: none !important;\n        box-shadow: none !important;\n        outline: none !important;\n    }\n    #research-funding-root input[type=range]::-webkit-slider-thumb {\n        -webkit-appearance: none !important;\n        appearance: none !important;\n        height: 32px !important; \n        width: 32px !important;\n        background: transparent !important;\n        border: none !important;\n        box-shadow: none !important;\n        opacity: 0 !important; \n        cursor: grab;\n        margin-top: 0; \n    }\n    #research-funding-root input[type=range]::-moz-range-thumb {\n        height: 32px !important;\n        width: 32px !important;\n        background: transparent !important;\n        border: none !important;\n        box-shadow: none !important;\n        opacity: 0 !important; \n        cursor: grab;\n    }\n    \n    \/* --- SPENDENWIDGET STYLES --- *\/\n    .widget-container {\n        position: relative;\n        z-index: 0 !important; \n    }\n\n    #secure-donation-widget {\n        font-family: 'DM Sans', sans-serif !important;\n        background: #ffffff !important;\n        border: 1px solid #e2e8f0;\n        border-radius: 16px;\n        padding: 30px; \n        box-shadow: 0 20px 40px rgba(0,0,0,0.1);\n        color: #333;\n        position: relative;\n        overflow: hidden;\n    }\n\n    #secure-donation-widget h2 {\n        margin-top: 0;\n        color: #1f2433 !important; \n        font-size: 1.5rem;\n        font-weight: 700;\n        margin-bottom: 1.5rem;\n        text-align: center;\n    }\n    \n    \/* BUTTON FIX *\/\n    button.sdw-submit-btn {\n        width: 100% !important; \n        background-color: #6ec1e4 !important; \n        background-image: none !important;\n        color: #16355d !important; \n        -webkit-text-fill-color: #16355d !important;\n        border: none !important; \n        padding: 16px !important; \n        font-size: 1.125rem !important; \n        font-weight: 700 !important;\n        border-radius: 50px !important; \n        cursor: pointer !important; \n        display: flex !important; \n        justify-content: center !important; \n        align-items: center !important; \n        gap: 10px !important; \n        margin-top: 10px !important;\n        box-shadow: 0 4px 15px rgba(110, 193, 228, 0.4) !important;\n        opacity: 1 !important;\n        visibility: visible !important;\n    }\n    button.sdw-submit-btn span {\n        color: #16355d !important;\n        font-family: 'DM Sans', sans-serif !important;\n        font-weight: 700 !important;\n        opacity: 1 !important;\n        visibility: visible !important;\n    }\n    button.sdw-submit-btn:hover { \n        background-color: #ffffff !important; \n        transform: translateY(-2px); \n    }\n\n    \/* Restliche Widget Styles *\/\n    .sdw-interval-switch {\n        display: flex; background: #f5f8fb; \n        border-radius: 50px; padding: 5px; margin-bottom: 25px; position: relative;\n    }\n    .sdw-interval-option { flex: 1; text-align: center; position: relative; z-index: 1; }\n    .sdw-interval-option input { display: none; }\n    .sdw-interval-option label {\n        display: block; padding: 10px; cursor: pointer; border-radius: 40px; margin: 0;\n        color: #7a7a7a; font-weight: 600; font-size: 0.9rem; transition: all 0.3s ease;\n    }\n    .sdw-interval-option input:checked + label {\n        background: #ffffff; color: #16355d; \n        box-shadow: 0 2px 8px rgba(0,0,0,0.08);\n    }\n    .sdw-amounts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; }\n    .sdw-amounts > div:last-child { grid-column: 1 \/ -1; }\n    .sdw-amount-radio { display: none; }\n    .sdw-amount-label {\n        display: flex; justify-content: center; align-items: center;\n        border: 2px solid #e2e8f0; border-radius: 10px; padding: 12px;\n        text-align: center; cursor: pointer; font-weight: 700; font-size: 1.1rem;\n        color: #1f2433; transition: all 0.2s; background: #fff; height: 100%;\n    }\n    .sdw-amount-label:hover { border-color: #6ec1e4; transform: translateY(-2px); }\n    .sdw-amount-radio:checked + .sdw-amount-label {\n        border-color: #16355d; \n        background-color: #f5f8fb; \n        color: #16355d; \n        box-shadow: 0 4px 12px rgba(22, 53, 93, 0.15);\n    }\n    .sdw-custom-amount-wrapper { margin-bottom: 20px; display: none; overflow: hidden; }\n    .sdw-custom-amount-wrapper.active { display: block; animation: slideDown 0.3s ease forwards; }\n    \n    \/* Gift Checkbox & Recipient Field *\/\n    .sdw-gift-row { margin-bottom: 15px; }\n    .sdw-gift-checkbox-label {\n        display: flex;\n        align-items: center;\n        gap: 10px;\n        cursor: pointer;\n        font-size: 0.95rem;\n        color: #1f2433;\n        font-weight: 500;\n    }\n    .sdw-gift-checkbox-label input[type=\"checkbox\"] {\n        width: 18px;\n        height: 18px;\n        accent-color: #16355d;\n        cursor: pointer;\n    }\n    .sdw-gift-checkbox-label span {\n        user-select: none;\n    }\n    .sdw-gift-recipient-wrapper {\n        margin-bottom: 20px;\n        display: none;\n        overflow: hidden;\n    }\n    .sdw-gift-recipient-wrapper.active {\n        display: block;\n        animation: slideDown 0.3s ease forwards;\n    }\n    @keyframes slideDown {\n        from { opacity: 0; max-height: 0; }\n        to { opacity: 1; max-height: 100px; }\n    }\n    .sdw-row { margin-bottom: 15px; }\n    #secure-donation-widget label.field-label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 0.85rem; color: #1f2433; }\n    #secure-donation-widget input[type=\"text\"], #secure-donation-widget input[type=\"email\"], #secure-donation-widget input[type=\"number\"] {\n        width: 100%; padding: 12px 15px; border: 1px solid #dcdcde; border-radius: 8px; font-size: 1rem;\n        transition: border-color 0.2s; background: #fbfbfb; color: #1f2433;\n    }\n    #secure-donation-widget input:focus { border-color: #16355d; outline: none; background: #fff; box-shadow: 0 0 0 3px rgba(22, 53, 93, 0.1); }\n    .sdw-footer { font-size: 0.75rem; color: #7a7a7a; margin-top: 15px; text-align: center; display: flex; align-items: center; justify-content: center; gap: 6px; }\n    .icon-lock { width: 12px; height: 12px; fill: currentColor; }\n    \n    \/* Strategy Active State *\/\n    .strategy-btn.active {\n        border-color: #6ec1e4; \/* CI Highlight *\/\n        background-color: rgba(31, 41, 55, 0.6);\n    }\n    .strategy-btn.active .num-indicator {\n        color: #6ec1e4;\n    }\n    .strategy-btn.active h5 {\n        color: #6ec1e4;\n    }\n\n    \/* FAQ Accordion Fixes *\/\n    .merf-5euro-widget .faq-item {\n        border: 1px solid #e2e8f0 !important;\n        border-radius: 16px !important;\n        background-color: #ffffff !important;\n        overflow: hidden !important;\n        margin-bottom: 16px !important;\n        box-shadow: 0 2px 5px rgba(0,0,0,0.02);\n    }\n    .merf-5euro-widget .faq-item button {\n        width: 100% !important;\n        text-align: left !important;\n        padding: 24px 24px !important;\n        display: flex !important;\n        justify-content: space-between !important;\n        align-items: center !important;\n        background-color: #ffffff !important;\n        color: #1f2433 !important;\n        border: none !important;\n        cursor: pointer !important;\n        transition: background-color 0.2s;\n    }\n    .merf-5euro-widget .faq-item button span {\n        color: #1f2433 !important;\n    }\n    .merf-5euro-widget .faq-item button i {\n        color: #7a7a7a !important;\n    }\n    .merf-5euro-widget .faq-item button:hover {\n        background-color: #f8fafc !important;\n        color: #1f2433 !important;\n    }\n    .merf-5euro-widget .faq-item button:hover span {\n        color: #1f2433 !important;\n    }\n    .merf-5euro-widget .faq-item button:hover i {\n        color: #1f2433 !important;\n    }\n    .merf-5euro-widget .faq-btn-active {\n        background-color: #f8fafc !important; \n        border-bottom: 1px solid #e2e8f0 !important;\n    }\n    .merf-5euro-widget .faq-btn-active span {\n        color: #1f2433 !important;\n        font-weight: 700 !important;\n    }\n    .merf-5euro-widget .faq-content {\n        padding: 24px 24px !important;\n        color: #7a7a7a !important;\n        font-size: 1rem !important;\n        line-height: 1.6 !important;\n        background-color: #ffffff !important;\n    }\n    \n    \/* Zitat Line Height Fix *\/\n    .merf-5euro-widget .quote-text {\n        line-height: 1.5 !important;\n    }\n\n    \/* Loading Overlay *\/\n    .merf-5euro-widget .sdw-loading-overlay {\n        display: none;\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        background: rgba(255, 255, 255, 0.9);\n        z-index: 5;\n        justify-content: center;\n        align-items: center;\n        border-radius: 16px;\n    }\n    .merf-5euro-widget .sdw-loading-overlay.active {\n        display: flex !important;\n    }\n    .merf-5euro-widget .sdw-spinner {\n        width: 40px;\n        height: 40px;\n        border: 4px solid #e2e8f0;\n        border-top-color: #16355d;\n        border-radius: 50%;\n        animation: spin 1s linear infinite;\n    }\n    @keyframes spin {\n        to { transform: rotate(360deg); }\n    }\n\n    \/* Border Left Highlight - Bulletproof f\u00fcr Elementor *\/\n    .merf-5euro-widget .border-left-highlight {\n        border-left: 4px solid #6ec1e4 !important;\n        padding-left: 1rem !important;\n        margin-left: 0 !important;\n    }\n\n    \/* Testimonial Slider *\/\n    .merf-5euro-widget .testimonial-nav-btn {\n        border: 1px solid #e2e8f0;\n    }\n    .merf-5euro-widget .testimonial-nav-btn:hover {\n        border-color: #6ec1e4;\n    }\n    .merf-5euro-widget .testimonial-dot {\n        cursor: pointer;\n        background-color: #cbd5e1 !important; \/* slate-300 default *\/\n        border: none !important;\n        outline: none !important;\n    }\n    .merf-5euro-widget .testimonial-dot.active {\n        background-color: #16355d !important; \/* ci-blue *\/\n        transform: scale(1.25);\n    }\n    .merf-5euro-widget .testimonial-slide {\n        touch-action: pan-y;\n    }\n    \/* Gleiche H\u00f6he f\u00fcr alle Slides *\/\n    .merf-5euro-widget #testimonial-track {\n        align-items: stretch !important;\n    }\n    .merf-5euro-widget .testimonial-slide > div {\n        height: 100% !important;\n    }\n    \/* Hide nav buttons on very small screens *\/\n    @media (max-width: 480px) {\n        .merf-5euro-widget .testimonial-nav-btn {\n            display: none;\n        }\n    }\n\n    \/* --- DONATION COUNTER STYLES --- *\/\n    .merf-5euro-widget .donation-counter {\n        background-color: #ffffff !important;\n        border-radius: 1rem !important;\n        padding: 2rem !important;\n        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;\n        border: 1px solid #e2e8f0 !important;\n    }\n    .merf-5euro-widget .donation-counter__item {\n        text-align: center !important;\n        padding: 1rem !important;\n    }\n    .merf-5euro-widget .donation-counter__value {\n        font-size: 2.5rem !important;\n        font-weight: 800 !important;\n        color: #16355d !important;\n        line-height: 1.2 !important;\n        margin-bottom: 0.5rem !important;\n    }\n    .merf-5euro-widget .donation-counter__value--highlight {\n        color: #6ec1e4 !important;\n    }\n    .merf-5euro-widget .donation-counter__label {\n        font-size: 0.95rem !important;\n        color: #7a7a7a !important;\n        font-weight: 500 !important;\n        text-transform: uppercase !important;\n        letter-spacing: 0.05em !important;\n    }\n    .merf-5euro-widget .donation-counter__skeleton {\n        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%) !important;\n        background-size: 200% 100% !important;\n        animation: skeleton-loading 1.5s infinite !important;\n        border-radius: 8px !important;\n        height: 2.5rem !important;\n        width: 80% !important;\n        margin: 0 auto 0.5rem auto !important;\n    }\n    .merf-5euro-widget .donation-counter__skeleton--small {\n        height: 1rem !important;\n        width: 200px !important;\n        margin: 0 auto !important;\n    }\n    .merf-5euro-widget .donation-counter__updated {\n        text-align: center !important;\n        border-top: 1px solid #e2e8f0 !important;\n        margin-top: 1.5rem !important;\n        padding-top: 1.5rem !important;\n    }\n    .merf-5euro-widget .donation-counter__updated-text {\n        font-size: 0.85rem !important;\n        color: #94a3b8 !important;\n        font-weight: 400 !important;\n    }\n    @keyframes skeleton-loading {\n        0% { background-position: 200% 0; }\n        100% { background-position: -200% 0; }\n    }\n    @media (min-width: 768px) {\n        .merf-5euro-widget .donation-counter__value {\n            font-size: 3rem !important;\n        }\n    }\n\n    \/* Text Roller Animation (Walzen-Effekt) *\/\n    .merf-5euro-widget .text-roller {\n        display: inline-block;\n        position: relative;\n        overflow: hidden;\n        height: 1.25em;\n        line-height: 1.25em;\n        vertical-align: top;\n        max-width: 100%;\n    }\n    \/* Tailwind: kleinster Breakpoint (unter sm = 640px) *\/\n    @media (max-width: 639px) {\n        .merf-5euro-widget .text-roller {\n            height: 1.5em;\n            line-height: 1.5em;\n        }\n    }\n    .merf-5euro-widget .text-roller__current,\n    .merf-5euro-widget .text-roller__next {\n        display: block;\n        color: #6ec1e4 !important;\n        transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);\n        white-space: nowrap;\n        will-change: transform;\n        transform: translate3d(0, 0, 0);\n    }\n    .merf-5euro-widget .text-roller__current {\n        transform: translateY(0);\n    }\n    .merf-5euro-widget .text-roller__next {\n        position: absolute;\n        top: 0;\n        left: 0;\n        transform: translate3d(0, 100%, 0);\n    }\n    \/* Animation aktiv *\/\n    .merf-5euro-widget .text-roller.is-rolling .text-roller__current {\n        transform: translate3d(0, -100%, 0);\n    }\n    .merf-5euro-widget .text-roller.is-rolling .text-roller__next {\n        transform: translate3d(0, 0, 0);\n    }\n    .merf-5euro-widget .text-roller.no-transition .text-roller__current,\n    .merf-5euro-widget .text-roller.no-transition .text-roller__next {\n        transition: none;\n    }\n    @media (prefers-reduced-motion: reduce) {\n        .merf-5euro-widget .text-roller__current,\n        .merf-5euro-widget .text-roller__next {\n            transition: none;\n        }\n    }\n    \n    \/* Sicherstellen, dass h2 mit text-roller genug Platz hat *\/\n    .merf-5euro-widget h2 .text-roller {\n        display: inline-block;\n        vertical-align: top;\n    }\n    \/* Tailwind: kleinster Breakpoint (unter sm = 640px) *\/\n    @media (max-width: 639px) {\n        .merf-5euro-widget h2 {\n            word-wrap: break-word;\n            overflow-wrap: break-word;\n        }\n        .merf-5euro-widget h2 .text-roller {\n            display: block;\n            width: 100%;\n            margin-top: 0.25em;\n            \/* Platz f\u00fcr bis zu 2 Zeilen auf Mobile *\/\n            height: 3em;\n            line-height: 1.5em;\n            overflow: hidden;\n        }\n        .merf-5euro-widget h2 .text-roller__current,\n        .merf-5euro-widget h2 .text-roller__next {\n            white-space: normal;\n            word-wrap: break-word;\n            overflow-wrap: break-word;\n            max-width: 100%;\n            \/* Wichtig: gleiche H\u00f6he wie Container, damit translateY(100%) garantiert komplett \"raus\" ist *\/\n            height: 3em;\n        }\n    }\n<\/style>\n\n<!-- 4. WIDGET CONTENT -->\n<div class=\"merf-5euro-widget pt-[65px] md:pt-[75px] lg:pt-[91px] bg-ci-bgWhite antialiased\" id=\"donation\">\n\n    <!-- SECTION 1: HERO -->\n    <header class=\"relative hero-bg min-h-[calc(100vh-63px)] sm:min-h-[calc(100vh-83px)] md:min-h-[calc(100vh-104px)] flex items-center justify-center py-6 md:py-12 px-6 lg:px-12\">\n        <div class=\"ci-container grid grid-cols-1 lg:grid-cols-2 gap-6 md:gap-12 items-center\">\n            <!-- Content -->\n            <div class=\"text-white space-y-4 md:space-y-6 animate-fade-in-up relative\">\n                <span\n                    class=\"inline-block bg-ci-highlight text-ci-blue text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wider mb-2\">Spendenabo<\/span>\n                <h1 class=\"font-bold !text-5xl sm:!text-5xl lg:!text-6xl xl:!text-7xl leading-tight text-white !text-white\">5\u20ac for 5 Things<\/h1>\n                <h2 class=\"!text-2xl md:!text-3xl lg:!text-4xl font-bold leading-tight text-ci-highlight\">\n                    Bring die Forschung voran \u2013 ab 5\u20ac monatlich\n                <\/h2>\n                <p class=\"text-base sm:text-lg md:text-xl lg:text-2xl text-slate-100 leading-relaxed max-w-lg !text-slate-100\">\n                    Werde Teil einer Bewegung: Aus vielen kleinen Beitr\u00e4gen machen wir mehr biomedizinische Forschung zu ME\/CFS und Long COVID \u2013 f\u00fcr bessere Diagnostik und wirksame Behandlungsans\u00e4tze.\n                <\/p>\n                \n                <ul class=\"space-y-3 text-sm sm:text-base lg:text-lg text-slate-200 !text-slate-200 mt-6\">\n                    <li class=\"flex items-center gap-3\">\n                        <i class=\"fa-solid fa-check text-ci-highlight\"><\/i> Wenn wir alle 5 \u20ac geben, bewegen wir Millionen.\n                    <\/li>\n                    <li class=\"flex items-center gap-3\">\n                        <i class=\"fa-solid fa-check text-ci-highlight\"><\/i> Die H\u00fcrde ist niedrig \u2013 jede*r kann Teil der L\u00f6sung werden.\n                    <\/li>\n                    <li class=\"flex items-center gap-3\">\n                        <i class=\"fa-solid fa-check text-ci-highlight\"><\/i> Forschung schenken hei\u00dft Hoffnung schenken.\n                    <\/li>\n                <\/ul>\n\n                <div id=\"strategy-link-container\" class=\"pt-4\">\n                     <a href=\"#quote\" id=\"strategy-btn\" class=\"inline-flex !text-xl items-center gap-2 transition underline\">\n                        Mehr \u2193\n                     <\/a>\n                <\/div>\n                <style>\n                    #strategy-link-container {\n                        display: none !important;\n                    }\n                    @media (min-width: 1024px) {\n                        #strategy-link-container {\n                            display: block !important;\n                        }\n                    }\n                    #strategy-btn {\n                        color: #cbd5e1 !important;\n                    }\n                    #strategy-btn:hover {\n                        color: #ffffff !important;\n                    }\n                <\/style>\n            <\/div>\n\n            <!-- Donation Widget -->\n            <div class=\"w-full max-w-md mx-auto lg:ml-auto widget-container\">\n                <div id=\"secure-donation-widget\">\n                  <div class=\"sdw-loading-overlay\" id=\"loadingOverlay\">\n                    <div class=\"sdw-spinner\"><\/div>\n                  <\/div>\n\n                  <h2>Spendenabo f\u00fcr die<br\/>ME\/CFS-Forschung<\/h2>\n\n                  <form id=\"donationForm\">\n                    <div class=\"sdw-interval-switch\">\n                      <div class=\"sdw-interval-option\"><input type=\"radio\" name=\"interval\" id=\"int_monthly\" value=\"month\" checked><label for=\"int_monthly\">Monatlich<\/label><\/div>\n                      <div class=\"sdw-interval-option\"><input type=\"radio\" name=\"interval\" id=\"int_yearly\" value=\"year\"><label for=\"int_yearly\">J\u00e4hrlich<\/label><\/div>\n                      <div class=\"sdw-interval-option sdw-interval-option-once\"><input type=\"radio\" name=\"interval\" id=\"int_once\" value=\"once\"><label for=\"int_once\">Einmalig<\/label><\/div>\n                    <\/div>\n                    <div class=\"sdw-amounts\">\n                      <div><input type=\"radio\" name=\"amount_selection\" id=\"amt_opt1\" class=\"sdw-amount-radio\" value=\"opt1\" checked><label for=\"amt_opt1\" class=\"sdw-amount-label\" id=\"label_opt1\">5 \u20ac<\/label><\/div>\n                      <div><input type=\"radio\" name=\"amount_selection\" id=\"amt_opt2\" class=\"sdw-amount-radio\" value=\"opt2\"><label for=\"amt_opt2\" class=\"sdw-amount-label\" id=\"label_opt2\">15 \u20ac<\/label><\/div>\n                      <div><input type=\"radio\" name=\"amount_selection\" id=\"amt_opt3\" class=\"sdw-amount-radio\" value=\"opt3\"><label for=\"amt_opt3\" class=\"sdw-amount-label\" id=\"label_opt3\">25 \u20ac<\/label><\/div>\n                      <div><input type=\"radio\" name=\"amount_selection\" id=\"amt_custom\" class=\"sdw-amount-radio\" value=\"custom\"><label for=\"amt_custom\" class=\"sdw-amount-label\">Wunschbetrag<\/label><\/div>\n                    <\/div>\n                    <div class=\"sdw-custom-amount-wrapper\" id=\"custom_amount_container\">\n                      <label class=\"field-label\" for=\"custom_amount_input\">Dein Betrag (\u20ac)<\/label>\n                      <input type=\"number\" id=\"custom_amount_input\" min=\"1\" step=\"1\" placeholder=\"z.B. 50\">\n                    <\/div>\n                    <input type=\"hidden\" name=\"amount\" id=\"final_amount\" value=\"5\">\n                    <div class=\"sdw-row\">\n                      <label class=\"field-label\" for=\"don_name\">Dein Name<\/label>\n                      <input type=\"text\" name=\"name\" id=\"don_name\" required placeholder=\"Max Mustermensch\">\n                    <\/div>\n                    <div class=\"sdw-row\">\n                      <label class=\"field-label\" for=\"don_email\">E-Mail-Adresse<\/label>\n                      <input type=\"email\" name=\"email\" id=\"don_email\" required placeholder=\"max@mustermensch.de\">\n                    <\/div>\n                    <div class=\"sdw-row sdw-gift-row\">\n                      <label class=\"sdw-gift-checkbox-label\">\n                        <input type=\"checkbox\" id=\"gift_checkbox\" name=\"is_gift\">\n                        <span>Ist diese Spende ein Geschenk?<\/span>\n                      <\/label>\n                    <\/div>\n                    <div class=\"sdw-gift-recipient-wrapper\" id=\"gift_recipient_container\">\n                      <label class=\"field-label\" for=\"gift_recipient_name\">Name des\/der Beschenkten f\u00fcr die Spendenurkunde<\/label>\n                      <input type=\"text\" id=\"gift_recipient_name\" name=\"gift_recipient\" placeholder=\"z. B. Maria Mustermensch\">\n                    <\/div>\n                    <button type=\"submit\" class=\"sdw-submit-btn\" id=\"submit_btn\">\n                      <span>Jetzt 5 \u20ac monatlich spenden<\/span>\n                    <\/button>\n                    <div class=\"sdw-footer !mb-0\">\n                      <svg class=\"icon-lock\" viewBox=\"0 0 24 24\"><path d=\"M12 2C9.243 2 7 4.243 7 7v3H6c-1.103 0-2 .897-2 2v8c0 1.103.897 2 2 2h12c1.103 0 2-.897 2-2v-8c0-1.103-.897-2-2-2h-1V7c0-2.757-2.243-5-5-5zm6 10 .002 8H6v-8h12zm-9-3V7c0-1.654 1.346-3 3-3s3 1.346 3 3v2H9z\"><\/path><\/svg>\n                      <span>Sicher bezahlen via Stripe<\/span>\n                    <\/div>\n                    <div class=\"sdw-footer !mt-0\">(u. a. Kreditkarte, PayPal oder Mobile Payment)<\/div>\n                    <div class=\"sdw-footer !mt-2\">\n                      <a href=\"https:\/\/mecfs-research.org\/support\" target=\"_blank\" class=\"!underline text-ci-copy hover:text-ci-blue transition\">Bankverbindung f\u00fcr \u00dcberweisungen<\/a>\n                    <\/div>\n                  <\/form>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/header>\n\n    <!-- SECTION 2: QUOTE -->\n    <section class=\"py-16 lg:py-20 bg-white px-6\" id=\"quote\">\n        <div class=\"ci-container\">\n            <!-- Desktop: Horizontal Flex | Mobile: Vertikal gestapelt -->\n            <div class=\"flex flex-col lg:flex-row lg:items-center lg:gap-12\">\n                \n                <!-- Linke Seite: Bild + Info -->\n                <div class=\"flex flex-col items-center lg:items-start shrink-0 mb-8 lg:mb-0\">\n                    <div class=\"w-28 h-28 lg:w-36 lg:h-36 bg-gray-300 rounded-full overflow-hidden shrink-0 mb-4\">\n                        <img decoding=\"async\" src=\"https:\/\/mecfs-research.org\/wp-content\/uploads\/2025\/11\/joerg_heydecke.webp\" alt=\"J\u00f6rg Heydecke\" class=\"w-full h-full object-cover\">\n                    <\/div>\n                    <div class=\"text-center lg:text-left\">\n                        <div class=\"font-bold text-ci-dark text-lg\">J\u00f6rg Heydecke<\/div>\n                        <div class=\"text-sm text-ci-copy\">Gr\u00fcnder und Gesch\u00e4ftsf\u00fchrer<br>ME\/CFS Research Foundation<\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- Rechte Seite: Quote-Icon + Zitat -->\n                <div class=\"text-center lg:text-left flex-1\">\n                    <i class=\"fa-solid fa-quote-left text-3xl text-ci-highlight\/50 mb-4 block\"><\/i>\n                    <blockquote class=\"text-xl lg:text-2xl text-ci-dark italic font-normal !text-ci-dark quote-text\">\n                        \u201eWenn viele Betroffene oder Angeh\u00f6rige und Freunde monatlich 5\u20ac investieren, k\u00f6nnen wir die ME\/CFS-Forschung nachhaltig voranbringen und dringend ben\u00f6tigte Therapiestudien m\u00f6glich machen.\"\n                    <\/blockquote>\n                <\/div>\n\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- SECTION 5: SLIDER (REACT COMPONENT) -->\n    <section class=\"py-24 bg-ci-bgLight px-6\">\n        <div class=\"ci-container\">\n            <div id=\"research-funding-root\"><\/div>\n        <\/div>\n    <\/section>\n\n    <!-- SECTION 5b: DONATION COUNTER -->\n    <section class=\"pb-24 bg-ci-bgLight px-6\">\n        <div class=\"ci-container\">\n            <!-- \u00dcberschrift & Beschreibung -->\n            <div class=\"text-center mb-12\">\n                <h2 class=\"text-2xl md:text-3xl font-bold mb-4 text-ci-dark !text-ci-dark\">Aktueller <span class=\"text-ci-highlight\">Spendenstand<\/span><\/h2>\n                <p class=\"text-ci-copy text-base md:text-lg max-w-3xl mx-auto leading-relaxed\">\n                    Die angezeigte Spendensumme beinhaltet alle Einmalspenden und Spendenabos (hochgerechnet auf ein Jahr) seit 30.11.2025. Danke an alle <strong>Unterst\u00fctzer*innen<\/strong>!\n                <\/p>\n            <\/div>\n            \n            <!-- Counter Box -->\n            <div class=\"donation-counter\">\n                <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8\">\n                    <!-- Gesamtspenden -->\n                    <div class=\"donation-counter__item\">\n                        <div class=\"donation-counter__value\" id=\"donation-counter-donors\">\n                            <div class=\"donation-counter__skeleton\"><\/div>\n                        <\/div>\n                        <div class=\"donation-counter__label\">Spender*innen<\/div>\n                    <\/div>\n                    <!-- Spender*innen -->\n                    <div class=\"donation-counter__item\">\n                        <div class=\"donation-counter__value donation-counter__value--highlight\" id=\"donation-counter-amount\">\n                            <div class=\"donation-counter__skeleton\"><\/div>\n                        <\/div>\n                        <div class=\"donation-counter__label\">Gespendete Summe<\/div>\n                    <\/div>\n                <\/div>\n                <!-- Aktualisierungsdatum -->\n                <div class=\"donation-counter__updated mt-6 pt-6 border-t border-slate-200\">\n                    <div class=\"donation-counter__updated-text\" id=\"donation-counter-updated\">\n                        <div class=\"donation-counter__skeleton donation-counter__skeleton--small\"><\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- SECTION: GESCHENKSPENDE -->\n    <section class=\"py-24 px-6 bg-white border-t border-slate-100 lg:min-h-[70vh] lg:max-h-screen lg:flex lg:items-center\">\n        <div class=\"ci-container\">\n            <div class=\"grid grid-cols-1 lg:grid-cols-[3fr,2fr] gap-6 lg:gap-6 items-center\">\n                <!-- Text-Spalte -->\n                <div class=\"order-2 lg:order-1\">\n                    <span class=\"inline-block bg-ci-highlight\/20 text-ci-blue text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wider mb-4\">Geschenkspende<\/span>\n                    <h2 class=\"text-3xl md:text-4xl font-bold mb-6 text-ci-dark !text-ci-dark\">\n                        Verschenke Hoffnung und Forschung<br>\n                        <span class=\"text-roller\" id=\"occasionRoller\">\n                            <span class=\"text-roller__current\">zu Weihnachten \ud83c\udf84<\/span>\n                            <span class=\"text-roller__next\">an Ostern \ud83d\udc23<\/span>\n                        <\/span>\n                    <\/h2>\n                    <p class=\"text-ci-copy leading-relaxed text-lg mb-8\">\n                        Mit einer Geschenkspende bereitest du doppelt Freude: Du unterst\u00fctzt die ME\/CFS-Forschung und schenkst einem lieben Menschen ein Geschenk mit Bedeutung. Du erh\u00e4ltst eine personalisierte Urkunde mit dem Namen der beschenkten Person.\n                    <\/p>\n                    <a href=\"#donation\" class=\"inline-flex items-center gap-2 bg-ci-highlight text-ci-blue text-lg px-8 py-4 rounded-full hover:bg-white transition group font-bold hover:-translate-y-1\" style=\"box-shadow: 0 4px 15px rgba(110, 193, 228, 0.4);\">\n                        <span>Jetzt Geschenkspende starten<\/span>\n                        <i class=\"fa-solid fa-arrow-right text-sm group-hover:translate-x-1 transition\"><\/i>\n                    <\/a>\n                <\/div>\n                <!-- Bild-Spalte -->\n                <div class=\"order-1 lg:order-2 flex justify-center lg:justify-end\">\n                    <div class=\"transform rotate-2 transition-transform duration-300 hover:rotate-0\">\n                        <img decoding=\"async\" \n                            src=\"https:\/\/mecfs-research.org\/wp-content\/uploads\/2025\/12\/geschenkspende-musterurkunde.webp\" \n                            alt=\"Muster einer Geschenkspende-Urkunde der ME\/CFS Research Foundation\" \n                            class=\"w-[260px] lg:w-[340px] rounded-lg border border-slate-200 bg-white\"\n                            style=\"box-shadow: 0 30px 60px -10px rgba(0, 0, 0, 0.35), 0 10px 20px -5px rgba(0, 0, 0, 0.15);\"\n                        \/>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- SECTION 3: IMPACT (NEW CONCEPT) -->\n    <section class=\"py-24 px-6 bg-ci-bgLight\">\n        <div class=\"ci-container\">\n            <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-16 items-center\">\n                <!-- Left: Headline & Text -->\n                <div>\n                    <span class=\"text-ci-highlight font-bold tracking-wider uppercase text-sm mb-2 block\">Kleine Geste. Gro\u00dfe Wirkung.<\/span>\n                    <h2 class=\"text-3xl md:text-4xl font-bold mb-6 text-ci-dark !text-ci-dark\">Warum <span class=\"text-ci-highlight\">5 EUR im Monat<\/span> den Unterschied machen<\/h2>\n                    <p class=\"text-ci-copy leading-relaxed mb-6 text-lg\">\n                        ME\/CFS hat 5 Buchstaben. Wir starten ins 5. Jahr unseres Engagements in 5 Arbeitsbereichen, in denen wir zuk\u00fcnftig noch viel mehr erreichen wollen!\n                    <\/p>\n                    <p class=\"text-ci-copy leading-relaxed\">\n                        Wenn Tausende mitmachen, entsteht eine verl\u00e4ssliche Basis f\u00fcr unser Engagement f\u00fcr mehr biomedizinische ME\/CFS- und Long\n                        COVID-Forschung.\n                    <\/p>\n                <\/div>\n\n                <!-- Right: 5 Dinge Buttons (statisch, 3-2 Grid) -->\n                <div>\n                    <!-- Row 1: 3 Buttons -->\n                    <div class=\"grid grid-cols-1 sm:grid-cols-3 gap-3 mb-3\">\n                        <div class=\"bg-ci-blue rounded-xl p-6 text-center min-h-[100px] flex flex-col justify-center\">\n                            <div class=\"text-3xl font-black text-ci-highlight mb-2\">01<\/div>\n                            <h5 class=\"font-medium text-white !text-base !mb-0 leading-tight\">Forschung finanzieren<\/h5>\n                        <\/div>\n                        <div class=\"bg-ci-blue rounded-xl p-6 text-center min-h-[100px] flex flex-col justify-center\">\n                            <div class=\"text-3xl font-black text-ci-highlight mb-2\">02<\/div>\n                            <h5 class=\"font-medium text-white !text-base !mb-0 leading-tight\">Forschende vernetzen<\/h5>\n                        <\/div>\n                        <div class=\"bg-ci-blue rounded-xl p-6 text-center min-h-[100px] flex flex-col justify-center\">\n                            <div class=\"text-3xl font-black text-ci-highlight mb-2\">03<\/div>\n                            <h5 class=\"font-medium text-white !text-base !mb-0 leading-tight\">Fortschritt sichtbar machen<\/h5>\n                        <\/div>\n                    <\/div>\n                    <!-- Row 2: 2 Buttons zentriert -->\n                    <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-3 sm:max-w-[66%] mx-auto\">\n                        <div class=\"bg-ci-blue rounded-xl p-6 text-center min-h-[100px] flex flex-col justify-center\">\n                            <div class=\"text-3xl font-black text-ci-highlight mb-2\">04<\/div>\n                            <h5 class=\"font-medium text-white !text-base !mb-0 leading-tight\">Fakten f\u00fcr Aufkl\u00e4rung<\/h5>\n                        <\/div>\n                        <div class=\"bg-ci-blue rounded-xl p-6 text-center min-h-[100px] flex flex-col justify-center\">\n                            <div class=\"text-3xl font-black text-ci-highlight mb-2\">05<\/div>\n                            <h5 class=\"font-medium text-white !text-base !mb-0 leading-tight\">Fundraising & Awareness<\/h5>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- SECTION 4: STRATEGY -->\n    <section id=\"strategy\" class=\"py-24 hero-bg text-white px-6\">\n        <div class=\"ci-container\">\n            <div class=\"max-w-3xl mb-16\">\n                <h2 class=\"text-3xl md:text-4xl font-bold mb-6 text-white !text-white\">Unsere <strong class=\"text-ci-highlight\">F\u00f6rderstrategie<\/strong><\/h2>\n                <p class=\"text-slate-300 text-lg leading-relaxed !text-slate-300\">\n                    2026 ist ein Schl\u00fcsseljahr f\u00fcr die ME\/CFS-Forschung. Bevor langfristige staatliche Programme greifen, f\u00f6rdern wir in dieser \u00dcbergangsphase weiter biomedizinische Forschung, die Diagnostik und Therapien greifbar macht.\n                <\/p>\n            <\/div>\n\n            <div>\n                <h3 class=\"text-xl font-bold text-white mb-12 border-left-highlight !text-white\">Worauf wir unsere F\u00f6rdermittel 2026 konzentrieren<\/h3>\n                <div class=\"grid grid-cols-1 md:grid-cols-3 gap-8 mb-8\">\n                    <div class=\"bg-white\/95 p-8 rounded-2xl border border-slate-200 transition shadow-xl\">\n                        <div class=\"w-12 h-12 bg-ci-highlight\/20 rounded-lg flex items-center justify-center mb-6 text-ci-blue text-xl\"><i class=\"fa-solid fa-dna\"><\/i><\/div>\n                        <h4 class=\"font-bold text-lg mb-3 text-ci-dark !text-ci-dark\">Krankheitsmechanismen<\/h4>\n                        <p class=\"text-ci-copy text-sm leading-relaxed !text-ci-copy !mb-0\">Ursachen von PEM, Schmerzen, kognitiven St\u00f6rungen, Durchblutungsproblemen u. a. Symptomen entschl\u00fcsseln<\/p>\n                    <\/div>\n                    <div class=\"bg-white\/95 p-8 rounded-2xl border border-slate-200 transition shadow-xl\">\n                        <div class=\"w-12 h-12 bg-ci-highlight\/20 rounded-lg flex items-center justify-center mb-6 text-ci-blue text-xl\"><i class=\"fa-solid fa-vial\"><\/i><\/div>\n                        <h4 class=\"font-bold text-lg mb-3 text-ci-dark !text-ci-dark\">Biomarker & Diagnostik<\/h4>\n                        <p class=\"text-ci-copy text-sm leading-relaxed !text-ci-copy !mb-0\">Suche nach Markern f\u00fcr bessere Diagnostik bzw. Messung von Schweregrad und Typ der Erkrankung (z. B. Autoimmunit\u00e4t)<\/p>\n                    <\/div>\n                    <div class=\"bg-white\/95 p-8 rounded-2xl border border-slate-200 transition shadow-xl\">\n                        <div class=\"w-12 h-12 bg-ci-highlight\/20 rounded-lg flex items-center justify-center mb-6 text-ci-blue text-xl\"><i class=\"fa-solid fa-capsules\"><\/i><\/div>\n                        <h4 class=\"font-bold text-lg mb-3 text-ci-dark !text-ci-dark\">Medikamente & Therapien<\/h4>\n                        <p class=\"text-ci-copy text-sm leading-relaxed !text-ci-copy !mb-0\">Pr\u00fcfung der Wirksamkeit von Wirkstoffen und Therapien, die f\u00fcr andere Erkrankungen zugelassen sind oder neu entwickelt werden.<\/p>\n                    <\/div>\n                <\/div>\n                <div class=\"text-center\">\n                    <a href=\"https:\/\/mecfs-research.org\/fundingstrategy2026\/\" target=\"_blank\" id=\"strategy-detail-btn\" class=\"inline-flex items-center gap-2 bg-ci-highlight text-ci-blue text-lg px-8 py-4 rounded-full hover:bg-white transition group font-bold shadow-lg hover:-translate-y-1\">\n                        <span>Zur detaillierten F\u00f6rderstrategie<\/span>\n                        <i class=\"fa-solid fa-arrow-right text-sm group-hover:translate-x-1 transition\"><\/i>\n                    <\/a>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n  \n    <!-- SECTION 6: SOCIAL PROOF - TESTIMONIAL SLIDER -->\n    <section class=\"py-20 px-6 bg-white overflow-hidden\">\n        <div class=\"ci-container\">\n            <h2 class=\"text-2xl md:text-3xl font-bold !mb-16 text-center text-ci-dark !text-ci-dark\">Stimmen unserer <strong class=\"text-ci-highlight\">Unterst\u00fctzer*innen<\/strong><\/h2>\n            \n            <!-- Slider Container -->\n            <div class=\"relative px-8 md:px-14\">\n                <!-- Navigation Arrows -->\n                <button onclick=\"testimonialSlider.prev()\" class=\"testimonial-nav-btn absolute left-0 top-1\/2 -translate-y-1\/2 w-10 h-10 md:!w-12 md:!h-12 !p-0 bg-white !rounded-full shadow-lg flex items-center justify-center hover:bg-ci-bgLight transition z-[2]\">\n                    <i class=\"fa-solid fa-chevron-left text-ci-blue\"><\/i>\n                <\/button>\n                <button onclick=\"testimonialSlider.next()\" class=\"testimonial-nav-btn absolute right-0 top-1\/2 -translate-y-1\/2 w-10 h-10 md:!w-12 md:!h-12 !p-0 bg-white !rounded-full shadow-lg flex items-center justify-center hover:bg-ci-bgLight transition z-[2]\">\n                    <i class=\"fa-solid fa-chevron-right text-ci-blue\"><\/i>\n                <\/button>\n\n                <!-- Slides Wrapper -->\n                <div class=\"overflow-hidden\">\n                    <div id=\"testimonial-track\" class=\"flex transition-transform duration-500 ease-out\" style=\"transform: translateX(0);\">\n                        \n                        <div class=\"testimonial-slide w-full md:w-1\/2 lg:w-1\/3 flex-shrink-0 px-2\">\n                            <div class=\"bg-ci-bgLight p-6 rounded-2xl relative flex flex-col h-full\">\n                                <i class=\"fa-solid fa-quote-left text-ci-highlight\/30 text-3xl absolute top-4 left-4\"><\/i>\n                                <p class=\"relative text-ci-copy italic mb-6 pt-8 leading-snug flex-grow text-xl md:text-lg\">\n                                    \u201eViele der Studien, an denen wir arbeiten, w\u00e4ren ohne private F\u00f6rderung wohl gar nicht zustande gekommen.\"\n                                <\/p>\n                                <div class=\"flex items-center gap-3 mt-auto\">\n                                    <div class=\"w-14 h-14 rounded-full bg-gray-200 overflow-hidden shrink-0\">\n                                        <img decoding=\"async\" src=\"https:\/\/mecfs-research.org\/wp-content\/uploads\/2025\/11\/scheibenbogen.webp\"\n                                            alt=\"Prof. Dr. Carmen Scheibenbogen\" class=\"w-full h-full object-cover\">\n                                    <\/div>\n                                    <div class=\"text-xs\"><span class=\"block leading-tight font-bold text-ci-dark text-base\">Prof. Dr. Carmen Scheibenbogen<\/span><span\n                                            class=\"text-ci-copy text-sm\">Charit\u00e9 Berlin<\/span><\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n\n                        <div class=\"testimonial-slide w-full md:w-1\/2 lg:w-1\/3 flex-shrink-0 px-2\">\n                            <div class=\"bg-ci-bgLight p-6 rounded-2xl relative flex flex-col h-full\">\n                                <i class=\"fa-solid fa-quote-left text-ci-highlight\/30 text-3xl absolute top-4 left-4\"><\/i>\n                                <p class=\"relative text-ci-copy italic mb-6 pt-8 leading-snug flex-grow text-xl md:text-lg\">\n                                    \u201eZu sehen, dass die ME\/CFS Research Foundation Forschung voranbringt, bedeutet mir sehr viel. Es zeigt mir, dass unser Schicksal nicht einfach hingenommen wird.\"\n                                <\/p>\n                                <div class=\"flex items-center gap-3 mt-auto\">\n                                    <div class=\"w-14 h-14 rounded-full bg-gray-200 overflow-hidden shrink-0\">\n                                        <img decoding=\"async\" src=\"https:\/\/mecfs-research.org\/wp-content\/uploads\/2025\/11\/lisa_b.webp\" alt=\"Lisa B.\" class=\"w-full h-full object-cover\">\n                                    <\/div>\n                                    <div class=\"text-xs\"><span class=\"block leading-tight font-bold text-ci-dark text-base\">Lisa B.<\/span><span class=\"text-ci-copy text-sm\">ME\/CFS-Betroffene<\/span><\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n\n                        <div class=\"testimonial-slide w-full md:w-1\/2 lg:w-1\/3 flex-shrink-0 px-2\">\n                            <div class=\"bg-ci-bgLight p-6 rounded-2xl relative flex flex-col h-full\">\n                                <i class=\"fa-solid fa-quote-left text-ci-highlight\/30 text-3xl absolute top-4 left-4\"><\/i>\n                                <p class=\"relative text-ci-copy italic mb-6 pt-8 leading-snug flex-grow text-xl md:text-lg\">\n                                    \u201eF\u00fcr uns als Familie ist entscheidend, dass echte biomedizinische Forschung vorangetrieben wird. Die ME\/CFS Research Foundation tut genau das \u2013 und daf\u00fcr bin ich dankbar.\"\n                                <\/p>\n                                <div class=\"flex items-center gap-3 mt-auto\">\n                                    <div class=\"w-14 h-14 rounded-full bg-gray-200 overflow-hidden shrink-0\">\n                                        <img decoding=\"async\" src=\"https:\/\/mecfs-research.org\/wp-content\/uploads\/2025\/11\/hermisson.webp\" alt=\"Sabine Hermisson\"\n                                            class=\"w-full h-full object-cover\">\n                                    <\/div>\n                                    <div class=\"text-xs\"><span class=\"block leading-tight font-bold text-ci-dark text-base\">Sabine Hermisson<\/span><span\n                                            class=\"text-ci-copy text-sm\">Mutter einer schwer erkrankten Tochter<\/span><\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                        <!-- Slide 2: Prof. Behrends -->\n                        <div class=\"testimonial-slide w-full md:w-1\/2 lg:w-1\/3 flex-shrink-0 px-2\">\n                            <div class=\"bg-ci-bgLight p-6 rounded-2xl relative flex flex-col h-full\">\n                                <i class=\"fa-solid fa-quote-left text-ci-highlight\/30 text-3xl absolute top-4 left-4\"><\/i>\n                                <p class=\"relative text-ci-copy italic mb-6 pt-8 leading-snug flex-grow text-xl md:text-lg\">\n                                    \u201eDie F\u00f6rderung unserer Forschung durch die ME\/CFS Research Foundation erg\u00e4nzt die \u00f6ffentlichen F\u00f6rdermittel an wichtigen Stellen.\"\n                                <\/p>\n                                <div class=\"flex items-center gap-3 mt-auto\">\n                                    <div class=\"w-14 h-14 rounded-full bg-gray-200 overflow-hidden shrink-0\">\n                                        <img decoding=\"async\" src=\"https:\/\/mecfs-research.org\/wp-content\/uploads\/2025\/11\/uta_behrends.webp\" alt=\"Prof. Dr. Uta Behrends\" class=\"w-full h-full object-cover\">\n                                    <\/div>\n                                    <div class=\"text-xs\"><span class=\"block leading-tight font-bold text-ci-dark text-base\">Prof. Dr. Uta Behrends<\/span><span class=\"text-ci-copy text-sm\">TU M\u00fcnchen<\/span><\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- Dots Navigation (visibility controlled by JS) -->\n                <div class=\"flex justify-center gap-3 mt-8\" id=\"testimonial-dots\">\n                    <button onclick=\"testimonialSlider.goTo(0)\" class=\"testimonial-dot active !p-0 !w-3 !h-3 !rounded-full transition-all duration-300\"><\/button>\n                    <button onclick=\"testimonialSlider.goTo(1)\" class=\"testimonial-dot !p-0 !w-3 !h-3 !rounded-full transition-all duration-300\"><\/button>\n                    <button onclick=\"testimonialSlider.goTo(2)\" class=\"testimonial-dot !p-0 !w-3 !h-3 !rounded-full transition-all duration-300\"><\/button>\n                    <button onclick=\"testimonialSlider.goTo(3)\" class=\"testimonial-dot !p-0 !w-3 !h-3 !rounded-full transition-all duration-300\"><\/button>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- SECTION 7: FAQ -->\n    <section class=\"py-20 px-6 bg-ci-bgWhite border-t border-ci-grey\">\n        <div class=\"ci-container max-w-3xl\">\n            <h2 class=\"text-2xl font-bold mb-8 text-ci-dark text-center !text-ci-dark\">FAQ \u2013 H\u00e4ufige Fragen<\/h2>\n            <div class=\"space-y-3\" id=\"faq-container\">\n                <div class=\"faq-item\">\n                    <button class=\"w-full focus:outline-none\" onclick=\"toggleFaq(this)\">\n                        <span class=\"font-semibold text-base\">Wie wird meine Spende verwendet?<\/span>\n                        <i class=\"fa-solid fa-chevron-down text-ci-copy text-sm transition-transform\"><\/i>\n                    <\/button>\n                    <div class=\"hidden faq-content\">\n                        Deine Spende flie\u00dft vollst\u00e4ndig in biomedizinische Forschungsprojekte zu ME\/CFS und Long COVID und in Ma\u00dfnahmen,\n                        die\n                        Forschung unterst\u00fctzen \u2013 etwa Vernetzung von Forschenden, das <a href=\"https:\/\/mrr.mecfs-research.org\/\"\n                            target=\"_blank\" class=\"!underline text-ci-blue hover:text-ci-highlight\">ME\/CFS Research Register<\/a> oder\n                        andere Fakten & Ressourcen f\u00fcr Information.\n                        Weitere Details dazu findest Du in unserer <a href=\"https:\/\/mecfs-research.org\/fundingstrategy\" target=\"_blank\"\n                            class=\"!underline text-ci-blue hover:text-ci-highlight\">F\u00f6rderstrategie<\/a>.\n                    <\/div>\n                <\/div>\n\n                <div class=\"faq-item\">\n                    <button class=\"w-full focus:outline-none\" onclick=\"toggleFaq(this)\">\n                        <span class=\"font-semibold text-base\">Kann ich mein Spendenabo jederzeit beenden?<\/span>\n                        <i class=\"fa-solid fa-chevron-down text-ci-copy text-sm transition-transform\"><\/i>\n                    <\/button>\n                    <div class=\"hidden faq-content\">\n                        Ja, du kannst dein Spendenabo <a href=\"https:\/\/mecfs-research.org\/spendenabo-verwalten\/\" target=\"_blank\" class=\"!underline text-ci-blue hover:text-ci-highlight\">jederzeit beenden oder pausieren.<\/a>\n                    <\/div>\n                <\/div>\n                \n                <div class=\"faq-item\">\n                    <button class=\"w-full focus:outline-none\" onclick=\"toggleFaq(this)\">\n                        <span class=\"font-semibold text-base\">Bekomme ich einen Spendenbeleg?<\/span>\n                        <i class=\"fa-solid fa-chevron-down text-ci-copy text-sm transition-transform\"><\/i>\n                    <\/button>\n                    <div class=\"hidden faq-content\">\n                        F\u00fcr Spenden bis 300\u20ac pro Jahr reicht der Zahlungsbeleg (Bank, Paypal, Kreditkarte) als steuerlicher Nachweis. Trotzdem stellen wir automatisch Spendenbelege ab 5 EUR aus. Diese werden dir 2 Monate nach deiner Spende per E-Mail zugestellt.<br>\n                        Solltest du nach diesem Zeitraum keinen Beleg erhalten haben, schaue bitte in deinem Spam-Ordner nach Mails von <span class=\"!font-bold\">donation@mecfs-research.org<\/span>.\n                    <\/div>\n                <\/div>\n\n                <div class=\"faq-item\">\n                    <button class=\"w-full focus:outline-none\" onclick=\"toggleFaq(this)\">\n                        <span class=\"font-semibold text-base\">Kann ich auch per Bank\u00fcberweisung spenden?<\/span>\n                        <i class=\"fa-solid fa-chevron-down text-ci-copy text-sm transition-transform\"><\/i>\n                    <\/button>\n                    <div class=\"hidden faq-content\">\n                        Ja, du kannst auch per Bank\u00fcberweisung spenden. Die Bankverbindung findest du auf unserer <a href=\"https:\/\/mecfs-research.org\/support\/\" target=\"_blank\" class=\"!underline text-ci-blue hover:text-ci-highlight\">Spenden-Seite<\/a>.\n                    <\/div>\n                <\/div>\n\n                <div class=\"!mt-8 mx-auto text-center\">\n                    <p class=\"text-base\">Weitere Informationen findest Du in unseren <a href=\"https:\/\/mecfs-research.org\/support\/#SpendenFAQ\" target=\"_blank\" class=\"!underline text-ci-blue hover:text-ci-highlight\">Spenden-FAQ<\/a>.<\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n<\/div>\n<!-- END WIDGET CONTENT -->\n\n<!-- 5. SCRIPTS -->\n<script>\n    if (window.__occasionRollerInstance && typeof window.__occasionRollerInstance.destroy === 'function') {\n        window.__occasionRollerInstance.destroy();\n    }\n\n    \/\/ ========== OCCASION TEXT ROLLER (Walzen-Effekt) ==========\n    const occasionRoller = {\n        \/\/ Basis-Occasions (jede 1x Gewicht)\n        baseOccasions: [\n            \"an Ostern \ud83d\udc23\",\n            \"zum Geburtstag \ud83c\udf82\",\n            \"zum Vatertag \ud83d\udc68\",\n            \"zum Muttertag \ud83d\udc69\",\n            \"zum ME\/CFS Awareness Day \ud83d\udc99\",\n            \"zum Valentinstag \ud83d\udc96\",\n            \"zum Long COVID Awareness Day \ud83d\udc99\",\n            \"zum Jahrestag \ud83e\udd42\",\n            \"zum Abschluss \ud83c\udf93\",\n            \"zur Taufe \ud83d\udc92\",\n            \"zur Hochzeit \ud83d\udc8d\",\n            \"zum Jubil\u00e4um \ud83c\udf8a\"\n        ],\n        \/\/ Spezial-Occasion mit 3x Gewicht (erscheint 3x so h\u00e4ufig, aber nie nacheinander)\n        specialOccasion: \"zu Weihnachten \ud83c\udf84\",\n        specialWeight: 3,\n        currentText: \"zu Weihnachten \ud83c\udf84\",\n        container: null,\n        currentEl: null,\n        nextEl: null,\n        timer: null,\n        isAnimating: false,\n        intervalMs: 2000,\n        animationMs: 600,\n        isInitialized: false,\n\n        init() {\n            if (!this.ensureBound()) return;\n            if (this.isInitialized && this.timer) return;\n\n            this.updateContainerWidth();\n            if (!window.__occasionRollerResizeBound) {\n                window.__occasionRollerResizeBound = true;\n                window.addEventListener('resize', () => {\n                    if (window.__occasionRollerInstance) {\n                        window.__occasionRollerInstance.updateContainerWidth();\n                    }\n                });\n            }\n            if (!window.__occasionRollerFontsReadyBound && document.fonts && document.fonts.ready) {\n                window.__occasionRollerFontsReadyBound = true;\n                document.fonts.ready.then(() => {\n                    if (window.__occasionRollerInstance) {\n                        window.__occasionRollerInstance.updateContainerWidth();\n                    }\n                });\n            }\n\n            \/\/ Ersten Wechsel nach voller Intervallzeit starten\n            this.scheduleNext(this.intervalMs);\n            this.isInitialized = true;\n        },\n\n        getRandomOccasion() {\n            \/\/ Gewichtete Zufallsauswahl: specialOccasion hat 3x Gewicht\n            const totalWeight = this.baseOccasions.length + this.specialWeight;\n            const rand = Math.random() * totalWeight;\n            \n            if (rand < this.specialWeight) {\n                return this.specialOccasion;\n            } else {\n                const baseIndex = Math.floor(rand - this.specialWeight);\n                return this.baseOccasions[baseIndex];\n            }\n        },\n\n        scheduleNext(delayMs) {\n            const delay = Math.max(0, delayMs || 0);\n            if (this.timer) window.clearTimeout(this.timer);\n            this.timer = window.setTimeout(() => this.roll(), delay);\n        },\n\n        updateContainerWidth() {\n            if (!this.container || !this.currentEl) return;\n            const isMobile = window.matchMedia('(max-width: 639px)').matches;\n            if (isMobile) {\n                this.container.style.minWidth = '';\n                return;\n            }\n\n            const measureEl = document.createElement('span');\n            measureEl.className = this.currentEl.className;\n            measureEl.style.position = 'absolute';\n            measureEl.style.visibility = 'hidden';\n            measureEl.style.whiteSpace = 'nowrap';\n            measureEl.style.transform = 'none';\n            measureEl.style.transition = 'none';\n            this.container.appendChild(measureEl);\n\n            const allOccasions = [this.specialOccasion, ...this.baseOccasions];\n            let maxWidth = 0;\n            allOccasions.forEach((text) => {\n                measureEl.textContent = text;\n                const width = measureEl.getBoundingClientRect().width;\n                if (width > maxWidth) maxWidth = width;\n            });\n\n            this.container.style.minWidth = `${Math.ceil(maxWidth)}px`;\n            measureEl.remove();\n        },\n\n        roll() {\n            if (!this.ensureBound()) {\n                this.scheduleNext(this.intervalMs);\n                return;\n            }\n            if (this.isAnimating) {\n                this.scheduleNext(this.intervalMs);\n                return;\n            }\n\n            \/\/ N\u00e4chste Occasion zuf\u00e4llig w\u00e4hlen (aber nie dieselbe wie aktuell)\n            let nextText;\n            do {\n                nextText = this.getRandomOccasion();\n            } while (nextText === this.currentText);\n\n            \/\/ N\u00e4chsten Text setzen (bevor Animation startet)\n            this.nextEl.textContent = nextText;\n\n            const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n            if (prefersReduced) {\n                this.currentEl.textContent = nextText;\n                this.currentText = nextText;\n                this.scheduleNext(this.intervalMs);\n                return;\n            }\n\n            this.isAnimating = true;\n            requestAnimationFrame(() => {\n                this.container.classList.add('is-rolling');\n            });\n\n            const finalize = () => {\n                this.currentEl.textContent = nextText;\n                this.currentText = nextText;\n\n                this.container.classList.add('no-transition');\n                this.container.classList.remove('is-rolling');\n\n                requestAnimationFrame(() => {\n                    this.container.classList.remove('no-transition');\n                    this.isAnimating = false;\n                    this.scheduleNext(this.intervalMs - this.animationMs);\n                });\n\n            };\n\n            const onTransitionEnd = () => {\n                window.clearTimeout(fallbackTimer);\n                finalize();\n            };\n\n            const fallbackTimer = window.setTimeout(finalize, this.animationMs + 100);\n            this.nextEl.addEventListener('transitionend', onTransitionEnd, { once: true });\n        },\n        ensureBound() {\n            const container = document.getElementById('occasionRoller');\n            if (!container) return false;\n            if (this.container !== container) {\n                this.container = container;\n                this.currentEl = this.container.querySelector('.text-roller__current');\n                this.nextEl = this.container.querySelector('.text-roller__next');\n                if (this.currentEl && this.currentEl.textContent) {\n                    this.currentText = this.currentEl.textContent.trim();\n                }\n            }\n            if (!this.currentEl || !this.nextEl) return false;\n            if (!this.container.isConnected || !this.currentEl.isConnected || !this.nextEl.isConnected) {\n                return false;\n            }\n            return true;\n        },\n        destroy() {\n            if (this.timer) {\n                window.clearTimeout(this.timer);\n                this.timer = null;\n            }\n            this.isAnimating = false;\n        }\n    };\n\n    window.__occasionRollerInstance = occasionRoller;\n    const startOccasionRoller = () => occasionRoller.init();\n    if (document.readyState === 'loading') {\n        document.addEventListener('DOMContentLoaded', startOccasionRoller);\n    } else {\n        startOccasionRoller();\n    }\n\n    \/\/ ========== TESTIMONIAL SLIDER ==========\n    const testimonialSlider = {\n        currentSlide: 0,\n        totalSlides: 4,\n        visibleSlides: 3, \/\/ Desktop: 3 sichtbar\n        track: null,\n        dots: null,\n        touchStartX: 0,\n        touchEndX: 0,\n\n        init() {\n            this.track = document.getElementById('testimonial-track');\n            this.dots = document.querySelectorAll('.testimonial-dot');\n            this.slides = document.querySelectorAll('.testimonial-slide');\n            \n            \/\/ Touch\/Swipe Support\n            if (this.track) {\n                this.track.addEventListener('touchstart', (e) => {\n                    this.touchStartX = e.changedTouches[0].screenX;\n                }, { passive: true });\n                \n                this.track.addEventListener('touchend', (e) => {\n                    this.touchEndX = e.changedTouches[0].screenX;\n                    this.handleSwipe();\n                }, { passive: true });\n            }\n\n            \/\/ Responsive: Check visible slides\n            this.updateVisibleSlides();\n            window.addEventListener('resize', () => {\n                this.updateVisibleSlides();\n                this.equalizeHeights();\n            });\n            \n            \/\/ Equalize heights after fonts\/images load\n            this.equalizeHeights();\n            window.addEventListener('load', () => this.equalizeHeights());\n        },\n\n        equalizeHeights() {\n            if (!this.slides || this.slides.length === 0) return;\n            \n            \/\/ Reset heights first\n            this.slides.forEach(slide => {\n                const inner = slide.querySelector('div');\n                if (inner) inner.style.minHeight = 'auto';\n            });\n            \n            \/\/ Find max height\n            let maxHeight = 0;\n            this.slides.forEach(slide => {\n                const inner = slide.querySelector('div');\n                if (inner) {\n                    const height = inner.offsetHeight;\n                    if (height > maxHeight) maxHeight = height;\n                }\n            });\n            \n            \/\/ Apply max height to all\n            this.slides.forEach(slide => {\n                const inner = slide.querySelector('div');\n                if (inner) inner.style.minHeight = maxHeight + 'px';\n            });\n        },\n\n        updateVisibleSlides() {\n            \/\/ Mobile: 1 sichtbar, Tablet: 2 sichtbar, Desktop: 3 sichtbar\n            if (window.innerWidth >= 1024) {\n                this.visibleSlides = 3;\n            } else if (window.innerWidth >= 768) {\n                this.visibleSlides = 2;\n            } else {\n                this.visibleSlides = 1;\n            }\n            this.goTo(this.currentSlide); \/\/ Re-apply position\n            this.updateDotsVisibility();\n        },\n\n        updateDotsVisibility() {\n            \/\/ Update which dots are visible based on max positions\n            const maxSlide = this.getMaxSlide();\n            this.dots.forEach((dot, i) => {\n                if (i <= maxSlide) {\n                    dot.style.display = 'block';\n                } else {\n                    dot.style.display = 'none';\n                }\n            });\n        },\n\n        getMaxSlide() {\n            return Math.max(0, this.totalSlides - this.visibleSlides);\n        },\n\n        handleSwipe() {\n            const diff = this.touchStartX - this.touchEndX;\n            if (Math.abs(diff) > 50) {\n                if (diff > 0) {\n                    this.next();\n                } else {\n                    this.prev();\n                }\n            }\n        },\n\n        goTo(index) {\n            const maxSlide = this.getMaxSlide();\n            if (index < 0) index = maxSlide;\n            if (index > maxSlide) index = 0;\n            \n            this.currentSlide = index;\n            \n            \/\/ Calculate offset based on visible slides\n            \/\/ 3 sichtbar = 33.33%, 2 sichtbar = 50%, 1 sichtbar = 100%\n            const slideWidth = 100 \/ this.visibleSlides;\n            const offset = -index * slideWidth;\n            this.track.style.transform = `translateX(${offset}%)`;\n            \n            \/\/ Update dots - add\/remove active class\n            this.dots.forEach((dot, i) => {\n                if (i === index) {\n                    dot.classList.add('active');\n                } else {\n                    dot.classList.remove('active');\n                }\n            });\n        },\n\n        next() {\n            this.goTo(this.currentSlide + 1);\n        },\n\n        prev() {\n            this.goTo(this.currentSlide - 1);\n        }\n    };\n\n    \/\/ Initialize slider on DOM ready\n    document.addEventListener('DOMContentLoaded', () => {\n        testimonialSlider.init();\n    });\n\n    \/\/ ========== DONATION COUNTER ==========\n    async function loadDonationCounter() {\n        const WP_AJAX_URL = '\/wp-admin\/admin-ajax.php';\n        const amountEl = document.getElementById('donation-counter-amount');\n        const donorsEl = document.getElementById('donation-counter-donors');\n        const updatedEl = document.getElementById('donation-counter-updated');\n        \n        if (!amountEl || !donorsEl) return;\n        \n        try {\n            const formData = new FormData();\n            formData.append('action', 'get_donation_counter');\n            \n            const response = await fetch(WP_AJAX_URL, {\n                method: 'POST',\n                body: formData,\n                credentials: 'same-origin'\n            });\n            \n            const result = await response.json();\n            \n            if (result.success && result.data) {\n                \/\/ Formatiere Betrag als Euro\n                const formattedAmount = new Intl.NumberFormat('de-DE', {\n                    style: 'currency',\n                    currency: 'EUR',\n                    maximumFractionDigits: 0\n                }).format(result.data.totalDonationsEuro);\n                \n                \/\/ Formatiere Spender*innen-Anzahl\n                const formattedDonors = new Intl.NumberFormat('de-DE').format(result.data.totalDonors);\n                \n                \/\/ Formatiere Aktualisierungsdatum\n                let formattedUpdated = '';\n                if (result.data.updated_at) {\n                    try {\n                        \/\/ Parse MySQL-Datetime (2025-12-09 14:24:00)\n                        const date = new Date(result.data.updated_at.replace(' ', 'T'));\n                        formattedUpdated = 'Zuletzt aktualisiert: ' + new Intl.DateTimeFormat('de-DE', {\n                            day: 'numeric',\n                            month: 'long',\n                            year: 'numeric'\n                        }).format(date);\n                    } catch (e) {\n                        \/\/ Falls Parsing fehlschl\u00e4gt, nur Datum-Teil extrahieren (vor dem Leerzeichen)\n                        const dateOnly = result.data.updated_at.split(' ')[0];\n                        formattedUpdated = 'Zuletzt aktualisiert: ' + dateOnly;\n                    }\n                }\n                \n                \/\/ Update DOM\n                amountEl.textContent = formattedAmount;\n                donorsEl.textContent = formattedDonors;\n                if (updatedEl) {\n                    updatedEl.textContent = formattedUpdated;\n                }\n            } else {\n                \/\/ Fallback bei Fehler\n                amountEl.textContent = '\u2013';\n                donorsEl.textContent = '\u2013';\n                if (updatedEl) {\n                    updatedEl.textContent = '';\n                }\n            }\n        } catch (error) {\n            console.error('Donation Counter Error:', error);\n            amountEl.textContent = '\u2013';\n            donorsEl.textContent = '\u2013';\n            if (updatedEl) {\n                updatedEl.textContent = '';\n            }\n        }\n    }\n    \n    \/\/ Load donation counter on page load\n    document.addEventListener('DOMContentLoaded', loadDonationCounter);\n\n    \/\/ ========== FAQ ACCORDION ==========\n    function toggleFaq(button) {\n        const content = button.nextElementSibling;\n        const icon = button.querySelector('i');\n        \n        \/\/ Toggle visibility\n        content.classList.toggle('hidden');\n        \n        \/\/ Toggle Icon Rotation & Active Style\n        if (content.classList.contains('hidden')) {\n            icon.classList.remove('rotate-180');\n            button.classList.remove('faq-btn-active'); \n        } else {\n            icon.classList.add('rotate-180');\n            button.classList.add('faq-btn-active'); \n        }\n    }\n\n    const strategyTexts = {\n        1: \"Unsere F\u00f6rderung 2026 konzentriert sich auf: 1. Kl\u00e4rung von Mechanismen (PEM, Schmerzen), 2. Entwicklung von Biomarkern zur Diagnose und 3. Testung innovativer Medikamente (Repurposing).\",\n        2: \"Wir bringen Forschende zusammen \u2013 z. B. \u00fcber die International ME\/CFS Conference in Berlin und das ME\/CFS Research Register, das Projekte aus mehreren L\u00e4ndern sichtbar macht.\",\n        3: \"Wir bereiten neue wissenschaftliche Erkenntnisse so auf, dass Politik, Medien und andere Organisationen sie nutzen k\u00f6nnen \u2013 etwa \u00fcber Forschungsupdates und \u00dcbersichtsformate.\",\n        4: \"Wir stellen Daten, Studien\u00fcbersichten und Informationsmaterialien bereit, die Betroffenen, Angeh\u00f6rigen und Fachpersonen Orientierung geben.\",\n        5: \"Wir gewinnen neue Unterst\u00fctzer*innen und machen ME\/CFS und Long COVID sichtbar \u2013 denn ohne private Finanzierung w\u00fcrde es viele dieser Forschungsprojekte gar nicht geben.\"\n    };\n\n    function selectStrategy(id, btn) {\n        const contentDiv = document.getElementById('strategy-content-text');\n        contentDiv.style.opacity = '0'; \n        setTimeout(() => {\n            contentDiv.textContent = strategyTexts[id];\n            contentDiv.style.opacity = '1'; \n        }, 200);\n        document.querySelectorAll('.strategy-btn').forEach(b => { b.classList.remove('active'); });\n        btn.classList.add('active');\n    }\n\n    document.addEventListener('DOMContentLoaded', function() {\n      const WP_AJAX_URL = '\/wp-admin\/admin-ajax.php';\n      const intervalRadios = document.querySelectorAll('input[name=\"interval\"]');\n      const amountRadios = document.querySelectorAll('input[name=\"amount_selection\"]');\n      const labelOpt1 = document.getElementById('label_opt1');\n      const labelOpt2 = document.getElementById('label_opt2');\n      const labelOpt3 = document.getElementById('label_opt3');\n      const customContainer = document.getElementById('custom_amount_container');\n      const customInput = document.getElementById('custom_amount_input');\n      const finalAmountInput = document.getElementById('final_amount');\n      const submitBtn = document.getElementById('submit_btn');\n      const overlay = document.getElementById('loadingOverlay');\n      const form = document.getElementById('donationForm');\n\n      const config = {\n        month: { presets: [5, 15, 25] },\n        year:  { presets: [60, 100, 250] },\n        once:  { presets: [20, 50, 100] }\n      };\n\n      const intervalTextMap = { month: 'monatlich', year: 'j\u00e4hrlich', once: 'einmalig' };\n      let currentInterval = 'month';\n      let isCustomAmount = false;\n      let currentPresetIndex = 0;\n\n      intervalRadios.forEach(radio => { radio.addEventListener('change', (e) => { currentInterval = e.target.value; updateLabels(); updateCalculations(); }); });\n      amountRadios.forEach(radio => { radio.addEventListener('change', (e) => { \n          const val = e.target.value;\n          if (val === 'custom') { isCustomAmount = true; } else { isCustomAmount = false; if (val === 'opt1') currentPresetIndex = 0; if (val === 'opt2') currentPresetIndex = 1; if (val === 'opt3') currentPresetIndex = 2; }\n          updateCalculations();\n      }); });\n      customInput.addEventListener('input', (e) => { updateSubmitButtonText(); if (isCustomAmount) { finalAmountInput.value = e.target.value; } });\n\n      function updateLabels() {\n        const presets = config[currentInterval].presets;\n        [labelOpt1, labelOpt2, labelOpt3].forEach((label, index) => {\n          label.style.opacity = '0.5';\n          setTimeout(() => { label.textContent = presets[index] + ' \u20ac'; label.style.opacity = '1'; }, 150);\n        });\n      }\n      function updateCalculations() {\n        if (isCustomAmount) { customContainer.classList.add('active'); customInput.required = true; finalAmountInput.value = customInput.value || ''; } else { customContainer.classList.remove('active'); customInput.required = false; const amount = config[currentInterval].presets[currentPresetIndex]; finalAmountInput.value = amount; }\n        updateSubmitButtonText();\n      }\n      function updateSubmitButtonText() {\n        let amountDisplay;\n        if (isCustomAmount) { amountDisplay = customInput.value ? customInput.value + ' \u20ac ' : '... '; } else { amountDisplay = config[currentInterval].presets[currentPresetIndex] + ' \u20ac '; }\n        const intervalText = intervalTextMap[currentInterval] || '';\n        const isOnce = (currentInterval === 'once');\n        const btnText = isOnce ? `Jetzt ${amountDisplay}spenden` : `Jetzt ${amountDisplay}${intervalText} spenden`;\n        submitBtn.querySelector('span').textContent = btnText;\n      }\n      updateLabels(); updateCalculations();\n      \n      \/\/ Gift Checkbox Toggle\n      const giftCheckbox = document.getElementById('gift_checkbox');\n      const giftRecipientContainer = document.getElementById('gift_recipient_container');\n      const giftRecipientInput = document.getElementById('gift_recipient_name');\n      \n      giftCheckbox.addEventListener('change', function() {\n        if (this.checked) {\n          giftRecipientContainer.classList.add('active');\n          giftRecipientInput.required = true;\n        } else {\n          giftRecipientContainer.classList.remove('active');\n          giftRecipientInput.value = '';\n          giftRecipientInput.required = false;\n        }\n      });\n      \n      \/\/ Form Submit - Stripe Checkout via WordPress AJAX\n      form.addEventListener('submit', async function(e) {\n        e.preventDefault();\n        \n        \/\/ Validierung\n        if (isCustomAmount && (!customInput.value || customInput.value < 1)) {\n          customInput.focus();\n          alert('Bitte gib einen g\u00fcltigen Betrag ein.');\n          return;\n        }\n        \n        const nameField = document.getElementById('don_name');\n        const emailField = document.getElementById('don_email');\n        \n        if (!nameField.value.trim()) {\n          nameField.focus();\n          alert('Bitte gib deinen Namen ein.');\n          return;\n        }\n        \n        if (!emailField.value.trim() || !emailField.value.includes('@')) {\n          emailField.focus();\n          alert('Bitte gib eine g\u00fcltige E-Mail-Adresse ein.');\n          return;\n        }\n        \n        \/\/ Geschenk-Validierung: Wenn Checkbox aktiv, muss Name ausgef\u00fcllt sein\n        if (giftCheckbox.checked && !giftRecipientInput.value.trim()) {\n          giftRecipientInput.focus();\n          alert('Bitte gib den Namen des\/der Beschenkten ein.');\n          return;\n        }\n        \n        \/\/ Loading anzeigen\n        overlay.classList.add('active');\n        \n        \/\/ Daten sammeln\n        const formData = new FormData();\n        formData.append('action', 'stripe_create_donation_session');\n        formData.append('amount', finalAmountInput.value);\n        formData.append('interval', currentInterval);\n        formData.append('name', nameField.value.trim());\n        formData.append('email', emailField.value.trim());\n        \n        \/\/ Geschenk-Felder\n        formData.append('is_gift', giftCheckbox.checked ? '1' : '');\n        formData.append('gift_recipient', giftRecipientInput.value.trim());\n        \n        try {\n          const response = await fetch(WP_AJAX_URL, {\n            method: 'POST',\n            body: formData,\n            credentials: 'same-origin'\n          });\n          \n          const result = await response.json();\n          \n          if (result.success && result.data && result.data.url) {\n            \/\/ Weiterleitung zu Stripe Checkout\n            window.location.href = result.data.url;\n          } else {\n            \/\/ Fehler anzeigen\n            overlay.classList.remove('active');\n            const errorMsg = result.data?.message || 'Ein Fehler ist aufgetreten. Bitte versuche es erneut.';\n            alert(errorMsg);\n          }\n        } catch (error) {\n          overlay.classList.remove('active');\n          console.error('Stripe Session Error:', error);\n          alert('Verbindungsfehler. Bitte versuche es erneut.');\n        }\n      });\n    });\n<\/script>\n\n<!-- 6. REACT SLIDER COMPONENT -->\n<script type=\"text\/babel\">\nconst CI = { logoBlue: '#16355d', headline: '#1f2433', highlight: '#6ec1e4', copy: '#7a7a7a', bgLight: '#f5f8fb', bgWhite: '#ffffff', border: '#e2e8f0' };\n\nconst FireTrack = ({ width, isDragging, baseColor }) => (\n    <div className=\"absolute left-0 h-2 rounded-l-full top-1\/2 -translate-y-1\/2 pointer-events-none overflow-hidden\" style={{ width: width, backgroundColor: baseColor, transition: 'width 0.05s linear, background-color 0.3s ease' }}>\n        <div className=\"absolute top-0 left-0 w-full h-full\" style={{ opacity: isDragging ? 1 : 0, transition: 'opacity 0.2s ease-in-out', background: `linear-gradient(90deg, #550000 0%, #ff4500 40%, #ffcc00 80%, #ffffff 100%)`, backgroundSize: '200% 100%', animation: 'flow-left 0.4s infinite linear' }}><\/div>\n        <style>{`@keyframes flow-left { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }`}<\/style>\n    <\/div>\n);\n\nconst RocketThumb = ({ isDragging, intensity, baseColor }) => {\n    const circleStyle = { width: '32px', height: '32px', backgroundColor: '#ffffff', border: `4px solid ${baseColor}`, borderRadius: '50%', position: 'absolute', top: '50%', left: '50%', marginTop: '-16px', marginLeft: '-16px', transform: isDragging ? 'scale(0)' : 'scale(1)', opacity: isDragging ? 0 : 1, transition: 'transform 0.1s ease, opacity 0.1s ease' };\n    const rocketScale = 1.2 + (intensity * 1.3); \n    const rocketStyle = { fontSize: '32px', lineHeight: '1', position: 'absolute', top: '50%', left: '50%', marginTop: '-16px', marginLeft: '-16px', transformOrigin: 'center center', transform: isDragging ? `scale(${rocketScale}) rotate(45deg)` : 'scale(0) rotate(45deg)', opacity: isDragging ? 1 : 0, transition: 'transform 0.1s, opacity 0.1s ease', pointerEvents: 'none', zIndex: 20 };\n    return ( <div className=\"absolute top-0 left-0 w-full h-full pointer-events-none flex items-center justify-center\"><div style={circleStyle}><\/div><div style={rocketStyle}>\ud83d\ude80<\/div><\/div> );\n};\n\nconst RocketExhaust = ({ intensity, isDragging }) => {\n    if (!isDragging || intensity < 0.05) return null;\n    const particleCount = 16 + Math.floor(intensity * 12); const particles = Array.from({ length: particleCount }); const leftOffset = -20 - (intensity * 20);\n    return (\n        <div className=\"absolute pointer-events-none z-[2] flex items-center\" style={{ top: '50%', left: `${leftOffset}px`, transform: 'translateY(-50%)', width: '0px', height: '32px', overflow: 'visible', opacity: isDragging ? 1 : 0, transition: 'opacity 0.1s ease-out' }}>\n            <style>{`@keyframes jet-blast { 0% { transform: translateX(0) scaleX(0.8) scaleY(1); opacity: 0.9; } 100% { transform: translateX(-30px) scaleX(1.5) scaleY(0.5); opacity: 0; } } @keyframes popIn { 0% { transform: scale(0.8); opacity: 0; } 50% { transform: scale(1.2); } 100% { transform: scale(1); opacity: 1; } } .emoji-pop { display: inline-block; animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }`}<\/style>\n            <div style={{ position: 'absolute', right: '-5px', top: '50%', width: `${20 + intensity * 15}px`, height: `${20 + intensity * 15}px`, borderRadius: '50%', transform: 'translateY(-50%)', background: 'radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,200,0,0.8) 40%, transparent 80%)', filter: 'blur(4px)', mixBlendMode: 'screen', zIndex: 20 }} \/>\n            {particles.map((_, i) => {\n                const r = Math.random(); const lengthScale = 30 + (intensity * 120); const width = 15 + (r * lengthScale); const height = 3 + (r * 8 * (1 + intensity)); const topOffset = (Math.random() - 0.5) * 12; const duration = 0.1 + (r * 0.2); const delay = Math.random() * 0.5; const color = i % 3 === 0 ? '#ffffff' : (i % 2 === 0 ? '#ffcc00' : '#ff4500');\n                return ( <div key={i} style={{ position: 'absolute', right: '0', top: '50%', marginTop: `${topOffset}px`, width: `${width}px`, height: `${height}px`, background: `linear-gradient(to left, ${color}, transparent 90%)`, borderRadius: '99px', transformOrigin: 'right center', filter: 'blur(1px)', mixBlendMode: 'screen', animation: `jet-blast ${duration}s infinite linear`, animationDelay: `-${delay}s` }} \/> );\n            })}\n        <\/div>\n    );\n};\n\nconst ResearchSlider = () => {\n    const [sliderVal, setSliderVal] = React.useState(10); const [isDragging, setIsDragging] = React.useState(false);\n    const DONATION_PER_YEAR = 60; const MARKER_MECFS = 650000; const MARKER_ALL = 1500000; const THUMB_WIDTH = 32;\n    const COSTS = { stipendium: 15000, grundlagen: 150000, professur: 500000, medStudie: 1500000 };\n    const calculatePersons = (val) => { let persons = 0; if (val <= 33.33) { persons = (val \/ 33.33) * 10000; } else if (val <= 66.66) { const pct = (val - 33.33) \/ 33.33; persons = 10000 + (pct * 90000); } else { const pct = (val - 66.66) \/ 33.34; persons = 100000 + (pct * 1400000); } return Math.round(persons); };\n    const getSliderPosFromPersons = (persons) => { if (persons <= 10000) return (persons \/ 10000) * 33.33; if (persons <= 100000) return 33.33 + ((persons - 10000) \/ 90000) * 33.33; return 66.66 + ((persons - 100000) \/ 1400000) * 33.34; };\n    const getCalcPos = (pct) => `calc(${pct}% + (${THUMB_WIDTH\/2}px - ${pct\/100} * ${THUMB_WIDTH}px))`;\n    const getTrackWidth = (pct) => `calc(${pct}% + (${THUMB_WIDTH\/2}px - ${pct\/100} * ${THUMB_WIDTH}px))`;\n    const persons = calculatePersons(sliderVal); const totalAmount = persons * DONATION_PER_YEAR;\n    const isMECFSLevel = totalAmount >= 35000000 && totalAmount < 85000000; const isHighImpact = totalAmount >= 85000000; const isColoredPhase = isMECFSLevel || isHighImpact;\n    let activeBgColor = CI.bgLight; if (isMECFSLevel) activeBgColor = CI.logoBlue; if (isHighImpact) activeBgColor = CI.headline; \n    const activeTextColor = isColoredPhase ? '#ffffff' : CI.headline; const activeSubTextColor = isColoredPhase ? 'rgba(255,255,255,0.7)' : CI.copy;\n    const sliderBaseColor = isColoredPhase ? '#ffffff' : CI.logoBlue; const markerActiveColor = isColoredPhase ? '#ffffff' : sliderBaseColor;\n    const cardAccentColor = isColoredPhase ? CI.highlight : CI.logoBlue; const trackBgColor = isColoredPhase ? 'rgba(255,255,255,0.3)' : 'rgba(0,0,0,0.05)';\n    const separatorBg = isColoredPhase ? 'rgba(255,255,255,0.1)' : '#ffffff'; const separatorText = isColoredPhase ? 'rgba(255,255,255,0.8)' : '#b9c5d4'; const separatorBorder = isColoredPhase ? 'rgba(255,255,255,0.2)' : '#e2e8f0';\n    const intensity = sliderVal \/ 100;\n    const getImpactData = (amount) => { if (amount < 15000) return { emoji: \"\ud83e\uddd0\" }; if (amount < 50000) return { emoji: \"\ud83d\ude42\" }; if (amount < 120000) return { emoji: \"\ud83d\ude0a\" }; if (amount < 250000) return { emoji: \"\ud83d\ude03\" }; if (amount < 500000) return { emoji: \"\ud83d\ude2e\" }; if (amount < 1000000) return { emoji: \"\ud83e\udd29\" }; if (amount < 2500000) return { emoji: \"\ud83d\ude80\" }; if (amount < 5000000) return { emoji: \"\ud83d\udd25\" }; if (amount < 10000000) return { emoji: \"\ud83d\udca5\" }; if (amount < 85000000) return { emoji: \"\ud83e\udd29\" }; return { emoji: \"\ud83d\ude31\" }; };\n    const impact = getImpactData(totalAmount);\n    const formatEuro = (num) => new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR', maximumFractionDigits: 0 }).format(num);\n    const formatPersons = (num) => new Intl.NumberFormat('de-DE').format(num);\n    const formatCount = (num) => new Intl.NumberFormat('de-DE').format(Math.floor(num));\n    const posMECFS = getSliderPosFromPersons(MARKER_MECFS); const posALL = getSliderPosFromPersons(MARKER_ALL);\n    const OderSeparator = () => ( <div className=\"flex items-center justify-center py-1 md:py-0 md:px-2\"> <span className=\"text-[13px] font-bold uppercase tracking-widest px-2 py-0.5 rounded-full border\" style={{ backgroundColor: separatorBg, color: separatorText, borderColor: separatorBorder, transition: 'all 0.5s ease' }}>oder<\/span> <\/div> );\n    const handleStart = () => setIsDragging(true); const handleEnd = () => setIsDragging(false);\n\n    return (\n        <div className=\"w-full mx-auto rounded-3xl bg-white box-border\">\n            <div className=\"text-center px-6 py-12\">\n                <h2 className=\"text-2xl sm:text-3xl font-bold mb-2\" style={{ color: CI.headline }}>Was w\u00e4re m\u00f6glich, wenn wir <span style={{ color: cardAccentColor }}>zusammenlegen?<\/span><\/h2>\n                <p className=\"text-sm sm:text-base !mb-0\" style={{ color: CI.copy }}>Modellrechnung: Unser gemeinsames Finanzierungspotenzial (auf Basis von 5 EUR\/Person pro Monat)<\/p>\n            <\/div>\n            <div className=\"p-6 sm:p-10 transition-all duration-500 shadow-xl\" style={{ backgroundColor: activeBgColor }}>\n                <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-8 mb-8\">\n                    <div className=\"text-left p-5 rounded-2xl\" style={{ border: '1px solid #cbd5e1' }}>\n                        <div className=\"text-sm uppercase tracking-wider font-bold mb-1\" style={{ color: activeSubTextColor, transition: 'all 0.5s ease' }}>Spender*innen<\/div>\n                        <div className=\"text-3xl sm:text-4xl font-black\" style={{ color: activeTextColor, transition: 'all 0.5s ease' }}>{formatPersons(persons)}<\/div>\n                        <div className=\"text-xs mt-1\" style={{ color: activeSubTextColor, transition: 'all 0.5s ease' }}>Personen<\/div>\n                    <\/div>\n                    <div className=\"text-left p-5 rounded-2xl\" style={{ border: '1px solid #cbd5e1' }}>\n                        <div className=\"text-sm uppercase tracking-wider font-bold mb-1\" style={{ color: cardAccentColor, transition: 'all 0.5s ease' }}>Gespendete Summe<\/div>\n                        <div className=\"flex items-center gap-3\">\n                            <div className=\"text-3xl sm:text-4xl font-black\" style={{ color: cardAccentColor, transition: 'all 0.5s ease' }}>{formatEuro(totalAmount)}<\/div>\n                            <div key={impact.emoji} className=\"emoji-pop text-3xl sm:text-4xl leading-none filter drop-shadow-xl\">{impact.emoji}<\/div>\n                        <\/div>\n                        <div className=\"text-xs mt-1\" style={{ color: cardAccentColor, transition: 'all 0.5s ease' }}>pro Jahr<\/div>\n                    <\/div>\n                <\/div>\n                <div className=\"relative mb-12 md:mb-16 select-none isolate w-full\" style={{ paddingBottom: '80px' }}> {\/* Added padding bottom to avoid overlap *\/}\n                    <div className=\"relative w-full h-[32px]\">\n                        <div className=\"absolute left-0 right-0 h-2 rounded-full top-1\/2 -translate-y-1\/2 z-0\" style={{ backgroundColor: trackBgColor, transition: 'all 0.5s ease' }}><\/div>\n                        <FireTrack width={getTrackWidth(sliderVal)} isDragging={isDragging} baseColor={sliderBaseColor} \/>\n                        <div className=\"absolute top-0 h-full z-[4] pointer-events-none\" style={{ left: getCalcPos(sliderVal), width: 0, height: '100%' }}>\n                            <RocketExhaust intensity={intensity} isDragging={isDragging} \/>\n                            <RocketThumb isDragging={isDragging} intensity={intensity} baseColor={sliderBaseColor} \/>\n                        <\/div>\n                        <input type=\"range\" min=\"0\" max=\"100\" step=\"0.1\" value={sliderVal} onChange={(e) => setSliderVal(parseFloat(e.target.value))} onMouseDown={handleStart} onTouchStart={handleStart} onMouseUp={handleEnd} onTouchEnd={handleEnd} onMouseLeave={handleEnd} \/>\n                    <\/div>\n                    {\/* Marker 1: ME\/CFS Betroffene - Container endet am Tick, Label l\u00e4uft nach links *\/}\n                    <div className=\"absolute cursor-pointer group z-[3]\" style={{ right: `calc(100% - ${getCalcPos(posMECFS)})`, top: '36px', transition: 'all 0.5s ease' }} onClick={() => { setSliderVal(posMECFS); setIsDragging(true); setTimeout(() => setIsDragging(false), 400); }}>\n                        <div className=\"flex flex-col items-end\">\n                            <div className=\"w-1 h-6 rounded-full\" style={{ backgroundColor: persons >= MARKER_MECFS ? sliderBaseColor : (isColoredPhase ? 'rgba(255,255,255,0.3)' : '#cbd5e1'), transition: 'all 0.5s ease' }}><\/div>\n                            <div className=\"mt-2 text-[10px] sm:text-xs font-bold uppercase text-right leading-snug whitespace-nowrap\" style={{ color: persons >= MARKER_MECFS ? markerActiveColor : (isColoredPhase ? 'rgba(255,255,255,0.5)' : '#94a3b8'), transition: 'all 0.5s ease' }}>Alle ME\/CFS-Betroffenen in \ud83c\udde9\ud83c\uddea<\/div>\n                        <\/div>\n                    <\/div>\n                    {\/* Marker 2: Alle Long COVID & ME\/CFS - Container endet am Tick, Label l\u00e4uft nach links *\/}\n                    <div className=\"absolute cursor-pointer group\" style={{ right: `calc(100% - ${getCalcPos(100)})`, top: '36px', transition: 'all 0.5s ease' }} onClick={() => { setSliderVal(100); setIsDragging(true); setTimeout(() => setIsDragging(false), 400); }}>\n                        <div className=\"flex flex-col items-end\">\n                            <div className=\"w-1 h-20 rounded-full\" style={{ backgroundColor: persons >= MARKER_ALL ? sliderBaseColor : (isColoredPhase ? 'rgba(255,255,255,0.3)' : '#cbd5e1'), transition: 'all 0.5s ease' }}><\/div>\n                            <div className=\"mt-2 text-[10px] sm:text-xs font-bold uppercase text-right leading-snug whitespace-nowrap\" style={{ color: persons >= MARKER_ALL ? markerActiveColor : (isColoredPhase ? 'rgba(255,255,255,0.5)' : '#94a3b8'), transition: 'all 0.5s ease' }}>Alle Long COVID- & ME\/CFS-Betroffenen in \ud83c\udde9\ud83c\uddea<\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                <div className=\"pt-8 border-t\" style={{ borderColor: isColoredPhase ? 'rgba(255,255,255,0.2)' : 'rgba(0,0,0,0.05)', transition: 'all 0.5s ease' }}>\n                    <div className=\"flex flex-col md:flex-row justify-between items-center gap-4 md:gap-2\">\n                        <div className=\"text-center w-full\"><div className=\"text-3xl sm:text-4xl font-bold mb-1\" style={{ color: activeTextColor, transition: 'all 0.5s ease' }}>{formatCount(totalAmount \/ COSTS.stipendium)}<\/div><div className=\"text-sm sm:text-sm opacity-70 leading-tight\" style={{ color: activeTextColor, transition: 'all 0.5s ease' }}>Stipendien<\/div><\/div>\n                        <OderSeparator \/>\n                        <div className=\"text-center w-full\"><div className=\"text-3xl sm:text-4xl font-bold mb-1\" style={{ color: activeTextColor, transition: 'all 0.5s ease' }}>{formatCount(totalAmount \/ COSTS.grundlagen)}<\/div><div className=\"text-sm sm:text-sm opacity-70 leading-tight\" style={{ color: activeTextColor, transition: 'all 0.5s ease' }}>Grundlagen-Studien<\/div><\/div>\n                        <OderSeparator \/>\n                        <div className=\"text-center w-full\"><div className=\"text-3xl sm:text-4xl font-bold mb-1\" style={{ color: activeTextColor, transition: 'all 0.5s ease' }}>{formatCount(totalAmount \/ COSTS.professur)}<\/div><div className=\"text-sm sm:text-sm opacity-70 leading-tight\" style={{ color: activeTextColor, transition: 'all 0.5s ease' }}>Forschungsprofessuren<\/div><\/div>\n                        <OderSeparator \/>\n                        <div className=\"text-center w-full\"><div className=\"text-3xl sm:text-4xl font-bold mb-1\" style={{ color: activeTextColor, transition: 'all 0.5s ease' }}>{formatCount(totalAmount \/ COSTS.medStudie)}<\/div><div className=\"text-sm sm:text-sm opacity-70 leading-tight\" style={{ color: activeTextColor, transition: 'all 0.5s ease' }}>Medikamenten-Studien<\/div><\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    );\n};\n\nconst root = ReactDOM.createRoot(document.getElementById('research-funding-root'));\nroot.render(<ResearchSlider \/>);\n<\/script>\n\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>Spendenabo 5\u20ac for 5 Things Bring die Forschung voran \u2013 ab 5\u20ac monatlich Werde Teil einer Bewegung: Aus vielen kleinen Beitr\u00e4gen machen wir mehr biomedizinische Forschung zu ME\/CFS und Long COVID \u2013 f\u00fcr bessere Diagnostik und wirksame Behandlungsans\u00e4tze. Wenn wir alle 5 \u20ac geben, bewegen wir Millionen. Die H\u00fcrde ist niedrig \u2013 jede*r kann Teil [&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-14972","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/mecfs-research.org\/en\/wp-json\/wp\/v2\/pages\/14972","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=14972"}],"version-history":[{"count":397,"href":"https:\/\/mecfs-research.org\/en\/wp-json\/wp\/v2\/pages\/14972\/revisions"}],"predecessor-version":[{"id":16370,"href":"https:\/\/mecfs-research.org\/en\/wp-json\/wp\/v2\/pages\/14972\/revisions\/16370"}],"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=14972"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}