/* Var Definitions */
.productRelations {
	--bg-color: transparent;
	--font-color: var(--font-color-dark, #ffffff);		/* Schriftfarbe im Menü*/
	--hover-color: var(--logo-color-2, #ffffff);	/* Hover Linkfarbe im Menü*/
	--link-color: var(--font-color-light, #ffffff);
	--h1-color: var(--logo-color-1);
	--num-cols: 4;
	--gap-width: 20px;
}

.productRelations .container {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	column-gap: var(--gap-width);
	row-gap: var(--gap-width);
}

.productRelations .title {
	font-size: 22px;
	color: var(--font-color);
	hyphens: auto;
}

.productRelations .header {
	display: inline-block;
	margin-top: 10px;
	padding: 10px;
	font-size: 32px;
	font-weight: 600;
	color: white;
	background-color: var(--logo-color-1);
	border-radius: 10px 10px 0 0;
}
.productRelations .header a { color: white; }

.productRelations .item {
	display: flex;
	position: relative;
 	border: 1px solid var(--logo-color-1);
 	padding: 13px;
	background-color: var(--bg-color);
	flex-grow: 0.5;
	column-gap: var(--gap-width);
	box-sizing: border-box;
	flex-basis: calc( (100% / var(--num-cols)) - ( var(--gap-width) * (var(--num-cols) - 1) / var(--num-cols)));
	overflow: visible;
}

.productRelations .item .subtypes .title { margin-bottom: 10px; }
.productRelations .item .subtypes li { list-style-type: none; padding-left: 25px; }

.productRelations .item .subtypes li:before { 
  width: 15px;
  height: 15px;
  background: white;
  border: 1px solid #333434;
  border-radius: 100%;
  content: '';
  position: absolute;
  top: 5px;
}
.productRelations .item .subtypes li:hover:before { background-color: var(--logo-color-1); }

.productRelations .item a { display: block; text-decoration: none; }
.productRelations .item .pic  { width: 100%; }

/* animation */
.productRelations .item>div img { transition: transform var(--transition-time) ease; }
.productRelations .item>div:hover img { transform: scale(1.05,1.05); }


@media all and (max-width: 1000px) { .productRelations { --num-cols: 4; } }
@media all and (max-width: 600px) { .productRelations { --num-cols: 2; } }
@media all and (max-width: 300px) { .productRelations { --num-cols: 1; } }