.pixNav {
  --bg-color: transparent;
  --font-color: var(--font-color-light, #ffffff);   /* Schriftfarbe im Menü*/
  --hover-color: var(--logo-color-2, #ffffff);  /* Hover Linkfarbe im Menü*/
  --h1-color: var(--font-color-light);
  --h2-color: var(--logo-color-1);
  --h3-color: var(--logo-color-1);
  --num-cols: 4;
  --gap-width: 20px;
  --top-margin: 10px;
  --bottom-margin: 10px;
  --element-radius: var(--border-radius, 10px);
  --button-radius: var(--border-radius-small, 5px);
}
.pixNav.flexwidth .item { box-shadow: none; }
.pixNav.flexwidth .item .text { text-align: right; background-color: rgba( var(--logo-color-2-rgb), 0.9);}
.pixNav.flexwidth .item .text .titel { 
	text-transform: initial; 
	font-size: 1rem;
	color: var(--font-color-dark);
}
.pixNav.flexwidth .item .text p { color: var(--font-color-dark); }
.pixNav.flexwidth .item { box-shadow: none; }
.pixNav.flexwidth .item .text { 
	text-align: right; 
	background-color: rgba( var(--logo-color-2-rgb), 0.9); 
	bottom: -75%;
}


.pixNav.flexwidth .item::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	transition: opacity 500ms ease;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 70% auto;
	background-image: url("../../images/content/sonne-und-turm.svg");
	filter: brightness(0) invert(1);
}

.pixNav.flexwidth .item:hover::after {
	opacity: 0.3;
}