/*
	stylesheet für Fotogalerie
*/
body{
	margin: 0;
	background-image: url("Bilder2/hintergrund_galerie.jpeg");
	background-repeat: repeat;
	background-size: cover;
	color: #f0f0f0;
}

 a:link {
    color: #f0f0f0;
    background-color: transparent;
    text-decoration: none;
}
 a:visited {
    color: #f0f0f0;
    background-color: transparent;
    text-decoration: none;
}
 a:hover {
    color: #bababa;
    background-color: transparent;
    text-decoration: none;
}
 a:active {
    color: #303030;
    background-color: transparent;
    text-decoration: none;

}
img {
	cursor:pointer;
}


#menu {
	display: flex;
	width: 100vw;
	height: 70px;
	background-color: rgba(47,41,41,0.9);
	position: fixed;
	z-index: 20;
	place-items:center;
	color: white;
	text-align: center;
	
}
#menu p {
	/*align-items: center;*/
	margin-left: 20px;
}
#menu h2 {
	margin: 0 auto;
}
/*hintergrund für das menü*/
#hintergrund{
	width: 100vw;
	height:70px;
	background-color: black;
	position: fixed;
}


.foto-template{
	/*top: 7px;*/
	width: 98vw;
	height: auto;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	background: transparent;
	display: grid;
	grid-template-columns: 1fr minmax(60px, 13vh) minmax(60px, 13vh) minmax(60px, 13vh) minmax(60px, 13vh) minmax(60px, 13vh) minmax(60px, 13vh) 1fr;
	grid-template-rows: 70px auto auto auto auto auto auto 100px
	/*repeat(6, 120px)*/;
	grid-template-areas:
	". TT TT TT TT TT TT ." 
	". AA BB XX XX XX XX ."
	". CC DD XX XX XX XX ."
	". EE FF XX XX XX XX ."
	". GG HH XX XX XX XX ."
	". II JJ XX XX XX XX ."
	". KK LL XX XX XX XX ."
	". . . BO BO BO BO ."
	;	
	gap:  9px;
	
}
.foto-template img{
	width: 100%;
	height: auto;
	object-fit: cover;
}

.titel{
	grid-area:TT;
	text-align: center;
	
}


.bild1 img, .bild2 img, .bild3 img, .bild4 img, .bild5 img,
.bild6 img, .bild7 img, .bild8 img, .bild9 img, .bild10 img,
.bild11 img, .bild12 img{
		width: 100%;
	height: 100%;
	object-fit: cover;
	box-shadow: 0 0 5px 1px rgba(0,0,0,0.5);
	border-radius: 5px;
}
.bild1{
	grid-area: AA;
	background: transparent;
    text-align: center;
	aspect-ratio: 1/1;
}
.bild2{
	grid-area: BB;
	background: transparent;
    text-align: center;
	aspect-ratio: 1/1;
}
.bild3{
	grid-area: CC;
	background: transparent;
    text-align: center;
	aspect-ratio: 1/1;
}
.bild4{
	grid-area: DD;
	background: transparent;
    text-align: center;
	aspect-ratio: 1/1;
}
.bild5{
	grid-area: EE;
	background: transparent;
    text-align: center;
	aspect-ratio: 1/1;
}
.bild6{
	grid-area: FF;
	background: transparent;
    text-align: center;
	aspect-ratio: 1/1;
}
.bild7{
	grid-area: GG;
	background: transparent;
    text-align: center;
	aspect-ratio: 1/1;
}

.bild8{
	grid-area: HH;
	background: transparent;
    text-align: center;
	aspect-ratio: 1/1;}
.bild9{
	grid-area: II;
	background: transparent;
    text-align: center;
	aspect-ratio: 1/1;}
.bild10{
	grid-area: JJ;
	background: transparent;
    text-align: center;
	aspect-ratio: 1/1;}
.bild11{
	grid-area: KK;
	background: transparent;
    text-align: center;
	aspect-ratio: 1/1;}
.bild12{
	grid-area: LL;
	background: transparent;
    text-align: center;
	aspect-ratio: 1/1;

}	
.bildbox{
	grid-area: XX;
	width: 100%;
	height: auto;
	object-fit: cover;
	
}
.bildbox img{
	box-shadow: 2px 2px 30px 2px rgba(0,0,0,0.5);
	border-radius: 6px;
}

.vollbild{
	grid-area: XX;
	position: absolute;	
	background: transparent;
	width: 100%;
	height: auto;
	place-items: center;
	
    text-align: center;
	/*object-fit: cover;*/
	z-index: 10;
	opacity: 0;
	
	transition: opacity 1.2s ease-in-out;
	-webkit-transition: opacity 1.2s ease-in-out;
	 -moz-transition: opacity 1.2s ease-in-out;
	 -ms-transition: opacity 1.2s ease-in-out;
	 -o-transition: opacity 1.2s ease-in-out;
	 transition: opacity 1.2s ease-in-out;
}
label > img {
	transition: opacity 1.2s ease-in-out;
}
.beschreibung{
	grid-area:BO;
	text-align: center;
	font-weight: bold;
}

.einpassen {
		width: 100%;
		height: auto;
	    object-fit: cover;
	}
.rnav {
		display: none;
}
.pic1:checked ~ .bildbox > .pic1,
	.pic2:checked ~ .bildbox > .pic2,
	.pic3:checked ~ .bildbox > .pic3,
	.pic4:checked ~ .bildbox > .pic4,
	.pic5:checked ~ .bildbox > .pic5,
	.pic6:checked ~ .bildbox > .pic6,
	.pic7:checked ~ .bildbox > .pic7,
	.pic8:checked ~ .bildbox > .pic8,
	.pic9:checked ~ .bildbox > .pic9,
	.pic10:checked ~ .bildbox > .pic10,
	.pic11:checked ~ .bildbox > .pic11,
	.pic12:checked ~ .bildbox > .pic12


{
	opacity: 1;
		z-index: 15;
}	
.pic1:checked ~ .bild1 > .pic1-label,
	.pic2:checked ~ .bild2 > .pic2-label,
	.pic3:checked ~ .bild3 > .pic3-label,
	.pic4:checked ~ .bild4 > .pic4-label,
	.pic5:checked ~ .bild5 > .pic5-label,
	.pic6:checked ~ .bild6 > .pic6-label,
	.pic7:checked ~ .bild7 > .pic7-label,
	.pic8:checked ~ .bild8 > .pic8-label,
	.pic9:checked ~ .bild9 > .pic9-label,
	.pic10:checked ~ .bild10 > .pic10-label,
	.pic11:checked ~ .bild11 > .pic11-label,
	.pic12:checked ~ .bild12 > .pic12-label

	{
		opacity: 25%;
	}
	
@media screen and (max-width: 820px) {

/*.foto-template {
	grid-template-columns: 1fr 80px 80px 80px 80px 80px 80px 1fr;
	grid-template-rows: 75px 80px 80px 80px 80px 80px 80px 100px;
	gap: 12px;
	
	grid-template-areas:
  ". TT TT TT TT TT TT ." 
	". AA BB XX XX XX XX ."
	". CC DD XX XX XX XX ."
	". EE FF XX XX XX XX ."
	". GG HH XX XX XX XX ."
	". II JJ XX XX XX XX ."
	". KK LL XX XX XX XX ."
	". . . BO BO BO BO ."
	;	
	
}
.vollbild{
	width: 356px;
	height: 540px;

}*/
@media screen and (max-width: 600px) {

	



.foto-template {
	grid-template-columns: 1fr 14vw 14vw 14vw 14vw 14vw 14vw 1fr;
	grid-template-rows: 70px 14vw 14vw 14vw 14vw 14vw 14vw 14vw 14vw 14vw 14vw 14vw 60px;
	gap: 5px;

  	grid-template-areas:
	". TT TT TT TT TT TT ." 
	". AA BB CC DD EE FF ."
	". GG HH II JJ KK LL ."
	". XX XX XX XX XX XX ."
	". XX XX XX XX XX XX ."
	". XX XX XX XX XX XX ."
	". XX XX XX XX XX XX ."
	". XX XX XX XX XX XX ."
	". XX XX XX XX XX XX ."
	". XX XX XX XX XX XX ."
	". XX XX XX XX XX XX ."
	". XX XX XX XX XX XX ."
	". . . BO BO BO BO ."
	;	

}
.vollbild{
	grid-area: XX;
	width: 100%;
	height: auto;
	margin-top: 15px;

}

@media screen and (max-width: 380px) {
	h1, h2{
display: none;
	}
.foto-template{

}
}