*, *:before, *:after {
box-sizing : border-box;
}
html, body, div, span, applet, object, iframe, h1, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
outline : none !important ;
}
html, body {
font-family : Roboto, sans serif;
font-size : 11px;
line-height : 1.5em;
margin : 0;
height : 100%;
max-height : 100%;
padding : 0;
border : 0;
background-color: #3c5478;
}
.blau {
color : #04a1d0;
}
.rot {
color : #e30613;
}
.gelb {
color : #ffed00;
}
.gruen {
color : #009640;
}
.lila {
color : #6e2584;
}
.braun {
color : #b65207;
}
.dunkelgrau {
color : #555;
}
.unterstrichen {
text-decoration: underline;
}
.maincontainer {
height: auto !important;
height: 100%;
margin: 0 auto -2em; /* bottom margin wie height von footer anlegen*/
padding: 0 0 1em 0;
width: 100%;
max-width: 940px;
background-color: white;
}
.footer {
position : fixed;
left : 0;
right : 0;
bottom : 0;
background : none 0% 0% repeat scroll #333;
color : #fff;
height : 2em;
font-size : 1em;
margin-bottom : 0;
}
.vorfooter {
margin-bottom: 4em; /* 2em Abstand zum footer (height + 2em) */
}
.footerheight {
height: 2em;
}
.container {
padding-right : 5px;
padding-left : 5px;
margin-right : auto;
margin-left : auto;
}
.col-12, .col-11, .col-9, -col-10, .col-8, .col-7, .col-6, .col-5, .col-4, .col-3, .col-2, .col-1 {
float : left;
position : relative;
width: 100%;
min-height : 1px;
}
.col-11, .col-9, -col-10, .col-8, .col-7, .col-6, .col-5, .col-4, .col-3, .col-2, .col-1 {
padding : 10px;
text-align: center;
}
.col-6 {
text-align: left;
}
.col-4 {
min-height: 10em;
}

.logo {
width: 100%;
padding: 2em 1em 1em;
max-width: 50%;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}

.headerfotohoehe {
height: 10em;
max-height: 300px;
}

.divheaderfoto {
float : left;
width: 33.333%
}

.bgweiss50 {
background-color: rgba(255,255,255,0.5);
}
.farbstreifen {
visibility: hidden;
}
.headerfoto {
background: url("images/b&w-dienstleistungen-header.jpg") 50% 50% no-repeat rgba(0,0,100,0.25);
background-repeat: no-repeat;
width: 100%;
background-size: cover;
margin: 0;
padding: 0;
}

#header {
width : 100%;
max-width: 940px;
z-index : 5;
background-color : white;
margin-bottom: -1.65em;
}

* html #header {
width : 100%;
}

.floatrechts {
float : right;
}
.floatlinks {
float : left;
}
.clearboth {
clear : both;
}
.headermenu {
position : relative;
background : none 0% 0% repeat scroll #439f35;
color : #fff;
margin-top : 0;
}

h1 {
line-height:1.25em;
text-align:center;
}
h2 {
}
h2 a {
display : block;
color : black;
text-decoration : none;
}
.hblau a:hover {
color : #04a1d0;
}
.hrot a:hover {
color : #e30613;
}
.hgelb a:hover {
color : #ffed00;
}
.hgruen a:hover {
color : #009640;
}
.hlila a:hover {
color : #6e2584;
}
.hbraun a:hover {
color : #b65207;
}

h3 {
}
h4 {
}
.fett {
font-weight: bold;
}
.kursiv {
font-style: italic;
}
.mittig {
margin-left : auto;
margin-right : auto;
}
.textrechts {
text-align : right;
}
.textlinks {
text-align : left;
}
.textmittig {
text-align : center;
}
.textfett {
font-weight : bold;
}
.textnormal {
font-weight : normal;
}

/* LIGHTBOX ******************************************************************/
/** page structure **/
.lightbox {
  display: none;
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100%;
  text-align: center;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.8);
}

.lightbox img {
  max-width: 90%;
  max-height: 80%;
  margin-top: 2%;
}

.lightbox:target {
  outline: none;
  display: block;
}

/* Menu ******************************************************************/
#nav-trigger {
display : none;
text-align : center;
}
#nav-trigger span {
display : inline-block;
padding : 10px 30px;
background-color : #027bd0;
color : white;
cursor : pointer;
text-transform : uppercase;
}
#nav-trigger span:after {
display : inline-block;
margin-left : 10px;
width : 20px;
height : 10px;
content : "";
border-left : 10px solid transparent;
border-top : 10px solid #fff;
border-right : 10px solid transparent;
}
#nav-trigger span:hover {
background-color : #65b8f3;
}
#nav-trigger span.open:after {
border-left : 10px solid transparent;
border-top : none;
border-bottom : 10px solid #fff;
border-right : 10px solid transparent;
}
nav {
margin: 0px 0 10px;
}
nav#nav-main {
background-color : #333;
padding : 0;
}
nav#nav-main ul {
list-style-type : none;
margin : 0;
padding : 0;
text-align : center;
}
nav#nav-main li {
display : inline-block;
border-left : 1px solid rgba(255, 255, 255, 0.2);
border-right : 1px solid rgba(255, 255, 255, 0.2);
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
border-top: 1px solid rgba(255, 255, 255, 0.2);
padding : 0;
margin: 3px 0;
}

nav#nav-main a {
display : block;
color : white;
padding : 10px 20px;
text-decoration : none;
}
nav#nav-main a:hover {
background-color : #6e8cb3;
color : #fff;
}
nav#nav-main .mblau a:hover {
background-color : #04a1d0;
}
nav#nav-main .mrot a:hover {
background-color : #e30613;
}
nav#nav-main .mgelb a:hover {
background-color : #ffed00;
color: black;
}
nav#nav-main .mgruen a:hover {
background-color : #009640;
}
nav#nav-main .mlila a:hover {
background-color : #6e2584;
}
nav#nav-main .mbraun a:hover {
background-color : #b65207;
}

nav#nav-mobile {
position : relative;
display : none;
}
nav#nav-mobile ul {
display : none;
list-style-type : none;
position : absolute;
left : 10%;
right : 10%;
margin-left : auto;
margin-right : auto;
text-align : center;
background-color : #027bd0;
z-index: 10;
padding: 0 10px;
}
nav#nav-mobile li {
display : block;
padding : 5px 0;
margin : 0 5px;
border-bottom : 1px solid rgba(255, 255, 255, 0.3);
}
nav#nav-mobile li:last-child {
border-bottom : none;
}
nav#nav-mobile a {
display : block;
color : white;
padding : 10px 30px;
text-decoration : none;
}
nav#nav-mobile a:hover {
background-color : #65b8f3;
color : #fff;
}

section h1 {
margin-bottom : 10px;
}
section p {
margin-bottom : 30px;
}
section p:last-child {
margin-bottom : 0;
}



/* =Media Queries
-------------------------------------------------------------- */
@media all and (max-width: 667px) {
  #nav-trigger {
    display: block; }

  nav#nav-main {
    display: none; }

  nav#nav-mobile {
    display: block; }
}

 @media screen and (max-width: 780px) {
  #portfolio li {
    width: 45%;
  }
}
 
@media screen and (max-width: 550px) {
  #portfolio { 
    text-align: center;
  }
 
  #portfolio li {
    float: none;
    display: inline-block;
    width: 80%;
    margin-bottom: 30px;
  }
}

@media only screen and (min-width:376px) {
body { 
font-size : 8px;
}
.col-11, .col-9, -col-10, .col-8, .col-7, .col-6, .col-5, .col-4, .col-3, .col-2, .col-1 {
padding : 10px;
text-align: left;
}
.col-12 {width : 100%;}
.col-11 {width : 100%}
.col-10 {width : 100%;}
.col-9 {width : 100%;}
.col-8 {width : 100%;}
.col-7 {width : 100%;}
.col-6 {width : 50%;}
.col-5 {width : 50%;}
.col-4 {width : 50%;}
.col-3 {width : 50%;}
.col-2 {width : 50%;}
.col-1 {width : 50%;}
.headerfotohoehe { height: 15em; }
.logo {max-width: 29%;}
}

@media only screen and (min-width:667px) {
.container, .col-12 {
padding-right : 5px;
padding-left : 5px;
}
.headerfotohoehe {
height: 15em;
}
.farbstreifen {
visibility: visible;
}
}

@media only screen and (min-width:768px) {
body { font-size : 12px;}
#header {
margin-bottom: -1.5em;
}
.col-12 {width : 100%;}
.col-11 {width : 91.666%;}
.col-10 {width : 83.333%;}
.col-9 {width : 75%;}
.col-8 {width : 66.666%;}
.col-7 {width : 58.333%;}
.col-6 {width : 50%;}
.col-5 {width : 41.666%;}
.col-4 {width : 33.333%;}
.col-3 {width : 25%;}
.col-2 {width : 16.666%;}
.col-1 {width : 8.333%;}
.col-4 {
min-height: 14em;
}
.headerfotohoehe {
height: 15em;
}
}

@media only screen and (min-width:1024px) {
body { font-size : 13px;}
.container, .col-12 {
padding-right : 10px;
padding-left : 10px;
}
.col-11, .col-9, -col-10, .col-8, .col-7, .col-6, .col-5, .col-4, .col-3, .col-2, .col-1 {
padding : 20px;
}
.col-4 {
min-height: 16em;
}
nav#nav-main a {
padding: 10px 30px;
}
.headerfotohoehe {
height: 18em;
}
} 

@media only screen and (min-width:1280px) {
body { font-size : 14px;}
.container, .col-12 {
padding-right : 15px;
padding-left : 15px;
}
.col-11, .col-9, -col-10, .col-8, .col-7, .col-6, .col-5, .col-4, .col-3, .col-2, .col-1 {
padding : 25px;
}

.headerfotohoehe {
height: 22em;
}
}