/* MP Team – Frontend */
.mp-team {
	--mp-farbe: #1b78e3;   /* Überschriften, Filter, Aufklapp-Balken */
	--mp-karte: #1b78e3;   /* Kartenrahmen, Name, Icons */
	--mp-info-bg: #f7f7f9; /* Hintergrund Textbereich der Karte */
	--mp-cols: 3;
	--mp-text: #1f1f24;
	--mp-grau: #6b7280;
	color: var(--mp-text);
}

/* ---------- Filter ---------- */
.mp-team .mp-team-filter {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0 0 45px;
}
.mp-team .mp-team-filter button {
	margin: 0;
	padding: 12px 24px;
	border: 2px solid var(--mp-farbe);
	border-radius: 0;
	background: #fff;
	color: var(--mp-farbe);
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: .02em;
	cursor: pointer;
	transition: background .2s, color .2s;
	box-shadow: none;
}
.mp-team .mp-team-filter button:hover,
.mp-team .mp-team-filter button.is-active {
	background: var(--mp-farbe);
	color: #fff;
}

/* ---------- Regionen / Bezirke ---------- */
.mp-team .mp-team-region { margin-bottom: 55px; }
.mp-team .mp-team-region[hidden] { display: none; }

.mp-team .mp-team-region-titel {
	margin: 0 0 10px;
	color: var(--mp-farbe);
	text-transform: uppercase;
}
.mp-team .mp-team-region-titel span {
	display: block;
	margin-top: 4px;
	font-size: .55em;
	font-weight: 400;
	text-transform: none;
	color: var(--mp-grau);
}

.mp-team .mp-team-gruppe + .mp-team-gruppe { margin-top: 40px; }
.mp-team .mp-team-bezirk {
	margin: 25px 0 20px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--mp-farbe);
	color: var(--mp-farbe);
	font-size: 19px;
	text-transform: uppercase;
	letter-spacing: .03em;
}

/* ---------- Grid & Karte ---------- */
.mp-team .mp-team-grid {
	display: grid;
	grid-template-columns: repeat(var(--mp-cols), minmax(0, 1fr));
	gap: 30px;
}
.mp-team .mp-team-karte {
	min-width: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--mp-info-bg);
	border: 1.5px solid var(--mp-karte);
	border-radius: 8px;
	text-align: left;
}
.mp-team .mp-team-foto { line-height: 0; }
.mp-team .mp-team-foto img,
.mp-team .mp-team-initialen {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 5 / 6;
	object-fit: cover;
	object-position: center top;
	border-radius: 0;
}
.mp-team .mp-team-initialen {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #e9e7e4;
	color: var(--mp-karte);
	font-size: 56px;
	font-weight: 600;
	line-height: 1;
}
.mp-team .mp-team-info {
	flex: 1;
	padding: 22px 18px 24px;
	background: var(--mp-info-bg);
}
.mp-team .mp-team-name {
	margin: 0;
	color: var(--mp-karte);
	font-size: 17px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: .01em;
}
.mp-team .mp-team-name::after {
	content: "";
	display: block;
	width: 26px;
	height: 2px;
	margin: 12px 0 14px;
	background: var(--mp-karte);
}
.mp-team .mp-team-funktion {
	margin: 0 0 20px;
	color: var(--mp-text);
	font-size: 14px;
	line-height: 1.65;
}
.mp-team .mp-team-kontakt {
	margin: 0;
	padding: 0;
	list-style: none;
}
.mp-team .mp-team-kontakt li {
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}
.mp-team .mp-team-kontakt li:last-child { margin-bottom: 0; }
.mp-team .mp-team-kontakt li::before { content: none; }
.mp-team .mp-team-kontakt a {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	color: var(--mp-text);
	font-size: 14px;
	line-height: 1.4;
	text-decoration: none;
	white-space: normal;
}
.mp-team .mp-team-kontakt a > span:last-child {
	min-width: 0;
	white-space: normal;
	overflow-wrap: anywhere;
	word-break: break-word;
}
.mp-team .mp-team-kontakt a:hover { color: var(--mp-karte); }
.mp-team .mp-team-icon {
	display: inline-flex;
	flex: none;
	width: 17px;
	height: 17px;
	color: var(--mp-karte);
}
.mp-team .mp-team-icon svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

/* ---------- Aufklappen ---------- */
.mp-team--aufklappen .mp-team-region { margin-bottom: 15px; }
.mp-team .mp-team-acc {
	background: #fff;
	border: 1px solid #e5e7eb;
}
.mp-team .mp-team-acc-kopf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
	margin: 0;
	padding: 24px 30px;
	border: 0;
	border-radius: 0;
	background: #fff;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
	box-shadow: none;
}
.mp-team .mp-team-acc-kopf:hover,
.mp-team .mp-team-acc-kopf:focus { background: #fafafa; color: inherit; }
.mp-team .mp-team-acc-kopf:focus-visible { outline: 2px solid var(--mp-farbe); outline-offset: -2px; }

.mp-team .mp-team-acc-titel strong {
	display: block;
	color: var(--mp-farbe);
	font-size: 22px;
	line-height: 1.2;
	text-transform: uppercase;
}
.mp-team .mp-team-acc-titel span {
	display: block;
	margin-top: 4px;
	color: var(--mp-grau);
	font-size: 15px;
}
.mp-team .mp-team-acc-icon {
	position: relative;
	flex: none;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--mp-farbe);
	transition: transform .3s ease;
}
.mp-team .mp-team-acc-icon::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 44%;
	width: 10px;
	height: 10px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: translate(-50%, -50%) rotate(45deg);
}
.mp-team .mp-team-acc.is-open .mp-team-acc-icon { transform: rotate(180deg); }

.mp-team .mp-team-acc-panel {
	overflow: hidden;
	transition: height .3s ease;
}
.mp-team .mp-team-acc-inhalt { padding: 5px 30px 35px; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.mp-team .mp-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.mp-team .mp-team-grid { grid-template-columns: 1fr; row-gap: 20px; }
	.mp-team .mp-team-eintrag,
	.mp-team .mp-team-karte { margin-top: 0; margin-bottom: 0; }
	.mp-team .mp-team-acc-kopf { padding: 18px 20px; }
	.mp-team .mp-team-acc-inhalt { padding: 5px 20px 25px; }
	.mp-team .mp-team-acc-titel strong { font-size: 19px; }
	.mp-team .mp-team-filter button { padding: 10px 16px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
	.mp-team .mp-team-acc-panel,
	.mp-team .mp-team-acc-icon { transition: none; }
}

/* ---------- Ort über der Karte ---------- */
.mp-team .mp-team-eintrag {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.mp-team .mp-team-eintrag .mp-team-karte { flex: 1; }
.mp-team .mp-team-ort {
	min-height: 1.4em;
	margin: 0 0 12px;
	color: var(--mp-farbe);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* ---------- Zuständigkeitsort (über dem Namen) ---------- */
.mp-team .mp-team-zustaendig {
	margin: 0 0 8px;
	color: var(--mp-text);
	font-size: 14px;
	line-height: 1.65;
}