/* CSS only 99.97K, CSS & InlineSvg (19/28) 121.66K => 22% more */

@font-face { font-family: 'Header-Font'; font-display: swap; src: url('/img/Nunito-Light.eot'); src: url('/img/Nunito-Light.woff') format('woff'), url('/img/Nunito-Light.eot?#iefix') format('embedded-opentype'), url('/img/Nunito-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, htm, kachel, powermenu, powermenue-extra, to-top-button, input-floating, kachel-slider */
/* ### base ### */
*, ::before, ::after { box-sizing: border-box; } html { text-size-adjust: none; } ::before, ::after { text-decoration: inherit; vertical-align: inherit; } ::selection {background: rgb(194, 229, 255);} :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; --shadow-saturation: 0%; --shadow-hue: 186deg; --shadow-lightness: 50%; --theme-white: rgb(255,255,255); --theme-light: rgb(240,240,240); --theme-medium: rgb(220,220,220); --theme-dark: rgb(150,150,150); --theme-link: rgb(100,100,100); --theme-text: rgb(10,10,10); --theme-text-shadow: 0 0 3px rgba (0,0,0,.5); --theme-text-hover: rgb(250,161,38); --theme-accent: rgba(140,140,140); --theme-accent-light: rgb(180,180,180); --theme-accent-medium: rgb(0,105,180); --theme-accent-dark: rgb(0,105,180); --theme-accent-text: rgb(255,255,255); --theme-accent-pic: rgb(160, 227, 231); --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-error: rgb(202,24,19); --theme-error-text: rgb(255,255,255); --theme-warning: rgb(250,161,38); --theme-warning-text: rgb(255,255,255); --theme-success: rgb(20,130,20); --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; } h1 { font-size: 2em; margin: 0.67em 0; } b, strong { font-weight: bolder; color: inherit; } .red { color: var(--theme-error); } .center { text-align: center; } .small { font-size: .75rem; } 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: 1rem; } 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-text); box-shadow: 0 0 25px -5px rgba(0,0,0,.25); border-bottom: .1rem solid var(--theme-white); } #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; } h1 { font-size: 1.5em; text-transform: uppercase; } .h1_in_breadcrumb { font-size: inherit; } h2 { font-size: 1.5em; text-transform: uppercase; } h3 { font-size: 1.15em; } h4 { font-size: 1em; } h5 { font-size: 1em; } h6 { font-size: 1em; } h1 a, h2 a { color: var(--theme-text); } hr { border: var(--theme-divider); } .pg-only { display: none; } .right { text-align: right; } /* header */ .shopHeader a:not(.button), .BreadcrumbList a, .breadcrumb a span, *[itemtype*="Breadcrumb"] * { color: var(--theme-text); } .shopHeader li, #shopFooter li { list-style: none; } #k_title { width: 100%; height: 2rem; background: var(--theme-light); 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-text); } #k_title ul li a:hover { color: var(--theme-text-hover); } #k_title ul li:nth-child(3), #k_title ul li:nth-child(4) { display: none; } #k_title ul li a.active { font-weight: bold; color: var(--theme-accent-dark); } .ausrichter { padding: 0 1rem; } #kopf_top_line_inner { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 4rem; padding: 0 1rem; } #k_logo, #k_icons { width: 11rem; } #k_logo { background: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"  viewBox="0 0 526.4 63" style="enable-background:new 0 0 526.4 63;" xml:space="preserve"><style type="text/css"> .st0{fill:%230069B4;}</style><g> <g>  <path d="M520.4,40.8c0.3,0.5,0.6,1.6,0.6,3.1c0,3.2-2.2,5.3-5.5,5.3s-5.7-2.3-5.7-5.8c0-1.2,0.3-2.2,0.6-2.7l1.5,0.4 c-0.3,0.5-0.5,1.2-0.5,2.3c0,2.5,1.8,3.8,4.1,3.8c2.5,0,4-1.6,4-3.7c0-1.1-0.3-1.8-0.5-2.4L520.4,40.8z"/>  <path d="M515.4,29.6c4,0,5.7,2.7,5.7,5.3c0,2.9-2.1,5.1-5.5,5.1c-3.6,0-5.7-2.3-5.7-5.3C509.8,31.7,512.1,29.6,515.4,29.6z  M515.5,38.1c2.3,0,4.1-1.4,4.1-3.3c0-1.9-1.8-3.3-4.2-3.3c-1.8,0-4.1,0.9-4.1,3.2C511.3,37.1,513.4,38.1,515.5,38.1z"/> </g> <g>  <path d="M513,25.5c-1.1,0-2,0-2.9,0.1v-1.7l1.7-0.1v-0.1c-1-0.6-2-1.6-2-3.4c0-1.5,0.9-2.6,2.1-3l0,0c-0.6-0.3-1.1-0.8-1.4-1.2 c-0.5-0.6-0.8-1.4-0.8-2.4c0-1.4,0.9-3.5,4.7-3.5h6.3v1.9h-6.1c-2.1,0-3.3,0.8-3.3,2.3c0,1.1,0.8,2,1.8,2.3c0.3,0.1,0.6,0.2,1,0.2 h6.6v1.9h-6.4c-1.7,0-2.9,0.8-2.9,2.2c0,1.2,1,2.1,2,2.4c0.3,0.1,0.6,0.2,1,0.2h6.5v1.9H513z"/> </g> <path d="M515.4,63c3.2,0,5.7-2.6,5.7-5.7c0-3.2-2.6-5.7-5.7-5.7c-3.2,0-5.7,2.6-5.7,5.7C509.7,60.5,512.2,63,515.4,63L515.4,63z"/> <path d="M33.5,47.8c-0.2,0.2-0.6,0.4-1.2,0.7c-0.6,0.3-1.4,0.6-2.3,1c-0.9,0.3-1.9,0.6-3,0.9c-1.1,0.3-2.3,0.4-3.6,0.4  c-1.5,0-2.9-0.2-4.2-0.6c-1.3-0.4-2.3-1-3.1-1.8c-0.8-0.8-1.4-1.9-1.8-3.2c-0.4-1.3-0.4-2.9,0-4.7c0.3-1.7,0.9-3.3,1.7-4.6  c0.8-1.3,1.8-2.5,2.9-3.3c1.1-0.9,2.4-1.6,3.8-2s2.8-0.7,4.3-0.7c2.5,0,4.5,0.4,6.1,1.3c1.6,0.9,2.9,1.8,3.7,2.8  c0.4-0.2,0.9-0.6,1.6-1c0.6-0.5,1.2-1,1.8-1.6s1.2-1.3,1.6-2.1c0.5-0.8,0.8-1.6,1-2.6c0.2-0.9,0.1-1.8-0.1-2.5  c-0.2-0.7-0.6-1.4-1.1-2c-1.1-1.3-2.8-2.3-5.3-3.1c-2.5-0.8-5.2-1.1-8.1-1.1c-3.2,0-6.4,0.5-9.4,1.5S13,22,10.5,23.9  S5.9,28.2,4.2,31c-1.8,2.8-2.9,6-3.6,9.6c-0.7,3.7-0.6,7,0.2,9.8s2.1,5.2,3.9,7c1.8,1.9,4,3.3,6.7,4.2c2.6,0.9,5.5,1.4,8.5,1.4  c2.2,0,4.3-0.2,6.2-0.5c1.9-0.4,3.6-0.8,5.1-1.3c1.5-0.5,2.8-1,3.9-1.6s2-1,2.7-1.4L33.5,47.8L33.5,47.8z M85.3,36.1  c0.6-3.5,0.5-6.4-0.2-8.8c-0.8-2.3-2.1-4.2-3.9-5.6s-4.1-2.4-6.9-3c-2.7-0.6-5.7-0.9-9-0.9c-9.9,0-15.3,2.4-16.2,7.3  c-0.1,0.8-0.1,1.5,0,2.2c0.2,0.7,0.4,1.3,0.6,1.8c0.2,0.5,0.5,1,0.8,1.3s0.5,0.6,0.6,0.7c0.3-0.2,0.7-0.4,1.3-0.7  c0.6-0.3,1.4-0.6,2.4-0.8c1-0.3,2.1-0.5,3.5-0.7c1.3-0.2,2.9-0.3,4.6-0.3c3.7,0,6.2,0.6,7.6,1.7s1.9,2.6,1.6,4.6  c-0.8-0.1-1.7-0.2-2.9-0.3c-1.2-0.1-2.7-0.1-4.5-0.1c-7.1,0-12.5,1.1-16.2,3.3s-6,5.9-6.9,11c-0.3,1.9-0.3,3.7,0.1,5.4  c0.4,1.7,1.3,3.2,2.7,4.5s3.5,2.3,6.2,3.1s6.1,1.1,10.3,1.1c2.5,0,4.9-0.1,7.2-0.2c2.3-0.1,4.3-0.3,6.1-0.4  c1.8-0.2,3.3-0.3,4.5-0.5c1.2-0.1,2-0.3,2.3-0.4L85.3,36.1L85.3,36.1z M68.9,52.9c-0.4,0.1-1.2,0.2-2.5,0.3c-1.2,0.1-2.6,0.1-4,0.1  c-1.8,0-3.3-0.2-4.4-0.5c-1.1-0.3-1.8-0.7-2.3-1.1c-0.5-0.4-0.8-0.9-0.8-1.5c-0.1-0.6-0.1-1.1,0-1.6c0.1-0.7,0.3-1.3,0.7-1.9  c0.3-0.6,0.8-1.2,1.5-1.6c0.7-0.5,1.6-0.8,2.7-1.1c1.1-0.3,2.5-0.4,4.2-0.4c2,0,3.4,0,4.4,0.1s1.7,0.2,2.2,0.3L68.9,52.9L68.9,52.9  z M88.4,61.6h13.5l4.2-23.8c0.5-2.8,1.6-4.9,3.3-6.1c1.7-1.2,3.6-1.8,5.7-1.8c1.6,0,3.1,0.2,4.3,0.6c1.3,0.4,2.3,0.8,3.2,1.3  c0.2-0.2,0.5-0.4,0.9-0.8s0.8-0.9,1.3-1.4c0.5-0.6,0.9-1.2,1.3-1.9c0.4-0.7,0.6-1.5,0.8-2.3c0.1-0.8,0.1-1.6,0-2.2  c-0.2-0.6-0.5-1.2-0.9-1.8c-0.7-0.8-1.9-1.6-3.6-2.3c-1.7-0.7-4.3-1.1-7.6-1.1c-2.7,0-5.3,0.4-7.7,1.1c-2.4,0.8-4.6,1.9-6.4,3.3  c-1.9,1.4-3.5,3.2-4.7,5.4c-1.3,2.1-2.2,4.5-2.7,7.3L88.4,61.6L88.4,61.6z M127.2,38.4c-0.6,3.6-0.8,6.7-0.5,9.3s0.9,4.8,1.9,6.6  c1.6,2.8,4,4.9,7,6.4c3,1.4,6.6,2.2,10.6,2.2c3.3,0,6.4-0.5,9.4-1.6s5.7-2.6,8.1-4.6c2.4-2,4.4-4.3,6.1-7.1  c1.7-2.8,2.8-5.9,3.4-9.2c0.6-3.4,0.6-6.5,0-9.2c-0.6-2.8-1.7-5.1-3.2-7.1s-3.4-3.5-5.8-4.6c-2.3-1.1-4.9-1.6-7.7-1.6  c-3.1,0-5.8,0.5-8,1.5s-3.9,2-5.1,3.1l3.7-21.2c-0.3-0.1-1-0.3-2.2-0.7c-1.1-0.4-2.5-0.5-4-0.5c-2.1,0-3.9,0.4-5.3,1.3  c-1.4,0.9-2.4,2.4-2.7,4.6L127.2,38.4L127.2,38.4z M141.6,47.8c-1.5-1.8-2-4.2-1.4-7.4c0.3-1.4,0.7-2.8,1.4-4.1s1.6-2.3,2.6-3.3  c1-0.9,2.2-1.6,3.4-2.2c1.3-0.5,2.6-0.8,4-0.8c2.8,0,4.9,1,6.4,2.9s1.9,4.4,1.4,7.4s-1.9,5.4-4,7.3c-2.1,1.8-4.6,2.8-7.4,2.8  C145.2,50.4,143.1,49.5,141.6,47.8L141.6,47.8z M177.7,49.3c0.7,2.7,2,5.1,3.8,7.1s4,3.6,6.7,4.7c2.6,1.1,5.6,1.7,8.9,1.7  c3.2,0,6.4-0.6,9.5-1.7c3.1-1.1,5.9-2.7,8.4-4.7s4.6-4.4,6.3-7.1c1.7-2.7,2.8-5.7,3.4-8.9c0.6-3.2,0.5-6.2-0.3-8.9  c-0.7-2.7-2-5.1-3.8-7.1s-4-3.6-6.7-4.7S208.3,18,205,18s-6.5,0.6-9.5,1.7s-5.8,2.7-8.3,4.7s-4.6,4.4-6.3,7.1s-2.8,5.7-3.4,8.9  C176.8,43.5,176.9,46.5,177.7,49.3L177.7,49.3z M195.4,50c-1.1-0.5-2-1.3-2.7-2.2s-1.2-2-1.5-3.3c-0.2-1.3-0.2-2.7,0-4.2  c0.3-1.5,0.7-2.9,1.4-4.2s1.6-2.4,2.6-3.3c1.1-0.9,2.2-1.6,3.5-2.2c1.3-0.5,2.6-0.8,4.1-0.8c1.4,0,2.6,0.3,3.7,0.8  c1.1,0.5,2,1.3,2.8,2.2c0.7,0.9,1.2,2,1.5,3.3c0.2,1.3,0.2,2.7,0,4.2c-0.3,1.5-0.7,2.9-1.4,4.2s-1.6,2.4-2.6,3.3  c-1.1,0.9-2.2,1.6-3.5,2.2c-1.3,0.5-2.6,0.8-4,0.8C197.7,50.8,196.4,50.5,195.4,50L195.4,50z M225.4,61.6h13.5l4-22.7  c1-5.8,4.2-8.7,9.4-8.7c2.5,0,4.3,0.7,5.4,2.1c1.1,1.4,1.4,3.6,0.9,6.6l-4,22.7H268l4.6-25.8c0.5-2.9,0.4-5.5-0.3-7.7  c-0.7-2.3-1.9-4.1-3.6-5.6s-3.7-2.6-6.2-3.4s-5.1-1.2-8-1.2c-3,0-5.8,0.4-8.5,1.2c-2.7,0.8-5.2,1.9-7.4,3.4s-4.1,3.4-5.6,5.6  c-1.5,2.3-2.5,4.8-3,7.7L225.4,61.6L225.4,61.6z"/> <path class="st0" d="M498.1,20.5c-0.9-1-2.6-1.5-5.1-1.5h-9.6l2-11.3c-0.3-0.1-1.1-0.3-2.2-0.7c-1.2-0.4-2.5-0.5-4-0.5  c-2.1,0-3.9,0.4-5.3,1.3s-2.4,2.4-2.7,4.6L465,47.6c-0.8,4.6,0,8.3,2.5,11.1s6.3,4.1,11.6,4.1c1.8,0,3.6-0.2,5.4-0.5  c1.7-0.4,3.3-0.8,4.7-1.3c1.4-0.5,2.7-1,3.7-1.6s1.9-1.1,2.4-1.5l0,0c0.8-0.6,1.6-1.4,2.1-2.5c1.7-3.3,0.6-7.1-2.3-8.6  c-2.9-1.5-6.7-0.1-8.3,3.2c-0.1,0.2-0.1,0.3-0.2,0.5c-0.7,0.1-1.5,0.2-2.3,0.2s-1.5-0.1-2.3-0.2c-0.7-0.1-1.3-0.4-1.9-0.9  c-0.5-0.4-0.9-1-1.1-1.8c-0.3-0.8-0.3-1.8,0-3.1l2.3-13.1h14.9c0.3-0.4,0.8-1.2,1.4-2.5c0.7-1.3,1.1-2.6,1.4-4.1  C499.3,23,499,21.5,498.1,20.5L498.1,20.5z M458.8,44.2l4.2-24c-0.3-0.1-1.1-0.3-2.2-0.7c-1.2-0.4-2.5-0.5-4-0.5  c-2.1,0-3.9,0.4-5.3,1.3s-2.4,2.4-2.7,4.6l-3,16.8c-1,5.8-4.2,8.7-9.4,8.7c-5.2,0-7.4-2.9-6.3-8.7l3.8-21.5  c-0.3-0.1-1.1-0.3-2.2-0.7c-1.2-0.4-2.5-0.5-4-0.5c-2.1,0-3.9,0.4-5.3,1.3s-2.4,2.4-2.7,4.6l-3.4,19.3c-0.5,3.1-0.5,5.8,0.2,8.2  c0.7,2.3,1.8,4.2,3.5,5.8c1.6,1.5,3.7,2.7,6.2,3.5s5.2,1.2,8.2,1.2s5.9-0.4,8.7-1.2c2.8-0.8,5.2-1.9,7.4-3.5c2.2-1.5,4-3.5,5.5-5.8  C457.2,50.1,458.3,47.4,458.8,44.2L458.8,44.2z M411.8,40.3c0.6-3.2,0.5-6.2-0.3-8.9c-0.7-2.7-2-5.1-3.8-7.1s-4-3.6-6.7-4.7  s-5.6-1.7-8.9-1.7s-6.5,0.6-9.5,1.7s-5.8,2.7-8.3,4.7s-4.6,4.4-6.3,7.1c-1.7,2.7-2.8,5.7-3.4,8.9s-0.5,6.2,0.3,8.9  c0.7,2.7,2,5.1,3.8,7.1s4,3.6,6.7,4.7c2.6,1.1,5.6,1.7,8.9,1.7c3.2,0,6.4-0.6,9.5-1.7c3.1-1.1,5.9-2.7,8.4-4.7s4.6-4.4,6.3-7.1  C410.1,46.5,411.3,43.5,411.8,40.3L411.8,40.3z M398,40.3c-0.3,1.5-0.8,2.9-1.4,4.2c-0.7,1.3-1.6,2.4-2.6,3.3  c-1.1,0.9-2.2,1.6-3.5,2.2c-1.3,0.5-2.6,0.8-4,0.8c-1.5,0-2.7-0.3-3.8-0.8c-1.1-0.5-2-1.3-2.7-2.2s-1.2-2-1.5-3.3  c-0.2-1.3-0.2-2.7,0-4.2c0.3-1.5,0.7-2.9,1.4-4.2c0.7-1.3,1.6-2.4,2.6-3.3c1.1-0.9,2.2-1.6,3.5-2.2c1.3-0.5,2.6-0.8,4.1-0.8  c1.4,0,2.6,0.3,3.7,0.8s2,1.3,2.8,2.2c0.7,0.9,1.2,2,1.5,3.3C398.3,37.4,398.3,38.8,398,40.3L398,40.3z M365.8,26.4  c0.2-0.9,0.1-1.8-0.1-2.5s-0.6-1.4-1.1-2c-1.1-1.3-2.8-2.3-5.3-3.1c-2.5-0.8-5.2-1.1-8.1-1.1c-3.2,0-6.4,0.5-9.4,1.5  s-5.8,2.5-8.3,4.4s-4.6,4.3-6.3,7.1c-1.8,2.8-2.9,6-3.6,9.6c-0.7,3.7-0.6,7,0.2,9.8c0.8,2.8,2.1,5.2,3.9,7c1.8,1.9,4,3.3,6.7,4.2  c2.6,0.9,5.5,1.4,8.5,1.4c2.2,0,4.3-0.2,6.2-0.5c1.9-0.4,3.6-0.8,5.1-1.3s2.8-1,3.9-1.6s2-1,2.7-1.4l-4.1-10.2  c-0.2,0.2-0.6,0.4-1.2,0.7s-1.4,0.6-2.3,1c-0.9,0.3-1.9,0.6-3,0.9c-1.1,0.3-2.3,0.4-3.6,0.4c-1.5,0-2.9-0.2-4.2-0.6  c-1.3-0.4-2.3-1-3.1-1.8c-0.8-0.8-1.4-1.9-1.8-3.2s-0.4-2.9,0-4.7c0.3-1.7,0.9-3.3,1.7-4.6c0.8-1.3,1.8-2.5,2.9-3.3  c1.1-0.9,2.4-1.6,3.8-2s2.8-0.7,4.3-0.7c2.5,0,4.5,0.4,6.1,1.3c1.6,0.9,2.9,1.8,3.7,2.8c0.4-0.2,1-0.6,1.6-1c0.6-0.5,1.2-1,1.8-1.6  c0.6-0.6,1.2-1.3,1.6-2.1C365.3,28.2,365.6,27.4,365.8,26.4L365.8,26.4z M321.3,25.6c0.2-1.2,0.1-2.2-0.4-3s-1.2-1.5-2.2-2  c-1.7-0.9-3.7-1.6-6.2-2.1c-2.5-0.4-5.4-0.7-9-0.7c-3.5,0-6.5,0.4-9.1,1.1c-2.6,0.8-4.9,1.8-6.7,3.1c-1.8,1.3-3.3,2.8-4.4,4.6  c-1.1,1.8-1.8,3.7-2.1,5.7c-0.4,2.5-0.3,4.5,0.3,6.1c0.6,1.6,1.6,2.9,2.9,4c1.4,1,3,1.8,4.9,2.3s3.9,0.9,6.1,1.2l4.3,0.5  c2,0.3,3.5,0.6,4.4,1s1.3,1.2,1.1,2.3c-0.2,1.1-0.9,1.8-2.1,2.2s-3,0.6-5.3,0.6c-2,0-3.9-0.2-5.6-0.5c-1.8-0.3-3.3-0.7-4.7-1.1  c-1.3-0.4-2.5-0.9-3.4-1.3c-0.9-0.5-1.6-0.9-2-1.2l-6.3,8.7c0.4,0.3,1.1,0.8,2.1,1.5c1,0.6,2.4,1.3,4.1,1.8  c1.7,0.6,3.8,1.1,6.3,1.5s5.3,0.7,8.6,0.7c6.3,0,11.5-1.3,15.5-3.9c4-2.6,6.5-6.3,7.3-11c0.4-2.2,0.3-4.1-0.2-5.7  c-0.5-1.6-1.4-2.8-2.6-3.8s-2.6-1.8-4.3-2.3c-1.7-0.5-3.4-0.9-5.3-1.2l-7.4-1.1c-1.7-0.3-3-0.6-3.8-1s-1.2-1.1-1-2s0.8-1.7,1.9-2.3  c1.1-0.6,2.9-0.9,5.4-0.9c2.2,0,4.2,0.2,5.9,0.5c1.7,0.3,3.1,0.7,4.3,1.1s2.1,0.9,2.8,1.3c0.7,0.4,1.1,0.8,1.2,0.9  c0.1-0.1,0.4-0.2,0.9-0.5s1-0.7,1.5-1.2c0.6-0.5,1.1-1.1,1.6-1.8C320.8,27.3,321.1,26.5,321.3,25.6L321.3,25.6z"/></g></svg>') no-repeat 50% 50%; height: 100%; position: relative; } #kopf_top_line #slogan { display: none; position: absolute; font-style:italic; font-size:.8rem; bottom: 1rem; white-space: nowrap; } #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:%233C3C3C;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;} .st1{fill:none;stroke:%233C3C3C;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(/img/bg-merkliste.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:%233C3C3C;}</style><path class="st0" d="M41.4,30.8c2.4-2.7,3.9-6.2,3.9-10c0-8.3-6.8-15.1-15.1-15.1s-15,6.8-15,15.1s6.7,15,15,15c2.9,0,5.7-0.9,8-2.3 c8.2,3.1,13.8,10.6,14.5,19.2h-45c0.5-5.8,3.2-11.3,7.7-15.1c0.8-0.7,0.9-1.9,0.2-2.7c-0.7-0.7-1.9-0.8-2.7-0.1 c-5.7,5-9,12.2-9,19.9c0,1,0.8,1.9,1.9,1.9h48.9c1,0,1.9-0.8,1.9-1.9C56.6,44.3,50.6,35.1,41.4,30.8z M19,20.8 c0-6.2,5.1-11.3,11.3-11.3s11.3,5.1,11.3,11.3s-5.1,11.3-11.3,11.3S19,27,19,20.8z"/></svg>'); 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:%233C3C3C;}</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_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; } #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); color: var(--theme-accent-medium); } #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: 5rem; background-position: .5rem 0; } 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; color: var(--theme-accent-text); width: 1.25rem; height: 1.25rem; line-height:1.25rem; text-align: center; vertical-align: middle; border-radius: 50%; box-shadow: var(--shadow-elevation-low); font-size: 0.8rem; } #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: .5rem; 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-w.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 { background-color: var(--theme-text); } .foot_infos { padding: 2rem var(--padding); 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%; margin-bottom:2rem; } .foot_infos ul li { margin-bottom: .5rem; color: var(--theme-white); } .foot_infos ul li a { color: var(--theme-white); } .foot_infos ul li a:hover { color: var(--theme-accent-dark); } .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; } .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%; } .foot_infos ul.soc li a { display: inline-block; width: 2.5rem; height: 2.5rem; margin: .5rem; padding:0; } .foot_infos ul.soc li a#cgtec-logo { width: 10rem; } .foot_infos ul.soc li a#cgtec-logo img { width: 10rem; } #shopFooter #f_text { text-align: center; padding: 2rem; } #shopFooter #f_text { background-color: var(--theme-white); } #shopFooter #f_text > span { display: block; font-size: .8rem; } #shopFooter .unten #f_text span.br { display:block;height:0; } #shopFooter .unten #f_text span.pipe { display:none; } #shopFooter a:hover { color: var(--theme-accent-dark); } #footer-slo { width: 100%; background: var(--theme-accent-dark); color: var(--theme-white); text-align: center; padding: 1rem 0; font-size: 1.5rem; border-bottom: .1rem solid var(--theme-white); } .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: 1.5rem; width: 1rem; margin-right: .3rem; display: block; float: left; background-repeat: no-repeat; background-position: center; background-size: 100%; } .rat_stars i { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 13 13"><style type="text/css">.st0{fill:RGB(238,177,29);}</style><path class="st0" d="M6.5 0l1.8 5h4.7l-3.9 2.9 1.4 5.1-4-3.1-4 3.1 1.4-5.1-3.9-2.9h4.7z"/></svg>'); } .rat_stars b { background-image: url(/img/star-outline-h.svg); } .rattext { min-height: 6rem; } /* card */ .card { display: block; position: relative; box-shadow: var(--shadow-elevation-medium); border: var(--theme-border); background-color: var(--theme-card-background); border-radius: var(--theme-radius-small); 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: var(--shadow-elevation-high); 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-2 { margin-top: 1rem; } .mt-4 { margin-top: 2rem; } .mt-6 { margin-top: 3rem; } .mt-4 { margin-top: 2rem; } .mb-1 { margin-bottom: .5rem; } .mb-2 { margin-bottom: 1rem; } .mb-4 { margin-bottom: 2rem; } .mb-6 { margin-bottom: 3rem; } u { text-decoration: none; } .mb { margin-bottom: var(--padding); } .p-0 { padding: 0!important; } .p-4 { padding: 2rem; } .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 2rem; font-size: 1rem; text-transform: uppercase; color: var(--theme-white); border-radius: .5rem; box-shadow: var(--shadow-elevation-medium); cursor: pointer; transition: all .3s ease-out; user-select: none; } button:hover, .button:hover { background-color: var(--theme-text); color: var(--theme-white); } button.big, .button.big { width: 100%; padding: 1rem; font-size: 1.25rem; text-align: center; text-transform: uppercase; } button.big.icon:before, .button.big.icon:before { content: ''; background-repeat: no-repeat; background-position: center; display: inline-block; margin-right: 1rem; margin-top: -0.5rem; height: 2rem; width: 2rem; vertical-align: middle; } button:disabled, .button:disabled { opacity: .5; cursor: no-drop; } button.cancel, .button.cancel, button.secondary, .button.secondary { background-color: var(--theme-accent-light); color: var(--theme-text); 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: 24rem; } input[type="text"], input[type="email"], input[type="number"], input[type="tel"], input[type="password"], input[type="date"], textarea, select { border: none; border-bottom: 1px solid transparent; border-radius: var(--theme-radius-small); box-shadow: var(--shadow-elevation-low); 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; } .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: 1rem; 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-right-radius: 0; border-bottom-right-radius: 0; } .inp_wrapper[data-typ="number-custom"] > div.inc { border-top-left-radius: 0; border-bottom-left-radius: 0; } .inp_wrapper[data-typ="number-custom"] { height: 4rem; width: 6.2rem; margin: 0 auto; display: inline-block; } .inp_wrapper[data-typ="number-custom"] input { float: left; width: 2.7rem; text-align: center; padding-left: 0; padding-right: 0; border-radius: 0; z-index: 2; position: relative; } .inp_wrapper[data-typ="number-custom"] input::-webkit-outer-spin-button, .inp_wrapper[data-typ="number-custom"] input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .inp_wrapper[data-typ="number-custom"] input[type=number] { -moz-appearance: textfield; } .inp_wrapper.delete[data-typ="number-custom"] { height: 5rem; } .inp_wrapper[data-typ="number-custom"] > div.del { position: absolute; top: 3.5rem; left: 0; text-align: center; right: 0.3rem; background-color: var(--theme-error); color: var(--theme-error-text); border-radius: var(--theme-radius-small); box-shadow: var(--shadow-elevation-medium); cursor: pointer; user-select: none; opacity: .75; font-size: 0.9rem; font-weight: normal; } /* toggle (css only radio group) */ .toggle { display: flex; border: var(--theme-border); box-shadow: var(--shadow-elevation-low); background-color: var(--theme-light); } .toggle > button { flex: 1; padding: 1rem; border-radius: 0; background-color: transparent; color: var(--theme-text); box-shadow: none; transition: color .3s ease-out; border-left: var(--theme-border); z-index: 2; } .toggle > button.active { color: var(--theme-accent-text); } .toggle > button:first-of-type { border-left: none; } .toggle:after { content: ''; position: absolute; top: 0; left: 0; height: 100%; background-color: var(--theme-accent-medium); transition: left .4s ease-out; border-radius: var(--theme-radius-small); } .toggle-slide-content { position: relative; border-bottom: var(--theme-divider); } .toggle-slide-content > div { position: absolute; top: var(--padding); left: 0; width: 100%; transform: translateX(-2rem); opacity: 0; visibility: hidden; z-index: -1; transition: all ease-out .3s; } /* default table */ .table { max-width: 100%; overflow-x: auto; } .table table { width: 100%; } .table th { text-align: left; min-width: 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: calc(var(--padding) / 2) var(--padding); border-bottom: var(--theme-divider); color: var(--theme-text); } .table td a { color: var(--theme-text); } .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; min-width: 15.5rem; } .css_dropdown > div { cursor: pointer; padding: var(--padding); background-color: var(--theme-card-background); border: var(--theme-divider); } .css_dropdown ul { display: block; position: absolute; z-index: 20; margin-top: 0; background-color: var(--theme-card-background); box-shadow: var(--shadow-elevation-medium); list-style: none; left: 0; right: 0; padding: 0; opacity: 0; transition: opacity .2s ease-out, transform .2s ease-out; transform: translateY(-1rem); visibility: hidden; border: var(--theme-divider); 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; font-size: .9rem; padding: .5rem; text-align: left; color: var(--theme-text); cursor: pointer; border-bottom: var(--theme-divider); } .css_dropdown ul li:nth-child(odd) { background-color: var(--theme-accent-light); color: var(--theme-text); } .css_dropdown ul li:nth-child(2n+1) { background-color: var(--theme-white)!important; } /* Tooltip <span class='tooltip'>Hover mich<div class='tooltiptext'>Lorem Ipsum</div></span> */ .tooltip { display: inline-block; border-bottom: 1px dotted var(--theme-text); } .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: 100; transition: all .3s ease-out; } .tooltip.bottom .tooltiptext { transform: translate(0%, -1rem); bottom: unset; top: 100%; } .tooltip:hover .tooltiptext { opacity: 1; visibility: visible; transform: translate(0%, 0); } .tooltip .tooltiptext.wide { width: 23rem; } .PGerror, .PGwarning, .PGsuccess { border-radius: var(--theme-radius-small); padding: var(--padding); display: flex; gap: var(--padding); align-items: center; 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: 0.2rem; display: inline-block; padding: .5rem 1rem; } #pers_submen a { background-color: var(--theme-accent-light); color: var(--theme-text); } #pers_submen a.active, #pers_submen a:hover { background-color: var(--theme-accent-medium); color: var(--theme-light); } #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('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><svg version="1.1" id="Ebene_1" focusable="false" xmlns="http://www.w3.org/2000/svg"  x="0px" y="0px" viewBox="0 0 512 381.8" style="enable-background:new 0 0 512 381.8;" xml:space="preserve"><style type="text/css"> .st0{fill:rgb(255,255,255);}</style><path class="st0" d="M173.9,374.3L7.5,207.9c-10-10-10-26.2,0-36.2l36.2-36.2c10-10,26.2-10,36.2,0L192,247.6L432.1,7.5 c10-10,26.2-10,36.2,0l36.2,36.2c10,10,10,26.2,0,36.2L210.1,374.3C200.1,384.3,183.9,384.3,173.9,374.3L173.9,374.3z"/></svg>') no-repeat 50% 50%; background-size:150px;animation: wobbel 1s 1 linear} #bestellabschluss p {text-align:center;font-size: 1.25rem;} #bestellabschluss form { width: max-content; margin: 0 auto;} #bestellabschluss form button { margin-top: 2rem; } .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;} ul.mleft li { margin-left: 1rem; padding: .5rem 0; } ul.mleft.none li { list-style: none; } /* Lexikon */ #gloss_wrapper {margin-bottom:2rem;} #gloss_nav {margin-bottom:2rem;} .gloss_alph_tab {margin-left:.5rem;} #gloss_nav .gloss_alph_tab {margin-left:0;} .gloss_cloud1, .gloss_cloud2, .gloss_cloud3, .gloss_cloud4, .gloss_cloud5, .gloss_cloud6, .gloss_cloud7 { font-size:1rem; padding-right: 1rem; } .gloss_box { font-size:1rem; } .gloss_box a { margin-top: 1.2rem; margin-left: 0.5rem; display: block; color: var(--theme-text); } .gloss_box a span { color: var(--theme-text); } .gloss_box a span:hover { color: var(--theme-accent); } .gloss_li1 {background-color:#EEEEEE;list-style-type: none;list-style-position:inside;cursor:pointer;position: relative; left: -20px;} .gloss_li2 {background-color:#FFFFFF;list-style-type: none;list-style-position:inside;cursor:pointer;position: relative; left: -20px;} .gloss_ajax_text {font-size: 1rem;font-weight: bold;} #gloss_nav .gloss_alph { width: auto; min-width: 3rem; font-size: 1rem; color: var(--theme-text); background-color: var(--theme-light); padding: .5rem; border-radius: .5rem; display: inline-block; margin: 0 .5rem .5rem 0; text-align: center; } #gloss_nav .gloss_alph:hover { background-color: var(--theme-accent); } .gloss_alph_tab {display:inline;} .gloss_box table.gloss_alph_tab span.gloss_alph {font-size: 2rem;padding: .5rem 1rem;background: rgb(226,114,12);color: #fff;border-radius: .5rem;} .gloss_alph a, .gloss_alph a nobr {font-size:1.25rem;color:#fff;} .gloss_alph a {padding: .5rem;} .gloss_alph a:hover {background-color:rgb(226,114,12);} .gloss_titel {font-size:1.25rem;font-weight:bold;} .gloss_text {font-size:1rem;} .gloss_text ul li {font-size:1rem;position: relative;padding: .5rem 0 .5rem 2rem;margin: 0;} .gloss_text ul {margin: 0 0 2rem 0;} .gloss_text h2 {border-bottom: 1px solid silver; padding-bottom: 3px} .gloss_text p, .gloss_text p a {font-size:1rem;} .gloss_text p {margin:.5rem 0;} .gloss_text p b {font-weight:bold;} .gloss_text strong {font-size:1rem;font-weight:bold!important;} .gloss_text iframe[src*='youtube'], .banner iframe[src*='youtube'] {border-radius: 5px; border: 6px solid #ececec; display: block; margin: 0 auto;} .gloss_text {margin-bottom:10em;} .gloss_box h1 {font-size:1.5em;font-weight:normal!important;} .gloss_alph_tab .gloss_alph {font-size: 1.25rem; background-color: rgb(80,80,80);color:#fff;padding: .25rem;border-radius: .5rem;display: inline-block;margin: 0;width: 2rem;text-align: center;} .gloss_box {margin-bottom:2rem;} #gloss_nav .gloss_alph_tab:last-child .gloss_alph {padding: .5rem 2rem;} #shopLayer[data-pp="agb"] .tab_k { display:none; } #shopLayer[data-pp="agb"] .zul_anges_art { display: none; } #shopLayer[data-pp="agb"] .htm_include ul li { margin-left: 1rem; } #shopLayer[data-pp="dat"] .tab_k { display: none; } #shopLayer[data-pp="dat"] .zul_anges_art { display:none; } #shopLayer[data-pp="dat"] .htm_include ul li { margin-left: 1rem; } #shopLayer[data-pp="wid"] .tab_k { display: none; } #shopLayer[data-pp="wid"] .zul_anges_art { display:none; } #shopLayer[data-pp="wid"] .htm_include ul li { margin-left: 1rem; } #shopLayer form[name="dd_aug_form"] .dd_list > ul { max-height: unset!important; overflow-y: unset!important; } #shopLayer .see_alle_dd > form > ul#dd_groe li .dd_list ul li.see_li.see_li_gr { width: 100%; } /*Adventskalender*/ #advent_tab { text-align:center; position: relative; } .advent_tab { width:100%; background-image:url(/img/Fotolia_125747371_M.jpg); background-position: 58% 46%; background-repeat:no-repeat; background-size: cover; border:0; margin:0 0 2% 0;position:relative;border-radius: 1rem; padding-bottom: 10rem; } .advent_td { text-align:center; width: 5rem; height: 3rem; font-size: 1rem; } .advent_td a { font-size: 1rem; } #advent_ueb { font-size:2rem; text-align:center; padding: 1rem 0 .5rem 0; } .advent_text { width:100%;height:auto; background-color:#a40609; opacity: 0.9; padding: 1rem; font-size: 1.25rem; color: var(--theme-white); text-align: center; position: absolute; bottom: -10rem; border-radius: var(--theme-radius-medium);} .advent_tag { padding:1rem; display:inline-block; margin:.5rem; background-color: rgba(255,255,255,0.5); border-radius: 0.5rem; } .advent_nummer { font-size: 2rem; width: 100%; height: 100% !important;display: inline-block;cursor:pointer;} .advent_tooltipp { padding: 1rem; background-color: var(--theme-white); position:absolute; border: var(--theme-divider); border-radius: .5rem; position: absolute; z-index: 100; top: 0; box-shadow: var(--shadow-elevation-medium); } .advent_status1, .advent_status2, .advent_status3 { float:left; width:90%; height:4rem; margin-bottom: 1rem; padding-left: 15%; font-size:1rem; text-align: left;} .advent_status1 { color:#a70b07; background-image:url(/img/pg_smily3.png); background-repeat:no-repeat; background-position: 0 0; } .advent_status2 { color:#1c7d06; background-image:url(/img/pg_smily1.png); background-repeat:no-repeat; background-position: 0 0; } .advent_status3 { color:#dfbc15; background-image:url(/img/pg_smily2.png); background-repeat:no-repeat; background-position: 0 0; } .advent_name { padding:0 0 1rem 0; font-size:1.25rem; } .advent_pic { width:30%; float:left; } .advent_preisbox { width:60%; float:left; margin-left:1rem; text-align: left; } .advent_preisbox_uvp { opacity: .7; } .advent_preisbox_strike { color: #cc0000; } .advent_proz { font-size: 1.5rem; color: #cc0000; font-weight:bold;} .advent_preisbox_preis { font-size: 1.5rem; font-weight:bold; } /*Adventskalender ENDE*/ .htm_include { margin-bottom: 2rem; } .inp_wrapper[data-typ="checkbox"] > input, .container_chk input { margin: 0; margin-top: .3rem; height: 1.25rem; width: 1.25rem; } .max950 { max-width: 950px; margin: 0 auto; } #ankaufform form { max-width: 950px; margin: 0 auto; } #ankaufform form input, #ankaufform form label, #ankaufform form textarea, #ankaufform form select { max-width: 100%; } #ankaufform form label { width: auto; max-width: 95%; } .janolaw-paragraph { font-weight: bold; font-size: 1.2rem; } .flexbox { display:flex; justify-content: center; flex-wrap: wrap; } .flexbox.space { justify-content: space-between; } .flexbox.left { justify-content: start; } .flexbox a.box { display:block; width:100%; padding:1rem; margin-bottom: 1rem; } .flexbox.nowrap { flex-wrap: nowrap; } .flexbox .box100 { display:block; width:100%; padding:1rem 2rem; } .flexbox .box30 { display:block; width:100%; padding: 1rem; } .flexbox .box40 { display:block; width:100%; padding: 1rem; } .flexbox .box50 { display:block; width:100%; padding: 1rem; } .flexbox .box50.bggrau { background-color: var(--theme-light); } .flexbox .box60 { display:block; width:100%; padding: 1rem; } .flexbox .box70 { display:block; width:100%; padding: 1rem; } #shopLayer #dt-tooltip { background-color: var(--theme-text); color: var(--theme-white); padding: var(--padding); border-radius: var(--theme-radius-medium); } #aa_text *[onmouseover^="dT("] { cursor: help; text-decoration: underline; } /* Container für Bild + Button */ .slide-image-wrapper { position: relative; width: 100%; } /* Button AUF dem Bild zentriert */ .slide-image-wrapper .on-image { position: absolute; top: 50%; /* Vertikale Mitte */ left: 50%; /* Horizontale Mitte */ transform: translate(-50%, -50%); /* exakte Zentrierung */ display: inline-block; width: auto; /* KEIN 100%-Button! */ text-align: center; z-index: 10; } 
@media (min-width: 576px) { #k_title ul li:nth-child(3) { display: block; } #k_icons > div > .shBagInh { right: 0; } #kopf_top_line #slogan { display: block; } #k_logo { background-position: 50% 20%; } #powermenue-schalter { margin-right: 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: .5rem 1rem 1rem 0; } #shopFooter #f_text { padding: 2rem; } .sm-hide { display: none; } .sm-block { display: block; } tr.sm-block { display: table-row; } body { --padding: 1rem; } }
@media (min-width: 768px) { .shopHeader { position: relative; } html { scroll-padding-top: 2rem; } h1 { font-size: 1.5em; } h2 { font-size: 1.5em; } h3 { font-size: 1.25em; } #kopf_top_line #slogan { bottom: .5rem; } #k_title ul li:nth-child(4) { 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_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;} #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; } }
@media (min-width: 992px) { html { scroll-padding-top: 7rem; } #k_men_zeile { height: 3rem; background-color: var(--theme-text); } #kopf_top_line #slogan { bottom: 1rem; } #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); } #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%; } .foot_infos > ul { width: 25%; } .foot_infos ul.soc, .foot_infos ul.pay { width: 50%; } .foot_infos ul.soc { justify-content: end; } .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; } .flexbox .box30 { width:32%; padding: 1rem 2rem; margin: 0 2% 2% 0; } .flexbox .box30:nth-child(3n) { margin-right: 0; } .flexbox .box40 { width:40%; padding: 1rem 2rem; } .flexbox .box50 { width:50%; padding-left: 2rem; } .flexbox .box50-border { width:49%; padding: 1rem 2rem; margin: 0 2% 2% 0; } .flexbox .box50-border:nth-child(2n) { margin-right: 0; } .flexbox .box60 { width:60%; padding: 1rem 2rem; } .flexbox .box70 { width:68%; padding: 1rem 2rem; } }
@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 { width: 20%; } .xl-hide { display: none; } .xl-block { display: block; } tr.xl-block { display: table-row; } .video_start {width:50%;} .advent_tooltipp { width: 50%; left: 25%; top: 2rem; } }
@media (min-width: 1400px) { .xxxl-hide { display: none; } .xxxl-block { display: block; } tr.xxxl-block { display: table-row; } }
/* ### htm ### */
.grid-2 { display: grid; grid-template-columns: 1fr; grid-gap: var(--padding); } .grid-6, .grid-4 { display: grid; grid-template-columns: 1fr 1fr; grid-gap: var(--padding); } .center { text-align: center; } .row-span-2 { grid-row: span 2; } .col-span-2 { grid-column: span 2; } .grid-2 .row-span-2 { grid-row: span 1; } .grid-2 .col-span-2 { grid-column: span 1; } .card picture img { width: 100%; height: auto; } .card span.text1 { position: absolute; bottom: 10%; left: 0; display: inline-block; background-color: rgba(0,0,0,.5); font-size: 1.25rem; padding: 0.5rem 1rem; color: var(--theme-white); font-family: 'Header-Font'; } .card span.text1 + picture:after { content: " "; position: absolute; bottom: 0; left: 0; right: 0; background-color: var(--theme-text); height: 0.4rem; display: none; } .grid-1 .card span.text1 { font-size: 2rem; bottom: 40%; right: 0; border-radius: 0; } .grid-1 .card span.text1a { display: block; font-size: 1.25rem; text-align: right; } .grid-2 .card span.text1 { right: 0; left: auto; } #faq_loesung .faq { background-color: var(--theme-light); padding: var(--padding); margin: 1rem 0; border: var(--theme-border); border-radius: var(--theme-radius-small); box-shadow: var(--shadow-elevation-low); } #faq_loesung .faq_title { font-weight: bold; color: var(--theme-accent-medium); } #faq_loesung .faq_text { padding-left: 1rem; } #faq_start { margin-top: 2rem; } .faq_wrapper { margin-bottom: 2rem; } .special { padding: 2rem 0; background-color: var(--theme-card-background); box-shadow: var(--shadow-elevation-medium); margin-bottom: 2rem; } .ausrichter p { text-align: left; } .starttext h1, .starttext h2 { text-align: left; } .start_box h2 { margin-bottom: .5rem; text-align: left; } .html_herst_liste { display: grid; grid-template-columns: repeat(6, 1fr); grid-gap: 0.2rem; } .html_herst_liste_box { text-align: center; background-color: var(--theme-medium); color: var(--theme-text); border-radius: var(--theme-radius-small); padding: .5rem 1rem; } .html_herst_liste_box:hover { background-color: var(--theme-accent);} .alle_her_box { overflow:hidden; border: var(--theme-border); background-color: var(--theme-card-background); border-radius: var(--theme-radius-small); margin-bottom: 2rem; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 1rem; padding: 1rem; } .he_first { background-color: var(--theme-medium); color: var(--theme-text); border-radius: var(--theme-radius-small); padding: .5rem 1rem;} .faq_wrapper details { margin-bottom: var(--padding); } .faq_wrapper details[open] summary { border-bottom: var(--theme-divider); padding-bottom: var(--padding); } .faq_wrapper details p { font-style: italic; } .htm_include { margin-bottom: 2rem; } .htm_include nav ul li a.alvl_1 {font-size: 1rem;padding: .5rem;display: block; background-color: var(--theme-light); white-space: nowrap;} .htm_include nav ul li > div {margin-bottom:2rem;} .htm_include nav .lvl_1 {width: 100%; } .htm_include nav .lvl_1 > li {list-style:none;margin-bottom: .15rem;} .htm_include nav .lvl_1 > li.head {font-size:1.25rem; padding: .5rem; background-color: var(--theme-accent-light); margin-bottom: .15rem ;} .htm_include nav ul li a {line-height: 1.5rem; color: var(--theme-text); } .htm_include nav ul li.active a { background-color: var(--theme-accent-light); color: var(--theme-text); } .htm_include nav ul li a:hover { color: var(--theme-text-hover); } .htm_include p a, .start_text p a, .banner_suchergebnis p a, .htm_include tr td a, .htm_include form label a, .htm_include ul.mleft li a { color: var(--theme-accent-dark); border-bottom: 1px dotted var(--theme-accent-dark); } .htm_include p a:hover, .start_text p a:hover, .banner_suchergebnis p a:hover, .htm_include tr td a:hover, .htm_include form label a:hover, .htm_include ul.mleft li a:hover { color: var(--theme-text-hover); border-bottom: 1px dotted var(--theme-text-hover); } .flex-box .flex-menu nav ul { margin: 0; } .flex-box .flex-menu nav ul li h1 { margin: 0; font-size: 1.5em; } .flex-box .flex-content { width: 100%; } .flex-box .flex-content img.full { margin: 0; } .zul_anges_art { display:none; } .start_service {display: flex;flex-wrap: wrap;width: 100%;justify-content: space-between;background-color: var(--theme-light);padding: 1rem;margin: auto;box-sizing: border-box;} .start_service a {width: 100%;height: 100%;padding: 5.5rem 0 1rem 0;background-position: 50% 1rem; background-size: 4rem; background-repeat: no-repeat; } .start_service a.box1 {background-image: url(/img/bg-merkliste.svg); } .start_service a.box2 {background-image: url(/img/bg-merkliste.svg); } .start_service a.box3 { background-image: url(/img/bg-merkliste.svg); } .start_service span { width: 100%;display: block;padding: .2rem;box-sizing: border-box;text-align: center; color: var(--theme-text); } .start_service span.tex1 { font-size: 1.25rem;letter-spacing: 0.10em;text-transform: uppercase;color: var(--theme-accent-dark); } .start_service span.tex2 { font-size: 1rem; } .faq_url_gruppe { font-size: 1.25rem; text-align: left;border-bottom: var(--theme-divider); padding-bottom: 1rem; } .faq_url_frage { font-size: 1rem; display: block;padding-left: 1.5rem;position: relative;transition: 0.4s;} .faq_url_frage:hover { color: var(--theme-text-hover); } .faq_url_frage_aktiv { font-size:1.15rem; color: var(--theme-text-hover); font-weight: bold; padding: 1rem; background-color: var(--theme-light); } .faq_url_gruppe, .faq_url_frage { margin-bottom: 1.25rem; color: var(--theme-text); } .faq_url_gruppe:hover, .faq_url_frage:hover { } .faq_url_frage_aktiv { margin-bottom: 0; } .faq_url_antwort { margin-bottom: 2rem; padding: 0 1rem 1rem 1rem; background-color: var(--theme-light); } .faq-abstand { width:100%;height:2rem; } .faq_url_antwort a { color: var(--theme-accent); } .faq_url_antwort a:hover { color: var(--theme-text-hover); } .faq_url_antwort ul { margin-top:1rem; } .faq_url_antwort ul li { line-height: 1.5rem; list-style: disc; margin: .5rem 0 .5rem 2rem; } .faq_url_antwort ul.se.list_se { max-width:100%; } .faq_url_antwort ul li.art_box { list-style:none; margin: 1% 2% 1% 0; width: 32%; } .faq_url_antwort ul li.art_box:nth-child(3n) { margin-right:0; } .faq_url_antwort p { margin:0 0 1rem 0; line-height: 1.5rem; } .faq_url_antwort h3 { margin-top:2rem; } .faq_url_frage:before { display:inline-block; content:''; width:1.5rem; height:1.25rem; background:url(/img/pfeil_down.svg) no-repeat 0 80%; background-size: 1rem;position: absolute;left: 0;} .faq_url_frage.faq_url_frage_aktiv:before { display:none; } .faq .button-group { grid-template-columns: 1fr; margin-bottom: 2rem; } .start_zeit { background-color: var(--theme-accent); padding: 1rem!important; text-align: center; } #html-blog .grid-4 { grid-template-columns: 1fr; } .blog_vorschau h2 { overflow: hidden; text-overflow: ellipsis; font-size: 1.25rem; } .blogtext a { color: var(--theme-link); } .blogtext .mehr { text-decoration: underline; text-decoration-color: var(--theme-accent-dark); text-decoration-thickness: 2px; transition: all 0.5s; } .blogtext .text h2 { height: auto; } .blog_archiv { background: var(--theme-dark); padding: 1.5rem; border-radius: var(--theme-radius-small); box-shadow: var(--shadow-elevation-medium); margin-bottom: 1rem; } .blog_archiv_ul { margin: .5rem 0 0 0; } .blog_vorschau.card { padding: .5rem 1.5rem; border: var(--theme-divider); } .flex-blog-archiv.card .blog_vorschau.card { padding: 0; box-shadow: unset; border: unset; } .blog_archiv_news_ul { display: grid; grid-gap: var(--padding); grid-template-columns: 1fr; } .blog_archiv h3 { margin: 0; } .blog_archiv_ul li { margin-left: 1rem; } .blog_archiv_ul li a:hover, .blog_zuruck a:hover, .blogtext .mehr:hover { color: var(--theme-accent-dark); } .htm_include { padding: 1rem 0!important; } .art_box { border: var(--theme-divider) !important; } /* wochenangebot */ .zweispalten { display: flex; flex-wrap: wrap; border: var(--theme-divider); } .sidebox { flex: 100%; width: 100%; padding: 1rem; padding: 1rem; background-color: var(--theme-white);} .mainbox { flex: 100%; padding: 1rem; background: var(--theme-white); width: 100%; background: -moz-linear-gradient(left, #FFFFFF 0%, #FFFFFF 37%, #C6C6C6 100%); background: -webkit-linear-gradient(left, #FFFFFF 0%, #FFFFFF 37%, #C6C6C6 100%); background: linear-gradient(to right, #FFFFFF 0%, #FFFFFF 37%, #C6C6C6 100%);} .mainbox .button { display: block; width: max-content; margin: 1rem auto 1.5rem auto; } .mainbox .namo { text-align: center; } .mainbox p { margin: 0; } .rabatt { position: absolute; left: -83px; transform: rotate(90deg); top: 7rem; background: var(--theme-error); border-top-left-radius: 1rem; border-top-right-radius: 1rem; z-index:3; } .rabatt p { padding: 1rem; font-size: 1.8rem; color: var(--theme-white); text-align: center !important; margin: 0; font-weight: bold;} .uhr { position: relative; left: 50%; transform: translate(-50%); border: var(--theme-divider); padding: .25rem; width: max-content; background: var(--theme-white); } #wochenangebot div[data-restlaufzeit] {display: flex;justify-content: space-between;padding: 0 2%;} #wochenangebot .taStMiSe i { padding: 0 .5rem; } .sidebox > a { display: block; position: relative; height: 100%; width: 100%; min-height: 18rem;} .sidebox > a > img { position: absolute; top: 25%; margin: 0 0 0 2rem;} .sidebox img { max-height: 350px; max-width: 275px; } .start_text ul li { width: 100%; display: flex; padding: .5rem 0 .5rem 1rem; } .start_text ul li:before { content: ''; width: 1rem; height: auto; background: url(/img/bg-li.png) no-repeat 50%; margin-right: .5rem; background-size: 1rem; } .start_2a { width:100%; display:flex; flex-wrap:wrap; } .start_2a #start-blog { width: 100%; background-color: var(--theme-text); padding:1rem; } .start_2a #start-blog a { height: 100%; height: 100%; display: block; color: var(--theme-white); text-align: center; font-size:2rem; white-space: nowrap;} .start_2a #start-blog a span { font-size: 1rem; } .start_2a #start-kontakt { width: 100%; background-color: var(--theme-accent-dark); padding: 2rem 1rem; background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"  viewBox="0 0 40 40" style="enable-background:new 0 0 40 40;" xml:space="preserve"><style type="text/css"> .st0{fill:rgb(255,255,255);}</style><g> <g>  <g> <g>  <path class="st0" d="M20,2c9.9,0,18,8.1,18,18s-8.1,18-18,18S2,29.9,2,20S10.1,2,20,2 M20,0C9,0,0,9,0,20c0,11,9,20,20,20   c11,0,20-9,20-20C40,9,31,0,20,0L20,0z"/> </g>  </g> </g> <path class="st0" d="M14.4,9.8c1.2-0.2,2,1.1,2.6,2.1c0.6,0.9,1.3,2,1,3.2c-0.2,0.7-0.8,1-1.2,1.4c-0.4,0.4-1.1,0.7-1.3,1.3  c-0.3,1,0.3,2,0.7,2.6c0.8,1.3,1.8,2.5,3.1,3.5c0.6,0.5,1.5,1.2,2.4,1c1.3-0.3,1.6-1.9,3-2.1c1.3-0.2,2.3,0.8,3,1.4  c0.7,0.6,1.9,1.4,1.8,2.5c0,0.6-0.5,1-1,1.4c-0.4,0.4-0.8,0.8-1.3,1.1c-1.1,0.7-2.3,1-3.8,1c-1.5,0-2.6-0.5-3.7-1.1  c-2.1-1.1-3.7-2.6-5.2-4.3c-1.5-1.7-2.9-3.7-3.7-5.9c-1-2.8-0.5-5.6,1.1-7.4c0.3-0.3,0.7-0.6,1.1-0.9C13.5,10.3,13.8,9.9,14.4,9.8z  "/></g></svg>'); background-repeat: no-repeat; background-size: 5rem 5rem; background-position: 92% 14%; } .start_2a #start-kontakt span {color: var(--theme-white); } #start-kontakt .text-1 { display: block; font-size: 1.25rem; margin: 0 5rem 1.5rem 0; } #start-kontakt .text-1a { display: block; font-size: 1rem; margin-bottom:.5rem; padding-top: 1rem; clear:both; } #start-kontakt .text-um .text-2 {float: left;width: 50%;} #start-kontakt .text-um .text-3 {float: right;width: 50%;} #start-kontakt .text-um .text-3 a {color:rgb(255,255,255);} #start-kontakt .text-um .text-3 a:hover {color:rgb(10,10,10);} #start-kontakt .text-um {line-height: 1.5rem;} .htm_include.kontakt .flexbox { border-bottom: var(--theme-divider); border-left: var(--theme-divider); margin-bottom: 2rem; } .htm_include.kontakt .flexbox img.alignleft { width: 300px; } .htm_include.kontakt .flexbox div { padding: 0 0 1rem 1rem; } .versandinfos .zahlart-text { width:100%; padding:.5rem; background-color: var(--theme-accent-dark); color: var(--theme-white); } .versandinfos img.zahlpic { padding: 0 2rem 1rem 0; width: 10rem; height: auto; } .versandinfos .flexbox { padding: 1rem 1rem 2rem 0; } .htm_include.info h4 { font-size: 1.25rem; text-transform: none; margin: 3rem 0 1rem 0; background: var(--theme-light); padding: 1rem 0; text-align: center; } .htm_include.info .pdfdown {display:inline-block;background: var(--theme-light) url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"  viewBox="0 0 72.7 96.7" style="enable-background:new 0 0 72.7 96.7;" xml:space="preserve"><style type="text/css"> .st0{fill:rgb(60,60,60);} .st1{fill:%23EE3E36;} .st2{fill:none;}</style><g> <path class="st0" d="M55.8,96.7H6.5c-3.6,0-6.5-2.9-6.5-6.5V20c0-3.6,2.9-6.5,6.5-6.5h28.7c3.2,0,7.4,1.7,9.6,4L58.4,31  c2.2,2.2,4,6.4,4,9.6v49.6C62.3,93.8,59.4,96.7,55.8,96.7z M6.5,16.5C4.6,16.5,3,18,3,20v70.2c0,1.9,1.6,3.5,3.5,3.5h49.3  c1.9,0,3.5-1.6,3.5-3.5V40.6c0-2.3-1.4-5.8-3.1-7.5L42.7,19.6c-1.6-1.6-5.1-3.1-7.5-3.1H6.5z"/></g><g> <path class="st0" d="M55.8,37.1H45.2c-3.6,0-6.5-2.9-6.5-6.5V20c0-3,1.6-4.1,3-4.1c1,0,2.1,0.5,3.1,1.6L58.4,31  c1.9,1.9,1.7,3.4,1.4,4.1C59.4,35.8,58.5,37.1,55.8,37.1z M41.9,18.9c-0.1,0.2-0.1,0.5-0.1,1v10.6c0,1.9,1.6,3.5,3.5,3.5h10.6  c0.6,0,0.9-0.1,1-0.1c-0.1-0.2-0.2-0.4-0.6-0.8L42.7,19.6C42.3,19.2,42,19,41.9,18.9z"/></g><g> <path class="st1" d="M60.8,26c-0.4,0-0.8-0.2-1.1-0.5L49.3,13.8c-0.4-0.4-0.5-1.1-0.2-1.6c0.2-0.5,0.8-0.9,1.4-0.9h3.7V1.5  c0-0.8,0.7-1.5,1.5-1.5H66c0.8,0,1.5,0.7,1.5,1.5v9.8h3.7c0.6,0,1.1,0.3,1.4,0.9c0.2,0.5,0.1,1.2-0.2,1.6L62,25.5  C61.7,25.8,61.3,26,60.8,26z M53.8,14.3l7,8l7-8H66c-0.8,0-1.5-0.7-1.5-1.5V3h-7.3v9.8c0,0.8-0.7,1.5-1.5,1.5H53.8z"/></g><g> <path class="st0" d="M19.4,81.1h-2.6V85c0,0.6-0.1,1-0.4,1.3s-0.6,0.4-1,0.4s-0.8-0.1-1-0.4C14.1,86,14,85.6,14,85V74.4  c0-0.6,0.1-1.1,0.4-1.3c0.3-0.3,0.7-0.4,1.4-0.4h3.6c1.1,0,1.9,0.1,2.5,0.2c0.6,0.2,1.1,0.4,1.5,0.8s0.7,0.8,0.9,1.3  c0.2,0.5,0.3,1.1,0.3,1.8c0,1.4-0.4,2.5-1.3,3.2C22.4,80.8,21.1,81.1,19.4,81.1z M18.7,74.8h-1.9V79h1.9c0.7,0,1.2-0.1,1.7-0.2  c0.4-0.1,0.8-0.4,1-0.7c0.2-0.3,0.3-0.7,0.3-1.2c0-0.6-0.2-1.1-0.5-1.5C20.8,75,20,74.8,18.7,74.8z"/> <path class="st0" d="M28.7,72.7h3.7c1,0,1.8,0.1,2.5,0.3s1.3,0.5,1.9,1c1.4,1.2,2.2,3.1,2.2,5.6c0,0.8-0.1,1.6-0.2,2.3  c-0.1,0.7-0.4,1.3-0.7,1.9s-0.7,1-1.2,1.5c-0.4,0.3-0.8,0.6-1.2,0.8c-0.4,0.2-0.9,0.3-1.4,0.4s-1.1,0.1-1.7,0.1h-3.7  c-0.5,0-0.9-0.1-1.2-0.2s-0.4-0.4-0.5-0.7C27,85.4,27,85,27,84.6V74.4c0-0.6,0.1-1,0.4-1.3C27.6,72.8,28.1,72.7,28.7,72.7z M29.8,74.9v9.4h2.1c0.5,0,0.8,0,1.1,0s0.5-0.1,0.8-0.2s0.5-0.2,0.7-0.4c0.9-0.8,1.4-2.2,1.4-4.1c0-1.4-0.2-2.4-0.6-3.1  c-0.4-0.7-0.9-1.1-1.5-1.3c-0.6-0.2-1.3-0.3-2.2-0.3H29.8L29.8,74.9z"/> <path class="st0" d="M49.6,74.8h-5.5v3.6h4.6c0.4,0,0.7,0.1,1,0.3c0.2,0.2,0.3,0.4,0.3,0.8c0,0.3-0.1,0.6-0.3,0.8s-0.5,0.3-1,0.3  h-4.6v4.6c0,0.6-0.1,1-0.4,1.3s-0.6,0.4-1,0.4s-0.8-0.1-1-0.4c-0.3-0.3-0.4-0.7-0.4-1.3V74.4c0-0.4,0.1-0.7,0.2-1  c0.1-0.3,0.3-0.4,0.6-0.6c0.3-0.1,0.6-0.2,1-0.2h6.6c0.4,0,0.8,0.1,1,0.3s0.3,0.5,0.3,0.8s-0.1,0.6-0.3,0.8S50,74.8,49.6,74.8z"/></g><g> <path class="st1" d="M12,68.1c-1.5,0-2.6-0.7-3.2-2C8,64,9.2,61.2,12.2,58.3c2.3-2.3,5.6-4.1,9.7-5.6c2.2-4,4.2-8.4,5.6-12.1  c-3.1-4.8-3.7-10.8-2.6-14.2c0.7-2.2,1.9-3,2.8-3.3c1.3-0.4,2.5-0.1,3.4,0.9c1.3,1.4,1.8,4.4,1.5,8.9c-0.1,1.8-0.7,4.2-1.8,7.2  c0,0.1,0.1,0.1,0.1,0.2c0.7,0.9,1.5,1.8,2.2,2.8c1.7,2.1,3.6,4.5,5.5,6.6c0.6,0,1.1,0,1.6,0c6.8,0,11.4,1.4,12.9,4  c0.6,1.1,0.6,2.3,0,3.4c-0.8,1.4-2.6,2.3-4.8,2.3l0,0c-0.5,0-1.1-0.1-1.6-0.2c-2.7-0.5-5.7-2.6-9.4-6.5c-0.9,0.1-1.9,0.1-2.9,0.2  c-2.2,0.2-6.3,0.8-10.6,2.1c-1.8,3.3-5.7,9.9-8.7,11.8C14.2,67.7,13.1,68.1,12,68.1z M19.5,56.9c-2.1,1-3.8,2.2-5.2,3.5  c-2.6,2.6-2.8,4.2-2.7,4.6c0,0.1,0.2,0.1,0.4,0.1c0.4,0,1-0.2,1.6-0.6C15,63.6,17.1,60.8,19.5,56.9z M41.6,52.8  c2.3,2.1,4.2,3.3,5.8,3.6c0.4,0.1,0.7,0.1,1.1,0.1l0,0c1.2,0,2-0.4,2.2-0.8c0-0.1,0.1-0.2,0-0.4C50.1,54.4,47.7,53,41.6,52.8z M29.6,43.4c-1,2.6-2.3,5.4-3.7,8.1c3.4-0.9,6.6-1.2,8.4-1.4c0.2,0,0.5,0,0.7-0.1c-1.4-1.7-2.8-3.4-4.1-5  C30.4,44.5,30,43.9,29.6,43.4z M28.8,26h-0.1c-0.3,0.1-0.7,0.6-0.9,1.4c-0.7,2.2-0.4,5.9,1.1,9.3c0.5-1.6,0.8-3,0.8-4  c0.4-5-0.5-6.4-0.7-6.6C28.8,26,28.8,26,28.8,26z"/></g><rect id="_x3C_Slice_x3E__11_" x="-33.9" y="-10.4" class="st2" width="128" height="128"/></svg>') no-repeat 1.5rem 50%;background-size:2rem;padding:2rem 2rem 2rem 4rem;margin:2rem 0;border-radius:1rem;} .htm_include.info .youtub {display:inline-block;background: var(--theme-light) url('data:image/svg+xml,<svg width="159" height="110" xmlns="http://www.w3.org/2000/svg"><path d="m154 17.5c-1.82-6.73-7.07-12-13.8-13.8-9.04-3.49-96.6-5.2-122 0.1-6.73 1.82-12 7.07-13.8 13.8-4.08 17.9-4.39 56.6 0.1 74.9 1.82 6.73 7.07 12 13.8 13.8 17.9 4.12 103 4.7 122 0 6.73-1.82 12-7.07 13.8-13.8 4.35-19.5 4.66-55.8-0.1-75z" fill="%23f00"/><path d="m105 55-40.8-23.4v46.8z" fill="%23fff"/></svg>') no-repeat 1.5rem 50%;background-size:2rem;padding:2rem 2rem 2rem 4rem;margin:2rem 0;border-radius:1rem;} .htm_include.info .button { display: block; width: max-content; margin: 1rem auto; } .banner-btn { display: inline-block; padding: 16px 32px; background-color: #d60000; /* kräftiges Rot */ color: #ffffff; font-size: 20px; font-weight: bold; text-transform: uppercase; /* ALLE BUCHSTABEN GROSS */ text-decoration: none; border-radius: 6px; transition: all 0.3s ease; position: absolute; top: 30px; /* Abstand vom oberen Rand */ right: 30px; /* Abstand vom rechten Rand */ z-index: 10; } /* === Roter Banner-Button (#B00000) mit Bewegung & Glow === */ .banner-btn { display: inline-block; background-color: #B00000; /* kräftiges Rot */ color: #fff; text-transform: uppercase; font-weight: 700; letter-spacing: 1px; padding: 14px 32px; border-radius: 10px; text-decoration: none; position: absolute; top: 30px; right: 30px; box-shadow: 0 0 25px rgba(176, 0, 0, 0.6); animation: bounceGlow 1.8s infinite ease-in-out; transition: all 0.3s ease; cursor: pointer; } /* kräftiger Bounce + leichtes Glühen */ @keyframes bounceGlow { 0%, 100% { transform: translateY(0); box-shadow: 0 0 20px rgba(176, 0, 0, 0.6); } 25% { transform: translateY(-10px); box-shadow: 0 0 35px rgba(176, 0, 0, 0.9); } 50% { transform: translateY(0); box-shadow: 0 0 25px rgba(176, 0, 0, 0.5); } 75% { transform: translateY(-5px); box-shadow: 0 0 30px rgba(176, 0, 0, 0.8); } } /* Hover: bleibt rot, hebt sich leicht ab */ .banner-btn:hover { background-color: #B00000; box-shadow: 0 0 40px rgba(176, 0, 0, 1); transform: scale(1.08); color: #fff; } /* Sticky unter der Navi */ .ts-sticky-top{ position: -webkit-sticky; /* Safari */ position: sticky; top: 72px; /* ggf. 64–96 anpassen */ z-index: 3000; background:#fff; padding: 8px 0; box-shadow: 0 2px 12px rgba(0,0,0,.08); } /* Widget sichtbar machen */ .ts-widget etrusted-widget{ display:block; width:100%; } /* Wichtig: Eltern-Overflows erlauben, sonst greift sticky nicht */ #shopMain, section.special, .start-slider, .se_slider, .slides{ overflow: visible !important; } /* Sticky-Leiste über volle Breite */ .ts-sticky-top{ position: -webkit-sticky; position: sticky; top: 72px; /* ggf. 64–96 px anpassen, damit es exakt unter der schwarzen Leiste sitzt */ z-index: 3000; background: #fff; padding: 6px 0; box-shadow: 0 2px 12px rgba(0,0,0,.08); } /* (Alternative) Feste Leiste statt sticky – falls du das nutzt: .ts-fixed{ position: fixed; left:0; right:0; top:72px; z-index:3000; background:#fff; box-shadow:0 2px 12px rgba(0,0,0,.12); } */ /* Widget immer blockig & 100% breit */ .ts-sticky-top etrusted-widget, .ts-fixed etrusted-widget{ display: block; width: 100%; } /* Variante A: optisch flacher machen (nur Höhe stauchen) */ .ts-thin{ transform: scaleY(.80); /* 0.90–0.80 testen, wie dünn du willst */ transform-origin: top center; /* staucht nach unten */ margin-bottom: -18px; /* neg. Abstand gleicht den „leeren Raum“ aus – ggf. -12 bis -28px feinjustieren */ } /* (Optional) Variante B: statt stauchen einfach „clippen“ – nimmt unten was weg .ts-thin-clip{ overflow: hidden; max-height: 150px; } /* Höhe nach Wunsch (140–170px) */ */ /* Sticky-Falle entschärfen: Eltern müssen overflow:visible haben */ #shopMain, .start-slider, .se_slider, .slides{ overflow: visible !important; } /* Mobil: lieber nicht sticky (oder ohne Stauchung) */ @media (max-width:768px){ .ts-sticky-top{ position: static; box-shadow: none; } .ts-thin{ transform: none; margin-bottom: 0; } } /* MOBILE: kompakter CTA oben rechts auf dem Banner */ @media (max-width: 768px){ .banner-btn{ position: absolute; top: 10px; right: 10px; font-size: 13px; /* war 14–16px */ padding: 8px 12px; /* war größer */ border-radius: 12px; background: rgba(176,0,0,.92);/* etwas transparenter wirkt leichter */ box-shadow: 0 4px 12px rgba(176,0,0,.25); gap: .4rem; line-height: 1.05; } /* Emojis auf Mobile ausblenden, wirkt ruhiger */ .banner-btn::before, .banner-btn::after{ display:none; } /* Animation abschwächen/entfernen */ .banner-btn{ animation:none; } } .card.jahresziel-banner picture, .card.jahresziel-banner img { display: block; width: 100%; height: auto; margin: 0 auto; } .video_start { opacity: 0; transform: translateY(-40px); transition: opacity 0.7s ease-out, transform 0.7s ease-out; } .video_start.is-visible { opacity: 1; transform: translateY(0); } img[src*="carbonscout-yearlygoal-2025"] { max-width: 900px; width: 100%; height: auto; margin: 0 auto; display: block; } /* Gesamter Container: Artikel des Monats */ .artikel-des-monats { border: 3px solid #000; /* schwarze Umrandung */ border-radius: 12px; /* leicht abgerundete Ecken */ padding: 1.5rem; /* innen Luft */ margin: 2rem 0; /* Abstand nach oben/unten */ box-shadow: 0 4px 16px rgba(0,0,0,0.15); /* dezenter Schatten */ background: #fff; /* weißer Hintergrund, falls Seite grau o.ä. ist */ } /* Überschrift im Container */ .artikel-des-monats__headline { font-size: 1.6rem; text-align: center; margin: 0 0 1.5rem 0; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: rgb(0,105,180); /* &#128309; Website-Blau */ } /* Pulsier-Effekt für Artikel des Monats Container */ .Offer of the month{ border: 3px solid #000; border-radius: 12px; padding: 1.5rem; margin: 2rem 0; background: #fff; animation: pulsieren 2s infinite ease-in-out; } @keyframes pulsieren { 0% { transform: scale(1); } 50% { transform: scale(1.03); } /* 3% größer */ 100% { transform: scale(1); } } .kategoriekarte { display: flex; flex-direction: column; overflow: hidden; text-decoration: none; } .kat_text { padding: 1rem; text-align: center; } .kat_text h3 { margin-bottom: 0.5rem; color: #0064B5; font-size: 1.2rem; } .kat_text p { font-size: 0.95rem; line-height: 1.4; color: #444; } .uhr div[data-restlaufzeit] *{ display:inline !important; } .uhr div[data-restlaufzeit]{ white-space:nowrap !important; text-align:center; } /* Neuer Carbonscout-Startseitenbereich */ .start-slider .cs-homehero { position: relative; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1.5fr) minmax(220px, 0.58fr); width: 100%; min-width: 0; min-height: 430px; align-items: stretch; overflow: hidden; background: #f5f8fc; color: #111820; box-sizing: border-box; isolation: isolate; } .start-slider .cs-homehero::before, .start-slider .cs-homehero::after { position: absolute; z-index: -1; display: block; content: ""; pointer-events: none; border-radius: 50%; } .start-slider .cs-homehero::before { top: -22%; left: -8%; width: 34%; aspect-ratio: 1; background: rgba(0, 91, 169, 0.06); } .start-slider .cs-homehero::after { right: 16%; bottom: -38%; width: 28%; aspect-ratio: 1; background: rgba(0, 91, 169, 0.045); } /* Linker Textbereich */ .start-slider .cs-homehero__intro { display: flex; min-width: 0; padding: clamp(30px, 3vw, 54px); align-items: center; background: linear-gradient( 145deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 250, 253, 0.96) 66%, rgba(230, 240, 249, 0.9) 100% ); box-sizing: border-box; } .start-slider .cs-homehero__intro-inner { width: 100%; min-width: 0; max-width: 620px; } .start-slider .cs-homehero__heading { margin: 0; color: #111820; font-family: inherit; font-size: clamp(2rem, 2.25vw, 2.75rem); font-weight: 800; line-height: 1.03; letter-spacing: -0.035em; } .start-slider .cs-homehero__heading-primary { display: block; font-size: 1.18em; line-height: 1; white-space: nowrap; } .start-slider .cs-homehero__heading-accent { display: block; margin-top: 0.2em; color: #005ba9; font-size: 1em; line-height: 1.05; } .start-slider .cs-homehero__subheading { max-width: 34rem; margin: clamp(18px, 2vw, 28px) 0 0; color: #3b4650; font-family: inherit; font-size: clamp(0.83rem, 1vw, 1rem); font-weight: 700; line-height: 1.45; letter-spacing: 0.055em; } .start-slider .cs-homehero__assortment-link { display: inline-flex; max-width: 100%; min-height: 48px; margin-top: clamp(24px, 2.6vw, 36px); padding: 13px 24px; align-items: center; justify-content: center; border: 2px solid #005ba9; border-radius: 4px; background: #005ba9; color: #ffffff; font-family: inherit; font-size: 0.86rem; font-weight: 750; line-height: 1.2; letter-spacing: 0.045em; text-align: center; text-decoration: none; box-sizing: border-box; transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease; } .start-slider .cs-homehero__assortment-link:hover { border-color: #004983; background: #004983; color: #ffffff; text-decoration: none; transform: translateY(-1px); } /* Mittleres Carbonbild */ .start-slider .cs-homehero__visual { position: relative; display: flex; min-width: 0; min-height: 430px; align-items: center; justify-content: center; overflow: hidden; background: #111111; } .start-slider .cs-homehero__picture { display: block; width: 100%; height: 100%; min-width: 0; } .start-slider .cs-homehero__main-image { position: static; display: block; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; object-position: center center; transform: none; } /* Rechte Aktionsspalte */ .start-slider .cs-homehero__actions { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(150px, 1fr) auto; width: 100%; min-width: 0; gap: 14px; padding: clamp(18px, 1.6vw, 26px); align-items: stretch; align-content: stretch; justify-items: stretch; overflow: hidden; background: #ffffff; box-sizing: border-box; } /* News */ .start-slider .cs-homehero__news-link { position: static; display: flex; width: 100%; max-width: 100%; min-width: 0; min-height: 46px; margin: 0; padding: 11px 10px; align-items: center; justify-content: center; gap: 7px; overflow-wrap: anywhere; border: 2px solid #c8242f; border-radius: 4px; background: #c8242f; color: #ffffff; font-family: inherit; font-size: clamp(0.7rem, 0.8vw, 0.86rem); font-weight: 750; line-height: 1.2; letter-spacing: 0.02em; text-align: center; text-decoration: none; white-space: normal; box-sizing: border-box; transform: none; transition: background-color 180ms ease, border-color 180ms ease; } .start-slider .cs-homehero__news-link:hover { border-color: #a91d27; background: #a91d27; color: #ffffff; text-decoration: none; } /* Online-Broschüre */ .start-slider .cs-homehero__brochure-link { position: static; display: flex; width: 100%; min-width: 0; min-height: 150px; margin: 0; padding: 10px; align-items: center; justify-content: center; overflow: hidden; border: 1px solid #dce3e8; border-radius: 4px; background: #f8fafc; text-decoration: none; box-sizing: border-box; transform: none; transition: border-color 180ms ease, box-shadow 180ms ease; } .start-slider .cs-homehero__brochure-link:hover { border-color: #9ebbd3; box-shadow: 0 7px 18px rgba(17, 24, 32, 0.09); } .start-slider .cs-homehero__brochure-image { position: static; display: block; width: auto; height: auto; max-width: 100%; max-height: 210px; margin: auto; object-fit: contain; object-position: center center; opacity: 1; visibility: visible; transform: none; } /* Bayerns Best 50 */ .start-slider .cs-homehero__award-link { position: static; display: flex; width: 100%; min-width: 0; min-height: 120px; margin: 0; padding: 10px 6px; align-items: center; justify-content: center; overflow: hidden; border: 1px solid #e2e7eb; border-radius: 4px; background: #ffffff; text-decoration: none; box-sizing: border-box; transform: none; transition: border-color 180ms ease, box-shadow 180ms ease; } .start-slider .cs-homehero__award-link:hover { border-color: #9ebbd3; box-shadow: 0 7px 18px rgba(17, 24, 32, 0.09); } .start-slider .cs-homehero__award-image { position: static; display: block; width: 100%; height: auto; max-width: 100%; max-height: 155px; margin: auto; object-fit: contain; object-position: center center; opacity: 1; visibility: visible; transform: none; } /* Tastaturbedienung */ .start-slider .cs-homehero__assortment-link:focus-visible, .start-slider .cs-homehero__news-link:focus-visible, .start-slider .cs-homehero__brochure-link:focus-visible, .start-slider .cs-homehero__award-link:focus-visible { outline: 3px solid #ffbf47; outline-offset: 3px; } /* Tablet */ @media (min-width: 700px) and (max-width: 1099px) { .start-slider .cs-homehero { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr); min-height: 0; } .start-slider .cs-homehero__intro { padding: clamp(28px, 4.2vw, 48px); } .start-slider .cs-homehero__heading { font-size: clamp(1.65rem, 3.2vw, 2.35rem); } .start-slider .cs-homehero__heading-primary { white-space: normal; } .start-slider .cs-homehero__visual { min-height: 390px; } .start-slider .cs-homehero__actions { grid-column: 1 / -1; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: minmax(150px, auto); gap: 16px; padding: 20px clamp(24px, 4vw, 42px); align-items: stretch; } .start-slider .cs-homehero__news-link { align-self: center; } .start-slider .cs-homehero__brochure-link, .start-slider .cs-homehero__award-link { min-height: 150px; } .start-slider .cs-homehero__brochure-image, .start-slider .cs-homehero__award-image { max-height: 135px; } } /* Smartphone */ @media (max-width: 699px) { .start-slider .cs-homehero { grid-template-columns: minmax(0, 1fr); min-height: 0; } .start-slider .cs-homehero::before { top: -5%; left: -25%; width: 85%; } .start-slider .cs-homehero::after { display: none; } .start-slider .cs-homehero__intro { padding: 32px 22px 30px; } .start-slider .cs-homehero__heading { font-size: clamp(1.6rem, 8vw, 2.35rem); line-height: 1.06; } .start-slider .cs-homehero__heading-primary { font-size: 1.06em; white-space: normal; } .start-slider .cs-homehero__heading-accent { font-size: 0.94em; } .start-slider .cs-homehero__subheading { font-size: 0.82rem; } .start-slider .cs-homehero__assortment-link { width: 100%; min-height: 50px; padding-right: 16px; padding-left: 16px; } .start-slider .cs-homehero__visual { min-height: 0; aspect-ratio: 760 / 326; } .start-slider .cs-homehero__actions { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; width: 100%; gap: 16px; padding: 22px; } .start-slider .cs-homehero__news-link { min-height: 50px; font-size: 0.82rem; } .start-slider .cs-homehero__brochure-link, .start-slider .cs-homehero__award-link { min-height: 130px; } .start-slider .cs-homehero__brochure-image { max-height: 260px; } .start-slider .cs-homehero__award-image { width: auto; max-width: 100%; max-height: 170px; } } /* Sehr kleine Smartphones */ @media (max-width: 360px) { .start-slider .cs-homehero__intro, .start-slider .cs-homehero__actions { padding-right: 16px; padding-left: 16px; } .start-slider .cs-homehero__heading { font-size: 1.5rem; } } /* Reduzierte Bewegung */ @media (prefers-reduced-motion: reduce) { .start-slider .cs-homehero__assortment-link, .start-slider .cs-homehero__news-link, .start-slider .cs-homehero__brochure-link, .start-slider .cs-homehero__award-link { transition: none; } .start-slider .cs-homehero__assortment-link:hover { transform: none; } } /* Finale Desktop-Ausrichtung des Startseiten-Heros */ @media (min-width: 1100px) { .start-slider .cs-homehero { grid-template-columns: minmax(420px, 0.95fr) minmax(0, 1.65fr) minmax(240px, 0.44fr); } .start-slider .cs-homehero__main-image { object-position: 52% center; } .start-slider .cs-homehero__actions { gap: 12px; padding: 20px 16px; } .start-slider .cs-homehero__brochure-link { min-height: 140px; padding: 8px; } .start-slider .cs-homehero__brochure-image { width: auto; height: auto; max-width: 88%; max-height: 145px; } .start-slider .cs-homehero__award-link { min-height: 110px; padding: 8px 5px; } .start-slider .cs-homehero__award-image { width: auto; height: auto; max-width: 94%; max-height: 125px; } } /* Schwarzes Carbonbild auf dem Desktop weiter nach links setzen */ @media (min-width: 1100px) { .start-slider .cs-homehero { grid-template-columns: minmax(380px, 0.8fr) minmax(0, 1.72fr) minmax(240px, 0.44fr); } .start-slider .cs-homehero__main-image { object-position: center center; transform: none; } } /* Artikel des Monats auf dem Desktop über die Seitenbreite */ @media (min-width: 1100px) { section.ausrichter > section#deutsch.artikel-des-monats { position: relative; left: 50%; width: calc(100vw - 32px); max-width: none; margin-top: 16px; margin-right: 0; margin-left: 0; box-sizing: border-box; transform: translateX(-50%); } } 
@media (min-width: 576px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-2 .row-span-2 { grid-row: span 2; } .grid-2 .col-span-2 { grid-column: span 2; } .grid-6 { grid-template-columns: repeat(3, 1fr); } .alle_her_box { grid-template-columns: repeat(3, 1fr); } .html_herst_liste { display: grid; grid-template-columns: repeat(8, 1fr); } .faq .button-group { grid-template-columns: 1fr 1fr; } .start_2a #start-kontakt { background-position: 96% 14%; padding: 2rem; } .sidebox > a > img { top: 50%; left: 50%; transform: translate(-50%, -50%); } .sidebox img { max-width: 350px; } }
@media (min-width: 768px) { .start_service a { width: 33.33%; } .grid-1 .card span.text1 { right: 5%; left: auto; font-size: 3rem; } .flex-box { display: flex; flex-wrap: nowrap; } .flex-box .flex-content h1 { margin-top: 0; } .flex-box .flex-menu { display: block; width: 17rem; margin-right: 1rem;} .faq .button-group { grid-template-columns: 1fr 1fr 1fr; } #html-blog .grid-4 { grid-template-columns: 1fr 1fr; } .blog_archiv_news_ul { grid-template-columns: 1fr 1fr; } .blog_archiv { position: fixed; right: 0; top: 16%; z-index: 100; } .blog_vorschau h2 { } .blog_archiv { border-top-right-radius: 0; border-bottom-right-radius: 0; margin: 0; } #start-kontakt .text-um { width: 70%; } .jahresziel-banner picture, .jahresziel-banner img { display: block; width: 100%; max-width: 800px; height: auto; margin: 0 auto; }  }
@media (min-width: 992px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } .html_herst_liste { grid-template-columns: repeat(14, 1fr); } .blog_archiv_news_ul { grid-template-columns: 1fr 1fr 1fr; } .sidebox { flex: 50%; } .mainbox { flex: 50%; } .start_2a { flex-wrap: unset; } .start_2a #start-blog, .start_2a #start-kontakt { width: auto; } .start_2a #start-blog { padding: 1rem 2rem; } .versandinfos .flexbox { flex-wrap: unset; } }
@media (min-width: 1200px) { .html_herst_liste { grid-template-columns: repeat(27, 1fr); } .alle_her_box { grid-template-columns: repeat(6, 1fr); } #html-blog .grid-4 { grid-template-columns: 1fr 1fr 1fr; } .blog_archiv_news_ul { grid-template-columns: 1fr 1fr 1fr 1fr; } /* Carbonscout Hero – kleinere Laptopansicht */ .start-slider .cs-homehero { grid-template-columns: minmax(380px, 0.9fr) minmax(0, 1.6fr) minmax(300px, 0.5fr); } .start-slider .cs-homehero__intro { padding: 28px 30px; } .start-slider .cs-homehero__heading { font-size: 25px; line-height: 1.06; letter-spacing: -0.02em; } .start-slider .cs-homehero__heading-primary { font-size: 25px; line-height: 1.06; white-space: nowrap; } .start-slider .cs-homehero__heading-accent { margin-top: 7px; font-size: 23px; line-height: 1.08; white-space: nowrap; } .start-slider .cs-homehero__subheading { margin-top: 21px; font-size: 11px; line-height: 1.4; letter-spacing: 0.035em; white-space: nowrap; } .start-slider .cs-homehero__assortment-link { margin-top: 25px; padding: 11px 17px; font-size: 0.74rem; } .start-slider .cs-homehero__actions { gap: 9px; padding: 14px 10px; } .start-slider .cs-homehero__brochure-image { width: auto; max-width: 84%; max-height: 135px; } .start-slider .cs-homehero__award-image { width: auto; max-width: 96%; max-height: 115px; } /* Carbonscout Hero – XL Laptopansicht */ .start-slider .cs-homehero { grid-template-columns: 420px minmax(0, 1fr) 420px; } /* Textblock links vollständig sichtbar */ .start-slider .cs-homehero__intro { min-width: 0; padding: 30px 24px; } .start-slider .cs-homehero__intro-inner { width: 100%; max-width: none; } .start-slider .cs-homehero__heading { font-size: 30px; line-height: 1.06; letter-spacing: -0.025em; } .start-slider .cs-homehero__heading-primary { display: block; font-size: 30px; line-height: 1.06; white-space: nowrap; } .start-slider .cs-homehero__heading-accent { display: block; margin-top: 8px; font-size: 26px; line-height: 1.08; white-space: nowrap; } .start-slider .cs-homehero__subheading { margin-top: 22px; font-size: 12px; line-height: 1.45; letter-spacing: 0.035em; white-space: nowrap; } .start-slider .cs-homehero__assortment-link { min-height: 46px; margin-top: 26px; padding: 12px 20px; font-size: 12px; } /* Schwarzes Bild beginnt nach der 420px breiten Textfläche */ .start-slider .cs-homehero__visual { min-width: 0; } .start-slider .cs-homehero__main-image { width: 100%; height: 100%; object-fit: cover; object-position: center center; transform: none; } /* Rechte Spalte kompakt halten */ .start-slider .cs-homehero__actions { gap: 9px; padding: 14px 10px; } .start-slider .cs-homehero__news-link { padding: 9px 6px; } .start-slider .cs-homehero__brochure-image { width: auto; max-width: 88%; max-height: 135px; } .start-slider .cs-homehero__award-image { width: auto; max-width: 96%; max-height: 115px; } }
/* ### kachel ### */
body { --kachel-max-height: 22rem; } ul.se { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: min-content; grid-gap: var(--padding); list-style: none; margin: 0; padding: 0; grid-auto-flow: dense; } ul.se.suche.mb-4 { margin-bottom: 2rem; } .art_box, .se_banner { height: var(--kachel-max-height); display: block; position: relative; border: var(--theme-divider); box-shadow: var(--shadow-elevation-medium); background-color: var(--theme-card-background); border-radius: var(--theme-radius-small); overflow: hidden; transition: all .3s ease-out; will-change: transform; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); } ul.se > li:hover:not(.se_banner):not(.no_hover) { box-shadow: var(--shadow-elevation-high); transform: translateY(-.2rem) translateZ(0); } .art_box > .se_kachel { display: block; height: 100%; } .art_box > .se_kachel > div { position: relative; height: 100%; } ul.se > li.se_banner_hersteller > a > img { min-height: 40%; object-fit: contain; padding: .5rem; border-bottom: var(--theme-divider); } .se_kachel .rat_stars { position: absolute; top: 11rem; display: flex; justify-content: center; width: 100%; transition: all .1s ease-out; } .se_kachel:hover .rat_stars { opacity: 1; filter: grayscale(0); } .art_box > .se_kachel > div > figure { margin: 0; text-align: center; transition: transform .3s ease-out; background-color: white; } .art_box > .se_kachel > div > figure img { width: 12rem; height: 10rem; object-fit: contain; margin: 1rem 0; } ul.se > li > a > div > .se_header, .art_box > .se_kachel > div > .se_header { position: absolute; top: 0; left: 0; right: 0; z-index: 1; } .se_diff { display: block; height: 2rem; width: 3.5rem; background-color: var(--theme-error); color: rgb(255,255,255); line-height: 2rem; text-align: center; border-bottom-right-radius: var(--theme-radius-medium); font-size: 1rem; margin-top: 0; } .suchtemp_azu_her { float: right; } .cs_azu { height: 3rem; width: 3rem; background-size: 100%; background-repeat: no-repeat; background-position: center; margin: 0.5rem; } /* azu icons */ .cs_azu[title] { cursor: help; } .cs_azu.azu5 { background-image: url('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 66.6 49.5" style="enable-background:new 0 0 66.6 49.5;" xml:space="preserve"><style type="text/css"> .st0{fill:rgb(10,10,10);} .st1{fill:rgb(0,105,180);}</style><g> <path class="st0" d="M20.1,25.7h-3.4L2.6,4.1H2.5c0.2,2.5,0.3,4.9,0.3,7v14.6H0V0h3.4l14,21.5h0.1c0-0.3-0.1-1.3-0.2-3  s-0.1-2.9-0.1-3.7V0h2.8V25.7z"/> <path class="st0" d="M41.5,25.7H27.1V0h14.3v2.7H30.1v8.3h10.7v2.6H30.1V23h11.3V25.7z"/> <path class="st0" d="M66.6,0v16.6c0,2.9-0.9,5.2-2.7,6.9s-4.2,2.5-7.3,2.5s-5.5-0.8-7.2-2.5s-2.5-4-2.5-7V0h3v16.8  c0,2.1,0.6,3.8,1.8,4.9s2.9,1.7,5.2,1.7c2.2,0,3.8-0.6,5-1.7s1.8-2.8,1.8-5V0H66.6z"/></g><g> <path class="st1" d="M0.3,33c0-0.3,0.1-0.6,0.2-0.7S0.9,32,1.1,32c0.2,0,0.4,0.1,0.6,0.2S2,32.6,2,33s-0.1,0.6-0.3,0.7  c-0.2,0.2-0.4,0.2-0.6,0.2c-0.2,0-0.5-0.1-0.6-0.2C0.3,33.5,0.3,33.3,0.3,33z M1.8,45.2H0.4v-9.6h1.5V45.2z"/> <path class="st1" d="M17.2,45.2v-6.3c0-0.8-0.2-1.3-0.5-1.7c-0.3-0.4-0.8-0.6-1.5-0.6c-0.9,0-1.6,0.3-2,0.8s-0.7,1.3-0.7,2.4v5.4  h-1.5v-6.3c0-0.8-0.2-1.3-0.5-1.7c-0.3-0.4-0.8-0.6-1.5-0.6c-0.9,0-1.6,0.3-2,0.8c-0.4,0.5-0.6,1.4-0.6,2.7v5.1H4.9v-9.6h1.2  l0.2,1.3h0.1c0.3-0.5,0.7-0.8,1.2-1.1s1.1-0.4,1.7-0.4c1.5,0,2.5,0.5,3,1.6h0.1c0.3-0.5,0.7-0.9,1.2-1.2s1.2-0.4,1.9-0.4  c1.1,0,1.9,0.3,2.4,0.8s0.8,1.5,0.8,2.7v6.3H17.2z"/> <path class="st1" d="M33.8,41.8c0,1.1-0.4,2-1.2,2.6s-1.9,0.9-3.3,0.9c-1.5,0-2.7-0.2-3.5-0.6v-1.4c0.5,0.2,1.1,0.4,1.7,0.5  s1.2,0.2,1.8,0.2c1,0,1.7-0.2,2.3-0.6c0.5-0.4,0.8-0.9,0.8-1.6c0-0.4-0.1-0.8-0.3-1.1c-0.2-0.3-0.5-0.5-0.9-0.8s-1.1-0.5-1.9-0.8  c-1.2-0.4-2-0.9-2.6-1.5s-0.8-1.4-0.8-2.3c0-1,0.4-1.8,1.1-2.4s1.7-0.9,3-0.9c1.3,0,2.5,0.2,3.5,0.7L33,34.2  c-1.1-0.4-2.1-0.7-3.1-0.7c-0.8,0-1.4,0.2-1.9,0.5s-0.7,0.8-0.7,1.4c0,0.4,0.1,0.8,0.2,1.1c0.2,0.3,0.4,0.5,0.8,0.8  c0.4,0.2,1,0.5,1.8,0.8c1.3,0.5,2.3,1,2.8,1.5S33.8,40.9,33.8,41.8z"/> <path class="st1" d="M42.8,45.2V39c0-0.8-0.2-1.4-0.5-1.8s-0.9-0.6-1.7-0.6c-1,0-1.8,0.3-2.2,0.8s-0.7,1.5-0.7,2.7v5h-1.5V31.5h1.5  v4.1c0,0.5,0,0.9-0.1,1.2h0.1c0.3-0.5,0.7-0.8,1.2-1.1c0.5-0.3,1.1-0.4,1.8-0.4c1.2,0,2.1,0.3,2.7,0.8c0.6,0.6,0.9,1.4,0.9,2.7v6.3  H42.8z"/> <path class="st1" d="M55.6,40.4c0,1.6-0.4,2.8-1.2,3.7s-1.9,1.3-3.3,1.3c-0.9,0-1.6-0.2-2.3-0.6s-1.2-1-1.5-1.7s-0.5-1.6-0.5-2.7  c0-1.6,0.4-2.8,1.2-3.7s1.9-1.3,3.3-1.3c1.3,0,2.4,0.4,3.2,1.3S55.6,38.8,55.6,40.4z M48.3,40.4c0,1.2,0.2,2.2,0.7,2.8s1.2,1,2.2,1  s1.7-0.3,2.2-1c0.5-0.6,0.7-1.6,0.7-2.8c0-1.2-0.2-2.2-0.7-2.8c-0.5-0.6-1.2-1-2.2-1c-1,0-1.7,0.3-2.2,0.9S48.3,39.1,48.3,40.4z"/> <path class="st1" d="M62.6,45.4c-0.6,0-1.2-0.1-1.7-0.3c-0.5-0.2-1-0.6-1.3-1.1h-0.1c0.1,0.6,0.1,1.1,0.1,1.6v4h-1.5v-14h1.2  l0.2,1.3h0.1c0.4-0.5,0.8-0.9,1.3-1.1s1.1-0.4,1.7-0.4c1.3,0,2.3,0.4,3,1.3c0.7,0.9,1,2.1,1,3.7c0,1.6-0.4,2.8-1.1,3.7  C64.9,44.9,63.9,45.4,62.6,45.4z M62.4,36.6c-1,0-1.7,0.3-2.1,0.8s-0.7,1.4-0.7,2.6v0.3c0,1.4,0.2,2.3,0.7,2.9s1.2,0.9,2.2,0.9  c0.8,0,1.5-0.3,2-1s0.7-1.6,0.7-2.8c0-1.2-0.2-2.1-0.7-2.8C63.9,37,63.3,36.6,62.4,36.6z"/></g></svg>'); } .se_unten { display: flex; flex-direction: column; align-content: space-between; justify-content: space-evenly; position: absolute; top: 11rem; left: 0; right: 0; bottom: 0; } .se_name { height: 6rem; line-height: normal; } .se_name span { display: block; text-align: center; padding: 0 .25rem; color: var(--theme-text); text-wrap: balance; } .se-minanz { display: block; text-align: center; font-size: .8rem; } .se_preis { height: 5rem; } .se_preis .se_vk { display: block; color: var(--theme-text); font-size: 1rem; text-align: center; font-weight: bold; white-space: nowrap; } .se-preis .cur { text-transform: uppercase; } .se_preis .se_vk s { display: block; color: var(--theme-text); font-weight: 300; font-size: 1rem; font-size: inherit; margin: 0 .25rem; } .se_preis .se_litp { display: block; text-align: center; color: var(--theme-text); } .se_preis .se_litp br { display: none; } li .se_preis .se_vk s { opacity: .5; transition: opacity .1s ease-out; } li .se_preis .se_litp { opacity: .8; transition: opacity .1s ease-out; font-size: .8rem; } li:hover .se_preis .se_vk s, li:hover .se_preis .se_litp { opacity: 1; } li:hover .se_preis .se_vk s, li:hover .se_preis .se_litp { opacity: 1; } ul.se li.se_banner { overflow-y: auto; padding: 0; margin: 0; } ul.se li.se_banner p, ul.se li.se_banner h2, ul.se li.se_banner h3 { padding: 0; } ul.se .banner { position: relative; height: 100%; width: 100%; } ul.se .banner > a { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-position: center; background-size: cover; padding: var(--padding); } ul.se .banner > a img { position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover; } ul.se li.se_banner.sb { padding: 0 1rem; } ul.se li.se_banner.sb h2 { margin-bottom: 0; } ul.se .banner > a > h2 { background: rgba(255,255,255,.5); position: absolute; z-index: 2; top: 0; text-align: center; padding: 1rem 2rem; text-shadow: var(--theme-text-shadow); } ul.se .banner > a .button { display: block; width: max-content; margin: 0 auto .5rem auto; text-shadow: none; } ul.se .banner > a > span { position: absolute; bottom: var(--padding); width: calc(100% - calc(var(--padding) * 2)); text-align: center; text-shadow: 1px 1px 2px black; } ul.se .banner > a > span.se_text { color: var(--theme-white); top: 0; } ul.se .banner > a > span.se_text h2 { margin-bottom: 0; color: var(--theme-white); font-size: 1.2rem; } ul.se .banner > a > span.se_text h3 { margin: 0; color: var(--theme-white); } ul.se .banner span.prozent { background-color: rgb(202,24,19); padding: .5rem; border-radius: 2rem; text-shadow: none; } ul.se .banner .bigger { font-size: 1.25rem; } ul.se li.se_banner p { margin: .25rem 0; } ul.se .banner > img { margin: var(--padding) 25%; } ul.se > li.se_banner.gr_2x1, ul.se > li.se_banner.gr_2x2 { height: calc(calc(var(--kachel-max-height) * 1.5) + var(--padding)); } ul.slides { width: calc(100% * var(--slides)); height: 100%; margin: 0; padding: 0; list-style: none; overflow: hidden; display: flex; transition: transform .3s ease-out; } ul.slides > li { width: calc(100% / var(--slides)); height: 100%; } ul.slides > li > a { display: block; width: 100%; height: 100%; position: relative; } ul.slides .banner img, ul.slides > li a img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; } ul.slides .banner { z-index: 2; display: flex; flex-direction: column; justify-content: space-around; align-items: center; } ul.slides .banner > div > h3 { margin: 0; font-size: 2em; text-shadow: var(--theme-text-shadow); } ul.slides .banner > div { text-align: center; } ul.slides .banner > div > .subtitle { opacity: .8; text-shadow: var(--theme-text-shadow); } ul.slides-nav { position: absolute; bottom: 0; left: 0; right: 0; padding: var(--padding); list-style: none; display: flex; justify-content: center; margin: 0; z-index: 3; gap: var(--padding); } ul.slides-nav > li { height: 1.5rem; width: 1.5rem; line-height: 1.5rem; text-align: center; background-color: var(--theme-light); color: var(--theme-text); border-radius: 50%; cursor: pointer; } ul.slides-nav > li.active { background-color: var(--theme-accent-medium); color: var(--theme-accent-text); } ul.se > li .quick-buy, ul.se > li > a.se_beobachten { position: absolute; top: calc(19.5rem - var(--padding)); right: .5rem; height: 2rem; width: 2rem; border-radius: 50%; transform: translateY(50%); opacity: 1; transition: all .5s ease-out; z-index: 2; background-size: 75%; background-position: center; background-repeat: no-repeat; cursor: pointer; background-image: url(/img/bg-merkliste.svg); transition-delay: .2s; } ul.se > li:hover .quick-buy, ul.se > li:hover .se_beobachten, ul.se > li > a.se_beobachten.active { opacity: 1; } ul.se > li > a.se_beobachten.active { 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:rgb(0,105,180);stroke:rgb(0,105,180);stroke-width:0.5;stroke-miterlimit:10;}</style><g id="heart"> <path class="st0" d="M52.7,35.1C52.5,35.3,33.8,55,33.8,55c-2,2.1-5.3,2.1-7.3,0c0,0-17-18-18.8-20c-6.4-6.7-6.4-17.7,0-24.4  c6.2-6.5,16.1-6.7,22.5-0.5c6.4-6.2,16.3-6.1,22.5,0.5C59.1,17.3,59.1,28.3,52.7,35.1z"/></g></svg>'); } ul.se > li .quick-buy { right: 4.5rem; transform: translateX(50%); transition-delay: 1.2s; transition-duration: .4s; 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 57.7 51.2" style="enable-background:new 0 0 57.7 51.2;" xml:space="preserve"><style type="text/css"> .st0{fill:rgb(60,60,60);}</style><g> <g>  <path class="st0" d="M50,37.3H16.5c-0.8,0-1.5-0.5-1.8-1.3L5.4,7.4L0.6,3.2c-0.8-0.7-0.8-1.8-0.2-2.6c0.7-0.8,1.8-0.8,2.6-0.2 L8.3,5c0.3,0.2,0.4,0.5,0.5,0.8l9,27.8h30.7l4.9-20.5H15.2c-1,0-1.8-0.8-1.8-1.8s0.8-1.8,1.8-1.8h40.7c0.6,0,1.1,0.3,1.5,0.7 c0.3,0.4,0.5,1,0.3,1.6l-5.8,24.2C51.6,36.7,50.9,37.3,50,37.3z"/> </g> <g>  <path class="st0" d="M47.4,25.2H18.6c-1,0-1.8-0.8-1.8-1.8c0-1,0.8-1.8,1.8-1.8h28.8c1,0,1.8,0.8,1.8,1.8 C49.3,24.4,48.4,25.2,47.4,25.2z"/> </g> <g>  <path class="st0" d="M19.2,51.2c-3.1,0-5.6-2.5-5.6-5.6c0-3.1,2.5-5.6,5.6-5.6c1,0,1.8,0.8,1.8,1.8c0,1-0.8,1.8-1.8,1.8 c-1,0-1.9,0.8-1.9,1.9c0,1,0.8,1.9,1.9,1.9c1,0,1.9-0.8,1.9-1.9c0-1,0.8-1.8,1.8-1.8c1,0,1.8,0.8,1.8,1.8 C24.8,48.7,22.3,51.2,19.2,51.2z"/> </g> <g>  <path class="st0" d="M45.6,51.2c-3.1,0-5.6-2.5-5.6-5.6c0-3.1,2.5-5.6,5.6-5.6c1,0,1.8,0.8,1.8,1.8c0,1-0.8,1.8-1.8,1.8 c-1,0-1.9,0.8-1.9,1.9c0,1,0.8,1.9,1.9,1.9c1,0,1.9-0.8,1.9-1.9c0-1,0.8-1.8,1.8-1.8s1.8,0.8,1.8,1.8 C51.2,48.7,48.7,51.2,45.6,51.2z"/> </g></g></svg>'); } .gr_1x2, .gr_2x2 { grid-column: span 2; } .gr_2x1, .gr_2x2 { grid-row: span 2; } .lief_gr_farbe_tab { position: absolute; top: 11rem; left: 0; right: 0; transform: translateY(-50%); } .lief_gr_farbe_tab ul { list-style: none; display: flex; flex-wrap: wrap; padding: 0; justify-content: center; gap: .3rem; margin-bottom: .3rem; } .lief_gr_farbe_tab ul li { height: 1.5rem; width: 1.5rem; text-align: center; line-height: 1.5rem; font-size: 0.8rem; border-radius: 50%; background-color: var(--theme-light); color: var(--theme-text); box-shadow: var(--shadow-elevation-medium); overflow: hidden; } #pag_se ul { list-style: none; padding: 0; display: flex; align-items: center; place-content: center; } #pag_se ul > li > div { height: 2.5rem; background-color: var(--theme-accent-medium); color: var(--theme-accent-text); padding: 0 1rem; line-height: 2.5rem; border-radius: var(--theme-radius-small); box-shadow: var(--shadow-elevation-medium); } #pag_se ul > li > #linkpagzur, #pag_se ul > li > #linkpagvor, #pag_se ul > li > #linkpag1 { cursor: pointer; display: block; height: 2.5rem; width: 2.5rem; background-color: var(--theme-accent-medium); border-radius: 20%; background-repeat: no-repeat; background-position: center; background-size: 32%; margin: 0 1rem; box-shadow: var(--shadow-elevation-medium); transition: box-shadow .3s ease-out;} #shopLayer #pag_se ul > .nopag { opacity: .5; } #pag_se ul > li > *[href]:hover { box-shadow: var(--shadow-elevation-high); } .pag{font-size: 1.2em !important;text-align: center;color: var(--theme-accent-text);align-items: center; place-content: center;} .se_farben .lief_gr_farbe1_k { cursor: pointer; margin: 0 .2rem; border-radius: 1rem; display: inline-block; height: 1rem; width: 1rem; filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.3)); transform: scale(1); } .se_farben .lief_gr_farbe1_k:hover, .se_farben .lief_gr_farbe1_k.active { transform: scale(1.3); -moz-transform: scale(1.3); -ms-transform: scale(1.3); -webkit-transform: scale(1.3); } .se_farben { position: absolute; top: 12rem; width: 100%; text-align: center; padding: .5rem; overflow: hidden; }
@media (min-width: 576px) { body { --grid-column-count: 6; --grid-item--min-width: 13rem; --kachel-max-height: 23rem; --gap-count: calc(var(--grid-column-count) - 1); --total-gap-width: calc(var(--gap-count) * var(--padding)); --grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count)); } ul.se { grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr)); } ul.se > li .quick-buy, ul.se > li > a.se_beobachten { top: calc(20.5rem - var(--padding)); } ul.se > li.se_banner.gr_2x1, ul.se > li.se_banner.gr_2x2 { height: calc(calc(var(--kachel-max-height) * 2) + var(--padding)); } .se_unten { top: 16rem; } .art_box > .se_kachel > div > figure img { height: 15rem; } .se_kachel .rat_stars { top: 14rem; } .se_preis .se_vk strike { margin: 0 .5rem; } .lief_gr_farbe_tab { top: 15rem; } .se_preis .se_vk s { float: left; } .se_preis .se_vk { display: flex; justify-content: center; }  }
@media (min-width: 768px) { body { --kachel-max-height: 24rem; } ul.se > li .quick-buy, ul.se > li > a.se_beobachten { top: calc(21.5rem - var(--padding));} #dd_sort_top, #filter_anzeigen { font-size: 1rem; } #pag_se ul > li > #linkpagzur, #pag_se ul > li > #linkpagvor, #pag_se ul > li > #linkpag1 { height: 2.5rem; width: 2.5rem; margin: 0 2rem; } ul.se .banner > a > span.se_text h2 { font-size: 1.5rem; } ul.se li.se_banner p { margin: 1rem 0; } ul.se .banner > a .button { margin-bottom: 1rem; } .se_unten { top: 16rem; } .se_name { height: 4rem; } }
@media (min-width: 992px) { body { --grid-item--min-width: 14rem; } ul.se > li .quick-buy, ul.se > li > a.se_beobachten { opacity: 0; background-color: var(--theme-card-background); box-shadow: var(--shadow-elevation-medium); } ul.se > li:hover .quick-buy, ul.se > li:hover .se_beobachten, ul.se > li > a.se_beobachten.active { transform: translateY(0); opacity: 1; } ul.se > li .quick-buy, ul.se > li > a.se_beobachten { right: 1rem; } ul.se > li .quick-buy, ul.se > li > a.se_beobachten { top: calc(22rem - var(--padding));}  }
@media (min-width: 1200px) { ul.se.row > li:nth-child(-n+5) { } }
@media (min-width: 1400px) { ul.se.row > li:nth-child(-n+6) { } }
/* ### 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 { display: flex; position: fixed; z-index: 99; top: 4rem; left: 0; right: 0; bottom: 0; background-color: var(--theme-white); overflow-y: auto; overflow-x: hidden; opacity: 0; visibility: hidden; transform: translateX(-2rem); transition: all .3s ease-out; } .powermenue-head li { border-bottom: var(--theme-divider); } .powermenue .powermenue-head li a { color: var(--theme-text); } nav.powermenue.open {opacity: 1;visibility: visible;transform: translateX(0);} #powermenue-strukturen-ueberschrift {display: flex;background-color: var(--theme-accent-medium);padding: 0.5rem 0;align-items: center;justify-content: center;} .powermenue-head { width: 100%;flex-direction: column; align-items: stretch;left: 0px;position: absolute; margin: 0; opacity: 1; pointer-events: all; transition: all .2s ease out; } .powermenue-head.hidden { opacity: 0; pointer-events: none; } .powermenue-head li { padding: 0 1rem; background-color: var(--theme-white); height: 4rem; margin: 0; margin-bottom: .1rem; display: flex;align-items: center;justify-content: space-between;cursor: pointer; } .powermenue-head a { font-size: 1.25rem; } .powermenue-head a:hover, .powermenue-modul-auflistung li a:hover, #shopLayer .powermenue .powermenue-strukturen a:hover { color: var(--theme-accent-medium); } .powermenue .powermenue-head li.powermenue-aktiv a { color: var(--theme-accent-dark); } .powermenue .powermenue-modul-auflistung li.powermenue-aktiv a { color: var(--theme-accent-dark); } .powermenue-strukturen {position: absolute;display: block;top: 0;left: 0;right: 0;bottom: 0;padding: 0;background-color: var( --theme-white);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 .powermenue-modul-ueberschrift { margin: 0; color: var(--theme-text); font-weight: bold; } .powermenue-modul-ueberschrift {display: block;width: 100%;margin-bottom:.5rem;} .powermenue-modul-ueberschrift-wrapper {background-color: var(--theme-light);padding: .25rem 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: 0 1rem 1rem 1rem; margin: 0; } .powermenue-modul-auflistung li.powermenue-aktiv a {color: var(--theme-accent-medium);} .powermenue .powermenue-modul-auflistung li a { padding: .25rem 0; color: var(--theme-text); } .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: 200px;max-height: 200px;object-fit: contain;} .powermenue-modul .powermenue-top-artikel-name {font-size: 1rem;} .powermenue-modul-icons {display: flex;flex-direction: row;flex-wrap: wrap;justify-content: flex-start;align-items: center;} .powermenue-modul-auflistung li.powermenue-top-artikel {background-color:rgb(255,255,255);border:1px solid rgb(221,221,221);padding:.5rem;box-sizing:border-box;margin-right:2rem;} .powermenue-top-artikel {width: 100%;} .powermenue-top-artikel a {align-items: center; } .powermenue-top-artikel-rechts .powermenue-top-artikel-preis {font-size: 1.5rem;} .powermenue-mehr-anzeigen-button {margin-bottom: 0.5rem; } .powermenue-modul-auflistung li a {display: flex;} .powermenue-top-marke img, .powermenue-top-artikel img {max-width: 100px;max-height: 100px;object-fit: contain;} .powermenue-top-artikel a {display: flex;align-items: center;justify-content: flex-start;} .powermenue-top-artikel-rechts {margin-left: 5px;} .powermenue-top-artikel-name {font-size: .8rem;margin-bottom: 10px;} .powermenue-top-artikel-preis {font-size: 1rem;} .powermenue-zwei-spalten-rechts {display: none;} .powermenue-mehr-anzeigen {display: none;} .powermenue-mehr-anzeigen-button {cursor: pointer;display: flex; align-items: center;justify-content: center;margin-top: .5rem;} .powermenue-pfeil-unten {margin-left: .5rem;transform: rotate(90deg);} #powermenue-zurueck {position: absolute;background: transparent url(/img/powermenue_arrow.svg) no-repeat 50% 50%;background-size: auto 50px;z-index: 1000;cursor: pointer;width: 4rem;height: 2rem;left: 0;padding: 1rem 1rem 1rem 0;} #powermenue-zurueck-text {font-size: 1.5rem;color: var(--theme-accent-text);} .powermenue-head-mobile-pfeil {display: none;} .alle-struktur-artikel-anzeigen {display: none; } .powermenue-zwei-spalten-links {display: flex;align-items: center;justify-content: flex-start;} .powermenue-pfeil-rechts {margin-left: 0.25rem;} .powermenue-modul-html img {max-width: 100%;} .powermenue-auflistung-hoch {font-weight: bold;} .powermenue-head-mobile-pfeil {display: block;background: transparent url(/img/powermenue_arrow.svg) no-repeat 50% 50%;background-size: auto 50px;width: 2rem;height: 2rem;transform: rotate(180deg); margin: 0; } .powermenue-modul[data-modul-typ='zwei-spalten-rechts'] { display: none; } .alle-struktur-artikel-anzeigen {display: flex;align-items: center;justify-content: space-between;width: 100%;margin: .1rem 0;padding: .5rem 1rem;box-sizing: border-box;background-color: var(--theme-accent-light);} .alle-struktur-artikel-anzeigen p:first-child { font-size: 1rem; 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-menuepunkt-8 a, #powermenue-menuepunkt-9 a { position: relative; } #powermenue-menuepunkt-8 a:after, #powermenue-menuepunkt-9 a:after { display: block; position: absolute; color: var(--theme-white); font-size: .9rem; padding: .15rem .25rem; border-radius: 1rem; width: 1.5rem; height: 1.5rem; top: .25rem; right: -2rem; text-align: center; } #powermenue-menuepunkt-8 a:after { content: '%'; background: rgb(202,24,19); } #powermenue-menuepunkt-9 a:after { content: '?'; background: rgb(0,105,180); } 
@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; background-color: var(--theme-powermenu-medium); opacity: 1; visibility: visible; position: relative; top: 0; background: none; transform: none; } .powermenue-head li { border-bottom: 0; } .powermenue .powermenue-head li a { color: var(--theme-white); } .powermenue .powermenue-head li a:hover { color: var(--theme-accent-dark); } #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; } #powermenue-menuepunkt-7 a, #powermenue-menuepunkt-8 a { padding-right: 2rem; } .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; padding: 1rem;box-sizing: border-box; } .powermenue-modul { width: 23%; margin: 0; } .powermenue-modul-ueberschrift-wrapper {display: flex;align-items: center;justify-content: flex-start;font-weight:bold; background-color: unset; } .powermenue-html-unten #alle-marken {float:right;} .powermenue-html-oben #alle-marken {float:right;} .powermenue-html-oben h1 {margin:0;} .powermenue-top-marke {width: 50%;justify-content: flex-start;justify-content: center;} .powermenue-icons-mit-text {width: 25%;} .powermenue-icons-mit-text img {width: 5rem;height: 5rem;} .powermenue-auflistung-mit-icon img, .powermenue-icons-mit-text img {width: 3.5rem;height: 3.5rem;} .powermenue-head-mobile-pfeil { display: none; } .alle-struktur-artikel-anzeigen { display: none; } #powermenue-strukturen-ueberschrift { display: none; } #powermenue-menuepunkt-8 a:after { top: 0; right: 0; } #powermenue-menuepunkt-9 a:after { top: 0; right: -1rem; } }
@media (min-width: 1200px) { .powermenue-head li a { padding: 0 2rem; } #powermenue-menuepunkt-9 a:after { right: 0; } }
/* ### search ### */
ul.se li em { font-weight: bold; font-style: normal; background-color: yellow !important; color: black !important; } .css_dropdown[data-group='ag'] { display: none; } #meili-search { min-height: 85vh; } #meili-search #meili-items li#faqs { grid-column: 1 / span 2; padding: var(--padding); height: auto; overflow-y: auto; } #meili-search #meili-items li#faqs p { padding: 0; } #meili-term:empty, #meili-active-filters:empty { display: none; } #meili-title { display: flex; align-items: baseline; justify-content: space-between; } #meili-filters { display: none; grid-template-columns: 1fr 1fr; grid-gap: var(--padding); margin-bottom: 2rem; } #meili-filters.open { display: grid; } #meili-filters > div { flex: 1; } #meili-filters .css_dropdown ul li label span { font-size: .8rem; opacity: .8; float: right; line-height: 1.5rem; } #meili-filter-toggle { display: none; } #meili-filter-toggle.visible { display: block; } #meili-active-filters { margin-bottom: var(--padding); } #meili-active-filters > button { margin-right: var(--padding); } #meili-placeholder, #meili-no-hits, #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; } .suche-struktur nav ul li { list-style: none; width: 49%; margin: 0 1% 1% 0; } .suche-struktur nav ul li a { display: block; background: var(--theme-dark); padding: .5rem; color: var(--theme-text); } .suche-struktur nav ul li a:hover { background: var(--theme-accent-dark); } .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);}
@media (min-width: 576px) { #meili-filters { grid-template-columns: repeat(3, 1fr); } #meili-search #meili-items li#faqs { height: var(--kachel-max-height); } }
@media (min-width: 768px) { #meili-filters { display: grid; grid-template-columns: repeat(4, 1fr); } #meili-filter-toggle.visible { display: none; } #meili-search #meili-items li#faqs { grid-column: 1 / span 3; } }
@media (min-width: 992px) { #meili-filters { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1200px) { #meili-filters { grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 1400px) { #meili-filters { grid-template-columns: repeat(7, 1fr); } }
/* ### kachel-slider ### */
.art_slider { list-style: none; padding: var(--padding); overflow-y: hidden; overflow-x: scroll; display: flex; scroll-snap-type: x proximity; scroll-padding: calc(var(--padding) - .6rem); scroll-behavior: smooth; margin-top: 0; } .art_slider .art_box { min-width: 17rem; margin-left: var(--padding); scroll-snap-align: start; } .art_slider_wrapper { position: relative; } .art_slider_wrapper button.art_slider_nav { display: none; } @media (pointer: fine) { .art_slider_wrapper button.art_slider_nav { position: absolute; display: block; left: 0rem; top: 50%; transform: translate(0%, -50%) rotate(180deg); height: 3rem; width: 3rem; padding: 0; border-radius: 50%; background-image: url(/img/artikel_weiter.svg); background-position: center; background-repeat: no-repeat; background-size: 30%; } .art_slider_wrapper button.art_slider_nav.slider_next { left: unset; right: -.5rem; transform: translate(0%, -50%) rotate(0deg); } }
/* ### meili-extra ### */
#meili-items-divider { margin-top: calc(var(--padding)* 2); text-align: center; font-weight: bold; border-bottom: var(--theme-divider); margin-bottom: var(--padding); font-size: 1.15rem; }
/* ### powermenue-extra ### */
@media (pointer: fine) { .powermenue-head.hidden { opacity: 1; pointer-events: all; } }
@media (min-width: 992px) { .powermenue-head.hidden { opacity: 1; pointer-events: all; } }