/* M40 - Leistung Detail */

section.m40_leistung_detail {
	position: relative;
}

/* Variante 1: Transparenter Hintergrund (Default) */

/* Variante 2: Grauer Hintergrund */
section.m40_leistung_detail.variante2 {
	background-color: #f6f6f6;
}

/* Variante 3: Lavendel Hintergrund */
section.m40_leistung_detail.variante3 {
	background-color: #cbc9dc;
}

section.m40_leistung_detail.variante3 .m40_titel,
section.m40_leistung_detail.variante3 .m40_text,
section.m40_leistung_detail.variante3 .m40_text *,
section.m40_leistung_detail.variante3 .m40_untertitel {
	color: #fff;
}

/* Variante 4: Bild als Hintergrund, Text als Overlay rechts */
section.m40_leistung_detail.variante4 {
	color: #fff;
}

section.m40_leistung_detail.variante4 .m40_inner {
	position: relative;
	min-height: 800px;
	align-items: stretch;
}

section.m40_leistung_detail.variante4 .m40_bild_col {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	flex: none;
	z-index: 1;
}

section.m40_leistung_detail.variante4 .m40_bild_col::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to right, rgba(0, 0, 0, 0.65) 0%, transparent 30%),
		linear-gradient(to left, rgba(0, 0, 0, 0.65) 0%, transparent 80%);
	z-index: 1;
	pointer-events: none;
}

section.m40_leistung_detail.variante4 .m40_left_col {
	position: relative;
	z-index: 2;
	flex: 0 0 50%;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-top: 137px;
	padding-bottom: 137px;
}

/* Dots in der linken Col mittig (statt absolute auf dem Bild) */
section.m40_leistung_detail.variante4 .m40_left_col .mM_dots_container {
	position: relative;
	bottom: auto;
	left: auto;
	transform: none;
}

section.m40_leistung_detail.variante4 .m40_text_col {
	position: relative;
	z-index: 2;
	flex: 0 0 50%;
	padding-top: 137px;
	padding-bottom: 137px;
}

section.m40_leistung_detail.variante4 .m40_titel,
section.m40_leistung_detail.variante4 .m40_text,
section.m40_leistung_detail.variante4 .m40_text *,
section.m40_leistung_detail.variante4 .m40_titel_aufzahlung,
section.m40_leistung_detail.variante4 .m40_aufzahlung_item,
section.m40_leistung_detail.variante4 .m40_untertitel {
	color: #fff;
}

section.m40_leistung_detail.variante4 > .m40_untertitel_container {
	top: 133px;
	z-index: 3;
}

/* V4: Desktop-Untertitel ausserhalb mM_container, Mobile-Variante im text_content vor Titel */
.m40_untertitel_mobile,
.m40_button_mobile {
	display: none;
}

@media screen and (max-width: 1199px) {
	.m40_untertitel_desktop {
		display: none;
	}

	.m40_untertitel_mobile {
		display: block;
	}
}

@media screen and (max-width: 991px) {
	.m40_button_desktop {
		display: none;
	}

	.m40_button_mobile {
		display: block;
	}

	/* V4 Mobile: left_col mit Desktop-Dots verbergen, Dots wandern ins Bild */
	section.m40_leistung_detail.variante4 .m40_left_col {
		display: none;
	}
}

/* Layout */
section.m40_leistung_detail .m40_inner {
	display: flex;
	align-items: center;
	gap: 0 110px;
}

section.m40_leistung_detail .m40_inner.m40_reverse {
	flex-direction: row-reverse;
}

/* Text-Links/Bild-Rechts: zusaetzliches Padding links am Text-Block */
section.m40_leistung_detail .m40_inner.m40_reverse .m40_text_col {
	padding-left: 110px;
}

section.m40_leistung_detail .m40_bild_col,
section.m40_leistung_detail .m40_text_col {
	flex: 1 1 50%;
	min-width: 0;
}

/* Bild / Galerie */
section.m40_leistung_detail .m40_bild_col {
	position: relative;
	height: 608px;
	overflow: hidden;
}

section.m40_leistung_detail .m40_galerie_container,
section.m40_leistung_detail .m40_galerie_item {
	width: 100%;
	height: 100%;
}

section.m40_leistung_detail .m40_image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

section.m40_leistung_detail.variante1 .m40_image,
section.m40_leistung_detail.variante2 .m40_image,
section.m40_leistung_detail.variante3 .m40_image {
	object-position: top;
}

section.m40_leistung_detail.variante4 .m40_image {
	object-position: left;
}

/* Dots: Balken-Optik wie in project.css fuer .mM_dots_dot,
   hier auf .mM_dot (Singular) gemappt — das Parent-Theme schreibt das Markup
   nach Slick-Init in BLUEtheWEB/functions.php (buildSlickUI) auf .mM_dot um. */
section.m40_leistung_detail .mM_dots_container {
	position: absolute;
	bottom: 69px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	width: 100%;
	max-width: 99%;
}

section.m40_leistung_detail .mM_dots_container .mM_dots {
	width: 100%;
}

section.m40_leistung_detail .mM_dots_container .slick-dots {
	display: flex;
	gap: 10px;
	justify-content: center;
	align-items: center;
	position: relative;
	bottom: unset;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}

section.m40_leistung_detail .mM_dots_container .slick-dots li {
	width: auto;
	height: auto;
	margin: 0;
}

section.m40_leistung_detail .mM_dot {
	width: 21px;
	height: 3px;
	border-radius: 0;
	background: rgba(255, 255, 255, .2);
	position: relative;
	transition: none;
}

section.m40_leistung_detail .mM_dot::after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	background: #fff;
	transform: scaleX(0);
	height: 3px;
	width: 21px;
	transform-origin: left center;
	transition: none;
}

section.m40_leistung_detail .mM_dots li:hover .mM_dot,
section.m40_leistung_detail .mM_dots li.slick-active .mM_dot {
	background: rgba(255, 255, 255, .2);
}

section.m40_leistung_detail .mM_dots li.slick-active .mM_dot::after {
	animation: slickFill 4000ms linear forwards;
}

@media all and (max-width: 575px) {
	section.m40_leistung_detail .mM_dots_container {
		bottom: 19px;
	}

	section.m40_leistung_detail .mM_dots_container .slick-dots {
		gap: 5px;
	}

	section.m40_leistung_detail .mM_dot,
	section.m40_leistung_detail .mM_dot::after {
		width: 11px;
	}
}

/* Titel + Texte */
section.m40_leistung_detail .m40_titel {
	margin: 0 0 1rem;
	font-size: 2.5rem;
	font-weight: 500;
	line-height: 1.15;
	color: #4d4d4f;
}

section.m40_leistung_detail .m40_text {
	margin-bottom: 1.5rem;
	color: #4d4d4f;
}

/* Aufzaehlung */
section.m40_leistung_detail .m40_aufzahlung_container {
	margin-bottom: 2rem;
}

section.m40_leistung_detail .m40_titel_aufzahlung {
	margin: 0 0 1rem;
	font-size: 1rem;
	font-weight: 600;
	color: #4d4d4f;
}

section.m40_leistung_detail .m40_aufzahlung {
	list-style: none;
	margin: 0;
	padding: 0;
}

section.m40_leistung_detail .m40_aufzahlung_item {
	position: relative;
	padding-left: 20px;
	margin-bottom: 0.5rem;
	color: #4d4d4f;
}

section.m40_leistung_detail .m40_aufzahlung_icon {
	position: absolute;
	top: 6px;
	left: 0;
	width: 9px;
	height: 9px;
	fill: #40437d;
}

section.m40_leistung_detail.variante3 .m40_aufzahlung_icon,
section.m40_leistung_detail.variante4 .m40_aufzahlung_icon {
	fill: #fff;
}

section.m40_leistung_detail.variante3 .button.secondary:hover .mM_button_text {
	color: #4d4d4f;
}

section.m40_leistung_detail.variante3 .button.secondary:hover svg {
	fill: #4d4d4f;
}

/* Responsive */
@media screen and (max-width: 1599px) {
	section.m40_leistung_detail .m40_inner {
		gap: 0 60px;
	}

	section.m40_leistung_detail .m40_titel {
		font-size: 2rem;
	}

	section.m40_leistung_detail .m40_inner.m40_reverse .m40_text_col {
		padding-left: 0;
	}
}

@media screen and (max-width: 991px) {
	section.m40_leistung_detail .m40_inner,
	section.m40_leistung_detail .m40_inner.m40_reverse {
		flex-direction: column-reverse;
		gap: 40px 0;
	}

	section.m40_leistung_detail .m40_bild_col,
	section.m40_leistung_detail .m40_text_col {
		width: 100%;
		flex-basis: auto;
	}

	section.m40_leistung_detail .m40_inner.m40_reverse .m40_text_col {
		padding-left: 0;
	}
}

@media screen and (max-width: 575px) {
	section.m40_leistung_detail {
		overflow: hidden;
	}

	section.m40_leistung_detail .m40_titel {
		font-size: 1.75rem;
	}

	section.m40_leistung_detail .m40_bild_col,
	section.m40_leistung_detail.variante4 .m40_bild_col {
		height: 400px;
	}

	section.m40_leistung_detail.variante4 .m40_text_col,
	section.m40_leistung_detail.variante4 .m40_left_col {
		padding-top: 35px;
		padding-bottom: 35px;
	}
}

/* Variante 4 — Mobile: Bild und Text gestackt (Bild unter Text, ueber Vollbreite) */
@media screen and (max-width: 991px) {
	section.m40_leistung_detail.variante4 {
		background-color: #f6f6f6;
	}

	section.m40_leistung_detail.variante4 .m40_inner {
		min-height: 0;
	}

	section.m40_leistung_detail.variante4 .m40_bild_col {
		position: relative;
		inset: auto;
		height: 608px;
	}

	/* Desktop-Gradient (von rechts) deaktivieren */
	section.m40_leistung_detail.variante4 .m40_bild_col::after {
		display: none;
	}

	/* Verlauf vom Section-Hintergrund (#f6f6f6) ins Bild */
	section.m40_leistung_detail.variante4 .m40_bild_col::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 100px;
		background: linear-gradient(to bottom, #f6f6f6 0%, transparent 100%);
		z-index: 2;
		pointer-events: none;
	}

	section.m40_leistung_detail.variante4 .m40_text_col,
	section.m40_leistung_detail.variante4 .m40_left_col {
		margin-left: 0;
		padding-top: 75px;
		padding-bottom: 75px;
		padding-left: 0;
		flex: auto;
	}

	section.m40_leistung_detail.variante4 .m40_titel,
	section.m40_leistung_detail.variante4 .m40_text,
	section.m40_leistung_detail.variante4 .m40_text *,
	section.m40_leistung_detail.variante4 .m40_titel_aufzahlung,
	section.m40_leistung_detail.variante4 .m40_aufzahlung_item,
	section.m40_leistung_detail.variante4 .m40_untertitel {
		color: #4d4d4f;
	}

	section.m40_leistung_detail.variante4 .m40_aufzahlung_icon {
		fill: #40437d;
	}

}

/* V4 Mobile sehr klein — Bildhoehe analog zu Variante 1-3 reduzieren */
@media screen and (max-width: 575px) {
	section.m40_leistung_detail.variante4 .m40_bild_col {
		height: 400px;
	}
}

@media screen and (max-width: 400px) {
	section.m40_leistung_detail .m40_bild_col,
	section.m40_leistung_detail.variante4 .m40_bild_col {
		height: 280px;
	}
}