@media screen {

  /* Verhindert "Hüpfen" bei kurzen Seiten ohne Rollbalken */ 
  html { 
    font-family: 'Open Sans', Arial, sans-serif;
	font-size: 100%;
	overflow-y: scroll;
	box-sizing: border-box;
}
  *, 
  *:before, 
  *:after {
	 box-sizing: inherit;
}

  /* Seitenbreite begrenzen (bis Media Queries kommen) */ 
  body { 
    font-size: 16px; 
    font-size: 1rem;   
    color: #868044;
	height: 100%;
	width: 70%;
  }

  h2   { font-size: 24px; font-size: 1.5rem; }  
  h3   { font-size: 21px; font-size: 1.3125rem; }
  main { line-height: 1.7; } 

  
  
  /* padding für Layoutbereiche */ 
  
  main, 
  aside,
  .pagefooter {
    padding: 1em;
  }

  /* Pageheader */ 
  .pageheader h1 {
    line-height: 1;
    padding: 0;
    margin: 0;
  }
  .pageheader a, 
  .pagefooter a {
    color: #868044;
    text-decoration: none;
  }
  
  a:link, a:visited {
    color: #ab9363;
    text-decoration: none;
    font-weight: normal;
}

  a:hover, a:focus {
    color: #bca474;
    text-decoration: none;
    font-weight: normal;
}

  a:link a:active, a:hover { outline: 0; }


  /* 
  In visuellen Layouts verstecken, Screenreader lesen vor 
  github.com/h5bp/html5-boilerplate/issues/194#issuecomment-564745 
  */  
  .hideme {
    border: 0;
    clip: rect(0 0 0 0); 
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }

  /* 
  Micro-Clearfix-Hack 
  nicolasgallagher.com/micro-clearfix-hack/ 
  */ 
  .cf:before, .cf:after { content: " "; display: table; } 
  .cf:after, .clear { clear: both; } 

} /* Ende @media */