@import "../../variables-layout"; @import "../../../_vendor/node_modules/bootstrap/scss/functions"; @import "../../../_vendor/node_modules/bootstrap/scss/variables"; @import "../../../_vendor/node_modules/bootstrap/scss/mixins"; @import "../../scss-variables"; @import "../../_theme/variables-layout"; html body { .ce_rsce_twocolimagewall { position: relative; &.no-spacing { margin-bottom: 0px !important; margin-top: -$basic-gutter !important; } .container { padding: 0 1rem } .content--col { .kachel-column-width--indicator { left: 0; top: 0; bottom: 0; right: 0; .column-kachel--inner.with-hover-content { margin: 0 0 0 auto; } } } .image--col { .kachel-column-width--indicator { right: 0; .column-kachel--inner.with-hover-content { margin: 0 auto 0 0; } } } .reverse-cols { .content--col { .kachel-column-width--indicator { right: 0; } } .image--col { .kachel-column-width--indicator { left: 0; } } } .boxed-headline { text-align: center; margin-left: auto; margin-right: auto; margin-top: -1.5rem; @include media-breakpoint-up(md) { white-space: nowrap; margin-top: 0rem; position: absolute; transform: translate(-50%, -50%); z-index: 15; top: 0; } & + .content-col--inner { @include media-breakpoint-up(md) { //padding-top: rfs-value(140px); warum? } } .headline--wrapper { padding: 1.25rem 2rem; background-color: $body-bg; box-shadow: $box-shadow; > * { margin-bottom: 0px; color: var(--bs-body-color); //@include font-size(22px); font-weight: $font-weight-normal; } .ce--subline { margin-top: 0.5rem; line-height: 1.25; } } } .kachel-column-width--indicator { height: 100%; max-width: none; @include media-breakpoint-up(md) { position: absolute; } .column-kachel--wrapper { transition: all 0.5s ease; @include media-breakpoint-up(md) { width: rfs-value(200px); height: rfs-value(200px); position: absolute; } @include media-breakpoint-down(md) { width: 100%; height: 100%; } .column--kachel { height: 100%; width: 100%; display: flex; flex-flow: column wrap; padding: 1.5rem; transition: all 0.5s ease; overflow: hidden; @include media-breakpoint-up(md) { width: rfs-value(200px); height: rfs-value(200px); position: absolute; } > a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .column-kachel--inner { @include media-breakpoint-up(md) { max-width: rfs-value(600px); } transition: all 0.5s ease; > span { display: block; @include font-size(22px); } @include media-breakpoint-down(md) { text-align: left !important; } .kachel-hover--content { transition: all 0.5s ease; @include media-breakpoint-up(md) { opacity: 0; height: 0px; overflow: hidden; } .kachel--long-text { margin-top: 2rem; margin-bottom: 2rem; } .kachel--more-button { position: relative; z-index: 5; margin-top: 2rem; } } } } } &.expandable:hover { .column-kachel--wrapper { width: 100%; height: 100%; .column--kachel { width: 100%; height: 100%; .column-kachel--inner { text-align: left !important; @include media-breakpoint-up(md) { padding: 2.5rem; } .kachel-hover--content { opacity: 1; height: auto; overflow: visible; } } } } } } .ce--inner { .ce--imagetextwall--outer { overflow: hidden; &.with-spacing { margin-bottom: $mini-spacing; } .ce--imagetextwall { min-height: rfs-value(500px); position: relative; transition: background-color 0.3s ease-in-out; &.with-boxed-image { margin-top: calc($basic-gutter + 45px); } &.not-as-bg { .image-col--inner { display: flex; flex-flow: column wrap; justify-content: center; text-align: center; .image--wrapper { max-height: 100%; img { max-height: 100%; width: auto; max-width: 95%; height: auto; } } } &.with-border { .image-col--inner .image--wrapper { //max-height: calc(100% + 4rem); } .content--col, .image--col { //padding-top: 2rem; //padding-bottom: 2rem; } } > .container > .row > .content--col > .content-col--inner { //padding-left: 0px; //padding-right: 0px; } } &.lazy { .content--col { &.with-bg { .content-col--inner { padding-left: 1.75rem !important; padding-right: 1.75rem; } } } } .content--col { background-color: $body-bg; transition: background-color 0.3s ease-in-out; @include media-breakpoint-down(md) { position: relative; } &.with-bg { .content-col--inner { @include media-breakpoint-up(md) { //padding-left: 1.75rem !important; } @include media-breakpoint-up(lg) { //padding-left: 0rem !important; } } } .content-col--image { width: 100%; height: 100%; max-width: none; left: 0; top: 0; transition: all 0.3s ease-in-out; //min-height: rfs-value(200px); @include media-breakpoint-up(md) { position: absolute; } } } div.row:not(.formbody) { //position: relative; margin: 0px; @include media-breakpoint-down(md) { &:not(.align-items-center) { flex-flow: column-reverse; } } > div { padding-left: 0px; padding-right: 0px; } &:not(.only-text--right-col) { .image--col, .content--col { @include media-breakpoint-up(md) { //min-height: rfs-value(425px); } @include media-breakpoint-up(xl) { //min-height: rfs-value(500px); } } } &.only-text--right-col { @include media-breakpoint-up(md) { align-items: flex-start !important; .image--col, .content--col { @include padding(75px 0px); .content-col--inner { padding-top: 0px; padding-bottom: 0px; } .image-col--extra-text { padding-left: 1.75rem; position: relative; } } .image-col--inner { background-color: transparent; } .content--col { background-color: transparent; } } } &.reverse-cols { .boxed-headline { @include media-breakpoint-up(md) { right: 25%; } } .content--col.darkened-content::before { right: 0; left: auto; } @include media-breakpoint-up(md) { flex-flow: row-reverse; .content--col { .content-col--inner { padding: 3.5rem 0rem 3.5rem 5vw; } .content-col--image, .kachel-column-width--indicator { left: auto; right: 0; } &:hover .content-col--image { right: -2.5%; left: auto !important; } & + .image--col { &:hover { .image-col--inner:not(.with-iframe):not(.with-video) { left: -2.5%; right: auto !important; } } } } .image--col { .image-col--inner { left: 0; } } } } &:not(.reverse-cols) { .image--col .image-col--inner:not(.with-iframe) { right: 0; } } .image--col { //z-index: 5; @include media-breakpoint-down(md) { margin-top: 1.5rem; position: relative; > div:not(.boxed-headline) { min-height: rfs-value(200px); } } &.with-video { min-height: 0px !important; .image-col--inner { width: auto !important; position: relative; height: auto; } } .image-col--inner { //min-height: rfs-value(200px); transition: all 0.3s ease-in-out; //background-color: $body-bg; //right: 0; @include media-breakpoint-up(md) { height: 100%; position: absolute; top: 0; } .image--wrapper { //background-color: $body-bg; } iframe, embed { width: 100%; @include media-breakpoint-up(md) { //width: 70%; display: block; margin: 0 0 0 auto; height: 100%; } @include media-breakpoint-up(lg) { //width: 85%; } } } } .content--col { z-index: 1; //z-index: 10; //position: relative; flex-flow: column wrap; @include media-breakpoint-up(md) { flex-flow: row wrap; } &.darkened-content { &:before { content: ""; height: 100%; background-color: rgba(0, 0, 0, 0.5); position: absolute; left: 0; } } @include media-breakpoint-up(md) { &.col-md-6 { &:hover .content-col--image { height: 102.5%; width: calc(50vw + 2.5%) !important; left: -2.5%; } &.darkened-content { &:before { width: 50vw; } } .kachel-column-width--indicator, .content-col--image { width: 50vw; } & + .image--col { .kachel-column-width--indicator { width: 50vw; } &:hover .image-col--inner:not(.with-iframe):not(.with-video) { height: 102.5%; width: calc(50vw + 2.5%) !important; right: -2.5%; } .image-col--inner, .kachel-column-width--indicator { width: 50vw; } } &.spacing-between { &.darkened-content { &:before { width: calc(50vw - #{$mini-spacing}); } } & + .image--col { &:hover .image-col--inner:not(.with-iframe):not(.with-video) { width: calc(50vw + 2.5% - #{$mini-spacing}) !important; right: -2.5%; } .image-col--inner, .kachel-column-width--indicator { width: calc(50vw - #{$mini-spacing}); } } } } } @include media-breakpoint-up(lg) { &.col-lg-9 { &:hover .content-col--image { height: 102.5%; width: calc(75vw + 2.5%) !important; left: -2.5%; } &.darkened-content { &:before { width: 75vw; } } .kachel-column-width--indicator, .content-col--image { width: 75vw; } & + .image--col { &:hover .image-col--inner:not(.with-iframe):not(.with-video) { height: 102.5%; width: calc(25vw + 2.5%) !important; right: -2.5%; } .image-col--inner, .kachel-column-width--indicator { width: 25vw; } } &.spacing-between { & + .image--col { &:hover .image-col--inner:not(.with-iframe):not(.with-video) { width: calc(25vw + 2.5% - #{$mini-spacing}) !important; right: -2.5%; } .image-col--inner, .kachel-column-width--indicator { width: calc(25vw - #{$mini-spacing}); } } } } &.col-lg-8 { &:hover .content-col--image { height: 102.5%; width: calc(66.6666vw + 2.5%) !important; left: -2.5%; } &.darkened-content { &:before { width: 66.6666vw; } } .kachel-column-width--indicator, .content-col--image { width: 66.6666vw; } & + .image--col { &:hover .image-col--inner:not(.with-iframe):not(.with-video) { height: 102.5%; width: calc(33.333vw + 2.5%) !important; right: -2.5%; } .image-col--inner, .kachel-column-width--indicator { width: 33.333vw; } } &.spacing-between { & + .image--col { &:hover .image-col--inner:not(.with-iframe):not(.with-video) { width: calc( 33.333vw + 2.5% - #{$mini-spacing} ) !important; right: -2.5%; } .image-col--inner, .kachel-column-width--indicator { width: calc(33.333vw - #{$mini-spacing}); } } } } &.col-lg-7 { &:hover .content-col--image { height: 102.5%; width: calc(58.333vw + 2.5%) !important; left: -2.5%; } &.darkened-content { &:before { width: 58.333vw; } } .kachel-column-width--indicator, .content-col--image { width: 58.333vw; } & + .image--col { &:hover .image-col--inner:not(.with-iframe):not(.with-video) { height: 102.5%; width: calc(41.777vw + 2.5%) !important; right: -2.5%; } .image-col--inner, .kachel-column-width--indicator { width: 41.777vw; } } &.spacing-between { & + .image--col { &:hover .image-col--inner:not(.with-iframe):not(.with-video) { width: calc( 41.777vw + 2.5% - #{$mini-spacing} ) !important; right: -2.5%; } .image-col--inner, .kachel-column-width--indicator { width: calc(41.777vw - #{$mini-spacing}); } } } } &.col-lg-5 { &:hover .content-col--image { height: 102.5%; width: calc(41.666vw + 2.5%) !important; left: -2.5%; } &.darkened-content { &:before { width: 41.666vw; } } .kachel-column-width--indicator, .content-col--image { width: 41.666vw; } & + .image--col { &:hover .image-col--inner:not(.with-iframe):not(.with-video) { height: 102.5%; width: calc(58.444vw + 2.5%) !important; right: -2.5%; } .image-col--inner, .kachel-column-width--indicator { width: 58.444vw; } } &.spacing-between { & + .image--col { &:hover .image-col--inner:not(.with-iframe):not(.with-video) { width: calc( 58.444vw + 2.5% - #{$mini-spacing} ) !important; right: -2.5%; } .image-col--inner, .kachel-column-width--indicator { width: calc(58.444vw - #{$mini-spacing}); } } } } &.col-lg-4 { &:hover .content-col--image { height: 102.5%; width: calc(33.333vw + 2.5%) !important; left: -2.5%; } &.darkened-content { &:before { width: 33.333vw; } } .kachel-column-width--indicator, .content-col--image { width: 33.333vw; } & + .image--col { &:hover .image-col--inner:not(.with-iframe):not(.with-video) { height: 102.5%; width: calc(66.666vw + 2.5%) !important; right: -2.5%; } .image-col--inner, .kachel-column-width--indicator { width: 62vw; } } &.spacing-between { & + .image--col { &:hover .image-col--inner:not(.with-iframe):not(.with-video) { width: calc( 66.666vw + 2.5% - #{$mini-spacing} ) !important; right: -2.5%; } .image-col--inner, .kachel-column-width--indicator { width: calc(66.666vw - #{$mini-spacing}); } } } } } .content-col--inner { padding: 1.5rem 1.75rem 1rem 0; position: relative; z-index: 7; width: 100%; @include media-breakpoint-up(md) { padding: 3.5rem 3.5rem 3.5rem 0; } @include media-breakpoint-up(lg) { padding: 3.5rem 1.5rem 3.5rem 0; } .content-col--headline-wrapper { .content-col--headline { display: block; } } } } } } } } } }