/* ── Button List ──────────────────────────────────────────────────────────── */

.button-list {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(var(--btn-cols, 3), 1fr);
	justify-items: center;
}

.button-list.overlap .special-button {
	max-width: none;
}

.button-list.overlap {
	position: relative;
	z-index: 2;
	width: min(
		calc(var(--wp--style--global--wide-size) - var(--wp--custom--site-padding)),
		calc(100vw - 3 * var(--wp--custom--site-padding))
	);
}

.button-list-large .special-button .special-button__icon {
	font-size: 2em;
}

/* ── Special Button ───────────────────────────────────────────────────────── */

@keyframes myAnimation {
	0% {
		transform: translateY(0);
		opacity: 1;
	}
	50% {
		transform: translateY(-50%);
		opacity: 0;
	}
	51% {
		transform: translateY(50%);
		opacity: 0;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

.special-button {
	display: flex;
	align-items: stretch;
	position: relative;
	background-color: #fff;
	border-radius: 8px;
	overflow: hidden;
	box-shadow:
		3px 1px 7px 0px #00345c1a,
		12px 5px 13px 0px #00345c17,
		47px 20px 20px 0px #00345c03,
		73px 32px 22px 0px #00345c00;
	width: 100%;
	max-width: 400px;
	cursor: pointer;
}

.special-button::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 1em;
	height: 100%;
	z-index: 1;
	background-color: var(--wp--preset--color--blue-600);
	transition: all 0.4s ease-out;
}

.special-button .special-button__icon {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	z-index: 2;
	font-size: 1em;
	padding: 16px;
	color: var(--wp--preset--color--blue-900);
	transition: color 0.4s ease-out;
}

.special-button .special-button__text {
	position: relative;
	z-index: 2;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	line-height: 1.2;
	will-change: transform;
	padding: 8px 0;
}

.special-button .special-button__text span {
	display: block;
}

.special-button .special-button__text .special-button__titel {
	font-weight: 500;
	color: var(--wp--preset--color--blue-900);
	transition: all 0.4s ease-out;
}

.special-button .special-button__text .special-button__untertitel {
	color: var(--wp--preset--color--anthracite-600);
	transition: all 0.4s ease-out;
}

.special-button .special-button__link-icon {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	z-index: 2;
	background-color: var(--wp--preset--color--blue-600);
	color: #fff;
	padding: 8px;
	height: 100%;
}

.special-button .special-button__cover-link {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 3;
}

.special-button:hover::before {
	width: 120%;
}

.special-button:hover .special-button__icon,
.special-button:hover .special-button__text .special-button__titel,
.special-button:hover .special-button__text .special-button__untertitel {
	color: #fff;
}

.special-button:hover .special-button__text {
	animation-name: myAnimation;
	animation-duration: 0.4s;
	animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
	animation-direction: normal;
	animation-fill-mode: forwards;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
	.button-list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.button-list {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 781px) {
	.special-button .special-button__icon {
		padding: 8px;
	}
}