/**
* Styles for the [acf_post_templates] shortcode output.
* Rebuilt from the original Elementor/DCE template CSS
* (post-6367, 6363, 6326, 6407, 7170, 6421, 6515, 7188, 7207, 7219, 7248, 6663).
*
* IMPORTANT: fill in the actual hex values below — these were Elementor
* "Global Colors" (Site Settings > Global Colors) and aren't present in
* the per-template CSS files, so I can't know their real values.
*/


:root {
	--hellgrau: #F3F3F3;
}

/* Start Custom Fonts CSS */
@font-face {
	font-family: 'Metropolis';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://staging.meisterinstallateure.at/wp-content/uploads/2023/10/Metropolis-Regular.ttf') format('truetype');
}
@font-face {
	font-family: 'Metropolis';
	font-style: normal;
	font-weight: 500;
	font-display: auto;
	src: url('https://staging.meisterinstallateure.at/wp-content/uploads/2023/10/Metropolis-Medium.ttf') format('truetype');
}
@font-face {
	font-family: 'Metropolis';
	font-style: normal;
	font-weight: 700;
	font-display: auto;
	src: url('https://staging.meisterinstallateure.at/wp-content/uploads/2023/10/Metropolis-Bold.ttf') format('truetype');
}
/* End Custom Fonts CSS */


.acf-block {
	margin: auto;
	margin-top: 80px;
}



/* ==========================================================================
   Category Nav
   ========================================================================== */
.single-post-cat-menu ul {
	list-style: none;
	padding: 0;
	margin: 0 0 40px 0;
}
.single-post-cat-menu ul li {
	display: inline-block;
	margin-right: 40px;
	position: relative;
}
.single-post-cat-menu ul li img {
	height: 20px;
	width: auto;
}
.single-post-cat-menu .category-color-indicator {
	position: absolute;
	bottom: -7px;
	height: 3px;
	width: 100%;
	opacity: 0;
}
.single-post-cat-menu .active .category-color-indicator {
	opacity: 1;
}



/* ==========================================================================
   Post wrapper (from post-6663 — title & featured image only)
   ========================================================================== */

.acf-post-title {
	font-family: "Metropolis", sans-serif;
	font-size: 30px;
	font-weight: 700;
	line-height: 35px;
	letter-spacing: 0.6px;
	color: #000000;
}

.acf-beitragsbild img {
	width: 100%;
	height: 310px;
	object-fit: cover;
	object-position: center center;
}


/* ==========================================================================
   Headline + Text (post-6367)
   ========================================================================== */

.acf-headline-text {
	display: flex;
	flex-direction: column;
	/* padding-top: 40px; */
	max-width: 591px;
}

.acf-headline-text h3 {
	color: var(--e-color-primary);
	margin-bottom: 0;
	font-family: "Metropolis", sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 25px;
	letter-spacing: 1px;
}

.acf-headline-text .acf-text {
	color: var(--e-color-primary);
	margin-bottom: 0;
	font-family: "Metropolis", sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 25px;
}


/* ==========================================================================
   Absatz (post-6363)
   ========================================================================== */

.acf-absatz {
	display: flex;
	flex-direction: column;
	max-width: 591px;
}

.acf-absatz .acf-text {
	margin-bottom: 0;
}


/* ==========================================================================
   Zitat (post-6326)
   ========================================================================== */

.acf-zitat {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	max-width: 587px;
	margin: 0 auto;
	padding-top: 96px;
	padding-bottom: 96px;
	border: none;
}

.acf-zitat .zitat-foto {
	max-width: 400px;
	margin: 0 auto 40px;
	display: block;
}

.acf-zitat .zitat-text {
	color: var(--e-color-primary);
	font-family: "Metropolis", sans-serif;
	font-size: 50px;
	font-weight: 400;
	line-height: 50px;
	letter-spacing: 1px;
	margin-bottom: 20px;
	position: relative;
}

.acf-zitat .zitat-text p {
	margin-block-end: 0;
}

/* Decorative quote marks — replaces the old icon-widget quote glyphs */
/* .acf-zitat .zitat-text::before {
	content: '\201C';
	display: block;
	color: var(--e-color-primary);
	font-size: 38px;
	line-height: 1;
	margin-bottom: 12px;
} */

.acf-zitat .zitat-name {
	display: block;
	color: var(--e-color-primary);
	font-family: "Metropolis", sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 25px;
	letter-spacing: 1px;
	margin-top: 40px;
	font-style: normal;
}

@media (max-width: 1200px) {
	.acf-zitat { padding-top: 60px; padding-bottom: 60px; }
}

@media (max-width: 767px) {
	.acf-zitat { padding-top: 28px; padding-bottom: 28px; }
	.acf-zitat .zitat-text { font-size: 28px; line-height: 38px; letter-spacing: 0.7px; }
	.acf-zitat .zitat-name { font-size: 16px; line-height: 22px; letter-spacing: 0.8px;margin-top: 0; }
}


/* ==========================================================================
   Video with Caption (post-6407)
   ========================================================================== */

.acf-video {
	display: flex;
	flex-direction: column;
	padding-top: 40px;
	padding-bottom: 60px;
	max-width: 927px;
	margin: 0 auto;
}

.acf-video .video-caption {
	max-width: 533px;
	margin-bottom: 10px;
	color: var(--e-color-primary);
	font-family: "Metropolis", sans-serif;
	font-size: 22px;
	font-weight: 500;
	line-height: 28px;
	letter-spacing: 1.1px;
}

.acf-video .video-caption p {
	margin-block-end: 0;
}

.acf-video .video-embed {
	width: 100%;
	margin-bottom: 10px;
}

.acf-video .video-embed iframe {
	height: 550px;
	width: 100%;
}

.acf-video .video-embed .wp-video {
	width: 100% !important;
	/* height: 550px !important; */
	margin: 20px 0;
}

@media (max-width: 767px) {
	.acf-video { flex-direction: column-reverse; }
	.acf-video .video-caption { font-size: 16px; line-height: 22px; letter-spacing: 0.8px; }
}


/* ==========================================================================
   Box with Headline + Numbered List (post-7170)
   ========================================================================== */

.acf-numberedlist-box {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 32px;
	margin: 0 auto 200px;
	padding: 60px;
	background: var(--hellgrau);
	max-width: 758px;
	overflow: visible;
	background: var(--hellgrau, #F3F3F3);
	/* mask-image: url('/wp-content/uploads/2024/07/Frame-422.png'); */
	mask-size: auto;
	mask-repeat: no-repeat;
	mask-position: bottom;
}

.acf-numberedlist-box::after {
	content: '';
	position: absolute;
	left: 0;
	top: 100%;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 200px 100px 0;
	border-color: transparent var(--hellgrau) transparent transparent;
}

.acf-numberedlist-box h2 {
	margin-bottom: 0;
	font-weight: 700;
}

.acf-numberedlist-box .acf-text {
	margin-bottom: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 22px;
}

.acf-numberedlist-box .acf-numberedlist {
	font-family: "Metropolis", sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: 0.32px;
	color: var(--e-color-primary);
	padding-left: 26px;
	margin: 0 0 0 12px;
}

.acf-numberedlist-box .acf-numberedlist li {
	padding: 0 0 20px 20px;
}

.acf-numberedlist-box .acf-numberedlist li::marker {
	font-weight: 700;
	font-size: 20px;
}

.acf-numberedlist-box .acf-numberedlist li strong {
	display: block;
	font-family: "Metropolis", sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 25px;
	letter-spacing: 1px;
	margin-bottom: 10px;
}

@media (max-width: 1024px) and (min-width: 768px) {
	.acf-numberedlist-box { max-width: 100%; }
}

@media (max-width: 767px) {
	.acf-numberedlist-box { padding: 40px 30px 80px 30px; }
	.acf-numberedlist-box::after { border-width: 0 100px 50px 0; }
	.acf-numberedlist-box h2 { font-size: 30px; line-height: 35px; letter-spacing: 1.5px; }
	.acf-numberedlist-box .acf-numberedlist li strong { font-size: 20px; line-height: 25px; letter-spacing: 1px; }
	.acf-numberedlist-box .acf-numberedlist { font-size: 16px; line-height: 22px; letter-spacing: 0.8px; }
}


/* ==========================================================================
   Box with Headline + Bulletlist (post-6421)
   ========================================================================== */

.acf-bulletlist-box {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 32px;
	margin: 100px auto 200px;
	padding: 60px;
	background: var(--hellgrau);
	max-width: 758px;
	overflow: visible;
}

.acf-bulletlist-box::after {
	content: '';
	position: absolute;
	left: 0;
	top: 100%;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 200px 100px 0;
	border-color: transparent var(--hellgrau) transparent transparent;
}

.acf-bulletlist-box h2 {
	margin-bottom: 0;
	font-weight: 700;
}

.acf-bulletlist-box .acf-text {
	margin-bottom: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 22px;
}

.acf-bulletlist-box .acf-bulletlist {
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: "Metropolis", sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: 0.32px;
	color: var(--e-color-primary);
}

.acf-bulletlist-box .acf-bulletlist li {
	position: relative;
	padding: 0 0 20px 26px;
}

.acf-bulletlist-box .acf-bulletlist li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 6px;
	width: 13px;
	height: 13px;
	background: #000000;
}

.acf-bulletlist-box .acf-bulletlist li strong {
	display: block;
	font-family: "Metropolis", sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 25px;
	letter-spacing: 1px;
	margin-bottom: 10px;
}

@media (max-width: 1024px) and (min-width: 768px) {
	.acf-bulletlist-box { max-width: 100%; }
}

@media (max-width: 767px) {
	.acf-bulletlist-box { padding: 40px 30px 80px 30px; }
	.acf-bulletlist-box::after { border-width: 0 100px 50px 0; }
	.acf-bulletlist-box h2 { font-size: 30px; line-height: 35px; letter-spacing: 1.5px; }
	.acf-bulletlist-box .acf-bulletlist li strong { font-size: 20px; line-height: 25px; letter-spacing: 1px; }
	.acf-bulletlist-box .acf-bulletlist { font-size: 16px; line-height: 22px; letter-spacing: 0.8px; }
}


/* ==========================================================================
   Slider (post-6515)
   NOTE: original used Swiper.js — this is a CSS-only horizontal-scroll
   fallback. If you want the real carousel (arrows, dots, drag), that needs
   the Swiper library + JS init, not just CSS. Say the word and I'll add it.
   ========================================================================== */

.acf-slider {
	margin-top: 80px;
}

.acf-slider .acf-text {
	margin-bottom: 20px;
	font-size: 16px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: 0.32px;
	max-width: 481px;
}

/* .acf-slider-images {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 10px;
	-webkit-overflow-scrolling: touch;
} */

.acf-slider-images img {
	/* flex: 0 0 auto;
	width: 660px;
	max-width: 85vw;
	height: 400px;
	object-fit: cover;
	scroll-snap-align: start; */
	
}

.acf-slider-images .swiper-slide {
	opacity: 0.4;
}
.acf-slider-images .swiper-slide.swiper-slide-active {
	opacity: 1;
}

.acf-swiper-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	margin-top:20px;
	height: 50px;
}
.acf-swiper-controls .swiper-pagination,
.acf-swiper-controls .swiper-button-prev,
.acf-swiper-controls .swiper-button-next {
	position: static;
}
.acf-swiper-controls .swiper-pagination {
	width: auto !important;
}
.acf-swiper-controls .swiper-button-prev,
.acf-swiper-controls .swiper-button-next {
	width: 40px;
	height: 40px;
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	margin: 0;
	display: inline-block;
}
.acf-swiper-controls .swiper-button-prev {
	background-image: url('/wp-content/uploads/2024/07/slider-nav-left.svg');
}
.acf-swiper-controls .swiper-button-next {
	background-image: url('/wp-content/uploads/2024/07/slider-nav-right.svg');
}
.acf-swiper-controls .swiper-button-prev::after,
.acf-swiper-controls .swiper-button-next::after {
	display: none;
}
.acf-swiper-controls .swiper-pagination-bullet {
	opacity: 1;
	width: 10px;
	height: 10px;
	margin: 0 5px;
	width: 10px;
	height: 10px;
	background-color: #FFFFFF00;
	border-style: solid;
	border-width: 1px 1px 1px 1px;
	border-color: var(--e-global-color-primary);
}
.acf-swiper-controls .swiper-pagination-bullet.swiper-pagination-bullet-active {
	background-color: var(--e-global-color-primary);
}


/* ==========================================================================
   Circle (post-7188)
   ========================================================================== */

.acf-circle {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	min-height: 326px;
	width: 326px;
	max-width: 100%;
	margin: 80px auto auto;
	border: 4px solid var(--e-global-color-primary);
	border-radius: 50%;
	box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.40);
	transition: transform 0.3s ease;
}

.acf-circle:hover {
	transform: scale(1.03);
}

.acf-circle .circle-headline {
	margin-bottom: 0;
	font-size: 37px;
	font-weight: 700;
	text-transform: uppercase;
	line-height: 36px;
	letter-spacing: 1.85px;
}

.acf-circle .circle-headline p {
	margin-bottom: 0;
}

.acf-circle .circle-info {
	width: 271px;
	max-width: 271px;
	margin-top: 10px;
	font-size: 20px;
	font-weight: 400;
	text-transform: uppercase;
	line-height: 25px;
	letter-spacing: 1px;
}

@media (max-width: 767px) {
	.acf-circle { width: 280px; min-height: 280px; }
	.acf-circle .circle-headline { font-size: 30px; line-height: 40px; }
	.acf-circle .circle-info { width: 235px; max-width: 235px; font-size: 16px; line-height: 26px; }
}


/* ==========================================================================
   Vorstellungsbox (post-7207)
   ========================================================================== */

.acf-vorstellungsbox {
	/* display: flex; */
	background: #EFEFEF;
	max-width: 505px;
	margin: 100px auto 0;
}

.acf-vorstellungsbox img {
	/* flex: 0 0 40%;
	max-width: 40%; */
	width: 100%;
	height: auto;
	/* object-fit: cover; */
	display: block;
}

.acf-vorstellungsbox .acf-text {
	padding: 40px 33px 45px 33px;
	font-size: 18px;
	line-height: 25px;
	letter-spacing: 1px;
}

.acf-vorstellungsbox .acf-text p:last-child {
	margin-bottom: 0;
}

@media (max-width: 767px) {
	.acf-vorstellungsbox { flex-direction: column; }
	.acf-vorstellungsbox img { flex-basis: auto; max-width: 100%; }
	/* .acf-vorstellungsbox .acf-text { padding: 0 20px 20px 20px; } */
}


/* ==========================================================================
   Vorstellungsbox (Allgemein) + Headline (post-7219)
   ========================================================================== */

.acf-vorstellungsbox-allgemein {
	/* display: flex; */
	background: #EFEFEF;
	max-width: 505px;
	margin: 100px auto 0;
}

.acf-vorstellungsbox-allgemein img {
	/* flex: 0 0 40%;
	max-width: 40%; */
	width: 100%;
	height: auto;
	/* object-fit: cover; */
	display: block;
}

.acf-vorstellungsbox-allgemein h3 {
	margin-bottom: 0;
	font-size: 30px;
	font-weight: 700;
	line-height: 40px;
}

.acf-vorstellungsbox-allgemein .acf-text-wrapper {
	padding: 40px 33px 45px 33px;	
}
.acf-vorstellungsbox-allgemein .acf-text {
	margin-top: 16px;
	font-size: 18px;
	line-height: 25px;
	letter-spacing: 1px;
}

.acf-vorstellungsbox-allgemein .acf-text p:last-child {
	margin-bottom: 0;
}

@media (max-width: 767px) {
	.acf-vorstellungsbox-allgemein { flex-direction: column; }
	.acf-vorstellungsbox-allgemein img { flex-basis: auto; max-width: 100%; }
	/* .acf-vorstellungsbox-allgemein .acf-text { padding: 0 20px 20px 20px; } */
}


/* ==========================================================================
   Call to Action (post-7248)
   ========================================================================== */

.acf-cta {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin: 80px auto 0;
	padding: 30px 29px 80px 30px;
	background: #ff8c42; /* per-post accent color in the original — hardcode or make dynamic as needed */
	max-width: 400px;
	transition: transform 0.3s ease;
	/* Decorative corner mask from the original design — remove this rule if the asset is gone */
	mask-image: url('https://staging.meisterinstallateure.at/wp-content/uploads/2024/11/Maske_quadratisch.svg');
	-webkit-mask-image: url('https://staging.meisterinstallateure.at/wp-content/uploads/2024/11/Maske_quadratisch.svg');
	mask-size: cover;
	-webkit-mask-size: cover;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	mask-position: bottom left;
	-webkit-mask-position: bottom left;
}

.acf-cta:hover {
	transform: scale(1.03);
}

.acf-cta h3 {
	margin: 20px 0 0 0;
	font-size: 24px;
	font-weight: 700;
	line-height: 30px;
}

.acf-cta .acf-text {
	margin: 14px 0 0 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 22px;
	letter-spacing: 1px;
}

.acf-cta .acf-text p {
	margin-block-end: 0;
}

.acf-cta .cta-link {
	display: inline-block;
	margin-top: 20px;
	font-family: "Metropolis", sans-serif;
	background-color: var(--e-global-color-primary) !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	letter-spacing: 0.36px !important;
	border-style: solid !important;
	border-width: 2px 2px 2px 2px;
	border-color: var(--e-global-color-primary) !important;
	border-radius: 0px 0px 0px 0px;
	padding: 11px 27px 11px 27px;
	color: white;
	text-decoration: none !important;
	text-transform: uppercase;
	transition: all .25s ease !important;
}

.acf-cta .cta-link:hover {
	background-color: #fff !important;
	color: var(--e-global-color-primary);
	border-color: var(--e-global-color-primary);
}

@media (max-width: 767px) {
	.acf-cta .cta-link { font-size: 18px; }
}