* {
margin: 0;
padding: 0;
font-family:  Calibri, Arial, Helvetica, sans-serif;
}

html, body {
overflow-y:scroll;
}

body {  
max-width: 60%;  
margin: 1em auto;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #E5E8E8;
border: solid #d7d7d7 1px;
}

img#logo {
position: absolute;
height: 10em;   
/*border: solid 1px black; */
margin-top: -1.1em;
margin-bottom: -1.1em;    
}

div.container {
display: grid;
width: 100%;
height: 100%; 
grid-template-columns: 1.5fr 1fr;
/*grid-template-rows:  1fr 1fr 1fr 1fr;*/
grid-template-areas: "header header"
"nav nav"
"image description"
"content terra"
"content kontakt"; 
grid-column-gap: 7px;
grid-row-gap: 7px;
}

.container > div {
 border: solid 1px #d7d7d7;
box-shadow: 7px 4px 5px 0px rgba(0,0,0,0.1);
-webkit-box-shadow: 7px 4px 5px 0px rgba(0,0,0,0.1);
-moz-box-shadow: 7px 4px 5px 0px rgba(0,0,0,0.1);
}

/* *** Grid-Container*** */

/* header ****************/

div.header {
grid-area: header;
background-image: url(images/back.jpg);
background-repeat: no-repeat;
background-size: 100% 102%; 
background-position: 0 -1px;
height: 7.1em;
}

/* nav ********************/

div.nav {
grid-area: nav;
background-color: #ffffff;
margin-top: -0.1em; 
}

/* image *****************/

div.image {
grid-area: image;
background-image: linear-gradient(90deg, #045701 50%, #E5E8E8 30%, #E5E8E8 55%, #ffffff 55%);
display:flex;
align-items: center;   
justify-content: center;    
}

div.image > div {

}

img.picture {
height:11em;
}

/* description ************/

div.description {
grid-area: description;
padding: 2em;
}

ul.disc {
margin-left: 4em;
}

ul.disc li {
margin-bottom: 0.3em;    
}

/* content ****************/

div.content {
grid-area: content;
padding: 2em;
}

/* terra ******************/

div.terra {
grid-area: terra;
background-color: #ffffff;
}

div.terra img#part {
width: 38%;
margin-left: 7%;
}

div.terra img#serv {
width: 55%;
float: right;
}

/* kontakt ****************/

div.kontakt {
grid-area: kontakt;
padding: 2em;
background-color: #045701; 
color: #E5E8E8;
}

DL#kont {
display: grid; 
grid-template-columns: 3em calc(100% - 3em);
}

DL#kont dt, dd {
margin-bottom: 0.1em;
margin-left: 0;
}

/* Überschriften ***********/

h1 {
display: inline-block;
/* border: solid 1px red;*/
margin-top: 1em;
margin-left: 7em;
color: #003300;
text-shadow: 1px 1px yellow;
text-align: center;
}

h2 {
margin-bottom: 1.5em;  
text-align: center;
}

h3 {
margin-bottom: 0.5em;  
}

h4 {
margin-bottom: 0.4em;  
}

p {
margin-bottom: 0.5em;   
}

/* Navigation ****************/

a.menue-button {
display: none;
} 

nav#nav_main {
float:right;  
}

nav#nav_main li {
list-style: none;
float: left;
}

nav#nav_main a {
display: block;
margin-right: 0.5em;
padding: 0.3em;  
text-decoration: none; 
white-space: nowrap;    
color: #000000;  
font-weight: bold;
font-size: 0.9em;
}

nav#nav_main li.supp a::before {
content: "\1F527";
font-size: 0.9em;    
background-color: #ffff0000;   
}

nav#nav_main li.supp a {
background-color: #ffff00;   
}

nav#nav_main li.supp a:hover {
background-color: #ffef00;   
}

nav#nav_main a:hover {  
background-color: #99999940;       
}


/* Aktuellen Link hervorheben - Hauptpunkte */
#seite1 li#k1 a ,
#seite2 li#k2 a ,
#seite3 li#k3 a ,
#seite4 li#k4 a
{
background-color: #999;    
color:#000;
}

/* Definitionsliste im Impressum ************/

dl#impressum {
display: grid;
grid-template-columns: 7em calc(100% - 7em);
}

dl#impressum dt, dd {
margin-bottom: 0.5em;
margin-left: 0;
}

/* Aufzählung in Datenschutz ****************/

ul.aufzaehlung { 
padding-left: 1em;
margin-bottom: 1em;
}

 /* Mobile Geräte */

@media screen and (max-width:1200px) {
    body {  
    max-width: 80%;     
    font-size: 1.1em;     
    }
    
    img#logo { 
    height: 9em;
    }
    
    h1 {
    margin-top: 1em;
    margin-left: 5.5em;
    }
    
    nav#nav_main a {
    font-size: 1em;
    }  
}


@media screen and (max-width:920px) { 
    img#logo { 
    height: 8em;
    margin: 0em auto;
    }
    
    /* den letzten Menüpunkt (Online-Support) ausblenden */    
    nav#nav_main li:nth-last-child(-n+1) a {
    display: none; 
    }
}

@media screen and (max-width:768px) {
    h1 {
    margin: 1em 0 0 4em;
    }  
}
    
@media screen and (max-width:600px) {
    body {  
    max-width: 100%; 
    margin: 0;
    }
    
    div.header {
    height: auto;
    }
    
    div.nav {
    height: 1em; 
    background-color: #E5E8E8;
    }
    
    img#logo {
    position:relative;    
    display: block;
    height: 8em;
    margin: 0.5em auto;
    } 
    
    h1 {
    display: block;
    margin-top:1em;
    margin: 0 0 0.3em 0;
    }
    
    div.container {
    display: grid;
    width: 100%;
    height: 100%; 
    grid-template-columns: 1fr;
    grid-template-areas: "header" "nav" "image" "description" "content" "terra" "kontakt"; 
    grid-column-gap: 5px;
    grid-row-gap: 5px;
    }
    
    img.picture {
    height:9em;
    }
} 

/** MENÜ-Button anzeigen für Geräte mit 600px und weniger **/

@media screen and (max-width:600px) {
    a.menue-button {
    background-color: #00008B;
    display: block;
    position: absolute;
    right: 0;
    padding: 0.5em;
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    }	

    a.menue-button:hover {
    background: #0040FF;
    }

    /* einblenden "MENÜ auf"-Button */
    #seite1:target #nav_main,
    #seite2:target #nav_main,
    #seite3:target #nav_main,
    #seite4:target #nav_main
    {
    display: block;
    }

    /* ausblenden "MENÜ auf"-Button -> "MENÜ zu"-Button wird sichtbar */
    #seite1:target .menue-button-open,
    #seite2:target .menue-button-open,
    #seite3:target .menue-button-open,
    #seite4:target .menue-button-open
    {
    display: none; 
    } 
    
/* Ende MENÜ-Button */  
 

    div.nav {
    height: auto; 
    }
    
    /* die ersten 4 Menüpunkte */
    nav#nav_main li:nth-child(-n+4) a {
    margin-left: 0; 
    }
    
    nav#nav_main {
    display: none;
    margin: 0;  
    }
    
    nav#nav_main ul {
    display: block;
    padding: 0;
    }
    
    nav#nav_main li {
    background-color: #ffffff;
    width: 100%; 
    }
      
    nav#nav_main a {
    text-align: left;
    margin: 0;
    padding-left: 1.6em;
    width: auto;
    }
    
    /* die ersten 3 Menüpunkte */
    nav#nav_main li:nth-child(-n+3) a {
    border-bottom: 2px #d7d7d7 solid;  
    }
    
    div.image {
    /*background-image: linear-gradient(90deg, #045701 50%, #E5E8E8 30%, #E5E8E8 55%, #ffffff 55%); */
    background: #045701;
    }
    
    /* DIV "description" auf den Seiten 2 - 4 ausblenden*/
    #seite2 .description,
    #seite3 .description,
    #seite4 .description
    {
    display: none; 
    } 
 
    
}