/*
Theme Name: Betheme Child
Theme URI: https://themes.muffingroup.com/betheme
Author: Muffin group
Author URI: https://muffingroup.com
Description: Child Theme for Betheme
Template: betheme
Version: 2.0.2
*/

/* Expandable services inside BeBuilder Icon Box elements. */
.drm-leistung {
	margin-bottom: 0.32em;
}

.drm-leistung:last-child {
	margin-bottom: 0;
}

.drm-leistung__trigger {
	appearance: none;
	background: transparent;
	border: 0;
	box-shadow: none;
	color: inherit;
	cursor: pointer;
	display: block;
	font: inherit;
	line-height: inherit;
	margin: 0;
	padding: 0.08em 0;
	text-align: left;
	width: 100%;
}

.drm-leistung__arrow {
	display: inline-block;
	height: 0.7em;
	margin-left: 0.55em;
	position: relative;
	top: -0.18em;
	vertical-align: middle;
	width: 1.05em;
}

.drm-leistung__ending {
	white-space: nowrap;
}

.drm-leistung__trigger:hover,
.drm-leistung__trigger:focus {
	background: transparent;
	color: var(--mfn-woo-heading-color, #09abc1);
}

.drm-leistung__trigger:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.drm-leistung__arrow::before {
	background: currentColor;
	content: "";
	display: block;
	height: 100%;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M3.1 1.5h17.8c2 0 3 2.4 1.6 3.8l-8.9 8.9a2.25 2.25 0 0 1-3.2 0L1.5 5.3C.1 3.9 1.1 1.5 3.1 1.5Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M3.1 1.5h17.8c2 0 3 2.4 1.6 3.8l-8.9 8.9a2.25 2.25 0 0 1-3.2 0L1.5 5.3C.1 3.9 1.1 1.5 3.1 1.5Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	width: 100%;
}

.drm-leistung.is-open .drm-leistung__arrow::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M10.4 1.8a2.25 2.25 0 0 1 3.2 0l8.9 8.9c1.4 1.4.4 3.8-1.6 3.8H3.1c-2 0-3-2.4-1.6-3.8l8.9-8.9Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M10.4 1.8a2.25 2.25 0 0 1 3.2 0l8.9 8.9c1.4 1.4.4 3.8-1.6 3.8H3.1c-2 0-3-2.4-1.6-3.8l8.9-8.9Z'/%3E%3C/svg%3E");
}

.drm-leistung.is-open .drm-leistung__trigger {
	color: #03afc7;
	font-weight: 700;
}

.drm-leistung.is-open:not(:last-child) {
	border-bottom: 1px solid rgba(77, 77, 77, 0.16);
}

.drm-leistung__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 620ms cubic-bezier(0.16, 1, 0.3, 1);
}

.drm-leistung__inner {
	opacity: 0;
	overflow: hidden;
	transform: translateY(-6px);
	transition:
		opacity 600ms cubic-bezier(0.16, 1, 0.3, 1),
		transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.drm-leistung__inner > :first-child {
	margin-top: 0.08em;
}

.drm-leistung__inner > :last-child {
	margin-bottom: 1.35em;
}

.drm-leistung.is-open .drm-leistung__panel {
	grid-template-rows: 1fr;
	font-weight: 700;
}

.drm-leistung.is-open .drm-leistung__inner {
	opacity: 1;
	transform: translateY(0);
}

.is-open .drm-leistung__panel {
    margin-bottom: 10px !important;
}

.drm-leistung__inner p{
    line-height: 1.5em;
}

/* Keep service-card text and icons inside the card at every breakpoint. */
.mfn-icon-box:has(.drm-leistung) {
	align-items: center;
	column-gap: clamp(10px, 2vw, 20px);
}

.mfn-icon-box:has(.drm-leistung) .desc-wrapper {
	flex: 1 1 0;
	min-width: 0;
	width: auto;
}

.mfn-icon-box:has(.drm-leistung) .desc,
.mfn-icon-box:has(.drm-leistung) .title,
.mfn-icon-box:has(.drm-leistung) .drm-leistung__trigger {
	max-width: 100%;
	overflow-wrap: break-word;
}

.mfn-icon-box:has(.drm-leistung) .icon-wrapper {
	background: transparent !important;
	flex: 0 0 clamp(56px, 20%, 100px);
	min-width: 0;
	overflow: visible;
	width: clamp(56px, 20%, 100px);
}

.mfn-icon-box:has(.drm-leistung) .icon-wrapper i {
	font-size: clamp(42px, 5vw, 63px) !important;
	line-height: 1 !important;
	max-width: 100%;
}

@media only screen and (max-width: 420px) {
	.mfn-icon-box:has(.drm-leistung) {
		align-items: stretch;
		flex-direction: column;
		row-gap: 12px;
	}

	.mfn-icon-box:has(.drm-leistung) .desc-wrapper {
		order: 1;
		width: 100%;
	}

	.mfn-icon-box:has(.drm-leistung) .icon-wrapper {
		align-self: flex-end;
		order: 2;
	}
}

@media (prefers-reduced-motion: reduce) {
	.drm-leistung__panel {
		transition: none;
	}

	.drm-leistung__inner {
		transition: none;
	}
}