.hidden {
    display: none;
}

#search_results {
    display: flex;
    flex-flow: wrap;
    /*border-top: 1px solid #000;*/
    /*border-bottom: 1px solid #000;*/
    margin-bottom: 25px;
}

.ArtistElement
{
    display: flex;
    width: 25%;
    margin-top: 25px;
    margin-bottom: 25px;

}

.ArtistImage {
    width: 10%;
}

.ArtistImage img {
    width: 100%;
    height: auto;
}

.ArtistContent {
    width: 90%;
    padding-left: 10px;
}

.ArtistTitel {
    font-weight: bold;
    margin-bottom: 5px;
}

.tourTitle {
    margin-bottom: 10px;
}

.tourTitle.last {
    margin-bottom: 0px;
}

#ausgabe_genre, #ausgabe_ort, #ausgabe_artist {
    display: none;
}

.search_menu {
    display: flex;
}

.genreElement {
    margin-left: 5px;
}


.namen_liste_element
{
  /*
  border-bottom: 1px solid #000;
  cursor: pointer;
  padding-top: 5px;
  padding-bottom: 5px;
  text-align: center;
  */
}

.liste_title
{
  color: var(--semmel-red);
  font-weight: bold;
  text-align: center;
  margin-top: 25px;
}

#ausgabe .namen_liste
{
  _width: 560px;
  _display: block;
}



#tokens {
    _margin-top: 25px;
    display: flex;
}    

.token {
    margin-left: 25px;
}

.token_kontent {
    
    padding: 5px;
    
    
}
.close_genre_token, .close_artist_token, .close_tour_token, .close_ort_token {
    margin-left: 5px;
    cursor: pointer;
    background-color: #d51030;
    color: #fff;
    border-radius: 90%;
    width: 20px;
    display: inline-block;
    height: 20px;
    text-align: center;
}

.close_genre_token:hover, .close_artist_token:hover, .close_tour_token:hover, .close_ort_token:hover {
    background-color: #ccc;
}

.namen_liste {
  padding: 3vh 0;
}
.letter_liste {
    _margin-top: 25px;
    text-align: center;
    padding: 3vh 0;
}
.liste_title {
  display:none;
}
.select_letter {
    margin-left: 5px;
    cursor: pointer;
    background-color: #d51030;
    color: #fff;
    border-radius: 90%;
    width: 20px;
    display: inline-block;
    height: 20px;
    text-align: center;
}

.genreElement:hover  {
    color: #d51030;
}

.with_activs .namen_liste_element {
    color: #ccc;
}

.with_activs .namen_liste_element.active {
    color: #000;
}

.letter_liste.with_activs .select_letter {
    background-color: #ccc;
}

.letter_liste.with_activs .select_letter.active {
    background-color: #d51030;
}




#search_results {
  padding: 0px var(--sectionPadding);
  container-name: search_results_Container;
  container-type: inline-size;
}
#search_results .search_results_liste{
    gisplay:grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}
#search_results .ArtistElement {}
#search_results .ArtistElement .ArtistImage{}
#search_results .ArtistElement .ArtistContent{}





.suche.schnellSuche {
  padding: 30px 30px 2.5vh 30px!important;
}

.suche.schnellSuche .namen_liste{
  padding: 2.5vh 0px 2.5vh 0px!important;
}






.kuenstler-liste {
    padding:0px;
    transition: all 1.3s ease;
}

.kuenstler-liste .artist-section {
    display: grid;
    ---grid-template-columns: 1fr 1fr ;
    grid-gap: 3rem;
    xpadding: 15vh 0;
    transition: all .5s ease-in-out;
    padding:30px;
    padding-top:30vh;
    top:0px;
    position: relative;
}


.kuenstler_liste_element{   
    gap:1rem;
    display: flex;
    flex-direction: row;
}
.kuenstler_liste_element .kuenstler-liste-content {
    display: flex;
    flex-direction: column;
    -gap:20px;
}


.kuenstler_element_img{
    border-radius: 100em;
    overflow: hidden;
    max-width:120px;
    width:80px;
    height:auto;
    aspect-ratio:1/1;
    margin-bottom: var(--bottomGap);
    transition: all .3s ease-in-out;
}
.kuenstler_element_img img{
    width:100%;
    height:auto;
}
.kuenstler_element_img img {
    transition: all .5s ease-in-out;
}
.kuenstler_element_img:hover img {
    transform: scaleX(1.2) scaleY(1.2);
}

.kuenstler-liste .kuenstler-liste-content {
    padding: .5rem 0;
    width:100%;
}
.kuenstler-liste  .kuenstler_liste_element_name {
    text-transform:uppercase;
    font-family: 'Montserrat', sans-serif;
    font-weight:700;
    font-size: clamp(1.0em, 1.1vw, 1.7rem);	
    margin-bottom: var(--bottomGap);
    line-height:1.2em;
    align-self: center;
}
.kuenstler-liste  .kuenstler_liste_element_name:hover a{
    color: var(--semmel-red);
}
.kuenstler-liste  .kuenstler_liste_element_name a{
    text-decoration: none;
    transition: all .2s ease-in-out;
}
.kuenstler-liste  .kuenstler_liste_element_tour .tour_element {
    border-top:1px solid #00000050;
    width:auto;
    position: relative;
    padding-left:20px;
    line-height:clamp(1.2em, 2vw, 1.8rem);
    padding-top: top:clamp(0em, 0.3vh, .8rem);
    
}
.kuenstler-liste  .kuenstler_liste_element_tour .tour_element:before {
    width:calc(var(--button-size)*.5);
    height:calc(var(--button-size)*.5);
    background-repeat: no-repeat;
    background-position: left center!important;
    transition: all .3s ease;
    background-color: var(--semmel-red);
    right:auto;
    left:0;
    top:clamp(0em, 0.8vh, .8rem);
      
}
.kuenstler-liste  .kuenstler_liste_element_tour .tour_element a{
    text-decoration: none;
    font-size: clamp(.9em, 1vw, 1.1rem);
    line-height: 1.1rem;
    margin-top: clamp(0em, 0.6vh, .8rem);
    margin-bottom: clamp(0em, 0.6vh, .8rem);
    display: block;
}

.kuenstler-liste  .kuenstler_liste_element_tour .tour_element a .text2 {
    display: block;
    font-weight: 400;
}

.kuenstler-liste  .kuenstler_liste_element_tour .tour_element a .text3 {
    display: block;
    font-weight: 300;
    font-size: 15px;
    margin-bottom:10px;
}


.kuenstler-liste  .kuenstler_liste_element_tour .tour_element:hover a{
    color: var(--semmel-red);
}
/*
.kuenstler-liste .kuenstler-liste-content .kuenstler_liste_element_tour .tour_element a:hover:before{
    content:'TOURINFO: ';
}
*/
/*.kuenstler-liste .artist-section {display:none;}*/
.kuenstler-liste .artist-section {display:grid;}


.emptyTour {
    color:#00000050;
    font-size: clamp(.8em, 1vw, 1.2rem);
    margin-left: 0px;
}

.termine {
    width: 100%;
    margin-top: 50px;
}

.termine h2 {
    font-size: 48px!important;
}

.termine .tickets-termine-liste {
    margin-top: 0px;
}

.termine_artist_name {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(1.0em, 1.1vw, 1.7rem);
}


@container search_results_Container ( min-width: 200px ) {

    .kuenstler-liste .artist-section {
        padding: 4vh 0px;
        gap:2vh;
    }
    .kuenstler-liste .artist-section:before{
        top:4vh;
    }
    
    .sticky-menu {
        position: relative;
    }
    .kuenstler_element_img{
        width:60px;
    }
    .kuenstler-liste .kuenstler-liste-content {
        padding: 0;
    }
    .kuenstler_liste_element{
        display: grid;
        grid-template-columns: 60px auto; 
        grid-template-rows: auto auto; 
        gap: .2rem .5rem; 
        grid-template-areas: 
            "image name"
            "image content"; 
            
    }
    .kuenstler_img_link { grid-area: image; }
    .kuenstler_liste_element_name { grid-area: name; }
    .kuenstler_liste_element_tour { grid-area: content; _margin-left: 69px;}
    
    .emptyTour {
        color:#00000050;
        font-size: 15px;

    }
    
    
}

@container search_results_Container ( min-width: 700px ) {
    .kuenstler-liste .artist-section {
        grid-template-columns: 1fr 1fr ;
        gap:4em;
    }
    .sticky-menu {
        position: sticky;
    }
    .kuenstler_element_img{
        width:100px;
    }
    .kuenstler_liste_element{
        display: grid;
        grid-template-columns: 100px auto; 
        grid-template-rows: auto auto; 
        gap: .5rem .5rem; 
        grid-template-areas: 
            "image name"
            "image content"; 
        align-items: self-start;
        align-content: first baseline;           
           
    }
    .kuenstler_img_link { grid-area: image; }
    
    .kuenstler_liste_element_tour { grid-area: content; }
    .kuenstler_liste_element_name { grid-area: name; }

    .kuenstler_liste_element_tour { grid-area: content; margin-left: 0px;}
    .emptyTour {
        color:#00000050;
        font-size: clamp(.8em, 1vw, 1.2rem);

    }

    
    
}
@container search_results_Container ( min-width: 1200px ) {
    .kuenstler-liste .artist-section {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .kuenstler_element_img{ 
        width:120px;  
    }
    .kuenstler_liste_element{
        grid-template-columns: 120px auto; 
           
    }

    .kuenstler_liste_element_tour { grid-area: content; margin-left: 0px;}

    .emptyTour {
        color:#00000050;
        font-size: clamp(.8em, 1vw, 1.2rem);

    }
    

}