/**
*	TEMPLATE.NUMBERS
*
*	@copyright       Copyright, Quattronet GmbH
*	@globalstate     $Date: 2025-02-21 $
*	@lastmodified    $Date: 2025-03-18 $
*
*/
/**
*   Lazyload ==============================================================================
*/

/* Animated Numers --------------------------- */
/* https://stackoverflow.com/questions/78310481/css-animition-interger-counters */
/* https://www.mediaevent.de/javascript/css-animation.html */

@property --num {
	syntax: '<integer>';
	initial-value: 0;
	inherits: false;
}
div span {
	counter-reset: num var(--num);
}
div span.start {
	animation: var(--animation) 5s forwards ease-in-out;
	/* animation: var(--animation) 10s infinite ease-in-out; /*alternate*/	
}
div span.appartemets-number::after,
div span.floorplans-number::after,
div span.squaremeter-start-number::after,
div span.squaremeter-end-number::after {
	content: counter(num) '';
}
@keyframes counter-appartemets {
	/* 0% {
		--num: 0;
	}
	40% {
		--num: 57;
	}
	60% {
		--num: 57;
	}
	100% {
		--num: 0;
	} */
	from {
		--num: 0;
	}
	to {
		--num: 57;
	}
}
@keyframes counter-floorplans {
	/* 0% {
		--num: 0;
	}
	40% {
		--num: 20;
	}
	60% {
		--num: 20;
	}
	100% {
		--num: 0;
	} */
	from {
		--num: 0;
	}
	to {
		--num: 20;
	}
}
@keyframes counter-squaremeter-start {
	/* 0% {
		--num: 0;
	}
	40% {
		--num: 35;
	}
	60% {
		--num: 35;
	}
	100% {
		--num: 0;
	} */
	from {
		--num: 0;
	}
	to {
		--num: 35;
	}
}
@keyframes counter-squaremeter-end {
	/* 0% {
		--num: 0;
	}
	40% {
		--num: 81;
	}
	60% {
		--num: 81;
	}
	100% {
		--num: 0;
	} */
	from {
		--num: 0;
	}
	to {
		--num: 81;
	}
}