/* ---------------------------------------------------- 
     Stylessheet bildschirm.css für CB V11 mit 2 Viewports - Bernhard Gross - 08/2018
    ----------------------------------------------------- */ 

html {
	box-sizing: border-box;
	background: #333;
	height: 101%; /* Rollbalken rechts in Firefox erzwingen! Dadurch wird beim Umschalten Springen des Bildes verhindert*/
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Merriweather',Georgia,serif; /* Schrifttyp 'Open+Sans' erst einbinden */
  margin-bottom: 1em;
}
	
p {
	font-family: 'Merriweather+Sans',Verdana, Arial, sans-serif;
	margin: 0;
}

*, *:before, *:after {
	box-sizing: inherit;
}

body {
	font-family: 'Merriweather+Sans',Verdana,Tahoma,Arial,sans-serif;
	font-size: 87.5%;
	background-color: #333;
	padding: 0;
	margin: 0; 
}





/*xxxxxxxxxxxx[ STYLES FÜR DEN FOOTER ]xxxxxxxxxxxxxx*/

.fussbereich {
	clear: both;
	overflow: hidden;
	background-color: #ddd;
	color: #333; 
	border-top: 3px solid #333;
	padding-bottom: 0.5em;
	margin-bottom: 0.5em;
}
  
.adresse {		
	width: 30%;
	float: left;
	margin: 0 1em 0 2em;		
}
	
.adresse p, .copyright p {
	padding-top: 0.3em;
	margin: 0.6em;
}
	
.copyright {		
	width: 16%;
	float: right;
	/*margin-top: 1em;*/
}

.topbutton {
	float: right;
	background-color: #ddd;
	box-shadow: 3px 3px 4px rgba(16,16,16,0.8);
	margin-top: 2%;
	margin-right: 8%;
}

.topbutton a {
	text-decoration: none;
	padding: 0.3em 0.3em 0 0.3em;
}

.topbutton img {
	padding-top: 0.3em;
}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

/*xxxxxxxxxxxxxx[ Stylsheet bis 690px ]xxxxxxxxxxxxxx*/

@media screen and (max-width:689px) {
	
nav.navibereich {display: none;}
	
.wrapper {
	/*position: relative;*/
	width: 100%; 
	max-width: 689px;
	min-width: 320px;
	background: #eee;
	padding: 0;
	margin: 0 auto;
}
	
header.kopfbereich {
	position: relative;
	z-index: 15;
	max-width: 689px;
	background-color: #06f;
	box-shadow: 0 5px 3px rgba(16,16,16,0.8);
}
	
header.kopfbereich img {
	width: 70%;
	max-width: 260px;
	margin-left: 0.5em;
}

main.inhaltsbereich {
	padding-bottom: 0.1em;
}	

section.linke-spalte {
	float: left;
	margin: 2em 1.5em 2em 2em;	
}

section.linke-spalte .schrift h2 {
	font-size: 124%;	
}

aside.rechte-spalte {
	margin: 2em;	
}
	
aside.rechte-spalte img {
	margin: 0.5em;	
}

/*xxxxxxxxxxxxxxx[ 360 GALERIESEITEN ]xxxxxxxxxxxxxx*/
.galerie360 {
	position: relative;
	background: #333;
	margin: 0; /*war 16% 0 0 0;*/
}

.galerie360  ul {
	overflow: hidden;
	padding-left: 0;
	margin: 0; /*war 6% 0 4% 2%*/
}
	
.galerie360 li {
	display: block; /*war inline-block*/
	list-style-type:none;
	padding:0;
	margin-bottom:3.6%; /*ohne Text einschalten*/
}
	
.galerie360 img {
	width: 100%;
	box-shadow: 2px 2px 6px rgba(0,0,0,0.6);
}
/*xxxxxxxxxxx[ ENDE 360 GALERIESEITEN ]xxxxxxxxxxxxx*/
	
/*xxxxxxxxx[ STYLES FÜR AKTUELLSEITE 360 ]xxxxxxxxxxx*/
.a_wrapper {
	background-color: #eee;
}

/*Damit dieser style wirkt muss header.a_header verwendet werden*/
/*header.a_header {
	background-color: #666;
	padding-bottom: 55px;
}*/
	
.aktuell {
	overflow: hidden;
	padding-top: 5em;
}
	
.aktuell h2, .aktuell p {
	margin: 0;
}
	
.aktuell_einleitung {
	/*width: 41%;
	float: left;*/
	padding-left: 2em;
	padding-bottom: 22.5em;
}
	
.aktuell_einleitung h2 {
	padding-bottom: 0.5em;
}
/*xxxxxxxxxxxx[ ENDE AKTUELLSEITE 360 ]xxxxxxxxxxxxx*/	

/*xxxxxxxxxx[ STYLES FÜR KONTAKTSEITE 360]xxxxxxxxxx*/
.kontakt {
	overflow: hidden;
	padding-top: 15em;		
	}
.kontakt	h2, .aktuell p {
	margin: 0;
}	
.kontakt_einleitung {
	/*width: 41%;
	float: left;*/
	padding-left: 2em;
	padding-bottom: 25em;
}
.kontakt_einleitung h2 {
	padding-bottom: 0.5em;
}		
/*xxxxxxxxxx[ ENDE KONTAKTSEITE 360]xxxxxxxxxxxxxxx*/

	
/*xxxxxxxxxxxx[ NAVIGATION MIT MENUBUTTON ]xxxxxx*/

/*xxxxxxxxxxxx[ Menubutton ]xxxxxxxxxxxxxxxxxxxxxx*/
	
div.menubutton {
	position: absolute;
	top: 1.4rem;
	right: 1.6rem;
	z-index: 20;
	display: block;
	box-shadow: 3px 3px 4px rgba(16,16,16,0.8);
}

div.menubutton a {
	display: block;
	background: #06f;
	color: #fff;
	text-decoration: none;
	padding: 0.4rem;
}

/*Pfeile für den Menübutton per Unicode-Symbol*/
div.menubutton a.showmenu:after {
	content: " \25bc"; /*Pfeil nach unten*/
	font-size: 0.7rem;
}

div.menubutton a.hidemenu:after {
	content: " \25b2"; /*Pfeil nach oben*/
	font-size: 0.7rem;
}
/*Menübutton verstecken*/	
div.menubutton a.hidemenu {
	display: none;
}
/*xxxxxxxxxxx[ Navigationsbereich 360 ]xxxxxxxxxxxxxx*/
.navibereich360 {
	position: relative;
	z-index: 11;
	max-width: 360px; 
	background: #333;
	margin: 0 auto;
}

.navihintergrund360 {
	width: 100%;
	background-color: #444;
}
	
.naviliste360 {
	overflow: hidden;
	/*font-size: 110%;*/
	list-style-type: none;
	transition: 0.25s;
	/*border-radius: 0 0 1rem 1rem;*/
	padding: 0;
	margin: 0;
}
	
.naviliste360 li {
	display: block;
	border-bottom: 1px solid #000;
}
	
.naviliste360 li:last-of-type {
	border-bottom: 0;
}

/*xxxxxxxx[ Links in NavigationsListe 360]xxxxxxx*/
.naviliste360 a {
	display: block;
	background: #444;
	letter-spacing: 4pt;
	text-decoration: none;
	color: #fff;
	text-align: center;
	padding: 0.7rem;
}
	
.naviliste360 a.sind-hier {
	background: #333;
	text-decoration: none;
	color: #fd6;
}
	
/*xxxxxxxxxxx[ Navigation steuern ]xxxxxxxxxxxx*/
.naviliste360 {
	max-height: 0; /*Navigationsliste ausbeblendet*/
}
/*Wenn #bodybox in der URL steht, Navigation einblenden*/
#bodybox:target .naviliste360 {max-height: 25em;}
/*Link mit Pfeil nach unten ausblenden*/
#bodybox:target a.showmenu {display: none;}
/*Link mit Pfeil nach oben einblenden*/
#bodybox:target a.hidemenu {display: block;}
	
/*xxxxxxx[ ENDE NAVIGATION360 MIT MENUBUTTON ]xxxxxx*/
	
	
	
} /*Ende @media - Nicht löschen!*/



/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/


/*xxxxxxxxxxxxxx[ Stylsheet ab 690px ]xxxxxxxxxxxxxxx*/

@media screen and (min-width:690px) {
	
.navihintergrund360 {display: none;}
.navibereich360 {display: none;}
.menubutton {display: none;}

.wrapper {
	position: relative;
	width: 100%; 
	max-width: 960px;
	min-width: 690px;
	background: #eee;
	padding: 0;
	margin: 0 auto;
}

.g_wrapper {
	background-color: #666;
}
	
header.kopfbereich {
	position: fixed;
	z-index: 15;
	width: 960px; /*Keine Prozent*/
	overflow: hidden; /*Navihintergrund abschneiden*/
	padding-bottom: 10px;
	margin: 0;
}

header.kopfbereich img {
	width: 270px;
	margin-top: 15px;
	margin-left: 15px;
}

main.inhaltsbereich {
	position: relative;
	overflow: hidden;
	background-color: #eee;
	color: #000;
	padding-bottom: 3em;
}

main.inhaltsbereich p {
	padding-right: 10em;
	margin: 0;
}

section.linke-spalte {
	margin: 0 2em;	
}
	
aside.rechte-spalte {
		
}

aside.rechte-spalte .kalender {
	float: left;
	margin: 2em 1em 1em 2em;
}

aside.rechte-spalte .postkarte {
	float: left;
	width: 33%;
	margin: 4.5em 1em 2em 4em;
}	
	
aside.rechte-spalte img {
	margin: 0.5em;	
}

/*xxxxxxxxx[ STYLES FÜR AKTUELLSEITE 960 ]xxxxxxxxxxx*/
.a_wrapper {
	background-color: #eee;
}

/*Damit dieser style wirkt muss header.a_header verwendet werden*/
header.a_header {
	background-color: #666;
	padding-bottom: 55px;
}
	
.aktuell {
	overflow: hidden;
	padding-top: 16em;
}
	
.aktuell h2, .aktuell p {
	margin: 0;
}
	
.aktuell_einleitung {
	width: 41%;
	float: left;
	padding-left: 2em;
	padding-bottom: 22.5em;
}
	
.aktuell_einleitung h2 {
	padding-bottom: 0.5em;
}

/*xxxxxxxxxxxx[ ENDE AKTUELLSEITE 960 ]xxxxxxxxxxxxx*/

	
/*xxxxxxxxx[ STYLES FÜR KONTAKTSEITE 960 ]xxxxxxxxxx*/

	.k_wrapper {
	background-color: #eee;
}
/*Damit dieser style wirkt muss header.k_header verwendet werden*/	
header.k_header {
	background-color: #666;
	padding-bottom: 55px;
}
.kontakt {
	overflow: hidden;
	padding-top: 16em;		
	}
.kontakt	h2, .aktuell p {
	margin: 0;
}		
.kontakt_einleitung {
	width: 41%;
	float: left;
	padding-left: 2em;
	padding-bottom: 25.95em;
}
.kontakt_einleitung h2 {
	padding-bottom: 0.5em;
}	

/*xxxxxxxxxxxx[ ENDE KONTAKTSEITE ]xxxxxxxxxxxxxxxxx*/	




/*xxxxxxxxxxxx[ NAVIGATION960 HORIZONTAL ]xxxxxxxxxx*/
	
nav.navibereich {
	overflow: hidden;
	position: absolute;
	top: 6.9em;
	left: 38%;
	z-index: 20;
	width: 100%; /*Hintergrundfarbe bis zum Rand und darüber hinaus*/
	background-color: rgba(200,200,200,0.2); /*war rgba(200,200,255,0.2)*/
	border-radius: 0.8em;
	color: #ff5959;
	padding: 0;
	margin: 0;
}
	
ul.naviliste {
	padding: 0;
	margin: 0;
}

ul.naviliste li {
	display: inline-block;
	list-style: none;
	text-align: center;
}

/*2. Hyperlinks gestalten*/
ul.naviliste a {
	display: block;
	color: #fff;
	text-decoration: none;
	padding: 5px 10px 5px 20px; /* Anpassung bei Schrifttyp notwendig, war 7 23 7 23 px */
}

/*3. Linkzustände gestalten*/
ul.naviliste a.sind-hier {
	color: #fff;
	font-weight: normal;
	text-decoration: underline;
}
    
ul.naviliste a:hover,
	ul.naviliste a:focus {
	color: #6c4;
	text-decoration: none;
}

ul.naviliste a:active {
	color: #6c4;
	text-decoration: none;
}

/*xxxxxxxxxx[ ENDE NAVIGATION960 HORIZONTAL ]xxxxxxxx*/
/*xxxxxxxxxx[ NAVIGATION GALERIESEITE ]xxxxxxxxxx*/

.galerienavigation {
	padding-top: 12em; /*war 16%*/
	margin: 0; /*war 16% 0 0 0;*/
}

.galerienavigation  ul {
	padding-left: 2%;
	margin: 0; /*war 6% 0 4% 2%*/
}
	
.galerienavigation li {
	display:inline-block;
	list-style-type:none;
	width: 15%; /*war ursprünglich 25rem, später 15%*/
	padding:0;
	margin:1.6%;
	transition:all 1s ease;
	-webkit-transition:all 1s ease;
}
	
.galerienavigation img {
	width: 100%;
	/*border:0.25rem solid #f9f9f9;*/	 /*war 0.25rem rgba(200,200,255,0.3)*/ /*war an*/
	/*border-radius:0.25rem;*/ /*war an*/
	box-shadow: 2px 2px 6px rgba(0,0,0,0.6); /*war 5px 5px 12px rgba(0,0,0,0.6)*/
}
	
.galerienavigation li:hover,
	.galerienavigation li:focus {
	transform:scale(1.1); /*war 1.1*/
	transition:all 0.5s ease;
	-webkit-transition:all 0.5s ease;
	text-decoration: none;
	border-style: none;
}
	
.galerienavigation a:active {
	text-decoration: none;
}

/*xxxxxxxxxxx[ ENDE NAVIGATION GALERIESEITE]xxxxxx*/
	
} /*Ende @media - Nicht löschen!*/