﻿<style>
* {margin: 0; padding: 0; font-family: Arial, sans-serif;  }
body {margin: 0 auto; padding: 0; background-color: white; background-image: url('../bilder/zelteverleih-kupczyk-dach.png'); background-repeat: no-repeat; background-position: center top; -webkit-background-size: 100% auto; -moz-background-size: 100% auto; -o-background-size: 100% auto; background-size: 100% auto; }
#nav-menue 	{ width: 100%; position: absolute; top: 0; }
#steuerung	{ width: 70em; position: absolute; top: 16vw; left: 50%; margin-left: -30vw; }
#mitte		{ position: absolute; height: 58vw; left: 2vw; right: 2vw; top: 20vw; bottom: 0px; background-image: url('../bilder/pixel.png'); border-top: 0.1em solid black; padding: 1vw 2vw 2vw 2vw; border-left: 0.1em solid black; border-right: 0.1em solid black;}
#rand-li	 { position: absolute; width: 2vw; left: 0px; top: 20vw; bottom: 0px; border-top: 0.1em solid black; }
#rand-re	 { position: absolute; width: 2vw; right: 0px; top: 20vw; bottom: 0px; border-top: 0.1em solid black; }
#footer 	{ width: 100%; height: 4vw; position: fixed; bottom: 0px; background-image: url('../bilder/pixel.png'); padding-left: 4vw; padding-right: 4vw; border-top: 0.1em solid black; font-size: 1em; font-weight: bold; text-align: center;}

#bereichlogo { color: black; display: block; padding: 2.5vw; text-decoration: none; float: none; text-align: center; }
#logoli 	{ position: absolute; top: -1vw; left: 2vw; font-size: 2vw; font-weight: bold; text-align: left; }	
#logoli em	{ font-size: 3vw; font-weight: bold; }
#logore 	{ position: absolute; top: -1vw; right: 2vw; font-size: 2vw; font-weight: bold; text-align: right; }	
#logore em	{ font-size: 3vw; font-weight: bold; }
#bereichlogo h3	{ position: relative; top: 11vw; font-size: 2vw; }

#steuerung li {	list-style: none; float: left; }
#steuerung a {	display: block;	 padding: 1vw; text-decoration: none; color: Black; font-size: 1.5vw; }	
.menue-button {	display: none;}	
#steuerung a:hover { color: black; background: orange;  }

#bilder	div	{display: block; float: left; text-align: center;}
.bild-klein	{width: 10vw; border: 0.1vw solid orange; margin: 0.5vw;}
#but	{display: none; }
.galerie div:target img{ height:94vmin; width:auto; border: 1vw solid black; position:fixed; top:50%; left:50%; transform: translate(-50%, -50%); z-index: 30;}
.galerie div:target #but {display: block; width: 100%; opacity: 0; filter: alpha(opacity=0); z-index: 40;}
.bild-klein:hover { border: 0.1vw solid blue; }

#bildlinks	{position: absolute; left: 3vw; top: 21vw;}
#bildrechts	{position: absolute; right: 3vw; top: 21vw;}
.bild-page	{width: 10vw; border: 0.1vw solid orange; margin: 0.5vw;}



#mitte h2	{text-align: center;}
#mitte h3	{text-align: center; font-weight:normal; }
#mitte h4	{text-align: center;}



/* CSS erweitern um MENÜ-Button und entsprechende Steuerung */
/*	Menü-Button oben rechts einblenden bei kleiner als 650px */
@media only screen and (max-width:650px) {
	.menue-button {	display: block; }
	.menue-button { background-color: darkblue; display: block; position: absolute; right: 0; top: 12vw; padding: 0.5em;
		color: white; cursor: pointer; text-decoration: none; }	
	#steuerung {  display: none; }	
	#steuerung a { font-size: 1.5em;  background: gray; ;}
	#steuerung li { width: 100%; border-bottom: 2px solid silver; }	
	.menue-button:hover { color: black; background: orange;	}
	.inhalt img {width: 100%; }
}
/* die Magie, um die Steuerung einzublenden (auch auf mobile Devices) */
#nav-menue:target #steuerung {	display: block; }
/* ausblenden des Menü-Buttons zum öffnen - somit wird der zum Schließen sichtbar */
#nav-menue:target .menue-button-beschr-open { 	display: none ; }	

/* Allgemein Anweisungen */

p 	{ margin: 0.5em 0 0 0; }		
</style>