:root{
	--gap: 22px;
}


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

.box_wrapper{
	display: flex;
	flex-wrap: wrap;
	align-items: stretch; 
	gap:var(--gap);
  
}





.box{
	position: relative;
	background-color: #f0f0f0;
	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) );

  
}


.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); 
  
}







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

.box_wrapper.ani_in .box,
.box_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 */
.box_wrapper.ani_in .box.visible {
    opacity: 1;
    transform: translateY(0);
}



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

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


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



.box.h_1, .box2row.h_1{  min-height: calc(300px - var(--gap) ); }
.box.h_2, .box2row.h_2{  min-height: calc(350px - var(--gap) ); }
.box.h_3, .box2row.h_3{  min-height: calc(400px - var(--gap) ); }
.box.h_4, .box2row.h_4{  min-height: calc(700px - var(--gap) ); }


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

}



.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;
}


/* die Positionierung der Texte */

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



/* Die Inhalte der zweireihigen Box */

.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: 200px; /* oder feste px/em/vh */
  padding: 1.7em 1.5em;
}


.box2row .boxText{
  padding: 20px 12px;
  justify-items: stretch;
}







/* die Buttons */
.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;

}


span.btn_box,
a.btn_box{
	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; /* 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;
}

span.btn_box:hover,
a.btn_box:hover,
span.btn_box:focus-visible  ,
a.btn_box:focus-visible  {
  background-color: #000;
  /*outline: 2px solid #000;*/
  color: #fff;
  /*outline-offset: 2px;*/
}

.btn_box:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px #000;
}

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

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

[class^="icon-"]:before,
[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;

}


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

}

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

.white .boxContent h1,
.white .boxContent h2,
.white .boxContent p,
.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 */
.video-bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -11;
}

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

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