/* Startseite: FCBinside Videothek (inc/fi-videos.php › fi_home_videothek) – Block in Markenfarben, Reiter, Wisch-Leiste */
.fi-vt { position: relative; margin: 24px 0 8px; padding: 22px 0 24px; background: linear-gradient(120deg, #e6197a 0%, #b5125e 55%, #7c0d40 100%); color: #fff; }
.fi-vt-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 0 15px; }
.fi-vt-head h2 { margin: 0; color: #fff; font-size: 22px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.fi-vt-all { flex: none; color: #fff; font-size: 13.5px; font-weight: 700; text-decoration: none; opacity: .9; }
.fi-vt-all:hover { opacity: 1; text-decoration: underline; }
.fi-vt-tabs { display: flex; gap: 22px; margin: 14px 0 16px; padding: 0 15px; overflow-x: auto; border-bottom: 1px solid rgba(255, 255, 255, .25); scrollbar-width: none; }
.fi-vt-tabs::-webkit-scrollbar { display: none; }
.fi-vt-tabs button { position: relative; flex: none; padding: 0 0 11px; border: 0; background: none; color: rgba(255, 255, 255, .78); font: inherit; font-size: 15px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.fi-vt-tabs button:hover, .fi-vt-tabs button.is-on { color: #fff; }
.fi-vt-tabs button.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: #fff; }

.fi-vt-stage { position: relative; }
.fi-vt-track { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; column-gap: 14px; margin: 0; padding: 0 15px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 15px; scrollbar-width: none; list-style: none; }
.fi-vt-track::-webkit-scrollbar { display: none; }
.fi-vt-track[hidden] { display: none; }
.fi-vt-track.is-shorts { grid-auto-columns: 40%; }
.fi-vt-track li { scroll-snap-align: start; min-width: 0; }
.fi-vt-card { display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 0; border: 0; background: none; color: #fff; font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.fi-vt-img { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: rgba(0, 0, 0, .25); }
.is-shorts .fi-vt-img { aspect-ratio: 9 / 16; }
.fi-vt-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.fi-vt-card:hover .fi-vt-img img { transform: scale(1.04); }
.fi-vt-card:hover .fi-vt-play { transform: translate(-50%, -50%) scale(1.08); }
.fi-vt-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 46px; height: 46px; transition: transform .2s; border: 3px solid #fff; border-radius: 50%; background: rgba(0, 0, 0, .25); }
.fi-vt-play::after { content: ""; position: absolute; left: 50%; top: 50%; border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent #fff; transform: translate(-38%, -50%); }
.fi-vt-img small { position: absolute; right: 8px; bottom: 8px; padding: 2px 6px; background: rgba(0, 0, 0, .75); color: #fff; font-size: 12px; font-weight: 700; }
.fi-vt-card b { display: -webkit-box; overflow: hidden; font-size: 16px; font-weight: 700; line-height: 1.3; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

.fi-vt-arrow { display: none; }

/* Video-Overlay */
.fi-vt-modal { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 16px; background: rgba(8, 8, 12, .86); }
.fi-vt-modal[hidden] { display: none; }
.fi-vt-modal-box { position: relative; width: min(1100px, 100%); }
.fi-vt-frame { position: relative; aspect-ratio: 16 / 9; background: #000; }
.fi-vt-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.fi-vt-modal-box p { margin: 12px 0 0; color: #fff; font-size: 16px; font-weight: 700; line-height: 1.35; }
.fi-vt-x { position: absolute; right: 0; bottom: 100%; width: 44px; height: 44px; border: 0; background: none; color: #fff; font-size: 34px; line-height: 1; cursor: pointer; }

@media (min-width: 600px) { .fi-vt-track { grid-auto-columns: 46%; } .fi-vt-track.is-shorts { grid-auto-columns: 24%; } }

/* Computer: Block in der Inhaltsbreite, 3,3 Karten sichtbar, runder Pfeil rechts */
@media (min-width: 1024px) {
	body.home .fi-panel > .fi-vt { grid-column: 1 / -1; margin: 24px 0 8px; }
	.fi-vt { padding: 36px 0 40px; }
	.fi-vt-head, .fi-vt-tabs { padding: 0 40px; }
	.fi-vt-head h2 { font-size: 34px; letter-spacing: 0; }
	.fi-vt-tabs { gap: 40px; margin: 20px 0 28px; }
	.fi-vt-tabs button { font-size: 17px; padding-bottom: 14px; }
	.fi-vt-track { grid-auto-columns: calc((100% - 80px - 3 * 28px) / 3.3); column-gap: 28px; padding: 0 40px; scroll-padding: 0 40px; }
	.fi-vt-track.is-shorts { grid-auto-columns: calc((100% - 80px - 5 * 28px) / 6); }
	.fi-vt-card b { font-size: 18px; }
	.fi-vt-play { width: 64px; height: 64px; }
	.fi-vt-play::after { border-width: 12px 0 12px 20px; }
	.fi-vt-arrow { position: absolute; top: calc(50% - 40px); z-index: 2; display: grid; place-items: center; width: 54px; height: 54px; border: 0; border-radius: 50%; background: #fff; color: #9a1350; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); cursor: pointer; }
	.fi-vt-arrow[hidden] { display: none; }
	.fi-vt-arrow.is-next { right: 16px; }
	.fi-vt-arrow.is-prev { left: 16px; }
	.fi-vt-arrow:hover { color: #e6197a; }
}