@charset "UTF-8";
/*****************************************************************
File:		flexig.css
Datum:		29.01.2023
Version:	0.9.01.29
Autor(en):	A. Pelka
Zweck:		CSS3-File für den neuen alexpelka.de/Blog23-Auftritt, der
			responsive ist und das neue Boxmodell berücksichtigt.
			Ich hoffe damit ein brauchbares Hilfsmittel für
			meine Webseitengestaltung zu haben. Die Farben und 
			Bilder müssen dann noch für jeden Auftritt einzeln
			modifiziert werden. Mit dem Filter, wie breit eine 
			Website ist, kann man die Container unterschiedlich
			modifizieren. Beispiel: @media all and (max-width: 1200px)
			Ich fange jetzt mal mit der kleinsten Breite an
			

*******************************************************************/

header, section, footer, aside, nav, article, figure, figcaption, main {
		display: block;
}

* { 
	/*-moz-box-sizing: border-box;*/ /* neues Boxmodell */
	box-sizing: border-box; 
	font-family: Arial, Verdana, sans-serif;  /* Georgia, Times, serif */
	line-height: 1.4em;			/* "Courier New", Courier, monospace */
	margin: 0px;
}
		
		
body {
	width:100.01%; /* für firefox */
	color: #000; /*  */
	background-color: #FFF; /* #897  #FFF/*
	/* für sehr breite Bildschirme ist es u. U gut einen Hintergrund
	einzubinden mit background-image: url("hintergrund.jpg"); */
	background-position: center;
	font-size:1.1em;/* lieber erst einmal etwas größer */
}

h1 { font-size:2.2em;
	font-weight:bold;
	color: #000;
	overflow:auto;
	text-align:center;
	clear:left;
	/*border:1px solid #880;*/
}

h2 { font-size:1.8em;
	font-weight:bold;
	/*border:1px solid #880;*/
	color: #000;
	overflow:auto;
	text-align:center;
	clear:left;
}

h3 { font-size:1.6em;
	font-weight:bold;
	color: #000;
	overflow:auto;
	text-align:left;
	clear:left;
	/*border:1px solid #880;*/
}

h4 { font-size:1.4em;
	font-weight:bold;
	color: #000;
	overflow:auto;
	text-align:left;
	clear:left;
	/* border:1px solid #880; */
}

h5 { font-size:1.2em;
	font-weight:bold;
	color: #000;
	overflow:auto;
	text-align:left;
	clear:left;
	/*border:1px solid #880;*/
}

h5.weissnich { font-size:1.2em;
	font-weight:bold;
	color: #FFF;
	overflow:auto;
	text-align:center;
	clear:left;
	/*border:1px solid #880;*/
}



h6 { font-size:1.1em;
	font-weight:bold;
	color: #000;
	overflow:auto;
	text-align:left;
	clear:left;
	/*border:1px solid #880;*/
}

.anders {
	color:blue;
	text-decoration:underline solid yellowgreen; /*wavy*/
}

.anders:hover {
	color:blue;
	text-decoration:underline double yellowgreen; /*wavy*/
}

.anders:focus {
	color:blue;
	text-decoration:underline double yellowgreen; /*wavy*/
}

.nothing{
	border:0px solid #F80;
}

.fett{
	font-weight:bold;
}

.neu {
	clear:left;
	float:left;
	overflow:auto;
	margin-top:5px;
	/*border:5px green solid;
	;background-color:yellow;*/
	border:0px green solid;
}

.distance {
	clear:left;
	float:left;
	overflow:auto;
	/*margin-top:0px;*/
	width:99%;
	text-align:center;
	/*border:5px green solid;
	;background-color:yellow;*/
}
	
.einschub {
	clear:both;
	float:left;
	overflow:auto;
	/*margin-top:5px;*/
	/*border:5px green solid;
	;background-color:yellow;*/
	;border:0px green solid;
}


.absatz {
	float:left;
	overflow:auto;
	margin-top:5px;
	width:100%;
	min-height:20px;
	padding:10px;
	/*;border:5px green solid;
	;background-color:yellow;*/
	border:0px green solid;
}


p{	color: #000;
	font-size:1.1em;
	text-decoration:none;
	font-weight:normal;
	margin-bottom:6px;
}

.bild95 {
	width:95%;
	height:auto;
	overflow:auto;
}

.rand95 {
	width:95%;
	height:auto;
	overflow:auto;
	border:2px white solid;
}

.bild49 {
	width:49%;
	height:auto;
	overflow:auto;
}

.rand49 {
	width:49%;
	height:auto;
	overflow:auto;
	border:2px white solid;
}

.bild60 {
	width:60%;
	height:auto;
	overflow:auto;
}

.rand60 {
	width:60%;
	height:auto;
	overflow:auto;
	border:2px white solid;
}

.randix {
	width:60%;
	height:auto;
	overflow:auto;
	border:2px white solid;
	margin-left:20px;
}

.bild75 {
	width:75%;
	height:auto;
	overflow:auto;
}

.rand75 {
	width:75%;
	height:auto;
	overflow:auto;
	border:2px white solid;
}

.klein {  /* für Galerie, Kleinbild-Anzeige ganz schmales Fenster 1 Vorschaubild*/
	width:98%;
	height:auto;
	overflow:auto;
	float:left;
	text-align:center;
	padding:2%;
	/*border:1px solid white;*/
}

.rand {
	border:10px blue solid;
}

.bild100 {
	width:100%;
	height:auto;
	overflow:auto;
}

.halbseitig {
	/*border:10px green solid;*/
	float:left;
	width:20%;
	height:auto;
	overflow:auto;
	;clear:both;
	margin:0;
	
}
.bild_halb1 {
	/*;border:10px green solid;*/
	float:left;
	width:49%;
	height:auto;
	overflow:auto;
	;clear:both;
	margin:0;
}

.bild_halb2 {
	/*;border:10px red solid;*/
	float:right;
	width:49%;
	height:auto;
	overflow:auto;
	margin:0;
}


.viertel { /* bei schmalen Bildschirmen */
	width:40%;
	overflow:auto;
	float:left;
}

.dreiviertel { /* bei schmalen Bildschirmen */
	width:60%;
	overflow:auto;
	float:left;
	
}


.viertel2 {
	width:30%;
	overflow:auto;
	float:left;
}

.dreiviertel2 {
	width:69%;
	overflow:auto;
	float:left;
	
}



.datenschutz {
	margin-top:40px;
	padding:20px;
	clear:both;
	width:80%;
	margin-right:auto;
	margin-left:auto;
	border:2px solid gray;
	overflow:auto;
}

.klitze {
	font-size:0.8em;
}

.klitzig {
	font-size:0.8em;
	text-align:center;
}

.abstand1
{
	float:left;
	margin-top:5px;
	overflow:auto;
}

#wrapper {
	font-weight:normal;
	width:95%; /* 100% ab mittlerem BS Platz für Scrolleiste */
	max-width: 1400px;
	min-width: 360px;
	margin: 0px auto 0px auto; /* zentrieren */
/*	margin-left:auto; /* nur für schmale Bildschirme */
/*	margin-right:auto;/* nur für schmale Bildschirme */
	/*border: 0px solid #000000;*/
	border: 1px solid #223300;
	background-color: #FFF; /*FFF */
	padding:0px;
	/*float:left;*/
}

.schwarz
{
	color:white;
	background-color:#000;
}

#galerie1 {
	width:100%;
	overflow:auto;
	text-align:center;
	color:white;
	background-color:#000;
	/*border:2px red solid;*/
}

.left{
	float:left;
	}
	
.i95{ /* zeigt das Bild im Container angepasst */
	width:95%; /* 120px */
 	height:auto;
	float: left;
	padding:5px;
	overflow:auto;
	/*text-align:center;*/
}

.i95:hover{ /* zeigt das Bild im Container angepasst */
	width:95%; /* 120px */
 	height:auto;
	float: left;
	padding:0px;
	border:2px solid red;
}
.i95:focus{ /* zeigt das Bild im Container angepasst */
	width:95%; /* 120px */
 	height:auto;
	float: left;
	padding:3px;
	border:2px solid red;
}

.i100{ /* zeigt das Bild im Container angepasst */
	width:95%; /* 120px */
 	height:auto;
	float: left;
	padding:5px;
	overflow:auto;
	/*text-align:center;*/
}

	
.i75{ /* zeigt das Bild im Container angepasst */
	width:75%; /* 120px */
 	height:auto;
	float: left;
	padding:5px;
}

.i75:hover{ /* zeigt das Bild im Container angepasst */
	width:75%; /* 120px */
 	height:auto;
	float: left;
	padding:0px;
	border:2px solid red;
}
.i75:focus{ /* zeigt das Bild im Container angepasst */
	width:75%; /* 120px */
 	height:auto;
	float: left;
	padding:3px;
	border:2px solid red;
}



.i30{ /* zeigt das Bild im Container angepasst */
	width:30%; /* 120px */
 	height:auto;
	float: left;
	padding:5px;
}

.i30:hover{ /* zeigt das Bild im Container angepasst */
	width:30%; /* 120px */
 	height:auto;
	float: left;
	padding:0px;
	border:2px solid red;
}
.i30:focus{ /* zeigt das Bild im Container angepasst */
	width:30%; /* 120px */
 	height:auto;
	float: left;
	padding:3px;
	border:2px solid red;
}

.i50{ /* zeigt das Bild im Container angepasst */
	width:50%; /* 120px */
 	height:auto;
	float: left;
	padding:5px;
	margin-left:25%;
	margin-right:auto;
}

.i50:hover{ /* zeigt das Bild im Container angepasst */
	width:50%; /* 120px */
 	height:auto;
	float: left;
	padding:0px;
	border:2px solid red;
	margin-left:25%;
	margin-right:auto;
}
.i50:focus{ /* zeigt das Bild im Container angepasst */
	width:50%; /* 120px */
 	height:auto;
	float: left;
	padding:3px;
	border:2px solid red;
	margin-left:25%;
	margin-right:auto;
}

.quote {
	width:80%; 
	padding:8px;
	border:2px solid red;
	margin-left:auto;
	margin-right:auto;

}

.versteckt {
	position:absolute;
	top:-1000px;
	
}

.formu {
	font-size:1.2em;
	font-weight:bold;
}

.bigger {
	font-size:1.2em;
}


.prozent100 {
	width:100%;
	margin:0;
	padding:0px;
	clear:both;
	overflow:auto;	
	background-color:red;
	min-height:250px;
	
}

.prozent20 {
	width:20%;
	margin:0;
	padding:5px;
	/* clear:both; */
	float:left;
	overflow:auto;
	background-color:yellow;
	min-height:200px;
}

.prozent80 {
	width:20%;
	min-height:200px;
	margin:0;
	padding:5px;
	float:right;
	overflow:auto;
	background-color:green;	
}




input {
	font-size:1.2em;
	border: 1px black solid;
	padding:5px;
	background-color:white;
}

input:hover {
	border: 3px black solid;
	background-color:yellow;
	padding:3px;
}

input:focus {
	border: 3px black solid;
	background-color:yellow;
	padding:3px;
}

ul {
	padding-top:10px;
	padding-bottom:10px;
}

ol {
	padding-top:10px;
	padding-bottom:10px;
}


/************** Kopfzeile *************/
header {
	/*min-height: 5em; */
	background-color: #fff; /*#eee*/
	width:100%;
	/*border:2px solid #000;*/
	border: 0px solid #000000;
	margin-bottom:2px;
	overflow:auto;
	/*height:auto;*/
	/*background-image:url(pano1.jpg);/* wird bei schmalen Bildschirmen ausgeschaltet 
	background-image:url(banner_1600_200_barriere_freiarm.png);
	background-size: 100% 100%;
	background-repeat:no-repeat;*/

}

.mittig {
	text-align:center;
	font-size:0.8em;
	padding-left:5px;
	padding-right:5px;
}

.neumittig {
	text-align:center;
	font-size:0.8em;
	padding-left:5px;
	padding-right:5px;
	clear:both;
	float:left;
	overflow:auto;
	width:100%;
}



.hmittig {
	text-align:center;
	padding-left:5px;
	padding-right:5px;
}

.leftig {
	text-align:left;
	/*padding-left:5px;
	padding-right:5px;*/
}

hr {
	background:#444;
	border: none;
	/*color:#111;*/
	height: 2px;
	text-align:center;
	margin-top:12px;
	margin-bottom:6px;
	width: 100%;
}

#logo {/* schmaler Bildschirm */
	/*width:100%; /* bei kleinen Breiten extra Zeile für logo ... 15% bei breitem Bildschirm */
	/*float: left; /*  */
	/*min-height:5em;*/
	/*max-height:140px;*/
	/*margin-left:auto; /* nur für schmale Bildschirme */
	/*margin-right:auto;/* nur für schmale Bildschirme */
	background-color:white;
	text-align:center;
	overflow:auto;
	height:140px;
	width:140px;
	padding:3px;
	/*padding-left:40%;*/
	/*padding-right:40px;
	border:0px solid white;*/
	/* max-width:140px; */
	margin-left:auto;
	margin-right:auto;
	clear:left;
}

#logo:focus {/* schmaler Bildschirm */
	/*width:100%; /* bei kleinen Breiten extra Zeile für logo ... 15% bei breitem Bildschirm */
	/*float: left; /*  */
	/*min-height:5em;*/
	/*max-height:136px;*/
	/*margin-left:auto; /* nur für schmale Bildschirme */
	/*margin-right:auto;/* nur für schmale Bildschirme */
	background-color:black;
	padding:0px;
	border:3px solid blue;
	height:140px;
	width:140px;
	margin-left:auto;
	margin-right:auto;

}

#logo:hover {/* schmaler Bildschirm */
	/*width:100%; /* bei kleinen Breiten extra Zeile für logo ... 15% bei breitem Bildschirm */
	/*float: left; /*  */
	/*min-height:5em;*/
	/*max-height:136px;*/
	/*margin-left:auto; /* nur für schmale Bildschirme */
	/*margin-right:auto;/* nur für schmale Bildschirme */
	background-color:black;
	padding:1px;
	border:2px solid blue;
	/* max-width:140px; */
	/*margin-left:auto;
	margin-right:auto;*/

}





/*#logo a:focus{
	/*width:128px; /* 15% bei breitem Bildschirm */
	/*height:auto;*/
	/*display:inline;*/
	/*float: left; /* für breitere Bildschirme */
	/*min-height:5em;*/
	/*height:128px;*/
	/*border:2px solid #F00;*/
/*	margin-left:auto; /* nur für schmale Bildschirme */
/*	margin-right:auto;/* nur für schmale Bildschirme */
/*	background-color:#DDD;
/*	padding:1px;
	border:2px solid blue;
}	*/
	

/* #logo a:hover{
	/*width:128px; /* 15% bei breitem Bildschirm */
	/*height:auto;*/
	/*display:inline;*/
	/*float: left; /* für breitere Bildschirme */
	/*min-height:5em;*/
	/*height:128px;
	border:2px solid #F00;*/
/*	margin-left:auto; /* nur für schmale Bildschirme */
/*	margin-right:auto;/* nur für schmale Bildschirme */
/*	background-color:#DDD;
	padding:1px;
	border:2px solid blue;
}*/

#bannerleer { /* für das Hintergrund-Bild */
	clear:left;
	overflow:auto;
	width:100%; /* 84% bei breiten Bildschirmen */
	/*border:2px solid green;*/
	min-height:140px; /* 128 */
	/*float:left;*/
}


#banner { /* für das Hintergrund-Bild */
	clear:left;
	overflow:auto;
	width:100%; /* 84% bei breiten Bildschirmen */
	/*border:2px solid green;*/
	min-height:140px; /* 128 */
	background-image:url(wiese16_4.jpg);
	background-size: 100% 100%;
	background-repeat:no-repeat;
	/*float:left;*/
}

#bannermusik { /* für das Hintergrund-Bild */
	clear:left;
	overflow:auto;
	width:100%; /* 84% bei breiten Bildschirmen */
	/*border:2px solid green;*/
	min-height:140px; /*128px;*/
	background-image:url(musik004.jpg);
	background-size: 100% 100%;
	background-repeat:no-repeat;
	/*float:left;*/
}

#bannerfoto { /* für das Hintergrund-Bild */
	clear:left;
	overflow:auto;
	width:100%; /* 84% bei breiten Bildschirmen */
	/*border:2px solid green;*/
	min-height:140px; /*128px;*/
	background-image:url(foto_4.png);
	background-size: 100% 100%;
	background-repeat:no-repeat;
	/*float:left;*/
}


#oben {
	overflow:auto;
	width:100%; /* 84% bei breiten Bildschirmen */
	/*height:100%;*/
	/*height:100%;*/
	/*min-height:5em;
	background-image:url(pano1.jpg);
	background-size: 100% 100%;
	background-repeat:no-repeat;*/
	/*background-image:url(bg1.png);
	background-size: 100% 100%;
	background-repeat:no-repeat;*/	
	/*display:inline;*/
	/*float:left;  /* right bei breitem Bildschirm */
	clear:both; /* nur für schmale Bildschirme */
}

/* Farben */
.weiss {color:#FFF; }
.blau {color:#00F; }
.gelb {color:#FF0; }
.green {color:#FF0; }
.black{color:#000; }
.rot {color:#F00; }
.orange {color:#F80; }
.weissmittig {color:#FFF; text-align:center;}
.zentriert {text-align:center;}
.weisszentriert {text-align:center; color:#EEEEEE;}

#oben1 {
	width:99%;
	/*height:60%;*/ /* ab mittlerem BS */
	/*background-color: #f00;*/
	float:left;
	/*border:2px solid #F00;*/
}
#oben2 {
	width:99%;
	/*height:40%;*/ /* ab mittlerem BS */
	/*background-color: #aff;*/
	float:left;
	/*border:2px solid #0F0;*/
}

/********************* Hauptnavigation *************/


#navigat1 {/* Haupt-Navigation horizontal */
	clear: both;
	color: #ffffff;
	background-color: #aaa;
	/*border:1px solid #F80;*/
	overflow:auto;
	width:100%;
	float:left;
	padding-top:5px;
	padding-bottom:5px;
}

	#navigat1 ul {
		/*position: absolute;*/
		/* margin: 0 auto; */
		list-style: none;
}
 
	#navigat1 ul li {
		float: left;
		color: #fff;
		margin: 1px 1px 1px 20px;
		border:1px solid #000;
		background-color:#222;
		padding:2px;
}

	#navigat1 ul li a {
			color: #FFF; /* fff */
			text-decoration:underline;
			display:inline;
			border:1px solid #000;
			background-color:#222;
			padding:2px;
		}  

	#navigat1 ul li a:hover{
				color: #222; /* 000 */
				border:1px solid #F88;
				background-color:#FFF;
				padding:2px;
		}

	#navigat1 ul li a:focus{
				color: #222; /* 000 */
				border:1px solid #F88;
				background-color:#FFF;
				padding:2px;
		}


.current { /* markiert die laufende Seite */
	color: #F80; /* fff */
	background-color:#08F;
	border:2px solid red;
}



.navigat4 {/* Unter-Navigation auch horizontal */
	clear: both;
	color: #ffffff;
	background-color: #aaa;
	/*border:1px solid #F80;*/
	overflow:auto;
	width:100%;
}

	.navigat4 ul {
		/*position: absolute;*/
		/* margin: 0 auto; */
		list-style: none;
}
 
	.navigat4 ul li {
		float: left;
		color: #fff;
		margin: 1px 1px 1px 20px;
		border:1px solid #000;
		background-color:#222;
		padding:2px;
}

	.navigat4 ul li a {
			color: #FFF; /* fff */
			text-decoration:underline;
			display:inline;
			border:1px solid #000;
			background-color:#222;
			padding:2px;
		}  

	.navigat4 ul li a:hover{
				color: #222; /* 000 */
				border:1px solid #F88;
				background-color:#FFF;
				padding:2px;
		}

	.navigat4 ul li a:focus{
				color: #222; /* 000 */
				border:1px solid #F88;
				background-color:#FFF;
				padding:2px;
		}





#navigat2{/* Subnavigation auch horizontal*/
	
	clear: both;
	color: #FF0;
	background-color: #000;
	/*border:1px solid #F80;*/
	/*min-height: 3em;*/
	overflow:auto;
	width:100%;
	float:left;
}

	#navigat2 ul {
		/* margin: 0 auto; */
		list-style: none;
}
 
	#navigat2 ul li {
		float: left;
		color: #ff0;
		margin: 1px 1px 1px 20px;
		padding:2px;
		border:1px solid #000;
		background-color:#228;
}

	#navigat2 ul li a {
			color: #FF0; /* fff */
			text-decoration:underline;
			float:left; /*display:inline;*/
			border:1px solid #000;
			padding:2px;
			background-color:#228;
		}  

	#navigat2 ul li a:hover{
				color: #222; /* 000 */
				border:1px solid #F88;
				background-color:#DDF;
				padding:2px;
		}

	#navigat2 ul li a:focus{
				color: #222; /* 000 */
				border:1px solid #F88;
				background-color:#DDF;
				padding:2px;
		}

/* ----------------------------------------------------------- */
.naviblog{/* Subnavigation auch horizontal*/
	
	clear: left; /* both */
	float:left;
	color: #FF0;
	background-color: #000;
	/*border:1px solid #F80;*/
	/*min-height: 3em;*/
	overflow:auto;
	width:100%;
}

	.naviblog ul {
		/* margin: 0 auto; */
		list-style: none;
		
}
 
	.naviblog ul li {
		float: left;
		color: #ff0;
		margin: 1px 1px 1px 20px;
		padding:2px;
		border:1px solid #000;
		background-color:#228;
		/*min-width:45px;*/
		text-align:center;
}

	.naviblog ul li a {
			color: #FF0; /* fff */
			text-decoration:underline;
			float:left; /*display:inline;*/
			border:1px solid #000;
			padding:2px;
			background-color:#228;
		}  

	.navi ul logli a:hover{
				color: #222; /* 000 */
				border:1px solid #F88;
				background-color:#DDF;
				padding:2px;
		}

	.naviblog ul li a:focus{
				color: #222; /* 000 */
				border:1px solid #F88;
				background-color:#DDF;
				padding:2px;
		}


/* ----------------------------------------------------------- */

	.xxx  a{
				color: #33F; /* 000 */
				/*border:1px solid #F88;*/
				background-color:#FFF;
				padding:2px;
		}
	.xxx a:hover{
				color: #F33; /* 000 */
				/*border:1px solid #F88;*/
				background-color:#222;
				padding:2px;
		}

	.xxx a:focus{
				color: #F33; /* 000 */
				/*border:1px solid #F88;*/
				background-color:#222;
				padding:2px;
		}
		
		
		
/**************** main ***************************/
/********************* Nebennavigation *************/


#main { /* bleibt bei 100%, da er section und aside beherbergt */
	float: left; /* nur bei breitem Bildschirm */
	clear:left; /* fängt links an */
	width: 95%; /* bei schmalem BS 100 ab mittl. BS */ 
	overflow:auto;
	/*border: 1px solid #eeeeee;*/
	border: 0px solid #000000;
	/*height:40%;*/
	/*min-height:2em;*/
	padding:0;
	margin:0;
	background-color: #fff;
	/*margin-bottom:2px;*/
}
	



section {/* für inhalt, in den sections liegen articles */
	/*float: left; /* nur bei breitem Bildschirm */
	/*border: 1px solid #eeeeee;*/
	border: 0px solid #000000;
	padding:5px;
	padding-right:15px;
	margin-bottom:2px;/* Abstand nach unten */
}

section.content {
	float: left; /* bei breitem Bildschirm, 4-spaltig */
	/*display:inline;*/
	width: 100%;  /* wg. Scrolleiste - ab mittlerem Bildschirm 63% */
	/*margin-right:1%;  /* Abstand zum aside */
	background-color: #FFF;  /*#afa;*/
	/*border:2px solid #000;*/
	/*border: 2px solid #88F;*/
}

.erster {
	margin-top:0;
/* der erste Artikel braucht keinen Abstand nach oben */
}

article {/* volle Breite über inhalt */
	overflow:auto;
	width: 100%;
	/* margin-right:3%; */
	margin-top:1%;
	background-color:#FFF; /* #EEE; #88F; */
	/*border:1px solid #aaa;*/
	border: 0px solid #000000;
	padding:5px;
	padding-right:15px;
	float:left;
}

article.abstand {
	overflow: auto;
	float:left;
	margin-top:1%;
	/*clear:both;*/
}


article.half1 {/* linke Hälfte von Inhalt */
	clear: both; /* Muss links anfangen */
	float: left; /* bei breitem Bildschirm */ 
	width: 95%;  /* 95% wegen Scrollleiste 49% bei breitem Bildschirm */
	/*margin-right:1%; /*bei breitem Bildschirm */
	margin-top:1%;
	/*border:1px solid #aaa;*/
	border: 0px solid #000000;
	background-color:#FFF; /*#EEE; #AAF; */
	padding:5px;
}

article.half2 {/* rechte Hälfte von inhalt */
	clear: both; /* bei schmalem Bildschirm */
	float:left; /* bei breitem Bildschirm right */
	overflow: auto;
	width: 95%;  /* 49%; ab mittlerem Bildschirm */
	/*margin-left:1%; */
	margin-top:1%;
	/*border:1px solid #aaa;*/
	border: 0px solid #000000;
	background-color:#FFF; /* #EEE; #AAF;*/
	padding:5px;
}

aside {
	overflow:auto;
	clear:left; /* bei schmalem Bildschirm */
	float: left; /* right bei breitem Bildschirm */
	width:95%;  /* 28 % bei breitem Bildschirm 36%; */
	border:0px green white;
	/*border: 2px solid #F88;*/
	background-color:#FFF; /*#EEE; */
	/*min-height:3em;*/
	/* height:100%; */
	padding:10px;
	/*border-left:1px solid gray;*/
}

.blockverweis {
	overflow:auto;
	text-align:center;
	/*clear:left;  bei schmalem Bildschirm */
	float: left; /* right bei breitem Bildschirm */
	/* width:95%;   28 % bei breitem Bildschirm 36%; */
	border: 2px solid black;
	/*border: 2px solid #F88;*/
	background-color: #FFF; /*#EEE;*/
	/*min-height:3em;*/
	/* height:100%; */
	padding:10px;
	margin-right:10px;
}

.blockverweis:hover {
	border: 2px solid blue;
	/*border: 2px solid #F88;*/
	background-color:#EE6; /* #EE6;*/
	/*min-height:3em;*/
	/* height:100%; */
	padding:10px;
	margin-right:10px;
}

.blockverweis:focus {
	border: 2px solid blue;
	/*border: 2px solid #F88;*/
	background-color: #EE6;
	/*min-height:3em;*/
	/* height:100%; */
	padding:10px;
	margin-right:10px;
}



footer{
	clear: both;
	overflow:auto;
	width:100%;
	min-height:2em;
	margin-top:11px;
	background-color: #FFF; /*#EEE; #faf; */
	/*border:2px solid #000;*/
	border: 0px solid #000000;
	padding:10px;
}

	footer ul { /* Liste für Footer-Einträge horizontal */
		/*position: absolute;*/
		/* margin: 0 auto; */
		list-style: none;
}
 
	footer ul li {
		float: left;
		color: #fff;
		margin: 1px 1px 1px 20px;
		border:1px solid #000;
		background-color:#222;
		padding:2px;
}

	footer ul li a {
			color: #FFF; /* fff */
			text-decoration:underline;
			display:inline;
			border:1px solid #000;
			background-color:#222;
			padding:2px;
		}  

	footer ul li a:hover{
				color: #222; /* 000 */
				border:1px solid #F88;
				background-color:#FFF;
				padding:2px;
		}

	footer ul li a:focus{
				color: #222; /* 000 */
				border:1px solid #F88;
				background-color:#FFF;
				padding:2px;
		}


.xxx {
	margin:2px;
	color:#22F;
	}

.xxx:hover {
	border:1px solid #F00;
	color:#222;
	background-color:#FF8;
	margin:1px;
	}

	.xxx:focus {
	border:1px solid #F00;
	color:#222;
	background-color:#FF8;
	margin:1px;
	}



.oadrittl1 {/* 1/3 Breite links*/
	clear: both; /* */
	width: 95%;  /* 95% wegen Scrollleiste 49% bei breitem Bildschirm */
	/*margin-right:1%; /*bei breitem Bildschirm */
	margin-top:1%;
	/*border:1px solid #aaa;*/
	border: 0px solid #000000;
	padding:5px;
	padding-right:15px;
	float:left;
	}

.oadrittl2 {/* 1/3 Breite Mitte */
	width: 95%;  /* 95% wegen Scrollleiste 49% bei breiterem Bildschirm */
	/*margin-right:1%; /*bei breitem Bildschirm */
	margin-top:1%;
	/*border:1px solid #aaa;*/
	border: 0px solid #000000;
	padding:5px;
	padding-right:15px;
	/*margin-left:auto;
	margin-right:auto;*/
	}
.oadrittl3 {/* 1/3 Breite rechts*/
	width: 95%;  /* 95% wegen Scrollleiste 49% bei breitem Bildschirm */
	/*margin-right:1%; /*bei breitem Bildschirm */
	margin-top:1%;
	/*border:1px solid #aaa;*/
	border: 0px solid #000000;
	padding:5px;
	padding-right:15px;
	float:left;
	}
	
.zwoadrittl1 {/* 2/3 Breite links */
	clear: both; /* */
	float:left; /* bei breitem Bildschirm links */
	overflow: auto;
	width: 95%;  /* 49%; ab mittlerem Bildschirm */ 
	margin-top:1%;
	/*border:1px solid #aaa;*/
	border: 0px solid #000000;
	padding:5px;
	padding-right:15px;
	}
	
.zwoadrittl2 {/* 2/3 Breite rechts */
	/* clear: both; /* */
	float:left; /* bei breitem Bildschirm links */
	overflow: auto;
	width: 95%;  /* 49%; ab mittlerem Bildschirm */ 
	margin-top:1%;
	/*border:1px solid #aaa;*/
	border: 0px solid #000000;
	padding:5px;
	padding-right:15px;
	}


.oaviertl1 {/* 1/4 Breite links*/
	clear: both; /* */
	width: 95%;  /* 95% wegen Scrollleiste 49% bei breitem Bildschirm */
	/*margin-right:1%; /*bei breitem Bildschirm */
	margin-top:1%;
	/*border:1px solid #aaa;*/
	border: 0px solid #000000;
	padding:5px;
	padding-right:15px;
	float:left;
	}

.dreiviertl1 {/* 3/4 Breite rechts*/
	/*clear: both;  */
	width: 95%;  /* 95% wegen Scrollleiste 49% bei breitem Bildschirm */
	/*margin-right:1%; /*bei breitem Bildschirm */
	margin-top:1%;
	/*border:1px solid #aaa;*/
	border: 0px solid #000000;
	padding:5px;
	padding-right:15px;
	float:left;
	}
	
	
	
	
/* @media (min-width: 30em) and (max-width: 60em) */
@media all and (min-width:480px) /* ############### and (max-width:800px) ####
###########################  Umbruch  #######################################
			#			#######		######
			#	#		#	  #		#	 #
			########	#######		#	 #
				#		#	  #		#	 #
				#		#######		######
#############################################################################*/
{/* größer 480px */

header {
	/*background-image:url(pano1.jpg);/* wird bei schmalen Bildschirmen ausgeschaltet 
	background-size: 100% 100%;
	background-repeat:no-repeat;	*/
	
	
	}

#logo { 
	float:left;
	text-align:center;
	/*max-width:128px;*/
	text-align:center;
	overflow:auto;
	width:22%;
	height:140px;
	/*max-height:140px;*/
	border:0px solid white;
	padding:3px;
	}

#banner { /* für das Hintergrund-Bild */
	clear:none; /* war mal auf none gesetzt */
	overflow:auto;
	width:78%; /* 84% bei breiten Bildschirmen */
	/*min-height:140px;*/
	max-height:140px;
	float:left;
	background-image:url(wiese16_3.jpg);
	background-size: 100% 100%;
	background-repeat:no-repeat;

}

#bannerleer { /* für das Hintergrund-Bild */
	clear:none; /* war mal auf none gesetzt */
	overflow:auto;
	width:78%; /* 84% bei breiten Bildschirmen */
	/*min-height:140px;*/
	max-height:140px;
	float:left;

}

#bannermusik { /* für das Hintergrund-Bild */
	clear:none;
	overflow:auto;
	width:75%; /* 84% bei breiten Bildschirmen */
	min-height:140px;
	float:left;
	background-image:url(musik003.jpg);
	background-size: 100% 100%;
	background-repeat:no-repeat;
	/*float:left;*/
}

#bannerfoto { /* für das Hintergrund-Bild */
	clear:none;
	overflow:auto;
	width:75%; /* 84% bei breiten Bildschirmen */
	/*border:2px solid green;*/
	min-height:140px;
	background-image:url(foto_3.png);
	background-size: 100% 100%;
	background-repeat:no-repeat;
	/*float:left;*/
}


#oben {
	overflow:auto;
	width:100%; /* 84% bei breiten Bildschirmen */
	/*height:100%;*/
	float:left;  /* right ab mittlerem Bildschirm */
	clear:both; /* nur für schmale Bildschirme bis 640px */
	/*background-image:url((bg1.png);/* wird bei schmalen Bildschirmen ausgeschaltet */
	/*background-size: 100% 100%;
	background-repeat:no-repeat;*/
	}
	
#oben1 {
	width:99%;
	float:left;
	clear:left;
	overflow:auto;
	/*height:60%; /* ab mittlerem BS */
	/*border:2px solid #F00;*/
	}
	
#oben2 {
	width:99%;
	float:left;
	clear:left;
	overflow:auto;
	/*height:40%; /* ab mittlerem BS */
	/*border:2px solid #0F0;*/
	}	
	

.klein {  /* für Galerie, Kleinbild-Anzeige 2 Bilder nebeneinander */
	width:48%;
	height:auto;
	overflow:auto;	
}

	
#main {
	width:100%;
	}
	
.oadrittl1 {/* bei schmalerem Bildschirm 1/2 Breite*/
	width: 49%;  /* 95% wegen Scrollleiste 49% bei breitem Bildschirm */
	/*margin-right:1%; /*bei breitem Bildschirm */
	margin-top:1%;
	/*border:1px solid #aaa;*/
	border: 0px solid #000000;
	padding:5px;
	padding-right:15px;
	float:left;
	overflow:auto;
	}

.oadrittl2 {/* 1/2 Breite Mitte kommt bei schälerem Fenster nach rechts*/
	width: 49%;  /* 95% wegen Scrollleiste 49% bei breitem Bildschirm */
	/*margin-right:1%; /*bei breitem Bildschirm */
	margin-top:1%;
	/*border:1px solid #aaa;*/
	border: 0px solid #000000;
	padding:5px;
	padding-right:15px;
	float:left;
	overflow:auto;
/*	margin-left:auto;
	margin-right:auto;*/
	}
.oadrittl3 {/* 1/3 Breite rechts*/
	width: 100%;  /* 95% wegen Scrollleiste 49% bei breitem Bildschirm */
	/*clear: both;*/
	/*margin-right:1%; /*bei breitem Bildschirm */
	margin-top:1%;
	/*border:1px solid #aaa;*/
	border: 0px solid #000000;
	padding:5px;
	padding-right:15px;
	float:right;
	overflow:auto;
	}
	
.zwoadrittl1 {/* 2/3 Breite links */
	/* clear: both; /* */
	float:left; /* bei breitem Bildschirm links */
	overflow: auto;
	width: 100%;  /* 49%; ab mittlerem Bildschirm */ 
	margin-top:1%;
	/*border:1px solid #aaa;*/
	border: 0px solid #000000;
	padding:5px;
	padding-right:15px;
	}
	
.zwoadrittl2 {/* 2/3 Breite rechts */
	/* clear: both; /* */
	float:left; /* bei breitem Bildschirm rechts */
	overflow: auto;
	width: 100%;  /* 49%; ab mittlerem Bildschirm */ 
	margin-top:1%;
	/*border:1px solid #aaa;*/
	border: 0px solid #000000;
	padding:5px;
	padding-right:15px;
	}

.oaviertl1 {/* 1/4 Breite links   */
	width: 50%; 
	}
	
.dreiviertl1 {/* 1/4 Breite links */
	width: 50%; 
	}
} /* größer 480px */

@media all and (min-width:640px) /* #################################### 
#######################################################################
			###			#			######
			#			#	#		#	 #
			######		########	#	 #
			#	 #			#		#	 #
			######			#		######

#########################################################################*/
{/* größer 640px */

header {
	/* background-image:url(pano2.jpg);/* panorama1.png wird bei schmalen Bildschirmen ausgeschaltet */
	/* background-size: 100% 100%;
	background-repeat:no-repeat;*/
	overflow:auto;
	}


#logo {
	width:16%; /* 15% ab mittlerem Bildschirm */
	/*display:inline;*/
	float: left; /* für breitere Bildschirme */
	/*min-height:140px;*/
	/*max-height:136px;*/
	height:140px;
	clear:both;
	margin-left:0; /* nur für schmale Bildschirme auto*/
	margin-right:0;/* nur für schmale Bildschirme auto*/
	text-align:center;
	padding:3px;
	border:0px solid white;
	}
	

#banner { /* für das Hintergrund-Bild */
	float:left;
	overflow:auto;
	width:84%; /* 84% bei breiten Bildschirmen */
	min-height:140px;
	background-image:url(wiese16_2.jpg);  /* bg2.png */
	background-size: 100% 100%;
	background-repeat:no-repeat;
	clear:none;
}

#bannerleer { /* für das Hintergrund-Bild */
	float:left;
	overflow:auto;
	width:84%; /* 84% bei breiten Bildschirmen */
	min-height:140px;
	clear:none;
}

#bannermusik { /* für das Hintergrund-Bild */
	float:left;
	overflow:auto;
	width:81%; /* 84% bei breiten Bildschirmen */
	min-height:140px;
	background-image:url(musik002.jpg);
	background-size: 100% 100%;
	background-repeat:no-repeat;
	clear:none;
	/*float:left;*/
}

#bannerfoto { /* für das Hintergrund-Bild */
	float:left;
	overflow:auto;
	width:81%; /* 84% bei breiten Bildschirmen */
	/*border:2px solid green;*/
	min-height:140px;
	background-image:url(foto_2.png);
	background-size: 100% 100%;
	background-repeat:no-repeat;
	/*float:left;*/
	clear:none;
}


#oben {
	overflow:auto;
	width:100%;
	/*width:auto; /* 84% bei breiten Bildschirmen */
	/*height:100%;*/
	float:left;  /* right ab mittlerem Bildschirm */
	clear:both; /* */
	/*background-image:url((bg1.png);/* wird bei schmalen Bildschirmen ausgeschaltet */
	/*background-size: 100% 100%;
	background-repeat:no-repeat;*/
	}
	
	
.klein {  /* für Galerie, Kleinbild-Anzeige  mittleres Format 3 nebeneinander*/
	width:32%;
	height:auto;
	overflow:auto;	
}

/*
.bild_halb1 {
	float:left;
	width:45%;
	height:auto;
	overflow:auto;
	;clear:left;
	border:3px red solid;
	margin:0;
}

.bild_halb2 {
	float:right;
	width:45%;
	height:auto;
	overflow:auto;
	border:3px red solid;
	margin:0;
}
	*/

.viertel {
	width:25%;
	overflow:auto;
	float:left;
}

.dreiviertel {
	width:75%;
	overflow:auto;
	float:left;
	
}

.viertel2 {
	width:20%;
	overflow:auto;
	float:left;
}

.dreiviertel2 {
	width:79%;
	overflow:auto;
	float:left;
	
}


	
	
article.half1 {/* linke Hälfte von Inhalt */
	width: 49%;  /* 95% wegen Scrollleiste 49% bei breitem Bildschirm */
	margin-right:1%; /*bei breitem Bildschirm */
	margin-top:1%;
	/*border:1px solid #aaa;*/
	border: 0px solid #000000;
	padding:5px;
	padding-right:15px;
	overflow:auto;
	clear:left;
	}

article.half2 {/* rechte Hälfte von inhalt */
	/* clear: both;  */
	float:right; /* bei breitem Bildschirm right */
	overflow: auto;
	width: 49%;  /* 49%; ab mittlerem Bildschirm */
	margin-left:1%; 
	margin-top:1%;
	/*border:1px solid #aaa;*/
	border: 0px solid #000000;
	padding:5px;
	padding-right:15px;
	clear:none;
	}
	
.oadrittl1 {/* 1/3 Breite links*/
	clear:both;
	width: 32%;  /*  */
	margin-right:1%; /*bei breitem Bildschirm */
	margin-top:1%;
	/*border:1px solid #aaa;*/
	border: 0px solid #000000;
	padding:5px;
	padding-right:15px;
	float:left;
	}

.oadrittl2 {/* 1/3 Breite Mitte */
	float: left;
	clear:none;
	width: 33%;  /* 95% wegen Scrollleiste 49% bei breitem Bildschirm */
	margin-right:1%; /*bei breitem Bildschirm */
	margin-top:1%;
	/*border:1px solid #aaa;*/
	border: 0px solid #000000;
	padding:5px;
	padding-right:15px;
	}
.oadrittl3 {/* 1/3 Breite rechts*/
	clear:none;
	width: 33%;  /* 95% wegen Scrollleiste 49% bei breitem Bildschirm */
	/*margin-right:1%; /*bei breitem Bildschirm */
	margin-top:1%;
	/*border:1px solid #aaa;*/
	border: 0px solid #000000;
	padding:5px;
	padding-right:15px;
	float:right;
	}
	
.zwoadrittl1 {/* 2/3 Breite links */
	/* clear: both;  */
	float:left; /* bei breitem Bildschirm links */
	overflow: auto;
	width: 66%;  /* 49%; ab mittlerem Bildschirm */ 
	margin-top:1%;
	/*border:1px solid #aaa;*/
	border: 0px solid #000000;
	padding:5px;
	padding-right:15px;
	clear:left;
	}
	
.zwoadrittl2 {/* 2/3 Breite rechts */
	clear: none; /* */
	float:right; /* bei breitem Bildschirm links */
	overflow: auto;
	width: 67%;  /* 49%; ab mittlerem Bildschirm */ 
	margin-top:1%;
	/*border:1px solid #aaa;*/
	border: 0px solid #000000;
	padding:5px;
	padding-right:15px;
	}
	
.oaviertl1 {/* 1/4 Breite links*/
	width: 32%; 
	float:left;
	clear:left;
	}
	
.dreiviertl1 {/* 1/4 Breite rechts*/
	width: 67%; 
	clear:none;
	}
	
	

}/* größer 640px */

@media all and (min-width:960px) /* ####################################
#######################################################################
			######		###			######
			#	 #		#			#	 #
			######		######		#	 #
				 #		#	 #		#	 #
				 #		######		######

#########################################################################*/


{/* größer 960px */

header {  /*pano3.jpg */
	/* background-image:url(banner_1600_200_barriere_freiarm.png);/* wird bei schmalen Bildschirmen ausgeschaltet */
	/*background-size: 100% 100%;
	background-repeat:no-repeat;*/

	}

#logo {
	clear:left;
	width:9%; /* 15% ab mittlerem Bildschirm */
	/*display:inline;*/
	float: left; /* für breitere Bildschirme */
	/*max-height:136px;*/
	height:140px;
	margin-left:0; /* nur für schmale Bildschirme auto*/
	margin-right:0;/* nur für schmale Bildschirme auto*/
	text-align:center;
	overflow: auto;
	padding:3px;
	border:0px solid white;
	}

#banner { /* für das Hintergrund-Bild */
	float:left;
	overflow:auto;
	width:91%; /* 84% bei breiten Bildschirmen */
	min-height:140px;
	clear:none;
	background-image:url(wiese16_1.jpg); /* bg1.png */
	background-size: 100% 100%;
	background-repeat:no-repeat;
}

#bannerleer { /* für das Hintergrund-Bild */
	float:left;
	overflow:auto;
	width:91%; /* 84% bei breiten Bildschirmen */
	min-height:140px;
	clear:none;
}

#bannermusik { /* für das Hintergrund-Bild */
	float:left;
	overflow:auto;
	width:88%; /* 84% bei breiten Bildschirmen */
	min-height:140px;
	clear:none;
	background-image:url(musik001.jpg);
	background-size: 100% 100%;
	background-repeat:no-repeat;
	/*float:left;*/
}

#bannerfoto { /* für das Hintergrund-Bild */
	clear:none;
	overflow:auto;
	width:88%; /* 84% bei breiten Bildschirmen */
	/*border:2px solid green;*/
	min-height:140px;
	background-image:url(foto_1.png);
	background-size: 100% 100%;
	background-repeat:no-repeat;
	/*float:left;*/
}


.klein {  /* für Galerie, Kleinbild-Anzeige  4 Bilder nebeneinander*/
	width:24%;
	height:auto;
	overflow:auto;	
}
	
	
	
#oben {
	clear:both;
	overflow:auto;
	width:100%;
	/*width:auto; /* 84% bei breiten Bildschirmen */
	/*height:100%;*/
	float:right;  /* right ab mittlerem Bildschirm */
	/* clear:both; /* nur für schmale Bildschirme bis 640px */
	/*background-image:url((bg1.png);/* wird bei schmalen Bildschirmen ausgeschaltet */
	/*background-size: 100% 100%;
	background-repeat:no-repeat;*/
	}



section.galerie {
	float: left; /* */
	width: 99%;  /* nur für die Galerien die volle Breite */

}

section.content {
	float: left; /* bei breitem Bildschirm, 3-spaltig */
	width: 66%;  /* wg. Scrolleiste - ab mittlerem Bildschirm 63% */
	clear:left;
	/*margin-right:1%;  /* Abstand zum aside */
	}

aside {
	overflow:auto;
	clear:none;
	float: right; /* right bei breitem Bildschirm */
	width:34%;  /*bei breitem Bildschirm 33%; */
	/*border: 2px solid black;*/
	/*border: 0px solid #000000;*/
	background-color: #FFF; /*#EEE;*/
	margin-top:13px;
	padding-left:15px;
	border-left:1px solid gray;
	}
	
.oaviertl1 {/* 1/4 Breite links*/
	width: 25%; 
	float:left;
	}
	
.dreiviertl1 {/* 1/4 Breite rechts*/
	clear:none;
	width: 74%; 
	}
	
}/* größer 960px */