@import url("reset.css");

body {
    margin:0;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 1.0em;
}



/*--Header - Anfang--*/
#logo { 
    background-image: url(../bilder/layout/logo.jpg);
    background-repeat: no-repeat;
    background-color: #fff;
    width: 250px;
    height: 250px;
    float: left;
}
#bg{
    background-image: url(../bilder/layout/bgmiddle.jpg);
    width: auto;
    height: 250px;
}
#logomobile {
    margin: 0px auto;
    width: 250px;
}
#headerkran {
    position: relative;
    padding: 0px;
    top: 0px;
    right: 0px;
    float: right;
}

.menufix {
    position: fixed;
    width: 100%;
}

.zentriert {
    display: block;
    margin: 0px auto;
}


/*--Header - Ende--*/


/*--Layout--*/

.container {
    height:100vh;
    display: grid;
    grid-template-rows: 50px 350px 4fr 1fr 1fr;
    grid-template-columns: 100%;
    grid-template-areas: 
        "nav"
        "header"
        "content"
        "sidebar"
        "footer"
    ;
}



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

    .container {
        grid-template-rows: 250px 1fr 1fr;
        grid-template-columns: 10% 55% 10% 25%;
        grid-template-areas:
            
            "header header header header"
            "content content content sidebar"
            "footer footer footer footer"
        ;
    }
    
    footer {
        background-image: url(../bilder/layout/bgfooter.jpg);
        background-position: left top;
        background-repeat: no-repeat;
        background-color: #083995;
        line-height: 130%;
        color: #fff;
        grid-area: footer;
        text-align: center;
    }
    article {
        margin: 20px;
        border: 1px solid #ddd;
        padding-left: 50px;
        padding-right: 50px;
        -webkit-box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.75);
box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.75);
    }
    
    .ausblendenfs {
        display: none;
    }
    aside {
        padding-bottom:  50px;
        margin: 20px;
        -webkit-box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.75);
box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.75);
    }
        
}

@media screen and (max-width: 1020px) {
    
    footer {
        background-color: #083995;
        text-align: center;
        grid-area: footer;
        color: #fff;
        line-height: 130%;
    }
    .ausblenden {
        display: none;
    }
    
    
    
}

header {
    background: url(../bilder/layout/midmobile.jpg);
    background-repeat: repeat-x;
    background-color: #083995;
    grid-area: header;
    
}

nav {
    background-color: aqua;
    grid-area: nav;
    
}

article {
    background: #fff;
    grid-area: content;
    line-height: 130%;
    height: auto;
}

aside {
    background: #ddd;
   
    grid-area: sidebar;
    height: auto;
    
    font-size: 0.9em;
    line-height: 130%;
}

/*--Layout - Ende--*/


/*--Elemente--*/
p { padding: 25px; }

ul { 
    padding:10px 25px 15px 45px; 
}
li { 
    padding: 3px; 
    list-style-type:square;
}

h1 { 
    padding: 50px 15px 5px 25px; 
    font-size:180%; font-weight:bold; 
    line-height: 130%; color:#444; 
    text-shadow: 1px 1px 3px #666; 
}
h2 { 
    padding: 35px 15px 15px 25px; 
    font-size:140%; 
    color:#666; 
    line-height: 130%; 
    text-shadow: 1px 1px 2px #666; 
}
h3 { 
    padding: 35px 15px 5px 25px; 
    font-size:125%; color:#777; 
    line-height: 130%; 
}
h4 { 
    padding: 35px 15px 15px 25px; 
    font-size:125%; color:#666; 
    line-height: 130%; 
    text-shadow: 1px 1px 2px #777; 
}

a { 
    color: #083995; line-height: 130%; 
}
header a {
    display: block;
}
a:hover { 
     color: #666; text-shadow:#999 1px 1px 1px;
}
a:visited { 
    color: #333; 
}
footer a { 
    color: #666; 
    line-height: 130%; 
}
footer a:visited { 
    color: #666; 
    line-height: 130%; 
}

strong { 
    font-weight: bold; 
    color:#666; 
    line-height: 130%;
}

/*--Tabellen--*/

table {
    margin: 25px auto;
}

.tg  {border-collapse:collapse;border-spacing:0;margin:0px auto;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg .tg-baqh{text-align:center;vertical-align:top}
@media screen and (max-width: 767px) {.tg {width: auto !important;}.tg col {width: auto !important;}.tg-wrap {overflow-x: auto;-webkit-overflow-scrolling: touch;margin: auto 0px;}}

/*--Tabellen - Ende--*/

img {
    max-width: 100%;
    display: block;
    height: auto;
    }
img.links {
    float:left; 
    margin: 25px;
    
}
img.rechts {
    float:right; 
    margin: 25px;
}
img.center {
    margin: 25px auto;
    
}

/*-- Formulare --*/

error { 
    background-color: red; 
} 

/*-- Formulare - Ende --*/

/*--Elemente - Ende--*/

/*--Referenzobjekte (Flexbox)--*/
.refcontainer {
  
  min-height: 400px;
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  align-content: flex-start;
}

.refitem {
  flex: 0 0 auto;
    min-height: 200px;
    width: 200px;
  margin: 25px auto;
  border: 1px solid #999;
     -webkit-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.75);
box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.75);
}
.refitem p {
    padding: 10px;
}
.refitem img {
    padding: 10px;
    box-sizing: border-box;
}