@media screen, projection {
/**
*  Buttons in einheitlichem Stil
*
*  Lotsen- und Call-To-Action-Links im Button Stil und eigenen Farben
*
*  @markup:
*
*  @shortcode:
[c-button style="" target="" title="" text="" icon=""]
*
*
**/


	.c-button {
		transition: background 0.6s ease-out;
		border-radius: var(--border-radius);
		width: 100%;
		max-width: var(--measure);

		:focus {
			outline: 3px solid var(--cta-primary-focus-ring);
			outline-offset: 2px;
		}

	}

	.c-button__link {
		display: flex;
		flex-direction: row;
		-webkit-column-gap: var(--space-s);
		-moz-column-gap: var(--space-s);
		column-gap: var(--space-s);
		align-items: center;
		font-family: var(--sans);
		text-decoration: none;
		transition: all 0.6s ease-out;

		& span:first-child {
			display: flex;
			justify-content: center;
			align-items: center;
			padding-right: var(--space-xxs);
			padding-left: var(--space-m);
			flex-grow: 0;
			border-right-width: 2px;
			border-right-color: var(--light);
			border-right-style: solid;
		}

		& span:last-child {
			margin-top: 0;
			flex-grow: 999;
			align-self: center;
			line-height: var(--lh--2);
			padding: 0 var(--space-s) 0 0;
			max-height: 4em;
		}

		& svg {
			width: var(--fs-4);
			height: var(--fs-4);
		}

		&:hover {
			color: var(--cool-1);
			text-decoration: none;
		}
	}

	.c-button--primary {
		margin-top: var(--space-xs);
		margin-bottom: var(--space-xs);
		border: 2px solid var(--btn-primary-border);
		background: var(--btn-primary-bg);
		color: var(--btn-primary-text);

		&:hover {
			background: var(--btn-primary-hover-bg);

			.c-button__link {
				color: var(--btn-primary-hover-text);
			}
		}
		&:focus {
			border-color: var(--btn-primary-focus-ring);
		}
		&:disabled {
			background-color: var(--btn-primary-disabled-bg);
			color: var(--btn-primary-disabled-text);
		}

		.c-button__link {
			color: var(--btn-primary-text);
			font-weight: 700;

			& span:first-child {
				min-height: 4em;
				border-right-color: var(--btn-primary-border);
			}

			& span:last-child {
				max-height: 4em;
			}

			& svg {
				width: var(--fs-4);
				height: var(--fs-4);
			}
		}
	}

	.c-button--secondary {
		margin-top: var(--space-2xs);
		border: 2px solid var(--btn-secondary-border);
		background: var(--btn-secondary-bg);

		&:hover {
			background: var(--btn-secondary-hover-bg);
		}

		.c-button__link {
			-webkit-column-gap: var(--space-xs);
			-moz-column-gap: var(--space-xs);
			column-gap: var(--space-xs);
			font-weight: 500;
			color: var(--btn-secondary-text);

			& span:first-child {
				padding-right: var(--space-3xs);
				padding-left: var(--space-s);
				min-height: 3em;
				border-right-color: var(--btn-secondary-border);
			}

			& span:last-child {
				padding: 0 var(--space-xs) 0 0;
				line-height: var(--lh--1);
				max-height: 3em;
			}

			& svg {
				width: var(--fs-3);
				height: var(--fs-3);
			}

			&:hover {
				color: var(--cool-2);
			}
		}
	}

	.c-button--lotse {
		border-radius: var(--border-radius);
		color: var(--cool-1);
		background-color: var(--warm);
		border-color: var(--warm);

		&:hover {
			background-color: var(--warm2);
			border-color: var(--warm2);
		}

		.c-button__link {
			color: var(--cool-1);
		}
	}

	.c-button--cta {
		border-radius: var(--border-radius);
		background-color: var(--fresh);
		border-color: var(--fresh);

		&:hover {
			background-color: var(--fresh2);
			border-color: var(--fresh2);
		}

		.c-button__link {
			color: var(--cool);
		}
	}
}