/* Modul: Button */

.cype-buttonwrap {
	margin: 0;
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.cype-buttonwrap.cype-align-center {
	justify-content: center;
}

.cype-buttonwrap.cype-align-right {
	justify-content: flex-end;
}

/*
 * Symbol im Button — Pfeil oder eigenes Bild. Größe und Abstand kommen als
 * Inline-Variablen vom Modul; ohne Symbol bleibt das Markup unverändert.
 */
.cype-button--icon-before,
.cype-button--icon-after {
	display: inline-flex;
	align-items: center;
	gap: var(--cype-button-icon-gap, 10px);
}

.cype-button__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	line-height: 1;
}

.cype-button__icon-image {
	display: block;
	width: var(--cype-button-icon-size, 20px);
	height: auto;
}

.cype-button--size-s {
	font-size: 0.9em;
	padding: 0.5em 1.2em;
}

.cype-button--size-l {
	font-size: 1.1em;
	padding: 0.9em 2em;
}

@media (max-width: 600px) {
	.cype-button--fullmobile {
		width: 100%;
	}
}