/* allgemein */
body {
	background-color: black;
	color: white;
	font-family: Arial, Helvetica, sans-serif;
  	text-align: center;	
   }
   
section {
	padding: 0.1em;
	width: min(90%, 850px);
	margin: 1em auto;
   }
   
section div {
	background-color: #101010;
   border-radius: 2%;
   border-color: #202020;
	border-width: 0.5% 0.5% 1% 1%;
	border-style: outset;
	outline: 0.1em solid #252525;
   padding: 0.7em;
   margin: 1em 0;
   }

.stil-01 {
	font-size: 2em;
	font-weight: bold;
	line-height: 0.5em;
   }

.stil-02 {
	font-size: 1.2em;
	font-weight: bold;
	line-height: 1.0em;
   }
   
img {
	max-width: 100%;
	height: auto;
	padding: 0;
	margin: auto;
	border-radius: 5%;
   }
   
/*links*/

.link a {
	color: white;
	font-size: 1em;
	font-weight: 800;
	text-decoration: none;	
   }

.link a:hover ,.link a:focus ,.link a:active {
	font-size: 0.8em;
	font-weight: 400;
	background-color: #202020;
	transition: all 0.3s;
   }
   
/* foto-gallerien */

.gallery-h, .gallery-q {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	align-items: center;	
   }
   
.gallery-q img {
	width: 16em;
	height: 12em;
   }
   
.quer span img { 
	width: 100vh;
	height: auto;
	visibility: none;
	opacity: 0;
}

.gallery-h img {
	width: 12em;
	height: 16em;
   }
   
.hoch span img { 
	width: 65vh;
	height: auto;
	visibility: none;
	opacity: 0;
}

.popup { 
	position:relative;
}

.popup span { 
	position: absolute;
	visibility: hidden;
}

.popup:hover span { 
	visibility:visible;
	position: fixed;
	top: 10%;
	left: 0;
	width: calc(100%);
	z-index:5;
	padding: auto;
   }

.popup:hover span img {
	border: 0.2em solid black;
	box-shadow: 0 0 3em 4em #000000;
	outline: silver solid 0.2em;
	border-radius: 5%;
	visibility: visible;
	opacity: 100%;
	transition: all 2s;
	}

/* audio-gallerien */

.gallery-audio {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: space-around;
   }
  
.gallery-audio div {
   flex: 1;
   }
   
/* iframe */
 
iframe {
	width: 100%;
	border: 0;
	margin: 0;
	overflow: hidden;
   }
nav#info iframe, nav#pflicht iframe, nav#index iframe {
	aspect-ratio: 15 / 1; min-height: 5em; max-width: 1000px;
	}


/* media-queries */

@media (max-width: 600px) {
 .gallery-audio {
   flex-direction: column;
   justify-content: center;
   }
 .gallery-audio div {
   width: 90%;
   }
 section div {
   border-radius: 1%;
   padding: 0.3em;
   margin: 0.1em 0;
  	border-width: 0.2% 0.2% 0.5% 0.5%;
   }
 img {
   border-radius: 1%;
   }
 .stil-01 {
	font-size: 1.5em;
	line-height: 0.2em;
	}
 .stil-02 {
	font-size: 1em;
	}
 nav#info iframe, nav#pflicht iframe, nav#index iframe {
	aspect-ratio: 15 / 1; min-height: 4em; max-width: 600px;
	}	
 }