/* Inline-Player im Artikel. Farben kommen aus den Tokens des Child-Themes;
   die Fallbacks greifen nur, falls die Tokens einmal nicht geladen sind. */

.mw-video-block {
	margin: 2.4em 0;
}

.mw-video {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 8px;
	background: #000;
	cursor: pointer;
}

.mw-video__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Dezentes Label statt Play-Button: das Cover sagt selbst schon "Video". */
.mw-video__label {
	position: absolute;
	left: 16px;
	bottom: 14px;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .92);
	color: var(--mw-brand, #055694);
	font-size: .85em;
	font-weight: 600;
	letter-spacing: .02em;
}

.mw-video__frame {
	position: absolute;
	inset: 0;
	display: none;
}

.mw-video__frame iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

.mw-video.is-playing .mw-video__poster,
.mw-video.is-playing .mw-video__label {
	display: none;
}

.mw-video.is-playing .mw-video__frame {
	display: block;
}

.mw-video:focus-visible {
	outline: 3px solid var(--mw-brand-bright, #0a6fbf);
	outline-offset: 3px;
}

.mw-video__hint {
	font-size: .85em;
	opacity: .7;
	margin-top: .5em;
}

/* Hinweis nur fuer angemeldete Redakteure, solange das Video privat ist. */
.mw-video__vorschau {
	margin-top: .5em;
	padding: .5em .8em;
	border-left: 3px solid var(--mw-accent, #e8a830);
	font-size: .85em;
	background: var(--mw-paper, #f4f6fa);
}

/* Videoseite (VID-26): Player oben, darunter Kapitel, Weg zum Ratgeber,
   Transkript. Lesebreite wie im Artikel. */

/* Enfold setzt main auf volle Breite und laesst es floaten; die Klasse am
   Container allein reicht dagegen nicht. */
.container main.mw-videoseite,
.container main.mw-videouebersicht {
	display: block;
	float: none;
	width: 100%;
	max-width: 820px;
	margin-left: auto;
	margin-right: auto;
}

.container main.mw-videouebersicht {
	max-width: 1100px;
}

.mw-videoseite__player {
	margin-top: 0;
}

.mw-video-kapitel {
	list-style: none;
	margin: 0 0 2em;
	padding: 0;
}

.mw-video-kapitel li {
	margin: 0;
	border-bottom: 1px solid var(--mw-line, #e3e7ee);
}

.mw-video-kapitel a {
	display: flex;
	gap: 1em;
	padding: .6em 0;
	text-decoration: none;
}

.mw-video-kapitel__zeit {
	min-width: 3.2em;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	color: var(--mw-brand, #055694);
}

.mw-videoseite__ratgeber {
	margin: 2em 0;
}

.mw-videoseite__knopf {
	display: inline-block;
	padding: .8em 1.4em;
	border-radius: 6px;
	background: var(--mw-brand, #055694);
	color: #fff !important;
	font-weight: 600;
	text-decoration: none;
}

.mw-videoseite__knopf:hover,
.mw-videoseite__knopf:focus-visible {
	background: var(--mw-brand-bright, #0a6fbf);
}

.mw-videoseite__transkript h3 {
	margin-top: 1.6em;
}

/* Übersicht /videos/ */

.mw-videokarten {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1.6em;
	margin: 1.6em 0;
}

.mw-videokarte {
	display: flex;
	flex-direction: column;
	gap: .4em;
	text-decoration: none;
}

.mw-videokarte img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 8px;
}

.mw-videokarte__titel {
	font-weight: 600;
}

.mw-videokarte__dauer {
	font-size: .85em;
	opacity: .7;
}