progress.less

@ci-stepper-height: 40px;
@ci-stepper-arrow-width: 20px;
@ci-stepper-arrow-width-mobile: 10px;
@ci-stepper-padding: 20px;
@ci-stepper-mobile-active-width: 0.6;

@ci-staged-stepper-height: 58px;

.ci-make-nav-stepper(@columns) {
	margin: 0 0;
	padding: 0;
	overflow: hidden;
	.make-row(0);

	li {
		height: @ci-stepper-height;
		line-height: @ci-stepper-height;
		position: relative;
		background: @ci-lightgray;
		padding-left: @ci-stepper-padding * 1.2;
		padding-right: @ci-stepper-padding * 0.8;
		vertical-align: middle;
		text-align: center;
		margin: 0;
		position: relative;
		float: left;
		min-height: 1px;
		list-style: none;

		width: percentage(1 / @columns);
		text-indent: 0;
	}

	li.active {
		width: percentage(1 / @columns);
	}

	li:first-child {
		padding-left: 0;
	}

	li:last-child {
		padding-right: 0;
	}

	li,
	li a {
		.ci-typo-futura-medium;
		font-size: 18px;
		color: @text-color;
	}

	li.active,
	li.active a {
		color: @ci-orange;
	}

	li:after, li:before {
		left: 100%;
		top: 50%;
		margin-left: -(((@ci-stepper-height / 2) + @ci-stepper-arrow-width) / 2);
		border: solid transparent;
		content: " ";
		height: 0;
		width: 0;
		position: absolute;
		pointer-events: none;
		z-index: 10;
	}

	li:after {
		border-color: rgba(136, 183, 213, 0);
		border-left-color: @ci-lightgray;
		border-width: @ci-stepper-height / 2;
		margin-top: (@ci-stepper-height / 2) * -1;
	}
	li:before {
		border-color: rgba(194, 225, 245, 0);
		border-left-color: @ci-white;
		border-width: (@ci-stepper-height / 2) + @ci-stepper-arrow-width;
		margin-top: ((@ci-stepper-height / 2) + @ci-stepper-arrow-width) * -1;
	}

	li:last-child:after,
	li:last-child:before {
		border: none;
		width: 0;
		margin: 0;
		display: none;
		left: 0;
		top: 0;
	}

	@media (max-width: @screen-md-min) {

		li,
		li a {
			font-size: 16px;
		}
	}

	@media (max-width: @screen-sm-min) {
		// margin-right: -@ci-stepper-height;

		li {
			width: percentage((1 - @ci-stepper-mobile-active-width)  / (@columns - 1));
			text-indent: -9999px;
		}

		li.active {
			width: percentage(@ci-stepper-mobile-active-width);
			text-indent: 0;
		}

		li:first-child {
			// margin-left: -@ci-stepper-height;
		}

		li:last-child {
			padding-right: 0;
		}

		li,
		li a {
			font-size: 18px;
		}

		li:after {
			border-width: @ci-stepper-height / 2;
			margin-top: (@ci-stepper-height / 2) * -1;
		}
		li:before {
			border-width: (@ci-stepper-height / 2) + @ci-stepper-arrow-width-mobile;
			margin-top: ((@ci-stepper-height / 2) + @ci-stepper-arrow-width-mobile) * -1;
		}
	}

	@media (max-width: 350px) {
		li {
			width: percentage((1 - 0.5)  / (@columns - 1));
			text-indent: -9999px;
			padding-left: (@ci-stepper-padding / 2) * 1.2;
			padding-right: (@ci-stepper-padding / 2) * 0.8;
		}

		li.active {
			width: percentage(0.5);
			text-indent: 0;
		}

		li,
		li a {
			font-size: 14px;
		}
	}
}

.ci-nav-stepper-3 {
	.ci-make-nav-stepper(3);
}

.ci-nav-stepper-4 {
	.ci-make-nav-stepper(4);
}

//Stepper auf Seiten ohne Stages
.container > .ci-nav-stepper{
	position: relative;
	top: -40px;
}
//Stepper auf Seiten mit Bühne & 100% Höhe: Stepper überlagert Bühne!

.ci-staged-stepper{
	background-color: #ffffff;
	margin-top: @ci-header-height;
	height: @ci-staged-stepper-height !important;
	.stagedStepper{
		padding: 10px 0 8px 0;
		background-color: #ffffff;
		position: relative;
		top: 0;
	}
}
.ci-content .ci-staged-image.ci-staged-image-with-stepper{
	padding-top: @ci-header-height + @ci-staged-stepper-height;
}