body, html { width: 100%; height: 100%; margin: 0; padding: 0; font-size: 10px; font-weight: 100; letter-spacing: .05em; font-family: helvetica, arial, times; color: rgba(0,114,152,1); }



/** Positionierungen **/
.fl { float: left; }
.fr { float: right; }
.pf { position: fixed; }
.pr { position: relative; }
.pa { position: absolute; }
.pt0 { top: 0; }
.pb0 { bottom: 0; }
.pl0 { left: 0; }
.pr0 { right: 0; }
.full { width: 100%; }



/** z-index **/
#resButton { z-index: 100; }
#resTopDown, #resRightLeft { z-index: 80; }
header, .glassuche { z-index: 60; }
figure { z-index: 40; }
#GaleriePrev, #GalerieNext { z-index: 10; }



/** Schriften **/
h1 { font-size: 5em; font-weight: bold; line-height: 1.1em; padding: 0; margin: 0 0 .5em 0; }
h2 { font-size: 3em; line-height: 1.2em; padding: 0; margin: 0 0 .6em 0; }
h3, header ul { font-size: 2em; line-height: 1em; padding: 0; margin: 0; }
header ul ul { font-size: .8em; }
footer ul ul, .filter .suche input { font-size: 1em; }
p, ul, input, textarea, button, footer ul, .filter ul, .glassuche, label { font-size: 1.6em; line-height: 1.4em; }
.kachel .detailLink strong { font-size: 2em; }
.kachel .detailLink { font-size: .6em; }
a { text-decoration: none; border: none; outline: none !important; }
p a, #filterErgebniss span { font-weight: 600; }



/** Responsive Menü Button **/
#resButton { display: none; padding-top: 12px; right: 5%; }
#resButton div { width: 20px; height: 2px; background: #fff; margin: 5px auto; }



/** Backgrounds **/
input, textarea, .weis, a.button:hover, #filterErgebniss span:hover { background-color: rgba(255,255,255,1); }
button { background-color: #ADE; }
button:hover { background-color: #004861; }
.grau, .filter ul { background-color: #E6E6E6; }
header, .glassuche { background-color: rgba(0,114,152,.6); }
header.aktiv, .glassuche.aktiv, footer, .timeline .trenner > div, a.kachel:hover > div, .kachel:hover .detailLink, a.button { background-color: rgba(0,114,152,1); }
figure > div, .kachel .detailLink, .kachel > div { background-color: rgba(255,255,255,.7); }
figure, figure #wm_bildwechsel > div, .kachel { 
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		-webkit-transform: translateZ(0); 
		-moz-transform: translateZ(0); 
		-o-transform: translateZ(0); 
		transform: translateZ(0);; background-position: center; background-repeat: no-repeat; }



/** color **/
input, textarea, button, .kachel, .kachel a, .filter a, p a, a.button:hover, #filterErgebniss span:hover a { color: rgba(0,114,152,1); }
.mainMenue li.aktiv > a, 
.mainMenue li:hover > a, 
.mainMenue ul li.aktiv > ul li.aktiv a,
footer a:hover { color: #333;  }
.mainMenue a, #scrollButton, footer, header ul li.aktiv > ul li a, .glassuche, footer p a, a.kachel:hover > div, .kachel:hover .detailLink, button:hover, a.button { color: #fff; }



.c_12 { width: 80%; }
.c_12 .g_3.width { width: 73%; }
.column {  -webkit-column-count: 2; -moz-column-count: 2; -o-column-count: 2; column-count: 2; -webkit-column-gap: 3em; -moz-column-gap: 3em; -o-column-gap: 3em; column-gap: 3em; }
a.button { display: inline-block; border: 1px solid rgba(0,114,152,1); padding: .2em 1em; margin-top: 1em; }
a.button:hover { border-color: rgba(0,114,152,1); }



header, .headerSpacer { min-height: 8.3em; }
header a.logo { height: 4em; width: 11.1em; margin-top: 2em; float: left; border: none !important; }
header ul { margin-top: 1.1em; float: right; position: relative; }
header ul li { display: inline-block; padding-bottom: .1em; }
header ul li a { text-decoration: none; padding: .1em 1.5em; }
header ul li.aktiv > ul li.aktiv a { box-shadow: none }
header ul li.aktiv > ul { display: block; }
header ul ul { display: none; position: absolute; left: 0; width: 100%; margin-top: 0.25em; margin-left: 1.2em; }
header ul ul li a { text-decoration: none; padding: 0 .7em; }
header .footerIn { display: none; }



.glassuche { position: fixed; right: 0; top: 7em; padding: 0.5em 1em; }
.glassuche img { display: block; width: 4em; height: auto; margin: .5em auto; }



.filter > div { position: relative; float: left; width: 40%; margin: 3em 10% 0 0; }
#containerResult { position: absolute; width: 41%; margin: 0; padding: 0 10%; background-color: #F1F1F1; z-index: 1; right: 16%; }
#containerResult div:first-child { margin-top: 2em; }
#containerResult div:last-child { margin-bottom: 2em; }    
    
   
    
.filter .suche { border-bottom: 1px solid rgba(0,114,152,1); width: 90%; background: url(/res/img/svg/suche.svg) no-repeat right; background-size: 1em 1em; }
.filter .suche span { display: inline-block; width: 25%; }
.filter .suche input { display: inline; border: none; float: none; width: 63%; line-height: 1em; padding: .5em 2%; outline: 0; }
.filter .button { display: block; border-bottom: 1px solid rgba(0,114,152,1); background: url(/res/img/svg/open.svg) no-repeat right; background-size: 1em 2em; padding-bottom: .5em; }
.filter ul { height: 0; overflow: hidden; position: absolute; z-index: 10; width: calc(100% - 2em); padding: 0em 1em; }
.filter ul li { display: block; line-height: 1.6em; }
.filter div > ul.aktiv { height: 200px; overflow-y: scroll; padding: 1em; }
.filter li:hover, .filter .button { cursor: pointer; }


#filterErgebniss { border-bottom: 1px solid rgba(0,114,152,1); padding-bottom: .5em; }
#filterErgebniss span { border: 1px solid #fff; font-size: 60%; background-color: rgba(0,114,152,1); padding: .2em 1em; float: right; }
#filterErgebniss span a { color: #fff; }
#filterErgebniss span:hover { border: 1px solid rgba(0,114,152,1); }

.katContainer { padding: 4em 0; }
.katContainer h3 { padding-bottom: 1em; }



figure { position: relative; }
figure .intro { position: relative; width: 50%; padding: 1.5% 5% 1.5% 10.5%; top: 50%; box-shadow: #000 0px 8px 75px 5px; }
figure .intro.startseite { top: 20%; background: transparent; box-shadow: none; color: #fff; }
figure.fullsize { height: 100%; }
figure img { position: absolute; bottom: 0; width: 100%; height: auto; }
figure #scrollButton { background: transparent; position: absolute; bottom: 1.5em; left: 50%; padding: 0; text-align: center; margin-left: -1.5em; }
figure #scrollButton:hover { cursor: pointer; }
figure #scrollButton img { display: block; position: initial; width: 3em; height: 1.6em; margin: 2em auto 0 auto; border-bottom: none; }
#headerBild h1 { margin-bottom: 0.2em; }
#GaleriePrev, #GalerieNext { position: absolute; height: 100%; width: 30%; background: transparent; }
#GaleriePrev:hover, #GalerieNext:hover { cursor: pointer; }
#GaleriePrev { left: 0; }
#GalerieNext { right: 0; }
#GaleriePrev img { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); height: 5em; width: 5em; top: 50%; left: 3%; }
#GalerieNext img { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); height: 5em; width: 5em; top: 50%; right: 3%; }



article { padding: 6em 0 4em 0; }
.Trenner { border-bottom: 1px solid rgba(0,114,152,1); height: 2em; visibility: inherit; width: 100%; margin-bottom: 4em; }



.kachelHeadline { margin-bottom: 1.5em;}
.kachel { overflow: hidden; margin-bottom: 2em !important; }
.kachel .detailLink { display: block; width: 75%; min-height: 30%; margin-top: 35%; box-shadow: #000 0px 8px 75px 5px; }
.kachel span { padding: 1em 2em; line-height: 1.6em; display: inline-block; }
.kachel span span { padding: 0; }
.kachel .lightbox { position: absolute; padding: 1em 0 0 1em; width: 2em; height: 2em; }
.kachel > a:hover { cursor: pointer; }
.kachel.width .lightbox,
.kachel.width .detailLink { display: none; }
.kachel > div { width: 75%; margin-top: 35%; box-shadow: #000 0px 8px 75px 5px; }
.kachel.bgGross { background-size: initial; background-size: 130%; }

.mitarbeiter img { width: 100%; }
.mitarbeiter p { padding: .5em 0 2em 0;}
.mitarbeiter .kachel { margin-bottom: 0 !important; }

.timeline { padding: 6em 0; }
.timeline .trenner { width: 16%; height: 1px; background-color: rgba(0,114,152,1); }
.timeline .trenner > div { position: absolute; margin: -4px 0 0 -5px; width: 10px; height: 10px; border-radius: 5px; }
.timeline article { border-left: 1px solid rgba(0,114,152,1); padding: 2em 0 6em 0;  }
.timeline article { padding-left: 6%;}
.timeline article img { width: 75%; margin-top: 2em; } 
.timelineNav { -webkit-transition: top 0.3s linear;
		-moz-transition: top 0.3s linear;
		-o-transition: top 0.3s linear;
		transition: top 0.3s linear}
.timelineNav.fix { position: fixed; top: 7em; }
.timelineNav li { border-left: 8px solid rgb(202,225,232); margin-bottom: .5em; }
.timelineNav li.aktiv { border-color: rgba(0,114,152,1); }
.timelineNav li:hover { border-color: rgba(0,114,152,1) !important; }
.timelineNav a { color: rgba(0,114,152,1); padding: 0 1em; }

.anker { height: 15em; margin-top: -15em; }

.anfahrt { width: 80%; }

footer { padding: 4em 0; }
footer a { text-decoration: none; }
footer ul ul { display: none; }
footer ul li.aktiv > ul { display: block; margin-left: .5em; }
footer .footerIn { display: block; }


fieldset { border: none; padding: 0; margin:0; }
input, textarea { border: none; width: 90%; padding: .5em 5%; margin-bottom: .5em; }
textarea { height: 10em; resize: vertical; }
button { border: none; width: 50%; padding: .5em 0; }
label { display: none; }



@media screen and (min-width: 1000px) {
	a.kachel:hover { -webkit-transform: scale(1.03); -moz-transform: scale(1.03); -o-transform: scale(1.03); transform: scale(1.03); }
}



@media screen and (max-width: 1400px) {
	.intro { font-size: 90%; }	
    footer .c_12 .g_3,
    footer .c_12 .g_4 { width: 31.3333%; left: 0; }
    .fullWidth { width: 98% !important; }
    .filter div { position: initial; float: none; width: 90%; margin: 3em 0 0 0; }
}

@media screen and (max-width: 1200px) {
	.intro { font-size: 70%; }
	.kachel span { padding: .5em 1em; }
}

@media screen and (max-width: 1100px) {
    .filter .suche span { width: 28%; }
    .filter .suche input { width: 60%; }
}

@media screen and (max-width: 1000px) {
	.intro { font-size: 60%; }
	h1 { font-size: 4em; }
	header ul { font-size: 1.8em; margin-top: 2em; }	
    .g_3.kachel,
    .g_4.kachel,
    .g_4.mitarbeiter { width: 48%; }
    .kachel span { padding: 1.5em 2em; }
    footer .c_12 .g_3 { width: 98%; }
    footer .c_12 .g_4 { width: 98%;  margin-top: 8em; }
}

@media screen and (max-width: 800px) {
	body { font-size: 8px; }
	h1 { font-size: 3em; }
    h2 { font-size: 2em; font-weight: bold; }
    .intro { font-size: 100%; }
    .intro h2 { font-size: 1.4em; }
    .column {  -webkit-column-count: 1; -moz-column-count: 1; -o-column-count: 1; column-count: 1; }
	.c_12 { width: 90%; }
	#resButton { display: block; padding-top: 8px; }
    header { background-color: rgba(0,114,152,1); }
    header, .headerSpacer { min-height: 5.3em; }	
    header nav { display: none; }
    header a.logo { height: 2.9em; width: 8.1em; margin-top: 1em; }
    figure.fullsize { height: 100%; }
    figure .intro { padding: 1.5% 5% 1.5% 6%; width: 70%; }
    figure .intro.startseite { top: 35%; }
    figure img { border-bottom: none; }
    #headerBild { height: 50% !important; }
    .wm_directAccess { right: 1em !important; bottom: 1em !important; }
    .counter { width: 3em !important; height: .5em !important; }
    .glassuche { top: 4em; background-color: rgba(0,114,152,1); }
    .glassuche img { width: 2em; margin: .1em auto; }
    .glassuche span { display: none; }
    .footerMenue, #scrollButton{ display: none !important; }
    .timelineNav li { margin-bottom: 2.5em; }
}

@media screen and (max-width: 600px) {
	h1 { font-size: 2em; }
    h2 { font-size: 1.8em; }
    article { padding: 3em 0 3em 0; }
	header ul { font-size: 1.8em; margin-top: 2em; }	
    .kachel span { padding: 1em 2em; }
    .timelineNav { display: none; }
    .timeline .c_12 .g_6 { padding-right: 0; width: 98%; }
	.g_3.kachel,
    .g_4.kachel,
    .c_12 .g_3.width { width: 98%; font-size: 200%; }
     .g_4.mitarbeiter { width: 98%; }
    .full600 { width: 98% !important; }
    .filter { margin-top: 6em !important; }
    .filter div, .filter .suche { width: 100%; }
    .filter ul li { line-height: 2.6em; }
}

@media screen and (max-width: 500px) {
	.g_3.kachel,
    .g_4.kachel { font-size: 150%; }
}

@media screen and (max-width: 400px) {
	.g_3.kachel,
    .g_4.kachel { font-size: 100%; }
}