/* hintertuxrhof - 20.03.2023 */
@import url("/css/styles_fonts.css");

:root {
	--black: #000000;
	--white: #1F1F1F;
	--white1: #ffffff;
	--grey: #706f6f;
	--light-grey: #dadada;
	--grey-bg: #ededed;
	--yellow: #c7a900;
	--text: #4d4d4d;
	--content-breite:1280px;
	
	--font-fliesstext:  'Century Gothic','Open Sans', sans-serif;
	--font-handschrift: 'Great Wishes','Open Sans', sans-serif; 
}



* {
	margin:0px;
	padding:0px;
	box-sizing:border-box;
}


html {background-color:#fff; overflow-x: hidden;}  
body {font-family: var(--font-fliesstext); height:100%; width:100%; color:var(--text); font-size: 16px; line-height: 20px; background-color:#fff; margin:0px; padding:0px;}
body.menuOpen {height: 100vh; overflow: hidden} 
body p, body div {}

/* Klassen ---------------------------- */
.abstand {clear: both;}
.abstand::after {content: " "; display: block; clear: both}
.pt_0{padding-top:0px !important; display: block; width: 100%; height: 0px}
.pt_1{padding-top:20px !important; display: block; width: 100%; height: 0px}
.pt_2{padding-top:50px !important; display: block; width: 100%; height: 0px}
.pt_3{padding-top:70px !important; display: block; width: 100%; height: 0px}
.pt_4{padding-top:100px !important; display: block; width: 100%; height: 0px}
.pt_5{padding-top:120px !important; display: block; width: 100%; height: 0px}
.pt_6{padding-top:180px !important; display: block; width: 100%; height: 0px}
.abstand.pt_0 {display: none}

.pb_0{padding-bottom:0px !important; display: block; width: 100%; height: 0px}
.pb_1{padding-bottom:20px !important; display: block; width: 100%; height: 0px}
.pb_2{padding-bottom:50px !important; display: block; width: 100%; height: 0px}
.pb_3{padding-bottom:70px !important; display: block; width: 100%; height: 0px}
.pb_4{padding-bottom:100px !important; display: block; width: 100%; height: 0px}
.pb_5{padding-bottom:120px !important; display: block; width: 100%; height: 0px}
.pb_6{padding-bottom:180px !important; display: block; width: 100%; height: 0px}
.abstand.pb_0{display: none}
.uppercaser {text-transform: uppercase}
.cmstext p{margin-bottom: 30px; font-size: 18px; line-height: 26px;}


/* diverse Divs  ---------------------- */
h1 {font-family: var(--font-fliesstext); font-weight: bold; font-size: 42px; line-height: 48px; margin-bottom:30px;}
h2 {font-family: var(--font-fliesstext); font-weight: normal; font-size: 36px; line-height: 40px; margin-bottom:30px;}
h3 {font-family: var(--font-fliesstext); font-weight: normal; font-size: 28px; line-height: 32px; margin-bottom:30px;} 
h4 {font-family: var(--font-fliesstext); font-weight: normal; font-size: 24px; line-height: 28px; } 
#adresse h1, #adresse h2, #adresse h3 {color: var(--white)}
.headline-wrap {margin-bottom: 20px; display: flex; align-items: center}
h1.hc_0, h2.hc_0, h3.hc_0 {color: var(--text)}
h1.hc_1, h2.hc_1, h3.hc_1 {color: var(--white)}
h1.hc_2, h2.hc_2, h3.hc_2 {color: var(--black)}

.h3empty {font-family: var(--font-fliesstext); font-weight: normal; font-size: 28px; line-height: 32px; margin-bottom:30px; visibility: hidden}

.c0 {color: var(--text)}
.c1 {color: var(--white)}
.c2 {color: var(--black)}

.split h2 {font-size: 36px; line-height: 40px; margin-top: 50px}


.contentAfter .block {margin-top: 126px; margin-left: 7px}  
.contentAfter .block .line { width: 180px; height: 3px; margin-top: 30px; margin-bottom: 30px; border-radius: 20px; background-color: var(--white)}


/* FIXING Animation on Load */
[data-aos][data-aos][data-aos-duration="1000"], body[data-aos-duration="1000"] [data-aos] {transition-duration: 0s !important ; opacity: 0}
body.loaded [data-aos][data-aos][data-aos-duration="1000"], body[data-aos-duration="1000"] [data-aos] {transition-duration: 1s !important}

.boxOuter {display: flex; justify-content: center}
.work {font-family: var(--font-fliesstext); font-weight: 400}
.cblack {color: #000000}
.bold {font-weight: bold}
.normal {font-weight: normal}
.tac {text-align: center}
.mb10 {margin-bottom: 10px !important}
.mb15 {margin-bottom: 15px !important}
.mb20 {margin-bottom: 20px !important}
.mb30 {margin-bottom: 30px !important}
.mb40 {margin-bottom: 40px !important}
.mb60 {margin-bottom: 60px !important}
.mb80 {margin-bottom: 80px !important}
.mb100 {margin-bottom: 100px !important} 
.mb120 {margin-bottom: 120px !important}
.mt10 {margin-top: 10px !important}
.mt20 {margin-top: 20px !important}
.mt30 {margin-top: 30px !important}
.mt40 {margin-top: 40px !important}
.mt60 {margin-top: 60px !important}
.mt80 {margin-top: 80px !important}
.mt100 {margin-top: 100px !important}
.mt120 {margin-top: 120px !important}
.uc {text-transform: uppercase}
.flex {display: flex}
.flex.justifyAround {justify-content: space-around}
.flex.justifyBetween {justify-content: space-between}
.flex.alignCenter {align-items: center}
.marginAuto {display: block !important; margin: 0px auto}
.white {background-color:var(--white); border:1px solid #fff}
.pink {background-color:#efdfdf;  min-height:150px; max-height:469px; overflow:hidden}
.pinklinks {float:left; display:block; position:relative}
.pinkrechts {float:left; display:block; position:relative}
#obenOuter {z-index:1000; position:fixed;height:230px;width:100%; margin:0px auto; background-color:var(--white); margin-bottom: 20px; top: 0px;transition: height 0.5s ease;}
#balkenoben {z-index:1; width: var(--content-breite); max-width:100%;   margin:0px auto; position:relative;}
#logolink {height: 100px; display: block; transform: scale(1); transition: all 700ms; position: relative; left: -15px} 
#logo {display:block; width:auto; height:100%;} 
#logoText {font-weight: bold; color: #fff; font-size: 12px; letter-spacing: 2px;margin-left:40px}
#langChange {width:auto; text-align:right; float:right; margin-top:0px; position:absolute; right:20px; top:10px; text-transform:uppercase; display:none}
#langChange a {display:block; height:20px;float:left; width:auto; text-align:center; margin-right:10px}
#langChange a:hover {color:#009ee0;}
#langChange a.langChange:hover {color:#009ee0;}
#langChange a.langChange.aktiv {color:#009ee0;}
/*#navMobile {display:none} */
#logoMobile {display:none}
#langChangeMobile {display:none}


.bg_1 {background-color: var(--grey)}
.bg_2 {background-color: var(--dark-green)} 



/* Navigation ----------------------------- */ 
nav {position: fixed; width: 100%; height: 90px; margin: 0px auto; background-color: var(--white1); z-index: 21; padding: 20px 50px 20px 110px; display: flex; justify-content: center; align-items: center}
nav .navInner {display: flex; justify-content: space-between; align-items: center; width: 100%; height: 100%;}
nav .navInner .center a {text-decoration: none; color: var(--text)}

#navOpenerOuter {background-color: var(--yellow); position: absolute; top: 0; left: 0; border-radius: 0 0 50px 0}
#navOpener { display: flex; padding-right: 0px; cursor: pointer; flex-direction: column; gap: 15px; padding: 25px 20px; text-align: center; color: var(--white); text-transform: uppercase;} 
#navOpener .balken {width:auto; height:3px; background-color:var(--white);}
#navOpener.transitionable .balken:nth-of-type(1) {transition: 0.3s ease} 
#navOpener.transitionable .balken:nth-of-type(2) {transition: 0.3s ease 0.3s;}
#navOpener.transitionable .balken:nth-of-type(3) {transition: 0.3s ease}
#navOpener.closer {}
#navOpener.closer .balken:nth-of-type(1) {transition: 0.3s ease 0.3s; transform: translateY(17px) rotate(45deg)}  
#navOpener.closer .balken:nth-of-type(2) {transition: 0.3s ease; opacity: 0}
#navOpener.closer .balken:nth-of-type(3) {transition: 0.3s ease 0.3s; transform: translateY(-17px) rotate(-45deg)}

.navInner {font-size: 24px; line-height: 28px}
.navInner .iconArea .iconAreaList li {list-style-type: none; display: inline-block}
.navInner .iconArea {display: flex; gap: 15px;}
.navInner .iconArea .icon {height: 55px; width: 55px; background-color: var(--yellow); border-radius: 100%; padding: 15px; display:flex; justify-content: center; align-items: center}
.navInner .iconArea .icon img {width: 100%; height: 100%; object-fit: contain;}

.navInner .yellowHandWriting {color: var(--yellow); font-family: var(--font-handschrift); margin: 0 5px}

.menu {text-align:left; position:fixed; padding-top:0px; background-color:var(--white1); display: flex; align-items: flex-start; height: 100vh; top: 0; left: 0; transform: translateX(-200%); padding-top: 190px; z-index: -1} 
.menu.transitionable {transition: 0.5s ease-in-out transform}
.menu.transitionable.visible {transform: translateX(0)}
.menu > ul.module {margin:0px; padding:0px;display: flex; flex-direction: column; justify-content: flex-start; gap: 15px;} 
.menu > ul.module > li {padding:5px 40px; margin:0px; list-style-type:none; width:auto; z-index:99; text-transform: uppercase; min-width: 400px}
.menu > ul.module > li.aktiv, .menu > ul.module > li:hover {background-color: var(--yellow)}
.menu > ul > li a.subNavLink, .menu ul li .navLink {text-decoration: none; cursor: pointer; letter-spacing: 1px; font-size: 20px; line-height: 24px; display: block; width: 100%;  color:var(--black); margin-top: 2px; margin-bottom: 2px; font-family: var(--font-navtext); transition: 0.1s ease; position: relative}

.menu > ul.module > li.aktiv > a, .menu > ul.module > li:hover > a, .menu > ul > li.aktiv .navLink, .menu ul li:hover .navLink {font-weight: bold}


.subnavOuter {display: none; position: absolute; top: 0px; height: 100vh; left: 100%; padding-top: 190px; background-color: var(--white1); font-size: 20px; line-height: 22px}
.subnavOuter.show {display: flex; }
.subnavOuter .subnavSpacer {border-right: 1px solid var(--black); width: 15px; margin-right: 15px}
.subnavOuter .subnav { display: flex; flex-direction: column; gap: 10px; list-style-type: none; width: 100%; margin: 0px auto} 
.subnavOuter .subnav li { margin-right: 0; position: relative; padding: 5px 10px; min-width: 400px}
.subnavOuter .subnav li:hover { background-color: var(--grey-bg)}
.subnavOuter .subnav li img { border: 10px solid var(--black); width: 100%; height: 250px; object-fit: cover}
.subnavOuter .subnav li a, .subnavOuter .subnav li span { text-decoration: none; text-transform: uppercase; color: var(--black); padding: 5px 0px; white-space: nowrap}
.subnavOuter .subnav li:hover a, .subnavOuter .subnav li:hover span { font-weight: bold}
.subnavOuter .subnav li span:hover { color: var(--black);}
.subnavOuter .subnav li.subnavEnd {display: flex; flex-direction: column; align-items: flex-start;}
.subnavOuter .subnav li.subnavEnd .claim {font-size: 50px; line-height: 67px; text-align: left;}
.subnavOuter .subnav li.subnavEnd .button {border: 2px solid var(--black)}

.menuMobile {display: none} 

.langChange {position: absolute; top: 150px; left: 75%; display: flex}
.langChange a {text-decoration: none; color: var(--text)}
.langChange a.activeLang {color: var(--yellow);}

.teaserhomeOuter {display: flex; flex-wrap: nowrap; justify-content: center; position: relative; top:-30px}
.teaserHome {display: flex; flex-direction: column; justify-content: center; align-items: center; gap:10px; padding: 70px 20px 40px 20px; width: 33.3333%}
.teaserHome:nth-child(even) {background-color: var(--teaser-hell-bg)}
.teaserHome:nth-child(odd) {background-color: var(--teaser-dunkel-bg)}
.teaserHomeIcon img {height: 80px; width: auto}

/* Sticky */
#obenOuter.sticky {height: 100px}
#obenOuter.sticky #navOuter {height: 40px}
#obenOuter.sticky .topline{margin: 0px 0; transform: scale(1); padding-bottom: 0px}
#obenOuter.sticky .topline #logolink {height: 80px; left: -10px}
#obenOuter.sticky .topline .icon-tel, #obenOuter.sticky .topline .icon-email {height: 30px; background-size: 25px}
/* CONTENT */
#contentOuter {width:100%; height:auto; min-height:200px;}
#contentHome {width:auto;  z-index:1; max-height:680px; margin:0px auto; position:relative; overflow: hidden; max-width: 1000px; margin-top: 40px;}
#contentHome img {width:100%;}
#content , .content {width:auto;}
.content a, #content a {text-decoration: none; }
.content:last-of-type {margin-bottom: 0px}
.content.fullpage {margin-top: 245px}
.content.black {background-color:#000000}
.content.black .contentsection .inhalt {color:#fff}
.contentAfter {width: 100vw; padding: 0 20px; display: flex; align-items: center; justify-content: flex-start; position: relative; z-index: 10; margin: 0px auto; padding-bottom: 63px} 
.contentAfter h1 {width: auto;}
#content .contentAfter {margin-top: 0px; width: 100%}

.headerButton {position: absolute; background-color: var(--yellow); color: var(--white); right: 15%; top: 75px; padding: 50px; border-radius: 100%; font-size: 16px; line-height: 20px; z-index: 100}
.headerButton .big {font-family: var(--font-handschrift); font-size: 40px; line-height: 56px; margin-bottom: 10px}

.headerbild {width: 100%; } 
.headerGallery {position: relative; height: 100vh; width: 100vw; padding-top: 90px; left: 0}
.headerGallery .flexslider, .headerGallery .slicker {height: 100%;}
.headerGallery .slides {position: relative; height: 100%}
.headerGallery .slides .slick-list, .headerGallery .slides .slick-list .slick-track {height: 100%} 
.headerGallery .slides .slick-dots {width: auto; bottom: 150px; left: calc(10% + 10px)} 
.headerGallery .slides .slick-dots li button:before {font-size: 12px} 


.headerGallery .slides div:not(.overlay) { height: 100%}
.headerGallery .slides div:not(.overlay) .inhaltsbild{ height: 100%; object-fit: cover; object-position: top}
.headerGallery span[class^="pos_"] {display: flex; position: absolute; font-family: var(--font-headline); font-size: 35px; font-weight: bold; line-height: 1.1em; color: var(--dark-blue);  width: 100%; height: 100%; top: 0px; left: 0px; padding: 20px}
.headerGallery .slick-track div:not(.overlay)::after {content: ""; display: block; position: absolute; height: 45%; width: 100%; background-image: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1)); bottom: 0; left: 0;}

.headerGallery span.pos_ol {justify-content: flex-start; align-items: baseline}
.headerGallery span.pos_om {justify-content: center; align-items: baseline}
.headerGallery span.pos_or {justify-content: flex-end; align-items: baseline}
.headerGallery span.pos_ml {justify-content: flex-start; align-items: center}
.headerGallery span.pos_mm {justify-content: center; align-items: center}
.headerGallery span.pos_mr {justify-content: end; align-items: center}
.headerGallery span.pos_ul {justify-content: flex-start; align-items: end}
.headerGallery span.pos_um {justify-content: center; align-items: end}
.headerGallery span.pos_ur {justify-content: end; align-items: end}
.headerGallery span.pos_mm div,
.headerGallery span.pos_om div,
.headerGallery span.pos_um div {padding-left: 200px}

.overlay {position: absolute; left: 10%; bottom: 20px; text-align: center; z-index: 10}
.overlay .big {font-family: var(--font-handschrift); font-size: 44px; line-height: 50px; text-shadow: 2px 7px 5px rgba(255,255,255,0.6), 0px -4px 10px rgba(255,255,255,0.6)}
.overlay a, .overlay span {display: inline-block; font-size: 19px; line-height: 22px; background-color: var(--grey); color: var(--white1); padding: 10px 20px; margin-top: 20px; text-decoration: none}
a.greylink {color: var(--grey)}

.button {display: inline-block; text-decoration: none; background-color: var(--grey); color: var(--white1); border-radius: 15px; padding: 5px 30px; border: none; font-family: var(--font-fliesstext); font-size: 20px; line-height: 24px; margin-top: 30px}
.button.buttonYellow {background-color: var(--yellow)}

#scrollToTop {display: block; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); -webkit-transition: color .3s; transition: color .3s; color: #639991; text-align: center; position: fixed; right: 30px; bottom: -50px; z-index: 101; opacity: 0; transition: 0.4s ease-out}
#scrollToTop.visible {opacity: 1; bottom: 30px}
#scrollToTop:hover {color: var(--orange)}

#contentInnen { text-align:left; max-width:1020px; width:auto; padding-bottom:20px; margin-top:75px}
#content ul li, 
#contentInnen ul li, 
.content ul li {margin-bottom: 5px; position: relative;}
#content .flexslider ul li, #contentInnen .flexslider ul li {margin:0px; left: 0px; max-width: 100%}

.haupttext img {max-width: 100%; object-fit: contain; height: auto}

.contentAfter .einleitung {max-width: 790px}

.content.layout_0 {position: relative} 
.content.layout_0 .contentInnen{ width: var(--content-breite); margin: 0px auto; max-width: 100%}

.content.layout_1 {background-color: var(--grey-bg)}
.content.layout_1 .contentInnen {width: var(--content-breite); margin: 0px auto; max-width: 100%}
.content.layout_1 .contentInnen .zitathead {font-family: var(--font-handschrift); font-size: 36px; line-height: 40px; margin-bottom: 30px} 
.content.layout_1 .contentInnen .zitattext {padding: 0 50px} 
.content.layout_1 .contentInnen .quoteSign {} 
.content.layout_1 .contentInnen .quoteSign img {transform: rotate(180deg)} 
.content.layout_1 .contentInnen .quoteSign:last-child {display: flex; justify-content: flex-end} 
.content.layout_1 .contentInnen .quoteSign:last-child img {transform: none} 

.content.layout_2 .contentInnen {width: var(--content-breite); max-width: 100%; margin: 0px auto; display: flex; justify-content: flex-end; position: relative} 
.content.layout_2 .contentInnen .bildOuter {height: 100%; position: absolute; left: 0; display: flex; flex-direction: column; justify-content: center;}
.content.layout_2 .contentInnen .bildOuter.mobileOnly {display: none}
.content.layout_2 .contentInnen .bildOuter .hauptbild {}
.content.layout_2 .contentInnen .bildOuter .hauptbild img {max-height: 350px; max-width: 400px; border-radius: 15px} 
.content.layout_2 .contentInnen .textblock.textBox {border: 1px solid var(--yellow); border-radius: 15px; padding: 50px; padding-left: 300px; margin-left: 230px; width: 100%;}
.content.layout_2 .contentInnen .textblock.textBox .boxhead {font-size: 36px; line-height: 40px; margin-bottom: 15px}
.content.layout_2 .contentInnen .textblock.textBox .button {min-width: 450px; padding: 10px 30px; text-align: center; margin: 0px auto; margin-top: 70px}

.content.layout_3 .contentInnen {width: var(--content-breite); margin: 0px auto; max-width: 100%}

.slickGalleryOuter .slick-prev {left: 0px; z-index: 1; background-image: url("/UserFiles/structure/svg/arrow_grey.svg"); height: 90px; width: 90px; transform: rotate(180deg); top: 47%}
.slickGalleryOuter .slick-next {right: 0px; background-image: url("/UserFiles/structure/svg/arrow_grey.svg"); height: 90px; width: 90px; top: 47%}
.slickGalleryOuter .slick-prev::before, .slickGalleryOuter .slick-next::before {content: "";}
.slickGalleryOuter .slick-dots {bottom: -75px}
.slickGalleryOuter .slick-dots li button:before { content: "";width: 10px; height: 10px; background-color: var(--grey); border: 2px solid var(--grey); border-radius: 100%; opacity: 1}
.slickGalleryOuter .slick-dots li.slick-active button:before, .slickGalleryOuter .slick-dots li:hover button:before {background-color: transparent}

.highlightsOuter .yellowBanner {width: 100vw; height: 800px; background-color: var(--yellow); position: absolute; top: 450px; left: 0; z-index: 1}
.highlightsInner {display: grid; grid-template-columns: 1fr 1fr; gap: 70px; position: relative; z-index: 10; margin-bottom: 150px}
.highlightsInner .highlight {position: relative; min-height: 600px;}
.highlightsInner .highlight .highlightInner {position: relative; height: 100%; width: 100%;  overflow: hidden;border-radius: 15px}
.highlightsInner .highlight:nth-of-type(2n) .highlightInner {margin-top: 150px}
.highlightsInner .highlight img.background { width: 100%; height: 100%; position: absolute; object-fit: cover;}
.highlightsInner .highlight .textOverlay {z-index: 10; position: absolute; background-color: rgba(255,255,255,0.8); bottom: 70px; display: flex; flex-direction: column; align-items: flex-end; padding: 30px}
.highlightsInner .highlight .textOverlay h3, .highlightsInner .highlight .textOverlay .h3like {display: inline-block; font-size: 24px; line-height: 28px; margin-bottom: 0}
.highlightsInner .highlight .button {margin-top: 30px; } 

.highlightsInner .highlight {margin-top: 30px}
.highlightsInner.zimmerInner .highlight {}
.highlightsInner.zimmerInner .highlight .headline {position: absolute; top: 50px; left: 0; width: 100%; font-family: var(--font-handschrift); font-size: 50px; line-height: 58px; text-align: center}
.highlightsInner.zimmerInner .highlight img.background { width: 100%; height: auto; position: relative; object-fit: cover;}
.highlightsInner.zimmerInner .highlight .highlightInner {border: 1px solid var(--yellow); margin-top: 0}
.highlightsInner.zimmerInner .highlight .highlightInner .textOverlay {position: relative; bottom: 0; background-color: var(--white1)} 

.inputBlock {font-size: 24px; line-height: 28px; }
.inputBlock h3 {font-weight: bold}
.inputBlock .yellowBar {width: 100vw; height: 10px; background-color: var(--yellow); position: absolute; left: 0;}
.inputBlock .split {display: flex; width: 100%; justify-content: space-between;}
.inputBlock .split .half {width: 49%; margin-bottom: 15px; display: flex; align-items: center; column-gap: 15px}
.inputBlock .split .half.justifyBetween {justify-content: space-between; padding-right: 15%} 
.inputBlock .split .half.gap100 {column-gap: 100px}
.inputBlock .split .calOpener {height: 40px}
.inputBlock .split input {padding: 5px 15px; width: 80%; font-size: 24px; line-height: 28px}
.inputBlock .split input[type="radio"] {width: auto; border: 0; height: 25px; width: 25px}
.inputBlock .split .radioText input[type="text"] {width: 73.5%;} 
.inputBlock .split input.input60 {width: 60%; }
.inputBlock .split input.input20 {width: calc(20% - 15px); }
.inputBlock .split textarea {padding: 5px 15px; width: 80%; font-size: 24px; line-height: 28px; resize: none; height: 150px; font-family: var(--font-fliesstext)}  
.inputBlock .columns {columns: 2}
.inputBlock .columns .block {display: flex; justify-content: space-between; margin-bottom: 15px}
.mehrZimmer, .mehrPerson {font-weight: bold; color: var(--text); margin-top: 50px; display: inline-block} 
.mehrPerson {margin-top: 0px;} 
.infoText {font-size: 20px; line-height: 24px} 
.infoTextSmall {width: 900px; max-width: 100%;} 
.checkBoxOuter {columns: 2; width: 100%; margin-bottom: 20px}
.checkBoxOuter div {display: flex; justify-content: space-between; margin-bottom: 10px; margin-right: 20%}

.scroller {display: flex; flex-direction: column; justify-content: center; position: absolute; width: 100%; bottom: 50px; font-family: aktiv-grotesk-extended,sans-serif; color: var(--white) !important; font-size: 13px; line-height: 15px; font-weight: 500; padding-right: 40px}
.start .scroller {color: var(--dark-green) !important;}
.scroller .hoverText {margin-bottom: 5px; width: auto; text-align: center; opacity: 0; transition: opacity 0.4s ease-in-out}
.scroller img { height: 40px; transition: transform 0.4s ease-in-out}
.scroller:hover img {transform: translateY(10px)}
.scroller:hover .hoverText {opacity: 1; color: var(--white) !important}
.start .scroller:hover .hoverText {opacity: 1; color: var(--dark-green) !important}


#carouselcontainer ul li {margin-left:0px}
#inhaltsbildouter {width:100%; display:block; }
.inhaltsbild {max-width:100%; width:100%; display: block}
.flexslider {padding-bottom:0px; width:100%; max-width:100%; height: 100%; overflow: hidden}
.flexslider .slides img {display: block;width: 100%;}
.flex-control-nav {z-index: 1000}
#spruch {font-size: 21px; color: #663333; text-align: center; padding: 70px 0px;}
.teaserMenu {display: flex; justify-content: space-between; cursor: pointer}
.teaserMenu .menuBox {display: block}
.teaserMenu .menuBox .menuBoxName {text-align: center; margin-top: 15px; font-family:  var(--font-fliesstext); font-size: 16px; font-weight: normal;}
.hr {border: 1px solid #cccccc}
.contentBox {margin-top: 50px; display: flex; justify-content: space-between}
.contentBox .contentText {width: 50%}
.contentBox .contentText .text, .contentBox .contentText .text span{font-family: var(--font-fliesstext); font-size: 16px !important}
.contentBox .contentImg {max-width: 520px}
.hidden {display:none;  transition: all 0.2s ease}
.visible {display:flex; transition: all 0.2s ease}

.kontakt {text-align: center; padding-top: 100px; margin-bottom: 80px;}
.kontakt .anfragen {color: #b40e32}

.checkmark {display:inline-block; width: 22px; height:22px; -ms-transform: rotate(45deg); /* IE 9 */ -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */   transform: rotate(45deg); position: relative; top: 5px; margin-left:10px;}
.checkmark.inaktiv span.checkmark_stem, .checkmark.inaktiv span.checkmark_kick  {visibility:hidden}
.checkmark.aktiv span.checkmark_stem, .checkmark.aktiv span.checkmark_kick  {visibility:visible}
.checkmark_circle.inaktiv { position: absolute; width:22px; height:22px; background-color: #cbb147; border-radius:11px; left:0; top:0;}
.checkmark_circle.aktiv {position: absolute; width:22px; height:22px; background-color: #cbb147; border-radius:11px; border: 1px solid red; left:0; top:0;}
.checkmark_stem {position: absolute; width:3px; height:9px; background-color:#fff; left:11px; top:6px;}
.checkmark_kick {position: absolute; width:3px; height:3px; background-color:#fff; left:8px; top:12px;}

button:disabled, button[disabled]{background-color: #000; color: #fff; opacity: 0.1;}
.borderonbuttonhover.inaktiv {border: 1px solid #fff; padding: 5px}
.borderonbuttonhover.aktiv {border: 1px solid red; padding: 5px}

#Senden {cursor:pointer} 

footer {z-index: 20; background-color: var(--grey-bg); }
footer .footerInnen {z-index: 20; display: grid; justify-content: space-between; padding: 80px 10px; grid-template-columns: repeat(auto-fill,300px); width: var(--content-breite); max-width: 100%; margin: 0px auto}
footer .footerLogo {width: 100%; margin-bottom: 50px; display: flex; flex-direction: column; justify-content: center; position: relative;} 
footer .footerLogo .logo {width: 100%;} 
footer .footerLogo .socials li {list-style-type: none}
footer .footerLogo .socials {display: flex; gap: 20px; margin-top: 30px}
footer .footerLogo .socials img {height: 45px}
footer .footerHeadline {font-size: 24px; line-height: 30px; font-weight: bold; }

footer .footerNav {display: flex; flex-direction: column; gap: 3px;}

footer .column {padding-top:150px}
footer .column.footerLogo {padding: 0 50px}
footer a {text-decoration: none; color: var(--text)}
footer .footerLink, footer .line {line-height: 24px}

footer .newsletterDanke {visibility: hidden; margin-top: 10px}
.quickLinksOuter li {list-style-type: none; display: grid}
.quickLinksOuter {position: fixed; bottom: 0; right: 50px; display: grid; grid-template-columns: repeat(3,1fr); width: 500px; border-radius: 15px 15px 0 0; overflow: hidden; font-size: 20px} 
.quickLinksOuter .quickLink {background-color: var(--yellow); display: flex; justify-content: center; align-items: center; color: var(--white); text-transform: uppercase; text-decoration: none}
.quickLinksOuter .logo {padding: 5px 30px; display: flex; justify-content: center; background-color: var(--white1);}
.quickLinksOuter .logo img {width: 100%;}


/* Formularfelder ---------------- */
.formtabelle {margin-top:20px}
footer input:not([type='checkbox']) {font-size:18px; background:var(--white1); border:none; margin-bottom:30px; padding: 15px 10px; color:var(--text); width:100%;  outline: none; text-align: center}
footer input::placeholder {color:var(--text);}
.checkboxWrap {position: relative}
input[type="checkbox"] {position: relative; z-index: 0; display: none}
input[type="checkbox"] + label {position: relative; display: flex; align-items: center; gap: 10px}
input[type="checkbox"] + label::before {width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--grey); background-color: transparent; display: block; content: ""; float: left; margin-right: 5px; margin-top: 5px; z-index: 5; position: relative; flex-shrink: 0} 
input[type="checkbox"]:checked+label::before { box-shadow: inset 0px 0px 0px 3px #fff; background-color: var(--grey);}

.columns input[type="checkbox"] + label {width: 100%; display: flex; justify-content: space-between; align-items: center; flex-direction: row-reverse}


footer button {background-color: var(--grey); width: 100%; padding: 15px 10px; text-align: center; text-transform: uppercase; color: var(--white1); border: none; margin-top: 10px}


.fancybox-opened .fancybox-skin { background-color:#ffffff !important}

.formtabelle td {padding-bottom:20px}

#emailFromUser {border: 1px solid var(--black)}

/* Styles für CMS Editor */

body#tinymce {padding: 20px !important; cursor: default}
body#tinymce ul {margin-left: 20px}
body#tinymce p, body#tinymce ul {line-height: 22px; font-size: 16px; font-family: var(--font-fliesstext); margin-bottom: 30px} 
body#tinymce .formattedLink.formattedLinkunderline {cursor: default}

body#tinymce .accord .accordText {max-height: none; font-size: 18px; line-height: 26px; margin-bottom: 30px}