/* ==========================================================================
   Tennis University Team – Frontend (reine Anzeige)
   Pro Team inline gesetzte Variablen:
   --ttu-accent, --ttu-cols(-t/-m), --ttu-aspect, --ttu-font,
   --ttu-name-size, --ttu-role-size, --ttu-email-size
   Kartengröße setzt --ttu-scale/--ttu-pad, Stagger über --ttu-i.
   ========================================================================== */

.ttu-team {
	--ttu-accent: #0b5d3b;
	--ttu-cols: 4;
	--ttu-cols-t: 3;
	--ttu-cols-m: 1;
	--ttu-aspect: 3 / 4;
	--ttu-font: inherit;
	--ttu-name-size: 17px;
	--ttu-role-size: 14px;
	--ttu-email-size: 13px;
	--ttu-scale: 1;
	--ttu-pad: 14px;
	--ttu-radius: 10px;
	display: grid;
	gap: 24px;
	grid-template-columns: repeat( var( --ttu-cols ), minmax( 0, 1fr ) );
	margin: 0 0 1.5em;
}

/* Kartengröße (3 Stufen) */
.ttu-card-small  { --ttu-scale: .9;  --ttu-pad: 10px; gap: 18px; }
.ttu-card-medium { --ttu-scale: 1;   --ttu-pad: 14px; }
.ttu-card-large  { --ttu-scale: 1.15; --ttu-pad: 18px; gap: 28px; }

@media ( max-width: 1024px ) {
	.ttu-team { grid-template-columns: repeat( var( --ttu-cols-t ), minmax( 0, 1fr ) ); }
}
@media ( max-width: 600px ) {
	.ttu-team { grid-template-columns: repeat( var( --ttu-cols-m ), minmax( 0, 1fr ) ); gap: 16px; }
}

.ttu-member { margin: 0; }

/* Bildbereich – einheitlicher Zuschnitt aller Bilder */
.ttu-media {
	position: relative;
	overflow: hidden;
	border-radius: var( --ttu-radius );
	background: #eef1f0;
	box-shadow: 0 2px 10px rgba( 0, 0, 0, .08 );
	aspect-ratio: var( --ttu-aspect );
}
.ttu-media .ttu-photo {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.ttu-photo--placeholder { background: linear-gradient( 135deg, #dfe6e2, #eef1f0 ); }

/* Hover-/Vorschaubild */
.ttu-photo--hover { opacity: 0; transition: opacity .35s ease; z-index: 1; }
.ttu-member:hover .ttu-photo--hover,
.ttu-member:focus-within .ttu-photo--hover { opacity: 1; }

/* Banderole – Basis + Typografie */
.ttu-banderole { color: #fff; line-height: 1.25; font-family: var( --ttu-font, inherit ); }
.ttu-banderole .ttu-name { display: block; font-weight: 700; font-size: calc( var( --ttu-name-size, 17px ) * var( --ttu-scale, 1 ) ); }
.ttu-banderole .ttu-role { display: block; opacity: .92; font-size: calc( var( --ttu-role-size, 14px ) * var( --ttu-scale, 1 ) ); }
.ttu-banderole .ttu-contact { display: block; margin-top: 6px; font-size: calc( var( --ttu-email-size, 13px ) * var( --ttu-scale, 1 ) ); }
.ttu-banderole .ttu-contact a { color: inherit; text-decoration: underline; }

/* Overlay-Basis */
.ttu-design-bar .ttu-banderole,
.ttu-design-diagonal .ttu-banderole,
.ttu-design-hover .ttu-banderole,
.ttu-design-banner .ttu-banderole,
.ttu-design-modern .ttu-banderole,
.ttu-design-hoverbanner .ttu-banderole { position: absolute; z-index: 2; }

/* --- Balken unten --- */
.ttu-design-bar .ttu-banderole {
	left: 0; right: 0; bottom: 0; padding: var( --ttu-pad ) 16px;
	background: linear-gradient(
		to top,
		color-mix( in srgb, var( --ttu-accent ) 92%, transparent ) 0%,
		color-mix( in srgb, var( --ttu-accent ) 78%, transparent ) 55%,
		transparent 100%
	);
}

/* --- Diagonales Band --- */
.ttu-design-diagonal .ttu-banderole {
	top: 26px; right: -64px; width: 220px; transform: rotate( 45deg );
	background: var( --ttu-accent ); text-align: center; padding: 8px 0;
	box-shadow: 0 2px 6px rgba( 0, 0, 0, .25 );
}
.ttu-design-diagonal .ttu-role { text-transform: uppercase; letter-spacing: .04em; }
.ttu-design-diagonal .ttu-contact { display: none; }

/* --- Einblenden bei Hover --- */
.ttu-design-hover .ttu-banderole {
	inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
	text-align: center; padding: 16px;
	background: color-mix( in srgb, var( --ttu-accent ) 82%, transparent );
	opacity: 0; transition: opacity .3s ease;
}
.ttu-design-hover .ttu-member:hover .ttu-banderole,
.ttu-design-hover .ttu-member:focus-within .ttu-banderole { opacity: 1; }

/* --- Karte (Farbstreifen unten) --- */
.ttu-design-below .ttu-media { border-radius: var( --ttu-radius ) var( --ttu-radius ) 0 0; }
.ttu-design-below .ttu-banderole {
	background: var( --ttu-accent ); padding: var( --ttu-pad ) 16px;
	border-radius: 0 0 var( --ttu-radius ) var( --ttu-radius );
}

/* --- Minimal --- */
.ttu-design-minimal .ttu-banderole { color: inherit; padding: 12px 4px 0; text-align: center; }
.ttu-design-minimal .ttu-role { opacity: .7; }

/* --- Banner (kräftiges Namensschild) --- */
.ttu-design-banner .ttu-banderole {
	left: 0; right: 0; bottom: 16px; padding: var( --ttu-pad ) 16px; text-align: center;
	background: var( --ttu-accent ); box-shadow: 0 6px 18px rgba( 0, 0, 0, .28 );
}

/* --- Modern (Vollbild-Verlauf, versaler Name, Akzentlinie) --- */
.ttu-design-modern .ttu-banderole {
	left: 0; right: 0; bottom: 0; padding: calc( var( --ttu-pad ) + 6px ) 16px var( --ttu-pad );
	background: linear-gradient( to top, rgba( 0, 0, 0, .85 ) 0%, rgba( 0, 0, 0, .35 ) 60%, transparent 100% );
}
.ttu-design-modern .ttu-name { text-transform: uppercase; letter-spacing: .08em; }
.ttu-design-modern .ttu-name::before {
	content: ""; display: block; width: 34px; height: 3px; margin-bottom: 8px; background: var( --ttu-accent );
}

/* --- Corporate (Bild oben, sauberer Textblock mit Akzentkante) --- */
.ttu-design-corporate .ttu-media { border-radius: var( --ttu-radius ) var( --ttu-radius ) 0 0; }
.ttu-design-corporate .ttu-banderole {
	color: inherit; background: #fff; border-left: 4px solid var( --ttu-accent );
	padding: var( --ttu-pad ) 16px; border-radius: 0 0 var( --ttu-radius ) var( --ttu-radius );
	box-shadow: 0 2px 10px rgba( 0, 0, 0, .06 );
}
.ttu-design-corporate .ttu-name { color: #1d2327; }
.ttu-design-corporate .ttu-role { color: var( --ttu-accent ); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; opacity: 1; }

/* --- Hover-Banner (fährt von unten ein) --- */
.ttu-design-hoverbanner .ttu-banderole {
	left: 0; right: 0; bottom: 0; padding: var( --ttu-pad ) 16px; background: var( --ttu-accent );
	transform: translateY( 100% ); transition: transform .35s ease;
}
.ttu-design-hoverbanner .ttu-member:hover .ttu-banderole,
.ttu-design-hoverbanner .ttu-member:focus-within .ttu-banderole { transform: translateY( 0 ); }

/* --- Banner (einstellbar): Transparenz, Länge, Position, Ausrichtung --- */
.ttu-design-bannerpro .ttu-banderole {
	position: absolute;
	z-index: 2;
	width: calc( var( --ttu-b-w, 100 ) * 1% );
	top: calc( var( --ttu-b-va, 88 ) * 1% );
	left: 50%;
	transform: translate( -50%, -50% );
	padding: var( --ttu-pad ) 16px;
	text-align: center;
	border-radius: var( --ttu-b-r, 6px );
	background: color-mix( in srgb, var( --ttu-accent ) calc( var( --ttu-b-op, 85 ) * 1% ), transparent );
	box-shadow: 0 4px 14px rgba( 0, 0, 0, .22 );
	box-sizing: border-box;
}
.ttu-design-bannerpro.ttu-balign-left .ttu-banderole  { left: 0; transform: translate( 0, -50% ); text-align: left; }
.ttu-design-bannerpro.ttu-balign-right .ttu-banderole { left: auto; right: 0; transform: translate( 0, -50% ); text-align: right; }

/* Individuelle Textfarben für Name/Funktion (nur dieses Design) */
.ttu-design-bannerpro .ttu-name { color: var( --ttu-name-color, #fff ); }
.ttu-design-bannerpro .ttu-role { color: var( --ttu-role-color, #fff ); opacity: 1; }

/* Getrennte Banner: Name und Funktion je eigener Streifen + eigene Farbe */
.ttu-design-bannerpro.ttu-bsplit .ttu-banderole { background: none; box-shadow: none; padding: 0; }
.ttu-design-bannerpro.ttu-bsplit .ttu-name,
.ttu-design-bannerpro.ttu-bsplit .ttu-role {
	width: fit-content;
	max-width: 100%;
	padding: 6px 14px;
	border-radius: var( --ttu-b-r, 6px );
	box-shadow: 0 3px 10px rgba( 0, 0, 0, .2 );
}
.ttu-design-bannerpro.ttu-bsplit .ttu-name {
	margin-bottom: 6px;
	background: color-mix( in srgb, var( --ttu-name-bg, var( --ttu-accent ) ) calc( var( --ttu-b-op, 85 ) * 1% ), transparent );
}
.ttu-design-bannerpro.ttu-bsplit .ttu-role {
	background: color-mix( in srgb, var( --ttu-role-bg, var( --ttu-accent ) ) calc( var( --ttu-b-op, 85 ) * 1% ), transparent );
}
/* Ausrichtung der getrennten Streifen */
.ttu-design-bannerpro.ttu-bsplit.ttu-balign-center .ttu-name,
.ttu-design-bannerpro.ttu-bsplit.ttu-balign-center .ttu-role { margin-left: auto; margin-right: auto; }
.ttu-design-bannerpro.ttu-bsplit.ttu-balign-left .ttu-name,
.ttu-design-bannerpro.ttu-bsplit.ttu-balign-left .ttu-role { margin-right: auto; }
.ttu-design-bannerpro.ttu-bsplit.ttu-balign-right .ttu-name,
.ttu-design-bannerpro.ttu-bsplit.ttu-balign-right .ttu-role { margin-left: auto; }

/* ---------------------------------------------------------------------------
   Animationen (beim Scrollen sichtbar werden) – JS setzt .ttu-in
   --------------------------------------------------------------------------- */
.ttu-anim .ttu-member {
	opacity: 0;
	transition: opacity .55s ease, transform .55s ease;
	transition-delay: min( calc( var( --ttu-i, 0 ) * 70ms ), 700ms );
	will-change: opacity, transform;
}
.ttu-anim-zoom .ttu-member  { transform: scale( .92 ); }
.ttu-anim-slide .ttu-member { transform: translateY( 28px ); }
.ttu-anim .ttu-member.ttu-in { opacity: 1; transform: none; }

/* Barrierefreiheit: Bewegung reduzieren */
@media ( prefers-reduced-motion: reduce ) {
	.ttu-photo--hover,
	.ttu-design-hover .ttu-banderole,
	.ttu-design-hoverbanner .ttu-banderole { transition: none; }
	.ttu-anim .ttu-member { opacity: 1 !important; transform: none !important; transition: none; }
}

.ttu-empty { font-style: italic; opacity: .8; }