/** LESS **/ @button-color: #dddddd; @max576: ~"(max-width: 576px)"; @max768: ~"(max-width: 850px)"; @max992: ~"(max-width: 1250px)"; @max1200: ~"(max-width: 1400px)"; @min1800: ~"(min-width: 1800px)"; @maxheight600: ~"(max-height: 600px)"; @maxheight550: ~"(max-height: 550px)"; @maxw350h600: ~"(max-height: 650px) and (max-width: 450px)"; body { margin: 0; } /**** HEADER ****/ .sticky-header { position: absolute; width: 100%; height: 2px; background-color: red; top: 150px; z-index: 20; } .header_wrapper_outer { display: grid; justify-items: center; position: fixed; width: 100%; z-index: 2; background: #fff; &::after { content: ""; height: 35px; background-color: rgba(181, 76, 103, 0.6); width: 100%; position: absolute; top: 100%; } .header_wrapper_inner { display: grid; align-items: center; grid-template-areas: "logo navigation topmenu"; grid-template-columns: 200px 1fr auto; max-width: 1500px; width: calc(100% - 60px); height: auto; padding: 0 30px; transition: all .2s ease-out; @media @max1200 { grid-template-areas: "logo hamburger"; grid-template-columns: 15% auto; } @media @max992 { grid-template-areas: "logo hamburger"; grid-template-columns: 15% auto; } @media @max768 { grid-template-areas: "logo hamburger"; grid-template-columns: 45% auto; } .logo { grid-area: logo; padding: 20px 30px 20px 0; display: flex; img { width: 100%; height: 100%; } } .logo-negativ { grid-area: logo; padding: 30px 30px 30px 0; display: none; opacity: 0; z-index: 3; img { width: 100%; height: 100%; } } .navigation { grid-area: navigation; justify-content: center; padding: 30px 30px; @media @max1200 { display: none; } ul { display: flex; justify-content: center; list-style: none; padding: 0; margin: 0; li ul { visibility: hidden; opacity: 0; position: absolute; display: block; background-color: rgb(117, 49, 66, 0.8); min-width: 190px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1); padding: 12px 16px; transform: translateY(-5px); z-index: -1; transition: all 0.25s ease 0s, visibility 0s linear 0.01s, z-index 0s linear 0.01s; li a { border-right: none; color: #fff; transition: all 0.25s ease; font-weight: 400; &:hover { color:rgb(181, 76, 103); } } li.current a{ font-weight: 600; } } li:focus ul, li:focus-within ul, li:hover ul { visibility: visible; opacity: 1; z-index: 1; transform: translateY(0); transition-delay: 0s, 0s, 0,01s; } } li a { padding: 8px 11px; } li:last-child a { border-right: none; } } .top-menu { grid-area: topmenu; padding: 30px 0px 30px 30px; @media @max1200 { display: none; } ul { display: flex; column-gap: 5px; list-style: none; padding: 0; margin: 0; li { width: auto; a { color: #b54c67; text-transform: uppercase; font-size: 90%; font-weight: 600; } &::before { font-family: "Font Awesome 6 Pro"; font-weight: 900; content: "\f4c6"; padding-right: 5px; font-size: 80%; color: #b54c67; } img { display: flex; width: 100%; } } } } } } .header_wrapper_inner.scrolled { display: grid; align-items: center; grid-template-areas: "logo navigation topmenu"; grid-template-columns: 130px 1fr auto; max-width: 1500px; width: calc(100% - 60px); padding: 0 30px; transition: all .2s ease-out; @media @max1200 { grid-template-areas: "logo hamburger"; grid-template-columns: 12% auto; } @media @max992 { grid-template-areas: "logo hamburger"; grid-template-columns: 12% auto; } @media @max768 { grid-template-areas: "logo hamburger"; grid-template-columns: 35% auto; } } /*** HAMBURGER ***/ .hamburger-wrapper { grid-area: hamburger; justify-self: end; z-index: 3; display: none; @media @max1200 { display: flex; } } #hamburger { width: 40px; height: 25px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; span { display: block; position: absolute; height: 4px; width: 100%; background: #753142; border-radius: 4px; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; &:nth-child(1) { top: 0px; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; } &:nth-child(2) { top: 10px; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; } &:nth-child(3) { top: 20px; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; } } } #hamburger.open span:nth-child(1) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); top: -3px; left: 7px; } #hamburger.open span:nth-child(2) { width: 0%; opacity: 0; } #hamburger.open span:nth-child(3) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); top: 25px; left: 7px; } /*** MOBILE NAVIGATION ***/ .navigation_wrapper_outer { position: fixed; top: 0; width: 100%; height: 100%; display: none; justify-items: end; z-index: 2; .navigation_wrapper_inner { background-color: rgba(117,49, 66, 0.95); width: 100%; grid-template-rows: 25% 1fr 30%; display: none; z-index: 1; margin-right: -20%; overflow: scroll; @media @maxheight550 { grid-template-rows: 25% 1fr 30%; } .navigation { grid-column: 1; grid-row: 2/3; align-self: start; ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; row-gap: 45px; @media @maxw350h600 { row-gap: 40px; } li.current a{ color: #b54c67; &::after { content: ""; width: 40%; height: 5px; background: #b54c67; position: absolute; left: -30px; bottom: -20px; } &:before { display: none !important; } } ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; row-gap: 10px; padding: 20px 0 0px 0; li.current a { color: #b54c67 !important; font-weight: 600; } a { font-size: 130%; color: #fff; font-weight: 600; text-decoration: none; display: flex; align-items: center; transition: 0.3s; line-height: 110%; padding: 0 90px 0 30px; @media @maxw350h600 { font-size: 100%; } } } } a { font-size: 6vw; color: #fff; font-weight: 600; text-decoration: none; display: flex; align-items: center; transition: 0.3s; line-height: 110%; padding: 0 90px 0 30px; &:after { content: ""; width: 40%; height: 5px; background: #fff; position: absolute; left: -30px; bottom: -20px; } @media @maxw350h600 { font-size: 150%; } &:hover { color: #b54c67; &::before { background-color: #b54c67; } } } } .top-menu { grid-column: 1; grid-row: 3/3; align-self: end; margin-bottom: 30px; padding: 0 30px; ul { display: flex; column-gap: 5px; list-style: none; padding: 0; margin: 0; li { width: auto; a { color: #fff; text-transform: uppercase; font-size: 150%; font-weight: 600; } &::before { font-family: "Font Awesome 6 Pro"; font-weight: 900; content: "\f4c6"; padding-right: 15px; font-size: 150%; color: #fff; } img { display: flex; width: 100%; } } } } } } /*** BANNER ***/ .startseite { .banner_wrapper_outer { height: 70vh; .banner_wrapper_inner { height: 70vh; } } } .banner_wrapper_outer { width: 100%; height: 65vh ; overflow: hidden; position: relative; z-index: 1; @media @min1800 { min-height: 800px; } @media @maxheight600 { min-height: 500px; } .banner_wrapper_inner{ display: grid; grid-template-areas: "scrolldown" "bannertext" ; grid-template-rows: 1fr auto; height: 65vh; @media @min1800 { min-height: 800px; } @media @maxheight600 { min-height: 500px; } .banner { display: flex; justify-content: center; position: absolute; height: 100%; min-width: 100%; .banner-mobile { display: none; @media @max576 { display: flex; justify-content: center; position: absolute; height: 100%; min-width: 100%; } } .banner-desktop { display: flex; justify-content: center; position: absolute; height: 100%; min-width: 100%; @media @max576 { display: none; } } .mod-custom { min-width: 100%; } ::before { content: ""; width: 100%; height: 20px; position: absolute; background: rgb(181, 76, 103); bottom: 0; @media @max1200 { } @media @max992 { } @media @max768 { } } img { object-fit: cover; height: 100%; width: 100%; min-height: 50vh; height: calc(100% - 90px); padding-top: 90px; } } .banner-text { grid-area: bannertext; position: relative; display: grid; justify-items: center; z-index: 2; text-shadow: 0px 2px 25px rgba(0, 0, 0, 0.1); .mod-custom { max-width: 1500px; width: calc(100% - 60px); padding: 50px 30px; @media @max992 { width: calc(100% - 100px); } @media @max768 { width: calc(100% - 60px); padding: 30px; } } h1 { font-size: 350%; margin: 0; color: #fff; @media @max768 { font-size: 9vw; } } h1 strong { color: #fff; } } .scrolldown-wrapper { grid-area: scrolldown; position: relative; display: grid; justify-items: center; .scrolldown { max-width: 1500px; width: calc(100% - 60px); z-index: 2; display: grid; img { justify-self: end; align-self: end; width: 80px; height: 80px; } } } } } /*** CONTENT ***/ .wrapper-outer { display: grid; justify-items: center; width: 100%; background: #fff; .wrapper-inner { width: calc(100% - 240px); padding: 120px 120px; max-width: 1250px; @media @max768 { padding: 60px 30px; width: calc(100% - 60px); } figure.item-image { width: 100%; margin-bottom: 120px; margin-left: 0; position: relative; &:after { content: ""; width: 80%; height: 10px; background: #b54c67; position: absolute; left: -180px; bottom: -40px; @media @max768 { left: -60px; } } img { width: 30%; height: auto; @media @max1200 { width: 100%; } } } .blog-items.items-leading { margin-bottom: 30px; display: grid; justify-content: center; .blog-item { display: grid; grid-template-columns: 100%; justify-content: space-between; align-items: center; width: 100%; @media @max768 { grid-template-columns: 100%; } .item-image { display: flex; border-radius: 50%; position: relative; ::before { content: ""; width: 430px; height: 430px; border-radius:50%; background-color: #EFF8F2; display: flex; position: absolute; z-index: 0; left: 0px; top: 0px; @media @max1200 { } @media @max992 { width: 370px; height: 370px; } @media @max768 { width: 100%; height: 100%; } } img { object-fit: cover; width: 400px; height: 400px; border-radius: 50%; position: relative; z-index: 1; left: 5%; @media @max1200 { } @media @max992 { width: 340px; height: 340px; } @media @max768 { width: 95%; height: 95%; } } } } } .blog-items.masonry-2 { display: grid; grid-template-columns: 49% 49%; justify-content: space-between; row-gap: 30px; @media @max992 { grid-template-columns: 49% 49%; } @media @max768 { grid-template-columns: 100%; } .blog-item { display: grid; grid-template-rows: auto 1fr; background-color: #fff; padding: 30px; border-radius: 10px; .item-image { display: flex; width: 100%; overflow: hidden; margin: 0; height: 200px; @media @max992 { height: 150px; } @media @max768 { height: 150px; } img { object-fit: cover; width: 100%; height: 100%; } } .item-content { display: grid; grid-template-rows: auto 1fr; height: 100%; } } } .blog-items.masonry-3 { display: grid; grid-template-columns: 30% 30% 30%; justify-content: space-between; row-gap: 30px; @media @max992 { grid-template-columns: 49% 49%; } @media @max768 { grid-template-columns: 100%; } .blog-item { display: grid; grid-template-rows: auto 1fr; padding: 0; .item-image { display: flex; width: 100%; overflow: hidden; margin: 0; height: 150px; img { object-fit: cover; width: 100%; height: 100%; } } .item-content { display: grid; grid-template-rows: auto 1fr auto; height: 100%; } } } .item-page, .item-pagewohn4tel, .item-pagetages4tel, .blog-featured, .wrapper-news, .com-content-category-blog.blog { background-color: #fff; padding: 60px; border-radius: 10px; @media @max768 { padding: 30px; } } .com-content-category-blog.blog { .blog-items.masonry-3 { display: grid; grid-template-columns: 30% 30% 30%; justify-content: space-between; row-gap: 30px; @media @max992 { grid-template-columns: 49% 49%; } @media @max768 { grid-template-columns: 100%; } .com-content-category-blog__item.blog-item { display: grid ; grid-template-rows: auto ; .item-content { display: grid; grid-template-rows: auto 1fr; padding: 0; .page-content { display: grid; grid-template-rows: auto 1fr auto; height: 100%; } } } } } .wrapper-news .newsflash { display: grid; grid-template-columns: 30% 30% 30%; justify-content: space-between; row-gap: 30px; @media @max992 { grid-template-columns: 49% 49%; } @media @max768 { grid-template-columns: 100%; } .mod-articlesnews__item { display: grid ; grid-template-rows: auto auto 1fr auto; height: 100%; figure.newsflash-image { display: flex; width: 100%; overflow: hidden; margin: 0; height: 150px; @media @max992 { height: 150px; } @media @max768 { height: 150px; } img { object-fit: cover; width: 100%; height: 100%; } } } } } } /*** TEASER ***/ .teaser_wrapper_outer { width: 100%; min-height: 40vh ; overflow: hidden; position: relative; z-index: 1; .teaser_wrapper_inner{ display: grid; grid-template-areas: "teasertext" ; grid-template-rows: 1fr auto; min-height: 40vh; .teaser { display: flex; justify-content: center; position: absolute; height: 100%; min-width: 100%; .mod-custom { min-width: 100%; } ::before { content: ""; width: 100%; height: 100%; position: absolute; background: rgb(1,84,34); isolation: isolate; } img { object-fit: cover; height: 100%; width: 100%; min-height: 50vh; mix-blend-mode: overlay; } } .teaser-text { grid-area: teasertext; position: relative; display: grid; align-content: center; text-align: center; justify-items: center; z-index: 2; .mod-custom { max-width: 900px; width: calc(100% - 60px); padding: 35px 30px; color: #fff !important; font-style: oblique; } h1,h2,h3 { font-size: 170%; line-height: 110%; font-weight: 500; text-transform: uppercase; color: #fff; } strong { color: #fff; } } } } /*** FOOTER SITEMAP ***/ .footer_sitemap_wrapper_outer { display: grid; justify-items: center; background-color: #753142;; .footer_sitemap_wrapper_inner { display: grid; column-gap: 15px; grid-template-columns: auto 1fr auto; max-width: 1500px; width: calc(100% - 60px); padding: 20px 30px; @media @max992 { grid-template-columns: 100%; row-gap: 20px; padding: 30px 30px; } ul { list-style: none; padding: 0; margin: 0; display: flex; column-gap: 10px; @media @max992 { flex-direction: column; } } .footer_sitemap a { color: #fff; text-decoration: none; font-size: 90%; text-transform: uppercase; } .legal { justify-self: center; @media @max992 { justify-self: start; } @media @max768 { justify-self: start; } a { color: #fff; text-decoration: none; font-size: 70%; text-transform: uppercase; } } .klar-webagentur a { color: #fff; text-decoration: none; background: url(../../images/klar.png) no-repeat; background-size: contain; padding-left: 30px; font-size: 90%; font-weight: 700; text-transform: uppercase; } } } /** RSFORM **/ .formContainer { border: none; padding: 0; .formRow { .formSpan12 { display: grid; grid-template-columns: 49% 49%; column-gap: 2%; width: 80%; @media @max1200 { grid-template-columns: 100%; width: calc(100% - 15px); } .rsform-block { @media @max992 { width: 100%; } } .formControlLabel { text-transform: uppercase; color:#333; font-weight: 400; font-size: 90%; line-height: 100%; } .formBody { width: 100%; .rsform-input-box { border: 2px solid #b54c67; height: 35px; width: calc(100% - 15px); border-radius: 0; @media @max992 { width: 100%; } } .rsform-text-box { border: 2px solid #b54c67; width: calc(100% - 4px); border-radius: 0; @media @max992 { width: 100%; } } } .rsform-submit-button { text-transform: uppercase; background: none; padding: 0; border: 0; font-size: 100%; text-decoration: none; font-weight: 700; color: #b54c67; font-family: "jaf-bernino-sans", sans-serif; margin-top: 30px; &::after { font-family: "Font Awesome 6 Pro"; font-weight: 900; content: "\f054"; padding-left: 0px; font-size: 85%; transition: all 0.25s ease-out; color: #b54c67; padding-left: 3px; } } } } } /*** Design nach Thema ***/ .wohn4tel { .header_wrapper_outer::after { background-color: rgba(149, 149, 89, 0.6); } .banner_wrapper_outer .banner_wrapper_inner .banner ::before { background:rgba(149, 149, 89, 1); } .footer_sitemap_wrapper_outer { background-color: rgba(149, 149, 89, 1); } .wrapper-inner figure.item-image { &:after { background: rgba(149, 149, 89, 1); } } .wrapper-inner h1, .wrapper-inner h2, .wrapper-inner h3, .wrapper-inner a, .wrapper-inner strong { color: rgba(149, 149, 89, 1) !important; } h1:after, h2:after, tr:after { background:rgba(149, 149, 89, 1); } } .tages4tel { .header_wrapper_outer::after { background-color: rgba(87, 134, 165, 0.6); } .banner_wrapper_outer .banner_wrapper_inner .banner ::before { background:rgba(87, 134, 165, 1); } .footer_sitemap_wrapper_outer { background-color: rgba(87, 134, 165, 1); } .wrapper-inner figure.item-image { &:after { background: rgba(87, 134, 165, 1); } } .wrapper-inner h1, .wrapper-inner h2, .wrapper-inner h3, .wrapper-inner a, .wrapper-inner strong { color: rgba(87, 134, 165, 1) !important; } h1:after, h2:after, tr:after { background:rgba(87, 134, 165, 1); } } /*** Cookue HINT ***/ #redim-cookiehint-modal { background-color:rgba(1, 84, 34, 0.8); padding: 20px; #redim-cookiehint { .cookiehead { margin-bottom: 5px; .headline { padding: 10px 0px 3px 0px; } .headline::before { background-image: none; } } } } a.teaser_link { text-decoration: none; } /* Gallery Design */ .igui-scope { padding: 60px 0; } .igui-lightbox { background: rgba(181, 76, 103, 0.98) !important; } .ig-lightbox-descriptions-overlay { background: none !important; color: #fff; } a.ig-lightbox-button { margin-top: 30px !important; } .ig-lightbox-button-right::before { font-family: "Font Awesome 6 Pro"; font-weight: 900; content: "\f054"; font-size: 215%; background: rgba(250, 250, 250, 0.95); padding: 25px 35px ; box-sizing: content-box; border-radius: 152px; right: 30px; margin: 0 20px; box-shadow: 0 3px 30px rgba(0, 0, 0, 0.1); color: #b54c67; } .ig-lightbox-button-left::before { font-family: "Font Awesome 6 Pro"; font-weight: 900; content: "\f053"; font-size: 215%; background: rgba(250, 250, 250, 0.95); padding: 25px 35px ; box-sizing: content-box; border-radius: 152px; right: 30px; margin: 0 20px; box-shadow: 0 3px 30px rgba(0, 0, 0, 0.1); color: #b54c67; } @media (max-width: 600px) { .ig-lightbox-button-left::before, .ig-lightbox-button-right::before { font-size: 130%; padding: 17px 23px !important; border-radius: 152px; } } .ig-lightbox-button svg { display: none; } .igui-lightbox-toolbar { padding: 10px; background: none; } .igui-lightbox-toolbar .igui-close { padding-right: 25px !important; background-image: none !important; background-color: transparent !important; margin-top: 25px; padding-left: 25px; } .igui-lightbox-toolbar .igui-close::before { font-family: "Font Awesome 6 Pro"; font-weight: 900; content: "\f00d"; font-size: 135%; color: rgb(250, 250, 250); padding: 0 0px; box-sizing: content-box; } .ig-lightbox-buttons svg { display: none; } .igui-position-top { top: 5px; left: 0; right: 0; }