:root {
    --boxheight: 50px;
    --widthbox:calc( (100vw/4) - 1vw );
    
    --heigtbox:calc( ((100vw/4) - 1vw) + var(--boxheight) );
    --heigtboxsmal:calc( ( ((100vw/4) - 1vw) + var(--boxheight) ) / 4 );

    --heigtboxklein:calc( ( ( ((100vw/8) - 1vw) + var(--boxheight) ) / 4 ) + 4.8vw );

    --halfsize:calc( var(--heigtbox) / 2 );
    --halfsize_neg:calc( ( var(--heigtbox) / 2 ) -  var(--heigtbox) );
}
/**
@media screen and (max-width: 1024px) {
    :root {
        --widthbox:calc( (100vw/2) - 1vw );
        --heigtbox:calc( ((100vw/2) - 1vw) + var(--boxheight) );
        --heigtboxsmal:calc( ( ((100vw/4) - 1vw) + var(--boxheight) ) / 4 );

        --heigtboxklein:calc( ( ( ((100vw/4) - 1vw) + var(--boxheight) ) / 2 ) + 4.7vw );
    }
}
@media screen and (max-width: 600px) {
    :root {
        --widthbox:calc( (100vw/1) - 1vw );
        --heigtbox:calc( ((100vw/1) - 1vw) + var(--boxheight) );
        --heigtboxsmal:calc( ( ((100vw/4) - 1vw) + var(--boxheight) ) / 4 );

        --heigtboxklein:calc( ( ( ((100vw/4) - 1vw) + var(--boxheight) ) / 2 ) + 4.7vw );
    }
}
**/


#listing24b_2{
    width: 100%;
    font-size:15px;
	line-height: 19px;
    padding:0px;
    margin: 0px;

    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;

    -webkit-transition:all 0s;
	-moz-transition:all 0s;
	-o-transition:all 0s;
	transition:all 0s; 
}
#listing24b_2 .list24_coverTitle,
#listing24b_2 .list24_cover{
    overflow: hidden;
    position: relative;

    width: var(--widthbox);
    height: var(--heigtbox);

    display:inline-block;

    margin-bottom: 1vw;
    margin-right:1vw;

    

    float: left;
    vertical-align: top!important;

    /**
    border: 1px solid #ff0000;
    **/
}


#listing24b_2 .list24_cover.text,
#listing24b_2 .list24_cover.application,
#listing24b_2 .list24_cover.audio,
#listing24b_2 .list24_cover.video{
    height: var(--heigtboxklein);
}

#listing24b_2 .list24_coverCount{
    margin-right:0.8vw;
}

#listing24b_2 .list24_coverTitle.infotext{
    /**
    width: var(--widthbox);
    **/
    width: calc( 100% - ( 0.8vw * 2 ) );

    height: var(--heigtboxsmal);
    min-height: var(--heigtboxsmal);
    max-height: var(--heigtboxsmal);
    
    padding:10px;
    overflow: hidden;
    overflow-y: auto;

    background-color: var(--color-hauptfarbe);
    vertical-align: top;
}

#listing24b_2 .list24_cover .info{
    position: absolute;
    bottom:0px;
    left: 0px;
    width: 100%;
    line-height: 20px;

    height: var(--boxheight);
    min-height: var(--boxheight);
    
    max-height: var(--heigtbox);

    background-color: var(--color-hauptfarbe);
    overflow: hidden;
    padding: 5px 5px;

    overflow: hidden;
    overflow-y: scroll;

    font-size: 0.8em;
}
#listing24b_2 .list24_cover:hover > .info{
    background-color: var(--color-hauptfarbe_2);
}

#listing24b_2 .list24_cover .cont{
    text-align: center;
    width: 100%;
    height: var(--widthbox);
    line-height: var(--widthbox);
    font-size: 1.5em;
    padding:0px;
    overflow: hidden;
    cursor: pointer;
    background-color: var(--color-sehrdunkel-20);
}
#listing24b_2 .list24_cover .cont .overlay{
    position:absolute;
    z-index: 99;
    width: 100%;

    text-shadow: 1px 1px 1px black;	
}


#listing24b_2 .list24_cover .cont *{
    width: auto;
    height: var(--widthbox);
}




#listing24b_2 .list24_cover.bigsize,
#listing24b_2 .list24_cover.bigsize .cont{
    text-align: center;
    width: calc( (100vw/1) - 1vw );
    height: calc( ((100vh/1) - 10vh) );

    display:inline-block;

    margin-bottom: 1vw;
    margin-right:0;
}

#listing24b_2 .list24_cover.bigsize .cont *{
    text-align: center;
    width: auto;
    height: calc( ((100vh/1) - 5vh) - var(--boxheight) );
    max-height: calc( ((100vh/1) - 5vh) - var(--boxheight) );
}

#listing24b_2 .list24_cover.audio{
    background-image:url('/src/img/sound.png');
	background-repeat:no-repeat;
	background-position:top+5px center;
	background-size:20px;
}
#listing24b_2 .list24_cover .cont .audiocontent{
    display: inline-block;
    padding:1px!important;
    margin: 0px!important;
    width: 100%!important;
    height: 100%!important;
    vertical-align: middle!important;
    text-align: center!important;
}
#listing24b_2 .list24_cover .cont .audiocontent audio{
    display: inline-block;
    /** line-height: 15px!important; **/ 
  
    padding:1px!important;
    margin: 0px!important;
    width: 100%!important;
    height: auto!important;

    /** margin-top: var(--halfsize_neg)!important; **/
    
    vertical-align: top!important;
    text-align: center!important;
}