/* Reset
-----------------------------------------------------------*/
article,aside,details,figcaption,figure,footer,header,hgroup,hr,menu,nav,section{display:block}a,hr{padding:0}abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin:0;padding:0;border:0;outline:0;font-size:100%;font-style:normal;vertical-align:baseline;background:0 0;font-weight:normal;font-style:normal;}ins,mark{background-color:#ff9;color:#000}body{line-height:1}ul, ol{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}a{margin:0;font-size:100%;vertical-align:baseline;background:0 0}ins{text-decoration:none}mark{font-style:italic;font-weight:700}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{height:1px;border:0;border-top:1px solid #ccc;margin:1em 0}input,select{vertical-align:middle}

/* Schriften
-----------------------------------------------------------*/
@font-face { 
	font-family: 'DroidSerif';
	src: url('webfonts/DroidSerif-Regular-webfont.eot');
	src: url('webfonts/DroidSerif-Regular-webfont.eot?iefix') format('eot'),
	     url('webfonts/DroidSerif-Regular-webfont.woff') format('woff');
}

@font-face { 
	font-family: 'DroidSerifBold';
	src: url('webfonts/DroidSerif-Bold-webfont.woff');
}

/* oswald-700 - latin */
@font-face {
  font-display: swap;
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  src: url('webfonts/oswald-v49-latin-700.woff2') format('woff2'); 
}

/* roboto-300 - latin */
@font-face {
  font-display: swap;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('webfonts/roboto-v30-latin-300.woff2') format('woff2'); 
}

/* roboto-500 - latin */
@font-face {
  font-display: swap;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url('webfonts/roboto-v30-latin-500.woff2') format('woff2');
}

/* Grundgerüst
-----------------------------------------------------------*/
html {
	-webkit-text-size-adjust: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	min-height: 101%;
}

body {
	font-family: 'Oswald', sans-serif;
	font-family: 'DroidSerif', sans-serif;
	color: #000;
	font-size: 16px;
	font-size: 20px;
}

.frame {
	margin: 0 auto;
	width: 94%;
	max-width: 1100px;
	position: relative;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
}

.smallFrame {
/* 	width: 100%; */
	max-width: 700px;
}

.black {
	color: #000;
}

.blue {
	color: #00aaca;
}


/* Allgemeine Formatierungen
-----------------------------------------------------------*/
img {
	width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid #00aaca;
}

h1, h2, h3 {
	text-transform: uppercase;
	font-family: 'Oswald', sans-serif;
	color: #00aaca;
	font-size: 2.5em;
	line-height: 1.1em;
	text-align: center;
	margin: 1em 0 0.5em 0;
}

h1 {
/* 	margin-top: 1em; */
}

h2 span {
	display: block;
	text-transform: none;
}

h3 {
	font-size: 1.25em;
	text-align: left;
	color: #004966;
}

h4 {
	background: #f7a430;
	text-transform: uppercase;
	font-family: 'Oswald', sans-serif;
	text-align: center;
	color: #fff;
	padding: 0.5em;
	margin: 2em 0;
}

p {
	line-height: 1.35em;
	padding-bottom: 1.35em;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	text-align: justify
}

p:last-child {
	padding-bottom: 0;
}

strong {
	font-weight: 500;
}

/* Struktur
-----------------------------------------------------------*/
.box50 {
	position: relative;
	float: left;
	width: 48.75%;
	padding: 0 .625%;
	box-sizing: border-box;
}

.box50:last-child {
	float: right;
}

.box75 {
	position: relative;
	float: right;
	width: 73.75%;
	width: 75%;
	padding: 0 2%;
	box-sizing: border-box;
}

.box25 {
	float: left;
	width: 23.75%;
	width: 25%;
	padding: 0 2%;
	box-sizing: border-box;
}

.box66, .box33 {
	position: relative;
	float: left;
	width: 66.666666%;
	padding: 0 2%;
	box-sizing: border-box;
}

.box33 {
	width: 33.333333%;
}

.box33:last-child {
	float: right;
}

.centerContent {
	text-align: center;
}

.centerContent h3 {
	text-align: center;
}

.narrowText {
/* 	max-width: 550px; */
	margin: 0 5%;
}

.abstandUnten {
	padding-bottom: 1.35em;
}

.abstandOben {
	margin-top: 1.35em;
}

.flexCoverList {
	display: flex;
	justify-content: center;
	/* align-items: center; */
	flex-wrap: wrap;
}

.flexCoverList > div {
	width: 300px;
	padding: 0 1em 1.5em 1em;
}

.flexCoverList h3 {
	text-align: center;
}


/* Header
-----------------------------------------------------------*/
.mainImg {
	position: relative;
}

.mainImg img {
	width: 100%;
	position: relative;
}

.logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 31%;
	border: none;
}

.banner {
	text-align: center;
	max-width: 250px;
	width: 60%;
	margin: 4.5em auto;
}

#stoerer {
	position: absolute;
	top: -1em;
	right: 5%;
	left: auto;
	width: 16%;
	min-width: 210px;
	border: none;
	rotate: 5deg;
	filter: drop-shadow(3px 4px 4px rgba(0,0,0,0.4));
	-ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=4, OffY=4, Color='#444')";
	filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=4, OffY=4, Color='#444')";
}

/* .stoerer {
	width: 15rem;
	height: 15rem;
	position: absolute;
	top: -1rem;
	right: 10%;
	border: none;
} */


/* Spezifische Formatierungen
-----------------------------------------------------------*/
p.introTxt {
	font-family: 'DroidSerif', sans-serif;
	/* color: #00aaca; */
	font-size: 1.375em;
	line-height: 1.5em;
	text-align: center;
}

.intro p {
	margin: 0 5%;
}

.introTxt strong {
	font-family: 'DroidSerifBold', sans-serif;
}

.intro, .main, .imgSection {
	background: url(../img/dot.svg) repeat-x left bottom;
	background-size: 5px auto;
	padding-bottom: 2.5em;
}

.imgSection {
	padding-top: 2.5em;
}

.coverRotateShadow {
	width: 85%;
	display: block;
	margin: 1.5em auto 3em auto;
	transform: rotate(-7deg);
	filter: drop-shadow(4px 5px 5px rgba(0,0,0,0.4));
	-ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=4, OffY=4, Color='#444')";
	filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=4, OffY=4, Color='#444')";
}

.coverRotateShadow.r1 {
	transform: rotate(1deg);
}

.coverRotateShadow.r2 {
	transform: rotate(-2deg);
}

.coverRotateShadow.r3 {
	transform: rotate(2deg);
}

.rotateBig {
	margin-top: 3em;
}

.imgBlock img {
	display: block;
	-o-object-fit: cover;
	object-fit: cover;
	border-left: 1px solid white;
/* 	height:100%; */
}

/*
.imgBlock img:not(.large) {
}
*/

.imgBlock {
    display: table; /* Make the container element behave like a table */
    width: 100%; /* Set full-width to expand the whole page */
}

.imgBlock p {
	float: left;
	width: 25%;
	box-sizing: border-box;
/* 	border-left: 1px solid white; */
	padding-bottom: 0;
/*     height: 200px; */
}

.imgBlock p:first-child {
	width: 50%;
	border-left: none;
}

.btnLink {
	color: #f7a430;
	border: 1px solid #f7a430;
	font-family: 'Oswald', sans-serif;
	text-transform: uppercase;
	padding: 0.25em 1.25em;
}

p.alert {
	color: #00aaca;
	background: #f7a430;
	background: rgba(247, 164, 48, 0.25);
	padding: 0.5em;
	font-weight: 500;
}

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

.btn-lu {
	display: inline-block;
	border: none;
}

.btn-lu img {
	width: 100%;
	max-width: 500px;
	height: auto;
	display: block;
}

.txt-small {
	font-size: 0.8em;
	font-weight: 200;
}

/* Du bist
-----------------------------------------------------------*/
body.body-dubist h1,
body.body-dubist h2,
body.body-dubist h3
{
	color: #cb1d27;
}

.dubist {
	display: none;
	position: absolute;
	min-height: 110vh;
}

/* Punkte Navigation
-----------------------------------*/
.punkteNav li {
	display: inline-block;
	margin: 0 0.5em 0.5em 0;
}

.punkteNav a {
	background: #f7a430;
	background: #cb1d27;
	color: #f7a430;
	color: #fff;
	font-family: 'Oswald', sans-serif;
	display: inline-block;
	padding: 0.5em 0.4em;
	border-radius: 6px;
	border: none;
}

/* Footer
-----------------------------------------------------------*/
.siteFooter {
	font-weight: 500;
	padding: 3em 0 3em 0;
	margin: 4em 0 0 0;
	color: #fff;
	background: #00aaca;
}

.siteFooter h3 {
	color: #fff;
	margin: 0 0 1em 0;
}

.siteFooter p {
	font-weight: 500;
}

.siteFooter .flex {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	justify-content: stretch;
}

.siteFooter .flex-item {
	align-self: stretch;
	align-self: flex-end;
	flex: 1 1 auto;
	position: relative;
}

.flex-item:not(:last-child):after {
	content: "";
	display: block;
	height: 3.25em;
	width: 1px;
	background: #fff;
	bottom: 0;
	right: 1.5em;
	position: absolute;
}

.siteFooter .logoLink {
	height: 2em;
	width: auto;
}

.partnerLink {
	font-family: 'Oswald', sans-serif;
	text-transform: uppercase;
	font-size: 0.9em;
}

/* Formular
-----------------------------------------------------------*/
input, textarea {
	font-family: inherit;
	font-size: inherit;
	border: 1px solid #00aaca;
	padding: 0.3em 0.1em;
}

input[type=number] {
	width: 3em;
	margin-right: 0.5em;
}

input[type=text], textarea {
	width: 100%;
	max-width: 500px;
	margin-bottom: 0.5em;
}

input[type=submit] {
	color: #f7a430;
	border: 1px solid #f7a430;
	font-family: 'Oswald', sans-serif;
	text-transform: uppercase;
	padding: 0.25em 1.25em;
	background: white;
}

label {
	font-family: 'Oswald', sans-serif;
/* 	color: #00aaca; */
	text-transform: uppercase;
}

.blockLabel {
	display: block;
	padding-bottom: 0.25em;
}

form .abstandUnten {
	margin-bottom: 0.25em;
}

.formError {
	color: #f43e31;
	border: 1px solid #f43e31;	
	padding: 1em;
	margin: 0 0 1em 0;
}

.errEmpty {
	border: 1px solid #f43e31;	
	background: #f43e31;
	color: #fff;	
}

/* Main Navigation
-----------------------------------------------------------*/
.mainNav {
	text-align: center;
	padding: 1.25em 0;
}

.mainNav li {
	display: inline-block;
	margin: 0 0.5em;
	font-family: 'Oswald', sans-serif;
	text-transform: uppercase;
	line-height: 1.75em;
	position: relative;
	border-bottom: 3px solid transparent;
}

.mainNav li a {
	border-bottom: none;
}

.mainNav li span {
	cursor: pointer;
	display: block;
}

.mainNav ul ul {
	display: none;
	position: absolute;
	left: 0;
	z-index: 100;
	background: #f6f6f0;
	padding: 0.25em 0;
	border-top: 3px solid #00aaca;
}

.mainNav ul ul li {
	display: block;
	margin: 0 0 0 0;
/* 	padding: 0 0.25em 0 0.25em; */
}

.mainNav li:hover > ul {
	display: block;
}

.mainNav ul ul li a {
	display: block;
	margin: 0 0;
	border-bottom: 2px solid #808080;
	white-space: nowrap;
	text-align: left;
	padding: 0.3em 0.75em 0.2em 0.75em;
	min-width: 175px;
}

.body-home .mainNav li#btn01,
.body-erwartet .mainNav li#btn02,
.body-wen .mainNav li#btn03,
.body-musegg .mainNav li#btn04,
.body-schulen .mainNav li#btn05,
.body-bestellen .mainNav li#btn06,
.body-kontakt .mainNav li#btn07
{
	color: #00aaca;
	border-bottom: 3px solid #00aaca;
}

.body-brunnengeschichten .mainNav li#btn04 span,
.body-naechste .mainNav li#btn04 span,
.body-brunnengeschichten .mainNav li#btn08 a,
.body-naechste .mainNav li#btn09 a
{
	color: #00aaca;
}






/*-----------------------------------------------------------------------------------
-------------------------------------------------------------------------------------
MediaQueries
-------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------*/

@media screen and (max-width: 1200px) {

body {
	font-size: 18px;
}

} /* Ende 1200 */


@media screen and (max-width: 1000px) {

body {
	font-size: 16px;
}

.flex-item:not(:last-child):after {
	right: 1.5em;
}


} /* Ende 1000 */


@media screen and (max-width: 830px) {

.siteFooter .flex {
	display: block;
}

.siteFooter .flex-item {
	border-bottom: 1px solid rgba(255, 255, 255, 0.5);
	padding: 0 0 1em 0;
	margin: 0 0 1em 0;
}

.flex-item:not(:last-child):after {
	content: none;
}

.siteFooter .logoLink {
    height: 3em;
}

} /* Ende 850 */



@media screen and (max-width: 700px) {

.mainImg {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.mainImg img {
	max-width: none;
	width: 112%;
	position: relative;
	left: -6%;
}

h1, h2 {
	font-size: 1.8em;
	line-height: 1.15em;
}

.box50, .box50:last-child {
	float: none;
	width: 100%;
	margin-bottom: 1.35em;
}

.coverRotateShadow {
	width: 70%;
/* 	margin: 5em auto; */
}

.body-home .box25 {
	width: 50%;
}

.box33, .box66 {
	width: 100%;
	padding-bottom: 1.5em;
}

.hideMobile {
	display: none;	
}

.smallMobile {
	width: 25%;
}

p.introTxt {
	font-size: 1.25em;
}

.imgBlock p {
	width: 50%;
	box-sizing: border-box;
	padding-bottom: 0;
}

.imgBlock p:first-child {
	border-bottom: 1px solid #fff;
	width: 100%;
}

/* #stoerer {
	top: -5em;
	left: 1%;
} */

/* Navigation
-----------------------------------------------------------*/

nav.mainNav {
	position: static;
	width: 100%;
	display: block;
	z-index: 100;
	background: #fff;
	width: 100%;
	text-align: right;
	padding: 0;
	min-height: 45px;
}

nav.mainNav > ul {
	display: none;
/* 	display: block; */
	background: #fff;
	margin: 2.35em 0 0 0;
	padding-bottom: 1em;
	position: relative;
	width: 100%;
}

nav.mainNav ul li {
	float: none;
	display: block;
	margin: 0 1em;
	padding: 0.25em 0;
}

nav.mainNav ul ul {
	position: static;
	display: block;
}


.mainNav ul ul {
	background: transparent;
	padding: 0.25em 0;
	border-top: none;
}

.mainNav ul ul li {
/*
	display: block;
	margin: 0 0 0 0;
*/
/* 	padding: 0 0.25em 0 0.25em; */
}

/*
.mainNav li:hover > ul {
	display: block;
}
*/

.mainNav ul ul li a {
/*
	display: block;
	margin: 0 0;
*/
	border-bottom: 1px solid #808080;
/* 	white-space: nowrap; */
	text-align: right;
	padding: 0.3em 0em 0.2em 0.75em;
	min-width: 0;
}

nav.mainNav label {
	display: block;
	line-height: 45px;
	padding: 0 0 0 2em;
	position: absolute;
	top: 0;
	right: 1em;
	background: url(../img/navIcon.svg) no-repeat left center;
	background-size: 40% 40%;
}



nav.mainNav input[type=checkbox]:checked ~ ul {
	display: block;
	position: absolute;
	z-index: 10;
}



} /* Ende 700 */

@media screen and (max-width: 500px) {

#stoerer {
	top: -0.5em;
	min-width: 175px;
	right: -1%;
}

} /* Ende 400 */

/* Advanced Checkbox Hack Navigation
-----------------------------------------------------------*/
body {
  -webkit-animation: bugfix infinite 1s;
}

.mainNav input[type=checkbox] {
	position: absolute;
	top: -9999px;
	left: -9999px;
}

.mainNav label {
	display: none;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}



/* Clearfix
-----------------------------------------------------------*/
.group:after {
  content: "";
  display: table;
  clear: both;
 }