:root{--f-button-width: 40px;--f-button-height: 40px;--f-button-border: 0;--f-button-border-radius: 0;--f-button-color: #374151;--f-button-bg: #f8f8f8;--f-button-shadow: none;--f-button-transition: all .15s ease;--f-button-transform: none;--f-button-outline-width: 1px;--f-button-outline-color: rgba(0, 0, 0, .7);--f-button-svg-width: 20px;--f-button-svg-height: 20px;--f-button-svg-stroke-width: 1.5;--f-button-svg-fill: none;--f-button-svg-filter: none;--f-button-svg-opacity: 1;--f-button-svg-disabled-opacity: .5;--f-button-svg-transition: opacity .15s ease;--f-button-svg-transform: none}.f-button{width:var(--f-button-width);height:var(--f-button-height);border:var(--f-button-border);border-radius:var(--f-button-border-radius);color:var(--f-button-color);background:var(--f-button-bg);box-shadow:var(--f-button-shadow);transform:var(--f-button-transform);transition:var(--f-button-transition);backdrop-filter:var(--f-button-backdrop-filter);display:flex;justify-content:center;align-items:center;box-sizing:content-box;position:relative;margin:0;padding:0;pointer-events:all;cursor:pointer;overflow:hidden}@media (hover: hover){.f-button:hover:not([aria-disabled]){color:var(--f-button-hover-color, var(--f-button-color));background-color:var(--f-button-hover-bg, var(--f-button-bg))}}.f-button:active:not([aria-disabled]){color:var(--f-button-active-color, var(--f-button-hover-color, var(--f-button-color)));background-color:var(--f-button-active-bg, var(--f-button-hover-bg, var(--f-button-bg)))}.f-button:focus{outline:none}.f-button:focus-visible{outline:var(--f-button-outline-width) solid var(--f-button-outline-color);outline-offset:var(--f-button-outline-offset);position:relative;z-index:1}.f-button svg{width:var(--f-button-svg-width);height:var(--f-button-svg-height);transform:var(--f-button-svg-transform);fill:var(--f-button-svg-fill);filter:var(--f-button-svg-filter);opacity:var(--f-button-svg-opacity, 1);transition:var(--f-button-svg-transition);stroke:currentColor;stroke-width:var(--f-button-svg-stroke-width);stroke-linecap:round;stroke-linejoin:round;pointer-events:none}.f-button[aria-disabled]{cursor:default}.f-button[aria-disabled] svg{opacity:var(--f-button-svg-disabled-opacity)}[data-panzoom-action=toggleFS] g:first-child{display:flex}[data-panzoom-action=toggleFS] g:last-child{display:none}.in-fullscreen [data-panzoom-action=toggleFS] g:first-child{display:none}.in-fullscreen [data-panzoom-action=toggleFS] g:last-child{display:flex}[data-autoplay-action=toggle] svg g:first-child{display:flex}[data-autoplay-action=toggle] svg g:last-child{display:none}.has-autoplay [data-autoplay-action=toggle] svg g:first-child{display:none}.has-autoplay [data-autoplay-action=toggle] svg g:last-child{display:flex}:fullscreen [data-fullscreen-action=toggle] svg [data-fullscreen-action=toggle] svg g:first-child{display:none}:fullscreen [data-fullscreen-action=toggle] svg [data-fullscreen-action=toggle] svg g:last-child{display:flex}:root{--f-spinner-color-1: rgba(0, 0, 0, .1);--f-spinner-color-2: rgba(17, 24, 28, .8);--f-spinner-width: 50px;--f-spinner-height: 50px;--f-spinner-border-radius: 50%;--f-spinner-border-width: 4px}.f-spinner{position:absolute;top:50%;left:50%;margin:calc(var(--f-spinner-width) * -.5) 0 0 calc(var(--f-spinner-height) * -.5);padding:0;width:var(--f-spinner-width);height:var(--f-spinner-height);border-radius:var(--f-spinner-border-radius);border:var(--f-spinner-border-width) solid var(--f-spinner-color-1);border-top-color:var(--f-spinner-color-2);animation:f-spinner .75s linear infinite,f-fadeIn .2s ease .2s both}@keyframes f-spinner{to{transform:rotate(360deg)}}.f-panzoom,.f-zoomable{position:relative;overflow:hidden;display:flex;align-items:center;flex-direction:column}.f-panzoom:before,.f-panzoom:after,.f-zoomable:before,.f-zoomable:after{display:block;content:""}.f-panzoom:not(.has-controls):before,.f-zoomable:not(.has-controls):before{margin-bottom:auto}.f-panzoom:after,.f-zoomable:after{margin-top:auto}.f-panzoom.in-fullscreen,.f-zoomable.in-fullscreen{position:fixed;top:0;left:0;margin:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;aspect-ratio:unset!important;z-index:9999}.f-panzoom__wrapper{position:relative;min-width:0;min-height:0;max-width:100%;max-height:100%}.f-panzoom__wrapper.will-zoom-out{cursor:zoom-out}.f-panzoom__wrapper.can-drag{cursor:move;cursor:grab}.f-panzoom__wrapper.will-zoom-in{cursor:zoom-in}.f-panzoom__wrapper.is-dragging{cursor:move;cursor:grabbing}.f-panzoom__wrapper.has-error{display:none}.f-panzoom__content{display:block;min-width:0;min-height:0;max-width:100%;max-height:100%}.f-panzoom__content.is-lazyloading,.f-panzoom__content.has-lazyerror{visibility:hidden}img.f-panzoom__content{width:auto;height:auto;vertical-align:top;-o-object-fit:contain;object-fit:contain;transition:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.f-panzoom__wrapper>.f-panzoom__content{visibility:hidden}.f-panzoom__viewport{display:block;position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.f-panzoom__viewport>.f-panzoom__content{width:100%;height:100%;-o-object-fit:fill;object-fit:fill}picture.f-panzoom__content img{vertical-align:top;width:100%;height:auto;max-height:100%;-o-object-fit:contain;object-fit:contain;transition:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.f-panzoom__protected{position:absolute;inset:0;z-index:1;-webkit-user-select:none;-moz-user-select:none;user-select:none}html.with-panzoom-in-fullscreen{overflow:hidden}.f-fadeIn{animation:var(--f-transition-duration, .2s) var(--f-transition-easing, ease) var(--f-transition-delay, 0s) both f-fadeIn;z-index:2}.f-fadeOut{animation:var(--f-transition-duration, .2s) var(--f-transition-easing, ease) var(--f-transition-delay, 0s) both f-fadeOut;z-index:1}@keyframes f-fadeIn{0%{opacity:0}to{opacity:1}}@keyframes f-fadeOut{to{opacity:0}}.f-crossfadeIn{animation:var(--f-transition-duration, .2s) ease both f-crossfadeIn;z-index:2}.f-crossfadeOut{animation:calc(var(--f-transition-duration, .2s) * .2) ease calc(var(--f-transition-duration, .2s) * .8) both f-crossfadeOut;z-index:1}@keyframes f-crossfadeIn{0%{opacity:0}to{opacity:1}}@keyframes f-crossfadeOut{to{opacity:0}}.is-horizontal .f-slideIn.from-next{animation:var(--f-transition-duration, .85s) cubic-bezier(.16,1,.3,1) f-slideInNextX}.is-horizontal .f-slideIn.from-prev{animation:var(--f-transition-duration, .85s) cubic-bezier(.16,1,.3,1) f-slideInPrevX}.is-horizontal .f-slideOut.to-next{animation:var(--f-transition-duration, .85s) cubic-bezier(.16,1,.3,1) f-slideOutNextX}.is-horizontal .f-slideOut.to-prev{animation:var(--f-transition-duration, .85s) cubic-bezier(.16,1,.3,1) f-slideOutPrevX}@keyframes f-slideInPrevX{0%{transform:translate(calc(100% + var(--f-carousel-gap, 0)))}to{transform:translateZ(0)}}@keyframes f-slideInNextX{0%{transform:translate(calc(-100% - var(--f-carousel-gap, 0)))}to{transform:translateZ(0)}}@keyframes f-slideOutNextX{to{transform:translate(calc(-100% - var(--f-carousel-gap, 0)))}}@keyframes f-slideOutPrevX{to{transform:translate(calc(100% + var(--f-carousel-gap, 0)))}}.is-vertical .f-slideIn.from-next{animation:var(--f-transition-duration, .85s) cubic-bezier(.16,1,.3,1) f-slideInNextY}.is-vertical .f-slideIn.from-prev{animation:var(--f-transition-duration, .85s) cubic-bezier(.16,1,.3,1) f-slideInPrevY}.is-vertical .f-slideOut.to-next{animation:var(--f-transition-duration, .85s) cubic-bezier(.16,1,.3,1) f-slideOutNextY}.is-vertical .f-slideOut.to-prev{animation:var(--f-transition-duration, .85s) cubic-bezier(.16,1,.3,1) f-slideOutPrevY}@keyframes f-slideInPrevY{0%{transform:translateY(calc(100% + var(--f-carousel-gap, 0)))}to{transform:translateZ(0)}}@keyframes f-slideInNextY{0%{transform:translateY(calc(-100% - var(--f-carousel-gap, 0)))}to{transform:translateZ(0)}}@keyframes f-slideOutNextY{to{transform:translateY(calc(-100% - var(--f-carousel-gap, 0)))}}@keyframes f-slideOutPrevY{to{transform:translateY(calc(100% + var(--f-carousel-gap, 0)))}}.f-zoomInUp{animation:var(--f-transition-duration, .3s) ease both f-zoomInUp}.f-zoomOutDown{animation:var(--f-transition-duration, .3s) ease both f-zoomOutDown}@keyframes f-zoomInUp{0%{transform:scale(var(--f-zoomInUp-scale, .975)) translate3d(var(--f-zoomInUp-x, 0),var(--f-zoomInUp-y, 16px),0);opacity:var(--f-zoomInUp-opacity, 0)}to{transform:scale(1) translateZ(0);opacity:1}}@keyframes f-zoomOutDown{to{transform:scale(var(--f-zoomOutDown-scale, .975)) translate3d(var(--f-zoomOutDown-x, 0),var(--f-zoomOutDown-y, 16px),0);opacity:0}}.f-throwOutUp{animation:var(--f-throwOutUp-duration, .2s) ease-out both f-throwOutUp}.f-throwOutDown{animation:var(--f-throwOutDown-duration, .2s) ease-out both f-throwOutDown}@keyframes f-throwOutUp{to{transform:translate3d(0,calc(var(--f-throwOutUp-y, 150px) * -1),0);opacity:0}}@keyframes f-throwOutDown{to{transform:translate3d(0,var(--f-throwOutDown-y, 150px),0);opacity:0}}.has-iframe .f-html,.has-pdf .f-html,.has-gmap .f-html{width:100%;height:100%;min-height:1px;overflow:visible}.has-pdf .f-html,.has-gmap .f-html{padding:0}.f-html{position:relative;box-sizing:border-box;margin:var(--f-html-margin, 0);padding:var(--f-html-padding, 2rem);color:var(--f-html-color, currentColor);background:var(--f-html-bg)}.f-html.is-error{text-align:center}.f-iframe{display:block;margin:0;border:0;height:100%;width:100%}.f-caption{align-self:center;flex-shrink:0;margin:var(--f-caption-margin);padding:var(--f-caption-padding, 16px 8px);max-width:100%;max-height:calc(80vh - 100px);overflow:auto;overflow-wrap:anywhere;line-height:var(--f-caption-line-height);color:var(--f-caption-color);background:var(--f-caption-bg);font:var(--f-caption-font)}.has-html5video .f-html,.has-youtube .f-html,.has-vimeo .f-html{padding:0;width:100%;height:100%;min-height:1px;overflow:visible;max-width:var(--f-video-width, 960px);max-height:var(--f-video-height, 540px);aspect-ratio:var(--f-video-aspect-ratio);background:var(--f-video-bg, rgba(0, 0, 0, .9))}.f-html5video{border:0;display:block;height:100%;width:100%;background:transparent}.f-button.is-arrow{--f-button-width: var(--f-arrow-width, 46px);--f-button-height: var(--f-arrow-height, 46px);--f-button-svg-width: var(--f-arrow-svg-width, 24px);--f-button-svg-height: var(--f-arrow-svg-height, 24px);--f-button-svg-stroke-width: var(--f-arrow-svg-stroke-width, 1.75);--f-button-border-radius: var(--f-arrow-border-radius, unset);--f-button-bg: var(--f-arrow-bg, transparent);--f-button-hover-bg: var(--f-arrow-hover-bg, var(--f-arrow-bg));--f-button-active-bg: var(--f-arrow-active-bg, var(--f-arrow-hover-bg));--f-button-shadow: var(--f-arrow-shadow);--f-button-color: var(--f-arrow-color);--f-button-hover-color: var(--f-arrow-hover-color, var(--f-arrow-color));--f-button-active-color: var( --f-arrow-active-color, var(--f-arrow-hover-color) );overflow:visible}.f-button.is-arrow.is-prev,.f-button.is-arrow.is-next{position:absolute;transform:translate(0);z-index:20}.is-horizontal .f-button.is-arrow.is-prev,.is-horizontal .f-button.is-arrow.is-next{inset:50% auto auto;transform:translateY(-50%)}.is-horizontal.is-ltr .f-button.is-arrow.is-prev{left:var(--f-arrow-pos, 0)}.is-horizontal.is-ltr .f-button.is-arrow.is-next{right:var(--f-arrow-pos, 0)}.is-horizontal.is-rtl .f-button.is-arrow.is-prev{right:var(--f-arrow-pos, 0);transform:translateY(-50%) rotateY(180deg)}.is-horizontal.is-rtl .f-button.is-arrow.is-next{left:var(--f-arrow-pos, 0);transform:translateY(-50%) rotateY(180deg)}.is-vertical.is-ltr .f-button.is-arrow.is-prev,.is-vertical.is-rtl .f-button.is-arrow.is-prev{top:var(--f-arrow-pos, 0);right:auto;bottom:auto;left:50%;transform:translate(-50%)}.is-vertical.is-ltr .f-button.is-arrow.is-next,.is-vertical.is-rtl .f-button.is-arrow.is-next{top:auto;right:auto;bottom:var(--f-arrow-pos, 0);left:50%;transform:translate(-50%)}.is-vertical .f-button.is-arrow.is-prev svg,.is-vertical .f-button.is-arrow.is-next svg{transform:rotate(90deg)}.f-carousel__toolbar{display:grid;grid-template-columns:1fr auto 1fr;margin:var(--f-toolbar-margin, 0);padding:var(--f-toolbar-padding, 8px);line-height:var(--f-toolbar-line-height);background:var(--f-toolbar-bg, none);box-shadow:var(--f-toolbar-shadow, none);backdrop-filter:var(--f-toolbar-backdrop-filter);position:relative;z-index:20;color:var(--f-toolbar-color, currentColor);font-size:var(--f-toolbar-font-size, 17px);font-weight:var(--f-toolbar-font-weight, inherit);font-family:var(--f-toolbar-font, -apple-system, BlinkMacSystemFont, "Segoe UI Adjusted", "Segoe UI", "Liberation Sans", sans-serif);text-shadow:var(--f-toolbar-text-shadow);text-align:center;font-variant-numeric:tabular-nums;-webkit-font-smoothing:subpixel-antialiased;white-space:nowrap;pointer-events:none}.f-carousel__toolbar.is-absolute{position:absolute;top:0;left:0;right:0}.f-carousel__toolbar__column{display:flex;flex-direction:row;flex-wrap:wrap;align-content:flex-start;gap:var(--f-toolbar-gap, 0);pointer-events:none}.f-carousel__toolbar__column.is-left{justify-self:flex-start;justify-content:flex-start}.f-carousel__toolbar__column.is-middle{justify-content:center}.f-carousel__toolbar__column.is-right{justify-self:flex-end;justify-content:flex-end;flex-flow:nowrap}.f-carousel__toolbar__column>*{pointer-events:all}.f-counter{position:relative;display:flex;flex-direction:row;cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;margin:var(--f-counter-margin, 0);padding:var(--f-counter-padding, 4px);line-height:var(--f-counter-line-height);background:var(--f-counter-bg);border-radius:var(--f-counter-border-radius)}.f-counter span{padding:0 var(--f-counter-gap, 4px)}:root{--f-thumbs-gap: 8px;--f-thumbs-margin: 0;--f-thumbs-padding-x: 8px;--f-thumbs-padding-y: 8px;--f-thumbs-z-index: 1;--f-thumb-width: 96px;--f-thumb-height: 72px;--f-thumb-clip-width: 46px;--f-thumb-extra-gap: 16px;--f-thumb-fit: cover;--f-thumb-opacity: 1;--f-thumb-transition: opacity .3s ease, transform .15s ease;--f-thumb-border: none;--f-thumb-border-radius: 4px;--f-thumb-transfors: none;--f-thumb-shadow: none;--f-thumb-bg: linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, .05));--f-thumb-focus-shadow: inset 0 0 0 .8px #222, inset 0 0 0 2.25px #fff;--f-thumb-selected-shadow: inset 0 0 0 .8px #222, inset 0 0 0 2.25px #fff}.f-thumbs{flex-shrink:0;margin:var(--f-thumbs-margin);padding:0;background:var(--f-thumbs-bg);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;user-select:none;transition:max-height .3s ease,max-width .3s ease;position:relative;overflow:hidden;z-index:var(--f-thumbs-z-index)}.f-thumbs.is-horizontal{max-height:calc(var(--f-carousel-slide-height) + var(--f-thumbs-padding-y) * 2 + var(--f-thumbs-gap) * 2)}.f-thumbs.is-vertical{max-width:calc(var(--f-carousel-slide-width) + var(--f-thumbs-padding-x) * 2 + var(--f-thumbs-gap) * 2)}.f-thumbs.is-ltr{direction:ltr}.f-thumbs.is-rtl{direction:rtl}.f-thumbs__viewport{margin:var(--f-thumbs-padding-y) var(--f-thumbs-padding-x);overflow:visible;display:grid}.f-thumbs.is-vertical .f-thumbs__viewport{height:calc(100% - var(--f-thumbs-padding-y) * 2)}.f-thumbs__slide{position:relative;box-sizing:border-box;grid-area:1/1;width:var(--f-carousel-slide-width);height:var(--f-carousel-slide-height);margin:0;padding:0;display:flex;align-items:center;flex-direction:column;cursor:pointer;overflow:visible}.f-thumbs__slide:hover button{opacity:var(--f-thumb-hover-opacity, 1);transform:var(--f-thumb-hover-transform, none)}.f-thumbs__slide:hover button:after{border:var(--f-thumb-hover-border, none);box-shadow:var(--f-thumb-hover-shadow, var(--f-thumb-shadow))}.f-thumbs__slide button{all:unset;margin:auto;padding:0;position:relative;overflow:visible;width:100%;height:100%;outline:none;transition:var(--f-thumb-transition);border-radius:var(--f-thumb-border-radius);opacity:var(--f-thumb-opacity);transform:var(--f-thumb-transform);background:var(--f-thumb-bg)}.f-thumbs__slide button:after{content:"";position:absolute;inset:0;z-index:1;transition:none;border-radius:inherit;border:var(--f-thumb-border);box-shadow:var(--f-thumb-shadow)}.f-thumbs__slide button:focus-within{opacity:var(--f-thumb-focus-opacity, 1);transform:var(--f-thumb-focus-transform, none)}.f-thumbs__slide button:focus-within:after{border:var(--f-thumb-focus-border, none);box-shadow:var(--f-thumb-focus-shadow, var(--f-thumb-shadow))}.f-thumbs__slide:active{opacity:var(--f-thumb-active-opacity, 1);transform:var(--f-thumb-active-transform, none)}.f-thumbs__slide:active:after{border:var(--f-thumb-active-border, none);box-shadow:var(--f-thumb-active-shadow, var(--f-thumb-shadow))}.f-thumbs__slide.is-selected{z-index:2}.f-thumbs__slide.is-selected button{opacity:var(--f-thumb-selected-opacity, 1);transform:var(--f-thumb-selected-transform, none)}.f-thumbs__slide.is-selected button:after{border:var(--f-thumb-selected-border, none);box-shadow:var(--f-thumb-selected-shadow, var(--f-thumb-shadow))}.f-thumbs__slide img{display:block;width:100%;height:100%;-o-object-fit:var(--f-thumb-fit);object-fit:var(--f-thumb-fit);border-radius:inherit;pointer-events:none}.f-thumbs__slide img.has-lazyerror{display:none}.f-thumbs.is-classic{--f-carousel-slide-width: var(--f-thumb-width);--f-carousel-slide-height: var(--f-thumb-height);--f-carousel-gap: var(--f-thumbs-gap)}.f-thumbs.is-modern{--f-carousel-slide-width: calc( var(--f-thumb-clip-width) + var(--f-thumbs-gap) );--f-carousel-slide-height: var(--f-thumb-height);--f-carousel-gap: 0;--width-diff: calc((var(--f-thumb-width) - var(--f-thumb-clip-width)))}.f-thumbs.is-modern .f-thumbs__viewport{width:calc(100% + var(--f-carousel-slide-width) * 2);margin-inline:calc(var(--f-carousel-slide-width) * -1)}.f-thumbs.is-modern .f-thumbs__slide{--clip-shift: calc((var(--width-diff) * .5) * var(--progress));--clip-path: inset( 0 var(--clip-shift) round var(--f-thumb-border-radius, 0) );padding:0;overflow:visible;left:var(--shift, 0);will-change:left;transition:left var(--f-transition-duration) var(--f-transition-easing)}.f-thumbs.is-modern .f-thumbs__slide button{display:block;margin-inline:50%;width:var(--f-thumb-width);clip-path:var(--clip-path);border:none;box-shadow:none;transition:clip-path var(--f-transition-duration) var(--f-transition-easing),opacity var(--f-thumb-transition-duration, .2s) var(--f-thumb-transition-easing, ease)}.f-thumbs.is-modern .f-thumbs__slide button:after{display:none}.f-thumbs.is-modern .f-thumbs__slide:focus:not(:focus-visible){outline:none}.f-thumbs.is-modern .f-thumbs__slide:focus-within:not(.is-selected) button:before{content:"";position:absolute;z-index:1;top:0;left:var(--clip-shift);bottom:0;right:var(--clip-shift);transition:border var(--f-transition-duration) var(--f-transition-easing),box-shadow var(--f-transition-duration) var(--f-transition-easing);border-radius:inherit;border:var(--f-thumb-focus-border, none);box-shadow:var(--f-thumb-focus-shadow, none)}.f-thumbs.is-modern{--f-transition-duration: .25s;--f-transition-easing: ease-out}.f-thumbs.is-modern.is-syncing{--f-transition-duration: 0s}:root{--f-progressbar-height: 3px;--f-progressbar-color: var(--f-carousel-theme-color, #575ad6);--f-progressbar-opacity: 1;--f-progressbar-z-index: 30}.f-progressbar{position:absolute;top:0;left:0;right:0;z-index:var(--f-progressbar-z-index);height:var(--f-progressbar-height);transform:scaleX(0);transform-origin:0;opacity:var(--f-progressbar-opacity);background:var(--f-progressbar-color);-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none;animation-name:f-progressbar;animation-play-state:running;animation-timing-function:linear}button>.f-progressbar{--f-progressbar-height: 100%;--f-progressbar-opacity: .2}@keyframes f-progressbar{0%{transform:scaleX(0)}to{transform:scaleX(1)}}[data-fullscreen-action=toggle] svg g:first-child{display:flex}[data-fullscreen-action=toggle] svg g:last-child{display:none}:fullscreen [data-fullscreen-action=toggle] svg g:first-child{display:none}:fullscreen [data-fullscreen-action=toggle] svg g:last-child{display:flex}.in-fullscreen-mode>.f-carousel{flex:1;min-width:0!important;min-height:0!important}html.with-fancybox{width:auto;overflow:visible;scroll-behavior:auto}html.with-fancybox body.hide-scrollbar{width:auto;margin-right:calc(var(--f-body-margin, 0px) + var(--f-scrollbar-compensate, 0px));overflow:hidden!important;overscroll-behavior-y:none}.fancybox__dialog{width:100%;height:100vh;max-height:unset;max-width:unset;padding:0;margin:0;border:0;overflow:hidden;background:transparent;touch-action:none}.fancybox__dialog:focus{outline:none}.fancybox__dialog::backdrop{opacity:0}@supports (height: 100dvh){.fancybox__dialog{height:100dvh}}div.fancybox__dialog{position:fixed;inset:0;z-index:1050}.fancybox__container{--fancybox-color: #dbdbdb;--fancybox-backdrop-bg: rgba(24, 24, 27, .95);--f-toolbar-margin: 0;--f-toolbar-padding: 8px;--f-toolbar-gap: 0;--f-toolbar-color: #ddd;--f-toolbar-font-size: 16px;--f-toolbar-font-weight: 500;--f-toolbar-font: -apple-system, BlinkMacSystemFont, "Segoe UI Adjusted", "Segoe UI", "Liberation Sans", sans-serif;--f-toolbar-line-height: var(--f-button-height);--f-toolbar-text-shadow: 1px 1px 1px rgba(0, 0, 0, .75);--f-toolbar-shadow: none;--f-toolbar-bg: none;--f-counter-margin: 0;--f-counter-padding: 0px 10px;--f-counter-gap: 4px;--f-counter-line-height: var(--f-button-height);--f-carousel-gap: 17px;--f-carousel-slide-width: 100%;--f-carousel-slide-height: 100%;--f-carousel-slide-padding: 0;--f-carousel-slide-bg: unset;--f-html-color: #222;--f-html-bg: #fff;--f-error-color: #fff;--f-error-bg: #333;--f-caption-margin: 0;--f-caption-padding: 16px 8px;--f-caption-color: var(--fancybox-color, #dbdbdb);--f-caption-bg: transparent;--f-caption-font: inherit;--f-caption-line-height: 1.375;--f-spinner-color-1: rgba(255, 255, 255, .2);--f-spinner-color-2: rgba(255, 255, 255, .8);--f-spinner-width: 50px;--f-spinner-height: 50px;--f-spinner-border-radius: 50%;--f-spinner-border-width: 4px;--f-progressbar-color: rgba(255, 255, 255);--f-button-width: 46px;--f-button-height: 46px;--f-button-color: #ddd;--f-button-hover-color: #fff;--f-button-outline-width: 1px;--f-button-outline-color: rgba(255, 255, 255, .75);--f-button-outline-offset: 0px;--f-button-bg: rgba(54, 54, 54, .75);--f-button-border: 0;--f-button-border-radius: 0;--f-button-shadow: none;--f-button-transition: all .2s ease;--f-button-transform: none;--f-button-svg-width: 24px;--f-button-svg-height: 24px;--f-button-svg-stroke-width: 1.75;--f-button-svg-filter: drop-shadow(1px 1px 1px rgba(24, 24, 27, .01)), drop-shadow(1px 2px 1px rgba(24, 24, 27, .05));--f-button-svg-fill: none;--f-button-svg-disabled-opacity: .5;--f-arrow-pos: 32px;--f-arrow-width: 50px;--f-arrow-height: 50px;--f-arrow-svg-width: 24px;--f-arrow-svg-height: 24px;--f-arrow-svg-stroke-width: 2;--f-arrow-border-radius: 50%;--f-arrow-bg: rgba(54, 54, 54, .65);--f-arrow-color: #ddd;--f-arrow-hover-color: #fff;--f-close-button-width: 34px;--f-close-button-height: 34px;--f-close-border-radius: 4px;--f-close-button-color: #fff;--f-close-button-hover-color: #fff;--f-close-button-bg: transparent;--f-close-button-hover-bg: transparent;--f-close-button-active-bg: transparent;--f-close-button-svg-width: 22px;--f-close-button-svg-height: 22px;--f-thumbs-margin: 0px;--f-thumbs-padding-x: 8px;--f-thumbs-padding-y: 8px;--f-thumbs-bg: none;--f-thumb-transition: all .2s ease;--f-thumb-width: 94px;--f-thumb-height: 76px;--f-thumb-opacity: 1;--f-thumb-border: none;--f-thumb-shadow: none;--f-thumb-transform: none;--f-thumb-focus-opacity: 1;--f-thumb-focus-border: none;--f-thumb-focus-shadow: inset 0 0 0 2px rgba(255, 255, 255, .65);--f-thumb-focus-transform: none;--f-thumb-hover-opacity: 1;--f-thumb-hover-border: none;--f-thumb-hover-transform: none;--f-thumb-active-opacity: var(--f-thumb-hover-opacity);--f-thumb-active-border: var(--f-thumb-hover-border);--f-thumb-active-transform: var(--f-thumb-hover-transform);--f-thumb-selected-opacity: 1;--f-thumb-selected-border: none;--f-thumb-selected-shadow: inset 0 0 0 2px #fff;--f-thumb-selected-transform: none;position:absolute;inset:0;overflow:hidden;outline:none;display:flex;flex-direction:column}.fancybox__container[theme=light]{--fancybox-color: #222;--fancybox-backdrop-bg: rgba(255, 255, 255, .97);--f-toolbar-color: var(--fancybox-color, #222);--f-toolbar-text-shadow: none;--f-toolbar-font-weight: 400;--f-html-color: var(--fancybox-color, #222);--f-html-bg: #fff;--f-error-color: #555;--f-error-bg: #fff;--f-video-bg: #fff;--f-caption-color: #333;--f-spinner-color-1: rgba(0, 0, 0, .2);--f-spinner-color-2: rgba(0, 0, 0, .8);--f-spinner-border-width: 3.5px;--f-progressbar-color: rgba(111, 111, 116);--f-button-color: #333;--f-button-hover-color: #000;--f-button-outline-color: rgba(0, 0, 0, .85);--f-button-bg: rgba(255, 255, 255, .85);--f-button-svg-stroke-width: 1.3;--f-button-svg-filter: none;--f-arrow-bg: rgba(255, 255, 255, .85);--f-arrow-color: #333;--f-arrow-hover-color: #000;--f-arrow-svg-stroke-width: 1.3;--f-close-button-color: #555;--f-close-button-hover-color: #000;--f-thumb-bg: linear-gradient(#ebeff2, #e2e8f0);--f-thumb-focus-shadow: 0 0 0 1.8px #fff, 0px 0px 0px 2.25px #888;--f-thumb-selected-shadow: 0 0 0 1.8px #fff, 0px 0px 0px 2.25px #000}.fancybox__container::backdrop{background-color:transparent}.fancybox__container.has-vertical-thumbs{flex-direction:row-reverse}.fancybox__container.has-vertical-thumbs:not(.is-closing) .fancybox__viewport{overflow-x:clip;overflow-y:visible}.fancybox__container>*:not(.fancybox__carousel),.fancybox__container .fancybox__carousel>*:not(.fancybox__viewport),.fancybox__container .fancybox__carousel>.fancybox__viewport>.fancybox__slide:not(.is-selected),.fancybox__container .fancybox__carousel>.fancybox__viewport>.fancybox__slide.is-selected>*:not(.f-html,.f-panzoom__wrapper,.f-spinner){opacity:var(--f-drag-opacity, 1)}.fancybox__container:not(.is-ready,.is-hiding){visibility:hidden}.fancybox__container.is-revealing>*:not(.fancybox__carousel),.fancybox__container.is-revealing .fancybox__carousel>*:not(.fancybox__viewport),.fancybox__container.is-revealing .fancybox__carousel>.fancybox__viewport>.fancybox__slide:not(.is-selected),.fancybox__container.is-revealing .fancybox__carousel>.fancybox__viewport>.fancybox__slide.is-selected>*:not(.f-html,.f-panzoom__wrapper,.f-spinner){animation:var(--f-interface-enter-duration, .35s) ease none f-fadeIn}.fancybox__container.is-hiding>*:not(.fancybox__carousel),.fancybox__container.is-hiding .fancybox__carousel>*:not(.fancybox__viewport),.fancybox__container.is-hiding .fancybox__carousel>.fancybox__viewport>.fancybox__slide:not(.is-selected),.fancybox__container.is-hiding .fancybox__carousel>.fancybox__viewport>.fancybox__slide.is-selected>*:not(.f-html,.f-panzoom__wrapper){animation:var(--f-interface-exit-duration, .35s) ease forwards f-fadeOut}.fancybox__container.is-idle .f-carousel__toolbar{pointer-events:none;opacity:0}.fancybox__container.is-idle .f-button.is-arrow{opacity:0}.fancybox__container.is-idle.is-ready .f-carousel__toolbar{pointer-events:none;animation:.15s ease-out both f-fadeOut}.fancybox__container.is-idle.is-ready .f-button.is-arrow{animation:.15s ease-out both f-fadeOut}.fancybox__backdrop{position:fixed;inset:0;z-index:-1;background:var(--fancybox-backdrop-bg)}.fancybox__carousel{flex:1;display:flex;flex-direction:column;min-height:0;min-width:0;position:relative;z-index:10;overflow-y:visible;overflow-x:clip}.fancybox__carousel.is-vertical{--f-carousel-slide-height: 100%}.fancybox__carousel.is-ltr{direction:ltr}.fancybox__carousel.is-rtl{direction:rtl}.fancybox__carousel>.f-button.is-arrow:before{position:absolute;content:"";inset:-30px;z-index:1}.fancybox__viewport{display:grid;flex:1;min-height:0;min-width:0;position:relative;overflow:visible;transform:translate3d(0,var(--f-drag-offset, 0),0)}.fancybox__viewport.is-draggable{cursor:move;cursor:grab}.fancybox__viewport.is-dragging{cursor:move;cursor:grabbing}.fancybox__viewport [data-selectable],.fancybox__viewport [contenteditable]{cursor:auto}.fancybox__slide{box-sizing:border-box;position:relative;grid-area:1/1;display:flex;align-items:center;flex-direction:column;width:var(--f-carousel-slide-width);height:var(--f-carousel-slide-height);min-width:0;min-height:0;max-width:100%;margin:0;padding:var(--f-carousel-slide-padding);background:var(--f-carousel-slide-bg);backface-visibility:hidden;transform:translateZ(0);will-change:transform}.fancybox__slide:before,.fancybox__slide:after{display:block;content:""}.fancybox__slide:before{margin-bottom:auto}.fancybox__slide:after{margin-top:auto}.fancybox__slide.is-selected{z-index:1}.fancybox__slide.f-zoomable{overflow:visible}.fancybox__slide.has-error{--f-html-color: var(--f-error-color, --f-html-color);--f-html-bg: var(--f-error-bg, --f-html-bg)}.fancybox__slide.has-html{overflow:auto;padding:8px}.fancybox__slide.has-close-btn{padding-top:34px}.fancybox__slide.has-controls:before{margin:0}.fancybox__slide .f-spinner{cursor:pointer}.fancybox__container.is-closing .f-caption,.fancybox__slide.is-loading .f-caption{visibility:hidden}.fancybox__container.is-closing .fancybox__carousel{overflow:visible}.f-button.is-close-button{--f-button-width: var(--f-close-button-width);--f-button-height: var(--f-close-button-height);--f-button-border-radius: var(--f-close-border-radius);--f-button-color: var(--f-close-button-color);--f-button-hover-color: var(--f-close-button-hover-color);--f-button-bg: var(--f-close-button-bg);--f-button-hover-bg: var(--f-close-button-hover-bg);--f-button-active-bg: var(--f-close-button-active-bg);--f-button-svg-width: var(--f-close-button-svg-width);--f-button-svg-height: var(--f-close-button-svg-height);position:absolute;top:calc(var(--f-button-height) * -1);right:0;z-index:40} /* mulish-latin-300-normal */ @font-face { font-family: 'Mulish'; font-style: normal; font-display: swap; font-weight: 300; src: url(fonts/mulish-latin-300-normal.9dd563b0.woff2) format('woff2'), url(fonts/mulish-latin-300-normal.829362bc.woff) format('woff'); } /* mulish-latin-300-italic */ @font-face { font-family: 'Mulish'; font-style: italic; font-display: swap; font-weight: 300; src: url(fonts/mulish-latin-300-italic.0af58041.woff2) format('woff2'), url(fonts/mulish-latin-300-italic.fd57dd83.woff) format('woff'); } /* mulish-latin-400-normal */ @font-face { font-family: 'Mulish'; font-style: normal; font-display: swap; font-weight: 400; src: url(fonts/mulish-latin-400-normal.e90aa63f.woff2) format('woff2'), url(fonts/mulish-latin-400-normal.9dd16f75.woff) format('woff'); } /* mulish-latin-400-italic */ @font-face { font-family: 'Mulish'; font-style: italic; font-display: swap; font-weight: 400; src: url(fonts/mulish-latin-400-italic.1735ec9d.woff2) format('woff2'), url(fonts/mulish-latin-400-italic.2129aa19.woff) format('woff'); } /* mulish-latin-500-normal */ @font-face { font-family: 'Mulish'; font-style: normal; font-display: swap; font-weight: 500; src: url(fonts/mulish-latin-500-normal.c4b45c07.woff2) format('woff2'), url(fonts/mulish-latin-500-normal.008949da.woff) format('woff'); } /* mulish-latin-500-italic */ @font-face { font-family: 'Mulish'; font-style: italic; font-display: swap; font-weight: 500; src: url(fonts/mulish-latin-500-italic.6e61cb29.woff2) format('woff2'), url(fonts/mulish-latin-500-italic.cfe17c78.woff) format('woff'); } /* mulish-latin-600-normal */ @font-face { font-family: 'Mulish'; font-style: normal; font-display: swap; font-weight: 600; src: url(fonts/mulish-latin-600-normal.c673377b.woff2) format('woff2'), url(fonts/mulish-latin-600-normal.3a5a4f67.woff) format('woff'); } /* mulish-latin-600-italic */ @font-face { font-family: 'Mulish'; font-style: italic; font-display: swap; font-weight: 600; src: url(fonts/mulish-latin-600-italic.92ee7d91.woff2) format('woff2'), url(fonts/mulish-latin-600-italic.fae89ddf.woff) format('woff'); } /* mulish-latin-700-normal */ @font-face { font-family: 'Mulish'; font-style: normal; font-display: swap; font-weight: 700; src: url(fonts/mulish-latin-700-normal.0f7de59d.woff2) format('woff2'), url(fonts/mulish-latin-700-normal.acabf61e.woff) format('woff'); } /* mulish-latin-700-italic */ @font-face { font-family: 'Mulish'; font-style: italic; font-display: swap; font-weight: 700; src: url(fonts/mulish-latin-700-italic.0afc9def.woff2) format('woff2'), url(fonts/mulish-latin-700-italic.60ed536d.woff) format('woff'); } /* mulish-latin-800-normal */ @font-face { font-family: 'Mulish'; font-style: normal; font-display: swap; font-weight: 800; src: url(fonts/mulish-latin-800-normal.dcc7eec5.woff2) format('woff2'), url(fonts/mulish-latin-800-normal.6d037d2c.woff) format('woff'); } /* mulish-latin-800-italic */ @font-face { font-family: 'Mulish'; font-style: italic; font-display: swap; font-weight: 800; src: url(fonts/mulish-latin-800-italic.92e076c7.woff2) format('woff2'), url(fonts/mulish-latin-800-italic.c6650796.woff) format('woff'); } /* noto-serif-latin-700-normal */ @font-face { font-family: 'Noto Serif'; font-style: normal; font-display: swap; font-weight: 700; src: url(fonts/noto-serif-latin-700-normal.73dd8fde.woff2) format('woff2'), url(fonts/noto-serif-latin-700-normal.e6fd4afd.woff) format('woff'); } .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; } .slick-list:focus { outline: 0; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-list, .slick-slider .slick-track { transform: translate3d(0, 0, 0); } .slick-track { position: relative; left: 0; top: 0; display: block; margin-left: auto; margin-right: auto; } .slick-track:after, .slick-track:before { content: ""; display: table; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { float: left; height: 100%; min-height: 1px; display: none; } [dir="rtl"] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } @charset "UTF-8"; .slick-loading .slick-list { background: #fff; } .slick-next, .slick-prev { position: absolute; display: block; height: 20px; width: 20px; line-height: 0; font-size: 0; cursor: pointer; background: 0 0; color: transparent; top: 50%; transform: translate(0, -50%); padding: 0; border: none; outline: 0; } .slick-next:focus .slick-next-icon:before, .slick-next:focus .slick-prev-icon:before, .slick-next:hover .slick-next-icon:before, .slick-next:hover .slick-prev-icon:before, .slick-prev:focus .slick-next-icon:before, .slick-prev:focus .slick-prev-icon:before, .slick-prev:hover .slick-next-icon:before, .slick-prev:hover .slick-prev-icon:before { opacity: 1; } .slick-next.slick-disabled, .slick-prev.slick-disabled { cursor: default; } .slick-next.slick-disabled .slick-next-icon:before, .slick-next.slick-disabled .slick-prev-icon:before, .slick-prev.slick-disabled .slick-next-icon:before, .slick-prev.slick-disabled .slick-prev-icon:before { opacity: 0.25; } .slick-next .slick-next-icon:before, .slick-next .slick-prev-icon:before, .slick-prev .slick-next-icon:before, .slick-prev .slick-prev-icon:before { font-family: slick; font-size: 20px; line-height: 1; color: #fff; opacity: 0.75; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slick-prev { left: -25px; } [dir="rtl"] .slick-prev { left: auto; right: -25px; } .slick-prev .slick-prev-icon:before { content: "←"; } [dir="rtl"] .slick-prev .slick-prev-icon:before { content: "→"; } .slick-next { right: -25px; } [dir="rtl"] .slick-next { left: -25px; right: auto; } .slick-next .slick-next-icon:before { content: "→"; } [dir="rtl"] .slick-next .slick-next-icon:before { content: "←"; } .slick-dotted.slick-slider { margin-bottom: 30px; } .slick-dots { position: absolute; bottom: -25px; list-style: none; display: block; text-align: center; padding: 0; margin: 0; width: 100%; } .slick-dots li { position: relative; display: inline-block; height: 20px; width: 20px; margin: 0 5px; padding: 0; cursor: pointer; } .slick-dots li button { border: 0; background: 0 0; display: block; height: 20px; width: 20px; outline: 0; line-height: 0; font-size: 0; color: transparent; padding: 5px; cursor: pointer; } .slick-dots li button:focus, .slick-dots li button:hover { outline: 0; } .slick-dots li button:focus .slick-dot-icon, .slick-dots li button:hover .slick-dot-icon { opacity: 1; } .slick-dots li button .slick-dot-icon { color: #000; opacity: 0.25; } .slick-dots li button .slick-dot-icon:before { position: absolute; top: 0; left: 0; content: "•"; width: 20px; height: 20px; font-family: slick; font-size: 6px; line-height: 20px; text-align: center; } .slick-dots li.slick-active button .slick-dot-icon { color: #000; opacity: 0.75; } .slick-sr-only { border: 0 !important; clip: rect(1px, 1px, 1px, 1px) !important; clip-path: inset(50%) !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; width: 1px !important; white-space: nowrap !important; } .slick-autoplay-toggle-button { position: absolute; left: 5px; bottom: -25px; z-index: 10; opacity: 0.75; background: 0 0; border: 0; cursor: pointer; } .slick-autoplay-toggle-button:focus, .slick-autoplay-toggle-button:hover { outline: 0; opacity: 1; } .slick-autoplay-toggle-button .slick-pause-icon:before { content: "⏸"; width: 20px; height: 20px; font-family: slick; font-size: 16px; line-height: 20px; text-align: center; } .slick-autoplay-toggle-button .slick-play-icon:before { content: "▶"; width: 20px; height: 20px; font-family: slick; font-size: 16px; line-height: 20px; text-align: center; } @charset "utf-8"; @media all { :root { --blau-dunkel-blacky: #09233d; --blau-dunkel: #194779; --blau-dunkel-aktiv: #194779; --blau: #1f5a99; --blau-mittel-mittel: #4385b4; --blau-mittel: #81aecc; --blau-mittel-hell-aktiv: #b7cedd; --blau-mittel-hell: #d0e1ec; --blau-hell: #c1d7e5; --blau-hell-hell: #e6eef5; --gruen-dunkel: #587a29; --gruen-mittel: #93B168; --gruen-hell: #C7D9B2; --gruen-hell-hell: #E2EBD8; --gelb-dunkel: #fec800; --gelb-mittel: #ffea80; --gelb-hell: #fff3bf; --gelb-hell-hell: #fefae4; --grau-dunkel: #454545; --grau-mittel: #757575; --grau-mittel-hell: #cfcfcf; --grau-hell: #f5f9fb; /* body Hintergrundfarbe */ --rot: #db0000; --bg-u2-hover: rgba(0, 0, 0, 0.20); --weiss: #fff; --accent: #81aecc; --anim: 260ms; --easing: cubic-bezier(0.2, 0.7, 0.2, 1); --submenu-max: 100vh; --container: 1200px; --border-farbe: rgba(255, 255, 255, 0.2); --border-test: 1px solid red; --box-shadow: 0 0.2rem 0.6rem rgba(0, 90, 154, 0.1); --box-shadow-2: 0 0.2rem 0.6rem rgba(0, 90, 154, 0.2); --box-shadow-2-breit: 0 0.2rem 1.6rem 0.7rem rgba(0, 90, 154, 0.2); --focus: #81aecc; --gap: 16px; --thumbW: 72px; } /* Reset */ *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; border: 0; box-sizing: border-box; } img { border: 0; width: 100%; height: auto; } figure { display: block; margin: 0; unicode-bidi: normal; } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, main { font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, address, aside, details, main, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* ~~~~~~~~~~~~~~~~~~ Zusammenfassungen ~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~ transition 0.45s ease-in-out ~~~ */ a, a:link, a:hover, a:focus, #lupe-cont, #lupe-cont:checked + label, #lupe-cont:hover + label, #lupe-cont:focus + label, #search-field, label[for="lupe-cont"], #lupe-cont:checked ~ #search-field, #pfeil-top a, #pfeil-top a:link, #pfeil-top a:focus, #pfeil-top a:hover, .brand figure a, .brand figure a:link, .brand figure a:hover, .brand figure a:focus, .burger-btn, .burger, .warenkorb a, .warenkorb a:link, .warenkorb a:hover, .warenkorb a:focus, .card .weiter-link p a, .card .weiter-link p a:hover, .card .weiter-link p a:focus, .card .weiter-link p a:hover::before, .card .weiter-link p a:focus::before, .card:hover img, .card img, .nav-footer ul li a, .nav-footer ul li a:link, .nav-footer ul li a:hover, .nav-footer ul li a:focus, .slider-01 .slick-prev::before, .slider-01 .slick-next::before, .slider-01 .slick-prev:hover::before, .slider-01 .slick-prev:focus::before, .slider-01 .slick-next:hover::before, .slider-01 .slick-next:focus::before, .slider-01 .slick-dots li button::before, .slider-01 .slick-dots li button:hover::before, .slider-01 .slick-dots li button:focus::before, .nav-breadcrumb .breadcrumb li a, .nav-breadcrumb .breadcrumb li a:link, .nav-breadcrumb .breadcrumb li a:hover, .nav-breadcrumb .breadcrumb li a:focus, .menge button, .menge button:hover, .menge button:focus, .alsListe img, .alsListe:hover img, .alsListe .weiter-link p a, .alsListe .weiter-link p a:hover, .alsListe.weiter-link p a:focus, .box .weiter-link p a:hover::before, .box .weiter-link p a:focus::before, .shopping-cart td.remove-button::after, .shopping-cart td.remove-button:hover::after, .shopping-cart td.remove-button:focus::after, .message-warenkorb .warenkorb-link a, .message-warenkorb .warenkorb-link a:link, .message-warenkorb .warenkorb-link a:hover, .message-warenkorb .warenkorb-link a:focus, .card.detail .button-link button { transition: all 0.35s ease-in-out; } .card.vorschau:hover figure img, .card.alsListe:hover figure img, .card figure a:hover img, .card figure a:focus img, .card.vorschau figure a:hover img, .card.vorschau figure a:focus img, .box.vorschau figure a:hover img, .box.vorschau figure a:focus img { transform: scale(1.075, 1.075); cursor: pointer; transition: all 0.5s ease-out; } .header .headerbar.klein, .header .headerbar, .header .headerbar.klein .nav-cont, .header .headerbar .nav-cont { transition: all 0.15s ease-in-out; } /* ~~~~~~~~~~~~~~~~~~ Allgemein ~~~~~~~~~~~~~~~~~~~~~~~~~~ */ :root { /* Basiswerte für Schriftgrößen */ /* font-size: clamp(Minimum, Bevorzugt, Maximum); */ --step--2: clamp(0.75rem, 0.70rem + 0.25vw, 0.875rem); --step--1: clamp(0.875rem, 0.80rem + 0.35vw, 1rem); --step-0: clamp(1rem, 0.90rem + 0.5vw, 1.125rem); --step-1: clamp(1.25rem, 1.10rem + 0.8vw, 1.5rem); --step-2: clamp(1.5rem, 1.30rem + 1vw, 2rem); --step-3: clamp(2rem, 1.80rem + 1.5vw, 2.5rem); --step-4: clamp(2.5rem, 2.20rem + 2vw, 3.25rem); --step-5: clamp(3rem, 2.60rem + 3vw, 4rem); } html { font-size: 16px; line-height: 18px; } html, body { width: 100%; height: 100%; } body { margin: 0; font-family:"Mulish", sans-serif, Arial, Verdana, Helvetica; font-size: var(--step-1); line-height: 1.6; font-weight: 400; color: #000; hyphens: auto; hyphenate-limit-chars: auto 5; hyphenate-limit-chars: 4; background-color: var(--grau-hell); } /* ~~~~~~ Fließtext ~~~~~~ */ p { /* font-size: var(--step-1); */ /* line-height: 1.6; */ margin-bottom: 0.75rem; text-wrap: pretty; } /* ~~~~~ Überschriften gestaffelt ~~~~~~ */ h1 { font-size: var(--step-4); line-height: 1.1; font-weight: 600; } h2 { font-size: var(--step-3); line-height: 1.2; } h3 { font-size: var(--step-2); line-height: 1.3; } h4 { font-size: var(--step-2); line-height: 1.35; } h5 { font-size: var(--step-1); line-height: 1.4; } h6 { font-size: var(--step-0); line-height: 1.4; } h1, h2, h3, h4, h5, h6 { text-wrap: balance; font-weight: 600; /* hyphens: none; */ } h2, h3, h4, h5, h6 { margin: 1.5rem 0 1.0rem 0; /* hyphens: none; */ } h1, h2 { text-align: center; } /* ~~~~~~ Schrift allgemein ~~~~~~ */ small { font-size: var(--step--1); } .duenn { font-weight: 300; } .semi-bold { font-weight: 600; } strong, .fett, .bold { font-weight: 700; } em { font-style: italic; } .umbruch { white-space: nowrap; } .zentriert { text-align: center; } hr { width: 100%; margin: 70px 0; border: 1px dotted #fff; } /* ~~~~~~ "Links" ~~~~~~ */ a, a:link { color: var(--blau-dunkel); font-weight: 600; text-decoration: underline; } a:hover, a:focus { color: #000; } #screenreader-jump a { display: inline-block; height: .1rem; left: -1000rem; overflow: hidden; position: absolute; top: -1000rem; width: .1rem; z-index: 5000; } .button-link { /* height: 50px; */ width: 100%; /* margin: 2rem auto; */ /* display: flex; justify-content: center; align-items: center; */ } .button-link.abstand-oben { margin-top: 2rem; } .button-link a, .button-link a:link, .button-link button { display: block; font-weight: 700; font-size: 1.4rem; color: #000; background: var(--gelb-dunkel); text-decoration: none; text-align: center; padding: 1rem 2rem; overflow: hidden !important; border-radius: 7px; transform: scale(1); } .button-link.darkblue a, .button-link.darkblue a:link { color: var(--weiss); background: var(--blau-dunkel); } .button-link a:hover, .button-link a:focus, .button-link button:hover, .button-link button:focus, .button-link.darkblue a:hover, .button-link.darkblue a:focus { color: var(--weiss); background: var(--blau-dunkel-blacky); align-self: center; transform: scale(1.075); } /* ~~~~~~ Header ~~~~~~ */ .header { position: relative; width: 100%; } .header .headerbar { display: flex; justify-content: center; height: 80px; left: 0; position: fixed; right: 0; top: 50px; width: 100%; z-index: 101; } .header .headerbar.klein { top: 0; } .header .headerbar .nav-cont { background-color: var(--blau); border-radius: 20px; padding: 0; width: 100%; max-width: 1600px; position: relative; } .header .headerbar.klein .nav-cont { border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 25px; } /* .container.align-wide { border-radius: 2.4rem; max-width: unset; padding: 0 20rem; width: 160rem; } */ .topbar { position: absolute; top: -50px; right: 0; display: flex; justify-content: flex-end; align-items: center; height: 50px; gap: 0.75rem; padding: 0 15px; width: 100%; max-width: 1600px; margin: 0 auto; } .topbar ul { display: flex; align-items: center; justify-content: flex-end; } .topbar ul li a, .topbar ul li a:link { font-size: 18px; color: var(--blau-dunkel-aktiv); font-weight: 600; text-align: right; text-decoration: none; display: block; width: 100%; padding: 0.75rem 1rem; transform: scale(1); } .topbar ul li.akt a, .topbar ul li a:hover, .topbar ul li a:focus { color: #000; transform: scale(1.1); } .topbar ul li.akt a { font-weight: 800; transform: scale(1); } .topbar ul li { border-left: 1px solid var(--blau-dunkel); } .topbar ul li:first-child { border-left: none; } /* ~~~~~~~~~~~~ Logo ~~~~~~~~~~~~ */ .brand { position: absolute; left: -25px; top: -7px; z-index: 1100; margin-right: auto; width: 367px; height: 100px; transform-origin: 0% 0%; transform: scale(1); } .brand figure a, .brand figure a:link { display: block; width: 100%; height: 100%; top: 0; left: 0; z-index: 1300; transform: scale(1); } .brand figure a:hover, .brand figure a:focus { transform: scale(1.03); } /* ~~~~~~~~~~~~ Warenkorb-Icons ~~~~~~~~~~~~ */ .nav-cont .warenkorb-cont { position: absolute; z-index: 1000; right: 15px; top: 20px; display: flex; gap: 4px; width: 84px; height: 40px; z-index: 800; } .warenkorb { width: 40px; } .warenkorb a, .warenkorb a:link { display: block; transform: scale(1); } .warenkorb a:hover, .warenkorb a:focus { transform: scale(1.2); } .warenkorb-count { width: 40px; border: 1px solid var(--blau-mittel); color: var(--blau-hell); border-radius: 50%; text-align: center; vertical-align: middle; font-size: 1.1rem; padding-top: 5px; } .warenkorb-count p { margin-bottom: 0; } .warenkorb-count.akt { border: none; background: var(--gelb-hell); color: #000; } .nav-cont .warenkorb-cont figure img { height: 40px; } /* ~~~~~~~~~~~~~~~~~ Button-Lupe ~~~~~~~~~~~~~~~~~~~~ */ #lupe-cont { position: absolute; z-index: 900; left: -1000px; top: -1000px; } label[for="lupe-cont"] { position: absolute; z-index: 1000; right: 120px; top: 20px; width: 40px; height: 40px; background: transparent url(f7a715ed4a6180fa2dc3.svg) 0 0 no-repeat; background-size: cover; cursor: pointer; transform: scale(1); border: 1px solid var(--border-test); } .light { opacity: 0; } #lupe-cont:checked ~ #search-field { display: block; width: 200px; transform: scale(1); right: 40px; top: 90px; opacity: 1; } #lupe-cont:checked + label, #lupe-cont:hover + label, #lupe-cont:focus + label { transform: scale(1.2); } #lupe-cont:focus + label { border: 2px solid #000; border-radius: 5px; } /* ~~~ Button-Suchefeld-Einblender~~~ */ #search-field { position: absolute; width: 200px; right: 40px; top: 10px; z-index: 900; transform: scale(0); opacity: 0; } #suchstr, #volltextsuche { position: relative; width: 200px; height: 35px; color: #000; font-size: var(--step--1); padding: 0 5px; vertical-align: middle; border: 1px solid #000; border-radius: 5px; } #gobutton { position: absolute; top: -2px; right: -20px; width: 40px; } #suchstr, #gobutton { display: none; } #lupe-cont:checked ~ #search-field #suchstr, #lupe-cont:checked ~ #search-field #gobutton { display: block; } #volltextsuche { margin: 10px 0 0 7px; font-weight: 600; color: #000; } /* ~~~~~~~~~~~~~~~~~~~~~ Hamburger ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* checkbox */ #mobile-nav-toggle { position: absolute; right: 0; top: 0; opacity: 0; display: none; z-index: 4000; } /* label für checkbox */ .burger-btn { display: none; position: absolute; top: 8px; right: 5px; align-items: center; justify-content: flex-end; width: 44px; height: 44px; padding: 0 4px; border-radius: 0.6rem; cursor: pointer; z-index: 3500; } .burger { position: relative; width: 36px; height: 2px; background: var(--weiss); } .burger::before, .burger::after { content: ""; position: absolute; left: 0; width: 36px; height: 2px; background: var(--weiss); transition: transform var(--anim) var(--easing); } .burger::before { top: -8px; } .burger::after { top: 8px; } #mobile-nav-toggle:focus + .burger-btn { background: var(--blau-dunkel-aktiv); } #mobile-nav-toggle:checked + .burger-btn .burger { background: transparent; } #mobile-nav-toggle:checked + .burger-btn .burger::before { transform: translateY(8px) rotate(45deg); } #mobile-nav-toggle:checked + .burger-btn .burger::after { transform: translateY(-8px) rotate(-45deg); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } /* ~~~~~~~~~~~~~~~~~~~~ Navigation ~~~~~~~~~~~~~~~~~~~ */ nav { position: relative; width: min(100%, 1600px); margin: 0 auto; } .nav { z-index: 500; list-style: none; width: 100%; margin: 0; padding: 10px 245px 0 440px; display: flex; gap: 0.3rem; justify-content: space-evenly; align-items: stretch; overflow: hidden; color: var(--weiss); } .nav > li { flex-grow: 1; font-size: 1.1rem; } .trigger { display: flex; gap: 0.3rem; flex: 1 1 20%; justify-content: center; padding: 13px 0.5rem 24px 0.5rem; cursor: pointer; border-top-right-radius: 8px; border-top-left-radius: 8px; font-size: 1.3rem; font-weight: 600; } .trigger[data-has-sub="true"]::after { content: ""; margin: 14px 0 0 2px; width: 0.5rem; height: 0.5rem; border-right: 2px solid var(--blau-mittel); border-bottom: 2px solid var(--blau-mittel); transform: rotate(-45deg); transition: transform var(--anim) var(--easing); } input[type="checkbox"]:checked + label.trigger[data-has-sub="true"]::after { transform: rotate(45deg); margin: 12px 0 0 2px; border-right: 2px solid var(--blau-dunkel); border-bottom: 2px solid var(--blau-dunkel); } .trigger:hover, .trigger:focus-visible, .submenu2 .akt > .trigger, li.akt > .trigger { background: var(--blau-hell-hell); color: var(--blau-dunkel); font-weight: 600; border: none; } .akt > .trigger, li.akt > .trigger { font-weight: 700; } /* ~~~~~~~ Navi Ebene 2 ~~~~~~~ */ .submenu2-wrap { position: absolute; left: 0; right: 0; top: 100%; width: 100%; overflow: hidden; max-height: 0; opacity: 0; transform: translateY(-8px); transition: max-height var(--anim) var(--easing), opacity var(--anim) var(--easing), transform var(--anim) var(--easing); z-index: 999; } .submenu2 { list-style: none; margin: 0 auto; padding: 1rem 1.25rem 1rem; background: var(--blau-hell-hell); max-width: var(--container); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.9rem; overflow: hidden; border-bottom-left-radius: 0.75rem; border-bottom-right-radius: 0.75rem; box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.15); font-weight: 800; } .submenu2 > li { list-style: none; } /* ~~~~~~~ WENN KEIN U-MENÜ z.B. ÜBERSICHT ~~~~~~~ */ .submenu2 li a, .submenu2 li a:link { display: block; padding: 0.5rem 0.6rem 0.5rem 1rem; border-radius: 0.4rem; cursor: pointer; /* background: var(--bg-u2-hover); */ background: var(--blau-mittel-hell); border: 1px solid var(--blau-mittel); color: var(--blau); text-decoration: none; font-weight: 700; } .submenu2 li.akt a, .submenu2 li.akt a:link, .submenu2 li a:hover, .submenu2 li a:focus { background: var(--blau-mittel); border: 1px solid var(--blau-mittel); color: var(--blau-dunkel-blacky); } .submenu2 li.akt a:link .submenu2 li ul li a { border: none; } /* ~~~~~~~ Navi Karten U2 ~~~~~~~ */ .u-card { background: var(--blau-mittel-hell); border-radius: 0.5rem; padding: 0; } .u-head { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.6rem 0.5rem 1rem; border-radius: 0.4rem; cursor: pointer; font-weight: 700; background: var(--blau-hell); color: var(--blau-dunkel); } .submenu2 li.akt .u-head, .u-head:hover, .u-head:focus-visible, .u-head.akt { background: var(--blau-mittel); border-radius: 0.4rem; color: var(--blau-dunkel-blacky); } .u-head[data-has-sub="true"]::after { content: ""; width: 0.5rem; height: 0.5rem; border-right: 2px solid var(--blau-dunkel); border-bottom: 2px solid var(--blau-dunkel); transform: rotate(-45deg); transition: transform var(--anim) var(--easing); } /* ~~~~~~~ Navi Ebene 3 ~~~~~~~ */ .submenu3 { padding: 0 1rem; border-top: 1px solid var(--border-farbe); max-height: 0; opacity: 0; overflow: hidden; transform: translateY(-6px); transition: max-height var(--anim) var(--easing), opacity var(--anim) var(--easing), transform var(--anim) var(--easing); } .submenu3 a { display: block; width: 100%; padding: 0.4rem 0.6rem; border-radius: 0.35rem; text-decoration: none; font-weight: 700; background: var(--blau-mittel-hell); } .submenu2 li.akt .submenu3 a, .submenu3 a { border: none !important; background: transparent !important; color: var(--blau-dunkel); } .submenu3 a:hover, .submenu3 a:focus, .submenu2 li.akt .submenu3 a:hover, .submenu2 li.akt .submenu3 a:focus, .submenu2 li.akt .submenu3 li.akt a, .submenu3 li.akt a { background: var(--blau-mittel) !important; color: var(--blau-dunkel-blacky); } /* ~~~~~~~ Navi Checkbox-Hack ~~~~~~~ */ input.nav-toggle, input.u-toggle { position: absolute; opacity: 0; } input.nav-toggle:checked ~ .submenu2-wrap { max-height: var(--submenu-max); opacity: 1; transform: translateY(0); } input.u-toggle:checked + label.u-head[data-has-sub="true"]::after { transform: rotate(45deg); } input.u-toggle:checked ~ ul.submenu3 { max-height: var(--submenu-max); opacity: 1; transform: translateY(0); } /* ~~~~~~~ WENN KEIN U-MENÜ z.B. ÜBERSICHT ~~~~~~~ */ /* Änderung-2510 */ .submenu2 li a, .submenu2 li a:link { display: block; padding: 0.5rem 0.6rem 0.5rem 1rem; border-radius: 0.4rem; cursor: pointer; /* background: var(--bg-u2-hover); */ /* background: var(--blau-mittel-hell); */ background: var(--gelb-hell); border: 1px solid var(--blau-mittel); color: var(--blau); text-decoration: none; font-weight: 700; } .submenu2 li.akt a, .submenu2 li.akt a:link, .submenu2 li a:hover, .submenu2 li a:focus { background: var(--blau-mittel); border: 1px solid var(--blau-mittel); color: var(--blau-dunkel-blacky); } .submenu2 li.akt a:link .submenu2 li ul li a { border: none; } /* ~~~~~~~ Fokus ~~~~~~~ */ .trigger:focus-visible, .u-head:focus-visible, .submenu3 a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ~~~~~~~ Style for hidden checkboxes ~~~~~~~ */ .nav-toggle, .u-toggle { display: none; } /* Style for submenus, initially hidden */ .submenu2-wrap, .submenu3 { display: none; } /* CSS to show the submenu when the corresponding checkbox is checked */ .nav-toggle:checked + .trigger + .submenu2-wrap, .u-toggle:checked + .u-head + .submenu3 { display: block; } .trigger::after, .u-head::after { content: " \25BC"; /* Unicode for a downward-pointing triangle */ } /* ~~~~~~~~~~~~~~ Banner ~~~~~~~~~~~~~~~~~~~~~~~~~ */ .banner { /* overflow-x: hidden; */ position: relative; width: 100%; background: var(--blau-hell); } .banner .animation { position: absolute; z-index: 10; height: auto; padding-top: 17vh; opacity: 0.85; width: 100%; display: flex; justify-content: center; align-items: center; } /* @keyframes grow { 0% { transform: scale(0%) rotate(-360deg); opacity: 1; } 50% { transform: scale(100%) rotate(0deg); opacity: 1; }70% { transform: scale(100%) rotate(0deg); opacity: 1; } 100% { transform: scale(130%) rotate(0deg); opacity: 0; } } @keyframes pulsieren { 0% { transform: scale(1); } 20% { -webkit-transform: scale(0.9); transform: scale(0.9); -webkit-transform: rotate(-3deg); transform: rotate(-3deg); } 50% { -webkit-transform: scale(0.95); transform: scale(0.95); } to { transform: scale(1); } } @keyframes deckkraft { 0% { opacity: 0.4; } 50% { opacity: 0.7; }70% { opacity: 0.7; } 100% { opacity: 1; } } .banner .animation .icon-ani { animation-delay: 0s; animation-direction: normal; animation-duration: 8s; animation-iteration-count: 1; animation-name: grow; animation-timing-function: ease-in-out; animation-fill-mode:forwards; width: 400px; } */ .banner .image { position: relative; z-index: 9; max-width: 1920px; width: 100%; margin: 0 auto; overflow: hidden; animation-delay: 0s; animation-direction: normal; animation-duration: 8s; animation-iteration-count: 1; animation-name: deckkraft; animation-timing-function: ease-in-out; animation-fill-mode:forwards; } .banner .image img { display: table; margin: 0 auto; line-height: 0; } .banner.begrenzt { height: 600px; margin-bottom: 0; overflow-y: hidden; } /* ~~~~~~~ Main ~~~~~~~ */ main, main.mit-banner { position: relative; z-index: 12; width: min(1600px, 100%); margin: 0 auto; padding: 0; } main.ohne-banner { padding: 18rem 0 9rem; } /* ~~~~~~~ breadcrumb ~~~~~~~ */ .nav-breadcrumb { position: absolute; top: 13rem; left: 0; } .nav-breadcrumb .breadcrumb { margin: 0; padding: 0.3rem 0.75rem 0.3rem 0.3rem; font-size: var(--step--1); background: var(--blau-hell-hell); border-radius: 0.51em; } .nav-breadcrumb .breadcrumb ul { display: flex; justify-content: flex-start; align-items: flex-start; } .nav-breadcrumb .breadcrumb li { position: relative; } .nav-breadcrumb .breadcrumb li, .nav-breadcrumb .breadcrumb li a, .nav-breadcrumb .breadcrumb li a:link { color: #474747; padding: 0.15rem 0.35rem 0.15rem 0.2rem; display: inline-flex; } .nav-breadcrumb .breadcrumb li.akt { padding: 0.35rem 0.3rem; } .nav-breadcrumb .breadcrumb li a, .nav-breadcrumb .breadcrumb li a:link { display: block; text-decoration: none; font-size: var(--step--1); font-weight: 400; transform: scale(1); transform-origin: center; } .nav-breadcrumb .breadcrumb li a:hover, .nav-breadcrumb .breadcrumb li a:focus { color: var(--blau-dunkel-aktiv); text-decoration: none; transform: scale(1.075); } /* .nav-breadcrumb .breadcrumb li::after { content: "> "; margin-top: 2px; vertical-align: middle; } */ .nav-breadcrumb .breadcrumb li::after { content: ""; position: absolute; top: 12px; right: 0; width: 7px; height: 12px; background: transparent url(32774760baa92d2acc1b.svg) 0 0 no-repeat; background-size: contain; } .nav-breadcrumb .breadcrumb li.akt::after{ content: ""; background: none; } /* ~~~~~~~ Ende breadcrumb ~~~~~~~ */ .cont-inhalt { position: relative; overflow: hidden; border-radius: 1.9rem; padding: 3.5rem 10rem; margin: 0 auto; background: #fff; box-shadow: var(--box-shadow); } #footer .contact ul { margin-top: 1.3rem; } #footer .contact li, .cont-inhalt li { background: none; text-indent: 0; padding-left: 0; margin-bottom: 0.75rem; } .cont-inhalt.produkte-overview { padding: 3.5rem 2.5rem; } .cont-inhalt.slider { padding: 3rem 2rem; } .cont-inhalt.textseite { padding: 3.5rem 7rem; font-size: 1.35rem; } .cont-inhalt .einleitung { margin-bottom: 2rem; text-align: center; text-wrap: balance; font-size: 1.5rem; line-height: 1.9rem; } .cont-inhalt.textseite .bild-gross { position: relative; width: min(1000px, 100%); line-height: 0; margin-bottom: 2rem; } .cont-inhalt.textseite .content-schmal { margin: 2rem auto; width: min(1000px, 100%); } .cont-inhalt.textseite .content-schmal.extra { margin: 2rem auto; width: min(700px, 100%); } .content-schmal.extra.formular { padding: 3rem; border-radius: 2rem; } .cont-inhalt.ohne-hintergrund { background: transparent; box-shadow: none; border-radius: 0; } .cont-inhalt.over-foto { margin-top: -7rem; } .content-schmal.extra.formular figure, .cont-inhalt.schmal figure { width: 100px; margin: 0 auto 10px auto; } .cont-inhalt .title { border-bottom: 1px solid var(--blau-hell); margin-bottom: 2.5rem; padding-bottom: 2.5rem; } .cont-inhalt li { background: transparent url(e862173064674861df27.svg) 0 13px no-repeat; background-size: 10px; text-indent: 0; padding-left: 18px; margin-bottom: 0.75rem; /* line-height: 170%; */ } .welcome-text { width: 100%; display: flex; flex: 1 1 50%; justify-content: center; align-items: center; gap: 2rem; } .welcome-text h1 { font-size: 2.20rem; line-height: 1.4; margin: 0; font-weight: 600; text-align: left; } .welcome-text p { font-size: 1.7rem; line-height: 1.8; color: var(--blau-dunkel); margin-bottom: 0; } /* ~~~~~~~~~~~~~~ shop-wrapper ~~~~~~~~~~~~~~~~~~~~~~~~~ */ .wrapper-produkte-filter, .wrapper-produkte { display: flex; flex-flow: row wrap; align-self: flex-start; } .wrapper-produkte { flex: 1 1 75%; gap: 2%; } .wrapper-produkte-filter { gap: 0; flex-flow: row nowrap; } .wrapper-filter { width: 290px; padding-right: 2rem; } /* ~~~~~~~~~~~~~~ cards ~~~~~~~~~~~~~~~~~~~~~~~~~ */ .card { position: relative; background: #fff; overflow: hidden; box-shadow: var(--box-shadow-2); overflow: hidden; border-radius: 1.0rem; display: flex; flex-flow: column; justify-content: space-between; margin-bottom: 1.5rem; } /* ~~~~~~ card Produkte ~~~~~~ */ .card.produkt { width: 23.5%; } .card figure { position: relative; width: 100%; overflow: hidden; line-height: 0; } .card .card-content { padding: 1.2rem 1.2rem 0 1.2rem; font-size: 1.25rem; display: flex; flex-flow: column; justify-content: space-between; flex: 1; } .card .titel h2 { color: var(--blau-dunkel); font-size: 1.5rem; margin: 0 0 0.5rem 0; text-align: left; } .artikel-nr p { background: var(--gelb-hell-hell); /* background: var(--gelb-hell); */ font-size: var(--step--2); padding: 0.2rem 0.5rem; border-radius: 5px; } .info-text { background: none; } .preis, .woocommerce-variation-price { font-size: 1.4rem; text-align: center; padding: 0.15rem 0; border-top: 1px dotted var(--blau-mittel); border-bottom: 1px dotted var(--blau-mittel); } .preis p, .woocommerce-variation-price p { margin-bottom: 0; font-weight: 600; } .card .weiter-link { align-self: flex-end; width: 100%; margin: 0 0 20px 0; padding-top: 10px; height: 40px; } .card .weiter-link p { color: #000; line-height: 100%; text-align: center; font-weight: 600; padding: 10px 0; margin-bottom: 0; font-size: var(--step-0); } .card .weiter-link p a, .card .weiter-link p a:link { margin: 0 auto 10px auto; padding: 7px 10px; border-radius: 5px; transition: all 0.45s ease-in-out; overflow: hidden; text-decoration: none; font-weight: 600; /* background: var(--gelb-dunkel); */ color: var(--blau-dunkel); } .card .weiter-link p a:hover, .card .weiter-link p a:focus { background-color: var(--gelb-dunkel); color: #000; } .card:hover img, .card:focus img { transform: scale(1.1); } /* ~~~ Card KOMPLETT verlinkt ~~~*/ .card.vorschau .weiter-link p a::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; /* background: rgba(0, 159, 227, 0); */ background: rgba(254, 200, 0, 0); transition: all 0.45s ease-in-out; } .card.vorschau .weiter-link p a:hover::before, .card.vorschau .weiter-link p a:focus::before { /* background: rgba(0, 159, 227, 0.15); */ background: rgba(254, 200, 0, 0.15); transition: all 0.45s ease-in-out; } /* ~~~~~~ cards Kontakt ~~~~~~ */ .wrapper-logos, .wrapper-kontakt { display: flex; flex-flow: row wrap; justify-content: space-between; margin-top: 2rem; } .card.logo, .card.kontakt { background: transparent; overflow: hidden; border-radius: 0; box-shadow: none; justify-content: flex-start; width: 33.33%; margin-bottom: 3rem; } .card.kontakt figure { overflow: hidden; border-radius: 50%; width: 200px; } .card.logo .card-content, .card.kontakt .card-content { justify-content: flex-start; padding: 1.2rem 0 0 0; } .card.kontakt p { margin-bottom: 0; } .card.kontakt .position { margin: 0.5rem 0; font-weight: 600; color: var(--grau-dunkel); } .card.kontakt address a, .card.kontakt address a:link { text-decoration: none; display: block; transform: scale(1); transform-origin: left; } .card.kontakt address a:hover, .card.kontakt address a:focus { text-decoration: none; transform: scale(1.1); } .card.kontakt address p { margin-bottom: 0.5rem; } .card.kontakt .weiter-link { display: flex; justify-content: flex-start; align-self: flex-start; } .card.kontakt .weiter-link p a, .card.kontakt .weiter-link p a:link { margin: 0 0 10px 0 !important; background: var(--gelb-dunkel); color: #000; font-size: var(--step-0); } .card.kontakt .weiter-link p a:hover, .card.kontakt .weiter-link p a:focus { background-color: var(--blau-dunkel-blacky); color: #fff; } /* ~~~~~~ cards logo ~~~~~~ */ .wrapper-logos { display: flex; flex-flow: row wrap; justify-content: flex-start; gap: 1rem; margin-top: 2rem; } .card.logo { width:23%; border: 1px solid var(--grau-mittel-hell); margin-bottom: 0.25rem; } .card.logo figure { overflow: hidden; border-radius: 0; aspect-ratio: 1/1; width: 100%; /* height:280px; */ display: flex; justify-content: center; align-items: center; } /* ~~~~~~ cards Filter ~~~~~~ */ .card.filter { flex: 1 1 100%; padding: 0.75rem 0.75rem 1.5rem 0.75rem; font-size: 1.15rem; line-height: 1.4rem; background: none; /* background: var(--gelb-hell-hell); margin-bottom: 1.5rem; */ box-shadow: none; } /* ~~~~~~ cards Detail ~~~~~~ */ .card.filter h2 { font-size: 1.3rem; text-align: left; margin-bottom: 0.5rem; } /* ~~~ Card DETAIL ~~~*/ /* .cont-inhalt.produkte-overview.detail { padding: 0; background: transparent; } */ .card.detail { /* padding: 3.5rem 2.5rem; */ padding: 0; flex-flow: row wrap; justify-content: flex-start; gap: 2rem; background: transparent; box-shadow: none; overflow: visible; } .card.detail .card-bild, .card.detail .card-content { width: 50%; } .card:hover img, .card:focus img { transform: scale(1); } .card.detail .card-content { width: 40%; align-self: flex-start; padding: 0; /* min-height: 18rem; */ font-size: 1.25rem; /* text-align: center; */ } .but-info { display:flex; flex-flow: row wrap; text-align: center; } .but-anker { display:flex; flex-flow: column; } .but-info a, .but-info a:link { position: relative; font-size: var(--step-0); text-decoration: none; padding: 0.75rem 2rem; background: var(--gelb-hell); border-radius: 5px; font-weight: 700; transform: scale(1); color:var(--blau-dunkel-blacky); margin: 0.5rem 1rem 1.5rem 0; } .but-info.blau a, .but-info.blau a:link { background: var(--blau-mittel-hell); } .but-info a:hover, .but-info a:focus { background: var(--gelb-dunkel); transform: scale(1.10); } .but-info.blau a:hover, .but-info.blau a:focus { background: var(--blau-dunkel-blacky); color: var(--weiss); } .card.detail .titel h2 { color: #000; font-size: 2.5rem; } .artikel-nr p { font-size: var(--step--1); margin-bottom: 1rem; } .info-text { line-height: 2rem; } .preis, .woocommerce-variation-price { font-size: 1.4rem; text-align: left; padding: 0.15rem 0; border-top: 1px dotted var(--blau-mittel); border-bottom: 1px dotted var(--blau-mittel); } .card.detail .titel h2, .artikel-nr p, .info-text { margin-bottom: 1rem; } .card.detail .weiter-link { display: block; margin: 2rem 0; } .card.detail .weiter-link p{ text-align: left; } .card.detail .weiter-link p a, .card.detail .weiter-link p a:link { margin: 2rem 0; text-align: left; padding: 0.75rem 1.5rem; background: var(--gelb-dunkel); color: #000; } .card.detail .weiter-link p a:hover, .card.detail .weiter-link p a:focus { background-color: var(--blau-dunkel-blacky); color: #fff; } .card.detail .menge-preis { display: flex; gap: 1rem; border-top: 1px dotted var(--blau-mittel); border-bottom: 1px dotted var(--blau-mittel); margin-bottom: 3rem; padding: 0.5rem 0; } .card.detail .preis, .card.detail .woocommerce-variation-price { font-size: 1.7rem; padding: 0 1rem 0 0; border-top: 0; border-bottom: 0; border-right: 1px dotted var(--blau-mittel); } .menge { display: flex; justify-content: flex-start; align-items: center; } .menge label { margin-right: 10px; } .shopping-cart .menge { /* margin-top: 1rem; */ max-width: 145px; margin-bottom: 10px; } .menge button { width: 40px; height: 40px; font-size: 1.5rem; font-weight: 600; border-radius: 6px; background: var(--gelb-hell); cursor: pointer; text-align: center; } .menge button.minus { margin-right: 4px; } .menge button.plus { margin-left: 4px; } .menge button:hover, .menge button:focus { background: var(--gelb-dunkel); /* border-color: #555; */ } .menge input[type="number"] { width: 60px; height: 40px; font-size: 1.25rem; text-align: center; border: 1px solid var(--grau-mittel); border-radius: 6px; box-sizing: border-box; } .menge input[type="number"]:focus { border-color: var(--blau-mittel); outline: none; } .box-fragen .button-link, .card.detail .button-link { height: 40px; margin: 3rem 0; display:block; } .box-fragen .button-link { margin: 2rem 0; } .box-fragen .button-link a, .box-fragen .button-link a:link, .card.detail .button-link a, .card.detail .button-link a:link, .card.detail .button-link button { display: block; font-weight: 700; font-size: 1.3rem; color: #000; background: var(--gelb-dunkel); text-decoration: none; text-align: center; padding: 0.5rem 1rem; overflow: hidden !important; border-radius: 7px; transform: scale(1); } .box-fragen .button-link a:hover, .box-fragen .button-link a:focus, .box-fragen .button-link.darkblue a:hover, .box-fragen .button-link.darkblue a:focus, .card.detail .button-link a:hover, .card.detail .button-link a:focus, .card.detail .button-link button:hover, .card.detail .button-link button:focus, .card.detail .button-link.darkblue a:hover, .card.detail .button-link.darkblue a:focus { color: var(--weiss); background: var(--blau-dunkel-blacky); align-self: center; transform: scale(1.05); } .card.detail .button-link button { width: 100%; cursor: pointer; height: 49px; } /* ~~~~~~ Nachricht f. Ware in Warenkorb gelegt ~~~~~~ */ .message-warenkorb { display: flex; justify-content: space-between; flex-flow: row wrap; align-items: center; padding: 1rem; margin-bottom: 2rem; background: var(--gelb-hell); font-size: 1.15rem; border-radius: 10px; } .message-warenkorb .produkt-info { position: relative; color: #000; align-self: flex-start; padding-left: 25px; } .message-warenkorb .produkt-info::before { content: ""; position: absolute; top: 4px; left: 0; height: 20px; width: 20px; background: transparent url(dafc6d664c2dfb836568.svg) 0 0 no-repeat; background-size: cover; } .message-warenkorb .warenkorb-link { align-self: flex-end; } .message-warenkorb .warenkorb-link a, .message-warenkorb .warenkorb-link a:link { display: block; text-decoration: none; transform: scale(1); transform-origin: right; } .message-warenkorb .warenkorb-link a:hover, .message-warenkorb .warenkorb-link a:focus { transform: scale(1.1); } /* ~~~ card als Listen-Beiträge ~~~~~~~~~~~~~~~*/ .card.alsListe { flex-flow: row wrap; align-items: flex-start; width: min(1000px, 100%); text-align: left; margin: 0 auto; background: transparent; border-radius: 0; gap: 1.5rem; padding: 3rem 0; border-bottom: 1px dotted var(--blau-mittel); overflow: hidden; box-shadow: none; } .card.alsListe h2 { font-size: 2rem; margin-bottom: 0.75rem !important; text-align: left; padding: 0; margin: 0; } /* .alsListe p { margin: 0; font-size: 95%; } */ .card.alsListe p.figure-copyright { font-size: 70%; } .card.alsListe figure { position: relative; width: 30%; aspect-ratio: 16 / 9; display: inline-block; overflow: hidden; margin: 0; padding: 0; vertical-align: top; line-height: 0; border-radius: 10px; } .card.alsListe figure.gelb-dunkel { background: var(--gelb-dunkel); } .card.alsListe figure.gruen-mittel { background: var(--gruen-mittel); } .card.alsListe figure.blau-dunkel { background: var(--blau-dunkel); } .card.alsListe figure.gelb-mittel { background: var(--gelb-mittel); } .card.alsListe figure.blau-mittel { background: var(--blau-mittel); } .card.alsListe .listentext { flex: 1 1 60%; width: 70%; vertical-align: top; padding: 0 5px 10px 0; } .card.alsListe.ohneBild .listentext { margin-left: 0; } .card.alsListe .weiter-link { align-self: flex-start; } .card.alsListe .weiter-link p { text-align: left; } .card.alsListe .weiter-link p a, .card.alsListe .weiter-link p a:link { margin: 0 0 10px 0; padding: 7px 10px; border-radius: 5px; transition: all 0.45s ease-in-out; overflow: hidden; text-decoration: none; color: var(--blau-dunkel); background-color: var(--gelb-hell); } .card.alsListe .weiter-link p a:hover, .card.alsListe .weiter-link p a:focus { background-color: var(--gelb-dunkel); color: #000; } .card.alsListe:hover img, .card.alsListe:focus img { transform: scale(1.1); } /* ~~~ alsListe KOMPLETT verlinkt ~~~*/ .card.alsListe .weiter-link p a::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(254, 200, 0, 0); transition: all 0.45s ease-in-out; } .card.alsListe .weiter-link p a:hover::before, .card.alsListe .weiter-link p a:focus::before { background: rgba(254, 200, 0, 0.15); transition: all 0.45s ease-in-out; } /* ~~~~~~~ Boxen ~~~~~~~ */ .box-hinweis.blau { position: relative; width: min(400px, 100%); margin: 1rem 0 3rem 0; padding: 6rem 2rem 2rem 2rem; background: var(--blau); border-radius: 1rem; color: var(--weiss); } .box-hinweis.blau a, .box-hinweis.blau a:link, .card.detail .box-hinweis.blau a, .card.detail .box-hinweis.blau a:link { position: relative; display: block; color: var(--weiss); padding: 0 0 10px 0; background: none; font-size: 1.25rem; transform: scale(1); transform-origin: left; text-decoration: none; border-bottom: 1px dotted var(--gelb-dunkel) } .box-hinweis.blau a:hover, .box-hinweis.blau a:focus, .card.detail .box-hinweis.blau a:hover, .card.detail .box-hinweis.blau a:focus { color: var(--gelb-dunkel); background: none; transform: scale(1.05); } .card.detail .box-hinweis.blau a::after { content: ""; position: absolute; top: 9px; right: 0; width: 7px; height: 12px; background: transparent url(ef090bb373748253d2ce.svg) 0 0 no-repeat; background-size: contain; } .box-hinweis::before { content: ""; position: absolute; top: 25px; left: 2rem; width: 50px; min-height: 50px; background: transparent url(7113d954dfab94f51154.svg) 0 0 no-repeat; background-size: cover; } .box-hinweis.gelb { background: var(--gelb-dunkel); } .box-fragen, .box-anmelden { width: min(700px, 100%); padding: 3.5rem; margin: 2.5rem auto 3.5rem auto; background: var(--gelb-hell); font-weight: 700; border-radius: 1.9rem; } .box-anmelden figure { width: 100px; margin: 0 auto 10px auto; } .box-fragen, .box-fragen.blau { padding: 2.5rem 0.5rem 2.5rem 3.5rem; background: var(--blau-hell); font-weight: 400; } .box-fragen.gelb { background: var(--gelb-hell); } .box-fragen h2 { font-size: 2rem; text-align: left; margin-top: 0; font-weight: 700; } .box-fragen h3 { font-size: 1.55rem; margin: 0; font-weight: 700; } .box-fragen .bild-text { display: flex; gap: 1.5rem; align-items: center; } .box-fragen .bild-text p.funktion { font-size: var(--step-0); line-height: 1.5rem; font-weight: 600; } .box-fragen .bild-text figure { width: 180px; height: 180px; border-radius: 50%; overflow: hidden; } .box-fragen .bild-text address { font-size: 1.3rem; line-height: 1.6rem; margin: 1rem 0; } .box-fragen .bild-text address a { display: block; text-decoration: none; transform: scale(1); transform-origin: left; } .box-fragen .bild-text address a:hover, .box-fragen .bild-text address a:focus { text-decoration: none; transform: scale(1.1); text-decoration: underline; } .box-fragen.blau .button-link a { background: var(--blau-dunkel); color: var(--weiss); } .box-fragen.blau .button-link a:hover, .box-fragen.blau .button-link a:focus { background: var(--blau-dunkel-blacky); } /* ~~~ Video ~~~ */ .videobox { position: relative; display: block; width: min(1000px, 100%); margin: 0 auto 30px auto; padding: 0; } .video { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; } .videobox, .videobox video { position: relative; width: 100%; height: 100%; display: block; } /* Für Video iframe*/ .video-extern { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* ~~~~~~~ Statement ~~~~~~~ */ /* .statement { position: relative; width: min(100% , 1200px); margin: auto 0; padding-right: 5rem; } */ /* .statement .text { position: relative; font-size: 1.3rem; width: 100%; border-radius: 2.4rem; padding: 5rem 15.5rem 5.1rem 14.2rem; background: var(--blau-hell-hell); font-weight: 600; color: #000; } */ /* .statement .text::before { content: ""; position: absolute; left: 5rem; top: 5.5rem; width: 5rem; height: 5rem; background: transparent url(../../assets/images/statment.svg) 0 0 no-repeat; background-size: cover; } */ /* .statement figure { position: absolute; top: 50%; right: -3.1rem; transform: translateY(-50%); width: min(100% , 250px); height: min(100% , 250px); overflow: hidden; border-radius: 50%; padding: 0; } */ .statement { position: relative; width: min(1200px, 100%); margin: 6rem auto; padding-right: 0; } .statement .text { position: relative; font-size: 1.3rem; width: 100%; border-radius: 2.4rem; padding: 5rem 22rem 5.1rem 13rem; background: var(--blau-hell-hell); font-weight: 600; color: #000; } .statement.gelb .text { background: var(--gelb-hell); } .statement .text p.name { font-size: var(--step-0); font-weight: 400; color: #000; margin-top: 15px; } .statement .text::before { content: ""; position: absolute; left: 5rem; top: 5.5rem; width: 5rem; height: 5rem; background: transparent url(8a4324a0609a9a2607e7.svg) 0 0 no-repeat; background-size: cover; } .statement.gelb .text::before { background: transparent url(906f3ea0689f1c8618b1.svg) 0 0 no-repeat; background-size: cover; } .statement figure { position: absolute; top: 50%; right: 4rem; transform: translateY(-50%); width: min(100% , 250px); height: min(100% , 250px); overflow: hidden; border-radius: 50%; padding: 0; } .statement .text.no-statement::before { content: unset; } /* ~~~~~~~ Footer ~~~~~~~ */ #footer { background-color: var(--grau-hell); border-top: 1px solid var(--blau-mittel); padding: 4rem 0 7rem 0; position: relative; } #footer .kontakt-daten { display: flex; flex-flow: row wrap; justify-content: center; gap: 1.5em; padding: 0 1rem 4rem 1rem; } #footer .contact, #footer .newsletter { border-radius: 2.4rem; padding: 3rem 2.0rem; width: min(550px, 48%); } #footer .contact p, #footer .contact li { font-size: 1.3rem; } #footer .contact a, #footer .contact a:link { display: block; color: var(--weiss); text-decoration: none; transform: scale(1); transform-origin: left; font-weight: 700; } #footer .contact a:hover, #footer .contact a:focus { color: var(--gelb-mittel); text-decoration: underline; transform: scale(1.075); } #footer .contact { background-color: var(--blau); color: var(--weiss) } #footer .newsletter { background-color: var(--blau-hell-hell); color: var(--blau-dunkel); } #footer .contact h2, #footer .newsletter h2 { font-weight: 700; text-align: left; margin-bottom: 2rem; } #footer .contact p, #footer .newsletter p { font-size: 1.3rem; } /* address p { margin-bottom: 2rem; } */ #footer .button-link { margin-top: 2em; justify-content: flex-start; } #footer .nav-footer { border-bottom: 1px solid var(--blau-mittel); border-top: 1px solid var(--blau-mittel); padding: 1.5rem 0; width: 100%; } .nav-footer ul { display: flex; flex-flow: row wrap; justify-content: center; align-items: center; } .nav-footer ul li a, .nav-footer ul li a:link { display:block; color: var(--blau-dunkel); padding: 0.5rem 1.0rem; text-decoration: none; font-size: var(--step-0); font-size: 1.2rem; font-weight: 700; transform: scale(1); } .nav-footer ul li a:hover, .nav-footer ul li a:focus { color: var(--blau-dunkel-blacky); transform: scale(1.15); } .nav-footer ul li.akt a, .nav-footer ul li.akt a:link, .nav-footer ul li.akt a:hover, .nav-footer ul li.akt a:focus { color: #000; font-weight: 800; transform: scale(1); } .copyright { width: 100%;; margin: 15px auto; text-align: center; font-size: var(--step--1); font-weight: 300; } #pfeil-top-cont { display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; height: 100px; width: 100%; } .pfeil-top { width: 70px; height: 70px; } .pfeil-top a, .pfeil-top a:link { display: block; z-index: 300; width: 100%; height: 100%; background: transparent url(f52e52af5873c998cbb0.svg) 0 0 no-repeat; background-size: 100% 100%; border: 2px solid var(--blau-dunkel); border-radius: 50%; } .pfeil-top a:focus, .pfeil-top a:hover { background: var(--gelb-dunkel) url(9ec745b2e41b3d1a7be9.svg) 0 0 no-repeat; background-size: 100% 100%; } .branding { position: absolute; right: 0; bottom: 0; width: min(100%, 700px); max-width: 700px; height: 100%; max-height: 79px; } .branding figure { position: relative; width: 100%; padding: 0; margin: 0; } .branding figure a, .branding figure a:link { position: absolute; top: 0; right: 0; width: 100%; height: 100%; padding: 0; margin: 0; line-height: 0; } /* ~~~ Copyright bei Bildern~~~*/ p.figure-copyright { position: absolute; z-index: 100; left: 0; bottom: -1px; font-size: var(--step--2); line-height: 120%; color: #000; margin: 0; padding: 3px 0; transition: all 0.2s ease-in-out; } p.figure-copyright::after { margin: 0; } p.figure-copyright:hover { background: rgba(255, 255, 255, 0.8); } p.figure-copyright::before { content: "© "; background: rgba(255, 255, 255, 0.5); padding: 3px 3px 3px 5px; border-radius: 3px; } .figure-copyright-content { opacity: 0; border-radius: 3px; transition: all 0.2s ease-in-out; } p.figure-copyright:hover .figure-copyright-content { opacity: 1; /* background: rgba(255, 255, 255, 0.5); */ padding: 3px 3px 3px 0; } .card.alsListe figure.bild p.figure-copyright { bottom: 0; } /* ~~~~~~~~~~~~~~ slick-slider Produkte ~~~~~~~~~~~~~~~~~~~~~~~~~ */ .slider-01, .slider-02 { position: relative; width: min(100%, 1200px); margin: 1.5em auto 0 auto; padding: 1.5rem 2rem 1.5rem 4rem; } .slider-01 .slick-slide { margin: 0; transform: scale(0.9); transition: all 0.4s ease-in-out; } .slider-01 .slick-slide img { max-width: 100%; transition: all 0.4s ease-in-out; } .slider-01 .slick-center { transform: scale(1); } .slider-01, .slider-02 { padding: 1rem 0 4rem 0; } .slick-dots { bottom: 25px; } .slider-01 .slick-prev { left: 0; } .slider-01 .slick-next { right: 0; } .slider-01 .slick-slide { opacity: 0; pointer-events: none; /* keine Klicks auf inaktive */ } .slider-01 .slick-slide.slick-active { opacity: 1; pointer-events: auto; } /* ===== Slider-01: Pfeile & Dots – rein per CSS ===== */ /* 1) Basis: Buttons sichtbar, Größe/Position */ .slider-detail .slick-prev, .slider-detail .slick-next, .slider-01 .slick-prev, .slider-01 .slick-next { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; margin: 0; padding: 0; border: 0; background: rgba(9, 35, 61, 0.4); border-radius: 50%; cursor: pointer; transform: scale(1); z-index: 5; transition: all 0.2s ease-in-out; } .slider-01 .slick-prev, .slider-01 .slick-next { top: 45%; } .slider-01 .slick-prev:hover, .slider-01 .slick-next:hover, .slider-01 .slick-prev:focus, .slider-01 .slick-next:focus, .slider-detail .slick-prev:hover, .slider-detail .slick-next:hover { background: rgba(9, 35, 61, 0.8); transform: scale(1.1); transition: all 0.2s ease-in-out; } .slider-01 .slick-prev, .slider-01 .slick-next, .slider-detail .slick-dots li button::before, .slider-01 .slick-dots li button::before { overflow: hidden; border-radius: 50%; /* border: 2px solid var(--blau-mittel); */ } .slider-detail .slick-dots li button::before, .slider-01 .slick-dots li button::before { border: 2px solid var(--blau); } /* 2) Icons per ::before ERZEUGEN (unabhängig vom Theme) */ .slider-01 .slick-prev::before, .slider-01 .slick-next::before { content: ""; display: block; width: 44px; height: 44px; background: transparent url(5a794f2da096a0d8c2b2.svg) 0 0 no-repeat; background-size: cover; transform-origin: center center; } /* Rechts-Pfeil */ .slider-01 .slick-prev::before { transform: scaleX(-1); } .slider-01 .slick-prev:active::before, .slider-01 .slick-next:active::before { transform: scale(0.95); /* kleiner Klick-Feedback */ } .slider-01 .slick-prev.slick-disabled::before, .slider-01 .slick-next.slick-disabled::before { opacity: 0.35; /* disabled */ cursor: default; } /* 4) Dots: NICHT die
  • einfärben (die verdecken nur), sondern das Button-::before wie bei Slick-Klassik */ .slider-detail .slick-dots, .slider-01 .slick-dots { bottom: 0.75rem; } .slider-detail .slick-dots li, .slider-01 .slick-dots li { margin: 0 5px; height: 20px; width: 20px; background: transparent; border-radius: 0; margin: 0 0.5rem; } .slider-detail .slick-dots li button, .slider-01 .slick-dots li button { width: 20px; height: 20px; padding: 0; } .slider-detail .slick-dots li button::before, .slider-01 .slick-dots li button::before { content: ""; display: block; width: 20px; height: 20px; opacity: 0.35; background: var(--gelb-mittel); } .slider-detail .slick-dots li button:hover::before, .slider-detail .slick-dots li button:focus::before, .slider-01 .slick-dots li button:hover::before, .slider-01 .slick-dots li button:focus::before { opacity: 1; background: var(--gelb-mittel); } .slider-detail .slick-dots li.slick-active button::before, .slider-01 .slick-dots li.slick-active button::before { opacity: 1; } /* ~~~~~~~~~~~~~~ slick-slider DETAIL ~~~~~~~~~~~~~~~~~~~~~~~~~ */ :where( a, button, [role="button"], [tabindex], input, select, textarea ):focus-visible { outline: 3px solid var(--focus); outline-offset: 0; } .product-gallery { max-width: 770px; display: grid; grid-template-columns: var(--thumbW) 1fr; gap: var(--gap); align-items: start; width: 100%; /* padding-bottom: 2rem; */ /* margin: 2rem 0 0 0; */ } .product-gallery > * { min-width: 0; } .slider-nav-wrap { width: var(--thumbW); /* overflow-y: scroll; */ } .slider-detail { position: relative; min-width: 0; } .slider-detail .slick-list { border-radius: 0.75rem; overflow: hidden; max-width: 100%; aspect-ratio: 1/1; } .slider-detail .zoom-btn { /* display: block; */ display: flex; align-items: center; width: 100%; aspect-ratio: 1/1; } .slider-detail img { width: 100%; /* height: 100%; */ -o-object-fit: cover; object-fit: cover; display: block; } .slider-detail .slick-prev { left: 8px; } .slider-detail .slick-next { right: 8px; } .slider-detail .slick-prev svg, .slider-detail .slick-next svg { width: 22px; height: 22px; fill: #fff; } .slider-detail .slick-dots { bottom: -2.5rem; display: none !important; } .slider-nav { display: grid; gap: 8px; overflow: auto; } .slider-nav button.thumb { display: block; width: 100%; aspect-ratio: 1/1; /* border: 2px solid #000; */ border-radius: 4px; background: transparent; padding: 0; transform: scale(0.9); opacity: 0.8; border-radius: 5px; transition: all 0.2s ease-in-out; } .slider-nav button.thumb img { width: 100%; /* height: 100%; */ -o-object-fit: cover; object-fit: cover; border-radius: 5px; display: block; } .slider-nav button.thumb:hover { transform: scale(1); opacity: 1; cursor: pointer; } .slider-nav button[aria-selected="true"] { border-color: var(--focus); box-shadow: none; transform: scale(1); border: 1px solid #000; opacity: 1; transition: all 0.2s ease-in-out; } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Overrides: Pfeile sicher sichtbar & über der List */ .slider-detail .slick-prev, .slider-detail .slick-next { z-index: 3; opacity: 1; } /* Thumbs dürfen nicht höher als der Slider werden; Scroll bei Overflow */ .slider-nav { max-height: 100%; } /* Fix: Slides füllen stets die List-Höhe → kein kurzzeitiges Kollabieren */ .slider-detail .slick-track, .slider-detail .slick-slide { height: 100%; } .slider-detail .zoom-btn /* .slider-detail .zoom-btn img */ { height: 100%; } /* ~~~~~~~~~~~~~~~~~~~~~~~~~~ Formulare ~~~~~~~~~~~~~~~~~~~*/ /*~~~~~~ eingabe ~~~~~~*/ ::-moz-placeholder { color: var(--blau-dunkel); opacity: 1; -moz-transition: opacity 1s; transition: opacity 1s; } ::placeholder { color: var(--blau-dunkel); opacity: 1; transition: opacity 1s; } :focus::-moz-placeholder { opacity: 0; } :focus::placeholder { opacity: 0; } input, select, textarea, button { font-size: inherit; font-family: inherit; } form { font-size: 1.3rem; } form a, form a:link { text-decoration: none; } form a:hover, form a:focus { text-decoration: underline; } .wpforms-field input[type="text"], .wpforms-field input[type="email"], .form-box input[type="text"], .form-box input[type="email"] { position: relative; height: 40px; width: 100%; padding: 10px; border-radius: 7px; margin: 0.5rem 0 1rem 0; border: 1px solid var(--blau-mittel); max-width: 592px; } /*~~~~~~ Formular Funktion ~~~~~~~~~~~~~~*/ /* Formular-Felder */ .wpforms-field, .form-box { height: auto; padding: 0; } sup { line-height: inherit; font-size: var(--step--1); vertical-align: top; } .form-box.auswahl-formular, .form-box.plz { width: 49%; display: inline-block; } .form-box.plz { max-width: 180px; margin-left: 2%; } .form-box.auswahl-formular label, .form-box.plz label { display: block; width: 100%; } .form-box.check { max-height: 50px; margin-bottom: 5px; font-weight: 600; } .form-box.check.sub { margin-left: 25px; font-weight: 300; } .form-box.check.sub-sub { margin-left: 50px; font-weight: 300; } /* Labels */ .form-box.check label { display: inline-block; } .form-box.auswahl-formular label, .form-box.plz label { margin: 0 0 7px 0; } /* remove standard-styles */ /* .form-box input, .form-box select, .form-box textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; font-size: 1rem; width: 85%; } */ .form-box input, .form-box select, .wpforms-field select .form-box textarea { font-size: 1rem; } .form-box textarea { resize: vertical; border: 2px solid var(--blau-dunkel); border-radius: 4px; padding: 5px 10px; transition: all 0.4s ease-in-out; } .form-box textarea:hover, .form-box textarea:active, .form-box textarea:focus { box-shadow: inset 0 2px 1px 0 rgba(0, 0, 0, 0.2); /* background: var(--blau-20); */ transition: all 0.4s ease-in-out; } .form-box.select, .wpforms-field select { position: relative; display: flex; width: 100%; height: auto; overflow: hidden; margin: 0.5rem 0; } /* .form-box.select::after { content: ""; position: absolute; top: 15px; right: 18px; width: 25px; height: 14px; background: transparent url("../../assets/images/pfeil-menu-zu.svg") 0 0 no-repeat; background-size: 25px; pointer-events: none; } */ /* Select */ .form-box select, .wpforms-field select { width: 100%; padding: 10px; margin: 0; box-shadow: var(--box-shadow); border-radius: 5px; border: 1px solid var(--blau-mittel); font-weight: 600; } .form-box input.kurz { width: 33%; } .form-box select:hover, .form-box select:focus, .wpforms-field select:hover, .wpforms-field select:focus { background: var(--blau-mittel-hell); transition: all 0.4s ease-in-out; cursor: pointer; border: 1px solid var(--blau); } .form-box select:hover option, .form-box select:focus option, .wpforms-field select:hover option, .wpforms-field select:focus option { background: #fff; border-radius: 0; } .ort, .art { width: 49%; display: inline-block; vertical-align: top; } .art { font-style: italic; } /* Hide browser-styling in IE10 */ .form-box select::-ms-expand, .wpforms-field select::-ms-expand { display: none; } /* Hide custom-icons in lower versions of Internet Explorer (< IE10). */ .lt-ie10 .form-box select, .wpforms-field select { background-image: none; } /* graceful degradation for ie8 */ .wpforms-field.wpforms-field-checkbox input[type="checkbox"], .wpforms-field.wpforms-field-radio input[type="radio"], .form-box input[type="checkbox"], .form-box input[type="radio"] { position: absolute; width: auto; float: left; margin-right: 0.75em; background: transparent; border: none; } /* hide standard inputs" */ .wpforms-field.wpforms-field-checkbox input[type="checkbox"]:checked, .wpforms-field.wpforms-field-checkbox input[type="checkbox"]:not(:checked), .wpforms-field.wpforms-field-radio input[type="radio"]:checked, .wpforms-field.wpforms-field-radio input[type="radio"]:not(:checked), .form-box input[type="checkbox"]:checked, .form-box input[type="checkbox"]:not(:checked), .form-box input[type="radio"]:checked, .form-box input[type="radio"]:not(:checked) { background: transparent; position: absolute; margin: 0; padding: 0; /* bug: page jumps up when clicked top: -1000px; left: -1000px; */ outline: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .wpforms-field.wpforms-field-checkbox input[type="checkbox"] + label, .wpforms-field.wpforms-field-radio input[type="radio"] + label, .form-box input[type="checkbox"] + label, .form-box input[type="radio"] + label { cursor: pointer; position: relative; margin-left: 30px; text-indent: -30px; vertical-align: top; list-style: none; font-weight: 400; } /* NOTLÖSUNG!!!!!!!!!! - weil checkboxen um 30 px versetzt sind */ .wpforms-field.wpforms-field-checkbox input[type="checkbox"] + label { margin-left:0; } /* NOTLÖSUNG!!!!!!!!!! - weil checkboxen um 30 px versetzt sind */ /* add custom inputs with ::before */ .wpforms-field.wpforms-field-checkbox input[type="checkbox"]:checked + label::before, .wpforms-field.wpforms-field-checkbox input[type="checkbox"]:not(:checked) + label::before, .wpforms-field.wpforms-field-radio input[type="radio"]:checked + label::before, .wpforms-field.wpforms-field-radio input[type="radio"]:not(:checked) + label::before, .form-box input[type="checkbox"]:checked + label::before, .form-box input[type="checkbox"]:not(:checked) + label::before, .form-box input[type="radio"]:checked + label::before, .form-box input[type="radio"]:not(:checked) + label::before { content: ""; display: inline-block; width: 23px; height: 23px; position: relative; top: 5px; left: 0; border: 1px solid var(--blau-mittel); margin-right: 5px; background: var(--weiss); border-radius: 3px; } .wpforms-field.wpforms-field-radio input[type="radio"]:checked + label::before, .wpforms-field.wpforms-field-radio input[type="radio"]:not(:checked) + label::before, .form-box input[type="radio"]:checked + label::before, .form-box input[type="radio"]:not(:checked) + label::before { border-radius: 50%; margin: 7px 7px 0 -30px; } .wpforms-field.wpforms-field-checkbox input[type="checkbox"]:checked + label::after, .form-box input[type="checkbox"]:checked + label::after { display: block; content: ""; position: absolute; top: 10px; left: -21px; width: 6px; height: 12px; transform: rotate(45deg); border: 2px solid var(--weiss); border-top: 0; border-left: 0; } /* NOTLÖSUNG!!!!!!!!!! - weil checkboxen um 30 px versetzt sind */ .wpforms-field.wpforms-field-checkbox input[type="checkbox"]:checked + label::after { top: 6px; left: 9px; } /* NOTLÖSUNG!!!!!!!!!! - weil checkboxen um 30 px versetzt sind */ /* hover - focus */ .wpforms-field.wpforms-field-checkbox input[type="checkbox"]:hover + label::before, .wpforms-field.wpforms-field-checkbox input[type="checkbox"]:focus + label::before, .wpforms-field.wpforms-field-checkbox input[type="checkbox"] + label:hover::before, .wpforms-field.wpforms-field-checkbox input[type="checkbox"] + label:focus::before, .form-box input[type="checkbox"]:hover + label::before, .form-box input[type="checkbox"]:focus + label::before, .form-box input[type="checkbox"] + label:hover::before, .form-box input[type="checkbox"] + label:focus::before, .wpforms-field.wpforms-field-radio input[type="radio"]:hover + label::before, .wpforms-field.wpforms-field-radio input[type="radio"]:focus + label::before, .wpforms-field.wpforms-field-radio input[type="radio"] + label:hover::before, .wpforms-field.wpforms-field-radio input[type="radio"] + label:focus::before, .form-box input[type="radio"]:hover + label::before, .form-box input[type="radio"]:focus + label::before, .form-box input[type="radio"] + label:hover::before, .form-box input[type="radio"] + label:focus::before { background: var(--blau-mittel); transition: all 0.4s ease-in-out; } .wpforms-field.wpforms-field-checkbox input[type="checkbox"] + label:hover, .wpforms-field.wpforms-field-checkbox input[type="checkbox"] + label:focus, .form-box input[type="checkbox"] + label:hover, .form-box input[type="checkbox"] + label:focus, .wpforms-field.wpforms-field-radio .form-box input[type="radio"]:hover + label, .wpforms-field.wpforms-field-radio .form-box input[type="radio"]:focus + label, .form-box input[type="radio"]:hover + label, .form-box input[type="radio"]:focus + label { color: var(--blau-dunkel); } /* checked */ .wpforms-field.wpforms-field-checkbox input[type="checkbox"]:checked + label::before, .wpforms-field.wpforms-field-radio input[type="radio"]:checked + label::before, .form-box input[type="checkbox"]:checked + label::before, .form-box input[type="radio"]:checked + label::before { background: var(--blau-dunkel); transition: all 0.4s ease-in-out; } .wpforms-field.wpforms-field-radio input[type="radio"]:checked + label::before, .form-box input[type="radio"]:checked + label::before { box-shadow: inset 0 0 0 3px var(--weiss); } .wpforms-field.wpforms-field-radio input[type="radio"]:checked + label::after .form-box input[type="radio"]:checked + label::after { top: 11px; left: -20px; width: 8px; height: 8px; } /* Speziell für diesen Fall Bullets ausgeschaltet */ #wpforms-5656-field_4 li, #wpforms-5656-field_5 li { background: transparent; padding-left: 0; margin-bottom: 0.5rem; } .wpforms-field-label { font-weight: 600; margin-bottom: 0.35rem; } fieldset { margin-bottom: 1rem; } .wpforms-field-label, .wpforms-form label, .wpforms-form select, .wpforms-form select option { font-size: 90%; } /*~~~~~~ suchfelder für auswahl-formular und diy ~~~~~~*/ .form-feld.auswahl-filter-formular { width: 100%; max-width: 900px; /* min-height: 300px; */ margin: 20px 15px; border-radius: 1rem; padding: 1rem 2rem 0.75rem 2rem; background: var(--gelb-hell-hell); } .form-feld.auswahl-filter-formular h2, h2.supplier-title { font-size: 1.2rem; font-weight: 600; text-align: left; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px dotted var(--blau-mittel); } /*~~~~~~~~~~~~~ Container für ein- und ausgeklappen ~~~~~~~~~~~~~~*/ .cont-aufklapp { position: relative; float: none; clear: both; max-width: 900px; margin: 10vh auto; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 13px 0 20px 0; border-radius: 5px; box-shadow: var(--box-shadow); } .cont-aufklapp .rahmen.auswahl-formular .cont-aufklapp .headline { width: 100%; max-width: 100%; padding: 0; margin-bottom: 15px; box-shadow: var(--box-shadow); } .cont-aufklapp .headline { margin-bottom: 7px; padding: 0; box-shadow: none; } .cont-aufklapp .headline p { text-align: center; margin-bottom: 0; } .form-feld.auswahl-filter-formular label { color: #000; font-weight: 400; } /*~~~~~~~~~~~~~ form-feld modifiziert für eingeklappt ~~~~~~~~~~~~~~*/ .rahmen.auswahl-formular .form-feld.auswahl-filter-formular { margin: 0; display: flex; flex-flow: row wrap; justify-content: space-between; } .rahmen.auswahl-formular .form-feld.spalte { flex-flow: row wrap; } .form-feld.spalte { margin: 20px 15px; border-radius: 0.75rem; padding: 0; background: var(--gelb-hell-hell); } .auswahl-filter-formular > .card.filter { width: 45%; } /*~~~~~~~~~~~~~ form-feld eingeklappt ~~~~~~~~~~~~~~*/ .rahmen.auswahl-formular { position: relative; width: 100%; margin: 0; overflow: hidden; } .toggle, .toggle.offen { position: absolute; width: 20px; height: 20px; outline: 0; display: inline-block; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .toggle.offen + label, .rahmen.offen.auswahl-formular .toggle + label, .toggle + label { position: relative; background: var(--blau-hell-hell); color: #000; width: auto; font-weight: 600; line-height: 130%; font-style: normal; text-align: center; padding: 10px 10px 10px 15px; border-radius: 7px; display: block; cursor: pointer; transition: all 0.45s ease-in-out; /* margin: 2em 0 0 0; */ } .toggle.offen + label, .rahmen.auswahl-formular .toggle.offen + label { max-height: 0vh; opacity: 0; padding: 0; } .toggle + label:hover, .toggle + label:focus, .toggle:hover + label, .toggle:focus + label, .toggle:checked + label { color: var(--weiss); background: var(--blau-dunkel-blacky); transition: all 0.45s ease-in-out; } .toggle:checked + label::after { transform: rotate(90deg); } .toggle ~ .details { max-height: 0vh; opacity: 0; overflow: hidden; transition: max-height 0.5s, opacity 0.25s; } .toggle:checked ~ .details { max-height: 100vh; opacity: 1; transition: 1.5s; } .toggle.offen ~ .details { max-height: 100%; opacity: 1; transition: 1.5s; } /* Tabelle */ /* .form-field table { width: 100%; margin-top:0.5rem; } .form-field td, .form-field td:first-child .col2, th { width:100%; padding: 0.2em; margin-bottom:5px; text-align: left; vertical-align:top; } .form-field th { margin:7px 0 7px 0; padding:10px 7px; border:none; width:100%;} .form-field td:first-child { text-align:right; width:30%; border:none; padding-top:9px;} .form-field td.col2:first-child, th { text-align: left; padding-left:30px; } #hinweis { padding-bottom:15px; border-bottom:2px solid #fff; } .mini { font-size:0.8em; font-style:italic; margin-left:1em; } */ /* ~~~~~~~~~~ Warenkorb = shopping cart ~~~~~~~~~~~~~~~~~~~~~~~~~*/ .form-field table { width: 100%; margin-top:0.5rem; } .shopping-cart { font-size: 1.25rem; } .shopping-cart thead { background: var(--gelb-hell); font-weight: 600; } .shopping-cart tbody td { border-right: 1px var(--blau-mittel); } .shopping-cart td:first-child { text-align: left; } .shopping-cart td:first-child, .shopping-cart th, .shopping-cart td, .shopping-cart thead th { width: auto; padding: 0.5rem 0.25rem 0rem 0.25rem; vertical-align: middle; text-align: left; } .shopping-cart tfoot td.total-price-wort, .shopping-cart tfoot td.total-price { padding: 10px 5px; text-align: right; } .shopping-cart th.total-price, .shopping-cart td.price, .shopping-cart th.price, .shopping-cart th.total-price, .shopping-cart td.total-price { text-align: right; } .shopping-cart td.product-thumbnail { padding: 5px 0 0 0; } .shopping-cart td.product-thumbnail img { height: 70px; width: auto; margin: 0; } .shopping-cart tbody tr { border-bottom: 1px solid var(--blau-mittel); } .shopping-cart tfoot { font-weight: 600; } .shopping-cart thead th { padding: 7px 5px; } .shopping-cart td.remove-button { position: relative; height: 40px; width: 40px; padding: 0 10px; } .shopping-cart td.remove-button a { position: absolute; height: 40px; width: 40px; top: 20px; left: 0px; background: transparent url(6b37d8179fbc78be1e90.svg) 0 0 no-repeat; background-size: contain; border-radius: 7px; opacity: 0.75; } .shopping-cart td.remove-button a:hover, .shopping-cart td.remove-button a:focus { background: var(--gelb-dunkel) url(6b37d8179fbc78be1e90.svg) 0 0 no-repeat; background-size: contain; opacity: 1; } #shopping-cart-button { display: flex; flex-flow: row wrap; justify-content: flex-end; gap: 0.5rem; } .produktname { max-width: 260px; } .shopping-cart td.produktname a, .shopping-cart td.produktname a:link, .shopping-cart td.product-thumbnail img, .shopping-cart .remove { transition: all 0.35s ease-in-out; transform: scale(1); transform-origin: center; text-decoration: none; } .shopping-cart td.produktname a:hover, .shopping-cart td.produktname a:focus, .shopping-cart td.product-thumbnail img:hover, .shopping-cart .remove:hover { transition: all 0.35s ease-in-out; transform: scale(1.1); text-decoration: underline; } /* ~~~~~~~~~~~ Buttons ~~~~~~~~~~~~~~*/ .wpforms-submit .submit, .submit.finish, .submit.update, .form-box .submit { width: auto; margin: 1rem 0; padding: 1rem; font-size: 1.3rem; font-weight: 600; } .submit.finish, .submit.update { max-width: 280px; } .submit.finish { text-align: center; } /* Button Submit */ button.wpforms-submit, .submit.finish, .submit.update, .form-box > button { height: 48px; border: 0; border-radius: 7px; border: none; padding: 8px 16px; cursor: pointer; background-color: #fff; color: var(--blau); transition: all 0.45s ease-in-out; width: 100%; } button.wpforms-submit[type="submit"], .submit.finish, .submit.update, .form-box > button[type="submit"] { position: relative; color: #000; background: var(--gelb-dunkel); font-weight: 600; transition: all 0.45s ease-in-out; width: 100%; margin: 1em 0; } .wpforms-submit[type="submit"]:hover, .wpforms-submit[type="submit"]:focus, .submit.update:hover, .submit.update:focus, .submit.finish:hover, .submit.finish:focus, .form-box button[type="submit"]:hover, .form-box button[type="submit"]:focus { color: #fff; background: var(--blau-dunkel-blacky); transition: all 0.45s ease-in-out; text-decoration: none; } .wpforms-submit button[type="reset"]:hover, .wpforms-submit button[type="reset"]:focus, .submit.update, .submit.update, .form-box button[type="reset"]:hover, .form-box button[type="reset"]:focus { background: var(--blau-mittel-hell); transition: all 0.45s ease-in-out; } /*~~~~~~~ Submit mit link NUR FÜR ENTWURFS-PRÄSENTATION ~~~~~~~~~*/ button.wpforms-submit[type="submit"] a, .form-box button[type="submit"] a { position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding-top: 7px; text-decoration: none; color: #000; } button.wpforms-submit[type="submit"] a:hover, .form-box button[type="submit"] a:hover { color: #fff; } /*~~~~~~~ Submit mit LINK ENDE NUR FÜR ENTWURFS-PRÄSENTATION ~~~~~~~~~*/ /* ~~~~~~~~~~~~~~~~~ FANCYBOX ~~~~~~~~~~~~~~~~~~~~ */ .f-button, .fancybox-infobar__body { background: var(--blau); opacity: 0.5; } .f-button:hover { opacity: 1; } .fancybox-caption-wrap { background: var(--blau); } .fancybox-caption { padding: 30px 0; font-size: 120%; line-height: 100%; text-align: center; border-top: none; color: #fff; } .fancybox-infobar__body { display: inline-block; width: 70px; line-height: 44px; font-size: 1em; } .f-button { width: 60px; height: 60px; line-height: 60px; } .fancybox-placeholder { box-sizing: content-box; } .fancybox-button--play::before, .fancybox-button--fullscreen::before { top: 23px; left: 25px; } .fancybox-button--thumbs::before { top: 27px; left: 27px; } .fancybox-placeholder::before { content: ""; background: #fff; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .fancybox-controls { position: static; } .fancybox-button--left, .fancybox-button--right { position: absolute; top: 50%; transform: translateY(-50%); height: 88px; width: 88px; line-height: 88px; } .fancybox-button--left::after, .fancybox-button--right::after { width: 18px; height: 18px; margin: 18px; } .fancybox-button--left { left: 0; } .fancybox-button--right { right: 0; } .fancybox-infobar__body { position: absolute; top: 0; } .fancybox-infobar__body, .fancybox-button--left, .fancybox-button--right, .fancybox-buttons { z-index: 99994; } .fancybox-bg { background: rgba(0, 0, 0, 0.9); } .fancybox-infobar { display: block; } .fancybox-caption-wrap { padding: 0; background: linear-gradient( 180deg, transparent 0, rgba(0, 0, 0, 0.1) 20%, rgba(0, 0, 0, 0.2) 40%, rgba(0, 0, 0, 0.6) 80%, rgba(0, 0, 0, 0.8) ); opacity: 1; transition: opacity 0.2s; } .fancybox-container--ready .fancybox-bg { opacity: 0.95; } .fancybox-image, .fancybox-spaceball { width: 100%; height: 100%; top: 0%; left: 0%; } /* ~~~~~~~~~~~~~~~~~ ENDE FANCYBOX ~~~~~~~~~~~~~~~~~~~~ */ } /* ================= max-width: 1635px ===================== */ @media (max-width: 1635px) { .header { max-width: 100%; margin-left: 0; } .header .headerbar .nav-cont { max-width: 100%; border-radius: 0; } /* .banner .animation { padding-top: 12rem; } .banner .animation .icon-ani { max-width: 350px; } */ .brand { left: -5px; } .cont-inhalt.over-foto { margin-top: -4rem; padding: 4vh 7vw; } main.mit-banner { padding: 0 2vw 2rem 2vw; } main.ohne-banner { padding: 16rem 2vw 7rem 2vw; } .nav-breadcrumb { left: 2vw; top: 11rem; } .slider-01 { position: relative; width: min(100%, 1200px); margin: 1.5em auto 0 auto; padding: 1.5rem 1rem 4rem 1rem; } .slider-01 .slick-prev { left: 0.5rem; } .slider-01 .slick-next { right: 0.5rem; } } /* ================= max-width: 1350px) ===================== */ @media (max-width: 1350px) { h1 { font-size: 2em; } label[for="lupe-cont"] { top: 10px; } #lupe-cont:checked ~ #search-field { top: 70px; } .nav-cont .warenkorb-cont { position: absolute; right: 10px; top: 10px; } .nav { padding: 0px 165px 0 290px; } .trigger { padding: 15px 0.5rem 17px 0.5rem; border-top-right-radius: 4px; border-top-left-radius: 4px; font-size: 1.15rem; } .trigger[data-has-sub="true"]::after { margin: 10px 0 0 2px; } /* .banner .animation { padding-top: 10rem; } .banner .animation .icon-ani { width: 300px; } */ .brand { left: -5px; top: -5px; margin-right: auto; width: 294px; height: 80px; z-index: 1200; } .header .headerbar { height: 62px; } .cont-inhalt { border-radius: 2rem; padding: 4vh 7vw; } .welcome-text h1 { font-size: 1.8rem; line-height: 1.4; } .welcome-text p { font-size: 1.5rem; line-height: 1.6; } .card.produkt { width: 32%; margin-bottom: 1rem; } .card.detail { padding: 2.0rem 10rem 3rem 10rem; margin: 0; flex-flow: column; justify-content: flex-start; gap: 1rem; } .card.detail .card-bild, .card.detail .card-content, .product-gallery { width: 100%; } .product-gallery { margin: 0; max-width: 100%; } .slider-nav { max-height: 100%; height: auto !important; overflow-y: visible !important; } } /* ================= max-width: 1040px) (Mobile-Ansicht) ===================== */ @media (max-width: 1040px) { /* Mobile-Layout */ .burger-btn { display: flex; } .header { margin: 0; background: var(--blau-dunkel); } .header .headerbar { top: 0; } .header .headerbar .nav-cont { background-color: var(--blau-dunkel); border-radius: 0; padding: 0 1rem; } .header .headerbar.klein .nav-cont { border-radius: 0; } .nav-cont .warenkorb-cont { right: 60px; } /* ~~~~~~~~~~~~~~~~~ Lupe ~~~~~~~~~~~~~~~~~~~~ */ label[for="lupe-cont"] { display: none; } /* #lupe-cont:checked ~ #search-field, #lupe-cont::not(:checked) ~ #search-field */ #search-field { display: block; right: 50%; top: 10px; width: 200px; height: 40px; transform: scale(1); opacity: 1; margin-right: -100px; } #suchstr, #gobutton { display: block; } /* ~~~~~~~~~~~~~~~~~ Lupe ~~~~~~~~~~~~~~~~~~~~ */ /* .banner { margin-bottom: 18rem; } */ .banner .image { padding-top: 30px; } /* .banner .animation { padding-top: 8rem; } .banner .animation .icon-ani { width: 250px; } */ .cont-inhalt { overflow: hidden; border-radius: 1rem; padding: 3rem 2rem; } .cont-inhalt.over-foto { margin-top: -3rem; } .welcome-text { flex-flow: column; font-size: 90%; gap: 1rem; } /* ~~~~~~~~~~~~~~~~~ Navi ~~~~~~~~~~~~~~~~~~~~ */ .nav { margin: 0 0 0 30px; padding: 15px 0 00; } .nav > li { flex-grow: 1; width: 100%; } .nav li:last-child { margin-bottom: 1rem; } .submenu2 li:first-child { margin-top: 0; } .submenu2 li:last-child { margin-bottom: 0; } .trigger { justify-content: center; padding: 0.75rem 0.75rem; border-radius: 0px; border-top: 1px solid var(--border-farbe); } /* NAV als Overlay-Container direkt unter Topbar */ :root { --topbar-h: 50px; } /* .header > nav */ .header nav { position: fixed !important; left: 0; right: 0; top: 62px; z-index: 1100 !important; max-height: 0; /* geschlossen */ overflow: hidden; /* geschlossen */ pointer-events: none; /* geschlossen */ transition: max-height var(--anim, 0.25s) var(--easing, ease); padding: 0; } /* öffnen/schließen über Toggle */ #mobile-nav-toggle:checked ~ nav { max-height: calc(100vh - 62px) !important; overflow: auto !important; overflow-y: scroll; pointer-events: auto !important; padding-bottom: 70px; margin-top: 0; } /* Liste im Overlay: vertikal, kein Clipping */ /* .header > nav .nav */ .header nav .nav { flex-direction: column; align-items: center; max-width: 100%; margin: 0 !important; padding: 103px 0 0 0 !important; background: var(--blau-dunkel); overflow: visible !important; gap: 0; } .topbar { position: absolute; top: 52px; right: 0; height: auto; display: block; border-top: 1px solid var(--border-farbe); background: none; padding: 0; } .topbar ul { display: flex; flex-flow: row wrap; align-items: center; justify-content: center; } .topbar ul li { display: block; border-left: 1px solid var(--border-farbe); } .topbar ul li a, .topbar ul li a:link { font-size: 18px; color: var(--weiss); text-align: left; display: block; padding: 0.75rem; } .topbar ul li.akt a, .topbar ul li a:hover, .topbar ul li a:focus { color: var(--gelb-mittel); } /* Ebene 2: im Fluss expandieren (nicht absolut) */ .submenu2-wrap { position: static !important; max-height: 0 !important; opacity: 0 !important; overflow: hidden !important; transform: none !important; transition: max-height var(--anim, 0.25s) var(--easing, ease), opacity var(--anim, 0.25s) var(--easing, ease); } input.nav-toggle:checked ~ .submenu2-wrap { /* max-height: 2000px !important; */ max-height: calc(100vh - 62px) !important; overflow-y: scroll; opacity: 1 !important; } .submenu2 { padding: 0.75rem 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } .submenu3 { border-left: none; padding-left: 0.75em; } .banner .image.schmal img { height: 100%; -o-object-fit: cover; object-fit: cover; width: 100%; } /* ~~~~~~~~~~~~~~~~~ Inhalt ~~~~~~~~~~~~~~~~~~~~ */ main.ohne-banner { padding: 6rem 2vw 7rem 2vw; } .nav-breadcrumb { display: none; } .cont-inhalt.ohne-hintergrund { padding: 1rem 0; } h1 { font-size: 1.7em; } h2 { font-size: 1.4em; } .cont-inhalt .title { margin-bottom: 1.5rem; padding-bottom: 1.5rem; } .cont-inhalt.slider, .cont-inhalt { padding: 1.5rem 0 0 0; } .cont-inhalt.produkte-overview { padding: 1rem 1rem; } .cont-inhalt.produkte-overview.detail { padding: 0; background: transparent; } .wrapper-filter { padding-right: 1rem; } .card.produkt { width: 49%; } .card.detail { padding: 2.0rem 5rem 3rem 5rem; margin: 0; } .cont-inhalt.textseite { padding: 2rem 3.5rem; } .card.alsListe { padding: 1.5rem 0 0.75rem 0; } .statement { padding: 3.5rem 0 0 0; margin: 1rem auto; } .statement .text { width: 100%; border-radius: 1em; padding: 7rem 3rem 2rem 5rem; margin-top: 4rem; } .statement .text::before { left: 1rem; top: 3rem; width: 3rem; height: 3rem; } .statement figure { left: 50%; right: 0 !important; top: 8rem; transform: translate(-50%, -50%); height: 180px !important; width: 180px !important; } .slider-01 { padding: 0 50px 4rem 50px; } .slider-01 .slick-slide { transform: none; margin: 0 10px; } /* Wichtig: slick-track braucht negativen Rand, damit nichts abgeschnitten wird */ .slider-01 .slick-list { margin: 0 -10px; padding: 0 !important; } .slider-01 .slick-center { transform: none; } .slider-01 .slick-prev, .slider-01 .slick-next { display: none !important; } #footer { padding: 2rem 0 5rem 0; } #footer .kontakt-daten { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 0.75em; padding-bottom: 2rem; } #footer .contact, #footer .newsletter { border-radius: 1.4rem; padding: 1.5rem 2rem; width: 80%; } } /* ================= max-width: 900px ===================== */ @media screen and (max-width: 900px) { .fancybox-button--left, .fancybox-button--right { width: 74px; } .fancybox-placeholder::before { top: -15px; left: -15px; right: -15px; bottom: -15px; } .fancybox-placeholder { width: 96%; margin: 0 auto; } } @media (max-width: 770px) { .product-gallery { grid-template-columns: 1fr; margin: 0; } .slider-nav-wrap { display: none; } .card.detail { padding: 1.0rem 1rem 2rem 1rem; margin: 0; } .card.detail .titel h2 { font-size: 2rem; } } /* ================= max-width: 780px ===================== */ @media (max-width: 780px) { .header nav { top: 48px; } .submenu2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* ~~~~~~~~~~~~ "x nur für Entwurf" ~~~~~~~~~~~~ */ /* .banner .animation { padding-top: 6rem; } .banner .animation .icon-ani { width: 200px; } */ .banner .welcome-text { bottom: -18rem; } .slider-detail .slick-dots { bottom: -2.5rem; display: block !important; } .slider-detail .slick-prev, .slider-detail .slick-next { display: none !important; } /* ~~~~~~~~~~~~ "x nur für Entwurf" ~~~~~~~~~~~~ */ .brand { left: -5px; top: -7px; margin-right: auto; width: 230px; height: 63px; } .header .headerbar { height: 48px; } .burger-btn { right: 1px; top: 1px; } .nav-cont .warenkorb-cont { top: 3px; right: 50px; } .warenkorb-count { padding-top: 5px; } .card.produkt { width: 100%; } .slider-01 { padding: 0 30px 4rem 30px; } .wrapper-produkte-filter { flex-direction: column; gap: 0; flex-flow: row wrap; } .wrapper-filter { display: flex; justify-content: space-between; flex-flow: row wrap; gap: 1rem; width: 98%; margin: 0 auto; padding: 0; } .card.filter { flex: 1 1 45%; } .card.produkt { width: 49%; } .cont-inhalt, .cont-inhalt.slider, .cont-inhalt.textseite { padding: 1rem 1.25rem; } .card.logo { width:31%; } .box-anmelden { padding: 1.5rem 1rem; margin: 1.5rem auto 2em auto; } .shopping-cart .menge { /* margin-left: 10px; margin-top: -35px; */ margin: -35px 0 0 10px } .form-feld.auswahl-filter-formular { padding: 0.5rem; } .toggle.offen + label, .rahmen.auswahl-formular .toggle.offen + label { height: auto; max-height: 100%; padding: 10px 10px 10px 15px; opacity: 1; background: var(--gelb-dunkel); /* margin: 2em 0 0 0; */ } .rahmen.auswahl-formular .toggle.offen:checked + label { color: var(--weiss); background: var(--blau-dunkel-blacky); } .toggle.offen ~ .details { max-height: 0vh; opacity: 0; overflow: hidden; transition: max-height 0.5s, opacity 0.25s; margin-bottom: 1.5em; } .toggle.offen:checked ~ .details { max-height: 100vh; opacity: 1; transition: 1.5s; } /* ~~~ Warenkorb ~~~~~~*/ .shopping-cart table { width: auto; margin: 0 auto; } .shopping-cart tbody, .shopping-cart tfoot, .shopping-cart th, .shopping-cart td, .shopping-cart tr { display:block; width: auto; } .shopping-cart td { padding: 5px 0; } .shopping-cart thead { display: none; } .shopping-cart tbody tr { display: block; margin-bottom: 0; } .shopping-cart tbody tr:last-of-type { border-bottom: 2px solid var(--blau-mittel); } .shopping-cart tbody td { display: block; width: calc(100% - 100px); margin-left: 100px; } .shopping-cart tbody td.produktname { display: block; width: 100%; } .shopping-cart tbody td::before { content: attr(data-label) ""; display: inline-block; min-width: 90px; margin-left: -90px; text-align: right; margin-right: 5px; color: var(--grau-mittel); font-weight: 600; font-style: italic; } .shopping-cart tbody td.price, .shopping-cart tbody td.total-price { text-align: left; } .shopping-cart tfoot td.total-price { text-align: left; margin-left: -2px; } .shopping-cart tfoot td.total-price-wort { margin-left: 20px; } .shopping-cart tfoot td.total-price, .shopping-cart tfoot td.total-price-wort { display: inline-flex; align-items: flex-start; } .shopping-cart td.remove-button a { top: 2px; left: 8px; } #shopping-cart-button { justify-content: center; gap: 0; } .submit.update, .submit.submit.finish { margin: 0.5rem; } .box-fragen { padding: 1.5rem 1rem; margin: 1.5rem auto 2em auto; } } /* ================= max-width: 640px ===================== */ @media (max-width: 640px) { /* .banner .animation { padding-top: 7rem; } .banner .animation .icon-ani { max-width: 250px; } */ .banner .image { height: 400px; margin: -30px 0 0 0; overflow: hidden; } .banner .image img { height: 100%; -o-object-fit: cover; object-fit: cover; width: 100%; height: 400px; } .cont-inhalt.over-foto { margin-top: -2.5rem; } h1 { font-size: 1.75em; } main main.ohne-banner main.mit-banner { padding: 0 1rem; } .statement .text { padding: 7rem 2rem 1rem 2rem; margin-top: 4rem; } .statement .text::before { left: 2rem; top: 3rem; width: 2rem; height: 2rem; } #footer .contact, #footer .newsletter { width: 96%; } /* .button-link a, .button-link a:link { font-size: 1.1rem; } */ .cont-inhalt.schmal { padding: 1.5rem 1.5rem; } .slider-detail .slick-next { right: -10px; } .slider-detail .slick-prev { left: -10px; } .content-schmal.extra.formular { padding: 1.5rem; border-radius: 1rem; } .box-fragen { padding: 1.5rem 1.0rem; } .box-fragen h2 { font-size: 1.85rem; text-align: center; } .box-fragen .bild-text { flex-flow: column; align-items: flex-start; align-items: center; } .box-fragen .bild-text address { font-size: 1.4rem; line-height: 1.7rem; } } /* ================= max-width: 535px ===================== */ @media (max-width: 535px) { /* .welcome-text p { font-size: 1.4em; font-weight: 600; } */ .slider-01 { padding: 0 5px 4rem 5px; } .card.filter { flex: 0 100%; margin-bottom: 0.5rem; } .wrapper-produkte-filter, .wrapper-produkte { flex-flow: column; } .card.produkt { width: 100%; } .card.alsListe { flex-flow: column; gap: 1.5rem; } .card.alsListe .listentext, .card.alsListe figure { width: 100%; } .wrapper-logos { gap: 0.5rem; } .card.logo { width:48%; } rahmen.auswahl-formular .form-feld.auswahl-filter-formular { flex-flow: row wrap; } .auswahl-filter-formular > .card.filter { width: 90%; } } /* ================= max-width: 500px ===================== */ @media (max-width: 500px) { .banner .welcome-text { bottom: -17rem; } .header nav .nav { padding: 153px 0 0 0 !important; } .submenu2 { grid-template-columns: 1fr; } .warenkorb-count { padding-top: 5px; } input.nav-toggle:checked ~ .submenu2-wrap { opacity: 1; max-height: 1000px; } #footer .contact p, #footer .contact li { font-size: 1.2rem; } } @media (max-width: 450px) { .card.detail .menge-preis { display: flex; flex-direction: column; justify-content: center; gap: 1rem; border-top: 1px dotted var(--blau-mittel); border-bottom: 1px dotted var(--blau-mittel); margin-bottom: 3rem; padding: 0.5rem 0; } .card.detail .preis, .card.detail .woocommerce-variation-price { text-align: center; border-bottom: 1px dotted var(--blau-mittel); } .menge { justify-content: center; } } @media (max-width: 400px) { #footer .contact, #footer .newsletter { border-radius: 1.0rem; padding: 0.75rem 1rem; } } @media (max-width: 360px) { .brand { left: -4px; top: 0px; margin-right: auto; width: 190px; height: 63px; } .slider-01 .slick-dots li { margin: 0 5px; } } @media (max-width: 350px) { } .variation-wrapper { width: 45%; } form.variations_form.cart, form.cart { display: none; } .form-box.select.checkboxes { flex-direction: column; } .hidden { display: none; } ul.multi-select-options, ul.supplier { margin: 0; } ul.multi-select-options li, ul.supplier li { list-style: none; background: unset; padding-left: 0; margin: 0; } @media (max-width: 480px){ .variation-wrapper { width: 100%; } } .woocommerce form ul li, .woocommerce ul.order_details li, .woocommerce .wc-item-meta li { list-style: none; background: unset; padding-left: 0; } .woocommerce form .form-row .input-text, .woocommerce form .form-row .select2-container .select2-selection { border-radius: 7px; border: 1px solid #81aecc; } .woocommerce form .form-row .required { color: #000; } .woocommerce-checkout #payment { background-color: #fff3bf; } .woocommerce-checkout #payment div.payment_box { background-color: #e6eef5; } .woocommerce-checkout #payment div.payment_box::before { border-bottom-color: #e6eef5; } .woocommerce #payment #place_order { color: #000; background: #fec800; font-weight: 600; transition: all 0.45s ease-in-out; width: 100%; margin: 1em 0; } .woocommerce #payment #place_order:hover, .woocommerce #payment #place_order:focus, .woocommerce #payment #place_order:focus-visible { color: #fff; background: #09233d; transition: all 0.45s ease-in-out; } .woocommerce #payment #place_order:focus, .woocommerce #payment #place_order:focus-visible, .woocommerce form .form-row .input-text:focus-visible, .woocommerce form .form-row .select2-container .select2-selection:focus-visible { outline: 3px solid #81aecc; outline-offset: 0; }