/** INTRO **/

#intro .mega > h2 em {
	font-style: normal;
	font-weight: 300;
	font-size: 80%;
	display: block;
}
#intro .desc-box {
	max-width: 75vw;
}
#intro .desc {
	margin-right: -10% !important;
	max-width: 95vw;
	font-weight: 400;
	line-height: 1.5;
}
#intro h2, #intro h3, #intro p {
	color: rgb(var(--white))
}
#intro h3 {
	font-size: 1.125em !important;
	margin-top:-2em;
}
@media(min-width: 768px) and (max-width: 1600px){
	#intro .desc {
		margin-right: 0 !important; 
		width: 35em;
	}
}
@media(max-width: 767px){
	#intro h2 {
		max-width: 10em
	}
	#intro .desc-box {
		padding-top: calc(5em - 7vw);
		max-width: none;
	}
	#intro .desc {
		margin-right: 0 !important;
		max-width: none;
	}
}
@media(max-width: 550px){
	#intro h2 {
		max-width: 7em !important;
	}
	#intro h2 em {
		margin-right: -3em;
	}
	#intro h3 {
		font-size: 1em !important;
	}
}



#leistungen {
	
}
.head {
	gap: 3em;
}
.head .headline h2,
.mega.line h2 {
	position: relative;
	display: inline-block;
}
.head .headline h2:before,
.mega.line h2:before{
	content: '';
	position: absolute;
	z-index: 1;
	display: block;
	left: 0;
	width: 100%;
	bottom:-0.75em;
	border-bottom: solid 0.225em rgb(var(--green));
}
.mega.line h2 {
	margin-bottom: 1em
}
.head .headline h2,
#intro h2 {
	font-size: 3.5em;
	font-weight: 600;
	font-size: clamp(
		42px,
		calc(36px + (42 * (100vw - 730px) / 800)),
		68px
	);
}
.head .desc {
	align-self: center;
	--bgcolor: var(--white)
}
#leistungen .head .headline {
	max-width: 29.5em;	
}

#betreiben .head .headline{
	max-width: 28.5em
}
#leistungen .head .desc .elementor-widget-text-editor,
#betreiben .head .desc .elementor-widget-text-editor {
	max-width: 22em;
	padding:0.75em 1em;
	background-color: rgba(var(--bgcolor),1);
	position: relative;
}
#betreiben .head .desc .elementor-widget-text-editor {
	max-width: 23.25em;
}
#leistungen .head .desc p,
#betreiben .head .desc p {
	color: rgba(var(--lightblack)) !important;
}
#leistungen .head .desc .elementor-widget-text-editor::before,
#betreiben .head .desc .elementor-widget-text-editor::before {
	content: '';
	position: absolute;
	width:0;
	left: 50%;
	top: 100%;
	border: solid 1em transparent;
	border-top-color: rgba(var(--bgcolor),1);
	transform: translateX(-50%)
}
#leistungen a {
	color: inherit;
}

/** BETREIBEN (green background)**/
#betreiben.bg-green {
	padding-top:0;
}
#betreiben.bg-green {
	background-color: rgb(var(--green));
}
#betreiben.bg-green .head .headline h2 {
	color: rgb(var(--lightblack))
}
#betreiben.bg-green .head .headline h2::before {
	border-color: rgb(var(--darkblue));
}
#betreiben.bg-green p, #betreiben.bg-green h3,
#betreiben.bg-green .as-custom-list.type-check li::before {
	color: rgb(var(--lightblack)) !important;
}
#betreiben.bg-green .as-custom-list li > div {
	background-color: rgba(var(--white), 0.4);
}
#leistungen-image:has(+ #betreiben.bg-green).parallax:before {
	background-image: url(/wp-content/themes/evi/images/curve_darkblue_grad_green_04.svg);
}
#betreiben.bg-green + #betreiben-image.parallax:after {
	background-image: url(/wp-content/themes/evi/images/curve_green_bottom_01.svg);
}

/** NACHHALTIGKEIT **/
#nachhaltig {
	overflow: visible;
	padding-top: 0 !important;
	padding-bottom: 5vw
}
#nachhaltig .mega.line h2 {
	margin-bottom: inherit;
}
#nachhaltig .desc {
	overflow: visible;
	padding-top: 5vw !important;
}
#nachhaltig .image-box img {
	width: 50%;
	aspect-ratio: 1/1;
	margin-top:-4.5em;
	float: right;
	display: block;
}
@media(min-width: 768px) and (max-width: 1024px){
	#nachhaltig .image-box img {
		width: 80%;
		max-width: 300px;
		float: none;
		margin: 2.5em auto 3.5em;
	}
}
@media (max-width: 767px){
	#nachhaltig .head{
		padding-bottom: 2em;
		min-height: 42vw
	}
	#nachhaltig .head .headline {
		padding-top: 3em;
	}
	#nachhaltig .image-box img {
		margin-top: calc(-6.5em - 10vw);
	}
}
@media(max-width: 498px){
	#nachhaltig .head{
		padding-bottom: 0;
		min-height: 0
	}
	#nachhaltig .image-box img {
		float: none;
		margin: -1.5em 0 -2em auto;
		min-height: 42vw
	}
}
@media(min-width: 1600px){
	#kalte-nahwaerme .e-con-inner {
		padding-top:2em
	}
}


.parallax{
	position: relative;
	z-index: 0;
	height: 30vw !important;
	min-height: 450px;
	max-height: none !important;
	overflow: visible;
}
.parallax > .e-con-inner::before {
	content:'';
	position: absolute;
	z-index: -1;
	inset: 0 0 0 0;
	/*! background: linear-gradient(rgba(var(--blue),0.65) 30%, rgba(var(--blue),0.55), rgba(var(--blue),0.65) 80%); */
	background: rgba(var(--blue),0.65);
	mix-blend-mode: multiply;
	
}
.parallax:before {
	content: '' !important;
	position: absolute !important;
	display: block !important;
	top: auto !important;
	bottom:-1px;
	left: 50% !important;
	width: 100vw !important;
	_padding-top: 10%;
	aspect-ratio: 2000/350;
	background-image: url(/wp-content/themes/evi/images/curve_green_grad_darkblue_04.svg);
	background-repeat: no-repeat;
	background-position: 50% 101%;
	background-size: 100% 200;
	_background-color: red;
	transform-origin: center top;
	transform: translate(-50%, 0);
	z-index: 1;
	overflow: clip;	
}
.parallax:after {
	content: '' !important;
	position: absolute !important;
	display: block !important;
	top: -1px !important;
	left: 50% !important;
	width: 100vw !important;
	_padding-top: 10%;
	aspect-ratio: 2000/163;
	background-image: url(/wp-content/themes/evi/images/curve_darkblue_bottom_01.svg);
	background-repeat: no-repeat;
	background-position: 50% 0;
	background-size: 100% 200;
	_background-color: red;
	transform-origin: center top;
	transform: translate(-50%, 0);
	z-index: 1;
	overflow: clip;	
}
@media(max-width: 900px){
	.parallax:before {
		width: 150vw !important;
		transform: translate(-35%, 0) rotate(0deg);
	}
}



/** Was ist Nahwärme **/
#kalte-nahwaerme .image-box {
	background: linear-gradient(rgba(var(--white),0),rgba(var(--white),0.1),rgba(var(--white),0.1),rgba(var(--white),0));
}
@media(max-width: 450px){
	#kalte-nahwaerme .image-box img {
		width: calc(100% + 3em);
		max-width: none;
		margin-left:-1.5em;
	}
}

/** PROJEKTE **/
#referenzen {
	background: linear-gradient(rgba(var(--white), 0) 30%, rgba(var(--white), 0.1),rgba(var(--white), 0.1), rgba(var(--white), 0) 90%);/**/
}
#referenzen .elementor-widget-text-editor {
	max-width: 58em;
	margin-left: auto;
	margin-right: auto;
}
@media(max-width: 550px){
	#referenzen {
		padding-top:3em;
		padding-bottom: 2em;
	}
	#referenzen .mega h2 {
		_font-size: calc(14px + 7vw);
	}
}
#projektteaser {
	padding: 0.5em 0
}
.projektteaser {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5em;
	align-items: stretch;
	justify-content: center;
	margin-top:1em;
}
.projektteaser .teaser {
	position: relative;
	flex-basis: calc(33.333% - 1em);
	background-color: rgb(var(--white));
	display: grid;
	--box-shadow-box: 0 0 1.5rem rgba(var(--black),0.25);
	box-shadow: var(--box-shadow-box);
	grid-auto-rows: auto 1fr;
}
.projektteaser .teaser .edit-link {
	position: absolute;
	top:1em;
	right: 1em;
}
.projektteaser .teaser .thumb {
	aspect-ratio: 3/2;
}
.projektteaser .teaser .thumb img.default {
	aspect-ratio: 3/2;
	display: block;
	width: 100%;
	border: none;
	background: rgba(var(--green),1) url(/wp-content/themes/evi/images/LOGO_EVI_signet_white.svg) center / 35% no-repeat
}
.projektteaser .teaser .cont {
	position: relative;
	padding: 1rem 1.25em 1.25em;
	display: flex;
	flex-direction: column;
	gap: 0.75em;
	height: 100%;
}
.projektteaser .teaser .head {
	padding-top: 0.5em;
}
.projektteaser .teaser .head h3 {
	font-size:1.625em;
	line-height: 1.1 !important;
}
.projektteaser .teaser .desc {
	font-size:0.9325em;
	color: rgba(var(--lightblack));
}
.projektteaser .teaser .features,
.projekt .features{
	list-style: none;
	margin:0;
	padding:0;
	font-size:0.9325em;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25em;
	margin-top: auto;
}
.projektteaser .teaser .features li,
.projekt .features li {
	background: rgb(var(--green), 0.35);
	color: rgba(var(--lightblack), 1);
	font-weight: 500;
	padding: 0.25em 0.5em;
}
.projektteaser .teaser .btn_wrapper {
	margin-top: 0.5em !important;
	align-self: flex-start;
}
.projektteaser .teaser .btn_wrapper {
	margin-top: 0.5em !important;
	align-self: flex-start;
}
.projektteaser .teaser .btn_wrapper .button.loading {
	background-color: rgb(var(--blue));
	color: rgb(var(--white));
	border-color: transparent;
}
.projektteaser .teaser .btn_wrapper .button.loading::before {
	content:'';
	background: url(../css/images/loader.svg) center / cover;
	width: 1em;
	height: 1em;
}
/*
.projektteaser .teaser .button {
	text-transform: none;
	background-color: rgba(var(--lightred),0.25);
	color: rgba(var(--darkred), 1);
	box-shadow: 0.5em 0.5em 0
}

.projektteaser .teaser .button.blue {
	text-transform: none;
	background-color: rgba(var(--lightblue),1);
	color: rgba(var(--darkblue), 1);
	box-shadow: 0.5em 0.5em 0
}
*/

@media(max-width: 1024px){
	.projektteaser .teaser .cont {
		_font-size: 0.9em
	}
}

@media(max-width: 1024px){
	.projektteaser {
		flex-wrap: wrap;
		justify-content: center;
	}
	.projektteaser .teaser {
		min-width: 280px;
		flex-basis: calc(50% - 1em);
		flex-grow: 0;
	}
}
@media(max-width: 680px){
	.projektteaser .teaser {
		min-width: 100%;
		box-shadow: 0 0 1.5em -0.5em rgba(var(--black), 0.15);
	}
	.projektteaser .teaser .head h3 {
		font-size:1.5em !important;
	}
}

/** PROJEKT-DETAIL **/
#projektdetails {
	
}

.projekt-detail-target {
	position: fixed;
	z-index: 1005;
	inset: 0 0 0 0;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgba(var(--darkblue), 0.9);
	background-repeat: repeat;
	background-image: url(/hausbau/wp-content/themes/gbhaus/images/gallery_pattern.svg);
	background-size: 2em;
	backdrop-filter: blur(3px);
	padding: 1em 0.5em 1em
}
.projekt-detail-target:not(.show) {
	display: none;
}
.projektdetail .edit-link{
	position: absolute
}
.projektdetail > .closer {
	width: 2.5em;
	height: 2.5em;
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(var(--white), 0.5);
	color: rgba(var(--black));
	z-index: 10000;
	right: 0;
	top: 0;
	text-align: center;
}
.projektdetail > .closer:hover {
	cursor:pointer;
}
.projektdetail > .closer::before {
	content: "\e802";
	font-family: "web-icon-dk";
	font-size: 1em;
    color:rgb(var(--lightblack));
}

.projektdetail {
	position: relative;
	background: rgba(var(--white));
	height: max-content;
	max-height: 100%;
	max-width: 80em;
	width: 100vh;
	overflow: hidden;
	box-shadow: 0 0 0.5em rgba(var(--black)), 0 0 10em 2em rgba(var(--darkblue))
}
.projektdetail > .inner {
	max-height: calc(100vh - 2em);
	overflow-y: auto;
	overflow-x: hidden;
	padding: 1.5em;
}
.projektdetail .projekt {
	display: grid;
	grid-template-areas: 
		"thumb cont"
		"gallery gallery";
	grid-template-columns: minmax(0, 12em) minmax(0, 1fr);
	gap: 1em 1.5em;
}
.projektdetail .projekt .thumb {		
	grid-area: thumb;
}
.projektdetail .projekt .cont {		
	grid-area: cont;
	align-self: center;
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}
.projektdetail .projekt .head .title {
	margin-top:0 !important;
}
.projektdetail .projekt .head .chapter {
	font-size: 0.8em
}
.projektdetail .projekt .cont .desc {		
	font-size: 0.9em;
	font-weight: 500;
	color: rgb(var(--lightblack));
}
.projektdetail .projekt .cont .features {		
	font-size: 0.825em;
}
.projektdetail .projekt .gallery {		
	grid-area: gallery;
}
.projektdetail .projekt .gallery .slider-gallery:has(.bx-controls) {		
	padding-bottom: 1em;
}

.projektdetail .projekt .gallery .slider figure {
	aspect-ratio: 3/2;
	background-color: transparent;
}
.projektdetail .projekt .gallery .slider .slide {
	padding:0;
}
.projektdetail .projekt .gallery .bx-wrapper img {
	position: absolute;
}
.projektdetail .projekt .bx-wrapper .bx-prev, 
.projektdetail .projekt .bx-wrapper .bx-next {
	background-color: rgba(var(--white), 1);
	opacity: 1
}
.projektdetail .projekt .bx-wrapper .bx-prev {
	left:-1em;
	border-radius: 0 1em 1em 0;
}
.projektdetail .projekt .bx-wrapper .bx-next {
	right:-1em;
	border-radius: 1em 0 0 1em;
}
.projektdetail .projekt .bx-wrapper .bx-prev::before, 
.projektdetail .projekt .bx-wrapper .bx-next::after {
	font-size: 1.25em;
	top:0.33em;
	left: 0.325em;
}
.projektdetail .projekt .bx-wrapper .bx-prev::before {
	left: 0.25em;
}
.projektdetail .projekt .bx-wrapper .bx-pager, 
.projektdetail .projekt .bx-wrapper .bx-controls-auto {
	bottom: 0.5em;
}
@media(max-height: 699px) and (orientation: landscape) {
	.projektdetail .projekt {
		font-size: 0.8em
	}
}
@media(max-width: 599px) or (max-height: 500px){
	.projektdetail > .inner {
		padding: 2.5em 1em 2.5em;
	}
	.projektdetail .projekt {
		grid-template-areas:
			"cont"
			"gallery";
		grid-template-columns: 1fr;
		gap: 1em 1.5em;
	}
	.projektdetail .projekt .thumb {
		display: none;
	}
	.projektdetail .projekt .gallery {
		margin-top: 0.25em;
	}
	.projektdetail .projekt .bx-wrapper .bx-pager {
		bottom: 0;
		display: flex;
		justify-content: space-evenly;
	}
	.projektdetail .projekt .bx-wrapper .bx-pager .bx-pager-item {
		width: auto;
		flex-grow: 1;
		flex-shrink: 1;
	}
	.projektdetail .projekt .bx-wrapper .bx-pager a,
	.projektdetail .projekt .bx-wrapper .bx-pager a span {
		width: 100%;
		min-width: 100%;
		flex-grow: 1;
		flex-shrink: 1;
	}
}
@media (max-width: 464px){
	#projekte .elementor-widget-container:has(.grid){
		margin-top:0;
	}
	#projekte .grid, ul.grid {
		margin: auto -0.25rem;
		width: calc(100% + 0.5em);
	}
	#projekte .grid .item {
		width: 50% !important;
		border-width: 0.125em
	}
}




/** FAQ **/
#faq .mega h2 .small {
	font-size: 0.85em;
	vertical-align: 0.0625em;
}
#faq .faq {
	/*max-width: 70em;*/
	margin: 0 auto;
}
@media(min-width: 1023px){
	#faq .faq .accordion {
		columns: 2;
		column-gap: 2rem;
		column-fill: balance;
	}
	#faq .faq .accordion .ac-container {
		break-inside: avoid;
		-webkit-column-break-inside: avoid; /* ältere WebKit-Browser */
		page-break-inside: avoid;           /* Fallback */
	}
	.faq .ac-container {
		background: linear-gradient(rgb(var(--white), 0.075),rgb(var(--white), 0.15),rgb(var(--white), 0.15),rgb(var(--white), 0.075));
	}
}
@media(max-width: 600px){

	#faq .faq {
		margin: -1em -0.5em 0
	}
	#faq h2 {
		font-size: calc(0.9em + 3vw);
		text-align: center;
	}
}
@media(max-width: 499px){
	#faq .big {
		
	}
}

/** KONTAKT **/
#kontakt {
	padding-top: 2vw;
	padding-bottom: 2vw;
}
#kontakt > .e-con-inner {
	max-width: 65em;
	padding-bottom: 4em;
	margin-bottom:-4em;
	border-bottom: solid 1px rgba(var(--white),0.3);
}
#kontakt .headline{
	max-width: 22em;
	margin-top: -2em;
}
#kontakt .desc strong{
	font-weight: 600;
}

/** CTA Footer **/
#cta-footer {
	background: linear-gradient(rgba(var(--white), 1));
	margin-top: calc(4em + 1vw) !important;
	padding-top: calc(2em + 1vw);
	padding-bottom:3vw;
	_box-shadow: var(--box-shadow-box);
	filter: drop-shadow(0 -0.25em 0.125em rgba(var(--darkblue), 0.05) );
	position: relative;
}
#cta-footer .e-con-inner {
	align-items: center;
	justify-content: center;
	text-align: center
}
#cta-footer .e-con-inner::before {
	content: '';
	position: absolute;
	top: 0;
	width: 4rem;
	height: 4rem;
	aspect-ratio: 1/1;
	background: url("../images/favicon_white.svg") 50% 50% /auto 60% no-repeat;
	background-color: rgba(var(--darkblue));
	border: solid 0.325em rgba(var(--white));
	box-sizing: content-box;
	border-radius: 50%;
	margin: -2rem auto 0;
}
#cta-footer .cta-box {
	_background-color: rgba(var(--white), 1);
	_box-shadow: var(--box-shadow-box);
	_border: solid 1px rgba(var(--mediumblue))
}
#cta-footer .cta-box p {
	font-weight: 500;
}

@media(max-width: 667px){
	#cta-footer {
		padding-bottom: 2em;
		filter: drop-shadow(0 -0.5em 0.125em rgba(var(--darkblue), 0.15) );
	}
	#cta-footer .chapter {
		max-width: 15em;
	}
}