:root {
    --Hauptfarbe: #B2022E; /* dunkelrot */
    --Zweitfarbe: #555555; /* dunkelgrau. laut logo #9a9a9d */ 
	--Drittfarbe: #91D001; /* grün für PC-Bedarf Hintergrund */
	--Viertfarbe: #E31f26; /* rot für Rabattbox Hintergrund */
	--Randfarbe: #DEDEDE;  /* borders etc. should be soft gray */
	--Hoverfarbe: #005069; 
} 

img.svgPrimaryColor{
  /* sets svg color. to convert this value from hex use: https://codepen.io/sosuke/pen/Pjoqqp */
	filter: invert(17%) sepia(93%) saturate(5865%) hue-rotate(339deg) brightness(69%) contrast(105%);
}
img.svgSecondaryColor, img.svgPrimaryColor:hover{
	filter: invert(43%) sepia(14%) saturate(5058%) hue-rotate(196deg) brightness(92%) contrast(92%); /* calm blue */
}

div#boxCart div.cartSum .sumRow .sumValNetto{
	text-decoration: line-through; /*individual - not all customers */
}
				
/* main navigation with categories and login */
.navi .naviLine{
	margin: 3px auto 2px auto; /* INDIVIDUAL - top and bottom based on logo type */
}

div#middle {
  margin: 145px auto 5px auto; /*15px auto; */ /* INDIVIDUAL pix margin top to accomodate to sticky navigation on top */
  min-height: 620px;
  /* text-align: left; */ /* Ende des IE hacks, sonst wird jeglicher Text zentriert */
}

.navi #logo a.clickableLogoPart img{ /* style logo ONLY here, not with direct css otherwise can't resize it for mobile. */
	width: 297px;
}

/* mobile settings */
@media only screen and (max-width: 950px) {
	
	div#middle{
		margin-top:143px; /* INDIVIDUAL SETTING: accomodate for sticky navigation on top */
	}
	.navi #logo a.clickableLogoPart{ /* on mobile make Logo central */
		margin: 10px auto; /* individual, depends on logo */
	}
	
	.bannerLarge h3.bannerText, .bannerLarge h2.bannerText{
		/* required for web23 with long text: */
		font-size: 18px;
		top: 30px; 
	}
	
	.navi #logo a.clickableLogoPart img{ /* on mobile restrict logo width - must be in default.css to have priority over regular default.css settings */
		max-width: 280px;
		max-height: 120px;
		height: auto; /* to scale correctly */
		margin: 5px 0px;
	}
}
