/*General Style*/
body {
    background:#FFFFFF;
    font-size:100%;
    margin:0em;
    padding:0em;
}

h1 {
   font-size:2.5em;
   line-height:3.8em;
   font-family: Arial;
   font-weight:100;
   color:#E2DBDB;
   margin:0em;
}

h2, h3, h4, h5 {
   font-size:1.563em;
   line-height:1.8em;
   font-family:Arial;
   font-weight:100;
   color:#2F2D2C;
   margin:0em;
   padding:1.25em;
   text-align:left;
}

p {
   /*Standartgröße 16px*/
   line-height:1.25em;
   font-family:Arial;
   font-weight:100;
   color:#2F2D2C;
   margin:0em;
   padding:0em 1.25em  1.25em  1.25em;
   text-align:justify;
}

em {
   font-size:115%;
   font-style:normal;
   color:#003030;
}

ul {
   margin:0em;
   padding:0em;
}

li {
   list-style:square;
   font-family:Arial;
   font-weight:100;
   color:#2F2D2C;
   line-height:1.25em;
   margin:0.313em 0em 0.313em 0em;
   padding:0em;
}

img {
    width:90%;
    height:auto;
    max-width:100%
}

a {
  text-decoration:none;
}

/*On Top Bar*/
#menubar {
          display:block;
          background:#FFFFFF;
}
#menubar ul {
            display:block;
            width:4.813em;
            padding:0.9em;
}
#menubar ul li {
               display:inline;
}
/*Menuebutton ist nicht sichtbar (siehe Mobile Style*/
#menubar ul li a.menubutton {
         display:none;
}
/*Header*/
header {
       display:block;
       background-image: url(images/header-sprinkle.png);
       background-color:#CFCFCF;
       text-align:center;
}
header img{
             width:9.125em;
             padding: 1em 0em 1em 0em;
             max-width:146px;
}
/*Navigation*/
nav{
   display: block;
   height:2.5em;
   background:#FFFFFF;
   text-align:center;
}
nav ul{
    display:block;
}
nav ul li {
         display:inline;
         margin:0em 0.188em 0em 0.188em;

}
nav ul li a {
            color:#454040;
            font-size: 1.125em;
            line-height:2.5em;
            padding:0.563em 0.938em 0.375em 0.983em;
            transition:background 0.2s;
            -webkit-transition:background 0.2s;
}
nav ul li a:hover {
            background: #DBD9D8;
            border-bottom: 0.188em solid #CFCFCF;
            border-radius: 5px;
}
nav ul li a.active {
            border-bottom: 0.188em solid #CFCFCF;
            border-radius: 5px;
}
nav ul li img {
            width:2.4em;
            padding-bottom: 0em;
            max-width:77px;
}

/*Content Area*/
/*zweispaltig wegen Seitenartikel*/
#main {
      display:block;
      width:96%;
      max-width:980px;
      margin:1.25em auto;
      padding:0em;
}
/*zweispaltig*/
#main article {
              display:inline-block; /*Lösung statt Float*/
              width:65.5%;
              vertical-align: top;
              margin:0em;
              padding:0em;
              text-align: center;
              background-image: url(images/body-sprinkle.png);
              box-shadow:0px 0px 10px -5px; #4c4948;
              border-radius: 5px;
}
#main article img {
              max-width:560px;
              /*box-shadow:0px 0px 10px -5px; #4c4948;
              border-radius: 5px;*/
}
section article ul {
              text-align:left;
              padding:0em 1.25em  1.25em  3.75em;
}
/*List-Styles unterschiedlich Seiten*/
#profil li {
              list-style-image:url(images/article_list.png);
}
#referenzen li {
              list-style-image:url(images/article_list2.png);
}


#main aside {
            display:inline-block;/*Lösung statt Float, muß so sein, damit es an die Seite kommt*/
            width: 30.6%;
            margin-left:3%;
            padding:0em;
            vertical-align:top;
}
#main aside img {max-width: 64px;
}
#main aside section {
            margin-bottom:1.563em;
            border-bottom: 0.188em solid #007070;
            background-image: url(images/body-sprinkle.png);
            box-shadow:0px 0px 10px -5px; #4c4948;
            border-radius: 5px;
}
#main article h2 {
                 padding:1em 1.8em 1em 1.8em
}

#main aside section ul {
                 padding:0em 1.875em 1.25em 2.5em;
}
#main aside section ul li {
                 list-style: none;
}
#main aside section ul li a {
            color:#454040;
            font-size: 1.125em;
            line-height:2.5em;
            padding:0.563em 0.938em 0.375em 0.983em;
}
#main aside section ul li a:hover {
            color:#E7590B;
            transition: 0.2s;
}

/*Content Area*/
/*einspaltig ohne Seitenmenus*/
#main1sp {
      display:block;
      width:96%;
      max-width:980px;
      margin:1.25em auto;
      padding:0em;
}
#main1sp article {
              display:inline-block; /*Lösung statt Float*/
              width:99.1%;
              vertical-align: top;
              margin:0em;
              padding:0em;
              text-align: center;
              background-image: url(images/body-sprinkle.png);
              box-shadow:0px 0px 10px -5px; #4c4948;
              border-radius: 5px;
}
#main1sp article img {
              max-width: 600px;
              /*box-shadow:0px 0px 10px -5px; #4c4948;
              border-radius: 5px;*/
}
#main1sp article h2 {
                 padding:1em 1.8em 1em 1.8em
}
/*links-unterschiedlich*/

#main1sp a.kontakt {color:#BF0000;
}
#main1sp a.kontakt:hover{color:#C04000;
                         transition: 0.2s;
}

/*Footer*/
footer {
         display:block;
         background:#AFAFAF;
         text-align:center;
        /* width:100%;
         position: fixed;
         bottom:0px;*/
}
footer ul {
         display:block;
         max-width:980px;
         text-align:left;
         margin:0px auto;
}
footer ul li {
         display:inline;
         font-size:0.8em;
         line-height:2.8em;
         color:#E2DBDB;
         padding:0em 0.65em 0em 0.625em;
}
footer ul li a {
         color:#E2DBDB;
}
footer ul li a:hover {
         color:#FFFFFF;
         transition: 0.2s;
}




/*Mobile Style*/
@media screen and (max-width:800px){
         body {
                 font-size:90%;
         }
}

@media screen and (max-width:600px) {
/*wenn die Breite des viewports 600px unterschreitet sollen article und aside untereinander stehen.*/
         #main aside, #main article {
                 width:100%;
                 display:block; /* =untereinander, vorher war`s inline-block=nebebeinander*/
                 margin:0.625em 0em 0.625em 0em; /*kein Abstand mehr nebeneinander, sondern nur noch untereinander*/
         }
}

 /* für zweizeiligen Navigationsbereich*/
@media screen and (max-width:700px) {
          nav {
                 height:auto;
         }
}

/* wenn Smartpone-ansicht in Breite weniger als 550px (menubutton ist sichtbar) greift Togglefunion auf die Klasse nav der nav zu*/
@media screen and (min-width:550px) {
         nav.nav {
                 display:block !important;
         }
}

@media screen and (max-width:550px) {
         body {
                 font-size:86%;
         }
         #menubar ul li a.menubutton {/* menubutton sichbar*/
                 display:block;
         }
         nav {
                 display:none; /* erst mal nicht mehr sichtbar*/
                 height:auto;/* Höhe muß sich anpassen, wenn sichtbar*/
                 margin: 0.3em 0em 0.3em 0em;
         }
}