/* =======================
   Versand Seite
======================= */

.versand-page-section {
	background-color: #FFFFFF;
	padding-top: 80px;
	padding-bottom: 80px;
}

.versand-page-intro,
.versand-page-block {
	margin-bottom: 80px;
}

.versand-page-block-last,
.versand-page-intro:last-child,
.versand-page-block:last-child {
	margin-bottom: 0px;
}

.versand-page-headline,
.versand-page-option-headline {
	margin: 0px 0px 28px 0px;
	padding: 0px;
	font-weight: bold;
	line-height: 1.25;
	color: #000000;
}

.versand-page-headline {
	font-size: 40px;
}

.versand-page-option-headline {
	font-size: 32px;
}

.versand-page-headline span,
.versand-page-option-headline span {
	color: #E3B344;
}

.versand-page-intro p,
.versand-step p,
.versand-page-note {
	font-size: 16px;
	line-height: 1.3;
	color: #000000;
}

.versand-page-intro p {
	margin: 0px 0px 28px 0px;
}

.versand-page-intro p:last-child {
	margin-bottom: 0px;
}

/* Links im Intro: schwarz + unterstrichen / Hover gold */
.versand-page-intro a,
.versand-step p a {
	color: #000000;
	text-decoration: underline;
	font-weight: bold;
	transition: color 0.2s ease;
}

.versand-page-intro a:hover,
.versand-page-intro a:focus,
.versand-step p a:hover,
.versand-step p a:focus {
	color: #E3B344;
	text-decoration: underline;
}

/* =======================
   Schritte Grid
======================= */

.versand-steps-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	column-gap: 34px;
	row-gap: 0px;
	align-items: start;
}

.versand-step {
	text-align: left;
}

.versand-step-icon {
	display: block;
	width: 200px;
	height: 200px;
	margin: 0px auto 26px auto;
	background-image: url("../images/versand-ablauf.png");
	background-repeat: no-repeat;
	background-size: 1130px auto;
	border-radius: 0%;
}

.versand-step-icon-1 {
	background-position: -15px 0px;
}

.versand-step-icon-2 {
	background-position: -248px 0px;
}

.versand-step-icon-3 {
	background-position: -480px 0px;
}

.versand-step-icon-4 {
	background-position: -712px 0px;
}

.versand-step-icon-5 {
	background-position: -944px 0px;
}

.versand-step h4 {
	margin: 0px 0px 18px 0px;
	padding: 0px;
	color: #E3B344;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.2;
	text-transform: uppercase;
}

.versand-step p {
	margin: 0px;
	padding: 0px;
	max-width: 100%;
}

.versand-page-note {
	margin: 44px 0px 0px 0px;
	padding: 0px;
	font-weight: bold;
}

/* =======================
   1024 - 1199px
======================= */

@media only screen and (min-width: 1024px) and (max-width: 1199px) {

	.versand-page-section {
		padding-top: 70px;
		padding-bottom: 70px;
	}

	.versand-page-intro,
	.versand-page-block {
		margin-bottom: 70px;
	}

	.versand-page-headline {
		font-size: 34px;
	}

	.versand-page-option-headline {
		font-size: 28px;
	}

	.versand-page-intro p,
	.versand-step p,
	.versand-page-note {
		font-size: 15px;
	}

	.versand-steps-grid {
		column-gap: 22px;
	}

	.versand-step-icon {
		width: 170px;
		height: 170px;
		margin-bottom: 22px;
		background-size: 964px auto;
	}

	.versand-step-icon-1 { background-position: -12px 0px; }
	.versand-step-icon-2 { background-position: -212px 0px; }
	.versand-step-icon-3 { background-position: -410px 0px; }
	.versand-step-icon-4 { background-position: -608px 0px; }
	.versand-step-icon-5 { background-position: -806px 0px; }

	.versand-step h4 {
		font-size: 20px;
		margin-bottom: 16px;
	}
}

/* =======================
   <= 1023px
======================= */

@media only screen and (max-width: 1023px) {

	.versand-page-section {
		padding-top: 60px;
		padding-bottom: 60px;
	}

	.versand-page-intro,
	.versand-page-block {
		margin-bottom: 60px;
	}

	.versand-page-headline {
		font-size: 34px;
		line-height: 1.3;
	}

	.versand-page-option-headline {
		font-size: 34px;
		line-height: 1.3;
		margin-bottom: 34px;
	}

	.versand-page-intro p,
	.versand-step p,
	.versand-page-note {
		font-size: 16px;
	}

	.versand-steps-grid {
		grid-template-columns: 1fr;
		row-gap: 42px;
	}

	.versand-step {
		display: block;
	}

	.versand-step-icon {
		width: 200px;
		height: 200px;
		margin: 0px 0px 24px 0px;
		background-size: 1130px auto;
	}

	.versand-step-icon-1 { background-position: -15px 0px; }
	.versand-step-icon-2 { background-position: -248px 0px; }
	.versand-step-icon-3 { background-position: -480px 0px; }
	.versand-step-icon-4 { background-position: -712px 0px; }
	.versand-step-icon-5 { background-position: -944px 0px; }

	.versand-step h4 {
		font-size: 28px;
		line-height: 1.2;
		margin-bottom: 18px;
	}

	.versand-page-note {
		margin-top: 40px;
	}
}

/* =======================
   <= 560px
======================= */

@media only screen and (max-width: 560px) {

	.versand-page-section {
		padding-top: 50px;
		padding-bottom: 50px;
	}

	.versand-page-intro,
	.versand-page-block {
		margin-bottom: 50px;
	}

	.versand-page-headline {
		font-size: 30px;
	}

	.versand-page-option-headline {
		font-size: 30px;
		margin-bottom: 30px;
	}

	.versand-page-intro p,
	.versand-step p,
	.versand-page-note {
		font-size: 15px;
	}

	.versand-page-headline,
	.versand-page-option-headline {
		margin-bottom: 22px;
	}

	.versand-page-intro p {
		margin-bottom: 24px;
	}

	.versand-steps-grid {
		row-gap: 34px;
	}

	.versand-step-icon {
		width: 200px;
		height: 200px;
		margin-bottom: 20px;
		background-size: 1130px auto;
	}

	.versand-step-icon-1 { background-position: -15px 0px; }
	.versand-step-icon-2 { background-position: -248px 0px; }
	.versand-step-icon-3 { background-position: -480px 0px; }
	.versand-step-icon-4 { background-position: -712px 0px; }
	.versand-step-icon-5 { background-position: -944px 0px; }

	.versand-step h4 {
		font-size: 24px;
		margin-bottom: 14px;
	}

	.versand-page-note {
		margin-top: 34px;
	}
}