body {
      font-family: 'Jost', Futura, Helvetica, Arial, sans-serif;
      font-size: 100%;
      font-weight: 300;
      }
h1 {      
      font-family: 'Jost', Futura, Helvetica, Arial, sans-serif;
      font-size: 3rem;
      font-weight: 300;
      line-height: 0.9;
      color: rgb(0,76,22);
      }
h2 {      
      font-family: 'Jost', Futura, Helvetica, Arial, sans-serif;
      font-size: 1.8rem;
      font-weight: 300;
      line-height: 1.5;
      }
h3 {      
      font-family: 'Jost', Futura, Helvetica, Arial, sans-serif;
      font-size: 1.5rem;
      font-weight: 300;
      }
h4 {      
      font-family: 'Jost', Futura, Helvetica, Arial, sans-serif;
      font-size: 1.2rem;
      font-weight: 500;
      }
h5 {      
      font-family: 'Jost', Futura, Helvetica, Arial, sans-serif;
      font-size: 1rem;
      font-weight: 500;
      }
      }
a {      
      font-family: 'Jost', Futura, Helvetica, Arial, sans-serif;
      font-size: 1rem;
      font-weight: 500;
      }

.header {
      display: grid;
      grid-template-columns: 3fr 24fr 3fr  
      }
.subheader {
      display: grid;
      grid-template-columns: 3fr 24fr 3fr;
      }
.footer {
      background-color: grey;
      margin-top: 2px;
      }
.navbar {
      margin-top: 2px;
      margin-bottom: 40px;
      }
.navcurrent {
      display: flex;
      justify-content: center;
      align-content: center;
      align-items: center;
      margin: 0.2rem;
      width: 10.5rem;
      border: none
      }
      
.navitem {
      display: flex;
      justify-content: center;
      align-content: center;
      align-items: center;
      margin: 0.2rem;
      width: 10.5rem;
      height: 30px;
      border: 1px solid grey;
      background-color: rgb(0,76,22);
      transition: all 0.3s  ease-in-out;
      }
.navitem:hover {
      box-shadow: 1px 1px 6px white;
      opacity: 0.7;
      scale: 110%;
      }
.instaitem {
      display: flex;
      justify-content: center;
      align-content: center;
      align-items: center;
      margin: 0.2rem;
      width: 30px;
      height: 30px;
      border: 1px solid grey;
      background-color: rgb(0,76,22);
      transition: all 0.3s  ease-in-out;
      }
.instaitem:hover {
      box-shadow: 1px 1px 6px white;
      opacity: 0.7;
      scale: 110%;
      
      }
/*.raster {
      max-width: 780px;
      margin-left: auto;
      margin-right: auto;
      padding: 2rem;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      
      grid-template-rows: repeat(auto, 220px);
      grid-gap: 1rem;
      grid-auto-flow: dense;
      }*/
.raster {
      max-width: 710px;
      margin-left: auto;
      margin-right: auto;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: repeat(auto, 220px);
      grid-gap: 25px;
      grid-auto-flow: dense;
      }
      
.box-1 {      
      position: relative;
      height: 220px;
      width: 220px;
      display: flex;
      align-items: center;
      justify-content: center;
      }
.box-2 {      
      position: relative;
      height: 220px;
      width: 465px;
      display: flex;
      align-items: center;
      justify-content: center;
      grid-column: span 2;
      }
.box-4 {
      position: relative;
      height: 465px;
      width: 465px;
      display: flex;
      align-items: center;
      justify-content: center;
      grid-column: span 2;
      grid-row: span 2;
      }
.box {      
      position: relative;
      height: 220px;
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      
      }
.textbox1 {  
  max-height: 120px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  text-align: right;
}
.textbox2 {  
  max-height: 120px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  text-align: right;
  grid-column: span 2;
}     
.rubrikbox {  
  max-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nolink-img {
  max-width: 100%;
  max-height: 220px;
  object-fit: cover;
  
}
      
.link-img {
  display: block;
  width: 100%;
  height: 100%;
  border: solid 2px grey;
  box-shadow: 2px 2px 8px black;
  object-fit: cover;
  /*transition: opacity 0.5s, height 2s, transform 2s;*/
  transition: ease 1s;
}

.link-img:hover {
  /*max-height: 245px;*/
  opacity: 0.5;
  /*height: 120%;
  width: 120%;*/
 
}
      

.1x2img {
      max-width: 220px;
      max-height: 100%;
      box-shadow: 3px 3px 4px grey;
      object-fit: cover;
      transition: opacity 0.5s, height 2s, transform 2s;
      }

.text {
      max-width: 780px;
      text-align: left;
      margin-left: auto;
      margin-right: auto;
      padding: 2rem;
font-size: 1.2em;
      }
.details {
		  position: fixed;
		  left: 0px;
      top: 0px;
      width: 100%;
      height: 100%;
      margin: auto;
		  background-color: rgba(50, 50, 50, 0.9);
		  overflow: auto;
		  display: none;
      }

	.scrollfeld img {
		  max-width: 800px;
      margin: 10px;
	}
	.details:target {
		display: block;
     
	}
	.close {
		width: 0;
		heigh: 0;
		border: 0;
		text-shadow: none;
		color: transparent;
	}
	.close::after {
		position: fixed;
		top: 5em;
		right: 5em;
		content: "X";
		color: grey;
		font: 1em/150% Jost, Futura, sans-serif;
		display: block;
      border: solid 1px grey;
		text-align: center;
		width: 1.5em;
		height: 1.5em;
		padding: 0.2em 0 0 0em;
	}
.scrollfeld {
      width: 100%;
      height: 100%;
      margin: auto;
      overflow: auto;
      }
.detailtable {
      max-width: 800px;
      text-align: center;
      border: 0px;
      margin-left: auto;
      margin-right: auto;
      color: white;
      font-weight: 300;
      }
.detailtable a {
      color: white;
      transition: ease 1s;
      }
.detailtable a:hover {
      opacity: 0.5;
      }
.box-1 span {
      position: absolute;
      bottom: 0px;
      left: 0px;
      width:  100%;
      height: 100%;
      background-image: linear-gradient(transparent, rgb(80, 80, 80, 0.9));
      display: flex;
      justify-content: flex-end;
      align-items: flex-end;
      text-align: right;
      color: white;
      transition: background-color ease 2s, color ease 1s;
      }
.box-1 span:hover {
      background-color: rgb(255, 255, 255, 0.6);
      color: transparent;
      }
.box-2 span {
      position: absolute;
      bottom: 0px;
      left: 0px;
      width:  100%;
      height: 100%;
      background-image: linear-gradient(transparent, rgb(80, 80, 80, 0.9));
      display: flex;
      justify-content: flex-end;
      align-items: flex-end;
      text-align: right;
      color: white;
      transition: background-color ease 2s, color ease 1s;
      }
.box-2 span:hover {
      background-color: rgb(255, 255, 255, 0.6);
      color: transparent;
      }
 
 /* jost-100 - latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 100;
  src: url('../fonts/jost-v14-latin-100.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/jost-v14-latin-100.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/jost-v14-latin-100.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/jost-v14-latin-100.woff') format('woff'), /* Modern Browsers */
       url('../fonts/jost-v14-latin-100.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/jost-v14-latin-100.svg#Jost') format('svg'); /* Legacy iOS */
}

/* jost-200 - latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/jost-v14-latin-200.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/jost-v14-latin-200.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/jost-v14-latin-200.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/jost-v14-latin-200.woff') format('woff'), /* Modern Browsers */
       url('../fonts/jost-v14-latin-200.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/jost-v14-latin-200.svg#Jost') format('svg'); /* Legacy iOS */
}

/* jost-300 - latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/jost-v14-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/jost-v14-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/jost-v14-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/jost-v14-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/jost-v14-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/jost-v14-latin-300.svg#Jost') format('svg'); /* Legacy iOS */
}

/* jost-500 - latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/jost-v14-latin-500.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/jost-v14-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/jost-v14-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/jost-v14-latin-500.woff') format('woff'), /* Modern Browsers */
       url('../fonts/jost-v14-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/jost-v14-latin-500.svg#Jost') format('svg'); /* Legacy iOS */
}

/* jost-regular - latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/jost-v14-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/jost-v14-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/jost-v14-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/jost-v14-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/jost-v14-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/jost-v14-latin-regular.svg#Jost') format('svg'); /* Legacy iOS */
}

/* jost-700 - latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/jost-v14-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/jost-v14-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/jost-v14-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/jost-v14-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/jost-v14-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/jost-v14-latin-700.svg#Jost') format('svg'); /* Legacy iOS */
}

/* jost-600 - latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/jost-v14-latin-600.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/jost-v14-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/jost-v14-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/jost-v14-latin-600.woff') format('woff'), /* Modern Browsers */
       url('../fonts/jost-v14-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/jost-v14-latin-600.svg#Jost') format('svg'); /* Legacy iOS */
}

/* jost-100italic - latin */
@font-face {
  font-family: 'Jost';
  font-style: italic;
  font-weight: 100;
  src: url('../fonts/jost-v14-latin-100italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/jost-v14-latin-100italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/jost-v14-latin-100italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/jost-v14-latin-100italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/jost-v14-latin-100italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/jost-v14-latin-100italic.svg#Jost') format('svg'); /* Legacy iOS */
}

/* jost-200italic - latin */
@font-face {
  font-family: 'Jost';
  font-style: italic;
  font-weight: 200;
  src: url('../fonts/jost-v14-latin-200italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/jost-v14-latin-200italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/jost-v14-latin-200italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/jost-v14-latin-200italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/jost-v14-latin-200italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/jost-v14-latin-200italic.svg#Jost') format('svg'); /* Legacy iOS */
}

/* jost-300italic - latin */
@font-face {
  font-family: 'Jost';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/jost-v14-latin-300italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/jost-v14-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/jost-v14-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/jost-v14-latin-300italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/jost-v14-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/jost-v14-latin-300italic.svg#Jost') format('svg'); /* Legacy iOS */
}

/* jost-italic - latin */
@font-face {
  font-family: 'Jost';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/jost-v14-latin-italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/jost-v14-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/jost-v14-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/jost-v14-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/jost-v14-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/jost-v14-latin-italic.svg#Jost') format('svg'); /* Legacy iOS */
}

/* jost-500italic - latin */
@font-face {
  font-family: 'Jost';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/jost-v14-latin-500italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/jost-v14-latin-500italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/jost-v14-latin-500italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/jost-v14-latin-500italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/jost-v14-latin-500italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/jost-v14-latin-500italic.svg#Jost') format('svg'); /* Legacy iOS */
}

/* jost-600italic - latin */
@font-face {
  font-family: 'Jost';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/jost-v14-latin-600italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/jost-v14-latin-600italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/jost-v14-latin-600italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/jost-v14-latin-600italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/jost-v14-latin-600italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/jost-v14-latin-600italic.svg#Jost') format('svg'); /* Legacy iOS */
}

/* jost-700italic - latin */
@font-face {
  font-family: 'Jost';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/jost-v14-latin-700italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/jost-v14-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/jost-v14-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/jost-v14-latin-700italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/jost-v14-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/jost-v14-latin-700italic.svg#Jost') format('svg'); /* Legacy iOS */
}