/* Grundelemente
======================================================================================== */
.container {			/* Seite umschliessender Container 								 */
	position:relative;	/* Damit auswahl_seite und swiper_seite übereinanderglegt werden */
						/* können 														 */
	max-width:1200px;	/* maximale Breite des containers 								 */
	height:100%;		/* diese Höhe gilt insbesondere für den Swiper, der sich in der  */
						/* Höhe auf den ganzen Viewport ausdehnen soll. 				 */
	margin:0 auto;		/* container hrizontal zentriert 								 */
}

/* Seite der Bildauswahl
---------------------------------------------------------------------------------------- */
.auswahl_seite {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:2;			/* Die Seite der Bildauswahl liegt genau über der Seite des      */
						/* Swipers 														 */
	background:#aaa;	/* Einfärbung ist nötig, da sonst die swiper_seite nicht in      */
						/* jedem Fall vollständig überdeckt wird 						 */
}

.bannerbereich {
	line-height:0;		/* damit kein Abstand zu den nachfolgenden Elementen entsteht 	 */
}

#banner {
	width:100%;			/* Das Banner erstreckt sich über die ganze Breite von container */
}

#menu_btn {				/* Ersetzt das Banner auf sehr kleinen Geräten 					 */
	width:100%;
	display:none;		/* ursprünglich ausgeblendet									 */
	cursor:pointer;
}

.wrapper {				/* umschliesst navigationsbereich und content 					 */
	width:100%;
	height:auto;
	background:#761149;
}

.navigationsbereich {
	width:25%;			/* 100% - Breite von .content 									 */
	height:auto;
	background:#761149;
	color:#fff;
	float:left;
}
		
nav {
	width:100%;			/* Breite des Menüs 											 */
	height:auto;		/* Höhe des Menüs 												 */
	font-size:1rem;
}

.content {
	width:75%;			/* 100% - Breite von .navigationsbereich 						 */
	height:100%;
	background:#fff;
	padding:1%;
	float:left;
}

#galeriename {
	width:100%; 
	padding:2% 0 0 0; 
	text-align:center; 
	font-size:2rem;
}

#bildauswahl {
	width:100%;
	height:auto;
	background:#fff;
}

.img_kl {
	width:100%;			/* Miniaturbild passt exakt in den Rahmen von bild_btn 			 */
	display:block;
}

.bild_btn {
	width:23%;		   	/* 4 Bildbuttons: 4 * (23% + 1% + 1%) = 4 * 25% = 100%  		 */
	border:#bbb solid 1px;
	margin:1%;
	background:#fff;
	cursor:pointer;
	float:left;			/* Buttons nebeneinander 										 */
}

.fusszeile {
	width:100%;
	height:40px;
	text-align: center;
	line-height:40px;
	background:#ddd;
	padding-left:5px;
	
}

/* Seite des Swipers
---------------------------------------------------------------------------------------- */
.swiper_seite {
	position:absolute;	/* Seite des Swipers liegt exakt unter der Seite der Bildauswahl */
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:1;			/* verdeckt, wenn .auswahl_seite sichtbar 						 */
}

#swiper_steuerung {
	position:absolute;
	left:0;
	bottom:0.5%;		/* etwas abgehoben vom unteren Rand des viewports 				 */
	width:100%;
	height:40px;
	z-index:1;			/* verdeckt, wenn .auswahl_seite sichtbar 						 */
}

#close:after {			/* Text des Schliess-Buttons muss für kleine Geräte per Media-	 */
						/* Queries gekürzt werden. 										 */
	content:"Swiper schliessen";
}

#close:hover {
	background:#ccf;
}

#close:active {
	background:#39f;
}
/*-------------------------------------------------------------------------------------- */