/*


#0a550a dunkelgrün
#97b697 hellgrün

font-family: 'Roboto Condensed', sans-serif;
font-family: 'Roboto', sans-serif;

Blau:     #002643
Orange:   #ec7404
Grün:     #79b51c

*/

/* merriweather-300 - latin */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 300;
  src: local('Merriweather Light'), local('Merriweather-Light'),
       url('fonts/merriweather-v19-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/merriweather-v19-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* merriweather-regular - latin */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 400;
  src: local('Merriweather Regular'), local('Merriweather-Regular'),
       url('fonts/merriweather-v19-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/merriweather-v19-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* merriweather-300italic - latin */
@font-face {
  font-family: 'Merriweather';
  font-style: italic;
  font-weight: 300;
  src: local('Merriweather Light Italic'), local('Merriweather-LightItalic'),
       url('/fonts/merriweather-v19-latin-300italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/merriweather-v19-latin-300italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* merriweather-italic - latin */
@font-face {
  font-family: 'Merriweather';
  font-style: italic;
  font-weight: 400;
  src: local('Merriweather Italic'), local('Merriweather-Italic'),
       url('/fonts/merriweather-v19-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/merriweather-v19-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* pt-sans-regular - latin */
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  src: local('PT Sans'), local('PTSans-Regular'),
       url('fonts/pt-sans-v9-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/pt-sans-v9-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* pt-sans-700 - latin */
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 700;
  src: local('PT Sans Bold'), local('PTSans-Bold'),
       url('fonts/pt-sans-v9-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/pt-sans-v9-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

body, html {min-height: 100%; margin: 0; padding:0; font-size: 16px; font-family: 'PT Sans', sans-serif; color: #666;}

h2, h3 {font-family: 'Merriweather', serif; font-weight: 300; color: #002643;}
h1 {font-size: 1.3rem; color: #106021; font-weight: 400;}
h2 {font-size: 1.6rem; margin-bottom: 3rem; text-transform: uppercase;}

a {color: #002643; text-decoration: underline; text-decoration-style: dotted;}
a:hover {color: #002643; text-decoration: none;}

header {height: 80px; background-color: white; position: fixed; z-index: 100; width: 100%; top:0; transition: 300ms;}
header.smallHeader {height: 40px; border-bottom: 1px solid #002643; background-color: white; -webkit-box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.25);
-moz-box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.25);
box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.25);}
section {padding: 70px 0;}
section.sliderContainer {padding:0px;}
footer {color: white; background-color: #002643; padding-top: 70px;}
footer div.bottomLine {margin-top: 75px; padding: 5px 0; background-color: black; font-size: 0.7rem; color: #666;}
footer div.bottomLine a {color: #666; text-decoration: underline; text-decoration-style: dotted;}


.recht header {border-bottom: 1px solid #002643;}
.recht h1 {font-family: 'Merriweather', serif; font-weight: 300; color: #002643; font-size: 2rem; margin: 50px 0 30px 0; text-transform: uppercase;}
.recht h2 {font-size: 1.4rem; margin: 40px 0 15px 0;}
.recht h3 {font-size: 1.2rem; margin: 30px 0 15px 0;}

.bgGrau {background-color: #eaeff3; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;}


#logo {display: block; float: left; margin-top: 20px; width: 200px; height: auto; transition: 300ms;}
header.smallHeader #logo {width: 115px; margin-top: 10px;}

header nav {float: right;}
#menuCheckbox {display: none;}
nav > label > img {width: 30px; height: auto; margin-top: 25px;transition-duration: 300ms;}
header.smallHeader nav > label > img {width: 18px; margin-top: 10px;transition-duration: 300ms;}
#submenu {position: fixed; z-index: 1; top:0; left:0; padding-top: 80px; background-color: white;width: 100%; transition-duration: 500ms;transform: translateY(-100%); }
#submenu ul { text-align: right; margin:0; padding:0; list-style: none; display: block; background-color: #002643; overflow: hidden;   }
header.smallHeader ~ #submenu {padding-top: 40px;}
#menuCheckbox:checked ~ #submenu {transform: translateY(0);}
#menuCheckbox:checked ~ header label img { transform: rotate(90deg); }
#submenu > ul > li {border-top: 1px solid white;}
#submenu > ul > li:last-child {border-bottom: 3px solid white;}
#submenu > ul > li > a {display: block; padding: 10px 15px; color: white; font-weight: 700; text-decoration: none; transition: 300ms;}
#submenu > ul > li > a:hover {color: #e2eaf0; text-decoration: none;}

#jhpHeaderBild {list-style: none; position: relative; width: 100%; margin: 80px 0 0 0; padding:0; background-color: #eaeff3; border-bottom: 1px solid #ccc;}
#jhpHeaderBild > li {width: 100%;  margin: 0; padding:0;}
#jhpHeaderBild img {width: 100%; height: 60vw; object-fit: cover;}
#jhpHeaderBild .sliderContent {margin-top: 50px; width: 100%; padding: 0 15px 80px 15px; background-color: #eaeff3;}
#jhpHeaderBild .sliderContent h2>div{margin-top: 40px; margin-bottom: -30px; font-size: 0.85em;}


#jhpSlider {width: 100%; height: 60vw;  overflow: hidden;  position: relative; margin: 0 auto; padding:0;}
#jhpSlider li {transform: translateX(-100%); overflow: hidden; width: 100%; height: 100%; margin: 0; padding:0; list-style: none;position: absolute;}
#jhpSlider li.active {transform: translateX(0); transition: 1000ms;}
#jhpSlider li.active.slideOut {transform: translateX(100%);}
#jhpSlider li img {width: 100%; height:100%; object-fit: cover;}
#jhpSlider li .sliderContent {position:absolute; color: white; z-index: 10; padding: 50px; bottom: 0;}
#jhpSlider li .sliderContent h3 {color: white; }

#ScrollMouse {position: absolute; top: 85vh; top: calc(100vh - 90px); left:50%;transform: translateX(-50%);padding: 1px; display: none;}
#ScrollMouse img {animation-name: invertImage; animation-duration: 4s; animation-iteration-count: infinite; width:30px; height: auto;}

#Aquise ul {margin-top: 50px;}
#Aquise li {font-size: 1.25rem; list-style: none; margin-top: 30px; position: relative; color: #002643;}
#Aquise li::before {content: url(pics/li20.png); position: absolute; top:1px;; left: -30px;}


.inputFeld {border: 2px solid #8196a6; border-radius: 12px; position: relative; margin-bottom: 30px; transition: border 500ms;}
.inputFeld input, .inputFeld textarea { width: 100%; box-sizing: border-box; padding: 10px; font-size: 18px; color: #333; border:none; background-color: transparent; outline: none;}
.inputFeld textarea {height: 160px;}
.inputFeld label { font-size: 18px; line-height: 18px; font-size: 1rem; color: #999; position: absolute; padding: 15px 10px; transition: 300ms; font-weight: 400; z-index: 1;}
.inputFeld.pflichtangabe label::after {content: '*'; margin-left: 2px; }
.inputFeld.filled { }
.inputFeld.filled input, .inputFeld.filled Textarea { padding: 15px 10px 5px 10px; }
.inputFeld.filled label { font-size: 12px; padding: 0 10px;}
.inputFeld.error {border-color: #fcc;} 
.inputFeld.activeInput, inputFeld.activeInput.error {border-color: #002643;}
.inputFeld.activeInput input {color: #002643;}
label.checkbox {position: relative; padding-left: 30px; margin-bottom: 30px; font-weight: 400;}
label.checkbox::before{content: url(pics/checkboxOff.png); position: absolute; top: 2px; left:0;}
input.checkbox {display:none;}
input.checkbox:checked + label.checkbox::before{content: url(pics/checkboxOn.png);}
.errorBox {background: #ec7404; color: white; padding: 15px; border-radius: 15px;margin-bottom: 30px; font-weight: 600;}
.formError {padding: 5px 10px; color: #ec7404; font-size: 0.85rem;}
.messageBox {background: #79b51c; color: white; padding: 15px; border-radius: 15px;margin-bottom: 30px; font-weight: 600;}
button, .button {background-color: #e2eaf0; color: #002643; padding: 10px 20px;  border-radius: 10px; border:1px solid #002643; transition: 300ms;}
.button {margin: 15px 0; display: inline-block; text-decoration: none;}
button:hover, .button:hover {transform: translate(2px,-2px); box-shadow: 2px 2px 5px 0px #999999;}
.button:hover {text-decoration: none; background-color: white;}
button:active, .button:active {transform: translate(0,0); box-shadow: inset 2px 2px 2px 0px rgba(0,0,0,0.35); }

.zitat {font-family: 'Merriweather', serif; font-weight: 300; font-style: italic; font-size: 20px; margin-bottom: 100px; }
.zitat > p > span {font-style: normal; font-size: 13px; margin-top: 15px; margin-left: 0; display: block;}
.zitat > p {margin:0;}
.zitat > p:nth-child(2) {margin-left:0;}


.adressIcon {width: 80px; height: auto;margin-bottom: 15px;}
.adressAbstand {margin-bottom: 50px;}
.adressAbstand > div {text-align: center;}
.footerMenu {text-align: center;}
.footerMenu a {color: white; text-decoration: none; display: block; padding: 10px 0; text-transform: uppercase;}
.abstandTop {margin-top:75px;}
.icon {margin-bottom: 50px;}
.icon:last-child {margin-bottom: 0;}
.icon img {padding: 20px; border: 3px solid #002643; border-radius: 50%; display: block; margin: 0 auto 20px auto;}
.icon h3 {text-align: center;margin-bottom: 15px;}
.icon p {text-align: center;padding: 0 15px;}
.ctaBlock {padding: 70px 15px 20px 15px;; text-align: center;}
.ctaBlock > p {font-size: 1.6rem;}
img.fullWidth {width: 100%; height: auto; display: block;}
.abstandUnten {margin-bottom: 75px;}




@keyframes invertImage {
    0% {  filter: invert(0); }
    50%   {  filter: invert(1); }
    100%   {  filter: invert(0); }
}




@media (min-width: 576px) { 
    #jhpHeaderBild .sliderContent{ width: 540px; margin: 80px auto 0 auto;}
    #jhpSlider {height: 338px;}
    .zitat {font-size: 18px;}
    .zitat p > span {display: inline-block; font-size: 13px; margin-top: 0;}
    .zitat p:nth-child(2) {margin-left: 8px;}

}



@media (min-width: 768px) { 
    body, html {font-size: 18px;}
    section {padding: 100px 0;}
    footer {padding-top: 100px;}
    h2 {font-size: 2.4rem;}
    #jhpHeaderBild .sliderContent { width: 720px; margin: 80px auto 0 auto; position: relative; z-index: 10;}
    #jhpSlider {height: 450px;}
    
    #Aquise ul {margin-left: 60px;}
    #Aquise li::before { left: -40px;}

    
    .zitat {font-size: 24px;}
    .zitat > p > span {margin-left: 5px;}
    .zitat > p:nth-child(2) {margin-left:15px;}

}



@media (min-width: 992px) { 
    
    h1 {font-size: 1.3rem;}
    h2 {font-size: 3.0rem;}

    header {background-color: rgba(255,255,255,0.3);}
    #jhpHeaderBild { margin-top: 0;}
    #jhpHeaderBild .sliderContent { width: 990px; margin: -100px auto 0 auto; padding: 30px 30px 80px 30px; border-radius: 15px 15px 0 0;}
    #jhpHeaderBild .sliderContent::before { position: absolute; z-index: 11; width: 990px; top:0; left:0; border: 1px solid #ccc; border-radius: 15px 15px 0 0;height: 100px; content: ' '; border-bottom: none;}
    #jhpHeaderBild img { height: 100vh;border-bottom: 1px solid #ccc;}
    #jhpHeaderBild .sliderContent h2>div{margin-top: 70px; margin-bottom: -30px; }
    #jhpSlider {height: 600px; margin-top: 0;}
    #Aquise ul {margin-left: 100px;}


    .adressAbstand > div {text-align: left;}
    .icon {margin-bottom: 0;}
    .icon h3 {min-height: 76px;}
    
    .zitat {font-size: 20px; line-height: 1.8em;}
    .zitat > p:nth-child(2) {margin-left:10px;}
    
    
    .footerMenu a {display: inline-block; padding: 0 20px; border-right: 2px solid white;}
    .footerMenu a:last-child { border-right: none;}
    
    footer div.bottomLine div.col-lg-6:last-child {text-align: right;}
}



@media (min-width: 1200px) { 
    #jhpHeaderBild .sliderContent { width: 1140px; }
    #jhpSlider {height: 720px;}
    #jhpHeaderBild .sliderContent::before { width: 1140px;}
    #Aquise ul {margin-left: 180px;}

    .zitat {font-size: 24px;}
    .zitat > p:nth-child(2) {margin-left:15px;}

}