/* MuGeBa Team: Bildraster mit Bildwechsel. Farben aus dem Theme, mit Ersatzwerten. */
.mgb-tm {
	--tm-k: var(--wp--preset--color--schwarz, #1A1A1A);
	--tm-rd: var(--wp--preset--color--rot-dunkel, #A50010);
	--tm-gr: var(--wp--preset--color--grau, #625A52);
	--tm-s: var(--wp--preset--color--sand, #F3EDE2);
	--tm-r: var(--wp--preset--color--rot, #E30613);
	margin-block: 0 2.5rem;
}
.mgb-tm__liste {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(var(--mgb-tm-spalten, 4), minmax(0, 1fr)); gap: 32px 24px;
}
.mgb-tm__karte { margin: 0; min-width: 0; }
.mgb-tm__bild {
	position: relative; aspect-ratio: 4 / 5; overflow: hidden;
	border: 2px solid var(--tm-k); border-radius: 12px; background: var(--tm-s);
}
.mgb-tm__bild img {
	position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 20%;
	transition: opacity .4s ease, transform .6s ease;
}
.mgb-tm__hinten { opacity: 0; }
.mgb-tm__karte--wechsel:hover .mgb-tm__hinten,
.mgb-tm__karte--wechsel.ist-hinten .mgb-tm__hinten { opacity: 1; }
.mgb-tm__karte--wechsel:hover .mgb-tm__bild img,
.mgb-tm__karte--wechsel.ist-hinten .mgb-tm__bild img { transform: scale(1.03); }
.mgb-tm__karte--wechsel { cursor: pointer; }
.mgb-tm__initialen {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	font-weight: 800; font-size: clamp(28px, 4vw, 44px); color: var(--tm-gr); letter-spacing: -.02em;
}
.mgb-tm__name { margin: 12px 0 0; font-weight: 700; font-size: 18px; line-height: 1.25; }
.mgb-tm__funktion { margin: 2px 0 0; font-weight: 600; font-size: 15px; color: var(--tm-rd); line-height: 1.3; }
.mgb-tm__info { margin: 4px 0 0; font-size: 14px; color: var(--tm-gr); line-height: 1.4; }
.mgb-tm__leer { color: var(--tm-gr); }
@media (max-width: 900px) {
	.mgb-tm__liste { grid-template-columns: repeat(min(var(--mgb-tm-spalten, 4), 3), minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.mgb-tm__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
	.mgb-tm__name { font-size: 16px; }
	.mgb-tm__funktion { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
	.mgb-tm__bild img { transition: none; }
	.mgb-tm__karte--wechsel:hover .mgb-tm__bild img, .mgb-tm__karte--wechsel.ist-hinten .mgb-tm__bild img { transform: none; }
}