/**
 * CTA Download Modul v1.0.0
 * Bootstrap-5-Ergänzungen ohne Tailwind.
 */

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

.mm-ctadl--bg-white { background: #ffffff; }
.mm-ctadl--bg-sky { background: linear-gradient(135deg, var(--color-sky-50), #ffffff 62%); }
.mm-ctadl--bg-emerald { background: linear-gradient(135deg, var(--color-emerald-50), #ffffff 62%); }
.mm-ctadl--bg-transparent { background: transparent; }

.mm-ctadl--space-compact { padding-block: 3rem; }
.mm-ctadl--space-default { padding-block: 4rem; }
.mm-ctadl--space-large { padding-block: 5rem; }

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

.mm-ctadl--design-sky {
	--ctadl-accent: var(--color-sky-500);
	--ctadl-accent-strong: var(--color-sky-700);
	--ctadl-accent-soft: var(--color-sky-100);
	--ctadl-second: var(--color-sky-600);
	--ctadl-second-strong: var(--color-sky-800);
	--ctadl-second-soft: var(--color-sky-50);
}

.mm-ctadl--design-emerald {
	--ctadl-accent: var(--color-emerald-500);
	--ctadl-accent-strong: var(--color-emerald-700);
	--ctadl-accent-soft: var(--color-emerald-100);
	--ctadl-second: var(--color-emerald-600);
	--ctadl-second-strong: var(--color-emerald-700);
	--ctadl-second-soft: var(--color-emerald-50);
}

.mm-ctadl--design-neutral {
	--ctadl-accent: #6b7280;
	--ctadl-accent-strong: #374151;
	--ctadl-accent-soft: #f3f4f6;
	--ctadl-second: #111827;
	--ctadl-second-strong: #030712;
	--ctadl-second-soft: #f9fafb;
}

.mm-ctadl__box {
	display: flex;
	align-items: center;
	gap: 2rem;
	padding: 2rem;
	border: 0.0625rem solid var(--color-emerald-100);
	border-radius: 1.5rem;
	background: linear-gradient(90deg, var(--color-emerald-50), #ffffff 48%, var(--color-sky-50));
	box-shadow: 0 1rem 2rem rgba(15, 23, 42, 0.08);
}

.mm-ctadl--design-sky .mm-ctadl__box { border-color: var(--color-sky-100); background: linear-gradient(90deg, var(--color-sky-50), #ffffff 55%, var(--color-sky-100)); }
.mm-ctadl--design-emerald .mm-ctadl__box { border-color: var(--color-emerald-100); background: linear-gradient(90deg, var(--color-emerald-50), #ffffff 55%, var(--color-emerald-100)); }
.mm-ctadl--design-neutral .mm-ctadl__box { border-color: #e5e7eb; background: linear-gradient(90deg, #f9fafb, #ffffff); }
.mm-ctadl--layout-stacked .mm-ctadl__box { align-items: center; flex-direction: column; text-align: center; }

.mm-ctadl__icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 6rem;
	height: 6rem;
	border-radius: 1rem;
	background: linear-gradient(135deg, var(--ctadl-accent-soft), var(--ctadl-second-soft));
	box-shadow: 0 0.75rem 1.5rem rgba(15, 23, 42, 0.12);
}

.mm-ctadl__icon-image { display: block; width: 3.5rem; max-height: 4.5rem; object-fit: contain; }
.mm-ctadl__icon-emoji { font-size: 3rem; line-height: 1; }
.mm-ctadl__content { flex: 1 1 auto; min-width: 0; }

.mm-ctadl__badge {
	display: inline-flex;
	align-items: center;
	margin-bottom: 0.75rem;
	padding: 0.25rem 0.75rem;
	border-radius: 999rem;
	color: var(--ctadl-accent-strong);
	background: var(--ctadl-accent-soft);
	font-size: 0.75rem;
	font-weight: 800;
	line-height: 1.4;
}

.mm-ctadl__title { margin: 0 0 0.5rem; color: #111827; font-size: clamp(1.5rem, 3vw, 1.875rem); font-weight: 800; line-height: 1.2; }
.mm-ctadl__text { max-width: 42rem; margin: 0; color: #4b5563; font-size: 1rem; line-height: 1.7; }
.mm-ctadl--layout-stacked .mm-ctadl__text { margin-inline: auto; }
.mm-ctadl__action { flex: 0 0 auto; text-align: center; }

.mm-ctadl__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 1rem 1.75rem;
	border-radius: 1rem;
	color: #ffffff !important;
	background: linear-gradient(90deg, var(--ctadl-accent), var(--ctadl-second));
	box-shadow: 0 0.75rem 1.5rem rgba(15, 23, 42, 0.14);
	font-weight: 800;
	line-height: 1.2;
	text-decoration: none;
	transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.mm-ctadl__button:hover,
.mm-ctadl__button:focus-visible {
	color: #ffffff;
	box-shadow: 0 1rem 1.75rem rgba(15, 23, 42, 0.18);
	filter: brightness(0.97);
	text-decoration: none;
	transform: translateY(-0.08rem) scale(1.025);
}

.mm-ctadl__button-icon { font-size: 1.25rem; line-height: 1; transition: transform 0.25s ease; }
.mm-ctadl__button:hover .mm-ctadl__button-icon,
.mm-ctadl__button:focus-visible .mm-ctadl__button-icon { transform: translateY(-0.08rem); }
.mm-ctadl__note { margin: 0.5rem 0 0; color: #9ca3af; font-size: 0.75rem; line-height: 1.4; }

.mm-ctadl--animate .mm-ctadl__box { opacity: 0; transform: translateY(1rem); transition: opacity 0.55s ease, transform 0.55s ease; }
.mm-ctadl--animate.is-visible .mm-ctadl__box { opacity: 1; transform: translateY(0); }

@media (max-width: 767.98px) {
	.mm-ctadl__box { align-items: center; flex-direction: column; text-align: center; }
	.mm-ctadl__button, .mm-ctadl__action { width: 100%; }
}

@media (max-width: 575.98px) {
	.mm-ctadl__box { padding: 1.5rem; }
	.mm-ctadl__icon { width: 5rem; height: 5rem; }
}

@media (prefers-reduced-motion: reduce) {
	.mm-ctadl__button,
	.mm-ctadl__button-icon,
	.mm-ctadl--animate .mm-ctadl__box { opacity: 1; transform: none; transition: none; }
}