#dragElements {
		list-style: none;
	}

	#sortElements li, #dragElements li {
		float: left;
		list-style: none;
		white-space: nowrap;
		list-style: none;
	}


	#dragElements .nav-link.active {
		background-color: var(--primary-color) !important;
		color: #fff !important;
	}

	#dragElements .nav-tabs {
		border: none !important;
	}

	#planerInfoGesamtContainer {
		position: relative;
		font-size: 11pt;
	}

	#planerInfoGesamt {
		transition: background-color 0.5s ease;
	}
	#planerInfoGesamt h2 {
		display: none;
	}

	#planerInfoGesamt.float {
		background-color: #334;
		color: #fff;
		left: 18px;
		right: 13px;
		position: fixed;
		top: 0;
		z-index: 12;
	}

	.anschlussContainerRight, .anschlussContainerLeft {
		z-index: 3;
	}
	
	#planerInfoGesamt.float a.textlinkNew {
		color: #fff !important;
	}

	#planerInfoGesamt.float h2 {
		display: block;
		color: #fff;
		margin: 0;
		padding: 0;
		line-height: 120%;
	}

	#lieferzeit {
		color: #000;
	}

	#planerInfoGesamt.float #lieferzeit {
		color: #fff;
	}

	.elementDrag {
		padding: 5px;
		/*border-bottom: 1px solid #888;*/
		cursor: pointer;
		min-width: 100px;
		flex-grow: 0 !important;
	}

	.elementDrag .element {
		position: relative;
		text-align: center;
	}

	.element {
		cursor: pointer;
		transition: background .2s ease-out;
	}

	.elementDrag img {
		height: 120px;
	}

	.elementType {
		width: 100%;
		position: absolute;
		bottom: 80px;
		text-align: center;
		background: url(/images/layer_weiss_75.png);
		font-size: 10pt;
		font-weight: bold;
		color: #333;
		z-index: 11;
	}

	.elementTypeTab {
		margin-top: 10px;
		margin-right: 3px;
		padding: 5px 10px;
		cursor: pointer;
		float: left;
		border-top-left-radius: 3px;
		border-top-right-radius: 3px;
		border: 1px solid #ddd;
		border-bottom: none;
		background: #eee;
	}

	.elementTypeTabSelected {
		/*background: #ff6b00;*/
		background-color: var(--primary-color);
		color: #fff;
	}

	.typeScroll {
		overflow-x: scroll;
		width: 100%;
		border-top: 4px solid var(--primary-color);
		padding: 5px 0;
	}

	.elementInfoContainer {
		position: absolute;
		width: 200px;
		left: -90px;
		top: 90px;

		transition: opacity .3s ease-out;
		opacity: 0; 
		height: 0;
		overflow: hidden;
	}

	.showElementInfo {
	    opacity: 1;
		height: auto;
		z-index: 20;
	}

	#variantenInfo {
		margin-top: .5em;
	}

	#dragElements {
		/*
		background: url(/images/konfigurator/moveUp.png) top center no-repeat;
		padding-top: 24px;
		*/
		margin: 0;
		width: 100%;
	}

	#sortElements {
		margin-top: -15px;
	}

	#dropArea {
		/*background: #eee url(/images/konfigurator/background.jpg);*/
		height: 402px;
		width: 20000px;
		padding-left: 45px;
	}
	.dropContainer {
		width: 20px;
		height: 400px;
		background: #fea url(/images/konfigurator/dropMarker.gif);
		float: left;
	}
	.dropHover {
		background: #b5ffa7 url(/images/konfigurator/dropMarkerHover.gif);
	}

	.pfosten {
		margin: 0 1px;
		width: 18px;
		/*
		position: absolute;
		bottom: 0;
		left: 0;
		*/
		z-index: 6;
	}

	.pfostenContainer {
		position: relative;
		height: 400px;
		width: auto;
		float: left;
		z-index: 6;
	}

	.killElement {
		position: absolute;
		left: 20px;
		right: 0;
		top: 0;
		height: 27px;
		background: url(/images/icons/shimmer/delete_24.png) center 3px no-repeat;
		cursor: pointer;
		z-index: 8;
		/* border-left: 1px solid #aaa; */
		/* border-right: 1px solid #aaa; */
	}

	.killElement, .elementInfo i {
		text-shadow: 0px 0px 2px #000;
	}

	.scrollButton {
		width: 20px;
		height: 420px;
/*		background: #67ce02; */
		cursor: pointer;
		position: absolute;
		z-index: 10;
	}

	.scrollLeft {
		left: 0;

		background-image: url(/images/konfigurator/prev.png);
		background-position: center center;
		background-repeat: no-repeat;

		-moz-border-radius-topleft: 8px;
		-webkit-border-top-left-radius: 8px;
		border-top-left-radius: 8px;

		-moz-border-radius-bottomleft: 8px;
		-webkit-border-bottom-left-radius: 8px;
		border-bottom-left-radius: 8px;
	}
	.scrollRight {
		right: 0;

		background-image: url(/images/konfigurator/next.png);
		background-position: center center;
		background-repeat: no-repeat;

		-moz-border-radius-topright: 8px;
		-webkit-border-top-right-radius: 8px;
		border-top-right-radius: 8px;

		-moz-border-radius-bottomright: 8px;
		-webkit-border-bottom-right-radius: 8px;
		border-bottom-right-radius: 8px;
	}

	.zeileSelect {
		overflow-x: auto;
		overflow-y: hidden;
		padding-left: 1em;
		margin-left: 120px;
	}

	#scrollContainer {
		/*width: 1177px;*/
		/*height: 510px;*/
		height: 545px; /* 425px, wenn ein-/ausblenden aktiviert */
		overflow: hidden;
		position: relative;
		margin-left: 0px;
		margin-right: 0px;
		border: 1px solid #06a;
		margin-top: 0px;
		/*background: #614a2c url(/images/konfigurator/erde.png);*/
		background: url(/images/zaunplaner/background.jpg);
	}

	.mobileSelectContainer {
		display: grid;
		grid-auto-flow: column;
		grid-template-rows: repeat(2, 1fr);
		grid-auto-columns: calc(50% - 4px);
		overflow-x: scroll;
		gap: .5rem;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		border: none;
	}

	.mobileSelectContainer::-webkit-scrollbar {
		height: 12px; / statt z.B. 6px höher machen */
	}

	/* Die „Daumenschiene“ (Track) */
	.mobileSelectContainer::-webkit-scrollbar-track {
		background: #f2f2f2;
	}

	/* Der „Daumen“ (Thumb) */
    .mobileSelectContainer::-webkit-scrollbar-thumb {
    background-color: #666;
    border-radius: 6px; / abgerundete Ecken /
    border: 2px solid #f2f2f2; / damit ein kleiner „Rand“ entsteht */
	}

	.mobileSelectContainer .imageDrag {
		pointer-events: none;
	}

	.mobileSelectContainer li {
		scroll-snap-align: start;
		margin: 0 !important;
	}

	.button.warenkorb {
		width: auto;
		text-align: center;
	}

	#massketteContainer {
		position: relative;
	}

	@media only screen and (min-width: 800px) {
		#zaunplanungContainer {
			padding-top: 0 !important;
		}
	}

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

		#massketteContainer {
			display: none;
		}

		#scrollContainer {
			max-height: 360px;
			zoom: 50%;
		}
		#dropArea {
			margin-top: -40px;
		}

		#errormsg {
			position: fixed; /* Immer auf dem Viewport fixieren */
			bottom: 20%;
			left: 50%;
			/*transform: translate(-50%, -10%);*/
			/*max-width: 80%;*/
			background: rgba(255,155,155,.8);
			-webkit-backdrop-filter: blur(10px);
			backdrop-filter: blur(10px);

			z-index: 12;
			text-align: center;
			padding: 2rem;
			padding-top: calc(245px + 4rem);
			box-shadow: 0 2px 10px rgba(0,0,0,0.2);
			left: 1rem;
			right: 1rem;
			top: 1rem;
			bottom: 0;
			line-height: 2rem;
		}

		#previewContainer {
			max-width: 100%;
			/*zoom: 150%;*/
			overflow-x: scroll !important;
			display: flex;
			height: auto !important;
			background: aliceblue !important;
			justify-content: start;
			border: 1px solid rgba(0,0,0,.1) !important;
			border-radius: .25rem !important;
		}

		.sticky, .fixed {
			margin: 0 -1em;
			padding: .5em;
			background: #fff !important;
			position: sticky !important;
			top: 0 !important;
			z-index: 13;
			box-shadow: 0 10px 10px rgba(0,0,0,.3);
			border-radius: .25rem 3.66667px !important;
		}

		.fixed {
			position: fixed !important;
			left: 0 !important;
			margin: 0 !important;
			width: 100% !important;
		}

		.konfiguratorElementZeile {
			border: none !important;
		}

		#previewMarker {
			display: none;
		}

		.element .imageDrag {
			max-width: 100%;
			max-height: 120px;
		}

		.elementId {
		}
		#headline,
		.scrollButton,
		.widthContainer,
		.pfosten img,
		.killElement,
		#scrollContainer
		{
			display: none;
		}

		.navbar.topNav {
			display: none;
		}

		#searchFormContainer {
			margin-bottom: 0;
			padding-bottom: 0;
		}

		.zeileSelect {
			margin: 0;
		}

		.pfostengruppenSelectContainer {
			width: 100% !important;
		}

		.pfostengruppenSelectContainer, .befestigungSelectContainer, .optionsValueSelectContainer, .pfostengruppenSelectContainer {
			min-width: inherit !important;
			width: 50% !important;
			max-width: inherit;
		}

		.stepContainer .card-group {
			flex-direction: row;
			flex-wrap: wrap;
		}

		#buttonStckListe a.btn {
			display: block !important;
			width: 100%;
		}

		#step2Container {
			margin-top: 3rem;
		}

		#konfiguratorOptionenContainer h2 {
			display: none;
		}

		#btnRemoveLastTop {
			background-color: #be3d49;
			color: #fff;
		}

		.swipeIconContainer {
			position: relative;
			width: 100%;
			height: 0;
			text-align: center;
			z-index: 2;
			opacity: 1;
			transition: visibility 1s, opacity 0.5s linear;
		}

		.swipeIconContainer img {
			margin-top: 3rem;
		}

		.swipe-icon {
			display: inline-block;
			animation: swipe-hint 1.5s ease-in-out infinite;
		}

		@keyframes swipe-hint {
			0% {
				transform: translateX(0) rotate(0deg);
			}
			25% {
				transform: translateX(-10px) rotate(-5deg);
			}
			50% {
				transform: translateX(0) rotate(0deg);
			}
			75% {
				transform: translateX(10px) rotate(5deg);
			}
			100% {
				transform: translateX(0) rotate(0deg);
			}
		}

		#lieferzeit {
			font-weight: normal !important;
		}

		.card-header .collapseControl, .collapseControl:focus {
			background: rgba(0,0,0,.05);
			border: 1px dashed rgba(0,0,0,.1);
			text-decoration: none;
		}
		.card-header .collapseControl.collapsed {
			background: none;
			border: none;
		}
		.collapseControl::before {
			font-family: 'FontAwesome';
			content: "\f147";
		}

		.collapseControl.collapsed::before {
			content: "\f196";
		}

		.tab-content>.tab-pane {
			display: block !important;
			opacity: 1 !important;
		}

		#konfZeilenTabs {
			display: none;
		}

		#konfZeilenTabsContent {
			margin-top: 1rem;
		}

		.pfostenOption {
			padding-bottom: 0 !important;
		}

		.buyButtonContainer .button, .buyButtonContainer .btn {
			display: block;
		}

		.button.warenkorb {
			width: 100%;
			margin-top: .8rem;
		}

		.planerB2BBanner {
			display: none;
		}

		#gesamtpreis div {
			margin-left: 0 !important;
			width: 100% !important;
			padding: .2rem;
		}

		span#gesamtpreis {
			border-bottom: 1px solid #000;
		}

		/* Tabelle wird block, kann notfalls horizontal scrollen */
		#tblProducts {
			display: block;
			overflow-x: auto;
		}

		#tblProducts thead {
			display: none;
		}

		/* Jede Tabellenzeile (tr) als Flex-Container */
        #tblProducts tr {
			display: flex;
			flex-wrap: wrap;
			margin-bottom: 1rem; /* optischer Abstand */
		}

		#tblProducts td {
			padding: .4rem 1rem;
		}

		/* Alle Zellen blocken wir aus, sodass order greift */
		#tblProducts td,
		#tblProducts th {
			display: block;
			flex: 1 0 auto;
			border: none;
			justify-self: center;
			align-self: center;
		}

		/* Spalte 1 (Bild) */
		#tblProducts tr td:nth-child(1) {
			order: 2;
			/*border-left: 3px solid #c3c3c3;*/
			/* ggf. feste Breite oder flex-basis */
		}

		/* Spalte 2 (Produktname) => soll ganz am Schluss in Zeile 2 erscheinen */
		#tblProducts tr td:nth-child(2) {
			order: 1; /* größer als alle anderen => kommt zuletzt */
			width: 100%; /* über gesamte Zeilenbreite */
			margin-top: .5rem;
		}

		/* Spalte 3 (Anzahl) */
		#tblProducts tr td:nth-child(3) {
			order: 3;
		}

		/* Spalte 4 (x) */
		#tblProducts tr td:nth-child(4) {
			order: 4;
		}

		/* Spalte 5 (Preis) */
		#tblProducts tr td:nth-child(5) {
			order: 5;
			text-align: right;
		}

		/* Spalte 6 (=) */
		#tblProducts tr td:nth-child(6) {
			order: 6;
			width: 50%;
			text-align: right;
			display: none;
		}

		/* Spalte 7 (Summe) */
		#tblProducts tr td:nth-child(7) {
			order: 7;
			width: 50%;
		}
		#tblProducts tr td:nth-child(7)::before
		{
		}

		.tableProduct {
			margin: 0;
		}
		.tableProduct a {
			display: none;
		}

		#konfiguratorContent .produktZeile {
			margin: 0;
			padding: .5rem 0;
			border-bottom: 1px dashed #c3c3c3;
		}

		td.prodSum {
			padding-top: 0 !important;
		}

		.prodSum div {
			/*border-bottom: double 3px #000000;*/
			border-bottom: 1px solid #000000;
			display: inline-block;
		}
		.prodSum div::before {
			content: "= ";
		}

		#gesamtsumme, #gesamtsumme2 {
			border-bottom: double 3px #000000;
			font-size: 1.2rem;
		}

		p.produktName {
			font-weight: bold;
		}

		.step span {
			display: none !important;
		}

		.step h2 {
			margin-bottom: 0 !important;
		}

		.pfostenOption .card-body {
			padding: .5rem;
		}

        #preisInfoGesamt tbody tr:last-of-type td.price {
			background: #ffeaa4 !important;
			color: #c00;
		}

		#preisInfoGesamt tbody tr {
			display: flex;
			border: none !important;
			margin: 0;
		}
		#preisInfoGesamt tbody tr td {
			width: 50% !important;
		}

		.stepContainer h3 {
			text-align: center;
		}
	}

	.productAmountContainer {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}


	/* Keyframes für seitliches „Wackeln“ */
	@keyframes bounceHoriz {
		/* Am Anfang normale Position */
		0% { transform: translateX(0); }
		/* Kurzer Bounce-Zyklus, z.B. bis 30% */
		10% { transform: translateX(-30px); }
		20% { transform: translateX(0); }

		/* Zwischen 30% und 100% bleibt das Element unbewegt */
		100% { transform: translateX(0); }
	}

	/* Klasse, die die Bounce-Animation triggert */
	.bounce {
		animation: bounceHoriz 5s ease-in-out infinite;
	}

	#hinweis {
		position: absolute;
		top: 200px;
		left: 100px;
	}

	.widthContainer {
		position: absolute;
		bottom: -7px;
		color: #fff;
		border-left: 1px solid #fff;
		border-right: 1px solid #fff;
		left: 0px;
		right: 0px;
		text-align: center;
	}

	.widthContainerLast {
		text-align: left;
		margin-left: 15px;
		border: none !important;
		margin-bottom: -20px;
	}

	.befestigungSelectContainer, .optionsValueSelectContainer {
		width: 14em;
		min-width: 14em;
		cursor: pointer;
		position: relative;
	}

	@media only screen and (min-width: 800px) {
		.befestigungSelectContainer, .optionsValueSelectContainer {
			flex: 0 !important;
		}
	}

	.pfostengruppenSelectContainer {
		cursor: pointer;
		width: 14em;
		max-width: 14em;
	}

	.pfostengruppenSelectContainer.active, .befestigungSelectContainer.active, .optionsValueSelectContainer.active, .pfostenOption .active {
		background-color: #FFEECC;
	}	

	#previewContainer {
		padding: 0 5px;
		width: 100%;
		height: 60px;
		overflow: hidden;
		/*background: url('/images/konfigurator/background_preview.png');*/
		background: url('/images/zaunplaner/background.jpg');
		background-size: cover;
		background-position: center center;
		/*background: rgb(181, 225, 255);*/
		margin-bottom: 5px;
		/* border: 1px solid #06a;*/
		/*border-top: 4px solid #ff6b00;*/
		border-top: 4px solid var(--primary-color);
		position: relative;
	}

	#previewContainer .pfosten {
		position: relative;
		display: inline-block;
/*		margin-top: 0 !important; */
	}

	#previewContainer img.imageSmall {
		height: 60px;
	}

	#previewContainer .pfostenContainer {
		height: 60px;
		width: 5px;
	}

	#previewContainer .lastPfosten {
		height: 60px !important;
	}

	#previewMarker {
		width: 15%;
		height: 55px;
		border: 2px dashed #fff;
		position: absolute;
		left: 1px;
		top: 4px;
		cursor: move;
	}

	.stepContainer {
		/*overflow: hidden;*/
		margin-bottom: 20px;
		/*background: #aaa;*/
		/*border: 1px solid #aaa;*/

		/*
		-moz-border-radius: 10px; 
		-webkit-border-radius: 10px;
		-khtml-border-radius: 10px;
		border-radius: 10px;
		*/

		behavior: url(../css/PIE.htc);
	}

	.step {
		padding: 10px;
		background: #eee;
		border-left: 10px solid #ddd;
	}

	.step h2 {
		color: #444;
		font-size: 13pt;
		margin: 0;
	}

	.step span {
		color: #666;
		font-size: 10pt;
	}

	.round-corner-all {
		padding: 5px 10px;
		border: 1px solid #aaa;

		-moz-border-radius: 10px; /* Firefox */
		-webkit-border-radius: 10px; /* Safari, Chrome */
		-khtml-border-radius: 10px; /* Konqueror */
		border-radius: 10px; /* CSS3 */
	}

	.bold {
		font-weight: bold;
	}

	.cContent td {
		padding: 0 !important;
	}

	.pTable h2 {
		border-bottom: 0;
		text-decoration: none;
		padding: 0;
	}

	.pfostenOption {
		padding-bottom: 20px;
	}

	.pfostenOptionEntry {
		min-height: 32px;
		margin: 5px 0;
		padding: 0 10px;

		background: #fff;

		border: 1px solid #aaa;

		-moz-border-radius: 10px; /* Firefox */
		-webkit-border-radius: 10px; /* Safari, Chrome */
		-khtml-border-radius: 10px; /* Konqueror */
		border-radius: 10px; /* CSS3 */
	}

	.pfostenOptionEntry:hover {
		background: #ffd9b3;
	}

	.variantenHinweis {
		margin-bottom: 20px;
		padding: 5px 10px;
		background: #fff;

		border: 1px solid #aaa;

		-moz-border-radius: 10px; /* Firefox */
		-webkit-border-radius: 10px; /* Safari, Chrome */
		-khtml-border-radius: 10px; /* Konqueror */
		border-radius: 10px; /* CSS3 */
	}

	.pfostenmarker {
		font-size: 10pt;
		font-weight: bold;
		text-align: center;
		padding: 3px 5px;
		position: absolute;
		/*bottom: 72px;*/
		bottom: -90px;
		left: -5px;
		right: -5px;
		color: #fff;
		background: #04a;
		border: 1px solid #fff;

		-moz-border-radius: 3px; /* Firefox */
		-webkit-border-radius: 3px; /* Safari, Chrome */
		-khtml-border-radius: 3px; /* Konqueror */
		border-radius: 3px; /* CSS3 */
		z-index: 8;
	}

	.elementId {
		z-index: auto !important;
	}

	.pfostenmarker2 {
		font-size: 10pt;
		font-weight: bold;
		text-align: center;
		padding: 5px 10px;
		color: #fff;
		background: #04a;
		display: inline-block;
		margin-bottom: 5px;
		border: 1px solid #fff;

		-moz-border-radius: 10px; /* Firefox */
		-webkit-border-radius: 10px; /* Safari, Chrome */
		-khtml-border-radius: 10px; /* Konqueror */
		border-radius: 10px; /* CSS3 */
	}
	
	.konfiguratorPreviewContainer {
		background: #fff;
		width: 200px;
		height: 170px;
		float: left;
		margin-right: 10px;
		overflow: hidden;
		position: relative;
	}
	.konfiguratorPreviewContainer img {
		width: 100%;
	}
	.konfiguratorPreviewName {
		position: absolute;
		bottom: 0;
		text-align: center;
		width: 200px;
	}
	
	.pfostenbefestigung {
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 1;
	}

	.produktZeile.disabled h2 {
		color: #ccc;
	}

	.elementPositionError {
		position: absolute;
		top: 40%;
		background: #fee;
		padding: 5px;
		border: 1px solid #faa;
		border-radius: 5px;
		color: #f00;
	}

	.elementPositionErrorLeft {
		position: absolute;
		top: 40px;
		margin-left: 2px;
		bottom: 0;
		width: 20px;
		background: url(../images/konfigurator/montageVerbotenMarker.png);
		z-index: 4;
	}

	.elementPositionErrorRight {
		position: absolute;
		right: 0px;
		top: 40px;
		bottom: 0;
		width: 20px;
		background: url(../images/konfigurator/montageVerbotenMarker.png);
		z-index: 4;
	}


#shortDragHilfe {
	text-align: center;
	background: #ffd489;
	color: #333;
	font-size: 130%;
}

.elementHover {
	background: rgba(0,255,0,.3);
}


/* ### Standalone ##################################################################### */
.konfigurator_standalone_header {
	font-size: 11pt;
	/*margin: 0 -15px;*/
	margin-bottom: 2em;
	/*
	background: url(/images/zaunplaner_standalone/header_small.jpg);
	background-size: cover;
	background-position: center center;
	*/
	background: rgba(255, 255, 255, .9);
	padding: 1em 15px;
	border-bottom: 1px solid #444;
}
.konfigurator_standalone_header p {
	font-size: 11pt;
}
.konfigurator_standalone_header h1 {
	font-size: 24pt;
}

.konfigurator_standalone_header img {
	float: right;
	max-height: 140px;
}

.konfigurator_standalone_background {
	/*background: url(/images/zaunplaner_standalone/holz-holzern-holzzaun-113726.jpg);*/
	background-size: cover;
	background-position: center center;
	padding: 2em;
	margin: 0 -15px;
}

.konfigurator_standalone_container {
	text-align: left;
	margin-top: 10px;
}

.konfigurator_standalone_content {
	background: rgba(255, 255, 255, .9);
	padding: 1em;
	margin: 0 auto;
}

/* #################################################################################### */


.zaunplanerUebersicht {
	/*max-width: 1140px;*/
	margin: 0 auto;
	text-align: left;
}

.zaunplanerUebersicht .col-6 {
	display: inline-block;
	box-sizing: border-box;
	width: 24%;
}

.zaunplanerUebersicht img {
	width: 100%;
	max-width: 500px;
	z-index: 1;
}

.zaunplanerUebersicht img.filterIcon {
	width: auto;
	max-height: 64px;
	vertical-align: middle;
}

.filterIconLeiste {
	min-height: 50px;
}

.filterIconLeiste img.filterIcon {
	max-width: 32px;
	max-height: 32px;
	margin: .5em;
}

#filterContainer {
	padding-bottom: 1em;
	margin-bottom: 2em;
}

.filter {
	display: inline-block;
	vertical-align: middle;
	margin: 1em;
}

.filter .filterName {
	font-size: 12pt;
	font-weight: bold;
	margin-left: 25px;
	min-width: 100px;
}

.filter .filterCheckbox {
	width: 20px;
	margin-right: 5px;
}

.zaunplanerUebersicht .figure-caption {
	color: #888;
}

.konfiguratorImage {
	width: 250px;
	position: relative;
	display: inline-block;
}

.konfiguratorImage .button {
	position: absolute;
	bottom: 4em; 
	right: .1em;
}

.konfiguratorText {
	margin-top: -1em;
	max-width: 69%;
	height: 200px;
	overflow-y: auto;
	float: right;
}

.konfiguratorText p {
	font-size: 10pt;
	text-align: left;
	padding-left: 2em;
}

.konfiguratorContainer .konfiguratorName {
	font-size: 13pt;
	font-weight: bold;
	display: block;
	min-height: 55px;
	border-top: 1px solid #ccc;
	padding-top: 10px;
	text-align: left;
}

.konfiguratorShow {
	display: inline-block;
}

.konfiguratorContainer img {
	max-width: 100%;
}

.konfiguratorAnzahl {
	position: absolute;
	bottom: 2em;
	left: 2em;
	right: 2em;
	padding: .5em 1em;
	padding-top: 1em;
	font-size: 11pt;
	background: rgba(255, 255, 255, .9);
	vertical-align: middle;
	color: #333;
}

.konfiguratorTexte, .konfiguratorTexte a {
	color: #888;
	line-height: 140%;
}


.zaunplanerHinweisContent p {
	font-size: 12pt;
}

@media only screen and (max-width: 1000px) {
	.konfiguratorContainer {
		width: 49%;
	}
}

@media only screen and (max-width: 1300px) {
	.zaunplanerUebersicht .col-6 {
		display: inline-block;
		box-sizing: border-box;
		width: 49%;
	}
}

@media only screen and (max-width: 649px) {
	.konfiguratorContainer {
		width: 100%;
	}

	.zaunplanerUebersicht .col-6 {
		width: 100%;
	}
}


/*
img.clouds {
	position: absolute;
	left: 0;
	top: 0;
	width: 500px;
}

.cloud1 {
	-webkit-animation: moveclouds 140s linear infinite;
	-moz-animation: moveclouds 140s linear infinite;
	-o-animation: moveclouds 140s linear infinite;	
}

.cloud2 {
	-webkit-animation: moveclouds 180s linear infinite;
	-moz-animation: moveclouds 180s linear infinite;
	-o-animation: moveclouds 180s linear infinite;	
}

@-webkit-keyframes moveclouds {
	0% {margin-left: 100%;}
	100% {margin-left: -100%;}
}
@-moz-keyframes moveclouds {
	0% {margin-left: 100%;}
	100% {margin-left: -100%;}
}
@-o-keyframes moveclouds {
	0% {margin-left: 100%;}
	100% {margin-left: -100%;}
}
*/

.massketteItem {
	position: absolute;
	z-index: 8;
	color: #fff;
	/*background: rgba(255, 255, 255, .3);*/
	background: rgba(0, 67, 168, .8);
	text-align: center;
	border: 1px solid rgb(255, 255, 255);
	border-top: none;
	border-bottom: none;
	padding: 0 1px;
	/*text-shadow: 1px 1px 1px #000, -1px -1px 1px #000;*/

	display: flex;
}

.massketteItemFloat {
	flex-grow: 10;
	position: relative;
}

.massketteItemWidth {
	flex-grow: 1;
	padding-top: 2px;
}

.massketteItem .fa-caret-left {
	float: left;
	font-size: 19px;
}
.massketteItem .fa-caret-right {
	float: right;
	font-size: 19px;
}
.massketteItem .line {
	position: absolute;
	left: 2px;
	right: 2px;
	top: 9px;
	height: 1px;
	background: #fff;
}

select.pfostenGruppe {
	font-size: 10pt;
	max-width: 100px;
	cursor: pointer;
}

.konfiguratorElementZeilenGruppe {
	font-size: 11px;
}

.infoseitenTab.active {
	background-color: var(--primary-color) !important;
	color: #fff !important;
}

#zaunplanungContainer .nav-link {
	display: block !important;
}