/* BLOCKS CSS  */

/*************************************************************************/
/* Text und Bild Teaser  */

.section_content {
	position: relative;
}
.section_content .section_scrolling {
    height: 100vh;
	display: flex;
    align-items: center;
    justify-content: center;

	--square-size: 15vw;
	--square-max-size: 400px;
}

.section_content .bg-number {
    aspect-ratio: 1;
    background: #4DAD32;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section_content .bg-number .number {
	color: #fff;
	font-size: 500%;
	font-weight: 900;
}

.section_content .section-icon {
    max-width: 13%;
}
@media(max-width: 970px) {
	.section_content .section-icon {
		max-width: 100px;
		margin-left: auto;
		margin-right: 0;
		display: block;
	}
}
.res-content .section_content .postContent  li {
    padding-bottom: 0px;
    margin-left: 30px;
}

.res-content .section_content .postContent li:before {
    content: "\f105";
    font-family: "Font Awesome 6 Pro";
    position: absolute;
    margin-left: -25px;
    text-decoration: inherit;
    color: #4DAD32;
    font-weight: 300;
    font-size: 20px;
    opacity: 1;
}

.section_content h3 {
    font-weight: 700;
}



/*  Mobile Image first reverse  */
@media only screen and (max-width: 970px) {
	.res-section-scrolling .layout-1, .res-section-scrolling .layout-2, .res-section-scrolling .layout-3 {
		flex-direction: column-reverse !important;
	}
}


/*Layout mit 2 Spalten*/
.res-section-scrolling .layout-1.txt-2spalten-layout {
	
}
/* Img Center Height + txt-box */
.res-section-scrolling .layout-1 .txt-imagebox.teaser-img-center-height,
.res-section-scrolling .layout-1 .txt-box.teaser-img-center-height {
	justify-content: center;
    display: flex;
    flex-direction: column;
}
.res-section-scrolling .layout-2 .txt-para-box.teaser-img-center-height,
.res-section-scrolling .layout-2 .teaser-img-center-height {
	justify-content: center;
    display: flex;
    flex-direction: column;
}


/*  02 Parallax Dual Images */

.res-section-scrolling .img-txt-front {
	position: relative;
	z-index: 2;
	top: 40px;
	right: 60px;
}
.res-section-scrolling .img-parallax-background {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
}

.res-section-scrolling .flex-row-reverse .img-teaser-front {
    position: relative;
    z-index: 2;
    top: 40px;
    right: 0;
	left: 30px;
}

@media only screen and (max-width: 970px) {
	.res-section-scrolling .img-txt-front {z-index: 2; top: 10px; right: 0px; left: 5px;}
	.res-section-scrolling .img-parallax-background {width: 85%;}
	.res-section-scrolling .txt-para-box { margin-bottom: 80px;}
}

.res-section-scrolling .txt50-50 {
	overflow: hidden
}


.res-section-scrolling .txt-arrow{
	transition: all 0.5s ease-in-out;
}
.res-section-scrolling .txt-arrow a{
	color: #222;
	text-decoration: none;
	border-bottom: 0 !important;
}
.res-section-scrolling .txt-arrow:hover{
	transform: translateY(5px);
}

.res-section-scrolling .res-section-scrolling .txt-text ul {
	list-style: none;
	font-size: 90%;
	padding: 10px 0 10px 0;
}
.res-section-scrolling .res-section-scrolling .text li {
    padding-bottom: 10px;
    margin-left: 33px;
}
.res-section-scrolling .res-section-scrolling .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-section-scrolling .number-container {*/
/*	max-height: var(--square-max-size);*/
/*	max-width: var(--square-max-size);*/
/*	width: var(--square-size);*/
/*	height: var(--square-size);*/
/*	position: sticky;*/
/*	top: 50vh;*/
/*	left: 0;*/
/*}*/
/*.res-section-scrolling .number-container .square {*/
/*	max-height: var(--square-max-size);*/
/*	max-width: var(--square-max-size);*/
/*	width: var(--square-size);*/
/*	height: var(--square-size);*/
/*	border: none;*/
/*}*/
/*.res-section-scrolling .number-container .number {*/
/*	font-size: calc(4rem + 3vw);*/
/*	font-weight: bold;*/
/*}*/

.res-section-scrolling .section-scrolling-content {
	width: 100%;
}

/* Dot-Container neu */
.dot-container-outer {
	width: 100%;
	--number-box-size: calc(5rem + 5vw);
	--number-box-max-size: calc(5rem + 5vw);
	position: sticky;
	top: calc(50vh - var(--number-box-size) / 2);
	left: 0;
	z-index: 3;
	
	--dot-size: 15px;
}
@media(max-width: 970px) {
	.dot-container-outer {
		display: none;
	}
}
.dot-container-outer .dot-container {
	height: var(--number-box-size);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
}
.dot-container-outer .dot-container .dot {
	width: var(--dot-size);
	height: var(--dot-size);
	border-radius: 100%;
	background-color: transparent;
	border: 2px solid #FFF;
	/*cursor: pointer;*/
	margin: 5px 0;
}
.dot-container-outer .dot-container .dot.active {
	background-color: #4DAD32;
	border-color: #4DAD32;
}
/* Number Container neu */
.number-container-outer {
	--number-box-size: calc(8rem + 5vw);
	--number-box-max-size: calc(8rem + 5vw);

	position: absolute;
	top: calc(50vh - var(--number-box-size) / 2);
	height: var(--number-box-size);
	pointer-events: none;
	z-index: 0;
	width: 100vw;
}

.number-container-outer-mobile {
    display: none;
    --number-box-size: 70px;
    --number-box-max-size: 70px;
}

@media(max-width: 970px) {

	.number-container-outer {
		display: none;
	}

	.number-container-outer-mobile {
		display: block;
	}
}

.number-container-outer-mobile .bg-number_neu,
.number-container-outer .bg-number_neu {
	background-color: #4DAD32;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--number-box-size);
	max-width: var(--number-box-max-size);
	aspect-ratio: 1 / 1;
}
.number-container-outer-mobile .bg-number_neu {
	position: absolute;
}
.number-container-outer-mobile .number-container-neu,
.number-container-outer .number-container-neu {
	position: relative;
}
number-container-outer-mobile .number-container-neu .bg-number_neu,
.number-container-outer .number-container-neu .bg-number_neu {
	background-color: #4DAD32;
	position: absolute;
	z-index: 1;
	width: var(--number-box-size);
	max-width: var(--number-box-max-size);
	aspect-ratio: 1 / 1;
	left: calc(50% - var(--number-box-max-size) / 2);
}
.number-container-outer-mobile .number-container-neu .number_neu,
.number-container-outer .number-container-neu .number_neu {
	position: absolute;
	z-index: 2;
	width: var(--number-box-size);
	max-width: var(--number-box-max-size);
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	font-size: calc(4rem + 2vw);
	font-weight: bold;
	left: calc(50% - var(--number-box-max-size) / 2);
}
.number-container-outer-mobile .number-container-neu .number_neu {
	left: 0;
	font-size: calc(2rem + 2vw);
}
.number-container-outer-mobile .number-container-neu .number_neu.initial,
.number-container-outer .number-container-neu .number_neu.initial {
	opacity: 1;
}

.section_scrolling:nth-child(9n+1) .bg-number_neu { transform: rotate(0deg); }
.section_scrolling:nth-child(9n+2) .bg-number_neu { transform: rotate(40deg); }
.section_scrolling:nth-child(9n+3) .bg-number_neu { transform: rotate(80deg); }
.section_scrolling:nth-child(9n+4) .bg-number_neu { transform: rotate(120deg); }
.section_scrolling:nth-child(9n+5) .bg-number_neu { transform: rotate(160deg); }
.section_scrolling:nth-child(9n+6) .bg-number_neu { transform: rotate(200deg); }
.section_scrolling:nth-child(9n+7) .bg-number_neu { transform: rotate(240deg); }
.section_scrolling:nth-child(9n+8) .bg-number_neu { transform: rotate(280deg); }
.section_scrolling:nth-child(9n+9) .bg-number_neu { transform: rotate(320deg); }



.res-section-scrolling.fixed {
    background-image: url(../../../img/KUB_Muster_negativ.svg);
    background-position: 120% 50%;
    background-repeat: no-repeat;
    background-size: 71vw;
    background-attachment: fixed;
}

	/* Buttons on Dark */

.res-block.res-section-scrolling.Schwarz .btn-secondary, 
.res-block.res-section-scrolling.Dunkelgrau .btn-secondary { 
    color: #222;
}


/* ------------  Container handle Desktop ---------------- */

@media only screen and (min-width: 1280px) {
	/*  Align FULL Layout 03 Unset  */
	.res-section-scrolling.alignfull.layout03 .inner-container{
		max-width: unset;
		margin: unset;
		width: unset;
		padding: unset;
	}
}
@media only screen and (max-width: 970px) {
	.res-section-scrolling.alignfull.layout03 .inner-container{max-width: unset;margin: unset;	width: unset;padding: unset;}
	.res-section-scrolling.alignfull.layout03 .inner-container .content50-50 { max-width: 80%; margin: 30px auto;}
}


/* ------------  CMS Backend Preview ---------------- */

.acf-block-preview .res-section-scrolling {
	position: relative;
	padding: 10px 30px;
	border-left: 1px solid #f4f4f4;
}

.acf-block-preview .res-section-scrolling h1,
.acf-block-preview .res-section-scrolling h2,
.acf-block-preview .res-section-scrolling h3 {
	font-size: 22px;
	line-height: 120% !important;
	padding: 0;
	margin: 10px 0;
}
.acf-block-preview .res-section-scrolling .txt-text p {
	font-size: 16px !important;
	padding: 0;
	margin: 10px 0;
}
.acf-block-preview .res-section-scrolling .txt-text a {
	color: #000;
	text-decoration: none;
}
.acf-block-preview .res-section-scrolling .txt-text ul,
.acf-block-preview .res-section-scrolling .txt-text li{
	font-size: 16px !important;
	line-height: 20px;
	padding: 4px 0;
	margin: 0 0 0 15px;
}
.acf-block-preview .res-section-scrolling .txt-text .btn {
	font-size: 14px !important;
	padding: 8px 16px;
	margin: 8px 0;
	border: 0;
	background-color: #eee;
}

.acf-block-preview .res-section-scrolling .row{
	display: flex;
	justify-content: space-between;
	padding-top: 10px;
}
.acf-block-preview .res-section-scrolling .row > div:nth-child(1){
}
.acf-block-preview .res-section-scrolling .row > div:nth-child(2){
	max-width: 50%;
	padding-left: 20px;
}
.acf-block-preview .res-section-scrolling .row > div:nth-child(2) img{
	max-width: 300px;
}
.acf-block-preview .res-section-scrolling .layout-3.row .txt-image50-50{
	width: 50%;
}
.acf-block-preview .res-section-scrolling .layout-3.row .txt-image50-50 img{
	max-width: 100%;
}
.acf-block-preview .res-section-scrolling .layout-3.row {
	max-width: 1100px;
	margin: 0 auto;
	padding: 20px;
}


.acf-block-preview .res-section-scrolling .img-txt-front {position: relative;z-index: unset;top: unset;right: unset; left: unset; max-width: 80%;}
.acf-block-preview .res-section-scrolling .txt-para-box .img-parallax-background{display: none;}
.acf-block-preview .res-section-scrolling .txt-para-box { width: 100%; max-height: 300px; overflow: hidden;}

.acf-block-preview .res-section-scrolling .layout-3 .txt-image50-50,
.acf-block-preview .res-section-scrolling .layout-3 .txt-image50-50 img {
	max-height: 250px !important;
}

.acf-block-preview .res-section-scrolling.Schwarz, 
.acf-block-preview .res-section-scrolling.Dunkelgrau {
    color: #fff;
	padding: 30px;
}
.acf-block-preview .res-section-scrolling.Schwarz .btn-secondary, 
.acf-block-preview .res-section-scrolling.Dunkelgrau .btn-secondary { 
    color: #222;
}

.acf-block-preview .res-section-scrolling.alignwide .txt-2spalten-layout {
}
.acf-block-preview .res-section-scrolling .txt-imgonly-mobile {
	width: 50px;
	height: auto;
	display: none;
}