@charset "utf-8";
/* CSS Document */

body {margin: 0; padding: 0; font-family: 'ProximaNova'; font-size: 19px; color: #4a4a4a;}

img {width: 100%; height: auto; border: 0; display: block;}
h2, h3, h4, h5, h6 {font-family: 'ProximaNova'; margin: 0 0 30px 0;}
h1 {font-size: 34px; text-transform: uppercase; letter-spacing: 0.2em; font-weight: 700; text-align: left;} 
h1 {margin: 0 0 40px 0;;}
h2 {margin: 0 0 40px 0; font-size: 26px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700;}
h3 {font-size: 24px; text-transform: none; letter-spacing: 0.1em; font-weight: 400; margin: 0 0 40px 0;}
.h-bold {font-weight: 900;}

p {font-size: 19px; letter-spacing: 0.025em; line-height: 28px; margin: 0 0 30px 0; font-weight: 400;}
hr {height: 3px; color: #4a4a4a; background-color: #4a4a4a; border: 0; margin: 30px 0;}
a.link {background-color: #4a4a4a; border: 1px #4a4a4a solid; color: #fff; padding: 4px 8px; text-decoration: none;}
a.link:hover {background-color: transparent; color: #4a4a4a;}

h1.aktion {text-align: center; margin: 30px auto 90px auto;}
@media screen and (max-width: 470px){
h1.aktion {font-size: 24px;}
}


.clearer::after {content: ""; display: table; clear: both;}
.font-bold {font-weight: 700;}

.adress-master {width: 100%;}
.adress-box {width: 50%; max-width: 630px; float: left;}
.adress-box a {color: #4a4a4a; text-decoration: none;}
.adress-box a:hover {text-decoration: underline;}
.impress-data {margin: 0;}
@media screen and (max-width: 740px){
.adress-box {width: 100%; float: none;}
.impress-data {margin: 0 0 30px 0;}
}
@media screen and (max-width: 610px){
.datenschutz_h1 {letter-spacing: normal; font-size: 26px;}
.datenschutz_cont h2 {letter-spacing: normal; font-size: 22px;}
.datenschutz_cont li {font-size: 19px; line-height: 28px;}
.datenschutz_cont ul {margin: 0 0 40px 0;}
}

.content a {color: #4a4a4a; text-decoration: none;}
.content a:hover {text-decoration: underline;}


.location {position: fixed; right: 0; top: 50%; background-color: #4a4a4a; padding: 10px 13px; box-sizing: border-box; cursor: pointer; z-index: 1000;}
.location img {max-width: 24px; width: 100%;}
.location:hover {opacity: 0.85;}

.section1 {width: 100%; position: relative;}
.color-up {width: 100%; background-color: #A3A3A3; position: relative; z-index: 100; overflow: hidden; background-image: url("../../../images/backgrounds/hg-section1-wanted.jpg"); background-position: center center;}
.pattern {width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(255,255,255,0.50);}
.inner-cu-master {width: 92%; max-width: 1260px; position: relative; z-index: 110; margin: 0 auto; padding: 160px 0;}
.color-up-left, .color-up-right {width: 50%; max-width: 630px; float: left; position: relative;}
.color-up-right img {max-width: 420px; margin: 10% auto 0 auto;}
.color-up-left img {width: 100; max-width: 500px; position: relative;}
@media screen and (max-width: 950px){
.color-up-left, .color-up-right {width: 100%; float: none; margin: 0 auto;}
.inner-video-master {padding: 65px 0;}
.color-up-left img {max-width: 630px;}
.inner-cu-master {padding: 65px 0;}
}
@media screen and (max-width: 550px){
.color-up-right img {max-width: 320px; width: 70%;}
}

.aktion-master {width: 100%;}
.aktionfelder {width: 45%; max-width: 567px; float: left; box-sizing: border-box; border: 1px #4a4a4a solid;}
.aktionfelder:first-child {margin-right: 10%;}

.section-solarien-white, .section-solarien-beige, .section-2ebenen, .section-relax {width: 100%; position: relative;}
.first-h2 {font-size: 26px; letter-spacing: normal; max-width: 860px; margin: 0 auto 80px auto; text-align: center;}
.first-h2 b {font-weight: 700;}
.section-solarien-white {background-color: #fff;}
.section-solarien-beige {background-color: #fbf6f4;}
.section-solarien-inner {width: 92%; max-width: 1260px; margin: 0 auto; position: relative; padding: 60px 0; z-index: 10;}
.section-solarien-teiler {width: 50%; max-width: 630px; float: left;}
.section-inner {width: 92%; max-width: 1260px; margin: 0 auto; position: relative; padding: 56px 0 90px 0;}
.section-teiler-left {width: 50%; max-width: 630px; float: left;}
.section-teiler-right {width: 50%; max-width: 630px; float: right;}
.relax-bild, .relax-bild-r {max-width: 280px;}
.relax-bild-r {float: right;}
.relax-bild-r::after {content: ""; display: t; clear: right;}
.relax-text {max-width: 480px; margin-top: 12%;}
.relax-text-r {box-sizing: border-box; padding-left: 12%;}
.ss-bild-left, .ss-bild-right {box-sizing: border-box;}
.ss-bild-left {padding-right: 10%;}
.ss-bild-right {padding-left: 12%;}
.ss-info {display: table; float: left; padding: 17px 0; position: relative; border-top: 1px #4a4a4a solid; margin-left: 45px; font-weight: 700; font-size: 20px;}
.ss-info:first-child {margin-left: 0;}
.ss-info:last-child {border-top: none;}

.h1barpreis {font-size: 42px; font-weight: 900; text-transform: uppercase; text-align: center; margin: 20px 0 0 0;}
.h2kategorie {font-size: 42px; font-weight: 100; text-transform: uppercase; text-align: center; margin: 0px 0px 60px 0px;}
.preise-main {position: relative;}
.preise-master {background-color: rgba(244,243,244,0.75); box-sizing: border-box; padding: 0 0 20px 0; position: relative; z-index: 100;}
.preise-headline {background: linear-gradient(90deg, #f0e6e2 40%, transparent); box-sizing: border-box; font-weight: 900; padding: 10px 0px 10px 30px; margin: 0 0 20px 0;}
.minPreise {box-sizing: border-box; padding: 0 0 10px 30px;}
.minPreise::after {content: ""; display: table; clear: left;}
.minuten, .minPreis {float: left; width: 80px;}
.minPreis {text-align: right;}
h2.preise-relax-extraheadline {font-size: 42px; font-weight: 100; text-transform: uppercase; text-align: center; margin: 40px 0 0 0;}
h3.preise-relax-extraheadline2 {font-size: 24px; font-weight: 100; text-transform: uppercase; text-align: center; margin: -5px 0 20px 0;}
.relax-highlights-colorHG {background: linear-gradient(90deg, transparent, #f0e6e2 40%, transparent); padding: 5px 0; font-weight: 600; margin: 0 auto; width: 70%; position: relative; text-align: center;}
.relax-highlights-NOcolorHG {padding: 5px 0; font-weight: 600; margin: 0 auto; width: 70%; position: relative; text-align: center;}
.preise-sessel {width: 70%; max-width: 600px; margin: 50px auto;}


.hg-preise {position: absolute; top: 0; right: 0; height: 100%; width: 100%; z-index: 10; background-image: url("../../../images/backgrounds/hg-preise1.webp"); background-repeat: no-repeat; background-position: right top; background-size: auto 100%;}
.hg-preise-left {transform: scaleX(-1);}
.sun-preise {position: absolute; right: -15%; top: -110px; width: 50%; max-width: 500px; z-index: 200;}
@media screen and (max-width: 1640px){
.sun-preise {right: 0;}
}
@media screen and (max-width: 1200px){
.h2kategorie {margin: 0 0 120px 0;}
}
@media screen and (max-width: 555px){
.h2kategorie {margin: 0 0 340px 0;}
.sun-preise {right: 50%; transform: translateX(50%); width: 70%; top: -320px; min-width: 320px;}
}
@media screen and (max-width: 400px){
h2.preise-relax-extraheadline {font-size: 36px;}
h3.preise-relax-extraheadline2 {font-size: 21px;}
.relax-highlights-colorHG, .relax-highlights-NOcolorHG {width: 90%; font-size: 15px;}
}


.s2ebenen-hg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("../../../images/sonnenbaenke/relax/hg-info1.png"); background-repeat: no-repeat; background-position: right bottom; background-size: auto 100%; z-index: 1; opacity: 0.5;}
.s2ebenen-hg2 {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("../../../images/sonnenbaenke/relax/hg-info2.png"); background-repeat: no-repeat; background-position: left bottom; background-size: auto 100%; z-index: 1; opacity: 0.5;}

.with-underline::after {content: ""; width: 100px; height: 5px; background: linear-gradient(90deg, #4a4a4a 50%, transparent); position: absolute; bottom: 0; left: 0;}
.price-left, .price-right {background-color: #888787; box-sizing: border-box; padding-top: 9.5px; padding-bottom: 9.5px; position: relative; color: #fff; margin: 30px 0; display: table;}
.price-left {border-top-right-radius: 32.5px; border-bottom-right-radius: 32.5px; padding-right: 40px;}
.price-right {border-top-left-radius: 32.5px; border-bottom-left-radius: 32.5px; padding-left: 40px; float: right;}
.price {display: table; float: left; margin-right: 30px;}
.price-left::after {content: ""; height: 65px; width: 150px; background: linear-gradient(90deg, transparent, #888787 70%); position: absolute; top: 0; left: -150px;}
.price-right::after {content: ""; height: 65px; width: 150px; background: linear-gradient(90deg, #888787 30%, transparent); position: absolute; top: 0; right: -150px;}

.sun {position: absolute; top: 0; right: 0; background-color: #4a4a4a; box-sizing: border-box; padding: 20px 80px 20px 20px; border-bottom-left-radius: 90px; border-top-left-radius: 90px;}
.sun img {max-width: 140px; width: 100%;}


/* Formmailer */
.kontakt-form {width: 100%; max-width: 1260px; margin: 0 auto;}
.kontaktform .rsform-block-standorte .formControls label, .kontaktform .rsform-block-anstellungsform .formControls label {font-size: 17px; margin: 0 15px 0 0;}
.kontaktform .formRequired {display: none;}
.kontaktform .formControlLabel {font-size: 17px; font-weight: bold;}
.kontaktform .formResponsive input[type="text"] {width: 100%; margin-top: 10px; box-shadow: 0 0 0 0 transparent; border-radius: 0; height: 60px; line-height: 60px; border: 1px #4a4a4a solid; font-size: 20px;}
.kontaktform .rsform-block-freude h3 {text-transform: uppercase; text-align: center; font-size: 40px; letter-spacing: 0.2em; margin: 20px 0 40px 0;}
.kontaktform .smal-pp {font-size: 13px; letter-spacing: 0.1em; max-width: 536px; text-align: center; margin: 0 auto 40px auto; line-height: 22px;}
.kontaktform .smal-pp a {color: #6a6a6a; text-decoration: underline;}
.kontaktform .smal-pp a:hover {color: #4a4a4a; text-decoration: none;}
.kontaktform .formResponsive button[type="submit"] {padding: 15px 26px; border: 1px #4a4a4a solid; position: relative; color: #4a4a4a; text-decoration: none; font-weight: 600; text-transform: uppercase; transition: all 0.6s ease 0s; border-radius: 0; font-size: 20px; background-color: transparent;}
.kontaktform .formResponsive button[type="submit"]:hover {background-color: #4a4a4a; color: #fff; transition: all 0.6s ease 0s;}
.kontaktform .rsform-block-senden {text-align: center;}

/*.kontaktform .formResponsive .formRow .formSpan6 {width: 48%;}
.kontaktform .formResponsive .formRow [class*="formSpan"] {margin-left: 4%;}*/
.kontaktform .formResponsive .formRow [class*="formSpan"]:first-child {margin-right: 0;}
.kontaktform .formResponsive textarea {background-color: #fff; border: 1px #4a4a4a solid; border-radius: 0; box-shadow: 0 0 0 0 transparent; width: 100%; min-height: 250px;}

.office-open-breaker {display: none;}

.rsfp_thankyou_popup_inner .rsform-thankyou-button {font-family: 'ProximaNova'; font-weight: 700; text-transform: uppercase; font-size: 20px!important; box-sizing: border-box; padding: 12px 18px!important; color: #fff!important; background-color: #4a4a4a!important; border: 0!important; border-radius: 0!important; margin: 0 auto!important; display: table!important;}
.rsfp_thankyou_popup_inner {padding: 60px 25px 20px 25px!important; max-width: 400px; display: table;}
.rsfp_thankou_popup_close_btn {right: auto!important; left: 50%; transform: translateX(-50%); font-size: 40px!important; font-weight: 700!important;}

.kontaktform .rsform-type-captcha {max-width: 200px; margin: 0 auto;}
.kontaktform .rsform-captcha-box {max-width: 200px; box-sizing: border-box!important; margin: 0 auto;}
.kontaktform .rsform-captcha-refresh-button {font-size: 30px; box-sizing: border-box; padding: 6px 12px; color: #fff; background-color: #4a4a4a; margin: 20px auto 60px auto; display: table;}
.kontaktform h2 {display: none;}

@media screen and (max-width: 650px){
.kontaktform .formResponsive input[type="text"], .kontaktform .formResponsive textarea {box-sizing: border-box;}
p.formDescription {margin: 0 0 10px 0;}
}
@media screen and (max-width: 400px){
.office-open-breaker {display: block;}
}


/* Footer */
.footer {width: 100%; padding: 100px 0 80px;}
.footer-inner {width: 92%; max-width: 1260px; margin: 0 auto;}
.footer-grey-bar {background-color: #4a4a4a; color: #fff; text-align: center; text-transform: uppercase; padding: 15px 10px; box-sizing: border-box;}
.footer-kontakt {width: 100%; max-width: 1260px; padding-bottom: 100px;}
.footer-tel, .footer-adress, .footer-mail {width: 33.333333%; max-width: 420px; float: left; text-align: center; padding-top: 70px; font-weight: 600;}
.footer-icon {max-width: 32px; width: 100%; margin: 0 auto 30px auto;}
.footer-name {margin: 0 0 10px 0; font-weight: 600;}

.footer-adress .breaker {display: none;}



.last-line {border-top: 1px #4a4a4a solid; padding-top: 50px; font-size: 16px;}
.back-to-top {display: table; float: left; cursor: pointer;}
.back-to-top .fa {margin-left: 15px;}
.back-to-top:hover {text-decoration: underline;}
.footer-links {display: table; float: right; text-transform: uppercase;}
.footer-links .trenner {margin: 0 16px;}
.footer-links a, .footer-mail a, .footer-tel a, .footer-adress .hh-location {color: #4a4a4a; text-decoration: none;}
.footer-links a:hover, .footer-mail a:hover, .footer-tel a:hover, .footer-adress .hh-location:hover {text-decoration: underline;}
.hh-location {cursor: pointer;}

@media screen and (max-width: 1021px){
.footer-adress .trenner {display: none;}
.footer-adress .breaker {display: block;}
}
@media screen and (max-width: 750px){
.footer-tel, .footer-adress, .footer-mail {width: 100%; max-width: none; float: none;}
}
@media screen and (max-width: 650px){
.footer-links {float: none; margin: 70px 0 0 0;}
}
@media screen and (max-width: 485px){
.footer-links .trenner {display: none;}
.footer-links a {display: block; margin: 10px 0;}
}


/* Carousel */
.neues-main {width: 92%; max-width: 800px; margin: 0 auto 30px auto; position: relative;}
.neues-master {width: 87.5%; max-width: 700px; margin: 0 auto; /*display: flex; flex-wrap: wrap; justify-content: center;*/ overflow: hidden; white-space: nowrap; box-sizing: border-box; border: 1px #4a4a4a solid;}
.neues-box {width: 100%; max-width: 700px; display: inline-block; white-space: normal; box-sizing: border-box;}
.nb-inner {width: 100%;}
#right-arrow, #left-arrow, #right-arrow2, #left-arrow2 {position: absolute; top: 50%; transform: translateY(-50%); font-size: 56px; font-weight: bold; cursor: pointer;}
#right-arrow, #right-arrow2 {left: 0;}
#left-arrow, #left-arrow2 {right: 0;}
@media screen and (max-width: 700px){
#right-arrow, #right-arrow2 {left: -15px;}
#left-arrow, #left-arrow2 {right: -15px;}
}