:root{    
    
    /* colors */

	--main-color-20:				hsl(183,26%,20%);
	--main-color-30:				hsl(183,26%,30%);
	--main-color-40:				hsl(183,26%,40%);
	--main-color-60:				hsl(183,26%,60%);
	--main-color-80:				hsl(183,26%,80%);
	
    /* icons */

    --icon-play:					url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" height="2em" viewBox="0 0 384 512"><path fill="white" d="M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80L0 432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z"/></svg>');
    --icon-pause:					url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" height="2em" viewBox="0 0 320 512"><path fill="white" d="M48 64C21.5 64 0 85.5 0 112L0 400c0 26.5 21.5 48 48 48l32 0c26.5 0 48-21.5 48-48l0-288c0-26.5-21.5-48-48-48L48 64zm192 0c-26.5 0-48 21.5-48 48l0 288c0 26.5 21.5 48 48 48l32 0c26.5 0 48-21.5 48-48l0-288c0-26.5-21.5-48-48-48l-32 0z"/></svg>');
    --icon-play-small:				url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" height="1.4em" viewBox="0 0 384 512"><path fill="white" d="M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80L0 432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z"/></svg>');
    --icon-pause-small:				url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" height="1.4em" viewBox="0 0 320 512"><path fill="white" d="M48 64C21.5 64 0 85.5 0 112L0 400c0 26.5 21.5 48 48 48l32 0c26.5 0 48-21.5 48-48l0-288c0-26.5-21.5-48-48-48L48 64zm192 0c-26.5 0-48 21.5-48 48l0 288c0 26.5 21.5 48 48 48l32 0c26.5 0 48-21.5 48-48l0-288c0-26.5-21.5-48-48-48l-32 0z"/></svg>');

}

*, *::before, *::after { box-sizing: border-box; }
html, body { 
	height: 	100%;
}
body {
  margin: 		0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif;
  color: 		hsl(183,26%,20%);
  background: 	linear-gradient(hsl(183, 26%, 70%) 0%, hsl(183, 26%, 50%) 100%) fixed;
}

a { color: #0a5a7a; text-decoration: none; }
a:hover { text-decoration: underline; }

.container {
  width: min(900px, 80vw);
  margin: 0 auto;
}

/* ====== Logo ====== */

.container.header {
	text-align: center;
}

.logo {
	position: 		relative;
	margin: 		10px;
	width: 			min(200px, 30vw);
	border: 		solid 4px #FFF;
	border-radius: 	20px;
	box-shadow: 	0 6px 24px rgba(0,0,0,.15);
}


/* ====== corner badge ====== */

.corner-badge-wrapper {
	position: 		absolute;
	right: 			0px;
	top 			0px;
	width: 			240px;
	height: 		120px;
	overflow: 		hidden;
}

.corner-badge {
	position: 		absolute;
	right: 			-160px;
	top: 			-110px;
	width: 			380px;
	height: 		220px;
	background: 	hsl(183, 26%, 60%);
	border-radius: 	50% / 50%;
}
.corner-badge:after {
	content: 		"Juist in Bildern \A und mehr";
	white-space: 	pre;
	color:			#FFF;
	text-align: 	right;
	font-size: 		90%;
	position: 		absolute;
	top: 			120px;
	right: 			170px;
	width: 			160px;
	height: 		80px;
	background-image: 		url("../img/das-juist-bilderbuch.png");
	background-size: 		contain;
	background-repeat: 		no-repeat;
	background-position: 	center;
}
.corner-badge:hover {
	cursor: pointer;
}


/* ====== filter bar ====== */

.container.filter-bar {
	display: 		flex;
	margin: 		4px auto 4px auto;
	justify-content: center;
}

.year-filter {
	display: 		inline-flex;
	background: 	rgba(255,255,255,.6);
	border: 		solid 8px rgba(255,255,255,0);
	border-radius:	20px;
	gap: 			12px;
	backdrop-filter: blur(4px);
	box-shadow: 	0 4px 14px rgba(0,0,0,.12);
	width: 			fit-content;
	max-width: 		min(900px, 80vw);
	overflow: 		scroll;
	scrollbar-width: none;
	justify-content: center;
}
.year-filter a {
	padding: 4px 4px;
	font-weight: 600;
	color: #073d46;
	opacity: 0.9;
}
.year-filter a.active {
	padding: 4px 8px;
	color: #fff;
	background: #0e5665;
	border-radius: 999px;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
}
.year-filter a.active:hover {
	text-decoration: none;
	pointer-events: none;
	cursor: default;
}

/* ====== search bar ====== */

.container.search-bar {
	display:		none;
	xswidth: 			min(900px, 80vw);
	background: 	rgba(255,255,255,.6);
	border: 		solid 8px rgba(255,255,255,0);
	border-radius:	6px;
	margin: 		4px auto 4px auto;
	text-align: 	center;
}

.container.search-bar.open {
	display:		block;
}

.container.search-bar #search-phrase {
	width: 			400px;
	height: 		26px;
	padding: 		8px;
	margin: 		2px auto;
	border: 		none;
	border-radius: 	20px;
	font-size: 		110%;
	outline: 		none;
}

.container.search-bar #search-result {
	display:		inline-block;
	width:			100px;
}

.container.search-bar button {
	color:				#FFF;
	border: 			0px;
	border-radius: 		24px;
	padding: 			4px 8px;
	margin:				4px;
	cursor: 			pointer;
	font-size:			100%;
	background-color: 	var(--main-color-30);
}
.container.search-bar button:hover {
	background-color: 	var(--main-color-40);
}
.container.search-bar button:active {
	background-color: 	var(--main-color-30);
}


/* ====== main ====== */

.container.main {
  background: 		rgba(255,255,255,0.5);
  box-shadow: 		0 8px 32px rgba(0,0,0,0.15);
  border: 			1px solid rgba(0,0,0,0.1);
  display: 			grid; grid-template-columns: 1fr; gap: 28px;
  padding: 			22px;
  border-radius: 	6px;
  height:			calc(100vh - 70px - min(200px, 30vw));
  overflow: 		scroll;
}

.container.search-bar.open + .container.main {
  height:	calc(100vh - 70px - min(200px, 30vw) - 60px);
}


/* ====== episode list ====== */

.episode-list { }

.episode-card {
  background: 		rgba(255,255,255,0.8);
  border-radius: 	8px;
  box-shadow: 		0 3px 10px rgba(0,0,0,0.1);
  padding: 			3px;
  cursor: 			pointer;
  margin-bottom: 	8px;
}
.episode-card:hover:not(.active) {
	background: 	rgba(255,255,255,0.6);
}
.episode-card:active:not(.active) {
	background: 	rgba(255,255,255,0.4);
}

.episode-data {
	display: 		grid; grid-template-columns: 100px 1fr; gap: 10px;
}

.episode-thumb {
	width: 			100px; height: 100px; object-fit: cover;
	border-radius: 	6px;
	background: 	#ddd;
}

.episode-meta h3 { margin: 0; font-size: 18px; }
.episode-meta .date { font-size: 12px; color: #3f5e61; margin: 2px 0 6px; }
.episode-meta p { margin: 0; font-size: 14px; }


/* ====== transcription ====== */

button.transcription {
	float: right;
	margin-top: -25px;
	color: #FFF;
	border: 0px;
	border-radius: 20px;
	margin-right: 5px;
	padding: 2px 8px;
	background: var(--main-color-40);
}
button.transcription:hover {
	background:		var(--main-color-30);
}
button.transcription:active {
	background:		var(--main-color-20);
}

div.transcription {
	display: 	none;
	height: 	200px;
	font-size: 	80%;
	margin: 	5px 0px;
	padding: 	10px;
	overflow: 	scroll;
}



/* ====== audio player ====== */

hr {
	width: 			calc(100% + 8px);
	border: 		1px solid var(--main-color-80);
	margin-top: 	10px;
	margin-left:	-4px;
}

.player {
	width: 			90%;
	margin: 		10px auto;
	border-radius:	12px;
	font-family: 	system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

.controls {
	display: 		flex;
	align-items:	center;
	gap: 			12px;
}

.player button {
	border: 			0;
	border-radius: 		30px;
	height:				60px;
	width:				60px;
	cursor: 			pointer;
	background-color: 	var(--main-color-30);
	background-image:	var(--icon-play);
    background-repeat:	no-repeat;
	xbackground-position-x: 20px;
	xbackground-position-y: 14px;
	background-position: center;
}
.player button:hover {
	background-color: 	var(--main-color-40);
}
.player button:active {
	background-color: 	var(--main-color-20);
}
.player button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}
.player button.playing {
	background-image:	var(--icon-pause) !important;
	background-position: center !important;
}

.player #seek {
	width: calc(100% - 200px);
}

.player .time {
	text-align: 	center;
	color: 			#333;
	xmin-width: 	40px;
	width:			fit-content;
	font-size: 		14px;
	font-variant-numeric: tabular-nums;
}



@media (max-width: 380px){
	.container {
		width:95%
	}

	.container.header {
		text-align: left;
	}
	.logo {
		width: 100px;
		border: solid 2px white;
	}

	nav.year-filter {
		gap: 		2px;
		max-width: 	1000px;
		border:		0px;
	}

	.container.search-bar #search-phrase {
		width: auto;
	}
  
	.container.main {
		padding: 4px;
	}
	
	.episode-data {
		grid-template-columns: 70px 1fr;
		gap: 5px;
	}
	
	.episode-thumb {
		width: 70px;
	}
		
	.episode-meta p {
		font-size: 12px;
	}
	
	.episode-meta h3 {
		font-size: 14px;
	}
	
	.player {
		width: 100%;
	}
	
	.player button {
		height:	40px;
		width: 	40px;
	}

	button.transcription {
		margin-top: -18px;
		margin-right: 3px;
	}
		
	.player button {
		background-image:	var(--icon-play-small);
	}
	.player button.playing {
		background-image:	var(--icon-pause-small) !important;
	}
	
	.player #seek {
		width: calc(100% - 150px);
	}
}