:root {
--icon_mask_funktion_antibakteriell: url('data:image/svg+xml,');
--icon_mask_funktion_blutbestaendig:url('data:image/svg+xml,');
--icon_mask_funktion_chlorwasserbestaendig: url('data:image/svg+xml,');
--icon_mask_funktion_desinfektionsmittelbestaendig: url('data:image/svg+xml,');
--icon_mask_funktion_fleckschutz: url('data:image/svg+xml,');
--icon_mask_funktion_haustierfreundlich: url('data:image/svg+xml,');
--icon_mask_funktion_hohe-beanspruchung: url('data:image/svg+xml,');
--icon_mask_funktion_imo: url('data:image/svg+xml,');
--icon_mask_funktion_nachhaltig: url('data:image/svg+xml,');
--icon_mask_funktion_outdoor: url('data:image/svg+xml,');
--icon_mask_funktion_salzwasserbestaendig: url('data:image/svg+xml,');
--icon_mask_funktion_schweissbestaendig: url('data:image/svg+xml,');
--icon_mask_funktion_schwerentflammbar: url('data:image/svg+xml,');
--icon_mask_funktion_urinbestaendig: url('data:image/svg+xml,');
--icon_mask_funktion_waschbar: url('data:image/svg+xml,');
--icon_mask_funktion_wasserdicht: url('data:image/svg+xml,');
--icon_mask_checkmark: url('data:image/svg+xml,');
}
#header.under_hpk_overlay{
z-index: 1;
}
.hpk_product_list{
.search_overlay#hpk_search_overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.90);
backdrop-filter: blur(25px);
display: flex;
flex-direction: column;
justify-content: space-between;
z-index: 4;
&.hidden {
display: none;
visibility: hidden;
pointer-events: none;
height: 0;
width: 0;
}
.top_wrapper {
border-bottom: 1px solid rgba(3, 24, 52, 0.10);
> .inner {
width: auto;
display: flex;
align-items: center;
justify-content: flex-end;
.close_button {
display: flex;
gap: 10px;
align-items: center;
font-weight: 300;
svg {
width: 1.35em;
}
&:hover {
cursor: pointer;
text-decoration: underline;
}
}
}
}
.search_wrapper {
display: flex;
flex-direction: row;
padding-bottom: 20px;
border-bottom: 1px solid #031834;
.search_input_wrapper {
flex: 1;
.search_input#search_text_input {
width: 100%;
}
}
}
.suggestions_wrapper {
background: #0070C5;
min-height: 25%;
.suggestion_text {
text-transform: uppercase;
display: block;
margin-bottom: 40px;
}
.suggestions {
display: flex;
flex-wrap: wrap;
gap: 40px;
color: white;
font-weight: 300;
.suggestion {
display: flex;
align-items: center;
gap: 20px;
&:hover {
cursor: pointer;
text-decoration: underline;
}
svg {
width: 30px;
}
}
}
}
}
.search_input_wrapper{
position: relative;
.search_input {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
border: none;
padding-left: 1.5em;
width: 150px;
min-width: fit-content;
font-weight: 300;
}
}
.search_filter_section{
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
gap: 20px;
.search_wrapper{
display: flex;
flex-direction: row;
column-gap: 20px;
.searchButton{
transition: 0.3s;
width: fit-content;
height: fit-content;
opacity: 1;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
}
.searchButton.hiddenSearchButton {
width: 0;
height: 0;
opacity: 0;
overflow: hidden;
}
}
}
#hpk_product_filters {
position: fixed;
top: 0;
bottom: 0;
width: 100%;
height: auto;
right: -100%; /* Start außerhalb des Bildschirms */
box-shadow: -2px 0 10px rgba(0,0,0,0.2);
transition: right 0.5s ease, opacity 0.5s ease;
opacity: 0;
pointer-events: none;
z-index: 10;
.filter_underlay{
height: 100%;
width: 100%;
background: rgba(0, 0, 0, 0.42);
}
.filter_foreground{
position: absolute;
top: 0;
right: -50%;
bottom: 0;
width: 92%;
max-width: 700px;
background: white;
overflow-y: auto;
display: grid;
grid-template-rows: 1fr auto;
transition: right 0.5s ease;
max-height: 100%;
overflow-y: scroll;
#hpkStartFilterSearch {
position: absolute;
bottom: 0;
border-top: 20px solid white;
}
.filter_foreground_helper {
max-height: 100%;
overflow-y: scroll;
}
.filter_header{
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 10px;
.delete-filters {
pointer-events: none;
color: rgba(3, 24, 52, 0.40);
text-transform: uppercase;
font-size: 1rem;
&.active {
text-decoration: underline;
pointer-events: all;
&:hover {
cursor: pointer;
color: #031834;
}
}
}
}
.filter_tags {
display: flex;
flex-direction: row;
gap: 20px;
flex-wrap: wrap;
.filter_tag, .hidden_tag {
padding: 8px;
font-weight: 300;
background-color: #EDEDED;
font-size: 0.813rem;
position: relative;
&:hover {
text-decoration: underline;
font-weight: 600;
cursor: pointer;
}
&:after {
position: relative;
content: url('data:image/svg+xml,');
display: inline-block;
width: 0.7em;
height: auto;
margin-left: 1.5em;
}
}
.hidden_tag{
visibility: hidden;
opacity: 0;
pointer-events: none;
&:after {
display: none;
height: 0;
width: 0;
content: "";
}
}
}
.accordion-filters-wrapper{
.content-accordion {
.filter_list {
display: grid;
gap: 20px;
grid-template-columns: repeat(auto-fit, minmax(200px, auto));
&#hpk_farbe_filter {
row-gap: 15px;
grid-template-columns: repeat(auto-fit, minmax(130px, auto));
}
&#hpk_funktion_filter {
.filter_option {
.checkmark_container {
display: none;
visibility: hidden;
}
.filterButton {
display: flex;
align-items: center;
gap: 10px;
&::before {
content:'';
display: inline-block;
width: 1.65em;
height: 1.65em;
min-height: 100%;
background-color: #005CA9;;
mask-position: center;
mask-repeat: no-repeat;
mask-size: contain;
mask-size: 100% 100%;
pointer-events: none;
}
}
}
.funktion_schwerentflammbar > .filterButton::before {
mask-image: var(--icon_mask_funktion_schwerentflammbar);
}
.funktion_imo > .filterButton::before {
mask-image: var(--icon_mask_funktion_imo);
}
.funktion_outdoor > .filterButton::before {
mask-image: var(--icon_mask_funktion_outdoor);
}
.funktion_fleckschutz > .filterButton::before {
mask-image: var(--icon_mask_funktion_fleckschutz);
}
.funktion_desinfektionsmittelbeständig > .filterButton::before {
mask-image: var(--icon_mask_funktion_desinfektionsmittelbestaendig);
}
.funktion_antibakteriell > .filterButton::before {
mask-image: var(--icon_mask_funktion_antibakteriell);
}
.funktion_wasserdicht > .filterButton::before {
mask-image: var(--icon_mask_funktion_wasserdicht);
}
.funktion_salzwasserbeständig > .filterButton::before {
mask-image: var(--icon_mask_funktion_salzwasserbestaendig);
}
.funktion_chlorwasserbeständig > .filterButton::before {
mask-image: var(--icon_mask_funktion_chlorwasserbestaendig);
}
.funktion_urinbeständig > .filterButton::before {
mask-image: var(--icon_mask_funktion_urinbestaendig);
}
.funktion_schweißbeständig > .filterButton::before {
mask-image: var(--icon_mask_funktion_schweissbestaendig);
}
.funktion_blutbeständig > .filterButton::before {
mask-image: var(--icon_mask_funktion_blutbestaendig);
}
.funktion_sehrhohebeanspruchung > .filterButton::before {
mask-image: var(--icon_mask_funktion_hohe-beanspruchung);
}
.funktion_nachhaltig > .filterButton::before {
mask-image: var(--icon_mask_funktion_nachhaltig);
}
.funktion_haustierfreundlich > .filterButton::before {
mask-image: var(--icon_mask_funktion_haustierfreundlich);
}
.funktion_waschbar > .filterButton::before {
mask-image: var(--icon_mask_funktion_waschbar);
}
}
.filter_option {
list-style-type: none;
width: fit-content;
hyphens: auto;
background-color: rgba(0,0,0,0);
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: 10px;
&:hover {
cursor: pointer;
.filterButton {
text-decoration: underline;
}
}
.checkmark_container {
content: "";
display: inline-block;
height: 0.8em;
width: 0.8em;
border-radius: 3px;
border: 1px solid #031834;
pointer-events: none;
}
&:has(.activeFilter) {
.checkmark_container {
background: #031834;
content: var(--icon_mask_checkmark);
display: inline-block;
padding: 1px;
}
}
.filterButton {
&:hover {
cursor: pointer;
text-decoration: underline;
}
&.activeFilter {
font-weight: 600;
text-decoration: underline;
}
}
&.filter_farbe{
.checkmark_container {
display: none;
visibility: hidden;
}
.filterButton {
display: flex;
flex-wrap: nowrap;
align-items: center;
&::before {
content: "";
display: inline-block;
height: 0.9em;
width: 0.9em;
margin-right: 7px;
aspect-ratio: 1;
border-radius: 100%;
border: 1px solid #EDEDED;
pointer-events: none;
}
}
&.farbe_weiß > .filterButton::before{
background-color: white;
}
&.farbe_beige > .filterButton::before{
background-color: #D0CEC4;
}
&.farbe_braun > .filterButton::before{
background-color: #4B0E0F;
}
&.farbe_grün > .filterButton::before{
background-color: #34812E;
}
&.farbe_blau > .filterButton::before{
background-color: #0070C5;
}
&.farbe_rot > .filterButton::before{
background-color: #C50000;
}
&.farbe_pink > .filterButton::before{
background-color: #E100CF;
}
&.farbe_lila > .filterButton::before{
background-color: #8D00C4;
}
&.farbe_orange > .filterButton::before{
background-color: #FF5500;
}
&.farbe_gelb > .filterButton::before{
background-color: #FFE100;
}
&.farbe_grau > .filterButton::before{
background-color: #737373;
}
&.farbe_schwarz > .filterButton::before{
background-color: #000000;
}
}
}
}
.double_range_slider_box {
position: relative;
min-width: 200px;
width: 100%;
height: auto;
padding-top: 20px;
padding-bottom: 20px;
background: white;
display: flex;
justify-content: center;
align-items: center;
border-radius: 20px;
.double_range_slider {
width: 100%;
height: 3px;
position: relative;
background-color: #dddddd;
border-radius: 20px;
}
.range_track {
height: 100%;
position: absolute;
border-radius: 20px;
background-color: #031834;
}
.minvalue {
position: absolute;
padding-left: 7px;
transform: translate(0, -100%);
left: 0;
font-size: 0.875rem;
bottom: 5px;
transition: left 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
will-change: left, transform;
}
.maxvalue {
position: absolute;
padding-right: 7px;
transform: translate(0, -100%);
right: 0;
font-size: 0.875rem;
top: 5px;
transition: right 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
will-change: right, transform;
}
input {
position: absolute;
width: 100%;
height: 5px;
background: none;
pointer-events: none;
-webkit-appearance: none;
-moz-appearance: none;
top: 50%;
transform: translateY(-50%);
}
input::-webkit-slider-thumb {
height: 15px;
width: 15px;
border-radius: 50%;
background-color: #0070C5;
pointer-events: auto;
-webkit-appearance: none;
cursor: pointer;
margin-bottom: 1px;
}
input::-moz-range-thumb {
height: 20px;
width: 20px;
border-radius: 50%;
background-color: #0070C5;
pointer-events: auto;
-moz-appearance: none;
cursor: pointer;
margin-top: 30%;
}
}
}
.separator_line {
width: 100%;
height: 1px;
background-color: rgba(0,0,0,0.05);
}
}
}
}
#hpk_product_filters.filter-panel.open {
right: 0;
opacity: 1;
pointer-events: all;
transition: none;
.filter_foreground {
//width: 92%;
right: 0;
}
}
}
.product_list#hpk_stoff_list, .product_list#hpk_product_list_collection, .collection_list#hpk_collection_list {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 15px;
row-gap: 20px;
list-style: none;
list-style-type: none;
/* 600px */
@media screen and (min-width:37.5rem) {
column-gap: 30px;
}
/* 900px */
@media screen and (min-width:56.25rem) {
column-gap: 30px;
grid-template-columns: 1fr 1fr 1fr;
}
/* 1200px */
@media screen and (min-width:75rem) {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
/* 1550px */
@media screen and (min-width:96.875rem) {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
.product_item, .collection_item{
width: auto;
max-width: 350px;
.product_wrapper, .collection_wrapper{
.image_container{
img{
width: 100%;
}
}
}
}
.stoerer_element {
//display: none;
position: relative;
grid-row: span 2;
grid-column: span 2;
.stoerer_wrapper {
.image_container{
position: relative;
img{
width: 100%;
object-fit: cover;
}
}
.image_container:before{
content: "";
position: absolute;
z-index: 1;
left: 0;
right: 0;
bottom: 0;
height: 45%;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.90) 100%);
}
.content_container{
position: absolute;
z-index: 2;
left: 0;
right: 0;
bottom: 0;
top: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
}
}
@media screen and (max-width:900px){
&#stoerer_element_1 {
grid-row: 3 / span 2;
}
&#stoerer_element_2 {
display: none;
visibility: hidden;
}
}
@media screen and (min-width:900px){
display: block;
width: 100%;
position: relative;
height: auto;
.stoerer_wrapper {
.image_container{
position: relative;
img{
width: 100%;
object-fit: cover;
}
}
.image_container:before{
top: 0;
bottom: unset;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.90) 0%, rgba(0, 0, 0, 0.0) 100%);
}
.content_container{
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
}
}
}
}
#stoerer_element_1{
grid-row: 2 / span 2;
grid-column: 1 / span 2;
}
#stoerer_element_2{
grid-row: 5 / span 2;
grid-column: -3 / span 2;
}
}
.mod_hpk_collection_detail {
.hpk_collection_headline {
font-weight: 200;
color: #0070C5;
}
}