.werwirsind .pxl-item--inner {
	transition: background-color 0.3s ease-in-out;
	transition: transform 0.3s ease-in-out;
}

.werwirsind .pxl-item--inner .pxl-item--image {
	transition: filter 0.3s ease-in-out;
}

.werwirsind .pxl-item--inner:hover {
	background-color: #3b3939a6!important;
	transform: translate(10px, 10px);
}

.werwirsind .pxl-item--inner:hover .pxl-item--title {
	color: #3b3939a6!important;
}

.werwirsind .pxl-item--inner:hover .pxl-item--position span {
	color: #3b3939a6!important;
}

.werwirsind .pxl-item--inner:hover .pxl-item--image {
	filter: brightness(0.2);
}

.hover-text {
	z-index: 10;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 10px 15px;
    border-radius: 5px;
    opacity: 0; /* Standardmäßig unsichtbar */
    transition: opacity 0.3s ease-in-out;
    pointer-events: none; /* Verhindert, dass der Text den Hover blockiert */
    font-size: 16px;
    text-align: center;
    width: 80%;
    max-width: 400px;
	max-height: 300px;
	
	 /* Hier kommt der Scrollbalken-Trick */
    overflow-y: auto; /* Aktiviert vertikales Scrollen bei Überlauf */
    scrollbar-width: thin; /* Macht den Scrollbalken schmal */
    scrollbar-color: white rgba(0, 0, 0, 0.5); /* Farbe für moderne Browser */
	pointer-events: auto;
}

/* Für Webkit-Browser (Chrome, Safari) - Anpassung des Scrollbalkens */
.hover-text::-webkit-scrollbar {
    width: 6px; /* Breite des Scrollbalkens */
}

.hover-text::-webkit-scrollbar-thumb {
    background-color: white; /* Farbe des Scrollbalkens */
    border-radius: 3px; /* Abgerundete Ecken */
}

/* Hover aktivieren */
.pxl-item--inner:hover .hover-text {
    opacity: 1;
    pointer-events: auto; /* Aktivieren, damit der Benutzer interagieren kann */
}