/*
 * FARBEN:
 * Hell-Blau: #E6EBEE
 * Dunkel-Grün: #3F6B66  
 * Mittel-Grün: #5F927D   -> #5F9285
 * Hintergrund-Grün: #679c9c  / #5F927D     
 * Heller Hintergrund: #EEEEEE
 * 
 * */
/* Icon-Font einbinden */

/*  @font-face {
  font-family: "fontello";
  src: url("font/fontello.eot?62749750");
  src: url("font/fontello.eot?62749750#iefix") format("embedded-opentype"),
       url("font/fontello.woff?62749750") format("woff"),
       url("font/fontello.ttf?62749750") format("truetype"),
       url("font/fontello.svg?62749750#fontello") format("svg");
  font-weight: normal;
  font-style: normal;
} */

/* Sticky footer styles  */
html {
  position: relative;
  min-height: 100%; 
   
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 30px;
  background-color: #5F9285;
  font-size: 16px;
  line-height: 120%;
}
a {  
color: #fff;
text-decoration: underline;
    
 -webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

  a:hover    {
    text-decoration: none ;
     opacity: .8 ;
     }

    h2 {
    font-size: 20px;
}
 
/*-----------allgemeines------------*/

::-moz-selection { background:#fff; color:#5F9285; }

::selection { background:#fff; color:#5F9285; }



/* -------kopfbereich-------- */

.header {
    background-color: #E6EBEE;
    position: relative;
}
.header .row {
    margin-right: 0px;
}

.header.start .typo {
     padding-top: 30px;
     padding-bottom: 40px;
     padding-right: 0px;
}
.header .typo {
     padding-top: 30px;
     padding-bottom: 63px;
}
.header .typo a {
    text-decoration: none;
    color: inherit;
}
.header .typo h1, .header .typo h2, .header .typo h3 {
    font-size: 20px;
    line-height: 120%;
    font-weight: normal;
    margin: 0;
}
.header .typo h1 {
    color: #3F6B66;
    font-weight: bold;
}
.header .typo h2 {
    color: #3F6B66;
}
.header .typo h3 {
    color: #5F927D;
} 
.header .logo {
     position: absolute;
     bottom: 0;
     right: 0;
     text-align: right;
     padding-right: 0;   
}
.header .logo img {   
     position: absolute;
     bottom: 0;
     right: 0;
     border: none;
}

.header .logo a:hover {
    opacity: 1;
}
/* -------------navimage--------------  */
 .navimage {
     padding: 0;  
     overflow: hidden; 
 }
 .start .navimage .navi  {
     padding: 0;
 }

 .navimage .image   {
   /*   padding: 0;  */  
  /* overflow: hidden; */  
  
    position: relative;
    z-index: 99;
  
  
 }
.navimage .row {
    margin-right: -40px;
    background-color: #EEEEEE;
}
 
 .navimage img  {  
 display: block;
 float: right;
         /*  height: auto;
          max-width: 100%;
   height: auto;  Falls Dimensionsangaben im HTML vorhanden sind */
  /* width: 100%;
  max-width: 100%;  */
  
  
   
    
    
    
 }
 
 .navimage .image.startseite img {
     
 
    height: auto;
    max-width: 100%;
    width: 100%;
 }    
    
 .navi ul {
     margin-top: 20px;
     list-style: none;
     margin-bottom: 20px;
       white-space: nowrap;
 }
  .navi ul a {
     font-size: 20px;
     line-height: 120%; 
     color:  #5F927D;
    text-decoration: none;
    -webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
  }
  .navi ul .aktiv a,   .navi ul .aktiv a:hover   {
      color: #3F6B66;
      font-weight: bold;

  }
  .navi ul a:hover  {
      color: #3F6B66;
      font-weight: normal;
      opacity:1;
  }
  
  .navi li {
    margin: 0;
    padding: 0;
}


 
/*-------------------content---------------------*/ 


.container-fluid.content {
     margin-top: 40px;
}  

.container-fluid.content h1, .container-fluid.content.start h1, .container-fluid.content.start .weiterlink, .container-fluid.content.start h2  {
     margin: 0;
     padding: 0;
     font-size: 20px; 
     line-height: 120%;
}
.container-fluid.content h1 {
    font-weight: normal;
         margin-bottom: 20px;
}
 .container-fluid.content.start h1 a {
     text-decoration: none;
     color: inherit;
 }
h1 a:hover, h2 a:hover, h3 a:hover {
    opacity:1;
 }
 
.textfirst ul {
    list-style: outside none square;
    padding: 0;
    margin-left: 15px;
}
.textfirst li {
    margin-bottom: 7px;
}

 .weiterlink    {
     margin-top: 10px;
     font-weight: bold;
     float: left;
     text-decoration: none;
 }
    .weiterlink:hover    { 
    text-decoration: none !important;
     opacity: .8 !important;   
     }
 
 
.weiterlink:after {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: none;
  position: relative;
  font-size: 17px;
  top: 1px;
  left: 6px;
  
  /* opacity: .8; */

  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
    content: '\e80a'; 
     -webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.weiterlink:hover:after  {
    left: 10px;

    
}    
    
 .col-xs-6.col-sm-2.col-md-2.address,  .col-xs-6.col-sm-2.col-md-2.teaser, .textfirst   {
     margin-bottom: 80px;
     float: left;
 }

 .einleitung  {
     margin-bottom: 40px;
 }
 
 .col-xs-6.col-sm-2.col-md-2.address {
     position: absolute;
       white-space: nowrap;
 }
 
 .col-xs-6.col-sm-2.col-md-2.address .weiterlink {
    font-size: 16px;
  line-height: 120%;
   margin-top: 0;
   font-weight: normal;
}
 .col-xs-6.col-sm-2.col-md-2.address .weiterlink:after {
   font-size: 14px;
}
   .container-fluid.content.start h2 {
      font-weight: normal;
   }
   
   
   /* Accordion */
   
    .accordion {
      padding: 0;     
      margin: 35px 0 !important;
      width: 100%;
  } 
      .accordion li {
      border-top : 1px solid #fff;
      padding: 0;
      list-style: none;
      margin: 0 0 20px 0;
  }
  .accordion li:last-Child {
      border-bottom: 1px solid #fff;
      padding-bottom: 7px; 
      
  }
     .accordion h2 {
      font-size: 16px;
      font-weight: bold;
      margin: 20px 0 13px 0;      
      position: relative;
      
  }
  .accordion h2 a {
      text-decoration: none; 
      padding-right: 20px;
  }
  .accordion h2 a:after {
      font-family: "fontello";
  font-style: normal;
  font-weight: normal; 
  display: inline-block;
  text-decoration: none;
  position: absolute;
  font-size: 20px;
  top: 1px;
  right: 6px;
  font-variant: normal;
  text-transform: none;
    content: '\e808';
    
    
    -webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
          -webkit-transform:rotate(0deg);
		-moz-transform:rotate(0deg);
		-o-transform:rotate(0deg);
		/* filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=0); */
		-ms-transform:rotate(0deg);
	backface-visibility: hidden; 	
		
  }
   .accordion h2.aktiv a:after {
     
     -webkit-transform:rotate(-180deg);
		-moz-transform:rotate(-180deg);
		-o-transform:rotate(-180deg);
		/* filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1); */
		-ms-transform:rotate(-180deg); 
        	backface-visibility: hidden;
    
  }
  
    .accordion p { margin: 0 0 20px 0;  display:none;  }

     .accordion p.first { display:block; }
   
  /* Mailform */ 
   
   .fieldstreet {
       display: none;
   }
   
    .mailform {
       /*  margin-top: 20px; */
    }
    
   
    .field {
        border-bottom: 1px solid #fff;
        width: 100%;
        float: left;
         margin: 15px 0;
    }
    
   .field label {
        float: left;
        width: 120px;
        font-weight: normal;
       
    }
    .check {
        margin: 15px 0;
         position: relative;
    }
    .check input[type=checkbox] {
	visibility: hidden;
}
    .button {
        margin: 15px 0;
        float: left;
        width: 50%;
    }
    
    .mailform small {
     margin-top: 20px;
    display: inline-block;
    }


.checkdiv {
    float: left;
    margin: 5px 0;
    width: 100%;
}
 .checkdiv:first-Child {
     margin-top: 10px;
 }

   .check  strong {
    display: block;
    float: none;
    }
     

.check label {  
font-weight: normal;
	cursor: pointer;
	position: absolute;
	width: 12px;
	height: 20px;
	top: 0;
	margin-left: -11px;
    padding-left: 18px;
/* 	border-radius: 4px; */
	border: 1px solid #fff;

/* 	-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4);
	-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4);
	box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4); */

/* 	background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);
	background: -moz-linear-gradient(top, #222 0%, #45484d 100%);
	background: -o-linear-gradient(top, #222 0%, #45484d 100%);
	background: -ms-linear-gradient(top, #222 0%, #45484d 100%);
	background: linear-gradient(top, #222 0%, #45484d 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 ); */
}
.check label span {
    float: left;
    margin-left: 9px;
    position: relative;
    width: 400px;
}  
.check.agree label span {
    width: 820px;
}
 .check.agree {
    margin-bottom: 70px;
}



.check label:after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	content: '';
	position: absolute;
	width: 12px;
	height: 7px;
	background: transparent;
	top: 4px;
	left: 3px;
	border: 2px solid #fff;
	border-top: none;
	border-right: none;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.check label:hover::after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
	filter: alpha(opacity=30);
	opacity: 0.3;
}

.check input[type=checkbox]:checked + label:after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
}  
    


.button > input {
    background: none;
    border: 1px solid #fff;
    color: #fff;
    outline: none;
     padding: 17px;
    width: 95%;
    margin-right: 20px;
     -webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.button > input:hover {
    background: #fff;
    color:#5f9285
}

       .button > input#reset {
   color: #A8C6C6;
    border: 1px solid #A8C6C6;
   
}
    
     .button > input#reset:hover{
   color: #fff;
    border: 1px solid #fff;
    background: none ;
}
    .field > input {
    background-color: #5f9285;
    border: 0 none;
    float: left;
    outline: 0 none;
    width: 78%;
   
    }
    .error {
    background: #fff none repeat scroll 0 0;
    border-radius: 5px;
    color: red;
    padding: 10px;
    margin-top: 30px;
}
   
/*--------------footer-----------------*/
   .footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 40px;
  background-color: #E6EBEE;
}
   
   .footer .container-fluid {
      padding-top: 10px;
      padding-bottom: 1px;
  }
  .footer, .footer a {
    color: #5f9285;
    font-size: 16px;  
    text-decoration: none;
  }
  .footer.start .impressum   {
     float: left;  
  }
  .footer .impressum.datenschutz, .footer .startseite .impressum.datenschutz {   
    margin-left: 10px;
    margin-right: 10px;
}
   .footer .startseite   {
     float: left;  
     position: relative;
     left: 14px;
  }
 
  .footer .startseite:before   {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: none;
  position: absolute;
  font-size: 17px;
      margin-right: 10px;
      font-variant: normal;
  text-transform: none;
    content: '\e809';
    left: -18px;
  }
   .footer .impressum   {
    float: right;
  }
  .footer.start .scrolltop   {
     float: right;
     font-size: 0;
    height: 0 !important;
    right: 60px;
    top: 10px;
     
     
  }
  .footer .scrolltop   {
    
     position: absolute;
     font-size: 0;
    height: 0 !important;
     right: 60px;
     top: -30px;
    /*  display: none; */
  }
  .footer .scrolltop:after   {

  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: none;
  position: absolute;
  font-size: 17px;
 color: #fff;
  /* opacity: .8; */

  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
    content: '\e80b';


  }
  
  
   .footer.start .scrolltop:after   {
     
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: none;
  position: relative;
  font-size: 17px;

  /* opacity: .8; */

  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
    content: '\e80b';
      color: #5F927D;

  }
   .footer.start .scrolltop:focus, a:focus  { border: none; outline: none; text-decoration: none; color: inherit; }



   /* Urlaubshinweis */

 .urlaubsbox {
    background: #ffffff;
      color: #5F927D;
    padding: 20px;
    white-space: normal; 
    margin-bottom: 40px;
}
 .urlaubsbox p {
    margin: 0;
 }
 .urlaubsbox a {
    color: #5F927D;
 }
 
 

/*-----------------anpassungen responsive--------------------*/
  

@media screen and (min-width: 63em) { 
  .navi.nav-collapse ul {
     background-color: #eeeeee;
    margin-bottom: 0;
    margin-top: 0;
    padding-bottom: 27px;
    padding-top: 26px;
    position: relative;
    white-space: nowrap;
    width: 180px;
    z-index: 999;
} 
} 


@media screen and (max-width: 63em) {
  .navimage img {
 height: auto;

        width: 100%;
  max-width: 100%;

}
.navimage .image {
    width: 100%;
}
 .col-xs-2.navi.nav-collapse.nav-collapse-0.opened {
    margin-bottom: 40px;
}







}

@media(max-width:992px){
  .navimage img {

  height: auto;
        width: 100%;
  max-width: 100%;
}
 .col-xs-2.navi.nav-collapse.nav-collapse-0.opened {
    margin-bottom: 40px;
}
}


@media(min-width:992px){
     .navimage img {
 height: auto;
}
}
@media(min-width:1294px){
    .navimage img {
 height: auto;
         
        width: 100%;
  max-width: 100%;
 
}
}


 @media(max-width:1024px) {
 
   /*  .check label span {
        float: left;
        margin-left: 9px;
        position: relative;
        width: 400px;
        }
    .check.agree label span {
        width: 450px;
        }
    .check.agree {
        margin-bottom: 130px;
        } */
     
     
     .check label span {
        float: left;
        margin-left: 9px;
        position: relative;
        width: 400px;
        }
    .check.agree label span {
        width: 400px;
        }
    .check.agree {
        margin-bottom: 150px;
        }
        
}
 

/* small mobil devices */ 
 @media(max-width:768px) {
  .navimage img {
 height: auto;

        width: 100%;
  max-width: 100%;

}
  body {
  margin-bottom: 60px; 
}

.logo img {
   height: auto;
        width: 110px;
}

 .footer {
  height: 60px;
  text-align: left;
}

.footer .impressum {
    float: none;
    display: block;
    float: right;
}

 .footer .startseite   {
     float: none;
     left: 0;
     margin-left: 0;
     padding: 0;
  } 
  .footer .startseite:before   {
   left: 0px;
  position: relative;

  }
  
  
  
 
.col-xs-6.col-sm-2.col-md-2.address {
     position: relative;
 }
 .header {
    /*  padding: 0; */
 }
 .header .logo {
       float: right;
    margin-right: -40px;
    position: relative;
     
 }
 .header .logo img  {
    position: relative; 
 }
 .header .typo {
 padding-bottom: 10px;  
 
 }
/* .header .typo h1, .header .typo h2, .header .typo h3 {
    font-size: 16px;

} */

 .check label span {
        float: left;
        margin-left: 9px;
        position: relative;
        width: 400px;
        }
    .check.agree label span {
        width: 400px;
        }
    .check.agree {
        margin-bottom: 150px;
        }

 }
 /* smallest mobil devices */
 @media (max-width: 425px) {
 .check label span {
        float: left;
        margin-left: 9px;
        position: relative;
        width: 230px;
        }
    .check.agree label span {
        width: 230px;
        }
    .check.termin {       
     margin-bottom: 30px;
    }
    .check.agree {
        margin-bottom: 260px;
        }
    .field label {
        width: 100%;
    }
        }
        /* smallest mobil devices */
 @media (max-width: 320px) { 
         .check.termin {
            margin-bottom: 50px;
        }
        .check.agree {
            margin-bottom: 360px;
            }
        }