/*
stubeauftritte.css
URI: http://www.steckdesign.ch/
Author: steckdesign.ch
Author URI: http://www.steckdesign.ch/
Version: 1.0
*/

.sp_flex_wrapper { display: flex; flex-wrap: wrap;
    gap: calc( var( --fontsize ) * 2 ) calc( var( --fontsize ) * 2 );
 }

.flex_col_2 { flex: 0 0 100%; }
.flex_col_3 { flex: 0 0 100%; }
.flex_col_4 { flex: 0 0 100%; }
.flex_col_5 { flex: 0 0 100%; }

  @media (min-width: 576px) { 
    .flex_col_2 { flex: 0 0 100%; }
    .flex_col_3 { flex: 0 0 100%; }
    .flex_col_4 { flex: 0 0 100%; }
    .flex_col_5 { flex: 0 0 100%; }
  }
  @media (min-width: 768px) { 
    .flex_col_2 { flex: 0 0 49%; }
    .flex_col_3 { flex: 0 0 47%; }
    .flex_col_4 { flex: 0 0 49%; }
    .flex_col_5 { flex: 0 0 49%; }
  }
  @media (min-width: 992px) { 
    .flex_col_2 { flex: 0 0 49%; }
    .flex_col_3 { flex: 0 0 46%; }
    .flex_col_4 { flex: 0 0 49%; }
    .flex_col_5 { flex: 0 0 30%; }
  }
  @media (min-width: 1200px) { 
    .flex_col_2 { flex: 0 0 49%; }
    .flex_col_3 { flex: 0 0 30.33%; }
    .flex_col_4 { flex: 0 0 24%; }
    .flex_col_5 { flex: 0 0 24%; }
  }
  @media (min-width: 1400px) {  
    .flex_col_2 { flex: 0 0 49%; }
    .flex_col_3 { flex: 0 0 30.6666%; }
    .flex_col_4 { flex: 0 0 24%; }
    .flex_col_5 { flex: 0 0 19%; }
  }
 

.sp_auftritt {
    display:grid;
    align-items: center;
    background-color: rgba( var(--black), 0.05 );
    padding: calc( var( --fontsize ) * 1.3);
    border-top: 1px solid rgba( var(--white), 0.3 );
    border-bottom: 1px solid rgba( var(--black), 0.3 );
}
@media (min-width: 576px) { 
    .sp_auftritt {
        aspect-ratio: 1 / 1;
    }
}
@media (min-width: 768px) { 
    .sp_auftritt {
        aspect-ratio: 1 / 1.2;
    }
}

.sp_tag {
    font-size: calc( var( --fontsize ) * 0.9 );
    text-transform: uppercase;
    letter-spacing: 1px;
    /* color:rgb(12, 12, 63); */
    color: var(--yelloworange-200);
    margin-bottom: calc( var( --fontsize ) * 0.25 );
}
.sp_datum {
    font-size: calc( var( --fontsize ) * 1.4 );
    font-weight: 600;
    /* color:rgb(255, 255, 255); */
    color: rgba( var(--white), 1 );
    /* color: var(--yelloworange-200); */
    /* color: rgba( var(--yelloworange-200), 1.0 ); */
    margin-bottom: calc( var( --fontsize ) * 0.5 );
}
.sp_zeit {
    letter-spacing: 1px;
    /* color:rgb(12, 12, 63); */
    color: var(--yelloworange-200);
    /* color: rgba( var(--white), 0.75 ); */
    margin-bottom: calc( var( --fontsize ) * 0.5 );
}
.sp_kurzinfo {
    font-size: calc( var( --fontsize ) * 1.4);
    font-weight: 600;
    line-height: 1.2;
    /* color:rgb(255, 255, 255); */
    color: rgba( var(--white), 1 );
    /* color: var(--yelloworange-200); */
    /* color: rgba( var(--yelloworange), 1.0 ); */
    margin-top: calc( var( --fontsize ) * 1 );
    margin-bottom: calc( var( --fontsize ) * 1 );
}
.sp_link {
    margin-top: calc( var( --fontsize ) * 0.5 );
    margin-bottom: calc( var( --fontsize ) * 0.5 );
}
/* .sp_link a { color:rgb(12, 12, 63);; } */
.sp_link a { color: var(--yelloworange-200); }
.sp_link a:hover { color: rgba( var(--yelloworange), 1.0 ); }

.sp_flyer {
    margin-top: calc( var( --fontsize ) * 0.5 );
    margin-bottom: calc( var( --fontsize ) * 0.5 );

}