Implement VAR for C24_WMDE_Desktop_DE_22

- Var has a different copy
- Adjust the banner height, so that both the banners have same height
- Make slider breakpoint at larger width

Ticket: https://phabricator.wikimedia.org/T382301

banners/desktop/C24_WMDE_Desktop_DE_22/components/MainBanner.vue

@@ -34,7 +34,7 @@ const emit = defineEmits( [ 'formInteraction' ] );
 const slideShowStopped = ref<boolean>( false );
 const slideshowShouldPlay = computed( () => props.bannerState === BannerStates.Visible && !slideShowStopped.value );
 
-const onLargeScreen = useDisplaySwitch( 1300 );
+const onLargeScreen = useDisplaySwitch( 1550 );
 
 const onFormInteraction = (): void => {
 	slideShowStopped.value = true;

banners/desktop/C24_WMDE_Desktop_DE_22/content/BannerSlidesVar.vue

@@ -14,13 +14,14 @@
 	</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?
+			Die durchschnittliche Spende beträgt {{ averageDonation }}, doch bereits 5&nbsp;€ helfen uns weiter. Wenn
+			alle, die für Wikipedia dankbar sind, spenden, wäre unser Ziel in wenigen Stunden erreicht.
 		</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!
+			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>

banners/desktop/C24_WMDE_Desktop_DE_22/content/BannerTextVar.vue

@@ -3,14 +3,13 @@
 		<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!
+				{{ 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. Wenn alle, die für Wikipedia dankbar
+				sind, spenden, wäre unser Ziel in wenigen Stunden erreicht. 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>

banners/desktop/C24_WMDE_Desktop_DE_22/styles/styles.scss

@@ -12,7 +12,7 @@
 @use 'Banner';
 @use 'src/themes/UseOfFunds/UseOfFunds';
 @use 'MainBanner' with (
-	$banner-height: 357px,
+	$banner-height: 369px,
 	$form-width: 300px
 );
 @use 'src/themes/Treedip/defaults';