* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

 body {
        width: 100%;
        margin: 0 auto;
        font-size: 1.3em;
        max-width: 1600px;           /* add max-width to the body */
      }

.wrapper {
  width: 95%;
  margin-left: 2.5%;
}     

nav a {
  text-decoration: none;
  color: #333;
  font-weight: normal;
}

nav a:hover {
  text-decoration: none;
  color:#fc8e4b;
  font-weight: normal;
}

header {
  width: 99%;
  /*margin-left: 5%;*/
/*border: 1px solid red;*/
}

.logo {
  float: left;
  text-indent: -9999px;
  width: 179px;
  height: 34px;
  margin: 15px 0 0 2px;
  background: url(../img/logo179x34p.gif) left top no-repeat;
}

/* make room for the logo (130px) */
nav ul {
  margin-left: 180px;
  margin-right: 5%;
  padding-top: 0;
}


/* links in the nav, make sure we have reasonable height for touch */
nav li a {
  display: block;
  line-height: 1.9em;
  text-align: center;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: .75em;
}


/* remove "home" from nav */
nav li.home {
  display: none;
}

section {
 }

      .span-1, .span-2, .span-3 {
        /*min-height: 150px;*/
        height:auto;
        float: left;
        margin-right: 3.33333%;
        margin-bottom: 10px;
      }

                                    /* remove background colors */
      .span-1 {
        width: 100%;
       /* background: url(img/1p_rot.gif) left top repeat;*/
      }

      .span-2 {
        width: 100%;
        background: url(img/1p_orange.jpg) left top repeat;
      }
      
      .span-3 {
        width: 100%;
        /* background: url(img/1p_gruen.jpg) left top repeat;*/
        margin-bottom:-10px;
      }
      
      img {
        float: left;
        max-width: 100%;
        border: 1px solid #dedcdc;
       
      }
 
 p {
  text-align: left;
  
}     

.span-3 h1 {
  line-height: 1em;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: lighter;
  font-size: 1.5em;
  color:#dedcdc;
  margin: 20px 0 0 0;
  padding:10px 0 10px 0;
  border-top:1px solid #b6b3b3;
  border-bottom:1px solid #b6b3b3;
}



.span-3 p {
  
  border-top:1px dotted #b6b3b3;
}
      


h1 {
  line-height: 1.5em;
  text-align: right;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: lighter;
  font-size: 1.5em;
  color:#dedcdc;
  margin-bottom:-45px;
   margin-right:5px;
}
.span-1 p {
  color:#999;
  line-height:0.75em;
}

.grau {
font-size:0.75em;
}


.klein {
  text-align: right;
  font-size: 0.5em;
  text-transform: uppercase;
 }
 

       

 a { 
text-decoration: none;
color:#999;
font-size:0.75em;
}

 a:hover {
color:#676767;
}

footer {
border-top:1px dotted #b6b3b3;
}

.impressum  {
font-size:0.75em;
padding-bottom: 20px;

}

@media (min-width: 775px) {
.logo {
  float: left;
  text-indent: -9999px;
  width: 250px;
  height: 48px;
  margin: 10px 0 10px 2px;
  background: url(../img/logo250x48p.gif) left top no-repeat;
}


}/*/mediaquery*/



@media (min-width: 550px) {
/* move nav to single line */
/* min-width helps this work at higher resolutions */
header nav ul {
  margin-top: 15px;
  margin-left: 0;
  padding: 0;
  position: relative;
  float: right;
  min-width: 50%;
  /*border-top: 2px solid #000;*/
  /*border-bottom: 2px solid #000;*/
}
        
        
/* move to horizontal by floating <li>s left */
/* position: relative needed for the :after later */
header nav li {
  float: left;
  width: 25%; /*33%;*/
  text-align: center;
  position: relative;
}

/* tweaks to padding/font-size */
header nav li a {
  padding: .25em 10px;
  font-size: .75em;
}


/* add the nav separator in the primary nav */
header nav li:after {
  content: "|";
  position: absolute;
  right: 0;
  top: 1em;
  font-weight: normal;
  font-size:.5em;
}


/* remove the nav separator form the last child */
header nav li:last-child:after {
  content: "";
  
}

.span-1 {
        width: 30%;
         /* background: url(img/1p_rot.gif) left top repeat;*/
      }

      .span-2 {
        width: 63.33333%;
        background: url(img/1p_orange.jpg) left top repeat;
      }
      
      .span-3 {
        width: 96.66666%;
         /* background: url(img/1p_gruen.jpg) left top repeat;*/
      }


}/*/mediaquery*/