/* -------------------------------------------------- */
/* CTA banner                                           */
/* -------------------------------------------------- */

/* Despite the filename, this is the shared .cta-banner component: the
   Angebote page, the CTA-Band block's "karte" variant, and the closing CTA on
   the blog index, single posts, single Leistung and single Referenz all use
   it. One component, one file, so it can't drift into several. */

.section--cta-banner {
	max-width: var(--max-width);
	margin: 0 auto;
}

.cta-banner {
	--radius-child: var(--radius-nested);

	background: linear-gradient(var(--gradient-angle), var(--color-gradient-start), var(--color-gradient-end));
	border-radius: var(--radius);
	padding: 5rem 2.5rem;
	text-align: center;
}

.cta-banner h2,
.cta-banner p {
	color: #fff;
}

.cta-banner p {
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
	opacity: 0.92;
}

.cta-banner__actions {
	display: flex;
	gap: 1.25rem;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 2rem;
}

/* Every button in here reads the same way — white text, white border, no
   fill — regardless of which .btn modifier (or none) the call site passes,
   and regardless of whether it happens to link to Kontakt (.btn's
   data-kontakt-modal gradient, 02-buttons.css). Two classes beats any single
   modifier class on specificity alone, so this wins without !important and
   without every letsdoo_button() call needing to agree on the right variant. */
.cta-banner .btn {
	background: transparent;
	color: #fff;
	border: 2px solid rgba(255, 255, 255, 0.7);
	box-shadow: none;
}

.cta-banner .btn:hover {
	background: rgba(255, 255, 255, 0.15);
	box-shadow: none;
}