/*** RESET ***/
header, footer, nav, section, aside, main, article, figure, figcaption { display: block; }
body, div, h1, h2, h3, h4, h5, h6, p, blockquote, pre, code, ol, ul, li, dl, dt, dd, figure, table, th, td, form, fieldset, legend, input, textarea { margin: 0; padding: 0; }
input, button, textarea, select { font-family: inherit; font-size: 99%; font-weight: inherit; }
html { overflow-y: scroll; }
table { border-spacing: 0; border-collapse: collapse; font-size: inherit; }
caption, th, td { text-align: left; text-align: start; vertical-align: top; }
caption, th { font-weight: bold; }
abbr, acronym { font-variant: normal; border-bottom: 1px dotted #666; cursor: help; }
blockquote, q { quotes: none; }
fieldset, img, iframe { border: 0; }
ul { list-style-type: none; }
sup { vertical-align: text-top; }
sub { vertical-align: text-bottom; }
del { text-decoration: line-through; }
ins { text-decoration: none; }
pre, code { font-family: Monaco, monospace; font-size: 0.9em; line-height: 1; }

/*** BASICS ***/
body { font-family: "EB Garamond", serif; font-weight: 400; color: #404040; line-height: 1.5; background-color: #fafaf7; }
.clear, #clear, .clr { clear: both; }
.clrfix:after { content: ""; display: table; clear: both; }
.invisible { width: 0; height: 0; left: -1000px; top: -1000px; position: absolute; overflow: hidden; display: inline; margin: 0 !important; padding: 0 !important; }
hr { border: 0; height: 0; border-top: 1px solid #333; }
a { text-decoration: none; }
a img, .image_container img { display: block; }
img, svg { width: 100%; max-width: 100%; height: auto; max-height: 100%; }
img.mime_icon { vertical-align: top; }
img.left { float: left; margin-right: 0.5em; }
img.right { float: right; margin-left: 0.5em; }
.center img { margin-left: auto; margin-right: auto; }
.float_left { float: left; margin-right: 1em; }
.float_right { float: right; margin-left: 1em; }
iframe { margin-bottom: 1em; max-width: 100%; }
.table { display: table; }
.cell  { display: table-cell; }
.center { text-align: center; }
button { all: unset; cursor: pointer; }

/* Fonts */
h1, h2, h3, h4 { font-size: 1em; }
h1, h2 { margin-bottom: 2em; font-weight: 600; text-transform: uppercase; letter-spacing: 5px; }
h3 {  margin-bottom: 1em; font-weight: 600; }
h4 { margin: 2em 0 1em; font-weight: 400; }
h5 { margin-bottom: 0.5em; font-weight: 400; }
p { margin-bottom: 1em; }
a { color: #404040; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; }
a:hover { color: #b0b0b0; }
strong { font-weight: 600; }
.ce_text:not(.layer) + .ce_text:not(.layer) h2, p + h2 { margin-top: 3em; }

/* Container */
#container { padding-left: 20px; padding-right: 20px; margin-top: 3.25em; position: relative; min-height: calc(100vh - 8.25em); }
#container .inside { width: 100%; margin: 0 auto; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 1em 0; }
#container .inside:after { content: ""; display: table; clear: both; }
#container { filter: alpha(opacity=0); opacity: 0; }

/*** HEADER ***/

#header { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; position: fixed; top: 0; width: 100%; z-index: 9; background-color: #fafaf7; }
body.scrolled #header { z-index: 12; background-color: #fafaf7; -webkit-box-shadow: 0 5px 5px 0 rgba(0,0,0,0.1); box-shadow: 0 5px 5px 0 rgba(0,0,0,0.1); }


/* Mainnav */
#mainnav { overflow: visible; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; }
body:not(.scrolled) #mainnav { padding-top: 1.5em; }
#mainnav:after { content: ""; clear: both; display: table; }
#mainnav ul { text-align: center; margin: 0 auto; }
#mainnav li { display: inline-block; list-style: none; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
#mainnav li a, #mainnav li strong { padding: 3px 0; white-space: nowrap; text-decoration: none; -webkit-transition: all 0.3s ease, margin 0.3s ease; -moz-transition: all 0.3s ease, margin 0.3s ease; -o-transition: all 0.3s ease, margin 0.3s ease; transition: all 0.3s ease, margin 0.3s ease; color: #404040; display: inline-block; text-transform: uppercase; position: relative; }
#mainnav li a:after, #mainnav li strong:after { content: " "; position: absolute; bottom: 0; left: 50%; width: 0; height: 1px; display: block; background: #629ff7; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
#mainnav li a:hover, #mainnav li.active strong { color: #000; }
#mainnav li a:hover:after, #mainnav li strong:after { width: 100%; left: 0; }
#mainnav li strong { font-weight: 400; }


/*** MAIN ***/

.mod_article.padtop { padding-top: 3em; }
#container .mod_pageimg { position: fixed; padding-top: 1em; width: calc(100% - 40px); }
#container .mod_pageimg .img_container { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0 auto; }
#container .mod_pageimg .img_container img { margin: 0 auto; }
body.bgimg #container .inside { position: relative; padding-top: 8vw; }

#main a { font-weight: 400; }
.mod_article a, .ce_hyperlink button { position: relative; }
.mod_article a:after, .ce_hyperlink button:after { content: " "; position: absolute; bottom: 0; left: 50%; width: 0; height: 1px; display: block; background: #629ff7; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
.mod_article a:hover, .ce_hyperlink button:hover { color: #000; }
.mod_article a:hover:after, .ce_hyperlink button:hover:after { width: 100%; left: 0; }


.ce_headline { text-align: center; }
.ce_hyperlink { margin-bottom: 1em; }
#left .ce_hyperlink { margin-bottom: 0.75em; text-transform: uppercase; letter-spacing: 2px; }
/*#left .ce_hyperlink button { display: block; width: 100%; }*/
.small { font-size: 0.8em; }
.footnote { font-size: 0.8em; margin-top: 2em; position: relative; }
.footnote:before { content: " "; width: 50px; height: 1px; display: block; position: absolute; left: 0; top: -1em; background: #404040; }
p.confirm { background: #ebfb9c; padding-left: 0.5em; }

#main .ce_text ol, #main .ce_text ul { padding: 0; overflow: auto; zoom: 1; margin: 0 0 0.5em; }
#main .ce_text ol.nospace, #main .ce_text ul.nospace { margin: 0 0 1em; }
#main .ce_text ul { list-style-type: square; }
#main .ce_text ol { list-style-type: decimal; }
#main .ce_text ol li, #main .ce_text ul li { margin: 0 0 0.5em 1.75em; padding: 0 0 0 0.25em; }
#main .ce_text ol.nospace li, #main .ce_text ul.nospace li { margin-bottom: 0; }
#main .ce_text ol.lines, #main .ce_text ul.lines { list-style-type: none; }
#main .ce_text ol.lines li, #main .ce_text ul.lines li {  margin-left: 0; padding: 0 0 0.25em 0; }
#main .ce_text ol.lines li, #main .ce_text ul.lines li { border-bottom: 1px solid #eaeaea; }

/* Images */
.ce_image { margin-bottom: 1em; }
.image_container { text-align: center; }
.image_container img { display: block; margin: 0 auto; }
.image_container .caption { margin-bottom: 1em; padding-top: 5px; text-align: left; font-style: italic; line-height: 1.25; }
.ce_download, .ce_downloads { background: #f0f0f0; margin-left: -0.5em; padding-left: 0.5em; }

/* Layer */
.ce_text.layer { visibility: hidden; opacity: 0; position: absolute; z-index: 9; background-color: rgba(250, 250, 247, 0.7); -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; left: 0; top: 0; width: 100%; height: 100%; }
.ce_text.layer.show { visibility: visible; opacity: 1; }
.ce_text.layer .box { position: absolute; text-align: left; background-color: #fff; border: 1px solid #ccc; line-height: 1.3; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.ce_text.layer h2 { margin-bottom: 1em; letter-spacing: 2px; font-weight: 400; }
.ce_text.layer .close { background: url("images/close.svg") no-repeat center; width: 20px; height: 20px; position: absolute; top: 1em; right: 1em; cursor: pointer; text-indent: -9999em; }

/* Gartenplan */
svg text { fill: #404040; font-size: 19px; height: 30px; line-height: 26px; text-align: left; }
svg .button { cursor: pointer; }
svg .button.large { text-transform: uppercase; letter-spacing: 2px; }
svg .credit { font-size: 18px; }
svg .credit.large { font-size: 31px; letter-spacing: 7.2px; }
svg .credit tspan { letter-spacing: 2px; }

svg .streetnames > * { fill: #bbb; }
svg .boundaries > * { stroke-linecap: round; stroke-width: 0.5; stroke: #BCBCBC; fill: none; }
svg .numbers { fill : #bbb; }
svg .buildings > * { fill: #F1EFED; }

#contsvg { margin: 0 auto; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
#zmsvg { margin: 0 auto; display: block; }
.zoom { text-align: center; }
#zoomSVG { ; }
#resetSVG { display: none; }
#gartenplan { overflow: hidden; }
#gartenplan .ce_text.motiv h2 { text-transform: none; letter-spacing: 0em; font-weight: 600; }


/* Formulare */
.formbody input.text { border: 1px solid lightgrey; padding: 0.15em 0.5em; border-radius: 6px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.formbody button { background: #F1EFED; color: #404040; padding: 0.1em 0.5em; border-radius: 6px; letter-spacing: 1px; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; display: inline-block; position: relative; }
.formbody button:after { content: " "; position: absolute; bottom: 0; left: 50%; width: 0; height: 1px; display: block; background: #629ff7; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
.formbody button:hover { color: #000; border-radius: 0; background: #dfdddc; }
.formbody button:hover:after { width: 100%; left: 0; }
.formbody .widget { margin-bottom: 1em; }


/*** FOOTER ***/
#footer { padding: 2em 0; font-size: 0.85em; line-height: 1; background-color: #fafaf7; position: relative; }
body.bgimg #footer { padding-top: 2em; }
#footer .mod_customnav { text-align: center; }
#footer .mod_customnav li { list-style: none; display: inline-block; }
#footer .mod_customnav a { color: #404040; position: relative; }
#footer .mod_customnav a, #footer .mod_customnav strong { display: block; padding: 0.2em 0; margin: 0 1em; }
#footer .mod_customnav a:after, #footer .mod_customnav strong:after { content: " "; position: absolute; bottom: 0; left: 50%; width: 0; height: 1px; display: block; background: #629ff7; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
#footer .mod_customnav a:hover { color: #000; }
#footer .mod_customnav a:hover:after, #footer .mod_customnav strong:after { width: 100%; left: 0; }
#footer .mod_customnav strong { color: #000; position: relative; font-weight: 400; }


@media screen and (min-width: 1240px) {
	.ce_text.layer .box { width: calc(740px + 4em); left: 50%; margin-left: calc(-370px - 2em); }
	#right { left: calc(((100% - 1200px) * 0.5) + 970px); width: 230px; }
}

@media screen and (min-width: 1024px) and (max-width: 1239px) {
	#right { right: 20px; width: calc((100% - 40px) * 0.1916666666666667); }
}

@media screen and (min-width: 1024px) {
	body { font-size: 24px; }
	#container .inside { width: 100%; max-width: 1200px; }
	#main { float: right; margin-right: 19.16666666666667%; width: 61.66666666666667%; }
	#left { float: left; width: 19.16666666666667%; position: -webkit-sticky; position: sticky; margin-top: 4.45em; top: 4.45em; }
	#left .mod_article { padding-right: 30%; }
	#right { position: absolute; top: 3em; }
	#right .mod_article { padding-left: 1em; }
}

@media screen and (max-width: 1023px) {
	#container .inside { max-width: 740px; }
	#main, #right, #left { margin-bottom: 1.5em; }
}

@media screen and (min-width: 1024px) and (max-width: 1239px) {
	.ce_text.layer .box { width: calc((100% - 40px) * 0.6166666666666667 + 4em); left: 50%; margin-left: calc(((100% - 40px) * 0.6166666666666667 + 4em) * -0.5); }
}
@media screen and (min-width: 780px) and (max-width: 1023px) {
	.ce_text.layer .box { width: 740px; left: 50%; margin-left: -370px; }
}
@media screen and (max-width: 779px) {
	.ce_text.layer .box { width: calc(100% - 40px); left: 20px; }
}

@media screen and (min-width: 500px) and (max-width: 1023px) {
	body { font-size: 21px; }
}

/*@media screen and (min-width: 1400px) {
	#gartenplan #schule-des-vorgeburtlichen-werdens .box { top: 18vw; }
	#gartenplan #schule-des-todes .box, #gartenplan #lebensweg .box { top: 26vw; }
}
@media screen and (min-width: 1024px) and (max-width: 1399px) {
	#gartenplan #schule-des-vorgeburtlichen-werdens .box { top: 14vw; }
	#gartenplan #schule-des-todes .box, #gartenplan #lebensweg .box { top: 22vw; }
}*/


@media screen and (min-width: 1240px) {
	#mainnav li { padding: 0 2.35em; }
	#mainnav li a, #mainnav li strong { letter-spacing: 0.3em; }
}
@media screen and (max-width: 1239px) {
	#header #mainnav li.first { padding-left: 10px; }
	#header #mainnav li.last { padding-right: 10px; }
}
@media screen and (min-width: 1090px) and (max-width: 1239px) {
	#mainnav li { padding: 0 2em; }	
	#mainnav li a, #mainnav li strong { letter-spacing: 0.2em; }
}
@media screen and (min-width: 1024px) and (max-width: 1089px) {
	#mainnav li { padding: 0 1.5em; }	
	#mainnav li a, #mainnav li strong { letter-spacing: 0.2em; }
}
@media screen and (min-width: 800px) and (max-width: 1023px) {
	#mainnav li { padding: 0 2.5em; }
	#mainnav li a, #mainnav li strong { letter-spacing: 0.3em; }
}
@media screen and (min-width: 600px) and (max-width: 799px) {
	#mainnav li { padding: 0 1.8em; }
	#mainnav li a, #mainnav li strong { letter-spacing: 0.2em; }
}
@media screen and (min-width: 500px) and (max-width: 599px) {
	#mainnav li { padding: 0 1em; }
	#mainnav li a, #mainnav li strong { letter-spacing: 0.15em; }
}
@media screen and (min-width: 400px) and (max-width: 499px) {
	#mainnav li { padding: 0 0.8em; }
	#mainnav li a, #mainnav li strong { letter-spacing: 0.1em; }
}
@media screen and (max-width: 399px) {
	#mainnav li { padding: 0 2.5vw; }
	#mainnav li a, #mainnav li strong { letter-spacing: 1.5px; }
}
@media screen and (max-width: 360px) {
	#mainnav li { padding: 0 2vw; }
}
@media screen and (max-width: 340px) {
	#mainnav li { padding: 0 1vw; }
	#mainnav li a, #mainnav li strong { letter-spacing: 0; }
}

@media screen and (min-width: 500px) {
	#bild { padding-top: 1em; }
	#footer .mod_customnav a, #footer .mod_customnav strong { letter-spacing: 0.2em; }
	.zoom { margin-top: 0.3em; }
	.ce_text.layer .box { padding: 1.9em 2em 1em; }
}

@media screen and (max-width: 499px) {
	body { font-size: 18px; line-height: 1.3; }
	#bild { padding-top: 1em; }
	.zoom { margin-top: 0.5em; }
	.ce_text.layer .box { font-size: 0.9em; padding: 1.5em 1.5em 0.5em; }
}

@media screen and (max-width: 350px) {
	#mainnav li { padding: 0 2vw; }
}

@media screen and (max-width: 320px) {
	#mainnav li { padding: 0 1vw; }
	#mainnav li a, #mainnav li strong { letter-spacing: 0; }
}

@media screen and (orientation: landscape) and (min-height: 500px) {
	.mod_pageimg .img_container, #contsvg { text-align: center; }
	.mod_pageimg .img_container img, #zmsvg { height: 100%; width: auto; }
	.mod_pageimg .img_container, #contsvg { height: calc(100vh - 7em); max-height: calc((100vw - 40px) * 0.678); width: calc((100vh - 7em) * 1.474926253687316); max-width: 100%; }
	 .ce_text.layer .box { margin-top: 3em; }
}

@media screen and (orientation: landscape) and (max-height: 499px) {
	#gartenplan { padding-left: 30px; padding-right: 30px; }
	.mod_pageimg .img_container, #contsvg { width: 740px; max-width: 100%; max-height: 502px; }
	 .ce_text.layer .box { margin-top: 1em; }
}

@media screen and (orientation: portrait) {
	.mod_pageimg .img_container, #contsvg { width: 1200px; max-width: 100%; max-height: 813px; }
	 .ce_text.layer .box { margin-top: 1em; }
}