.full_width_box_wrapper{
	width:100%;
	background-color: var(--backgroundGrey);
}

.schnellSuche {
	container-name: schnellSucheContainer;
	container-type: inline-size;
	_padding:30px;
	_padding: 30px 30px 0 30px;
	--afterSize: clamp(.5rem, 1vw + .4rem, 1em);	
	transition: all .3s ease-in-out;
	_width:100%;
}
.schnellSuche.home {
	padding: 30px 30px 2.5vh 30px;
}
.schnellSuche.home .namen_liste {
	padding-top:2.5vh;
}
.schnellSucheList{
	display: grid;
	_gap: .5em;
	grid-template-columns: 1fr;
}
#ausgabe > div{
	_grid-area: ausgabe;
	_display: flex;
	_margin: 2vh 0;
}




.schnellSucheElement {
	list-style: none;
	list-style-type: none;
	font-size: var(--page-menue-size);	
	line-height: 1em;
	margin: 0;
	padding:0;
	position: relative;
	white-space: nowrap;
	transition: all .3s cubic-bezier(0.25,0.1,0.25,1);
	cursor: pointer;
	font-family: 'Montserrat', sans-serif;
	font-weight:700;
	_margin-right:1rem;
	padding-right:30px;
	display: flex;
	flex-direction: row;
	align-items: center;
	padding:.5vh 0px;
	
}
.schnellSucheElement:after {
	content: '';
	display: block;
	background-repeat: no-repeat;
	background-color: black;
	transition: all .3s cubic-bezier(0.25,0.1,0.25,1);
	position: absolute;
	position: relative;
}
.schnellSucheElement.pfeil-icon:after {
		padding:0px;
}

.schnellSucheElement.active, 
.schnellSucheElement:hover {
	color:var(--semmel-red);
}
.schnellSucheElement.active:after,
.schnellSucheElement:hover:after {
	color:var(--semmel-red);
	transform: rotate(90deg);
	background-color:var(--semmel-red);
}

.sub_ausgabe_full_width_box_wrapper {
	container-name: subausgabeContainer;
	container-type: inline-size;
}


.namen_liste,
#sub_ausgabe .namen_liste {
	display: flex; 
	flex-direction: row;
	gap:0px;
	flex-wrap: wrap;
	_column-gap: 2rem;
	row-gap: .5rem;
	display: grid;
	grid-template-columns: repeat(4,1fr);
	_grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	_grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	z-index:1;
	width:100%;
	
}
#ausgabe_genre .namen_liste,
#ausgabe_artist .namen_liste,
#ausgabe_ort .namen_liste{
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	margin-bottom:5vh;
}
.namen_liste > div {
	transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	transform-origin: top center;
	cursor: pointer;
}
.namen_liste > div:hover {
	transform: scale(1.1);
	transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	transform-origin: top left;
}
.artist_name {
	_padding: .3rem 1rem;
	_border: 1px solid #000;
	_text-transform:uppercase;
	_font-size:var(--afterSize);
	font-weight:300;
	cursor:pointer;
	_font-size:calc(var(--afterSize) * .8);
}

.kalenderElements {
	container-name: kalenderElementsContainer;
	container-type: inline-size;
	padding:30px;
	/* SUCHCONTAINER VARS */
	--bottomGap: .5vh;	
	
}
.kalenderHeader-Monat,
.kalenderHeader-Day {
	margin-bottom:2rem;
	padding-bottom:1rem;
	border-bottom: 1px solid var(--lineColor);
	display: flex;
	align-items: center;
	gap:1rem;
}
#ausgabe{
	transition: all .3s ease-in-out;
	height: auto;
}
#ausgabe > div {
	animation-duration: .3s;
	animation-name: slidein;
	animation-iteration-count: 1;
	_animation-direction: alternate;	
	transition: all 1.3s ease-in-out;
	height: auto;
	transform-origin: left;
	width:100%;
	
}
@keyframes slidein {
  from {
	transform: scale(0); 
	transform-origin: left;
  }

  to {
	transform: scale(1);
  }
}


#ausgabe .letter_liste .liste_title,
#ausgabe .namen_liste .liste_title,
.schnellSucheList .ausgabe .liste_title,
.ausgabe .liste_title{
	display: none;
}	
.schnellSucheList .ausgabe .letter_liste,
.schnellSucheList .ausgabe .namen_liste {
	padding: 2vh 0;
}
.select_letter{
	width:var(--button-size);
	height:auto;
	aspect-ratio:1/1;
	background-color: red;
	align-content: center;
	color:#fff;
	text-align: center;
	font-weight:700;
	border-radius: 100em;
	cursor: pointer;
	transition: all .2s ease-in-out;
	z-index:1;
	display: flex;
	  align-content: inherit;
	  align-items: center;
	  justify-content: center;
}
.select_letter:hover {
	scale: 1.25;
	z-index:2;
}

.letter_liste {
	display: grid;
	gap:15px;
	grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
	width:100%;	
	padding: 2vh 0 2vh 0;
}

.namen_liste_element {
	line-height:1em;
}
.namen_liste_element{
	font-size: .8em;
	line-height:1em;
	font-weight:500;
	text-transform:uppercase;
	_padding:5px;
	_border: solid 1px #000;
	_border-radius:100em;
	position: relative;
	padding-left:calc(var(--button-size) * .5);
}
.namen_liste_element:before {
	content:'';
	width:calc(var(--button-size) * .5);
	height:calc(var(--button-size) * .5);
	background-repeat: no-repeat;
	background-position: left center;
	transition: all .3s ease;
	display: flex;	
	background-color:black;
	mask-repeat: no-repeat;	
	left:0px;
	top:-3px;
	position: absolute;	
	mask-image: url('data:image/svg+xml;charset=UTF-8,<svg id="pfeil-icon" class="pfeil" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><polygon display="inline" style="enable-background:accumulate; fill:white;" points="70.6,47.6 47.6,24.6 36.1,36.1 59.1,59.1 36.1,82.1 47.6,93.6 70.6,70.6 82.1,59.1"/></svg>');
}


/* -----------------   sub ausgabe container presse ----------------------*/

@container subausgabeContainer (min-width: 200px ) {
	#sub_ausgabe .namen_liste {
		_grid-template-columns: repeat(1,1fr);
		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	}
	#sub_ausgabe {
		display: none;
	}
}
@container subausgabeContainer (min-width: 450px ) {
	#sub_ausgabe .namen_liste {
		_grid-template-columns: repeat(2,1fr);
	}
}
@container subausgabeContainer (min-width: 500px ) {
	#sub_ausgabe .namen_liste {
		_grid-template-columns: repeat(2,1fr);
	}
}
@container subausgabeContainer (min-width: 700px ) {
	#sub_ausgabe .namen_liste {
		_grid-template-columns: repeat(3,1fr);
	}
}

@container subausgabeContainer (min-width: 700px ) {

#sub_ausgabe {
	display: block;
}
}

@container subausgabeContainer (min-width: 1200px ) {
	#sub_ausgabe .namen_liste {
		_grid-template-columns: repeat(4,1fr);
	}
}


.neu_im_vvk {
	display:none;
}
.neu_im_vvk.active {
	display:grid;
}
@container schnellSucheContainer (min-width: 200px ) {

	.presse_menu .presse_menu_btn, .presse_menu .ausgabe, .schnellSuche_title
	{
		_padding-left: 30px;
		_padding-right: 30px;
	}

	.schnellSucheList{
		grid-template-areas:
		"searchbut"
		"ausgabe";
		grid-template-columns: 1fr;
	}
	.schnellSucheElement{
		padding-right: 0px;
		gap:0rem;
		height: auto;
		justify-content: space-between;
	}
	.schnellSucheElement:after {
		padding-top:10px;
		_right: calc(30px - var(--button-size));	
		width:calc(var(--button-size)*.5);
		height:calc(var(--button-size)*.5);
		aspect-ratio: 1/1;
		background-repeat: no-repeat;
		justify-content: flex-end;
		justify-items: flex-end;
		margin: 0px 0;
	}
	 .namen_liste {
		 _grid-template-columns: repeat(1,1fr);
		 grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	 }
	 .basicBoxElement .image {
		 display:none;
	 }
	 .basicBoxElement .contentTitel {
		 align-self: flex-start;
	 }
	 .basicBoxElement .contentText { 
		 _display:none;
	 }
	 #ausgabe {
		 display:none;
	 }

	 


	 #ausgabe_artist {display:flex;}
	 #ausgabe_neu {display:flex;}
	 #ausgabe_ort {display:flex;}
	 #ausgabe_datum {display:flex;}
	 #ausgabe_genre {display:flex;}


	 #genre_ausgabe {display:flex;}
	 #ort_ausgabe {display:flex;}
	 #region_ausgabe {display:flex;}
	 #artist_ausgabe {display:flex;}

	 #genre_sub_ausgabe {display:flex;}
	 #ort_sub_ausgabe {display:flex;}
	 #region_sub_ausgabe {display:flex;}
	 #artist_sub_ausgabe {display:flex;}

	 
	 #neu_btn {order:5;}
	 
	 
	 /*  add bottom-line for list-view  */
	 .schnellSucheElement {
		 _padding-bottom:.5vh;
		 _margin-bottom: .5vh;
		 border-bottom: 1px solid #000;
	 }
	 
}
@container schnellSucheContainer (min-width: 450px ) {
	.ausgabe .regionen_liste {
		_grid-template-columns: repeat(2,1fr);
		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	}
}

@container schnellSucheContainer (min-width: 600px ) {
	.namen_liste {
		_grid-template-columns: repeat(2,1fr);
	}
	.basicBoxContent {
		display:flex;
	}
	.basicBoxElement .image {
		display:none;
	}
	.basicBoxElement .contentText {
		display:flex;
	}
	.namen_liste{
		_grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	}
	.schnellSuche.home .namen_liste {
	  padding:  2.5vh 0px 0px 0px!important;
	}
	 
}
@container schnellSucheContainer (min-width: 700px ) {
	.ausgabe .regionen_liste {
		_grid-template-columns: repeat(3,1fr);
	}
}
@container schnellSucheContainer (min-width: 700px ) {


	.presse_menu .presse_menu_btn, .presse_menu .ausgabe, .schnellSuche_title
	{
		padding-left: 0px;
		padding-right: 0px;
	}

	.namen_liste {
		_grid-template-columns: repeat(3,1fr);
	}
	.basicBoxElement{
		grid-template-columns: 60px 1fr;
	}
	.basicBoxElement .image {
		display:flex;
	}

	.schnellSucheList{
		grid-template-areas:
		"searchbut searchbut searchbut searchbut searchbut free"
		"ausgabe ausgabe ausgabe ausgabe ausgabe ausgabe";
		grid-template-columns: repeat(5, min-content);
		column-gap:20px;
	}	
	.schnellSucheElement{
		padding-right:1rem;
		height: var(--button-size);
	}
	.schnellSucheElement:after {
		width:calc(var(--button-size)*1);
		height:var(--button-size);
		aspect-ratio: 1/1;
		background-size: var(--button-size);
		_width: 100%;
		_background-size: 50px;
		right:calc(0px - var(--button-size));
		right:-20px;
		right:0px;
	}
	#neu_btn {order:0;}
	#ausgabe_artist {display:none;}
	 #ausgabe_neu {display:none;}
	 #ausgabe_ort {display:none;}
	 #ausgabe_datum {display:none;}
	 #ausgabe_genre {display:none;}
	 #ausgabe {display:flex;}


	 #genre_ausgabe {display:none;}
	 #ort_ausgabe {display:none;}
	 #region_ausgabe {display:none;}
	 #artist_ausgabe {display:none;}

	 #genre_sub_ausgabe {display:none;}
	 #ort_sub_ausgabe {display:none;}
	 #region_sub_ausgabe {display:none;}
	 #artist_sub_ausgabe {display:none;}
	
	/*  remove bottom-line for list-view  */
	 .schnellSucheElement {
		 _padding-bottom:.5vh;
		 _margin-bottom: .5vh;
		 border-bottom: 0px solid #000;
	 }
}
@container schnellSucheContainer (min-width: 1200px ) {
	.ausgabe .regionen_liste {
		_grid-template-columns: repeat(4,1fr);
		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	}
}

@container schnellSucheContainer (min-width: 1200px ) {
	.namen_liste {
		_grid-template-columns: repeat(4,1fr);
	}
	.schnellSuche.home .namen_liste {
	  padding:  2.5vh 0px 0px 0px!important;
	}
	
	 
}
.kuenstlerList{}
.kuenstlerElement{}
body {
	--pickme-font-size: clamp(.8rem, 3.6vw, 1.1rem);
}
/* ----------------------  KALENDER PICKER ---------------- */

.pickmeup {
	margin: 20px 0;
}
.pickmeup .pmu-instance {
	background-color:white;
	_border:1px solid #ddd;
	border-radius:0px!important;
	padding: 3vh 2vw!important;
	height:auto!important;
	margin:0px!important;
	width:auto!important;
	max-width:400px;
	margin-bottom: 3vh;
}
.pickmeup .pmu-instance nav {
	border-bottom:1px solid #ddd;
	align-items: center;
	width:100%;
	justify-content: space-between;
}
.pickmeup .pmu-instance nav .pmu-month {
	color:red;
	text-transform:uppercase;
	width:auto!important;
}
.pickmeup .pmu-instance nav .pmu-prev {}
.pickmeup .pmu-instance nav .pmu-prev,
.pickmeup .pmu-instance nav .pmu-next {
	content:" ";
	background-color: var(--semmel-red);
	_width: calc(var(--button-size)*.7)!important;
	aspect-ratio: 1 / 1;
	_height: calc(var(--button-size)*.7)!important;
	border-radius: 100em;
	overflow: clip;
	_background-image: linear-gradient(-90deg, #ff003f 0%, #90091F 29%, #ff003f 67%, #ff003f 100%);
	background-size: auto auto;
	_background-clip: border-box;
	background-size: 100% auto;
	transition: all .3s ease-in-out;
	animation: buttonAnimation 1s linear infinite;
	width: clamp(22px, 5vw, 30px)!important;
	height: clamp(22px, 5vw, 30px)!important;
}
.pickmeup .pmu-instance nav .pmu-next:after,
.pickmeup .pmu-instance nav .pmu-prev:after{
	content:"";
	background-color: white;
	mask-repeat: no-repeat;
	_width: calc(var(--button-size)*.7)!important;
	_height: calc(var(--button-size)*.7)!important;
	background-repeat: no-repeat;
	background-position: center center;
	transition: all .3s ease;
	position: relative;
	display: flex;
	mask-repeat: no-repeat;
	width: clamp(22px, 5vw, 30px)!important;
	height: clamp(22px, 5vw, 30px)!important;
}
.pickmeup .pmu-instance nav .pmu-next:after {
	mask-image: url('data:image/svg+xml;charset=UTF-8,<svg id="plus-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><polygon style="enable-background:accumulate; fill:white;" points="92.1,50.1 68.6,50.1 68.6,26.1 50.6,26.1 50.6,50.1 26.1,50.1 26.1,68.1,50.6,68.1 50.6,92.1 68.6,92.1 68.6,68.1 92.1,68.1"/></svg>'); 
}
	
.pickmeup .pmu-instance nav .pmu-prev:after {
	mask-image: url('data:image/svg+xml;charset=UTF-8,<svg id="minus-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><path style="enable-background:accumulate; fill:white;" display="inline" d="M26,68V50h66v18H26z"/></svg>'); 
}

.pickmeup .pmu-instance nav .pmu-prev:hover,
.pickmeup .pmu-instance nav .pmu-next:hover {
	width: calc(var(--button-size)*.8);
	height: calc(var(--button-size)*.8);
	background-origin: border-box;
	background-color:var(--semmel-red);
}
.pickmeup .pmu-instance nav .pmu-next:hover:after,
.pickmeup .pmu-instance nav .pmu-prev:hover:after{
	width: calc(var(--button-size)*.8);
	height: calc(var(--button-size)*.8);
}
	
.pickmeup .pmu-instance nav.pmu-day-of-week {
	display:grid;
	grid-template-columns: repeat(7, minmax(10px, 1fr));
	column-gap:.5vw;
	row-gap:.3vh;
	margin-bottom: 1vh!important;
}
.pickmeup .pmu-instance nav.pmu-day-of-week > div {
	color:var(--semmel-red);
	justify-items: center;
	font-size:var(--pickme-font-size);
	
}

.pickmeup .pmu-instance .pmu-years {}
.pickmeup .pmu-instance .pmu-years .pmu-button{
	
}
.pickmeup .pmu-instance .pmu-years .pmu-button.pmu-selected{}

.pickmeup .pmu-instance .pmu-months {}
.pickmeup .pmu-instance .pmu-months .pmu-button{}
.pickmeup .pmu-instance .pmu-months .pmu-button.pmu-selected{}

.pickmeup .pmu-instance .pmu-days {
	display:grid;
	grid-template-columns: repeat(7, minmax(10px, 1fr));
	column-gap:.5vw;
	row-gap:.3vh;
}
.pickmeup .pmu-instance .pmu-days > *{
	width:auto!important;
	aspect-ratio: 1 / 1;
	border-radius: 100em;
	justify-content: center!important;
	align-items: center!important;
	display: flex!important;
}

.pickmeup .pmu-instance .pmu-days .pmu-button{
	color: black;
	font-weight: 700;
	transition: all .3s ease-in-out;
	font-size: var(--pickme-font-size);
}
.pickmeup .pmu-instance .pmu-days .pmu-button:hover {
	background-color: #ff000030;
	color:white;
}
.pickmeup .pmu-instance .pmu-days .pmu-button.pmu-not-in-month{
	color:#999;
	font-weight: 300;
}
.pickmeup .pmu-instance .pmu-days .pmu-button.pmu-saturday{}
.pickmeup .pmu-instance .pmu-days .pmu-button.pmu-sunday{
	width:auto!important;
	aspect-ratio: 1 / 1;
	border-radius: 100em;
	justify-content: center;
	align-items: center;
	display: flex;
	background: var(--backgroundGrey);
	
}
.pickmeup .pmu-instance .pmu-days .pmu-button.pmu-today{
	color:#fff;
}
.pickmeup .pmu-instance .pmu-days .pmu-button.pmu-selected{}