/* = = = = = = = = = = = = = = = = = datei formular-06.css = = = = = = = = = = = = = = = = = = = = = = = = = */

/*  ----------------------------------------  */
/* allgemein */
/*  ----------------------------------------  */

*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

html form#form-by-onmouseover,
body form#form-by-onmouseover {
font-family:'open_sanscondensed_light', tahoma,georgia,  arial, Verdana, Segoe, 'Open Sans',helvetica,roboto ,sans-serif;
font-size:62.5%;
line-height:1.5;
}

body form#form-by-onmouseover {height:100%;
font-size:1.8rem;
margin: 0 auto;
overflow-x:hidden;
color:#5f5f5f;
}

/* checkbox eingeschaltet */
#form-by-onmouseover input[type=checkbox]{
display: inline-block;
}


/*  ----------------------------------------  */
/* formular */
/*  ----------------------------------------  */

/* box-style */

#form-by-onmouseover .box {display:inline-block;
text-align:left;
vertical-align:top;
width:100%;
padding:.4rem 0;
margin:0  -.25rem -.25rem -.25rem; /* ausgleich ( minus-margin) für INLINE-BLOCK-WHITESPACE-BUG*/
}

#form-by-onmouseover .box.vorname,
#form-by-onmouseover .box.name,
#form-by-onmouseover .box.strasse,
#form-by-onmouseover .box.nr,
#form-by-onmouseover .box.ort,
#form-by-onmouseover .box.postleitzahl {width:50%;
}

#form-by-onmouseover .box.vorname,
#form-by-onmouseover .box.strasse,
#form-by-onmouseover .box.ort  {padding-right:.6rem;
}

/* extra-text */

#form-by-onmouseover .extra-text {display:inline-block;
color:#1f1f1f;font-size:19px;font-weight:normal;
}

#form-by-onmouseover  .extra-text i {
color:#3f3f3f;font-size:17px;
}



/* basic-style */

form#form-by-onmouseover {width:100%; text-align:center;padding:2rem 1rem; color:#8f8f8f;}


/* input-style */

#form-by-onmouseover input[type="email"],
#form-by-onmouseover input[type="number"],
#form-by-onmouseover input[type="search"],
#form-by-onmouseover input[type="text"],
#form-by-onmouseover input[type="tel"],
#form-by-onmouseover input[type="url"],
#form-by-onmouseover input[type="password"],
#form-by-onmouseover input[type="submit"],
#form-by-onmouseover textarea,
#form-by-onmouseover select {width:100%;
font-size:16px;
height: 44px;margin: 0;
padding: 1rem;
border:solid 1px #cfcfcf;
color:#8F8F8F;
background:linear-gradient(to right,ghostwhite, white, ghostwhite);
border-radius: .5rem;font-family:'open_sanscondensed_light', tahoma,georgia,  arial, Verdana, Segoe, 'Open Sans',helvetica,roboto ,sans-serif;
}

/* auswahl-feld (select) */

#form-by-onmouseover select {
padding: 0 1rem ;
}

#form-by-onmouseover select option {font-size:18px; }


/* nachrichten-feld (textarea) */

#form-by-onmouseover textarea {
height: 15rem;padding-top:x3rem
}


/* absende-button (submit) */

#form-by-onmouseover input[type="submit"] {display:block;width:100%;
margin: 0;
padding: 0;
font-size:18px;
letter-spacing:2px;
text-transform:uppercase;
cursor:pointer;
color:#1f1f1f;
}

/* absende-button (submit) hover */

#form-by-onmouseover input[type="submit"]:hover {
background:linear-gradient(to right, white, #EFEFEF, white);
color:#1f1f1f;
}


/* focus */

#form-by-onmouseover input[type="email"]:focus,
#form-by-onmouseover input[type="number"]:focus,
#form-by-onmouseoverinput[type="search"]:focus,
#form-by-onmouseover input[type="text"]:focus,
#form-by-onmouseover input[type="tel"]:focus,
#form-by-onmouseover input[type="url"]:focus,
#form-by-onmouseover input[type="password"]:focus,
#form-by-onmouseover textarea:focus,
#form-by-onmouseover select:focus {
border: 1px solid darkcyan;background:#fff;
outline: 0;
}


/* checkbox und radio-style */

#form-by-onmouseover .checkbox-section,
#form-by-onmouseover .radio-section {
padding-left:1rem;
border:solid 1px #cfcfcf;
background:linear-gradient(to right,ghostwhite, white, white, ghostwhite);
border-radius: .5rem;
}

#form-by-onmouseover .checkbox-section label {
padding-right:1rem;
}

#form-by-onmouseover .checkbox-section label b,
#form-by-onmouseover .radio-section label b {
margin:0rem;font-weight:normal;
}

/* nowrap-damit checkbox/radio und label auch bei zeilenumbruch immer zusammenstehen */
#form-by-onmouseover .checkbox-section span,
#form-by-onmouseover .radio-section span {display:inline-block;white-space:nowrap; }



/* label animiert (nach klick springt es nach oben) für input und textarea */

#form-by-onmouseover .input-section,
#form-by-onmouseover .textarea-section  {
position: relative;
width: auto;
height: 44px;
line-height: 44px;
}

#form-by-onmouseover .textarea-section {
height: 15rem;
}

#form-by-onmouseover .input-section label,
#form-by-onmouseover .textarea-section label {
position: absolute;
top: 0;
left: 1rem;
transition:.3s all;
cursor: text;
}


#form-by-onmouseover input:focus~label,
#form-by-onmouseover input:valid~label,
#form-by-onmouseover textarea:focus~label,
#form-by-onmouseover textarea:valid~label {
font-size: 15px;
top: -14px;
color: darkslategray;letter-spacing:4px;
}

#form-by-onmouseover textarea:focus~label,
#form-by-onmouseover textarea:valid~label {
color:maroon;font-weight:bold
}


/* ############################################################ */
/* M E D I A   Q U E R I E S */
/* CSS Bildschirmabfragen */
/* ############################################################ */


/* ==================================== ab 480 pixel ================================== */
@media (min-width: 480px) {

form#form-by-onmouseover {width:400px; }

}


/* ==================================== ab 580 pixel ================================== */
@media (min-width: 580px) {

form#form-by-onmouseover {width:500px; }

}


/* ==================================== ab 760 pixel ================================== */
@media (min-width: 760px) {

form#form-by-onmouseover {width:600px; }

#form-by-onmouseover input[type="email"],
#form-by-onmouseover input[type="number"],
#form-by-onmouseover input[type="search"],
#form-by-onmouseover input[type="text"],
#form-by-onmouseover input[type="tel"],
#form-by-onmouseover input[type="url"],
#form-by-onmouseover input[type="password"],
#form-by-onmouseover textarea,
#form-by-onmouseover select {
font-size:20px;
}

}