
/* Seite Leistungen */


.textundleistungsblocks-box h2.spalten-titel{
	font-size: 90px;
	font-family: Rostack;
	line-height: 75%;
	font-weight: 400;
	letter-spacing: 2px;
	word-break: auto-phrase; /* experimental */
	-webkit-text-stroke-width: 1px;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}



.textundleistungsblocks-box h3.spalten-subtitel{
	font-size: 26px;
	font-family: Cyber Brush;
	margin-bottom: 40px;
}



.textundleistungsblocks-box .item{
	line-height: 180%;
	color: #fff;
	font-family: Cairo Light;
	height: 650px;
	width: 100%;	
	display: block;
	position: relative;
	overflow: show;

}


.textundleistungsblocks-box a{
	cursor: url(../images/icon-more.svg), auto;
}

.textundleistungsblocks-box a.button-fa .link-title{
	visibility: hidden;
}


.textundleistungsblocks-box .arrow-wrapper{
	display: flex;
	align-items: center;
	height: 30px;
}
.textundleistungsblocks-box .arrow-line{
	width: 50px;
	height: 3px;
	display: block;
	border-radius: 999px;
	transition: all 0.3s;
}
.textundleistungsblocks-box .item a:hover .arrow-line{
	width: 80px;
}

.textundleistungsblocks-box .arrow{
	width: 40px;
	height: 40px;
	mask-image: url(../images/simple-arrow.svg);
	-webkit-mask-image: url(../images/simple-arrow.svg);
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	mask-position: center center;
	-webkit-mask-position: center center;
	mask-size: contain;
	-webkit-mask-size: contain;
	display: block;
	position: relative;
	left: -24px;
}

.textundleistungsblocks-box .item .text-image-wrapper{
	max-width: 1500px;
	width: 100%;
	margin: auto auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	padding-left: 40px;
	padding-right: 40px;
}

.textundleistungsblocks-box .item .image{
	width: calc(100% - 700px);
	height: 800px;
	position: relative;	
}
.textundleistungsblocks-box .item a img{
	transition: all 0.2s;
}
.textundleistungsblocks-box .item a:hover img{
	transform: scale(1.05);
}

.textundleistungsblocks-box .image img{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	object-fit: contain;
}

.textundleistungsblocks-box .item .text{
	width: 700px;
	hyphens: auto;
	padding: 70px;
	border-radius: 5px;
}



/* Odd */ 
.textundleistungsblocks-box .item:nth-child(odd){
	background: linear-gradient(45deg, rgba(207, 7, 126, 1) 0%, rgba(240, 126, 35, 1) 100%);
}
.textundleistungsblocks-box .item h2.spalten-titel{
	-webkit-text-stroke-color: #000;
	color: #000;
}
.textundleistungsblocks-box .item h2.spalten-titel .marked{
	-webkit-text-fill-color: #000;
}
.textundleistungsblocks-box .item h3.spalten-subtitel{
	color: #000;
}
.textundleistungsblocks-box .item .text{
	background: #fff;
}

/* Even */
.textundleistungsblocks-box .item:nth-child(even) .text-image-wrapper{
	flex-direction: row-reverse;
}


.textundleistungsblocks-box .item .arrow-line,
.textundleistungsblocks-box .item .arrow{
	background: #000;
}



@media(max-width: 1500px){
	.textundleistungsblocks-box .item{
		height: 560px;
	}
	
	.textundleistungsblocks-box .item .text-image-wrapper{
		max-width: 1200px;
	}
	.textundleistungsblocks-box .item .image{
		width: calc(100% - 500px);
		height: 650px;
	}
	.textundleistungsblocks-box .item .text{
		padding: 45px;
	}
	.textundleistungsblocks-box h2.spalten-titel{
		font-size: calc(110px * 0.7);
	}
	.textundleistungsblocks-box .item .text{
		width: 500px;
	}
	.textundleistungsblocks-box h3.spalten-subtitel{
		font-size: 23px;
		margin-bottom: 30px;
	}
	.textundleistungsblocks-box .arrow-wrapper{
		height: 20px;
	}
	.textundleistungsblocks-box .arrow{
		height: 35px;
	}
}


@media(max-width: 1200px){
	.textundleistungsblocks-box .item .text-image-wrapper{
		padding-left: 0px;
		padding-right: 0px;
		justify-content: center;
	}
	.textundleistungsblocks-box .item{
		height: 440px;
	}
	
	.textundleistungsblocks-box .item .text-image-wrapper{
		max-width: 1000px;
	}
	.textundleistungsblocks-box .item .image{
		width: 480px;
		height: 520px;
	}
	.textundleistungsblocks-box .item .text{
		padding: 40px;
		width: 420px;
	}
	.textundleistungsblocks-box h2.spalten-titel{
		font-size: 65px;
		margin-bottom: 10px;
	}
	.textundleistungsblocks-box h3.spalten-subtitel{
		font-size: 20px;
		line-height: 130%;
		margin-bottom: 25px;
	}
	.textundleistungsblocks-box .arrow-wrapper{
		height: 20px;
	}
	.textundleistungsblocks-box .arrow{
		height: 35px;
	}
}

@media(max-width: 1024px){
	.textundleistungsblocks-box h2.spalten-titel{
		font-size: 75px;
	}
	.textundleistungsblocks-box .item:nth-child(even) h2.spalten-titel .marked,
	.textundleistungsblocks-box .item:nth-child(odd) h2.spalten-titel .marked{
		display: block;
	}
	.textundleistungsblocks-box h3.spalten-subtitel{
		font-size: 18px;
	}
	.textundleistungsblocks-box .item .text{
		padding: 35px;
		width: 350px;
	}
	.textundleistungsblocks-box .item .image{
		width: 470px;
	}

}
@media(max-width: 950px){
	.textundleistungsblocks-box .item .image{
		height: inherit;
		width: 50%;
	}
	.textundleistungsblocks-box .item .image a{
		display: block;
		width: 100%;
		padding-top: 100%;
	}
	.textundleistungsblocks-box .item h2.spalten-titel{
		font-size: 65px;
	}
	.textundleistungsblocks-box .item:nth-child(even) h2.spalten-titel .marked,
	.textundleistungsblocks-box .item:nth-child(odd) h2.spalten-titel .marked{
		display: block;
	}
	.textundleistungsblocks-box .item .text{
		width: 50%;
	}
	.textundleistungsblocks-box .item .text-image-wrapper{
		padding-left: 40px;
		padding-right: 40px;
		position: relative;
		transform: none;
		left: inherit;
	}
	.textundleistungsblocks-box .item{
		height: inherit;
		padding-bottom: 50px;
		padding-top: 50px;
	}

	.textundleistungsblocks-box .item .text{
		position: relative;
		z-index: 10;
	}
	.textundleistungsblocks-box .arrow{
		height: 25px;
	}
	.textundleistungsblocks-box .arrow-line{
		height: 2px;
	}
}
@media(max-width: 650px){
	.textundleistungsblocks-box .item .text-image-wrapper{
		padding-left: 25px;
		padding-right: 25px;
	}
	.textundleistungsblocks-box .item .text{
		margin-top: -70px;
		width: calc(100% - 60px);
	}
	.textundleistungsblocks-box .item .image{
		width: 100%;
	}
	.textundleistungsblocks-box .item .image a{
		width: 100%;
		padding-top: 60%;
		border-radius: 10px;
		/* Permalink - use to edit and share this gradient. Permalink - Zum Bearbeiten und Teilen dieses Verlaufs verwenden: https://colorzilla.com/gradient-editor/#7d7e7d+0,0e0e0e+100;Black+3D */
		background: radial-gradient(ellipse at center,  #7d7e7d 0%,#0e0e0e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		border: 2px solid #fff;
	}
	.textundleistungsblocks-box .item .image img{
		padding: 20px;
	}
	.textundleistungsblocks-box .item:nth-child(even) h2.spalten-titel .marked,
	.textundleistungsblocks-box .item:nth-child(odd) h2.spalten-titel .marked{
		display: inline;
	}
}









