@charset "UTF-8";
/*---------------------------------------*/

* {margin: 0 auto; padding: 0;}
.hide,
#address,
div#left, div#rechts,
div.kontakt_l, div.kontakt_r, 
#heck_Home, #heck_Impressum, #heck_Referenzen, #heck_Kontakt, #heck_Kontaktanzeige,
#nothing 
{display: none;}

div#clearleft {clear: left;}

.rt_logo-block {position: fixed; top: 0; left: 0}
html, body {height:100%; font-family: Quicksand light, Calibrie light, Verdana, sans-serif; background-color: #f1f1f1;
 font-variant: light; overflow-x: hidden; overflow-y: auto; font-size: large; line-height: 1.3;}

h3 {font-weight: bolder; font-size: large; padding-bottom: 0.25em;}

#logo_Home, #logo_Referenzen, #logo_Impressum, #logo_Kontakt {width: 50%; height: auto; position: fixed; padding: 0 1em; margin-top:1em; right: 0;}
#logo_Home, #logo_Kontakt {top: 6.5em;}
#logo_Referenzen, #logo_Impressum {top: 6em;}

#middle {position: relative; top: -1em; height: auto; padding: 2em 1em 1em 1em;
	background: white; margin: 0 0.25em 2em 0.25em; border-bottom: 0.5em solid gray; border-radius: 15px;}
#call {line-height: 1em; padding: 3.75em;}
#adresse {font-size: 0.8em; }
#footer2 {position:relative; bottom: 1em; width: 98%; text-align: center; background-color: #f1f1f1;}

p { hyphens: auto;
-webkit-hyphens: auto;
-webkit-hyphenate-limit-chars: auto 3;
-webkit-hyphenate-limit-lines: 4;
-ms-hyphens: auto;
-ms-hyphenate-limit-chars: auto 3;
-ms-hyphenate-limit-lines: 4; }
.title1 {font-weight: bolder; font-size: 1em; line-height: 1.5;}
.title2 {font-size:18px; line-height: 150%; padding-top: 0.5em;}
.usp {font-weight: bolder;font-style: italic; padding-left: 1.75em;}
.first {margin-left: 1.25em;list-style-type:square; color:#971261;}
.firsttext {color: #000;}
.diamond {margin-left: 2em;list-style-type:disc;color:#971261;}
.absatz {padding: 1em 0; justify-content: center;}
.absatz_de {padding: 1em 0; justify-content: center;}
.title {font-weight: bolder; font-size: .3em; line-height: 2em;}
.content {margin: 0 1em; padding-top: 1em;}
.more {font-size: 0.8em; font-weight: normal; margin-left: 2em;}
.ref {margin: 0.5em 0 1em 0;}
.ref_title {font-weight: bolder; line-height: 1.5em;}
.ref_link{font-size: 0.8em; font-weight: bolder; padding-left: 2em;}
.bolder {font-weight: bolder;}
.float_heck {width: 89%; float:left;}

a:link    {font-family: Quicksand light, Calibrie light, sans-serif;  color:#971261; text-decoration:none; line-height:1.2em;}
a:visited {font-family: Quicksand light, Calibrie light, sans-serif;  color:#971261; text-decoration:none;}
a:focus   {font-family: Quicksand light, Calibrie light, sans-serif;  color:#971261; text-decoration:underline;}
a:hover   {font-family: Quicksand light, Calibrie light, sans-serif; color:#971261; text-decoration:underline;}
a:active  {font-family: Quicksand light, Calibrie light, sans-serif; color:blue; text-decoration:none;}

a.phone:link, a.phone:visited, a.phone:focus, a.phone:hover , a.phone:active {font-weight:normal; text-decoration:none; line-height:0.8em;}

/* ****************** Formulare ******************************************************************* */
.SupForm {margin-left: 10%; height: auto; font-family: Quicksand light, Calibrie light, sans-serif;}
input , select {border: none; border-bottom: solid 0.5px lightgray; line-height: 1.75em;font-family: Quicksand light, Calibrie light, sans-serif;font-size: 0.9em;}
input[type=text] { background-color: white; background-repeat: no-repeat; -webkit-transition: width 0.4s ease-in-out; transition: width 0.4s ease-in-out;}
input[type=text]:focus {border-bottom: solid 0.5px lightgray;background-color: white; background-repeat: no-repeat; -webkit-transition: width 0.4s ease-in-out; transition: width 0.4s ease-in-out;}
textarea {width: 100%; height: 5em; padding: 2em; border: solid 0.5px lightgray; border-radius: 8px;}
select {width: 10%; color: gray; padding-left: -0.1em}
input[type=button], input[type=submit], input[type=reset] {background-color: #4CAF50; color: white; text-decoration: none; margin: 2em; cursor: pointer;}
.senden {height: auto; margin-top: 0.5em; padding: 1em 2em; font-family: Quicksand light, Calibrie light, sans-serif; font-size: 0.9em;border-radius: 8px;}
.senden:hover {background-color: lightgray; color:#971261;border-radius: 8px;} 
.error {	color:red;font-weight: normal;} 

/* Small devices (portrait tablets and large phones, 600px and up) */ 
@media only screen and (min-width: 600px) {
.SupForm {font-family: Quicksand light, Calibrie light, sans-serif;}
input , select {width: auto; font-family: Quicksand light, Calibrie light, sans-serif;font-size: 0.9em;} 
.senden {font-family: Quicksand light, Calibrie light, sans-serif;}
#home {top: 30.45em; }
#heck_Home {display:none;}
}

/* Extra large devices (large laptops and desktops, 1200px and up) 
@media only screen and (min-width: 1200px) {*/

/* Medium devices (landscape tablets, 768px and up) 
@media only screen and (min-width: 768px) {*/

/* Large devices (laptops/desktops, 992px and up) 
@media only screen and (min-width: 992px) {*/

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 1100px) {
#logo_Home, #logo_Referenzen, #logo_Impressum, #logo_Kontakt , #logo_Kontaktanzeige{position: absolute; right: 5%; padding: 0 1em; margin-top: 1em; width: 40%;}
#logo_Home, #logo_Referenzen,#logo_Impressum, #logo_Kontaktanzeige{top: 2.1%;}
#logo_Referenzen{float:right; width: 35%;}
#logo_Kontakt {top: 4.1%;}
#heck_Home, #heck_Impressum {display:block; position: absolute; top: 59em; right: -58.25em; shape-outside: circle(50% at 50% 50%);}
#middle {top: 40%; position: absolute; left: 18%; display: inline-block; width: 60%; float: left; height: auto; margin-bottom: 2em;}
div#left {position: fixed; top: 48em; left: 5em; text-align: right; display: inherit; float: left; width: auto;}
div#rechts {position: fixed; top: 30em; left: 82%; display: inherit; float: left; }
#address {display: inherit;}
#footer2 {display: none;}
#wrapper { position: relative; min-height: 100%; height: auto !important; height: 100%; width: 100%;}	 
#agb {font-size: 0.8em; margin: 0; padding-right: 2em; text-align:justify;}
#r {position: fixed; left: 2%; bottom: 2em; font-family: Quicksand light, Calibrie light, sans-serif; }
#copyr {position:relative; float:right; display:none;}
#copyright {font-size: 0.9em;line-height: 2em;}
#home {position: fixed; left: 2%; /*top: 28em;*/ font-family: Quicksand light, Calibrie light, sans-serif; text-decoration:none;}
#bluehte{position: fixed; left: 0; top: 0; }
#formtitle {margin-left: 20%;}
.absatz_de {padding: 1em 0; justify-content: left; float: left;}
.SupForm {font-family: Quicksand light, Calibrie light, sans-serif;}
input , select {font-family: Quicksand light, Calibrie light, sans-serif;font-size: 0.9em;} 
.senden {font-family: Quicksand light, Calibrie light, sans-serif;}
#feld {width: 30%; margin: 1em 0 0.25em 0; padding: 0.5em; font-size: 1em;border-radius: 5px;}
.portrait {width: 55%; float: left;}
.portrait_small {display:none;}

div.kontakt {display: table;  /*width: 61%;padding: 5px 5px 5px 0; display: flex; */margin-top: 0.5em; 
align-items: center; justify-content: left; line-height: 1.75em;}
div.kontakt_l {display: table-cell; width: 18%; padding-left: 2em;/**/ font-weight:bold;}
div.kontakt_r {display: table-cell; width: 42%;/* padding: 5px; */color: #971261;}
}


/* Extra small devices (phones, 600px and down)  */
@media only screen and (max-width: 600px) {/*
#recapt {position: relative; left: -1%; float: left;}*/
#logo_Home, #logo_Referenzen, #logo_Impressum, #logo_Kontakt , #logo_Kontaktanzeige{position: absolute; right: -1.5%; top: 8.5%;padding: 0 1em; margin-top: 1em; width: 50%;}
#logo_Home, #logo_Kontaktanzeige {top: 8.5%;}
#logo_Impressum {right: 0; top: 0.5%;}
#logo_Kontakt  {top: 6%;}
#logo_Referenzen {top: 0;}

.portrait {display:none;}

#nothing {display:inline;}

select {font-family: Quicksand light, Calibrie light, sans-serif;font-size: 0.9em; width: auto;} 
#feld {width: 80%; margin: 1em 0 0.25em 0; padding: 0.5em; font-size: 1em;border-radius: 5px;}
#heck_Home {display:none;}
}

/* Medium devices (landscape tablets, 768px and up) 
@media only screen and (min-width: 768px) {} */

/* Large devices (laptops/desktops, 992px and up) 
@media only screen and (min-width: 992px) {...} */