/* Videobox – Raster mit Vorschaubildern, Player erst nach dem Klick */

.videobox { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.videobox__video { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }

.videobox__start,
.videobox__player {
	display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
	border: 0; border-radius: var(--radius-gross, 14px); overflow: hidden;
}
/* Der Abspieler bringt width/height als Attribute mit – die Höhe muss die
   CSS-Regel bestimmen, sonst steht der Rahmen zu hoch im Raster. */
.videobox__player { height: auto; }
.videobox__start { position: relative; padding: 0; background: var(--stein-200, #E7E0D6); cursor: pointer; }
.videobox__start img { width: 100%; height: 100%; object-fit: cover; display: block; }

.videobox__play {
	position: absolute; inset: 0; margin: auto;
	width: 3.4rem; height: 3.4rem; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: rgba(36, 31, 28, .62); color: #fff; font-size: 1.3rem;
	transition: background .15s ease, transform .15s ease;
}
.videobox__start:hover .videobox__play,
.videobox__start:focus-visible .videobox__play { background: var(--terrakotta, #B4502A); transform: scale(1.06); }

.videobox__dauer {
	position: absolute; right: .5rem; bottom: .5rem;
	padding: .1rem .4rem; border-radius: .35rem;
	background: rgba(36, 31, 28, .78); color: #fff;
	font-size: .78rem; font-variant-numeric: tabular-nums;
}

.videobox__titel { margin: 0; font-size: 1rem; line-height: 1.35; }
.videobox__meta { margin: 0; font-size: .82rem; color: var(--tinte-leise, #8A7F76); }
.videobox__lizenz { color: var(--murgia, #6C7A57); }

.videobox__hinweis {
	margin-top: 1.25rem; font-size: .84rem; color: var(--tinte-leise, #8A7F76);
	max-width: var(--breite-text, 38rem);
}

.videoseite__kopf { margin-bottom: 1.5rem; }