/* -------------------------------------------------- */
/* ----- Watzmann.theater --- Aufzeichnung ---------- */
/* ----- Video-Player (Plyr) im Stil der Website ---- */
/* -------------------------------------------------- */



/* ------------------- */
/* Kopf: Tags */
/* ------------------- */

div#Aufzeichnung div.AufzeichnungTags
{
	margin-bottom: 20px;
}

div#Aufzeichnung div.AufzeichnungTags span.Tag
{
	display: inline-block;
	margin-right: 6px;
	margin-bottom: 6px;
	padding: 4px 12px;
	background-color: #4d4d4d;
	color: #ffffff;
	font-family: 'Bitter', Arial, Verdana, sans-serif;
	font-size: 13px;
}

div#Aufzeichnung div.AufzeichnungTags span.Tag.TagRot
{
	background-color: #e20613;
}



/* ------------------- */
/* Video-Player */
/* ------------------- */

div#Aufzeichnung div.VideoPlayer
{
	position: relative;
	background-color: #2b2b2b;
	margin-bottom: 20px;
	--plyr-color-main: #e20613;
	--plyr-font-family: 'Bitter', Arial, Verdana, sans-serif;
	--plyr-font-weight-bold: 700;
	--plyr-control-radius: 0px;
	--plyr-control-icon-size: 20px;
	--plyr-control-spacing: 12px;
	--plyr-range-thumb-height: 16px;
	--plyr-range-track-height: 6px;
	--plyr-range-fill-background: #e20613;
	--plyr-video-control-color: #ffffff;
	--plyr-video-control-color-hover: #ffffff;
	--plyr-video-control-background-hover: #e20613;
	--plyr-video-range-track-background: #6a6a6a;
	--plyr-video-progress-buffered-background: #8a8a8a;
	--plyr-menu-background: #2b2b2b;
	--plyr-menu-color: #ffffff;
	--plyr-menu-radius: 0px;
	--plyr-menu-back-border-color: #3a3a3a;
	--plyr-menu-back-border-shadow-color: #1c1c1c;
	--plyr-tooltip-radius: 0px;
	--plyr-tooltip-color: #000000;
	--plyr-badge-background: #e20613;
}

div#Aufzeichnung div.VideoPlayer video
{
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
}

/* Steuerleiste dauerhaft unter dem Bild */
div#Aufzeichnung div.VideoPlayer .plyr--video {display: flex; flex-direction: column;}
div#Aufzeichnung div.VideoPlayer .plyr__video-wrapper {order: 0; border-radius: 0px;}

div#Aufzeichnung div.VideoPlayer .plyr--video .plyr__controls
{
	order: 1;
	position: relative;
	box-sizing: border-box;
	align-self: stretch;
	justify-content: flex-start;
	width: 100%;
	padding: 14px 18px;
	gap: 6px;
	background: #2b2b2b;
	color: #ffffff;
	opacity: 1 !important;
	transform: none !important;
	pointer-events: auto !important;
}

div#Aufzeichnung div.VideoPlayer .plyr--video .plyr__progress__container {flex: 1; min-width: 120px;}
div#Aufzeichnung div.VideoPlayer .plyr--video .plyr__volume {width: auto; min-width: 0px; max-width: none;}
div#Aufzeichnung div.VideoPlayer .plyr--video .plyr__volume input[type="range"] {flex: 0 0 64px; width: 64px;}

div#Aufzeichnung div.VideoPlayer .plyr--video .plyr__time
{
	color: #dddddd;
	font-size: 14px;
	font-variant-numeric: tabular-nums;
}

/* Play-Button in der Leiste */
div#Aufzeichnung div.VideoPlayer .plyr--video .plyr__controls > .plyr__control[data-plyr="play"]
{
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	margin-right: 8px;
	background-color: #e20613;
	color: #ffffff;
	transition: transform 0.15s, background-color 0.15s;
}

div#Aufzeichnung div.VideoPlayer .plyr--video .plyr__controls > .plyr__control[data-plyr="play"]:hover
{
	background-color: #ba0510;
	transform: scale(1.06);
}

div#Aufzeichnung div.VideoPlayer .plyr--video .plyr__controls > .plyr__control[data-plyr="play"] svg {width: 20px; height: 20px;}

/* Großer Play-Button im Bild */
div#Aufzeichnung div.VideoPlayer .plyr__control--overlaid
{
	padding: 26px;
	border-radius: 0px;
	background-color: #e20613 !important;
	color: #ffffff;
	box-shadow: 0px 0px 0px 4px rgba(0, 0, 0, 0.35);
}

div#Aufzeichnung div.VideoPlayer .plyr__control--overlaid:hover {background-color: #ba0510 !important;}
div#Aufzeichnung div.VideoPlayer .plyr__control--overlaid svg {width: 26px; height: 26px; fill: #ffffff;}



/* ------------------- */
/* Untertitel im Video */
/* ------------------- */

div#Aufzeichnung div.UntertitelEinblendung
{
	position: absolute;
	left: 7%;
	right: 7%;
	bottom: 6%;
	z-index: 3;
	text-align: center;
	pointer-events: none;
	transition: opacity 0.15s;
}

div#Aufzeichnung div.UntertitelEinblendung:empty {opacity: 0;}

div#Aufzeichnung div.UntertitelEinblendung span
{
	display: inline;
	padding: 2px 8px;
	background-color: rgba(8, 8, 8, 0.75);
	color: #ffffff;
	font-family: 'Bitter', Arial, Verdana, sans-serif;
	font-size: clamp(14px, 2.1vw, 22px);
	line-height: 1.5;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

div#Aufzeichnung .plyr--fullscreen-active div.UntertitelEinblendung span {font-size: clamp(20px, 2.6vw, 36px);}

div#Aufzeichnung button.BtnUntertitel {position: relative;}

div#Aufzeichnung button.BtnUntertitel.aktiv:after
{
	content: "";
	position: absolute;
	left: 8px;
	right: 8px;
	bottom: 4px;
	height: 3px;
	background-color: #e20613;
}

div#Aufzeichnung button.BtnUntertitel:hover:after {background-color: #ffffff;}

div#Aufzeichnung button.BtnUntertitel span.UntertitelText
{
	padding: 0px 3px;
	border: 2px solid currentColor;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.5px;
}



/* ------------------- */
/* Kapitel im Player */
/* ------------------- */

div#Aufzeichnung span.KapitelMarker
{
	position: absolute;
	top: 50%;
	z-index: 3;
	width: 3px;
	height: 12px;
	margin: -6px 0px 0px -1.5px;
	background-color: #ffffff;
	box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.6);
	cursor: pointer;
	pointer-events: auto;
}

div#Aufzeichnung span.KapitelMarker:hover {background-color: #e20613; transform: scaleY(1.4);}

div#Aufzeichnung span.KapitelMarker span.KapitelTipp
{
	display: none;
	position: absolute;
	bottom: 18px;
	left: 50%;
	transform: translateX(-50%);
	padding: 4px 8px;
	background-color: #e20613;
	color: #ffffff;
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
}

div#Aufzeichnung span.KapitelMarker:hover span.KapitelTipp {display: block;}

div#Aufzeichnung div.KapitelAktuell
{
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 3;
	max-width: 70%;
	padding: 5px 10px;
	background-color: rgba(8, 8, 8, 0.62);
	color: #ffffff;
	font-family: 'Bitter', Arial, Verdana, sans-serif;
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	pointer-events: none;
	transition: opacity 0.3s;
}

div#Aufzeichnung div.KapitelAktuell:empty {opacity: 0;}

div#Aufzeichnung button.BtnKapitel svg {width: 18px; height: 18px; fill: currentColor;}
div#Aufzeichnung button.BtnKapitel.offen {background-color: #e20613; color: #ffffff;}

div#Aufzeichnung div.KapitelMenue
{
	display: none;
	position: absolute;
	right: 12px;
	bottom: calc(100% + 10px);
	z-index: 20;
	width: min(360px, calc(100% - 24px));
	max-height: 320px;
	padding: 8px;
	overflow-y: auto;
	background-color: #2b2b2b;
	box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.5);
	scrollbar-width: thin;
	scrollbar-color: rgba(226, 6, 19, 0.7) transparent;
}

div#Aufzeichnung div.KapitelMenue.offen {display: block;}

div#Aufzeichnung div.KapitelMenue div.KapitelMenueTitel
{
	margin: 6px 10px 8px 10px;
	color: #ff4b55;
	font-family: 'League Gothic', 'Palatino Linotype', Times New Roman, Serif;
	font-size: 20px;
	letter-spacing: 1px;
	text-transform: uppercase;
}

div#Aufzeichnung div.KapitelMenue button
{
	display: flex;
	align-items: baseline;
	gap: 12px;
	width: 100%;
	padding: 8px 10px;
	border: 0px;
	background: transparent;
	color: #ffffff;
	font-family: 'Bitter', Arial, Verdana, sans-serif;
	font-size: 14px;
	text-align: left;
	cursor: pointer;
}

div#Aufzeichnung div.KapitelMenue button:hover {background-color: #3a3a3a;}
div#Aufzeichnung div.KapitelMenue button.aktiv {background-color: #e20613; font-weight: 700;}



/* ------------------- */
/* Kapitel-Liste unter dem Video */
/* ------------------- */

div#Aufzeichnung nav.KapitelListe
{
	display: none;
	margin-bottom: 30px;
}

div#Aufzeichnung nav.KapitelListe.sichtbar {display: block;}

div#Wrapper div#InnerWrapper div#Content main#Inhalt div#Aufzeichnung nav.KapitelListe ol
{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	grid-auto-rows: 1fr;
	gap: 6px;
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}

div#Wrapper div#InnerWrapper div#Content main#Inhalt div#Aufzeichnung nav.KapitelListe ol li
{
	display: flex;
	margin: 0px;
}

div#Aufzeichnung nav.KapitelListe button
{
	display: flex;
	flex: 1;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 9px 12px;
	border: 1px solid #2b2b2b;
	background-color: #2b2b2b;
	color: #ffffff;
	font-family: 'Bitter', Arial, Verdana, sans-serif;
	font-size: 14px;
	text-align: left;
	cursor: pointer;
	transition: background-color 0.15s, border-color 0.15s;
}

div#Aufzeichnung nav.KapitelListe button:hover {background-color: #3a3a3a; border-color: #e20613;}
div#Aufzeichnung nav.KapitelListe button.aktiv {background-color: #e20613; border-color: #e20613; font-weight: 700;}

div#Aufzeichnung span.KapitelNr
{
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	align-self: center;
	width: 22px;
	height: 22px;
	background-color: #4d4d4d;
	color: #ffffff;
	font-size: 12px;
	font-weight: 700;
}

div#Aufzeichnung nav.KapitelListe button.aktiv span.KapitelNr {background-color: #000000;}

div#Aufzeichnung span.KapitelZeit
{
	flex: 0 0 auto;
	color: #ff4b55;
	font-size: 13px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

div#Aufzeichnung button.aktiv span.KapitelZeit {color: #ffffff;}



/* ------------------- */
/* Transkript */
/* ------------------- */

div#Aufzeichnung details.Transkript
{
	display: none;
	margin-top: 30px;
}

div#Aufzeichnung details.Transkript.sichtbar {display: block;}

/* Auf- und Zuklappen wie auf der Seite FAQ */
div#Aufzeichnung details.Transkript summary
{
	display: block;
	margin-bottom: 20px;
	padding-left: 40px;
	background-image: url(../images/Layout/FAQplus.png);
	background-position: left 2px;
	background-repeat: no-repeat;
	color: #ffffff;
	font-family: 'Bitter', Arial, Verdana, sans-serif;
	font-size: 22px;
	font-weight: bold;
	list-style: none;
	cursor: pointer;
}

div#Aufzeichnung details.Transkript summary::-webkit-details-marker {display: none;}
div#Aufzeichnung details.Transkript[open] summary {background-image: url(../images/Layout/FAQminus.png);}

div#Wrapper div#InnerWrapper div#Content main#Inhalt div#Aufzeichnung ol.TranskriptListe
{
	position: relative;
	max-height: 360px;
	margin: 0px;
	padding: 24px 10px 40px 10px;
	overflow-y: auto;
	overscroll-behavior: contain;
	list-style-type: none;
	background-color: #2b2b2b;
	scroll-behavior: smooth;
	scrollbar-width: thin;
	scrollbar-color: rgba(226, 6, 19, 0.7) transparent;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0px, #000000 28px, #000000 calc(100% - 44px), transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0px, #000000 28px, #000000 calc(100% - 44px), transparent 100%);
}

div#Aufzeichnung ol.TranskriptListe::-webkit-scrollbar {width: 6px;}
div#Aufzeichnung ol.TranskriptListe::-webkit-scrollbar-track {background: transparent; margin: 16px 0px;}
div#Aufzeichnung ol.TranskriptListe::-webkit-scrollbar-thumb {background: rgba(226, 6, 19, 0.5);}
div#Aufzeichnung ol.TranskriptListe:hover::-webkit-scrollbar-thumb {background: rgba(226, 6, 19, 0.8);}

div#Wrapper div#InnerWrapper div#Content main#Inhalt div#Aufzeichnung ol.TranskriptListe li
{
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 0px;
	padding: 6px 8px;
	color: #e6e6e6;
	line-height: 1.55;
	transition: background-color 0.3s, color 0.3s;
}

div#Wrapper div#InnerWrapper div#Content main#Inhalt div#Aufzeichnung ol.TranskriptListe li.aktiv {background-color: #e20613; color: #ffffff;}
div#Wrapper div#InnerWrapper div#Content main#Inhalt div#Aufzeichnung ol.TranskriptListe li.aktiv span {font-weight: 700;}
div#Wrapper div#InnerWrapper div#Content main#Inhalt div#Aufzeichnung ol.TranskriptListe li.TranskriptLaden {color: #aaaaaa; font-style: italic;}

div#Wrapper div#InnerWrapper div#Content main#Inhalt div#Aufzeichnung ol.TranskriptListe li.TranskriptKapitel
{
	display: block;
	margin: 14px 0px 4px 0px;
	padding: 4px 8px;
	border-bottom: 1px solid #3a3a3a;
	color: #ff4b55;
	font-family: 'League Gothic', 'Palatino Linotype', Times New Roman, Serif;
	font-size: 20px;
	letter-spacing: 1px;
	text-transform: uppercase;
	cursor: pointer;
}

div#Wrapper div#InnerWrapper div#Content main#Inhalt div#Aufzeichnung ol.TranskriptListe li.TranskriptKapitel:first-child {margin-top: 0px;}

div#Aufzeichnung button.TranskriptZeit
{
	flex: 0 0 auto;
	padding: 0px;
	border: 0px;
	background: transparent;
	color: #ff4b55;
	font-family: 'Bitter', Arial, Verdana, sans-serif;
	font-size: 13px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
}

div#Aufzeichnung button.TranskriptZeit:hover {text-decoration: underline;}
div#Aufzeichnung li.aktiv button.TranskriptZeit {color: #ffffff;}



/* ------------------- */
/* Responsive */
/* ------------------- */

@media (max-width: 600px)
{
	div#Aufzeichnung div.VideoPlayer .plyr--video .plyr__controls {padding: 10px 8px !important; gap: 2px;}
	div#Aufzeichnung div.VideoPlayer .plyr--video .plyr__controls .plyr__control {padding: 7px;}
	div#Aufzeichnung div.VideoPlayer .plyr--video .plyr__controls > .plyr__control[data-plyr="play"] {width: 44px; height: 44px; margin-right: 4px;}
	div#Aufzeichnung div.VideoPlayer .plyr--video .plyr__progress__container {min-width: 70px;}
	div#Aufzeichnung div.VideoPlayer .plyr--video .plyr__time--current {font-size: 12px;}

	div#Aufzeichnung div.VideoPlayer .plyr--video [data-plyr="rewind"],
	div#Aufzeichnung div.VideoPlayer .plyr--video [data-plyr="fast-forward"],
	div#Aufzeichnung div.VideoPlayer .plyr--video [data-plyr="pip"],
	div#Aufzeichnung div.VideoPlayer .plyr--video .plyr__time--duration,
	div#Aufzeichnung div.VideoPlayer .plyr--video .plyr__volume,
	div#Aufzeichnung div.VideoPlayer .plyr--video .plyr__menu {display: none;}

	div#Aufzeichnung div.KapitelAktuell {top: 8px; left: 8px; padding: 3px 7px; font-size: 11px;}
	div#Aufzeichnung span.KapitelMarker {display: none;}
}