/*
Farben:
* 

Schrift und Linie: #8B8000;
Orange: #F58221;
Background Navigation (highlight oder ausgewählt): #FEF2D9;
Background Seite selbst: #FEF6E6;

*/
body {
	font-family: Arial, Helvetica, sans-serif; /*new*/
	/*color:#be9e55; /*Baustellenseite*/
	/*background-color: #450d26; /*Baustellenseite*/
	background-color: white; /*new*/	
	color:#450d26; /*new*/
	font-size:16px;
}


/*  ########################
	Erweiterungen für header.css 
*/  
h1 {
	font-weight:bold;
	/*font-size:28px; /*orig*/
	font-size:22px; /**/
	padding-bottom:20px;
}
h1.startseite {
	font-size:34px;	
}
h1.center {
	font-size:34px;	
	text-align:center; 	
}
h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-weight:bold;
	/*font-size:22px; /*orig*/
	font-size:22px; /**/
	text-align:left; 
	padding-top:0px; 
}
h2.center {
	font-family: Arial, Helvetica, sans-serif;/*new*/
	font-weight:bold;/*new*/
	font-size:22px; /*new*/
	text-align:center; 
	padding-top:0px; 
}
p {
	margin-bottom: 1rem; /**/
}
sup {
	vertical-align:0.5em;
	font-size:0.6em;
}

img.zitat {
	width:70%; /**/
}

img.mail {
	width:240px;
	padding: 1px 0px 0px 0px; /* */ 
	/*height:20px;/**/
}
img.logo-gold {
	width:200px; /*280x373 180x240*/
	padding: 0px 40px 20px 250px; /* */    
    float: left;/**/
}
img.karte {
	width:450px; /*280x373 180x240*/
	padding: 6px 40px 20px 0px; /* */    
    float: left;
}
img.portrait{
	width:300px; /*280x373 180x240*/
	padding: 5px 40px 20px 0px; /* */    
    float: left;
}
img.bildContent{
	width:300px; /*280x373 180x240*/
	padding: 5px 40px 20px 0px; /* */    
    float: left;
}

ul.listen {
	list-style-position: outside;/**/
	/*list-style-position: inside!important;/**/
	position:relative;/**/
	left:17px;/**/
	margin: 5px 0px 0px 0px; /**/
	/*margin: 5px 0px 0px 27px; /* */
}
ul.own {
	list-style-image:url('/img/....gif');	
	position:relative;
	left:20px;
	margin: 5px 0px 0px 0px; 	
}

/*IE 10 & 11*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	ul.listen, ul.own {
		list-style-position: inside;
		left:0px;/**/
	}
}
/*IE Edge*/
/*@supports (-ms-accelerator:true) { /*not work*/
@supports (-ms-ime-align:auto) {
	ul.listen, ul.own {
		list-style-position: inside;
		left:0px;/**/
	}
}

.header-static,
.header-fixed,
.header-sticky,
.header-reveal {
	max-width:1520px; /* geht nicht auf die volle Breite*/
	width:auto; 
	padding:10px 0px 10px 0px; /* Linie steht nicht rechts links über*/
	border-bottom-color: #8B8000; /*ergo*/
	line-height:normal;/*new*/
	height:70px; /* new*/	
}
.logo {
	padding-left:30px; /**/
	padding-right:0px; /**/
	padding-top: 5px; /**/
	font-family:Arial, Helvetica, sans-serif;/*orig*/
	font-weight:normal;
	z-index:3;
	position:relative;
	top:-3px; /* new*/
	height:auto;
	overflow:hidden;
	/*width:181px; /*new*/
}
.wrapper-padding {
	padding-top:38px;
	padding-left:0px;
	padding-right:0px;
}
.max-width {
	/*max-width:1520px;/**/
	max-width:100%; /* dann volle Breite, auch bei 4K*/
	width:100%;
	margin:0 auto;
	overflow:hidden;
}
.same-high {
	/*float:left;/**/
	margin-bottom:-10000px !important;/**/
	padding-bottom:10000px;/**/
}


.picture {
	/*height:300px; /* führt in der mobbilen View für zu große Abstände nach unten!!*/
	overflow:hidden;
}
.welcome {
	margin-top:-10px; /*-10*/
	/*padding-bottom:40px; /*orig*/
	padding-bottom:0px; /*new*/
	padding-left:0px;
	padding-right:0px;
	margin-bottom:-4px;
}
.ganzeBreite {
	width:100%;
	max-width:1000px;
	margin:0 auto;
	background-color: #450d26;
	margin-top:-4px;/*Abstand nach Bild ohne Slider*/
}



.adresse {
	/*padding: 0px 20px 0px 20px; /* */    
    margin: 0px 10px 10px 200px; /**/
	/*float: left;/**/
	font-size:14px;/**/
	/*color: black;/**/
	height:auto;/**/
	/*display:inline-block;/**/
	/*text-align: right;/**/
	position: absolute;
	bottom:0px;
	right:10px;

}


a {
	color:black /**/
}
a:hover {
	text-decoration: underline;		
}
a.eyecatcher{
	color:#F58221; /*new */
}
a.gold{
	color:#be9e55;
}
.wrapper a {
	border-bottom-width: 0px;
	border-bottom-style: auto;
	border-bottom-color: none;
}
.wrapper a:hover {
	border-bottom-color: none;
	color: #black;/*new*/
	text-decoration: underline;		
}
.wrapper a.inline:hover {
	border-bottom-color: none;
	color: #black;/*new*/
	text-decoration: underline;		
}

.content {
	margin: 0 auto;	
	/*background-color:#901056; /*new*/
	padding-top:10px; /*new*/
	padding-bottom:10px;/*new*/
	/*height:20px;/**/
	/*max-width:1048px;/**/
}
.slider {
	margin: 0 auto;	
	background-color:#431327;/**/
	height:100%;/**/
}

.footer {
	/*all: initial;/**/
	/*all: unset;/**/
	width:100%;
	height:200px;
	background-image:url("/img/BG_Arabic_Ornament_Footer.jpg");/**/
	background-repeat:repeat-x;
	background-position:0px 0px;/**/
	padding: 0 0 0 0; /**/
	background-color:#431327; /**/
	margin: 0 auto;		
	/*background-position:left bottom;/**/
	/*background-color:#901056; /*new*/
	/*padding-top:10px; /*new*/
	/*padding-bottom:10px;/*new*/
	/*height:20px;/**/
	/*left:0px;/**/
	/*right:0px;/**/
}

.url {
	/*width:60%;/**/
	width:80%;/**/
	margin: 0 auto;	/**/
	padding: 160px 0 0 0;
}
.url a, .url a:visited {
	color: white;/**/
	border-bottom-style: none;/**/
}
.url a:hover {
	color: white;/**/
	/*font-weight:bold; /**/
	text-decoration: underline;		
}




/*  ########################
	Erweiterungen für cssgrid.css
*/  

@media screen and (min-width: 0px) and (max-width: 1169px) {
	.logo{
		/*height:25px;/**/
		/*width:70px;/**/
	}
	.wrapper-padding {
		/*padding-top:0px;/**/
	}
	.header-fixed{
		/*height:25px;/**/
	}
	.nav{
		/*margin-top:0px;/**/
		
	}
}




@media screen and (min-width: 500px) and (max-width: 767px) {
	img.zitat {
		width:100%; /**/
	}
} /*min500 max 767*/


@media screen and (max-width: 499px) { /*499*/
	h1 {
		font-size:22px; /*28*/
	}
	h1.startseite {
		font-size:26px;	/*34*/
	}
	.p6.stack.margins .one, .p6.stack.margins .two, .p6.stack.margins .three, .p6.stack.margins .four, .p6.stack.margins .five, .p6.stack.margins .six {
		/*width:100%; /**/
		/*margin-left:0; /**/
		/*float:none;/*orig*/
	}


	img.mail {
		/*width:100%; /*280x373 180x240*/
		/*padding: 10px 0px 20px 0px; /* */    
		/*float: left; /**/
	}	
	ul.nav-buttons li {
		line-height:normal; /*new*/
	}
	img.karte {
		width:100%; /*280x373 180x240*/
		padding: 0px 0px 10px 0px; /* */    
		float: left;
	}	
	img.zitat {
		width:100%; /**/
	}	
	
} /*max-width: 499px*/

/*
.p6.stack.margins.massagen .one, .p6.stack.margins.massagen .four {
	background-color: #C191A6; 
}
.p6.stack.margins.massagen .two, .p6.stack.margins.massagen .five {
	background-color: #D5B5C4;
}
.p6.stack.margins.massagen .three, .p6.stack.margins.massagen .six {
	background-color: #E3CED8;
}
/**/
	
}
	

.abstand{
	height:50px;
}
	
figure {
	position: relative;
	/*width: 280px;/**/
	/*width: auto;/**/
	/*border: 1px solid gainsboro;/*orig*/
	background: transparent;
}
figure .teaserImage {
	width:80%;
	height:auto;
	margin-right:20%;/**/
	float:left;
}
.massagen > div figure .teaserImage {
	width:80%; /*60%*/
	height:auto;
	/*margin-top: 15px;/**/
	margin-right:0%;/**/
	float: none;

}
figure figcaption .gutscheinIcon {
	width: 20px;
	float: none;
}
figure figcaption {
	margin-top:0px;
	/*margin-bottom:0px;/**/
	color:#8E1C57;
	font-weight:bold;
	font-size:14px;
	line-height:30px;/*30*/
	padding-bottom:20px;
	text-align: left;
	/*font-size: 1rem;/**/
	/*margin-bottom: 2rem;/**/
	/*height:2rem;/**/
}
.bildunterschrift_klein {
	font-size:14px;
}
.subheadline {
	font-size:16px;
}
.massagen figure figcaption {
	font-weight:bolg;
	font-size:20px;
	color:#450d26;
	margin-top:-15px;
	margin-bottom:0px;
	line-height:20px;
	text-align: center;
}
	
@media screen and (max-width: 499px) { /*499*/
	figure img {
		width:100%;
		height:auto;
		margin-right:0%;/**/
		float:left;
	}
	figure .teaserImage {
		width:90%;
		height:auto;
		margin-right:10%;/**/
		float:left;
	}	
	.logo {
		padding-left:0px; /**/
		margin-left:-5px; /**/
	}
} /* media screen and (max-width: 499px) */
  
@media only screen and (max-width: 767px) {
	.massagen figure figcaption {
		margin-top:-20px;
		margin-bottom:0px;
		text-align: center;
	}	  
}

.zelleninhalt {
	padding: 20px;/**/
}
.zelleninhalt > img {
	width: 40%;
	float: left;
	padding-right: 20px;
	padding-bottom: 20px;
}

.zelle {
  /*margin-bottom: 10px; /**/
}
.zelle.one {
	background-color: #C191A6;
}
.zelle.two {
	background-color: #D5B5C4;
}
.zelle.three {
	background-color: #E3CED8;
}
.zelle.four {
	background-color: #F1E6EB;
}

/*@media only screen and (min-width: 720px) {/**/
@media only screen and (min-width: 1170px) {/**/
    .tabelle {
		display: table;
		width: 100%;
	}

	.zeile {
		display: table-row;
	}

	.zelle {
		display: table-cell;
		vertical-align: top;
		width: 25%;
	}
	.zelle.one {
		/*border-right: 5px solid #fff;/**/
	}
	.zelle.two {
		/*border-left: 5px solid #fff;/**/
		/*border-right: 5px solid #fff;/**/
	}
	.zelle.three {
		/*border-left: 5px solid #fff;/**/
		/*border-right: 5px solid #fff;/**/
	}
	.zelle.four {
		/*border-left: 5px solid #fff;/**/
	}
}
@media only screen and (min-width: 720px) and (max-width: 1170px) {
	.zelle {
		height:250px;
	}
	.zelle.massagen  {
		height:390px;	
	}	
	.zelle.one {
		width:50%;
		float:left;
	}
	.zelle.two {
		width:50%;
		margin-left:50%;
		float:none;
	}
	.zelle.three {
		width:50%;
		margin-left:0;
		float:left;
	}
	.zelle.four {
		width:50%;
		float:none;
		margin-left:50%;
	}	
}
@media only screen and (min-width: 720px) and (max-width: 960px) {
	.zelle {
		height:330px;
	}
	.zelle.massagen  {
		height:480px;	
	}	
}



.popup-overlay {
	opacity: 0;
	display: block;
	visibility: hidden;
	/*background-image: repeating-linear-gradient(-45deg, rgba(0,0,0,0.6) 0px, rgba(0,0,0,0.6) 10px, rgba(136,34,0,0.6) 10px, rgba(136,34,0,0.6) 20px); /**/
	background-color: rgba(0,0,0,0.6);
	position: fixed;
	transition: all 0.5s ease;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	text-align: center;
	pointer-events: none;
	z-index: 99;
}
.popup-overlay .popup-content {
	transition: -webkit-transform 0.5s ease-in;
	transition: transform 0.5s ease-in;
	transition: transform 0.5s ease-in, -webkit-transform 0.5s ease-in;
	-webkit-transform: perspective(500px) translateZ(-5em) rotateX(-20deg);
			transform: perspective(500px) translateZ(-5em) rotateX(-20deg);
}
.popup-overlay:target {
	pointer-events: auto;
	opacity: 1;
	visibility: visible;
}
.popup-overlay:target .popup-content {
	transition-timing-function: ease-out;
	-webkit-transform: perspective(500px) translateZ(0) rotateX(0deg);
			transform: perspective(500px) translateZ(0) rotateX(0deg);
}
.popup-content {
	text-decoration: none;
	color: #be9e55;/*#000*/
	/*display: block; /**/
	background-color: #431327 !important;/*#fff*/
	width: 70%;
	height: 70%; /*100px*/
	position: absolute; /* absolute */
	top: 15%;
	left: 15%;
	/*right: 0; /**/
	/*bottom: 0; /**/
	/*margin: auto;/**/
	/*padding: 2em; /**/
	padding-left:2%;
	padding-right:2%;
	line-height: normal !important;  
	float: left !important;
	text-align: left !important;
}
.popup-content .teaserImage{
	width:50%;
	float:left !important;
}
.popup-content:before {
	content: '×';
	position: relative;
	left: 96%;
	top: 0;
	display: block;
	font-family: serif;
	font-size: 2em;
	width: 1em;
	height: 1em;
	line-height: 1em;
}