@charset "UTF-8";
/* CSS Document */

body {
margin: 0px; /*Ränder auf 0*/
position: absolute;
font-family: 'IBM Plex Sans', sans-serif;
text-transform: uppercase;
background-color: #000;  /* weiß */
color: #fff;
} 

@media screen and (max-width: 5000px) { 

	h1 {font-size: 2em;
		text-align: center;}
	h2 {font-size: 1em;
		font-weight: 200;
		text-align: center;}
	
a {
	color:#fff;
	text-decoration: underline;
}



.img_werk {width: 50vw; height:auto;}





.galerie-grid {
    display: grid;
    width: 100vw;
    grid-template-areas:
"area-01 area-02 area-03 area-04 area-05 area-06 area-07 area-08" 
"area-09 area-10 area-11 area-12 area-13 area-14 area-15 area-16" 
"area-17 area-18 area-19 area-20 area-21 area-22 area-23 area-24"
"area-25 area-26 area-27 area-28 area-29 area-30 area-31 area-32" 
"area-33 area-34 area-35 area-36 area-37 area-38 area-39 area-40" 
"area-41 area-42 area-43 area-44 area-45 area-46 area-47 area-48";	
    grid-gap: 10px;
    padding-left: 0vw;
    padding-right: 0vw;
    align-items: center;
    justify-content: center;
  }
	
	
.feld1{grid-area: area-01;}
.feld2{grid-area: area-02; }
.feld3{grid-area: area-03;}
.feld4{grid-area: area-04;}
.feld5{grid-area: area-05;}
.feld6{grid-area: area-06; }
.feld7{grid-area: area-07;}
.feld8{grid-area: area-08;}
.feld9{grid-area: area-09;}
.feld10{grid-area: area-10; }
.feld11{grid-area: area-11;}
.feld12{grid-area: area-12;}
.feld13{grid-area: area-13;}
.feld14{grid-area: area-14; }
.feld15{grid-area: area-15; }
.feld16{grid-area: area-16; }
.feld17{grid-area: area-17; }
.feld18{grid-area: area-18; }
.feld19{grid-area: area-19; }
.feld20{grid-area: area-20; }
.feld21{grid-area: area-21;}
.feld22{grid-area: area-22; }
.feld23{grid-area: area-23;}
.feld24{grid-area: area-24;}
.feld25{grid-area: area-25;}
.feld26{grid-area: area-26; }
.feld27{grid-area: area-27;}
.feld28{grid-area: area-28;}
.feld29{grid-area: area-29;}
.feld30{grid-area: area-30; }
.feld31{grid-area: area-31;}
.feld32{grid-area: area-32;}
.feld33{grid-area: area-33;}
.feld34{grid-area: area-34; }
.feld35{grid-area: area-35; }
.feld36{grid-area: area-36; }
.feld37{grid-area: area-37; }
.feld38{grid-area: area-38; }
.feld39{grid-area: area-39; }
.feld40{grid-area: area-40; }
.feld41{grid-area: area-41;}
.feld42{grid-area: area-42;}
.feld43{grid-area: area-43;}
.feld44{grid-area: area-44; }
.feld45{grid-area: area-45; }
.feld46{grid-area: area-46; }
.feld47{grid-area: area-47; }
.feld48{grid-area: area-48; }	
	
	


 	 .feld1, .feld2, .feld3, .feld4, .feld5, .feld6, .feld7, .feld8, .feld9, .feld10, .feld11, .feld12, .feld13, .feld14, .feld15, .feld16, .feld17, .feld18, .feld19, .feld20, .feld21, .feld22, .feld23, .feld24, .feld25, .feld26, .feld27, .feld28, .feld29, .feld30, .feld31, .feld32, .feld33, .feld34, .feld35, .feld36, .feld37, .feld38, .feld39, .feld40, .feld41, .feld42, .feld43, .feld44, .feld45, .feld46, .feld47, .feld48  {
    width: 8.334vw;
    height: 8.334vw;
    display: flex;
    cursor: pointer;
    justify-content: center;
    align-items: center;
  }
	





.parent {
display: grid;
grid-template: 'links mitte rechts';
width: 100vw;
grid-column-gap: 10px;
align-self:grid-column-align;
justify-self:grid-row-align;
}

.back { grid-area: links; width:25vw; text-align: center; display: flex; 
  justify-content: center; 
  align-items: center;}
.bild { grid-area: mitte;   width:50vw; display: flex; 
  justify-content: center; 
  align-items: center;}
.description-qr { grid-area: rechts;  width:25vw;  text-align: center; display: flex; 
  justify-content: center; 
  align-items: center;}
	
}


@media screen and (max-width: 600px)

{

.img_werk {width: 90vw; height:auto;}	

.galerie-grid {
    display: grid;
    width: 100vw;
    grid-template-areas:
"area-01 area-02"
		"area-03 area-04"
"area-05 area-06"
		"area-07 area-08" 
"area-09 area-10"
		"area-11 area-12"
"area-13 area-14"
		"area-15 area-16" 
"area-17 area-18"
		"area-19 area-20"
"area-21 area-22"
		"area-23 area-24"
"area-25 area-26"
		"area-27 area-28"
"area-29 area-30"
		"area-31 area-32" 
"area-33 area-34"
		"area-35 area-36"
"area-37 area-38"
		"area-39 area-40" 
"area-41 area-42"
		"area-43 area-44"
"area-45 area-46"
		"area-47 area-48";	
	
  }
	
 	 .feld1, .feld2, .feld3, .feld4, .feld5, .feld6, .feld7, .feld8, .feld9, .feld10, .feld11, .feld12, .feld13, .feld14, .feld15, .feld16, .feld17, .feld18, .feld19, .feld20, .feld21, .feld22, .feld23, .feld24, .feld25, .feld26, .feld27, .feld28, .feld29, .feld30, .feld31, .feld32, .feld33, .feld34, .feld35, .feld36, .feld37, .feld38, .feld39, .feld40, .feld41, .feld42, .feld43, .feld44, .feld45, .feld46, .feld47, .feld48  {
    width: 50vw;
    height: auto;
    display: flex;
    cursor: pointer;
    justify-content: center;
    align-items: center;
  }	
	
	.parent {
display: grid;
grid-template: 
	'mitte'
	'rechts'
	'links';
width: 100vw;
grid-column-gap: 10px;
align-self:grid-column-align;
justify-self:grid-row-align;
}

.back { grid-area: links; width:100vw; text-align: center; display: flex; 
  justify-content: center; 
  align-items: center;}
.bild { grid-area: mitte;   width:100vw; display: flex; 
  justify-content: center; 
  align-items: center;}
.description-qr { grid-area: rechts;  width:100vw;  text-align: center; display: flex; 
  justify-content: center; 
  align-items: center;}
	
}