@charset "utf-8";
/* CSS Document */

.ablauf-wrapper{
	display: flex;
	flex-wrap: wrap;
}
.ablauf-nav-wrapper{
	width: 360px;
}
.ablauf-nav-wrapper:before{
	content: "";
	display: block;
	position: absolute;
	left: 30px;
	width: 1px;
	top: 15px;
	height: calc(100% - 50px);
	background: #fff;
}

.ablauf-nav-wrapper .item  .text{
	line-height: 120%;
}

.ablauf-box .ablauf_image{
	width: 300px;
	height: 500px;
	border-radius: 9999px;
	position: relative;
}


.ablauf-box .text-wrapper{
	width: 600px;
	padding-left: 60px;
	display: flex;
	flex-wrap: wrap;
}

.ablauf-box .ablauf_image img{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 15px;
}


.ablauf-box .item{
	position: relative;
    padding: 0px;
    border-radius: 15px;
	margin-bottom: 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	align-items: center;
	padding: 5px;
	cursor: pointer;
}

.ablauf-box .item.active{
	
	color: #fff;
}

.ablauf-box .item .nummer{
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	width: 50px;
	height: 50px;
	background: linear-gradient(45deg, rgba(207, 7, 126, 1) 0%, rgba(240, 126, 35, 1) 100%);
    border-radius: 10px;
	color: #fff;
	font-weight: 400;
	font-size: 20px;
	line-height: 100%;
	border-radius: 9999px;
	border: 2px solid #E1474D;
	background: #1B161E;
}
.ablauf-box .item .nummer span{
	display: block;
	align-items: center;
}
.ablauf-box .item.active .nummer{
	background: linear-gradient(45deg, rgba(207, 7, 126, 1) 0%, rgba(240, 126, 35, 1) 100%);
	border: 2px solid #000;
	box-shadow: 0 0 0px 4px #E1474D;
	color: #fff;
}
.ablauf-box .item h3{
	margin-bottom: 0px !important;
}




.ablauf-box .more-text-inner{
	display: flex;
	flex-wrap: wrap;
}

.ablauf-box .phase:before{
	display: inline-block;
	content: "";
	height: 2px;
	width: 80px;
	background: #E24A4B;
	position: relative;
	top: -3px;
	margin-right: 10px;
}

.ablauf-box .phase{
	text-transform: uppercase;
	letter-spacing: 3px;
	margin-bottom: 30px;
	display: block;
	color: #E24A4B;
}
.ablauf-box .content h3{
	font-size: 26px;
}

.ablauf-box .usp-list{
	display: block;
	
}

.ablauf-box .usp-item{
	display: flex;
	align-items: center;
	color: #fff;
	gap: 20px;
	margin-bottom: 20px;
}
.ablauf-box .usp-item:last-child{
	flex-grow: 2;
}
.ablauf-box .usp-item__icon{
	width: 40px;
	height: 40px;
	padding: 10px;
	background: rgba(210,82,91,0.15);
	border-radius: 9999px;
}
.ablauf-box .usp-item__text{
	
}
.ablauf-box .cta-bar{
	background: linear-gradient(45deg, rgba(207, 7, 126, 1) 0%, rgba(240, 126, 35, 1) 100%);
    color: #fff;
	padding: 30px 40px;
	border-radius: 10px;
	    border: 1px solid rgba(255, 255, 255, 1);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);

}

@media(max-width: 1400px){
	.ablauf-nav-wrapper .item .text{
		display: none;
	}
	.ablauf-nav-wrapper{
		width: 80px;
	}
	.ablauf-box .text-wrapper{
		width: calc(100% - 80px);
	}
}

@media(max-width: 1200px){
	
	.ablauf-box .text-wrapper{
		padding-left: 40px;
	}
}
@media(max-width: 920px){
	.ablauf-box .usp-item__icon{
		width: 40px;
		height: 40px;
	}
	
	
	.ablauf-nav-wrapper .item .text{
		font-size: 15px;
		display: none;
	}
	.ablauf-box .text-wrapper{
		padding-left: 0px;
	}
	.ablauf-box .item{
		gap: 20px;
	}
	.ablauf-nav-wrapper {
	width: 220px;
	}
	.ablauf-box .item .nummer{
		width: 40px;
		height: 40px;
	}
	.ablauf-box .item .nummer{
		font-size: 18px;
	}
	.ablauf-nav-wrapper:before{
		left: 24px;
	}
	.ablauf-box .item{
		margin-bottom: 10px;
	}
	.ablauf-box .text-wrapper{
		width: calc(100% - 220px);
	}
	.ablauf-nav-wrapper{
		width: 50px;
	}
	.ablauf-box .text-wrapper{
		width: calc(100% - 50px);
		padding-left: 40px;
	}
	
}
@media(max-width: 768px){
	.ablauf-box .usp-list{
		display: block;
	}
	.ablauf-box .usp-item{
		margin-bottom: 10px;
	}
}

@media(max-width: 480px){
	.ablauf-box .text-wrapper{
		padding-left: 20px;
	}
	.ablauf-box .content h3{
		font-size: 24px;
	}
	.ablauf-box .usp-list{
		gap: 20px;
	}
}