/* ==========================================================================
   NUR FÜR DIESE VIMEO-SEKTION: WEISSE FLÄCHE AUF SMARTPHONE-HÖHE (100VH)
   ========================================================================== */
@media only screen and (max-width: 999px) {

	/* Erzwingt, dass die weiße Box mindestens so hoch wie der Smartphone-Bildschirm ist */
	div[style*="max-width: 50%"] {
		max-width: 100% !important;
		min-height: 100vh !important;  /* Volle Höhe des Smartphone-Displays */
		padding-bottom: 60px !important; 
		box-sizing: border-box !important;
	}

	div[style*="max-width: 840px"] {
		padding-top: 0 !important;
		height: auto !important; 
		margin: 0 auto !important;
		top: 640;
	}

	div[style*="padding-bottom: 100%"] {
		height: auto !important;
		padding-bottom: 0 !important;
	}

	#video {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
		align-items: center !important;
	}

	/* 1. Titel ganz oben */
	#video h3 {
		order: 1 !important;
		font-size: 28px !important;
		line-height: 1.2 !important;
		text-align: center !important;
		margin-bottom: 25px !important;
	}

	/* 2. Video direkt darunter */
	#video iframe.iframe-embed,
	#video iframe[src*="vimeo.com"] {
		order: 2 !important;
		width: 100% !important;
		max-width: 100% !important;
		display: block !important;
		border-radius: 12px !important;
		margin-bottom: 0px !important;
	}

	/* 3. Audio-Button schließt den inneren Block ab */
	#video button[onclick="toggleAudio()"] {
		order: 3 !important;
		margin: 10px auto 25px auto !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
	}

	#video button[onclick="toggleAudio()"] span {
		text-align: center !important;
		align-self: center !important;
	}

	/* 4. Handwriting im weißen Raum */
	div[style*="max-width: 50%"] > div[style*="font-family: 'Reenie Beanie'"],
	div[style*="max-width: 840px"] > div[style*="font-family: 'Reenie Beanie'"] {
		position: relative !important;
		top: auto !important;
		right: auto !important;
		left: auto !important;
		display: block !important;
		text-align: center !important;
		width: 100% !important;
		font-size: 28px !important;
		margin-top: 20px !important;
		margin-bottom: 5px !important;
		transform: rotate(-3deg) !important;
		top: 80 !important;
	}

	/* 5. Der Pfeil bleibt in seiner Originalform und Drehung erhalten */
	div[style*="max-width: 50%"] .curved-arrow,
	div[style*="max-width: 840px"] .curved-arrow {
		position: relative !important;
		bottom: auto !important;
		right: auto !important;
		left: auto !important;
		width: 50px !important;
		height: auto !important;
		margin: 5px auto 0 auto !important;
		display: block !important;
	}

	/* KEINE ZUSÄTZLICHE DREHUNG FÜR DAS SVG MEHR */
	div[style*="max-width: 50%"] .curved-arrow svg,
	div[style*="max-width: 840px"] .curved-arrow svg {
	transform: rotate(144deg) !important;
	}
	
	
	/* 6. NEUER PFEIL PER CSS BACKGROUND IMAGE */
	#video::after {
		content: "Scrolle weiter zum Whitepaper, mit den Daten und Fakten." !important;
		font-family: 'Arial', cursive;
		font-size: 12px !important;
		display: block !important;
color: grey;
		order: 4 !important;
		width: 100% !important;
		height: 50px !important;
top: 140 !important;
padding-top: 140px;
margin: 5px auto 0 auto !important;		
background-size: contain !important;
background-repeat: no-repeat !important;
	}
}