/* CSS only 77.66K, CSS & InlineSvg (14/25) 96.72K => 25% more */

@font-face { font-family: 'Alternative-Font'; font-display: swap; src: url('/img/LibreBaskerville-Italic.eot'); src: url('/img/LibreBaskerville-Italic.woff2') format('woff2'), url('/img/LibreBaskerville-Italic.woff') format('woff'), url('/img/LibreBaskerville-Italic.eot?#iefix') format('embedded-opentype'), url('/img/LibreBaskerville-Italic.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: 'Header-Font'; font-display: swap; src: url('/img/Oswald-Light.eot'); src: url('/img/Oswald-Light.woff') format('woff'), url('/img/Oswald-Light.eot?#iefix') format('embedded-opentype'), url('/img/Oswald-Light.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, wk, progress-bar, amazon-pay, wk-t2, trinkgeld, powermenu, powermenue-extra, to-top-button, input-floating, datenschutz */
/* ### base ### */
*, ::before, ::after { box-sizing: border-box; } html { text-size-adjust: none; } ::before, ::after { text-decoration: inherit; vertical-align: inherit; } ::selection {background:rgb(204,204,204);} :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 { font-size: 1rem; overflow-y: scroll; margin: 0; text-rendering: optimizeLegibility; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; overscroll-behavior-x: none; --header-width: 1600px; --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-link: rgb(20,20,20); --theme-black: rgb(20,20,20); --theme-text: rgb(20,20,20); --theme-text-shadow: 0 0 3px rgba (0,0,0,.5); --theme-text-hover: rgb(241,142,28); --theme-accent: rgba(60,60,60); --theme-accent-light: rgba(241,142,28,.25); --theme-accent-medium: rgb(241,142,28); --theme-accent-dark: rgb(241,142,28); --theme-orange: rgb(241,142,28); --theme-accent-text: rgb(255,255,255); --theme-powermenu-medium: rgb(238,238,238); --theme-border: none; --theme-outline: none; --theme-radius-small: 0; --theme-radius-medium: .5rem; --theme-card-background: var(--theme-white); --theme-divider: .1rem solid var(--theme-medium); --padding: 1rem; --card-padding: 0; --theme-rosa: rgb(202, 135, 135); --theme-red: rgb(204,23,24); --theme-error: rgb(204,23,24); --theme-error-text: rgb(255,255,255); --theme-warning: rgb(233,155,5); --theme-warning-text: rgb(255,255,255); --theme-success: rgb(82, 139, 82); --theme-success-text: rgb(255,255,255); --shadow-elevation-low: none; --shadow-elevation-medium: none; --shadow-elevation-high: none; background-color: var(--theme-white)!important; } body, input, button, .button { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } b, strong { font-weight: bolder; color: inherit; } .red { color: var(--theme-error); } .bgred { background-color: var(--theme-error); color: var(--theme-white); padding: 1rem; } .center { text-align: center!important; } .small { font-size: .75rem; } .border { border: var(--theme-divider); } .pg-only { display: none; } .right { text-align: right; } .left { text-align: left; } .white { color: var(--theme-white); } audio, canvas, iframe, img, svg, video { vertical-align: middle; max-width: 100%; height: auto; } iframe { border-style: none; } 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: 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-light); color: var(--theme-text); } h1, h2, h3, h4, h5, h6 { color: var(--theme-text); font-family: 'Header-Font'; } ul { padding: 0; } ul.mleft li { margin-left: 2rem; list-style: disc; padding: .5rem 0; } body, #shopLayer, #shopMain { max-width: 100vw; } .shopHeader { background-color: var(--theme-white); z-index: 99; } #kopf_top_line { position: sticky; top: 0; z-index: 100; box-shadow: 0 0 25px -5px rgba(0,0,0,.25); } #kopf_bottom_line { background-color: var(--theme-white); box-shadow: 0 0 25px -5px rgba(0,0,0,.25); } #shopMain { min-height: 100vh; } /* 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-link); transition: all 0.5s; } p a { border-bottom: 1px dotted var(--theme-text); } p a:hover { color: var(--theme-text-hover); } h1 { font-size: 1.7em; } .h1_in_breadcrumb { font-size: inherit; } h1 span { display: block; font-size: .9rem; font-style: italic; font-weight: normal; font-family: 'Alternative-Font'; text-align: right; } h1.big { font-size: 2rem; } h2 { font-size: 1.5em; } h3 { font-size: 1.15em; } h3 a { color: var(--theme-black); border-bottom: .13rem dotted var(--theme-black); } h3 a:hover { color: var(--theme-orange); } h4 { font-size: 1em; } h5 { font-size: 1em; } h6 { font-size: 1em; } hr { border: var(--theme-divider); } /* header */ .BreadcrumbList a, .breadcrumb a span, *[itemtype*="Breadcrumb"] * { color: var(--theme-text); } .BreadcrumbList span:last-child a span { color: var(--theme-orange); } .breadcrumb a span { transition: all 0.5s; } .breadcrumb a span:hover { color: var(--theme-orange); } .shopHeader li, #shopFooter li { list-style: none; } #k_title { width: 100%; height: 2rem; background: var(--theme-black); position: relative; z-index: 101; } #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: var(--theme-text-hover); } #k_title ul li:nth-child(2) { display: none; } #k_title ul li a.active { font-weight: bold; } #k_title ul li img { display: inline-block; margin-right: .3rem; } #k_title ul li#phone span { display: none; } .ausrichter { padding: 0 calc(var(--card-padding) * 1); } #kopf_top_line_inner { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 4rem; padding: 0 .5rem; } #k_logo, #k_icons { width: 11rem; } #k_logo { background: url(/img/baumwollseil_logo.svg) no-repeat 50% 50%; height: 100%; } #suchbox { display: none; } #k_icons { display: flex; align-items: center; justify-content: flex-end; } #k_lupe_2 { 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 60.7 60.7" style="enable-background:new 0 0 60.7 60.7;" xml:space="preserve"><style type="text/css"> .st0{fill:none;stroke:%23141414;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;} .st1{fill:none;stroke:%23141414;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;}</style><circle class="st0" cx="27.9" cy="27.9" r="20.6"/><line class="st1" x1="54.1" y1="54.1" x2="42.9" y2="42.9"/></svg>'); background-repeat: no-repeat; background-position: 50%; } #k_merk { 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 60.7 60.7" style="enable-background:new 0 0 60.7 60.7;" xml:space="preserve"><style type="text/css"> .st0{fill-rule:evenodd;clip-rule:evenodd;fill:%23141414;stroke:%23141414;stroke-width:0.5;stroke-miterlimit:10;}</style><g id="heart"> <path class="st0" d="M52.7,10.6C46.5,4,36.6,3.9,30.2,10.1c-6.4-6.2-16.3-6-22.5,0.5c-6.4,6.7-6.4,17.7,0,24.4  C9.5,37,26.5,55,26.5,55c2,2.1,5.3,2.1,7.3,0c0,0,18.7-19.7,18.9-19.9C59.1,28.3,59.1,17.3,52.7,10.6z M50.3,32.5L31.4,52.4  c-0.7,0.7-1.8,0.7-2.4,0L10.1,32.5c-5-5.3-5-14,0-19.3C15,8,22.8,7.8,27.9,12.8l2.3,2.2l2.3-2.2c5.1-4.9,12.9-4.7,17.8,0.4  C55.3,18.5,55.3,27.1,50.3,32.5z"/></g></svg>'); background-repeat: no-repeat; background-position: 50%; } #k_info { 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 60.7 60.7" style="enable-background:new 0 0 60.7 60.7;" xml:space="preserve"><style type="text/css"> .st0{fill:%23A50101;} .st1{fill:%23FFFFFF;} .st2{fill:none;}</style><circle class="st0" cx="30.4" cy="31" r="25.8"/><g> <path class="st1" d="M23.1,25.5v-4.7c0.8-0.9,1.5-1.6,2.2-2.1c1.5-1,3.2-1.5,5.1-1.5c2.5,0,4.4,0.7,5.9,2.2  c1.1,1.2,1.7,2.6,1.7,4.3c0,2-0.8,3.7-2.4,5.2l-2.8,2.6c-1.3,1.2-2,2.6-2,4.2c0,0.2,0,0.6,0,1.2h-3.1c0-0.9,0-1.6,0-2  c0-1.1,0.2-2,0.5-2.6c0.2-0.4,0.8-1.1,1.7-2.1l2.5-2.7c1.2-1.3,1.8-2.4,1.8-3.4c0-1-0.4-1.8-1.3-2.4c-0.8-0.5-1.7-0.7-2.8-0.7  c-2,0-3.6,0.7-5,2C24.5,23.5,23.9,24.4,23.1,25.5z M29.4,39.5c1.8,0,2.7,0.7,2.7,2.1c0,1.4-0.9,2.2-2.8,2.2c-1.8,0-2.7-0.7-2.7-2.1  C26.5,40.2,27.5,39.5,29.4,39.5z"/></g><path class="st2" d="M14.4,20.1c4.3,7.2,9.1,14,14.5,20.4"/></svg>'); background-repeat: no-repeat; background-position: 50%; } #k_account { 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 60.7 60.7" style="enable-background:new 0 0 60.7 60.7;" xml:space="preserve"><style type="text/css"> .st0{fill:%23141414;}</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>'); background-repeat: no-repeat; background-position: 50%; } #k_wk { 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 60.7 60.7" style="enable-background:new 0 0 60.7 60.7;" xml:space="preserve"><style type="text/css"> .st0{fill:%23141414;}</style><path class="st0" d="M58.9,19.4c-0.4-0.4-1-0.7-1.6-0.7H47.2c-1-7.4-7.4-13-14.9-13h-4c-7.5,0-13.8,5.6-14.9,13H3.3 c-0.6,0-1.1,0.3-1.5,0.7S1.2,20.5,1.3,21l5.3,30.3c0.6,3.1,3.3,5.4,6.4,5.3h34.5c3.2,0,5.9-2.3,6.4-5.4l5.4-30.1 C59.4,20.5,59.2,19.9,58.9,19.4z M28.3,9.7h4c5.3,0,9.8,3.8,10.8,9H17.5C18.5,13.5,23,9.7,28.3,9.7z M50,50.6 c-0.2,1.2-1.3,2.1-2.5,2.1H13.1c-1.2,0-2.2-0.8-2.5-2l-4.9-28h49.2L50,50.6z"/></svg>'); background-repeat: no-repeat; background-position: 50%; } #k_lupe_2, #k_info, #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; } .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: fixed; left: var(--padding); right: var(--padding) !important; width: auto; top: 5.4rem; z-index: 99; padding: 1rem; pointer-events: none; transform: translateY(-1rem); opacity: 0; visibility: hidden; background-color: var(--theme-card-background); border-radius: var(--theme-radius-small); box-shadow: 0 0 25px -5px rgba(0,0,0,.25); transition: opacity .2s ease-out, transform .2s ease-out; } .shopHeader.box-shadow #k_icons > div > .shBagInh { top: 3rem; } #k_icons > div:hover > .shBagInh { pointer-events: all; transform: translateY(0); opacity: 1; visibility: visible; overflow: hidden; } #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); } .wk-heading a:hover { color: var(--theme-orange); } #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 .5rem; background-size: 3rem; background-repeat: no-repeat; } ul.alt-list.items > li > a { padding: .5rem .5rem .5rem 4rem; min-height: 4rem; background-position: .5rem; } ul.alt-list > li > a:hover { color: var(--theme-text-hover); } #k_icons > #k_merk > .shBagInh ul > li > a { display: flex; align-items: center; min-height: 3rem; font-weight: normal;} /*#k_icons > div > .shBagInh ul > li:nth-child(odd) > a, ul.alt-list > li:nth-child(odd) > a { background-color: var(--theme-light); }*/ 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: .5rem; right: 0; width: 1.25rem; height: 1.25rem; line-height:1.25rem; text-align: center; vertical-align: middle; border-radius: 50%; font-size: 0.8rem; } #k_wk:before { background-color: var(--theme-accent-medium); } #k_merk:before { background-color: var(--theme-accent-medium); } .shBagInh .Wkbuttons { padding: 1rem; text-align: right; display: flex; justify-content: space-between; } .shBagInh .Wkbuttons .button { font-weight: bold; } .shBagInh .Wkbuttons #wkbutton { margin-right: 1rem; } #powermenue-schalter { margin-left: 0; margin-right: 1rem; background: url('data:image/svg+xml,<%3Fxml version="1.0" %3F><svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path class="heroicon-ui" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"/></svg>') no-repeat 50%; background-size:2rem; } #shopLayer.powermenue-open #k_title { display: none; } /* 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(/img/powermenue_close.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/search.svg); background-size: 50%; background-position: center; background-repeat: no-repeat; } /* main */ #shopMain { max-width: var(--header-width); padding: var(--padding); margin: 0 auto; } /* footer */ #shopFooter a { color: var(--theme-white); } #shopFooter { background-color: var(--theme-black); } .foot_infos { padding: 2rem 2rem 0 2rem; width: 100%; max-width: var(--header-width); margin: 0 auto; position: relative; text-align: center; display: flex; flex-wrap: wrap; justify-content: space-between; } .foot_infos ul { width: 100%; } .foot_infos ul li { margin-bottom: .5rem; color: var(--theme-white); } .foot_infos ul.soc { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; min-height: auto; } .foot_infos ul.soc li.foot_ueb { width: 100%; } .foot_infos ul.pay { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; min-height: auto; } #f-js { display: inline-block; } .foot_infos ul li a#f-js img { width: 150px; margin: 1rem 0 .5rem 0; } .foot_infos .foot_ueb { display: inline-block; height: 2rem; text-transform: uppercase; letter-spacing: 0.10em; white-space: nowrap; margin-bottom: 0; } .foot_infos #info_zahl { display: flex; flex-wrap: wrap; justify-content: center; margin-top: .5rem; } .foot_infos #info_zahl img { width: 4rem; margin: .5rem; height: 100%; border-radius: .5rem; } .foot_infos ul.soc li a {display:inline-block;width:2rem;height:2rem;margin: .5rem;padding:0;} .foot_infos ul.soc li a:hover, #f-js:hover, #info_zahl:hover { transform: translateY(-.2rem) translateZ(0); } .foot_infos ul.soc li a img { border-radius: .5rem; } #shopFooter #f_text { text-align: center; padding: 2rem 1rem; } #shopFooter #f_text { color: var(--theme-dark); } #shopFooter #f_text > span { display: block; font-size: .8rem; } #shopFooter .unten { border-top: .1rem solid var(--theme-dark); } #shopFooter .unten #f_text span.br { display:block;height:0; } #shopFooter .unten #f_text span.pipe { display:none; } #shopFooter .unten #f_text a { color: var(--theme-dark); border-bottom: 1px dotted var(--theme-dark); } #shopFooter a:hover, #shopFooter .unten #f_text a:hover { color: var(--theme-orange); } .zul_anges_art { background: var(--theme-white)!important; } .zuletzt_items { display: flex; flex-wrap: wrap; padding: 0 0 5rem 0; gap: .3rem; } .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: 1.5rem; } .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: .85rem; margin-right: .2rem; margin-bottom: .2rem; 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(/img/star-outline-h.svg); } .rattext { min-height: 6rem; } .anzBew { padding-bottom: .5rem; } /* card */ .card { display: block; position: relative; border: var(--theme-border); background-color: var(--theme-card-background); border-radius: 1rem; padding: var(--card-padding) calc(var(--card-padding) * 1.5); overflow: hidden; transition: box-shadow .3s ease-out; transition: all .3s ease-out; } a.card:hover { box-shadow: 0 0 25px -5px rgba(0,0,0,.25); transform: translateY(-.2rem) translateZ(0); } .card.login-div { overflow: unset; } .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); width: 100%!important; } .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; border-top: var(--theme-divider); border-bottom: var(--theme-divider); } .card .card-info:first-child { border-top: none; border-bottom: 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-0 { margin-top: 0!important; } .mt-2 { margin-top: 1rem!important; } .mt-4 { margin-top: 2rem!important; } .mt-6 { margin-top: 3rem!important; } .mt-4 { margin-top: 2rem!important; } .mb-2 { margin-bottom: 1rem!important; } .mb-4 { margin-bottom: 2rem!important; } .mb-6 { margin-bottom: 3rem!important; } .mb { margin-bottom: var(--padding); } .p-0 { padding: 0!important; } .p-1 { padding: 1rem!important; } .p-4 { padding: 2rem!important; } .pb-2 { padding-bottom: 1rem; } /* 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 { display: inline-block; background-color: var(--theme-accent-dark); border: none; padding: 1rem; font-size: 1rem; text-transform: uppercase; color: var(--theme-black); border-radius: 2rem; cursor: pointer; transition: all .3s ease-out; user-select: none; } button:hover, .button:hover { background-color: var(--theme-success); color: var(--theme-text); } button.big, .button.big { width: 100%; padding: 1rem .5rem; font-size: 1rem; text-align: center; text-transform: uppercase; } button.big.icon:before, .button.big.icon:before { content: ''; background-repeat: no-repeat; background-position: center; background-size: 1.5rem; display: inline-block; margin-right: .5rem; 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); color: var(--theme-white); margin-top: 1rem; } button.cancel { margin-right: 1rem; } .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: 100%; } 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: .5rem; 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: start; } .inp_wrapper[data-typ="checkbox"] > input { margin: 0; margin-top: .3rem; height: 1.25rem; width: 1.25rem; } .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; } #shopLayer input[disabled] + label { display: none!important; } .inp_wrapper .inp_error { border-bottom: 2px dashed var(--theme-error) !important; } /* geht nicht in firefox weil input & :before da nicht geht input[type="checkbox"] { visibility: hidden; } input[type="checkbox"]:after { content: ' '; visibility: visible; width: 1rem; height: 1rem; background: var(--theme-white); border-radius: .25rem; display: block; margin: .1rem .5rem 0 0; border: .1rem solid rgb(204,204,204); } input[type="checkbox"]:checked:after { background: var(--theme-accent-medium) !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: 0; text-align: center; line-height: 2.2rem; background-color: var(--theme-medium); border-radius: var(--theme-radius-small); box-shadow: var(--shadow-elevation-medium); cursor: pointer; user-select: none; } .inp_wrapper[data-typ="number-custom"] > div.dec { border-top-left-radius: .5rem; border-bottom-left-radius: .5rem; } .inp_wrapper[data-typ="number-custom"] > div.inc { border-top-right-radius: .5rem; border-bottom-right-radius: .5rem; } .inp_wrapper[data-typ="number-custom"] { height: 2.5rem; width: 8.2rem; margin: 0 auto; display: inline-block; } .inp_wrapper[data-typ="number-custom"] input { float: left; width: 2.7rem; text-align: center; margin-top: 0; 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[data-typ="number-custom"] input[type=number] + label { transform: translate(-0.8rem, -2.8rem); } .inp_wrapper[data-typ="number-custom"] > div.del { width: 2rem; height: 2.5rem; float: left; font-size: 0; cursor: pointer; user-select: none; background: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" width="512px" height="512px"><g id="Urn"> <path d="M51.8656998,5.4326H40.6636009V5.4159999c0-1.4462998-0.5634995-2.8055999-1.5870018-3.8290999 C38.0531998,0.5635,36.6927986,0,35.2456017,0H29.9438c-1.4237823,0-2.7626991,0.5537-3.7684994,1.5596 C25.1693993,2.5655,24.6147003,3.9043,24.6147003,5.3291001V5.4326H12.0991001 c-2.9579992,0-5.3651996,2.4063001-5.3651996,5.3642998v5.1416006c0,0.5526991,0.4472003,0.999999,1,0.999999h2.8309999v37.1523018 c0,2.6455002,1.0313005,5.1338005,2.9033003,7.006897C15.3393002,62.9696999,17.8285999,64,20.4761009,64h23.2402 c2.5967178,0,5.0380974-1.0107002,6.872097-2.8466988c1.8359032-1.8369026,2.8466187-4.2763023,2.8466187-6.8701019V16.9384995 h2.8310814c0.5527,0,1-0.4473,1-0.999999v-5.1055002C57.266098,7.8555002,54.8432007,5.4326,51.8656998,5.4326z  M51.4350166,54.2831993c0,2.0596008-0.8027153,3.9971008-2.2607155,5.4561005C47.7173004,61.1973,45.778801,62,43.716301,62 h-23.2402c-2.1133003,0-4.0997009-0.8222008-5.5938005-2.3163986c-1.4727001-1.4736023-2.3174-3.5116997-2.3174-5.5928001 V16.9384995h38.8701172V54.2831993z M55.266098,14.9385004h-2.8310814H11.5649004H8.733901v-4.1416006 c0-1.8555002,1.5096998-3.3642998,3.3651991-3.3642998h13.5156002c0.5527992,0,1-0.4471998,1-1V5.3291001 c0-0.8906002,0.3456993-1.7265,0.9745998-2.3545001C28.2084999,2.3555,29.0669003,2,29.9438,2h5.3018017 c0.8994179,0,1.7802963,0.3652999,2.4169998,1.0009999c0.6455002,0.6455002,1.0009995,1.5029001,1.0009995,2.415V6.4326 c0,0.5528002,0.4472008,1,1,1h12.2020988c1.875,0,3.4003983,1.5254002,3.4003983,3.4004002V14.9385004z" fill="rgb(60,60,60)"/> <path d="M22.1557007,52.2344017c0.5527992,0,1-0.4473,1-1V26.2334003c0-0.5527-0.4472008-1-1-1c-0.5526829,0-1,0.4473-1,1 v25.0010014C21.1557007,51.7871017,21.6030178,52.2344017,22.1557007,52.2344017z" fill="rgb(60,60,60)"/> <path d="M32.4673004,52.2344017c0.5527191,0,1-0.4473,1-1V26.2334003c0-0.5527-0.4472809-1-1-1c-0.5528011,0-1,0.4473-1,1 v25.0010014C31.4673004,51.7871017,31.9144993,52.2344017,32.4673004,52.2344017z" fill="rgb(60,60,60)"/> <path d="M42.7798004,52.2344017c0.5527,0,1-0.4473,1-1V26.2334003c0-0.5527-0.4473-1-1-1c-0.552784,0-1,0.4473-1,1v25.0010014 C41.7798004,51.7871017,42.2270164,52.2344017,42.7798004,52.2344017z" fill="rgb(60,60,60)"/></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>') 50% no-repeat; background-size: 1.5rem; } .inp_wrapper.delete.required label { display: none; } /* toggle (css only radio group) */ .toggle { display: flex; border: var(--theme-border); border-radius: 2rem; background-color: var(--theme-light); } .toggle > button { flex: 1; padding: 1rem; background-color: transparent; color: var(--theme-text); box-shadow: none; transition: color .3s ease-out; z-index: 2; } .toggle > button.active { color: var(--theme-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: 2rem; } .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: 8rem; padding: calc(var(--padding) / 1.5) var(--padding); border-bottom: var(--theme-divider); background-color: var(--theme-card-background); font-size: 1rem; color: var(--theme-text); } .table td { padding: .5rem 0; border-bottom: var(--theme-divider); color: var(--theme-text); } .table td a { color: var(--theme-text); } .table.no-border td { border-bottom: none; } .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.clickable td.clickable-link { padding: 0; } .table.clickable td.clickable-link > a { display: block; padding: calc(var(--padding) / 2) var(--padding); } .table.clickable tr.clickable.active { background-color: var(--theme-accent-dark); } .table.clickable tr.clickable.active > td > a { color: var(--theme-white); } .table tr:empty { display: none; } /* css dropdown */ .css_dropdown { position: relative; } .css_dropdown > div { cursor: pointer; padding: var(--padding); background: var(--theme-white) url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="11" height="7" viewBox="0 0 11 7"><path fill="%23737981" d="M0 1.3l4.8 4.9.7.6.7-.6L11 1.3 9.7 0 5.5 4.2 1.3 0"/></svg>') no-repeat 95% 50%; background-size: 1.25rem; box-shadow: 0px 0px 10px rgba(0,0,0,.2); border-radius: .5rem; } .css_dropdown ul { display: block; position: absolute; z-index: 20; margin-top: 0; background-color: var(--theme-card-background); border-radius: .5rem; box-shadow: 0px 0px 10px rgba(0,0,0,.2); 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: .5rem .5rem .5rem 1rem; text-align: left; color: var(--theme-text); cursor: pointer; } .css_dropdown ul li { border-bottom: var(--theme-divider); } /* Tooltip <span class='tooltip'>Hover mich<div class='tooltiptext'>Lorem Ipsum</div></span> */ .tooltip { display: inline-block; border-bottom: 1px dotted var(--theme-text); position: relative; } .tooltip .tooltiptext { opacity: 0; visibility: hidden; transform: translate(0%, 1rem); top: 0; left: 0%; width: 24rem; background-color: black; color: white; text-align: left; padding: var(--padding); border-radius: var(--theme-radius-small); position: absolute; z-index: 11; 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: 20rem; } .PGerror, .PGwarning, .PGsuccess { border-radius: var(--theme-radius-small); padding: var(--padding); display: flex; gap: var(--padding); align-items: center; justify-content: right; border-left: 3px solid transparent; } .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; } #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-medium); 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: .25rem; display: inline-block; padding: .5rem 1rem; } #pers_submen a { background-color: var(--theme-medium); color: var(--theme-text); } #pers_submen a.active, #pers_submen a:hover { background-color: var(--theme-black); color: var(--theme-white); } #pers_submen { margin-bottom: 3rem; } #pers_submen .button { text-transform: unset; } .picva { width: 5rem; display:block; } .tab_k { margin-bottom: .5rem; } #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; line-height: normal; } #bestellabschluss p span { font-size: 1rem; } #bestellabschluss form { width: max-content; margin: 0 auto;} #bestellabschluss form button { margin-top: 2rem; } #bestellabschluss h3 { font-size: 1.5rem; font-weight: bold; } .datenschutz-grid + input.button { float: right; } .card[data-za="2"] .zacheck .icon, .zacheckbue[data-za="2"] { background-image: url(/img/f_ls.svg); } .card[data-za="3"] .zacheck .icon, .zacheckbue[data-za="3"] { background-image: url(/img/f_vk.svg); } .card[data-za="4"] .zacheck .icon, .zacheckbue[data-za="4"] { background-image: url(/img/f_dhl-nachnahme.svg); } .card[data-za="5"] .zacheck .icon, .zacheckbue[data-za="5"] { background-image: url(/img/f_bar.svg); } .card[data-za="7"] .zacheck .icon, .zacheckbue[data-za="7"] { background-image: url(/img/f_rg.svg); } .card[data-za="8"] .zacheck .icon, .zacheckbue[data-za="8"] { background-image: url(/img/f_pp.svg); } .card[data-za="9"] .zacheck .icon, .zacheckbue[data-za="9"] { background-image: url(/img/f_kk.svg); } .zacheckbue { height: 3rem; width: 5rem; background-position: center; background-size: contain; background-repeat: no-repeat;} #shopLayer[data-pp="perart"] #pag_se_all {display:none!important;} #shopLayer[data-pp="agb"] .zul_anges_art, #shopLayer[data-pp="dat"] .zul_anges_art, #shopLayer[data-pp="wid"] .zul_anges_art { display:none; } #shopLayer[data-pp="agb"] .htm_include ul li,#shopLayer[data-pp="dat"] .htm_include ul li, #shopLayer[data-pp="wid"] .htm_include ul li { margin-left: 1rem; } #shopLayer[data-pp="ticket"] .button.ticket { background-color: var(--theme-accent); color: var(--theme-white); } #shopLayer .datenschutz-grid { grid-template-columns: 1fr; } body button#c-cookie-settings { padding: 1rem 2rem; } #c-cookie-banner { text-align: center; } .ausrichter .c-cookie-info p { text-align: center; } #c-cookie-banner .c-cookie-links { justify-content: center; } .c-cookie-buttons { justify-content: center; } .datenschutz-grid > div > .inp_wrapper { width: 100%; } .inp_wrapper[data-typ="checkbox"] > input { margin: 0; margin-top: .3rem; height: 1.25rem; width: 1.25rem; } .hinweis { background-color: var(--theme-light); padding: 1rem 1rem 1rem 2.5rem; font-weight: bold; border-radius: 1rem; 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 60 52" style="enable-background:new 0 0 60 52;" xml:space="preserve"><style type="text/css"> .st0{fill-rule:evenodd;clip-rule:evenodd;fill:%23E99B05;}</style><path id="attention" class="st0" d="M4.4,52c-1.6,0-3-0.8-3.8-2.2c-0.8-1.3-0.8-3,0-4.3L26.2,2.2c1.3-2.1,4-2.8,6.2-1.5 C33,1,33.5,1.5,33.9,2.2l25.6,43.3c0.8,1.3,0.8,3,0,4.3c-0.8,1.3-2.3,2.2-3.8,2.2H4.4z M30,12c-2.2,0-4,1.8-4,4v16c0,2.2,1.8,4,4,4 s4-1.8,4-4V16C34,13.8,32.2,12,30,12z M30,48c2.2,0,4-1.8,4-4s-1.8-4-4-4s-4,1.8-4,4S27.8,48,30,48z"/></svg>'); background-size: 1rem; background-position: 1rem 1.25rem; background-repeat: no-repeat; } #help { display: block; position: fixed; z-index: 10; right: -1.3rem; top: 30%; color: var(--theme-black); padding: .5rem 1rem; background-color: var(--theme-orange); transform: rotate(-90deg); cursor: pointer; box-shadow: 0 0 20px -5px rgba(0,0,0,.95); border-top-left-radius: 1rem; border-top-right-radius: 1rem; } #shopLayer #btn-to-top { background-image: url(/img/artikel_weiter.svg); } .frameFS { margin: 0; padding: 1rem; background-color: var(--theme-light); border-radius: 1rem; } .borderradius { border: var(--theme-divider); padding: 1rem; border-radius: 1rem; } #shopLayer[data-pp="aar2"] #pers_submen + div { border: var(--theme-divider); padding: 1rem; border-radius: 1rem; } blockquote { background-color: var(--theme-light); padding: 1rem; margin: 1rem 0; } .fazit { border: var(--theme-divider); border-radius: 1rem; padding: 1rem 1rem 1rem 4rem; margin: 0 auto; font-style: italic; font-size: 1.25rem; background-image: url(/img/greetings.svg); background-size: 2rem; background-position: 1rem 1.25rem; background-repeat: no-repeat; } .fazit a { color: var(--theme-black); border-bottom: 1px dotted var(--theme-black); } .fazit a:hover { color: var(--theme-orange); } .fazit h3 { margin: 0; } #dt-tooltip { background-color: var(--theme-light); padding: var(--padding); }
@media (min-width: 576px) { #k_icons > div > .shBagInh { right: 0; } button, .button { padding: 1rem 2rem; } button.big, .button.big { font-size: 1.25rem; } button.big.icon:before, .button.big.icon:before { background-size: 1.75rem; margin-right: 1rem; } #k_title ul li#phone span { display: inline-block; } #kopf_top_line_inner { padding: 0 1rem; } .foot_infos { overflow: auto; margin-bottom: 0; text-align: left; } .foot_infos .foot_ueb { display: block; } .foot_infos > ul { width: 50%; min-height: 15rem; } .foot_infos #info_zahl { justify-content: start; } .foot_infos #info_zahl img { margin: 0 1rem 1rem 0;} .foot_infos ul.soc li a { margin: 0 1rem 0 0; } #shopFooter #f_text { padding: 2rem; } .rat_stars * { width: 1rem; } .sm-hide { display: none; } .sm-block { display: block; } tr.sm-block { display: table-row; } 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; } body { --padding: 1rem; } }
@media (min-width: 768px) { .shopHeader { position: relative; } html { scroll-padding-top: 2rem; } h1 { font-size: 1.7em; } h2 { font-size: 1.5em; } h3 { font-size: 1.25em; } #k_title ul li:nth-child(2) { display: block; } .k_ausrichter { display: block; } #kopf_top_line { position: relative; } #kopf_top_line.box-shadow { box-shadow: 0 0 25px -5px rgba(0,0,0,.25); } #kopf_top_line_inner { height: 4rem; } #k_logo, #k_icons { width: 16rem; } #k_lupe_2, #k_info, #k_merk, #k_account, #k_wk, #powermenue-schalter { height: 4rem; width: 3rem; margin-left: 0.5rem; background-size: 2rem; } #k_icons > div > .shBagInh { position: absolute; left: unset; right: calc(var(--padding) * -1); top: 2.8rem; width: calc(100vw - calc(var(--padding) * 2)); } #k_icons > #k_account > .shBagInh { right: calc(var(--padding) * -1); } #k_icons > #k_wk > .shBagInh, #k_icons > #k_merk > .shBagInh { width: 30rem; } #k_icons > #k_account > .shBagInh { width: 17rem; } ul.alt-list { max-height: 30rem; } #shopMain { margin-top: 0; } .foot_infos > ul { width: 33.33%; float: left; min-height: 15rem; text-align: left;} .foot_infos ul li a#f-js img { width: 100px; } #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; } .advent_tooltipp { width: 80%; left: 10%; top: 2rem!important; } body button#c-cookie-settings { padding: unset; } }
@media (min-width: 992px) { html { scroll-padding-top: 7rem; } #k_men_zeile { height: 3rem; } #kopf_top_line { position: sticky; box-shadow: none; } #kopf_top_line_inner { height: 5rem; } #suchbox { display: flex; width: 50%; 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); border-radius: 2rem; } #k_lupe_3 > div.lupe { background: rgb(255,255,255) url(/img/search.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%; } h1 span { font-size: 1rem; } .foot_infos ul.pay { justify-content: start; } .lg-hide { display: none; } .lg-block { display: block; } tr.lg-block { display: table-row; } .advent_tooltipp { width: 64%; left: 18%; top: 2rem; } h2.mobile { display: none; } }
@media (min-width: 1200px) { #k_title ul { max-width: var(--header-width); } .k_ausrichter, .ausrichter { max-width: var(--header-width); margin: 0 auto; } .foot_infos ul li a#f-js img { width: 130px; } .xl-hide { display: none; } .xl-block { display: block; } tr.xl-block { display: table-row; } .advent_tooltipp { width: 50%; left: 25%; top: 2rem; } }
@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; } }
/* ### wk ### */
.wk_card { container: wkinhalt / inline-size; } .wk_item { position: relative; display: grid; grid-template-areas: "pic pic" "details details" "anz ges_anz" "preis ges_preis"; grid-gap: var(--padding); align-items: start; padding: 0; padding-bottom: 1rem; border-bottom: 3px solid var(--theme-light); } .wk_item[data-gutschein="1"] .wk_ges_anz { display: none; } .wk_item[data-gutschein="2"] .wk_ges_anz { display: none; } .wk_anz { grid-area: anz; } .wk_ges_anz { grid-area: ges_anz; margin-top: 1.5rem; } .wk_pic { grid-area: pic; text-align: center; padding-top: 1rem; } .wk_pic img { height: 10rem; width: 10rem; object-fit: contain; background-color: white; } .wk_details { padding: 1rem 0; } .wk_preis, .wk_ges_preis, .wk_ges_anz { text-align: right; } .wk_anz { text-align: left; } .wk_preis .uvp, .wk_ges_preis .uvp { text-decoration: line-through; opacity: .5; display: block; } .wk_item[data-anz="1"] div.wk_preis { display: none; } .wk_anz, .wk_ges_anz { font-weight: bold; } .wk_details { grid-area: details; } .wk_preis { grid-area: preis; } .wk_ges_preis { grid-area: ges_preis; } .wk_ges_preis .wk_preis { font-weight: bold; } .wk_mwst, .wk_liter { opacity: .5; font-size: .9rem; display: block; } .wk_name { font-size: 1rem; } .wk_name a { color: var(--theme-text); } .wk_name span, .zusatzUnterArtikelname { font-weight: normal; font-size:0.8em;} .wk_konfig { margin: calc(var(--padding) * 2) var(--padding); } .wk_liefer { opacity: .5; margin: 0; } .wk_konfig { padding: var(--padding); background-color: var(--theme-light); } .wk_konfig:empty, .wk_konfig_no { display: none !important; } .wk_header { display: none; } .wk_wk_leer {text-align: center;font-size: 1.1rem;padding-top: 36px;padding-bottom: 36px} .wk_plu, .wk_min, .wk_loe {height: 3em;} .wk_vk { display: inline-block; } .wk_vk s .wk_mwst, .wk_vk br { display: none; } .wk_vk s { opacity: .5; } .wk_gespart { font-size: .9rem; } #wk_gsum, #wk_zus { margin-top: 1rem; font-size: 1.5rem; text-align: right; } #wk_zus { display: flex; flex-direction: column-reverse; flex-wrap: wrap; gap: var(--padding); margin-top: 0; } #wk_gsum a { color: var(--theme-text); border-bottom: 1px dotted var(--theme-text); } #wk_gsum a:hover { color: var(--theme-text-hover); border-bottom: 1px dotted var(--theme-text-hover); } #wk_gutscheincode { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; } #wk_gutscheincode .wk-gut-ueb { width: 100%; } #wk_gutscheincode button { width: 100%; } #wk_gutscheincode input#gutschein_code { width: 100%; max-width: 100%; } #wk_gutscheincode .inp_wrapper { margin-top: .5rem; } .wk-button { line-height: 3rem; margin-top: 2rem; display: inline-block; max-width: 340px; } .wk_anz[data-plus=""] .inp_wrapper[data-typ="number-custom"] > div.inc, .wk_anz[data-minus=""] .inp_wrapper[data-typ="number-custom"] > div.dec, .wk_anz[data-loesch=""] .inp_wrapper[data-typ="number-custom"] > div.del { opacity: .5; cursor: no-drop; pointer-events: none; } .wk_item .inp_wrapper { margin-top: 0; } .ribbon { position: absolute; left: -5px; top: -5px; z-index: 1; overflow: hidden; width: 75px; height: 75px; text-align: right; } .ribbon span { font-size: .8rem; font-weight: bold; color: var(--theme-accent-text); text-transform: uppercase; text-align: center; line-height: 20px; transform: rotate(-45deg); width: 100px; display: block; background: var(--theme-accent-medium); box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1); position: absolute; top: 19px; left: -21px; } .ribbon span::before { content: ""; position: absolute; left: 0px; top: 100%; z-index: -1; border-left: 3px solid var(--theme-accent-medium); border-right: 3px solid transparent; border-bottom: 3px solid transparent; border-top: 3px solid var(--theme-accent-medium); } .ribbon span::after { content: ""; position: absolute; right: 0px; top: 100%; z-index: -1; border-left: 3px solid transparent; border-right: 3px solid var(--theme-accent-medium); border-bottom: 3px solid transparent; border-top: 3px solid var(--theme-accent-medium); } #AmazonPayButton, .ppe-button, .wk-button { height: 4rem; } .wk-button { line-height: 2rem; } .zahlen { width: 100%; max-width: 340px; margin-bottom: 2rem; display: flex; flex-wrap: wrap; justify-content: end; gap: var(--padding); } .zahlen:empty { display: none; } #AmazonPayButton, .ppe-button { text-align: center; flex: 1; border-radius: var(--theme-radius-small); } .ppe-button { background-image: url(/img/checkout-logo-medium-de-2x.png); background-size: contain; background-position: center; background-repeat: no-repeat; background-color: transparent; max-width: 340px !important; } #AmazonPayButton { display: flex; align-items: center; } #AmazonPayButton img { object-fit: contain; height: 100%; width: 100%; } .kassen_infos { display: grid; grid-template-areas: "rech" "liefer" "zart" "vers"; grid-gap: var(--padding); margin-bottom: 2rem; border: var(--theme-divider); padding: 1rem; border-radius: 1rem; } .kassen_infos > .rechnung { grid-area: rech; border-radius: 0; } .kassen_infos > .ala { grid-area: liefer; } select[name="alanr"] { margin-bottom: var(--padding); padding: .5rem .2rem; font-size: .9rem; } .kassen_infos > .zart { grid-area: zart; border-radius: 0; } .kassen_infos > .zart img { width: 6rem; } .kassen_infos > .vers { grid-area: vers; border-radius: 0; } .kassen_infos .zart > div { text-align: left; } .kassen_infos .zart img { max-width: 15rem; border-radius: 1rem; } .kassen_infos > .ala { overflow: visible; } .kasse_card_div { position: relative; } #ala_dropdown { position: relative; } #ala_dropdown summary { list-style: none; position: relative; cursor: pointer; } #ala_dropdown summary:after, .kasse_card_div > .kasse_card_edit { content: ''; height: 1.5rem; width: 1.5rem; position: absolute; top: .5rem; right: .5rem; background-image: url('data:image/svg+xml,<%3Fxml version="1.0" %3F><svg height="24px" version="1.1" viewBox="0 0 24 24" width="24px" xmlns="http://www.w3.org/2000/svg"><title/><desc/><defs/><g fill="none" fill-rule="evenodd" id="miu" stroke="none" stroke-width="1"><g id="Artboard-1" transform="translate(-899.000000, -227.000000)"><g id="slice" transform="translate(215.000000, 119.000000)"/><path d="M914.000027,248.002414 L914.000464,232.002414 L914.000464,232.002414 L907.001354,232.002414 L907.000079,248.002414 L914.000027,248.002414 Z M913.998311,249.002414 L910.501672,254 L907.00169,249.002414 L913.998311,249.002414 Z M914.000492,231.002414 L914.000574,228.002414 C914.000574,227 912.99816,227 912.99816,227 L908.004086,227 C908.004086,227 907.001672,227 907.001672,228.002414 L907.001433,231.002414 L914.000492,231.002414 L914.000492,231.002414 Z" fill="%23000000" id="editor-pencil-pen-edit-write-glyph" transform="translate(910.500326, 240.500000) rotate(45.000000) translate(-910.500326, -240.500000) "/></g></g></svg>') } #ala_dropdown > div { position: absolute; top: 3rem; left: calc(var(--card-padding)* -1.5); right: calc(var(--card-padding)* -1.5); max-height: 50rem; background-color: var(--theme-card-background); z-index: 2; box-shadow: 0px 12px 24px -10px rgba(0,0,0,0.75); border-radius: var(--theme-radius-small); padding: var(--padding); max-height: 26rem; overflow-y: auto; } #ala_dropdown > div:before { position: absolute; top: -1rem; left: 0; content: ''; height: 2rem; right: 0; background-color: var(--theme-card-background); } #ala_dropdown > div > a { position: relative; display: block; margin-top: 1rem; padding: 0.5rem 0.5rem 0.5rem 3rem; border-radius: var(--theme-radius-small); } #ala_dropdown > div > a#ala-change { background: var(--theme-accent-dark); color: var(--theme-white); } #ala_dropdown > div > a:before { content: attr(data-label); position: absolute; top: 50%; left: 1rem; transform: translate(0, -50%); } #ala_dropdown > div > a:hover { background-color: var(--theme-accent-light); } .kassen_infos > .ala { overflow: visible; } input.inpu_improv { display: none; } .zk_versandarten { display: flex; flex-wrap: wrap; } .zk_versandarten > span, .zk_versandarten > a { width: 100%; position: relative; display: block; padding: .5rem; margin-bottom: var(--padding); color: var(--theme-text); border: var(--theme-divider); } .zk_versandarten > a.versandart_auswahl_aktiv { border: .15rem solid var(--theme-success); order: -1;} .zk_versandarten > a > span:empty { display: none; } .zk_versandarten > a.versandart_auswahl_aktiv > span:before { content: ''; background-image: url(/img/check.svg); position: absolute; top: 0; right: 0; width: 3rem; bottom: 0; background-size: 1rem; background-position: center; background-repeat: no-repeat; } .zk_versandarten .picva { display: inline-block; width: 5rem; margin-right: .5rem; } .kassen_infos div.head { width: 100%; font-weight: bold; padding: .5rem; margin-bottom: .5rem; order: -2; background-color: var(--theme-light); } .kasse_card_div .kasse_card_edit { top: .5rem; right: .5rem; } .bemerk { margin-bottom: var(--padding); } .bemerk textarea { width: 100%; max-width: 100%; } .wk_summe { margin: var(--padding); } .summe { display: grid; grid-template-columns: auto 12rem; grid-template-areas: "label preis"; } .summe > div:first-of-type { grid-area: label; text-align: right; } .summe > div:last-of-type{ grid-area: preis; text-align: right; } .summe.ges_summe > div { font-size: 1.5rem; font-weight: bold; } @container wkinhalt (min-width: 30rem) { .wk_item { grid-template-areas: "pic pic details details" "anz preis ges_anz ges_preis"; margin-bottom: calc(var(--padding) * 2); grid-template-columns: 8rem 8rem auto auto; } .wk_ges_anz { text-align: right; } .wk_anz { text-align: left; } } @container wkinhalt (min-width: 50rem) { .wk_item { grid-template-areas: "anz pic details preis ges_preis"; grid-template-columns: 9rem 9rem auto 11rem 11rem; margin-bottom: 0; padding-bottom: 0; align-items: start; } .wk_pic { padding: 1rem 0; } .wk_pic img { height: 9rem; width: 9rem; } .wk_ges_anz { display: none; } .wk_header { display: grid; } .wk_preis, .wk_anz, .wk_ges_preis, .wk_ges_anz { padding-top: 1rem; } .wk_header > * { align-self: end; padding-bottom: var(--padding); font-weight: bold; } .wk_details { padding-left: 0; } .wk_konfig { display: inline-block; margin: var(--padding); margin-left: 0; } .wk_liefer { margin: 0; } .wk_item[data-anz="1"] div.wk_preis { display: block; } } .wk-special-promo { display: grid; grid-template-areas: "promo" "wk"; grid-template-rows: 16rem auto; grid-gap: var(--padding); text-align: center; } .wk_card { grid-area: wk; } .wk-versand-progress { height: .7rem; background-image: linear-gradient(to right, red 0%, green 100%); } .progress { background-color: var(--theme-light); margin-bottom: 2rem; display: none; } #wk_gutschein form button { background-color: var(--theme-accent); color: var(--theme-white); } details#textarea { display: inline; } details#textarea[open=""] { display:block; } details#textarea .inp_wrapper { display: none; } details#textarea[open=""] .inp_wrapper { display: block; order: 3; width: 100%; margin: 0; } details#textarea summary { list-style: none; cursor: pointer; position: relative; } details#textarea summary span { padding: 1rem 0; } details#textarea summary span:after { content: ''; height: 1.5rem; width: 1.5rem; display: inline-block; top: 0; margin-left: .5rem; background-image: url(/img/aendern.svg); } details#textarea[open=""] summary { display: flex; flex-wrap: wrap; } details#textarea[open=""] summary span:after { background-image: url(/img/faq-x.svg); order: 2; } details#textarea[open=""] summary span { order: 1; padding: 0; } details > summary { list-style: none; } details summary::-webkit-details-marker { display:none; } @media (pointer: coarse) { .inp_wrapper.delete[data-typ="number-custom"] { height: 6rem; } .inp_wrapper[data-typ="number-custom"] > div.del { padding: .5rem; } } #wk_gutschein { padding: 1rem; border: var(--theme-divider); border-radius: .5rem; margin-bottom: 2rem; } .card .card-info, .datenschutz-grid { padding: 0; } #help { display: none; } #vkfrei { font-size: 1rem; margin-bottom: 2rem; }
@media (min-width: 576px) { .wk_ges_anz { margin-top: 0; } .wk_pic { text-align: left; } .wk_details { text-align: left; } }
@media (min-width: 768px) { .wk-button, .zahlen { width: 100%; margin-right: 0; margin-top: 0; } .kassen_infos { grid-template-areas: "rech liefer" "zart vers"; grid-template-columns: 1fr 1fr; margin-bottom: var(--padding); } .summe { display: grid; grid-template-columns: auto 15rem 15rem; grid-template-areas: "_ label preis"; } #wk_zus { flex-direction: unset; justify-content: end; } #wk_gutschein { order: 1; } #wk_zus .zahlen { order: 2; } #wk_gutscheincode { display: flex; flex-wrap: nowrap; } #wk_gutschein form > div, #wk_gutschein form button { width: 100%; max-width: 24rem; } #wk_gutscheincode input#gutschein_code, #wk_gutschein form button { width: auto; } #wk_gutscheincode .wk-gut-ueb { text-align: left; } }
@media (min-width: 992px) { .wk_card.card { overflow: visible; } .kassen_infos { grid-template-areas: "rech liefer zart vers"; grid-template-columns: 1fr 1fr 1fr 1fr; } .wk-special-promo { grid-template-areas: "promo wk"; grid-auto-columns: 20rem auto; grid-template-rows: auto; } }
@media (min-width: 1200px) { .zahlen { } }
/* ### to-top-button ### */
#btn-to-top { display: block; opacity: 0; transform: translateY(2rem); visibility: hidden; position: fixed; bottom: 1rem; right: 1rem; height: 3rem; width: 3rem; background-size: 1rem; 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 ### */
.powermenue div {color: var(--theme-text);} .powermenue { display: flex; position: fixed; z-index: 99; 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; padding-left: 2.5rem; } .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); height: 4rem; 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; color: var(--theme-white); } .powermenue-head a:hover, .powermenue-modul-auflistung li a:hover, #shopLayer .powermenue .powermenue-strukturen a:hover { color: var(--theme-accent-medium); } .powermenue-head li.powermenue-aktiv a { color: var(--theme-text-hover); } .powermenue-strukturen {position: absolute;display: block;top: 0;left: 0;right: 0;bottom: 0;padding: 0;background-color: var( --theme-light);transition: all .3s ease-out;box-shadow: none;} .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; color: var(--theme-white); } .powermenue-modul-ueberschrift-wrapper {background-color: var(--theme-black); padding: .5rem 1rem; border-bottom: 0;} .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;} .powermenue-modul .powermenue-modul-auflistung[data-modul-typ="auflistung"] li { width: 100%; } .powermenue-modul-auflistung .powermenue-auflistung-mit-icon {padding: 0;} .powermenue-modul-auflistung { padding: 1rem; margin: 0; } .powermenue-modul-auflistung li.powermenue-aktiv a {color: var(--theme-accent-medium);} .powermenue-modul-auflistung li a:empty { display: none; } .powermenue-modul-auflistung li a { padding: .25rem 0; color: var(--theme-black); } .powermenue-html-oben, .powermenue-html-unten { width:100%; padding: 1rem; box-sizing:border-box; } .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: 5rem; max-height: 5rem; object-fit: contain; } .powermenue-modul .powermenue-top-artikel-name { font-size: 1rem; margin: 0; } .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: var(--theme-white); border: var(--theme-divider); padding:.5rem; margin-bottom: .5rem; border-radius: .5rem; } .powermenue-modul-auflistung li.powermenue-top-artikel:first-child { margin-top: 1rem; } .powermenue-modul-auflistung li.powermenue-top-artikel a { padding: 0; } .powermenue-top-artikel {width: 95%;} .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: flex-start;justify-content: flex-start; } .powermenue-top-artikel-rechts {margin-left: 1rem;} powermenue-top-artikel-rechts p { margin: 0; } .powermenue-top-artikel-name {font-size: .8rem; margin-bottom: 10px;} .powermenue-top-artikel-preis { font-size: 1rem; margin: 0; } .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.svg) no-repeat 50% 50%;background-size: auto 40px;z-index: 1000;cursor: pointer;width: 2.5rem; height: 2rem;left: 0;padding: 1rem 1rem 1rem 0;} #powermenue-zurueck-text { font-size: 1.25rem; } .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-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(/img/powermenue_arrow.svg) no-repeat 50% 50%;background-size: auto 40px;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; margin: .1rem 0; padding: .45rem .5rem 0 1rem; position: absolute; top: 0; right: 0; color: var(--theme-black); } .alle-struktur-artikel-anzeigen p { margin: 0; } .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-html ul li a strong { margin-right: .5rem; } .powermenue-auflistung-rechts { list-style: none; background: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8" %3F><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"><svg width="641" height="600" viewBox="0 0 641 600" xmlns="http://www.w3.org/2000/svg"><title>Triple Spiral symbol -- three filled Archimedean spirals (triskelion), less tightly wound</title><g transform="translate(7,703.5) scale(0.103,-0.103)"><path fill="rgb(0,0,0)" stroke="none" d="M4674.56,2710.82C4680.63,2723.27,4691.68,2735.86,4703.12,2743.68C4715.32,2752.01,4732.07,2757.87,4746.75,2759.51C4763.1,2761.33,4782.52,2758.74,4798.07,2753.34C4815.72,2747.21,4834.48,2735.55,4848.3,2722.96C4864.05,2708.62,4878.8,2688.36,4888.27,2669.27C4899.01,2647.61,4906.64,2620.32,4909.37,2596.29C4912.44,2569.23,4910.43,2537.46,4904.59,2510.85C4898.07,2481.14,4884.77,2448.25,4869.34,2422.03C4852.26,2393,4827.17,2362.83,4802.14,2340.29C4774.63,2315.52,4738.51,2292.05,4704.93,2276.46C4668.29,2259.45,4623.16,2246.38,4583.17,2240.66C4539.79,2234.45,4488.86,2234.84,4445.51,2241.2C4398.74,2248.05,4346.17,2263.92,4303.2,2283.62C4257.08,2304.76,4207.64,2336.83,4169.19,2369.94C4128.1,2405.33,4086.78,2452.84,4057.02,2498.18C4025.33,2546.45,3996.88,2607.13,3979.59,2662.22C3961.24,2720.67,3949.73,2790.82,3947.95,2852.05C3946.07,2916.82,3954.43,2991.53,3970.13,3054.39C3986.68,3120.68,4016.41,3194.17,4050.19,3253.57C4085.73,3316.04,4136.6,3382.11,4187.59,3432.77C4241.11,3485.93,4311.09,3538.45,4376.87,3575.37C4445.75,3614.04,4531.04,3647.49,4607.74,3666.4C4687.9,3686.16,4783.12,3696.14,4865.64,3693.87C4951.74,3691.51,5050.27,3675.17,5132.66,3650.05C5218.46,3623.89,5312.89,3580.3,5388.7,3532.35C5467.54,3482.49,5550.25,3412.8,5613.1,3343.87C5678.36,3272.29,5742.08,3179.82,5786.13,3093.56C5831.81,3004.11,5870.27,2894.19,5890.75,2795.86C5911.97,2694.02,5920.41,2573.71,5914.07,2469.88C5907.5,2362.46,5883.19,2240.1,5848.61,2138.19C5812.87,2032.89,5755.4,1917.49,5693.26,1825.27C5629.11,1730.07,5540.59,1630.71,5453.7,1555.69C5364.09,1478.32,5249.12,1403.38,5142.36,1352.22C5032.35,1299.51,4897.8,1256.05,4777.83,1234.01C4654.31,1211.31,4508.92,1204.41,4383.77,1214.86C4255.04,1225.6,4108.84,1257.9,3987.41,1301.96C3862.6,1347.24,3726.24,1418.59,3617.62,1494.95C3506.05,1573.37,3390.03,1680.72,3302.85,1785.58C3213.36,1893.22,3127.2,2030.68,3068.95,2157.96C3009.2,2288.51,2960.72,2447.7,2937.13,2589.32C2915.61,2702.08,2873.81,2828.42,2823.45,2931.58C2774.66,3031.51,2703.46,3138.97,2630.12,3222.57C2559.16,3303.48,2465.35,3385.71,2375.61,3445.11C2288.85,3502.52,2180.45,3555.36,2081.64,3587.91C1986.24,3619.33,1871.82,3640.99,1771.51,3646.15C1674.78,3651.13,1562.84,3642.18,1468.22,3621.45C1377.11,3601.49,1275.4,3564.71,1192.8,3521.36C1113.37,3479.69,1028.4,3419.7,962.838,3358.47C899.891,3299.69,836.477,3222.53,791.384,3149.14C748.161,3078.8,709.189,2991.35,686.225,2912.05C664.252,2836.18,650.572,2745.59,649.619,2666.6C648.709,2591.17,659.198,2504.31,678.483,2431.38C696.859,2361.89,728.637,2284.81,764.975,2222.79C799.519,2163.83,848.299,2101.34,897.436,2053.86C944.028,2008.84,1004.55,1964.24,1061.57,1933.49C1115.49,1904.41,1182,1879.3,1241.8,1865.97C1298.15,1853.4,1364.93,1847.69,1422.57,1851C1476.72,1854.11,1538.52,1866.14,1589.72,1884.03C1637.62,1900.77,1690.11,1927.55,1731.48,1956.93C1770.02,1984.29,1810.05,2021.88,1839.37,2058.96C1866.56,2093.32,1892.36,2137.23,1908.67,2177.9C1923.7,2215.4,1934.96,2261.02,1938.54,2301.25C1941.83,2338.13,1939.56,2381.15,1931.87,2417.36C1924.87,2450.3,1911.28,2487.12,1894.68,2516.43C1879.69,2542.89,1857.85,2570.86,1835.38,2591.36C1815.26,2609.72,1788.76,2627.35,1763.78,2638.22C1741.61,2647.87,1714.16,2654.91,1690.02,2656.43C1668.76,2657.78,1643.84,2655.14,1623.54,2648.67C1605.74,2642.99,1586.25,2632.58,1572.12,2620.35C1559.68,2609.59,1547.72,2594.07,1541.12,2579C1535.2,2565.47,1531.9,2548.03,1533.02,2533.3C1534.06,2519.48,1539.44,2503.62,1547.19,2492.13C1554.94,2480.64,1560.32,2464.78,1561.37,2450.96C1562.49,2436.23,1559.19,2418.79,1553.27,2405.26C1546.67,2390.19,1534.71,2374.67,1522.27,2363.9C1508.14,2351.68,1488.65,2341.26,1470.84,2335.59C1450.55,2329.12,1425.63,2326.48,1404.36,2327.82C1380.23,2329.35,1352.78,2336.39,1330.61,2346.04C1305.63,2356.91,1279.13,2374.54,1259.01,2392.9C1236.54,2413.4,1214.7,2441.36,1199.71,2467.83C1183.11,2497.14,1169.52,2533.95,1162.52,2566.9C1154.82,2603.11,1152.56,2646.13,1155.84,2683C1159.43,2723.24,1170.68,2768.86,1185.72,2806.35C1202.03,2847.02,1227.83,2890.93,1255.02,2925.3C1284.34,2962.37,1324.37,2999.97,1362.91,3027.33C1404.28,3056.71,1456.77,3083.49,1504.67,3100.23C1555.87,3118.12,1617.67,3130.14,1671.82,3133.25C1729.46,3136.56,1796.24,3130.86,1852.59,3118.29C1912.38,3104.95,1978.9,3079.85,2032.81,3050.77C2089.84,3020.02,2150.36,2975.42,2196.95,2930.4C2246.09,2882.91,2294.87,2820.42,2329.41,2761.47C2365.75,2699.45,2397.53,2622.37,2415.91,2552.88C2435.19,2479.95,2445.68,2393.09,2444.77,2317.66C2443.82,2238.67,2430.14,2148.08,2408.16,2072.21C2385.2,1992.9,2346.23,1905.45,2303,1835.11C2257.91,1761.73,2194.5,1684.57,2131.55,1625.78C2065.99,1564.56,1981.02,1504.57,1901.59,1462.89C1818.99,1419.55,1717.28,1382.77,1626.16,1362.8C1531.55,1342.07,1419.61,1333.12,1322.87,1338.1C1222.56,1343.27,1108.15,1364.92,1012.75,1396.35C913.941,1428.9,805.534,1481.74,718.783,1539.15C629.041,1598.54,535.229,1680.78,464.264,1761.68C390.933,1845.28,319.733,1952.75,270.941,2052.68C220.574,2155.84,178.78,2282.17,157.255,2394.93C135.057,2511.22,127.642,2648.26,136.719,2766.3C146.072,2887.92,175.706,3026.18,216.605,3141.1C258.71,3259.41,325.43,3388.78,397.049,3491.94C470.719,3598.04,571.787,3708.51,670.66,3791.64C772.286,3877.09,902.253,3959.51,1022.69,4015.4C1146.39,4072.8,1297.37,4119.61,1431.78,4142.68C1569.73,4166.36,1731.86,4172.24,1871.21,4159.05C2014.15,4145.53,2176.25,4107.92,2310.69,4057.53C2419.11,4019.79,2549.42,3992.81,2663.94,3984.86C2774.87,3977.15,2903.54,3985.07,3012.61,4006.78C3118.15,4027.79,3236.28,4067.91,3332.58,4115.93C3425.68,4162.36,3525.65,4229.82,3603.24,4299.11C3678.15,4366.02,3754.11,4454.28,3808.74,4538.57C3861.42,4619.85,3909.64,4721.27,3939,4813.58C3967.27,4902.47,3986.26,5008.94,3990.03,5102.14C3993.65,5191.77,3984.19,5295.35,3963.94,5382.74C3944.5,5466.65,3909.39,5560.15,3868.39,5635.89C3829.08,5708.49,3772.83,5785.97,3715.64,5845.51C3660.91,5902.48,3589.3,5959.62,3521.37,5999.94C3456.5,6038.44,3376.03,6072.79,3303.24,6092.55C3233.87,6111.38,3151.22,6122.4,3079.34,6121.94C3011.01,6121.5,2932.51,6110.5,2866.82,6091.69C2804.53,6073.85,2735.65,6043.74,2680.5,6009.73C2628.36,5977.57,2573.36,5932.52,2531.92,5887.41C2492.85,5844.89,2454.52,5789.91,2428.57,5738.34C2404.19,5689.89,2383.7,5630.35,2373.6,5577.07C2364.14,5527.22,2361.09,5468.37,2365.85,5417.85C2370.27,5370.79,2382.82,5317.33,2400.26,5273.4C2416.43,5232.67,2441.56,5188.37,2468.62,5153.91C2493.58,5122.14,2527.46,5089.59,2560.51,5066.37C2590.8,5045.08,2629.19,5025.54,2664.39,5014.1C2696.43,5003.69,2735.11,4997.05,2768.79,4996.77C2799.2,4996.51,2834.34,5001.45,2863.33,5010.66C2889.29,5018.9,2917.81,5033.04,2939.71,5049.23C2959.16,5063.61,2978.98,5083.86,2992.37,5104C3004.16,5121.74,3014.33,5144.64,3018.88,5165.46C3022.87,5183.71,3023.59,5205.8,3020.07,5224.15C3016.97,5240.31,3009.51,5258.43,2999.76,5271.67C2991,5283.57,2977.55,5295.14,2964.23,5301.54C2951.74,5307.54,2935.31,5310.81,2921.49,5309.85C2907.66,5308.88,2891.24,5312.15,2878.75,5318.16C2865.43,5324.56,2851.98,5336.13,2843.22,5348.02C2833.46,5361.27,2826,5379.39,2822.9,5395.55C2819.39,5413.9,2820.11,5435.98,2824.1,5454.24C2828.64,5475.05,2838.81,5497.95,2850.61,5515.7C2864,5535.83,2883.82,5556.08,2903.26,5570.46C2925.16,5586.66,2953.68,5600.79,2979.64,5609.04C3008.63,5618.25,3043.77,5623.18,3074.19,5622.93C3107.87,5622.65,3146.55,5616.01,3178.58,5605.6C3213.79,5594.16,3252.18,5574.61,3282.46,5553.33C3315.52,5530.1,3349.4,5497.55,3374.35,5465.78C3401.42,5431.32,3426.54,5387.02,3442.71,5346.3C3460.16,5302.36,3472.7,5248.9,3477.13,5201.84C3481.88,5151.32,3478.83,5092.48,3469.38,5042.62C3459.27,4989.34,3438.79,4929.8,3414.41,4881.36C3388.45,4829.78,3350.12,4774.81,3311.06,4732.29C3269.61,4687.17,3214.62,4642.12,3162.48,4609.97C3107.33,4575.96,3038.45,4545.84,2976.16,4528.01C2910.47,4509.19,2831.96,4498.19,2763.63,4497.76C2691.76,4497.3,2609.11,4508.32,2539.74,4527.15C2466.94,4546.91,2386.47,4581.26,2321.6,4619.76C2253.67,4660.08,2182.06,4717.22,2127.34,4774.19C2070.14,4833.73,2013.89,4911.2,1974.59,4983.81C1933.59,5059.55,1898.47,5153.05,1879.03,5236.95C1858.79,5324.34,1849.33,5427.92,1852.95,5517.55C1856.71,5610.76,1875.71,5717.23,1903.98,5806.12C1933.33,5898.42,1981.55,5999.85,2034.23,6081.13C2088.86,6165.42,2164.82,6253.68,2239.74,6320.58C2317.33,6389.88,2417.3,6457.34,2510.39,6503.76C2606.7,6551.79,2724.82,6591.91,2830.37,6612.92C2939.43,6634.62,3068.1,6642.55,3179.04,6634.84C3293.56,6626.88,3423.87,6599.91,3532.28,6562.17C3644.09,6523.25,3766.48,6461.15,3864.16,6394.27C3964.82,6325.36,4069.73,6230.57,4148.81,6137.69C4230.22,6042.07,4308.89,5919.6,4362.42,5806C4417.48,5689.15,4462.61,5546.38,4485.17,5419.19C4508.35,5288.46,4514.75,5134.69,4502.93,5002.45C4490.79,4866.61,4455.84,4712.46,4408.62,4584.53C4360.15,4453.21,4284.18,4309.87,4203.08,4195.78C4119.9,4078.75,4006.27,3957.18,3895.42,3865.94C3808.52,3790.92,3720.01,3691.56,3655.86,3596.36C3593.71,3504.14,3536.24,3388.74,3500.51,3283.44C3465.93,3181.53,3441.61,3059.17,3435.05,2951.75C3428.7,2847.92,3437.14,2727.61,3458.36,2625.77C3478.85,2527.44,3517.3,2417.52,3562.98,2328.07C3607.03,2241.81,3670.76,2149.34,3736.02,2077.76C3798.87,2008.83,3881.58,1939.14,3960.41,1889.28C4036.22,1841.33,4130.66,1797.74,4216.46,1771.58C4298.84,1746.46,4397.37,1730.12,4483.47,1727.76C4566,1725.49,4661.22,1735.47,4741.38,1755.23C4818.08,1774.14,4903.37,1807.59,4972.25,1846.26C5038.03,1883.18,5108.01,1935.7,5161.52,1988.86C5212.51,2039.52,5263.38,2105.59,5298.92,2168.06C5332.71,2227.46,5362.43,2300.95,5378.99,2367.24C5394.68,2430.1,5403.05,2504.81,5401.17,2569.58C5399.39,2630.81,5387.87,2700.96,5369.53,2759.41C5352.23,2814.5,5323.79,2875.19,5292.1,2923.45C5262.33,2968.79,5221.02,3016.3,5179.92,3051.69C5141.48,3084.8,5092.04,3116.87,5045.91,3138.01C5002.95,3157.71,4950.37,3173.58,4903.61,3180.43C4860.25,3186.79,4809.32,3187.18,4765.95,3180.97C4725.96,3175.25,4680.83,3162.18,4644.18,3145.17C4610.61,3129.58,4574.49,3106.11,4546.98,3081.34C4521.94,3058.8,4496.86,3028.63,4479.77,2999.6C4464.34,2973.38,4451.05,2940.49,4444.53,2910.78C4438.69,2884.17,4436.67,2852.4,4439.75,2825.34C4442.48,2801.31,4450.1,2774.02,4460.85,2752.36C4470.31,2733.27,4485.06,2713.01,4500.82,2698.67C4514.63,2686.08,4533.4,2674.42,4551.05,2668.29C4566.59,2662.89,4586.01,2660.3,4602.36,2662.12C4617.05,2663.76,4633.79,2669.62,4645.99,2677.95C4657.44,2685.77,4668.48,2698.36,4674.56,2710.82Z"/></g></svg>') no-repeat 0 .5rem; background-size: .75rem; } .powermenue-modul-auflistung li.powermenue-auflistung-rechts a { font-size: .9rem; padding-left: 1rem !important; } #m1-p8-modul4-eigenedragdrop-10 { margin-top: 1rem; } #m1-p8-modul4-eigenedragdrop-10 a { border-bottom: 1px dotted var(--theme-text); display: inline-block; } 
@media (min-width: 576px) { .powermenue-modul .powermenue-modul-auflistung[data-modul-typ="auflistung"] li { width: 50%; } }
@media (min-width: 768px) { nav.powermenue.open { max-width: 600px; box-shadow: 0px 12px 24px -10px rgba(0,0,0,1); } }
@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; } #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 { height: auto; margin: 0; padding: 0; background-color: unset; } .powermenue-head li a { padding: 0 1rem; } .powermenue-head a { font-size: 1rem; color: var(--theme-black); } .powermenue-modul-auflistung { padding: 0 1rem 1rem 1rem; } .powermenue-modul-auflistung li a { color: var(--theme-black); padding: .15rem 0; } .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%; background-color: var(--theme-powermenu-medium); display: block; box-shadow: 0px 12px 24px -10px rgba(0,0,0,0.75); padding:1rem;box-sizing: border-box; margin-top: 3rem; } .powermenue-strukturen.hidden { display: none; } .powermenue-struktur { flex-direction: column; } .powermenue-struktur-module { width: 100%; flex-direction: row; } .powermenue-modul { width: 23%; margin: 0; } .powermenue-modul-ueberschrift { color: var(--theme-black); } .powermenue-modul-ueberschrift-wrapper {display: flex;align-items: center;justify-content: flex-start;font-weight:bold; background-color: unset; } .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; } }
@media (min-width: 1200px) { .powermenue-head li a { padding: 0 2rem; } }
/* ### datenschutz ### */
.datenschutz-grid { padding: 1rem 0; display: grid; grid-template-columns: 1fr; grid-gap: var(--padding); } .datenschutz-grid > div { background-color: var(--theme-light); border-radius: var(--theme-radius-small); padding: var(--padding); display: flex; } .datenschutz-grid > div > .inp_wrapper { margin-top: 0; height: 100%; } .datenschutz-grid > div > .inp_wrapper > label { max-width: 100%; width: 100%; height: 100%; } .datenschutz-grid + input.button { margin: 1rem 2rem 2rem 2rem; }
@media (min-width: 992px) { .datenschutz-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1400px) { .datenschutz-grid { grid-template-columns: 1fr 1fr 1fr; } }
/* ### 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; padding: 0 1rem; } #meili-search #meili-items li#faqs { grid-column: 1 / span 2; padding: var(--padding); height: auto; overflow-y: auto; } #meili-search #meili-items li#faqs p { padding: 0; text-align: left; } #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, #meili-fallback-placeholder { text-align: center; max-width: 66rem; margin: 0 auto; } #meili-fallback-placeholder { font-weight: bold; margin-top: var(--padding); } #meili-no-hits { display: none; } #meili-no-hits > b { font-size: 1.1rem; margin-bottom: 2rem; display: inline-block; font-family: 'Header-Font'; } #meili-search h1 { margin-bottom: 0; } #meili-search p { margin-top: 0; } #shopLayer.suche-offen #kopf_bottom_line { display: none; } #shopLayer.suche-offen #kopf_top_line { box-shadow: var(--shadow-elevation-medium); } .suche-struktur { } .suche-struktur nav ul { display: flex; flex-wrap: wrap; justify-content: space-between; } .suche-struktur nav ul li { list-style: none; width: 100%; text-align: left; } .suche-struktur nav ul li a { display: block; background: var(--theme-light); padding: .5rem; color: var(--theme-text); margin-bottom: .25rem; } .suche-struktur nav ul li a:hover { background: var(--theme-accent-dark); color: var(--theme-white); } .suche-struktur nav ul li { list-style: none; } .suche-struktur nav ul li.head { width: 100%; background: var(--theme-medium); padding: .5rem; color: var(--theme-text); margin-bottom: .25rem; font-weight: bold; } .suche-struktur ul.lvl_2, .suche-struktur ul.men_her { display: flex; flex-wrap: wrap; } .suche-struktur ul.lvl_2 li, .suche-struktur ul.men_her li { width: 100%; } ul.men_zk1 .alvl_1 { background: var(--theme-medium); margin-top: .5rem; }
@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; } .suche-struktur ul.lvl_1 li { width: 49.5%; } .suche-struktur ul.men_her li { width: 49.5%; } }
@media (min-width: 992px) { #meili-filters { grid-template-columns: repeat(5, 1fr); } .suche-struktur ul.lvl_1 li { width: 32.5%; } .suche-struktur ul.men_her li { width: 32.5%; } }
@media (min-width: 1200px) { #meili-filters { grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 1400px) { #meili-filters { grid-template-columns: repeat(6, 1fr); } }
/* ### progress-bar ### */
section.fortschritt { display: block; margin-bottom: var(--padding); } section.fortschritt ul { list-style: none; display: flex; padding: 0; margin: 0; } section.fortschritt ul li { position: relative; flex: 1; padding: .8rem 0 1.5rem 0; } section.fortschritt ul li a { color: var(--theme-text); } section.fortschritt ul li a span { display: none; text-align: center; color: var(--theme-text); } section.fortschritt ul li::before { content: ""; position: absolute; z-index: 1; top: 0; right: -.1rem; background-color: var(--theme-light); } section.fortschritt ul li.active::before { background-color: var(--theme-success); } section.fortschritt ul li.last::before { background-color: var(--theme-success); } .fortschritt ul li::before, .fortschritt ul li.active a::before { content: ' '; display: block; width: 2rem; height: 2rem; position: absolute; right: -.1rem; top: 0; background-color: var(--theme-light); border-radius: 2rem; z-index: 1; } .fortschritt ul li.active a::before { background: var(--theme-success) url(/img/check_w.svg) no-repeat 50% 50%; background-size: auto; background-size: 20px; } .fortschritt ul li:after { content: ' '; width: 100%; height: .5rem; position: absolute; bottom: 1rem; background: var(--theme-light); } .fortschritt ul li.active::after { content: ' '; width: 100%; height: .5rem; position: absolute; bottom: 1rem; background: var(--theme-success); }
@media (min-width: 768px) { section.fortschritt ul li a span { display: block; } section.fortschritt ul li::before, section.fortschritt ul li.active a::before { top: 1.5rem; }  }
/* ### wk-t2 ### */
/* temp */ .wk_zk_div.card { padding: 1rem; border: var(--theme-divider); } .card.datenschutz { padding: 1rem; border-radius: 1rem; background-color: var(--theme-light); } .dat_zk_check {display: block;background:rgb(238,238,238);padding: 1rem;margin-bottom:2rem;} .dat_zk_check td { vertical-align: top; } .dat_zk_check td.check-ueb { padding: 0 .5rem 0 .25rem; } .dat_zk_check .button.check {margin-top: 1rem;} #wk a { text-decoration: underline; color: var(--theme-text); } #wk a:hover { color: var(--theme-accent); } #wk .wk_zk a { text-decoration: unset; } textarea#kundentext { width: 100%; max-width: 100%; margin-bottom: 2rem; margin-left: -1rem; background-color: var(--theme-white); } .tabelle_zk span.b + br {display:none;} .tabelle_zk div.b { background: rgba(167, 198, 162,.8); text-align: right; padding:.5rem; margin-bottom: 1rem!important; } .wk_mwst { color: var(--theme-dark); } .wk_zk.start .tabelle_zk_th.kopfzeile { background-color: var(--theme-light); width: 100%; display: none; justify-content: space-between!important; border: 0; } .tabelle_zk_th.kopfzeile th { padding: .5rem 0; } .tabelle_zk_th.kopfzeile th:last-child { padding-right: 1rem; } .tabelle_zk_th.kopfzeile th:first-child { padding-left: 1rem; text-align: left; } .wk_zk.start { width: 100%; display: flex; flex-wrap: wrap; } .wk_zk.start tbody { width: 100%; } .wk_zk.start tr { display: flex; width: 100%;flex-wrap: wrap; justify-content: space-between; border-bottom: var(--theme-divider); } .wk_zk.start tr .zk_wk_anz { width: 22%; padding-bottom: .5rem; order: -3; text-align: left; } .wk_zk.start tr .zk_wk_pic { width: 100%; padding-top: 1rem; order: -5; vertical-align: top; } .wk_zk.start tr .zk_wk_name { width: 100%; padding-top: 1rem; order: -4; padding-right: 1rem; } .wk_zk.start tr .zk_wk_name b { font-weight: normal; } .wk_zk.start tr .zk_wk_lager { width: 10%; padding-bottom: .5rem; text-align: left; } .wk_zk.start tr .liefertage span { font-size: .9rem; opacity: .8; } .wk_zk.start tr .zk_wk_ep { width: 32%; padding-bottom: .5rem; } .wk_zk.start tr .zk_wk_ep .uvp, .wk_zk.start tr .zk_wk_gsum .uvp { text-decoration: line-through; opacity: .5; display: block; } .wk_zk.start tr .zk_wk_gsum { width: 32%; padding-bottom: .5rem; padding-right: 1rem; } .zk_wk_gsum span.a + br { display: none; } .zk_wk_ep span.a + br { display: none; } #wk-wk-wk .zk_gsum , .b.zk_rab b, .b.zk_sum b, #wk-ende-kram td, #wk-wk-wk #ratenrechnerEC { padding-right: 1rem; } .b.zk_gsum b { font-size: 1.25rem; padding-right: 1rem; } .wk_zk_pic { max-width: 6rem; max-height: 6rem; } .zk_wk_anz .anzahl_in_wk { font-size: 1.25rem; margin-left: .5rem; } .zk_wk_anz .anzahl_in_wk .wk_pen {width: 1.75rem; padding-left: .5rem; padding-bottom: .5rem; } #wk-wk-wk .zk_vers, #wk-wk-wk .zk_gsum { white-space: nowrap; } #wk-wk-wk .zk_gsum b { font-size: 1.25rem; } .button#kaufabschlussButton { width: 100%; margin-top: 1rem; height: 4rem; font-size: 1.25rem; } #infTab table { width: 100%; } .wk_lief {display:none;} img.wk_gutscheinmotiv { width:10rem; } .rechnung > div.kasse_card_div { margin-top: 0; } .kundentext .inp_wrapper { margin-top: 0; } #guthaben_fuer_next_order_div { box-shadow: var(--shadow-elevation-medium); border: var(--theme-border); background-color: var(--theme-accent-light); border-radius: var(--theme-radius-small); margin-bottom: 1rem; padding: 1rem!important; } .verpackung-wrapper { background-color: var(--theme-light); padding: .5rem; margin: .5rem 0 .5rem 1rem; border-radius: .25rem; border: var(--theme-divider); } .verpackung-wrapper .verpackung { display: block; } .verpackung-wrapper .verpackung b { font-weight: bold!important; } .verpackung-wrapper .verpackung + a { background-color: var(--theme-accent-medium); color: var(--theme-white)!important; border-radius: .25rem; padding: .2rem .4rem; display: inline-block; } .verpackung-wrapper.verpackung-rm { background-color: var(--theme-light); margin-top: 1rem; } .verpackung-wrapper.verpackung-rm span.verpackung + a { background-color: var(--theme-warning); background-repeat: no-repeat; background-size: 1rem; background-position: 93% 50%; } .verpackung-wrapper.verpackung-rm span.verpackung { background: url(/img/check.svg) no-repeat 100% 50%; background-size: 1rem; padding-right: 1.5rem; } .kassenausgang-prio-versand {display: flex; flex-wrap: wrap; align-items: start; } .kassenausgang-prio-versand-aufschlag { font-weight: bold; white-space: nowrap; margin-left: 1rem; } .kassenausgang-prio-versand-checkbox input { height: 1.25rem; width: 1.25rem; margin-right: .5rem; accent-color: var(--theme-accent-orange);} .prio-versand .kassenausgang-prio-versand-checkbox { background: var(--theme-accent-dark); border-radius: var(--theme-radius-small); color: var(--theme-white); margin: 0; text-align: center; padding: 1rem; position: relative; display: flex; align-items: center; } .prio-versand .kassenausgang-prio-versand-checkbox.checked { background: var(--theme-dark); } .prio-versand-info-text { display: flex; flex-wrap: wrap; align-items: start; } .kassenausgang-prio-versand h3 { margin-top: 0; } .error_vor_absendenbutton { display: block; background: var(--theme-error); color: var(--theme-white); padding: 1rem; margin-top: 1rem; border-radius: var(--theme-radius-small); font-size: 1rem!important; } .name_in_wk { display: block; overflow: hidden; } /*white-space: nowrap; max-width: 19rem; text-overflow: ellipsis;*/ .zk_wk_name .a + br { display: none; } .zk_wk_name .a .a3 { display: block; } .wk_zk.start tr .zk_wk_ep[data-anz="1"] { display: none; } #exit #infTab table tr:first-child { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-top: .5rem; } .hut-agb-tr { display: unset; } #exit #infTab table tr td { width: 100%; text-align: right; } #exit #infTab table tr td:first-child { } #exit #infTab table tr td:last-child span + br { display: none; } .hut-agb-tr td:last-child { width: auto!important; } #fehler_meldung { margin-top: .5rem; } .wk_zk.start tr .zk_wk_name .wk_konf_text > b > b { font-weight: bold; } table[style="border: 2px solid #DD2222;"] tr { margin-top: 0!important; } .wk_error_verkauf_za { background-color: var(--theme-error); padding: 1rem; border-radius: var(--theme-radius-small); color: var(--theme-white); text-align: right; } .b.zk_vers b { white-space: nowrap; } #help { display: none; } #shopLayer #wk .tg_buttons > a.active { background-color: var(--theme-success); color: var(--theme-white); } #wk .tg_buttons > a { border-radius: 2rem; } .tg_custom input[type="number"] { background-color: var(--theme-white); border: var(--theme-divider); } #shopLayer .tg_wrapper { border: var(--theme-divider); padding: 0 1rem 1rem 1rem; } #shopLayer .tg_custom { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; padding-bottom: 5rem; } #shopLayer .tg_custom span#betrag { padding: .5rem; } #shopLayer .tg_custom button { position: absolute; right: 1rem; bottom: 1.5rem; } .bemerkung { background-color: var(--theme-light); padding: 1rem 1rem 1.5rem 3.75rem; border-radius: 2rem; margin: 1rem 0 3rem 0; background-image: url(/img/greetings.svg); background-size: 2rem; background-position: 1rem 1rem; background-repeat: no-repeat; } h2.mobile { margin-bottom: .5rem; }
@media (min-width: 576px) { .verpackung-wrapper .verpackung { font-size: 1rem; } .wk_zk.start tr .zk_wk_pic { width: 15%; } .wk_zk.start tr .zk_wk_name { width: 85%; } .wk_zk_pic { max-width: 4rem; max-height: 4rem; } }
@media (min-width: 768px) { .tabelle_zk_th.kopfzeile, .wk_zk.start, .wk_zk.start tr { display: table; } .tabelle_zk_th.kopfzeile th:first-child { width: 19%; } .tabelle_zk_th.kopfzeile th:nth-child(4) { width: 50%; } .wk_zk.start tr .zk_wk_anz { width: 10%; } .wk_zk.start tr .zk_wk_pic { width: 10%; } .wk_zk.start tr .zk_wk_name { width: 45%; text-align: left; } .wk_zk.start tr .zk_wk_lager { width: 4%; } .wk_zk.start tr .zk_wk_ep { width: 12%; padding-right: 0 !important;} .wk_zk.start tr .zk_wk_gsum { width: 12%; } .wk_zk.start tr td:nth-child(3) { display: none; } .wk_zk.start tr td { padding: .5rem 1rem .5rem .5rem; } .wk_zk_pic { max-width: 5rem; max-height: 5rem; } .button#kaufabschlussButton { width: auto; min-width: 300px; } .tg_buttons > a { flex: 1; } .prio-versand-info-text { flex-wrap: unset; } .prio-versand-info-text p { margin-top: 0; } .prio-versand .kassenausgang-prio-versand-checkbox { margin-right: 1rem; } .verpackung-wrapper { width: max-content; margin-left: 0; } }
@media (min-width: 992px) { .wk_zk.start tr .zk_wk_name { width: 50%; } .tabelle_zk_th.kopfzeile th:nth-child(4) { width: 61%; } #wk-wk-wk .zk_gsum b { font-size: 1.5rem; } .wk_zk.start .tabelle_zk_th.kopfzeile { display: table; } .name_in_wk { max-width: 27rem; } .wk_zk.start tr .zk_wk_ep .uvp, .wk_zk.start tr .zk_wk_gsum .uvp { display: inline; margin-right: .5rem; } .wk_zk_pic { max-width: 6rem; max-height: 6rem; } #wk-wk-wk #ratenrechnerEC { padding-right: 1rem; } #wk-ende-kram td { padding-right: 1rem; } #wk-wk-wk .zk_gsum { padding-right: 1rem; } .wk_zk.start tr .zk_wk_gsum { padding-right: 1rem; }  }
/* ### amazon-pay ### */
/* Lade Animation */ #amz_loader { position: relative; background: var(--theme-accent-light) url(/img/Amazon_Pay_logo.svg) no-repeat 50% 50%; background-size: 16rem; aspect-ratio: 1 / 1; max-width: 100%; width: 24rem; margin: 7rem auto; border-radius: 100%; } #amz_loader div { position: absolute; height: 100%; width: 100%; border: 2rem dotted var(--theme-accent-light); border-radius: 100%; animation: rotate 10s infinite linear; } @keyframes rotate {from {transform:rotate(0deg)}to {transform:rotate(360deg)}} /* Warenkorb iFrames */ .amazonPayWidgets { display: flex; flex-direction: column; gap: var(--padding); margin-bottom: var(--padding); } .amazonPayWidgets > div { aspect-ratio: 16 / 9; } .widget-container > iframe { height: 100%; }
@media (min-width: 768px) { .amazonPayWidgets { flex-direction: row; } .amazonPayWidgets > div { flex: 1; } }
/* ### trinkgeld ### */
.tg_wrapper { margin-top: var(--padding); } .tg_titel { padding: 1rem 0; } .tg_titel h2, .tg_titel h3 { margin-top: 0; } .tg_buttons { display: flex; flex-wrap: wrap; gap: calc(var(--padding) / 2); flex-direction: column; } .tg_buttons > a { background-color: var(--theme-light); border: var(--theme-border); height: 4rem; display: flex; align-content: center; justify-content: center; flex-wrap: wrap; flex-direction: column; border-radius: var(--theme-radius-small); } .tg_buttons > a > br { display: none; } .tg_buttons > a > span { text-align: center; display: block; } .tg_buttons > a > .tg_perc { font-weight: bold; font-size: 1.1rem; } #wk .tg_buttons > a:hover { background-color: var(--theme-success); color: var(--theme-success-text); } #wk .tg_buttons > a.active { background-color: var(--theme-dark); color: var(--theme-success-text); font-weight: bold; } .tg_buttons > a.active > span { font-weight: bold; text-transform: uppercase; } .tg_buttons .tg_auf { text-transform: uppercase; } .tg_custom { padding: 1rem 0; overflow: auto; text-align: right; } .tg_custom span { display: inline-block; padding: 1rem; } .tg_custom > div {display:flex;float:right;} .tg_custom > div > input { height: auto; padding: 1rem .75rem!important; width: 8rem!important; margin-right: 1rem!important;} .tg_custom > div > button { background-color: var(--theme-accent-dark); color: var(--theme-white); padding: 1rem; font-weight: bold; cursor: pointer; } #wk .tg_buttons > a { text-decoration: none; }
@media (min-width: 768px) { .tg_buttons { flex-direction: row; } .tg_buttons > a { flex: 1; } }
/* ### 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; } }