/**
 * Grünwerk Über uns Modul
 * Bootstrap-5-Ergänzungen ohne Tailwind-Abhängigkeit.
 */

.maple-gruenwerk-about {
	position: relative;
	overflow: hidden;
	color: var(--white, #fff);
}

.maple-gruenwerk-about--bg-emerald {
	background: var(--color-emerald-500, #8d921b);
}

.maple-gruenwerk-about--bg-emerald-dark {
	background: var(--color-emerald-800, #54590f);
}

.maple-gruenwerk-about--bg-zinc-dark {
	background: var(--color-zinc-950, #141414);
}

.maple-gruenwerk-about--spacing-compact {
	padding-top: 4rem;
	padding-bottom: 4rem;
}

.maple-gruenwerk-about--spacing-default {
	padding-top: 5rem;
	padding-bottom: 5rem;
}

.maple-gruenwerk-about--spacing-large {
	padding-top: 6rem;
	padding-bottom: 6rem;
}

.maple-gruenwerk-about__container {
	position: relative;
	z-index: 1;
}

.maple-gruenwerk-about__row {
	--bs-gutter-x: 4rem;
	--bs-gutter-y: 4rem;
}

.maple-gruenwerk-about__media-wrap {
	position: relative;
}

.maple-gruenwerk-about__blob {
	position: absolute;
	top: -1rem;
	left: -1rem;
	width: 18rem;
	height: 18rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--color-emerald-600, #8d921b) 20%, transparent);
	filter: blur(48px);
	pointer-events: none;
}

.maple-gruenwerk-about__media {
	position: relative;
}

.maple-gruenwerk-about__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: .5rem;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .35);
}

.maple-gruenwerk-about__stat {
	position: absolute;
	right: -2rem;
	bottom: -2rem;
	padding: 1.5rem;
	border-radius: .5rem;
	background: var(--color-emerald-600, #8d921b);
	box-shadow: 0 20px 35px rgba(0, 0, 0, .28);
}

.maple-gruenwerk-about__stat-number {	
	font-size: clamp(2.25rem, 4vw, 2.5rem);
	font-weight: 800;
	line-height: 1;
	color: var(--white, #fff);
}

.maple-gruenwerk-about__stat-text {
	margin-top: .35rem;
	font-size: .875rem;
	line-height: 1.25;
	color: var(--color-emerald-200, #e1e49f);
}

.maple-gruenwerk-about__content {
	max-width: 42rem;
}

.maple-gruenwerk-about__eyebrow {
	display: inline-block;
	font-size: .875rem;
	font-weight: 700;
	letter-spacing: .16em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--color-emerald-300, #cbd162);
}

.maple-gruenwerk-about__headline {
	margin: 1rem 0 1.5rem;	
	font-size: clamp(2.5rem, 5vw, 3rem);
	font-weight: 800;
	line-height: 1.08;
	color: var(--white, #fff);
}

.maple-gruenwerk-about__intro {
	margin: 0 0 2rem;
	font-size: 1.125rem;
	line-height: 1.75;
	color: var(--white, #fff);
}

.maple-gruenwerk-about__features {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	margin-bottom: 2.5rem;
}

.maple-gruenwerk-about__feature {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
}

.maple-gruenwerk-about__feature-icon {
	width: 3rem;
	height: 3rem;
	border-radius: .5rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 3rem;
	background: color-mix(in srgb, var(--color-emerald-900, #41460b) 50%, transparent);
	color: var(--white, #fff);
}

.maple-gruenwerk-about__svg {
	width: 1.5rem;
	height: 1.5rem;
}

.maple-gruenwerk-about__feature-title {
	margin: 0 0 .25rem;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--white, #fff);
}

.maple-gruenwerk-about__feature-text {
	margin: 0;
	font-size: .875rem;
	line-height: 1.55;
	color: var(--white, #fff);
}

.maple-gruenwerk-about__cta {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	color: var(--color-emerald-300, #cbd162);
	transition: color .2s ease, transform .2s ease;
}

.maple-gruenwerk-about__cta:hover,
.maple-gruenwerk-about__cta:focus {
	color: var(--color-emerald-200, #e1e49f);
	transform: translateX(2px);
	text-decoration: none;
}

@media (max-width: 991.98px) {
	.maple-gruenwerk-about__row {
		--bs-gutter-x: 1.5rem;
		--bs-gutter-y: 4rem;
	}

	.maple-gruenwerk-about__content {
		max-width: none;
	}
}

@media (max-width: 767.98px) {
	.maple-gruenwerk-about--spacing-compact,
	.maple-gruenwerk-about--spacing-default,
	.maple-gruenwerk-about--spacing-large {
		padding-top: 4rem;
		padding-bottom: 4rem;
	}

	.maple-gruenwerk-about__stat {
		right: 1rem;
		bottom: -1.5rem;
		padding: 1.15rem 1.25rem;
	}

	.maple-gruenwerk-about__headline {
		font-size: clamp(2.1rem, 10vw, 2.75rem);
	}
}