/* =========================
   CONTENT CTA
   ========================= */

.content-cta-wrapper {
	margin-top: 1.25rem;
}


.content-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	gap: 0.5rem;

	padding:
		0.7rem
		1.2rem;

	background-color:
		var(--logo-color-1);

	color:
		var(--font-color-light);

	border:
		2px solid transparent;

	border-radius:
		var(--button-border-radius);

	box-shadow:
		0 4px 20px
		rgba(
			var(--shadow-color-rgb),
			0.10
		);

	text-decoration: none;

	transition:
		background-color 0.22s ease,
		color 0.22s ease,
		border-color 0.22s ease;
}


.content-cta:hover,
.content-cta:focus-visible {
	background-color:
		var(--logo-color-1-dark);

	color:
		var(--font-color-light);

	text-decoration: none;
}


/* =========================
   TRANSPARENT / WEISSER RAHMEN
   ========================= */

.content-cta--outline-white {
	background-color:
		transparent;

	color:
		#ffffff;

	border-color:
		#ffffff;
}


.content-cta--outline-white:hover,
.content-cta--outline-white:focus-visible {
	background-color:
		#ffffff;

	color:
		var(--logo-color-1-dark);

	border-color:
		#ffffff;
}


/* =========================
   TEXT
   ========================= */

.content-cta__text {
	color: inherit;
}


/* =========================
   ICON
   ========================= */

.content-cta__icon {
	display: block;

	width: 1em;
	height: 1em;

	flex: 0 0 auto;

	color: inherit;
}


/* =========================
   TASTATUR-FOKUS
   ========================= */

.content-cta:focus-visible {
	outline:
		3px solid
		var(--logo-color-1-light);

	outline-offset: 3px;
}