/**
 * Hinweisgeber CTA v1.0.1
 * Bootstrap-5-Ergänzungen ohne Tailwind.
 */

.mm-hgcta {
	--color-sky-50: #e2edf4;
	--color-sky-100: #c5d8e6;
	--color-sky-200: #a6c1d5;
	--color-sky-500: #2f516a;
	--color-sky-600: #29475d;
	--color-sky-700: #233d50;
	--color-emerald-50: #e8f3e2;
	--color-emerald-100: #d2e7c7;
	--color-emerald-500: #79b255;
	--color-emerald-600: #6ca04c;
	--color-emerald-700: #5f8e43;
	--hgcta-accent: var(--color-sky-600);
	--hgcta-accent-strong: var(--color-sky-700);
	--hgcta-second: var(--color-emerald-600);
	--hgcta-second-strong: var(--color-emerald-700);
	position: relative;
}

.mm-hgcta--bg-gray { background: #f9fafb; border-top: 0.0625rem solid #f3f4f6; }
.mm-hgcta--bg-white { background: #ffffff; }
.mm-hgcta--bg-transparent { background: transparent; }

.mm-hgcta--space-tiny { padding-block: 1rem; }
.mm-hgcta--space-compact { padding-block: 2rem; }
.mm-hgcta--space-default { padding-block: 3rem; }

.mm-hgcta--design-emerald-sky {
	--hgcta-accent: var(--color-emerald-600);
	--hgcta-accent-strong: var(--color-emerald-700);
	--hgcta-second: var(--color-sky-600);
	--hgcta-second-strong: var(--color-sky-700);
}

.mm-hgcta--design-neutral {
	--hgcta-accent: #4b5563;
	--hgcta-accent-strong: #111827;
	--hgcta-second: #6b7280;
	--hgcta-second-strong: #374151;
}

.mm-hgcta__container { position: relative; z-index: 1; padding-inline: 1rem; }
.mm-hgcta__container--wide { max-width: 80rem; margin-inline: auto; }
.mm-hgcta__container--fluid { padding-inline: clamp(1rem, 4vw, 3rem); }

.mm-hgcta__box {
	overflow: hidden;
	border: 0.0625rem solid #f3f4f6;
	border-radius: 1rem;
	background: #ffffff;
	box-shadow: 0 0.35rem 1.1rem rgba(15, 23, 42, 0.05);
}

.mm-hgcta--layout-split .mm-hgcta__box {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.75fr);
}

.mm-hgcta--layout-stacked .mm-hgcta__box {
	display: flex;
	flex-direction: column;
}

.mm-hgcta__info {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 1.25rem 2rem;
}

.mm-hgcta__eyebrow {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
}

.mm-hgcta__eyebrow-icon { font-size: 1rem; line-height: 1; }

.mm-hgcta__badge {
	display: inline-flex;
	align-items: center;
	padding: 0.125rem 0.75rem;
	border-radius: 999rem;
	color: var(--hgcta-accent-strong);
	background: var(--color-sky-100);
	font-size: 0.75rem;
	font-weight: 800;
	line-height: 1.5;
}

.mm-hgcta__headline {
	margin: 0.75rem 0 0.2rem;
	color: #111827;
	font-size: 1.125rem;
	font-weight: 800;
	line-height: 1.25;
}

.mm-hgcta__headline span {
	background: linear-gradient(90deg, var(--color-emerald-600), var(--color-sky-500));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.mm-hgcta__features {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.mm-hgcta-feature {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.25rem 0.75rem;
	border-radius: 999rem;
	background: #f9fafb;
}

.mm-hgcta-feature--sky { background: var(--color-sky-50); }
.mm-hgcta-feature--emerald { background: var(--color-emerald-50); }
.mm-hgcta-feature--neutral { background: #f3f4f6; }

.mm-hgcta-feature__icon {
	color: var(--hgcta-accent);
	font-size: 0.75rem;
	font-weight: 900;
	line-height: 1;
}

.mm-hgcta-feature--emerald .mm-hgcta-feature__icon { color: var(--color-emerald-500); }
.mm-hgcta-feature__text { color: #4b5563; font-size: 0.75rem; line-height: 1.4; }

.mm-hgcta__action {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.25rem 2rem;
	background: linear-gradient(135deg, var(--hgcta-second), var(--hgcta-accent), var(--hgcta-accent-strong));
	text-align: center;
}

.mm-hgcta__action-title {
	margin: 0;
	color: #ffffff;
	font-size: 1rem;
	font-weight: 800;
	line-height: 1.3;
}

.mm-hgcta__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.65rem 1.5rem;
	border-radius: 0.75rem;
	color: var(--hgcta-accent-strong);
	background: #ffffff;
	box-shadow: 0 0.5rem 1rem rgba(15, 23, 42, 0.16);
	font-size: 0.875rem;
	font-weight: 800;
	line-height: 1.2;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mm-hgcta__button:hover,
.mm-hgcta__button:focus-visible {
	color: var(--hgcta-accent-strong);
	box-shadow: 0 0.75rem 1.25rem rgba(15, 23, 42, 0.22);
	text-decoration: none;
	transform: translateY(-0.06rem) scale(1.025);
}

.mm-hgcta__button-icon { color: var(--hgcta-accent); font-size: 0.95rem; line-height: 1; }
.mm-hgcta__note { margin: 0; color: rgba(255,255,255,0.68); font-size: 0.75rem; line-height: 1.4; }

.mm-hgcta--animate .mm-hgcta__box { opacity: 0; transform: translateY(0.75rem); transition: opacity 0.45s ease, transform 0.45s ease; }
.mm-hgcta--animate.is-visible .mm-hgcta__box { opacity: 1; transform: translateY(0); }

@media (max-width: 767.98px) {
	.mm-hgcta--layout-split .mm-hgcta__box { display: flex; flex-direction: column; }
	.mm-hgcta__info, .mm-hgcta__action { padding: 1.25rem; }
	.mm-hgcta__button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.mm-hgcta__button,
	.mm-hgcta--animate .mm-hgcta__box { opacity: 1; transform: none; transition: none; }
}


/* v1.0.1: Freitext unter Headline */
.mm-hgcta__intro {
	margin: 0.35rem 0 0.75rem;
	color: #4b5563;
	font-size: 0.875rem;
	line-height: 1.6;
}

.mm-hgcta--design-dark .mm-hgcta__intro,
.mm-hgcta--dark .mm-hgcta__intro {
	color: rgba(255, 255, 255, 0.78);
}