/* Filter */
#products-page-filter { float: left; display: block; width: 300px; }

#filter-items {
         width: 100%;
         max-width: 300px;
         padding: 0;
         background: #fff;
         border: 0px solid var(--main-color)
         color: var(--font-color2);
}
#filter-items input[type="checkbox"] { display:block; }

#filter-items .filter-close { display: none; text-align: right; padding: 10px 5px 10px 0px; }
#filter-items .filter-close .icon { display: inline-block; background-size: 28px; cursor: pointer; }

#filter-items .filter-name { padding: 20px; border-bottom: 1px solid var(--grey-color); }
#filter-items .filter-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; font-size: 1.0em; user-select: none; }
#filter-items .filter-toggle:focus-visible { outline: 2px solid var(--grey-color); outline-offset: 4px; }

#filter-items .filter-arrow { width: 8px; height: 8px; border-right: 2px solid #555; border-bottom: 2px solid #555; transform: rotate(45deg); transition: transform 0.2s ease; margin-right: 3px; flex-shrink: 0; }
#filter-items .filter-name.closed .filter-arrow { transform: rotate(-45deg); }

#filter-items .filter-content { padding-top: 20px; }
#filter-items .filter-name.closed .filter-content { display: none; }


/* FARBFILTER */
#filter-items .color-options { display: grid; grid-template-columns: repeat(6, 30px); gap: 14px; }
#filter-items .color-option { display: block; position: relative; width: 30px; height: 30px; cursor: pointer; }
#filter-items .color-option input { position: absolute; opacity: 0; width: 30px; height: 30px; margin: 0; cursor: pointer; }
#filter-items .color-option span { display: block; width: 30px; height: 30px; box-sizing: border-box; background: var(--swatch); border: 1px solid rgba(0,0,0,0.4); border-radius: 0px; transition: outline 0.15s ease; }
#filter-items .color-option input:checked + span { outline: 2px solid var(--blue-color); outline-offset: 3px; }
#filter-items .color-option input:focus-visible + span { outline: 2px solid var(--blue-color); outline-offset: 3px; }


/* SELECTFILTER */
#filter-items .select-options { display: flex; flex-direction: column; gap: 12px; }
#filter-items .select-options label { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 0.9em; }
#filter-items .select-options input { width: 17px; height: 17px; margin: 0; accent-color: var(--blue-color); cursor: pointer; }


/* PREISFILTER */
#filter-items .price-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#filter-items .price-inputs label { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; position: relative; font-size: 0.9em; }
#filter-items .price-inputs label > span:first-child { width: 100%; }
#filter-items .price-inputs input { width: 100%; min-width: 0; box-sizing: border-box; padding: 10px 28px 10px 10px; border: 1px solid var(--grey-color-dark); border-radius: 5px; font-size: 1.0em; }
#filter-items .price-inputs .euro { position: absolute; right: 10px; bottom: 11px; color: var(--grey-color-dark); }

/* Doppelter Range-Slider */
#filter-items .range-slider { position: relative; width: calc(100% - 0px); height: 30px; margin: 15px 0px 15px -10px; border: 0px var(--grey-color) solid; }
#filter-items .range-slider::before { content: ""; position: absolute; top: 15px; left: 10px; right: 0; height: 4px; background: var(--blue-color-light); border-radius: 4px; }

#filter-items .range-slider input[type="range"] { position: absolute; inset: 0; width: 100%; height: 24px; margin: 0; background: none; appearance: none; -webkit-appearance: none; pointer-events: none; border:0px; }
#filter-items .range-slider input[type="range"]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 17px; height: 17px; border-radius: 50%; background: #fff; border: 2px solid var(--blue-color); box-shadow: 0 1px 4px #0002; pointer-events: auto; cursor: grab; }
#filter-items .range-slider input[type="range"]::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; background: #fff; border: 2px solid var(--blue-color); box-shadow: 0 1px 4px #0002; pointer-events: auto; cursor: grab; }
#filter-items .range-slider input[type="range"]:focus-visible { outline: 2px solid var(--blue-color); outline-offset: 2px; }
#filter-items .range-labels { display: flex; justify-content: space-between; font-size: 12px; color: #555; margin-top: 8px; }


/* ABSENDEBUTTON */
#filter-items .filter-submit { padding: 20px; }
#filter-items .filter-submit button { display: block; width: 100%; padding: 13px 10px; margin-bottom: 20px; border: 0; border-radius: 5px; background: var(--blue-color); color: #fff; font-size: 15px; font-weight: bold; cursor: pointer; transition: background 0.2s ease; }
#filter-items .filter-submit button:hover { background: var(--blue-color-dark); }


/* Produktseite */
#products-page { float: right; display: block; width: calc(100% - 300px - 20px); }

#products-page .title { display: block; width: 100% !important; overflow: hidden; font-size: 1.2em; font-weight: bold; color: var(--main-color); padding: 0px 0px 10px 0px; }

#products-page .products-page-bar { display: block; width: 100%; }
#products-page .products-page-bar .show-filter { float: left; cursor: pointer; display: none; width: 30px; height: 30px; padding: 5px; margin-right: 4px; background: var(--main-color) url(../images/icon_filter_hover.png) center center no-repeat; background-size: 22px; border-radius: 50px; }

#products-page .products-page-bar .show-list-block { float: left; cursor: pointer; display: block; width: 90px; height: 40px; }
#products-page .products-page-bar .show-list-block a { display: block; float: left; width: 28px; height: 28px; padding: 4px; margin-right: 4px; background-color: var(--main-color); background-position: center center; background-repeat: no-repeat; background-size: 22px; border-radius: 50px; border: 2px var(--main-color) solid; }
#products-page .products-page-bar .show-list-block a.icon.list { background-image: url(../images/icon_list_hover.png); }
#products-page .products-page-bar .show-list-block a.icon.list:hover,
#products-page .products-page-bar .show-list-block a.icon.list.active { background-color: #FFFFFF; border-color: var(--main-color); background-image: url(../images/icon_list.png); }
#products-page .products-page-bar .show-list-block a.icon.list-block { background-image: url(../images/icon_list-block_hover.png); }
#products-page .products-page-bar .show-list-block a.icon.list-block:hover,
#products-page .products-page-bar .show-list-block a.icon.list-block.active { background-color: #FFFFFF; border-color: var(--main-color); background-image: url(../images/icon_list-block.png); }

#products-page .products-page-bar .sort { float: right; display: block; width: auto; height: 30px; padding: 5px 15px; font-size: 0.8em; }
#products-page .products-page-bar .sort span { float: left; display: inline-block; padding: 8px 0px 0px 0px; margin-right: 10px; color: var(--second-color); }
#products-page .products-page-bar .sort select { float: right; cursor: pointer; padding: 6px 2px; background: transparent; color: #FFFFFF; border: 0px transparent solid; }
#products-page .products-page-bar .sort select option { padding: 1px 2px; background: transparent; color: #FFFFFF; }


/* Produkte */
#products-page .products-page-items { margin: 20px 0px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
#products-page .products-page-items .item { padding: 10px; text-align: center; }
#products-page .products-page-items .item a { display: inline-block; text-align: center; text-decoration: none; text-transform: uppercase; font-size: 0.8em; }
#products-page .products-page-items .item a.product { font-weight: bold; font-size: 1.1em; color: var(--font-color2); padding-top: 10px; text-transform: none; }
#products-page .products-page-items .item a img { width: calc(100% - 0px); height: auto; max-height: 200px; margin: 10px auto; }
#products-page .products-page-items .item a .price { display: block; font-weight: bold; font-size: 1.1em; text-align: center; margin: 10px auto; }
#products-page .products-page-items .item a:hover { color: var(--font-color); }
#products-page .products-page-items .item sup { font-size: 0.7em; }


/* Top Produkte */
#site-topproducts { margin-bottom: 40px; }
#site-topproducts h3 { display: inline-block; }
#site-topproducts .items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
#site-topproducts .items .item { display: table; padding: 5px; }
#site-topproducts .items .item .image { display: table-cell; width: 100px !important; padding-right: 10px !important; text-align: left; }
#site-topproducts .items .item .image img { width: calc(100% - 0px); height: auto; max-width: 100px; }
#site-topproducts .items .item a { display: table-cell; width: calc(100% - 100px - 10px) !important; vertical-align: middle; text-decoration: none; font-weight: bold; color: var(--font-color2);}
#site-topproducts .items .item a:hover { text-decoration: underline; color: var(--font-color); }




/*
######################################
        Media-Queries
######################################
*/

@media (max-width: 1240px) {
}
@media (max-width: 1020px) {
         #products-page-filter { width: 200px; }
         #products-page { width: calc(100% - 200px - 20px); }

         #filter-items .filter-name { padding: 10px 15px; }
         #filter-items .color-options { display: grid; grid-template-columns: repeat(4, 30px); gap: 12px; }
         #filter-items .select-options label { font-size: 0.8em; }

         #filter-items .price-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
         #filter-items .price-inputs input { padding: 5px 5px 5px 5px; font-size: 1.0em; }
         #filter-items .price-inputs .euro { display: none; }
}

@media (max-width: 920px) {

}

@media (max-width: 800px) {
         #products-page .title { font-size: 1.1em; }
         #products-page .products-page-bar .sort { width: auto; padding: 4px 15px; font-size: 0.8em; }
         #products-page .products-page-bar .sort span { display: none; }

         #products-page .products-page-items { margin: 20px 0px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
         #site-topproducts .items { grid-template-columns: repeat(2, 1fr); gap: 15px; }
}

/* Switch zu Mobile */
@media (max-width: 640px) {
         #products-page .title { font-size: 1.0em; }

         #products-page-filter { display: none; position: fixed; left: 0px; bottom: 0px; top: 0px; width: 300px; }

         #filter-items { height: 100vh !important; border-radius: 0px !important;  box-shadow: 0px 0px 30px 0px rgba(0, 65, 120, 0.35); overflow-y: scroll; }
         #filter-items .filter-close { display: block; }
         #filter-items .filter-name { padding: 10px 20px; }
         #filter-items .color-options { display: grid; grid-template-columns: repeat(6, 32px); gap: 14px; }

         #products-page { width: calc(100% - 0px); }
         #products-page .products-page-bar .show-filter { display: block; }

}

@media (max-width: 520px) {
         #site-topproducts .items { display: grid; grid-template-columns: repeat(1, 1fr); gap: 15px; }
         #products-page .products-page-items { grid-template-columns: repeat(2, 1fr); gap: 12px; font-size: 0.9em; }
}

@media (max-width: 420px) {
         #filter-items { max-width: none; }
         #products-page .products-page-items { grid-template-columns: repeat(1, 1fr); gap: 12px; font-size: 0.9em; }
}