: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.125rem;
	--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;
	margin-right: 0.8em;
}

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;
}

.listePfeile {
	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:not(.headerBar 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 a {
	/*Safari erkennt Telefonnummern automatisch und macht einen Link daraus || 18.08.2025 David S.*/
	color: #000;
}

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;
}