:root{
	--boxGap: 40px;
}


.box_wrapper{
	display: flex;
	flex-wrap: wrap;
	 gap: var(--boxGap); 
	justify-content: space-between;
}

.box{
	background-color: #fff;
  padding: 20px;
}

.black .box{
  background-color: transparent;
  font-size: 35px;
  text-align: center;
}

.box strong{
  position: relative;
  font-size: 40px;
  line-height: 25px;
  display: block;
  bottom: 26px;
}

.black .box strong{
  position: relative;
  font-size: 45px;
  background-color: #fff000;
  display: inline-block;
  padding: 13px 5px;
  color: #000;
  margin-bottom: 6px;
  bottom: 6px;
}

.black .box em{
  font-size: 25px;
  font-weight: normal;
  font-style: normal;

}


.box.w1_4 {
  flex: 0 0 calc(25% - var(--boxGap)); /* 4 Boxen pro Reihe */
  box-sizing: border-box;
  min-width: 200px; /* optional, für responsive Verhalten */
}

.box.w1_3{
  flex: 0 0 calc(33.332% - var(--boxGap)); /* 4 Boxen pro Reihe */
  box-sizing: border-box;
  min-width: 200px; /* optional, für responsive Verhalten */
}

.box.w1_2{
  flex: 0 0 calc(50% - var(--boxGap)); /* 4 Boxen pro Reihe */
  box-sizing: border-box;
  min-width: 200px; /* optional, für responsive Verhalten */
}

.box.w2_3{
  flex: 0 0 calc(66.662% - var(--boxGap)); /* 4 Boxen pro Reihe */
  box-sizing: border-box;
  min-width: 200px; /* optional, für responsive Verhalten */
}


.box.w3_4 {
  flex: 0 0 calc(75% - var(--boxGap)); /* 4 Boxen pro Reihe */
  box-sizing: border-box;
  min-width: 200px; /* optional, für responsive Verhalten */
}

.box.w1_1{
  flex: 0 0 100% ;
  box-sizing: border-box;
  min-width: 200px; /* optional, für responsive Verhalten */
}


.box.h_1{}
.box.h_2{}
.box.h_3{}





@media screen and (max-width: 1025px) {
	.box.w1_4, .box.w1_3,	.box.w1_2,	.box.w2_3, .box.w3_4, .box.w1_1{ flex: 0 0 calc(50% - var(--boxGap));  }
}
@media screen and (max-width: 768px) {
	.box.w1_4,	.box.w1_3,	.box.w1_2,	.box.w2_3, .box.w3_4,	.box.w1_1{ flex: 0 0 100% ;	}
}