/* ----- Akzentfarben (Variablen) ------------------------ Die Standardeinstellungen befinden sich hier: /theme/private/inc/basistemplate.php ------------------------------------------------------- */ // $accent-color-0-1: #000000; // $accent-color-0-2: #000000; // $accent-color-0-3: #000000; // $accent-color-0-4: #000000; // $accent-color-1-1: #000000; // $accent-color-1-2: #000000; // $accent-color-1-3: #000000; // $accent-color-1-4: #000000; // $accent-color-2-1: #000000; // $accent-color-2-2: #000000; // $accent-color-2-3: #000000; // $accent-color-2-4: #000000; // $accent-color-3-1: #000000; // $accent-color-3-2: #000000; // $accent-color-3-3: #000000; // $accent-color-3-4: #000000; // $accent-color-4-1: #000000; // $accent-color-4-2: #000000; // $accent-color-4-3: #000000; // $accent-color-4-4: #000000; $custom-color--red: #dc3546; /* ----- Ă„nderungen an Bootstrap ------------------------- */ .alert { border: none; border-radius: 5px; font-weight: 700; margin-bottom: 90px; padding: 30px; &.alert-danger { background-color: #ede2e6; border-left: 5px solid #dc3546; color: #dc3546; } &.alert-success { background-color: #e8efdd; border-left: 5px solid #2f5d73; color: #2f5d73; } ul { list-style: none; margin-bottom: 0 !important; padding-left: 0; } } .btn { border: 1px solid transparent; border-radius: 0; font-size: .9rem; font-weight: 700; letter-spacing: .09rem; margin: 0 auto; padding: 10px 30px; text-transform: uppercase; transition: none; &:active { opacity: .75; } &:focus { box-shadow: none !important; } &.btn-lg { font-size: 1.65rem; letter-spacing: normal; text-transform: none; @media(min-width: 992px) { font-size: 2rem; } } &.btn-primary { background-color: #2F5D73; color: #fff; &:active, &:hover { background-color: #2F5D73 !important; border-color: #2F5D73 !important; } } } .carousel-control-next { justify-content: flex-end; .carousel-control-next-icon { margin-right: 20px; } } .carousel-control-next-icon, .carousel-control-prev-icon { align-items: center; background-image: none; display: flex; height: 40px; width: auto; svg { width: auto; height: 100%; } } .carousel-indicators { bottom: 0; margin-bottom: 30px; li { background-color: rgba($accent-color-0-1, 1); border-bottom: none; border-top: none; border-radius: 50%; height: 13px; margin-left: 4px; margin-right: 4px; opacity: .5; width: 13px; &.active { background-color: rgba($accent-color-0-1, 1); opacity: 1; } } } .carousel-control-prev { justify-content: flex-start; .carousel-control-prev-icon { margin-left: 20px; } } .container, .container-fluid, .col { padding: 0 20px; @media(min-width: 576px) { padding: 0 40px; } } .my-col-xxl-3 { @media(min-width: 1500px) { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } } .container { @media(min-width: 1024px) { max-width: 1100px; } @media(min-width: 1366px) { max-width: 1466px; } @media(min-width: 1400px) { max-width: 1500px; } } .order-1 { @media(max-width: 991px) { margin-top: 0; } } .order-2 { @media(max-width: 991px) { margin-top: 45px; } } .row { margin: 0 -20px; @media(min-width: 576px) { margin: 0 -40px; } } /* ----- Grundeinstellungen ------------------------------ */ a { &:not(.btn) { color: rgba($accent-color-0-4, 1); outline: 0; text-decoration: underline; &:hover { color: rgba($accent-color-0-4, .75); text-decoration: none; } &:active { color: rgba($accent-color-0-4, .5); } } } b, strong { font-weight: 700; } body { background-color: rgba($accent-color-0-1, 1); color: rgba($accent-color-0-3, 1); // font-family: 'IBM Plex Sans', sans-serif; font-family: 'Nunito', Arial, sans-serif; font-size: 1rem; line-height: 1.5; margin-top: 112px; overflow-x: hidden; overflow-y: scroll; &.bt-cookie-banner--is-visible { .bt-cookie-banner { display: block; } } @media(min-width: 1500px) { margin-top: 128px; } &#maintemplate { margin-top: 120px; @media(min-width: 992px) { margin-top: 112px; } @media(min-width: 1030px) { margin-top: 117px; } @media(min-width: 1350px) { margin-top: 123px; } @media(min-width: 1500px) { margin-top: 128px; } } } .bt-h1, h1 { color: rgba($accent-color-0-2, 1); font-size: 1.8rem; font-weight: 700; line-height: 1.25; margin-bottom: 30px; @media(max-width: 575px) { -webkit-hyphenate-limit-chars: auto 3; -webkit-hyphens: auto; -moz-hyphenate-limit-chars: auto 3; -moz-hyphens: auto; -ms-hyphenate-limit-chars: auto 3; -ms-hyphens: auto; hyphenate-limit-chars: auto 3; hyphens: auto; } @media(min-width: 576px) { font-size: 2rem; } } .bt-h2, h2 { color: rgba($accent-color-0-2, 1); font-size: 1.62rem; font-weight: 700; line-height: 1.25; margin-bottom: 30px; @media(max-width: 575px) { -webkit-hyphenate-limit-chars: auto 3; -webkit-hyphens: auto; -moz-hyphenate-limit-chars: auto 3; -moz-hyphens: auto; -ms-hyphenate-limit-chars: auto 3; -ms-hyphens: auto; hyphenate-limit-chars: auto 3; hyphens: auto; } @media(min-width: 576px) { font-size: 1.8rem; } } .bt-h3, h3 { color: rgba($accent-color-0-2, 1); font-size: 1.44rem; font-weight: 700; line-height: 1.25; margin-bottom: 30px; @media(max-width: 575px) { -webkit-hyphenate-limit-chars: auto 3; -webkit-hyphens: auto; -moz-hyphenate-limit-chars: auto 3; -moz-hyphens: auto; -ms-hyphenate-limit-chars: auto 3; -ms-hyphens: auto; hyphenate-limit-chars: auto 3; hyphens: auto; } @media(min-width: 576px) { font-size: 1.6rem; } } .bt-h4, h4 { color: rgba($accent-color-0-2, 1); font-size: 1.26rem; font-weight: 700; line-height: 1.25; margin-bottom: 30px; @media(max-width: 575px) { -webkit-hyphenate-limit-chars: auto 3; -webkit-hyphens: auto; -moz-hyphenate-limit-chars: auto 3; -moz-hyphens: auto; -ms-hyphenate-limit-chars: auto 3; -ms-hyphens: auto; hyphenate-limit-chars: auto 3; hyphens: auto; } @media(min-width: 576px) { font-size: 1.4rem; } } .bt-h5, h5 { color: rgba($accent-color-0-2, 1); font-size: 1.08rem; font-weight: 700; line-height: 1.25; margin-bottom: 30px; @media(max-width: 575px) { -webkit-hyphenate-limit-chars: auto 3; -webkit-hyphens: auto; -moz-hyphenate-limit-chars: auto 3; -moz-hyphens: auto; -ms-hyphenate-limit-chars: auto 3; -ms-hyphens: auto; hyphenate-limit-chars: auto 3; hyphens: auto; } @media(min-width: 576px) { font-size: 1.2rem; } } .bt-h6, h6 { color: rgba($accent-color-0-2, 1); font-size: .9rem; font-weight: 700; line-height: 1.25; margin-bottom: 15px; @media(max-width: 575px) { -webkit-hyphenate-limit-chars: auto 3; -webkit-hyphens: auto; -moz-hyphenate-limit-chars: auto 3; -moz-hyphens: auto; -ms-hyphenate-limit-chars: auto 3; -ms-hyphens: auto; hyphenate-limit-chars: auto 3; hyphens: auto; } @media(min-width: 576px) { font-size: 1rem; } } // .bt-loader { // left: calc(50% - 16px); // position: fixed; // top: calc(50% - 16px); // // .spinner-border { // border-width: .5rem; // color: rgba($accent-color-0-3, 1); // } // } .bt-wrapper { // visibility: hidden; &.bt-nav-mobile--is-active { display: none; } } .form-control, input, textarea { border-radius: 0; height: auto; padding: 10px; width: 100%; } hr { border-top: 15px solid rgba($accent-color-0-2, 1); margin-bottom: 45px; margin-top: 43px; } label { font-size: .9rem; margin-bottom: 5px; } p { &:last-child { margin-bottom: 0; } } ::selection { background-color: rgba($accent-color-0-4, 1); color: rgba($accent-color-0-1, 1); } /* ----- Header inkl. Navigation ------------------------- */ .hamburger { padding: 0; position: relative; z-index: 99999; &:hover { opacity: 1; } &:focus { outline: none; } &.is-active { &:hover { opacity: 1; } } .hamburger-box { width: 30px; } .hamburger-inner { border-radius: 0; width: 30px; &::after, &::before { border-radius: 0; width: 30px; } } } .hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::after, .hamburger.is-active .hamburger-inner::before, .hamburger-inner, .hamburger-inner::after, .hamburger-inner::before { background-color: rgba($accent-color-0-3, 1); } .bt-header { background-color: rgba($accent-color-0-1, 1); box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075); color: rgba($accent-color-0-3, 1); left: 0; //padding-bottom: 19px !important; padding-left: 0; padding-right: 0; //padding-top: 15px !important; position: fixed; top: 0; transition: margin .2s ease; // visibility: hidden; z-index: 1030; // &.bt-nav-languages--is-active { // position: absolute; // // &.is-reduced { // position: fixed; // // .bt-nav-languages { // // display: none; // } // } // } @media(max-width: 992px) { padding-bottom: 30.5px; padding-top: 30.5px; } @media(min-width: 992px) { padding-bottom: 30.5px; padding-top: 30.5px; } &.bt-nav-mobile--is-active { background-color: transparent; box-shadow: none; position: absolute; } .bt-nav-languages { // border-bottom: 1px dotted #d9d9d9; font-size: 15px; margin-bottom: 15px; margin-top: -15px; padding: 8px 0 !important; ul { list-style: none; margin: 0 -5px 0 0; position: relative; left: -1px; //my edit padding: 0; float: right; &.is-active { display: flex; } li { float: left; text-transform: uppercase; display: inline-block; line-height: 1; padding: 0; margin-bottom: 1em; border-right: 1px solid #A4C5E8; //my edit &:first-child { //my edit border-right: none; //my edit margin-right: 10px; } &:last-child { //my edit border-right: none; //my edit } &.is-active, &.is-offline { margin: -2px 0; padding: 5px; } &.is-active { font-weight: 700; color: #a4c5e8; //my edit } &.is-offline { opacity: .5; } a { display: inline-block; margin: -2px 0; padding: 5px; text-decoration: none; //my edit } } } } .bt-main-logo { bottom: 8px; } .bt-logo { position: relative; z-index: 99998; a { display: block; } img { height: 32px; width: auto; @media screen and (min-width: 992px) { height: 20px; } @media screen and (min-width: 1030px) { height: 29px; } @media screen and (min-width: 1350px) { height: 35px; } } .LogoSchleife { height: 100px; width: auto; position: absolute; top: -20px; left: 0px; @media(min-width: 768px) { height: 132px; top: -44px; } @media(min-width: 1024px) { height: 125px; top: -35px; left: 11px; } @media(min-width: 1140px) { height: 145px; top: -47px; left: 0px; } } } .bt-nav-desktop { display: none; font-weight: 700; @media(min-width: 1500px) { display: block; float: right; } ul { list-style: none; margin: 0; position: relative; //my edit left: -1px; //my edit padding: 0; li { float: left; display: inline-block; //my edit line-height: 1; //my edit margin-bottom: 1em; //my edit border-right: 1px solid #A4C5E8; //my edit font-size: 11px; color: #3F3F3F; @media(max-width: 1024px) { font-size: 10px; } @media screen and (min-width: 1030px) { font-size: 15px; } &:last-child { margin-right: -10px; border-right: none; //my edit } &.is-active { font-weight: 700; } a { display: inline-block; //my edit margin: -5px 0; padding: 10px; text-decoration: none; //my edit color: #000; } .lower-level { background-color: rgba(255, 255, 255); ul li { border-right: none; } } div { box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075); display: none; margin: 5px -20px 0; min-width: 274px; padding: 15px 30px; position: absolute; ul { li { clear: both; font-size: .9rem; font-weight: 400; &.is-active { font-weight: 700; } a { padding: 0; } } } } } } } .bt-nav-mobile-outer { height: 24px; @media(min-width: 1500px) { display: none; } &:focus { outline: none; } &.bt-nav-mobile--is-active { } } .col { &:nth-child(2) { align-items: center; display: flex; justify-content: flex-end; } } .row { position: relative; } } .bt-nav-mobile { align-items: center; background-color: rgba(255, 255, 255); color: #000; display: none; left: 0; position: absolute; top: 0; width: 100%; &.is-active { display: flex; min-height: 0!important; } .bt-arrow-down-icon { opacity: 1; &:active, &:focus, &:hover { opacity: 1 !important; } .bt-fill-00 { fill: rgba($accent-color-0-3, 1); } } .col { padding-left: 0; padding-right: 0; } .container { @media(max-width: 575px) { // padding-left: 0; // padding-right: 0; } } .row { margin-left: 0; margin-right: 0; } ul { text-align: center; list-style: none; margin: 0; padding: 0; li { border-bottom: 1px solid #f2f2f2; font-size: 1.1rem; padding: 8px 0; &:last-child { border-bottom: 1px solid #f2f2f2; } &.is-active { font-weight: 700; } a { display: block; margin: -8px 0; padding: 8px 0; text-decoration: none; //my edit } .bt-arrow-down-icon { background-color: transparent; align-items: center; display: flex; height: calc(100% + 16px); justify-content: center; padding: 8px 3px; transform: none; &[aria-expanded="true"] { svg { transform: scaleY(-1); polygon { fill: rgba($accent-color-0-4, 1); } } } a { display: block; } svg { transition: transform .2s ease; width: 24px; polygon { fill: rgba($accent-color-0-3, 1); transition: fill .2s ease; } } } ul { list-style: none; margin: 8px 0 8px 15px; padding: 0; li { border: none; font-size: .9rem; font-weight: 400; padding: 4px 0; &:last-child { border: none; } &.is-active { font-weight: 700; } a { margin: -4px 0; padding: 4px 0; } } } } } } /* ----- Content ----------------------------------------- */ .bt-2-col, .bt-3-col, .bt-4-col { @media(min-width: 992px) { margin-left: -20px; margin-right: -20px; } .col { @media(min-width: 992px) { padding-left: 20px; padding-right: 20px; } } } .bt-2-col-in-1-col { @media(min-width: 992px) { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px; } } .bt-2-or-3-boxes { a { display: block; margin: 0; text-decoration: none; } .bt-box { align-content: space-between; background-color: rgba($accent-color-0-1, 1); color: rgba($accent-color-0-3, 1); margin: 0 !important; border-top-left-radius: 12px; border-top-right-radius: 12px; -webkit-box-shadow: 6px 6px 5px 0 rgba(0, 0, 0, 0.15); -moz-box-shadow: 6px 6px 5px 0 rgba(0, 0, 0, 0.15); box-shadow: 6px 6px 5px 0 rgba(0, 0, 0, 0.15); img { border-top-left-radius: 12px; border-top-right-radius: 12px; } .btn { padding-bottom: 15px; padding-top: 15px; } .col { margin-top: 0 !important; padding: 0; .row { .col { margin-top: 0 !important; padding: 0; &.bt-text { text-align: center; padding: 15px !important; //30 border-bottom: 2px solid #6ca5da; } } } } .container { + { .row { justify-content: center; } } } .row { margin-left: 0; margin-right: 0; } } .container { .row { .col { .row { + { .row { margin-top: 40px; } } } } } } } .bt-arrow-down-icon, .carousel-control-next, .carousel-control-prev { opacity: .5; transition: none; &:active { opacity: .5 !important; } &:focus { opacity: .5; } &:hover { opacity: 1; } .bt-fill-00 { fill: rgba($accent-color-0-1, 1); } } .bt-arrow-down-anchor { position: relative; z-index: -99999; } .bt-arrow-down-icon-outer { margin: -64.8167px 0 0; position: relative; z-index: 2; .bt-arrow-down-icon { padding: 20px; a { display: flex; margin: -20px; justify-content: center; padding: 20px; } svg { height: 24.833px; width: 40px; } } .col { display: flex; justify-content: center; } } .bt-carousel-lg-outer { padding-left: 0; padding-right: 0; .bt-carousel-lg { align-items: center; display: flex; overflow-y: hidden; &.bt-has-layer { .carousel-control-next, .carousel-control-prev { @media(max-width: 575px) { display: none; } } } .carousel-indicators { &.bt-arrow-down-icon--is-active { margin-bottom: 76.267px; } } .carousel-inner { height: 100%; .carousel-item { background-position: 50% 50%; background-size: cover; height: 100%; .bt-layer { align-items: center; background-color: rgba(0, 0, 0, .5); color: rgba(255, 255, 255, 1); display: flex; height: 100%; justify-content: center; padding-left: 0; padding-right: 0; left: 0; position: absolute; top: 0; .bt-h1, h1, .bt-h2, h2, .bt-h3, h3, .bt-h4, h4, .bt-h5, h5, .bt-h6, h6, { color: rgba(255, 255, 255, 1); } .btn { margin-top: 15px; } } } } } .col { padding-left: 0; padding-right: 0; } .row { margin-left: 0; margin-right: 0; } } .bt-carousel-sm { img { display: block; width: 100%; } } .bt-contact-form { .btn { font-size: 1rem; width: 100%; } .bt-random-number { color: rgba($custom-color--red, 1); font-size: 1rem; font-weight: 700; line-height: 43.6px; @media(min-width: 576px) { line-height: 46px; } p { font-size: 1rem; line-height: 43.6px; @media(min-width: 576px) { line-height: 46px; } } } } .col-middle .bt-content { padding-top: 0 !important; } .col-right #col-right-background { background-color: #fff; border-radius: 10px; padding: 14px; margin-bottom: 90px; @media(min-width: 768px) { margin: 0 140px 90px 140px; } @media(min-width: 992px) { margin: 0 0 90px 0; } img { margin-bottom: 10px; } } .col-right .bt-content{ padding-top: 0!important; h1 { font-size: 22px; } h2 { font-size: 19px; } h3{ font-size: 16px; } p { font-size: 13px; } } .bt-content { p { font-size: 18px; //20px &.bt-h3 { font-weight: 900; } img { max-width: 100%; height: auto; } } ul, ol { margin-bottom: 30px; li { font-size: 20px; } } a { color: #2F5D73; font-weight: 700; } h3 { // margin-bottom: 0; } img { // margin-bottom: 40px; } padding-left: 0 !important; padding-right: 0 !important; .col { + { .col { &:not(.order-1), &:not(.order-2) { @media(max-width: 991px) { margin-top: 45px; } } } } } } .bt-gallery { a { cursor: zoom-in; } .col { .row { .col { margin-top: 0; padding-bottom: 15px; padding-top: 15px; } } } } .bt-spacer { height: 45px; } .bt-text-and-image { .col { .row { align-items: center; display: flex; .col { &:first-child { div { @media(min-width: 992px) { padding-right: 30px; } } } } } } } /* ----- Footer + Cookie-Banner -------------------------- */ .bt-cookie-banner { background-color: rgba($accent-color-0-1, 1); bottom: 0; display: none; font-size: .8rem; -webkit-hyphenate-limit-chars: auto 3; -webkit-hyphens: auto; -moz-hyphenate-limit-chars: auto 3; -moz-hyphens: auto; -ms-hyphenate-limit-chars: auto 3; -ms-hyphens: auto; hyphenate-limit-chars: auto 3; hyphens: auto; left: 0; position: fixed; z-index: 1050; @media(min-width: 992px) { background-color: rgba($accent-color-0-1, .9); } &:hover { @media(min-width: 992px) { background-color: rgba($accent-color-0-1, 1); } } .bt-note { margin-right: 20px; } .bt-privacy-link { font-weight: 700; } .btn { font-size: .8rem; letter-spacing: .08rem; padding-bottom: 7.5px; padding-top: 7.5px; width: 100%; } .col { &:nth-child(2) { @media(max-width: 767px) { margin-top: 8px !important; } } } .container { padding-bottom: 15px !important; padding-top: 15px !important; } } .bt-footer { padding-bottom: 90px !important; padding-left: 0; padding-right: 0; padding-top: 20px !important; //my edit font-size: 15px; //my edit color: #000; background-color: #fff; strong { font-size: 17px; } @media(min-width: 360px) { // font-size: 15px; //my edit background-color: #fff; // strong { // font-size: 17px; // } } @media(min-width: 992px) { font-size: 13px; //my edit background-color: #fff; strong { font-size: 15px; } } .bt-nav-footer { .col { @media(min-width: 992px) { align-items: center; display: flex; } ul { list-style: none; margin: 0; padding: 0; li { float: left; &:not(:first-child) { margin-left: 20px; } } li.is-active { font-weight: 700; } } &.bt-nav-social-media { @media(min-width: 992px) { justify-content: flex-end; } ul { li { &:not(:first-child) { margin-left: 10px; } a { display: block; .bt-icon { height: 30px; width: auto; &:hover { .bt-fill-00 { fill: rgba($accent-color-0-4, 1); } } &.bt-email { .bt-fill-01 { fill: none; } } &.bt-facebook { .bt-fill-01 { fill: none; } } &.bt-linkedin { .bt-fill-01 { fill: none; } } &.bt-youtube { .bt-fill-01 { fill: none; } } &.bt-xing { .bt-fill-01 { fill: none; } } .bt-fill-00 { fill: rgba($accent-color-0-2, 1); } } } } } } } } .bt-spacer { @media(max-width: 991px) { display: none; } } .col { + { .col { &:not(.order-1), &:not(.order-2) { @media(max-width: 991px) { margin-top: 0; } } } } } } /* ------------------------------------------------------- */ @media(min-width: 768px) { .bt-2-or-3-boxes a:not(.btn):active, .bt-gallery a img:active, .bt-logo:active { // color: #212121; transform: scale(.988); } } /* ----- Akzentfarben (Regeln) --------------------------- */ .bt-accent-color-1 { background-color: rgba($accent-color-1-1, 1); color: rgba($accent-color-1-3, 1); a { &:not(.btn) { color: rgba($accent-color-1-4, 1); &:hover { color: rgba($accent-color-1-4, .75); } &:active { color: rgba($accent-color-1-4, .5); } } } .bt-h1, h1, .bt-h2, h2, .bt-h3, h3, .bt-h4, h4, .bt-h5, h5, .bt-h6, h6, { color: rgba($accent-color-1-2, 1); } hr { border-top: 2px solid rgba($accent-color-1-2, 1); } ::selection { background-color: rgba($accent-color-1-4, 1); color: rgba($accent-color-1-1, 1); } } .bt-accent-color-2 { background-color: rgba($accent-color-2-1, 1); color: rgba($accent-color-2-3, 1); a { &:not(.btn) { color: rgba($accent-color-2-4, 1); &:hover { color: rgba($accent-color-2-4, .75); } &:active { color: rgba($accent-color-2-4, .5); } } } .bt-h1, h1, .bt-h2, h2, .bt-h3, h3, .bt-h4, h4, .bt-h5, h5, .bt-h6, h6, { color: rgba($accent-color-2-2, 1); } hr { border-top: 2px solid rgba($accent-color-2-2, 1); } ::selection { background-color: rgba($accent-color-2-4, 1); color: rgba($accent-color-2-1, 1); } } .bt-accent-color-3 { background-color: rgba($accent-color-3-1, 1); color: rgba($accent-color-3-3, 1); a { &:not(.btn) { color: rgba($accent-color-3-4, 1); &:hover { color: rgba($accent-color-3-4, .75); } &:active { color: rgba($accent-color-3-4, .5); } } } .bt-h1, h1, .bt-h2, h2, .bt-h3, h3, .bt-h4, h4, .bt-h5, h5, .bt-h6, h6, { color: rgba($accent-color-3-2, 1); } hr { border-top: 2px solid rgba($accent-color-3-2, 1); } ::selection { background-color: rgba($accent-color-3-4, 1); color: rgba($accent-color-3-1, 1); } } .bt-accent-color-4 { background-color: rgba($accent-color-4-1, 1); color: rgba($accent-color-4-3, 1); a { &:not(.btn) { color: rgba($accent-color-4-4, 1); &:hover { color: rgba($accent-color-4-4, .75); } &:active { color: rgba($accent-color-4-4, .5); } } } .bt-h1, h1, .bt-h2, h2, .bt-h3, h3, .bt-h4, h4, .bt-h5, h5, .bt-h6, h6, { color: rgba($accent-color-4-2, 1); } hr { border-top: 2px solid rgba($accent-color-4-2, 1); } ::selection { background-color: rgba($accent-color-4-4, 1); color: rgba($accent-color-4-1, 1); } } /* CSS ADDED TO SITE BY MELISA HEADER */ .search_it-flex { float: right; display: inline; input { padding: 0; // border-color: #fff; } } .search_it-button { color: #677078; float: right; background: none; font-size: 18px; border: none; cursor: pointer; } /*VER 2 */ .form-outline { position: relative; display: block; width: 100%; max-width: 34px; transition: 0.4s linear; // overflow: hidden; .searchInput { border: 1px solid transparent; display: block; appearance: none; background: none; color: #000; cursor: pointer; transition: 0.4s linear; &:focus { outline-width: 0; } &::placeholder { color: #000; } } .fa-search { align-items: center; cursor: pointer; display: flex; justify-content: center; position: absolute; right: calc(34px / 2); top: 50%; transform: translate(50%, -50%); // pointer-events: none; background-color: #fff; height: 30px; min-height: 24px; min-width: 34px; @media(max-width: 1499px) { min-width: 50px; } &:before { @media(max-width: 1499px) { transform: scale(1.75); } } path { fill: #00F494; transition: 0.4s linear; } } // &:focus-within &.is-active { max-width: 300px; border: none; .searchInput { border-color: #2f5d73; padding-right: 50px; } .fa-search { path { fill: #24233A; } } } } #search_it-form1 { @media(max-width: 1499px) { margin-right: -7px; transform: translate(0, 3px); } } .search_it-modul { ul { list-style: none; margin-bottom: 0; padding-left: 0; li { background-color: rgba(#2F5D73, .125); border-radius: 5px; margin-bottom: 30px; padding: 20px; .search_it-keyword { background-color: rgba(#2F5D73, .25); border-radius: 5px; // color: #fff; display: inline-block; font-weight: normal; // margin: -2.5px 5px; // padding: 2.5px 10px; } .search_it-title { font-size: 125%; } .search_it-url { font-size: 75%; } } } } /* CSS ADDED TO SITE BY MELISA CONTENT */ #maintemplate { height: 100%; } .mainsection { .mainsection-img { height:190px; @media(max-width: 281px) { height:160px; } @media(min-width: 768px) { // height:250px; } @media(min-width: 1140px) { height:190px; } } .main-header-h1 { color: rgba($accent-color-0-2, 1); font-size: 1.563rem; //27px font-weight: 600; margin-bottom: 0; position: absolute; top: 10px; left: 138px; @media(max-width: 281px) { // font-size: 20px; // top: 10px; left: 110px; } @media(max-width: 768px) { font-size: clamp(0.875rem, 4vw + 1rem, 1.563rem); } @media(min-width: 768px) { font-size: 1.563rem; top: 10px; left: 174px; } } .main-header-h2 { color: rgba($accent-color-0-2, 1); line-height: 1; font-size: 2.563rem; //26px font-weight: 800; position: absolute; top: 50px; left: 138px; @media(max-width: 281px) { // font-size: 18px; top: 36px; // 38px left: 110px; } @media(max-width: 768px) { font-size: clamp(1.25rem, 5vw + 1.5rem, 1.875rem); } @media(min-width: 768px) and (max-width: 1060px) { font-size: clamp(2.25rem, 2vw + 1rem, 2.563rem); top: 50px; left: 174px; } @media(min-width: 1060px) { font-size: 2.563rem; top: 50px; left: 174px; } } .search_it-headline { position: static; } } #switchbackground h1 { font-size: 2.5rem; } .container-main-img { position: relative; left: -30px; @media(min-width: 768px) { left: -62px; } } #empty-logo-space { padding-top: 20px; background-color: #fff; } #twitter-widget-0 { border-radius:12px; box-shadow:9px 11px 20px rgba(0,0,0,.5); } .form-horizontal { .bt-content { padding-top: 50px!important; } } #rex-yform { margin-bottom: 100px; .btn-primary { background-color: #2F5D73; } } .btn-primary { background-color: #2F5D73; border-radius: 30px; } /* CSS ADDED TO SITE BY MELISA SIDEBAR */ .font-awesome-icon-sidebar, .font-awesome-icon-facebook { background: #fff; border-radius: 20px; color: #000; padding: 5px; } .font-awesome-icon-facebook { padding: 5px 6px 5px 6px; } #sidebarSlideOut { position: fixed; right: 0; top: 50%; z-index: 110; } #sidebarSlideOut.closeSidebar .newsletter { background-color: #2F5D73; border: none; color: #FFF; font-size: 10px; text-transform: uppercase; outline: 0; box-shadow: 0 0 6px 1px rgb(102 102 102 / 30%); border-radius: 5px 0 0 5px; width: 86px; height: 38px; padding: 0 4px; a { color: #FFF; text-decoration: none; } } .panelNewsletter { padding: 4px 4px 4px 0; } .split-anmeldung { margin-top: 3px; font-size: 10px; } .split-newsletter { font-weight: bold; font-size: 11px; } #sidebarSlideOut #homeSideBar { margin-top: 5px; background-color: #2F5D73; box-shadow: 0 0 6px 1px rgb(102 102 102 / 30%); border-radius: 5px 0 0 5px; padding: 9px; width: 86px; height: 38px; font-size: 7px; font-weight: bold; } .button-text { font-weight: bold; } .panelLogo img { width: auto; height: 22px; margin-top: 5px; margin-left: 5px; } #sidebarSlideOut #homeSideBar a .panelLogo { float: left; margin-right: 6px; } #sidebarSlideOut #homeSideBar a { color: #FFF; font-size: 10px; text-transform: uppercase; text-decoration: none; line-height: 1.1em; } /* CSS ADDED TO SITE BY MELISA FOOTER */ .container-small-footer { margin-top: 20px; @media (min-width: 576px) { margin-top: 50px; } } .footer-links a { text-decoration: none; :hover { text-decoration: underline!important; } } .span-anreise { white-space: nowrap; a { text-decoration: none; } :hover { color: #000!important; } } .icon-anreise { margin-right: 10px; } .kontakt-icon { margin-right: 4px; } .nav-footer-mobile #menuFooter-mobile, #copyright-mobile { font-size: 13px!important; @media (min-width: 414px) { font-size: 15px; } } .nav-footer-mobile #copyright-mobile { margin-top: 20px; } #menuFooter ul, #menuFooter-mobile ul { bottom: 0; top: 0; padding-left: 0; @media (min-width: 576px) { position: absolute; } li { list-style-type: none; padding: 0; float: left; margin-right: 20px; :hover { text-decoration: underline; color: #000; } } } .copyright { @media(min-width: 1300px) { margin-right: 27px; } } .col-social-icons { padding-bottom: 20px!important; } .social-list, .info-list, .anreise-liste { padding-left: 0; } .social-icons, .general-icon { list-style-type: none; padding: 0; margin-right: 20px; } .kununu-icon { background: #6ca5da; padding: 5px 10px 9px 10px; border-radius: 2px; box-shadow: 1px 2px 5px 0 rgb(51 51 51 / 55%); @media(min-width: 576px) { padding: 10px 10px 8px 10px; } @media(min-width: 768px) { padding: 10px 10px 6px 10px; } @media(min-width: 992px) { padding: 10px 10px 8px 10px; } .img-kununu { width: auto; height: 17px; } } .social-icons { float: left; @media(max-width: 1200px) { margin-right: 20px; } @media(min-width: 1367px) { margin-right: 20px; } margin-right: 5px; } .general-icon { white-space: nowrap; @media(min-width: 1200px) { margin-right: 5px; } @media(min-width: 768px) { margin-right: 119px; } margin-right: 96px; } .font-awesome-icon, .font-awesome-icon-footer-facebook { background: #6ca5da; border-radius: 2px; box-shadow: 1px 2px 5px 0 rgb(51 51 51 / 55%); color: #FFF; transition: .2s ease-in-out 0s; padding: 10px; height: 36px; width: 36px; font-size: 16px; } .font-awesome-icon-footer-facebook { padding: 10px 10px 10px 13px; } .col-footer-border { border-top: 1px solid #f2f2f2; padding-bottom: 11px; padding-top: 11px; } .col-footer-border-last { border-bottom: 1px solid #f2f2f2; } .wrapper-button { display: flow-root; p { float: left; margin-bottom: 0; } + { div { > { * { &:first-child { margin-top: 11px; } &:last-child { margin-bottom: 0; } } } } } } .btn-footer { background-color: transparent !important; border-color: transparent !important; float: right; padding: 0; :hover { background-color: transparent !important; border-color: transparent !important; } .fa-arrow-right { color: #2F5D73; } } .switch-design-template-col-r { .bt-content { > { .container { padding-left: 0 !important; padding-right: 0 !important; .col-lg-9 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } } } } } .bt-hero-background-image { background-repeat: no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: 50% 0; height: calc(100vh - 112px); position: fixed; width: 100%; z-index: -99999; @media(min-width: 1500px) { height: calc(100vh - 128px); } } #maintemplate { .bt-hero-background-image { height: calc(100vh - 120px); @media(min-width: 992px) { height: calc(100vh - 112px); } @media(min-width: 1030px) { height: calc(100vh - 117px); } @media(min-width: 1350px) { height: calc(100vh - 123px); } @media(min-width: 1500px) { height: calc(100vh - 128px); } } }