diff --git a/src/assets/icons/YoungVisionLogoOnly.svelte b/src/assets/icons/YoungVisionLogoOnly.svelte
new file mode 100644
index 00000000..b9a58a8a
--- /dev/null
+++ 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
index 55073ec2..4c949e26 100644
--- 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
index a49f69a4..369c2863 100644
--- 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">
diff --git a/src/components/support-us/FundraisingProgress.svelte b/src/components/support-us/FundraisingProgress.svelte
new file mode 100644
index 00000000..6f9f12dd
--- /dev/null
+++ b/src/components/support-us/FundraisingProgress.svelte
@@ -0,0 +1,252 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+
+  let peopleCount = $state(14);
+  let currentProgress = $state(236);
+  const { middleProgress, targetProgress } = $props();
+  let waveOffset = $state(0);
+
+  let finished = $derived(currentProgress >= targetProgress);
+
+  const relativeProgress = $derived.by(() => {
+    if (currentProgress <= middleProgress) {
+      // the yellow triangle ends at around a height of 72
+      return (currentProgress / middleProgress) * 72;
+    }
+
+    return 72 + ((currentProgress - middleProgress) / (targetProgress - middleProgress)) * 28;
+  });
+
+  onMount(() => {
+    if (finished) {
+      return;
+    }
+    let animationFrame: number;
+
+    const animateWave = (timestamp: number) => {
+      // Move the wave to the right, but ensure it's always covering the full width
+      waveOffset = ((timestamp / 1000) * 10) % 39;
+      animationFrame = requestAnimationFrame(animateWave);
+    };
+
+    animationFrame = requestAnimationFrame(animateWave);
+    return () => cancelAnimationFrame(animationFrame);
+  });
+
+  const textY = $derived.by(() => {
+    const value = 100 - relativeProgress + 15;
+    return Math.min(Math.max(65, value), 93);
+  });
+</script>
+
+<div class="lg:relative lg:mx-auto lg:h-64 lg:w-3xl">
+  <div class="flex flex-col items-center justify-center lg:block">
+    <svg
+      class="size-64 drop-shadow-xl"
+      xmlns="http://www.w3.org/2000/svg"
+      version="1.1"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+      viewBox="0 0 117 100"
+    >
+      {#if !finished}
+        <defs>
+          <clipPath id="clip-top">
+            <path
+              d={`M-39,100 
+          v-${finished ? 105 : relativeProgress * 0.95 + 5} 
+          q9.75,-7 19.5,0 
+          q9.75,7 19.5,0 
+          q9.75,-7 19.5,0 
+          q9.75,7 19.5,0 
+          q9.75,-7 19.5,0 
+          q9.75,7 19.5,0 
+          q9.75,-7 19.5,0 
+          q9.75,7 19.5,0 
+          q9.75,-7 19.5,0 
+          v${relativeProgress + 5} 
+          z`}
+              transform={`translate(${waveOffset}, 0)`}
+            />
+          </clipPath>
+        </defs>
+
+        <g id="logo-greyscale">
+          <path
+            id="right"
+            style="fill:#969696;fill-opacity:1;fill-rule:nonzero;stroke:none"
+            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"
+            transform="matrix(.13333 0 0 -.13333 0 99.04)"
+          ></path>
+          <path
+            id="left"
+            style="fill:#c4c4c4;fill-opacity:1;fill-rule:nonzero;stroke:none"
+            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"
+            transform="matrix(.13333 0 0 -.13333 0 99.04)"
+          ></path>
+          <path
+            id="triangle"
+            style="fill:#dcdcdc;fill-opacity:1;fill-rule:nonzero;stroke:none"
+            d="M434.441 545.516 291.68 186.891l294.328-.235Z"
+            transform="matrix(.13333 0 0 -.13333 0 99.04)"
+          ></path>
+        </g>
+      {/if}
+      <g id="logo" clip-path="url(#clip-top)">
+        <path
+          id="pink-right"
+          style="fill:#eb4b92;fill-opacity:1;fill-rule:nonzero;stroke:none"
+          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"
+          transform="matrix(.13333 0 0 -.13333 0 99.04)"
+        ></path>
+        <path
+          id="green-left"
+          style="fill:#b7d29b;fill-opacity:1;fill-rule:nonzero;stroke:none"
+          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"
+          transform="matrix(.13333 0 0 -.13333 0 99.04)"
+        ></path>
+        <path
+          id="yellow-triangle"
+          style="fill:#e8ee3c;fill-opacity:1;fill-rule:nonzero;stroke:none"
+          d="M434.441 545.516 291.68 186.891l294.328-.235Z"
+          transform="matrix(.13333 0 0 -.13333 0 99.04)"
+        ></path>
+      </g>
+      {#if currentProgress <= middleProgress}
+        <!-- dashed line for middle progress -->
+        <line
+          x1="9"
+          y1="27"
+          x2="109"
+          y2="27"
+          stroke="oklch(27.9% 0.041 260.031)"
+          stroke-dasharray="2 2"
+          stroke-width="1"
+          class="lg:hidden"
+        />
+        <text
+          class="lg:hidden"
+          font-weight="bold"
+          x="85"
+          y="25"
+          font-size="9"
+          text-anchor="middle"
+          fill="oklch(27.9% 0.041 260.031)">{middleProgress}€</text
+        >
+      {/if}
+      <text
+        font-weight="bold"
+        x="59"
+        y={textY}
+        font-size="9"
+        text-anchor="middle"
+        fill="oklch(12.9% 0.042 264.695)">{currentProgress}€</text
+      >
+    </svg>
+    <p class="text-center text-xl lg:ml-8 lg:text-left">
+      Dank <span class="font-bold">{peopleCount}</span> Menschen
+    </p>
+  </div>
+  <div class="hidden lg:block">
+    <!-- Dashed line for middle progress -->
+    <div
+      class={[
+        'rounded-l-full lg:absolute lg:top-[77px] lg:left-[128px] lg:h-0.5 lg:w-[108px] lg:border-dashed',
+        currentProgress >= middleProgress ? 'lg:bg-light-green' : 'lg:bg-gray-300',
+      ]}
+    ></div>
+    <div
+      class={[
+        'rounded-r-full lg:absolute lg:top-[77px] lg:left-[236px] lg:h-0.5 lg:w-[196px] lg:border-dashed',
+        currentProgress >= middleProgress ? 'lg:bg-dark-green' : 'lg:bg-gray-500',
+      ]}
+    ></div>
+
+    <!-- Dashed line for target progress -->
+    <div
+      class={[
+        'rounded lg:absolute lg:top-[22px] lg:right-[76px] lg:left-[248px] lg:h-0.5 lg:border-dashed',
+        currentProgress >= targetProgress ? 'lg:bg-dark-green' : 'lg:bg-gray-700',
+      ]}
+    ></div>
+  </div>
+  <div
+    class={[
+      'mx-auto mt-8 flex gap-y-4 md:flex-row lg:mt-0 lg:block lg:gap-y-8',
+      currentProgress >= middleProgress ? 'flex-col-reverse' : 'flex-col', // Show next unfulfilled target first
+    ]}
+  >
+    <div
+      class={[
+        currentProgress >= middleProgress && 'text-dark-green',
+        'lg:absolute lg:top-[88px] lg:right-1/3 lg:w-48',
+      ]}
+    >
+      <h3 class="flex items-center gap-2">
+        <span class="font-bold">{middleProgress}€</span> <span class="font-light">/ Monat</span>
+        {#if currentProgress >= middleProgress}
+          <svg
+            class="size-[1lh]"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 64 64"
+            enable-background="new 0 0 64 64"
+            ><path
+              d="M32,2C15.431,2,2,15.432,2,32c0,16.568,13.432,30,30,30c16.568,0,30-13.432,30-30C62,15.432,48.568,2,32,2z M25.025,50  l-0.02-0.02L24.988,50L11,35.6l7.029-7.164l6.977,7.184l21-21.619L53,21.199L25.025,50z"
+              fill="currentColor"
+            />
+          </svg>
+        {/if}
+      </h3>
+      <p class="mt-0 lg:mt-2">Rebecca kann ihren Job aufhören um ihre Zeit YV zu widmen.</p>
+    </div>
+    <div
+      class={[
+        currentProgress >= targetProgress && 'text-dark-green',
+        'lg:absolute lg:top-1/8 lg:right-0 lg:w-48',
+      ]}
+    >
+      <h3 class="flex items-center gap-2">
+        <span class="font-bold">{targetProgress}€</span> <span class="font-light">/ Monat</span>
+        {#if currentProgress >= targetProgress}
+          <svg
+            class="size-[1lh]"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 64 64"
+            enable-background="new 0 0 64 64"
+            ><path
+              d="M32,2C15.431,2,2,15.432,2,32c0,16.568,13.432,30,30,30c16.568,0,30-13.432,30-30C62,15.432,48.568,2,32,2z M25.025,50  l-0.02-0.02L24.988,50L11,35.6l7.029-7.164l6.977,7.184l21-21.619L53,21.199L25.025,50z"
+              fill="currentColor"
+            />
+          </svg>
+        {/if}
+      </h3>
+      <p class="mt-0 max-w-prose lg:mt-2">Hiermit muss Rebecca keinen Minijob nebenbei machen.</p>
+    </div>
+  </div>
+</div>
+
+<form class="mt-16">
+  <div>
+    <label for="progress">Progress</label>
+    <input id="progress" type="range" bind:value={currentProgress} max={targetProgress} min={0} />
+    <output for="progress">{currentProgress}</output>
+  </div>
+  <div>
+    <label for="peopleCount">People Count</label>
+    <input id="peopleCount" type="range" bind:value={peopleCount} max={100} min={0} />
+    <output for="peopleCount">{peopleCount}</output>
+  </div>
+  <button
+    class="rounded bg-blue-600 px-4 py-2 text-white"
+    onclick={() => {
+      currentProgress = 0;
+      const increaseProgress = () => {
+        currentProgress = currentProgress + 5;
+        if (currentProgress < targetProgress) {
+          setTimeout(() => increaseProgress(), 50);
+        }
+      };
+      increaseProgress();
+    }}
+    type="button">Simulate</button
+  >
+</form>