@charset "UTF-8";

@import url("/styles/core.css");

#mainContent
{
    width: 1280px;
}

#contentWrapper
{
    width: 1260px;
}

/******************/
/* Product Header */
/******************/
#productfilter-header
{
    border-bottom: 3px double #E5EAF0;
    height:        auto;
    margin:        10px 10px 10px 0;
}

#productfilter-header h1
{
    color:       #000000;
    font-size:   20px;
    font-weight: bold;
    padding:     10px 0 10px 10px;
}

#productfilter-header p
{
    line-height: 24px;
}

#productfilter-header p + p
{
    margin-top: 10px;
}

#productfilter-header .abstract
{
    padding: 0 10px 10px;
}

/******************/
/* Product Filter */
/******************/
#filter-result > h1,
#product-filter > h2
{
    display: none;
}

#filter-result > h2
{
	margin-left: 40px;
}

#filter-result h2,
#product-filter h2
{
    border: none;
}

#product-filter
{
    float:   left;
    width:   300px;
    padding: 0 10px 10px 10px;
}

.filter
{
    border-bottom:  3px double #E5EAF0;
    font-size:      15px;
    line-height:    17px;
    overflow:       hidden;
    padding:        10px 20px 20px 0;
    vertical-align: middle;
}

#filter-topics.filter
{
    padding-top: 0;
}

.filter form,
.filter h1
{
    margin-left: 10px;
}

.filter h1
{
    color:       #000000;
    font-size:   16px;
    font-weight: bold;
    line-height: 24px;
}

.filter li
{
    align-items: center;
    display:     flex;
}

.filter li:hover
{
    background-color: #ECECEC;
}

.filter li input
{
    margin-left: 5px;
}

.search-button-reset
{
    background:     transparent url("/pictures/global/close-button.png") no-repeat left center;
    border:         none;
    display:        block;
    font-size:      14px;
    height:         16px;
    line-height:    20px;
    margin:         10px 0 0 -2px;
    padding:        0 0 0 25px;
    vertical-align: middle;
}

.search-button-reset:hover
{
    background-image: url("/pictures/global/close-button-hover.png");
}

.search-checkbox,
.search-radio
{
    display: inline-block;
    margin:  0;
    padding: 0;
    cursor:  pointer;
}

.search-label
{
    color:       #5B5B5B;
    display:     inline-block;
    font-size:   16px;
    line-height: 28px;
    margin-left: 5px;
}

.search-label[id]
{
    background-attachment: scroll;
    background-color:      transparent;
    background-position:   left center;
    background-repeat:     no-repeat;
    background-size:       auto 28px;
    padding-left:          2em;
}

.search-label[id="st001000"]
{
    background-image: url(/pictures/category/st001000.svg);
}

.search-label[id="st002000"]
{
    background-image: url(/pictures/category/st002000.svg);
}

.search-label[id="st003000"]
{
    background-image: url(/pictures/category/st003000.svg);
}

.search-label[id="st004000"]
{
    background-image: url(/pictures/category/st004000.svg);
}

.search-label[id="st005000"]
{
    background-image: url(/pictures/category/st005000.svg);
}

.search-label[id="st006000"]
{
    background-image: url(/pictures/category/st006000.svg);
}

.search-label[id="st007000"]
{
    background-image: url(/pictures/category/st007000.svg);
}

.search-label[id="st008000"]
{
    background-image: url(/pictures/category/st008000.svg);
}

.search-label[id="st009000"]
{
    background-image: url(/pictures/category/st009000.svg);
}

.search-label[id="st010000"]
{
    background-image: url(/pictures/category/st010000.svg);
}

#filter-clear
{
	margin-left: 1.2em;
}

#filter-clear a
{
	margin-left: 1em;
    color:     #A7A7A7;
}

#filter-clear::before
{
    content:   "\e95d";
    color:     #A7A7A7;
    display:   inline-block;
    font-size: 17px;
    position:  relative;
    top:       2px;
    left:      10px;
}

.selected
{
    color: #000000;
}

#product-filter label.inputRadioBox input[type="radio"] + i::before
{
    top: 5px;
}

#product-filter label.inputRadioBox input[type="radio"]:checked + i::after
{
    top: 8px;
}

.filter .ui-selectmenu-button.ui-button
{
    width: 100px;
}

/******************/
/* Product Result */
/******************/
#filter-result
{
    float: left;
}

#filter-result .buttonDefault,
#filter-result a.buttonDefault,
#filter-result .buttonDefault:hover,
#filter-result .buttonDefault:active
{
    margin:  5px 0 0 0;
    padding: 0.3rem 16px;
}

.icon-arrowforwardoutline::before
{
    content:   "\e91e";
    display:   inline-block;
    font-size: 16px;
    position:  relative;
    top:       2px;
    left:      5px;
}

.itemlist
{
    width: 940px;
}

.itemlist h2
{
    border:         none;
    text-transform: none;
}

.itemlist td
{
    border-bottom:  1px solid #E8E9EB;
    vertical-align: top;
}

.itemlist ul,
.itemlist ol
{
    list-style:   disc outside none;
    padding-left: 16px;
}


.itemlist ul.mark,
.itemlist ol.mark
{
    list-style:   square outside url(/pictures/shop/icon-check.png);
    padding-left: 20px;
}

#filter-result .item
{
    border-bottom: 1px solid #E8E9EB;
}

#filter-result .itemlist .col_image
{
    padding:    20px 2px;
    text-align: center;
    width:      140px;
    float:      left;
}

#filter-result .itemlist .col_product
{
    padding:  20px 10px 20px 0;
    position: relative;
    width:    610px;
    float:    left;
}

#filter-result .itemlist .col_price
{
    padding:         20px 0;
    text-align:      left;
    width:           120px;
    height:          calc(100% - 40px);
    display:         flex;
    flex-direction:  column;
    justify-content: flex-end;
}

.itemlist .col_product p
{
    margin:  0;
    padding: 0;
}

.itemlist .col_price .comments
{
    font: normal 12px 'Fira Sans', sans-serif;
}

.itemlist .col_price .presetPrice
{
    color:     red;
    font-size: 12px;
}

.itemlist .col_price .presetPrice .cutPrice
{
    color:           #000000;
    text-decoration: line-through;
}

.itemlist .col_price .price
{
    font-size:   1.2em;
    font-weight: bold;
    margin:      0;
}

.itemlist .col_price .price strong
{
    font-size: 1.3em;
}

.itemlist .col_price .rating
{
    margin: 0 0 10px 0;
}

.itemlist .col_price .rating img
{
    height: 10px;
    margin: 4px 0 0;
}

.itemlist .col_price .rating span
{
    color:  #A7A7A7;
    float:  left;
    font:   normal 11px 'Fira Sans', sans-serif;
    margin: 2px 5px 0 0;
}

.itemlist .col_price .red
{
    color: red;
}

/**********/
/* Paging */
/**********/
#result-paging
{
    margin:     30px 0;
    text-align: center;
}

#result-paging a
{
    border:     1px solid #E5EAF0;
    font-size:  16px;
    padding:    2px 4px;
    text-align: center;
}

#result-paging li
{
    display: inline;
}

#result-paging li + li
{
    margin-left: 5px;
}

#result-paging ul
{
    text-align: center;
}

.current-page
{
    color:  #FF4000;
    cursor: default;
}

.current-page:hover
{
    text-decoration: none;
}

/****************/
/* Closing-Text */
/****************/
#closing-text
{
	margin-top: 20px;
	padding: 10px 0 10px 10px;

}
#closing-text h2
{
	border: none;
}

#closing-text ul
{
    padding-left: 30px;
    list-style: disc;
    list-style-position: outside;
    margin-bottom: 10px;
}

#closing-text p
{
	margin: 10px 0;
}

@media screen and (max-width: 959px)
{
    #mainContent
    {
        margin-top: 5px;
    }
    #contentWrapper
    {
        width: auto;
    }
    
    #product-filter
    {
        min-width: 500px;
        width: auto;
        border-radius: 5px;
        border: 2px solid #EEE;
        margin: 10px;
        float: left;
        padding: 0;
    }
    
    .lcToggleIcon
    {
        background: transparent url("/pictures/global/pfeil-down-12px.png") no-repeat scroll 0 0;
        width: 10px;
        height: 10px;
        display: block;
        float: right;
        margin-top: 5px;
    }
    
    .lcToggleActive
    {
        background: transparent url("/pictures/global/pfeil-12px_left.png") no-repeat scroll 0 0;
    }
    
    #filterline-one,
    #filterline-two
    {
        float: left;
        display: none;
    }
    
    #filterline-two
    {
        margin-right: 5px;
    }
    
    .filter
    {
        border: none;
    }
        
    #result-paging
    {
        clear: left;
    }
    
    #product-filter > h2
    {
        font-size: 18px;
        display: inline;
        background-color: #F2F2F2;
        height: 18px;
        color: #333333;
        font-weight: bold;
        padding: 5px 10px;
        border: 1px solid #EEE;
        display: inherit !important;
        margin: 0;
        cursor: pointer;
    }
    
    #filter-result .itemlist .col_price
    {
       justify-content: flex-start;
    }
}

@media screen and (max-width: 790px)
{
    #filter-result .itemlist
    {
        width: auto;
    }
    
    #filter-result .itemlist .col_product
    {
        padding: 20px 10px 10px 15px;
    }
}

@media screen and (max-width: 699px)
{
    #filter-result .itemlist .col_price
    {
        clear: left;
        float: right;
        padding: 0 10px 20px 0;
        width: auto;
    }
    
    #filter-result .itemlist .col_price .price_box,
    #filter-result .itemlist .col_price .shopButton
    {
        float: left;
        margin-right: 10px;
    }
    
    .buttonDefault, a.buttonDefault, .buttonDefault:hover, .buttonDefault:active
    {
        margin-top: 0px;
    }
}

@media screen and (max-width: 639px)
{
    #product-filter
    {
        min-width: 350px;
    }
    
    #filter-result .itemlist .col_image
    {
        padding-bottom: 0px;
        padding-right: 10px;
        width: auto;
    }
    #filter-result .itemlist .col_product
    {
        max-width: 410px;
        float: none;
        width: auto;
    }
}

@media screen and (max-width: 439px)
{
    #product-filter
    {
        min-width: 95%;
        margin: 5px;
    }
    
    #product-filter .filter
    {
        padding: 10px 0;
    }
    
    #filterline-one .search-label span
    {
        width: 100px;
    }
    
    #filterline-two .search-label span
    {
        width: 90px;
    }
    
    .search-label span
    {
        padding-left: 5px;
        -moz-hyphens: auto;
       -o-hyphens: auto;
       -webkit-hyphens: auto;
       -ms-hyphens: auto;
       hyphens: auto; 
    }

    .search-button-reset,
    .search-button-reset:hover
    {
        background: none;
        padding-left: 0px;
    }
        
    .filter form, .filter h1
    {
        margin-left: 5px;
    }
    
    #filter-result .itemlist .col_image img
    {
        width: 100px;
        height: auto;
    }
    
    #product-filter #priceToBox
    {
        display: block;
        margin-top: 5px;
    }
    
    #filterline-one
    {
        margin-right: 5px;
    }
    
    #filterline-one
    {
         width: calc( 56% - 10px );
    }
    #filterline-two
    {
         width: calc( 44% - 10px );
    }
}