/* @override https://koitsche.de/wp/wp-content/themes/koitschev2/style.css */

/*
Theme Name: KOITSCHE BERGGASTHOF
Theme URI:
Description:
Version: 1.01
Author: ZH2
Tags:
*/


/*	IMPORTS
-------------------------------------------------------------------------------*/


@import url("css/columns.css");
@import url("css/swiper.min.css");



/* @group WEBFONTS */

/*	WEBFONTS
-------------------------------------------------------------------------------*/


/* alegreya-regular - latin */
@font-face {
  font-family: 'Alegreya';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('webfonts/alegreya-v19-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('webfonts/alegreya-v19-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* alegreya-700 - latin */
@font-face {
  font-family: 'Alegreya';
  font-style: normal;
  font-weight: 700;
  src: local(''),
       url('webfonts/alegreya-v19-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('webfonts/alegreya-v19-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* alegreya-italic - latin */
@font-face {
  font-family: 'Alegreya';
  font-style: italic;
  font-weight: 400;
  src: local(''),
       url('webfonts/alegreya-v19-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('webfonts/alegreya-v19-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* alegreya-700italic - latin */
@font-face {
  font-family: 'Alegreya';
  font-style: italic;
  font-weight: 700;
  src: local(''),
       url('webfonts/alegreya-v19-latin-700italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('webfonts/alegreya-v19-latin-700italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}


/* @end */

/* @group RESET */

/*	RESET
-------------------------------------------------------------------------------*/

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

article, aside, figure, footer, header, hgroup, nav, section {display: block;}
img, object, embed {max-width: 100%;height:auto;}

/* force a vertical scrollbar to prevent a jumpy page */
html {overflow-y: scroll;}

/* we use a lot of ULs that aren't bulleted.
	don't forget to restore the bullets within content. */
ul {list-style: none;}

blockquote, q {quotes: none;}

blockquote:before,
blockquote:after,
q:before,
q:after {content: ''; content: none;}

a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;}
del {text-decoration: line-through;}
abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}

/* tables still need cellspacing="0" in the markup */
table {border-collapse: collapse; border-spacing: 0;}
th {font-weight: bold; vertical-align: bottom;}
td {font-weight: normal; vertical-align: top;}

input, select {vertical-align: middle;}

input[type="radio"] {vertical-align: text-bottom;}
input[type="checkbox"] {vertical-align: bottom; *vertical-align: baseline;}
input:focus, textarea:focus, select:focus { outline: none;}

input { /* remove top input shadow */
-webkit-appearance: none;
-moz-appearance: none;
}

table {font-size: inherit; font: 100%;}

a:hover, a:active {outline: none;}
small {font-size: 85%;}
strong, th {font-weight: bold;}
td, td img {vertical-align: top;}

/* standardize any monospaced elements */
pre, code, kbd, samp {font-family: monospace, sans-serif;}

/* hand cursor on clickable elements */
.clickable,
label,
input[type=button],
input[type=submit],
button {cursor: pointer;}

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea {margin: 0; border-radius: 0; font-family: inherit;}

/* make buttons play nice in IE */
button {width: auto; overflow: visible; outline: none;}

/* let's clear some floats */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clear { clear: both; height: 0px; overflow: hidden;}
.clr:after { content: ""; display: table; clear: both;}
.cf:after {	content: ""; display: table; clear: both; }

/* prevent flickering on touch */
* {
	-webkit-tap-highlight-color:transparent;
}

/* natural box layout model to all elements */
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
 }

 /* subscript and superscript */
sub { vertical-align: sub; font-size: 70%; line-height: 0; }
sup { vertical-align: super; font-size: 70%; line-height: 0; }



/* @end */


/*	VARS
-------------------------------------------------------------------------------*/


/* Colors

rot			#B61F2A
rot hell		#D83236
braun		#522414

beige		#F9EBD2
beige hell	#FCF6EB

LINK		#B61F2A

*/


 :root {
	--text-color: #522414;
	--link-color: #B61F2A;
	--link-color-hover: #522414;

	--border-color: #DDD;

	--primary-color: #B61F2A;
	--primary-color-light: #D83236;

	--primary-bg: #F9EBD2;

	--secondary-color: #F9EBD2;
	--secondary-bg: #FCF6EB;

	--text-gray: #888;

	--font: 'Alegreya', serif;

	--text-small: 0.9rem;

	--container-width: 1200px;
	--container-wide-width: 1380px;
	--main-width: 820px;

	--vspace-xs: 0.5rem;
	--vspace-s: 1rem;
	--vspace: 2rem; /*stack margin-top */
	--vspace-l: 2.5rem;
	--vspace-xl: 3rem;

	--box-padding: 2rem;
 }


 /* @group GENERAL */
 
 /* GENERAL
 ---------------------------------------------------------------------------------*/
 

html, body {
	height: 100%;
	font-family: var(--font);
	font-size: 22px;
	line-height: 1.6;
	 -webkit-text-size-adjust: 100%;
}

body {
	height: 100%;
	background: #FFF;
	color: var(--text-color);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a {
	position: relative;
	color: var(--link-color);
	text-decoration: none;
}

a, input {
	transition: all 200ms ease;
}

a:visited {
}

a:active {
}

a:hover {
	color: var(--link-color-hover);
	color: #D83236;
}


 /* TYPOGRAPHY 
 ---------------------------------------------------------------------------------*/
 


h1, .h1 {
	font-size: 50px;
	font-size: 2.25rem;
	line-height: 1.2;
	margin-top: var(--vspace);
	margin-bottom: 4rem;
	text-align: center;
}

h2 {
	color: var(--primary-color);
	font-size: 34px;
	font-size: 1.6rem;
	line-height: 1.3;
	margin-top: calc(var(--vspace) + 1rem);
}

h3 {
	font-size: 24px;
	font-size: 1.2rem;
	line-height: 1.45;
	margin-top: calc(var(--vspace) + 0.2rem);
}



h4 {
	font-size: 1.0rem;
	color: var(--text-gray);
	line-height: 1.4;
	margin-top: var(--vspace);
}



p {
	margin-top: var(--vspace);
}


p + p  {
	margin-top: calc(var(--vspace) - 0.2rem);
}

hr {
	position: relative;
	display: block;
	height: 3px;
	border: 0;
	background: transparent url(images/dotted-line-text.svg) repeat-x left center;
	opacity: .4;
	margin: 2.5rem 0;
}

a:hover img {
	transition: all 300ms ease;
}


article > * + * { /* the lobotomized owl selector */
	margin-top: var(--vspace);
}

.main > *:first-child,
.stack > *:first-child {
	margin-top: 0;
}


 /* LAYOUT 
 ----------------------------------------------------------------------------------*/
 
 /* # Container */

.page-wrap {
	position: relative;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	overflow: hidden;
	/*sticky footer*/
	display: flex;
	flex-direction: column;
}

.container,
.container-wide,
.container-fluid {
	position: relative;
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 30px;
}

.container-wide {
	max-width: var(--container-wide-width);
}

.container-fluid {
	max-width: none;
	width: 100%;
	padding: 0;
}

@media screen and (max-width: 600px) { 
	html, body {
		font-size: 19px;
		--box-padding: 1.5rem;
	}
	
	h1, .h1 {
		font-size: 34px;
		font-size: 1.8rem;
		margin-bottom: 3rem;
	}

	.container {
		padding-left: 20px;
		padding-right: 20px;
	}
}


@media screen and (max-width: 360px) {
	html, body {
		font-size: 18px;
	}
	
	.container {
		padding-left: 15px;
		padding-right: 15px;
	}

}

 
 /* @end */
 
 
 /* @group HEADER */
 
 /* HEADER  
 --------------------------------------------------------------------------------- */
 
 
#header {
	position: relative;
	padding: 20px 0 50px 0;
	border-bottom: 0px solid #ddd;
}


.header-meta {
	display: flex;
	align-items: center;
	margin-bottom: -10px;
}


.lang-menu ul  {
	display: flex;
}

.lang-menu a  {
	display: block;
	font-weight: bold;
	padding: 0 25px 0 0;
	font-size: 19px;
	opacity: .5;
}

.lang-menu .current-lang a {
	opacity: 1;
}

.lang-menu a:hover {
	color: var(--text-color);
	opacity: 1;
}


.header-phone {
	display: flex;
	align-items: center;
	margin-left:  auto;
	font-weight: bold;
	font-size: 21px;
	color: var(--primary-color);
}

.header-phone i {
	font-size: 1.7rem;
	line-height: 1;
	margin: 0 5px 0 0;
}

.header-content {
	display: flex;
	flex-direction: column;
	align-items: center;
}

#header .container {
}

AUS_#header .container::after { /*logo center guide*/
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 1px;
	height: 200px;
	background: plum;
	
}

.logo {
	flex: 0 0 auto;
	width: 380px;
	width: 440px;
    transition: all 0.3s;
}

.logo a {
	display: block;
}

.logo img {
	display: block;
	max-width: 100%;
	height: auto;
	padding-left: 14%; /*center balance logo*/
}


#header::after { /*🤪 effect*/
	content: "";
	position: absolute;
	top: -130px;
	right: 15%;
	width: 130px;
	height: 200px;
	background: #666;
	background: transparent url(images/murmel.svg) no-repeat top center;
	background-size: contain;
	border: 1px solid #333;
	transform: rotate(180deg) scaleX(-1);
	
	display: none; /* AUS */
}

.scrolled-to-top #header::after {
	top: -130px;
	animation: murmel_header_show 500ms ease forwards;
	animation-delay: 1000ms;
}

@keyframes murmel_header_show {
  0% {top: -130px;}
  100% {top: -300px;}
}


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

	#header {
		display: flex;
		align-items: center;
		padding: 0;
		height: 180px;
	}
	
	.header-meta {
		display: none;
	}
	
	.logo {
		width: 380px;
		margin-top: -20px;
	}

}

@media screen and (max-width: 600px) {
	#header {
		height: 120px;
	}
	
	.logo {
		width: 280px;
		max-width: 65vw;
		margin-top: -5px;
	}

}




 /* @end */
 

 /* @group MENU */

/* MENU
--------------------------------------------------------------------------------- */


#nav {
	margin: 55px 0 0 0;
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
	flex-wrap: nowrap;
	width: 100%;
}


#nav ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

#nav ul li {
	position: relative;
	margin: 0 2.2rem 0 0;
	border-bottom: none;
}

#nav > ul li:last-child {
	margin-right: 0;
	padding-right: 0;
}


#nav ul li a {
	position: relative;
	margin: 0;
	font-size: 19px;
	font-weight: bold;
	display: block;
	letter-spacing: .7px;
	padding: 0rem 0rem;
	text-transform: uppercase;
}


#nav ul li a::after { 
	content: "";
	position: absolute;
	bottom: 0px;
	left: 25%;
	height: 2px;
	background: var(--primary-color);
	opacity: 0;
	width: 50%;
	transition: all 200ms ease;
}


#nav > ul li.menu-item-has-children {
	position: relative;
}



#nav ul li:hover > a {
}


#nav ul li.current-menu-item > a {
}

#nav ul li.current-menu-ancestor > a::after,
#nav ul li.current-menu-item > a::after {
	opacity: 1;
	width: 100%;
	left: 0;
}

#nav ul li a:hover {
	color: var(--link-color-hover);
	text-decoration: none;
}


#nav ul li.current-menu-ancestor.active a:after, 
#nav ul li a:hover:after {
	background: var(--link-color-hover);
	opacity: 1;
	width: 100%;
	left: 0;
}

#nav ul li.menu-item-has-children.active > a {
	color: var(--link-color-hover);
}

#nav ul li.current_page_parent a:hover,
#nav ul li.current_page_parent:hover a,
#nav ul li.current_page_item:hover a {
}

#nav ul ul {
	display: block;
	position: absolute;
	top: 100%;
	margin-top: -10px;
	left: -20px;
	padding: 20px;
	padding-top: 15px;

	z-index: 20;
	background: #FFF;
	box-shadow: 1px 5px 6px 0px rgba(0,0,0, .06);

	min-width: 10rem;

	opacity: 0;
	visibility: hidden;
	transition: all 300ms ease;
}

#nav ul .active > ul { /*js class toggle*/
	opacity: 1;
	visibility: visible;
	margin-top: 0;
}

/* align last menu item to the right to avoid off screen position*/

#nav ul li:last-child ul {
	left: auto;
	right: 0;
}

#nav ul ul li {
	padding: 0.2rem 0;
}


#nav ul ul li a {
	line-height: 150%;
	height: auto;
	display: block;
	font-weight: normal;
	text-transform: none;
	padding-bottom: 5px;
}

#nav ul ul li a:hover {
	text-decoration: underline;
}

#nav ul ul li:last-child a {
	padding-bottom: 0;
}

#nav ul ul li a:after {
	display: none;
}


#nav ul ul li.current-menu-item > a {
	color: var(--text-color);
}

#nav ul ul li.menu-item-has-children > a:hover {

}

/* 3rd level */

#nav ul ul ul {
	display: none;
}

@media screen and (max-width: 980px) {
	#nav {
		display: none;
	}
}


 /* @end */
 

/* @group MOBILE MENU */

/* MOBILE MENU
-----------------------------------------------------*/


.mob-menu {
	display: none; /*js trigger*/
	position: absolute;
   	top: 0;
   	left: 0;
	width: 100%;
	z-index: 10;
	opacity: 0;
	background: #FFF;
	animation: navfadeIn 400ms ease-in-out 1 forwards;
	box-shadow: 0px -10px 50px 0px rgba(0,0,0, .7);
	padding: 65px 0 0 0;
}

.mob-menu .container {
	position: relative;
	width: 100%;
	max-width: 500px;
	margin: 0 auto;
}

.mob-lang-menu {
	margin-bottom: 30px;
}

.mob-lang-menu ul {
	display: flex;
}


.mob-lang-menu a {
	display: block;
	padding: 10px 0;
	padding-right: 25px;
	font-size: 19px;
	font-weight: bold;
	text-transform: uppercase;
	opacity: .5;
}

.mob-lang-menu .current-lang a {
	opacity: 1;
}


.mob-phone {
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--primary-color);
	font-weight: bold;
	font-size: 1.1rem;
	margin: 10px 0 20px 0;
}

.mob-phone i {
	margin: 0 10px;
	font-size: 1.8rem;
	margin-left: -30px;
}


.mob-booking-btn {
	margin-top: 20px;
	font-size: 1rem;
	font-weight: bold;
	width: 100%;
	color: #FFF;
	display: flex;
	align-items: center;
	line-height: 1;
	padding: 1.3rem 10px;
	justify-content: center;
	background: var(--primary-color);
}

.mob-booking-btn:hover {
	color: #FFF;
	background: var(--primary-color-light);
}

.mob-booking-btn i {
	font-size: 2rem;
	margin: -5px;
	margin-right: 5px;
}


.mob-menu nav {
	margin: 0 0 0 0;
}

.mob-menu nav li a {
	display: flex;
	justify-content: space-between;
	font-size: 18px;
	font-weight: bold;
	line-height: 1.3;
	letter-spacing: .5px;
	text-transform: uppercase;
	padding: 20px 0;
	text-align: left;
	border-top: 1px solid #EDEDED;
}

.mob-menu nav li a:hover {
	color: var(--text-color);
}

.mob-menu nav li a br {
	display: none;
}

.mob-menu nav li:first-child a {
	border-top: 0;
}

.mob-menu nav li a:hover {
}

.mob-menu nav li.current-menu-item > a {
	color: var(--text-color);
}

.mob-menu nav li.menu-item-has-children.active > a {
}

.mob-menu nav li.menu-item-has-children > a::after {
	content: "\e809";
	display: flex;
	margin-bottom: auto; /*!*/
	align-items: flex-start;
	color: rgba(0,0,0, .2);
	font-family: 'icons';
	font-weight: normal;
	font-size: 1.3rem;
	line-height: 20px;
	transition: all 300ms ease;
}

.mob-menu nav li.menu-item-has-children.active > a::after {
	transform: rotate(180deg);
}

.mob-menu nav li.active > a {
	color: var(--text-color);
}

.mob-menu li.page-ancestor a { /* page-ancestor … add CSS class to WP menu item*/
	display: flex;
	justify-content: space-between;
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: bold;
	font-size: 22px;
	font-size: 1.15rem;
}

.mob-menu li.page-ancestor.current-menu-item a {
	color: var(--text-color);
}

.mob-menu li.page-ancestor a::after {
	content: "\e808";
	font-family: 'icons';
	font-weight: normal;
	font-style: normal;
}


.mob-menu nav li ul {
	position: relative;
	padding: 0px 0 0 25px;
	margin: 0;
	margin-bottom: 20px;
}

.mob-menu nav li li {
	opacity: 1;
	animation: none;
}

.mob-menu nav li li a {
	font-size: 1rem;
	text-transform: none;
	letter-spacing: 0;
	font-weight: normal;
	border: none;
	padding: 10px 0;
}

.mob-menu nav li li a:hover {
}


/* Mobile Menu Animation */

@keyframes navfadeIn {
0% {
	opacity: 0.0;
	transform: translate(0px,-50px);
}

100% {
	opacity: 1.0;
	transform: translate(0,0);
	}
}

@keyframes navfadeOut {
0% {
	opacity: 1.0;
	transform: translate(0px,0);
}

100% {
	opacity: 0.0;
	transform: translate(0px,-50px);
	}
}


@keyframes fadeLiIn {
0% {
	opacity: 0.0;
	transform: translate(0px,-10px);
}

100% {
	opacity: 1.0;
	transform: translate(0,0);
	}
}




/* Mobile Menu Trigger */

.mob-menu-trigger {
	display: none;
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%);

	border: none;
	width: 50px;
	height: 49px;
	margin: 0 0 0 0;
	z-index: 999;
	text-transform: uppercase;
	background: transparent;
	outline: none;
}

.mob-menu-trigger.open {
}

/* Hamburger Icon ani*/


.mob-menu-trigger span {
	margin: 0 auto;
	position: relative;
}
.mob-menu-trigger span:before,
.mob-menu-trigger span:after {
	position: absolute;
	content: '';
}
.mob-menu-trigger span,
.mob-menu-trigger span:before,
.mob-menu-trigger span:after {
	width: 28px;
	height: 3px;
	background-color: var(--primary-color-light);
	display: block;
}
.mob-menu-trigger span:before {
	margin-top: -8px;
}
.mob-menu-trigger span:after {
	margin-top: 8px;
}

.mob-menu-trigger span {
	transition-duration: 0s;
	transition-delay: 0.15s;
}
.mob-menu-trigger.open span {
	background-color: rgba(0,0,0,0.0);
	transition-delay: 0.15s;
}
.mob-menu-trigger span:before {
	transition-property: margin, transform;
	transition-duration: 0.15s;
	transition-delay: 0.15s, 0s;
}
.mob-menu-trigger.open span:before {
	margin-top: 0;
	transform: rotate(45deg);
	transition-delay: 0s, 0.15s;
}
.mob-menu-trigger span:after {
	transition-property: margin, transform;
	transition-duration: 0.15s;
	transition-delay: 0.15s, 0s;
}
.mob-menu-trigger.open span:after {
	margin-top: 0;
	transform: rotate(-45deg);
	transition-delay: 0s, 0.15s;
}

/* end Hambuger Icon ani*/

/* Menu Animation */

.mob-menu li {
 opacity: 0;
 animation: fadeLiIn 400ms ease-in-out 1 forwards;
 }

.mob-menu li:nth-child(1) {
  animation-delay: 100ms;
}

.mob-menu li:nth-child(2) {
  animation-delay: 200ms;
}

.mob-menu li:nth-child(3) {
  animation-delay: 300ms;
}

.mob-menu li:nth-child(4) {
  animation-delay: 400ms;
}

.mob-menu li:nth-child(5) {
  animation-delay: 500ms;
}

.mob-menu li:nth-child(6) {
  animation-delay: 600ms;
}

.mob-menu li:nth-child(7) {
  animation-delay: 700ms;
}

.mob-menu li:nth-child(8) {
  animation-delay: 750ms;
}


@media screen and (max-width: 980px) {
	.mob-menu-trigger {
		display: block;
	}
	
	.mob-menu-open .mob-menu {
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: center;
		AUS__animation: navfadeOut 500ms ease-in-out 1 backwards;
	}

}

@media screen and (max-width: 600px) {
	
	.mob-menu-trigger {
		right: 0px;
	}
	
	.mob-menu-trigger span,
	.mob-menu-trigger span:before,
	.mob-menu-trigger span:after {
		width: 22px;
	}
	
	.mob-menu-trigger span:before {
		margin-top: -7px;
	}
	.mob-menu-trigger span:after {
		margin-top: 7px;
	}
	
	.mob-menu {
		padding-top: 40px;
	}

}


/* @end */



/* @group CONTENT */

/* CONTENT
--------------------------------------------------------------------------------- */

#content {
	position: relative;
	flex: 1 0 auto; /*sticky footer*/
}

#content:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background:  url(images/body-bg.svg) repeat-y top center;
	background-size: 100% auto;
	z-index: -1;
	opacity: 1;
}


img {
	display: block;
	max-width: 100%;
    transition: all 250ms ease;
}


main {
	display: block; /*IE*/
	padding: 0 0 6rem 0;
}


.main {
	max-width: var(--main-width);
}

@media screen and (max-width: 600px) {
	#content:after {
		display: none;
	}
}



 /* @end */
 


/* @group WP Core Styles */


/* WP core styles 
--------------------------------------------------------------------------------- */


.alignnone {

}

.alignsemiwide {
    margin-left : calc( 10% - 10vw );
    margin-right : calc( 10% - 10vw );
    max-width    : 100vw;
}

.alignwide {
    margin-left : calc( 20% - 20vw );
    margin-right : calc( 20% - 20vw );
    max-width    : 100vw;

}

.alignfull {
    margin-left  : calc( -100vw / 2 + 100% / 2 );
    margin-right : calc( -100vw / 2 + 100% / 2 );
    max-width    : 100vw;
}

.aligncenter,div.aligncenter {
	display: block;
	margin: 5px auto 5px auto;
}

.alignright {
	float: right;
	margin: 5px 0 20px 20px;
}

.alignleft {
	float: left;
	margin: 5px 20px 20px 0;
	margin: 5px 1.4rem 1.4rem 0;
}

.aligncenter {
	display: block;
	margin: 5px auto 5px auto;
}

a img.alignright {
	float: right;
	margin: 5px 0 1.4rem 1.4rem;
}

img.alignnone,
a img.alignnone {
	margin: 0;
	padding: 0;
}

a img.alignleft {
	float: left;
	margin: 5px 1.4rem 1.4rem 0;
}

a img.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption-text {
	font-size: 0.85rem;
	line-height: 140%;
	color: #888;
	padding: 10px 0 0 0;
}

figure.wp-caption  {
	display: table;
	max-width: 100%;
	margin-top: 2rem;
}

figure.wp-caption figcaption {
	display: table-caption;
	caption-side: bottom ;
}

figure.wp-caption img {
	display: block;
}


.sticky {
}


/* WP gallery */


.gallery {
	display: flex;
	flex-wrap: wrap;
	margin-top: var(--vspace);
}


.gallery-item {
	flex: 0 0 auto;
	width: 25%;
	padding: 0px 2px 2px 0px; /*gap*/
	overflow: hidden;
}

.gallery-icon {
	overflow: hidden;
}


.gallery-item a {
	position: relative;
	display: block;
	background: rgba(0,0,0, .03);
}

.gallery-item a:hover {
	background: var(--primary-color);
}

.gallery-item a::after {
	content: "+";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #FFF;
	line-height: 1;
	padding-bottom: 3%;
	font-size: 2rem;
	transform: rotate(-30deg);
	opacity: 0;
	transition: all 300ms ease;
}


.gallery-item a:hover::after {
	opacity: 1;
	transform: rotate(0deg);
}

.gallery-item img {
	display: block;
	max-width: 100%;
	width: 100%;
	height: auto;
	transition: all 300ms ease-in-out;
}

.gallery-item a:hover img {
	transform: scale(1.1);
	opacity: .2;
}


.gallery .wp-caption-text {
	display: none;
}

a.post-edit-link {
	position: relative;
	display: inline-block;
	margin: 0 0 15px 0;
	font-size: 13px;
	line-height: 11px;
	padding: 8px 12px;
	background: #0073AA;
	color: #FFF;
	font-weight: bold;
	border-radius: 2px;
	align-self: flex-start;
}

@media screen and (max-width: 600px) {
	.wp-caption-text {
		padding-bottom: 0;
	}
	
	.alignsemiwide,
	.alignwide {
	    margin-left: 0;
	    margin-right: 0;
	}
	
	.alignleft,
	.alignright,
	a img.alignleft,
	a img.alignright {
		float: none;
		margin-left: 0;
		margin-right: 0;
}

}



 /* @end */
 


/* @group EDITOR STYLES */


/* EDITOR STYLES
--------------------------------------------------------------------------------- */



/* === Lists */

ul,
ol {
	margin-top: var(--vspace);
	margin-top: calc(var(--vspace) - 10px);

}

ul {
	padding-left: 1.0rem;
	list-style-type: none;
}

li {
	position: relative;
	margin: 0 0 5px 0;
}

ul li::before {
	position: absolute;
	content: "•";
	margin: -0.35rem 0 0 -1.0rem;
	font-size: 130%;
	color: var(--primary-color);
}

ol {
	padding-left: 22px;
}


.list-unstyled,
.list-unstyled li {
	padding: 0;
	margin: 0;
	list-style: none;
}

.list-unstyled li:before {
	display: none;
}


/* === Icons */



.link-icon {
	position: relative;
	display: block;
	margin: 0 3px 8px 0;
	font-weight: 700;
}

p > span.link-icon {
	margin-bottom: 0;
}

.link-icon:before {
	content: "\e802";
	font-family: 'icons';
	font-size: 1.1em;
	font-weight: normal;
	color: #C70370;
	margin: 0 8px 0 0;
}

i { /* IE */
	font-family: 'icons';
    -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* === Embeds, iFrames  */


iframe {
  margin-top: 2rem;
}

iframe.googlemap {
	width: 100%!important;
	height: 400px;
}


iframe.googlemap.size-1 { height: 300px;}
iframe.googlemap.size-2 { height: 400px;}
iframe.googlemap.size-3 { height: 600px;}


.embed-responsive {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  padding-top: 25px;
  height: 0;
  margin-top: 2rem;
}

.embed-responsive iframe,
.embed-responsive object,
.embed-responsive embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}



/* === Shortcodes / Quicktags  */


.text-large {
	font-size: 120%;
}

.text-small {
	font-size: 11px;
	font-size: 0.8em;
	line-height: 150%;
	margin-bottom: 2rem;
}

.text-quote {
	position: relative;
	margin: 3rem auto;
	max-width: 550px;
	font-style: normal;
	font-size: 140%;
	font-weight: bold;
	color: var(--primary-color);
}


.text-quote strong {
	font-weight: normal;
}

.text-quote p:last-of-type {
	margin-bottom: 0;
}

.text-quote .cite {
	font-size: 0.8rem;
	font-style: normal;
	font-weight: bold;
	display: block;
	margin: 0.5rem 0 0 0;
	font-family: var(--font);
	font-weight: 700;
	color: var(--text-gray);
}

.box {
	position: relative;
	font-size: 0.95rem;
	padding: var(--box-padding);
	margin-top: var(--vspace);
	border-radius: 4px;
	background: var(--primary-bg);

}


.box::after {
	content:  "";
	position: absolute;
	width: 140px;
	height: 60px;
	top: -33px;
	right: 8%;
	max-width: 20vw;
	background: transparent url(images/illu-falter-r.svg) no-repeat bottom right;
	background-size: contain;
	border: 0px solid PLUM;
}

.box > * {
	--vspace: 1.0rem;
}

.box > *:first-child {
	margin-top: 0;
}

.box p:empty {
	display: none;
}

.box-important {
	background: transparent;
	border: 2px solid var(--primary-color);
}

i.icon {
	font-weight: normal!important;
}

.icon.download {
	font-size: 1.6em;
	color: var(--link-color);
	line-height: 1;
	margin: 0 0px 5px -0.5rem;
	vertical-align: middle;
	display: inline-block;
}

.icon.bullet {
}


.main .list-style.line ul li:before {
	display: none;
}

.main .list-style.line ul,
.main .list-style.line ul li {
	padding-left: 0;
}

.main .list-style.line ul li {
	padding: 0.35rem 0 1.0rem 0;
	margin-bottom: 0.5rem;
	border-bottom: 0px solid rgba(67, 0, 43, 0.3);
	background: transparent url(images/dotted-line-text.svg) repeat-x left bottom;

}

.main .list-style.line ul li:first-child {
	padding-top: 0;
}

.main .list-style.line ul li:last-child {
	border-bottom: none;
	background-image: none;
	padding-bottom: 0;
}


.main .list-style.block ul li:before {
	display: none;
}

.main .list-style.block ul,
.main .list-style.block ul li {
	padding-left: 0;
}

.main .list-style.block ul li {
	background-color: rgba(190, 218, 225, .4);
	padding: 0.8rem;
	margin-bottom: 0.2rem;
}



/* === Tables */


.table-container {
	overflow-x: auto;
}

table {
	margin-top: var(--vspace);
	width: 100%;	
	border-top: 0px solid var(--border-color);
	background: transparent url(images/dotted-line-text.svg) repeat-x left top;
}

table thead {
	border-top: 0px solid var(--border-color);
}

table thead td {
	font-weight: bold;
}

table tr {
	background: transparent;
	border-bottom: 0px solid var(--border-color);
	background: transparent url(images/dotted-line-text.svg) repeat-x left bottom;

}

table tr th {
	padding: 0.3rem 0.5rem;
	border-top: 0px solid var(--border-color);
	border-left: 0px solid var(--border-color);
	border-right: px solid var(--border-color);
	background: transparent url(images/dotted-line-text.svg) repeat-x left bottom;
}

table tr td {
	padding: 0.4rem 0.9rem;
	padding-left: 0;
	border-left: 0px solid var(--border-color);
	border-right: 0px solid var(--border-color);
}

table p {
	margin: 0;
}



/* === Buttons */


.btn {
	padding: 0.7rem 2rem;
	font-weight: bold;
	font-size: 20px;
	font-size: .9rem;
	display: inline-flex;
	color: #FFF;
	letter-spacing: .3px;
	border-radius: 100px;
	background: var(--primary-color);
	border: none;
}

.btn:hover {
	color: #FFF;
	background: var(--text-color);
}


.btn-text {
	display: inline-flex;
	font-weight: bold;
	line-height: 1.2;
	border-bottom: 3px solid var(--primary-color);
}

.btn-text:hover {
	color: var(--text-color);
	border-color: var(--text-color);
}

.btn-text-white {
	color: #FFF;
	border-color: #FFF;

}

.btn-text-white:hover {
	color: #FFF;
	border-color: #FFF;
	opacity: .6;
}


/* @end */



/* @group PAGEBANNER */

/* Pagebanner 
--------------------------------------------------------------------------------- */


.pagebanner {
	display: flex;
	position: relative;
	max-width: var(--container-wide-width);
	AUS_max-width: 1500px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 90px;
	height: 600px; /*the height*/
}

.pagebanner::before { /*cover for murmel*/
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #FFF;
	z-index: -1;
}

.pagebanner.pagebanner-none {
	height: auto;
	margin-bottom: 50px;
}

.pagebanner-image {
	order: 2;
}

.pagebanner img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	margin: 0 auto;
	opacity: 1;
}

.pagebanner-content {
	position: relative;
	flex: 1 0 40%;
	display: flex;
	align-items: center;
	padding: 30px;
	background: var(--primary-color);
	border-right: 4px solid #FFF;
}

.pagebanner-title {
	position: relative;
	flex: 1;
	text-align: left;
	color: #FFF;
	margin: 0 0 1rem 0;
	font-size: 46px;
	font-size: 2.1rem;
	line-height: 1.2;
	z-index: 1;
	max-width: 80%;
	margin-left: auto;
	margin-right: auto;
}

.pagebanner-icon {
	position: absolute;
	width: 180px;
	height: 180px;
	bottom: 60px;
	right: 0;
	transform: translateX(30%);
	background: transparent url(images/illu-herz-w.svg) no-repeat center bottom;
	background-size: contain;
	border: 0px solid PLUM;
}

.icon-herz { 
	width: 170px;
	background-image: url(images/illu-herz-w.svg);
}

.icon-falter {
	background-image: url(images/illu-falter-w.svg);
	width: 120px;
}

.icon-schmetterling {
	background-image: url(images/illu-schmetterling-w.svg);
}

.icon-tasse { 
	margin-right: -5%;
	background-image: url(images/illu-tasse-w.svg);
}

.icon-herz-mit-pfeil { 
	width: 220px;
	right: -5%;
	background-image: url(images/illu-herz-pfeil-w.svg);
}

.icon-zweig {
	width: 200px;
	background-image: url(images/illu-zweig-w.svg);
}



.pagebanner-murmel {
	position: absolute;
	top: 0;
	AUS_top: -100px;
	right: 0;
	width: 100px;
	height: 140px;
	background: transparent url(images/murmel.svg) no-repeat center;
	background-size: contain;
	transition: all 200ms ease;
	z-index: -5;
}
.murmel-show .pagebanner-murmel { /*fun*/
	top: -100px;
}

@media screen and (max-width: 980px) {
	.pagebanner {
		display: block;
		height: auto;
		margin-bottom: 50px;
	}
	
	.pagebanner.pagebanner-none {
		margin-bottom: 40px;
	}
	
	.pagebanner-image {
		order: 0;
		height: 500px; /*the height*/
		height: clamp(270px, 55vw, 500px);	
	}
	
	.pagebanner-content {
		display: flex;
		padding: 50px 20px;
		padding: clamp(30px, 10vw, 80px) 20px;	
		border: none;
		border-top: 2px solid #FFF;
	}
	
	.pagebanner-title {
		position: relative;
		margin: 0 0 0.1rem 0;
		font-size: 34px;
		font-size: 1.8rem;
		max-width: 100%;
		text-align: center;
	}
	
	.pagebanner-title br {
		display: none;
	}
	
	.pagebanner-icon {
		bottom: auto;
		top: 0;
		right: 30px;
		transform: translateY(-80%) scale(.9);
	}
}

@media screen and (max-width: 600px) {
	.pagebanner-icon {
		right: 0px;
		transform: translateY(-70%) scale(.6);
	}
}




/* @end */



/* @group CONTENTBLOCKS */

/* CONTENTBLOCKS
--------------------------------------------------------------------------------- */


/* General */


.contentblock > *:first-child {
	margin-top: 0;
}


[class*=contentblock] {
}

.contentblock {
	clear: both;
	margin-top: 3rem;
	border: 0px dashed #ddd; /*block border helper*/
}

.contentblock + .contentblock {
	AUS_margin-top: 3rem;
}


.pagebanner + .contentblock {
	margin-top: 0;
}


/* Text 
--------------------------------------------------------------------------------- */



.contentblock-text {
}

/* Image 
--------------------------------------------------------------------------------- */


.contentblock-image {
}

.contentblock-image + .contentblock-image {
	margin-top: 1.5rem;
}

.contentblock-image img.size-large {
	display: block;
	width: 100%;
}


.contentblock-image figure.alignright {
	float: right;
	text-align: right;
}

.contentblock-image figure.alignright img {
	display: block;
	float: right;
}

.contentblock-image figure.alignright a {
	float: right;
}

.contentblock-image figure.alignright figcaption {
	clear: both;
}

.contentblock-image figure.aligncenter {
	text-align: center;
}

.contentblock-image figure.aligncenter img {
	display: inline-block;
}


/* Image-Text
--------------------------------------------------------------------------------- */


.contentblock-imagetext {
}

.imagetext {
    display: flex;
}

.imagetext__image {
	max-width: 50%;
	padding-right: 30px;
}

.imagetext__image img {
	display: block;
	width: 100%;
}

.imagetext__text {
	flex: 1;
}


.imagetext.image-alignright {
}

.imagetext.image-alignright .imagetext__image {
	order: 2;
	padding-right: 0;
	padding-left: 30px;
}

.imagetext.image-alignright .imagetext__text {
}


.imagetext__image {
	width: 100%;
}

.imagetext.image-w100 {
	display: block;
}

.imagetext.image-w100 .imagetext__image { /*fw image above text*/
	max-width: 100%;
	padding: 0;
	margin-bottom: var(--vspace);
}

.imagetext.image-w50 .imagetext__image {
	max-width: 50%;
	max-width: calc(50% + 15px);
}

.imagetext.image-w33 .imagetext__image {
	max-width: 33%;
}

.imagetext.image-w25 .imagetext__image {
	max-width: 25%;
}


/* has custom aspect ratio */
.imagetext__image.has-ratio figure {
	position: relative;
}

.imagetext__image .ratio-wrap {
	position: relative;
}

.imagetext__image.ratio-1-1 .ratio-wrap { padding-top: 100%; }
.imagetext__image.ratio-4-3 .ratio-wrap { padding-top: 75%; }
.imagetext__image.ratio-3-2 .ratio-wrap { padding-top: 66.66%; }
.imagetext__image.ratio-16-9 .ratio-wrap { padding-top: 56.25%; }

.imagetext__image.has-ratio .image-wrap {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

.imagetext__image.has-ratio img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	margin: 0 auto;
}


/* imagetext float */

.imagetext.image-float {
	display: block;
}

.imagetext.image-float .imagetext__image {
	float: left;
}

.imagetext.image-w100 .imagetext__image {
	float: none;
	padding: 0!important;
}

/* > *:first-child*/

.imagetext .imagetext__text  > *:first-child {
	margin-top: 0;
}


.imagetext.image-float.image-alignright .imagetext__image {
	float: right;
	padding-right: 0;
	padding-left: 30px;
}


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

	.imagetext {
	    display: block;
		width: 100%;
		padding: 0;
	}
	
	.imagetext__image {
		max-width: 50%;
		padding-right: 0;
		padding-left: 0;
	}
	
	.imagetext.image-w50 .imagetext__image,
	.imagetext.image-w33 .imagetext__image,
	.imagetext.image-w25 .imagetext__image {
		max-width: 100%;
		width: 100%;
		padding: 0;
		margin-bottom: var(--vspace);
	}
	
	.imagetext.image-float .imagetext__image,
	.imagetext.image-float.image-alignright .imagetext__image {
		float: none;
		clear: both;
		padding: 0;
	}
	
	
	.imagetext .imagetext__text  > *:first-child {
		margin-top: var(--vspace);
	}

}



/* Gallery 
--------------------------------------------------------------------------------- */


.contentblock-gallery {
}

.gallery {
	display: flex;
	flex-wrap: wrap;
	margin-left: -4px; /*offset gap*/
	margin-right: -4px; /*offset gap*/
}

.gallery__item {
	position: relative;
	flex: 0 0 auto;
	width: calc(100% / 3); /*default 3 colums*/
	padding: 0px 4px 4px 0px; /*gap*/
	overflow: hidden;
	display: flex;
}

.gallery.columns-1 .gallery__item { width: calc(100% / 1); }
.gallery.columns-2 .gallery__item { width: calc(100% / 2); }
.gallery.columns-3 .gallery__item { width: calc(100% / 3); }
.gallery.columns-4 .gallery__item { width: calc(100% / 4); }
.gallery.columns-5 .gallery__item { width: calc(100% / 5); }
.gallery.columns-6 .gallery__item { width: calc(100% / 6); }


.gallery__item .ratio-wrap {
	flex: 1;
	display: flex;
}

.gallery__item .image-wrap {
	flex: 1;
}

.gallery__item a {
	display: block;
	height: 100%;
	transition: all 350ms ease;
}

.gallery__item a:hover{
	opacity: .6;
}

.gallery__item  img {
	display: block;
	margin: 0;
	width: 100%;
}

.gallery__caption {
	padding: 10px 0 0 0;
	font-size: 0.8rem;
	line-height: 1.4;
	display: none;
}

/* gallery cropped */
.gallery__item.is-cropped  {
	flex: 1 0 auto; /* images in last row take remaining space*/
}

.gallery__item.is-cropped  img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	margin: 0 auto;
}

/* gallery has custom aspect ratio */
.gallery__item.has-ratio .ratio-wrap {
	position: relative;
}

.gallery__item.ratio-1-1 .ratio-wrap { padding-top: 100%; }
.gallery__item.ratio-4-3 .ratio-wrap { padding-top: 75%; }
.gallery__item.ratio-3-2 .ratio-wrap { padding-top: 66.66%; }
.gallery__item.ratio-16-9 .ratio-wrap { padding-top: 56.25%; }


.gallery__item.has-ratio .image-wrap {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

.gallery__item.has-ratio img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	margin: 0 auto;
}


@media screen and (max-width: 600px) {
	.gallery.columns-3 .gallery__item { width: calc(100% / 2); }
	.gallery.columns-4 .gallery__item { width: calc(100% / 2); }
	.gallery.columns-5 .gallery__item { width: calc(100% / 3); }
	.gallery.columns-6 .gallery__item { width: calc(100% / 3); }
}


/* Accordion 
--------------------------------------------------------------------------------- */


.contentblock-accordion {	
}

.accordion {
}

.accordion {
	margin-top: var(--vspace);
}

.accordion-item {
	position: relative;
	overflow: hidden;
	border: none;
}

.accordion-item:last-child {
}

.accordion-item:first-of-type {
	margin-top: 0;
}

.accordion-heading {
	margin: 0;
	padding: 0;
	border: none;
	text-transform: none;
}

.accordion-trigger {
	display: block;
	position: relative;
	border: none;
	text-align: left;
	width: 100%;
	padding: 0.7rem 0;
	padding-left: 2.5rem;
	font-size: 1.0rem;
	line-height: 140%;
	color: var(--link-color);
	font-weight: bold;
    outline-offset: -5px;
	transition: all 300ms ease;
	background: transparent;
	border-bottom: 0px solid #333;
}

.accordion-trigger:hover {
	text-decoration: none;
	color: var(--text-color);
}

.accordion-trigger.active {
}


.accordion-trigger:hover,
.accordion-trigger:hover i {
}

.accordion-trigger:hover i {
	text-decoration: none;
}

.accordion-trigger i:after {
	position: absolute;
	top: 0.6rem;
	left: 0rem;
	margin: 0;
	content: "\e809";
	AUS_content: "\ebde";
	display: block;
	border-radius:0;
	font-family: 'icons';
	font-size: 1.2rem;
	font-weight: normal;
	font-style: normal;

	color: #FFF;
	background: var(--primary-color);
	width: 34px;
	height: 34px;
	line-height: 37px;
	text-align: center;
	border-radius: 100%;
	
text-decoration: none;
	transition: all 250ms ease-in-out;
}

 .accordion-trigger.active i:after {
	transform: rotate(180deg);
}

.accordion-content {
	position: relative;
	border-top: none;
	padding: 0.5rem 0 1rem 2.5rem;
}

.accordion-content > * {
	margin-top: 0;
}


@media screen and (max-width: 600px) {
	.accordion-trigger i:after {
		top: 0.4rem;
	}
}




/* Downloads 
--------------------------------------------------------------------------------- */


.contentblock-downloads {
}

.downloads-list {
	margin-top: var(--vspace);
}

.downloads-list li {
	padding: 0.8rem 0;
	padding-left: 2rem;
	background: transparent url(images/dotted-line-text.svg) repeat-x bottom center;
}

.downloads-list li:first-child {
	padding-top: 0;
}

.downloads-list li:last-child {
	padding-bottom: 0;
	background-image: none;
}

.downloads-list li i {
	position: absolute;
	left: 0;
	top: -0.06rem;
	display: inline-block;
	margin-left: -2rem;
	width: 2rem;
	font-size: 1.3rem;
	line-height: 1;
}

.downloads-list li i:before {
	margin: 0;
}

.downloads-list li a {
	font-weight: bold;
}

.downloads-item__caption {
	font-size: var(--text-small);
}


/* Google Map 
--------------------------------------------------------------------------------- */

.contentblock-googlemap {
}

.contentblock-googlemap .embed-responsive {
	height: 500px;
	height: clamp(350px, 50vh, 600px);
}

.contentblock-text + .contentblock-googlemap {
	margin-top: var(--vspace);
}

/* Form 
--------------------------------------------------------------------------------- */


.contentblock-form {
}


/* Code 
--------------------------------------------------------------------------------- */


.contentblock-code {
}

/* Apartment 
--------------------------------------------------------------------------------- */

.contentblock-apartment {

}

.contentblock-apartment + .contentblock-apartment .apartment {
		background: transparent url(images/dotted-line-red.svg) repeat-x top center;
		padding-top: var(--vspace);	
}

.apartment {

}

.apartment:first-child {
}

.apartment__title {
	
}

.apartment p  {
	margin-top: var(--vspace-s);
}


/* Slider
--------------------------------------------------------------------------------- */



/* Slider
--------------------------------------------------------------------------------- */


.contentblock-slider .swiper-container {
	padding-bottom: 40px; /*space for pagination-bullets*/
}

.contentblock-slider .swiper-wrapper {
     height:auto!important;
}

.contentblock-slider .swiper-slide {
	display: flex;
	justify-content: center;
	width: auto;
}

.contentblock-slider img {
	display: block;
	width: auto;
	height: 800px; /*the height*/
	height:  clamp(300px, 60vw, 750px);
	min-height: 50vh;
}


.swiper-button {
	width: 55px;
	height: 55px;
	transform: translateY(-50%);
	margin: 0 10px;
	margin-top: -15px; /*minus half the space for dots*/
	transition: all 250ms ease-in-out;
	background: rgba(0,0,0, .0);
	border-radius: 100%;
}

.swiper-button:hover {
	opacity: .8;
}

.swiper-button::after {
	font-family: 'icons';
	font-size: 1.8rem;
	color: #FFF;
	text-shadow: 0 2px 10px rgba(0,0,0,.3), 0 0px 2px rgba(0,0,0,.1);
}

.swiper-button-prev {
	left: 0;
	right: auto;
}

.swiper-button-prev::after {
	content: "\ebdc";
	transform: rotate(180deg);
}

.swiper-button-next {
	right: 0;
	left: auto;
}

.swiper-button-next::after {
	content: "\ebdc";
}

.swiper-button.swiper-button-disabled {
	AUS_opacity: 0;
}

.swiper-container > .swiper-pagination-bullets {
	bottom: 0;
	z-index: 100;
}

.swiper-pagination-bullet {
	width: 10px;
	height: 10px;
	background: rgba(0,0,0,.15);
	opacity: 1;
}

.swiper-pagination-bullet-active,
.swiper-pagination-bullet-active-main {
	background: var(--primary-color);
	opacity: 1;
}

.swiper-pagination-bullet:only-child {
   visibility: hidden;
}


@media screen and (max-width: 600px) {
	.swiper-button {
		AUS_display: none;
		margin-left: -5px;
		margin-right: -5px;
	}
}



/* @end */




/* @group BOOKING */


/* BOOKING
--------------------------------------------------------------------------------- */

.side-button {
	position: fixed;
	top: 50vh;
	background: TAN;
	display: flex;
	align-items: center;
	right: -60px;
	color: #FFF;
	line-height: 1;
	font-size: 17px;
	font-weight: bold;
	letter-spacing: .7px;
	padding: 20px 40px;
	background: var(--primary-color);
	transform: rotate(-90deg) translateX(100%);
	transform-origin: right bottom;
	transition: (background, right) 350ms ease;
	opacity: 0;
	z-index: 5;
	box-shadow: 0px 3px 30px -10px rgba(0,0,0, .4);
}


.side-button i {
	font-size: 1.7rem;
	margin: -5px 5px -5px -12px;
	transition: all 250ms ease;
}

.side-button:hover i {
	transform: rotate(90deg);
}

.side-button.hide {
}

.side-button.show {
	right: 0;
	opacity: 1;
}

.side-button:hover {
	color: #FFF;
	background: var(--primary-color-light);
}


.bookingcom-button-wrap {
	text-align: center;
	margin-top: var(--vspace-l);
}

.bookingcom-button {
	background: tan;
	display: inline-flex;
	flex-wrap: wrap;
	padding: 1rem 50px;
	justify-content: center;
	align-items: center;
	color: var(--text-color);
	background: #FFF;
	box-shadow: 0px 3px 30px -10px rgba(0,0,0, .2);
	border-radius: 100px;
}

.bookingcom-button:hover {
	color: var(--text-color);
	transform: scale(1.05);
}

.bookingcom-button span{ 
	padding-right: 20px;
	line-height: 1.2;
	margin: 0.4rem 0;
	white-space: nowrap;
}

.bookingcom-button img { 
	display: block;
	margin: 0.4rem 0;
	width: 200px;
	max-width: 60%;
}


/* easybooking iframe */


.easybooking-embed {
	margin-top: var(--vspace-l);
	background: #FFF;
	box-shadow: 0px 3px 30px -10px rgba(0,0,0, .2);
}

.easybooking-header {
	background: var(--primary-color);
	text-align: center;
	color: #FFF;
	font-weight: bold;
	padding: 0.8rem 20px;
}

/* neues Formular 2025-05-17*/
/* https://webwidgets.easybooking.eu/advanced-anleitung */

#ebOffer * {
	--ebCiFontFamily: var(--font);
	--ebCiFontSize;
	--ebPadding: 20px;
	--ebCiColor;
	--ebCiBgColor;
	--ebCiHeadingColor;
	--eb-font-size-base: .9rem;
	--eb-form-label-font-size: .75rem;
}


#ebOffer { 
}

#ebOffer #ebOfferContainer {
	width: 100%;
	max-width: 100%;
}

li.eb-select-dropdown__item {
	font-size: .9rem;
	list-style: none;
}

li.eb-select-dropdown__item::before {
	display: none;
}


@media screen and (max-width: 600px) {
	.side-button {
		display: none;
	}
}




/* @end */


/* @group 404 */


/* 404
--------------------------------------------------------------------------------- */


.error404 {
}

.error404 #header,
.error404 #nav,
.error404 .header-meta,
.error404 #footer {
	display: none;
}

.error404 article {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
}

.murmel-404 {
	margin: 0 auto;
	width: 140px;
	height: 140px;
	border-radius: 100%;
	background: #FFF url(images/murmel-404.svg) no-repeat center;
	background-size: contain;
	transition: all 200ms ease;
	border: 0px solid #333;
	box-shadow: 0px 3px 40px -10px rgba(0,0,0, .2);
}



/* @end */



/* @group TEMPLATE: STARTSEITE */


/* TEMPLATE: STARTSEITE
--------------------------------------------------------------------------------- */


[class*=template-start] #content {
	padding-top: 0;
}

.hero-section {
	position: relative;
	margin-left: -2px;
	margin-right: -2px;
}

.hero-section .container {
	padding: 0;
}

.hero-grid {
	column-count: 2;
    column-gap: 0px;
}

.hero-grid > div {
	border: 2px solid #FFF;
}

.hero-title {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 640px;
	background: var(--primary-color);
}


.hero-title h1 {
	color: #FFF;
	text-align: left;
	padding: 100px 30px;
	margin: 0 0 0.5rem 0;
	max-width: 80%;
	margin-left: auto;
	margin-right: auto;
}

.hero-icon {
	position: absolute;
	top: 380px;
	right: 45%;
	width: 180px;
	height: 180px;
	background: transparent url(images/illu-herz-w.svg) no-repeat center;
	background-size: contain;
	filter: drop-shadow(5px 0px 8px rgba(0,0,0, .1));
	border: 0px solid CYAN;
	z-index: 1;
}

.hero-image {
	position: relative;
	color: #FFF;
	border: 0px solid CYAN;
}

.hero-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	margin: 0 auto;
}

.hero-image-1 {
	height: 410px;
}

.hero-image-2 { /*main image*/
	height: 830px;
}

.hero-image-3 {
	height: 330px;
	max-width: 560px;
}


.hero-murmel {
	position: absolute;
	bottom: -60px;
	right: 0;
	width: 200px;
	height: 300px;
	background: transparent url(images/murmel.svg) no-repeat bottom center;
	background-size: contain;
	filter: drop-shadow(5px 8px 8px rgba(0,0,0, .15));
	border: 0px solid RED;
}


.hero-bubble {
	position: absolute;
	bottom: 260px;
	right: 200px;
	width: 200px;
	height: 200px;
	background: transparent url(images/bubble-start-de.svg) no-repeat center;
	background-size: contain;
	border: 0px solid CYAN;
}


.intro-section {
	margin: 140px 0;
}


.news-section {
	margin-top: 140px;
}

.news-item {
	margin-top: var(--vspace-xl);
	display: flex;
	background: var(--primary-bg);
}

.news-item:first-child {
	margin-top: 0;
}


.news-item__image {
	width: 35%;
}

.news-item__image img {
	width: 100%;
	display: block;
}

.news-item__content {
	position: relative;
	flex: 1;
	padding: 60px;
	color: var(--primary-color);	
}

.news-item__title {
	color: var(--primary-color);
}

.news-item__link {
	margin-top: 1rem;
}

.news-item__icon {
	position: absolute;
	width: 160px;
	height: 80px;
	top: -40px;
	right: 8%;
	max-width: 20vw;
	background: transparent url(images/illu-falter-r.svg) no-repeat bottom right;
	background-size: contain;
	border: 0px solid PLUM;
	
	/*
	background-image: url(images/illu-falter-r.svg);
	background-image: url(images/illu-zweig-r.svg);
	background-image: url(images/illu-herz-pfeil-r.svg);
	background-image: url(images/illu-tasse-r.svg);
*/
}

.news-item:nth-child(2) .news-item__icon{
	background-image: url(images/illu-zweig-r.svg);
	transform: scale(1.1);
}

.news-item:nth-child(3) .news-item__icon{
	background-image: url(images/illu-herz-r.svg);
}



.highlight-section {
	margin: 180px 0;
}


.highlight {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 0 4px;
	transform: translateY(-5%); /*balance out offset*/
}

.highlight__image-wrap {
	position: relative;
	min-height: 800px;
	display: flex;
	align-items: center;
}

.highlight__image {
	position: absolute;
	top:  0;
	left: 0;
	width: 100%;
	height: 100%;
}

.highlight__image::after { /*overlay*/
	content: "";
	position: absolute;
	top:  0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	opacity: .1;
}

.highlight__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	margin: 0 auto;
}

.highlight__title {
	width: 100%;
	position: relative;
	margin: 0 0 5px 0;
	color: #FFF;
	z-index: 1;
	text-align: left;
	text-shadow: 0 2px 10px rgba(0,0,0, .15);
	padding: 0 60px;
}

.highlight__content {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 80px;
	color: #FFF;
	transform: translateY(10%); /*offset*/
	background: var(--primary-color);	
}

.highlight__btn {
}


.highlight__icon {
	position: absolute;
	width: 110px;
	height: 200px;
	bottom: 160px;
	left: -80px;
	max-width: 20vw;
	background: transparent url(images/illu-tasse-w.svg) no-repeat bottom right;
	background-size: contain;
}



.services-section {
	margin: 140px 0;
}


.services__section-title {
	color: var(--text-color);
	margin-top: 0;
}


.services__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 4px;
}


.services__card {
	position: relative;
	padding-top: 100%; /* 4:3 Aspect Ratio */
	display: flex;
}

.services__card a {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	
	display: flex;
	height: 100%;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	z-index: 1;
}

.services__card-title {
	z-index: 1;
	color: #FFF;
	text-align: center;
	font-weight: bold;
	font-size: 1.3rem;
	padding: 20px;
	line-height: 1.3;
	margin-bottom: 10px;
	text-shadow: 1px 1px 5px rgba(0,0,0, .25), 1px 1px 15px rgba(0,0,0, .1);
}


.services__image {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	overflow: hidden;
}

.services__image:after { /*overlay*/
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	z-index: 0;
	background: rgba(0,0,0, .3);
}


.services__card a img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	margin: 0 auto;
	transition: all 350ms ease-in-out;
}

.services__card a:hover img {
	transform: scale(1.10);
}

.services__card.no-image {
	background: var(--primary-color);
}




@media screen and (max-width: 980px) {
	.hero-grid {
		display: flex;
		flex-wrap: wrap;
	}
	
	.hero-title {
		width: 100%;
		order: 2;
		height: auto;
	}
	
	.hero-title h1 {
		display: block;
		max-width: 800px;
		margin: 0;
		padding: 100px 2rem;
		width: 100%;
		text-align: center;
	}
	
	.hero-image-2 { /*top image*/
		order: 1;
		width: 100%;
		height: 600px;
	}
	
	.hero-image-1 {
		order: 2;
	}
	
	.hero-image-3{
		order: 3;
	}
	
	.hero-image-1,
	.hero-image-3 {
		height: 330px;
		width: 50%;
	}
	
	.hero-icon {
		top: auto;
		bottom: 270px;
		right: 3%;
		width: 150px;
		height: 150px;
	}
	
	.hero-bubble {
		bottom: auto;
		right: auto;
		top: -30px;
		left: 5%;
		width: 180px;
		height: 180px;
		background-position: center top;
	}
	
	.hero-murmel {
		bottom: auto;
		top: 350px;
		right: 8%;
		width: 150px;
	}
	
	
	.highlight {
	  display: block;
	  transform: translateY(0);
	}
	
	.highlight__image-wrap {
		display: flex;
		align-items: center;
		height: 550px;
		height: clamp(380px, 100vw, 700px);
		min-height: auto;
		margin: 0;
	}
	
	.highlight__title {
		margin: 0 auto;
		text-align: center;
		padding: 30px;
		max-width: 600px;
		margin-bottom: 0!important;
	}
	
	.highlight__content {
		margin: 4px 0 0 0;
		transform: translateY(0);
	}
	
	
	.highlight__icon {
		bottom: auto;
		top: 0;
		left: auto;
		right: 5%;
		transform: translateY(-92%);
		max-width: 20vw;
	}
}


@media screen and (max-width: 768px) {
	.services__grid {
	  grid-template-columns: 1fr 1fr;
	  gap: 4px;
	}
}


@media screen and (max-width: 600px) {
	
	.hero-grid > div {
		border: 1px solid #FFF;
	}
	
	.hero-title h1 {
		padding: 80px 20px;
	}
	
	.hero-image-2 { /*top image*/
		height: 400px;
	}
	
	.hero-bubble { 
		top: -10px;
		width: 140px;
		height: 140px;
		max-width: 40%;
	}
	
	.hero-murmel { 
		top: 210px;
		height: 200px;
		width: 120px;
	}
	
	
	.hero-icon {
		bottom: calc(40vw - 40px);
		width: 100px;
		height: 100px;
	}
	
	.hero-image-1,
	.hero-image-3 {
		height: 40vw;
	}
	
	
	.intro-section {
		margin: 80px 0;
	}
	
	
	.news-section {
		margin-top: 80px;
	}
	
	
	.news-item {
		display: block;
	}
	
	.news-item__image {
		width: 100%;
	}
	
	.news-item__content {
		padding: 3rem 2rem;
	}
	
	.news-item__icon {
		top: -50px;
	}
	
	
	.highlight-section {
		margin: 120px 0 90px;
	}
	
	.highlight-section .container {
		padding: 0;
	}
	
	
	.highlight__image-wrap {
		height: 480px;
	}
	
	
	.highlight__content {
		margin-top: 2px;
		padding: 3rem 2rem;
	}
	
	
	.services-section {
		margin: 80px 0 120px;
	}
	
	.services__grid {
	  grid-template-columns: 1fr;
	  gap: 2px;
	}
	
	.services__card {
		padding-top: 75%; /* Aspect Ratio */
	}

}


/* @end */


/* @group FORMS */

/* FORMS
--------------------------------------------------------------------------------- */



/* Form */

form input[type=text],
form input[type=email] {
	font-size: 16px;
	border: 1px solid var(--border-color);
	width: 100%;
	max-width: 100%;
	line-height: 1;
	padding: .8em 1em;
	margin: 0;
	border-radius: 5px;
	box-shadow: 0 3px 10px -5px rgba(0,0,0, .1);
	transition: all 200ms ease;
	height: 2.5rem; /*global input height*/
}

form input[type=text]:focus,
form input[type=email]:focus {
	border-color: #aaa;
}

input[type="radio"] {
     -webkit-appearance: radio;
     appearance: radio;
}

input[type="checkbox"] {
     -webkit-appearance: checkbox;
     appearance: checkbox;
}


/* select */
/* https://codepen.io/chriscoyier/pen/zYYZaGP */

select {
	display: block;
	font-size: 16px;
	font-family: var(--font);
	font-weight: normal;
	color: var(--text-color);
	line-height: 1;
	padding: 0 1.8em 0 1em;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	margin: 0;
	border: 1px solid var(--border-color);
	box-shadow: 0 3px 10px -5px rgba(0,0,0, .1);
	border-radius: 5px;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	transition: all 200ms ease;
	background-color: #fff;

	height: 2.5rem; /*global input height*/

	/* for the icon, if you want to change the color, be sure to use `%23` instead of `#`, since it's a url. You can also swap in a different svg icon or an external image reference
	*/
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23333333%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
	background-repeat: no-repeat, repeat;
	/* arrow icon position (1em from the right, 50% vertical) , then gradient position*/
	background-position: right .7em top 50%, 0 0;
	/* icon size, then gradient */
	background-size: 0.6em auto, 100%;
}
select::-ms-expand {
	display: none;
}
select:hover {
	border-color: #888;
}
.select-css:focus {
	border-color: #aaa;
	/* It'd be nice to use -webkit-focus-ring-color here but it doesn't work on box-shadow */
	box-shadow: 0 0 0 3px -moz-mac-focusring;
	color: #333;
	outline: none;
}

select option {
	font-weight: normal;
}

/* Disabled styles */
select:disabled, select[aria-disabled=true] {
	opacity: .5;
}


/* Contact Form 7 */


.wpcf7 {
	margin-top: var(--vspace-xl);
	position: relative;
	margin-left: calc(20% - 20vw);
	margin-right: calc(20% - 20vw);
	width: auto;
	max-width: 1000%;
}

.wpcf7-form {
	position: relative;
	margin: 0 auto;
	overflow: visible;
	display: flex;
	justify-content: center;
	background: var(--primary-bg);
	padding: 3rem 30px;
	max-width: 1000px;
}

.wpcf7-form .form-wrap {
	max-width: 760px; /*main width*/
	margin: 0 auto;
	overflow: hidden;	
}

.wpcf7-form .main {
	margin: 0 auto;
}


.wpcf7 hr {
	margin: 1.0rem 0 1.5rem 0;
	width: 100%;
}

.wpcf7 br {
	display: none;
}

.wpcf7 p:empty {
	AUS_display: none;
}

.wpcf7 p { /*argh CF7 wpautop when in ACF field */
	AUS_display: none;
	
	background: CYAN;
	display: block;
	border: 1px solid #333;
	width: 100%;
	height: 2rem;
}

.wpcf7 .fieldset {
	overflow: hidden;
}

.wpcf7 .form-title {
	margin: 0 0 1.5rem 0;
}

.wpcf7 .form-section-title {
	margin: 0 0 1.5rem 0;
	font-size: 1rem;
	color: var(--text-color);
	opacity: .4;
}


.wpcf7 .form-field {
	margin-bottom: 0.8rem;
	z-index: 1;
}


.wpcf7 .form-field:focus-within label,
.wpcf7 .form-field.select-focus label {
}

.wpcf7 label {
	padding: 0 0;
	width: auto;
	font-weight: bold;
	font-size: 0.9rem;
	padding-right: 10px;
	margin: 0 0 0.3rem 0;
	display: inline-block;
	text-align: left;
	line-height: 140%;
	cursor: default;
	transition: all 350ms ease;
	color: var(--text-color);
}

.wpcf7 label span {
	display: inline;
	font-size: 0.8rem;
	padding-left: 5px;
	text-transform: none;
}


.wpcf7 .row {
	margin-left: -10px;
	margin-right: -10px;
}

.wpcf7 .row-pflichtangaben {
	margin-bottom: 0.5rem;
	font-size: 0.6rem;
	text-align: right;
	text-transform: uppercase;
	color: #999;
}

.wpcf7 .row-submit {
}

.wpcf7 .row.response {
	margin-bottom: 0;
}

.wpcf7 [class*=col-] {
	padding: 0 10px;
}


.wpcf7 .form-field-desc {
	font-size: 0.8rem;
	line-height: 150%;
	color: #666;
	margin: -0.1rem 0 0.3rem 0;
}


.wpcf7 span {
	position: relative;
	display: block;
	width: 100%;
	font-size: 0.9rem;
	flex: 0;
}

.wpcf7 input.wpcf7-text,
.wpcf7 input.wpcf7-quiz,
.wpcf7-text,
.wpcf7 textarea,
.wpcf7-email,
.wpcf7-number,
.wpcf7 select,
.wpcf7 .select-styled,
.wpcf7-date,
.wpcf7-number,
.wpcf7-captchar,
.wpcf7-file {
	padding: 0.8rem;
	font-size: 1.0rem;
	line-height: 120%;
	color: var(--text-color);
	background: #FFF;
	width: 100%;
	box-sizing: border-box;
	border: none;
	border-radius: 3px;
	-webkit-appearance: none;
	font-family: var(--sans);
	font-weight: normal;
	border: none;
	border: 1px solid #DDD;

	transition: all 300ms ease;
}


.wpcf7-text,
.wpcf7-number { /*safari - get same height as select-styled */
	max-height: 3.2rem;
}


.wpcf7 select,
.wpcf7 .select-styled {
}



.wpcf7 input:focus,
.wpcf7 textarea:focus {
	border-color: rgba(0,0,0, .5);

}

input::-webkit-input-placeholder,
input::-moz-placeholder,
input::-ms-input-placeholder,
input::-moz-placeholder {
}


.wpcf7 textarea {
	max-height: 200px;
	line-height: 150%;
	width: 100%;
}


.wpcf7 select {
  -webkit-appearance: none;
}

.wpcf7-recaptcha {
	 overflow: hidden;
	 margin-bottom: 0.5rem;
}


.wpcf7 .label-desc {
	margin-top: -2px;
	padding-bottom: 5px;
	font-size: 0.8rem;
	line-height: 140%;
	color: #888;
}



.wpcf7 .form-field-info {
	font-size: .85rem;
	line-height: 140%;
	margin:  0.3rem 0 1rem 0;
}


.wpcf7 .form-field--submit {
	margin: 0;
}


.wpcf7 .submit {
	clear: both;
}


.wpcf7 .submit-btn-wrap {
	position: relative;
	display: flex;
	align-items: center;
}


.wpcf7 input.wpcf7-submit {
}

.wpcf7 input.wpcf7-submit:hover {
}

.wpcf7 input.wpcf7-submit:active {
}

.wpcf7 .wpcf7-spinner {
	flex: 0 0 24px;
	background: rgba(0,0,0, .3);
	AUS_visibility: visible!important;
}

.wpcf7 .response {
	position: relative;
}

.wpcf7 .invalid .wpcf7-response-output {
	display: block;
	font-size: 0.9rem;
	padding: 1rem;
	margin: 1rem 0 0 0;
	clear: both;
	position: relative;
	text-align: left;
	background: #FFF;
}

.wpcf7 .wpcf7-response-output.wpcf7-validation-errors {
	border-color: transparent;
	color: RED;
	text-align: center;
}

.wpcf7 .wpcf7-form.sent {
	background: transparent;
}


.wpcf7 .sent .wpcf7-response-output {
	padding: 4rem 2rem;
	margin: 1rem 0;
	text-align: center;
	background: transparent;
	color: var(--primary-color);
	font-size: 1.0rem;
	font-weight: bold;
	border: none;
	background: var(--primary-bg);
	box-shadow: 0px 5px 30px -10px rgba(0,0,0, .1);
}

.wpcf7 span.wpcf7-not-valid-tip {
	background: red;
	color: #FFF;
	display: none;
}

.not-valid label {
	color: RED;
}

.wpcf7 input.wpcf7-not-valid,
.wpcf7 textarea.wpcf7-not-valid,
.wpcf7 select.wpcf7-not-valid {
	border-color: RED;
}


.wpcf7 .field-note {
	font-size: 0.7rem;
}

.wpcf7 .pflichtfeld-hinweis {
	text-align: right;
	font-size: 0.7rem;
	color: #666;
	text-transform: uppercase;
	display: none;
}

/* Checkbox & Radiobuttons */

.wpcf7 .wpcf7-radio {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
    justify-content: left;
    align-content: flex-start;
}

.wpcf7 input[type="radio"] {
	-webkit-appearance: radio;
	-moz-appearance: radio;
}

.wpcf7 input[type="checkbox"] {
	-webkit-appearance: checkbox;
	-moz-appearance: checkbox;
}

.wpcf7-radio .wpcf7-list-item,
.wpcf7-checkbox .wpcf7-list-item,
.wpcf7-acceptance .wpcf7-list-item  {
  	margin: 0 0 0 0;
  	width: auto;
  	display: block;
}

.wpcf7-radio input,
.wpcf7-checkbox input,
.wpcf7-acceptance input {
	display: none; /*custom*/
}

.wpcf7-radio label,
.wpcf7-checkbox label,
.wpcf7-acceptance label {
	color: #333;
	margin: 0;
	padding: 0;
	display: block;
	cursor: pointer;
}


.wpcf7-radio.horizontal,
.wpcf7-checkbox.horizontal,
.wpcf7-acceptance.horizontal { /*horizonal align*/
	display: flex;
	flex-wrap: wrap;
}


.wpcf7-radio .wpcf7-list-item-label,
.wpcf7-checkbox .wpcf7-list-item-label,
.wpcf7-acceptance .wpcf7-list-item-label {
	display: block;
	position: relative;
	line-height: 130%;
	font-size: 0.85rem;
	text-transform: none;
	font-weight: bold;
	padding: 5px 0;
	padding-right: 30px;
	color: var(--text-color);
	transition: all 300ms ease;
	display: flex;
	align-items: center;
}

.wpcf7-radio .wpcf7-list-item-label:hover,
.wpcf7-checkbox .wpcf7-list-item-label:hover,
.wpcf7-acceptance .wpcf7-list-item-label:hover {
}

.wpcf7-radio .wpcf7-list-item-label:before,
.wpcf7-checkbox .wpcf7-list-item-label:before,
.wpcf7-acceptance .wpcf7-list-item-label:before {
	content: "\e810"; /*unchecked icon*/
	font-family: 'icons';
	font-size: 1.1rem;
	display: block;
	margin: 0 10px 0 0;
}


.wpcf7-radio input:checked + .wpcf7-list-item-label,
.wpcf7-checkbox input:checked + .wpcf7-list-item-label,
.wpcf7-acceptance input:checked + .wpcf7-list-item-label {
}

.wpcf7-radio input:checked + .wpcf7-list-item-label:before,
.wpcf7-checkbox input:checked + .wpcf7-list-item-label:before,
.wpcf7-acceptance input:checked + .wpcf7-list-item-label:before {
	content: "\e80f"; /*checked icon*/
	color: var(--primary-color);
}

.wpcf7-radio.wpcf7-not-valid .wpcf7-list-item-label:before,
.wpcf7-checkbox.wpcf7-not-valid .wpcf7-list-item-label:before,
.wpcf7-acceptance.wpcf7-not-valid .wpcf7-list-item-label:before {
	color: RED;
}


/* Checkbox Acceptance (Datenschutz) */

.wpcf7-acceptance .wpcf7-list-item-label:before {
	position: absolute;
	top: 0;
	left: 0;
}
.wpcf7-acceptance .wpcf7-list-item-label {
	position: relative;
	display: block;
	padding: 0 0 0 1.8rem;
	font-weight: normal;
	font-size: 0.8rem;
	line-height: 150%;
	letter-spacing: 0;
	color: var(--text-color);
}


.wpcf7 .form-field--datenschutz {
	margin: 0 0 2rem 0;
}

.wpcf7 .form-field--datenschutz > label {
  display: none;
}

.wpcf7-acceptance span a {
	font-weight: bold;
}

.wpcf7-acceptance span a:hover {
	color: #999;
}


@media screen and (max-width: 600px) {
	.wpcf7-form {
		padding: 3rem 20px;
	}
}




/* @end */



/* @group WIDGETS */


.widgets {
	display: flex;
	justify-content: center;
	margin: -30px 0 3rem 0;
}

.widgets .container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 30px;
}


.widget {
}

.widget iframe {
	max-width: 100%;
	padding: 0;
	margin: 0;
}

.widget-hotelclass {
	max-width: 350px;
	margin-top: -5px;
}

.widget-bookingcom {
	position: relative;
	margin: 0;
}



/* @end */


/* @group FOOTER */

/* FOOTER
--------------------------------------------------------------------------------- */

#footer {
	position: relative;
	width: 100%;
	padding: 100px 0 0 0;
	background: var(--secondary-bg);
	font-size: 20px;
	font-size: 0.90rem;
	--vspace: 1.3rem;
}

#footer a {
	color: var(--text-color);
}

#footer a:hover {
	color: var(--primary-color);
}

#footer::before {
	content: "";
	position: absolute;
	top: -16px;
	left: 0;
	width: 100%;
	height: 18px;
	background: transparent url(images/footer-top.svg) repeat-x bottom center;
	background-size: auto 18px;
}


#footer hr {
	border:  none;
	opacity: 1;
	height: 5px;
	padding: 0;
	margin: 50px 0;
	background: transparent url(images/dotted-line-red.svg) repeat-x bottom center;
	display: none;
}

.footer-hours {
}

.footer-hours {
}

.footer-social {
	margin-top: var(--vspace);
}

.footer-social a {
	font-size: 1.2rem;
	margin-left: -0.2rem;
	padding-right: 10px;
}

.footer-menu {
	display: flex;
	margin-top: var(--vspace-l);

}

.footer-menu li a {
	display: block;
	font-weight: bold;
	font-size: 17px;
	margin: 0 30px 0 0;
}


.footer-bottom {
	position: relative;
	margin-top: 130px;
}

.footer-bottom::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 34px;
	background: transparent url(images/ground.svg) repeat-x bottom center;
}


.footer-murmel  {
	position: absolute;
	bottom: 0px;
	right: -10px;
	width: 160px;
	z-index: 1;
	filter: drop-shadow(5px 8px 10px rgba(0,0,0, .2));
	background: transparent;
	transition: all 300ms ease-in-out;
}

.footer-murmel img {
	display: block;
	margin: 0;
}

.footer-bubble  {
	position: absolute;
	bottom: 220px;
	right: 160px;
	width: 210px;
	z-index: 2;
	transition: all 300ms ease-in-out;
}

.footer-bubble a {
	display: block;
}

.footer-bubble a:hover img {
	transform: scale(1.1) rotate(7deg);
}


#gototop {
	position: fixed;
	display: block;
	right: 30px;
	bottom: -50px;
	width: 60px;
	height: 60px;
	line-height: 56px;
	background:var(--primary-color);
	text-align: center;
	border-radius: 100%;
	z-index: 5;
	transition: all 200ms ease;
	box-shadow: 0px 3px 20px -5px rgba(0,0,0, .3);
	opacity: 0;
}

#gototop:hover {
	background: var(--primary-color-light);
	margin-bottom: 10px;
}

#gototop::after {
	content: '\ebde';
	font-family: 'icons';
	font-size: 25px;
	color: #FFF;
	display: block;
	transform: rotate(180deg);
}

#gototop.hide {
	opacity: 0;
	bottom: -50px;
}

#gototop.show {
	opacity: 1;
	bottom: 50px;
}

@media screen and (max-width: 980px) {
	
	#footer hr {
		display: block;
		max-width: 50%;
	}
	
	#footer > .container,
	.footer-social .container {	
		max-width: var(--main-width);
	}
	
	.footer-social {
		margin-top: 0;
	}
	
	.footer-menu {
		margin-top: var(--vspace);
	}
	
	
	.footer-bubble {
		right: 80px;
		bottom: 300px;
	}

}


@media screen and (max-width: 600px) {
	
	#footer {
		font-size: 0.95rem;
	}
	
	#footer hr {
		max-width: 100%;
	}
	
	.footer-bottom {
		margin-top: 100vw;
		margin-top: clamp(400px, 100vw, 500px);
	}
	
	.footer-murmel {
		right: 10vw;
		width: 40vw;
		max-width: 180px;
	
	}
	
	.footer-bubble {
		right: 45vw;
		bottom: 220px;
		width: 50vw;
	}
	
	.footer-menu {
		display: block;
	}
	
	.footer-menu li a {
		margin: 0;
		padding: 5px 0;
		font-size: 0.95rem;
	}
	
	.footer-social a {
		font-size: 1.5rem;
		padding-right: 15px;
	}
	
	
	#gototop,
	#gototop.show {
		right: 20px;
		bottom: 23px;
		width: 50px;
		height: 50px;
		line-height: 48px;
	}
	
	#gototop::after {
		font-size: 22px;
	}

}




/* @end */



/* @group SWIPER SLIDER */

/* Swiper Slider
--------------------------------------------------------------------------------- */



/* @end */


/* @group SWIPEBOX LIGHTBOX */

/* Swipebox Lightbox
--------------------------------------------------------------------------------- */


.pswp .pswp__caption__center {
	font-family: var(--font-sans);
	font-weight: normal;
	font-size: 0.75rem;
}

/* @end */


/* @group BORLABS COOKIE */


/* Borlabs Cookie Banner
--------------------------------------------------------------------------------- */


#BorlabsCookieBox ._brlbs-box {
	box-shadow: 0px 3px 50px -10px rgba(0,0,0, .3)!important;
}

.BorlabsCookie ._brlbs-content-blocker {
	display: flex;
	justify-content: center;
	padding: 0;
}

.BorlabsCookie ._brlbs-content-blocker ._brlbs-embed {
	width: 100%;
	margin-top: var(--vspace)!important;

}

.BorlabsCookie ._brlbs-content-blocker img {
	width: 100%;
	display: block;
}


.video-embed-wrap .BorlabsCookie {
	margin-bottom: -56.5%; /*minus the ratio*/
}

.BorlabsCookie input[type=checkbox] {
	-webkit-appearance: checkbox;
	-moz-appearance: checkbox;
	appearance: checkbox;
}

/* @end */



/* @group SCROLL REVEAL */

/* SCROLL REVEAL JS */

.revealme {
  transition: all 1s ease;
  opacity: 0;
}

.active .revealme {
  opacity: 1;
}

.reveal {
  opacity: 0;
  transform: translate3d(0, 100px, 0);
  transition: opacity 500ms, transform 500ms;
}
.reveal-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* @end */



/* @group ACCESSIBILITY */

/* ACCESSIBILITY */


.sr-only {
	position: absolute;
	width: .0625rem;
	height: .0625rem;
	padding: 0;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

.sr-only-focusable {
	transition: all 0s ease;
}

.sr-only-focusable:focus {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
}

/* @end */


/* @group ANIMATIONS */

/* ANIMATIONS
---------------------------------------------------------------------------------*/

/*  https://github.com/daneden/animate.css */


.animated {
	animation-duration: 1s;
	animation-fill-mode: both;
	animation-timing-function: ease-in-out;
}

.animated.infinite {
	animation-iteration-count: infinite;
}


@-webkit-keyframes zoomIn {
  0% {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}


@-webkit-keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

.fadeIn {
  animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}



@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
   transform: translate3d(0, -100%, 0);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

.fadeInDown {
	animation-name: fadeInDown;
}


@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
	transform: none;
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

.fadeInUp {
  animation-name: fadeInUp;
}

/* @end */



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

/* MEDIA QUERIES

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


@media screen and (max-width: 1136px) {
	body:after {
		content: "<1136";
		position: fixed;
		top: 0;
		line-height: 1;
		padding: 5px;
		font-size: 12px;
		background: lawngreen;
		z-index: 1000;
		opacity: .8;
	
		display: none; /* AN/AUS*/
	}

}


@media screen and (max-width: 980px) {
	body:after {
		content: "<980";
		background: TAN;
	}

}


@media screen and (max-width: 768px) {
	body:after {
		content: "<768";
		background: PINK;
	}

}


@media screen and (max-width: 600px) {
	body:after {
		content: "<600";
		background: YELLOW;
	}

}


@media screen and (max-width: 360px) {
	body:after {
		content: "<360";
		background: MAGENTA;
	}
}


/* END
---------------------------------------------------------------------------------*/