/*
 * SP Startseite – Block „Kartenband (Team)“ (sp-startseite/team-band), gedacht für den Footer.
 * Lädt auf jeder Seite: schlank halten. Referenz: docs/prototyp-team.html (Footer).
 * Das Band ist ein echter Scroll-Container (Scrollbar versteckt), JS lässt es laufen.
 */

.spst-band__kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 12px;
	margin: 0 0 4px;
}
.spst-band__titel { font-size: 1.35rem; line-height: 1.05; }
.spst-band__aktionen {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
}
.spst .spst-band__rund {
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: 50%;
}
.spst .spst-band__rund[hidden] { display: none; }
.spst-band__icon {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	fill: currentColor;
}
.spst-band__pause.ist-angehalten .spst-band__icon--pause,
.spst-band__pause:not(.ist-angehalten) .spst-band__icon--play { display: none; }

.spst-band__bahn {
	position: relative;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 14px 0 12px;
	scrollbar-width: none;
	cursor: grab;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}
.spst-band__bahn::-webkit-scrollbar { display: none; }
.spst-band__bahn:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.spst-band__bahn.ist-ziehen { cursor: grabbing; }
.spst-band__bahn.ist-ziehen * { pointer-events: none; }

.spst-band__spur {
	display: flex;
	gap: 16px;
	width: max-content;
	margin: 0;
	padding: 0 16px;
	list-style: none;
}
.spst-band__karte {
	position: relative;
	flex: 0 0 auto;
	width: 150px;
	margin: 0;
	container: spst-mini / inline-size;
}
/* Kein Schein im Ruhezustand (würde im Band abgeschnitten) */
.spst-band__bild {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: #101129;
	border: 4px solid var(--spst-rahmen);
	border-radius: 14px;
	transition: box-shadow .3s ease;
}
.spst-band__bild img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 50% 20%;
	transition: transform .8s ease;
	-webkit-user-drag: none;
	user-select: none;
}
.spst-band__bild::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(0deg, rgba(10, 14, 34, .4), transparent 35%);
}

/* Namens-Kiste wie im Raster, kleiner */
.spst-band .spst-name {
	position: absolute;
	z-index: 2;
	right: 0;
	bottom: 12px;
	max-width: calc(100% - 14px);
	margin: 0;
	padding: 4px 9px 5px 11px;
	font-family: var(--spst-schrift);
	font-size: clamp(13px, 10.5cqi, 17px);
	font-style: normal;
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: #fff;
	background: var(--spst-kiste);
	border-radius: 11px 0 0 11px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
	pointer-events: none;
}
.spst-band__link {
	position: absolute;
	inset: 0;
	z-index: 3;
	border-radius: 14px;
}
/* Fokus nach innen, sonst schneidet ihn der Scroll-Container ab */
.spst .spst-band__link:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }

@media (hover: hover) {
	.spst-band__karte:hover .spst-band__bild,
	.spst-band__karte:focus-within .spst-band__bild {
		box-shadow: 0 0 10px rgba(255, 255, 255, .12), 0 0 8px rgba(42, 125, 225, .75);
	}
	.spst-band__karte:hover .spst-band__bild img,
	.spst-band__karte:focus-within .spst-band__bild img { transform: scale(1.04); }
}

.spst-band__unten { display: none; }

/* Handy: nur Überschrift im Kopf, ca. 2,4 Karten sichtbar, „Ganzes Team“ mittig darunter */
@container spst-block (max-width: 699px) {
	.spst-band__aktionen { display: none; }
	.spst-band__bahn {
		padding: 10px 0 8px;
		/* Weiche Ränder wie am Desktop, schmaler (1.2.2, Tim) */
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
		mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
	}
	.spst-band__spur { gap: 12px; padding: 0 4px; }
	.spst-band__karte { width: calc((100cqi - 32px) / 2.4); }
	.spst-band__unten {
		display: flex;
		justify-content: center;
		margin-top: 8px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.spst-band__karte:hover .spst-band__bild img,
	.spst-band__karte:focus-within .spst-band__bild img { transform: none; }
}

.spst-team-hinweis {
	padding: 12px 16px;
	border: 1px dashed currentColor;
	border-radius: 8px;
	font-style: italic;
}