/* Buttons
-----------*/

	.configurator,
	.configurator * {
		box-sizing: border-box;
	}

	.select-buttons {
		display: block;
	}

	.step {
		margin-bottom: 30px;
	}

	.step:after {
		content: "";
		display: table;
		clear: both;
	}

	.step a {
		display: block;
		float: left;
		width: calc(25% - 10px);
		border: 2px solid #DDDDDD;
		border-radius: 5px;
		list-style-type: none !important;
		margin-right: 10px;
		margin-bottom: 10px;
	}

	.step input {
		display: none;
	}

	@media screen and (max-width: 1024px) {
		.step a {
			width: calc(50% - 10px);
		}
	}

	@media screen and (max-width: 600px) {
		.step a {
			width: 100% !important;
		}
	}

	.step a .title {
		display: block;
		padding: 0 10px 20px 10px;
		text-align: center;
		height: 40px;
		color: #333333;
		text-underline: none;
		min-height: 50px;
	}

		@media screen and (max-width: 450px) {
			.step a .title {
				height: auto;
			}
		}

	.step a img {
		display: block;
		margin: 20px auto;
		max-width: 100%;
		height: 150px;
	}

	.select-btn:hover {
		opacity: 0.8;
	}

	.step a.active {
		outline: 4px solid #005BA0;
	}

	.step-content-before,
	.step-content-after {
		clear: both;
	}

/* Textcontainer
	-----------------*/

	.step a.text_content {
		position: relative;
		height: 100px;
		padding: 0;
	}

	.step a.text_content:hover {
		background-color: #f7f7f7;
	}

	.step a.text_content img {
		display: none;
	}

	.step a.text_content .title {
		display: block;
		margin: 0;
		padding: 0;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 80%;
		min-height: unset;
		height: unset;
	}

/* Produktfinder
-----------------*/

	.configurator {
		position: relative;
	}

	.configurator.is-loading:after {
		content: "";
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-repeat: no-repeat;
		background-position: center center;
		background-color: rgba(255,255,255,0.5);
	}

/* Header-Optimierungen
------------------------*/

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

		header#sp-header-wrapper {
			position: relative;
			z-index: 99999 !important;
		}

		#header {
			background-image: none !important;
		}

		#sp-logo {
			margin-top: 0 !important;
		}

		#sp-logo img {
			height: 50px;
			width: auto;
			margin: 10px;
		}

		#header .sp-main-menu-toggler {
			top: -7px !important;
			right: 10px !important;
		}

		#sp-top1 {
			position: absolute;
			right: 60px !important;
			top: 7px !important;
		}

		.sp-mobile-menu {
			margin-top: 0 !important;
			top: 75px !important;
		}
	}

/* Formular
------------*/

	.configurator form * {
		box-sizing: border-box;
	}

	.configurator form {
		border-radius: 3px;
		padding: 15px;
	}

	.configurator form h3 {
		font-size: 20px;
	}

	.configurator form label {
		font-size: 16px;
	}

	.configurator form input[type="text"],
	.configurator form select,
	.configurator form textarea,
	.configurator form input[type="submit"] {
		display: block;
		width: 100%;
		padding: 7px 10px;
		height: unset;
	}

	.configurator form input[type="submit"] {
		padding: 10px 10px;
	}
	.configurator form input[type="submit"]:hover {
		opacity: 0.8;
	}

/* Grid
--------*/

	.gridcontainer {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
		grid-gap: 10px;
		margin-top: 20px;
	}

		@media screen and (max-width: 1024px) {
			.gridcontainer {
				grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
			}
		}

		@media screen and (max-width: 480px) {
			.gridcontainer {
				grid-template-columns: 100%;
			}
		}

	.gridcontainer > * {
		border: 2px solid #DDDDDD;
  		border-radius: 5px;
	}

	.gridcontainer img {
		display: block;
		margin: 20px auto;
		max-width: 100%;
		height: 150px;
	}

	.gridcontainer h3 {
		display: block;
		text-transform: none;
		font-size: 18px;
		padding: 0 10px 20px 10px;
		text-align: center;
		height: 40px;
		color: #333333;
		text-underline: none;
		min-height: 50px;
		margin: 0 !important;
	}

	/* Selectfelder
	----------------*/

		.gridcontainer select {
			margin: 0 20px 20px 20px;
			width: calc(100% - 40px) !important;
			text-align: center;
			font-weight: 600;
		}

		.gridcontainer select option {
			font-weight: 600;
		}


/* Farben
----------*/

	.tonne-grau {
		background-color: #fafafa;
		color: #FFFFFF;
	}

		.bgr-grau {
			background-color: #626469 !important;
		}

		.tonne-grau h3 {
			color: #626469 !important;
		}

	.tonne-gruen {
		background-color: #f5faf3;
		color: #FFFFFF;
	}

		.bgr-gruen {
			background-color: #62a647 !important;
		}

		.tonne-gruen h3 {
			color: #62a647 !important;
		}

	.tonne-blau {
		background-color: #fbfcfd;
		color: #FFFFFF;
	}

		.bgr-blau {
			background-color: #3f78ba !important;
		}

		.tonne-blau h3,
		.titel-blau {
			color: #3f78ba !important;
		}

	.tonne-gelb {
		background-color: #fefcf6;
	}

		.bgr-gelb {
			background-color: #e8c837 !important;
		}

		.tonne-gelb h3,
		.titel-gelb {
			color: #e8c837 !important;
		}

/* Disabled-Status
-------------------*/

	#priceinfo .is-disabled {
		border-color: #F8F8F8;
	}

/* Felxheader raus!
--------------------*/

	.itemid-310 #flexheaderdebugwindow {
		display: none !important;
	}

/* Preistitel
---------------*/

	.price-title {
		display: block;
		font-size: 25px;
		margin-bottom: 20px;
	}

/* Preiszeile
--------------*/

	.price-row {
		display: grid;
		grid-template-columns: 20px minmax(0, 1fr) 75px 80px 100px 120px;
		grid-gap: 20px;
		border-bottom: 2px dotted #AAAAAA;
		padding: 10px 0;

	}
	.price-row--header {
		font-weight: bold;
	}

		@media screen and (max-width: 768px) {
			.price-row--header {
				display: none !important;
			}
		}

	.price-row:last-of-type {
		border-bottom: none;
	}

	.price-row > div:last-of-type {
		text-align: right;
		font-weight: 600;
	}

	.price-marker {
		display: inline-block;
		float: left;
		height: 24px;
		width: 24px;
		border-radius: 5px;
		background-color: #DDDDDD;
		position: relative;
		top: 2px;
	}

	.price-row select,
	.price-row select option {
		text-align: center;
		width: 100%;
	}

	.mobile--label {
		display: none;
	}

	/* Responsive
	--------------*/

		@media screen and (max-width: 768px) {
			.price-row {
				grid-template-columns: 100%;
				grid-gap: 5px;
			}

			.price-row,
			.price-row * {
				text-align: left !important;
			}

			.mobile--label {
				display: inline;
			}
		}

/* Gesamtpreisanzeige
----------------------*/

	.configurator--total {
		display: grid;
		grid-template-columns: auto auto;
		grid-gap: 20px;
		background-color: #f2f2f2;
		margin-top:20px;
		float:right;
	}



	.configurator--totalprice {
		font-size: 25px;
		font-weight: 600;
		color: #000000;
	}

	.configurator--total > * {
		text-align: right;
		padding: 20px 20px 20px 30px;
	}

	.configurator--total > *:last-of-type {
		border-left: 1px dashed #AAAAAA;
	}

		@media screen and (max-width: 768px) {
			.configurator--total {
				width: 100%;
				grid-template-columns: 100%;
			}

			.configurator--total > * {
				border: none !important;
				border-bottom: 10px solid #FFFFFF !important;
			}
		}

	.configurator--total small {
		display:block;
		font-size: 13px;
	}

/* Endbetrag
-------------*/

	.configurator--endbetrag {
		display: block;
		text-align: right;
		font-size: 25px;
		font-weight: 600;
		color: #596469;
		padding-top: 15px;
	}

	.configurator--endbetrag > div {
		font-size: 18px;
		font-weight: 400;
	}