/* shop.css */ :root { /* names colors */ --green : #5ab432; /*rgb(90, 180, 50)*/ --lightergreen : #fafffa; --darkgreen : #38721f; --orange : #f5a700; --red : #c00; --grey : #c0c0c0; --lightgrey : #ddd; --lightergrey : #f0f0f0; --darkgrey : #444; --blue : #275EFE; --superlightgrey : #fafafa; --white : #fff; --opacity : .9; --main-color : var(--green); --main-color-dark : var(--darkgreen); --main-color-opaque : rgba(90, 180, 50, var(--opacity)); --link-color : var(--main-color); --hint-color : var(--orange); --warning-color : var(--red); --important-color : var(--white); --badge-color : var(--white); --breadcrumb-color : var(--white); --breadcrumb-divider-color : var(--text-color); --focus-color : var(--main-color-dark); --disabled-color : var(--darkgrey); --cms-menu-text-color : var(--white); --feedback-color : var(--white); /* background colors */ --page-background : #f6f6f6; --wrapper-background : var(--page-background); --header-background : var(--page-background); --info-background : transparent; --content-background : var(--white); --footer-background : #585656; --important-background : var(--red); --disabled-background : var(--lightgrey); --feedback-background : var(--green); --box-background : var(--main-color); --shopnav-background : transparent; --bottom-navigation-background : var(--white); --filter-background : transparent; --badge-background : var(--orange); --breadcrumb-background : var(--orange); --background-hover : var(--lightgrey); --order-data-background : var(--green); --order-data-background-image : linear-gradient(-90deg, #ffffffbb, #ffffffaa); --order-status-background : var(--hint-color); /* tabs */ --tab-background : var(--lightgrey); --tab-background-active : var(--green); --tab-border-color : var(--darkgreen); --tab-color : var(--text-color); --tab-color-active : var(--white); /* fonts */ --sans-fontstack : Arial, Helvetica, sans-serif; --serif-fonstack : "Segoe UI", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif; --menu-font : var(--sans-fontstack); --headline-font : var(--sans-fontstack); --fontsize : 14px; --fontsize-small : 12px; --fontsize-large : 16px; --line-height : 20px; --text-color : #444; --text-color-hover : var(--green); /* input, select, textarea, button */ --input-font : var(--sans-fontstack); --input-fontsize : var(--fontsize); --input-color : var(--text-color); --input-height : 30px; --input-border : 1px solid var(--lightgrey); --input-background : white; --input-border-radius : var(--border-radius); --input-padding-left : 6px; /* needed to correct padding left in select */ --input-padding-right : 6px; /* needed to correct padding right e.g. search, quantity select */ --input-padding-top : 0; --input-padding-bottom : 0; --input-padding : var(--input-padding-top) var(--input-padding-right) var(--input-padding-bottom) var(--input-padding-left); --button-font : var(--input-font); --button-fontsize : var(--input-fontsize); --button-color : #fff; --button-background : var(--main-color); --button-border : 1px solid var(--main-color); --button-border-radius : var(--input-border-radius); --button-padding : var(--input-padding); --label-font : var(--sans-fontstack); --label-fontsize : var(--fontsize); --label-color : var(--text-color); --label-line-height : var(--line-height); --label-padding : 0 0 0 4px; /* headlines */ --fontsize-h1 : 2rem; --fontsize-h2 : 1.8rem; --fontsize-h3 : 1.6rem; --fontsize-h4 : 1.4rem; --fontsize-h5 : 1.2rem; --fontsize-h6 : 1.1rem; /* grid */ --grid-template-columns : 210px 1fr; --grid-column-gap : 15px; --grid-row-gap : 15px; /* misc */ --page-width : 1200px; --cartpreview-width : calc((100vw - var(--page-width)) / 2 - 20px); --header-height : 138.5px; /* will be calculated onresize */ --box-shadow : 5px 5px 10px rgba(0, 0, 0, .2); --horizontal-margin : 10px; --page-right-margin : 20px; --padding-left : 10px; --padding-right : 10px; --max-width-some-container : 100%; --table-even-background : var(--superlightgrey); --border-color : var(--lightgrey); --border-radius : 4px; --border : 1px solid var(--border-color); --nav-icon-gap : 10px; /* message */ --message-duration : 6000ms; --message-timing : linear; --message-fontsize : var(--fontsize); --message-color : var(--text-color); --message-background : #fff; --message-border : var(--border); --message-x-offset : 0px; --message-y-offset : 0px; --message-arrow : 5px; --message-arrow-offset : 50%; --notification-color : #fff; --notification-background: #d65600; /* slider */ --slider-height : 500px; --slider-headline-background : var(--main-color-opaque); --slider-headline-color : var(--white); --slider-headline-fontsize : 60px; --slider-headline-line-height : 60px; --slider-headline-padding : 10px 20px; --slider-text-font : 'Lato', Helvetica, Arial, sans-serif; --slider-text-background : var(--main-color-opaque); --slider-text-color : var(--white); --slider-text-fontsize : 20px; --slider-text-line-height : 20px; --slider-text-padding : 10px; --swiper-navigation-size : 40px; --swiper-navigation-color : var(--main-color); --swiper-navigation-background : rgba(255, 255, 255, .5); --swiper-navigation-hover-color : var(--main-color); --swiper-navigation-hover-background : rgba(255, 255, 255, 1); --swiper-pagination-bullet-horizontal-gap : 4px; --swiper-pagination-bullet-size : 8px; --swiper-pagination-color : var(--orange); --swiper-pagination-bullet-opacity : 1; --swiper-pagination-bullet-inactive-color : #000; --swiper-pagination-bullet-inactive-opacity : .3; /* stepper */ --input-stepper-height : 32px; } /* input.css */ input, label, select, textarea, button, .select-wrapper { --active : var(--main-color-dark); --active-inner : var(--white); --focus-color : var(--main-color-dark); --focus : 2px ; --border : #BBC1E1; --border-hover : var(--main-color); --background : var(--white); --disabled : #F6F8FF; --disabled-inner : #E1E6F9; --button-width : 30px; --button-arrow-h-offset: 0px; --button-arrow-v-offset: 1px; } .btn-quantity-dropdown { --button-background : var(--superlightgrey); } .input-quantity-container { --button-width : 30px; --stepper-width : calc(50% - var(--button-width) / 2);/*calc(100% - var(--button-width));*/ --stepper-height : var(--input-stepper-height, 30px); --stepper-inc-transform : translate(calc(100% + 1px), calc(-100% - 3px)); --stepper-dec-transform : translateY(calc(-100% - 3px)); } /* menu.css */ .gwMenu, .gwTree { --border-top-correction : 1px; --col-distance : 10px; --padding-top : 15px; --padding-right : 30px; --padding-left : 30px; --padding-bottom : 15px; --indent : 15px; --offset-top : 100px; --offset-bottom : 10px; --max-height : calc(100vh - var(--offset-top, 0px) - var(--offset-bottom, 0px)); --z-index : 1; --fontsize : 14px; --line-height : 16px; --menu-background-color : transparent; --item-background-color : var(--white); --item-background-color-hover: #eee; } /* product */ .tile-list, .productDetailWrapper { --price-font : var(--sans-fontstack); --price-fontsize : 1.6rem; --price-back : transparent; --price-color : var(--main-color); --price-color-inactive : var(--grey); --price-padding : 0 0 0 5px; --price-border-radius : 5px; --product-input-width : 100%; --product-input-height : auto; --product-input-max-width : 100%; --product-input-max-height : none; --product-input-columns : 1fr 1fr; --product-input-col-gap : 2px; --product-input-row-gap : 10px; --product-input-padding : 0px; --product-input-areas : 'quantity unit' 'addToCart addToCart' 'interval interval' 'userText userText'; --product-name-padding : 0; --quantity-dropdown-height : 300px; --input-height : 30px; --tile-name-font : var(--sans-fontstack); --tile-name-fontsize : var(--fontsize-large); --tile-name-back : transparent; --tile-name-color : var(--main-color); --tile-name-padding : 0; } /* product detail */ .productDetailWrapper { --image-area-width : 400px; --image-area-height : 400px; --fontsize-large : 20px; --max-width-some-container : 300px; --property-margin-top : 30px; --product-width : 100%; --product-height : auto; --product-width-hover : var(--product-width); --product-height-hover : var(--product-height); --product-scale : 1; --product-border : none; --product-padding : 0px; } /* product tiles */ #product-list, .tile-list, #product-group-list, .abo-group-list, .abo-list { --product-background : var(--white); --product-background-hover : var(--superlightgrey); --product-scale : 1; --product-width : 222px; --product-height : 404px; --product-width-hover : var(--product-width); --product-height-hover : 640px; --product-margin-right : 20px; --product-margin-bottom : 20px; --product-padding : 10px; --product-shadow : 0 0 10px rgba(0,0,0,.25); --product-shadow-hover : var(--product-shadow); --scale-height-correction : calc(60px * (1 - min(1, var(--product-scale))) + (var(--product-height) / 2) * (1 - var(--product-scale))); --scale-height-hover-correction: calc(60px * (1 - min(1, var(--product-scale))) + (var(--product-height-hover) / 2) * (1 - var(--product-scale))); --product-border : var(--border); --image-hover-scale : 1.2; } .tile-list, /* default */ .view-tile { --image-area-width : auto; --image-area-height : calc(var(--product-width) * var(--product-scale) - 2px); } .view-tile-compact { --image-area-width : auto; --image-area-height : calc(var(--product-width) * var(--product-scale) - 2px); --product-width : 142px; --product-height : 347px; --product-width-hover : 222px; --product-height-hover : 590px; } .view-list { --image-area-width : auto; --image-area-height : auto; --product-width : 100%; --product-height : 100%; --product-width-hover : var(--product-width); --product-height-hover : var(--product-height); --product-margin-right : 10px; --product-margin-bottom : 10px; --product-name-padding : 0 0 5px 0; } #product-group-list .view-tile { --product-height : 280px; --product-height-hover : var(--product-height); --product-margin-right : 0px; } .shop-productTile .tile-list, .shop-productTile .abo-list .tile-list { --product-width : 100%; --product-height : 100%; --product-width-hover : 100%; --product-height-hover : 100%; --product-margin-right : 0px; --product-margin-bottom : 0px; --product-shadow : none; --product-border : none; --image-area-height : 100px; } .abo-group-list .view-tile { --product-height : 100%; --product-height-hover : var(--product-height); } .abo-list .view-tile { --product-width : 100%; --product-height : 100%; --product-height-hover : 100%; --product-input-col-gap : 5px; --image-area-height : 300px!important; } .abo-list.abo-zusammenstellung-hover .view-tile { --product-height : 450px; --product-height-hover : 450px; } #abokorb .tile-list { --product-width : 100%; --product-height : auto; --product-width-hover : var(--product-width); --product-height-hover : var(--product-height); } #notes .tile-list { --product-width : 100%; --product-height : auto; --product-width-hover : var(--product-width); --product-height-hover : var(--product-height); --note-open-transition : all .5s; } #notes .product-input { --product-input-areas : 'quantity unit' 'addToCart addToCart'; --product-input-row-gap : var(--product-padding); } #notes .product-input-save { --product-input-areas : 'quantity unit' 'noteSave noteSave' 'addToCart addToCart'; } /* compact */ .view-compact { --compact-max-product-height : 118px; --compact-max-product-hover-height : calc(var(--compact-max-product-height) + 20px); --compact-template-columns : 90px 1fr; /* 90px image width */ --compact-template-rows : 118px; } /*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /* cart */ body[data-id="22"] { --max-width-some-container : 300px; } #cart, #wunschabo { --cart-sum-padding : 5px; --cart-sum-font-size : inherit; --cart-sum-font-size-large : 22px; --cart-sum-lineheight : 22px; --font-cart-price-value : bold 18px/28px var(--sans-fontstack); --fontsize-h2 : 22px; } #cart .view-list, #wunschabo .view-list { --product-shadow : none; --product-shadow-hover : none; --product-padding : 0px; --product-margin-bottom : 20px; --product-height : 100%; --product-height-hover : var(--product-height); --product-width : 100%; --product-width-hover : var(--product-width); --image-area-width : 85px; --image-area-height : 85px; --product-name-padding : 0; } #cart .tile-wrapper, #wunschabo .tile-wrapper { --price-fontsize : inherit; --price-color : inherit; --product-background : var(--superlightgrey); --product-margin-bottom : 15px; --product-input-height : 115px; --product-input-padding : 10px; --product-height-hover : var(--product-height); --product-input-row-gap : 3px; --product-input-col-gap : 7px; --product-input-areas : 'quantity unit' 'addToCart deleteFromCart' 'interval userText'; } /* #cart .input-quantity-container{ --stepper-inc-transform: translate(calc(100% + 1px), calc(100% + 3px)); --stepper-dec-transform: translateY(calc(100% + 3px)); } */ /* cart preview */ #cartPreview { --background : var(--white); --text-color : var(--text-color); --top : 310px; --fontsize-h3 : 1.2rem; --z-index : 1000; /* --swipe-factor : 0; --swipe-percent : 0; --swipe-opacity : 1; --swipe-x : var(--cartpreview-width); --swipe-xpx : 0px; --swipe-y : 0; --swipe-ypx : 0px; */ } /* notes */ #notes .view-list { --product-shadow : none; --product-shadow-hover : none; --product-padding : 6px; /* --image-area-height : 60px; */ } /* product advertize */ .special-info { --special-info-background : #fffae9; --headline-margin : 0; } /* product labels */ :root { --product-labels-padding : 0 2px; --product-labels-color : var(--white); --label-region : var(--orange); --label-manufacturer : var(--darkgrey); --label-country : #9b937b; --label-control : #d3b83f; --label-jugendschutz : var(--red); --label-lieferbar : var(--red); --label-mehrweg : #5678e7; --label-handelsklasse : #a5c23c; --label-old-price : var(--green); --manufacturer-display : none; } /* collapsible */ .collapsible { --collapsed-back-color : var(--white); --collapsed-text-color : var(--text-color); --not-collapsed-back-color : var(--main-color); --not-collapsed-text-color : var(--white); --collapsible-border-color : var(--main-color); --collapsible-border-radius : var(--border-radius); --collapsible-border-size : 2px; } /* search */ #searchWrapper { --z-index : 1; --search-width : 30%; --search-max-width : 300px; } #shopSearchResult { --fontsize-h1 : 22px; --search-result-height : 200px; } #searchResult { --search-result-padding : 10px; --search-result-headline-height : 28px; } .searchResultGroups { --fontsize-h3 : 16px; --search-count-background : var(--orange); --search-count-fontsize : 12px; --search-result-bg-color-odd : var(--white); --search-result-bg-color-even : #fafafa; --search-result-color-hover : var(--white); --search-result-bg-color-hover : var(--green); --search-result-color-current : var(--white); --search-result-bg-color-current: var(--green); } /* shop misc */ :root { --products-in-cart-color : var(--badge-color); --products-in-cart-bg-color : var(--badge-background); --active-filter-count-color : var(--badge-color); --active-filter-count-bg-color : var(--badge-background); --nav-bottom-height : 20px; } /* filter */ #filter { --fontsize-h2 : 1rem; --fontsize-h3 : .9rem; --button-fontsize : 12px; } /* sidemenu */ #sidemenu { --background : var(--main-color); --text-color : var(--white); --top : 186px; } /* footer */ #footer { --text-color : var(--white); } /* messages */ /* accessibleview */ body.accessibleview { --green : #2A5418; --orange : #614A00; --label-country : #514B3D; --label-control : #5C4F14; --label-mehrweg : #1F49D6; --label-handelsklasse: #4C591C; --fontsize : 18px; } body.accessibleview .tile-list { --product-scale : 1.17; /*1.4;*/ } /*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ @media screen and (min-width: 512px) { .tile-list:hover { --product-background-hover: var(--white); } .view-list { --image-area-height : calc(var(--product-height) * var(--product-scale) - 25%); --product-width : 48%;/*100%;*/ --product-height : 125px; --product-height-hover : 340px; } .abo-group-list .view-tile { --product-height : 306px; } .abo-list .view-tile { --product-width : 306px; } } @media screen and (min-width: 1200px) and (not (pointer: coarse)) { #cart .view-list, #wunschabo .view-list { --image-area-width : 106px; --image-area-height : 106px; } #cart .tile-wrapper, #wunschabo .tile-wrapper { --product-input-padding : 0px; } #cart .tile-wrapper:not(.hovered), #wunschabo .tile-wrapper:not(.hovered) { --product-input-areas : 'quantity unit'; } #cart .tile-wrapper.hovered, #cart .tile-wrapper:hover, #cart .tile-wrapper.clicked, #cart .tile-wrapper:focus-within, #wunschabo .tile-wrapper.hovered, #wunschabo .tile-wrapper:hover, #wunschabo .tile-wrapper.clicked, #wunschabo .tile-wrapper:focus-within { --product-input-areas : 'quantity unit' 'addToCart deleteFromCart' 'interval userText'; } #cart .tile-wrapper:not(:hover, .clicked, :focus-within, .hovered) .shopAddToCart, #cart .tile-wrapper:not(:hover, .clicked, :focus-within, .hovered) .cartDelete, #cart .tile-wrapper:not(:hover, .clicked, :focus-within, .hovered) .shopIntervalSelect, #cart .tile-wrapper:not(:hover, .clicked, :focus-within, .hovered) .shopInputUserText, #wunschabo .tile-wrapper:not(:hover, .clicked, :focus-within, .hovered) .shopAddToCart, #wunschabo .tile-wrapper:not(:hover, .clicked, :focus-within, .hovered) .cartDelete, #wunschabo .tile-wrapper:not(:hover, .clicked, :focus-within, .hovered) .shopIntervalSelect, #wunschabo .tile-wrapper:not(:hover, .clicked, :focus-within, .hovered) .shopInputUserText { visibility : hidden; grid-row : 1 / 1; grid-column : 1 / 1; } #searchWrapper { --search-width : 400px; } #cartPreview { --z-index: 5; } } input, select, textarea, button { color : var(--input-color, var(--text-color)); font-family : var(--input-font, 'system, sans'); font-size : var(--input-fontsize, 12); border : var(--input-border, 1px solid #444); border-radius : var(--input-border-radius, 0); background : var(--input-background, #fff); padding : var(--input-padding, 0 6px); } input[type=button], input[type=submit], button, .btn, .btn:visited { color : var(--button-color, var(--input-color)); font-family : var(--button-font, var(--input-font)); font-size : var(--button-fontsize, var(--input-fontsize)); border : var(--button-border, var(--input-border)); border-radius : var(--button-border-radius, var(--input-border-radius)); background : var(--button-background, var(--input-background)); padding : var(--button-padding, var(--input-padding)); cursor : pointer; } input[type=radio] { --input-width: 21px; --input-height: 21px; } input[type=checkbox] { --input-width: 19px; --input-height: 19px; } .btn, button { display: inline-flex; text-decoration: none; white-space: nowrap; align-items: center; justify-content: center; } .btn.btn100, button.btn100 { display: flex; } /* input:focus, select:focus, textarea:focus, button:focus, .btn:focus { outline: 2px dotted var(--focus-color); } */ input:disabled, select:disabled, textarea:disabled, button:disabled, .btn.disabled, .btn.disabled:visited { background-color: var(--disabled-background, #ccc); border-color : var(--disabled-background, #ccc); cursor: not-allowed; } input:hover, select:hover, textarea:hover, button:hover, .btn:hover, .btn:visited:hover { border-color : var(--focus-color); } input:not([type=checkbox],[type=radio]), select, button, .btn { height: var(--input-height); overflow: hidden; max-width: 100%; text-overflow: ellipsis; } .select-wrapper { height: var(--input-height); } .select-wrapper:focus-within { outline: 1px dotted var(--focus-color); outline-offset: 1px; } .select-wrapper select:focus { outline: none; } input:not([type=checkbox],[type=radio]), select, button, .btn100 { width: 100%; } input:not([type=checkbox],[type=radio]).not100, select.not100, button.not100, .btn.not100 { width: auto; } div.not100 { display: flex; align-items: center; max-width: 100%; width: var(--not100Width, 500px); } .not100 input, .not100 select, .not100 textarea, .not100 button, .not100 label { flex: 1; width: auto; } form:invalid input[type="submit"] { opacity: .3!important; } /* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Firefox */ input[type=number] { -moz-appearance: textfield; } label { width: 100%; display: inline-block; } input[type=checkbox] + label, input[type=radio] + label, label > input[type=checkbox] + span , label > input[type=radio] + span { width: calc(100% - 32px); } input[type=checkbox].switch + label, input[type=radio].switch + label, label > input[type=checkbox].switch + span, label > input[type=radio].switch + span { width: calc(100% - 47px); } label.not100, input[type=checkbox] + label.not100, input[type=radio] + label.not100, label > input[type=checkbox] + span.not100, label > input[type=radio] + span.not100, input[type=checkbox].switch + label.not100, input[type=radio].switch + label.not100, label > input[type=checkbox].switch + span.not100, label > input[type=radio].switch + span.not100 { width: auto; } @supports (appearance: none) or (-webkit-appearance: none) or (-moz-appearance: none) { input[type=checkbox], input[type=radio] { -webkit-appearance: none; -moz-appearance: none; appearance: none; height: var(--input-height, var(--input-width, 21px)); display: inline-block; vertical-align: top; position: relative; margin: 0; cursor: pointer; border: 1px solid var(--bc, var(--border)); background: var(--b, var(--background)); transition: background 0.3s, border-color 0.3s, box-shadow 0.2s; } input[type=checkbox]:after, input[type=radio]:after { content: ""; display: block; left: 0; top: 0; position: absolute; transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s); } input[type=checkbox]:checked, input[type=radio]:checked { --b: var(--active); --bc: var(--active); --d-o: .3s; --d-t: .6s; --d-t-e: cubic-bezier(.2, .85, .32, 1.2); } input[type=checkbox]:disabled, input[type=radio]:disabled { --b: var(--disabled); cursor: not-allowed; opacity: 0.9; } input[type=checkbox]:disabled:checked, input[type=radio]:disabled:checked { --b: var(--disabled-inner); --bc: var(--border); } input[type=checkbox]:disabled + label, input[type=radio]:disabled + label, label > input[type=checkbox]:disabled + span , label > input[type=radio]:disabled + span { cursor: not-allowed; } input[type=checkbox]:hover:not(:checked):not(:disabled), input[type=radio]:hover:not(:checked):not(:disabled) { --bc: var(--border-hover); } /* input[type=checkbox]:focus, input[type=radio]:focus { box-shadow: 0 0 0 var(--focus); } */ input[type=checkbox]:not(.switch), input[type=radio]:not(.switch) { width: var(--input-width, 21px); min-width: var(--input-width, 21px); max-width: var(--input-width, 21px); margin-left: 2px; } input[type=checkbox]:not(.switch):after, input[type=radio]:not(.switch):after { opacity: var(--o, 0); } input[type=checkbox]:not(.switch):checked, input[type=radio]:not(.switch):checked { --o: 1; } input[type=checkbox] + label, input[type=radio] + label, label > input[type=checkbox] + span , label > input[type=radio] + span { font-family: var(--label-font); font-size: var(--label-fontsize); color: var(--label-color); line-height: var(--label-line-height); display: inline-block; vertical-align: top; cursor: pointer; padding: var(--label-padding); margin-bottom: 5px; } input[type=checkbox]:not(.switch) { border-radius: 2px; } input[type=checkbox]:not(.switch):after { width: auto; height: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); content: "\2713"; color: #fff; font-size: 14px; line-height: 0; } input[type=checkbox]:not(.switch):checked { --r: 43deg; } input[type=checkbox].switch { width: 38px; min-width: 38px; max-width: 38px; border-radius: 11px; } input[type=checkbox].switch:after { left: 2px; top: 2px; border-radius: 50%; width: 15px; height: 15px; background: var(--ab, var(--border)); transform: translateX(var(--x, 0)); } input[type=checkbox].switch:checked { --ab: var(--active-inner); --x: 17px; } input[type=checkbox].switch:disabled:not(:checked):after { opacity: 0.6; } input[type=radio] { border-radius: 50%; } input[type=radio]:after { width: 19px; height: 19px; border-radius: 50%; background: var(--active-inner); opacity: 0; transform: scale(var(--s, 0.7)); } input[type=radio]:checked { --s: .5; } } /* custom select */ .select-wrapper { position: relative; } .select-wrapper::before { pointer-events: none; position: absolute; right: calc(var(--button-width, 30px) / 2 + var(--button-arrow-h-offset, 0px)); top: calc(50% - var(--fontsize-small) / 2 + var(--button-arrow-v-offset, 1px)); content: "\25E2"; transform: rotate(45deg) translateY(-50%); font-size: var(--fontsize-small); color: var(--grey); box-sizing: border-box; } select { -moz-appearance: none; -webkit-appearance: none; appearance: none; /* --background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8nwYAAmoBZ0eMiB8AAAAASUVORK5CYII=) repeat; */ cursor: pointer; padding-right: calc(4px + var(--input-padding-right) + var(--button-width, 30px) / 2); padding-left: var(--input-padding-left);/* calc(var(--input-padding-left) - 4px); */ width: 100%; background-repeat: no-repeat; background-position: right center; background-size: contain; background-image: url(img/down-arrow.svg); scrollbar-color: #aaa #eee; } .select-wrapper > select { background-image: none; } .select-wrapper.disabled::before { content: none; } select[disabled] { padding-right: var(--input-padding-right); background-image: none; } select option { color: #666; background-color: #fff; } select::-ms-expand { display: none; } select:focus::-ms-value { background-color: transparent; } /* data input */ :root { --data-input-height: 30px; --data-input-button-width: 26px; --data-input-v-padding: 8px; --data-input-x-offset: 2px; --data-input-required-x-offset: 3px; --data-input-margin-right: 20px; } .icon-calendar{ background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QzM4Njc0MTYxMEExMTFFM0JFNjNGNENDQjcyMDhBNDQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QzM4Njc0MTcxMEExMTFFM0JFNjNGNENDQjcyMDhBNDQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDMzg2NzQxNDEwQTExMUUzQkU2M0Y0Q0NCNzIwOEE0NCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDMzg2NzQxNTEwQTExMUUzQkU2M0Y0Q0NCNzIwOEE0NCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PswOB78AAAHeSURBVHjapJM7SBxRFIb/e2fcnRlQsAoBOwsF8cGKjc4+XFkFQRQlFotNwNZOsNA2XQrBIthbJ5H1tYuagOL6WGc1vZgilQop7NzduZ57dja4EJTEA3e+e89rzn0coZTCa8Tk76eWr1DlcXAyPcQzIYFd6GEeCa5gpUmhb54MftXwkvCPJHD2sVrB97cf4HbOILO2DCkF5ZB1/uJJRUr5qPg+xmbmcPirGex5F2qFcppxE2pDIr2A23AbOlKzuAu3I5lexO9wL1LpJeYgrW/JT/vrOK7AUCUaCk7YxGZmg3l6kic2YDuzi5wYxd5noEKFWBs7pA+xv477U6ugvRu0mpocZ8aj/USBd1PDkLTl4S4wpydHWC+Cs5LVc1W8S8u2sZPNwSaee0VaW9jOHqJMgdlLMLeyB2S32F/Hyac3Y5om4rEBGIaB7q5OooTrRvD+TR6rE4rpRiMwTANBhuAdBOI4DrziD9jEq+ufRBuFCw8NlsCxd0RUKBQ91tek7r7KpQqSiRixjL5ID3Mw7uKhVCL2M5OJKPv9NYEQCrndfZ7nTwrM3N63qr5GsmvWPeXaiY6khv6pD3RcLcH9l/X1Rl8/UT1ebAUBKfgq77kXaNKj39N/NGNFvLadHwUYALqLrIRh/D7iAAAAAElFTkSuQmCC'); } input:not(:focus):invalid {border-color: #a00;} input:invalid { scroll-margin: var(--header-height, 200px) 0 0 0; scroll-behavior: smooth; } input.dataInput { padding-left: var(--data-input-v-padding, 2px); padding-right: var(--data-input-v-padding, 2px); box-sizing: border-box; height: var(--data-input-height, 22px); vertical-align: middle; margin-right: var(--data-input-margin-right, 0px); display: inline-block; } input.dataInputIcon { padding-right: calc(var(--data-input-v-padding, 2px) + var(--data-input-button-width, 20px) + 2px); } input.dataInput:required~.dataInputAdditional::after, input.dataInput[data-required]~.dataInputAdditional::after { content: '*'; color: #a00; vertical-align: middle; margin-left: calc(3px - var(--data-input-margin-right, 0px) ); } input.dataInputIcon:required~.dataInputAdditional::after, input.dataInputIcon[data-required]~.dataInputAdditional::after { margin-left: calc(var(--data-input-button-width, 20px) + 3px); } input.dataInputIcon~.dataInputAdditional { box-sizing: border-box; vertical-align: middle; margin-left: calc(-2 * var(--data-input-x-offset, 2px) - var(--data-input-button-width, 20px) - var(--data-input-margin-right, 0px)); margin-right: calc(var(--data-input-x-offset, 2px) + var(--data-input-margin-right, 0px)); width: calc(var(--data-input-button-width, 20px) + var(--data-input-x-offset, 2px)); height: calc(var(--data-input-height, 20px) - 2 * var(--data-input-x-offset, 2px)); border: none; background-repeat: no-repeat; background-position: center; cursor: pointer; background-color: #ddd; border-radius: 0; max-width: none; overflow: inherit; display: inline-block; } databutler-calendar.dataInputComponent { transform: translateX(-30px); } .dataInputSkipclick { background-color: rgba(200, 200, 200, .2); } html { margin: 0; padding: 0; border: none; width: 100%; max-width: 100%; } body { margin: 0; padding: 0; border: none; font-family: var(--sans-fontstack); font-size: var(--fontsize); color: var(--text-color, #000); background: var(--page-background); touch-action: pan-y; } body.isTouchSupported.isMobile, body.isTouchSupported.isMobile #page-wrapper { overflow-x: hidden; max-width: 100vw; width: 100vw; } body.no-scroll { overflow: hidden scroll; } body.no-scroll #page-wrapper { overflow: hidden; min-height: 100vh; max-height: 100vh; } /* isMobileBrowser because of simualate touch in desktop browser body.no-scroll.isTouchSupported.isMobile #page-wrapper { max-height: none; } */ * { box-sizing: border-box; touch-action: pan-y; } *:focus { outline: 1px dotted var(--focus-color); outline-offset: 1px; } a, a:visited { color: var(--link-color); cursor: pointer; } a:focus { outline: 0; } p, td, th { line-height: var(--line-height); } iframe { max-width: 100%; } nav a, nav a:visited { color: var(--text-color); text-decoration: none; } /* headlines */ h1, h2, h3, h4, h5, h6 { font-family: var(--headline-font); color: var(--cms-color, var(--text-color)); line-height: 1.5; } h1 { font-size: var(--fontsize-h1, 2rem); } h2 { font-size: var(--fontsize-h2, 1.8rem); } h3 { font-size: var(--fontsize-h3, 1.6rem); } h4 { font-size: var(--fontsize-h4, 1.4rem); } h5 { font-size: var(--fontsize-h5, 1.2rem); } h6 { font-size: var(--fontsize-h6, 1.1rem); } .hide { display: none!important; } .nowrap { white-space: nowrap; } .clear { clear: both; } .clear:after { clear: both; content: ""; display: table; } .flexcenter { display: flex; justify-content: center; align-items: center; } .perfect-center, .perfectcenter { top: 50%!important; left: 50%!important; position: absolute!important; transform: translate(-50%, -50%)!important; } .gridcenter { display: grid; justify-content: center; align-items: center; } .important { color: var(--important-color); background-color: var(--important-background); } .standardPadding { padding-left: var(--padding-left, 0); padding-right: var(--padding-right, 0); } .standardMargin { margin-left: var(--padding-left, 0); margin-right: var(--padding-right, 0); } /* swipe */ .swipe-element { position: fixed; } .swipe-element-init-state-left .swipe-front { transform: translateX(-100%); } .swipe-element-init-state-right .swipe-front { transform: translateX(100%); } .swipe-prevent-scroll { touch-action: none; } .swipe-prevent-scroll * { pointer-events: none; touch-action: none; } .swipe-allow-pointer-events, .swipe-allow-pointer-events * { pointer-events: initial!important; touch-action: initial!important; } /* tabs */ .tabs { list-style-type: none; padding: 0; margin: 0; display: flex; align-items: flex-end; gap: var(--tab-distance, 10px); border-bottom: 1px solid var(--tab-border-color); margin-top: var(--tab-margin-top, 20px); } .tabs > * { padding: 0; margin: 0; } .tabs input[type="radio"] + label { font-size: var(--tab-font-size, 14px); padding: var(--tab-padding, 10px); background-color: var(--tab-background); width: auto; margin-bottom: 0; border-top-left-radius: var(--tab-border-radius, 10px); border-top-right-radius: var(--tab-border-radius, 10px); color: var(--tab-color); /* margin-left: 0; */ } .tabs input[type="radio"] { opacity: 0; position: absolute; width: 0; height: 0; visibility: hidden; margin: 0; padding: 0; border: none; } .tabs input[type="radio"]:checked + label { margin-bottom: -1px; background-color: var(--tab-background-active); border-bottom: 1px solid var(--tab-background-active); border-top: 1px solid var(--tab-border-color); border-left: 1px solid var(--tab-border-color); border-right: 1px solid var(--tab-border-color); color: var(--tab-color-active); } .tabs > li:first-child { padding-left: var(--tab-distance, 10px); } /* collapsible */ .collapsible-active > *:first-child { border-top-left-radius: var(--collapsible-border-radius); border-top-right-radius: var(--collapsible-border-radius); border-top: var(--collapsible-border-size) solid var(--collapsible-border-color); border-left: var(--collapsible-border-size) solid var(--collapsible-border-color); border-right: var(--collapsible-border-size) solid var(--collapsible-border-color); position: relative; z-index: 1; cursor: pointer; } .collapsible-active > *:last-child { border-top: var(--collapsible-border-size) solid var(--collapsible-border-color); } .collapsible-active.collapsible-collapsed > *:last-child { display: none; } .collapsible-active.collapsible-collapsed > *:first-child { background-color: var(--collapsed-back-color); color: var(--collapsed-text-color); } .collapsible-active.collapsible-not-collapsed > *:first-child { background-color: var(--not-collapsed-back-color); color: var(--not-collapsed-text-color); } /* error */ div.error { background-color: var(--important-background); color: var(--important-color); padding: 10px; margin: 0 0 20px 0; } div.error > br:first-of-type { display: none; } div.feedback { background-color: var(--feedback-background, var(--important-background)); color: var(--feedback-color, var(--important-color)); margin: 0 0 20px 0; } /* Calendar */ databutler-calendar { box-shadow: 0px 0px 10px rgba(0,0,0,.3); border: 10px solid #fff; } /* form validation */ input.valid:empty, select.valid:empty, input[type="checkbox"].error, input[type="radio"].error { background-image: none; } .has-error { position: relative; } .form-error { position: absolute; margin: 0!important; right: 36px; bottom: -14px; font-size: 12px; } /* misc */ .bottom-distance { clear: both; margin-bottom: 250px; } .hide-phone, .hide-small-tablet, .hide-tablet { display: none; } @media screen and (min-width: 512px) { .hide-phone { display: unset; } .hide-non-phone { display: none; } } @media screen and (min-width: 800px) { .hide-small-tablet { display: unset; } } @media screen and (min-width: 1200px) and (not (pointer: coarse)) { .responsive { display: none; } .hide-tablet { display: unset; } .hide-desktop { display: none; } } /* backdrop */ .backdrop { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, .5); z-index: var(--z-index); } .backdrop-transparent { background-color: rgba(0, 0, 0, 0); } .backdrop-zindex { z-index: 4!important; } /* message */ .message { z-index: var(--z-index); display: inline-flex; flex-direction: column; width: var(--message-width, auto); height: var(--message-height, auto); border: var(--message-border, none); padding: var(--message-padding, 10px 0 10px 10px); color: var(--message-color, var(--color)); background-color: var(--message-background, #fff); margin: 0; font-size: var(--message-fontsize); min-width: 300px; max-width: 98vw; min-height: 100px; max-height: 98vh; text-align: center; transform: translate(var(--translate-x, 0), var(--translate-y, 0)); user-select: none; box-shadow: 0px 0px 10px 5px rgba(100, 100, 100, .5); position: relative; } .message.notification { color: var(--notification-color); background-color: var(--notification-background); min-width: 150px; min-height: 0px; } .message .message-content { flex: 1; min-height: 60px; overflow: auto; padding-right: 10px; } .message .message-content-center { display:flex; justify-content: center; align-items: center; } .message .message-content-centertop { display:flex; justify-content: center; align-items: flex-start; } .message .message-content-lefttop { display:flex; justify-content: flex-start; align-items: flex-start; } .message.notification .message-content { min-height: 0; } .message .message-content-format { line-height: var(--line-height); } .message .message-content-format h1, .message .message-content-format h2, .message .message-content-format h3, .message .message-content-format h4, .message .message-content-format h5, .message .message-content-format h6 { line-height: initial; } .message .message-content-format ul { display: inline-block; } .message .message-content-format .hidden { display: block!important; } .message.confirm, .message.alert { --message-width : 580px; text-align: left; } .message.confirm .message-content, .message.alert .message-content { padding-left: 50px; display: flex; justify-content: center; align-items: center; flex-direction: column; row-gap: 20px; font-size: 18px; line-height: 1.2; text-align: center; } .message.confirm::before, .message.alert::before { content: '?'; font-size: 2rem; font-weight: bold; width: 40px; height: 40px; display: block; float: left; line-height: 39px; color: #000097; background-color: #eaf5ff; border: 5px solid #000097; outline: 4px solid #eaf5ff; border-radius: 30px; text-align: center; margin-right: 13px; transform: translate(-4px, -4px); margin-bottom: -50px; } .message.alert::before { content: '!'; color: #970000; background-color: #fff1f1; border-color: #970000; outline-color: #fff1f1; } .message .message-buttons { display: flex; column-gap: 10px; justify-content: center; margin: 20px auto 0 auto; } .message .message-buttons button { white-space: nowrap; overflow: visible; padding-left: 24px; padding-right: 24px; } /* inner */ .message.inner { position: fixed; } .message.inner.center { left: 50%; --translate-x: calc(-50% - var(--message-x-offset, 0)); } .message.inner.middle { top: 50%; --translate-y: calc(-50% - var(--message-y-offset, 0)); } .message.inner.top { top: 0; --translate-y : var(--message-y-offset, 0); } .message.inner.left { left: 0; --translate-x : var(--message-x-offset, 0); } .message.inner.right { right: 0; --translate-x : var(--message-x-offset, 0); } .message.inner.bottom { bottom: 0; --translate-y : var(--message-y-offset, 0); } /* outer */ .message.outer { position: absolute; } .message.outer.center { left: var(--align-x-offset, 50%); --translate-x : calc(-50% - var(--message-x-offset, 0)); } .message.outer.middle { top: var(--align-y-offset, 50%); --translate-y : calc(-50% - var(--message-y-offset, 0)); } .message.outer.top { top: var(--align-y-offset, 0px); --translate-y : calc(-100% - var(--message-y-offset, 0)); } .message.outer.left { left: var(--align-x-offset, 0px); --translate-x : calc(-100% - var(--message-x-offset, 0)); } .message.outer.right { right: calc(100% - var(--align-x-offset, 100%)); --translate-x : calc(100% + var(--message-x-offset, 0)); } .message.outer.bottom { bottom: calc(100% - var(--align-y-offset, 100%)); --translate-y : calc(100% + var(--message-y-offset, 0)); } .message.outer.aligntop { top: var(--align-y-offset, 0px); --translate-y : calc(0px - var(--message-y-offset, 0)); } .message.outer.alignleft { left: var(--align-x-offset, 0px); --translate-x : calc(0px - var(--message-x-offset, 0)); } .message.outer.alignright { right: calc(100% - var(--align-x-offset, 100%)); --translate-x : calc(0px + var(--message-x-offset, 0)); } .message.outer.alignbottom { bottom: calc(100% - var(--align-y-offset, 100%)); --translate-y : calc(0px + var(--message-y-offset, 0)); } /* arrow */ .message.arrow::after { content: " "; position: absolute; border-width: var(--message-arrow, 5px); border-style: solid; --message-arrow-transform: calc(0px - var(--message-arrow-offset, 50%)); } .message.top.arrow::after { /* arrow bottom */ top: 100%; left: var(--message-arrow-offset, 50%); transform: translateX(var(--message-arrow-transform)); border-color: var(--message-background) transparent transparent transparent; } .message.notification.top.arrow::after { border-color: var(--notification-background) transparent transparent transparent; } .message.left.arrow::after { /* arrow right */ top: var(--message-arrow-offset, 50%); left: 100%; transform: translateY(var(--message-arrow-transform)); border-color: transparent transparent transparent var(--message-background); } .message.notification.left.arrow::after { border-color: transparent transparent transparent var(--notification-background); } .message.right.arrow::after { /* arrow left */ top: var(--message-arrow-offset, 50%); right: 100%; transform: translateY(var(--message-arrow-transform)); border-color: transparent var(--message-background) transparent transparent; } .message.notification.right.arrow::after { border-color: transparent var(--notification-background) transparent transparent; } .message.bottom.arrow::after { /* arrow top */ bottom: 100%; left: var(--message-arrow-offset, 50%); transform: translateX(var(--message-arrow-transform)); border-color: transparent transparent var(--message-background) transparent; } .message.notification.bottom.arrow::after { border-color: transparent transparent var(--notification-background) transparent; } /* message animation */ .message.animate { animation: var(--message-animation-name) var(--message-duration, 5s) var(--message-timing) 0s 1 alternate; } @keyframes notification-animation-none { } @keyframes notification-animation-fade { 0% { opacity: 0; } 20% { opacity: 1; } 50% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } } @keyframes notification-animation-left { 0% { left: calc(0px - var(--message-width, 100%)); } 20% { left: 0; } 50% { left: 0; } 80% { left: 0; } 100% { left: calc(0px - var(--message-width, 100%)); } } @keyframes notification-animation-right { 0% { right: calc(0px - var(--message-width, 100%)); } 20% { right: 0; } 50% { right: 0; } 80% { right: 0; } 100% { right: calc(0px - var(--message-width, 100%)); } } @keyframes notification-animation-top { 0% { top: calc(0px - var(--message-height, 100%)); } 20% { top: 0; } 50% { top: 0; } 80% { top: 0; } 100% { top: calc(0px - var(--message-height, 100%)); } } @keyframes notification-animation-bottom { 0% { bottom: calc(0px - var(--message-height, 100%)); } 20% { bottom: 0; } 50% { bottom: 0; } 80% { bottom: 0; } 100% { bottom: calc(0px - var(--message-height, 100%)); } } @keyframes message-animation-none { } @keyframes message-animation-fade { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes message-animation-fadeInOut { 0% { opacity: 0; } 20% { opacity: 1; } 50% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } } @keyframes message-animation-left { 0% { left: calc(0px - var(--message-width, 100%)); } 100% { left: 0; } } @keyframes message-animation-right { 0% { right: calc(0px - var(--message-width, 100%)); } 100% { right: 0; } } @keyframes message-animation-top { 0% { top: calc(0px - var(--message-height, 100%)); } 100% { top: 0; } } @keyframes message-animation-bottom { 0% { bottom: calc(0px - var(--message-height, 100%)); } 100% { bottom: 0; } } /* main container */ #wrapper, body.wrapper-switch .wrapper { max-width: var(--page-width, 1200px); margin: 0 auto; } #info { display: flex; flex-direction: column; background: var(--info-background, #fff); } #content { display: grid; grid-template-columns: var(--grid-template-columns, 200px 1fr); grid-auto-rows: auto; column-gap: var(--grid-column-gap, 15px); row-gap: 0px; background: var(--content-background, #fff); } #content.single-column { grid-template-columns: 100%; padding-left: 10px; padding-right: 10px; } #footer { display: flex; background: var(--footer-background, #fff); } @media only screen and (max-width: 600px) { #content { grid-template-columns: 30% 1fr; grid-column-gap: 5px; } } .cmsFlexModule { width: 100%; } .moduleHide { /* display: none!important; */ position: relative!important; height: 0!important; opacity: 0!important; visibility: hidden!important; border: 0!important; outline: 0!important; margin: 0!important; padding: 0!important; top: 0!important; left: 0!important; } @media only screen and (min-width: 1200px) and (not (pointer: coarse)) { #content.single-column { padding-left: 0; padding-right: 0; } } img[data-src] { will-change: contents; } /* tile */ .tileName { font: var(--tile-name-font); font-size: var(--tile-name-fontsize); padding: var(--tile-name-padding); color: var(--tile-name-color); background: var(--tile-name-back); } #product-groups .tileName, .abo-groups .tileName { display: block; text-decoration: none; } /* product */ .productName { font-weight: bold; text-decoration: none; font-size: var(--fontsize-large); padding: var(--product-name-padding); } .product-price .product-unit { font-size: var(--fontsize-small); white-space: nowrap; } .product-price .productPrice { font-family: var(--price-font); font-size: var(--price-fontsize); background-color: var(--price-back); color: var(--price-color); padding: var(--price-padding); border-radius: var(--price-border-radius); white-space: nowrap; } .product-labels { display: flex; align-content: flex-start; flex-wrap: wrap; } .product-labels > * { height: 20px; max-width: 100%; overflow: hidden; /* white-space: nowrap; */ word-break: break-all; text-overflow: ellipsis; font-size: var(--fontsize-small); text-decoration: none; line-height: 20px; display: inline-block; margin-right: 2px; color: var(--product-labels-color); } .product-region { background-color: var(--label-region); padding: var(--product-labels-padding); display: var(--region-display, inline-block); } .product-manufacturer { background-color: var(--label-manufacturer); padding: var(--product-labels-padding); display: var(--manufacturer-display, inline-block); } .product-country { background-color: var(--label-country); padding: var(--product-labels-padding); display: var(--country-display, inline-block); } .product-control { background-color: var(--label-control); padding: var(--product-labels-padding); display: var(--control-display, inline-block); } img.product-control { background-color: transparent; --product-labels-padding: 0; } .jugendschutz { background-color: var(--label-jugendschutz); padding: var(--product-labels-padding); } .nichtlieferbar { background-color: var(--label-lieferbar); padding: var(--product-labels-padding); display: var(--lieferbar-display, inline-block); } .einwegmehrweg { background-color: var(--label-mehrweg); padding: var(--product-labels-padding); } .handelsklasse { background-color: var(--label-handelsklasse); padding: var(--product-labels-padding); } .oldPrice { background-color: var(--label-old-price); padding: var(--product-labels-padding); text-decoration: line-through; display: var(--old-price-display, inline-block); } .productSpecialPrice { overflow-x: hidden; max-width: var(--max-width-some-container); } .shopGraduatedPriceTABLE { width: 100%; } .shopGraduatedPriceTABLE td { font-size: var(--fontsize-small); color: var(--main-color); white-space: nowrap; padding-right: 6px; text-align: right; --line-height: 16px; } .shopGraduatedPriceTABLE td:first-child { text-align: left; } .shopGraduatedPriceTABLE td:last-child { padding-right: 0; } /* image area */ .image-area { overflow: hidden; text-align: center; display: grid; grid-area: image; width: var(--image-area-width); height: var(--image-area-height); position: relative; } .image-area > * { grid-row: 1 / 1; grid-column: 1 / 1; position: relative; } .image-area > a { width: 100%; height: 100%; max-height: 100%; overflow: hidden; } .image-area img { overflow: hidden; white-space: nowrap; transition: scale .2s; max-width: 100%; max-height: 100%; width: fit-content; height: auto; object-fit: contain; align-self: center; justify-self: center; /* position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); */ } .image-area:hover .image-product img { transform: /* translate(-50%, -50%) */ scale(var(--image-hover-scale)); } .image-area .image-over { display: none; } .image-area:hover .image-over { display: grid; z-index: 1; } .grundpreis { display: flex; justify-content: space-between; font-size: var(--fontsize-small); max-width: var(--max-width-some-container); } .grundpreis > * { white-space: nowrap; } .deposit { display: flex; flex-direction: row; font-size: 12px; line-height: 12px; width: 100%; height: 20px; } .hide-non-phone .deposit { margin-top: 10px; } #cart .deposit { width: inherit; height: inherit; } .pfand { flex: 1; padding-right: 5px; } .pfandmeta { flex: 1; text-align: right; } /* product-input */ .product-input { width: var(--product-input-width); max-width: var(--product-input-max-width); height: var(--product-input-height); max-height: var(--product-input-max-height); padding: var(--product-input-padding); display: grid; grid-template-columns: var(--product-input-columns); grid-row-gap: var(--product-input-row-gap); grid-column-gap: var(--product-input-col-gap); grid-template-areas: var(--product-input-areas); grid-area: productInput; } .product-input .input-quantity-container { grid-row-gap: 1px; grid-area: quantity; } .product-input .shopAddToCart { grid-area: addToCart; } .product-input .shopIntervalSelect { grid-area: interval; } .product-input .shopInputUserText { grid-area: userText; } .product-input .shopUnit { grid-area: unit; } .product-input .unit-span { text-align: center; } .product-input > * { align-self: center; } .product-unit-ab { color: var(--warning-color); } .input-stepper { position: absolute; width: var(--stepper-width, 100%); height: var(--stepper-height, 20px); border-color: var(--main-color-dark); } .input-stepper-increment { transform: var(--stepper-inc-transform); } .input-stepper-decrement { transform: var(--stepper-dec-transform); } .shopUnitSelect { margin-left: 4px } /* quantity dropdown */ .input-quantity-container { display: grid; position: relative; grid-column-gap: 0; grid-template-columns: 1fr var(--button-width); grid-template-rows: auto; } .input-quantity-container > * { /* grid-column: 1 / 1; */ grid-row: 1 / 1; } .input-quantity-container .shopInputQuantity { text-align: center; grid-column: 1; z-index: 1; } .input-quantity-container .shopInputQuantity:focus { position: relative; z-index: 1; } .quantity-dropdown { position: relative; z-index: 0; grid-row: 1 / 1; grid-column: 1 / -1; width: 100%; height: 100%; text-align: right; } .quantity-dropdown.select-wrapper::after { content: ''; border-left: none; pointer-events: none; position: absolute; right: 0; top: 0; box-sizing: border-box; z-index: 1; height: 100%; width: var(--button-width, 30px); } .quantity-dropdown.select-wrapper:hover::after { border-left: var(--input-border); border-color: var(--focus-color); } .quantity-dropdown select { width: 100%; text-align: center; direction: ltr; border-radius: 0; padding: 0 var(--button-width, 30px) 0 0; max-width: 150px; } .quantity-dropdown select:focus, .quantity-dropdown:focus-within::after { z-index: 1; } .quantity-dropdown option { font-size: 16px; text-align: right; direction: rtl; } .quantity-dropdown option:hover { background-color: var(--background-hover); } /* add to cart */ /* input.shopAddToCart { background-color: var(--main-color); color: #fff; border-color: var(--main-color); } input.shopAddToCart:hover { border-color: var(--focus-color); } */ .product-data { grid-area: product-data; } /* cross selling */ .slider-container { max-width: 100vw; } .shop-productTile { max-height: 100%; overflow: hidden; } .shop-productTile:hover { overflow: visible; position: relative; z-index: 3; } /* .shop-productTile:hover .tile-wrapper.hovered { --product-height-hover: auto; } */ .shop-productTile > article { display: flex; flex-direction: column; height: 100%; } .shop-productTile .tile-list { height: 100%; margin: 0; } .shop-productSlider .swiper-slide, .shop-productSlider .swiper-slide-container { max-width: 100%; } .shop-productSlider .swiper-slide-container .shop-productTile { height: 100%; width:100%; } /* @media screen and (min-width: 550px) { .shop-productSlider .swiper-slide, .shop-productSlider .swiper-slide-container { width: max-content; } .shop-productSlider .swiper-slide-container .shop-productTile { width:300px; } } */ /* sidemenu */ #sidemenu { display: none; position: fixed; right: 0; top: var(--top); z-index: 2; padding: 2px 0 0 2px; background: var(--background); } #sidemenu a { color: var(--text-color); display: block; width: 50px; height: 50px; margin-bottom: 2px; font-size: 0; line-height: 0; border-bottom: 2px solid #fff; } #sidemenu a:last-child { border-bottom: none; } #sidemenu a:before { display: block; text-align: center; transform: translate(-50%, -50%); position: relative; top: 50%; left: 50%; } .sidemenu-service:before { content: url('img/Service_weiss.png'); } .sidemenu-mail:before { content: url('img/Mail_weiss.png'); } .sidemenu-warenkorb:before { content: url('img/Warenkorb_weiss.png'); } @media screen and (min-width: 1200px) and (not (pointer: coarse)) { #sidemenu { display: block; } } /* messages */ .popup-content { display: none; } .message-product { box-shadow: var(--box-shadow); border-radius: 4px; min-width: 0; text-align: left; } .message-product div.product-message { display: block; padding: 3px 0; border-bottom: 1px dotted var(--message-color); } .message-product div:last-child { border-bottom: none; } .message-product.inner { margin: 5px; } #importantMessage { background-color: var(--important-background); } .importantMessage, #importantMessage .importantMessageText { display: block; width: 100%; padding: 10px; margin: 20px 0; background-color: var(--important-background); color: var(--important-color); } #importantMessage .toOrder, .importantMessage .toOrder { float: right; } .importantMessage h1, .importantMessage h2, .importantMessage h3, .importantMessage a, .importantMessage a:visited { margin-top: 0; color: var(--important-color); } #tickermessage-shop > a { display: block; color: #fff; } #tickermessage-shop > a:hover { color: #fff; } .tickermessage-info { font-size: 31px; font-weight: bold; color: #fff; padding: 0 10px 0 0; vertical-align: middle; float: left; display: table; height: 100%; line-height: 22px; } .tickermessage-shortmessage { color: #fff; display: table; height: 100%; } .importantMessageText > br:first-child { display: none; } /* cookie consent */ #cc--main input:not([type="checkbox"], #cc--main [type="radio"]), #cc--main select, #cc--main button, #cc--main .btn, #cc--main input[type="checkbox"]:not(.switch), #cc--main input[type="radio"]:not(.switch) { width: auto; height: auto; min-width: none; max-width: none; background: unset; vertical-align: unset; --input-width: auto; --input-border-radius: 0; --button-border-radius: 0; } #cc--main *:focus { outline: unset; } #cc--main input[type="checkbox"]:not(.switch)::after { content: none; } #cc--main input[type="checkbox"] + label, #cc--main input[type="radio"] + label, #cc--main label > input[type="checkbox"] + span, #cc--main label > input[type="radio"] + span { --label-padding: 0; } #cc--main #s-c-bn.c-bn { width: 1.7em; height: 1.7em; } /* transfer to cart */ #shopTransferToCart th, #shopTransferToCart td { vertical-align: top; text-align: left; padding-bottom: 5px; padding-right: 10px; } #shopTransferToCart .headrow { background-color: var(--superlightgrey)!important; } #shopTransferToCart .headrow th { padding-top: 10px; padding-bottom: 10px; } #shopTransferToCart .shopTransferText { background-color: var(--hint-color)!important; color: var(--white); } #shopTransferToCart .shopTransferText td { padding: 6px; } #shopTransferToCart .price { white-space: nowrap; } #shopTransferToCart .cellRight { text-align: right; } #shopTransferToCart .cellCenter { text-align: center; } #shopTransferToCart .rowDistance td { --line-height: 0; --fontsize: 0; height: 6px; } #shopTransferToCart .rowDivider td { padding-top: 10px; padding-bottom: 10px; border-top: 1px solid var(--text-color); vertical-align: middle; } #shopTransferToCart .colLiefertermin { display: none; } @media screen and (max-width: 511px) { #shopTransferToCart tr { border-top: 1px solid var(--text-color); display: flex; flex-wrap: wrap; } #shopTransferToCart .shopTransferText, #shopTransferToCart .headrow { border-top: none; } #shopTransferToCart tr:nth-child(even) { background-color: var(--lightergrey); } #shopTransferToCart th { display: inline-block; padding-top: 0!important; padding-bottom: 6px!important; } #shopTransferToCart td { display: inline-block; padding-left: 6px; padding-top: 6px!important; padding-bottom: 6px!important; } #shopTransferToCart .transferCB { width: 40px; } #shopTransferToCart .transferProduct { width: calc(95% - 40px); } #shopTransferToCart .rowDivider td { padding-top: 10px!important; border-top: none; } } /* Aktionsprodukte */ .aktionsprodukt-message { position: absolute; color: var(--warning-color); text-shadow: 0px 0px 4px #fff; font-size: 20px; font-weight: bold; transform: rotate(-15deg) translateY(-50%); top: 50%; left: 10px; z-index: 2; } .tile-wrapper.aktionsprodukt-ausverkauft { border-color: var(--warning-color); background-image: repeating-linear-gradient( -15deg, #f7454530, #f7454530 4px, #f7f7ff 4px, #f7f7ff 30px ); } /* Bilder im Warenkorb, Abokorb, Merkzettel */ #warenkorbHeadImage, #abokorbHeadImage, #merkzettelHeadImage { float: right; } .contentText, .error { line-height: var(--line-height); } /* reader container */ #reader-container { width: 100%; will-change: contents; padding-left: 0; margin: 0; text-align: left; font-size: var(--fontsize-reader, var(--fontsize-small)); } #reader-container h3 { margin: 5px 0 15px 0; text-align: center; } #reader-container h4 { margin-bottom: 10px; --fontsize-h4: 1.2rem; } #reader-container ul { list-style: none; margin-top: 0; padding-left: 0; width: 100%; } #reader-container ul ul { padding-left: 0px; list-style: none; } #reader-container li { padding: 0 5px 0 0; } #reader-container li:nth-child(odd) { background-color: var(--lightergrey); } #reader-container li:nth-child(even) { background-color: var(--lightergreen); } #reader-container li.note { background-color: var(--superlightgrey); padding-bottom: 10px; margin-bottom: 10px; border: 1px solid var(--border-color); } #reader-container li:focus { color: var(--white); background-color: var(--focus-color); } #reader-container li:focus li:nth-child(odd) { color: var(--text-color); background-color: var(--lightergrey); } #reader-container li:focus li:nth-child(even) { color: var(--text-color); background-color: var(--lightergreen); } #reader-container li > label { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; text-decoration: none; padding: 4px 0; cursor: pointer; } #reader-container .image { flex: 0 0 35px; position: relative; text-align: center; } #reader-container img { max-height: 28px; position: absolute; width: auto; max-width: 100%; overflow: hidden; transform: translate(-50%, -50%); aspect-ratio: 1; } #reader-container .name { padding-right: 20px; font-weight: bold; flex:1; } #reader-container img ~ .name { padding-left: 35px; } #reader-container li.note > label > .name { font-size: larger; } #reader-container.cart .name { width: 300px; flex:1; } #reader-container.cart .preis { width: 100px; display: none; flex:1; } #reader-container .menge { width: 100px; flex:1; } #reader-container .intervall { width: 120px; flex:1; } #reader-container .summe { width: 110px; flex:1; } #reader-container .hiddenItem { display: none; } #reader-container .searchContainer { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; margin-bottom: 10px; } #reader-container .searchClear { grid-column: 2 / 2; width: min-content; color: var(--white); } #reader-container .searchInput { grid-column: 1 / 1; } /* misc */ .taxText { clear: left; margin-top: 4px; padding-left: 2px; font-size: var(--fontsize-small); } .inputContainer { display: flex; row-gap: 5px; flex-direction: column; flex-wrap: wrap; } #fix-left-column { padding: 10px; } @media screen and (min-width: 600px) { .inputContainer { display: inline-flex; column-gap: 10px; align-items: center; flex-direction: row; } #reader-container.cart .preis { display: inherit; } } /* Rezepte */ .rezeptInputForm { float: left; margin-right: 4px; } .rezeptSelectForm ~ h2 { margin-top: 30px; margin-bottom: 10px; --fontsize-h2: 25px; } #rezeptliste { column-count: 1; } #rezeptliste a { display: block; text-decoration: none; padding-bottom: 6px; } #rezeptliste h3 { margin-bottom: 10px; column-span: all; } @media screen and (min-width: 800px) { #rezeptliste { column-count: 2; } } @media screen and (min-width: 1000px) { #rezeptliste { column-count: 3; } } .icon-bar { display:flex; --fontsize-large: 22px; } .icon-bar .button-bar { margin-right: 10px; } .icon-bar .button-icon { --button-background: transparent; width: auto; border-color: transparent; color: var(--text-color); font-size: var(--fontsize-large); margin-right: 2px; } .icon-bar .button-icon:hover { --button-background: var(--lightergrey); } .edit-icon { transform: rotateY(180deg); --text-color: #85460f; } .ok-icon { --text-color: var(--green); } .abort-icon { --fontsize-large: 16px; } .trash-icon { --fontsize-large: 25px; } .icon-bar .menu-icon { padding-left: 12px; padding-right: 12px; border-color: var(--border-color); --button-background: var(--lightergrey); } .icon-bar .menu-icon:hover { --button-background: var(--superlightgrey); } .icon-bar .menu-icon.pressed { border-color: var(--main-color); --button-background: var(--superlightgrey); } .hidden { display: none; } #header-wrapper { display: flex; position: fixed; z-index: 3; width: 100%; background: var(--header-background, #fff); top: var(--header-top, 0px); transition: top 300ms; } #header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding-top: 10px; padding-bottom: 5px; width: 100%; } .toggleSearch #header { padding: 0; } #info { padding-top: var(--header-height); } /* customer text */ #customerText { margin-top: 8px; margin-bottom: 10px; display: inline-flex; align-items: center; justify-content: flex-end; align-content: baseline; column-gap: 5px; font-size: 13px; line-height: 1; --fontsize-small: 13px; --input-fontsize: 13px; --input-height: 25px; --input-padding: 2px; } .customerText_anrede { text-align: left; flex: 1; } .customerText_datum { text-align: right; } #customerText > span { padding-top: 2px; } #customerText .select-wrapper { --button-arrow-v-offset: 2px; } /* Header Werbung */ #headInformation { display: none; max-width: 100%; clear: both; } #headInformation .hi-col-item { text-align: center; margin:0 10px; } #headInformation .hi-col-item-image img { max-height: 250px; max-width: 100%; height:auto; width:auto; } #headInformation .hi-col-item-text { background: var(--main-color); color:#fff; font-size: 1rem; padding: 10px; box-sizing: border-box; } #headInformation .hi-col-item-text > a { color: #fff; width:100%; height: 100%; display: block; text-decoration: none; } #headInformation .hi-col-item-image .hi-col-item-text { margin-left: 0; margin-right: 0; } #headInformation .hi-col > div:first-child { margin-left: 0; } #headInformation .hi-col > div:last-child { margin-right: 0; } #headInformation .hi-col { width: 100%; height: auto; box-sizing: border-box; display: flex; justify-content:space-between; align-items:stretch; margin-bottom: -1px; } #headInformation > div:last-child > .hi-col { margin-bottom: 0; } #headInformation .hi-col-scroll { margin: 20px 0; box-sizing: border-box; } #headInformation .hi-col-scroll-left, #headInformation .hi-col-scroll-right { display: none; } #headInformation .hi-col > * { float: left; } #headInformation .hi-col1 > * { width: 100%; max-width: 100%; } #headInformation .hi-col2 > * { width: 50%; max-width: 50%; } #headInformation .hi-col3 > * { width: 33.33%; max-width: 33.33%; } #headInformation .hi-col4 > * { width: 25%; max-width: 25%; } #headInformation .hi-col5 > * { width: 20%; max-width: 20%; } @media screen and (max-width: 1199px) { #headInformation { margin-top: 0px;/*-20px*/ } } @media screen and (max-width: 799px) { #headInformation .hi-col3, #headInformation .hi-col4, #headInformation .hi-col5 { flex-direction: column; } #headInformation .hi-col3 > * , #headInformation .hi-col4 > * , #headInformation .hi-col5 > * { width: 100%; max-width: 100%; margin-left: 0; margin-top: 5px; } } @media screen and (max-width: 511px) { #headInformation .hi-col1, #headInformation .hi-col2{ flex-direction: column; } #headInformation .hi-col1 > * , #headInformation .hi-col2 > * { width: 100%; max-width: 100%; margin-left: 0; margin-top: 5px; } } #shop-grid-main { grid-column: 1 / -1; grid-row: 1 / 3; max-width: inherit; /* overflow: hidden; */ /* TEST TEST TEST wieder reinnehmen? */ } #shop-grid-left { grid-column: 1 / 1; grid-row: 1 / 1; display: none; } #page-wrapper > .wrapper { margin-left: 0; margin-right: 0; } #products-page { /* overflow: hidden; */ padding-bottom: 220px } #contentWrapper { min-height: calc(100vh - var(--header-height) - var(--footer-height)); } #content { padding-left: var(--padding-left); padding-right: var(--padding-right); min-height: var(--left-grid-height, inherit); overflow: hidden; } #mobile { background-color: var(--bottom-navigation-background); border-top: var(--border); position: fixed; z-index: 10; bottom: var(--nav-bottom, 0px); width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; transition: bottom 300ms; } #mobile:empty { display: none; } @media screen and (min-width: 1200px) and (not (pointer: coarse)) { #shop-grid-main { grid-column: 2 / -1; padding-left: var(--padding-left); margin-left: calc(0px - var(--padding-left)); } #page-wrapper > .wrapper { margin-left: auto; margin-right: auto; } #shop-grid-left { display: block; } .scroll-inview-container { position: static; top: var(--left-grid-top, 0px); width: var(--left-grid-width, 100%); } .scroll-inview-fixed { position: fixed; } .scroll-inview-overflow { overflow-y: auto; scrollbar-width: none; height: var(--left-grid-max, auto); } .scroll-inview-overflow::-webkit-scrollbar { display: none; /* Safari and Chrome */ } #content { padding-left: 0; padding-right: var(--padding-right); min-height: var(--left-grid-height); } } #footer { color: var(--text-color); padding-bottom: var(--nav-bottom-height, 0); } #footer a, #footer a:visited { color: var(--text-color); } #footer .cmsColLeft { padding-left: 20px; } #footer .cmsColRight { padding-right: 20px; } #social-icons { padding-top: 20px; display: flex; justify-content: center; align-items: center; } #zertifikate-logos { display: flex; justify-content: center; align-items: center; } #social-icons a, #zertifikate-logos img { padding: 0 10px; } @media screen and (max-width: 799px) { #footer .cmsColumns > * { width: 100%; margin-bottom: 20px; } } nav, nav > div, nav > div > ul { max-width: 100vw; } /* main menu top */ #main-nav { --border: 1px solid #ddd; } #main-nav.gwMenu { --padding-left: 15px; --padding-right: 15px; } #main-nav.gwTree { --padding-left: 40px; --padding-right: 0; --indent: 20px; width: 100vw; max-width: 512px; height: min-content; max-height: calc(100vh - var(--header-height, 0px) - var(--nav-bottom-height, 0px)); overflow: auto; transition: all 150ms ease-out 0s; } #main-nav > ul, #main-nav > .gwm-wrapper, #main-nav > .gwm-wrapper > ul { width: 100%; } #main-nav > ul, #main-nav > .gwm-wrapper > ul { display: flex; justify-content: space-between; } #main-nav > ul > li, #main-nav > .gwm-wrapper > ul > li { flex: 1 1 auto; } #main-nav.gwMenu > ul > li, #main-nav.gwMenu > .gwm-wrapper > ul > li { text-align: center; } #main-nav.gwMenu ul ul { --padding-right: 30px; } #main-nav.gwMenu > .gwm-wrapper .gwm-wrapper { border: var(--border); } #main-nav li { text-align: left; } #main-nav a { text-decoration: none; } #main-nav.swipe-element { top: var(--header-height, 0px);/* 50%; */ left: 0; box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px; transform: translate(var(--swipe-xpx), 0/* -50% */); } #main-nav.swipe-element-init-state-left { transform: translateX(-100%); box-shadow: none; } /* sub menu left */ #shopnav { background: var(--shopnav-background, #fff); margin: 10px 0px 20px 0px; max-width: 100%; width: 100%; } #shopnav ul { width:100%; list-style-type: none; margin: 0; padding: 0; } #shopnav > .gwm-wrapper { max-width: inherit; display: flex; } #shopnav a { border-bottom: 1px solid var(--border-color); max-width: inherit; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; --padding-left: 10px; --padding-right: 10px; --padding-top: 8px; --padding-bottom: 8px; text-decoration: none; } #shopnav .gwm-isOpen > a, #shopnav .gwm-isOpen ul > li > a, #shopnav .gwm-isOpen .gwm-wrapper > ul > li > a { white-space: normal; } /* product count */ li[data-product-count] { --padding-right: 57px; } li[data-product-count]::before { content:attr(data-product-count); position: absolute; right: 20px; top: 15px; color: var(--badge-color); background-color: var(--badge-background); border-radius: 10px; font-size: 9px; padding: 3px; min-width: 10px; text-align: center; } #shopnav.gwMenu li[data-product-count] > a { --padding-right: 17px; } #shopnav.gwMenu li[data-product-count]::before { right: 2px; top: 8px; } /* breadcrumb */ #products-breadcrumb { max-width: 100%; overflow-x: clip; } #product-breadcrumb { max-width: 100%; overflow-x: clip; display:flex; justify-content: space-between; flex-direction: row; position: relative; } #product-breadcrumb .btn { --input-height: 22px; position: relative; align-self: center; } .breadcrumb { display: flex; list-style-type: none; padding-left: 0; margin: 0; max-width: calc(100% - 100px); /* overflow-x: auto; overflow-y: hidden; */ } .breadcrumb > li { color: var(--breadcrumb-color); background: var(--breadcrumb-background); padding: 2px 10px 3px 10px; margin-right: 20px; position: relative; } .breadcrumb > li::after { content: var(--breadcrumb-divider, '/'); padding: 2px 10px 3px 10px; background-color: transparent; color: var(--breadcrumb-divider-color, var(--breadcrumb-color)); position: absolute; transform: translate(8px, -50%); top: 50%; right: -13px; } .breadcrumb > li:last-child::after { content: none; } .breadcrumb > li a { color: var(--breadcrumb-color); text-decoration: none; white-space: nowrap; } /* breadcrumb submenu */ .breadcrumb li > ul { list-style-type: none; position: absolute; z-index: 2; left: 0; top:100%; display: none; background-color: var(--shopnav-background, #fff); color: var(--text-color); box-shadow: var(--box-shadow); padding: 0; } .breadcrumb li > ul > li { position: relative; } .breadcrumb li:hover > ul { display: block; min-width: 100%; } .breadcrumb li > ul a { display: block; white-space: nowrap; color: var(--text-color); padding: 10px; } .breadcrumb li > ul a:hover { background-color: var(--hover-bg-color, #f0f0f0); } .breadcrumb li[data-product-count] { --padding-right: 20px; } .breadcrumb li[data-product-count] a { display: block; padding-right: var(--padding-right, 0); } .breadcrumb > li[data-product-count]::before { right: 2px; top: 2px; } .breadcrumb li > ul > li[data-product-count]::before { right: 2px; top: 10px; } .bc-skipclick { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(100, 100, 100, 0); } @media screen and (min-width: 800px) { .breadcrumb { overflow: initial; } } /* Kundennavigation oben */ .kunden-navigation { --level: 10; display: flex; justify-content: flex-end; align-items: center; z-index: 1; } .kunden-navigation > * { --padding-top: 3px; --padding-bottom: 3px; --padding-right: 3px; --padding-left: 3px; --item-background-color : transparent; --item-background-color-hover : transparent; } .kunden-navigation li { height: max-content; text-align: center; } .kunden-navigation a::before { position: absolute; top: 3px; left: 50%; transform: translateX(-50%); } .kunden-navigation .content, .kunden-navigation li > a { font-size: 14px; text-decoration: none; text-align: left; } .kunden-navigation > .gwm-wrapper > ul > li > .content, .kunden-navigation > .gwm-wrapper > ul > li > a { font-size: 11px; padding-top: 30px; text-decoration: none; text-align: center; } .kunden-navigation > .gwm-wrapper .gwm-wrapper { --padding-top: 15px; --padding-left: 15px; --padding-bottom: 15px; --padding-right: 30px; --item-background-color : #fff; --item-background-color-hover : #eee; } .kunden-navigation .gwTree.gwm-wrapper { --padding-left: 30px; --padding-right: 15px; } /* Kontomenu */ #kontomenu { --item-background-color : #fff; --item-background-color-hover : #eee; } /* allgemein */ /* #customer-nav = Warenkorb, Abokorb, Merkzettel */ #customer-nav { --padding-top: 7px; --padding-left: 10px; --padding-bottom: 7px; --padding-right: 10px; --border-radius: 8px; --border-color: #ddd; --border-size: 1px; --fontsize: 16px; margin-bottom: 20px; padding-left: 7px; border-bottom: var(--border-size) solid var(--border-color); } #customer-nav .gwm-wrapper { max-width: 100%; } #customer-nav li { border: var(--border-size) solid var(--border-color); margin-right: 10px; border-top-left-radius: var(--border-radius); border-top-right-radius: var(--border-radius); border-bottom-left-radius: 0; border-bottom-right-radius: 0; top: var(--border-size); overflow:auto; } #customer-nav li:not(.selected) { --item-background-color : #fafafa; --item-background-color-hover : #fff; } /* #customer-nav li:not(.selected) + li:not(.selected) { border-left: none; } */ #customer-nav li.selected, #customer-nav li.gwm-hover { border-bottom-color: var(--white); } #customer-nav .gwm-content, #customer-nav a { font-weight: normal; border-top-left-radius: var(--border-radius); border-top-right-radius: var(--border-radius); border-bottom-left-radius: 0; border-bottom-right-radius: 0; text-overflow: ellipsis; overflow: hidden; } #customer-nav .selected > .gwm-content, #customer-nav .selected > a { background-color: var(--white); } #navBottom { width: 100%; } #navBottom > ul { width: 100%; justify-content: space-around; } @media screen and (min-width: 800px) { #customer-nav { --padding-top: 10px; --padding-left: 15px; --padding-bottom: 10px; --padding-right: 15px; --fontsize: 20px; margin-bottom: 30px; padding-left: 10px; } #kunden-navigation, #navBottom ul, .kunden-navigation ul { column-gap: var(--nav-icon-gap); } } #productsInCart, .productsInCart { transform: translate(-31px, -33px); position: absolute; text-align: center; line-height: 11px; font-size: 9px; padding: 2px 5px; border-radius: 10px; background-color: var(--products-in-cart-bg-color); color: var(--products-in-cart-color); pointer-events: none; } #productsInCart:empty, .productsInCart:empty { display: none; } .toOrder { flex: 1; display: inline-block; } .preventOrderMessage { background-color: var(--warning-color); color: var(--white); padding: 10px; display: inline-block; } #cartLieferdatum { margin: 20px 0; } #cartLieferdatum > .form-wrapper > div { display: flex; column-gap: 10px; flex-wrap: wrap; align-items: center; } .cartLieferdatumHead { font-size: var(--fontsize-large); display: inline-block; margin: 0 10px 0 0; } #cartHeader { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } .cartWoche { font-size: 24px; color: var(--main-color); padding: 0 0 10px 0; } .cartButtons { display: flex; flex-wrap: wrap; justify-content: space-between; text-align: right; } .cartButtonsTop { margin-bottom: 20px; } .cartButtonsBottom { margin-top: 20px; } /* message if cart is empty */ .cartEmpty { text-align: center; font-size: var(--fontsize-large); } /* button to empty the cart */ .btn.emptyCart { background-color: var(--warning-color); border-color: var(--warning-color); --button-fontsize: 11px; --button-padding: 2px 4px; --input-height: auto; } /* cart product */ #cart .product-input { margin-top: 0; height: 100%; align-content: center; } .cartDisabled { text-align: center; } .cartPrice { display: flex; justify-content: end; align-items: center; align-content: center; grid-area: price; font: var(--font-cart-price-value); /* padding-top: 8px; */ padding-right: 20px; flex-wrap: wrap; } .cartDelete { grid-area: deleteFromCart; } .inactivePrice { color: var(--price-color-inactive); } #cart .tile-wrapper:hover .product, #cart .tile-wrapper.clicked .product, #cart .tile-wrapper:focus-within .product { padding: 0; } #cart .view-list .tile-wrapper > .form-wrapper { grid-template-columns: 80px 1fr 100px; grid-template-rows: auto; grid-template-areas: 'image product product' 'productInput productInput price' /*'product-bottom product-bottom product-bottom'*/; column-gap: 10px; row-gap: 0; padding-bottom: 0; } #cart .view-list .productName { min-height: auto; } #cart .grundpreis { height: initial; font-size: initial; } .cartPriceData { margin-bottom: 3px; } .cartPriceData * { display: inline-block; font-size: var(--fontsize-small); padding-right: 10px; } .cartPriceData > * { display: inline-block; } #cart .tile-wrapper .importantMessage { margin: 0 0 3px 0; padding: 2px 5px; font-size: var(--fontsize-small); } .cartProductData { display: flex; flex-direction: column; justify-content: space-evenly; height: 100%; margin-left: 10px; } #cart .view-list .cartProductData > * { padding-bottom: 0; margin-bottom: 0; min-height: 0; height: auto; } /* Aktionsprodukte */ #cart .tile-wrapper.aktionsprodukt-warnmenge .aktionsprodukt-message { position: static; transform: none; font-size: revert; } /* cart footer */ .cartSum { margin-top: 20px; margin-bottom: 20px; font-size: var(--cart-sum-font-size, 16px); line-height: var(--cart-sum-lineheight, calc(var(--cart-sum-font-size, 16px) + 6px)); } .cartSumCols { display: flex; } .cartSumText { flex: 1; } .cartSumValue { font-weight: bold; text-align: right; min-width: 50px; padding-left: 10px; padding-right: 10px; } .cartSumText > div, .cartSumValue > div { padding: 0; display: inline-block; } .cartDividerTop { padding-top: var(--cart-sum-padding); margin-top: var(--cart-sum-padding); width: 100%; border-top: var(--border); } #warenwert, #rechnungsbetrag, #credit { font-size: var(--cart-sum-font-size-large, 22px); font-weight: bold; } #warenwert { padding-top: var(--cart-sum-padding); padding-bottom: var(--cart-sum-padding); } #mindestbestellwert { padding-bottom: var(--cart-sum-padding); } #rabattmeldung { padding-top: var(--cart-sum-padding); line-height: 21px; } #aktionscode { margin-top: 40px; --fontsize-h2: 1.4rem; } .couponMsg { background: var(--hint-color); color: var(--white); padding: 10px; margin: 20px 0; } .couponInvalidMsg { background: var(--warning-color); } #cart .view-list .tile-wrapper.aktionsprodukt-warnung, #orderUeberpruefen .view-list .tile-wrapper.aktionsprodukt-warnung { border-color: var(--warning-color); } #orderUeberpruefen .view-list .tile-wrapper > .form-wrapper { grid-template-areas: 'image product product' 'price price price'; grid-template-columns: 80px 1fr auto; } #orderUeberpruefen .cartQuantityPrice { grid-area: price; text-align: right; padding: 10px; align-self: flex-end; height: 100%; background-color: var(--order-data-background); display: flex; flex-direction: row; justify-content: space-between; align-items: center; background-image: var(--order-data-background-image); } #orderUeberpruefen .aktionsprodukt-warnung .cartQuantityPrice { color: var(--white); background-color: var(--warning-color); } #orderUeberpruefen .cartPreis { font-size: 20px; font-weight: bold; flex: 1; } #orderUeberpruefen .cartQuantity { font-size: 16px; white-space: nowrap; font-weight: bold; flex: 1; } #orderUeberpruefen .menge-text { font-size: 14px; font-weight: normal; } #orderUeberpruefen .product-interval { text-align: left; font-size: 14px; flex: 1; } #orderUeberpruefen .notAllProductsAvailableMessage { width: 100%; } #orderUeberpruefen .notAllProductsAvailableMessage .btn { float: right } /* Orderstatus */ .orderStatus { padding: 10px; color: var(--status-color, var(--important-color)); background-color: var(--status-background, var(--important-background)); } .orderStatus1 { padding: 10px; background-color: var(--main-color); } .orderStatus h2 { color: var(--important-color); margin-top: 0; margin-bottom: 10px; } .orderStatusChanged { padding: 3px 8px; text-align: center; font-size: 12px; line-height: 1.5; color: var(--status-color, var(--important-color)); background-color: var(--status-background, var(--important-background)); } @media screen and (min-width: 880px) { #cart .view-list .tile-wrapper > .form-wrapper { grid-template-columns: auto 1fr auto 100px; grid-template-areas: 'image product productInput price' /*'product-bottom product-bottom product-bottom product-bottom'*/; } #orderUeberpruefen #cart .view-list .tile-wrapper > .form-wrapper { grid-template-columns: auto 1fr auto; grid-template-areas: 'image product price' 'image product price'; column-gap: 10px; } #orderUeberpruefen .cartQuantityPrice { flex-direction: column; align-items: flex-end; } #orderUeberpruefen .cartQuantity { font-weight: bold; } #orderUeberpruefen .cartPreis { align-self: flex-end; } .cartProductData { margin-left: 0; } #cart .product-input { max-width: 300px; width: 300px; } } #cartPreview { --product-border: 1px solid var(--border-color); position: fixed; top: 50%; right: 0; z-index: var(--z-index, 10); padding: 5px; border: var(--product-border); box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px; background: var(--background); color: var(--text-color); transition: right .5s; max-width: 100vw; max-width: 90vh; width: 100vw; overflow: hidden; transform: translate(var(--swipe-xpx, 100%), -50%); } #cartPreviewFixContainer { display: none; justify-content: center; } #cartPreviewFixContainer > * { flex: 0; } .cartPreviewFixable #cartPreviewFixContainer { display: flex; } #cartPreview.swipe-element-init-state-right { transform: translate(100%, -50%); } #productsInCartPreview { font-size: 10px; color: var(--white); background-color: var(--orange); border-radius: 10px; padding: 3px 5px; width: auto; height: 16px; line-height: 8px; display: inline-block; transform: translate(18px, -40px); pointer-events: none; } @media screen and (min-width: 512px) { #cartPreview { width: auto; } } @media screen and (min-width: 1200px) and (not (pointer: coarse)) { #cartPreview { max-width: min(90vw, var(--cartpreview-width, 90vw)); } #cartPreviewFixContainer { display: flex; } #cartPreview.cartPreviewFixedInit { transition: none!important; } #cartPreview:not(.cartPreviewFixed), .nonfixedCartPreviewArticle #cartPreview { opacity: 0; } #cartPreview.cartPreviewFixed { --swipe-xpx: 0px; } } #cartPreview .backdrop { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: calc(var(--z-index, 10) -1); } .cartPreviewTop { position: relative; } #cartPreviewClose { position: absolute; right: 0; background: var(--button-background); height: var(--close-size, 38px); width: var(--close-size, 38px); display: flex; align-items: center; justify-content: center; color: var(--button-color); border-radius: 0; } #cartPreview form { display: flex; flex-direction: row; margin: 10px 0 0 0; } #cartPreview form > .select-wrapper, #cartPreview form > select { flex: 2; } #cartPreview form > input { flex: 1; } #cartPreview .lieferdatum > div { background-color: var(--orange); color: var(--white); padding: 10px 50px 10px 10px; font-size: var(--fontsize-large); } #cartPreviewGrid { width: 100%; display: grid; grid-template-columns: 50px 40px 1fr 75px; max-height: 90vh; overflow: auto; } #cartPreviewGrid > * { white-space: nowrap; padding: 2px 0; } #cartPreviewGrid .cartPreviewHeadline { grid-column: 1 / -1; text-align: center; background-color: var(--lightergrey); margin-top: 10px; margin-bottom: 3px; padding: 3px 5px; font-weight: bold; text-align: left; } #cartPreview .cartPreviewName { overflow: hidden; text-overflow: ellipsis; } #cartPreviewGrid .cartPreviewQuantity { padding-right: 10px; } #cartPreview h3 { text-align: left; margin: 0; } #cartPreview .cartNavigation { list-style-type: none; padding-left: 0; text-align: center; } #cartPreview .cartNavigation li { display: inline-block; padding: 5px 10px; } #cartPreview a:not(.btn) { text-decoration: none; color: var(--text-color); } .cartPreviewQuantity, .cartPreviewPrice, .cartPreviewSum { text-align: right; justify-self: end; } #cartPreviewGrid .cartPreviewSum { margin: 15px 0; font-weight: bold; } .cartPreviewBtn { margin: 10px 0; grid-column: 1 / span 2; } .cartPreviewSumText { grid-column: 3 / 4; } .cartPreviewSumValue { grid-column: 4 / -1; } #shopOrderMenu ul { display: flex; justify-content: space-evenly; column-gap: 10px; list-style-type: none; margin: 0; padding: 0; } .shopOrderForm, #orderContent { width: 800px; max-width: min(100%, 100vw); margin: 0 auto; } #orderContent .cmsHeadline > br { display: none; } #IhrTextContainer, #orderKundendaten, #orderProdukte, #Datenspeicherung, #orderNichtLieferbar, #orderAbos, #sepadata { margin-top: 20px; } #orderAdresse, #orderLieferadresse, #orderKontakt, #orderVerwendeLieferadresse, .shopPayment { margin-bottom: 60px; } #IhrTextContainer strong { display: block; } #IhrText { width: 100%; } .opaqueBack { width:100%; height:100%; background-color:#666666; opacity:0.8; filter:alpha(opacity=80); -moz-opacity:0.8; -khtml-opacity:0.8; position:absolute; top:0px; left:0px; bottom:0px; right:0px; z-index:999999; } .sendOrder, .agbNotConfirmedText { position:absolute; z-index:1000000; } .sendOrder { padding:20px; background-color:#FFF; font-size:20px; } #Datenspeicherung { --main-color-dark: var(--white); padding: 10px; margin-bottom: 5px; background-color: var(--orange); } #Datenspeicherung * { color: var(--white); font-size: var(--fontsize-large); margin-bottom: 0; } #Datenspeicherung label { --label-padding: 0 0 0 8px; --line-height: 1.5; margin-bottom: 0; } #Datenspeicherung input[type="checkbox"]:not(.switch)::after { color: var(--text-color); } #orderKundendaten tr:first-child td { padding-bottom: 10px; } .orderInput { display: grid; grid-template-columns: 1fr 2fr 30px; max-width: 100%; margin-bottom: 10px; align-items: center; } .orderInput label { padding-right: 20px; } .orderBlockHead { background-color: #f4f7ee; line-height: inherit; padding: .5em .2rem .5em 30px; position: relative; z-index: 1; } #customerPerson2 { margin: 40px 0 10px; } #customerPerson2 .customerPropertyInner { grid-column-start: 1; grid-column-end: 4; padding-left: 0; margin: 20px 0 10px; } #orderCustomerAccount input[type="checkbox"], #customerPerson2 input[type="checkbox"] { z-index: 1; left: 5px; } #orderCustomerAccount input[type="checkbox"] + label { margin-bottom: 0; margin-left: 8px; } #orderCustomerAccount .orderInput, #customerPerson2 > .orderInput { grid-template-columns: 26px 2fr 30px; } #orderCustomerAccount .customerPropertyOuter { margin-bottom: 40px; } #customerErinnerungBest > * > .orderInput > label, #customerNewsletter > * > .orderInput > label, #customerPerson2 > .orderInput > label { z-index: 0; position: relative; width: auto; margin: 0 -28px 0 -24px!important; line-height: inherit; --label-padding: 7px 5px 7px 29px; } .orderInputIstPDFMailversand label { padding-left: 0; } .customerHintText { margin: 10px; } .customerPropertyInner { padding-left: 20px; } .orderInput .required { padding-left: 4px; } .istPDFMailversand .orderBlockHead, .istPDFMailversand .orderBlockHead { background-color: transparent; } .orderInput.orderInputBestaetigungIBAN { grid-template-columns: auto 2fr 30px; } .orderInput.orderInputBestaetigungIBAN { margin-top: 40px; margin-bottom: 20px; } #BestaetigungIBAN { align-self: flex-start; } #BestaetigungIBAN ~ label { padding-left: 4px; } .requiredFields, .orderNavButtons, .datenschutz { margin-bottom: 20px; } #Datenspeicherung p { margin-top: 0; } .pauseSubmitForm textarea { position: absolute; visibility: hidden; width: 0; height: 0; } input.pauseButton { width: 100px; } form .popupMessage { display: none; } .pause { display: block; } .pause label + span { white-space: nowrap; } #liefergebiet-result > .cmsFlexible > a { display: block; margin-bottom: 10px; align-content: center; text-align: center; } @media only screen and (max-width: 512px) { .cmsColumns > * > .cmsCol.neukundenlogin { margin-top: 60px; } .cmsColumns > * > .cmsCol.neukundenlogin, .cmsColumns > * > .cmsCol.kundenlogin { display: flex; flex-direction: column; align-items: center; } } @media only screen and (max-width: 600px) { #content { grid-template-columns: 30% 1fr; grid-column-gap: 5px; } } @media only screen and (min-width: 600px) { .pause .orderInput { grid-template-columns: auto 2fr 30px; } .pause { display: flex; } } /* search bar */ #searchWrapper { width: 100vw; max-width: 100vw; display: flex; justify-content: center; position: relative; z-index: var(--z-index, 1100); } #searchWrapper.centeredH { position: fixed; left: 50%; transform: translateX(-50%); } #searchWrapper > form { flex: 1; display: flex; justify-content: center; } #searchFieldContainer { display: flex; justify-content: center; flex: 1; } #searchField { flex: 1; } #searchField:focus, #seachFieldSubmit:focus { position: relative; z-index: 1; } #seachFieldSubmit { width: auto; } /* search result */ #searchResult { z-index: var(--z-index, 1100); width: max-content; height: max-content; min-width: 100%; min-height: 200px; max-width: 100vw; max-height: calc(100vh - var(--search-result-offset)); overflow: hidden; position: absolute; top: 100%; left: 0px; padding: var(--search-result-padding); background-color: #eee; display: flex; flex-direction: column; justify-content: space-between; } #searchResult.centered { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); } #searchResult.centeredH { position: fixed; left: 50%; transform: translateX(-50%); } #searchResult button { margin: 10px auto 0px auto; width:auto; min-width: 40%; align-self: center; } .searchResultGroups { position: relative; display: grid; grid-template-rows: min-content; grid-auto-rows: auto 1fr; column-gap: 10px; max-height: calc(100vh - 200px); max-width: 100%; white-space: nowrap; } .visibleSearchGroups1 { --visible-search-groups: 1; } .visibleSearchGroups2 { --visible-search-groups: 2; } .visibleSearchGroups3 { --visible-search-groups: 3; } /* .hasCollapsible added when collapsible breakpoint reached, see BioshopSearch.js */ .searchResultGroups { height: calc(100vh - 2*var(--search-result-padding)); width: max(100%, var(--search-result-width)); } #shopSearchResult .searchResultGroups { height: calc(var(--search-result-height) + var(--search-result-headline-height) + 2px); } .searchResultGroup { display: contents;/* flex; */ flex-direction: column; flex: 1 1 auto; max-height: 100%; /* min-width: 300px; */ overflow: hidden; border: var(--border); } .searchResultGroup.collapsible-active { border: none; } .searchResultGroup ul { flex: 1; overflow: auto; list-style-type: none; padding-left: 0; max-height: 100%; margin: 0; background-color: #fff; border-left: var(--border); border-right: var(--border); border-bottom: var(--border); } .searchResultGroup.collapsible-active ul { grid-row: 2; grid-column: 1 / span var(--visible-search-groups); } .searchResultGroup.collapsible-active.collapsible-not-collapsed ul { display: block; /* height: calc(100% - 2*var(--search-result-padding)); */ width: max(100%, var(--search-result-width)); } .searchResultGroup.collapsible { flex: 1; } .searchResultGroup.collapsible-active > *:last-child { border-top: var(--collapsible-border-size) solid var(--collapsible-border-color); } .searchResultGroup a { display: block; padding: 4px 8px; background-color: var(--search-result-bg-color-odd); text-overflow: ellipsis; max-width: 100vw; overflow: hidden; } .searchResultGroup li:nth-child(even) a { background-color: var(--search-result-bg-color-even); } .searchResultGroup li.current a { color: var(--search-result-color-current); background-color: var(--search-result-bg-color-current); } .searchResultGroup li a:hover { color: var(--search-result-color-hover); background-color: var(--search-result-bg-color-hover); } .searchResultGroup a, .searchResultGroup a:visited, .searchResultGroup a:active { text-decoration: none; } .searchResultGroup h3 { font-weight: bold; padding: 5px 3px; white-space: nowrap; display: flex; align-items: center; background-color: var(--search-resultgroup-bg-color, var(--main-color)); color: var(--search-resultgroup-color, var(--white)); margin: 0 0; text-align: center; grid-row: 1; border-left: var(--border); border-right: var(--border); border-top: var(--border); } .searchResultGroup h3 > .collapsible-text > span { display: none; } .searchResultGroup .collapsible-text { flex: 1; display: block; overflow: hidden; text-overflow: ellipsis; max-width: 100%; white-space: nowrap; width: 100%; padding-left: 3px; pointer-events: none!important; } .searchResultGroup .collapsible-count { display: none; background-color: var(--badge-background); color: var(--badge-color); border-radius: 16px; padding: 4px 7px; width: auto; height: 22px; font-size: var(--search-count-fontsize, 12px); margin-left: 10px; pointer-events: none!important; } #shopSearchResult { padding: 10px; margin-top: 30px; margin-bottom: 30px; border: var(--border); background-color: #fafafa; display: grid; } #shopSearchResult h1 { margin-top: 0; } .searchListEmpty:not(.searchListEmptyFilter) { height: 100%; min-height: 130px; } #shopSearchResult .searchResultGroup ul { max-height: var(--search-result-height); height: var(--search-result-height); } .search-close-wrapper { text-align: center; } @media screen and (min-width: 1200px) and (not (pointer: coarse)) { #searchWrapper { width: var(--search-width, 200px); max-width: var(--search-max-width, 300px); } .searchResultGroup .collapsible-count { display: inline-block; } } #activeFilterCount, .activeFilterCount { transform: translate(-5px, -32px); position: absolute; text-align: center; line-height: 11px; font-size: 9px; padding: 2px 5px; border-radius: 10px; background-color: var(--active-filter-count-bg-color); color: var(--active-filter-count-color); } #activeFilterCount:empty, .activeFilterCount:empty, .activeFilterCount0 { display: none; } #filter { background: var(--filter-background, #fff); padding: 10px 10px; text-align: left; } #filter ul, #filter li { list-style-type: none; } #filter ul { padding-left: 0; margin: 0; width: 100%; } #filter li { padding-top: 2px; padding-bottom: 2px; display: flex; white-space: nowrap; } #filter h2 { margin: 0px 0 10px 0; } #filter h3 { margin: 5px 0 10px 0; padding-top: 5px; border-top: var(--border); } #filter:not(.popup) .filterContainer .innerForm.collapsible-active, #filter.popup .filterContainer .innerForm.collapsible-active:not(.collapsible-collapsed), #pGS .innerForm .innerForm.collapsible-active:not(.collapsible-collapsed), #filterVegetarisch { margin-bottom: 30px; } #filterSonderangebote.filterContainer, #filterVegan.filterContainer{ margin-bottom: 0; } #filter label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #filter label:hover { color: var(--border-hover); } #filterRegion label { width: auto; } #filter ul.hasMore { height: var(--filter-compact-height, 97px); overflow: hidden; } #filter .innerForm:hover ul.hasMore-hover, #filter ul.hasMore-hover.hover, #filter ul.hasMore-clicked { height: auto; } #filter .submitButtons { display: none; /*inline-flex;*/ --fontsize: 12px; } #filter .regionInfo { background-color: var(--badge-background); color: var(--badge-color); border-radius: 10px; text-decoration: none; width: 18px; height: 18px; display: inline-block; text-align: center; font-weight: bold; margin-left: 5px; } #filter .mehr { padding-left: 28px; padding-top: 10px; } #filter a.mehr, #filter a.mehr:visited { color: var(--text-color); display: block; text-decoration: none; } #filter .filterContainer .innerForm:hover ul.hasMore ~ div.mehr, #filter .filterContainer ul.hover.hasMore ~ div.mehr { display: none; } #filter .filterClose { display: none; } #filter input[type="checkbox"] ~ label { margin-bottom: 0; } .openFilterGroup { width: auto; float: right; padding-right: 8px; display: none; } input.removeFilter { width: auto; float: right; --input-height: 20px; --button-background: var(--red); border-color: var(--red); --button-padding: 0 4px; overflow: visible; } /* filter as popup */ .filter-message { --message-height: inherit!important; } .collapsible-not-collapsed .openFilterGroup { transform: rotate(-90deg) translate(3px, -4px); } /* search result filter */ .searchResultFilter > h3 { --fontsize-h3: 1rem; font-weight: bold; } /* actual filter */ .filterTextContainer { display: flex; flex-wrap: wrap; align-items: baseline; --input-height: 31px; } .filterText button, .filterText .btn { width:auto; background-color: var(--white); border: 1px solid var(--red); color:var(--red); border-radius: 11px; padding: 3px 5px 3px 10px; margin: 0 5px 2px 0!important; line-height: normal; --input-height: auto; } .filterText button::after, .filterText .btn::after { content: '\2716'; padding-left: 10px; padding-right: 5px; color:var(--red); } .filterText .btn::after { padding-left: 5px; } .filterText, .filterText form, .filterText .innerForm { display: contents; } .filter-label > input[type=checkbox] { visibility: hidden!important; opacity: 0!important; min-width: initial!important; width: 0!important; height: 0!important; padding: 0!important; margin: 0!important; font-size: 0!important; line-height: 0!important; border: none!important; outline: none!important; } .filter-label > input[type=checkbox]::after { content: none; } #filter .badge { display: none; } /* reset filter */ #resetFilterContainer { position: absolute; padding: 10px 10px 10px 10px; background-color: var(--white); z-index: 2; display: none; flex-wrap: wrap; width: 210px; } .scrolled #resetFilterContainer { position: sticky; top: var(--header-height); box-shadow: 0 15px 25px #EBE9E3EE; } #resetFilterContainer h3 { margin: 0px 0 10px 0; --fontsize-h3: .9rem; color: var(--grey); font-style: italic; font-weight: normal; } #resetFilterContainer .filterText { --button-fontsize: 12px; } #resetFilterContainer .filterText button, #resetFilterContainer .filterText .btn { height: min-content; padding: 0 2px 0 5px; margin: 0 2px 2px 0 !important; border-radius: 0; } #resetFilterContainer .filterText button::after, #resetFilterContainer .filterText .btn::after { padding-left: 5px; padding-right: 3px; } #resetFilterContainer ~ #content #shop-grid-left { margin-top: var(--reset-filter-container-height, 0); } #products-wrapper, #product-wrapper { display: flex; flex-direction: column; } #products, #product { flex: 1; } #product-wrapper { display: none; } #product-list { margin-right: 0; } /* product tile */ .tile-list { list-style-type: none; padding-left: 0; } .tile-list { display: grid; grid-template-columns: repeat(auto-fill, calc(var(--product-scale) * var(--product-width))); justify-content: center; grid-auto-flow: row; column-gap: var(--product-margin-right); row-gap: var(--product-margin-bottom); } .tile-wrapper { --product-scale-inverse: calc(1 - var(--product-scale)); --factor: calc(var(--product-scale-inverse) * var(--product-scale)); position: relative; transform: scale(var(--product-scale)); transform-origin: right bottom; width: 100%;/* calc(var(--product-scale) * var(--product-width)); */ height: calc(var(--product-scale) * var(--product-height) + var(--scale-height-correction)); max-height: calc(var(--product-scale) * var(--product-height) + var(--scale-height-correction)); display: inline-block; /* overflow: hidden; */ margin-left: calc(var(--factor) * var(--product-width) * -1); margin-top: calc(var(--factor) * var(--product-height) * -1 - var(--scale-height-correction) * var(--product-scale-inverse)); /* margin-right: var(--product-margin-right); margin-bottom: var(--product-margin-bottom); */ background: var(--product-background, #fff); border: var(--product-border); } .tile-wrapper:hover, .tile-wrapper.clicked, .tile-wrapper.hovered, .tile-wrapper:focus-within { --width-diff: calc(var(--product-width-hover) - var(--product-width)); --height-diff: calc(var(--product-height-hover) - var(--product-height)); --width-diff2: calc(var(--product-scale) * var(--width-diff) / 2); --margin-correction: calc(0px - calc(var(--scale-height-hover-correction) - var(--scale-height-correction)) * var(--product-scale)); z-index: var(--z-index, 2);/* 1 needed to cover other products, 2 cover menu */ width: calc(var(--product-scale) * var(--product-width-hover)); height: calc(var(--product-scale) * var(--product-height-hover) + var(--scale-height-hover-correction)); max-height: calc(var(--product-scale) * var(--product-height-hover) + var(--scale-height-hover-correction)); /* overflow: auto; */ margin-left: calc(var(--factor) * var(--product-width-hover) * -1 - var(--width-diff2)); margin-top: calc(var(--factor) * var(--product-height-hover) * -1 - var(--scale-height-hover-correction) * var(--product-scale-inverse)); margin-right: calc(0px - var(--width-diff) /* + var(--product-margin-right) */ + calc(var(--factor) * var(--width-diff) + var(--product-scale-inverse) * var(--width-diff)) + var(--width-diff2)); margin-bottom: calc(var(--margin-correction) - var(--height-diff) /* + var(--product-margin-bottom) */ + calc(var(--factor) * var(--height-diff) + var(--product-scale-inverse) * var(--height-diff))); background: var(--product-background-hover, #fff); } .tile-wrapper.hovered:hover { --z-index: 3; --product-height-hover: fit-content; } .tile-wrapper:hover > .form-wrapper, .tile-wrapper.clicked > .form-wrapper, .tile-wrapper.hovered > .form-wrapper, .tile-wrapper:focus-within > .form-wrapper { overflow: visible; /* auto */ } .tile-wrapper > .form-wrapper { overflow: hidden; height: calc(var(--product-scale) * var(--product-height) + var(--scale-height-correction) - var(--product-padding)); display: grid; grid-template-areas: var(--product-areas); grid-template-columns: var(--product-row-heights); } .tile-wrapper.special-info { background-color: var(--special-info-background); } .tile-wrapper.special-info h1, .tile-wrapper.special-info h2 { margin: var(--headline-margin); font-size: var(--fontsize-large); } .product { padding: var(--product-padding); grid-area: product; display: grid; } .tile-wrapper.special-info .product { padding: var(--product-padding) var(--product-padding) 0 var(--product-padding); } .product-bottom { background: var(--product-background, #fff); padding: 0 var(--product-padding) var(--product-padding) var(--product-padding); grid-area: product-bottom; display: flex; flex-direction: column; justify-content: space-between; align-self: flex-end; } .productName { display: block; height: 38px; overflow: hidden; } .product-price { margin-bottom: 10px; display: flex; align-items: baseline; justify-content: flex-end; } .product-input { margin-top: 35px; } .offerImg { position: absolute; z-index: 2; top: -15px; right: -15px; } .add-to-note { position: absolute; z-index: 2; top: 10px; left: 10px; max-width: fit-content; } .backdrop.clickedProduct { background-color: rgba(0, 0, 0, 0.2); } .shop-undeliverable { background-color: var(--important-background); color: var(--white); text-align: center; padding: 5px; height: fit-content; } .productMessage { background-color: var(--important-background); color: var(--white); transform: rotate(-18deg); height: fit-content; width: fit-content; padding: 5px 10px; } .image-area .productMessage { grid-column: 1 / -1; grid-row: 1 / -1; align-self: center; justify-self: center; } /* Aktionsprodukte */ .tile-wrapper .aktionsprodukt-message { transform: rotate(-15deg); top: 50px; } /* product labels */ .product-labels { min-height: 50px; } .product-labels > * { margin-bottom: 1px; } .productSpecialPrice { margin-top: 10px; } .flagge { outline: 1px solid #eee; } /* Grundpreis */ .grundpreis { height: 20px; flex-wrap: wrap; } /* tile-view */ .view-tile .tile-wrapper > .form-wrapper { display: grid; grid-template-areas: 'image' 'product' 'product-bottom'; grid-template-rows: auto auto 1fr; grid-template-columns: 1fr; } /* tile-view-compact */ .view-tile-compact .tile-wrapper > .form-wrapper { display: block; } .view-tile-compact .product-price { white-space: nowrap; justify-content: space-between; } .view-tile-compact .tile-wrapper:hover .product-price, .view-tile-compact .tile-wrapper:focus-within .product-price { justify-content: flex-end; } .view-tile-compact .productPrice { font-size: 1.3rem; } .view-tile-compact .tile-wrapper:hover .productPrice, .view-tile-compact .tile-wrapper:focus-within .productPrice { font-size: var(--price-fontsize); } .view-tile-compact .product-unit { text-align: left; } .view-tile-compact .price-currency { letter-spacing: -2px; } .view-tile-compact .offerImg { top: -29px; right: -27px; transform: scale(.5); } .view-tile-compact .tile-wrapper:hover .offerImg, .view-tile-compact .tile-wrapper:focus-within .offerImg { top: -15px; right: -15px; transform: scale(1); } .view-tile-compact .add-to-note { top: 0; left: 0; } /* list-view */ .view-list .tile-wrapper > .form-wrapper { display: grid; grid-template-areas: 'image product' 'product-bottom product-bottom'; grid-template-columns: 30% 1fr; grid-template-rows: auto; height: auto; } .view-list .tile-wrapper:hover > .form-wrapper, .view-list .tile-wrapper.clicked > .form-wrapper, .view-list .tile-wrapper.hovered > .form-wrapper, .view-list .tile-wrapper:focus-within > .form-wrapper { height: auto; } .view-list .product { max-width: 100%; overflow: hidden; } .view-list .productName { white-space: normal; height: auto; min-height: 23px; text-overflow: ellipsis; } .view-list .product-labels { height: 32px; min-height: 0; } .view-list .offerImg { top: -29px; right: -27px; transform: scale(.5); } .view-list .add-to-note { top: 0; left: 0; } .view-list .deposit { height: auto; } /* compact */ .view-list .tile-wrapper.view-compact { --tile-open-duration: 0.3s; --tile-open-function: linear; --tile-open-transition: max-height var(--tile-open-duration) var(--tile-open-function)/* , height var(--tile-open-duration) var(--tile-open-function), transform var(--tile-open-duration) var(--tile-open-function), margin-top var(--tile-open-duration) var(--tile-open-function), margin-bottom var(--tile-open-duration) var(--tile-open-function) */; transition: var(--tile-open-transition); } .view-list .tile-wrapper.view-compact > .form-wrapper { overflow: hidden; max-height: calc(var(--product-scale) * var(--product-height-hover) + var(--scale-height-hover-correction)); transition: var(--tile-open-transition); } .view-list .tile-wrapper.view-compact .product { max-height: var(--compact-max-product-height-hover); /* to make room for stepper */ transition: var(--tile-open-transition); } .view-list .tile-wrapper.view-compact .product-input { margin-top: calc(var(--input-stepper-height) + 15px); } .view-list .tile-wrapper.view-compact .product-bottom { max-height: 220px; transition: var(--tile-open-transition); } .view-list .tile-wrapper.view-compact:not(:hover):not(.clicked):not(.hovered):not(:focus-within) > .form-wrapper { height: calc(var(--product-scale) * var(--product-height) + var(--scale-height-correction) - var(--product-padding)); max-height: calc(var(--product-scale) * var(--product-height) + var(--scale-height-correction) - var(--product-padding)); grid-template-columns: var(--compact-template-columns); grid-template-rows: var(--compact-template-rows); } .view-list .tile-wrapper.view-compact:not(:hover):not(.clicked):not(.hovered):not(:focus-within) .product { max-height: var(--compact-max-product-height); } .view-list .tile-wrapper.view-compact:not(:hover):not(.clicked):not(.hovered):not(:focus-within) .productName { white-space: nowrap; } .view-list .tile-wrapper.view-compact:not(:hover):not(.clicked):not(.hovered):not(:focus-within) .product-bottom { max-height: 0; } /* misc */ .scrollLoad { clear: left; text-align: center; margin: 50px 0; } /* product groups */ #product-group-list { max-width: 99%/*wegen des Schattens der weiteren Kacheln*/;/*100%*/ overflow: hidden; } #product-group-list.slider-container .swiper { overflow: visible; } #product-group-list .swiper-horizontal > .swiper-pagination-bullets { bottom: 0; } /* grid, flex product-list */ .cmsGridContainer > .product-list, .cmsGridContainer > .product-list > article, .cmsGridContainer > .product-list > article > .tile-list, .cmsFlex > .product-list, .cmsFlex > .product-list > article, .cmsFlex > .product-list > article > .tile-list { display: contents; } @media screen and (min-width: 512px) { .tile-wrapper { box-shadow: var(--product-shadow); } .tile-wrapper:hover, .tile-wrapper.clicked, .tile-wrapper.hovered, .tile-wrapper:focus-within { box-shadow: var(--product-shadow-hover); } .tile-wrapper:hover .product, .tile-wrapper.clicked .product, .tile-wrapper.hovered .product, .tile-wrapper:focus-within .product { padding: var(--product-padding) var(--product-padding) 0 var(--product-padding); } /* #product-list, #product-group-list, .abo-group-list { margin-right: calc(0px - var(--product-margin-right)); } */ .tile-list .tile-wrapper:not(.clicked,.hovered) .product-bottom-hide { display: none; } .tile-list .tile-wrapper:hover .product-bottom-hide, .tile-list .tile-wrapper:focus-within .product-bottom-hide { display: flex; } /* list-view */ .view-list .tile-wrapper > .form-wrapper { grid-template-columns: var(--image-area-height) 1fr; height: calc(var(--product-scale) * var(--product-height) + var(--scale-height-correction)); } .view-list .tile-wrapper:hover > .form-wrapper, .view-list .tile-wrapper.clicked > .form-wrapper, .view-list .tile-wrapper.hovered > .form-wrapper, .view-list .tile-wrapper:focus-within > .form-wrapper { height: inherit; } .view-list .productName { white-space: nowrap; } } @media screen and (min-width: 1200px) and (not (pointer: coarse)) { #shop-grid-main > #productsWrapper { margin-left: 0; margin-right: 0; } } .productDetailWrapper, .productDetailWrapper:hover, .productDetailWrapper .product, .productDetailWrapper:hover .product { padding: unset; } .productDetailWrapper .product { display: grid; grid-template-areas: "image data" "productInput productInput"; grid-template-columns: auto 1fr; } .productDetailWrapper .image-area { width: clamp(150px, 40vw, 400px); margin-right: 10px; height: auto; } .productDetailWrapper .packagingUnit:empty, .productDetailWrapper .basicPrice:empty, .productDetailWrapper .grundpreis:has(.packagingUnit:empty):has(.basicPrice:empty), .productDetailWrapper .product-labels:empty, .productDetailWrapper .deposit:empty { display: none; } .productDetailWrapper .product-data { grid-area: data; flex: 1; } .productDetailWrapper .product-data > * { margin-bottom: 20px; } .productDetailWrapper .product-input { margin-bottom: 15px; } .productDetailWrapper h1, .productDetailWrapper h2 { font-size: 18px; margin: 50px 0 10px 0; } .productDetailWrapper .nichtlieferbar { color: var(--white); padding: 5px; } .productDetailWrapper h3 { font-size: 18px; margin: var(--property-margin-top) 0 10px 0; } .productDetailWrapper .tabangaben { width: 100%; } .productDetailWrapper .tabangaben > div { display: grid; margin-left: -5px; } .productDetailWrapper .tabangaben > div.singleline { grid-template-columns: auto 1fr; } .productDetailWrapper .tabangaben > div:nth-child(even) { background-color: var(--table-even-background); } .productDetailWrapper .propvalue { padding: 5px; } .productDetailWrapper .singleline .propvalue { text-align: right; } .productDetailWrapper .propname { padding: 5px; text-align: left; } .productDetailWrapper .allergie_erklaerung { font-size: smaller; margin-top: var(--property-margin-top); } .productDetailWrapper .tab-content-product > div { margin-top: var(--property-margin-top); } /* Product */ .productDetailWrapper .productName { height: auto; } /* Firma */ .productsFirma h1 { font-size: 20px; margin: 30px 0 10px 0; } .productsFirma h2 { font-size: 16px; margin: 20px 0 10px 0; } .productDetailWrapper .productsFirmaRest table, .productDetailWrapper .productsFirmaRest tbody, .productDetailWrapper .productsFirmaRest tr, .productDetailWrapper .productsFirmaRest th, .productDetailWrapper .productsFirmaRest td { display: block; max-width: 100%; } .productDetailWrapper .productsFirmaRest tr { display: flex; flex-direction: column; } .productDetailWrapper .productsFirma th, .productDetailWrapper .productsFirma td { text-align: left; } .productDetailWrapper .productsFirma tbody td:nth-child(2) { width: 100%; padding: 8px 0 5px 0; vertical-align: top; } .productDetailWrapper .productsFirma th { width: auto; padding: 8px 10px 10px 0; vertical-align: top; } /* Staffelpreis */ .productSpecialPrice tbody td:nth-child(1) { width: auto; padding-left: 0; } .productSpecialPrice tbody td:nth-child(2) { width: auto; text-align: center; padding-right: 0; } /* Präsentiert von */ .productDetailWrapper .tab-content-product .product-presented { display: flex; column-gap: 50px; row-gap: 50px; justify-content: center; flex-wrap: wrap; margin-top: 80px; margin-bottom: 80px; } .product-presentedBy { display: flex; row-gap: 20px; flex-direction: column; align-items: center; } .productDetailOverlay { max-width: 800px; text-align: left; } @media screen and (min-width: 512px) { .productDetailWrapper .product { grid-template-areas: "image data" "image productInput"; } /* .productDetailWrapper table { width: 80%; } */ .productDetailWrapper .productsFirmaRest table, .productDetailWrapper .productsFirmaRest tbody, .productDetailWrapper .productsFirmaRest tr, .productDetailWrapper .productsFirmaRest th, .productDetailWrapper .productsFirmaRest td { display: revert; } .productDetailWrapper .productsFirmaRest table, .productDetailWrapper .productsFirmaRest tbody { display: table; } .productDetailWrapper .productsFirmaRest tr { display: table-row; } .productDetailWrapper .productsFirmaRest th, .productDetailWrapper .productsFirmaRest td { display: table-cell; } .productDetailWrapper .productsFirma tbody td:nth-child(2) { width: 80%; } .productDetailWrapper .tabangaben > div.multiline { grid-template-columns: auto 1fr; } .productDetailWrapper .multiline .propvalue { text-align: right; } } /* Abos im Shop */ .abo-group-list .image-area { flex: 1; } .abo-group-list .image-area img { position: static; transform: none; width: auto; max-height: 200px; object-fit: unset; } .abo-group-list .image-area:hover img { transform: scale(var(--image-hover-scale)); } .abo-group-list .tile-wrapper { display: grid; grid-template-areas: 'image product'; grid-template-columns: 1fr 1fr; } .abo-group-list .product { flex: 1; justify-content: center; gap: 10px; display: flex; flex-direction: column; text-align: left; } .abo-group-list .groupDescription:empty { display: none; } .shopGroupBox img { float: left; padding-right: 20px; padding-bottom: 20px; } .shopGroupBox:not(:empty) { margin-bottom: 50px; } .shopGroupBox + * { clear: left; } .shopGroupBox + h1 { display: none; } /* Abos */ .abo-list .view-tile .tile-wrapper > .form-wrapper { display: grid; grid-template-areas: 'image ' 'product-bottom' 'product ' 'aboinput' ; grid-template-rows: auto 1fr auto; grid-template-columns: 1fr; } .abo-list .product-bottom { justify-content: flex-start; align-self: flex-start; } .diese_woche { margin-top: 10px; margin-bottom: 5px; font-weight: bold; } .aboZusammenstellung td { vertical-align: top; } .aboPrice-hint { clear: both; } .abo-input { display: grid; grid-template-areas: 'variante variante' 'interval submit' 'faktor faktor'; grid-area: aboinput; padding: var(--product-padding); column-gap: var(--product-input-col-gap); row-gap: var(--product-input-row-gap); } .abo-list .product { display: grid; grid-template-areas: 'name preis' 'beschreibung beschreibung'; align-items: center; column-gap: var(--product-input-col-gap); row-gap: var(--product-input-row-gap); grid-template-rows: 1fr auto; grid-template-columns: 1fr; } .abo-list .abo-name { grid-area: name; font-size: var(--fontsize-large); font-weight: bold; text-overflow: ellipsis; } .abo-list .abo-beschreibung { grid-area: beschreibung; font-size: var(--fontsize-small); } .abo-list .abo-variante { grid-area: variante; } .abo-list .abo-preis { grid-area: preis; align-self: flex-end; font-size: var(--fontsize-large); font-weight: bold; } .abo-list .abo-interval { grid-area: interval; } .abo-list .abo-submit { grid-area: submit; } .abo-list .abo-submit-large { grid-column-start: 1; } .abo-list .abo-faktor { grid-area: faktor; display: contents; } .abo-list .product-bottom { grid-area: product-bottom; min-height: calc(20px * var(--max-product-count, 0px)); } .abo-list.abo-zusammenstellung-hover .tile-wrapper .product-bottom { grid-row: 1; display: block; position: relative; z-index: 1; min-height: none; max-height: 100%; overflow-x: hidden; overflow-y: auto; background-color: #ffffffee; /* pointer-events: none; */ } .abo-list .tile-wrapper:hover .product { padding: var(--product-padding); } .abo-list .tile-wrapper:not(:hover, :focus, :focus-within) .product-bottom-hide { display: none; } /* grid, flex product-list */ .cmsGridContainer > .cmsAboTile, .cmsGridContainer > .cmsAboTile > article, .cmsGridContainer > .cmsAboTile > article > .tile-list, .cmsFlex > .cmsAboTile, .cmsFlex > .cmsAboTile > article, .cmsFlex > .cmsAboTile > article > .tile-list{ display: contents; } .cmsGridContainer > .cmsAboTile .tile-wrapper { --product-width: 100%; --product-width-hover: 100%; --image-area-width: 100%; --image-area-height: 300px; } .cmsGridContainer > .cmsAboTile li:not(.tile-wrapper) { display: none; } /* Abokorb */ #aboSortierung { display: flex; flex-wrap: wrap; align-items: center; row-gap: 5px; column-gap: 10px; margin-bottom: 20px; } #abokorb { --product-padding: 10px; margin-left: calc(0px - var(--product-padding)); margin-right: calc(0px - var(--product-padding)); } .keineAbosMessage { padding: 10px; color: var(--status-color, var(--important-color)); background-color: var(--status-background, var(--important-background)); } #abokorb .aboPrice { justify-self: end; padding-right: 10px; } .aboImage { grid-area: aboImage; } .aboText { grid-area: aboText; } .aboPrice { grid-area: aboPrice; } /* Überraschungsabos */ #abokisten ul > li { border: none; box-shadow: var(--product-shadow); padding: var(--product-padding); } #abokisten .view-list .tile-wrapper > .form-wrapper { grid-template-columns: 120px 3fr minmax(150px, 1fr); grid-template-areas: 'aboImage aboText aboPrice'; column-gap: var(--product-padding); } #abokisten h3 { margin-top: 0px; margin-bottom: 10px; font-size: var(--fontsize-large); text-align: left; font-weight: normal; cursor: pointer; color: var(--link-color); } #abokisten .aboInner { text-align: left; transition: max-height 200ms; max-height: 0; } #abokisten h3.clicked ~ .aboInner { max-height: 100px; } .aboText { overflow: hidden; } .aboName, .abo-beschreibung { display: block; margin-top: 0; text-overflow: ellipsis; overflow: hidden; } .aboName > span { flex: 1; } .aboImage { height: 100%; } .aboPreis { font-size: var(--fontsize-large); white-space: nowrap; } .aboArtikelContainer { overflow: hidden; margin-top: 10px; padding: 10px 10px 0 10px; background-color: var(--superlightgrey); } .ueberraschungsaboArtikel { display: grid; grid-template-columns: 60px 3fr 1fr; grid-template-areas: 'aboImage aboText aboPrice'; column-gap: var(--product-padding); align-items: center; } .aboArtikelListe { text-align: center; } .aboArtikelListe .aboInner:nth-child(even) { background-color: var(--white); } #abokisten p { margin-top: 0; } #abokisten .aboPreis { font-weight: bold; text-align: right; padding-bottom: 15px; white-space: nowrap; } /* Wunschabos */ #wunschabo { margin-top: 50px; } #wunschabo .tile-wrapper:hover .product, #wunschabo .tile-wrapper.clicked .product, #wunschabo .tile-wrapper:focus-within .product { padding: 0; } #wunschabo .view-list .tile-wrapper > .form-wrapper { grid-template-columns: 80px 1fr min-content; grid-template-rows: auto; grid-template-areas: 'image product product' 'productInput productInput aboPrice' /*'product-bottom product-bottom product-bottom'*/; column-gap: 10px; row-gap: 0; padding-bottom: 0; } #wunschabo .view-list .productName { min-height: auto; } #wunschabo .grundpreis { height: initial; font-size: initial; } #wunschabo .aboPrice { text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; --line-height: 1; } .aboPriceData { margin-bottom: 3px; } .aboPriceData * { display: inline-block; font-size: var(--fontsize-small); padding-right: 10px; } .aboPriceData > * { display: inline-block; } .next-delivery { color: var(--orange); } #wunschabo .tile-wrapper .importantMessage { margin: 0 0 3px 0; padding: 2px 5px; font-size: var(--fontsize-small); } .aboProductData { display: flex; flex-direction: column; justify-content: space-evenly; height: 100%; margin-left: 20px; } #wunschabo .view-list .aboProductData > * { padding-bottom: 0; margin-bottom: 0; min-height: 0; height: auto; } .aboPreisEinheit { white-space: nowrap; font-weight: bold; } .abo-intervall { white-space: nowrap; } #wunschabo .product-unit { margin-top: 0; } #wunschabo .product-unit > br:first-child { display: none; } .saisonpause { background-color: var(--grey); } @media screen and (min-width: 512px) { #abokorb .tile-wrapper:hover .product, #abokorb .tile-wrapper.clicked .product, #abokorb .tile-wrapper.hovered .product, #abokorb .tile-wrapper:focus-within .product { padding: var(--product-padding); /* overwrite padding-bottom: 0 in bioshop-overview.css */ } .ueberraschungsaboArtikel { grid-template-columns: 80px 4fr 1fr; } #wunschabo .view-list .tile-wrapper > .form-wrapper { grid-template-columns: 60px 1fr min-content; } .abo-group-list .product { text-align: center; } .abo-group-list .tile-wrapper { display: block; } } @media screen and (min-width: 600px) { #abokorb { margin-left: 0; margin-right: 0; } #abokorb .product { flex-direction: row; } .aboName span { display: inline; } } @media screen and (min-width: 880px) { #wunschabo .view-list .tile-wrapper > .form-wrapper { grid-template-columns: auto 1fr auto min-content; grid-template-areas: 'image product productInput aboPrice' ; } .aboProductData { margin-left: 0; } #wunschabo .product-input { margin-top: 0; max-width: 300px; width: 300px; } } /* add product to note */ #addProductToNoteArticle { text-align: left; } #addProductToNoteArticle .inputContainer { margin: 10px 0; } #addProductToNoteArticle .articleName { flex: initial; margin: 0 0 20px 0; } /* notes */ #newNote { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 40px; margin-bottom: 60px; } #newNote > * { flex: 1 0 auto; } #newNote > label { flex: 0; white-space: nowrap; font-size: var(--fontsize-large); } #notes { --product-padding: 10px; margin-left: calc(0px - var(--product-padding)); margin-right: calc(0px - var(--product-padding)); } #notes > ul > li { border: none; padding-left: 0; box-shadow: var(--product-shadow); padding-left: var(--product-padding); padding-right: var(--product-padding); padding-bottom: var(--product-padding); transition: var(--note-open-transition); max-height: 50px; overflow: hidden; } #notes > ul > li.openNote { max-height: calc(var(--note-product-height, 100%) + var(--note-dom-height, 0px)); } #notes .view-list .tile-wrapper > .form-wrapper { grid-template-columns: 30px 60px 4fr 1fr; grid-template-areas: 'action image product productInput'; column-gap: var(--product-padding); } #notes .image-area img { max-height: 70px; } #notes .product { display: flex; flex-direction: column; padding-top: var(--product-padding); padding-right: var(--product-padding); } #notes .noteSave { grid-area: noteSave; display: none; } #notes .product-input-save .noteSave { display: revert; } #notes .note-product-data { flex: 1; } #notes .productName { white-space: normal; } #notes .note-product-price { min-width: max-content; display: flex; flex-direction: column; } #notes .product-input { min-width: 150px; max-width: 250px; padding-right: var(--product-padding); padding-bottom: var(--product-padding); margin-top: var(--product-padding); grid-template-rows: max-content; grid-auto-rows: max-content; } .action-container { grid-area: action; background-color: #f8f8f8; width: 100%; height: 100%; justify-content: center; align-items: center; display: flex; } .action-container input[type="checkbox"]:not(.switch) { margin: 0 1px 0 0; } .noteName { display: flex; margin-top: 12px; margin-bottom: 0px; align-items: center; --fontsize-h2: 18px; } .noteName span { display: none; } .noteName .note-name:not(:focus) { border: none; } .noteName .note-name { font-size: inherit; font-weight: inherit; height: auto; width: auto; padding: 0 5px; margin: 0; flex: 1; background-color: transparent; } .noteName .note-name:focus { margin-top: -1px; margin-bottom: -1px; padding-left: 4px; } .note-product-actions { display: flex; flex-wrap: wrap; align-items: center; row-gap: 5px; column-gap: 10px; margin-bottom: 20px; } .note-product-actions > label { flex: 1 0 100%; margin-bottom: 0!important; white-space: nowrap; } .note-product-actions > span { white-space: nowrap; } .note-product-actions > .select-wrapper, .note-product-actions > .select-wrapper > select, .note-product-actions > .note-do-action { max-width: 100%; width: 100%; } .note-select-container { margin-bottom: 5px; } .changeAllCB { margin-left: 34px!important; } .changeAllCB::before { content: '\21B4'; transform: matrix(-1, 0, 0, 1, 0, 0); position: absolute; left: -23px; color: #888; font-size: 25px; line-height: 0.9; } .noteForm { margin-top: 20px; } .open-icon { position: relative; align-items: center; } .open-icon::before { content: '\1F4C1'; } .openNote .open-icon::before { content: '\1F4C2'; } .open-icon::after { counter-reset: noteProductCount var(--note-product-count); content: counter(noteProductCount); position: absolute; left: 11px; font-size: 11px; top: 9px; width: 20px; text-align: center; } .icon-bar .button-icon { padding-bottom: 4px; } .open-icon span { font-size: 16px; padding-top: 6px; } .productDetailOverlay-note .product-input { display: none; } @media screen and (max-width: 600px) { .noteMain { --fontsize-small: 10px; --old-price-display: none; } .noteMain .productName { font-weight: normal; } .noteMain img.product-control { height: 100%; } .noteMain .product-price .productPrice { --price-fontsize: 20px; } .noteMain .view-list .product-labels { height: auto; } .noteMain .product-labels > * { height: 15px; line-height: 15px; } } @media screen and (min-width: 512px) { #notes .tile-wrapper:hover .product, #notes .tile-wrapper.clicked .product, #notes .tile-wrapper.hovered .product, #notes .tile-wrapper:focus-within .product { padding: var(--product-padding); /* overwrite padding-bottom: 0 in bioshop-overview.css */ } .note-product-actions > .select-wrapper, .note-product-actions > .note-do-action { max-width: 300px; width: auto; } } @media screen and (min-width: 600px) { #addProductToNoteArticle .inputContainer input, #addProductToNoteArticle .inputContainer select { min-width: 250px; width: 250px; } #addProductToNoteArticle .articleName { white-space: nowrap; min-width: 250px; max-width: 70%; overflow: hidden; text-overflow: ellipsis; flex: 1 0 100%; } #notes { margin-left: 0; margin-right: 0; } #notes .product { flex-direction: row; } .noteName span { display: inline; } .noteName .noteOpenText { width: var(--note-open-button-width, 80px); display: initial; } .openNote .noteName .noteOpenText { display: none; } .noteName .noteCloseText { width: var(--note-open-button-width, 80px); display: none; } .openNote .noteName .noteCloseText { display: initial; } .noteName .note-name { margin: 0 10px; } } @media screen and (min-width: 800px) { #newNote { flex-direction: row; } #newNote > * { flex: 1 0 min-content; } .note-product-actions > label { flex: 1; } } @media screen and (max-width: 400px) { #notes .view-list .tile-wrapper > .form-wrapper { grid-template-columns: 20px 0px 4fr 1fr; } } #loginDIV { margin-bottom: 20px; width: 100%; } #loginDIV form > div { display: flex; flex-direction: column; row-gap: 10px; align-content: center; max-width: 300px; margin: auto; width: 100%; } #loginDIV .passwordLost { margin-top: 20px; } .message.login-popover { --message-width: 580px; --message-height: auto; } .message.login-popover .cmsHeadline { --cms-text-align: center; } .kundenlogin #loginDIV .cmsFlexible { line-height: revert; } .kundenlogin #loginDIV form > div { margin: 0; } .neukundenlogin .cmsFormElement { max-width: 300px; }