/**
 * Button: Herz (wunschstoff-btn-with-heart) + optionales Custom-Icon.
 * Ladung: wp_footer (nach Divi TB / deferred CSS).
 * Grafiken relativ zu diesem Ordner (assets/).
 */

.et_pb_button_module_wrapper:has(.wunschstoff-btn-with-heart) {
	overflow: visible !important;
}

.et_pb_button_module_wrapper:has(.wunschstoff-btn-with-icon-custom) {
	overflow: visible !important;
}

/* --- Herz: Flex / Layout (wie style.css + Divi-5-Wrapper) --- */
.et_pb_button_module_wrapper a.et_pb_button.et_pb_module.wunschstoff-btn-with-heart,
.et_pb_button_module_wrapper a.et_pb_button.et_flex_module.wunschstoff-btn-with-heart,
a.et_pb_button.et_pb_module.wunschstoff-btn-with-heart,
a.et_pb_button.et_flex_module.wunschstoff-btn-with-heart,
.et_pb_button.wunschstoff-btn-with-heart,
.et_pb_button_module_wrapper.wunschstoff-btn-with-heart .et_pb_button,
.wunschstoff-btn-with-heart .et_pb_button,
.wunschstoff-btn-with-heart a,
a.et_pb_button.wunschstoff-btn-with-heart,
button.wunschstoff-btn-with-heart {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.42em !important;
	overflow: visible !important;
}

/* ::before mit Herz — alle Pfade inkl. Modul-Klasse am Wrapper (Divi 5 „Module“) */
.et_pb_button_module_wrapper a.et_pb_button.et_pb_module.wunschstoff-btn-with-heart::before,
.et_pb_button_module_wrapper a.et_pb_button.et_flex_module.wunschstoff-btn-with-heart::before,
.et_pb_button_module_wrapper a.et_pb_button.wunschstoff-btn-with-heart::before,
a.et_pb_button.et_pb_module.wunschstoff-btn-with-heart::before,
a.et_pb_button.et_flex_module.wunschstoff-btn-with-heart::before,
.et_pb_button.wunschstoff-btn-with-heart::before,
a.et_pb_button.wunschstoff-btn-with-heart::before,
.et_pb_button_module_wrapper.wunschstoff-btn-with-heart .et_pb_button::before,
.et_pb_button_module_wrapper.wunschstoff-btn-with-heart a.et_pb_button::before,
.wunschstoff-btn-with-heart a.et_pb_button::before,
.et_pb_module.wunschstoff-btn-with-heart .et_pb_module_inner a::before,
.wunschstoff-btn-with-heart a::before,
.wunschstoff-btn-with-heart button::before,
.wunschstoff-btn-with-heart [role="button"]::before,
button.wunschstoff-btn-with-heart::before {
	content: "" !important;
	display: inline-block !important;
	width: 0.95em !important;
	height: 0.95em !important;
	flex: 0 0 0.95em !important;
	min-width: 0.95em !important;
	min-height: 0.95em !important;
	background-image: var(--wunschstoff-heart-icon, url("ws-icon.png")) !important;
	background-position: center !important;
	background-size: contain !important;
	background-repeat: no-repeat !important;
	font-size: inherit !important;
	line-height: inherit !important;
	vertical-align: -0.1em !important;
	-webkit-mask-image: none !important;
	mask-image: none !important;
	-webkit-mask: none !important;
	mask: none !important;
}

/*
 * Höhere Spezifität gegen Divi TB Cached CSS (#et-boc .et-l … sehr lange Ketten).
 */
body.et_divi_theme .et_pb_button_module_wrapper.wunschstoff-btn-with-heart .et_pb_button::before,
body.et_divi_theme .et_pb_button_module_wrapper.wunschstoff-btn-with-heart a.et_pb_button::before,
body.et_divi_theme .et_pb_module.wunschstoff-btn-with-heart .et_pb_module_inner a::before,
body.et_divi_theme .wunschstoff-btn-with-heart a.et_pb_button::before,
body.et_divi_theme .wunschstoff-btn-with-heart .et_pb_module_inner a::before {
	content: "" !important;
	display: inline-block !important;
	width: 0.95em !important;
	height: 0.95em !important;
	flex: 0 0 0.95em !important;
	min-width: 0.95em !important;
	min-height: 0.95em !important;
	background-image: var(--wunschstoff-heart-icon, url("ws-icon.png")) !important;
	background-position: center !important;
	background-size: contain !important;
	background-repeat: no-repeat !important;
	-webkit-mask-image: none !important;
	mask-image: none !important;
	-webkit-mask: none !important;
	mask: none !important;
}

/*
 * Dein TB-Markup: <div class="et_pb_button_module_wrapper"> → direktes <a class="… et_flex_module wunschstoff-btn-with-heart">
 * Divi Flex-Buttons: ::before oft als Mask/Icon — hier hart zurücksetzen (höchste praktische Spezifität).
 */
body.et_divi_theme .et_pb_button_module_wrapper > a.et_pb_button.et_flex_module.wunschstoff-btn-with-heart::before,
body.et_divi_theme .et_pb_button_module_wrapper > a.et_pb_button.wunschstoff-btn-with-heart::before {
	content: "" !important;
	display: inline-block !important;
	width: 0.95em !important;
	height: 0.95em !important;
	flex: 0 0 0.95em !important;
	min-width: 0.95em !important;
	min-height: 0.95em !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	font-family: inherit !important;
	font-size: inherit !important;
	line-height: inherit !important;
	color: transparent !important;
	opacity: 1 !important;
	visibility: visible !important;
	position: static !important;
	-webkit-mask-image: none !important;
	mask-image: none !important;
	-webkit-mask: none !important;
	mask: none !important;
	background-color: transparent !important;
	background-image: var(--wunschstoff-heart-icon, url("ws-icon.png")) !important;
	background-position: center !important;
	background-size: contain !important;
	background-repeat: no-repeat !important;
	vertical-align: -0.1em !important;
}

/* --- Custom-Icon --- */
.et_pb_button_module_wrapper a.et_pb_button.et_pb_module.wunschstoff-btn-with-icon-custom::before,
.et_pb_button_module_wrapper a.et_pb_button.et_flex_module.wunschstoff-btn-with-icon-custom::before,
.et_pb_button_module_wrapper a.et_pb_button.wunschstoff-btn-with-icon-custom::before,
a.et_pb_button.et_pb_module.wunschstoff-btn-with-icon-custom::before,
a.et_pb_button.et_flex_module.wunschstoff-btn-with-icon-custom::before,
.et_pb_button.wunschstoff-btn-with-icon-custom::before,
a.et_pb_button.wunschstoff-btn-with-icon-custom::before,
.et_pb_button_module_wrapper.wunschstoff-btn-with-icon-custom .et_pb_button::before,
.et_pb_button_module_wrapper.wunschstoff-btn-with-icon-custom a.et_pb_button::before,
.wunschstoff-btn-with-icon-custom a.et_pb_button::before,
.et_pb_module.wunschstoff-btn-with-icon-custom .et_pb_module_inner a::before,
.wunschstoff-btn-with-icon-custom a::before,
.wunschstoff-btn-with-icon-custom button::before,
.wunschstoff-btn-with-icon-custom [role="button"]::before,
button.wunschstoff-btn-with-icon-custom::before {
	content: "" !important;
	display: inline-block !important;
	width: 0.95em !important;
	height: 0.95em !important;
	flex: 0 0 0.95em !important;
	min-width: 0.95em !important;
	min-height: 0.95em !important;
	background-image: var(--wunschstoff-custom-btn-icon, url("wunschstoff-btn-custom-icon.png")) !important;
	background-position: center !important;
	background-size: contain !important;
	background-repeat: no-repeat !important;
	font-size: inherit !important;
	line-height: inherit !important;
	vertical-align: -0.1em !important;
	-webkit-mask-image: none !important;
	mask-image: none !important;
	-webkit-mask: none !important;
	mask: none !important;
}

body.et_divi_theme .et_pb_button_module_wrapper.wunschstoff-btn-with-icon-custom .et_pb_button::before,
body.et_divi_theme .et_pb_button_module_wrapper.wunschstoff-btn-with-icon-custom a.et_pb_button::before,
body.et_divi_theme .et_pb_module.wunschstoff-btn-with-icon-custom .et_pb_module_inner a::before,
body.et_divi_theme .wunschstoff-btn-with-icon-custom a.et_pb_button::before,
body.et_divi_theme .wunschstoff-btn-with-icon-custom .et_pb_module_inner a::before {
	content: "" !important;
	display: inline-block !important;
	width: 0.95em !important;
	height: 0.95em !important;
	flex: 0 0 0.95em !important;
	min-width: 0.95em !important;
	min-height: 0.95em !important;
	background-image: var(--wunschstoff-custom-btn-icon, url("wunschstoff-btn-custom-icon.png")) !important;
	background-position: center !important;
	background-size: contain !important;
	background-repeat: no-repeat !important;
	-webkit-mask-image: none !important;
	mask-image: none !important;
	-webkit-mask: none !important;
	mask: none !important;
}

body.et_divi_theme .et_pb_button_module_wrapper > a.et_pb_button.et_flex_module.wunschstoff-btn-with-icon-custom::before,
body.et_divi_theme .et_pb_button_module_wrapper > a.et_pb_button.wunschstoff-btn-with-icon-custom::before {
	content: "" !important;
	display: inline-block !important;
	width: 0.95em !important;
	height: 0.95em !important;
	flex: 0 0 0.95em !important;
	min-width: 0.95em !important;
	min-height: 0.95em !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	font-family: inherit !important;
	font-size: inherit !important;
	line-height: inherit !important;
	color: transparent !important;
	opacity: 1 !important;
	visibility: visible !important;
	position: static !important;
	-webkit-mask-image: none !important;
	mask-image: none !important;
	-webkit-mask: none !important;
	mask: none !important;
	background-color: transparent !important;
	background-image: var(--wunschstoff-custom-btn-icon, url("wunschstoff-btn-custom-icon.png")) !important;
	background-position: center !important;
	background-size: contain !important;
	background-repeat: no-repeat !important;
	vertical-align: -0.1em !important;
}

a.et_pb_button.et_pb_module.wunschstoff-btn-with-icon-custom,
a.et_pb_button.et_flex_module.wunschstoff-btn-with-icon-custom,
a.et_pb_button.wunschstoff-btn-with-icon-custom,
.et_pb_button.wunschstoff-btn-with-icon-custom,
.et_pb_button_module_wrapper.wunschstoff-btn-with-icon-custom .et_pb_button,
.wunschstoff-btn-with-icon-custom .et_pb_button,
.wunschstoff-btn-with-icon-custom a,
a.et_pb_button.wunschstoff-btn-with-icon-custom,
button.wunschstoff-btn-with-icon-custom {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.42em !important;
	overflow: visible !important;
}

/*
 * Notfall: Icon per ::after, ::before komplett aus.
 * Wenn Divi flex ::before trotzdem unsichtbar laesst, erscheint das Herz/Icon trotzdem.
 * --wunschstoff-* kommt aus functions.php (wp_head), unabhaengig vom CSS-Datei-Pfad.
 */
body.et_divi_theme .et_pb_button_module_wrapper > a.et_pb_button.et_flex_module.wunschstoff-btn-with-heart,
body.et_divi_theme .et_pb_button_module_wrapper > a.et_pb_button.wunschstoff-btn-with-heart {
	position: relative !important;
	padding-left: 2.1em !important;
}

body.et_divi_theme .et_pb_button_module_wrapper > a.et_pb_button.et_flex_module.wunschstoff-btn-with-heart::before,
body.et_divi_theme .et_pb_button_module_wrapper > a.et_pb_button.wunschstoff-btn-with-heart::before {
	content: none !important;
	display: none !important;
	width: 0 !important;
	height: 0 !important;
	min-width: 0 !important;
	min-height: 0 !important;
	flex: 0 0 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	-webkit-mask: none !important;
	mask: none !important;
}

body.et_divi_theme .et_pb_button_module_wrapper > a.et_pb_button.et_flex_module.wunschstoff-btn-with-heart::after,
body.et_divi_theme .et_pb_button_module_wrapper > a.et_pb_button.wunschstoff-btn-with-heart::after {
	content: "" !important;
	position: absolute !important;
	left: 0.65em !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	width: 0.95em !important;
	height: 0.95em !important;
	background-image: var(--wunschstoff-heart-icon, url("ws-icon.png")) !important;
	background-position: center !important;
	background-size: contain !important;
	background-repeat: no-repeat !important;
	pointer-events: none !important;
	z-index: 1 !important;
}

body.et_divi_theme .et_pb_button_module_wrapper > a.et_pb_button.et_flex_module.wunschstoff-btn-with-icon-custom,
body.et_divi_theme .et_pb_button_module_wrapper > a.et_pb_button.wunschstoff-btn-with-icon-custom {
	position: relative !important;
	padding-left: 2.1em !important;
}

body.et_divi_theme .et_pb_button_module_wrapper > a.et_pb_button.et_flex_module.wunschstoff-btn-with-icon-custom::before,
body.et_divi_theme .et_pb_button_module_wrapper > a.et_pb_button.wunschstoff-btn-with-icon-custom::before {
	content: none !important;
	display: none !important;
	width: 0 !important;
	height: 0 !important;
	min-width: 0 !important;
	min-height: 0 !important;
	flex: 0 0 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	-webkit-mask: none !important;
	mask: none !important;
}

body.et_divi_theme .et_pb_button_module_wrapper > a.et_pb_button.et_flex_module.wunschstoff-btn-with-icon-custom::after,
body.et_divi_theme .et_pb_button_module_wrapper > a.et_pb_button.wunschstoff-btn-with-icon-custom::after {
	content: "" !important;
	position: absolute !important;
	left: 0.65em !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	width: 0.95em !important;
	height: 0.95em !important;
	background-image: var(--wunschstoff-custom-btn-icon, url("wunschstoff-btn-custom-icon.png")) !important;
	background-position: center !important;
	background-size: contain !important;
	background-repeat: no-repeat !important;
	pointer-events: none !important;
	z-index: 1 !important;
}