@keyframes numbersBarEnter {
	0% { transform: scaleY(0); }
	100% { transform: scaleY(1); }
}

.numbers {
	position: relative;
	height: 50vh;
	margin: 15vh 0 5vh; }

.numbers .lines {
	position: absolute;
	top: 0; left: 0;
	display: flex;
	flex-direction: column;
	gap: 10vh;
	height: 100%;
	width: 100%;
	z-index: 1; }

	.numbers .lines .line {
		width: 100%;
		border-top: 1px solid rgba(255, 255, 255, 0.1); }

.numbers .sup {
	position: absolute;
	bottom: calc(20vh + 3.5vw); left: 10%;
	color: var(--bexco-zwei);
	text-transform: uppercase;
	font-family: var(--bexco-bold);
	font-size: 8vw;
	font-weight: 800;
	line-height: 0.8;
	z-index: 2 }
	.numbers .sup .outline {
		color: var(--bexco-dark);
		letter-spacing: 2px;
		text-shadow: -1px -1px 0 var(--bexco-zwei), 1px -1px 0 var(--bexco-zwei), -1px 1px 0 var(--bexco-zwei), 1px 1px 0 var(--bexco-zwei); }

.numbers .sub {
	position: absolute;
	bottom: 22vh; left: 10%;
	color: var(--bexco-grey);
	text-transform: uppercase;	
	font-family: var(--bexco-bold);
	font-size: 3vw;
	font-weight: 800;
	line-height: 0.8;
	z-index: 2 }

.numbers .bars {
	position: absolute;
	top: 0; left: 0;
	display: grid;
	grid-template-columns: repeat(30, 1fr);
	grid-gap: 20px;
	align-items: end;
	height: 100%;
	width: 100%;
	padding: 0 10%;
	z-index: 10; }

	.numbers .bars .bar {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		position: relative;
		height: 0;
		width: 100%;
		background: var(--bexco-eins);
		transform: scaleY(0);
		padding: 0 15px; }

		.numbers.open .bars .bar {
			animation: numbersBarEnter 0.5s both ;
			transform-origin: bottom; }

		.numbers .bars .bar:nth-child(1) { height: 3%; animation-delay: 0s; }
		.numbers .bars .bar:nth-child(2) { height: 4%; animation-delay: 0.1s; }
		.numbers .bars .bar:nth-child(3) { height: 4%; animation-delay: 0.2s; }
		.numbers .bars .bar:nth-child(4) { height: 6%; animation-delay: 0.3s; }
		.numbers .bars .bar:nth-child(5) { height: 10%; animation-delay: 0.4s; }

		.numbers .bars .bar:nth-child(6) {
			grid-column: span 5; 
			height: 30%;
			animation-delay: 0.5s; }

		.numbers .bars .bar:nth-child(7) { height: 15%; animation-delay: 0.6s; }
		.numbers .bars .bar:nth-child(8) { height: 18%; animation-delay: 0.7s; }
		.numbers .bars .bar:nth-child(9) { height: 20%; animation-delay: 0.8s; }
		.numbers .bars .bar:nth-child(10) { height: 24%; animation-delay: 0.9s; }
		.numbers .bars .bar:nth-child(11) { height: 28%; animation-delay: 1.0s; }

		.numbers .bars .bar:nth-child(12) {
			grid-column: span 5; 
			height: 44%;
			animation-delay: 1.1s; }

		.numbers .bars .bar:nth-child(13) { height: 38%; animation-delay: 1.2s; }
		.numbers .bars .bar:nth-child(14) { height: 44%; animation-delay: 1.3s; }
		.numbers .bars .bar:nth-child(15) { height: 54%; animation-delay: 1.4s; }
		.numbers .bars .bar:nth-child(16) { height: 62%; animation-delay: 1.5s; }
		.numbers .bars .bar:nth-child(17) { height: 75%; animation-delay: 1.6s; }

		.numbers .bars .bar:nth-child(18) {
			grid-column: span 5; 
			height: 85%;
			animation-delay: 1.7s; }

			.numbers .bars .bar.cont {
			    background: var(--bexco-dark);
			    border: 2px solid var(--bexco-zwei); }

			.numbers .bars .bar .text {
				color: var(--bexco-eins);
				text-transform: uppercase;
			    text-align: center;
			    font-size: 0.8vw;
			    letter-spacing: 0;
			    font-weight: 700; }

			.numbers .bars .bar .num {
				font-family: var(--bexco-bold);
				font-size: 3vw;
				font-weight: 800;}


@media (max-width: 900px) {
	.numbers {
		position: relative;
		height: 100vh; }

	.numbers .sup {
	    position: unset;
	    bottom: unset;
	    top: unset;
	    font-size: 25vw;
	    padding: 0 30px; }

	.numbers .sub {
	    position: unset;
	    bottom: unset;
	    top: unset;
		font-size: 10vw;
	    padding: 0 30px;
	    margin-bottom: 30px; }

	.numbers .lines { display: none; }

	.numbers .bars {
		height: 75%;
		position: unset;
		grid-template-columns: 1fr; }
	.numbers .bars .bar { display: none; }
	.numbers .bars .bar:nth-child(6) { 
		display: flex; 
		height: 100%;
		animation-delay: 0.5s; }
	.numbers .bars .bar:nth-child(12) { 
		display: flex; 
		height: 100%;
		animation-delay: 0.7s; }
	.numbers .bars .bar:nth-child(18) { 
		display: flex; 
		height: 100%;
		animation-delay: 0.9s; }

	.numbers .bars .bar .num {
	    font-size: 10vw;
	    text-align: center; }

	.numbers .bars .bar .text {
	    font-size: 14px; }
}