/* === Farben === */
/*
Blau = #1f4e8c #0041a1
Grau = #3d3f45   #3e3e3f #cccccc #444444
weiß = #F0F0F0
rot  = #a62c21
orange = #ede578
grün = #CCFF99

google tagmanager
*/

/* === Globales ===  === Globales ===  === Globales ===  === Globales ===  === Globales ===  === Globales ===  === Globales ===  === Globales ===  === Globales === */
body {
  margin: 0;
  font-family: 'Raleway', 'Lato', 'Helvetica Neue', 'Arial', sans-serif;
  font-size: 16px;
}

* {
  box-sizing: border-box;
}

section{
  padding-top: 4rem;
  padding-bottom: 4rem;
}

@media (max-width: 1366px){
  section{
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  }

@media (max-width: 1024px){
  section{
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
}
@media (max-width: 768px){
  section{
    padding-top: .5rem;
    padding-bottom: .5rem;
  }
}


/* === Generelles ===  === Generelles ===  === Generelles ===  === Generelles ===  === Generelles ===  === Generelles ===  === Generelles ===  === Generelles === */

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

.active {
  background-color: #a62c21 !important;
}

:focus {
outline: none;
box-shadow: 0 0 2px 2px #cccccc, 0 0 10px #cccccc;
}

.wichtiger-text{
  font-weight: bold;
}

.screenreader{
  display: none;
}

.btn-typ-1{
background-color: #a62c21;
border: 2px solid #a62c21;
color: #FFF;
padding: .4rem;
}

.btn-typ-1:hover{
  background-color: #a62c21;
  border: 2px solid #FFF;
  font-weight: bold;
}

.btn-typ-2{
  border: 2px solid #FFF;
  background-color: transparent;
  color: #FFF;
  padding: .4rem .6rem;


}
.btn-typ-2:hover{
  color: #a62c21;
  font-weight: bold;
  border: 2px solid  #a62c21;
}

.intro-container{
  text-align: center;
  width: 85%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2.5rem;
}

.intro-container > h1 {
  font-size: 1.6rem;
  text-transform: uppercase;
}

.intro-container > p {
  font-size: 1.2rem;
}

@media (max-width: 1366px){
.intro-container > p {
margin-bottom: .5rem;
}
}
@media (max-width: 1024px){
  .intro-container > p {
  margin-bottom: 0;
  }
}

#temp1{
  width: 200px;
  padding: 2rem;
  margin-left: auto;
  margin-right: auto;
  background-color:  #a62c21;
  color: #FFF;
  font-size: 1.6rem;
}

/* === Navigationsleiste ===  === Navigationsleiste ===   === Navigationsleiste ===   === Navigationsleiste ===   === Navigationsleiste ===   === Navigationsleiste ===  */
#header-nav{
height:50px;
width: 100%;
background-color: #3e3e3f;
position: relative;
overflow: hidden;
}


#header-nav  a > img{
height: 45px;
width:auto;
float:left;
margin-top: 3px;
}

#header-nav ul {
float:right;
margin: 0;
padding: 0;
font-weight: bold;
font-size: 1.1rem;
height: 100%;
}

#header-nav ul > li {
  display: inline-block;
  height: 100%;
  padding: 0 .4rem 0 .4rem;
}

#header-nav ul > li > a{
  margin-top: .85rem;
  display: inline-block;
}

#header-nav  li > ul{
  background-color: #555;
  position: absolute;
    width: 160px;
  left: -999em;
  margin: 40px 0 0;
z-index: 9999;
}

#header-nav ul > li > a:link {
  color: #FFF;
  text-decoration:none;
}

#header-nav ul > li > a:hover{
  color:#F0F0F0;
  text-decoration: none;
}

#header-nav ul > li > a:active {
  color:#F0F0F0;
}

#header-nav ul > li > a:visited {
  color:#fff;
}

#header-nav .col-6 {
padding-top:0px;
padding-bottom: 0px;
}

#header-nav .container,
#header-nav .row,
#header-nav .col-6 {
height: 100%;
}

.logo-link{
display:inline-block;
}

/* === Navigationsleiste Mobil ===  === Navigationsleiste Mobil ===  === Navigationsleiste Mobil ===  === Navigationsleiste Mobil ===  === Navigationsleiste Mobil === */


#mobile-nav-button{
  color:#FFF;
  float:right;
  font-size: 2rem;
  border:2px solid #fff;
  width: 37px;
  height: 37px;
  position: relative;
  margin-top: .4rem;
  margin-bottom: 7px;
}


#mobile-nav-button > span {
  position: absolute;
  bottom: -2px;
  left: 7px;
}

 #mobile-nav-content > ul > li {
  display: block;
  background-color: #3d3f45;
  height: 50px;
  padding: 0 1.2rem;
  text-align: center;
}

#mobile-nav-dropdown{
  position:relative;
  display: inline-block;
  float: right;
}

#mobile-nav-content{
  position:absolute;
  right:  0px;
  top: 50px;
  /*display: none; */
}



#mobile-nav-dropdown:hover  #mobile-nav-content{
  display:block;
}

 #mobile-nav-content > ul > .active {
  background-color: #a62c21;
 }

 #mobile-nav{
   display:none;
 }

@media (max-width: 768px) {
  #desktop-nav{
    display:none;
  }
  #mobile-nav{
    display:block;
  }
}


/* === Nav auf dieser Seite === */
.active {
background-color: #a62c21;
}

#header-banner {
width: 100%;
height: 0;
padding-top: 15.625%;
background: url("../img/ShiatsuHeader2_1920_250.png") no-repeat;
background-size: contain;
}

#header-banner-klein {
width: 100%;
height: 0;
padding-top: 15.625%;
background: url("../ShiatsuHeader2_1920_250.png") no-repeat;
background-size: contain;
}


/* === Typen generell === */
/* === Typen generell === */
/* in diesem Bereich ist festgelegt was generell für diese Klassen gelten sollte
in den jeweiligen bereichen werden die styles mit der ID der section verfeinert - speziellere selektoren */

.empfehlung{
  box-shadow: 0 0 20px #3d3f45;
}

/*   */
.wiki{
background-color: #cccccc;
}
/* Holz Feuchtigkeitsbereiche  */
.image{
  text-align: center;
}

/* Hallo */
.text-box{
background-color: #cccccc;
padding: 0.2rem 1rem;
}

h1{
  font-size: 30px;
  font-style: normal;
  font-weight: bold;
}


h2{
  font-size: 18px;
  font-style: normal;
  font-weight: bold;
}

table{
  table-layout: fixed;
}

.tbspalte{
  width: 40%;
}

article li{
  padding-bottom: .5rem;
}


/* === Button Buchung === Button Buchung  ==    */


.booking-button {
  margin: 1rem;
  height: 50px;
  width: 300px;
  background-color: #a62c21;
  border: 2px solid #a62c21;
  border-radius: 8px;
  color: #FFF;
  font-size: 1.3rem;
  cursor: pointer;;
  transition: background-color 0.3s ease;
}

.booking-button:hover {
  background-color: #a62c21;
  border: 2px solid #FFF;
  font-weight: bold;
}

/* === Styles in den Sectionen */
/* === Styles in den Sectionen */

/* === Motivation === */
#motivation{

}

#motivation .Fragen{
font-size: 1.4rem;
font-style: italic;
display: block;
padding: .5rem;
padding-left: 3rem;
text-align: left;
color:  #3e3e3f;
background-color: #F0F0F0;
margin-bottom: .5rem;
}

#motivation .Fragen > span{
display: block;
  padding-bottom: 1rem;

}

/* == Kontakt ==  == Kontakt ==  == Kontakt ==  == Kontakt ==  == Kontakt ==  == Kontakt ==  == Kontakt == */


#Kontakt-formular{
  width: 85%;
  margin-left: auto;
  margin-right: auto;
}

#kontakt-formular input,
#kontakt-formular textarea {
width: 100%;
}
#kontakt-formular input{
  height: 1.5rem;
}
#kontakt-formular textarea {
  height: 4.5rem;
}



#Kontakt-formular > h1 {
  font-size: 1.6rem;
  text-transform: uppercase;
}

#Kontakt-formular > p {
  font-size: 1.2rem;
}

@media (max-width: 1366px){
#Kontakt-formular > p {
margin-bottom: .5rem;
}
}
@media (max-width: 1024px){
#Kontakt-formular > p {
  margin-bottom: 0;
  }
}

/* === Methoden zur Messung der Brennholzfeuchte ===  === Methoden zur Messung der Brennholzfeuchte ===*/
#messen-holzfeuchte{
background-color: #3d3f45;
}

#messen-holzfeuchte .empfehlung{
  box-shadow: 0 0 20px #cccccc;
}

#messen-holzfeuchte  .intro-container{
  color: #FFF;
}

#messen-holzfeuchte  article{
  display: inline-block;
  background-color: #cccccc;
  padding: .3rem 1rem;
}


/*
.artBox{
  display: inline-block;
  background-color: #cccccc;
  padding: .3rem 1rem;
  height: 100%;
}
*/

/* === Holz Feuchtigkeitsbereiche ===  === Holz Feuchtigkeitsbereiche ===  === Holz Feuchtigkeitsbereiche === */
/* Klassen
.text.box
.image
*/

.text-box{
  padding: .3rem 1rem;
  width: 100%;
}


#feuchtigkeitsbereiche h2{

}

@media (max-width: 480px){
#feuchtigkeitsbereiche .image{
  width: 70%;
  margin-left: auto;
  margin-right: auto;
}

}

/* === Begriffe  ===  === Begriffe  ===  === Begriffe  === */
/* Klassen
.intro-container
.wiki
*/

.wiki{
    padding: .3rem 1rem;
}




/* === Produkte Holzbrennstoffe ===  === Produkte Holzbrennstoffe ===  === Produkte Holzbrennstoffe === */
/* Klassen */


.text-box{
  width: 100%;
}

#holzbrennstoffe .image > img{
width: 100%;
height: auto;
}


@media (max-width: 768px){
  #holzbrennstoffe .image > img{
  width: 70%;
  margin-left: auto;
  margin-right: auto;
  }

}

@media (max-width: 480px){
  #holzbrennstoffe .image > img{
  width: 100%;
  }

}


#holzbrennstoffe{

}

/* === Holzfeuchte - messen - berechnen ===  === Holzfeuchte - messen - berechnen === */
/* Klassen
.intro-container
.messen-box
*/
#messen-rechnen{

}

#messen-rechnen .messen-box{
width: 75%;
background-color: #cccccc;
padding: .3rem 1rem;
margin-left: auto;
margin-right: auto;

}


/* === Brennholzfeuchte === === Brennholzfeuchte ===  === Brennholzfeuchte ===*/
/* Klassen
.intro-container
.bfh-box
*/
#brennholzfeuchte{

}

#brennholzfeuchte .bhf-box{
width: 100%;
background-color: #cccccc;
padding: .3rem 1rem;
margin-left: auto;
margin-right: auto;
}


#brennholzfeuchte .image > img{
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}



/* ===  Artikel === === Artikel ===  === Artikel ===*/
/* Klassen
.image
*/
#zuviel-wald .image > img{
  width:  80%;
  height: auto;

}

#zuviel-wald ul{
  list-style: none;
}



/* == Heizwerttabellen ==  == Heizwerttabellen ==  == Heizwerttabellen ==  == Heizwerttabellen ==   == Heizwerttabellen == */
/* Klassen
picture
.legende
.TBspalte

*/

#heizwerttabellen{

}

#heizwerttabellen picture p {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}


#heizwerttabellen picture {
  text-align:  center;
  margin-left: auto;
  margin-right: auto;
}

#heizwerttabellen picture img{
width: 90%;
height: auto;
text-align:  center;
margin-left: auto;
margin-right: auto;
}

#heizwerttabellen aside ul{
list-style: none;
margin: 0;
padding: 0;
}

#heizwerttabellen table{
  border-collapse: collapse;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

#heizwerttabellen table tbody{
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  }



#heizwerttabellen table td{
  border: 1px solid;
  width: 70px;
}

#heizwerttabellen table th{
  transform: rotateZ(90deg);
  height: 200px;
  width: 70px;
  border: 1px solid;
}

#heizwerttabellen table th:empty{
  border: 0;
}


.legende{
  text-align: center;
}

.TBspalte {
text-align: center;
  width: 40%;
  display: inline-block;
  background-color: #cccccc;
}

#sp1{
  width: 50px;
}

@media (max-width: 613px){
#heizwerttabellen table{
font-size: .8rem;
}
#heizwerttabellen table td{
  border: 1px solid;
  width: 25%;
}
}

@media (max-width: 423px){
#heizwerttabellen table{
font-size: .5rem;
}
#heizwerttabellen table td{
  border: 1px solid;
  width: 20%;
}
}

/* === Energieeinheiten ===  === Energieeinheiten ===  === Energieeinheiten ===  === Energieeinheiten === */


#Energieeinheiten .intro-container ol{
text-align: left;
font-size: 1.1rem;
}

#Energieeinheiten .intro-container{
width: 80%;
background-color: #cccccc;
padding: 0.8rem 0.3rem;
}

#energieeinheiten h2{
  font-size:  1.3rem;
}

#gegeben{
width: 80%;
float: right;
padding: 1rem;
background-color:  #cccccc;
}

#gegeben label{
text-align: left;
}

#gesucht{
  width: 80%;
  padding: 1rem;
  background-color:  #cccccc;
}


#Energieeinheiten select{
width: 100%;
height: 2rem;
padding-left: 0.5rem;
box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.3);
border-radius: 3px;
cursor: pointer;
/* appearance: none; */
overflow: hidden;
}

#Energieeinheiten input{
width: 100%;
text-align: left;
height: 2rem;
padding-left: 0.5rem;
font-size: 1.2rem;
border: 0;
}

#Energieeinheiten label{
  display: block;
  padding: .5rem 0;
}

#gegebenInP{
  border: 0;
  box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.3);
}

#gesuchtInP{
  border: 0;
}



@media (max-width: 768px){
#gegeben{
width: 80%;
margin-right: auto;
margin-left: auto;
float: none;
}
#gesucht{
width: 80%;
margin-right: auto;
margin-left: auto;
float: none;
}
}


/* === Wasser Erwärmung === === Wasser Erwärmung ===  === Wasser Erwärmung === === Wasser Erwärmung === */


#TXTErgebnis{
  width: 100%;
  height: auto;
}

#wasser article{
  float: right;
}

.InfoBerechnung{
  background-color: #cccccc;
  padding: 1rem;
  width: 80%;
}

@media (max-width: 768px){
  #wasser article{
float: none;
  }
.InfoBerechnung{
text-align: center;
margin-left: auto;
margin-right: auto;

}

}



/* === HWR === ===  HWR ===  ===  HWR === ===  HWR === */

#HWR1{
  background-color: #CCCCCC;
}

/* === HWR allgemein ===  === HWR allgemein ===  === HWR allgemein === */
.HWR-box{
  padding: 0.5rem;
  margin-bottom: 1.5rem;
  margin-left: auto;
  margin-right: auto;
}

.HWRSelect{
  padding:.2rem;
}

.HWR-box-bgc{
  background-color: #ede578;
}

.HWR-box H2{
  font-size: 1rem;
  padding-left: 0.8rem;
}

.nummer{
  font-size: 0.7rem;
}

.Ergebnis-Text{
font-size: 1.3rem;
}



.LMit{
  width: 40px;
}

.LEuro{
  width: 60px;
}

/* === HWR_1 ===  === HWR_1 ===  === HWR_1 === */


.HWR1-box{
  padding: 0.5rem;
  width: 350px;
}

.HWR1-box p{
  padding:.2rem;
}


#HWR1 .row > .col-3:nth-last-of-type(odd)  > .HWR1-box {
  margin-left: .3rem;
  margin-right: auto;
  }

#HWR1 .row > .col-3:nth-last-of-type(even)  > .HWR1-box {
  margin-right: .3rem;
  margin-left: auto;
  }




.FButton{
  text-decoration: none;
  border: 2px solid #a62c21;
  background-color: #ede578;
  font-family: inherit;
  font-size: 16px;
  padding: 0.3rem;
  cursor: pointer;
  width: 100%;
  display:block;
  box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.3);
}

.FButton:hover{
  color: #a62c21;
  font-weight: bold;
}


.HWR1-box > span{
  display: block;
  padding: .3rem;
  font-size: 1.2rem;
}

@media (max-width: 790px){
  #HWR1 .row > .col-3:nth-last-of-type(odd)  >.HWR1-box{
    margin-left: auto;
    margin-right: auto;
  }
  #HWR1 .row > .col-3:nth-last-of-type(even)  >.HWR1-box{
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 450px){
  .HWR1-box{
    width: 100%;
    font-size: 0.75rem;
    height: auto;
  }
}

.L1{
  background-color: #a62c21;
}

/* === HWR_2 ===  === HWR_2 ===  === HWR_2 === */

.HWR2-box{
  width: 600px;
}

.HolzA{
  padding-right: 1rem;
}




#HWR2 span{
display: inline-block;
}

#HWR2 .HWR2-box > H2{
  padding: 0.8rem;
  font-size: 1rem;
}
#IEinheit{
  width: 40px;
}



@media (max-width: 800px){
  .HWR2-box{
    width: 80%;
  }
  #HWR2 span{
  margin-top: .5rem;
  }

}

@media (max-width: 768px){
  .HWR2-box{
    width: 80%;
  }
  #HWR2 span{
  margin-top: .5rem;
  }
}


/* == FOOTER  ==  == FOOTER  ==  == FOOTER  ==  == FOOTER  ==  == FOOTER  ==  == FOOTER  ==    */
#footer{
  background-color: #444;
  height: 2.85rem;
  color: #ccc;
}

#footer span{
margin-left: .8rem;
}

@media (max-width: 625px){
  #footer span{
    font-size: .8rem;
    margin-left: .4rem;
  }
}

@media (max-width: 480px){
  #footer span{
    display: none;
  }
}


#footer-nav{
  display: inline-block;
  float: right;
}

#footer-nav a{
text-decoration: none;
}

#footer-nav a:link{
color: #ccc;
}

#footer-nav a:active{
color: #ccc;
}

#footer-nav a:hover{
color: #FFF;
}

#footer-nav a:visited{
color: #ccc;
}



/* Kontaktformular */

/* style common labels */

.kontaktformular .row .control-label {
				position: absolute;
				margin-top: 0.19rem;  height: 91.1%;
				padding: .63rem 1rem .5rem 1rem;
				color: grey;
				opacity: 0.7;

				width: 3rem;
				z-index: 2;
}



/* style rows with complex contents  */

.kontaktformular .captcha-row,
.kontaktformular .question-row,
.kontaktformular .checkbox-row,
.kontaktformular .upload-row {
				display: block;
				font-size: 14px;
				width: 100%;
				color: #555555;
				border: 1px solid #BDBDBD;
				border-radius: 4px;
				transition: border-color ease-in-out .15s;
				padding-right: 1rem;
				box-shadow: 0 0 1px rgba(0,0,0, .4);
}
.kontaktformular .captcha-row .control-label,
.kontaktformular .question-row .control-label,
.kontaktformular .upload-row .control-label,
.kontaktformular .checkbox-row .control-label{
				height: 100%;
				margin-top: 0;
}
.kontaktformular .captcha-row > div,
.kontaktformular .question-row > div,
.kontaktformular .checkbox-row > div{
				padding-bottom: .15rem;
}
.kontaktformular .captcha-row div div,
.kontaktformular .question-row div div{
				width: 100%;
				padding: .75rem 0 .75rem 60px;
}



/* style upload-fields  */

.kontaktformular .row input[type="file"] {
				width: calc(100% - 60px);
				height: 30px;
				margin: .2rem 0 .2rem 60px;
}
.kontaktformular .row .control-label + input[type="file"] {
				margin-top: .75rem;
}
.kontaktformular .row input[type="file"]:last-child {
				margin-bottom: .25rem;
}



/* style security-fields  */

.kontaktformular .captcha-row .field,
.kontaktformular .question-row .field{
				width: calc(100% - 60px);
				margin: .2rem 0 .2rem 60px;
				padding-left: .8rem;
}
.kontaktformular .row#answer .control-label {
				align-self: flex-start;
}



/* style checkbox-row  */

.kontaktformular .checkbox-row .checkbox-inline{
				display: block;
				padding: .7rem 0 .31rem 60px;
}

.kontaktformular .checkbox-row .checkbox-inline a:hover,
.kontaktformular .checkbox-row .checkbox-inline a:focus {
				color: #0025e2;
				text-decoration: underline;
}

.kontaktformular .checkbox-row .checkbox-inline a,
.kontaktformular .checkbox-row .checkbox-inline span {
				color: #0020c1;
				text-decoration: none;
				line-height: 24px;
				padding-left: 10px;

}
.kontaktformular .checkbox-row .checkbox-inline span{
				color: inherit;
}
.kontaktformular .row input[type="checkbox"] {
				height: 22px;
				width: 22px;
				border: 1px solid #CCC;
				border-radius: .25rem;
				transition: border-color ease-in-out .15s;
				display: block;
				float: left;
				-webkit-appearance: none;
				-moz-appearance: none;
				appearance: none;
				cursor: pointer;
				margin-left: 0;




				  -moz-border-radius: .25rem;
  -webkit-border-radius: .25rem;
  border-top: 1px solid #BDBDBD;
  border-left: 1px solid #BDBDBD;
  border-right: 1px solid #BDBDBD;
  border-bottom: 1px solid #BDBDBD;
        box-shadow: 0 0 1px rgba(0,0,0, .4);


}
.kontaktformular .row input:checked {
				background: url(../img/check-solid.svg) no-repeat center center;
				background-size: 75%;
}



/* style submit-button  */






.kontaktformular .row .senden {
				width: 100%;
				font-size: 16px;
				font-weight: bold;
				height: 2.5rem;
				margin-top: calc(1rem/16*5);
				padding: .5rem .75rem;
				color: white;
				background-color: #337ab7;
				border: 1px solid transparent;
				border-color: #2e6da4;
				border-radius: 4px;
}

.kontaktformular .row .senden:hover {
				background-color: #286090;
				border-color: #204d74;
				cursor: pointer;
}





/* style select-box for placeholders */

.kontaktformular .row select {
                background-color: #fff;
}

.kontaktformular .row ::placeholder{
				color: grey;
				opacity: 0.7;
				}


.kontaktformular .row select.unselected{
				color: #A6A6A6;

	border: 1px solid #CCC;
	border-radius: .25rem;
	-moz-border-radius: .25rem;
  -webkit-border-radius: .25rem;
  border-top: 1px solid #BDBDBD;
  border-left: 1px solid #BDBDBD;
  border-right: 1px solid #BDBDBD;
  border-bottom: 1px solid #BDBDBD;
    box-shadow: 0 0 1px rgba(0,0,0, .4);

				transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}


.kontaktformular .row select.field{
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	z-index: 1;
}
.kontaktformular .row select.field option[value=""][disabled] {
				display: none;
}
.kontaktformular .row select.field option {
				color: #555555;
}
.kontaktformular .row select.field option[value=""] {
				color: rgba(0,0,0,0.4);
}



/* style errors */

.kontaktformular .row .error .select-label{
				height: 66%;
				padding: .63rem 1rem .5rem 1rem;
			color: #db0007;
				border-color: #db0007;
}





.kontaktformular .row .error .control-label{
				color: #db0007;
				border-color: #db0007;
				margin-top: 0.19rem;
				height: 65.1%;
				padding: .63rem 1rem .5rem 1rem;
}




.kontaktformular .row .error .textarea-label{
			color: #db0007;
			border-color: #db0007;
      height: 84.6%;
       margin-top:0.25rem;
       padding: 0.6rem 1rem 5.1rem 1rem;
}









.kontaktformular .row .error .field,
.kontaktformular .row .error .checkbox-inline input,
.kontaktformular.kontaktformular-validate .row .field:invalid,
.kontaktformular.kontaktformular-validate .row .checkbox-inline input:invalid{	/* style invalid fields only if user wants to send the form (integrated via js) */
				background-color: #ffeaec;
				border-color: #eac0c5;
}
.kontaktformular .row .field:invalid,
.kontaktformular .row .checkbox-inline input:invalid{		/* remove browser-style for invalid fields */
				outline: none;
				box-shadow:none;
}
.kontaktformular .row .field:focus:valid,
.kontaktformular .row .checkbox-inline input:focus:valid{
				background-color: #FFFFFF;
				border-color: #d9e8d5;
				outline: none;
				box-shadow:none;
}
.kontaktformular .row .error ::placeholder{
				color: rgba(219, 0, 7, 0.6);
}

.kontaktformular .row .error select.unselected
{
				color: rgba(219, 0, 7, 0.4);
}

.kontaktformular .row .errormsg{
				color: #db0007;
				font-size: .75rem;
}
.kontaktformular .captcha-row.error_container,
.kontaktformular .question-row.error_container,
.kontaktformular .checkbox-row.error_container{
	margin-bottom: 2.7rem;

}
.kontaktformular .captcha-row .errormsg,
.kontaktformular .question-row .errormsg{
					display: block;
				position: absolute;
				left: 0;
				bottom: -46px;
				height: 40px;
}
.kontaktformular .checkbox-row .errormsg{
				display: block;
				position: absolute;
				left: 0;
				bottom: -46px;
				height: 40px;
}










.kontaktformular .captcha-row.error_container .control-label,
.kontaktformular .question-row.error_container .control-label,
.kontaktformular .upload-row.error_container .control-label,
.kontaktformular .checkbox-row.error_container .control-label{
				height: 100%;
				margin-top: 0;
}













/* style for mobile */

@media (max-width: 655px) {

				.kontaktformular {
								padding: 1px 1rem 1px 1rem;
								/* box-shadow: none; */
								margin-left:15px;
								margin-top:0px;
								margin-right:15px;
								width: auto;
				}
				.kontaktformular .row {
								display: block;
								margin-top: 1rem;
				}
				.kontaktformular .row .col-sm-4{
								flex-grow:0;
								flex-basis: 0;
								margin: 0;
				}
				.kontaktformular .row .col-sm-4,
				.kontaktformular .row .col-sm-8 {
								margin-top: 1.5rem;
				}
				.kontaktformular .captcha-row .col-sm-8,
				.kontaktformular .question-row .col-sm-8,
				.kontaktformular .upload-row .col-sm-8,
				.kontaktformular .checkbox-row .col-sm-8{
								margin-top: 0;
				}




				.kontaktformular .row .control-label {
				margin-top: 0.16rem; }
				.kontaktformular .row .error .control-label{
				margin-top: 0.16rem; }

				.kontaktformular .row .textarea-label{
				 margin-top:0.21rem; }
        .kontaktformular .row .error .textarea-label{
				 margin-top:0.21rem; }



#mailcopy-icon{
     padding-top: 6px;
}


#dataprotection-icon{
     padding-top: 7px;
}


#fileupload-icon{
     padding-top: 4px;
}


#securitycode-icon{
     padding-top: 0px;
}


#securityquestion-icon{
     padding-top: 0px;
}



/* safari iOS: margin-top for control & select label, padding-top for mailcopy & dataprotection icon - start */

body.safari .kontaktformular .row .control-label{
     margin-top: 0.19rem;
}


body.safari .kontaktformular .row .error .control-label{
     margin-top: 0.19rem;
}


body.safari .kontaktformular .row .select-label{
     margin-top: 0.15rem;
}


body.safari .kontaktformular .row .error .select-label{
     margin-top: 0.15rem;
}


body.safari .kontaktformular .row #mailcopy-icon{
     padding-top: 6px;
}


body.safari .kontaktformular .row #dataprotection-icon{
     padding-top: 5px;
}


body.safari #phone-icon-position-2{
     padding-left: 0.5px;
     padding-top: 0px;
}



body.safari #home-icon-position-2{
     padding-left: 0.5px;
     padding-top: 0px;
}


body.safari #user-icon-position-2{
     padding-left: 2.0px;
     padding-top: 0px;
}



body.safari #email-icon-position-2{
     padding-left: 1.0px;
     padding-top: 2px;
}




/* safari iOS: margin-top for control & select label, padding-top for mailcopy & dataprotection icon - end */




}



/* style copyright */

.copyright {
	 color: #000000;
	 font-size: 13px;
}



/* === Grid System === === Grid System === === Grid System === === Grid System === === Grid System === === Grid System === === Grid System ===  */

.container {
  width: 95%;
  margin-left: auto;
  margin-right:auto;
}

.row::after {
  content: "";
  clear:both;
  display: block;
}

[class*='col-'] {
  float: left;
  min-height: 1px;
  padding: .8rem;
}

.col-1 { width: 16.667%; }
.col-2 { width: 33.333%; }
.col-3 { width: 50%; }
.col-4 {width: 66.666%; }
.col-5 {width: 83.333%; }
.col-6 {width: 100%; }

/*
=== WICHTIGE BREAKPIONTS ===

320 Px iPhone Hoch
480 Px iPhone Quer
768 Px iPad Hoch
1024 Px iPad Quer
1200 Px Laptop
>1200 Px PC

*/

@media (max-width: 1024px) {
  .col-1 {width: 33.333%;}
  .col-5 {width: 66.667%; }
}

@media (max-width: 768px) {
.col-1 {width: 33.333%;   }
.col-2 {width: 100%;  }
.col-3 {width: 100%;  }
.col-4 {width: 100%;  }
.col-5 {width: 66.667%;   }
}

@media (max-width:  480px) {
  .col-1 {width: 100%;  }
  .col-2 {width: 100%;  }
  .col-3 {width: 100%;  }
  .col-4 {width: 100%;  }
  .col-5 {width: 100%;  }
}