@import url('//fonts.googleapis.com/css?family=Roboto+Slab');
@font-face {
  font-family: 'Rancho';
  font-style: normal;
  font-weight: 400;
  src: url('/website/style/fonts/Rancho/Rancho.woff') format('woff');
}

html {
  font-size: 100%;
  font-family: 'Roboto Slab';
}
@media screen and (min-width: 450px) {
  html { font-size: 125%; }
}
@media screen and (max-resolution: 1dppx) and (min-width: 1921px) {
  html { font-size: 150%; }
}
@media screen and (max-resolution: 1dppx) and (min-width: 2561px) {
  html { font-size: 200%; }
}
@media screen and (max-resolution: 1dppx) and (min-width: 3201px) {
  html { font-size: 250%; }
}
@media screen and (max-resolution: 1dppx) and (min-width: 3841px) {
  html { font-size: 300%; }
}


input,
optgroup,
select,
textarea { font-family: 'Rancho'; }

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  background-color: #ddd;
  font-family: 'Roboto Slab';
}

#kopf {
  background-color: #aaa;
  width: 100%;
  min-height: 2.5em;
/*  overflow-y: hidden;*/
  padding-bottom: .25em;
}

#kopf * {
  margin: 0;
  padding: 0;
  line-height: 1em;
}

#kopf h1 {
  color: #fff;
  font-size: 2em;
  margin-left: .25em;
  padding-top: .125em;
  text-shadow: .035em .035em .05em #000;
  float: left;
}

#kopf #loginkey {
  color: #fff;
  font-size: 2em;
  margin-right: .25em;
  padding-top: .125em;
  text-shadow: .035em .035em .05em #000;
  text-decoration: none;
  float: right;
}
#kopf #loginkey span { display: none; }

#kopf form#login {
  clear: both;
  height: 0;
  overflow-y: hidden;
}
#kopf form#login:target {
  height: auto;
}

#kopf form#login p {
  display: block;
  margin: 0 0 0 .5em;
  padding-top: .5em;
}

#kopf form#login label {
  display: block;
  font-size: .8em;
}

#kopf form#login input {
  border: .1em solid #666;
  padding: 0 .2em;
  line-height: 1.4em;
}

#kopf form#login input { width: 90%; }
#kopf form#login input[type="submit"] { width: auto; }

#kopf form#login p.loginname a {
  color: inherit;
  font-weight: bold;
  text-decoration: none;
}

#inhalt { margin: .5em; }

#inhalt h2 {
  margin: 0;
  padding: 0;
  line-height: 1em;
}

@media screen and (min-width: 800px) {

  #kopf {
    position: fixed;
    top: 0;
    min-height: 2.75em;
    z-index: 10;
  }

  #kopf h1 { float: left; }

  #kopf #loginkey { display: none; }

  #kopf form#login {
    float: right;
    clear: none;
    height: auto;
  }

  #kopf form#login p {
    display: inline-block;
    margin: 0 .5em 0 0;
    padding-top: .25em;
  }

  #kopf form#login input { width: 10em; }

  #kopf form#login p.loginname {
    margin-top: .75em;
  }

  #inhalt { margin-top: 3.5em; }

}