@import "tiny.css";
@import "../fonts/Helvetica-CE.css";

/* COOKIE BANNER */
#cookieBanner_modal {position:fixed;bottom:0;left:0;right:0;}
#cookieBanner_root {position:fixed;z-index:100;left:0;bottom:0;right:0;background:rgba(240,240,240,0.9);font-family:Arial, sans-serif;font-size: 14px;letter-spacing:unset;line-height:1.5;font-weight:normal;color:#000;}
.cookieBanner_contentwidth {position:relative;margin:20px auto 10px auto;max-width:1240px;padding:0 10px;box-sizing:border-box;}
.cookieBanner_title {font-weight:bold;font-size:20px;margin-bottom:5px;}
.cookieBanner_subtitle {margin-bottom:10px;}
.cookieBanner_options {position:relative;}
.cookieBanner_options_end {float:none;clear:both;}
.cookieBanner_optgroup {float:left;margin:0 40px 15px 0;}
.cookieBanner_optgroup_option {position:relative;margin-bottom:5px;}
.cookieBanner_optgroup_option input[type=checkbox] {width:auto;height:auto;margin:3px 0 0 0;padding:0;line-height:1;position:absolute;}
.cookieBanner_optgroup_option_label {padding:0 0 0 22px;position:relative;display:block;max-width:300px;}
.cookieBanner_optgroup_option_marked .cookieBanner_optgroup_option_label {font-weight:bold;}
.cookieBanner_optgroup_option_label label {margin-left:-22px;padding-left:22px;}
.cookieBanner_optgroup_option_label .plus, .cookieBanner_optgroup_option_label .minus {display:inline-block;width:16px;text-align:center;cursor:pointer;font-weight:normal;}
.cookieBanner_optgroup_option_description {font-size:12px;line-height:1.2;font-weight:normal;}
.cookieBanner_button {display:inline-block;border:0;border-radius:0;margin:0 10px 10px 0;padding:5px 10px;font-size:14px;outline:0;line-height:1.2;color:#333;cursor:pointer;}
.cookieBanner_button.cookieBanner_button_primary {background:#098014;color:#fff;}
.cookieBanner_button.cookieBanner_button_primary:hover {background:#086c11;color:#fff;}
.cookieBanner_button.cookieBanner_button_secondary {background:#333;color:#fff;}
.cookieBanner_button.cookieBanner_button_secondary:hover {background:#111;color:#fff;}
@media screen and (max-width: 720px) {
    #cookieBanner_root {max-height:100%;overflow:auto;-webkit-overflow-scrolling:touch;}
    .cookieBanner_contentwidth {margin:10px auto 0 auto;}
    .cookieBanner_button {padding:5px 5px;margin:0 5px 10px 0;}
}
/* ENDE COOKIE BANNER */


/* ALLGEMEIN */
body, html {margin: 0; padding: 0; scroll-behavior: smooth;     font-family: 'Open Sans', sans-serif; font-size: 20px; font-weight: 300;}
.BlockContent {padding: 0 50px; box-sizing: border-box;}
.clearingItem {clear: both; float: unset;}
picture {width: 100%; height: auto;}

/* HEADER */
.BlockHeader {width: 100%; height: 800px; background-size: cover; background-position: 50% 50%; position: relative;}
.HeaderContentWrapper {background: rgba(0, 48, 94, 0.7); position: absolute; top: 32px; bottom: 32px; left: 32px; right: 32px; padding: 63px 246px 118px 246px; box-sizing: border-box;}
.logo {}

.ProductName {margin-top: 48px; color: #fff; font-size: 32px; font-weight: 600;}
.Headline {margin-top: 24px; color: #fff; font-size: 64px; font-weight: 600; width: 60%; line-height: 68px;}
.HeaderContent {color: #fff; width: 440px; margin-bottom: 82px;}
.HeaderButton {padding: 20px 30px 15px 30px;  text-transform: uppercase; font-weight: 500; background: #FF5000; text-align: center; display: inline; font-family:'Helvetica-CE-55-Roman'; transition: all 500ms; }
.HeaderButton:hover {background: #fff; color: #FF5000;}
a .HeaderButton {color: #fff; font-weight: 500; text-decoration: none; font-size: 18px; letter-spacing: 1px;}
.HeaderContentWrapper a {text-decoration: none;}

.HeaderImage {width: 450px; position: absolute; bottom: 0; right: 200px;}


/* TRIPLE CONTENT BLOCK */
.TripleBlockContent {width: 100%; background: #fff; padding-top: 106px; text-align: center; padding-bottom: 150px; padding-left: 50px; padding-right: 50px; box-sizing: border-box;}
.TripleBlockContent-Header {color: #00305E; font-size: 48px; text-align: center; width: 610px; margin: 0 auto; font-weight: 600;}

.TripleBlockContent-Tiles {display: grid; grid-template-columns: repeat(3, 1fr); gap: 72px; margin: 0 auto; width: 75%; margin-top: 106px;}
.Single-Tile {width: 100%; min-height: 398px; background: #00305E; padding-bottom: 60px; box-sizing: border-box;}
.checkimage {background-image: url(./../img/check.svg); width: 75px; height: 75px; border-radius: 50px; background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; margin: 0 auto; margin-top: 74px;}
.Tile-Title {margin-top: 34px; color: #fff; font-size: 32px; font-weight: 600; width: 100%;padding: 0 20px;box-sizing: border-box;}
.Tile-Content { margin: 0 auto; margin-top: 14px; width: 65%; color: #fff;}


/* SIDE IMAGE BLOCK */
.SideImageBlock-Wrapper {background: #F8F8F8; width: 100%; box-sizing: border-box; padding: 50px 50px;}
.SideImageBlock {width: 90%; margin: 0 auto; padding: 50px 0px;}
.SideImage {width: 536px; background-size: cover; background-repeat: no-repeat; background-position: 50% 50%;}
.SideImage img {width: 100%; height: auto;}
.SideContent-Wrapper {width: calc(100% - 656px); min-height: 536px; padding-top: 110px; box-sizing: border-box;}
.SideHeadline {font-size: 48px; font-weight: 600; line-height: 64px; width: 55%; color: #00305E;}
.SideContent {width: 70%; margin-top: 50px;}


/* SIDE IMAGE BLOCK */
.logoBlue {margin-bottom: 30px;}
.SideImageBlock-WrapperBlue {background: #00305E; width: 100%; box-sizing: border-box; padding: 50px 50px;}
.SideImageBlockBlue {width: 95%; margin: 0 auto; padding: 50px 0px;}
.SideImageBlue {width: 536px; height: 536px; background-size: contain; background-repeat: no-repeat; background-position: 50% 50%;}
.SideContent-WrapperBlue {width: calc(100% - 656px); min-height: 536px; padding-top: 50px; box-sizing: border-box;}
.SideHeadlineBlue {font-size: 48px; font-weight: 600; line-height: 64px; width: 75%; color: #fff;}
.SideContentBlue {width: 100%; margin-top: 50px; color: #fff;}



/* CUSTOMER SLIDER */
.CustomersWrapper {width: 100%; height: auto; padding: 100px 50px 100px 50px; box-sizing: border-box;}
.CustomerBlockTitle {width: 100%; padding: 0 50px; box-sizing: border-box; text-align: center; font-size: 48px; font-weight: 600; color: #00305E;}

.CustomerSlider {max-width: 1300px; margin: 0 auto; margin-top: 50px; }
.Singleslide { min-height: 540px!important;}
.SingleslideInner {height: 100%; background: #F7F7F7; width: 90%; margin: 0 auto; padding: 70px 70px; box-sizing: border-box;}
.SlideHead {width: 100%; min-height: 100px; margin-top: 20px;}
.leftslidehead {float: left; width: 100px;}
.customerimg {width: 100px; height: 100px; background-color: #00305E; background-size: contain; background-repeat: no-repeat; background-position: 50% 50%; border-radius: 50px;}
.ratingstar {color: #FFC400;}
.rightslidehead {float: left; width: calc(100% - 130px); margin-left: 30px;}
.CustomerName {font-size: 18px; color: #00305E; font-weight: 600; }
.Application {font-size: 12px; color: #707070;}
.rating {margin-top: 15px;}
.SlideBody {margin-top: 40px;}


/* ACTION BLOCK */
.ActionBlock {width: 100%; min-height: 863px; background-size: cover; position: relative;  box-sizing: border-box; padding-top: 85px; padding-bottom: 85px;}
.overlay {width: 100%; height: 100%; background: rgba(255, 255, 255, 0.7); position: absolute; z-index: 1; top: 0;}
.ActionblockTitle {position: relative; z-index: 2;font-size: 48px; color: #fff; font-weight: 600; width: 60%; margin-bottom: 25px;}
.ActionblockContent {position: relative; z-index: 2; color: #fff; margin-bottom: 80px;}
.ActionBlock a {text-decoration: none;}
.ActionBlock .HeaderButton {background: #00305E; color: #fff; position: relative; z-index: 2; top: 30px;}
.ActionBlock .HeaderButton:hover {background: #fff; color: #00305E;}



/* FROM CONTENT */
.BeratungFrom {max-width: 1088px; min-height: 672px; padding: 50px 84px 84px 84px; box-sizing: border-box; margin: 0 auto; background: #00305E; position: relative; z-index: 3;}
.ContactForm-Wrapper {max-width: 920px; width: 100%; min-height: 360px; padding: 50px; box-sizing: border-box; position: relative; background: #fff;}
.HeadlineQuestion {font-size: 24px; font-weight: 600; color: #00305E; margin-bottom: 35px;}

.optionsContainer {margin-top: 20px;}
.ContactForm-Wrapper .formstep2 .option {transition: all 300ms; cursor: pointer; max-width: 118px; width: 100%; height: 64px; Border: solid 1px #00305E; color: #00305E; float: left; line-height: 64px; margin-right: 20px; text-align: center; margin-bottom: 20px;}
.ContactForm-Wrapper .formstep2 .option:hover {color: #fff;  Border: solid 1px #fff; background: #00305E;}
.ContactForm-Wrapper .formstep2 .option.active {color: #fff;  Border: solid 1px #fff; background: #00305E;}

.stepback {transition: all 500ms; position: absolute; top: 30px; right: 50px; width: 120px; height: 64px; line-height: 64px; text-align: center; Border: solid 1px #00305E; color: #fff; background: #00305E;}
.stepback:hover {color: #00305E; Background: #fff;  Border: solid 1px #00305E;}
.stepback.next {right: 50px;}
.stepback {right: 190px;}
.optionrow1, .optionrow2 {width: 100%; display: block;}

.ContactForm-Wrapper .formstep1 .option1, .ContactForm-Wrapper .formstep1 .option2 {float: left; max-width: 260px; width: 100%; Border: solid 1px #00305E; height:64px; line-height: 64px; text-align: center; color: #00305E; margin-right: 20px; transition: all 500ms;}
.ContactForm-Wrapper .formstep1 .option1:hover, .ContactForm-Wrapper .formstep1 .option2:hover {color: #fff;  Border: solid 1px #fff; background: #00305E;}

.ContactForm-Wrapper .formstep2 .option3 {float: right; max-width: 260px; width: 100%;}
.ContactForm-Wrapper .formstep2 .option9, .ContactForm-Wrapper .formstep2 .option3 {margin-right:0;}

#overalltext { border: solid 1px #00305E; max-width: 536px; width: 100%; min-height: 154px; resize: none; padding: 20px; box-sizing: border-box;  font-family: 'Open Sans', sans-serif; color: #00305E;}

.optionsContainer.showgrid {display: grid; grid-gap: 20px; grid-template-columns: repeat(3, 1fr);}

.ContactForm-Wrapper .formstep4 .option {width: 100%; Border: solid 1px #00305E; height:64px; line-height: 64px; text-align: center; color: #00305E; transition: all 500ms;}
.ContactForm-Wrapper .formstep4 .option:hover {color: #fff;  Border: solid 1px #fff; background: #00305E;}
.ContactForm-Wrapper .formstep4 .option.active {color: #fff;  Border: solid 1px #fff; background: #00305E;}

.formstep5 .stepback {right: 50px;}
.element.capture {transform: scale(0.8); text-align: right;  position: relative; margin-top: -5px;}
.frominput {width: 100%; height: 64px; border: solid 1px #00305E; font-size: 20px; color: #00305E; padding: 0 20px; box-sizing: border-box;}
.formsend {background: #00305E; color: #fff;}
.formsend:hover {background: #fff; color: #00305E;}

.formError {color: red; padding-bottom: 30px;}
.formSuccess {color: green; padding-bottom: 30px;}


/* Footer */
#footer {width: 100%; min-height: 120px; background: #00305E;}
.footerlogo {float: left; margin-left: 50px; margin-top: 25px;}
.FooterInfo {float: right; margin-right: 50px; margin-top: 45px; color: #fff; font-size: 18px;}
#footer a {color: #fff; text-decoration: none; transition: all 200ms;}
#footer a:hover {color: #FF5000; text-decoration: none;}



/* WAPPEN BLOCK */
.wappenblockcontent {padding: 100px 100px;}
.blockheadline {width: 100%;font-size: 48px;font-weight: 600;color: #00305E; text-transform: uppercase; margin-bottom: 50px;}
.leftwappenside {width: 60%; padding-right: 50px; box-sizing: border-box; float: left;}
.rightwappenside {width: 40%; float: left; }
.producttitle {width: 100%;font-size: 32px;font-weight: 600;color: #00305E;  margin-bottom: 30px;}
.productcontent {font-size: 20px; line-height: 40px;}
.wappen {margin-top: 40px;}
.imagecontainer { display: inline-block; padding: 5px; padding-bottom: 0px; margin-bottom: 5px;}
.imagecontainer img {width: 85px; height: auto;}

.rightwappenside .producttitle {font-size: 24px; margin-top: 7px; margin-bottom: 34px; hyphens: auto;}
.stichpunke td {line-height: 36px;}
.checkboximg {margin-right: 20px;}



/* RESPONSIV */

@media only screen and (max-width: 1750px) {

    .SideContent-Wrapper {padding-top: 60px;}
    .SideHeadline {width: 75%;}
    .SideContent {width: 85%;}

}



@media only screen and (max-width: 1500px) {

    .HeaderContentWrapper {padding: 63px 237px 118px 100px;}
    .Headline {width: 75%;}
    .HeaderImage {width: 425px; right: 100px;}
    .SideContent-WrapperBlue {width: calc(100% - 540px);}

    .SideImage {width: 436px; }
    .SideContent-Wrapper {width: calc(100% - 510px);}
    .SideHeadline {width: 80%;}
    .SideContent-Wrapper {padding-top: 30px;}

}


@media only screen and (max-width: 1375px) {

    .TripleBlockContent-Tiles { width: 100%;}

    .SideImageBlock-Wrapper {padding: 50px 0px;}
    .SideHeadline {font-size: 40px; line-height: 50px;}
    .SideContent {width: 100%; margin-top: 25px;}
    .TripleBlockContent-Header {font-size: 40px; line-height: 50px;}
    .SideHeadlineBlue {font-size: 40px; line-height: 50px;}
    .CustomerBlockTitle {font-size: 40px; line-height: 50px;}
    .ActionblockTitle {font-size: 40px; line-height: 50px;}

}



@media only screen and (max-width: 1275px) {

    .FooterInfo {width: 100%;text-align: center; margin-top: 30px; margin-bottom: 30px; margin-right: 0; padding: 0 20px; box-sizing: border-box;}
    .footerlogo {float: unset;}
    #footer {text-align: center;}

}


@media only screen and (max-width: 1175px) {

    .Headline {font-size: 40px; line-height: 50px;}
    .HeaderImage {width: 305px;right: 100px;}
    .BlockHeader {height: 650px;}
    .HeaderContent {margin-bottom: 35px;}
    .ProductName {margin-top: 25px;}

    .SideImageBlue {width: 375px;}
    .SideContent-WrapperBlue {width: calc(100% - 420px);}
    .SideImageBlockBlue {width: 100%;}

}