/**
* Swiper 6.8.4
* Most modern mobile touch slider and framework with hardware accelerated transitions
* https://swiperjs.com
*
* Copyright 2014-2021 Vladimir Kharlampidi
*
* Released under the MIT License
*
* Released on: August 23, 2021
*/
@font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA') format('woff');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}.swiper-container{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-container-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}.swiper-container-android .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-container-multirow>.swiper-wrapper{flex-wrap:wrap}.swiper-container-multirow-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-container-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-container-pointer-events{touch-action:pan-y}.swiper-container-pointer-events.swiper-container-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform}.swiper-slide-invisible-blank{visibility:hidden}.swiper-container-autoheight,.swiper-container-autoheight .swiper-slide{height:auto}.swiper-container-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-container-3d{perspective:1200px}.swiper-container-3d .swiper-cube-shadow,.swiper-container-3d .swiper-slide,.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top,.swiper-container-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-container-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-container-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-container-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-container-horizontal.swiper-container-css-mode>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-container-vertical.swiper-container-css-mode>.swiper-wrapper{scroll-snap-type:y mandatory}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;text-transform:none;font-variant:initial;line-height:1}.swiper-button-prev,.swiper-container-rtl .swiper-button-next{left:10px;right:auto}.swiper-button-prev:after,.swiper-container-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-container-rtl .swiper-button-prev{right:10px;left:auto}.swiper-button-next:after,.swiper-container-rtl .swiper-button-prev:after{content:'next'}.swiper-button-next.swiper-button-white,.swiper-button-prev.swiper-button-white{--swiper-navigation-color:#ffffff}.swiper-button-next.swiper-button-black,.swiper-button-prev.swiper-button-black{--swiper-navigation-color:#000000}.swiper-button-lock{display:none}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:8px;height:8px;display:inline-block;border-radius:50%;background:#000;opacity:.2}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:1;background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-container-vertical>.swiper-pagination-bullets{right:10px;top:50%;transform:translate3d(0px,-50%,0)}.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:6px 0;display:block}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 4px}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-container-horizontal.swiper-container-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-progressbar{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-container-horizontal>.swiper-pagination-progressbar,.swiper-container-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:4px;left:0;top:0}.swiper-container-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-container-vertical>.swiper-pagination-progressbar{width:4px;height:100%;left:0;top:0}.swiper-pagination-white{--swiper-pagination-color:#ffffff}.swiper-pagination-black{--swiper-pagination-color:#000000}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}.swiper-container-horizontal>.swiper-scrollbar{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-container-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;animation:swiper-preloader-spin 1s infinite linear;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{100%{transform:rotate(360deg)}}.swiper-container .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-container-fade.swiper-container-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-container-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-container-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-fade .swiper-slide-active,.swiper-container-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube{overflow:visible}.swiper-container-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-container-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-cube.swiper-container-rtl .swiper-slide{transform-origin:100% 0}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-next,.swiper-container-cube .swiper-slide-next+.swiper-slide,.swiper-container-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-container-cube .swiper-slide-shadow-bottom,.swiper-container-cube .swiper-slide-shadow-left,.swiper-container-cube .swiper-slide-shadow-right,.swiper-container-cube .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-container-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}.swiper-container-cube .swiper-cube-shadow:before{content:'';background:#000;position:absolute;left:0;top:0;bottom:0;right:0;filter:blur(50px)}.swiper-container-flip{overflow:visible}.swiper-container-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-container-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-flip .swiper-slide-active,.swiper-container-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-flip .swiper-slide-shadow-bottom,.swiper-container-flip .swiper-slide-shadow-left,.swiper-container-flip .swiper-slide-shadow-right,.swiper-container-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}
@charset "UTF-8";/*!
* mmenu.js
* mmenujs.com
*
* Copyright (c) Fred Heusschen
* frebsite.nl
*
* License: CC-BY-NC-4.0
* http://creativecommons.org/licenses/by-nc/4.0/
*/:root{--mm-lineheight:22px}.mm-hidden{display:none!important}.mm-wrapper{overflow-x:hidden;position:relative}.mm-menu,.mm-menu *,.mm-menu :after,.mm-menu :before{-webkit-transition-property:none;-o-transition-property:none;transition-property:none;-webkit-transition-duration:.4s;-o-transition-duration:.4s;transition-duration:.4s;-webkit-transition-timing-function:ease;-o-transition-timing-function:ease;transition-timing-function:ease}:root{--mm-blocker-visibility-delay:0.4s;--mm-blocker-opacity-delay:0s}.mm-blocker{display:block;position:absolute;bottom:100%;top:0;right:0;left:0;z-index:3;opacity:0;background:var(--mm-color-background);-webkit-transition:bottom 0s ease var(--mm-blocker-visibility-delay),width .4s ease,opacity .4s ease var(--mm-blocker-opacity-delay),-webkit-transform .4s ease;transition:bottom 0s ease var(--mm-blocker-visibility-delay),width .4s ease,opacity .4s ease var(--mm-blocker-opacity-delay),-webkit-transform .4s ease;-o-transition:bottom 0s ease var(--mm-blocker-visibility-delay),width .4s ease,opacity .4s ease var(--mm-blocker-opacity-delay),transform .4s ease;transition:bottom 0s ease var(--mm-blocker-visibility-delay),width .4s ease,opacity .4s ease var(--mm-blocker-opacity-delay),transform .4s ease;transition:bottom 0s ease var(--mm-blocker-visibility-delay),width .4s ease,opacity .4s ease var(--mm-blocker-opacity-delay),transform .4s ease,-webkit-transform .4s ease}.mm-blocker:focus-visible{opacity:.75}.mm-btn{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:relative;width:50px;padding:0}.mm-btn--next,[dir=rtl] .mm-btn--prev{--mm-btn-rotate:135deg}.mm-btn--prev,[dir=rtl] .mm-btn--next{--mm-btn-rotate:-45deg}.mm-btn--next:after,.mm-btn--prev:before{content:"";display:block;position:absolute;top:0;bottom:0;width:8px;height:8px;margin:auto;-webkit-box-sizing:border-box;box-sizing:border-box;border:2px solid var(--mm-color-icon);border-bottom:none;border-right:none;-webkit-transform:rotate(var(--mm-btn-rotate));-ms-transform:rotate(var(--mm-btn-rotate));transform:rotate(var(--mm-btn-rotate))}.mm-btn--prev:before{inset-inline-start:23px}.mm-btn--next:after{inset-inline-end:23px}.mm-btn--close:before{content:"×";font-size:150%}.mm-btnreset{padding:0;background:0 0;border:none;cursor:pointer}.mm-divider{-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;position:-webkit-sticky;position:sticky;z-index:2;top:0;min-height:var(--mm-lineheight);padding:calc((var(--mm-listitem-size) * .65 - var(--mm-lineheight)) * .5) 20px;font-size:75%;text-transform:uppercase;background:var(--mm-color-background);background-image:-webkit-gradient(linear,left top,left bottom,from(var(--mm-color-background-highlight)),to(var(--mm-color-background-highlight)));background-image:-o-linear-gradient(var(--mm-color-background-highlight),var(--mm-color-background-highlight));background-image:linear-gradient(var(--mm-color-background-highlight),var(--mm-color-background-highlight));opacity:1;-webkit-transition-property:opacity;-o-transition-property:opacity;transition-property:opacity}.mm-navbar:not(.mm-hidden)~.mm-listview .mm-divider{top:var(--mm-navbar-size)}:root{--mm-listitem-size:50px}.mm-listitem{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;position:relative;padding:0;margin:0;color:var(--mm-color-text);border-color:var(--mm-color-border)}.mm-listitem:after{content:"";border-color:inherit;border-bottom-width:1px;border-bottom-style:solid;display:block;position:absolute;inset-inline-start:20px;inset-inline-end:0;bottom:0}.mm-listitem__btn,.mm-listitem__text{padding:calc((var(--mm-listitem-size) - var(--mm-lineheight))/ 2) 0}.mm-listitem__text{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:10%;flex-basis:10%;display:block;padding-left:20px;padding-right:20px;-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.mm-listitem__btn{display:block;position:relative;width:auto;-webkit-padding-end:50px;padding-inline-end:50px;border-color:inherit;background:rgba(3,2,1,0)}.mm-listitem__btn:not(.mm-listitem__text){border-left-width:1px;border-left-style:solid}.mm-listitem--selected>.mm-listitem__text{background:var(--mm-color-background-emphasis)}.mm-listitem--opened>.mm-listitem__btn,.mm-listitem--opened>.mm-panel{background:var(--mm-color-background-highlight)}.mm-listview{list-style:none;display:block;padding:0;margin:0}.mm-menu{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:0;margin:0;position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;-ms-scroll-chaining:none;overscroll-behavior:none;background:var(--mm-color-background);border-color:var(--mm-color-border);color:var(--mm-color-text);line-height:var(--mm-lineheight);-webkit-tap-highlight-color:var(--mm-color-background-emphasis);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.mm-menu ::-webkit-input-placeholder{color:var(--mm-color-text-dimmed)}.mm-menu ::-moz-placeholder{color:var(--mm-color-text-dimmed)}.mm-menu :-ms-input-placeholder{color:var(--mm-color-text-dimmed)}.mm-menu ::-ms-input-placeholder{color:var(--mm-color-text-dimmed)}.mm-menu ::placeholder{color:var(--mm-color-text-dimmed)}.mm-menu,.mm-menu *{-webkit-box-sizing:border-box;box-sizing:border-box}.mm-menu :focus,.mm-menu :focus-visible,.mm-menu:focus,.mm-menu:focus-visible{outline:0}.mm-menu a,.mm-menu button,.mm-menu label{color:inherit}.mm-menu a:focus,.mm-menu button:focus,.mm-menu label:focus{outline:0}.mm-menu a:focus-visible,.mm-menu button:focus-visible,.mm-menu label:focus-visible{outline:2px solid var(--mm-color-focusring);outline-offset:-5px}.mm-menu input:focus,.mm-menu input:focus-visible,.mm-menu select:focus,.mm-menu select:focus-visible,.mm-menu textarea:focus,.mm-menu textarea:focus-visible{outline:2px solid var(--mm-color-focusring);outline-offset:2px}.mm-menu a,.mm-menu a:active,.mm-menu a:hover,.mm-menu a:link,.mm-menu a:visited{text-decoration:none;color:inherit}:root{--mm-navbar-size:50px}.mm-navbar{display:-webkit-box;display:-ms-flexbox;display:flex;position:-webkit-sticky;position:sticky;top:0;z-index:2;min-height:var(--mm-navbar-size);padding-top:env(safe-area-inset-top);color:var(--mm-color-text-dimmed);text-align:center;opacity:1;background:var(--mm-color-background);border-bottom:1px solid var(--mm-color-border);-webkit-transition-property:opacity;-o-transition-property:opacity;transition-property:opacity}.mm-navbar>*{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box}.mm-navbar__btn{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0}.mm-navbar__title{-webkit-box-flex:1;-ms-flex:1 1 50%;flex:1 1 50%;display:-webkit-box;display:-ms-flexbox;display:flex;padding:0 20px;overflow:hidden}.mm-navbar__title[href="#"]{pointer-events:none}.mm-navbar__title>span{-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.mm-btn.mm-hidden+.mm-navbar__title:not(:last-child){-webkit-padding-start:60px;padding-inline-start:60px;-webkit-padding-end:10px;padding-inline-end:10px}.mm-btn:not(.mm-hidden)+.mm-navbar__title:last-child{-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:60px;padding-inline-end:60px}.mm-panel{--mm-panel-child-offset:100%;--mm-panel-parent-offset:-30%;position:absolute;left:0;right:0;top:0;bottom:0;z-index:1;-webkit-overflow-scrolling:touch;overflow:hidden;overflow-y:auto;-ms-scroll-chaining:none;overscroll-behavior:contain;color:var(--mm-color-text);border-color:var(--mm-color-border);background:var(--mm-color-background);-webkit-transform:translate3d(var(--mm-panel-child-offset),0,0);transform:translate3d(var(--mm-panel-child-offset),0,0);-webkit-transition-property:inset-inline-start,-webkit-transform;transition-property:inset-inline-start,-webkit-transform;-o-transition-property:transform,inset-inline-start;transition-property:transform,inset-inline-start;transition-property:transform,inset-inline-start,-webkit-transform}[dir=rtl] .mm-panel{--mm-panel-child-offset:-100%;--mm-panel-parent-offset:30%}.mm-panel:after{content:"";display:block;height:var(--mm-listitem-size)}.mm-panel:focus{outline:0}.mm-panel--opened{z-index:2;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-webkit-transition-delay:0s;-o-transition-delay:0s;transition-delay:0s}.mm-panel--parent{-webkit-transform:translate3d(var(--mm-panel-parent-offset),0,0);transform:translate3d(var(--mm-panel-parent-offset),0,0);z-index:0}.mm-panel--highest{z-index:3}.mm-menu--opened .mm-panel--noanimation{-webkit-transition:none!important;-o-transition:none!important;transition:none!important;-webkit-transition-duration:0s!important;-o-transition-duration:0s!important;transition-duration:0s!important}.mm-panel__content{padding:20px}.mm-panels{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;position:relative;height:100%;overflow:hidden;background:var(--mm-color-background);border-color:var(--mm-color-border);color:var(--mm-color-text)}.mm-panels:focus{outline:0}:root{--mm-toggle-size:34px}.mm-toggle{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-item-align:center;align-self:center;-webkit-box-flex:calc(var(--mm-toggle-size) * 1.75);-ms-flex:calc(var(--mm-toggle-size) * 1.75) 0 0px;flex:calc(var(--mm-toggle-size) * 1.75) 0 0;height:var(--mm-toggle-size);-webkit-margin-end:10px;margin-inline-end:10px;-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;border:none!important;border-radius:var(--mm-toggle-size);border:var(--mm-color-border);background:var(--mm-color-border);cursor:pointer;-webkit-transition-property:background-color;-o-transition-property:background-color;transition-property:background-color}.mm-toggle:before{content:"";aspect-ratio:1;margin:2px;border-radius:100%;background:var(--mm-color-background);-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;-o-transition-property:transform;transition-property:transform;transition-property:transform,-webkit-transform}.mm-toggle:checked{background:#4bd963}.mm-toggle:checked:before{-webkit-transform:translateX(calc(var(--mm-toggle-size) * .75));-ms-transform:translateX(calc(var(--mm-toggle-size) * .75));transform:translateX(calc(var(--mm-toggle-size) * .75))}[dir=rtl] .mm-toggle:checked:before{-webkit-transform:translateX(calc(var(--mm-toggle-size) * -.75));-ms-transform:translateX(calc(var(--mm-toggle-size) * -.75));transform:translateX(calc(var(--mm-toggle-size) * -.75))}.mm-listitem--vertical>.mm-panel{position:static;width:100%;padding:10px 0 10px 20px;-webkit-transform:none!important;-ms-transform:none!important;transform:none!important;-webkit-transition:none!important;-o-transition:none!important;transition:none!important}.mm-listitem--vertical>.mm-panel:after{content:none;display:none}.mm-listitem--vertical:not(.mm-listitem--opened)>.mm-panel{display:none}.mm-listitem--vertical>.mm-listitem__btn{height:var(--mm-listitem-size);bottom:auto}.mm-listitem--vertical .mm-listitem:last-child:after{border-color:transparent}.mm-listitem--opened>.mm-listitem__btn:after{-webkit-transform:rotate(225deg);-ms-transform:rotate(225deg);transform:rotate(225deg);right:19px}:root{--mm-size:80%;--mm-min-size:240px;--mm-max-size:440px}.mm-menu--offcanvas{position:fixed;z-index:0}.mm-page{-webkit-box-sizing:border-box;box-sizing:border-box;min-height:100vh;background:inherit}:where(.mm-slideout){position:relative;z-index:1;width:100%;-webkit-transition-duration:.4s;-o-transition-duration:.4s;transition-duration:.4s;-webkit-transition-timing-function:ease;-o-transition-timing-function:ease;transition-timing-function:ease;-webkit-transition-property:width,-webkit-transform;transition-property:width,-webkit-transform;-o-transition-property:width,transform;transition-property:width,transform;transition-property:width,transform,-webkit-transform}.mm-wrapper--opened,.mm-wrapper--opened body{overflow:hidden}.mm-wrapper__blocker{background:rgba(0,0,0,.4)}.mm-wrapper--opened .mm-wrapper__blocker{--mm-blocker-visibility-delay:0s;--mm-blocker-opacity-delay:0.4s;bottom:0;opacity:.5}.mm-menu{--mm-translate-horizontal:0;--mm-translate-vertical:0}.mm-menu--position-left,.mm-menu--position-left-front{right:auto}.mm-menu--position-right,.mm-menu--position-right-front{left:auto}.mm-menu--position-left,.mm-menu--position-left-front,.mm-menu--position-right,.mm-menu--position-right-front{width:clamp(var(--mm-min-size),var(--mm-size),var(--mm-max-size))}.mm-menu--position-left-front{--mm-translate-horizontal:-100%}.mm-menu--position-right-front{--mm-translate-horizontal:100%}.mm-menu--position-top{bottom:auto}.mm-menu--position-bottom{top:auto}.mm-menu--position-bottom,.mm-menu--position-top{width:100%;height:clamp(var(--mm-min-size),var(--mm-size),var(--mm-max-size))}.mm-menu--position-top{--mm-translate-vertical:-100%}.mm-menu--position-bottom{--mm-translate-vertical:100%}.mm-menu--position-bottom,.mm-menu--position-left-front,.mm-menu--position-right-front,.mm-menu--position-top{z-index:2;-webkit-transform:translate3d(var(--mm-translate-horizontal),var(--mm-translate-vertical),0);transform:translate3d(var(--mm-translate-horizontal),var(--mm-translate-vertical),0);-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;-o-transition-property:transform;transition-property:transform;transition-property:transform,-webkit-transform}.mm-menu--position-bottom.mm-menu--opened,.mm-menu--position-left-front.mm-menu--opened,.mm-menu--position-right-front.mm-menu--opened,.mm-menu--position-top.mm-menu--opened{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.mm-wrapper--position-left{--mm-translate-horizontal:clamp(
var(--mm-min-size),
var(--mm-size),
var(--mm-max-size)
)}.mm-wrapper--position-right{--mm-translate-horizontal:clamp(
calc(-1 * var(--mm-max-size)),
calc(-1 * var(--mm-size)),
calc(-1 * var(--mm-min-size))
)}.mm-wrapper--position-left .mm-slideout,.mm-wrapper--position-right .mm-slideout{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.mm-wrapper--position-left.mm-wrapper--opened .mm-slideout,.mm-wrapper--position-right.mm-wrapper--opened .mm-slideout{-webkit-transform:translate3d(var(--mm-translate-horizontal),0,0);transform:translate3d(var(--mm-translate-horizontal),0,0)}.mm-wrapper--position-bottom .mm-wrapper__blocker,.mm-wrapper--position-left-front .mm-wrapper__blocker,.mm-wrapper--position-right-front .mm-wrapper__blocker,.mm-wrapper--position-top .mm-wrapper__blocker{z-index:1}.mm-menu--theme-light{--mm-color-background:#f3f3f3;--mm-color-border:rgb(0 0 0 / 0.15);--mm-color-icon:rgb(0 0 0 / 0.4);--mm-color-text:rgb(0 0 0 / 0.8);--mm-color-text-dimmed:rgb(0 0 0 / 0.4);--mm-color-background-highlight:rgb(0 0 0 / 0.05);--mm-color-background-emphasis:rgb(255 255 255 / 0.75);--mm-color-focusring:#06c}.mm-menu--theme-light-contrast{--mm-color-background:#f3f3f3;--mm-color-border:rgb(0 0 0 / 0.5);--mm-color-icon:rgb(0 0 0 / 0.5);--mm-color-text:#000;--mm-color-text-dimmed:rgb(0 0 0 / 0.7);--mm-color-background-highlight:rgb(0 0 0 / 0.05);--mm-color-background-emphasis:rgb(255 255 255 / 0.9);--mm-color-focusring:#06c}.mm-menu--theme-dark{--mm-color-background:#333;--mm-color-border:rgb(0, 0, 0, 0.4);--mm-color-icon:rgb(255, 255, 255, 0.4);--mm-color-text:rgb(255, 255, 255, 0.8);--mm-color-text-dimmed:rgb(255, 255, 255, 0.4);--mm-color-background-highlight:rgb(255, 255, 255, 0.08);--mm-color-background-emphasis:rgb(0, 0, 0, 0.1);--mm-color-focusring:#06c}.mm-menu--theme-dark-contrast{--mm-color-background:#333;--mm-color-border:rgb(255 255 255 / 0.5);--mm-color-icon:rgb(255 255 255 / 0.5);--mm-color-text:#fff;--mm-color-text-dimmed:rgb(255 255 255 / 0.7);--mm-color-background-highlight:rgb(255 255 255 / 0.1);--mm-color-background-emphasis:rgb(0 0 0 / 0.3);--mm-color-focusring:#06c}.mm-menu--theme-white{--mm-color-background:#fff;--mm-color-border:rgb(0 0 0 / 0.15);--mm-color-icon:rgb(0 0 0 / 0.3);--mm-color-text:rgb(0 0 0 / 0.8);--mm-color-text-dimmed:rgb(0 0 0 / 0.3);--mm-color-background-highlight:rgb(0 0 0 / 0.06);--mm-color-background-emphasis:rgb(0 0 0 / 0.03);--mm-color-focusring:#06c}.mm-menu--theme-white-contrast{--mm-color-background:#fff;--mm-color-border:rgb(0 0 0 / 0.5);--mm-color-icon:rgb(0 0 0 / 0.5);--mm-color-text:#000;--mm-color-text-dimmed:rgb(0 0 0 / 0.7);--mm-color-background-highlight:rgb(0 0 0 / 0.07);--mm-color-background-emphasis:rgb(0 0 0 / 0.035);--mm-color-focusring:#06c}.mm-menu--theme-black{--mm-color-background:#000;--mm-color-border:rgb(255 255 255 / 0.2);--mm-color-icon:rgb(255 255 255 / 0.4);--mm-color-text:rgb(255 255 255 / 0.7);--mm-color-text-dimmed:rgb(255 255 255 / 0.4);--mm-color-background-highlight:rgb(255 255 255 / 0.1);--mm-color-background-emphasis:rgb(255 255 255 / 0.06);--mm-color-focusring:#06c}.mm-menu--theme-black-contrast{--mm-color-background:#000;--mm-color-border:rgb(255 255 255 / 0.5);--mm-color-icon:rgb(255 255 255 / 0.5);--mm-color-text:#fff;--mm-color-text-dimmed:rgb(255 255 255 / 0.6);--mm-color-background-highlight:rgb(255 255 255 / 0.125);--mm-color-background-emphasis:rgb(255 255 255 / 0.1);--mm-color-focusring:#06c}.mm-counter{display:block;-webkit-padding-start:20px;padding-inline-start:20px;float:right;color:var(--mm-color-text-dimmed)}[dir=rtl] .mm-counter{float:left}:root{--mm-iconbar-size:50px}.mm-menu--iconbar-left .mm-navbars,.mm-menu--iconbar-left .mm-panels{margin-left:var(--mm-iconbar-size)}.mm-menu--iconbar-right .mm-navbars,.mm-menu--iconbar-right .mm-panels{margin-right:var(--mm-iconbar-size)}.mm-iconbar{display:none;position:absolute;top:0;bottom:0;z-index:2;width:var(--mm-iconbar-size);overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box;border:0 solid;border-color:var(--mm-color-border);background:var(--mm-color-background);color:var(--mm-color-text-dimmed);text-align:center}.mm-menu--iconbar-left .mm-iconbar,.mm-menu--iconbar-right .mm-iconbar{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.mm-menu--iconbar-left .mm-iconbar{border-right-width:1px;left:0}.mm-menu--iconbar-right .mm-iconbar{border-left-width:1px;right:0}.mm-iconbar__bottom,.mm-iconbar__top{width:100%;-webkit-overflow-scrolling:touch;overflow:hidden;overflow-y:auto;-ms-scroll-chaining:none;overscroll-behavior:contain}.mm-iconbar__bottom>*,.mm-iconbar__top>*{-webkit-box-sizing:border-box;box-sizing:border-box;display:block;padding:calc((var(--mm-iconbar-size) - var(--mm-lineheight))/ 2) 0}.mm-iconbar__bottom a,.mm-iconbar__bottom a:hover,.mm-iconbar__top a,.mm-iconbar__top a:hover{text-decoration:none}.mm-iconbar__tab--selected{background:var(--mm-color-background-emphasis)}:root{--mm-iconpanel-size:50px}.mm-panel--iconpanel-0{inset-inline-start:calc(0 * var(--mm-iconpanel-size))}.mm-panel--iconpanel-1{inset-inline-start:calc(1 * var(--mm-iconpanel-size))}.mm-panel--iconpanel-2{inset-inline-start:calc(2 * var(--mm-iconpanel-size))}.mm-panel--iconpanel-3{inset-inline-start:calc(3 * var(--mm-iconpanel-size))}.mm-panel--iconpanel-4{inset-inline-start:calc(4 * var(--mm-iconpanel-size))}.mm-panel--iconpanel-first~.mm-panel{inset-inline-start:var(--mm-iconpanel-size)}.mm-menu--iconpanel .mm-panel--parent .mm-divider,.mm-menu--iconpanel .mm-panel--parent .mm-navbar{opacity:0}.mm-menu--iconpanel .mm-panels>.mm-panel--parent{overflow-y:hidden;-webkit-transform:unset;-ms-transform:unset;transform:unset}.mm-menu--iconpanel .mm-panels>.mm-panel:not(.mm-panel--iconpanel-first):not(.mm-panel--iconpanel-0){border-inline-start-width:1px;border-inline-start-style:solid}.mm-navbars{-ms-flex-negative:0;flex-shrink:0}.mm-navbars .mm-navbar{position:relative;padding-top:0;border-bottom:none}.mm-navbars--top{border-bottom:1px solid var(--mm-color-border)}.mm-navbars--top .mm-navbar:first-child{padding-top:env(safe-area-inset-top)}.mm-navbars--bottom{border-top:1px solid var(--mm-color-border)}.mm-navbars--bottom .mm-navbar:last-child{padding-bottom:env(safe-area-inset-bottom)}.mm-navbar__breadcrumbs{-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;-webkit-box-flex:1;-ms-flex:1 1 50%;flex:1 1 50%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;padding:0 20px;overflow-x:auto;-webkit-overflow-scrolling:touch}.mm-navbar__breadcrumbs>*{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-padding-end:6px;padding-inline-end:6px}.mm-navbar__breadcrumbs>a{text-decoration:underline}.mm-navbar__breadcrumbs:not(:last-child){-webkit-padding-end:0;padding-inline-end:0}.mm-btn:not(.mm-hidden)+.mm-navbar__breadcrumbs{-webkit-padding-start:0;padding-inline-start:0}.mm-navbar__tab{padding:0 10px;border:1px solid transparent}.mm-navbar__tab--selected{background:var(--mm-color-background)}.mm-navbar__tab--selected:not(:first-child){border-inline-start-color:var(--mm-color-border)}.mm-navbar__tab--selected:not(:last-child){border-inline-end-color:var(--mm-color-border)}.mm-navbars--top.mm-navbars--has-tabs{border-bottom:none}.mm-navbars--top.mm-navbars--has-tabs .mm-navbar{background:var(--mm-color-background-emphasis)}.mm-navbars--top.mm-navbars--has-tabs .mm-navbar--tabs~.mm-navbar{background:var(--mm-color-background)}.mm-navbars--top.mm-navbars--has-tabs .mm-navbar:not(.mm-navbar--tabs):last-child{border-bottom:1px solid var(--mm-color-border)}.mm-navbars--top .mm-navbar__tab{border-bottom-color:var(--mm-color-border)}.mm-navbars--top .mm-navbar__tab--selected{border-top-color:var(--mm-color-border);border-bottom-color:transparent}.mm-navbars--bottom.mm-navbar--has-tabs{border-top:none}.mm-navbars--bottom.mm-navbar--has-tabs .mm-navbar{background:var(--mm-color-background)}.mm-navbars--bottom.mm-navbar--has-tabs .mm-navbar--tabs,.mm-navbars--bottom.mm-navbar--has-tabs .mm-navbar--tabs~.mm-navbar{background:var(--mm-color-background-emphasis)}.mm-navbars--bottom .mm-navbar__tab{border-top-color:var(--mm-color-border)}.mm-navbars--bottom .mm-navbar__tab--selected{border-bottom-color:var(--mm-color-border);border-top-color:transparent}.mm-searchfield{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;height:var(--mm-navbar-size);padding:0;overflow:hidden}.mm-searchfield__input{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;width:100%;max-width:100%;padding:0 10px;-webkit-box-sizing:border-box;box-sizing:border-box}.mm-searchfield__input input{display:block;width:100%;max-width:100%;height:calc(var(--mm-navbar-size) * .7);min-height:auto;max-height:auto;margin:0;padding:0 10px;-webkit-box-sizing:border-box;box-sizing:border-box;border:none;border-radius:4px;line-height:calc(var(--mm-navbar-size) * .7);font:inherit;font-size:inherit}.mm-searchfield__input input,.mm-searchfield__input input:focus,.mm-searchfield__input input:hover{background:var(--mm-color-background-highlight);color:var(--mm-color-text)}.mm-menu[class*=-contrast] .mm-searchfield__input input{border:1px solid var(--mm-color-border)}.mm-searchfield__input input::-ms-clear{display:none}.mm-searchfield__btn{display:none;position:absolute;inset-inline-end:0;top:0;bottom:0}.mm-searchfield--searching .mm-searchfield__btn{display:block}.mm-searchfield__cancel{display:block;position:relative;-webkit-margin-end:-100px;margin-inline-end:-100px;-webkit-padding-start:5px;padding-inline-start:5px;-webkit-padding-end:20px;padding-inline-end:20px;visibility:hidden;line-height:var(--mm-navbar-size);text-decoration:none;-webkit-transition-property:visibility,margin;-o-transition-property:visibility,margin;transition-property:visibility,margin}.mm-searchfield--cancelable .mm-searchfield__cancel{visibility:visible;-webkit-margin-end:0;margin-inline-end:0}.mm-panel--search{left:0!important;right:0!important;width:100%!important;border:none!important}.mm-panel__splash{padding:20px}.mm-panel--searching .mm-panel__splash{display:none}.mm-panel__noresults{display:none;padding:40px 20px;color:var(--mm-color-text-dimmed);text-align:center;font-size:150%;line-height:1.4}.mm-panel--noresults .mm-panel__noresults{display:block}:root{--mm-sectionindexer-size:20px}.mm-sectionindexer{background:inherit;text-align:center;font-size:12px;-webkit-box-sizing:border-box;box-sizing:border-box;width:var(--mm-sectionindexer-size);position:absolute;top:0;bottom:0;inset-inline-end:calc(-1 * var(--mm-sectionindexer-size));z-index:5;-webkit-transition-property:inset-inline-end;-o-transition-property:inset-inline-end;transition-property:inset-inline-end;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly}.mm-sectionindexer a{color:var(--mm-color-text-dimmed);line-height:1;text-decoration:none;display:block}.mm-sectionindexer~.mm-panel{-webkit-padding-end:0;padding-inline-end:0}.mm-sectionindexer--active{right:0}.mm-sectionindexer--active~.mm-panel{-webkit-padding-end:var(--mm-sectionindexer-size);padding-inline-end:var(--mm-sectionindexer-size)}.mm-menu--selected-hover .mm-listitem__btn,.mm-menu--selected-hover .mm-listitem__text,.mm-menu--selected-parent .mm-listitem__btn,.mm-menu--selected-parent .mm-listitem__text{-webkit-transition-property:background-color;-o-transition-property:background-color;transition-property:background-color}@media (hover:hover){.mm-menu--selected-hover .mm-listview:hover>.mm-listitem--selected:not(:hover)>.mm-listitem__text{background:0 0}.mm-menu--selected-hover .mm-listitem__btn:hover,.mm-menu--selected-hover .mm-listitem__text:hover{background:var(--mm-color-background-emphasis)}}.mm-menu--selected-parent .mm-listitem__btn,.mm-menu--selected-parent .mm-listitem__text{-webkit-transition-delay:.2s;-o-transition-delay:.2s;transition-delay:.2s}@media (hover:hover){.mm-menu--selected-parent .mm-listitem__btn:hover,.mm-menu--selected-parent .mm-listitem__text:hover{-webkit-transition-delay:0s;-o-transition-delay:0s;transition-delay:0s}}.mm-menu--selected-parent .mm-panel--parent .mm-listitem:not(.mm-listitem--selected-parent)>.mm-listitem__text{background:0 0}.mm-menu--selected-parent .mm-listitem--selected-parent>.mm-listitem__btn,.mm-menu--selected-parent .mm-listitem--selected-parent>.mm-listitem__text{background:var(--mm-color-background-emphasis)}:root{--mm-sidebar-collapsed-size:50px;--mm-sidebar-expanded-size:var(--mm-max-size)}.mm-wrapper--sidebar-collapsed .mm-slideout{width:calc(100% - var(--mm-sidebar-collapsed-size));-webkit-transform:translate3d(var(--mm-sidebar-collapsed-size),0,0);transform:translate3d(var(--mm-sidebar-collapsed-size),0,0)}[dir=rtl] .mm-wrapper--sidebar-collapsed .mm-slideout{-webkit-transform:none;-ms-transform:none;transform:none}.mm-wrapper--sidebar-collapsed:not(.mm-wrapper--opened) .mm-menu--sidebar-collapsed .mm-divider,.mm-wrapper--sidebar-collapsed:not(.mm-wrapper--opened) .mm-menu--sidebar-collapsed .mm-navbar{opacity:0}.mm-wrapper--sidebar-expanded .mm-menu--sidebar-expanded{width:var(--mm-sidebar-expanded-size);border-right-width:1px;border-right-style:solid}.mm-wrapper--sidebar-expanded.mm-wrapper--opened{overflow:auto}.mm-wrapper--sidebar-expanded.mm-wrapper--opened .mm-wrapper__blocker{display:none}.mm-wrapper--sidebar-expanded.mm-wrapper--opened .mm-slideout{width:calc(100% - var(--mm-sidebar-expanded-size));-webkit-transform:translate3d(var(--mm-sidebar-expanded-size),0,0);transform:translate3d(var(--mm-sidebar-expanded-size),0,0)}[dir=rtl] .mm-wrapper--sidebar-expanded.mm-wrapper--opened .mm-slideout{-webkit-transform:none;-ms-transform:none;transform:none}
.autogrid_grid{display:grid;margin-left:-15px;margin-right:-15px}.autogrid_grid .column{padding-left:15px;padding-right:15px}.autogrid_grid.gutter_none{margin-left:0;margin-right:0}.autogrid_grid.gutter_none>.column{padding-left:0;padding-right:0}.autogrid_grid.gutter_s{margin-left:-15px;margin-right:-15px}.autogrid_grid.gutter_s>.column{padding-left:15px;padding-right:15px}.autogrid_grid.gutter_m{margin-left:-30px;margin-right:-30px}.autogrid_grid.gutter_m>.column{padding-left:30px;padding-right:30px}.autogrid_grid.gutter_l{margin-left:-40px;margin-right:-40px}.autogrid_grid.gutter_l>.column{padding-left:40px;padding-right:40px}.autogrid_grid.same_height>.column>.attributes{height:100%}.autogrid_grid .column .attributes{background-size:cover}.autogrid_grid .column .attributes.p-xl{padding:200px 40px 200px 40px}.autogrid_grid .column .attributes.p-l{padding:160px 40px 160px 40px}.autogrid_grid .column .attributes.p-m{padding:115px 40px 115px 40px}.autogrid_grid .column .attributes.p-s{padding:80px 40px 80px 40px}.autogrid_grid .column .attributes.p-xs{padding:40px 40px 40px 40px}.autogrid_grid .column.align_left_top{text-align:left}.autogrid_grid .column.align_left_center{text-align:left;align-self:center}.autogrid_grid .column.align_left_bottom{text-align:left;align-self:flex-end}.autogrid_grid .column.align_center_top{text-align:center}.autogrid_grid .column.align_center_center{text-align:center;align-self:center}.autogrid_grid .column.align_center_bottom{text-align:center;align-self:flex-end}.autogrid_grid .column.align_right_top{text-align:right}.autogrid_grid .column.align_right_center{text-align:right;align-self:center}.autogrid_grid .column.align_right_bottom{text-align:right;align-self:flex-end}.autogrid_grid.same_height>.column{align-self:unset}.autogrid_grid.same_height>.column>.attributes{display:flex;flex-wrap:wrap;height:100%}.autogrid_grid.same_height>.column>.attributes>.same-height-wrap{width:100%;flex:0 0 100%}.autogrid_grid.same_height>.column.align_left_center>.attributes{align-items:center}.autogrid_grid.same_height>.column.align_left_bottom>.attributes{align-items:flex-end}.autogrid_grid.same_height>.column.align_center_center>.attributes{align-items:center}.autogrid_grid.same_height>.column.align_center_bottom>.attributes{align-items:flex-end}.autogrid_grid.same_height>.column.align_right_center>.attributes{align-items:center}.autogrid_grid.same_height>.column.align_right_bottom>.attributes{align-items:flex-end}.autogrid_grid .column>.attributes .image_mob{display:none}.autogrid_row,.autogrid_wrapper{margin-left:-15px;margin-right:-15px;display:flex;flex-wrap:wrap;box-sizing:border-box}.autogrid,.autogrid_row>.column{padding-left:15px;padding-right:15px;flex-basis:1;flex-grow:1;width:100%;position:relative;box-sizing:border-box}.autogrid_clear{flex:0 0 100%;height:0}.col_1{flex:0 0 calc((100% / 12) * 1);max-width:calc((100% / 12) * 1)}.col_2{flex:0 0 calc((100% / 12) * 2);max-width:calc((100% / 12) * 2)}.col_3{flex:0 0 calc((100% / 12) * 3);max-width:calc((100% / 12) * 3)}.col_4{flex:0 0 calc((100% / 12) * 4);max-width:calc((100% / 12) * 4)}.col_5{flex:0 0 calc((100% / 12) * 5);max-width:calc((100% / 12) * 5)}.col_6{flex:0 0 calc((100% / 12) * 6);max-width:calc((100% / 12) * 6)}.col_7{flex:0 0 calc((100% / 12) * 7);max-width:calc((100% / 12) * 7)}.col_8{flex:0 0 calc((100% / 12) * 8);max-width:calc((100% / 12) * 8)}.col_9{flex:0 0 calc((100% / 12) * 9);max-width:calc((100% / 12) * 9)}.col_10{flex:0 0 calc((100% / 12) * 10);max-width:calc((100% / 12) * 10)}.col_11{flex:0 0 calc((100% / 12) * 11);max-width:calc((100% / 12) * 11)}.col_12{flex:0 0 calc((100% / 12) * 12);max-width:calc((100% / 12) * 12)}.autogrid_row>.column>.attributes{background-size:cover}.autogrid_row>.column>.attributes.p-xl{padding:200px 40px 200px 40px}.autogrid_row>.column>.attributes.p-l{padding:160px 40px 160px 40px}.autogrid_row>.column>.attributes.p-m{padding:115px 40px 115px 40px}.autogrid_row>.column>.attributes.p-s{padding:80px 40px 80px 40px}.autogrid_row>.column>.attributes.p-xs{padding:40px 40px 40px 40px}.autogrid_row.gutter_none,.autogrid_wrapper.gutter_none{margin-left:0;margin-right:0}.autogrid_row.gutter_none>div,.autogrid_wrapper.gutter_none>div{padding-left:0;padding-right:0}.autogrid_row.gutter_s,.autogrid_wrapper.gutter_s{margin-left:-15px;margin-right:-15px}.autogrid_row.gutter_s>div,.autogrid_wrapper.gutter_s>div{padding-left:15px;padding-right:15px}.autogrid_row.gutter_m,.autogrid_wrapper.gutter_m{margin-left:-30px;margin-right:-30px}.autogrid_row.gutter_m>div,.autogrid_wrapper.gutter_m>div{padding-left:30px;padding-right:30px}.autogrid_row.gutter_l,.autogrid_wrapper.gutter_l{margin-left:-40px;margin-right:-40px}.autogrid_row.gutter_l>div,.autogrid_wrapper.gutter_l>div{padding-left:40px;padding-right:40px}.autogrid_row>.column.align_left_top{text-align:left}.autogrid_row>.column.align_left_center{text-align:left;align-self:center}.autogrid_row>.column.align_left_bottom{text-align:left;align-self:flex-end}.autogrid_row>.column.align_center_top{text-align:center}.autogrid_row>.column.align_center_center{text-align:center;align-self:center}.autogrid_row>.column.align_center_bottom{text-align:center;align-self:flex-end}.autogrid_row>.column.align_right_top{text-align:right}.autogrid_row>.column.align_right_center{text-align:right;align-self:center}.autogrid_row>.column.align_right_bottom{text-align:right;align-self:flex-end}.autogrid_row.same_height>.column{align-self:unset}.autogrid_row.same_height>.column>.attributes{display:flex;flex-wrap:wrap;height:100%}.autogrid_row.same_height>.column>.attributes>.same-height-wrap{width:100%;flex:0 0 100%}.autogrid_row.same_height>.column.align_left_center>.attributes{align-items:center}.autogrid_row.same_height>.column.align_left_bottom>.attributes{align-items:flex-end}.autogrid_row.same_height>.column.align_center_center>.attributes{align-items:center}.autogrid_row.same_height>.column.align_center_bottom>.attributes{align-items:flex-end}.autogrid_row.same_height>.column.align_right_center>.attributes{align-items:center}.autogrid_row.same_height>.column.align_right_bottom>.attributes{align-items:flex-end}.autogrid_row .column>.attributes .image_mob{display:none}.order_1{order:1}.order_2{order:2}.order_3{order:3}.order_4{order:4}.order_5{order:5}.order_6{order:6}.full{flex:0 0 100%}.one_half{flex:0 0 calc(100% / 2)}.one_third{flex:0 0 calc(100% / 3)}.one_fourth{flex:0 0 calc(100% / 4)}.one_fifth{flex:0 0 calc(100% / 5)}.one_sixth{flex:0 0 calc(100% / 6)}.two_third{flex:0 0 calc((100% / 3) * 2)}.two_fourth{flex:0 0 calc((100% / 4) * 2)}.three_fourth{flex:0 0 calc((100% / 4) * 3)}.two_fifth{flex:0 0 calc((100% / 5) * 2)}.three_fifth{flex:0 0 calc((100% / 5) * 3)}.four_fifth{flex:0 0 calc((100% / 5) * 4)}.two_sixth{flex:0 0 calc((100% / 6) * 2)}.three_sixth{flex:0 0 calc((100% / 6) * 3)}.four_sixth{flex:0 0 calc((100% / 6) * 4)}.five_sixth{flex:0 0 calc((100% / 6) * 5)}.offset_col_1{margin-left:calc((100% / 12) * 1)}.offset_col_2{margin-left:calc((100% / 12) * 2)}.offset_col_3{margin-left:calc((100% / 12) * 3)}.offset_col_4{margin-left:calc((100% / 12) * 4)}.offset_col_5{margin-left:calc((100% / 12) * 5)}.offset_col_6{margin-left:calc((100% / 12) * 6)}.offset_col_7{margin-left:calc((100% / 12) * 7)}.offset_col_8{margin-left:calc((100% / 12) * 8)}.offset_col_9{margin-left:calc((100% / 12) * 9)}.offset_col_10{margin-left:calc((100% / 12) * 10)}.offset_col_11{margin-left:calc((100% / 12) * 11)}.autogrid.no_gutter{padding-left:0;padding-right:0}@media only screen and (min-width :768px) and (max-width :1024px){.col_1_t{flex:0 0 calc((100% / 12) * 1);max-width:calc((100% / 12) * 1)}.col_2_t{flex:0 0 calc((100% / 12) * 2);max-width:calc((100% / 12) * 2)}.col_3_t{flex:0 0 calc((100% / 12) * 3);max-width:calc((100% / 12) * 3)}.col_4_t{flex:0 0 calc((100% / 12) * 4);max-width:calc((100% / 12) * 4)}.col_5_t{flex:0 0 calc((100% / 12) * 5);max-width:calc((100% / 12) * 5)}.col_6_t{flex:0 0 calc((100% / 12) * 6);max-width:calc((100% / 12) * 6)}.col_7_t{flex:0 0 calc((100% / 12) * 7);max-width:calc((100% / 12) * 7)}.col_8_t{flex:0 0 calc((100% / 12) * 8);max-width:calc((100% / 12) * 8)}.col_9_t{flex:0 0 calc((100% / 12) * 9);max-width:calc((100% / 12) * 9)}.col_10_t{flex:0 0 calc((100% / 12) * 10);max-width:calc((100% / 12) * 10)}.col_11_t{flex:0 0 calc((100% / 12) * 11);max-width:calc((100% / 12) * 11)}.col_12_t{flex:0 0 calc((100% / 12) * 12);max-width:calc((100% / 12) * 12)}.order_1_t{order:1}.order_2_t{order:2}.order_3_t{order:3}.order_4_t{order:4}.order_5_t{order:5}.order_6_t{order:6}}@media only screen and (max-width:767px){.five_sixth,.four_fifth,.one_fifth,.one_fourth,.one_half,.one_sixth,.one_third,.three_fifth,.three_fourth,.three_sixth .four_sixth,.two_fifth,.two_fourth,.two_sixth,.two_third,[class*=col_]{flex:0 0 100%;max-width:none}.autogrid_grid .column,.column[class*=col_]{padding-left:0!important;padding-right:0!important;margin-bottom:25px}.autogrid[class*=offset_],.autogrid_grid[class*=offset_],.column[class*=offset_]{margin-left:0}.autogrid_grid,.autogrid_row,.autogrid_wrapper{margin-left:0!important;margin-right:0!important}.autogrid_grid>.column>.attributes.has-image.empty>.image_mob,.autogrid_grid>.column>.attributes.has-image.empty>.same-height-wrap>.image_mob,.autogrid_row>.column>.attributes.has-image.empty>.image_mob,.autogrid_row>.column>.attributes.has-image.empty>.same-height-wrap>.image_mob{display:block}.autogrid_grid>.column>.attributes.has-image.empty,.autogrid_row>.column>.attributes.has-image.empty{background:0 0!important}.col_1_m{flex:0 0 calc((100% / 12) * 1);max-width:calc((100% / 12) * 1)}.col_2_m{flex:0 0 calc((100% / 12) * 2);max-width:calc((100% / 12) * 2)}.col_3_m{flex:0 0 calc((100% / 12) * 3);max-width:calc((100% / 12) * 3)}.col_4_m{flex:0 0 calc((100% / 12) * 4);max-width:calc((100% / 12) * 4)}.col_5_m{flex:0 0 calc((100% / 12) * 5);max-width:calc((100% / 12) * 5)}.col_6_m{flex:0 0 calc((100% / 12) * 6);max-width:calc((100% / 12) * 6)}.col_7_m{flex:0 0 calc((100% / 12) * 7);max-width:calc((100% / 12) * 7)}.col_8_m{flex:0 0 calc((100% / 12) * 8);max-width:calc((100% / 12) * 8)}.col_9_m{flex:0 0 calc((100% / 12) * 9);max-width:calc((100% / 12) * 9)}.col_10_m{flex:0 0 calc((100% / 12) * 10);max-width:calc((100% / 12) * 10)}.col_11_m{flex:0 0 calc((100% / 12) * 11);max-width:calc((100% / 12) * 11)}.col_12_m{flex:0 0 calc((100% / 12) * 12);max-width:calc((100% / 12) * 12)}.order_1_m{order:1}.order_2_m{order:2}.order_3_m{order:3}.order_4_m{order:4}.order_5_m{order:5}.order_6_m{order:6}.autogrid_grid>.column>.attributes.p-l,.autogrid_grid>.column>.attributes.p-m,.autogrid_grid>.column>.attributes.p-s,.autogrid_grid>.column>.attributes.p-xl,.autogrid_grid>.column>.attributes.p-xs,.autogrid_row>.column .attributes.p-l,.autogrid_row>.column .attributes.p-m,.autogrid_row>.column .attributes.p-s,.autogrid_row>.column .attributes.p-xl,.autogrid_row>.column .attributes.p-xs{padding:20px}.autogrid_grid .column.m_align_left_top{text-align:left}.autogrid_grid .column.m_align_left_center{text-align:left;align-self:center}.autogrid_grid .column.m_align_left_bottom{text-align:left;align-self:flex-end}.autogrid_grid .column.m_align_center_top{text-align:center}.autogrid_grid .column.m_align_center_center{text-align:center;align-self:center}.autogrid_grid .column.m_align_center_bottom{text-align:center;align-self:flex-end}.autogrid_grid .column.m_align_right_top{text-align:right}.autogrid_grid .column.m_align_right_center{text-align:right;align-self:center}.autogrid_grid .column.m_align_right_bottom{text-align:right;align-self:flex-end}.autogrid_row>.column.m_align_left_top{text-align:left}.autogrid_row>.column.m_align_left_center{text-align:left;align-self:center}.autogrid_row>.column.m_align_left_bottom{text-align:left;align-self:flex-end}.autogrid_row>.column.m_align_center_top{text-align:center}.autogrid_row>.column.m_align_center_center{text-align:center;align-self:center}.autogrid_row>.column.m_align_center_bottom{text-align:center;align-self:flex-end}.autogrid_row>.column.m_align_right_top{text-align:right}.autogrid_row>.column.m_align_right_center{text-align:right;align-self:center}.autogrid_row>.column.m_align_right_bottom{text-align:right;align-self:flex-end}}body.edge column[class*=col_]{flex-basis:1}@media only screen and (max-width:767px){body.edge column[class*=col_]{flex-basis:100%}}
#colorbox,#cboxOverlay,#cboxWrapper{position:absolute;top:0;left:0;z-index:9999;overflow:hidden;-webkit-transform:translate3d(0,0,0)}#cboxWrapper{max-width:none}#cboxOverlay{position:fixed;width:100%;height:100%}#cboxMiddleLeft,#cboxBottomLeft{clear:left}#cboxContent{position:relative}#cboxLoadedContent{overflow:auto;-webkit-overflow-scrolling:touch}#cboxTitle{margin:0}#cboxLoadingOverlay,#cboxLoadingGraphic{position:absolute;top:0;left:0;width:100%;height:100%}#cboxPrevious,#cboxNext,#cboxClose,#cboxSlideshow{cursor:pointer}.cboxPhoto{float:left;margin:auto;border:0;display:block;max-width:none;-ms-interpolation-mode:bicubic}.cboxIframe{width:100%;height:100%;display:block;border:0;padding:0;margin:0}#colorbox,#cboxContent,#cboxLoadedContent{box-sizing:content-box;-moz-box-sizing:content-box;-webkit-box-sizing:content-box}#cboxOverlay{background:#000;opacity:.9;filter:alpha(opacity = 90)}#colorbox{outline:0}#cboxContent{margin-top:20px;background:#000}.cboxIframe{background:#fff}#cboxError{padding:50px;border:1px solid #ccc}#cboxLoadedContent{border:5px solid #000;background:#fff}#cboxTitle{position:absolute;top:-20px;left:0;color:#ccc}#cboxCurrent{position:absolute;top:-20px;right:0;color:#ccc}#cboxLoadingGraphic{background:url(../../assets/colorbox/images/loading.gif) no-repeat center center}#cboxPrevious,#cboxNext,#cboxSlideshow,#cboxClose{border:0;padding:0;margin:0;overflow:visible;width:auto;background:0 0}#cboxPrevious:active,#cboxNext:active,#cboxSlideshow:active,#cboxClose:active{outline:0}#cboxSlideshow{position:absolute;top:-20px;right:90px;color:#fff}#cboxPrevious{position:absolute;top:50%;left:5px;margin-top:-32px;background:url(../../assets/colorbox/images/controls.png) no-repeat top left;width:28px;height:65px;text-indent:-9999px}#cboxPrevious:hover{background-position:bottom left}#cboxNext{position:absolute;top:50%;right:5px;margin-top:-32px;background:url(../../assets/colorbox/images/controls.png) no-repeat top right;width:28px;height:65px;text-indent:-9999px}#cboxNext:hover{background-position:bottom right}#cboxClose{position:absolute;top:5px;right:5px;display:block;background:url(../../assets/colorbox/images/controls.png) no-repeat top center;width:38px;height:19px;text-indent:-9999px}#cboxClose:hover{background-position:bottom center}
.cc-head>*:first-child{margin-top:0}.cc-head>*:last-child{margin-bottom:15px}.contao-cookiebar{--ccb-backdrop: rgba(0, 0, 0, .75);--ccb-anim-duration: .5s;--ccb-checked-clr: #399d32;--ccb-checked-bg: #dcf3db;--ccb-unchecked-clr: #9c9b99;--ccb-unchecked-bg: #fff;--ccb-disabled-clr: #c8c7c5;--ccb-disabled-bg: #f4f4f4;--ccb-focus-clr: #00a4f4;position:fixed;inset:0;z-index:9999;display:flex;align-items:var(--ccb-align, center);justify-content:var(--ccb-justify, center);letter-spacing:0;padding:15px;max-height:100dvh;box-sizing:border-box;pointer-events:none;overflow:hidden;color:var(--ccb-clr, #444)}.contao-cookiebar *{box-sizing:border-box}.contao-cookiebar p{color:var(--ccb-text, #868686);line-height:1.4}.contao-cookiebar label{position:relative;display:block;padding:8px 13px 8px 0;line-height:1.2rem}.contao-cookiebar label.group{font-weight:600}.contao-cookiebar input{position:absolute;width:1px;height:1px;outline:0 none;opacity:0}.contao-cookiebar input+label{padding:8px 13px 8px 45px;cursor:pointer}.contao-cookiebar input+label:before,.contao-cookiebar input+label:after{content:"";position:absolute;border-radius:10px}.contao-cookiebar input+label:before{top:7px;left:0;width:35px;height:18px;margin:0;box-sizing:content-box;background:var(--ccb-unchecked-bg);border:1px solid var(--ccb-unchecked-clr);transition:border-color .2s}.contao-cookiebar input+label:after{display:block;top:11px;left:4px;width:12px;height:12px;background:var(--ccb-unchecked-clr);transition:background .2s,margin-left .2s,padding .2s}.contao-cookiebar input+label:active:after{padding-left:5px}.contao-cookiebar input.cc-group-half+label:after{background:linear-gradient(to right, var(--ccb-unchecked-clr) 0%, var(--ccb-unchecked-clr) 50%, var(--ccb-checked-clr) 50%, var(--ccb-checked-clr) 100%)}.contao-cookiebar input:checked+label:after{background:var(--ccb-checked-clr);margin-left:17px}.contao-cookiebar input:checked+label:active:after{margin-left:12px}.contao-cookiebar input:checked+label:before{background:var(--ccb-checked-bg);border-color:var(--ccb-checked-clr)}.contao-cookiebar input:disabled+label{pointer-events:none}.contao-cookiebar input:disabled+label:after{background:var(--ccb-disabled-clr)}.contao-cookiebar input:disabled+label:before{background:var(--ccb-disabled-bg);border-color:var(--ccb-disabled-clr)}.contao-cookiebar input:focus-visible:not(.cc-hide-focus)+label:before{outline:3px dashed var(--ccb-focus-clr);outline-offset:2px}.contao-cookiebar .cc-btn{display:inline-block;cursor:pointer;width:100%;padding:8px 14px;margin-bottom:8px;font-size:15px;outline:0 none;border:1px solid var(--ccb-btn-bdr, #cfcfcf);border-radius:4px;color:var(--ccb-btn-clr, #444);background:var(--ccb-btn-bg, #f5f5f5)}.contao-cookiebar .cc-btn:hover,.contao-cookiebar .cc-btn:focus{background:var(--ccb-btn-bg-hvr, #ececec)}.contao-cookiebar .cc-btn:last-child{margin-bottom:0}.contao-cookiebar .grayscale{--ccb-btn-bg: #f1efef;--ccb-btn-bg-hvr: #ececec}.contao-cookiebar .grayscale .success{--ccb-btn-bg: #fbfbfb;--ccb-btn-bg-hvr: #f7f7f7}.contao-cookiebar .highlight .success{--ccb-btn-bg: #4e9e3e;--ccb-btn-bg-hvr: #4c933f;--ccb-btn-bdr: #3e7830;--ccb-btn-clr: #fff}.cc-focus:not(.cc-hide-focus):focus-visible{outline:3px dashed var(--ccb-focus-clr);outline-offset:-3px}.cc-invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;float:left}.cc-inner{display:inline-block;overflow-y:auto;max-height:100%;max-width:100%;padding:23px;border-radius:3px;opacity:0;pointer-events:none;visibility:hidden;font-size:1rem;text-align:left;background:var(--ccb-bg, #fff);box-shadow:var(--ccb-box-shadow, rgba(99, 99, 99, 0.2)) 0 2px 8px 0;animation:var(--ccb-anim, cookiebar-middle-in) var(--ccb-anim-duration) ease-in-out forwards}.cc-group{position:relative;border:1px solid var(--ccb-bdr, #d0d0d0);border-radius:5px;margin-bottom:10px}.cc-cookie-info{font-size:.875rem;background:var(--ccb-info-bg, #fff);border:1px solid var(--ccb-info-bdr, #efefef);padding:10px;border-radius:5px}.cc-cookie-info>div>span{font-weight:600}.cc-cookie-info>div+div{margin-top:5px;word-wrap:break-word}.cc-cookie-info+button.cc-detail-btn-details{margin-top:15px}.cc-cookies{background:var(--ccb-cookies-bg, #fbfbfb);border-radius:0 0 5px 5px}.cc-cookies>p{font-size:.875rem}.cc-cookies>p,.cc-cookies>.cc-cookie{margin:0;padding:15px;border-top:1px solid var(--ccb-cookies-bdr, #fbfbfb)}.cc-cookie label.cookie+*{margin-top:10px}.cc-cookie p{margin:0 0 15px;font-size:.875rem}.cc-cookie-desc p{margin-bottom:0}.cc-footer,.cc-info{text-align:center}.cc-info{margin-top:15px}.cc-info>p{font-size:.875rem}.cc-info>a{display:inline-block;font-size:.813rem;color:var(--ccb-detail-clr, #a2a2a2);text-decoration:none}.cc-info>a:hover{color:var(--ccb-detail-clr-hvr, #717171)}.cc-info>a+a:before{display:inline-block;content:"·";margin-right:5px}.cc-active .cc-inner{opacity:1;pointer-events:auto;visibility:visible}.cc-active.cc-blocked{pointer-events:auto;animation:cookiebar-overlay-in var(--ccb-anim-duration) ease-in-out forwards}.cc-saved.cc-inner{opacity:0;pointer-events:none;visibility:hidden}.cc-saved.cc-blocked{pointer-events:none;animation:cookiebar-overlay-out var(--ccb-anim-duration) ease-in-out forwards}.cc-left{--ccb-justify: flex-start}.cc-right{--ccb-justify: flex-end}.cc-top{--ccb-align: flex-start}.cc-top.cc-active{--ccb-anim: cookiebar-top-in}.cc-top.cc-saved{--ccb-anim: cookiebar-top-out}.cc-middle.cc-active{--ccb-anim: cookiebar-middle-in}.cc-middle.cc-saved{--ccb-anim: cookiebar-middle-out}.cc-bottom{--ccb-align: flex-end}.cc-bottom.cc-active{--ccb-anim: cookiebar-bottom-in}.cc-bottom.cc-saved{--ccb-anim: cookiebar-bottom-out}@media(min-width: 768px){.contao-cookiebar .cc-btn{width:auto;margin-bottom:0}.cc-inner{max-width:var(--ccb-max-width, 750px)}}@media(forced-colors){.contao-cookiebar input+label:after{border:1px solid currentColor}.cc-inner{border:1px solid currentColor}input.cc-group-half+label:after{margin-left:9px}}@media(prefers-reduced-motion){.contao-cookiebar{--ccb-anim-duration: 2s}}@media print{.contao-cookiebar{opacity:0}}@keyframes cookiebar-overlay-in{0%{background:rgba(0,0,0,0)}to{background:var(--ccb-backdrop)}}@keyframes cookiebar-overlay-out{0%{background:var(--ccb-backdrop)}to{background:rgba(0,0,0,0);visibility:hidden}}@keyframes cookiebar-top-in{0%{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}@keyframes cookiebar-top-out{0%{opacity:1;visibility:visible;transform:translateY(0)}to{opacity:0;visibility:hidden;transform:translateY(-100%)}}@keyframes cookiebar-middle-in{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}@keyframes cookiebar-middle-out{0%{opacity:1;visibility:visible;transform:scale(1)}to{opacity:0;visibility:hidden;transform:scale(0)}}@keyframes cookiebar-bottom-in{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes cookiebar-bottom-out{0%{opacity:1;visibility:visible;transform:translateY(0)}to{opacity:0;visibility:hidden;transform:translateY(100%)}}.cc-group{display:flex;flex-wrap:wrap;justify-content:space-between;align-content:center}.cc-group>label{flex-grow:1;margin:5px 0 5px 10px}.cc-cookies{display:none;width:100%}.cc-detail-btn{padding:8px 10px;line-height:1.2rem}.cc-detail-btn-details{text-decoration:underline;padding:0;margin:0 0 10px}.cc-detail-btn,.cc-detail-btn-details{display:inline-block;color:var(--ccb-detail-clr, #a2a2a2);border:0 none;outline:0 none;background:rgba(0,0,0,0);font-size:13px;letter-spacing:0;text-transform:initial;cursor:pointer}.cc-detail-btn span:nth-child(2),.cc-detail-btn-details span:nth-child(2){display:none}.cc-detail-btn.cc-active span:nth-child(1),.cc-detail-btn-details.cc-active span:nth-child(1){display:none}.cc-detail-btn.cc-active span:nth-child(2),.cc-detail-btn-details.cc-active span:nth-child(2){display:inline}.cc-detail-btn:hover,.cc-detail-btn-details:hover{background:rgba(0,0,0,0);color:var(--ccb-detail-clr-hvr, #717171)}
@charset 'utf-8';
/* ----------------------------------------------------------------------------
* modern-normalize v2.0.0
* @link https://github.com/sindresorhus/modern-normalize
* ------------------------------------------------------------------------- */
/*
Document
========
*/
/**
Use a better box model (opinionated).
*/
*,
::before,
::after {
box-sizing: border-box;
}
html {
/* Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) */
font-family:
system-ui,
'Segoe UI',
Roboto,
Helvetica,
Arial,
sans-serif,
'Apple Color Emoji',
'Segoe UI Emoji';
line-height: 1.15; /* 1. Correct the line height in all browsers. */
-webkit-text-size-adjust: 100%; /* 2. Prevent adjustments of font size after orientation changes in iOS. */
-moz-tab-size: 4; /* 3. Use a more readable tab size (opinionated). */
tab-size: 4; /* 3 */
}
/*
Sections
========
*/
body {
margin: 0; /* Remove the margin in all browsers. */
}
/*
Grouping content
================
*/
/**
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
*/
hr {
height: 0; /* 1 */
color: inherit; /* 2 */
}
/*
Text-level semantics
====================
*/
/**
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr[title] {
text-decoration: underline dotted;
}
/**
Add the correct font weight in Edge and Safari.
*/
b,
strong {
font-weight: 500;
}
/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
font-family:
ui-monospace,
SFMono-Regular,
Consolas,
'Liberation Mono',
Menlo,
monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/*
Tabular data
============
*/
/**
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/
table {
text-indent: 0; /* 1 */
border-color: inherit; /* 2 */
}
/*
Forms
=====
*/
/**
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
text-transform: none;
}
/**
Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type='button'],
[type='reset'],
[type='submit'] {
-webkit-appearance: button;
}
/**
Remove the inner border and padding in Firefox.
*/
::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
Restore the focus styles unset by the previous rule.
*/
:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
Remove the additional ':invalid' styles in Firefox.
See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
*/
:-moz-ui-invalid {
box-shadow: none;
}
/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/
legend {
padding: 0;
}
/**
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
vertical-align: baseline;
}
/**
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
}
/**
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to 'inherit' in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/*
Interactive
===========
*/
/*
Add the correct display in Chrome and Safari.
*/
summary {
display: list-item;
}
@charset 'utf-8';
:root {
/*
* Sizes and spacings
* --------------------------------------------------------------------------
*/
--global-width: 80rem; /* 80rem * 16px (base font size) = 1280px */
/* Gutter Size */
/* values are predefined by PCT_AUTOGRID so don't change this */
--gutter-size: var(--gutter-size-small);
--gutter-size-small: .9375rem; /* 15px */
--gutter-size-medium: 1.875rem; /* 30px */
--gutter-size-large: 2.5rem; /* 40px */
/*
* Colors
* --------------------------------------------------------------------------
*/
/*
--color-primary: oklch(34.37% 0.166 268.99);
--color-secondary: oklch(86.52% 0.1768282404898371 90.38155627342532);
--color-accent1: oklch(74.68% 0.096 234.62);
--color-accent2: oklch(47.49% 0.13 274.06);
--color-accent3: oklch(47.49% 0.13 274.06 / 50%);
--color-accent4: oklch(23.99% 0.064 250.81);
--color-accent5: oklch(0.99 0 0);
--color-accent6: oklch(0.94 0.01 231.3);
--color-white: oklch(1.00 0 0);
--color-light-grey: oklch(0.95 0 0);
--color-medium-grey: oklch(0.66 0 0);
--color-dark-grey: oklch(0.4855 0 0);
--color-deep-dark-grey: oklch(0.37 0 0);
--color-black: oklch(0.14 0 0);
*/
--color-primary: oklch(0.48 0.15 253.32);
--color-secondary: oklch(0.88 0.16 112.78);
--color-accent1: oklch(0.62 0.01 248.01);
--color-accent2: oklch(0.5 0.11 155.7);
--color-accent3: oklch(0.58 0.19 25.79);
--color-accent4: oklch(0.85 0.07 228.98);
--color-accent5: oklch(0.99 0 0);
--color-accent6: oklch(0.94 0.01 231.3);
--color-accent7: oklch(0.63 0.2 26.88);
--color-white: oklch(1.00 0 0);
--color-light-grey: oklch(0.95 0 0);
--color-medium-grey: oklch(0.66 0 0);
--color-dark-grey: oklch(0.4855 0 0);
--color-deep-dark-grey: oklch(0.37 0 0);
--color-black: oklch(0.14 0 0);
/*
color: rgb(130 135 140);
color: oklch(0.58 0.19 25.79);
color: oklch(0.88 0.16 112.78);
color: oklch(0.5 0.11 155.7);
color: #005DAF;
color: #2ea3f2;
*/
/*
* Text
* --------------------------------------------------------------------------
*/
/* Font Family */
--font-base: Poppins, Helvetica Neue,sans-serif;
--font-display: var(--font-base);
/* Font Weight */
--font-weight-light: 300;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
/* Letter Spacing */
--kerning: normal;
--kerning-loose: -0.1ch;
--kerning-tight: -0.025ch;
--kerning-tighter: -0.075ch;
/*
* Font Size
*/
--text-size: var(--step-0);
--text-size-h1: var(--step-6);
--text-size-h2: var(--step-5);
--text-size-h3: var(--step-4);
--text-size-h4: var(--step-3);
--text-size-h5: var(--step-2);
--text-size-h6: var(--step-1);
}
/*
* Type scale
* --------------------------------------------
* don't forget to recalculate sizes when changing the --global-width
*/
/* @link https://utopia.fyi/type/calculator?c=360,16,1.125,1280,18,1.125,10,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
:root {
/* Step -3: 11.2373px → 12.642px */
--step--3: clamp(0.7023rem, 0.668rem + 0.1527vi, 0.7901rem);
/* Step -2: 12.642px → 14.2222px */
--step--2: clamp(0.7901rem, 0.7515rem + 0.1718vi, 0.8889rem);
/* Step -1: 14.2222px → 16px */
--step--1: clamp(0.8889rem, 0.8454rem + 0.1932vi, 1rem);
/* Step 0: 16px → 18px */
--step-0: clamp(1rem, 0.9511rem + 0.2174vi, 1.125rem);
/* Step 1: 18px → 20.25px */
--step-1: clamp(1.125rem, 1.07rem + 0.2446vi, 1.2656rem);
/* Step 2: 20.25px → 22.7813px */
--step-2: clamp(1.2656rem, 1.2037rem + 0.2751vi, 1.4238rem);
/* Step 3: 22.7813px → 25.6289px */
--step-3: clamp(1.4238rem, 1.3542rem + 0.3095vi, 1.6018rem);
/* Step 4: 25.6289px → 28.8325px */
--step-4: clamp(1.6018rem, 1.5235rem + 0.3482vi, 1.802rem);
/* Step 5: 28.8325px → 32.4366px */
--step-5: clamp(1.802rem, 1.7139rem + 0.3917vi, 2.0273rem);
/* Step 6: 32.4366px → 36.4912px */
--step-6: clamp(2.0273rem, 1.9281rem + 0.4407vi, 2.2807rem);
/* Step 7: 36.4912px → 41.0526px */
--step-7: clamp(2.2807rem, 2.1691rem + 0.4958vi, 2.5658rem);
/* Step 8: 41.0526px → 46.1841px */
--step-8: clamp(2.5658rem, 2.4403rem + 0.5578vi, 2.8865rem);
/* Step 9: 46.1841px → 51.9571px */
--step-9: clamp(2.8865rem, 2.7453rem + 0.6275vi, 3.2473rem);
/* Step 10: 51.9571px → 58.4518px */
--step-10: clamp(3.2473rem, 3.0885rem + 0.7059vi, 3.6532rem);
}
/*
* Spacing
* --------------------------------------------
* don't forget to recalculate sizes when changing the --global-width
*/
/* @link https://utopia.fyi/space/calculator?c=360,16,1.125,1280,18,1.125,10,3,&s=0.75|0.5|0.25,1.5|2|3|4|6|8|10|12,3xs-xs|2xs-s|xs-m|s-l|m-xl|l-2xl|xl-3xl|2xl-4xl|3xl-5xl|4xl-6xl&g=s,l,xl,12 */
:root {
/* Space 3xs: 4px → 5px */
--space-3xs: clamp(0.25rem, 0.2255rem + 0.1087vi, 0.3125rem);
/* Space 2xs: 8px → 9px */
--space-2xs: clamp(0.5rem, 0.4755rem + 0.1087vi, 0.5625rem);
/* Space xs: 12px → 14px */
--space-xs: clamp(0.75rem, 0.7011rem + 0.2174vi, 0.875rem);
/* Space s: 16px → 18px */
--space-s: clamp(1rem, 0.9511rem + 0.2174vi, 1.125rem);
/* Space m: 24px → 27px */
--space-m: clamp(1.5rem, 1.4266rem + 0.3261vi, 1.6875rem);
/* Space l: 32px → 36px */
--space-l: clamp(2rem, 1.9022rem + 0.4348vi, 2.25rem);
/* Space xl: 48px → 54px */
--space-xl: clamp(3rem, 2.8533rem + 0.6522vi, 3.375rem);
/* Space 2xl: 64px → 72px */
--space-2xl: clamp(4rem, 3.8043rem + 0.8696vi, 4.5rem);
/* Space 3xl: 96px → 108px */
--space-3xl: clamp(6rem, 5.7065rem + 1.3043vi, 6.75rem);
/* Space 4xl: 128px → 144px */
--space-4xl: clamp(8rem, 7.6087rem + 1.7391vi, 9rem);
/* Space 5xl: 160px → 180px */
--space-5xl: clamp(10rem, 9.5109rem + 2.1739vi, 11.25rem);
/* Space 6xl: 192px → 216px */
--space-6xl: clamp(12rem, 11.413rem + 2.6087vi, 13.5rem);
/* One-up pairs */
/* Space 3xs-2xs: 4px → 9px */
--space-3xs-2xs: clamp(0.25rem, 0.1277rem + 0.5435vi, 0.5625rem);
/* Space 2xs-xs: 8px → 14px */
--space-2xs-xs: clamp(0.5rem, 0.3533rem + 0.6522vi, 0.875rem);
/* Space xs-s: 12px → 18px */
--space-xs-s: clamp(0.75rem, 0.6033rem + 0.6522vi, 1.125rem);
/* Space s-m: 16px → 27px */
--space-s-m: clamp(1rem, 0.731rem + 1.1957vi, 1.6875rem);
/* Space m-l: 24px → 36px */
--space-m-l: clamp(1.5rem, 1.2065rem + 1.3043vi, 2.25rem);
/* Space l-xl: 32px → 54px */
--space-l-xl: clamp(2rem, 1.462rem + 2.3913vi, 3.375rem);
/* Space xl-2xl: 48px → 72px */
--space-xl-2xl: clamp(3rem, 2.413rem + 2.6087vi, 4.5rem);
/* Space 2xl-3xl: 64px → 108px */
--space-2xl-3xl: clamp(4rem, 2.9239rem + 4.7826vi, 6.75rem);
/* Space 3xl-4xl: 96px → 144px */
--space-3xl-4xl: clamp(6rem, 4.8261rem + 5.2174vi, 9rem);
/* Space 4xl-5xl: 128px → 180px */
--space-4xl-5xl: clamp(8rem, 6.7283rem + 5.6522vi, 11.25rem);
/* Space 5xl-6xl: 160px → 216px */
--space-5xl-6xl: clamp(10rem, 8.6304rem + 6.087vi, 13.5rem);
/* Custom pairs */
/* Space 3xs-xs: 4px → 14px */
--space-3xs-xs: clamp(0.25rem, 0.0054rem + 1.087vi, 0.875rem);
/* Space 2xs-s: 8px → 18px */
--space-2xs-s: clamp(0.5rem, 0.2554rem + 1.087vi, 1.125rem);
/* Space xs-m: 12px → 27px */
--space-xs-m: clamp(0.75rem, 0.3832rem + 1.6304vi, 1.6875rem);
/* Space s-l: 16px → 36px */
--space-s-l: clamp(1rem, 0.5109rem + 2.1739vi, 2.25rem);
/* Space m-xl: 24px → 54px */
--space-m-xl: clamp(1.5rem, 0.7663rem + 3.2609vi, 3.375rem);
/* Space l-2xl: 32px → 72px */
--space-l-2xl: clamp(2rem, 1.0217rem + 4.3478vi, 4.5rem);
/* Space xl-3xl: 48px → 108px */
--space-xl-3xl: clamp(3rem, 1.5326rem + 6.5217vi, 6.75rem);
/* Space 2xl-4xl: 64px → 144px */
--space-2xl-4xl: clamp(4rem, 2.0435rem + 8.6957vi, 9rem);
/* Space 3xl-5xl: 96px → 180px */
--space-3xl-5xl: clamp(6rem, 3.9457rem + 9.1304vi, 11.25rem);
/* Space 4xl-6xl: 128px → 216px */
--space-4xl-6xl: clamp(8rem, 5.8478rem + 9.5652vi, 13.5rem);
}
/* ----------------------------------------------------------------------------
* Vertical flow of elements
* @link https://piccalil.li/blog/my-favourite-3-lines-of-css/
* -----
* add a default top margin to most elements
* ------------------------------------------------------------------------- */
:is(.flow, .mod_article, .same-height-wrap, .product .formbody) > * + * {
margin-block-start: var(--flow-space, 1em);
}
/* ----------------------------------------------------------------------------
* Document settings
* ------------------------------------------------------------------------- */
html {
font-size: 100%;
font-weight: var(--font-weight-light);
/* Prevent font size inflation */
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
}
body {
background: var(--color-white);
color: var(--color-dark-grey);
font-family: var(--font-base);
font-size: var(--text-size);
line-height: 1.7;
-webkit-hyphens: auto;
hyphens: auto;
min-height: 100vh;
}
/* ----------------------------------------------------------------------------
* Text
* ------------------------------------------------------------------------- */
/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
margin-block-end: 0;
}
/* ----------------------------------------------------------------------------
* Text: Headlines
* ------------------------------------------------------------------------- */
h1,h2,h3,h4,h5,h6,
:is(.h1,.h2,.h3,.h4,.h5,.h6):not(.ce_text),
:is(.h1,.h2,.h3,.h4,.h5,.h6) .headline {
--flow-space: .75em;
color: var(--heading-color, var(--color-primary));
font-family: var(--heading-font, var(--font-display));
font-size: var(--heading-text-size, var(--size-step-2));
font-weight: var(--heading-font-weight, var(--font-weight-bold));
letter-spacing: var(--heading-kerning, var(--kerning));
line-height: var(--heading-line-height, 1.2);
text-transform: var(--heading-text-transform, uppercase);
text-wrap: var(--heading-text-wrap, balance);
&:not(.text-center) {
max-width: var(--heading-max-width, 100%);
}
& + * {
--flow-space: .5em;
}
}
h1,
:is(.h1):not(.ce_text),
:is(.h1) .headline {
--heading-text-size: var(--text-size-h1);
--heading-line-height: 1;
--heading-kerning: var(--kerning-tighter);
}
h2,
:is(.h2):not(.ce_text),
:is(.h2) .headline {
--heading-text-size: var(--text-size-h2);
--heading-line-height: 1;
--heading-kerning: var(--kerning-tight);
}
h3,
:is(.h3):not(.ce_text),
:is(.h3) .headline {
--heading-text-size: var(--text-size-h3);
--heading-line-height: 1.1;
--heading-max-width: 55ch;
}
h4,
:is(.h4):not(.ce_text),
:is(.h4) .headline {
--heading-text-size: var(--text-size-h4);
--heading-line-height: 1.1;
--heading-max-width: 55ch;
}
h5,
:is(.h5):not(.ce_text),
:is(.h5) .headline {
--heading-text-size: var(--text-size-h5);
--heading-max-width: 75ch;
}
h6,
:is(.h6):not(.ce_text),
:is(.h6) .headline {
--heading-text-size: var(--text-size-h6);
--heading-max-width: 75ch;
}
.supheadline {
color: var(--color-accent3);
display: block;
font-style: normal;
font-weight: 600;
margin-block-end: var(--space-3xs);
}
.color-white > .supheadline {
/* color: var(--color-accent3); */
color: oklch(0.99 0 0 / .6);
}
:is(h1, .h1, h2, .h2, h3, .h3) .supheadline {
font-size: var(--step-2);
}
:is(h4, .h4, h5, .h5, h6, .h6) .supheadline {
font-size: var(--step-1);
}
/* ----------------------------------------------------------------------------
* Text: Links
* ------------------------------------------------------------------------- */
a {
&:is(:link, :visited) {
color: currentColor; /* take the same color as the surrounding text */
text-decoration-skip-ink: auto;
text-decoration-color: var(--color-primary);
text-decoration-thickness: 0.2ex;
text-underline-offset: 0.2ex;
}
&:is(:hover, :active, :focus) {
color: var(--color-primary);
}
}
/* ----------------------------------------------------------------------------
* Text: Misc
* ------------------------------------------------------------------------- */
/* Remove list styles on ul, ol elements that are not in a .ce_text, because these are often used for styling and not for lists */
:is(ul,ol) {
list-style: none;
}
:is(.ce_text, .ui-accordion-content) :is(ul,ol) {
list-style: disc;
padding-inline-start: 1.5rem;
}
small {
font-size: var(--step--1);
font-weight: 500;
}
blockquote {
padding-inline-start: 1em;
border-inline-start: 0.3em solid;
font-style: italic;
font-size: var(--size-step-1);
--flow-space: 1.5em;
max-width: 65ch;
}
/* ----------------------------------------------------------------------------
* Images
* ------------------------------------------------------------------------- */
img,
picture {
max-width: 100%;
height: auto;
display: block;
}
figure {
margin: 0;
}
/* ----------------------------------------------------------------------------
* Forms
* ------------------------------------------------------------------------- */
input,
textarea,
[contenteditable] {
caret-color: var(--color-accent1);
}
input {
accent-color: var(--color-primary);
scroll-margin-top: var(--space-l);
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=submit]),
textarea, fieldset {
background: var(--color-white);
border: 2px solid var(--color-medium-grey);
border-radius: 0;
font-family: var(--font-base);
padding: var(--gutter-size);
text-indent: 0;
width: 100%;
}
/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
min-height: 10em;
}
fieldset {
margin: 0;
}
/* Set shorter line heights on interactive elements */
input,
label,
button,
a.btn,
.btn > a {
line-height: 1.3;
}
button,
[type='submit'],
a.btn,
.btn > a {
background: var(--color-primary);
border: 3px solid var(--color-primary);
border-radius: 0;
color: var(--color-white);
font-family: var(--font-base);
padding: var(--space-3xs-2xs) var(--space-m-l);
text-indent: 0;
border-radius: 100px;
display: inline-flex;
text-decoration: none;
line-height: 1.67;
&:is(:hover,:active,:focus) {
border-color: var(--color-secondary);
background-color: var(--color-secondary);
color: var(--color-black);
cursor: pointer;
}
}
button.btn-outline,
[type='submit'].btn-outline,
a.btn.btn-outline,
.btn.btn-outline > a {
&:is(button,[type='submit']),
&:is(a):is(:link,:visited),
& > a:is(:link,:visited) {
background: transparent;
color: var(--color-primary);
}
&:is(button,[type='submit'],a):hover,
& > a:hover {
background: var(--color-primary);
border-color: var(--color-primary);
color: var(--color-white);
}
}
/*
* yellow button that turns blue on hover
*/
.btn-secondary {
&:is(button,[type='submit']),
&:is(a):is(:link,:visited),
& > a:is(:link,:visited) {
background: var(--color-secondary);
border-color: var(--color-secondary);
color: var(--color-black);
font-weight: 500;
}
&:is(button,[type='submit'],a):is(:hover,:active,:focus),
& > a:is(:hover,:active,:focus) {
background: var(--color-primary);
border-color: var(--color-primary);
color: var(--color-white);
}
&.btn-secondary.btn-outline {
&:is(button,[type='submit']),
&:is(a):is(:link,:visited),
& > a:is(:link,:visited) {
background: transparent;
color: var(--color-black);
}
&:is(button,[type='submit'],a):hover,
& > a:hover {
background: var(--color-secondary);
border-color: var(--color-secondary);
color: var(--color-black);
}
}
}
button.btn-size-big,
[type='submit'].btn-size-big,
a.btn.btn-size-big,
.btn.btn-size-big > a {
padding: var(--space-xs-s) var(--space-l-xl);
}
button.btn-size-small,
[type='submit'].btn-size-small,
a.btn.btn-size-small,
.btn.btn-size-small > a {
padding: var(--space-3xs) var(--space-s-m);
}
button.btn-icon-left,
[type='submit'].btn-icon-left,
a.btn.btn-icon-left,
.btn.btn-icon-left > a {
display: inline-flex;
align-items: center;
column-gap: calc(var(--gutter-size) / 2);
&::before {
content: '';
display: inline-flex;
background-repeat: no-repeat;
width: var(--step-3);
height: auto;
aspect-ratio: 1;
background-size: contain;
}
}
button.btn-icon-right,
[type='submit'].btn-icon-right,
a.btn.btn-icon-right,
.btn.btn-icon-right > a {
display: inline-flex;
align-items: center;
column-gap: calc(var(--gutter-size) / 2);
flex-direction: row-reverse;
&::before {
content: '';
display: inline-flex;
background-repeat: no-repeat;
width: var(--step-3);
height: auto;
aspect-ratio: 1;
background-size: contain;
}
}
button.btn-icon-arrow-left-white,
[type='submit'].btn-icon-arrow-left-white,
a.btn.btn-icon-arrow-left-white,
.btn.btn-icon-arrow-left-white > a {
&::before {
/* content: url('data:image/svg+xml;utf8,'); */
background-image: url(/files/theme/images/arrow-left-circle-white.svg);
}
&:is(button,[type='submit'],a):hover::before,
& > a:hover::before {
background-image: url(/files/theme/images/arrow-left-circle-blue.svg);
}
}
button.btn-icon-arrow-left-blue,
[type='submit'].btn-icon-arrow-left-blue,
a.btn.btn-icon-arrow-left-blue,
.btn.btn-icon-arrow-left-blue > a {
&::before {
/* content: url('data:image/svg+xml;utf8,'); */
background-image: url(/files/theme/images/arrow-left-circle-blue.svg);
}
&:is(button,[type='submit'],a):hover::before,
& > a:hover::before {
background-image: url(/files/theme/images/arrow-left-circle-white.svg);
}
}
button.btn-icon-play-white,
[type='submit'].btn-icon-play-white,
a.btn.btn-icon-play-white,
.btn.btn-icon-play-white > a {
&::before {
background-image: url(/files/theme/images/play-circle-white.svg);
}
&:is(button,[type='submit'],a):hover::before,
& > a:hover::before {
background-image: url(/files/theme/images/play-circle-black.svg);
}
}
button.btn-icon-play-black,
[type='submit'].btn-icon-play-black,
a.btn.btn-icon-play-black,
.btn.btn-icon-play-black > a {
&::before {
background-image: url(/files/theme/images/play-circle-black.svg);
}
&:is(button,[type='submit'],a):hover::before,
& > a:hover::before {
background-image: url(/files/theme/images/play-circle-white.svg);
}
}
.formbody {
/*
* remove margin on columns, to add them later in form elements
*/
.autogrid_grid .column, .column[class*="col_"] {
margin-bottom: 0;
}
/*
* Activate vertical flow for forms and form elements
*/
.widget,
.widget > * + * {
margin-block-start: var(--flow-space, 1em);
}
.widget {
--flow-space: var(--gutter-size);
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
.widget-checkbox {
fieldset {
min-width: 150px;
}
span {
display: flex;
align-items: baseline;
gap: var(--gutter-size);
}
label {
min-width: 100px;
text-wrap: balance;
}
}
.widget-select {
align-items: baseline;
column-gap: 0.5rem;
:last-child {
flex-grow: 1;
width: 1%;
}
}
.widget-radio {
fieldset {
display: flex;
flex-direction: column;
}
}
label + * {
--flow-space: .25em;
}
.widget.error {
input {
--flow-space: .25em;
order: 2;
}
p.error {
order: 3;
font-size: 75%;
color: var(--color-accent4);
background: var(--color-secondary);
padding: 0.25rem 0.5rem;
width: 100%;
}
}
}
/* ----------------------------------------------------------------------------
* Tables
* ------------------------------------------------------------------------- */
table {
caption-side: bottom;
font-size: var(--step-4);
font-weight: 300;
color: var(--color-primary);
border-spacing: .625rem;
-webkit-border-vertical-spacing: 0;
border-collapse: separate;
border-color: transparent;
@media(width < 768px) {
font-size: var(--step-0);
border-spacing: 3px;
-webkit-border-vertical-spacing: 0;
}
p:first-child {
margin-block-start: 0;
}
em {
font-style: normal;
font-size: 70%;
}
thead th,
tbody td {
vertical-align: middle;
padding-block: var(--gutter-size);
}
thead th {
line-height: 1;
font-size: var(--step-2);
font-weight: 500;
border-radius: .9375rem .9375rem 0 0;
padding-inline: .25rem;
@media(width < 768px) {
font-size: var(--step--2);
}
}
tbody th {
font-weight: 500;
text-align: left;
}
tbody tr:first-child td {
border-radius: .9375rem .9375rem 0 0;
}
& thead + tbody tr:first-child td {
border-radius: 0;
}
tbody tr:last-child td {
border-radius: 0 0 .9375rem .9375rem;
}
caption {
display: none
}
}
.ce_table {
--th-red-gradient: linear-gradient(110deg, rgba(250,33,24,1) 0%, rgba(255,204,0,1) 100%);
&.table-full-width table {
width: 100%;
}
&.table-fixed table {
/* table-layout: fixed; */
th, td {
width: 1%;
}
}
.head_0 { background: var(--th1-bgcolor, transparent); color: var(--th1-color, var(--color-primary)); }
.head_1 { background: var(--th2-bgcolor, transparent); color: var(--th2-color, var(--color-primary)); }
.head_2 { background: var(--th3-bgcolor, transparent); color: var(--th3-color, var(--color-primary)); }
.head_3 { background: var(--th4-bgcolor, transparent); color: var(--th4-color, var(--color-primary)); }
tr:nth-child(odd) .col_0 { background: var(--tb1-bgcolor-odd, transparent); }
tr:nth-child(even) .col_0 { background: var(--tb1-bgcolor-even, transparent); }
tr:nth-child(odd) .col_1 { background: var(--tb2-bgcolor-odd, transparent); }
tr:nth-child(even) .col_1 { background: var(--tb2-bgcolor-even, transparent); }
tr:nth-child(odd) .col_2 { background: var(--tb3-bgcolor-odd, transparent); }
tr:nth-child(even) .col_2 { background: var(--tb3-bgcolor-even, transparent); }
tr:nth-child(odd) .col_3 { background: var(--tb4-bgcolor-odd, transparent); }
tr:nth-child(even) .col_3 { background: var(--tb4-bgcolor-even, transparent); }
&.col1-white { --th1-bgcolor: var(--color-white); --th1-color: var(--color-white); --tb1-bgcolor-odd: var(--color-white); --tb1-bgcolor-even: var(--color-white); }
&.col2-white { --th2-bgcolor: var(--color-white); --th2-color: var(--color-white); --tb2-bgcolor-odd: var(--color-white); --tb2-bgcolor-even: var(--color-white); }
&.col3-white { --th3-bgcolor: var(--color-white); --th3-color: var(--color-white); --tb3-bgcolor-odd: var(--color-white); --tb3-bgcolor-even: var(--color-white); }
&.col4-white { --th4-bgcolor: var(--color-white); --th4-color: var(--color-white); --tb4-bgcolor-odd: var(--color-white); --tb4-bgcolor-even: var(--color-white); }
&.col1-lightblue { --th1-bgcolor: var(--color-accent1); --th1-color: var(--color-white); --tb1-bgcolor-odd: #DDEAF2; --tb1-bgcolor-even: #C2DAE8; }
&.col2-lightblue { --th2-bgcolor: var(--color-accent1); --th2-color: var(--color-white); --tb2-bgcolor-odd: #DDEAF2; --tb2-bgcolor-even: #C2DAE8; }
&.col3-lightblue { --th3-bgcolor: var(--color-accent1); --th3-color: var(--color-white); --tb3-bgcolor-odd: #DDEAF2; --tb3-bgcolor-even: #C2DAE8; }
&.col4-lightblue { --th4-bgcolor: var(--color-accent1); --th4-color: var(--color-white); --tb4-bgcolor-odd: #DDEAF2; --tb4-bgcolor-even: #C2DAE8; }
&.col1-darkblue { --th1-bgcolor: var(--color-primary); --th1-color: var(--color-white); --tb1-bgcolor-odd: #DDDFEE; --tb1-bgcolor-even: #C8CCEB; }
&.col2-darkblue { --th2-bgcolor: var(--color-primary); --th2-color: var(--color-white); --tb2-bgcolor-odd: #DDDFEE; --tb2-bgcolor-even: #C8CCEB; }
&.col3-darkblue { --th3-bgcolor: var(--color-primary); --th3-color: var(--color-white); --tb3-bgcolor-odd: #DDDFEE; --tb3-bgcolor-even: #C8CCEB; }
&.col4-darkblue { --th4-bgcolor: var(--color-primary); --th4-color: var(--color-white); --tb4-bgcolor-odd: #DDDFEE; --tb4-bgcolor-even: #C8CCEB; }
&.col1-yellow { --th1-bgcolor: var(--color-secondary); --th1-color: var(--color-accent3); --tb1-bgcolor-odd: #F3F0E4; --tb1-bgcolor-even: #EFE7C6; }
&.col2-yellow { --th2-bgcolor: var(--color-secondary); --th2-color: var(--color-accent3); --tb2-bgcolor-odd: #F3F0E4; --tb2-bgcolor-even: #EFE7C6; }
&.col3-yellow { --th3-bgcolor: var(--color-secondary); --th3-color: var(--color-accent3); --tb3-bgcolor-odd: #F3F0E4; --tb3-bgcolor-even: #EFE7C6; }
&.col4-yellow { --th4-bgcolor: var(--color-secondary); --th4-color: var(--color-accent3); --tb4-bgcolor-odd: #F3F0E4; --tb4-bgcolor-even: #EFE7C6; }
&.col1-orange { --th1-bgcolor: #FD840B; --th1-color: var(--color-white); --tb1-bgcolor-odd: #F7E9D9; --tb1-bgcolor-even: #F4DBBA; }
&.col2-orange { --th2-bgcolor: #FD840B; --th2-color: var(--color-white); --tb2-bgcolor-odd: #F7E9D9; --tb2-bgcolor-even: #F4DBBA; }
&.col3-orange { --th3-bgcolor: #FD840B; --th3-color: var(--color-white); --tb3-bgcolor-odd: #F7E9D9; --tb3-bgcolor-even: #F4DBBA; }
&.col4-orange { --th4-bgcolor: #FD840B; --th4-color: var(--color-white); --tb4-bgcolor-odd: #F7E9D9; --tb4-bgcolor-even: #F4DBBA; }
&.col1-red { --th1-bgcolor: #FA2118; --th1-color: var(--color-white); --tb1-bgcolor-odd: #F6E5E4; --tb1-bgcolor-even: #F5D4D1; }
&.col2-red { --th2-bgcolor: #FA2118; --th2-color: var(--color-white); --tb2-bgcolor-odd: #F6E5E4; --tb2-bgcolor-even: #F5D4D1; }
&.col3-red { --th3-bgcolor: #FA2118; --th3-color: var(--color-white); --tb3-bgcolor-odd: #F6E5E4; --tb3-bgcolor-even: #F5D4D1; }
&.col4-red { --th4-bgcolor: #FA2118; --th4-color: var(--color-white); --tb4-bgcolor-odd: #F6E5E4; --tb4-bgcolor-even: #F5D4D1; }
&.col1-red-gradient { --th1-bgcolor: var(--th-red-gradient); --th1-color: var(--color-white); --tb1-bgcolor-odd: #F7EAD9; --tb1-bgcolor-even: #F4DBBA; }
&.col2-red-gradient { --th2-bgcolor: var(--th-red-gradient); --th2-color: var(--color-white); --tb2-bgcolor-odd: #F7EAD9; --tb2-bgcolor-even: #F4DBBA; }
&.col3-red-gradient { --th3-bgcolor: var(--th-red-gradient); --th3-color: var(--color-white); --tb3-bgcolor-odd: #F7EAD9; --tb3-bgcolor-even: #F4DBBA; }
&.col4-red-gradient { --th4-bgcolor: var(--th-red-gradient); --th4-color: var(--color-white); --tb4-bgcolor-odd: #F7EAD9; --tb4-bgcolor-even: #F4DBBA; }
&.col1-turqoise { --th1-bgcolor: #9AD3DE; --th1-color: var(--color-white); --tb1-bgcolor-odd: #D8EDF1; --tb1-bgcolor-even: #BDDEE4; }
&.col2-turqoise { --th2-bgcolor: #9AD3DE; --th2-color: var(--color-white); --tb2-bgcolor-odd: #D8EDF1; --tb2-bgcolor-even: #BDDEE4; }
&.col3-turqoise { --th3-bgcolor: #9AD3DE; --th3-color: var(--color-white); --tb3-bgcolor-odd: #D8EDF1; --tb3-bgcolor-even: #BDDEE4; }
&.col4-turqoise { --th4-bgcolor: #9AD3DE; --th4-color: var(--color-white); --tb4-bgcolor-odd: #D8EDF1; --tb4-bgcolor-even: #BDDEE4; }
}
/*
* Make Table scrollable
*/
.ce_table {
overflow-x: auto;
th:first-child {
position: sticky;
inset-inline-start: 0;
}
tbody tr > :is(th, td) {
min-width: 100px;
}
}
/*
* Different font sizes
*/
.ce_table {
&.text-small {
table {
font-size: var(--step-2);
}
}
}
/*
* Spacing between table cells (left/right)
*/
.ce_table {
&.spacing-inside,
&.spacing-inside-only {
:is(th,td):not(:first-child):not(:last-child) {
padding-inline: 1rem;
}
:is(th,td):is(:first-child) {
padding-inline-end: 1rem;
}
:is(th,td):is(:last-child) {
padding-inline-start: 1rem;
}
}
&.spacing-inside-only {
table {
border-spacing: 0;
}
}
&.spacing-outside,
&.spacing-outside-only {
table {
border-spacing: .625rem;
}
}
&.spacing-outside-only {
:is(th,td) {
padding-inline: 0;
}
}
}
/*
* Spacing between table cells (above/below)
*/
.ce_table {
&.spacing-amidst-tighter {
td {
padding-block: .25rem;
}
}
&.spacing-amidst-looser {
padding-block: 1.25rem;
}
}
/* ----------------------------------------------------------------------------
* Misc
* ------------------------------------------------------------------------- */
/* Anything that has been anchored to should have extra scroll margin */
:target {
scroll-margin-block: 5ex;
}
/* ----------------------------------------------------------------------------
* Contao utility classes
* ------------------------------------------------------------------------- */
/*
* Text color
*/
.color-primary { && { color: var(--color-primary); }}
.color-secondary { && { color: var(--color-secondary); }}
.color-accent1 { && { color: var(--color-accent1); }}
.color-accent2 { && { color: var(--color-accent2); }}
.color-accent3 { && { color: var(--color-accent3); }}
.color-accent4 { && { color: var(--color-accent4); }}
.color-accent5 { && { color: var(--color-accent5); }}
.color-accent6 { && { color: var(--color-accent6); }}
.color-white { && { color: var(--color-white); }}
.color-light-grey { && { color: var(--color-light-grey); }}
.color-medium-grey { && { color: var(--color-medium-grey); }}
.color-dark-grey { && { color: var(--color-dark-grey); }}
.color-black { && { color: var(--color-black); }}
/*
* Background color
*/
.bgcolor-primary { && { background-color: var(--color-primary); }}
.bgcolor-secondary { && { background-color: var(--color-secondary); }}
.bgcolor-accent1 { && { background-color: var(--color-accent1); }}
.bgcolor-accent2 { && { background-color: var(--color-accent2); }}
.bgcolor-accent3 { && { background-color: var(--color-accent3); }}
.bgcolor-accent4 { && { background-color: var(--color-accent4); }}
.bgcolor-accent5 { && { background-color: var(--color-accent5); }}
.bgcolor-accent6 { && { background-color: var(--color-accent6); }}
.bgcolor-white { && { background-color: var(--color-white); }}
.bgcolor-light-grey { && { background-color: var(--color-light-grey); }}
.bgcolor-medium-grey { && { background-color: var(--color-medium-grey); }}
.bgcolor-dark-grey { && { background-color: var(--color-dark-grey); }}
.bgcolor-black { && { background-color: var(--color-black); }}
.bgcolor-gradient-dark-blue { && { background: linear-gradient(180deg, oklch(from var(--color-primary) l c h / 0.8) 215px, var(--color-accent1) 100%); }}
.bgcolor-gradient-light-blue { && { background: linear-gradient(180deg, var(--color-accent1) 0%, oklch(from var(--color-accent1) l c h / 0.5) 100%); }}
/*
* Text alignment
*/
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }
/*
* Spacing classes
* (these also work with the PCT_Autogrid extension)
*/
.mt-0 { && { margin-top: 0; } }
.mt-xxs { && { margin-top: var(--space-3xs); } }
.mt-xs { && { margin-top: var(--space-2xs); } }
.mt-s { && { margin-top: var(--space-s); } }
.mt-m { && { margin-top: var(--space-l); } }
.mt-l { && { margin-top: var(--space-2xl); } }
.mt-xl { && { margin-top: var(--space-4xl); } }
.mt-xxl { && { margin-top: var(--space-6xl); } }
.mb-0 { && { margin-bottom: 0; } }
.mb-xxs { && { margin-bottom: var(--space-3xs); } }
.mb-xs { && { margin-bottom: var(--space-2xs); } }
.mb-s { && { margin-bottom: var(--space-s); } }
.mb-m { && { margin-bottom: var(--space-l); } }
.mb-l { && { margin-bottom: var(--space-2xl); } }
.mb-xl { && { margin-bottom: var(--space-4xl); } }
.mb-xxl { && { margin-bottom: var(--space-6xl); } }
/*
* Mobile spacing classes
* (these are exclusively used by PCT_Autogrid)
*/
@media (0 <= width < 680px) {
.mt-xxs-m { && { margin-top: var(--space-3xs); } }
.mt-xs-m { && { margin-top: var(--space-2xs); } }
.mt-s-m { && { margin-top: var(--space-s); } }
.mt-m-m { && { margin-top: var(--space-l); } }
.mt-l-m { && { margin-top: var(--space-2xl); } }
.mt-xl-m { && { margin-top: var(--space-4xl); } }
.mt-xxl-m { && { margin-top: var(--space-6xl); } }
.mb-xxs-m { && { margin-bottom: var(--space-3xs); } }
.mb-xs-m { && { margin-bottom: var(--space-2xs); } }
.mb-s-m { && { margin-bottom: var(--space-s); } }
.mb-m-m { && { margin-bottom: var(--space-l); } }
.mb-l-m { && { margin-bottom: var(--space-2xl); } }
.mb-xl-m { && { margin-bottom: var(--space-4xl); } }
.mb-xxl-m { && { margin-bottom: var(--space-6xl); } }
}
/*
* Hide an element, fast
*/
.invisible {
display: none;
}
/*
* Hide an element, but only visually
*/
.hidden,
.hidden-focusable:not(:focus):not(:focus-within) {
border: 0 !important;
clip: rect(0, 0, 0, 0) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
white-space: nowrap !important;
width: 1px !important;
}
.hidden:not(caption),
.hidden-focusable:not(:focus):not(:focus-within):not(caption) {
position: absolute !important;
}
@charset 'utf-8';
/* ----------------------------------------------------------------------------
* SITE HEADER
* ------------------------------------------------------------------------- */
#header {
--nav-height: 150px;
--nav-height-row1: 58px;
--nav-height-row2: 80px;
--mobile-nav-height: 88px;
--mobile-nav-height-row1: 44px;
--mobile-nav-height-row2: 44px;
/* position: sticky; */
position: relative;
top: 0;
transition: top 500ms ease-in-out;
z-index: 90;
color: var(--color-white);
&.scroll-up,
&:focus-within {
top: 0;
}
&.scroll-down {
top: -100%;
}
.nav-container {
position: relative;
top: 38px;
z-index: 2;
height: calc(var(--nav-height-row1) + var(--nav-height-row2));
@media(width < 1024px) {
top: 0;
}
}
.meta {
display: flex;
height: var(--nav-height-row1);
@media(width < 1024px) {
height: var(--mobile-nav-height-row1);
}
@media(width < 768px) {
font-size: clamp(0.75rem, 0.25rem + 1.5625vw, 1rem);
}
.invis {
flex-grow: 1;
}
.main {
background: var(--color-accent1);
height: 100%;
flex-basis: var(--global-width);
display: flex;
justify-content: flex-end;
@media(width > 1370px) {
position: relative;
left: 3.3rem;
}
}
.side {
background-color: var(--color-accent2);
height: 100%;
flex-grow: 1;
}
.link {
display: flex;
position: relative;
left: .78rem;
a {
--target-bgcolor: var(--link-bgcolor, var(--color-primary));
--target-bgcolor-hover-multiplier: var(--link-bgcolor-hover-multiplier, 0.95);
transition: background 125ms ease-in-out;
&:is(:link, :visited) {
transform: skewX(340deg);
padding-inline: clamp(1rem, -3.5rem + 9.375vw, 4rem);
background: var(--target-bgcolor);
display: flex;
align-items: center;
column-gap: 0.6rem;
}
&:is(:hover,:active,:focus) {
background: oklch(from var(--target-bgcolor) calc(l * var(--target-bgcolor-hover-multiplier)) c h);
color: currentColor;
transition: background 125ms ease-in-out;
outline: none;
img {
transform: scale(1.4);
transition: all 250ms ease-in-out;
}
}
& > * {
transform: skewX(20deg);
}
img {
max-width: 16px;
transition: all 250ms ease-in-out;
}
}
a:is(:link, :visited) {
text-decoration: none;
}
}
.link-search {
--link-bgcolor: var(--color-accent1);
--link-bgcolor-hover-multiplier: .75;
left: 0.8rem;
}
.link-opening-hours {
--link-bgcolor: var(--color-secondary);
--link-bgcolor-hover-multiplier: 1.075;
color: var(--color-black);
@media(width < 512px) {
display: none;
}
}
.link-cart {
--link-bgcolor: var(--color-accent2);
--link-bgcolor-hover-multiplier: .9;
}
}
.main {
display: flex;
.invis {
flex-basis: calc((100% - var(--global-width)) / 2);
}
.main {
background-color: var(--color-white);
background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 8%, rgba(255,255,255,1) 10%, rgba(255,255,255,1) 100%);
display: flex;
/* flex-basis: var(--global-width); */
flex-grow: 1;
box-shadow: 0px 4px 4px oklch(0 0 0 / 0.04);
height: var(--nav-height-row2);
@media(width < 1024px) {
height: calc(var(--mobile-nav-height) / 2);
}
}
.main-inside {
display: flex;
flex-basis: var(--global-width);
align-items: center;
justify-content: space-between;
}
}
& > .inside > :not(:first-child) {
margin-top: calc(-1 * (var(--nav-height-row1) + var(--nav-height-row2)));
@media(width < 1024px) {
margin-top: -50px;
}
}
}
/* .with-bottom-wave-foo {
mask-image: url(/files/theme/images/header-wave.svg);
mask-size: contain;
} */
.with-bottom-wave {
position: relative;
&::after,
& .bg-image::after {
content: '';
display: block;
height: auto;
width: 100%;
aspect-ratio: 1920 / 61;
position: absolute;
bottom: 0;
left: 0;
background: transparent url(/files/theme/images/bottom-wave.svg) no-repeat 0 0;
background-size: cover;
}
}
.with-top-wave {
&::before {
content: '';
display: block;
height: auto;
width: 100%;
aspect-ratio: 1920 / 214;
background: transparent url(/files/theme/images/top-double-wave.svg) no-repeat bottom left;
background-size: cover;
}
}
/* ----------------------------------------------------------------------------
* Website Logo
* ------------------------------------------------------------------------- */
.website-logo-container {
flex-basis: 320px;
flex-shrink: 0;
padding: 25px 0;
@media(width < 1024px) {
flex-basis: 240px;
}
@media(width < 768px) {
flex-basis: clamp(11.875rem, 5.625rem + 19.5313vw, 15rem);
}
}
.website-logo {
display: inline-flex;
position: relative;
/* bottom: 35px;
left: 0; */
margin-right: 70px;
&::after {
content: '';
display: block;
height: 277px;
width: 800px;
background: white;
position: absolute;
bottom: -40px;
right: 20px;
transform: rotate(19.2deg);
transform-origin: bottom right;
border-radius: 5px;
box-shadow: 2px 5px 5px oklch(0.73 0 0 / 0.25);
}
.image_container {
display: inline-flex;
position: relative;
z-index: 10;
top: -36px;
@media(width < 1024px) {
top: -16px;
}
}
a {
display: inline-flex;
}
picture {
display: inline-flex;
}
}
/* ----------------------------------------------------------------------------
* Main Navigation
* ------------------------------------------------------------------------- */
.main-nav {
display: none;
height: 100%;
@media (width >= 1024px) {
display: flex;
flex-grow: 2;
justify-content: space-between;
flex-shrink: 2;
}
.level_1 {
display: flex;
width: 100%;
/* height: 100%; */
margin: 0;
padding: 0;
gap: var(--gutter-size);
justify-content: space-between;
align-items: center;
@media(width < 1370px) {
padding-right: var(--gutter-size);
}
li {
height: 100%;
display: flex;
align-items: center;
}
}
a:not(.invisible):is(:link, :visited),
strong {
color: var(--color-primary);
font-size: var(--step--1);
text-decoration: none;
text-transform: uppercase;
font-weight: 700;
background:
linear-gradient(to right, transparent, transparent),
linear-gradient(to right, var(--color-accent3), oklch(from var(--color-accent7) l c h / .6), var(--color-accent3));
background-size: 100% .3ex, 0 .3ex;
background-position: 100% 61%, 0 61%;
background-repeat: no-repeat;
transition: background-size 400ms;
display: flex;
align-items: center;
height: 100%;
}
a:not(.invisible):is(:hover, :active, :focus) {
color: var(--color-accent3); /*oklch(from var(--color-accent3) calc(l * .92) c h);*/
background-size: 0 .3ex, 100% .3ex;
}
strong,
a:not(.invisible).trail {
color: var(--color-accent3);
}
}
/* ----------------------------------------------------------------------------
* Mobile Navigation
* ------------------------------------------------------------------------- */
body.mm-wrapper--opened {
overflow: hidden auto;
}
.mm-wrapper_blocking {
overflow: initial;
}
.mm-toggler__container {
display: flex;
align-items: baseline;
position: relative;
right: -5px;
@media (width > 1024px) {
display: none;
}
a:is(:link, :visited) {
text-decoration: none;
color: var(--color-primary);
}
a:is(:hover, :active, :focus) {
color: var(--color-secondary);
}
}
a.mm-toggler__link {
display: flex;
align-items: center;
&:is(:hover, :active, :focus) {
color: var(--color-accent1);
.mm-toggler__icon {
--c: var(--color-accent1);
}
}
}
.mm-toggler__label {
font-weight: var(--font-weight-bold);
font-size: var(--step-2);
position: relative;
top: 1px;
left: .5rem;
}
.mm-toggler__icon {
--s: 26px; /* control the size */
--c: var(--color-primary); /* the color */
height: var(--s);
aspect-ratio: 1;
border: none;
padding: 0;
border-inline: calc(var(--s)/2) solid #0000;
box-sizing: content-box;
--_g1: linear-gradient(var(--c) 20%,#0000 0 80%,var(--c) 0)
no-repeat content-box border-box;
--_g2: radial-gradient(circle closest-side at 50% 12.5%,var(--c) 95%,#0000)
repeat-y content-box border-box;
background:
var(--_g2) left var(--_p,0px) top,
var(--_g1) left calc(var(--s)/10 + var(--_p,0px)) top,
var(--_g2) right var(--_p,0px) top,
var(--_g1) right calc(var(--s)/10 + var(--_p,0px)) top;
background-size:
20% 80%,
40% 100%;
position: relative;
clip-path: inset(0 25%);
-webkit-mask: linear-gradient(90deg,#0000,#000 25% 75%,#0000);
cursor: pointer;
transition:
background-position .15s var(--_s,.15s),
clip-path 0s var(--_s,.3s);
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
&:before,
&:after {
content:"";
position: absolute;
border-radius: var(--s);
inset: 40% 0;
background: var(--c);
transition: transform .15s calc(.15s - var(--_s,.15s));
}
span {
display: block;
}
}
.mm-wrapper--opened .mm-toggler__icon {
clip-path: inset(0);
--_p: calc(-1*var(--s));
--_s: 0s;
&:before {
transform: rotate(45deg);
}
&:after {
transform: rotate(-45deg);
}
}
.mm-menu--theme-light {
--mm-color-background: linear-gradient(180deg, oklch(from var(--color-accent1) l c h / 0.75) 0%, oklch(from var(--color-accent1) calc(l * .8) c h / 0.25) 100%);
--mm-color-border: oklch(from var(--color-white) l c h / 25%);
--mm-color-icon: var(--color-white);
--mm-color-text: var(--color-white);
--mm-color-text-dimmed: oklch(from oklch(98.81% 0 0) l c h / 75%);
--mm-color-background-highlight: transparent; /*oklch(from var(--color-accent1) calc(l * .9) c h / 75%);*/
--mm-color-background-emphasis: transparent; /*oklch(from var(--color-accent1) calc(l * .9) c h / 75%);*/
--mm-color-focusring: var(--color-accent1);
}
.mm-menu {
backdrop-filter: blur(10px);
}
.mm-menu a {
font-weight: var(--font-weight-semibold);
}
.mm-panel.mm-panel--parent {
background: transparent;
.mm-listview > li {
opacity: 0;
transition: opacity 320ms ease-in-out;
}
}
.mm-listitem__btn:not(.mm-listitem__text) {
border-left-width: 0
}
.mm-listitem:is(:hover, :active, :focus) > a {
color: var(--color-primary);
&:after {
border-color: var(--color-primary);
}
}
/* ----------------------------------------------------------------------------
* MAIN CONTENT
* ------------------------------------------------------------------------- */
#container {
overflow: hidden;
background-color: var(--color-white);
overflow: visible;
z-index: 100;
position: relative;
}
#main > .inside {
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
& > .mod_article:not(.mt-0):first-child {
margin-block-start: var(--space-4xl);
}
}
/* ----------------------------------------------------------------------------
* ARTICLE
* ------------------------------------------------------------------------- */
.mod_article {
margin-inline: auto;
max-width: var(--global-width);
padding-inline: var(--gutter-size);
/*
* Set a default margin-top for all articles
* can be overwritten individually by adding the class .mt-0
* or globally by commenting the following line
*/
margin-block-start: var(--flow-space, 1em);
&.full-width {
overflow: hidden;
max-width: 100%;
padding-inline: 0;
}
&.narrow {
max-width: 58em;
}
&.narrower {
max-width: 42em;
}
}
#footer .inside .mod_article.mb-0:not(:last-child) {
/* margin-bottom: -9.25rem; */
margin-bottom: -12.25rem;
}
/* ----------------------------------------------------------------------------
* PRE-FOOTER
* ------------------------------------------------------------------------- */
.pre-footer {
background-image: linear-gradient(to bottom, oklch(0.85 0.07 228.98), oklch(0.48 0.15 253.32));
margin-block-end: -3.5rem;
/* overflow: hidden; */
position: relative;
&::before {
content: '';
display: block;
height: 98px;
width: 100%;
position: absolute;
top: 0;
left: 0;
background: transparent url(/files/theme/images/pre-footer-wave.svg) no-repeat 0 0;
background-size: 100% 100%;
}
}
/* ----------------------------------------------------------------------------
* SITE FOOTER
* ------------------------------------------------------------------------- */
.footer {
position: relative;
margin-top: 3.5rem;
&::before {
content: '';
display: block;
height: auto;
width: 100%;
aspect-ratio: 1920 / 57;
background: transparent url(/files/theme/images/footer-wave.svg) no-repeat 0 0;
background-size: 100% 100%;
margin-block: -125px -1px;
}
& > .inside {
color: var(--color-white);
background: var(--color-primary);
}
.content {
width: 100%;
max-width: var(--global-width);
overflow: hidden;
margin-inline: auto;
padding-block: var(--space-2xl) var(--space-m);
a:is(:link, :visited) {
text-decoration: none;
}
a:is(:hover, :active, :focus) {
color: currentColor;
text-decoration: underline;
text-decoration-color: currentColor;
text-decoration-thickness: 0.2ex;
text-decoration-color: var(--color-secondary);
}
}
.content.with-right-sidebar {
display: flex;
flex-wrap: wrap;
column-gap: 5rem;
row-gap: var(--space-m);
--sidebar-target-width: 8rem;
--sidebar-content-min-width: 76%;
}
.mod_customnav {
align-self: center;
ul {
display: flex;
flex-wrap: wrap;
gap: 1.5rem 2vw; /*var(--gutter-size);*/
justify-content: space-between;
margin-block: 0;
margin-inline: 1rem;
padding-inline-start: 0;
text-transform: uppercase;
font-size: var(--step--1);
text-align: center;
}
}
.socials {
display: flex;
gap: var(--gutter-size);
justify-content: space-evenly;
padding-inline: 1rem;
/* a:is(:link, :visited) {
span {
}
} */
a:is(:hover, :active, :focus) {
svg path {
fill: var(--color-secondary);
}
svg path.stroke {
fill: transparent;
stroke: var(--color-secondary);
}
}
}
}
.binder {
overflow: hidden;
text-align: center;
background: oklch(from var(--color-accent1) calc(l * .35) c h);
font-size: var(--step--2);
color: var(--color-white);
p {
margin-block: var(--space-xs);
}
a:is(:link, :visited) {
text-decoration-color: currentColor;
text-decoration-thickness: 0.2ex;
}
a:is(:hover, :active, :focus) {
color: currentColor;
text-decoration-color: var(--color-secondary);
}
}
@charset 'utf-8';
/* ----------------------------------------------------------------------------
* PCT_AUTOGRID Adjustments
* ------------------------------------------------------------------------- */
div.autogrid_row,
div.autogrid_wrapper {
&.gutter_s { --column-gutter: var(--gutter-size-small); }
&.gutter_m { --column-gutter: var(--gutter-size-medium); }
&.gutter_l { --column-gutter: var(--gutter-size-large); }
}
.gutter_none.gutter_none:is(.autogrid_row, .autogrid_wrapper) {
margin-inline: calc(-1 * var(--gutter-size));
@media(width < 768px) {
margin-inline: calc(-1 * var(--gutter-size)) !important;
}
}
.autogrid_grid .column, .column[class*=col_] {
@media(width < 768px) {
margin-bottom: var(--gutter-size);
}
}
.autogrid_grid div.column, div.column[class*=col_] {
&.no-spacing {
padding-inline: 0;
}
&.full-width > .attributes > .same-height-wrap {
width: calc(100% - var(--column-gutter));
}
}
/*
* PCT_AUTOGRID columns have a greedy selector
* so we need to reset the values for other elements
*/
:is(.col_1,.col_2,.col_3,.col_4,.col_5,.col_6,.col_7,.col_8,.col_9,.col_10,.col_11,.col_12):is(td,li) {
flex: initial;
max-width: none;
}
form {
.autogrid_grid,
.autogrid_row,
.autogrid_wrapper {
@media (width < 768px) {
margin-left: 0 !important;
margin-right: 0 !important;
}
}
}
/* ----------------------------------------------------------------------------
* PCT_AUTOGRID variation for tilted boxes
* ------------------------------------------------------------------------- */
.tilted-right.tilted-right:is(.autogrid_row,.autogrid_wrapper) {
--tilted-edge-offset: calc(-1 * var(--edge-offset) - var(--column-gutter));
--edge-offset: -120px;
@media (width < 767px) {
--edge-offset: -85px;
}
margin-inline: var(--edge-offset) !important; /* -40px waren schon gesetzt, da .gutter_l -40px ist. => somit 45px breiterer rand */
/* &.gutter_s { --tilted-edge-offset: calc(-1 * var(--edge-offset) - var(--column-gutter)); }
&.gutter_m { --tilted-edge-offset: calc(-1 * var(--edge-offset) - var(--column-gutter)); }
&.gutter_l { --tilted-edge-offset: calc(-1 * var(--edge-offset) - var(--column-gutter)); } */
& > .column > .attributes {
transform: skewX(337.5deg);
border-radius: 15px;
}
& > .column > .attributes > .same-height-wrap {
transform: skewX(22.5deg);
@media (width < 1280px) {
padding-inline: 1.5rem;
}
}
@media (width < 767px) {
.column {
padding-left: 10px !important;
padding-right: 10px !important;
}
}
&.img-left {
.column:first-child > .attributes {
justify-content: flex-end;
}
& > .column:first-child .same-height-wrap {
padding-inline: 0;
position: relative;
width: calc(100% - 75px);
height: 100%;
}
& > .column:first-child .ce_image {
inset: 0;
position: absolute;
margin-right: calc(-1 * (100% - 18vw));
margin-right: -65px;
}
& > .column:first-child img {
inset: 0;
position: absolute;
max-width: none;
width: 100%;
height: 100%;
object-fit: cover;
}
}
.column:last-child > .attributes > .same-height-wrap > * {
@media (width < 767px) {
line-height: 1.2;
}
@media (width > 767px) {
padding-left: 3rem;
}
}
.column:first-child > .attributes > .same-height-wrap {
.ce_headline {
font-size: clamp(1.5rem, 0.5217rem + 4.3478vi, 4rem);
@media (width < 767px) {
margin-bottom: 2.3rem;
text-align: left;
}
}
}
}
/* ----------------------------------------------------------------------------
* PCT_AUTOGRID variation for two full-width columns and default-width content
* --
* NOTE: This only works for 2 columns!
* ------------------------------------------------------------------------- */
.content-default-width:is(.autogrid_row,.autogrid_wrapper) {
flex-wrap: nowrap;
.col_1 { --column-width: 1/12; }
.col_2 { --column-width: 2/12; }
.col_3 { --column-width: 3/12; }
.col_4 { --column-width: 4/12; }
.col_5 { --column-width: 5/12; }
.col_6 { --column-width: 6/12; }
.col_7 { --column-width: 7/12; }
.col_8 { --column-width: 8/12; }
.col_9 { --column-width: 9/12; }
.col_10 { --column-width: 10/12; }
.col_11 { --column-width: 11/12; }
.col_12 { --column-width: 12/12; }
@media (width < 767px) {
&:not(.no-wrap) {
flex-wrap: wrap;
}
.col_1_m { --column-width: 1/12; }
.col_2_m { --column-width: 2/12; }
.col_3_m { --column-width: 3/12; }
.col_4_m { --column-width: 4/12; }
.col_5_m { --column-width: 5/12; }
.col_6_m { --column-width: 6/12; }
.col_7_m { --column-width: 7/12; }
.col_8_m { --column-width: 8/12; }
.col_9_m { --column-width: 9/12; }
.col_10_m { --column-width: 10/12; }
.col_11_m { --column-width: 11/12; }
.col_12_m { --column-width: 12/12; }
}
.column {
flex: unset;
max-width: unset;
width: calc((var(--column-width, 1/2) * var(--global-width)) + ((max(100%, var(--global-width)) - var(--global-width)) / 2));
& > .attributes {
display: flex;
flex-wrap: wrap;
height: 100%;
width: 100%;
overflow: hidden;
& > .same-height-wrap {
width: calc(min(
calc(100% - var(--column-gutter, 15px) - (.5 * var(--tilted-edge-offset, 0px))),
calc(var(--column-width, 1/3) * var(--global-width) - var(--column-gutter, 15px) - var(--gutter-size))
)
);
flex: unset;
}
}
}
.column:first-child > .attributes {
justify-content: flex-end;
}
}
/* ----------------------------------------------------------------------------
* Homepage section "Ortsgespräch"
* ------------------------------------------------------------------------- */
.callout-magazine {
&.line-1 {
font-size: clamp(1.125rem, 0.6923rem + 1.9231vi, 3rem);
font-weight: 700;
line-height: 1;
}
&.line-2 {
--flow-space: 0;
font-size: clamp(1.5rem, 0.9231rem + 2.5641vi, 4rem);
font-weight: 700;
line-height: 1;
}
&.line-3 {
--flow-space: 0;
font-size: clamp(1rem, 0.8846rem + 0.5128vi, 1.5rem);
line-height: 1;
}
a:is(:link, :visited) {
text-decoration-color: oklch(from var(--color-white) l c h / 0.5);
}
a:is(:hover, :active, :focus) {
text-decoration-color: var(--color-secondary);
color: var(--color-white);
}
}
/* ----------------------------------------------------------------------------
* SIDEBAR (Generic)
* ------------------------------------------------------------------------- */
.with-left-sidebar {
display: flex;
flex-wrap: wrap;
& > :first-child {
flex-basis: var(--sidebar-target-width, 10rem);
flex-grow: 1;
/* background: lightblue; */
}
& > :not(:first-child) {
flex-basis: 0;
flex-grow: 999;
min-width: var(--sidebar-content-min-width, 50%);
/* background: orange; */
}
}
.with-right-sidebar {
display: flex;
flex-wrap: wrap;
& > :first-child {
flex-basis: 0;
flex-grow: 999;
min-width: var(--sidebar-content-min-width, 50%);
/* background: lightblue; */
}
& > :last-child {
flex-basis: var(--sidebar-target-width, 10rem);
flex-grow: 1;
/* background: orange; */
}
}
/* ----------------------------------------------------------------------------
* IMAGE
* ------------------------------------------------------------------------- */
.image_container {
font-size: .8125rem;
.caption {
color: #393939;
margin-top: .5em;
max-width: 100%;
}
}
/* ----------------------------------------------------------------------------
* GALLERY
* ------------------------------------------------------------------------- */
.ce_gallery {
ul {
margin: 0;
padding: 0;
display: grid;
grid-gap: var(--gutter-size);
grid-template-columns: repeat(auto-fill, minmax(var(--listitem-minwidth, 10rem), 1fr));
&.cols_1 { --listitem-minwidth: 100%; }
&.cols_2 { --listitem-minwidth: 23.5rem; }
&.cols_3 { --listitem-minwidth: 17.5rem; }
&.cols_4 { --listitem-minwidth: 13.75rem; }
&.cols_5 { --listitem-minwidth: 11.5rem; }
&.cols_6 { --listitem-minwidth: 9.5rem; }
}
figure a {
background-color: black;
display: block;
}
img {
opacity: .85;
transition: opacity .2s;
&:hover,
&:focus,
&:active {
opacity: 1;
}
}
}
/* ----------------------------------------------------------------------------
* MEDIAPLAYER
* ------------------------------------------------------------------------- */
.ce_youtube {
.video_container {
position: relative;
width: 100%;
height: auto;
& > div {
aspect-ratio: 16 / 9;
}
}
img,
iframe {
position: absolute;
inset: 0;
width: 100% !important;
height: 100% !important;
border: 0 none;
}
}
.block .responsive.ratio-169 { aspect-ratio: 16 / 9; }
.block .responsive.ratio-1610 { aspect-ratio: 16 / 10; }
.block .responsive.ratio-219 { aspect-ratio: 21 / 9; }
.block .responsive.ratio-43 { aspect-ratio: 4 / 3; }
.block .responsive.ratio-32 { aspect-ratio: 3 / 2; }
/* ----------------------------------------------------------------------------
* RSCE CONTENT CONTAINER
* ------------------------------------------------------------------------- */
.content-container {
width: 100%;
max-width: var(--global-width);
margin-inline: auto;
padding-inline: var(--gutter-size);
overflow: hidden;
position: relative;
& > * {
position: relative;
}
& > .image_container.bg-image {
inset: 0;
position: absolute;
img {
inset: 0;
position: absolute;
max-width: none;
width: 100%;
height: 100%;
object-fit: cover;
}
&.bg-size-cover img { object-fit: cover; }
&.bg-size-contain img { object-fit: contain; }
}
&.full {
max-width: 100%;
& > .full {
padding-inline: calc(-1 * var(--gutter-size));
}
}
&.narrow {
max-width: calc(var(--global-width) * .75);
margin-inline: auto;
padding-inline: var(--gutter-size);
overflow: hidden;
}
&.narrower {
max-width: calc(var(--global-width) * .5);
margin-inline: auto;
padding-inline: var(--gutter-size);
overflow: hidden;
}
&[class*="align-"] {
display: flex;
flex-direction: column;
justify-content: flex-start;
flex-wrap: nowrap;
}
/* horizontal alignment */
&.align-center { align-content: center; align-items: center; }
&.align-left { align-content: flex-start; align-items: flex-start; }
&.align-right { align-content: flex-end; align-items: flex-end; }
/* vertical alignment */
&.align-top { justify-content: flex-start; }
&.align-middle { justify-content: center; }
&.align-bottom { justify-content: flex-end; }
&.align-space-between { justify-content: space-between; }
&.align-space-evenly { justify-content: space-evenly; }
&.align-space-around { justify-content: space-around; }
}
.mod_article > .content-container {
padding-inline: 0;
}
/* ----------------------------------------------------------------------------
* NEWS
* ------------------------------------------------------------------------- */
/* News Cards (horizontal teaser boxes)
* ------------------------------------------------------------------------- */
.mod_newslist.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
grid-template-rows: 1fr;
gap: var(--space-3xl) var(--space-xl);
margin-block-end: var(--space-4xl);
.layout_latest {
display: flex;
flex-direction: column;
color: var(--color-dark-grey);
& > * + * {
margin-block-start: var(--flow-space, 1em);
}
.image_container {
overflow: hidden;
margin-block: 0 var(--space-s);
border-radius: 1.25rem;
/* picture {
max-width: unset;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
} */
img {
/* max-width: unset;
flex-shrink: 0;
min-height: 100%; */
min-width: 100%;
aspect-ratio: 4 / 3;
}
}
h2 {
font-family: var(--font-display);
font-size: var(--step--1);
font-weight: 700;
line-height: 1.5;
display: flex;
min-height: 3.5rem;
align-items: center;
a:is(:link, :visited) {
color: var(--color-accent1);
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
display: -webkit-box;
overflow: hidden;
text-decoration: none;
}
}
&:hover h2 a:is(:link, :visited) {
color: var(--color-primary);
text-decoration: underline;
text-decoration-color: var(--color-secondary);
text-decoration-thickness: 0.2ex;
text-underline-offset: 0.1ex;
}
.ce_text {
color: var(--color-deep-dark-grey);
font-size: var(--step--1);
font-weight: 400;
line-height: 1.4;
min-height: 5rem;
flex-grow: 666;
-webkit-box-orient: vertical;
-webkit-line-clamp: 9;
display: -webkit-box;
overflow: hidden;
}
.info {
display: none;
}
.more {
margin-top: var(--space-l);
font-size: var(--step--2);
.newscard:hover & {
color: var(--color-white);
}
}
}
}
/* News details
* ------------------------------------------------------------------------- */
.mod_newsreader {
.layout_full {
display: grid;
h1 {
margin-top: 0;
order: 1;
margin-bottom: var(--space-l);
}
h2 {
order: 2;
font-size: var(--step-3);
max-width: initial;
margin-top: 0;
margin-bottom: var(--space-m);
}
.info {
/* text-align: center;
order: 3; */
display: none;
}
/*
* All user generated elements get the same (lower) order to sort them
* below the header
*/
& > *:not(h1):not(h2):not(.info) {
order: 4;
}
}
.back {
margin-block: var(--space-xl) var(--space-3xl);
}
}
/* ----------------------------------------------------------------------------
* PAGINATION
* used for news, events, gallery, etc.
* ------------------------------------------------------------------------- */
.pagination {
--pagination-height: 3.25rem;
margin-block-start: var(--space-l);
grid-column-start: 1;
grid-column-end: -1;
p,
li:is(.first, .last) {
display: none;
}
& > ul {
list-style-type: none;
display: flex;
justify-content: center;
gap: var(--gutter-size);
padding: 0;
}
li.previous a,
li.next a {
&:is(:link, :visited) {
background: transparent url(/files/theme/images/arrow-left-circle-blue.svg) no-repeat;
background-size: contain;
text-indent: -9999px;
width: auto;
height: var(--pagination-height);
aspect-ratio: 1;
transition: scale 120ms ease-in-out;
display: flex;
}
&:is(:hover, :focus, :active) {
scale: 1.2;
transition: scale 120ms ease-in-out;
}
}
li.next a {
&:is(:link, :visited) {
rotate: 180deg;
}
}
li.pages ul {
list-style-type: none;
display: flex;
justify-content: center;
gap: 0;
padding: 0;
li {
background-color: var(--color-light-grey);
&:first-child {
border-radius: calc(var(--pagination-height) / 2) 0 0 calc(var(--pagination-height) / 2);
padding-inline-start: .5rem;
}
&:last-child {
border-radius: 0 calc(var(--pagination-height) / 2) calc(var(--pagination-height) / 2) 0;
padding-inline-end: .5rem;
}
&:hover {
/* background-color: var(--color-primary);
color: var(--color-white); */
a {
/* color: var(--color-white); */
color: var(--color-primary);
font-size: var(--step-5);
transition: font-size 120ms ease-in-out;
}
}
}
strong,
a:is(:link, :visited) {
width: 3rem;
height: 3.25rem;
display: flex;
justify-content: center;
align-items: center;
padding: 0 .5rem;
color: currentColor;
font-size: var(--step-1);
text-decoration: none;
}
strong {
color: var(--color-primary);
}
}
}
/* ----------------------------------------------------------------------------
* CE TEXT
* ------------------------------------------------------------------------- */
.ce_text {
& > p,
&.line-default > p {
max-width: 80ch;
}
&.line-wide > p {
max-width: 95ch;
}
&.line-full > p {
max-width: unset;
}
&.text-small > p {
font-size: var(--step--2);
}
&.text-large > p {
font-size: var(--step-1);
}
}
/* ----------------------------------------------------------------------------
* RSCE "Text Sidebar Icon"
* ------------------------------------------------------------------------- */
.ce_rsce_text_sidebar_icon {
&:is(.with-left-image, .with-right-image) {
display: flex;
column-gap: var(--gutter-size);
.image_container {
flex-shrink: 0;
}
}
.headline {
text-transform: none;
}
.headline + p {
margin-top: 0;
}
}
/* ----------------------------------------------------------------------------
* CE Download
* ------------------------------------------------------------------------- */
.ce_download {
.size {
display: none;
}
}
/* ----------------------------------------------------------------------------
* Hero Section on Homepage
* ------------------------------------------------------------------------- */
.homepage-hero {
min-height: 750px;
.homepage-headline {
margin-block-start: 13rem;
p {
margin: 0;
}
em {
font-weight: 700;
font-style: normal;
display: inline-flex;
border-radius: 100px;
}
p:first-child {
em {
font-size: clamp(1.25rem, -0.0625rem + 2.9167vw, 2.5625rem); /* 20@720 -> 41@1440 */
color: var(--color-white);
padding-inline: 1.5rem;
background-color: var(--color-accent1);
}
}
p:last-child {
line-height: 1.65;
padding: 2px 0;
em {
font-size: clamp(1.5rem, -0.1528rem + 4.7222vw, 3.625rem); /* 24@560 -> 58@1280 */
color: var(--color-primary);
padding-inline: clamp(1.5rem, -2.1rem + 16vw, 3.5rem); /* 24@360 -> 56@560 */
padding-block: .5rem;
margin-block-start: clamp(0.5rem, -0.4rem + 4vw, 1rem); /* 8@360 -> 16@560 */
background-color: oklch(from var(--color-accent5) l c h / 0.9);
line-height: 1.3;
}
}
}
}
/* ----------------------------------------------------------------------------
* Article with wavy gradient backgrounds
* ------------------------------------------------------------------------- */
.wavy-gradient-dark-blue {
position: relative;
&::before {
content: '';
display: block;
height: auto;
width: 100%;
aspect-ratio: 1920 / 214;
background: transparent url(/files/theme/images/top-double-wave-dark-blue.svg) no-repeat bottom left;
background-size: cover;
}
& > div:first-child {
background: linear-gradient(180deg, oklch(from var(--color-primary) l c h / 0.8) 215px, var(--color-accent4) 100%);
}
&.wavy-gradient-dark-blue-bottom::after,
&.wavy-gradient-dark-blue-bottom .bg-image::after {
content: '';
display: block;
height: auto;
width: 100%;
aspect-ratio: 1920 / 61;
position: absolute;
bottom: 0;
left: 0;
background: transparent url(/files/theme/images/bottom-wave.svg) no-repeat 0 0;
background-size: cover;
}
}
.wavy-gradient-light-blue {
position: relative;
padding-inline: 0;
&::before {
content: '';
display: block;
height: auto;
width: 100%;
aspect-ratio: 1920 / 199;
background: transparent url(/files/theme/images/top-double-wave-light-blue.svg) no-repeat bottom left;
background-size: cover;
}
& > div:first-child {
background: linear-gradient(180deg, var(--color-accent4) 0%, oklch(from var(--color-accent4) l c h / 0.5) 100%);
}
}
/* ----------------------------------------------------------------------------
* CE Swiper
* ------------------------------------------------------------------------- */
:root {
--swiper-navigation-size: 35px;
--swiper-navigation-color: var(--color-white);
--swiper-pagination-color: var(--color-white);
}
.ce_swiperStart {
.swiper-button-next,
.swiper-button-prev {
filter: drop-shadow(2px 4px 6px oklch(from var(--color-black) l c h / 0.45));
font-weight: 700;
transition: all 120ms ease-in-out;
&:hover {
scale: 1.3;
transition: all 120ms ease-in-out;
cursor: pointer;
}
}
.swiper-pagination-bullet {
background: transparent;
width: 12px;
height: auto;
aspect-ratio: 1;
border: 1px solid oklch(from var(--color-white) l c h / 0.95);
&.swiper-pagination-bullet-active {
background: oklch(from var(--color-white) l c h / 0.5);
}
}
}
/* ----------------------------------------------------------------------------
* (A single) Page Teaser Card
* ------------------------------------------------------------------------- */
.page-teaser {
position: relative;
.inside {
aspect-ratio: 395 / 452;
border-radius: 30px;
bottom: 0;
display: flex;
flex-direction: column;
height: auto;
overflow: hidden;
position: relative;
transition: all 240ms ease-in-out;
width: 100%;
box-shadow: 2px 2px 10px 0 oklch(from var(--color-black) l c h / 0.25);
}
.popover {
align-items: center;
background-color: oklch(from var(--color-primary) l c h / 0.5);
bottom: -5rem;
color: var(--color-white);
display: flex;
font-size: clamp(1.5rem, 1.4022rem + 0.4348vw, 1.75rem);
font-weight: 600;
justify-content: center;
line-height: 1.1;
min-height: 12rem;
padding: 1rem;
position: absolute;
text-align: center;
text-wrap: balance;
transition: all 160ms ease-in-out;
width: 100%;
@media (width < 1024px) {
font-size: var(--step-5);
}
.title {
align-items: center;
display: flex;
flex-direction: column;
&::after {
aspect-ratio: 1;
background: transparent url(/files/theme/images/arrow-right-white.svg) no-repeat 0 0;
content: '';
display: flex;
height: auto;
margin-block: 1.5rem 1rem;
opacity: 0;
transition: all 220ms ease-in-out;
width: 38px;
}
}
}
a {
&:is(:link, :visited) {
inset: 0;
position: absolute;
text-indent: -99999px;
z-index: 10;
}
&:is(:hover, :active, :focus) {
outline: none;
& ~ .inside {
bottom: 1.5rem;
box-shadow: 0 0 10px 7px oklch(from var(--color-white) l c h / 0.75);
transition: all 320ms ease-in-out;
.popover {
background: var(--color-primary);
bottom: 0;
transition: all 240ms ease-in-out;
}
.title::after {
opacity: 1;
transition: all 480ms ease-in-out;
}
}
}
}
}
/*
* Variation 1: The Card has more width than height
*/
.page-teaser.variant-horizontal {
.inside {
aspect-ratio: 594 / 370;
}
.popover {
min-height: 9rem;
font-size: var(--step-3);
padding: .5rem;
@media (width < 1024px) {
font-size: var(--step-1);
bottom: -6rem;
}
.title {
&::after {
margin-block: .75rem 1.8rem;
}
@media (width < 1024px) {
&::after {
margin-block: .75rem 3rem;
}
}
}
}
a {
&:is(:hover, :active, :focus) {
& ~ div {
bottom: 1.5rem;
.popover {
bottom: -1rem;
@media (width < 1024px) {
bottom: -3rem;
}
}
}
}
}
}
.teasers-1 .page-teaser.variant-horizontal {
.inside {
max-width: 420px;
}
}
/*
* Variation 2: The card also has a description text and no shadow
*/
.page-teaser.variant-description {
.popover {
flex-direction: column;
}
}
/*
* Variation 3: Popover is always shown
*/
.page-teaser.always-show {
.popover {
bottom: clamp(-4rem, -4.6923rem + 3.0769vw, -1rem);
padding-block-start: 1.5rem;
}
.title {
height: 8rem;
align-items: flex-start;
width: 80%;
.line1 {
font-size: clamp(1rem, 0.8846rem + 0.5128vw, 1.5rem);;
line-height: 0.8;
font-weight: var(--font-weight-light);
}
.line2 {
font-size: clamp(1.5rem, 0.8077rem + 3.0769vw, 4.5rem);;
line-height: 1.3;
text-indent: -0.06ex;
text-transform: uppercase;
}
&:has(.line3) .line2 {
font-size: clamp(1.25rem, 0.875rem + 1.6667vw, 2.875rem);;
line-height: 1;
}
.line3 {
font-size: clamp(1.125rem, 0.9519rem + 0.7692vw, 1.875rem);
font-weight: var(--font-weight-regular);
text-transform: uppercase;
}
}
a {
&:is(:hover, :active, :focus) {
& ~ .inside {
box-shadow: 0 0 15px 6px oklch(from var(--color-primary) l c h / 0.3);
.popover {
bottom: clamp(-4rem, -4.6923rem + 3.0769vw, -1rem);
background-color: oklch(from var(--color-primary) l c h / 0.5);
backdrop-filter: blur(3px);
}
.title::after {
opacity: 0;
}
}
}
}
}
/* ----------------------------------------------------------------------------
* List of Page Teaser Cards
* ------------------------------------------------------------------------- */
.cards-list {
display: grid;
gap: var(--space-xl) var(--space-xl);
grid-template-columns: repeat(auto-fit, minmax(286px, 1fr));
grid-template-rows: 1fr;
margin-block-start: 3rem;
padding-inline-start: 0;
}
/* ----------------------------------------------------------------------------
* RSCE Page Teaser List
* ------------------------------------------------------------------------- */
.ce_rsce_page_teaser_list {
/*
* show 3 horizontal cards per row
*/
.cards-list.variant-horizontal {
grid-template-columns: repeat(auto-fit, minmax(386px, 1fr));
}
}
/* ----------------------------------------------------------------------------
* RSCE Career Teaser
* ------------------------------------------------------------------------- */
.ce_rsce_career_teaser {
.cards-list {
column-gap: var(--space-m);
grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
@media(width < 1080px) {
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}
.page-teaser {
max-width:620px;
margin-inline: auto;
}
li:first-child .inside {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
li:last-child .inside {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
.inside {
box-shadow: 0 0 0 0 transparent;
&:not(:has(.image_container)) {
background: var(--color-primary);
}
.popover {
background: oklch(from var(--color-primary) l c h / 0.25);
bottom: -2.5rem;
justify-content: flex-start;
padding-block-start: 2rem;
backdrop-filter: blur(2px);
@media(width < 1280px) {
bottom: -5.5rem;
}
.title {
flex-direction: row;
column-gap: 1rem;
font-size: clamp(1rem, 0.6827rem + 1.4103vi, 2.375rem);
text-align: right;
&::after {
margin-block: 0;
opacity: 1;
transition: opacity 240ms ease-in-out;
flex-shrink: 0;
}
}
.text {
font-size: var(--step--1);
font-weight: normal;
line-height: 1.3;
margin-block-start: 1rem;
opacity: 0;
transition: opacity 240ms ease-in-out;
}
}
}
a:is(:hover, :active, :focus) ~ .inside {
box-shadow: 0 0 15px 6px oklch(from var(--color-primary) l c h / 0.3);
.text {
opacity: 1;
}
}
}
/*
* Content Container with full width Slider and Page Teasers as Slider elements
*/
.has-slider-full-width {
--swiper-navigation-size: 73px;
max-width: 100%;
& > div:first-child {
overflow: hidden;
}
.ce_swiperStart {
width: calc(100% + 24rem);
max-width: calc(100% + 24rem);
margin-inline: -12rem;
}
.swiper-button-next {
right: 13rem;
@media (width < 1024px) {
right: 12.3rem;
}
}
.swiper-button-prev {
left: 12.3rem;
@media (width < 1024px) {
left: 12.3rem;
}
}
.swiper-button-next,
.swiper-button-prev {
top: 40%;
}
.swiper-wrapper {
padding-block-start: 2.5rem;
}
}
/*
* Content Container with default width Slider and Page Teasers as Slider elements
*/
.has-slider-default-width {
--swiper-navigation-size: 73px;
& > div:first-child {
overflow: hidden;
& > div {
width: 100%;
max-width: var(--global-width);
margin-inline: auto;
padding-inline: var(--gutter-size);
overflow: hidden;
position: relative;
}
}
.ce_swiperStart {
width: calc(100% + 24rem);
max-width: calc(100% + 24rem);
margin-inline: -12rem;
}
.ce_swiperStart:has(.ce_rsce_page_teaser_list) .inside {
scale: .92;
}
.swiper-container {
overflow: visible
}
.swiper-button-next {
right: 0;
}
.swiper-button-prev {
left: 0;
}
.swiper-button-next,
.swiper-button-prev {
top: 53%;
}
.swiper-wrapper {
padding-block-start: 2.5rem;
}
@media (width < 1024px) {
.popover {
font-size: var(--step-5);
}
.ce_swiperStart:has(.ce_rsce_page_teaser_list) {
width: calc(100% + 24rem);
max-width: calc(100% + 24rem);
margin-inline: -12rem;
}
.ce_rsce_page_teaser_list {
.swiper-button-next {
right: 12rem;
}
.swiper-button-prev {
left: 12rem;
}
}
}
}
/* ----------------------------------------------------------------------------
* Accordeon
* ------------------------------------------------------------------------- */
.ce_accordion {
.ui-accordion-header {
color: var(--color-white);
padding-inline: .7rem;
padding-block: .45rem;
font-weight: 600;
font-size: var(--step-2);
position: relative;
display: flex;
max-width: 60ch;
flex-direction: row-reverse;
align-items: center;
background-color: var(--color-accent1);
border-radius: .625rem;
transition: background-color 60ms ease-in-out;
&:is(:hover, :active, :focus) {
cursor: pointer;
}
&.ui-accordion-header-active {
background-color: var(--color-primary);
}
}
&:has(.ui-accordion-header-collapsed) .ui-accordion-header:is(:hover) {
background-color: var(--color-primary);
}
.ui-accordion-header-icon {
width: 32px;
height: auto;
aspect-ratio: 1;
content: '+';
z-index: 2;
flex-shrink: 0;
background-size: contain;
transition: background-image 160ms ease-in-out;
&.ui-icon-triangle-1-e {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800' viewBox='0 0 32 32'%3E%3Cpath fill='white' fill-rule='evenodd' d='M22 17h-5v5a1.001 1.001 0 0 1-2 0v-5h-5a1.001 1.001 0 0 1 0-2h5v-5a1.001 1.001 0 0 1 2 0v5h5a1.001 1.001 0 0 1 0 2M16 0C7.163 0 0 7.16 0 16s7.163 16 16 16 16-7.16 16-16S24.837 0 16 0'/%3E%3C/svg%3E");
}
&.ui-icon-triangle-1-s {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800' viewBox='0 0 32 32'%3E%3Cpath fill='white' fill-rule='evenodd' d='M22 17H10a1.001 1.001 0 0 1 0-2h12a1.001 1.001 0 0 1 0 2M16 0C7.163 0 0 7.16 0 16s7.163 16 16 16 16-7.16 16-16S24.837 0 16 0'/%3E%3C/svg%3E");
}
}
.ui-accordion-header-text {
flex-grow: 1;
z-index: 2;
}
.ui-accordion-content {
max-width: 80ch;
}
}
/* ----------------------------------------------------------------------------
* OpenStreetMaps
* gabelbart/contao-simple-osm-bundle
* ------------------------------------------------------------------------- */
.mod_openstreetmap_iframe {
margin-block: 0;
iframe {
border-width: 0;
}
}
/* ----------------------------------------------------------------------------
* Isotope Quick Products
* RhymeDigital/isotope_quickproducts
* ------------------------------------------------------------------------- */
.ce_iso_quickproducts .product {
.formbody {
display: grid;
grid-template-rows: auto 1fr 1fr 1fr;
grid-template-areas:
"image"
"name"
"price"
"details";
}
h3 {
grid-area: name;
}
.image_container {
grid-area: image;
}
.sku {
display: none;
}
.offer {
grid-area: price;
}
.details {
grid-area: details;
}
}
/* ----------------------------------------------------------------------------
* Isotope Product Listing
* ------------------------------------------------------------------------- */
.mod_iso_productlist .product_list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
grid-column-gap: 1.5rem;
grid-row-gap: 6rem;
.product .formbody {
--flow-space: 2rem;
display: flex;
flex-direction: column;
position: relative;
align-items: center;
}
h3 {
--flow-space: 2rem;
order: 2;
font-size: var(--step-3);
}
a:is(:link,:visited) {
text-decoration: none;
}
.image_container {
order: 1;
}
.sku {
display: none;
}
.offer {
--flow-space: .5rem;
order: 3;
}
.details {
order: 4;
}
}
/* ----------------------------------------------------------------------------
* Isotope Product Details
* ------------------------------------------------------------------------- */
.mod_iso_productreader {
.with-left-sidebar {
--sidebar-target-width: 28.125rem;
--sidebar-content-min-width: 41%;
column-gap: var(--gutter-size-large);
}
.image_container {
margin-bottom: var(--space-s);
}
.main {
max-width: 65ch;
}
h2 {
margin-top: 0;
grid-area: name;
}
.image_container {
grid-area: image;
}
.sku {
display: none;
}
.offer {
/* --flow-space: .5rem; */
grid-area: offer;
.price {
font-size: var(--step-3);
color: var(--color-primary);
font-weight: var(--font-weight-bold);
}
}
.description {
grid-area: description;
}
.options {
/* --flow-space: .5rem; */
grid-area: options;
}
.submit_container {
grid-area: submit;
display: flex;
column-gap: var(--gutter-size);
}
.quantity_container {
flex-grow: 1;
flex-basis: 4rem;
label {
display: none;
}
input {
height: 100%;
}
}
.submit.add_to_cart {
flex-grow: 20;
}
.back {
margin-top: var(--space-3xl);
}
}
/* ----------------------------------------------------------------------------
* Isotope Cart
* ------------------------------------------------------------------------- */
.mod_iso_cart .formbody {
overflow-x: auto;
margin-block-start: var(--space-l);
}
.mod_iso_cart table {
width: 100%;
/* max-width: 87.5ch; */
font-size: var(--step-0);
border-collapse: collapse;
/* margin-inline: auto; */
/*
* tbody
* --------------------------------------------------------------------------
*/
tbody tr td {
text-align: end;
padding: 0.25rem 0.75rem;
&.image {
@media(width < 500px) {
display: none;
}
}
&.name {
min-width: 15ch;
}
&.quantity {
min-width: 9ch;
max-width: 5.5rem;
}
&.price:not(.total) {
display: none;
}
&.price.total {
font-weight: var(--font-weight-semibold);
}
&.actions {
word-break: auto-phrase;
text-align: center;
a {
display:block;
}
}
}
tbody tr + tr td {
border-top: 3px solid var(--color-light-grey);
}
/*
* tfoot
* --------------------------------------------------------------------------
*/
tfoot tr td {
text-align: end;
padding: 0.25rem 0.75rem;
font-size: var(--step--1);
&:first-child {
@media(width < 500px) {
display: none;
}
}
&.price:not(.total) {
display: none;
}
}
tfoot tr:first-of-type td,
tfoot tr:last-of-type td {
border-top: 3px solid var(--color-medium-grey);
}
tfoot tr:last-of-type td {
font-size: var(--step-1);
font-weight: var(--font-weight-semibold);
}
tfoot tr + tr td {
border-top: 3px solid var(--color-light-grey);
}
/*
* content in cells
* --------------------------------------------------------------------------
*/
ul {
margin: 0;
}
.image_container {
min-width: 100px;
}
}
.mod_iso_cart .submit_container {
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
gap: var(--gutter-size);
/* max-width: 87.5ch; */
margin-block-start: 4rem;
/* margin-inline: auto; */
@media(width < 500px) {
flex-direction: column-reverse;
}
}
/* ----------------------------------------------------------------------------
* Isotope Checkout (General)
* ------------------------------------------------------------------------- */
.mod_iso_checkout {
--checkout-max-width: 87.5ch;
}
.mod_iso_checkout .steps {
color: var(--color-white);
ol {
display: flex;
flex-wrap: wrap;
gap: 1px;
list-style-type: none;
padding-left: 0;
border-radius: min(100px,4vw);
overflow: hidden;
}
li {
flex-grow: 1;
flex-basis: 100px;
text-align: center;
&:last-child {
flex-basis: 190px;
}
}
a:is(:link, :visited),
span:not(.invisible) {
font-size: var(--step-up-00);
color: inherit;
display: block;
padding: .85rem 0;
text-decoration: none;
background: var(--color-primary);
}
:is(a,span):is(:hover, :active, :focus),
li.active span {
background: var(--color-secondary);
color: black;
}
}
.mod_iso_checkout .empty.message {
margin-block-end: var(--space-6xl);
}
/* ----------------------------------------------------------------------------
* Isotope Checkout (Address)
* ------------------------------------------------------------------------- */
.mod_iso_checkout #iso_mod_checkout_address {
max-width: var(--checkout-max-width);
margin: var(--space-2xl) auto 0;
.formbody {
/* display: flex;
flex-wrap: wrap;
gap: var(--gutter-size); */
}
.address_new {
display: grid;
gap: var(--gutter-size);
grid-template-areas:
"firstname lastname company"
"street zip location"
"phone mail .";
@media(width < 640px) {
grid-template-areas:
"firstname lastname"
"company company"
"street zip"
"location location"
"mail mail"
"phone phone";
}
.widget:nth-child(1) { grid-area: firstname; }
.widget:nth-child(2) { grid-area: lastname; }
.widget:nth-child(3) { grid-area: company; }
.widget:nth-child(4) { grid-area: street; }
.widget:nth-child(5) { grid-area: zip; }
.widget:nth-child(6) { grid-area: location; }
.widget:nth-child(7) { grid-area: phone; }
.widget:nth-child(8) { grid-area: mail; }
}
.shippingaddress {
margin-block-start: var(--space-2xl);
}
}
/* ----------------------------------------------------------------------------
* Isotope Checkout (Shipping)
* ------------------------------------------------------------------------- */
.mod_iso_checkout #iso_mod_checkout_shipping {
max-width: var(--checkout-max-width);
margin: var(--space-2xl) auto 0;
}
/* ----------------------------------------------------------------------------
* Isotope Checkout (Payment)
* ------------------------------------------------------------------------- */
.mod_iso_checkout #iso_mod_checkout_payment {
max-width: var(--checkout-max-width);
margin: var(--space-2xl) auto 0;
}
/* ----------------------------------------------------------------------------
* Isotope Checkout (Summary aka Last step)
* ------------------------------------------------------------------------- */
.mod_iso_checkout .review.orderinfo {
max-width: var(--checkout-max-width);
margin: var(--space-2xl) auto var(--space-xl);
display: grid;
gap: 1rem;
grid-template-rows: auto;
grid-template-areas:
"title title"
"introtext introtext"
"billing_address shipping_address"
"shipping_method payment_method";
@media(width < 666px) {
grid-template-areas:
"title"
"introtext"
"billing_address"
"shipping_method"
"payment_method";
&:has(.shipping_address) {
grid-template-areas:
"title"
"introtext"
"billing_address"
"shipping_address"
"shipping_method"
"payment_method";
}
}
h2 {
grid-area: title;
}
p {
grid-area: introtext;
margin-block-end: var(--space-l);
}
.billing_address {
grid-area: billing_address;
}
.shipping_address {
grid-area: shipping_address;
}
.shipping_method {
grid-area: shipping_method;
}
.payment_method {
grid-area: payment_method;
}
.info_container {
background: var(--color-light-grey);
border-radius: 35px;
padding: 1.5rem 2rem;
display: flex;
flex-direction: column;
& > * {
margin-block-start: var(--flow-space, 1em);
}
h3 {
--flow-space: 0;
}
.edit {
order: 3;
--flow-space: 2rem;
}
}
}
.mod_iso_checkout .review.orderproducts {
overflow-x: auto;
}
.mod_iso_checkout table {
width: 100%;
max-width: 87.5ch;
font-size: var(--step-0);
border-collapse: collapse;
margin-inline: auto;
/*
* tbody
* --------------------------------------------------------------------------
*/
tbody tr td {
text-align: end;
padding: 0.25rem 0.75rem;
&:last-child {
font-weight: var(--font-weight-semibold);
}
&.image {
@media(width < 500px) {
display: none;
}
}
&.price:not(.total) {
display: none;
}
&.quantity {
min-width: 5ch;
}
}
tbody tr + tr td {
border-top: 3px solid var(--color-light-grey);
}
/*
* tfoot
* --------------------------------------------------------------------------
*/
tfoot tr td {
text-align: end;
padding: 0.25rem 0.75rem;
font-size: var(--step--1);
&:first-child {
@media(width < 500px) {
display: none;
}
}
&.price:not(.total) {
display: none;
}
}
tfoot tr:first-of-type td,
tfoot tr:last-of-type td {
border-top: 3px solid var(--color-medium-grey);
}
tfoot tr:last-of-type td {
font-size: var(--step-1);
font-weight: var(--font-weight-semibold);
}
tfoot tr + tr td {
border-top: 3px solid var(--color-light-grey);
}
/*
* content in cells
* --------------------------------------------------------------------------
*/
ul {
margin: 0;
}
.image_container {
min-width: 100px;
}
}
.mod_iso_checkout .submit_container {
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
gap: var(--gutter-size);
max-width: 87.5ch;
margin-block-start: 4rem;
margin-inline: auto;
@media(width < 500px) {
flex-direction: column-reverse;
}
}
/* ----------------------------------------------------------------------------
* RSCE Notice Opening Hours
* ------------------------------------------------------------------------- */
.ce_rsce_notice_opening_hours {
background-color: oklch(from var(--color-primary) l c h / 0.7);
color: var(--color-white);
border-radius: 1rem;
padding: clamp(1.5rem, 0.5rem + 3.125vw, 2.5rem) clamp(2rem, 0rem + 6.25vw, 4rem);
margin-top: -9rem;
position: relative;
top: -4rem;
backdrop-filter: blur(7px);
.title {
font-weight: var(--font-weight-bold);
}
.text {
}
}
/* ----------------------------------------------------------------------------
* RSCE Notice Opening Hours
* ------------------------------------------------------------------------- */
.ce_rsce_event_countdown {
background-color: oklch(from var(--color-accent3) l c h / .9);
color: var(--color-white);
border-radius: 1rem;
padding: clamp(1.5rem, 0.5rem + 3.125vw, 2.5rem) clamp(2rem, 0rem + 6.25vw, 4rem);
backdrop-filter: blur(7px);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.title {
font-weight: var(--font-weight-bold);
font-size: var(--step-3);
order: 1;
flex-basis: 70%;
flex-grow: 1;
flex-shrink: 1;
}
.startdate {
font-size: var(--step-3);
order: 2;
flex-basis: fit-content;
flex-grow: 0;
flex-shrink: 0;
}
.teaser {
font-size: var(--step-0);
order: 3;
}
.details {
font-size: var(--step-0);
order: 4;
margin-top: 1rem;
}
a:is(:link, :visited) {
text-decoration-color: currentColor;
}
}
/*
* 300 = light
* 400 = regular
* 500 = medium
* 600 = semibold
* 700 = bold
*/
/* poppins-300 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Poppins';
font-style: normal;
font-weight: 300;
src: url('../../files/theme/fonts/poppins-v21-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-300italic - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Poppins';
font-style: italic;
font-weight: 300;
src: url('../../files/theme/fonts/poppins-v21-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-regular - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
src: url('../../files/theme/fonts/poppins-v21-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-italic - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Poppins';
font-style: italic;
font-weight: 400;
src: url('../../files/theme/fonts/poppins-v21-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-500 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Poppins';
font-style: normal;
font-weight: 500;
src: url('../../files/theme/fonts/poppins-v21-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-500italic - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Poppins';
font-style: italic;
font-weight: 500;
src: url('../../files/theme/fonts/poppins-v21-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-600 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Poppins';
font-style: normal;
font-weight: 600;
src: url('../../files/theme/fonts/poppins-v21-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-600italic - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Poppins';
font-style: italic;
font-weight: 600;
src: url('../../files/theme/fonts/poppins-v21-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-700 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Poppins';
font-style: normal;
font-weight: 700;
src: url('../../files/theme/fonts/poppins-v21-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-700italic - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Poppins';
font-style: italic;
font-weight: 700;
src: url('../../files/theme/fonts/poppins-v21-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}