/*! HTML5 Boilerplate v5.3.0 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    color: #ff8;
    font-size: 1em;
    font-family: "jcOpenSans", "Open Sans", sans-serif;
	font-weight: 300; /* light */
    line-height: 1.4;
	letter-spacing: .03em;
	background-color: #272745;
	background: #272745 linear-gradient(rgb(8,8,14) 11.25rem, rgba(8,8,14,0) 100%) no-repeat left top;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


/* ==========================================================================
   Contao styles
   ========================================================================== */
   
body, form, figure {
	margin: 0;
	padding: 0;
}

/*
select, input, textarea {
    font-size: 99%
}*/
#wrapper {
	margin: 0;
	/*width: auto;*/
}

#container, .inside {
	position: relative;
}


#footer {
    clear: both;
}

#main .inside {
    min-height: 1px;
}

.ce_gallery > ul {
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style: none;
}

.ce_gallery > ul li {
    float: left;
}

.ce_gallery > ul li.col_first {
    clear: left;
}

.float_left {
    float: left;
}

.float_right {
    float: right;
}

.block {
    overflow: hidden;
}

.clear, #clear {
    height: .1px;
    font-size: .1px;
    line-height: .1px;
    clear: both;
}

.invisible {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.custom {
    display: block;
}

#container:after, .custom:after {
    content: "";
    display: table;
    clear: both;
}


img {
    max-width: 100%;
    height: auto;
}

.ie7 img {
    -ms-interpolation-mode: bicubic;
}

.ie8 img {
    width: auto;
}

  
  
/* ==========================================================================
   Author's custom styles
   ========================================================================== */


@font-face {
	font-family: 'jcOpenSans';
	src: url('../fonts/jcopensanslight.woff2') format('woff2'),
		 url('../fonts/jcopensanslight.woff') format('woff');
	font-weight: 300; /* light */
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'jcOpenSans';
	src: url('../fonts/jcopensanslightitalic.woff2') format('woff2'),
		 url('../fonts/jcopensanslightitalic.woff') format('woff');
	font-weight: 300; /* light */
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'jcOpenSans';
	src: url('../fonts/jcopensanssemibold.woff2') format('woff2'),
		 url('../fonts/jcopensanssemibold.woff') format('woff');
	font-weight: 600; /* semi-bold */
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Yanone Kaffeesatz';
	src: url('../fonts/yanone-kaffeesatz-v14-latin-regular.woff2') format('woff2'),
		 url('../fonts/yanone-kaffeesatz-v14-latin-regular.woff') format('woff');
	font-weight: 400 700; /* to cover normal to bold */
	font-style: normal;
	font-display: swap;
	/* size-adjust: 120%; currently not supported by Safari*/
}

/*h1 { font-size: 2em;}
h2 { font-size: 1.5em;}
h3 { font-size: 1.125em;} 
As long as @font-face: size-adjust is not fully supported, increment font size by 120% for Yanone Kaffeesatz */
h1 { font-size: 2.4em;}
h2 { font-size: 1.8em;}
h3 { font-size: 1.35em;}

h4 { font-size: 1em;}
h5 { font-size: 0.81em;}
h6 { font-size: 0.625em;}

h1, h2, h3 {
	color: #ff6;
    font-family: "Yanone Kaffeesatz", "Arial Narrow", sans-serif;
	font-weight: bold; /* normal Kaffeesatz, bold substitute */
	margin: 1.6em 0 1em;
	line-height: 1.1;
}
h1 + h2,
h2 + h3 {
	margin: 1em 0 1em;
}

h4, h5, h6 {
	margin: 1em 0 .5em;
}

h1:first-child,
h2:first-child {
	margin-top: 0;
}

p.info + h1,
p.info + h2 {
	margin-top: 0;
}

p.info {
	text-align: right;
}

.small {
	font-size: .9em;
}



a {
	border-radius: 2px;
	text-decoration: none;
}

a:link,
a:visited {
	color: #fe9B3d;
}
a:focus,
a:hover {
	color: #ffd;
	background-color: rgba(255,255,255,.25);
}
a:active {
	color: #f00;
	background-color: rgba(255,255,255,.1);
}

a[rel="external"]::after {
	content: '\2197'; /*url('../img/externalLink.png');*/
	margin: 0 .2em;
	display: inline-block;
}



#header {
	min-height: 181px;
	padding: .5em .5em 0;
}

#header a:focus,
#header a:hover,
#header a:active,
#footer a:focus,
#footer a:hover,
#footer a:active {
	background: transparent;
	text-decoration: none;
}

#header a {
	display: block;
	height: 81px;
	max-width: 491px;
	margin: 0 auto;
}

#header img {
	float: left;
}

#header strong {
	display: block;
	height: 81px;
	max-width: 258px;
	margin-left: 90px;
	background: transparent url('../img/sternchens-sammelsurium_s.svg') no-repeat left center;
	font-size: 1.4em;
	text-indent: -999em;
}

#header #pagetitle {
	max-width: 348px;
	margin: 0 auto;
}

#header p {
	clear: both;
	margin: 1rem 0 0 0;
	text-align: center;
	/*font-weight: bold;*/
	color: #fe9B3d;
	font-size: 1em;
	font-style: italic;
}

#header a#gotoSiteNav {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

#container {
	margin: .5em auto 0;
	padding: 0 .5em 10rem;
	max-width: 50em;
}

main .inside {
	margin-top: 2em;
}

nav#siteNav {
	border-top: 1px dotted #ff6;
	border-bottom: 1px dotted #ff6;
	padding: 1rem 0;
	margin: 1rem 0;
}

nav#siteNav #navClose {
	display: none;
}

nav#siteNav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
}

nav#siteNav ul ul {
	padding-left: 1rem;
	font-size: .78em;
}

nav#siteNav>ul>li:nth-last-child(1),
nav#siteNav>ul>li:nth-last-child(2) {
	font-size: .78em;
}

nav#siteNav ul a,
nav#siteNav ul strong {
	padding: 0 .25em;
}

body {
	min-height: 100vh;
	position: relative;
	background: transparent url('../img/BG_Trees.png') repeat-x center bottom;
}

#footer {
	clear: both;
	margin: .5em auto 0;
	width: 100%;
	position: absolute;
	bottom: 0;
}

#footer .inside {
	background: transparent url('../img/BG_Roof.png') no-repeat left 40px;
}

#Silhouettes {
	margin-left: 60px;
}

#Silhouettes img {
	vertical-align: top;
}

#SilS {
	margin-top: 20px;
	margin-left: -10px;
}

#SilW {
	margin-top: 12px;
}

#SilJ {
	margin-top: 34px;
}

#footer p {
	text-align: left;
	font-size: 11px;
	font-size: 0.71rem;
	margin: 0;
	padding: 0 0 .2em 9em;
	color: #3f3f5a;
}


.ce_text>p:first-child,
.ce_text>figure.float_right+p,
.ce_text>figure.float_left+p {
	margin-top: 0;
}

.ce_er24_legal_text > img:first-child {
	float: right;
	margin: 0 0 1rem 1rem;
}
.ce_er24_legal_text > img:first-child + h1 {
	margin-top: 0;
}

.imgFullWidthMax600Centered {
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
}

.image_container {
	margin: 0 auto 1rem;
}
.image_container.float_right {
	margin: 0 0 1rem 1rem;
}
.image_container.float_left {
	margin: 0 1rem 1rem 0;
}

figcaption {
	font-size: .9em;
	font-style: italic;
}

main .mod_newslist>div {
	background-color: rgba(0,0,0,.25);
	border-radius: 5px;
	padding: .5em;
	margin-bottom: 1em;
}

.comment_default {
	background-color: rgba(0,0,0,.2);
	border-radius: 5px;
	padding: .5em;
	margin-bottom: 1em;
}

.comment_default .info {
	font-size: .9em;
	color: #ff9039;
}

.formbody,
.tl_confirm {
/*	border: 1px dashed #ff0;
	border-radius: 5px;*/
	padding: .5em;
	margin: 5px;
	box-shadow: 0 0 5px #fff;
	opacity: 1;
}

.formbody .widget {
	margin: 1em 0;
}

p.error {
	margin: 0;
	color: #ff3333;
}

label {
	display: block;
}
label[for^="opt"] {
	display: inline;
	margin-left: .25em;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
textarea {
	background-color: rgba(255,255,255,.1);
	color: #ff8;
	border: 1px inset #272745;
	padding: 1px;
	width: 98%;
	width: calc(100% - 4px);
}

button {
	background-color: #30304e;
	border-color: #161634;
	margin: .5em 0;
}


ul.nobullets {
	list-style: none;
	padding-left: 0;
}

hr {
	height: 0;
	border: 0;
	border-top: 1px dashed #ff8;
	margin: 2em 0;
}

a.anchorBelow::before {
	content: '\2193'; /*url('../img/AnchorDown.png');*/
	margin-right: .2em;
	display: inline-block;
}

a.anchorAbove::before {
	content: '\2191'; /*url('../img/AnchorUp.png');*/
	margin-right: .2em;
	display: inline-block;
}

.rezept, .gedicht {
	background-color: rgba(255,255,255,.1);
	padding: 1em;
	margin: 1em 0;
	border-radius: .5em;
}

.rezept:nth-of-type(even) {
	background-color: rgba(0,0,0,.2);
}

.rbCopy {
	font-size: .71em;
	text-align: center;
	color: #999; }

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

aside .mod_newslist {
	margin: 1.5em 0;
	border-radius: 6px;
	background: #e6fff9;
	box-shadow: 1px 2px 4px #ccc;
	padding: 16px;
}

aside .mod_newslist .more {
	text-align: right;
	margin-bottom: 0;
}

.mod_newslist article.layout_full,
.mod_newsreader article.layout_full {
	background: #e6fff9;
	padding: 1em;
	border-radius: 5px;
	box-shadow: 1px 2px 4px #ccc;
	margin-bottom: 1em;
}

.mod_newslist article p.info,
.mod_newsreader article p.info {
	text-align: right;
	font-style: italic;
	color: #666;
	font-size: .78em;
	border-bottom: 1px solid #009973;
}

.mod_newslist article h2,
.mod_newsreader article h2 {
	margin: 1em 0;
}

.mod_newslist article.layout_latest+.layout_latest {
	margin-top: 1rem;
	border-top: 1px solid #999;
}

.layout_latest.featured {
	background: transparent url('../img/pin.svg') no-repeat right .5em;
	background-size: 1.5em;
}









ul.aufzaehlung {
	list-style: outside url(../img/listbullet.png);
	margin-left: 3em;
}

q,
blockquote {
	font-style: italic;
}
q:before,
blockquote p:before {
	content: "»";
	font: italic bold 2em/1 "Yanone Kaffeesatz";
	position: absolute;
	margin: -.2em 0 0 -.7em;
	color: #f72;
}
q:after,
blockquote p:after {
	content: "«";
	font: italic bold 2em/1 "Yanone Kaffeesatz";
	position: absolute;
	margin: -.2em 0 0 .5em;
	color: #f72;
}
blockquote {
	padding: 0 10%;
	margin: 1em 0;
}
blockquote cite {
	font-size: 0.78em;
	font-style: normal;
	display: block;
	text-align: right;
}
cite:before {
	content: "— ";
}
cite:after {
	content: " —";
}

.centeredText {
	text-align: center;
}

.units {
	white-space: nowrap;
	word-spacing: -0.2em;
}

aside.notes {
	border-radius: 10px;
	background: #ffc;
	padding: 1em;
	font-style: italic;
	font-weight: bold;
}

aside.footnotes {
	font-size: 12px;
	font-size: .78rem;
	border-top: 1px solid #333;
	margin: 32px 0 0 0;
	margin: 2rem 0 0 0;
}

aside.footnotes p {
	margin: 0;
	padding: 0 .7em;
	text-indent: -.7em;
}

p.asterisk {
	font-size: 12px;
	font-size: .78rem;
	font-style: italic;
}

/* @group Cookie Bar */

.cookiebar {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	padding: 1em 1.2em;
	background-color: #003f52;
	color: #fff;
	font-size: 1em;
	text-align: center;
	z-index: 100;
}

.cookiebar--active {
	display: flex!important;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}

.cookiebar__message, .cookiebar__text {
	margin: 0 1.5em;
}

.cookiebar__link {
	color: #B9DAFF!important;
	white-space: nowrap;
	font-size: .9em;
}

.cookiebar__button {
	margin: .5em 1em 0;
	padding: .6em 1.2em;
	border: none;
	border-radius: 0;
	background-color: #009973;
	color: #fff;
	font-weight: 700;
	cursor: pointer;
}

.cookiebar__button:hover {
	background-color: #005B4A
}

.cookiebar__analytics {
	margin-right: 1.5em;
}

.cookiebar__analytics-label {
	cursor: pointer;
}

.cookiebar__analytics-checkbox {
	margin-right: 5px;
}

/* @end */

@media only screen and (max-width:512px) { 
	html {
		background: url('../img/BG_DarkSky-512.jpg') repeat-x center top,
			#272745 url(	../img/BG_CloudySky-512.jpg) repeat center top;
	}
}

@media only screen and (min-width:513px) { 
	html {
		background: url('../img/BG_DarkSky-1024.jpg') repeat-x center top,
			#272745 url(	../img/BG_CloudySky-1024.jpg) repeat center top;
	}
}


@media only screen and (min-width: 801px) {
	/* use a wider variation of the page title and the footer */
	#header strong {
		max-width: none;
		background: transparent url('../img/sternchens-sammelsurium.svg') no-repeat left center;
	}
	
	#header #pagetitle {
		max-width: 50rem;
	}
	#container {
		padding-bottom: 12rem;
	}
	
/*	#footer {
		padding-top: 8rem;
	}*/
	
	#footer .inside {
		min-height: 132px;
		background-position: center top;
	}
	
	#Silhouettes {
		margin: 0 auto;
		padding-top: 10px;
		width: 300px;
	}
	
	#Silhouettes img {
		vertical-align: top;
	}
	
	#SilS {
		margin-top: 25px;
		margin-left: 24px;
	}
	
	#SilW {
		margin-top: 26px;
		margin-left: 40px;
	}
	
	#SilJ {
		margin-top: 54px;
		margin-left: 30px;
	}
	
	#footer p {
		text-align: center;
		padding: 0 0 .2em 0;
	}
	
	
}

@media only screen and (max-width: 1000px) and (min-height: 30rem) {
	/* site navigation is hidden on smaller screens and can slide in */
	/* min-height 30rem ensures sufficent space for fixed navigation */
	

	#header a#gotoSiteNav {
		clip: auto;
		height: 2rem;
		width:  2rem;
		overflow: visible;
		position: absolute;
		top: 0;
		right: 0;
	}
	
	nav#siteNav {
		position: fixed;
		z-index: 100;
		top: 0;
		right: 0;
		padding: 3rem 2rem 2rem;
		min-height: 100vh;
		border: 0;
		background-color: rgba(39,39,69,.95);
		box-shadow: 0 0 5px #fff;
		border-radius: 1rem 0 0 0;
		margin: 0 -100% 0 0 ;
		transition: margin 0.6s ease;
	}
	
	nav#siteNav:target {
		margin: 0 0 0 0;
	}
	
	nav#siteNav #navClose {
		display: block;
		width: 2rem;
		height: 2rem;
		position: absolute;
		right: .5rem;
		top: .5rem;
	}
	
	nav#siteNav li { /* additional space for touch device */
		margin-top: .25rem;
		margin-bottom: .25rem;
	}
	
}



@media only screen and (min-width: 1001px) and (max-height: 799px) {
	/* site navigation is positioned left, main content on the right */
	/* nothing fixed due to insufficient height */
	
	#container {
		max-width: 60rem;
	}
	
	main {
		float: right;
		margin-left: 13rem;
		width: 752px;
	}
	
	aside#left {
		position: absolute;
	}
	
	nav#siteNav {
		border: 0;
		box-shadow:  5px 0 5px -5px #fff;
		padding: 1rem 1rem 1rem 0;
	}

}

@media only screen and (min-width: 1001px) and (min-height: 800px) {
	/* header and footer are fixed */
	/* site navigation is part of the bottom, displayed within tower */
	
	html {
		background-attachment: fixed, fixed;
	}
	
	body {
		background: none;
	}
	
	#wrapper::before {
		content: "";
		display: block;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 276px;
		background: transparent url('../img/BG_Trees.png') repeat-x center bottom;
	}
	
	#container {
		max-width: 60rem;
		padding-top: 210px;
	}
	
	#header {
		position: fixed;
		z-index: 50;
		top: 0;
		width: 100%;
		height: 210px;
		background: transparent url('../img/BG_HeaderMask-min.png') repeat-x center top;
	}
	
	main {
		margin-left: 260px;
	}
	
	aside#left {
		position: fixed;
		bottom: 0;
		height: 522px;
		width: 220px;
		background: transparent url('../img/BG_Church.png') no-repeat center bottom;
	}
	
	nav#siteNav {
		border: 0;
		padding: 90px 20px 0 22px;
		font-size: 14px;
		text-align: center;
		
	}
	
	nav#siteNav ul ul {
		padding-left: 0;
	}
	
	nav#siteNav li {
		margin-top: .5rem;
	}
	nav#siteNav li li {
		margin-top: 0;
	}
	
	nav#siteNav .submenu ul {
		overflow: hidden;
		max-height: 0;
		transition: max-height 1s ease;
	}
	
	nav#siteNav .submenu:hover ul {
		max-height: 6rem;
	}
	
	nav#siteNav .submenu.trail ul,
	nav#siteNav .submenu.active ul {
		max-height: 6rem;
	}
	
	#footer {
		position: fixed;
		z-index: 0;
		bottom: 0;
		width: 886px;
		left: 50%;
		margin-left: -300px;
		padding-top: 0;
		clip-path: polygon(7px 182px, 59px 0px, 287px 46px, 287px 6px, 316px 6px, 341px 34px, 342px 50px, 371px 57px, 372px 35px, 401px 34px, 416px 68px, 440px 74px, 453px 32px, 485px 32px, 496px 82px, 524px 84px, 531px 58px, 575px 73px, 575px 103px, 610px 110px, 610px 79px, 632px 67px, 683px 76px, 689px 84px, 703px 91px, 702px 126px, 724px 116px, 750px 121px, 758px 139px, 937px 182px);
	}
	
	#footer .inside {
		width: 886px; 
		margin-left: 0;
		height: 182px;
/*		clip-path: polygon(7px 182px, 59px 0px, 287px 46px, 287px 6px, 316px 6px, 341px 34px, 342px 50px, 371px 57px, 372px 35px, 401px 34px, 416px 68px, 440px 74px, 453px 32px, 485px 32px, 496px 82px, 524px 84px, 531px 58px, 575px 73px, 575px 103px, 610px 110px, 610px 79px, 632px 67px, 683px 76px, 689px 84px, 703px 91px, 702px 126px, 724px 116px, 750px 121px, 758px 139px, 937px 182px);*/ /* needs to be applied to parent #footer */
	}
	
	#Silhouettes {
		margin-bottom: 44px;
	}
}




/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden {
    display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}



/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after,
    *:first-letter,
    *:first-line {
        background: transparent !important;
        color: #000 !important; /* Black prints faster:
                                   http://www.sanbeiji.com/archives/953 */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

/*    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }*/

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}