@media (max-width:1350px) {
#obenOuter, #obenOuter.sticky {height: 70px}
.logo {width: 180px}
#logolink,#obenOuter.sticky .topline #logolink {height: unset; left: 0}
#logolink #logo {width: 100%}
.topline .topButton {padding: 5px 10px}
}
@media (max-width:1350px) {
:root {
--content-breite:100%;
}
html {}
body {line-height: 150%;}
body > section {}
h1, #start h1 {line-height: 50px; font-size: 22px; max-width: 100%; margin-top: 20px}
img {max-width: 100%; height: auto;}
.contentAfterSubnav {margin-left:0px}
.topline, #obenOuter.sticky .topline {margin: 15px 0; width: 100%}
.topline .balkenLeft .topButton.mail {margin-left: 20px;}
.topline .topButton .icon {margin-right: 0}
.topline .topButton .text {display: none}
.topline .topButton.buchen .text {display: block}
.topline .topButton.buchen .icon {display: none}
#teaserSlideshowOuter {padding: 0px 20px}
.pauschalen .topline .topButton.buchen {border-radius: 5px;}
#obenOuterBalken {width: 100%; height:100px;background-color: #b40e32; display: flex; justify-content: center}
#balkenoben {z-index:1; max-width:100%; width:100%; margin:0px auto;height:100%; display: flex; align-items: center}
#logolink { z-index:999; margin-top: 0px; width: auto}
#logo { z-index:999; }
#nav {padding-top: 100px}
#name {position:relative; float:left; text-align:left; margin-left:120px; margin-top:38px; font-size:1.3em; line-height:1.1em}
.headerGallery span[class^="pos_"] {}
.headerGallery span.pos_mm div,
.headerGallery span.pos_om div,
.headerGallery span.pos_um div {font-weight: 600; padding-left: 0px; font-size: 2.5rem; text-align: center; line-height: 3rem; letter-spacing: 8px}
.headerGallery span[class^="pos_"] .subtext {font-size: 1.2rem; line-height: 1.5rem; letter-spacing: 5px}
h2.hc_0 {padding-top: 20px}
#faqs {flex-direction: column; flex-wrap: wrap}
#faqs .faqheadlines {width: 100% !important; max-width: 100% !important}
#faqs .faqtexte {width: 100% !important; max-width: 100% !important}
#faqs .faqheadlines .faqheadline.active, #faqs .faqtexte .faqtext.active {
border-radius: 5px 5px 5px 5px;
}
#formularOuter {padding: 0px 20px}
.mobileOnly {display: initial}
.layout_1 .contentInnen {flex-direction: column}
.layout_1 .contentInnen .layout_left {width: 100%}
.layout_1 .contentInnen .textContent {width: 100%; padding: 60px 20px; padding-bottom: 100px}
.layout_1 .contentInnen .layout_left .hauptbild {position: relative; height: 400px; left: unset; top: unset; transform: unset}
.layout_1 .contentInnen .layout_left h2 {font-size: 32px; line-height: 36px; text-align: center; font-weight: 600 }
.layout_1 .contentInnen .layout_left h2 br {display: none}
.layout_1 .contentInnen .textContent .buttonAbsolute {right: 50%; transform: translateX(50%) translateY(-15%); height: 190px;}
.layout_2 .layout_left {width: 100%; left: unset; height: 400px;}
.layout_2 .layout_left .hauptbild, .layout_2 .layout_left .hauptbild img {height: 100%; object-fit: cover; object-position: center}
.layout_2 .layout_teaser {top: 0}
.layout_2 .teaser {flex-direction: column-reverse; align-items: center; top: -70px}
.layout_2 .teaser.twoImages {align-items: center}
.layout_2 .teaser .teaserTextBlock {width: 100%; text-align: center; padding-right: 0; padding: 0 10px}
.layout_2 .teaser .teaserImage {display: none}
.layout_2 .teaser.twoImages .teaserTextBlock {margin-top: 0px; width: 100%; padding: 0 20px}
.layout_2 .teaser.twoImages .teaserIcon {top: -50px}
.layout_2 .teaser .teaserIcon, .layout_2 .teaser.twoImages .teaserIcon {position: relative; right: unset; transform: unset; margin-bottom: 80px}
.layout_2 .teaser.twoImages .teaserIcon {margin-bottom: 0}
.layout_2 .teaser .teaserTextBlock h3 {font-size: 32px; line-height: 36px; font-weight: 60}
.layout_3 .contentInnen {flex-direction: column}
.layout_3 .layout_left {height: 400px}
.layout_3 .contentInnen .hauptbild, .layout_3 .contentInnen .hauptbild img {height: 100%; object-fit: cover; object-position: center}
.layout_3 .layout_teaser {top: 0}
.layout_3 .teaser {flex-direction: column-reverse; align-items: center; top: -70px}
.layout_3 .teaser .teaserImage {display: none}
.layout_3 .teaser .teaserTextBlock {width: 100%; padding-left: 0; padding: 0 10px; text-align: center}
.layout_3 .teaser .teaserIcon {position: relative; right: unset; transform: unset; margin-bottom: 80px}
.layout_4 .layout_left {display: none}
.layout_4 .layout_teaser {top: 0}
.layout_4 .teaser, .layout_4 .teaser.teaser2 {flex-direction: column; align-items: center; margin-bottom: 100px}
.layout_4 .teaser .teaserImage, .layout_4 .teaser.teaser2 .teaserImage {width: 100%; order: 1; height: 400px;}
.layout_4 .teaser .teaserImage img, .layout_4 .teaser.teaser2 .teaserImage img {height: 100%; width: 100%; object-fit: cover; object-position: center}
.layout_4 .teaser .teaserTextBlock, .layout_4 .teaser.teaser2 .teaserTextBlock {width: 100%; padding-left: 10px; padding-right: 10px; text-align: center; order: 3}
.layout_4 .teaser .teaserIcon {position: relative; right: unset; transform: unset; left: unset; top:-70px; order: 2}
.layout_5 .teaser {flex-direction: column-reverse}
.layout_5 .layout_left .hauptbild, .layout_5 .layout_left .hauptbild img {width: 100%; height: 400px; object-fit: cover; object-position: center; margin-bottom: 60px}
.layout_5 .layout_left .buttonAbsolute {right: 50%; transform: translateX(50%); bottom: -20px; height: 190px; top: unset; left: unset}
.layout_5 .layout_teaser {top: 0; margin-top: 100px}
.layout_5 .teaser .teaserImage {display: none}
.layout_5 .teaser .teaserTextBlock {width: 100%; padding-right: 0; padding: 0 20px; text-align: center; margin-top: 0}
.layout_5 .teaser .teaserTextBlock h3 {font-size: 32px; line-height: 36px; font-weight: 600}
.layout_6 .contentInnen {flex-direction: column}
.layout_6 .contentInnen .layout_left {width: 100%;}
.layout_6 .contentInnen .layout_left .buttonAbsolute {right: 50%; transform: translateX(50%); bottom: -20px; height: 190px; top: unset; left: unset}
.layout_6 .contentInnen .layout_left .hauptbild, .layout_6 .contentInnen .layout_left .hauptbild img {width: 100%; height: 400px; object-fit: cover; object-position: center; margin-bottom: 60px;}
.layout_6 .contentInnen .textContent {width: 100%; padding-left: 0; padding: 0 20px; text-align: center; margin-top: 100px}
.layout_6 .contentInnen .textContent h2 {font-size: 32px; font-weight: 600; line-height: 36px}
.circleNavOuter {width: 100%}
.circleNavOuter .circleNavInner {width: 100%; display: flex; flex-direction: column; align-items: center}
.circleNavOuter .circleNavInner .circleNavElem .arrow, .circleNavOuter .circleNavInner .circleNavElem:hover .arrow_aktiv {display: none}
.circleNavOuter .circleNavInner .circleNavElem {display: block;position: relative; height: auto}
.circleNavOuter .circleNavInner .circleNavElem:nth-of-type(1), .circleNavOuter .circleNavInner .circleNavElem:nth-of-type(1) .innerElem,
.circleNavOuter .circleNavInner .circleNavElem:nth-of-type(2), .circleNavOuter .circleNavInner .circleNavElem:nth-of-type(2) .innerElem,
.circleNavOuter .circleNavInner .circleNavElem:nth-of-type(3), .circleNavOuter .circleNavInner .circleNavElem:nth-of-type(3) .innerElem,
.circleNavOuter .circleNavInner .circleNavElem:nth-of-type(4), .circleNavOuter .circleNavInner .circleNavElem:nth-of-type(4) .innerElem,
.circleNavOuter .circleNavInner .circleNavElem:nth-of-type(5), .circleNavOuter .circleNavInner .circleNavElem:nth-of-type(5) .innerElem,
.circleNavOuter .circleNavInner .circleNavElem:nth-of-type(6), .circleNavOuter .circleNavInner .circleNavElem:nth-of-type(6) .innerElem,
.circleNavOuter .circleNavInner .circleNavElem:nth-of-type(7), .circleNavOuter .circleNavInner .circleNavElem:nth-of-type(7) .innerElem,
.circleNavOuter .circleNavInner .circleNavElem:nth-of-type(8), .circleNavOuter .circleNavInner .circleNavElem:nth-of-type(8) .innerElem {top: unset; left: unset; right: unset; bottom: unset; transform: unset; flex-direction: column; width: 100%}
.circleNavOuter .circleNavInner .circleNavElem .innerElem {position: relative; margin-top: 20px}
.circleNavOuter .circleNavInner .circleNavElem .innerElem .name {text-align: center !important;}
.circleNavOuter .circleNavInner .circleNavElem .innerElem .name br {display: none}
.circleNavOuter .circleNavInner .circleNavElem .innerElem .icon, .circleNavOuter .circleNavInner .circleNavElem .innerElem .icon_aktiv {max-height: 40px; max-width: 40px}
#faqs .faqheadlines .faqheadline:last-child {margin-bottom: 20px}
.pt_0{padding-top:0px !important; display: block; width: 100%; height: 0px}
.pt_1{padding-top:10px !important; display: block; width: 100%; height: 0px}
.pt_2{padding-top:25px !important; display: block; width: 100%; height: 0px}
.pt_3{padding-top:50px !important; display: block; width: 100%; height: 0px}
.pt_4{padding-top:79px !important; display: block; width: 100%; height: 0px}
.pt_5{padding-top:120px !important; display: block; width: 100%; height: 0px}
.pt_6{padding-top:150px !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:10px !important; display: block; width: 100%; height: 0px}
.pb_2{padding-bottom:25px !important; display: block; width: 100%; height: 0px}
.pb_3{padding-bottom:50px !important; display: block; width: 100%; height: 0px}
.pb_4{padding-bottom:90px !important; display: block; width: 100%; height: 0px}
.pb_5{padding-bottom:120px !important; display: block; width: 100%; height: 0px}
.pb_6{padding-bottom:150px !important; display: block; width: 100%; height: 0px}
.imgfloatleft {float: none}
#lastLine .inner, #lastLine .inner ul {flex-direction: column}
#lastLine .inner .left {display: none}
#lastLine .inner .right ul li.small {text-align: right; padding-right: 10px}
#baustelle .baustelleHead .eroffnung { left: 20px; top: 10px}
#baustelle .baustelleHead .logo {right: 20px; top: 20px}
.content.split .imageSection {display: none}
.content.split .contentsection {width: 100%}
.content#projekte, .content.split#projekte, .content.split.splitRight#projekte {flex-direction: column; min-height: 0;}
.content.split .contentsection, .content.split.splitRight .contentsection {padding: 100px 20px}
.buttonSection.split, .buttonSection.split.splitRight {width: 100%; display: flex; justify-content: center; margin: 40px 0px; height: auto}
.buttonSection.split a, .buttonSection.split.splitRight a {position: relative; top: 0px; left: auto; right: auto}
#navMobile, #navMobile #navMobileMenu {background-color:var(--green);/* position: absolute; */top: 0px;position: fixed;z-index: 99999;}
#navMobile #navMobileMenu.visible {transform: translateX(0%)}
#navMobile #navMobileMenu .menuMobile ul {height: 70%; display: flex; flex-direction: column; justify-content: space-around; align-items: center; }
#navMobile #navMobileMenu .menuMobile ul li {list-style-type:none; padding: 0px 25px; color: #fff; opacity: 0; transition: 1.4s ease-in-out}
#navMobile #navMobileMenu.visible .menuMobile ul li {opacity: 1}
#navMobile #navMobileMenu.visible .menuMobile ul li:nth-of-type(8n-7) {transition-delay: 100ms}
#navMobile #navMobileMenu.visible .menuMobile ul li:nth-of-type(8n-6) {transition-delay: 200ms}
#navMobile #navMobileMenu.visible .menuMobile ul li:nth-of-type(8n-5) {transition-delay: 300ms}
#navMobile #navMobileMenu.visible .menuMobile ul li:nth-of-type(8n-4) {transition-delay: 400ms}
#navMobile #navMobileMenu.visible .menuMobile ul li:nth-of-type(8n-3) {transition-delay: 500ms}
#navMobile #navMobileMenu.visible .menuMobile ul li:nth-of-type(8n-2) {transition-delay: 600ms}
#navMobile #navMobileMenu.visible .menuMobile ul li:nth-of-type(8n-1) {transition-delay: 700ms}
#navMobile #navMobileMenu .menuMobile ul li a { padding-left:5px; margin-bottom:5px; padding-top:5px; width:100%; display:block; color: #fff; font-size:32px; text-decoration: none}
#navMobile #navMobileMenu .menuMobile ul li.aktiv {font-weight:bold}
#contentOuter {background-image: none; margin-top: -40px}
#contentHome {margin-top:0px; background-color: #fff9f5}
#contentHome img {width:100%}
#content, .content {margin: 0px auto; 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}
.videoBanner {height: calc(100vw * 0.5625); width: 100%}
#projektevideo {height: calc(100vw * 0.5625); width: 100%}
#kundenGrid, #partnerGrid {width: 100%; max-width: 100%}
#kundenGrid .kunde, #partnerGrid .partner {width: 300px}
.slick-prev {left: -30px !important; background-image: none; width: 20px}
.slick-next {right: -30px !important; background-image: none; width: 20px}
.slick-prev::before {content: "â†"; color: black}
.slick-next::before {content: "→"; color: black}
#kundenGrid .slick-prev, #partnerGrid .slick-prev {left: -10px !important;}
#kundenGrid .slick-next, #partnerGrid .slick-next {right: -10px !important;}
#angebotGrid {width: 500px; margin: 0px auto}
#angebotGrid .angebot {width: 500px; height: 500px; margin-top: 0px;}
.tarifeOuter {flex-wrap: wrap; margin-top: 40px}
.tarifeOuter .tarif {margin-bottom: 60px}
.hr {margin: 20px 0px}
.projektBox {height: auto; padding: 20px}
.kontakt {margin-bottom: 0px; padding: 40px 0px}
#adresse #adresseInnen { font-size: 12px}
#adresse .normal {float:none}
#adresse .footerNav {float:none; padding-top: 5px}
#adresse a {text-decoration: none;}
adresse #adresseInnen .left, #adresse #adresseInnen .right {width: 35%}
#adresse #adresseInnen .center {width: 30%}
#adresse #adresseInnen .center .logo {width: 70%}
#adresse {
box-shadow:none;
margin:0;
padding-left: 0;
padding-top: 20px
}
#adresse #adresseInnen .left {display: none}
#adresse #adresseInnen .center {width: 100%}
#adresse #adresseInnen .right {display: none}
body[data-aos-duration="400"] #adresse[data-aos] {transition-duration: 0s}
.formtabelle {margin-top:20px}
.formtabelle tr td {clear:both; display:block}
input{ width:100%; border-radius:2px}
.anabmelden {float:left; margin-right:10px; border:0px }
#newslettersubmit {width:162px; text-align:center}
#password {width:123px; margin-top:5px; color:#87888a; font:100% Helvetica, Arial, sans-serif; padding-left:3px}
#commentsUser {width:100%}
#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}
.postFull .postImage {height:auto; width:273px;}
.postFullText {width:90%; height:auto; padding:10px; min-width:0px; min-height:0px;}
.postFullText .postFullTextContent {padding-left:10px}
.postFullText .postFullTextContent p {margin-left: 0px !important}
.contentAfter hr {width:auto !important}
}
@media (max-height:900px) {
.menu ul li.langChange {
position: absolute;
right: 15px;
}
}
@media (max-height:780px) {
.menu {
overflow-y: scroll;
padding-right: 60px;
}
}
@media (max-width:900px) {
* h2 {font-size: 28px !important}
* h3 {font-size: 25px !important}
.tags {padding-left: 20px; padding-right: 20px}
.layout_5 .layout_teaser {top: 0;margin-top: 0px !important;}
table.preise tr th {padding: 30px}
table.preise tr td {padding: 10px}
#baustelle {height: auto; min-height: 100vh}
#baustelle .baustelleHead {height: 150px}
#baustelle .baustelleContent {height: auto; min-height: calc(100vh - 150px);}
.tableOuter { max-width: 100%;overflow: hidden; clear: both;overflow-x: scroll;}
.tableOuter .preise {width: auto;min-width: 100%;}
.tableOuter .preise tr td {padding: 30px}
}
@media (max-width:700px) {
.logo {display: none}
.topline .topButton.noMobile {display: none}
#obenOuter .topline .topButton {width: 55px;}
#obenOuter .topButton.tel.mobileOnly {width: 35px !important}
section .topline .topButton.buchen {width: auto;}
.topline .topButton.mobileOnly {display: block; width: 35px;}
.topline .balkenLeft .topButton.mail {display: none}
body.start_0 .contentAfter, .content_part_informationen {padding-left: 20px; padding-right: 20px}
body.start_1 .teaserIcon {text-align: center}
.topline .topButton.buchen .text {display: none}
.topline .topButton.buchen .icon {display: block}
.menu ul li.subarrow {margin-bottom: 20px}
.menu ul li.subarrow.mobileOnly {display:block}
.zimmer {padding: 0 10px}
.zimmer .images {margin-top: 70px}
.zimmer h1 {font-size: 32px;}
.headerGallery span.pos_mm {justify-content: flex-end; padding-bottom: 35%}
.flexslider .slides img.mobileOnly.mobileLogo {display: block; position: absolute; top: 15%; width: 400px; max-width: 85%; left: 50%; transform: translateX(-50%);}
.split {flex-wrap: wrap;}
.split .left, .split .right {width: 100%; padding: 0}
.split h2 {font-size: 44px; line-height: 60px}
.beige h1 {justify-content: flex-start}
.beige h1 .beigeBox {margin-right: 0;}
.inputBlock select.small {width: 30%}
.kinder {margin-bottom: 20px}
.kinder span {display: block; clear: both}
.kinder span input {width: 100% !important}
#kundenGrid .kunde, #partnerGrid .partner {width: 100%}
#kundenGrid .kunde {height: 570px; justify-content: flex-start}
#kundenGrid .kunde .bottom {height: auto;margin-top: 10px}
#kundenGrid .kunde .top {height: auto;}
#kundenGrid .slick-prev, #partnerGrid .slick-prev {left: -10px !important;}
#kundenGrid .slick-next, #partnerGrid .slick-next {right: -10px !important;}
#partnerGrid .partner a {display: flex; justify-content: center}
#partnerGrid .partner a .partnerImg {width: 90%}
.projektBox {justify-content: center; height: auto; flex-wrap: wrap; padding: 20px; margin-top: 5vh}
.projektBox .projektText {font-size: 30px; margin-bottom: 10px}
#formularOuter {
flex-wrap: wrap;;
}
#formularOuter #eform {width: 100%;}
#formularOuter .kontaktDaten {padding-left: 0px;}
.imageGrid img {width: 50%;}
.imageGrid.team-img img {width: 50%;}
#adresse .footerNav a {margin: 0}
.socialIcons a {width: 54px}
.socialIcons a:first-child {width: 38px}
}
@media (max-width: 600px) {
#baustelle {height: auto; min-height: 100vh}
#baustelle .baustelleHead {height: 100px}
#baustelle .baustelleContent {height: auto; min-height: calc(100vh - 100px); background-position-y: center; padding: 80px 0}
#baustelle .baustelleContent .blueBox {padding: 10px;font-size: 16px; line-height: 18px}
#baustelle .baustelleContent .blueBox .hlike {font-size: 54px; line-height: 56px; margin-bottom: 40px; letter-spacing: 2px}
#baustelle .baustelleContent .blueBox .big {font-size: 20px; line-height: 22px; font-weight: bold; margin-bottom: 20px; letter-spacing: 1px}
#baustelle .baustelleContent .blueBox .abril {font-size: 26px; letter-spacing: 2px; margin-top: 20px; }
}
@media (max-width: 500px) {
body {font-size: 16px}
#nav {padding: 0 10px; padding-top: 90px; min-width: unset}
.layout_8 h1, .layout_8 h2 {margin-bottom: 30px; font-size: 32px; font-weight: 600}
.contentInnen .textContent {padding: 0 20px}
.menu ul li a {font-size: 1.1rem}
.menu ul li.subarrow {margin-bottom: 20px}
.menu ul li.navWithIcon img {width: 60px}
.inline-nav {top: unset; margin-top: 20px; display: block}
.inline-nav .navigationImg, .inline-nav.zimmerNav .navigationImg {width: 100%; height: 100vw; margin-top: 20px}
.inline-nav .navigationImg img, .inline-nav.zimmerNav .navigationImg img{width: 100%; height: 100%; object-fit: cover; object-position: center}
.layout_1 .contentInnen .textContent .buttonAbsolute {height: 150px;}
.layout_1 .contentInnen .textContent .buttonAbsolute img {height: 100%;}
#adresse .left .footerNav {margin-bottom: 10px}
#adresse #adresseInnen .right .socials {margin-bottom: 20px}
#adresse #adresseInnen .center .logo {width: 100%}
#angebotGrid {width: 300px;}
}
@media (max-width: 400px) {
h1 {font-size: 20px; line-height: 20px}
.buttonOuter {width: 275px; max-width: 100%}
}
@media (max-width: 370px) {
#logo {height: 40%;}
#logoText {font-size: 10px}
h1, #start h1 {font-size: 32px; line-height: 38px}
h2 {font-size: 16px}
.content#start .contentsection {padding-top: 40px}
#start .buttonOuter {margin-top: 30px;}
.buttonOuter {height: 60px}
#angebotGrid {width: 280px}
.slick-prev {left: -20px !important;}
.slick-next {right: -20px !important;}
.split h2 {font-size: 32px; line-height: 40px}
.projektBox .projektText {font-size: 24px; line-height: 30px}
}