/* NEU */
.hero-header .row {position: relative}
#hero .hero-header.posleft .bg-overlay-img img {position: absolute; top: 0; right: 0} #hero .hero-header.posright .bg-overlay-img img {position: absolute; top: 0; left: 0}
#hero .hero-header .textpic, #hero .hero-header .textmedia {margin-top: 30px; padding-bottom: 30px ! important}
#hero .hero-header .hero-header-inner .textpic-right *, #hero .hero-header .textmedia-right * {text-align: left;}
#hero .hero-header .hero-header-inner .textpic-left *, #hero .hero-header .textmedia-left * {text-align: left;}
@media screen and (max-width: 768px) {
#hero .hero-header .textpic, #hero .hero-header .textmedia {margin-top: 25px; padding-bottom: 25px ! important}
#hero .hero-header .textpic *, #hero .hero-header .textmedia * {
text-align: center ! important
}}
.full-screen .hero-header {padding-left: 15px ! important} .full-screen .hero-header .hero-header-inner {padding-right: 15px ! important}
@media (min-width: 768px) {.full-screen .hero-header {padding-left: 30px ! important} .full-screen .hero-header .hero-header-inner {padding-right: 30px ! important}}
.full-screen .hero-header.posright .hero-header-inner {padding-right: 0px ! important}
.full-screen  .posright .hero-box {position: absolute; right: 15px;}
@media (min-width: 768px) {.full-screen .hero-header.posright .hero-header-inner {padding-right: 0px ! important}.full-screen  .posright .hero-box {right: 30px;}}
.full-screen .panel {padding: 0px ! important}.full-screen .panel .hero-box {padding: 20px 40px 20px 30px ! important} .full-screen .poscenter .panel .hero-box {padding: 20px 40px 20px 30px ! important}
.full-screen .panel .poscenter  .hero-box {padding: 25px 15px 12px 15px ! important}@media (min-width: 768px) {.full-screen .panel .poscenter  .hero-box {padding: 30px 25px 15px 25px ! important}}
/* kleine Fehlerkorrektur */
#hero .hero-header .textpic p, #hero .hero-header .textmedia p {padding-left: 0 ! important; margin-left: 0 ! important}
#hero .posleft p {padding-left: 0 ! important}
/* kleine Fehlerkorrektur end */
/* ***************

FULL SCREEN

****************** */

/* Mailchimp begin */
#hero #mc_embed_signup input.email {background-color: #fff; box-sizing:border-box; height:40px ! important; padding: 0px 0.4em; margin: 0 auto ! important; min-width: 400px ! important; width: auto ! important; }
#hero #mc_embed_signup .button {font-size: 15px; height:40px ! important; line-height:40px ! important; padding:0 32px ! important;}
#hero .poscenter .row .row {display: flex; justify-content: center;} .poscenter.lrsmall .hero-box, .poscenter.lrmedium .hero-box, .poscenter.lrlarge .hero-box {margin: 0 auto}
@media screen and (max-width: 768px) {#hero #mc_embed_signup input.email {min-width: 300px ! important;}}
@media screen and (max-width: 400px) {#hero #mc_embed_signup input.email {min-width: 260px ! important;}}
/* Mailchimp end */


.hero-header-inner.row {display: block;}
.hero-header-inner.row .hero-box {display: block;}
#hero a:hover, #hero a:focus {text-decoration: none;}
/* #hero .icon-angle-down {color: #fff; font-size: 58px; position: absolute; left: 49.5%; bottom: 120px;} */
#hero .icon-angle-down {color: #fff; font-size: 58px; position: absolute; left: 0; right: 0;text-align: center; bottom: 120px;}
#hero .text-angle-down {font-size: 18px; bottom: 120px;position: absolute; left: 0; right: 0;text-align: center;}
#hero{
  background-size:cover;
  background-position: center;
  position:relative;
}
#hero {min-height: 540px /* wichtig fur virtual keyboard mobile */; -webkit-height: 84vh;-moz-height: 84vh;-ms-height: 84vh;-o-height: 84vh;height:84vh; }
.hero-header{position:absolute; top:22%;text-align:center;width: 100%;}
@media screen and (max-width: 768px) {.icon-angle-down {display: none}}
@media screen and (max-width: 768px) {-webkit-transition:height 1000000s ease;-moz-transition:height 1000000s ease;-o-transition:height 1000000s ease; transition: height 1000000s ease;}
@media screen and (min-width: 769px) {#hero { -webkit-height: 84vh;-moz-height: 84vh;-ms-height: 84vh;-o-height: 84vh;height:84vh}
}
#hero .posleft p {margin-left: 0 ! important}
.hero-header.pdsmall {top: 15%}.hero-header.pdmedium {top: 20%}.hero-header.pdlarge {top: 30%} .hero-header.pdnone {top: 0%}
#hero .posright * {/* max-width: 990px; */ text-align: right ! important; margin-right:0;}
#hero .poscenter h1, #hero .poscenter h2, #hero .poscenter h3, #hero .poscenter h4, #hero .poscenter h5 {margin: 0 auto;margin-bottom: 20px}
@media screen and (min-width: 769px) {
#hero .lrsmall .hero-box {max-width: 480px;}
#hero .lrmedium .hero-box {max-width: 680px;}
}
#hero .lrlarge .hero-box {max-width: 840px;}
#hero  .hero-header.poscenter p {margin: 0 auto; margin-bottom: 20px}
#hero .hero-header.posleft * {text-align: left; margin-left: 0}
#hero .hero-header.posright p {-webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}

#hero .hero-header .textmedia-right .textmedia-text * {margin-left: 0px; /* text bei max-width aligned left */}
#hero .hero-header .textmedia-right .textmedia-text * {margin-left: 0px; /* text bei max-width aligned right */}

@media (min-width: 768px) {.hero-header .row {max-width: 750px;}}
@media (min-width: 992px) {.hero-header .row {max-width: 970px;}
}
.hero-header .row {margin: 0 auto ! important}
@media (max-width: 768px) {.hero-header{top:15%;}.hero-header.pdsmall {top: 12%}.hero-header.pdmedium {top: 15%}.hero-header.pdlarge {top: 18%}}
.hero-header.posbottom {top:auto; bottom: 0;}


/* ***************

FULL SCREEN Form

****************** */
.c-form_formframework label {min-width: 240px;}
.hero-content .row .layout.c-form_formframework {margin: 0 auto} /* center form */

.full-screen .hide-in-conversion-element {display: none}
.full-screen .form-group, .full-screen .actions {float: left;}
.full-screen .form-group, .full-screen .actions, .full-screen .btn-group {width: 100%;}
.full-screen form .row {position: absolute; top: 170px; left: 0}
@media (min-width: 768px) {
.full-screen .form-group {width: 40%;} .full-screen .actions {width: 20%;}
.full-screen form {padding: 0 15px 0 15px; margin-top: 35px}
.full-screen form .row {position: absolute; top: 50px; left: 0}
}
.full-screen form .checkbox * {font-size: 13px}
.full-screen form {position: relative}
.full-screen form .row .form-group {width: 100%}

.hero-header form {text-align:left ! important;}
.full-screen form {padding: 0 15px 0 15px; max-width: 680px; margin-top: 10px}
.poscenter .c-form_formframework {margin: 0 auto}
/* .full-screen form .input input {padding-top:  19px; padding-bottom: 19px} Fehler im IE */
.full-screen form .input input[type="text"], .full-screen form .btn { height: 42px; /* nur height geht im IE */ }
.full-screen .actions .btn-primary {padding-top: 4px; padding-bottom: 6px; display:block; width: 100%} /* input paddings minus 10 gleich btn paddings */
@media (min-width: 768px) {#hero .btn.btn-primary, #hero .btn {width: auto}.c-form_formframework label {min-width: 480px;}}
.full-screen .form-group, .full-screen .actions {padding: 0px 5px}
.full-screen input, .full-screen .btn {-webkit-border-radius: 2px ! important; -moz-border-radius: 2px ! important; border-radius: 2px ! important; border: none}
.full-screen .actions .form-navigation .btn-toolbar .btn-group .btn-primary { display:block; width: 100%}
.full-screen form .control-label {display: none;}
.full-screen .hero-header .hero-content .c-form_formframework form .form-group .checkbox .form-check p {text-align:left; display: inline; position: relative; top: 1px ! important} .full-screen .form-check a {text-decoration: underline}

/* For BG Color */
#hero:before {content:""; position: absolute;  top:0;  right:0;  left:0;  bottom:0;  z-index:0;}

@-moz-keyframes icon-angle-down {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-16px);
    transform: translateY(-16px);
  }
  60% {
    -moz-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
@-webkit-keyframes icon-angle-down {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-16px);
    transform: translateY(-16px);
  }
  60% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
@keyframes icon-angle-down {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-16px);
    -ms-transform: translateY(-16px);
    -webkit-transform: translateY(-16px);
    transform: translateY(-16px);
  }
  60% {
    -moz-transform: translateY(-8px);
    -ms-transform: translateY(-8px);
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}

.icon-angle-down {
  -moz-animation: icon-angle-down 2s infinite;
  -webkit-animation: icon-angle-down 2s infinite;
  animation: icon-angle-down 2s infinite;
}