/**
 * WPBakery Element: Kinderpark Hero
 * Frontend styles - Bootstrap 5 ergänzend, ohne Tailwind-Abhängigkeit.
 */

.mm-kp-hero {
	--mm-kp-text: #111827;
	--mm-kp-copy: #4b5563;
	--mm-kp-emerald: #6ca04c;
	--mm-kp-sky: #2f516a;
	--mm-kp-amber: #f59e0b;
	--mm-kp-orange: #fb923c;
	--mm-kp-bg-start: #e8f3e2;
	--mm-kp-bg-middle: #ffffff;
	--mm-kp-bg-end: #fffbeb;
	--mm-kp-font-heading: 'Nunito', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	position: relative;
	overflow: hidden;
	color: var(--mm-kp-text);
}

.mm-kp-hero--bg-gradient,
.mm-kp-hero--bg-custom {
	background-image: linear-gradient(135deg, var(--mm-kp-bg-start) 0%, var(--mm-kp-bg-middle) 48%, var(--mm-kp-bg-end) 100%);
}

.mm-kp-hero--bg-white {
	background-color: #fff;
}

.mm-kp-hero--bg-light {
	background-color: #f8f9fa;
}

.mm-kp-hero--space-compact {
	padding-block: 3.5rem;
}

.mm-kp-hero--space-default {
	padding-block: 4rem;
}

.mm-kp-hero--space-large {
	padding-block: 5rem;
}

.mm-kp-hero__decoration {
	position: absolute;
	inset: 0;
	opacity: .3;
	pointer-events: none;
}

.mm-kp-hero__blob {
	position: absolute;
	display: block;
	border-radius: 50%;
	filter: blur(4rem);
	transform: translate3d(0, 0, 0);
	animation: mm-kp-pulse 4s ease-in-out infinite;
}

.mm-kp-hero__blob--emerald {
	top: 5rem;
	left: 2.5rem;
	width: 18rem;
	height: 18rem;
	background-color: #a7f3d0;
}

.mm-kp-hero__blob--amber {
	right: 2.5rem;
	bottom: 5rem;
	width: 24rem;
	height: 24rem;
	background-color: #fde68a;
	animation-delay: 1s;
}

.mm-kp-hero__container {
	position: relative;
	z-index: 1;
	padding-inline: 1rem;
}

.mm-kp-hero__container--wide {
	max-width: 80rem;
	margin-inline: auto;
}

.mm-kp-hero__container--fluid {
	padding-inline: clamp(1rem, 4vw, 3rem);
}

.mm-kp-hero__intro {
	margin-bottom: 1.5rem;
}

.mm-kp-hero--align-center .mm-kp-hero__intro {
	text-align: center;
}

.mm-kp-hero--align-left .mm-kp-hero__intro {
	text-align: left;
}

.mm-kp-hero__badge {
	display: inline-flex;
	align-items: center;
	padding: .5rem 1rem;
	margin-bottom: 1rem;
	border-radius: 50rem;
	font-size: .875rem;
	font-weight: 500;
	color: #374151;
}

.mm-kp-hero__badge--gradient {
	background-image: linear-gradient(90deg, #d2e7c7, oklch(96.2% 0.059 95.617));
}

.mm-kp-hero__badge--emerald {
	color: #047857;
	background-color: #d1fae5;
}

.mm-kp-hero__badge--amber {
	color: #b45309;
	background-color: #fef3c7;
}

.mm-kp-hero__badge--neutral {
	color: #374151;
	background-color: #f3f4f6;
}

.mm-kp-hero__title {
	margin: 0 0 1rem;
	font-family: var(--mm-kp-font-heading, inherit);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -.035em;
	color: var(--mm-kp-text);
}

.mm-kp-hero--title-small .mm-kp-hero__title {
	font-size: clamp(2rem, 4vw, 3.25rem);
}

.mm-kp-hero--title-default .mm-kp-hero__title {
	font-size: clamp(2.25rem, 5vw, 3.75rem);
}

.mm-kp-hero--title-large .mm-kp-hero__title {
	font-size: clamp(2.5rem, 5.5vw, 4.5rem);
}

.mm-kp-hero__title-plain,
.mm-kp-hero__gradient {
	display: inline;
}

.mm-kp-hero__gradient {
	color: var(--mm-kp-emerald);
	background-repeat: no-repeat;
	background-size: 100%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.mm-kp-hero__gradient--emerald {
	background-image: linear-gradient(90deg, var(--mm-kp-emerald), var(--mm-kp-sky));
}

.mm-kp-hero__gradient--amber {
	background-image: linear-gradient(90deg, var(--mm-kp-amber), var(--mm-kp-orange));
}

.mm-kp-hero__lead {
	max-width: 42rem;
	margin-bottom: 0;
	font-size: 1.125rem;
	line-height: 1.7;
	color: var(--mm-kp-copy);
}

.mm-kp-hero__lead p:last-child {
	margin-bottom: 0;
}

.mm-kp-hero--align-center .mm-kp-hero__lead {
	margin-inline: auto;
}

.mm-kp-hero__chips {
	margin-top: 1.5rem;
}

.mm-kp-hero--align-center .mm-kp-hero__chips {
	justify-content: center;
}

.mm-kp-hero--align-left .mm-kp-hero__chips {
	justify-content: flex-start;
}

.mm-kp-hero__chip {
	display: inline-flex;
	gap: .375rem;
	align-items: center;
	padding: .5rem 1rem;
	border-radius: 50rem;
	font-size: .875rem;
	font-weight: 600;
	line-height: 1.35;
}

.mm-kp-hero__chip--emerald {
	color: #5f8e43;
	background-color: #d2e7c7;
}

.mm-kp-hero__chip--amber {
	color: #b45309;
	background-color: #fef3c7;
}

.mm-kp-hero__chip--teal {
	color: #0f766e;
	background-color: #ccfbf1;
}

.mm-kp-hero__chip--sky {
	color: #0369a1;
	background-color: #e0f2fe;
}

.mm-kp-hero__chip--neutral {
	color: #374151;
	background-color: #f3f4f6;
}

.mm-kp-hero__gallery {
	margin-top: 1rem;
}

.mm-kp-hero__gallery-item--staggered {
	padding-top: 1rem;
}

.mm-kp-hero__image,
.mm-kp-hero__image-link {
	transition: transform .3s ease, box-shadow .3s ease;
}

.mm-kp-hero__image {
	display: block;
	object-fit: cover;
	box-shadow: 0 .625rem 1.5rem rgba(15, 23, 42, .1), 0 .25rem .625rem rgba(15, 23, 42, .06);
}

.mm-kp-hero__image-link:hover .mm-kp-hero__image,
.mm-kp-hero__image-link:focus-visible .mm-kp-hero__image {
	transform: translateY(-.25rem);
	box-shadow: 0 1.1rem 2.25rem rgba(15, 23, 42, .15), 0 .4rem .8rem rgba(15, 23, 42, .08);
}

.mm-kp-hero__image-link:focus-visible {
	outline: .1875rem solid var(--mm-kp-emerald);
	outline-offset: .25rem;
	border-radius: 1rem;
}

.mm-kp-hero--height-compact .mm-kp-hero__image {
	height: 8.5rem;
}

.mm-kp-hero--height-default .mm-kp-hero__image {
	height: 10rem;
}

.mm-kp-hero--height-tall .mm-kp-hero__image {
	height: 12rem;
}

.mm-kp-hero--radius-small .mm-kp-hero__image {
	border-radius: .75rem;
}

.mm-kp-hero--radius-default .mm-kp-hero__image {
	border-radius: 1rem;
}

.mm-kp-hero--radius-large .mm-kp-hero__image {
	border-radius: 1.5rem;
}

.mm-kp-hero--animate .mm-kp-hero__badge,
.mm-kp-hero--animate .mm-kp-hero__title,
.mm-kp-hero--animate .mm-kp-hero__lead,
.mm-kp-hero--animate .mm-kp-hero__chips,
.mm-kp-hero--animate .mm-kp-hero__gallery-item {
	opacity: 0;
	transform: translateY(1rem);
	transition: opacity .55s ease, transform .55s ease;
}

.mm-kp-hero--animate.is-visible .mm-kp-hero__badge,
.mm-kp-hero--animate.is-visible .mm-kp-hero__title,
.mm-kp-hero--animate.is-visible .mm-kp-hero__lead,
.mm-kp-hero--animate.is-visible .mm-kp-hero__chips,
.mm-kp-hero--animate.is-visible .mm-kp-hero__gallery-item {
	opacity: 1;
	transform: translateY(0);
}

.mm-kp-hero--animate.is-visible .mm-kp-hero__title {
	transition-delay: .06s;
}

.mm-kp-hero--animate.is-visible .mm-kp-hero__lead {
	transition-delay: .12s;
}

.mm-kp-hero--animate.is-visible .mm-kp-hero__chips {
	transition-delay: .18s;
}

.mm-kp-hero--animate.is-visible .mm-kp-hero__gallery-item:nth-child(1) {
	transition-delay: .2s;
}

.mm-kp-hero--animate.is-visible .mm-kp-hero__gallery-item:nth-child(2) {
	transition-delay: .26s;
}

.mm-kp-hero--animate.is-visible .mm-kp-hero__gallery-item:nth-child(3) {
	transition-delay: .32s;
}

.mm-kp-hero--animate.is-visible .mm-kp-hero__gallery-item:nth-child(4) {
	transition-delay: .38s;
}

@keyframes mm-kp-pulse {
	0%,
	100% {
		opacity: .75;
		transform: scale(1);
	}

	50% {
		opacity: 1;
		transform: scale(1.08);
	}
}

@media (min-width: 576px) {
	.mm-kp-hero--space-default {
		padding-block: 6rem;
	}

	.mm-kp-hero--space-large {
		padding-block: 7rem;
	}

	.mm-kp-hero__lead {
		font-size: 1.25rem;
	}

	.mm-kp-hero__gallery-item--staggered {
		padding-top: 1.5rem;
	}

	.mm-kp-hero--height-compact .mm-kp-hero__image {
		height: 10rem;
	}

	.mm-kp-hero--height-default .mm-kp-hero__image {
		height: 13rem;
	}

	.mm-kp-hero--height-tall .mm-kp-hero__image {
		height: 16rem;
	}
}

@media (max-width: 575.98px) {
	.mm-kp-hero__blob--emerald {
		left: -6rem;
	}

	.mm-kp-hero__blob--amber {
		right: -10rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mm-kp-hero__blob {
		animation: none;
	}

	.mm-kp-hero--animate .mm-kp-hero__badge,
	.mm-kp-hero--animate .mm-kp-hero__title,
	.mm-kp-hero--animate .mm-kp-hero__lead,
	.mm-kp-hero--animate .mm-kp-hero__chips,
	.mm-kp-hero--animate .mm-kp-hero__gallery-item,
	.mm-kp-hero__image,
	.mm-kp-hero__image-link {
		opacity: 1;
		transform: none;
		transition: none;
	}
}