body {
         display: grid;
         gap:0em;
         background: #ABA7A5;
         margin: 0 auto;
         max-width: 60em;
         font-family: sans-serif;
         font: arial;
         overflow-y: hidden;
}



/* Wenn Seite groß, dann.......................................................................................*/
@media (min-width: 800px) {  /* Breite beträgt mindestens 30em */
         body {
                  grid-template-columns: 4fr;
                  grid-template-rows: auto auto auto auto;
         }
         .link2 {
                  position: absolute;
                  width: 100%;
                  height: 120px;
                  top: 0;
                  left: 0;
                  z-index: 1;
         }
         .headerseite {
                 height:120px;
         }
         .maintext{
                 height:600px;
                 padding:20px 0 0 0;
         }
         .mainliste{
                 height:640px;
                 padding:20px 0 0 40px;
                 overflow-y: scroll;
                 overflow-x: hidden;
                 text-align: center;

         }
         .mainstart{
                 height:815px;
                 padding:20px 0 0 0;
         }
         .topnav a {
                 padding: 12px 14px;
                 text-decoration: none;
                 font-size: 14px;
         }
         h3{  font-size:1em; }
         .headerh1{  font-size:1.9em; margin:5px 0 0 10px; }
         .headerh2{  font-size:1.1em; margin:45px 0 0 10px;  }
         .starth1{
                 font-size:1.8em;
                 color:#646464;
                 line-height: 15px;
                 margin:20px 0 20px 0;
         }


         .starth2{
                 font-size:1.4em;
                 color:#646464;
                 margin:30px 0 70px 0;
         }
         .starth3{
                 font-size:1.1em;
                 color:#646464;
                 margin:10px 0 10px 0;
         }
         .texth2{
                 font-size:1.2em;
                 margin:20px 0 10px 0;
         }
         .bild{
                 width:auto;
                 height: 550px;
                 padding:10px 0 5px  0;
         }
         .bildtitel{
                 font-size: .9em;
                 width:500px;
                  margin:auto;
                  padding: 5px 0 70px 0;

         }
         table{font-size: 0.9em;}
         .tabelle{
                 margin:20px 0 0  50px;
         }
         .text{
                  margin:20px 50px 0 20px;
         }
         a.imp {font-size: 0.8em;}
         article{
                 font-size:0.9em;
         }
         .blocklinks1{
                  text-align: left;
                  left:90px;
                  top:30px;
                  width:250px;
                  border: 0px solid red;
                  position:relative;
         }
         .blocklinks2{
                  border: 0px solid blue;
                  position:relative;
                  text-align: left;
                  left:380px;
                  top:-157px;
                  width:250px;
         }
          .blockstart{
                  text-align: left;
                  width:350px;
                  height:330px;
                  padding:40px 0 0 20px;
                  top:150px;
                  left:70px;
                  border: 0px solid red;
                  position:relative;
                  border-radius: 0.6em;
                  box-shadow: 10px 10px 20px grey;
         }
         .blockstart2{
                  text-align: left;
                  background-image: url(../grafik/portrait.jpg);
                  background-size:cover;
                  width:350px;
                  height:350px;
                  padding:20px 0 0 20px;
                  top:-220px;
                  left:500px;
                  border: 0px solid red;
                  position:relative;
                  border-radius: 0.6em;
                  box-shadow: 10px 10px 20px grey;
         }
         .kontakt1{
                  border: 0px solid blue;
                  position:absolute;
                  text-align: left;
                  width:220px;
         }
         .kontakt2{
                  text-align: left;
                   background-image: url(../grafik/anfahrt.jpg);
                  background-size:cover;
                  width:480px;
                  height:375px;
                  left:270px;
                  border: 0px solid red;
                  position:relative;
         }
         .topf{
                  position:relative;
                  text-align: right;
                  left:410px;
                  top:8px;
                  width:50px;
                 border: 0px solid blue;
                 margin:auto;
         }
         .copy{

                 width:250px;
                 left:20px;
                 position:relative;
                 top:-14px;
                 font-size: .8em;
         }

}

/* Wenn Seite klein, dann...*/
@media screen and (max-width: 800px) {
         .headerseite {
                 height:100px;
         }
         .link2 {
                  position: absolute;
                  width: 100%;
                  height: 100px;
                  top: 0;
                  left: 0;
                  z-index: 1;
         }
         .maintext{
                 height:520px;
                 padding:30px 0 0 0;
                 overflow-y: scroll;
                 overflow-x: hidden;
         }
         .mainliste{
                 height:530px;
                 padding:10px 0 30px 10px;
                 overflow-y: scroll;
                 overflow-x: hidden;
                 text-align: center;
         }
         .mainstart{
                 height:625px;
                 padding:20px 0 0 0;
         }
         .headerh1{  font-size:1.2em;margin:10px 0 0 10px; }
         .headerh2{  font-size:0.9em; margin:40px 0 0 10px;  }
         h3{  font-size:0.9em; }
         .starth1{
                 font-size:1.4em;
                 color:#646464;
                 line-height: 15px;
                 margin:20px 0 20px 0;
         }
         .starth2{
                 font-size:1.2em;
                 color:#646464;
                 margin:20px 0 30px 0;
         }
         .starth3{
                 font-size:1.1em;
                 color:#646464;
                 margin:10px 0 10px 0;
         }
         .texth2{
                 font-size:0.9em;
                 margin:20px 0 10px 0;
         }

         .texth2{
                 font-size:0.9em;
                 margin:20px 0 10px 0;
         }
         .topnav a {
                  padding: 10px 14px 10px 14px;
                  text-decoration: none;
                  font-size: 16px;
         }
         .bild{
                  width:92%;
                 max-height:auto;
                 padding:20px 0 5px  0;
         }
         .bildhoch{
                  width:auto;
                 height:400px;
                 padding:20px 0 5px  0;
         }
         .bildtitel{
                  margin:auto;
                  padding:0 0 200px 0 ;
                  border: 0px solid blue;
                  position:relative;
                  font-size: 0.8em;
         }
         a.imp {font-size: 0.8em;}
         .text{
                 margin:40px 50px 0 20px;
         }
         article{
                 font-size:.8em;
         }
         table{font-size: 0.75em;}
         .tabelle{
                 margin:20px 0 0  20px;
         }
         .blocklinks1{
                  text-align: left;
                  left:40px;
                  width:250px;
                  border: 0px solid red;
                  position:relative;
         }
         .blocklinks2{
                  border: 0px solid blue;
                  position:relative;
                  text-align: left;
                  left:40px;
                  width:250px;
         }
          .blockstart{
                  text-align: left;
                  width:280px;
                  height:230px;
                  padding:1px 0 0 20px;
                  top:10px;
                  left:40px;
                  border: 0px solid red;
                  position:relative;
                  border-radius: 0.6em;
                  box-shadow: 10px 10px 20px grey;
         }
         .blockstart2{
                  text-align: left;
                  background-image: url(../grafik/portrait2.jpg);
                  background-size:cover;
                  width:280px;
                  height:230px;
                  padding:20px 0 0 20px;
                  top:40px;
                  left:40px;
                  border: 0px solid red;
                  position:relative;
                  border-radius: 0.6em;
                  box-shadow: 10px 10px 20px grey;
         }
         .kontakt1{
                 border: 0px solid blue;
                 position:relative;
                 text-align: left;
                 width:220px;
         }
         .kontakt2{
                display: none;
         }
         .topf{
                 display: none;
         }
          .copy{

                 width:250px;
                 left:20px;
                 position:relative;
                 top:6px;
                 font-size: .8em;
         }
}
/* .........................................................................................................*/
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon.
This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 800px) {
         .topnav a:not(:first-child) {display: none;}
         .topnav a.icon {
                  float: right;
                  display: block;
         }
}
@media screen and (max-width: 800px) {
         .topnav.responsive {position: relative;}
         .topnav.responsive a.icon {
                  position: absolute;
                  right: 0;
                  top: 0;
         }
         .topnav.responsive a {
                  float: none;
                  display: block;
                  text-align: left;
         }
}

/* Style the links inside the navigation bar */
.topnav a {
         float: left;
         display: block;
         color: black;
         text-align: center;
}

/* Change the color of links on hover */
.topnav a:hover {
         background-color: #12B1CD;
         color: black;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #646464;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
         display: none;
}

/* Seitenelemente */
.headerseite {
         background-image: url(../grafik/titel.jpg);
         background-size: cover;
}
nav {
         grid-column: 1 / -1;
         background:   #ECECEC ;
         border-bottom-style:   solid ;
         border-width:   2px ;
         border-color: white;
}
h1{
         margin:0 0 0 5px;
         font-family: sans-serif;
         font: arial;
         color:white;


}
h2{
         font-family: sans-serif;
         font: arial;
         color:white;
         font-style:italic;
         font-weight: normal;
}

.texth2{
        text-align: left;
        font-style:normal;
        font-weight: bold;
        color: black;
}

h3{
         font-family: sans-serif;
         font: arial;
         color:black;
         font-weight: bold;
         margin:0 0 10px 0 ;
         text-indent: 0cm;
}
.text{
         text-align: left;
         width:85% ;
         border: 0px solid red;
}
.mainstart,
.maintext,
.mainliste{
         background: #ECECEC;
         border-bottom-style:   solid ;
         border-width:   2px ;
         border-color: white;
         }
.tabelle{  border:0px solid;
        text-align: left;
        width:90% ;
}
 .impress{
        text-align: left;
        margin:0 50px 0 50px;
        width:80% ;
}
article{
          padding: 0 0 1em 0;
          text-indent: 1cm;
          text-align: left;
}
.bild{
         border:0px solid black;
         margin: 0 auto;
         text-align: center;
}
.link {
         position: absolute;
         width: 100%;
         height: 100%;
         top: 0;
         left: 0;
         z-index: 1;
}
footer { text-align: left;
         height:40px;
         background: #ECECEC;
         border-radius: 0em 0em 0.3em 0.3em;
         padding:3px 10px 0 0 ;
}

a.hinher:hover {   background-color:#12B1CD;}
a.imp:focus { background-color:white; }
a.imp:link { text-decoration:none; color:#5A2E1B;}
a.imp:active { text-decoration:none;  color: #646464; }
a.imp:hover { text-decoration:none;  background-color:#12B1CD; color:black; }

a.imp2 {font-size:0.6em; }
a.imp2:focus { background-color:white;  }
a.imp2:link { text-decoration:none; color:#5A2E1B;}
a.imp2:active { text-decoration:none;  color: #ECECEC; }
a.imp2:hover { text-decoration:none;  background-color:#12B1CD; color:black; }

.icon{
         width: 11px;
         height: auto;
}