:root{
	--primaryColor: #FF7608;
	--white: #fff; 
	--softWhite: #F3F4F6;
	--lightGray: #A5A5A5;
	--gray: #606060;
	--darkGray: #343434;
	--black: #000000;
	--shadowPrimary: #FF9D4F;
	--shadowGray: #0000004D;
	--shadowLightgray: #00000029;

	--secondaryHeaderLineShadow: #0000001A;
	--secondaryHeaderLineShadowHover: #00000054;

	--sliderBarBackground: #E8EBED;

	--fontSize: 1.125em;
	--fontFamily: 'Roboto';
	--fontFamilyHighlight: 'Roboto Slab'; 
}

@media (max-width: 700px) {
	:root{
		--fontSize: 1em;
	}
}



* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
li {
	margin-left: 1.5em;
}
body{
	font-family: 'Roboto', sans-serif;
	font-size: var(--fontSize);
	transition-duration: 200ms;
	margin: 0;
	padding: 0;
}

.noscroll {
	overflow: hidden;
}

svg {
	--svgColor: #000;
	--background: #fff;
	width: auto;
	height: auto;
}

.inhalt {
	max-width: 1600px; /* Xaver wars :)*/
	margin: 0 auto;
	padding: 0 2em;
}

@media (max-width: 500px) {
	.inhalt{
		padding: 0 1em;
	}
	.layout_option_mobile_noheaderfooter .inhalt{
		padding: 0;
	}
}

/*
#######################################################
#													  #
#					    Global						  #
#													  #
#######################################################
*/

h1, h2, h3, h4, h5{
	font-family: 'Roboto Slab';
	margin-bottom: 1em;
	margin-top: 1.5em;
}

h1 {
	font-size: 2rem;
	line-height: 1.406em;
	margin: 0.875em 0;
	text-align: center;
	font-weight: 500;
}

h2 {
	font-size: 1.75rem;
	margin: 0.429em 0;
	font-weight: 400;
}

h3 {
	font-size: 1.375rem;
	font-weight: 400;
}

p a, p a:visited{
	color: var(--black);
	font-weight: 500;
}

p {
	margin: 1em 0em; line-height: 1.5em;
	font-weight: 300;
}

b {
	font-weight: 500;
}

strong {
	font-weight: 500;
}
.artikel_alle {
	display: flex;
}

@media (max-width: 500px) {
	h1{
		font-size: 1.5rem;
	}
}

.primaryButton, .ghostToPrimaryhover, .ghostButton, .linkButton, .secondaryButton {
	border: none;
	border-radius: 0.222em;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 1.389em;
	padding: 0 1.2em;
	height: 3.111em;
	cursor: pointer;
	-webkit-box-shadow: 0px 0px 0px 0px var(--softWhite); 
	box-shadow: 0px 0px 0px 0px var(--softWhite);
	transition: box-shadow 200ms, -webkit-box-shadow 200ms;
	font-size: var(--fontSize);
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none;
	text-decoration: none;
	box-sizing: border-box;
}
	.linkButton{
		padding: 0;
		color: #000;
	}
.primaryButton.checked::after, .ghostToPrimaryhover.checked::after, .ghostButton.checked::after, .linkButton.checked::after, .secondaryButton.checked::after {
	content: "";
	width: 1.2em;
	height: 1.2em;
	background-size: 1.2em;
	background-image: url('/bilder/icons/colorSeperate/check_primaryColor.svg');
}



.primaryButton img, .primaryButton svg, .ghostToPrimaryhover img, .ghostToPrimaryhover svg, .ghostButton img, .ghostButton svg, .linkButton img, .linkButton svg, .secondaryButton img, .secondaryButton svg{
	width: 1.2em;
	flex-shrink: 0;
}

.primaryButton svg, .ghostToPrimaryhover:hover svg{
	--svgColor: #fff;
}
.linkButton svg, .ghostButton svg{
	--svgColor: #000;
}

.primaryButton, .ghostToPrimaryhover:hover{
	background-color: var(--black);
	color: #fff;
}
.primaryButton, .ghostToPrimaryhover:hover svg{
	--svgColor: var(--white);
}

.primaryButton:hover, .ghostToPrimaryhover:hover{
	-webkit-box-shadow: 0px 0px 12px 0px var(--shadowPrimary); 
	box-shadow: 0px 0px 12px 0px var(--shadowPrimary);
}

.primaryButton:disabled {
	background-color: var(--lightGray);
	-webkit-box-shadow: 0px 0px 0px 0px var(--softWhite); 
	box-shadow: 0px 0px 0px 0px var(--softWhite);
}

.ghostButton, .ghostToPrimaryhover{
	background-color: var(--white);
	color: var(--black);
	border: solid 2px var(--black);
	box-sizing: border-box;
	transition: border-color 200ms ease;
	transition: background-color 200ms ease;
}

.ghostButton svg, .ghostToPrimaryhover svg{
	transition-duration: 200ms;
}

.ghostButton.inactive .ghostToPrimaryhover.inactive {
	border: solid 2px var(--lightGray);
}

.ghostButton.inactive svg , .ghostToPrimaryhover.inactive svg{
	--svgColor: var(--lightGray);
}

.ghostButton.active svg {
	--svgColor: var(--primaryColor);
}

.ghostButton:hover{
	-webkit-box-shadow: 0px 0px 12px 0px var(--shadowGray); 
	box-shadow: 0px 0px 12px 0px var(--shadowGray);
}

.ghostButton:disabled {
	border-color: var(--lightGray);
	color: var(--lightGray);
}

.linkButton{
	background-color: #0000;
}

.linkButton:hover {
	text-decoration: underline;
}

.linkButton:disabled {
	color: var(--lightGray);
}

/* am ende der buttons platziert damit die shadow werte der hovereffekte Überschrieben werden */
.primaryButton:disabled, .ghostButton:disabled, .linkButton:disabled, .secondaryButton:disabled {
	-webkit-box-shadow: 0px 0px 0px 0px var(--softWhite); 
	box-shadow: 0px 0px 0px 0px var(--softWhite);
	cursor: auto;
	text-decoration: none;
}

	@media (max-width: 500px) {
		.primaryButton, .ghostButton, .linkButton, .secondaryButton {
			gap: 0.8em;
		}
	}

label:not(.mainHeaderLine label){
	font-size: 0.9em;
}
.inputGroup{
	display: flex;
	justify-content: space-between;
}
	.wrapperInputMedium{
		width: calc(50% - 1em);
	}
	.wrapperInputSmall{
		width: calc(30% - 1em);
	}
	.wrapperInputLarge{
		width: calc(70% - 1em);
	}

input[type="text"], input[type="number"], textarea, select{
	border-radius: 4px;
	border: 1px solid black;
	width: 100%;
	padding: 0.5em 1em;
	font-size: var(--fontSize);
	margin: 0.3em 0;
	box-sizing: border-box;
}
	input[type="number"]{
		appearance: textfield;
		padding: 0.5em;
	}
	/* Chrome, Safari, Edge, Opera: pfeile bei input number ausblenden*/
	input::-webkit-outer-spin-button,
	input::-webkit-inner-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}
	input[type="checkbox"]{
		appearance: none;
		display: inline-flex;
		align-items: center;
		background-color: transparent;
		margin: 0 0.5em;
	}

	input[type="checkbox"], input[type="checkbox"]::before, input[type="checkbox"], input[type="checkbox"]::before{	/*bei ios reicht es nicht width und height auf dem before zu definieren sondern ich brauche es dort auch auf dem input*/
		width: 1.5em;
		height: 1.5em;
	}

	input[type="checkbox"]::before, input[type="radio"].checkbox::before {
		content: '';
		display: inline-block;
		width: 1.5em;
		height: 1.5em;
		border: 1px solid black;
		border-radius: 1px;
		cursor: pointer;
		box-sizing: border-box;
		
	}
	input[type="checkbox"]:checked::before , input[type="radio"].checkbox:checked::before{
		background-image: url(/bilder/icons/colorSeperate/checkboxChecked_black.svg);
		background-repeat: no-repeat;
		background-size: cover;	
	}
	input[type="radio"].checkbox{
		appearance: none;
		display: inline-flex;
		align-items: center;
	}

.switch input {
	display: none;
}
.switch .switchWrapper {
	background-color: var(--lightGray );
	border-radius: 25px;
	width: 2.75em;
	height: 1.5em;
	position: relative;
	cursor: pointer;	
	transition-duration: 300ms;
}
.switch .switchWrapper::before {
	content: "";
	position: absolute;
	display: block;
	width: 1.125em;
	height: 1.125em;
	border-radius: 50%;
	top: 50%;
	transform: translateY(-50%);
	left: 0.2em;
	transition-duration: 200ms;
	background-color: var(--white);
}
.switch input:checked ~ .switchWrapper::before {
	left: calc(100% - calc(1.125em + 0.2em));

}
.switch input:checked ~ .switchWrapper {
	background-color: var(--black);

}



  
.ergaenzungLabel{
	font-size: 0.778em;
	font-style: italic;
	text-align: right;
}	
.labelMitErgaenzungBeidseitig{
	display:flex; 
	justify-content: space-between;
	align-items: center;
}	


/************************************************************/
/*															*/
/*						Custom Select						*/
/*															*/
/************************************************************/


.custom-select {
	position: relative;
	max-width: 100%;
	color: #000;
}
	.custom-select * {
		box-sizing: border-box;
	}
	.custom-select .select-button {
		width: 100%;
		font-size: 1.15rem;
		background-color: #fff;
		color: #000;
		padding: 0.675em 1em;
		border: 1px solid #caced1;
		border-radius: 0.25rem;
		cursor: pointer;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.custom-select .selected-value {
		text-align: left;
	}

	.custom-select .arrow {
		background: url(/bilder/icons/simpleArrowUp.svg);
		width: 1em;
		height: 1em;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: 50%;
		transition: transform ease-in-out 0.3s;
		transform: rotate(180deg);
	}

	.custom-select .select-dropdown {
		position: absolute;
		list-style: none;
		width: 100%;
		box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
		background-color: #fff;
		border: 1px solid #caced1;
		border-radius: 4px;
		padding: 10px;
		margin-top: 10px;
		max-height: 300px;
		overflow-y: auto;
		transition: 0.5s ease;

		transform: scaleY(0);
		transform-origin: top;
		opacity: 0;
		visibility: hidden;
	}

	.custom-select .select-dropdown li {
		position: relative;
		cursor: pointer;
		display: flex;
		gap: 1rem;
		align-items: center;
	}



	.custom-select .select-dropdown li label {
		width: 100%;
		padding: 8px 10px;
		cursor: pointer;
		display: flex;
		gap: 1rem;
		align-items: center;
	}
		.custom-select .select-dropdown li.disabled label, .custom-select .select-dropdown li.disabled input{
			color: #EBEBE4;
			cursor: not-allowed;
		}
		
	.custom-select .select-dropdown::-webkit-scrollbar {
 		width: 7px;
	}
	.custom-select .select-dropdown::-webkit-scrollbar-track {
		background: #f1f1f1;
		border-radius: 25px;
	}

	.custom-select .select-dropdown::-webkit-scrollbar-thumb {
		background: #ccc;
		border-radius: 25px;
	}

	.custom-select .select-dropdown li:hover,
	.custom-select .select-dropdown input:checked ~ label {
		background-color: #f2f2f2;
	}

	.custom-select .select-dropdown input:focus ~ label {
		background-color: #dfdfdf;
	}

	.custom-select .select-dropdown input[type="radio"] {
		position: absolute;
		left: 0;
		opacity: 0;
	}

	/* interactivity */
	.custom-select.active .arrow {
		transform: rotate(0);
	}

	.custom-select.active .select-dropdown {
		opacity: 1;
		visibility: visible;
		transform: scaleY(1);
		z-index: 10;
	}





.infoBox {
	padding: 3em;
	padding-top: 2.125em;
	background-color: var(--softWhite);
	border-radius: 12px;
	font-family: Roboto;
	position: relative;
	overflow: hidden;
	font-size: 0.889em; /* bei der default font-size von 18px ist diese font-size 16px */
}

.infoBox.smal {
	max-width: 400px;
}

.infoBox.medium {
	max-width: 650px;
}

.infoBox.large {
	max-width: 900px;
}

.infoBox .title{
	font-size: 1.375em;
	line-height: 1.75em;
	text-transform: uppercase;
	font-weight: bold;
	margin-bottom: 0.444em;
	display: block;
}
.infoBox .title svg {
	--svgColor: var(--primaryColor);
	width: 1.5em;
}

.infoBox .cornerIcon{
	position: absolute;
	background-color: var(--primaryColor);
	top: 0;
	right: 0;
	border-bottom-left-radius: 8px;
	width: 3em;
	height: 3em;
	padding: 0.444em;
	box-sizing: border-box;
}



.infoBox .cornerIcon svg, .infoBox .cornerIcon img {
	width: 100%;
}


.shadowInfoBox {
	position: relative;
	font-size: 0.889em; /* bei der default font-size von 18px ist diese font-size 16px */
	padding-top: 2em;
	padding: 1.875em;
	border-radius: 4px;
	-webkit-box-shadow: 0px 3px 6px 0px var(--shadowLightgray); 
	box-shadow: 0px 3px 6px 0px var(--shadowLightgray);
}



.shadowInfoBox .title{
	font-size: 1.375em;
	line-height: 1.75em;
	font-weight: bold;
	margin-bottom: 0.938em;
	display: block;
}
.shadowInfoBox .footnote{
	font-size: 0.778em;
}

.shadowInfoBox .coverIcon{
	background-color: var(--softWhite);
	border-radius: 8px;
	width: 2.5em;
	height: 2.5em;
	padding: 0.5em;
	margin-bottom: 1.375em;
	order: 1;
	box-sizing: border-box;
	display: block;
}



.shadowInfoBox .coverIcon svg, .infoBox .coverIcon img {
	width: 100%;
}

.shadowInfoBox.smal {
	max-width: 400px;
}

.shadowInfoBox.medium {
	max-width: 650px;
}

.shadowInfoBox.large {
	max-width: 900px;
}

.listePfeile a, .listeHaken a, .listePunkte a {
	color: #000;
}

.listePfeile, .listeHaken a {
	list-style-type: none;
	font-size: 1.125rem;
  }
.listePunkte a {
	font-size: 1.125rem;
}
	.listePfeile>li, .listeHaken>li {
		margin: 0.7em 0;
		position: relative;
		margin-left: 1.5em;
	}
	.listePunkte>li {
		margin: 0.5em 0;
		position: relative;
		margin-left: 1.5em;
	}
	.listePfeile>li, .listeHaken>li{
		margin-left: 2em;
		list-style-type: none;
	}
		.listePfeile>li::before, .listeHaken>li::before{
			content: '';
			display: inline-block;
			background-size: contain;
			background-repeat: no-repeat;
			background-position: 50%;
			margin-right: 0.5em;
			flex-shrink: 0;
		}
		.listePfeile>li::before{
			background-image: url(/bilder/icons/colorSeperate/arrow_forward_primaryColor.svg);
			width: 1em;
			height: 1em;
			position: absolute;
			left: -1.5em;
			top: 0.05em;
		}
		.listeHaken>li::before{
			background-image: url(/bilder/icons/colorSeperate/check_primaryColor.svg);
			width: 1.5em;
			height: 1.5em;
			position: absolute;
			left: -2em;
			top: 0.05em;
		}



.tabelleWrapper{
	overflow-y: auto;
}


.tabelleSimple{
	border-collapse: collapse;
	font-family: var(--fontFamily);
	font-weight: 400;
	margin: 2em 0;
}
	.tabelleSimple th, .tabelleSimple td {
		border-right: 1px solid black;
		padding: 0.5em;
		min-width: 10em;
	}	
	.tabelleSimple th{
		border-bottom: 1px solid black;
		font-weight: 500;
	}	

	.tabelleSimple tr:nth-child(even) td{
		background-color: white;
	}

	.tabelleSimple .tabelleAnmerkung{
		font-weight: 300;
		font-size: 0.667em;
		display: block;
		color: var(--gray);
	}

	.tabelleSimple.matrix tr td:first-child {
		font-weight: 500;
	}	





.itemDropDownListWrapper {
	margin: 8.444em auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2.222em;
	width: fit-content;
	max-width: 90vw;
}

.itemDropDownListTitle{
	font-size: 1.111em;
	text-decoration: underline;
	font-family: "Roboto Slab";
	margin-bottom: 0.667em;
	display: block;
}

.itemDropDownListColumns{
	display: flex;
	gap: 2.222em;
}

.itemDropDownListItem{
	cursor: pointer;
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Old versions of Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none;
	width: 14.444em;
}

.itemDropDownListItem .label{
	display: grid;
	grid-template-columns: 3.333em auto;
	height: 3.333em;
	border-bottom: solid 1px var(--gray);
	position: relative;
	color: #000;
	text-decoration: none;
}

.itemDropDownListItem .label::after{
	background-image: url('/bilder/icons/colorSeperate/add_primaryColor.svg');
	background-size: 1em 1em;
	width: 1em;
	height: 1em;
	content: "";
	position: absolute;
	right: 1em;
	top: 50%;
	transform: translateY(-50%);
}

.itemDropDownListItem.active .label::after{
	background-image: url('/bilder/icons/colorSeperate/remove_primaryColor.svg');
}

.itemDropDownListItem .label[href]::after{
	background-image: url('/bilder/icons/colorSeperate/arrow_forward_primaryColor.svg');
	background-size: 1em 1em;
	width: 1em;
	height: 1em;
	content: "";
	position: absolute;
	right: 1em;
	top: 50%;
	transform: translateY(-50%);
}

.itemDropDownListItem .label .imageWrapper{
	height: 3.333em;
	grid-column: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}
.itemDropDownListItem .label .imageWrapper svg{
	width: 1.8em;
}

.itemDropDownListItem .label::before{
	content: "";
}

.itemDropDownListItem .label span {
	display: flex;
	align-items: center;
}

.itemDropDownListItem ul {
	transition-duration: 200ms;
	max-height: 0;
	overflow: hidden;
}

.itemDropDownListWrapper.pagingModule {
	left: 0;
	position: relative;
	transition-duration: 200ms;
	overflow: auto;
	justify-content: flex-start;
}

.itemDropDownListWrapper.pagingModule.nextPage {
	left: -100vw;
  }

.pagingModule .itemDropDownListItem ul {
	transition-duration: 200ms;
	max-height: unset;
	overflow: hidden;
	position: fixed;
	right: -100%;
	width: 100%;
	top: 7em;
}
.pagingModule .itemDropDownListItem ul a{
	margin-left: 1.445em;
	margin-right: 1.445em;
}
.pagingModule .itemDropDownListItem ul .headerBar{
	background-color: var(--softWhite);
	display: flex;
	align-items: center;
	height: 3.5em;
	padding: 0 2em;
	justify-content: space-between;
}
.pagingModule .itemDropDownListItem ul .headerBar::after{
	content: "";
	width: 24px;
}
.pagingModule .itemDropDownListItem ul .headerBar span{
	font-size: 18px;
	font-weight: 400;
	font-family: Roboto;
	text-decoration: underline;
}
.pagingModule .active.itemDropDownListItem ul {
	right: 0;
}

.itemDropDownListItem ul a{
	height: 2.222em;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: var(--softWhite);
	margin: 0.3em;
	padding: 0.5em 1em;
	box-sizing: border-box;
	position: relative;
	text-decoration: none;
	color: #000; 
	background: transparent;
	border-bottom: solid 1px;
}

.itemDropDownListItem ul a::after{
	background-image: url('/bilder/icons/colorSeperate/arrow_forward_primaryColor.svg');
	background-size: 1em 1em;
	width: 1em;
	height: 1em;
	content: "";
}

.itemDropDownListItem ul li a{
	text-decoration: none;
	color: #000;
}


@media screen and (max-width: 1300px) {
	.itemDropDownListWrapper {
		margin: 3em auto;
	}
}

@media screen and (max-width: 650px) {
	.itemDropDownListWrapper {
		flex-direction: column;
	}
	.itemDropDownListColumns {
		flex-direction: column;
	}
	.itemDropDownListItem {
		width: 80vw;
	}
}

@media screen and (max-width: 375px) {
	.itemDropDownListItem, .itemDropDownListWrapper {
		width: 100%;
	}
}

/*
#######################################################
#													  #
#					    Header						  #
#													  #
#######################################################
*/

header{
	position: sticky;
	top: 0;
	z-index: 1000;		/* MG-Window hat 9999, welches hier drueber liegen soll */
	--mainHeraderLineHeight: 4.667em;
	--secondaryHeaderLineHeight: 3.111em;
}

header .mainHeaderLine {
	--logoWidth: 22.222em;
	display: grid;
	grid-template-columns: calc(calc(100% - var(--logoWidth)) / 2) var(--logoWidth) calc(calc(100% - var(--logoWidth)) / 2);
	height: var(--mainHeraderLineHeight);
	padding: 0 4.889em;
	background-color: #fff;
	position: relative;
	z-index: 1001;
	transition-duration: 200ms;
}

header .mainHeaderLine > div, header .mainHeaderLine > a{
	display: flex;
	align-items: center;
	gap: 1.333em;
}

header .mainHeaderLine > div:nth-child(3){
	justify-content: flex-end;
}



header .mainHeaderLine .backgroundColor{
	background-color: #fff;
	position: absolute;
	z-index: -1;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

@media screen and (max-width: 850px) {
	header .mainHeaderLine {
		padding: 0 1.778em;
	}
}

@media screen and (max-width: 800px) {
	header .mainHeaderLine {
		--logoWidth: 15em;
	}

	header .mainHeaderLine > div{
		gap: 0.75em;
	}
}

@media screen and (max-width: 500px) {
	header .mainHeaderLine {
		--logoWidth: 12em;
	}

	header .mainHeaderLine{
		padding: 0 0.75em;
	}
}

@media screen and (max-width: 350px) {
	header .mainHeaderLine {
		--logoWidth: 9em;
	}
}

header .mainHeaderLine .mainHeaderLineItemLabelWrapper {
	display: flex;
	align-items: center;
	gap: 0.333em;
	cursor: pointer;
	text-transform: uppercase;
	color: var(--black);
	text-decoration: none;
}


header .mainHeaderLine > div:last-child{
	justify-content: flex-end;
}


header .mainHeaderLogo
, header .mainHeaderLineItemLabelWrapper svg
, header .mainHeaderLineItemLabelWrapper img
{
	min-width: 1.5em;
	max-width: 100%;
	--svgColor: var(--primaryColor)
}

header .mainHeaderLineDropDownWrapper {
	position: absolute;
	width: 100%;
	background-color: #fff;
	bottom: 0;
	left: 0;
	height: calc(calc(100vh - var(--mainHeraderLineHeight)) - 2px);
	transition-duration: 200ms;
	z-index: -1;
	border-top: solid 2px var(--softWhite);
	overflow: auto;
}

/* Hide scrollbar for Chrome, Safari and Opera */
header .mainHeaderLineDropDownWrapper::-webkit-scrollbar {
	display: none;
  }
  
/* Hide scrollbar for IE, Edge and Firefox */
header .mainHeaderLineDropDownWrapper {
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
}

header .mainHeaderLineDropDownInput:checked ~ .mainHeaderLineDropDownWrapper{
	bottom: 0;
	transform: translateY(100%);
}

#productBurgerMenu{
	display: none;
}

.burgerMenu .stroke{
	transition-duration: 200ms;
	opacity: 1;
}

.burgerMenu .middleStroke, .burgerMenu .hiddenSecondMiddleStroke {
	transform-origin: center;
}

#productBurgerMenu:checked ~ label .burgerMenu .topStroke, #productBurgerMenu:checked ~ label .burgerMenu .bottomStroke{
	opacity: 0;
}

#productBurgerMenu:checked ~ label .burgerMenu .middleStroke{
	transform: rotate(45deg);
}

#productBurgerMenu:checked ~ label .burgerMenu .hiddenSecondMiddleStroke{
	transform: rotate(-45deg);
}

#headerSearch{
	display: none;
}

.searchIcon .stroke{
	animation-duration: 500ms;
}

.searchIcon .lupe {
	animation-name: searchIconLupeApear;
	opacity: 1;
}

#headerSearch:checked ~ label .searchIcon .lupe{
	animation-name: searchIconLupeDisapear;
	opacity: 0;
}

.searchIcon .stretchStroke, .searchIcon .stretchRotateStroke {
	transform: rotate(45deg) translateX(9px) scaleX(0.3);
	transform-origin: center;
}

.searchIcon .stretchStroke{
	animation-name: searchIconStretchbarDisapear;
}

.searchIcon .stretchRotateStroke{
	animation-name: searchIconStretchRotatebarDisapear;
}

#headerSearch:checked ~ label .searchIcon .stretchStroke{
	animation-name: searchIconStretchbarApear;
	transform: rotate(45deg) translateX(0px) scaleX(1);
}

.stretchStroke{
	transform: rotate(45deg) translateX(9px) scaleX(0.3);transform-origin: center;
}

#headerSearch:checked ~ label .searchIcon .stretchRotateStroke{
	animation-name: searchIconStretchRotatebarApear;
	transform: rotate(-45deg) translateX(0px) scaleX(1);
}

.headerBewertungRight{
	display: none;
}


@media screen and (max-width: 1200px) {
	.headerBewertungLeft{
		display: none;
	}
	.headerBewertungRight{
		display: block;
	}
	.hideLableTablet .label{
		display: none;
	}
}

@media screen and (max-width: 600px) {
	.headerBewertungLeft{
		display: block;
	}
	.headerBewertungRight{
		display: none;
	}
	.hideLableMoblile label > .label, .hideLableMoblile a > .label {
		display: none;
	}
}

.showMobile {
	display: none;
}

@media screen and (max-width: 500px) {
	.hideMobile{
		display: none;
	}
	.showMobile{
		display: block;
	}

	.mobileHeaderNav{
		display: flex;
		gap: 1em;
	}
		.mobileOpenMenuHeader, .mobileOpenFilterHeader{
			cursor: pointer;
		}
		.mobileHeaderNav svg{
			min-width: 1.5em;
			--svgColor: var(--primaryColor);
		}
	
}


header .secondaryHeaderLine{
	height: var(--secondaryHeaderLineHeight);
	width: 100%;
	-webkit-box-shadow: 0px 3px 4px 0px var(--secondaryHeaderLineShadow); 
	box-shadow: 0px 3px 4px 0px var(--secondaryHeaderLineShadow);
	position: relative;
  	transition-duration: 200ms;
}

header .secondaryHeaderLine img {
	max-width: none;		/* wird von seo_kategorien.css auf 100% gesetzt */
}

header .secondaryHeaderLine .backgroundColor{
	background-color: var(--softWhite);
	position: absolute;
	z-index: -1;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

header .secondaryHeaderLine .forground {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 3em;
}
header .secondaryHeaderLine .hoverMenu {
	display: flex;
	gap: 1.111em;
	align-items: center;
	display: none;
}
header .secondaryHeaderLine .directMenuWrapper{
	width: 80%;
	order: -1;
	display: flex;
}
header .secondaryHeaderLine .directMenu {
    overflow: hidden;
    display: flex;
    gap: 1em;
}
header .secondaryHeaderLine .directMenu .menuDirectLinkWrapper{
	display: flex;
	align-items: center;
	gap: 0.2em;
}
header .secondaryHeaderLine .directMenu a{
	color: #000;
	text-decoration: none;
	font-weight: 300;
}
header .secondaryHeaderLine .directMenuWrapper .scroll-btn{
    display: flex;
    align-items: center;
	cursor: pointer;
}
header .secondaryHeaderLine .directMenuWrapper .scroll-btn.left{ /*damit es beim laden nicht hin und her zuckt*/
    display: none;
}
header .secondaryHeaderLine .directMenuWrapper .scroll-btn svg{
    width: 1.5em;
    margin: 0.5em;
}


header .secondaryHeaderLine .headerHoverExtendListWrapper {
	display: flex;
	align-items: center;
	gap: 1em;
	height: 100%;
	cursor: pointer;
}

header .secondaryHeaderLine .headerHoverExtendListWrapper > span {
	display: block;
	position: relative;
	font-weight: lighter;
}

header .secondaryHeaderLine .headerHoverExtendListWrapper > span::before {
	content: "";
	width: 0px;
	height: 2px;
	background-color: var(--primaryColor);
	position: absolute;
	bottom: -2px;
	left: 0;
	transition-duration: 200ms;
}

header .secondaryHeaderLine .headerHoverExtendListWrapper img {
	width: 1.778em;
	opacity: 0.5;
	transition-duration: 200ms;
}


header .secondaryHeaderLine .headerHoverExtendListWrapper:hover > span::before {
	width: 100%;
}

header .secondaryHeaderLine .headerHoverExtendListWrapper:hover img {
	opacity: 1;
}

header .secondaryHeaderLine .headerHoverExtendListWrapper .dropDownMenu {
	position: absolute;
	bottom: 0;
	left: 0;
	background: #fff;
	width: 100%;
	z-index: -1;
	transition-duration: 200ms;
	opacity: 0;
	padding: 1.667em;
	box-sizing: border-box;
}

header .secondaryHeaderLine .headerHoverExtendListWrapper:hover .dropDownMenu {
	transform: translateY(100%);
	opacity: 1;
	-webkit-box-shadow: 0px 3px 4px 0px var(--secondaryHeaderLineShadow); 
	box-shadow: 0px 3px 4px 0px var(--secondaryHeaderLineShadow);
}

header .secondaryHeaderLineDropDownList {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	max-width: 68.889em;
	margin: 0 auto;
	gap: 0.889em;
}

header .secondaryHeaderLineDropDownListItem {
	text-decoration: none;
	height: 2.667em;
	padding: 0 0.444em;
	width: 13em;
	display: flex;
	align-items: center;
	gap: 0.889em;
	border: solid 1px var(--softWhite);
	-webkit-box-shadow: 0px 3px 4px 0px var(--secondaryHeaderLineShadow); 
	box-shadow: 0px 3px 4px 0px var(--secondaryHeaderLineShadow);
	position: relative;
	transition-duration: 200ms;
	transition-delay: 150ms;
	cursor: pointer;
}

header .secondaryHeaderLineDropDownListItem:hover {
	-webkit-box-shadow: 0px 3px 4px 0px var(--secondaryHeaderLineShadowHover); 
	box-shadow: 0px 3px 4px 0px var(--secondaryHeaderLineShadowHover);
}

header .secondaryHeaderLineDropDownListItem::before {
    background-image: url('/bilder/icons/colorSeperate/arrow_forward_primaryColor.svg');
    background-size: 1.333em 1.333em;
	content: "";
	position: absolute;
	right: 10px;
	width: 1.333em;
	height: 1.333em;

}

header .secondaryHeaderLineDropDownListItem span{
	font-size: 0.889em;
	transition-duration: 200ms;
	color: var(--gray);
	position: relative;
	white-space: nowrap;
}

header .secondaryHeaderLineDropDownListItem span::before{
	content: "";
	width: 0px;
	height: 2px;
	background-color: var(--primaryColor);
	position: absolute;
	bottom: -2px;
	left: 0;
	transition-duration: 200ms;
}

header .secondaryHeaderLineDropDownListItem:hover span {
	color: #000;
} 

header .secondaryHeaderLineDropDownListItem:hover span::before {
	width: 100%;
}

@media screen and (max-width: 1000px){
	.hideTab{
		display: none;
	}
}

@media screen and (max-width: 800px){
	header .secondaryHeaderLine .headerHoverExtendListWrapper {
		font-size: 0.778em;
	}
}

@media screen and (max-width: 500px){
	header {
		--secondaryHeaderLineHeight: 0px;
	}

	header .mainHeaderLine{
		-webkit-box-shadow: 0px 3px 4px 0px var(--secondaryHeaderLineShadow);
		box-shadow: 0px 3px 4px 0px var(--secondaryHeaderLineShadow);
	}

	header .secondaryHeaderLine{
		transform: translateY(-100%);
		overflow: hidden;
	}
}

.layout_option_header_schmal header {
	--mainHeraderLineHeight: 3em;
	height: var(--mainHeraderLineHeight);
}

.layout_option_header_schmal header .secondaryHeaderLine {
	transform: translateY(-100%);
	overflow: hidden;
}

@media (max-width: 500px) {
		.layout_option_mobile_none {
				display: none;
		}
}


.searchWindow {
	max-width: min(50em, 90vw);
	margin: 3em auto;
}

.searchWindow .searchBarWrapper {
	display: flex;
	gap: 1.778em;
	align-items: center;
}

.searchWindow .searchBarWrapper label {
	display: flex;
	align-items: center;
	cursor: pointer;
}

.searchWindow .searchBarWrapper svg {
	width: 1.5em;
}

.searchWindow .searchBarWrapper form{
	width: 100%;
	height: 3.167em;
	box-sizing: border-box;
	display: flex;
	align-items: center;
}

.searchWindow .searchBarWrapper input{
	width: 100%;
	height: 3.167em;
	border-radius: 1.611em;
	border: solid 1px #000;
	padding: 0.889em 1.389em;
	box-sizing: border-box;
}

.fastsearchWrapper{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 2.111em;
}

.fastsearchWrapper .fastsearchList > a{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 14.444em;
	height: 3.722em;
	border-bottom: solid 1px #000;
	cursor: pointer;
	color: #000;
	text-decoration: none;
}

.fastsearchWrapper .fastsearchList > a.listItem::after{
	background-image: url('/bilder/icons/colorSeperate/arrow_forward_primaryColor.svg');
	background-size: 1em 1em;
	width: 1em;
	height: 1em;
	content: "";
}

.fastsearchWrapper .fastsearchImage > img {
	transform: translateX(23px);
}
@media screen and (max-width: 600px) {
	.fastsearchWrapper {
		flex-direction: column;
	}

	.fastsearchWrapper .fastsearchImage > img {
		display: none;
	}

	.fastsearchWrapper .fastsearchList > a {
		width: 90vw;
	}
}

.allpdoductsLabel {
	font-weight: 600;
}


.cartIcon {
	position: relative;
}
.cartIcon .amount {
	position: absolute;
	top: -0.2em;
	left: 58%;
	background-color: var(--black);
	border-radius: 1em;
	font-size: 0.75em;
	color: var(--white);
	min-width: 1.2em;
	height: 1.2em;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 0.25em;
}
#layout_mobile_navigation .cartIcon .amount{
	left: 72%;
}





/*
#######################################################
#													  #
#					    Footer						  #
#													  #
#######################################################
*/

footer.eingeklappt {
	display: none;
}

footer .servicePart{
	background-color: var(--softWhite);
	color: var(--black);
	padding-top: 1.889em;
	padding-bottom: 2.944em;
}

footer .servicePart h2{
	font-size: 1em;
	text-align: center;
}

footer span {
	font-size: 0.889em;
}

footer .fragenzuTable {
	display: grid;
	grid-template-columns: repeat(2, min(20.556em, 45%));
	column-gap: 3.889em;
	row-gap: 1.111em;
	justify-content: center;
	margin-top: 2.222em;
}

footer .fragenzuTable .fragenZuKaiser .title, footer .fragenzuTable .fragenZuService .title {
	display: block;
	font-weight: 600;
	margin-bottom: 0.778em;
}

footer .kontaktKaiser, footer .kontaktService {
	display: grid;
	grid-template-columns: 1.111em auto;
	column-gap: 1.111em;
	row-gap: 0.778em;
}

footer .kontaktKaiser .icon svg, footer .kontaktService .icon svg{
	--svgColor: #594E4E;
}

footer .kontaktKaiser .icon img, footer .serviceKaiser .icon img{
	width: 100%;
}

footer .linkPart {
	background-color: var(--darkGray);
	padding-top: 4.444em;
	padding-bottom: 1.667em;
	color: var(--white);
}

footer .linkPart .lists {
	display: grid;
	grid-template-columns: repeat(3, 14.444em);
	gap: 8.556em;
	row-gap: 2.556em;
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: 4.444em;
	padding: 0 2em;
}

footer .linkPart .bezahlmethoden {
	grid-column: 1/4;
	grid-row: 2;
	display: flex;
	flex-direction: column;
	gap: 0.889em;
}

footer .bezahlmethoden .title{
	font-size: 1.556em;
}

footer .bezahlmethoden .bezahlmethodenicons {
	display: flex;
	gap: 0.667em;
	flex-wrap: wrap;
}

@media screen and (max-width: 700px) {
	footer .fragenzuTable {
		grid-template-columns: 90%;
	}

	footer .fragenzuTable .fragenZuService {
		grid-row: 3;
		margin-top: 3em;
	}
}

@media (max-width: 1130px) {
	footer .linkPart .lists {
		grid-template-columns: repeat(2, 14.444em);
	}

	footer .linkPart .bezahlmethoden {
		grid-column: 1/3;
		grid-row: 3;
	}
}


footer .linkPart .lists .list {
	width: 14.444em;
}

footer .linkPart .lists .list .title {
	margin-bottom: 2.222em;
	display: block;
	font-size: 1em;
	text-transform: uppercase;
}

footer .linkPart .lists .list li {
	list-style-type: none;
	color: var(--lightGray);
	font-size: 0.889em;
	margin-bottom: 0.5em;
	margin-left: 0em;
	line-height: 1.5em;
}

footer .logo {
	position: relative;
	text-align: center;
	margin-bottom: 2.333em;
}

footer .logo img{
	width: 17.889em;
}

footer .logo::before {
	content: "";
	width: calc(50% - calc(23.944em / 2));
	left: 0;
	height: 1px;
	top: 50%;
	transform: translateY(-50%);
	background-color: var(--lightGray);
	display: block;
	position: absolute;
}

footer .logo::after {
	content: "";
	width: calc(50% - calc(23.944em / 2));
	right: 0;
	height: 1px;
	top: 50%;
	transform: translateY(-50%);
	background-color: var(--lightGray);
	display: block;
	position: absolute;
}

footer .socialMedia {
	display: flex;
	gap: min(5%, 2.222em);
	justify-content: center;
	margin-bottom: 2.222em;
}

footer .socialMedia svg {
	width: 1.333em;
	--svgColor: #fff;
}

footer .copyright {
	text-align: center;
	color: var(--lightGray);
	font-size: 0.889em;
	font-weight: lighter;
}

footer .copyright span{
	font-weight: normal;
}

footer a {
	text-decoration: none;
	color: var(--white);
}


/*
#######################################################
#													  #
#					cookiebanner    				  #
#													  #
#######################################################
*/

#cookieBanner {
	max-width: 72.444em;
	width: 62%;
	min-height: 5.667em;
	background-color: #FFFFFF;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	box-shadow: 0px -6px 40px #0000008A;
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	padding: 1em;
	bottom: 0;
	display: flex;
	align-items: center;
	gap: .5em;
	z-index: 12;
}

#cookieBanner.hide {
	display: none;
}
#cookieBanner .cookieBannerContentWrapper {
	flex-grow: 1;
}
#cookieBanner .primaryButton {
	white-space: nowrap;
	font-size: 1em;
}
#cookieBanner .bannerButtonWrapper {
	display: flex;
	gap: 2em;
	font-size: 1em;
}
#cookieBanner .bannerButtonWrapper .linkButton {
	font-size: 1em;
}
	#cookieBanner .headLineBanner {
		font-size: 1em;
		display: block;
		font-weight: 600;
	}
	#cookieBanner .contentBanner {
		max-width: 45.125em;
		display: block;
	}

	
#cookieSettings {
	max-width: 52.5em;
	width: 70%;
	height: 85vh;
	background-color: #FFFFFF;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	box-shadow: 0px -6px 40px -6px  #0000008A;
	position: fixed;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	padding: 1em;
	padding-bottom: 4em;
	top: 50%;
	left: 50%;
	z-index: 11000;
}
#cookieSettings.hide {
	display: none;
}
	#cookieSettings .headLineCookieSettings {
		font-size: 1.556em;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-weight: 800;
		margin-top: 0.5em;
	}

	#cookieSettings .headLineSettings {
		font-size: 1.222em;
		display: block;
		font-weight: 600;
		margin-bottom: 0.625em;
		margin-top: 1em;
		display: flex;
		justify-content: space-between;
		user-select: none;
	}
	#cookieSettings .contentBannerSettings {
		max-width: 45.125em;
		display: block;
		font-weight: lighter;
		margin-top: 1em;
		margin-bottom: 1.75em;
	}
	#cookieSettings .contentLine {
		width: 100%;		
		border-color: transparent;
		background: #E8EBED;
	}
	#cookieSettings .contentBannerChoices {
		max-width: 43em;
		display: block;
		font-weight: lighter;
		margin-bottom: 1.25em;
	}
	#cookieSettings .contentChoices .ghostButton {
		float: right;
		margin-top: 2em;
		font-size: 1em;
	}

	#cookieSettings .settingsButton {
		display: flex;
		justify-content: flex-end;
		gap: 2em;

	}
	#cookieSettings .scrollContent {
		height: 100%;
		overflow: auto;	
		padding: 0 4em;
	}

	#cookieSettings .scrollContent img {
		width: 3.438em;
		display: flex;
  		margin-left: auto;
  		margin-right: auto;
	}

	#cookieSettings .footerContent {
		width: 100%;
		height: 3em;
		background-color: #E8EBED;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 4.563em;
		position: fixed;
  		bottom: 0;
		
	}
	#cookieSettings .footerContent a {
		color: var(--black);
	}
	.cookieBannerContentWrapperLeft {
		display: flex;
    	gap: 1em;
	}

	@media (max-width: 850px) {
		#cookieBanner {
			width: 95%;
			transform: translate(-50%, -50%);
			top: 75%;
			bottom: unset;
			border-radius: 8px;
			flex-direction: column;
			max-width: 27.111em;
			padding: 1em 1em .5em 1em;
		}
		#cookieBanner .headLineBanner {
			margin-bottom: 0.667em;
			font-size: 0.889em;
		}
		#cookieBanner .contentBanner {
			font-size: 0.778em;
		}
		#cookieBanner .bannerButtonWrapper {
			width: 100%;
		}
		#cookieBanner .bannerButtonWrapper > * {
			width: 50%;
		}
		.cookieBannerContentWrapperLeft img {
			order: 2;
		}
	}


@media (max-width: 700px) {
	#cookieSettings .scrollContent {
		padding: 0 1.5em;
	} 
}
@media (max-width: 450px) {
	#cookieSettings .scrollContent {
		padding: 0 0.5em ;
	} 
	#cookieSettings .headLineCookieSettings {		
		font-size: 1em ;
	}
	#cookieSettings .headLineSettings {
		font-size: 0.889em;
	}
	#cookieSettings .contentChoices .ghostButton {
		width: 100%;
	}
	#cookieSettings .footerContent {
		gap: 2em ;
	}
}

#layout_toTopButton{
	position: fixed;
	bottom: 2em;
	right: 2em;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.556em;
	aspect-ratio: 1;
	background-color: var(--black);
	border-radius: 50%;
	cursor: pointer;
	z-index: 2;
	border: solid 2px var(--white);
}

#layout_toTopButton svg {
	--svgColor: #fff;
}


.layoutContact{
	position: fixed;
	right: 2em;
	bottom: 9em;
	width: 3.556em;
	z-index: 5;
}
	.layoutContactBar {
		background-color: var(--black);
		padding: 0.5em;
		display: flex;
		flex-direction: column;
		gap: 0.5em;
		align-items: center;
		border-radius: 7px;
  		border: 2px solid white;
	}
			.layoutContactBar svg, .layoutContactBar img {
				--svgColor: #fff;		
				width: 1.8em;
			}
			.layoutContactBar .contactOption {
				cursor: pointer;
				display: flex;
				flex-direction: column;
				align-items: center;
				color: #fff;
				text-decoration: none;
			}
				.layoutContactBar .contactOption .contactOptionName{
					font-size: 0.778em;
				}

.wrapperPhoneDetails {
	transform: translate(calc(-100% - 2em));
	position: absolute;
	left: 0;
}
.wrapperChatDetails{
	position: absolute;
	right: 3.4em;
    transform: translateY(-50%);
    top: 50%;
}
.phoneDetails, .chatDetails {
	width: 15em;
	display: flex;
	flex-direction: column;
	align-items:center;
	font-size: 0.778em;
	background-color: #fff;
	transform: scaleY(0);
	border-radius: 4px;
	border: 3px solid black;
	padding: 1em;
	transition: 0.5s;
}
	.chatDetails{
		border: 2px solid #000;
		min-height: 10em;
		padding-left: 4em;
		justify-content: center;
		align-items: flex-start;
		box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.10);
		background-color: var(--softWhite);
	}
	.chatDetails p{
		margin-top: 0;
		font-weight: 400;
	}

	.wrapperPhoneDetails.active .phoneDetails, .wrapperChatDetails.active .chatDetails {
		transform: scaleY(1);
		transform-origin: top;
	}

	.phoneDetails img {
		max-width: 4em;
		border-radius: 50%;
		margin-bottom: 1em;
	}
	.chatDetails img {
		width: 6em;
		position: absolute;
		left: 0;
		transform: translate(-50%, -50%);
		top: 50%;
		border-radius: 50%;
		border: 3px solid var(--primaryColor);
	}
	.phoneDetails .phoneNumber {
		font-weight: 600;
		font-size: 1.1em;
		margin-top: 0.3em;
	}
	.phoneDetails .closePhoneDetails, .chatDetails .closeChatDetails {
		position: absolute;
		cursor: pointer;
		right: 0.2em;
		top: 0.2em;
	}
		.phoneDetails .closePhoneDetails svg, .chatDetails .closeChatDetails svg {
			--svgColor: #000;
			width: 1.5rem;
		}


@media (max-width: 500px) {
	.layoutContact{
		display: none;
	}
}


@media (max-width: 700px) {
	footer .linkPart .lists {
		grid-template-columns: min(14.444em, 100%);
		justify-content: start;
	}

	footer .linkPart .bezahlmethoden {
		grid-column: 1;
		grid-row: 4;
	}

	footer .logo img{
		width: 12.889em;
	}

	footer .bezahlmethoden .bezahlmethodenicons {
		justify-content: center;
	}
}


/************************************************************/
/*															*/
/*						    Breadcrumb						*/
/*															*/
/************************************************************/

.layout_leiste_breadcrumb{
	display: flex;
    justify-content: space-between;
	align-items: center;
	margin-top: 1em;
}

	.layout_leiste_breadcrumb, .layout_leiste_breadcrumb .layout_leiste_breadcrumb_sortierung select{
		font-size: 1rem;
	}
	.layout_leiste_breadcrumb .layout_leiste_breadcrumb_sortierung select{
		cursor: pointer;
	}
	.layout_leiste_breadcrumb a{
		color: black;
		text-decoration: none;
	}
	.layout_leiste_breadcrumb .breadcrumb_erklaerung{
		margin-right: 1em;
	}
	.layout_leiste_breadcrumb .breadcrumbs > span:not(:last-child)::after {
		content: '>'; 
		margin: 0 0.5em;
	}
	#text_umschalter{
		display: none;
	}


@media (max-width: 500px) {
	.layout_leiste_breadcrumb{
		display: none;
	}
}


/************************************************************/
/*															*/
/*						    Tables							*/
/*															*/
/************************************************************/

.tableWrapper{
	overflow: scroll;
}
.table{
	margin-bottom: 3.333em;
	width: 100%;
	overflow: auto;
	--columnCount: 7;
	--minfirstColumnWidth: calc(100% / var(--columnCount));
	--minColumnWidth: 0;
	--firstColumnWidth:  max(var(--minfirstColumnWidth), calc(100% / var(--columnCount)));
	--generalColumnWidth: calc(
		calc(100% - var(--firstColumnWidth)) / 
		calc(var(--columnCount) - 1)
	)
}



.table .row{
	display: flex;
}

.table .row:first-child > span{
	border-bottom: solid 1px var(--black);
}

.table .row:nth-child(odd) > span{
	background: var(--softWhite);
}

.table.inverted .row:nth-child(even) > span{
	background: var(--white);
}

.table .row > span{
	min-height: 2.556em;
	display: flex;
	justify-content: center;
	flex-direction: column;
	padding: 0.722em;
	box-sizing: border-box;
	/* transform: rotateY(180deg); */
	width: calc(
		calc(100% - var(--firstColumnWidth)) / 
		calc(var(--columnCount) - 1)
	);
	border-right: solid 1px var(--black);
	min-width: var(--minColumnWidth);
}
.table.contentCentered  .row > span{
	align-items: center;
}

.table .row > span:first-child {
	width: var(--firstColumnWidth);
	flex-shrink: 0;
}
        
.tableRowFooter{
	font-size: 0.75em;
}
.table .icon{
	max-width: 2em;
}