.section-slider
{
    position: relative;
    margin: 12px 10px 12px 10px;
    box-shadow: 0 0 4px #999;
}

.section-content-container
{
    display: flex;
}

.section-content
{
    flex-grow: 1;
}

.slider-container
{
    display: flex;
    flex-flow: row; /* for transition */
    flex-wrap: wrap;
    justify-content: space-around;
}

.slider-slide
{
    display: flex;
    width: 0px;
    overflow: hidden;
    transition-property: width;
    transition-duration: 500ms;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;
    background: #ccc;
    background: linear-gradient(#ddd, #bbb);    
}

.slide-foto
{
    margin-top: 5px;
    margin-left: 5px;
    margin-right: 11px;
    margin-bottom: 11px; /* imageborder 2*3px und overflow visible wegen width 100% */
    padding: 0;
}

.slide-foto-img
{
    object-fit: contain;
    border-width: 3px;
    border-style: solid;
    border-radius: 3px;
    border-color: #e9e9e9;
    background-color: #f557b8;
}

.content-title
{
    margin: 0px;
    line-height: 28px;
}

.content-caption
{
    font-size: 22px;
    color: #000000;
    padding-left: 16px;
    padding-top: 5px;
    padding-bottom: 0px;
    margin-block-start: 0;
    margin-block-end: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}

.content-panel
{
    background: #ccc;
    background: linear-gradient(#ddd, #bbb);    
}

.content-foto
{
    padding: 10px;
    padding-top: 5px;
}

.content-foto-img
{
    margin: 5px;
    padding: 5px;
    background: #E9E9E9;  
    width: 98.5%;
}

.slide-description
{
    flex-shrink: 0;
    width: 300px;
    overflow: hidden;
    padding: 20px;
}

.slide-caption
{
    font-size: 24px;
    color: #00008b;
    margin-block-start: 0;
    margin-block-end: 0;
}

.slide-headline
{
    font-size: 14px;
    line-height: 20px;
    color: #494949;
    padding: 5px;
}

.slide-visible
{
    display: flex;
}

.slide-hidden
{
    display: none;
}