.ytc{
	--ytc-green: #356354;
	--ytc-gold:  #ca9e3a;
	--ytc-gap:   20px;
	--ytc-cols:  3;
	position: relative;
}

.ytc-track{
	display: flex;
	gap: var(--ytc-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.ytc-track::-webkit-scrollbar{ display: none; }

.ytc-item{
	flex: 0 0 calc((100% - (var(--ytc-cols) - 1) * var(--ytc-gap)) / var(--ytc-cols));
	scroll-snap-align: start;
	margin: 0;
}

.ytc-thumb{
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	padding: 0;
	border: 0;
	background: #000;
	overflow: hidden;
	cursor: pointer;
}
.ytc-thumb img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: opacity .2s ease;
}
.ytc-thumb:hover img,
.ytc-thumb:focus-visible img{ opacity: .75; }
.ytc-thumb:focus-visible{ outline: 3px solid var(--ytc-gold); outline-offset: 3px; }

.ytc-play{
	position: absolute;
	inset: 0;
	margin: auto;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--ytc-green);
	transition: background .2s ease;
}
.ytc-play::after{
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-left: 17px solid #fff;
	border-top: 11px solid transparent;
	border-bottom: 11px solid transparent;
}
.ytc-thumb:hover .ytc-play,
.ytc-thumb:focus-visible .ytc-play{ background: var(--ytc-gold); }

.ytc-frame{
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	display: block;
}

/* Pfeile: rund, links und rechts über dem Carousel */
.ytc-nav{ display: contents; }
.ytc-nav[hidden]{ display: none; }

.ytc-prev,
.ytc-next{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--ytc-green);
	color: var(--ytc-gold);
	cursor: pointer;
	transition: background .2s ease, color .2s ease, opacity .2s ease;
}
.ytc-prev{ left: 10px; }
.ytc-next{ right: 10px; }

.ytc-prev:hover,
.ytc-next:hover{
	background: var(--ytc-gold);
	color: var(--ytc-green);
}
.ytc-prev:focus-visible,
.ytc-next:focus-visible{ outline: 3px solid var(--ytc-gold); outline-offset: 2px; }
.ytc-prev[disabled],
.ytc-next[disabled]{ opacity: .35; pointer-events: none; }
.ytc-prev svg,
.ytc-next svg{ width: 20px; height: 20px; }

/* mobil: ein Video pro Ansicht, etwas kleinere Pfeile */
@media (max-width: 767px){
	.ytc{ --ytc-cols: 1; }
	.ytc-prev,
	.ytc-next{ width: 38px; height: 38px; }
	.ytc-prev{ left: 8px; }
	.ytc-next{ right: 8px; }
	.ytc-prev svg,
	.ytc-next svg{ width: 18px; height: 18px; }
}

@media (prefers-reduced-motion: reduce){
	.ytc-track{ scroll-behavior: auto; }
}