/** * Swiper 6.8.4 * Most modern mobile touch slider and framework with hardware accelerated transitions * https://swiperjs.com * * Copyright 2014-2021 Vladimir Kharlampidi * * Released under the MIT License * * Released on: August 23, 2021 */ @font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA') format('woff');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}.swiper-container{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-container-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}.swiper-container-android .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-container-multirow>.swiper-wrapper{flex-wrap:wrap}.swiper-container-multirow-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-container-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-container-pointer-events{touch-action:pan-y}.swiper-container-pointer-events.swiper-container-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform}.swiper-slide-invisible-blank{visibility:hidden}.swiper-container-autoheight,.swiper-container-autoheight .swiper-slide{height:auto}.swiper-container-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-container-3d{perspective:1200px}.swiper-container-3d .swiper-cube-shadow,.swiper-container-3d .swiper-slide,.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top,.swiper-container-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-container-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-container-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-container-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-container-horizontal.swiper-container-css-mode>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-container-vertical.swiper-container-css-mode>.swiper-wrapper{scroll-snap-type:y mandatory}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;text-transform:none;font-variant:initial;line-height:1}.swiper-button-prev,.swiper-container-rtl .swiper-button-next{left:10px;right:auto}.swiper-button-prev:after,.swiper-container-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-container-rtl .swiper-button-prev{right:10px;left:auto}.swiper-button-next:after,.swiper-container-rtl .swiper-button-prev:after{content:'next'}.swiper-button-next.swiper-button-white,.swiper-button-prev.swiper-button-white{--swiper-navigation-color:#ffffff}.swiper-button-next.swiper-button-black,.swiper-button-prev.swiper-button-black{--swiper-navigation-color:#000000}.swiper-button-lock{display:none}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:8px;height:8px;display:inline-block;border-radius:50%;background:#000;opacity:.2}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:1;background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-container-vertical>.swiper-pagination-bullets{right:10px;top:50%;transform:translate3d(0px,-50%,0)}.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:6px 0;display:block}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 4px}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-container-horizontal.swiper-container-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-progressbar{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-container-horizontal>.swiper-pagination-progressbar,.swiper-container-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:4px;left:0;top:0}.swiper-container-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-container-vertical>.swiper-pagination-progressbar{width:4px;height:100%;left:0;top:0}.swiper-pagination-white{--swiper-pagination-color:#ffffff}.swiper-pagination-black{--swiper-pagination-color:#000000}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}.swiper-container-horizontal>.swiper-scrollbar{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-container-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;animation:swiper-preloader-spin 1s infinite linear;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{100%{transform:rotate(360deg)}}.swiper-container .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-container-fade.swiper-container-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-container-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-container-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-fade .swiper-slide-active,.swiper-container-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube{overflow:visible}.swiper-container-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-container-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-cube.swiper-container-rtl .swiper-slide{transform-origin:100% 0}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-next,.swiper-container-cube .swiper-slide-next+.swiper-slide,.swiper-container-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-container-cube .swiper-slide-shadow-bottom,.swiper-container-cube .swiper-slide-shadow-left,.swiper-container-cube .swiper-slide-shadow-right,.swiper-container-cube .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-container-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}.swiper-container-cube .swiper-cube-shadow:before{content:'';background:#000;position:absolute;left:0;top:0;bottom:0;right:0;filter:blur(50px)}.swiper-container-flip{overflow:visible}.swiper-container-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-container-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-flip .swiper-slide-active,.swiper-container-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-flip .swiper-slide-shadow-bottom,.swiper-container-flip .swiper-slide-shadow-left,.swiper-container-flip .swiper-slide-shadow-right,.swiper-container-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden} /** * CLICKPRESS CSS-Grid * @author: Stefan Schulz-Lauterbach * * thanks to Dinko Skopljak for co-working */ .justify-items-start { justify-items: start; } .justify-items-center { justify-items: center; } .justify-items-end { justify-items: end; } .justify-items-stretch { justify-items: stretch; } .content-start { align-content: start; } .content-center { align-content: center; } .content-end { align-content: end; } .items-start { align-items: start; } .items-center { align-items: center; } .items-end { align-items: end; } .items-stretch { align-items: stretch; } .items-baseline { align-items: baseline; } [class*=grid_] { display: grid; grid-gap: 1rem; } [class*=grid_] > .block { margin-bottom: 0; } @media (min-width: 576px) { .grid_mobile_100 { grid-template-columns: 1fr; } .grid_mobile_50_50 { grid-template-columns: repeat(2, 1fr); } .grid_mobile_33_33_33 { grid-template-columns: repeat(3, 1fr); } .grid_mobile_25_25_25_25 { grid-template-columns: repeat(4, 1fr); } .grid_mobile_75_25 { grid-template-columns: 3fr 1fr; } .grid_mobile_25_75 { grid-template-columns: 1fr 3fr; } .grid_mobile_66_33 { grid-template-columns: 2fr 1fr; } .grid_mobile_33_66 { grid-template-columns: 1fr 2fr; } .grid_mobile_60_40 { grid-template-columns: 3fr 2fr; } .grid_mobile_40_60 { grid-template-columns: 2fr 3fr; } .grid_mobile_50_25_25 { grid-template-columns: 2fr 1fr 1fr; } .grid_mobile_25_50_25 { grid-template-columns: 1fr 2fr 1fr; } .grid_mobile_25_25_50 { grid-template-columns: 1fr 1fr 2fr; } .grid_mobile_40_30_30 { grid-template-columns: 4fr 3fr 3fr; } .grid_mobile_30_40_30 { grid-template-columns: 3fr 4fr 3fr; } .grid_mobile_30_30_40 { grid-template-columns: 3fr 3fr 4fr; } .gap_mobile_0 { grid-gap: 0; } .gap_mobile_1 { grid-gap: 1rem; } .gap_mobile_2 { grid-gap: 2rem; } .gap_mobile_3 { grid-gap: 3rem; } .gap_mobile_4 { grid-gap: 4rem; } .gap_mobile_5 { grid-gap: 5rem; } .gap_mobile_6 { grid-gap: 6rem; } .gap_mobile_7 { grid-gap: 7rem; } .gap_mobile_8 { grid-gap: 8rem; } .gap_mobile_9 { grid-gap: 9rem; } .gap_mobile_10 { grid-gap: 10rem; } .gap_mobile_11 { grid-gap: 11rem; } .gap_mobile_12 { grid-gap: 12rem; } } @media (min-width: 768px) { .grid_tablet_100 { grid-template-columns: 1fr; } .grid_tablet_50_50 { grid-template-columns: repeat(2, 1fr); } .grid_tablet_33_33_33 { grid-template-columns: repeat(3, 1fr); } .grid_tablet_25_25_25_25 { grid-template-columns: repeat(4, 1fr); } .grid_tablet_75_25 { grid-template-columns: 3fr 1fr; } .grid_tablet_25_75 { grid-template-columns: 1fr 3fr; } .grid_tablet_66_33 { grid-template-columns: 2fr 1fr; } .grid_tablet_33_66 { grid-template-columns: 1fr 2fr; } .grid_tablet_60_40 { grid-template-columns: 3fr 2fr; } .grid_tablet_40_60 { grid-template-columns: 2fr 3fr; } .grid_tablet_50_25_25 { grid-template-columns: 2fr 1fr 1fr; } .grid_tablet_25_50_25 { grid-template-columns: 1fr 2fr 1fr; } .grid_tablet_25_25_50 { grid-template-columns: 1fr 1fr 2fr; } .grid_tablet_40_30_30 { grid-template-columns: 4fr 3fr 3fr; } .grid_tablet_30_40_30 { grid-template-columns: 3fr 4fr 3fr; } .grid_tablet_30_30_40 { grid-template-columns: 3fr 3fr 4fr; } .grid_tablet_20_40_40 { grid-template-columns: 1fr 2fr 2fr; } .grid_tablet_40_20_40 { grid-template-columns: 2fr 1fr 2fr; } .grid_tablet_40_40_20 { grid-template-columns: 2fr 2fr 1fr; } .gap_tablet_0 { grid-gap: 0; } .gap_tablet_1 { grid-gap: 1rem; } .gap_tablet_2 { grid-gap: 2rem; } .gap_tablet_3 { grid-gap: 3rem; } .gap_tablet_4 { grid-gap: 4rem; } .gap_tablet_5 { grid-gap: 5rem; } .gap_tablet_6 { grid-gap: 6rem; } .gap_tablet_7 { grid-gap: 7rem; } .gap_tablet_8 { grid-gap: 8rem; } .gap_tablet_9 { grid-gap: 9rem; } .gap_tablet_10 { grid-gap: 10rem; } .gap_tablet_11 { grid-gap: 11rem; } .gap_tablet_12 { grid-gap: 12rem; } } @media (min-width: 992px) { .grid_desktop_100 { grid-template-columns: 1fr; } .grid_desktop_50_50 { grid-template-columns: repeat(2, 1fr); } .grid_desktop_50_25_25 { grid-template-columns: 2fr 1fr 1fr; } .grid_desktop_33_33_33 { grid-template-columns: repeat(3, 1fr); } .grid_desktop_75_25 { grid-template-columns: 3fr 1fr; } .grid_desktop_25_75 { grid-template-columns: 1fr 3fr; } .grid_desktop_66_33 { grid-template-columns: 2fr 1fr; } .grid_desktop_60_40 { grid-template-columns: 3fr 2fr; } .grid_desktop_40_60 { grid-template-columns: 2fr 3fr; } .grid_desktop_33_66 { grid-template-columns: 1fr 2fr; } .grid_desktop_50_25_25 { grid-template-columns: 2fr 1fr 1fr; } .grid_desktop_40_30_30 { grid-template-columns: 4fr 3fr 3fr; } .grid_desktop_50_25_25 { grid-template-columns: 2fr 1fr 1fr; } .grid_desktop_25_50_25 { grid-template-columns: 1fr 2fr 1fr; } .grid_desktop_25_25_50 { grid-template-columns: 1fr 1fr 2fr; } .grid_desktop_40_30_30 { grid-template-columns: 4fr 3fr 3fr; } .grid_desktop_30_40_30 { grid-template-columns: 3fr 4fr 3fr; } .grid_desktop_30_30_40 { grid-template-columns: 3fr 3fr 4fr; } .grid_desktop_20_40_40 { grid-template-columns: 1fr 2fr 2fr; } .grid_desktop_40_20_40 { grid-template-columns: 2fr 1fr 2fr; } .grid_desktop_40_40_20 { grid-template-columns: 2fr 2fr 1fr; } .grid_desktop_25_25_25_25 { grid-template-columns: repeat(4, 1fr); } .grid_desktop_40_20_20_20 { grid-template-columns: 2fr 1fr 1fr 1fr; } .grid_desktop_20_40_20_20 { grid-template-columns: 1fr 2fr 1fr 1fr; } .grid_desktop_20_20_40_20 { grid-template-columns: 1fr 1fr 2fr 1fr; } .grid_desktop_20_20_20_40 { grid-template-columns: 1fr 1fr 1fr 2fr; } .grid_desktop_20_20_20_20_20 { grid-template-columns: repeat(5, 1fr); } .gap_desktop_0 { grid-gap: 0; } .gap_desktop_1 { grid-gap: 1rem; } .gap_desktop_2 { grid-gap: 2rem; } .gap_desktop_3 { grid-gap: 3rem; } .gap_desktop_4 { grid-gap: 4rem; } .gap_desktop_5 { grid-gap: 5rem; } .gap_desktop_6 { grid-gap: 6rem; } .gap_desktop_7 { grid-gap: 7rem; } .gap_desktop_8 { grid-gap: 8rem; } .gap_desktop_9 { grid-gap: 9rem; } .gap_desktop_10 { grid-gap: 10rem; } .gap_desktop_11 { grid-gap: 11rem; } .gap_desktop_12 { grid-gap: 12rem; } } /*# sourceMappingURL=clickpress-grid.css.map */ @media (min-width:1024px){body.fullscreen_mobile_nav header nav,body:not(.fullscreen_mobile_nav) .navicon{display:none}}@media (max-width:1023px){#header nav.mod_navigation{display:none}}.mobile_navigation_wrapper .mod_navigation{display:flex;position:fixed;z-index:9;transition:left 0.5s ease-in-out, right 0.5s ease-in-out;overflow:visible;width:100%}.mobile_navigation_wrapper .mod_navigation ul{margin-bottom:0}.mobile_navigation_wrapper .mod_navigation li{list-style:none}.mobile_navigation_wrapper .mod_navigation.no_counter .submenu_toggle span{opacity:0}.mobile_navigation_wrapper .mod_navigation.no_buttons_right .submenu_toggle{border:0}html.js_mobile_navigation_open,html.js_mobile_navigation_open body{overflow:hidden}html .mobile_navigation_wrapper>.mod_navigation.slide_from_left{left:-100%}html .mobile_navigation_wrapper>.mod_navigation:not(.slide_from_left){right:-100%}html body:not(.fullscreen_mobile_nav) .mobile_navigation_wrapper>.mod_navigation .level_1{right:-100%}html body:not(.fullscreen_mobile_nav) .mobile_navigation_wrapper>.mod_navigation.slide_from_left .level_1{left:-100%}html.js_mobile_navigation_open .mobile_navigation_wrapper>.mod_navigation:not(.slide_from_left){right:0}html.js_mobile_navigation_open .mobile_navigation_wrapper>.mod_navigation.slide_from_left{left:0}html.js_mobile_navigation_open body:not(.fullscreen_mobile_nav) .mobile_navigation_wrapper>.mod_navigation:not(.slide_from_left) .level_1{right:0}html.js_mobile_navigation_open body:not(.fullscreen_mobile_nav) .mobile_navigation_wrapper>.mod_navigation.slide_from_left .level_1{left:0}.mobile_navigation_wrapper .mod_navigation .level_1{top:calc(var(--initial_header_height, 100px) * 1px);height:calc(100% - ( var(--initial_header_height, 100px) * 1px ));margin:0;position:fixed;max-width:440px;box-sizing:border-box;z-index:9;overflow-y:scroll;transition:right 0.3s ease 0s, left 0.3s ease 0s;padding:20px 0px 20px 30px;width:100%;border-left:1px solid #ddd;background:#f8f8f8}.mobile_navigation_wrapper .mod_navigation .level_1>li:not(.open) .level_2>li>a,.mobile_navigation_wrapper .mod_navigation .level_1>li:not(.open) .level_2>li>strong,.mobile_navigation_wrapper .mod_navigation .level_1>li:not(.open) .level_2>li>span,.mobile_navigation_wrapper .mod_navigation .level_1>li:not(.open) .level_3>li>a,.mobile_navigation_wrapper .mod_navigation .level_1>li:not(.open) .level_3>li>strong,.mobile_navigation_wrapper .mod_navigation .level_1>li:not(.open) .level_3>li>span,.mobile_navigation_wrapper .mod_navigation .level_1>li:not(.open) .level_4>li>a,.mobile_navigation_wrapper .mod_navigation .level_1>li:not(.open) .level_4>li>strong,.mobile_navigation_wrapper .mod_navigation .level_1>li:not(.open) .level_4>li>span,.mobile_navigation_wrapper .mod_navigation .level_1>li:not(.open) .level_5>li>a,.mobile_navigation_wrapper .mod_navigation .level_1>li:not(.open) .level_5>li>strong,.mobile_navigation_wrapper .mod_navigation .level_1>li:not(.open) .level_5>li>span{padding:0;border-bottom:0;font-size:0}.mobile_navigation_wrapper .mod_navigation .level_1 .level_2>li:not(.open) .level_3>li>a,.mobile_navigation_wrapper .mod_navigation .level_1 .level_2>li:not(.open) .level_3>li>strong,.mobile_navigation_wrapper .mod_navigation .level_1 .level_2>li:not(.open) .level_3>li>span,.mobile_navigation_wrapper .mod_navigation .level_1 .level_2>li:not(.open) .level_4>li>a,.mobile_navigation_wrapper .mod_navigation .level_1 .level_2>li:not(.open) .level_4>li>strong,.mobile_navigation_wrapper .mod_navigation .level_1 .level_2>li:not(.open) .level_4>li>span,.mobile_navigation_wrapper .mod_navigation .level_1 .level_2>li:not(.open) .level_5>li>a,.mobile_navigation_wrapper .mod_navigation .level_1 .level_2>li:not(.open) .level_5>li>strong,.mobile_navigation_wrapper .mod_navigation .level_1 .level_2>li:not(.open) .level_5>li>span{padding:0;border-bottom:0;font-size:0}.mobile_navigation_wrapper .mod_navigation .level_1 .level_3>li:not(.open) .level_4>li>a,.mobile_navigation_wrapper .mod_navigation .level_1 .level_3>li:not(.open) .level_4>li>strong,.mobile_navigation_wrapper .mod_navigation .level_1 .level_3>li:not(.open) .level_4>li>span,.mobile_navigation_wrapper .mod_navigation .level_1 .level_3>li:not(.open) .level_5>li>a,.mobile_navigation_wrapper .mod_navigation .level_1 .level_3>li:not(.open) .level_5>li>strong,.mobile_navigation_wrapper .mod_navigation .level_1 .level_3>li:not(.open) .level_5>li>span{padding:0;border-bottom:0;font-size:0}.mobile_navigation_wrapper .mod_navigation .level_1 .level_4>li:not(.open) .level_5>li>a,.mobile_navigation_wrapper .mod_navigation .level_1 .level_4>li:not(.open) .level_5>li>strong,.mobile_navigation_wrapper .mod_navigation .level_1 .level_4>li:not(.open) .level_5>li>span{padding:0;border-bottom:0;font-size:0}.mobile_navigation_wrapper .mod_navigation li{position:relative}.mobile_navigation_wrapper .mod_navigation li.submenu>a,.mobile_navigation_wrapper .mod_navigation li.submenu>strong,.mobile_navigation_wrapper .mod_navigation li.submenu>span{padding-right:80px}.mobile_navigation_wrapper .mod_navigation li.mn_only_toggle_submenu:not(.active) .submenu_toggle:before{content:"";width:375px;height:46px;position:absolute;right:0px}.mobile_navigation_wrapper .mod_navigation li.mn_only_toggle_submenu:not(.active)>a{pointer-events:none}.mobile_navigation_wrapper .mod_navigation li a,.mobile_navigation_wrapper .mod_navigation li strong,.mobile_navigation_wrapper .mod_navigation li>span{display:block;color:#444;line-height:1;padding:14px;border-bottom:1px solid #ddd;text-decoration:none;transition:padding 0.25s ease-in-out}.mobile_navigation_wrapper .mod_navigation li ul{opacity:0;margin:0;padding:0 0 0 30px;overflow:hidden;line-height:1;transition:opacity 0.3s ease-in-out}.mobile_navigation_wrapper .mod_navigation li ul li>a,.mobile_navigation_wrapper .mod_navigation li ul li>strong,.mobile_navigation_wrapper .mod_navigation li ul li>span{color:#666;display:block;border:0;padding:0 0 0 12px;font-size:0;transition:all 0.25s ease-in-out}.mobile_navigation_wrapper .mod_navigation li ul.open{opacity:1}.mobile_navigation_wrapper .mod_navigation li ul.open>li>a,.mobile_navigation_wrapper .mod_navigation li ul.open>li>strong,.mobile_navigation_wrapper .mod_navigation li ul.open>li>span{padding:14px;border-bottom:1px solid #ddd;font-size:var(--font_size, 1em)}.mobile_navigation_wrapper .mod_navigation li .submenu_toggle{position:absolute;box-sizing:border-box;right:0;top:0;border-left:1px solid #ddd;color:#666;width:80px;cursor:pointer;padding:14px;display:flex;align-items:flex-start;justify-content:center}.mobile_navigation_wrapper .mod_navigation li .submenu_toggle span{pointer-events:none;line-height:1}.mobile_navigation_wrapper .mod_navigation li .submenu_toggle svg{pointer-events:none;width:1em;height:1em;margin-bottom:0;margin-left:5px;transition:transform 0.25s ease-in-out}.mobile_navigation_wrapper .mod_navigation li .submenu_toggle.open svg{transform:rotate(90deg)}.navicon{--line_top: 8px;--padding: 15px;cursor:pointer;position:relative;padding:var(--padding);right:-10px;-webkit-tap-highlight-color:transparent}.navicon .inside{position:relative;width:30px;height:calc(var(--line_top) + var(--padding) - 4px);background:rgba(255, 255, 255, 0);border-radius:3px;z-index:9}.navicon .inside .lines{position:absolute;width:30px;height:2px;border-radius:5px;background-color:#000}.navicon .inside .line_top{top:0px;transition:all 200ms ease 200ms, transform ease 200ms;animation:top_8_to_0 200ms}.navicon .inside .line_middle{top:var(--line_top);transition:transform ease 200ms}.navicon .inside .line_bottom{top:calc(var(--line_top) * 2);transition:all 200ms ease 200ms, transform ease 200ms;animation:top_8_to_16 200ms}.js_mobile_navigation_open .navicon .inside .line_top{top:var(--line_top);transform:rotate(-45deg);transition:all ease 200ms, transform 200ms ease 200ms}.js_mobile_navigation_open .navicon .inside .line_middle{top:var(--line_top);transform:rotate(-45deg);transition:transform 200ms ease 200ms}.js_mobile_navigation_open .navicon .inside .line_bottom{top:var(--line_top);transform:rotate(45deg);transition:all ease 200ms, transform 200ms ease 200ms}@keyframes top_8_to_0{0%{top:var(--line_top)}100%{top:0}}@keyframes top_8_to_16{0%{top:var(--line_top)}100%{top:calc(var(--line_top) * 2)}}body.fullscreen_mobile_nav .mobile_navigation_wrapper .mod_navigation{top:0;width:100vw;max-width:100vw;height:100vh;height:100svh;background:#fff;overflow:visible;overflow-x:scroll;transition:left 0.4s ease-in-out, right 0.4s ease-in-out}body.fullscreen_mobile_nav .mobile_navigation_wrapper .mod_navigation .level_1{display:flex;flex-wrap:wrap;position:relative;top:80px;width:1000px;max-width:100%;justify-content:space-between;height:900px;max-height:100%;margin:auto;padding:0;background:none;border:0;list-style:none}@media (max-width:1023px){body.fullscreen_mobile_nav .mobile_navigation_wrapper .mod_navigation .level_1{height:auto;margin:0;display:block}}body.fullscreen_mobile_nav .mobile_navigation_wrapper .mod_navigation .level_1 strong.active{text-decoration:none}body.fullscreen_mobile_nav .mobile_navigation_wrapper .mod_navigation .level_1 li a:hover{text-decoration:underline}body.fullscreen_mobile_nav .mobile_navigation_wrapper .mod_navigation .level_1>li{width:50%;max-width:400px}@media (max-width:1023px){body.fullscreen_mobile_nav .mobile_navigation_wrapper .mod_navigation .level_1>li{width:100%;margin-top:40px}body.fullscreen_mobile_nav .mobile_navigation_wrapper .mod_navigation .level_1>li:first-child{margin-top:0}}body.fullscreen_mobile_nav .mobile_navigation_wrapper .mod_navigation .level_1>li>a,body.fullscreen_mobile_nav .mobile_navigation_wrapper .mod_navigation .level_1>li>strong,body.fullscreen_mobile_nav .mobile_navigation_wrapper .mod_navigation .level_1>li>span{font-size:25px;font-weight:200}body.fullscreen_mobile_nav .mobile_navigation_wrapper .mod_navigation .level_1>li>a:hover,body.fullscreen_mobile_nav .mobile_navigation_wrapper .mod_navigation .level_1>li>strong:hover,body.fullscreen_mobile_nav .mobile_navigation_wrapper .mod_navigation .level_1>li>span:hover{text-decoration:none}body.fullscreen_mobile_nav .mobile_navigation_wrapper .mod_navigation .level_1 .level_2{padding:15px;list-style:none}body.fullscreen_mobile_nav .mobile_navigation_wrapper .mod_navigation .level_1 .level_2 strong.active{text-decoration:underline}body.fullscreen_mobile_nav .mobile_navigation_wrapper .mod_navigation .level_1 .level_2>li>a,body.fullscreen_mobile_nav .mobile_navigation_wrapper .mod_navigation .level_1 .level_2>li>strong{font-size:1em;line-height:2;font-weight:700;color:var(--color_1);padding:0}@media (max-width:1023px){body.fullscreen_mobile_nav .mobile_navigation_wrapper .mod_navigation .level_1 .level_2>li>a,body.fullscreen_mobile_nav .mobile_navigation_wrapper .mod_navigation .level_1 .level_2>li>strong{font-size:20px}}body.fullscreen_mobile_nav .mobile_navigation_wrapper .mod_navigation ul{opacity:1;padding:0}body.fullscreen_mobile_nav .mobile_navigation_wrapper .mod_navigation ul>li>a,body.fullscreen_mobile_nav .mobile_navigation_wrapper .mod_navigation ul>li>strong,body.fullscreen_mobile_nav .mobile_navigation_wrapper .mod_navigation ul>li>span{padding:14px;border:0;font-size:var(--font_size, 1em)}body.fullscreen_mobile_nav .mobile_navigation_wrapper .mod_navigation ul>li>a.active,body.fullscreen_mobile_nav .mobile_navigation_wrapper .mod_navigation ul>li>strong.active,body.fullscreen_mobile_nav .mobile_navigation_wrapper .mod_navigation ul>li>span.active{background:transparent !important}body.fullscreen_mobile_nav .mobile_navigation_wrapper .mod_navigation ul.open>li>a,body.fullscreen_mobile_nav .mobile_navigation_wrapper .mod_navigation ul.open>li>strong,body.fullscreen_mobile_nav .mobile_navigation_wrapper .mod_navigation ul.open>li>span{border:0}body.fullscreen_mobile_nav .mobile_navigation_wrapper .mod_navigation .submenu_toggle{display:none} @charset "UTF-8"; html { --brand-color1: #9BB9DD; --brand-color2: #48304D; --brand-color3: #CC7E85; --brand-color4: #FFE8D1; --brand-color5: #01295F; --brand-color6: #383F52; --brand-black: #1D1D1B; --grau-100: #F2F2F3; --grau-200: #E5E5E6; --grau-300: #D7D9DA; --grau-400: #BDBFC2; --grau-500: #95999D; --grau-600: #74787C; --grau-700: #56595C; --grau-800: #3D4042; --grau-900: var(--brand-black); --base-color: #fff; --text-color: var(--grau-900); --text-color-light: #fff; --heading-color: var(--brand-color2); --secondary-heading-color: var(--brand-color2); --action: var(--brand-color2); --action-respond: var(--brand-color3); --alert-yellow: #ff0; --alert-blue: #00f; --alert-red: #f00; --alert-green: #0f0; } .zwei-a-media { --heading-color: var(--brand-color2); --secondary-heading-color: var(--brand-color2); } .zwei-a-consulting { --heading-color: var(--brand-color6); --secondary-heading-color: var(--brand-color1); } :root { --brand-color1-100: color-mix(in srgb, var(--brand-color1), white 80%); --brand-color1-200: color-mix(in srgb, var(--brand-color1), white 60%); --brand-color1-300: color-mix(in srgb, var(--brand-color1), white 40%); --brand-color1-400: color-mix(in srgb, var(--brand-color1), white 20%); --brand-color1-500: var(--brand-color1); --brand-color1-600: color-mix(in srgb, var(--brand-color1), black 20%); --brand-color1-700: color-mix(in srgb, var(--brand-color1), black 40%); --brand-color1-800: color-mix(in srgb, var(--brand-color1), black 60%); --brand-color1-900: color-mix(in srgb, var(--brand-color1), black 80%); --brand-color2-100: color-mix(in srgb, var(--brand-color2), white 80%); --brand-color2-200: color-mix(in srgb, var(--brand-color2), white 60%); --brand-color2-300: color-mix(in srgb, var(--brand-color2), white 40%); --brand-color2-400: color-mix(in srgb, var(--brand-color2), white 20%); --brand-color2-500: var(--brand-color2); --brand-color2-600: color-mix(in srgb, var(--brand-color2), black 20%); --brand-color2-700: color-mix(in srgb, var(--brand-color2), black 40%); --brand-color2-800: color-mix(in srgb, var(--brand-color2), black 60%); --brand-color2-900: color-mix(in srgb, var(--brand-color2), black 80%); --brand-color3-100: color-mix(in srgb, var(--brand-color3), white 80%); --brand-color3-200: color-mix(in srgb, var(--brand-color3), white 60%); --brand-color3-300: color-mix(in srgb, var(--brand-color3), white 40%); --brand-color3-400: color-mix(in srgb, var(--brand-color3), white 20%); --brand-color3-500: var(--brand-color3); --brand-color3-600: color-mix(in srgb, var(--brand-color3), black 20%); --brand-color3-700: color-mix(in srgb, var(--brand-color3), black 40%); --brand-color3-800: color-mix(in srgb, var(--brand-color3), black 60%); --brand-color3-900: color-mix(in srgb, var(--brand-color3), black 80%); --brand-color6-100: color-mix(in srgb, var(--brand-color6), white 80%); --brand-color6-200: color-mix(in srgb, var(--brand-color6), white 60%); --brand-color6-300: color-mix(in srgb, var(--brand-color6), white 40%); --brand-color6-400: color-mix(in srgb, var(--brand-color6), white 20%); --brand-color6-500: var(--brand-color6); --brand-color6-600: color-mix(in srgb, var(--brand-color6), black 20%); --brand-color6-700: color-mix(in srgb, var(--brand-color6), black 40%); --brand-color6-800: color-mix(in srgb, var(--brand-color6), black 60%); --brand-color6-900: color-mix(in srgb, var(--brand-color6), black 80%); } html { --base-font-size: 16px; --doc-font-size: 16; --base-line-height: 24px; } /* archivo-200 - latin */ @font-face { font-display: swap; font-family: "Archivo"; font-style: normal; font-weight: 200; src: url("/files/theme/fonts/archivo-v19-latin-200.woff2") format("woff2"); } /* archivo-500 - latin */ @font-face { font-display: swap; font-family: "Archivo"; font-style: normal; font-weight: 500; src: url("/files/theme/fonts/archivo-v19-latin-500.woff2") format("woff2"); } /* archivo-700 - latin */ @font-face { font-display: swap; font-family: "Archivo"; font-style: normal; font-weight: 700; src: url("/files/theme/fonts/archivo-v19-latin-700.woff2") format("woff2"); } body { --font-family-sans: "Archivo","Arial", "Droid sans", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-family-serif: Georgia, "Times New Roman", Times, serif; --font-family-display: var(--font-family-sans); --font-family-default: var(--font-family-sans); --fw-l: 300; --fw-n: 300; --fw-sb: 500; --fw-b: 700; } :root { --space-small: .5rem; --space-default: 1rem; --space-medium: 2rem; --space-large: 4rem; --space-xlarge: 6rem; } .clearfix:after { content: ""; display: table; clear: both; } .hidden { display: none !important; visibility: hidden; } .invisible, .ce_form .widget-radio .radio_container > span input, .ce_form .widget-checkbox .checkbox_container > span input { border: 0 none; clip: rect(0px, 0px, 0px, 0px); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .invisibleAccessible, .sr-only { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); padding: 0 !important; border: 0 !important; height: 1px !important; width: 1px !important; overflow: hidden !important; } .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } .embed-container, .aspect { position: relative; width: 100%; height: 0; overflow: hidden; --aspect-ratio: 56.25%; padding-bottom: var(--aspect-ratio); } .embed-container > iframe, .embed-container > object, .embed-container > embed, .embed-container > video, .aspect > iframe, .aspect > object, .aspect > embed, .aspect > video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .embed-container.aspect--16\:9, .aspect.aspect--16\:9 { --aspect-ratio: 56.25%; } .embed-container.aspect--16\:10, .aspect.aspect--16\:10 { --aspect-ratio: 62.5%; } .embed-container.aspect--21\:9, .aspect.aspect--21\:9 { --aspect-ratio: 42.86%; } .embed-container.aspect--4\:3, .aspect.aspect--4\:3 { --aspect-ratio: 75%; } .embed-container.aspect--3\:2, .aspect.aspect--3\:2 { --aspect-ratio: 66.67%; } .embed-container.aspect--1\:1, .aspect.aspect--1\:1 { --aspect-ratio: 100%; } @supports not (--aspect-ratio: 56.25%) { .embed-container.aspect--16\:9, .aspect.aspect--16\:9 { padding-bottom: 56.25%; } .embed-container.aspect--16\:10, .aspect.aspect--16\:10 { padding-bottom: 62.5%; } .embed-container.aspect--21\:9, .aspect.aspect--21\:9 { padding-bottom: 42.86%; } .embed-container.aspect--4\:3, .aspect.aspect--4\:3 { padding-bottom: 75%; } .embed-container.aspect--3\:2, .aspect.aspect--3\:2 { padding-bottom: 66.67%; } .embed-container.aspect--1\:1, .aspect.aspect--1\:1 { padding-bottom: 100%; } } @supports (aspect-ratio: 16/9) { .embed-container, .aspect { height: auto; padding-bottom: 0; } .embed-container.aspect--16\:9, .aspect.aspect--16\:9 { aspect-ratio: 16/9; } .embed-container.aspect--16\:10, .aspect.aspect--16\:10 { aspect-ratio: 16/10; } .embed-container.aspect--21\:9, .aspect.aspect--21\:9 { aspect-ratio: 21/9; } .embed-container.aspect--4\:3, .aspect.aspect--4\:3 { aspect-ratio: 4/3; } .embed-container.aspect--3\:2, .aspect.aspect--3\:2 { aspect-ratio: 3/2; } .embed-container.aspect--1\:1, .aspect.aspect--1\:1 { aspect-ratio: 1/1; } } .center-text { text-align: center; } .center-block { margin-inline: auto; } .center-all { text-align: center; margin-inline: auto; } .listreset { margin: 0; padding: 0; list-style: none; } @media screen and (max-width: 480pxpx) { .hide-s { display: none !important; } } @media screen and (max-width: 480px-1px) { .show-s { display: none !important; } } @media screen and (max-width: 768pxpx) { .hide-m { display: none !important; } } @media screen and (max-width: 768px-1px) { .show-m { display: none !important; } } @media screen and (max-width: 990pxpx) { .hide-l { display: none !important; } } @media screen and (max-width: 990px-1px) { .show-l { display: none !important; } } @media screen and (max-width: 1200pxpx) { .hide-xl { display: none !important; } } @media screen and (max-width: 1200px-1px) { .show-xl { display: none !important; } } @media screen and (max-width: 1440pxpx) { .hide-wrap { display: none !important; } } @media screen and (max-width: 1440px-1px) { .show-wrap { display: none !important; } } @media screen and (max-width: 1472pxpx) { .hide-wrapbox { display: none !important; } } @media screen and (max-width: 1472px-1px) { .show-wrapbox { display: none !important; } } /* normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */ html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers. */ body { margin: 0; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { -webkit-box-sizing: content-box; box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * Remove the gray background on active links in IE 10. */ a { background-color: transparent; } /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ -webkit-text-decoration: underline dotted; text-decoration: underline dotted; /* 2 */ } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, 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; } /* Embedded content ========================================================================== */ /** * Remove the border on images inside links in IE 10. */ img { border-style: none; } /* 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 */ } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { /* 1 */ overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * Correct the inability to style clickable types in iOS and Safari. */ button, [type=button], [type=reset], [type=submit] { -webkit-appearance: button; } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { -webkit-box-sizing: border-box; box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Remove the default vertical scrollbar in IE 10+. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10. * 2. Remove the padding in IE 10. */ [type=checkbox], [type=radio] { -webkit-box-sizing: border-box; box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type=number]::-webkit-inner-spin-button, [type=number]::-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. */ [type=search]::-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 Edge, IE 10+, and Firefox. */ details { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Misc ========================================================================== */ /** * Add the correct display in IE 10+. */ template { display: none; } /** * Add the correct display in IE 10. */ [hidden] { display: none; } /** * Prevent modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */ audio:not([controls]) { display: none; height: 0; } /* ========================================================================== Typography ========================================================================== */ /** * Address variable `h1` font-size and margin within `section` and `article` * contexts in Firefox 4+, Safari 5, and Chrome. */ /** * Address styling not present in Safari 5 and Chrome. */ dfn { font-style: italic; } /** * Address differences between Firefox and other browsers. */ /** * Correct font family set oddly in Safari 5 and Chrome. */ code, kbd, pre, samp { font-family: monospace, serif; font-size: 1em; } /** * Improve readability of pre-formatted text in all browsers. */ pre { white-space: pre-wrap; } /** * Set consistent quote types. */ q { quotes: "“" "”" "‘" "’"; } /** * Correct overflow displayed oddly in IE 9. */ svg:not(:root) { overflow: hidden; } /* ========================================================================== Figures ========================================================================== */ /** * Address margin not present in IE 8/9 and Safari 5. */ figure { margin: 0; } /* ========================================================================== Tables ========================================================================== */ /** * Remove most spacing between table cells. */ table { border-collapse: collapse; border-spacing: 0; } /****************************************************************** CUSTOMIZED RESET VALUES I added these extra styles as a more personalized reset. Feel free to remove them if you like or add your own. If you want to update the normalize styles, make sure to edit from this point up. ******************************************************************/ b, strong, .strong { font-weight: bold; } em, .em { font-style: italic; } small { font-size: 75%; } dd { margin: 0; } html { font-size: 100%; font-family: var(--font-family-default); } html, body { font-family: var(--font-family-default); font-weight: var(--fw-n); line-height: 1.5; color: var(--text-color); overflow-x: hidden; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } html { -webkit-box-sizing: border-box; box-sizing: border-box; } *, *:before, *:after { -webkit-box-sizing: inherit; box-sizing: inherit; } :root { --spacingtop: 2; --spacingbottom: 2; } .mtop0 { --spacingtop: 0; } .mtop10 { --spacingtop: 10; } .mtop20 { --spacingtop: 20; } .mtop30 { --spacingtop: 30; } .mtop40 { --spacingtop: 40; } .mtop50 { --spacingtop: 50; } .mtop60 { --spacingtop: 60; } .mtop70 { --spacingtop: 70; } .mtop80 { --spacingtop: 80; } .mtop90 { --spacingtop: 90; } .mtop100 { --spacingtop: 100; } .mtop150 { --spacingtop: 150; } .mtop200 { --spacingtop: 200; } .mtop300 { --spacingtop: 300; } .mbottom0 { --spacingbottom: 0; } .mbottom10 { --spacingbottom: 10; } .mbottom20 { --spacingbottom: 20; } .mbottom30 { --spacingbottom: 30; } .mbottom40 { --spacingbottom: 40; } .mbottom50 { --spacingbottom: 50; } .mbottom60 { --spacingbottom: 60; } .mbottom70 { --spacingbottom: 70; } .mbottom80 { --spacingbottom: 80; } .mbottom90 { --spacingbottom: 90; } .mbottom100 { --spacingbottom: 100; } .mbottom150 { --spacingbottom: 150; } .mbottom200 { --spacingbottom: 200; } .mbottom300 { --spacingbottom: 300; } .ptop0 { --spacingtop: 0; } .ptop10 { --spacingtop: 10; } .ptop20 { --spacingtop: 20; } .ptop30 { --spacingtop: 30; } .ptop40 { --spacingtop: 40; } .ptop50 { --spacingtop: 50; } .ptop60 { --spacingtop: 60; } .ptop70 { --spacingtop: 70; } .ptop80 { --spacingtop: 80; } .ptop90 { --spacingtop: 90; } .ptop100 { --spacingtop: 100; } .ptop150 { --spacingtop: 150; } .ptop200 { --spacingtop: 200; } .ptop300 { --spacingtop: 300; } .pbottom0 { --spacingbottom: 0; } .pbottom10 { --spacingbottom: 10; } .pbottom20 { --spacingbottom: 20; } .pbottom30 { --spacingbottom: 30; } .pbottom40 { --spacingbottom: 40; } .pbottom50 { --spacingbottom: 50; } .pbottom60 { --spacingbottom: 60; } .pbottom70 { --spacingbottom: 70; } .pbottom80 { --spacingbottom: 80; } .pbottom90 { --spacingbottom: 90; } .pbottom100 { --spacingbottom: 100; } .pbottom150 { --spacingbottom: 150; } .pbottom200 { --spacingbottom: 200; } .pbottom300 { --spacingbottom: 300; } [class*=mtop] { margin-top: calc(var(--spacingtop) * 1px); } [class*=mbottom] { margin-bottom: calc(var(--spacingbottom) * 1px); } [class*=mtop].ppercent { margin-top: calc(var(--spacingtop) * 0.1%); } [class*=mbottom].ppercent { margin-bottom: calc(var(--spacingbottom) * 0.1%); } [class*=ptop], .mod_article[class*=ptop] { padding-top: calc(var(--spacingtop) * 1px); } [class*=pbottom], .mod_article[class*=pbottom] { padding-bottom: calc(var(--spacingbottom) * 1px); } [class*=ptop].ppercent, .mod_article[class*=ptop].ppercent { padding-top: calc(var(--spacingtop) * 0.1%); } [class*=pbottom].ppercent, .mod_article[class*=pbottom].ppercent { padding-bottom: calc(var(--spacingbottom) * 0.1%); } .innerpadding { padding-left: 1rem; padding-right: 1rem; } p { margin: 0 0 0.75em 0; font-size: clamp(1rem, 0.476vw + 0.821rem, 1.25rem); } strong, b { font-weight: var(--fw-sb); } ::-moz-selection { background: var(--grau-500); color: #fff; text-shadow: none; } ::-moz-selection, ::selection { background: var(--grau-500); color: #fff; text-shadow: none; } h1, h2, h3, h4, h5, h6, .headline, .h1, .h2, .h3, .h4, .h5, .h6 { line-height: 1.2; text-wrap: balance; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .headline a, .h1 a, .h2 a, .h3 a, .h4 a, .h5 a, .h6 a { text-decoration: none; color: inherit; } [class^=content-] h2:first-of-type, [class^=content-] h3:first-of-type, [class^=content-] h4:first-of-type, [class^=content-] h5:first-of-type, [class^=content-] h6:first-of-type { margin-top: 0; } h1, .h1 { font-family: var(--font-family-display); font-weight: var(--fw-sb); color: var(--heading-color); margin: 0 0 0.5em 0; font-size: clamp(1.75rem, 3.333vw + 0.5rem, 3.5rem); } h2, .h2 { font-family: var(--font-family-display); font-weight: var(--fw-b); color: var(--text-color); margin: 0.75em 0 0.5em 0; font-size: clamp(1.375rem, 1.667vw + 0.75rem, 2.25rem); } h3, .h3 { font-family: var(--font-family-display); font-weight: var(--fw-n); color: var(--heading-color); margin: 0.75em 0 0.5em 0; font-size: clamp(1.25rem, 0.952vw + 0.893rem, 1.75rem); } h4, .h4 { font-family: var(--font-family-display); font-weight: var(--fw-b); color: var(--heading-color); margin: 0.75em 0 0.5em 0; font-size: clamp(1.125rem, 0.714vw + 0.857rem, 1.5rem); } h5, .h5 { font-family: var(--font-family-display); font-weight: var(--fw-b); color: var(--text-color); margin: 0.75em 0 0.5em 0; font-size: clamp(1rem, 0.238vw + 0.911rem, 1.125rem); } h6, .h6 { font-family: var(--font-family-display); font-weight: var(--fw-b); color: var(--text-color); margin: 0.75em 0 0.5em 0; font-size: 1rem; } img, picture { max-width: 100%; height: auto; line-height: 0; } figure { line-height: 0; margin: 0; } figcaption { line-height: 1.2; } /*Fix für Caption auf Bildbreite beschränken*/ figure img { display: block; } figcaption { caption-side: bottom; margin-block: 0.25rem; font-style: italic; } /*Alle Bilder ohne Alt-Attribut kennzeichen*/ /*sollte für Production auskommentiert werden!*/ /*Behebt Probleme mit responsiven Bildern //https://community.contao.org/de/showthread.php?81074-Problem-mit-Bildgr%C3%B6%C3%9Fen-bei-responsive-Ausgabe-(seit-Kurzem)&p=545407&viewfull=1#post545407 */ :where(source[width][height] ~ img) { width: auto; height: auto; } a { color: var(--action); text-decoration: underline; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } a:hover, a:focus { color: var(--action-respond); } :focus-visible { outline: 1px dashed var(--grau-700); } a[href^=tel] { text-decoration: none; color: var(--text-color); } ul li, ol li { color: inherit; font-size: clamp(1rem, 0.476vw + 0.821rem, 1.25rem); } ul { list-style-type: disc; } ol { list-style-type: decimal; } .checklist ul { margin: 0; padding: 0; list-style: none; } .checklist li { padding-left: 1.5rem; background: url('data:image/svg+xml,') left top 0.4rem no-repeat; background-size: 1rem; margin-bottom: 0.5rem; } html { background-color: var(--base-color); } body { margin: 0 auto; background-color: var(--base-color); } .wrapper { min-height: 100vh; } .zwei-a-company #container { background-color: #978F7D; } @media screen and (min-width: 990px) { .zwei-a-company #container { background-image: url(/files/assets/company/bg-company-xl.jpg); background-size: cover; background-repeat: no-repeat; background-position: center; min-height: 1000px; } } .wrap, .mod_article .wrap-article, #footer .inside, #header .inside { max-width: 1440px; margin-inline: auto; } @media screen and (max-width: 1472px) { .wrap, .mod_article .wrap-article, #footer .inside, #header .inside { padding: 0 1rem 0 1rem; } } .container { background-color: var(--base-color); position: relative; } #header { background: var(--brand-color1); color: var(--text-color-light); padding: var(--space-default) var(--space-default); } #header .inside { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: var(--space-default); } #header.sticky { position: fixed; top: 0; z-index: 10; width: 100vw; } .zwei-a-media #header { background: var(--brand-color3); } .zwei-a-consulting #header { background: var(--brand-color1); } #header .logo { margin-right: auto; } #header .logo img { vertical-align: middle; } #footer { background-color: var(--brand-color2); color: var(--text-color-light); padding: var(--space-default); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='936' fill='none'%3E%3Cpath fill='%23fff' fill-opacity='.06' d='M1072.03 1184c323.04 0 584.9-265.047 584.9-592S1395.07 0 1072.03 0C749.002 0 487.133 265.047 487.133 592s261.869 592 584.897 592Z'/%3E%3Cpath fill='%23fff' fill-opacity='.03' d='M386.878 1415c360.575 0 652.882-265.05 652.882-592 0-326.953-292.307-592-652.882-592C26.303 231-266 496.047-266 823c0 326.95 292.303 592 652.878 592Z'/%3E%3Cpath fill='%23fff' fill-opacity='.03' d='M1222.57 1359c484.28 0 876.86-265.05 876.86-592 0-326.953-392.58-592-876.86-592-484.279 0-876.863 265.047-876.863 592 0 326.95 392.584 592 876.863 592Z'/%3E%3C/svg%3E"); background-position: center top; background-repeat: no-repeat; background-size: 175%; } .zwei-a-media #footer { background-color: var(--brand-color2); } .zwei-a-consulting #footer { background-color: var(--brand-color6); } @media screen and (min-width: 768px) { #footer { padding: var(--space-medium) var(--space-default) var(--space-small) var(--space-default); background-size: 100%; background-position: center bottom; } } @media screen and (min-width: 1200px) { #footer { padding: var(--space-large) var(--space-default) var(--space-small) var(--space-default); } } @media screen and (min-width: 1472px) { #footer { padding: var(--space-large) 0 var(--space-small) 0; } } #footer .inside { text-align: center; } #footer a { color: var(--text-color-light); } #footer a:hover, #footer a:focus { color: var(--brand-color4); } #footer [class^=content-] { margin-bottom: var(--space-small); } #footer .logo img { margin-inline: auto; margin-bottom: 2rem; } #footer .socialmedia { margin-block: var(--space-medium); } #footer .socialmedia ul { list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 0.5rem; margin: 0; padding: 0; } #footer .socialmedia li { margin: 0; padding: 0; } #footer .socialmedia a span { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); padding: 0 !important; border: 0 !important; height: 1px !important; width: 1px !important; overflow: hidden !important; } #footer .socialmedia .icon { width: 50px; height: 50px; } .mod_article { --article-bg-color: transparent; --article-color: var(--text-color); color: var(--article-color); background-color: var(--article-bg-color); padding: calc(var(--spacingtop) * 1rem) 1rem calc(var(--spacingbottom) * 1rem) 1rem; } @media screen and (min-width: 768px) { .mod_article { padding: calc(var(--spacingtop) * 2.5rem) 1rem calc(var(--spacingbottom) * 2.5rem) 1rem; } } @media screen and (min-width: 1472px) { .mod_article { padding: calc(var(--spacingtop) * 5rem) 0 calc(var(--spacingbottom) * 5rem) 0; } } @media screen and (min-width: 1472px) { .zwei-a-consulting .mod_article { padding: calc(var(--spacingtop) * 3rem) 0 calc(var(--spacingbottom) * 3rem) 0; } } .mod_article .wrap-article { position: relative; padding-inline: 0; } .mod_article.nopadding { padding: 0; } .mod_article.article--narrow .wrap-article { max-width: 56rem; } .mod_article.full-width .wrap-article { width: 100%; max-width: 100%; margin: 0; padding: 0; } .mod_article.bg-brandcolor1 { --article-bg-color: var(--brand-color1); --article-color: var(--text-color-light); --text-color: var(--text-color-light); } .mod_article.bg-brandcolor2 { --article-bg-color: var(--brand-color2); --article-color: var(--text-color-light); } .mod_article.bg-brandcolor3 { --article-bg-color: var(--brand-color3); --article-color: var(--text-color-light); --text-color: var(--text-color-light); } .mod_article.bg-brandcolor4 { --article-bg-color: var(--brand-color4); } .mod_article.bg-brandcolor4-light { --article-bg-color: #FFFAF5; } .mod_article.bg-hellgrau { --article-bg-color: var(--grau-200); } .mod_article.bg-kreise { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='936' fill='none'%3E%3Cpath fill='%23fff' fill-opacity='.06' d='M1072.03 1184c323.04 0 584.9-265.047 584.9-592S1395.07 0 1072.03 0C749.002 0 487.133 265.047 487.133 592s261.869 592 584.897 592Z'/%3E%3Cpath fill='%23fff' fill-opacity='.03' d='M386.878 1415c360.575 0 652.882-265.05 652.882-592 0-326.953-292.307-592-652.882-592C26.303 231-266 496.047-266 823c0 326.95 292.303 592 652.878 592Z'/%3E%3Cpath fill='%23fff' fill-opacity='.03' d='M1222.57 1359c484.28 0 876.86-265.05 876.86-592 0-326.953-392.58-592-876.86-592-484.279 0-876.863 265.047-876.863 592 0 326.95 392.584 592 876.863 592Z'/%3E%3C/svg%3E"); background-position: center center; background-repeat: no-repeat; background-size: 100%; } .mod_article.bg-kreise .headline.centered { max-width: 40ch; margin-inline: auto; margin-bottom: 2rem; } @media screen and (min-width: 1920px) { .zwei-a-media .mod_article.hero img { width: 100%; height: auto; max-width: unset; } } .zwei-a-media .mod_article.hero .wrap-article { display: -ms-grid; display: grid; grid-template-areas: "hero"; -ms-grid-columns: 1fr; grid-template-columns: 1fr; } .zwei-a-media .mod_article.hero .hero-image { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: hero; } .zwei-a-media .mod_article.hero .hero-icons { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: hero; position: relative; display: none; } @media screen and (min-width: 990px) { .zwei-a-media .mod_article.hero .hero-icons { left: 3rem; display: block; } } @media screen and (min-width: 1440px) { .zwei-a-media .mod_article.hero .hero-icons { left: calc((100vw - 1440px) / 2); } } .zwei-a-media .mod_article.hero .hero-icons .icon { color: var(--text-color-light); width: 40px; height: 40px; opacity: 0.5; } @media screen and (min-width: 768px) { .zwei-a-media .mod_article.hero .hero-icons .icon { width: 60px; height: 60px; } } @media screen and (min-width: 1440px) { .zwei-a-media .mod_article.hero .hero-icons .icon { width: 85px; height: 85px; } } .zwei-a-media .mod_article.hero .hero-icons .icon.icon-facebook { width: 40px; height: 40px; } @media screen and (min-width: 768px) { .zwei-a-media .mod_article.hero .hero-icons .icon.icon-facebook { width: 50px; height: 50px; } } .zwei-a-media .mod_article.hero .hero-icons .linkedin { position: relative; top: 12%; left: 2vw; } .zwei-a-media .mod_article.hero .hero-icons .instagram { position: relative; top: 8%; left: 8vw; } .zwei-a-media .mod_article.hero .hero-icons .facebook { position: relative; top: 8%; left: 5vw; } .zwei-a-media .mod_article.hero .hero-content { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: hero; -ms-grid-row-align: end; align-self: end; position: relative; left: 1rem; bottom: 1rem; max-width: 300px; } @media screen and (min-width: 768px) { .zwei-a-media .mod_article.hero .hero-content { left: 3rem; max-width: 500px; bottom: 3rem; } } @media screen and (min-width: 1200px) { .zwei-a-media .mod_article.hero .hero-content { max-width: 575px; } } @media screen and (min-width: 1440px) { .zwei-a-media .mod_article.hero .hero-content { bottom: 0; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; left: calc((100vw - 1440px) / 2); max-width: 675px; } } .zwei-a-media .mod_article.hero .hero-message { color: var(--text-color-light); font-size: clamp(1.5rem, 3.333vw + 0.5rem, 3.5rem); font-weight: var(--fw-sb); text-wrap: balance; line-height: 1.2; } .zwei-a-media .mod_article.hero .hero-message .highlight { color: var(--brand-color2); } .zwei-a-consulting .mod_article.hero { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='699' fill='none'%3E%3Cpath fill='url(%23a)' d='M0 0h1920v699H0V0Z'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='1897.76' x2='516.571' y1='694.288' y2='-518.004' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23AFA496'/%3E%3Cstop offset='.015' stop-color='%23B2A799'/%3E%3Cstop offset='.164' stop-color='%23B8AEA2'/%3E%3Cstop offset='.288' stop-color='%23C3BCB2'/%3E%3Cstop offset='.372' stop-color='%23D1CDC6'/%3E%3Cstop offset='.662' stop-color='%23BFB7AC'/%3E%3Cstop offset='1' stop-color='%23B9B0A3'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: cover; background-position: left top; } .zwei-a-consulting .mod_article.hero .wrap-article { display: -ms-grid; display: grid; -ms-grid-columns: 1fr; grid-template-columns: 1fr; } @media screen and (min-width: 990px) { .zwei-a-consulting .mod_article.hero .wrap-article { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } } .zwei-a-consulting .mod_article.hero .hero__image { margin-bottom: 0; } .zwei-a-consulting .mod_article.hero .hero__image img { -webkit-filter: drop-shadow(2px 0 10px rgba(0, 0, 0, 0.15)); filter: drop-shadow(2px 0 10px rgba(0, 0, 0, 0.15)); } .zwei-a-consulting .mod_article.hero .hero__content { place-content: center; padding-left: 1rem; padding-block: 2rem; } @media screen and (min-width: 1472px) { .zwei-a-consulting .mod_article.hero .hero__content { padding-left: calc((100vw - 1440px) / 2); } } .zwei-a-consulting .mod_article.hero .hero__content h2 { font-weight: var(--fw-sb); } .zwei-a-media .mod_article.topfooter .content-image { margin-bottom: 0; } @media screen and (min-width: 1920px) { .zwei-a-media .mod_article.topfooter img { width: 100%; height: auto; max-width: unset; } } .zwei-a-media .mod_article.topfooter .topfooter-cta p { font-size: 2rem; font-weight: var(--fw-sb); text-wrap: balance; text-align: center; } @supports (grid-area: auto) { * + .ce_cp_grid_start { margin-top: var(--gapvalue); } .grid-gap-null { --gapvalue: 0; } .grid-item-padding { padding: 1rem; } @media screen and (min-width: 768px) { .grid-item-padding { padding: 2rem; } } } /* Contao elements */ main .mod_article [class^=content-] { margin-bottom: var(--space-default); } .content-headline.centered { text-align: center; } .content-image.media-centered figure { display: -ms-grid; display: grid; place-items: center; } blockquote { padding: 0.25rem 0 1rem 0; margin: 0; font-size: 1.5rem; font-style: italic; color: var(--grau-700); } blockquote p { margin: 0; color: inherit; font-size: inherit; } .firmenteaser { border-radius: 5px; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.25); box-shadow: 0 0 10px rgba(0, 0, 0, 0.25); overflow: hidden; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in; background-color: #fff; max-width: 720px; margin-block: 2rem; margin-inline: auto; } .firmenteaser > .ce_cp_grid_start { height: 100%; } .firmenteaser__content { padding: 1rem; } .firmenteaser--2am { border-top: 5px solid var(--brand-color3); } .firmenteaser--2am:hover { -webkit-box-shadow: 0 0 15px rgba(204, 126, 133, 0.45); box-shadow: 0 0 15px rgba(204, 126, 133, 0.45); } .firmenteaser:hover .firmenteaser__image img { -webkit-transform: scale(1.02); transform: scale(1.02); } .firmenteaser--2ac { border-top: 5px solid var(--brand-color1); } .firmenteaser--2ac:hover { -webkit-box-shadow: 0 0 15px rgba(155, 174, 228, 0.45); box-shadow: 0 0 15px rgba(155, 174, 228, 0.45); } main .mod_article .firmenteaser .firmenteaser__image { margin-bottom: 0; height: 100%; overflow: hidden; } main .mod_article .firmenteaser .firmenteaser__image figure { height: 100%; } main .mod_article .firmenteaser .firmenteaser__image img { line-height: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: top center; object-position: top center; -webkit-transition: -webkit-transform 0.2s ease-in; transition: -webkit-transform 0.2s ease-in; transition: transform 0.2s ease-in; transition: transform 0.2s ease-in, -webkit-transform 0.2s ease-in; } nav ul { margin: 0; padding: 0; list-style: none; } nav li { position: relative; } nav a { display: block; text-decoration: none; white-space: nowrap; } nav a:hover, nav a:focus { color: var(--action-respond); } .header .mainnav { --padding-block: .675rem; --padding-inline: clamp(0.75rem, 0.833vw + 0.5rem, 1.25rem); --link-color: var(--text-color-light); --link-action-color: var(--brand-color4); } .header .mainnav ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: var(--bg-nav); } .header .mainnav ul ul { display: none; position: absolute; z-index: 5; } .header .mainnav li { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; } .header .mainnav a, .header .mainnav strong { padding: var(--padding-block) var(--padding-inline); color: var(--link-color); font-size: clamp(1.125rem, 0.625vw + 0.938rem, 1.5rem); } .header .mainnav a:hover, .header .mainnav a:focus { color: var(--brand-color2); } .header .mainnav li.kontakt { margin-left: 1rem; } .header .mainnav li.kontakt a { border: 1px solid #fff; border-radius: 4px; } .header .mainnav li.kontakt a:hover, .header .mainnav li.kontakt a:focus { background-color: #fff; color: var(--brand-color3); } .header .mainnav ul > li:hover > ul, .header .mainnav ul > li:focus > ul { display: block; } .header .mainnav .level_3 { left: 100%; top: 0; } .navicon .inside .lines { background-color: var(--text-color-light); } body.fullscreen_mobile_nav .mobile_navigation_wrapper .mod_navigation .level_1 { top: 40px; } body.fullscreen_mobile_nav .mobile_navigation_wrapper .mod_navigation .level_1 li { margin-top: 1.5rem; } body.fullscreen_mobile_nav .mobile_navigation_wrapper .mod_navigation .level_1 strong.active { color: var(--brand-color2); font-weight: var(--fw-b); } .btn { --button-bg__primary: var(--brand-color1); --button-bg__secondary: var(--brand-color2); --button-color__light: var(--text-color-light); --button-color: var(--text-color); --button-border__primary__color: var(--brand-color1); --button-border__secondary__color: var(--brand-color2); --button-border__width: 1px; --button-border__style: solid; --button-border__default: var(--button-border__width) var(--button-border__style) var(--button-bg__primary); --button-border__radius: 4px; --button-color-transition-time: .3s; } .btn { display: inline-block; } .btn a { display: block; padding: 0.5rem 2rem; text-align: center; border: var(--button-border__default); border-radius: var(--button-border__radius); text-decoration: none; background-color: none; color: var(--button-color); -webkit-transition: background-color var(--button-color-transition-time); transition: background-color var(--button-color-transition-time); font-size: clamp(1rem, 0.476vw + 0.821rem, 1.25rem); font-weight: var(--fw-n); } .btn a:hover, .btn a:focus { border: var(--button-border__default); border-color: var(--brand-color1-800, var(--grau-900)); color: var(--button-color); background-color: inherit; } .btn.btn-violet a { background-color: var(--brand-color2); color: var(--button-color__light); border-color: var(--brand-color2); } .btn.btn-violet a:hover, .btn.btn-violet a:focus { border-color: var(--brand-color3); background-color: var(--brand-color3); } .btn.btn-violet-skeleton a { background-color: transparent; color: var(--brand-color2); border-color: var(--brand-color2); } .btn.btn-violet-skeleton a:hover, .btn.btn-violet-skeleton a:focus { border-color: var(--brand-color3); background-color: var(--brand-color3); color: var(--button-color__light); } .btn.btn-blue a { background-color: var(--brand-color6); color: var(--button-color__light); border-color: var(--brand-color6); } .btn.btn-blue a:hover, .btn.btn-blue a:focus { border-color: var(--brand-color6-400); background-color: var(--brand-color6-400); } .btn.btn-blue-skeleton a { background-color: transparent; color: var(--brand-color6); border-color: var(--brand-color6); } .btn.btn-blue-skeleton a:hover, .btn.btn-blue-skeleton a:focus { color: var(--button-color__light); border-color: var(--brand-color6-400); background-color: var(--brand-color6-400); } .btn.btn-rose a { background-color: var(--brand-color3); color: var(--button-color__light); border-color: var(--brand-color3); } .btn.btn-rose a:hover, .btn.btn-rose a:focus { border-color: var(--brand-color2); background-color: var(--brand-color2); } .tc-highlight { color: var(--brand-color3); } .content-text:after { content: ""; display: table; clear: both; } @media screen and (min-width: 768px) { .content-text.media { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } } .content-text.media.media--above { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .content-text.media.media--above figure { margin-bottom: var(--space-default); } .content-text.media.media--right { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .content-text.media.media--right > h1, .content-text.media.media--right > h2, .content-text.media.media--right > h3, .content-text.media.media--right > h4, .content-text.media.media--right > h5, .content-text.media.media--right > h6 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .content-text.media.media--right .rte { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .content-text.media.media--right figure { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; margin-left: var(--space-default); } .content-text.media.media--below { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .content-text.media.media--below figure { margin-top: var(--space-default); } .content-text.media--left { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .content-text.media--left > h1, .content-text.media--left > h2, .content-text.media--left > h3, .content-text.media--left > h4, .content-text.media--left > h5, .content-text.media--left > h6 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .content-text.media--left .rte { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .content-text.media--left figure { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; margin-right: var(--space-default); } .content-list.ebook-agenda { counter-reset: kapitel; } .content-list.ebook-agenda ol { list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 1rem; margin: 0; padding: 0; } .content-list.ebook-agenda ol li { position: relative; font-size: 1.5rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 2rem; } .content-list.ebook-agenda ol li::before { counter-increment: kapitel; content: counter(kapitel); background-color: var(--brand-color3); color: var(--text-color-light); width: 4rem; height: 4rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-weight: var(--fw-b); font-size: 1.5rem; border-radius: 999em; -webkit-box-flex: 0; -ms-flex: 0 0 4rem; flex: 0 0 4rem; } @media screen and (min-width: 768px) { .content-list.ebook-agenda ol li::before { width: 5rem; height: 5rem; -webkit-box-flex: 0; -ms-flex: 0 0 5rem; flex: 0 0 5rem; font-size: 2rem; } } .content-gallery { margin-bottom: 2rem; } .content-gallery ul { --gap-default: .5rem; --gap-value: var(--gap-default); list-style-type: none; margin: 0; padding: 0; display: -ms-grid; display: grid; grid-gap: var(--gap-value); -ms-grid-columns: 1fr var(--gap-value) 1fr; grid-template-columns: 1fr 1fr; place-content: center; } @media screen and (min-width: 768px) { .content-gallery ul { -ms-grid-columns: 1fr var(--gap-value) 1fr var(--gap-value) 1fr; grid-template-columns: repeat(3, 1fr); } } @media screen and (min-width: 990px) { .content-gallery ul { --gap-value: calc(var(--gap-default) * 2); } } @media screen and (min-width: 1200px) { .content-gallery ul { --gap-value: calc(var(--gap-default) * 3); } } .content-gallery ul li { margin: 0; display: -ms-grid; display: grid; place-content: start; } .content-gallery img { border: 1px solid #93827b; } .content-gallery.no-border img { border: none; } @media screen and (min-width: 768px) { .content-gallery--cols-2 ul { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } } @media screen and (min-width: 768px) { .content-gallery--cols-3 ul { -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); } } @media screen and (min-width: 768px) { .content-gallery--cols-4 ul { -ms-grid-columns: (1fr)[4]; grid-template-columns: repeat(4, 1fr); } } @media screen and (min-width: 768px) { .content-gallery--cols-5 ul { -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); } } @media screen and (min-width: 1200px) { .content-gallery--cols-5 ul { -ms-grid-columns: (1fr)[5]; grid-template-columns: repeat(5, 1fr); } } @media screen and (min-width: 768px) { .content-gallery--cols-6 ul { -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); } } @media screen and (min-width: 1200px) { .content-gallery--cols-6 ul { -ms-grid-columns: (1fr)[6]; grid-template-columns: repeat(6, 1fr); } } @media screen and (min-width: 768px) { .content-gallery--cols-7 ul { -ms-grid-columns: (1fr)[4]; grid-template-columns: repeat(4, 1fr); } } @media screen and (min-width: 1200px) { .content-gallery--cols-7 ul { -ms-grid-columns: (1fr)[7]; grid-template-columns: repeat(7, 1fr); } } @media screen and (min-width: 768px) { .content-gallery--cols-8 ul { -ms-grid-columns: (1fr)[4]; grid-template-columns: repeat(4, 1fr); } } @media screen and (min-width: 1200px) { .content-gallery--cols-8 ul { -ms-grid-columns: (1fr)[8]; grid-template-columns: repeat(8, 1fr); } } @media screen and (min-width: 768px) { .content-gallery--cols-9 ul { -ms-grid-columns: (1fr)[5]; grid-template-columns: repeat(5, 1fr); } } @media screen and (min-width: 1200px) { .content-gallery--cols-9 ul { -ms-grid-columns: (1fr)[9]; grid-template-columns: repeat(9, 1fr); } } @media screen and (min-width: 768px) { .content-gallery--cols-10 ul { -ms-grid-columns: (1fr)[5]; grid-template-columns: repeat(5, 1fr); } } @media screen and (min-width: 1200px) { .content-gallery--cols-10 ul { -ms-grid-columns: (1fr)[10]; grid-template-columns: repeat(10, 1fr); } } @media screen and (min-width: 768px) { .content-gallery--cols-11 ul1 { -ms-grid-columns: (1fr)[6]; grid-template-columns: repeat(6, 1fr); } } @media screen and (min-width: 1200px) { .content-gallery--cols-11 ul1 { -ms-grid-columns: (1fr)[11]; grid-template-columns: repeat(11, 1fr); } } @media screen and (min-width: 768px) { .content-gallery--cols-12 ul { -ms-grid-columns: (1fr)[6]; grid-template-columns: repeat(6, 1fr); } } @media screen and (min-width: 1200px) { .content-gallery--cols-12 ul { -ms-grid-columns: (1fr)[12]; grid-template-columns: repeat(12, 1fr); } } .content-gallery.grid-gap-null ul { grid-gap: 0; } .content-gallery.gallery-with-caption figcaption { display: block; } .zwei-a-media .ce_form { /*Variable Werte für Grundstyle*/ --field-border-color: var(--brand-color3); --field-background: color-mix(in srgb, var(--brand-color3), white 90%); --field-color: var(--brand-color2); --label-color: var(--brand-color3-600); --field-alert-color: red; --field-valid-color: var(--text-color); --field-invalid-color: var(--grau-800); --field-border-radius: 4px; --field-border-width: 1px; --field-border-style: solid; --field-padding: 1rem; --checkbox-size: 20px; --abstand-widget: 1em; --color-rangeslider: var(--text-color); } .zwei-a-consulting .ce_form { /*Variable Werte für Grundstyle*/ --field-border-color: var(--brand-color1); --field-background: color-mix(in srgb, var(--brand-color1), white 70%); --field-color: var(--brand-color2); --label-color: var(--brand-color6); --field-alert-color: red; --field-valid-color: var(--text-color); --field-invalid-color: var(--grau-800); --field-border-radius: 4px; --field-border-width: 1px; --field-border-style: solid; --field-padding: 1rem; --checkbox-size: 20px; --abstand-widget: 1em; --color-rangeslider: var(--text-color); } /*Klassen für @extend*/ .fieldreset, .ce_form .widget-checkbox.dsgvo fieldset { border: none; padding: 0; } /*Basic Styles*/ .ce_form input, .ce_form label { display: block; } .ce_form label, .ce_form legend { color: var(--label-color); font-weight: var(--fw-sb); font-size: 1.125rem; } .ce_form label span.mandatory, .ce_form legend span.mandatory { color: var(--brand-color2); } .ce_form input, .ce_form textarea { width: 100%; border: var(--field-border-width) var(--field-border-style) var(--field-border-color); padding: var(--field-padding); background-color: var(--field-background); color: var(--field-colord); border-radius: var(--field-border-radius); } .ce_form input:focus, .ce_form textarea:focus { background: hsl(var(--field-background), calc(var(--l) - 2%)); } .ce_form input:valid { color: var(--field-valid-color); } .ce_form input:invalid { color: var(--field-invalid-color); } .ce_form fieldset { border: var(--field-border-width) var(--field-border-style) var(--field-border-color); } .ce_form .widget { margin-bottom: var(--abstand-widget); } .ce_form .widget-checkbox .checkbox_container > span { display: block; position: relative; } .ce_form .widget-checkbox .checkbox_container > span label { padding-left: 30px; } .ce_form .widget-checkbox .checkbox_container > span label::before { content: " "; display: block; position: absolute; left: 0; height: var(--checkbox-size); width: var(--checkbox-size); border: var(--field-border-width) var(--field-border-style) var(--field-border-color); background: var(--field-background); text-align: center; cursor: pointer; } .ce_form .widget-checkbox .checkbox_container > span input:checked ~ label::before { content: "✔ "; line-height: 1; font-size: var(--checkbox-size); } .ce_form .widget-checkbox.dsgvo legend { display: none; } .ce_form .widget-radio .radio_container > span { display: block; position: relative; } .ce_form .widget-radio .radio_container > span label { padding-left: 30px; } .ce_form .widget-radio .radio_container > span label::before { content: " "; display: block; position: absolute; left: 0; height: var(--checkbox-size); width: var(--checkbox-size); border-radius: 50%; border: var(--field-border-width) var(--field-border-style) var(--field-border-color); background: var(--field-background); text-align: center; cursor: pointer; } .ce_form .widget-radio .radio_container > span input:checked ~ label::before { content: "✔ "; line-height: 1; font-size: var(--checkbox-size); } .ce_form .widget-submit button { background-color: var(--brand-color2); color: var(--text-color-light); padding: 1rem 2rem; border: var(--field-border-width) var(--field-border-style) var(--brand-color2); border-radius: 4px; cursor: pointer; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .ce_form .widget-submit button:hover { background-color: var(--brand-color3); color: var(--text-color); border-color: var(--brand-color3); } .zwei-a-consulting .ce_form .widget-submit button { background-color: var(--brand-color6); color: var(--text-color-light); padding: 1rem 2rem; border: var(--field-border-width) var(--field-border-style) var(--brand-color6); border-radius: 4px; cursor: pointer; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .zwei-a-consulting .ce_form .widget-submit button:hover { background-color: var(--brand-color1); color: var(--text-color); border-color: var(--brand-color1); } .ce_form .widget-select, .ce_form .ctlg_form_field.select { position: relative; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .ce_form .widget-select::after, .ce_form .ctlg_form_field.select::after { content: "▼"; position: absolute; bottom: 0; right: 0; padding: 0.5rem 0.2em; cursor: pointer; pointer-events: none; -webkit-transition: 0.25s all ease; transition: 0.25s all ease; color: var(--field-colord); } .ce_form .widget-select label, .ce_form .ctlg_form_field.select label { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } .ce_form .widget-select select, .ce_form .ctlg_form_field.select select { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; width: 100%; padding: var(--field-padding); border: var(--field-border-width) var(--field-border-style) var(--field-border-color); background: var(--field-background); color: var(--field-colord); cursor: pointer; border-radius: var(--field-border-radius); -moz-appearance: none; -webkit-appearance: none; appearance: none; } .ce_form .widget-select select option, .ce_form .ctlg_form_field.select select option { padding: var(--field-padding); color: var(--field-colord); } .ce_form .widget-range .range { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; height: 25px; background: var(--field-background); outline: none; opacity: 0.7; -webkit-transition: 0.2s; -webkit-transition: opacity 0.2s; transition: opacity 0.2s; } .ce_form .widget-range .range:hover, .ce_form .widget-range .range:focus { opacity: 1; } .ce_form .widget-range .range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 25px; height: 25px; background: var(--color-rangeslider); cursor: pointer; } .ce_form .widget-range .range::-moz-range-thumb { width: 25px; height: 25px; background: var(--color-rangeslider); cursor: pointer; } [class^=icon] { height: 1.5rem; width: 1.5rem; display: inline-block; vertical-align: sub; } .content-icon .icon { color: var(--brand-color2); opacity: 0.2; width: 120px; height: 120px; } .text-on-image { --text-color: var(--text-color-light); --heading-color: var(--text-color-light); --action: var(--text-color-light); --image-darkness: 0; padding: 0; overflow: hidden; } .text-on-image .button { --button-border__color_default: var(--text-color-light); } .text-on-image img { width: 100%; height: auto; } .text-on-image .wrap-article { display: -ms-grid; display: grid; max-width: unset; -ms-grid-columns: 1fr; grid-template-columns: 1fr; grid-template-areas: "textonimage"; padding: 0; height: 100%; } .text-on-image .textonimage-content { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: textonimage; z-index: 3; -ms-grid-row-align: center; -ms-grid-column-align: end; place-self: center end; color: var(--text-color-light); max-width: 6ch; font-size: clamp(1.75rem, 7.5vw - 0.5rem, 6.25rem); font-weight: var(--fw-b); line-height: 1.1; margin-right: 15vw; } .text-on-image .textonimage-image { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: textonimage; z-index: 1; position: relative; } .text-on-image .textonimage-image:after { position: absolute; z-index: 2; background: rgba(0, 0, 0, var(--image-darkness)); content: ""; top: 0; left: 0; width: 100%; height: 100%; } .text-on-image--overlay { --image-darkness: .3; } .zwei-a-media .ce_form { /*Variable Werte für Grundstyle*/ --field-border-color: var(--brand-color3); --field-background: color-mix(in srgb, var(--brand-color3), white 90%); --field-color: var(--brand-color2); --label-color: var(--brand-color3-600); --field-alert-color: red; --field-valid-color: var(--text-color); --field-invalid-color: var(--grau-800); --field-border-radius: 4px; --field-border-width: 1px; --field-border-style: solid; --field-padding: 1rem; --checkbox-size: 20px; --abstand-widget: 1em; --color-rangeslider: var(--text-color); } .zwei-a-consulting .ce_form { /*Variable Werte für Grundstyle*/ --field-border-color: var(--brand-color1); --field-background: color-mix(in srgb, var(--brand-color1), white 70%); --field-color: var(--brand-color2); --label-color: var(--brand-color6); --field-alert-color: red; --field-valid-color: var(--text-color); --field-invalid-color: var(--grau-800); --field-border-radius: 4px; --field-border-width: 1px; --field-border-style: solid; --field-padding: 1rem; --checkbox-size: 20px; --abstand-widget: 1em; --color-rangeslider: var(--text-color); } /*Klassen für @extend*/ .fieldreset, .ce_form .widget-checkbox.dsgvo fieldset { border: none; padding: 0; } /*Basic Styles*/ .ce_form input, .ce_form label { display: block; } .ce_form label, .ce_form legend { color: var(--label-color); font-weight: var(--fw-sb); font-size: 1.125rem; } .ce_form label span.mandatory, .ce_form legend span.mandatory { color: var(--brand-color2); } .ce_form input, .ce_form textarea { width: 100%; border: var(--field-border-width) var(--field-border-style) var(--field-border-color); padding: var(--field-padding); background-color: var(--field-background); color: var(--field-colord); border-radius: var(--field-border-radius); } .ce_form input:focus, .ce_form textarea:focus { background: hsl(var(--field-background), calc(var(--l) - 2%)); } .ce_form input:valid { color: var(--field-valid-color); } .ce_form input:invalid { color: var(--field-invalid-color); } .ce_form fieldset { border: var(--field-border-width) var(--field-border-style) var(--field-border-color); } .ce_form .widget { margin-bottom: var(--abstand-widget); } .ce_form .widget-checkbox .checkbox_container > span { display: block; position: relative; } .ce_form .widget-checkbox .checkbox_container > span label { padding-left: 30px; } .ce_form .widget-checkbox .checkbox_container > span label::before { content: " "; display: block; position: absolute; left: 0; height: var(--checkbox-size); width: var(--checkbox-size); border: var(--field-border-width) var(--field-border-style) var(--field-border-color); background: var(--field-background); text-align: center; cursor: pointer; } .ce_form .widget-checkbox .checkbox_container > span input:checked ~ label::before { content: "✔ "; line-height: 1; font-size: var(--checkbox-size); } .ce_form .widget-checkbox.dsgvo legend { display: none; } .ce_form .widget-radio .radio_container > span { display: block; position: relative; } .ce_form .widget-radio .radio_container > span label { padding-left: 30px; } .ce_form .widget-radio .radio_container > span label::before { content: " "; display: block; position: absolute; left: 0; height: var(--checkbox-size); width: var(--checkbox-size); border-radius: 50%; border: var(--field-border-width) var(--field-border-style) var(--field-border-color); background: var(--field-background); text-align: center; cursor: pointer; } .ce_form .widget-radio .radio_container > span input:checked ~ label::before { content: "✔ "; line-height: 1; font-size: var(--checkbox-size); } .ce_form .widget-submit button { background-color: var(--brand-color2); color: var(--text-color-light); padding: 1rem 2rem; border: var(--field-border-width) var(--field-border-style) var(--brand-color2); border-radius: 4px; cursor: pointer; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .ce_form .widget-submit button:hover { background-color: var(--brand-color3); color: var(--text-color); border-color: var(--brand-color3); } .zwei-a-consulting .ce_form .widget-submit button { background-color: var(--brand-color6); color: var(--text-color-light); padding: 1rem 2rem; border: var(--field-border-width) var(--field-border-style) var(--brand-color6); border-radius: 4px; cursor: pointer; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .zwei-a-consulting .ce_form .widget-submit button:hover { background-color: var(--brand-color1); color: var(--text-color); border-color: var(--brand-color1); } .ce_form .widget-select, .ce_form .ctlg_form_field.select { position: relative; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .ce_form .widget-select::after, .ce_form .ctlg_form_field.select::after { content: "▼"; position: absolute; bottom: 0; right: 0; padding: 0.5rem 0.2em; cursor: pointer; pointer-events: none; -webkit-transition: 0.25s all ease; transition: 0.25s all ease; color: var(--field-colord); } .ce_form .widget-select label, .ce_form .ctlg_form_field.select label { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } .ce_form .widget-select select, .ce_form .ctlg_form_field.select select { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; width: 100%; padding: var(--field-padding); border: var(--field-border-width) var(--field-border-style) var(--field-border-color); background: var(--field-background); color: var(--field-colord); cursor: pointer; border-radius: var(--field-border-radius); -moz-appearance: none; -webkit-appearance: none; appearance: none; } .ce_form .widget-select select option, .ce_form .ctlg_form_field.select select option { padding: var(--field-padding); color: var(--field-colord); } .ce_form .widget-range .range { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; height: 25px; background: var(--field-background); outline: none; opacity: 0.7; -webkit-transition: 0.2s; -webkit-transition: opacity 0.2s; transition: opacity 0.2s; } .ce_form .widget-range .range:hover, .ce_form .widget-range .range:focus { opacity: 1; } .ce_form .widget-range .range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 25px; height: 25px; background: var(--color-rangeslider); cursor: pointer; } .ce_form .widget-range .range::-moz-range-thumb { width: 25px; height: 25px; background: var(--color-rangeslider); cursor: pointer; } .grid-collage { --gapvalue: 1rem; margin-bottom: calc(var(--gapvalue) * 4); display: -ms-grid; display: grid; -ms-grid-columns: 2fr 2fr var(--gapvalue) 2fr 1fr; grid-template-columns: 2fr 2fr var(--gapvalue) 2fr 1fr; -ms-grid-rows: 1fr calc(var(--gapvalue) * 2) 1fr var(--gapvalue) var(--gapvalue) var(--gapvalue) 1fr calc(var(--gapvalue) * 2); grid-template-rows: 1fr calc(var(--gapvalue) * 2) 1fr var(--gapvalue) var(--gapvalue) var(--gapvalue) 1fr calc(var(--gapvalue) * 2); grid-template-areas: "text text text text text" ". . . image2 ." "image1 image1 . image2 ." "image1 image1 . . ." "image1 image1 . image4 image4" ". . . image4 image4" ". image3 . image4 image4" ". . . image4 image4"; } @media screen and (min-width: 768px) { .grid-collage { --gapvalue: 1.5rem; -ms-grid-columns: 2fr 2fr 2fr var(--gapvalue) 2fr 1fr; grid-template-columns: 2fr 2fr 2fr var(--gapvalue) 2fr 1fr; -ms-grid-rows: calc(var(--gapvalue) * 2) 1fr var(--gapvalue) var(--gapvalue) var(--gapvalue) 1fr calc(var(--gapvalue) * 2); grid-template-rows: calc(var(--gapvalue) * 2) 1fr var(--gapvalue) var(--gapvalue) var(--gapvalue) 1fr calc(var(--gapvalue) * 2); grid-template-areas: ". . . . image2 ." ". image1 image1 . image2 ." ". image1 image1 . . ." ". image1 image1 . image4 image4" ". . . . image4 image4" " text text image3 . image4 image4" ". . . . image4 image4"; } } @media screen and (min-width: 1200px) { .grid-collage { --gapvalue: 2rem; } } .grid-collage .collage-text { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 5; grid-area: text; place-content: center start; } .grid-collage .collage-text h2 { color: var(--brand-color3); } .grid-collage .collage-1 { -ms-grid-row: 3; -ms-grid-row-span: 3; -ms-grid-column: 1; -ms-grid-column-span: 2; grid-area: image1; } .grid-collage .collage-2 { -ms-grid-row: 2; -ms-grid-row-span: 2; -ms-grid-column: 4; grid-area: image2; } .grid-collage .collage-3 { -ms-grid-row: 7; -ms-grid-column: 2; grid-area: image3; } .grid-collage .collage-4 { -ms-grid-row: 5; -ms-grid-row-span: 4; -ms-grid-column: 4; -ms-grid-column-span: 2; grid-area: image4; } @media screen and (min-width: 768px){ .grid-collage .collage-text { -ms-grid-row: 6; -ms-grid-column: 1; -ms-grid-column-span: 2; } .grid-collage .collage-1 { -ms-grid-row: 2; -ms-grid-row-span: 3; -ms-grid-column: 2; -ms-grid-column-span: 2; } .grid-collage .collage-2 { -ms-grid-row: 1; -ms-grid-row-span: 2; -ms-grid-column: 5; } .grid-collage .collage-3 { -ms-grid-row: 6; -ms-grid-column: 3; } .grid-collage .collage-4 { -ms-grid-row: 4; -ms-grid-row-span: 4; -ms-grid-column: 5; -ms-grid-column-span: 2; } } .grid-collage .collage-1 figure, .grid-collage .collage-2 figure, .grid-collage .collage-3 figure, .grid-collage .collage-4 figure { width: 100%; height: 100%; } .grid-collage .collage-1 img, .grid-collage .collage-2 img, .grid-collage .collage-3 img, .grid-collage .collage-4 img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .swiper-container { --swiper-theme-color: var(--brand-color3); --swiper-pagination-color: var(--brand-color3); --swiper-navigation-color: var(--brand-color3); --swiper-bg-color: var(--article-bg-color); --swiper-gradient-color-1: color-mix(in srgb, var(--swiper-bg-color) 100%, transparent); --swiper-gradient-color-0: color-mix(in srgb, var(--swiper-bg-color) 0%, transparent); } .swiper-wrapper { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 2rem 0; position: relative; } .swiper-button-prev { left: calc(50% - 50px); bottom: 0; width: 2rem; height: 100%; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .swiper-button-prev::after { opacity: 0.5; -webkit-transition: opacity 0.2s linear; transition: opacity 0.2s linear; } .swiper-button-prev:hover::after, .swiper-button-prev:focus::after { opacity: 1; } .swiper-button-next { right: calc(50% - 50px); bottom: 0; width: 2rem; height: 100%; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .swiper-button-next::after { opacity: 0.5; -webkit-transition: opacity 0.2s linear; transition: opacity 0.2s linear; } .swiper-button-next:hover::after, .swiper-button-next:focus::after { opacity: 1; } .mod_recommendationlist .layout_container { background-color: #F4F2F0; padding: 1.5rem; border-radius: 0.5rem; } .mod_recommendationlist .rating-container { text-align: center; margin-top: -3.5rem; } .mod_recommendationlist .rating { font-size: 2rem; color: var(--brand-color3); display: inline-block; background-color: #F4F2F0; padding: 0.5rem 1.5rem; border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; } .mod_recommendationlist .author { font-weight: var(--fw-sb); } .mod_recommendationlist .info { text-align: center; color: var(--brand-color2); margin-bottom: 1rem; } .mod_recommendationlist h3 { font-size: 1.375rem; font-weight: bold; line-height: 1.375; margin-block: 0.75rem; color: var(--brand-color2); } .mod_recommendationlist .text { text-align: center; }