/* = = = = = = = = = = = = = = = = = datei formular-02.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: 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*/
}

/* basic-style */

form#form-by-onmouseover {width:100%; margin:0 auto;padding:2rem .3rem; color:#8f8f8f;}

form#form-by-onmouseover label  {color: darkslategray;}

/* icon-style */

form#form-by-onmouseover label i {color:cadetblue;padding:0 .5rem 0  0;}


/* 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 textarea,
#form-by-onmouseover select {width:100%;
font-size:16px;
height: 44px;
padding: 1rem;
background:transparent;color:#8F8F8F;
border:solid 1px #cfcfcf;
border-radius: .5rem;font-family:'open_sanscondensed_light', tahoma,georgia,  arial, Verdana, Segoe, 'Open Sans',helvetica,roboto ,sans-serif;
}

/* nachrichten-feld (textarea) */

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


/* absende-button (submit) */

#form-by-onmouseover input[type="submit"] {display: block;
height: 44px;
font-size:18px;
letter-spacing:2px;
text-transform:uppercase;
margin: 0;
padding: 0 4rem;
background:cadetblue;
color:white;
border-radius: .5rem;
border:0;
cursor:pointer;border:solid 1px #cfcfcf;font-family:'open_sanscondensed_light', tahoma,georgia,  arial, Verdana, Segoe, 'Open Sans',helvetica,roboto ,sans-serif;
}

/* absende-button (submit) hover */

#form-by-onmouseover input[type="submit"]:hover {
background:darkcyan;color:#fff;
}



/* 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:#FBFBFF;
outline: 0;
}


/* 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;letter-spacing:0px;
}




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



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


#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;
}

#form-by-onmouseover textarea:focus~label,
#form-by-onmouseover textarea:valid~label {
letter-spacing:5px;
}


}