/* Fairplay Team – Desktop: 3 Spalten, Zeile 1 Inhaber + Teamfoto, darunter je Spalte die übrigen Personen ab gleicher Höhe. Tablet/Handy: Foto oben, Mitglieder nach Reihenfolge. */

.fp-team {
	--fp-team-indent: 80px;
	--fp-team-column-gap: 20px;
	--fp-team-member-gap: 34px;
	--fp-team-lead-min-gap: var(--fp-team-member-gap);
	--fp-team-photo-offset: -86px;
	--fp-team-avatar-size: 140px;
	--fp-team-link-arrow-color: var(--e-global-color-primary, #b4133d);
	--fp-team-link-hover-color: var(--e-global-color-primary, #b4133d);
	--fp-team-task-touch-space: 6px;

	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: start;
	gap: 0 var(--fp-team-column-gap);
	padding: 0 var(--fp-team-indent);
	text-align: center;
	font-family: "Noto Sans", sans-serif;
}

/*
 * Spalten sind nur Gruppierung. Zeile 1: Teamfoto bzw. erste Person je Spalte.
 * Zeile 2: .fp-team__stack je Spalte, darin folgen die Personen direkt aufeinander.
 */
.fp-team__col {
	display: contents;
}

.fp-team__col--left > * {
	grid-column: 1;
}

.fp-team__col--center > * {
	grid-column: 2;
}

.fp-team__col--right > * {
	grid-column: 3;
}

.fp-team__stack {
	grid-row: 2;
}

.fp-team__photo {
	grid-row: 1;
	margin: var(--fp-team-photo-offset) 0 26px;
}

.fp-team__photo img {
	display: block;
	width: 100%;
	height: auto;
	box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
}

/* Erste Person einer Spalte steht in Zeile 1 (Personen im Stapel sind keine Rasterelemente). */
.fp-team__member {
	grid-row: 1;
	margin: 0 0 var(--fp-team-member-gap);
}

/* Erste Person links/rechts (Inhaber): Mindestabstand zur nächsten Zeile, falls sie länger ist als das Teamfoto. */
.fp-team__col--left > .fp-team__member:first-child,
.fp-team__col--right > .fp-team__member:first-child {
	margin-bottom: var(--fp-team-lead-min-gap);
}

.fp-team__avatar {
	display: block;
	width: var(--fp-team-avatar-size);
	height: var(--fp-team-avatar-size);
	margin: 0 auto 12px;
	object-fit: cover;
	border-radius: 50%;
}

.fp-team .fp-team__name {
	margin: 0 0 7px;
	padding: 0;
	font-family: "Noto Sans", sans-serif;
	font-size: 24px;
	font-style: italic;
	font-weight: 600;
	line-height: 1.1;
	color: var(--e-global-color-primary, #b4133d);
}

.fp-team .fp-team__role {
	margin: 0 0 19px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--e-global-color-text, #707072);
}

.fp-team .fp-team__tasks {
	margin: 0;
	padding: 0;
	list-style: none;
	font-weight: 700;
	line-height: 1.5;
	color: var(--e-global-color-secondary, #4c4c4c);
}

.fp-team .fp-team__tasks li {
	margin: 0;
	padding: 0;
}

/* Verlinkte Aufgaben: Text wie die übrigen, dahinter ein Pfeil. */
.fp-team .fp-team__task-link {
	color: inherit;
	text-decoration: none;
	border-radius: 2px;
	transition: color 0.15s;
}

.fp-team .fp-team__task-link::after {
	/* Der Pfeil ist Deko: Screenreader lesen ihn nicht vor (ältere Browser ignorieren die zweite Zeile). */
	content: "\203A";
	content: "\203A" / "";
	position: relative;
	left: 0;
	padding-left: 5px;
	color: var(--fp-team-link-arrow-color);
	transition: left 0.15s;
}

.fp-team .fp-team__task-link:hover,
.fp-team .fp-team__task-link:focus-visible {
	color: var(--fp-team-link-hover-color);
}

.fp-team .fp-team__task-link:hover::after,
.fp-team .fp-team__task-link:focus-visible::after {
	left: 3px;
}

.fp-team .fp-team__task-link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Touch (Handy, Tablet): mehr Luft zwischen den Aufgaben und größere Tippflächen für Links. */
@media (pointer: coarse) {
	.fp-team .fp-team__tasks li {
		padding: var(--fp-team-task-touch-space) 0;
	}

	.fp-team .fp-team__task-link {
		display: inline-block;
		margin: calc(-1 * var(--fp-team-task-touch-space)) -12px;
		padding: var(--fp-team-task-touch-space) 12px;
	}
}

.fp-team--animate .fp-team__photo {
	animation: fp-team-zoom-in 1.25s both;
}

@keyframes fp-team-zoom-in {
	from {
		opacity: 0;
		transform: scale(0.3);
	}

	50% {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fp-team--animate .fp-team__photo {
		animation: none;
	}
}

/* Tablet & Handy: Foto oben, darunter 2 Spalten (Tablet) bzw. 1 Spalte (Handy) in globaler Reihenfolge. */
@media (max-width: 1024px) {
	.fp-team {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		padding: 0;
	}

	.fp-team__stack {
		display: contents;
	}

	.fp-team__photo {
		grid-column: 1 / -1;
		grid-row: auto;
		order: -1;
		width: 100%;
		max-width: 638px;
		margin: 0 auto var(--fp-team-member-gap);
	}

	.fp-team__member,
	.fp-team__col--left > .fp-team__member:first-child,
	.fp-team__col--right > .fp-team__member:first-child {
		grid-column: auto;
		grid-row: auto;
		order: var(--fp-order-tablet);
		margin-bottom: var(--fp-team-member-gap);
	}
}

/* Nur Tablet: Maße wie im früheren Elementor-Layout, Inhaber-Namen unten im Teamfoto. */
@media (min-width: 768px) and (max-width: 1024px) {
	.fp-team {
		--fp-team-member-gap: 54px;

		gap: 0 40px;
		padding: 0 10px;
	}

	.fp-team__photo {
		width: 80vw;
		max-width: 100%;
	}

	.fp-team__photo img {
		box-shadow: none;
	}

	.fp-team .fp-team__name {
		margin-bottom: 5px;
		line-height: 1;
	}

	.fp-team .fp-team__role {
		margin-bottom: 5px;
	}

	.fp-team--overlay .fp-team__photo {
		position: relative;
		margin-bottom: 0;
	}

	.fp-team--overlay .fp-team__photo::after {
		content: "";
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		height: 90px;
		background: linear-gradient(rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.35));
		pointer-events: none;
	}

	/* 20 + 24 (Name) + 5 + 50 (Zusatz) + 5 = 104 → Aufgaben beginnen 4px unter dem Foto. */
	.fp-team .fp-team__member--lead {
		position: relative;
		z-index: 1;
		margin-top: -100px;
		padding-top: 20px;
	}

	/* Zusatz bleibt innerhalb des Fotos und bricht ausgewogen um (wie „Sachkundig nach §11 / Abs. 1 …“). */
	.fp-team .fp-team__member--lead .fp-team__role {
		max-width: calc(30vw - 20px);
		min-height: 50px;
		margin-right: auto;
		margin-left: auto;
		font-weight: 700;
		text-wrap: balance;
	}
}

/* Handy: eine Spalte, eigene Reihenfolge. */
@media (max-width: 767px) {
	.fp-team {
		grid-template-columns: minmax(0, 1fr);
	}

	.fp-team__member,
	.fp-team__col--left > .fp-team__member:first-child,
	.fp-team__col--right > .fp-team__member:first-child {
		order: var(--fp-order-phone);
	}
}