/*  XS Konfigurator Main Sheet  */
/*
body.www			{ font-family: helvetica, arial, verdana, sans-serif; margin: 0px; padding: 0px; color: #000000; font-size: 12px; background-color: #ffffff; background-image: none; }
overflow-wrap: break-word; hyphens: auto;
 */

/*  ***************** Variables ****************** */

:root {


	--xs-header-height:						0px;		/* die Größen werden bei den Breakpoints definiert */
	--xs-main-height:							auto;
	--xs-slider-height:							0px;
	--xs-footer-height:						auto;

	--xs-root-background-color:				#ffffff;

	--xs-header-background-color:				#293b89;
	--xs-header-container-background-color:		transparent;
	--xs-header-font-color:						#ffffff;
	--xs-header-font-color-over:				0.6;		/* ist der opacity Wert bei over */

	--xs-main-background-color:				transparent;
	--xs-main-container-background-color:		transparent;
	--xs-main-project-navi-background-color:		transparent;
	--xs-main-project-wrapper-background-color:	#f5f5f5;
	--xs-main-font-color-1:						var(--xs-default-font-color);
	--xs-main-font-color-2:						#b80100;
	--xs-main-font-color-3:						#ff0000;

	--xs-main-navi-color-1:						var(--xs-default-font-color);
	--xs-main-navi-color-2:					#999999;

	--xs-conf-navi-path-height:					60px;
	--xs-conf-step-view-height:					70px;

	--xs-conf-propereties-box-width:			auto;	/* die Größen werden bei den Breakpoints definiert */
	--xs-conf-propereties-box-background-color:	#f5f5f5;
	--xs-conf-propereties-box-padding:			0.85em;		/* Padding der äußeren Box  */
	--xs-conf-propereties-box-gap:				0.85em;		/* Abstand zwischen den Tasten */
	--xs-conf-propereties-box-text-color-1:		var(--xs-default-font-color);
	--xs-conf-propereties-box-text-color-2:		#bbbbbb;
	--xs-conf-propereties-box-border-color-1:		#cccccc;
	--xs-conf-propereties-box-border-color-2:		var(--xs-default-font-color);
	--xs-conf-propereties-box-border-color-3:	#b80100;

	--xs-slider-container-background-color:		#00ff00;

	--xs-footer-background-color-1:				#293b89;
	--xs-footer-background-color-2:				#172666;
	--xs-footer-background-color-3:				#101e58;

	--xs-footer-conatiner-background-color:		transparent;
	--xs-footer-font-color:						#ffffff;
	--xs-footer-font-color-2:					#a0a7c8;
	--xs-footer-font-color-3:					#ffffff; /* korrekter Wert ist 2b4090 */
	--xs-footer-font-color-over:					0.6;		/* ist der opacity Wert bei over */


	--xs-default-font:							'LatoWeb', helvetica, arial, verdana, sans-serif;
	--xs-default-font-size:						0.9rem;
	--xs-default-font-color:						#111111;
	--xs-default-font-weight:					400;
	--xs-default-font-line-height:				1.4;

	--xs-pic-format-1-1:						1 / 1;
	--xs-pic-format-4-3:						4 / 3;
	--xs-pic-format-16-9:						16 / 9;
	--xs-pic-format-21-9:						21 / 9;
	--xs-pic-format-3-4:						3 / 4;
	--xs-pic-format-9-16:						9 / 16;

	--xs-breakpoint-gab:						0em;	/* die Größen werden bei den Breakpoints definiert */

	--xs-grid-gab-sm:							0.75em;	/* Abstand zwischen den Items - nicht verwendet!!! */
	--xs-grid-gab-md:							1em;	/* Abstand zwischen den Items */
	--xs-grid-gab-lg:							2.0em;	/* Abstand zwischen den Items - nicht verwendet!!! */


	--xs-grid-cols-1:							100%;
	--xs-grid-cols-2:							calc(50% - (1 * var(--xs-grid-gab-md)) / 2);
	--xs-grid-cols-3:							calc(33.33% - (2 * var(--xs-grid-gab-md)) / 3);
	--xs-grid-cols-4:							calc(25% - (3 * var(--xs-grid-gab-md)) / 4);
	--xs-grid-cols-5:							calc(20% - (4 * var(--xs-grid-gab-md)) / 5);

	--xs-grid-prop-cols-1:						100%;
	--xs-grid-prop-cols-2:						calc(50% - (1 * var(--xs-conf-propereties-box-gap)) / 2);
	--xs-grid-prop-cols-3:						calc(33.33% - (2 * var(--xs-conf-propereties-box-gap)) / 3);
	--xs-grid-prop-cols-4:						calc(25% - (3 * var(--xs-conf-propereties-box-gap)) / 4);
	--xs-grid-prop-cols-5:						calc(20% - (4 * var(--xs-conf-propereties-box-gap)) / 5);

}



/*  ***************** Default Settings ****************** */
/* ?????????????????????   checken ob dies beim body rein muss, decke eher nicht? ???????????????????
				  min-height: 100dvh;		
				  min-height: 100vh;		
*/


*				{
				margin: 0;
				padding: 0;
				}

*, ::after, ::before	{
				box-sizing: border-box;
				}

html				{
				display: block;
				height: 100%!important;
				-webkit-text-size-adjust: 100%;		/* Für ältere Webkit-Browser (iOS/Android Safari, Chrome) */
				text-size-adjust: 100%;
				scroll-padding-top: calc(var(--xs-header-height) + var(--xs-conf-navi-path-height) + var(--xs-conf-step-view-height) + 0.6em)!important ;
				scroll-behavior: smooth;
				}

body			{
				display: block;
				height: 100%!important;
				background-color: var(--xs-root-background-color);
				font-family: var(--xs-default-font);
				font-size: var(--xs-default-font-size);
				font-weight: var(--xs-default-font-weight);
				line-height: var(--xs-default-font-line-height);
				color: var(--xs-default-font-color);
				overflow-wrap: break-word;				/* erzwingt Umbruch bei langen Wörtern */
				word-wrap: break-word;				/* für alte Browser */
				line-break: auto;						/* optional, für Browser mit asiatischen Zeichen */
				word-break: normal;					/* Standardverhalten, nicht zu radikal */
				hyphens: auto; 						/* optionale Trennung, nur bei korrektem lang (falls zu viel umbrochen wird, entfernen) */
 			 	-webkit-font-smoothing: antialiased;		/* Schriften unter Safari auf Mac glätten */
 			 	-moz-osx-font-smoothing: grayscale;		/* Für Firefox auf Mac */
				}

header, nav, main, footer, aside, section, article, address		{ display: block; }

input, button, textarea, select	{
							font-family: inherit;
							font-size: inherit;
							color: inherit;
							line-height: inherit;
							}

table			{
				border-collapse: collapse;
				border-spacing: 0;
				}
/* ?????????????????????   checken ob dies beim table noch benötigt wird ???????????????????
				font-size: inherit;
				line-height: inherit;
				text-align: inherit;
				margin: 0;
				padding: 0;
*/


a				{
				cursor: pointer;
				text-decoration: underline;
				color: #ff0000;
				}

a:link			{ }
a:visited			{ }
a:hover			{ text-decoration: none; color: #ff00ff; }
a:active			{ }

h1				{ font-size: 2em; }
h2				{ font-size: 1.75em; }
h3				{ font-size: 1.5em; }
h4, h5, h6		{ font-size: 1em; }




/*  ***************** Main Grid ****************** */

.root-container	{
				display: flex!important;
				flex-direction: column!important;
				height: 100%!important;
				}

header			{
				position: fixed;
				top: 0;
				right: 0;
				left: 0;
				z-index: 500;
				background-color: var(--xs-header-background-color);
				}

.header-container	{
				height: var(--xs-header-height);
				background-color: var(--xs-header-container-background-color);
				margin-left: auto;
				margin-right: auto;
				}

main			{
				z-index: 100;
				flex-shrink: 0!important;
				margin-top: var(--xs-header-height)!important;
				transition: margin-top 0.5s ease;
				height: auto;
				background-color: var(--xs-main-background-color);
				}

main.selection	{
				margin-top: var(--xs-header-height)!important;
				}

main.configuration	{
				margin-top: calc(var(--xs-header-height) + var(--xs-conf-navi-path-height))!important;
				}


main.selection .main-container	{
				height: var(--xs-main-height);
				background-color: var(--xs-main-container-background-color);
				margin-left: auto;
				margin-right: auto;
				padding-top: 2em;
				padding-bottom: 2em;
				}

main.configuration .main-container	{
				height: var(--xs-main-height);
				background-color: var(--xs-main-container-background-color);
				margin-left: auto;
				margin-right: auto;
				padding-top: 0em;
				padding-bottom: 2em;
				}



footer			{
				z-index: 450;
				margin-top: auto!important;
				background-image: linear-gradient(
					to bottom,
					var(--xs-footer-background-color-1) 0%,			/* Farbe A: Volle Stärke am Start */
					var(--xs-footer-background-color-1) 35%,			/* bleibt länger stark (Plateau) */
					var(--xs-footer-background-color-2) 75%,			/* Ein mittleres Blau für einen weicheren Übergang */
					var(--xs-footer-background-color-3) 100%		/* Farbe B am Ende */
					);
				}



.footer-container	{
				min-height: var(--xs-footer-height);
				background-color: var(--xs-footer-conatiner-background-color);
				margin-left: auto;
				margin-right: auto;
				}




/*  ***************** Header ****************** */


header .complete-nav-container	{
				display: flex!important;
				flex-direction: row!important;
				justify-content: space-between!important;
				align-items: center;
				height: 100%;
				}

header .logo-container	{
				flex: 0 0 auto;
				padding-right: 0em; /* der Abstand wird bei den Breakpoints definiert (ggf. mehrfach) */
				}

header .nav-container	{
				flex: 1 1 auto;
				overflow: hidden;
				}

header .language-container	{
				flex: 0 0 auto;
				padding-left: 2em;
				}


header .logo-container a		{
				display: block;
				line-height: 0	/* Unterlänge zurück setzen, damit die Höhe des Elements stimmt */
				}

header .logo-container .logo		{
				display: block;
				background-position: center; 
				background-repeat: no-repeat;
				background-image: url(/xs_db/bild_db/website/configurator-/XS/www/_css/kipp-logo.svg);
				}

header .logo-container .logo:hover	{
				opacity: var(--xs-header-font-color-over); transition: opacity 0.5s ease;
							}


header .nav-container .mainnavi	{
				display: flex;
				flex-wrap: nowrap;
				white-space: nowrap;
				list-style: none;
				}

header .nav-container .mainnavi li:not(:last-child)::after {
				content: ""; display: inline;
				border-right: solid 1px var(--xs-header-font-color);
				padding-right: 1em; 
				margin-right: 1em;
				}

header .nav-container .mainnavi a { 
				display: inline-block;
				padding: 4px 0px 4px 0px;
				text-transform: uppercase;
				text-decoration: none;
				color: var(--xs-header-font-color);
				}

header .nav-container .mainnavi a:hover { 
				opacity: var(--xs-header-font-color-over); transition: opacity 0.5s ease;
				}

header .nav-container .mainnavi li:first-child a	{ 
				border-bottom: 2px solid var(--xs-header-font-color);
				font-weight: 800;
				}


header .nav-container .menu	{
				display: inline-block;
				vertical-align: middle;
				width: 28px; height: 28px;
				background-position: center; 
				background-repeat: no-repeat;
				background-image: url(/xs_db/bild_db/website/configurator-/XS/www/_css/menu.svg);
				}

header .nav-container .menu-link	{
				display: inline-block;
				}

header .nav-container .menu-link:hover	{
				opacity: var(--xs-header-font-color-over); transition: opacity 0.5s ease;
				}



header .language-container a	{
							display: inline-block;
							padding: 2px 0px 2px 0px;
							white-space: nowrap;
							}

header .language-container a:hover	{
							opacity: var(--xs-header-font-color-over); transition: opacity 0.5s ease;
							}

header .language-container .globe		{
							display: inline-block;
							vertical-align: middle;
							width: 25px; height: 25px;
							background-position: center;
							background-repeat: no-repeat;
							background-image: url(/xs_db/bild_db/website/configurator-/XS/www/_css/globe.svg);
							}

header .language-container .language		{
							display: inline-block;
							vertical-align: middle;
							color: var(--xs-header-font-color);
							padding-left: 0.5em;
							}




/*  ***************** Main Project (Selection)  ****************** */


main .project-header-container					{   }
main .project-header-container .project-headline	{ font-weight: var(--xs-default-font-weight)!important; display: inline-block; margin-bottom: 1em; }

main .project-content-container		{
				display: flex!important;
				flex-direction: row!important;
				justify-content: flex-start;
				align-items: stretch;
				max-width: 100%;
				}


main .project-content-container .project-navi-container		{
				flex: 0 0 300px;
				background-color: var(--xs-main-project-navi-background-color);
				overflow: hidden;
				padding-right: 1em;
				}


main .project-navi-container .navi-headline 	{
				display: block;
				font-size: 1.35em;
				padding-bottom: 0.5em;
				}	

main .project-navi-container	ul				{ display: block; list-style: none; }
main .project-navi-container	ul li				{ display: block; margin-top: 1em; margin-bottom: 1em; }
main .project-navi-container	ul li a			{ display: inline-block; color: var(--xs-main-navi-color-1); text-decoration: none; }
main .project-navi-container	ul li a:hover		{ color: var(--xs-main-navi-color-2); }
main .project-navi-container	ul li.selected a	{ font-weight: bold; text-decoration: underline; }
main .project-navi-container	ul li.unselected a	{ font-weight: normal; text-decoration: none; }



main .project-content-container .project-wrapper-container	{
				flex: 1 1 auto;
				padding: 1em;
				background-color: var(--xs-main-project-wrapper-background-color);
				}

main .project-wrapper-container .wrapper-headline 	{
				display: block;
				font-size: 1.35em;
				padding-bottom: 1em;
				}		

main .project-wrapper-container .wrapper 	{
				display: flex!important;
				flex-direction: row!important;
				align-items: flex-start;
				flex-wrap: wrap;
				align-items: stretch;
				gap: var(--xs-grid-gab-md);
				max-width: 100%;
				}		

main .project-wrapper-container .wrapper-item 	{
				flex: 0 0 var(--xs-grid-cols-4);
				min-height: 350px;
				overflow: hidden;
				}

main .project-wrapper-container .wrapper-item .wrapper-link 	{
				border: 1px solid #cccccc;
				background-color: #ffffff;
				display: block;
				height: 100%;
				transition: border-color 0.5s ease;
				color: var(--xs-main-font-color-1);
				text-decoration: none;
				overflow: hidden;
				}

main .project-wrapper-container .wrapper-item .wrapper-link:hover 	{
				border-color: #333333;
				}


main .project-wrapper-container .wrapper-item .container	{
				display: flex!important;
				flex-direction: column;
				height: 100%;
				}


main .project-wrapper-container .wrapper-item .container .box-picture	{
				flex: 0 1 auto;
				aspect-ratio: 16 / 10;
				overflow: hidden;
				position: relative;
				}

main .project-wrapper-container .wrapper-item .container .box-picture .picture	{
				width: 100%;
				height: 100%;
				object-fit: cover;
				transition: transform 0.5s ease;
				position: absolute;
				}

main .project-wrapper-container .wrapper-item .wrapper-link:hover .box-picture .picture 	{
				transform: scale(1.2);
				}

main .project-wrapper-container .wrapper-item .container .box-picture .badge	{
				position: absolute;
				display: inline-block;
				padding: 0.2em 1.0em 0.2em 1.0em;
				margin: 1em;
				top: 0;
				left: 0;
				background-color: var(--xs-main-font-color-2);
				color: #ffffff;
				font-weight: bold;
				font-size: 0.85em
				}


main .project-wrapper-container .wrapper-item .container .box-headline	{
				flex: 0 1 auto;
				}
main .project-wrapper-container .wrapper-item .container .box-headline .headline		{ display: inline-block; padding: 1em 1em 0em 1em; font-weight: bold; }


main .project-wrapper-container .wrapper-item .container .box-description	{
				flex: 0 1 auto;
				}
main .project-wrapper-container .wrapper-item .container .box-description .description	{ display: inline-block; padding: 1em 1em 0em 1em; }


main .project-wrapper-container .wrapper-item .container .box-link	{
				flex: 1 1 auto;
				display: flex;
				flex-direction: column;
				justify-content: flex-end;
				font-weight: bold;
				}

main .project-wrapper-container .wrapper-item .container .box-link .link		{
				display: inline-block;
				padding: 1.5em 1em 1em 1em;
				vertical-align: middle;
				transition: color 0.5s ease;
				}

main .project-wrapper-container .wrapper-item .wrapper-link:hover .container .box-link .link	{
				color: #999999;
				}


main .project-wrapper-container .wrapper-item .container .box-link .link::before	{
				content: "";
				display: inline-block;
				vertical-align: middle;
				width: 18px; height: 18px;
				background-color: var(--xs-main-font-color-2);
				margin-right: 0.5em;
				margin-top: -0.2em;
				background-position: center; 
				background-repeat: no-repeat;
				background-size: 50% 50%;
				background-image: url(/xs_db/bild_db/website/configurator-/XS/www/_css/arrow-2-right-white.svg);
				}

main .project-wrapper-container .nav-bttn {
				display: inline-block;
				min-width: 200px;
				padding: 0.5em 0.5em 0.5em 0.5em;
				background-color: #ffffff;
				border: 1px solid var(--xs-conf-propereties-box-border-color-2);
				color: var(--xs-conf-propereties-box-text-color-1);
				transition: border-color 0.5s ease, color 0.5s ease, background-color 0.5s ease;
				font-weight: bold;
				text-align: center;
				text-decoration: none;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				cursor: pointer;
margin-bottom: 0.75em;
				}

main .project-wrapper-container .nav-bttn:hover {
				color: #ffffff;
				background-color: var(--xs-conf-propereties-box-border-color-2);
				border-color: var(--xs-conf-propereties-box-border-color-2);
				}



/*  ***************** Configuration Navigation Path ****************** */

nav.nav-path-body	{
				position: fixed;
				top: 0;
				right: 0;
				left: 0;
				z-index: 400;
				background-color: transparent;
				transition: margin-top 0.5s ease;
				margin-top: var(--xs-header-height)!important;
				}

nav .nav-path-container	{
				height: var(--xs-conf-navi-path-height);
				background-color: transparent;
				background-color: rgba(255, 255, 255, 0.85);
				backdrop-filter: blur(5px);
				margin-left: auto;
				margin-right: auto;
				}

nav .path-container 	{
				display: flex!important;
				flex-direction: row;
				background-color: transparent;
				height: 100%;
				align-items: center;
				}

nav .path-container .path-col-1	{
				flex: 1 1 auto;
				background-color: transparent;
				white-space: nowrap;
				overflow: hidden;
				}

nav .path-container .path-col-2	{
				flex: 0 0 var(--xs-conf-propereties-box-width);
				}

.navi-path__buttons	{
				width: 100%;
				display: flex;
				align-items: center;
				gap: var(--xs-conf-propereties-box-gap);
				}

.navi-path__button--change-config	{
				flex: 1 1 0;
				min-width: 0;
				}

.navi-path__button--goto-website	{
				flex: 1 1 0;
				min-width: 0;
				}

.navi-path__button--change-config .link	{
				display: block;
				width: 100%;
				padding: 0.5em 0.5em 0.5em 0.5em;
				background-color: #ffffff;
				border: 1px solid var(--xs-conf-propereties-box-border-color-2);
				color: var(--xs-conf-propereties-box-text-color-1);
				transition: border-color 0.5s ease, color 0.5s ease, background-color 0.5s ease;
				font-weight: bold;
				text-align: center;
				text-decoration: none;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				cursor: pointer;
				}

.navi-path__button--goto-website .link	{
				display: block;
				width: 100%;
				padding: 0.5em 0.5em 0.5em 0.5em;
				background-color: #ffffff;
				border: 1px solid var(--xs-conf-propereties-box-border-color-1);
				color: var(--xs-conf-propereties-box-text-color-2);
				transition: border-color 0.5s ease, color 0.5s ease, background-color 0.5s ease;
				font-weight: bold;
				text-align: center;
				text-decoration: none;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				}

.navi-path__button--change-config .link:hover	{
				color: #ffffff;
				background-color: var(--xs-conf-propereties-box-border-color-2);
				border-color: var(--xs-conf-propereties-box-border-color-2);
				}

.navi-path__button--goto-website .link:hover	{
				color: #ffffff;
				background-color: var(--xs-conf-propereties-box-border-color-2);
				border-color: var(--xs-conf-propereties-box-border-color-2);
				}






/*  ***************** Configuration Main Grid ****************** */

main .decision-main	{
				display: flex!important;
			/*	flex-direction: row;				******* wird bei den Breakpoints gesteuert *******		*/
				height: auto;
				align-items: flex-start;
				}

main .decision-main .decision-main-col-1	{
			/*	flex: 1 1 auto;			******* wird bei den Breakpoints gesteuert *******		*/
				overflow: hidden;
				}

main .decision-main .decision-main-col-2	{
			/*	flex: 0 0 var(--xs-conf-propereties-box-width);		******* wird bei den Breakpoints gesteuert *******		*/
				background-color: var(--xs-conf-propereties-box-background-color);
				overflow: hidden;
				margin-bottom: var(--xs-conf-propereties-box-gap);
				padding: var(--xs-conf-propereties-box-padding);
				}


main .decision-main:first-child .decision-main-col-2	{
				margin-top: var(--xs-conf-step-view-height);
				}



/*  ***************** Configuration Start Block ****************** */


/*
main .decision-main:first-child .decision-main-col-2.initial-start	{
				--xs-conf-step-view-height: 300px;
				}
*/

.start-configuration__container	{
				background-color: rgba(255, 255, 255, 0.85);
				backdrop-filter: blur(5px);
				position: fixed;
				margin-left: calc(var(--xs-conf-propereties-box-padding) * -1);
				margin-top: calc((var(--xs-conf-propereties-box-padding) + var(--xs-conf-step-view-height)) * -1);
				width: var(--xs-conf-propereties-box-width);
				height: var(--xs-conf-step-view-height);
				z-index: 110;
				padding-bottom: 1em;
				}

.start-configuration__container--box	{
				height: 100%;
				width: 100%;
				background-color: #8c8c8c;
				background-color: rgba(0, 0, 0, 0.48);
				display: flex;
				flex-direction: column;
				padding: 1em 1em 1em 1em;
				color: #ffffff;
				overflow: hidden;
				}

.start-configuration__headline	{
				display: block;
				overflow: hidden;
				text-overflow: ellipsis;
				font-size: 1.5em;
				line-height: 1.1em;
				padding-bottom: 1em;
				}

.start-configuration__text	{
				display: block;
				overflow: hidden;
				text-overflow: ellipsis;
				padding-bottom: 1em;
				}

.start-configuration__bttn	{
				display: inline-block;
				align-self: flex-start;
				margin-top: auto;
			/*	min-width: 230px;    bei den Breakpoints einstellen */
				min-width: auto;
				max-width: 100%;
				padding: 0.5em 2em 0.5em 2em;
				background-color: #ffffff;
				border: 1px solid var(--xs-conf-propereties-box-border-color-2);
				color: var(--xs-conf-propereties-box-text-color-1);
				transition: border-color 0.5s ease, color 0.5s ease, background-color 0.5s ease;
				font-weight: bold;
				text-align: center;
				text-decoration: none;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				cursor: pointer;
				}


.start-configuration__bttn:hover	{
				color: #ffffff;
				background-color: var(--xs-conf-propereties-box-border-color-2);
				border-color: var(--xs-conf-propereties-box-border-color-2);
				}







/*  ***************** Configuration Step View + Scroll Marker Switchpoint  ****************** */


.scroll-marker__switchpoint	{
				width: 25px;
				height: 25px;
				z-index: 150;
				top: var(--switchpoint-top, 0px);
				position: fixed;
				margin-left: -30px;
				background-position: center; 
				background-repeat: no-repeat;
				background-image: url(/xs_db/bild_db/website/configurator-/XS/www/_css/switchpoint.svg);
				margin-top: -12px;				/* ************ die halbe Höhe vom div ************* */
				}


.config__step-view	{
				background-color: rgba(255, 255, 255, 0.85);
				backdrop-filter: blur(5px);
				position: fixed;
				margin-left: calc(var(--xs-conf-propereties-box-padding) * -1);
				margin-top: calc((var(--xs-conf-propereties-box-padding) + var(--xs-conf-step-view-height)) * -1);
				width: var(--xs-conf-propereties-box-width);
				height: var(--xs-conf-step-view-height);
				z-index: 50;
				}

.config__step-view--config-name	{
				padding: 0em 0.5em 0.1em 0.5em;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				font-size: 1.5em;
				line-height: 1.1em;
				}

.config__step-view .stepper-head	{
				padding: 0em var(--xs-conf-propereties-box-padding) 0em var(--xs-conf-propereties-box-padding);
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				}

.config__step-view .stepper-steps	{
				margin-top: 0.3em;
				padding: 0em var(--xs-conf-propereties-box-padding) 0em var(--xs-conf-propereties-box-padding);
				display: flex;
				gap: 0.2em;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				}

.config__step-view .stepper-step	{
				background-color: #cccccc;
				flex: 0 1 20px;
				height: 3px;
				}

.config__step-view .stepper-step.completed,
.config__step-view .stepper-step.inactive {
				background-color: #111111;
				}

.config__step-view .stepper-step.current {
				background-color: #111111;
				}

.config__step-view .stepper-steps.completed .stepper-step {			/* ************ grün, Konfiguration abgeschlossen ************* */
				background-color: #4aae4e;
				}



/*  ***************** Configuration Property Box ****************** */


main .decision-main-col-2 .configurator-container-type > .property-headline 	{		/* ************ äußere Haupt-Headline ************* */
				font-size: 1.5em;
				line-height: 1.1em;
				margin-bottom: 0.75em;
				}

main .decision-main-col-2 .configurator-container-type:nth-of-type(n+2) > .property-headline 	{		/* ************ wenn gleiche Gruppierungen konfiguriert werden, benötigt ab der 2. Haupt-Headline ab Abstand ************* */
				margin-top: 1.0em;
				}


main .decision-main-col-2 .configurator-filter-property-type,
main .decision-main-col-2 .configurator-optional-choice,
main .decision-main-col-2 .configurator-sub-decisionselection-onefold-type		{						/* ************ innere Boxen INAKTIV (komplett ************* */
				position: relative;
				border: 1px solid var(--xs-conf-propereties-box-border-color-1);
				background-color: #ffffff;
				color: var(--xs-conf-propereties-box-text-color-2);
				}

main .decision-main-col-2 .configurator-filter-property-type:not(:last-child),
main .decision-main-col-2 .configurator-optional-choice:not(:last-child),
main .decision-main-col-2 .configurator-sub-decisionselection-onefold-type:not(:last-child)		{			/* ************ innere Boxen INAKTIV Abstand der Boxen ************* */
				margin-bottom: var(--xs-conf-propereties-box-gap);
				}

main .decision-main-col-2 .configurator-filter-property-type.configurable,
main .decision-main-col-2 .configurator-optional-choice.configurable,
main .decision-main-col-2 .configurator-sub-decisionselection-onefold-type.configurable	 		{			/* ************ innere Boxen AKTIV komplett ************* */
				border-color: var(--xs-conf-propereties-box-border-color-2);
				color: var(--xs-conf-propereties-box-text-color-1);
				}


main .decision-main-col-2 .configurator-filter-property-type.configurable.content-visible,
main .decision-main-col-2 .configurator-optional-choice.configurable.content-visible,
main .decision-main-col-2 .configurator-sub-decisionselection-onefold-type.configurable.content-visible		{			/* ************ innere Boxen AKTIV komplett ************* */
				min-height: 200px;
				}



main .decision-main-col-2 .configurator-filter-property-type .property-headline,
main .decision-main-col-2 .configurator-optional-choice .property-headline,
main .decision-main-col-2 .configurator-sub-decisionselection-onefold-type .property-headline		{		/* ************ Headline Taste ************* */
				position: relative;
				font-size: 1.35em;
				line-height: 1.2em;
				padding: 0.5em 0.75em 0.5em 0.75em;
				}


main .decision-main-col-2 .configurator-filter-property-type .proberty-link-button,
main .decision-main-col-2 .configurator-optional-choice .proberty-link-button,
main .decision-main-col-2 .configurator-sub-decisionselection-onefold-type .proberty-link-button		{		/* ************ Headline Taste Link aktiv ************* */
				display: block;
				color: var(--xs-conf-propereties-box-text-color-1);
				text-decoration: none;
				transition: opacity 0.5s ease;
				}

main .decision-main-col-2 .configurator-filter-property-type .proberty-link-button:hover,
main .decision-main-col-2 .configurator-optional-choice .proberty-link-button:hover,
main .decision-main-col-2 .configurator-sub-decisionselection-onefold-type .proberty-link-button:hover		{	
				opacity: 0.3;
				}


main .decision-main-col-2 .configurator-filter-property-type .property-headline::after,
main .decision-main-col-2 .configurator-optional-choice .property-headline::after,
main .decision-main-col-2 .configurator-sub-decisionselection-onefold-type .property-headline::after 	{	/* ************ open/close Grafik in Taste INAKTIV ************* */
				position: absolute;
				content: "";
				width: 16px;
				height: 16px;
				background-position: center; 
				background-repeat: no-repeat;
				top: 13px;
				right: 16px;
				display: block;
				opacity: 0.15;
				}

main .decision-main-col-2 .configurator-filter-property-type.configurable .property-headline::after,
main .decision-main-col-2 .configurator-optional-choice.configurable .property-headline::after,
main .decision-main-col-2 .configurator-sub-decisionselection-onefold-type.configurable .property-headline::after 	{		/* ************ open/close Grafik AKTIV ************* */
				opacity: 0.9;
				}

main .decision-main-col-2 .configurator-filter-property-type.content-invisible .property-headline::after,
main .decision-main-col-2 .configurator-optional-choice.content-invisible .property-headline::after,
main .decision-main-col-2 .configurator-sub-decisionselection-onefold-type.content-invisible .property-headline::after		{	
				background-image: url(/xs_db/bild_db/website/configurator-/XS/www/_css/symbol-close.svg);
				}

main .decision-main-col-2 .configurator-filter-property-type.content-visible .property-headline::after,
main .decision-main-col-2 .configurator-optional-choice.content-visible .property-headline::after,
main .decision-main-col-2 .configurator-sub-decisionselection-onefold-type.content-visible .property-headline::after	{	
				background-image: url(/xs_db/bild_db/website/configurator-/XS/www/_css/symbol-open.svg);

				}

main .decision-main-col-2 .configurator-filter-property-type .property-main-container,
main .decision-main-col-2 .configurator-optional-choice .property-main-container,
main .decision-main-col-2 .configurator-sub-decisionselection-onefold-type .property-main-container	 	{		/* ************ äußere Box unterhalb der Taste ************* */
				padding: 0em 1.0em 0em 1.0em;
				}

main .decision-main-col-2 .configurator-filter-property-type .property-text,
main .decision-main-col-2 .configurator-optional-choice .property-text,
main .decision-main-col-2 .configurator-sub-decisionselection-onefold-type .property-text		{					/* ************ Text oben + unten ************* */
				line-height: 1.2em;
				padding-bottom: 0.75em;
				}

main .decision-main-col-2 .configurator-filter-property-type .configure-state-1,
main .decision-main-col-2 .configurator-optional-choice .configure-state-1,
main .decision-main-col-2 .configurator-sub-decisionselection-onefold-type .configure-state-1		{			/* ************ Konfigurationszeichen 1 ************* */
				position: absolute;
				width: 25px;
				height: 25px;
				background-position: center; 
				background-repeat: no-repeat;
				background-image: url(/xs_db/bild_db/website/configurator-/XS/www/_css/checked-arrow-green.svg);
				top: -8px;
				right: -8px;
				display: none;
				}

main .decision-main-col-2 .configurator-filter-property-type.completed .configure-state-1,
main .decision-main-col-2 .configurator-optional-choice.completed .configure-state-1,
main .decision-main-col-2 .configurator-sub-decisionselection-onefold-type.completed .configure-state-1		{			/* ************ sichtbar machen Konfigurationszeichen 1 ************* */
				display: block;
				}


main .decision-main-col-2 .property-content .property-item .configure-state-2			{		/* ************ Konfigurationszeichen 2 ************* */
				position: absolute;
				width: 20px;
				height: 20px;
				background-position: center; 
				background-repeat: no-repeat;
				background-image: url(/xs_db/bild_db/website/configurator-/XS/www/_css/checked-arrow-green.svg);
				display: none;
				}










/*  ***************** Configuration Template S1 ****************** */



main .decision-main-col-2 .property-content.t1		{										/* ************ Eigenschaften Repetitor Container ************* */
				}

main .decision-main-col-2 .property-content.t1	.property-item .property-link	{
				display: block;
				color: var(--xs-conf-propereties-box-text-color-1);
				text-decoration: none;
transition: opacity 0.5s ease;
				}

main .decision-main-col-2 .property-content.t1	.property-item .property-link:hover	{
				opacity: 0.4;
				}



main .decision-main-col-2 .property-content.t1	.property-item .property-link:hover .containerXXXXXXXXXXX	{
				color: var(--xs-conf-propereties-box-border-color-2);
				}

main .decision-main-col-2 .property-content.t1 .property-item.disabled		{ opacity: 0.3; }		/* ************ deaktive Box, ausgrauen ************* */


main .decision-main-col-2 .property-content.t1 .property-item 	{
				position: relative;
				}

main .decision-main-col-2 .property-content.t1 .property-item.selected .configure-state-2 	{
				display: block;
				top: -1px;
				right: -9px;
				}

main .decision-main-col-2 .property-content.t1	.property-item .container	{
				display: flex!important;
				flex-direction: row;
				align-items: stretch;
				line-height: 1.2em;
				margin-bottom: 0.75em;
				width: auto;
				min-height: 16px;
				}

main .decision-main-col-2 .property-content.t1	.property-item .container .col-1	{
				flex: 0 0 auto;
				overflow: hidden;
				}

main .decision-main-col-2 .property-content.t1	.property-item .container .col-2	{
				flex: 1 1 auto;
				padding: 0em 0em 0em 0.5em;
				}

main .decision-main-col-2 .property-content.t1	.property-item .container .col-1 .radiobutton	{
				width: 20px;
				height: 20px;
				background-position: center; 
				background-repeat: no-repeat;
				background-image: url(/xs_db/bild_db/website/configurator-/XS/www/_css/radio-btn-unselected.svg);
				opacity: 0.9;
				}

main .decision-main-col-2 .property-content.t1	.property-item.selected .container .col-1 .radiobutton	{
				background-image: url(/xs_db/bild_db/website/configurator-/XS/www/_css/radio-btn-selected.svg);
				opacity: 0.9;
				}

main .decision-main-col-2 .property-content.t1	.property-item .container .col-2 .headline	{
				font-weight: bold;
				}

main .decision-main-col-2 .property-content.t1	.property-item .container .col-2 .text	{
				padding-top: 0.25em;
				}




/*  ***************** Configuration Template S2 ****************** */


main .decision-main-col-2 .property-content.t2		{							/* ************ Eigenschaften Repetitor Container ************* */
				margin-top: 0em;
				}

main .decision-main-col-2 .property-content.t2	.property-item .property-link	{
				color: var(--xs-conf-propereties-box-text-color-1);
				text-decoration: none;
				}

main .decision-main-col-2 .property-content.t2	.property-item .property-link:hover .container	{
				border-color: var(--xs-conf-propereties-box-border-color-2);
				}

main .decision-main-col-2 .property-content.t2 .property-item.disabled			{ opacity: 0.5; }		/* ************ deaktive Box, ausgrauen ************* */
main .decision-main-col-2 .property-content.t2 .property-item.disabled	.col-2	{ opacity: 0.5; }


main .decision-main-col-2 .property-content.t2	.property-item .container	{
				display: flex!important;
				flex-direction: row;
				align-items: stretch;
				line-height: 1.2em;
				margin-bottom: 0.75em;
				width: 100%;
				min-height: 90px;
				border: 1px solid var(--xs-conf-propereties-box-border-color-1);
				transition: border-color 0.5s ease;
				position: relative;
				}

main .decision-main-col-2 .property-content.t2	.property-item.selected .container	{
				border-color: 1px solid var(--xs-conf-propereties-box-border-color-2);
			/*	background-color: var(--xs-conf-propereties-box-background-color);		*/
				}


main .decision-main-col-2 .property-content.t2	.property-item.selected .container .configure-state-2	{
				display: block;
				top: -7px;
				right: -7px;
				}

main .decision-main-col-2 .property-content.t2	.property-item .container .col-1	{
				flex: 0 0 110px;
				position: relative;
				overflow: hidden;
				}

main .decision-main-col-2 .property-content.t2	.property-item .container .col-1 .pic-container	{
				display: block;
				width: 100%;
				height: 100%;
				background-color: #ffffff;
				}

main .decision-main-col-2 .property-content.t2	.property-item .container .col-1 .pic-container.pic-fit-contain	{
				background-color: #eeeeee;
				}



main .decision-main-col-2 .property-content.t2	.property-item .container .col-2	{
				flex: 1 1 auto;
				padding: 0.5em 0.75em 0.75em 0.75em;
				}


main .decision-main-col-2 .property-content.t2	.property-item .container .col-1 .property-picture	{
				display:block;				/* ******* entfernt den kleinen Spalt unter dem Bild ******* */
				width: 100%;
				height: 100%;
				object-fit: cover;
				position: absolute;
				top: 0;
				left: 0;
				transition: transform 0.5s ease;
				mix-blend-mode: multiply;
				}


main .decision-main-col-2 .property-content.t2	.property-item .container .col-1 .pic-fit-cover .property-picture	{
				object-fit: cover;
				padding: 0em;
				}

main .decision-main-col-2 .property-content.t2	.property-item .container .col-1 .pic-fit-contain .property-picture	{
				object-fit: contain;
				padding: 0.85em;
				}


main .decision-main-col-2 .property-content.t2	.property-item .property-link:hover .container .col-1 .property-picture	{
				transform: scale(1.2);
				}

main .decision-main-col-2 .property-content.t2	.property-item .container .col-2 .headline	{
				font-weight: bold;
				}

main .decision-main-col-2 .property-content.t2	.property-item .container .col-2 .text	{
				padding-top: 0.4em;
				}



/*  ***************** Configuration Template S3 ****************** */


main .decision-main-col-2 .property-content.t3		{							/* ************ Eigenschaften Repetitor Container ************* */
				margin-bottom: 1.0em;
				padding: 0.75em;
				background-color: #eeeeee;
				}

main .decision-main-col-2 .property-content.t3	.property-item .property-link	{
				color: var(--xs-conf-propereties-box-text-color-1);
				text-decoration: none;
				}


main .decision-main-col-2 .property-content.t3	{
				display: flex!important;
				flex-direction: row!important;
				flex-wrap: wrap;
				align-items: flex-start;
				align-items: stretch;
				gap: var(--xs-conf-propereties-box-gap);
				max-width: 100%;
				}


main .decision-main-col-2 .property-content.t3	.property-item	{
				flex: 0 0 var(--xs-grid-prop-cols-3);		/* ************ legt den default Grid fest ************* */
				min-width: 0;							/* ************ wichtig: umbricht den Textinhalt, auch wenn dieser eigentlich nicht umbrechen kann ************* */
			/*	overflow: hidden;						************ schneidet meine Konfigurationskennzeichnung ab ************* */
				}

main .decision-main-col-2 .property-content.t3	.property-item.grid-1	{ flex-basis: var(--xs-grid-prop-cols-1); }
main .decision-main-col-2 .property-content.t3	.property-item.grid-2	{ flex-basis: var(--xs-grid-prop-cols-2); }
main .decision-main-col-2 .property-content.t3	.property-item.grid-3	{ flex-basis: var(--xs-grid-prop-cols-3); }
main .decision-main-col-2 .property-content.t3	.property-item.grid-4	{ flex-basis: var(--xs-grid-prop-cols-4); }
main .decision-main-col-2 .property-content.t3	.property-item.grid-5	{ flex-basis: var(--xs-grid-prop-cols-5); }


main .decision-main-col-2 .property-content.t3	.property-item.disabled	{ opacity: 0.5; }			/* ************ deaktive Box, ausgrauen ************* */
main .decision-main-col-2 .property-content.t3	.property-item.disabled .headline	{ opacity: 0.5; }	/* ************ deaktive Box, ausgrauen ************* */


main .decision-main-col-2 .property-content.t3	.property-item .complete-picture-container	{
			/*	overflow: hidden;         ************ entfernt************* */
				padding: 0.4em;
				border: 1px solid transparent;
				background-color: #ffffff;
				position: relative;
				transition: border-color 0.5s ease;
				}


main .decision-main-col-2 .property-content.t3	.property-item.selected .complete-picture-container	{
				border-color: var(--xs-conf-propereties-box-border-color-2);
				}


main .decision-main-col-2 .property-content.t3	.property-item .picture-container	{
				flex: 0 1 100%;
				position: relative;
				width: 100%;
				aspect-ratio: var(--xs-pic-format-1-1);	/* ************ legt das standard Bildformat fest ************* */
				overflow: hidden;
				}

main .decision-main-col-2 .property-content.t3	.property-item .picture-container.pic-format-1-1	{ aspect-ratio: var(--xs-pic-format-1-1); }
main .decision-main-col-2 .property-content.t3	.property-item .picture-container.pic-format-4-3	{ aspect-ratio: var(--xs-pic-format-4-3); }
main .decision-main-col-2 .property-content.t3	.property-item .picture-container.pic-format-16-9	{ aspect-ratio: var(--xs-pic-format-16-9); }
main .decision-main-col-2 .property-content.t3	.property-item .picture-container.pic-format-21-9	{ aspect-ratio: var(--xs-pic-format-21-9); }
main .decision-main-col-2 .property-content.t3	.property-item .picture-container.pic-format-3-4	{ aspect-ratio: var(--xs-pic-format-3-4); }
main .decision-main-col-2 .property-content.t3	.property-item .picture-container.pic-format-9-16	{ aspect-ratio: var(--xs-pic-format-9-16); }


main .decision-main-col-2 .property-content.t3	.property-item .picture-container .property-picture	{
				width: 100%;
				height: 100%;
				object-fit: cover;
				transition: transform 0.5s ease;
				position: absolute;
				}

main .decision-main-col-2 .property-content.t3	.property-item .picture-container.pic-fit-cover .property-picture	{
				object-fit: cover;
				padding: 0em;
				}

main .decision-main-col-2 .property-content.t3	.property-item .picture-container.pic-fit-contain .property-picture	{
				object-fit: contain;
				padding: 0.85em;		/* ************ legt den default Abstand fest ************* */
				}

main .decision-main-col-2 .property-content.t3	.property-item.grid-1 .picture-container.pic-fit-contain .property-picture	{ padding: 3.0em; }
main .decision-main-col-2 .property-content.t3	.property-item.grid-2 .picture-container.pic-fit-contain .property-picture	{ padding: 1.5em; }
main .decision-main-col-2 .property-content.t3	.property-item.grid-3 .picture-container.pic-fit-contain .property-picture	{ padding: 0.85em; }
main .decision-main-col-2 .property-content.t3	.property-item.grid-4 .picture-container.pic-fit-contain .property-picture	{ padding: 0.5em; }
main .decision-main-col-2 .property-content.t3	.property-item.grid-5 .picture-container.pic-fit-contain .property-picture	{ padding: 0.35em; }








main .decision-main-col-2 .property-content.t3	.property-item.selected .configure-state-2	{
				display: block;
				top: -7px;
				right: -7px;
				}

main .decision-main-col-2 .property-content.t3	.property-item .property-link:hover .picture-container .property-picture	{
				transform: scale(1.2);
				}

main .decision-main-col-2 .property-content.t3	.property-item .property-link:hover .complete-picture-container	{
				border-color: var(--xs-conf-propereties-box-border-color-2);
				}

main .decision-main-col-2 .property-content.t3	.property-item .headline	{
				width: 100%;
				line-height: 1.2em;
				text-align: center;
				font-weight: bold;
				padding-top: 0.5em;
				}




/*  ***************** Configuration Template S4 (überlädt S3)  ****************** */



main .decision-main-col-2 .temp-embedding-t4 .property-content.t3 .property-item .complete-picture-container	{
				border-radius: 50%;
				}

main .decision-main-col-2 .temp-embedding-t4 .property-content.t3 .property-item .picture-container	{
				aspect-ratio: 1 / 1;
				border-radius: 50%;
				}

main .decision-main-col-2 .temp-embedding-t4 .property-content.t3 .property-item.selected .configure-state-2	{ display: block; top: 3px; right: 3px; }		/* ************ setzt bei default den richtigen Wert (wenn default 3-spaltig)  ************* */

main .decision-main-col-2 .temp-embedding-t4 .property-content.t3 .property-item.grid-1.selected .configure-state-2	{ display: block; top: 40px; right: 40px; }
main .decision-main-col-2 .temp-embedding-t4 .property-content.t3 .property-item.grid-2.selected .configure-state-2	{ display: block; top: 10px; right: 10px; }
main .decision-main-col-2 .temp-embedding-t4 .property-content.t3 .property-item.grid-3.selected .configure-state-2	{ display: block; top: 3px; right: 3px; }
main .decision-main-col-2 .temp-embedding-t4 .property-content.t3 .property-item.grid-4.selected .configure-state-2	{ display: block; top: -2px; right: -2px; }
main .decision-main-col-2 .temp-embedding-t4 .property-content.t3 .property-item.grid-5.selected .configure-state-2	{ display: block; top: -4px; right: -4px; }




/*  ***************** Configuration Template S5 ****************** */


main .decision-main-col-2 .property-content.t5		{							/* ************ Eigenschaften Repetitor Container ************* */
				margin-bottom: 1.0em;
				}

main .decision-main-col-2 .property-content.t5	.property-item .property-link	{
				display: block;
				height: 100%;
				color: var(--xs-conf-propereties-box-text-color-1);
				text-decoration: none;
				}

main .decision-main-col-2 .property-content.t5	{
				display: flex!important;
				flex-direction: row!important;
				flex-wrap: wrap;
				align-items: flex-start;
				align-items: stretch;
				gap: var(--xs-conf-propereties-box-gap);
				max-width: 100%;
				}

main .decision-main-col-2 .property-content.t5	.property-item	{
				flex: 0 0 var(--xs-grid-prop-cols-2);		/* ************ legt den default Grid fest ************* */
				min-width: 0;							/* ************ wichtig: umbricht den Textinhalt, auch wenn dieser eigentlich nicht umbrechen kann ************* */
				height: auto;
				}

main .decision-main-col-2 .property-content.t5	.property-item.grid-1	{ flex-basis: var(--xs-grid-prop-cols-1); }
main .decision-main-col-2 .property-content.t5	.property-item.grid-2	{ flex-basis: var(--xs-grid-prop-cols-2); }
main .decision-main-col-2 .property-content.t5	.property-item.grid-3	{ flex-basis: var(--xs-grid-prop-cols-3); }
main .decision-main-col-2 .property-content.t5	.property-item.grid-4	{ flex-basis: var(--xs-grid-prop-cols-4); }
main .decision-main-col-2 .property-content.t5	.property-item.grid-5	{ flex-basis: var(--xs-grid-prop-cols-5); }

main .decision-main-col-2 .property-content.t5	.property-item.disabled	{ opacity: 0.5; }			/* ************ deaktive Box, ausgrauen ************* */
main .decision-main-col-2 .property-content.t5	.property-item.disabled .row2,
main .decision-main-col-2 .property-content.t5	.property-item.disabled .row3 { opacity: 0.5; }		/* ************ deaktive Box, ausgrauen ************* */


main .decision-main-col-2 .property-content.t5	.property-item .container	{
				display: flex!important;
				flex-direction: column!important;
				height: 100%;
				border: 1px solid var(--xs-conf-propereties-box-border-color-1);
				position: relative;
				transition: border-color 0.5s ease;
				}

main .decision-main-col-2 .property-content.t5 .property-item.selected .container .configure-state-2		{
				display: block;
				top: -8px;
				right: -8px;
				}

main .decision-main-col-2 .property-content.t5	.property-item .container .row-1	{
				flex: 0 0 auto;
				}

main .decision-main-col-2 .property-content.t5	.property-item .container .row-2	{
				flex: 1 1 auto;
				}

main .decision-main-col-2 .property-content.t5	.property-item .container .row-3	{
				flex: 0 0 auto;
				}

main .decision-main-col-2 .property-content.t5	.property-item .picture-container		{
				flex: 0 1 100%;
				position: relative;
				width: 100%;
				aspect-ratio: var(--xs-pic-format-16-9);	/* ************ legt das standard Bildformat fest ************* */
				overflow: hidden;
				}

main .decision-main-col-2 .property-content.t5	.property-item .picture-container .property-picture		{
				width: 100%;
				height: 100%;
				object-fit: cover;
				transition: transform 0.5s ease;
				position: absolute;
				background-color: #ffffff;
				}

main .decision-main-col-2 .property-content.t5	.property-item .picture-container.pic-fit-cover .property-picture		{
				object-fit: cover;
				padding: 0em;
				}

main .decision-main-col-2 .property-content.t5	.property-item .picture-container.pic-fit-contain .property-picture		{
				object-fit: contain;
				padding: 2em;
			/*	mix-blend-mode: multiply;		*/
				}

main .decision-main-col-2 .property-content.t5	.property-item.grid-1 .picture-container.pic-fit-contain .property-picture		{ padding: 3.0em; }
main .decision-main-col-2 .property-content.t5	.property-item.grid-2 .picture-container.pic-fit-contain .property-picture		{ padding: 1.75em; }
main .decision-main-col-2 .property-content.t5	.property-item.grid-3 .picture-container.pic-fit-contain .property-picture		{ padding: 1.25em; }
main .decision-main-col-2 .property-content.t5	.property-item.grid-4 .picture-container.pic-fit-contain .property-picture		{ padding: 0.85em; }
main .decision-main-col-2 .property-content.t5	.property-item.grid-5 .picture-container.pic-fit-contain .property-picture		{ padding: 0.75em; }



main .decision-main-col-2 .property-content.t5	.property-item .picture-container.pic-format-1-1	{ aspect-ratio: var(--xs-pic-format-1-1); }
main .decision-main-col-2 .property-content.t5	.property-item .picture-container.pic-format-4-3	{ aspect-ratio: var(--xs-pic-format-4-3); }
main .decision-main-col-2 .property-content.t5	.property-item .picture-container.pic-format-16-9	{ aspect-ratio: var(--xs-pic-format-16-9); }
main .decision-main-col-2 .property-content.t5	.property-item .picture-container.pic-format-21-9	{ aspect-ratio: var(--xs-pic-format-21-9); }
main .decision-main-col-2 .property-content.t5	.property-item .picture-container.pic-format-3-4	{ aspect-ratio: var(--xs-pic-format-3-4); }
main .decision-main-col-2 .property-content.t5	.property-item .picture-container.pic-format-9-16	{ aspect-ratio: var(--xs-pic-format-9-16); }


main .decision-main-col-2 .property-content.t5	.property-item .property-link:hover .picture-container .property-picture	{
				transform: scale(1.2);
				}

main .decision-main-col-2 .property-content.t5	.property-item .property-link:hover .container	{
				border-color: var(--xs-conf-propereties-box-border-color-2);
				}

main .decision-main-col-2 .property-content.t5	.property-item.selected .container	{
				border-color: var(--xs-conf-propereties-box-border-color-2);
			/*	background-color: var(--xs-conf-propereties-box-background-color);	*/
				}

main .decision-main-col-2 .property-content.t5	.property-item .headline-container	{
				width: 100%;
				line-height: 1.2em;
				font-weight: bold;
				padding: 1.0em 0.75em 0.75em 0.75em;
				}

main .decision-main-col-2 .property-content.t5	.property-item .headline-container .headline	{
				display: block;
				position: relative;
				}

main .decision-main-col-2 .property-content.t5	.property-item .headline-container.radiobutton .headline	{
				padding-left: 25px;
				}

main .decision-main-col-2 .property-content.t5	.property-item .headline-container.radiobutton .headline::before	{
				content:"";
				display: block;
				width: 20px;
				height: 20px;
				background-position: center;
				background-image: url(/xs_db/bild_db/website/configurator-/XS/www/_css/radio-btn-unselected.svg);
				opacity: 0.9;
				position: absolute;
				top: 0px;
				left: 0px;
				}

main .decision-main-col-2 .property-content.t5	.property-item.selected .headline-container.radiobutton .headline::before	{
				background-image: url(/xs_db/bild_db/website/configurator-/XS/www/_css/radio-btn-selected.svg);
				}

main .decision-main-col-2 .property-content.t5	.property-item .text-container	{
				width: 100%;
				line-height: 1.2em;
				padding: 0em 0.75em 0.75em 0.75em;
				}





/*  ***************** Configuration Sidebar Template S6 / Optional Article ****************** */


.article-sidebar__image-container	{
				position: relative;
				width: 100%;
				aspect-ratio: var(--xs-pic-format-1-1);	/* ************ legt das standard Bildformat fest ************* */
				overflow: hidden;
				margin-bottom: 0.75em;
				}

.article-sidebar__image-container.pic-format-1-1	{ aspect-ratio: var(--xs-pic-format-1-1); }
.article-sidebar__image-container.pic-format-4-3	{ aspect-ratio: var(--xs-pic-format-4-3); }
.article-sidebar__image-container.pic-format-16-9	{ aspect-ratio: var(--xs-pic-format-16-9); }
.article-sidebar__image-container.pic-format-21-9	{ aspect-ratio: var(--xs-pic-format-21-9); }
.article-sidebar__image-container.pic-format-3-4	{ aspect-ratio: var(--xs-pic-format-3-4); }
.article-sidebar__image-container.pic-format-9-16	{ aspect-ratio: var(--xs-pic-format-9-16); }


.article-sidebar__image	{
				width: 100%;
				height: 100%;
				object-fit: cover;
				position: absolute;
				}


.article-sidebar__btn--next	{
				-webkit-appearance: none;
				appearance: none;
				cursor: pointer;
				display: block;
				min-width: 175px;
				padding: 0.5em 1.5em 0.5em 1.5em;
				margin-top: 1.5em;
				margin-bottom: 1.0em;
				background-color: #ffffff;
				border: 1px solid var(--xs-conf-propereties-box-border-color-2);
				color: var(--xs-conf-propereties-box-text-color-1);
				transition: border-color 0.5s ease, color 0.5s ease, background-color 0.5s ease;
				font-weight: bold;
				}

.article-sidebar__btn--next:hover	{
				color: #ffffff;
				background-color: var(--xs-conf-propereties-box-border-color-2);
				}


/*  ***************** Configuration Content Template C2 / Optional Article ****************** */


.container-article-list	{
				}

.article-list		{ 	
				display: flex!important;
				flex-direction: row!important;
				flex-wrap: wrap;
				align-items: flex-start;
				align-items: stretch;
				gap: var(--xs-conf-propereties-box-gap);
				max-width: 100%;
				}

.article-list .article	{ 	
			/*	flex: 0 0 var(--xs-grid-prop-cols-4);		 ************ legt den default Grid fest, Werte siehe Breakpoints ************* */
				min-width: 0;							/* ************ wichtig: umbricht den Textinhalt, auch wenn dieser eigentlich nicht umbrechen kann ************* */
				height: auto;
				overflow: hidden;
				min-height: 350px;
				}

.article__link		{ 	
				display: block;
				height: 100%;
				color: var(--xs-conf-propereties-box-text-color-1);
				text-decoration: none;
				}

.article__container	{ 	
				height: 100%;
				border: solid 1px var(--xs-conf-propereties-box-border-color-1);
				transition: border-color 0.5s ease;
				display: flex!important;
				flex-direction: column;
				}

.article__container:hover	{ 	
				border-color: var(--xs-conf-propereties-box-border-color-2);
				color: var(--xs-conf-propereties-box-text-color-1);
				}

.article__image	{ 
				flex: 0 1 auto;							/* ************ Defaults: flex-grow: 0, flex-shrink: 1, flex-basis: auto, könnte reduziert werden ************* */
				position: relative;
				width: 100%;
				aspect-ratio: var(--xs-pic-format-4-3);	/* ************ legt das standard Bildformat fest ************* */
				overflow: hidden;
				position: relative;
				background-color: #eeeeee;
				}

.article__badge	{ 
				position: absolute;;
				display: inline-block;
				top: 0;
				left: 0;
				padding: 0.2em 1.0em 0.2em 1.0em;
				margin: 1em;
				background-color: var(--xs-main-font-color-2);
				color: #ffffff;
				font-weight: bold;
				font-size: 0.9em;
				}

.article__img--format-1-1		{ aspect-ratio: var(--xs-pic-format-1-1); }
.article__img--format-4-3		{ aspect-ratio: var(--xs-pic-format-4-3); }
.article__img--format-16-9		{ aspect-ratio: var(--xs-pic-format-16-9); }

.article__image .image	{
				position: absolute;
				display: block;
				width: 100%;
				height: 100%;
				object-fit: contain;
				padding: 2em;
				mix-blend-mode: multiply;
				transition: transform 0.5s ease;
				}

.article__container:hover .article__image .image	{
				transform: scale(1.15);
				}

.article__name	{ 
				flex: 0 1 auto;
				padding: 1em 1em 1em 1em;
				}

.article__name .headline {
				display: block;
				position: relative;
				margin-left: 30px;
				font-weight: bold;
				}


.article__name .headline::before	{
				content: "";
				display: block;
				position: absolute;
				width: 25px;
				height: 25px;
				top: -6px;
				left: -30px;
				background-image: url(/xs_db/bild_db/website/configurator-/XS/www/_css/checkbox-unselected.svg);
				opacity: 0.9;
				}

.article__description	{ 
				flex: 1 1 auto;
				padding: 0em 1em 1em 1em;
				}

.article__info-link	{ 
				flex: 0 1 auto;
				}


.article__link.selected .article__name .headline::before	{
				background-image: url(/xs_db/bild_db/website/configurator-/XS/www/_css/checkbox-selected.svg);
				}

.article__link.selected .article__container	{
				border-color: var(--xs-conf-propereties-box-border-color-2);
			/*	background-color: var(--xs-conf-propereties-box-background-color);      */
				}

.article__link.selected .article__image	{ 
			/*	background-color: #dddddd;      */
				}




/*  ***************** Configuration Sidebar Template  / Your Configuration ****************** */


.your-config__main-headline	{
				font-size: 1.5em;
				line-height: 1.1em;
				margin-bottom: 0.75em;
				}

.your-config__box		{
				border: 1px solid var(--xs-conf-propereties-box-border-color-2);
				background-color: #ffffff;
				}

.your-config__headline	{
				position: relative;
				font-size: 1.35em;
				line-height: 1.2em;
				padding: 0.5em 0.75em 0.5em 0.75em;
				}

.your-config__headline::after	{
				display: block;
				position: absolute;
				content: "";
				width: 16px;
				height: 16px;
				background-position: center;
				background-repeat: no-repeat;
				top: 13px;
				right: 16px;
				opacity: 0.9;
				background-image: url(/xs_db/bild_db/website/configurator-/XS/www/_css/symbol-open.svg);
				}

.your-config__toggle	{
				display: block;
				color: var(--xs-conf-propereties-box-text-color-1);
				text-decoration: none;
				transition: opacity 0.5s ease;
				}

.your-config__toggle:hover	{
				color: var(--xs-conf-propereties-box-text-color-1);
				opacity: 0.3;
				}

.your-config__toggle.closed .your-config__headline::after	{
				background-image: url(/xs_db/bild_db/website/configurator-/XS/www/_css/symbol-close.svg);
				}

.your-config__content	{
				padding: 0em 1.0em 0em 1.0em;
				}

.your-config__text	{
				padding-bottom: 1.0em;
				}

.your-config__wrapper	{
				}

.your-config__wrapper .lev-0 > .your-config__wrapper--property	{
				font-weight: bold;
				padding-bottom: 0.25em;
				}

.your-config__wrapper .lev-0 > .your-config__wrapper--step,
.your-config__wrapper .lev-0 > .your-config__wrapper--anchor	{
				display: none ;
				}

.your-config__wrapper .lev-1	{
				display: grid;
				grid-template-columns:		minmax(1%, auto)
										1fr
										minmax(1%, auto);
				column-gap: 0.5em; 
				row-gap: 0.25em;
				line-height: 1.2em;
				padding-left: 1.0em;
				padding-bottom: 1.0em;
				width: 100%;
				}

.your-config__wrapper .lev-1 .your-config__wrapper--step	{
				min-width: 0;							/* ************ wichtig: umbricht den Textinhalt, auch wenn dieser eigentlich nicht umbrechen kann ************* */
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				}

.your-config__wrapper .lev-1 .your-config__wrapper--property	{
				min-width: 0;							/* ************ wichtig: umbricht den Textinhalt, auch wenn dieser eigentlich nicht umbrechen kann ************* */
				overflow: hidden;
				text-overflow: ellipsis;
				}

.your-config__wrapper .lev-1 .your-config__wrapper--anchor	{
				min-width: 0;							/* ************ wichtig: umbricht den Textinhalt, auch wenn dieser eigentlich nicht umbrechen kann ************* */
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				}

.your-config__wrapper .your-config__wrapper--anchor a	{
				display: inline-block;
				color: var(--xs-conf-propereties-box-text-color-1);
				text-decoration: underline;
				transition: color 0.5s ease;
				}

.your-config__wrapper .your-config__wrapper--anchor a:hover	{
				color: var(--xs-conf-propereties-box-text-color-2);
				}


.your-config__button--config-reset	{
				-webkit-appearance: none;
				appearance: none;
				cursor: pointer;
				display: block;
				min-width: 175px;
				padding: 0.5em 1.5em 0.5em 1.5em;
				margin-top: 1.5em;
				margin-bottom: 1.0em;
				background-color: #ffffff;
				border: 1px solid var(--xs-conf-propereties-box-border-color-1);
				color: var(--xs-conf-propereties-box-text-color-2);
				transition: border-color 0.5s ease, color 0.5s ease, background-color 0.5s ease;
				font-weight: bold;
				}

.your-config__button--config-reset:hover	{
				color: #ffffff;
				background-color: var(--xs-conf-propereties-box-border-color-2);
				border-color: var(--xs-conf-propereties-box-border-color-2);
				}



/*  ***************** Configuration Sidebar Template  / Order Now ****************** */

.order-now__main-headline	{
				font-size: 1.5em;
				line-height: 1.1em;
				margin-top: 1.0em;
				margin-bottom: 0.75em;
				}

.order-now__box		{
				border: 1px solid var(--xs-conf-propereties-box-border-color-2);
				background-color: #ffffff;
				}

.order-now__headline	{
				position: relative;
				font-size: 1.35em;
				line-height: 1.2em;
				padding: 0.5em 0.75em 0.5em 0.75em;
				}

.order-now__headline::after	{
				display: block;
				position: absolute;
				content: "";
				width: 16px;
				height: 16px;
				background-position: center;
				background-repeat: no-repeat;
				top: 13px;
				right: 16px;
				opacity: 0.9;
				background-image: url(/xs_db/bild_db/website/configurator-/XS/www/_css/symbol-open.svg);
				}

.order-now__toggle	{
				display: block;
				color: var(--xs-conf-propereties-box-text-color-1);
				text-decoration: none;
				transition: opacity 0.5s ease;
				}

.order-now__toggle:hover	{
				color: var(--xs-conf-propereties-box-text-color-1);
				opacity: 0.3;
				}

.order-now__toggle.closed .order-now__headline::after	{
				background-image: url(/xs_db/bild_db/website/configurator-/XS/www/_css/symbol-close.svg);
				}

.order-now__content	{
				padding: 0em 1.0em 0em 1.0em;
				}

.order-now__text	{
				padding-bottom: 1.0em;
				}


.order-now__quantity	{
				width: 100%;
				display: flex;
				align-items: center;
				gap: var(--xs-conf-propereties-box-gap);
				margin-bottom: 1em;
				}

.order-now__quantity--text	{
				flex: 1 1 auto;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				font-weight: bold;
				}

.order-now__quantity--field	{
				flex: 0 0 auto;
				}

.order-now__quantity--field .quantity-field	{
				display: block;
				-webkit-appearance: none;
				appearance: none;
				width: 80px;
				border: 1px solid var(--xs-conf-propereties-box-border-color-2);
				padding: 0.3em 0.75em 0.3em 0.75em;
				font-weight: bold;
				text-align: center;
				background-color: #ffffff;
				transition: border-color 0.5s ease;
				}

.order-now__quantity--field .quantity-field:focus	{
				outline: none;
				border-color: var(--xs-conf-propereties-box-border-color-1);
				}


.order-now__buttons	{
				width: 100%;
				display: flex;
				align-items: center;
				gap: var(--xs-conf-propereties-box-gap);
				margin-top: 2.0em;
				margin-bottom: 1.0em;
				}

.order-now__button--submit	{
				flex: 1 1 0;
				min-width: 0;
				}

.order-now__button--refresh	{
				flex: 1 1 0;
				min-width: 0;
				}

.order-now__button--submit .button-submit	{
				-webkit-appearance: none;
				appearance: none;
				cursor: pointer;
				display: block;
				width: 100%;
				padding: 0.5em 0.5em 0.5em 0.5em;
				background-color: #ffffff;
				border: 1px solid var(--xs-conf-propereties-box-border-color-2);
				color: var(--xs-conf-propereties-box-text-color-1);
				transition: border-color 0.5s ease, color 0.5s ease, background-color 0.5s ease;
				font-weight: bold;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				}

.order-now__button--submit .button-submit:hover	{
				color: #ffffff;
				background-color: var(--xs-conf-propereties-box-border-color-2);
				border-color: var(--xs-conf-propereties-box-border-color-2);
				}

.order-now__button--refresh .button-refresh	{
				-webkit-appearance: none;
				appearance: none;
				cursor: pointer;
				display: block;
				width: 100%;
				padding: 0.5em 0.5em 0.5em 0.5em;
				background-color: #ffffff;
				border: 1px solid var(--xs-conf-propereties-box-border-color-1);
				color: var(--xs-conf-propereties-box-text-color-2);
				transition: border-color 0.5s ease, color 0.5s ease, background-color 0.5s ease;
				font-weight: bold;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;

				}

.order-now__button--refresh .button-refresh:hover	{
				color: #ffffff;
				background-color: var(--xs-conf-propereties-box-border-color-2);
				border-color: var(--xs-conf-propereties-box-border-color-2);
				}













/*  ***************** Configuration Main-Content Template  / Shopping Basket List ****************** */


.shopping-basket	{
				border: 1px solid var(--xs-conf-propereties-box-border-color-2);
				padding: 1.0em;
			/*	margin-right: 1.5em; 		 ************ Wert siehe Breakpoints ************* */
				margin-bottom: 1.5em;
				}

.shopping-basket__headline	{
				font-size: 1.5em;
				line-height: 1.2em;
				margin-bottom: 0.75em;
				}

.shopping-basket__text	{
				margin-bottom: 0.75em;
				}

.shopping-basket__property-group--name		{
				font-size: 1.35em;
				line-height: 1.2em;
				margin-bottom: 0.75em;
				}

.shopping-basket__article-list		{
				font-weight: bold;
				}

.shopping-basket__article-list .type-required		{
				font-weight: normal;
				}

.shopping-basket__article-list--row		{
				display: flex;
				gap: 1.5em;
				width: 100%;
				margin-bottom: 1em;
				}

.shopping-basket__article-list--col-1	{
				flex: 0 0 auto;
				padding-left: 2em;
				}

.shopping-basket__article-list--col-2	{
				flex: 1 1 0%;
				}

.shopping-basket__article-list--picture	{
				position: relative;
				aspect-ratio: 1 / 1;
				width: 75px;
				overflow: hidden;
				}

.shopping-basket__article-list--picture img	{
				display: block;
				position: absolute;
				width: 100%;
				height: 100%;
				object-fit: contain;
				padding: 0em;
				}

.shopping-basket__article-list--quantity	{
				}

.shopping-basket__article-list--quantity.type-required::before	{
				content: "*";
				}

.shopping-basket__article-list--article-number	{
				}

.shopping-basket__article-list--article-name	{
				}



/*          ******************************** inaktiv *************************************


.shopping-basket__article-list--article-marking.type-required::after	{
				content: "*";
				display: block;
				text-align: right;
				}

.shopping-basket__article-list		{
			*	display: grid; 		*
				width: 100%;
			*	grid-template-columns:		minmax(6%, auto)		***** die Breite der Spalten wird bei den Breakpoints definiert *****
										minmax(12%, auto)
										1fr
										minmax(1%, auto);		*
				column-gap: var(--xs-conf-propereties-box-gap); 
				row-gap: 0.25em;
				line-height: 1.2em;
				padding-left: 1.25em;
				padding-bottom: 1.0em;
				font-weight: bold;
				}

.shopping-basket__article-list .type-required		{
				font-weight: normal;
				}

.shopping-basket__article-list--quantity		{
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				}

.shopping-basket__article-list--article-number		{
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				}

.shopping-basket__article-list--article-name		{
				white-space: normal;
				overflow: hidden;
				text-overflow: ellipsis;
				}

.shopping-basket__article-list--article-marking		{
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				}

*/








/*  ***************** Footer ****************** */

footer .address-container	{
				display: flex!important;
				flex-direction: row!important;
				align-items: flex-start;
				align-items: stretch;
				flex-wrap: wrap;
				gap: var(--xs-grid-gab-md);
				max-width: 100%;
				padding-top: 1em;
				padding-bottom: var(--xs-grid-gab-md);
				}

footer .address-container .col-1-container	{
				flex: 0 0 var(--xs-grid-cols-1);
				overflow: hidden;
				line-height: 0px;
				}

footer .address-container .col-2-container	{
				flex: 0 0 var(--xs-grid-cols-1);
				overflow: hidden;
				}

footer .address-container .col-3-container	{
				flex: 0 0 var(--xs-grid-cols-1);
				overflow: hidden;
				}

footer .address-container .col-4-container	{
				flex: 0 0 var(--xs-grid-cols-1);
				overflow: hidden;
				}

footer .address-container .col-5-container	{
				flex: 0 0 var(--xs-grid-cols-1);
				overflow: hidden;
				}

footer .address-container				{ color: var(--xs-footer-font-color); }
footer .address-container .headline		{ color: var(--xs-footer-font-color-2);}

footer .address-container .logo		{
				display: inline-block;
				background-position: center; 
				background-repeat: no-repeat;
				background-image: url(/xs_db/bild_db/website/configurator-/XS/www/_css/kipp-logo.svg);
				width: 70px;
				height: 50px;
				}

footer .social-container {
				display: flex!important;
				flex-direction: row!important;
				justify-content: center;
				gap: 0.75em;
				width: 100%;
				margin-top: 0.25em;
				}

footer .social-container	a {
				flex: 0 0 auto;
				display: block;
				}

footer .social-container a:hover	{
				opacity: var(--xs-footer-font-color-over);
				transition: opacity 0.5s ease;
				}

footer .social-container	span {
				display: block;
				width: 32px;
				height: 32px;
				background-position: center; 
				background-repeat: no-repeat;
				}

footer .social-container	.linkedin		{ background-image: url(/xs_db/bild_db/website/configurator-/XS/www/_css/social-media-linkedin.svg); }
footer .social-container	.youtube		{ background-image: url(/xs_db/bild_db/website/configurator-/XS/www/_css/social-media-youtube.svg); }
footer .social-container	.facebook	{ background-image: url(/xs_db/bild_db/website/configurator-/XS/www/_css/social-media-facebook.svg); }
footer .social-container	.instagram	{ background-image: url(/xs_db/bild_db/website/configurator-/XS/www/_css/social-media-instagram.svg); }


footer .imprint-container {
				border-top: 1px solid var(--xs-footer-font-color-3);
				display: flex!important;
				flex-direction: row!important;
				justify-content: flex-start;
				gap: var(--xs-grid-gab-md);
				justify-content: space-between;
				white-space: nowrap;
				overflow: hidden;
				margin-bottom: 1em;
				padding-top: 1em;
				}

footer .imprint-container .col-1-container {
				flex: 0 0 auto;
				text-align: center; 
				}

footer .imprint-container .col-2-container {
				flex: 0 0 auto;
				text-align: center; 
				}

footer .imprint-container		{ color: var(--xs-footer-font-color); }

footer .imprint-container .col-2-container .navi {
				display: flex!important;
				flex-direction: row!important;
				justify-content: flex-start;
				justify-content: space-between;
				white-space: nowrap;
				overflow: hidden;
				list-style: none;
				}


footer .imprint-container .col-2-container .navi li {
				flex: 0 0 auto;
				}

footer .imprint-container .col-2-container .navi li:not(:last-child)::after {
				content: ""; display: inline-block;
				border-right: solid 1px var(--xs-footer-font-color);
				padding-right: 0.3em; 
				margin-right: 0.5em;
				height: 0.75em;
				}

footer .imprint-container .col-2-container .navi a { 
				display: inline-block;
				text-decoration: none;
				color: var(--xs-header-font-color);
				}

footer .imprint-container .col-2-container .navi a:hover { 
				opacity: var(--xs-footer-font-color-over); transition: opacity 0.5s ease;
				}










/*  ***************** Swiper Slider ****************** */



.decision-main-col-1 .property-content__container {
				padding-bottom: 1.5em;
				background-color: rgba(255, 255, 255, 0.85);
				backdrop-filter: blur(5px);
				}


.decision-main-col-1 .property-content {
		/*		margin-bottom: 1.5em;	*/
				position: relative;
				aspect-ratio: 2500 / 1600;
				background-color: #ffffff;
				}

.decision-main-col-1 .property-content {
				h: relative;
				aspect-ratio: 2500 / 1600;
				background-color: #ffffff;
				}







.decision-main-col-1 {
				position: sticky;
				top: calc((var(--xs-header-height) + var(--xs-conf-navi-path-height)));
				z-index: 100;
				}


.swiper			{
				width: 100%;
				height: 100%;
				position: absolute!important;
				}

.swiper-slide		{
				}


.swiper-slide img	{
				display: block;
				width: 100%;
				height: 100%;
				object-fit: cover;
				}


.swiper-button-prev {
				background-color: rgba(0, 0, 0, 0.4);
				width: 32px!important;
				height: 32px!important;
				left: var(--swiper-navigation-sides-offset,10px)!important;
				}


.swiper-button-next {
				background-color: rgba(0, 0, 0, 0.4);
				width: 32px!important;
				height: 32px!important;
				right: var(--swiper-navigation-sides-offset,10px)!important;
				}


.swiper-navigation-icon {
				width: 50%!important;
				height: 50%!important;
				color: #ffffff;
				}

.swiper-pagination-bullet-active {
				background-color: #111111!important;
				}




/*  ***************** Configurator Spinner ****************** */

/*
#ajaxspinner {
  background: #333;
  color: #fff;
  float: left;
  width: 100px;
  height: 100px;
  margin: 0 20px 20px 0;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-left: -50px;
  margin-top: -50px;
  display: none;
  z-index: 10000;
}

*/



#ajaxspinner		{									/* Das Overlay, das Klicks abfängt */
				position: fixed;
				top: 0;
				left: 0;
				width: 100vw;
				height: 100vh;
			/*	background: rgba(255, 255, 255, 0.7);	*/	/* Heller, halbtransparenter Hintergrund */
				z-index: 9999;
				display: flex;
				justify-content: center;
				align-items: center;
				}

.configurator__spinner	{
				width: 60px;
				height: 60px;
				border: 5px solid rgba(0, 0, 0, 0.1);		/* Leichter grauer Ring */
				border-left-color: #007bff;				/* Blaue Akzentfarbe - passe diese an dein Design an! */
				border-radius: 50%;
				animation: spin 1s linear infinite;			/* Sanfte, endlose Rotation */
				}

@keyframes spin	{
				0% { transform: rotate(0deg); }
				100% { transform: rotate(360deg); }
				}



/*  ***************** < 576 (Default) ****************** */

:root	{
		--xs-header-height:				40px;
		--xs-breakpoint-gab:				1em;		/* Abstand gilt je Seite */
		--xs-conf-propereties-box-width:	100%;
		--xs-conf-step-view-height:			0px;
		}


:root .imbedded-shop	{
		--xs-header-height:				0px;
		}



header .header-container,
nav .nav-path-container,
main .main-container,
footer .footer-container					{ max-width: 1600px; padding-left: var(--xs-breakpoint-gab); padding-right: var(--xs-breakpoint-gab); }

header .header-container				{ transition: height 0.5s ease; }

header .nav-container .mainnavi			{ display: none; }
header .nav-container .menu-link			{ display: inline-block; }
header .language-container .globe		{ display: inline-block; }
header .language-container .language		{ display: none; }

header .logo-container					{ order: 2; flex: 0 1 auto; padding-right: 0; }
header .nav-container					{ order: 1; flex: 0 0 auto; padding-right: 2em; }
header .language-container				{ order: 3; flex: 0 0 auto; }
header .logo-container .logo				{ width: 45px; height: 36px; }


.start-configuration__container			{
									margin-left: 0px;
									margin-top: 0px;
									width: 100%;
									padding-left: 1em;
									padding-right: 1em;
									left: 0;
									top: calc(var(--xs-header-height) + var(--xs-conf-navi-path-height));
									}

main .decision-main:first-child .decision-main-col-2.initial-start	{ --xs-conf-step-view-height: auto; }

.config__step-view					{ display: none; }


main .project-content-container							{ flex-direction: column!important; }
main .project-content-container .project-navi-container		{ flex-basis: 250px; }
main .project-wrapper-container .wrapper-item 				{ flex-basis: var(--xs-grid-cols-1); }




main .decision-main						{ flex-direction: column; }
main .decision-main .decision-main-col-1		{ flex: 1 1 auto; width: 100%; }
main .decision-main .decision-main-col-2		{ flex: 1 1 auto; width: 100%; }


.decision-main-col-1 .property-content		{ margin-right: 0em; }
.article-list .article							{ flex: 0 0 var(--xs-grid-prop-cols-1); }

.decision-main-col-1.temp__basket,
.decision-main-col-1.temp__optional-article	{ position: static; }






/* ************************** inaktiv ******************************

.shopping-basket							{ margin-right: 0em; }

.shopping-basket__article-list				{ display: block; }

.shopping-basket__article-list--row			{
				display: grid;				* Zurück zum lokalen Grid pro Karte *
				grid-template-columns:		minmax(15%, auto)
     										minmax(20%, auto)
										1fr;
				grid-template-areas:		"quantity		number		marking"
										"name		name		name";
				column-gap: var(--xs-conf-propereties-box-gap);
				row-gap: 0.25em;
				}

.shopping-basket__article-list--quantity		{ grid-area: quantity; }
.shopping-basket__article-list--article-number	{ grid-area: number; }
.shopping-basket__article-list--article-name	{ grid-area: name; }
.shopping-basket__article-list--article-marking	{ grid-area: marking; }	

*/


footer .address-container .col-1-container		{ flex-basis: var(--xs-grid-cols-1); text-align: center; }
footer .address-container .col-2-container		{ flex-basis: var(--xs-grid-cols-1); text-align: center; }
footer .address-container .col-3-container		{ flex-basis: var(--xs-grid-cols-1); text-align: center; }
footer .address-container .col-4-container		{ flex-basis: var(--xs-grid-cols-1); text-align: center; }
footer .address-container .col-5-container		{ flex-basis: var(--xs-grid-cols-1); text-align: center; }

footer .imprint-container					{ flex-direction: column!important; }
footer .imprint-container .col-1-container		{ flex-basis: var(--xs-grid-cols-1); }
footer .imprint-container .col-2-container		{ flex-basis: var(--xs-grid-cols-1); }
footer .imprint-container .col-2-container .navi						{ flex-direction: column!important; }
footer .imprint-container .col-2-container .navi li					{ flex-basis: var(--xs-grid-cols-1); }
footer .imprint-container .col-2-container .navi li:not(:last-child)::after	{ display: none; }






/*  ***************** ≥ 576 ****************** */
@media (min-width: 576px) {

:root	{
		}





main .project-content-container							{ flex-direction: row!important; }




.start-configuration__bttn					{ min-width: 230px; }


.article-list .article							{ flex: 0 0 var(--xs-grid-prop-cols-2); }	


footer .address-container .col-1-container		{ text-align: left; }
footer .address-container .col-2-container		{ flex-basis: var(--xs-grid-cols-2); text-align: left; }
footer .address-container .col-3-container		{ flex-basis: var(--xs-grid-cols-2); text-align: left; }
footer .address-container .col-4-container		{ flex-basis: var(--xs-grid-cols-2); text-align: left; }
footer .address-container .col-5-container		{ flex-basis: var(--xs-grid-cols-2); text-align: left; }

footer .social-container						{ justify-content: flex-start; }









}
/*  ***************** ≥ 786 ****************** */
@media (min-width: 786px) {


:root	{
		--xs-header-height:				95px;
		--xs-breakpoint-gab:				1.5em;		/* Abstand gilt je Seite */
		--xs-conf-propereties-box-width:	350px;
		--xs-conf-step-view-height:			70px;
		}

:root .imbedded-shop	{
		--xs-header-height:				0px;
		}


header .header-container,
nav .nav-path-container,
main .main-container,
footer .footer-container					{ max-width: 1600px; }


header .nav-container .mainnavi			{ display: flex;	}
header .nav-container .menu-link			{ display: none; }
header .language-container .language		{ display: inline-block; }
header .logo-container					{ order: 1; flex: 0 0 auto; padding-right: 4em; }
header .nav-container					{ order: 2; flex: 1 1 auto; padding-right: 0; }
header .language-container				{ order: 3; flex: 0 0 auto; }
header .logo-container .logo				{ width: 80px; height: 58px; }




.start-configuration__container			{
									margin-left: calc(var(--xs-conf-propereties-box-padding) * -1);
									margin-top: calc((var(--xs-conf-propereties-box-padding) + var(--xs-conf-step-view-height)) * -1);
									width: var(--xs-conf-propereties-box-width);
									padding-right: 0px;
									padding-left: 0px;
									left: auto;
									top: auto;
									}
main .decision-main:first-child .decision-main-col-2.initial-start	{ --xs-conf-step-view-height: 300px; }



.config__step-view					{ display: block; }



main .project-content-container .project-navi-container		{ flex-basis: 250px; }
main .project-wrapper-container .wrapper-item 	{ flex-basis: var(--xs-grid-cols-2); }






main .decision-main						{ flex-direction: row; }
main .decision-main .decision-main-col-1		{ flex: 1 1 auto; width: auto; }
main .decision-main .decision-main-col-2		{ flex: 0 0 var(--xs-conf-propereties-box-width); width: auto; }

.decision-main-col-1.temp__basket,
.decision-main-col-1.temp__optional-article	{ position: sticky; }


.decision-main-col-1 .property-content		{ margin-right: 1.5em; }
.article-list .article							{ flex: 0 0 var(--xs-grid-prop-cols-2); }


.shopping-basket							{ margin-right: 1.5em; }




footer .imprint-container					{ flex-direction: row!important; }
footer .imprint-container .col-1-container		{ flex-basis: auto; text-align: left; }
footer .imprint-container .col-2-container		{ flex-basis: auto; }
footer .imprint-container .col-2-container .navi						{ flex-direction: row!important; }
footer .imprint-container .col-2-container .navi li					{ flex-basis: auto; }
footer .imprint-container .col-2-container .navi li:not(:last-child)::after	{ display: inline-block; }



}
/*  ***************** ≥ 992 ****************** */
@media (min-width: 992px) {

:root	{
		--xs-conf-propereties-box-width:	375px;

		}



main .project-content-container .project-navi-container	{ flex-basis: 300px; }
main .project-wrapper-container .wrapper-item 			{ flex-basis: var(--xs-grid-cols-3); }




.article-list .article							{ flex: 0 0 var(--xs-grid-prop-cols-3); }	




footer .address-container .col-2-container		{ flex-basis: var(--xs-grid-cols-3); }
footer .address-container .col-3-container		{ flex-basis: var(--xs-grid-cols-3); }
footer .address-container .col-4-container		{ flex-basis: var(--xs-grid-cols-3); }
footer .address-container .col-5-container		{ flex-basis: var(--xs-grid-cols-1); }







}
/*  ***************** ≥ 1200 ****************** */
@media (min-width: 1200px) {

:root	{
		--xs-conf-propereties-box-width:	400px;
		}




main .project-wrapper-container .wrapper-item 	{ flex-basis: var(--xs-grid-cols-4); }







/* ************************* inaktiv ******************************

.shopping-basket__article-list	{
				display: grid;
				grid-template-columns:		minmax(6%, auto)
     										minmax(12%, auto)
										1fr
										minmax(1%, auto);
				}

.shopping-basket__article-list--row			{ display: contents; }			* reset, „contents“ synchronisiert alle Zeilen im selben Grid *

.shopping-basket__article-list--quantity		{ grid-area: auto !important; }	* wichtig: Grid-Areas zurücksetzen! *
.shopping-basket__article-list--article-number	{ grid-area: auto !important; }
.shopping-basket__article-list--article-name	{ grid-area: auto !important; }
.shopping-basket__article-list--article-marking	{ grid-area: auto !important; }	

*/






footer .address-container .col-2-container		{ flex-basis: var(--xs-grid-cols-4); }
footer .address-container .col-3-container		{ flex-basis: var(--xs-grid-cols-4); }
footer .address-container .col-4-container		{ flex-basis: var(--xs-grid-cols-4); }
footer .address-container .col-5-container		{ flex-basis: var(--xs-grid-cols-4); }

footer .social-container						{ justify-content: flex-start; }



}
/*  ***************** ≥ 1400 ****************** */
@media (min-width: 1400px) {

:root	{
		--xs-breakpoint-gab:				2.0em;		/* Abstand gilt je Seite */
		--xs-conf-propereties-box-width:	425px;
		}



.article-list .article							{ flex: 0 0 var(--xs-grid-prop-cols-4); }	



footer .address-container .col-1-container		{ flex-basis: var(--xs-grid-cols-5); text-align: left; }
footer .address-container .col-2-container		{ flex-basis: var(--xs-grid-cols-5); }
footer .address-container .col-3-container		{ flex-basis: var(--xs-grid-cols-5); }
footer .address-container .col-4-container		{ flex-basis: var(--xs-grid-cols-5); }
footer .address-container .col-5-container		{ flex-basis: var(--xs-grid-cols-5); }






}
/*  ***************** ≥ 1600 ****************** */
@media (min-width: 1600px) {

:root	{
		--xs-breakpoint-gab:				2.0em;		/* Abstand gilt je Seite */
		--xs-conf-propereties-box-width:	450px;

		}



header .header-container,
nav .nav-path-container,
main .main-container,
footer .footer-container					{ max-width: 1600px; }


}
/* *****************  End   ******************* */






/*  XS Konfigurator norelem (überladen)  */
/*  ***************** Variables ****************** */

:root {

	--xs-header-background-color:				#ff0000;


	--xs-footer-background-color-1:				#293b89;
	--xs-footer-background-color-2:				#ff0000;




}



/* *****************  End   ******************* */