{"version":3,"sources":["webpack:///./src/components/PageBuilder/SplitColumns.vue?9eb2","webpack:///./src/components/PageBuilder/SplitColumns.vue","webpack:///src/components/PageBuilder/SplitColumns.vue","webpack:///./src/components/PageBuilder/SplitColumns.vue?387e","webpack:///./src/components/PageBuilder/SplitColumns.vue?471b"],"names":["render","_vm","this","_c","_self","staticClass","style","background","cmsBlock","backgroundColor","class","odd","contentLeft","clip","clipImage","_l","Object","entries","srcsets","format","set","originalFormat","attrs","slice","_e","Image","data","attributes","alternativeText","white_typo","whiteTextColor","_v","_s","localizeAlt","TextContent","Button","isInternalLink","staticRenderFns","name","props","computed","getImageSrcsets","hasWebp","_","component"],"mappings":"2IAAA,W,yCCAA,IAAIA,EAAS,WAAkB,IAAIC,EAAIC,KAAKC,EAAGF,EAAIG,MAAMD,GAAG,OAAOA,EAAG,MAAM,CAACE,YAAY,sBAAsBC,MAAO,CAAEC,WAAYN,EAAIO,SAASC,kBAAoB,CAACN,EAAG,MAAM,CAACE,YAAY,iBAAiB,CAACF,EAAG,MAAM,CAACE,YAAY,OAAOK,MAAM,CAAEC,IAAKV,EAAIO,SAASI,cAAe,CAACT,EAAG,MAAM,CAACE,YAAY,MAAMK,MAAM,CAAEG,KAAMZ,EAAIO,SAASM,YAAa,CAACX,EAAG,UAAU,CAACF,EAAIc,GAAIC,OAAOC,QAAQhB,EAAIiB,UAAU,UAAUC,EAAQC,IAAM,MAAO,CAAED,IAAWlB,EAAIoB,eAAgBlB,EAAG,SAAS,CAACmB,MAAM,CAAC,OAASF,EAAI,MAAQ,kCAAkC,KAAO,SAAWD,EAAOI,MAAM,MAAMtB,EAAIuB,SAAQrB,EAAG,MAAM,CAACmB,MAAM,CAAC,QAAU,OAAO,SAAW,QAAQ,OAASrB,EAAIiB,QAAQjB,EAAIoB,gBAAgB,KAAO,SAAWpB,EAAIoB,eAAeE,MAAM,GAAG,MAAQ,kCAAkC,IAAMtB,EAAIO,SAASiB,MAAMC,KAAKC,WAAWC,oBAAoB,KAAKzB,EAAG,MAAM,CAACE,YAAY,UAAUK,MAAM,CAAEmB,WAAY5B,EAAIO,SAASsB,iBAAkB,CAAC3B,EAAG,KAAK,CAACE,YAAY,SAAS,CAACJ,EAAI8B,GAAG9B,EAAI+B,GAAG/B,EAAIgC,YAAYhC,EAAIO,SAAS0B,YAAa,aAAa/B,EAAG,MAAM,CAACE,YAAY,gBAAgB,CAACJ,EAAI8B,GAAG9B,EAAI+B,GAAG/B,EAAIgC,YAAYhC,EAAIO,SAAS0B,YAAa,SAAS,OAAQjC,EAAIgC,YAAYhC,EAAIO,SAAS2B,OAAQ,WAAalC,EAAImC,eAAenC,EAAIgC,YAAYhC,EAAIO,SAAS2B,OAAQ,SAAUhC,EAAG,IAAI,CAACE,YAAY,OAAOiB,MAAM,CAAC,KAAOrB,EAAIgC,YAAYhC,EAAIO,SAAS2B,OAAQ,UAAU,CAAClC,EAAI8B,GAAG9B,EAAI+B,GAAG/B,EAAIgC,YAAYhC,EAAIO,SAAS2B,OAAQ,aAAalC,EAAIuB,KAAMvB,EAAIgC,YAAYhC,EAAIO,SAAS2B,OAAQ,UAAYlC,EAAImC,eAAenC,EAAIgC,YAAYhC,EAAIO,SAAS2B,OAAQ,SAAUhC,EAAG,cAAc,CAACE,YAAY,OAAOiB,MAAM,CAAC,GAAKrB,EAAIgC,YAAYhC,EAAIO,SAAS2B,OAAQ,UAAU,CAAClC,EAAI8B,GAAG9B,EAAI+B,GAAG/B,EAAIgC,YAAYhC,EAAIO,SAAS2B,OAAQ,aAAalC,EAAIuB,MAAM,UAE1pDa,EAAkB,GCiCP,GACfC,KAAA,eAEAC,MAAA,CACA,YAGAC,SAAA,CACAtB,UACA,YAAAuB,gBAAA,KAAAjC,SAAAiB,MAAAC,KAAAC,aAGAe,UACA,aAAAxB,QAAA,UAGAG,iBACA,UAAAF,EAAAwB,KAAA3B,OAAAC,QAAA,KAAAC,SACA,aAAAC,EACA,OAAAA,EAGA,eCzDoW,I,wBCQhWyB,EAAY,eACd,EACA5C,EACAqC,GACA,EACA,KACA,WACA,MAIa,aAAAO,E","file":"js/chunk-7f83a319.cb18edab.js","sourcesContent":["export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--9-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--9-oneOf-1-2!../../../node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./SplitColumns.vue?vue&type=style&index=0&id=ff23a470&prod&lang=scss&scoped=true\"","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{staticClass:\"component-container\",style:({ background: _vm.cmsBlock.backgroundColor })},[_c('div',{staticClass:\"split-columns\"},[_c('div',{staticClass:\"item\",class:{ odd: _vm.cmsBlock.contentLeft }},[_c('div',{staticClass:\"img\",class:{ clip: _vm.cmsBlock.clipImage }},[_c('picture',[_vm._l((Object.entries(_vm.srcsets)),function([format, set]){return [(format !== _vm.originalFormat)?_c('source',{attrs:{\"srcset\":set,\"sizes\":\"(max-width: 1100px) 100vw, 50vw\",\"type\":'image/' + format.slice(1)}}):_vm._e()]}),_c('img',{attrs:{\"loading\":\"lazy\",\"decoding\":\"async\",\"srcset\":_vm.srcsets[_vm.originalFormat],\"type\":'image/' + _vm.originalFormat.slice(1),\"sizes\":\"(max-width: 1100px) 100vw, 50vw\",\"alt\":_vm.cmsBlock.Image.data.attributes.alternativeText}})],2)]),_c('div',{staticClass:\"content\",class:{ white_typo: _vm.cmsBlock.whiteTextColor }},[_c('h3',{staticClass:\"title\"},[_vm._v(_vm._s(_vm.localizeAlt(_vm.cmsBlock.TextContent, 'title')))]),_c('div',{staticClass:\"content-text\"},[_vm._v(_vm._s(_vm.localizeAlt(_vm.cmsBlock.TextContent, 'text'))+\" \")]),(_vm.localizeAlt(_vm.cmsBlock.Button, 'title') && !_vm.isInternalLink(_vm.localizeAlt(_vm.cmsBlock.Button, 'link')))?_c('a',{staticClass:\"link\",attrs:{\"href\":_vm.localizeAlt(_vm.cmsBlock.Button, 'link')}},[_vm._v(_vm._s(_vm.localizeAlt(_vm.cmsBlock.Button, 'title')))]):_vm._e(),(_vm.localizeAlt(_vm.cmsBlock.Button, 'title') && _vm.isInternalLink(_vm.localizeAlt(_vm.cmsBlock.Button, 'link')))?_c('router-link',{staticClass:\"link\",attrs:{\"to\":_vm.localizeAlt(_vm.cmsBlock.Button, 'link')}},[_vm._v(_vm._s(_vm.localizeAlt(_vm.cmsBlock.Button, 'title')))]):_vm._e()],1)])])])\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n    <div class=\"component-container\" :style=\"{ background: cmsBlock.backgroundColor }\">\n        <div class=\"split-columns\">\n            <div class=\"item\" :class=\"{ odd: cmsBlock.contentLeft }\">\n\n                <div class=\"img\" :class=\"{ clip: cmsBlock.clipImage }\">\n                    <picture>\n                        <template v-for=\"[format, set] of Object.entries(srcsets)\">\n                            <source v-if=\"format !== originalFormat\" :srcset=\"set\" sizes=\"(max-width: 1100px) 100vw, 50vw\"\n                                :type=\"'image/' + format.slice(1)\">\n                        </template>\n                        <img loading=\"lazy\" decoding=\"async\" :srcset=\"srcsets[originalFormat]\"\n                            :type=\"'image/' + originalFormat.slice(1)\" sizes=\"(max-width: 1100px) 100vw, 50vw\"\n                            :alt=\"cmsBlock.Image.data.attributes.alternativeText\">\n                    </picture>\n                </div>\n\n                <div class=\"content\" :class=\"{ white_typo: cmsBlock.whiteTextColor }\">\n                    <h3 class=\"title\">{{ localizeAlt(cmsBlock.TextContent, 'title') }}</h3>\n                    <div class=\"content-text\">{{ localizeAlt(cmsBlock.TextContent, 'text') }} </div>\n                    <a v-if=\"localizeAlt(cmsBlock.Button, 'title') && !isInternalLink(localizeAlt(cmsBlock.Button, 'link'))\"\n                        class=\"link\" :href=\"localizeAlt(cmsBlock.Button, 'link')\">{{ localizeAlt(cmsBlock.Button, 'title')\n                        }}</a>\n                    <router-link\n                        v-if=\"localizeAlt(cmsBlock.Button, 'title') && isInternalLink(localizeAlt(cmsBlock.Button, 'link'))\"\n                        class=\"link\" :to=\"localizeAlt(cmsBlock.Button, 'link')\">{{ localizeAlt(cmsBlock.Button, 'title')\n                        }}</router-link>\n                </div>\n\n            </div>\n        </div>\n    </div>\n</template>\n\n<script>\nexport default {\n    name: 'SplitColumns',\n\n    props: [\n        'cmsBlock'\n    ],\n\n    computed: {\n        srcsets() {\n            return this.getImageSrcsets(this.cmsBlock.Image.data.attributes)\n        },\n\n        hasWebp() {\n            return this.srcsets['.webp'] ? true : false\n        },\n\n        originalFormat() {\n            for (const [format, _] of Object.entries(this.srcsets)) {\n                if (format !== '.webp') {\n                    return format\n                }\n            }\n            return null\n        },\n\n\n    }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.component-container {\n\n    .split-columns {\n        color: $timberGreen;\n        max-width: $container-width;\n        margin: 0 auto;\n\n        .white_typo {\n            .content-text {\n                color: white;\n            }\n\n            h3 {\n                color: white;\n            }\n\n            a {\n                border-color: white;\n                color: white;\n            }\n        }\n\n        .item {\n            width: 100%;\n            display: flex;\n            max-width: unset;\n            padding: unset;\n\n            @include breakpoint('mobile') {\n                flex-direction: column;\n                height: unset;\n            }\n\n\n            .img {\n                width: 48%;\n                max-height: 340px;\n                position: relative;\n\n                @include breakpoint('mobile') {\n                    max-height: unset;\n                    width: calc(100% - 48px);\n                    margin-right: 24px;\n                    margin-left: 24px;\n                }\n\n                img {\n                    object-fit: cover;\n                    object-position: 50% 50%;\n                    width: 100%;\n                    height: 100%;\n                }\n\n                &.clip {\n                    clip-path: polygon(0% 0%, 100% 0%, calc(100% - 96px) 100%, 0% 100%);\n\n                    @include breakpoint('mobile') {\n                        max-height: 200px;\n                        width: calc(100% - 40px);\n                        margin-right: 40px;\n                        margin-left: unset;\n                        clip-path: polygon(0% 0%, 100% 0%, calc(100% - 62px) 100%, 0% 100%);\n                    }\n                }\n            }\n\n            &.odd {\n                .img {\n                    order: 1;\n\n                    @include breakpoint('mobile') {\n                        order: 0;\n                        max-height: unset;\n                        width: calc(100% - 48px);\n                        margin-right: 24px;\n                        margin-left: 24px;\n                    }\n\n                    &.clip {\n                        clip-path: polygon(96px 0%, 100% 0%, 100% 100%, 0% 100%);\n\n                        @include breakpoint('mobile') {\n                            order: 0;\n                            max-height: 200px;\n                            width: calc(100% - 24px);\n                            margin-right: unset;\n                            margin-left: 24px;\n                            clip-path: polygon(62px 0%, 100% 0%, 100% 100%, 0% 100%);\n                        }\n                    }\n\n                }\n\n                .content {\n                    order: 0;\n\n                    @include breakpoint('mobile') {\n                        order: 1;\n                    }\n                }\n            }\n\n            &.full {\n                background-color: white;\n\n                .content {\n                    width: 100%;\n\n                    @include breakpoint('mobile') {\n                        width: calc(100% - 80px);\n                    }\n                }\n            }\n\n            .content {\n                display: flex;\n                flex-direction: column;\n                width: calc(52% - 48px);\n                padding: 24px 24px;\n                justify-content: center;\n                text-align: end;\n\n                @include breakpoint('mobile') {\n                    width: calc(100% - 48px);\n                }\n\n                .title {\n                    text-align: start;\n                    line-height: 1.3em;\n                    margin: 0 0 10px 0;\n                    display: -webkit-box;\n                    -webkit-line-clamp: 2;\n                    -webkit-box-orient: vertical;\n                }\n\n                .content-text {\n                    color: $timberGreen;\n                    text-align: start;\n                    margin-bottom: 24px;\n                    display: -webkit-box;\n                    -webkit-line-clamp: 3;\n                }\n\n                .link {\n                    border: 2px solid $timberGreen; // BUTTON FARBE\n                    color: $timberGreen; // FRONT FARBE\n                    padding: 10px 30px;\n                    align-self: flex-start;\n                    cursor: pointer;\n\n                    a {\n                        color: inherit;\n                    }\n                }\n\n                h3.title {\n                    color: $timberGreen;\n                    text-align: start;\n\n                    @include breakpoint('mobile') {\n                        //font-size: 32px !important;\n                        -webkit-line-clamp: unset !important;\n                        -webkit-box-orient: unset !important;\n                    }\n                }\n            }\n        }\n    }\n\n\n\n\n}\n</style>\n","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./SplitColumns.vue?vue&type=script&lang=js\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./SplitColumns.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./SplitColumns.vue?vue&type=template&id=ff23a470&scoped=true\"\nimport script from \"./SplitColumns.vue?vue&type=script&lang=js\"\nexport * from \"./SplitColumns.vue?vue&type=script&lang=js\"\nimport style0 from \"./SplitColumns.vue?vue&type=style&index=0&id=ff23a470&prod&lang=scss&scoped=true\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"ff23a470\",\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}