diff --git a/banners/desktop/C24_WMDE_Desktop_DE_23/banner_ctrl.ts b/banners/desktop/C24_WMDE_Desktop_DE_23/banner_ctrl.ts
new file mode 100644
index 000000000..4c1e2ca7c
--- /dev/null
+++ b/banners/desktop/C24_WMDE_Desktop_DE_23/banner_ctrl.ts
@@ -0,0 +1,75 @@
+import { createVueApp } from '@src/createVueApp';
+
+import './styles/styles.scss';
+
+import BannerConductor from '@src/components/BannerConductor/FallbackBannerConductor.vue';
+import Banner from './components/BannerCtrl.vue';
+import FallbackBanner from './components/FallbackBanner.vue';
+import { UrlRuntimeEnvironment } from '@src/utils/RuntimeEnvironment';
+import { WindowResizeHandler } from '@src/utils/ResizeHandler';
+import PageWPORG from '@src/page/PageWPORG';
+import { WindowMediaWiki } from '@src/page/MediaWiki/WindowMediaWiki';
+import { SkinFactory } from '@src/page/skin/SkinFactory';
+import { WindowSizeIssueChecker } from '@src/utils/SizeIssueChecker/WindowSizeIssueChecker';
+import TranslationPlugin from '@src/TranslationPlugin';
+import { Translator } from '@src/Translator';
+import DynamicTextPlugin from '@src/DynamicTextPlugin';
+import { LocalImpressionCount } from '@src/utils/LocalImpressionCount';
+import { LegacyTrackerWPORG } from '@src/tracking/LegacyTrackerWPORG';
+import eventMappings from './event_map';
+import { createFallbackDonationURL } from '@src/createFallbackDonationURL';
+import { LocalStorageCloseTracker } from '@src/utils/LocalCloseTracker';
+import messages from './messages';
+import { LocaleFactoryDe } from '@src/utils/LocaleFactory/LocaleFactoryDe';
+import { createFormItems } from './form_items';
+import { createFormActions } from '@src/createFormActions';
+import { WindowTimer } from '@src/utils/Timer';
+import { currentCampaignTimePercentage } from '@src/components/ProgressBar/currentCampaignTimePercentage';
+
+const date = new Date();
+const localeFactory = new LocaleFactoryDe();
+const translator = new Translator( messages );
+const mediaWiki = new WindowMediaWiki();
+const page = new PageWPORG( mediaWiki, ( new SkinFactory( mediaWiki ) ).getSkin(), new WindowSizeIssueChecker( 400 ) );
+const runtimeEnvironment = new UrlRuntimeEnvironment( window.location );
+const impressionCount = new LocalImpressionCount( page.getTracking().keyword, runtimeEnvironment );
+const tracker = new LegacyTrackerWPORG( mediaWiki, page.getTracking().keyword, eventMappings, runtimeEnvironment );
+
+const app = createVueApp( BannerConductor, {
+	page,
+	bannerConfig: {
+		delay: runtimeEnvironment.getBannerDelay( 7500 ),
+		transitionDuration: 1000
+	},
+	bannerProps: {
+		useOfFundsContent: localeFactory.getUseOfFundsLoader().getContent(),
+		remainingImpressions: impressionCount.getRemainingImpressions( page.getMaxBannerImpressions( 'desktop' ) ),
+		localCloseTracker: new LocalStorageCloseTracker(),
+		donationLink: createFallbackDonationURL( page.getTracking(), impressionCount )
+	},
+	resizeHandler: new WindowResizeHandler(),
+	banner: Banner,
+	fallbackBanner: FallbackBanner,
+	minWidthForMainBanner: 800,
+	impressionCount
+} );
+
+app.use( TranslationPlugin, translator );
+app.use( DynamicTextPlugin, {
+	campaignParameters: page.getCampaignParameters(),
+	date,
+	formatters: localeFactory.getFormatters(),
+	impressionCount,
+	translator
+} );
+
+const currencyFormatter = localeFactory.getCurrencyFormatter();
+
+app.provide( 'currencyFormatter', currencyFormatter );
+app.provide( 'formItems', createFormItems( translator, currencyFormatter.euroAmount.bind( currencyFormatter ) ) );
+app.provide( 'formActions', createFormActions( page.getTracking(), impressionCount, { afo: '1', ap: '0' } ) );
+app.provide( 'tracker', tracker );
+app.provide( 'timer', new WindowTimer() );
+app.provide( 'currentCampaignTimePercentage', currentCampaignTimePercentage( new Date(), page.getCampaignParameters() ) );
+
+app.mount( page.getBannerContainer() );
diff --git a/banners/desktop/C24_WMDE_Desktop_DE_23/banner_var.ts b/banners/desktop/C24_WMDE_Desktop_DE_23/banner_var.ts
new file mode 100644
index 000000000..dd8c20eaa
--- /dev/null
+++ b/banners/desktop/C24_WMDE_Desktop_DE_23/banner_var.ts
@@ -0,0 +1,75 @@
+import { createVueApp } from '@src/createVueApp';
+
+import './styles/styles_var.scss';
+
+import BannerConductor from '@src/components/BannerConductor/FallbackBannerConductor.vue';
+import Banner from './components/BannerVar.vue';
+import FallbackBanner from './components/FallbackBanner.vue';
+import { UrlRuntimeEnvironment } from '@src/utils/RuntimeEnvironment';
+import { WindowResizeHandler } from '@src/utils/ResizeHandler';
+import PageWPORG from '@src/page/PageWPORG';
+import { WindowMediaWiki } from '@src/page/MediaWiki/WindowMediaWiki';
+import { SkinFactory } from '@src/page/skin/SkinFactory';
+import { WindowSizeIssueChecker } from '@src/utils/SizeIssueChecker/WindowSizeIssueChecker';
+import TranslationPlugin from '@src/TranslationPlugin';
+import { Translator } from '@src/Translator';
+import DynamicTextPlugin from '@src/DynamicTextPlugin';
+import { LocalImpressionCount } from '@src/utils/LocalImpressionCount';
+import { LegacyTrackerWPORG } from '@src/tracking/LegacyTrackerWPORG';
+import eventMappings from './event_map';
+import { createFallbackDonationURL } from '@src/createFallbackDonationURL';
+import { LocalStorageCloseTracker } from '@src/utils/LocalCloseTracker';
+import messages from './messages';
+import { LocaleFactoryDe } from '@src/utils/LocaleFactory/LocaleFactoryDe';
+import { createFormItems } from './form_items';
+import { createFormActions } from '@src/createFormActions';
+import { WindowTimer } from '@src/utils/Timer';
+import { currentCampaignTimePercentage } from '@src/components/ProgressBar/currentCampaignTimePercentage';
+
+const date = new Date();
+const localeFactory = new LocaleFactoryDe();
+const translator = new Translator( messages );
+const mediaWiki = new WindowMediaWiki();
+const page = new PageWPORG( mediaWiki, ( new SkinFactory( mediaWiki ) ).getSkin(), new WindowSizeIssueChecker( 400 ) );
+const runtimeEnvironment = new UrlRuntimeEnvironment( window.location );
+const impressionCount = new LocalImpressionCount( page.getTracking().keyword, runtimeEnvironment );
+const tracker = new LegacyTrackerWPORG( mediaWiki, page.getTracking().keyword, eventMappings, runtimeEnvironment );
+
+const app = createVueApp( BannerConductor, {
+	page,
+	bannerConfig: {
+		delay: runtimeEnvironment.getBannerDelay( 7500 ),
+		transitionDuration: 1000
+	},
+	bannerProps: {
+		useOfFundsContent: localeFactory.getUseOfFundsLoader().getContent(),
+		remainingImpressions: impressionCount.getRemainingImpressions( page.getMaxBannerImpressions( 'desktop' ) ),
+		localCloseTracker: new LocalStorageCloseTracker(),
+		donationLink: createFallbackDonationURL( page.getTracking(), impressionCount )
+	},
+	resizeHandler: new WindowResizeHandler(),
+	banner: Banner,
+	fallbackBanner: FallbackBanner,
+	minWidthForMainBanner: 800,
+	impressionCount
+} );
+
+app.use( TranslationPlugin, translator );
+app.use( DynamicTextPlugin, {
+	campaignParameters: page.getCampaignParameters(),
+	date,
+	formatters: localeFactory.getFormatters(),
+	impressionCount,
+	translator
+} );
+
+const currencyFormatter = localeFactory.getCurrencyFormatter();
+
+app.provide( 'currencyFormatter', currencyFormatter );
+app.provide( 'formItems', createFormItems( translator, currencyFormatter.euroAmount.bind( currencyFormatter ) ) );
+app.provide( 'formActions', createFormActions( page.getTracking(), impressionCount, { afo: '1', ap: '0' } ) );
+app.provide( 'tracker', tracker );
+app.provide( 'timer', new WindowTimer() );
+app.provide( 'currentCampaignTimePercentage', currentCampaignTimePercentage( new Date(), page.getCampaignParameters() ) );
+
+app.mount( page.getBannerContainer() );
diff --git a/banners/desktop/C24_WMDE_Desktop_DE_23/components/BannerCtrl.vue b/banners/desktop/C24_WMDE_Desktop_DE_23/components/BannerCtrl.vue
new file mode 100644
index 000000000..e1cae3382
--- /dev/null
+++ b/banners/desktop/C24_WMDE_Desktop_DE_23/components/BannerCtrl.vue
@@ -0,0 +1,180 @@
+<template>
+	<div class="wmde-banner-wrapper" :class="contentState">
+		<MainBanner
+			@form-interaction="$emit( 'bannerContentChanged' )"
+			v-if="contentState === ContentStates.Main"
+			:bannerState="bannerState"
+		>
+			<template #close-button>
+				<ButtonClose @close="onCloseMain"/>
+			</template>
+
+			<template #banner-title>
+				<BannerTitle/>
+			</template>
+
+			<template #banner-text>
+				<BannerText/>
+			</template>
+
+			<template #banner-slides="{ play }: any">
+				<KeenSlider :with-navigation="true" :play="play" :interval="10000" :delay="2000" :navigation-color="'#ffffff'">
+
+					<template #slides="{ currentSlide }: any">
+						<BannerSlides :currentSlide="currentSlide"/>
+					</template>
+
+				</KeenSlider>
+			</template>
+
+			<template #progress>
+				<DoubleProgressBar/>
+			</template>
+
+			<template #donation-form="{ formInteraction }: any">
+				<MultiStepDonation
+					:step-controllers="stepControllers"
+					@form-interaction="formInteraction"
+					:submit-callback="onSubmit"
+				>
+
+					<template #[FormStepNames.MainDonationFormStep]="{ pageIndex, submit, isCurrent, previous }: any">
+						<MainDonationForm :page-index="pageIndex" @submit="submit" :is-current="isCurrent" @previous="previous"/>
+					</template>
+
+					<template #[FormStepNames.UpgradeToYearlyFormStep]="{ pageIndex, submit, isCurrent, previous }: any">
+						<UpgradeToYearlyButtonForm :page-index="pageIndex" :show-manual-upgrade-option="false" @submit="submit" :is-current="isCurrent" @previous="previous"/>
+					</template>
+
+				</MultiStepDonation>
+			</template>
+
+			<template #footer>
+				<FooterAlreadyDonated
+					@showFundsModal="onModalOpened"
+					@clickedAlreadyDonatedLink="onClose( 'AlreadyDonated', CloseChoices.AlreadyDonated )"
+				/>
+			</template>
+
+		</MainBanner>
+
+		<SoftClose
+			v-if="contentState === ContentStates.SoftClosing"
+			:show-close-icon="true"
+			@close="() => onClose( 'SoftClose', CloseChoices.Close )"
+			@maybeLater="() => onClose( 'SoftClose', CloseChoices.MaybeLater )"
+			@timeOutClose="() => onClose( 'SoftClose', CloseChoices.TimeOut )"
+			@maybeLater7Days="() => onClose('SoftClose', CloseChoices.Close)"
+		/>
+
+		<FundsModal
+			:content="useOfFundsContent"
+			:is-funds-modal-visible="isFundsModalVisible"
+			@hideFundsModal="onHideFundsModal"
+		>
+			<template #infographic>
+				<WMDEFundsForwardingDE/>
+			</template>
+		</FundsModal>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
+import { inject, ref, watch } from 'vue';
+import { UseOfFundsContent as useOfFundsContentInterface } from '@src/domain/UseOfFunds/UseOfFundsContent';
+import MainBanner from './MainBanner.vue';
+import FundsModal from '@src/components/UseOfFunds/FundsModal.vue';
+import BannerText from '../content/BannerText.vue';
+import BannerSlides from '../content/BannerSlides.vue';
+import MultiStepDonation from '@src/components/DonationForm/MultiStepDonation.vue';
+import MainDonationForm from '@src/components/DonationForm/Forms/MainDonationForm.vue';
+import UpgradeToYearlyButtonForm from '@src/components/DonationForm/Forms/UpgradeToYearlyButtonForm.vue';
+import KeenSlider from '@src/components/Slider/KeenSlider.vue';
+import { useFormModel } from '@src/components/composables/useFormModel';
+import {
+	createSubmittableMainDonationForm
+} from '@src/components/DonationForm/StepControllers/SubmittableMainDonationForm';
+import {
+	createSubmittableUpgradeToYearly
+} from '@src/components/DonationForm/StepControllers/SubmittableUpgradeToYearly';
+import { CloseChoices } from '@src/domain/CloseChoices';
+import { CloseEvent } from '@src/tracking/events/CloseEvent';
+import { TrackingFeatureName } from '@src/tracking/TrackingEvent';
+import ButtonClose from '@src/components/ButtonClose/ButtonClose.vue';
+import FooterAlreadyDonated from '@src/components/Footer/FooterAlreadyDonated.vue';
+import WMDEFundsForwardingDE from '@src/components/UseOfFunds/Infographics/WMDEFundsForwardingDE.vue';
+import DoubleProgressBar from '@src/components/ProgressBar/DoubleProgressBar.vue';
+import SoftClose from '@src/components/SoftClose/SoftClose.vue';
+import { LocalCloseTracker } from '@src/utils/LocalCloseTracker';
+import { BannerSubmitOnReturnEvent } from '@src/tracking/events/BannerSubmitOnReturnEvent';
+import { Tracker } from '@src/tracking/Tracker';
+import { useBannerHider } from '@src/components/composables/useBannerHider';
+import BannerTitle from '@banners/desktop/C24_WMDE_Desktop_DE_15/content/BannerTitle.vue';
+
+enum ContentStates {
+	Main = 'wmde-banner-wrapper--main',
+	SoftClosing = 'wmde-banner-wrapper--soft-closing',
+}
+
+enum FormStepNames {
+	MainDonationFormStep = 'MainDonationForm',
+	UpgradeToYearlyFormStep = 'UpgradeToYearlyForm'
+}
+
+interface Props {
+	bannerState: BannerStates;
+	useOfFundsContent: useOfFundsContentInterface;
+	remainingImpressions: number;
+	localCloseTracker: LocalCloseTracker;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits( [ 'bannerClosed', 'bannerContentChanged', 'modalOpened', 'modalClosed' ] );
+useBannerHider( 800, emit );
+
+const tracker = inject<Tracker>( 'tracker' );
+
+const isFundsModalVisible = ref<boolean>( false );
+const contentState = ref<ContentStates>( ContentStates.Main );
+const formModel = useFormModel();
+const stepControllers = [
+	createSubmittableMainDonationForm( formModel, FormStepNames.UpgradeToYearlyFormStep ),
+	createSubmittableUpgradeToYearly( formModel, FormStepNames.MainDonationFormStep, FormStepNames.MainDonationFormStep )
+];
+
+watch( contentState, async () => {
+	emit( 'bannerContentChanged' );
+} );
+
+const onSubmit = (): void => {
+	// special callback function: asking for previous close choices
+	const closeChoice = props.localCloseTracker.getItem();
+	if ( closeChoice !== '' ) {
+		tracker.trackEvent( new BannerSubmitOnReturnEvent( closeChoice ) );
+	}
+};
+
+function onCloseMain(): void {
+	if ( props.remainingImpressions > 0 ) {
+		contentState.value = ContentStates.SoftClosing;
+	} else {
+		onClose( 'MainBanner', CloseChoices.Close );
+	}
+}
+
+function onClose( feature: TrackingFeatureName, userChoice: CloseChoices ): void {
+	emit( 'bannerClosed', new CloseEvent( feature, userChoice ) );
+}
+
+function onHideFundsModal(): void {
+	isFundsModalVisible.value = false;
+	emit( 'modalClosed' );
+}
+
+function onModalOpened(): void {
+	isFundsModalVisible.value = true;
+	emit( 'modalOpened' );
+}
+
+</script>
diff --git a/banners/desktop/C24_WMDE_Desktop_DE_23/components/BannerVar.vue b/banners/desktop/C24_WMDE_Desktop_DE_23/components/BannerVar.vue
new file mode 100644
index 000000000..d149c6562
--- /dev/null
+++ b/banners/desktop/C24_WMDE_Desktop_DE_23/components/BannerVar.vue
@@ -0,0 +1,187 @@
+<template>
+	<div class="wmde-banner-wrapper" :class="contentState">
+		<MainBanner
+			@form-interaction="$emit( 'bannerContentChanged' )"
+			v-if="contentState === ContentStates.Main"
+			:bannerState="bannerState"
+		>
+			<template #close-button>
+				<ButtonClose @close="onCloseMain"/>
+			</template>
+
+			<template #banner-title>
+				<BannerTitle/>
+			</template>
+
+			<template #banner-text>
+				<BannerText/>
+			</template>
+
+			<template #banner-slides="{ play }: any">
+				<KeenSlider :with-navigation="true" :play="play" :interval="10000" :delay="2000" :navigation-color="'#ffffff'">
+
+					<template #slides="{ currentSlide }: any">
+						<BannerSlides :currentSlide="currentSlide"/>
+					</template>
+
+				</KeenSlider>
+			</template>
+
+			<template #progress>
+				<DoubleProgressBar/>
+			</template>
+
+			<template #donation-form="{ formInteraction }: any">
+				<MultiStepDonation
+					:step-controllers="stepControllers"
+					:submit-callback="onSubmit"
+					:form-action-override="formAction"
+					@form-interaction="formInteraction"
+				>
+
+					<template #[FormStepNames.MainDonationFormStep]="{ pageIndex, submit, isCurrent, previous }: any">
+						<MainDonationForm :page-index="pageIndex" @submit="submit" :is-current="isCurrent" :show-receipt-checkbox-below="minimumAmount" @previous="previous"/>
+					</template>
+
+					<template #[FormStepNames.UpgradeToYearlyFormStep]="{ pageIndex, submit, isCurrent, previous }: any">
+						<UpgradeToYearlyButtonForm :page-index="pageIndex" :show-manual-upgrade-option="false" @submit="submit" :is-current="isCurrent" @previous="previous"/>
+					</template>
+
+				</MultiStepDonation>
+			</template>
+
+			<template #footer>
+				<FooterAlreadyDonated
+					@showFundsModal="onModalOpened"
+					@clickedAlreadyDonatedLink="onClose( 'AlreadyDonated', CloseChoices.AlreadyDonated )"
+				/>
+			</template>
+
+		</MainBanner>
+
+		<SoftClose
+			v-if="contentState === ContentStates.SoftClosing"
+			:show-close-icon="true"
+			@close="() => onClose( 'SoftClose', CloseChoices.Close )"
+			@maybeLater="() => onClose( 'SoftClose', CloseChoices.MaybeLater )"
+			@timeOutClose="() => onClose( 'SoftClose', CloseChoices.TimeOut )"
+			@maybeLater7Days="() => onClose('SoftClose', CloseChoices.Close)"
+		/>
+
+		<FundsModal
+			:content="useOfFundsContent"
+			:is-funds-modal-visible="isFundsModalVisible"
+			@hideFundsModal="onHideFundsModal"
+		>
+			<template #infographic>
+				<WMDEFundsForwardingDE/>
+			</template>
+		</FundsModal>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
+import { inject, ref, watch } from 'vue';
+import { UseOfFundsContent as useOfFundsContentInterface } from '@src/domain/UseOfFunds/UseOfFundsContent';
+import MainBanner from './MainBanner.vue';
+import FundsModal from '@src/components/UseOfFunds/FundsModal.vue';
+import BannerText from '../content/BannerText.vue';
+import BannerSlides from '../content/BannerSlides.vue';
+import MultiStepDonation from '@src/components/DonationForm/MultiStepDonation.vue';
+import MainDonationForm from './MainDonationFormReceiptAboveValue.vue';
+import UpgradeToYearlyButtonForm from '@src/components/DonationForm/Forms/UpgradeToYearlyButtonForm.vue';
+import KeenSlider from '@src/components/Slider/KeenSlider.vue';
+import { useFormModel } from '@src/components/composables/useFormModel';
+import {
+	createSubmittableMainDonationForm
+} from '@src/components/DonationForm/StepControllers/SubmittableMainDonationForm';
+import {
+	createSubmittableUpgradeToYearly
+} from '@src/components/DonationForm/StepControllers/SubmittableUpgradeToYearly';
+import { CloseChoices } from '@src/domain/CloseChoices';
+import { CloseEvent } from '@src/tracking/events/CloseEvent';
+import { TrackingFeatureName } from '@src/tracking/TrackingEvent';
+import ButtonClose from '@src/components/ButtonClose/ButtonClose.vue';
+import FooterAlreadyDonated from '@src/components/Footer/FooterAlreadyDonated.vue';
+import WMDEFundsForwardingDE from '@src/components/UseOfFunds/Infographics/WMDEFundsForwardingDE.vue';
+import DoubleProgressBar from '@src/components/ProgressBar/DoubleProgressBar.vue';
+import SoftClose from '@src/components/SoftClose/SoftClose.vue';
+import { LocalCloseTracker } from '@src/utils/LocalCloseTracker';
+import { BannerSubmitOnReturnEvent } from '@src/tracking/events/BannerSubmitOnReturnEvent';
+import { Tracker } from '@src/tracking/Tracker';
+import { useBannerHider } from '@src/components/composables/useBannerHider';
+import BannerTitle from '@banners/desktop/C24_WMDE_Desktop_DE_15/content/BannerTitle.vue';
+import { useFormAction } from '../useFormAction';
+import { FormActions } from '@src/domain/FormActions';
+
+const minimumAmount = 10;
+
+enum ContentStates {
+	Main = 'wmde-banner-wrapper--main',
+	SoftClosing = 'wmde-banner-wrapper--soft-closing',
+}
+
+enum FormStepNames {
+	MainDonationFormStep = 'MainDonationForm',
+	UpgradeToYearlyFormStep = 'UpgradeToYearlyForm'
+}
+
+interface Props {
+	bannerState: BannerStates;
+	useOfFundsContent: useOfFundsContentInterface;
+	remainingImpressions: number;
+	localCloseTracker: LocalCloseTracker;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits( [ 'bannerClosed', 'bannerContentChanged', 'modalOpened', 'modalClosed' ] );
+useBannerHider( 800, emit );
+
+const tracker = inject<Tracker>( 'tracker' );
+
+const isFundsModalVisible = ref<boolean>( false );
+const contentState = ref<ContentStates>( ContentStates.Main );
+const formModel = useFormModel();
+const stepControllers = [
+	createSubmittableMainDonationForm( formModel, FormStepNames.UpgradeToYearlyFormStep ),
+	createSubmittableUpgradeToYearly( formModel, FormStepNames.MainDonationFormStep, FormStepNames.MainDonationFormStep )
+];
+
+const { formAction } = useFormAction( inject<FormActions>( 'formActions' ), minimumAmount );
+
+watch( contentState, async () => {
+	emit( 'bannerContentChanged' );
+} );
+
+const onSubmit = (): void => {
+	// special callback function: asking for previous close choices
+	const closeChoice = props.localCloseTracker.getItem();
+	if ( closeChoice !== '' ) {
+		tracker.trackEvent( new BannerSubmitOnReturnEvent( closeChoice ) );
+	}
+};
+
+function onCloseMain(): void {
+	if ( props.remainingImpressions > 0 ) {
+		contentState.value = ContentStates.SoftClosing;
+	} else {
+		onClose( 'MainBanner', CloseChoices.Close );
+	}
+}
+
+function onClose( feature: TrackingFeatureName, userChoice: CloseChoices ): void {
+	emit( 'bannerClosed', new CloseEvent( feature, userChoice ) );
+}
+
+function onHideFundsModal(): void {
+	isFundsModalVisible.value = false;
+	emit( 'modalClosed' );
+}
+
+function onModalOpened(): void {
+	isFundsModalVisible.value = true;
+	emit( 'modalOpened' );
+}
+
+</script>
diff --git a/banners/desktop/C24_WMDE_Desktop_DE_23/components/FallbackBanner.vue b/banners/desktop/C24_WMDE_Desktop_DE_23/components/FallbackBanner.vue
new file mode 100644
index 000000000..43e0fdc0c
--- /dev/null
+++ b/banners/desktop/C24_WMDE_Desktop_DE_23/components/FallbackBanner.vue
@@ -0,0 +1,108 @@
+<template>
+	<div class="wmde-banner-fallback">
+		<ButtonClose @close="onClose"/>
+
+		<div class="wmde-banner-fallback-small" v-if="!onLargeScreen">
+			<KeenSlider
+				:with-pagination="false"
+				:play="slideshowShouldPlay"
+				:interval="10000"
+				:delay="2000"
+				@slideChanged="onSlideChange"
+			>
+				<template #slides="{ currentSlide }: any">
+					<FallbackSlides :current-slide="currentSlide"/>
+				</template>
+
+				<template #left-icon>
+					<ChevronLeftIcon :fill="'#990a00'"/>
+				</template>
+
+				<template #right-icon>
+					<ChevronRightIcon :fill="'#990a00'"/>
+				</template>
+			</KeenSlider>
+
+			<FallbackButton @buttonClicked="onSubmit"/>
+
+			<SmallFooter :slide-index="slideIndex" :slide-count="slideCount" @useOfFundsButtonClicked="isFundsModalVisible = true"/>
+		</div>
+
+		<div class="wmde-banner-fallback-large" v-if="onLargeScreen">
+			<div class="wmde-banner-fallback-message">
+				<FallbackText/>
+				<DoubleProgressBar/>
+			</div>
+
+			<LargeFooter @useOfFundsButtonClicked="isFundsModalVisible = true" @submitButtonClicked="onSubmit"/>
+		</div>
+
+		<FundsModal
+			:content="useOfFundsContent"
+			:is-funds-modal-visible="isFundsModalVisible"
+			@hideFundsModal="isFundsModalVisible = false"
+		>
+			<template #infographic>
+				<WMDEFundsForwardingDE/>
+			</template>
+		</FundsModal>
+
+	</div>
+</template>
+
+<script setup lang="ts">
+
+import ButtonClose from '@src/components/ButtonClose/ButtonClose.vue';
+import { CloseChoices } from '@src/domain/CloseChoices';
+import { CloseEvent } from '@src/tracking/events/CloseEvent';
+import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
+import { UseOfFundsContent as useOfFundsContentInterface } from '@src/domain/UseOfFunds/UseOfFundsContent';
+import { computed, inject, ref } from 'vue';
+import { useDisplaySwitch } from '@src/components/composables/useDisplaySwitch';
+import KeenSlider from '@src/components/Slider/KeenSlider.vue';
+import FallbackSlides from '../content/FallbackSlides.vue';
+import ChevronLeftIcon from '@src/components/Icons/ChevronLeftIcon.vue';
+import ChevronRightIcon from '@src/components/Icons/ChevronRightIcon.vue';
+import FundsModal from '@src/components/UseOfFunds/FundsModal.vue';
+import FallbackText from '../content/FallbackText.vue';
+import FallbackButton from '@src/components/FallbackBanner/FallbackButton.vue';
+import SmallFooter from '@src/components/FallbackBanner/SmallFooter.vue';
+import LargeFooter from '@src/components/FallbackBanner/LargeFooter.vue';
+import { Tracker } from '@src/tracking/Tracker';
+import { FallbackBannerSubmitEvent } from '@src/tracking/events/FallbackBannerSubmitEvent';
+import WMDEFundsForwardingDE from '@src/components/UseOfFunds/Infographics/WMDEFundsForwardingDE.vue';
+import DoubleProgressBar from '@src/components/ProgressBar/DoubleProgressBar.vue';
+
+interface Props {
+	bannerState: BannerStates;
+	useOfFundsContent: useOfFundsContentInterface;
+	donationLink: string;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits( [ 'bannerClosed' ] );
+
+const tracker = inject<Tracker>( 'tracker' );
+const slideIndex = ref<number>( 0 );
+const slideCount = ref<number>( 0 );
+const slideShowStopped = ref<boolean>( false );
+const slideshowShouldPlay = computed( () => props.bannerState === BannerStates.Visible && !slideShowStopped.value );
+const isFundsModalVisible = ref<boolean>( false );
+
+const onLargeScreen = useDisplaySwitch( 799 );
+
+function onClose(): void {
+	emit( 'bannerClosed', new CloseEvent( 'FallbackBanner', CloseChoices.Close ) );
+}
+
+function onSlideChange( newIndex: number, newSlideCount: number ): void {
+	slideIndex.value = newIndex;
+	slideCount.value = newSlideCount;
+}
+
+function onSubmit(): void {
+	tracker.trackEvent( new FallbackBannerSubmitEvent() );
+	window.location.href = props.donationLink;
+}
+
+</script>
diff --git a/banners/desktop/C24_WMDE_Desktop_DE_23/components/MainBanner.vue b/banners/desktop/C24_WMDE_Desktop_DE_23/components/MainBanner.vue
new file mode 100644
index 000000000..20c886d6c
--- /dev/null
+++ b/banners/desktop/C24_WMDE_Desktop_DE_23/components/MainBanner.vue
@@ -0,0 +1,47 @@
+tart<template>
+	<div class="wmde-banner-main">
+		<slot name="close-button"/>
+		<div class="wmde-banner-content">
+			<div class="wmde-banner-column-left">
+				<div class="wmde-banner-message-container">
+					<slot name="banner-title"/>
+					<slot name="banner-text" v-if="onLargeScreen"/>
+					<slot name="banner-slides" v-else :play="slideshowShouldPlay"/>
+				</div>
+				<slot name="progress"/>
+			</div>
+			<div class="wmde-banner-column-right">
+				<slot name="donation-form" :form-interaction="onFormInteraction"/>
+			</div>
+		</div>
+		<slot name="footer"/>
+	</div>
+</template>
+
+<script setup lang="ts">
+
+import { useDisplaySwitch } from '@src/components/composables/useDisplaySwitch';
+import { computed, nextTick, ref } from 'vue';
+import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
+
+interface Props {
+	bannerState: BannerStates;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits( [ 'formInteraction' ] );
+
+const slideShowStopped = ref<boolean>( false );
+const slideshowShouldPlay = computed( () => props.bannerState === BannerStates.Visible && !slideShowStopped.value );
+
+const onLargeScreen = useDisplaySwitch( 1300 );
+
+const onFormInteraction = (): void => {
+	slideShowStopped.value = true;
+
+	nextTick( () => {
+		emit( 'formInteraction' );
+	} );
+};
+
+</script>
diff --git a/banners/desktop/C24_WMDE_Desktop_DE_23/components/MainDonationFormPaymentsAndReceiptButton.vue b/banners/desktop/C24_WMDE_Desktop_DE_23/components/MainDonationFormPaymentsAndReceiptButton.vue
new file mode 100644
index 000000000..aa8637bc8
--- /dev/null
+++ b/banners/desktop/C24_WMDE_Desktop_DE_23/components/MainDonationFormPaymentsAndReceiptButton.vue
@@ -0,0 +1,37 @@
+<template>
+	<button class="wmde-banner-form-button t-submit-main-donation" type="submit">
+		{{ submitButtonLabel }}
+	</button>
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+import { PaymentMethods } from '@src/utils/FormItemsBuilder/fields/PaymentMethods';
+import { useFormModel } from '@src/components/composables/useFormModel';
+import { Translator } from '@src/Translator';
+import { AddressTypes } from '@src/utils/FormItemsBuilder/fields/AddressTypes';
+
+interface Props {
+	paymentLabelsBelow: number;
+}
+const props = defineProps<Props>();
+
+const formModel = useFormModel();
+const translator = inject<Translator>( 'translator' );
+const { paymentMethod, addressType, receipt, numericAmount } = formModel;
+
+const submitButtonLabel = computed( (): string => {
+	if ( numericAmount.value < props.paymentLabelsBelow && !receipt.value && [ AddressTypes.ANONYMOUS.value, '' ].includes( addressType.value ) ) {
+		if ( paymentMethod.value === PaymentMethods.PAYPAL.value ) {
+			return translator.translate( 'submit-label-paypal' );
+		} else if ( paymentMethod.value === PaymentMethods.CREDIT_CARD.value ) {
+			return translator.translate( 'submit-label-credit-card' );
+		} else if ( paymentMethod.value === PaymentMethods.SOFORT.value ) {
+			return translator.translate( 'submit-label-sofort' );
+		} else if ( paymentMethod.value === PaymentMethods.BANK_TRANSFER.value ) {
+			return translator.translate( 'submit-label-bank-transfer' );
+		}
+	}
+	return translator.translate( 'submit-label' );
+} );
+</script>
diff --git a/banners/desktop/C24_WMDE_Desktop_DE_23/components/MainDonationFormReceiptAboveValue.vue b/banners/desktop/C24_WMDE_Desktop_DE_23/components/MainDonationFormReceiptAboveValue.vue
new file mode 100644
index 000000000..3a12f7580
--- /dev/null
+++ b/banners/desktop/C24_WMDE_Desktop_DE_23/components/MainDonationFormReceiptAboveValue.vue
@@ -0,0 +1,172 @@
+<template>
+	<form
+		method="post"
+		class="wmde-banner-sub-form wmde-banner-sub-form-donation"
+		@submit.prevent="validate"
+	>
+		<fieldset class="wmde-banner-form-field-group">
+			<legend class="wmde-banner-form-field-group-legend">{{ $translate( 'intervals-header' ) }}</legend>
+			<SelectGroup
+				:field-name="'select-interval'"
+				:selectionItems="formItems.intervals"
+				:isValid="isValidOrUnset( intervalValidity )"
+				:errorMessage="$translate( 'no-interval-message' )"
+				v-model:inputValue="interval"
+				:disabledOptions="disabledIntervals"
+			/>
+		</fieldset>
+
+		<fieldset class="wmde-banner-form-field-group">
+			<legend class="wmde-banner-form-field-group-legend">{{ $translate( 'amounts-header' ) }}</legend>
+			<SelectGroup
+				fieldName="select-amount"
+				:selectionItems="formItems.amounts"
+				:isValid="isValidOrUnset( amountValidity )"
+				:errorMessage="$translate( amountValidityMessageKey( amountValidity ) )"
+				v-model:inputValue="selectedAmount"
+			>
+				<SelectCustomAmount
+					fieldName="select-amount"
+					v-model:inputValue="customAmount"
+					@focus="clearSelectedAmount"
+					@blur="formatCustomAmount"
+					:placeholder="$translate( customAmountPlaceholderKey )"
+				/>
+			</SelectGroup>
+		</fieldset>
+
+		<fieldset class="wmde-banner-form-field-group">
+			<legend class="wmde-banner-form-field-group-legend">{{ $translate( 'payments-header' ) }}</legend>
+			<SelectGroup
+				:field-name="'select-payment-method'"
+				:selectionItems="formItems.paymentMethods"
+				:isValid="isValidOrUnset( paymentMethodValidity )"
+				:errorMessage="$translate( 'no-payment-type-message' )"
+				v-model:inputValue="paymentMethod"
+				:disabledOptions="disabledPaymentMethods"
+			>
+				<template #select-group-label="{ label, slotName }: any">
+					<slot :name="'label-' + slotName" :label="label"/>
+				</template>
+				<SmsBox>
+					<template #sms-icon>
+						<slot name="sms-icon"/>
+					</template>
+				</SmsBox>
+			</SelectGroup>
+		</fieldset>
+
+		<div class="wmde-banner-form-donation-receipt-checkbox" v-if="showReceiptCheckbox">
+			<input
+				class="wmde-banner-form-field-checkbox"
+				type="checkbox"
+				value="person"
+				id="wmde-banner-form-donation-receipt"
+				v-model="receipt"
+			>
+			<label for="wmde-banner-form-donation-receipt">
+				{{ $translate( 'donation-receipt-checkbox-label' ) }}
+			</label>
+		</div>
+
+		<div class="wmde-banner-form-button-container">
+			<slot name="button">
+				<MainDonationFormButtonMultiStep :payment-labels-below="showReceiptCheckboxBelow"/>
+			</slot>
+			<button v-if="!isFormValid && showErrorScrollLink" class="wmde-banner-form-button-error">
+				{{ $translate( 'global-error' ) }}
+			</button>
+		</div>
+	</form>
+</template>
+
+<script lang="ts">
+// All form components must have names
+export default {
+	name: 'MainDonationFormDonationReceipt'
+};
+</script>
+<script setup lang="ts">
+
+import { computed, inject, onMounted, ref, watch } from 'vue';
+import SelectGroup from '@src/components/DonationForm/SubComponents/SelectGroup.vue';
+import { DonationFormItems } from '@src/utils/FormItemsBuilder/DonationFormItems';
+import SelectCustomAmount from '@src/components/DonationForm/SubComponents/SelectCustomAmount.vue';
+import SmsBox from '@src/components/DonationForm/SubComponents/SmsBox.vue';
+import { useFormModel } from '@src/components/composables/useFormModel';
+import { newDonationFormValidator } from '@src/validation/DonationFormValidator';
+import { amountValidityMessageKey } from '@src/utils/amountValidityMessageKey';
+import { isValidOrUnset } from '@src/components/DonationForm/Forms/isValidOrUnset';
+import { Currency } from '@src/utils/DynamicContent/formatters/Currency';
+import MainDonationFormButtonMultiStep from './MainDonationFormPaymentsAndReceiptButton.vue';
+import { AddressTypes } from '@src/utils/FormItemsBuilder/fields/AddressTypes';
+import { PaymentMethods } from '@src/utils/FormItemsBuilder/fields/PaymentMethods';
+
+interface Props {
+	showReceiptCheckboxBelow: number;
+	showErrorScrollLink?: boolean;
+	customAmountPlaceholderKey?: string;
+}
+
+const props = withDefaults( defineProps<Props>(), {
+	showErrorScrollLink: false,
+	customAmountPlaceholderKey: 'custom-amount-placeholder'
+} );
+const emit = defineEmits( [ 'submit' ] );
+
+const currencyFormatter = inject<Currency>( 'currencyFormatter' );
+const formItems = inject<DonationFormItems>( 'formItems' );
+const formModel = useFormModel();
+const validator = newDonationFormValidator( formModel );
+const showReceiptCheckbox = computed<boolean>( () => {
+	if ( interval.value === '' ) {
+		return false;
+	}
+	if ( paymentMethod.value === '' || paymentMethod.value === PaymentMethods.DIRECT_DEBIT.value ) {
+		return false;
+	}
+
+	if ( numericAmount.value >= props.showReceiptCheckboxBelow ) {
+		return false;
+	}
+
+	return true;
+} );
+const isFormValid = ref<boolean>( true );
+
+const validate = (): void => {
+	isFormValid.value = validator.validate();
+
+	if ( isFormValid.value ) {
+		emit( 'submit' );
+	}
+};
+
+const {
+	interval, intervalValidity, disabledIntervals,
+	selectedAmount, customAmount, numericAmount, amountValidity,
+	paymentMethod, paymentMethodValidity, disabledPaymentMethods,
+	addressType, receipt
+} = formModel;
+
+const clearSelectedAmount = (): void => {
+	selectedAmount.value = '';
+};
+
+const formatCustomAmount = (): void => {
+	if ( customAmount.value !== '' ) {
+		customAmount.value = currencyFormatter.customAmountInput( numericAmount.value );
+	}
+};
+
+watch( [ interval, paymentMethod, numericAmount ], () => {
+	if ( !showReceiptCheckbox.value ) {
+		receipt.value = false;
+	}
+} );
+
+onMounted( () => {
+	addressType.value = AddressTypes.ANONYMOUS.value;
+} );
+
+</script>
diff --git a/banners/desktop/C24_WMDE_Desktop_DE_23/content/BannerSlides.vue b/banners/desktop/C24_WMDE_Desktop_DE_23/content/BannerSlides.vue
new file mode 100644
index 000000000..991443c11
--- /dev/null
+++ b/banners/desktop/C24_WMDE_Desktop_DE_23/content/BannerSlides.vue
@@ -0,0 +1,48 @@
+<template>
+	<KeenSliderSlide :is-current="currentSlide === 0">
+		<p>
+			Vielleicht kommen wir gerade ungelegen, aber dennoch: Klicken Sie jetzt bitte nicht weg! Am heutigen
+			{{ currentDayName }}, den {{ currentDate }}, bitten wir Sie, die Unabhängigkeit von Wikipedia zu unterstützen.
+		</p>
+	</KeenSliderSlide>
+	<KeenSliderSlide :is-current="currentSlide === 1">
+		<p>
+			{{campaignDaySentence}}
+			<AnimatedText :content="visitorsVsDonorsSentence"/>
+			Die meisten Menschen spenden, weil sie Wikipedia nützlich finden.
+		</p>
+	</KeenSliderSlide>
+	<KeenSliderSlide :is-current="currentSlide === 2">
+		<p>
+			Die durchschnittliche Spende beträgt {{ averageDonation }}, doch bereits 5&nbsp;€ helfen uns weiter. Hat Wikipedia
+			Ihnen in diesem Jahr Wissen im Wert einer Tasse Kaffee geschenkt?
+		</p>
+	</KeenSliderSlide>
+	<KeenSliderSlide :is-current="currentSlide === 3">
+		<p>
+			Dann entscheiden Sie sich, eine der seltenen Ausnahmen zu sein, und geben Sie etwas zurück. Vielen Dank!
+		</p>
+	</KeenSliderSlide>
+</template>
+
+<script setup lang="ts">
+import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
+import { inject } from 'vue';
+import KeenSliderSlide from '@src/components/Slider/KeenSliderSlide.vue';
+import AnimatedText from '@src/components/AnimatedText/AnimatedText.vue';
+
+interface Props {
+	currentSlide: number
+}
+
+defineProps<Props>();
+
+const {
+	currentDayName,
+	currentDate,
+	campaignDaySentence,
+	visitorsVsDonorsSentence,
+	averageDonation
+} = inject<DynamicContent>( 'dynamicCampaignText' );
+
+</script>
diff --git a/banners/desktop/C24_WMDE_Desktop_DE_23/content/BannerText.vue b/banners/desktop/C24_WMDE_Desktop_DE_23/content/BannerText.vue
new file mode 100644
index 000000000..e7280312f
--- /dev/null
+++ b/banners/desktop/C24_WMDE_Desktop_DE_23/content/BannerText.vue
@@ -0,0 +1,32 @@
+<template>
+	<div class="wmde-banner-message">
+		<div>
+			<p>
+				Vielleicht kommen wir gerade ungelegen, aber dennoch: Klicken Sie jetzt bitte nicht weg! Am heutigen
+				{{ currentDayName }}, den {{ currentDate }}, bitten wir Sie, die Unabhängigkeit von Wikipedia zu unterstützen.
+				{{campaignDaySentence}}
+				<AnimatedText :content="visitorsVsDonorsSentence"/>
+				Die meisten Menschen spenden, weil sie Wikipedia nützlich finden.
+				Die durchschnittliche Spende beträgt {{ averageDonation }}, doch bereits 5&nbsp;€ helfen uns weiter.
+				Hat Wikipedia Ihnen in diesem Jahr Wissen im Wert einer Tasse Kaffee geschenkt?
+				Dann entscheiden Sie sich, eine der seltenen Ausnahmen zu sein, und geben Sie etwas zurück.
+				Vielen Dank!
+			</p>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { inject } from 'vue';
+import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
+import AnimatedText from '@src/components/AnimatedText/AnimatedText.vue';
+
+const {
+	currentDayName,
+	currentDate,
+	campaignDaySentence,
+	visitorsVsDonorsSentence,
+	averageDonation
+} = inject<DynamicContent>( 'dynamicCampaignText' );
+
+</script>
diff --git a/banners/desktop/C24_WMDE_Desktop_DE_23/content/BannerTitle.vue b/banners/desktop/C24_WMDE_Desktop_DE_23/content/BannerTitle.vue
new file mode 100644
index 000000000..ff61ed34e
--- /dev/null
+++ b/banners/desktop/C24_WMDE_Desktop_DE_23/content/BannerTitle.vue
@@ -0,0 +1,19 @@
+<template>
+	<div class="wmde-banner-message-header">
+		<InfoIconItalic/> <h2>Wikipedia ist unverkäuflich</h2>
+		<p><strong>{{ liveDateAndTime.currentDate }}, {{ liveDateAndTime.currentTime }} - An alle, die Wikipedia in Deutschland nutzen</strong></p>
+	</div>
+</template>
+
+<script setup lang="ts">
+import InfoIconItalic from '@src/components/Icons/InfoIconItalic.vue';
+import { useLiveDateAndTime } from '@src/components/composables/useLiveDateAndTime';
+import { inject, onMounted, onUnmounted } from 'vue';
+import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
+
+const { getCurrentDateAndTime } = inject<DynamicContent>( 'dynamicCampaignText' );
+const { liveDateAndTime, startTimer, stopTimer } = useLiveDateAndTime( getCurrentDateAndTime );
+onMounted( startTimer );
+onUnmounted( stopTimer );
+
+</script>
diff --git a/banners/desktop/C24_WMDE_Desktop_DE_23/content/FallbackSlides.vue b/banners/desktop/C24_WMDE_Desktop_DE_23/content/FallbackSlides.vue
new file mode 100644
index 000000000..b5e4af29d
--- /dev/null
+++ b/banners/desktop/C24_WMDE_Desktop_DE_23/content/FallbackSlides.vue
@@ -0,0 +1,27 @@
+<template>
+	<KeenSliderSlide :is-current="currentSlide === 0">
+		<p>
+			Hat Wikipedia Ihnen Wissen im Wert einer Tasse Kaffee geschenkt?
+		</p>
+	</KeenSliderSlide>
+	<KeenSliderSlide :is-current="currentSlide === 1">
+		<p>
+			Dann entscheiden Sie sich, etwas zurückzugeben. Danke!
+		</p>
+	</KeenSliderSlide>
+	<KeenSliderSlide :is-current="currentSlide === 2">
+		<FallbackBank/>
+	</KeenSliderSlide>
+</template>
+
+<script setup lang="ts">
+import KeenSliderSlide from '@src/components/Slider/KeenSliderSlide.vue';
+import FallbackBank from '@src/components/FallbackBanner/FallbackBank.vue';
+
+interface Props {
+	currentSlide: number
+}
+
+defineProps<Props>();
+
+</script>
diff --git a/banners/desktop/C24_WMDE_Desktop_DE_23/content/FallbackText.vue b/banners/desktop/C24_WMDE_Desktop_DE_23/content/FallbackText.vue
new file mode 100644
index 000000000..f3622de30
--- /dev/null
+++ b/banners/desktop/C24_WMDE_Desktop_DE_23/content/FallbackText.vue
@@ -0,0 +1,25 @@
+<template>
+	<div class="wmde-banner-message">
+		<div>
+			<p>
+				<InfoIconItalic/> <strong>An alle, die Wikipedia in Deutschland nutzen</strong>
+			</p>
+			<p>
+				{{ campaignDaySentence }} Millionen Menschen nutzen Wikipedia, aber 99&nbsp;% spenden nicht – sie
+				übergehen diesen Aufruf. Wenn Wikipedia Ihnen in diesem Jahr Wissen im Wert einer Tasse Kaffee
+				geschenkt hat, dann geben Sie etwas zurück. Danke!
+			</p>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { inject } from 'vue';
+import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
+import InfoIconItalic from '@src/components/Icons/InfoIconItalic.vue';
+
+const {
+	campaignDaySentence
+}: DynamicContent = inject( 'dynamicCampaignText' );
+
+</script>
diff --git a/banners/desktop/C24_WMDE_Desktop_DE_23/event_map.ts b/banners/desktop/C24_WMDE_Desktop_DE_23/event_map.ts
new file mode 100644
index 000000000..88eb4714e
--- /dev/null
+++ b/banners/desktop/C24_WMDE_Desktop_DE_23/event_map.ts
@@ -0,0 +1,47 @@
+import { TrackingEventConverterFactory } from '@src/tracking/LegacyTrackerWPORG';
+import { WMDELegacyBannerEvent } from '@src/tracking/WPORG/WMDELegacyBannerEvent';
+import { WMDESizeIssueEvent } from '@src/tracking/WPORG/WMDEBannerSizeIssue';
+import { BannerSubmitEvent } from '@src/tracking/events/BannerSubmitEvent';
+import { FormStepShownEvent } from '@src/tracking/events/FormStepShownEvent';
+import { mapFormStepShownEvent } from '@src/tracking/LegacyEventTracking/mapFormStepShownEvent';
+import { CustomAmountChangedEvent } from '@src/tracking/events/CustomAmountChangedEvent';
+import { CloseEvent } from '@src/tracking/events/CloseEvent';
+import { mapCloseEvent } from '@src/tracking/LegacyEventTracking/mapCloseEvent';
+import { NotShownEvent } from '@src/tracking/events/NotShownEvent';
+import { mapNotShownEvent } from '@src/tracking/LegacyEventTracking/mapNotShownEvent';
+import { createViewportInfo } from '@src/tracking/LegacyEventTracking/createViewportInfo';
+import { AlreadyDonatedShownEvent } from '@src/tracking/events/AlreadyDonatedShownEvent';
+import { FallbackBannerSubmitEvent } from '@src/tracking/events/FallbackBannerSubmitEvent';
+import { ShownEvent } from '@src/tracking/events/ShownEvent';
+import { mapShownEvent } from '@src/tracking/LegacyEventTracking/mapShownEvent';
+import { BannerSubmitOnReturnEvent } from '@src/tracking/events/BannerSubmitOnReturnEvent';
+
+export default new Map<string, TrackingEventConverterFactory>( [
+	[ ShownEvent.EVENT_NAME, mapShownEvent ],
+	[ CloseEvent.EVENT_NAME, mapCloseEvent ],
+	[ FormStepShownEvent.EVENT_NAME, mapFormStepShownEvent ],
+	[ CustomAmountChangedEvent.EVENT_NAME,
+		( e: CustomAmountChangedEvent ): WMDELegacyBannerEvent =>
+			new WMDELegacyBannerEvent( e.userChoice + '-amount', 1 )
+	],
+	[ AlreadyDonatedShownEvent.EVENT_NAME, ( e: AlreadyDonatedShownEvent ): WMDELegacyBannerEvent => new WMDELegacyBannerEvent( e.eventName, 1 ) ],
+	[ NotShownEvent.EVENT_NAME, mapNotShownEvent ],
+	[ BannerSubmitEvent.EVENT_NAME, ( e: BannerSubmitEvent ): WMDESizeIssueEvent => {
+		switch ( e.feature ) {
+			case 'UpgradeToYearlyForm':
+				return new WMDESizeIssueEvent( `submit-${e.userChoice}`, createViewportInfo(), 1 );
+			case 'UpgradeToMonthlyForm':
+				return new WMDESizeIssueEvent( `submit-${e.userChoice}`, createViewportInfo(), 1 );
+			default:
+				return new WMDESizeIssueEvent( `submit`, createViewportInfo(), 1 );
+		}
+	} ],
+	[ FallbackBannerSubmitEvent.EVENT_NAME,
+		( e: FallbackBannerSubmitEvent ): WMDESizeIssueEvent =>
+			new WMDESizeIssueEvent( e.eventName, createViewportInfo(), 1 )
+	],
+	[ BannerSubmitOnReturnEvent.EVENT_NAME,
+		( e: BannerSubmitOnReturnEvent ): WMDELegacyBannerEvent =>
+			new WMDELegacyBannerEvent( e.eventName + ( e.userChoice !== '' ? `-${e.userChoice}` : '' ), 1 )
+	]
+] );
diff --git a/banners/desktop/C24_WMDE_Desktop_DE_23/form_items.ts b/banners/desktop/C24_WMDE_Desktop_DE_23/form_items.ts
new file mode 100644
index 000000000..b70650d19
--- /dev/null
+++ b/banners/desktop/C24_WMDE_Desktop_DE_23/form_items.ts
@@ -0,0 +1,23 @@
+import FormItemsBuilder from '@src/utils/FormItemsBuilder/FormItemsBuilder';
+import { Translator } from '@src/Translator';
+import { DonationFormItems } from '@src/utils/FormItemsBuilder/DonationFormItems';
+import { Intervals } from '@src/utils/FormItemsBuilder/fields/Intervals';
+import { PaymentMethods } from '@src/utils/FormItemsBuilder/fields/PaymentMethods';
+import { NumberFormatter } from '@src/utils/DynamicContent/formatters/NumberFormatter';
+
+export function createFormItems( translations: Translator, amountFormatter: NumberFormatter ): DonationFormItems {
+	return new FormItemsBuilder( translations, amountFormatter )
+		.setIntervals(
+			Intervals.ONCE,
+			Intervals.MONTHLY,
+			Intervals.QUARTERLY,
+			Intervals.YEARLY
+		)
+		.setAmounts( 5, 10, 20, 25, 50, 100 )
+		.setPaymentMethods(
+			PaymentMethods.PAYPAL,
+			PaymentMethods.BANK_TRANSFER,
+			PaymentMethods.CREDIT_CARD,
+			PaymentMethods.DIRECT_DEBIT
+		).getItems();
+}
diff --git a/banners/desktop/C24_WMDE_Desktop_DE_23/messages.ts b/banners/desktop/C24_WMDE_Desktop_DE_23/messages.ts
new file mode 100644
index 000000000..a708091b0
--- /dev/null
+++ b/banners/desktop/C24_WMDE_Desktop_DE_23/messages.ts
@@ -0,0 +1,36 @@
+import CustomAmountFormDe from '@src/components/DonationForm/Forms/messages/CustomAmountForm.de';
+import DynamicCampaignTextDe from '@src/utils/DynamicContent/messages/DynamicCampaignText.de';
+import { TranslationMessages } from '@src/Translator';
+import UpgradeToYearlyDe from '@src/components/DonationForm/Forms/messages/UpgradeToYearly.de';
+import AddressFormDe from '@src/components/DonationForm/Forms/messages/AddressForm.de';
+import FooterDe from '@src/components/Footer/messages/Footer.de';
+import MainDonationFormDe from '@src/components/DonationForm/Forms/messages/MainDonationForm.de';
+import FallbackBanner from '@src/components/FallbackBanner/messages/FallbackBanner.de';
+import AlreadyDonatedModal from '@src/components/AlreadyDonatedModal/translations/AlreadyDonatedModal.de';
+import SoftCloseDe from '@src/components/SoftClose/messages/SoftClose.de';
+import DoubleProgressBarDe from '@src/components/ProgressBar/messages/DoubleProgressBar.de';
+
+const messages: TranslationMessages = {
+	...CustomAmountFormDe,
+	...DynamicCampaignTextDe,
+	...UpgradeToYearlyDe,
+	...AddressFormDe,
+	...FooterDe,
+	...MainDonationFormDe,
+	...AlreadyDonatedModal,
+	...FallbackBanner,
+	...SoftCloseDe,
+	...DoubleProgressBarDe,
+	'already-donated-go-away-button': 'Im Moment nicht',
+	'soft-close-prompt': 'Dürfen wir später nochmal fragen?',
+	'upgrade-to-yearly-copy': `<p>Jedes Jahr sind wir auf Menschen wie Sie angewiesen. Jährliche Spenden helfen uns besonders und ermöglichen langfristige Weiterentwicklungen.</p>
+		<p>Sie gehen kein Risiko ein: Jederzeit formlos zu sofort kündbar.</p>`,
+	'upgrade-to-yearly-no': 'Nein, ich spende einmalig {{amount}}',
+	'upgrade-to-yearly-yes': 'Ja, ich spende {{amount}} jährlich',
+	'campaign-day-only-n-days': 'Heute sind es nur noch {{days}} Tage bis zum Ende unserer Spendenkampagne.',
+	'custom-amount-placeholder': 'Wahlbetrag',
+	'upgrade-to-yearly-header': 'Bitte spenden Sie {{amount}} jährlich!',
+	'donation-receipt-checkbox-label': 'Bitte senden Sie mir eine steuerlich absetzbare Spendenbescheinigung an meine Postanschrift.'
+};
+
+export default messages;
diff --git a/banners/desktop/C24_WMDE_Desktop_DE_23/styles/Banner.scss b/banners/desktop/C24_WMDE_Desktop_DE_23/styles/Banner.scss
new file mode 100644
index 000000000..1e7d13842
--- /dev/null
+++ b/banners/desktop/C24_WMDE_Desktop_DE_23/styles/Banner.scss
@@ -0,0 +1,22 @@
+@use 'src/themes/Svingle/variables/fonts';
+
+.wmde-banner {
+	&-wrapper {
+		font-size: 14px;
+		font-family: fonts.$ui;
+		box-shadow: 0 3px 0.6em rgba( 60 60 60 / 40% );
+		background-color: var( --main-background );
+	}
+
+	&--pending {
+		.wmde-banner-wrapper {
+			box-shadow: none;
+		}
+	}
+
+	&--closed {
+		.wmde-banner-wrapper {
+			display: none;
+		}
+	}
+}
diff --git a/banners/desktop/C24_WMDE_Desktop_DE_23/styles/FallbackBanner.scss b/banners/desktop/C24_WMDE_Desktop_DE_23/styles/FallbackBanner.scss
new file mode 100644
index 000000000..3fd60d8a5
--- /dev/null
+++ b/banners/desktop/C24_WMDE_Desktop_DE_23/styles/FallbackBanner.scss
@@ -0,0 +1,121 @@
+@use 'src/themes/Svingle/variables/fonts';
+
+$breakpoint: 800px;
+
+.wmde-banner {
+	&-fallback {
+		width: 100%;
+		height: 150px;
+		display: flex;
+		flex-direction: column;
+		background: var( --fallback-background );
+		box-shadow: 0 3px 0.6em rgba( 60 60 60 / 40% );
+
+		@media ( min-width: $breakpoint ) {
+			height: auto;
+			min-height: 250px;
+			padding: 4px;
+		}
+
+		&-small,
+		&-large {
+			display: flex;
+			flex-direction: column;
+			flex: 1 1 auto;
+		}
+
+		&-small {
+			align-items: center;
+			border: 4px solid var( --fallback-border );
+			border-radius: 4px;
+			padding: 8px;
+
+			.wmde-banner-selection-input-text,
+			.wmde-banner-selection-input-input {
+				font-family: fonts.$content;
+				font-size: 14px;
+				font-weight: normal;
+			}
+		}
+
+		&-large {
+			align-items: stretch;
+		}
+
+		&-usage-link {
+			color: var( --fallback-uof-link );
+		}
+
+		&-message {
+			flex: 1 1 auto;
+			display: flex;
+			flex-direction: column;
+			padding: 8px 0;
+		}
+
+		&-bank-item {
+			display: block;
+
+			&-label {
+				font-weight: bold;
+			}
+		}
+
+		.wmde-banner-close {
+			height: 16px;
+			width: 16px;
+			top: 8px;
+			right: 8px;
+
+			@media ( min-width: $breakpoint ) {
+				height: 30px;
+				width: 30px;
+				top: 12px;
+				right: 12px;
+			}
+		}
+
+		.wmde-banner-message {
+			flex: 1 1 auto;
+			display: flex;
+			flex-direction: column;
+			padding: 8px 8px 0;
+			margin: -5px 0 8px;
+			color: var( --fallback-message-color );
+			background-color: var( --fallback-message-background );
+			border: 4px solid var( --fallback-message-border );
+			border-radius: 4px;
+
+			p {
+				margin-bottom: 0;
+			}
+		}
+
+		.wmde-banner-slider-container {
+			padding: 0 0 8px;
+			margin: 0;
+		}
+
+		.wmde-banner-slide-content {
+			font-size: 14px;
+			p {
+				margin-bottom: 8px;
+			}
+		}
+
+		.wmde-banner-slider-navigation-previous,
+		.wmde-banner-slider-navigation-next {
+			align-items: end;
+		}
+
+		.wmde-banner-slider-pagination-dot {
+			cursor: default;
+		}
+	}
+
+	&--pending {
+		.wmde-banner-fallback {
+			box-shadow: none;
+		}
+	}
+}
diff --git a/banners/desktop/C24_WMDE_Desktop_DE_23/styles/MainBanner.scss b/banners/desktop/C24_WMDE_Desktop_DE_23/styles/MainBanner.scss
new file mode 100644
index 000000000..b1e59c844
--- /dev/null
+++ b/banners/desktop/C24_WMDE_Desktop_DE_23/styles/MainBanner.scss
@@ -0,0 +1,59 @@
+$banner-height: 357px !default;
+$form-width: 300px !default;
+
+.wmde-banner {
+
+	.previous {
+		--slider-chevron: var( --previous-button-fill );
+	}
+
+	&-main {
+		min-height: $banner-height;
+		display: flex;
+		flex-direction: column;
+		padding: 12px 24px 0;
+	}
+
+	&-content {
+		display: flex;
+		flex-direction: row;
+		flex-grow: 1;
+	}
+
+	&-message {
+		height: auto;
+	}
+
+	&-message-container {
+		display: flex;
+		flex: 1 1 auto;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		padding: 11px;
+
+		border: 5px solid var( --message-border );
+		border-radius: 9px;
+		margin-bottom: 10px;
+	}
+
+	&-column-left {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		flex: 1 1 auto;
+		overflow-y: hidden;
+		margin-right: 30px;
+		padding: 0 0 10px;
+		background: var( --message-background );
+	}
+
+	&-column-right {
+		order: 2;
+		flex: 0 0 $form-width;
+		display: flex;
+		flex-direction: column;
+		width: $form-width;
+		padding: 10px 0 0;
+	}
+}
diff --git a/banners/desktop/C24_WMDE_Desktop_DE_23/styles/styles.scss b/banners/desktop/C24_WMDE_Desktop_DE_23/styles/styles.scss
new file mode 100644
index 000000000..b69168a4c
--- /dev/null
+++ b/banners/desktop/C24_WMDE_Desktop_DE_23/styles/styles.scss
@@ -0,0 +1,58 @@
+// This is the file where we import the theme-specific component styles
+@use 'src/themes/Treedip/swatches/skin_default' with (
+	$slider: true,
+	$select-group: true,
+	$upgrade-to-yearly: true,
+	$fallback-banner: true,
+	$double-progress-bar: true,
+	$soft-close: true,
+);
+@use 'src/components/BannerConductor/banner-transition';
+@use 'src/themes/UseOfFunds/swatches/skin_default' as uof-default;
+@use 'Banner';
+@use 'src/themes/UseOfFunds/UseOfFunds';
+@use 'MainBanner' with (
+	$banner-height: 357px,
+	$form-width: 300px
+);
+@use 'src/themes/Treedip/defaults';
+@use 'src/themes/Treedip/ButtonClose/ButtonClose';
+@use 'src/themes/Treedip/ProgressBar/DoubleProgressBar';
+@use 'src/themes/Treedip/DonationForm/DonationForm';
+@use 'src/themes/Treedip/DonationForm/MultiStepDonation';
+@use 'src/themes/Treedip/DonationForm/SubComponents/SelectGroup';
+@use 'src/themes/Treedip/DonationForm/SubComponents/SelectGroupRadios';
+@use 'src/themes/Treedip/DonationForm/SubComponents/SelectCustomAmountRadio';
+@use 'src/themes/Treedip/DonationForm/SubComponents/SmsBox';
+@use 'src/themes/Treedip/DonationForm/Forms/MainDonationForm';
+@use 'src/themes/Treedip/DonationForm/Forms/UpgradeToYearlyButtonForm' with (
+	$font-size: 14px
+);
+@use 'src/themes/Treedip/DonationForm/Forms/CustomAmountForm';
+@use 'src/themes/Treedip/Footer/FooterAlreadyDonated';
+@use 'src/themes/Treedip/Footer/SelectionInput';
+@use 'src/themes/Treedip/Message/Message'  with (
+	$slider-main-headline-font-size: 25px,
+	$message-header-padding-bottom: 8px,
+	$message-header-small-up-padding-bottom: 8px
+);
+@use 'src/themes/Treedip/SoftClose/SoftClose';
+@use 'src/themes/Treedip/Slider/KeenSlider' with (
+	$slider-padding: 0
+);
+
+/**
+ * Fallback banner with "Fijitiv" theme
+ * All selectors in Fijitiv theme are prefixed with the ".wmde-banner-fallback" class selector,
+  so they override the "default" styles with the same selector
+ */
+@use 'FallbackBanner';
+@use 'src/themes/Fijitiv/FallbackBanner/FallbackButton';
+@use 'src/themes/Fijitiv/FallbackBanner/LargeFooter' with (
+	$fallback-large-footer-right-before-border-color: white
+);
+@use 'src/themes/Fijitiv/FallbackBanner/SmallFooter';
+@use 'src/themes/Fijitiv/ProgressBar/ProgressBar' as FallbackProgressBar with (
+	$progress-bar-margin: 0 15px
+);
+@use 'src/themes/Fijitiv/Slider/KeenSlider' as FallbackSlider;
diff --git a/banners/desktop/C24_WMDE_Desktop_DE_23/styles/styles_var.scss b/banners/desktop/C24_WMDE_Desktop_DE_23/styles/styles_var.scss
new file mode 100644
index 000000000..9064eff80
--- /dev/null
+++ b/banners/desktop/C24_WMDE_Desktop_DE_23/styles/styles_var.scss
@@ -0,0 +1,60 @@
+// This is the file where we import the theme-specific component styles
+@use 'src/themes/Treedip/swatches/skin_default' with (
+	$slider: true,
+	$select-group: true,
+	$upgrade-to-yearly: true,
+	$fallback-banner: true,
+	$double-progress-bar: true,
+	$soft-close: true,
+);
+@use 'src/components/BannerConductor/banner-transition';
+@use 'src/themes/UseOfFunds/swatches/skin_default' as uof-default;
+@use 'Banner';
+@use 'src/themes/UseOfFunds/UseOfFunds';
+@use 'MainBanner' with (
+	$banner-height: 357px,
+	$form-width: 300px
+);
+@use 'src/themes/Treedip/defaults';
+@use 'src/themes/Treedip/ButtonClose/ButtonClose';
+@use 'src/themes/Treedip/ProgressBar/DoubleProgressBar';
+@use 'src/themes/Treedip/DonationForm/DonationForm';
+@use 'src/themes/Treedip/DonationForm/MultiStepDonation';
+@use 'src/themes/Treedip/DonationForm/SubComponents/SelectGroup';
+@use 'src/themes/Treedip/DonationForm/SubComponents/SelectGroupRadios';
+@use 'src/themes/Treedip/DonationForm/SubComponents/SelectCustomAmountRadio';
+@use 'src/themes/Treedip/DonationForm/SubComponents/SmsBox';
+@use 'src/themes/Treedip/DonationForm/Forms/MainDonationFormDonationReceipt' with (
+	$padding: 14px 0 0
+);
+@use 'src/themes/Treedip/DonationForm/Forms/UpgradeToYearlyButtonForm' with (
+	$font-size: 14px
+);
+@use 'src/themes/Treedip/DonationForm/Forms/CustomAmountForm';
+@use 'src/themes/Treedip/Footer/FooterAlreadyDonated';
+@use 'src/themes/Treedip/Footer/SelectionInput';
+@use 'src/themes/Treedip/Message/Message'  with (
+	$slider-main-headline-font-size: 25px,
+	$message-header-padding-bottom: 8px,
+	$message-header-small-up-padding-bottom: 8px
+);
+@use 'src/themes/Treedip/SoftClose/SoftClose';
+@use 'src/themes/Treedip/Slider/KeenSlider' with (
+	$slider-padding: 0
+);
+
+/**
+ * Fallback banner with "Fijitiv" theme
+ * All selectors in Fijitiv theme are prefixed with the ".wmde-banner-fallback" class selector,
+  so they override the "default" styles with the same selector
+ */
+@use 'FallbackBanner';
+@use 'src/themes/Fijitiv/FallbackBanner/FallbackButton';
+@use 'src/themes/Fijitiv/FallbackBanner/LargeFooter' with (
+	$fallback-large-footer-right-before-border-color: white
+);
+@use 'src/themes/Fijitiv/FallbackBanner/SmallFooter';
+@use 'src/themes/Fijitiv/ProgressBar/ProgressBar' as FallbackProgressBar with (
+	$progress-bar-margin: 0 15px
+);
+@use 'src/themes/Fijitiv/Slider/KeenSlider' as FallbackSlider;
diff --git a/banners/desktop/C24_WMDE_Desktop_DE_23/useFormAction.ts b/banners/desktop/C24_WMDE_Desktop_DE_23/useFormAction.ts
new file mode 100644
index 000000000..079f08a64
--- /dev/null
+++ b/banners/desktop/C24_WMDE_Desktop_DE_23/useFormAction.ts
@@ -0,0 +1,22 @@
+import { FormActions } from '@src/domain/FormActions';
+import { computed, Ref } from 'vue';
+import { useFormModel } from '@src/components/composables/useFormModel';
+import { PaymentMethods } from '@src/utils/FormItemsBuilder/fields/PaymentMethods';
+
+export function useFormAction( formActions: FormActions, minimumAmount: number ): { formAction: Ref<string> } {
+	const formModel = useFormModel();
+	const formAction = computed( (): string => {
+
+		let URL: string = formActions.donateAnonymouslyAction;
+
+		if ( formModel.numericAmount.value >= minimumAmount || formModel.receipt.value || formModel.paymentMethod.value === PaymentMethods.DIRECT_DEBIT.value ) {
+			URL = formActions.donateWithAddressAction + '&ap=1';
+		}
+
+		return URL;
+	} );
+
+	return {
+		formAction
+	};
+}
diff --git a/campaign_info.toml b/campaign_info.toml
index 33fa0f1ac..8217e1c7c 100644
--- a/campaign_info.toml
+++ b/campaign_info.toml
@@ -6,9 +6,9 @@
 [desktop]
 name = "Desktop"
 icon = "desktop"
-campaign = "C24_WMDE_Desktop_DE_22"
-description = "Based on CTRL of desktop-de-21, VAR: uses different copy"
-campaign_tracking = "22-ba-241220"
+campaign = "C24_WMDE_Desktop_DE_23"
+description = "Based on CTRL of test 21, VAR has a receipt checkbox"
+campaign_tracking = "23-ba-241223"
 preview_link = "/wiki/Hamster?devbanner={{banner}}&banner=B22_WMDE_local_prototype"
 preview_link_darkmode = "/wiki/Hamster?devbanner={{banner}}&banner=B22_WMDE_local_prototype&vectornightmode=1"
 preview_link_offline = ""
@@ -18,14 +18,14 @@ use_of_funds_source = "MediaWiki:WMDE_Fundraising/UseOfFunds_2024_DE"
 
 # Banners of the campaign, key after "banners" can be anything
 [desktop.banners.ctrl]
-filename = "./banners/desktop/C24_WMDE_Desktop_DE_22/banner_ctrl.ts"
-pagename = "B24_WMDE_Desktop_DE_22_ctrl"
-tracking = "org-22-241220-ctrl"
+filename = "./banners/desktop/C24_WMDE_Desktop_DE_23/banner_ctrl.ts"
+pagename = "B24_WMDE_Desktop_DE_23_ctrl"
+tracking = "org-23-241223-ctrl"
 
 [desktop.banners.var]
-filename = "./banners/desktop/C24_WMDE_Desktop_DE_22/banner_var.ts"
-pagename = "B24_WMDE_Desktop_DE_22_var"
-tracking = "org-22-241220-var"
+filename = "./banners/desktop/C24_WMDE_Desktop_DE_23/banner_var.ts"
+pagename = "B24_WMDE_Desktop_DE_23_var"
+tracking = "org-23-241223-var"
 
 [desktop.test_matrix]
 platform = ["edge", "firefox_win10", "chrome_win10", "safari", "firefox_macos", "chrome_macos", "firefox_linux", "chrome_linux"]
diff --git a/src/themes/Treedip/swatches/color_light.scss b/src/themes/Treedip/swatches/color_light.scss
index 869f4712e..174738ab1 100644
--- a/src/themes/Treedip/swatches/color_light.scss
+++ b/src/themes/Treedip/swatches/color_light.scss
@@ -58,8 +58,8 @@ $blue700: #2a4b8d;
 
 	--input-checkbox-background: transparent;
 	--input-checkbox-border: #{$grey500};
-	--input-checkbox-background-checked: #{$blue700};
-	--input-checkbox-border-checked: #{$blue700};
+	--input-checkbox-background-checked: #{$red600};
+	--input-checkbox-border-checked: #{$red600};
 
 	--animated-highlight-color: #{$grey700};
 	/* stylelint-disable */
@@ -131,6 +131,9 @@ $blue700: #2a4b8d;
 		--select-group-bubble-radio-background-checked: #{$white};
 		--select-group-bubble-radio-border-checked: #{$blue700};
 		--select-group-bubble-radio-checkmark: #{$blue700};
+
+		--input-checkbox-background-checked: #{$blue700};
+		--input-checkbox-border-checked: #{$blue700};
 	}
 
 	@if $select-group-button {
diff --git a/test/banners/desktop/C24_WMDE_Desktop_DE_23/components/BannerCtrl.spec.ts b/test/banners/desktop/C24_WMDE_Desktop_DE_23/components/BannerCtrl.spec.ts
new file mode 100644
index 000000000..4db44b736
--- /dev/null
+++ b/test/banners/desktop/C24_WMDE_Desktop_DE_23/components/BannerCtrl.spec.ts
@@ -0,0 +1,178 @@
+import { beforeEach, describe, test, vi } from 'vitest';
+import { mount, VueWrapper } from '@vue/test-utils';
+import Banner from '@banners/desktop/C24_WMDE_Desktop_DE_23/components/BannerCtrl.vue';
+import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
+import { newDynamicContent } from '@test/banners/dynamicCampaignContent';
+import { useOfFundsContent } from '@test/banners/useOfFundsContent';
+import { formItems } from '@test/banners/formItems';
+import { CurrencyEn } from '@src/utils/DynamicContent/formatters/CurrencyEn';
+import { useOfFundsFeatures } from '@test/features/UseOfFunds';
+import {
+	bannerContentAnimatedTextFeatures,
+	bannerContentDateAndTimeFeatures,
+	bannerContentDisplaySwitchFeatures,
+	bannerContentFeatures
+} from '@test/features/BannerContent';
+import { donationFormFeatures } from '@test/features/forms/MainDonation_UpgradeToYearlyButton';
+import { useFormModel } from '@src/components/composables/useFormModel';
+import { resetFormModel } from '@test/resetFormModel';
+import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
+import { bannerAutoHideFeatures, bannerMainFeatures } from '@test/features/MainBanner';
+import { formActionSwitchFeatures } from '@test/features/form_action_switch/MainDonation_UpgradeToYearlyButton';
+import { softCloseFeatures } from '@test/features/SoftCloseDesktop';
+import { alreadyDonatedModalFeatures } from '@test/features/AlreadyDonatedModal';
+import { softCloseSubmitTrackingFeaturesDesktop } from '@test/features/SoftCloseSubmitTrackingDesktop';
+import { Tracker } from '@src/tracking/Tracker';
+import { TimerStub } from '@test/fixtures/TimerStub';
+import { Timer } from '@src/utils/Timer';
+
+const formModel = useFormModel();
+const translator = ( key: string ): string => key;
+let tracker: Tracker;
+
+describe( 'BannerCtrl.vue', () => {
+
+	beforeEach( () => {
+		resetFormModel( formModel );
+		tracker = {
+			trackEvent: vi.fn()
+		};
+	} );
+
+	const getWrapper = ( dynamicContent: DynamicContent = null, timer: Timer = null ): VueWrapper<any> => {
+		return mount( Banner, {
+			attachTo: document.body,
+			props: {
+				bannerState: BannerStates.Pending,
+				useOfFundsContent,
+				remainingImpressions: 10,
+				localCloseTracker: {
+					getItem: () => '',
+					setItem: () => {}
+				}
+			},
+			global: {
+				mocks: {
+					$translate: translator
+				},
+				provide: {
+					translator: { translate: translator },
+					dynamicCampaignText: dynamicContent ?? newDynamicContent(),
+					currentCampaignTimePercentage: 42,
+					formActions: {
+						donateWithAddressAction: 'https://example.com/with-address',
+						donateAnonymouslyAction: 'https://example.com/without-address'
+					},
+					currencyFormatter: new CurrencyEn(),
+					formItems,
+					tracker,
+					timer: timer ?? new TimerStub()
+				}
+			}
+		} );
+	};
+
+	describe( 'Main Banner', () => {
+		test.each( [
+			[ 'expectDoesNotEmitCloseEvent' ]
+		] )( '%s', async ( testName: string ) => {
+			await bannerMainFeatures[ testName ]( getWrapper() );
+		} );
+
+		test.each( [
+			[ 'expectClosesBannerWhenWindowBecomesSmall' ]
+		] )( '%s', async ( testName: string ) => {
+			await bannerAutoHideFeatures[ testName ]( getWrapper );
+		} );
+	} );
+
+	describe( 'Content', () => {
+		test.each( [
+			[ 'expectSlideShowPlaysWhenBecomesVisible' ],
+			[ 'expectSlideShowStopsOnFormInteraction' ]
+		] )( '%s', async ( testName: string ) => {
+			await bannerContentFeatures[ testName ]( getWrapper() );
+		} );
+
+		test.each( [
+			[ 'expectShowsSlideShowOnSmallSizes' ],
+			[ 'expectShowsMessageOnLargeSizes' ]
+		] )( '%s', async ( testName: string ) => {
+			await bannerContentDisplaySwitchFeatures[ testName ]( getWrapper, 1300 );
+		} );
+
+		test.each( [
+			[ 'expectShowsAnimatedVisitorsVsDonorsSentenceInMessage' ],
+			[ 'expectShowsAnimatedVisitorsVsDonorsSentenceInSlideShow' ]
+		] )( '%s', async ( testName: string ) => {
+			await bannerContentAnimatedTextFeatures[ testName ]( getWrapper );
+		} );
+
+		test.each( [
+			[ 'expectShowsLiveDateAndTimeInTitle' ]
+		] )( '%s', async ( testName: string ) => {
+			await bannerContentDateAndTimeFeatures[ testName ]( getWrapper );
+		} );
+	} );
+
+	describe( 'Donation Form Happy Paths', () => {
+		test.each( [
+			[ 'expectMainDonationFormSubmitsWhenSofortIsSelected' ],
+			[ 'expectMainDonationFormSubmitsWhenYearlyIsSelected' ],
+			[ 'expectMainDonationFormGoesToUpgrade' ],
+			[ 'expectUpgradeToYearlyFormSubmitsUpgrade' ],
+			[ 'expectUpgradeToYearlyFormSubmitsDontUpgrade' ]
+		] )( '%s', async ( testName: string ) => {
+			await donationFormFeatures[ testName ]( getWrapper() );
+		} );
+
+		test.each( [
+			[ 'expectMainDonationFormSubmitsWithAddressForDirectDebit' ],
+			[ 'expectMainDonationFormSubmitsWithAddressForPayPal' ],
+			[ 'expectUpgradeToYearlyFormSubmitsWithAddressForDirectDebit' ],
+			[ 'expectUpgradeToYearlyFormSubmitsWithAddressForPayPal' ]
+		] )( '%s', async ( testName: string ) => {
+			await formActionSwitchFeatures[ testName ]( getWrapper() );
+		} );
+	} );
+
+	describe( 'Soft Close', () => {
+		test.each( [
+			[ 'expectShowsSoftClose' ],
+			[ 'expectEmitsSoftCloseCloseEvent' ],
+			[ 'expectEmitsSoftCloseMaybeLaterEvent' ],
+			[ 'expectEmitsSoftCloseTimeOutEvent' ],
+			[ 'expectEmitsBannerContentChangedOnSoftClose' ],
+			[ 'expectShowsCloseIcon' ],
+			[ 'expectCloseIconEmitsCloseEvent' ]
+		] )( '%s', async ( testName: string ) => {
+			await softCloseFeatures[ testName ]( getWrapper );
+		} );
+	} );
+
+	describe( 'Soft Close Submit Tracking', () => {
+		test.each( [
+			[ 'expectEmitsBannerSubmitOnReturnEvent' ],
+			[ 'expectDoesNotEmitsBannerSubmitOnReturnEventWhenLocalStorageItemIsMissing' ]
+		] )( '%s', async ( testName: string ) => {
+			await softCloseSubmitTrackingFeaturesDesktop[ testName ]( getWrapper(), tracker );
+		} );
+	} );
+
+	describe( 'Already Donated', () => {
+		test.each( [
+			[ 'expectFiresMaybeLaterEventOnLinkClick' ]
+		] )( '%s', async ( testName: string ) => {
+			await alreadyDonatedModalFeatures[ testName ]( getWrapper() );
+		} );
+	} );
+
+	describe( 'Use of Funds', () => {
+		test.each( [
+			[ 'expectShowsUseOfFunds' ],
+			[ 'expectHidesUseOfFunds' ]
+		] )( '%s', async ( testName: string ) => {
+			await useOfFundsFeatures[ testName ]( getWrapper() );
+		} );
+	} );
+} );
diff --git a/test/banners/desktop/C24_WMDE_Desktop_DE_23/components/BannerVar.spec.ts b/test/banners/desktop/C24_WMDE_Desktop_DE_23/components/BannerVar.spec.ts
new file mode 100644
index 000000000..e4f0f6239
--- /dev/null
+++ b/test/banners/desktop/C24_WMDE_Desktop_DE_23/components/BannerVar.spec.ts
@@ -0,0 +1,222 @@
+import { beforeEach, describe, expect, it, test, vi } from 'vitest';
+import { mount, VueWrapper } from '@vue/test-utils';
+import Banner from '@banners/desktop/C24_WMDE_Desktop_DE_23/components/BannerVar.vue';
+import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
+import { newDynamicContent } from '@test/banners/dynamicCampaignContent';
+import { useOfFundsContent } from '@test/banners/useOfFundsContent';
+import { formItems } from '@test/banners/formItems';
+import { CurrencyEn } from '@src/utils/DynamicContent/formatters/CurrencyEn';
+import { useOfFundsFeatures } from '@test/features/UseOfFunds';
+import {
+	bannerContentAnimatedTextFeatures,
+	bannerContentDateAndTimeFeatures,
+	bannerContentDisplaySwitchFeatures,
+	bannerContentFeatures
+} from '@test/features/BannerContent';
+import { donationFormFeatures } from '@test/features/forms/MainDonation_UpgradeToYearlyButton';
+import { useFormModel } from '@src/components/composables/useFormModel';
+import { resetFormModel } from '@test/resetFormModel';
+import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
+import { bannerAutoHideFeatures, bannerMainFeatures } from '@test/features/MainBanner';
+import { formActionSwitchFeatures } from '@test/features/form_action_switch/MainDonation_UpgradeToYearlyButton';
+import { softCloseFeatures } from '@test/features/SoftCloseDesktop';
+import { alreadyDonatedModalFeatures } from '@test/features/AlreadyDonatedModal';
+import { softCloseSubmitTrackingFeaturesDesktop } from '@test/features/SoftCloseSubmitTrackingDesktop';
+import { Tracker } from '@src/tracking/Tracker';
+import { TimerStub } from '@test/fixtures/TimerStub';
+import { Timer } from '@src/utils/Timer';
+
+const formModel = useFormModel();
+const translator = ( key: string ): string => key;
+let tracker: Tracker;
+
+describe( 'BannerVar.vue', () => {
+
+	beforeEach( () => {
+		resetFormModel( formModel );
+		tracker = {
+			trackEvent: vi.fn()
+		};
+	} );
+
+	const getWrapper = ( dynamicContent: DynamicContent = null, timer: Timer = null ): VueWrapper<any> => {
+		return mount( Banner, {
+			attachTo: document.body,
+			props: {
+				bannerState: BannerStates.Pending,
+				useOfFundsContent,
+				remainingImpressions: 10,
+				localCloseTracker: {
+					getItem: () => '',
+					setItem: () => {}
+				}
+			},
+			global: {
+				mocks: {
+					$translate: translator
+				},
+				provide: {
+					translator: { translate: translator },
+					dynamicCampaignText: dynamicContent ?? newDynamicContent(),
+					currentCampaignTimePercentage: 42,
+					formActions: {
+						donateWithAddressAction: 'https://example.com/with-address',
+						donateAnonymouslyAction: 'https://example.com/without-address'
+					},
+					currencyFormatter: new CurrencyEn(),
+					formItems,
+					tracker,
+					timer: timer ?? new TimerStub()
+				}
+			}
+		} );
+	};
+
+	describe( 'Main Banner', () => {
+		test.each( [
+			[ 'expectDoesNotEmitCloseEvent' ]
+		] )( '%s', async ( testName: string ) => {
+			await bannerMainFeatures[ testName ]( getWrapper() );
+		} );
+
+		test.each( [
+			[ 'expectClosesBannerWhenWindowBecomesSmall' ]
+		] )( '%s', async ( testName: string ) => {
+			await bannerAutoHideFeatures[ testName ]( getWrapper );
+		} );
+	} );
+
+	describe( 'Content', () => {
+		test.each( [
+			[ 'expectSlideShowPlaysWhenBecomesVisible' ],
+			[ 'expectSlideShowStopsOnFormInteraction' ]
+		] )( '%s', async ( testName: string ) => {
+			await bannerContentFeatures[ testName ]( getWrapper() );
+		} );
+
+		test.each( [
+			[ 'expectShowsSlideShowOnSmallSizes' ],
+			[ 'expectShowsMessageOnLargeSizes' ]
+		] )( '%s', async ( testName: string ) => {
+			await bannerContentDisplaySwitchFeatures[ testName ]( getWrapper, 1300 );
+		} );
+
+		test.each( [
+			[ 'expectShowsAnimatedVisitorsVsDonorsSentenceInMessage' ],
+			[ 'expectShowsAnimatedVisitorsVsDonorsSentenceInSlideShow' ]
+		] )( '%s', async ( testName: string ) => {
+			await bannerContentAnimatedTextFeatures[ testName ]( getWrapper );
+		} );
+
+		test.each( [
+			[ 'expectShowsLiveDateAndTimeInTitle' ]
+		] )( '%s', async ( testName: string ) => {
+			await bannerContentDateAndTimeFeatures[ testName ]( getWrapper );
+		} );
+	} );
+
+	describe( 'Donation Form Happy Paths', () => {
+		test.each( [
+			[ 'expectMainDonationFormSubmitsWhenSofortIsSelected' ],
+			[ 'expectMainDonationFormSubmitsWhenYearlyIsSelected' ],
+			[ 'expectMainDonationFormGoesToUpgrade' ],
+			[ 'expectUpgradeToYearlyFormSubmitsUpgrade' ],
+			[ 'expectUpgradeToYearlyFormSubmitsDontUpgrade' ]
+		] )( '%s', async ( testName: string ) => {
+			await donationFormFeatures[ testName ]( getWrapper() );
+		} );
+
+		test.each( [
+			[ 'expectMainDonationFormSubmitsWithAddressForDirectDebit' ],
+			[ 'expectMainDonationFormSubmitsWithAddressForPayPal' ],
+			[ 'expectUpgradeToYearlyFormSubmitsWithAddressForDirectDebit' ],
+			[ 'expectUpgradeToYearlyFormSubmitsWithAddressForPayPal' ]
+		] )( '%s', async ( testName: string ) => {
+			await formActionSwitchFeatures[ testName ]( getWrapper() );
+		} );
+
+		it( 'Set the correct action when amount is above 10', async (): Promise<void> => {
+			const wrapper = getWrapper();
+
+			await wrapper.find( '.interval-0 input' ).trigger( 'change' );
+			await wrapper.find( '.amount-10 input' ).trigger( 'change' );
+			await wrapper.find( '.payment-ppl input' ).trigger( 'change' );
+
+			expect( wrapper.find<HTMLFormElement>( '.wmde-banner-submit-form' ).element.action ).toContain( 'with-address&ap=1' );
+		} );
+
+		it( 'Set the correct action when amount is below 10 and receipt is not checked', async (): Promise<void> => {
+			const wrapper = getWrapper();
+
+			await wrapper.find( '.interval-0 input' ).trigger( 'change' );
+			await wrapper.find( '.amount-5 input' ).trigger( 'change' );
+			await wrapper.find( '.payment-ppl input' ).trigger( 'change' );
+
+			expect( wrapper.find<HTMLFormElement>( '.wmde-banner-submit-form' ).element.action ).toContain( 'without-address' );
+		} );
+
+		it( 'Set the correct action when amount is below 10 and receipt is checked', async (): Promise<void> => {
+			const wrapper = getWrapper();
+
+			await wrapper.find( '.interval-0 input' ).trigger( 'change' );
+			await wrapper.find( '.amount-5 input' ).trigger( 'change' );
+			await wrapper.find( '.payment-ppl input' ).trigger( 'change' );
+			await wrapper.find( '#wmde-banner-form-donation-receipt' ).trigger( 'click' );
+
+			expect( wrapper.find<HTMLFormElement>( '.wmde-banner-submit-form' ).element.action ).toContain( 'with-address&ap=1' );
+		} );
+
+		it( 'Puts the receipt option into the submit form', async (): Promise<void> => {
+			const wrapper = getWrapper();
+
+			expect( wrapper.find<HTMLInputElement>( '.wmde-banner-submit-form [name="receipt"]' ).element.value ).toStrictEqual( 'false' );
+
+			await wrapper.find( '.interval-0 input' ).trigger( 'change' );
+			await wrapper.find( '.amount-5 input' ).trigger( 'change' );
+			await wrapper.find( '.payment-ppl input' ).trigger( 'change' );
+			await wrapper.find( '#wmde-banner-form-donation-receipt' ).trigger( 'click' );
+
+			expect( wrapper.find<HTMLInputElement>( '.wmde-banner-submit-form [name="receipt"]' ).element.value ).toStrictEqual( 'true' );
+		} );
+	} );
+
+	describe( 'Soft Close', () => {
+		test.each( [
+			[ 'expectShowsSoftClose' ],
+			[ 'expectEmitsSoftCloseCloseEvent' ],
+			[ 'expectEmitsSoftCloseMaybeLaterEvent' ],
+			[ 'expectEmitsSoftCloseTimeOutEvent' ],
+			[ 'expectEmitsBannerContentChangedOnSoftClose' ],
+			[ 'expectShowsCloseIcon' ],
+			[ 'expectCloseIconEmitsCloseEvent' ]
+		] )( '%s', async ( testName: string ) => {
+			await softCloseFeatures[ testName ]( getWrapper );
+		} );
+	} );
+
+	describe( 'Soft Close Submit Tracking', () => {
+		test.each( [
+			[ 'expectEmitsBannerSubmitOnReturnEvent' ],
+			[ 'expectDoesNotEmitsBannerSubmitOnReturnEventWhenLocalStorageItemIsMissing' ]
+		] )( '%s', async ( testName: string ) => {
+			await softCloseSubmitTrackingFeaturesDesktop[ testName ]( getWrapper(), tracker );
+		} );
+	} );
+
+	describe( 'Already Donated', () => {
+		test.each( [
+			[ 'expectFiresMaybeLaterEventOnLinkClick' ]
+		] )( '%s', async ( testName: string ) => {
+			await alreadyDonatedModalFeatures[ testName ]( getWrapper() );
+		} );
+	} );
+
+	describe( 'Use of Funds', () => {
+		test.each( [
+			[ 'expectShowsUseOfFunds' ],
+			[ 'expectHidesUseOfFunds' ]
+		] )( '%s', async ( testName: string ) => {
+			await useOfFundsFeatures[ testName ]( getWrapper() );
+		} );
+	} );
+} );
diff --git a/test/banners/desktop/C24_WMDE_Desktop_DE_23/components/FallbackBanner.spec.ts b/test/banners/desktop/C24_WMDE_Desktop_DE_23/components/FallbackBanner.spec.ts
new file mode 100644
index 000000000..862aa3545
--- /dev/null
+++ b/test/banners/desktop/C24_WMDE_Desktop_DE_23/components/FallbackBanner.spec.ts
@@ -0,0 +1,58 @@
+import { describe, test } from 'vitest';
+import { mount, VueWrapper } from '@vue/test-utils';
+import FallbackBanner from '@banners/desktop/C24_WMDE_Desktop_DE_23/components/FallbackBanner.vue';
+import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
+import { useOfFundsContent } from '@test/banners/useOfFundsContent';
+import { newDynamicContent } from '@test/banners/dynamicCampaignContent';
+import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
+import { Tracker } from '@src/tracking/Tracker';
+import { TrackerStub } from '@test/fixtures/TrackerStub';
+import { fallbackBannerFeatures, submitFeatures } from '@test/features/FallbackBanner';
+import { Timer } from '@src/utils/Timer';
+import { TimerStub } from '@test/fixtures/TimerStub';
+
+const translator = ( key: string ): string => key;
+
+describe( 'FallbackBanner.vue', () => {
+	const getWrapperAtWidth = ( width: number, dynamicContent: DynamicContent = null, tracker: Tracker = null, timer: Timer = null ): VueWrapper<any> => {
+		Object.defineProperty( window, 'innerWidth', { writable: true, configurable: true, value: width } );
+		return mount( FallbackBanner, {
+			props: {
+				bannerState: BannerStates.Pending,
+				useOfFundsContent,
+				donationLink: 'https://spenden.wikimedia.de'
+			},
+			global: {
+				mocks: {
+					$translate: translator
+				},
+				provide: {
+					translator: { translate: translator },
+					dynamicCampaignText: dynamicContent ?? newDynamicContent(),
+					tracker: tracker ?? new TrackerStub(),
+					timer: timer ?? new TimerStub()
+				}
+			}
+		} );
+	};
+
+	test.each( [
+		[ 'showsTheSmallBanner' ],
+		[ 'showsTheLargeBanner' ],
+		[ 'emitsTheBannerCloseEvent' ],
+		[ 'playsTheSlideshowWhenBecomesVisible' ],
+		[ 'showsUseOfFundsFromSmallBanner' ],
+		[ 'hidesUseOfFundsFromSmallBanner' ],
+		[ 'showsUseOfFundsFromLargeBanner' ],
+		[ 'hidesUseOfFundsFromLargeBanner' ]
+	] )( '%s', async ( testName: string ) => {
+		await fallbackBannerFeatures[ testName ]( getWrapperAtWidth );
+	} );
+
+	test.each( [
+		[ 'submitsFromLargeBanner' ],
+		[ 'submitsFromSmallBanner' ]
+	] )( '%s', async ( testName: string ) => {
+		await submitFeatures[ testName ]( getWrapperAtWidth );
+	} );
+} );
diff --git a/test/banners/desktop/C24_WMDE_Desktop_DE_23/components/MainDonationFormPaymentsAndReceiptButton.spec.ts b/test/banners/desktop/C24_WMDE_Desktop_DE_23/components/MainDonationFormPaymentsAndReceiptButton.spec.ts
new file mode 100644
index 000000000..d1228f5eb
--- /dev/null
+++ b/test/banners/desktop/C24_WMDE_Desktop_DE_23/components/MainDonationFormPaymentsAndReceiptButton.spec.ts
@@ -0,0 +1,109 @@
+import { beforeEach, describe, expect, it, test } from 'vitest';
+import { useFormModel } from '@src/components/composables/useFormModel';
+import { shallowMount } from '@vue/test-utils';
+import { PaymentMethods } from '@src/utils/FormItemsBuilder/fields/PaymentMethods';
+import MainDonationFormPaymentsAndReceiptButton from '@banners/desktop/C24_WMDE_Desktop_DE_23/components/MainDonationFormPaymentsAndReceiptButton.vue';
+import { AddressTypes } from '@src/utils/FormItemsBuilder/fields/AddressTypes';
+import { resetFormModel } from '@test/resetFormModel';
+
+const translate = ( key: string ): string => key;
+const formModel = useFormModel();
+
+describe( 'MainDonationFormPaymentsAndReceiptButton.vue', () => {
+
+	beforeEach( () => resetFormModel( formModel ) );
+
+	test.each( [
+		[ AddressTypes.ANONYMOUS.value, 'submit-label-paypal' ],
+		[ '', 'submit-label-paypal' ],
+		[ AddressTypes.EMAIL.value, 'submit-label' ],
+		[ AddressTypes.FULL.value, 'submit-label' ]
+	] )( 'shows the correct label for address type %s', ( addressType: string, label: string ) => {
+		formModel.addressType.value = addressType;
+		formModel.paymentMethod.value = PaymentMethods.PAYPAL.value;
+		formModel.customAmount.value = '9.99';
+
+		const wrapper = shallowMount( MainDonationFormPaymentsAndReceiptButton, {
+			props: {
+				paymentLabelsBelow: 10
+			},
+			global: {
+				provide: {
+					translator: { translate }
+				}
+			}
+		} );
+
+		expect( wrapper.text() ).toStrictEqual( label );
+	} );
+
+	test.each( [
+		[ true, 'submit-label' ],
+		[ false, 'submit-label-paypal' ],
+		[ null, 'submit-label-paypal' ]
+	] )( 'shows the correct label for receipt %s', ( receipt: boolean|null, label: string ) => {
+		formModel.receipt.value = receipt;
+		formModel.paymentMethod.value = PaymentMethods.PAYPAL.value;
+		formModel.addressType.value = AddressTypes.ANONYMOUS.value;
+		formModel.customAmount.value = '9.99';
+
+		const wrapper = shallowMount( MainDonationFormPaymentsAndReceiptButton, {
+			props: {
+				paymentLabelsBelow: 10
+			},
+			global: {
+				provide: {
+					translator: { translate }
+				}
+			}
+		} );
+
+		expect( wrapper.text() ).toStrictEqual( label );
+	} );
+
+	test.each( [
+		[ PaymentMethods.PAYPAL.value, 'submit-label-paypal' ],
+		[ PaymentMethods.BANK_TRANSFER.value, 'submit-label-bank-transfer' ],
+		[ PaymentMethods.CREDIT_CARD.value, 'submit-label-credit-card' ],
+		[ PaymentMethods.SOFORT.value, 'submit-label-sofort' ],
+		[ PaymentMethods.DIRECT_DEBIT.value, 'submit-label' ]
+	] )( 'shows the correct label when anonymous for payment method %s', ( paymentMethod: string, label: string ) => {
+		formModel.addressType.value = AddressTypes.ANONYMOUS.value;
+		formModel.paymentMethod.value = paymentMethod;
+		formModel.customAmount.value = '9.99';
+
+		const wrapper = shallowMount( MainDonationFormPaymentsAndReceiptButton, {
+			props: {
+				paymentLabelsBelow: 10
+			},
+			global: {
+				provide: {
+					translator: { translate }
+				}
+			}
+		} );
+
+		expect( wrapper.text() ).toStrictEqual( label );
+	} );
+
+	it( 'shows the correct label when amount is 10 or higher', () => {
+		formModel.receipt.value = false;
+		formModel.paymentMethod.value = PaymentMethods.PAYPAL.value;
+		formModel.addressType.value = AddressTypes.ANONYMOUS.value;
+		formModel.customAmount.value = '10';
+
+		const wrapper = shallowMount( MainDonationFormPaymentsAndReceiptButton, {
+			props: {
+				paymentLabelsBelow: 10
+			},
+			global: {
+				provide: {
+					translator: { translate }
+				}
+			}
+		} );
+
+		expect( wrapper.text() ).toStrictEqual( 'submit-label' );
+	} );
+
+} );
diff --git a/test/banners/desktop/C24_WMDE_Desktop_DE_23/components/MainDonationFormReceiptAboveValue.spec.ts b/test/banners/desktop/C24_WMDE_Desktop_DE_23/components/MainDonationFormReceiptAboveValue.spec.ts
new file mode 100644
index 000000000..fdf8d6dfe
--- /dev/null
+++ b/test/banners/desktop/C24_WMDE_Desktop_DE_23/components/MainDonationFormReceiptAboveValue.spec.ts
@@ -0,0 +1,217 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { mount, VueWrapper } from '@vue/test-utils';
+import DonationForm from '@banners/desktop/C24_WMDE_Desktop_DE_23/components/MainDonationFormReceiptAboveValue.vue';
+import { DonationFormItems } from '@src/utils/FormItemsBuilder/DonationFormItems';
+import { Intervals } from '@src/utils/FormItemsBuilder/fields/Intervals';
+import { PaymentMethods } from '@src/utils/FormItemsBuilder/fields/PaymentMethods';
+import { newDonationFormValidator } from '@src/validation/DonationFormValidator';
+import { useFormModel } from '@src/components/composables/useFormModel';
+import { resetFormModel } from '@test/resetFormModel';
+import { CurrencyEn } from '@src/utils/DynamicContent/formatters/CurrencyEn';
+import { TrackerSpy } from '@test/fixtures/TrackerSpy';
+import { AddressTypes } from '@src/utils/FormItemsBuilder/fields/AddressTypes';
+
+const formItems: DonationFormItems = {
+	addressType: [],
+	amounts: [
+		{ value: '1', label: '€1', className: 'amount-1' },
+		{ value: '5', label: '€5', className: 'amount-5' }
+	],
+	intervals: [ Intervals.ONCE, Intervals.MONTHLY ],
+	paymentMethods: [ PaymentMethods.PAYPAL, PaymentMethods.CREDIT_CARD, PaymentMethods.DIRECT_DEBIT ]
+};
+
+vi.mock( '@src/validation/DonationFormValidator', () => {
+	return {
+		newDonationFormValidator: vi.fn()
+	};
+} );
+
+const formModel = useFormModel();
+const translate = ( key: string ): string => key;
+
+describe( 'MainDonationFormReceiptAboveValue.vue', () => {
+
+	// The model values are in the global scope, and they need to be reset before each test
+	beforeEach( () => resetFormModel( formModel ) );
+
+	const getWrapper = ( showErrorScrollLink: boolean = false ): VueWrapper<any> => {
+		return mount( DonationForm, {
+			props: {
+				showErrorScrollLink,
+				showReceiptCheckboxBelow: 10
+			},
+			global: {
+				mocks: {
+					$translate: translate
+				},
+				provide: {
+					currencyFormatter: new CurrencyEn(),
+					formActions: { donateWithAddressAction: 'https://example.com', donateWithoutAddressAction: 'https://example.com' },
+					formItems: formItems,
+					translator: { translate },
+					tracker: new TrackerSpy()
+				}
+			},
+			attachTo: document.body
+		} );
+	};
+
+	it( 'should clear selected amount when input field is focused', () => {
+		const input = getWrapper().find<HTMLInputElement>( '.wmde-banner-select-custom-amount-input' );
+		formModel.selectedAmount.value = '100';
+
+		input.trigger( 'focus' );
+
+		expect( formModel.selectedAmount.value ).toBe( '' );
+	} );
+
+	it( 'should format custom amount when custom amount input field is blurred and it has a value', async () => {
+		const input = getWrapper().find<HTMLInputElement>( '.wmde-banner-select-custom-amount-input' );
+
+		await input.setValue( '3,14' );
+		await input.trigger( 'blur' );
+
+		expect( input.element.value ).toBe( '3.14' );
+	} );
+
+	it( 'should not format custom amount to 0.00 when input field is blurred and is blank', async () => {
+		const input = getWrapper().find<HTMLInputElement>( '.wmde-banner-select-custom-amount-input' );
+
+		await input.trigger( 'blur' );
+
+		expect( input.element.value ).toBe( '' );
+	} );
+
+	it( 'shows invalid fields on submit when fields are invalid', async () => {
+		vi.mocked( newDonationFormValidator ).mockReturnValue( { validate: () => false } );
+		const wrapper = getWrapper();
+
+		await wrapper.trigger( 'submit' );
+
+		expect( wrapper.find( '.select-interval .wmde-banner-select-group-error-message' ).exists() ).toBeTruthy();
+		expect( wrapper.find( '.select-amount .wmde-banner-select-group-error-message' ).exists() ).toBeTruthy();
+		expect( wrapper.find( '.select-payment-method .wmde-banner-select-group-error-message' ).exists() ).toBeTruthy();
+	} );
+
+	it( 'shows the error scroll link when form fields are invalid', async () => {
+		vi.mocked( newDonationFormValidator ).mockReturnValue( { validate: () => false } );
+		const wrapper = getWrapper( true );
+
+		await wrapper.trigger( 'submit' );
+
+		expect( wrapper.find( '.wmde-banner-form-button-error' ).exists() ).toBeTruthy();
+	} );
+
+	it( 'emits an event on submit when fields are valid', () => {
+		vi.mocked( newDonationFormValidator ).mockReturnValue( { validate: () => true } );
+		const wrapper = getWrapper();
+
+		wrapper.trigger( 'submit' );
+
+		expect( wrapper.emitted( 'submit' ).length ).toBe( 1 );
+	} );
+
+	it( 'does not emit our own submit event when form fields are invalid', () => {
+		vi.mocked( newDonationFormValidator ).mockReturnValue( { validate: () => false } );
+		const wrapper = getWrapper();
+
+		wrapper.trigger( 'submit' );
+
+		expect( wrapper.emitted( 'submit' ) ).toBeUndefined();
+	} );
+
+	it( 'passes payment label slots dynamically to select group', () => {
+		const wrapper = mount( DonationForm, {
+			props: {
+				showErrorScrollLink: false,
+				showReceiptCheckboxBelow: 10
+			},
+			slots: {
+				'label-payment-ppl': `<template #label-payment-ppl><span class="custom-label-paypal"></span></template>`,
+				'label-payment-mcp': `<template #label-payment-mcp><span class="custom-label-credit-cards"></span></template>`
+			},
+			global: {
+				mocks: {
+					$translate: translate
+				},
+				provide: {
+					currencyFormatter: new CurrencyEn(),
+					formActions: { donateWithAddressAction: 'https://example.com', donateWithoutAddressAction: 'https://example.com' },
+					formItems: formItems,
+					translator: { translate },
+					tracker: new TrackerSpy()
+				}
+			}
+		} );
+
+		expect( wrapper.find( '.custom-label-paypal' ).exists() ).toBeTruthy();
+		expect( wrapper.find( '.custom-label-credit-cards' ).exists() ).toBeTruthy();
+	} );
+
+	it( 'sets the address type to anonymous when mounted', async () => {
+		expect( formModel.addressType.value ).toStrictEqual( '' );
+		getWrapper();
+		expect( formModel.addressType.value ).toStrictEqual( AddressTypes.ANONYMOUS.value );
+	} );
+
+	it( 'shows the donation receipt checkbox', async () => {
+		const wrapper = getWrapper();
+
+		expect( wrapper.find( '.wmde-banner-form-donation-receipt-checkbox' ).exists() ).toBeFalsy();
+
+		await wrapper.find( '.interval-0 .wmde-banner-select-group-input' ).trigger( 'change' );
+		await wrapper.find( '.amount-5 .wmde-banner-select-group-input' ).trigger( 'change' );
+		await wrapper.find( '.payment-ppl .wmde-banner-select-group-input' ).trigger( 'change' );
+
+		expect( wrapper.find( '.wmde-banner-form-donation-receipt-checkbox' ).exists() ).toBeTruthy();
+	} );
+
+	it( 'does not show the donation receipt checkbox when address type is direct debit', async () => {
+		const wrapper = getWrapper();
+
+		expect( wrapper.find( '.wmde-banner-form-donation-receipt-checkbox' ).exists() ).toBeFalsy();
+
+		await wrapper.find( '.interval-0 .wmde-banner-select-group-input' ).trigger( 'change' );
+		await wrapper.find( '.amount-5 .wmde-banner-select-group-input' ).trigger( 'change' );
+		await wrapper.find( '.payment-bez .wmde-banner-select-group-input' ).trigger( 'change' );
+
+		expect( wrapper.find( '.wmde-banner-form-donation-receipt-checkbox' ).exists() ).toBeFalsy();
+	} );
+
+	it( 'updates the form model receipt', async () => {
+		const wrapper = getWrapper();
+
+		await wrapper.find( '.interval-0 .wmde-banner-select-group-input' ).trigger( 'change' );
+		await wrapper.find( '.amount-5 .wmde-banner-select-group-input' ).trigger( 'change' );
+		await wrapper.find( '.payment-ppl .wmde-banner-select-group-input' ).trigger( 'change' );
+
+		expect( formModel.receipt.value ).toStrictEqual( false );
+
+		await wrapper.find( '#wmde-banner-form-donation-receipt' ).trigger( 'click' );
+
+		expect( formModel.receipt.value ).toStrictEqual( true );
+
+		await wrapper.find( '#wmde-banner-form-donation-receipt' ).trigger( 'click' );
+
+		expect( formModel.receipt.value ).toStrictEqual( false );
+	} );
+
+	it( 'clears the receipt option when radio field becomes hidden', async () => {
+		const wrapper = getWrapper();
+
+		await wrapper.find( '.interval-0 .wmde-banner-select-group-input' ).trigger( 'change' );
+		await wrapper.find( '.amount-5 .wmde-banner-select-group-input' ).trigger( 'change' );
+		await wrapper.find( '.payment-ppl .wmde-banner-select-group-input' ).trigger( 'change' );
+
+		expect( formModel.receipt.value ).toStrictEqual( false );
+
+		await wrapper.find( '#wmde-banner-form-donation-receipt' ).trigger( 'click' );
+
+		expect( formModel.receipt.value ).toStrictEqual( true );
+
+		await wrapper.find( '.payment-bez .wmde-banner-select-group-input' ).trigger( 'change' );
+
+		expect( formModel.receipt.value ).toStrictEqual( false );
+	} );
+} );
diff --git a/test/resetFormModel.ts b/test/resetFormModel.ts
index 5cc1393b1..87e1e0108 100644
--- a/test/resetFormModel.ts
+++ b/test/resetFormModel.ts
@@ -12,6 +12,6 @@ export function resetFormModel( formModel: FormModel ): void {
 	formModel.paymentMethodValidity.value = Validity.Unset;
 	formModel.addressType.value = '';
 	formModel.addressTypeValidity.value = Validity.Unset;
-	formModel.receipt.value = false;
+	formModel.receipt.value = null;
 	formModel.hasTransactionFee.value = false;
 }