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

:root {
	--black: #000000;
	--white: #ffffff;
	--grey: #383838;
	--grey-bg: #f5f5f5;
	--red: #a01916;
	--red-bg: #f4e7ea;
	--green: #afc732;
	--text: #000000;
	--grey-text: #b3b3b3;
	--content-breite:1440px;
	
	--font-fliesstext:  'Montserrat','Open Sans', sans-serif;
	--font-headline: 'Roboto','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: 18px; line-height: 24px;  background-color:#fff;  margin:0px; padding:0px;}
body.menuOpen {height: 100vh; overflow: hidden;} 
body p {margin-bottom: 10px}

/* 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: 40px; line-height: 44px; margin-bottom:15px;}
h2 {font-family: var(--font-fliesstext); font-weight: normal; font-size: 24px; line-height: 32px; margin-bottom:15px; text-transform: uppercase; letter-spacing: 3px} 
h3 {font-family: var(--font-fliesstext); font-weight: bold; font-size: 18px; line-height: 24px; margin-bottom:10px;} 
h4 {font-family: var(--font-fliesstext); font-weight: normal; font-size: 18px; line-height: 24px; } 
#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)}

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

.split h2 {font-size: 50px; line-height: 65px; 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}
.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}
.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}
.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}
#name {position:relative; float:left; text-align:left; margin-left:0px; margin-top:38px}
#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)}
.bg_2 {background-color: var(--grey)} 



/* Navigation ----------------------------- */ 
nav {position: fixed; width: 100vw; margin: 0px auto; background-color: var(--black); z-index: 21; box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;}
nav .navInner {display: flex; justify-content: space-between; align-items: center; width: var(--content-breite); max-width: 100%; margin: 0px auto; height: 95px; position: relative}

#navOpener { display: none; padding-right: 0px; cursor: pointer; flex-direction: column; gap: 5px;text-align: center; color: var(--red); text-transform: uppercase; width: 30px} 
#navOpener .balken {width:auto; height:5px; background-color:var(--red);}
#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(10px) 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(-10px) rotate(-45deg)}

.topline {width: 100%;height: 35px; background: var(--green)}
.topline .toplineInner {height: 100%; width: var(--content-breite); max-width: 100%; margin: 0px auto; display: flex; justify-content: flex-end; padding: 8px 0; gap: 50px}
.topline .toplineInner .info {height: 100%; display: flex; align-items: center; gap: 10px }
.topline .toplineInner .info a {color: var(--white); text-decoration: none; font-size: 14px; line-height: 16px; letter-spacing: 1px; font-weight: 500 }
.topline .toplineInner .info img {height: 100%; }

.navInner .logo {height: 130px; position: absolute; left: 0; top: -35px; background-color: var(--white);}
.navInner .openKofigurator {position: absolute; right: 0; top: 50%; transform: translateY(-50%); margin-top: 0; font-size: 16px} 

.menu {text-align:left;  padding-top:0px; background-color:var(--black); display: flex;  width: 100%; padding: 0 330px}  

.menu > ul.module {margin:0px; padding:0px;display: flex; justify-content: space-between; width: 100%; gap: 5px;} 
.menu > ul.module > li {margin:0px; list-style-type:none; width:auto; z-index:99;;}
.menu > ul > li a.subNavLink, .menu ul li .navLink {text-decoration: none; cursor: pointer; display: block; width: 100%;  color:var(--white); font-family: var(--font-fliesstext); transition: 0.1s ease; position: relative; font-size: 16px; font-weight: 500; letter-spacing: 1px}
.menu > ul > li a.subNavLink:hover, .menu ul li .navLink:hover, .menu > ul > li a.subNavLink.aktiv, .menu ul li .navLink.aktiv {color: var(--green)}

.menuMobile {display: none} 
.menuMobile.transitionable {transition: 0.5s ease-in-out transform}
.menuMobile.transitionable.visible {transform: translateX(0)}

.mobileStepOpener {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; color: var(--black)}
.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%}

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


.headerGallery ul.slides li { height: 100%}
.headerGallery ul.slides li .inhaltsbild{ height: 100%; object-fit: cover; object-position: center}
.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 li::after {content: ""; display: block; position: absolute; height: 5%; width: 100%; background-image: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.6)); 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: 50%; bottom: 50%; text-align: center; z-index: 10; transform: translate(-50%, 0%);font-family: var(--font-headline); color: var(--white)}
.overlay .big { font-size: 64px; line-height: 70px; letter-spacing: 3px; font-weight: bold}
.overlay .subtext { font-size: 32px; line-height: 48px; letter-spacing: 3px; text-transform: uppercase; margin-top: 15px}
.overlay .col_0 {color: var(--black)}
.overlay .col_1 {color: var(--white); text-shadow: 2px 7px 5px rgba(0,0,0,0.2), 0px -4px 10px rgba(0,0,0,0.2);} 


.infoline {width: 100%; background: var(--red); height: 50px;}
.infolineInner {width: var(--content-breite); max-width: 100%; margin: 0px auto; display: flex; justify-content: space-evenly; color: var(--white); align-items: center; height: 100%;}

.button {display: inline-block; text-decoration: none; background-color: var(--green); color: var(--white); border-radius: 5px; padding: 15px 30px; border: 1px solid var(--green); font-family: var(--font-fliesstext); font-size: 18px; line-height: 24px; margin-top: 30px; transition: 0.3s ease; cursor: pointer} 
.button:hover {background-color: transparent; color: var(--green)} 
.button.disabled, .button.disabled:hover {background-color: var(--green);color: var(--white);opacity: 0.5;}

#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%}

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

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

.content.layout_1 {}
.content.layout_1 .contentInnen {width: var(--content-breite); max-width: 100%; margin: 0px auto; }
.content.layout_1 .contentInnen .textblock {text-align: center }

.content.layout_2 {}
.content.layout_2 .contentInnen {width: var(--content-breite); max-width: 100%; margin: 0px auto; display: flex;justify-content: space-between}
.content.layout_2 .contentInnen .left {width: 50%}
.content.layout_2 .contentInnen .left .hauptbild img {width: 100%; border-radius: 10px}
.content.layout_2 .contentInnen .right {width: 50%; padding: 100px;}
.content.layout_2 .contentInnen .right h2 {margin-bottom: 30px}

.content.layout_3 {}
.content.layout_3 .contentInnen {width: var(--content-breite); max-width: 100%; margin: 0px auto; display: flex;justify-content: space-between; flex-direction: row-reverse}
.content.layout_3 .contentInnen .left {width: 50%}
.content.layout_3 .contentInnen .left .hauptbild img {width: 100%; border-radius: 10px}
.content.layout_3 .contentInnen .right {width: 50%; padding: 100px; padding-left: 0}
.content.layout_3 .contentInnen .right h2 {margin-bottom: 30px}

.content_layout_4 {}
.content.layout_4 .contentInnen {width: var(--content-breite); max-width: 100%; margin: 0px auto; display: flex;justify-content: space-between}
.content.layout_4 .contentInnen .left {width: 50%; text-align: center; display: flex; justify-content: center;}
.content.layout_4 .contentInnen .left .textblock {background-color: var(--black); color: var(--white); padding: 0 50px}
.content.layout_4 .contentInnen .left .textblock a {color: var(--white)}
.content.layout_4 .contentInnen .right {width: 50%; }



.shopTeaserOuter {display: grid; grid-template-columns: repeat(3,300px); width: 100%; gap: 20px; justify-content: space-evenly; margin: 50px 0;}
.shopTeaserOuter .teaser {}
.shopTeaserOuter .teaser img {width: 100%; border: 4px solid transparent; border-radius: 15px}
.shopTeaserOuter .teaser .teaserText {margin-top: 20px; font-weight: 500; font-size: 16px; line-height: 18px} 

.merkmaleOuter {}
.merkmaleOuter .merkmaleInner {display: grid; grid-template-columns: repeat(auto-fill,300px); justify-content: space-between; gap: 30px}
.merkmaleOuter .merkmaleInner .merkmal {text-align: center} 
.merkmaleOuter .merkmaleInner .merkmal .name {font-family: var(--font-headline); font-weight: bold; margin-top: 15px} 
.merkmaleOuter .merkmaleInner .merkmal .text {margin-top: 25px; color: var(--grey-text)} 

/* SHOP */
@media(min-height: 970px){
	.content.content_part_shop {height: calc(100vh - 130px)}
}
@media(max-height: 970px){
	.content.content_part_shop {min-height: calc(100vh - 130px)}
}

.content.content_part_shop .contentInnen, .content.content_part_shop .contentInnen .textblock {height: 100%} 
.shopOuter {display: flex; width: 100%; justify-content: space-between; height: 100%}
.shopOuter > .right {width: 400px; padding-top: 20px; background-color: var(--grey-bg); flex-shrink: 0; display: flex; flex-direction: column; text-align: left} 
.shopOuter > .right .step {border-bottom: 1px solid var(--grey-text); padding: 25px 20px; font-weight: 500;  color: var(--grey-text)} 
.shopOuter > .right .step.done {color: var(--text); cursor: pointer;}
.shopOuter > .right .step.active {color: var(--green); font-weight: 700; cursor: pointer;}
.shopOuter > .right .step:last-of-type {border-bottom: none} 

.shopOuter > .right .priceHolderOuter {margin-top: auto; padding: 50px 20px;}
.shopOuter > .right .priceHolderOuter .priceHolder {padding: 15px 0px; font-size: 18px; line-height: 24px; font-weight: 700; color: var(--green)}

.shopOuter .left, .shopOuter .left form {width: 100%; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; position: relative; height: 100%;} 
.shopOuter .left .shopPage { width: 100%; padding: 40px 50px; display: none} 
.shopOuter .left .shopPage.active { display: block} 
.shopOuter .left .shopPage.active.fadeOut {top: 0; transition: 0.5s ease-in-out; opacity: 0} 

.shopOuter .left .shopPage .shopHeadline {font-family: var(--font-fliesstext); font-weight: bold; font-size: 32px; line-height: 36px; margin-bottom: 50px; text-align: left; word-wrap: break-word;}  
.shopOuter .left .shopPage .shopHeadline.smallMargin {font-family: var(--font-fliesstext); font-weight: bold; font-size: 32px; line-height: 36px; margin-bottom: 10px; text-align: left}  
.shopOuter .left .shopPage .shopHeadline .zusatzinfo {font-weight: normal; font-size: 20px; line-height: 28px;}  
.shopOuter .left .shopPage .shopSubline {color: var(--grey-text); margin-bottom: 30px}  
.shopOuter .left .shopPage .shopPageInner.selectGrid {display: grid; grid-template-columns: repeat(auto-fill,190px); justify-content: space-evenly; flex-wrap: wrap; width: 100%; gap: 50px}
.shopOuter .left .shopPage .shopPageInner.selectGrid .block {width: 190px; cursor: pointer; text-align: center}
.shopOuter .left .shopPage .shopPageInner.selectGrid .block img {width: 100%; border: 4px solid transparent; border-radius: 15px}
.shopOuter .left .shopPage .shopPageInner.selectGrid .block .teaserText {margin-top: 20px; font-weight: 500; font-size: 16px; line-height: 18px}
.shopOuter .left .shopPage .shopPageInner.selectGrid .block:hover img, .shopOuter .left .shopPage .shopPageInner.selectGrid .block.selected img {border: 4px solid var(--green)} 

.shopOuter .left .shopPage #shopPageInner2, .shopOuter .left .shopPage #shopPageInner5 {display: flex; gap: 20px}
.shopOuter .left .shopPage #shopPageInner2 .rightHalf, .shopOuter .left .shopPage #shopPageInner5 .rightHalf {display: flex; align-items: center; flex-direction: column; text-align: center; justify-content: flex-start;}
.shopOuter .left .shopPage #shopPageInner2 .rightHalf img, .shopOuter .left .shopPage #shopPageInner5 .rightHalf img {width: 100%}
.shopOuter .left .shopPage #shopPageInner2 .leftHalf {display: flex; flex-direction: column; align-items: baseline; flex-shrink: 0}
.shopOuter .left .shopPage #shopPageInner2 .leftHalf label {margin-bottom: 10px; font-weight: 500}
.shopOuter .left .shopPage #shopPageInner2 .leftHalf input, .shopOuter .left .shopPage #shopPageInner2 select, .shopOuter .left .shopPage #shopPageInner5 select {padding: 10px 15px; width: 500px; max-width: 100%; margin-bottom: 50px; font-family: var(--font-fliesstext)}
.shopOuter .left .shopPage #shopPageInner2 .leftHalf .widthSlider, .shopOuter .left .shopPage #shopPageInner2 .heightSlider {margin-bottom: 50px}
.shopOuter .left .shopPage #shopPageInner2 .leftHalf .sliderVals {display: flex; justify-content: space-between; font-size: 14px}
.shopOuter .left .shopPage #shopPageInner2 .leftHalf .currentVal {text-align: center;}
.shopOuter .left .shopPage #shopPageInner2 .leftHalf #gesamtbreiteSlider, .shopOuter .left .shopPage #shopPageInner2 #arbeitshoeheSlider {width: 500px; max-width: 100%; margin: 10px 0; padding: 0 10px}
.shopOuter .left .shopPage #shopPageInner2 .leftHalf #gesamtbreiteSlider.ui-widget-content, .shopOuter .left .shopPage #shopPageInner2 #arbeitshoeheSlider.ui-widget-content {background-color: var(--white)}
.shopOuter .left .shopPage #shopPageInner2 .leftHalf #gesamtbreiteSlider.ui-widget-content .ui-state-default, .shopOuter .left .shopPage #shopPageInner2 #arbeitshoeheSlider.ui-widget-content .ui-state-default {background-color: var(--green)}

.shopOuter .left .shopPage #shopPageInner5 .infoHolder li {list-style-type: none;} 

.shopOuter .left .shopPage #shopPageInner6 .radioBlock {margin-bottom: 50px}
.shopOuter .left .shopPage #shopPageInner6 .radioBlock input {display: none}
.shopOuter .left .shopPage #shopPageInner6 .radioBlock input + label {display: flex; align-items: center; column-gap: 10px; margin-bottom: 5px; cursor: pointer} 
.shopOuter .left .shopPage #shopPageInner6 .radioBlock input + label::before {display: block; content: ""; border: 1px solid var(--red); border-radius: 100%; height: 28px; width: 28px; top: 20px; z-index: 5; margin-top: 0px;}
.shopOuter .left .shopPage #shopPageInner6 .radioBlock input:checked + label::before {border: 1px solid var(--red); background-color: var(--red);}
.shopOuter .left .shopPage #shopPageInner6 .radioBlock .info {color: var(--grey-text)}

.shopOuter .left .shopPage #shopPageInner7 .block {display: flex; justify-content: space-between; margin-bottom: 10px}
.shopOuter .left .shopPage #shopPageInner7 .block .name {font-weight: 500}

.shopOuter .left .shopPage #shopPageInner8 .bezalungsBlock {margin-top: 10px} 

.shopOuter .left .adressfelder, .shopDekorOuter .adressfelder { display: flex; flex-wrap: wrap; opacity: 1; position: relative!important; z-index: 100 !important; width: auto !important; height: auto !important; text-align: left}
.shopOuter .left .adressfelder .half, .shopDekorOuter .adressfelder .half {width: 50%;}
.shopOuter .left .adressfelder .half.flex, .shopDekorOuter .adressfelder .half.flex {column-gap: 10px}
.shopOuter .left .adressfelder .half.padding, .shopDekorOuter .adressfelder .half.padding {padding-right: 10px;}
.shopOuter .left .adressfelder input, .shopOuter .left .adressfelder select, .shopDekorOuter .adressfelder input, .shopDekorOuter .adressfelder select { margin-bottom: 3px; padding-left: 20px; box-sizing: border-box;}
.shopOuter .left .adressfelder .formlinks, .shopDekorOuter .adressfelder .formlinks {margin-bottom: 10px; font-weight: 500;}
.shopOuter .left .adressfelder .formrechts input, .shopDekorOuter .adressfelder .formrechts input  {border: 1px solid var(--grey) !important; color: var(--black) !important; margin-bottom: 15px !important; font-family: var(--fliesstext); font-size: 16px; height: 50px; max-width: 100%; width: 100%;}

.shopOuter .left .shopNavigation, .shopDekorOuter + .shopNavigation {display:flex; justify-content: space-between; padding: 50px; padding-top: 0; margin-top: auto; transition: opacity 0.5s ease-in-out;}
.shopDekorOuter + .shopNavigation {padding: 0px; padding-bottom: 50px}
.shopOuter .left .shopNavigation#shopNavigationTop, .shopDekorOuter + .shopNavigation#shopNavigationTop {display:none;} 
.shopOuter .left .shopNavigation.fade, .shopDekorOuter + .shopNavigation.fade {opacity: 0;}
.shopOuter .left .shopNavigation .finishOrder, .shopDekorOuter + .shopNavigation .finishOrder {display:none;}
.shopOuter .left .shopNavigation .mobilePriceHolderOuter, .shopDekorOuter + .shopNavigation .mobilePriceHolderOuter {display:none;}

.orderOuter	{}
.orderOuter	.orderHeadline {margin-bottom: 30px}
.orderOuter	.orderBody {display: flex}
.orderOuter	.orderBody .half {width: 50%; padding: 20px}
.orderOuter	.orderBody .half:first-of-type {border-right: 1px solid var(--grey-text)}
.orderOuter	.orderBody .half h2 {margin-bottom: 10px}
.orderOuter	.orderBody .half .block {display: flex; justify-content: space-between; margin-bottom: 10px}
.orderOuter	.orderBody .half .block .value {max-width: 70%; text-align: end} 
.orderOuter	.orderBody .half .block .name {font-weight: 500}

.mwst {font-size: 12px; line-height: 14px}

.shopDekorOuter .shopPageInner.selectGrid {display: grid; grid-template-columns: repeat(auto-fill,190px); justify-content: space-evenly; flex-wrap: wrap; width: 100%; gap: 50px}
.shopDekorOuter .shopPageInner.selectGrid.hidden {display: none;}
.shopDekorOuter .shopPageInner.selectGrid .block {width: 190px; cursor: pointer; text-align: center; position: relative}
.shopDekorOuter .shopPageInner.selectGrid .block img {width: 100%; border: 4px solid transparent; border-radius: 15px}
.shopDekorOuter .shopPageInner.selectGrid .block .teaserText {margin-top: 20px; font-weight: 500; font-size: 16px; line-height: 18px}
.shopDekorOuter .shopPageInner.selectGrid .block .musterSelected {position: absolute; top: 40%; color: var(--red); left: 50%; transform: translate(-50%,-50%); font-weight: bold; display: none}
.shopDekorOuter .shopPageInner.selectGrid .block:hover img, .shopDekorOuter .shopPageInner.selectGrid .block.selected img {border: 4px solid var(--red)} 
.shopDekorOuter .shopPageInner.selectGrid .block.selected .musterSelected {display: block} 

.inputBlock {}
.inputBlock h3 {font-size: 50px; line-height: 56px; 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; width: 1080px; max-width: 100%; margin-bottom: 30px}
.inputBlock.split .inputwrap {display: flex; flex-direction: column; width: 49%} 
.inputBlock.split input {padding: 5px 15px; width: 100%; font-size: 32px; line-height: 38px}
.inputBlock textarea {padding: 5px 15px; width: 100%; font-size: 32px; line-height: 38px; resize: none; height: 150px}
.infoText {font-size: 20px; line-height: 24px} 

#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}


footer {z-index: 20; background-color: var(--black); color: var(--white); padding: 30px 0}
footer .footerInnen {z-index: 20; display: flex; justify-content: space-between; padding: 20px 0px; width: var(--content-breite); max-width: 100%; margin: 0px auto}
footer .footerLogo {width: 100%; display: flex; flex-direction: column; justify-content: center; position: relative;} 
footer .footerLogo .logo {width: 100%;} 
footer .footerLogo .socials {display: flex; gap: 20px; margin-top: 30px}
footer .footerLogo .socials img {height: 45px}
footer .footerHeadline {font-size: 24px; line-height: 28px; font-weight: bold; }

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

footer .column {}
footer .column.footerLogo {padding: 0 50px; width: 33%}
footer .column.flexRow {display: flex; flex-direction: column; justify-content: space-between}
footer .column.right {text-align: right}
footer a {text-decoration: none; color: var(--white)}
footer .bottomline {text-align: center;} 

.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;}
.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(--white);}
.quickLinksOuter .logo img {width: 100%;}


/* Formularfelder ---------------- */
.formtabelle {margin-top:20px}
footer input:not([type='checkbox']) {font-size:20px; background:var(--white); 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(--white); border: none; margin-top: 40px}


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

.formtabelle td {padding-bottom:20px}

/* 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}