/* ---------------------------------------------------------
   Basisgestaltung und Layoutbereiche
   ---------------------------------------------------------*/
@media screen {

  /* border-box für alle Elemente  */
  * {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
  }

  /* -------------
     Basisformatierung  */
  html {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 100%;
  }
  body {
    background: white;
    color: #333;
    font-size: 14px; font-size: 0.875rem;
    margin: 0 auto;
  }
  /* Überschriften und Fließtext gestalten */
  h2   { font-size: 22px; font-size: 1.375rem; }
  h3   { font-size: 20px; font-size: 1.25rem; }
  main { line-height: 1.7; }

  /* Elemente verstecken in visuellen Layouts */
  .hideme {
    position: absolute;
    top: -32768px;
    left: -32768px;
  }

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

  /* Kopf- und Fußbereich einfärben */
  .pageheader{
   background-image: url("Titelbild.jpg");
   background: #333;
   color: white;
  }

  .pagefooter {
    background: #333;
    color: white;
  }

  /* Padding für Layoutbereiche */
  .pageheader ,
  nav,
  div.wrap,
  .pagefooter {
    padding: 1em;
  }

  /* Pageheader mit Dosis */
  .pageheader h1 {
    color: white;
    padding: 0;
    margin: 0;
    font-family: Dosis, 'Open Sans', sans-serif;
    font-size: 32px;
    font-size: 2rem;
    letter-spacing: 1px;
  }
  .pageheader a {
    color: white;
    text-decoration: none;
  }
  .pageheader p {
    padding: 0;
    margin: 0;
  }
  .pagefooter a {
    color: white;
    text-decoration: none;
  }

  /* Social Media Genericons im Footer */
  ul.socialmedia {
    padding: 0;
    margin: 0;
  }
  ul.socialmedia li {
    display: inline-block;
    margin-right: 2em
  }
  ul.socialmedia a.genericon {
    color: #fff;
    font-size: 2em;
  }
} /* Ende @media */


/* -------------
   Media Query für große Viewports  */

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

  body {
    width: auto;     /* war 90% */
    max-width: none; /* war 980px */
    box-shadow: 0;   /* war 0 2px 6px rgba(0,0,0,0.3) */
    margin: 0;       /* war 1em auto */
  }

  /* Normaler Hintergrund */
  html {
    background: #333; /* war #ddd url("grey-bg.png") repeat left top; */
    color: white;
  }
  div.wrap {
    overflow: hidden;
  }

  .pagefooter {
    clear:both;
  }

} /* Ende @media */

/* eof */