@supports ( display: grid ) {

body {
  font-family: 'ibm_plex_serifbold_italic';
  background-color: #557a95; 
  background-image: url(./hintergrund/protsch1.jpg);   /*Protschenberg*/
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-color: #000;
}

.grid-container {
  height:100vh;
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;          /*grid-template-columns: */
  grid-row-gap: 10px; 
  grid-column-gap: 10px;

section.logo {
  z-index: 1003;
  grid-column-start:4; 
  grid-column-end:7; 
  grid-row-start:1; 
  grid-row-end:1;
  justify-self: end;
}

figure.ohne2{
  position: relative;
  background: #000;
  padding-top: 4px;
  padding-right: 4px;
  padding-bottom: 0px;
  padding-left: 4px;
  margin-top: 0.5em ;
  margin-left: 0.5em;
  margin-right: 0.5em;   
  margin-bottom: 0.5em;
  border: 1px solid #eee;
  box-shadow: 1px 1px 5px 2px #777;
  overflow: hidden;
}

img.otgrafikquer2
{
   max-width: 100%;
}
}

.header { grid-area: header;
  z-index: 2000;
  grid-column-start:4; 
  grid-column-end:7; 
  grid-row-start:1; 
  grid-row-end:2;
 }

.nav { grid-area: nav;
  grid-column-start:1; 
  grid-column-end:7; 
  grid-row-start:1; 
  grid-row-end:2;
}

.main { grid-area: main;
  grid-column-start:1; 
  grid-column-end:7; 
  grid-row-start:3; 
  grid-row-end:9;
}

.footer { grid-area: footer;
  grid-column-start:1; 
  grid-column-end:7; 
  grid-row-start:9; 
  grid-row-end:10;
}

/* Innerhalb des Hauptinhalts (main) Flexbox nutzen */
/* erste Flexbox mit Anordnung untereinander */
.flex-container {
  display: flex;
  flex-direction: column;

  section.einleitung {
    z-index: 1;
    margin: 0.5em 0.5em 0.5em 0.5em;
    font-size:100%;
    font-style: italic;
    text-align: justify;
    border: 0px solid;
  }
  
  article.lang {
    font-size:150%;
    text-align: justify;   
    -webkit-flex: 3 1 0%;
    flex: 3 1 0%;
  }
@media only screen and (max-width: 550px) {
	section.einleitung {font-size: 90%;}
}
@media only screen and (max-width: 500px) {
	section.einleitung {font-size: 80%;}
}
@media only screen and (max-width: 450px) {
	section.einleitung {font-size: 70%;}
}
@media only screen and (max-width: 400px) {
	section.einleitung {font-size: 60%;}
}
@media only screen and (max-width: 350px) {
	section.einleitung {font-size: 50%;}
}
@media only screen and (max-width: 290px) {
	section.einleitung {font-size: 50%;}
}
}

/* Zweite Flexbox mit Anordnung nebeneinander, Seitenumbruch und mittige Anordnung */
.flex-container2{
	display: flex;
    flex-wrap: wrap;
    align-items: baseline;
   
  figure.ohne{
    position: relative;
    background: #000;
    padding-top: 5px;
    padding-right: 5px;
    padding-bottom: 1px;
    padding-left: 5px;
    margin-top: 1em ;
    margin-left: 1em;
    margin-right: 1em;   
    margin-bottom: 1em;
    border: 1px solid #eee;
    box-shadow: 1px 1px 5px 2px #777;
    overflow: hidden;
  }

  img.otgrafikquer{
    max-width: 100%;
    max-height: 100%
  }
}



@media only screen and (max-width: 290px) {
	section.logo {display: none;}
}
}