/* Intro-Breite begrenzen auf maximale Breite der Kästchen (sieht sonst komisch aus)
- falls das Layout irgendwann flexibler ist und die Kacheln auch die volle Seitenbreite ausfüllen, kann das weg */
#Main .Intro { max-width: 1100px; }

#StyleImagesContainer {
    width: 100%;
    margin-left: -5px;
    margin-right: -5px;
}

#StyleImagesContainer .StyleImage {
    position: relative;
    display: inline-block;
    width: 260px;
    height: 260px;
    margin: 0 5px 10px 5px; /* bei Anpassungen auch margin von #StyleImagesContainer anpassen! */
    overflow: hidden;
}
        
#StyleImagesContainer .StyleImage img {
    width: 100%;
}

#StyleImagesContainer .StyleImage div.Overlay {
    position: absolute;
    left: 0;
    top: 208px; /* bei Änderung auch im Script anpassen! */
    width: 100%;
    height: 100%;
    color: #FFF;
    background-color: rgb(77,77,77); /* #4d4d4d - Fallback für Browser, die kein RGBa unterstützen */
    background-color: rgba(0,0,0, 0.4); /* LESS-Variable @overlay-dark */
    background-color: transparent\9; /* "backslash-nine hack" für IE<9 */
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#B24D4D4F', EndColorStr='#B24D4D4F'); /* für IE 8 */
    zoom: 1;
}

#StyleImagesContainer .StyleImage div.Overlay > div {
    padding: 15px 20px;
}
        
#StyleImagesContainer .StyleImage div.Overlay > div.Name {
    font-size: 22px; /* für Redesign 19px; LESS-Variable @font-size-large */
    font-family: "HelveticaNeueLT-Thin", Helvetica, sans-serif;
    font-weight: normal;
    line-height: 1em;
}

#StyleImagesContainer .StyleImage div.Overlay > div.Description {
    font-size: 13px; /* LESS-Variable @font-size-small */
    line-height: 1.3;
}


/* --- für Redesign-LESS: die Bilder kleiner, 2 Reihen á Bilder; erst Testen, inkl. Styles von oben bzw. durch die unten ersetzen 

#StyleImagesContainer {    
    display: flex;
    flex-flow: row wrap;
    margin-left: 0;
    margin-right: 0;

    .StyleImage { 
        position: relative;
        display: inline-block;
        width: 232px;
        height: 232px;
        margin: 0 5px 10px 5px; 
        overflow: hidden;    

        img { width: 100%; }
    }
    
    .StyleImage div.Overlay {
        position: absolute;
        left: 0;
        top: 200px; // auch im Script anpassen!
        width: 100%;
        height: 100%;

        & > { padding: 7px 7px 7px 15px; } // evtl. um mehr Abstand zu gewinnen, Text kürzen?
    }
}
*/