<style>

body {
    font-size: 100%;
    font-family: sans-serif;
}

textarea
{
    font-family: inherit;    
}

form {
    /* border: 1px solid black; */
    width: 90%;
    /* background-color: whitesmoke; */
    margin: 0 auto;
    padding: 0 1em;
}

form label {
    display: block;
    //font-size: 0.8em;
    font-size: 1.1em;
    color: darkslategrey;
    padding-left: 3px;    
}


input,
textarea,
select
{
    width: 100%;
    font-size: 1.1em; 
    padding: 4px;
    font-family: inherit;
    font-weight: lighter;
    border:1px solid gray;
    outline: none;
    border-radius: 0.3em;
}    

/*input.larger:invalid, select:invalid
    {border: none; outline: 1px solid red;}
input.larger:valid, select:valid
    {border: none; outline: 1px solid black;}
input.larger[type=checkbox]:valid, input[type=radio]:valid
    {border: none; outline: none;}
*/

input.larger
{
   width: unset;
   margin-right: 10px;
   float: left;
   transform: scale(1.5); 
}


details {
    background-color: lightgrey;
}

details[open] {
   background-color: white;
}

details[open] summary {
   background-color: lightgreen;
}

input:focus,
textarea:focus { 
    border:1px solid limegreen; 
    // border: 1px solid orange;
}

input[type=submit] {
    background-color: limegreen;
    cursor: pointer;
    width: 14em;
    padding: .3em 0;
    border-radius: 0.7em;
}

input[type=submit]:hover {
    background-color: yellow;
    box-shadow: 2px 2px 2px grey;
}

.wrap { background: slateblue; }
.hlogo    { float: left;  width: 30%; }
.htext    { float: left;  width: 40%; height: 50px; }
.hsprache { float: left;  width: 30%; height: 50px; } 

#fertig {
  background-color: lightgreen;
  margin-left: 10px;
  margin-right: 10px;
  padding-left: 10px;
  padding-top: 10px;
} 

  @media screen and (min-width: 320px){ 
    body{ font-size: 100%; } 
  }   


  @media screen and (min-width: 601px){ 
    body{ 
      font-size: 100%; 
      width: 600px;
      margin-left:auto;
      margin-right:auto;
      margin-top: 10px;
    }  
  }


</style>
