$o-workflow-bp-medium:  full-nav;
$o-workflow-bp-large:   1060;

.o-workflow {
	overflow: hidden;

	@include mq($o-workflow-bp-large) {
		margin-top: space(-10);
	}

	&::before {
		content: '';
		display: block;
		width: 100%;
		height: space(10);
		background-color: palette(neutral, 0);
		border-bottom-right-radius: map_get($border-radius, xl);
		box-shadow: 20px 20px 20px -20px rgba(0,0,0,0.24);
		pointer-events: none;

		@include mq($o-workflow-bp-large) {
			height: space(25);
			border-bottom-right-radius: map_get($border-radius, xxl);
		}
	}
}


.o-workflow__main {
	@include mq($o-workflow-bp-medium) {
		display: flex;
	}
}



.o-workflow__bullets {
	position: relative;

	&::before {
		content: '';
		position: absolute;
		z-index: -1;
		top: space(-10);
		bottom: 0;
		right: 0;
		left: 0;
		background-image:
			url('/img/patronen_workflow.png'),
			linear-gradient(to bottom right, palette(secondary, 400), palette(secondary, 500));
		background-repeat: no-repeat;
		background-size: cover;
		background-blend-mode: multiply;
		background-position: bottom right;
		pointer-events: none;

		@include mq($o-workflow-bp-medium) {
			top: 0;
		}
	}

	@include mq($o-workflow-bp-medium) {
		padding-left: column(1,14);
		padding-right: column(1,14);
		width: column(6,14);
	}
	@include mq($o-workflow-bp-large) {
		width: column(5,14);
	}
	@include mq($bp-max) {
		padding-left: $site-max-gutter-width;
		padding-right: $site-column-size * 1px;
		width:  calc(#{$site-max-gutter-width} + (#{$site-column-size}px * 4));
	}
}


.o-workflow__body {
	position: relative;
	flex: 1 1 88px; // make it grow to the available space
	padding: space(5) 0;
	color: palette(neutral, 0);

	@include mq($o-workflow-bp-medium) {
		padding-top: space(10);
		padding-bottom: space(10);
		padding-right: column(1,14);
		padding-left: column(1,14);
	}
	@include mq($bp-max) {
		padding-right: $site-max-gutter-width;
		padding-left: $site-column-size * 1px;
	}

	&::before {
		content: '';
		position: absolute;
		z-index: -1;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		background-image: linear-gradient(to bottom, palette(primary, 500) space(5), palette(primary, 600) calc(100% - #{space(5)}));
		pointer-events: none;

		@include mq($o-workflow-bp-medium) {
			top: space(-10);
			box-shadow: -20px 0px 20px -20px rgba(0, 0, 0, 0.24);
		}
		@include mq($o-workflow-bp-large) {
			top: space(-25);
		}
	}
}


.o-workflow__list {
	@include contain($max: $o-workflow-bp-medium);
	position: relative;
	padding: space(5) 0;
	list-style: none;
	color: palette(neutral, 0);

	@include mq($o-workflow-bp-medium) {
		padding-top: space(10);
		padding-bottom: space(10);
	}
}


.o-workflow__item {
	&:nth-last-child(n+2) {
		margin-bottom: space(1);
	}
}

.o-workflow__link {
	display: flex;
	text-decoration: none;
}


.o-workflow__number {
	margin-right: space(1.5);
}


.o-workflow__label {
	margin-top: space(2);
	@include font-weight(extraBold);
	color: white;
}


.o-workflow__content {
	@include contain($max: $o-workflow-bp-medium);

	h2 {
		margin-bottom: space(5);
	}
}

.o-workflow__action {
	margin-top: space(5);
}