:root {
  --grund: #888a85;
  --titelgrund: #babdb6;
  --fixgrund: 255, 255, 255;
  --fotopapier: #eeeeec;
  --diagrund: #000000;
  --rahmenfarbe: #babdb6;
  --fixtextfarbe: #a2d4ff;
  --fotohoch: 250px; 
}

body {
	background-color: var(--grund);
	font-family: Arial, Helvetica, sans-serif;
}

.fix {   
	margin: auto;
	position: fixed;
	left: 1px;
	Top: 3px;
	padding: 10px 8px 7px 12px;
	letter-spacing: 0.1em;
	font-weight: 600;
	color: var(--fixtextfarbe);
	background-color: rgba(var(--fixgrund), 0.2);
}

.diafeld { 
	padding-top: 20px;
	padding-bottom: 7px;
	background-color: var(--diagrund);
	text-align: center;
    height: 95vh;
    max-width: 100vw;
    max-height: 95vh;
} 
@media only screen and (max-width: 800px) {
    .diafeld {
    	height: 50vh;
    	min-height: 500px;}
}
@media (orientation: landscape) {}


.diabild {
	max-width: 95vw;
	max-height: 92vh;
}

.knopfposition {
	position: absolute;
	bottom: 10px;
	right: 10px;
}
.knopf {
	width: 3vw;
	height: auto;
}
@media only screen and (max-width: 960px) {
.knopfposition {
	position: absolute;
	bottom: 40vh;;
	right: 20px;}
.knopf { 
	width: 10vw;
	height: auto;}
}
@media (orientation: portrait) {
.knopfposition {
	position: absolute;
	bottom: 20vh;;
	right: center;}
.knopf { 
	width: 20vw;
	height: auto;}
}




.titelbanner {
	font-size: 110%;
	margin: 2%;
	margin-top: 2%;
	padding: 3%;
	letter-spacing: 0.03em;
	word-spacing: 0.1em;
	text-align: center;
	background-color: var(--titelgrund);
}
.titel {
  font-size: 130%;
  letter-spacing: 0.1em;
}

.fotogalerie {
  display: flex;
  justify-content: center;
  align-items: center;
}

.fotoformat {
	height: var(--fotohoch);
	width: auto;
	max-width: 98vw;
} @media (orientation: portrait) {
	.fotoformat {
		height: auto;
		max-width: 98vw;
		max-height: 70vh;
	}
}


ul#galerie {
	padding:0;
	margin:0;
	list-style-type:none;
	font-family:Arial, Helvetica, sans-serif;
}
ul#galerie li{
	padding: 3px;
	background-color: white;
	border:1px solid #eeeeee;
	display:inline-block;
	margin:20px 20px 20px 20px;	
}
ul#galerie li:hover{
	border:1px solid var(--grund);
}
ul#galerie li span{
	display:block;
	text-align:center;
	font-size:11px;
}
ul#galerie li a img{
		border:none;
}

.pixmass {
	height: var(--fotohoch);
	max-width: 900px;
} @media only screen and (max-width: 800px) {
	.pixmass {height: auto;}
}

.cuto {
	max-width: 95vw;
	max-height: 92vh;
}

.spiegely {
	transform: scaleY(-1);
}
.spiegelx {
	transform: scaleX(-1);
}

.zentriert { text-align: center;}