/* kerschbaum-consulting - 18.09.2021 */ @import url("/css/styles_fonts.css"); :root { --black: #000000; --white: #ffffff; --text-grau: #4d4d4d; --text: #777777; --beige: #cdaa6b; --anthrazit: #6d6e71; --gold: #d3b385; --hellblau: #B4CBE3; --aktiv-gruen: #A3A27A; --ruhe: #B796A5; --rot: #9C454F; --orange: #C77230; --content-breite:1440px; --overlay-gold:#d2c296; --font-fliesstext: 'Overpass','Open Sans', sans-serif; --font-navtext: 'Overpass','Open Sans', sans-serif; --font-headline: 'Overpass','Open Sans', sans-serif; } * { margin:0px; padding:0px; box-sizing:border-box; } html {background-color:#fff; overflow-x: hidden;} body {font-family: var(--font-fliesstext); height:100%; width:100%; color:var(--text); font-size: 20px; line-height: 26px; background-color:#fff; margin:0px; padding:0px} body p, body div {} body#tinymce {padding: 20px !important} body#tinymce ul {margin-left: 20px} html.noScroll {overflow-y: hidden; height: 100%} /* Klassen ---------------------------- */ .abstand {clear: both;} .abstand::after {content: " "; display: block; clear: both} .pt_0{padding-top:0px !important; display: block; width: 100%; height: 0px} .pt_1{padding-top:20px !important; display: block; width: 100%; height: 0px} .pt_2{padding-top:50px !important; display: block; width: 100%; height: 0px} .pt_3{padding-top:70px !important; display: block; width: 100%; height: 0px} .pt_4{padding-top:120px !important; display: block; width: 100%; height: 0px} .pt_5{padding-top:240px !important; display: block; width: 100%; height: 0px} .pt_6{padding-top:360px !important; display: block; width: 100%; height: 0px} .abstand.pt_0 {display: none} .pb_0{padding-bottom:0px !important; display: block; width: 100%; height: 0px} .pb_1{padding-bottom:20px !important; display: block; width: 100%; height: 0px} .pb_2{padding-bottom:50px !important; display: block; width: 100%; height: 0px} .pb_3{padding-bottom:70px !important; display: block; width: 100%; height: 0px} .pb_4{padding-bottom:120px !important; display: block; width: 100%; height: 0px} .pb_5{padding-bottom:240px !important; display: block; width: 100%; height: 0px} .pb_6{padding-bottom:360px !important; display: block; width: 100%; height: 0px} .abstand.pb_0{display: none} .imgfloatleft {float: left; margin-right: 30px; margin-bottom: 20px} .imgfloatright {float: right; margin-left: 30px; margin-bottom: 20px} .buttongreen {display: inline; width: auto; padding: 10px; color: white !important; border-radius: 5px; outline: none !important; background: linear-gradient(to right, var(--dark-blue) 50%, var(--green) 50%); background-size: 200% 100%; background-position: right bottom; transition: all .5s ease-out; line-height: 50px} .buttonblue {display: inline; width: auto; padding: 10px; color: white !important; border-radius: 5px; outline: none !important; background: linear-gradient(to right, var(--green) 50%, var(--dark-blue) 50%); background-size: 200% 100%; background-position: right bottom; transition: all .5s ease-out; line-height: 50px} .content a.buttongreen:hover { border-bottom:0px solid var(--green); background-color:var(--green); border-color:var(--green); color: var(--white); background-position: left bottom; } .content a.buttongreen, .content a.buttonblue{ white-space:nowrap; } .content a.buttonblue:hover { border-bottom:0px solid var(--dark-blue); background-color:var(--dark-blue); border-color:var(--dark-blue); color: var(--white); background-position: left bottom; } body#tinymce .buttonblue {background-color: var(--dark-blue) } body#tinymce .buttongreen {background-color: var(--green)} /* diverse Divs ---------------------- */ h1, .h1like {font-family: var(--font-headline); color: var(--text); font-weight: bold; font-size:35px; text-align:left; margin-bottom:30px; max-width: 100%; line-height: 80px; width: 100%} h2, .h2like {font-family: var(--font-headline); color: var(--text); font-weight: bold; font-size:25px; margin-bottom: 30px;} h3,h4,.h4like {font-family: var(--font-headline); color: var(--text); font-weight: bold; font-size:20px; margin-bottom: 20px; letter-spacing: 2px; text-transform: uppercase} h1 span {display:block} #adresse h1, #adresse h2, #adresse h3 {color: var(--text)} .hc_0 {color: var(--text)} .hc_1 {color: var(--black)} .hc_2 {color: var(--aktiv-gruen)} .hc_3 {color: var(--white)} .hc_4 {color: var(--orange)} .black h1 {color: #fff} .black h2 {color: #fff} .split h2 {font-size: 50px; line-height: 65px; margin-top: 50px} h1.smallBox {display: flex} .beigeBox {background-color: var(--beige);font-size: 24px;text-transform: uppercase;width: auto;text-align: center;height: 50px;display: flex;align-items: center;justify-content: center;padding: 0 10px;color: #000;font-weight: 500} .boxOuter {display: flex; justify-content: center} .mobileOnly {display: none} .work {font-family: var(--font-fliesstext); font-weight: 400} .cblack {color: #000000} .bold {font-weight: bold} .normal {font-weight: normal} .tac {text-align: center} .mb20 {margin-bottom: 20px !important} .mb40 {margin-bottom: 40px !important} .mb80 {margin-bottom: 80px !important} .mt40 {margin-top: 40px} .mt80 {margin-top: 80px} .white {background-color:var(--white); border:1px solid #fff} .pink {background-color:#efdfdf; min-height:150px; max-height:469px; overflow:hidden} .pinklinks {float:left; display:block; position:relative} .pinkrechts {float:left; display:block; position:relative} .uc {text-transform: uppercase} #obenOuter {z-index:1000; position:fixed;height:auto;width:100%; margin:0px auto; top: 0px;transition: height 0.5s ease;} #obenOuter::after {content: ''; position: absolute; top: 0; width: 100%; height: 100%; background-color: #FFFFFF; opacity: 0; transition: opacity 0.5s ease} #balkenoben {z-index:1; max-width:100%; margin:0px auto; position:relative;} #logolink {height: 100px; display: block; transform: scale(1); transition: all 700ms; position: relative; left: -15px} #logo {display:block; width:auto; height:100%;} #logoText {font-weight: bold; color: #fff; font-size: 12px; letter-spacing: 2px;margin-left:40px} #name {position:relative; float:left; text-align:left; margin-left:0px; margin-top:38px} #langChange {width:auto; text-align:right; float:right; margin-top:0px; position:absolute; right:20px; top:10px; text-transform:uppercase; display:none} #langChange a {display:block; height:20px;float:left; width:auto; text-align:center; margin-right:10px} #langChange a:hover {color:#009ee0;} #langChange a.langChange:hover {color:#009ee0;} #langChange a.langChange.aktiv {color:#009ee0;} /*#navMobile {display:none} */ #logoMobile {display:none} #langChangeMobile {display:none} .topline {margin-top: 35px; padding: 0 20px; display: flex; justify-content: space-between; align-items: flex-start; transform: scale(1); transition: all 700ms; color: var(--text-grau); font-size: 15px; line-height: 18px} .pauschalen {margin-bottom: 40px; border-bottom: 1px solid var(--beige)} .pauschalen .topline {padding: 0px; justify-content: flex-end} .topline a, .pauschalen .topline a {color: var(--headertext); text-decoration: none} .pauschalen .topline a:hover {text-decoration: none !important; border-bottom: 0px !important} .topline .balkenLeft, .balkenRight {display: flex; height: 40px; flex: 2} .balkenRight {justify-content: flex-end} .topline .topButton {display: flex; align-items: center; padding: 5px 20px; height: 100%} .topline .topButton.buchen {background-color: var(--beige); padding: 5px 10px; border-radius: 5px; text-transform: uppercase} .pauschalen .topline .topButton.buchen {border-radius: 5px 5px 0px 0px;} body.start_1 .pauschalen h3, .allpauschalen h2 {color: var(--rot) !important} .pauschalen h3, .pauschalen h4, .pauschalen .h4like, .allpauschalen h2 {text-align: center} .leistungentext {padding-top: 20px; padding-bottom: 40px} .topline .topButton .icon {height: 100%; margin-right: 10px} .topline .menuOpener {height: 100%; width: 40px} .topline .burger {height: 100%; width: 100%; cursor: pointer; margin-right: 20px;} .topline .topButton.mobileOnly {display: none} .imprint {display: flex; justify-content: center; margin-bottom: 20px} .copyright {font-size: 0.6em; font-style: italic} .socialMedia {display: flex} .socialMedia div[class^="icon-"] {width: 20px; height: 20px; background-size: 100%; background-repeat: no-repeat; margin-left: 15px} .socialMedia .icon-linkedin {background-image: url("/UserFiles/structure/svg/linkedin-white.svg")} .socialMedia .icon-xing {background-image: url("/UserFiles/structure/svg/xing-wihte.svg")} table.preise { width: 100%; border: 0px; margin: 0px; padding: 0px; table-layout: fixed; max-width: 100%; border-collapse: collapse; min-width: 500px; } table.preise tr th, table.preise thead { font-weight: bold; text-align: center; width: auto; border: 1px solid #ccc; margin: 0px; background-color: #f2f2f2; padding-top: 10px; padding-bottom: 10px; } table.preise tr:nth-child(2n) { background-color: #f7efd7; } table.preise tr td { text-align: center; width: auto; border: 1px solid #ccc; margin: 0px; padding: 5px; } /* Navigation ----------------------------- */ /* empty.png in menu, damit der hover - effekt nicht rüttelt */ #navOuter {max-width:100%; background-color: var(--white); color: var(--text); height: 80px; transition: 0.4s ease-in-out; font-weight: 400; position: fixed; height: 100vh; top: 0; z-index: 100; transform: translateX(-120%); box-shadow: 0px 4px 12px #30302E4D;} #navOuter.visible {transform: translateX(0%)} #nav {clear:both; max-width:100%; width: auto; min-width: 600px; margin: 0px auto; display: flex; z-index:3;left:0px; height:100%; position: relative; padding-top: 150px; padding-left: 50px} .menu{text-align:left; position:relative; padding-top:0px;} .menu ul {margin:0px; padding:0px;display: flex; flex-direction: column; align-items: flex-start} .menu ul li {padding:0px; margin:0px; list-style-type:none; width:auto; display:flex; position:relative; z-index:99;flex-direction: column} .menu ul li:last-child {border-right:0px;} .menu ul li.subarrow {margin-bottom: 30px} .menu ul li.subarrow.mobileOnly {display:none} .menu ul li.subarrow:last-child {margin-bottom: 40px} .menu ul li.navWithIcon {flex-direction: row; align-items: center; margin-bottom: 10px} .menu ul li.navWithIcon img {width: 100px; margin-right: 10px} .menu ul li.langChange {flex-direction: row} .menu ul li.langChange .active {font-weight: bold; color: var(--orange)} .menu ul li.aktiv {} .menu ul li a {text-decoration:none; letter-spacing:0em; font-size:20px; display:block; width:100%; line-height:24px; color: var(--text); cursor:pointer; margin-bottom: 3px; text-transform: uppercase} .menu ul li a.small {text-transform: none} .menu ul li .hoverline {width: 0px;height: 3px;background-color: #fff; transition: 0.2s ease-in-out} .menu ul li:hover .hoverline {width: 30px} .menu ul li.active .hoverline {width: 30px} .teaserhomeOuter {display: flex; flex-wrap: nowrap; justify-content: center; position: relative; top:-30px} .teaserHome {display: flex; flex-direction: column; justify-content: center; align-items: center; gap:10px; padding: 70px 20px 40px 20px; width: 33.3333%} .teaserHomeIcon img {height: 80px; width: auto} /* Sticky */ #obenOuter.sticky {height: 100px;} #obenOuter.sticky::after {opacity: 0.9} #obenOuter.sticky .topline{margin:10px 0; transform: scale(1); padding-bottom: 0px} #obenOuter.sticky .topline #logolink {height: 80px; left: -10px} #obenOuter.sticky .topline .icon-tel, #obenOuter.sticky .topline .icon-email {height: 30px; background-size: 25px} /* CONTENT */ #contentOuter {width:100%; height:auto; min-height:200px;} #contentHome {width:auto; z-index:1; max-height:680px; margin:0px auto; position:relative; overflow: hidden; max-width: 1000px; margin-top: 40px;} #contentHome img {width:100%;} #content , .content {width:auto;} .content a {color: var(--black); text-decoration: none} .content a:hover {border-bottom: 1px solid var(--black)} .content:last-of-type {margin-bottom: 0px} .content.black {background-color:#000000} .content.black .contentsection .inhalt {color:#fff} .contentAfter {margin-top: 40px;} #content .contentAfter {margin-top: 0px; width: 100%} #content .contentAfter.noHeader {margin-top: 135px;} #content a {color:#000000} #content ul, .content ul {list-style: none} .headerbild {width: 100%; } .fullpage .headerGallery {height: 100vh} .fullpage .headerGallery .flexslider ,.fullpage .headerGallery .flexslider .slides, .fullpage .headerGallery .flexslider .slides li {height: 100%} .fullpage .headerGallery .flexslider .slides li .inhaltsbild {height: 100%; object-fit: cover; object-position: bottom} .headerGallery {} .headerGallery ul.slides {position: relative} .headerGallery span[class^="pos_"] {display: flex; flex-direction: column; position: absolute; font-family: var(--font-headline); font-size: 80px; font-weight: 400; line-height: 1em; letter-spacing: 12px; color: var(--white); width: 100%; height: 100%; top: 0px; left: 0px; padding: 20px; text-transform: uppercase} .headerGallery span[class^="pos_"] .subtext {font-size: 50px; font-weight: 200} .headerGallery span.pos_ol {justify-content: flex-start; align-items: baseline} .headerGallery span.pos_om {justify-content: center; align-items: baseline} .headerGallery span.pos_or {justify-content: flex-end; align-items: baseline} .headerGallery span.pos_ml {justify-content: flex-start; align-items: center} .headerGallery span.pos_mm {justify-content: center; align-items: center} .headerGallery span.pos_mr {justify-content: end; align-items: center} .headerGallery span.pos_ul {justify-content: flex-start; align-items: end} .headerGallery span.pos_um {justify-content: center; align-items: end} .headerGallery span.pos_ur {justify-content: end; align-items: end} .headerGallery span.pos_mm div, .headerGallery span.pos_om div, .headerGallery span.pos_um div {} .flexslider .slides img.mobileOnly {display: none} .inline-nav {display: flex; width: 1200px; max-width: 100%; margin: 0px auto; justify-content: space-between; position: relative; top: -100px; z-index: 90;} .inline-nav .navigationImg {width: 49%; position: relative; cursor: pointer} .inline-nav .navigationImg img {width: 100%; height: 100%; object-fit: cover;} .inline-nav .navigationImg .overlay {height: 100%; width: 100%; position: absolute; top:0;left:0; background-color: var(--black); opacity: 0.5; transition: 0.3s ease} .inline-nav .navigationImg:hover .overlay {background-color: var(--overlay-gold); opacity: 0.8} .inline-nav .navigationImg .teaserText {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; text-transform: uppercase; color: var(--white); transition: 0.3s ease} .inline-nav .navigationImg:hover .teaserText {color: var(--text-grau)} .inline-nav.zimmerNav .navigationImg {width: 32%;} .circleNavOuter {position: relative; display: flex; justify-content: center; align-items: center; padding: 140px 0; top: 0} .circleNavOuter .circleNavInner {position: relative;} .circleNavOuter .circleNavInner .circleNavElem {position: absolute;} .circleNavOuter .circleNavInner .circleNavElem .arrow, .circleNavOuter .circleNavInner .circleNavElem:hover .arrow_aktiv {display: block; width: 34px;} .circleNavOuter .circleNavInner .circleNavElem .arrow_aktiv, .circleNavOuter .circleNavInner .circleNavElem:hover .arrow {display: none;} .circleNavOuter .circleNavInner .circleNavElem .innerElem {position: absolute; width: 350px; display: flex; align-items: center; cursor: pointer} .circleNavOuter .circleNavInner .circleNavElem:hover .innerElem, .circleNavOuter .circleNavInner .circleNavElem.active .innerElem{ color: var(--orange)} .circleNavOuter .circleNavInner .circleNavElem .innerElem .name {text-transform: uppercase; letter-spacing: 1px} .circleNavOuter .circleNavInner .circleNavElem .innerElem .icon_aktiv, .circleNavOuter .circleNavInner .circleNavElem:hover .innerElem .icon, .circleNavOuter .circleNavInner .circleNavElem.active .innerElem .icon {display: none} .circleNavOuter .circleNavInner .circleNavElem .innerElem .icon, .circleNavOuter .circleNavInner .circleNavElem:hover .innerElem .icon_aktiv, .circleNavOuter .circleNavInner .circleNavElem.active .innerElem .icon_aktiv {display: block;} .circleNavOuter .circleNavInner .circleNavElem:nth-of-type(1) {top: -10px;left: 77px;transform: rotate(337deg);} .circleNavOuter .circleNavInner .circleNavElem:nth-of-type(1) .innerElem {top: -103px;left: -134px;transform: rotate(-337deg);flex-direction: column;} .circleNavOuter .circleNavInner .circleNavElem:nth-of-type(1) .innerElem .name{text-align: center; margin-top: 7px} .circleNavOuter .circleNavInner .circleNavElem:nth-of-type(2) {top: 40px;left: 10px;transform: rotate(308deg);} .circleNavOuter .circleNavInner .circleNavElem:nth-of-type(2) .innerElem {top: -186px;left: -251px;transform: rotate(-308deg); flex-direction: row-reverse} .circleNavOuter .circleNavInner .circleNavElem:nth-of-type(2) .innerElem .name {margin-right: 7px; text-align: end} .circleNavOuter .circleNavInner .circleNavElem:nth-of-type(3) {top: 151px;left: -30px;transform: rotate(270deg);} .circleNavOuter .circleNavInner .circleNavElem:nth-of-type(3) .innerElem {top: -209px;left: -153px;transform: rotate(-270deg); flex-direction: row-reverse} .circleNavOuter .circleNavInner .circleNavElem:nth-of-type(3) .innerElem .name {margin-right: 7px; text-align: end} .circleNavOuter .circleNavInner .circleNavElem:nth-of-type(4) {top: 214px;left: -18px;transform: rotate(249deg); } .circleNavOuter .circleNavInner .circleNavElem:nth-of-type(4) .innerElem {top: -202px;left: -103px;transform: rotate(-249deg); flex-direction: row-reverse} .circleNavOuter .circleNavInner .circleNavElem:nth-of-type(4) .innerElem .name {margin-right: 7px; text-align: end} .circleNavOuter .circleNavInner .circleNavElem:nth-of-type(5) {top: 278px;left: 25px;transform: rotate(226deg); } .circleNavOuter .circleNavInner .circleNavElem:nth-of-type(5) .innerElem {top: -83px;left: -178px;transform: rotate(-226deg);flex-direction: column;} .circleNavOuter .circleNavInner .circleNavElem:nth-of-type(5) .innerElem .name{text-align: center; margin-top: 7px} .circleNavOuter .circleNavInner .circleNavElem:nth-of-type(6) {top: 290px;left: 244px;transform: rotate(142deg);} .circleNavOuter .circleNavInner .circleNavElem:nth-of-type(6) .innerElem {top: -77px;left: -140px;transform: rotate(-142deg);flex-direction: column;} .circleNavOuter .circleNavInner .circleNavElem:nth-of-type(6) .innerElem .name {text-align: center; margin-top: 7px;} .circleNavOuter .circleNavInner .circleNavElem:nth-of-type(7) {top: 204px;left: 307px;transform: rotate(107deg);} .circleNavOuter .circleNavInner .circleNavElem:nth-of-type(7) .innerElem {top: -205px;left: -194px;transform: rotate(-107deg);} .circleNavOuter .circleNavInner .circleNavElem:nth-of-type(7) .innerElem .name {margin-left: 7px} .circleNavOuter .circleNavInner .circleNavElem:nth-of-type(8) {top: 122px;left: 313px;transform: rotate(80deg);} .circleNavOuter .circleNavInner .circleNavElem:nth-of-type(8) .innerElem {top: -210px;left: -143px;transform: rotate(-80deg);} .circleNavOuter .circleNavInner .circleNavElem:nth-of-type(8) .innerElem .name {margin-left: 7px} #contentInnen { text-align:left; max-width:1020px; width:auto; padding-bottom:20px; margin-top:75px} #content .flexslider ul li, #contentInnen .flexslider ul li {margin:0px; left: 0px; max-width: 100%} .contentToNavigate {display: none} .contentToNavigate.active {display: block} .contentsection .line {width:50px; height:10px; margin-bottom:20px; background-color: #000;} .black .contentsection .line {background-color: #fff;} .contentsection {} .layout_0 {max-width: 100% !important; width: var(--content-breite) !important; margin: 0px auto} .layout_0 .contentInnen h2 {position: relative; font-size: 50px; font-weight: 100; line-height: 58px; letter-spacing: 6px; text-transform: uppercase; z-index: 50} .layout_0 .contentInnen .textContent ul, #content .layout_0 .contentInnen .textContent ul {list-style: circle} .layout_0 .contentInnen .textContent ul li, #content .layout_0 .contentInnen .textContent ul li {margin-left: 20px; margin-bottom: 5px} .layout_1 .contentInnen {width: 100%; max-width: var(--content-breite); display: flex; justify-content: space-between; margin: 0px auto} .layout_1 .contentInnen .layout_left {width: 50%; position: relative; padding-top: 10px} .layout_1 .contentInnen .layout_left h2 {position: relative; font-size: 50px; font-weight: 100; line-height: 58px; letter-spacing: 6px; text-transform: uppercase; z-index: 50} .layout_1 .contentInnen .layout_left .hauptbild {height: 75%; width: 100%; position: absolute; top: 50%; transform: translateY(-40%); left: 50px; z-index: 10} .layout_1 .contentInnen .layout_left .hauptbild img {height: 100%; width: 100%; object-fit: cover; object-position: center} .layout_1 .contentInnen .textContent {position: relative; width: 50%;padding: 60px; padding-left: 100px; color: var(--white); letter-spacing: 1.25px; font-weight: 100; min-height: 500px; line-height: 28px} .layout_1 .contentInnen .textContent h3 {font-size:32px; line-height: 33px; letter-spacing: 5px; color:var(--white)} .layout_1 .contentInnen .textContent .buttonAbsolute {position: absolute; right:15px; bottom: -100px} .layout_2 .contentInnen {position: relative;} .layout_2 .layout_left {width: var(--content-breite); max-width: 100%; margin: 0px auto; position: relative; left: calc(0px - ((min(100vw,1920px) - var(--content-breite)) / 2))} .layout_2 .layout_left .hauptbild, .layout_2 .layout_left .hauptbild img {width: 100%} .layout_2 .layout_teaser {position: relative; top:-90px} .layout_2 .teaser {display: flex;flex-direction: row-reverse;width: 100%;max-width: 1440px;margin: 0px auto;align-items: flex-start; position: relative} .layout_2 .teaser.twoImages {align-items:flex-start;} .layout_2 .teaser .teaserImage {width: 60%} .layout_2 .teaser.twoImages .teaserImage {width: 50%} .layout_2 .teaser .teaserImage img {width: 100%} .layout_2 .teaser .teaserTextBlock {width: 40%; text-align: end; padding-right: 100px; padding-top: 120px} .layout_2 .teaser.twoImages .teaserTextBlock {width: 50%; margin-top: 120px} .layout_2 .teaser .teaserTextBlock h3, .pauschalen h3 {font-size: 45px; line-height: 48px; font-weight: 100; text-transform: uppercase; color: var(--aktiv-gruen)} .layout_2 .teaser .teaserIcon {position: absolute; right: 60%; transform: translateX(50%); width: 200px; display: flex; justify-content: center; align-content: center} .layout_2 .teaser .teaserIcon img {width: 75%} .layout_2 .teaser.twoImages .teaserIcon {width: auto; right: 50%; top: 30px} .layout_2 .teaser.twoImages .teaserIcon img {width: 100%;} .layout_3 {max-width: var(--content-breite); margin: 0px auto} .layout_3 .contentInnen {position: relative; display: flex; flex-direction: column-reverse} .layout_3 .contentInnen .hauptbild, .layout_3 .contentInnen .hauptbild img {width: 100%;} .layout_3 .layout_teaser {position: relative; top:150px} .layout_3 .teaser {display: flex;flex-direction: row;width: 100%;max-width: 1440px;margin: 0px auto;align-items:flex-start; position: relative; left: calc(0px - ((min(100vw,1920px) - var(--content-breite)) / 2))} .layout_3 .teaser .teaserImage {width: 45%} .layout_3 .teaser .teaserImage img {width: 100%} .layout_3 .teaser .teaserTextBlock {width: 55%; padding-left: 100px} .layout_3 .teaser .teaserTextBlock h3 {font-size: 45px; line-height: 48px; font-weight: 100; text-transform: uppercase; color: var(--orange)} .layout_3 .teaser .teaserIcon {position: absolute; right: 55%; transform: translateX(47%); width: 200px; display: flex; justify-content: center; align-content: center} .layout_3 .teaser .teaserIcon img {width: 75%} .layout_4 {max-width: var(--content-breite); margin: 0px auto} .layout_4 .contentInnen {position: relative; display: flex; flex-direction: column-reverse} .layout_4 .layout_left {width: var(--content-breite); max-width: 100%; margin: 0px auto; position: relative; right: calc(0px - ((min(100vw,1920px) - var(--content-breite)) / 2))} .layout_4 .layout_left .hauptbild, .layout_4 .layout_left .hauptbild img {width: 100%} .layout_4 .layout_teaser {position: relative; top:150px} .layout_4 .layout_teaser2 {position: relative; top:-150px; z-index: 70} .layout_4 .teaser {display: flex;flex-direction: row;width: 100%;max-width: 1440px;margin: 0px auto;align-items:flex-start; position: relative; /* left: calc(0px - ((min(100vw,1920px) - var(--content-breite)) / 2)) */} .layout_4 .teaser .teaserImage, .layout_4 .teaser.teaser2 .teaserImage {width: 50%} .layout_4 .teaser .teaserImage img, .layout_4 .teaser.teaser2 .teaserImage img {width: 100%} .layout_4 .teaser.teaser2 {flex-direction: row-reverse; align-items: flex-end} .layout_4 .teaser.teaser2 .teaserTextBlock {width: 50%; padding-right: 100px; text-align: end} .layout_4 .teaser .teaserTextBlock {width: 50%; padding-left: 100px} .layout_4 .teaser .teaserTextBlock h3 {font-size: 45px; line-height: 48px; font-weight: 100; text-transform: uppercase; color: var(--rot)} .layout_4 .teaser.teaser2 .teaserTextBlock h3 {color: var(--ruhe)} .layout_4 .teaser .teaserIcon {position: absolute; left: 50%; transform: translateX(-50%); width: 200px; display: flex; justify-content: center; align-content: center} .layout_4 .teaser .teaserIcon img {width: 75%} .layout_5 {max-width: var(--content-breite); margin: 0px auto} .layout_5 .contentInnen {position: relative; display: flex; flex-direction: column} .layout_5 .layout_left {width: var(--content-breite); max-width: 100%; margin: 0px auto; position: relative; right: calc(0px - ((min(100vw,1920px) - var(--content-breite)) / 2))} .layout_5 .layout_left .hauptbild, .layout_5 .layout_left .hauptbild img {width: 100%} .layout_5 .layout_left .buttonAbsolute {position: absolute; top: 50%; transform: translateY(-50%); left: -100px;} .layout_5 .layout_teaser {position: relative; top:-150px} .layout_5 .teaser {display: flex;flex-direction: row-reverse;width: 100%;max-width: 1440px;margin: 0px auto; position: relative;/* left: calc(0px - ((min(100vw,1920px) - var(--content-breite)) / 2)) */} .layout_5 .teaser .teaserImage {width: 50%} .layout_5 .teaser .teaserImage img {width: 100%} .layout_5 .teaser .teaserTextBlock {width: 45%; padding-right: 100px; margin-top: 200px; text-align: end} .layout_5 .teaser .teaserTextBlock h3 {font-size: 45px; line-height: 48px; font-weight: 100; text-transform: uppercase; color: var(--aktiv-gruen)} .layout_5 .teaser .teaserIcon {position: absolute; left: 50%; transform: translateX(-50%); width: 200px; display: flex; justify-content: center; align-content: center} .layout_5 .teaser .teaserIcon img {width: 75%} .layout_6 .contentInnen {width: 100%; max-width: min(100%,1920px); display: flex; margin: 0px auto} .layout_6 .contentInnen .layout_left {width: 50%; position: relative; padding-top: 10px} .layout_6 .contentInnen .textContent h2 {position: relative; font-size: 50px; font-weight: 100; line-height: 58px; letter-spacing: 6px; text-transform: uppercase; z-index: 50} .layout_6 .contentInnen .textContent ul, #content .layout_6 .contentInnen .textContent ul {list-style: circle} .layout_6 .contentInnen .textContent ul li, #content .layout_6 .contentInnen .textContent ul li {margin-left: 20px; margin-bottom: 5px} .layout_6 .contentInnen .layout_left .hauptbild { width: 100%; top: 50%; z-index: 10} .layout_6 .contentInnen .layout_left .hauptbild img {height: 100%; width: 100%; object-fit: cover; object-position: center} .layout_6 .contentInnen .layout_left .buttonAbsolute {position: absolute;right: -100px;top: 10%;} .layout_6 .contentInnen .textContent {width: calc( var(--content-breite) * 0.5);padding: 20px; padding-left: 100px; letter-spacing: 1.25px; font-weight: 100; min-height: 500px; display: flex; flex-direction: column; justify-content: center} .layout_6 .contentInnen .textContent span {line-height: 33px; letter-spacing: 5px;} .layout_7 {max-width: 100% !important} .layout_8 {max-width: 100% !important; width: 1000px !important; margin: 0px auto; text-align: center} .layout_8 h1, .layout_8 h2 {text-align: center; font-size: 45px; line-height: 52px; font-weight: 200; margin-bottom: 10px; letter-spacing: 5px} .layout_8 .inline-nav {top: 0px} .contentsection .inhalt {color: #000000; line-height: 1.6em; } .content#start .contentsection {padding-bottom: 80px; height: calc(100vh - 90px);display: flex;flex-direction: column;align-items: center;justify-content: space-between} .content#projekte {min-height: 0} .content.small .contentsection {min-height: 0px} .bg_0 {} .bg_1 {background-color: var(--aktiv-gruen)} .zimmer {display: none; text-align: center; margin-top: 50px} .zimmer.active {display: block} .zimmer h1 {text-align: center; color: var(--gold); font-size: 45px; line-height: 36px; font-weight: 200; margin-bottom: 10px; letter-spacing: 5px} .zimmer .textBlock {text-align: center; width: 1000px; max-width: 100%; margin: 0px auto} .zimmer .images {margin-top: 150px} .zimmer .images ul.slides {display: flex;flex-wrap: wrap; justify-content: space-between} .zimmer .images ul.slides:after {display: none;} .zimmer .images ul.slides li {width: 32%; max-height: 310px; margin-bottom: 15px} .zimmer .images ul.slides li img {width: 100%; height: 100%; margin-bottom: 15px; object-fit: cover; object-position: center; cursor: pointer} .zimmer .images ul.slides li:first-of-type img {cursor: default; object-fit: contain} .zimmer .images ul.slides li:first-of-type {width: 100%; max-height:980px} /* SPLIT PAGES */ .split {display: flex;} .split .left {width: 35%} .split .right {width: 65%; padding: 30px} .beige {background-color: var(--beige)} .beige .split {flex-direction:row-reverse} .beige h1 {justify-content: flex-end; } .beige h1 .beigeBox{ margin-right: 27%; background-color: #000; color: #fff} .beigeBox.black {background-color: #000; color: #fff} .beige .split .right {padding-left: 0px} .projektBox {width: 100%;display: flex;justify-content: space-between;background-color: var(--beige);height: 120px;align-items: center;padding: 0px 50px;align-self: baseline;position: relative;bottom: 10%;margin-top: 15vh; } .projektBox .projektText {font-size: 36px;line-height: 36px;text-transform: uppercase;font-weight: 500;} .buttonSection {width: 100%; display: flex; justify-content:center; margin: 40px 0px} .buttonOuter {width: 350px;height: 80px;display: flex;align-items: center;justify-content: space-evenly;cursor:pointer;font-weight: bold; background: linear-gradient(to right,var(--beige) 50% ,#000000 50%); background-size: 200% 100%; background-position: right bottom; color: #fff; letter-spacing: 0em; text-transform: uppercase; border-radius: 10px; font-size: 18px; border: 1px solid black; transition: .7s ease} .buttonOuter:hover {background-position: left bottom; color: #000000} .buttonOuter.beige { border: none; align-self: flex-end; background: linear-gradient(to right,black 50% ,var(--beige) 50%); background-size: 201% 100%; background-position: right bottom; color: #000; transition: .7s ease} .buttonOuter.beige:hover {background-position: left bottom; color: #fff} .buttonSection.overVideo, .buttonSection.split {position: relative; height: 0px;width: 100%; margin: 0} .buttonSection.overVideo a, .buttonSection.split a {position: absolute; top: -100px; z-index: 999} #angebotGrid {display:flex; flex-wrap: wrap;margin-top: 80px;} #angebotGrid .angebot {width: 33%; height: 400px; transition: 0.3s ease-in-out; display: flex; flex-direction: column; align-items: center; padding: 50px 0px} #angebotGrid .angebot:nth-of-type(2n-1) {background-color: var(--beige-light)} #angebotGrid .angebot .icon {height: 70px; display: block} #angebotGrid .angebot .iconwhite {height: 70px; display: none} #angebotGrid .angebot .icon img, #angebotGrid .angebot .iconwhite img {height: 100%} #angebotGrid .angebot .angebottext {transition: 0.3s ease-in-out; margin-top: 20px; padding: 0px 20px; color:#000; text-align: center} #angebotGrid .angebot:hover .angebottext, #angebotGrid .angebot.active .angebottext {color:#fff} #angebotGrid .angebot:hover, #angebotGrid .angebot.active {background-color:#000; color: #fff;} #angebotGrid .angebot:hover .icon, #angebotGrid .angebot.active .icon {display: none} #angebotGrid .angebot:hover .iconwhite, #angebotGrid .angebot.active .iconwhite {display: block} #angebotGrid .angebot .lineSmall {width:30px; height:6px; margin-bottom:15px; background-color: #000000; transition: 0.2s ease-in-out} #angebotGrid .angebot:hover .lineSmall {width: 50px} #angebotGrid .angebot .name {text-transform: uppercase; width: 60%; text-align: center; transition: 0.1s ease-in-out;color:#000} #angebotGrid .angebot:hover .name, #angebotGrid .angebot.active .name {color:#fff} .contentsection#projekte, .contentsection#team {min-height: 0px; padding-bottom: 0px} .imageGrid {display: flex; flex-wrap: wrap; margin: 0px auto; max-width: 2560px} .imageGrid img {width: calc(100% /3); height: auto; border: 1px solid black; align-self: flex-start} .imageGrid.team-img img {width: 25%; height: auto} .videoBanner {height: 400px; overflow:hidden; display: flex; flex-direction: column} #projektevideo {opacity: 0.5} #kundenGrid, #partnerGrid {display: block; width: 100%; max-width: calc(100% - 50px)} #kundenGrid {margin: 0px auto;} #kundenGrid .kunde {display: flex;flex-direction: column;justify-content: space-between;min-height: 150px; width: 100%;} #partnerGrid .partnerOuter, #kundenGrid .kundeOuter {display: flex;justify-content: center; width: 100%;} #partnerGrid .partner {display: flex;flex-direction: column;justify-content: space-between;min-height: 150px; width: 300px;} #partnerGrid .partner .lineSmall {width:30px; height:6px; margin-bottom:15px; background-color: #000000; -webkit-transition: opacity 1s ease-in-out;-moz-transition: opacity 1s ease-in-out;-o-transition: opacity 1s ease-in-out;transition: opacity 1s ease-in-out;} #partnerGrid .partner .partnerImg {max-width: 100%; margin-bottom: 10px; width: 100%} #partnerGrid .partner:hover .lineSmall {width: 50px} #kundenGrid .kunde {height: 400px} #kundenGrid .kunde .bottom {display: flex; height: 75%;color:#000; display: flex; flex-direction: column; font-size: 14px; align-items: center; margin-top: 60px} #kundenGrid .kunde .bottom .imgSwitcher {width: 150px; height: 150px; position: relative; display: flex; justify-content: center; align-items: center; box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;} #kundenGrid .kunde .bottom img.kundenImg {width: 90%; max-width: none; margin-bottom: 0px; transition: 0.3s ease-in-out; position: absolute} #kundenGrid .kunde:hover .bottom img.kundenImg.bw {opacity:0} #kundenGrid .kunde .bottom .name {margin-top: 15px; font-weight: bold; text-transform: uppercase} #kundenGrid .kunde .bottom .company {margin-top: 5px; text-transform: uppercase} #kundenGrid .kunde .top {color: #000; height: 25%; display: flex; justify-content: center; padding: 10px; padding-top: 40px; text-align: center; font-size: 21px; line-height: 35px} .inputBlock {margin-bottom: 50px;} .inputBlock .name {font-weight: 600; font-size: 24px; margin-bottom: 30px} .inputBlock .flexer {display: flex; gap: 40px;} .inputBlock input[type="radio"] {margin-bottom: 0; height: 20px} .inputBlock input#plz {width: 300px} .inputBlock select {display: block; height: 40px; padding-left: 10px; width: 40%; margin: 30px 0} .inputBlock select.small {width: 10%} .inputBlock textarea {display: block; width: 100%; resize: none; margin: 30px 0;font-family: var(--font-headlines); font-size:16px; padding: 10px} /* .slick-prev::before, .slick-next::before {content:""} .slick-prev, .slick-next {top:47%; width: 100px; height: 30px;} .slick-prev, .slick-prev:hover, .slick-prev:focus {background-image: url("/UserFiles/structure/arrow_long_left.png"); left: -150px; background-size: cover} .slick-next, .slick-next:hover, .slick-next:focus {background-image: url("/UserFiles/structure/arrow_long_right.png"); right: -150px; background-size: cover} */ .slick-prev::before {content: "←"; color: black} .slick-next::before {content: "→"; color: black} #carouselcontainer ul li {margin-left:0px} #inhaltsbildouter {width:100%; display:block; } .inhaltsbild {max-width:100%; width:100%; display: block} .flexslider {padding-bottom:0px; width:100%; max-width:100%} .flexslider .slides img {display: block;width: 100%;} .flex-control-nav {z-index: 1000} #spruch {font-size: 21px; color: #663333; text-align: center; padding: 70px 0px;} .teaserMenu {display: flex; justify-content: space-between; cursor: pointer} .teaserMenu .menuBox {display: block} .teaserMenu .menuBox .menuBoxName {text-align: center; margin-top: 15px; font-family: var(--font-fliesstext); font-size: 16px; font-weight: normal;} .hr {border: 1px solid #cccccc} .contentBox {margin-top: 50px; display: flex; justify-content: space-between} .contentBox .contentText {width: 50%} .contentBox .contentText .text, .contentBox .contentText .text span{font-family: var(--font-fliesstext); font-size: 16px !important} .contentBox .contentImg {max-width: 520px} .hidden {display:none; transition: all 0.2s ease} .visible {display:flex; transition: all 0.2s ease} .kontakt {text-align: center; padding-top: 100px; margin-bottom: 80px;} .kontakt .anfragen {color: #b40e32} .tarifeOuter {display: flex; justify-content: center; align-items: center; margin-top: 80px} .tarifeOuter .tarif {min-height: 500px; width: 300px; border: 3px solid #000000; margin: 0px 25px; display: flex; flex-direction: column; align-items: center; transition: 0.3s ease-in-out} .tarifeOuter .tarif:hover {transform: scale(1.2)} .tarifeOuter .tarif .tarifHead {height: 150px; width: 100%; border-bottom: 3px solid #000000;display: flex; flex-direction: column;align-items: center; padding: 10px;justify-content: center} .tarifeOuter .tarif .tarifHead .name {font-size: 23px;font-weight: 600;margin-bottom: 10px;} .tarifeOuter .tarif .tarifHead .preis {font-size: 46px;line-height: 48px;font-weight: bold;} .tarifeOuter .tarif .tarifBottom {width: 100%; display: flex; flex-direction: column; align-items: center; padding: 20px 10px; background-color: #000000; min-height: 350px; color: #ffffff} .tarifeOuter .tarif ul.vorteile {width: 100%; display: flex; flex-direction: column; align-items: center} .tarifeOuter .tarif ul.vorteile li {list-style: none; margin-bottom: 20px; } .dankeOuter {width: var(--content-breite); max-width: 100%; margin: 0px auto; display: flex; flex-direction: column; align-items: center; padding-bottom: 50px} .dankeOuter .dankeBild {width: 60%} .dankeOuter h1 {text-align: center; margin-top: 30px} /** Carousel **/ #carouselcontainer {width:935px; height:340px; text-align:left;} #pfeil_links1 {position:relative;top:160px; float:left; z-index:9999;left:-30px} #pfeil_links1 a {color:#fff; text-decoration:none} #pfeil_rechts1 {position:absolute;top:0px; right:0px; float:right; margin-top:160px; z-index:9999; margin-right:24px;} #pfeil_rechts1 a {color:#fff; text-decoration:none} .jcarousel {position: relative;overflow: hidden;width: 1020px;height: 340px;} .jcarousel ul {width: 2000em;position: relative;list-style: none;margin: 0;padding: 0;} .jcarousel li {width:1020px; height:340px;cursor: pointer; overflow:hidden; float:left;} .jcarousel-control-prev{color: #fff;height: 40px; position: absolute;text-align: center;text-decoration: none;text-shadow: 0 0 1px #000;width: 22px;background-image:url(/UserFiles/structure/arrows.jpg);background-repeat:no-repeat;} .jcarousel-control-next {color: #fff;height: 40px;position: absolute;text-align: center;text-decoration: none;text-shadow: 0 0 1px #000;width: 22px;background-image:url(/UserFiles/structure/arrows.jpg);background-position:0px -45px;} .jcarousel-control-prev:hover, .jcarousel-control-next:hover {} .jcarousel-control-prev.inactive, .jcarousel-control-next.inactive {cursor: default;opacity: 0.5;} /* Ende Carousel */ /* Faqs */ #faqs {display: flex; flex-wrap: nowrap; justify-content: flex-start;align-items: flex-start; margin-bottom: 20px; background-color: var(--white); width: var(--content-breite); position: relative} #faqs .faqheadlines {width: 300px; cursor: pointer} #faqs .faqheadlines .faqheadline {padding: 10px} #faqs .faqheadlines .faqheadline.active {background-color: var(--green); display: block; font-weight: bold; border-radius: 5px 0px 0px 5px} /*#faqs .faqheadlines .faqheadline.active {background-color: rgba(var(--green-rgb),0.8); display: block; font-weight: bold; border-radius: 5px}*/ #faqs .faqtexte {width: calc(100% - 300px);} #faqs .faqtexte .faqtext {padding: 10px 10px 5px 10px} #faqs .faqtexte .faqtext.inactive{display: none;} #faqs .faqtexte .faqtext.active {display: block; background-color: var(--green); border-radius: 0px 5px 5px 0px} /*#faqs .faqtexte .faqtext.active {display: block; background-color: rgba(var(--green-rgb),0.8); border-radius: 5px}*/ #adresse {width:100%;height:auto; padding-left:0px; text-align:left; position:relative; margin:0px auto; display: flex; align-items: flex-start; justify-content: center; color: var(--footertext);background-color: var(--dark-blue); padding-top: 90px; padding-bottom:40px; z-index:90} #adresseInnen {width: var(--content-breite); max-width:100%; margin:0px auto; position:relative; text-align:left; font-size:18px; line-height: 24px; display:flex; align-items: stretch; justify-content: space-between} #adresseInnen .kontaktDaten {text-align: center} #adresse #adresseInnen > div {display: flex; flex-direction: column; padding: 0px 10px 0px 10px; font-size: 0.9em} #adresse #adresseInnen .right {padding-left: 25px; justify-content: space-between} #adresse #adresseInnen .right .text {font-size: 48px; font-weight: bold; line-height: 48px; text-align: right} #adresse .normal {} #adresse .footerNav a {padding:0px; margin:0px; list-style-type:none; width:auto; float:left; text-align:center; display:block; position:relative; z-index:99; margin-right:23px;color: #fff9f5} #adresse a {color:var(--footertext);text-decoration: none} #adresse .footerNav a:last-child {margin-right:0px;} #adresse ul li {margin-left: 1px; list-style-type: none; margin-bottom: 1rem; padding: 0px 0 1px 25px; background: url("/UserFiles/structure/svg/point-white.svg") no-repeat left 5px; background-size: 13px} #adresse .guteluise {display: flex; flex-direction: column; align-items: center; margin-bottom: 20px} #adresse .guteluise img {width: 140px; max-width: 100%} .socialIcons {display: flex;justify-content: center;height: 40px;} .socialIcons img {height: 100%;margin: 0px 8px;} #newsletterAnmeldung {width: 160px; max-width: 100%} #newsletterAnmeldung input {color: var(--white)} #newsletterAnmeldung input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: var(--light-grey); opacity: 1; /* Firefox */ } #newsletterAnmeldung input::-ms-input-placeholder { /* Internet Explorer 10-11 */ color: var(--light-grey); } #newsletterAnmeldung input::-ms-input-placeholder { /* Microsoft Edge */ color: var(--light-grey); } #lastLine {background-color: var(--light-blue); width: 100%; padding-top: 35px; padding-bottom: 35px;} #lastLine .inner {width: var(--content-breite); max-width: 100%; margin: 0px auto; color: var(--white); display: flex; justify-content: space-between} #lastLine .inner ul {display: flex; justify-content: space-between; list-style-type: none;} #lastLine .inner ul li {padding-left: 10px} #lastLine .inner ul li.small {font-size: 0.8em; font-style: italic} #lastLine a {color: var(--white) !important; text-decoration: none} .subnav {position:relative} .subnav a:hover, .subnav a.aktiv {color:var(--black)} .subnavContent {border-right:1px solid #edecec; margin-right:15px; float:left} .subnavContent .subnav {border-top:1px solid #edecec; border-bottom:1px solid #edecec; margin-left:-30px; padding-left:25px; height:35px; padding-top:5px; clear:both} .subnavContent .subnav:first-child {border-bottom:0px} .contentAfterSubnav {float:none; position:relative; margin-left:140px; width:auto} #content .subnavOuter {float:left; width:auto; position:relative} #content .subnavOuter .subnavContent .subnav a.subnavlink {color:#7f7e7e; font-size:13px} #content .subnavOuter .subnavContent .subnav a.subnavlink:hover {color:#990066; font-size:13px} #content .subnavOuter .subnavContent .subnav.aktiv a.subnavlink {color:#990066; font-size:13px} #claim {position:absolute; z-index:99999999999999999; top:305px; left:35px; color:var(--white); font-size:2.25em} #created {position:absolute; top:50px; left:25px; z-index:1000000; background-color:var(--white); width:900px; border:1px solid #999; border-radius:5px; display:none; padding:30px; box-shadow: 1px 1px 5px 5px #eee; } #created a {text-decoration:underline;} #createdcloser {position:absolute; top:-15px; left:980px; background-image:url(/UserFiles/structure/close.png); width:30px; height:30px; text-indent:-10000px; cursor:pointer} #bottom {max-width:1020px; width:100%; text-align:right; margin-top:10px; margin-left:0px; margin-bottom:10px} .breadcrumps {position:absolute; top:-25px; width:1020px; text-align:right; background-color:var(--white)} .nozoom {border:0px} a.higslide img {border:0px} .platzhalter {color:var(--white)} /* Formularfelder ---------------- */ .formtabelle {margin-top:20px} input,button{font-family: var(--font-headlines); font-size:16px; background:transparent; border:none; border-bottom:1px solid rgba(48,48,48,0.4); margin-bottom:30px; height:40px; color:var(--black); padding-left:10px; width:100%; outline: none;transistion: 0.3s ease-in-out} input:focus {border-bottom:1px solid rgba(48,48,48,1)} label {margin-bottom: 5px} button.white {background-color: var(--white); border-radius: 5px; border: 1px solid var(--white); color: var(--black); text-transform: uppercase; font-family: var(--font-headline), Open Sans, sans-serif; font-weight: bold} .anabmelden {float:left; margin-right:10px; border:0px } #newslettersubmit {width:162px; text-align:center} #password {width:123px; margin-top:5px; color:#87888a; padding-left:3px} #commentsUser {font-family: var(--font-fliesstext);font-size:16px; overflow:auto; font:100%; padding-left:10px; padding-top:10px; white-space: pre-wrap; width:100%; height:170px; border:1px solid rgba(48,48,48,0.4); border-radius:2px; background:transparent; resize: none; outline: none;} #commentsUser:focus {border: 1px solid rgba(48,48,48,1)} #Senden {cursor:pointer; width:300px; color:#000000; background-color: var(--beige); color: var(--white); border: 0px !important; position:relative; z-index:100000; height:40px; margin-top:30px; margin-bottom:20px; font-size:16px; font-weight:bold; padding-left: 0px; display: inline-flex; justify-content: center; align-items: center} #Senden .arrow {margin-left: 10px; transition: 0.3s ease-in-out} #Senden:hover .arrow {margin-left: 25px} #formDanke {color:#000000; display:none} #formularOuter {display: flex; margin-top:20px} #formularOuter #eform {width: 100%;} #formularOuter .kontaktDaten {padding-left: 50px; padding-top: 20px; color: #000000; margin-bottom: 50px} .socialLink {position: fixed; bottom: 0; right: 0; background-color: #000000; color: #fff; height: 50px; width: 150px; overflow: hidden; z-index:99} .socialLink .sl {display: flex; height: 100%; align-items: center; padding:8px; transition: 0.6s ease-in-out; justify-content: space-evenly} .socialLink a {color:#fff} .socialLink .sl img {height: 100%} .socialLink .facebook.sl {background-color: #4267B2} .socialLink .instagram.sl {background:linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);} img {border:0px;} .highslide > img{border:10px solid #F00;} .image {border:0px} .emailcodierung{color:#000} .emailcodierung > a{} .clearer {clear:both} .fancybox-skin {background: none repeat scroll 0 0 #333;} .fancybox-title {color:var(--white); padding-left:10px;} .downImg {width:20px; margin-right:10px} /*mobile Nav*/ #mobileOpenerOuter {display:none; position:absolute; width:30px; right:10px; margin-top:0px; z-index:101; height:100%; top: 25px} #navOuterMobile {display:block; width:100%; height:50px; background-color:var(--white)} #navMobileOpener {display:block; padding-right:0px; cursor:pointer; width:30px;} #navMobileOpener .balken {width:30px; height:5px; background-color:var(--green); margin-top:5px} #navMobileCloser {display:none; padding-right:0px; cursor:pointer; width:30px} #navMobileCloser .balken {width:30px; height:5px; background-color:#fff9f5; margin-top:5px} #navMobileMenu {position:absolute; width:100%; height: 100%; left:0px; min-height:100px; z-index:100000;color:#666; padding:0px; display: none; transform: translateX(100%); transition: .5s ease-in-out} #mobileCloser {position: absolute; cursor: pointer; top: 20px; right: 20px; height: 40px; width: 40px; background-image: url("/UserFiles/structure/svg/mobile_closer_white.svg"); background-size: cover} .menuMobile { padding-bottom: 10px; padding-top: 10px; height: 100%; display: flex; justify-content: center; align-items: center; } img.highslide {cursor:pointer} .magenta, div.magenta, strong.magenta, a.magenta, h1.magenta, h2.magenta, h3.magenta, h4.magenta, td.magenta {color:#9d005c} p.magenta, span.magenta {color:#9d005c} .fancybox-opened .fancybox-skin { background-color:#ffffff !important} .formtabelle td {padding-bottom:20px}