diff --git a/banners/desktop/C24_WMDE_Desktop_DE_14/banner_ctrl.ts b/banners/desktop/C24_WMDE_Desktop_DE_14/banner_ctrl.ts
new file mode 100644
index 000000000..512ed5512
--- /dev/null
+++ b/banners/desktop/C24_WMDE_Desktop_DE_14/banner_ctrl.ts
@@ -0,0 +1,73 @@
+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';
+
+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.mount( page.getBannerContainer() );
diff --git a/banners/desktop/C24_WMDE_Desktop_DE_14/banner_var.ts b/banners/desktop/C24_WMDE_Desktop_DE_14/banner_var.ts
new file mode 100644
index 000000000..5e239316f
--- /dev/null
+++ b/banners/desktop/C24_WMDE_Desktop_DE_14/banner_var.ts
@@ -0,0 +1,79 @@
+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_var';
+import { createFallbackDonationURL } from '@src/createFallbackDonationURL';
+import { LocalStorageCloseTracker } from '@src/utils/LocalCloseTracker';
+
+// Locale-specific imports
+import messages from './messages_var';
+import { LocaleFactoryDe } from '@src/utils/LocaleFactory/LocaleFactoryDe';
+
+// Channel specific form setup
+import { createFormItems } from './form_items';
+import { createFormActions } from '@src/createFormActions';
+import { WindowTimer } from '@src/utils/Timer';
+import { WindowPageScroller } from '@src/utils/PageScroller/WindowPageScroller';
+
+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(),
+		pageScroller: new WindowPageScroller(),
+		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.mount( page.getBannerContainer() );
diff --git a/banners/desktop/C24_WMDE_Desktop_DE_14/components/BannerCtrl.vue b/banners/desktop/C24_WMDE_Desktop_DE_14/components/BannerCtrl.vue
new file mode 100644
index 000000000..54ea355f0
--- /dev/null
+++ b/banners/desktop/C24_WMDE_Desktop_DE_14/components/BannerCtrl.vue
@@ -0,0 +1,165 @@
+<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-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>
+				<ProgressBar amount-to-show-on-right="TARGET"/>
+			</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="isFundsModalVisible = true"
+					@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="isFundsModalVisible = false"
+		>
+			<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 ProgressBar from '@src/components/ProgressBar/ProgressBar.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';
+
+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' ] );
+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 ) );
+}
+
+</script>
diff --git a/banners/desktop/C24_WMDE_Desktop_DE_14/components/BannerVar.vue b/banners/desktop/C24_WMDE_Desktop_DE_14/components/BannerVar.vue
new file mode 100644
index 000000000..3e7c152ad
--- /dev/null
+++ b/banners/desktop/C24_WMDE_Desktop_DE_14/components/BannerVar.vue
@@ -0,0 +1,207 @@
+<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-text>
+				<BannerText
+					:play-live-text="contentState === ContentStates.Main"
+					@showReasonsToDonate="onShowReasonsToDonate"
+				/>
+			</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"
+							:play-live-text="contentState === ContentStates.Main"
+							@showReasonsToDonate="onShowReasonsToDonate"
+						/>
+					</template>
+
+				</KeenSlider>
+			</template>
+
+			<template #progress>
+				<ProgressBar amount-to-show-on-right="TARGET"/>
+			</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="isFundsModalVisible = true"
+					@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="isFundsModalVisible = false"
+		>
+			<template #infographic>
+				<WMDEFundsForwardingDE/>
+			</template>
+		</FundsModal>
+
+		<ReasonsToDonate
+			:visible="isReasonsToDonateVisible"
+			@accordionItemClicked="onReasonsToDonateAccordionItemClicked"
+			@callToActionClicked="onReasonsToDonateCallToActionClicked"
+			@hide="onHideReasonsToDonate"
+		/>
+	</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/BannerTextVar.vue';
+import BannerSlides from '../content/BannerSlidesVar.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 ProgressBar from '@src/components/ProgressBar/ProgressBar.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 { ReasonsToDonateShownEvent } from '@src/tracking/events/ReasonsToDonateShownEvent';
+import ReasonsToDonate from '@src/components/ReasonsToDonate/ReasonsToDonate.vue';
+import { ReasonsToDonateItemClickedEvent } from '@src/tracking/events/ReasonsToDonateItemClickedEvent';
+import { PageScroller } from '@src/utils/PageScroller/PageScroller';
+import { ReasonsToDonateCTAClickedEvent } from '@src/tracking/events/ReasonsToDonateCTAClickedEvent';
+
+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;
+	pageScroller: PageScroller;
+	remainingImpressions: number;
+	localCloseTracker: LocalCloseTracker;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits( [ 'bannerClosed', 'bannerContentChanged', 'reasonsToDonate' ] );
+useBannerHider( 800, emit );
+
+const tracker = inject<Tracker>( 'tracker' );
+
+const isFundsModalVisible = ref<boolean>( false );
+const isReasonsToDonateVisible = 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 ) );
+	}
+};
+
+const onShowReasonsToDonate = (): void => {
+	isReasonsToDonateVisible.value = true;
+	tracker.trackEvent( new ReasonsToDonateShownEvent() );
+};
+const onReasonsToDonateAccordionItemClicked = ( payload: { itemNumber: string } ): void => {
+	tracker.trackEvent( new ReasonsToDonateItemClickedEvent( payload.itemNumber ) );
+};
+
+const onHideReasonsToDonate = (): void => {
+	isReasonsToDonateVisible.value = false;
+};
+
+const onReasonsToDonateCallToActionClicked = (): void => {
+	tracker.trackEvent( new ReasonsToDonateCTAClickedEvent() );
+
+	contentState.value = ContentStates.Main;
+
+	props.pageScroller.scrollIntoView( '.wmde-banner-form' );
+	isReasonsToDonateVisible.value = false;
+};
+
+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 ) );
+}
+
+</script>
diff --git a/banners/desktop/C24_WMDE_Desktop_DE_14/components/FallbackBanner.vue b/banners/desktop/C24_WMDE_Desktop_DE_14/components/FallbackBanner.vue
new file mode 100644
index 000000000..6550131fa
--- /dev/null
+++ b/banners/desktop/C24_WMDE_Desktop_DE_14/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/>
+				<ProgressBar amount-to-show-on-right="TARGET"/>
+			</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 ProgressBar from '@src/components/ProgressBar/ProgressBar.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_14/components/MainBanner.vue b/banners/desktop/C24_WMDE_Desktop_DE_14/components/MainBanner.vue
new file mode 100644
index 000000000..ab097bf67
--- /dev/null
+++ b/banners/desktop/C24_WMDE_Desktop_DE_14/components/MainBanner.vue
@@ -0,0 +1,44 @@
+tart<template>
+	<div class="wmde-banner-main">
+		<slot name="close-button"/>
+		<div class="wmde-banner-content">
+			<div class="wmde-banner-column-left">
+				<slot name="banner-text" v-if="onLargeScreen"/>
+				<slot name="banner-slides" v-else :play="slideshowShouldPlay"/>
+				<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_14/content/BannerSlides.vue b/banners/desktop/C24_WMDE_Desktop_DE_14/content/BannerSlides.vue
new file mode 100644
index 000000000..46790f372
--- /dev/null
+++ b/banners/desktop/C24_WMDE_Desktop_DE_14/content/BannerSlides.vue
@@ -0,0 +1,63 @@
+<template>
+	<KeenSliderSlide :is-current="currentSlide === 0">
+		<div class="wmde-banner-message-title">
+			<InfoIcon fill="#990000" width="21.5" height="21.5" type="italic"/>
+			<strong>&nbsp;Wikipedia ist unverkäuflich</strong>
+		</div>
+		<div class="wmde-banner-message-date">
+			<strong>{{ liveDateAndTime.currentDate }}, {{ liveDateAndTime.currentTime }} - An alle, die Wikipedia in
+				Deutschland nutzen</strong>
+		</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.
+		</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, onMounted, onUnmounted } from 'vue';
+import KeenSliderSlide from '@src/components/Slider/KeenSliderSlide.vue';
+import { useLiveDateAndTime } from '@src/components/composables/useLiveDateAndTime';
+import AnimatedText from '@src/components/AnimatedText/AnimatedText.vue';
+import InfoIcon from '@src/components/Icons/InfoIcon.vue';
+
+interface Props {
+	currentSlide: number
+}
+
+defineProps<Props>();
+
+const {
+	currentDayName,
+	getCurrentDateAndTime,
+	currentDate,
+	campaignDaySentence,
+	visitorsVsDonorsSentence,
+	averageDonation
+} = inject<DynamicContent>( 'dynamicCampaignText' );
+
+const { liveDateAndTime, startTimer, stopTimer } = useLiveDateAndTime( getCurrentDateAndTime );
+onMounted( startTimer );
+onUnmounted( stopTimer );
+
+</script>
diff --git a/banners/desktop/C24_WMDE_Desktop_DE_14/content/BannerSlidesVar.vue b/banners/desktop/C24_WMDE_Desktop_DE_14/content/BannerSlidesVar.vue
new file mode 100644
index 000000000..a648e683b
--- /dev/null
+++ b/banners/desktop/C24_WMDE_Desktop_DE_14/content/BannerSlidesVar.vue
@@ -0,0 +1,78 @@
+<template>
+	<KeenSliderSlide :is-current="currentSlide === 0">
+		<div class="wmde-banner-message-title">
+			<InfoIcon fill="#990000" width="21.5" height="21.5" type="italic"/>
+			<strong>&nbsp;Wikipedia ist unverkäuflich</strong>
+		</div>
+		<div class="wmde-banner-message-date">
+			<strong>{{ liveDateAndTime.currentDate }}, {{ liveDateAndTime.currentTime }} - An alle, die Wikipedia in
+				Deutschland nutzen</strong>
+		</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.
+		</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. Falls Sie zögern,
+			<button
+				class="wmde-banner-reasons-to-donate-link"
+				@click.prevent="$emit( 'showReasonsToDonate' )">
+				hier sind 10 gute Gründe
+			</button>
+			für eine Spende. Vielen Dank!
+		</p>
+	</KeenSliderSlide>
+</template>
+
+<script setup lang="ts">
+import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
+import { inject, onMounted, onUnmounted, watch } from 'vue';
+import KeenSliderSlide from '@src/components/Slider/KeenSliderSlide.vue';
+import { useLiveDateAndTime } from '@src/components/composables/useLiveDateAndTime';
+import AnimatedText from '@src/components/AnimatedText/AnimatedText.vue';
+import InfoIcon from '@src/components/Icons/InfoIcon.vue';
+
+interface Props {
+	playLiveText: boolean;
+	currentSlide: number
+}
+defineEmits( [ 'showReasonsToDonate' ] );
+
+const props = defineProps<Props>();
+
+const {
+	currentDayName,
+	getCurrentDateAndTime,
+	currentDate,
+	campaignDaySentence,
+	visitorsVsDonorsSentence,
+	averageDonation
+} = inject<DynamicContent>( 'dynamicCampaignText' );
+
+const { liveDateAndTime, startTimer, stopTimer } = useLiveDateAndTime( getCurrentDateAndTime );
+
+watch( () => props.playLiveText, ( shouldPlay: boolean ) => {
+	if ( !shouldPlay ) {
+		stopTimer();
+	}
+} );
+
+onMounted( startTimer );
+onUnmounted( stopTimer );
+
+</script>
diff --git a/banners/desktop/C24_WMDE_Desktop_DE_14/content/BannerText.vue b/banners/desktop/C24_WMDE_Desktop_DE_14/content/BannerText.vue
new file mode 100644
index 000000000..c004e00e4
--- /dev/null
+++ b/banners/desktop/C24_WMDE_Desktop_DE_14/content/BannerText.vue
@@ -0,0 +1,47 @@
+<template>
+	<div class="wmde-banner-message">
+		<div>
+			<div class="wmde-banner-message-title">
+				<InfoIcon fill="#990000" width="21.5" height="21.5" type="italic"/>
+				<strong>&nbsp;Wikipedia ist unverkäuflich</strong>
+			</div>
+			<div class="wmde-banner-message-date">
+				<strong>{{ liveDateAndTime.currentDate }}, {{ liveDateAndTime.currentTime }} - An alle, die Wikipedia
+					in Deutschland nutzen</strong>
+			</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, onMounted, onUnmounted } from 'vue';
+import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
+import AnimatedText from '@src/components/AnimatedText/AnimatedText.vue';
+import { useLiveDateAndTime } from '@src/components/composables/useLiveDateAndTime';
+import InfoIcon from '@src/components/Icons/InfoIcon.vue';
+
+const {
+	currentDayName,
+	getCurrentDateAndTime,
+	currentDate,
+	campaignDaySentence,
+	visitorsVsDonorsSentence,
+	averageDonation
+} = inject<DynamicContent>( 'dynamicCampaignText' );
+
+const { liveDateAndTime, startTimer, stopTimer } = useLiveDateAndTime( getCurrentDateAndTime );
+onMounted( startTimer );
+onUnmounted( stopTimer );
+
+</script>
diff --git a/banners/desktop/C24_WMDE_Desktop_DE_14/content/BannerTextVar.vue b/banners/desktop/C24_WMDE_Desktop_DE_14/content/BannerTextVar.vue
new file mode 100644
index 000000000..1257113f7
--- /dev/null
+++ b/banners/desktop/C24_WMDE_Desktop_DE_14/content/BannerTextVar.vue
@@ -0,0 +1,64 @@
+<template>
+	<div class="wmde-banner-message">
+		<div>
+			<div class="wmde-banner-message-title">
+				<InfoIcon fill="#990000" width="21.5" height="21.5" type="italic"/>
+				<strong>&nbsp;Wikipedia ist unverkäuflich</strong>
+			</div>
+			<div class="wmde-banner-message-date">
+				<strong>{{ liveDateAndTime.currentDate }}, {{ liveDateAndTime.currentTime }} - An alle, die Wikipedia
+					in Deutschland nutzen</strong>
+			</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. Falls Sie zögern,
+				<button
+					class="wmde-banner-reasons-to-donate-link"
+					@click.prevent="$emit( 'showReasonsToDonate' )">
+					hier sind 10 gute Gründe
+				</button>
+				für eine Spende. Vielen Dank!
+			</p>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { inject, onMounted, onUnmounted, watch } from 'vue';
+import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
+import AnimatedText from '@src/components/AnimatedText/AnimatedText.vue';
+import { useLiveDateAndTime } from '@src/components/composables/useLiveDateAndTime';
+import InfoIcon from '@src/components/Icons/InfoIcon.vue';
+
+interface Props {
+	playLiveText: boolean;
+}
+const props = defineProps<Props>();
+
+const {
+	currentDayName,
+	getCurrentDateAndTime,
+	currentDate,
+	campaignDaySentence,
+	visitorsVsDonorsSentence,
+	averageDonation
+} = inject<DynamicContent>( 'dynamicCampaignText' );
+
+const { liveDateAndTime, startTimer, stopTimer } = useLiveDateAndTime( getCurrentDateAndTime );
+
+watch( () => props.playLiveText, ( shouldPlay: boolean ) => {
+	if ( shouldPlay ) {
+		startTimer();
+	} else {
+		stopTimer();
+	}
+} );
+
+onMounted( startTimer );
+onUnmounted( stopTimer );
+</script>
diff --git a/banners/desktop/C24_WMDE_Desktop_DE_14/content/FallbackSlides.vue b/banners/desktop/C24_WMDE_Desktop_DE_14/content/FallbackSlides.vue
new file mode 100644
index 000000000..b5e4af29d
--- /dev/null
+++ b/banners/desktop/C24_WMDE_Desktop_DE_14/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_14/content/FallbackText.vue b/banners/desktop/C24_WMDE_Desktop_DE_14/content/FallbackText.vue
new file mode 100644
index 000000000..5c14762e7
--- /dev/null
+++ b/banners/desktop/C24_WMDE_Desktop_DE_14/content/FallbackText.vue
@@ -0,0 +1,25 @@
+<template>
+	<div class="wmde-banner-message">
+		<div>
+			<p>
+				<InfoIcon fill="#990a00"/> <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 InfoIcon from '@src/components/Icons/InfoIcon.vue';
+
+const {
+	campaignDaySentence
+}: DynamicContent = inject( 'dynamicCampaignText' );
+
+</script>
diff --git a/banners/desktop/C24_WMDE_Desktop_DE_14/event_map.ts b/banners/desktop/C24_WMDE_Desktop_DE_14/event_map.ts
new file mode 100644
index 000000000..88eb4714e
--- /dev/null
+++ b/banners/desktop/C24_WMDE_Desktop_DE_14/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_14/event_map_var.ts b/banners/desktop/C24_WMDE_Desktop_DE_14/event_map_var.ts
new file mode 100644
index 000000000..20ef6d038
--- /dev/null
+++ b/banners/desktop/C24_WMDE_Desktop_DE_14/event_map_var.ts
@@ -0,0 +1,54 @@
+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';
+import { ReasonsToDonateShownEvent } from '@src/tracking/events/ReasonsToDonateShownEvent';
+import { ReasonsToDonateCTAClickedEvent } from '@src/tracking/events/ReasonsToDonateCTAClickedEvent';
+import { ReasonsToDonateItemClickedEvent } from '@src/tracking/events/ReasonsToDonateItemClickedEvent';
+
+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 )
+	],
+	[ ReasonsToDonateShownEvent.EVENT_NAME, ( e: ReasonsToDonateShownEvent ): WMDELegacyBannerEvent => new WMDELegacyBannerEvent( e.eventName, 1 ) ],
+	[ ReasonsToDonateItemClickedEvent.EVENT_NAME, ( e: ReasonsToDonateItemClickedEvent ): WMDELegacyBannerEvent =>
+		new WMDELegacyBannerEvent( e.eventName + ( e.userChoice !== '' ? `-${e.userChoice}` : '' ), 1 )
+	],
+	[ ReasonsToDonateCTAClickedEvent.EVENT_NAME, ( e: ReasonsToDonateCTAClickedEvent ): WMDELegacyBannerEvent => new WMDELegacyBannerEvent( e.eventName, 1 ) ]
+] );
diff --git a/banners/desktop/C24_WMDE_Desktop_DE_14/form_items.ts b/banners/desktop/C24_WMDE_Desktop_DE_14/form_items.ts
new file mode 100644
index 000000000..b70650d19
--- /dev/null
+++ b/banners/desktop/C24_WMDE_Desktop_DE_14/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_14/messages.ts b/banners/desktop/C24_WMDE_Desktop_DE_14/messages.ts
new file mode 100644
index 000000000..8bb2ea2d4
--- /dev/null
+++ b/banners/desktop/C24_WMDE_Desktop_DE_14/messages.ts
@@ -0,0 +1,32 @@
+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';
+
+const messages: TranslationMessages = {
+	...CustomAmountFormDe,
+	...DynamicCampaignTextDe,
+	...UpgradeToYearlyDe,
+	...AddressFormDe,
+	...FooterDe,
+	...MainDonationFormDe,
+	...AlreadyDonatedModal,
+	...FallbackBanner,
+	...SoftCloseDe,
+	'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'
+};
+
+export default messages;
diff --git a/banners/desktop/C24_WMDE_Desktop_DE_14/messages_var.ts b/banners/desktop/C24_WMDE_Desktop_DE_14/messages_var.ts
new file mode 100644
index 000000000..009333f1d
--- /dev/null
+++ b/banners/desktop/C24_WMDE_Desktop_DE_14/messages_var.ts
@@ -0,0 +1,34 @@
+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 ReasonsToDonate from '@src/components/ReasonsToDonate/messages/ReasonsToDonate.de';
+
+const messages: TranslationMessages = {
+	...CustomAmountFormDe,
+	...DynamicCampaignTextDe,
+	...UpgradeToYearlyDe,
+	...AddressFormDe,
+	...FooterDe,
+	...MainDonationFormDe,
+	...AlreadyDonatedModal,
+	...FallbackBanner,
+	...SoftCloseDe,
+	...ReasonsToDonate,
+	'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'
+};
+
+export default messages;
diff --git a/banners/desktop/C24_WMDE_Desktop_DE_14/styles/Banner.scss b/banners/desktop/C24_WMDE_Desktop_DE_14/styles/Banner.scss
new file mode 100644
index 000000000..1e7d13842
--- /dev/null
+++ b/banners/desktop/C24_WMDE_Desktop_DE_14/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_14/styles/FallbackBanner.scss b/banners/desktop/C24_WMDE_Desktop_DE_14/styles/FallbackBanner.scss
new file mode 100644
index 000000000..a0d40542d
--- /dev/null
+++ b/banners/desktop/C24_WMDE_Desktop_DE_14/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;
+			border: 4px solid var( --fallback-message-border );
+			border-radius: 4px;
+			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 0;
+			color: var( --fallback-message-color );
+			background-color: var( --fallback-message-background );
+			margin: 15px;
+
+			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_14/styles/MainBanner.scss b/banners/desktop/C24_WMDE_Desktop_DE_14/styles/MainBanner.scss
new file mode 100644
index 000000000..a0bcd9bca
--- /dev/null
+++ b/banners/desktop/C24_WMDE_Desktop_DE_14/styles/MainBanner.scss
@@ -0,0 +1,53 @@
+$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 {
+		padding: 3px 15px;
+		color: var( --message-color );
+		background-color: var( --message-background );
+		border: none;
+		border-radius: 9px;
+		margin-bottom: 15px;
+	}
+
+	&-column-left {
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		flex: 1 1 auto;
+		margin-bottom: 0;
+		overflow-y: hidden;
+		margin-right: 30px;
+		padding: 0;
+		border: none;
+	}
+
+	&-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_14/styles/styles.scss b/banners/desktop/C24_WMDE_Desktop_DE_14/styles/styles.scss
new file mode 100644
index 000000000..ff644c870
--- /dev/null
+++ b/banners/desktop/C24_WMDE_Desktop_DE_14/styles/styles.scss
@@ -0,0 +1,54 @@
+// This is the file where we import the theme-specific component styles
+@use '../../../../src/themes/Svingle/swatches/skin_default' with (
+	$slider: true,
+	$select-group: true,
+	$upgrade-to-yearly: true,
+	$fallback-banner: true,
+	$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/Svingle/defaults';
+@use 'src/themes/Svingle/ButtonClose/ButtonClose';
+@use 'src/themes/Svingle/ProgressBar/ProgressBar';
+@use 'src/themes/Svingle/DonationForm/DonationForm';
+@use 'src/themes/Svingle/DonationForm/MultiStepDonation';
+@use 'src/themes/Svingle/DonationForm/SubComponents/SelectGroup';
+@use 'src/themes/Svingle/DonationForm/SubComponents/SelectGroupRadios' with (
+	$font-size: 14px
+);
+@use 'src/themes/Svingle/DonationForm/SubComponents/SelectCustomAmountRadio' with (
+	$font-size: 14px
+);
+@use 'src/themes/Svingle/DonationForm/SubComponents/SmsBox';
+@use 'src/themes/Svingle/DonationForm/Forms/MainDonationForm';
+@use 'src/themes/Svingle/DonationForm/Forms/UpgradeToYearlyButtonForm' with (
+	$font-size: 14px
+);
+@use 'src/themes/Svingle/DonationForm/Forms/CustomAmountForm';
+@use 'src/themes/Svingle/Footer/FooterAlreadyDonated';
+@use 'src/themes/Svingle/Footer/SelectionInput';
+@use 'src/themes/Svingle/Message/Message';
+@use 'src/themes/Svingle/SoftClose/SoftClose';
+@use 'src/themes/Svingle/Slider/KeenSlider';
+
+/**
+ * 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';
+@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_14/styles/styles_var.scss b/banners/desktop/C24_WMDE_Desktop_DE_14/styles/styles_var.scss
new file mode 100644
index 000000000..d0f316b14
--- /dev/null
+++ b/banners/desktop/C24_WMDE_Desktop_DE_14/styles/styles_var.scss
@@ -0,0 +1,56 @@
+// This is the file where we import the theme-specific component styles
+@use '../../../../src/themes/Svingle/swatches/skin_default' with (
+	$slider: true,
+	$select-group: true,
+	$upgrade-to-yearly: true,
+	$fallback-banner: true,
+	$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/Svingle/defaults';
+@use 'src/themes/Svingle/ButtonClose/ButtonClose';
+@use 'src/themes/Svingle/ProgressBar/ProgressBar';
+@use 'src/themes/Svingle/DonationForm/DonationForm';
+@use 'src/themes/Svingle/DonationForm/MultiStepDonation';
+@use 'src/themes/Svingle/DonationForm/SubComponents/SelectGroup';
+@use 'src/themes/Svingle/DonationForm/SubComponents/SelectGroupRadios' with (
+	$font-size: 14px
+);
+@use 'src/themes/Svingle/DonationForm/SubComponents/SelectCustomAmountRadio' with (
+	$font-size: 14px
+);
+@use 'src/themes/Svingle/DonationForm/SubComponents/SmsBox';
+@use 'src/themes/Svingle/DonationForm/Forms/MainDonationForm';
+@use 'src/themes/Svingle/DonationForm/Forms/UpgradeToYearlyButtonForm' with (
+	$font-size: 14px
+);
+@use 'src/themes/Svingle/DonationForm/Forms/CustomAmountForm';
+@use 'src/themes/Svingle/Footer/FooterAlreadyDonated';
+@use 'src/themes/Svingle/Footer/SelectionInput';
+@use 'src/themes/Svingle/Message/Message';
+@use 'src/themes/Svingle/SoftClose/SoftClose';
+@use 'src/themes/Svingle/Slider/KeenSlider';
+
+/**
+ * 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';
+@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;
+@use 'src/components/ReasonsToDonate/styles/swatches/skin_default' as reasons-default;
+@use 'src/components/ReasonsToDonate/styles/ReasonsToDonate';
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_09/banner_ctrl.ts b/banners/mobile/C24_WMDE_Mobile_DE_09/banner_ctrl.ts
new file mode 100644
index 000000000..9bd77f7f5
--- /dev/null
+++ b/banners/mobile/C24_WMDE_Mobile_DE_09/banner_ctrl.ts
@@ -0,0 +1,69 @@
+import { createVueApp } from '@src/createVueApp';
+
+import './styles/styles.scss';
+
+import BannerConductor from '@src/components/BannerConductor/BannerConductor.vue';
+import Banner from './components/BannerCtrl.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 { WindowPageScroller } from '@src/utils/PageScroller/WindowPageScroller';
+import { LegacyTrackerWPORG } from '@src/tracking/LegacyTrackerWPORG';
+import eventMappings from './event_map';
+import messages from './messages';
+import { LocaleFactoryDe } from '@src/utils/LocaleFactory/LocaleFactoryDe';
+import { createFormItems } from './form_items';
+import { createFormActions } from '@src/createFormActions';
+import { LocalStorageCloseTracker } from '@src/utils/LocalCloseTracker';
+import { WindowTimer } from '@src/utils/Timer';
+
+const localeFactory = new LocaleFactoryDe();
+const translator = new Translator( messages );
+const mediaWiki = new WindowMediaWiki();
+const page = new PageWPORG( mediaWiki, ( new SkinFactory( mediaWiki ) ).getSkin(), new WindowSizeIssueChecker() );
+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(),
+		pageScroller: new WindowPageScroller(),
+		remainingImpressions: impressionCount.getRemainingImpressions( page.getMaxBannerImpressions( 'mobile' ) ),
+		localCloseTracker: new LocalStorageCloseTracker()
+	},
+	resizeHandler: new WindowResizeHandler(),
+	banner: Banner,
+	impressionCount
+} );
+
+app.use( TranslationPlugin, translator );
+app.use( DynamicTextPlugin, {
+	campaignParameters: page.getCampaignParameters(),
+	date: new Date(),
+	formatters: localeFactory.getFormatters(),
+	impressionCount,
+	translator,
+	urgencyMessageDaysLeft: 45
+} );
+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.mount( page.getBannerContainer() );
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_09/banner_var.ts b/banners/mobile/C24_WMDE_Mobile_DE_09/banner_var.ts
new file mode 100644
index 000000000..37b018974
--- /dev/null
+++ b/banners/mobile/C24_WMDE_Mobile_DE_09/banner_var.ts
@@ -0,0 +1,69 @@
+import { createVueApp } from '@src/createVueApp';
+
+import './styles/styles_var.scss';
+
+import BannerConductor from '@src/components/BannerConductor/BannerConductor.vue';
+import Banner from './components/BannerVar.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 { WindowPageScroller } from '@src/utils/PageScroller/WindowPageScroller';
+import { LegacyTrackerWPORG } from '@src/tracking/LegacyTrackerWPORG';
+import eventMappings from './event_map_var';
+import messages from './messages_var';
+import { LocaleFactoryDe } from '@src/utils/LocaleFactory/LocaleFactoryDe';
+import { createFormItems } from './form_items';
+import { createFormActions } from '@src/createFormActions';
+import { LocalStorageCloseTracker } from '@src/utils/LocalCloseTracker';
+import { WindowTimer } from '@src/utils/Timer';
+
+const localeFactory = new LocaleFactoryDe();
+const translator = new Translator( messages );
+const mediaWiki = new WindowMediaWiki();
+const page = new PageWPORG( mediaWiki, ( new SkinFactory( mediaWiki ) ).getSkin(), new WindowSizeIssueChecker() );
+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(),
+		pageScroller: new WindowPageScroller(),
+		remainingImpressions: impressionCount.getRemainingImpressions( page.getMaxBannerImpressions( 'mobile' ) ),
+		localCloseTracker: new LocalStorageCloseTracker()
+	},
+	resizeHandler: new WindowResizeHandler(),
+	banner: Banner,
+	impressionCount
+} );
+
+app.use( TranslationPlugin, translator );
+app.use( DynamicTextPlugin, {
+	campaignParameters: page.getCampaignParameters(),
+	date: new Date(),
+	formatters: localeFactory.getFormatters(),
+	impressionCount,
+	translator,
+	urgencyMessageDaysLeft: 45
+} );
+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.mount( page.getBannerContainer() );
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_09/components/BannerCtrl.vue b/banners/mobile/C24_WMDE_Mobile_DE_09/components/BannerCtrl.vue
new file mode 100644
index 000000000..1191153ce
--- /dev/null
+++ b/banners/mobile/C24_WMDE_Mobile_DE_09/components/BannerCtrl.vue
@@ -0,0 +1,224 @@
+<template>
+	<div class="wmde-banner-wrapper" :class="contentState">
+		<MiniBanner
+			@close="onCloseMiniBanner"
+			@show-full-page-banner="onshowFullPageBanner"
+			@show-full-page-banner-preselected="onshowFullPageBannerPreselected"
+		>
+			<template #banner-slides>
+				<KeenSlider :with-navigation="false" :play="slideshowShouldPlay" :interval="5000">
+
+					<template #slides="{ currentSlide }: any">
+						<BannerSlides :currentSlide="currentSlide" :play-live-text="contentState === ContentStates.Mini"/>
+					</template>
+
+				</KeenSlider>
+			</template>
+		</MiniBanner>
+
+		<FullPageBanner
+			@showFundsModal="isFundsModalVisible = true"
+			@close="() => onClose( 'FullPageBanner', CloseChoices.Hide )"
+		>
+			<template #banner-text>
+				<BannerText :play-live-text="contentState === ContentStates.FullPage"/>
+			</template>
+
+			<template #progress>
+				<ProgressBar amount-to-show-on-right="TARGET"/>
+			</template>
+
+			<template #donation-form="{ formInteraction }: any">
+				<MultiStepDonation :step-controllers="stepControllers" @form-interaction="formInteraction" :page-scroller="pageScroller" :submit-callback="onSubmit">
+
+					<template #[FormStepNames.MainDonationFormStep]="{ pageIndex, submit, isCurrent, previous }: any">
+						<MainDonationForm :page-index="pageIndex" @submit="submit" :is-current="isCurrent" @previous="previous">
+
+							<template #button>
+								<MainDonationFormButton/>
+							</template>
+
+						</MainDonationForm>
+					</template>
+
+					<template #[FormStepNames.UpgradeToYearlyFormStep]="{ pageIndex, submit, isCurrent, previous }: any">
+						<UpgradeToYearlyButtonForm
+							:show-manual-upgrade-option = false
+							:page-index="pageIndex"
+							@submit="submit"
+							:is-current="isCurrent"
+							@previous="previous"
+						>
+							<template #back>
+								<ChevronLeftIcon/> {{ $translate( 'back-button' ) }}
+							</template>
+						</UpgradeToYearlyButtonForm>
+					</template>
+
+				</MultiStepDonation>
+			</template>
+
+			<template #footer>
+				<BannerFooter :show-funds-link="false"/>
+			</template>
+		</FullPageBanner>
+
+		<SoftClose
+			v-if="contentState === ContentStates.SoftClosing"
+			:show-close-icon="true"
+			@close="() => onClose( 'SoftClose', CloseChoices.Close )"
+			@maybe-later="() => onClose( 'SoftClose', CloseChoices.MaybeLater )"
+			@time-out-close="() => onClose( 'SoftClose', CloseChoices.TimeOut )"
+		>
+			<template #buttons="{ timer }: any">
+				<button
+					class="wmde-banner-soft-close-button wmde-banner-soft-close-button-maybe-later"
+					@click="() => onSoftCloseClose( timer, 'SoftClose', CloseChoices.MaybeLater )">
+					{{ $translate( 'soft-close-button-maybe-later' ) }}
+				</button>
+				<button
+					class="wmde-banner-soft-close-button wmde-banner-soft-close-button-close"
+					@click="() => onSoftCloseClose( timer, 'SoftClose', CloseChoices.Close )">
+					{{ $translate( 'soft-close-button-close' ) }}
+				</button>
+				<button
+					class="wmde-banner-soft-close-button wmde-banner-soft-close-button-already-donated"
+					@click="() => onSoftCloseClose( timer, 'SoftClose', CloseChoices.AlreadyDonated )">
+					{{ $translate( 'soft-close-button-already-donated' ) }}
+				</button>
+			</template>
+		</SoftClose>
+
+		<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 { computed, inject, ref, watch } from 'vue';
+import FullPageBanner from './FullPageBanner.vue';
+import MiniBanner from './MiniBanner.vue';
+import FundsModal from '@src/components/UseOfFunds/FundsModal.vue';
+import { UseOfFundsContent as useOfFundsContentInterface } from '@src/domain/UseOfFunds/UseOfFundsContent';
+import { UseOfFundsCloseSources } from '@src/components/UseOfFunds/UseOfFundsCloseSources';
+import { PageScroller } from '@src/utils/PageScroller/PageScroller';
+import MainDonationForm from '@src/components/DonationForm/Forms/MainDonationForm.vue';
+import MultiStepDonation from '@src/components/DonationForm/MultiStepDonation.vue';
+import BannerText from '../content/BannerText.vue';
+import BannerSlides from '../content/BannerSlides.vue';
+import BannerFooter from '@src/components/Footer/BannerFooter.vue';
+import KeenSlider from '@src/components/Slider/KeenSlider.vue';
+import { Tracker } from '@src/tracking/Tracker';
+import { MobileMiniBannerExpandedEvent } from '@src/tracking/events/MobileMiniBannerExpandedEvent';
+import { useFormModel } from '@src/components/composables/useFormModel';
+import UpgradeToYearlyButtonForm from '@src/components/DonationForm/Forms/UpgradeToYearlyButtonForm.vue';
+import ChevronLeftIcon from '@src/components/Icons/ChevronLeftIcon.vue';
+import { CloseChoices } from '@src/domain/CloseChoices';
+import { CloseEvent } from '@src/tracking/events/CloseEvent';
+import { TrackingFeatureName } from '@src/tracking/TrackingEvent';
+import {
+	createSubmittableMainDonationForm
+} from '@src/components/DonationForm/StepControllers/SubmittableMainDonationForm';
+import {
+	createSubmittableUpgradeToYearly
+} from '@src/components/DonationForm/StepControllers/SubmittableUpgradeToYearly';
+import MainDonationFormButton from '@src/components/DonationForm/Forms/MainDonationFormButton.vue';
+import WMDEFundsForwardingDE from '@src/components/UseOfFunds/Infographics/WMDEFundsForwardingDE.vue';
+import ProgressBar from '@src/components/ProgressBar/ProgressBar.vue';
+import { LocalCloseTracker } from '@src/utils/LocalCloseTracker';
+import { BannerSubmitOnReturnEvent } from '@src/tracking/events/BannerSubmitOnReturnEvent';
+import SoftClose from '@src/components/SoftClose/SoftClose.vue';
+
+enum ContentStates {
+	Mini = 'wmde-banner-wrapper--mini',
+	FullPage = 'wmde-banner-wrapper--full-page',
+	SoftClosing = 'wmde-banner-wrapper--soft-closing'
+}
+
+enum FormStepNames {
+	MainDonationFormStep = 'MainDonationForm',
+	UpgradeToYearlyFormStep = 'UpgradeToYearlyForm'
+}
+
+interface Props {
+	bannerState: BannerStates;
+	useOfFundsContent: useOfFundsContentInterface;
+	pageScroller: PageScroller;
+	remainingImpressions: number;
+	localCloseTracker: LocalCloseTracker;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits( [ 'bannerClosed', 'bannerContentChanged' ] );
+
+const tracker = inject<Tracker>( 'tracker' );
+
+const isFundsModalVisible = ref<boolean>( false );
+const slideShowStopped = ref<boolean>( false );
+const slideshowShouldPlay = computed( () => props.bannerState === BannerStates.Visible && !slideShowStopped.value );
+const contentState = ref<ContentStates>( ContentStates.Mini );
+const formModel = useFormModel();
+const stepControllers = [
+	createSubmittableMainDonationForm( formModel, FormStepNames.UpgradeToYearlyFormStep ),
+	createSubmittableUpgradeToYearly( formModel, FormStepNames.MainDonationFormStep, FormStepNames.MainDonationFormStep )
+];
+
+watch( contentState, async () => {
+	emit( 'bannerContentChanged' );
+} );
+
+function onCloseMiniBanner(): 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 ) );
+	props.localCloseTracker.setItem( feature, userChoice );
+}
+
+function onSoftCloseClose( timer: number, feature: TrackingFeatureName, userChoice: CloseChoices ): void {
+	window.clearInterval( timer );
+	onClose( feature, userChoice );
+}
+
+const onSubmit = (): void => {
+	const closeChoice = props.localCloseTracker.getItem();
+	if ( closeChoice !== '' ) {
+		tracker.trackEvent( new BannerSubmitOnReturnEvent( closeChoice ) );
+	}
+};
+
+function onshowFullPageBanner(): void {
+	slideShowStopped.value = true;
+	contentState.value = ContentStates.FullPage;
+	tracker.trackEvent( new MobileMiniBannerExpandedEvent() );
+}
+
+function onshowFullPageBannerPreselected(): void {
+	slideShowStopped.value = true;
+	formModel.selectedAmount.value = '10';
+	contentState.value = ContentStates.FullPage;
+	tracker.trackEvent( new MobileMiniBannerExpandedEvent( 'preselected' ) );
+}
+
+const onHideFundsModal = ( payload: { source: UseOfFundsCloseSources } ): void => {
+	props.pageScroller.scrollIntoView( payload.source === UseOfFundsCloseSources.callToAction ?
+		'.wmde-banner-form' :
+		'.wmde-banner-full-small-print .wmde-banner-footer-usage-link'
+	);
+	isFundsModalVisible.value = false;
+};
+
+</script>
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_09/components/BannerVar.vue b/banners/mobile/C24_WMDE_Mobile_DE_09/components/BannerVar.vue
new file mode 100644
index 000000000..a93181a2a
--- /dev/null
+++ b/banners/mobile/C24_WMDE_Mobile_DE_09/components/BannerVar.vue
@@ -0,0 +1,265 @@
+<template>
+	<div class="wmde-banner-wrapper" :class="contentState">
+		<MiniBanner
+			@close="onCloseMiniBanner"
+			@show-full-page-banner="onshowFullPageBanner"
+			@show-full-page-banner-preselected="onshowFullPageBannerPreselected"
+		>
+			<template #banner-slides>
+				<KeenSlider :with-navigation="false" :play="slideshowShouldPlay" :interval="5000">
+
+					<template #slides="{ currentSlide }: any">
+						<BannerSlides
+							:currentSlide="currentSlide"
+							:play-live-text="contentState === ContentStates.Mini"
+							@showReasonsToDonate="onShowReasonsToDonate"
+						/>
+					</template>
+
+				</KeenSlider>
+			</template>
+		</MiniBanner>
+
+		<FullPageBanner
+			@showFundsModal="isFundsModalVisible = true"
+			@close="() => onClose( 'FullPageBanner', CloseChoices.Hide )"
+		>
+			<template #banner-text>
+				<BannerText
+					:play-live-text="contentState === ContentStates.FullPage"
+					@showReasonsToDonate="onShowReasonsToDonate"
+				/>
+			</template>
+
+			<template #progress>
+				<ProgressBar amount-to-show-on-right="TARGET"/>
+			</template>
+
+			<template #donation-form="{ formInteraction }: any">
+				<MultiStepDonation :step-controllers="stepControllers" @form-interaction="formInteraction" :page-scroller="pageScroller" :submit-callback="onSubmit">
+
+					<template #[FormStepNames.MainDonationFormStep]="{ pageIndex, submit, isCurrent, previous }: any">
+						<MainDonationForm :page-index="pageIndex" @submit="submit" :is-current="isCurrent" @previous="previous">
+
+							<template #button>
+								<MainDonationFormButton/>
+							</template>
+
+						</MainDonationForm>
+					</template>
+
+					<template #[FormStepNames.UpgradeToYearlyFormStep]="{ pageIndex, submit, isCurrent, previous }: any">
+						<UpgradeToYearlyButtonForm
+							:show-manual-upgrade-option = false
+							:page-index="pageIndex"
+							@submit="submit"
+							:is-current="isCurrent"
+							@previous="previous"
+						>
+							<template #back>
+								<ChevronLeftIcon/> {{ $translate( 'back-button' ) }}
+							</template>
+						</UpgradeToYearlyButtonForm>
+					</template>
+
+				</MultiStepDonation>
+			</template>
+
+			<template #footer>
+				<BannerFooter :show-funds-link="false"/>
+			</template>
+		</FullPageBanner>
+
+		<SoftClose
+			v-if="contentState === ContentStates.SoftClosing"
+			:show-close-icon="true"
+			@close="() => onClose( 'SoftClose', CloseChoices.Close )"
+			@maybe-later="() => onClose( 'SoftClose', CloseChoices.MaybeLater )"
+			@time-out-close="() => onClose( 'SoftClose', CloseChoices.TimeOut )"
+		>
+			<template #buttons="{ timer }: any">
+				<button
+					class="wmde-banner-soft-close-button wmde-banner-soft-close-button-maybe-later"
+					@click="() => onSoftCloseClose( timer, 'SoftClose', CloseChoices.MaybeLater )">
+					{{ $translate( 'soft-close-button-maybe-later' ) }}
+				</button>
+				<button
+					class="wmde-banner-soft-close-button wmde-banner-soft-close-button-close"
+					@click="() => onSoftCloseClose( timer, 'SoftClose', CloseChoices.Close )">
+					{{ $translate( 'soft-close-button-close' ) }}
+				</button>
+				<button
+					class="wmde-banner-soft-close-button wmde-banner-soft-close-button-already-donated"
+					@click="() => onSoftCloseClose( timer, 'SoftClose', CloseChoices.AlreadyDonated )">
+					{{ $translate( 'soft-close-button-already-donated' ) }}
+				</button>
+			</template>
+		</SoftClose>
+
+		<FundsModal
+			:content="useOfFundsContent"
+			:is-funds-modal-visible="isFundsModalVisible"
+			@hideFundsModal="onHideFundsModal"
+		>
+			<template #infographic>
+				<WMDEFundsForwardingDE/>
+			</template>
+		</FundsModal>
+
+		<ReasonsToDonate
+			:visible="isReasonsToDonateVisible"
+			@accordionItemClicked="onReasonsToDonateAccordionItemClicked"
+			@callToActionClicked="onReasonsToDonateCallToActionClicked"
+			@hide="onHideReasonsToDonate"
+		/>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
+import { computed, inject, ref, watch } from 'vue';
+import FullPageBanner from './FullPageBanner.vue';
+import MiniBanner from './MiniBanner.vue';
+import FundsModal from '@src/components/UseOfFunds/FundsModal.vue';
+import { UseOfFundsContent as useOfFundsContentInterface } from '@src/domain/UseOfFunds/UseOfFundsContent';
+import { UseOfFundsCloseSources } from '@src/components/UseOfFunds/UseOfFundsCloseSources';
+import { PageScroller } from '@src/utils/PageScroller/PageScroller';
+import MainDonationForm from '@src/components/DonationForm/Forms/MainDonationForm.vue';
+import MultiStepDonation from '@src/components/DonationForm/MultiStepDonation.vue';
+import BannerText from '../content/BannerText_var.vue';
+import BannerSlides from '../content/BannerSlides_var.vue';
+import BannerFooter from '@src/components/Footer/BannerFooter.vue';
+import KeenSlider from '@src/components/Slider/KeenSlider.vue';
+import { Tracker } from '@src/tracking/Tracker';
+import { MobileMiniBannerExpandedEvent } from '@src/tracking/events/MobileMiniBannerExpandedEvent';
+import { useFormModel } from '@src/components/composables/useFormModel';
+import UpgradeToYearlyButtonForm from '@src/components/DonationForm/Forms/UpgradeToYearlyButtonForm.vue';
+import ChevronLeftIcon from '@src/components/Icons/ChevronLeftIcon.vue';
+import { CloseChoices } from '@src/domain/CloseChoices';
+import { CloseEvent } from '@src/tracking/events/CloseEvent';
+import { TrackingFeatureName } from '@src/tracking/TrackingEvent';
+import {
+	createSubmittableMainDonationForm
+} from '@src/components/DonationForm/StepControllers/SubmittableMainDonationForm';
+import {
+	createSubmittableUpgradeToYearly
+} from '@src/components/DonationForm/StepControllers/SubmittableUpgradeToYearly';
+import MainDonationFormButton from '@src/components/DonationForm/Forms/MainDonationFormButton.vue';
+import WMDEFundsForwardingDE from '@src/components/UseOfFunds/Infographics/WMDEFundsForwardingDE.vue';
+import ProgressBar from '@src/components/ProgressBar/ProgressBar.vue';
+import { LocalCloseTracker } from '@src/utils/LocalCloseTracker';
+import { BannerSubmitOnReturnEvent } from '@src/tracking/events/BannerSubmitOnReturnEvent';
+import SoftClose from '@src/components/SoftClose/SoftClose.vue';
+import ReasonsToDonate from '@src/components/ReasonsToDonate/ReasonsToDonate.vue';
+import { ReasonsToDonateCTAClickedEvent } from '@src/tracking/events/ReasonsToDonateCTAClickedEvent';
+import { ReasonsToDonateShownEvent } from '@src/tracking/events/ReasonsToDonateShownEvent';
+import { ReasonsToDonateItemClickedEvent } from '@src/tracking/events/ReasonsToDonateItemClickedEvent';
+
+enum ContentStates {
+	Mini = 'wmde-banner-wrapper--mini',
+	FullPage = 'wmde-banner-wrapper--full-page',
+	SoftClosing = 'wmde-banner-wrapper--soft-closing'
+}
+
+enum FormStepNames {
+	MainDonationFormStep = 'MainDonationForm',
+	UpgradeToYearlyFormStep = 'UpgradeToYearlyForm'
+}
+
+interface Props {
+	bannerState: BannerStates;
+	useOfFundsContent: useOfFundsContentInterface;
+	pageScroller: PageScroller;
+	remainingImpressions: number;
+	localCloseTracker: LocalCloseTracker;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits( [ 'bannerClosed', 'bannerContentChanged', 'reasonsToDonate' ] );
+
+const tracker = inject<Tracker>( 'tracker' );
+
+const isFundsModalVisible = ref<boolean>( false );
+const isReasonsToDonateVisible = ref<boolean>( false );
+const slideShowStopped = ref<boolean>( false );
+const slideshowShouldPlay = computed( () => props.bannerState === BannerStates.Visible && !slideShowStopped.value );
+const contentState = ref<ContentStates>( ContentStates.Mini );
+const formModel = useFormModel();
+const stepControllers = [
+	createSubmittableMainDonationForm( formModel, FormStepNames.UpgradeToYearlyFormStep ),
+	createSubmittableUpgradeToYearly( formModel, FormStepNames.MainDonationFormStep, FormStepNames.MainDonationFormStep )
+];
+
+watch( contentState, async () => {
+	emit( 'bannerContentChanged' );
+} );
+
+function onCloseMiniBanner(): 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 ) );
+	props.localCloseTracker.setItem( feature, userChoice );
+}
+
+function onSoftCloseClose( timer: number, feature: TrackingFeatureName, userChoice: CloseChoices ): void {
+	window.clearInterval( timer );
+	onClose( feature, userChoice );
+}
+
+const onSubmit = (): void => {
+	const closeChoice = props.localCloseTracker.getItem();
+	if ( closeChoice !== '' ) {
+		tracker.trackEvent( new BannerSubmitOnReturnEvent( closeChoice ) );
+	}
+};
+
+function onshowFullPageBanner(): void {
+	slideShowStopped.value = true;
+	contentState.value = ContentStates.FullPage;
+	tracker.trackEvent( new MobileMiniBannerExpandedEvent() );
+}
+
+function onshowFullPageBannerPreselected(): void {
+	slideShowStopped.value = true;
+	formModel.selectedAmount.value = '10';
+	contentState.value = ContentStates.FullPage;
+	tracker.trackEvent( new MobileMiniBannerExpandedEvent( 'preselected' ) );
+}
+
+const onHideFundsModal = ( payload: { source: UseOfFundsCloseSources } ): void => {
+	props.pageScroller.scrollIntoView( payload.source === UseOfFundsCloseSources.callToAction ?
+		'.wmde-banner-form' :
+		'.wmde-banner-full-small-print .wmde-banner-footer-usage-link'
+	);
+	isFundsModalVisible.value = false;
+};
+
+const onShowReasonsToDonate = (): void => {
+	isReasonsToDonateVisible.value = true;
+	tracker.trackEvent( new ReasonsToDonateShownEvent() );
+};
+
+const onReasonsToDonateAccordionItemClicked = ( payload: { itemNumber: string } ): void => {
+	tracker.trackEvent( new ReasonsToDonateItemClickedEvent( payload.itemNumber ) );
+};
+
+const onReasonsToDonateCallToActionClicked = (): void => {
+	tracker.trackEvent( new ReasonsToDonateCTAClickedEvent() );
+
+	slideShowStopped.value = true;
+	contentState.value = ContentStates.FullPage;
+
+	props.pageScroller.scrollIntoView( '.wmde-banner-form' );
+	isReasonsToDonateVisible.value = false;
+};
+const onHideReasonsToDonate = (): void => {
+	isReasonsToDonateVisible.value = false;
+};
+
+</script>
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_09/components/FullPageBanner.vue b/banners/mobile/C24_WMDE_Mobile_DE_09/components/FullPageBanner.vue
new file mode 100644
index 000000000..d75bb5b68
--- /dev/null
+++ b/banners/mobile/C24_WMDE_Mobile_DE_09/components/FullPageBanner.vue
@@ -0,0 +1,43 @@
+<template>
+	<div class="wmde-banner-full">
+		<button class="wmde-banner-full-close t-close-full-banner" @click.prevent="$emit( 'close' )">
+			<CloseIconMobile/>
+		</button>
+		<div class="wmde-banner-full-content">
+			<div class="wmde-banner-full-info">
+				<slot name="banner-text"/>
+				<slot name="progress"/>
+			</div>
+			<div class="wmde-banner-full-call-to-action">
+				Jetzt sind Sie <span class="wmde-banner-full-call-to-action-optional-text">in Deutschland</span> gefragt.
+			</div>
+
+			<slot name="donation-form"/>
+
+			<ThankYouBox/>
+
+			<div class="wmde-banner-full-small-print">
+				<span>
+					<a
+						id="application-of-funds-link"
+						class="wmde-banner-footer-usage-link t-use-of-funds-link"
+						@click.prevent="$emit( 'showFundsModal' )"
+					>
+						{{ $translate( 'use-of-funds-link' ) }}
+					</a>
+				</span>
+			</div>
+
+			<slot name="footer"/>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+
+import CloseIconMobile from '@src/components/Icons/CloseIconMobile.vue';
+import ThankYouBox from '@src/components/ThankYouBox/ThankYouBox.vue';
+
+defineEmits( [ 'close', 'showFundsModal' ] );
+
+</script>
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_09/components/MiniBanner.vue b/banners/mobile/C24_WMDE_Mobile_DE_09/components/MiniBanner.vue
new file mode 100644
index 000000000..7ab1e5afd
--- /dev/null
+++ b/banners/mobile/C24_WMDE_Mobile_DE_09/components/MiniBanner.vue
@@ -0,0 +1,37 @@
+<template>
+	<div class="wmde-banner-mini">
+		<div class="wmde-banner-mini-close">
+			<button class="wmde-banner-mini-close-button t-close-main-banner" @click.prevent="$emit( 'close' )">
+				<CloseIconMobile/>
+			</button>
+		</div>
+
+		<header class="wmde-banner-mini-headline">
+			<div class="wmde-banner-mini-headline-background">
+				<span class="wmde-banner-mini-headline-content">Wikipedia ist unverkäuflich</span>
+			</div>
+		</header>
+
+		<div class="wmde-banner-mini-slideshow">
+			<slot name="banner-slides"/>
+		</div>
+
+		<div class="wmde-banner-mini-button-group">
+			<button class="wmde-banner-mini-button-preselect" @click="$emit( 'showFullPageBannerPreselected' )">
+				Jetzt 10 &euro; spenden
+			</button>
+			<button class="wmde-banner-mini-button" @click="$emit( 'showFullPageBanner' )">
+				Anderen Betrag
+			</button>
+		</div>
+
+	</div>
+</template>
+
+<script setup lang="ts">
+
+import CloseIconMobile from '@src/components/Icons/CloseIconMobile.vue';
+
+defineEmits( [ 'showFullPageBanner', 'showFullPageBannerPreselected', 'close' ] );
+
+</script>
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_09/components/MinimisedBanner.vue b/banners/mobile/C24_WMDE_Mobile_DE_09/components/MinimisedBanner.vue
new file mode 100644
index 000000000..7678ce7c6
--- /dev/null
+++ b/banners/mobile/C24_WMDE_Mobile_DE_09/components/MinimisedBanner.vue
@@ -0,0 +1,32 @@
+<template>
+	<div class="wmde-banner-minimised">
+		<div class="wmde-banner-minimised-close">
+			<button class="wmde-banner-minimised-close-button t-close-main-banner" @click.prevent="$emit( 'close' )">
+				<CloseIconMobile/>
+			</button>
+		</div>
+		<div class="wmde-banner-minimised-inner">
+			<div class="wmde-banner-minimised-content">
+				<InfoIcon/> Hat Wikipedia Ihnen in diesem Jahr Wissen im Wert einer Tasse Kaffee geschenkt?
+				<span class="wmde-banner-minimised-highlighted-text">Dann geben Sie jetzt etwas zurück.</span>
+			</div>
+		</div>
+		<div class="wmde-banner-minimised-maximise">
+			<div class="wmde-banner-minimised-maximise-tab">
+				<button class="wmde-banner-minimised-maximise-button" @click="$emit( 'maximise' )">
+					Banner vergrößern <MaximiseIcon/>
+				</button>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+
+import CloseIconMobile from '@src/components/Icons/CloseIconMobile.vue';
+import MaximiseIcon from '@src/components/Icons/MaximiseIcon.vue';
+import InfoIcon from '@src/components/Icons/InfoIcon.vue';
+
+defineEmits( [ 'showFullPageBanner', 'close', 'maximise' ] );
+
+</script>
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_09/content/BannerSlides.vue b/banners/mobile/C24_WMDE_Mobile_DE_09/content/BannerSlides.vue
new file mode 100644
index 000000000..48524e525
--- /dev/null
+++ b/banners/mobile/C24_WMDE_Mobile_DE_09/content/BannerSlides.vue
@@ -0,0 +1,75 @@
+<template>
+
+	<KeenSliderSlide :is-current="currentSlide === 0" class="wmde-banner-slide-content-with-progress-bar">
+		<p>Unser Spendenziel: {{ goalDonationSum }} Millionen €</p>
+		<ProgressBar amount-to-show-on-right="TARGET"/>
+	</KeenSliderSlide>
+
+	<KeenSliderSlide :is-current="currentSlide === 1">
+		<p><strong>Hi,</strong></p>
+		<p>
+			vielleicht kommen wir gerade ungelegen, aber dennoch: Klicken Sie jetzt bitte nicht weg! Am
+			heutigen {{ currentDayName }}, den {{ liveDateAndTime.currentDate }}, um {{ liveDateAndTime.currentTime }} bitten wir Sie,
+			die Unabhängigkeit von Wikipedia zu unterstützen.
+		</p>
+	</KeenSliderSlide>
+
+	<KeenSliderSlide :is-current="currentSlide === 2">
+		<p>
+			{{ campaignDaySentence }}
+			<AnimatedText :content="visitorsVsDonorsSentence"/>
+			Die meisten Menschen spenden, weil sie Wikipedia nützlich finden.
+		</p>
+	</KeenSliderSlide>
+
+	<KeenSliderSlide :is-current="currentSlide === 3">
+		<p>
+			Die durchschnittliche Spende beträgt {{ averageDonation }}, doch bereits 10&nbsp;€ helfen uns weiter. Hat Wikipedia
+			Ihnen in diesem Jahr Wissen im Wert einer Tasse Kaffee geschenkt?
+		</p>
+	</KeenSliderSlide>
+
+	<KeenSliderSlide :is-current="currentSlide === 4">
+		<p>
+			Dann entscheiden Sie sich, eine der seltenen Ausnahmen zu sein, und geben Sie etwas zurück.
+			<strong> Vielen Dank!</strong>
+		</p>
+	</KeenSliderSlide>
+
+</template>
+
+<script setup lang="ts">
+import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
+import { inject, onMounted, onUnmounted, watch } from 'vue';
+import KeenSliderSlide from '@src/components/Slider/KeenSliderSlide.vue';
+import AnimatedText from '@src/components/AnimatedText/AnimatedText.vue';
+import { useLiveDateAndTime } from '@src/components/composables/useLiveDateAndTime';
+import ProgressBar from '@src/components/ProgressBar/ProgressBar.vue';
+
+interface Props {
+	playLiveText: boolean;
+	currentSlide: number
+}
+
+const props = defineProps<Props>();
+
+const {
+	currentDayName,
+	getCurrentDateAndTime,
+	goalDonationSum,
+	visitorsVsDonorsSentence,
+	campaignDaySentence,
+	averageDonation
+}: DynamicContent = inject( 'dynamicCampaignText' );
+
+const { liveDateAndTime, startTimer, stopTimer } = useLiveDateAndTime( getCurrentDateAndTime );
+
+watch( () => props.playLiveText, ( shouldPlay: boolean ) => {
+	if ( !shouldPlay ) {
+		stopTimer();
+	}
+} );
+onMounted( startTimer );
+onUnmounted( stopTimer );
+
+</script>
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_09/content/BannerSlides_var.vue b/banners/mobile/C24_WMDE_Mobile_DE_09/content/BannerSlides_var.vue
new file mode 100644
index 000000000..32d01c23f
--- /dev/null
+++ b/banners/mobile/C24_WMDE_Mobile_DE_09/content/BannerSlides_var.vue
@@ -0,0 +1,91 @@
+<template>
+
+	<KeenSliderSlide :is-current="currentSlide === 0" class="wmde-banner-slide-content-with-progress-bar">
+		<p>Unser Spendenziel: {{ goalDonationSum }} Millionen €</p>
+		<ProgressBar amount-to-show-on-right="TARGET"/>
+		<p class="wmde-banner-slide-reasons-to-donate-sentence">Falls Sie zögern,
+			<a
+				id="reasons-to-donate-link"
+				class="wmde-banner-reasons-to-donate-link t-reasons-to-donate-link"
+				@click.prevent="$emit( 'showReasonsToDonate' )"
+				href="#"
+			>
+				hier sind 10 gute Gründe
+			</a>
+			für eine Spende.</p>
+	</KeenSliderSlide>
+
+	<KeenSliderSlide :is-current="currentSlide === 1">
+		<p><strong>Hi,</strong></p>
+		<p>
+			vielleicht kommen wir gerade ungelegen, aber dennoch: Klicken Sie jetzt bitte nicht weg! Am
+			heutigen {{ currentDayName }}, den {{ liveDateAndTime.currentDate }}, um {{ liveDateAndTime.currentTime }} bitten wir Sie,
+			die Unabhängigkeit von Wikipedia zu unterstützen.
+		</p>
+	</KeenSliderSlide>
+
+	<KeenSliderSlide :is-current="currentSlide === 2">
+		<p>
+			{{ campaignDaySentence }}
+			<AnimatedText :content="visitorsVsDonorsSentence"/>
+			Die meisten Menschen spenden, weil sie Wikipedia nützlich finden.
+		</p>
+	</KeenSliderSlide>
+
+	<KeenSliderSlide :is-current="currentSlide === 3">
+		<p>
+			Die durchschnittliche Spende beträgt {{ averageDonation }}, doch bereits 10&nbsp;€ helfen uns weiter. Hat Wikipedia
+			Ihnen in diesem Jahr Wissen im Wert einer Tasse Kaffee geschenkt?
+		</p>
+	</KeenSliderSlide>
+
+	<KeenSliderSlide :is-current="currentSlide === 4">
+		<p>
+			Dann entscheiden Sie sich, eine der seltenen Ausnahmen zu sein, und geben Sie etwas zurück.
+			Falls Sie zögern,
+			<button class="wmde-banner-reasons-to-donate-link" @click.prevent="$emit( 'showReasonsToDonate' )">
+				hier sind 10 gute Gründe
+			</button>
+			für eine Spende.
+			<strong> Vielen Dank!</strong>
+		</p>
+	</KeenSliderSlide>
+
+</template>
+
+<script setup lang="ts">
+import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
+import { inject, onMounted, onUnmounted, watch } from 'vue';
+import KeenSliderSlide from '@src/components/Slider/KeenSliderSlide.vue';
+import AnimatedText from '@src/components/AnimatedText/AnimatedText.vue';
+import { useLiveDateAndTime } from '@src/components/composables/useLiveDateAndTime';
+import ProgressBar from '@src/components/ProgressBar/ProgressBar.vue';
+
+interface Props {
+	playLiveText: boolean;
+	currentSlide: number
+}
+
+const props = defineProps<Props>();
+defineEmits( [ 'showReasonsToDonate' ] );
+
+const {
+	currentDayName,
+	getCurrentDateAndTime,
+	goalDonationSum,
+	visitorsVsDonorsSentence,
+	campaignDaySentence,
+	averageDonation
+}: DynamicContent = inject( 'dynamicCampaignText' );
+
+const { liveDateAndTime, startTimer, stopTimer } = useLiveDateAndTime( getCurrentDateAndTime );
+
+watch( () => props.playLiveText, ( shouldPlay: boolean ) => {
+	if ( !shouldPlay ) {
+		stopTimer();
+	}
+} );
+onMounted( startTimer );
+onUnmounted( stopTimer );
+
+</script>
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_09/content/BannerText.vue b/banners/mobile/C24_WMDE_Mobile_DE_09/content/BannerText.vue
new file mode 100644
index 000000000..c0b3d6b27
--- /dev/null
+++ b/banners/mobile/C24_WMDE_Mobile_DE_09/content/BannerText.vue
@@ -0,0 +1,50 @@
+<template>
+	<div class="wmde-banner-message">
+		<div>
+			<p class="banner-text-title">
+				<strong>Hi,</strong>
+			</p>
+			<p>
+				vielleicht kommen wir gerade ungelegen, aber dennoch: Klicken Sie jetzt bitte nicht weg! Am heutigen
+				{{ currentDayName }}, den {{ liveDateAndTime.currentDate }}, um {{ liveDateAndTime.currentTime }}
+				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 10&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, watch } from 'vue';
+import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
+import { useLiveDateAndTime } from '@src/components/composables/useLiveDateAndTime';
+import AnimatedText from '@src/components/AnimatedText/AnimatedText.vue';
+
+interface Props {
+	playLiveText: boolean;
+}
+
+const props = defineProps<Props>();
+
+const {
+	currentDayName,
+	getCurrentDateAndTime,
+	visitorsVsDonorsSentence,
+	campaignDaySentence,
+	averageDonation
+}: DynamicContent = inject( 'dynamicCampaignText' );
+
+const { liveDateAndTime, startTimer, stopTimer } = useLiveDateAndTime( getCurrentDateAndTime );
+
+watch( () => props.playLiveText, ( shouldPlay: boolean ) => {
+	if ( shouldPlay ) {
+		startTimer();
+	} else {
+		stopTimer();
+	}
+} );
+
+</script>
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_09/content/BannerText_var.vue b/banners/mobile/C24_WMDE_Mobile_DE_09/content/BannerText_var.vue
new file mode 100644
index 000000000..13679edf3
--- /dev/null
+++ b/banners/mobile/C24_WMDE_Mobile_DE_09/content/BannerText_var.vue
@@ -0,0 +1,54 @@
+<template>
+	<div class="wmde-banner-message">
+		<div>
+			<p class="banner-text-title">
+				<strong>Hi,</strong>
+			</p>
+			<p>
+				vielleicht kommen wir gerade ungelegen, aber dennoch: Klicken Sie jetzt bitte nicht weg! Am heutigen
+				{{ currentDayName }}, den {{ liveDateAndTime.currentDate }}, um {{ liveDateAndTime.currentTime }}
+				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 10&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.
+				Falls Sie zögern,
+				<button class="wmde-banner-reasons-to-donate-link" @click.prevent="$emit( 'showReasonsToDonate' )">hier sind 10 gute Gründe</button>
+				für eine Spende.
+				Vielen Dank!
+			</p>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { inject, watch } from 'vue';
+import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
+import { useLiveDateAndTime } from '@src/components/composables/useLiveDateAndTime';
+import AnimatedText from '@src/components/AnimatedText/AnimatedText.vue';
+
+interface Props {
+	playLiveText: boolean;
+}
+
+const props = defineProps<Props>();
+
+const {
+	currentDayName,
+	getCurrentDateAndTime,
+	visitorsVsDonorsSentence,
+	campaignDaySentence,
+	averageDonation
+}: DynamicContent = inject( 'dynamicCampaignText' );
+
+const { liveDateAndTime, startTimer, stopTimer } = useLiveDateAndTime( getCurrentDateAndTime );
+
+watch( () => props.playLiveText, ( shouldPlay: boolean ) => {
+	if ( shouldPlay ) {
+		startTimer();
+	} else {
+		stopTimer();
+	}
+} );
+
+</script>
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_09/event_map.ts b/banners/mobile/C24_WMDE_Mobile_DE_09/event_map.ts
new file mode 100644
index 000000000..d7a00a5dd
--- /dev/null
+++ b/banners/mobile/C24_WMDE_Mobile_DE_09/event_map.ts
@@ -0,0 +1,33 @@
+import { TrackingEventConverterFactory } from '@src/tracking/LegacyTrackerWPORG';
+import { WMDELegacyBannerEvent } from '@src/tracking/WPORG/WMDELegacyBannerEvent';
+import { MobileMiniBannerExpandedEvent } from '@src/tracking/events/MobileMiniBannerExpandedEvent';
+import { FormStepShownEvent } from '@src/tracking/events/FormStepShownEvent';
+import { mapFormStepShownEvent } from '@src/tracking/LegacyEventTracking/mapFormStepShownEvent';
+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 { BannerSubmitEvent } from '@src/tracking/events/BannerSubmitEvent';
+import { WMDESizeIssueEvent } from '@src/tracking/WPORG/WMDEBannerSizeIssue';
+import { createViewportInfo } from '@src/tracking/LegacyEventTracking/createViewportInfo';
+import { BannerSubmitOnReturnEvent } from '@src/tracking/events/BannerSubmitOnReturnEvent';
+
+export default new Map<string, TrackingEventConverterFactory>( [
+	[ CloseEvent.EVENT_NAME, mapCloseEvent ],
+	[ MobileMiniBannerExpandedEvent.EVENT_NAME,
+		( e: MobileMiniBannerExpandedEvent ): WMDELegacyBannerEvent => new WMDELegacyBannerEvent( e.eventName + ( e.userChoice !== '' ? `-${e.userChoice}` : '' ), 1 ) ],
+	[ FormStepShownEvent.EVENT_NAME, mapFormStepShownEvent ],
+	[ NotShownEvent.EVENT_NAME, mapNotShownEvent ],
+
+	[ BannerSubmitEvent.EVENT_NAME, ( e: BannerSubmitEvent ): WMDESizeIssueEvent => {
+		switch ( e.feature ) {
+			case 'MiniBanner':
+			case 'UpgradeToYearlyForm':
+				return new WMDESizeIssueEvent( `submit-${e.userChoice}`, createViewportInfo(), 1 );
+			default:
+				return new WMDESizeIssueEvent( `submit`, createViewportInfo(), 1 );
+		}
+	} ],
+	[ BannerSubmitOnReturnEvent.EVENT_NAME,
+		( e: BannerSubmitOnReturnEvent ): WMDELegacyBannerEvent => new WMDELegacyBannerEvent( e.eventName + ( e.userChoice !== '' ? `-${e.userChoice}` : '' ), 1 ) ]
+] );
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_09/event_map_var.ts b/banners/mobile/C24_WMDE_Mobile_DE_09/event_map_var.ts
new file mode 100644
index 000000000..994c1e94a
--- /dev/null
+++ b/banners/mobile/C24_WMDE_Mobile_DE_09/event_map_var.ts
@@ -0,0 +1,42 @@
+import { TrackingEventConverterFactory } from '@src/tracking/LegacyTrackerWPORG';
+import { WMDELegacyBannerEvent } from '@src/tracking/WPORG/WMDELegacyBannerEvent';
+import { MobileMiniBannerExpandedEvent } from '@src/tracking/events/MobileMiniBannerExpandedEvent';
+import { FormStepShownEvent } from '@src/tracking/events/FormStepShownEvent';
+import { mapFormStepShownEvent } from '@src/tracking/LegacyEventTracking/mapFormStepShownEvent';
+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 { BannerSubmitEvent } from '@src/tracking/events/BannerSubmitEvent';
+import { WMDESizeIssueEvent } from '@src/tracking/WPORG/WMDEBannerSizeIssue';
+import { createViewportInfo } from '@src/tracking/LegacyEventTracking/createViewportInfo';
+import { BannerSubmitOnReturnEvent } from '@src/tracking/events/BannerSubmitOnReturnEvent';
+import { ReasonsToDonateShownEvent } from '@src/tracking/events/ReasonsToDonateShownEvent';
+import { ReasonsToDonateItemClickedEvent } from '@src/tracking/events/ReasonsToDonateItemClickedEvent';
+import { ReasonsToDonateCTAClickedEvent } from '@src/tracking/events/ReasonsToDonateCTAClickedEvent';
+
+export default new Map<string, TrackingEventConverterFactory>( [
+	[ CloseEvent.EVENT_NAME, mapCloseEvent ],
+	[ MobileMiniBannerExpandedEvent.EVENT_NAME,
+		( e: MobileMiniBannerExpandedEvent ): WMDELegacyBannerEvent => new WMDELegacyBannerEvent( e.eventName + ( e.userChoice !== '' ? `-${e.userChoice}` : '' ), 1 ) ],
+	[ FormStepShownEvent.EVENT_NAME, mapFormStepShownEvent ],
+	[ NotShownEvent.EVENT_NAME, mapNotShownEvent ],
+
+	[ BannerSubmitEvent.EVENT_NAME, ( e: BannerSubmitEvent ): WMDESizeIssueEvent => {
+		switch ( e.feature ) {
+			case 'MiniBanner':
+			case 'UpgradeToYearlyForm':
+				return new WMDESizeIssueEvent( `submit-${e.userChoice}`, createViewportInfo(), 1 );
+			default:
+				return new WMDESizeIssueEvent( `submit`, createViewportInfo(), 1 );
+		}
+	} ],
+	[ BannerSubmitOnReturnEvent.EVENT_NAME,
+		( e: BannerSubmitOnReturnEvent ): WMDELegacyBannerEvent => new WMDELegacyBannerEvent( e.eventName + ( e.userChoice !== '' ? `-${e.userChoice}` : '' ), 1 ) ],
+
+	[ ReasonsToDonateShownEvent.EVENT_NAME, ( e: ReasonsToDonateShownEvent ): WMDELegacyBannerEvent => new WMDELegacyBannerEvent( e.eventName, 1 ) ],
+	[ ReasonsToDonateItemClickedEvent.EVENT_NAME, ( e: ReasonsToDonateItemClickedEvent ): WMDELegacyBannerEvent =>
+		new WMDELegacyBannerEvent( e.eventName + ( e.userChoice !== '' ? `-${e.userChoice}` : '' ), 1 )
+	],
+	[ ReasonsToDonateCTAClickedEvent.EVENT_NAME, ( e: ReasonsToDonateCTAClickedEvent ): WMDELegacyBannerEvent => new WMDELegacyBannerEvent( e.eventName, 1 ) ]
+] );
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_09/form_items.ts b/banners/mobile/C24_WMDE_Mobile_DE_09/form_items.ts
new file mode 100644
index 000000000..53c204d06
--- /dev/null
+++ b/banners/mobile/C24_WMDE_Mobile_DE_09/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.YEARLY
+		)
+		.setAmounts( 10, 15, 25, 50, 100 )
+		.setPaymentMethods(
+			PaymentMethods.PAYPAL,
+			PaymentMethods.DIRECT_DEBIT,
+			PaymentMethods.BANK_TRANSFER,
+			PaymentMethods.CREDIT_CARD,
+			PaymentMethods.SOFORT
+		).getItems();
+}
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_09/messages.ts b/banners/mobile/C24_WMDE_Mobile_DE_09/messages.ts
new file mode 100644
index 000000000..930f9b38f
--- /dev/null
+++ b/banners/mobile/C24_WMDE_Mobile_DE_09/messages.ts
@@ -0,0 +1,30 @@
+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 FooterDe from '@src/components/Footer/messages/Footer.de';
+import MainDonationFormDe from '@src/components/DonationForm/Forms/messages/MainDonationForm.de';
+import SoftCloseDe from '@src/components/SoftClose/messages/SoftClose.de';
+
+const messages: TranslationMessages = {
+	...DynamicCampaignTextDe,
+	...FooterDe,
+	...MainDonationFormDe,
+	...UpgradeToYearlyDe,
+	...SoftCloseDe,
+
+	// custom messages here
+	'use-of-funds-link': 'Was Ihre Spende bewirkt',
+	'payment-bank-transfer': 'Überweisung',
+	'payment-sofort': 'Sofort',
+	'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.',
+	'soft-close-prompt': 'Wikipedia später unterstützen?',
+	'soft-close-button-already-donated': 'Habe schon gespendet',
+	'amount-total': ''
+};
+
+export default messages;
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_09/messages_var.ts b/banners/mobile/C24_WMDE_Mobile_DE_09/messages_var.ts
new file mode 100644
index 000000000..e88a1650a
--- /dev/null
+++ b/banners/mobile/C24_WMDE_Mobile_DE_09/messages_var.ts
@@ -0,0 +1,32 @@
+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 FooterDe from '@src/components/Footer/messages/Footer.de';
+import MainDonationFormDe from '@src/components/DonationForm/Forms/messages/MainDonationForm.de';
+import SoftCloseDe from '@src/components/SoftClose/messages/SoftClose.de';
+import ReasonsToDonate from '@src/components/ReasonsToDonate/messages/ReasonsToDonate.de';
+
+const messages: TranslationMessages = {
+	...DynamicCampaignTextDe,
+	...FooterDe,
+	...MainDonationFormDe,
+	...UpgradeToYearlyDe,
+	...SoftCloseDe,
+	...ReasonsToDonate,
+
+	// custom messages here
+	'use-of-funds-link': 'Was Ihre Spende bewirkt',
+	'payment-bank-transfer': 'Überweisung',
+	'payment-sofort': 'Sofort',
+	'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.',
+	'soft-close-prompt': 'Wikipedia später unterstützen?',
+	'soft-close-button-already-donated': 'Habe schon gespendet',
+	'amount-total': ''
+};
+
+export default messages;
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_09/styles/Banner.scss b/banners/mobile/C24_WMDE_Mobile_DE_09/styles/Banner.scss
new file mode 100644
index 000000000..ef5ca15ed
--- /dev/null
+++ b/banners/mobile/C24_WMDE_Mobile_DE_09/styles/Banner.scss
@@ -0,0 +1,56 @@
+@use 'src/themes/Mikings/variables/globals';
+@use 'src/themes/Mikings/variables/fonts';
+
+@keyframes hide-mini {
+	0% {
+		opacity: 1;
+	}
+	99% {
+		opacity: 0;
+	}
+	100% {
+		display: none;
+	}
+}
+
+.wmde-banner {
+
+	&-full {
+		visibility: hidden;
+		opacity: 0;
+		transform: scale( 1.1 );
+		transition: opacity 500ms globals.$banner-easing, transform 500ms globals.$banner-easing;
+	}
+
+	&-wrapper {
+		font-size: 16px;
+		font-family: fonts.$ui;
+		box-shadow: 0 3px 0.6em rgba( 60 60 60 / 40% );
+		background-color: var( --main-background );
+		color: var( --main-color );
+
+		&--full-page {
+			.wmde-banner-mini {
+				animation: hide-mini 500ms;
+			}
+			.wmde-banner-full {
+				visibility: visible;
+				opacity: 1;
+				transform: scale( 1 );
+			}
+		}
+
+		&--soft-closing {
+			.wmde-banner-mini {
+				display: none;
+			}
+		}
+	}
+
+	&--closed,
+	&--not-shown {
+		.wmde-banner-wrapper {
+			display: none;
+		}
+	}
+}
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_09/styles/FullPageBanner.scss b/banners/mobile/C24_WMDE_Mobile_DE_09/styles/FullPageBanner.scss
new file mode 100644
index 000000000..266b1a19f
--- /dev/null
+++ b/banners/mobile/C24_WMDE_Mobile_DE_09/styles/FullPageBanner.scss
@@ -0,0 +1,99 @@
+@use '@src/themes/Mikings/variables/globals';
+@use '@src/themes/Mikings/variables/breakpoints';
+
+.wmde-banner {
+	&-full {
+		border: 2px solid var( --full-border );
+		background: var( --full-background );
+		position: fixed;
+		top: 0;
+		z-index: 1000;
+		height: 100vh;
+		width: 100vw;
+
+		&-content {
+			overflow-y: auto;
+			height: 100%;
+			width: 100%;
+		}
+
+		p {
+			padding-bottom: 16px;
+		}
+
+		&-close {
+			position: absolute;
+			top: 16px;
+			right: 16px;
+			height: 35px;
+			width: 35px;
+			padding: 5px;
+			background: var( --full-background );
+			z-index: 99;
+			border: none;
+			border-radius: 50%;
+
+			&:hover {
+				cursor: pointer;
+			}
+
+			.close-button {
+				text-decoration: underline;
+			}
+		}
+
+		&-info {
+			padding: 16px;
+		}
+
+		&-call-to-action {
+			position: relative;
+			color: var( --full-cta-color );
+			background: var( --full-cta-background );
+			font-weight: bold;
+			height: 31px;
+			line-height: 31px;
+			text-align: center;
+
+			&-optional-text {
+				display: none;
+
+				@include breakpoints.tablet-portrait-up {
+					display: inline;
+				}
+			}
+
+			&::after {
+				content: '';
+				position: absolute;
+				bottom: -4px;
+				left: 50%;
+				margin-left: -4px;
+				width: 0;
+				height: 0;
+				border-style: solid;
+				border-width: 5px 4px 0;
+				border-color: var( --full-cta-background ) transparent transparent transparent;
+			}
+		}
+
+		.banner-text-title {
+			margin-right: 30px;
+		}
+
+		&-small-print {
+			text-align: center;
+			font-size: 12px;
+			margin-bottom: 16px;
+
+			a {
+				color: var( --full-smallprint-color );
+
+				&:hover,
+				&:focus {
+					text-decoration: underline;
+				}
+			}
+		}
+	}
+}
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_09/styles/MiniBanner.scss b/banners/mobile/C24_WMDE_Mobile_DE_09/styles/MiniBanner.scss
new file mode 100644
index 000000000..2bd2f4059
--- /dev/null
+++ b/banners/mobile/C24_WMDE_Mobile_DE_09/styles/MiniBanner.scss
@@ -0,0 +1,157 @@
+@use '@src/themes/Mikings/variables/globals';
+
+$height: 288px !default;
+
+.wmde-banner {
+	&-mini {
+		display: flex;
+		flex-direction: column;
+		min-height: $height;
+		padding: 16px 0;
+		position: relative;
+		border: 2px solid var( --mini-border );
+		background: var( --mini-background );
+
+		&-close {
+			position: absolute;
+			height: 36px;
+			width: 36px;
+			top: 11px;
+			right: 16px;
+			text-align: center;
+			background: var( --mini-close-background );
+			padding: 10px;
+			z-index: 2;
+
+			&-button {
+				border: none;
+				margin-top: auto;
+				float: right;
+				height: 16px;
+				line-height: 16px;
+				width: 16px;
+				background: var( --mini-close-background );
+				z-index: 2;
+
+				svg {
+					height: 16px;
+					width: 16px;
+				}
+
+				&:hover {
+					cursor: pointer;
+				}
+			}
+		}
+
+		&-headline {
+			height: 25px;
+			text-align: center;
+			margin: 0 16px 16px;
+
+			&-background {
+				position: relative;
+				text-align: left;
+
+				@media ( min-width: 400px ) {
+					text-align: center;
+				}
+
+				/* single line above container */
+				&::before {
+					content: '';
+					display: block;
+					background: var( --mini-headline-line );
+					width: 100%;
+					height: 1px;
+					position: absolute;
+					top: 50%;
+					z-index: 1;
+				}
+			}
+
+			&-content {
+				position: relative;
+				display: inline-block;
+				font-weight: bold;
+				font-size: 14px;
+				line-height: 25px;
+				color: var( --mini-headline-color );
+				background: var( --mini-headline-background );
+				padding: 0 5px;
+				z-index: 2;
+				white-space: nowrap;
+
+				@media ( min-width: 330px ) {
+					font-size: 16px;
+				}
+
+				@media ( min-width: 360px ) {
+					font-size: 18px;
+				}
+			}
+		}
+
+		&-slideshow {
+			display: flex;
+			flex-direction: column;
+			flex: 1 1 auto;
+		}
+
+		&-button-group {
+			display: flex;
+			justify-content: center;
+		}
+
+		&-button,
+		&-button-preselect {
+			width: 50%;
+			height: 40px;
+			border: none;
+			border-radius: 20px;
+			font-weight: bold;
+			color: var( --mini-button-color );
+			margin: 0 16px;
+			font-size: 14px;
+			white-space: nowrap;
+
+			@media ( min-width: 370px ) {
+				font-size: 16px;
+			}
+		}
+
+		&-button {
+			background: var( --mini-button-background );
+
+			&:hover,
+			&:focus {
+				background: var( --mini-button-background-hover );
+			}
+		}
+
+		&-button-preselect {
+			background: var( --mini-button-alt-background );
+
+			&:hover,
+			&:focus {
+				background: var( --mini-button-alt-background-hover );
+			}
+		}
+
+		.smallprint-mini {
+			text-align: center;
+			font-size: 11px;
+			margin-top: 12px;
+			margin-bottom: -5px;
+
+			a {
+				color: var( --mini-smallprint-color );
+
+				&:hover,
+				&:focus {
+					text-decoration: underline;
+				}
+			}
+		}
+	}
+}
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_09/styles/MiniBanner_var.scss b/banners/mobile/C24_WMDE_Mobile_DE_09/styles/MiniBanner_var.scss
new file mode 100644
index 000000000..aafadbf3c
--- /dev/null
+++ b/banners/mobile/C24_WMDE_Mobile_DE_09/styles/MiniBanner_var.scss
@@ -0,0 +1,161 @@
+@use '@src/themes/Mikings/variables/globals';
+
+$height: 288px !default;
+
+.wmde-banner {
+	&-mini {
+		display: flex;
+		flex-direction: column;
+		min-height: $height;
+		padding: 16px 0;
+		position: relative;
+		border: 2px solid var( --mini-border );
+		background: var( --mini-background );
+
+		&-close {
+			position: absolute;
+			height: 36px;
+			width: 36px;
+			top: 11px;
+			right: 16px;
+			text-align: center;
+			background: var( --mini-close-background );
+			padding: 10px;
+			z-index: 2;
+
+			&-button {
+				border: none;
+				margin-top: auto;
+				float: right;
+				height: 16px;
+				line-height: 16px;
+				width: 16px;
+				background: var( --mini-close-background );
+				z-index: 2;
+
+				svg {
+					height: 16px;
+					width: 16px;
+				}
+
+				&:hover {
+					cursor: pointer;
+				}
+			}
+		}
+
+		&-headline {
+			height: 25px;
+			text-align: center;
+			margin: 0 16px 16px;
+
+			&-background {
+				position: relative;
+				text-align: left;
+
+				@media ( min-width: 400px ) {
+					text-align: center;
+				}
+
+				/* single line above container */
+				&::before {
+					content: '';
+					display: block;
+					background: var( --mini-headline-line );
+					width: 100%;
+					height: 1px;
+					position: absolute;
+					top: 50%;
+					z-index: 1;
+				}
+			}
+
+			&-content {
+				position: relative;
+				display: inline-block;
+				font-weight: bold;
+				font-size: 14px;
+				line-height: 25px;
+				color: var( --mini-headline-color );
+				background: var( --mini-headline-background );
+				padding: 0 5px;
+				z-index: 2;
+				white-space: nowrap;
+
+				@media ( min-width: 330px ) {
+					font-size: 16px;
+				}
+
+				@media ( min-width: 360px ) {
+					font-size: 18px;
+				}
+			}
+		}
+
+		&-slideshow {
+			display: flex;
+			flex-direction: column;
+			flex: 1 1 auto;
+		}
+
+		&-button-group {
+			display: flex;
+			justify-content: center;
+		}
+
+		&-button,
+		&-button-preselect {
+			width: 50%;
+			height: 40px;
+			border: none;
+			border-radius: 20px;
+			font-weight: bold;
+			color: var( --mini-button-color );
+			margin: 0 16px;
+			font-size: 14px;
+			white-space: nowrap;
+
+			@media ( min-width: 370px ) {
+				font-size: 16px;
+			}
+		}
+
+		&-button {
+			background: var( --mini-button-background );
+
+			&:hover,
+			&:focus {
+				background: var( --mini-button-background-hover );
+			}
+		}
+
+		&-button-preselect {
+			background: var( --mini-button-alt-background );
+
+			&:hover,
+			&:focus {
+				background: var( --mini-button-alt-background-hover );
+			}
+		}
+
+		.smallprint-mini {
+			text-align: center;
+			font-size: 11px;
+			margin-top: 12px;
+			margin-bottom: -5px;
+
+			a {
+				color: var( --mini-smallprint-color );
+
+				&:hover,
+				&:focus {
+					text-decoration: underline;
+				}
+			}
+		}
+
+		.wmde-banner-slide-reasons-to-donate-sentence {
+			margin-bottom: 0;
+		}
+	}
+}
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_09/styles/MinimisedBanner.scss b/banners/mobile/C24_WMDE_Mobile_DE_09/styles/MinimisedBanner.scss
new file mode 100644
index 000000000..71c9abf8d
--- /dev/null
+++ b/banners/mobile/C24_WMDE_Mobile_DE_09/styles/MinimisedBanner.scss
@@ -0,0 +1,96 @@
+$transition-easing: cubic-bezier( 0.555, 0.155, 0.14, 0.945 ) !default;
+
+.wmde-banner {
+	&-minimised {
+
+		height: 82px;
+
+		&-inner {
+			flex: 1 0 auto;
+			display: flex;
+			flex-direction: column;
+			padding: 16px 0 18px;
+			position: relative;
+			border: 2px solid var( --mini-border );
+			background: var( --mini-background );
+			height: auto;
+			box-shadow: none;
+		}
+
+		&-headline,
+		&-content {
+			padding: 0 16px;
+			margin-right: 26px;
+		}
+
+		&-headline {
+			font-weight: bold;
+		}
+
+		&-highlighted-text {
+			background: var( --minimise-text-highlight-background );
+			font-weight: bold;
+		}
+
+		&-close {
+			position: absolute;
+			height: 36px;
+			width: 36px;
+			top: 2px;
+			right: 6px;
+			text-align: center;
+			background: var( --mini-close-background );
+			padding: 10px;
+			z-index: 2;
+
+			&-button {
+				border: none;
+				margin-top: auto;
+				float: right;
+				height: 16px;
+				line-height: 16px;
+				width: 16px;
+				background: var( --mini-close-background );
+				z-index: 2;
+
+				svg {
+					height: 16px;
+					width: 16px;
+				}
+
+				&:hover {
+					cursor: pointer;
+				}
+			}
+		}
+
+		&-maximise {
+			height: 16px;
+			display: flex;
+			justify-content: center;
+			transition: height $transition-easing var( --wmde-banner-transition-duration );
+
+			&-tab {
+				height: 16px;
+				border: 2px solid var( --mini-border );
+				border-top: none;
+				border-radius: 0 0 3px 3px;
+				box-shadow: var( --mini-box-shadow );
+			}
+
+			&-button {
+				border: none;
+				border-radius: 2px;
+				background: var( --mini-background );
+				color: var( --minimise-color );
+				position: relative;
+				height: 32px;
+				top: -18px;
+				cursor: pointer;
+				font-size: 14px;
+				font-weight: bold;
+				width: 175px;
+			}
+		}
+	}
+}
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_09/styles/styles.scss b/banners/mobile/C24_WMDE_Mobile_DE_09/styles/styles.scss
new file mode 100644
index 000000000..f6b7092a4
--- /dev/null
+++ b/banners/mobile/C24_WMDE_Mobile_DE_09/styles/styles.scss
@@ -0,0 +1,29 @@
+@use 'src/themes/Mikings/swatches/skin_default' with (
+	$upgrade-to-yearly-button-form: true,
+	$progress-bar: true,
+	$soft-close: true,
+	$thank-you-box: true
+);
+@use 'src/components/BannerConductor/banner-transition';
+@use 'src/themes/UseOfFunds/swatches/skin_default' as uof-default;
+@use 'src/themes/UseOfFunds/UseOfFunds';
+@use 'src/themes/Mikings/defaults';
+@use './Banner';
+@use './MiniBanner' with (
+	$height: 306px
+);
+@use './FullPageBanner';
+@use 'src/themes/Mikings/Footer/Footer';
+@use 'src/themes/Mikings/ThankYouBox/ThankYouBox';
+@use 'src/themes/Mikings/Footer/SelectionInput';
+@use 'src/themes/Mikings/DonationForm/MultiStepDonation';
+@use 'src/themes/Mikings/DonationForm/Forms/UpgradeToYearlyButtonForm';
+@use 'src/themes/Mikings/DonationForm/SubComponents/SelectGroup';
+@use 'src/themes/Mikings/DonationForm/SubComponents/SelectCustomAmount';
+@use 'src/themes/Mikings/DonationForm/SubComponents/SmsBox';
+@use 'src/themes/Mikings/Slider/Slider' with (
+	$pagination-padding: 10px,
+	$pagination-height: 40px
+);
+@use 'src/themes/Mikings/SoftClose/SoftClose';
+@use 'src/themes/Mikings/ProgressBar/ProgressBar';
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_09/styles/styles_var.scss b/banners/mobile/C24_WMDE_Mobile_DE_09/styles/styles_var.scss
new file mode 100644
index 000000000..4bf6a0dda
--- /dev/null
+++ b/banners/mobile/C24_WMDE_Mobile_DE_09/styles/styles_var.scss
@@ -0,0 +1,32 @@
+@use 'src/themes/Mikings/swatches/skin_default' with (
+	$upgrade-to-yearly-button-form: true,
+	$progress-bar: true,
+	$soft-close: true,
+	$thank-you-box: true
+);
+@use 'src/components/BannerConductor/banner-transition';
+@use 'src/themes/UseOfFunds/swatches/skin_default' as uof-default;
+@use 'src/themes/UseOfFunds/UseOfFunds';
+@use 'src/themes/Mikings/defaults';
+@use './Banner';
+@use './MiniBanner_var' with (
+	$height: 306px
+);
+@use './FullPageBanner';
+@use 'src/themes/Mikings/Footer/Footer';
+@use 'src/themes/Mikings/ThankYouBox/ThankYouBox';
+@use 'src/themes/Mikings/Footer/SelectionInput';
+@use 'src/themes/Mikings/DonationForm/MultiStepDonation';
+@use 'src/themes/Mikings/DonationForm/Forms/UpgradeToYearlyButtonForm';
+@use 'src/themes/Mikings/DonationForm/SubComponents/SelectGroup';
+@use 'src/themes/Mikings/DonationForm/SubComponents/SelectCustomAmount';
+@use 'src/themes/Mikings/DonationForm/SubComponents/SmsBox';
+@use 'src/themes/Mikings/Message/Message';
+@use 'src/themes/Mikings/Slider/Slider' with (
+	$pagination-padding: 10px,
+	$pagination-height: 40px
+);
+@use 'src/themes/Mikings/SoftClose/SoftClose';
+@use 'src/themes/Mikings/ProgressBar/ProgressBar';
+@use 'src/components/ReasonsToDonate/styles/swatches/skin_default' as reasons-default;
+@use 'src/components/ReasonsToDonate/styles/ReasonsToDonate';
diff --git a/campaign_info.toml b/campaign_info.toml
index ccc6adb5d..72b912a28 100644
--- a/campaign_info.toml
+++ b/campaign_info.toml
@@ -6,9 +6,9 @@
 [desktop]
 name = "Desktop"
 icon = "desktop"
-campaign = "C24_WMDE_Desktop_DE_13"
-description = "Based on the CTRL banner of C24_WMDE_Desktop_DE_12, VAR uses transaction fees"
-campaign_tracking = "13-ba-241113"
+campaign = "C24_WMDE_Desktop_DE_14"
+description = "Based on the CTRL banner of C24_WMDE_Desktop_DE_13, VAR adds additional copy, displays the '10 good reasons' overlay when the link in the added copy is clicked"
+campaign_tracking = "14-ba-241119"
 preview_link = "/wiki/Wikipedia:Hauptseite?devbanner={{banner}}&banner=B22_WMDE_local_prototype"
 preview_link_darkmode = "/wiki/Wikipedia:Hauptseite?devbanner={{banner}}&banner=B22_WMDE_local_prototype&vectornightmode=1"
 preview_url = 'https://de.wikipedia.org/wiki/Wikipedia:Hauptseite?banner={{banner}}&devMode'
@@ -17,14 +17,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_13/banner_ctrl.ts"
-pagename = "B24_WMDE_Desktop_DE_13_ctrl"
-tracking = "org-13-241113-ctrl"
+filename = "./banners/desktop/C24_WMDE_Desktop_DE_14/banner_ctrl.ts"
+pagename = "B24_WMDE_Desktop_DE_14_ctrl"
+tracking = "org-14-241119-ctrl"
 
 [desktop.banners.var]
-filename = "./banners/desktop/C24_WMDE_Desktop_DE_13/banner_var.ts"
-pagename = "B24_WMDE_Desktop_DE_13_var"
-tracking = "org-13-241113-var"
+filename = "./banners/desktop/C24_WMDE_Desktop_DE_14/banner_var.ts"
+pagename = "B24_WMDE_Desktop_DE_14_var"
+tracking = "org-14-241119-var"
 
 [desktop.test_matrix]
 platform = ["edge", "firefox_win10", "chrome_win10", "safari", "firefox_macos", "chrome_macos", "firefox_linux", "chrome_linux"]
@@ -34,9 +34,9 @@ resolution = ["800x600", "1024x768", "1280x960", "1600x1200", "1920x1200", "2560
 [mobile]
 name = "Mobile"
 icon = "mobile"
-campaign = "C24_WMDE_Mobile_DE_08"
-description = "Based on CTRL of C24_WMDE_Mobile_DE_07, VAR has different copy."
-campaign_tracking = "mob-de-08-ba-241112"
+campaign = "C24_WMDE_Mobile_DE_09"
+description = "Based on VAR of C24_WMDE_Mobile_DE_08, VAR has 10 reasons pop-up."
+campaign_tracking = "mob-de-09-ba-241118"
 preview_link = "/mobile/wiki/Wikipedia:Hauptseite?devbanner={{banner}}&banner=B22_WMDE_local_prototype&useskin=minerva"
 preview_link_darkmode = "/mobile/wiki/Wikipedia:Hauptseite?devbanner={{banner}}&banner=B22_WMDE_local_prototype&useskin=minerva&minervanightmode=1"
 preview_url = 'https://de.m.wikipedia.org/wiki/Wikipedia:Hauptseite?banner={{banner}}&useskin=minerva&devMode'
@@ -45,14 +45,14 @@ use_of_funds_source = "MediaWiki:WMDE_Fundraising/UseOfFunds_2024_DE"
 
 # Banners of the campaign, key after "banners" can be anything
 [mobile.banners.ctrl]
-filename = "./banners/mobile/C24_WMDE_Mobile_DE_08/banner_ctrl.ts"
-pagename = "B24_WMDE_Mobile_DE_08_ctrl"
-tracking = "org-mob08-241112-ctrl"
+filename = "./banners/mobile/C24_WMDE_Mobile_DE_09/banner_ctrl.ts"
+pagename = "B24_WMDE_Mobile_DE_09_ctrl"
+tracking = "org-mob09-241118-ctrl"
 
 [mobile.banners.var]
-filename = "./banners/mobile/C24_WMDE_Mobile_DE_08/banner_var.ts"
-pagename = "B24_WMDE_Mobile_DE_08_var"
-tracking = "org-mob08-241112-var"
+filename = "./banners/mobile/C24_WMDE_Mobile_DE_09/banner_var.ts"
+pagename = "B24_WMDE_Mobile_DE_09_var"
+tracking = "org-mob09-241118-var"
 
 [mobile.test_matrix]
 device = [ 'samsung_s10', 'iphone_xs_max', 'iphone_5s', 'iphone_se', "iphone_8", "iphone_12_mini", "iphone_7_plus", "iphone_11_pro_max"]
diff --git a/src/components/ReasonsToDonate/ReasonsToDonate.vue b/src/components/ReasonsToDonate/ReasonsToDonate.vue
index 37827dbc7..9994eb9fb 100644
--- a/src/components/ReasonsToDonate/ReasonsToDonate.vue
+++ b/src/components/ReasonsToDonate/ReasonsToDonate.vue
@@ -14,7 +14,7 @@
 					class="wmde-banner-10-reasons-accordion-title"
 					tabindex="0"
 					:class="$translate( `reasons-${index}-class` )"
-					@click="$emit( 'accordionItemClicked', index.toString() )"
+					@click="$emit( 'accordionItemClicked', { itemNumber: index.toString() } )"
 				>
 					<span><span class="wmde-banner-10-reasons-accordion-title-index">{{ index }}.</span>{{ $translate( `reasons-${index}-title` ) }}</span>
 					<span class="wmde-banner-10-reasons-accordion-title-chevron"><ChevronDownIcon/></span>
@@ -41,7 +41,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref, watch } from 'vue';
+import { ref, watch } from 'vue';
 import IconClose from '@src/components/UseOfFunds/Icons/IconClose.vue';
 import ChevronDownIcon from '@src/components/ReasonsToDonate/Icons/ChevronDownIcon.vue';
 
@@ -65,8 +65,4 @@ watch( () => props.visible, ( newVisible: boolean ) => {
 	}
 } );
 
-const onNativeClose = (): void => emit( 'hide' );
-onMounted( () => reasonsDialogue.value.addEventListener( 'close', onNativeClose ) );
-onUnmounted( () => reasonsDialogue.value.removeEventListener( 'close', onNativeClose ) );
-
 </script>
diff --git a/src/components/ReasonsToDonate/messages/ReasonsToDonate.de.ts b/src/components/ReasonsToDonate/messages/ReasonsToDonate.de.ts
index 174211cda..fa85511dd 100644
--- a/src/components/ReasonsToDonate/messages/ReasonsToDonate.de.ts
+++ b/src/components/ReasonsToDonate/messages/ReasonsToDonate.de.ts
@@ -3,7 +3,7 @@ import { TranslationMessages } from '@src/Translator';
 const translations: TranslationMessages = {
 	'reasons-title': '10 Gründe, warum Sie für Wikipedia spenden sollten:',
 
-	'reasons-1-title': 'Etwas zurückgeben.',
+	'reasons-1-title': 'Etwas zurückgeben',
 	'reasons-1-content': 'Das kostenlose Wissen in Wikipedia hilft Ihnen regelmäßig weiter? Mit einer Spende geben Sie' +
 		' etwas zurück – und helfen uns damit sehr wirkungsvoll. Denn wir haben Kosten wie jede andere Top-Website der Welt.',
 	'reasons-1-class': 'reasons-giving-back',
@@ -13,49 +13,49 @@ const translations: TranslationMessages = {
 		' Denn dieses gigantische Wissensprojekt entsteht nur dank dieser unermüdlichen, ehrenamtlichen Arbeit.',
 	'reasons-2-class': 'reasons-giving-back',
 
-	'reasons-3-title': 'In (Ihr) Wissen investieren.',
+	'reasons-3-title': 'In (Ihr) Wissen investieren',
 	'reasons-3-content': 'Ihre Spende stellt sicher, dass Wikipedia auch in Zukunft wachsen und gedeihen kann. Und Sie damit' +
 		' weiterhin 24/7 auf kostenloses und fundiertes Wissen zugreifen können.',
 	'reasons-3-class': 'reasons-giving-back',
 
-	'reasons-4-title': 'Unabhängigkeit sichern.',
+	'reasons-4-title': 'Unabhängigkeit sichern',
 	'reasons-4-content': 'Wikipedia ist und bleibt unverkäuflich! Sie wird niemals Konzernen, Milliardären oder Regierungen' +
 		' gehören. Ihre Spende sichert die finanzielle Unabhängigkeit der Wikipedia. So bleiben ihre Inhalte neutral und vertrauenswürdig. ',
 	'reasons-4-class': 'reasons-knowledge',
 
-	'reasons-5-title': 'Freien Zugang zu Wissen ermöglichen.',
+	'reasons-5-title': 'Freien Zugang zu Wissen ermöglichen',
 	'reasons-5-content': 'Ihre Spende ermöglicht allen Menschen weltweit kostenfreien Zugang zu zuverlässigem, vertrauenswürdigem' +
 		' Wissen – unabhängig von Geld, Status und Herkunft.',
 	'reasons-5-class': 'reasons-knowledge',
 
-	'reasons-6-title': 'Den Fels in der Brandung stärken.',
+	'reasons-6-title': 'Den Fels in der Brandung stärken',
 	'reasons-6-content': 'Fake News, Manipulation, Desinformation und Zensur verbreiten sich rasant. Ihre Spende ermöglicht unsere' +
 		' Arbeit an technischen Lösungen zur Verbesserung der “Abwehrkräfte”, damit Wikipedia auch in Zukunft mit neutralem und gesichertem Wissen Orientierung gibt.',
 	'reasons-6-class': 'reasons-knowledge',
 
-	'reasons-7-title': 'Wissen bewahren.',
+	'reasons-7-title': 'Wissen bewahren',
 	'reasons-7-content': 'Wikipedia & Co. sichern Wissen in Form von Text, Bildern, Filmen und Daten im digitalen Raum. Ihre Spende' +
 		' trägt dazu bei, dass dieses kulturelle Erbe auch in Zukunft erhalten und für alle zugänglich ist.',
 	'reasons-7-class': 'reasons-knowledge',
 
-	'reasons-8-title': 'Die Freiwilligen unterstützen.',
+	'reasons-8-title': 'Die Freiwilligen unterstützen',
 	'reasons-8-content': 'Wir fördern die unermüdliche Arbeit der Freiwilligen für Wikipedia mit vielen Projekten und Aktivitäten. Ihre' +
 		' Spende hilft uns, diese Arbeit bestmöglich zu unterstützen, damit sich Wikipedia weiterentwickelt.',
 	'reasons-8-class': 'reasons-technical',
 
-	'reasons-9-title': 'Das technische Fundament finanzieren.',
+	'reasons-9-title': 'Das technische Fundament finanzieren',
 	'reasons-9-content': 'Der technische Betrieb der Wikimedia-Projekte verursacht hohe laufende Kosten. Ihre Spende hilft' +
 		' sicherzustellen, dass Wikipedia überall, jederzeit und schnell erreichbar ist sowie die höchsten Sicherheitsstandards erfüllt.',
 	'reasons-9-class': 'reasons-technical',
 
-	'reasons-10-title': 'Technische Innovationen ermöglichen.',
+	'reasons-10-title': 'Technische Innovationen ermöglichen',
 	'reasons-10-content': 'Ihre Spende ermöglicht technische Verbesserungen, damit die Nutzung von Wikipedia noch einfacher und' +
 		' vielfältiger wird. Zudem erleichtern wir durch ständige Optimierung der Software, dass die Freiwilligen die besten Bedingungen für ihre Arbeit vorfinden.',
 	'reasons-10-class': 'reasons-technical',
 
 	'reasons-final-content': '<strong>Überzeugt?</strong> Ganz gleich, ob Sie „Ihre“ Wikipedia unterstützen, die wichtige Rolle der' +
 		' Wikipedia für die ganze Gesellschaft stärken oder einfach nur Danke sagen wollen –',
-	'reasons-final-content-highlighted': 'Ihre Spende, ganz gleich, ob 5&nbsp;€ oder 50&nbsp;€, ist immer ein wichtiger Beitrag.',
+	'reasons-final-content-highlighted': 'Jede Spende, ob 5&nbsp;€ oder 50&nbsp;€, ist immer ein wichtiger Beitrag.',
 
 	'reasons-cta': 'Jetzt spenden'
 };
diff --git a/src/components/ReasonsToDonate/styles/ReasonsToDonate.scss b/src/components/ReasonsToDonate/styles/ReasonsToDonate.scss
index 3666a269f..3311d6834 100644
--- a/src/components/ReasonsToDonate/styles/ReasonsToDonate.scss
+++ b/src/components/ReasonsToDonate/styles/ReasonsToDonate.scss
@@ -169,7 +169,7 @@
 		}
 
 		&-accordion-content {
-			font-size: 14px;
+			font-size: 16px;
 			padding: 0 20px 14px 60px;
 		}
 
diff --git a/src/themes/Mikings/Message/Message.scss b/src/themes/Mikings/Message/Message.scss
new file mode 100644
index 000000000..7cf42649c
--- /dev/null
+++ b/src/themes/Mikings/Message/Message.scss
@@ -0,0 +1,18 @@
+.wmde-banner {
+	&-message {
+		button {
+			all: unset;
+		}
+
+		button,
+		a {
+			color: var( --content-link-color );
+			cursor: pointer;
+
+			&:hover,
+			&:focus {
+				color: var( --content-link-color-hover );
+			}
+		}
+	}
+}
diff --git a/src/themes/Mikings/Slider/Slider.scss b/src/themes/Mikings/Slider/Slider.scss
index 425961157..db7f47c1e 100644
--- a/src/themes/Mikings/Slider/Slider.scss
+++ b/src/themes/Mikings/Slider/Slider.scss
@@ -30,6 +30,21 @@ $pagination-height: 60px !default;
 				margin: 13px 0 16px;
 				padding: 0;
 			}
+
+			button {
+				all: unset;
+			}
+
+			button,
+			a {
+				color: var( --content-link-color );
+				cursor: pointer;
+
+				&:hover,
+				&:focus {
+					color: var( --content-link-color-hover );
+				}
+			}
 		}
 	}
 
diff --git a/src/themes/Mikings/swatches/color_light.scss b/src/themes/Mikings/swatches/color_light.scss
index 4b22b105f..e71d9ea01 100644
--- a/src/themes/Mikings/swatches/color_light.scss
+++ b/src/themes/Mikings/swatches/color_light.scss
@@ -40,6 +40,8 @@ $purple100: #6b4ba1;
 	--main-background: #{$white};
 	--main-color: #{$grey800};
 	--color-error: #{$error};
+	--content-link-color: #{$blue600};
+	--content-link-color-hover: #{$blue400};
 
 	--mini-background: #{$white};
 	--mini-border: #{$blue600};
diff --git a/src/themes/Svingle/Message/Message.scss b/src/themes/Svingle/Message/Message.scss
index e9c27dd1b..54f08cb75 100644
--- a/src/themes/Svingle/Message/Message.scss
+++ b/src/themes/Svingle/Message/Message.scss
@@ -39,5 +39,21 @@ $font-sizes: ( breakpoints.$extra-small: 18px ) !default;
 			text-align: center;
 			padding-bottom: 15px;
 		}
+
+		button {
+			all: unset;
+		}
+
+		button,
+		a {
+			color: var( --message-link );
+			text-decoration: underline;
+			cursor: pointer;
+
+			&:hover,
+			&:focus {
+				color: var( --message-link-hover );
+			}
+		}
 	}
 }
diff --git a/src/themes/Svingle/Slider/KeenSlider.scss b/src/themes/Svingle/Slider/KeenSlider.scss
index 37368198f..6fdd0e33d 100644
--- a/src/themes/Svingle/Slider/KeenSlider.scss
+++ b/src/themes/Svingle/Slider/KeenSlider.scss
@@ -47,6 +47,22 @@ $margin-bottom: 15px !default;
 			p:last-child {
 				margin: 0;
 			}
+
+			button {
+				all: unset;
+			}
+
+			button,
+			a {
+				color: var( --message-link );
+				text-decoration: underline;
+				cursor: pointer;
+
+				&:hover,
+				&:focus {
+					color: var( --message-link-hover );
+				}
+			}
 		}
 
 		&-title {
diff --git a/src/themes/Svingle/swatches/color_light.scss b/src/themes/Svingle/swatches/color_light.scss
index 491b138da..af7c99c8d 100644
--- a/src/themes/Svingle/swatches/color_light.scss
+++ b/src/themes/Svingle/swatches/color_light.scss
@@ -1,3 +1,6 @@
+$yellow100: #ffee00;
+$yellow200: #ffef9d;
+
 $white: #ffffff;
 $black: #000000;
 
@@ -43,6 +46,9 @@ $blue700: #2a4b8d;
 	--message-color: #{$white};
 	--message-border: #{$red600};
 
+	--message-link: #{$yellow100};
+	--message-link-hover: #{$yellow200};
+
 	--color-error: #{$red600};
 	--button-close-fill: #{$grey600};
 	--button-background: #{$red600};
diff --git a/src/tracking/events/ReasonsToDonateCTAClickedEvent.ts b/src/tracking/events/ReasonsToDonateCTAClickedEvent.ts
index e8f904855..5f41421e1 100644
--- a/src/tracking/events/ReasonsToDonateCTAClickedEvent.ts
+++ b/src/tracking/events/ReasonsToDonateCTAClickedEvent.ts
@@ -7,8 +7,4 @@ export class ReasonsToDonateCTAClickedEvent implements TrackingEvent<void> {
 	public readonly customData: void;
 	public readonly feature: TrackingFeatureName;
 	public readonly userChoice: string = '';
-
-	public constructor( feature: TrackingFeatureName ) {
-		this.feature = feature;
-	}
 }
diff --git a/src/tracking/events/ReasonsToDonateItemClickedEvent.ts b/src/tracking/events/ReasonsToDonateItemClickedEvent.ts
index efcbcc65d..cd50d8af2 100644
--- a/src/tracking/events/ReasonsToDonateItemClickedEvent.ts
+++ b/src/tracking/events/ReasonsToDonateItemClickedEvent.ts
@@ -8,8 +8,7 @@ export class ReasonsToDonateItemClickedEvent implements TrackingEvent<void> {
 	public readonly feature: TrackingFeatureName;
 	public readonly userChoice: string;
 
-	public constructor( feature: TrackingFeatureName, userChoice: string ) {
-		this.feature = feature;
+	public constructor( userChoice: string ) {
 		this.userChoice = userChoice;
 	}
 }
diff --git a/src/tracking/events/ReasonsToDonateShownEvent.ts b/src/tracking/events/ReasonsToDonateShownEvent.ts
index 0e571f519..71e66a662 100644
--- a/src/tracking/events/ReasonsToDonateShownEvent.ts
+++ b/src/tracking/events/ReasonsToDonateShownEvent.ts
@@ -7,8 +7,4 @@ export class ReasonsToDonateShownEvent implements TrackingEvent<void> {
 	public readonly customData: void;
 	public readonly feature: TrackingFeatureName;
 	public readonly userChoice: string = '';
-
-	public constructor( feature: TrackingFeatureName ) {
-		this.feature = feature;
-	}
 }
diff --git a/test/banners/desktop/C24_WMDE_Desktop_DE_14/components/BannerCtrl.spec.ts b/test/banners/desktop/C24_WMDE_Desktop_DE_14/components/BannerCtrl.spec.ts
new file mode 100644
index 000000000..f99dd53ba
--- /dev/null
+++ b/test/banners/desktop/C24_WMDE_Desktop_DE_14/components/BannerCtrl.spec.ts
@@ -0,0 +1,179 @@
+import { beforeEach, describe, test, vi } from 'vitest';
+import { mount, VueWrapper } from '@vue/test-utils';
+import Banner from '@banners/desktop/C24_WMDE_Desktop_DE_14/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( [
+			[ 'expectShowsLiveDateAndTimeInMessage' ],
+			[ 'expectShowsLiveDateAndTimeInSlideshow' ]
+		] )( '%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_14/components/BannerVar.spec.ts b/test/banners/desktop/C24_WMDE_Desktop_DE_14/components/BannerVar.spec.ts
new file mode 100644
index 000000000..f32edeea5
--- /dev/null
+++ b/test/banners/desktop/C24_WMDE_Desktop_DE_14/components/BannerVar.spec.ts
@@ -0,0 +1,213 @@
+import { beforeEach, describe, Mock, test, vi } from 'vitest';
+import { mount, VueWrapper } from '@vue/test-utils';
+import Banner from '@banners/desktop/C24_WMDE_Desktop_DE_14/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 { Timer } from '@src/utils/Timer';
+import { TimerStub } from '@test/fixtures/TimerStub';
+import { PageScroller } from '@src/utils/PageScroller/PageScroller';
+import { useReasonsToDonateFeatures, useReasonsToDonateScrollFeatures } from '@test/features/ReasonsToDonate';
+
+const formModel = useFormModel();
+const translator = ( key: string, context: any ): string => context ? `${key} -- ${Object.entries( context )}` : key;
+let pageScroller: PageScroller;
+let tracker: Tracker;
+
+describe( 'BannerVar.vue', () => {
+	let showCallback: Mock;
+	let closeCallback: Mock;
+
+	beforeEach( () => {
+		resetFormModel( formModel );
+		pageScroller = {
+			scrollIntoView: vi.fn(),
+			scrollToTop: vi.fn()
+		};
+		tracker = {
+			trackEvent: vi.fn()
+		};
+
+		// for the reasonsToDonate feature
+		showCallback = vi.fn();
+		closeCallback = vi.fn();
+		HTMLDialogElement.prototype.showModal = showCallback;
+		HTMLDialogElement.prototype.close = closeCallback;
+	} );
+
+	const getWrapper = ( dynamicContent: DynamicContent = null, timer: Timer = null ): VueWrapper<any> => {
+		return mount( Banner, {
+			attachTo: document.body,
+			props: {
+				bannerState: BannerStates.Pending,
+				useOfFundsContent,
+				pageScroller,
+				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: 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( [
+			[ 'expectShowsLiveDateAndTimeInMessage' ],
+			[ 'expectShowsLiveDateAndTimeInSlideshow' ]
+		] )( '%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() );
+		} );
+	} );
+
+	describe( 'Reasons to Donate', () => {
+		test.each( [
+			[ 'expectContainsReasonsToDonateDialogue' ],
+			[ 'expectTracksReasonsToDonateShownEvent' ],
+			[ 'expectTracksReasonsToDonateCTAClickedEvent' ],
+			[ 'expectTracksReasonsToDonateItemClickedEvent' ]
+		] )( '%s', async ( testName: string ) => {
+			await useReasonsToDonateFeatures[ testName ]( getWrapper(), tracker );
+		} );
+
+		test.each( [
+			[ 'expectScrollsToFormWhenCallToActionIsClicked' ]
+		] )( '%s', async ( testName: string ) => {
+			await useReasonsToDonateScrollFeatures[ testName ]( getWrapper(), pageScroller );
+		} );
+	} );
+
+} );
diff --git a/test/banners/desktop/C24_WMDE_Desktop_DE_14/components/FallbackBanner.spec.ts b/test/banners/desktop/C24_WMDE_Desktop_DE_14/components/FallbackBanner.spec.ts
new file mode 100644
index 000000000..9a4430d88
--- /dev/null
+++ b/test/banners/desktop/C24_WMDE_Desktop_DE_14/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_14/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/mobile/C24_WMDE_Mobile_DE_09/components/BannerCtrl.spec.ts b/test/banners/mobile/C24_WMDE_Mobile_DE_09/components/BannerCtrl.spec.ts
new file mode 100644
index 000000000..1631ad80f
--- /dev/null
+++ b/test/banners/mobile/C24_WMDE_Mobile_DE_09/components/BannerCtrl.spec.ts
@@ -0,0 +1,181 @@
+import { afterEach, beforeEach, describe, test, vi } from 'vitest';
+import { mount, VueWrapper } from '@vue/test-utils';
+import Banner from '@banners/mobile/C24_WMDE_Mobile_DE_09/components/BannerCtrl.vue';
+import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
+import { PageScroller } from '@src/utils/PageScroller/PageScroller';
+import { useOfFundsContent } from '@test/banners/useOfFundsContent';
+import { newDynamicContent } from '@test/banners/dynamicCampaignContent';
+import { CurrencyEn } from '@src/utils/DynamicContent/formatters/CurrencyEn';
+import { formItems } from '@test/banners/formItems';
+import { softCloseFeatures } from '@test/features/SoftCloseMobile';
+import { useOfFundsFeatures, useOfFundsScrollFeatures } from '@test/features/UseOfFunds';
+import { miniBannerFeatures } from '@test/features/MiniBanner';
+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 { fullPageBannerFeatures } from '@test/features/FullPageBanner';
+import { formActionSwitchFeatures } from '@test/features/form_action_switch/MainDonation_UpgradeToYearlyButton';
+import { Tracker } from '@src/tracking/Tracker';
+import { bannerContentAnimatedTextFeatures, bannerContentDateAndTimeFeatures } from '@test/features/BannerContent';
+import { softCloseSubmitTrackingFeatures } from '@test/features/SoftCloseSubmitTracking';
+import { Timer } from '@src/utils/Timer';
+import { TimerStub } from '@test/fixtures/TimerStub';
+
+let pageScroller: PageScroller;
+let tracker: Tracker;
+const formModel = useFormModel();
+const translator = ( key: string ): string => key;
+describe( 'BannerCtrl.vue', () => {
+
+	let wrapper: VueWrapper<any>;
+	beforeEach( () => {
+		resetFormModel( formModel );
+
+		pageScroller = {
+			scrollIntoView: vi.fn(),
+			scrollToTop: vi.fn()
+		};
+
+		tracker = {
+			trackEvent: vi.fn()
+		};
+	} );
+
+	afterEach( () => {
+		wrapper.unmount();
+	} );
+
+	const getWrapper = ( dynamicContent: DynamicContent = null, timer: Timer = null ): VueWrapper<any> => {
+		// attachTo the document body to fix an issue with Vue Test Utils where
+		// clicking a submit button in a form does not fire the submit event
+		wrapper = mount( Banner, {
+			attachTo: document.body,
+			props: {
+				bannerState: BannerStates.Pending,
+				useOfFundsContent,
+				pageScroller,
+				remainingImpressions: 10,
+				localCloseTracker: {
+					getItem: () => '',
+					setItem: () => {}
+				}
+			},
+			global: {
+				mocks: {
+					$translate: translator
+				},
+				provide: {
+					translator: { translate: translator },
+					dynamicCampaignText: dynamicContent ?? newDynamicContent(),
+					formActions: { donateWithAddressAction: 'https://example.com/with-address', donateAnonymouslyAction: 'https://example.com/without-address' },
+					currencyFormatter: new CurrencyEn(),
+					formItems,
+					tracker,
+					timer: timer ?? new TimerStub()
+				}
+			}
+		} );
+
+		return wrapper;
+	};
+
+	describe( 'Content', () => {
+		test.each( [
+			[ 'expectShowsAnimatedVisitorsVsDonorsSentenceInMessage' ],
+			[ 'expectShowsAnimatedVisitorsVsDonorsSentenceInSlideShow' ],
+			[ 'expectHidesAnimatedVisitorsVsDonorsSentenceInMessage' ],
+			[ 'expectHidesAnimatedVisitorsVsDonorsSentenceInSlideShow' ]
+		] )( '%s', async ( testName: string ) => {
+			await bannerContentAnimatedTextFeatures[ testName ]( getWrapper );
+		} );
+
+		test.each( [
+			[ 'expectShowsLiveDateAndTimeInMiniBanner' ],
+			[ 'expectShowsLiveDateAndTimeInFullPageBanner' ]
+		] )( '%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' ],
+			[ 'expectUpgradeToYearlyFormSubmitsWithAddressForDirectDebit' ]
+		] )( '%s', async ( testName: string ) => {
+			await formActionSwitchFeatures[ testName ]( getWrapper() );
+		} );
+	} );
+
+	describe( 'Soft Close', () => {
+		test.each( [
+			[ 'expectShowsSoftCloseOnMiniBannerClose' ],
+			[ 'expectDoesNotShowSoftCloseOnFullBannerClose' ],
+			[ 'expectEmitsSoftCloseCloseEvent' ],
+			[ 'expectEmitsSoftCloseMaybeLaterEvent' ],
+			[ 'expectEmitsSoftCloseAlreadyDonatedEvent' ],
+			[ 'expectEmitsSoftCloseTimeOutEvent' ],
+			[ 'expectEmitsBannerContentChangedOnSoftClose' ],
+			[ 'expectDoesNotShowSoftCloseOnFinalBannerImpression' ]
+		] )( '%s', async ( testName: string ) => {
+			await softCloseFeatures[ testName ]( getWrapper );
+		} );
+	} );
+
+	describe( 'Soft Close Submit Tracking', () => {
+		test.each( [
+			[ 'expectStoresMaybeLateCloseChoice' ],
+			[ 'expectStoresCloseCloseChoice' ],
+			[ 'expectStoresAlreadyDonatedCloseChoice' ],
+			[ 'expectEmitsBannerSubmitOnReturnEvent' ],
+			[ 'expectDoesNotEmitsBannerSubmitOnReturnEventWhenLocalStorageItemIsMissing' ]
+		] )( '%s', async ( testName: string ) => {
+			await softCloseSubmitTrackingFeatures[ testName ]( getWrapper(), tracker );
+		} );
+	} );
+
+	describe( 'Use of Funds', () => {
+		test.each( [
+			[ 'expectShowsUseOfFunds' ],
+			[ 'expectHidesUseOfFunds' ]
+		] )( '%s', async ( testName: string ) => {
+			await useOfFundsFeatures[ testName ]( getWrapper() );
+		} );
+
+		test.each( [
+			[ 'expectScrollsToFormWhenCallToActionIsClicked' ],
+			[ 'expectScrollsToLinkWhenCloseIsClicked' ]
+		] )( '%s', async ( testName: string ) => {
+			await useOfFundsScrollFeatures[ testName ]( getWrapper(), pageScroller );
+		} );
+	} );
+
+	describe( 'Mini Banner', () => {
+		test.each( [
+			[ 'expectSlideShowPlaysWhenMiniBannerBecomesVisible' ],
+			[ 'expectSlideShowStopsWhenFullBannerBecomesVisible' ],
+			[ 'expectShowsFullPageWhenCallToActionIsClicked' ],
+			[ 'expectEmitsBannerContentChangedEventWhenCallToActionIsClicked' ]
+		] )( '%s', async ( testName: string ) => {
+			await miniBannerFeatures[ testName ]( getWrapper() );
+		} );
+	} );
+
+	describe( 'Full Page Banner', () => {
+		test.each( [
+			[ 'expectEmitsCloseEvent' ]
+		] )( '%s', async ( testName: string ) => {
+			await fullPageBannerFeatures[ testName ]( getWrapper() );
+		} );
+	} );
+} );
diff --git a/test/banners/mobile/C24_WMDE_Mobile_DE_09/components/BannerVar.spec.ts b/test/banners/mobile/C24_WMDE_Mobile_DE_09/components/BannerVar.spec.ts
new file mode 100644
index 000000000..ec83a0e5a
--- /dev/null
+++ b/test/banners/mobile/C24_WMDE_Mobile_DE_09/components/BannerVar.spec.ts
@@ -0,0 +1,207 @@
+import { afterEach, beforeEach, describe, Mock, test, vi } from 'vitest';
+import { mount, VueWrapper } from '@vue/test-utils';
+import Banner from '@banners/mobile/C24_WMDE_Mobile_DE_09/components/BannerVar.vue';
+import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
+import { PageScroller } from '@src/utils/PageScroller/PageScroller';
+import { useOfFundsContent } from '@test/banners/useOfFundsContent';
+import { newDynamicContent } from '@test/banners/dynamicCampaignContent';
+import { CurrencyEn } from '@src/utils/DynamicContent/formatters/CurrencyEn';
+import { formItems } from '@test/banners/formItems';
+import { softCloseFeatures } from '@test/features/SoftCloseMobile';
+import { useOfFundsFeatures, useOfFundsScrollFeatures } from '@test/features/UseOfFunds';
+import { miniBannerFeatures } from '@test/features/MiniBanner';
+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 { fullPageBannerFeatures } from '@test/features/FullPageBanner';
+import { formActionSwitchFeatures } from '@test/features/form_action_switch/MainDonation_UpgradeToYearlyButton';
+import { Tracker } from '@src/tracking/Tracker';
+import { bannerContentAnimatedTextFeatures, bannerContentDateAndTimeFeatures } from '@test/features/BannerContent';
+import { softCloseSubmitTrackingFeatures } from '@test/features/SoftCloseSubmitTracking';
+import { Timer } from '@src/utils/Timer';
+import { TimerStub } from '@test/fixtures/TimerStub';
+import { useReasonsToDonateFeatures, useReasonsToDonateScrollFeatures } from '@test/features/ReasonsToDonate';
+
+let pageScroller: PageScroller;
+let tracker: Tracker;
+const formModel = useFormModel();
+const translator = ( key: string ): string => key;
+describe( 'BannerVar.vue', () => {
+	let showCallback: Mock;
+	let closeCallback: Mock;
+
+	let wrapper: VueWrapper<any>;
+	beforeEach( () => {
+		resetFormModel( formModel );
+
+		pageScroller = {
+			scrollIntoView: vi.fn(),
+			scrollToTop: vi.fn()
+		};
+
+		tracker = {
+			trackEvent: vi.fn()
+		};
+
+		// for the reasonsToDonate feature
+		showCallback = vi.fn();
+		closeCallback = vi.fn();
+		HTMLDialogElement.prototype.showModal = showCallback;
+		HTMLDialogElement.prototype.close = closeCallback;
+	} );
+
+	afterEach( () => {
+		wrapper.unmount();
+	} );
+
+	const getWrapper = ( dynamicContent: DynamicContent = null, timer: Timer = null ): VueWrapper<any> => {
+		// attachTo the document body to fix an issue with Vue Test Utils where
+		// clicking a submit button in a form does not fire the submit event
+		wrapper = mount( Banner, {
+			attachTo: document.body,
+			props: {
+				bannerState: BannerStates.Pending,
+				useOfFundsContent,
+				pageScroller,
+				remainingImpressions: 10,
+				localCloseTracker: {
+					getItem: () => '',
+					setItem: () => {}
+				}
+			},
+			global: {
+				mocks: {
+					$translate: translator
+				},
+				provide: {
+					translator: { translate: translator },
+					dynamicCampaignText: dynamicContent ?? newDynamicContent(),
+					formActions: { donateWithAddressAction: 'https://example.com/with-address', donateAnonymouslyAction: 'https://example.com/without-address' },
+					currencyFormatter: new CurrencyEn(),
+					formItems,
+					tracker: tracker,
+					timer: timer ?? new TimerStub()
+				}
+			}
+		} );
+
+		return wrapper;
+	};
+
+	describe( 'Content', () => {
+		test.each( [
+			[ 'expectShowsAnimatedVisitorsVsDonorsSentenceInMessage' ],
+			[ 'expectShowsAnimatedVisitorsVsDonorsSentenceInSlideShow' ],
+			[ 'expectHidesAnimatedVisitorsVsDonorsSentenceInMessage' ],
+			[ 'expectHidesAnimatedVisitorsVsDonorsSentenceInSlideShow' ]
+		] )( '%s', async ( testName: string ) => {
+			await bannerContentAnimatedTextFeatures[ testName ]( getWrapper );
+		} );
+
+		test.each( [
+			[ 'expectShowsLiveDateAndTimeInMiniBanner' ],
+			[ 'expectShowsLiveDateAndTimeInFullPageBanner' ]
+		] )( '%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' ],
+			[ 'expectUpgradeToYearlyFormSubmitsWithAddressForDirectDebit' ]
+		] )( '%s', async ( testName: string ) => {
+			await formActionSwitchFeatures[ testName ]( getWrapper() );
+		} );
+	} );
+
+	describe( 'Soft Close', () => {
+		test.each( [
+			[ 'expectShowsSoftCloseOnMiniBannerClose' ],
+			[ 'expectDoesNotShowSoftCloseOnFullBannerClose' ],
+			[ 'expectEmitsSoftCloseCloseEvent' ],
+			[ 'expectEmitsSoftCloseMaybeLaterEvent' ],
+			[ 'expectEmitsSoftCloseAlreadyDonatedEvent' ],
+			[ 'expectEmitsSoftCloseTimeOutEvent' ],
+			[ 'expectEmitsBannerContentChangedOnSoftClose' ],
+			[ 'expectDoesNotShowSoftCloseOnFinalBannerImpression' ]
+		] )( '%s', async ( testName: string ) => {
+			await softCloseFeatures[ testName ]( getWrapper );
+		} );
+	} );
+
+	describe( 'Soft Close Submit Tracking', () => {
+		test.each( [
+			[ 'expectStoresMaybeLateCloseChoice' ],
+			[ 'expectStoresCloseCloseChoice' ],
+			[ 'expectStoresAlreadyDonatedCloseChoice' ],
+			[ 'expectEmitsBannerSubmitOnReturnEvent' ],
+			[ 'expectDoesNotEmitsBannerSubmitOnReturnEventWhenLocalStorageItemIsMissing' ]
+		] )( '%s', async ( testName: string ) => {
+			await softCloseSubmitTrackingFeatures[ testName ]( getWrapper(), tracker );
+		} );
+	} );
+
+	describe( 'Use of Funds', () => {
+		test.each( [
+			[ 'expectShowsUseOfFunds' ],
+			[ 'expectHidesUseOfFunds' ]
+		] )( '%s', async ( testName: string ) => {
+			await useOfFundsFeatures[ testName ]( getWrapper() );
+		} );
+
+		test.each( [
+			[ 'expectScrollsToFormWhenCallToActionIsClicked' ],
+			[ 'expectScrollsToLinkWhenCloseIsClicked' ]
+		] )( '%s', async ( testName: string ) => {
+			await useOfFundsScrollFeatures[ testName ]( getWrapper(), pageScroller );
+		} );
+	} );
+
+	describe( 'Reasons to Donate', () => {
+		test.each( [
+			[ 'expectContainsReasonsToDonateDialogue' ],
+			[ 'expectTracksReasonsToDonateShownEvent' ],
+			[ 'expectTracksReasonsToDonateCTAClickedEvent' ],
+			[ 'expectTracksReasonsToDonateItemClickedEvent' ]
+		] )( '%s', async ( testName: string ) => {
+			await useReasonsToDonateFeatures[ testName ]( getWrapper(), tracker );
+		} );
+
+		test.each( [
+			[ 'expectScrollsToFormWhenCallToActionIsClicked' ]
+		] )( '%s', async ( testName: string ) => {
+			await useReasonsToDonateScrollFeatures[ testName ]( getWrapper(), pageScroller );
+		} );
+	} );
+
+	describe( 'Mini Banner', () => {
+		test.each( [
+			[ 'expectSlideShowPlaysWhenMiniBannerBecomesVisible' ],
+			[ 'expectSlideShowStopsWhenFullBannerBecomesVisible' ],
+			[ 'expectShowsFullPageWhenCallToActionIsClicked' ],
+			[ 'expectEmitsBannerContentChangedEventWhenCallToActionIsClicked' ]
+		] )( '%s', async ( testName: string ) => {
+			await miniBannerFeatures[ testName ]( getWrapper() );
+		} );
+	} );
+
+	describe( 'Full Page Banner', () => {
+		test.each( [
+			[ 'expectEmitsCloseEvent' ]
+		] )( '%s', async ( testName: string ) => {
+			await fullPageBannerFeatures[ testName ]( getWrapper() );
+		} );
+	} );
+} );
diff --git a/test/components/ReasonsToDonate/ReasonsToDonate.spec.ts b/test/components/ReasonsToDonate/ReasonsToDonate.spec.ts
index eb5df1a92..bc16e841c 100644
--- a/test/components/ReasonsToDonate/ReasonsToDonate.spec.ts
+++ b/test/components/ReasonsToDonate/ReasonsToDonate.spec.ts
@@ -59,8 +59,8 @@ describe( 'ReasonsToDonate.vue', () => {
 		await wrapper.find( '.wmde-banner-10-reasons-accordion-item:nth-child(8) .wmde-banner-10-reasons-accordion-title' ).trigger( 'click' );
 
 		expect( wrapper.emitted( 'accordionItemClicked' ).length ).toStrictEqual( 2 );
-		expect( wrapper.emitted( 'accordionItemClicked' )[ 0 ][ 0 ] ).toStrictEqual( '1' );
-		expect( wrapper.emitted( 'accordionItemClicked' )[ 1 ][ 0 ] ).toStrictEqual( '8' );
+		expect( wrapper.emitted( 'accordionItemClicked' )[ 0 ][ 0 ] ).toStrictEqual( { itemNumber: '1' } );
+		expect( wrapper.emitted( 'accordionItemClicked' )[ 1 ][ 0 ] ).toStrictEqual( { itemNumber: '8' } );
 
 		await wrapper.find( '.wmde-banner-10-reasons-cta button' ).trigger( 'click' );
 		expect( wrapper.emitted( 'callToActionClicked' ).length ).toStrictEqual( 1 );
diff --git a/test/features/ReasonsToDonate.ts b/test/features/ReasonsToDonate.ts
new file mode 100644
index 000000000..ca9593977
--- /dev/null
+++ b/test/features/ReasonsToDonate.ts
@@ -0,0 +1,58 @@
+import { VueWrapper } from '@vue/test-utils';
+import { expect } from 'vitest';
+import { PageScroller } from '@src/utils/PageScroller/PageScroller';
+import { Tracker } from '@src/tracking/Tracker';
+import { ReasonsToDonateShownEvent } from '@src/tracking/events/ReasonsToDonateShownEvent';
+import { ReasonsToDonateCTAClickedEvent } from '@src/tracking/events/ReasonsToDonateCTAClickedEvent';
+import { ReasonsToDonateItemClickedEvent } from '@src/tracking/events/ReasonsToDonateItemClickedEvent';
+import ReasonsToDonate from '@src/components/ReasonsToDonate/ReasonsToDonate.vue';
+
+const expectContainsReasonsToDonateDialogue = async ( wrapper: VueWrapper<any> ): Promise<any> => {
+	expect( wrapper.findComponent( ReasonsToDonate ).exists() ).toBeTruthy();
+};
+
+const expectScrollsToFormWhenCallToActionIsClicked = async ( wrapper: VueWrapper<any>, pageScroller: PageScroller ): Promise<any> => {
+	await wrapper.find( '.wmde-banner-reasons-to-donate-link' ).trigger( 'click' );
+	await wrapper.find( '.wmde-banner-10-reasons-cta button' ).trigger( 'click' );
+
+	expect( pageScroller.scrollIntoView ).toHaveBeenCalledOnce();
+	expect( pageScroller.scrollIntoView ).toHaveBeenCalledWith( '.wmde-banner-form' );
+};
+
+const expectTracksReasonsToDonateShownEvent = async ( wrapper: VueWrapper<any>, tracker: Tracker ): Promise<any> => {
+
+	await wrapper.find( '.wmde-banner-reasons-to-donate-link' ).trigger( 'click' );
+
+	expect( tracker.trackEvent ).toHaveBeenCalledOnce();
+	expect( tracker.trackEvent ).toHaveBeenCalledWith( new ReasonsToDonateShownEvent() );
+};
+
+const expectTracksReasonsToDonateCTAClickedEvent = async ( wrapper: VueWrapper<any>, tracker: Tracker ): Promise<any> => {
+	await wrapper.find( '.wmde-banner-reasons-to-donate-link' ).trigger( 'click' );
+
+	await wrapper.find( '.wmde-banner-10-reasons-cta button' ).trigger( 'click' );
+
+	expect( tracker.trackEvent ).toHaveBeenCalledTimes( 2 );
+	expect( tracker.trackEvent ).toBeCalledWith( new ReasonsToDonateCTAClickedEvent() );
+};
+
+const expectTracksReasonsToDonateItemClickedEvent = async ( wrapper: VueWrapper<any>, tracker: Tracker ): Promise<any> => {
+	await wrapper.find( '.wmde-banner-reasons-to-donate-link' ).trigger( 'click' );
+
+	const itemNumber = '5';
+	await wrapper.find( `.wmde-banner-10-reasons-accordion-item:nth-child(${itemNumber}) .wmde-banner-10-reasons-accordion-title` ).trigger( 'click' );
+
+	expect( tracker.trackEvent ).toHaveBeenCalledWith( new ReasonsToDonateItemClickedEvent( itemNumber ) );
+};
+
+export const useReasonsToDonateFeatures: Record<string, ( wrapper: VueWrapper<any>, tracker: Tracker ) => Promise<any>> = {
+	expectContainsReasonsToDonateDialogue,
+	expectTracksReasonsToDonateShownEvent,
+	expectTracksReasonsToDonateCTAClickedEvent,
+	expectTracksReasonsToDonateItemClickedEvent
+
+};
+
+export const useReasonsToDonateScrollFeatures: Record<string, ( wrapper: VueWrapper<any>, pageScroller: PageScroller ) => Promise<any>> = {
+	expectScrollsToFormWhenCallToActionIsClicked
+};