

/* BLOCKS CSS  */

/*************************************************************************/
/* Text und Bild Teaser  */


/*  Mobile Image first reverse  */
@media only screen and (max-width: 970px) {
	.res-text-bild .layout-1, .res-text-bild .layout-2, .res-text-bild .layout-3 {
		flex-direction: column-reverse !important;
	}
}


/*Layout mit 2 Spalten*/
.res-text-bild .layout-1.txt-2spalten-layout {
	
}
/* Img Center Height + txt-box */
.res-text-bild .layout-1 .txt-imagebox.teaser-img-center-height,
.res-text-bild .layout-1 .txt-box.teaser-img-center-height {
	justify-content: center;
    display: flex;
    flex-direction: column;
}

.res-text-bild .layout-2 .txt50-50 {
	overflow: hidden
}

.res-text-bild .layout-2 .content50-50-padding {
	padding: 3rem;
}

@media only screen and (min-width: 1440px) { 
	.res-text-bild .layout-2 .content50-50-padding {
		padding: 3rem;
		margin: 5rem;
	}
}
 
	.res-text-bild .layout-3 {
	}
	/* ------------ res-fx-img-fx / MEDIA SCROLL -------------- */
	.res-fx-img-fx-image-container {
		overflow: hidden;
/*		height: 80vh;*/
	}

  /*	Mobile fix height parallax */
	@media only screen and (max-width: 970px) {
		.res-text-bild .layout-3 .res-fx-img-fx-image-container.res-fx-img-fx-parallax-scale {
			height: 25vh;
		}
	}

	/*Parallax*/
	.res-text-bild .res-fx-img-fx-parallax-scale {
		position: relative;
		overflow: hidden;

		img {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 120%;
			object-fit: cover;
			object-position: center;
			padding: 0;
		}
	}


	.res-text-bild .txt-arrow{
		transition: all 0.5s ease-in-out;
	}
	.res-text-bild .txt-arrow a{
		color: #222;
		text-decoration: none;
		border-bottom: 0 !important;
	}
	.res-text-bild .txt-arrow:hover{
		transform: translateY(5px);
	}

	/*
	.res-text-bild .txt-text ul {
		list-style: none;
		font-size: 90%;
		padding: 10px 0 10px 0;
	}
	.res-text-bild .txt-text li {
		padding-bottom: 10px;
		margin-left: 33px;
		border: 1px solid blue;
	}
	.res-text-bild .txt-text li:before {
		content: "\f111";
		font-family: "Font Awesome 6 Pro";
		position: absolute;
		margin-left: -30px;
		margin-top: 2px;
		text-decoration: inherit;
		font-style: normal;
		font-weight: normal;
		font-size: 11px;
		opacity: 0.7;
	}
	*/

	.res-text-bild .layout3-credits .top-title-overline {
		font-size: 80%;
	}

/* ------------ res-fx-stickybox-fx / STICKY TEXT IMAGE -------------- */


	.res-text-bild .layout-4 {
	}

	@media only screen and (min-width: 970px) {
		.res-text-bild .layout-4.res-scroll-txt-with-img .txt-text {
			max-height: 35vh;
			overflow-y: auto;
			margin-bottom: 0.5rem;
		}
		/*		Save Space top padding bevor txt  */
		.res-text-bild .layout-4.resfxcode-block-frame {
			padding-top: 25vh;
		}
	}


	.res-fx-stickybox-fx-button {
	}

	.res-fx-stickybox-fx-section {
/*		max-width: 1460px;*/
		margin: 0 auto;
	}
	.res-fx-stickybox-fx-list__item {
		list-style-type: none;
	}

	.res-fx-stickybox-fx-list {
/*		padding-top: 6rem;*/
		padding: 0;
/*		padding: 200px 50px 200px;*/
		/*padding: 50px;*/
	}
	.res-fx-stickybox-fx-card {
		overflow: hidden;
		height: 80vh;
		display: flex;
		flex-wrap: nowrap; 
	}


	.res-fx-stickybox-fx-card__content,
	.res-fx-stickybox-fx-card__aside {
		width: 50%;
	}
	/* sticky 50-50 - text box wenn background-color und padding  */
	.res-fx-stickybox-fx-card__inner .fx-stickybox-item-animated  {
/*
		 background: #eee; 
		 padding: 0.8rem 2.8rem; 
*/
	}

	.res-fx-stickybox-fx-card__inner {
		height: 70vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		transform: translateY(-35vh);
	}

@media only screen and (min-width: 970px) {
    	.res-fx-stickybox-fx-card__aside {
		/*padding: 4rem 0 4rem 4rem;*/
		display: flex;
		align-items: center; 
		justify-content: end;
	}
} 

	/*Falls kein Parallax*/
	.res-fx-stickybox-fx-card__aside > div:not(.res-fx-stickybox-fx-parallax-scale) > img {
		height: 100%;
		width: auto;
		max-height: 70%;
		border-radius: 0.45em;
	}

	/*Parallax */
	.res-fx-stickybox-fx-parallax-scale {
		position: relative;
		overflow: hidden;
		border-radius: 0.45em;

		height: 100%;
		/*width: 100%;*/ /*Auskommentieren, falls kein Quadrat sein soll*/
		max-height: 75%;  /* Bild Grösse auf 50er Spalte */
		aspect-ratio: 1 / 1; /*Einkommentieren, falls kein Quadrat sein soll*/

		img {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 170%;
			object-fit: cover;
			object-position: center;
			padding: 0;
		}
	}

	/* --- MOBILE: Bild oben, kein Effekt, kein Pinning --- */
	@media (max-width: 768px) {
		.res-fx-stickybox-fx-card {
			height: auto;
			flex-direction: column;
		}

		.res-fx-stickybox-fx-card__aside,
		.res-fx-stickybox-fx-card__content {
			width: 100%;
			height: auto;
			padding: 0;
		}

		.res-fx-stickybox-fx-card__inner {
			transform: none;
			padding: 2rem 0;
			height: auto;
		}

		.res-fx-stickybox-fx-list__item {
			margin-bottom: 4rem
		}

		.res-fx-stickybox-fx-list {
			padding: 0rem;
		}

		.res-fx-stickybox-fx-parallax-scale {
			height: auto;
		}
	}

	.res-fx-stickybox-fx-card__inner .btn {
		align-self: flex-start;
	}

	/* ------------ res-fx-stickybox-fx / STICKY TEXT IMAGE -------------- */


/* Buttons on Dark */

.res-block.res-text-bild.Schwarz .btn-secondary, 
.res-block.res-text-bild.Dunkelgrau .btn-secondary { 
    color: #222;
}


/* ------------  Container handle Desktop ---------------- */

@media only screen and (min-width: 1280px) {
	/*  Align FULL Layout 03 Unset  */
	.res-text-bild.alignfull.layout03 .inner-container{
		max-width: unset;
		margin: unset;
		width: unset;
		padding: unset;
	}
}
@media only screen and (max-width: 970px) {
	.res-text-bild.alignfull.layout03 .inner-container{max-width: unset;margin: unset;	width: unset;padding: unset;}
	.res-text-bild.alignfull.layout03 .inner-container .content50-50 { max-width: 80%; margin: 30px auto;}
}


/* ------------  CMS Backend Preview ---------------- */

.acf-block-preview .res-text-bild {
	position: relative;
	padding: 10px 30px;
	border-left: 1px solid #f4f4f4;
}

.acf-block-preview .res-text-bild h1,
.acf-block-preview .res-text-bild h2,
.acf-block-preview .res-text-bild h3 {
	font-size: 22px;
	line-height: 120% !important;
	padding: 0;
	margin: 10px 0;
}
.acf-block-preview .res-text-bild .txt-text p {
	font-size: 16px !important;
	padding: 0;
	margin: 10px 0;
}
.acf-block-preview .res-text-bild .txt-text a {
	color: #000;
	text-decoration: none;
}
.acf-block-preview .res-text-bild .txt-text ul,
.acf-block-preview .res-text-bild .txt-text li{
	font-size: 16px !important;
	line-height: 20px;
	padding: 4px 0;
	margin: 0 0 0 15px;
}
.acf-block-preview .res-text-bild .txt-text .btn {
	font-size: 14px !important;
	padding: 8px 16px;
	margin: 8px 0;
	border: 0;
	background-color: #eee;
}

.acf-block-preview .res-text-bild .row{
	display: flex;
	justify-content: space-between;
	padding-top: 10px;
}
.acf-block-preview .res-text-bild .row > div:nth-child(1){
}
.acf-block-preview .res-text-bild .row > div:nth-child(2){
	max-width: 50%;
	padding-left: 20px;
}
.acf-block-preview .res-text-bild .row > div:nth-child(2) img{
	max-width: 300px;
}
.acf-block-preview .res-text-bild .layout-3.row .txt-image50-50{
	width: 50%;

}
.acf-block-preview .res-text-bild .layout-3.row .txt-imagebox {
	max-height: 40vh;
	overflow: hidden;
}

.acf-block-preview .res-text-bild .layout-3.row .txt-image50-50 img{
	max-width: 100%;
}
.acf-block-preview .res-text-bild .layout-3.row {
	max-width: 1100px;
	margin: 0 auto;
	padding: 20px;
}


.acf-block-preview .res-text-bild .img-txt-front {position: relative;z-index: unset;top: unset;right: unset; left: unset; max-width: 80%;}
.acf-block-preview .res-text-bild .txt-para-box .img-parallax-background{display: none;}
.acf-block-preview .res-text-bild .txt-para-box { width: 100%; max-height: 300px; overflow: hidden;}

.acf-block-preview .res-text-bild .layout-3 .txt-image50-50,
.acf-block-preview .res-text-bild .layout-3 .txt-image50-50 img {
	max-height: 250px !important;
}

.acf-block-preview .res-text-bild.Schwarz, 
.acf-block-preview .res-text-bild.Dunkelgrau {
    color: #fff;
	padding: 30px;
}
.acf-block-preview .res-text-bild.Schwarz .btn-secondary, 
.acf-block-preview .res-text-bild.Dunkelgrau .btn-secondary { 
    color: #222;
}

.acf-block-preview .res-text-bild.alignwide .txt-2spalten-layout {
}
.acf-block-preview .res-text-bild .txt-imgonly-mobile {
	width: 50px;
	height: auto;
	display: none;
}
.acf-block-preview .res-text-bild .res-fx-img-fx-image-container {
    opacity: 1 !important;
	border-bottom: 1px solid #ccc !important;
	max-height: 30vh;
	overflow: hidden;
}
.acf-block-preview .res-text-bild .layout-4.resfxcode-block-frame {
	border-bottom: 1px solid #ccc !important;
	max-height: 50vh;
	overflow: hidden;
}

.acf-block-preview .res-fx-stickybox-fx-list {
    padding: 20px 0px 15px;
}

.acf-block-preview .res-fx-stickybox-fx-card__inner {
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: normal;
    transform: none;
}

.acf-block-preview .res-fx-stickybox-fx-card__aside {
    display: block;
}

.acf-block-preview .res-fx-stickybox-fx-parallax-scale {
    max-height: 60%;
}

.acf-block-preview .res-fx-stickybox-fx-card__inner .btn {
	font-size: 14px !important;
	padding: 8px 16px;
	margin: 8px 0;
	border: 0;
	background-color: #eee;
    color: #000;
    text-decoration: none;
}
