@font-face{font-family: DroidSans; src:url("DroidSans.ttf")}

body{background-color:#fff;color:#777;font: normal 100% DroidSans, Verdana, Arial, Helvetica, Georgia, sans-serif; font-weight: 400; line-height: 170%; margin:0; padding:0;}

img {max-width: 100%; height: auto;}
ul {list-style: none;}
a {text-decoration: none; color: #777;} 
a:hover, a.aktiv, a:active {color:#86b100; cursor:pointer;}

header {margin:0; padding:0;}
div#webentwicklungLogo {width:20%; float:right; margin:0; padding:2em 6em 0.5em 0; text-align: right; }
img.logo {display:block; margin-bottom:0.5em;}
div#navi-oben {width:60%; float:left; margin:0; padding:2.75em 0 0.5em 4em; }
ul#navi li {position: relative; float:left; margin: 0 4em 0 0; letter-spacing: 0.1em;}
ul#navi li:last-child {margin: 0;}
ul#navi li a:hover {color:#86b100;}
span.naviSymbol {position:relative; top:-2px; color:#86b100; font-weight: bold;}
img.headerBild {width:100%; height:auto; margin:0; border:none; vertical-align: bottom;}

main {margin:0; padding:0;}
div.C1 {background-color:#f1f1f1;}
div.C1, div.C2 {margin:0; padding: 1.5em; letter-spacing: 0.01em;}
div.C1 article, div.C2 article {width:50%; max-width: 45em; margin: 1em auto; font-size: 105%;}
div.C1 article p, div.C2 article p {padding:0; margin-top: 0.1em;}

div.refGrau {background-color:#f1f1f1; padding:0.5em; margin:0;}
div.refWeiss {padding:0.5em;}
div.refWeiss article, div.refGrau article {width:60%; max-width: 57em; margin:0 auto;}
div.refWeiss article p, div.refGrau article p {padding:0; margin-top: 0.1em;}

h1#motto {width:50%; max-width: 45em; margin: 0.85em auto 1em auto; font: 2.4em 'Droid Serif', serif; font-style:italic; line-height: 130%; color:#aaa;}
span.motto2Zeile {display:block; text-align: right;}
span.mottoKlein {display:block;}
h1.top, h2.top, h1.referenzen {font:2.1em 'Droid Serif', serif; font-style:italic; color: #888; padding:0 0 0.3em 0; margin:0;}
h1.referenzen {padding-top:1em;}
h3 {font:1.5em 'Droid Serif', serif; font-style:italic; padding:0.25em 0 0.2em 0; margin:0;}

div.refBild {margin:2em 0 1em 0; padding:0; text-align:center;}
div.refBild img {margin:0; border:1px solid #c0c0c0; border-radius: 6px; width: 100%; height: auto;}
div.refFlex {margin:0; padding:0; display: flex;}
div.refFlexLinks {flex:1 1; width:50%; margin:0; padding: 0 0 0 0.2em;}
div.refFlexRechts {flex:1 1; width:50%; margin:0; padding:0.9em 0 0 1.5em;}

h3.referenz {margin:0; padding:0; font-style:normal; font-size: 1.2em; font: bold 100% DroidSans, Verdana, Arial, Helvetica, Georgia, sans-serif;}
p.referenz {margin:0; padding-top:0.3em;}
ul.referenz {margin:0; padding:0.5em 0 1.5em 1em; list-style: circle;}
ul.leistungen {margin:0; padding:0 0 0 1.1em; list-style: circle;}

footer {clear:both; background-color: #e7f0f1; border-top:1px solid #b0b0b0; margin:0; padding:1em; text-align: center;}

@media screen and (max-width: 90em) {  
div.C1 article, div.C2 article {width:75%;}
h1#motto {width:60%;}
}

@media screen and (max-width: 75em) { 
div.refWeiss article, div.refGrau article {width:70%;}
}

@media screen and (max-width: 72em) { 
h1#motto {width:65%; font-size:2.2em;}
}

@media screen and (max-width: 70em) {  
div#webentwicklungLogo {width:25%; padding:1.5em 1.9em 0.5em 0;}
div#navi-oben {width:65%; padding:2.2em 0 0.5em 1em; }
ul#navi li {margin: 0 3em 0 0;}
ul#navi li:last-child {margin: 0;}
div.C1 article, div.C2 article {width:80%; font-size: 95%;}
}

@media screen and (max-width: 60em) {  
h1#motto {width:70%;}
div.refWeiss article, div.refGrau article {width:75%;}
}

@media screen and (max-width: 55em) {  
div#webentwicklungLogo {float:none; width:95%; margin:0; padding:1em 0.8em 0 0; line-height:90%;}
div#webentwicklungLogo img {max-width:30%;}
div#navi-oben {float:none; width:95%; margin:0; padding:0 0 0.7em 0; line-height:100%;}
ul#navi li {font-size:0.95em;}
h1#motto {width:80%; margin: 1em auto; padding:0; font-size: 1.8em; line-height: 125%;}
h1.top, h2.top, h1.referenzen {font-size: 1.8em; line-height:120%; padding:0 0 0.3em 0; margin:0;}
div.C1, div.C2, div.refFlex {margin:0; padding: 0.5em; hyphens: auto;}
div.C1 article, div.C2 article {width:80%;}
}

@media screen and (max-width: 50em) {
div.C1 article, div.C2 article {font-size: 95%; line-height: 145%;}
}

@media screen and (max-width: 45em) {  
h1#motto {width:90%; margin: 1em auto; font-size: 1.5em; line-height: 130%; text-align:center;}
span.motto2Zeile {display:block; text-align: center;}
div.refWeiss article, div.refGrau article {width:85%;}
}

@media screen and (max-width: 35em) {  
div#webentwicklungLogo {width:30%; float:right; margin:0; padding:1.5em 1.5em 0 0;}
div#navi-oben {width:57%; float:left; margin:0; padding:1em 0 0 0; line-height:100%;}
div#webentwicklungLogo img {max-width:100%;}
ul#navi {margin:0; padding:0.8em 0 0.5em 1em;}
ul#navi li {float:none; margin:0; line-height:210%; }
div.C1 article, div.C2 article {width:90%;}
}

@media screen and (max-width: 30em) {  
div#webentwicklungLogo {width:90%; float:none; margin:0; padding:1.5em 1.5em 0 0;}
div#navi-oben {width:90%; float:none; margin:0; padding:0;}
div#webentwicklungLogo img {max-width:35%;}
div.refFlex {display:block; width: %; margin-left:5px;}
div.refFlexLinks {flex:none; width:97%; margin:0; padding: 0;}
div.refFlexRechts {flex:none; width:97%; margin:0; padding:0;}
ul.referenz {margin:0; padding:0 0 0.5em 1em;}
}