/* Team showcase — from Admara sanierung.css */

.team-showcase-section {
	--page-max-width: 1610px;
	--page-gutter: 150px;
	--team-showcase-band-width: 1480px;
	--team-showcase-gap: 16px;
	--team-showcase-per-view: 4;
}

@media (max-width: 1200px) {
	.team-showcase-section {
		--page-gutter: 80px;
	}
}

@media (max-width: 1024px) {
	.team-showcase-section {
		--page-gutter: 60px;
	}
}

@media (max-width: 768px) {
	.team-showcase-section {
		--page-gutter: 30px;
	}
}

@media (max-width: 480px) {
	.team-showcase-section {
		--page-gutter: 20px;
	}
}

.process-map,
.team-showcase__frame {
	position: relative;
	max-width: 1480px;
	margin: 0 auto;
	width: 100%;
	box-sizing: border-box;
	background: #faf8f4;
	border: 1px solid rgba(202, 156, 81, 0.22);
	border-radius: 24px;
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, 0.65),
		0 16px 48px rgba(42, 34, 28, 0.08);
	overflow: hidden;
}

.process-map {
	padding: 60px 28px 40px;
}

.team-showcase__frame {
	padding: clamp(32px, 4vw, 52px) clamp(20px, 3vw, 28px) clamp(28px, 3vw, 40px);
}

.process-map::before,
.team-showcase__frame::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(202, 156, 81, 0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(202, 156, 81, 0.04) 1px, transparent 1px);
	background-size: 32px 32px;
	pointer-events: none;
	opacity: 0.6;
}

.team-showcase__frame .team-showcase__grid {
	position: relative;
	z-index: 1;
}

/* =========================================================
   TEAM SHOWCASE (Meet-Our-Team Layout, Admara-Farben)
========================================================= */
.team-showcase-section.about-section {
	scroll-margin-top: 88px;
}

/* Team: 8 Karten in einer Reihe */
.team-showcase-section.team-showcase-section--row {
	--team-row-gap: clamp(10px, 1.1vw, 16px);
	--team-grid-row-gap: clamp(32px, 4vw, 56px);
	--team-info-panel-h: clamp(70px, 7.6vw, 88px);
	--team-info-panel-drop: clamp(12px, 1.3vw, 18px);
	--team-card-info-overlap: calc(var(--team-info-panel-h) * 0.42 + var(--team-info-panel-drop));
	padding: clamp(40px, 5vw, 64px) 0 clamp(32px, 4vw, 48px);
}

.team-showcase-section--row .team-showcase-container {
	gap: clamp(16px, 2.5vw, 28px);
	align-items: stretch;
}

/* Team-Kartenrahmen */
.team-showcase-section--row .team-showcase__frame {
	width: 100%;
	max-width: 1480px;
	margin-inline: auto;
	box-sizing: border-box;
}

.team-showcase-section--row .team-showcase__header {
	flex-shrink: 0;
	width: 100%;
	max-width: 1480px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.team-showcase-section.team-showcase-section--row .team-showcase__header {
	margin-bottom: clamp(8px, 1.2vh, 16px) !important;
	text-align: center;
	align-items: center;
}

.team-showcase-section.team-showcase-section--row .team-showcase__description {
	text-align: left;
	align-items: flex-start;
	width: 100%;
	max-width: min(100rem, 58%);
	margin: clamp(10px, 1.5vw, 16px) auto 0;
}

.team-showcase-section.team-showcase-section--row .team-showcase__description-part {
	text-align: left;
	align-self: flex-start;
	max-width: 100%;
	font-size: clamp(1rem, 0.38vw + 0.9rem, 1.18rem);
	line-height: 1.6;
}

.team-showcase-section.team-showcase-section--row .team-showcase__title {
	margin: 0 0 clamp(12px, 1.4vw, 18px);
	font-size: clamp(1.5rem, 1.75vw + 0.85rem, 2rem);
	font-weight: 700;
	line-height: 1.2;
	color: var(--primary-color, #ca9c51);
	text-align: center;
	width: 100%;
}

.team-showcase-section.team-showcase-section--row .team-showcase__tagline {
	margin: 0;
	font-size: clamp(1.02rem, 0.35vw + 0.92rem, 1.14rem);
	line-height: 1.55;
	font-weight: 600;
	color: var(--primary-color, #ca9c51);
	text-align: left;
}

.team-showcase-section--row .team-showcase__description {
	margin-top: clamp(10px, 1.5vw, 16px);
}

.team-showcase-section--row .team-showcase__footer {
	flex-shrink: 0;
	margin-top: clamp(32px, 4vw, 44px);
	width: 100%;
	text-align: center;
}

.team-showcase-container {
	width: min(var(--page-max-width), calc(100vw - (var(--page-gutter) * 2)));
	margin: 0 auto;
	padding: 0;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(16px, 2.5vw, 24px);
}

.team-showcase__header {
	width: 100%;
	max-width: min(64rem, 100%);
	margin-inline: auto;
}

.team-showcase-section .team-showcase__header {
	margin-bottom: clamp(20px, 3vw, var(--section-header-margin));
	text-align: center;
}

.team-showcase-section.team-showcase-section--row .team-showcase__header {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.team-showcase-section .team-showcase__header .section-description {
	margin: 12px auto 0;
	max-width: min(42rem, 100%);
	font-size: clamp(0.92rem, 0.28vw + 0.82rem, 1.02rem);
	line-height: 1.55;
	color: #ba8e5a;
	font-weight: 400;
}

.team-showcase__description {
	margin: clamp(10px, 1.5vw, 16px) auto 0;
	width: 100%;
	max-width: min(42rem, 100%);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(10px, 1.2vw, 16px);
	text-align: left;
}

.team-showcase__description-part {
	margin: 0;
	width: 100%;
	max-width: 100%;
	align-self: flex-start;
	font-size: clamp(0.82rem, 0.24vw + 0.76rem, 0.94rem);
	line-height: 1.5;
	color: #5e554a;
	text-wrap: pretty;
	hyphens: auto;
}

.team-showcase__title {
	margin: 0 0 clamp(10px, 1.2vw, 14px);
	font-size: clamp(1.35rem, 1.6vw + 0.75rem, 1.85rem);
	font-weight: 700;
	line-height: 1.2;
	color: var(--primary-color, #ca9c51);
	text-align: center;
	width: 100%;
}

.team-showcase__tagline {
	margin: 0;
	font-weight: 600;
	color: var(--primary-color, #ca9c51);
	text-align: left;
}

.team-showcase__description-part strong {
	font-weight: 600;
	color: #4a433b;
}

/* Team: 4 Karten pro Zeile (2 Reihen) */
.team-showcase-section--row .team-showcase__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	align-items: flex-end;
	row-gap: var(--team-grid-row-gap);
	column-gap: var(--team-row-gap);
	width: 100%;
	max-width: 100%;
}

.team-showcase-section--row .team-showcase-card {
	width: 100%;
	max-width: min(100%, 88%);
	min-width: 0;
	position: relative;
	margin-inline: auto;
	padding-bottom: var(--team-card-info-overlap);
}

.team-showcase-section--row .team-showcase-card__media {
	position: relative;
	flex: none;
	width: 100%;
	overflow: visible;
}

.team-showcase-section--row .team-showcase-card__photo {
	position: relative;
	left: auto;
	bottom: auto;
	transform: none;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	max-width: none;
	max-height: none;
	border-radius: clamp(10px, 1vw, 14px);
	box-shadow: 0 6px 16px rgba(31, 31, 31, 0.1);
	overflow: hidden;
	background: #e8e2d8;
}

.team-showcase-card__photo--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(145deg, #ebe6dc 0%, #e0d9ce 100%);
	border: 1px dashed rgba(202, 156, 81, 0.35);
	box-shadow: none;
}

.team-showcase-card--placeholder .team-showcase-card__placeholder-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42%;
	height: 42%;
	color: rgba(202, 156, 81, 0.45);
}

.team-showcase-card--placeholder .team-showcase-card__placeholder-icon svg {
	width: 100%;
	height: 100%;
}

.team-showcase-card--placeholder .team-showcase-card__name,
.team-showcase-card--placeholder .team-showcase-card__role {
	color: #8a8278;
}

.team-showcase-section--row .team-showcase-card__info {
	bottom: calc(-1 * var(--team-info-panel-drop));
	width: min(96%, 100%);
	transform: translateX(-50%);
}

.team-showcase-section--row .team-showcase-card__info-panel {
	box-sizing: border-box;
	min-height: var(--team-info-panel-h);
	height: var(--team-info-panel-h);
	padding: clamp(6px, 0.65vw, 10px) clamp(6px, 0.6vw, 10px);
	border-radius: clamp(9px, 0.85vw, 12px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 3px;
}

.team-showcase-section--row .team-showcase-card__line {
	flex-shrink: 0;
	width: clamp(20px, 1.85vw, 26px);
	margin: 0 auto;
}

.team-showcase-section--row .team-showcase__footer {
	gap: 10px;
	max-width: 100%;
}

.team-showcase {
	position: relative;
	width: 100%;
	max-width: var(--team-showcase-band-width);
	margin-inline: auto;
}

.team-showcase__viewport {
	overflow: hidden;
	min-height: 0;
}

.team-showcase__track {
	display: flex;
	align-items: flex-start;
	gap: var(--team-showcase-gap);
	transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}

.team-showcase-card {
	--team-card-info-overlap: 40px;
	flex: 0 0
		calc(
			(
					100% -
						(
							var(--team-showcase-gap) *
								(var(--team-showcase-per-view) - 1)
						)
				) / var(--team-showcase-per-view)
		);
	min-width: 0;
	position: relative;
	box-sizing: border-box;
	padding-bottom: var(--team-card-info-overlap);
}

.team-showcase-card__media {
	position: relative;
	width: 100%;
	overflow: visible;
	flex: none;
	background: transparent;
}

.team-showcase-card__photo {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 16px;
	overflow: hidden;
	background: #e8e2d8;
	box-shadow: 0 6px 18px rgba(31, 31, 31, 0.1);
}

.team-showcase-card__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
}

.team-showcase-card__info {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: min(90%, 220px);
	z-index: 2;
	overflow: visible;
}

.team-showcase-card__info-panel {
	padding: 12px 14px 10px;
	border-radius: 12px;
	background: #ffffff;
	border: 1px solid rgba(202, 156, 81, 0.2);
	box-shadow: 0 4px 14px rgba(31, 31, 31, 0.08);
	text-align: center;
}

.team-showcase-card__name {
	margin: 0 0 6px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #1f1f1f;
}

.team-showcase-card__line {
	display: block;
	width: 24px;
	height: 2px;
	margin: 0 auto 6px;
	border-radius: 1px;
	background: var(--primary-color, #ca9c51);
}

.team-showcase-card__role {
	margin: 0;
	font-size: 12px;
	font-style: italic;
	line-height: 1.45;
	color: #6b6358;
}

/* Team-Grid: Text in Plaketten (nach Basis-Styles, damit es greift) */
.team-showcase-section.team-showcase-section--row .team-showcase-card__name {
	margin: 0;
	font-size: clamp(11px, 1.15vw, 15px);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.07em;
	text-align: center;
}

.team-showcase-section.team-showcase-section--row .team-showcase-card__role {
	margin: 0;
	font-size: clamp(12px, 1.2vw, 14px);
	font-style: italic;
	line-height: 1.35;
	text-align: center;
	color: #6b6358;
}

.team-showcase__dots {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	width: 100%;
}

.team-showcase__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(202, 156, 81, 0.28);
	cursor: pointer;
	transition: transform 0.2s ease, background 0.2s ease;
}

.team-showcase__dot:hover {
	background: rgba(202, 156, 81, 0.5);
}

.team-showcase__dot.is-active {
	background: var(--primary-color, #ca9c51);
	transform: scale(1.15);
}

.team-showcase__footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	flex-shrink: 0;
	width: 100%;
	max-width: var(--team-showcase-band-width);
	margin-top: 20px;
	margin-inline: auto;
}

.team-showcase__controls {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	gap: 12px;
}

.team-showcase__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
}

.team-showcase__nav-btn {
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid rgba(202, 156, 81, 0.45);
	background: #fff;
	color: #1f1f1f;
	box-shadow: 0 8px 22px rgba(31, 31, 31, 0.12);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease,
		transform 0.2s ease, box-shadow 0.2s ease;
}

.team-showcase__nav-btn:hover {
	background: linear-gradient(135deg, #d9b06a 0%, #ca9c51 100%);
	border-color: #ca9c51;
	color: #fff;
	box-shadow: 0 10px 26px rgba(202, 156, 81, 0.35);
}

.team-showcase__nav-btn:focus-visible {
	outline: 2px solid #ca9c51;
	outline-offset: 3px;
}

.team-showcase__actions {
	display: flex;
	justify-content: center;
	width: 100%;
	margin-top: 0;
}

.team-showcase__actions .hero-btn,
.team-showcase__actions .hero-btn.primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 0;
	padding: 20px 40px;
	font-size: 16px;
	font-weight: 600;
	min-height: 64px;
	border-radius: 999px;
	line-height: 1;
	letter-spacing: 0.01em;
	text-transform: none;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	border: 1px solid rgba(17, 17, 17, 0.5);
	transition:
		transform 0.25s ease,
		box-shadow 0.25s ease,
		background 0.25s ease,
		border-color 0.25s ease;
}

.team-showcase__actions .hero-btn.primary {
	background: #111111;
	color: #ffffff;
	box-shadow:
		0 18px 40px rgba(0, 0, 0, 0.18),
		inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.team-showcase__actions .hero-btn.primary:hover {
	transform: translateY(-2px);
	background: #000000;
	border-color: rgba(17, 17, 17, 0.7);
	box-shadow:
		0 20px 42px rgba(0, 0, 0, 0.22),
		inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.team-showcase-section .team-showcase__actions .hero-btn.primary svg {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
}

@media (min-width: 769px) and (max-height: 860px) {
	.team-showcase-section--row {
		--team-card-info-overlap: 22px;
		padding-block: clamp(32px, 4vw, 48px);
	}

}

@media (max-width: 900px) {
	.team-showcase-section.team-showcase-section--row .team-showcase__description {
		max-width: 100%;
	}

	.team-showcase-section.team-showcase-section--row .team-showcase__description-part {
		font-size: clamp(0.95rem, 3.2vw, 1.08rem);
		line-height: 1.55;
	}

	.team-showcase-section.team-showcase-section--row .team-showcase__tagline {
		font-size: clamp(0.98rem, 3vw, 1.06rem);
	}
}

@media (max-width: 900px) {
	.team-showcase-section--row {
		--team-grid-row-gap: clamp(24px, 5vw, 40px);
	}

	.team-showcase-section--row .team-showcase__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.team-showcase-section.about-section {
		padding-top: clamp(36px, 8vw, 48px);
	}

	.team-showcase-section--row {
		--team-row-gap: 8px;
		--team-grid-row-gap: 20px;
	}

	.team-showcase-container {
		gap: clamp(16px, 4vw, 22px);
	}

	.team-showcase-section--row .team-showcase__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ABC team: 2 rows × 3 columns (5 members, bottom row centered) */
.team-showcase-section--grid-2x3 .team-showcase__grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	align-items: flex-end;
	row-gap: var(--team-grid-row-gap);
	column-gap: var(--team-row-gap);
	width: 100%;
	max-width: min(960px, 100%);
	margin-inline: auto;
}

.team-showcase-section--grid-2x3 .team-showcase-card {
	grid-column: span 2;
	max-width: min(100%, 240px);
}

.team-showcase-section--grid-2x3 .team-showcase-card:nth-child(4) {
	grid-column: 2 / 4;
}

.team-showcase-section--grid-2x3 .team-showcase-card:nth-child(5) {
	grid-column: 4 / 6;
}

@media (max-width: 900px) {
	.team-showcase-section--grid-2x3 .team-showcase__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		max-width: 100%;
	}

	.team-showcase-section--grid-2x3 .team-showcase-card,
	.team-showcase-section--grid-2x3 .team-showcase-card:nth-child(4),
	.team-showcase-section--grid-2x3 .team-showcase-card:nth-child(5) {
		grid-column: auto;
		max-width: min(100%, 88%);
	}

	.team-showcase-section--grid-2x3 .team-showcase-card:nth-child(5):last-child:nth-child(odd) {
		grid-column: 1 / -1;
		justify-self: center;
		max-width: min(50%, 240px);
	}
}

@media (max-width: 640px) {
	.team-showcase-section--grid-2x3 .team-showcase__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}