/* css zu sortiment_detail */

/* GewerbeShopTreeCSS  */
/* --------------------------------------------------- */
/* -------------------- Shop Tree -------------------- */
/* --------------------------------------------------- */
#checkSortimentSeitenreiter, #sortimentTree_mobile_chk, #sortimentTree ul, #sortimentTree_kb_show_menu, #sortimentTree_kb_hide_menu {
    display: none;
}

#sortimentSeitenreiter {
    font-size: 85%;
}

#sortimentTreeHeadline {
	display: block;
	color: var(--white);
	text-decoration: none;
    text-transform: uppercase;
    padding: 10px var(--abstand_9);
}



/* ---------- Ebene 1 ---------- */
#sortimentTree, #sortimentTree ul {
	list-style: none;
	margin: 0;
}

#sortimentTree {
	padding-left: 0;
}

#sortimentTree li {
	position: relative;
}

#sortimentTree a {
    display: block;
    color: inherit;
    text-decoration: none;
    padding-left: 22px;
}

#sortimentTree li.openleaf > a {
    font-family: var(--semibold);
    color: var(--green);
}



/* ---------- Ebene 2 ---------- */
#sortimentTree ul {
	padding: 3px 0 2px 20px;
}

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




/* ---------- Ebene 3 ---------- */
#sortimentTree > li > ul > li ul {
	padding: 3px 0 3px 20px;
}



@media (min-width: 1024px) {
	#lblSortimentSeitenreiterHideBereich, #lblSortimentSeitenreiterOpen {
        display: none;
    }
}

@media (max-width: 1024px) {
	#sortimentSeitenreiter, #lblSortimentSeitenreiterOpen, #lblSortimentSeitenreiterHideBereich {
        z-index: 5;
    }

	#sortimentSeitenreiter, #lblSortimentSeitenreiterOpen {
		position: fixed;
		top: 280px;
	}
	
	#sortimentSeitenreiter {
		width: calc(100% - 36px);
		max-width: 650px;
		right: calc(-650px - 36px);
		transition: 500ms;
		background-color: white;
	}
	
	#checkSortimentSeitenreiter:not(:checked) ~ #sortimentSeitenreiter {
        right: 0;
    }

    #lblSortimentSeitenreiterOpen, #lblSortimentSeitenreiterClose {
        background-color: var(--green);
    }

	#lblSortimentSeitenreiterOpen {
		right: 0;
		display: block;
		width: 56px;
		height: 56px;
		z-index: 1;
		transition: 200ms;
		transform: rotate(180deg);
	}
	
	#lblSortimentSeitenreiterClose {
		display: block;
		position: absolute;
		top: 80px;
		left: -36px;
		width: 36px;
		height: 70px;
		background-size: 17px;
	}

    #lblSortimentSeitenreiterOpen::after, #lblSortimentSeitenreiterClose::after {
        content: '';
        width: 16px;
        height: 16px;
        border-top: 3px solid white;
        border-right: 3px solid white;
        border-right-width: 3px;
        border-right-style: solid;
        border-right-color: white;
        position: absolute;
	}

    #lblSortimentSeitenreiterOpen::after {
        top: 18px;
        left: 14px;
        transform: rotate(45deg);
    }

    #lblSortimentSeitenreiterClose::after {
        top: 26px;
        left: 3px;
        transform: rotate(45deg);
    }

	
	#lblSortimentSeitenreiterHideBereich {
		display: block;
		position: fixed;
		top: 0;
		right: 0;
		height: 100%;
		width: 100%;
		cursor: unset;
		opacity: 0;
		pointer-events: none;
		transition: opacity 400ms;
		background-color: rgba(0, 0, 0, 0.2);
	}
	
	#checkSortimentSeitenreiter:not(:checked) ~ #lblSortimentSeitenreiterHideBereich {
		opacity: 1;
		pointer-events: all;
	}
	
	
	#sortimentTree {
		height: 350px;
        max-height: calc(100vh - 280px - 43px);
		overflow: auto;
		scrollbar-width: thin;
        padding: var(--abstand_9);
	}

    #sortimentTreeHeadline {
        margin-bottom: 0;
    }
}




/* ---------------------------------------------- */
/* ---------------- hasnode divs ---------------- */
/* ---------------------------------------------- */
#sortimentTree li > div {
    position: absolute;
	width: 100%;
	cursor: pointer;
    height: 26px;
    pointer-events: none;
}

#sortimentTree li.isnode > div {
    pointer-events: all;
}

#sortimentTree li > div::before {
    content: '';
    display: block;
    position: absolute;
}

#sortimentTree li:not(.isnode) > div::before {
    width: 16px;
    aspect-ratio: 1;
    top: 5px;
    left: 0;
    background-image: url('/bilder/gewerbepreisliste/doc.gif');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

#sortimentTree li.isnode > div::before {
    width: 10px;
    aspect-ratio: 1;
    top: 7px;
    left: 0;
    transform: rotate(-45deg);
    border-right: 2px solid var(--green);
    border-bottom: 2px solid var(--green);
}

#sortimentTree li.isnode.openleaf > div::before {
    transform: rotate(-135deg);
    top: 10px;
    left: 5px;
}

@media (max-width: 1024px) {

}




/* ---------------------------------------------- */
/* ---------------- Confirmation ---------------- */
/* ---------------------------------------------- */
#BasketConfirmationContainer input[type=checkbox] {
	display: none;
}

#BasketConfirmationContainer {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 999;
}

#BasketConfirmation {
	display: none;
	pointer-events: all;
	padding: 10px 20px;
	background-color: var(--green);
	color: white;
}

#BasketConfirmationContainer input[type=checkbox]:checked ~ #BasketConfirmation {
	display: block;
}

#BasketConfirmationContainer input[type=checkbox]:checked ~ #lblBasketConfirmationArea {
	pointer-events: all;
	width: 100%;
	height: 100%;
	position: absolute;
	background-color: rgba(0, 0, 0, 0.2);
	z-index: -1;
	cursor: unset;
}

#confirmationAddMessage, #confirmationRemoveMessage {
	display: none;
}




/* ---------------------------------------- */
/* ---------------- Filter ---------------- */
/* ---------------------------------------- */
#shopFilterWrapper {
    font-size: 85%;
    border: 1px solid var(--gray);
}

#shopFilterHeadline {
    padding: 10px var(--abstand_9);
}

#freeClassFilter {
    padding: var(--abstand_9);
}

.shopFilter {
    height: 35px;
    
}

.shopFilterContainer {
    margin-top: 5px;
}

.shopFilterContainer:first-of-type {
    margin-top: 0;
}

.shopFilterContainer:nth-of-type(n+4) {
    display: none;
}

#shopFilterMoreChk:checked ~ #freeClassFilter .shopFilterContainer:nth-of-type(n+4) {
    display: block;
}


#freeClassFilter[data-filtercount="1"] ~ #shopFilterMoreLblWrapper,
#freeClassFilter[data-filtercount="2"] ~ #shopFilterMoreLblWrapper,
#freeClassFilter[data-filtercount="3"] ~ #shopFilterMoreLblWrapper {
	display: none;
}

#shopFilterLblLess {
    display: none;
}

#shopFilterMoreChk:checked ~ #shopFilterMoreLblWrapper #shopFilterLblMore {
    display: none;
}

#shopFilterMoreChk:checked ~ #shopFilterMoreLblWrapper #shopFilterLblLess {
    display: inline;
}

@media (max-width: 1024px) {
    #shopFilterWrapper {
        display: none;
    }
}
/* --- --- */
/* GewerbeShopUebersichtCSS  */
/* ------------------------------------------------------ */
/* -------------------- Shop Columns -------------------- */
/* ------------------------------------------------------ */
.sortimentLinks, .sortimentRechts {
	display: inline-block;
	vertical-align: top;
}

.bigIncludeTo.col44 .sortimentLinks {
    width: 270px;
}

.bigIncludeTo.col44 .sortimentRechts {
	width: calc(100% - 270px);
	padding-left: var(--abstand_9);
}

@media (max-width: 1024px) {
	.bigIncludeTo.col44 .sortimentLinks, .bigIncludeTo.col44 .sortimentRechts {
        width: 100%;
    }

	.bigIncludeTo.col44 .sortimentLinks {
        margin-bottom: 0;
    }

	.bigIncludeTo.col44 .sortimentRechts {
        padding-left: 0;
    }

}




/* ------------------------------------------- */
/* ---------------- Nav Links ---------------- */
/* ------------------------------------------- */
.shopNavLeft {
    width: calc(100% - 450px);
    padding-right: var(--abstand_9);
}

.shopNavButtonWrapper, .shopNavButtonWrapper2 {
    gap: var(--abstand_9);
    
}

.shopNavButtonWrapper {
	width: 450px;
}


#lblShopAnsichtList, #lblShopAnsichtBilder {
	display: inline-block;
	vertical-align: top;
	width: 35px;
	height: 30px;
	background-size: contain;
	background-repeat: no-repeat;
	cursor: pointer;
	margin-right: 10px;
}

#lblShopAnsichtList {background-image: url("/bilder/button_liste.gif");}

#lblShopAnsichtBilder {background-image: url("/bilder/button_boxen.gif");}

#radioShopAnsichtList:checked ~ noindex > #shopNav #lblShopAnsichtList {background-image: url("/bilder/button_liste_selected.gif");}

#radioShopAnsichtBilder:checked ~ noindex > #shopNav #lblShopAnsichtBilder {background-image: url("/bilder/button_boxen_selected.gif");}

#radioShopAnsichtBilder:checked ~ #shopListansichtHeader,
#radioShopAnsichtBilder:checked ~ #sortimentUebersicht .shopListansichtArtikel,
#radioShopAnsichtList:checked ~ #sortimentUebersicht .shopBildansichtArtikel {
	display: none;
}

#chkShopAnsprechpartner:checked ~ .shopButtonAnsprechpartner {
	background-color: var(--green);
}

.shopNavFilter {
    height: 30px;
    margin-bottom: var(--abstand_9);
    width: 150px !important;
}

.shopNavFilter:last-of-type {
    margin-bottom: var(--abstand_18);
}


.shopPagingWrapper a {
    text-decoration: none;
}


@media (max-width: 1440px) {
    .shopNavLeft, .shopNavButtonWrapper {
        width: 100%;
    }

    .shopNavLeft {
        padding-right: 0;
    }

    .shopNavButtonWrapper {
        justify-content: left;
    }
}




/* --------------------------------------- */
/* ---------------- Icons ---------------- */
/* --------------------------------------- */
.shopProduktInfoLink {
    display: inline-block;
    width: 20px;
    aspect-ratio: 1;
    background-image: url('/bilder/info_green.gif');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.shopBildansichtArtikel .shopProduktInfoLink {
    vertical-align: top;
    width: 17px;
}


.shopAmpel {
    display: inline-block;
    width: 10px;
    aspect-ratio: 1;
    border-radius: 5px;
    background-color: var(--green);
}

.shopAmpel.ampel-00 {
    background-color: var(--red);
    pointer-events: none;
}

.shopBildansichtArtikel .shopAmpel {
    vertical-align: top;
}


.shopPreisinfoLink {
    display: inline-block;
    vertical-align: top;
    width: 30px;
    aspect-ratio: 1;
    background-image: url('/bilder/gewerbepreisliste/prozent.gif');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.shopBildansichtArtikel .shopPreisinfoLink {
    width: 20px;
    position: absolute;
    bottom: 35px;
    right: 2px;
}


.shopZuUgr {
    display: inline-block;
    vertical-align: top;
    width: 20px;
    aspect-ratio: 1;
    background-image: url('/bilder/Strich_icon.gif');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}




/* --------------------------------------------- */
/* ---------------- Artikel Box ---------------- */
/* --------------------------------------------- */
#radioShopAnsichtBilder:checked ~ #sortimentUebersicht {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    gap: var(--abstand_9);
}

.shopBildansichtArtikel {
    width: calc(25% - var(--abstand_9) * 3 / 4);
    background-color: var(--gray3);
    border: 1px solid var(--gray2);
    position: relative;
    transition: border-color 100ms ease-in-out, box-shadow 100ms ease-in-out;
	font-size: 90%;
}

.shopBildansichtArtikel:hover {
    border-color: var(--green);
    box-shadow: var(--gray2) 2px 2px 5px;
}

.shopBildansichtArtikelBild {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 240px;
    background-color: var(--white);
    padding: var(--abstand_9);
}

.shopBildansichtArtikelBild img {
    width: 100%;
    height: 100%;
    object-fit: scale-down;
    object-position: center;
}

.shopBildansichtArtikelText {
    padding: var(--abstand_9) var(--abstand_9) calc(var(--abstand_9) * 2 + 25px) var(--abstand_9);
}

.shopBildansichtArtikelInWarenkorb {
    width: 25px;
    aspect-ratio: 1;
    position: absolute;
    bottom: 0;
    right: 0;
    outline: none;
    border: none;
    background-color: var(--green);
    background-image: url('/bilder/warenkorb_big.gif');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.shopBildansichtPreisArtNrWrapper {
    position: absolute;
    bottom: var(--abstand_9);
    left: var(--abstand_9);
    width: calc(100% - var(--abstand_9) - 35px);
    line-height: 100%;
}


.show0Price {
    display: inline;
}

.hide0Price, .show1Price {
    display: none;
}

.shopBildansichtInfoLagerndWrapper {
    position: absolute;
    top: var(--abstand_9);
    right: var(--abstand_9);
}


.shopListansichtPicArt[src=""], .shopListansichtPicProd,
.shopListansichtMehrBildArt[src=""], .shopListansichtMehrBildProd,
.shopBildansichtArtikelBildArt[src=""], .shopBildansichtArtikelBildProd {
	display: none;
}

.shopListansichtPicArt[src=""] ~ .shopListansichtPicProd:not([src=""]),
.shopListansichtMehrBildArt[src=""] ~ .shopListansichtMehrBildProd:not([src=""]),
.shopBildansichtArtikelBildArt[src=""] ~ .shopBildansichtArtikelBildProd:not([src=""]) {
	display: block;
}


@media (max-width: 1440px) {
    .shopBildansichtArtikel {
        width: calc(33.33% - var(--abstand_9) * 2 / 3);
    }
}

@media (max-width: 768px), (max-width: 1240px) and (min-width: 1025px) {
    .shopBildansichtArtikel {
        width: calc(50% - var(--abstand_9) / 2);
    }
}

@media (max-width: 600px) {
    .shopBildansichtArtikel {
        width: 100%;
    }
}


/* ----------------------------------------------- */
/* ---------------- Artikel Liste ---------------- */
/* ----------------------------------------------- */
#shopListansichtHeader {
    background-color: var(--gray3);
    padding: 10px;
	font-size: 90%;
}

.shopListansichtArtikel {
    padding: 10px;
    border-bottom: 2px dotted var(--gray2);
	font-size: 90%;
}

.shopListansichtArtikel:nth-last-of-type(2) {
    border-bottom: none;
}

.shopListansichtCol, .shopPrivatListansichtCol {
    display: inline-block;
    vertical-align: top;
    padding-right: 10px;
}


.shopListansichtCol:nth-of-type(1), .shopPrivatListansichtCol:nth-of-type(1) {
    width: 140px;
}

.shopListansichtCol:nth-of-type(2) {
    width: calc(100% - 140px - 130px - 150px - 40px - 40px - 170px);
}

.shopPrivatListansichtCol:nth-of-type(2) {
    width: calc(100% - 140px - 150px - 40px - 40px - 170px);
}

.shopListansichtCol:nth-of-type(3) {
    width: 130px;
}

.shopListansichtCol:nth-of-type(4), .shopPrivatListansichtCol:nth-of-type(3) {
    width: 150px;
}

.shopListansichtCol:nth-of-type(5), .shopPrivatListansichtCol:nth-of-type(4) {
    width: 40px;
}

.shopListansichtCol:nth-of-type(6), .shopPrivatListansichtCol:nth-of-type(5) {
    width: 40px;
}

.shopListansichtCol:nth-of-type(7), .shopPrivatListansichtCol:nth-of-type(6) {
    width: 170px;
    padding-right: 0;
}

@media (max-width: 1440px) {
    .shopListansichtCol:nth-of-type(2) {
        width: calc(100% - 140px - 150px - 40px - 40px - 170px);
    }


    
    .shopListansichtCol:nth-of-type(3) {
        display: none;
    }
}

@media (max-width: 1240px) {
    .shopListansichtCol:nth-of-type(1) {
        width: 100px;
    }

    .shopListansichtCol:nth-of-type(2) {
        width: calc(100% - 100px - 150px - 40px - 40px - 170px);
    }

    .shopPrivatListansichtCol:nth-of-type(2) {
        width: calc(100% - 140px - 40px - 40px - 170px);
    }

    .shopPrivatListansichtCol:nth-of-type(3) {
        display: none;
    }
}

@media (max-width: 1240px) and (min-width: 1025px) {
    .shopListansichtCol:nth-of-type(1) {
        display: none;
    }

    .shopListansichtCol:nth-of-type(2) {
        width: calc(100% - 150px - 40px - 40px - 170px);
    }
}


@media (max-width: 768px) {
    .shopListansichtCol:nth-of-type(1), .shopPrivatListansichtCol:nth-of-type(1) {
        width: 40px;
    }

    .shopListansichtCol:nth-of-type(2) {
        width: calc(100% - 40px - 40px - 170px);
    }

    .shopPrivatListansichtCol:nth-of-type(2) {
        width: calc(100% - 40px - 40px - 170px);
    }
    
    .shopListansichtCol:nth-of-type(4), .shopPrivatListansichtCol:nth-of-type(4) {
        display: none;
    }

    .shopListansichtCol:nth-of-type(5) {
        display: none;
    }
}

@media (max-width: 600px) {
    .shopListansichtCol:nth-of-type(2), .shopPrivatListansichtCol:nth-of-type(2) {
        width: calc(100% - 40px - 40px);
    }

    .shopListansichtCol:nth-of-type(7), .shopPrivatListansichtCol:nth-of-type(6) {
        width: 100%;
        margin-top: var(--abstand_18);
        text-align: right;
    }

    .shopListansichtKaufenWrapper {
        display: inline-block;
        vertical-align: top;
        width: 170px;
    }
}



.shopListansichtPic {
    display: inline-block;
    vertical-align: top;
}

.shopListansichtPic img {
    max-height: 90px;
}


.lblSortimentListansichtArtikelDetails {
    display: inline-block;
    vertical-align: top;
    width: 20px;
    height: 18px;
    position: relative;
}

.lblSortimentListansichtArtikelDetails::after {
    content: '';
    display: inline-block;
    vertical-align: top;
    width: 12px;
    height: 12px;
    transform: rotate(45deg);
    cursor: pointer;
    border-right: 2px solid var(--green);
    border-bottom: 2px solid var(--green);
    position: absolute;
    top: 0;
    left: 3px;
}

.chkSortimentListansichtArtikelDetails:checked ~ .shopListansichtCol .lblSortimentListansichtArtikelDetails {
    transform: rotate(180deg);
}


.shopShowMerkliste {
    display: inline-block;
    vertical-align: bottom;
    width: 30px;
    height: 30px;
    cursor: pointer;
}

.shopShowMerklistePriv {
    width: 25px;
    height: 25px;
}

.merklisteAdd, .merklisteRemove {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.merklisteAdd {
    background-image: url('/bilder/gewerbepreisliste/auf_merkliste.gif');
}

.merklisteRemove {
    background-image: url('/bilder/gewerbepreisliste/von_merkliste.gif');
}


.shopListansichtKaufenWrapper {
    background-color: var(--gray3);
    padding: 5px;
}

.shopWeitereListansichtKaufenButton {
    border: none;
    outline: none;
    background-color: var(--green);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
	border-radius: 5px;
	color: var(--white);
	padding: 6px 8px;
}

.shopAnzahlArtikelList {
    width: 70px;
    font-family: inherit;
    font-size: inherit;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid var(--darkgray);
    outline: none;
    margin-right: 5px;
}

.shopListansichtInWarenkorbEinheit {
    margin-right: 5px;
	font-size: 80%;
}


.shopListansichtMehrWrapper {
    display: none;
    padding-left: 140px;
	margin-top: var(--abstand_9);
	position: relative;
}

.chkSortimentListansichtArtikelDetails:checked ~  .shopListansichtMehrWrapper {
    display: block;
}

.shopListansichtMehrL, .shopListansichtMehrR {
    display: inline-block;
    vertical-align: top;
}

.shopListansichtMehrL {
    width: calc(100% - 170px - 40px);
    padding-right: 40px;
}

.shopListansichtMehrR {
    width: calc(170px + 40px);
}

.shopListansichtMehrBild img {
    max-height: 260px;
}

.shopProduktInfoLinkMehr{
	position: absolute;
	top: var(--abstand_9);
	left: 0;
}


@media (max-width: 1240px) {
    .shopListansichtMehrWrapper {
        padding-left: 100px;
    }
}

@media (max-width: 768px) {
    .shopListansichtMehrWrapper {
        padding-left: 40px;
    }

    .shopListansichtMehrL {
        width: calc(100% - 170px);
    }

    .shopListansichtMehrR {
        width: 170px;
    }
}

@media (max-width: 600px) {
    .shopListansichtMehrWrapper {
        padding-left: 0;
    }

    .shopListansichtMehrL, .shopListansichtMehrR {
        width: 100%;
    }

    .shopListansichtMehrL {
        padding-right: 0;
        margin-bottom: var(--abstand_18);
    }

    .shopProduktInfoLinkMehr {
        top: 0;
        left: unset;
        right: 0;
    }
}



/* ---------------- Faktor ---------------- */
.shopFaktor_1[data-faktor="1"], .shopRabatt[data-rabatt="0,00"] {
    display: none;
}


/* ---------------- Kein Listenpreis ---------------- */
.shopLp_0_show, .shopLp_0_hide[data-lp="0,00"] {
    display: none;
}

.shopLp_0_show[data-lp="0,00"] {
    display: inline;
}


/* ---------------- Warenkorb bei Übersicht ---------------- */
.shopListansichtWarenkorbButton {
    display: inline-block;
    vertical-align: top;
    background-color: var(--gray3);
    padding: 5px;
}

.shopUebersichtBasketSumText {
    font-size: 170%;
    margin-bottom: 3px;
}



/* ---------------- Anfrage/Bestellung bei Übersicht ---------------- */
.shopUebersichtAnfrageSumText {
    font-size: 170%;
}

.shopAnfrageSumOben {
    border-bottom: 1px solid var(--gray2);
    padding-bottom: 7px;
    margin-bottom: var(--abstand_9);
}

.shopAnfrageSumObenL, .shopAnfrageSumObenR {
    display: inline-block;
    vertical-align: top;
}

.shopAnfrageSumObenL {
    width: 100px;
}

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




/* ---------------- Paging ---------------- */
.shopPagingWrapper[data-pages="1"] {
    display: none;
}


/* ---------------- Legend ---------------- */
.shopLegend {
	font-size: 80%;
}


/* ---------------- EAN ---------------- */
.shopEanNone_hide[data-ean=""], .shopEanNone_hide[data-ean="0"] {
	display: none;
}


/* ---------------- Print Headline ---------------- */
#gewerbePrintHeadline {
	display: none;
    padding: 20px 20px 0 20px;
}

#gewerbePrintHeadlineHeadline {
	width: calc(100% - 260px);
}

#gewerbePrintHeadlinePic {
	width: 260px;
	object-fit: contain;
	object-position: top right;
}


/* -------------------------------------------------- */
/* ---------------- Privat Übersicht ---------------- */
/* -------------------------------------------------- */
.overviewBoxWrapper {
	color: inherit;
}

.overviewBoxWrapper:hover {
	border-color: var(--green);
}

.overviewBoxWrapper:hover .overviewBoxHeader {
	background-color: var(--green) !important;
  	color: var(--white);
}

.overviewBoxHeader {
	min-height: 82px;
	padding: var(--abstand_9);
	background-color: var(--gray);
	text-transform: uppercase;
    word-break: break-all;
}

.privShopOverviewPic {
	display: block;
	width: 100%;
	height: 230px;
	object-fit: scale-down;
	object-position: center;
}

#shopPrivOverviewWrapper {gap: var(--abstand_9);}

.overviewBoxWrapper {
	width: calc(25% - var(--abstand_9) * 3 / 4);
	border: 1px solid var(--gray);
}


@media (max-width: 1400px) {
    .overviewBoxWrapper {
        width: calc((100% / 3) - var(--abstand_9) * 2 / 3);
    }
}

@media (max-width: 768px) {
    .overviewBoxWrapper {
        width: calc(50% - var(--abstand_9));
    }
}

@media (max-width: 520px) {
    .overviewBoxWrapper {
        width: 100%;
    }
}
/* --- --- */
/* GewerbeWarenkorbLastSeen  */
/* ---------------------------------------------- */
/* ------------------ Warenkorb ----------------- */
/* ---------------------------------------------- */
#warenkorbContainer {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	z-index: 3;
	pointer-events: none;
}
#chkViewWarenkorb, #chkViewLastSeen {display: none;}
#warenkorbContainer label {cursor: pointer;}
#lblViewWarenkorb, #warenkorbObenAnzahl {
	display: inline-block;
	background-image: url('/bilder/gewerbepreisliste/warenkorb_big.gif');
	background-repeat: no-repeat;
	text-align: center;
    font-size: 80%;
    font-family: var(--semibold);
}
#lblViewWarenkorb, #lblViewLastSeen {
	width: 56px;
	background-color: var(--green);
	background-position: center bottom 5px;
	color: white;
	position: absolute;
	right: 0;
	transition: 200ms;
}
#lblViewWarenkorb, #warenkorb {top: 400px;}
#lblViewWarenkorb, #warenkorb, #lblViewLastSeen, #lastSeen {pointer-events: all;}
#lblViewWarenkorb {
	height: 80px;
	padding-top: 0;
	background-size: 100%;
	background-position: bottom;
}
#lblViewLastSeen {
	height: 56px;
	background-size: 60%;
}
#chkViewWarenkorb:checked ~ #lblViewWarenkorb, #chkViewLastSeen:checked ~ #lblViewLastSeen {
	right: -50px;
}

#lblCloseWarenkorbArea, #lblCloseLastSeenArea {
	opacity: 0;
	pointer-events: none;
	cursor: unset !important;
	display: block;
	position: fixed;
	background-color: rgba(0, 0, 0, 0.2);
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: opacity 200ms;
	z-index: 1;
}
#chkViewWarenkorb:checked ~ #lblCloseWarenkorbArea, #chkViewLastSeen:checked ~ #lblCloseLastSeenArea {
	opacity: 1;
	pointer-events: all;
}

#warenkorb, #lastSeen {
	width: 100%;
	max-width: 550px;
	position: absolute;
	right: -550px;
	transition: 400ms;
	background-color: var(--gray3);
	z-index: 1;
}
#chkViewWarenkorb:checked ~ #warenkorb, #chkViewLastSeen:checked ~ #lastSeen {
	right: 0;
}
#warenkorbOben, #lastSeenOben {
	color: white;
	position: relative;
	display: flex;
	align-items: center;
	background-color: var(--green);
}
#warenkorbObenAnzahl, #lastSeenObenIcon {
	vertical-align: top;
	width: 50px;
	height: 62px;
	background-size: 85%;
	background-position: center bottom 5px;
	color: white;
}
#warenkorbObenZumWarenkorb, #lastSeenObenHeadline {
	display: inline-block;
	vertical-align: top;
	color: white;
	text-decoration: none;
	border: none;
	font-size: 210%;
	margin-top: 6px;
	margin-left: 10px;
}
#lblCloseWarenkorb, #lblCloseLastSeen, .lastSeenBeitragArrow {
    display: inline-block;
    width: 20px;
    height: 20px;
    transform: rotate(45deg);
    border-right: 3px solid white;
    border-top: 3px solid white;
}
#lblCloseWarenkorb, #lblCloseLastSeen {
    position: absolute;
    right: 26px;
    top: calc(50% - 10px);
}


#warenkorbUnten, #lastSeenUnten {
	padding-bottom: 0.7rem;
}

#warenkorbUnten {
    max-height: calc(100vh - 62px - 400px);
    overflow-y: auto;
    scrollbar-width: thin;
}

#asyncWarenkorbSeitenreiter {
	max-height: 240px;
	overflow-y: auto;
	scrollbar-width: thin;
}
.warenkorbArtikel, .lastSeenBeitrag {
	padding: 0.7rem;
	border-bottom: solid 1px var(--gray2);
}
.warenkorbArtikelLinks, .warenkorbArtikelRechts {
	display: inline-block;
	vertical-align: top;
}
.warenkorbArtikelLinks {
	width: 60%;
	padding-right: 30px;
}
.warenkorbArtikelLinksUnten {
	font-size: 80%;
	line-height: 160%;
}
.warenkorbArtikelRechts {
	width: 40%;
	text-align: right;
}

.warenkorbArtikelRemove, .warenkorbArtikelAdd, .warenkorbArtikelDecrease {
    display: inline-block;
    vertical-align: top;
	background-color: unset;
	padding: unset;
	background-repeat: no-repeat;
	background-size: contain;
	border: none;
	vertical-align: top;
	border-radius: 0;
}

.warenkorbArtikelRemove {
	width: 25px;
	height: 25px;
	background-image: url("/bilder/gewerbepreisliste/sdelete_neu.gif");
}

.warenkorbArtikelAdd {
	width: 24px;
	height: 24px;
	background-image: url("/bilder/gewerbepreisliste/skorb_neu.gif");
	position: relative;
	bottom: -2px;
	margin-left: 3px;
}

.warenkorbArtikelDecrease {
    width: 24px;
	height: 24px;
	background-image: url("/bilder/gewerbepreisliste/sposminus1.gif");
	position: relative;
	bottom: -2px;
	margin-left: 3px;
}

#warenkorbGesamtContainer {
	margin-top: 0.7rem;
	padding-right: 0.7rem;
	padding-left: 0.7rem;
	text-align: right;
}

#warenkorbGesamtOben {
    font-size: 160%;
    font-family: var(--medium);
}

.warenkorbGesamtL, .warenkorbGesamtR {
	display: inline-block;
	vertical-align: top;
	width: 50%;
}

#warenkorbButtonAnfragen {
	height: 30px;
    margin-right: var(--abstand_9);
}

#warenkorbButtonAnfragen:last-of-type {
    margin-right: 0;
}


/* Last Seen */
#lastSeenUebersicht {
	max-height: 260px;
	overflow-y: auto;
	scrollbar-width: thin;
}

#lastSeenUnten {
    max-height: calc(100vh - 490px - 62px);
    overflow-y: auto;
    scrollbar-width: thin;
}

.lastSeenBeitragL, .lastSeenBeitragM, .lastSeenBeitragR {
	display: inline-block;
	vertical-align: top;
}
.lastSeenBeitragL, .lastSeenBeitragM {padding-right: 15px;}
.lastSeenBeitragL {
	width: calc(60% - 10px);
	word-break: break-all;
}
.lastSeenBeitragM {width: calc(40% - 10px);}
.lastSeenBeitragR {
	height: 50px;
	width: 20px;
}
.lastSeenBeitragArrow {
	margin-top: 16px;
	margin-left: -5px;
}

#lblViewLastSeen, #lastSeen {top: 490px;}

#lblViewLastSeen, #lastSeenObenIcon {
	background-image: url('/bilder/gewerbepreisliste/last_seen.svg');
	background-repeat: no-repeat;
	background-size: 60%;
	background-position: center;
}

#lastSeenObenIcon {
	display: inline-block;
}
.lastSeenBeitrag:last-of-type {
	border-bottom: none;
}


@media (max-width:1024px), (max-height: 850px) {
	#lblViewWarenkorb, #warenkorb {top: 190px;}
	#lblViewLastSeen, #lastSeen {top: 346px;}

    #lastSeenUnten {
        max-height: calc(100vh - 346px - 62px);
    }

    #warenkorbUnten {
        max-height: calc(100vh - 62px - 190px);
    }
}
@media screen and (max-width: 768px) {
	#warenkorbObenZumWarenkorb {
    	font-size: 130%;
	}
}
/*
 @media (max-width:768px), (max-height: 680px) {
	#lblViewWarenkorb, #warenkorb {top: 120px;}
	#lblViewLastSeen, #lastSeen {top: 276px;}

    #lastSeenUnten {
        max-height: calc(100vh - 276px - 62px);
    }

    #warenkorbUnten {
        max-height: calc(100vh - 62px - 120px);
    }
}*/
/* --- --- */
/* MainMenueCSS  */
/* --------------------------------------------------------- */
/* -------------------- 303 - MainMenue -------------------- */
/* --------------------------------------------------------- */

#headerLogoWrapper {
	position: relative;
	top: 54px;
}

#HeaderContentWrapper {
	width: 100%;
}

#headerLogo {
	width: 260px;
	height: 40px;
	position: relative;
}

#headerLogoOutside {
	max-width: 230px;
  	width: 100%;
}

a[href="0"] {
	pointer-events: none;
	cursor: default;
}

@media (min-width: 1025px) {

	#HeaderWrapper {
		width: 100%;
	}

	#mainMenue_mobile_chk, #menue_mobile_chk, #topMenue_mobile_chk, #mainMenue_kb_show_menu, #mainMenue_kb_hide_menu, #topMenue_kb_show_menu, #topMenue_kb_hide_menu, #menue_kb_show_menu, #menue_kb_hide_menu,
	#mainMenue > li > ul, #mainMenue > .closeleaf > ul, #mainMenue > .openleaf > ul > li > div
	{display: none;}

	#mainMenueWrapper, #topMenue, #headerMainMenue {
		display: flex; justify-content: space-between;
	}
	
	#headerLogo, #mainMenue, #mainMenue li.isnode > div, #mainMenue li.isnode > div::after {display: inline-flex}

	#mainMenue, #mainMenueWrapper {width: 100%; position: relative;}

	#mainManueWrapper {
		position: relative;
	}

	#mainMenue, #topMenue {justify-content: end;}

	#mainMenue .openleaf > ul > li.isnode > ul {padding: 0;}

	.isnode > ul > li > a:not([href="0"]) {
		color: black !important;
	}

	#mainMenue li.isnode:not(#mainMenue > li > ul > li.isnode) > div {
		color: var(--green);
		border-bottom: 2px solid var(--green);
		border-right: 2px solid var(--green);
		transform: rotate(45deg);
		width: 10px;
		height: 10px;
		order: 1;
		transition: 250ms all;
	}

	#mainMenue > li.isnode > ul > li > a {
		color: var(--green) !important;
	}

	#mainMenue > .isnode:hover:not(#mainMenue > li > ul > li.isnode) > ul {
		display: flex !important;
		position: absolute;
		background-color: var(--white);
		left: 0;
		top: 5.1rem;
		width: 100%;
		column-gap: 1.8rem;
		justify-content: left;
		width: 100%;
		padding: 1.8rem;
		margin: 0 auto;
		flex-wrap: wrap;
		z-index: 2;
	}

	#mainMenue > .openleaf > ul > li {
		width: calc(25% - 1.8rem * 3 / 4);
	}

	#mainMenue > .openleaf > ul > li > a {
		color: var(--green);
		font-family: var(--bold);
		font-size: 120%;
	}

    #mainMenue > .isnode > ul > .isnode > div {
        display: none;
    } 

	#mainMenue > .isnode > ul > li {
		width: calc(25% - 1.8rem);
		padding: 0px 0.9rem 2.4rem 0.9rem;
	}

	#mainMenueWrapper .isnode > ul > li > ul > li > a {
		font-size: 15px;
	}

	#mainMenueWrapper .isnode > ul > li > ul > li {
		border-bottom: 1px solid #f3f3f3;
		padding: 6px 0px;
	}

	#mainMenueWrapper #mainMenue > .openleaf > ul > li > ul > li {
		border-bottom: 1px solid #f3f3f3;
		padding: 10px 0px;
	}

	#mainMenue > li > a {
		text-decoration: none;
		color: #181818;
		font-size: 15px;
		font-family: var(--bold);
	}

	#mainMenue > li,
	#topMenue > li {
		padding: 0px 20px;
		padding-bottom: 0px;
		padding-bottom: 20px;
	}

	#headerMainMenue {
		align-items: center;
	}

	#mainMenue > li {
		display: grid;
		grid-template-columns: auto auto;
		gap: 10px;
		align-items: center;
	}

	#mainMenue {font-family: Hanken Grotesk Bold; margin-bottom: 0; right: -30px; position: static;}
	#topMenue {font-size: 60%; font-family: var(--semibold); right: -0px;}
	#topMenue li a {color: #181818 !important; opacity: 0.5;}



	#menue_kb_show_menu, #menue_kb_hide_menu {
		width: 28px;
		height: 28px;
		align-items: center;
	}

	#menuOpen, #menuOpen::before, #menuOpen::after, #menuClose, #menuClose::after {
		width: 100%;
		height: 3px;
		background-color: var(--green);
		border-radius: 25%;
	}

	#menuOpen::before, #menuOpen::after, #menuClose::after {content: ""; position: absolute;}
	#menuOpen::before {top: -8px} #menuOpen::after {top: 8px}

	#menuClose {transform: rotate(-45deg);}
	#menuClose::after {transform: rotate(90deg);}

	#mainMenueWrapper .isnode > ul {
		padding-left: 0;
		margin-top: 10px;
	}

	#mainMenue li.isnode:not(#mainMenue > li > ul > li.isnode):hover > div {
		transform: rotate(225deg);
		transition: 250ms all;
		cursor: pointer;
	}
}

/* Mobile Menue */
@media screen and (max-width: 1024px) {
	#mainMenueWrapper a {
		color: black;
		font-family: var(--semibold);
	}

	#menue_mobile_chk:checked ~ #lblheaderSeitenreiterHideBereich {
		display: block;
		position: absolute;
		width: 100vw;
		height: 100vh;
		right: 0;
		top: 0;
		z-index: 1;
	}

	#headerMainMenue {
		height: 105px;
	}

    #headerLogoWrapper {
        position: relative;
        top: 30px;
    }

	#headerLogo {
		margin: 1.8rem 0px;
		max-width: 230px;
		background-repeat: no-repeat;
	}

	/* Hidden Things */
	#mainMenueWrapper #mainMenue_mobile_chk, #topMenue_mobile_chk, #menue_mobile_chk {
		display: none;
	}

	/* Open Label */
	#menue_kb_show_menu {
		background-image: url('/bilder/header/openMenuGreen.gif');
		width: 40px;
		height: 32px;
		margin-top: 33px;
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
		float: right;
	}

	/* Close Label */
	#mainMenueWrapper #menue_kb_hide_menu {
		display: inline-block;
		width: 15px;
		height: 15px;
		position: absolute;
		right: 18px;
		top: 23px;
		z-index: 15;
	}

	/* First diagonal */
	#mainMenueWrapper #menue_kb_hide_menu::before,
	#mainMenueWrapper #menue_kb_hide_menu::after {
		content: "";
		position: absolute;
		top: 50%;
		left: -2px;
		width: 20px;
		height: 2px;
		background: var(--green);
		transform-origin: center;
	}

	#mainMenueWrapper #menue_kb_hide_menu::before {
		transform: translateY(-50%) rotate(45deg);
	}

	#mainMenueWrapper #menue_kb_hide_menu::after {
		transform: translateY(-50%) rotate(-45deg);
	}


	/* Erster Layer */
	#mainMenueWrapper , #mainMenueWrapper li.openleaf {
        display: none;
		position: fixed;
		width: 100%;
		max-width: 350px;
		height: 100%;
		z-index: 2;
		overflow-y: auto;
		scrollbar-width: thin;
		right: -350px;
		top: 0;
		background-color: var(--white);
		padding-left: 1.8rem;
  		padding-right: 1.8rem;
		transition: right 0.6s ease-in-out;
		border-left: 1px solid #aeaeae;
	}

	#mainMenueWrapper {
        display: block;
        z-index: 15;
	}

    #mainMenueWrapper li.openleaf {
        padding: 0px 20px !important;
    }

	#menue_mobile_chk:checked ~ #mainMenueWrapper li.openleaf {
		right: 0;
		top: 0;
		padding-top: 0;
		display: block;
	}

	#mainMenueWrapper li.openleaf, #mainMenueWrapper li.openleaf > ul, #mainMenueWrapper li.openleaf > ul > li.isnode {
		display: block !important;
        transition: right 0.6s ease-in-out;
	}

    #mainMenueWrapper li.openleaf > ul {
        padding-left: 0;
		margin-top: 3.6rem;
    }

	/* Display if it's checked */
	#menue_mobile_chk:checked ~ #mainMenueWrapper {
		right: 0;
		transition: right 0.6s ease-in-out;
	}

	#mainMenueWrapper #mainMenue {
		padding-left: 0;
		margin-top: 3.6rem; 
	}

	/* Erste layer links */
	#mainMenue > .isnode > a {
		pointer-events: none;
		cursor: default;
	}
	
	#mainMenueWrapper .isnode {
		/* display: flex; */
		width: 100%;
		padding: 0.9rem 0px;
		border-bottom: 1px solid #d1d1d1;
		color: #0a0a0a;
    	justify-content: space-between;
		position: relative;
	} 

	#mainMenueWrapper li.isnode:not(#mainMenueWrapper #mainMenue > li.isnode), 
    #mainMenueWrapper li.closeleaf > ul,
    #mainMenueWrapper li.isnode > ul {
		display: none;
	}

	#mainMenueWrapper .isnode > div {
		display: inline-block;
		width: 100%;
		height: 50%;
		position: absolute;
		cursor: pointer;
	}

	#mainMenueWrapper .isnode > div::before {
		content: "";
		position: absolute;
		top: 50%;
		right: 7px;
		transform: translateY(-50%) rotate(45deg);
		width: 12px;
		height: 12px;
		border-top: 3px solid var(--green);
		border-right: 3px solid var(--green);
		background: transparent;
	}


	#mainMenueWrapper .openleaf > div {
		position: absolute;
		top: 20px;
    	left: 7%;
		width: 20px;
		height: 20px;
	}

	#mainMenueWrapper .openleaf > div::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 7px;
		transform: translateY(-50%) rotate(-135deg);
		width: 10px;
		height: 10px;
		border-top: 2px solid var(--green);
		border-right: 2px solid var(--green);
		background: transparent;
	}

	#mainMenueWrapper .isnode > a, #topMenue > li > a {
		color: black;
		font-family: var(--semibold);
	}



	/* Second Layer */
	#mainMenueWrapper .openleaf {
		display: block;
		width: 100%;
		padding: 0.9rem 0px;
		border-bottom: 1px solid #d1d1d1;
		color: #0a0a0a;
	}

	/* Remove Sub Header */
	#mainMenueWrapper #mainMenue > li.isnode > ul > li.openleaf > a {
		display: none;
	}

	/* Make Outer Header visible */
	#mainMenueWrapper #mainMenue > li.openleaf > a {
		position: absolute;
		z-index: 10;
		top: 17px;
		right: 40%;
		opacity: 0.5;
		font-size: 60%;
		text-transform: uppercase;
	}



	/* Third Layer */
	#mainMenueWrapper li:not(.isnode) {
		padding: calc(.9rem + 1px) 0px;
	} 

	#mainMenueWrapper #mainMenue > li.openleaf > ul > li.openleaf {
		padding: 20px;
		padding-top: 0;
	}

	#headerLogoWrapperOutside {
		width: calc(100% - 50px);
		max-width: 230px;
		margin: 1.4rem 0px;
	}

	/* Top Menu */
	#topMenue {
		padding-left: 0;
	}

	#topMenue > li {
		padding-bottom: 10px !important;
		text-transform: none;
		opacity: 0.5;
		font-size: 19px;
	}
}

@media screen and (max-width: 768px) {
   	#menue_kb_show_menu {
		width: 28px;
		height: 21px;
		margin-top: 41px;
  	}
	#headerLogoOutside {
		max-width: 160px;
	}
}

@media screen and (max-width: 500px) {
	#menue_mobile_chk:checked ~ #mainMenueWrapper, #mainMenueWrapper li.openleaf {
		max-width: 100%;
	}
	
	#mainMenueWrapper .openleaf > div::before {
		left: 7px;
	}
	
	#mainMenueWrapper .openleaf > div {
		left: 14px;
	}
}



/* transperancy support */
#main {
	position: relative;
}

.TransparentHeader {
	background-color: transparent;
	position: absolute;
	z-index: 10;
	width: 100%;
	color: white;
	border-bottom: 1px solid hsla(0,0%,100%,.2);
}

.TransparentHeader #mainMenue > .isnode > div {
	border-color: white !important;
}

.TransparentHeader #headerLogo, .TransparentHeader #headerLogoOutside {
	content:url("/bilder/header/logo-white.svg");
}

.TransparentHeader #menue_kb_show_menu {
	background-image: url('/bilder/header/openMenuWhite.gif');
}

.TransparentHeader #mainMenue > .isnode > a {
	font-size: 17px;
}

@media screen and (min-width: 1024px) {
	.TransparentHeader #mainMenue > .isnode > ul {
		top: 6rem;
	}
	.TransparentHeader #mainMenue > .isnode > a {
		color: white !important;
	}
	.TransparentHeader #topMenue > li > a {
		color: #cecece !important;
		opacity: 1;
	}
}
/* --- --- */
/* PrivatShopDetailseiteCSS  */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*~~~~~~~~~~~~~~~~~~~~~ Detailseite ~~~~~~~~~~~~~~~~~~~~*/
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/*----------------------------------*/
/*----- Wrapper Artikelausgabe -----*/
/*----------------------------------*/


@media (max-width: 1240px) {
	#shopDetailWrapperLeft {
		padding-left: var(--abstand_54);
	}

	#shopDetailWrapperRight {
		padding-right: var(--abstand_54);
	}
}

@media (max-width: 1024px) {
	#shopArtikelAusgabe {
		min-height: 0px;
		max-height: 100%;
	}

	#shopDetailWrapperLeft {
		padding-left: var(--abstand_36);
	}

	#shopDetailWrapperRight {
		padding-right: var(--abstand_36);
	}

}

@media (max-width: 768px) {
	#shopDetailWrapperLeft {
		order: 2;
		padding-left: var(--abstand_18);
	}

	#shopDetailWrapperRight {
		padding-right: var(--abstand_18);
	}
}
/*----------------------------------*/
/*----------- Text Links -----------*/
/*----------------------------------*/

.shopDetailProdInfoWrapper {
	height: 250px;
	margin-bottom: var(--abstand_36);
  	overflow-y: auto;
	font-size: 80%;
	scrollbar-width: thin;
}

@media (max-width: 1240px) {
	.shopDetailProdInfoWrapper {
		height: 200px;
	}
}



/*----------------------------------*/
/*---------- Bild Rechts -----------*/
/*----------------------------------*/
#shopDetailWrapperRight {
	min-height: 570px;
}

#shopDetailBildContainerOpenLbl {
	width: 100%;
	height: 100%;
}

#shopDetailBildContainerOpenLbl img {
	width: 100%;
	max-width: 350px;
	max-height: 350px;
	object-fit: scale-down;
	object-position: center;
}

#shopDetailBildContainerOpenLbl[data-picprod=""] {
	pointer-events: none;
}

.shopDetailBildPreArt[src=""], .shopDetailBildPreProd,
.shopDetailBildZoomArt[src=""], .shopDetailBildZoomProd {
	display: none;
}

.shopDetailBildPreArt[src=""] ~ .shopDetailBildPreProd,
.shopDetailBildZoomArt[src=""] ~ .shopDetailBildZoomProd {
	display: block;
}

@media (max-width: 768px) {
	#shopDetailWrapperRight {
		min-height: 300px;
	}
}

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

#shopDetailBildContainerOpenChk:checked ~ #shopDetailBildContainer {
	opacity: 1;
	pointer-events: all;
}

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

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

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

#shopDetailBildContainerCloseLbl::after {
    bottom: 12px;
    transform: rotate(45deg);
}



/*----------------------------------*/
/*---------- Icons Mitte -----------*/
/*----------------------------------*/

.shopArtikelDetailIcon {
  left: -20px;
  gap: var(--abstand_9); 
  top: var(--abstand_18);
  z-index: 1;
}

.shopArtikelDetailIcon div {height: 30px;}

@media (max-width: 768px) {
	
	.shopArtikelDetailIcon {
		flex-direction: row;
		width: 60px;
		left: calc(50% - 30px);
		top: unset;
  		bottom: -15px;
	}

	.shopArtikelDetailIcon div {
		width: calc(100%/3);
	}
}




/* ---------- Eigenschaften ---------- */
.artAttrL, .artAttrR {
	display: inline-block;
	vertical-align: top;
}

.artAttrL {
    width: 120px;
}

.artAttrR {
    width: calc(100% - 120px);
}

#artAttrContainer [data-attribut=""] {
	display: none;
}
/* --- --- */
/* ------------------------------------------------------ */
/* -------------------- 302 - Footer -------------------- */
/* ------------------------------------------------------ */
/* --- --- */