/* kerschbaum-consulting - 18.09.2021 */ @import url("/css/styles_fonts.css"); :root { --black: #000000; --white: #ffffff; --grey: #555555; --dark-grey: #e9e9e9; --light-grey: #f6f6f6; --green: #aecb06; --green-rgb: 174, 203, 6; --text: #555555; --headertext: #555555; --teasertext: #232323; --navitext: #ffffff; --footertext: #9ca6bf; --button-bg: #9ca6bf; --teaser-hell-bg:#f6f6f6; --teaser-dunkel-bg:#e9e9e9; --opinions-bg:#e9e9e9; --dark-blue:#003c7c; --light-blue:#0074be; --content-breite:1200px; --font-fliesstext: 'Montserrat','Open Sans', sans-serif; --font-navtext: 'Montserrat','Open Sans', sans-serif; --font-headline: 'Roboto','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: 16px; line-height: 19px; background-color:#fff; margin:0px; padding:0px} body p, body div {} body#tinymce {padding: 20px !important} body#tinymce ul {margin-left: 20px} /* 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 {font-family: var(--font-headline); color: var(--black); font-weight: bold; font-size:35px; text-align:left; margin-bottom:30px; max-width: 100%; line-height: 80px; width: 100%} h2 {font-family: var(--font-headline); color: var(--black); font-weight: bold; font-size:25px; margin-bottom: 30px;} h3 {font-family: var(--font-headline); color: var(--black); font-weight: bold; font-size:15px; margin-bottom: 30px;} h1 span {display:block} #adresse h1, #adresse h2, #adresse h3 {color: var(--white)} .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} .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} .mb40 {margin-bottom: 40px} .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} #obenOuter {z-index:1000; position:fixed;height:230px;width:100%; margin:0px auto; background-color:var(--white); margin-bottom: 20px; top: 0px;transition: height 0.5s ease;} #balkenoben {z-index:1; width: var(--content-breite); 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-bottom: 30px; display: flex; justify-content: flex-start; align-items: center; color: var(--headertext); transform: scale(1); transition: all 700ms;} .topline a {color: var(--headertext); text-decoration: none} .topline .icon {width: auto; display: flex; align-items: center} .topline .icon-tel {background-image: url("/UserFiles/structure/svg/phone-call-green.svg"); background-size: 30px; padding-left: 40px; background-repeat: no-repeat; background-position: left center; height: 80px; margin-right: 80px; margin-left: 80px; transform: scale(1); transition: all 700ms;} .topline .icon-email {background-image: url("/UserFiles/structure/svg/email-green.svg"); background-size: 30px; padding-left: 40px; background-repeat: no-repeat; background-position: left center; height: 80px; transform: scale(1); transition: all 700ms;} .topline .icon-tel.mobile {display: none} .topline .icon-email.mobile {display: none} .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")} #baustelle {width: 100vw; height: 100vh;} #baustelle .baustelleHead {height: 20%; width: 100%; max-width: 1024px; margin: 0px auto; position: relative} #baustelle .baustelleHead .eroffnung {height: 160%; width: auto; position: absolute; left: 0px; top: 10px} #baustelle .baustelleHead .logo {height: 80%; width: auto; position: absolute; right: 0px; top: 20px} #baustelle .baustelleContent {width: 1024px; max-width: 100%; margin: 0px auto} #baustelle .baustelleContent a {color: #000; text-decoration: none} /* Navigation ----------------------------- */ /* empty.png in menu, damit der hover - effekt nicht rüttelt */ #navOuter {max-width:100%; background-color: var(--dark-blue); color: var(--white); height: 80px; transition: 0.4s ease-in-out; font-weight: bold} #nav {clear:both; max-width:100%; width: var(--content-breite); margin: 0px auto; display: flex; z-index:3;left:0px; height:100%; position: relative; justify-content: space-between; align-items: center} .menu{text-align:left; position:relative; padding-top:0px; /*color:#676767;*/ background-image:url(/UserFiles/structure/empty.png); background-repeat:repeat;} .menu ul {margin:0px; padding:0px;display: flex;} .menu ul li {padding:0px; margin:0px; list-style-type:none; width:auto; text-align:center; display:flex; position:relative; z-index:99; margin-right:80px;flex-direction: column} .menu ul li:last-child {border-right:0px; margin-right:0px} .menu ul li.aktiv {} .menu ul li a {text-decoration:none; letter-spacing:0em; font-size:16px; display:block; width:100%; float:left; height:19px; border-bottom:2px solid transparent; color: #fff9f5; cursor:pointer; margin-bottom: 3px} .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%} .teaserHome:nth-child(even) {background-color: var(--teaser-hell-bg)} .teaserHome:nth-child(odd) {background-color: var(--teaser-dunkel-bg)} .teaserHomeIcon img {height: 80px; width: auto} /* Sticky */ #obenOuter.sticky {height: 100px} #obenOuter.sticky #navOuter {height: 40px} #obenOuter.sticky .topline{margin: 0px 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.fullpage {margin-top: 245px} .content.black {background-color:#000000} .content.black .contentsection .inhalt {color:#fff} .contentAfter {margin-top: 40px;} #content .contentAfter {margin-top: 0px; width: 100%} #content a {color:#000000} .headerbild {width: 100%; } .headerGallery {} .headerGallery ul.slides {position: relative} .headerGallery span[class^="pos_"] {display: flex; position: absolute; font-family: var(--font-headline); font-size: 35px; font-weight: bold; line-height: 1.1em; color: var(--dark-blue); width: 100%; height: 100%; top: 0px; left: 0px; padding: 20px} .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 {padding-left: 200px} #contentInnen { text-align:left; max-width:1020px; width:auto; padding-bottom:20px; margin-top:75px} #content ul li, #contentInnen ul li, .content ul li {margin-bottom: 10px; position: relative; left: 15px; max-width: calc(100% - 15px)} #content .flexslider ul li, #contentInnen .flexslider ul li {margin:0px; left: 0px; max-width: 100%} .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_7 {max-width: 100% !important} .layout_8 {max-width: 100% !important} .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} /* 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} .arrow {height: 25px; } .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} /* .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: 0 px 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:100} #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} #nav_unten {height:20px; border-top:2px solid #eee; padding-top:20px; padding-bottom:20px; width:950px; padding-left:30px;} #nav_unten a {display:block; float:left; margin-right:40px; font-size:20px;} #nav_unten a:hover {color:#000;} #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 #adresseInnen .right .socials {display: flex; align-items: center; width: 100%; justify-content: flex-end} #adresse #adresseInnen .right .socials a {height: 60px; display: block} #adresse #adresseInnen .right .socials a img {height: 100%} #adresse #adresseInnen .right .socials a.insta {height: 55px; margin-left: 20px} #adresse #adresseInnen .right .socials a.linkedin {height: 50px; margin-left: 33px} #adresse .right .footerNav {width: 100%; display: flex; justify-content: space-between} #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} #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 {width:125px; float:left; position:relative} .subnav a:hover, .subnav a.aktiv {color:#990066} .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:100%; color:#000000; background-color: var(--green); 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: 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%;display: flex;flex-direction: column;} #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: block; 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}