/* css/fonts.css */
/****************************************************************************************************************************************/

/* roboto-condensed-300italic - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 300;
  src: url('/fonts/roboto-condensed-v19-latin-300italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/roboto-condensed-v19-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/roboto-condensed-v19-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/roboto-condensed-v19-latin-300italic.woff') format('woff'), /* Modern Browsers */
       url('/fonts/roboto-condensed-v19-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/roboto-condensed-v19-latin-300italic.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
	/*font-display: swap;*/
}
/* roboto-condensed-regular - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/roboto-condensed-v19-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/roboto-condensed-v19-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/roboto-condensed-v19-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/roboto-condensed-v19-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/fonts/roboto-condensed-v19-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/roboto-condensed-v19-latin-regular.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
	/*font-display: swap;*/	   
}
/* roboto-condensed-italic - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 400;
  src: url('/fonts/roboto-condensed-v19-latin-italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/roboto-condensed-v19-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/roboto-condensed-v19-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/roboto-condensed-v19-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('/fonts/roboto-condensed-v19-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/roboto-condensed-v19-latin-italic.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
	/*font-display: swap;*/	   
}
/* roboto-condensed-700 - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  src: url('/fonts/roboto-condensed-v19-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/roboto-condensed-v19-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/roboto-condensed-v19-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/roboto-condensed-v19-latin-700.woff') format('woff'), /* Modern Browsers */
       url('/fonts/roboto-condensed-v19-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/roboto-condensed-v19-latin-700.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
	/*font-display: swap;*/	   
}
/* roboto-condensed-700italic - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 700;
  src: url('/fonts/roboto-condensed-v19-latin-700italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/roboto-condensed-v19-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/roboto-condensed-v19-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/roboto-condensed-v19-latin-700italic.woff') format('woff'), /* Modern Browsers */
       url('/fonts/roboto-condensed-v19-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/roboto-condensed-v19-latin-700italic.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
	/*font-display: swap;*/	   
}
/* roboto-condensed-300 - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 300;
  src: url('/fonts/roboto-condensed-v19-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/roboto-condensed-v19-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/roboto-condensed-v19-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/roboto-condensed-v19-latin-300.woff') format('woff'), /* Modern Browsers */
       url('/fonts/roboto-condensed-v19-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/roboto-condensed-v19-latin-300.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
	/*font-display: swap;*/	   
}/* css/format.css */
/****************************************************************************************************************************************/

html
{
	margin: 0;
	padding: 0; 
	-webkit-tap-highlight-color: transparent;
	height: 100%;
}

body
{
	margin: 0;
	padding: 0;
	font-family: 'Roboto Condensed', sans-serif;
	background-color: #fff;
	overflow-y: scroll;
	overflow-x: hidden;
	
	--main-margin: 75px;
	--main-width-substraction: 150px;
	--main-font-color: #4a4a49;
	
	--headercolor: #ffffff;
	--headerhovercolor: #dddddd;
	
	--gold: #d2b779;
	--grey: #c7beb4;
    --darkgrey: #929292;
	--mediumgrey: #e4e4e4;
    --lightgrey: #f9f9f8;
    --lightTaupe: #d5cec7;
    --black: #262626;
	
	--transitiontime1: 0.3s;
	
	transition: var(--transitiontime1) all;
	
	
	height: 100%;
	position: static !important;
}


body.scrolled, body.permanentscrolled
{
	--headercolor: #444444;
}


body.opened
{
	overflow-y: hidden;
}

body .woot-widget-bubble.woot-elements--right
{
	right: 60px !important;
	bottom: 75px !important;
}

@media( max-width: 1000px )
{
	body
	{
		--main-margin: 50px;
		--main-width-substraction: 100px;
        --headercolor: var(--main-font-color);
	}

    body .woot-widget-bubble.woot-elements--right
    {
        bottom: 50px !important;
    }
}

@media( max-width: 650px )
{
	body
	{
		--headercolor: var(--main-font-color);
	}

    body .woot-widget-bubble.woot-elements--right
    {
        right: 40px !important;
        bottom: 75px !important;
    }
}

@media only screen and (max-width: 450px)
{
	body .woot-widget-bubble.woot-elements--right
	{
	    right: 65px !important;
		bottom: 105px !important;
	}
}



@media( max-width: 550px )
{
	body
	{
		--main-margin: 25px;
		--main-width-substraction: 50px;
	}
}

@media( max-width: 400px )
{
	body
	{
		--main-margin: 15px;
		--main-width-substraction: 30px;
	}
}

/****************************************************************************************/


body.scrolled .activator
{
    color: #444444 !important;
}

.goog-te-gadget-icon
{
  display:none;
}


.goog-te-gadget-simple
{
    background-color: transparent !important;
    border:0 !important;
    font-size: 10pt;
    font-weight:800;
    display: inline-block;
    padding:10px 10px !important;
    cursor: pointer;
    zoom: 1;
}

.goog-te-gadget-simple  span
{
    font-family: sans-serif !important ;
    color:#fff !important;
    font-size: 16px !important;
    font-weight: 300 !important;
    text-transform: uppercase !important;
}

.scrolled .goog-te-gadget-simple  span
{
    color:#000 !important;
}

/*************************************************************************************************/


/* WSMU Basis CSS */
body {top: 0 !important;}
h1 {font-size:20px;}

/* WSMU Google Translate */
#wsmu-google-translate
{
    display: none;
    width: auto;
    margin-top:0;
}

#wsmu-google-translate.show
{
    display: block;
}


#wsmu-google-translate-element
{
    display: none !important;
}

#goog-gt-tt
{
    display: none !important;
}

.goog-te-banner-frame
{
    display: none !important;
}

.goog-te-menu-value:hover
{
    text-decoration: none !important;
}

#wsmu-google-translate ul
{
    list-style: none;
    padding-left: 0px;
    margin-bottom: 0px;
}

#wsmu-google-translate > ul > li
{
    display:inline-block;
    margin-left: 15px;
}

@media (max-width: 650px)
{
    #wsmu-google-translate > ul > li
    {
        margin: 15px 0;
        display: block;
    }
}

#wsmu-google-translate > ul > li > a > img
{
    border: none;
    box-shadow: 0px 0px 2px #000;
    margin-right: 2px;
    width: 23px;
    height: auto;
}

.wsmu-gt-tooltip
{
    width: 110px;
    background-color: #000;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 2px 0;
    position: absolute;
    z-index: 999;
    top: 20px;
    left: 15px;
    font-size: 9px;
    visibility: hidden;
}

.wsmu-gt-tooltip:after
{
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #000000 transparent;
}

/*.wsmu-gt-icons:hover .wsmu-gt-tooltip
{
    visibility: visible;
}*/

#fingerprint
{
	display: none;
	position: fixed;
	bottom: 10px;
	right: 10px;
	z-index: 600;
	margin: 0;
	padding: 3px;
	border-radius: 20px;
	width: 50px;
	height: 50px;
    border: 1px solid #000;
	background-color: #fff;
}


@media only screen and (max-width: 650px)
{
	#fingerprint
	{
		bottom: 75px;
		width: 40px;
		height: 40px;
	}
	
	#fingerprint svg
	{
		width: 100% !important;
		height: 100% !important;
	}
}



@media only screen and (max-width: 450px)
{
	#fingerprint
	{
		bottom: 105px;
	}
}

/*************************************************************************************************/

#inhalte .show-no
{
    display: none;
}

#inhalte .show-yes
{
    display: block;
}

/*************************************************************************************************/

h1, h2, h3, h4
{
	margin: 0;
	padding: 0;
}

p
{
	margin: 0;
	padding: 15px 0;
	color: var(--main-font-color);
}

/*************************************************************************************************/

.button
{
	font-size: 0 !important;
}

.button a
{
	color: #fff !important;
	font-size: 16px;
	font-weight: 300;
	text-decoration: none;
	transition: all var(--transitiontime1);
	display: inline-block;
	padding: 7px 11px;
	letter-spacing: 1px;
	text-transform: uppercase;
	height: 32px;
	vertical-align: bottom;
	box-sizing: border-box;
	line-height: normal !important;
}

.button .anfragen, .button .anfragelink
{
    background-color: var(--grey);
	border: 1px solid var(--grey);
}



.bottomSpace .button .anfragelink
{
	font-size: 20px;
	height: auto;
	padding: 12px 18px;
}





.button .buchen
{
	background-color: var(--gold);
	border: 1px solid var(--gold);	
}

.button .hide
{
	display: none !important;
}


.button .anfragen:hover, .button .anfragelink:hover
{
	color: var(--grey) !important;
	background-color: transparent;
}

.button .buchen:hover
{
	color: var(--gold) !important;
	background-color: transparent;
}


/*************************************************************************************************/

img.svg
{
	display: none;
}


/*************************************************************************************************/


.content
{
	margin: 50px 0 0 0;
	padding: 0 30px;
	font-size: 14px;
}

@media( max-width: 700px )
{
	.content
	{
		padding: 0 15px;
	}
}

.content > p
{
    width: 100%;
}

.content p
{
	font-size: 18px;
	font-weight: 300;
}

.content h1
{
    margin: 70px 0 0 0;
}

@media( max-width: 700px )
{
	.content h1
	{
		margin: 20px 0 0 0;
	}
}

.content li
{
    margin: 0 0 8px 0;
}

.content .linie
{
    display: flex;
    flex-direction: row;
    margin: 10px auto;
    padding: 10px 0;
    border-bottom: 1px solid #A3A3A3;
}

.content .linie div
{
    flex: 8;
    align-items: flex-start;
}

.content .linie p
{
    text-align: left;
    text-align-last: left;
    margin: 3px 0;
    padding: 0;
}

.content .linie div:first-of-type
{
    flex: 150px;
}

.content .linie div:first-of-type img
{
    margin: 0 !important;

}

@media( max-width: 700px )
{
    .content .linie
    {
        display: block;
        border-bottom: 1px solid #A3A3A3;
    }

    .content .linie div
    {
        display: block;
    }

    .content .linie p
    {
        text-align: justify;
        text-align-last: center;
    }

    .content .linie div:first-of-type
    {
        margin: 0 0 10px 0 !important;
    }

    .content .linie div:first-of-type img
    {
        margin: 0 auto !important;
    }
}

/**************************************************************************************************/

.gaestebuch form div
{
    margin: 0 auto;
    padding: 0;
    max-width: 1200px;
}

.gaestebuch form p
{
    text-align-last: left;
}

.gaestebuch form label
{
    width: 250px;
    display: inline-block;
    vertical-align: top;
}

.gaestebuch form input
{
    width: 500px;
}

.gaestebuch form textarea
{
    width: 500px;
}

.gaestebuch .error
{
    color: red;
}

.gaestebuch .content .linkButton
{
    position: relative;
    margin: 15px 0;
}

/**************************************************************************************************/

.overlay #overlaycontent
{
    padding: var(--main-margin);
	box-sizing: border-box;
}

.overlay #overlaycontent p
{
    padding: 5px 0;
	font-size: 18px;
}

.overlay #overlaycontent img
{
    display: inline;
}

@media( max-width: 650px )
{
	.overlay #overlaycontent
	{
		padding: 50px var(--main-margin);
	}
	
	.overlay #overlaycontent h2
	{
		font-size: 30px;
	}
	
	.overlay #overlaycontent p
	{
		font-size: 16px;
	}
}


@media( max-width: 400px )
{
	.overlay #overlaycontent
	{
		padding: 40px var(--main-margin);
	}
	
	.overlay #overlaycontent h2
	{
		font-size: 28px;
	}
	
	.overlay #overlaycontent p
	{
		font-size: 15px;
	}
}


/**************************************************************************************************/


.clickformore
{
	cursor: pointer;
}

.triangle
{
	font-size: 24px;
	display: inline-block;
	transition: 0.5s all;
}

.isopen .triangle
{
	transform: scaleY(-1) translateY(-4px);
}


.vorteile
{
	margin-top: 20px !important;
}


/**************************************************************************************************/


#svgcontainer
{
	display: none;
}

.hiddenclear
{
    font-size: 1px !important;
    line-height: 1px !important;
    clear: both !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 1px !important;
    visibility: hidden !important;
    float: none !important;
}



/**************************************************************************************************/

.scpt .hiddenclear
{
	display: none !important;
}

.cpt
{
	display: block !important;
	padding: 0 !important;
	border: 0 !important;
	width: 100%;
	text-align: left;
}


#JagdhofAnfrageRestplatz .cpt p
{
	width: 100% !important;
	text-align: left !important;
	display: block !important;
	text-align-last: left !important;
	padding: 0 0 10px 0 !important;
}
/* css/navi.css */
/****************************************************************************************************************************************/

#menubutton
{
	cursor: pointer;
	z-index: 50;
	text-transform: uppercase;
	border: none;
	background-color: transparent;
	color: var(--headercolor);
	font-size: 17px;
	margin-right: 25px;
}

#menubutton span
{
	transition: all var(--transitiontime1);
}


#menubutton:focus
{
	outline: none;
}

#menubutton svg
{
	outline: none !important;
	width: 20px;
	height: 14px;
}


#svg-menubutton rect
{
	transition: all var(--transitiontime1);
	fill: var(--headercolor);
	height: 1px !important;
	width: 20px;
}

#svg-menubutton .top
{
	transform: translate(0, 2px);
}

#svg-menubutton .bottom
{
	transform: translate(0, 12px);
}

#svg-menubutton .middle
{
	transform: translate(0, 7px);
} 



.open #menubutton .top, .open #menubutton .bottom  
{
	transform: translate(0, 8px); 
	opacity: 0; 
	fill: #fff;
} 

.open #menubutton .cross1
{ 
	transform: translate(3px, 14px) rotate(-45deg);
	fill: #fff;
} 


.open #menubutton .cross2 
{ 
    transform: translate(4px, 0px) rotate(45deg);
	fill: #fff;
} 

.open #menubutton span
{
	color: #fff;
}

@media (max-width: 650px)
{
	#menubutton 
	{
		margin-right: 5px;
	}	

	.open #menubutton .cross1
	{
		fill: var(--headercolor);
	} 


	.open #menubutton .cross2 
	{ 
		fill: var(--headercolor);
	} 
}

@media (max-width: 630px)
{
	
	#menubutton 
	{
		margin-right: 5px;
	}		
}

@media (max-width: 650px)
{
	#menubutton 
	{
		order: 1;
		margin-right: 0;
		flex: 1;
		border-right: 1px solid #fff;
	}
	
	#menubutton span
	{
		display: none;
	}
}

#naviwrapper
{
    position: fixed;
    top: 0;
    left: -100vw;
    margin: 0;
    padding: 00;
    background-color: rgba(255, 255, 255, 1);
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    opacity: 0;
    transition: opacity var(--transitiontime1) ease 0s, left 0s ease 0s;
    height: 100vh;
    overflow: hidden;
}


#naviwrapper.open
{
	opacity: 1;
	left: 0;
}


#naviwrapper picture 
{
	width: 100%;
	height: 100%;
	box-sizing: border-box;
}


#naviwrapper > picture > img
{
    z-index: 10;
	opacity: 0;
	object-fit: cover;
	width: 100%;
	height: 100%;
}


#naviwrapper > picture > img
{
    z-index: 10;
    opacity: 1;
    object-fit: cover;
    width: 100% !important;
    height: 100% !important;
}

#navi
{
	transition: opacity var(--transitiontime1);
	display: flex;
	opacity: 0;
	z-index: 0;
	width: 100%;
    height: 100%;
	position: absolute;
	top: 0;
    left: 0;
	align-items: center;
	justify-content: center;
}

.open #navi
{
    opacity: 1;
    z-index: 100;
}

#navi ul
{
    padding: 0;
    margin: 0;
	font-weight: 300;
	list-style-type: none;
	text-transform: lowercase;
	width: 100%;
}

#navi > ul
{
	z-index: 50;
	display: grid;
	grid-template-columns: repeat(9, 1fr);
	gap: 2px;
	justify-content: space-between;
	align-items: center;
	height: 100%;
}

#navi > ul.main-li-count-4
{
	grid-template-columns: repeat(4, 1fr);	
}

#navi > ul.main-li-count-5
{
	grid-template-columns: repeat(5, 1fr);	
}

#navi > ul.main-li-count-6
{
	grid-template-columns: repeat(6, 1fr);	
}

#navi > ul.main-li-count-7
{
	grid-template-columns: repeat(7, 1fr);	
}

/**************************************************************************************************/

#navi > ul > li 
{
	margin: 0;
	padding: 15px 5px;
	list-style-type: none;
	position: relative;
	z-index: 50;
	height: 200px;
	box-sizing: border-box;
	background-color: rgba(255, 255, 255, 0.8);
	display: flex;
	text-align: center;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	transition: all 0.7s;
}

/* #navi > ul > li:hover,  */
#navi > ul > li.opened
{
	background-color: rgba(255, 255, 255, 1);
	height: 350px;
	/*height: 450px;*/
}

#navi ul li a, #navi ul li span, #navi ul li ul .aktiv-li a
{
	padding: 0 0 5px 0;
	margin: 0;
	display: block;
	text-decoration: none;
	color: var(--main-font-color);
	font-size: 22px;
	font-weight: 400;
	box-sizing: border-box;
}

#navi ul li ul .aktiv-li a
{
	text-transform: lowercase;
}

#navi ul li span
{
	cursor: default;
}

#navi > ul > li > div
{
	width: 100%;
	height: 80px;
	transition: all 0.6s;
	overflow: hidden;
}

/* #navi > ul > li:hover > div,  */
#navi > ul > li.opened > div
{
	height: 0;
}

#navi > ul > li > div > span
{
	font-size: 14px;
	text-transform: uppercase;
	transition: all 0.6s;
}

/* #navi > ul > li:hover > div > span,  */
#navi > ul > li.opened > div > span
{
	opacity: 0;
	transform: scale(0.3);
}

#navi li div img
{
	display: block;
	width: 20%;
	margin: 0 auto;
}

#navi > ul > li > ul 
{
	margin-top: 10px;
	height: 0;
	list-style-type: none;
	overflow: hidden;
	transition: all 0.6s;
}

/* #navi > ul > #navi_5.opened > ul */
/* { */
	/* height: 250px; */
/* } */

/* #navi > ul > #navi_50.opened > ul */
/* { */
	/* height: 170px; */
/* } */

/* #navi > ul > #navi_6.opened > ul */
/* { */
	/* height: 225px; */
/* } */

/* #navi > ul > #navi_7.opened > ul */
/* { */
	/* height: 170px; */
/* } */

/* #navi > ul > #navi_8.opened > ul */
/* { */
	/* height: 195px; */
/* } */

/* #navi > ul > #navi_9.opened > ul */
/* { */
	/* height: 170px; */
/* } */

/* #navi > ul > #navi_10.opened > ul */
/* { */
	/* height: 225px; */
/* } */

/* #navi > ul > #navi_11.opened > ul */
/* { */
	/* height: 250px; */
/* } */


/**************************************************************************************************/

#navi > ul > .li-count-1.opened > ul
{
	height: 45px;
}

#navi > ul > .li-count-2.opened > ul
{
	height: 70px;
}

#navi > ul > .li-count-3.opened > ul
{
	height: 95px;
}

#navi > ul > .li-count-4.opened > ul
{
	height: 120px;
}


#navi > ul > .li-count-5.opened > ul
{
	height: 145px;
}

#navi > ul > .li-count-6.opened > ul
{
	height: 170px;
}

#navi > ul > .li-count-7.opened > ul
{
	height: 195px;
}

#navi > ul > .li-count-8.opened > ul
{
	height: 225px;
}

#navi > ul > .li-count-9.opened > ul
{
	height: 250px;
}

#navi > ul > .li-count-10.opened > ul
{
	height: 275px;
}

#navi > ul > .li-count-11.opened > ul
{
	height: 300px;
}

#navi > ul > .li-count-12.opened > ul
{
	height: 325px;
}

#navi > ul > .li-count-13.opened > ul
{
	 height: 350px;
	/*height: 375px;*/
}

/**************************************************************************************************/

#navi ul li ul li a
{
	padding: 5px 10px 5px 10px;
	font-size: 14px;
	text-transform: uppercase;
}


/**************************************************************************************************/


#navi svg
{
	width: 80px;
	transition: all 0.6s;	
    margin-top: 10px;
}

/* #navi > ul > li:hover svg.svg,  */
#navi > ul > li.opened svg.svg  
{
    transform: scale(5.3);
    opacity: 0;
}


#navi svg .fill
{
	fill: var(--main-font-color);
	transition: all 0.6s;		
}

/* #navi > ul > li:hover path.fill,  */
#navi > ul > li.active path.fill
{
    fill: #ffffff;
}


#navi svg.hotel
{
	width: 40px;
}

#navi svg.genuss
{
	width: 40px;
}

#navi svg.beautyschloessl
{
	width: 40px;
}

#navi svg.preise
{
	width: 55px;
}

#navi svg.angebote
{
	width: 35px;
}

#navi svg.fit-aktiv
{
	width: 45px;
}

#navi svg.freizeit-aktiv
{
	width: 30px;
}



#navi svg.wissenswertes
{
	width: 17px;
}

#navi svg.tipps
{
	width: 45px;
}

#navi svg.anfahrt
{
	width: 50px; 
}

@media (max-width: 1800px)
{
	#navi > ul
	{
		grid-template-columns: repeat(5, 1fr);
		grid-template-rows: 1fr 1fr;
	}
}

@media (max-width: 1100px)
{
	#navi > ul
	{
		grid-template-columns: repeat(1, 1fr);
		grid-template-rows: repeat(8, 1fr);
		overflow-y: scroll;
		align-items: stretch;
	}
	
	#navi > ul > li
	{
		flex: auto;
		width: 100%;
		height: auto !important;
		padding: 20px 5px;
		margin: 0;
	}
	
	#navi > ul > li svg
	{
		display: none;
	}
	
	#navi > ul > li > div 
	{
		display: none;
	}
	
	#navi > ul > li > ul 
	{
		height: auto !important;
	}	
	
	#navi > ul > li > ul > li a
	{
		padding: 8px; 
	}
}

/*******************************************************************************************/

@media (max-width: 650px)
{
	#naviwrapper
	{
		top: 0;
		height: calc(100% - 60px);
	}
	
	#naviwrapper > picture > img
	{
		margin-top: 0;
	}

	#navi
	{
		top: 0;
	}
}/* css/header.css */
/****************************************************************************************************************************************/

header
{
    z-index: 1000;
    padding: 10px var(--main-margin) 10px var(--main-margin);
	position: fixed;
	width: 100%;
	height: 130px;
	top: 0;
	box-sizing: border-box;
	display: flex;
	margin: 0;
	align-items: center;
	transition: var(--transitiontime1) all;
}

.scrolled header, .permanentscrolled header
{
	background-color: #fff;
	border-bottom: 1px solid #ddd;
	height: 75px;	
}

#bild:before
{
	content: ' ';
	position: absolute;
	top: 0; 
	left: 0;
	right: 0;
	bottom: 0;
	height: 100%;
	background: linear-gradient(#00000055 0, #00000000 25%);
	z-index: 100;
}



@media (max-width: 1000px)
{
    header
    {
        background-color: #fff;;
		height: 75px;
    }

}


@media (max-width: 650px)
{
	header 
	{
		top: auto;
		bottom: 0;
		padding: 0;
		background-color: var(--lightTaupe);
		justify-content: stretch;
		align-items: stretch;
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		height: 60px;
	}
	
	.scrolled header, .permanentscrolled header
	{
		border-bottom: none;
		background-color: var(--lightTaupe);
		height: 60px;
	}
}

/**************************************************************************************************/

#logo
{
    margin: 0 auto;
    padding: 1.5vw 1vw;
    position: fixed;
    top: 0;
    right: 0;
	left: 0;
    width: 15vw;
	min-width: 200px;
    display: flex;
    height: 130px;
	align-items: center;
    z-index: 2000;
    transition: all var(--transitiontime1);
    /* background-color: var(--grey); */
	box-sizing: border-box;
	--color-ja: var(--headercolor);
	--color-gdhof: var(--headercolor);
	--color-wellnesshotel: var(--headercolor);
	--color-stars: var(--headercolor);
}

@media (max-width: 1370px)
{
	#logo
	{
		padding: 20px 10px;
	}
}

.scrolled #logo, .permanentscrolled #logo
{
	width: 5vw;
	padding: 14px 20px;
	height: 75px;
}

@media (max-width: 1000px)
{
    #logo
    {
        width: 5vw;
	    padding: 14px 20px;
	    height: 75px;
        --color-ja: var(--main-font-color);
	    --color-gdhof: var(--main-font-color);
	    --color-wellnesshotel: var(--main-font-color);
	    --color-stars: var(--main-font-color);

    }
}

#logo #logowhite
{
	transform: translate(0,0);
}


#footer #logowhite
{
	transform: translate(0,0);
}



@media( max-width: 650px )
{
	.index #logo
	{
		--color-ja: #fff;
		--color-gdhof: #fff;
		--color-wellnesshotel: #fff;
		--color-stars: #fff;
	}
	
	
	#logo
	{
        --color-ja: var(--main-font-color);
	    --color-gdhof: var(--main-font-color);
	    --color-wellnesshotel: var(--main-font-color);
	    --color-stars: var(--main-font-color);
	}	
	

    .neuigkeiten #logo
    {
        --color-ja: var(--main-font-color);
	    --color-gdhof: var(--main-font-color);
	    --color-wellnesshotel: var(--main-font-color);
	    --color-stars: var(--main-font-color);
        margin-top: 20px;
    }
}

	.opened #logo
	{
		display: none;
	}


#footer 
{
	--color-ja: #fff;
	--color-gdhof: #fff;
	--color-wellnesshotel: #fff;
	--color-stars: #fff;
}

#logowhite .ja
{
	fill: var(--color-ja);
	transition: var(--transitiontime1) all;
}


#logowhite .gdhof
{
	fill: var(--color-gdhof);
	transition: var(--transitiontime1) all;
}

#logowhite .wellnesshotel
{
	fill: var(--color-wellnesshotel);
	transition: var(--transitiontime1) all;
}

#logowhite .stars
{
	fill: var(--color-stars);
	transition: var(--transitiontime1) all;
}

#logocolored
{
	transform: translate(0,0);
}

.logocolored 
{
	display: none;
}

#logocolored .ja
{
	fill: var(--headercolor);
}

#logocolored .gdhof, #logocolored .wellnesshotel, #logocolored .stars 
{
	/* fill: var(--main-font-color); */
	fill: #fff;;
}

#logo img, #logo svg
{
	width: 100%;
	height: auto;
}

@media (max-width: 650px)
{
	#logo
	{
		background-color: transparent;
		border: none;
		left: 0;
		right: 0;
		margin: 0 auto;
		position: absolute;
		padding: 10px 10px;
	}
	
	.opened #logo
	{
		position: fixed;
	}
	
}

/**************************************************************************************************/

.phone
{
    color: var(--headercolor);
    transition: all var(--transitiontime1);
	font-weight: 300;
	font-size: 17px;
	order: 2;
	display: flex;
	text-decoration: none;
    justify-content: center;
	align-items: center;
}



.phone svg
{
    width: auto;
    height: 18px;
	vertical-align: middle;
	margin-right: 5px;
	fill: var(--headercolor);
	transition: all var(--transitiontime1);
}

.phone svg .fill
{
    
}

@media (max-width: 1300px)
{
	.phone span
	{
		display: none;
	}
}

@media (max-width: 650px)
{
	.phone
	{
	    flex: 1;
		border-right: 1px solid #fff;
	}
}





/**************************************************************************************************/

#header .hb-gutschein
{
	display: none;
}

@media (max-width: 650px)
{
	#header .hb-gutschein
	{
		display: flex;
		align-items: center;
		margin: 0;
		order: 4;
		flex: 1;
		justify-content: center;
		
	}

	#header .hb-gutschein svg
	{
		fill: var(--headercolor);
	}
}


#header .hb-anfragen, #header .hb-buchen, #header .hb-gutschein
{
	display: none;
}

@media (max-width: 650px)
{
	#header .hb-anfragen, #header .hb-buchen, #header .hb-gutschein
	{
		display: flex;
		align-items: center;
		margin: 0;
		order: 4;
		flex: 1;
		justify-content: center;
		flex-direction: column;
		font-size: 13px;
		text-decoration: none;
		color: var(--headercolor);
		border-right: 1px solid #fff;
		text-transform: lowercase;
        text-align: center;
	}

	#header .hb-anfragen svg, #header .hb-buchen svg, #header .hb-gutschein svg
	{
		margin: 5px 0 4px 0;
		width: 20px;
		fill: var(--headercolor);
	}
}







/**************************************************************************************************/

#bild.fullframe
{
    width: 100%;
    height: 100vh;
    box-sizing: border-box;
    overflow: hidden;
    margin: 0;
    overflow: hidden;
    position: relative;
	z-index: 1;
	
	
	display: flex;
	align-items: center;
	
}

@media (max-width: 950px)
{
    .test #bild.fullframe
    {
        height: 40vh;
    }

    .ihre-gastgeber #bild.fullframe
    {
        height: 65vw;
    }
}


#bild p 
{
    margin: 0;
    padding: 0;
    width: 100%;
    height: calc(100%);
    top: 0;
    left: 0;
    bottom: 0;
    position: absolute;
}

#bild p.subline 
{
    height: 100%;
}


#bild .blend
{
	opacity: 0;	
	transform: scale(1.1);
	transition: 1.3s all;
}

#bild .show
{
	opacity: 1;
	transform: scale(1);
}

#bild img
{
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
}



.fullframe .picdescription,
.zimmerbild .picdescription,
.bilderreihe .picdescription 
{
    position: absolute;
    top: 0;
    left: var(--main-margin);
    bottom: auto !important;
    right: auto !important;
    background-color: rgba(255,255,255, 0.85);
    display: inline-block;
    padding: 10px !important;
    height: auto !important;
    width: auto !important;
	font-weight: bold;
	font-weight: 300 !important;
}


.zimmerbild .picdescription,
.bilderreihe .picdescription
{
    left: 0;
    padding: 5px !important;
}

#bild.fullframe .picdescription
{
	left: 0;
	z-index: 1;
}	




@media only screen and ( max-width: 1520px )
{
    #bild span
	{
		font-size: 4.4vw;
	}
}

@media only screen and ( max-width: 650px )
{	
	#bild.fullframe 
	{
		height: calc(65vw);
		margin: 75px 0 0 0;
	}
	
	.index #bild.fullframe 
	{
		width: 100%;
		margin: 0;
		height: calc(100% - 60px);
	}
	
	.fullframe .picdescription 
	{	
		padding: 5px 10px !important;
	}
	
}


/**************************************************************************************************/

#bild .sliderIndicator 
{
    position: absolute;
    bottom: 15px;
    z-index: 100;
    left: 0;
    right: 0;
    text-align: center;
	margin: 0;
	padding: 0;
}

#bild .sliderIndicator li 
{
    border: 2px solid #fff;
    height: 12px;
    width: 12px;
    list-style: none;
    border-radius: 100%;
    margin: 0 5px;
    display: inline-block;
	transition: 0.5s all;
	cursor: pointer;
	box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);	
}

#bild .sliderIndicator li.active
{
	background-color: #fff;
}


/**************************************************************************************************************************************/

.covidbutton, p.covidbutton
{
	width: 10vw !important;
	height: 10vw !important;
	position: absolute;
	top: 120px !important;
	left: 5vw !important;
	z-index: 5000;
	min-width: 120px !important;
	right: auto !important;
	bottom: auto !important;

	animation-name: pulsate;
	animation-delay: 2s;
	animation-duration: 4.5s;
	animation-iteration-count: 3;

}

.xmasbutton, p.xmasbutton
{
	
	position: absolute;
	top: max(100px, 10vw) !important;
	left: 5vw !important;
	z-index: 100;
	min-width: 120px !important;
	max-width: 220px !important;
	right: auto !important;
	bottom: auto !important;

	/*animation-name: pulsate;
	animation-delay: 2s;
	animation-duration: 4.5s;
	animation-iteration-count: 3;*/

}


.xmasbutton img, p.xmasbutton img
{
	max-width: 13vw;
	min-width: 150px;
}


.covidbutton .transparent
{
    fill:none
}

.covidbutton .fillwhite
{
    fill:#fff
}

.covidbutton .fillblack
{
    fill: var(--gold);
}

@media only screen and ( max-width: 650px )
{
    .covidbutton
    {
    	width: 10vw;
    	height: 10vw;
    	left: 5vw;
		top: 12vw;
    	min-width: 100px;
    }
}

@keyframes pulsate
{
  0%   {transform: scale(1);}
  7%   {transform: scale(1.2);}
  14%   {transform: scale(0.9);}
  21%   {transform: scale(1);}
  100%   {transform: scale(1);}
}

.service.umbau.uebersicht .covidbutton
{
	left: 5vw !important;
}

/**************************************************************************************************************************************/


.homebutton
{
    position: absolute;
    left: 390px;
}

.homebutton svg .fill
{
	fill: var(--headercolor);
}

@media (max-width: 1300px)
{
    .homebutton
    {
        left: 230px;
    }
}

@media (max-width: 1080px)
{
    .homebutton
    {
        left: auto;
        right: var(--main-margin);
        top: 125px;
    }
	
	.homebutton svg .fill
	{
		fill: #fff;
	}	
	
	
}

@media (max-width: 650px)
{
	.homebutton
	{
		flex: 1;
		margin-top: 0;
		justify-content: center;
		/*display: none;*/
        position: fixed;
		top: 20px;
	}

    .scrolled .homebutton
    {
        display: none;
    }
}

.activator
{
    cursor: pointer;
}

.activator svg
{
	width: 23px;
	height: 23px;
	fill: var(--headercolor);	
	margin: 4px 0 0 0;	
}


.activator path
{
	fill: var(--headercolor) !important;
}


.skiptranslate iframe
{
    display: none !important;
}

.goog-te-gadget-simple img
{
    display: none;
}

.goog-te-menu-value span:first-child
{
    padding: 4px 10px;
}

@media only screen and ( max-width: 1080px )
{
	.activator
	{
		display: block;
        position: relative;
	}

	.activator svg
	{
		width: 30px;
		height: 30px;
		fill: #fff;
	}
}


@media only screen and ( max-width: 650px )
{
	.activator svg
    {
        fill: #000;
    }
}

.goog-te-gadget-icon
{
  display:none;
}

.goog-te-gadget-simple
{
    background-color: transparent !important;
    border:0 !important;
    font-size: 10pt;
    font-weight:800;
    display: inline-block;
    padding:10px 10px !important;
    cursor: pointer;
    zoom: 1;
}

.goog-te-gadget-simple  span
{
    font-family: sans-serif !important ;
    color:#fff !important;
    font-size: 16px !important;
    font-weight: 300 !important;
    text-transform: uppercase !important;
}

.scrolled .goog-te-gadget-simple  span
{
    color:#000 !important;
}

/*************************************************************************************************/



/* WSMU Google Translate */
#wsmu-google-translate
{
    display: none;
    width: auto;
    margin-top:0;
}

#wsmu-google-translate.show
{
    display: block;
}


#wsmu-google-translate-element
{
    display: none !important;
}

#goog-gt-tt
{
    display: none !important;
}

.goog-te-banner-frame
{
    display: none !important;
}

.goog-te-menu-value:hover
{
    text-decoration: none !important;
}

#wsmu-google-translate ul
{
    list-style: none;
    padding-left: 0px;
    margin-bottom: 0px;
}

#wsmu-google-translate > ul > li
{
    display:inline-block;
    margin-left: 15px;
}

@media (max-width: 650px)
{
    #wsmu-google-translate > ul > li
    {
        margin: 15px 0;
        display: block;
    }
}

#wsmu-google-translate > ul > li > a > img
{
    border: none;
    box-shadow: 0px 0px 2px #000;
    margin-right: 2px;
    width: 23px;
    height: auto;
}

.wsmu-gt-tooltip
{
    width: 110px;
    background-color: #000;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 2px 0;
    position: absolute;
    z-index: 999;
    top: 20px;
    left: 15px;
    font-size: 9px;
    visibility: hidden;
}

.wsmu-gt-tooltip:after
{
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #000000 transparent;
}

/*.wsmu-gt-icons:hover .wsmu-gt-tooltip
{
    visibility: visible;
}*/

#fingerprint
{
	display: none;
	position: fixed;
	bottom: var(--main-margin);
	/* right: var(--main-margin); */
	left: var(--main-margin);
	z-index: 600;
	margin: 0;
	padding: 3px;
	border-radius: 20px;
	width: 50px;
	height: 50px;
    border: 1px solid #000;
	background-color: #fff;
}



@media only screen and (max-width: 650px)
{
	#fingerprint 
	{
		bottom: 75px;
		width: 40px;
		height: 40px;
	}
}


@media only screen and (max-width: 450px)
{
	#fingerprint 
	{
		bottom: 105px;
	}
}





#bild .bildbanner
{
	position: absolute;
	z-index: 101;
	background-color: #fffc;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}



#bild .bildbanner h1
{
	font-size: clamp(1.875rem, 0.9167rem + 3.8333vw, 4.75rem);
	text-transform: uppercase;
	color: var(--main-font-color);
	font-weight: 300;
	margin: 40px auto 0 auto;

}

#bild .bildbanner p
{
	position: static;
	height: auto;
	width: auto;
	margin: 40px auto;
}


#bild .bildbanner .buchen
{
	background-color: var(--main-font-color);
	color: #fff;
	text-decoration: none;
		
	font-size: clamp(1rem, 0.5833rem + 1.6667vw, 2.25rem);
	
	
	font-weight: 300;
	padding: 15px 40px;
	text-transform: uppercase;
}








/* css/content.css */
/****************************************************************************************************************************************/


.main
{
    position: relative;
}

.content
{
    margin: 0 !important;
    padding: 0 0 50px 0 !important;
	position: relative;
	top: 0;
    background-color: rgba(255, 255, 255, 1);
}

.weingut .content
{
    margin-top: 120px !important;
}

.content > div, .content > form
{
	padding: 0 var(--main-margin) var(--main-margin) var(--main-margin);
}

.content > article, .content #text article
{
    /* padding: 0 var(--main-margin) var(--main-margin) var(--main-margin); (zu großer Abstand nach article - angepasst auf margin-bottom: 0 (Anna)) */
    padding: 0 var(--main-margin);
    max-width: 1150px;
    margin: 0 auto;
}

@media only screen and ( min-width: 1600px )
{
    .beauty-schloessl.matrix-rhythmus-therapie .jet_peel_anwendungen.zimmerliste
    {
        padding: 0 375px 70px 375px;
    }
}

.beauty-schloessl.matrix-rhythmus-therapie .jet_peel_anwendungen.zimmerliste
{
    padding: 0 10% 2% 10%;
    grid-template-columns: 48% 48%;
}

@media only screen and ( max-width: 650px )
{
    .beauty-schloessl.matrix-rhythmus-therapie .jet_peel_anwendungen.zimmerliste
    {
        grid-template-columns: 98%;;
    }

    .beauty-schloessl.matrix-rhythmus-therapie .jet_peel_anwendungen.zimmerliste div:first-of-type
    {
        margin-bottom: 30px;
    }
}

.content h1, .content .h1
{
    text-transform: uppercase;
    font-weight: 300;
	font-size: 42px;
	text-align: center;
	margin: 0 0 50px 0;
	padding: 10px 0 0 0 !important;
    line-height: 1.0em;
    color: var(--main-font-color);
    padding: 0;
    width: 100%;
	display: block;
}


.content h2, .content .h2
{
    font-size: 32px;
    text-transform: lowercase;
    font-weight: 300;
    margin: 0;
	padding: 0;
    color: var(--main-font-color);
    margin-top: 20px;
    line-height: 0.9em;
	text-align: center;
	display: block;
}

.content h3, .content .h3
{
    font-size: 18px;
    font-weight: 300;
    margin: 10px 0 30px 0;
    padding: 0 6px;
	text-transform: uppercase;
	text-align: center;
    color: var(--main-font-color);
}

.beauty-schloessl.spa-anwendungen.permanentscrolled .content h1 
{
    margin: 80px 0 0 0;
}

.content p
{
	text-align: justify;
	text-align-last: center;
    line-height: 1.4em;	  /* line-height: 1.6em;*/
}

.content img
{
    max-width: 100% !important;
    height: auto !important;
    display: block;
}

.neuigkeiten .content .linie
{
    display: block;
    min-height: 185px;
}

.neuigkeiten .content .linie img
{
        float: left;
        margin: 0 20px 20px 0;
		height: 167px !important;
}

.neuigkeiten .content .linie .linkButton
{
    text-align: right;
    text-align-last: right;
}

@media only screen and ( max-width: 700px )
{
    .neuigkeiten .content .linie img
    {
        float: none;
        margin: 0 auto 15px auto;
    }

    .neuigkeiten .content .linie .linkButton
    {
        text-align-last: center;
    }

}



.neuigkeiten .content .linie .linkButton a
{
    padding: 0;
    border: none;
    text-decoration: underline;
}

.neuigkeiten .content img
{
    margin: 0 auto 20px auto;
}

.neuigkeiten .content .image img
{
    margin: 0;	
}

.fit-aktiv.fitness.fit-aktivprogramm .content img
{
    margin: 0 auto;
}

.fit-aktiv.fitness.fit-aktivprogramm .content ul
{
    width: 260px;
    margin: 10px auto 0 auto;
}

.content .positionTop, #bild .positionTop
{
    object-position: top;
}

.content .positionBottom, #bild .positionBottom
{
    object-position: bottom;
}

.content .positionLeft, #bild .positionLeft
{
    object-position: left;
}

.content .positionRight, #bild .positionRight
{
    object-position: right;
}

@media only screen and ( max-width: 1400px )
{
    .content h1
    {
        font-size: 40px;
    }

    .content h2
    {
        font-size: 25px;
    }
}


@media (max-width: 600px)
{
    .content h1
    {
        font-size: 30px;
		margin-bottom: 25px;
    }

    .content h2
    {
        font-size: 20px;
    }	
	
    .content h3
    {
        margin-bottom: 20px;
    }		
	.content p
    {
        font-size: 16px;
    }
}




@media only screen and ( max-width: 500px )
{
	.content
	{
		hyphens: auto;
	}
}

.content a 
{
	color: var(--main-font-color);
}

.content .linkButton
{
	text-align: center;
	position: absolute;
	bottom: 20px;
	left: 0;
	width: 100%;
	box-sizing: border-box;
	padding: 0;
    margin: 0;
}

.beauty-schloessl.spa-anwendungen.permanentscrolled .content .linkButton
{
    bottom: auto;
    top: 65px;
}

.neuigkeiten .content .linkButton
{
    position: relative;
    margin: 20px 0 0 0;
    bottom: 0;
}

.content .linkButton a
{
	display: inline-block;
	padding: 10px 20px;
	border: 1px solid #999;
	color: var(--main-font-color);
	font-weight: 300;
	text-decoration: none;
	transition: all var(--transitiontime1);
}

.content .linkButton a:hover
{
	color: #fff;
	background-color: #999;
}

.content ul
{
	font-size: 18px;
	font-weight: 300;
	color: var(--main-font-color);
    margin: 0;
    padding: 0;

}


.content ul li
{
    list-style-position: inside;
}


@media (max-width: 600px)
{
    .content ul
    {
	    font-size: 16px;
    }

    .content ul li
    {
        list-style-position: inside;
    }

}

.columnlist ul
{
	column-count: 3;
	column-gap: 70px;
}

/**************************************************************************************************/

.content .Restplatzbutton
{
    position: relative;
    height: 50px;
}

.content .Restplatzbutton .linkButton a
{
	/*display: inline-block;
	padding: 10px 20px;
	font-weight: 300;
	text-decoration: none;
	transition: all var(--transitiontime1);*/
    color: #fff;
    background-color: #999;
}

.content .Restplatzbutton .linkButton a:hover
{
    border: 1px solid #999;
	color: var(--main-font-color);
    background-color: #fff;
}

/**************************************************************************************************/

.content .fullframe
{
    width: 100%;
    height: 100vh;
    padding: 0;
    margin:  var(--main-margin) 0;
    box-sizing: border-box;
    position: relative;
}

.content .fullframe.max
{
	height: 100vh;
}

.content .fullframe > p
{
    width: 100% !important;
    height: 100% !important;
    margin: 0;
    position: absolute;
    padding: 0;
	margin: 0;
    box-sizing: border-box;
}


.content .fullframe .max p
{
    position: relative;
}

.content .fullframe img
{
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
}


.content .fullframe.max img
{
	object-fit: contain;
}

.content .fullframe .text .button
{
    margin: 35px auto 0 auto;
    font-size: 16px !important;
    border: 2px solid var(--grey);
    padding: 5px 10px !important;
}

.content .fullframe .text:hover .button
{
    color: #fff;
    background-color: var(--gold);
    border: 2px solid transparent;

}

/**************************************************************************************************/

.content article.highlight
{
	margin: 0 var(--main-margin);
	color: #fff;
	width: calc(100% - var(--main-width-substraction));
	max-width: none;
	padding: 50px;
	box-sizing: border-box;
}

.content article.highlight h2, .content article.highlight h3
{
	color: #fff;
}

.imgborder
{
	border: 1px solid #444;
}

.grey
{
	background-color: var(--grey);
}

.yellow
{
    background-color: var(--gold);
}

/**************************************************************************************************/

.fullframe .text
{
	position: absolute;
	width: 230px;
	height: 230px;
	padding: 20px;
	background-color: rgba(255, 255, 255, 0.8);
    top: 75px;
    left: 13%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	transition: top var(--transitiontime1);
}

@media (max-width: 1000px)
{
	.fullframe .text
	{
		width: 200px;
		height: 200px;
		padding: 10px;
	}
}


.tageswellness .fullframe .text
{
	width: 320px;
	height: 320px;
	padding: 20px;
}


.fullframe .text h2
{
    font-size: 24px !important;         
    font-weight: 500 !important;    
}
 
.fullframe .text h3
{
    font-size: 14px !important;
    margin: 5px 0 5px 0 !important; 
    font-weight: 400px !important;      
} 

.fullframe .text p
{
	text-align: center;
}  


.fullframe .text .svg
{
	opacity: 1;
	width: 55px;
	height: auto !important;
	margin-top: 10px;
}

.fullframe .text .svg .big
{
	width: 75px !important;  
}

.fullframe .text .svg .fill
{
	fill: var(--main-font-color);
}

.fullframe .text a 
{
	color: var(--main-font-color) !important;
	text-decoration: none;
}

.content .fullframe .text p
{
	width: auto !important;
	height: auto !important;
	position: static !important;
	padding: 0 !important;

}

/**************************************************************************************************/

.content .framedOffer h2
{
	font-size: 43px !important;
	font-weight: 100 !important;
}

.content .framedOffer h3
{
	font-size: 25px !important;
    margin: 10px 0 30px 0 !important;
}

.content .framedOffer .text p
{
	font-size: 15px !important;
}

/**************************************************************************************************/


@media (max-width: 700px)
{
	.content .fullframe
	{
		height: auto;
	}
	

	.content .fullframe > p
	{
		height: auto !important;
		position: static;
	}
	

	.content .fullframe .text
	{
		position: static;
		background-color: #f9f9f8;
		width: auto;
		padding: inherit;
		/*margin: 0 var(--main-margin);*/
        margin: 0;
	}
}


/**************************************************************************************************/

.bilder
{
    width: 100%; 
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 50px 0 !important;   
    justify-content: space-between;
}

.bilder p
{
    flex: 1;
    margin-inline-start: 0px !important; 
	box-sizing: border-box;
}

.bilder img
{
    width: 98% !important;
    height: auto !important; 
    padding: 1%; 
	box-sizing: border-box;
}

/**************************************************************************************************/ 

.luxuryBoarding p
{
    padding: 0px 0 10px 0;
}

.luxuryBoarding h3
{
    margin: 10px 0 0 0;
}

.luxuryBoarding div
{
    margin: 37px 0 0 0;
}

/**************************************************************************************************/

.auszeichnungen.detail
{
	display: none;
}

#overlay .auszeichnungen.detail
{
	display: block;
	padding: 75px;
}

#overlay h2, #overlay h3
{
	text-align: center;
	font-weight: 300;
}

#overlay h2
{
	font-size: 40px;
	text-transform: lowercase;
	margin-bottom: 25px;
    color: var(--main-font-color);
}

#overlay h3
{
	font-size: 28px;
	margin-bottom: 25px;
    color: var(--main-font-color);
}


#overlay p
{
	font-size: 20px;
	text-align: justify;
    text-align-last: center; 
	line-height: 1.4em;
	font-weight: 300;
}


#overlay #imageoverlay
{
	width: auto;
	max-width: calc(100vw - var(--main-width-substraction));
	max-height: calc(100vh - 150px);
	overflow: hidden;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
	position: relative;
	background-color: var(--lightgrey);
}

#overlay #imageoverlay img
{
	width: 100% !important;
	height: 100% !important;
	object-fit: contain;
}

/**************************************************************************************************/

article.hotelprospekte
{
	display: flex;
	justify-content: space-around;
    padding: 40px var(--main-margin); /* padding für Hotelprospekte angepasst (Anna) */
}

article.hotelprospekte > div
{
    background-color: #f9f9f8;
    width: 32%;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
}

article.hotelprospekte > div > div 
{
    display: flex;
    flex-direction: column;
    flex: 2;
    justify-content: space-between;
}

article.hotelprospekte  p.image
{
    padding: 0 0 10px 0;
}

.content .button
{
	text-align: center;
}


.button .linkButton-light
{
    background-color: var(--grey);
}

.button .linkButton-dark
{
    background-color: var(--black);
}

@media only screen and ( max-width: 600px )
{
	article.hotelprospekte
    {
        display: block;
    }

	article.hotelprospekte div
	{
		/*display: flex;*/
		display: block;
        width: 100%;
		/*flex-direction: column;*/
	}

	article.hotelprospekte h2
	{
		height: 25%;
	}

	article.hotelprospekte .button
	{
		text-align: center;
	}

	article.hotelprospekte .linkButton-light, article.hotelprospekte .linkButton-dark
	{
		width: 80%;
		margin-bottom: 10px;
	}

}

/**************************************************************************************************/

.gmap
{
	width: 100%;
	height: 500px;
	padding: 0;
	border-bottom: 1px solid #777;
}

.gmap iframe
{
	width: 100%;
	height: 100%;
	border: none;
}

/**************************************************************************************************/
/*Philip 29.03.2021*/
/**************************************************************************************************/

.neuigkeiten .content .bilderBlock
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}

.neuigkeiten .content .bilderBlock p
{
	width: 49%;
	padding: 0;
	margin: 1% 0;
}

.neuigkeiten .content .bilderBlock img
{
    width:100% !important;
    height: auto;
    margin: 0;
}

/**************************************************************************************************/
/* Videovorschaubild Datenschutz
/**************************************************************************************************/

.content .videos
{
    text-align: center;
}

.content .vorschaubildVideo
{
    background-image: url("/bilder/videoplayer.jpg");
    background-position: 50% 50%;
    background-repeat: no-repeat;
    color: #dacea8;
    font-size: 12px;
    line-height: normal;
    padding: 10px;
    margin: 0 auto;
    position: relative;
    width: 560px;
    height: 315px;
    margin: 15px;
    display: inline-block;
}

@media only screen and ( max-width: 570px )
{
    .content .vorschaubildVideo
    {
        width: 85%;
    }
}

.content .vorschaubildVideo p
{
    float: left;
    color: #fff;
    text-shadow: 0px 0px 3px #000;
}

/*
	.content .vorschaubildVideo .textabsatz1
	{
		margin: 0 0 120px 0;
	}
*/

.content .vorschaubildVideo .linkButton
{
    position: absolute;
    left: 35%;
    right: 65%;
    bottom: 5px;
    width: 150px;
    text-align: center;
}

.content .vorschaubildVideo a
{
    color: #FFFFFF;
    text-decoration: underline;
}


/**************************************************************************************************/

    #inhalte .video001
    {
    	background-image: url("/bilder/fit-aktiv/outdoor/wintersport/video_vorschaubild.jpg");
    	background-position: center center;
    	background-repeat: no-repeat;
    	width: 1214px;
    	height: 682px;
    	padding: 0 !important;
    	margin: 0 auto;
    }

	#inhalte .video001 a
	{
		color: #FFFFFF;
		text-decoration: underline;
	}

	#inhalte .video001 .linkButton
    {
    	text-align: center;
    	position: relative;
    	top: 50%;
    }

	#inhalte .video001 .linkButton a
	{
		color: #FFFFFF;
		text-decoration: underline;
        background-color: var(--grey);
        cursor: pointer;
	}

    #inhalte .video001 .textabsatz
    {
    	color: #fff;
    	background-color: #0000007a;
    	padding: 20px;
    	margin: 0;
    	top: 40%;
    	position: relative;
    }

    @media only screen and ( max-width: 1300px )
    {
        #inhalte .video001
        {
        	width: 90% !important;
        	height: 48vh;
        }

        #inhalte .uTubeVideo
        {
        	width: 90% !important;
        	height: 40vh !important;
        }

        #inhalte .video001 .textabsatz
        {
        	top: 0;
        }

        #inhalte .video001 .linkButton
        {
        	top: 1%;
        }
    }



/**************************************************************************************************/

.social-media-icons img 
{
    max-height: 55px !important;
    width: auto !important;
}
/**************************************************************************************************/


.sitemap #inhalte ul
{
	padding: 10px 0 10px 20px;
	font-size: 20px;
	font-weight: 400;
	width: max-content;
	margin: 0 auto;
}

.sitemap #inhalte ul ul
{
	font-size: 18px;
	font-weight: 400;
}

.sitemap #inhalte ul ul ul
{
	font-size: 16px;
	font-weight: 300;
}


.sitemap #inhalte ul a 
{
	text-decoration: none;
}


@media only screen and ( max-width: 570px )
{
    .sitemap #inhalte
    {
        margin-top: 100px !important; 
    }
}/* css/intermediate.css */
/****************************************************************************************************************************************/


/**************************************************************************************************/

#inhalte .intermediate
{
	display: flex;
    padding: 0px var(--main-margin) 0 var(--main-margin);
	margin: 0 auto;
	max-width: 1300px;
	align-items: stretch;
}

.intermediate .image
{
    flex: 1;
    margin: 0;
    padding: 0;
	display: flex;         
}

.intermediate .image .imgwrapper
{
	display: flex;
	flex: 2.8;
    /*max-height: 370px;  Deklaration hinzugefügt, wegen Darstellungsprobleme bei Safari (Philip) */
}

.intermediate .image img
{
	display: block;
	object-fit: cover;

    width: 100% !important;
    height: 100% !important;
	
}

/**************************************************************************************************/

.intermediate .buttons 
{
	display: flex;
	flex-direction: column;
	flex: 1;
}

.intermediate .buttons svg
{
	fill: #fff;
	margin-top: 10px;
	width: 25%;
}

.intermediate .buttons .inlined-svg
{
	opacity: 1;
}

.intermediate .buttons span
{
    flex: 1;
    padding: 20px;
    color: #fff;
	font-size: 24px;
	margin-right: 4px;
	display: flex;
    flex-direction: column;    
    justify-content: center;	
	align-items: center;
	text-align: center;
}

.intermediate .buttons span:first-child
{
	margin-bottom: 4px;
}

.intermediate .buttons span:hover
{
    opacity: 0.6;
}

/**************************************************************************************************/

.intermediate .text
{
	flex: 1;
    margin-left: 40px;
    box-sizing: content-box;  
	padding: 0;
}

.intermediate .text h2
{
	margin-top: 0 !important;
}

.intermediate .text h3
{
	margin-bottom: 25px !important;
}


.intermediate .text p
{
	padding: 0 !important;
	/* font-size: 17px !important; */
	/* line-height: 1.6em !important; */
	/* font-weight: 400; */
}

.intermediate .text p:last-child
{
	margin-top: 10px !important;
	line-height: 1em !important;
}


@media (max-width: 1300px)
{
	#inhalte .intermediate
	{
		flex-direction: column;
		width: 75%;
	}
	.intermediate .image
	{
		margin-bottom: 40px;
	}
	.intermediate .text
	{
		margin-left: 0;
	}
}

@media (max-width: 800px)
{
	#inhalte .intermediate
	{
		width: auto;
	}

	.intermediate .image
	{
		margin-bottom: 40px;
	}
}

@media (max-width: 650px)
{
	.intermediate .image
	{
		flex-direction: column-reverse;
	}
	
	.intermediate .image .buttons
	{
		flex-direction: row;
		justify-content: space-between;
	}
	
	.intermediate .image .buttons span
	{
		margin: 4px 0 0 0;
		padding: 10% 15px;
	}
	.intermediate .image .buttons span:first-child
	{
		margin-right: 4px;
	}
}


@media (max-width: 500px)
{
	.intermediate .image .buttons span
	{font-size: 22px;}	
}

@media (max-width: 450px)
{
	.intermediate .image .buttons span
	{font-size: 20px;}
}

@media (max-width: 400px)
{
	.intermediate .image .buttons span
	{font-size: 18px;}
}



/* css/requestbox.css */
/****************************************************************************************************************************************/

#requestbox
{	margin: 0 auto 5px auto;
	text-align: center;
	font-size: 0;
	color: var(--headercolor);
	order: 3;
	display: flex;
	flex: 50;
	justify-content: flex-end;
	font-weight: 300;
}

#requestbox .button svg
{
	display: none;	
	fill: var(--headercolor);
    padding-bottom: 1px;
	transition: all var(--transitiontime1);
	width: 22px;
    height: 22px;	
}

#requestbox .button a
{
	background: none;
	border: none;
	color: var(--headercolor) !important;
}

#requestbox .button .buchen
{
    position: relative;
	background-color: #fff  !important;
	color: #000 !important;
	border-radius: 5px;
}


#requestbox .button a:hover
{
	color: #888 !important;
}

@media only screen and ( min-width: 971px )
{
    .scrolled #requestbox .button .buchen
    {
        background-color: var(--black) !important;
    	color: #fff !important;
    }
}

@media (max-width: 970px)
{
	#requestbox .button svg
	{
		display: inline-block;
	}
	
	#requestbox .button span
	{
		display: none;
	}
}

@media (max-width: 650px)
{
	#requestbox
	{
		margin: 0 auto;
		display: none;
	}
}

#requestbox span
{
	display: inline-block;
	padding: 0 2px;
	height: 32px;
	font-size: 16px;
}

#requestbox .button :not(a.buchen) a:hover span
{
	color: var(--headerhovercolor);
}

#requestbox .gutschein:hover svg
{
	fill: var(--headerhovercolor);
}

#requestbox .desktop_buchen_text
{
    display: block;
}

#requestbox .mobil_buchen
{
    display: none;
}

#requestbox .desktop_buchen_text
{
    color: #444;
    padding: 15px 5px 5px 5px;
    font-size: 15px;
    background-image: url('/layout/bestpreis.png');
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 75px;
    text-transform: none;
    line-height: 1.4em;
    position: absolute;
    width: 220px;
    left: -75px;
    padding-top: 25px;
}

@media only screen and (max-width: 1000px) and (min-width: 970px)
{
    #requestbox .desktop_buchen_text
    {
        margin-top: 25px;
    }
}

#requestbox a:hover .desktop_buchen_text
{
    color: #444 !important;
    cursor: auto;
}

.scrolled #requestbox .desktop_buchen_text
{
    display: none !important;
}

@media (max-width: 650px)
{
    #requestbox .desktop_buchen_text
    {
        display: none;
    }
}


/* css/zimmer.css */
/****************************************************************************************************************************************/

.zimmerliste
{
    display: grid;
    justify-content: space-between;
    grid-template-columns: 32% 32% 32%;
}

.sport-fitness-welt div.zimmerliste, .sport-fitness-welt article.zimmerliste
{
    padding-bottom: 0;
}

.sport-fitness-welt div.zimmerliste.topMargin, .sport-fitness-welt article.zimmerliste.topMargin
{
	padding-top: 1.5vw;
}

.zimmerliste .zimmerinfo
{
    margin: 1.5vw 0;
    color: var(--main-font-color);
    position: relative;
    padding: 0 !important;
}

.sport-fitness-welt .zimmerliste .zimmerinfo 
{
	margin: 0 0 1.5vw 0;
}

.zimmerliste .zimmerinfo.empty
{
    display: flex;
    justify-content: center;
    align-items: center;
}

.zimmerliste .zimmerinfo.empty a
{
    text-decoration: none;
}

.zimmerliste .zimmerinfo.hide
{
    display: none;
}

.zimmerliste .zimmerinfo p.preis
{
    font-size: 22px !important;
    font-weight: 400 !important;
    letter-spacing: 1px;
}

/*************************************************************************************************/

@media (max-width: 1350px)
{
    .zimmerliste
    {grid-template-columns: 49% 49%;}
}

@media (max-width: 950px)
{
    .zimmerliste
    {grid-template-columns: 100%;}
}

/*************************************************************************************************/

#zimmerliste .angebotsgruppierung
{
	margin: 25px 0 0 0;
	padding: 0 20px;
	background-color: var(--grey);
}

@media (max-width: 950px)
{
	#zimmerliste .angebotsgruppierung
	{
		display: none;
	}
}

/*************************************************************************************************/

.zimmerinfo .compare, .zimmerinfo .compare:focus
{
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 30px;
    border: none;
    background-color: var(--grey);
    padding: 0;
    transition: 0.3s all;
    outline: none;
}

.zimmerinfo .compare:hover, .zimmerinfo .compare.selected
{
    background-color: var(--gold);
}
.zimmerinfo .compare:hover
{
    transform: scale(1.2);
}

.zimmerinfo .compare svg
{
    width: 20px !important;
    height: 20px !important;
}

/*************************************************************************************************/

#inhalte #roomheader
{
    z-index: 10;
    padding: 15px;
    background-color: var(--gold);
    color: #fff;
    display: grid;
	grid-template-columns: auto auto auto;
    margin: 0 var(--main-margin);
    font-size: 24px;
    justify-content: space-between;
    box-sizing: border-box;
}

#inhalte #roomheader.fix
{
    position: fixed;
    z-index: 20;
    bottom: -170px;
    width: calc(100% - var(--main-width-substraction));
}

#inhalte #roomheader.fix.opened
{
    bottom: 105px;
}

#roomheader > div
{
    display: flex;
    justify-content: left;
    align-items: center;
}

#roomheader .roomcompare
{
    display: flex;
    flex: 2;
    justify-content: flex-end;
    align-items: stretch;
}

#roomheader .roominfo
{
	cursor: pointer;
}

#roomheader .roominfo svg
{
	width: 13px;
}

#roomheader .zimmerkategorien .svg 
{
    width: 22px !important;
}

#roomheader .zimmerkategorien.opened .svg 
{
    transform: rotateX(180deg);
}

#opencomparing 
{
    position: absolute;
    background-color: transparent;
    border: none;
    color: #fff;
    font-size: 20px;
    transform: rotate(-90deg);
    display: none;
    bottom: 230px;
    right: 0;
	width: 45px;
	height: 45px;
	justify-content: center;
	align-content: center;
	cursor: pointer;
}

.fix #opencomparing
{
	display: flex;
	flex-wrap: wrap;
}

.fix.opened #opencomparing 
{
    bottom: -45px;
    transform: rotate(-270deg);	
}

.fix .compareNow
{
	position: absolute;
    bottom: 230px;	
}

.fix.opened .compareNow
{
    bottom: -45px;	
}

div#roomheader.fix.open 
{
    bottom: 105px !important;
}

/*************************************************************************************************/

#comparelist
{
    list-style-type: none;
    display: flex !important;
    padding: 0;
    margin: 0;
}

#comparelist li
{
    width: 100px;
    height: 60px;
    min-height: 60px;
    background-color: #dec787;
    margin: 0 0 0 10px;
    overflow: hidden;
	position: relative;
}

#comparelist li img
{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

#comparelist .close, .grundausstattung .close
{
    position: absolute;
    top: 0;
    right: 0;
    transform: scale(0.6);
    width: 36px;
    height: 36px;
    transform-origin: right top;
	cursor: pointer;
}

#roomheader .compareNow, #roomheader .compareNow:focus
{
    background-color: var(--grey);
    color: rgba(255, 255, 255, 0.7);
    padding: 5px 15px;
    border: none;
    text-transform: uppercase;
    margin: 0 0 0 10px;
    outline: none;
}

#roomheader .compareNow.active
{
 color: rgba(255, 255, 255, 1);
}

#roomheader .removeAll
{
    background-color: transparent;
    color: #fff;
    font-size: 20px;
    border: none;
    padding: 0;
    display: none;
	text-transform: uppercase;
	margin-top: 3px;
}
#roomheader .removeAll.active
{
    display: inline-block;
}

#roomheader .zimmerkategorien
{
    font-size: 24px;
    text-transform: uppercase;
    cursor: pointer;
}

#roomheader .svg .fill
{
    fill: #fff;
}

#roomheader .description
{
    text-align: right;
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    justify-content: center;
	font-size: 20px;
}

#roomheader .description span
{
	text-transform: uppercase;
	font-size: 20px;
	margin-bottom: 3px;
}

/*************************************************************************************************/

#categorylist
{
    list-style-type: none;
    color: #fff;
    background-color: #dec787;
    width: auto;
    padding: 20px;
    min-width: 350px;
    display: inline-block;
    margin: 0;
}

#categorylist li
{
    cursor: pointer;
    text-transform: uppercase;
    font-size: 20px;
}

.grundausstattung p
{
	width: 350px;
	background-color: var(--lightTaupe);
	padding: 25px;
	margin-left: 300px;
	text-align: left;
	text-align-last: left;
}

.categorylist.hide, .grundausstattung.hide
{
    display: none;
}

.categorylist.fix, .grundausstattung.fix
{
    position: fixed;
    bottom: 90px;
    padding-bottom: 0 !important;
    z-index: 1000;
}

.grundausstattung.fix .close
{
    right: var(--main-margin);  
}

/**************************************************************************************************/

@media (max-width: 1500px)
{
	#inhalte #roomheader
	{
		font-size: 20px;
	}

	#roomheader .zimmerkategorien
	{
		font-size: 22px;
	}
	
	#roomheader .zimmerkategorien .svg 
	{
		width: 18px !important;
	}
	
	#roomheader .roominfo svg
	{
		width: 11px;
	}	

	#roomheader .removeAll
	{
		font-size: 16px;
	}

	#comparelist li
	{
		width: 75px;
		height: 55px;
		min-height: 50px;
	}
}

/**************************************************************************************************/

@media (max-width: 1300px)
{
	#inhalte #roomheader
	{font-size: 18px;}
	
	#roomheader .description span
	{font-size: 18px;}

	#roomheader .zimmerkategorien
	{font-size: 18px;}

	#roomheader .removeAll
	{font-size: 18px;}
}

/**************************************************************************************************/

@media (max-width: 1200px)
{
	#inhalte #roomheader
	{
		grid-template-columns: auto auto;
	}

	#roomheader > div:first-child
	{
		display: none;
	}
	
	.grundausstattung p
	{
		margin-left: 0;
	}	
}

/**************************************************************************************************/

@media (max-width: 1000px)
{
	#inhalte #roomheader
	{
		grid-template-columns: 100%;
	}

	#roomheader .roominfo
	{
		/* display: none; */
		justify-self: center;
	}
}

/**************************************************************************************************/

@media (max-width: 950px)
{
	#inhalte #roomheader
	{font-size: 16px;}
	
	#roomheader .description span
	{font-size: 16px;}
	
	#roomheader .removeAll
	{font-size: 16px;}	
}

/**************************************************************************************************/

@media (max-width: 850px)
{
	#roomheader
	{
		padding: 5px;
	}

	#roomheader > .roomcompare
	{
		flex-wrap: wrap;
	}

	#roomheader > .roomcompare > div:first-child, #roomheader #comparelist
	{
		width: auto;
	}

	#roomheader .compareNow
	{
		width: 100%;
		padding: 15px;
		margin: 10px 0 0 0;
	}
}

/**************************************************************************************************/

@media (max-width: 720px)
{
	#inhalte #roomheader
	{
		padding: 5px 0 0 0;
	}
	
	#roomheader .description
	{
		text-align: center;
		align-items: center;
	}

	#roomheader > .roomcompare > div:first-child, #roomheader #comparelist
	{
		width: 100%;
	}

	#roomheader #comparelist
	{
		justify-content: center;
		margin-top: 10px;
	}
}

@media (max-width: 600px)
{
	#inhalte #roomheader.fix
	{
		bottom: -170px;
		width: 100%;
		margin: 0;		
	}

	#inhalte .grundausstattung p
	{
		padding: 10px;
		width: 100%;
		box-sizing: border-box;
	}
}

/*************************************************************************************************/

.zimmerliste p
{
    line-height: normal !important;
    text-align: center;
}

p.zimmerbild
{
    margin: 0 0 30px 0 !important;
    padding: 0 0 65% 0!important;
    position: relative;
}

#inhalte p.zimmerbild img
{
    width: 100% !important;
    height: 100% !important;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    object-fit: cover;
}

p.zimmerkategorie
{
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
    text-transform: uppercase;
    font-size: 22px !important;
    font-weight: 400 !important;
    letter-spacing: 1px;
}

p.zimmertyp
{
    margin: 0 0 30px 0 !important;
    padding: 0 !important;
    text-transform: lowercase;
    font-size: 36px !important;
    font-weight: 400 !important;
}

p.zimmerlabel
{
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
    text-transform: uppercase;
    font-size: 22px !important;
    font-weight: 400 !important;
}

p.zimmerkurzinfo
{
    margin: 0 0 30px 0 !important;
    padding: 0 10px !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    letter-spacing: 1px;
    box-sizing: border-box;
}

.content .detaillink, .content .detaillink a
{
    margin: 0 0 30px 0 !important;
    padding: 0 !important;
    color: var(--gold) !important;
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 22px !important;
    letter-spacing: 1px;
    text-align: center;
}

.zimmerdetail
{
    max-width: 1300px;
    color: var(--main-font-color);
    margin: 0 auto;
	padding: 0 var(--main-margin) !important;
}

.zimmerpreise, .grundriss
{
    background-color: var(--lightgrey);
    padding: var(--main-margin) !important;
    margin: var(--main-margin);
}

.zimmerpreise
{
	padding: var(--main-margin) !important;
	margin: var(--main-margin) !important;
	max-width: none !important;
}

.grundriss
{
    text-align: center;
}

.grundriss img
{
	width: 100% !important;
    max-width: 600px !important;
    height: auto !important;
    display: inline-block !important;
}

.zimmerpreise table
{
    margin: 0 auto;
    width: 100%;
    max-width: 1300px;
}

.zimmerpreise caption
{
    text-transform: uppercase;
    font-size: 28px;
    font-weight: 300;
    color: var(--main-font-color);
    margin: 85px 0 35px 0;
}

#overlay .zimmerpreise caption
{
    margin: 50px 0 35px 0;
}

.zimmerpreise tbody
{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: end;
}

.zimmerpreise tr
{
    display: flex;
    flex-direction: column;
    width: 16.65%;
}

.zimmerpreise td
{
    border-right: 1px solid #000;
    font-size: 20px;
    padding: 20px 0;
    color: var(--main-font-color);
    text-align: center;
    text-transform: uppercase;
	display: flex;
    justify-content: center;
    align-items: center;
}

.zimmerpreise td:nth-child(1)
{
	min-height: 48px;
}

.zimmerpreise td:nth-child(2)
{
    background-color: var(--darkgrey);
    color: #fff;
}

.zimmerpreise tr:last-child td
{
    border: none;
}

@media (max-width: 1250px)
{
    .zimmerpreise td
    {
    	font-size: 15px;
    }
	
	.zimmerpreise td:nth-child(1)
	{
		min-height: 36px;
	}
}

@media (max-width: 950px)
{
    .grundriss img
    {
    	max-width: 100% !important;
    }

    .zimmerpreise tbody
    {
        flex-direction: column;
    }

    .zimmerpreise tr
    {
    	width: 100%;
    }

    .zimmerpreise td
    {
    	padding: 5px;
        border-right: none;
    }

    .zimmerpreise tbody br
    {
        display: none;
    }
}

/*************************************************************************************************/

.fit-aktiv.fitness .zimmerinfo h2, .fit-aktiv.fitness .zimmerinfo h3, .fit-aktiv.fitness .zimmerinfo p:last-child
{
	padding: 10px;
}

.fit-aktiv.fitness .zimmerinfo h3
{
	margin: 10px 0 10px 0;
}

/*************************************************************************************************/

#overlay .zimmerpreise
{
    margin: 0 !important;
}

#overlay .zimmerpreise tr
{
    width: 33.33%;
}

#overlay .zimmerpreise tr:nth-child(3) td
{
    border: none;
}

#overlay
{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    z-index: 10000;
    opacity: 0;
    transition: 0.5s all;
}

#overlay .close
{
    position: absolute;
    top: 0;
    right: 0;
    width: 35px;
    height: 35px;
    cursor: pointer;
}

#overlay.show
{
    opacity: 1;
}

#overlay #overlaycontent
{
    width: 100%;
    max-height: calc(100vh - 150px);
    overflow-y: auto;
    max-width: 810px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
    position: relative;
    background-color: var(--lightgrey);
}

#overlay.video #overlaycontent
{
	max-height: calc(100vh);    
}

#overlay #overlaycontent.saisonoverlay
{
    max-width: 650px;
}

.overlay
{
    opacity: 0;
}

.jet_peel_anwendungen.zimmerliste > div
{
    border: 1px solid #000000;
}

.jet_peel_anwendungen.zimmerliste > div h3
{
    font-size: 20px;
    font-weight: 400;
    margin: 0;
    padding: 0;
    text-align: left;
    box-sizing: border-box;
    padding: 0 10px;
}

.jet_peel_anwendungen.zimmerliste p
{
    text-align: left;
    box-sizing: border-box;
    padding: 0 10px;
    text-align-last: left;
}

.jet_peel_anwendungen.zimmerliste > div > div
{
    margin-top: 10px;
}

.jet_peel_anwendungen.zimmerliste > div > div .dauer
{
    padding: 0 0 15px 0;
    margin: 20px 10px 0 10px;
    font-weight: 400;
    border-bottom: 1px solid black;
}

.jet_peel_anwendungen.zimmerliste > div .box span
{
    display: block;
    text-align: center;
    text-align-last: center;
    font-size: 28px;
}

.jet_peel_anwendungen.zimmerliste > div .box .button
{
    margin: 15px 0;
    text-align-last: center;
}

/*************************************************************************************************/
/* css/slider.css */
/****************************************************************************************************************************************/

/*
Generelle Slider-Styles
**************************************************************************************************************************************
*/

.content .slider
{
	height: calc(100vh - 150px);
	position: relative;
    overflow: hidden;
    padding: 0 !important;
    margin: 40px auto 0 auto !important;
}

@media only screen and (max-height: 500px)
{
	.content .slider
	{
		height: calc(100vh + 50);
	}
}

.content .slider.small
{
	height: calc(100vh - 450px);
}



@media only screen and (max-width: 650px)
{
    .content .slider.small
    {
	    height: calc(100vh - 225px);
    }
}

@media only screen and (max-width: 430px)
{
    .content .slider.small
    {
    	margin-top: 0 !important;
        margin-bottom: 30px !important;
        height: auto;
        aspect-ratio: 9 / 6;
    }
}

.content .slider > p, .slider > div
{
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	transition: 1.5s all;
	transform: scale(1.1);
	opacity: 0;
	display: flex;
	flex-direction: column;
	justify-items: stretch;
	position: absolute;
	box-sizing: border-box;
}

.content .slider > p
{
	position: absolute !important;
}

.slider > p.show, .slider > div.show
{
	opacity: 1;
	transform: scale(1);
}

.slider > div > p
{
	height: 100%;
}


/*
Styles für Text-Slider
**************************************************************************************************************************************
*/

.slider.textslider
{
    height: 100vh;
}

.slider.textslider > div > p
{
	/*height: 75%;*/
	height: 85%;
	margin: 0;
	padding: 0;
}

.slider.textslider .slider-text
{
	/*height: 25%;*/
	height: 15%;
	background-color: #777;
	padding: 20px 40px;
	--main-font-color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.slider.textslider .slider-text h2
{
	margin-top: 0;
}

.slider.textslider .slider-text p
{
	padding-bottom: 0;
}

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

	.slider.textslider .slider-text h2
	{
		font-size: 20px;
	}

	.slider.textslider .slider-text p
	{
		font-size: 16px;
	}	
}

@media only screen and (max-width: 600px)
{
	.slider.textslider > div > p
	{
		height: 70%;
	}

	.slider.textslider .slider-text
	{
		height: 30%;		
	}
}


@media only screen and (max-width: 400px)
{
	.slider.textslider > div > p
	{
		height: 65%;
	}

	.slider.textslider .slider-text
	{
		height: 35%;		
	}
}



/*
Styles für Slider mit der Klasse horizontal
**************************************************************************************************************************************
*/

.slider.horizontal
{
	overflow-x: hidden;
	height: auto;
}


.slider.horizontal > div
{
	left: 0;
	right: 0;
	transform: scale(1);
	padding: 0 75px;
}

.slider.horizontal.running > div
{
	left: -100%;
	right: 100%;
	transition: 1s all;
}

.slider.horizontal > div.moveBack
{
	left: -100%;
	right: 100%;
	transition: 1s all;	
}

.slider.horizontal > div.show
{
	left: 0;
	right: 0;
	transform: scale(1);
	animation-name: slideIn;
	animation-duration: 1s;
}

.slider.horizontal > div.show.moveBack
{
	left: 0;
	right: 0;
	animation-fill-mode: forwards;	
    animation-name: slideBackIn;
	animation-duration: 1s;	
}

@keyframes slideIn
{
	from
	{
		left: 100%;
		right: -100%;
	}

	to
	{
		left: 0;
		right: 0;
	}
}

@keyframes slideBackIn
{
	from
	{
		left: -100%;
		right: 100%;
	}

	to
	{
		left: 0;
		right: 0;
	}
}








/************************************************************************************************************************************/

.content .teaser
{
	max-width: 1300px;
    padding: 0 var(--main-margin) 0 var(--main-margin) !important;
    box-sizing: border-box;
	height: 27vw;
	max-height: 400px;
}

@media only screen and ( max-width: 1000px )
{
	.content .teaser
	{
		padding: 0 !important;
		width: auto;
	}
}

.content .slider.teaser a
{
	text-decoration: none;
	color: #fff;
}

.teaser > div
{
    display: grid;
	grid-template-columns: 1fr 1.2fr 1fr;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
	transform: scale(1.1);
	opacity: 0;
	transition: 0.8s all;
	z-index: 0;
}

.teaser .show
{
	opacity: 1;
	transform: scale(1);
	z-index: 1;
}

.teaser .img
{
	overflow: hidden;
    padding: 20px 0;
}

.teaser .text
{
	/*background-color: var(--grey);*/
	background-color: #bbb0a5;
    text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 10px;
    transition: 1s;
}

.teaser .text:hover
{
    opacity: 0.6;
}

/************************************************************************************************************************************/


.slider.teaser button
{
	top: 0;
}

.slider.teaser .forward
{
	right: 0;
}

.slider.teaser .backward
{
	left: 0;
}


.slider.teaser .grey
{
	fill: transparent;
}

.slider.teaser .arrow1
{
	fill: rgba(75,75,75, 0.8);
}

.slider.teaser .arrow2
{
	fill: rgba(75,75,75, 0.8);
}

/************************************************************************************************************************************/

.content .teaser .text p
{
	color: #fff;
	font-size: 25px;
	text-transform: uppercase;
	padding: 0;
	font-weight: 300;
	text-align: center;
}

.content .teaser .text p:first-child
{
	font-size: 45px;
	text-transform: lowercase;
}

.content .teaser img
{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
	box-sizing: border-box;
} 

.content .teaser .svg
{
	width: 15% !important;
	height: auto !important;
	opacity: 1 !important;
	margin-top: 35px;
}

.content .teaser .svg .fill
{
	fill: #ffffff;
}

/************************************************************************************************************************************/

@media only screen and ( max-width: 1100px )
{
	.content .teaser .text p
	{
		font-size: 19px;
		text-align: center;
		line-height: 1.2em;
	}

	.content .teaser .text p:first-child
	{
		font-size: 34px;
		text-align: center;
		line-height: 1.2em;
	}

	.content .teaser .svg
	{
		width: 20% !important;
		margin-top: 10px;
	}
}

/************************************************************************************************************************************/

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

	.content .teaser
	{
		height: 30vw;
	}

	.content .teaser > div
	{
		grid-template-columns: 1fr 1.8fr 1fr;
	}
	
	.content .teaser .text p
	{
		font-size: 17px;	
		line-height: 1.2em;
	}

	.content .teaser .text p:first-child
	{
		font-size: 30px;
		line-height: 1.2em;
	}

	.content .teaser .svg
	{
		width: 16% !important;
		margin-top: 12px;
	}	

}

/************************************************************************************************************************************/

@media only screen and ( max-width: 600px )
{
	.content .teaser
	{
		height: 120vw;
		max-height: none;
	}

	.content .teaser > div
	{
		grid-template-columns: auto;
		grid-template-rows: 35vw 50vw 35vw;
		padding: 0 25px;
	}
	
	.content .teaser .img
	{
		padding: 0 20%;
	}
	
	.content .teaser .text
	{
		margin: 0 15%;
	}
}

/************************************************************************************************************************************/

@media only screen and ( max-width: 500px )
{
	.content .teaser .img
	{
		padding: 0 15%;
	}

	.content .teaser .text
	{
		margin: 0 10%;
	}

}




















/*
Styles der Buttons für Vorwärts/Rückwärts
**************************************************************************************************************************************
*/

.slider button
{
	transition: 0.3s all;
	position: absolute;
    border: none;
    width: 60px !important;
	height: 60px !important;
    cursor: pointer;
    bottom: 0;
	top: 0 !important;
	margin: auto;
	background-color: transparent;
	padding: 0;	
	z-index: 100;
}

.slider button svg
{
	width: 100% !important;
	height: 100% !important;
}

.slider .grey
{
	fill: none;
}

.slider .arrow1
{
	fill: rgba(255,255,255, 1);
}

.slider .arrow2
{
	fill: rgba(255,255,255, 1);
	display: none;
}


@media only screen and (max-width: 1200px)
{
	.slider button
	{
		width: 50px !important;
		height: 50px !important;
	}
}

@media only screen and (max-width: 800px)
{
	.slider button
	{
		width: 35px  !important;
		height: 35px  !important;
		top: auto;
	}
}

@media only screen and (max-width: 400px)
{
	.slider button
	{
		width: 30px !important;
		height: 30px !important;
	}
}

.slider button:active, .slider button:focus
{
	border: none;
	outline: 0 !important;	
}

.slider button.disabled:hover
{
	background-color: transparent;
}

.slider button.disabled
{
	opacity: 0.1;
	cursor: default;
}

.slider button.backward
{
	left: var(--main-margin);
}

.slider button.forward
{
	right: var(--main-margin);
	transform: rotate(180deg);
}
/* css/wellnessshop.css */
/****************************************************************************************************************************************/

/*************************************************************************************************/

.content .wellnessbehandlungen
{
	background-color: #f9f9f8;
	display: grid;
	grid-template-columns: 2.5fr 1fr;
	grid-template-rows: auto auto;
	margin: 0 auto 30px auto;
	box-sizing: border-box;
	padding: 0 !important;
	--font-size: 20px;
	justify-content: space-between;
	grid-template-areas: "item image" "details saisonzeiten";
}

@media (max-width: 1300px)
{
	.content .wellnessbehandlungen
	{
		width: calc(100% - var(--main-width-substraction));
		margin: 0 var(--main-margin) 30px var(--main-margin);
	}
}

@media (max-width: 1350px)
{
	.content .wellnessbehandlungen
	{grid-template-columns: 2fr 1fr;}
}

@media (max-width: 1150px)
{
	.content .wellnessbehandlungen
	{
		grid-template-columns: 1.5fr 1fr;
		grid-template-areas: "item image" "details details" "saisonzeiten saisonzeiten";
	}
}

@media (max-width: 850px)
{
	.content .wellnessbehandlungen
	{
		grid-template-columns: 1fr;
		/*grid-template-rows: 45vw auto auto auto;*/
		grid-template-rows: 58vw auto auto auto;
		grid-template-areas: "image" "item" "details" "saisonzeiten";
	}
}

.preise-infos.angebote .content .wellnessbehandlungen, .preise-infos.angebote-neu .content .wellnessbehandlungen
{
	max-width: none;
	width: calc(100% - var(--main-width-substraction));
	margin: 0 var(--main-margin) 30px var(--main-margin);
}

.preise-infos.angebote .content .wellnessbehandlungen.show, .preise-infos.angebote-neu .content .wellnessbehandlungen.show
{
	display: flex;
}

.wellnessbehandlungen h3, #inhalte .wellnessbehandlungen p, #inhalte_nextyear .wellnessbehandlungen p
{
	text-align: left;
	text-align-last: left;
}

.content .wellnessbehandlungen h3
{
	margin: 10px 0 0 0;
	padding: 0;
	font-weight: 400;
    display: inline;
	font-size: var(--font-size);
	width: 100%;
}

.content .wellnessbehandlungen p
{
	margin: 10px 0;
	padding: 0;	
	font-size: var(--font-size);
}

.wellnessbehandlungen .item
{
	position: relative;
	padding: 15px;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	grid-area: item;
}

@media (max-width: 1200px)
{
	.wellnessbehandlungen .item
	{
		flex-direction: column;
	}
}

.wellnessbehandlungen .item > div:nth-of-type(1)
{
	flex: 5;
}


.wellnessbehandlungen .image
{
	position: relative;
	grid-area: image;
}

.wellnessbehandlungen p.subline
{
	width: 100% !important;
	font-weight: 400 !important;
	margin-top: 0 !important;
}


/**************************************************************************************************/

.wellnessbehandlungen .detail
{
    width: calc(100% - 65px);
    position: relative;
    margin: 30px 15px;
    box-sizing: border-box;
    background-color: #fff;
	display: none;
	grid-area: details;
}

@media (max-width: 1150px)
{
	.wellnessbehandlungen .detail
	{
		width: calc(100% - 30px);
	}
}


@media (max-width: 680px)
{
	.wellnessbehandlungen .detail
	{
		width: 100%;
		margin: 20px 0;
	}
}


.wellnessbehandlungen .detail.show
{
	display: block;
}

.wellnessbehandlungen .detail p
{
	text-align: center !important;
	text-align-last: center !important;
}

.wellnessbehandlungen .detail .preistabelle a 
{
	color: #fff;
}

.wellnessbehandlungen .detail .preistabelle
{
	background-color: #fff;
	border-collapse: collapse;
	width: 100%;
}

.wellnessbehandlungen .detail .preistabelle caption
{
	background-color: var(--darkgrey);
	color: #fff;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	font-size: var(--font-size);
}

.wellnessbehandlungen .detail .preistabelle .grey
{
    background-color: var(--darkgrey);
    color: #fff;
    border-bottom: none;
}
 
.wellnessbehandlungen .detail .preistabelle .grey td
{
    color: #fff;
    border-top: 1px solid #fff;
    width: 100%;
    text-align: center;
    border-right: 1px solid #000;
} 

.wellnessbehandlungen .detail .preistabelle .grey.second td
{
    /*border-left: 1px solid #000;*/
    border-right: none;
} 

.wellnessbehandlungen .detail .preistabelle caption span.thoroughly
{
	flex: auto;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
}

.wellnessbehandlungen .detail .preistabelle caption span
{
	flex: 1;
	text-align: left;
	padding: 8px 15px;
}

.wellnessbehandlungen .detail .preistabelle caption span:last-child
{
	text-align: right;
	border-left: 1px solid #000;
}


.wellnessbehandlungen .detail .preistabelle caption span.thoroughly
{
	flex: auto;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
}

.wellnessbehandlungen .detail .preistabelle tbody
{
	display: block;
	columns: 2;
	column-gap: 0;
	column-rule: 1px solid;
}

@media (max-width: 680px)
{
	.wellnessbehandlungen .detail .preistabelle tbody
	{
		columns: 1;
		column-rule: none;
	}
}




.wellnessbehandlungen .detail .preistabelle tr
{
	border-bottom: 1px solid #000;
    width: 100%;
    display: flex;
    justify-content: space-between;

}

.wellnessbehandlungen .detail .preistabelle td
{
	padding: 8px 15px;	
	font-size: var(--font-size);
	font-weight: 300;
    color: var(--main-font-color);
}

.wellnessbehandlungen .detail .preistabelle td:nth-child(2)
{
	font-weight: 400;
}

/**************************************************************************************************/

.wellnessbehandlungen img
{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	/*object-fit: cover;*/
	object-fit: contain;
	width: 100% !important;
    height: 100% !important;
}

.preise-infos.angebote .wellnessbehandlungen img
{
	object-fit: cover;
}

.wellnessbehandlungen .box
{
	display: flex;
	flex-direction: column;
    justify-content: flex-end;
}

@media (max-width: 1200px)
{
	.wellnessbehandlungen .box
	{
		flex-direction: column;
		align-items: center;
		border-top: 1px solid var(--main-font-color);
		margin-top: 10px;
	}
}

@media (max-width: 450px)
{
	.wellnessbehandlungen .box
	{
		flex-direction: column;
		padding-top: 10px;
	}
}

/*************************************************************************************************/
.saisonzeiten, .saisonzeiten2
{
    background-color: var(--darkgrey);
    margin: 30px 0;
    padding: 50px;
    color: #fff;
    font-size: var(--font-size);
    font-weight: 300;
    box-sizing: border-box;
	display: none;
	grid-area: saisonzeiten;
}

#overlaycontent .saisonzeiten, #overlaycontent .saisonzeiten2
{	
	display: block;
	background-color: var(--lightgrey);
	color: var(--main-font-color);
	font-size: 18px;
}

#overlaycontent .saisonzeiten table
{	
	max-width: 400px;
	margin: 0 auto;
}

@media only screen and (max-width: 1550px)
{
	.content .wellnessbehandlungen
	{
		--font-size: 18px;
	}
	.saisonzeiten 
	{
		padding: 25px;
	}
}

@media only screen and (max-width: 450px)
{
	.saisonzeiten 
	{
		padding: 10px;
	}
}

.saisonzeiten.show
{
	display: block;
}

.saisonzeiten h3, .saisonzeiten2 h3
{
	color: #fff;
	text-align: left;
	margin-bottom: 15px;
}

#overlay .saisonzeiten h3, #overlay .saisonzeiten2 h3
{
	text-transform: lowercase;
	font-size: 40px;
}

.saisonzeiten table, .saisonzeiten2 table
{
	margin-bottom: 30px;
	width: 100%;
	max-width: 500px;
}

.saisonzeiten td, .saisonzeiten2 td
{
	width: 50%;
    padding: 3px 5px;
	font-size: 18px;
}

.saisonzeiten table caption, .saisonzeiten2 table caption
{
	text-align: left;
	font-weight: 400;
    padding: 15px 5px 3px 5px;
	text-transform: uppercase;
	font-size: 18px;
}

#wrapper
{
	display: grid;
	grid-template-columns: 50% 50%;
	gap: var(--main-margin);
	background-color: var(--lightgrey);
	padding: var(--main-margin);
	margin: var(--main-margin);
}

#wrapper .saisonzeiten, #wrapper .saisonzeiten2, #wrapper .grundriss
{
	background-color: var(--lightgrey);
    margin: 0;
    color: var(--main-font-color);
    grid-area: auto;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#wrapper .saisonzeiten h3
{
	color: var(--main-font-color) !important;
	font-size: 37px;
	text-transform: lowercase;
}

@media only screen and (max-width: 1250px)
{
	#wrapper
	{
		grid-template-columns: 100%;
		grid-template-rows: auto auto;
	}
}

/*************************************************************************************************/

.content .angebotsgruppierung 
{
	background-color: var(--gold);
	margin: 0 var(--main-margin) 1.5vw;
	padding:  20px;
}

.fitness-center .content .angebotsgruppierung 
{
	background-color: var(--lightTaupe);
	padding:  0 1.5vw;
}

.content .angebotsgruppierung p 
{
	color: #fff;
	text-align: left;
	text-align-last: left;
	font-size: 28px;
}

.content .angebotsgruppierung a
{
	color: #fff;
	text-decoration: none;
}

.content .angebotsgruppierung .svg .fill
{
	fill: #fff;
}

.content .angebotsgruppierung a
{
	transition: 0.3s all;
	display: inline-block;
	width: 400px;
	position: relative;
}

.content .angebotsgruppierung a svg 
{
	position: absolute;
	right: 0;
	top: 12px;
}

.content .angebotsgruppierung a.open .svg
{
	transform: rotateX(180deg);
}

/*************************************************************************************************/

.content .wellnessbehandlungen .button
{
	padding-left: 40px;
}

.content .wellnessbehandlungen .preis
{
	font-size: 36px;
	font-weight: 400;
	color: var(--main-font-color);
	text-align: center;
}

@media (max-width: 950px)
{
	.content .wellnessbehandlungen .preis
	{
		font-size: 28px;
	}
}

.content .wellnessbehandlungen .preis span
{
	font-size: var(--font-size);
}

.content .wellnessbehandlungen .person
{
	font-size: 14px;
	font-weight: 400;
	color: var(--main-font-color);
	text-align: center;
}

.content .wellnessbehandlungen .dauer
{
	font-weight: 400;
    display: inline;
}

.content .wellnessbehandlungen .versalien
{
	font-weight: 400;
    text-transform: uppercase;
}

.content .wellnessbehandlungen .naechte
{
	margin: 25px 0;
}

.content .wellnessbehandlungen svg .fill
{
	fill: var(--main-font-color);
}

.content .wellnessbehandlungenWarenkorb table
{
	width: 100% !important;
}

.content .wellnessbehandlungenWarenkorb td
{
	padding: 5px 10px !important;
	border-bottom: 1px solid var(--main-font-color) !important;
	font-size: 18px !important;
}

.wk a
{
	position: relative;
	width: auto !important
}

.wk .bag
{
	color: var(--main-font-color);
	width: 40px !important;
	height: auto !important;
	position: static !important;
}

.wk span
{
	position: absolute;
	bottom: 0;
	right: -5px;
	background-color: #fff;
	border-radius: 100%;
	color: var(--main-font-color);
	display: block;
	width: 15px;
	height: 15px;
	text-align: center;
	line-height: 0.9em;
    padding: 5px 2px 0 3px;
}

.wk .bag .fill
{
	fill: var(--main-font-color) !important;
}

#wkVorschau
{
	display: flex;
	justify-content: space-between;
	margin: 50px auto 25px auto;
	max-width: 1150px;
	box-sizing: border-box;	
}

@media (max-width: 1300px)
{
	#wkVorschau
	{
		width: calc(100% - var(--main-width-substraction));
		margin: 50px var(--main-margin) 30px var(--main-margin);
	}
}

#wkVorschau h2
{
	color: #fff;
	margin-top: 0 !important;
}

#WellnessShopBestellung
{
	margin-top: 20px;
}

#WellnessShopBestellung div
{
	border: 1px solid var(--main-font-color);
	border-top: none;
	padding: 25px 15px 35px 15px !important;
	max-width: 1150px;
	margin: 0 auto;
	position: relative;
	background-color: var(--lightgrey);
	display: flex;
	flex-wrap: wrap;
}

#WellnessShopBestellung div:first-of-type
{
	border-top: 1px solid var(--main-font-color);
}

#WellnessShopBestellung div.fieldsetBlock
{
	display: block;
}

#WellnessShopBestellung div.fieldsetBlock p
{
	width: 100% !important;
}

#WellnessShopBestellung h2
{
    background-color: var(--gold);
    color: #fff;
    display: inline-block;
    font-size: 18px;
    padding: 10px 15px !important;
    position: absolute;
    width: 300px;
    top: -18px;
    left: 0;
    right: 0;
    margin: 0 auto;
	text-transform: uppercase;
}

#WellnessShopBestellung p
{
	margin: 10px 0 0 0 !important;
	padding: 0 20px !important;
	display: flex;
	width: 50% !important;
	box-sizing: border-box;
	flex-direction: column;
}

#WellnessShopBestellung #p_id_31, #WellnessShopBestellung #p_id_32, #WellnessShopBestellung #p_id_33
{
	width: 100% !important;
}

#WellnessShopBestellung label
{
	display: inline-block;
	width: 100%;
	text-align: left !important;
	text-align-last: left !important;
	font-weight: 400;
}

#WellnessShopBestellung .required label:after
{
	content: ' *';
}

#WellnessShopBestellung input, #WellnessShopBestellung select
{
	width: 100%;
	display: inline-block;
	font-size: 18px !important;
	border: 1px solid var(--main-font-color);
	padding: 5px 10px !important;
	box-sizing: border-box;
	text-align: left;
	text-align-last: left;
}

#WellnessShopBestellung .cpt input
{
    width: auto !important;
}

#WellnessShopBestellung textarea
{
	width: 100% !important;
	font-size: 18px !important;
	border: 1px solid var(--main-font-color);
	padding: 5px 10px !important;
	min-height: 250px;
	max-width: 1150px;
	text-align: left;
	text-align-last: left;
    box-sizing: border-box;
}

#WellnessShopBestellung .submit
{
	background-color: var(--gold);
	color: #fff;
	display: inline-block;
	font-size: 18px;
	padding: 10px 15px !important;
	text-transform: uppercase;
	text-align: center !important;
	text-align-last: center !important;
	border: none;
	margin-right: 0;
    margin-left: auto;	
	max-width: 300px;
}

#WellnessShopBestellung #p_id_40
{
	width: 100% !important;
}

#WellnessShopBestellung p#p_id_40
{
	margin-top: 15px !important;
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	align-items: center;
}

#WellnessShopBestellung #p_id_40 input, #WellnessShopBestellung #p_id_40 label
{
	width: auto !important;
	margin-right: 10px;
}

.error label
{
	color: #a00;
}

#WellnessShopBestellung .error input, #WellnessShopBestellung .error select
{
	border: 1px solid #a00;
}

.wellnessshopOKPage, .wellnessbehandlungenWarenkorb
{
	margin-top: 100px !important;
}/* css/block.css */
/****************************************************************************************************************************************/


#inhalte .block, #inhalte .image-block
{
	margin-top: 75px;
	max-width: 1350px;
	margin-left: auto;
	margin-right: auto;
}

#inhalte .block p, #inhalte .image-block p
{
	text-align: center;
}

.block > div, #inhalte .image-block > div
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
    width: calc(60vw + 80px);
    margin: auto;
}

.block-4 > div
{
    display: flex;
	align-items: center;
}

.block-7 > div
{
     width: 100%;
}

.block-7 hr
{
	font-size: 1px !important;
	line-height: 1px !important;
	clear: both !important;
	margin: 0 !important;
	padding: 0 !important;
	height: 1px !important;
	visibility: hidden !important;
}



.block-5 > div:nth-of-type(1), .block-6 > div:nth-of-type(1), .block-7 > div:nth-of-type(1)
{
    display: flex;
	align-items: flex-end;
}

.block-5 > div:nth-of-type(2), .block-6 > div:nth-of-type(2), , .block-7 > div:nth-of-type(2)
{
    display: flex;
	align-items: flex-start;
}

.block .xsmall, .block .small, .block .medium, .block .large, #inhalte .image-block .small
{
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    display: inline-block;
	margin: 10px;
}

.block .flex-vertical
{
	display: flex;
	flex-direction: column;
}

/**************************************************************************************************/

.block div.xsmall 
{
	width: 12vw;
	height: 12vw;
}

.block div.small, #inhalte .image-block div.small
{
	width: 15vw;
	height: 15vw;
}

.block div.medium
{
	width: 20vw;
	height: 20vw;
}

.block div.large
{
	width: 25vw;
	height: 25vw;
}

.block .image a:before 
{
	content: '« ';
}


.block .image a:after
{
	content: ' »';
}

@media (max-width: 1450px)
{
	.block > div
	{
		width: calc(80vw + 80px);
	}


	.block div.xsmall
	{
		width: 17vw;
		height: 17vw;
	}

	.block div.small
	{
		width: 22vw;
		height: 22vw;
	}

	.block div.medium
	{
		width: 25vw;
		height: 25vw;
	}

	.block div.large
	{
		width: 30vw;
		height: 30vw;
	}
}

@media (max-width: 800px)
{
    #inhalte .block
    {
        padding: 0;
        margin: 25px 0 50px 0;
    }

    #inhalte .block > div
	{
        justify-content: space-evenly;
        margin: 3% auto;
		width: auto;
	}

    #inhalte .block div.xsmall, .block div.small, .block div.medium, .block div.large
	{
        width: 45% !important;
        height: 40vw;
        margin: 0 0 10px 0 !important;
	}

    #inhalte .block .image p:nth-child(2)
    {
    	background-color: rgba(74, 74, 73, 0.5) !important;
    	font-size: 16px !important;
    	height: 6vh;
    	line-height: normal;
    	bottom: 0 !important;
    	left: 0 !important;
    	font-weight: 300 !important;
        padding: 0 !important;
        line-height: 16px;
    }

    #inhalte .block .gold
    {
    	padding: 0 !important;
    }

    #inhalte .block .gold svg, #inhalte .block .grey svg
    {
        display: none;
    }

    #inhalte .block .gold h2, #inhalte .block .grey h2
    {
        margin: 0 !important;
        font-size: 19px;
    }

    #inhalte .block .gold h3, #inhalte .block .grey h3
    {
        margin: 0 !important;
    }


    #inhalte .block .flex-vertical
    {
    	flex-direction: row;
    	width: 100%;
    	justify-content: space-evenly;
    	margin: 20px 0;
    }
}

/**************************************************************************************************/

#inhalte .block > div > div:hover,
#inhalte .block-2 > div > div:hover,
#inhalte .block-4 > div > div:hover,
#inhalte .block-5 > div > div:hover,
#inhalte .block-6 > div > div:hover,
#inhalte .image-block >div >div:hover
{
    opacity: 0.4;
}

/**************************************************************************************************/

#inhalte .block .image img, #inhalte .image-block .image img
{
	position: absolute;
	top: 0;
	left: 0;
	height: 100% !important;
	width: 100% !important;
	object-fit: cover;
	box-sizing: border-box;
}

#inhalte .block .image p:nth-child(2)
{
	position: absolute;
	bottom: 10px;
	left: 0;
	background-color: rgba(74, 74, 73, 0.9);
	width: 100%;
	padding: 5px 0 !important;
	font-size: 20px;
	color: #fff;
	text-transform: lowercase;
	font-weight: 400;
	height: auto;
}

#inhalte .block .wellnessheaven
{
    height: auto !important;
}

#inhalte .block .wellnessheaven img
{
	position: static;
	object-fit: fill;
	display: inline;
}

#inhalte .block a
{
	color: #fff;
	text-decoration: none;
	display: block;
}

#inhalte .block .gold
{
	background-color: #d3b45f;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 20px;
	color: #fff;
}

#inhalte .block .grey
{
	background-color: var(--grey);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 20px;
	color: #fff;
}

#inhalte .block > div h2
{
	color: #fff;
    font-size: 24px;
    line-height: 1.1em;
    font-weight: 500;  
}

#inhalte .block > div h3
{
	color: #fff;
    font-size: 14px;
    font-weight: 300;
    margin: 10px 0;
    padding: 0 6px;
}

#inhalte .block > div p
{
    padding: 0;
}

/**************************************************************************************************/

.inlined-svg
{
	opacity: 1;
}


#inhalte .block svg
{
	fill: #fff;
}

/**************************************************************************************************/

.auszeichnunglogos img
{
    cursor: pointer;
}

/**************************************************************************************************/

@media (max-width: 800px)
{
    #inhalte .auszeichnunglogos > div
	{
        justify-content: space-evenly;
        margin: 3% auto;
	}

    #inhalte .auszeichnunglogos div.xsmall, .auszeichnunglogos div.small, .auszeichnunglogos div.medium, .auszeichnunglogos div.large
	{
        width: 22% !important;
        height: auto;
        margin: 0 !important;
	}

    #inhalte .auszeichnunglogos .image img
    {
    	position: relative;
    	height: auto !important;
    	width: 100% !important;
    }

    #inhalte .auszeichnunglogos .wellnessheaven
	{
        width: 100% !important;
        margin-top: 10px !important;
	}
}

/**************************************************************************************************/

.block-2 > div .image
{
	width: calc(50% - 20px);
	height: 0;
	padding: 0 0 calc(50% - 20px) 0;
}

/* css/sonderartikel.css */
/****************************************************************************************************************************************/

#inhalte .golden
{
    color: #fff;
    padding: var(--main-margin);
    max-width: unset;
}

#inhalte .golden .text
{
    background-color: var(--gold);
    padding: 50px 10%;
}

#inhalte .golden .text p
{
    color: #fff;
}

#inhalte .golden h1, #inhalte .golden h2, #inhalte .golden h3
{
    color: #fff;
}

#inhalte .golden a
{
    color: #fff;
    font-weight: 500;
}

/**************************************************************************************************/

#inhalte .coloredArticle
{
    padding: 0 var(--main-margin) var(--main-margin) var(--main-margin);
    margin-top: var(--main-margin); /* v.a. wegen oberem Abstand zu article auf Unterseite Anreise (Anna) */
    max-width: unset;
}

#inhalte .coloredArticle h3
{
    margin: 10px 0;
}

#inhalte .coloredArticle h4
{
    font-size: 28px;
    text-transform: lowercase;
    font-weight: 100;
    text-align: center;
    margin: 20px 0 10px 0;
}

#inhalte .coloredArticle a:hover
{
    text-decoration: none;
    color: #000; 
}

#inhalte .coloredArticle .detaillink
{
    font-size: 18px !important;
}

#inhalte .coloredArticle .lightgreyRight, #inhalte .coloredArticle .lightgreyLeft
{
    background-color: var(--lightgrey);
    display: flex;
    /*padding: 0 0 25px 0;*/
    padding: 0;
	min-height: 350px;
}

#inhalte .lightgreyRight
{
    flex-direction: row-reverse;
}

#inhalte .lightgreyLeft
{
    flex-direction: row;
}

.content .linkShell
{
	text-align: center;
}


#inhalte .lightgreyRight .linkShell, #inhalte .lightgreyLeft .linkShell
{
    padding: 0 0 30px 0;
}

#inhalte .coloredArticle .lightgreyRight .pictureBlock, #inhalte .coloredArticle .lightgreyLeft .pictureBlock
{
	padding: 0;
	margin: 0;
	line-height: 0;
	flex: 45;
	overflow: hidden;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}


#inhalte .coloredArticle .pictureBlock p
{
	height: 100%;
	position: relative;
    padding: 0;
}


#inhalte .coloredArticle .lightgreyRight .pictureBlock p
{
    margin: 0;
    padding: 0 0 20px 0;
	flex: 1;
}

#inhalte .coloredArticle .lightgreyRight .pictureBlock p:nth-of-type(2), #inhalte .coloredArticle .lightgreyLeft .pictureBlock p:nth-of-type(2)
{
	margin-top: 20px;
}


#inhalte .coloredArticle .lightgreyRight .pictureBlock img, #inhalte .coloredArticle .lightgreyLeft .pictureBlock img
{
	height: 100% !important;
	width: 100% !important;
	object-fit: cover;
	position: absolute;
}


#inhalte .coloredArticle .lightgreyRight .textBlock, #inhalte .coloredArticle .lightgreyLeft .textBlock
{
    flex: 55;
    padding: 10px 5% 0px 5%;
}

#inhalte .coloredArticle .lightgreyRight .textBlock p:last-child, #inhalte .coloredArticle .lightgreyLeft .textBlock p:last-child
{
    margin: 0;
    padding: 15px 0 0 0;
}

#inhalte .soloPicture .lightgreyRight .pictureBlock p, #inhalte .soloPicture .lightgreyLeft .pictureBlock p
{
    padding: 0;
}

@media only screen and ( max-width: 1500px )
{
    #inhalte .coloredArticle .lightgreyRight .pictureBlock, #inhalte .coloredArticle .lightgreyLeft .pictureBlock
    {
        flex: 55;
    }

    #inhalte .coloredArticle .lightgreyRight .textBlock, #inhalte .coloredArticle .lightgreyLeft .textBlock
    {
        flex: 45;
    }
}

@media only screen and ( max-width: 1200px )
{
    #inhalte .lightgreyRight, #inhalte .lightgreyLeft
    {
        /*flex-direction: column-reverse;*/
        flex-direction: column;
    }

    #inhalte .coloredArticle .lightgreyRight .pictureBlock img, #inhalte .coloredArticle .lightgreyLeft .pictureBlock img
    {
            position: static;
    }

    #inhalte .coloredArticle .lightgreyRight .pictureBlock p, #inhalte .coloredArticle .lightgreyLeft .pictureBlock p
    {
        margin: 0;
        padding: 0;
    }

    #inhalte .coloredArticle .lightgreyRight .textBlock p:last-child, #inhalte .coloredArticle .lightgreyLeft .textBlock p:last-child
    {
        margin: 0;
        padding: 15px 0;
    }
}

/**************************************************************************************************/

#inhalte .coloredArticle .greyPictureRight, #inhalte .coloredArticle .greyPictureLeft
{
    background-color: var(--lightgrey);
    display: flex;
    align-items: center;
}

#inhalte .greyPictureRight
{
    flex-direction: row-reverse;
}

#inhalte .greyPictureLeft
{
    flex-direction: row;
}

#inhalte .coloredArticle .greyPictureRight .pictureBlock, #inhalte .coloredArticle .greyPictureLeft .pictureBlock
{
    flex: 1;
}

#inhalte .coloredArticle .greyPictureRight .textBlock, #inhalte .coloredArticle .greyPictureLeft .textBlock
{
    flex: 1;
    padding: 10px 5%;
    height: min-content;
}

#inhalte .coloredArticle .greyPictureRight .pictureBlock p
{
    margin: 0;
    padding: 0;
    text-align: left !important;
    text-align-last: left;
}

#inhalte .coloredArticle .greyPictureLeft .pictureBlock p
{
    margin: 0;
    padding: 0;
    text-align: left !important;
    text-align-last: right;
}

#inhalte .streckenBild .greyPictureRight, #inhalte .streckenBild .greyPictureLeft
{
    background-color: #dfdfdf;
}

#inhalte .streckenBild .greyPictureRight .textBlock, #inhalte .streckenBild .greyPictureLeft .textBlock
{
    background-color: var(--lightgrey);
}

#inhalte .coloredArticle.white .greyPictureRight
{
    background-color: transparent;
}

@media only screen and ( max-width: 1200px )
{
    #inhalte .greyPictureRight, #inhalte .greyPictureLeft
    {
        /*flex-direction: column-reverse;*/
        flex-direction: column;
    }

    #inhalte .greyPictureLeft.first
    {
        flex-direction: column;
    }

    #inhalte .coloredArticle .greyPictureRight .pictureBlock p, #inhalte .coloredArticle .greyPictureLeft .pictureBlock p
    {
        padding: 0 0 0 0;
    }

    #inhalte .coloredArticle .greyPictureRight .vollBild img, #inhalte .coloredArticle .greyPictureLeft .vollBild img
    {
        height: 38ex !important;
    }

    #inhalte .coloredArticle.white .greyPictureRight
    {
        background-color: var(--lightgrey);
    }
}

@media only screen and ( max-width: 500px )
{
    #inhalte .coloredArticle .lightgreyRight .pictureBlock, #inhalte .coloredArticle .lightgreyLeft .pictureBlock
    {
        max-height: 300px !important;
    }
}

/**************************************************************************************************
Aufklapp-Artikel für Covid-19-Informationen
**************************************************************************************************/

#inhalte .unfold
{
    padding: 0 var(--main-margin);
    margin: 0 auto 10px auto;
}

#inhalte .covid-19-infos
{
    margin: 0 auto 40px auto;
}

#inhalte .unfold h4
{
    background-color: var(--grey);
    margin: 0;
    padding: 25px 20px 25px 55px;
    color: #fff;
    font-size: 29px;
    text-align: left;
    font-weight: 300;
    line-height: 0.9em;
    background-image: url(/bilder/icons/open-arrow.svg);
    background-repeat: no-repeat;
    background-position: 2% center;
}

#inhalte .unfold .h4Open
{
    background-image: url(/bilder/icons/close-arrow.svg);
    background-repeat: no-repeat;
    background-position-x: left 2%;
    background-position-y: center;
}

#inhalte .unfold h4:hover
{
    background-color: var(--gold);
    cursor: pointer;
}

#inhalte .unfold .closed
{
    display: none;
}

#inhalte .unfold .open
{
    display: block;
}

.relax-guide #inhalte .unfold .closed
{
    display: block;
}


#inhalte .unfold div
{
    background-color: var(--lightgrey);
    margin: 25px 0;
    padding: 30px 20px;
    font-size: 18px;
    font-weight: 300;
}

#inhalte .unfold ul
{
    margin: 0;
}

@media only screen and ( max-width: 800px )
{
    #inhalte .unfold h4
    {
        font-size: 24px;
    }
}

/**************************************************************************************************/

#inhalte .preise
{
    background-color: var(--lightgrey);
    text-align: center;
    padding: 0 var(--main-margin) var(--main-margin) var(--main-margin);
    margin-bottom: 40px !important; /* Abstand zum footer auf Unterseite Kinderpreise (Anna) */
}

#inhalte .preise p:first-of-type
{
    font-size: 23px;
}

#inhalte .preise span
{
    text-transform: uppercase;
}

#inhalte .preise table
{
    width: 1000px;
    margin: 0 auto;
    background-color: #fff;
}

#inhalte .preise table p
{
    font-size: 21px;
}

#inhalte .preise .table-header
{
    background-color: var(--darkgrey);
    border-bottom: none;
}

#inhalte .preise .table-header p
{
    color: #fff;
    font-weight: normal !important;
}

#inhalte .preise table tr
{
    border-bottom: 1px solid #000;
}

#inhalte .preise table tr:last-of-type
{
    border-bottom: none;
}

#inhalte .preise table td
{
    padding: 0 15px;
}

#inhalte .preise table td:nth-child(odd) p
{
    text-align: left;
    text-align-last: left;
}

#inhalte .preise table td:nth-child(even) p
{
    text-align: right;
    text-align-last: right;
    font-weight: bold;
}

@media only screen and ( max-width: 1150px )
{
    #inhalte .preise table
    {
        width: 100%;
    }

    #inhalte .preise p:first-of-type
    {
        font-size: 18px;
    }

    #inhalte .preise table p
    {
        font-size: 18px;
    }

    #inhalte .preise .table-header td
    {
        vertical-align: bottom;
    }

    #inhalte .preise table td
    {
        vertical-align: baseline;
        min-width: 25%;
    }
}

/**************************************************************************************************/

#inhalte .preise.year2026
{
    display: none;
}


/**************************************************************************************************/

#inhalte .dreiAngeboteTitel
{
    margin: 80px auto 0 auto;
    padding: 0 var(--main-margin) 0 var(--main-margin);
}

/**************************************************************************************************/

#inhalte .datenschutz
{
        font-size: 18px !important;
        text-align: center;
}

#inhalte .datenschutz img
{
    margin: 0 auto;
}

/**************************************************************************************************/

#inhalte .karte iframe
{
    width: 100%;
}

/**************************************************************************************************/

#inhalte .inklusivLeistungen,
#inhalte_nextyear .inklusivLeistungen
{
    text-align: center;
    padding: 0 var(--main-margin) var(--main-margin) var(--main-margin);
    max-width: 1150px;
    margin: 0 auto;
}

#inhalte .inklusivLeistungen .lightTaupe,
#inhalte_nextyear .inklusivLeistungen .lightTaupe
{
    padding: var(--main-margin) 0;
    background-color: var(--lightTaupe);
}

#inhalte .inklusivLeistungen ul,
#inhalte_nextyear .inklusivLeistungen ul
{
    margin: 45px auto;
    padding: 0;
    width: 70%;
    text-align: center;
    list-style-type: none;
    line-height: 1.6em;
    font-size: 18px;
    font-weight: 300;
    color: var(--main-font-color);
}

#inhalte .inklusivLeistungen li,
#inhalte_nextyear .inklusivLeistungen li
{
    margin: 0 0 15px 0;
}

#inhalte .inklusivLeistungen img,
#inhalte_nextyear .inklusivLeistungen img
{
    display: inline;
}

#inhalte .inklusivLeistungen svg,
#inhalte_nextyear .inklusivLeistungen svg
{
    fill: var(--main-font-color);
}

#inhalte .inklusivLeistungen svg:hover,
#inhalte_nextyear .inklusivLeistungen svg:hover
{
    fill: var(--darkgrey);
}

#inhalte .inklusivLeistungen a,
#inhalte_nextyear .inklusivLeistungen a
{
    padding: 10px 20px;
    margin: 0;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 24px;
}

#inhalte .inklusivLeistungen .contactButtons,
#inhalte_nextyear .inklusivLeistungen .contactButtons
{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 50px 0 0 0;
}

#inhalte .inklusivLeistungen .contactButtons a:nth-of-type(1),
#inhalte_nextyear .inklusivLeistungen .contactButtons a:nth-of-type(1)
{
    border: 1px solid var(--main-font-color);
}

#inhalte .inklusivLeistungen .contactButtons a:nth-of-type(2),
#inhalte_nextyear .inklusivLeistungen .contactButtons a:nth-of-type(2)
{
    background-color: var(--main-font-color);
    /*color: var(--grey);*/
    color: #fff;
    border: 1px solid var(--main-font-color);
}

#inhalte .inklusivLeistungen .contactButtons a:nth-of-type(2):hover,
#inhalte_nextyear .inklusivLeistungen .contactButtons a:nth-of-type(2):hover
{
    background-color: var(--darkgrey);
    color: var(--lightTaupe);
}

#inhalte .inklusivLeistungen .contactButtons a:nth-of-type(3),
#inhalte_nextyear .inklusivLeistungen .contactButtons a:nth-of-type(3)
{
    padding: 0 0 0 20px;
}

/**************************************************************************************************/

#inhalte_nextyear
{
    display: none;
}

/**************************************************************************************************/

#seotext article h2
{
    padding: 60px 0;
    margin: 0;
}

#seotext article h1 + h2
{
    padding: 0 0 20px 0;
}

#seotext h3
{
    margin: 10px 0;
    padding: 0;
}

#seotext p
{
    margin: 0 0 50px 0;
    padding: 0;
}

#seotext p:last-of-type
{
    margin: 0;
    padding: 0;
}

/**************************************************************************************************/

#seotext-ki h1, #seotext-ki h2, #seotext-ki h3
{
    text-transform: none;
    text-align: left;
}

#seotext-ki p
{
    text-align: left;
    text-align-last: left;
}

#seotext-ki ul
{
    display: inline-block;
    margin-top: 0;

}

/**************************************************************************************************/

.overviewButton
{
	padding: var(--main-margin) !important;
    display: flex;
    justify-content: space-between;
    max-width: 1150px;
    margin: 0 auto;
}

.overviewButton.center
{
    justify-content: center;
}

.overviewButton a
{
    border: 1px solid var(--main-font-color);
    padding: 10px 20px;
    margin: 0;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bolder;
    font-size: 24px;
}

.overviewButton a:hover
{
    background-color: var(--main-font-color);
    color: #fff;
}


.overviewButton a.anfrage
{
	background-color: var(--grey);
	color: #fff;
	border: none;
}

.overviewButton a.buchen
{
	background-color: var(--gold);
	color: #fff;
	border: none;
}


/**************************************************************************************************/


.sport-fitness-welt .overviewButton
{
	padding: 0 var(--main-margin) var(--main-margin) var(--main-margin) !important;
	justify-content: center;
}

.sport-fitness-welt .overviewButton.stretch
{
	justify-content: space-between;
}

/**************************************************************************************************/

/* Home, Kulinarik, Wellness Überblick, Wasserwelt, Naturbadesee, Saunawelt, Lady Spa, Ruheoasen, Spa-Anwendungen, Jet-Peel, Spa-Suite, Fitness, Ausflüge
last div above footer higher margin-bottom (.content .fullframe) */
.bottomSpace
{
    margin-bottom: var(--main-margin) !important;
}

/* Home, Kulinarik
slider with margin-top (.content .teaser) */
.topSpace
{
    margin-top: var(--main-margin) !important;
}

/* Hotelbar, Gastgeber
slider with top and bottom margin (.content .teaser) */
.topAndBottomSpace
{
    margin: var(--main-margin) auto !important;
}


.neuigkeiten article.topSpace 
{
    margin-top: 100px !important;
}


article.topSpace:first-child
{
	margin-top: 100px !important;
}


/**************************************************************************************************/

.register
{
    padding-bottom: 0 !important;
}

/**************************************************************************************************/

.specialCentered p
{
    text-align: center !important;
}

/**************************************************************************************************/

.wfzm
{
    background-color: var(--lightTaupe);
    color: var(--main-font-color);
    text-align: center;
    padding: var(--main-margin) !important;
    max-width: 1150px;
    margin: 75px var(--main-margin) 0 var(--main-margin);
    position: relative;
}

.wfzm .dates, .wfzm .selected_childs
{
    display: flex;
    justify-content: center;
}

.wfzm .from, .wfzm .to, .wfzm .adults
{
    border-right: 2px solid var(--main-font-color);
}

@media only screen and ( max-width: 700px )
{
    .wfzm .from, .wfzm .to, .wfzm .adults
    {
        border: none;
    }
}

.wfzm .from:hover, .wfzm .to:hover, .wfzm .adults:hover, .wfzm .children
{
    cursor: pointer;
}

.wfzm .from, .wfzm .to, .wfzm .adults, .wfzm .children
{
    padding: 0 40px;
    height: max-content;
}

.wfzm .day, .wfzm .number
{
    font-size: 60px;
    font-weight: 300;
}

.wfzm .month, .wfzm .text
{
    font-size: 34px;
    font-weight: 200;
    padding: 0 6px;
}

.wfzm img
{
    display: inline;
}

.wfzm svg
{
    fill: var(--main-font-color);
}

.wfzm svg:hover
{
    fill: var(--darkgrey);
}

.wfzm a
{
    padding: 10px 20px;
    margin: 0;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 24px;
}

.wfzm .choosebutton svg
{
        width: 30px;
        height: 18px;
}

.wfzm .contactButtons
{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 50px 0 0 0;
}

.wfzm .contactButtons a:nth-of-type(1)
{
    border: 1px solid var(--main-font-color);
}

.wfzm .contactButtons a:nth-of-type(1):hover
{
    border: 1px solid var(--black);
    color: var(--black);
    background-color: var(--grey);
}

.wfzm .contactButtons a:nth-of-type(2)
{
    background-color: var(--main-font-color);
    color: var(--grey);
    border: 1px solid var(--main-font-color);
}

.wfzm .contactButtons a:nth-of-type(2):hover
{
    background-color: var(--darkgrey);
    color: var(--lightTaupe);
}

.wfzm .contactButtons a:nth-of-type(3)
{
    padding: 0 0 0 20px;
}

.wfzm input
{
    display: none;
}

@media only screen and ( max-width: 700px )
{
    .wfzm .dates
    {
        flex-direction: column;
    }

    .wfzm .from
    {
        border-right: none;
    }
}

@media only screen and ( max-width: 450px )
{
    .wfzm .contactButtons
    {
        margin: 20px 0 0 0;
        flex-direction: column;
    }

    .wfzm .contactButtons a
    {
        width: 90%;
    }

    .wfzm .contactButtons a:nth-of-type(2)
    {
        margin-bottom: 10px;
    }
}

/**************************************************************************************************/

.wfzm .dates .calendarFrom.nao-month, .wfzm .dates .calendarTo.nao-month
{
    position: absolute;
    top: 260px;
    left: 175px;
    background-color: #fff;
}

.wfzm .dates .calendarTo.nao-month
{
    left: auto;
    left: 395px;
}

@media only screen and ( max-width: 950px )
{
    .wfzm .dates .calendarFrom.nao-month, .wfzm .dates .calendarTo.nao-month
    {
        top: 140px;
        left:50px;
    }

    .wfzm .dates .calendarTo.nao-month
    {
        left:300px;
    }

}

@media only screen and ( max-width: 840px )
{
    .wfzm .dates .calendarTo.nao-month
    {
        left:200px;
    }
}

@media only screen and ( max-width: 740px )
{
    .wfzm .dates .calendarFrom.nao-month, .wfzm .dates .calendarTo.nao-month
    {
        left:0px;
    }
}

.wfzm .dates .calendarFrom.nao-month .pastDate, .wfzm .dates .calendarTo.nao-month .pastDate
{
    cursor: default;
    color: #c0c0c0;
}

.wfzm .dates .calendarFrom.nao-month.clear, .wfzm .dates .calendarTo.nao-month.clear
{
    display: none;
}

.wfzm .dates .adults select, .wfzm .dates .children select
{
    display: none;
    position: absolute;
}

.wfzm .dates .adults select.show, .wfzm .dates .children select.show
{
    display: block;
    width: 50px;
   /* -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;*/
    border: none;
    overflow: hidden;
    scrollbar-width: none;
    text-align: center;
}

@media only screen and ( max-width: 740px )
{
    .wfzm .dates .adults select.show, .wfzm .dates .children select.show
    {
        top: 395px;
        left: 175px;
        width: 150px;
    }

    .wfzm .dates .adults select.show option, .wfzm .dates .children select.show option
    {
        padding: 10px 0;
    }
}

.wfzm .selected_childs .selected_child
{
    display: none;
}

.wfzm .selected_childs .selected_child.show
{
    display: block;
    padding: 0 15px;
}

.wfzm .selected_childs .selected_child.show:hover
{
    cursor: pointer;
}

.wfzm .selected_childs .selected_child select
{
    display: none;
}

.wfzm .selected_childs .selected_child select.show
{
    display: block;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    border: none;
    overflow: hidden;
    scrollbar-width: none;
    text-align: center;
    position: absolute;
    top: 115px;
    width: 50px;
}

.content .block-wfzm
{
	width: calc(100% - var(--main-width-substraction));	
	max-width: none;
}

.content .wfzm
{
	max-width: none;
	margin: 0;
}

/**************************************************************************************************/

.weingut .content h2
{
    text-transform: unset;
}

.content .picturaDexteram
{
    display: flex;
    flex-direction: row;
    margin: 10px 0;
    padding: 10px 0;
    line-height: 1.4em;
    font-size: 18px;
    font-weight: 300;
    color: var(--main-font-color);
}

.content .picturaDexteram:first-of-type,
{
    margin: 35px 0 10px 0;
}


.content .picturaDexteram:last-of-type
{
    border-bottom: 1px solid #A3A3A3;
    margin: 10px 0 35px 0;    
}

.content .picturaDexteram div:nth-last-of-type(1)
{
    flex: 8;
/*    height: max-content;  */
}

.content .picturaDexteram  p
{
    text-align: left;
    text-align-last: left;
    margin: 5px 0;
    padding: 0;
}

.content .picturaDexteram ul
{
    margin: 5px 0;
}

.content .picturaDexteram li
{
    margin: 0 0 5px 0;
}

.content .picturaDexteram  div:nth-last-of-type(2)
{
    flex: 2;
    margin: 0 10px 0 0;
}

.content .picturaDexteram  div:first-of-type img
{
    margin: 0 !important;

}

.content .picturaDexteram table
{
    margin: 0 !important;

}

@media( max-width: 700px )
{
    .content .picturaDexteram
    {
        flex-direction: column;
    }

    .content .picturaDexteram  p
    {
        text-align: justify;
        text-align-last: center;
    }

    .content .picturaDexteram  div:first-of-type
    {
        margin: 0 0 10px 0 !important;
    }

    .content .picturaDexteram div:first-of-type img
    {
        margin: 0 auto !important;
    }
}

/**************************************************************************************************/

    .content .vorschaubildGoogleMap
    {
        background-image: url("/bilder/bilder-bayern/karte_roehrnbach_bayern.jpg");
        background-position: center center;
        background-repeat: no-repeat;
        background-color: var(--lightgrey);
        color: #fff;
        font-size: 13px;
        padding: 0;
        position: relative;
        width: 100%;
        height: 700px;
        display: inline-block;
        /*display: block;*/
    }

    .content .vorschaubildGoogleMap .textabsatz
    {
        margin: 40px auto 0 auto;
        max-width: 800px;
        width: 90%;
        padding: 10px;
        text-align: center;
        background-color: #ffffff8c;
    }

    .content .vorschaubildGoogleMap .linkButton
    {
        position: absolute;
        color: #fff;
        bottom: 55px;
        left: 0;
        right: 0;
        margin: 0 auto;
        width: 300px;
        padding: 10px;
    }

    .content .vorschaubildGoogleMap .linkButton a
    {
        background-color: var(--grey);
        color: #fff;
    }

    .content .vorschaubildGoogleMap .linkButton a:hover
    {
        color: var(--main-font-color);
        cursor: pointer;
        background-color: var(--lightTaupe);
    }

    @media only screen and ( max-width: 1000px )
    {
        .content .vorschaubildGoogleMap
        {
            height: 400px !important;
        }

        .content .vorschaubildGoogleMap iframe
        {
            height: 400px !important;
        }
    }

    @media only screen and ( max-width: 500px )
    {
        .content .vorschaubildGoogleMap .textabsatz
        {
            width: 98%;
            padding: 1%;
            margin: 0;
            background-color: #fffc;
        }

        .content .vorschaubildGoogleMap .linkButton
        {
            bottom: 0;
            width: 100%;
            padding: 5px;
        }
    }

/**************************************************************************************************/


.bilderreihe
{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 1vw;
}


.bilderreihe p
{
	margin: 0 !important;
	padding: 0 0 65% 0 !important;
	width: 100%;
	height: 0;
	position: relative;
	overflow: hidden;
}

.bilderreihe p img 
{
	height: 100% !important;
	width: 100% !important;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	object-fit: cover;
	bottom: 0;
}


@media only screen and ( max-width: 1100px )
{
	.bilderreihe
	{
		grid-template-columns: 1fr 1fr;
		grid-gap: 1.5vw;
	}	
}

@media only screen and ( max-width: 550px )
{
	.bilderreihe
	{
		grid-template-columns: 1fr;
		grid-gap: 2vw;
	}	
}



.social-media-icons 
{
	display: flex;
	justify-content: center;
}

/**************************************************************************************************/

.saunainfos .overviewButton
{
	padding: 2vw 1vw 1vw 1vw !important;
}

.saunainfos .sauna 
{
	display: none;
    padding: 1vw 2vw;
    margin: 1vw;
    background-color: var(--lightTaupe);
}

.saunainfos .sauna ul
{
	text-align: center;
}


.saunainfos .sauna ul
{
	width: 300px;
	text-align: left;
	margin: 0 auto;
}


.saunainfos.coloredArticle
{
	display: none;
}



/**************************************************************************************************/

article.tenReasons, article.wineAward
{
	width: var(--main-width);
	background-color: var(--grey);
	color: #fff !important;
	padding: 4vw 3vw;
	max-width: none;
	margin: var(--main-margin);
	text-align: center;
}

.tenReasons h2
{
	color: #fff;
	font-size: 40px;
}

.tenReasons h3
{
	color: #fff;
	font-size: 25px;
}

.tenReasons .ulwrapper
{
	display: grid;
	grid-template-columns: 1fr 1fr;
	justify-items: start;
}

.tenReasons ul
{
    color: #fff;
    font-size: 20px;
    margin: unset;
	padding: 0;
	display: inline-block;
	border-left: 1.5px solid #fff;	
	padding: 0 0 0 2.5vw;
}

.tenReasons ul:first-child
{
	justify-self: end;
	border-left: none;
	border-right: 1.5px solid #fff;
	padding: 0 2.5vw 0 0;
}


.tenReasons li
{
	color: #fff;
    padding: 5px 0 5px 5px;
    margin: 0 0 0 20px;
    text-align: left;
	list-style-image: url(/bilder/icons/white-star.svg);
}

@media only screen and ( max-width: 1100px )
{
	.tenReasons h2
	{
		font-size: 34px;
	}

	.tenReasons h3
	{
		color: #fff;
		font-size: 20px;
	}	
	
	.tenReasons .ulwrapper
	{
		grid-template-columns: 1fr;
	}
	.tenReasons ul
	{
		font-size: 16px;
		border: none !important;
		padding: 0 2.5vw !important;
		justify-self: start !important;
	}
}

/****************************************************************************************/

article.wineAward
{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    padding: 2vw 2vw;
    text-align: left;
}

@media only screen and ( max-width: 780px )
{
    article.wineAward
    {
        display: block;
    }

}

article.wineAward div:first-of-type
{
    width: 35%
}

article.wineAward div
{
    width: 65%;
}

@media only screen and ( max-width: 780px )
{
    article.wineAward div
    {
        width: 100%;
    }

    article.wineAward div:first-of-type
    {
        width: 100%
    }

    article.wineAward div:first-of-type img
    {
        margin: 0 auto;
    }

}

article.wineAward div > p
{
    color: #fff;
    font-size: 22px;
    text-align-last: left;
}

article.wineAward h2
{
    text-transform: none;
    color: #fff;
    text-align: left;
    font-weight: bold;
    font-weight: 500;
}

article.wineAward .text
{
    position: relative;
    padding-top: 20px;
    padding-left:20px;
    box-sizing: border-box;
}

@media only screen and (max-width: 680px)
{
    article.wineAward .text
    {
        padding-left: unset;
        box-sizing: unset;
    }
}

article.wineAward .text .linkButton
{
    position: relative;
    bottom: 0;
    left: 0;
}

article.wineAward .text .linkButton a
{
    border: 1px solid #fff;
    color: #fff;
}

article.wineAward .text .linkButton a:hover
{
    border: 1px solid #fff;
    background-color: #fff;
    color: #000;
}

/****************************************************************************************/

article.wineAward.golf div
{
    width: 50%;
}

@media only screen and ( max-width: 780px )
{
    article.wineAward.golf div
    {
        width: 100%;
    }

}

article.wineAward.golf div img
{
    width: 95% !important;
    object-fit: cover;
}

/****************************************************************************************/

div.zimmerliste .zimmerinfo .textGolf
{
    box-sizing: border-box;
    padding: 0 20px;
}


/****************************************************************************************/

article.golfplatz
{
    display: flex;
    width: var(--main-width);
    max-width: none;
    border: 1px solid #9C9C9C;
    border-radius: 25px;
    margin: var(--main-margin);
    padding: 0;
    -webkit-box-shadow: 3px 3px 2px 0px #A8A8A8;
    box-shadow: 3px 3px 2px 0px #A8A8A8;
}

article.golfplatz > div.image
{
    width: 33%;
    position: relative;
}

article.golfplatz > div.image p
{
    position: absolute;
    margin: 0;
    padding: 0;
    height: 100%;
}

article.golfplatz .image .blend
{
    opacity: 0;
    transform: scale(1);
    transition: 1.3s all;
}

article.golfplatz .image .show
{
    opacity: 1;
    transform: scale(1);
}

article.golfplatz .image img, article.golfplatz .image p img
{
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
    object-fit: cover;
    height: 100% !important;
}

@media only screen and ( max-width: 1350px )
{
    article.golfplatz
    {
        display: block;
    }

    article.golfplatz > div.image
    {
        width: 100%;
        height: 380px;
    }

    article.golfplatz .image img, article.golfplatz .image p img
    {
        border-top-right-radius: 25px;
        border-bottom-left-radius: 0;
    }
}

/****************************************************************************************/

article.golfplatz .image .sliderIndicator
{
    position: absolute;
    bottom: 20px;
    z-index: 400;
    left: 0;
	right: 0;
    text-align: center;
    margin: 0;
    padding: 0;
}

article.golfplatz .image .sliderIndicator li
{
    background-color: #fff;
    opacity: 0.4;
    height: 15px;
    width: 15px;
    list-style: none;
    border-radius: 100%;
    margin: 0 5px;
    display: inline-block;
    transition: 0.5s all;
    cursor: pointer;
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
    border: 2px solid #000;
}

article.golfplatz .image .sliderIndicator li.active
{
    background-color: #fff;
    opacity: 1;
    border: 2px solid rgba(0, 0, 0, 0.5);
}

/****************************************************************************************/

article.golfplatz > div.text
{
    width: 67%;
    padding-left: 40px;
    box-sizing: border-box;
    position: relative;
    background-color: #f3f1ef;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
}

article.golfplatz > div.text .kurzInfos span
{
    margin-right: 10px;
    padding: 0 5px;
}

article.golfplatz > div.text p
{
    text-align-last: left;
    line-height: 1;
}

article.golfplatz > div.text p:first-of-type
{
    font-size: 22px;
}


@media only screen and ( max-width: 1350px )
{
    article.golfplatz > div.text
    {
        border-top-right-radius: 0;
        border-bottom-right-radius: 25px;
        border-bottom-left-radius: 25px;
        width: 100%;
    }
}

@media only screen and ( max-width: 900px )
{
    article.golfplatz > div.text
    {
        padding-bottom: 10px;
    }
}

@media only screen and ( max-width: 650px )
{
    article.golfplatz > div.text
    {
        padding: 0 15px;
    }
}

/****************************************************************************************/

.luxus-suiten-jagdhof article.golfplatz > div.text .kurzInfos,
.luxushotel-deutschland article.golfplatz > div.text .kurzInfos
{
    margin-top: 15px;
    margin-right: 40px;
    line-height: normal;
}

/****************************************************************************************/

article.golfplatz > div.text .standort
{
    margin: 0;
    padding: 0 0 0 20px !important;
    background-image: url('/layout/standort.png');
    background-position: left center;
    background-size: 13px;
    background-repeat: no-repeat;
}

article.golfplatz > div.text .entfernung
{
    margin: 0;
    padding: 0 0 0 16px !important;
    background-image: url('/layout/entfernung.png');
    background-position: left center;
    background-size: 10px;
    background-repeat: no-repeat;
}

article.golfplatz > div.text .kosten
{
    margin: 0;
    padding: 0 0 0 20px !important;
    background-image: url('/layout/kosten.png');
    background-position: left center;
    background-size: 13px;
    background-repeat: no-repeat;
}

@media only screen and ( max-width: 900px )
{
    article.golfplatz > div.text .standort, article.golfplatz > div.text .entfernung, article.golfplatz > div.text .kosten
    {
        margin: 5px 0;
        display: inline-block;
    }
}

/****************************************************************************************/

article.golfplatz .text ul
{
    padding-left: 0;
}

@media only screen and ( max-width: 1350px )
{
    article.golfplatz .text ul
    {
        margin: 0;
        padding-bottom: 25px;
    }
}

article.golfplatz .text li
{
    list-style-type: "\2713\00A0";
    list-style-position: inside;
}

article.golfplatz .text .routenPlaner
{
    position: absolute;
    top: 30px;
    right: 25px;
}

article.golfplatz .text .routenPlaner a
{
    color: #D7BB90;
    text-decoration: none;
    font-weight: 500;
}

article.golfplatz .text .routenPlaner a:hover
{
    text-decoration: underline;
    text-underline-offset: 3px;
}

article.golfplatz .text .button
{
    position: absolute;
    padding: 0;
    bottom: 25px;
    right: 25px;
    display: inline-block;
    background-color: #f3f1ef;
    border-radius: 15px;
    border: 1px solid #838383;
}

article.golfplatz .text .button.left
{
    right: 210px;
}

@media only screen and ( max-width: 900px )
{
    article.golfplatz .text .button.left
    {
        right: 0;
    }
}

article.golfplatz .text .button:hover
{
    background-color: #838383;
}

article.golfplatz .text .button a
{
    color: #838383 !important;
    padding: 15px 55px;
    font-weight: 400;
    height: auto;
    cursor: pointer;
}

article.golfplatz .text .button a:hover
{
   color: #fff !important;
}

@media only screen and ( max-width: 900px )
{
    article.golfplatz .text p
    {
        text-align: left;
    }

    article.golfplatz .text .routenPlaner, article.golfplatz .text .button
    {
        position: relative;
        display: block;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
    }

    article.golfplatz .text .button
    {
        margin-right: 40px;
        margin-bottom: 10px;
    }

    article.golfplatz .text .button a
    {
        display: block;
        text-align-last: center;
    }

}

@media only screen and ( max-width: 650px )
{
    article.golfplatz .text .button
    {
        margin-right: auto;
    }
}

/****************************************************************************************/

.beauty-schloessl.jetpeel .coloredArticle .textBlock,
.beauty-schloessl.jetpeel .coloredArticle .textBlock p,
.beauty-schloessl.matrix-rhythmus-therapie .coloredArticle .textBlock,
.beauty-schloessl.matrix-rhythmus-therapie .coloredArticle .textBlock p
{
    text-align: left;
    text-align-last: left;
}

.beauty-schloessl.jetpeel .coloredArticle.inklusivLeistungen .contactButtons
{
    padding: 0 !important;
    margin: 0 !important;
}

@media only screen and (max-width: 1200px)
{
    .beauty-schloessl.jetpeel #inhalte .greyPictureLeft
    {
        flex-direction: column;
    }
}/* css/restplatz.css */
/****************************************************************************************************************************************/



div.restplatzsummary
{
	padding: 20px 50px;
	border: 1px solid;
	max-width: 1150px;
	margin: 0 auto;
	box-sizing: border-box;
}



.restplatzboerse .wellnessbehandlungen
{
	grid-template-areas: 'item image' 'details details';
}

.restplatzboerse .wellnessbehandlungen .box span
{
	margin-right: 10px !important;
}

.restplatzboerse .wellnessbehandlungen .detail
{
    background-color: transparent;
	width: calc(100% - 30px);	
}

.restplatzboerse .wellnessbehandlungen .detail ul
{
    list-style-type: none;
	padding: 0;
	font-size: 16px;
	font-weight: 300;
}


#JagdhofAnfrageRestplatz
{
	margin-top: 70px;
}


#JagdhofAnfrageRestplatz div
{
	border: 1px solid var(--main-font-color);
	border-top: none;
	padding: 25px 15px 35px 15px !important;
	max-width: 1150px;
	margin: 0 auto;
	position: relative;
	background-color: var(--lightgrey);
	display: flex;
	flex-wrap: wrap;
}

#JagdhofAnfrageRestplatz div:first-of-type
{
	border-top: 1px solid var(--main-font-color);	
}


#JagdhofAnfrageRestplatz div.fieldsetBlock
{
	display: block;
}

#JagdhofAnfrageRestplatz div.fieldsetBlock p
{
	width: 100% !important;
}

#JagdhofAnfrageRestplatz h2
{
    background-color: var(--gold);
    color: #fff;
    display: inline-block;
    font-size: 18px;
    padding: 10px 15px !important;
    position: absolute;
    width: 300px;
    top: -18px;
    left: 0;
    right: 0;
    margin: 0 auto;
	text-transform: uppercase;
}

#JagdhofAnfrageRestplatz p
{
	margin: 10px 0 0 0 !important;
	padding: 0 20px !important;
	display: flex;
	width: 50% !important;
	box-sizing: border-box;
	flex-direction: column;
}

#BestellungShop p:first-of-type
{
    width: 100% !important;
	display: block;
}



#JagdhofAnfrageRestplatz label
{
	display: inline-block;
	width: 200px;
	text-align: left !important;
	text-align-last: left !important;
}

#JagdhofAnfrageRestplatz input, #JagdhofAnfrageRestplatz select
{
	width: auto;
	display: inline-block;
	font-size: 18px !important;
	border: 1px solid var(--main-font-color);
	padding: 5px 10px !important;
	box-sizing: border-box;
	text-align: left;
	text-align-last: left;
}

#JagdhofAnfrageRestplatz textarea
{
	width: 100% !important;
	font-size: 18px !important;
	border: 1px solid var(--main-font-color);
	padding: 5px 10px !important;
	min-height: 250px;
	max-width: 1150px;
	text-align: left;
	text-align-last: left;
    box-sizing: border-box;
}

#JagdhofAnfrageRestplatz .submit
{
	background-color: var(--gold);
	color: #fff;
	display: inline-block;
	font-size: 18px;
	padding: 10px 15px !important;
	text-transform: uppercase;
	text-align: center !important;
	text-align-last: center !important;
	border: none;
	margin-right: 0;
    margin-left: auto;	
	max-width: 300px;
}

#JagdhofAnfrageRestplatz #p_id_55
{
	width: 100% !important;
}

#JagdhofAnfrageRestplatz #p_id_56, #JagdhofAnfrageRestplatz #p_id_60
{
	margin-top: 15px !important;
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	align-items: center;
	width: 100% !important;
}

#JagdhofAnfrageRestplatz #p_id_56 input, #JagdhofAnfrageRestplatz #p_id_56 label, #JagdhofAnfrageRestplatz #p_id_60 input, #JagdhofAnfrageRestplatz #p_id_60 label
{
	width: auto !important;
	margin-right: 10px;
}



#JagdhofAnfrageRestplatz #p_id_datenschutzerklaerung
{
	width: 100% !important;
	display: block;
}

@media (max-width: 850px)
{
	.restplatzboerse .wellnessbehandlungen
	{
		grid-template-areas:
        "image"
        "item"
        "details"
        "details";
	}
}

@media (max-width: 700px)
{
	#JagdhofAnfrageRestplatz p
	{
		width: 100% !important;
	}
	

	div.restplatzsummary
	{
		padding: 20px 35px;
	}	
	
}


@media (max-width: 680px)
{

	.restplatzboerse .wellnessbehandlungen .detail
	{
		margin: 20px !important;	
	}
}

@media (max-width: 450px)
{

	#JagdhofAnfrageRestplatz h2
	{
		width: 280px;
		padding: 10px 5px !important;
	}
	
	div.restplatzsummary
	{
		padding: 15px;
	}	

	#JagdhofAnfrageRestplatz p
	{
		padding: 0 !important;
	}
	
}

/* css/vioma.css */
/****************************************************************************************************************************************/



#inhalte .gutscheinshop
{
	margin: 50px 0 20px 0 !important;
	padding: 0;
}


#inhalte .vioma
{
	margin-top: 100px;
	max-width: 1150px;
}

.hotel.hotelprospekte
#inhalte .vioma
{
    margin-top: 50px !important;
}

#inhalte .vioma > div, #inhalte .vioma .vsc
{
	font-family: 'Roboto Condensed', sans-serif;
}


#inhalte .vioma .vri-request-item
{
	border-top: 1px solid var(--main-font-color);
	border-left: 1px solid var(--main-font-color);
	border-right: 1px solid var(--main-font-color);
	color: var(--main-font-color);
	background-color: var(--lightgrey);
	position: relative;
	padding: 50px 25px;
	margin-top: 0 !important;
}

#inhalte .vioma .vri-request-item-buttons
{
	border-bottom: 1px solid var(--main-font-color);
}

#inhalte .vioma h2
{
	width: 300px !important;
	margin: 0 auto 20px auto !important;
	text-transform: uppercase;
	font-size: 18px;
	letter-spacing: 1px;
	position: absolute;
	top: -17px;
	left: 0;
	right: 0;
}

#inhalte .vioma h3
{
	text-align: left;
}

#inhalte .vioma label
{
	width: auto !important;
	box-sizing: border-box;
	float: none;
}


#inhalte .vioma .vri-package-variant-price
{
	color: var(--main-font-color) !important;
	font-weight: 400 !important;
}

#inhalte .vioma .vsc-list-item-state 
{
    position: relative;
    float: left;
	width: 60px !important;
}

#inhalte .vioma .vri-page
{
	width: 100% !important;
	max-width: none !important;
	padding: 30px 0 0 0;
}

#inhalte .vioma .vri-switch-contents-more
{
	clear: both;
}

#inhalte .vioma .vri-package
{
/*	padding-top: 100px; */
}

#inhalte .vioma .vri-package-variant:after;
{
	content: " ";
	display: block;
	clear: both;
}

#inhalte .vioma .vsc
{
	max-width: none;
}

#inhalte .vioma .vri-package-head
{
	padding: 0 !important;
}

#inhalte .vioma .vri-package-buttons a
{
	text-transform: uppercase;
	margin: 0 !important;
}

#inhalte .vioma .vri-package-buttons a:first-child
{
    background-color: var(--gold) !important;
}

#inhalte .vioma .vri-package-buttons a:nth-of-type(2)
{
     background-color: var(--grey) !important;
}

#inhalte .vri-request-item h2 
{
    background: var(--gold) !important;
	color: #fff !important;
}

#inhalte .vioma .vri-request-item .vri-element-checkbox-input+.vri-element-checkbox-label::before
{
	   color: var(--main-font-color) !important;
}

#inhalte .vioma .vri-request-item .vri-element-radio-input+.vri-element-radio-label::before
{
	color: #4b4b4d !important;
}

#inhalte .vioma .vri-element.vri-element-radio 
{
    width: 30%;
}

#inhalte .vioma img
{
	display: inline;
}


/*
#inhalte .vioma .vsc-item .vdp-days .vdp-cell.vsc-date-bookable 
{
    background-color: var(--gold);
}

#inhalte .vioma .vsc-item .vdp-days .vdp-cell.vsc-date-closed 
{
    background-color: #d0d0d0;
}

#inhalte .vioma .vsc-item-calendar-hint 
{
    background: #4b4b4d;
}

*/

#inhalte .vioma .vri-button
{
	text-transform: uppercase;
}

#inhalte .vioma .vri-button,
#inhalte .vioma .vsc-button:hover, 
#inhalte .vioma .vsc a.vsc-button:hover,
#inhalte .vioma .vsc-button-secondary:hover, 
#inhalte .vioma .vsc a.vsc-button-secondary:hover
{
    background: var(--gold);
}


@media (max-width: 920px)
{
	#inhalte .vioma .vri-element.vri-element-radio 
	{width: 45%;}
}

@media (max-width: 720px)
{
	#inhalte .vioma .vri-element.vri-element-radio 
	{width: 90%;}
}

/****************************************************************************************/

#inhalte .vioma-pauschalenliste
{
    margin-top: 165px;
    margin-bottom: 25px;
    max-width: 500px;
    padding: 10px 30px 10px 30px;
    background-color: #f3f1ef;
    box-sizing: border-box;
}



#inhalte .vioma-pauschalenliste div
{
    margin: 25px 0;
}

#inhalte .vioma-pauschalenliste h3
{
    font-size: 22px;
}

#inhalte .vioma-pauschalenliste p
{
    text-align-last: left;
    margin: 5px 0;
    padding: 0;
}

#inhalte .vioma-pauschalenliste span
{
    width: 210px;
    display: inline-block;

}

#inhalte .vioma-pauschalenliste input
{
    accent-color: #000;
    cursor: pointer;
}



/* css/bisy.css */
/****************************************************************************************************************************************/

#bisy
{
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    width: 100%;
    position: relative;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

#bisy ul
{
    margin: 0;
    padding: 1%;
    display: none;
    position: absolute;
    top: 70px;
    left: 0;
    grid-template-columns: repeat(6, 1fr);
/*    padding-inline-start: 0;   */
    align-items: center;
    grid-gap: 5px;
    width: 98%;
    background-color: var(--lightTaupe);
}

#bisy li
{
    margin: 0;
    padding: 5px 0;
    list-style: none;
    text-align: center !important;
    border: 1px solid #fff;
    align-self: normal;
}

#bisy li:hover
{
    border: 1px solid var(--darkgrey);
    border-radius: 5px;
}

#bisy a
{
    text-decoration: none;
    width: 100%;
    display: inline-block;
}

#bisyNavi #bisy span
{
    padding: 4px 12px;
    text-align: center;
    font-size: 20px;
    border: 1px solid #fff;
}

#bisyNavi #bisy span.close, #bisyNavi #bisy span:hover
{
    border: 1px solid var(--darkgrey);
    border-radius: 5px;
}

@media only screen and ( max-width: 1000px )
{
    #bisy ul
    {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media only screen and ( max-width: 800px )
{
    #bisy ul
    {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media only screen and ( max-width: 600px )
{
    #bisy ul
    {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media only screen and ( max-width: 400px )
{
    #bisy ul
    {
        grid-template-columns: repeat(1, 1fr);
    }
}

/****************************************************************************************/


#bisyContent
{
    padding: 0 var(--main-margin) var(--main-margin) var(--main-margin);
    max-width: 1150px;
    margin: 30px auto 0 auto;
    text-align: left;
}

#bisyContent hr
{
    font-size: 1px !important;
    line-height: 1px !important;
    clear: both !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 1px !important;
    visibility: hidden !important;
    float: none !important;
}

#bisyContent .bisy .top
{
    position: relative;
}


#bisyContent .bisy .top img
{
    width: 100% !important;
    float: none !important;
    height: auto !important;
    max-width: none !important;
}

#bisyContent .bisy .top h1
{
    position: absolute;
    margin: 0;
    bottom: 45px;
    left: 30px;
    text-shadow: 2px 2px 3px #000;
}

#bisyContent .bisy .top .heading1
{
    position: absolute;
    margin: 0;
    bottom: 10px;
    left: 30px;
    text-shadow: 2px 2px 3px #000;
}

#bisyContent .bisy .top h2, #bisyContent .bisy .top h1
{
    color: #fff;
}

#bisyContent h2, #bisyContent h1
{
    font-size: 35px;
    text-transform: uppercase;
    font-weight: 300;
    margin: 0;
    color: var(--main-font-color);
    margin: 20px 0 20px 0;
    line-height: 0.9em;
    text-align: left;
}

@media only screen and ( max-width: 1400px )
{
    #bisyContent h2, #bisyContent h1
    {
        font-size: 25px;
    }
}

/*#bisyContent .heading1
{
    margin: 0 0 30px 0;
}*/

#bisyContent .bisy img
{
    max-width: 250px !important;
    width: auto;
    height: auto !important;
    overflow: hidden;
    float: left !important;
    margin: 0 auto;
    padding: 0 15px 0 0;
}

@media only screen and ( max-width: 600px )
{
    #bisyContent .bisy img
    {
        width: 250px !important;
        height: auto !important;
        float: unset !important;
        margin: 10px 0;
        padding: 0;
    }
}

#bisyContent p
{
    text-align: left;
    text-align-last: start;
    padding: 5px 0;
}

#bisyContent iframe
{
    display: block;
    margin: 0 auto
}

#bisyContent .bisy table, #bisyContent .bisy ul
{
    width: 65%;
    max-width: 800px;
    margin: 5px 0;
}

#bisyContent .bisy ul
{
    list-style-position: inside;
}

#bisyContent .hiddenclear
{
    font-size: 1px !important;
    line-height: 1px !important;
    clear: both !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 1px !important;
    visibility: hidden !important;
}

#bisyContent .mapData
{
    margin: 20px 0;
    height: 500px;
}


#bisyContent .mapData #map
{

    height: 100%;
}


.marker-icon
{
    background-position: center;
    background-size: 30px 40px;
    background-repeat: no-repeat;
    border-radius: 50%;
    height: 40px;
    left: 4px;
    position: absolute;
    text-align: center;
    top: 3px;
    width: 40px;
}

.marker
{
    height: 30px;
    width: 30px;
}

.marker-content
{
    background: #c30b82;
    /*border-radius: 50% 50% 50% 0;*/
    height: 50px;
    left: 50%;
    margin: -15px 0 0 -15px;
    position: absolute;
    top: 50%;
    width: 30px;
}

.marker-content::before
{
    /*background: #ffffff;*/
    border-radius: 50%;
    content: "";
    height: 36px;
    margin: 3px 0 0 3px;
    position: absolute;
    width: 24px;
}


#map .mapboxgl-popup-content
{
    width: max-content;
}
/* css/impressionen.css */
/****************************************************************************************************************************************/

#wrapperImpressionen
{
	position: fixed;
    z-index: 9000;
    top: 0;
    margin: 0;
    padding: 55px 25px 25px 25px;
    background-color: #000000dd;
    color: #fff;
    width: 100%;
    box-sizing: border-box;
    transition: 0.5s opacity;
    height: calc(100vh);
    display: block;
	overflow-y: auto;
}

#wrapperImpressionen .wrapperclose
{
	order: 1;
	width: 100%;
	max-width: 1150px;
	display: flex;	
	justify-content: flex-end;
	margin: 0 auto;
}

#wrapperImpressionen .close
{
	width: 30px;
	height: 30px;
}

#wrapperImpressionen .close:hover
{
    cursor: pointer;
}


@media ( max-width: 1050px )
{


    #wrapperImpressionen span
    {
        font-size: 37px;
        text-transform: lowercase;
        font-weight: 300;
        margin: 0;
        margin: 20px 0;
        line-height: 0.9em;
    	text-align: center;
        display: block;
    }

    #wrapperImpressionen img
    {
        width: 100%;
        margin: 5px 0;
    }
	
}

#impressionenNavi
{
    padding: 0;
    display: flex;
    justify-content: space-between;
    max-width: 1150px;
    margin: 0 auto;
    width: 100%;
	order: 2;
}

#impressionenNavi a
{
    padding: 4px 12px;
    text-align: center;
    font-size: 20px;
    color: #fff;
    text-decoration: none;
}

#impressionenNavi a:first-child
{
	padding: 4px 12px 4px 0;
}

#impressionenNavi .active
{
    color: var(--darkgrey);
}

#impressionenNavi p
{
    display: flex;
    align-items: center;
}

#impressionenNavi .layout span
{
	display: block;
	margin-left: 5px;
}

#impressionenNavi .layout span img
{
	display: block;
}


#impressionenNavi .layout:hover
{
    cursor: pointer;
}

#impressionenBilder
{
	display: grid;
    padding: 0;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 15px;
    position: relative;
    width: 100%;
    max-width: 1150px;
    margin: 0 auto;
	order: 3;
}

#impressionenBilder img
{
    justify-self: center;
    width: 100%;
    height: auto;
    overflow: hidden;
    object-fit: cover;
    max-height: 230px;
}

#impressionenBilder img:hover
{
    cursor: pointer;
}

#impressionenBilder.singleView img:hover
{
    cursor: auto;
}

#impressionenBilder.singleView
{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-gap: 0;
    padding: 0;
}

#impressionenBilder.singleView > div
{
    width: 100%;
	height: calc(100vh - 250px);
	position: relative;
}

#impressionenBilder.singleView img
{
    width: 100%;
    height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	object-fit: cover;
	opacity: 0;
	transition: 0.5s all;
	max-height: none;
}

#impressionenBilder.singleView img.show
{
	opacity: 1;
}

#impressionenBilder .slider
{
    margin: 0 auto 0 auto !important;
    overflow: visible;
}

#impressionenBilder .slider button.forward
{
    right: 0;
}

#impressionenBilder .slider button.backward
{
    left: 0;
}





@media ( max-width: 600px )
{
	#wrapperImpressionen
	{
		top: 0;
		height: calc(100vh - 60px);
		padding: 35px 10px 75px 10px;
		display: block;
		z-index: 10000;
	}

	#wrapperImpressionen .wrapperclose 
	{
		position: fixed;
		top: 10px;
		right: 10px;
	}	
	
}


/* css/footer.css */
/****************************************************************************************************************************************/

#footer
{
	padding: 0;
	margin: 0 auto;
	font-weight: 400;
	position: relative;
    display: flex;
    justify-content: space-between;
	flex-direction: column;
	text-align: center;
}

.preise-infos #footer
{
	padding: 0 0 100px 0;
}

#footer p
{
    font-size: 15px;
    line-height: 1.9em;
    margin: 0;
    padding: 0;
	color: #fff;
}

#footer a
{
	color: #fff;
	text-decoration: none;
}

#footer .logo-fb, #footer .logo-insta
{
	width: 30px;
	height: 30px;
	margin-top: 35px;
}

#footer .link_facebook
{
	order: 1;
}

#footer .link_instagram
{
	order: 3;
}

#footer .flexouter
{
	background-color: var(--black);
	display: flex;
	align-items: center;
	justify-content: center;
    margin: 0;
    padding: 25px var(--main-margin);

    position: relative;
    z-index: 10;
}

#footer .flexinner
{
	display: flex;
	align-items: center;
	flex-direction: column;
    margin: 0;
    padding: 0 15px;
	order: 2;
}

.firstline
{
	display: flex;
	justify-content: space-between;
	max-width: 1150px;
	margin-bottom: 15px;
	width: 100%;
}

.firstline a
{
	margin: 0 8px;
}

.flexbottom
{
	display: flex;
	align-items: flex-end;
    padding-bottom: 4px !important;
}

.flexbottom svg
{
	height: 20px !important;
	vertical-align: text-bottom;
	margin-right: 5px;
}

#footer .contact
{
	order: 1;
}
#footer .logo
{
	order: 2;
	width: 200px;
}
#footer .links
{
	order: 3;
	text-transform: uppercase;
}

#footer svg .fill
{
	fill: #fff;
}

#footer .partnerlogos
{
    margin: 0;
    padding: 45px var(--main-margin);
	background-color: #d9d9d9;
	position: sticky;
	bottom: 0;
}

#footer .partnerlogos img
{
	height: 60px !important;
	width: auto !important;
	object-fit: contain;
	margin: 0 15px;
	background-color: #fff;
	transition: all 0.3s;
	filter: grayscale(100%);
	opacity: 0.8;
}


#footer .partnerlogos img:hover
{
	filter: grayscale(0);
	opacity: 1;
}



@media (max-width: 1400px)
{
	#footer .flexouter {display: block;}
	#footer .logo-fb, #footer .logo-insta {margin: 20px 8px 0 8px;}
}


@media (max-width: 1100px)
{
	#footer .firstline {flex-direction: column; align-items: center;}
	#footer .contact	{order: 2;}
	#footer .logo {order: 1; margin-bottom: 15px;}
	#footer .links {order: 3;}
}


@media (max-width: 800px)
{
	#footer .flexouter
	{
		padding: 20px var(--main-margin);
	}
}

@media (max-width: 600px)
{
	#footer
	{
		padding-bottom: 60px !important;
	}
}


@media (max-width: 500px)
{
	#footer .flexouter
	{
		padding: 15px var(--main-margin);
	}
}

@media (max-width: 450px)
{
	#footer .contact
	{
		flex-direction: column;
		align-items: flex-start;
	}
	
	#footer .telefon svg
	{
		margin: 0 13px 0 8px;
	}
	
}

@media (max-width: 425px)
{
	#footer .links
	{
		margin-top: 15px;
		flex-wrap: wrap;
		justify-content: center;
		width: 305px;
	}
	
	#footer .links .link-anreise
	{
		order: 1;
		width: 36%;
	}
	#footer .links .link-sitemap
	{
		order: 2;
		width: 36%;
	}
	#footer .links .link-impress
	{
		order: 3;
	}
}



#seotext .seoswitch
{ 
	width: 30px;
    background: #eee;
    height: 30px;
    padding: 10px;
    border-radius: 1000px;
    cursor: pointer;
    margin: 20px 0;
    position: absolute;
    right: 49%;
    top: -45px;
    display: flex;
    align-items: center;
    justify-content: center;
	transition: all 0.3s;
}


.preise-infos #seotext .seoswitch
{
	top: -145px;
}


span.seoswitch.isopen 
{
    transform: rotate(180deg);
}

#seotext .seoswitch span
{
	font-size: 35px;
	transform: rotate(90deg);
    padding: 0 0 3px 0;		
}

#seotext article
{
	/* display: none; */
	/* overflow: hidden; */
}








/* css/fis.css */
/****************************************************************************************************************************************/


#bild.fullframe.halfframe
{
	height: 35vh !important;
}


.fis h1, .fis .h1
{
	margin-bottom: 20px;
}


.fis h3
{
	color: #fff;
}


.bayern-bayerischer-wald #inhalte .block
{
	margin-top: 25px;
}

.fis .infowrapper
{
	grid-template-rows: 1fr 1fr;
	grid-template-columns: 1fr 1fr;
	
	grid-template-areas: "info image" "map map";
	display: grid;
}


.fis .adressinfos
{
	background-color: var(--mediumgrey);
	padding: 0 50px;
	grid-area: info;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    justify-items: center;
    justify-content: center;
	box-sizing: border-box;
}

.fis .adressinfos p
{
	text-align: center;
}

.fis .adressinfos a
{
	/*font-size: 20px;*/
	text-align: center;
}

.fis .adressinfos .link
{
	font-size: 18px;
	text-decoration: none;
	font-weight: 300;
}



.fis .image
{
	grid-area: image;
	aspect-ratio: 1 / 1;
	position: relative;
}



.fis .image img
{
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
}

.fis .image .copyright
{
	position: absolute;
	bottom: 0;
	right: 0;
	background-color: #00000033;
	color: #fff;
	font-size: 12px;
	display: inline-block;
	padding: 3px 5px;
}


.fis .map
{
	grid-area: map;
	min-height: 300px;
    position: relative;
    aspect-ratio: 2 / 1;	
}


@media (max-width: 1200px)
{
	.fis .infowrapper
	{
		grid-template-rows: auto;
		grid-template-columns: auto;
		
		grid-template-areas: "image" "info" "map";
	}
	
	.fis .adressinfos
	{	
		padding: 50px 50px;
		aspect-ratio: auto;
	}
	
	.fis .map
	{
		width: 100%;
		min-height: auto;
		aspect-ratio: 2 / 1.5;
	}
	
}



.fis .name
{
	font-weight: 300;
	font-size: 32px;
}


.fis .breadcrumb
{
	font-size: 30px;
	color: #a4a4a4;
	display: block;
	text-align: center;
	font-weight: 300;
	margin: 50px 0 20px 0;
}

.fis .breadcrumb a
{
	font-size: 30px;
	color: #a4a4a4;
	text-decoration: none;	
}


.fis .phone
{
	font-weight: 300;
	display: block !important;
	border-right: none !important;
}

.fis .phone span
{
	display: inline-block !important;
}

.fis .phone::before 
{
	background-image: url(/bilder/icons/phone-fis.svg);
	display: inline-block;
	margin-right: 5px;
	content: ' ';
	background-size: 12px 17px;
	height: 17px;
	width: 12px;

}


.fis .web
{
	text-decoration: none;
}

.fis .web::before 
{
	background-image: url(/bilder/icons/web.svg);
	display: inline-block;
    vertical-align: middle;
    margin: 0 5px 5px 0;
	content: ' ';
	background-size: 17px 17px;
	height: 17px;
	width: 17px;
}



.fis .mail
{
	text-decoration: none;
}


.fis .mail::before 
{
	background-image: url(/bilder/icons/mail.svg);
	display: inline-block;
    vertical-align: middle;
    margin: 0 5px 5px 0;
	content: ' ';
	background-size: 17px 17px;
	height: 17px;
	width: 17px;
}



.fis .routenplanung
{
	margin: 20px 0 0 0;
	display: inline-block;
}


.fis.tipplist 
{
	display: flex;
	flex-wrap: wrap;
	max-width: 1150px;
	margin: 20px auto;
}

.fis.tipplist > div 
{
	box-sizing: border-box;
	padding: 25px;
    width: 32%;
    margin: 0.5%;
	background-color: #777777;
	display: flex;
    flex-direction: column;
    justify-content: space-between;	
}


.fis.tipplist .anfrage
{
	text-decoration: none;
	border: 1px solid #fff;
	padding: 10px 20px;
	transition: 0.3s all;
}

.fis.tipplist .anfrage:hover
{
	background-color: #fff;
	color: #777777;
}


@media (max-width: 1150px)
{
	.fis.tipplist > div 
	{
		width: 49%;
	}	
}

@media (max-width: 700px)
{
	.fis.tipplist > div 
	{
		width: 99%;
	}	
	
	.fis.tipplist h2
	{
		font-size: 26px;
	}	


	.fis .map
	{
		width: 100%;
		min-height: auto;
		aspect-ratio: 1 / 1;
	}
	
	
}




.fis.tipplist h2, .fis.tipplist p
{
	color: #fff;
}


.fis.tipplist div p:first-child
{
	text-align: center;
}





.fis.tipplist a 
{
	font-size: 25px;
	font-weight: 300;
	color: #fff;
	text-align: center !important;
}/* css/carousel.css */
/****************************************************************************************************************************************/

.content .carousel
{
    overflow: hidden;
    width: 100% - (var(--main-margin) * 2);
    box-sizing: border-box;
    margin: 0 var(--main-margin);
    padding: 0;
	opacity: 0;
	box-sizing: border-box;
    position: relative;
    
	
}

.content .carousel.running
{
	opacity: 1;
}



.carousel .carouselwrapper 
{
    display: flex;
	transition: all 0.3s;
}



.carousel .forward
{
	position: absolute;
	right: 0;
	bottom: 50%;
	top: 50%;
	font-size: 40px;
	cursor: pointer;
	user-select: none;
	
}

.carousel .backward
{
	position: absolute;
	left: 0;
	top: 50%;
	bottom: 50%;
	font-size: 40px;
	cursor: pointer;
	user-select: none;
}




.zimmerinfo 
{
    margin: 1vw;
    border: 1px solid var(--grey);
}


.cloned
{
/*	background-color: #00000088 !important;*/
}/* css/lp-pauschalen.css */
/****************************************************************************************************************************************/

#bild .bildbanner
{
	position: absolute;
	z-index: 101;
	background-color: #fffc;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding: clamp(1.25rem, 0.8333rem + 1.6667vw, 2.5rem) 20px;
	box-sizing: border-box;
}

#bild .bildbanner h1
{
	font-size: clamp(1.875rem, 0.9167rem + 3.8333vw, 4.75rem);
	text-transform: uppercase;
	color: var(--main-font-color);
	font-weight: 300;
	margin: 0 auto;
}

@media only screen and (max-width: 740px)
{
    #bild .bildbanner h1
    {
        text-align: center;
    }
}


#bild .bildbanner p
{
	position: static;
	height: auto;
	width: auto;
	margin: clamp(1.25rem, 0.8333rem + 1.6667vw, 2.5rem) auto;
}

#bild .bildbanner .buchen
{
	background-color: var(--main-font-color);
	color: #fff;
	text-decoration: none;
	font-size: clamp(1rem, 0.5833rem + 1.6667vw, 2.25rem);
	font-weight: 300;
	padding: 15px 40px;
	text-transform: uppercase;
}

.lp-pauschalen .content .wellnessbehandlungen
{
	margin-bottom: 0 !important;
}

.Jahresbutton
{
    text-align: center;
}

.Jahresbutton h2
{
    margin-bottom: 35px;
}

.Jahresbutton .link.directbooking
{
    display: inline-block;
}

.link.directbooking
{
    text-align: center;
    /*background-color: var(--lightgrey);*/
    /*margin: var(--main-margin);*/
    /*padding-top: 30px;*/
    margin-top: 25px;
}

.link.directbooking a
{
	background-color: var(--main-font-color);
	color: #fff;
	text-decoration: none;
	font-size: clamp(1rem, 0.5833rem + 1.6667vw, 2.25rem);
	font-weight: 300;
	padding: 15px 40px;
	text-transform: uppercase;
	display: inline-block;
}

.link.directbooking a.year2026
{
	background-color: var(--lightTaupe);
}

.link.directbooking a:hover
{
    cursor: pointer;
    background-color: grey;
}

#inhalte .directbooking a:hover
{
    color: #ffffff !important;
}

.lp-pauschalen .wellnessbehandlungen
{
	display: grid !important;
}

.lp-pauschalen .item
{
	display: block !important;
}

.lp-pauschalen .detail
{
	display: block !important;
}

.lp-pauschalen .saisonzeiten, .lp-pauschalen .saisonzeiten2
{
	display: block !important;
}

@media only screen and (max-width: 650px)
{
	.lp-pauschalen #bild.fullframe
	{
		height: calc(65vh);
		align-items: end;
	}

	.lp-pauschalen .h1
	{
		font-size: clamp(1.875rem, 0.9167rem + 3.8333vw, 4.75rem);
		margin: 30px 0 25px;
	}
	
	
	
	.lp-pauschalen .h2
	{
		font-size: clamp(1.375rem, 1.1667rem + 0.8333vw, 2rem);
	}	
}

.lp-pauschalen .hinweis-lp
{
    margin-top: 100px;
}
/* css/aktivprogramm.css */
/****************************************************************************************************************************************/

.sport-fitness-welt.aktivprogramm .anwendung
{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    border: 1px solid #9C9C9C;
    border-radius: 25px;
    -webkit-box-shadow: 3px 3px 2px 0px #A8A8A8;
    box-shadow: 3px 3px 2px 0px #A8A8A8;
    background-color: #f3f1ef;
    padding: 0;
    margin-bottom: 20px;
}

.sport-fitness-welt.aktivprogramm .anwendung .image
{
    width: 24%;
}

.sport-fitness-welt.aktivprogramm .anwendung .image p
{
    margin: 0;
    padding: 0;
    height: 100%;
}

.sport-fitness-welt.aktivprogramm .anwendung .image p img
{
    height: 100% !important;
    width: 100% !important;
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
    object-fit: cover;
}


.sport-fitness-welt.aktivprogramm .anwendung .text
{
    width: 75%;
    text-align-last: left;
    box-sizing: border-box;
    padding: 0 25px 0 25px;

}

.sport-fitness-welt.aktivprogramm .anwendung .text b, .sport-fitness-welt.aktivprogramm .anwendung .text strong
{
    font-size: 20px;
}

.sport-fitness-welt.aktivprogramm .anwendung .text p
{
    text-align-last: left;
}

.sport-fitness-welt.aktivprogramm .anwendung .text p:first-of-type
{
    padding-bottom: 0;
}

.sport-fitness-welt.aktivprogramm .anwendung .text p img
{
    display: inline-block;
    margin-right: 10px;
}

.sport-fitness-welt.aktivprogramm .anwendung .text .legende
{
    font-size: 15px;
}

.sport-fitness-welt.aktivprogramm .anwendung .text .legende img
{
    width: 130px !important;
    height: auto !important;
}

@media only screen and ( max-width: 1000px )
{
    .sport-fitness-welt.aktivprogramm .anwendung .image
    {
        width: 100%;
    }

    .sport-fitness-welt.aktivprogramm .anwendung .image p img
    {
        border-top-left-radius: 25px;
        border-top-right-radius: 25px;
        border-bottom-left-radius: 0;
        object-fit: cover;
    }

    .sport-fitness-welt.aktivprogramm .anwendung .text
    {
        width: 100%;
    }

}
/* css/artikel.css */
/****************************************************************************************************************************************/

.sport-fitness-welt.aktivprogramm .anwendung,
.neuigkeiten #inhalte .thema
{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    border: 1px solid #9C9C9C;
    border-radius: 25px;
    -webkit-box-shadow: 3px 3px 2px 0px #A8A8A8;
    box-shadow: 3px 3px 2px 0px #A8A8A8;
    background-color: #f3f1ef;
    padding: 0;
    margin-bottom: 20px;
}

.sport-fitness-welt.aktivprogramm .anwendung .image,
{
    width: 24%;
}

.neuigkeiten #inhalte .thema .image
{
    width: 30%;
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
    overflow: hidden
}

.sport-fitness-welt.aktivprogramm .anwendung .image p,
.neuigkeiten #inhalte .thema .image p
{
    margin: 0;
    padding: 0;
    height: 100%;
}

.sport-fitness-welt.aktivprogramm .anwendung .image p img,
.neuigkeiten #inhalte .thema .image p img
{
    height: 100% !important;
    width: 100% !important;
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
    object-fit: cover;
}


.sport-fitness-welt.aktivprogramm .anwendung .text,
{
    width: 75%;
    text-align-last: left;
    box-sizing: border-box;
    padding: 0 25px 0 25px;

}

.neuigkeiten #inhalte .thema .text
{
    width: 70%;
    box-sizing: border-box;
    padding: 0 25px 0 25px;
    position: relative;
}

.neuigkeiten #inhalte .thema .text h2
{
    font-size: 20px;
    text-transform: none;
    font-weight: 400;
    text-align: left;
}

.sport-fitness-welt.aktivprogramm .anwendung .text b,
.sport-fitness-welt.aktivprogramm .anwendung .text strong,
.neuigkeiten #inhalte .thema .text strong
{
    font-size: 20px;
}

.sport-fitness-welt.aktivprogramm .anwendung .text p,
.neuigkeiten #inhalte .thema .text p
{
    text-align-last: left;
}

.sport-fitness-welt.aktivprogramm .anwendung .text p:first-of-type,
.neuigkeiten #inhalte .thema .text p:first-of-type
{
    padding-bottom: 0;
}

.sport-fitness-welt.aktivprogramm .anwendung .text p img,
.neuigkeiten #inhalte .thema .text p img
{
    display: inline-block;
    margin-right: 10px;
}

.sport-fitness-welt.aktivprogramm .anwendung .text .legende,
.neuigkeiten #inhalte .thema .text .legende
{
    font-size: 15px;
}

.sport-fitness-welt.aktivprogramm .anwendung .text .legende img,
.neuigkeiten #inhalte .thema .text .legende img
{
    width: 130px !important;
    height: auto !important;
}

.neuigkeiten #inhalte .thema .text .linkButton
{
    position: absolute;
    text-align-last: right;
    right: 20px;
    bottom: 20px;
    left: auto;
    top: auto;
    width: auto;
}

@media only screen and ( max-width: 1000px )
{
    .sport-fitness-welt.aktivprogramm .anwendung .image,
    .neuigkeiten #inhalte .thema .image
    {
        width: 100%;
    }

    .sport-fitness-welt.aktivprogramm .anwendung .image p img,
    .neuigkeiten #inhalte .thema .image p img
    {
        border-top-left-radius: 25px;
        border-top-right-radius: 25px;
        border-bottom-left-radius: 0;
        object-fit: cover;
    }

    .sport-fitness-welt.aktivprogramm .anwendung .text,
    .neuigkeiten #inhalte .thema .text
    {
        width: 100%;
    }

    .neuigkeiten #inhalte .thema .text .linkButton
    {
        position: relative;
    }

}
/* css/autowellness.css */
/****************************************************************************************************************************************/

.auto-wellness .zimmerliste .zimmerinfo
{
    background-color: var(--lightgrey);
}



.auto-wellness .terminbuchen
{
    color: #fff;
    text-transform: uppercase;
    background-color: var(--black); 
    padding: 8px 15px;
    text-decoration: none;
    margin: 0;
}



.auto-wellness .auto-kontakt
{
    display: flex;
    width: 90%; 
    margin: 25px auto;
    justify-content: space-between;
}

.auto-wellness .auto-kontakt .button
{
    width: 32%;
    border: 1px solid var(--black);
    text-transform: none !important;
    
}

.auto-wellness .auto-kontakt .button a
{
     font-weight: 500 !important; 
    font-size: 13px !important;  
    text-transform: none;
    letter-spacing: -0.3px !important;
}

.auto-wellness .auto-kontakt .button:hover
{
    background-color: var(--lightTaupe);  
}

.auto-wellness .auto-kontakt .button:hover .button-text
{
    color: #fff !important;  
} 

.auto-wellness .auto-kontakt .button img
{
    padding: 0 7px 0 0;
    display: inline;
    vertical-align: -6px;
}

.auto-wellness .auto-kontakt p
{
    margin: 0 !important;
    padding: 0 !important;
}

.auto-wellness .auto-kontakt .button-hg
{
    background-color: var(--lightTaupe);
    color: #fff;
    margin: 0;
    padding: 6px 0;
    display: block;
}

.auto-wellness .auto-kontakt .button-text
{
    color: var(--black) !important; 
    margin: 0; 
    padding: 6px 0;  
    text-transform: none; 
}


@media only screen and ( max-width: 500px )
{
    .auto-wellness .auto-kontakt .button-hg span
    {
       /* display: none;     */
    }
    
    .auto-wellness .auto-kontakt
    {
       display: block; 
    }

    .auto-wellness .auto-kontakt .button
    {
        width: 100%; 
        display: flex; 
        margin: -1px 0 0 0 !important;            
    }
    
    .auto-wellness .auto-kontakt .button-hg, .auto-wellness .auto-kontakt .button .button-text
    {
         width: 49%;
     } 

}