form.move_labels .widget,.move_labels form .widget{position:relative;padding-top:var(--form_gap, 10px)}form.move_labels .widget:not(.widget-checkbox, .widget-radio) input,form.move_labels .widget:not(.widget-checkbox, .widget-radio) textarea,form.move_labels .widget:not(.widget-checkbox, .widget-radio) select,.move_labels form .widget:not(.widget-checkbox, .widget-radio) input,.move_labels form .widget:not(.widget-checkbox, .widget-radio) textarea,.move_labels form .widget:not(.widget-checkbox, .widget-radio) select{width:100%;padding:var(--form_input_padding, 6px);line-height:1.469}form.move_labels .widget-text label,form.move_labels .widget-textarea label,form.move_labels .widget-password label,.move_labels form .widget-text label,.move_labels form .widget-textarea label,.move_labels form .widget-password label{color:var(--font_color, #444);position:absolute;top:var(--form_gap, 10px);left:0;padding:var(--form_input_padding, 6px);transform-origin:left;border:1px solid transparent;line-height:1.469;transition-property:top, left, width, background, border-radius, padding, line-height, font-size;transition-duration:0.25s;transition-timing-function:ease-in-out}form.move_labels .widget-text label.select,form.move_labels .widget-textarea label.select,form.move_labels .widget-password label.select,.move_labels form .widget-text label.select,.move_labels form .widget-textarea label.select,.move_labels form .widget-password label.select{display:none}form.move_labels .widget-text.active label,form.move_labels .widget-textarea.active label,form.move_labels .widget-password.active label,.move_labels form .widget-text.active label,.move_labels form .widget-textarea.active label,.move_labels form .widget-password.active label{top:calc(var(--form_gap) - 13px);left:6px;font-size:13px;width:auto;background:#fff;border-radius:3px;padding:0 2px;line-height:1} @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;position:relative}.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_wrapper,.autogrid_row{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_wrapper.gutter_none,.autogrid_row.gutter_none{margin-left:0;margin-right:0}.autogrid_wrapper.gutter_none>div,.autogrid_row.gutter_none>div{padding-left:0;padding-right:0}.autogrid_wrapper.gutter_s,.autogrid_row.gutter_s{margin-left:-15px;margin-right:-15px}.autogrid_wrapper.gutter_s>div,.autogrid_row.gutter_s>div{padding-left:15px;padding-right:15px}.autogrid_wrapper.gutter_m,.autogrid_row.gutter_m{margin-left:-30px;margin-right:-30px}.autogrid_wrapper.gutter_m>div,.autogrid_row.gutter_m>div{padding-left:30px;padding-right:30px}.autogrid_wrapper.gutter_l,.autogrid_row.gutter_l{margin-left:-40px;margin-right:-40px}.autogrid_wrapper.gutter_l>div,.autogrid_row.gutter_l>div{padding-left:40px;padding-right:40px}.autogrid_row>.column>.attributes{position:relative}.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}.autogrid_row>.column.sticky .attributes{position:sticky;top:0}.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}}.autogrid_row>.column.sticky_column>.attributes{position:sticky;top:0;z-index:10;height:auto !important}@media only screen and (max-width:767px){[class*="col_"],.one_half,.one_third,.one_fourth,.one_fifth,.one_sixth,.two_third,.two_fourth,.three_fourth,.two_fifth,.three_fifth,.four_fifth,.two_sixth,.three_sixth .four_sixth,.five_sixth{flex:0 0 100%;max-width:none}.column[class*="col_"]:not([class*="_m"]),.autogrid_grid .column:not([class*="_m"]){padding-left:0 !important;padding-right:0 !important;margin-bottom:25px}.column[class*="offset_"],.autogrid[class*="offset_"],.autogrid_grid[class*="offset_"]{margin-left:0}.autogrid_wrapper,.autogrid_row,.autogrid_grid{margin-left:0 !important;margin-right:0 !important}.column:empty,.column .attributes:empty,.column:has(>.attributes:empty){display:none}.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:none !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-xl,.autogrid_grid>.column>.attributes.p-l,.autogrid_grid>.column>.attributes.p-m,.autogrid_grid>.column>.attributes.p-s,.autogrid_grid>.column>.attributes.p-xs,.autogrid_row>.column .attributes.p-xl,.autogrid_row>.column .attributes.p-l,.autogrid_row>.column .attributes.p-m,.autogrid_row>.column .attributes.p-s,.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} /*! modern-normalize v3.0.1 | MIT License | 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. */ tab-size: 4; /* 3. Use a more readable tab size (opinionated). */ } /* Sections ======== */ body { margin: 0; /* Remove the margin in all browsers. */ } /* Text-level semantics ==================== */ /** Add the correct font weight in Edge and Safari. */ b, strong { font-weight: bolder; } /** 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 ============ */ /** Correct table border color inheritance in Chrome and Safari. (https://issues.chromium.org/issues/40615503, https://bugs.webkit.org/show_bug.cgi?id=195016) */ table { border-color: currentcolor; } /* 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 */ } /** Correct the inability to style clickable types in iOS and Safari. */ button, [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; } /** 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 { /* * Global settings */ --global-width: 85rem; /* 85rem * 16px (base font size) = 1360px */ --body-font-family: Lato, Helvetica Neue, sans-serif; --header-font-family: Segoe UI, var(--body-font-family); /* * letter spacing */ --tracking-down-1: -0.025ch; --tracking-down-2: -0.075ch; /* * horizontal gutter * value is predefined by PCT_AUTOGRID so don't change this * 0.9375 * 16px = 15px */ --gutter-size: .9375rem; /* * Color palette */ --color-primary: oklch(0.3958 0.1229 253.64); /* #024686 */ --color-secondary: var(--color-primary); /* #xxxxx */ --color-accent1: oklch(0.618 0.2334 23.11); /* #f2243b */ --color-accent2: var(--color-primary); /* #xxxxx */ --color-accent3: var(--color-primary); /* #xxxxx */ --color-white: oklch(1.00 0 0); --color-light-grey: oklch(0.9249 0 0); /* #e6e6e6 */ --color-medium-grey: oklch(0.66 0 0); --color-dark-grey: oklch(0.44 0 0); --color-deep-dark-grey: oklch(0.3715 0 0); /* #404040 */ --color-black: oklch(0.1684 0 0); /* #0f0f0f */ } /* * Type scale * -------------------------------------------- * don't forget to recalculate sizes when changing the --global-width */ /* @link https://utopia.fyi/type/calculator?c=360,16,1.067,1360,18,1.125,10,3,&s=0.75|0.5|0.25,1.5|2|2.5|3|4|5|6|8,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 { /* Step -3: 13.1712px → 12.642px */ --step--3: clamp(0.7901rem, 0.8351rem + -0.0529vw, 0.8232rem); /* Step -2: 14.0537px → 14.2222px */ --step--2: clamp(0.8784rem, 0.8746rem + 0.0169vw, 0.8889rem); /* Step -1: 14.9953px → 16px */ --step--1: clamp(0.9372rem, 0.9146rem + 0.1005vw, 1rem); /* Step 0: 16px → 18px */ --step-0: clamp(1rem, 0.955rem + 0.2vw, 1.125rem); /* Step 1: 17.072px → 20.25px */ --step-1: clamp(1.067rem, 0.9955rem + 0.3178vw, 1.2656rem); /* Step 2: 18.2158px → 22.7813px */ --step-2: clamp(1.1385rem, 1.0358rem + 0.4565vw, 1.4238rem); /* Step 3: 19.4363px → 25.6289px */ --step-3: clamp(1.2148rem, 1.0754rem + 0.6193vw, 1.6018rem); /* Step 4: 20.7385px → 28.8325px */ --step-4: clamp(1.2962rem, 1.114rem + 0.8094vw, 1.802rem); /* Step 5: 22.128px → 32.4366px */ --step-5: clamp(1.383rem, 1.1511rem + 1.0309vw, 2.0273rem); /* Step 6: 23.6106px → 36.4912px */ --step-6: clamp(1.4757rem, 1.1858rem + 1.2881vw, 2.2807rem); /* Step 7: 25.1925px → 41.0526px */ --step-7: clamp(1.5745rem, 1.2177rem + 1.586vw, 2.5658rem); /* Step 8: 26.8804px → 46.1841px */ --step-8: clamp(1.68rem, 1.2457rem + 1.9304vw, 2.8865rem); /* Step 9: 28.6814px → 51.9571px */ --step-9: clamp(1.7926rem, 1.2689rem + 2.3276vw, 3.2473rem); /* Step 10: 30.603px → 58.4518px */ --step-10: clamp(1.9127rem, 1.2861rem + 2.7849vw, 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,1360,18,1.125,10,3,&s=0.75|0.5|0.25,1.5|2|2.5|3|4|5|6|8,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.2275rem + 0.1vw, 0.3125rem); /* Space 2xs: 8px → 9px */ --space-2xs: clamp(0.5rem, 0.4775rem + 0.1vw, 0.5625rem); /* Space xs: 12px → 14px */ --space-xs: clamp(0.75rem, 0.705rem + 0.2vw, 0.875rem); /* Space s: 16px → 18px */ --space-s: clamp(1rem, 0.955rem + 0.2vw, 1.125rem); /* Space m: 24px → 27px */ --space-m: clamp(1.5rem, 1.4325rem + 0.3vw, 1.6875rem); /* Space l: 32px → 36px */ --space-l: clamp(2rem, 1.91rem + 0.4vw, 2.25rem); /* Space xl: 40px → 45px */ --space-xl: clamp(2.5rem, 2.3875rem + 0.5vw, 2.8125rem); /* Space 2xl: 48px → 54px */ --space-2xl: clamp(3rem, 2.865rem + 0.6vw, 3.375rem); /* Space 3xl: 64px → 72px */ --space-3xl: clamp(4rem, 3.82rem + 0.8vw, 4.5rem); /* Space 4xl: 80px → 90px */ --space-4xl: clamp(5rem, 4.775rem + 1vw, 5.625rem); /* Space 5xl: 96px → 108px */ --space-5xl: clamp(6rem, 5.73rem + 1.2vw, 6.75rem); /* Space 6xl: 128px → 144px */ --space-6xl: clamp(8rem, 7.64rem + 1.6vw, 9rem); /* One-up pairs */ /* Space 3xs-2xs: 4px → 9px */ --space-3xs-2xs: clamp(0.25rem, 0.1375rem + 0.5vw, 0.5625rem); /* Space 2xs-xs: 8px → 14px */ --space-2xs-xs: clamp(0.5rem, 0.365rem + 0.6vw, 0.875rem); /* Space xs-s: 12px → 18px */ --space-xs-s: clamp(0.75rem, 0.615rem + 0.6vw, 1.125rem); /* Space s-m: 16px → 27px */ --space-s-m: clamp(1rem, 0.7525rem + 1.1vw, 1.6875rem); /* Space m-l: 24px → 36px */ --space-m-l: clamp(1.5rem, 1.23rem + 1.2vw, 2.25rem); /* Space l-xl: 32px → 45px */ --space-l-xl: clamp(2rem, 1.7075rem + 1.3vw, 2.8125rem); /* Space xl-2xl: 40px → 54px */ --space-xl-2xl: clamp(2.5rem, 2.185rem + 1.4vw, 3.375rem); /* Space 2xl-3xl: 48px → 72px */ --space-2xl-3xl: clamp(3rem, 2.46rem + 2.4vw, 4.5rem); /* Space 3xl-4xl: 64px → 90px */ --space-3xl-4xl: clamp(4rem, 3.415rem + 2.6vw, 5.625rem); /* Space 4xl-5xl: 80px → 108px */ --space-4xl-5xl: clamp(5rem, 4.37rem + 2.8vw, 6.75rem); /* Space 5xl-6xl: 96px → 144px */ --space-5xl-6xl: clamp(6rem, 4.92rem + 4.8vw, 9rem); /* Custom pairs */ /* Space 3xs-xs: 4px → 14px */ --space-3xs-xs: clamp(0.25rem, 0.025rem + 1vw, 0.875rem); /* Space 2xs-s: 8px → 18px */ --space-2xs-s: clamp(0.5rem, 0.275rem + 1vw, 1.125rem); /* Space xs-m: 12px → 27px */ --space-xs-m: clamp(0.75rem, 0.4125rem + 1.5vw, 1.6875rem); /* Space s-l: 16px → 36px */ --space-s-l: clamp(1rem, 0.55rem + 2vw, 2.25rem); /* Space m-xl: 24px → 45px */ --space-m-xl: clamp(1.5rem, 1.0275rem + 2.1vw, 2.8125rem); /* Space l-2xl: 32px → 54px */ --space-l-2xl: clamp(2rem, 1.505rem + 2.2vw, 3.375rem); /* Space xl-3xl: 40px → 72px */ --space-xl-3xl: clamp(2.5rem, 1.78rem + 3.2vw, 4.5rem); /* Space 2xl-4xl: 48px → 90px */ --space-2xl-4xl: clamp(3rem, 2.055rem + 4.2vw, 5.625rem); /* Space 3xl-5xl: 64px → 108px */ --space-3xl-5xl: clamp(4rem, 3.01rem + 4.4vw, 6.75rem); /* Space 4xl-6xl: 80px → 144px */ --space-4xl-6xl: clamp(5rem, 3.56rem + 6.4vw, 9rem); } /* ---------------------------------------------------------------------------- * 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) > * + * { margin-block-start: var(--flow-space, 1em); } /* ---------------------------------------------------------------------------- * Document settings * ------------------------------------------------------------------------- */ html { font-size: 100%; /* Prevent font size inflation */ -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; /* Add stable scrollbar gutter to prevent layout shift */ scrollbar-gutter: stable; /* Set accent color for form elements */ accent-color: var(--color-primary); } body { background: var(--color-white); color: var(--color-deep-dark-grey); font-family: var(--body-font-family); font-size: var(--step-0); line-height: 1.5; -webkit-hyphens: auto; hyphens: auto; } /* ---------------------------------------------------------------------------- * 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, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-family: var(--header-font-family); text-wrap: balance; /* * headlines shall keep a small top margin */ --flow-space: .75em; } h1, .h1 { font-size: var(--step-8); font-weight: 500; line-height: 1; letter-spacing: var(--tracking-down-1); &:not(.text-center) { max-width: 30ch; } } h2, .h2 { font-size: var(--step-6); font-weight: 500; line-height: 1; letter-spacing: var(--tracking-down-1); &:not(.text-center) { max-width: 45ch; } } h3, .h3 { font-size: var(--step-2); font-weight: 500; line-height: 1.1; &:not(.text-center) { max-width: 55ch; } } h4, .h4 { font-size: var(--step-1); font-weight: 500; line-height: 1.1; &:not(.text-center) { max-width: 55ch; } } h5, .h5 { font-size: var(--step-0); font-weight: 500; line-height: 1.2; text-transform: uppercase; &:not(.text-center) { max-width: 75ch; } } h6, .h6 { font-size: var(--step--1); font-weight: 700; line-height: 1.2; text-transform: uppercase; &:not(.text-center) { max-width: 75ch; } } /* * headline's subsequent elements shall keep a small top margin */ :is(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) + * { --flow-space: .5em; } /* ---------------------------------------------------------------------------- * Text: Links * ------------------------------------------------------------------------- */ a { &:where(:link, :visited) { color: var(--color-primary); text-decoration: none; } } :where(.content-headline, .content-text) a, .content-hyperlink:not([class*="btn"]) a { --bg-h: 100%; &:where(:link, :visited) { background: linear-gradient(0deg, var(--color-primary), var(--color-primary)) no-repeat right bottom / 0 var(--bg-h); transition: background-size 350ms, color 350ms; } &:where(:hover, :active, :focus) { color: var(--color-white); background-size: 100% var(--bg-h); background-position-x: left; } } .content-headline:not([class*="btn"]) a { --bg-h: 85%; } /* ---------------------------------------------------------------------------- * Text: Misc * ------------------------------------------------------------------------- */ ul, ol { padding-inline-start: 1em; /* left-align the list with the text */ list-style: none; } /* Remove list styles on ul, ol elements that are not in a .content-text, because these are often used for styling and not for lists */ .content-text ul { list-style: circle; } .content-text ol { list-style: decimal; } 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: Inputs, Textareas, Fieldsets * ------------------------------------------------------------------------- */ label { line-height: 1.1; } input { accent-color: var(--color-primary); scroll-margin-top: var(--space-l); } input:not([type=checkbox]):not([type=radio]):not([type=range]), fieldset, textarea { /* background: var(--color-white); */ border: 2px solid var(--color-light-grey); border-radius: .375rem; font-family: var(--body-font-family); padding: var(--gutter-size); text-indent: 0; line-height: 1.1; width: 100%; caret-color: hsl(from var(--color-primary) h s l / .5); caret-shape: block; } :is(.bgcolor-light-grey) { input:not([type=checkbox]):not([type=radio]):not([type=range]), fieldset, textarea { border-color: var(--color-white); } } /* Make sure textareas without a rows attribute are not tiny */ textarea:not([rows]) { min-height: 10em; } fieldset { margin: 0; &.no-decoration { border: 0 none; padding: 0; } } /* ---------------------------------------------------------------------------- * Forms: Contao Form Elements * ------------------------------------------------------------------------- */ .formbody { /* * remove margin on columns, to add them later in form elements */ .autogrid_grid .column, .column[class*="col_"] { margin-bottom: 0; } :is(.autogrid_wrapper, .autogrid_row).gutter_l > div { @media (max-width: 768px) { padding-inline: 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; } .widget-radio { fieldset { display: flex; flex-wrap: wrap; flex-direction: column; gap: var(--gutter-size); border: none; padding: 0; } legend { display: flex; width: 100%; font-weight: 500; margin-bottom: var(--space-xs); } span { display: flex; align-items: center; gap: 0.5em; } input[type="radio"] { width: 1.25em; height: 1.25em; margin: 0; cursor: pointer; } label { cursor: pointer; } } /* fieldset { min-width: 9rem; width: max-content; padding: calc(.625 * var(--gutter-size)); } span { display: flex; align-items: baseline; gap: var(--gutter-size); } fieldset span label { min-width: 6rem; text-wrap: balance; background-color: transparent; } */ .widget-checkbox:not(.widget-icon-checkbox) { fieldset { display: flex; flex-wrap: wrap; flex-direction: column; gap: var(--gutter-size); border: none; padding: 0; } legend { display: flex; width: 100%; font-weight: 500; margin-bottom: var(--space-xs); font-size: var(--step-0); } span { display: flex; align-items: center; gap: 0.5em; } input[type="checkbox"] { width: 1.25em; height: 1.25em; margin: 0; cursor: pointer; } label { cursor: pointer; } } .widget-explanation { flex-direction: column; p { margin: 0; font-size: var(--step-0); line-height: 1.5; } } fieldset { legend { font-size: var(--step-1); font-weight: 500; margin-bottom: var(--space-s); } } span.mandatory { color: var(--color-accent1); } p.error { display: block; /* flex-basis: 100%; */ width: 100%; grid-column: 1 / -1; color: var(--color-accent1); line-height: 1.25; } .widget-checkbox.error > .error > legend { margin-bottom: 0; & + p.error { margin-top: .25em; } } .invisible { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } label + * { --flow-space: .25em; } fieldset { margin-block-end: var(--space-s); &.without-border { border: 0 none; padding: 0; } &.without-legend legend { display: none; } } } /* ---------------------------------------------------------------------------- * Forms: Icon Checkbox widget * plenta/contao-icon-checkbox-bundle * ------------------------------------------------------------------------- */ .widget-icon-checkbox { fieldset { /* display: flex; */ /* flex-wrap: wrap; */ display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: var(--gutter-size); border: none; padding: 0; width: stretch; } legend { width: 100%; font-weight: 500; margin-bottom: var(--space-xs); } input[type="checkbox"], input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; } label { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); padding: var(--space-m); border: 2px solid var(--color-medium-grey); border-radius: .625rem; cursor: pointer; transition: all 200ms ease; width: 100%; height: 100%; text-align: center; &:hover { border-color: var(--color-primary); background-color: oklch(from var(--color-light-grey) l c h / 0.5); } } input:checked + label { border-color: var(--color-primary); background-color: var(--color-light-grey); color: var(--color-primary); } input:focus-visible + label { outline: 2px solid var(--color-primary); outline-offset: 2px; } .icon-checkbox-icon { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 150px; img { width: 100%; height: auto; transition: all 200ms ease; } } input:checked + label .icon-checkbox-icon img { transform: scale(1.2); transition: all 200ms ease; } &:has(input:checked) input:not(:checked) + label { border-color: hsl(from var(--color-medium-grey) h s l / .5); .icon-checkbox-icon img { opacity: 0.75; } .icon-checkbox-label { color: var(--color-medium-grey); } } .icon-checkbox-label { font-weight: 500; line-height: 1.2; } } /* ---------------------------------------------------------------------------- * Forms: Moving Labels extension * heimseiten/contao-form-label-mover-bundle * ------------------------------------------------------------------------- */ form.move_labels.move_labels { .widget-text label { --form_gap: 1.2rem; background-color: white; line-height: 1.1; left: 0.2rem; } :where(.widget-text, .widget-textarea, .widget-password) { &.active label { padding: 2px 3px; } } } /* ---------------------------------------------------------------------------- * Forms: MP Forms * terminal42/contao-mp_forms * ------------------------------------------------------------------------- */ /* Breadcrumb Menu */ .formbody:has(.mod_mp_form_steps) { .mod_mp_form_steps { margin-block: var(--space-xl) var(--space-l); ul { display: flex; flex-wrap: wrap; row-gap: clamp(0rem, -0.2143rem + 0.9524vw, 0.5rem); list-style: none; margin: 0; padding: 0; font-size: clamp(0.625rem, 0.4643rem + 0.7143vw, 1rem); } li { position: relative; display: flex; align-items: center; &:not(:last-child)::after { content: "›"; margin-inline: .5rem; color: var(--color-medium-grey); font-size: 1.2em; } } a, strong { text-decoration: none; padding: .5rem clamp(0.25rem, 0.0357rem + 0.9524vw, 0.75rem);; border-radius: .375rem; transition: background-color .2s ease, color .2s ease; } .accessible a { color: var(--color-primary); &:is(:hover, :focus) { background-color: var(--color-light-grey); color: var(--color-black); } } .current strong { background-color: var(--color-primary); color: var(--color-white); font-weight: 600; } .inaccessible strong { color: var(--color-medium-grey); } } } form.form-quote-configurator { & > .formbody > div:last-child:has(button[type="submit"]) { margin-top: var(--space-l); display: flex; flex-direction: row-reverse; justify-content: center; gap: .25rem; } button[type="submit"] { border-color: var(--color-primary); transition: all .2s ease; margin-block-start: 0; &:is(:hover, :active, :focus) { border-color: var(--color-accent1); transition: all .2s ease; } &[value="back"] { border-color: color-mix(in srgb, var(--color-dark-grey) 0%, transparent); background: color-mix(in srgb, var(--color-dark-grey) 80%, transparent); /* transform: scale(0.9); */ &:is(:hover, :active, :focus) { border-color: var(--color-accent1); background: var(--color-accent1); /* transform: scale(1); */ } } } } /* ---------------------------------------------------------------------------- * Forms: Buttons * ------------------------------------------------------------------------- */ button, a.btn, .btn > a, :is([class*="btn"]) a { color: var(--color-white); background: var(--color-primary); border: 2px solid var(--color-white); border-radius: .75rem; font-family: var(--body-font-family); padding: var(--gutter-size); line-height: 1.1; display: inline-flex; transition: background-color .2s ease; &:is(:hover,:active,:focus) { /* border-color: var(--color-secondary); */ color: var(--color-white); background: var(--color-accent1); cursor: pointer; transition: background-color .2s ease; } } /* ---------------------------------------------------------------------------- * Button with icon "request offer" * ------------------------------------------------------------------------- */ .btn-request-offer a { --icon-dimension: 7.6em; --icon-placement: calc(var(--icon-dimension) - 1em); color: var(--color-white); background-color: var(--color-primary); border-color: var(--color-primary); padding: 1rem 2rem; border-radius: .625rem; border-width: .2rem; text-decoration: none; display: inline-flex; position: relative; left: var(--icon-placement); margin-block-start: 2.4rem; &:is(:hover, :active, :focus) { color: var(--color-white); background-color: var(--color-accent1); border-color: var(--color-primary); } &::before { content: ""; /* position: relative; top: .1em; */ width: var(--icon-dimension); aspect-ratio: 1; border-radius: 100%; background-image: url("../../files/theme/images/request-offer.png"); background-size: 77px; background-position: 67% center; background-repeat: no-repeat; background-color: var(--color-primary); position: absolute; left: calc(var(--icon-placement) * -1); top: calc(50% - .5 * var(--icon-dimension)); } } /* ---------------------------------------------------------------------------- * 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-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-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); }} /* * 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-0-m { && { margin-top: 0; } } .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-0-m { && { margin-bottom: 0; } } .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'; #wrapper { /* * Grid layout for page structure * Header: auto height * Main content: flexible height (1fr) * Footer: auto height */ min-block-size: 100svh; display: grid; grid-template-rows: auto 1fr auto; } /* ---------------------------------------------------------------------------- * SITE HEADER * ------------------------------------------------------------------------- */ #header { position: sticky; top: 0; will-change: top; transition: top 500ms ease-in-out; z-index: 1000; background-color: var(--color-white); color: var(--color-secondary); &.scroll-up, &:focus-within { top: 0; } &.scroll-down { top: -100%; } .inside { max-width: var(--global-width); margin-inline: auto; padding-block: 2rem; padding-inline: var(--gutter-size); backdrop-filter: blur(3px); display: grid; grid-template-columns: auto auto min-content; grid-template-rows: auto auto; column-gap: 1rem; } &.scroll-up:not(.scroll-is-top) { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); .inside { padding-block: 1rem; } } } /* ---------------------------------------------------------------------------- * Website Logo * ------------------------------------------------------------------------- */ .website-logo { grid-column: 1; grid-row: 1 / span 2; place-self: center left; @media (width < 1024px) { max-width: 7rem; } figure a { display: block; background-color: transparent; } img { max-height: 999px; transition: max-height 500ms ease-in-out; width: min-content; } } .scroll-up:not(.scroll-is-top) .website-logo { img { max-height: 48px; transition: max-height 5ms ease-in-out; } } /* ---------------------------------------------------------------------------- * Top Row * ------------------------------------------------------------------------- */ .top-row { --top-row-radius: .625rem; grid-column: 2 / span 2; grid-row: 1; display: flex; justify-content: flex-end; align-items: flex-start; gap: .5rem; flex-wrap: wrap; position: relative; top: -2rem; @media (width < 1024px) { grid-column: 2; grid-row: 1 / span 2; top: 0; place-self: center right; } } .scroll-up:not(.scroll-is-top) .top-row { @media (width >= 1024px) { display: none; } } .top-row .panel-phone { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; line-height: 1; height: 3rem; position: relative; overflow: hidden; isolation: isolate; &:is(:link, :visited) { text-decoration: none; } &::before { content: ""; position: absolute; inset: 0; background: rgb(255 255 255 / 75%); opacity: 0; transition: opacity 150ms ease; pointer-events: none; z-index: 1; } &::after { content: ""; position: absolute; top: 50%; left: 50%; width: 1.75rem; height: 1.75rem; translate: -50% -50%; opacity: 0; transition: opacity 150ms ease; pointer-events: none; z-index: 2; background-color: var(--color-primary); -webkit-mask-image: url("/files/theme/images/phone.svg"); mask-image: url("/files/theme/images/phone.svg"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } &:is(:hover, :focus-visible)::before, &:is(:hover, :focus-visible)::after { opacity: 1; } span { position: relative; z-index: 0; transition: opacity 150ms ease; } span:nth-child(1) { grid-column: 1; grid-row: 1 / 3; font-size: var(--step-7); align-self: center; font-weight: 400; @media (width < 480px) { font-size: var(--step-4); } } span:nth-child(2) { grid-column: 2; grid-row: 1; align-self: end; font-size: var(--step--1); user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; @media (width < 480px) { font-size: var(--step--3); } } span:nth-child(3) { grid-column: 2; grid-row: 2; align-self: start; text-align: center; font-size: var(--step-0); @media (width < 480px) { font-size: var(--step--2); } } } a.button-quote-config { background-color: var(--color-primary); display: flex; align-items: center; height: 3rem; padding-inline: 1.5rem; border-radius: 0 0 var(--top-row-radius) var(--top-row-radius); text-transform: uppercase; position: relative; top: 0; will-change: top; transition: top .2s ease; &::before { content: ''; position: absolute; top: -1rem; left: 0; right: 0; background-color: var(--color-primary); height: 1rem; } &:is(:link, :visited) { color: var(--color-white); } &:is(:hover,:active,:focus) { top: .5rem; transition: top .2s ease; } &:focus-visible { outline: 2px solid var(--color-white); outline-offset: 2px; } } .top-row .button-quote-config { @media (width < 1024px) { display: none; } } a.button-phone { background-color: var(--color-accent1); display: flex; align-items: center; height: 3rem; padding-inline: 1rem; border-radius: 0 0 var(--top-row-radius) var(--top-row-radius); position: relative; top: 0; will-change: top; transition: top .2s ease; &::before { content: ''; position: absolute; top: -1rem; left: 0; right: 0; background-color: var(--color-accent1); height: 1rem; } i { display: inline-block; width: 1.5rem; aspect-ratio: 1; background-image: url('../../files/theme/images/phone.svg'); background-repeat: no-repeat; background-position: center; background-size: contain; } span { display: none; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } &:is(:hover,:active,:focus) { top: .5rem; transition: top .2s ease; } &:focus-visible { outline: 2px solid var(--color-white); outline-offset: 2px; } } .top-row a.button-phone { @media (width < 1024px) { display: none; } } .mm-menu { a.button-quote-config, a.button-phone { &::before { content: unset; } &:is(:hover,:active,:focus) { top: 0; } } } /* ---------------------------------------------------------------------------- * Main Navigation * ------------------------------------------------------------------------- */ .main-nav { display: none; grid-column: 2 / span 2; grid-row: 2; justify-content: flex-end; align-items: center; isolation: isolate; @supports (anchor-name: --test) { anchor-name: --hovered-link; } &::before, &::after { content: ""; position: absolute; border-radius: .625rem; opacity: 0; transition: opacity 300ms ease; @supports (anchor-name: --test) { top: anchor(top); left: anchor(left); right: anchor(right); bottom: anchor(bottom); position-anchor: --hovered-link; will-change: opacity, top, left, right, bottom; transition: opacity 175ms ease, top 175ms ease-out, left 175ms ease-out, right 175ms ease-out, bottom 175ms ease-out; } } &::before { z-index: -1; } &::after { z-index: -2; } &:has(a:hover, strong:hover)::before, &:has(a:hover, strong:hover)::after { opacity: 1; @supports (corner-shape: squircle) { corner-shape: squircle; border-radius: .625rem; background: var(--color-light-grey); } } &:has(li:first-of-type a:hover, li:first-of-type strong:hover)::before, &:has(li:first-of-type a:hover, li:first-of-type strong:hover)::after { @supports (corner-shape: squircle) { border-radius: .625rem; } } &:has(li:last-of-type a:hover, li:last-of-type strong:hover)::before, &:has(li:last-of-type a:hover, li:last-of-type strong:hover)::after { @supports (corner-shape: squircle) { border-radius: .625rem; } } @supports (corner-shape: squircle) { border-radius: 24px; corner-shape: squircle; } @media (width >= 1024px) { display: flex; } ul.level_1 { display: flex; width: 100%; margin: 0; padding: 0; justify-content: flex-end; & > li { line-height: 1; position: relative; &:hover { anchor-name: --hovered-link; } } a:is(:link, :visited), strong { display: block; padding: 1rem .75rem; color: var(--color-deep-dark-grey); text-decoration: none; text-transform: uppercase; font-weight: 400; font-size: clamp(0.9375rem, 0.6943rem + 0.5068vw, 1.125rem); } a:is(:hover, :active, :focus), strong:focus { color: var(--color-primary); /* background-size: 0 .3ex, 100% .3ex; */ } a:focus-visible, strong:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } strong.active, a.submenu.trail { border-radius: .625rem; background: color-mix(in srgb, var(--color-light-grey) 50%, transparent); color: var(--color-primary); @supports (corner-shape: squircle) { corner-shape: squircle; } } } ul.level_2 { display: none; position: absolute; top: calc(100% + 0.5rem); left: 0; margin: 0; padding: 0; min-width: 200px; background-color: var(--color-white); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); z-index: 100; &::before { content: ''; position: absolute; top: -0.5rem; left: 0; right: 0; height: 0.5rem; background: transparent; } li:hover > & { display: block; } li { line-height: 1; } a:is(:link, :visited), strong { display: block; padding: 0.75rem 1rem; color: var(--color-deep-dark-grey); background-color: var(--color-white); text-decoration: none; text-transform: none; font-weight: 400; font-size: 1rem; transition: background-color 200ms ease, color 200ms ease; } a:is(:hover, :active, :focus) { color: var(--color-white); background-color: var(--color-primary); } strong.active { border-radius: 0; } } ul.level_1 > li:hover > ul.level_2, ul.level_1 > li:focus-within > ul.level_2 { display: block; } } .scroll-up:not(.scroll-is-top) .main-nav { grid-row: 1 / 3; } /* ---------------------------------------------------------------------------- * Mobile Navigation * ------------------------------------------------------------------------- */ .mm-menu { --mm-color-text-dimmed: #000; } .mm-page { background: var(--color-white); } .mm-wrapper_blocking { overflow: initial; } .mm-toggler__container.mm-toggler__container { grid-column: 3; grid-row: 1 / span 2; place-self: center right; display: flex; align-items: center; justify-self: end; flex-direction: column; font-size: var(--step--3); font-weight: 700; gap: .3rem; text-decoration: none; color: var(--color-black); padding: 0 .25rem; position: relative; top: .1rem; @media (1024px <= width) { display: none; } .hamburger-label { line-height: 1; } } /* ---------------------------------------------------------------------------- * Hamburgers * @description Tasty CSS-animated hamburgers * @author Jonathan Suh @jonsuh * @site https://jonsuh.com/hamburgers * @link https://github.com/jonsuh/hamburgers * ------------------------------------------------------------------------- */ .hamburger { padding: 15px 15px; display: inline-block; cursor: pointer; transition-property: opacity, filter; transition-duration: 0.15s; transition-timing-function: linear; font: inherit; color: inherit; text-transform: none; background-color: transparent; border: 0; margin: 0; overflow: visible; } .hamburger:hover { opacity: 0.7; } .hamburger.is-active:hover { opacity: 0.7; } .hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::before, .hamburger.is-active .hamburger-inner::after { background-color: #000; } .hamburger-box { width: 40px; height: 24px; display: inline-block; position: relative; } .hamburger-inner { display: block; top: 50%; margin-top: -2px; } .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { width: 40px; height: 4px; background-color: #000; border-radius: 4px; position: absolute; transition-property: transform; transition-duration: 0.15s; transition-timing-function: ease; } .hamburger-inner::before, .hamburger-inner::after { content: ""; display: block; } .hamburger-inner::before { top: -10px; } .hamburger-inner::after { bottom: -10px; } .hamburger--spring .hamburger-inner { top: 2px; transition: background-color 0s 0.13s linear; } .hamburger--spring .hamburger-inner::before { top: 10px; transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spring .hamburger-inner::after { top: 20px; transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spring.is-active .hamburger-inner { transition-delay: 0.22s; background-color: transparent !important; } .hamburger--spring.is-active .hamburger-inner::before { top: 0; transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, 10px, 0) rotate(45deg); } .hamburger--spring.is-active .hamburger-inner::after { top: 0; transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, 10px, 0) rotate(-45deg); } /* ---------------------------------------------------------------------------- * MAIN CONTENT * ------------------------------------------------------------------------- */ #container { overflow: hidden; background-color: var(--color-white); color: var(--color-deep-dark-grey); } #main .inside { -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } /* ---------------------------------------------------------------------------- * 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; } } #main .inside .mod_article:last-child:not(:has(> .node_wrapper)) { margin-block-end: var(--space-xl); } #main .inside .mod_article:has(> .node_wrapper) { margin-block-start: var(--space-6xl); } /* ---------------------------------------------------------------------------- * SITE FOOTER * ------------------------------------------------------------------------- */ #footer { color: var(--color-white); background: var(--color-accent2); a { &:where(:link, :visited) { color: #fff; } &:where(:hover, :active, :focus) { color: var(--color-accent1); } } :where(.mod_navigation, .mod_customnav) { ul { display: flex; flex-direction: column; gap: var(--space-xs); padding-inline-start: 0; } li { border-bottom: 1px solid var(--color-white); padding-bottom: var(--space-xs); display: flex; align-items: baseline; gap: .5rem; &::before { content: ">"; color: var(--color-white); } } } .width--default { /* --size-max: calc(var(--global-width) - (var(--gutter-size) * 2)); --size-min: calc(100% - (var(--gutter-size) * 2)); width: min(var(--size-min), var(--size-max)); */ width: min(100%, var(--global-width)); padding-inline: var(--gutter-size); margin-inline: auto; } .width--full { width: 100%; padding-inline: var(--gutter-size); } .sitemap { container: sitemap / inline-size; .inside { display: grid; gap: calc(3 * var(--gutter-size)); margin-block: var(--space-4xl); @container sitemap (width > calc(29ch * 2)) { grid-template-columns: repeat(2, 1fr); gap: calc(5 * var(--gutter-size)); } @container sitemap (width > calc(29ch * 3)) { grid-template-columns: repeat(3, 1fr); gap: calc(3 * var(--gutter-size)); } @container sitemap (width > calc(29ch * 4)) { grid-template-columns: repeat(4, 1fr); gap: calc(3 * var(--gutter-size)); } } } .content { background-color: #252525; container: footer-content / inline-size; .inside { display: grid; gap: calc(4 * var(--gutter-size)) var(--gutter-size); margin-block: var(--space-4xl); .col1 { grid-column: 1 / span 2; display: flex; flex-direction: column; gap: 3rem; .content-image { margin-block-start: var(--space-m); } } @container footer-content (width > calc(30ch * 2)) { grid-template-columns: repeat(2, 1fr); .col1 { flex-direction: row; } .col3 { grid-column: 2; } } @container footer-content (width > calc(28ch * 3)) { grid-template-columns: repeat(3, 1fr); .col1 { flex-direction: row; grid-column: 1 / span 3; } .col3 { grid-column: 2; } } @container footer-content (width > calc(25ch * 4)) { grid-template-columns: repeat(4, 1fr); .col1 { flex-direction: row; grid-column: 1 / span 2; } .col3 { grid-column: 4; } } } } .binder { overflow: hidden; padding-bottom: var(--space-xs); background: var(--color-black); font-size: var(--step--2); .inside { display: flex; gap: var(--space-s); justify-content: space-between; @media (width < 468px) { flex-direction: column; } } } } @charset 'utf-8'; /* ---------------------------------------------------------------------------- * PCT_AUTOGRID Adjustments * ------------------------------------------------------------------------- */ .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); } } /* * 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; } } } /* ---------------------------------------------------------------------------- * CE TEXT * former name: ce_text * ------------------------------------------------------------------------- */ .content-text { & p { text-wrap: pretty; } & 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); } &:is(.mb-0, .mb-xxs, .mb-xs) p { margin-bottom: 0; } &:is(.mt-0, .mt-xxs, .mt-xs) p { margin-top: 0; } & li { list-style-type: circle; margin-inline-start: .25rem; } } /* ---------------------------------------------------------------------------- * IMAGE * ------------------------------------------------------------------------- */ figure { font-size: .8125rem; figcaption { color: #393939; margin-top: .5em; max-width: 100%; } a { background-color: black; display: inline-block; & > * { opacity: 0.85; transition: opacity .2s; } &:is(:hover, :focus, :active) > * { opacity: 1; } } } /* ---------------------------------------------------------------------------- * GALLERY * ------------------------------------------------------------------------- */ .content-gallery { &.content-gallery--cols-1 { --listitem-minwidth-base: 100%; } &.content-gallery--cols-2 { --listitem-minwidth-base: 50% --listitem-minwidth-base-tablet: 50%; --listitem-minwidth-base-smartphone: 50%; } &.content-gallery--cols-3 { --listitem-minwidth-base: 33%; --listitem-minwidth-base-tablet: 50%; --listitem-minwidth-base-smartphone: 50%; } &.content-gallery--cols-4 { --listitem-minwidth-base: 25%; --listitem-minwidth-base-tablet: 33%; --listitem-minwidth-base-smartphone: 50%; } &.content-gallery--cols-5 { --listitem-minwidth-base: 20%; --listitem-minwidth-base-tablet: 25%; --listitem-minwidth-base-smartphone: 50%; } &.content-gallery--cols-6 { --listitem-minwidth-base: calc(100% / 6); } --border-radius: .625rem; @media (width >= 1024px) { --listitem-minwidth: calc(var(--listitem-minwidth-base) - var(--gutter-size)); } @media (width < 1024px) { --listitem-minwidth: calc(var(--listitem-minwidth-base-tablet) - var(--gutter-size)); } @media (width < 768px) { --listitem-minwidth: calc(var(--listitem-minwidth-base-smartphone) - var(--gutter-size)); } ul { margin: 0; padding: 0; display: grid; grid-gap: var(--gutter-size); grid-template-columns: repeat(auto-fill, minmax(var(--listitem-minwidth, 10rem), 1fr)); container-type: inline-size; } figure { background-color: var(--color-light-grey); border-radius: var(--border-radius); height: 100%; img { border-radius: var(--border-radius) var(--border-radius) 0 0; } a { border-radius: var(--border-radius) var(--border-radius) 0 0; } figcaption { padding-inline: .5rem; padding-block: 0 .3rem; margin: 0; } } } /* ---------------------------------------------------------------------------- * MEDIAPLAYER * ------------------------------------------------------------------------- */ .content-youtube { .aspect { position: relative; width: 100%; height: auto; & > iframe { aspect-ratio: 16 / 9; } } img, iframe { position: absolute; inset: 0; width: 100% !important; height: 100% !important; border: 0 none; } } .aspect--16\:9 { aspect-ratio: 16 / 9; } .aspect--16\:10 { aspect-ratio: 16 / 10; } .aspect--21\:9 { aspect-ratio: 21 / 9; } .aspect--4\:3 { aspect-ratio: 4 / 3; } .aspect--3\:2 { 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; /* display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: center; */ & > * { 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%; } &.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; } } /* ---------------------------------------------------------------------------- * NEWS * ------------------------------------------------------------------------- */ /* News Cards (horizontal teaser boxes) * ------------------------------------------------------------------------- */ .mod_newslist.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-template-rows: 1fr; gap: var(--gutter-size); margin-bottom: 3rem; .layout_latest { display: grid; background-color: var(--color-light-grey); color: var(--color-dark-grey); border-radius: 10px; overflow: hidden; transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease; &:is(:hover, :focus-within) { background-color: color-mix(in srgb, var(--color-light-grey) 80%, white); box-shadow: 0 8px 24px rgba(0,0,0,.08); transform: translateY(-2px); } & > * + * { margin-block-start: var(--flow-space, 1em); } .image_container { overflow: hidden; margin-top: 0; picture { max-width: unset; display: flex; justify-content: center; align-items: center; overflow: hidden; } /* img { max-width: unset; flex-shrink: 0; min-width: 100%; min-height: 100%; } */ } h2 { font-family: var(--header-font-family); font-size: var(--step--1); font-weight: 700; line-height: 1.25; padding-inline: 1rem; display: flex; min-height: 3.5rem; align-items: center; } &:hover h2 a:is(:link, :visited) { color: color-mix(in srgb, var(--color-primary) 80%, black); } .ce_text { color: var(--color-deep-dark-grey); font-size: var(--step--1); font-weight: 400; line-height: 1.4; padding-inline: 1rem; min-height: 5rem; margin-bottom: 1rem; } &:hover .ce_text { /* color: var(--color-white); */ } .more { display: none; } .info { order: 5; font-size: var(--step--2); padding: 0 1rem 1rem; .newscard:hover & { color: var(--color-white); } } } } /* News List (vertical teaser boxes) * ------------------------------------------------------------------------- */ .mod_newslist.list { display: flex; flex-direction: column; row-gap: var(--gutter-size); .layout_latest { display: grid; grid-template-columns: repeat(3, 1fr); grid-column-gap: var(--gutter-size); grid-row-gap: 0; .info { grid-area: 2 / 2 / 3 / 4; margin: .25rem 0; font-size: var(--step--2); } h2 { grid-area: 1 / 2 / 2 / 4; margin: -.25rem 0 0; font-size: var(--step-3); line-height: 1; align-self: center; a { color: var(--color-secondary); text-decoration: none; &:hover { color: var(--color-primary); text-decoration: underline; text-decoration-color: var(--color-primary); text-decoration-thickness: 0.25ex; text-underline-offset: 0.1ex; } } } .ce_text { grid-area: 2 / 2 / 4 / 4; } .more { grid-area: 4 / 2 / 5 / 4; align-self: center; } .image_container { grid-area: 1 / 1 / 5 / 2; } @media (0 <= width < 680px) { .image_container { grid-area: 1 / 1 / 1 / 4; } h2 { grid-area: 2 / 1 / 2 / 4; margin-top: var(--space-reduced); } .info { grid-area: 3 / 1 / 3 / 4; } .ce_text { grid-area: 4 / 1 / 4 / 4; } .more { grid-area: 5 / 1 / 5 / 4; margin-bottom: var(--space-huge); } } } } /* News details * ------------------------------------------------------------------------- */ .mod_newsreader { .layout_full { display: grid; h1 { margin-top: 7rem; text-align: center; order: 1; max-width: 100%; } h1:first-of-type { margin-bottom: 2rem; } h2 { order: 2; text-align: center; font-size: var(--step-3); max-width: initial; } .info { text-align: center; order: 3; } /* * All user generated elements get the same (lower) order to sort them * below the header */ & > *:not(h1):not(h2):not(.info) { order: 4; } .content-text { p { max-width: 100%; } } } .back { text-align: center; margin-bottom: 7rem; } } /* ---------------------------------------------------------------------------- * PAGINATION * used for news, events, gallery, etc. * ------------------------------------------------------------------------- */ nav[data-pagination], .pagination { margin-block-start: var(--space-l); p { text-align: center; @media (0 <= width < 500px) { display: none; } } ol, ul { list-style-type: none; display: flex; justify-content: center; gap: var(--gutter-size); padding: 0; } a, strong { height: 3rem; display: flex; justify-content: center; align-items: center; background-color: var(--color-secondary); padding: 0 .5rem; color: var(--color-white); &:hover { background-color: var(--color-primary); } } a:is(:link, :visited) { text-decoration: none; } li:not(.previous, .next) a, li:not(.previous, .next) strong { width: 3rem; } } /* ---------------------------------------------------------------------------- * CONTENT SLIDER * New slider based on swiper.js * ------------------------------------------------------------------------- */ .content-swiper { --swiper-navigation-size: 2rem; --swiper-navigation-color: var(--color-accent2); --swiper-pagination-color: var(--color-accent2); background-color: var(--color-light-grey); .swiper-slide { padding: 2rem 5rem; } button { background: none; border: none; padding: 1.5rem; border-radius: 5px; } } /* ---------------------------------------------------------------------------- * CE HERO * nutshell-framework/hero-element * ------------------------------------------------------------------------- */ .ce_hero { width: fit-content; margin-inline: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; overflow: hidden; .inner { display: flex; justify-content: center; position: relative; } .hero__content { container-type: size; max-width: var(--global-width); position: absolute; width: 100%; height: 100%; color: var(--color-white); display: flex; align-items: flex-end; padding-inline: var(--gutter-size); line-height: 1; z-index: 10; pointer-events: none; } .hero__links, .hero__links a { pointer-events: auto; } a.btn--primary { &:is(:link, :visited) { color: var(--color-white); border: 3px solid var(--color-white); border-radius: .75rem; padding-inline: 1.5rem; padding-block: 1rem; text-decoration: none; display: flex; width: fit-content; margin-block-start: 1rem; } &:is(:hover, :active, :focus-within) { background-color: color-mix(in srgb, var(--color-white) 20%, transparent); color: var(--color-white); box-shadow: 0 0 7px rgba(255, 255, 255, 0.75); } } .hero__text { margin-block-end: 15cqh; position: relative; z-index: 11; } .hero__headline { font-size: var(--step-10); font-size: clamp(1.5rem, 0.8077rem + 3.4615vw, 3.75rem); letter-spacing: unset; font-weight: 700; } :is(.hero__text, .hero__headline) { color: inherit; text-shadow: 1px 1px 3px rgb(0 0 0 / 50%); } .hero__description p { font-size: var(--step-2); font-weight: var(--font-weight-bold); margin-block-start: 1.2rem; line-height: 1.1; } .hero__background--image { position: relative; overflow: hidden; isolation: isolate; z-index: 1; } .hero__background--image picture, .hero__background--image img { display: block; width: 100%; height: 100%; } .hero__background--image img { object-fit: cover; } /* .hero__background--image.hero__bg-layer { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; transition: opacity 150ms ease; z-index: 1; } .hero__background--image.hero__bg-layer.hero__bg-layer--base { position: relative; inset: auto; width: auto; height: auto; } .hero__background--image.hero__bg-layer.is-visible { opacity: 1; z-index: 2; } .hero__background--image.hero__bg-layer.is-fading-out { opacity: 0; z-index: 3; } .hero__background--image.hero__bg-layer.is-animating img { animation: heroTruckDrive 20s linear 1 forwards; animation-delay: var(--hero-drive-offset, 0ms); } @media (prefers-reduced-motion: reduce) { .hero__background--image.hero__bg-layer, .hero__background--image.hero__bg-layer img { animation: none !important; transition: none; transform: none !important; filter: none !important; opacity: 1; } } } @keyframes heroTruckDrive { from { transform: scale(1.02) translate3d(0%, 0%, 0); filter: blur(0.35px); } to { transform: scale(1.07) translate3d(-1.6%, 0.2%, 0); filter: blur(0px); } */ } /* ---------------------------------------------------------------------------- * Homepage Abschnitt Angebots-Konfigurator * ------------------------------------------------------------------------- */ .section-quote-configurator { --section-quote-configurator-height: 72%; container: quote-configurator / inline-size; position: relative; /* Grey background bar positioned at the bottom */ &::before { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: var(--section-quote-configurator-height); /* Grey bar covers bottom 60% */ background-color: var(--color-light-grey); z-index: 0; } .column:has(img) { justify-self: center; } .column:not(:has(img)) .attributes.attributes { height: 100%; display: flex; align-content: flex-end; justify-content: center; .same-height-wrap { display: flex; flex-direction: column; justify-content: center; max-width: 55ch; @media (width >= 768px) { height: var(--section-quote-configurator-height); } } } @media (width < 900px) { --section-quote-configurator-height: 85%; } @media (width < 768px) { --section-quote-configurator-height: 60%; } } /* ---------------------------------------------------------------------------- * Card UI element * ------------------------------------------------------------------------- */ .card { container: card / inline-size; border-radius: .625rem; padding-block: 2.5rem; padding-inline: 2.5rem; display: flex; flex-direction: column; justify-content: space-between; width: 100%; &.card--primary { background-color: var(--color-primary); color: var(--color-white); } &.card--light-grey { background-color: var(--color-light-grey); } &.card--pic-before { --pic-dimension: 17.5rem; --pic-before-offset: calc(var(--pic-dimension) / 2); margin-top: var(--pic-before-offset); @media (width < 768px) { max-width: 55ch; margin-inline: auto; } .content-image { --correction-offset: 3rem; margin-top: calc(var(--pic-before-offset) * -1 - var(--correction-offset)); display: grid; place-content: center; margin-bottom: -1rem; @media (width < 1240px) { --correction-offset: .5rem; } } } ul { list-style: none; padding-left: 0; li { display: flex; align-items: baseline; gap: .5em; &::before { content: ""; position: relative; top: .1em; width: 1em; aspect-ratio: 1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; } } } } .same-height-wrap:has(> .card.card--pic-before) { display: flex; } .same-height-wrap:has(> .card:first-of-type:last-of-type) { display: flex; } /* ---------------------------------------------------------------------------- * RSCE: mobile.de IFRAME * ------------------------------------------------------------------------- */ .mobile-de-iframe-wrapper { position: relative; width: 100%; max-width: var(--global-width); aspect-ratio: 800 / 1000; iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 1px solid var(--color-dark-grey); } } /* ---------------------------------------------------------------------------- * SKIP LINK (WCAG 2.1 AA) * ------------------------------------------------------------------------- */ .skip-link { position: absolute; top: -999px; left: -999px; z-index: 9999; padding: 1rem 1.5rem; background-color: var(--color-primary); color: var(--color-white); text-decoration: none; font-weight: 700; border-radius: 0 0 .5rem .5rem; &:focus { top: 0; left: 50%; transform: translateX(-50%); outline: 2px solid var(--color-accent1); outline-offset: 2px; } } /* ---------------------------------------------------------------------------- * Extension: Oveleon Cookiebar * oveleon/contao-cookiebar * ------------------------------------------------------------------------- */ .contao-cookiebar { .cc-group { align-items: center; } .cc-detail-btn { margin-inline-end: .2rem; background-color: var(--color-primary); color: var(--color-white); border-radius: .3rem; &:hover { background-color: var(--color-accent1); } } .cc-btn { &:is(:hover,:active,:focus) { color: var(--color-deep-dark-grey); } &.success { &:is(:hover,:active,:focus) { color: var(--color-white); } } } } /* ---------------------------------------------------------------------------- * Accordeon (Handorgel) * ------------------------------------------------------------------------- */ .content-accordion { max-width: 80ch; .handorgel__header.handorgel__header { max-width: 80ch; } .handorgel__header__button { &[aria-expanded="true"], &:is(:hover, :active, :focus) { color: var(--color-white); background-color: var(--color-primary); } } .handorgel__content__inner { p:first-of-type { margin-top: 0; } } .handorgel__content--open + .handorgel__header .handorgel__header__button { border-top: 1px solid var(--color-black); } } /* Place your font declarations here */ /* lato-100 - latin */ /* @font-face { font-display: swap; font-family: 'Lato'; font-style: normal; font-weight: 100; src: url('../../files/theme/fonts/lato-v25-latin-100.woff2') format('woff2'); } */ /* lato-100italic - latin */ /* @font-face { font-display: swap; font-family: 'Lato'; font-style: italic; font-weight: 100; src: url('../../files/theme/fonts/lato-v25-latin-100italic.woff2') format('woff2'); } */ /* lato-300 - latin */ @font-face { font-display: swap; font-family: 'Lato'; font-style: normal; font-weight: 300; src: url('../../files/theme/fonts/lato-v25-latin-300.woff2') format('woff2'); } /* lato-300italic - latin */ @font-face { font-display: swap; font-family: 'Lato'; font-style: italic; font-weight: 300; src: url('../../files/theme/fonts/lato-v25-latin-300italic.woff2') format('woff2'); } /* lato-regular - latin */ @font-face { font-display: swap; font-family: 'Lato'; font-style: normal; font-weight: 400; src: url('../../files/theme/fonts/lato-v25-latin-regular.woff2') format('woff2'); } /* lato-italic - latin */ @font-face { font-display: swap; font-family: 'Lato'; font-style: italic; font-weight: 400; src: url('../../files/theme/fonts/lato-v25-latin-italic.woff2') format('woff2'); } /* lato-700 - latin */ @font-face { font-display: swap; font-family: 'Lato'; font-style: normal; font-weight: 700; src: url('../../files/theme/fonts/lato-v25-latin-700.woff2') format('woff2'); } /* lato-700italic - latin */ @font-face { font-display: swap; font-family: 'Lato'; font-style: italic; font-weight: 700; src: url('../../files/theme/fonts/lato-v25-latin-700italic.woff2') format('woff2'); } /* lato-900 - latin */ /* @font-face { font-display: swap; font-family: 'Lato'; font-style: normal; font-weight: 900; src: url('../../files/theme/fonts/lato-v25-latin-900.woff2') format('woff2'); } */ /* lato-900italic - latin */ /* @font-face { font-display: swap; font-family: 'Lato'; font-style: italic; font-weight: 900; src: url('../../files/theme/fonts/lato-v25-latin-900italic.woff2') format('woff2'); } */