:root{
	--boxGap: 20px;
	--boxGapBottom: 20px;
	--gap: 22px;
	--gapBox: calc(var(--gap) / 2); 
}


.box_wrapper{
	display: flex;
	flex-wrap: wrap;
	align-items: stretch; 
	gap:var(--gapBox);
	
}
.box{
	position: relative;
	background-color: #f8f8f8;
	display: flex;
  flex-direction: column; /* optional für Inhalt */
  /*border: 1px solid #C4B39C;*/
  -webkit-box-shadow:  0px 0px 6px 0px rgba(120,120,120,0.1);
  -moz-box-shadow:  0px 0px 6px 0px rgba(120,120,120,0.1);
  box-shadow:  0px 0px 6px 0px rgba(120,120,120,0.1); 
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px; 
  -moz-background-clip: padding; 
  -webkit-background-clip: padding-box; 
  background-clip: padding-box;
}

.wp-singular .box{
    -webkit-box-shadow:  0px 0px 0px 0px transparent;
  -moz-box-shadow:  0px 0px 0px 0px transparent;
  box-shadow:  0px 0px 0px 0px transparent; 
}


.box.w1_4{	flex: 0 0 calc(25% - var(--gapBox) ); }
.box.w1_3{	flex: 0 0 calc(33.333333% - var(--gapBox) ); }
.box.w1_2{	flex: 0 0 calc(50% - var(--gapBox) ); }
.box.w2_3{	flex: 0 0 calc(66.66662% - var(--gapBox) ); }
.box.w1_1{	flex: 0 0 100% ; }


.box.h_1{  min-height: 230px; }
.box.h_2{  min-height: 230px; }
.box.h_3{  min-height: 440px; }


@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 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.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 Buttons */
.box_footer {
  /*display: flex;*/
  /*justify-content: flex-end;*/
  margin-top: 1em;
}


span.btn_box,
a.btn_box{
	display: inline-block;
  padding: 0.75em 1.5em;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  text-transform: initial;
  text-decoration: none;
  color: #ffffff;
  background-color: #000;
  border: none;
  border-radius: 0; /* 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: #C4B39C;
  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;

  /* Optionale Feinjustierungen */
}



.white .boxContent h1,
.white .boxContent h2,
.white .boxContent h3,
.white .boxContent p,
.white .boxContent li{
  color: #fff!important;
  text-shadow: 0px 0px 7px rgba(0, 0, 0, 0.6);
}

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

.black .boxContent h1,
.black .boxContent h2,
.black .boxContent h3,
.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;
}