:root{
	--gap: 22px;
}


.box2_wrapper.gap0 { --gap:0px;  }
.box2_wrapper.gap1 { --gap:1px;  }
.box2_wrapper.gap2 { --gap:2px;  }
.box2_wrapper.gap4 { --gap:4px;  }
.box2_wrapper.gap8 { --gap:8px;  }
.box2_wrapper.gap5 { --gap:5px;  }
.box2_wrapper.gap10{ --gap:10px; }
.box2_wrapper.gap12{ --gap:12px; }
.box2_wrapper.gap14{ --gap:14px; }
.box2_wrapper.gap20{ --gap:20px; }
.box2_wrapper.gap25{ --gap:25px; }
.box2_wrapper.gap30{ --gap:30px; }
.box2_wrapper.gap35{ --gap:35px; }

.box2_wrapper{
	display: flex;
	flex-wrap: wrap;
	align-items: stretch; 
	gap:var(--gap);
  margin-bottom: 20px;
  
}

.box2_wrapper.bdr .box:first-child{border: 3px solid #293133;}
.box2_wrapper.bdr .box:nth-child(2){border: 3px solid #293133;}
.box2_wrapper.bdr .box:nth-child(3){border: 3px solid #293133;}

.box2_wrapper.bdr strong{padding-bottom:15px; display: inline-block; font-size: 1.4em; font-family: var(--h1fontFamily);}
.box2_wrapper.bdr {line-height: 1.8em; }



.box2_wrapper .box{
	position: relative;
	/*background-color: #f0f0f0;*/
  background: transparent;
	display: flex;
  flex-direction: column; /* optional für Inhalt */
  -moz-background-clip: padding; 
  -webkit-background-clip: padding-box; 
  background-clip: padding-box;
  cursor: pointer;
  min-height: calc(300px - var(--gap) );
}

.box2_wrapper a.box,
.box2_wrapper a.box:hover,
.box2_wrapper a.box2row,
.box2_wrapper a.box2row:hover
{
  text-decoration: none;
  color: #000;
  border:0;
}


.box2_wrapper .box2row{
  position: relative;
  background-color: #fff;
  display: flex;
  flex-direction: column; /* optional für Inhalt */
  -moz-background-clip: padding; 
  -webkit-background-clip: padding-box; 
  background-clip: padding-box;
  cursor: pointer;
  min-height: calc(300px - var(--gap) );
  background-clip: padding-box;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px; 
  -moz-background-clip: padding; 
  -webkit-background-clip: padding-box; 
  background-clip: padding-box;
  -webkit-box-shadow:  0px 0px 6px 0px rgba(10,10,10,0.2);
  -moz-box-shadow:  0px 0px 6px 0px rgba(10,10,10,0.2);
  box-shadow:  0px 0px 6px 0px rgba(10,10,10,0.2); 
  
}

.box2_wrapper .box2row h1,
.box2_wrapper .box2row h2,
.box2_wrapper .box2row h3{
  color: var(--blau);
}





.box2_wrapper .box.box_dark:after,
.box2_wrapper .box2row.box_dark:after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.4);
  top:0;
  position: absolute;  
  
}

.box2_wrapper .box2_wrapper.ani_in .box,
.box2_wrapper .box2_wrapper.ani_in .box2row{
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.6s ease, box-shadow 0.3s ease;
}

/* Sichtbar nach Scroll */
.box2_wrapper .box2_wrapper.ani_in .box.visible {
    opacity: 1;
    transform: translateY(0);
}



  /* Die einzelnen Hover-Effekte */
.box2_wrapper.box2_wrapper.a1 .box, .box2_wrapper .box2_wrapper.a1 .box2row{   transition: transform 0.4s ease, box-shadow 0.3s ease; }    
.box2_wrapper.box2_wrapper.a1 .box:hover, .box2_wrapper .box2_wrapper.a1 .box2row:hover {  transform: translateY(-3px); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12); }

.box2_wrapper .box.br0{border-radius:   0px;}
.box2_wrapper .box.br4{border-radius:   4px;}
.box2_wrapper .box.br8{border-radius:   8px;}
.box2_wrapper .box.br12{border-radius: 12px;}
.box2_wrapper .box.br18{border-radius: 18px;}
.box2_wrapper .box.br24{border-radius: 24px;}

 .box2_wrapper .box2row  .br0{border-top-left-radius: 0px; border-top-right-radius: 0px;}
 .box2_wrapper .box2row  .br4{border-top-left-radius: 4px; border-top-right-radius: 4px;}
 .box2_wrapper .box2row  .br8{border-top-left-radius: 8px; border-top-right-radius: 8px;}
 .box2_wrapper .box2row .br12{border-top-left-radius: 12px;  border-top-right-radius: 12px;}
 .box2_wrapper .box2row .br18{border-top-left-radius: 18px; border-top-right-radius: 18px;}
 .box2_wrapper .box2row .br24{border-top-left-radius: 24px; border-top-right-radius: 24px;}


.box2_wrapper .box.w1_4, .box2_wrapper .box2row.w1_4{	flex: 0 0 calc(25% - var(--gap) * 3 / 4 ); }
.box2_wrapper .box.w1_3, .box2_wrapper .box2row.w1_3{	flex: 0 0 calc(33.333333% - var(--gap) * 2 / 3 ); }
.box2_wrapper .box.w1_2, .box2_wrapper .box2row.w1_2{	flex: 0 0 calc(50% - var(--gap)/2 ); }
.box2_wrapper .box.w2_3, .box2_wrapper .box2row.w2_3{	flex: 0 0 calc(66.66662% - var(--gap) / 3 ); }
.box2_wrapper .box.w1_1, .box2_wrapper .box2row.w1_1{	flex: 0 0 100% ; }
.box2_wrapper .box.w40, .box2_wrapper  .box2row.w40{  flex: 0 0 calc(40% - var(--gap)/2 ); }
.box2_wrapper .box.w60, .box2_wrapper  .box2row.w60{  flex: 0 0 calc(60% - var(--gap)/2 ); }



.box2_wrapper .box.h_1, .box2_wrapper .box2row.h_1{  min-height: calc(220px - var(--gap) ); } /* 300px */
.box2_wrapper .box.h_2, .box2_wrapper .box2row.h_2{  min-height: calc(330px - var(--gap) ); } /* 350px */
.box2_wrapper .box.h_3, .box2_wrapper .box2row.h_3{  min-height: calc(440px - var(--gap) ); } /* 400px */
.box2_wrapper .box.h_4, .box2_wrapper .box2row.h_4{  min-height: calc(600px - var(--gap) ); } /* 700px */


@media screen and (max-width: 1025px) {
	.box2_wrapper .box.w1_4, 
  .box2_wrapper .box.w1_3,	
  .box2_wrapper .box.w1_2,	
  .box2_wrapper .box.w2_3,
  .box2_wrapper .box.w40,
  .box2_wrapper .box.w60,
  .box2_wrapper .box2row.w1_4, 
  .box2_wrapper .box2row.w1_3,  
  .box2_wrapper .box2row.w1_2,  
  .box2_wrapper .box2row.w2_3,
  .box2_wrapper .box2row.w40,
  .box2_wrapper .box2row.w60
  {	flex: 0 0 calc(50% - var(--gap)/2 ); }


}



@media screen and (max-width: 900px) {
	.box2_wrapper .box.w1_4,	
  .box2_wrapper .box.w1_3,	
  .box2_wrapper .box.w1_2,	
  .box2_wrapper .box.w2_3, 
  .box2_wrapper .box.w40, 
  .box2_wrapper .box.w60,
  .box2_wrapper .box2row.w1_4, 
  .box2_wrapper .box2row.w1_3,  
  .box2_wrapper .box2row.w1_2,  
  .box2_wrapper .box2row.w2_3,
  .box2_wrapper .box2row.w40,
  .box2_wrapper .box2row.w60
  { flex: 0 0 100% ;	}
	.box2_wrapper .box
  {	min-height: 200px; }

}



.box2_wrapper  .boxContent {
  position: absolute;
  bottom: 0;
  left: 0;
  text-align: left;
  padding: 1em;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%; /* oder feste px/em/vh */
  padding: 1.7em 1.5em;


  font-size: 1.0em;
  line-height: 1.7em;
}


.box2_wrapper .box2_wrapper.bdr .boxContent {
  position: relative;
  bottom: 0;
  left: 0;
  text-align: left;
  padding: 1em;
  width: 100%;
  display: block;
  height: 100%; /* oder feste px/em/vh */
  padding: 1.7em 1.5em;
}


/* die Positionierung der Texte */

.box2_wrapper .tlu .boxContent {text-align: left; bottom: 0; left: 0; justify-content: flex-end;    align-items: flex-start;  }
.box2_wrapper .tlo .boxContent {text-align: left; top: 0; left: 0;}
.box2_wrapper .tru .boxContent {text-align: right; bottom: 0; right: 0;}
.box2_wrapper .tro .boxContent {text-align: right; top: 0; right: 0;}
.box2_wrapper .tz .boxContent  {top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; bottom: initial; }



/* Die Inhalte der zweireihigen Box */

.box2_wrapper .box2row .boxContent{
  position: relative;
  bottom: 0;
  left: 0;
  text-align: left;
  padding: 1em;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 265px; /* oder feste px/em/vh */
  padding: 1.7em 1.5em;
}


.box2_wrapper .box2row .boxText{
  padding: 20px 12px;
  justify-items: stretch;
  color:#000;
  font-size: 1.0em;
  line-height: 1.7em;
}







/* die Buttons */
.box2_wrapper .box_footer {
  margin-top: auto; /* Schiebt den Footer nach unten */
  display: flex;
  justify-content: flex-end;
  justify-items: end;
  margin-bottom: 1em;
  margin-right: 20px;
  width: 100%;

}


.box2_wrapper span.btn_box,
.box2_wrapper a.btn_box,
.box2row .box_footer
{
	display: inline-block;
  /*padding: 0.75em 1.5em;*/
  padding: 0.75em 1em;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  text-transform: initial;
  text-decoration: none;
  color: #ffffff;
  background-color: var(--blau);
  border: none;
  /*border-radius: 30px; */
  border-radius: 8px; /* eckig */
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
  align-self: flex-start; /* oder flex-end für rechts */
  margin-top: auto;

}

.box2_wrapper span.btn_box i,
.box2_wrapper a.btn_box i,
.box2_wrapper .boxContent i,
.box2row .box_footer span i,
.box2row .box_footer i
{
  border-radius: 50%;
  width: 45px;
  height: 45px;
  display: block;
  position: absolute;
  bottom: 35px;
  right: 25px;
  background-color: #000;
  background-image: url('../../../css/icons/arrow-right-lined.svg');
  background-size: 60%;
  background-repeat: no-repeat;
  background-position: center;
}


.box2_wrapper .bg_dark span.btn_box i,
.box2_wrapper .bg_dark a.btn_box i,
.box2_wrapper .bg_dark .boxContent a::after  {
background-color: #ff5229!important; 
}





/*.box2_wrapper span.btn_box:hover,
.box2_wrapper a.btn_box:hover,
.box2_wrapper span.btn_box:focus-visible  ,
.box2_wrapper a.btn_box:focus-visible  {
  background-color: transparent;
  outline: 2px solid var(--blau);
  color: var(--blau);
}
.box2_wrapper .btn_box:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px #000;
}

.box2_wrapper .btn_box:active {
  transform: scale(0.98);
}

.box2_wrapper .btn_box:disabled {
  background-color: #cccccc;
  color: #666666;
  cursor: not-allowed;
}

.box2_wrapper [class^="icon-"]:before,
.box2_wrapper [class*=" icon-"]:before {
  font-family: 'th3-icons' !important;
  font-style: normal;
  font-weight: normal;
  speak: never;
  display: inline-block;
  text-decoration: inherit;
  width: 1.3em;
  margin: .1em .2em 0 .4em;
  text-align: center;

}

*/

.box2_wrapper .boxContent h1,
.box2_wrapper .boxContent h2,
.box2_wrapper .boxContent p,
.box2_wrapper .boxContent li{
  color: #fff!important;
    hyphens: auto;
  overflow-wrap: break-word;   /* bricht extrem lange Wörter */
  word-break: normal;          /* wichtig: nicht break-all */

}

.main .box2_wrapper .boxContent h2 {
  font-family: var(--h2fontFamily), sans-serif;
  line-height: 1.2em;
  font-size: 2.1em;
}

.box2_wrapper .white .boxContent h1,
.box2_wrapper .white .boxContent h2,
.box2_wrapper .white .boxContent p,
.box2_wrapper .white .boxContent li{
  color: #fff!important;
}

.gold .boxContent h1,
.gold .boxContent h2,
.gold .boxContent p,
.gold .boxContent li{
  color: #C4B39C!important;
}

.black .boxContent h1,
.black .boxContent h2,
.black .boxContent p,
.black .boxContent li{
	color: #101010!important;
}



/* Video BG */
.box2_wrapper .video-bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -11;
}

.box2_wrapper .video-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.box2_wrapper .boxContent {
  position: relative;
  z-index: 2;
}
.box2_wrapper .box {
  position: relative;
  overflow: hidden;
}