.steps{
	display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(10, 10vh);
}

.steps .intro{
	grid-column: 1 / 7;
	grid-row: 1 / 2;
}

.steps .step-1{
	position: relative;
	padding-left: 60px;
	grid-column: 1 / 6;
	grid-row: 6 / 7;
}

.steps .step-1::before{
	position: absolute;
	content: "1";
	left: 0px;
	top: 0;
	font-size: 70px;
	font-weight: 900;
	color: var(--colorYellow);
}

.steps .step-1::after{
	position: absolute;
	display: block;
	content: "";
	background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="193.563" height="178.027" viewBox="0 0 193.563 178.027"><defs><clipPath id="clip-path"><rect id="Rechteck_1546" data-name="Rechteck 1546" width="182.448" height="165.704" transform="translate(0 0)" fill="none" stroke="%23eceef1" stroke-linejoin="round" stroke-width="6"/></clipPath></defs><g id="Gruppe_2091" data-name="Gruppe 2091" transform="matrix(-0.998, -0.07, 0.07, -0.998, 182.004, 178.027)" clip-path="url(%23clip-path)"><path id="Pfad_1262" data-name="Pfad 1262" d="M0,114.116C34.749,107.038,98.737,82.827,129.9,0" transform="translate(37.198 19.705)" fill="none" stroke="%23eceef1" stroke-linecap="round" stroke-miterlimit="10" stroke-width="6"/><path id="Pfad_1263" data-name="Pfad 1263" d="M32.838,0,28.593,15.544l8.242,13.846L0,19.432Z" transform="translate(13.481 117.312)" fill="none" stroke="%23eceef1" stroke-linejoin="round" stroke-width="6"/></g></svg>');
	
	width: 200px;
	height: 150px;
	left: 0;
	top: 0;
	transform: translate(50%, -125%);
}

.steps .step-2{
	position: relative;
	padding-left: 60px;
	grid-column: 4 / 9;
	grid-row: 4 / 5;
}

.steps .step-2::before{
	position: absolute;
	content: "2";
	left: 0px;
	top: 0;
	font-size: 70px;
	font-weight: 900;
	color: var(--colorYellow);
}

.steps .step-3{
	position: relative;
	padding-left: 60px;
	grid-column:  8 / 13;
	grid-row: 8 / 9;
}

.steps .step-3::before{
	position: absolute;
	content: "3";
	left: 0px;
	top: 0;
	font-size: 70px;
	font-weight: 900;
	color: var(--colorYellow);
}

.steps .step-3::after{
	position: absolute;
	display: block;
	content: "";
	background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="193.563" height="178.027" viewBox="0 0 193.563 178.027"><defs><clipPath id="clip-path"><rect id="Rechteck_1546" data-name="Rechteck 1546" width="182.448" height="165.704" transform="translate(0 0)" fill="none" stroke="%23eceef1" stroke-linejoin="round" stroke-width="6"/></clipPath></defs><g id="Gruppe_2091" data-name="Gruppe 2091" transform="matrix(-0.998, -0.07, 0.07, -0.998, 182.004, 178.027)" clip-path="url(%23clip-path)"><path id="Pfad_1262" data-name="Pfad 1262" d="M0,114.116C34.749,107.038,98.737,82.827,129.9,0" transform="translate(37.198 19.705)" fill="none" stroke="%23eceef1" stroke-linecap="round" stroke-miterlimit="10" stroke-width="6"/><path id="Pfad_1263" data-name="Pfad 1263" d="M32.838,0,28.593,15.544l8.242,13.846L0,19.432Z" transform="translate(13.481 117.312)" fill="none" stroke="%23eceef1" stroke-linejoin="round" stroke-width="6"/></g></svg>');
	
	width: 200px;
	height: 150px;
	left: -200px;
  top: -129px;
  transform: scaleY(-100%);
}

.ansprechpartner{
	grid-column: 9 / 13;
  grid-row-start: 1;
  display: flex;
  flex-direction: column;
  height: fit-content;
  background-color: var(--colorWhite);
  margin-top: 60px;
  padding: 30px;
  border-radius: 10px;
  text-align: center;
}

.ansprechpartner img{
	position: relative;
	width: 220px;
  height: 220px;
  border-radius: 100%;
	margin: -120px auto 0;
 	background-color: var(--colorWhite);
 	-webkit-box-shadow: 5px 5px 15px -2px rgba(0,0,0,0.3); 
	box-shadow: 5px 5px 15px -2px rgba(0,0,0,0.3);
}

.ansprechpartner p, .ansprechpartner a{
	position: relative;
	color: var(--colorBody);
	margin-bottom: 10px;
}

.ansprechpartner h4{
	font-weight: 700;
}

@media (max-width: 1299px){
	
	.steps{
		grid-template-rows: repeat(12, 10vh);

	}
	
	.steps .intro{
		grid-column: 1 / 7;
		grid-row: 1 / 2;
	}
	
	.steps .step-1{
		position: relative;
		padding-left: 60px;
		grid-column: 1 / 7;
		grid-row: 4 / 5;
	}
	
	.steps .step-2{
		position: relative;
		padding-left: 60px;
		grid-column: 1 / 7;
		grid-row: 7 / 8;
	}
	
	.steps .step-3{
		position: relative;
		padding-left: 60px;
		grid-column:  1 / 7;
		grid-row: 10 / 11;
	}
	
	.steps .step-1::after{
		display: none;
	}
	
	.steps .step-3::after{
		display: none;
	}
	
	.ansprechpartner{
		grid-column:  8 / 13;
	}
}

@media (max-width: 767px){
	
	.steps{
		grid-template-rows: repeat(14, 10vh);

	}
	
	.steps .intro{
		grid-column: 2 / 12;
		grid-row: 1 / 2;
	}
	
	.steps .step-1{
		position: relative;
		padding-left: 60px;
		grid-column: 2 / 12;
		grid-row: 3 / 4;
	}
	
	.steps .step-2{
		position: relative;
		padding-left: 60px;
		grid-column: 2 / 12;
		grid-row: 5 / 6;
	}
	
	.steps .step-3{
		position: relative;
		padding-left: 60px;
		grid-column:  2 / 12;
		grid-row: 7 / 8;
	}
	
	.steps .step-1::after{
		display: none;
	}
	
	.steps .step-3::after{
		display: none;
	}
	
	.ansprechpartner{
		grid-column:  2 / 12;
		grid-row: 9 / 10;
	}
}

@media (max-width: 576px){
	.steps{
		grid-template-rows: repeat(17, 8vh);
	}
	
	.steps .intro{
		grid-column: 1 / 13;
		grid-row: 1 / 2;
	}
		
	.steps .step-1{
		position: relative;
		padding-left: 60px;
		grid-column: 1 / 13;
		grid-row: 4 / 5;
	}
	
	.steps .step-2{
		position: relative;
		padding-left: 60px;
		grid-column: 1 / 13;
		grid-row: 7 / 8;
	}
	
	.steps .step-3{
		position: relative;
		padding-left: 60px;
		grid-column:  1 / 13;
		grid-row: 10 / 11;
	}
	
	.ansprechpartner{
		grid-column:  1 / 13;
		grid-row: 13 / 16;
	}
}

@media (max-width: 576px){
	.steps{
		grid-template-rows: repeat(18, 8vh);
	}
}