/* Content Block: Mitarbeiter-Gruppe
   Farben bewusst als Custom Properties, damit sie im Sitepackage
   projektweit überschrieben werden können. */

.team {
	--team-color: #3d6b9e;
	--team-color-dark: #1f4e79;
	--team-text: #4a6785;
	--team-border: #dfe3e8;
	--team-placeholder: #eef1f4;
	--team-radius: var(--border-radius, 0);

	border-bottom: 1px solid var(--team-border);
}

/* ---------- Accordion ---------- */

.team__summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 1.25rem 0;
	font-size: 1.5rem;
	color: var(--team-color);
	cursor: pointer;
	list-style: none; /* Firefox */
}

/* Nativen Marker in allen Engines entfernen */
.team__summary::marker { content: ""; }
.team__summary::-webkit-details-marker { display: none; }

.team__summary::after {
	content: "+";
	flex: 0 0 auto;
	font-size: 2rem;
	line-height: 1;
	font-weight: 300;
}

.team[open] .team__summary::after { content: "–"; }

.team__summary:focus-visible {
	outline: 2px solid var(--team-color);
	outline-offset: 2px;
}

/* ---------- Kachel-Grid ---------- */

.team__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 2rem;
	padding-bottom: 2.5rem;
}


.team__card {
	display: flex;
	flex-direction: column;
}

/* Foto: nicht beschneiden, sondern einpassen –
   alle Personen stehen dadurch auf einer gemeinsamen Grundlinie. */
.team__img {
	   width: 100%;
	   height: auto;
	   aspect-ratio: 3 / 4;
	   object-fit: cover;
	   object-position: top center;
	   filter: grayscale(1);
	   border-radius: var(--team-radius);
	   order: 2;
   }

.team__name {
	order: 1;
	margin: 0 0 .25rem;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--team-color-dark);
	hyphens: none;
	overflow-wrap: break-word;
}

.team__position {
	order: 3;
	margin: 1rem 0 .25rem;
	font-weight: 700;
	color: var(--team-color-dark);
}

.team__area,
.team__contact {
	order: 4;
	margin: 0 0 .25rem;
	color: var(--team-text);
	line-height: 1.5;
}

.team__contact a {
	color: inherit;
	text-decoration: none;
}

.team__contact a:hover,
.team__contact a:focus-visible {
	text-decoration: underline;
}

@media (max-width: 480px) {
	.team__grid { grid-template-columns: 1fr; }
	.team__img  { max-width: 180px; }
}