.mwd-references-grid { 
	display: grid; 
	gap: 30px; 
	margin-top: 20px; 
	grid-template-columns: 1fr; 
}
@media (min-width: 768px) {
	.mwd-references-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.mwd-references-grid { grid-template-columns: repeat(var(--mwd-cols, 3), 1fr); }
}

.mwd-reference-item { 
	border-radius: 8px; 
	box-shadow: 0 6px 15px rgba(0,0,0,0.1); 
	overflow: hidden; 
	display: flex; 
	flex-direction: column; 
}
.mwd-ref-image { width: 100%; height: 220px; cursor: pointer; overflow: hidden; }
.mwd-ref-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.mwd-ref-image:hover img { transform: scale(1.05); }

.mwd-ref-content { padding: 20px; padding-bottom: 0; display: flex; flex-direction: column; flex-grow: 1; }

.mwd-ref-title { margin: 0 0 10px 0; cursor: pointer; }
.mwd-ref-title:hover { text-decoration: underline; }
.mwd-ref-categories { margin-bottom: 15px; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.8; }
.mwd-ref-text-wrapper { margin-bottom: 20px; flex-grow: 1; }
.mwd-ref-read-more { background: none; border: none; padding: 0; font-weight: bold; cursor: pointer; margin-top: 10px; opacity: 0.9; }
.mwd-ref-read-more:hover { text-decoration: underline; }

.mwd-ref-actions { 
	display: flex; 
	flex-direction: column; 
	margin-top: auto; 
	margin-left: -20px; 
	margin-right: -20px; 
}

.mwd-ref-gallery-btn, .mwd-ref-link {
	width: 100%;
	text-align: center;
	padding: 15px;
	border: none;
	border-radius: 0;
	font-weight: bold;
	cursor: pointer;
	box-sizing: border-box;
	font-size: 1rem;
	display: block;
	/* Der smarte Filter-Effekt greift auf alle Hintergründe */
	transition: filter 0.3s ease, background 0.3s ease; 
}

/* NEU: Farben über CSS Variablen vom PHP injiziert (mit Fallbacks) */
.mwd-ref-gallery-btn { 
	background: var(--mwd-btn-bg, #0073aa); 
	color: var(--mwd-btn-color, #ffffff); 
}
.mwd-ref-gallery-btn:hover { 
	filter: brightness(0.85); /* Dunkelt die eingestellte Farbe um 15% ab */
}

/* Der Projektlink bleibt farblich neutral als sekundärer Button */
.mwd-ref-link { background: #333; color: #fff; text-decoration: none; }
.mwd-ref-link:hover { filter: brightness(0.85); }

.mwd-ref-actions > :last-child {
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
}

.mwd-references-empty { padding: 20px; border-left: 4px solid #ddd; }

/* =========================================
   MWD LIGHTBOX (Galerie Overlay mit Slide)
   ========================================= */
.mwd-lightbox {
	display: flex; visibility: hidden; opacity: 0; pointer-events: none;
	position: fixed; z-index: 999999; left: 0; top: 0; width: 100%; height: 100%;
	background-color: rgba(0, 0, 0, 0.9); backdrop-filter: blur(5px);
	flex-direction: column; justify-content: center; align-items: center;
	transition: opacity 0.4s ease, visibility 0.4s ease;
}
.mwd-lightbox.mwd-active { visibility: visible; opacity: 1; pointer-events: auto; }
.mwd-lightbox-content { position: relative; max-width: 90%; max-height: 80vh; display: flex; flex-direction: column; align-items: center; }

.mwd-lightbox-img {
	max-width: 100%; max-height: 80vh; object-fit: contain; box-shadow: 0 4px 15px rgba(0,0,0,0.5); border-radius: 4px;
	opacity: 0; transform: scale(0.97); 
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.mwd-lightbox-img.mwd-dir-next { transform: translateX(50px); opacity: 0; }
.mwd-lightbox-img.mwd-dir-prev { transform: translateX(-50px); opacity: 0; }
.mwd-lightbox-img.mwd-loaded { opacity: 1; transform: scale(1) translateX(0); }

.mwd-lightbox-caption { color: #ccc; margin-top: 15px; font-size: 1rem; text-align: center; }
.mwd-lightbox-counter { position: absolute; top: 20px; left: 20px; color: #fff; font-size: 1rem; background: rgba(0,0,0,0.5); padding: 5px 10px; border-radius: 4px; }
.mwd-lightbox-close { position: absolute; top: 20px; right: 30px; color: #fff; font-size: 40px; font-weight: bold; cursor: pointer; background: none; border: none; padding: 0; line-height: 1; transition: color 0.3s; }
.mwd-lightbox-close:hover { color: #0073aa; }
.mwd-lightbox-prev, .mwd-lightbox-next { cursor: pointer; position: absolute; top: 50%; transform: translateY(-50%); width: auto; padding: 16px; color: white; font-weight: bold; font-size: 24px; transition: 0.3s; background: rgba(0,0,0,0.3); border: none; border-radius: 4px; user-select: none; }
.mwd-lightbox-prev:hover, .mwd-lightbox-next:hover { background-color: rgba(0,0,0,0.8); color: #0073aa; }
.mwd-lightbox-prev { left: 20px; }
.mwd-lightbox-next { right: 20px; }