: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 */
} 

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 */
}
img.svgWhiteColor{
	filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(333deg) brightness(100%) contrast(106%);
}
p{
	margin: 10px 3px; /* if we doesnt set one it wont be 0 but whatever the browser likes */
	/* 13 because of impressum */
	/* line-height: 17pt; */ /* no, too many large spaces */
}

p.longText{
	line-height: 17pt;	
}

body hr{
	width: 100%;
}
/* Start Artikelhistorie,Bestelliste Suchbox */
.accountSearchBox fieldset{
	border: 1px solid #C5C5C5;
	color: #444444;
	width: 350px;
	padding: 20px;
	margin: 10px;
}


.accountSearchBox form input[type="text"]{
   width: 250px;
}
/* Ende Artikelhistorie,Bestelliste Suchbox */




/*.boxElement .boxContent h3*/
/* .boxElement h3 {
	font-size: 12px;
	padding: 0px;
	margin: 0px;
	padding-top: 20px;
} */

.hidden{
	width: 0px;
	height: 0px;
	display: none;
}

.red{
	color: #a81a35;	
}
a.email{
	font-weight: bold;
	color: var(--Hauptfarbe);
}
a.red, 
a.red:hover{
	color: #a81a35;	
	text-decoration: underline;
}

.clearFloat{
	clear: both;
}
#boxAllArticles, #breadcrumbsBox{
	min-height: 0px;
}
#boxAllArticles, #breadcrumbsBox .boxContent{
	min-height: 10px;
}
#boxAllArticles a, .boxAllArticles a:visited{
	color: #ffffff;	
}
/* image slider */

.hide{
	width: 0px;
	height: 0px;
	display: none;
}
.boxImageSlider{
	min-height: 300px; 
	line-height: 250px; /* genaue Angaben, damit Pfeile vertikal zentriert werden */
}

.boxImageSlider #imageSliderFeatured, .boxImageSlider #imageSliderSpecialOffer{ /* Wert wieder aufheben */
	line-height: 16px;
	margin: auto;
}

.boxImageSlider #prevFeatured, .boxImageSlider #nextFeatured, .boxImageSlider #prevSpecialOffer, .boxImageSlider #nextSpecialOffer{
	vertical-align: middle;
	width: 20px;
	height: 20px;
}

.boxImageSlider #prevFeatured, .boxImageSlider #prevSpecialOffer{
	float: left;
}

.boxImageSlider #nextFeatured, .boxImageSlider #nextSpecialOffer{
	float: right;
}

.boxNoArticles{
	padding: 20px;
}
 
.footer .footerPart1 a.footerLink{
	color: #fff;
	font-weight: bold;
}

.footer a.footerLink:hover{
	color: var(--Hauptfarbe);
}
.footer p{
	margin: 0px;
	padding: 0px;	
}

a.footerLink{
	text-decoration: none;
	border: 0px solid black;
}

.footer .footerPart1 ul{
	display: inline-block;
	margin: 0px;
	margin-top: 10px;
	list-style-type: none; /* innere Liste */
	padding-left: 20px;
}


.footer .footerPart1 ul li{
	float: left;
	width: 300px;
	font-weight: bold;
}

.footer .footerPart1 ul li ul{ /* innere Liste */
	list-style-type: disc; 
	padding-left: 20px;
}

.footer .footerPart1 ul li ul li{ /* innere Liste */

  /* IE hack: da IE bei li - float:left keine list-items anzeigt */
  /* wichtig, den Listentype erstmal auf none setzen*/
  list-style-type: none;
  /* und eine alternative Grafik alt Hintergrundbild laden */
  background: url("../img/list-item.png") left center no-repeat;
  /* padding anhand der Abmessungen der Grafik einstellen */
  padding: 0 10px 1px 10px;	
}

.footer .footerPart1{
	background-color: #555555; /* var(--Zweitfarbe); */
	
	min-height: 110px;
}

.footer .footerPart2{
	border-top: 1px solid #5b5b5b;
	padding: 8px 0;
	clear: both;
	text-align: center;
}

.footer{
	color: #ffffff;
	clear: both;
	text-decoration: none;
    text-align: left; /* Ende des IE hacks, sonst wird jeglicher Text zentriert */
}

/*breadcrumbs */
div#breadcrumbsBox, div#breadcrumbsBox a{
	color: var(--Hauptfarbe);
	text-align: left;
}
div#breadcrumbsBox a:hover {
	 text-decoration: underline;
}

 

/* Suchbox */
div#searchbox  input, div#searchbox  input[type="text"], div#searchbox select{
	width: 100%;
	padding: 5px 0px;
}
div#searchbox  input[type="checkbox"]{
	width: inherit;
}
div#searchbox  .rightPart{
	text-align: right;
}

body, a{
  font-family: 'Open Sans' , 'Arial' ,'sans-serif';
  font-size: 10pt;	
}
body .navi,  .navi a h3, .navi .dropbtn a, .navi .searchText, .boxContent .column a, .boxContent .column p{
  /* use a different font for navigation: inter. 
  this font is wider -> only use for headlines in dropdown,  */
  font-family:  'Open Sans' , 'Arial' ,'sans-serif'; 
}
body {
  color: #000000;
  background-color: #ffffff; 
  width: 100%;
  /* text-align: center; *//* IE hack: damit body  .all zentriert wird mit margin:  0 auto. text-align: center wird in div.middle und div footer aufgehoben */
    text-align: left; /* der hack sollte heutzutage nicht mehr notwendig sein.. */
  margin: 10px 0px 0 0;
}

body .all{
  /*width: 1200px;*/
  /* background-color: #ffffff;*/
  margin: 0 auto;
  /* text-align: center; */ /* Fortsetzung: IE hack: damit body .all zentriert wird mit margin:  0 auto. text-align: center wird in div.middle und div footer aufgehoben */
  text-align: left; /* der hack sollte heutzutage nicht mehr notwendig sein.. */
}

div {
  margin: 0px;
  padding: 0px;
  border: medium none;
}

input[type="text"], input[type="password"], select, label{
	margin: 5px 0;
	width: 80px;
}
img, a img { 
	border: none; 
}

.printonly {
  display: none;
}

.articlelistview input[type="text"]{
	width: 30px;	
}

h1{
	font-size: 1.2em;
}
h1>p {
  color: gray;
}

label { 
	display: inline-block; 
	min-width: 65px; 
	width: auto;
	padding-right: 5px;
}

div#articlegroup a, div#articlegroup a:visited{
	color: var(--Hauptfarbe);
}

div#articlegroup a.linkbox{
	display:block;
}

div.priceLine{
	position: absolute;
	right:0px; 
	width: 100%; 
	line-height: 15px; 
	float:right; 
	background-color: #737373; 
	border-radius: 0px;	
	border: 0px solid #d0d0d0;
	padding: 2px 2px 5px 2px; 
	color:#ffffff;
	text-align: right;
}
div.priceBox{
	position: absolute;
	right:0px; 
	width: 80px; 
	height: 50px;
	line-height: 15px; 
	float:right; 
	background-color: #737373; 
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;	
	/* border: 1px solid #737373; */
	padding: 4px 4px 5px 4px; 
	color:#ffffff;
	text-align: right;
}

#articlelistview label{
	width: 100px;
}

/* search */
.searchForm input.searchText{
	display:inline; 
	color:#888888;
}

/* Linkbox Klassen */

/* andere linkboxen, wie box in mein konto */
.linkbox, .linkbox-high{
  cursor: pointer;
  padding: 5px;
  line-height: 140%;
  letter-spacing: 0px;
  background-color: transparent;
  /* border: 1px solid #d0d0d0;
  font-size: 7pt;	 */
}

/* linkboxen in articlegrp snipped: volle breite */
#articlegroup .linkbox{
  cursor: pointer;
  padding: 4px 10px;
  line-height: 15px;
  font-size: 11px;
  letter-spacing: 0px;
  background-color: #ffffff;
}

#articlegroup .linkbox, #articlegroup .linkbox:visited {
  color: #333333;
}

#articlegroup .linkbox:hover {
	background-color: var(--Hauptfarbe);
	color: #ffffff;
}

div.boxElement{
	width: 100%;
	margin-bottom: 10px;
	min-height: 120px;
}
.boxElement .boxTitle{
	padding: 0px;
	color: #ffffff;
	height: auto;
	min-height: 30px;
	line-height: 30px;
	background-color: var(--Zweitfarbe);
	width: 100%;
	overflow: hidden;
}
.boxElement .boxTitle span.titleText{
	padding: 0 10px;
	display: inline-block;
}
.boxElement .boxTitle h1 {
  font-size: 1.0em;
  font-weight: normal;
  margin: 0px;
}
.boxElement  h1.largeTitle {
	font-size: 35pt;
	font-size:min(3.4vmax, 60px);
	font-weight: bold;
	padding: 20px 20px;
	text-align: center;
	color: #333333;	
}	

 h2.largeTitle {
	font-size: 20pt;
	font-weight: bold;
	padding: 2px 20px;
	text-align: center;
}	
.boxElement .boxContentList{
	border: 1px solid var(--Randfarbe);
    margin: 5px 0px;
}
.boxElement .boxContentNoPad{
	padding: 0px;
}
.boxElement .boxContent{
	padding: 10px 0px;
}
.boxElement .boxContent img.info{
	float: left; 
	width: 24px; 
	height: 24px;
	padding-right: 15px;
}

/* war nur die titelleiste in der Artikeldetailansicht */
/*.boxElementGray .boxTitleGray{
	padding: 0 10px;
	color: #ffffff;
	height: 30px;
	line-height: 30px;
	background-color: var(--Zweitfarbe);
	font-weight: bold;
} */
.boxElement .linkbox {
  /* background-color: #ffffff; */
  color: var(--Hauptfarbe);
}

/* hover on links and buttons */
.boxElement .linkbox:hover, .boxElement .active, .boxElement .active a, .boxElement .active a:visited, button:hover, input[type="button"]:hover, input[type="submit"]:hover {
	background-color: var(--Hauptfarbe);
	color: #ffffff;
}

button.noHoverBackground:hover  {
	background-color: white;
	color: blue;
}
 
.boxElement .linkbox:hover a {
	color: #ffffff;
}

.boxContent .boxInnerContent{
	padding: 10px;
}
.boxContentList .linkbox, .boxContentList .linkbox-high{
  /* keine eingeschränkte Width */
}

a, a:visited {
  color: var(--Hauptfarbe);
  /*font-weight: normal; */
  font-size: 12px;
  text-decoration: none;
  /*font-style: italic;*/
}



a:hover, a:active, a:visited {
  color: var(--Hauptfarbe);
  font-size: 12px;
}

a.noline {
  border-bottom: none;
}

a[name], a[name]:hover, a[name]:active {
  font-style: normal;
  color: black;
  text-decoration: none;
  border-bottom: none;
}

div#loginBox{
 	margin-right: 310px;
 	text-align: left;
 	positition: relative;
 	float: right;
}

div#loginBox .boxElement{
	position: absolute;
	width: 200px; 
	height: 130px;
	top:30px; 
	border: 1px solid #c5c5c5;
}

div#loginBox img.cartImg{
	float:left;
}

div#loginBox ul{
	list-style-type: none;
	margin: 0 0 10px; 
}
div#loginBox a{
	font-weight: normal;
}

div#loginBox a.logoutLink{
	float: right;
}
div#loginBox input[type="text"], div#loginBox button{
	margin: 0px;
}
div.top a, div.navi a, div.leftbar a {
  border-bottom: none;
  color: var(--Hauptfarbe);
}

div.top a:hover, div.navi a:hover, div.leftbar a:hover, div.navi a span:hover {
  border-bottom: none;
  color: var(--Hauptfarbe);
}

.smallText, .smallText:hover{
	font-size: 8pt;
}

a.box, a.box:visited {
  color: var(--Hauptfarbe);
  font-weight: normal;
  text-decoration: none;
  font-style: normal;
  border-bottom: none;
}

a.box:hover, a.box:active, .boxElement .linkbox-high a.box {
  color: #FFFFFF;
  /* font-size: 8pt; */
  text-decoration: none;
  font-style: normal;
}

a.menu, a.menu:visited {
  background-color: #ffffff;
  border-width: 1px;
  border-color: #d0d0d0;
  border-style: solid;
  font-weight: normal;
  font-size: 8pt;
  text-decoration: none;
  white-space: nowrap;
  padding: 0.4em;
}

a.menu:hover, a.menu:active {
	background-color: #AE1B37;
	border-color: #AE1B37;
	border-style: solid;
	border-width: 1px;
	cursor: pointer;
	color: #ffffff;
	font-weight: normal;
	font-size: 8pt;
	text-decoration: none;
	white-space: nowrap;
	padding: 0.4em;
}

button.buyNowButton, button.buyNowButton:hover{
	background-color: var(--Hauptfarbe);
	color: white;
	border: medium none;
	margin: 10px 0px;
	padding: 12px;
	font-weight: bold;
}
div.tinyHint{
	font-size: 11px;
	border-top: 1px solid var(--Randfarbe);
	padding: 8px 0px;
}
/*
img.chooseViewImg:hover{
	background-color: #cccccc;
} */
div.pagecontrol {
  text-align: center;
  padding: 10px 0;
  /* border: 1px solid var(--Randfarbe); */
  clear: both;
}

div.pagecontrol .pageElement:hover a, div.pagecontrol a .pageElement:hover {
	color: #ffffff;
	background-color: var(--Zweitfarbe);
}

.pagecontrol .pageElement, .pagecontrol .arrowElement, .pagecontrol .infoElement{
	display: inline-block;
	border: 1px solid var(--Randfarbe);
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	padding: 4px 9px;
	margin: 0 4px;
	vertical-align: middle;
}


.pagecontrol .moreElement{
	display: inline-block;
	vertical-align: middle;
}
.pagecontrol .pageInactive:hover{
	background-color: var(--Hauptfarbe);
	color: #ffffff;
}

 .pagecontrol .arrowElement{
 	border: medium none;
 }

.pagecontrol  div.pageActive{
	background-color: #5d5d5d;
	border: 1px solid #5d5d5d; /* same as background, not var(--Randfarbe); */
	color: #ffffff;
}

.pagecontrol  div.infoElement{
	border: medium none;
}

div.submitBar{
	background-color: var(--Zweitfarbe);
	text-align:right;
	padding: 7px 0;
  	color: white;
}

div.submitBar button{
	padding:5px 10px;
	margin:0px 5px;
	display:inline-block;
	/*-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;	*/
	background: white;

}

div.submitBar button:hover{
	color: var(--Zweitfarbe);
	background: white;
}

div.submitBar button img.submitImg{
	vertical-align: middle;
	width: 25px; 
	height: 30px;
}
div.submitList a, div.submitList a:hover {
  color: white;
}

div.viewChooser{
	float: right; 
	width: 100px; 
	text-align: right; 
	margin: 5px;
}

/* Stilvorlagen */


.columna-text-search{
  color: #000000;
  font-size: 10pt;
  line-height: 130%;
  letter-spacing: 0px;
  padding: 10px;
}
.errorbox, .redbox {
  border: 1px solid red;
  /* background-color: #ffdddd; */
  padding: 10px;
  margin-top: 15px;
}

.infobox {
	margin: 10px; 
}

.largetiles .priceLineTiny{
	font-size:17px;
	color: var(--Zweitfarbe);
	font-weight: bold;
	background: white;
}

.largetiles .priceLineTiny .infoMwstTiny{
	font-weight: normal;
	font-size:11px;
	color: #555555;
}
.company{
    font-weight: bold;
    padding: 5px 0px;
}
.company label{
	margin: 0px;
	min-width: 40px;
	padding: 0px;
}

.navi{
	border-bottom: 4px solid #d7d7d7;
	position: fixed; /* Set the navbar to fixed position */
	top: 0; /* Position the navbar at the top of the page */
	width: 100%; /* Full width */
	z-index: 100;
	background: white;
	transition: top 0.8s; /* Transition effect when sliding up or down */
}

/* topline above navigation */
.navi .naviTop{
	background-color: var(--Zweitfarbe);
}
.navi .naviTop .flexContainerHorizontal{
	max-width: 1240px;
	margin: auto;
	padding: 0px;
}

.navi .naviTop .flexContainerHorizontal a{
	color:white;
	line-height: 30px;
	min-height: 32px;
}

.navi .naviTop .flexContainerHorizontal a img{
	vertical-align: middle;
	margin: 0px 5px 0px 0px;
	height: 23px;
}
				
/* main navigation with categories and login */
.navi .naviLine{
	width: auto;
	margin: 3px auto 2px auto; /* INDIVIDUAL - top and bottom based on logo type */
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.navi .naviCategories{
	min-height: 45px;
	border-top: 1px solid #d7d7d7;
}

.navi .allowedContent{
	min-height: 80px;
}

.navi .naviLine .flexElement{
	align-self: flex-end; /* align at bottom half of logo */
}

.navi .naviLine a{
	color:#666;
	text-decoration:none;
	border-bottom:none;
	font-weight: normal;
	font-size: 1rem;
	padding: 0px;
}
.navi .allowedContent a{
	color: var(--Zweitfarbe);
	text-decoration:none;
	border-bottom:none;
	font-weight: bold;
	font-size: 12pt;
	padding: 0px;
}
.navi .logo a{
	line-height:10px; /* otherwise padding in logo img */
}
.navi a, .navi a.leftElement, .navi a.leftElement:visited, .navi a.rightElement{
	/* float: left; */
	padding: 0 10px;
	text-align: center;
	display: inline-block;
	min-height: 36px; /* too strict, also applys to logo height: 38px; */
	height: auto;
	line-height: 36px;
}
.navi .cartTotal{
	font-size:11px;
}	
.navi .cartQuantity{ /* it's a circle containing the amount */
 font-size:11px;
  color:#fff;
  height:22px;
  width:22px;
  text-align:center;
  background: var(--Zweitfarbe);
  display:inline-block;
  line-height:22px;
  border-radius:100%;
  /*float:right;*/
  margin-left:-5px;
  right:20px;
}
.navi .cartQuantity:hover{
  background: var(--Hauptfarbe);
  color: #fff;
}
.navi a.rightElement{
	float: right;
}	
.navi a.rightElement img{
	vertical-align: middle;
}
.navi .allowedContent .rightSearchElement a{
	/*color: var(--Hauptfarbe);
	 font-weight: bold; */
}

.navi .allowedContent .rightSearchElement a:hover{
	color: var(--Hauptfarbe);
}
.navi .leftElement:hover, .navi .leftElement:active, .navi .naviActive, {
	color: var(--Hauptfarbe);
	font-weight: bold;
}
.navi .allowedContent a.leftElement:hover{
	font-weight:bold;
	text-decoration:none;
	border-bottom:none;
	color: var(--Hauptfarbe);
}
.navi .allowedContent .rightSearchElement{
	/* float: right; */
	/* width: 200px; */
	padding: 0px;
	margin: 0px;
	/* margin-right: 230px; */ /* damit element nicht von loginbox verdeckt wird*/
}
.navi .allowedContent .rightSearchElement form button{
	border: medium none;
	background-color: transparent;
}
.navi .rightSearchElement form{
	/* height: 38px; */
}
.navi .rightSearchElement input{
	margin-top: 2px;
	/*border: 1px solid var(--Hauptfarbe);
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px; */
	border-radius: 5px;
	padding-left: 5px;
	min-width: 180px;
	min-height: 25px;
	font-size: 10pt;
	color: #555;
}

button.searchBtn{
	line-height:25px;
	height:25px;
}

button.searchBtn img{
	height:25px;
	vertical-align:middle;
}
/*
.searchBgImg{
	background-image: url(../img/svg/search.svg);
	background-repeat: no-repeat;
	width: auto;
	height: 26px;
	line-height: 27px;	
	display: inline-block;
	padding-left: 10px;
	cursor: pointer;
	display: inline-block;
	margin-left: 8px;
	vertical-align: middle;
}*/


/* deaktivierte steuerelemente */input[disabled="disabled"], input.disabled
 button.disabled, input.disabled, button[disabled="disabled"], input[type="button"][disabled="disabled"], input[type="submit"][disabled="disabled"] {
	border: 1px solid #a0a0a0; 
	background-color: #dddddd;
	cursor: default;
	color: #555555;
}

form div.dataRow{
	margin-bottom: 4px;
}


form input[type="text"], form select, form input[type="password"], form textarea,
form input[type="text"][readonly="readonly"],
form input[type="text"][readonly="readonly"]:focus,
form input[type="text"]:focus, form select:focus, form input[type="password"]:focus, form textarea:focus  {
	border: 1px solid var(--Randfarbe);
	font-weight: normal;
	font-style: normal;
	color: #333333;
	background-color: white;
	font-size: 9pt;
	padding: 4px 2px;
}

.nobox{
	border: 1px solid #AE1B37;
	padding: 5px 5px;
}

.frame {
  border: 1px solid #BDD7D7;
  margin-bottom: 4px;
}

table.listviewheader { /* Einstellungen für Header in Tabellenansicht */
  margin: 10px 0 0 0;
  /* border: 1px solid var(--Randfarbe);; */
  line-height: 150%;
  background-color: #555555;
  height: 30px;
  white-space: nowrap;
  width: 100%;
  padding: 0px;
  clear: right;
  position: relative;
  color: #ffffff;
}

table.previewheader { /* Einstellungen für Header in Vorschauansicht */
  margin: 15px auto;
  border: 0px solid var(--Randfarbe); 
  line-height: 30px;
  background-color: #555555;
  height: 30px;
  white-space: nowrap;
  padding: 0px;
  clear: right;
  position: relative;
  color: #ffffff;
  width: 100%;
}

table.previewheader td.unsortable{ /* nur in tabellenansicht werden auch nicht sortierbare elemente gezeigt */
	display: none;
}

table.previewheader td#sortdescription{
	display: table-cell; /* damit s nicht automatisch ausgeblendet wird */
}

/* table header schriftgroesse immer kleiner */
table.previewheader td, table.listviewheader td, table.previewheader td a, table.listviewheader td a , table.previewheader td a:hover, table.listviewheader td a:hover{
	font-size: 11px;
}

table.previewheader td a img:hover, table.listviewheader td a img:hover{

}
table.previewheader td a.rightLink, table.listviewheader td a.rightLink{
	position: relative; 
	left: -5px;
}
table.previewheader td a.sortHeaderLink, table.listviewheader td a.sortHeaderLink{
	display: inline-block;
	color: #ffffff;
}
table.previewheader td, table.listviewheader td {
  border: 1px solid transparent;
  cursor: default;  	
}
table.previewheader td {
  padding: 0 10px;
  border-right: 1px solid var(--Randfarbe);
  width: 100px;
}

table.listviewheader td {
  padding: 0px;
}

table.listviewheader td.lvarticleidW{
	width: 90px; /* header-td width must be larger than actual tds because it's a separate table because reasons */
}
table.articlelistview td.lvarticleidW{ 
	/*min-width: 80px; */  /* doesnt work, will always use maximum width and ignores max-width. */
	/* width: auto; */
	width: 80px;
	text-align: center;
}

table.listviewheader td.lvarticlegroup{
	width: 140px; /* header-td width must be shorter than actual tds because reasons */
}
/*
.lvarticleidW {
  width: 100px;
  text-align: right;
}
*/

table.listviewheader td.lvarticleidCommitW{
	width: 60px;
	text-align: left;
}
table.listviewheader td.lvsprechstdW{
	width: 70px;
	text-align: left;
}
table.listviewheader td.lvcustomerID{
	width: auto;
	min-width: 70px;
	 
}
table.listviewheader td.selected {
  /* border: 1px solid var(--Hauptfarbe);
  background-color: var(--Hauptfarbe);*/
}

table.listviewheader a, table.listviewheader div {
  display: block;
  text-decoration: none;
  font-style: normal;
  font-weight: normal;
  border-bottom: none;
  color: #ffffff;
}

table.listviewheader a:hover {
  color: var(--Hauptfarbe);
}
table.listviewheader a.selected:hover {
  color: #ffffff;	/* selektierte spalte hat als hintegrundfarbe schon rot */	
}
table.listviewheader td[class~="nohover"]:hover {
  border: 1px solid transparent;
}

table.listviewheader div.end{
  font-size: 1px;
  height: 16pt;
  float: none;
}

div.boxContent .shopArticleList div#articlelistview {
	width: 100%;
 /* max-height: 840px;
   position: relative; */
   display: flex; /* inline-block; muss gesetzt werden, wenn alle folgenden elemente float gesetzt haben, sonst ist die height dieses elements immer 0 */
   flex-direction: row;
   justify-content: space-between;
   flex-wrap: wrap; /* moves  article items in next row when horizontal space is exceeded */
}

div#articlelistview div.report {
  border-bottom: 1px solid var(--Randfarbe);;
}

div#articlelistview div.largetiles {
  overflow: auto; 
  border: 1px solid var(--Randfarbe);;
  padding: 10px;
  width: 190px;
  margin: 30px 3px 0px 3px;
  min-height: 330px; /* because differing title lengths */
  background: white;
}
div.boxImageSlider div#articlelistview div.largetiles {
  margin: 10px 15px 0px 0px;	/* less padding or the imageslider images wont fit */
  display: block;
  float: left;
  position: relative; 

}

/* Region: Favorite Icons */

img.isFavorite, img.noFavorite {
	font-size: 20px;	   
	width: 17px;
	height: 17px;
	display: inline-block; /* for articledetailview - heart next to button */
	vertical-align: middle;
	transition: 0.3s;
}
/* only in thumbnailview: stick heart on top of product image */
.shopArticleList div.articlelistview .favorite{
	position: absolute;
	left: 0px;
}

#articleDetailView img.isFavorite, #articleDetailView img.noFavorite { /* bigger icon only for button in detail view */
	font-size: 35px;
	margin-left: 13px;
	line-height: 30px;
	width: 30px;
	height: 30px;
	cursor: pointer;
}

img.isFavorite, button img.noFavorite:hover {
	color: #df2929; /* color: red for html code  heart */
	/* red for svg icon */
	filter: invert(22%) sepia(56%) saturate(3587%) hue-rotate(342deg) brightness(96%) contrast(106%);
}
img.noFavorite, button img.isFavorite:hover {
	color: #878787; /* unset favorite - only on buttons */
	transition: 0.3s;
	filter: invert(60%) sepia(98%) saturate(7%) hue-rotate(324deg) brightness(91%) contrast(93%);
}

/* End Region: Favorite Icons */

div#articlelistview div.largetiles:hover {
  background-color: rgba(255, 239, 244, 0);
}

div#articlelistview div.largetiles:hover div.priceBox, div#articlelistview div.largetiles:hover div.priceLine{
  background-color: var(--Hauptfarbe);	
}
div#articlelistview div.largetiles div.saves, div#articlelistview div.largetiles div.sprechstd { /* both the same except background color */
	position: absolute;
	top : 0px;
	left : 0px; 
	width: 45px; /*75px; */
	height: 20px; /*30px; */
	font-weight: bold;
	font-size: 12px;
	padding: 3px;
	opacity: 1.0;
	text-align: center;
	/*filter:alpha(opacity=70);*/
	color: #ffffff;
	background-color: var(--Drittfarbe);
	z-index: 10; 
	border-radius: 3px;
  /* border: 1px solid #999999; */
}
div#articlelistview div.largetiles div.saves{
  background-color: var(--Viertfarbe);
  color: white;
  line-height: 20px; /* large 150px line-height inherited from image */
}

/* wenn Preis als Box angezeigt wird, muss Sprechstundenbedarf auch als Box angezeigt werden */
div#articlelistview div.largetiles  .savesText, table#articlelistview  .sprechstdText {
	padding: 10px 0;
	display: inline-block;
}

/* wenn Preis als Zeile angezeigt wird, muss Sprechstundenbedarf auch als Zeile angezeigt werden */
div#articlelistview div.largetiles div.sprechstdLine {
	height: 18px;
	line-height: 18px;
	position: absolute;
	top: 0px; /*22px;*/
	width: 100%;
}

div#articlelistview div.largetiles .sprechstdText, div#articlelistview div.largetiles .savesText{
	padding: 0px;
	display: inline;
}

div#articlelistview div.largetiles div.percentage {
  font-weight: bold;
  font-size: 12px;
  text-align: center;
}



#articlelistview form button{
	margin: 0px;
	border: medium none;
	padding: 0px;
	cursor: pointer;
}

div #articlelistview div.artCaption{
	height: 50px;
	overflow: hidden;
	padding: 3px;
}



.largetiles .grayBackground{
  padding: 0px;
  line-height: 15px;
  margin: 0px;
}

.largetiles:hover div.grayBackground{
  /* background-color: #af5163;
  background-repeat: repeat-x;
  padding: 0px;
  line-height: 20px;
  margin: 0px; */
}

div #articlelistview form input[type="text"]{
	width:26px;
}

a.helpLink{
	display: inline-block; 
}

/* Start: Bildvorschau in Artikeldetail */
div#articleDetailView .bigImgLine{
  min-height: 200px;
  line-height: 200px;
}
div#articleDetailView .bigImgLine #bigImg{
  vertical-align: middle;
}
div#articleDetailView .previewLine{
  padding: 15px 0;
}

div#articleDetailView .previewLine .previewItem {
  padding: 0px;
  border: 1px solid var(--Randfarbe);
  height: 90px;
  width: 90px;
  line-height: 90px;
  display: inline-block;
  background-color: white;
}
div#articleDetailView .previewLine .previewItem img.previewImg{
  max-height: 80px;
  max-width: 80px;
  vertical-align: middle;
  border: medium none;
}
/* Ende: Bildvorschau in Artikeldetail */

div#articleDetailView .artPriceBox{
	/* border: 1px solid #a0a0a0; */
    margin: 10px 0; 
    padding: 10px 0;
    width: auto;
	/* width: 160px; */ 
    /* background-color: #dddddd;
	-moz-border-radius: 0 8px;
	-webkit-border-radius: 0 8px;
	border-radius: 0 8px;	*/
}

div#articleDetailView .artPriceBox .artPrice{
	text-align: left;
	font-weight: bold; 
	font-size: 35px;
	color: var(--Hauptfarbe);		 
}

div#articleDetailView .buyPart{
	padding: 10px 0;
}

div#articleDetailView .buyPart input[type="text"]{
	text-align: center;
	min-height: 30px;
	width: 60px;
}
div#articleDetailView .buyPart .pAmount{
	float: left; 
	margin: 5px 5px 5px 0px;
}
div#articleDetailView .buyPart div.plusMinus{
	width: 10px; 
	display: inline-block;
	margin: 5px 5px 5px 0px;
}

div#articleDetailView .buyPart button{
	border-radius: 4px; 
	padding: 5px 15px;
	min-width: 200px;  
	font-weight:bold;
	color: #ffffff;
	background-color: var(--Hauptfarbe);
	height: 40px;
}
div#articleDetailView .buyPart button img{
	margin-left: 20px;
	vertical-align: middle;
}

div#articleDetailView table.articleTableInfo{
	width: 330px; 
	border-collapse: collapse;
}
div#articleDetailView table.articleTableInfo tr td{
	min-width: 150px;
}
div#articleDetailView .artPriceInfo{
	font-size: 8pt;
}
div#articleDetailView .articleText{
	min-height: 100px; 
	border: 1px solid var(--Randfarbe);
	padding: 10px;
}
div#articleDetailView .articleText h2.articleInfo{
	margin-top: 0px; 
	font-size: 1.2em;
}

div#articleDetailView .showFollowArticle a.showFollowArticleLink{
	display: block; 
	margin: 10px 0; 
	width: 250px; 
	color: var(--Zweitfarbe);
	text-decoration: underline;
}


div#articleDetailView div.boxContent{
	margin: 15px 0;
	min-height: 300px;
}

div#articleDetailView div.boxContent div.rightPart{
	float: right;	
	width: auto;
	min-width: 400px;
	max-width: 450px;		  
}

div#articleDetailView div.boxContent div.leftPart{
	width: 330px;
	margin-bottom: 20px;
}
div#articleDetailView div.boxContent div.rightPart div.priceInfo{
	
}
div#articleDetailView div.boxContent div.rightPart h1{
	font-size:		25pt; /* better on mobile? */
	font-weight: 	bold;
	margin-top:5px;
}		
div#articleDetailView div.boxContent div.articleText{
	margin-top: 20px;
	
}

div#articleDetailView div.articleImg{
	text-align: center; 
}

div#articleDetailView div.articleImg img{
	/* border: 1px solid var(--Randfarbe);  */
	text-align: center; 
	max-width: 300px;
}
div#articleDetailView table tr td{
	padding: 3px;
}
div#articleDetailView table tr td.colDesc{
	font-weight: bold;
}
div#articleDetailView table tr:nth-child(odd) {
	/* background-color: var(--Randfarbe); */
}
a.helpLink img.helpIcon{
	display:inline-block; 
	margin-left: 5px;
	vertical-align: middle; 
	width :20px; 
	height: 20px;
	padding-bottom: 3px; 
}
div#articlelistview div.largetiles div.imgcontainer {
  height: 150px;
  line-height: 150px; /* damit Artikelbilder vertikal zentriert werden */
  text-align: center; /* damit Artikelbilder horizontal zentriert werden */
  width: 100%;
  overflow: hidden; /* keine scrollbar */
  position: relative;
}

div#articlelistview div.largetiles div.imgcontainer img {
    max-height: 150px;
    max-width: 200px;
    overflow: hidden;
	vertical-align: middle;
}

div#articlelistview div.largetiles>img {
  display: block;
  max-width: 200px;
  max-height: 150px;
  text-align: center;
}

div#articlelistview div.largetiles h1 {
  cursor: pointer;
  margin: 0px;
  text-align: center;
  font-size: 15px;
  overflow: hidden;
}

div#articlelistview div.largetiles h2 {
  margin: 0px;
  margin-top: 8px;
  font-size: 12px;
  border-top: 1px solid var(--Randfarbe);
}

div#articlelistview div.largetiles .amountLine {
  display: inline-block;
  font-size: 11px;
  color: #555555;
}

div#articlelistview div.largetiles div.text {
  overflow: hidden;
  height: 30px;
  font-size: 11px;
  text-align: center;
  color: #555555;
}

div#articlelistview div.largetiles div.buy {
  text-align: right;
  /* color: #efefef; */
}

/* removing default heights */
#boxAllArticles, #breadcrumbsBox, #breadcrumbsBox div.boxContent, div#articleDetailView #breadcrumbsBox div.boxContent{
	min-height: 0px;
}

#boxAllArticles a, .boxAllArticles a:visited{
	color: #ffffff;	
}


/* Shop Site */
div#boxShopArticles .boxContent{
	padding: 0px;
}

/* Cart Site */

div#boxCart .cartButtonList{
	text-align: right; 
	padding: 0 5px;
}
div#boxCart div.cartButtonList div.leftButtons{
	float: left; 
	width: 200px; 
	text-align: left;	
}
div#boxCart div.cartSum{
	position: relative; 
	margin-top: 8px; 
	margin-bottom: 24px;
}
div#boxCart div.cartSum div.topBorder{
	padding-top: 8px; 
	border-top: 1px solid var(--Randfarbe);
}
div#boxCart div.cartSum .sumLabel{
	font-weight: bold;
	display: inline-block;
	min-width: 140px;
}

div#boxCart div.cartSum .sumRow{
	padding-top: 8px;
}
div#boxCart div.cartSum div.dynamicArticles{
	position: relative; 
	border-top: 1px solid var(--Randfarbe); 
	padding-top: 10px; padding-bottom: 10px;
}

div#boxCart div.closeOrder{
	font-weight: bold; 
	text-align: right;
	clear: both;
}
div#boxCart div.closeOrder button[disabled="disabled"]{
	color: #333333; 
	background-color: #eeeeee; 
	cursor: default; 
}

div#boxCart div.cartSum div.topBorder div.rightSearchElement{
	text-align: right; 
	position: relative; 
	float: right; 
	width: 12ex; 
	height: 2em;
}


/* Change Password, Kontakt */
table.changePasswordTable tr td, table.contactTable tr td {
	min-width: 150px;
}

table.contactTable tr td div.submit{
	text-align: center;
}

div.priceFootnotes{
	color: #444444; 
	font-size: 7.5pt; 
	padding-top: 10px;
}

/* Submit Buttons in Tabellen generell */
table tr td input[type="submit"]{
	margin: 10px 0;	
	min-width: 150px;
}


div#scrollContainer {
  border: 1px solid var(--Randfarbe);
  min-height: 150px;
  max-height: 500px;
  overflow-y: scroll;
  overflow-x: hidden;
}

table#articlelistview tr {
  padding: 4px 0;
}

table#articlelistview tr.row1:hover, table#articlelistview tr.row0:hover {
	background-color: var(--Randfarbe); 
}

table#articlelistview tr:nth-child(odd) {
  background-color: #ffffff;
}

table#articlelistview tr:nth-child(even) {
  background-color: #f0f0f0; /* var(--Randfarbe); */
}

table#articlelistview td{
  padding-left: 3px;
  padding-right: 3px;
}

table#articlelistview td.id {
  text-align: right;
  border-right: 1px solid var(--Randfarbe); 
  padding-right: 4px;
}

table#articlelistview td.text {
  font-size: 10pt;
}

table#articlelistview td.text div.container {
  position: relative;
}

table#articlelistview div.saves, table#articlelistview div.sprechstd{ /* both the same except background color */
  width: 50px;
  height: 25px;
  font-weight: bold;
  font-size: 10px;
  padding: 5px;
  opacity: 1.0;
  text-align: center;
  color: #ffffff;
  background-color: var(--Drittfarbe);
}

table#articlelistview div.saves{
	background-color: var(--Viertfarbe);
  font-size: 12px; /* nur Rabatt etwas größer, nicht Sprechstd */								   
}	

table#articlelistview td.text  div.percentage {
  font-weight: bold;
  font-size: 11pt;
  text-align: center;
}

table#articlelistview td.text h1 {
  margin: 0px;
  font-size: 10pt;
  border-bottom: none;
  font-weight: bold;
}

table#articlelistview td.text h1+span, table#articlelistview td.text .textsmall {
  color: #666666;
  font-size: 90%;
}

table#articlelistview td.text .hint {
  font-size: 75%;
  color: #808080;
}

table#articlelistview td.buy, table#articlelistview td.price {
  font-size: 10pt;
  text-align: right;
}

#articlelistview input.cartAmounts{
	width: 40px;
	text-align: right;
}

#articlelistview div.noFinalPrice{
	margin-top: 8px; 
	margin-bottom: 8px;
}
#articlelistview span.infoMwst{
	font-size: 75%; 
	color: #808080;
}

#articlelistview div.largetiles span.infoMwst{
	font-size: 75%; 
	color: #ffffff;
}

#articlelistview div.largetiles input.cartAmount{
	text-align: right;
	width: 45px;
}

table.articlelistview .special { 
	background-color: #FFD493; /* orange bg only in list view, not in largetiles */
}
.customer, .largetiles .customer{ /* second one is for priority against the regular .largetiles .priceLineTiny */
	background-color: var(--Hauptfarbe); 
	color: white;
}

/* Kundenpreisbox muss größer sein, da der Text Kundenpreis noch drinsteht */
.articlelistview div.largetiles div.customer, table#articlelistview tr td.customer,  table#articlelistview tr td.customer span.infoMwst{
  background-color: var(--Hauptfarbe);
  color: #ffffff;
}

/* table#articlelistview {
  border-collapse: collapse;
  padding: 0px;
  width: 100%;
  position: relative;
} */
table#listview, table#articlelistview {
  /* border: 1px solid var(--Randfarbe); */
  /* min-height: 200px; */ /* no, makes the rows huge if there are just two or three */
  display: table;
  border-collapse: collapse;
  width: 100%;
  padding: 0px;
   
}
table#listview{
 line-height: 30px;
}
table#listview tr.row0 {
  background-color: #ffffff;

}

table#listview tr.row1 {
  background-color: #f1f1f173;
}

table#listview td {
  padding-left: 3px; 
  padding-right: 3px;
}

table#listview td.id {
  text-align: center;
  font-weight:bold;
  /* border-right: 1px solid var(--Randfarbe); */
}

table#listview td.text {
  font-size: 10pt;
}

table#listview td.text h1 {
  margin: 0px;
  font-size: 10pt;
  border-bottom: none;
}

table#listview td.text .hint {
  font-size: 75%;
  color: #808080;
}

table#listview td.buy, table#listview td.price {
  font-size: 10pt;
  text-align: right;
}

table#listview td.cart {
	color: #FFFFFF;
}
table#listview td.incue {
  color: #F2910D;
}
table#listview td.inprogress {
  color: #008080;
}
table#listview td.archive {
  color: #000000;
}

div.listitem0 {
  border-bottom: 1px solid #BDD7D7;
  background-color: #FFFFFF;
  height: 4em;
}

div.listitem1 {
/*  position: relative;
  width: 100%;
  overflow: hidden;*/
  border-bottom: 1px solid #BDD7D7;
  background-color: #DEE9EF;
  height: 4em;
}

div#orderinformation {
  min-width: 693px;
  border: 1px solid var(--Randfarbe);
  overflow: auto;
  position: relative;
}

div#orderinformation div#address, div#orderinformation div#bill, div#orderinformation div#deliver{
  float: left;
  width: 220px;
  overflow: auto;
  border-left: 1px solid var(--Randfarbe);
  padding-left: 10px;
}

div#orderinformation h1 {
  font-size: 12pt;
  border-bottom: none;
}

div#orderinformation div#header {
  padding-left: 10px;
  clear: left;
  border: 1px solid white;
  border-top: 1px solid var(--Randfarbe);
}

div#orderinformation div#header p {
  font-weight: bold;
}

div#cartinformation {
  border: 1px solid var(--Randfarbe);
  overflow: auto;
  position: relative;
}

div#cartinformation h1 { 
  font-size: 12pt;
  border-bottom: none;
}


div#cartinformation div#bill, div#cartinformation div#deliver, div#cartinformation div#address{
  /* border: 1px solid var(--Randfarbe); */
  padding-left: 10px;
  margin: 5px;
}

div#cartinformation div#bill, div#cartinformation div#deliver{
  float: left;
  width: 330px;	
}

div#cartinformation div#header {
  padding-left: 10px;
  clear: left;
  border: 1px solid white;
  border-top: 1px solid var(--Randfarbe);
}

div#cartinformation div#header label {
  min-width: 160px;
}

div.article-articleview-title {
  font-weight: bold;
  margin: 8pt;
}

div.article-articleview-desc {
  font-size: 11pt;
  font-weight: bold;
  color: #bbbbbb;
  margin: 8pt;
}

div.article-articleview-img {
  padding: 12px;
  float : right;
  text-align: center;
  width: 300px;
  max-height: 500px;
  overflow: hidden;
}

div.article-articleview-downloads {
  padding: 12px;
  float : right;
  text-align: left;
  width: 290px;
  overflow: hidden;
  clear: right;
  margin-top: 30px;
}

div.article-articleview-downloads > h1 {
  font-size: 16px;
  border-bottom: 1px solid var(--Randfarbe);
}

div.article-articleview-downloads > a {
  display: block;
  margin-top: 3px;
}

div.article-articleview-downloads > a:before { content:"\2022\0020"; }

div.article-articleview-text {
  margin: 8pt;
  font-size: 10pt;
  color: #000020;
}

div#boxPreviewImage{
	display: block; 
	position: fixed;
	right:20px;
	top: 200px; /* do NOT copy-replace this, depends on the custom logo height */
}

div#boxPreviewImage img{
	border: 1px solid var(--Randfarbe);
	max-height: 200px;
}

/* historische bestellung ehem. #historicOrder */
.historicDocument span.leftCol{
	display: inline-block;
	width: 150px;
	vertical-align: top;
}
.historicDocument span.priceRight{
	display: inline-block;
	width: 65px;
	text-align: right;
}

.historicDocument div.floatingBlock{
	display: block;
	border: 1px solid var(--Randfarbe);
	padding: 5px 10px;
	min-width: 230px;
	max-width: 250px;
	float: left;
	margin-right: 10px;
	min-height: 160px; /* because adresses are different heights */
}
.historicDocument span.rightColBlock{
	display: inline-block;
	border: 1px solid #808080;
	padding: 10px
}

.historicDocument  .caption{
	font-weight: bold;
	margin-bottom: 10px;
}

.historicDocument .submitBar a{
	color: #FFFFFF;
}
.historicDocument  .submitBar .submitImg{
	vertical-align: middle;
}
/* new launch 2023 */

.flexContainerHorizontal {
    flex-direction: row;
    /* border-bottom: 1px solid #eeeeee; */ /* half the time this line is annoying */
    padding-bottom: 10px;
    margin-bottom: 15px;
    align-items: flex-start; /* center */
}
.flexContainerVertical, .flexContainerHorizontal {
    display: flex;
    flex-wrap: wrap;
    text-align: left;
    position: relative;
    justify-content: space-between; /* not space-evenly;  because it centers content and adds margins but we need it to be aligned with the top navigation. */
    /* line-height: 150%; */
    /* margin: 20px; */
}

.flexElementMedium {
	min-width: 200px;
	width: 220px; /* need exact ones to make proper columns */
	min-height: 20px;
	margin: 20px 10px 20px 0px;
}
.flexElementMedium p{
	line-height: 15pt;
	margin: 5px 0px;
}

#portalBoxContent .flexContainerHorizontal .linkbox{ /* blue boxes really only on portal sub site */
	color: #ffffff;
	background-color: var(--Hauptfarbe);
	text-align: center;
	padding: 15px 2px;
}
#portalBoxContent .flexContainerHorizontal .linkbox a{
	color: #ffffff;
}
#portalBoxContent a{
	font-weight:bold;
}
#portalBoxContent .customerData label{
	min-width: 80px;
	margin: 0px;
}
#portalBoxContent .vendorData p label{
	margin:  0px;
}

/* new launch 2024 -> COLUMNS in FlexContainer*/
/* Create several equal columns that floats next to each other */
.boxContent .column {
  float: left;
  width: auto;
  min-width: 150px;
  max-width: 260px;
  padding: 10px;
  min-height: 250px;
  height: auto;
  text-align: center;
}

.boxContent .column a {
  float: none;
  color: black;
  text-decoration: none;
}

.boxContent .column h3{
	font-size: min(2.1vmax, 20px);
	font-weight: normal;
	color:var(--Zweitfarbe);
}
.boxContent .column img {
  height: 50px;
  /* sets svg color. to convert this value from hex use: https://codepen.io/sosuke/pen/Pjoqqp */
  /*filter: invert(15%) sepia(95%) saturate(2501%) hue-rotate(202deg) brightness(91%) contrast(101%); now set at top in separate class */
  display: block;
  margin: auto;
}
.boxContent .column p {
	font-size: 18px;
	line-height: 24pt;
	color: #666;
}	

.boxContent .flexContainerHorizontal:after { /* Clear floats after the columns */
  content: "";
  display: table;
  clear: both;
}

	
/* new launch 2024 -> DROPDOWN MENU */
.dropdown {
  float: left;
  overflow: hidden;
  padding: 10px 1px 4px 1px;
}

.dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  /* padding: 14px 16px; */
  background-color: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: white;
}

.dropdown .dropdown-content {
  /* display: none; */  /* transitions work only on opacity, not on display */
  opacity: 0;
  pointer-events: none; /* disable all mouse events. essential because without display: none, mouseover on invisible dropmenu will work anyway and always show the menu when you hover over anything in that area */
  transition: 0.6s; /* Transition effects on hover (color) */
  position: absolute;
  background-color: #f9f9f9;
  margin: auto auto;
  width: 70%;
  left: -1.25rem; /*setzt dropdown mittig */
  right: -1.25rem;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  padding: 10px 30px;
}

.dropdown:hover .dropdown-content {
  /*display: block;*/
  opacity: 1; 
  pointer-events: all; /* enable the mouse events when its visible */
}

/* Create 3+ equal columns that float next to each other */
.dropdown .column {
  float: left;
  width: auto;
  min-width: 160px;
  padding: 10px 30px;
  min-height: 250px;
  height: auto;
}

.dropdown .column a {
  float: none;
  color: #555;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown .column a h3  {
	font-weight: bold;
	color: var(--Zweitfarbe);
	font-size: 1.2em; 
	margin: 5px 0px;
}

.dropdown .column a span.icon{ /* bigger gray arrow */
	font-size:20px;
	vertical-align: bottom;
	color: #aaa;
}
.dropdown .column .column-noheader  {
	display: block;
	min-height: 47px; /* if all categories are shown im multiple columns, place for empty column header must be added */
}

.dropdown .row:after {	/* Clear floats after the columns */
  content: "";
  display: table;
  clear: both;
}

/* new launch 2024 -> BANNER -> set max-width in layout.default.css */
.bannerLarge{
	position: relative;
	margin: auto;
	margin-bottom: 20px;
	color: var(--Zweitfarbe);
}
.bannerLarge img{
	width:100%;
	object-fit: cover;
	margin: auto;
	display: block;
}
.bannerLarge .bannerText{
	position:absolute;
	top: 83px;
	left: 40px;
	font-weight: bold;
}
/* largest text */
.bannerLarge h2.bannerText{
	/* font-size: 35px; */
	font-size: min(3.9vmax, 100px); /* max / min functions: vmax will scale with browser size regardless of max page size, therefore we need a max font size */
	/* font-size: 1vmin; *//* schlecht, macht kleinste größe */
}
/* medium text */
.bannerLarge h3.bannerText{
	 font-size: 50px; /* ie sonderfall */
	font-size: min(3.4vmax, 60px);
	/*font-size: 1vmin; */
}
/* small text */
.bannerLarge p.bannerText{
	font-size: 25px;
	font-size: 2.1vmax;
	/*font-size: 0.8vmin;*/
}