/* css zu produkt */

/* BaustoffkatalogeCSS  */
/* ---------------------------- */
/* ---------- Filter ---------- */
/* ---------------------------- */
.radioBaustoffeAlphabet {
	display: none;
}
#baustoffeAlphabet {
	margin: 0;
	padding-left: 0;
	list-style: none;
	border-bottom: 3px solid var(--waldgruen);
}
.baustoffeAlphabetItem {
	display: inline-block;
	vertical-align: top;
	width: 10%;
	margin-left: 16px;
}
.lblBaustoffeAlphabet {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	padding: 5px 0;
	border-top: 3px solid #cae7d4;
	border-left: 1px solid #cae7d4;
	border-right: 1px solid #cae7d4;
	color: inherit !important;
	font-weight: normal;
    text-decoration: none;
}
.lblBaustoffeAlphabet::after {
	content: '';
	display: block;
	position: absolute;
	width: 100%;
	height: 3px;
	bottom: -3px;
}

#radioBaustoffeAlphabet_1:checked ~ #baustoffeAlphabet #baustoffeAlphabetItem_1 .lblBaustoffeAlphabet,
#radioBaustoffeAlphabet_2:checked ~ #baustoffeAlphabet #baustoffeAlphabetItem_2 .lblBaustoffeAlphabet,
#radioBaustoffeAlphabet_3:checked ~ #baustoffeAlphabet #baustoffeAlphabetItem_3 .lblBaustoffeAlphabet,
#radioBaustoffeAlphabet_4:checked ~ #baustoffeAlphabet #baustoffeAlphabetItem_4 .lblBaustoffeAlphabet,
#radioBaustoffeAlphabet_5:checked ~ #baustoffeAlphabet #baustoffeAlphabetItem_5 .lblBaustoffeAlphabet,
#radioBaustoffeAlphabet_6:checked ~ #baustoffeAlphabet #baustoffeAlphabetItem_6 .lblBaustoffeAlphabet,
#radioBaustoffeAlphabet_7:checked ~ #baustoffeAlphabet #baustoffeAlphabetItem_7 .lblBaustoffeAlphabet,
.lblBaustoffeAlphabet:hover {border-color: var(--waldgruen);}

#radioBaustoffeAlphabet_1:checked ~ #baustoffeAlphabet #baustoffeAlphabetItem_1 .lblBaustoffeAlphabet::after,
#radioBaustoffeAlphabet_2:checked ~ #baustoffeAlphabet #baustoffeAlphabetItem_2 .lblBaustoffeAlphabet::after,
#radioBaustoffeAlphabet_3:checked ~ #baustoffeAlphabet #baustoffeAlphabetItem_3 .lblBaustoffeAlphabet::after,
#radioBaustoffeAlphabet_4:checked ~ #baustoffeAlphabet #baustoffeAlphabetItem_4 .lblBaustoffeAlphabet::after,
#radioBaustoffeAlphabet_5:checked ~ #baustoffeAlphabet #baustoffeAlphabetItem_5 .lblBaustoffeAlphabet::after,
#radioBaustoffeAlphabet_6:checked ~ #baustoffeAlphabet #baustoffeAlphabetItem_6 .lblBaustoffeAlphabet::after,
#radioBaustoffeAlphabet_7:checked ~ #baustoffeAlphabet #baustoffeAlphabetItem_7 .lblBaustoffeAlphabet::after,
.lblBaustoffeAlphabet:hover::after {background-color: white;}


/* ---------- Filter Mobil ---------- */
#chkAlphabetMobil, #baustoffeAlphabetMobil {display: none;}
#baustoffeAlphabetMobil {position: relative;}
.baustoffeAlphabetMobilHeadline {
	display: none;
	position: relative;
	padding: 5px 0 5px 15px;
	line-height: 100%;
	font-size: 1.5rem;
	border-radius: 3px;
	background-color: #F4F3F3;
	background-image: linear-gradient(to top, rgba(216, 216, 215, 0.6) 0%, transparent 100%);
}
.baustoffeAlphabetMobilHeadline::after, .lblBaustoffeAlphabetMobilItem::after {
	content: "";
	display: block;
	position: absolute;
	border-top:10px solid var(--waldgruen);
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
}
.baustoffeAlphabetMobilHeadline::after {
	right: 15px;
	top: 12px;
}
.lblBaustoffeAlphabetMobilItem::after {
	transform: rotate(270deg);
	right: 15px;
	top: 7px;
}
#chkAlphabetMobil:checked ~ #baustoffeAlphabetMobil .baustoffeAlphabetMobilHeadline::after {transform: rotate(180deg);}

#radioBaustoffeAlphabet_1:checked ~ #baustoffeAlphabetMobil #baustoffeAlphabetMobilHeadline_1,
#radioBaustoffeAlphabet_2:checked ~ #baustoffeAlphabetMobil #baustoffeAlphabetMobilHeadline_2,
#radioBaustoffeAlphabet_3:checked ~ #baustoffeAlphabetMobil #baustoffeAlphabetMobilHeadline_3,
#radioBaustoffeAlphabet_4:checked ~ #baustoffeAlphabetMobil #baustoffeAlphabetMobilHeadline_4,
#radioBaustoffeAlphabet_5:checked ~ #baustoffeAlphabetMobil #baustoffeAlphabetMobilHeadline_5,
#radioBaustoffeAlphabet_6:checked ~ #baustoffeAlphabetMobil #baustoffeAlphabetMobilHeadline_6,
#radioBaustoffeAlphabet_7:checked ~ #baustoffeAlphabetMobil #baustoffeAlphabetMobilHeadline_7
	{display: block;}

#baustoffeAlphabetMobilItemWrapper {
	display: none;
	list-style: none;
	margin-bottom: 0;
	margin-top: 4px;
	padding: 8px 0 8px 15px;
	background-color: #F4F3F3;
	font-size: 1.5rem;
	line-height: 100%;
	font-weight: bolder;
	position: absolute;
	width: 100%;
	z-index: 1;
}
#chkAlphabetMobil:checked ~ #baustoffeAlphabetMobil #baustoffeAlphabetMobilItemWrapper {display: block;}
#baustoffeAlphabetMobilItemWrapper > li {margin-bottom: 12px;}
#baustoffeAlphabetMobilItemWrapper > li:last-of-type {margin-bottom: 0;}
#baustoffeAlphabetMobilItemWrapper .lblBaustoffeAlphabetMobilItem {
	display: block;
	position: relative;
	color: inherit;
}
#baustoffeAlphabetMobilItemWrapper .lblBaustoffeAlphabetMobilItem:hover,
#radioBaustoffeAlphabet_1:checked ~ #baustoffeAlphabetMobil #lblBaustoffeAlphabetMobilItem_1,
#radioBaustoffeAlphabet_2:checked ~ #baustoffeAlphabetMobil #lblBaustoffeAlphabetMobilItem_2,
#radioBaustoffeAlphabet_3:checked ~ #baustoffeAlphabetMobil #lblBaustoffeAlphabetMobilItem_3,
#radioBaustoffeAlphabet_4:checked ~ #baustoffeAlphabetMobil #lblBaustoffeAlphabetMobilItem_4,
#radioBaustoffeAlphabet_5:checked ~ #baustoffeAlphabetMobil #lblBaustoffeAlphabetMobilItem_5,
#radioBaustoffeAlphabet_6:checked ~ #baustoffeAlphabetMobil #lblBaustoffeAlphabetMobilItem_6,
#radioBaustoffeAlphabet_7:checked ~ #baustoffeAlphabetMobil #lblBaustoffeAlphabetMobilItem_7
	{color: var(--waldgruen);}

@media (max-width: 1024px) {
	#baustoffeAlphabet {display: none;}
	#baustoffeAlphabetMobil {display: block;}
}



/* ----------------------------------- */
/* ---------- Firmenausgabe ---------- */
/* ----------------------------------- */
#baustoffeFirmenAusgabe {
	margin-top: 40px;
	min-height: 300px;
}
#baustoffeFirmenAusgabe > ul {
	margin: 0;
	padding-left: 0;
	list-style: none;
	display: none;
}
#baustoffeFirmenAusgabe > ul > li {
	min-height: 2.7rem;
    padding-top: 4px;
    overflow: hidden;
    line-height: 1.1rem;
}
#baustoffeFirmenAusgabe > ul > li:nth-of-type(even) {
	background-color: #e3f2eb;
}
.baustoffeFirmenAusgabe_L, .baustoffeFirmenAusgabe_R {
	display: inline-block;
	vertical-align: top;
	width: 50%;
}
.baustoffeFirmenAusgabe_L {
	font-weight: normal;
	color: inherit;
	padding-left: 55px;
	padding-right: 40px;
	position: relative;
	text-decoration: none;
}
.baustoffeFirmenAusgabe_L:hover {color: var(--waldgruen);}
.baustoffeFirmenAusgabe_L::before {
	content: '';
	position: absolute;
	left: 5px;
	transition: left 500ms;
	border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 10px solid var(--waldgruen);
	top: 5px;
}
.baustoffeFirmenAusgabe_L:hover::before {left: 25px;}

#radioBaustoffeAlphabet_1:checked ~ #baustoffeFirmenAusgabe #baustoffeFirmenAusgabe_1,
#radioBaustoffeAlphabet_2:checked ~ #baustoffeFirmenAusgabe #baustoffeFirmenAusgabe_2,
#radioBaustoffeAlphabet_3:checked ~ #baustoffeFirmenAusgabe #baustoffeFirmenAusgabe_3,
#radioBaustoffeAlphabet_4:checked ~ #baustoffeFirmenAusgabe #baustoffeFirmenAusgabe_4,
#radioBaustoffeAlphabet_5:checked ~ #baustoffeFirmenAusgabe #baustoffeFirmenAusgabe_5,
#radioBaustoffeAlphabet_6:checked ~ #baustoffeFirmenAusgabe #baustoffeFirmenAusgabe_6,
#radioBaustoffeAlphabet_7:checked ~ #baustoffeFirmenAusgabe #baustoffeFirmenAusgabe_7
{display: block;}

@media (max-width: 1024px) {
	#baustoffeFirmenAusgabe {margin-top: 20px;}
	#baustoffeFirmenAusgabe > ul > li {padding: 5px 0;}
	.baustoffeFirmenAusgabe_L, .baustoffeFirmenAusgabe_R {width: 100%;}
	.baustoffeFirmenAusgabe_L {
		padding-right: 0;
		font-weight: bolder;
		margin-bottom: 5px;
	}
	.baustoffeFirmenAusgabe_R {padding-left: 55px;}
}



/* ----------------------------------- */
/* --------------- Tree -------------- */
/* ----------------------------------- */
.bigIncludeTo.col44 .baustoffeLinks {
	width: 33.33%;
}
#baustoffeTree_mobile_chk, #chkBaustoffeTree, #lblBaustoffeTreeHideBereich, #lblBaustoffeTreeShow {display: none;}
#baustoffeTree {
	margin: 0;
	padding-left: 0;
	line-height: 150%;
}
#baustoffeTree ul {
	display: none;
	padding-left: 20px;
	margin: 5px 0;
}
#baustoffeTree li.openleaf > ul {display: block;}
#baustoffeTree li {
	list-style: none;
	position: relative;
	margin-bottom: 5px;
}
#baustoffeTree li::before {
	display: inline-block;
	content: '';
	margin-right: 5px;
	margin-bottom: 1px;
	background-image: url('/bilder/document_dunkelgrau.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	cursor: pointer;
}
#baustoffeTree li:not(.isnode)::before {
	width: 10px;
	height: 10px;
}
#baustoffeTree li.isnode::before {
	background: none;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 10px solid var(--waldgruen);
}
#baustoffeTree li.isnode.openleaf::before {
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 10px solid var(--waldgruen);
	border-bottom: none;
}
#baustoffeTree a, #baustoffeTreeHeadline {
	color: inherit;
	text-decoration: none;
}

#baustoffeTree a {
	display: inline-block;
	vertical-align: top;
	width: calc(100% - 15px);
	font-family: inherit;
}

#baustoffeTree div:hover ~ a, #baustoffeTree a:hover {
	text-decoration: underline;
	color: var(--lagerhausgruen);
}

#baustoffeTree li.openleaf > a {
	font-family: var(--medium);
	text-decoration: underline;
	color: var(--lagerhausgruen);
}

#baustoffeTree li > div {
	display: none;
}

#baustoffeTree li.isnode > div {
	display: block;
	position: absolute;
	width: 100%;
	height: 27px;
	top: 0;
	left: 0;
	cursor: pointer;
}


#baustoffeTreeHeadline {
	display: block;
	margin-bottom: 20px;
	font-size: 120%;
}

#baustoffeTreeHeadline > span {
	display: block;
}

@media (max-width: 1024px) {
	.bigIncludeTo.col44 .baustoffeLinks {width: 100%;}
	#baustoffeTree li.isnode > div {height: 24px;}
	#baustoffeTreeSeitenreiter {
		height: 100%;
		width: 300px;
		position: fixed;
		top: 0;
		left: -300px;
		padding: 14px;
		z-index: 999;
		transition: 500ms;
		overflow-y: auto;
		background-color: white;
		font-size: 1rem;
	}
	#chkBaustoffeTree:checked ~ #baustoffeTreeSeitenreiter {
		left: 0;
		box-shadow: 5px 10px 18px rgba(0, 0, 0, 0.8);
	}
	
	#lblBaustoffeTreeShow {
		display: block;
		width: 56px;
		height: 56px;
		background-color: var(--waldgruen);
		background-image: url('/bilder/baustoffeTreeOpen.svg');
		background-repeat: no-repeat;
		background-position: center;
		background-size: 68%;
		position: fixed;
		right: 0;
		top: calc(50% - 56px/2);
		cursor: pointer;
		z-index: 2;
		border-color: white;
		border-style: solid;
		border-width: 1px 0 1px 1px;
	}
	#chkBaustoffeTree:checked ~ #lblBaustoffeTreeShow {
		background-image: url('/bilder/baustoffeTreeClose.svg');
		background-size: 100%;
	}
	
	#lblBaustoffeTreeHide {
		display: block;
		width: 30px;
		height: 29px;
		cursor: pointer;
		position: absolute;
		top: 14px;
		right: 14px;
	}
	#lblBaustoffeTreeHide::before, #lblBaustoffeTreeHide::after {
		display: block;
		width: 100%;
		height: 4px;
		background-color: var(--waldgruen);
		border-radius: 2px;
		content: '';
		position: absolute;
		left: 0px;
	}
	#lblBaustoffeTreeHide::before {
		top: 13px;
		transform: rotate(-45deg);
	}
	#lblBaustoffeTreeHide::after {
		bottom: 12px;
		transform: rotate(45deg);
	}
	
	#lblBaustoffeTreeHideBereich {
		display: block;
		position: fixed;
		top: 0;
		right: 0;
		height: 100%;
		cursor: unset;
		z-index: 999;
		background-color: rgba(0, 0, 0, 0.2);
	}
	#chkBaustoffeTree:checked ~ #lblBaustoffeTreeHideBereich {width: 100%;}
	
	#baustoffeTreeHeadline {width: calc(100% - 30px - 14px);}
}



/* ----------------------------------- */
/* ------------- Ausgabe ------------- */
/* ----------------------------------- */
.bigIncludeTo.col44 .baustoffeRechts {
	width: 66.66%;
	padding-left: 30px;
}
.baustoffeRechts a {font-weight: normal;}
#baustoffeAusgabeHeadline {margin-top: 0;}

.baustoffeAusgabeCol_L, .baustoffeAusgabeCol_R {
	display: inline-block;
	vertical-align: top;
	margin-bottom: 10px;
}
.baustoffeAusgabeCol_L {width: 250px;}
.baustoffeAusgabeCol_R {width: calc(100% - 250px);}

@media (max-width: 1024px) {
	.bigIncludeTo.col44 .baustoffeRechts {
		width: 100%;
		padding-left: 0;
	}
}
@media (max-width: 768px) {
	.baustoffeAusgabeCol_L, .baustoffeAusgabeCol_R {width: 100% !important;}
	.baustoffeAusgabeCol_L {margin-bottom: 0;}
}

/* ----------------------------------- */
/* -------------- Firma -------------- */
/* ----------------------------------- */

#baustoffeFirmaBild {
	max-width: 150px;
	float: right;
}
@media (max-width: 1024px) {
	#baustoffeFirmaBild {
		float: unset;
		display: block;
		margin-top: 10px;
	}
}


/* ----------------------------------- */
/* ---------- Produkt Gruppe --------- */
/* ----------------------------------- */
#baustoffePGrouopBild {
	display: block;
	width: 100%;
	max-width: 400px;
}


/* ----------------------------------- */
/* ------------- Produkt ------------- */
/* ----------------------------------- */
#baustoffeProdOben_L, #baustoffeProdOben_R {
	display: inline-block;
	vertical-align: top;
}

#baustoffeProdOben_L {
	width: calc(100% - 170px);
	padding-right: 30px;
}

#baustoffeProdOben_R {
	width: 170px;
}

#baustoffeProdBild {
    cursor: zoom-in;
}


#baustoffeProdBild img, #baustoffeProdBildMobil img {
	display: block;
	max-width: 100%;
	max-height: 200px;
}

#baustoffeProdBildMobil {
	width: 170px;
	display: none;
}

#baustoffeProdAusgabeAnfrageBtnMobil {
	display: none;
}

#baustoffeProdBildMobil[data-prodpic=""], #baustoffeProdBild[data-prodpic=""] {
	pointer-events: none;
}

@media (max-width: 768px) {
	#baustoffeProdOben_L {
		width: 100%;
		padding-right: 0;
	}

	#baustoffeProdOben_R {
		display: none;
	}

	#baustoffeProdBildMobil, #baustoffeProdAusgabeAnfrageBtnMobil {
		display: block;
	}
}



/* Labels / Inputs */
#chkBaustoffeProdInfo, #chkBaustoffeProdLeistungserkl, #chkBaustoffeProdText {
	display: none;
}

.lblBaustoffeProd {
	display: block;
	border-top: 1px solid var(--waldgruen);
	padding: 10px 0 10px 30px;
	position: relative;
}
.lblBaustoffeProd::before {
	content: '';
	display: inline-block;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url('/bilder/document_dunkelgrau.svg');
	width: 20px;
	height: 20px;
	position: absolute;
	left: 0;
	top: 11px;
}
.lblBaustoffeProd::after {
	content: "";
	display: block;
	position: absolute;
	right: 5px;
	top: 17px;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 10px solid var(--waldgruen);
}

#chkBaustoffeProdInfo:checked ~ #baustoffeProdOben #lblBaustoffeProdInfo::after,
#chkBaustoffeProdLeistungserkl:checked ~ #baustoffeProdOben #lblBaustoffeProdLeistungserkl::after,
#chkBaustoffeProdText:checked ~ #baustoffeProdOben #lblBaustoffeProdText::after
	{transform: rotate(180deg);}


#baustoffeProdInfo, #baustoffeProdLeistungserkl {display: none;}

#chkBaustoffeProdInfo:checked ~ #baustoffeProdOben #baustoffeProdInfo,
#chkBaustoffeProdLeistungserkl:checked ~ #baustoffeProdOben #baustoffeProdLeistungserkl
	{display: block;}

.baustoffeProdInfoContent {
	margin-bottom: 10px;
}


/* Produkt Text */
#baustoffeProdText {
	max-height: 125px;
	overflow: hidden;
	position: relative;
}

#lblBaustoffeProdTextArea {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: rgba(255, 255, 255, 0.6);
}

#chkBaustoffeProdText:checked ~ #baustoffeProdText {
	max-height: unset;
}

#chkBaustoffeProdText:checked ~ #baustoffeProdText #lblBaustoffeProdTextArea {
	background-color: transparent;
	pointer-events: none;
}



/* Artikel */
#baustoffeProdArtikelWrapper {
	overflow-x: auto;
	scrollbar-width: thin;
	font-size: 0.875rem;
}
#baustoffeProdArtikelWrapper table {
	border-collapse: collapse;
	width: 100%;
}

#baustoffeProdArtikelWrapper tr:first-of-type {
	background-color: #A2A2A2;
	color: white;
	font-weight: bold;
}

#baustoffeProdArtikelWrapper tr:nth-of-type(2n) {
	background-color: #F4F4F4;
}

.baustoffeProdArtikelRowItsMe {
	background-color: var(--lagerhausgruen) !important;
	color: var(--weiss);
}

#baustoffeProdArtikelWrapper td {
	white-space: nowrap;
	padding-right: 26px;
	padding-top: 5px;
	padding-bottom: 5px;
}

#baustoffeProdArtikelWrapper td:first-of-type {
	padding-left: 18px;
}

#baustoffeProdArtikelWrapper td.noEntry {
	padding-right: 0 !important;
}






/* ---------- Bild Zoom ---------- */
#baustoffeAusgabePicZoomChk {
	display: none;
}

#baustoffeAusgabePicZoomWrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 4;
	background-color: var(--weiss);
    cursor: zoom-out;
	opacity: 0;
	pointer-events: none;
	transition: opacity 200ms ease-in-out;
}

#baustoffeAusgabePicZoomChk:checked ~ #baustoffeAusgabePicZoomWrapper {
	opacity: 1;
	pointer-events: all;
}

#baustoffeAusgabePicZoomCloseLbl {
    display: block;
    width: 30px;
    height: 29px;
    position: absolute;
    top: 14px;
    right: 14px;
}

#baustoffeAusgabePicZoomCloseLbl::before, #baustoffeAusgabePicZoomCloseLbl::after {
    display: block;
    width: 100%;
    height: 4px;
    background-color: var(--schriftgrau);
    border-radius: 2px;
    content: '';
    position: absolute;
    left: 0px;
}

#baustoffeAusgabePicZoomCloseLbl::before {
    top: 13px;
    transform: rotate(-45deg);
}

#baustoffeAusgabePicZoomCloseLbl::after {
    bottom: 12px;
    transform: rotate(45deg);
}
/* --- --- */
/* FooterCSS  */
footer > .footerGreen{
    background-image: url('/bilder/karton-pattern-green.jpg');
    border-top: 1px solid var(--lagerhausgruen);
    border-bottom: 1px solid var(--lagerhausgruen);
  }
  
  footer > .footerGreen > div {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
  footer .footerGreenCol1{
	align-items: center;
  }
  footer > .footerGreen > div > div > a.footerMailIcon{
    width: 25px;
    height: 32px;
    background-image: url('/bilder/greenicons.gif');
    background-position: right;
    margin-left: 10px;
    margin-right: 10px;
  }
  footer > .footerGreen > div > div > a.footerNewsletter{
    text-decoration: none;
    padding: 10px 3px;
    width: 100%;
    font-size: 20px;
  }
  footer > .footerGreen > div > div > a.footerNewsletter::after{
    content: '';
    display: inline-block;
    width: 43px;
    height: 43px;
    background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACkAAAApCAYAAACoYAD2AAAAy0lEQVRYhe3SoQoCQRDG8ctbjNd8At/AtsF0yex7GRbxwGIX66UrhgsiYhIMi1w5BEGwfQbBquzNsCt8A/848IOZLJuPkXzRAUQSSSSRiRcdQCSRRL4brWeofIO8LNJFLk9bAMChO8tAtU60udRyUC2kKDR0MS+Lrw1XU9TXfX9oKDJkgqGhyPbR/dTtef8gK9/AOJvWTw4WE+zaYz+gJlIMqIUUBWogxYEaSOMsKt/IAbXObZyVA2ohxYsOIJJIIolMvOgAIon8Q+QLTVRdIAGDpL8AAAAASUVORK5CYII=');
    position: absolute;
    top: 0;
    right: 0;
  }
  footer > .footerGreen > div > div > a.footerFb{
    display: inline-block;
    width: 25px;
    height: 32px;
    background-image: url('/bilder/greenicons.gif');
    margin-left: 10px;
    margin-right: 10px;
    vertical-align: middle;
  }
  footer > .footerGray{
    background-image: url('/bilder/karton-pattern.jpg');
  }
  footer > .footerGray > div.footerInfos .weekday{
    font-weight: bold;
    display: inline-block;
    width: 50px;
  }
  footer > .footerGray > .footerNav{
    border-top: 1px solid var(--mittelgrau);
    text-align: center;
  }
  footer > .footerGray > .footerNav > div > a{
    text-decoration: none;
  }
  footer > .footerGray > .footerNav > div > a:hover{
    text-decoration: underline;
  }
  footer div > .col14{
    width: calc(100% / 4)
  }
  footer > .footerGreen > div > .col14 > b{
    width: calc(100% - 45px)
  }
  
  
  @media (max-width: 1024px){
    footer div > .col14{
      width: calc(100% / 2)
    }
    footer > .footerGreen > div{
      padding-bottom: var(--abstand_9)
    }
    footer > .footerGreen > div,
    footer > .footerGray > .footerInfos{
      max-width: 760px; 
    }
    footer > .footerGreen > div > div > a.footerFb{margin-left: 0;}

	footer > .footerGray > div.footerNav > div > a {
		padding-left: var(--abstand_9);
		padding-right: var(--abstand_9);
	}
  }

  @media (max-width: 768px){
    footer > .footerGreen > div > .col12{
      padding-left: 0px;
      padding-right: 0px
    }
    footer .footerNav a{
  		padding: 0 3%
	} 

	footer > .footerGray > div.footerNav > div > a {
		padding-left: var(--abstand_6);
		padding-right: var(--abstand_6);
	}
  }

  @media (max-width: 600px){
    footer div > .col14 {
      width: 100%;
      text-align: center;
    }
    footer > .footerGreen .col14{
      text-align: left;
    }
    footer > .footerGreen > div > div > a.footerFb{margin-left: 0;}
    footer > .footerGray > div.footerInfos > div{text-align: center}
    footer > .footerGray > div.footerNav > div > a{
      width: 100%;
      display: inline-block;
      padding: 5px 0;
    }

	.footerOeffnungszeiten {
		display: inline-block !important;
		vertical-align: top !important;
		width: auto !important;
	}

	.standorteWeekday, .standorteTime {
		text-align: left;
	}
  }
/* --- --- */
/* GlobalCSS  */
/* ----------------------------------------------------------------- */
/* ----------------------------------------------------------------- */
/* --------------------------- Variablen --------------------------- */
/* ----------------------------------------------------------------- */
/* ----------------------------------------------------------------- */
:root {
	/* Farben */
	--waldgruen: #005541;
	--lagerhausgruen: #009e3c;
	--rapsgelb: #ffdc00;
	--rapsgelbhover: #ffec70;
	--rot: #f20000;
	--schriftgrau: #323232;
	--grau: #e6e6e6;
	--dunkelgrau: #898989;
	--mittelgrau: #D0D0D0;
	--hellgrau: #F5F5F5;
	--weiss: #FFFFFF;
	
	/* Schriften */
	--regular: 'Calibre Regular', Arial, Helvetica, sans-serif;
	--medium: 'Calibre Medium', Arial, Helvetica, sans-serif;
	--semibold: 'Calibre SemiBold', Arial, Helvetica, sans-serif;
	--bold: 'Calibre Bold', Arial, Helvetica, sans-serif;
	--headline: 'Calibre Headline', Arial, Helvetica, sans-serif;
	
	/* Abstände */
	--abstand_6: 10px;
	--abstand_9: 15px;
	--abstand_15: 25px;
	--abstand_18: 35px;
	--abstand_25: 50px;
	--abstand_36: 80px;
}



/* --------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------- */
/* --------------------------- Schriftarten Import --------------------------- */
/* --------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------- */
@font-face {
	font-family: 'Calibre Regular';
	src: url('/fonts/calibre/CalibreLH-Regular.woff') format('woff');
	font-weight: normal;
	font-display: fallback;
}

@font-face {
	font-family: 'Calibre Medium';
	src: url('/fonts/calibre/CalibreLH-Medium.woff') format('woff');
	font-weight: normal;
	font-display: fallback;
}

@font-face {
	font-family: 'Calibre SemiBold';
	src: url('/fonts/calibre/CalibreLH-SemiBold.woff') format('woff');
	font-weight: normal;
	font-display: fallback;
}

@font-face {
	font-family: 'Calibre Bold';
	src: url('/fonts/calibre/CalibreLH-Bold.woff') format('woff');
	font-weight: normal;
	font-display: fallback;
}

@font-face {
	font-family: 'Calibre Headline';
	src: url('/fonts/calibre/CalibreLH-Headline.woff') format('woff');
	font-weight: normal;
	font-display: fallback;
}



/* ------------------------------------------------------------- */
/* ------------------------------------------------------------- */
/* -------------------- Schriftformatierung -------------------- */
/* ------------------------------------------------------------- */
/* ------------------------------------------------------------- */
html {
	font-size: 16px;
	line-height: 142%;
	hyphens: auto;
	font-family: var(--regular);
}

h1, h2, h3, h4, strong, b {
	font-family: var(--bold);
	font-weight: normal;
}



h1, h2, h3, h4 {
	margin-top: 0;
	margin-bottom: var(--abstand_15);
	line-height: 115%;
}

a, .link {
	font-family: var(--semibold);
}

h1 {font-size: 235%;}
h2 {font-size: 188%;}
h3 {font-size: 157%;}
h4 {font-size: 125%;}


ul {padding-left: 15px;}


.fontRegular {font-family: var(--regular) !important;}
.fontMedium {font-family: var(--medium) !important;}
.fontBold {font-family: var(--bold) !important;}
.fontIcons {
	font-family: var(--icons) !important;
	vertical-align: top;
	font-size: 24px;
}
.brandIcons {
	font-family: var(--brandIcons) !important;
	vertical-align: top;
	font-size: 24px;
}

.fontSizeBig {font-size: 125% !important;}
.fontSizeNormal {font-size: 17px !important;}
.fontSizeSmall, small {font-size: 80% !important;}
.fontSizeTiny {font-size: 60% !important;}


.uppercase {text-transform: uppercase;}
.lowercase {text-transform: lowercase;}

.breakword {word-break: break-word;}



@media (max-width: 1024px) {
	
}

@media (max-width: 768px) {
	
}

@media (max-width: 600px) {
	html {
		font-size: 16px;
	}
}



/* -------------------------------------------------------------------- */
/* -------------------------------------------------------------------- */
/* ------------------------------ Inputs ------------------------------ */
/* -------------------------------------------------------------------- */
/* -------------------------------------------------------------------- */
input:not([type="checkbox"], [type="radio"], [type="button"], [type="submit"], .inputNoFormat),
textarea,
select {
	font-family: inherit;
	font-size: inherit;
	max-width: 100%;
	width: 250px;
	outline: none;
	
}

input:not([type="checkbox"], [type="radio"], [type="range"], [type="button"], [type="submit"], .inputNoFormat),
textarea,
select {
	height: 30px;
	padding: 5px;
	border: 1px solid var(--dunkelgrau);
	background-color: var(--weiss);
	transition: border-color 100ms ease-in-out;
}

input[type="color"] {padding: 0;}

input:not([type="checkbox"], [type="radio"], [type="range"], [type="button"], [type="submit"], [readonly], .inputNoFormat):hover,
input:not([type="checkbox"], [type="radio"], [type="range"], [type="button"], [type="submit"], [readonly], .inputNoFormat):focus,
textarea:hover,
textarea:focus,
select:hover,
select:focus {
	border-color: var(--lagerhausgruen);
}

input:not([type="checkbox"], [type="radio"], [type="range"], [type="button"], [type="submit"], [readonly], .inputNoFormat):invalid,
textarea:invalid,
select:invalid {
	border-color: var(--rot);
}


input[readonly] {background-color: var(--mittelgrau);}

textarea {height: 100px;}


input:not([type="checkbox"], [type="radio"], [type="range"], [type="button"], [type="submit"], .inputNoFormat)::placeholder,
textarea::placeholder {
	color: var(--dunkelgrau);
	opacity: 1;
}



/* --------------------------------------------------------------------- */
/* --------------------------------------------------------------------- */
/* ------------------------------ Buttons ------------------------------ */
/* --------------------------------------------------------------------- */
/* --------------------------------------------------------------------- */
input[type="checkbox"], input[type="radio"],
input[type="submit"], input[type="button"],
button,
label,
select {cursor: pointer;}

input[type="button"]:not(.buttonNoFormat, .warenkorbArtikelRemove, .warenkorbArtikelDecrease, .warenkorbArtikelAdd), input[type="submit"]:not(.buttonNoFormat), button:not(.buttonNoFormat), .button, .buttonSmall, .button_gelb, .button_weiss {
	font-family: var(--medium);
	font-size: inherit;
	line-height: 120%;
	max-width: 100%;
	padding: 10px 16px;
	transition: background-color 200ms ease-in-out, color 200ms, border-color 200ms ease-in-out;
	display: inline-block;
	text-decoration: none;
	overflow: hidden;
	text-align: center;
}

input[type="button"]:not(.buttonNoFormat, .warenkorbArtikelRemove, .warenkorbArtikelDecrease, .warenkorbArtikelAdd, .button_gelb, .button_weiss), input[type="submit"]:not(.buttonNoFormat), button:not(.buttonNoFormat), .button, .buttonSmall {
	background-color: var(--waldgruen);
	color: var(--weiss);
	border: 1px solid transparent;
}

.buttonSmall {
	font-size: 80%;
	padding: 6px 12px;
}

.button_gelb {
	background-color: var(--rapsgelb);
	color: var(--schriftgrau);
	border: 1px solid transparent;
}

.button_weiss {
	background-color: var(--weiss);
	color: var(--waldgruen);
	border: 2px solid var(--waldgruen);
}


input[type="button"]:not(.buttonNoFormat, .warenkorbArtikelRemove, .warenkorbArtikelDecrease, .warenkorbArtikelAdd, .button_gelb, .button_weiss):hover, input[type="submit"]:not(.buttonNoFormat):hover, button:not(.buttonNoFormat):hover, .button:hover, .buttonSmall:hover {
	background-color: var(--lagerhausgruen);
	color: var(--weiss);
}

.button_gelb:hover {
	background-color: var(--rapsgelbhover);
	color: var(--schriftgrau);
}

.button_weiss:hover {
	background-color: var(--waldgruen);
	color: var(--weiss);
}



/* -------------------------------------------------------------------- */
/* -------------------------------------------------------------------- */
/* ------------------------------ Farben ------------------------------ */
/* -------------------------------------------------------------------- */
/* -------------------------------------------------------------------- */
html {color: var(--schriftgrau);}

::selection {
	background-color: var(--waldgruen);
	color: var(--weiss);
}


a, .link {
	color: var(--waldgruen);
	transition: color 200ms;
}

.link {
	cursor: pointer;
	text-decoration: underline;
}

a:hover, .link:hover {color: var(--lagerhausgruen);}


hr {color: var(--waldgruen);}


.waldgruen, .gruen {color: var(--waldgruen);} .bg_waldgruen, .bg_gruen {background-color: var(--waldgruen);}
.lagerhausgruen, .hellgruen {color: var(--lagerhausgruen);} .bg_lagerhausgruen, .bg_hellgruen {background-color: var(--lagerhausgruen);}
.rapsgelb, .gelb {color: var(--rapsgelb);} .bg_rapsgelb, .bg_gelb {background-color: var(--rapsgelb);}
.rot {color: var(--rot);} .bg_rot {background-color: var(--rot);}
.schriftgrau, .schwarz {color: var(--schriftgrau);} .bg_schriftgrau, .bg_schwarz {background-color: var(--schriftgrau);}
.dunkelgrau {color: var(--dunkelgrau);} .bg_dunkelgrau {background-color: var(--dunkelgrau);}
.mittelgrau {color: var(--mittelgrau);} .bg_mittelgrau {background-color: var(--mittelgrau);}
.hellgrau {color: var(--hellgrau);} .bg_hellgrau {background-color: var(--hellgrau);}
.weiss {color: var(--weiss);} .bg_weiss {background-color: var(--weiss);}

.color_inherit {color: inherit;}



.border_hellgrau {
	border: 1px solid var(--mittelgrau);
}

.border_mittelgrau {
	border: 1px solid var(--mittelgrau);
}

.border_dunkelgrau {
	border: 1px solid var(--mittelgrau);
}



/* -------------------------------------------------------------------- */
/* -------------------------------------------------------------------- */
/* ----------------------------- Breiten ------------------------------ */
/* -------------------------------------------------------------------- */
/* -------------------------------------------------------------------- */
.contentWrapper, .bigIncludeTo.col44, .contentWrapperW {
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--abstand_9);
	padding-right: var(--abstand_9);
}

.contentWrapper, .bigIncludeTo.col44 {
	max-width: 1590px;
}

.contentWrapperW {
	max-width: 1680px;
}

img, video, iframe {
	max-width: 100%;
	max-height: 100%;
}


.wide, .col14, .col34, .col13, .col23, .col15, .col12,
.formularColL, .formularColR, .formularCaptchaWrapper > div > * {
	display: inline-block;
	vertical-align: top;
}


.wide {width: 100%;}
.col12 {width: 50%;}
.col14 {width: 25%;}
.col15 {width: 20%;}
.col13 {width: 33.33%;}
.col23 {width: 66.66%;}
.col34 {width: 75%;}




.bigIncludeTo.col44, .col12flexAb9, .col13flexAb9, .col14flexAb9  {
	display: flex;
	flex-wrap: wrap;
	justify-content: left;
}
.col12flexAb9, .col13flexAb9, .col14flexAb9 {
	gap: var(--abstand_9);
}

.col12flexAb9 > * {width: calc(50% - var(--abstand_9) / 2);}
.col13flexAb9 > * {width: calc(33.33% - var(--abstand_9) * 2 / 3);}
.col14flexAb9 > * {width: calc(25% - var(--abstand_9) * 3 / 4);}


.formularColL, .formularColR {margin-bottom: 14px;}
.formularColL {width: 240px;}
.formularColR {width: calc(100% - 240px);}
.formularCaptchaWrapper > div > aside {margin-right: 14px;}


@media (max-width: 1440px) {
	.col14 {width: 33%;}
}
@media (max-width: 1240px) {
	
}
@media (max-width: 1024px) {
	.col14 {width: 50%;}
	
	.col13flexAb9 > * {width: calc(50% - var(--abstand_9) / 2);}
	.col14flexAb9 > * {width: calc(33.33% - var(--abstand_9) * 2 / 3);}
}


@media (max-width: 768px) {
	.col34, .col14, .col12, .col12flexAb9 > * {width: 100%;}
	
	.col14flexAb9 > * {width: calc(50% - var(--abstand_9) / 2);}
}


@media (max-width: 600px) {
	.contentWrapper, .bigIncludeTo.col44 {
		padding-left: var(--abstand_9);
		padding-right: var(--abstand_9);
	}
	
	.col14, .col13, .col15, .formularColL, .formularColR {width: 100%;}
	
	.formularColL {margin-bottom: 0;}
	
	.col13flexAb9 > * {width: 100%;}
}

@media (max-width: 500px) {
	.col14flexAb9 > * {width: 100%;}
}


/* --------------------------------------------------------------------- */
/* --------------------------------------------------------------------- */
/* ----------------------------- Abstaende ----------------------------- */
/* --------------------------------------------------------------------- */
/* --------------------------------------------------------------------- */
.tm0 {margin-top: 0px;} .bm0 {margin-bottom: 0px;}
.lm0 {margin-left: 0px;} .rm0 {margin-right: 0px;}
.hm0 {margin-left: 0px; margin-right: 0px;}
.vm0 {margin-top: 0px; margin-bottom: 0px;}
.tp0 {padding-top: 0px;} .bp0 {padding-bottom: 0px;}
.lp0 {padding-left: 0px;} .rp0 {padding-right: 0px;}
.hp0 {padding-left: 0px; padding-right: 0px;}
.vp0 {padding-top: 0px; padding-bottom: 0px;}


.tm6 {margin-top: var(--abstand_6);} .bm6 {margin-bottom: var(--abstand_6);}
.lm6 {margin-left: var(--abstand_6);} .rm6 {margin-right: var(--abstand_6);}
.hm6 {margin-left: var(--abstand_6); margin-right: var(--abstand_6);}
.vm6 {margin-top: var(--abstand_6); margin-bottom: var(--abstand_6);}
.tp6 {padding-top: var(--abstand_6);} .bp6 {padding-bottom: var(--abstand_6);}
.lp6 {padding-left: var(--abstand_6);} .rp6 {padding-right: var(--abstand_6);}
.hp6 {padding-left: var(--abstand_6); padding-right: var(--abstand_6);}
.vp6 {padding-top: var(--abstand_6); padding-bottom: var(--abstand_6);}


.tm9 {margin-top: var(--abstand_9);} .bm9 {margin-bottom: var(--abstand_9);}
.lm9 {margin-left: var(--abstand_9);} .rm9 {margin-right: var(--abstand_9);}
.hm9 {margin-left: var(--abstand_9); margin-right: var(--abstand_9);}
.vm9 {margin-top: var(--abstand_9); margin-bottom: var(--abstand_9);}
.tp9 {padding-top: var(--abstand_9);} .bp9 {padding-bottom: var(--abstand_9);}
.lp9 {padding-left: var(--abstand_9);} .rp9 {padding-right: var(--abstand_9);}
.hp9 {padding-left: var(--abstand_9); padding-right: var(--abstand_9);}
.vp9 {padding-top: var(--abstand_9); padding-bottom: var(--abstand_9);}


.tm15 {margin-top: var(--abstand_15);} .bm15 {margin-bottom: var(--abstand_15);}
.lm15 {margin-left: var(--abstand_15);} .rm15 {margin-right: var(--abstand_15);}
.hm15 {margin-left: var(--abstand_15); margin-right: var(--abstand_15);}
.vm15 {margin-top: var(--abstand_15); margin-bottom: var(--abstand_15);}
.tp15 {padding-top: var(--abstand_15);} .bp15 {padding-bottom: var(--abstand_15);}
.lp15 {padding-left: var(--abstand_15);} .rp15 {padding-right: var(--abstand_15);}
.hp15 {padding-left: var(--abstand_15); padding-right: var(--abstand_15);}
.vp15 {padding-top: var(--abstand_15); padding-bottom: var(--abstand_15);}


.tm18 {margin-top: var(--abstand_18);} .bm18 {margin-bottom: var(--abstand_18);}
.lm18 {margin-left: var(--abstand_18);} .rm18 {margin-right: var(--abstand_18);}
.hm18 {margin-left: var(--abstand_18); margin-right: var(--abstand_18);}
.vm18 {margin-top: var(--abstand_18); margin-bottom: var(--abstand_18);}
.tp18 {padding-top: var(--abstand_18);} .bp18 {padding-bottom: var(--abstand_18);}
.lp18 {padding-left: var(--abstand_18);} .rp18 {padding-right: var(--abstand_18);}
.hp18 {padding-left: var(--abstand_18); padding-right: var(--abstand_18);}
.vp18 {padding-top: var(--abstand_18); padding-bottom: var(--abstand_18);}


.tm25 {margin-top: var(--abstand_25);} .bm25 {margin-bottom: var(--abstand_25);}
.lm25 {margin-left: var(--abstand_25);} .rm25 {margin-right: var(--abstand_25);}
.hm25 {margin-left: var(--abstand_25); margin-right: var(--abstand_25);}
.vm25 {margin-top: var(--abstand_25); margin-bottom: var(--abstand_25);}
.tp25 {padding-top: var(--abstand_25);} .bp25 {padding-bottom: var(--abstand_25);}
.lp25 {padding-left: var(--abstand_25);} .rp25 {padding-right: var(--abstand_25);}
.hp25 {padding-left: var(--abstand_25); padding-right: var(--abstand_25);}
.vp25 {padding-top: var(--abstand_25); padding-bottom: var(--abstand_25);}


.tm36 {margin-top: var(--abstand_36);} .bm36 {margin-bottom: var(--abstand_36);}
.lm36 {margin-left: var(--abstand_36);} .rm36 {margin-right: var(--abstand_36);}
.hm36 {margin-left: var(--abstand_36); margin-right: var(--abstand_36);}
.vm36 {margin-top: var(--abstand_36); margin-bottom: var(--abstand_36);}
.tp36 {padding-top: var(--abstand_36);} .bp36 {padding-bottom: var(--abstand_36);}
.lp36 {padding-left: var(--abstand_36);} .rp36 {padding-right: var(--abstand_36);}
.hp36 {padding-left: var(--abstand_36); padding-right: var(--abstand_36);}
.vp36 {padding-top: var(--abstand_36); padding-bottom: var(--abstand_36);}



@media (max-width: 1440px) {

}


@media (max-width: 1024px) {
	.ttm0 {margin-top: 0px;} .tbm0 {margin-bottom: 0px;}
	.tlm0 {margin-left: 0px;} .trm0 {margin-right: 0px;}
	.thm0 {margin-left: 0px; margin-right: 0px;}
	.tvm0 {margin-top: 0px; margin-bottom: 0px;}
	.ttp0 {padding-top: 0px;} .tbp0 {padding-bottom: 0px;}
	.tlp0 {padding-left: 0px;} .trp0 {padding-right: 0px;}
	.thp0 {padding-left: 0px; padding-right: 0px;}
	.tvp0 {padding-top: 0px; padding-bottom: 0px;}


	.ttm6 {margin-top: var(--abstand_6);} .tbm6 {margin-bottom: var(--abstand_6);}
	.tlm6 {margin-left: var(--abstand_6);} .trm6 {margin-right: var(--abstand_6);}
	.thm6 {margin-left: var(--abstand_6); margin-right: var(--abstand_6);}
	.tvm6 {margin-top: var(--abstand_6); margin-bottom: var(--abstand_6);}
	.ttp6 {padding-top: var(--abstand_6);} .tbp6 {padding-bottom: var(--abstand_6);}
	.tlp6 {padding-left: var(--abstand_6);} .trp6 {padding-right: var(--abstand_6);}
	.thp6 {padding-left: var(--abstand_6); padding-right: var(--abstand_6);}
	.tvp6 {padding-top: var(--abstand_6); padding-bottom: var(--abstand_6);}


	.ttm9 {margin-top: var(--abstand_9);} .tbm9 {margin-bottom: var(--abstand_9);}
	.tlm9 {margin-left: var(--abstand_9);} .trm9 {margin-right: var(--abstand_9);}
	.thm9 {margin-left: var(--abstand_9); margin-right: var(--abstand_9);}
	.tvm9 {margin-top: var(--abstand_9); margin-bottom: var(--abstand_9);}
	.ttp9 {padding-top: var(--abstand_9);} .tbp9 {padding-bottom: var(--abstand_9);}
	.tlp9 {padding-left: var(--abstand_9);} .trp9 {padding-right: var(--abstand_9);}
	.thp9 {padding-left: var(--abstand_9); padding-right: var(--abstand_9);}
	.tvp9 {padding-top: var(--abstand_9); padding-bottom: var(--abstand_9);}


	.ttm15 {margin-top: var(--abstand_15);} .tbm15 {margin-bottom: var(--abstand_15);}
	.tlm15 {margin-left: var(--abstand_15);} .trm15 {margin-right: var(--abstand_15);}
	.thm15 {margin-left: var(--abstand_15); margin-right: var(--abstand_15);}
	.tvm15 {margin-top: var(--abstand_15); margin-bottom: var(--abstand_15);}
	.ttp15 {padding-top: var(--abstand_15);} .tbp15 {padding-bottom: var(--abstand_15);}
	.tlp15 {padding-left: var(--abstand_15);} .trp15 {padding-right: var(--abstand_15);}
	.thp15 {padding-left: var(--abstand_15); padding-right: var(--abstand_15);}
	.tvp15 {padding-top: var(--abstand_15); padding-bottom: var(--abstand_15);}


	.ttm18 {margin-top: var(--abstand_18);} .tbm18 {margin-bottom: var(--abstand_18);}
	.tlm18 {margin-left: var(--abstand_18);} .trm18 {margin-right: var(--abstand_18);}
	.thm18 {margin-left: var(--abstand_18); margin-right: var(--abstand_18);}
	.tvm18 {margin-top: var(--abstand_18); margin-bottom: var(--abstand_18);}
	.ttp18 {padding-top: var(--abstand_18);} .tbp18 {padding-bottom: var(--abstand_18);}
	.tlp18 {padding-left: var(--abstand_18);} .trp18 {padding-right: var(--abstand_18);}
	.thp18 {padding-left: var(--abstand_18); padding-right: var(--abstand_18);}
	.tvp18 {padding-top: var(--abstand_18); padding-bottom: var(--abstand_18);}


	.ttm25 {margin-top: var(--abstand_25);} .tbm25 {margin-bottom: var(--abstand_25);}
	.tlm25 {margin-left: var(--abstand_25);} .trm25 {margin-right: var(--abstand_25);}
	.thm25 {margin-left: var(--abstand_25); margin-right: var(--abstand_25);}
	.tvm25 {margin-top: var(--abstand_25); margin-bottom: var(--abstand_25);}
	.ttp25 {padding-top: var(--abstand_25);} .tbp25 {padding-bottom: var(--abstand_25);}
	.tlp25 {padding-left: var(--abstand_25);} .trp25 {padding-right: var(--abstand_25);}
	.thp25 {padding-left: var(--abstand_25); padding-right: var(--abstand_25);}
	.tvp25 {padding-top: var(--abstand_25); padding-bottom: var(--abstand_25);}


	.ttm36 {margin-top: var(--abstand_36);} .tbm36 {margin-bottom: var(--abstand_36);}
	.tlm36 {margin-left: var(--abstand_36);} .trm36 {margin-right: var(--abstand_36);}
	.thm36 {margin-left: var(--abstand_36); margin-right: var(--abstand_36);}
	.tvm36 {margin-top: var(--abstand_36); margin-bottom: var(--abstand_36);}
	.ttp36 {padding-top: var(--abstand_36);} .tbp36 {padding-bottom: var(--abstand_36);}
	.tlp36 {padding-left: var(--abstand_36);} .trp36 {padding-right: var(--abstand_36);}
	.thp36 {padding-left: var(--abstand_36); padding-right: var(--abstand_36);}
	.tvp36 {padding-top: var(--abstand_36); padding-bottom: var(--abstand_36);}
}


@media (max-width: 768px) {
	
}

@media (max-width: 600px) {
	.mtm0 {margin-top: 0px;} .mbm0 {margin-bottom: 0px;}
	.mlm0 {margin-left: 0px;} .mrm0 {margin-right: 0px;}
	.mhm0 {margin-left: 0px; margin-right: 0px;}
	.mvm0 {margin-top: 0px; margin-bottom: 0px;}
	.mtp0 {padding-top: 0px;} .mbp0 {padding-bottom: 0px;}
	.mlp0 {padding-left: 0px;} .mrp0 {padding-right: 0px;}
	.mhp0 {padding-left: 0px; padding-right: 0px;}
	.mvp0 {padding-top: 0px; padding-bottom: 0px;}


	.mtm6 {margin-top: var(--abstand_6);} .mbm6 {margin-bottom: var(--abstand_6);}
	.mlm6 {margin-left: var(--abstand_6);} .mrm6 {margin-right: var(--abstand_6);}
	.mhm6 {margin-left: var(--abstand_6); margin-right: var(--abstand_6);}
	.mvm6 {margin-top: var(--abstand_6); margin-bottom: var(--abstand_6);}
	.mtp6 {padding-top: var(--abstand_6);} .mbp6 {padding-bottom: var(--abstand_6);}
	.mlp6 {padding-left: var(--abstand_6);} .mrp6 {padding-right: var(--abstand_6);}
	.mhp6 {padding-left: var(--abstand_6); padding-right: var(--abstand_6);}
	.mvp6 {padding-top: var(--abstand_6); padding-bottom: var(--abstand_6);}


	.mtm9 {margin-top: var(--abstand_9);} .mbm9 {margin-bottom: var(--abstand_9);}
	.mlm9 {margin-left: var(--abstand_9);} .mrm9 {margin-right: var(--abstand_9);}
	.mhm9 {margin-left: var(--abstand_9); margin-right: var(--abstand_9);}
	.mvm9 {margin-top: var(--abstand_9); margin-bottom: var(--abstand_9);}
	.mtp9 {padding-top: var(--abstand_9);} .mbp9 {padding-bottom: var(--abstand_9);}
	.mlp9 {padding-left: var(--abstand_9);} .mrp9 {padding-right: var(--abstand_9);}
	.mhp9 {padding-left: var(--abstand_9); padding-right: var(--abstand_9);}
	.mvp9 {padding-top: var(--abstand_9); padding-bottom: var(--abstand_9);}


	.mtm15 {margin-top: var(--abstand_15);} .mbm15 {margin-bottom: var(--abstand_15);}
	.mlm15 {margin-left: var(--abstand_15);} .mrm15 {margin-right: var(--abstand_15);}
	.mhm15 {margin-left: var(--abstand_15); margin-right: var(--abstand_15);}
	.mvm15 {margin-top: var(--abstand_15); margin-bottom: var(--abstand_15);}
	.mtp15 {padding-top: var(--abstand_15);} .mbp15 {padding-bottom: var(--abstand_15);}
	.mlp15 {padding-left: var(--abstand_15);} .mrp15 {padding-right: var(--abstand_15);}
	.mhp15 {padding-left: var(--abstand_15); padding-right: var(--abstand_15);}
	.mvp15 {padding-top: var(--abstand_15); padding-bottom: var(--abstand_15);}


	.mtm18 {margin-top: var(--abstand_18);} .mbm18 {margin-bottom: var(--abstand_18);}
	.mlm18 {margin-left: var(--abstand_18);} .mrm18 {margin-right: var(--abstand_18);}
	.mhm18 {margin-left: var(--abstand_18); margin-right: var(--abstand_18);}
	.mvm18 {margin-top: var(--abstand_18); margin-bottom: var(--abstand_18);}
	.mtp18 {padding-top: var(--abstand_18);} .mbp18 {padding-bottom: var(--abstand_18);}
	.mlp18 {padding-left: var(--abstand_18);} .mrp18 {padding-right: var(--abstand_18);}
	.mhp18 {padding-left: var(--abstand_18); padding-right: var(--abstand_18);}
	.mvp18 {padding-top: var(--abstand_18); padding-bottom: var(--abstand_18);}


	.mtm25 {margin-top: var(--abstand_25);} .mbm25 {margin-bottom: var(--abstand_25);}
	.mlm25 {margin-left: var(--abstand_25);} .mrm25 {margin-right: var(--abstand_25);}
	.mhm25 {margin-left: var(--abstand_25); margin-right: var(--abstand_25);}
	.mvm25 {margin-top: var(--abstand_25); margin-bottom: var(--abstand_25);}
	.mtp25 {padding-top: var(--abstand_25);} .mbp25 {padding-bottom: var(--abstand_25);}
	.mlp25 {padding-left: var(--abstand_25);} .mrp25 {padding-right: var(--abstand_25);}
	.mhp25 {padding-left: var(--abstand_25); padding-right: var(--abstand_25);}
	.mvp25 {padding-top: var(--abstand_25); padding-bottom: var(--abstand_25);}


	.mtm36 {margin-top: var(--abstand_36);} .mbm36 {margin-bottom: var(--abstand_36);}
	.mlm36 {margin-left: var(--abstand_36);} .mrm36 {margin-right: var(--abstand_36);}
	.mhm36 {margin-left: var(--abstand_36); margin-right: var(--abstand_36);}
	.mvm36 {margin-top: var(--abstand_36); margin-bottom: var(--abstand_36);}
	.mtp36 {padding-top: var(--abstand_36);} .mbp36 {padding-bottom: var(--abstand_36);}
	.mlp36 {padding-left: var(--abstand_36);} .mrp36 {padding-right: var(--abstand_36);}
	.mhp36 {padding-left: var(--abstand_36); padding-right: var(--abstand_36);}
	.mvp36 {padding-top: var(--abstand_36); padding-bottom: var(--abstand_36);}
}



/* -------------------------------------------------------------------- */
/* -------------------------------------------------------------------- */
/* ---------------------------- Allgemein ----------------------------- */
/* -------------------------------------------------------------------- */
/* -------------------------------------------------------------------- */
* {
	box-sizing: border-box;
	scroll-behavior: smooth;
}


body {
	margin: 0;
}


.dib {display: inline-block;}
.block, noindex {display: block;}
.none, .radio_none {display: none;}


.flex, .inlineFlex {
	flex-wrap: wrap;
	justify-content: left;
}

.flex {
	display: flex;
}

.inlineFlex {
	display: inline-flex;
}

.flexHl {justify-content: left;}
.flexHr {justify-content: right;}
.flexHc {justify-content: center;}

.flexVt {align-items: start;}
.flexVb {align-items: end;}


.flexWrap {flex-wrap: wrap;}
.flexRow {flex-direction: row;}
.flexCol {flex-direction: column;}


.oScroll {overflow: scroll;}
.oHide {overflow: hidden;}
.oVisible {overflow: visible;}

.noDecoration {text-decoration: none;}
.underline {text-decoration: underline;}

.hr {text-align: right;}
.hl {text-align: left;}
.hc {text-align: center;}
.vt {vertical-align: top;}
.vb {vertical-align: bottom;}
.vm {vertical-align: middle;}

.float_left {float: left;}
.float_right {float: right;}
.float_clear {float: none;}

.absolute {position: absolute;}
.relative {position: relative;}
.fixed {position: fixed;}


.breakAll {
	word-break: break-all;
}


.platzhalter_300 {height: 300px;}
.platzhalter_600 {height: 600px;}


.noTextHide[data-textlength="0"],
.noTextHide[data-textlength="1"] {
	display: none;
}


.show_1440, .show_1240, .show_1024, .show_768, .show_600, .show_460 {
	display: none !important;
}


@media (max-width: 1440px) {
	.hide_1440 {display: none !important;}
	.show_1440 {display: inline-block !important;}
}

@media (max-width: 1240px) {
	.hide_1240 {display: none !important;}
	.show_1240 {display: inline-block !important;}
	.show_1240.flex {display: flex !important;}
}

@media (max-width: 1024px) {
	.hide_1024 {display: none !important;}
	.show_1024 {display: inline-block !important;}
	.show_1024.flex {display: flex !important;}
}

@media (max-width: 768px) {
	.hide_768 {display: none !important;}
	.show_768 {display: inline-block !important;}
	.show_768.flex {display: flex !important;}
}

@media (max-width: 600px) {
	.hide_600 {display: none !important;}
	.show_600 {display: inline-block !important;}
	.show_600.flex {display: flex !important;}
}

@media (max-width: 460px) {
	.hide_460 {display: none !important;}
	.show_460 {display: inline-block !important;}
	.show_460.flex {display: flex !important;}
}




/* ----------------------------------------------------------------- */
/* ----------------------------------------------------------------- */
/* ---------------------------- Module ----------------------------- */
/* ----------------------------------------------------------------- */
/* ----------------------------------------------------------------- */

/* -------------------------------------------------- */
/* ------------------ Kontaktform ------------------- */
/* -------------------------------------------------- */
.anfrageLinks, .anfrageRechts {
	display: inline-block;
	vertical-align: top;
	margin-bottom: var(--abstand_6);
}

.anfrageLinks {
	width: 200px;
}

.anfrageRechts {
	width: calc(100% - 200px);
}

@media (max-width: 600px) {
	.anfrageLinks, .anfrageRechts {
		width: 100%;
	}
	
	.anfrageLinks {
		margin-bottom: 0;
	}
	
	.anfrageRechts {
		margin-bottom: var(--abstand_9);
	}
}




/* ---------------------------------------------------------- */
/* ------------------ Lightframe anpassen ------------------- */
/* ---------------------------------------------------------- */
.lightFrame_bigDiv {
	background-color: var(--weiss) !important;
}

.lfCloseButton {
	width: 20px !important;
	height: 22px !important;
}





/* ----------------------------------------------------- */
/* ------------------ Öffnungszeiten ------------------- */
/* ----------------------------------------------------- */
.standorteWeekday, .standorteTime {
    display: inline-block;
    vertical-align: middle;
}

.standorteWeekday {
    font-family: var(--semibold);
    width: 60px;
}

.standorteTime {
    width: calc(100% - 60px);
}








@media (max-width: 1440px) {
	
}

@media (max-width: 1024px) {
	
}

@media (max-width: 768px) {
	
}

@media (max-width: 600px) {
	
}

@media (max-width: 360px) {
	
}
/* --- --- */
/* MainHeaderCSS  */
/* ----------------------------------------------------- */
/* -------------------- Main Header -------------------- */
/* ----------------------------------------------------- */
#mainHeader {
    margin-bottom: var(--abstand_18);
}


/* --------------- Top --------------- */
.mainHeaderTopLink {
    color: var(--weiss);
    font-size: 18px;
    text-decoration: none;
    display: flex;
    flex-wrap: nowrap;
    justify-content: left;
    align-items: center;
    height: 45px;
    padding: 0 15px;
}

.mainHeaderTopLink:hover {
    color: var(--weiss);
}

.mainHeaderTopLagerhausIcon, .mainHeaderTopGewerbeIcon {
    height: 26px;
    width: 30px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 10px;
}

.mainHeaderTopLagerhausIcon {
    background-image: url('/bilder/lagerhaus.gif');
}

.mainHeaderTopGewerbeIcon {
    background-image: url('/bilder/gewerbeshop.gif');
}



#mainHeaderMid {
    position: relative;
}



/* Logo */
#mainHeaderMidL {
    width: 300px;
}

#mainHeaderMidLogo, #mainHeaderMidLogoText {
    display: inline-block;
    vertical-align: bottom;
}

#mainHeaderMidLogo {
    width: 120px;
    margin-right: 10px;
}

#mainHeaderMidLogo img {
    width: 100%;
    display: block;
}


.mainHeaderEditIcon{
    display: inline-block;
    vertical-align: top;
    width: 20px;
    aspect-ratio: 1;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url('/bilder/edit_icon.svg');
    margin-left: 5px;
}



/* Suche */
#mainHeaderMidM {
    width: calc(100% - 300px - 270px);
}

.mainHeaderSucheWrapper {
    position: relative;
    height: 40px;
    width: 100%;
    max-width: 400px;
}

.mainHeaderSucheTb {
    width: calc(100% - 40px);
    height: 100%;
    background-color: var(--grau);
    border: none;
    outline: none;
    font-family: inherit;
    font-size: inherit;
    padding: 12px;
}

.mainHeaderSucheBtn {
    width: 40px;
    height: 100%;
    background-color: var(--dunkelgrau);
    background-image: url('/bilder/headerSucheIcon.svg');
    background-position: center;
    background-size: 60%;
    background-repeat: no-repeat;
    border: none;
    outline: none;
}


/* Icons */
#mainHeaderMidR {
    width: 270px;
}

.mainHeaderMidIconLink {
    display: inline-block;
    vertical-align: top;
    text-decoration: none;
    margin-right: var(--abstand_9);
}

label.mainHeaderMidIconLink {
    font-family: var(--semibold);
}

.mainHeaderMidIconLink:last-child {
    margin-right: 0;
}

.mainHeaderIcon {
    display: inline-block;
    vertical-align: top;
    width: 26px;
    aspect-ratio: 1;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.mainHeaderStandorte {
    background-image: url('/bilder/standorte.svg');
}

.mainHeaderLogin {
    background-image: url('/bilder/login.svg');
}

.mainHeaderWunschliste {
    background-image: url('/bilder/wunschliste.svg');
}

.mainHeaderWarenkorb {
    background-image: url('/bilder/warenkorb.svg');
}


@media (max-width: 1024px) {
    #mainHeaderMid {
        display: grid;
        grid:
            'MenueL MenueR'
            'MenueM MenueM';
        justify-content: unset;
    }

    #mainHeaderMidL, #mainHeaderMidM, #mainHeaderMidR {
        width: 100%;
    }

    #mainHeaderMidL {
        grid-area: MenueL;
    }

    #mainHeaderMidM {
        grid-area: MenueM;
        margin-top: var(--abstand_9);
    }

    #mainHeaderMidR {
        grid-area: MenueR;
    }


    #mainHeaderMidLogo {
        width: 75px;
        margin-right: 0;
    }

    #mainHeaderMidLogoText {
        display: block;
    }

    .mainHeaderIhrStandortO, .mainHeaderIhrStandortU {
        display: inline-block;
        vertical-align: top;
    }

    .mainHeaderIhrStandortO {

    }

    .mainHeaderIhrStandortU {
        font-size: 80%;
    }


    .mainHeaderSucheWrapper {
        max-width: unset;
    }
}

@media (max-width: 600px) {
    .mainHeaderTopLagerhausIcon, .mainHeaderTopGewerbeIcon {
        margin-right: 0;
    }

    .mainHeaderTopLagerhausIconText {
        display: none;
    }


    .mainHeaderMidIconLink {
        margin-right: 8px;
    }
    
    .mainHeaderIconText {
        display: none;
    }
}


/* Menue Bottom */
#mainHeaderBot {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
}

#mainMenueSeitenreiter {
    width: calc(100% - 350px);
}

#mainHeaderGreeting {
    width: 350px;
    display: flex;
    align-items: center;
    justify-content: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#mainHeaderGreetingLogout {
    text-decoration: none;
    margin-left: var(--abstand_9);
	margin-top: 1px;
}

@media (max-width: 1160px) {
    #mainMenueSeitenreiter {
        width: calc(100% - 80px);
    }

    #mainHeaderGreeting {
        width: 80px;
    }

    #mainHeaderGreetingText {
        display: none;
    }
}

@media (max-width: 1024px) {
    #mainHeaderGreeting {
        display: none;
    }
}


/* Main Menue */
#mainMenueChk, #mainMenue_mobile_chk, #mainMenue_kb_show_menu, #mainMenue_kb_hide_menu {
    display: none;
    margin: 0;
}

#mainMenue, #mainMenue ul {
    margin: 0;
    list-style: none;
}

#mainMenue {
    padding-left: 0;
}

#mainMenue a {
    display: block;
    text-decoration: none;

}

#mainMenue ul {
    display: none;
}

#mainMenue > li > ul ul {
    display: none;
}


@media (min-width: 1025px) {
    #mainMenueTopWrapper, #mainMenueLblHideLayer, #mainMenueLblShow,
    #mainMenue a[href="./logout"], #mainMenue li:has(a[href="./logout"]) {
        display: none;
    }

    #mainMenue {
        display: flex;
        flex-wrap: wrap;
        justify-content: left;
        column-gap: var(--abstand_15);
    }

    #mainMenue > li {
        position: relative;
        padding: var(--abstand_9) 0;
    }

    #mainMenue ul {
        position: absolute;
        background-color: var(--weiss);
        padding: var(--abstand_6);
        top: 100%;
        left: calc(0px - var(--abstand_6));
        width: 300px;
		z-index: 1;
        box-shadow: 0 3px 6px #00000029;
    }

    #mainMenue li:hover > ul {
        display: block;
    }

    #mainMenue > li > div {
        display: none;
    }

    #mainMenue ul > li {
        padding: 4px 0;
    }
    
}


@media (max-width: 1024px) {
    #mainMenueLblShow {
        display: inline-block;
        vertical-align: bottom;
        width: 30px;
        aspect-ratio: 1;
        background-image: url('/bilder/menue_open.svg');
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        margin-right: 10px;
    }

    #mainMenueSeitenreiter {
        position: fixed;
        height: 100%;
        width: 100%;
        max-width: 400px;
        top: 0;
        left: -400px;
        transition: left 400ms ease-in-out;
        background-color: var(--weiss);
        z-index: 5;
    }

    #mainMenueChk:checked ~ #mainMenueSeitenreiter {
        left: 0;
    }

    #mainMenueLblHideLayer {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        cursor: unset;
        background-color: var(--dunkelgrau);
        opacity: 0;
        pointer-events: none;
        transition: opacity 400ms ease-in-out;
        z-index: 5;
    }

    #mainMenueChk:checked ~ #mainMenueLblHideLayer {
        opacity: 0.5;
        pointer-events: all;
    }

    #mainMenueTopWrapper {
        background-color: var(--waldgruen);
        padding: var(--abstand_6) var(--abstand_9);
        margin-bottom: 3px;
    }

    #mainMenueMobilLogo {
        display: inline-block;
        vertical-align: top;
        height: 35px;
    }

    #mainMenueMobilLogo img {
        display: block;
        height: 100%;
    }

    #mainMenueLblHide {
        display: inline-block;
        vertical-align: bottom;
        width: 35px;
        aspect-ratio: 1;
        background-image: url('/bilder/menue_close.svg');
        background-position: center;
        background-size: 35%;
        background-repeat: no-repeat;
        position: absolute;
        top: 10px;
        right: 5px;
    }

	
	#mainMenue {
		overflow-y: auto;
		height: calc(100% - 60px);
		scrollbar-width: thin;
	}

    #mainMenue > li {
        display: block;
        
        position: relative;
    }

    #mainMenue > li > a {
        background-color: var(--hellgrau);
        margin-bottom: 3px;
        padding: var(--abstand_6) calc(var(--abstand_6) + 35px) var(--abstand_6) var(--abstand_9);
        transition: color 200ms ease-in-out, background-color 200ms ease-in-out;
    }

    #mainMenue > li.isnode.openleaf > a {
        background-color: var(--waldgruen);
        color: var(--weiss);
    }

    #mainMenue > li:last-of-type > a {
        margin-bottom: 0;
    }


    #mainMenue li > div {
        display: none;
        position: absolute;
        top: 5px;
        right: 5px;
        width: 30px;
        aspect-ratio: 1;
        cursor: pointer;
    }

    #mainMenue li.isnode > div {
        display: block;
    }


    #mainMenue li.isnode > div::before, #mainMenue li.isnode > div::after {
        content: '';
        display: block;
        background-color: var(--waldgruen);
        position: absolute;
        transition: background-color 200ms ease-in-out;
    }

    #mainMenue li.isnode > div::before {
        width: 12px;
        height: 2px;
        top: calc(50% - 1px);
        left: calc(50% - 6px);
    }

    #mainMenue li.isnode > div::after {
        width: 2px;
        height: 12px;
        top: calc(50% - 6px);
        left: calc(50% - 1px);
    }

    #mainMenue li.isnode.openleaf > div::before {
        background-color: var(--weiss);
    }

    #mainMenue li.isnode.openleaf > div::after {
        display: none;
    }


    #mainMenue li > ul {
        padding-left: 0;
    }

    #mainMenue li.isnode.openleaf > ul {
        display: block;
    }

    #mainMenue > li > ul > li {
        display: block;
    }

    #mainMenue > li > ul > li > a {
        display: block;
        padding: var(--abstand_6) var(--abstand_9);
    }
}




/* ----- Back to top ----- */
#backToTopOuterWrapper {
    position: fixed;
    width: 100%;
    height: 100%;
    pointer-events: none;
    left: 0;
    top: 0;
	z-index: 1;
}

#backToTopWrapper {
    position: relative;
    height: 100%;
}

#backtotop {
	display: none;
	position: absolute;
	z-index: 1;
    bottom: 15px;
    right: 105px;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-bottom: 37px solid var(--waldgruen);
    opacity: 0.5;
    pointer-events: all;
}



/* ----- No JS ----- */
#noJSMessage {
	width: 40px;
	height: 40px;
	position: fixed;
	right: var(--abstand_15);
	bottom: var(--abstand_15);
	pointer-events: all;
	z-index: 1;
}




/* ----- Login ----- */
/* ----- Suchwörter ----- */
#mainHeaderLoginWrapper, #mainHeaderSucheSearchwordsWrapper {
    display: none;
    position: absolute;
    z-index: 2;
}

#mainHeaderLoginWrapper {
    top: calc(100% + 10px);
    right: 0;
    width: calc(100% - 120px);
    max-width: 500px;
    height: 100vh;
    max-height: 455px;
    background-color: var(--hellgrau);
}

#mainHeaderSucheSearchwordsWrapper {
    border-top: 2px solid var(--waldgruen);
    width: 100%;
    left: 0;
    top: 100%;
    background-color: var(--weiss);
    text-align: left;
}

#mainHeaderLoginWrapper::after {
    content: '';
    display: block;
    position: absolute;
    top: -5px;
    right: 19px;
    background-color: var(--hellgrau);
    width: 20px;
    aspect-ratio: 1;
    transform: rotate(45deg);
    z-index: -1;
}

#mainHeaderLoginChk:checked ~ #mainHeaderLoginWrapper,
#mainHeaderSucheSearchwordsChk:checked ~ #mainHeaderTopOuterWrapper #mainHeaderSucheSearchwordsWrapper {
    display: block;
}

#mainHeaderLoginWrapper iframe {
    width: 100%;
    height: 100%;
    border: none;
    background-color: var(--weiss);
}

#mainHeaderLoginCloseArea, #mainHeaderSucheSearchwordsCloseArea {
    display: block;
    position: fixed;
    left: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    pointer-events: none;
    background-color: var(--schriftgrau);
    transition: opacity 200ms ease-in-out;
}

#mainHeaderLoginCloseArea {
    z-index: 2;
}

#mainHeaderTopWrapper, #mainHeaderTopOuterWrapper {
    position: relative;
}

#mainHeaderSucheSearchwordsCloseArea, #mainHeaderTopWrapper, #mainHeaderTopOuterWrapper {
    z-index: 4;
}

#mainHeaderLoginChk:checked ~ #mainHeaderLoginCloseArea, #mainHeaderSucheSearchwordsChk:checked ~ #mainHeaderSucheSearchwordsCloseArea {
    opacity: 0.8;
    pointer-events: all;
}


#mainHeaderLoginClose {
    display: block;
    width: 15px;
    aspect-ratio: 1;
    position: absolute;
    top: 20px;
    right: 15px;
    background-image: url('/bilder/close_black.svg');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}



#mainHeaderSucheSearchwordsWrapper .sucheSearchword {
    display: block;
    width: 100%;
    font-family: inherit;
    color: inherit;
    text-decoration: none;
    padding: 4px 10px;
}

#mainHeaderSucheSearchwordsWrapper .sucheSearchword:hover {
    background-color: var(--mittelgrau);
    color: inherit;
}


@media (max-width: 1024px) {
    #mainHeaderLoginWrapper {
        top: 90px;
    }
}

@media (max-width: 768px) {
    #mainHeaderLoginWrapper {
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 600px) {
    #mainHeaderLoginWrapper {
        top: 94px;
    }
}
/* --- --- */