.concert { cursor:pointer; width:200px; display:inline-block; margin:10px; vertical-align:top;}


.title {  display:inline-block; font-family:inherit; text-align:left; vertical-align:top;display:block; font-size:170%; width:200px; height:200px; background-size:200px 200px; background-repeat:no-repeat; border:1px solid var(--textfarbe); font-weight:bold; letter-spacing:-1px; }
.subtitle { display:inline; font-size:60%; font-style:oblique; font-weight:normal; }
.titlebackground { width:190px; padding:5px; position:relative; left:-7px;}

.concertdetails {
	visibility:hidden; opacity:0; z-index: 10; width:calc(90% - 50px); min-width:250px; margin:auto;

	position:absolute; top:50px;
	left: 50%;
    transform: translateX(-50%);
    
	background:var(--grundfarbe);
	box-shadow: 10px 10px 5px gray;
	padding:25px;	
	border:1px solid var(--textfarbe);
	vertical-align:top;
	height: auto;
	transition: visibility 0.5s 0s, opacity 0.5s;
}

 @media (prefers-color-scheme: dark) {
 	.concertdetails { box-shadow: none; }
 }
 
.concertdetails .close {
	position:absolute; top:0px; right:5px; cursor:pointer; z-index:1000;
}
.concertdetails .title { transform: scale(1.5); transform-origin: top left;}
.concertdetails .programme { position:relative; /* wichtig, damit .tracknr position:absolute funktioniert */ 
                             padding-top:10px; margin-left:10px; white-space:pre-wrap; 
                             display:inline-block; line-height:1.3; }

.concertdetails .description:not(:empty) { text-align:justify; hyphens:auto; -webkit-hyphens:auto; column-count:4; column-gap:20px; column-rule:1px solid grey; display:block; width:90%; line-height:1.0; background:var(--grundfarbe); margin-top:10px; }

.covercontainer { width:300px; height:300px; margin:auto; display:inline-block; vertical-align:top; }

.tracknr { position:absolute; left:0px; font-size:80%; border:0.1mm solid var(--textfarbe); border-radius:1mm;
			 cursor:pointer; padding:0.3mm; display:inline-block; min-width:1em; text-align:center; 
			 margin-right: 1em; }
.track { padding-left:1.5em; cursor:pointer; display:inline-block; margin-bottom:0.2em; }

.playing .tracknr { background-color:var(--textfarbe); color:var(--grundfarbe); transition:background-color 0.5s, color 0.5s; }

audio[src=""] { display:none; }
audio { display:block; }

@media (max-width: 2000px) { 
	.concertdetails .description:not(:empty) { column-count:3; }
}

@media (max-width: 1400px) { 
	.concertdetails .description:not(:empty) { column-count:2; }
}
    
@media (max-width: 950px) { 
	.concertdetails .description:not(:empty) { column-count:1; }
}