h2, h3, h4, h5 	{user-select:none; color:#fff}

.container		{display: flex; gap: 20px; align-items: flex-start; user-select:none;}
.controlbox		{margin-top:.5em}
.left			{flex: 1; margin-right:.5em}
.right			{flex: 1;}
.left img		{max-width: 100%; height: auto; display: block;-webkit-user-drag: none; user-drag: none;}

.music-player {background-color:#2b2b2b; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); display: flex;  flex-direction: row; flex-wrap: wrap; align-items: flex-start;}
.progress	{width:99%; visibility:hidden; cursor:pointer;margin-top: .5em;}

#sumtime, #currtime	{color:#ccc; font-size:10px; position:absolute; display:none}
#sumtime			{margin-left:37em}
#currtime			{float:right}

.clsTape{background:url(../images/tape.png) no-repeat; height:14em;}

.boxall 				{display:flex; justify-content: center; gap:10px}
.clsTrackBox 			{width:99%; max-width:99%}

.clsTrackList			{margin:1.5em 0 0 0; line-height:180%;font-family: 'Inter', Arial, sans-serif; width:95%; max-width:95%}

.tracklist ul			{padding:0}
.tracklist ul li  		{list-style:none!important; padding: 0 0 0 4px; text-align:left; font-size:12px; color: #fff;border-radius: 4px; user-select:none; opacity:0.8 }
.tracklist li 			{cursor: pointer;}
.tracklist ul li:hover	{opacity:1}
.tracklist li.playing 	{background-color:#de5c3a;color: white;font-weight: bold;opacity:0.9}

.clsCover				{margin: 0 0 12px 0px; width: 99%; border-radius:8px; max-width:99%; height: auto; display: block;}
#titel					{font-size:13px; color:#ccc;text-overflow:ellipsis; white-space: nowrap; max-width: 40ch;}
audio {display:none}

.volBox	{margin: .8em 0 0 1.8em;}
.volBox	#speakerIcon {position:absolute;margin: 3px 0 0 0;}

#volume   			 {padding: 1em 0 0 0; margin:0 0 0 2em}

.clsTimeCode		 {margin-top:-.8em}
.controls			 {margin-top:1em}
.controls button   	 {margin: 6px 8px 0 8px; border: none; background-color: #de5c3a; color: white; height:30px; width:30px;border-radius: 50%; cursor: pointer;-webkit-appearance: none; appearance: none; opacity:0.8; }
.controls button:hover		{opacity:1}
.controls #play	 	{height:48px; width:48px;}

#clsDlBtn			 {opacity:0.8; float:right; cursor:pointer; user-select:none;font-size:1.5em; color:#fff;}
#clsDlBtn:hover		 {opacity:1}

.clsMldDl			 {width: 22em; background: #fff; border-radius: 6px; padding: 8px; font-size: .8em; color: #000; margin: 2.5em 0 0 9.5em; display:none;position: absolute; z-index: 100; opacity:.9; cursor:pointer}
.clsMldDl:hover		 {opacity:1}			 
#menubox			 {background:#2b2b2b; color:#fff;border:solid 1px #2b2b2b; border-radius:6px; padding:6px 3px 6px 16px; margin:0 0 1em 0; font-size:13px; opacity:0.8; user-select:none}
#menubox:hover		 {opacity:1; border:solid 1px #f60}	
	
.clsDownArrow, .clsDownArrowRotate	{float:right; font-size:24px; margin-right: 3px; cursor:pointer}
.clsDownArrowRotate	{rotate:180deg}


#menuboxFull		{display:none; background:#eee; border-radius:6px; padding:12px;position: absolute; width:45em; z-index:50; user-select:none; max-height:34em; overflow:auto}
#menuboxFull h4		{color:#fff; margin-bottom:1em; background-color:#bab8b8; border-radius:6px 6px 0 0; padding:6px; font-size:14px}	
.menuboxFullSub		{display:flex;gap: 20px; color:#000; font-size:14px; font-weight:normal; margin:0 0 .5em 0; cursor:pointer; border-radius:6px; padding: 12px 0 0 12px;line-height: 140%;}
.menuboxFullSub:hover {background-color:#e7e5e5}		

#menuboxFull img	{height:80px; width:80px; border-radius:6px; opacity:0.8; border:solid 2px #fff;}
#menuboxFull img:hover	{opacity:1}

.menuboxActive img  	{border:solid 2px #f60 !important;border-radius:6px; opacity:1 !important}
.menuboxFullSubActive	{background-color:#e7e5e5; color:#666; cursor:default}
.clsAlbTitle			{font-weight:bold}
.clsAlbSubTitle			{font-weight:normal; font-size:12px}

@media (max-width:600px){
  .container			{flex-direction: column;}
  .music-player			{flex-direction: column;}
  .menuboxFullSub		{font-weight:bold}
}

@media screen and ( max-width:480px ){
	.controls button {margin: 6px 10px 0 10px; opacity:1}	
	#menuboxFull img {opacity:1}
	.clsCover		 {width: 99%;}

	#clsDlBtn 		 {margin-top:.5em; font-size:2em}
	.clsMldDl		 {margin:4.5em 0 0 0em}

	#sumtime		 {margin-left: 22em;}
	
	.tracklist ul li {font-size:15px;width:300px; max-width: 40ch;}
	
	.clsTrackList	 {line-height:210%; max-width:95%}
	.tracklist h4	 {border-top:1px solid #fff; padding-top:12px}
	.clsTrackBox	 {margin-top:1em} 
	#menuboxFull	 {width:19.8em; max-height:21em}
	.menuboxFullSub	{font-weight:bold}
}
@media screen and ( max-width:580px ){
	.clsCover		 {width: 99%;}
	.clsTrackList	 {max-width:93%}
}
/* Smartphones Landscape / kleine Tablets */
@media screen and ( max-width:760px ){
	#clsDlBtn   	{margin-left:0em; font-size:2em}
	.menuboxFullSub	{font-weight:bold}
	#menuboxFull	{max-height:15em}
	#sumtime		{margin-left: 30.2em;}
	.left			{margin-right:0}
	.clsTrackList	{max-width:95%}
	.tracklist ul li {font-size:15px;; max-width: 40ch;}
}
/* Smartphones hoch*/
@media screen and ( max-width:780px ){
	
	#sumtime		{margin-left: 31em;}
	.clsTrackList	 {max-width:95%}
	.tracklist ul li {font-size:14px; flex: 1; min-width: 0;overflow: hidden;text-overflow: ellipsis;  white-space: nowrap; max-width: 40ch;}
	.menuboxFullSub	{font-weight:bold}
	#menuboxFull	{max-height:21em}
	.left			{margin-right:0}
}


/* Tablets */
@media (min-width: 1024px) {}

.controls #play[data-state="pause"] {border-radius:12px};