YoungVision-eV · MrGreenTea · Jun 10, 2025 · Jun 11, 2025 · Jun 11, 2025 · Jun 11, 2025
diff --git a/src/assets/icons/YoungVisionLogoOnly.svelte b/src/assets/icons/YoungVisionLogoOnly.svelte
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="117" height="99.24">
+  <g transform="matrix(.133649846 0 0 -.133649846 0 99.24)">
+    <path
+      style="fill:var(--pink, #eb4b92)"
+      d="M875.453 692.344s-.637-2.719-1.988-2.891c3.449 13.848-1.379 29.043-11.594 38.465 3.609-4.637 5.078-8.922.629-4.07.688-2.028-1.484-.86-4.312.656-2.922 1.48-6.75 2.957-9.04 3.082 2.227-1.223 3.957-2.602 5.411-3.934a27.283 27.283 0 0 1-6.379 2.383c-.121.055-.207.125-.328.18-3.957 1.926-8.848 3.066-13.379 3.113 2.55-.328 5-.797 3.73-.98 0 0 2.512-.481 3.52-1.496H678.648c-14.113 5.074-41.585 4.511-68.593 2.793-13.117-.973-26.332-1.95-37.66-2.793h-4.258c-12.176 0-23.617-4.082-32.977-11.032-3.074-1.687-4.281-2.519-4.492-1.922-.246.762 2.895 4.7 7.687 8.168 9.411 7.395 25.208 10.43 12.805 7.512 6.86 2.461 11.633 3.301 14.258 3.887 2.641.605 3.195 1.117 2.031 1.57-2.25.906-11.773 1.903-23.699-1.738-11.895-3.434-25.281-12.492-33.734-24.211-4.348-5.715-7.434-12.441-9.395-16.086-2.195-4.199-4.117-7.719-5.598-10.148-9.628-17.539-21.074-42.497-33.199-70.848a280175.86 280175.86 0 0 0-18.562-44.566l-21.973-54.61c.024-.055.051-.109.074-.168l13.078 32.86 151.567-358.864-294.328.235-.528-1.508c-2.429-6.969-4.89-14.016-7.339-21.035-4.903-14.035-9.821-27.977-14.719-41.032-4.899-13.058-9.774-25.238-14.598-35.757-2.41-5.258-4.808-10.106-7.187-14.438l-3.645-6.406a59.385 59.385 0 0 1-3.848-9.55c-2.718-16.138 3.957-33.044 16.493-43.317 6.234-5.203 13.992-8.786 22.046-10.133 4-.703 8.559-.738 10.254-.766l7.172-.125 57.367-.984-2.445-1.79c55.824-.284 114.539.645 172.328 1.813l21.617.446 10.762.226 5.828.168c2.43.094 4.852.274 7.254.637 19.324 2.508 36.957 12.91 48.633 27.61 2.848 3.73 5.512 7.597 7.609 11.753 1.129 2.035 2.039 4.172 2.946 6.297.949 2.215 1.328 3.394 2.019 5.137 2.473 6.433 4.93 12.82 7.36 19.148 4.914 12.653 9.734 25.074 14.449 37.211 16.765 42.324 17.676 56.824 30.094 74.098 37.078 82.539 70.957 183.863 103.605 265.824-1.602.297 1.465 12.309-5.473-2.477-15.164-42.609-38.433-89.293-43.046-89.128l6.75 15.5-7.942-14.465-3.34-4.024 87.703 215.883s1.395-.93-1.769-10.605c-.5-.914-.848-1.418-.77-.801l-2.39-7.867c-7.219-18.075-1.485-11.981 3.906.644 12.211 28.91 25.215 57.473 37.676 86.281l.234.774.57 1.101 1.704 3.985c.578 5.133 4.73 14.347 10.089 26.48-.39.16-1.218-.754.34 3.656 4.16 8.586 5.985 14.454 6.004 16.989"
+    ></path>
+    <path
+      style="fill:var(--green, #b7d29b)"
+      d="M415.859 586.523c-4.246 7.844-8.968 17.34-13.39 25.872l-33.473 80.339c-8.617 20.661-28.805 34.114-51.187 34.114h-.207c-1.094 1.222 8.832-.129 10.503.445-2.707 1.465-9.097 1.949-13.921 1.562l.988-.234c-4.344-.234-13.031-.605-17.731.344 1.11.629-.941 1.098 2.25 1.25l-5.98.117c-.762-.195-1.539-.398.184-.543-2.821-.484-5.641-.211-7.809.156-.148.149-1.895.082-4.426-.093l-.117.066c.09.012.074.016-.031.016v.004l-.02-.004c-.09 0-.105.007-.312-.004-3.68.726-48.809-3.309-51.489-2.051-3.191-.051-7.043-.191-6.293-.863-5.394.328 1.614 1.281-2.226 1.91-.086-.106.316-.336-.91-.313l-3.692.848c-8.375-1.039-20.656.316-29.422-1.063 2.54.727 5.438 2.004 11.079 2.661l.988-.352c.801.207 5.445.438 5.312 1.109-5.355.446-9.945.325-15.586-.336l-3.074.547c.024-.089.113-.164.09-.261-1.844.414-1.648.484-.977.746.086.047.196.101.387.152-3.359 1.961-21.043-1.246-30.832-.23-2.883-.274-.269-.332-3.859-.707-10.004.777-16.903 1.378-27.363 1.832-3.34-.844-3.602-1.184.433-2.067l-7.898.278c7.183 2.253-14.754 2.148-6.836 4.398-2.309.516-7.039.621-11.465.258-.445-.567-1.14-1.481-6.707-1.477-7.742.758-5.762.563-12.313 1.203-.695.336-.547.578-.242.801.086.067.23.16.332.238.117.071.215.145.305.219 1.113.809 2.746 1.832 4.031 1.77 3.652-.075 7.3-.153 10.945-.227-11.668 1.098-23.867 2.168-36.168 3.004l-9.234.582c-1.64.074-2.852.199-4.844.223-2.398-.071-4.804-.02-7.215-.496-9.695-1.352-18.843-6.403-25.285-13.547C4.688 721.594.742 712.371.098 703.016c-.301-4.668.09-9.348 1.3-13.688.465-2.219 1.407-4.215 2.184-6.254.785-1.836 1.293-2.652 1.957-4.008C10.574 669.277 15.9 660.43 21.527 653c-3.086-5.531 12.204-48.238 13.688-48.621A869.542 869.542 0 0 0 48.3 578.887c26.98-54.731 50.863-116.438 75.41-180.352l65.637-165.547 4.043-8.277c1.687-3.402 3.609-6.637 5.765-9.637a71.94 71.94 0 0 1 14.953-15.5c11.172-8.558 27.317-18.121 37.301-14.48-4.398 1.422-5.297 1.808-15.019 6.054 3.972-1.644 8.121-2.886 12.359-3.757 2.98.015 6.945.027 11.191.277 3.618.297 7.641.508 11.692.68 8.101.343 14.805-1.895 20.047-1.457L434.441 545.52c-9.304 19.839-9.222 16.07-18.582 41.003"
+    ></path>
+    <path style="fill:var(--yellow, #e8ee3c)" d="M434.441 545.516 291.68 186.891l294.328-.235Z"
+    ></path>
+  </g>
+</svg>
diff --git a/src/components/support-us/BecomeSupportingMember.astro b/src/components/support-us/BecomeSupportingMember.astro
@@ -1,44 +1,28 @@
 ---
-import Background from '@assets/support-us/background-supporting-member.png';
 import Button from '@components/Button.astro';
-import { getImage } from 'astro:assets';
 
-import Disclosure from './Disclosure.svelte';
-
-const backgroundImage = await getImage({ height: 1080, src: Background, width: 1920 });
+import FundraisingProgress from './FundraisingProgress.svelte';
 ---
 
-<section class="bg-light-green py-8 lg:py-12" data-testid="supporting-members">
-  <div class="mx-auto max-w-[80rem] px-4 lg:px-20">
+<section class="py-8 lg:py-12" data-testid="supporting-members">
+  <div class="mx-auto max-w-6xl px-4 lg:px-20">
     <h2 class="font-serif text-2xl font-bold lg:text-4xl">Werde Fördermitglied</h2>
     <p class="mt-3 font-serif text-xl font-bold lg:mt-2 lg:text-2xl">
       Deine Chance uns zu unterstützen und mehr über uns zu erfahren!
     </p>
+    <div class="mt-8 px-12 py-8">
+      <FundraisingProgress client:load middleProgress={965} targetProgress={1325} />
+    </div>
     <p class="mt-8 max-w-prose lg:mt-10 lg:text-xl">
       Du willst junge Menschen auf ihrer Reise zur persönlichen Entwicklung und zur aktiven
-      Gestaltung unserer Gesellschaft begleiten? Erfahre hier, wie du uns unterstützen kannst!
+      Gestaltung unserer Gesellschaft begleiten?
     </p>
-    <Button
-      class="mt-8 lg:mt-6"
-      color="dark"
-      href="https://easyverein.com/public/yv/applicationform/7237"
-      text="Werde Fördermitglied"
-    />
-    <Disclosure client:load />
-
-    <div class="mx-2 mt-2 w-full border-t border-gray-300"></div>
+    <div class="mt-8 flex items-center justify-center lg:mt-6 lg:block">
+      <Button
+        color="dark"
+        href="https://easyverein.com/public/yv/applicationform/7237"
+        text="Werde Fördermitglied"
+      />
+    </div>
   </div>
 </section>
-
-<style define:vars={{ backgroundImage: `url(${backgroundImage.src})` }}>
-  section {
-    background-image: var(--backgroundImage);
-    background-position: top center;
-  }
-
-  @media (min-width: 1024px) {
-    section {
-      background-size: cover;
-    }
-  }
-</style>
diff --git a/src/components/support-us/DonationMethods.astro b/src/components/support-us/DonationMethods.astro
@@ -10,7 +10,7 @@ import DonationMethodTabs from './DonationMethodTabs.svelte';
 const possibilities = await getDonationMethods();
 ---
 
-<section class="mx-auto max-w-[80rem] py-16 lg:py-24">
+<section class="mx-auto max-w-6xl pb-16 lg:pb-24">
   <div class="mt-4 lg:px-20">
     <h2 class="font-serif text-2xl font-bold">Weitere Möglichkeiten, uns zu unterstützen</h2>
     <p class="mt-3 text-xl lg:mt-4">