/* CSS only 76.23K, CSS & InlineSvg (17/38) 86.11K => 13% more */

@font-face { font-family: 'Header-Font'; font-display: swap; src: url('/img/lato-v17-latin-300.eot'); src: url('/img/lato-v17-latin-300.woff2') format('woff2'), url('/img/lato-v17-latin-300.woff') format('woff'), url('/img/lato-v17-latin-300.eot?#iefix') format('embedded-opentype'), url('/img/lato-v17-latin-300.ttf') format('truetype'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215,U+E0FF,U+EFFD,U+F000; }
@font-face { font-family: 'Standard-Font'; font-display: swap; src: url('/img/lato-v17-latin-regular.eot'); src: url('/img/lato-v17-latin-regular.woff2') format('woff2'), url('/img/lato-v17-latin-regular.woff') format('woff'), url('/img/lato-v17-latin-regular.eot?#iefix') format('embedded-opentype'), url('/img/lato-v17-latin-regular.ttf') format('truetype'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215,U+E0FF,U+EFFD,U+F000; }
/* CSS base, search, meili-extra, aa, kachel, powermenu, powermenue-extra, to-top-button, input-floating, kachel-stapel, kachel-slider, highslide_v2, hover-zoom */
/* ### base ### */
*, ::before, ::after { box-sizing: border-box; } html { text-size-adjust: none; } ::before, ::after { text-decoration: inherit; vertical-align: inherit; } :root { cursor: default; line-height: 1.5; overflow-wrap: break-word; -moz-tab-size: 4; tab-size: 4; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; } body { overflow-y: scroll; margin: 0; text-rendering: optimizeLegibility; font-family: 'Standard-Font'; --header-width: 1600px; --shadow-saturation: 0%; --shadow-hue: 186deg; --shadow-lightness: 50%; --theme-white: rgb(255,255,255); --theme-light: rgb(240,240,240); --theme-medium: rgb(220,220,220); --theme-dark: rgb(150,150,150); --theme-text: rgb(60,60,60); --theme-text-shadow: 0 0 3px rgba (0,0,0,.5); --theme-accent-light: rgba(0, 0, 0,.1); --theme-black: rgb(0, 0, 0); --theme-accent: rgb(202, 180, 120); --theme-accent-medium: rgb(0, 0, 0); --theme-accent-text: rgb(255,255,255); --theme-hover: rgb(202, 180, 120); --theme-active: rgb(202, 180, 120); --theme-powermenu-medium: rgb(238,238,238); --theme-border: .1rem solid rgb(220,220,220); --theme-outline: none; --theme-radius-small: 0; --theme-radius-medium: 0; --theme-card-background: rgb(255,255,255); --theme-divider: .1rem solid var(--theme-medium); --padding: .5rem; --card-padding: var(--padding); --shadow-color: var(--shadow-hue) var(--shadow-saturation) var(--shadow-lightness); --shadow-elevation-low: -1px -1px 5px hsl(var(--shadow-color) / 0.34), 0.9px 1.4px 1.9px -0.8px hsl(var(--shadow-color) / 0.34), 1.5px 2.3px 2.7px -2.9px hsl(var(--shadow-color) / 0.34); --shadow-elevation-medium: -1px -1px 5px hsl(var(--shadow-color) / 0.36), 0.9px 1.4px 1.9px -0.8px hsl(var(--shadow-color) / 0.36), 2.2px 3.4px 4.6px -1.7px hsl(var(--shadow-color) / 0.36), 5.3px 8.4px 11.2px -2.5px hsl(var(--shadow-color) / 0.36); --shadow-elevation-high: -1px -1px 5px hsl(var(--shadow-color) / 0.34), 1.2px 2px 2.5px -0.4px hsl(var(--shadow-color) / 0.34), 2.5px 3.6px 5.1px -0.7px hsl(var(--shadow-color) / 0.34), 4.7px 7.5px 10px -1.1px hsl(var(--shadow-color) / 0.34), 7.5px 12px 15.9px -1.4px hsl(var(--shadow-color) / 0.34), 11.8px 18.7px 24.9px -1.8px hsl(var(--shadow-color) / 0.34), 17.9px 28.5px 37.9px -2.1px hsl(var(--shadow-color) / 0.34), 26.3px 42px 55.7px -2.5px hsl(var(--shadow-color) / 0.34); --theme-error: rgb(181,38,10); --theme-error-text: rgb(255,255,255); --theme-warning: rgb(241, 134, 33); --theme-warning-text: rgb(255,255,255); --theme-success: rgb(0,128,0); --theme-success-text: rgb(255,255,255); } body, input, button, .button { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1 { font-size: 2em; margin: 0.67em 0; } b, strong { font-weight: bolder; } .center { text-align: center; } audio, canvas, iframe, img, svg, video { vertical-align: middle; max-width: 100%; height: auto; } iframe { border-style: none; aspect-ratio: 16/9;} svg:not([fill]) { fill: currentColor; } table { border-collapse: collapse; border-color: inherit; text-indent: 0; } button, input, select { margin: 0; accent-color: var(--theme-accent-medium); } button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; font-family: inherit; } textarea { margin: 1rem 0; resize: vertical; } [type="search"] { -webkit-appearance: textfield; outline-offset: -2px; } ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } ::-webkit-input-placeholder { color: inherit; opacity: 0.54; } ::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } body { background-color: var(--theme-white); color: var(--theme-text); } h1, h2, h3, h4, h5, h6, #aa_beschreibung { color: var(--theme-text); font-family: 'Header-Font'; } .grid-2.mb-4 .text2a { } ul { padding: 0; } body, #shopLayer, #shopMain { max-width: 100vw; } .shopHeader { } #kopf_top_line { position: sticky; top: 0; z-index: 98; background-color: var(--theme-white); } #kopf_bottom_line { background-color: var(--theme-white); position: relative; z-index: 96; box-shadow: 0 0 25px -5px rgba(0,0,0,.25); } #shopMain { min-height: 100vh; } #kopf_top_line {box-shadow: var(--shadow-elevation-medium); } /* html anchor */ html { scroll-behavior: smooth; scroll-padding-top: 5rem; } @media screen and (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } ::placeholder, ::-webkit-input-placeholder { color: var(--theme-text); opacity: .7; } a { text-decoration: none; color: var(--theme-accent-medium); transition: all 0.5s; } h1 { font-size: 1.5em; } h2 { font-size: 1.25em; } h3 { font-size: 1.1em; } h4 { font-size: 1em; } h5 { font-size: 1em; } h6 { font-size: 1em; } hr { border: var(--theme-divider); } .pg-only { display: none; } /* header */ .shopHeader a:not(.button), .BreadcrumbList a, .breadcrumb a span, *[itemtype*="Breadcrumb"] * { color: var(--theme-text); } .shopHeader li, #shopFooter li { list-style: none; } #k_title { width: 100%; height: 2rem; background: var(--theme-black); } #k_title ul { width: 100%; display: flex; flex-wrap: nowrap; justify-content: space-between; margin: 0 auto; padding: 0 1rem; } #k_title ul li { font-size: 0.8rem; line-height: 2rem; white-space: nowrap; } #k_title ul li, #k_title ul li a { color: var(--theme-white); } #k_title ul li a:hover { color: rgb(202, 180, 120); } #k_title.shopHeader ul li:nth-child(3) { display: none; } #k_title ul li a.active { font-weight: bold; color: var(--theme-accent); } #foot-scroll { width: 100%;overflow-x: scroll; } #k_title.footer { display: block; width: 670px; min-width: 100%; } .ausrichter { padding: 0 1rem; } .ausrichter.mb-4 { margin-bottom: 2rem; } #kopf_top_line_inner { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 4rem; padding: 0 0 0 1rem; } #k_logo { width: 9rem; } #k_logo { background: url(/img/wanime-logo.png) no-repeat 50% 50%; height: 100%; background-size: contain; padding: .5rem; } #suchbox { display: none; } #k_icons { display: flex; align-items: center; justify-content: flex-end; } #k_lupe_2 { background: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"  viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve"><style type="text/css"> .st0{fill:none;} .st1{fill:rgb(48,48,48);}</style><g id="frame"> <rect x="0.1" class="st0" width="98.5" height="98.5"/></g><g id="Layer_2"> <path class="st1" d="M40.6,71.5c-17,0-30.8-13.8-30.8-30.8S23.6,9.9,40.6,9.9s30.8,13.8,30.8,30.8S57.6,71.5,40.6,71.5z M40.6,16.1  C27,16.1,16,27.1,16,40.7s11,24.6,24.6,24.6s24.6-11,24.6-24.6S54.2,16.1,40.6,16.1z"/> <path class="st1" d="M86.8,90c-0.8,0-1.6-0.3-2.2-0.9L60,64.4c-1.2-1.2-1.2-3.2,0-4.4s3.2-1.2,4.4,0L89,84.7c1.2,1.2,1.2,3.1,0,4.4  c0,0,0,0,0,0C88.4,89.6,87.6,90,86.8,90z"/></g></svg>') no-repeat 50% 50%; } #k_merk { background: url(/img/bg-merkliste.svg) no-repeat 50%; } #k_account { background: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"  viewBox="0 0 60.7 60.7" style="enable-background:new 0 0 60.7 60.7;" xml:space="preserve"><style type="text/css"> .st0{fill:%233C3C3C;}</style><path class="st0" d="M41.4,30.8c2.4-2.7,3.9-6.2,3.9-10c0-8.3-6.8-15.1-15.1-15.1s-15,6.8-15,15.1s6.7,15,15,15c2.9,0,5.7-0.9,8-2.3 c8.2,3.1,13.8,10.6,14.5,19.2h-45c0.5-5.8,3.2-11.3,7.7-15.1c0.8-0.7,0.9-1.9,0.2-2.7c-0.7-0.7-1.9-0.8-2.7-0.1 c-5.7,5-9,12.2-9,19.9c0,1,0.8,1.9,1.9,1.9h48.9c1,0,1.9-0.8,1.9-1.9C56.6,44.3,50.6,35.1,41.4,30.8z M19,20.8 c0-6.2,5.1-11.3,11.3-11.3s11.3,5.1,11.3,11.3s-5.1,11.3-11.3,11.3S19,27,19,20.8z"/></svg>') no-repeat 50%; } #k_wk { background: url(/img/bg-wk.svg) no-repeat 50%; } #k_lupe_2, #k_merk, #k_account, #k_wk, #powermenue-schalter { position: relative; display: block; height: 3rem; width: 2.5rem; background-size: 1.5rem; justify-content: flex-end; align-items: center; cursor: pointer; } #shopLayer #k_lupe_3 { position: relative; } #shopLayer #k_lupe_3 #menSuchStrIcon { position: absolute; width: 2rem; height: 100%; aspect-ratio: 1 / 1; top: 0; right: 0; pointer-events: none; background-image: url(/img/bg-suche.svg); background-size: 50%; background-position: center; background-repeat: no-repeat; } #shopLayer #k_lupe_3 div { width: 100%; } #k_service #k_hilfecenter { display:none; } #k_sale { display: flex; align-items: center; padding: 0 .5rem; } #k_sale a { color: var(--theme-text); } #k_sale span { display: none; } #k_sale a:after { content: '%'; background: var(--theme-error); color: var(--theme-white); border-radius: 2rem; margin-left: .25rem; font-size: .8rem; padding: .15rem .25rem; } .k_link { display: none; } #k_account[data-online="0"] .k_link { display: block; height: 100%; width: 100%; } @media (hover: hover) { .k_link { display: block; height: 100%; width: 100%; } } #k_icons > div > .shBagInh { position: absolute; right: 0 ; top: 2.5rem; width: 100vw; visibility: hidden; transform: translateY(-1rem); opacity: 0; background-color: var(--theme-card-background); border-radius: var(--theme-radius-small); box-shadow: var(--shadow-elevation-medium); transition: opacity .2s ease-out, transform .2s ease-out; padding: 1rem; } #k_icons > #k_account > .shBagInh { right: 0; } #k_icons > div:hover > .shBagInh { visibility: visible; transform: translateY(0); opacity: 1; overflow: hidden; padding: 1rem; } #k_icons > div > .shBagInh .wk-empty { display: none; } #k_icons > div[data-num="0"] .shBagInh .wk-empty, #k_icons > div[data-num=""] .shBagInh .wk-empty { display: block; text-align: center; font-weight: bold; height: 10rem; line-height: 10rem; } .wk-heading { text-align: center; font-weight: bold; padding: 1rem 0; border-bottom: var(--theme-divider); color: var(--theme-accent-medium); font-size: 1.25rem; } #k_icons > div[data-num="0"] .wk-heading, #k_icons > div[data-num=""] .wk-heading { display: none; } ul.alt-list { list-style: none; padding: 0; margin: 0; max-height: calc(100vh - 30rem); overflow-y: auto; } ul.alt-list > li { display: block; } ul.alt-list > li > a { display: block; padding: .5rem; background-position: 0 50%; background-size: 3rem; background-repeat: no-repeat; } ul.alt-list.items > li > a { padding: .5rem .5rem .5rem 4rem; } ul.alt-list > li > a:hover { color: var(--theme-hover); } ul.alt-list.items > li > a { margin: 1%; } #k_icons > #k_merk > .shBagInh ul > li > a { display: flex; align-items: center; } #k_icons > div > .shBagInh ul > li:nth-child(odd) > a, ul.alt-list > li:nth-child(odd) > a { background-color: var(--theme-white); } ul.alt-list a * { color: var(--theme-text); } #k_icons > div[data-num=""]:before, #k_icons > div[data-num="0"]:before, #k_merk[data-num=""]:before, #k_merk[data-num="0"]:before { display: none; content: ""; } #k_wk:before, #k_merk:before { content: attr(data-num); position: absolute; top: 0; right: 0; background-color: var(--theme-active); color: var(--theme-text); width: 1.25rem; height: 1.25rem; line-height:1.25rem; text-align: center; vertical-align: middle; border-radius: 50%; box-shadow: var(--shadow-elevation-low); font-size: 0.8rem; } .shBagInh .Wkbuttons { text-align: right; display: flex; justify-content: space-between; } .shBagInh .Wkbuttons .button { font-weight: bold; padding: 1rem 2rem; white-space: nowrap; } .shBagInh .Wkbuttons #wkbutton { margin-right: .5rem; } #powermenue-schalter { margin-left: 0; margin-right: 1rem; background: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"  viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve"><style type="text/css"> .st0{fill:rgb(48,48,48);}</style><path class="st0" d="M4,5h16c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,7,3,6.6,3,6S3.4,5,4,5z M4,11h16c0.6,0,1,0.4,1,1s-0.4,1-1,1H4 c-0.6,0-1-0.4-1-1S3.4,11,4,11z M4,17h16c0.6,0,1,0.4,1,1s-0.4,1-1,1H4c-0.6,0-1-0.4-1-1S3.4,17,4,17z"/></svg>') no-repeat 50%; background-size:2rem; } #shopLayer.powermenue-open #k_title { display: none; } nav.powermenue { opacity: 0; visibility: hidden; } /* such feld */ #shopLayer.suche-offen #suchbox { display: block; width: 100%; } #shopLayer.suche-offen #k_logo, #shopLayer.suche-offen #k_icons, #shopLayer.suche-offen #powermenue-schalter { display: none; } #shopLayer.suche-offen #k_lupe_3 { display: flex; gap: var(--padding); align-items: center; } #shopLayer.suche-offen #h-ps-close { display: inline-block; height: 2.5rem; background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"  viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve"><style type="text/css"> .st0{fill:rgb(255,255,255);}</style><path class="st0" d="M18.3,16.7L13.5,12l4.7-4.7c0.5-0.5,0.5-1.3,0-1.9c-0.5-0.5-1.3-0.5-1.9,0l-4.7,4.7L6.9,5.4 c-0.5-0.5-1.3-0.5-1.9,0s-0.5,1.3,0,1.9L9.8,12l-4.7,4.7c-0.5,0.5-0.5,1.3,0,1.9c0.5,0.5,1.3,0.5,1.9,0l4.7-4.7l4.7,4.7 c0.5,0.5,1.3,0.5,1.9,0C18.8,18.1,18.8,17.3,18.3,16.7z"/></svg>'); background-position: center; background-repeat: no-repeat; background-size: 36%; } input#menSuchStr { max-width: 100%; } #shopLayer #k_lupe_3 > div { width: 100%; position: relative; } #shopLayer #k_lupe_3 #menSuchStrIcon { position: absolute; height: 100%; aspect-ratio: 1 / 1; top: 0; right: 0; pointer-events: none; background-image: url(/img/bg-suche.svg); background-size: 50%; background-position: center; background-repeat: no-repeat; } /* main */ #shopMain { max-width: var(--header-width); padding: 1rem; margin: 0 auto; } /* footer */ #shopFooter { background-color: var(--theme-light); } .foot_infos {text-align:center;} .foot_infos ul { margin-bottom: 2rem; } .foot_infos ul li { margin-bottom: .5rem; color: var(--theme-text); } .foot_infos ul li a {color: var(--theme-text); } .foot_infos ul li a:hover {color: var(--theme-hover); } .foot_infos { padding: 3rem var(--padding); width: 100%; max-width: var(--header-width); margin: 0 auto; position: relative; } .foot_infos .foot_ueb { display: inline-block; height: 2rem; text-transform: uppercase; letter-spacing: 0.10em; white-space: nowrap; margin-bottom: .5rem; } .foot_infos #info_zahl { display: flex; flex-wrap: wrap; justify-content: center; } .foot_infos #info_zahl img { width: 4rem; margin: 0 1rem 1rem 0; height: 100%; border-radius: .4rem; } .foot_infos ul.soc li a {display:inline-block;width:2rem;height:2rem;margin: 0 0 .8rem 0;padding:0;} #shopFooter #f_text { text-align: center; padding: 2rem 1rem; } #shopFooter #f_text, #shopFooter #f_text * { color: var(--theme-text); } #shopFooter #f_text > span { display: block; font-size: .8rem; } #shopFooter #k_title { background: rgb(40,40,40); } #shopFooter #k_title ul li {color: rgb(255,255,255); padding-left: 1.25rem; background: url(/img/check_w.svg) no-repeat 0 50%; background-size:.75rem;} #shopFooter .unten #f_text span.br { display:block;height:0; } #shopFooter .unten #f_text span.pipe { display:none; } .zul_anges_art { background: var(--theme-white); padding:1rem; } .zuletzt_items { display: flex; padding: 0 0 5rem 0; gap: .5rem; } .zuletzt_items .zuletzt { } .zuletzt_items .zuletzt a { display: block; border: var(--theme-border) ;border-radius: var(--theme-radius-small); box-shadow: var(--shadow-elevation-medium); background-color: white; transition: box-shadow .3s ease-out; overflow: hidden; } .zuletzt_items .zuletzt:hover a { box-shadow: var(--shadow-elevation-high); } .zuletzt_items .zuletzt a img { width: 5rem; height: 5rem; object-fit: contain; } .zuletzt_fix { padding-top: 2rem; } .zuletzt_fix .ueb { display:block; margin-bottom:.5rem; } .animate { transition: all .1s ease-out; } .loading { opacity: 0; transform: scale(.9) skew(5deg, 5deg); } /* rating */ .rat_stars { display: block; height: 1rem; } .rat_stars * { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 13 13"><style type="text/css">.st0{fill:RGB(238,177,29);}</style><path class="st0" d="M13 5h-4.7l-1.8-5-1.8 5h-4.7l3.9 2.9-1.4 5.1 4-3.1 4 3.1-1.4-5.1 3.9-2.9zm-6.5 3.5l-2.2 1.8.9-2.6-2.1-1.7 2.6.1.8-3 .8 3 2.6-.1-2.1 1.7.9 2.6-2.2-1.8z"/></svg>'); height: 1rem; width: 1rem; margin-right: .3rem; display: block; float: left; background-repeat: no-repeat; background-position: center; background-size: 100%; } .rat_stars i { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 13 13"><style type="text/css">.st0{fill:RGB(238,177,29);}</style><path class="st0" d="M6.5 0l1.8 5h4.7l-3.9 2.9 1.4 5.1-4-3.1-4 3.1 1.4-5.1-3.9-2.9h4.7z"/></svg>'); } .rat_stars b { background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8" standalone="no"%3F><svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 13 13" version="1.1" id="svg4489" sodipodi:docname="star-outline-b.svg" inkscape:version="0.92.1 r15371">  <metadata   id="metadata4495">  <rdf:RDF>  <cc:Work   rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title>  </cc:Work>  </rdf:RDF>  </metadata>  <defs   id="defs4493" />  <sodipodi:namedview   pagecolor="%23ffffff"   bordercolor="%23666666"   borderopacity="1"   objecttolerance="10"   gridtolerance="10"   guidetolerance="10"   inkscape:pageopacity="0"   inkscape:pageshadow="2"   inkscape:window-width="1404"   inkscape:window-height="776"   id="namedview4491"   showgrid="false"   inkscape:zoom="43.230769"   inkscape:cx="6.5"   inkscape:cy="6.5"   inkscape:window-x="526"   inkscape:window-y="404"   inkscape:window-maximized="0"   inkscape:current-layer="svg4489" />  <style   type="text/css"   id="style4485">.st0{fill:RGB(238,177,29);}</style>  <path   class="st0"   d="M13 5h-4.7l-1.8-5-1.8 5h-4.7l3.9 2.9-1.4 5.1 4-3.1 4 3.1-1.4-5.1 3.9-2.9zm-6.5 3.5l-2.2 1.8.9-2.6-2.1-1.7 2.6.1.8-3 .8 3 2.6-.1-2.1 1.7.9 2.6-2.2-1.8z"   id="path4487" />  <path   style="fill:none;stroke:RGB(238,177,29);stroke-width:0.3023622;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:0;stroke-dasharray:none"   d="m 6.5,3.1 v 5.4 c 0.015421,0.042705 0.032983,0.084696 0.046263,0.1281139 0.00451,0.014747 0,0.030842 0,0.046263 0,0.046263 0,0.092527 0,0.1387901 0,0.00561 7.44e-4,0.068651 0,0.069395 -0.00545,0.00545 -0.017679,-0.00545 -0.023132,0 -0.00545,0.00545 0,0.015421 0,0.023132 0,0.053974 0,0.1079478 0,0.1619217"   id="path4497"   inkscape:connector-curvature="0" />  <path   style="fill:RGB(238,177,29);fill-opacity:1;stroke:none;stroke-width:0.03048049"   d="m 3.6472359,11.12287 c 0,-0.01727 0.2620571,-0.749276 0.5823488,-1.6266949 C 4.7191279,8.1551044 4.804729,7.8958456 4.7667242,7.8693499 4.5906376,7.7465866 2.0208853,5.7638877 2.0285015,5.7566669 c 0.00529,-0.00501 0.6921465,0.016971 1.5263408,0.048864 0.8341942,0.031894 1.6091805,0.05814 1.7221912,0.058324 l 0.2054748,3.344e-4 0.4418995,-1.5655577 0.4418997,-1.5655578 0.00179,3.1607943 0.00179,3.1607944 L 5.069852,10.063742 C 3.6414749,11.172431 3.6472359,11.168143 3.6472359,11.12287 Z"   id="path4501"   inkscape:connector-curvature="0" /></svg>'); } /* card */ .card { display: block; position: relative; background-color: var(--theme-card-background); border-radius: var(--theme-radius-small); overflow: hidden; transition: box-shadow .3s ease-out; transition: all .3s ease-out;} a.card:hover { box-shadow: var(--shadow-elevation-medium); transform: translateY(-.2rem) translateZ(0);} .card.p-0 { padding: 0; } .card .full, .card .card-info { margin: 0 calc(var(--card-padding) * -2); width: calc(100% + calc(var(--card-padding) * 4)); max-width: calc(100% + calc(var(--card-padding) * 4)); } .card.p-0 .full, .card.p-0 .card-info { margin: 0; } .card.p-0 .card-info { width: 100%; max-width: 100%; } .card img.full.top { margin-top: calc(var(--card-padding) * -1); } .card > h1:first-child, .card > h2:first-child, .card > h3:first-child, .card-info > h3:first-child { margin-top: calc(var(--card-padding) / 2); } .card.accent, .card.accent a, .card .card-info.accent, .card .card-info.accent a { background-color: var(--theme-accent-medium); color: var(--theme-accent-text); } .card.accent h1, .card.accent h2, .card.accent h3, .card.accent h4, .card.accent h5, .card.accent h6 { color: var(--theme-accent-text); } .card .card-info { padding: 1rem 2rem; margin-bottom: 2rem; border-top: var(--theme-divider); border-bottom: var(--theme-divider); font-size: .9rem; } .card .card-info:first-child { border-top: none; } .card:not(.p-0) .card-info:first-child { margin-top: calc(var(--card-padding) * -1); } .card .card-info:last-child { margin-bottom: calc(var(--card-padding) * -1); border-bottom: none; } .mt-2 { margin-top: 1rem; } .mt-4 { margin-top: 2rem; } .mt-6 { margin-top: 3rem; } .mt-4 { margin-top: 2rem; } .mb-4 { margin-bottom: 2rem; } .mb-6 { margin-bottom: 3rem; } .mb { margin-bottom: var(--padding); } .p-4 { padding: 2rem; } /* scrollbar */ #shopLayer ::-webkit-scrollbar { width: .5rem; } #shopLayer ::-webkit-scrollbar-track { background-color: var(--theme-light); } #shopLayer ::-webkit-scrollbar-thumb { background: var(--theme-medium); border-radius: 10px; } #shopLayer { scrollbar-color: var(--theme-medium) var(--theme-light); scrollbar-width: thin; } /* button */ button, .button { background-color: var(--theme-accent-medium); border: none; padding: 1rem 3rem; font-size: 1rem; text-transform: uppercase; color: var(--theme-accent-text); border-radius: var(--theme-radius-small); box-shadow: var(--shadow-elevation-medium); cursor: pointer; transition: all .3s ease-out; user-select: none; } button:hover, .button:hover { background-color: var(--theme-hover); } button.big, .button.big { width: 100%; padding: 1rem; font-size: 1.25rem; text-align: center; text-transform: uppercase; } button.big.icon:before, .button.big.icon:before { content: ''; background-repeat: no-repeat; background-position: center; display: inline-block; margin-right: 1rem; margin-top: -0.5rem; height: 2rem; width: 2rem; vertical-align: middle; } button:disabled, .button:disabled { opacity: .5; cursor: no-drop; } button.cancel, .button.cancel, button.secondary, .button.secondary { background-color: var(--theme-accent-light); color: var(--theme-text); } .button-group { display: grid; grid-gap: var(--padding); grid-template-columns: 1fr 1fr; } .button-group > .button, .button-group > button { text-align: center; } /* input */ input[type="text"], input[type="email"], input[type="number"], input[type="tel"], input[type="password"], input[type="date"], textarea, select, input[type="range"] { width: 100%; max-width: 24rem; } input[type="text"], input[type="email"], input[type="number"], input[type="tel"], input[type="password"], input[type="date"], textarea, select { border: none; border-bottom: 1px solid transparent; border-radius: var(--theme-radius-small); box-shadow: none!important; background-color: var(--theme-light); padding: 0.5rem .8rem; color: var(--theme-text); font-size: 1rem; height: 2.5em; font-family: inherit; } textarea { min-height: 10rem; resize: vertical; } input[type="text"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="tel"]:focus, input[type="password"]:focus, input[type="date"]:focus, textarea:focus { outline: none; border-bottom: 1px solid var(--theme-accent-medium); } input[type="number"] { max-width: 5rem; } .inp_wrapper[data-typ="number"] { display: inline-block; margin-right: 0.5rem; } .inp_wrapper.error div { font-size: .9rem; color: var(--theme-error-text); background-color: var(--theme-error); padding: .4rem .8rem; margin-top: .2rem; border-radius: var(--theme-radius-small); } .inp_wrapper[data-typ="checkbox"] { display: flex; align-items: center; } .inp_wrapper[data-typ="checkbox"] > input { margin: 0; } .inp_wrapper[data-typ="checkbox"] input + label { display: block; margin-left: .7rem; position: relative; top: unset; left: unset; transform: unset !important; pointer-events: all; font-size: .95rem; max-width: 22.5rem; width: 22.5rem; text-align: left; } .inp_wrapper[data-type="radio"] { margin-top: 0.2rem; } .radio-group { margin-top: 1.5rem;} input[disabled] + label, input[disabled] + label * { opacity: .7; } .inp_wrapper .inp_error { border-bottom: 2px dashed var(--theme-error) !important; } /* - + input */ .inp_wrapper[data-typ="number-custom"] > div.inc, .inp_wrapper[data-typ="number-custom"] > div.dec { float: left; width: 1.6rem; height: 2.5rem; margin-top: 1rem; text-align: center; line-height: 2.2rem; background-color: var(--theme-medium); border-radius: var(--theme-radius-small); cursor: pointer; user-select: none; } .inp_wrapper[data-typ="number-custom"] > div.dec { border-top-right-radius: 0; border-bottom-right-radius: 0; } .inp_wrapper[data-typ="number-custom"] > div.inc { border-top-left-radius: 0; border-bottom-left-radius: 0; } .inp_wrapper[data-typ="number-custom"] { display: inline-block; height: 4rem; width: 6.2rem; margin: 0 auto; } .inp_wrapper[data-typ="number-custom"] input { float: left; width: 2.7rem; text-align: center; padding-left: 0; padding-right: 0; border-radius: 0; z-index: 2; position: relative; } .inp_wrapper[data-typ="number-custom"] input::-webkit-outer-spin-button, .inp_wrapper[data-typ="number-custom"] input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .inp_wrapper[data-typ="number-custom"] input[type=number] { -moz-appearance: textfield; } .inp_wrapper.delete[data-typ="number-custom"] { height: 5rem; } .inp_wrapper[data-typ="number-custom"] > div.del { position: absolute; top: 3.5rem; left: 0; text-align: center; right: 0.3rem; background-color: var(--theme-error); color: var(--theme-error-text); border-radius: var(--theme-radius-small); box-shadow: var(--shadow-elevation-medium); cursor: pointer; user-select: none; font-size: 0.9rem; font-weight: normal; } .container_chk { margin-right: .5rem; } /* toggle (css only radio group) */ .toggle { display: flex; border: var(--theme-border); box-shadow: var(--shadow-elevation-low); background-color: var(--theme-light); } .toggle > button { flex: 1; border-radius: 0; background-color: transparent; color: var(--theme-text); box-shadow: none; transition: color .3s ease-out; border-left: var(--theme-border); z-index: 2; padding: 1rem; } .toggle > button.active { color: var(--theme-accent-text); } .toggle > button:first-of-type { border-left: none; } .toggle:after { content: ''; position: absolute; top: 0; left: 0; height: 100%; background-color: var(--theme-accent-medium); transition: left .4s ease-out; border-radius: var(--theme-radius-small); } .toggle-slide-content { position: relative; border-bottom: var(--theme-divider); } .toggle-slide-content > div { position: absolute; top: var(--padding); left: 0; width: 100%; transform: translateX(-2rem); opacity: 0; visibility: hidden; z-index: -1; transition: all ease-out .3s; } /* default table */ .table { max-width: 100%; overflow-x: auto; } .table table { width: 100%; } .table th { text-align: left; min-width: 10rem; padding: calc(var(--padding) / 1.5) var(--padding); color: var(--theme-accent-medium); border-bottom: 1px solid var(--theme-accent-medium); background-color: var(--theme-card-background); font-size: 1.05rem; } .table td { padding: calc(var(--padding) / 2) var(--padding); border-bottom: var(--theme-divider); } .table td.no-border { border-bottom: none; } .table.clickable tr.clickable { cursor: pointer; background-color: var(--theme-card-background); transition: background .1s ease-out; } .table.clickable tr.clickable:hover { background-color: var(--theme-light); } .table tr:empty { display: none; } /* css dropdown */ .css_dropdown { position: relative; } .css_dropdown > div { cursor: pointer; padding: var(--padding); background-color: var(--theme-card-background); border: var(--theme-border); border-radius: var(--theme-radius-small); box-shadow: var(--shadow-elevation-medium); } .css_dropdown ul { display: block; position: absolute; z-index: 20; margin-top: 0; background-color: var(--theme-card-background); border-radius: var(--theme-radius-small); box-shadow: var(--shadow-elevation-medium); list-style: none; left: 0; right: 0; padding: 0; opacity: 0; transition: opacity .2s ease-out, transform .2s ease-out; transform: translateY(-1rem); visibility: hidden; border: var(--theme-border); max-height: 30rem; overflow-y: auto; } .css_dropdown:hover ul { visibility: visible; opacity: 1; transform: translateY(0); } .css_dropdown ul li a, .css_dropdown ul li label { display: block; padding: var(--padding); text-align: left; color: var(--theme-text); cursor: pointer; } .css_dropdown ul li:nth-child(odd) { background-color: var(--theme-accent-light); color: var(--theme-text); } /* Tooltip <span class='tooltip'>Hover mich<div class='tooltiptext'>Lorem Ipsum</div></span> */ .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted var(--theme-text); } .tooltip .tooltiptext { opacity: 0; visibility: hidden; transform: translate(0%, 1rem); bottom: 100%; left: 0%; width: 20rem; background-color: black; color: white; text-align: left; padding: var(--padding); border-radius: var(--theme-radius-small); position: absolute; z-index: 1; transition: all .3s ease-out; } .tooltip.bottom .tooltiptext { transform: translate(0%, -1rem); bottom: unset; top: 100%; } .tooltip:hover .tooltiptext { opacity: 1; visibility: visible; transform: translate(0%, 0); } .tooltip .tooltiptext.wide { width: 23rem; } .PGerror, .PGwarning, .PGsuccess { border-radius: var(--theme-radius-small); padding: var(--padding); display: flex; align-items: center; border-left: 3px solid transparent; gap: 1rem; } .PGwarning span { width: 100%; text-align: center; } .PGerror > img, .PGwarning > img, .PGsuccess > img { height: 4rem; } .error-div, .warning-div, .success-div { padding: .4rem .8rem; border-radius: var(--theme-radius-small); } .PGerror, .user-feedback.error, .user-feedback.error > h3, .error-div { background-color: var(--theme-error); color: var(--theme-error-text); } .PGwarning, .user-feedback.warning, .user-feedback.warning > h3, .warning-div { background-color: var(--theme-warning); color: var(--theme-warning-text); } .PGsuccess, .user-feedback.success, .user-feedback.success > h3, .success-div { background-color: var(--theme-success); color: var(--theme-success-text); } .error-div:empty, .warning-div:empty, .success-div:empty { display: none; } #wk-hinweis { margin-bottom: 1rem; } #user-feedback-wrapper { position: fixed; z-index: 99; pointer-events: none; top: 5rem; left: 50%; transform: translate(-50%, 0); width: 90vw; max-width: 45rem; } .user-feedback { position: relative; background-color: var(--theme-accent); color: var(--theme-accent-text); padding: var(--padding); opacity: 0; transform: translate(0, -20%); border-radius: var(--theme-radius-small); box-shadow: var(--shadow-elevation-medium); transition: all .3s ease-out; } .user-feedback.open { opacity: 1; transform: translate(0, 0); margin-bottom: 1rem; } .user-feedback:before { position: absolute; bottom: 0; left: 0; right: 0; height: 0.2rem; content: ' '; background-color: white; transition: right .1s linear; } .user-feedback.open:before { right: 100%; } .user-feedback > h3 { margin-top: 0; } .hide { display: none; } .block { display: block; } .rotate-center:before { animation: rotate-center 0.6s ease-in-out both; } @keyframes rotate-center { 0% { transform: rotate(0); } 50% { transform: rotate(180deg) scale(.3); } 100% { transform: rotate(360deg) scale(1); } } .progress-symbol { display: none; } #shopLayer.progress .progress-symbol { display: block; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,.2); } .lds-ellipsis { display: inline-block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80px; height: 80px; } .lds-ellipsis div { position: absolute; top: 33px; width: 13px; height: 13px; border-radius: 50%; background: var(--theme-accent-medium); animation-timing-function: cubic-bezier(0, 1, 1, 0); } .lds-ellipsis div:nth-child(1) { left: 8px; animation: lds-ellipsis1 0.6s infinite; } .lds-ellipsis div:nth-child(2) { left: 8px; animation: lds-ellipsis2 0.6s infinite; } .lds-ellipsis div:nth-child(3) { left: 32px; animation: lds-ellipsis2 0.6s infinite; } .lds-ellipsis div:nth-child(4) { left: 56px; animation: lds-ellipsis3 0.6s infinite; } @keyframes lds-ellipsis1 { 0% { transform: scale(0); } 100% { transform: scale(1); } } @keyframes lds-ellipsis3 { 0% { transform: scale(1); } 100% { transform: scale(0); } } @keyframes lds-ellipsis2 { 0% { transform: translate(0, 0); } 100% { transform: translate(24px, 0); } } .bestellung_action a, #pers_submen a { margin: 0.2rem; display: inline-block; } #pers_submen a { background-color: var(--theme-black); } #pers_submen a.active, #pers_submen a:hover { background-color: var(--theme-hover); } #pers_submen { margin-bottom: 3rem; } #pers_submen .button { padding: .5rem 2rem; } .breadcrumb { margin-bottom: 1rem!important; } .button.bestellliste, .button.check { float: right; } .picva { width: 5rem; } .noborder { border: none!important; } #bestellabschluss { text-align: center; } #megaBestellabschluss { display:block; height:14rem; width: 14rem; border-radius: 14rem; background: var(--theme-success); margin: 5rem auto 3rem auto; position:relative; } #megaBestellabschluss:before{content:' ';display:block;height:inherit;width:inherit;background:url(/img/check_w.svg) no-repeat 50% 50%; background-size:150px;animation: wobbel 1s 1 linear} #bestellabschluss p {text-align:center;font-size: 1.25rem;} #bestellabschluss form { width: max-content; margin: 0 auto;} #bestellabschluss form button { margin-top: 2rem; } #shopLayer[data-pp="perart"] #pag_se_all {display:none!important;}
@media (min-width: 576px) { #k_title.shopHeader ul li:nth-child(3), #k_title.shopHeader ul li:nth-child(4) { display: block; } #k_icons { width: 15rem; } #k_sale { padding: 0 1rem 0 0; } #k_sale span { display: inline; } .foot_infos { overflow: auto; } .foot_infos .foot_ueb { display: block; } #shopFooter #f_text { padding: 0 1rem 2rem 1rem; } .sm-hide { display: none; } .sm-block { display: block; } tr.sm-block { display: table-row; } body { --padding: 1rem; } }
@media (min-width: 768px) { .shopHeader { position: relative; z-index:99; } h1 { font-size: 1.75em; } h2 { font-size: 1.5em; } h3 { font-size: 1.25em; } html { scroll-padding-top: 2rem; } .toggle > button { padding: 1rem 2rem; } #foot-scroll { overflow-x: unset; } #k_title.footer { width: 100%; } .k_ausrichter { display: block; } #kopf_top_line { position: relative; } #kopf_top_line_inner { height: 4rem; padding:0 1rem; } #k_logo { width: 9rem; } #k_icons { width: 20rem; } #k_lupe_2, #k_merk, #k_account, #k_wk { height: 4rem; width: 4rem; margin-left: 0.5rem; background-size: 2rem; } #k_wk:before, #k_merk:before { top: .5rem; right: .5rem; } #k_icons > div > .shBagInh { top: 4rem; right: 1rem; } #k_icons > #k_account > .shBagInh { right: calc(var(--padding) * -1); } #k_icons > #k_wk > .shBagInh, #k_icons > #k_merk > .shBagInh { width: auto; min-width: 22rem; padding: 1rem; } #k_icons > #k_account > .shBagInh { width: 17rem; } .shBagInh .Wkbuttons .button { padding: 1rem 3rem; } #k_sale { padding-right:2rem; } #k_service .shBagInh { position: absolute; right: calc(var(--padding) * -1); top: 3rem; width: 35rem;; visibility: hidden; transform: translateY(-1rem); opacity: 0; background-color: var(--theme-card-background); border-radius: var(--theme-radius-small); box-shadow: var(--shadow-elevation-medium); transition: opacity .2s ease-out, transform .2s ease-out; } #k_service:hover #k_hilfecenter { display:flex; flex-wrap: wrap;visibility: visible; opacity: 1; overflow: hidden; } #k_service #men_3 ul { display:flex; flex-wrap: wrap; } #k_service #men_3 ul li { width:50%; } #k_service #men_3 ul li.head { display: none; } #k_title ul li#k_service #k_hilfecenter, #k_title ul li#k_service #k_hilfecenter a { color: var(--theme-text); } #k_title ul li#k_service #k_hilfecenter a:hover {color: var(--theme-hover); } #k_hilfecenter {width:680px;padding: 0 1.5rem; box-sizing: border-box;left: 0; background:rgb(240,240,240); position: absolute; top:30px;z-index: 10001; border-bottom-right-radius: 0; display: none;box-shadow: 0 0 25px -5px rgba(0,0,0,.5);} #k_hilfecenter > .ueb { width: 100%; height: 4rem; line-height: 4rem; display: block; font-weight: bold;text-transform: uppercase;font-size: 1.25rem;} #k_hilfecenter > a {color:rgb(48,48,48)!important;padding-left: 2rem;font-size: .8rem!important; display: block; background: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><svg version="1.1" id="Ebene_1" focusable="false" xmlns="http://www.w3.org/2000/svg"  x="0px" y="0px" viewBox="0 0 512.1 448" style="enable-background:new 0 0 512.1 448;" xml:space="preserve"><style type="text/css"> .st0{fill:%233C3C3C;}</style><path class="st0" d="M256.1,0C114.7,0,0.1,93.1,0.1,208c0,47.6,19.9,91.2,52.9,126.3c-14.9,39.4-45.9,72.8-46.4,73.2 c-6.6,7-8.4,17.2-4.6,26S14.5,448,24.1,448c61.5,0,110-25.7,139.1-46.3c28.9,9.1,60.1,14.3,92.9,14.3c141.4,0,256-93.1,256-208 S397.5,0,256.1,0z M256.1,368c-26.7,0-53.1-4.1-78.4-12.1l-22.7-7.2l-19.5,13.8c-14.3,10.1-33.9,21.4-57.5,29 c7.3-12.1,14.4-25.7,19.9-40.2l10.6-28.1l-20.6-21.8c-18.1-19.3-39.8-51.2-39.8-93.4c0-88.2,93.3-160,208-160s208,71.8,208,160 S370.8,368,256.1,368z"/></svg>') no-repeat 0 50%;background-size:1.5rem;letter-spacing: .1rem !important;} #k_hilf_kont {margin-bottom: 12px;} #k_hilfecenter > a#k_hilf_tel {background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><svg version="1.1" id="Ebene_1" focusable="false" xmlns="http://www.w3.org/2000/svg"  x="0px" y="0px" viewBox="0 0 320 512" style="enable-background:new 0 0 320 512;" xml:space="preserve"><style type="text/css"> .st0{fill:%233C3C3C;}</style><path class="st0" d="M272,0H48C21.5,0,0,21.5,0,48v416c0,26.5,21.5,48,48,48h224c26.5,0,48-21.5,48-48V48C320,21.5,298.5,0,272,0z  M160,480c-17.7,0-32-14.3-32-32s14.3-32,32-32s32,14.3,32,32S177.7,480,160,480z M272,372c0,6.6-5.4,12-12,12H60 c-6.6,0-12-5.4-12-12V60c0-6.6,5.4-12,12-12h200c6.6,0,12,5.4,12,12V372z"/></svg>');background-size: 1rem;line-height:normal;} #k_hilfecenter .service_wrapper {background: var(--theme-white); padding: 1.5rem 1.5rem 1rem 1.5rem;box-sizing:border-box;margin-right:-1.5rem;margin-left:-1.5rem;} ul.alt-list { max-height: 30rem; } #shopMain { margin-top: 0; } .foot_infos > ul { width: 50%; float: left; min-height: 15rem; text-align: left;} .foot_infos #info_zahl { justify-content: start; } #shopFooter .unten #f_text span.br { display:none; } #shopFooter .unten #f_text span.pipe { color:inherit;font-size:inherit;display: inline;padding: 0; } #user-feedback-wrapper { top: 6rem; z-index: 200; } .md-hide { display: none; } .md-block { display: block; } tr.md-block { display: table-row; } textarea { max-width: 100%; } #k_sale span { font-size: 1.5rem; } #k_sale a:after { font-size: 1.25rem; margin-left: .5rem; } }
@media (min-width: 992px) { html { scroll-padding-top: 7rem; } .k_ausrichter { display: block; height: 3.25rem; } #k_logo { width: 11rem; } #kopf_top_line { position: sticky; } #kopf_bottom_line { position: sticky; top: 80px; } #kopf_top_line_inner { height: 5rem; } #kopf_top_line {box-shadow: none; } #kopf_top_line.box-shadow { box-shadow: none; } #suchbox { display: flex; width: 35%; align-items: center; } #k_lupe_3 { width: 100%; } #k_lupe_3 input#menSuchStr { width: 100%; max-width: 100%; padding: 0.8rem 1rem;background-color: var(--theme-light); } #k_lupe_3 input#menSuchStr::placeholder {color: var(--theme-text); } #k_lupe_3 > div.lupe { background: rgb(45,45,45) url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"  viewBox="0 0 57.7 57.7" style="enable-background:new 0 0 57.7 57.7;" xml:space="preserve"><style type="text/css"> .st0{fill:rgb(255,255,255);}</style><g> <g>  <g> <path class="st0" d="M35,45.3c-6.1,0-11.7-2.4-16-6.6c-4.3-4.3-6.6-10-6.6-16c0-6.1,2.4-11.7,6.6-16C23.3,2.4,29,0,35,0  s11.7,2.4,16,6.6c4.3,4.3,6.6,10,6.6,16s-2.4,11.7-6.6,16C46.8,43,41.1,45.3,35,45.3z M35,3.7c-5.1,0-9.8,2-13.4,5.6  C18,12.8,16,17.6,16,22.7c0,5.1,2,9.8,5.6,13.4c3.6,3.6,8.3,5.6,13.4,5.6s9.8-2,13.4-5.6C52,32.5,54,27.7,54,22.7  c0-5.1-2-9.8-5.6-13.4C44.9,5.7,40.1,3.7,35,3.7z"/>  </g> </g> <g>  <path class="st0" d="M7.1,57.7c-1.8,0-3.6-0.7-4.9-2L2,55.5c-1.3-1.3-2-3.1-2-4.9c0-1.9,0.7-3.6,2-4.9l9.5-9.5 c0.7-0.7,1.9-0.7,2.6,0c0.7,0.7,0.7,1.9,0,2.6l-9.5,9.5c-0.6,0.6-1,1.4-1,2.3c0,0.9,0.3,1.7,1,2.3L4.8,53c1.3,1.3,3.4,1.3,4.6,0 l9.5-9.5c0.7-0.7,1.9-0.7,2.6,0c0.7,0.7,0.7,1.9,0,2.6L12,55.7C10.7,57,8.9,57.7,7.1,57.7z"/> </g></g></svg>') no-repeat 97% 50%; } #h-ps-filter-toggle, #h-ps-close, #k_lupe_2 { display: none; } #shopLayer.suche-offen #k_logo, #shopLayer.suche-offen #k_icons { display: flex; } #shopLayer.suche-offen #suchbox { width: 50%; } .foot_infos > ul { width: 25%; } .lg-hide { display: none; } .lg-block { display: block; } tr.lg-block { display: table-row; } }
@media (min-width: 1200px) { #k_title ul { max-width: var(--header-width); } .k_ausrichter, .ausrichter { max-width: var(--header-width); margin: 0 auto; } #kopf_top_line_inner { height: 6rem; } #k_logo { width: 14rem; } .foot_infos > ul { width: 20%; } .xl-hide { display: none; } .xl-block { display: block; } tr.xl-block { display: table-row; } }
@media (min-width: 1400px) { .xxl-hide { display: none; } .xxl-block { display: block; } tr.xxl-block { display: table-row; } }
@media (min-width: 1600px) { .xxxl-hide { display: none; } .xxxl-block { display: block; } tr.xxxl-block { display: table-row; } }
/* ### aa ### */
#aa_detail { display: grid; grid-template-areas: "pic" "basket" "unten"; grid-template-columns: 1fr; grid-gap: var(--padding); } #aa_pic_show { grid-area: pic; } #aa_basket { grid-area: basket; } #aa_unten { grid-area: unten; margin-top: 1rem; } #aa_detail .aa-proz { display: inline-block; padding: .25rem .5rem; background-color: var(--theme-error); color: var(--theme-white); text-align: center; font-weight: bold; font-size: 1.5rem; } #aa_detail .azu_icon { display: flex;left: 0; right: unset; align-items: center; } #aa-3ddruck { display: inline-block; background: rgb(9,207,250); color: var(--theme-white); padding: .5rem 1rem; border-radius: 2rem; } .aa-icon { display:flex;align-items: center; } #aa_pic_show figure { position: relative; margin: 0; height: 100%; width: 100%; background-color: white; } #aa_pic_show picture img { width: 80%; max-height: 600px; max-width: 100%; object-fit: contain; } #aa_detail nav { margin: var(--padding) 0 calc(var(--card-padding) * 2) 0; max-width: calc(100vw - calc(var(--padding) * 2)); overflow-x: auto; } #aa_detail nav[data-num="1"] { display: none; } #aa_detail nav .minipics a { flex: 1; display: block; aspect-ratio: 1 / 1; min-height: 3rem; min-width: 3rem; max-height: 5.2rem; max-width: 5.2rem; background-size: contain; background-repeat: no-repeat; background-position: center; background-color: white; border-radius: var(--theme-radius-small); box-shadow: var(--shadow-elevation-medium); transition: box-shadow .2s ease-out; border: 2px transparent solid; outline: var(--theme-outline); } #aa_detail nav .minipics a:first-of-type { margin-left: 0; } #aa_detail nav .minipics a.selected, #aa_detail nav.default .minipics a:first-of-type { border-color: var(--theme-accent-medium); } #aa_detail nav .minipics a:hover { box-shadow: var(--shadow-elevation-high); } #aa_detail nav .minipics { display: flex; gap: var(--padding); } .ada_text { margin-bottom:1rem; } #aa_nummer { margin-bottom:1rem; } #aa_name { font-size:1.25em; margin-bottom: 1.5rem; } #aa_beschreibung { font-size: 1.5rem; font-weight: bold; margin-bottom: 1rem; } .detail-hersteller-logo { margin: 1rem 0; height: 4rem; } .detail-hersteller-logo a { display: flex; height: 100%; justify-content: center; align-items: center; } .detail-hersteller-logo a img { max-height: 100%; object-fit: contain; } #desktop_artikelname { display: none; } #desktop_artikelname a, #mobile_artikelname a { color: var(--theme-text); } #aa_rating {display: flex; align-items: center; } #preis { margin: 0 0 1rem 0; } #preisDiv { display: block; font-size: 2.5rem; font-weight: bold; } .cur { text-transform:uppercase; } #preis .mwst { margin-top: 0; } #preis .ehem_vk { text-decoration: line-through; font-size: 1.5rem; opacity: .7; display: inline-block; margin-right: 1rem; } .ehem_vktext { display: inline-block; margin-right: .5rem; } .ehem_guenst_vk { font-size: .9rem; margin-bottom: .5rem; } .faWrapper, .grWrapper { padding: 1rem calc(var(--card-padding) * 2); padding-left: .2rem; margin-bottom: 1rem; } .fagrWrapper { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: var(--padding); } .fagrWrapper > div { background-color: white; border-radius: var(--theme-radius-small); cursor: pointer; border: 4px transparent solid; outline: var(--theme-outline); box-shadow: var(--shadow-elevation-low); } .fagrWrapper > div span { color: black; text-align: center; } .fagrWrapper > div.weg { opacity: .4; } #shopLayer .fagrWrapper > div.selected { border-color: var(--theme-accent-medium); } .fagrWrapper > div > img, .fagrWrapper > div > div { object-fit: contain; aspect-ratio: 1 / 1; height: 100%; width: 100%; } .fagrWrapper > div > div { position: relative; display: flex; align-items: center; justify-content: center; } .fagrWrapper > div span + span, .fagrWrapper > div.selected span + span:empty { display: none; } .fagrWrapper > div.selected span + span { position: absolute; bottom: -1.2rem; left: -.5rem; right: -.5rem; display: block; font-size: 0.7rem; background-color: var(--theme-accent-medium); color: var(--theme-accent-text); text-align: center; padding: .2rem; border-radius: var(--theme-radius-small); } #html_lagerinfo { margin-bottom: 1rem; min-height: 3.5rem; } #html_lagerinfo > span { display: block; padding: var(--padding); text-align: center; border-radius: var(--theme-radius-small); box-shadow: var(--shadow-elevation-low); margin-bottom: 0.3rem; } #html_lagerinfo > span.groe_txt_st1 { background-color: var(--theme-success); color: var(--theme-success-text); } #html_lagerinfo > span.groe_txt_st2 { background-color: var(--theme-success); color: var(--theme-warning-text); } #html_lagerinfo > span.groe_txt_st3 { background-color: var(--theme-warning); color: var(--theme-warning-text); } #a_basket_panzahl_wrapper { width: 100%; display: inline-block; margin-bottom: calc(var(--card-padding) * 2); position: relative; } #a_basket_panzahl_wrapper #a_basket_einh { display: inline-block; position: absolute; top: 1.5rem; margin-left: .5rem; } #inWKsenden { margin-bottom: 1rem; } #inWKsenden:before { background-image: url(/img/bg-wk.svg); } form#inWK { padding: 0; margin-bottom: 1rem; } #aa_staffel { margin-bottom: calc(var(--card-padding) * 2); } .wiederverfuegbarkeit:empty { display: none; } .wiederverfuegbarkeit { margin-top: 0; text-align: center; background-color: var(--theme-light); } #wiederverf_ueberschrift { text-align: center; padding: var(--padding); } #wiederverf_ueberschrift .set { font-size: .8; opacity: .8; } .wiederverfuegbarkeit .bell, .wiederverfuegbarkeit .bellm { height: 1.5rem; width: 1.5rem; } .btn_wieder_aktivieren { color: var(--theme-text); } .wiederverfuegbarkeit > a { padding: 1rem; display: block; } .aa_vorteile { padding: 1rem; margin-top: 1rem; background-color: var(--theme-light); } .aa_vorteile > a { display: flex; align-items: center; padding: .5rem 0; color: var(--theme-text); } .aa_vorteile a:before {content: ' '; width: 1.5rem;height: 1rem; background: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"  viewBox="0 0 79.1 60" style="enable-background:new 0 0 79.1 60;" xml:space="preserve"><style type="text/css"> .st0{fill:rgb(0,0,0);}</style><path class="st0" d="M78.2,7.2L72,1c-1.3-1.3-3.4-1.3-4.7,0L28.4,39.6L11.9,23c-1.3-1.3-3.4-1.3-4.7,0L1,29.2 c-1.3,1.3-1.3,3.4,0,4.7L26,59c1.3,1.3,3.4,1.3,4.7,0l47.5-47.1C79.4,10.6,79.5,8.5,78.2,7.2L78.2,7.2z"/></svg>') no-repeat 50%; background-size: 1rem; margin-right: 0.5rem;opacity: .8;} .aa_urlaub { padding: 1rem; margin-top: 1rem; background-color: var(--theme-warning); } .aa_urlaub > a { display: flex; align-items: center; padding: .5rem 0; color: var(--theme-warning-text); } .aa_store { padding: 1rem; margin-top: 1rem; background-color: var(--theme-light); } .aa_store > a { display: flex; align-items: center; padding: .5rem 0; color: var(--theme-text); } #aa_unten > section.card, #email_formular, #email_formular_button { margin-bottom: var(--padding); } #aa_unten > section.card:empty { display: none; } #aa_text > .table { border-top: var(--theme-divider); } #aa_text > .table, .separate-rating { margin: calc(var(--card-padding) * 2) 0; width: 100%; max-width: 100%; } #aa_text > .table table td { padding: calc(var(--card-padding) / 2); padding-left:0; } #email_formular_button { width: 100%; } #aa_bewer { padding-bottom: 0; } .separate-rating { padding: calc(var(--padding) * 2); margin-top: 0; margin-bottom: 0; border-bottom: var(--theme-divider); } .separate-rating:first-of-type { border-top: var(--theme-divider); } br.clear { display: none; } .rating-properties { font-weight: bold; margin-top: 0.5rem; } .gutschein_gesamt > * { margin-bottom: calc(var(--card-padding) * 2); } #gutschein_motive { display: grid; grid-template-columns: 1fr 1fr; grid-gap: var(--padding); } #gutschein_motive > img { box-shadow: var(--shadow-elevation-medium); border-radius: var(--theme-radius-small); border: 2px solid white; transition: all .3s ease-out; cursor: pointer; } #gutschein_motive > img:hover { box-shadow: var(--shadow-elevation-high); } #gutschein_motive > img.gutscheinmotiv-checked { box-shadow: var(--shadow-elevation-high); border-color: var(--theme-accent-medium); } .gs_betrag, .gs_vorschau { text-align: center; } .gs_betrag button, .gs_vorschau button { padding: 1rem 1.5rem; font-size: 1.5rem; } .gutscheinbetr { background-color: var(--theme-black); transition: all .3s ease-out; } .gutscheinbetr.gutscheinbetr-checked { background-color: var(--theme-accent); } .gs_betrag { display: grid; grid-template-columns: 1fr 1fr; grid-gap: var(--padding); } span.aa_price2 { font-size: 3rem; } .gs_inkw { text-align: center; } input#submit_inwk { padding: 1rem; font-size: 1.5rem; text-transform: uppercase; font-weight: bold; } #cs_dark_matter { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 98; background-color: rgba(0,0,0,.5); } #cs_layer { position: absolute; top: 50%; left: 50%; opacity: 0; transform: translate(-50%, -80%); background-color: var(--theme-card-background); max-width: 55rem; width: calc(100% - calc(var(--padding) * 2)); border-radius: var(--theme-radius-small); box-shadow: var(--shadow-elevation-medium); overflow: hidden; display: grid; grid-template-columns: 1fr; grid-template-areas: "image" "ueber" "name" "unter" "buttons" "cross"; text-align: center; padding: 1rem; } #cs_layer.open { opacity: 1; transform: translate(-50%, -50%); } #cs_layer img { max-width: 10rem; } #cs_layer .cs_img { background-color: white; padding: 1rem; grid-area: image; display: flex; align-items: center; justify-content: center; } #cs_layer .cs_ueber { grid-area: ueber; margin-top: calc(var(--card-padding) * 2); } .cs_name { grid-area: name; padding: 1rem; } .cs_unter { grid-area: unter; } #cs_unten_cs { grid-area: cross; } #cs_layer #cs_layer_unten { padding: var(--padding); grid-area: buttons; } #cs_layer #cs_layer_unten .button { text-transform: uppercase; } #wk_layer_unten { display: flex; clear: both; flex-wrap: wrap; justify-content: space-around; align-items: center; margin-top: 2rem; } #wk_layer_unten .button { width: 18rem; text-align: center; text-transform: uppercase; margin-bottom: .15rem; } #cs_layer_unten { display: grid; grid-template-rows: 1fr 1fr; grid-gap: var(--padding); } #cs_layer #cs_layer_unten a { display: block; } #cs_layer #warenkorb:before { background-image: url(/img/bg-wk.svg); } #cs_layer #weitersh:before { background-image: url(/img/bg-merkliste.svg); } #cs_layer h1 { margin: 0; } #aa_detail.fancy-aa { grid-template-areas: "pic pic" "basket basket" "unten unten"; max-width: 40rem; margin: 20rem auto 0 auto; } #inWKsenden.wk-animation { color: transparent; } #inWKsenden:before { transition: all .5s ease-out; } #inWKsenden.wk-animation:before { transform: translateX(12rem) rotate(-10deg); } .medium-zoom-image--opened { object-fit: contain; } .aa_bewer_summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(23rem, 1fr)); grid-gap: var(--padding); } .aa_bewer_summary > .card { background-color: var(--theme-accent-light); text-align: center; font-size: 1.2rem; padding: 1rem 0; } .aa_bewer_summary > .card b { display: block; font-size: 2rem; } .aa_bewer_comm h4.title { margin: var(--padding) 0; font-size: 1.1rem; } .aa_bewer_com { display: grid; grid-template-columns: repeat(auto-fit, minmax(23rem, 1fr)); grid-gap: var(--padding); margin-bottom: calc(var(--padding) * 4); } .aa_bewer_comm > span { text-align: right; display: block; margin-top: var(--padding); } .aa_bewer_comm .rat_stars { line-height: 1rem; margin: -0.75rem 0 1rem 0.5rem; } .aa_bewer_com .aa_bewer_comm.card {background: rgb(245,245,245); padding: 0 1rem 1rem 1rem; } .se_beobachten { position: absolute; margin-top: 3rem; right: var(--padding); height: 3rem; width: 3rem; background-color: var(--theme-accent-light); border-radius: 50%; transform: translateY(50%); transition: all .5s ease-out; z-index: 2; background-size: 50%; background-position: center; background-repeat: no-repeat; cursor: pointer; background-image: url(/img/bg-merkliste.svg); transition-delay: .2s; } .se_beobachten.active { background-color: var(--theme-active); } .azu_icon div.cs_azu.azu12, .azu_icon div.cs_azu.azu13, .azu_icon div.cs_azu.azu5, .azu_icon div.cs_azu.azu1, .azu_icon div.cs_azu.azu81, .azu_icon div.cs_azu.azu82 {width:4rem;height:4rem;line-height:4rem;margin:.5rem;} .azu_icon div.cs_azu.azu1 {background-image:url(/img/azu-sale.png);height: 5rem;width: 5rem;background-size: 4.5rem;} .azu_icon div.cs_azu.azu5 {background-image:url(/img/azu-neu.png);height: 5rem;width: 5rem;background-size: 4.5rem;} .azu_icon div.cs_azu.azu13 {background-image:url(/img/azu-preorder.png);height: 5rem;width: 5rem;background-size: 4.5rem;} .azu_icon div.cs_azu.azu12 {background-image:url(/img/azu-3Ddruck.png);height: 5rem;width: 5rem;background-size: 4.5rem;} .azu_icon div.cs_azu.azu49 {background-image:url(/img/azu-black-deal.png);height: 3rem;width: 6rem;background-size: 6rem;} div.cs_azu.azu39 {background-image:url(/img/azu-special-offer.png);height: 3rem;width: 6rem;background-size: 6rem; } .azu_icon div.cs_azu.azu81 {background-image:url(/img/azu-sale.png);height: 5rem;width: 5rem;background-size: 4.5rem;} .azu_icon div.cs_azu.azu82 {background-image:url(/img/azu-black-deal.png);height: 3rem;width: 6rem;background-size: 6rem;} #gpsr-infos { margin: 3rem 0;} #gpsr_labels { padding-left: 1.5rem; } #gpsr_pikto > div > img { max-width: 2.7rem; margin-right: .5rem; } #gpsr_pikto > div { margin-bottom: .5rem; } #light_gpsr > a { position: relative; display: inline-block; padding: .5rem .5rem .5rem 2.2rem; } #light_gpsr > a:before { position: absolute; content: ""; height: 100%; left: 0; top: 0; aspect-ratio: 1 / 1; background-repeat: no-repeat; background-position: center; } #light_gpsr > a[href$=".pdf"]:before { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M64 464l48 0 0 48-48 0c-35.3 0-64-28.7-64-64L0 64C0 28.7 28.7 0 64 0L229.5 0c17 0 33.3 6.7 45.3 18.7l90.5 90.5c12 12 18.7 28.3 18.7 45.3L384 304l-48 0 0-144-80 0c-17.7 0-32-14.3-32-32l0-80L64 48c-8.8 0-16 7.2-16 16l0 384c0 8.8 7.2 16 16 16zM176 352l32 0c30.9 0 56 25.1 56 56s-25.1 56-56 56l-16 0 0 32c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-48 0-80c0-8.8 7.2-16 16-16zm32 80c13.3 0 24-10.7 24-24s-10.7-24-24-24l-16 0 0 48 16 0zm96-80l32 0c26.5 0 48 21.5 48 48l0 64c0 26.5-21.5 48-48 48l-32 0c-8.8 0-16-7.2-16-16l0-128c0-8.8 7.2-16 16-16zm32 128c8.8 0 16-7.2 16-16l0-64c0-8.8-7.2-16-16-16l-16 0 0 96 16 0zm80-112c0-8.8 7.2-16 16-16l48 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-32 0 0 32 32 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-32 0 0 48c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-64 0-64z"/></svg>'); background-size: 1.2rem; } #light_gpsr > a[href$=".jpg"]:before, #light_gpsr > a[href$=".jpeg"]:before, #light_gpsr > a[href$=".png"]:before { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M448 80c8.8 0 16 7.2 16 16l0 319.8-5-6.5-136-176c-4.5-5.9-11.6-9.3-19-9.3s-14.4 3.4-19 9.3L202 340.7l-30.5-42.7C167 291.7 159.8 288 152 288s-15 3.7-19.5 10.1l-80 112L48 416.3l0-.3L48 96c0-8.8 7.2-16 16-16l384 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zm80 192a48 48 0 1 0 0-96 48 48 0 1 0 0 96z"/></svg>'); background-size: 1.2rem; }
@media (min-width: 576px) { #gutschein_motive, .gs_betrag { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { #aa_detail nav { margin: var(--padding) 0 0 0; max-width: 100%; overflow-x: visible; } #aa_detail { grid-template-areas: "pic basket" "unten unten"; grid-template-columns: 1fr 1fr; } #aa_unten { margin-top: 0; } #mobile_artikelname { display: none; } #desktop_artikelname { display: block; margin-top: 0; } #preis { margin-top: 0; } #gutschein_motive, .gs_betrag { grid-template-columns: repeat(4, 1fr); } #cs_layer_unten { grid-template-rows: 1fr; grid-template-columns: 1fr 1fr; } #email_formular_button { width: auto; } }
@media (min-width: 992px) { #gutschein_motive { grid-template-columns: repeat(5, 1fr); } #aa_detail { grid-template-columns: 3fr 2fr; } .fagrWrapper { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { #gutschein_motive { grid-template-columns: repeat(6, 1fr); } /* #aa_detail.flasche { grid-template-columns: 1fr 2fr; } */ .fagrWrapper { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1400px) { .fagrWrapper { grid-template-columns: repeat(6, 1fr); } }
/* ### kachel ### */
body { --kachel-max-height: 27rem; } ul.se { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: min-content; grid-gap: var(--padding); list-style: none; margin: 0; padding: 0; grid-auto-flow: dense; } ul.se.row > li { display: none; } ul.se.row > li:nth-child(-n+2) { display: block; } .art_box, .se_banner { height: var(--kachel-max-height); display: block; position: relative; border: var(--theme-border); background-color: var(--theme-card-background); border-radius: var(--theme-radius-small); overflow: hidden; transition: all .3s ease-out; will-change: transform; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); } ul.se > li:hover:not(.se_banner) { box-shadow: var(--shadow-elevation-medium); transform: translateY(-.2rem) translateZ(0); } .art_box > .se_kachel { display: block; height: 100%; } .art_box > .se_kachel > div { position: relative; height: 100%; } .se_kachel .rat_stars { position: absolute; top: .5rem; left: 50%; transform: translateX(-50%); opacity: .3; filter: grayscale(1); transition: all .1s ease-out; } .se_kachel:hover .rat_stars { opacity: 1; filter: grayscale(0); } .art_box > .se_kachel > div > figure { margin: 0; text-align: center; transition: transform .3s ease-out; background-color: white; } .art_box > .se_kachel > div > figure img { width: 13rem; height: 13rem; object-fit: contain; margin: 1rem 0; } .art_box > .se_kachel > div > .se_groessen_farben:empty { display: none; } .art_box > .se_kachel > div > .se_groessen_farben { position: absolute; z-index: 3; top: 0; left: 0; right: 0; background-color: rgba(255,255,255,0.8); border-top: 1px solid black; padding: .5rem; transition: all .2s linear; opacity: 0; transform: translateY(-2rem); visibility: hidden; pointer-events: none; backdrop-filter: blur(10px); } .art_box > .se_kachel > div > .se_groessen_farben > * { display: block; } .art_box:hover > .se_kachel > div > .se_groessen_farben { visibility: visible; pointer-events: all; opacity: 1; transform: translateY(0%); } ul.se > li > a > div > .se_header, .art_box > .se_kachel > div > .se_header { position: absolute; top: 0; left: 0; right: 0; z-index: 1; } .se_diff { display: block; height: 2rem; width: 4rem; background-color: var(--theme-error); color: var(--theme-white); line-height: 2rem; text-align: center; border-bottom-right-radius: var(--theme-radius-medium); border-top-right-radius: var(--theme-radius-medium); font-weight: bold; font-size: 1.2rem; margin-top: 11rem; } .suchtemp_azu_her { float: right; display: flex; flex-wrap: wrap; max-width: 6rem; justify-content: flex-end; } .cs_azu { height: 3rem; width: 3rem; background-size: 100%; background-repeat: no-repeat; background-position: center; margin: 0.5rem; } /* azu icons */ .cs_azu[title] { cursor: help; } .cs_azu.azu5 { background-image: url(/img/azu-neu.png); } .cs_azu.azu53 { background-image: url(/img/Rabattbutton.png); } .se_unten { display: flex; flex-direction: column; align-content: space-between; justify-content: space-evenly; position: absolute; top: 15rem; left: 0; right: 0; bottom: 1rem; } .se_name span { display: block; text-align: center; padding: 0 1rem; color: var(--theme-text); } .se_preis .se_vk { color: var(--theme-accent-medium); font-size: 1.3rem; text-align: center; display: block; font-weight: bold; } .se_preis .se_vk strike { display: block; color: var(--theme-text); font-weight: 300; font-size: 1rem; float: left; font-size: inherit; margin-left: 1rem; } .se_preis .se_litp { display: block; text-align: center; color: var(--theme-text); } .se_preis .se_litp br { display: none; } li .se_preis .se_vk strike, li .se_preis .se_litp { opacity: .3; transition: opacity .1s ease-out; } li:hover .se_preis .se_vk strike, li:hover .se_preis .se_litp { opacity: 1; } ul.se li.se_banner { overflow-y: auto; padding: 0; margin: 0; } ul.se li.se_banner p, ul.se li.se_banner h2 { padding: 0; } ul.se li.se_banner.sb h2, ul.se li.se_banner.sb p {padding: 0 1rem; } ul.se .banner { position: relative; height: 100%; width: 100%; } ul.se .banner > a { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-position: top; background-size: cover; padding: var(--padding); } ul.se .banner > a > h2 { position: absolute; top: 50%; width: calc(100% - calc(var(--padding) * 2)); text-align: center; transform: translateY(-50%); padding: 0; text-shadow: var(--theme-text-shadow); } ul.se .banner > a > span { position: absolute; bottom: var(--padding); width: calc(100% - calc(var(--padding) * 2)); text-align: center; padding: 1rem; } ul.se .banner > a > span.se_text { color: var(--theme-text); } ul.se .banner > img { margin: var(--padding) 25%; } ul.se > li.se_banner.gr_2x1, ul.se > li.se_banner.gr_2x2 { height: calc(calc(var(--kachel-max-height) * 1.5) + var(--padding)); } ul.slides { width: calc(100% * var(--slides)); height: 100%; margin: 0; padding: 0; list-style: none; overflow: hidden; display: flex; transition: transform .3s ease-out; } ul.slides > li { width: 100%; height: 100%; } ul.slides > li > a { display: block; width: 100%; height: 100%; position: relative; } ul.slides > li > a > .banner, ul.slides > li > a > img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; } ul.slides > li > a > .banner { z-index: 2; display: flex; flex-direction: column; justify-content: space-around; align-items: center; } ul.slides > li > a > .banner > div > h3 { margin: 0; font-size: 2rem; text-shadow: var(--theme-text-shadow); } ul.slides > li > a > .banner > div { text-align: center; } ul.slides > li > a > .banner > div > .subtitle { opacity: .8; text-shadow: var(--theme-text-shadow); } ul.slides-nav { position: absolute; bottom: 0; left: 0; right: 0; padding: var(--padding); list-style: none; display: flex; justify-content: center; margin: 0; z-index: 3; gap: var(--padding); } ul.slides-nav > li { height: 1.5rem; width: 1.5rem; line-height: 1.5rem; text-align: center; background-color: var(--theme-light); color: var(--theme-text); border-radius: 50%; cursor: pointer; } ul.slides-nav > li.active { background-color: var(--theme-accent-medium); color: var(--theme-accent-text); } ul.se > li .quick-buy, ul.se > li > a.se_beobachten { position: absolute; top: calc(12rem - var(--padding)); right: var(--padding); height: 3rem; width: 3rem; background-color: var(--theme-accent-light); border-radius: 50%; box-shadow: var(--shadow-elevation-low); transform: translateY(50%); opacity: 0; transition: all .5s ease-out; z-index: 2; background-size: 50%; background-position: center; background-repeat: no-repeat; cursor: pointer; background-image: url(/img/bg-merkliste.svg); transition-delay: .2s; } ul.se > li:hover .quick-buy, ul.se > li:hover .se_beobachten, ul.se > li > a.se_beobachten.active { transform: translateY(0); opacity: 1; } ul.se > li > a.se_beobachten.active { background-color: var(--theme-accent); } ul.se > li .quick-buy { right: 4.5rem; transform: translateX(50%); transition-delay: 1.2s; transition-duration: .4s; background-image: url(/img/bg-wk.svg); } .gr_1x2, .gr_2x2 { grid-column: span 2; } .gr_2x1, .gr_2x2 { grid-row: span 2; } .lief_gr_farbe_tab { position: absolute; top: 15rem; left: 0; right: 0; transform: translateY(-50%); } .lief_gr_farbe_tab ul { list-style: none; display: flex; padding: 0; justify-content: center; gap: .3rem; } .lief_gr_farbe_tab ul li { height: 2rem; width: 2rem; text-align: center; line-height: 2rem; font-size: 0.8rem; border-radius: 50%; background-color: var(--theme-light); color: var(--theme-text); box-shadow: var(--shadow-elevation-low); overflow: hidden; } #pag_se ul { list-style: none; padding: 0; display: flex; align-items: center; place-content: center; } #pag_se ul > li > div { height: 2.5rem; background-color: var(--theme-accent-medium); color: var(--theme-accent-text); padding: 0 1rem; line-height: 2.5rem; border-radius: var(--theme-radius-medium); box-shadow: var(--shadow-elevation-medium); } #pag_se ul > li > #linkpagzur, #pag_se ul > li > #linkpagvor { cursor: pointer; display: block; height: 1.8rem; width: 1.8rem; background-color: var(--theme-accent-medium); border-radius: 50%; background-repeat: no-repeat; background-position: center; background-size: 32%; margin: 0 1rem; box-shadow: var(--shadow-elevation-medium); transition: box-shadow .3s ease-out; background-image: url(/img/artikel_weiter.svg); } #shopLayer #pag_se ul > .nopag { opacity: .5; } #pag_se ul > li > *[href]:hover { box-shadow: var(--shadow-elevation-high); } #pag_se ul > li > #linkpagzur { transform: rotate(180deg); } .ausrichter.se { padding: 0; } .ausrichter.se h2 { margin-bottom: 0; } .ausrichter.se .art_slider { margin-top: 0; } .banner_suchergebnis .grid-1 .text1 { position: absolute; top: 0; right: 0; display: inline-block; background-color: var(--theme-accent-medium); padding: 0.5rem 0.8rem; color: var(--theme-accent-text); border-top-left-radius: var(--theme-radius-medium); } .banner_suchergebnis .grid-1 img { max-width: 100%!important; } .flexbox { display: flex; flex-wrap: wrap; justify-content: space-between; } .flexbox.box50 { width: 100%; } .flexbox.box50 a { display: block; width: 100%; margin: 0 0 1rem 0;} .flexbox.box50 img { display: block; width: 100%; height: 100%; vertical-align: middle; } .flexbox.box50 a .text { position: absolute; font-size: 1.5rem; right: 0; font-weight: bold; text-transform: uppercase; background: rgba(0,0,0,0.75); padding: 1rem; color: white; } .flexbox.box50 a .text.top { top: 1rem; } .flexbox.box50 a .text.bottom { bottom: 1rem; }
@media (min-width: 576px) { body { --grid-column-count: 6; --grid-item--min-width: 13rem; --gap-count: calc(var(--grid-column-count) - 1); --total-gap-width: calc(var(--gap-count) * var(--padding)); --grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count)); } ul.se { grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr)); } ul.se.row > li:nth-child(-n+3) { display: block; } ul.se > li.se_banner.gr_2x1, ul.se > li.se_banner.gr_2x2 { height: calc(calc(var(--kachel-max-height) * 2) + var(--padding)); }  }
@media (min-width: 768px) { #dd_sort_top, #filter_anzeigen { font-size: 1rem; } #pag_se ul > li > #linkpagzur, #pag_se ul > li > #linkpagvor { height: 2.5rem; width: 2.5rem; margin: 0 2rem; } .flexbox.box50 a { display: block; width: 49%; margin: 0 2% 0 0;} .flexbox.box50 a:nth-child(2n) { margin-right: 0; } }
@media (min-width: 992px) { body { --grid-item--min-width: 14rem; } ul.se.row > li:nth-child(-n+4) { display: block; }  }
@media (min-width: 1200px) { ul.se.row > li:nth-child(-n+5) { display: block; } }
@media (min-width: 1400px) { ul.se.row > li:nth-child(-n+6) { display: block; } }
/* ### to-top-button ### */
#btn-to-top { display: block; opacity: 0; transform: translateY(2rem); visibility: hidden; position: fixed; bottom: 1rem; right: 1rem; height: 4rem; width: 4rem; background-color: var(--theme-accent-medium); border: none; border-radius: 50%; box-shadow: var(--shadow-elevation-medium); z-index: 90; transition: all .2s ease-out; background-image: url(/img/artikel_weiter.svg); background-position: center; background-repeat: no-repeat; padding: 0; } #btn-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0) rotate(-90deg); }
/* ### input-floating ### */
.inp_wrapper { position: relative; margin-top: 1.5rem; } .inp_wrapper label { position: absolute; top: 1.5rem; left: .8rem; font-size: .9rem; z-index: 1; color: var(--theme-text); transition: all .15s ease-out; opacity: .54; pointer-events: none; font-family: inherit; } .inp_wrapper:focus-within label, .inp_wrapper input:not(:placeholder-shown) + label, .inp_wrapper textarea:not(:placeholder-shown) + label, .inp_wrapper select + label, .inp_wrapper input:-webkit-autofill + label, .inp_wrapper textarea:-webkit-autofill + label, .static-input .inp_wrapper textarea + label, .static-input .inp_wrapper input + label, .inp_wrapper input + label.static, .inp_wrapper textarea + label.static { transform: translateY(-1.8rem); opacity: 1; } .inp_wrapper input, .inp_wrapper textarea, .inp_wrapper select { margin-top: 1rem; } .inp_wrapper label span.red { color: red; } .inp_wrapper.valid input { border-bottom: 1px solid var(--theme-success); }
/* ### powermenu ### */
 /* POWERmenü CSS Frontend */ .powermenue a:not(.button), .powermenue div {color: var(--theme-text);} .powermenue { display: flex; position: fixed;z-index: 1; top: 4rem; left: 0; right: 0; bottom: 0; background-color: var(--theme-powermenu-medium); overflow-y: auto; overflow-x: hidden; opacity: 0; visibility: hidden; transform: translateX(-2rem); transition: all .3s ease-out; } nav.powermenue.open { opacity: 1; visibility: visible; transform: translateX(0); } #powermenue-strukturen-ueberschrift {display: flex;background-color: var(--theme-accent-medium);padding: 0.5rem 0;align-items: center;justify-content: center;} .powermenue-head { width: 100%;flex-direction: column; align-items: stretch;left: 0px;position: absolute; margin: 0; opacity: 1; pointer-events: all; transition: all .2s ease out; } .powermenue-head.hidden { opacity: 0; pointer-events: none; } .powermenue-head li { padding: 0 1rem;background-color: var(--theme-black); margin: 0; margin-bottom: .1rem; display: flex;align-items: center;justify-content: space-between;cursor: pointer; } .powermenue-head li:last-child { border-bottom: 0; } .powermenue-head a { font-size: 1.25rem; } .powermenue-head a:hover, .powermenue-modul-auflistung li a:hover, #shopLayer .powermenue .powermenue-strukturen a:hover { color: var(--theme-accent); } .powermenue-head li.powermenue-aktiv a { color: var(--theme-accent); background-color: rgb(38,38,38); } .powermenue-strukturen { position: absolute; display: block; top: 0; left: 0; right: 0; bottom: 0; padding: 0; background-color: rgb(255,255,255); transition: all .3s ease-out; box-shadow: none; overflow: auto; } .powermenue-strukturen.hidden {opacity: 0;visibility: hidden;transform: translateX(-2rem);} .powermenue-struktur.hidden, .powermenue-struktur-module.hidden { display: none; } .powermenue-struktur-module { display: flex; width: 100%; padding: 1rem;box-sizing: border-box; } .powermenue-struktur-module {flex-direction: column;padding: 0;} .powermenue-modul-ueberschrift {display: block;width: 100%;margin: 0; font-weight: bold;} .powermenue-modul-ueberschrift-wrapper {position:relative;background-color: var(--theme-accent-light);padding: .5rem 1rem;box-sizing: border-box;border-bottom: 0;} .powermenue-modul-ueberschrift-wrapper.powermenue-aktiv a { color: var(--theme-accent); } .powermenue-modul-ueberschrift-icon {height: 1.5rem;width: 1.5rem;} .powermenue-modul { width: 100%;margin: 0;} .powermenue-modul a, .powermenue-modul p {font-size: 1rem;} .powermenue-modul .powermenue-modul-auflistung[data-modul-typ="auflistung"] {display: flex;align-items: center;justify-content: flex-start;flex-direction: row;flex-wrap: wrap;margin:.5rem 0;} .powermenue-modul .powermenue-modul-auflistung[data-modul-typ="auflistung"] li { width: 50%; } .powermenue-modul-auflistung .powermenue-auflistung-mit-icon {padding: 0;} .powermenue-modul-auflistung {padding: 0 1rem 1rem 1rem;box-sizing:border-box; } .powermenue-modul-auflistung li.powermenue-aktiv a {color: var(--theme-accent);} .powermenue-modul-auflistung li { padding: .25rem 0; } .powermenue-html-oben, .powermenue-html-unten { width:100%; padding: 1rem; box-sizing:border-box; } .powermenue-html-unten { margin-bottom: 200px; } .powermenue-html-oben:empty, .powermenue-html-unten:empty { display:none; } .powermenue-modul-ueberschrift-icon {width: 2rem;height: 2rem;object-fit: contain;margin-right: .25rem;} .powermenue-auflistung-mit-icon img {width: 3rem;height: 3rem;margin: 0.5rem 1rem 0.5rem 0;} .powermenue-auflistung-mit-icon a, .powermenue-icons-mit-text a, .powermenue-top-marke a {display: flex;justify-content: flex-start;align-items: center;} .powermenue-icons-mit-text img { width: 4rem;height: 4rem;margin-bottom: .25rem; } .powermenue-icons-mit-text a, .powermenue-top-marke a {flex-direction: column;} .powermenue-icons-mit-text a p, .powermenue-top-marke a p {font-size: .8rem;margin-bottom: .5rem;} .powermenue-modul-auflistung .powermenue-top-marke {padding: .75rem 0 .5rem 0;} .powermenue-modul-top-marken, .powermenue-top-marke, .powermenue-modul-top-artikel {display: flex;flex-direction: row;flex-wrap: wrap;align-items: center;justify-content: flex-start;} .powermenue-top-marke img, .powermenue-top-artikel img {max-width: 200px;max-height: 200px;object-fit: contain;} .powermenue-modul .powermenue-top-artikel-name {font-size: 1rem;} .powermenue-modul-icons {display: flex;flex-direction: row;flex-wrap: wrap;justify-content: flex-start;align-items: center;} .powermenue-modul-auflistung li.powermenue-top-artikel {background-color:rgb(255,255,255);border:1px solid rgb(221,221,221);padding:.5rem;box-sizing:border-box;margin-right:2rem;} .powermenue-top-artikel {width: 100%;} .powermenue-top-artikel a {align-items: center; } .powermenue-top-artikel-rechts .powermenue-top-artikel-preis {font-size: 1.5rem;} .powermenue-mehr-anzeigen-button {margin-bottom: 0.5rem; } .powermenue-modul-auflistung li a {display: flex;} .powermenue-top-marke img, .powermenue-top-artikel img {max-width: 100px;max-height: 100px;object-fit: contain;} .powermenue-top-artikel a {display: flex;align-items: center;justify-content: flex-start;} .powermenue-top-artikel-rechts {margin-left: 5px;} .powermenue-top-artikel-name {font-size: .8rem;margin-bottom: 10px;} .powermenue-top-artikel-preis {font-size: 1rem;} .powermenue-zwei-spalten-rechts {display: none;} .powermenue-mehr-anzeigen {display: none;} .powermenue-mehr-anzeigen-button {cursor: pointer;display: flex; align-items: center;justify-content: center;margin-top: .5rem;} .powermenue-pfeil-unten {margin-left: .5rem;transform: rotate(90deg);} #powermenue-zurueck {position: absolute;background: transparent url(/img/powermenue_arrow-w.svg) no-repeat 50% 50%;background-size: auto 50px;z-index: 1000;cursor: pointer;width: 4rem;height: 2rem;left: 0;padding: 1rem 1rem 1rem 0;} #powermenue-zurueck-text {font-size: 1.5rem;color: var(--theme-accent-text);} .powermenue-head-mobile-pfeil {display: none;} .alle-struktur-artikel-anzeigen {display: none; } .powermenue-zwei-spalten-links {display: flex;align-items: center;justify-content: flex-start;} .powermenue-pfeil-rechts {margin-left: 0.25rem;} .powermenue-modul-html img {max-width: 100%;} .powermenue-auflistung-hoch {font-weight: bold;} .powermenue-auflistung-rechts {margin-left: 10px;} .powermenue-modul.powermenue-modul-nummer-3 .powermenue-modul-auflistung {margin-top:0;} .powermenue-modul.powermenue-modul-nummer-6 ul li {width:50%;} .powermenue-modul.powermenue-modul-nummer-6 ul li.powermenue-icons-mit-text a {flex-direction: unset;} .powermenue-modul.powermenue-modul-nummer-6 ul li.powermenue-icons-mit-text a p {display:none;} .powermenue-head-mobile-pfeil { display: block; background: transparent url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"  viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><style type="text/css"> .st0{fill:%23FFFFFF;}</style><polygon class="st0" points="352,128.4 319.7,96 160,256 160,256 160,256 319.7,416 352,383.6 224.7,256 "/></svg>') no-repeat 50% 50%; background-size: auto 50px; width: 2rem; height: 2rem; transform: rotate(180deg); } .powermenue-modul[data-modul-typ='zwei-spalten-rechts'] { display: none; } .alle-struktur-artikel-anzeigen { display: flex; align-items: center; justify-content: space-between; width: 100%; margin: .1rem 0; padding: .5rem 1rem; box-sizing: border-box; background-color: var(--theme-accent); } .alle-struktur-artikel-anzeigen p:first-child { font-size: 1rem; } .powermenue-pfeil-rechts { transform: rotate(90deg); } .powermenue-modul-auflistung .powermenue-auflistung-platzhalter { border-bottom: 0; } .powermenue-modul.powermenue-modul-nummer-6 ul li {width:33.33%;} .powermenue-modul-nummer-37 .powermenue-modul-ueberschrift-wrapper:after { content:"";display:block;background: url(/img/azu-preorder.png) 50% no-repeat; height: 4rem;width:4rem;position:absolute;left:6rem;top:-.5rem; background-size: 3.5rem;} .powermenue-struktur-nummer-6 .alle-struktur-artikel-anzeigen { display: none; } 
@media (min-width: 768px) { nav.powermenue.open { max-width: 600px; box-shadow: 0px 12px 24px -10px rgba(0,0,0,1); } #powermenue-schalter { height: 4rem; width: 4rem; margin-left: 0.5rem; background-size: 2.25rem; }  }
@media (min-width: 992px) { .powermenue {width: 100%;display: flex;align-items: center;justify-content: flex-start;flex-direction: column; overflow: visible; opacity: 1; visibility: visible; position: relative; top: 0; background: none; transform: none; } nav.powermenue.open { max-width: 100%; } #powermenue-schalter { display: none; } .powermenue-head { display: flex; flex-direction: row; justify-content: center; height: 3rem; align-items: center;padding: 0; margin-top: 0; } .powermenue-head li { margin: 0; padding: 0; background-color: unset; } .powermenue-head li a { padding: 1rem .5rem; } .powermenue-head a { font-size: 1rem; } nav.powermenue { display: flex; opacity: 1; visibility: visible; } .powermenue-strukturen.hidden {opacity: 0;visibility: hidden;transform: translateY(-2rem);} .powermenue-modul .powermenue-modul-auflistung[data-modul-typ="auflistung"] li { width: 100%; } .powermenue-struktur, .powermenue-struktur-module { display: flex;align-items: flex-start;justify-content: flex-start; } .powermenue-strukturen { position: static; width: 100%; display: block; box-shadow: 0px 12px 24px -10px rgba(0,0,0,0.75); padding:1rem; margin-top: 3rem; } .powermenue-strukturen.hidden { display: none; } .powermenue-struktur { flex-direction: column; } .powermenue-struktur-module { width: 100%; flex-direction: row; padding: 1rem;box-sizing: border-box; } .powermenue-modul { width: 23%; margin: 0; } .powermenue-modul-ueberschrift-wrapper {display: flex;align-items: center;justify-content: flex-start;font-weight:bold; background-color: unset; } .powermenue-modul-ueberschrift { font-size: 1.2rem!important; } .powermenue-html-unten #alle-marken {float:right;} .powermenue-html-oben #alle-marken {float:right;} .powermenue-html-oben h1 {margin:0;} .powermenue-top-marke {width: 50%;justify-content: flex-start;justify-content: center;} .powermenue-icons-mit-text {width: 25%;} .powermenue-icons-mit-text img {width: 5rem;height: 5rem;} .powermenue-auflistung-mit-icon img, .powermenue-icons-mit-text img {width: 3.5rem;height: 3.5rem;} .powermenue-head-mobile-pfeil { display: none; } .alle-struktur-artikel-anzeigen { display: none; } #powermenue-strukturen-ueberschrift { display: none; } .powermenue-modul-nummer-37 .powermenue-modul-ueberschrift-wrapper:after { top: 0; left: 10rem; } }
@media (min-width: 1200px) { .powermenue-head li a { padding: 1rem 1rem; } }
/* ### search ### */
ul.se li em { font-weight: bold; font-style: normal; background-color: yellow !important; color: black !important; } .css_dropdown[data-group='ag'] { display: none; } #meili-search { min-height: 85vh; } #meili-search #meili-items li#faqs { grid-column: 1 / span 2; padding: var(--padding); height: auto; } #meili-search #meili-items li#faqs p { padding: 0; } #meili-term:empty, #meili-active-filters:empty { display: none; } #meili-title { display: flex; align-items: baseline; justify-content: space-between; } #meili-filters { display: none; grid-template-columns: 1fr 1fr; grid-gap: var(--padding); margin-bottom: 2rem; } #meili-filters.open { display: grid; } #meili-filters > div { flex: 1; } #meili-filters .css_dropdown ul li label span { font-size: .8rem; opacity: .8; float: right; line-height: 1.5rem; } #meili-filter-toggle { display: none; } #meili-filter-toggle.visible { display: block; } #meili-active-filters { margin-bottom: var(--padding); } #meili-active-filters > button { margin-right: var(--padding); } #meili-placeholder, #meili-no-hits { text-align: center; max-width: 66rem; margin: 0 auto; } #meili-no-hits { display: none; } #meili-no-hits > b { font-size: 1.1rem; margin-bottom: 2rem; display: inline-block; font-family: 'Header-Font'; } #shopLayer.suche-offen #kopf_bottom_line { display: none; } #shopLayer.suche-offen #kopf_top_line { box-shadow: var(--shadow-elevation-medium); } #meili-items > li.card.se_banner.se_banner_hersteller.art_box { padding: 1rem; } div#meili-items-divider { background-color: var(--theme-error); color: white; border-bottom: 0; }
@media (min-width: 576px) { #meili-filters { grid-template-columns: repeat(3, 1fr); } #meili-search #meili-items li#faqs { height: var(--kachel-max-height); } }
@media (min-width: 768px) { #meili-filters { display: grid; grid-template-columns: repeat(4, 1fr); } #meili-filter-toggle.visible { display: none; } #meili-search #meili-items li#faqs { grid-column: 1 / span 3; } }
@media (min-width: 992px) { #meili-filters { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1200px) { #meili-filters { grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 1400px) { #meili-filters { grid-template-columns: repeat(7, 1fr); } }
/* ### kachel-stapel ### */
.art_stapel { list-style: none; padding: 2rem; overflow-y: hidden; overflow-x: scroll; display: flex; scroll-behavior: smooth; } .art_stapel .art_box { min-width: 17rem; margin-right: var(--padding); } .art_stapel .art_box:first-of-type { margin-left: 2rem; } .art_stapel .art_box:not(:first-of-type) { margin-left: -8rem; } .art_stapel .art_box:hover, .art_stapel .art_box:focus-within, .art_stapel .art_box.active { transform: translateX(-2rem) translateY(-.3rem) rotate(-3deg); transform-origin: bottom right; } .art_stapel .art_box:hover~.art_box, .art_stapel .art_box:focus-within~.art_box, .art_stapel .art_box.active~.art_box { transform: translateX(4.5rem); } .art_stapel_wrapper { position: relative; } .art_stapel_wrapper button.art_slider_nav { display: none; } @media (pointer: fine) { .art_stapel_wrapper button.art_slider_nav { position: absolute; display: block; left: 0rem; top: 50%; transform: translate(0%, -50%) rotate(180deg); height: 3rem; width: 3rem; padding: 0; border-radius: 50%; background-image: url(/img/artikel_weiter.svg); background-position: center; background-repeat: no-repeat; background-size: 30%; } .art_stapel_wrapper button.art_slider_nav.slider_next { left: unset; right: -.5rem; transform: translate(0%, -50%) rotate(0deg); } }
/* ### hover-zoom ### */
.img-magnifier-glass.outofbounds { opacity: 0; transform: translate(-50%,-50%) scale(.5) rotate(10deg); } .img-magnifier-glass { position: absolute; height: 25rem; width: 25rem; border-radius: var(--theme-radius-small); border: 4px solid var(--theme-light); transition: opacity .3s ease-in, transform .3s ease-in; transform: translate(-50%,-50%); cursor: none; box-shadow: var(--shadow-elevation-medium); z-index: 3; } #article-image.hover-zoom img { filter: blur(3px) grayscale(.75); }
/* ### kachel-slider ### */
.art_slider { list-style: none; padding: var(--padding); overflow-y: hidden; overflow-x: scroll; display: flex; scroll-snap-type: x proximity; scroll-padding: calc(var(--padding) - .6rem); scroll-behavior: smooth; } .art_slider .art_box { min-width: 17rem; margin-left: var(--padding); scroll-snap-align: start; } .art_slider_wrapper { position: relative; } .art_slider_wrapper button.art_slider_nav { display: none; } @media (pointer: fine) { .art_slider_wrapper button.art_slider_nav { position: absolute; display: block; left: 0rem; top: 50%; transform: translate(0%, -50%) rotate(180deg); height: 3rem; width: 3rem; padding: 0; border-radius: 50%; background-image: url(/img/artikel_weiter.svg); background-position: center; background-repeat: no-repeat; background-size: 30%; } .art_slider_wrapper button.art_slider_nav.slider_next { left: unset; right: -.5rem; transform: translate(0%, -50%) rotate(0deg); } }
/* ### meili-extra ### */
#meili-items-divider { margin-top: calc(var(--padding)* 2); text-align: center; font-weight: bold; border-bottom: var(--theme-divider); margin-bottom: var(--padding); font-size: 1.15rem; }
/* ### powermenue-extra ### */
@media (pointer: fine) { .powermenue-head.hidden { opacity: 1; pointer-events: all; } }
@media (min-width: 992px) { .powermenue-head.hidden { opacity: 1; pointer-events: all; } }
/* ### highslide_v2 ### */
.pg-highslide .pg-highslide-content { display: none; } .pg-highslide { cursor: pointer; text-align: center;} .pg-highslide-bg { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, .5); z-index: 200; } #pg-highslide { position: absolute; top: 0; left: 50%; transform: translate(-50%, 1rem); height: 80vh; width: 90vw; overflow: hidden; } #pg-highslide img { max-height: 80vh; } #pg-highslide-close {width: 2rem; height: 2rem; background-color: var(--theme-white); background-image: url(/img/powermenue_close.svg); background-repeat: no-repeat; background-size: 1.5rem; background-position: 50%; border-radius: 2rem; position: absolute; top: .5rem; right: .5rem; cursor: pointer; } .fadeInDownSmall { animation-name: fadeInDownSmall; animation-duration: .3s; } @keyframes fadeInDownSmall { 0% { opacity: 0; transform: translate3d(0,-200px,0); } 100% { opacity: 1; transform: none; } }
@media (min-width: 768px) { #pg-highslide { } }
@media (min-width: 992px) { #pg-highslide { } }