@media (max-width:1440px) {
	.topline .toplineInner {padding: 8px} 
	.navInner .openKofigurator {right: 8px}
	.overlay {transform: translate(-50%, 0%);}
	
	.orderOuter	.orderHeadline {padding: 0 20px} 
	.orderOuter	.buttonOuter {padding: 0 20px} 
	
	footer .footerInnen, footer .bottomline {padding: 0 10px} 
	footer .column.footerLogo {padding: 0; padding-right: 50px} 
}

@media (max-width:1200px) {
	.menu {display: none}
	nav .navInner {padding: 0 10px}
	.navInner .openKofigurator {display: none} 
	#navOpener {display: flex}
	
	.navInner .menuMobile .openKofigurator {display: block; position: static; transform: none; margin-bottom: 20px} 
	.menuMobile {display: block; height: calc(100vh - 130px); position: fixed; top: 130px; right: 0; background-color: var(--white); padding: 20px; padding-top: 0px; transform: translateX(120%); z-index: 1}
	.menuMobile ul {display: flex; flex-direction: column; gap: 20px }
	.menuMobile ul li {list-style-type: none; }
	.menuMobile ul li a{list-style-type: none; color: var(--black); text-decoration: none; font-weight: 500}
	
	.shopOuter .left .shopPage #shopPageInner2 .leftHalf input, 
	.shopOuter .left .shopPage #shopPageInner2 select, 
	.shopOuter .left .shopPage #shopPageInner2 .leftHalf #gesamtbreiteSlider, 
	.shopOuter .left .shopPage #shopPageInner2 #arbeitshoeheSlider {width: 350px;}
	
	footer .footerInnen {gap: 30px; padding: 60px 40px}
	
}

@media (max-width:1024px) {
:root {
	--content-breite:100%;
}	
h1, #start h1 {line-height: 38px; font-size: 32px; max-width: 100%;}	 
img {max-width: 100%; height: auto;}
	
nav .navInner {height: 60px}
nav .navInner .logo {height: 95px}
header.header-section {min-height: 95px}

.menuMobile {height: calc(100vh - 95px); top: 95px}
.menu {width: 50%; font-size: 20px; line-height: 24px; padding-top: 150px}
.menu > ul.module {width: 100%; gap: 10px}
.menu > ul.module > li {min-width: unset; width: 100%; padding: 5px 10px}
.menu > ul > li a.subNavLink, .menu ul li .navLink {font-size: 20px; line-height: 24px}
	
.headerGallery span[class^="pos_"] {display: block; position: relative; font-size: 20px; padding: 10px 0px}
.headerGallery span.pos_mm div,
.headerGallery span.pos_om div,
.headerGallery span.pos_um div {padding-left: 0px}	
	
.headerGallery ul.slides .slick-dots {bottom: 200px; left: 50%; transform: translateX(-50%)} 

	
#contentOuter {background-image: none; margin-top: 50px}
#contentHome {margin-top:0px; background-color: #fff9f5}
#contentHome img {width:100%}
#content, .content {margin: 0px 0px; padding-bottom: 0px; min-height: 0px}
#spruch {padding: 20px 0px}
.contentBox {margin-top: 10px; display: block}
.contentBox .contentText, .contentBox .contentImg, .contentBox .contentImg img {width:100%}
.contentBox .contentImg {margin-bottom:20px}
.contentBox .contentText ul {list-style-position: inside;}
.contentBox .imgcarousel {margin-top: 25px; margin-bottom: 40px}
.contentBox .imgcarousel ul li {margin-left:0px !important;}

.contentsection {padding: 40px 0px;}
.contentsection .inhalt {width: 100%}
    
.content#start .contentsection {height: calc(100vh - 50px);}    
#startvideo {height: 100%; width: auto; left: -90%}
#start .buttonOuter {position: static; margin: 0px auto; margin-top: 50px}    
	
	.merkmaleOuter .merkmaleInner {justify-content: space-evenly}
	
	.shopTeaserOuter {grid-template-columns: repeat(3,auto); gap: 50px }
	
	.orderOuter	.orderBody  {flex-direction: column}
	.orderOuter	.orderBody .half {width: 100%;}
	.orderOuter	.orderBody .half:first-of-type {border: 0; border-bottom: 1px solid var(--grey-text)}
	
	.content.layout_2 .contentInnen {padding: 0 10px}
	.content.layout_2 .contentInnen .right {padding: 30px}
	
	.content.layout_3 .contentInnen {padding: 0 10px}
	.content.layout_3 .contentInnen .right {padding: 30px}
	
	
	@media(max-height: 1000px){
		.content.content_part_shop {min-height: calc(100vh - 90px)}
	}
	.shopOuter .right {position: fixed; right: -110%; z-index: 100; width: 100vw; transition: 0.3s ease-in-out right}
	.shopOuter .right.visible {position: fixed; right: 0%; height: calc(100vh - 100px); overflow: scroll}
	.shopOuter .left .shopNavigation .mobilePriceHolderOuter {display: flex; justify-content: flex-start; align-items: center; font-size: 18px; line-height: 24px; font-weight: 700; color: var(--red); width: 100%; padding-bottom: 10px;}
	.content.content_part_shop {height: auto}
	.shopOuter .left .shopPage {padding: 20px 25px}
	.shopOuter .left .shopNavigation {padding: 20px; flex-wrap: wrap} 
	.shopOuter .button {margin-top: 10px}
	.shopOuter .left .shopPage .shopPageInner.selectGrid {grid-template-columns: repeat(auto-fill,150px); gap: 40px}
	.shopOuter .left .shopPage .shopPageInner.selectGrid .block {width: 150px; }
	
	.shopOuter .left .shopNavigation#shopNavigationTop {display:flex;}
	
	.mobileStepOpener {}
	.mobileStepOpener {display: flex; position: fixed;cursor: pointer; flex-direction: column; gap: 3px;text-align: center; align-items: flex-end; color: var(--red); text-transform: uppercase; width: 54px; right: 0px; padding: 20px; padding-right: 10px  } 
	.mobileStepOpener .balken {width:100%; height:3px; background-color:var(--red);}
	.mobileStepOpener .balken:nth-of-type(2) {width:75%;}
	.mobileStepOpener .balken:nth-of-type(3) {width:50%;}

.slick-prev, .slick-prev:hover {left: 0px !important; width: 20px; height: 100%;}
.slick-next, .slick-next:hover {right: 0px !important; width: 20px; height: 100%; }
	
	footer .column, footer .column.footerLogo {padding-top: 0px}
	
.hr {margin: 20px 0px}
	

input{ width:100%; border-radius:2px}
input[type='checkbox']{ width:auto;}
#Senden {/*cursor:pointer; width:140px; float:left; color:#fff; position:relative; z-index:100000; height:40px; background-color:#9b015e; border:1px solid #9b015e; margin-top:10px; margin-bottom:20px*/ -webkit-appearance: none;} 
#anrede {width:150px;}
#formDanke {color:#333; display:none}

#projectGallery a {margin:0px auto; clear:both; float:none; margin-bottom:20px}
#projectGallery a:nth-of-type(4n) {margin:0px auto; margin-bottom:20px}

.contentAfter hr {width:auto !important}

}

@media (max-width:800px) {
	
	body {font-size: 16px; line-height: 20px;}
	
	.pt_0{padding-top:0px !important;}
	.pt_1{padding-top:5px !important;}
	.pt_2{padding-top:15px !important;}
	.pt_3{padding-top:25px !important; }
	.pt_4{padding-top:40px !important;}
	.pt_5{padding-top:80px !important;}
	.pt_6{padding-top:100px !important;}
	.abstand.pt_0 {display: none}

	.pb_0{padding-bottom:0px !important;}
	.pb_1{padding-bottom:5px !important;}
	.pb_2{padding-bottom:15px !important;}
	.pb_3{padding-bottom:25px !important;}
	.pb_4{padding-bottom:40px !important;}
	.pb_5{padding-bottom:80px !important}
	.pb_6{padding-bottom:100px !important;}
	
	.desktopOnly {display: none}
	
	h1 {font-size: 28px; line-height: 32px;}
	h2 {font-size: 24px; line-height: 28px;}
	h3, .inputBlock h3 {font-size: 20px; line-height: 24px;}
	h4 {font-size: 16px; line-height: 20px}
	h1.smallh1 {font-size: 32px; line-height: 40px}
	
	nav {}

	
	.subnavOuter {padding-top: 150px; width: 100%}
	.subnavOuter .subnavSpacer {width: 10px; margin-right: 10px}
	.subnavOuter .subnav li {padding: 5px 10px; min-width: unset}
	.subnavOuter .subnav li a, .subnavOuter .subnav li span {padding: 0}
	
	.headerGallery {padding-top: 95px}
	
	.button {font-size: 16px; line-height: 20px}
	
	.contentAfter {padding: 0 15px; flex-direction: column; justify-content: center; align-items: flex-start; padding-bottom: 90px}
	.contentAfter .block {margin-top: 0; margin-left: 0}
	.contentAfter .flipText {display: none}
	.contentAfter .flipTextMobile {display: block}
	.contentAfter .block .line {margin-top: 20px; margin-bottom: 20px}
	.contentAfter .block h1 {margin-bottom: 00px}
	.scroller {width: calc(100% - 30px); bottom: 135px; padding-right: 0}
	.scroller .hoverText {margin-bottom: 0}
	.scroller img {height:  30px}
	
	
	.content.layout_2 .contentInnen {flex-direction: column}
	.content.layout_2 .contentInnen .left, .content.layout_2 .contentInnen .right {width: 100%; padding: 30px 0}
	
	.content.layout_3 .contentInnen {flex-direction: column}
	.content.layout_3 .contentInnen .left, .content.layout_3 .contentInnen .right {width: 100%; padding: 30px 0}
	
	.shopOuter .left .adressfelder .half.padding, .shopOuter .left .adressfelder .half {width: 100%; padding: 0}
	.shopOuter .left span.priceSpan {margin-left: auto}  
	
	
	.highlightsInner .highlight {min-height: 550px;}
	.highlightsInner .highlight .textOverlay {bottom: 30px}
	
	.inputBlock {font-size: unset; line-height: unset} 
	.inputBlock .split {flex-direction: column}
	.inputBlock .split .half {width: 100%}
	.inputBlock .split input {width: 100%} 
	.inputBlock .split textarea {width: 100%}
	.inputBlock .columns {columns: 1}
	.infoText {font-size: unset; line-height: unset}
	
	.quickLinksOuter {right: unset; left: 50%; transform: translateX(-50%); max-width: 80%}
	
	footer { margin-top: 30px}
	footer .footerBottom .right {margin-top: 20px}
	footer .footerBottom .left a.footerLink {font-size: 16px; line-height: 20px}
	footer .footerLogo {margin-bottom: 20px}
	footer .footerLogo .socials img {height: 30px; margin-top: 5px}
	footer .footerInnen {grid-template-columns: 1fr}

	input {margin-bottom: 0}
	
	
}

@media (max-width: 600px) {
	.topline {height: 30px; }
	.topline .toplineInner {gap: 25px}
	.topline .toplineInner .info a {font-size: 12px; line-height: 14px}
	nav .navInner {height: 70px; padding-left: 0}
	nav .navInner .logoOuter, nav .navInner .logo {height: 70px; position: relative; top: 0}
	
	.menuMobile {height: calc(100vh - 100px); top: 100px}
	
	.button {padding: 10px 20px}
	
	.shopTeaserOuter {grid-template-columns: repeat(auto-fill,200px); gap: 20px }
}
	
@media (max-width: 500px) {
	nav {}
	nav .navInner {column-gap: 5px}
	nav .center {font-size: 18px; line-height: 22px}
	#navOpener.closer .balken:nth-of-type(1) {transition: 0.3s ease 0.3s; transform: translateY(10px) rotate(45deg)}  
	#navOpener.closer .balken:nth-of-type(3) {transition: 0.3s ease 0.3s; transform: translateY(-10px) rotate(-45deg)}
	
	.headerGallery ul.slides .slick-dots {bottom: 280px} 
	
	.overlay .big {font-size: 40px; line-height: 48px;}
	.overlay .subtext {font-size: 24px; line-height: 32px;}
	
	.menu {font-size: 16px; line-height: 18px;}
	.menu > ul > li a.subNavLink, .menu ul li .navLink {font-size: 16px; line-height: 18px; margin: 0}
	
	.subnavOuter .subnavSpacer {width: 3px; margin-right: 3px}
	
	.content.layout_1 .contentInnen {padding: 0 10px}
	.content.layout_1 .contentInnen .zitathead {font-size: 28px; line-height: 44px; margin-bottom: 10px}
	
	.content.layout_2 .contentInnen .textblock.textBox .button {min-width: unset; width: 100%}
	.content.layout_2 .contentInnen .bildOuter .hauptbild img {max-width: 100%}
	.layout_2 .contentInnen {padding: 0 10px}
	
	
	
	.shopOuter .left .shopPage #shopPageInner6 .radioBlock input + label {flex-wrap: wrap}
	.shopOuter .left span.priceSpan {width: 100%; margin-left: 40px}
	
	.shopOuter .left .shopPage #shopPageInner2 {flex-direction: column}
	
	.shopOuter .left .shopPage #shopPageInner2 .leftHalf input, 
	.shopOuter .left .shopPage #shopPageInner2 select, 
	.shopOuter .left .shopPage #shopPageInner2 .leftHalf #gesamtbreiteSlider, 
	.shopOuter .left .shopPage #shopPageInner2 #arbeitshoeheSlider {width: calc(100vw - 50px)}
	
	.orderOuter	.orderHeadline {margin-bottom: 10px}
	.orderOuter	.orderBody .half .block {flex-direction: column}
	.orderOuter	.orderBody .half .block .name {font-weight: 700}
	.orderOuter	.orderBody .half .block .value {max-width: 100%; text-align: start;}
	
	footer .footerInnen { padding: 40px 10px; padding-bottom: 70px}
	footer .footerLogo .socials {justify-content: center}
	
}

@media (max-width: 400px) {
	nav .center {font-size: 16px; line-height: 18px}
	
	
}

@media (max-width: 370px) {

	
	
	.slick-prev {left: -20px !important;}
	.slick-next {right: -20px !important;}

}