:root{
	--boxGap: 20px;
	--boxGapBottom: 20px;
	--gapBox: 12px;
}


.box_wrapper{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
/*	justify-content: center;*/
	gap:var(--gapBox);
	
}

.main .box{
	position: relative;
	background-color: #00315C;
/*	background-image: url('./pattern.png');*/
	background-repeat: repeat;
	color: #fff;
	padding: 20px;
	min-height: 288px;
	border-bottom: 8px solid #21A43E;

	text-decoration: none;
	display: block;
	cursor:pointer;
}

.main .box .boxContent{
	z-index: 3;
	position: relative;
	
}

.main .box .boxContent strong{
	text-transform: uppercase;
	
}


.main .vc_col-sm-8 .box:after,
.main  .sidebar_blau:after{
	    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
/*	background-image: url('./pattern.png');*/
	background-repeat: repeat;
	background-size: 44px;
	mix-blend-mode: lighten;
	opacity: 0.4;
	z-index: 1;



}



.box h3{
	font-family: var(--condensedFont);
	font-weight: 700;
	color: #fff;
	font-stretch: condensed;
	font-stretch: 50%;
	text-transform: uppercase;
	min-height: 1em;
	font-size: 26px;
}

.box h3 + p{
	margin-top: 1.5em;
}
.box p{
	color: #fff;
}

.box p a,
.box h3 a{
	color: #21A43E;
	font-weight: 700;
}

.box span.arrowLink ,
.box a.arrowLink {
	display: block;
	width: 24px;
	height: 17px;
	position: absolute;
/*	bottom: 20px;*/
/*	top: 11px;*/
	top: 226px;
/*	right: 20px;*/
	right: 2px;
}

.box a.arrowLink i,
.box span.arrowLink i{
	display: block;
	width: 24px;
	height: 17px;
	background-image: url('../../../assets/img/pfeil.svg');

}


.box.w1_4{
	margin-bottom: var(--gapBox);
	flex: 1 0 calc(25% - var(--gapBox) );
	
}

.box.w1_3{
	margin-bottom: var(--gapBox);
	flex: 0 0 calc(33.333333% - var(--gapBox) );
}

.box.w1_2{
	margin-bottom: var(--gapBox);
	flex: 0 0 calc(50% - var(--gapBox) );
}

.box.w2_3{
	margin-bottom: var(--gapBox);
	flex: 0 0 calc(66.662% - var(--gapBox) );
}

.box.w1_1{
	margin-bottom: var(--gapBox);
	flex: 0 0 calc(100% - var(--gapBox) );
}


.box.sidebar_blau{
	margin-bottom: var(--gapBox);
	flex: 0 0 calc(100% - var(--gapBox) );
	
}

.box.sidebar_grau{
	background-color: #E7E7E7;
	color: #002C47;
	margin-bottom: var(--gapBox);
	flex: 0 0 calc(100% - var(--gapBox) );
	
}

.box.sidebar_grau h3,
.box.sidebar_grau p{
	color: #002C47;
}

.sidebar_grau a.arrowLink i,
.sidebar_grau span.arrowLink i{
	background-image: url('../../../assets/img/pfeil_blau.svg');
}



@media screen and (max-width: 1025px) {
	.box.w1_4, .box.w1_3,	.box.w1_2,	.box.w2_3{	flex: 0 0 calc(50% - var(--gapBox) ); }
}
@media screen and (max-width: 900px) {
	.box.w1_4,	.box.w1_3,	.box.w1_2,	.box.w2_3 { flex: 0 0 calc(100% - var(--gapBox) );	}
	.box{	min-height: 200px; }
	.box h3{
		font-size: 26px;
	}
}