/* =================================================

Stylesheet für die Website der Johannes a Lasco Bibliothek

unter "http://www.jalb.de"  

Datei: styles.css

Datum: 03.12.2020

Autor:  Klaus Vogler

================================================== */



@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700);



@media screen {

/* ========================== Layout (Größe und Positionierung) =========================================*/

* {

	box-sizing: border-box;

}

body {

	width: 90%;

	max-width: 1300px;

	margin: 0% auto;

}

.wrap {

	padding: 0 0em;

}

header a {

	color: black;

	text-decoration: none;}

header {
	
/*	background-image: url(../Media/jalb/bg.jpg);*/
	
	padding: 0em 0 4% 0;

	margin-bottom: 1%;
	width:100%;
	height:30%;
	clear:both;

}

#header-title {
	position:absolute;
	z-index:999;
	margin: -2.5em 0 0 0.4%;
	padding: 2%;
	color: #fff;
	font-size: 270%;
	font-weight:800;
	
	

	
	
}


#header-title a {color: white;
}

.header1 {
margin: 0% 0% 3.4% 10%;
padding: 1% 1.5% 2% 1.5%;
font-size:0.8em;
height:2.4em;
	border-bottom: #666666 thin solid;
	
	background-color: rgba(50,67,68,1);
	background-color: #ffffff;
	color:#000000;
	text-transform:uppercase;
	
}
.header1-left {
	
	float:left;	
}
.header1-right {float:right; padding: 0 2% 0 0%; margin: 0; }
.header1-right a {color: #000000;}
.header1-right2 {float:right; padding: 0 0 0 2%; margin: 0.2em 0em 0 3em; height: 2.6em; width: 2.6em;}

.logo {
	background-color: #fff;

	width: 20.0%;

	float: left;
	margin:-4% 0 0% 3.1%;

}

#top a {position:fixed;
padding-left:-6em;
margin-left:-2em;
right: 3em;
bottom:0.5em;
height:1.0em;
width:1.0em;
text-align:center;
font-size:3em;
font-weight:100;

background-color: rgba(153,153,153,0.5);
background-size:90%;
background-repeat:no-repeat;
background-position: center;
color: rgba(51,51,51,0.8);


	max-width: 1300px;

	margin: 0% auto;


	}
	
.top2 {
	position:relative;
	margin-top:-2.5em;
font-size:0.2em;
text-transform:uppercase;
text-align:center;
visibility:collapse;
	
}

.slider {
	z-index:2;
	
	width:100%;
	margin: 0% 0% 0% 0%;
	padding: 0.5% 0% 0% 0%;
	clear:both;
}

.slider a {

	position: absolute;

	top: 0em;

	left: 1em;

	font-size: 30px;

	color: black;

	text-decoration: none;

	padding: 6px;

	background-color: white;

	opacity: 0.6;

}

.slider a:hover {

	color: white;

	text-decoration: none;

	padding: 6px;

	background-color: black;

	opacity: 0.6;

	transition: background-color 0.3s;

}



.welcome {

    padding: 1em 2em;

	margin-bottom: 3%;

}



/* Gestaltung der Featured Artikel auf Startseite oben */

.featured {
	display:block; 
	

	float: left;

	width: 30.3%; 

	margin-right: 3%;

	margin-bottom: 3%;

	text-align: center;

	height: 255px;

	overflow: hidden;

	background: #999999;

}

.kachel {
	display:block;
	visibility:visible;
	padding:0;
	

	float: left;

	width: 32.3%; 

	margin: 0 1% 1% 0;

	text-align: center;

	height: auto;

	overflow: hidden;

	background-color: #7B0011;
	background-color: #CCCCCC;
	background-color:rgba(50,67,68,0.3);
	transition: background-color 0.5s;

}

article.kachel {clear:none;}

.featured p {

	text-align: left;

}

.kachel p a {
	text-align: center;
	font-weight:700;
	font-size: 1em;
	padding:0.5em;
	margin:-0.9em -0.2em;
	color: #fff;
	display:block;

}

.kachel p a:hover {


	color: #fff;
	
	text-decoration:none;
background: rgba(123,0,17,0.7);

display:block;

}

.kalenderliste {
	font-size: 0.85em;
	
	margin-left:4%;
	
	
}





article.featured:last-child {

	float: left;

	width: 31.3%;

	margin-bottom: 3%;

	margin-right: 0;

	text-align: center;

	height: 255px;

	overflow: hidden;

	background: #999999;

}

.readon {

	float: right;

	padding: 0.2em;

	border: 1px solid #555555;

}

/* Ende Gestaltung der Featured Artikel auf Startseite oben */



/* Gestaltung Termine */

#termine h3 {

	margin: 2em 2em 1em 2em;

}

#termine h4 {

	margin: 1em 2em;

}

#kalender {

	float: left;

    background-color: #999999;

    color: #ffffff;

    font-size: 1.5em;

    margin: 0 10px 0 0;

    padding: 5px;

}

#termine article h3 {

	margin-top: 0;

}

#termine article h3, #termine article h4, #termine article h5, #termine article p {

	margin-left: 0px;

}

/* Ende Gestaltung Termine */



/* Bilder mit Bildunterschriften */

figure {

	display: table;

	padding: 10px

}

figcaption {

	display: table-caption;

	caption-side: bottom ;

	text-align: center;

	font-size: 15px;

	font-size:0.9375rem;

	font-weight:700;

}

/* Ende Bilder mit Bildunterschriften */

section.news {

	float: left;

	width: 65.6%;

	margin: 0 3% 3% 0;

}

article {

	padding: 2% 4%;
	

}

article.news {

	margin-bottom: 1em;

}

article.news-sub {
	padding: 0.5em 0;
	margin-bottom: 1em;

}

section.sidebars {
	
}

section.sidebar_right {
	
	font-size:0.9em;

	float: right;
	

	margin: -5% 0 3% 0;
	
	
	padding: 0 3% 0 3%;

}

.sidebar_right article {

	
	margin: 0% 1% 3% 10%;
	text-align:right;
}

section.sidebar_left {

	float: left;

	width: 100%;
	
	margin-top: -8%;
	margin-bottom: 3%;

}

section.sidebar_left2 {

	float: left;
margin-left: 5%;
	width: 100%;
	margin-top: -6%;
	margin-bottom: 3%;

}


section.main {

	float: left; 



	margin: 0% 0 3% 1.5%;

}


section.list {

padding: 0 5% 0 0;

}

section.list h2 {

font-size: 1.2em;
padding-bottom:1em;
margin-bottom: 0.5em;

}

section.list_kachel {
margin: -2.8% -3% 0 0%;	
}

#content_part_liste_utitel {
	font-size:1.05em;
	font-weight:bold;
	padding:0.1em 0 0.2em 0;
}

section.navi_path a {

color: rgba(123,0,17);
}

section.navi_path {
	font-size:0.8em;
	padding:2% 6% 0.5% 4.4%;
	margin-bottom:0.5em;
	
}

.pagefooter {
	
	clear: both;

	

	margin: 3% 0 1% 0;
	

}

.pagefooter a a:visited {

	color: #333333;

}
.pagefooter a:hover, a:focus {
    color: #333333;
	text-decoration: underline;

}	


.footer_menu {

    float: right;

}

address {

	float: left;

	width: 22%;

	
	padding: 2% 0% 2% 4%;
	

	

}


.fa {

	margin-right: 0.7em;

}

.address ul {
	padding-top: 0em;
	margin-top: -0.5em;
}
.transparency2 {

	float: left;

	width: 22%;
	padding: 2% 0% 2% 3%;
	margin-left: 1%;
}

.transparency2 ul {
	padding-top:0em;
	margin-top: 0em;
}
.transparency3 {
	font-size:0.9em;
	float: left;

	width: 28%;
	padding: 2% 2% 2% 3%;
	margin-left: 1%;
}
.transparency3 ul {
	padding-top:0em;
	margin-top: 0em;
}
.transparency {

	float: left;

	width: 22%;
	padding: 2% 0% 2% 3%;
	margin-left: 1%;

	

}
.transparency ul {
	padding-top:0em;
	margin-top: 0em;
}

ul.socialmedia {

	padding-top: 1em;

	margin: 0;

}

ul.socialmedia li {

	float: right;

	margin-left: 2em;

}

ul.data {

	margin-top: 0em;
	

}

ul.data li {

	float: left;

	margin-right: 1em;

}

.copyright {
	background-color:#FFFFFF;


	clear: both;

	padding: 1% 4% 1% 4%;
	margin: 0 0 0 0;

}



/* ========================== Inhalt (Gestaltung einzelner Elemente) =========================================*/

html {

	background-color: #BFBFBF;
	background-color: #E6E6E6;
	background-color:#F6F6F6;
	background-color:#FBFBFB;

	

	-webkit-background-size: cover;

	-moz-background-size: cover;

	-o-background-size: cover;

	background-size: cover;

	
	
	font-family: Cambria, Georgia, serif;
	

	font-size: 100%;

}

body {

	background: rgba(255,255,255,1.0);

	font-size: 16px;

	font-size: 1.30rem;


	color:#1E1E1E;
	color:#333333;

}

.welcome {

	background: rgba(255,255,255,0.8);

}

.welcome h1 {

	

	font-weight:700;

	font-size: 26px;

	font-size: 1.625rem;

	color: rgba(123,0,17);

}

.welcome p {

	font-size: 20px;

	font-size: 1.25rem;

	font-weight: 700;

}

section.news {

	overflow: hidden;

	background: rgba(255,255,255,0.8);

}

section.sidebar_right {
	

	background: rgba(255,255,255,0.8);
	
	
	

}

.sidebar_right h3 {

	color: white;

	padding: 0.4em 0.9em;

	background: rgba(123,0,17);

}

section.sidebar_left {

	background: rgba(255,255,255,0.8);

	padding-top: 0em;

}

section.main {
	

	

}

.main a {

	
	color: #4D60C8;
	color: #7B0011;

	text-decoration: none;

}

.main a:hover, a:focus {

	color: rgba(123,0,17,0.7);
	color: #4D60C8;
	color: #7B0011;

	text-decoration: underline;

}

#content_text2_lead {
	color:#575757;
	color:#4E4E4E;
	color:#333333;
	font-weight:700;
	
	
	
}

#content_text2 {
	line-height:1.4em;
}

#content_middle {
	margin-top:-1%;
	

}
.pagefooter ul {
	padding-top: 0em;
	margin-top: -0.5em;
	list-style-type:none;
	margin-left:-2em;
}

.pagefooter li {
	padding-top: 0.3em;
	
}

.pagefooter {
	font-size:0.9em;
	list-style:none;
	list-style-type:none;
	

background-color:#FBFBFB;
background-color:#E3E3E3;
background-color:#F0F0F0;
background-color:#F4F4F4;
background-color:#F6F6F6;
	
}


address {

	text-align: left;

	font-style: normal;

}

ul.socialmedia li {

	display: inline-block;

}

ul.data li {

	display: inline-block;

}

.copyright a {
color:#333333;
color:#484848;
color:#727272;
	
}

.copyright {
color:#333333;
	
}

h1 {
	font-weight: 600;
	font-size: 32px;
	font-size: 2.9rem;
	color:#1E1E1E;
	color:#333333;
	padding:0em 0 0.2em 0;
	margin:0em 0 0.2em 0;
	
}

h2 {
	font-weight:700;
	font-size: 22px;
	font-size: 1.375rem;
	color: rgba(123,0,17,0.7);
	color:#1E1E1E;
	color:#333333;
}

h3 {
	font-weight:700;
	font-weight: 600;
	font-size: 20px;
	font-size: 1.25rem;
    font-size: 26px;
	font-size: 2rem;
	
	color:#1E1E1E;
	color:#333333;

}

h4 {

	
	

	font-weight:normal;
font-weight:700;
	font-size: 20px;
	font-size: 1.5rem;

	
	color:#333333;
	

}

h5 {

	font-size: 16px;

	font-size: 1rem;

	font-weight: 300;

	margin: -0.8em 0 1em 0;

}

.subtitle {

	float: none;

	font-weight: 600;

	margin-top: -0.5em;

}

img {

	max-width: 100%;

	height: auto;

}

.img_right {

	float: right;

	margin-left: 15px;

}

.img_left {

	float: left;

	margin-right: 15px;

}

img_kachel {
	z-index:-1;
	
}


#content_part_liste_eintrag {
	border-top: 0.5em;
	margin: 0.5em 0 1.5em 0;
	padding: 0 0 1em 0;
	width: 100%;
	float: none;
	clear:both;
	
	
	
	
}

#content_part_liste_eintrag_text_over {
	
}

#content_part_liste_eintrag_bild_over: {
	display:block;	
	
}

#content_part_liste_eintrag_bild_over: hover {
	display:none;
	visibility:hidden;
	
}


#content_part_liste_navi {
margin-left: 0.3em;	

}
.featured #content_part_liste_bild_right {
	float:none;
	width: 100%;
	border-left:1em;
	border-bottom:1em;
	margin-bottom:1em;
	margin-left:1em;
	
}

#content_part_liste_bild_right {
	float:right;
	width: 33%;
	border-left:1em;
	border-bottom:1em;
	margin-bottom:1em;
	margin-left:1em;
	
}
.featured #content_part_liste_bild_left {
	float:none;
	width: 100%;
	border-right:1em;
	border-bottom:1em;
	margin-right:1em;
	margin-bottom:1em;
	
}
#content_part_liste_bild_left {
	float:left;
	width: 34%;
	border-right:1em;
	border-bottom:1em;
	margin-right:2em;
	margin-bottom:1em;
	padding-right:3%;
	padding-bottom:2%;
	
	
	
}

.kalenderliste #content_part_liste_bild_left {
	width:50%;
	border-right:0em;
	border-bottom:0em;
	padding:0;
	margin:-2% 2% 0% -2%;
	float:left;
	
	
	
}

.listaktuell {
	
	margin-top:0em;	
}
.aktuellliste {
	
border-top: #D5D5D5 thin solid;
	border-bottom: #D5D5D5 thin solid;
}

.aktuellliste:first-of-type { 
	min-height: 350px;
	clear:both;
	margin-right:0%;
	
}



.aktuellliste #content_part_liste_bild_left {
	
	width:50%;
	border-right:0em;
	border-bottom:0em;
	padding:0;
	margin:0% 2% -2% -2%;
	z-index:1;
	
}



.aktuellliste #content_part_liste_eintrag {
	display:grid; 
	gird-template-columns: 2;
	gird-template-rows: 6;
	display: -ms-grid;
	-ms-grid-columns: 50% 50%; 
	
	
	clear:both;	
}

.aktuellliste #content_part_liste_bild_left {float: none; width: 80%; order: 1; grid-row: 1 / 6; grid-column:1; grid-row-span: 6; -ms-grid-row:1; -ms-grid-column:1; -ms-grid-row-span: 5; }

.aktuellliste #content_part_liste_titel_u {display:grid; row:3; column:1; grid-row: 2; grid-column:2; }
.aktuellliste h3 {grid-row: 2; grid-column:1;  font-size: 1.2em; color: #333333 padding:0;margin:0;}
.aktuellliste #content_part_liste_utitel {grid-row: 3; grid-column:1;}
.aktuellliste #content_part_liste_utitel2 {grid-row: 1; grid-column:1; font-weight: bold; font-size: 1.6em; margin-bottom:0.5em;}

.aktuellliste #content_part_liste_inhalt {display:flex; order: 5; grid-row: 4; grid-column:2; font-weight: bold; font-size: 1.1em;}
.aktuellliste #content_part_liste_inhalt2 {display:flex; order: 6; grid-row: 5; grid-column:2; }




.aktuellliste a a:visited h3 {color: #333333; text-decoration: none;}
.aktuellliste a:hover, a:focus {color: #333333; text-decoration: underline;}
.aktuellliste {
	
	font-size: 0.85em;
	
}

.archivliste #content_part_liste_bild_left {
	visibility:none;
	width:0%;
	border-right:0em;
	border-bottom:0em;
	padding:0;
	margin:-2% 2% -2% -2%;
	z-index:1;
	
}

.archivliste h3 {font-size: 1.1em; color: #333333 padding:0;margin:0;}
.archivliste a, a:visited h3 {color: #333333; text-decoration: none;}
.archivliste a:hover, a:focus {color: #333333; text-decoration: underline;}
.archivliste #content_part_liste_titel_u {margin-right: 0%; top: 0%; width:75%; float:right; position:relative;}
.archivliste #content_part_liste_utitel {font-weight:500; padding-right:0em;}
.archivliste #content_part_liste_utitel2 {font-weight: bold; font-size:1.1em}
.archivliste #content_part_liste_inhalt {padding-right: 3%; width:23%; float:right; position:relative; display: block; font-weight: bold; font-size: 1.1em;}
.archivliste #content_part_liste_inhalt2 {padding-right: 0%; width:0%; float:right; position:relative; display: none;}
.archivliste #content_part_liste_eintrag {border-top:#D5D5D5 thin solid; padding: 0.5em 0;}
.archivliste {font-size: 0.85em;}

article.kalenderliste #content_part_liste_eintrag {
	
	margin:-2% 0% -2% -4%; padding:-2% 0% -2% -2%;
	height:auto;
	clear:both;
	overflow:auto;
	
	

	
}
.kalenderliste h3 {font-size: 1.1em; padding:0 0 0 0; margin:0em;}
.kalenderliste #content_part_liste_bild_left {padding:0; left:0%; width:50%; height:12em; overflow:hidden; float:left; position: relative;}
.kalenderliste #img_left {float:left;}
.kalenderliste #img_left { width:100%; height:6em; overflow:hidden;}
.kalenderliste #content_part_liste_titel_u {margin-right: 0%; top: 0%; width:50%; float:right; position:relative;}
.kalenderliste #content_part_liste_titel {}
.kalenderliste #content_part_liste_utitel {font-weight:500; padding-right:0em;}
.kalenderliste #content_part_liste_utitel2 {font-weight: bold; font-size:1.1em; padding-top:0.4em;}
.kalenderliste #content_part_liste_inhalt {padding-right: 3%; width:23%; float:right; position:relative; display: block; font-weight: bold; font-size: 1.1em;}
.kalenderliste #content_part_liste_inhalt2 {padding-right: 3%; width:23%; float:right; position:relative; display: block;}
.kalenderliste h3 {font-size: 1.1em; color: #333333 padding:0;margin:0;}
.kalenderliste a {color: #333333; text-decoration: none;}
.kalenderliste a:visited {color: #333333; text-decoration: none;}

.kalenderliste a:hover, a:focus {color: #333333; text-decoration: underline;}

article h3 a:visited, article h3 a {

	color: rgba(123,0,17,0.7);

	text-decoration: none;

}

article h3 a:hover, article h3 a:focus {

	color: rgba(123,0,17,0.7);

	text-decoration: underline;

}
article .aktuellliste {overflow:auto; background-color:}
article.kalenderliste:first-of-type {clear:both; height:auto; bottom:0; margin-bottom:2%; padding-top:4%; border-bottom: rgba(66,66,66,0.2) thin solid; border-top: rgba(66,66,66,0.2) thin solid;}
article.kalenderliste {clear:both; height:auto; bottom:0; margin-bottom:2%; border-bottom: rgba(66,66,66,0.2) thin solid;}

.sidebar_right h3 a:hover, .sidebar_right h3 a:focus {

	color: #ffffff;	

	text-decoration: underline;

}

.sidebar_right h3 a, .sidebar_right h3 a:visited {

	color: #ffffff;	

}

a {

	color:#7B0011;
color: #4D60C8;
color: #29487C;
color: #0061CD;
	text-decoration: none;

}

a:hover, a:focus {
	color: #7B0011;
	color: rgba(123,0,17,0.7);
color: #4D60C8;
color: #29487C;
color: #0061CD;
	text-decoration: underline;

}

.pagefooter, a {color: #A0A0A0;
color:#8B8B8B;}
.pagefooter h4 {
	margin:0.1em 0 0.1em 0;
color:#8B8B8B;}


.kachel h3 {
	
	font-stretch: extra-expanded;
	font-size: 1.45rem;
	font-weight:400;
	
}

.kachel h3 a:hover a:focus.kachel h3 a {
	
	
}

/*--------Start-ToggleBox-------*/
.toggleBox {
    position: relative;
	border-bottom: 1px solid #ddd;
}
/* Ausblenden des input-Feldes */
.toggleBox input {
    position: absolute;
    left: -99999px;
	border-bottom: 1px solid #ddd;
}
 
/* Gestaltung der labels */
.toggleBox label {
    display: block;
    cursor: pointer;
}
.toggleBox label:hover {  
}
 
/* Der Aufklappmechanismus */
.toggleBox input:not(:checked) ~ div {
    opacity: 0;
    height: 0;
}
toggleBoxPfeil+  {   float: right; font-size: 1.em; color: #808080;background-image:url(../Media/jalb/pfeil+.png);
	background-position:right;
	background-position:top right;
	background-repeat:no-repeat;    }
toggleBoxPfeil- {   float: right;font-size: 1.em; color: #BFBFBF;background-image:url(../Media/jalb/pfeil-.png);
	background-position:right;
	background-position:top right;
	background-repeat:no-repeat;    }
.toggleBox input:checked ~ div {
    opacity: 1;
	-webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -ms-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}
/* Steuerung der Sichtbarkeit der labels */
.toggleBox input:not(:checked) ~ .close,
.toggleBox input:checked ~ .open {
    display: none;
}

/*--------Ende-ToggleBox-------*/

#akk:not(:target) .akkinhalt,
#akk:not(:target) .akkhide,
#akk:target .akkshow {display: none;}
#akk:target .akkinhalt {display: block;}

.akkinhalt {
box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);
padding: 20px 20px 1px;
margin: 0px 0px 10px;
}

.akkshow,
.akkhide {
padding:10px;
background: rgb(255, 255, 255);
box-shadow:none!important;
color:#fff;
font-weight:bold;
border-top: #010101 dotted thin;
}

.akkshow:hover,
.akkhide:hover {
background: rgb(255, 214, 118);
color:#fff!important;
transition:0.2s all ease-in-out!important;
}

/*--------Accordion-------*/

.accordion h6{
  color:#fff;
  text-align:center;
  font-weight: 300;
} 

.accordion_end {
  width: 100%;
  margin: auto;
    height: 30px;
}

.accordion {
	
  width: 100%;
  margin: auto;
    height: auto;
}
.accordion .panel {
	
  width: 98%;
  width: calc(100% - 20px);
  margin: 0 auto;
  height: 0;
  overflow:hidden;
  color: rgba(0, 0, 0, 0);
  background-color: hsla(0,0%,100%,0);
  line-height: 28px;
  padding: 0 20px;
  box-sizing: border-box;
  transition: 0.5s;
}

.accordion_end .panel {
	
  width: 98%;
  width: calc(100% - 20px);
  margin: 0 auto;
  height: 0;
  overflow:hidden;
  color: rgba(0, 0, 0, 0);
  background-color: hsla(0,0%,100%,0);
  line-height: 28px;
  padding: 0 20px;
  box-sizing: border-box;
  transition: 0.5s;
}


.accordion label {
  cursor: pointer;
  font-size:1.2em;
  display: block;
  padding: 15px;
  width: 100%;
  
  border-bottom: #BFBFBF solid thin;


 

  font-weight: 500;
  box-sizing: border-box;
  z-index: 100;
}

.accordion_end label {
  cursor: pointer;
  
  display: block;
  padding: 15px;
  width: 100%;
  
  font-weight: 400;
  box-sizing: border-box;
  z-index: 100;
  border:none;
  
}


.accordion input{
  display: none;
}

.accordion_end input{
  display: none;
}

.accordion input:checked+label {
  background-color: hsla(200,80%,50%,0.9);
  background-color: #fff;
}

.accordion_end input:checked+label {
  background-color: hsla(200,80%,50%,0.9);
  background-color: #fff;
}

.accordion input:checked+label:before {
  transition: 0.5s;
}

.accordion input:checked~.panel {
  height: auto;
  color: #333;
 
  padding: 20px;
  transition: 0.5s;
}
.accordion label:after  { content: " ∨ ";  float: right; vertical-align:text-top; font-size: 0.8em; color: #808080;}
.accordion_end label:after  { content: "  ";  float: right; font-size: 1.em; color: #808080;}
.accordion input:checked+label:after { content: "  ";  float: right;font-size: 1.em; color: #BFBFBF;}

#suchfeld {
	width: 100%;
	font-size: 1.2em;
	transition: width 0.5s ease-in-out;
}
#suche {
	padding:0.5em 0.5em 0.5em 0.5em;
	width: 70%;
	border: 2px solid #999;
	
	font-size: 1.2em;
	
	transition: width 0.5s ease-in-out;
}
#suche_lupe {
	padding:0.5em 0.5em 0.5em 0.5em;
	border: 2px solid #999;
	background-color:rgba(102,102,102,1);
	color:rgba(255,255,255,1);
	
	font-size: 1.2em;
	transition: width 0.5s ease-in-out;
}

	

/* ========================== Navigation =========================================*/



/*Navigation Menü oben*/
nav {
float: right;
width:75%;
margin-right:1%;


	

}


nav ul {

	padding: 0;

	margin: 0;

	float: right;

}

nav li {
	

	display: inline-block;

	position:relative;

	padding: 0.9em 0.6em;

	margin: 0;

	list-style-type: none;

	

	font-size: 0.97em;

	font-weight: 200;

	color: #333;
	color: #1E1E1E;

	

	transition: background-color 0.3s;

	background: #aaa;
	background: #fff;

}

nav li a {

	color: #333;
color: #1E1E1E;	text-decoration: none;

}

nav li.active {

	color: white;
	
	color: #7B0011;

	
	background: #fff;

}

nav li.active_devider {

	color: white;

	background: rgba(123,0,17,1);
	background: #7B0011;

}

nav li.active a {

	color: white;
	color: rgba(123,0,17,1);
	color: #7B0011;
	font-weight:700;

	text-decoration: none;

}

nav li:hover, nav li:focus {

	color: white;

	background: rgba(123,0,17,1);
	background: #7B0011;

}

nav li:hover a, nav li:focus a {

	color: white;

	text-decoration: none;
	 
}



/* Navigation Menü oben Dropdown*/ 

nav ul.submenu li {
	
	color:#000000;
	
	
	background: rgba(102,102,102,0.7);
	

	clear: both;

	padding: 0.5em 1em 0.5em 1em;
	
	

}

nav li:hover ul.submenu {
	
	display: block;

	background: rgba(153,153,153,0.7);

	z-index: 10;
	-webkit-box-shadow: 10px 10px 10px  #1E1E1E;
-moz-box-shadow: 10px 10px 10px #1E1E1E;
box-shadow: 10px 10px 10px #1E1E1E;
	

}

nav ul.submenu {
	
	position: absolute;

	top: 2.8em;

	left: 0;

	display:none;

	

}

nav ul.submenu li {
	color:#000000;

	
	width: 100%;
	

}

nav ul.submenu li:hover, nav ul.submenu li:focus {

	background: rgba(123,0,17);
	background: #7B0011;
	

}




.slicknav_menu {

	display: none;

}





/*Navigation Menü links*/

ul.menu_left  {

	padding: 0;

	margin: 0;

	float: none;

}

.menu_left li {

	display: block;

	position:relative;

	padding: 0.5em 1em;

	margin-bottom: 0.15em;

	list-style-type: none;

	font-size: 0.94em;

	font-weight: none;
	
	color: #404040;

	

	transition: background-color 0.3s;

	background: #fff;
	border-bottom:#333333 thin dotted;



}

.menu_left li a {

	color: #333;

	text-decoration: none;

}

.menu_left li:hover, nav li:focus {

	color: white;

	background: rgba(123,0,17);
		background: rgba(255,255,255);


}

.menu_left li:hover a, nav li:focus a {

	color: rgba(123,0,17);
	color: #000;
	font-weight:700;

	text-decoration: none;

}

.menu_left li.active {
	color: white;
	

	background: rgba(255,255,255);

}

.menu_left li.active a {

	color: rgba(123,0,17);
	color: #000;
	font-weight:700;

	text-decoration: none;

}

.menu_left_submenu li {
    
	font-size: 0.9em;
	
	

	text-transform: none;

	text-align: right;
	margin-left: 1em;
	padding-left:1em;

}

.menu_left li.submenu a {
   
	font-size: 0.9em;
	
	

	text-transform: none;

	text-align: right;
	margin-left: 1em;
	padding-left:1em;

}

.menu_left_submenu li.active a {
	

	
	

	text-transform: none;

	text-align: right;
	margin-left: 1em;
	padding-left:1em;

}

/*Navigation Menü Soziale Netzwerke*/

#soziale-netzwerke {

	overflow: hidden;

	background-color: #aaa;

	padding: 0 2% 2% 2%;

	margin: 3em 0 1em 0;

}

#soziales-netz ul {

	float: left;

}

#soziales-netz li {

	list-style-type:none;

	display: inline-block;

	float: right;

	margin-left: 20px;

}


.marker {
	border: 2px solid #999;
	padding:0.3em;
}

.marker_kasten a {
	margin:0.2em 0.5em 0.2em 0em;
	background-color: #C0C0C0;
	background-color:#818181;
	color: #FFF;
	padding:0.2em 0.5em 0.2em 0.5em;
}

.marker_kasten2 {
	margin:0.5em 0.2em 0.5em 0.2em;
	padding:0.7em;
	
	background-color: rgba(24,24,24,0.75);
	color: #ffffff;
}



.marker_kasten3 a {
	display:inline-block;
	margin:0.5em 0.2em 0.5em 0.2em;
	padding:0.7em;
	background:rgba(108,108,108,1);
	background:rgba(0,153,255,1);
	color: #ffffff;
}

.marker_kasten3 a:hover span {
	
	display:block;
	background: #990033;
	color: #990033;
	color:rgba(0,204,102,1);
}

.marker_kasten3 {
	display:inline-block;
	margin:0.5em 0.2em 0.5em 0.2em;
	padding:0.7em;
	background:rgba(108,108,108,1);
	
	
	color: #ffffff;
}

.flex-container {
  display:flex;
  
  
  
}
.flex-item-1 { 
flex-basis:33%;

  order: 2;
}

.flex-item-2 { 
flex-basis:64%;

  flex: 1;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: white;
  background-color: rgba(204,204,204,1);
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: white;
  background-color: rgba(204,204,204,1);
}

::-ms-input-placeholder { /* Microsoft Edge */
   color: white;
  background-color: rgba(204,204,204,1);
}


}











@media only screen and (min-width: 790px) and (max-width: 1100px){

body {

	width: 95%;

	font-size:15px;

	font-size:0.9375rem;

}

.wrap {

	padding: 0 0em;

}

.welcome {

    padding: 1em 1em;

	margin-bottom: 3%;

}



main {

	line-height: 1.6;

}

article {

	padding: 1em;

}

article.left {

	margin-bottom: 1em;

}

.pageheader {

	padding: 0.25em 0;

}

.slider {
	margin-top: 0em;
	margin-bottom: 1em;

}

.left {

	width: 65%;

}

.aside {

	width: 30%;

	padding-left: 15px;

	margin-bottom: 15px;

}

h2 {

	font-size: 20px;

	font-size: 1.25rem;

}

h3 {

	font-size: 18px;

	font-size: 1.125rem;

}

nav {
float: right;

width:62%;
	

}

nav li {

	font-size: 0.85em;

	padding: 0.7em 0.5em;

	color: white;
	

}

nav ul.submenu {

	position: absolute;

	top: 2.7em;

	left: 0;

	display:none;

	text-align: center;

}

#nav li:hover ul.level2 {

	margin-left: -0.5em;

}

.footer_menu {

	float: none;

	margin-bottom: 10px;

	text-align: center;

}

#header-title {
	margin: -4em 0 0 0%;
	font-size: 200%; 
	

	
	
}


}





 @media screen and (min-width: 280px) and (max-width: 789px) {

html {

	
	

	font-size: 70%;

}
body {

	width: 96%;



}

.wrap {

	padding: 0 0.5em;

}

.welcome {

    padding: 0.5em 0.5em;

	margin-bottom: 3%;

}

#content_right {
	display:none;
	visibility:collapse;
	
}

article {

	padding: 0.5em;

}

/* Featured Artikel */

.featured {
	
	

	float: none;

	width: 100%; 

	margin-right: 0;

	margin-bottom: 2%;

}

article.featured:last-child {

	float: none;

	width: 100%; 

	margin-right: 0;

	margin-bottom: 2%;

}

/* Sections untereinander */

section.news {

	float: none;

	width: 100%;

	margin: 0 3% 3% 0;

}

/* Sections Kachel */

section.kachel {

	float: left;

	width: 30%;

	margin: 0 3% 3% 0;

}

section.sidebar_right {

	float: none;

	width: 100%;

	margin-bottom: 2%;
	border:none;
	border-top: #999999 thin solid;

}

section.sidebar_left {

	float: none;

	width: 100%;

	margin-bottom: 2%;

}

section.main {

	float: none;

	width: 100%;

	margin: 0 0 3% 0;

}



/* Navigation und Kopfbereich */

#nav {

	display:none;

}

	

.slicknav_menu {
	position:fixed;
	top: 0px; 
	right: 0px;
	z-index: 999;
	

	display:block;
	margin: 0 0 0 35%; 
	

}

.slicknav_btn {
	

  background-color:  rgba(123,0,17) }
  .slicknav_nav a:hover {

      background: rgba(123,0,17);
  }
    .slicknav_nav a {
color: rgba(255,255,255,1);
      background: #fff;
	  background: rgba(102,102,102,1);}

slicknav_nav ul {

   
    margin: 0 0 0 30%; }

.logo {

	position: absolute;
	width:30%;
	padding-left:1%;
	margin-top:0%;
	top: 15px;

}

header {
	height: 3em;
	

	

	margin-bottom: 0;

	padding: 0 0 0% 0%;
	font-size:0.9em;

}
.header1 {
margin: 12% 0 2% 0;
padding: 1% 1.5% 4% 1.5%;

}

#header-title {
	margin: -2em 0 0 0%;
	font-size: 200%; 
	

	
	
}

.slider {
	margin-top: 0%;
	margin-bottom: 0em;

}

address {

    float: none;

	width: 100%;

	margin-right: 0;

	margin-bottom: 30px;

	border-right: none;

	text-align: left;

}

.transparency {

    float: none;

	width: 100%;

	margin-right: 0;

	border-right: none;

	margin-bottom: 30px;

	text-align: left;

}

.transparency2 {

    float: none;

	width: 100%;

	margin-right: 0;

	border-right: none;

	margin-bottom: 30px;

	text-align: left;

}

.transparency3 {

    float: none;

	width: 100%;

	margin-right: 0;

	border-right: none;

	margin-bottom: 30px;

	text-align: left;

}

.footer_menu {

    float: none;

	width: 100%;

	margin-right: 0;

	margin-bottom: 0px;

	border-right: none;

	text-align: center;

}

ul.socialmedia li {

	float: none;

	margin-left: 2em;

	text-align: center;

}

ul.socialmedia li:first-child {

	margin-left: 0;

}

ul.data {

	margin-top: 0em;
	margin-left:0em;
	padding-left:0em;

}

ul.data li {

	float: none;

	margin-left: 0.6em;

}




.flex-container {
  display:flex;
  flex-direction: column;
}
.flex-item-1 { 
flex-basis:100%;

  order: 2;
}

.flex-item-2 { 
flex-basis:100%;

  flex: 1;
}













#content_part_liste_bild_left {
	
	float:left;	
	margin: 0 10px 10px 0;
}

#content_part_liste_bild_right {
	
	float:right;
	margin: 0  0 10px 10px ;
}


#content_part_liste_eintrag {
	margin: 10px 0 30px 0;
	min-height:140px;
}

#side {
	top: -20px;
	margin-top: -40px;
	}







}

















 @media print {

* {

	color:#000 !important;

	box-shadow:none !important;

	text-shadow:none !important;

	background:transparent !important;
	

}

html {

	background-color:#fff;
	margin: 3em;
	font-size: 0.8em
	

}

a {text-decoration:none;}

ul li {list-style:none; margin:0; padding:0;}

nav {

	display:none;

}



figure {

	margin-bottom:1em;

	overflow:hidden;

}

figure img {

	border:1px solid #000;

}

.header1 {visibility:hidden; display:none}
.logo {
	background-color: #fff;
width: 20.0%;


}
.logo a {visibility: none}
section.sidebar_right {visibility:hidden; display:none}
.flex-container {
  display:flex;
  flex-direction: column;
}
.flex-item-1 {visibility:hidden; display:none}
section.sidebars {visibility:hidden}
section.navi_path {visibility:hidden; display:none}
header-title {margin-left: 30%; color:#333333; font-size:2em;}
.slider {visibility:hidden; display:none}
.navi_path {visibility:hidden}
.lmenue {visibility:hidden}
.nav {visibility:hidden}
.slicknav_menu {visibility:hidden; display:none}
.main {margin-top: 0em;}

.kalenderliste #content_part_liste_bild_left {
	width:0%;
	float:left;
	visibility:hidden;
		
}

.pagefooter {
	
	clear: both;
background-color: #F3F3F3;
	margin: 1% 0 1% 0;
	border-top:thin solid #808080;
	border-bottom:thin solid #808080;
	list-style:none;
	font-size:0.9em;
}

.pagefooter ul {margin-left: 0; padding-left: 0}


.pagefooter a:hover, a:focus {
	

	text-decoration: underline;

}	


.footer_menu {

    float: right;

}


address {

	float: left;

	width: 15%;
	
	list-style-position:outside;
	
	font-style:normal;
	

}
.address ul {padding-left: 0}

.fa {
list-style:none;
	margin-right: 0.7em;

}



.transparency {
list-style:none;
	float: left;

	width: 17%;
	padding: 0.1% 0% 2% 1%;
	margin-left: 1%;

	

}

.transparency2 {
list-style:none;
text-align:left;
	
float: left;
	width: 17%;
	padding: 0.1% 0% 2% 1%;
	margin-left: 1%;

	

}

.transparency3 {
list-style:none;
float: left;
	
	width: 17%;
	padding: 0.1% 2% 2% 1%;
	
	margin-right:1%;

}

.copyright {
	background-color:#FFFFFF;
list-style:none;
float:right;
width: 17%;


	padding: 0.1% 4% 2% 4%;
	margin: 0 0 0 0;

}