diff --git a/archive/desktop/C23_WMDE_Desktop_DE_14/banner_ctrl.ts b/archive/desktop/C23_WMDE_Desktop_DE_14/banner_ctrl.ts
index e23b384a0..d39b85b96 100644
--- a/archive/desktop/C23_WMDE_Desktop_DE_14/banner_ctrl.ts
+++ b/archive/desktop/C23_WMDE_Desktop_DE_14/banner_ctrl.ts
@@ -25,7 +25,7 @@ import { LocaleFactoryDe } from '@src/utils/LocaleFactory/LocaleFactoryDe';
 // Channel specific form setup
 import { createFormItems } from './form_items';
 import { createFormActions } from '@src/createFormActions';
-import { createFallbackDonationLink } from '@src/createFallbackDonationLink';
+import { createFallbackDonationURL } from '@src/createFallbackDonationURL';
 
 const localeFactory = new LocaleFactoryDe();
 const translator = new Translator( messages );
@@ -44,7 +44,7 @@ const app = createVueApp( BannerConductor, {
 	bannerProps: {
 		useOfFundsContent: localeFactory.getUseOfFundsLoader().getContent(),
 		remainingImpressions: impressionCount.getRemainingImpressions( page.getMaxBannerImpressions( 'desktop' ) ),
-		donationLink: createFallbackDonationLink( page.getTracking(), impressionCount )
+		donationLink: createFallbackDonationURL( page.getTracking(), impressionCount )
 	},
 	resizeHandler: new WindowResizeHandler(),
 	banner: Banner,
diff --git a/archive/desktop/C23_WMDE_Desktop_DE_14/banner_var.ts b/archive/desktop/C23_WMDE_Desktop_DE_14/banner_var.ts
index 32efe12c6..0a9d1795b 100644
--- a/archive/desktop/C23_WMDE_Desktop_DE_14/banner_var.ts
+++ b/archive/desktop/C23_WMDE_Desktop_DE_14/banner_var.ts
@@ -25,7 +25,7 @@ import { LocaleFactoryDe } from '@src/utils/LocaleFactory/LocaleFactoryDe';
 // Channel specific form setup
 import { createFormItems } from './form_items';
 import { createFormActions } from '@src/createFormActions';
-import { createFallbackDonationLink } from '@src/createFallbackDonationLink';
+import { createFallbackDonationURL } from '@src/createFallbackDonationURL';
 
 const localeFactory = new LocaleFactoryDe();
 const translator = new Translator( messages );
@@ -44,7 +44,7 @@ const app = createVueApp( BannerConductor, {
 	bannerProps: {
 		useOfFundsContent: localeFactory.getUseOfFundsLoader().getContent(),
 		remainingImpressions: impressionCount.getRemainingImpressions( page.getMaxBannerImpressions( 'desktop' ) ),
-		donationLink: createFallbackDonationLink( page.getTracking(), impressionCount )
+		donationLink: createFallbackDonationURL( page.getTracking(), impressionCount )
 	},
 	resizeHandler: new WindowResizeHandler(),
 	banner: Banner,
diff --git a/archive/desktop/C23_WMDE_Desktop_DE_15/banner_ctrl.ts b/archive/desktop/C23_WMDE_Desktop_DE_15/banner_ctrl.ts
index e23b384a0..d39b85b96 100644
--- a/archive/desktop/C23_WMDE_Desktop_DE_15/banner_ctrl.ts
+++ b/archive/desktop/C23_WMDE_Desktop_DE_15/banner_ctrl.ts
@@ -25,7 +25,7 @@ import { LocaleFactoryDe } from '@src/utils/LocaleFactory/LocaleFactoryDe';
 // Channel specific form setup
 import { createFormItems } from './form_items';
 import { createFormActions } from '@src/createFormActions';
-import { createFallbackDonationLink } from '@src/createFallbackDonationLink';
+import { createFallbackDonationURL } from '@src/createFallbackDonationURL';
 
 const localeFactory = new LocaleFactoryDe();
 const translator = new Translator( messages );
@@ -44,7 +44,7 @@ const app = createVueApp( BannerConductor, {
 	bannerProps: {
 		useOfFundsContent: localeFactory.getUseOfFundsLoader().getContent(),
 		remainingImpressions: impressionCount.getRemainingImpressions( page.getMaxBannerImpressions( 'desktop' ) ),
-		donationLink: createFallbackDonationLink( page.getTracking(), impressionCount )
+		donationLink: createFallbackDonationURL( page.getTracking(), impressionCount )
 	},
 	resizeHandler: new WindowResizeHandler(),
 	banner: Banner,
diff --git a/archive/desktop/C23_WMDE_Desktop_DE_15/banner_var.ts b/archive/desktop/C23_WMDE_Desktop_DE_15/banner_var.ts
index 0f55d41d2..dce2c6743 100644
--- a/archive/desktop/C23_WMDE_Desktop_DE_15/banner_var.ts
+++ b/archive/desktop/C23_WMDE_Desktop_DE_15/banner_var.ts
@@ -25,7 +25,7 @@ import { LocaleFactoryDe } from '@src/utils/LocaleFactory/LocaleFactoryDe';
 // Channel specific form setup
 import { createFormItems } from './form_items';
 import { createFormActions } from '@src/createFormActions';
-import { createFallbackDonationLink } from '@src/createFallbackDonationLink';
+import { createFallbackDonationURL } from '@src/createFallbackDonationURL';
 
 const localeFactory = new LocaleFactoryDe();
 const translator = new Translator( messages );
@@ -44,7 +44,7 @@ const app = createVueApp( BannerConductor, {
 	bannerProps: {
 		useOfFundsContent: localeFactory.getUseOfFundsLoader().getContent(),
 		remainingImpressions: impressionCount.getRemainingImpressions( page.getMaxBannerImpressions( 'desktop' ) ),
-		donationLink: createFallbackDonationLink( page.getTracking(), impressionCount )
+		donationLink: createFallbackDonationURL( page.getTracking(), impressionCount )
 	},
 	resizeHandler: new WindowResizeHandler(),
 	banner: Banner,
diff --git a/archive/mobile/C23_WMDE_Mobile_DE_10/banner_ctrl.ts b/archive/mobile/C23_WMDE_Mobile_DE_10/banner_ctrl.ts
new file mode 100644
index 000000000..d7abdd824
--- /dev/null
+++ b/archive/mobile/C23_WMDE_Mobile_DE_10/banner_ctrl.ts
@@ -0,0 +1,68 @@
+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';
+
+// Locale-specific imports
+import messages from './messages';
+import { LocaleFactoryDe } from '@src/utils/LocaleFactory/LocaleFactoryDe';
+
+// Channel specific form setup
+import { createFormItems } from './form_items';
+import { createFormActions } from '@src/createFormActions';
+
+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' ) )
+	},
+	resizeHandler: new WindowResizeHandler(),
+	banner: Banner,
+	impressionCount
+} );
+
+app.use( TranslationPlugin, translator );
+app.use( DynamicTextPlugin, {
+	campaignParameters: page.getCampaignParameters(),
+	date: new 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 ) );
+app.provide( 'tracker', tracker );
+
+app.mount( page.getBannerContainer() );
diff --git a/archive/mobile/C23_WMDE_Mobile_DE_10/banner_var.ts b/archive/mobile/C23_WMDE_Mobile_DE_10/banner_var.ts
new file mode 100644
index 000000000..462f8b66d
--- /dev/null
+++ b/archive/mobile/C23_WMDE_Mobile_DE_10/banner_var.ts
@@ -0,0 +1,68 @@
+import { createVueApp } from '@src/createVueApp';
+
+import './styles/styles.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';
+
+// 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';
+
+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' ) )
+	},
+	resizeHandler: new WindowResizeHandler(),
+	banner: Banner,
+	impressionCount
+} );
+
+app.use( TranslationPlugin, translator );
+app.use( DynamicTextPlugin, {
+	campaignParameters: page.getCampaignParameters(),
+	date: new 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 ) );
+app.provide( 'tracker', tracker );
+
+app.mount( page.getBannerContainer() );
diff --git a/archive/mobile/C23_WMDE_Mobile_DE_10/components/BannerCtrl.vue b/archive/mobile/C23_WMDE_Mobile_DE_10/components/BannerCtrl.vue
new file mode 100644
index 000000000..00b3f5797
--- /dev/null
+++ b/archive/mobile/C23_WMDE_Mobile_DE_10/components/BannerCtrl.vue
@@ -0,0 +1,194 @@
+<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"/>
+					</template>
+
+				</KeenSlider>
+			</template>
+		</MiniBanner>
+
+		<FullPageBanner
+			@showFundsModal="isFundsModalVisible = true"
+			@close="() => onClose( 'FullPageBanner', CloseChoices.Hide )"
+		>
+			<template #banner-text>
+				<BannerText/>
+			</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">
+
+					<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" @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"
+			@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.NoMoreBannersForCampaign )">
+					{{ $translate( 'soft-close-button-already-donated' ) }}
+				</button>
+			</template>
+		</SoftClose>
+
+		<FundsModal
+			:content="useOfFundsContent"
+			:is-funds-modal-visible="isFundsModalVisible"
+			@hideFundsModal="onHideFundsModal"
+		/>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
+import SoftClose from '@src/components/SoftClose/SoftClose.vue';
+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 UpgradeToYearlyButtonForm from '@src/components/DonationForm/Forms/UpgradeToYearlyButtonForm.vue';
+import BannerSlides from '../content/BannerSlides.vue';
+import BannerFooter from '@src/components/Footer/BannerFooter.vue';
+import ChevronLeftIcon from '@src/components/Icons/ChevronLeftIcon.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 {
+	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 ProgressBar from '@src/components/ProgressBar/ProgressBar.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;
+}
+
+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 ) );
+}
+
+function onSoftCloseClose( timer: number, feature: TrackingFeatureName, userChoice: CloseChoices ): void {
+	window.clearInterval( timer );
+	onClose( feature, userChoice );
+}
+
+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/archive/mobile/C23_WMDE_Mobile_DE_10/components/BannerVar.vue b/archive/mobile/C23_WMDE_Mobile_DE_10/components/BannerVar.vue
new file mode 100644
index 000000000..3a7298934
--- /dev/null
+++ b/archive/mobile/C23_WMDE_Mobile_DE_10/components/BannerVar.vue
@@ -0,0 +1,194 @@
+<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"/>
+					</template>
+
+				</KeenSlider>
+			</template>
+		</MiniBanner>
+
+		<FullPageBanner
+			@showFundsModal="isFundsModalVisible = true"
+			@close="() => onClose( 'FullPageBanner', CloseChoices.Hide )"
+		>
+			<template #banner-text>
+				<BannerText/>
+			</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">
+
+					<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" @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"
+			@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.NoMoreBannersForCampaign )">
+					{{ $translate( 'soft-close-button-already-donated' ) }}
+				</button>
+			</template>
+		</SoftClose>
+
+		<FundsModal
+			:content="useOfFundsContent"
+			:is-funds-modal-visible="isFundsModalVisible"
+			@hideFundsModal="onHideFundsModal"
+		/>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
+import SoftClose from '@src/components/SoftClose/SoftClose.vue';
+import { computed, inject, ref, watch } from 'vue';
+import FullPageBanner from './FullPageBannerVar.vue';
+import MiniBanner from './MiniBannerVar.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/BannerTextVar.vue';
+import UpgradeToYearlyButtonForm from '@src/components/DonationForm/Forms/UpgradeToYearlyButtonForm.vue';
+import BannerSlides from '../content/BannerSlidesVar.vue';
+import BannerFooter from '@src/components/Footer/BannerFooter.vue';
+import ChevronLeftIcon from '@src/components/Icons/ChevronLeftIcon.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 {
+	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 ProgressBar from '@src/components/ProgressBar/ProgressBar.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;
+}
+
+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 ) );
+}
+
+function onSoftCloseClose( timer: number, feature: TrackingFeatureName, userChoice: CloseChoices ): void {
+	window.clearInterval( timer );
+	onClose( feature, userChoice );
+}
+
+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/archive/mobile/C23_WMDE_Mobile_DE_10/components/FullPageBanner.vue b/archive/mobile/C23_WMDE_Mobile_DE_10/components/FullPageBanner.vue
new file mode 100644
index 000000000..89eb818a4
--- /dev/null
+++ b/archive/mobile/C23_WMDE_Mobile_DE_10/components/FullPageBanner.vue
@@ -0,0 +1,40 @@
+<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"/>
+
+			<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';
+
+defineEmits( [ 'close', 'showFundsModal' ] );
+
+</script>
diff --git a/banners/mobile/components/FullPageBannerVar.vue b/archive/mobile/C23_WMDE_Mobile_DE_10/components/FullPageBannerVar.vue
similarity index 100%
rename from banners/mobile/components/FullPageBannerVar.vue
rename to archive/mobile/C23_WMDE_Mobile_DE_10/components/FullPageBannerVar.vue
diff --git a/archive/mobile/C23_WMDE_Mobile_DE_10/components/MiniBanner.vue b/archive/mobile/C23_WMDE_Mobile_DE_10/components/MiniBanner.vue
new file mode 100644
index 000000000..851c00022
--- /dev/null
+++ b/archive/mobile/C23_WMDE_Mobile_DE_10/components/MiniBanner.vue
@@ -0,0 +1,38 @@
+<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">Ist Ihnen Wikipedia 10&nbsp;€ wert?</span>
+			</div>
+		</header>
+
+		<div class="wmde-banner-mini-slideshow">
+			<slot name="banner-slides"/>
+			<slot name="progress"/>
+		</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/archive/mobile/C23_WMDE_Mobile_DE_10/components/MiniBannerVar.vue b/archive/mobile/C23_WMDE_Mobile_DE_10/components/MiniBannerVar.vue
new file mode 100644
index 000000000..691ef9a8d
--- /dev/null
+++ b/archive/mobile/C23_WMDE_Mobile_DE_10/components/MiniBannerVar.vue
@@ -0,0 +1,38 @@
+<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">Ist dir Wikipedia 10&nbsp;€ wert?</span>
+			</div>
+		</header>
+
+		<div class="wmde-banner-mini-slideshow">
+			<slot name="banner-slides"/>
+			<slot name="progress"/>
+		</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/archive/mobile/C23_WMDE_Mobile_DE_10/content/BannerSlides.vue b/archive/mobile/C23_WMDE_Mobile_DE_10/content/BannerSlides.vue
new file mode 100644
index 000000000..ba9b83169
--- /dev/null
+++ b/archive/mobile/C23_WMDE_Mobile_DE_10/content/BannerSlides.vue
@@ -0,0 +1,60 @@
+<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 {{ currentDate }}, bitten wir Sie bescheiden, die Unabhängigkeit
+			von Wikipedia zu unterstützen.</p>
+	</KeenSliderSlide>
+
+	<KeenSliderSlide :is-current="currentSlide === 2">
+		<p>
+			Insgesamt spenden 99% nichts - sie übergehen diesen Aufruf. Die durchschnittliche Spende beträgt
+			22,25&nbsp;€, doch bereits 10&nbsp;€ helfen uns weiter.
+		</p>
+	</KeenSliderSlide>
+
+	<KeenSliderSlide :is-current="currentSlide === 3">
+		<p>
+			<AnimatedText :content="visitorsVsDonorsSentence"/>
+			Die meisten Menschen spenden, weil sie Wikipedia nützlich finden.
+		</p>
+	</KeenSliderSlide>
+
+	<KeenSliderSlide :is-current="currentSlide === 4">
+		<p>
+			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>
+	</KeenSliderSlide>
+
+</template>
+
+<script setup lang="ts">
+import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
+import { inject } from 'vue';
+import KeenSliderSlide from '@src/components/Slider/KeenSliderSlide.vue';
+import ProgressBar from '@src/components/ProgressBar/ProgressBar.vue';
+import AnimatedText from '@src/components/AnimatedText/AnimatedText.vue';
+
+interface Props {
+	currentSlide: number
+}
+
+defineProps<Props>();
+
+const {
+	currentDayName,
+	currentDate,
+	goalDonationSum,
+	visitorsVsDonorsSentence
+}: DynamicContent = inject( 'dynamicCampaignText' );
+
+</script>
diff --git a/banners/mobile/content/BannerSlidesVar.vue b/archive/mobile/C23_WMDE_Mobile_DE_10/content/BannerSlidesVar.vue
similarity index 100%
rename from banners/mobile/content/BannerSlidesVar.vue
rename to archive/mobile/C23_WMDE_Mobile_DE_10/content/BannerSlidesVar.vue
diff --git a/archive/mobile/C23_WMDE_Mobile_DE_10/content/BannerText.vue b/archive/mobile/C23_WMDE_Mobile_DE_10/content/BannerText.vue
new file mode 100644
index 000000000..dbf9d1b80
--- /dev/null
+++ b/archive/mobile/C23_WMDE_Mobile_DE_10/content/BannerText.vue
@@ -0,0 +1,31 @@
+<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 {{ currentDate }}, bitten wir Sie bescheiden, die Unabhängigkeit von
+				Wikipedia zu unterstützen. Insgesamt spenden 99% nichts - sie übergehen diesen Aufruf. Die
+				durchschnittliche Spende beträgt 22,25&nbsp;€, doch bereits 10&nbsp;€ helfen uns weiter.
+				<AnimatedText :content="visitorsVsDonorsSentence"/> Die meisten Menschen spenden, weil sie Wikipedia nützlich finden. Hat
+				Wikipedia Ihnen in diesem Jahr Wissen im Wert einer Tasse Kaffee geschenkt? Dann entscheide Sie sich,
+				eine der seltenen Ausnahmen zu sein, und geben Sie etwas zurück. Vielen Dank!
+			</p>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { inject } from 'vue';
+import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
+import AnimatedText from '@src/components/AnimatedText/AnimatedText.vue';
+
+const {
+	currentDayName,
+	currentDate,
+	visitorsVsDonorsSentence
+}: DynamicContent = inject( 'dynamicCampaignText' );
+
+</script>
diff --git a/banners/mobile/content/BannerTextVar.vue b/archive/mobile/C23_WMDE_Mobile_DE_10/content/BannerTextVar.vue
similarity index 100%
rename from banners/mobile/content/BannerTextVar.vue
rename to archive/mobile/C23_WMDE_Mobile_DE_10/content/BannerTextVar.vue
diff --git a/archive/mobile/C23_WMDE_Mobile_DE_10/event_map.ts b/archive/mobile/C23_WMDE_Mobile_DE_10/event_map.ts
new file mode 100644
index 000000000..bbfe83649
--- /dev/null
+++ b/archive/mobile/C23_WMDE_Mobile_DE_10/event_map.ts
@@ -0,0 +1,29 @@
+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';
+
+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 'UpgradeToYearlyForm':
+				return new WMDESizeIssueEvent( `submit-${e.userChoice}`, createViewportInfo(), 1 );
+			default:
+				return new WMDESizeIssueEvent( `submit`, createViewportInfo(), 1 );
+		}
+	} ]
+] );
diff --git a/archive/mobile/C23_WMDE_Mobile_DE_10/form_items.ts b/archive/mobile/C23_WMDE_Mobile_DE_10/form_items.ts
new file mode 100644
index 000000000..53c204d06
--- /dev/null
+++ b/archive/mobile/C23_WMDE_Mobile_DE_10/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/archive/mobile/C23_WMDE_Mobile_DE_10/messages.ts b/archive/mobile/C23_WMDE_Mobile_DE_10/messages.ts
new file mode 100644
index 000000000..cf8be364c
--- /dev/null
+++ b/archive/mobile/C23_WMDE_Mobile_DE_10/messages.ts
@@ -0,0 +1,31 @@
+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 SoftCloseDe from '@src/components/SoftClose/messages/SoftClose.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';
+
+const messages: TranslationMessages = {
+	...CustomAmountFormDe,
+	...DynamicCampaignTextDe,
+	...UpgradeToYearlyDe,
+	...SoftCloseDe,
+	...AddressFormDe,
+	...FooterDe,
+	...MainDonationFormDe,
+
+	// custom messages here
+	'address-type-notice-full': 'Nur so können wir Ihnen eine Spendenquittung per Post zusenden. Außerdem erhalten ' +
+		'Sie eine Bestätigung per E-Mail.',
+	'address-type-notice-none': 'Sie verzichten sowohl auf eine Spendenquittung als auch auf eine Bestätigung ' +
+		'per E-Mail. Sie erhalten von uns keine Information, wenn Wikipedia wieder Hilfe braucht.',
+	'soft-close-prompt': 'Wikipedia später unterstützen?',
+	'use-of-funds-link': 'Was Ihre Spende bewirkt',
+	'payment-bank-transfer': 'Überweisung',
+	'payment-sofort': 'Klarna',
+	'soft-close-button-already-donated': 'Habe schon gespendet'
+};
+
+export default messages;
diff --git a/banners/mobile/messages_var.ts b/archive/mobile/C23_WMDE_Mobile_DE_10/messages_var.ts
similarity index 100%
rename from banners/mobile/messages_var.ts
rename to archive/mobile/C23_WMDE_Mobile_DE_10/messages_var.ts
diff --git a/archive/mobile/C23_WMDE_Mobile_DE_10/styles/Banner.scss b/archive/mobile/C23_WMDE_Mobile_DE_10/styles/Banner.scss
new file mode 100644
index 000000000..faf723a8b
--- /dev/null
+++ b/archive/mobile/C23_WMDE_Mobile_DE_10/styles/Banner.scss
@@ -0,0 +1,56 @@
+@use 'src/themes/Mikings/variables/globals';
+@use 'src/themes/Mikings/variables/fonts';
+@use 'src/themes/Mikings/variables/colors';
+
+@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: colors.$white;
+
+		&--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/archive/mobile/C23_WMDE_Mobile_DE_10/styles/C23_WMDE_Mobile_DE_09.scss b/archive/mobile/C23_WMDE_Mobile_DE_10/styles/C23_WMDE_Mobile_DE_09.scss
new file mode 100644
index 000000000..d0400f287
--- /dev/null
+++ b/archive/mobile/C23_WMDE_Mobile_DE_10/styles/C23_WMDE_Mobile_DE_09.scss
@@ -0,0 +1,13 @@
+@use '@src/themes/Mikings/variables/colors';
+@use '@src/themes/Mikings/variables/breakpoints';
+
+.wmde-banner-soft-close-button-already-donated {
+	background: colors.$white;
+	border: 1px solid colors.$secondary;
+	color: colors.$secondary;
+	min-width: 190px;
+
+	@include breakpoints.phone-xs-up {
+		min-width: 190px;
+	}
+}
diff --git a/archive/mobile/C23_WMDE_Mobile_DE_10/styles/FullPageBanner.scss b/archive/mobile/C23_WMDE_Mobile_DE_10/styles/FullPageBanner.scss
new file mode 100644
index 000000000..22ef61757
--- /dev/null
+++ b/archive/mobile/C23_WMDE_Mobile_DE_10/styles/FullPageBanner.scss
@@ -0,0 +1,99 @@
+@use '@src/themes/Mikings/variables/colors';
+@use '@src/themes/Mikings/variables/globals';
+@use '@src/themes/Mikings/variables/_breakpoints.scss';
+
+.wmde-banner {
+	&-full {
+		border: 2px solid colors.$primary;
+		background: colors.$white;
+		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: colors.$white;
+			z-index: 99;
+			border-radius: 50%;
+
+			&:hover {
+				cursor: pointer;
+			}
+
+			.close-button {
+				text-decoration: underline;
+			}
+		}
+
+		&-info {
+			padding: 16px;
+		}
+
+		&-call-to-action {
+			position: relative;
+			color: colors.$white;
+			background: colors.$primary;
+			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: 4px 4px 0;
+				border-color: colors.$primary transparent transparent transparent;
+			}
+		}
+
+		.banner-text-title {
+			margin-right: 30px;
+		}
+
+		&-small-print {
+			text-align: center;
+			font-size: 12px;
+			margin-bottom: 16px;
+
+			a {
+				color: colors.$gray;
+
+				&:hover,
+				&:focus {
+					text-decoration: underline;
+				}
+			}
+		}
+	}
+}
diff --git a/archive/mobile/C23_WMDE_Mobile_DE_10/styles/MiniBanner.scss b/archive/mobile/C23_WMDE_Mobile_DE_10/styles/MiniBanner.scss
new file mode 100644
index 000000000..28c483f6e
--- /dev/null
+++ b/archive/mobile/C23_WMDE_Mobile_DE_10/styles/MiniBanner.scss
@@ -0,0 +1,157 @@
+@use '@src/themes/Mikings/variables/colors';
+@use '@src/themes/Mikings/variables/globals';
+@use 'sass:color';
+
+$height: 288px !default;
+
+.wmde-banner {
+	&-mini {
+		display: flex;
+		flex-direction: column;
+		min-height: $height;
+		padding: 16px 0;
+		position: relative;
+		border: 2px solid colors.$primary;
+		background: colors.$white;
+
+		&-close {
+			position: absolute;
+			height: 36px;
+			width: 36px;
+			top: 11px;
+			right: 16px;
+			text-align: center;
+			background: colors.$white;
+			padding: 10px;
+			z-index: 2;
+
+			&-button {
+				margin-top: auto;
+				float: right;
+				height: 16px;
+				line-height: 16px;
+				width: 16px;
+				background: colors.$white;
+				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: colors.$primary;
+					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: colors.$black;
+				background: colors.$white;
+				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-radius: 20px;
+			font-weight: bold;
+			color: colors.$white;
+			margin: 0 16px;
+			font-size: 14px;
+			white-space: nowrap;
+
+			@media ( min-width: 370px ) {
+				font-size: 16px;
+			}
+		}
+
+		&-button {
+			background: colors.$secondary;
+
+			&:hover,
+			&:focus {
+				background: colors.$secondary-hover;
+			}
+		}
+
+		&-button-preselect {
+			background: colors.$green;
+
+			&:hover,
+			&:focus {
+				background: color.adjust( colors.$green, $lightness: -5% );
+			}
+		}
+
+		.smallprint-mini {
+			text-align: center;
+			font-size: 11px;
+			margin-top: 12px;
+			margin-bottom: -5px;
+
+			a {
+				color: colors.$gray;
+
+				&:hover,
+				&:focus {
+					text-decoration: underline;
+				}
+			}
+		}
+	}
+}
diff --git a/archive/mobile/C23_WMDE_Mobile_DE_10/styles/styles.scss b/archive/mobile/C23_WMDE_Mobile_DE_10/styles/styles.scss
new file mode 100644
index 000000000..e18d10e5f
--- /dev/null
+++ b/archive/mobile/C23_WMDE_Mobile_DE_10/styles/styles.scss
@@ -0,0 +1,19 @@
+@use 'src/components/BannerConductor/banner-transition';
+@use 'src/themes/UseOfFunds/UseOfFunds';
+@use 'src/themes/Mikings/defaults';
+@use './Banner';
+@use './MiniBanner' with (
+	$height: 288px
+);
+@use './FullPageBanner';
+@use 'src/themes/Mikings/Footer/Footer';
+@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';
+@use 'src/themes/Mikings/SoftClose/SoftClose';
+@use 'src/themes/Mikings/ProgressBar/ProgressBar';
+@use './C23_WMDE_Mobile_DE_09';
diff --git a/banners/desktop/banner_ctrl.ts b/banners/desktop/banner_ctrl.ts
index e23b384a0..d39b85b96 100644
--- a/banners/desktop/banner_ctrl.ts
+++ b/banners/desktop/banner_ctrl.ts
@@ -25,7 +25,7 @@ import { LocaleFactoryDe } from '@src/utils/LocaleFactory/LocaleFactoryDe';
 // Channel specific form setup
 import { createFormItems } from './form_items';
 import { createFormActions } from '@src/createFormActions';
-import { createFallbackDonationLink } from '@src/createFallbackDonationLink';
+import { createFallbackDonationURL } from '@src/createFallbackDonationURL';
 
 const localeFactory = new LocaleFactoryDe();
 const translator = new Translator( messages );
@@ -44,7 +44,7 @@ const app = createVueApp( BannerConductor, {
 	bannerProps: {
 		useOfFundsContent: localeFactory.getUseOfFundsLoader().getContent(),
 		remainingImpressions: impressionCount.getRemainingImpressions( page.getMaxBannerImpressions( 'desktop' ) ),
-		donationLink: createFallbackDonationLink( page.getTracking(), impressionCount )
+		donationLink: createFallbackDonationURL( page.getTracking(), impressionCount )
 	},
 	resizeHandler: new WindowResizeHandler(),
 	banner: Banner,
diff --git a/banners/desktop/banner_var.ts b/banners/desktop/banner_var.ts
index d22c4c932..3d5165a1e 100644
--- a/banners/desktop/banner_var.ts
+++ b/banners/desktop/banner_var.ts
@@ -25,10 +25,10 @@ import { LocaleFactoryDe } from '@src/utils/LocaleFactory/LocaleFactoryDe';
 // Channel specific form setup
 import { createFormItems } from './form_items';
 import { createFormActions } from '@src/createFormActions';
-import { createFallbackDonationLink } from '@src/createFallbackDonationLink';
 import { LinearDailyDonorAverage } from '@src/utils/DynamicContent/LinearDailyDonorAverage';
 import { IntegerDe } from '@src/utils/DynamicContent/formatters/IntegerDe';
 import { visitorsVsDailyDonorsSentence } from './visitorsVsDailyDonorsSentence';
+import { createFallbackDonationURL } from '@src/createFallbackDonationURL';
 
 const date = new Date();
 const localeFactory = new LocaleFactoryDe();
@@ -50,7 +50,7 @@ const app = createVueApp( BannerConductor, {
 	bannerProps: {
 		useOfFundsContent: localeFactory.getUseOfFundsLoader().getContent(),
 		remainingImpressions: impressionCount.getRemainingImpressions( page.getMaxBannerImpressions( 'desktop' ) ),
-		donationLink: createFallbackDonationLink( page.getTracking(), impressionCount )
+		donationLink: createFallbackDonationURL( page.getTracking(), impressionCount )
 	},
 	resizeHandler: new WindowResizeHandler(),
 	banner: Banner,
diff --git a/banners/mobile/banner_var.ts b/banners/mobile/banner_var.ts
index 462f8b66d..f4762149e 100644
--- a/banners/mobile/banner_var.ts
+++ b/banners/mobile/banner_var.ts
@@ -19,12 +19,13 @@ import { LegacyTrackerWPORG } from '@src/tracking/LegacyTrackerWPORG';
 import eventMappings from './event_map';
 
 // Locale-specific imports
-import messages from './messages_var';
+import messages from './messages';
 import { LocaleFactoryDe } from '@src/utils/LocaleFactory/LocaleFactoryDe';
 
 // Channel specific form setup
 import { createFormItems } from './form_items';
 import { createFormActions } from '@src/createFormActions';
+import { createDonationURL } from '@src/createDonationURL';
 
 const localeFactory = new LocaleFactoryDe();
 const translator = new Translator( messages );
@@ -43,7 +44,8 @@ const app = createVueApp( BannerConductor, {
 	bannerProps: {
 		useOfFundsContent: localeFactory.getUseOfFundsLoader().getContent(),
 		pageScroller: new WindowPageScroller(),
-		remainingImpressions: impressionCount.getRemainingImpressions( page.getMaxBannerImpressions( 'mobile' ) )
+		remainingImpressions: impressionCount.getRemainingImpressions( page.getMaxBannerImpressions( 'mobile' ) ),
+		donationURL: createDonationURL( page.getTracking(), impressionCount, { amount: '1000' } )
 	},
 	resizeHandler: new WindowResizeHandler(),
 	banner: Banner,
diff --git a/banners/mobile/components/BannerCtrl.vue b/banners/mobile/components/BannerCtrl.vue
index 00b3f5797..2969751ed 100644
--- a/banners/mobile/components/BannerCtrl.vue
+++ b/banners/mobile/components/BannerCtrl.vue
@@ -9,7 +9,7 @@
 				<KeenSlider :with-navigation="false" :play="slideshowShouldPlay" :interval="5000">
 
 					<template #slides="{ currentSlide }: any">
-						<BannerSlides :currentSlide="currentSlide"/>
+						<BannerSlides :currentSlide="currentSlide" :play-live-text="contentState === ContentStates.Mini"/>
 					</template>
 
 				</KeenSlider>
@@ -21,7 +21,7 @@
 			@close="() => onClose( 'FullPageBanner', CloseChoices.Hide )"
 		>
 			<template #banner-text>
-				<BannerText/>
+				<BannerText :play-live-text="contentState === ContentStates.FullPage"/>
 			</template>
 
 			<template #progress>
diff --git a/banners/mobile/components/BannerVar.vue b/banners/mobile/components/BannerVar.vue
index 3a7298934..b85c0b12f 100644
--- a/banners/mobile/components/BannerVar.vue
+++ b/banners/mobile/components/BannerVar.vue
@@ -3,13 +3,13 @@
 		<MiniBanner
 			@close="onCloseMiniBanner"
 			@show-full-page-banner="onshowFullPageBanner"
-			@show-full-page-banner-preselected="onshowFullPageBannerPreselected"
+			@submit-10-euro="submit10Euro"
 		>
 			<template #banner-slides>
 				<KeenSlider :with-navigation="false" :play="slideshowShouldPlay" :interval="5000">
 
 					<template #slides="{ currentSlide }: any">
-						<BannerSlides :currentSlide="currentSlide"/>
+						<BannerSlides :currentSlide="currentSlide" :play-live-text="contentState === ContentStates.Mini"/>
 					</template>
 
 				</KeenSlider>
@@ -21,7 +21,7 @@
 			@close="() => onClose( 'FullPageBanner', CloseChoices.Hide )"
 		>
 			<template #banner-text>
-				<BannerText/>
+				<BannerText :play-live-text="contentState === ContentStates.FullPage"/>
 			</template>
 
 			<template #progress>
@@ -88,7 +88,7 @@
 import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
 import SoftClose from '@src/components/SoftClose/SoftClose.vue';
 import { computed, inject, ref, watch } from 'vue';
-import FullPageBanner from './FullPageBannerVar.vue';
+import FullPageBanner from './FullPageBanner.vue';
 import MiniBanner from './MiniBannerVar.vue';
 import FundsModal from '@src/components/UseOfFunds/FundsModal.vue';
 import { UseOfFundsContent as useOfFundsContentInterface } from '@src/domain/UseOfFunds/UseOfFundsContent';
@@ -96,9 +96,9 @@ import { UseOfFundsCloseSources } from '@src/components/UseOfFunds/UseOfFundsClo
 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/BannerTextVar.vue';
+import BannerText from '../content/BannerText.vue';
 import UpgradeToYearlyButtonForm from '@src/components/DonationForm/Forms/UpgradeToYearlyButtonForm.vue';
-import BannerSlides from '../content/BannerSlidesVar.vue';
+import BannerSlides from '../content/BannerSlides.vue';
 import BannerFooter from '@src/components/Footer/BannerFooter.vue';
 import ChevronLeftIcon from '@src/components/Icons/ChevronLeftIcon.vue';
 import KeenSlider from '@src/components/Slider/KeenSlider.vue';
@@ -115,6 +115,7 @@ import { CloseChoices } from '@src/domain/CloseChoices';
 import { CloseEvent } from '@src/tracking/events/CloseEvent';
 import { TrackingFeatureName } from '@src/tracking/TrackingEvent';
 import ProgressBar from '@src/components/ProgressBar/ProgressBar.vue';
+import { BannerSubmitEvent } from '@src/tracking/events/BannerSubmitEvent';
 
 enum ContentStates {
 	Mini = 'wmde-banner-wrapper--mini',
@@ -132,6 +133,7 @@ interface Props {
 	useOfFundsContent: useOfFundsContentInterface;
 	pageScroller: PageScroller;
 	remainingImpressions: number;
+	donationURL: string;
 }
 
 const props = defineProps<Props>();
@@ -176,11 +178,9 @@ function onshowFullPageBanner(): void {
 	tracker.trackEvent( new MobileMiniBannerExpandedEvent() );
 }
 
-function onshowFullPageBannerPreselected(): void {
-	slideShowStopped.value = true;
-	formModel.selectedAmount.value = '10';
-	contentState.value = ContentStates.FullPage;
-	tracker.trackEvent( new MobileMiniBannerExpandedEvent( 'preselected' ) );
+function submit10Euro(): void {
+	tracker.trackEvent( new BannerSubmitEvent( 'MiniBanner', 'donate-10-euro' ) );
+	window.location.href = props.donationURL;
 }
 
 const onHideFundsModal = ( payload: { source: UseOfFundsCloseSources } ): void => {
diff --git a/banners/mobile/components/MiniBannerVar.vue b/banners/mobile/components/MiniBannerVar.vue
index 691ef9a8d..069beb23f 100644
--- a/banners/mobile/components/MiniBannerVar.vue
+++ b/banners/mobile/components/MiniBannerVar.vue
@@ -8,7 +8,7 @@
 
 		<header class="wmde-banner-mini-headline">
 			<div class="wmde-banner-mini-headline-background">
-				<span class="wmde-banner-mini-headline-content">Ist dir Wikipedia 10&nbsp;€ wert?</span>
+				<span class="wmde-banner-mini-headline-content">Ist Ihnen Wikipedia 10&nbsp;€ wert?</span>
 			</div>
 		</header>
 
@@ -18,7 +18,7 @@
 		</div>
 
 		<div class="wmde-banner-mini-button-group">
-			<button class="wmde-banner-mini-button-preselect" @click="$emit( 'showFullPageBannerPreselected' )">
+			<button class="wmde-banner-mini-button-preselect" @click="$emit( 'submit10Euro' )">
 				Jetzt 10 &euro; spenden
 			</button>
 			<button class="wmde-banner-mini-button" @click="$emit( 'showFullPageBanner' )">
@@ -33,6 +33,6 @@
 
 import CloseIconMobile from '@src/components/Icons/CloseIconMobile.vue';
 
-defineEmits( [ 'showFullPageBanner', 'showFullPageBannerPreselected', 'close' ] );
+defineEmits( [ 'showFullPageBanner', 'submit10Euro', 'close' ] );
 
 </script>
diff --git a/banners/mobile/content/BannerSlides.vue b/banners/mobile/content/BannerSlides.vue
index ba9b83169..6980e6e0b 100644
--- a/banners/mobile/content/BannerSlides.vue
+++ b/banners/mobile/content/BannerSlides.vue
@@ -10,8 +10,8 @@
 			<strong>Hi,</strong>
 		</p>
 		<p>vielleicht kommen wir gerade ungelegen, aber dennoch: Klicken Sie jetzt bitte nicht weg! Am
-			heutigen {{ currentDayName }}, den {{ currentDate }}, bitten wir Sie bescheiden, die Unabhängigkeit
-			von Wikipedia zu unterstützen.</p>
+			heutigen {{ currentDayName }}, den {{ currentDateTime }}, bitten wir Sie bescheiden,
+			die Unabhängigkeit von Wikipedia zu unterstützen.</p>
 	</KeenSliderSlide>
 
 	<KeenSliderSlide :is-current="currentSlide === 2">
@@ -39,22 +39,34 @@
 
 <script setup lang="ts">
 import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
-import { inject } from 'vue';
+import { inject, onMounted, watch } from 'vue';
 import KeenSliderSlide from '@src/components/Slider/KeenSliderSlide.vue';
 import ProgressBar from '@src/components/ProgressBar/ProgressBar.vue';
 import AnimatedText from '@src/components/AnimatedText/AnimatedText.vue';
+import { useCurrentDateAndTime } from '@src/components/composables/useCurrentDateAndTime';
 
 interface Props {
+	playLiveText: boolean;
 	currentSlide: number
 }
 
-defineProps<Props>();
+const props = defineProps<Props>();
 
 const {
 	currentDayName,
-	currentDate,
+	getCurrentDateAndTime,
 	goalDonationSum,
 	visitorsVsDonorsSentence
 }: DynamicContent = inject( 'dynamicCampaignText' );
 
+const { currentDateTime, startTimer, stopTimer } = useCurrentDateAndTime( getCurrentDateAndTime );
+
+watch( () => props.playLiveText, ( shouldPlay: boolean ) => {
+	if ( !shouldPlay ) {
+		stopTimer();
+	}
+} );
+
+onMounted( startTimer );
+
 </script>
diff --git a/banners/mobile/content/BannerText.vue b/banners/mobile/content/BannerText.vue
index dbf9d1b80..669e20e53 100644
--- a/banners/mobile/content/BannerText.vue
+++ b/banners/mobile/content/BannerText.vue
@@ -6,7 +6,7 @@
 			</p>
 			<p>
 				vielleicht kommen wir gerade ungelegen, aber dennoch: Klicken Sie jetzt bitte nicht weg! Am heutigen
-				{{ currentDayName }}, den {{ currentDate }}, bitten wir Sie bescheiden, die Unabhängigkeit von
+				{{ currentDayName }}, den {{ currentDateTime }}, bitten wir Sie bescheiden, die Unabhängigkeit von
 				Wikipedia zu unterstützen. Insgesamt spenden 99% nichts - sie übergehen diesen Aufruf. Die
 				durchschnittliche Spende beträgt 22,25&nbsp;€, doch bereits 10&nbsp;€ helfen uns weiter.
 				<AnimatedText :content="visitorsVsDonorsSentence"/> Die meisten Menschen spenden, weil sie Wikipedia nützlich finden. Hat
@@ -18,14 +18,31 @@
 </template>
 
 <script setup lang="ts">
-import { inject } from 'vue';
+import { inject, watch } from 'vue';
 import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
 import AnimatedText from '@src/components/AnimatedText/AnimatedText.vue';
+import { useCurrentDateAndTime } from '@src/components/composables/useCurrentDateAndTime';
+
+interface Props {
+	playLiveText: boolean;
+}
+
+const props = defineProps<Props>();
 
 const {
 	currentDayName,
-	currentDate,
+	getCurrentDateAndTime,
 	visitorsVsDonorsSentence
 }: DynamicContent = inject( 'dynamicCampaignText' );
 
+const { currentDateTime, startTimer, stopTimer } = useCurrentDateAndTime( getCurrentDateAndTime );
+
+watch( () => props.playLiveText, ( shouldPlay: boolean ) => {
+	if ( shouldPlay ) {
+		startTimer();
+	} else {
+		stopTimer();
+	}
+} );
+
 </script>
diff --git a/banners/mobile/content/messages/DynamicCampaignTextOverwrite.de.ts b/banners/mobile/content/messages/DynamicCampaignTextOverwrite.de.ts
new file mode 100644
index 000000000..33792ae8c
--- /dev/null
+++ b/banners/mobile/content/messages/DynamicCampaignTextOverwrite.de.ts
@@ -0,0 +1,19 @@
+import { TranslationMessages } from '@src/Translator';
+
+const Translations: TranslationMessages = {
+
+	'date-month-time-1': '{{day}} Januar, um {{time}} Uhr',
+	'date-month-time-2': '{{day}} Februar, um {{time}} Uhr',
+	'date-month-time-3': '{{day}} März, um {{time}} Uhr',
+	'date-month-time-4': '{{day}} April, um {{time}} Uhr',
+	'date-month-time-5': '{{day}} Mai, um {{time}} Uhr',
+	'date-month-time-6': '{{day}} Juni, um {{time}} Uhr',
+	'date-month-time-7': '{{day}} Juli, um {{time}} Uhr',
+	'date-month-time-8': '{{day}} August, um {{time}} Uhr',
+	'date-month-time-9': '{{day}} September, um {{time}} Uhr',
+	'date-month-time-10': '{{day}} Oktober, um {{time}} Uhr',
+	'date-month-time-11': '{{day}} November, um {{time}} Uhr',
+	'date-month-time-12': '{{day}} Dezember, um {{time}} Uhr'
+};
+
+export default Translations;
diff --git a/banners/mobile/event_map.ts b/banners/mobile/event_map.ts
index bbfe83649..7bb6ae360 100644
--- a/banners/mobile/event_map.ts
+++ b/banners/mobile/event_map.ts
@@ -20,6 +20,7 @@ export default new Map<string, TrackingEventConverterFactory>( [
 
 	[ BannerSubmitEvent.EVENT_NAME, ( e: BannerSubmitEvent ): WMDESizeIssueEvent => {
 		switch ( e.feature ) {
+			case 'MiniBanner':
 			case 'UpgradeToYearlyForm':
 				return new WMDESizeIssueEvent( `submit-${e.userChoice}`, createViewportInfo(), 1 );
 			default:
diff --git a/banners/mobile/messages.ts b/banners/mobile/messages.ts
index cf8be364c..81ce709dc 100644
--- a/banners/mobile/messages.ts
+++ b/banners/mobile/messages.ts
@@ -1,5 +1,6 @@
 import CustomAmountFormDe from '@src/components/DonationForm/Forms/messages/CustomAmountForm.de';
 import DynamicCampaignTextDe from '@src/utils/DynamicContent/messages/DynamicCampaignText.de';
+import DynamicCampaignTextDeOverwrite from './content/messages/DynamicCampaignTextOverwrite.de';
 import { TranslationMessages } from '@src/Translator';
 import UpgradeToYearlyDe from '@src/components/DonationForm/Forms/messages/UpgradeToYearly.de';
 import SoftCloseDe from '@src/components/SoftClose/messages/SoftClose.de';
@@ -10,6 +11,7 @@ import MainDonationFormDe from '@src/components/DonationForm/Forms/messages/Main
 const messages: TranslationMessages = {
 	...CustomAmountFormDe,
 	...DynamicCampaignTextDe,
+	...DynamicCampaignTextDeOverwrite,
 	...UpgradeToYearlyDe,
 	...SoftCloseDe,
 	...AddressFormDe,
diff --git a/campaign_info.toml b/campaign_info.toml
index 2eff4e4b1..76ed6d0d3 100644
--- a/campaign_info.toml
+++ b/campaign_info.toml
@@ -33,9 +33,9 @@ resolution = ["800x600", "1024x768", "1280x960", "1600x1200", "1920x1200", "2560
 [mobile]
 name = "Mobile"
 icon = "mobile"
-campaign = "C23_WMDE_Mobile_DE_10"
-description = "based on VAR 09, Use the word hi, informal text"
-campaign_tracking = "mob-de-10-ba-231123"
+campaign = "C23_WMDE_Mobile_DE_11_2"
+description = "based on ctrl 10, Var redirects users to the donation page with the amount button"
+campaign_tracking = "mob-de-11-ba-231201"
 preview_link = "/mobile/wiki/Wikipedia:Hauptseite?devbanner={{banner}}&banner=B22_WMDE_local_prototype&useskin=minerva"
 preview_url = 'https://de.m.wikipedia.org/wiki/Wikipedia:Hauptseite?banner={{banner}}&useskin=minerva&devMode'
 wrapper_template = "wikipedia_org"
@@ -44,13 +44,13 @@ use_of_funds_source = "MediaWiki:WMDE_Fundraising/UseOfFunds_2023_DE"
 # Banners of the campaign, key after "banners" can be anything
 [mobile.banners.ctrl]
 filename = "./banners/mobile/banner_ctrl.ts"
-pagename = "B23_WMDE_Mobile_DE_10_ctrl"
-tracking = "org-mob10-231123-ctrl"
+pagename = "B23_WMDE_Mobile_DE_11_2_ctrl"
+tracking = "org-mob11_2-231201-ctrl"
 
 [mobile.banners.var]
 filename = "./banners/mobile/banner_var.ts"
-pagename = "B23_WMDE_Mobile_DE_10_var"
-tracking = "org-mob10-231123-var"
+pagename = "B23_WMDE_Mobile_DE_11_2_var"
+tracking = "org-mob11_2-231201-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/createDonationURL.ts b/src/createDonationURL.ts
new file mode 100644
index 000000000..e12a2c6e5
--- /dev/null
+++ b/src/createDonationURL.ts
@@ -0,0 +1,26 @@
+/* eslint-disable camelcase */
+import { TrackingParameters } from '@src/domain/TrackingParameters';
+import { ImpressionCount } from '@src/utils/ImpressionCount';
+
+const DONATE_LINK_URL = 'https://spenden.wikimedia.de';
+
+/**
+ * This function is used when a component (other than a donation form submit button) is supposed to link directly
+ * to the fundraising donation page and a URL with tracking information is needed for that.
+ *
+ * For creating the target URL for the banner donation form, see `createFormActions.ts` instead.
+ * @param {TrackingParameters} tracking
+ * @param {ImpressionCount} impressionCount
+ * @param {Record<string, string>} extraUrlParameters
+ */
+export function createDonationURL( tracking: TrackingParameters, impressionCount: ImpressionCount, extraUrlParameters: Record<string, string> = {} ): string {
+	const urlParameters = new URLSearchParams( {
+		piwik_kwd: tracking.keyword,
+		piwik_campaign: tracking.campaign,
+		impCount: String( impressionCount.overallCountIncremented ),
+		bImpCount: String( impressionCount.bannerCountIncremented ),
+		...extraUrlParameters
+	} );
+
+	return `${DONATE_LINK_URL}?${urlParameters}`;
+}
diff --git a/src/createFallbackDonationLink.ts b/src/createFallbackDonationLink.ts
deleted file mode 100644
index 58fefe5fc..000000000
--- a/src/createFallbackDonationLink.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/* eslint-disable camelcase */
-import { TrackingParameters } from '@src/domain/TrackingParameters';
-import { ImpressionCount } from '@src/utils/ImpressionCount';
-
-const DONATE_LINK_URL = 'https://spenden.wikimedia.de';
-
-export function createFallbackDonationLink( tracking: TrackingParameters, impressionCount: ImpressionCount, extraUrlParameters: Record<string, string> = {} ): string {
-	const urlParameters = new URLSearchParams( {
-		piwik_kwd: tracking.keyword.replace( /(ctrl|var)/g, 'mini' ),
-		piwik_campaign: tracking.campaign,
-		impCount: String( impressionCount.overallCountIncremented ),
-		bImpCount: String( impressionCount.bannerCountIncremented ),
-		...extraUrlParameters
-	} );
-
-	return `${DONATE_LINK_URL}?${urlParameters}`;
-}
diff --git a/src/createFallbackDonationURL.ts b/src/createFallbackDonationURL.ts
new file mode 100644
index 000000000..aadf91bcb
--- /dev/null
+++ b/src/createFallbackDonationURL.ts
@@ -0,0 +1,15 @@
+import { TrackingParameters } from '@src/domain/TrackingParameters';
+import { ImpressionCount } from '@src/utils/ImpressionCount';
+import { createDonationURL } from '@src/createDonationURL';
+
+/**
+ * This function is used for the fallback banner, as it replaces the usual tracking parameters with mini
+ *
+ * @param {TrackingParameters} tracking
+ * @param {ImpressionCount} impressionCount
+ * @param {Record<string, string>} extraUrlParameters
+ */
+export function createFallbackDonationURL( tracking: TrackingParameters, impressionCount: ImpressionCount, extraUrlParameters: Record<string, string> = {} ): string {
+	tracking.keyword = tracking.keyword.replace( /(ctrl|var)/g, 'mini' );
+	return createDonationURL( tracking, impressionCount, extraUrlParameters );
+}
diff --git a/src/createFormActions.ts b/src/createFormActions.ts
index 891271a37..fcd95a92e 100644
--- a/src/createFormActions.ts
+++ b/src/createFormActions.ts
@@ -6,6 +6,14 @@ import { ImpressionCount } from '@src/utils/ImpressionCount';
 const DONATE_WITH_ADDRESS_URL = 'https://spenden.wikimedia.de/donation/new';
 const DONATE_ANONYMOUSLY_URL = 'https://spenden.wikimedia.de/donation/add';
 
+/**
+ * This function is used to create the form action (target URL) explicitly for the donation form submit on the banner.
+ *
+ * For creating a generic link (incl. tracking information) to the fundraising donation page, see `createDonationURL.ts`
+ * @param {TrackingParameters} tracking
+ * @param {ImpressionCount} impressionCount
+ * @param {Record<string, string>} extraUrlParameters
+ */
 export function createFormActions( tracking: TrackingParameters, impressionCount: ImpressionCount, extraUrlParameters: Record<string, string> = {} ): FormActions {
 	const urlParameters = new URLSearchParams( {
 		piwik_kwd: tracking.keyword,
diff --git a/test/banners/mobile/components/BannerCtrl.spec.ts b/test/banners/mobile/components/BannerCtrl.spec.ts
index 5d418cdce..a1fc16294 100644
--- a/test/banners/mobile/components/BannerCtrl.spec.ts
+++ b/test/banners/mobile/components/BannerCtrl.spec.ts
@@ -17,7 +17,7 @@ import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
 import { fullPageBannerFeatures } from '@test/features/FullPageBanner';
 import { miniBannerPreselectFeatures } from '@test/features/MiniBannerPreselect';
 import { Tracker } from '@src/tracking/Tracker';
-import { bannerContentAnimatedTextFeatures } from '@test/features/BannerContent';
+import { bannerContentAnimatedTextFeatures, bannerContentDateAndTimeFeatures } from '@test/features/BannerContent';
 
 let pageScroller: PageScroller;
 let tracker: Tracker;
@@ -84,6 +84,13 @@ describe( 'BannerCtrl.vue', () => {
 		] )( '%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', () => {
diff --git a/test/banners/mobile/components/BannerVar.spec.ts b/test/banners/mobile/components/BannerVar.spec.ts
index c20a0f3fd..7a3ddb8ae 100644
--- a/test/banners/mobile/components/BannerVar.spec.ts
+++ b/test/banners/mobile/components/BannerVar.spec.ts
@@ -1,4 +1,4 @@
-import { afterEach, beforeEach, describe, test, vi } from 'vitest';
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
 import { mount, VueWrapper } from '@vue/test-utils';
 import Banner from '../../../../banners/mobile/components/BannerVar.vue';
 import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
@@ -15,9 +15,9 @@ 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 { miniBannerPreselectFeatures } from '@test/features/MiniBannerPreselect';
 import { Tracker } from '@src/tracking/Tracker';
-import { bannerContentAnimatedTextFeatures } from '@test/features/BannerContent';
+import { bannerContentAnimatedTextFeatures, bannerContentDateAndTimeFeatures } from '@test/features/BannerContent';
+import { BannerSubmitEvent } from '@src/tracking/events/BannerSubmitEvent';
 
 let pageScroller: PageScroller;
 let tracker: Tracker;
@@ -49,7 +49,8 @@ describe( 'BannerVar.vue', () => {
 				bannerState: BannerStates.Pending,
 				useOfFundsContent,
 				pageScroller,
-				remainingImpressions: 10
+				remainingImpressions: 10,
+				donationURL: 'https://spenden.wikimedia.de'
 			},
 			global: {
 				mocks: {
@@ -84,6 +85,13 @@ describe( 'BannerVar.vue', () => {
 		] )( '%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', () => {
@@ -140,12 +148,15 @@ describe( 'BannerVar.vue', () => {
 			await miniBannerFeatures[ testName ]( getWrapper() );
 		} );
 
-		test.each( [
-			[ 'expectShowsFullPageWhenPreselectIsClicked' ],
-			[ 'expectPreselectsAmountWhenPreselectIsClicked' ],
-			[ 'expectTrackingEventIsFiredWhenPreselectIsClicked' ]
-		] )( '%s', async ( testName: string ) => {
-			await miniBannerPreselectFeatures[ testName ]( getWrapper(), tracker );
+		test( 'sends users directly to the donation form page with 10 euros preselected', async () => {
+			const location = { href: '' };
+			Object.defineProperty( window, 'location', { writable: true, configurable: true, value: location } );
+			const localWrapper = getWrapper();
+
+			await localWrapper.find( '.wmde-banner-mini-button-preselect' ).trigger( 'click' );
+
+			expect( tracker.trackEvent ).toHaveBeenCalledWith( new BannerSubmitEvent( 'MiniBanner', 'donate-10-euro' ) );
+			expect( location.href ).toStrictEqual( 'https://spenden.wikimedia.de' );
 		} );
 
 	} );
diff --git a/test/features/BannerContent.ts b/test/features/BannerContent.ts
index 612ec6ef9..8dfe97dd5 100644
--- a/test/features/BannerContent.ts
+++ b/test/features/BannerContent.ts
@@ -145,6 +145,50 @@ const expectShowsLiveTimeInSlideshow = async ( getWrapper: ( dynamicContent: Dyn
 	expect( wrapper.find( '.wmde-banner-slider' ).text() ).toContain( 'Third Date and Time' );
 };
 
+const expectShowsLiveDateAndTimeInMiniBanner = async ( getWrapper: ( dynamicContent: DynamicContent ) => VueWrapper<any> ): Promise<any> => {
+	const dynamicContent = newDynamicContent();
+	// There are 2 live text elements mounted at the same time in the mobile banners meaning it will be initialised twice
+	dynamicContent.getCurrentDateAndTime = vi.fn().mockReturnValueOnce( 'Initial Date and Time' )
+		.mockReturnValueOnce( 'Initial Date and Time' )
+		.mockReturnValueOnce( 'Second Date and Time' )
+		.mockReturnValueOnce( 'Third Date and Time' );
+
+	const wrapper = getWrapper( dynamicContent );
+
+	expect( wrapper.find( '.wmde-banner-mini-slideshow' ).text() ).toContain( 'Initial Date and Time' );
+
+	await vi.advanceTimersByTimeAsync( 1000 );
+
+	expect( wrapper.find( '.wmde-banner-mini-slideshow' ).text() ).toContain( 'Second Date and Time' );
+
+	await vi.advanceTimersByTimeAsync( 1000 );
+
+	expect( wrapper.find( '.wmde-banner-mini-slideshow' ).text() ).toContain( 'Third Date and Time' );
+};
+
+const expectShowsLiveDateAndTimeInFullPageBanner = async ( getWrapper: ( dynamicContent: DynamicContent ) => VueWrapper<any> ): Promise<any> => {
+	const dynamicContent = newDynamicContent();
+	// There are 2 live text elements mounted at the same time in the mobile banners meaning it will be initialised twice
+	dynamicContent.getCurrentDateAndTime = vi.fn().mockReturnValueOnce( 'Initial Date and Time' )
+		.mockReturnValueOnce( 'Initial Date and Time' )
+		.mockReturnValueOnce( 'Second Date and Time' )
+		.mockReturnValueOnce( 'Third Date and Time' );
+
+	const wrapper = getWrapper( dynamicContent );
+
+	await wrapper.find( '.wmde-banner-mini-button' ).trigger( 'click' );
+
+	expect( wrapper.find( '.wmde-banner-message' ).text() ).toContain( 'Initial Date and Time' );
+
+	await vi.advanceTimersByTimeAsync( 1000 );
+
+	expect( wrapper.find( '.wmde-banner-message' ).text() ).toContain( 'Second Date and Time' );
+
+	await vi.advanceTimersByTimeAsync( 1000 );
+
+	expect( wrapper.find( '.wmde-banner-message' ).text() ).toContain( 'Third Date and Time' );
+};
+
 export const bannerContentFeatures: Record<string, ( wrapper: VueWrapper<any> ) => Promise<any>> = {
 	expectSlideShowPlaysWhenBecomesVisible,
 	expectSlideShowStopsOnFormInteraction
@@ -166,5 +210,7 @@ export const bannerContentDateAndTimeFeatures: Record<string, ( getWrapper: () =
 	expectShowsLiveDateAndTimeInMessage,
 	expectShowsLiveDateAndTimeInSlideshow,
 	expectShowsLiveTimeInMessage,
-	expectShowsLiveTimeInSlideshow
+	expectShowsLiveTimeInSlideshow,
+	expectShowsLiveDateAndTimeInMiniBanner,
+	expectShowsLiveDateAndTimeInFullPageBanner
 };
diff --git a/test/unit/createDonationURL.spec.ts b/test/unit/createDonationURL.spec.ts
new file mode 100644
index 000000000..08bbb23f9
--- /dev/null
+++ b/test/unit/createDonationURL.spec.ts
@@ -0,0 +1,14 @@
+import { describe, expect, it } from 'vitest';
+import { ImpressionCountStub } from '@test/fixtures/ImpressionCountStub';
+import { createDonationURL } from '@src/createDonationURL';
+
+describe( 'createDonationURL', () => {
+	it( 'should create donation URL with tracking information', () => {
+		const extraParameters = { locale: 'de_DE', ast: '1' };
+		const ctrlLink = createDonationURL( { campaign: 'C1', keyword: 'banner-ctrl' }, new ImpressionCountStub(), extraParameters );
+		const varLink = createDonationURL( { campaign: 'C1', keyword: 'banner-var' }, new ImpressionCountStub(), extraParameters );
+
+		expect( ctrlLink ).toStrictEqual( 'https://spenden.wikimedia.de?piwik_kwd=banner-ctrl&piwik_campaign=C1&impCount=1&bImpCount=1&locale=de_DE&ast=1' );
+		expect( varLink ).toStrictEqual( 'https://spenden.wikimedia.de?piwik_kwd=banner-var&piwik_campaign=C1&impCount=1&bImpCount=1&locale=de_DE&ast=1' );
+	} );
+} );
diff --git a/test/unit/createFallbackDonationLink.spec.ts b/test/unit/createFallbackDonationLink.spec.ts
deleted file mode 100644
index fb4ba565b..000000000
--- a/test/unit/createFallbackDonationLink.spec.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { ImpressionCountStub } from '@test/fixtures/ImpressionCountStub';
-import { createFallbackDonationLink } from '@src/createFallbackDonationLink';
-
-describe( 'createFallbackDonationLink', () => {
-	it( 'should create fallback donation link', () => {
-		const extraParameters = { locale: 'de_DE', ast: '1' };
-		const ctrlLink = createFallbackDonationLink( { campaign: 'C1', keyword: 'banner-ctrl' }, new ImpressionCountStub(), extraParameters );
-		const varLink = createFallbackDonationLink( { campaign: 'C1', keyword: 'banner-var' }, new ImpressionCountStub(), extraParameters );
-		const expected = 'https://spenden.wikimedia.de?piwik_kwd=banner-mini&piwik_campaign=C1&impCount=1&bImpCount=1&locale=de_DE&ast=1';
-
-		expect( ctrlLink ).toStrictEqual( expected );
-		expect( varLink ).toStrictEqual( expected );
-	} );
-} );
diff --git a/test/unit/createFallbackDonationURL.spec.ts b/test/unit/createFallbackDonationURL.spec.ts
new file mode 100644
index 000000000..3691dc732
--- /dev/null
+++ b/test/unit/createFallbackDonationURL.spec.ts
@@ -0,0 +1,15 @@
+import { describe, expect, it } from 'vitest';
+import { ImpressionCountStub } from '@test/fixtures/ImpressionCountStub';
+import { createFallbackDonationURL } from '@src/createFallbackDonationURL';
+
+describe( 'createFallbackDonationURL', () => {
+	it( 'should create donation URL with tracking information', () => {
+		const extraParameters = { locale: 'de_DE', ast: '1' };
+		const ctrlLink = createFallbackDonationURL( { campaign: 'C1', keyword: 'banner-ctrl' }, new ImpressionCountStub(), extraParameters );
+		const varLink = createFallbackDonationURL( { campaign: 'C1', keyword: 'banner-var' }, new ImpressionCountStub(), extraParameters );
+		const expected = 'https://spenden.wikimedia.de?piwik_kwd=banner-mini&piwik_campaign=C1&impCount=1&bImpCount=1&locale=de_DE&ast=1';
+
+		expect( ctrlLink ).toStrictEqual( expected );
+		expect( varLink ).toStrictEqual( expected );
+	} );
+} );