@font-face {
font-family: 'SuisseIntl-Book';
src: url('../fonts/SuisseIntl-Book-WebXL.eot'); /* IE9 Compat Modes */
src: url('../fonts/SuisseIntl-Book-WebXL.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/SuisseIntl-Book-WebXL.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/SuisseIntl-Book-WebXL.woff') format('woff'), /* Pretty Modern Browsers */
url('../fonts/SuisseIntl-Book-WebXL.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/SuisseIntl-Book-WebXL.svg#SuisseIntl-Book') format('svg'); /* Legacy iOS */
font-display: swap;
}
@font-face {
font-family: 'SuisseIntl-SemiBold';
src: url('../fonts/SuisseIntl-SemiBold-WebXL.eot'); /* IE9 Compat Modes */
src: url('../fonts/SuisseIntl-SemiBold-WebXL.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/SuisseIntl-SemiBold-WebXL.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/SuisseIntl-SemiBold-WebXL.woff') format('woff'), /* Pretty Modern Browsers */
url('../fonts/SuisseIntl-SemiBold-WebXL.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/SuisseIntl-SemiBold-WebXL.svg#SuisseIntl-SemiBold') format('svg'); /* Legacy iOS */
font-display: swap;
}
@font-face {
font-family: 'SuisseWorks-Book';
src: url('../fonts/SuisseWorks-Book-WebXL.eot'); /* IE9 Compat Modes */
src: url('../fonts/SuisseWorks-Book-WebXL.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/SuisseWorks-Book-WebXL.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/SuisseWorks-Book-WebXL.woff') format('woff'), /* Pretty Modern Browsers */
url('../fonts/SuisseWorks-Book-WebXL.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/SuisseWorks-Book-WebXL.svg#SuisseWorks-Book') format('svg'); /* Legacy iOS */
font-display: swap;
}
@font-face {
font-family: 'SuisseWorks-Bold';
src: url('../fonts/SuisseWorks-Bold-WebXL.eot'); /* IE9 Compat Modes */
src: url('../fonts/SuisseWorks-Bold-WebXL.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/SuisseWorks-Bold-WebXL.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/SuisseWorks-Bold-WebXL.woff') format('woff'), /* Pretty Modern Browsers */
url('../fonts/SuisseWorks-Bold-WebXL.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/SuisseWorks-Bold-WebXL.svg#SuisseWorks-Bold') format('svg'); /* Legacy iOS */
font-display: swap;
}
/* Allgemein */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,img,ins,kbd,q,s,samp,small,strike,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{font-size:100%;font:inherit;padding:0;border:0;margin:0;vertical-align:baseline}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}.clear{clear:both}
* {
margin:0;
padding:0;
outline:none;
}
.screen-reader-text {
clip:rect(1px, 1px, 1px, 1px);
position:absolute !important;
}
img {
max-width:100%;
height:auto;
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background:#2F2E33;
}
#header {
background:#2F2E33;
position: fixed;
top:0;
left:0;
width:100%;
z-index: 99999;
}
#header-inner {
margin:0 auto;
max-width:704px;
height:61px;
padding:0 32px;
display: flex;
justify-content: center;
align-content: flex-end;
align-items: flex-end;
position: relative;
}
#logo {
position: absolute;
top:14px;
left:32px;
}
#logo img {
display: block;
height:35px;
width:auto;
}
#main-nav {
width:496px;
margin-bottom:-4px;
}
#main-nav ul {
display: flex;
justify-content: center;
}
#main-nav ul li {
width:calc(25% - 16px);
margin:0 8px;
border-bottom: 4px solid #909090;
position: relative;
}
#main-nav ul li.active, #main-nav ul li:nth-child(1) {
border-bottom: 4px solid #F07D00;
}
#main-nav ul li a {
display: block;
padding:8px 0 6px 0;
font-family: 'SuisseIntl-Book';
font-size:14px;
line-height: 24px;
color:#D8D8D8;
text-align: center;
text-decoration: none;
}
#main-nav ul li span.od-progress {
width:100%;
height:4px;
background:#909090;
position: absolute;
right:0;
bottom:-4px;
transition: width .2s ease;
}
#main-nav ul li span.od-progress {
width:80%;
transition: width .2s ease;
}
#main-nav ul li a span {
white-space: nowrap;
}
#main-nav ul li.disabled {
display: none;
}
#main-nav ul li span.od-progress.s2 {
width:60%;
transition: width .2s ease;
}
#main-nav ul li span.od-progress.s3 {
width:40%;
transition: width .2s ease;
}
#main-nav ul li span.od-progress.s4 {
width:20%;
transition: width .2s ease;
}
#main-nav ul li span.od-progress.s5 {
width:0;
transition: width .2s ease;
}
#main-nav.all_clear ul li, #main-nav.kclear ul li:nth-child(2), #main-nav.fclear ul li:nth-child(2), #main-nav.fclear ul li:nth-child(3) {
border-bottom: 4px solid #F07D00;
}
#main-nav.all_clear ul li span.od-progress, #main-nav.fclear ul li span.od-progress, #main-nav.sclear ul li span.od-progress, #main-nav.kclear ul li:nth-child(1) span.od-progress, #main-nav.fclear ul li:nth-child(1) span.od-progress {
background:#F07D00;
}
#contact {
position: absolute;
right:32px;
bottom:10px;
}
#container {
padding-top:61px;
}
#content {
background:#38373E;
padding:58px 32px 78px 32px;
}
#content.rapport-content {
padding:58px 32px 0 32px;
}
#content-inner {
margin:0 auto;
max-width:704px;
position: relative;
}
#content.rapport-content #content-inner {
padding-bottom:130px;
}
.form-text {
margin:0 auto 48px auto;
max-width:480px;
}
.form-text h1, .form-text h2 {
font-family: 'SuisseIntl-SemiBold';
font-size:34px;
line-height: 44px;
color:#fff;
margin:0 0 5px 0;
}
.form-text p {
font-family: 'SuisseIntl-Book';
font-size:16px;
line-height: 22px;
color:#aaa;
margin:0 0 20px 0;
}
#footer {
text-align: center;
padding:30px 32px;
background:#2F2E33;
}
#copyright {
font-family: 'SuisseIntl-Book';
font-size:12px;
line-height: 20px;
color:#909090;
}
#fmenu ul {
text-align: center;
font-size:0;
}
#fmenu ul li {
display: inline-block;
}
#fmenu ul li:before {
display: inline-block;
content:"|";
font-family: 'SuisseIntl-Book';
font-size:12px;
line-height: 20px;
color:#909090;
margin:0 5px;
}
#fmenu ul li:nth-child(1):before {
display: none;
}
#fmenu ul li a {
font-family: 'SuisseIntl-Book';
font-size:12px;
line-height: 20px;
color:#909090;
text-decoration: none;
}
#fmenu ul li a:hover {
color:#F07D00;
}
.outputMsg {
color:#ff0000;
border:1px solid #ff0000;
padding:20px;
font-family: 'SuisseIntl-SemiBold';
font-size: 14px;
line-height: 18px;
text-align: center;
margin:30px auto;
max-width:704px;
}
/******************************************** pv **************************************************/
/* pv: Alt-Neu-Auswahl jetzt ausblenden da jetzt das "Was wünschen Sie" zuvor kommt */
.step-2, .step-3, .step-4, .step-5, .step-6, .step-7, .step-8, .step-9, .step-10 {
display: none;
}
/* pv: Button als statt */
#step-pv-3-next {
padding-top:40px;
text-align: center;
-webkit-appearance:none;
appearance:none;
font-family: 'SuisseIntl-SemiBold';
font-size: 16px;
line-height: 21px;
color:#fff;
background:#F07D00;
border:1px solid #F07D00;
border-radius: 45px;
padding:10px 28px;
display: inline-block;
cursor: pointer;
}
.disabled > a{
pointer-events: none; /* Verhindert Klicken auf das Element */
color: #551A8B !important; /* Ändert die Textfarbe */
}
.pv_routput, .unit {
margin-bottom: 27px;
color: white;
}
.pv_routput, #formgroup_ausrichtung .unit {
font-size:26px;
letter-spacing:0.13px;
}
.not_valid {
color: red;
}
/* -------------------- Kompass -------------------- */
.compass {
position: absolute;
top:8px;
right:45px;
width: 79px;
height: 80px;
background:url(../img/Icons/kompass.svg) no-repeat center center;
background-size:79px 80px;
}
.needle {
position: absolute;
top: 50%;
left: 50%;
width: 27px;
height: 25px;
background: url(../img/Icons/kompass_haus_2.svg) no-repeat center center;
background-size:27px 25px;
transform-origin: center center;
transform: translate(-50%, -50%) rotate(90deg);
}
/* ---------------- End Kompas ------------------ */
/******************************************** pv **************************************************/
/* Objektdaten */
.big_formgroup {
margin:0 0 60px 0;
position: relative;
}
.formgroup#solar_oder_heizung, .formgroup#auswahl_alt_neu_bau, .formgroup#formgroup_baujahr_input, .formgroup#waermeverteilung_altbau, .formgroup#waermeverteilung_neubau, .formgroup#warmwasser, #wh-group, #dv-group, .report-choice-wrapper, .formgroup#warmwasser, #wv-group, #bd-group, #pso-group, #da-group, #da-group-2 {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin:0 -8px 40px -8px;
}
.formgroup#waermeverteilung_neubau {
margin:0 -8px;
}
#da-group, #da-group-2 {
margin-bottom:20px;
}
#wv-group {
flex-direction: column;
justify-content:flex-start;
}
.report-choice-wrapper {
margin-bottom:60px;
}
.formgroup#auswahl_alt_neu_bau input[type=radio], .formgroup#warmwasser input[type=radio], .report-choice-wrapper input[type=radio], .formgroup#solar_oder_heizung input[type=radio] {
display:none;
}
.formgroup#auswahl_alt_neu_bau input[type=radio] + label, .formgroup#warmwasser input[type=radio] + label, .report-choice-wrapper input[type=radio] + label, .formgroup#solar_oder_heizung input[type=radio] + label {
display:flex;
align-content: center;
align-items: center;
margin:0 8px;
padding:12px 16px 12px 82px;
font-family: 'SuisseIntl-SemiBold';
font-size: 16px;
line-height: 20px;
color: #fff;
text-align: left;
letter-spacing: 0.08px;
vertical-align: middle;
cursor: pointer;
border: 1px solid #504F53;
border-radius: 8px;
width:calc(50% - 116px);
height:52px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
transition: all .1s ease;
}
.formgroup#warmwasser label, .report-choice-wrapper label {
display:flex;
justify-content: center;
align-content: center;
align-items: center;
margin:0 8px;
font-family: 'SuisseIntl-SemiBold';
font-size: 16px;
line-height: 20px;
color: #fff;
text-align: left;
letter-spacing: 0.08px;
cursor: pointer;
width:calc(50% - 16px);
}
.formgroup#solar_oder_heizung input[type=radio] + label {
margin-bottom:16px;
}
.formgroup#warmwasser input[type=radio] + span {
display: flex;
align-content: center;
align-items: center;
padding:12px 16px 12px 82px;
border: 1px solid #504F53;
border-radius: 8px;
width:calc(100% - 100px);
height:52px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
transition: all .1s ease;
}
.report-choice-wrapper input[type=radio] + span {
padding:29px 32px 41px 82px;
border: 1px solid #504F53;
border-radius: 8px;
width:calc(100% - 100px);
height:52px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
transition: all .1s ease;
position: relative;
}
.formgroup#auswahl_alt_neu_bau input[type=radio] + label:hover, .formgroup#warmwasser input[type=radio] + label:hover, .report-choice-wrapper input[type=radio] + label:hover, .formgroup#solar_oder_heizung input[type=radio] + label:hover, .formgroup#warmwasser input[type=radio] + span:hover, .report-choice-wrapper input[type=radio] + span:hover {
border: 1px solid #F07D00;
transition: all .1s ease;
}
/* Neue Icons */
.formgroup#solar_oder_heizung input#radio_heizungsersatz + label {
background: url(../img/Icons/Heizungsersatz.svg) #504F53 no-repeat center left 12px;
background-size:53px 53px;
transition: all .1s ease;
}
.formgroup#solar_oder_heizung input#radio_pv-solaranlage + label {
background: url(../img/Icons/PV-Solaranlage.svg) #504F53 no-repeat center left 12px;
background-size:53px 53px;
transition: all .1s ease;
}
.formgroup#solar_oder_heizung input#radio_solar_und_heizung + label {
background: url(../img/Icons/Solar-Heizung.svg) #504F53 no-repeat center left 12px;
background-size:53px 53px;
transition: all .1s ease;
}
.formgroup#solar_oder_heizung input#radio_heizungsersatz:checked + label {
background: url(../img/Icons/Heizungsersatz-active.svg) #2F2E33 no-repeat center left 12px;
background-size:53px 53px;
transition: all .1s ease;
}
.formgroup#solar_oder_heizung input#radio_pv-solaranlage:checked + label {
background: url(../img/Icons/PV-Solaranlage-active.svg) #2F2E33 no-repeat center left 12px;
background-size:53px 53px;
transition: all .1s ease;
}
.formgroup#solar_oder_heizung input#radio_solar_und_heizung:checked + label {
background: url(../img/Icons/Solar-Heizung-active.svg) #2F2E33 no-repeat center left 12px;
background-size:53px 53px;
transition: all .1s ease;
}
/* Neue Icons - Ende */
.formgroup#auswahl_alt_neu_bau input#radio_alt + label {
background: url(../img/Icons/bhaus.svg) #504F53 no-repeat center left 12px;
background-size:53px 53px;
transition: all .1s ease;
}
.formgroup#auswahl_alt_neu_bau input#radio_neu + label {
background: url(../img/Icons/neubau.svg) #504F53 no-repeat center left 12px;
background-size:53px 53px;
}
.formgroup.altbau#warmwasser input#heizung_1 + span {
background: url(../img/Icons/heizung.svg) #504F53 no-repeat center left 12px;
background-size:53px 53px;
}
.formgroup.altbau#warmwasser input#boiler_0 + span {
background: url(../img/Icons/boiler.svg) #504F53 no-repeat center left 12px;
background-size:53px 53px;
}
.report-choice-wrapper input#report_email + span {
background: url(../img/Icons/email.svg) #504F53 no-repeat top 12px left 12px;
background-size:53px 53px;
}
.report-choice-wrapper input#report_download + span {
background: url(../img/Icons/download.svg) #504F53 no-repeat top 12px left 12px;
background-size:53px 53px;
}
.formgroup#auswahl_alt_neu_bau input[type=radio]:checked + label, .formgroup#warmwasser input[type=radio]:checked + label, .report-choice-wrapper input[type=radio]:checked + label, .formgroup#solar_oder_heizung input[type=radio]:checked + label, .formgroup#warmwasser input[type=radio]:checked + span, .report-choice-wrapper input[type=radio]:checked + span {
background:#2F2E33;
border: 1px solid #F07D00;
color: #F07D00;
transition: all .1s ease;
}
.formgroup#auswahl_alt_neu_bau input#radio_alt:checked + label {
background: url(../img/Icons/bhaus_a.svg) #2F2E33 no-repeat center left 12px;
background-size:53px 53px;
}
.formgroup#auswahl_alt_neu_bau input#radio_neu:checked + label {
background: url(../img/Icons/neubau_a.svg) #2F2E33 no-repeat center left 12px;
background-size:53px 53px;
}
.formgroup.altbau#warmwasser input#heizung_1:checked + span {
background: url(../img/Icons/heizung_a.svg) #2F2E33 no-repeat center left 12px;
background-size:53px 53px;
}
.formgroup.altbau#warmwasser input#boiler_0:checked + span {
background: url(../img/Icons/boiler_a.svg) #2F2E33 no-repeat center left 12px;
background-size:53px 53px;
}
.report-choice-wrapper input#report_email:checked + span {
background: url(../img/Icons/email_a.svg) #2F2E33 no-repeat top 12px left 12px;
background-size:53px 53px;
}
.report-choice-wrapper input#report_download:checked + span {
background: url(../img/Icons/download_a.svg) #2F2E33 no-repeat top 12px left 12px;
background-size:53px 53px;
}
.formgroup#formgroup_baujahr_input #baujahr_input {
display:flex;
align-content: center;
align-items: center;
margin:0 8px;
padding:12px 16px;
font-family: 'SuisseIntl-SemiBold';
font-size: 16px;
line-height: 20px;
color: #fff;
text-align: left;
vertical-align: middle;
border: 1px solid #F07D00;
border-radius: 8px;
width:calc(50% - 50px);
height:52px;
background:#504F53;
opacity:0;
transition: all 0.4s ease;
}
.formgroup#formgroup_baujahr_input #baujahr_input.active {
opacity:1;
transition: opacity 0.4s ease;
}
.formgroup#formgroup_baujahr_input #baujahr_input.valid {
background:#2F2E33;
transition: all 0.4s ease;
}
.formgroup#formgroup_baujahr_input #baujahr_input.valid input#hk_baujahr, .formgroup#formgroup_baujahr_input #baujahr_input.valid label {
color:#F07D00;
transition: all 0.4s ease;
}
.formgroup#formgroup_baujahr_input #baujahr_input label {
margin-left:15px;
}
.formgroup#formgroup_baujahr_input #baujahr_input label.focus {
color:#F07D00;
}
.formgroup#formgroup_baujahr_input #baujahr_input input#hk_baujahr {
-webkit-appearance:none;
appearance:none;
background:none;
border:none;
font-family: 'SuisseIntl-SemiBold';
font-size: 26px;
line-height: 26px;
color: #fff;
width:65px;
}
.formgroup#formgroup_baujahr_input #baujahr_input input#hk_baujahr {
margin-left:20px;
}
.formgroup#formgroup_baujahr_input #baujahr_input input#hk_baujahr::placeholder {
color: #fff;
opacity: 1;
}
.formgroup#waermeverteilung_altbau label, .formgroup#waermeverteilung_neubau label {
position: relative;
width:calc(50% - 16px);
margin:0 8px 20px 8px;
}
.formgroup#waermeverteilung_altbau label#label_RA, .formgroup#waermeverteilung_neubau label#label_RAN {
order:1;
}
.formgroup#waermeverteilung_altbau label#label_BH, .formgroup#waermeverteilung_neubau label#label_BHN {
order:2;
}
.formgroup#waermeverteilung_altbau #kwv_input {
order:3;
}
.formgroup#waermeverteilung_altbau input[type=checkbox], .formgroup#waermeverteilung_neubau input[type=checkbox] {
opacity: 0;
position: absolute;
}
.formgroup#waermeverteilung_altbau span, .formgroup#waermeverteilung_neubau span {
display:flex;
align-content: center;
align-items: center;
padding:12px 16px 12px 82px;
font-family: 'SuisseIntl-SemiBold';
font-size: 16px;
line-height: 20px;
color: #fff;
text-align: left;
letter-spacing: 0.08px;
vertical-align: middle;
cursor: pointer;
border: 1px solid #504F53;
border-radius: 8px;
height:52px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
transition: all .1s ease;
}
.formgroup#waermeverteilung_altbau span:hover, .formgroup#waermeverteilung_neubau span:hover {
border: 1px solid #F07D00;
transition: all .1s ease;
}
.formgroup#waermeverteilung_altbau input#verteilsystem_BH + span {
background: url(../img/Icons/bodenheizung.svg) #504F53 no-repeat center left 12px;
background-size:53px 53px;
}
.formgroup#waermeverteilung_altbau input#verteilsystem_RA + span {
background: url(../img/Icons/radiatoren.svg) #504F53 no-repeat center left 12px;
background-size:53px 53px;
}
.formgroup#waermeverteilung_neubau input#verteilsystem_BHN + span {
background: url(../img/Icons/bodenheizung_neu.svg) #504F53 no-repeat center left 12px;
background-size:53px 53px;
}
.formgroup#waermeverteilung_neubau input#verteilsystem_RAN + span {
background: url(../img/Icons/radiatoren_neu.svg) #504F53 no-repeat center left 12px;
background-size:53px 53px;
}
.formgroup#waermeverteilung_altbau input#verteilsystem_BH:checked + span {
background: url(../img/Icons/bodenheizung_a.svg) #2F2E33 no-repeat center left 12px;
background-size:53px 53px;
border: 1px solid #F07D00;
color: #F07D00;
transition: all .1s ease;
}
.formgroup#waermeverteilung_altbau input#verteilsystem_RA:checked + span {
background: url(../img/Icons/radiatoren_a.svg) #2F2E33 no-repeat center left 12px;
background-size:53px 53px;
border: 1px solid #F07D00;
color: #F07D00;
transition: all .1s ease;
}
.formgroup#waermeverteilung_neubau input#verteilsystem_BHN:checked + span {
background: url(../img/Icons/bodenheizung_neu_a.svg) #2F2E33 no-repeat center left 12px;
background-size:53px 53px;
border: 1px solid #F07D00;
color: #F07D00;
transition: all .1s ease;
}
.formgroup#waermeverteilung_neubau input#verteilsystem_RAN:checked + span {
background: url(../img/Icons/radiatoren_neu_a.svg) #2F2E33 no-repeat center left 12px;
background-size:53px 53px;
border: 1px solid #F07D00;
color: #F07D00;
transition: all .1s ease;
}
.formgroup#waermeverteilung_altbau #kwv_input {
display:flex;
justify-content: center;
align-content: center;
align-items: center;
margin:0 8px;
padding:12px 16px 12px 82px;
font-family: 'SuisseIntl-SemiBold';
font-size: 16px;
line-height: 20px;
color: #fff;
text-align: left;
vertical-align: middle;
border: 1px solid #504F53;
border-radius: 8px;
width:calc(50% - 116px);
height:52px;
background: url(../img/Icons/keine.svg) #504F53 no-repeat center left 12px;
background-size:53px 53px;
cursor: pointer;
}
.formgroup#waermeverteilung_altbau #kwv_input.active {
background: url(../img/Icons/keine_a.svg) #2F2E33 no-repeat center left 12px;
background-size:53px 53px;
border: 1px solid #F07D00;
}
.formgroup#waermeverteilung_altbau #kwv_input.active label {
color:#F07D00;
}
.formgroup#waermeverteilung_altbau #kwv_input label {
width:auto;
margin:0;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#wh-group .formgroup, #dv-group .formgroup, #wv-group .formgroup, #bd-group .formgroup, #pso-group .formgroup, #da-group .formgroup, #da-group-2 .formgroup {
margin:0 8px 20px 8px;
padding:12px 16px 12px 82px;
font-family: 'SuisseIntl-SemiBold';
font-size: 16px;
line-height: 20px;
color: #fff;
text-align: left;
border: 1px solid #504F53;
border-radius: 8px;
width:calc(50% - 116px);
height:74px;
background: #504F53;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
transition: all .1s ease;
}
#bd-group .formgroup#formgroup_stromdd {
width:calc(100% - 116px);
}
#wh-group .formgroup.ranger.active, #dv-group .formgroup.ranger.active, #wh-group .formgroup.ranger-big.active, #dv-group .formgroup.ranger-big.active, #wv-group .formgroup.ranger-big.active {
background: #2F2E33;
border:1px solid #F07D00;
}
#wh-group .formgroup.ranger.focus label, #dv-group .formgroup.ranger.focus label, #wh-group .formgroup.ranger-big.focus label, #dv-group .formgroup.ranger-big.focus label, #wh-group .formgroup.ranger.active label, #dv-group .formgroup.ranger.active label, #wh-group .formgroup.ranger-big.active label, #dv-group .formgroup.ranger-big.active label, #wv-group .formgroup.ranger-big.active label {
color: #F07D00;
}
#wh-group .formgroup.ranger-big.focus label span#pers-output, #wh-group .formgroup.ranger-big.focus label span#zimmer-output, #wh-group .formgroup.ranger-big.focus label span#rad-output, #wh-group .formgroup.ranger.focus label span.unit, #dv-group .formgroup.ranger.focus label span.unit, #dv-group .formgroup.ranger.focus label span.routput, #wh-group .formgroup.ranger.focus label span#wf-output, #wh-group .formgroup.ranger.focus label span#temp-output, #wv-group .formgroup.ranger-big.focus label span.routput {
color:#fff !important;
}
#wh-group .formgroup#formgroup_plz.valid {
color: #F07D00;
background: url(../img/Icons/plz_a.svg) #2F2E33 no-repeat top 12px left 12px;
background-size:53px 53px;
border: 1px solid #F07D00;
transition: all .1s ease;
}
#wh-group .formgroup:hover, #dv-group .formgroup:hover, #wv-group .formgroup:hover {
border: 1px solid #F07D00;
transition: all .1s ease;
}
#wh-group .formgroup#formgroup_plz.focus label {
color: #F07D00;
transition: all .1s ease;
}
#wh-group .formgroup#klima_station_wrapper {
padding:12px 16px 12px 66px;
width:calc(50% - 100px);
}
#wh-group .formgroup#klima_station_wrapper label {
padding-left:16px;
}
#wh-group .formgroup#formgroup_plz input#plz {
-webkit-appearance: none;
appearance: none;
background: none;
border: none;
font-family: 'SuisseIntl-SemiBold';
font-size: 26px;
line-height: 26px;
color:#fff;
margin-top:5px;
width:80px;
}
#wh-group .formgroup#formgroup_plz.valid input#plz {
color:#F07D00;
transition: all .1s ease;
}
#wh-group .formgroup#formgroup_plz input#plz::placeholder {
color: #fff;
opacity: 1;
}
#wh-group .formgroup#formgroup_plz {
background: url(../img/Icons/plz.svg) #504F53 no-repeat top 12px left 12px;
background-size:53px 53px;
}
#wh-group .formgroup#formgroup_wohnflaeche {
background: url(../img/Icons/beheizte_flaeche.svg) #504F53 no-repeat top 12px left 12px;
background-size:53px 53px;
}
#wh-group .formgroup#klima_station_wrapper {
background: url(../img/Icons/klimastation.svg) #504F53 no-repeat top 12px left 12px;
background-size:53px 53px;
}
#wh-group .formgroup#formgroup_raumtemp {
background: url(../img/Icons/raumtemperatur.svg) #504F53 no-repeat top 12px left 12px;
background-size:53px 53px;
}
#wh-group .formgroup#formgroup_anz_personen {
background: url(../img/Icons/anzahl_personen.svg) #504F53 no-repeat top 12px left 12px;
background-size:53px 53px;
}
#wh-group .formgroup#klima_station_wrapper.valid, #wh-group .formgroup#klima_station_wrapper.selected {
background: url(../img/Icons/klimastation_a.svg) #2F2E33 no-repeat top 12px left 12px;
background-size:53px 53px;
color:#F07D00;
border: 1px solid #F07D00;
}
#wh-group .formgroup#klima_station_wrapper.selected .select2-selection__rendered, #wh-group .formgroup#formgroup_plz.selected .select2-selection__rendered, .formgroup#formgroup_batterie.selected .select2-selection__rendered {
color:#F07D00 !important;
}
#wh-group .formgroup#formgroup_wohnflaeche.active {
background: url(../img/Icons/beheizte_flaeche_a.svg) #2F2E33 no-repeat top 12px left 12px;
background-size:53px 53px;
}
#wh-group .formgroup#formgroup_raumtemp.active {
background: url(../img/Icons/raumtemperatur_a.svg) #2F2E33 no-repeat top 12px left 12px;
background-size:53px 53px;
}
#wh-group .formgroup#formgroup_anz_personen.active {
background: url(../img/Icons/anzahl_personen_a.svg) #2F2E33 no-repeat top 12px left 12px;
background-size:53px 53px;
}
#wv-group .formgroup#formgroup_anz_zimmerbeheizt {
background: url(../img/Icons/anzahl_zimmer.svg) #504F53 no-repeat top 12px left 12px;
background-size:53px 53px;
border:1px solid #F07D00;
}
#wv-group .formgroup#formgroup_anz_radiatoren {
background: url(../img/Icons/radiatoren.svg) #504F53 no-repeat top 12px left 12px;
background-size:53px 53px;
border:1px solid #F07D00;
}
#wv-group .formgroup#formgroup_anz_zimmerbeheizt.active {
background: url(../img/Icons/anzahl_zimmer_a.svg) #2F2E33 no-repeat top 12px left 12px;
background-size:53px 53px;
}
#wv-group .formgroup#formgroup_anz_radiatoren.active {
background: url(../img/Icons/radiatoren_a.svg) #2F2E33 no-repeat top 12px left 12px;
background-size:53px 53px;
}
#dv-group .formgroup#formgroup_heizoel {
background: url(../img/Icons/heizoel.svg) #504F53 no-repeat top 12px left 12px;
background-size:53px 53px;
}
#dv-group .formgroup#formgroup_gas {
background: url(../img/Icons/gas.svg) #504F53 no-repeat top 12px left 12px;
background-size:53px 53px;
}
#dv-group .formgroup#formgroup_elektro_heizung {
background: url(../img/Icons/elektroheizung.svg) #504F53 no-repeat top 12px left 12px;
background-size:53px 53px;
}
#dv-group .formgroup#formgroup_pumpe_luft {
background: url(../img/Icons/waermepumpe_luft.svg) #504F53 no-repeat top 12px left 12px;
background-size:53px 53px;
}
#dv-group .formgroup#formgroup_pumpe_sole {
background: url(../img/Icons/waermepumpe_sole.svg) #504F53 no-repeat top 12px left 12px;
background-size:53px 53px;
}
#dv-group .formgroup#formgroup_hartholz {
background: url(../img/Icons/hartholz.svg) #504F53 no-repeat top 12px left 12px;
background-size:53px 53px;
}
#dv-group .formgroup#formgroup_weichholz {
background: url(../img/Icons/weichholz.svg) #504F53 no-repeat top 12px left 12px;
background-size:53px 53px;
}
#dv-group .formgroup#formgroup_schnitzel {
background: url(../img/Icons/holzschnitzel.svg) #504F53 no-repeat top 12px left 12px;
background-size:53px 53px;
}
#dv-group .formgroup#formgroup_pallets {
background: url(../img/Icons/pellets.svg) #504F53 no-repeat top 12px left 12px;
background-size:53px 53px;
}
#dv-group .formgroup#formgroup_heizoel.active {
background: url(../img/Icons/heizoel_a.svg) #2F2E33 no-repeat top 12px left 12px;
background-size:53px 53px;
}
#dv-group .formgroup#formgroup_gas.active {
background: url(../img/Icons/gas_a.svg) #2F2E33 no-repeat top 12px left 12px;
background-size:53px 53px;
}
#dv-group .formgroup#formgroup_elektro_heizung.active {
background: url(../img/Icons/elektroheizung_a.svg) #2F2E33 no-repeat top 12px left 12px;
background-size:53px 53px;
}
#dv-group .formgroup#formgroup_pumpe_luft.active {
background: url(../img/Icons/waermepumpe_luft_a.svg) #2F2E33 no-repeat top 12px left 12px;
background-size:53px 53px;
}
#dv-group .formgroup#formgroup_pumpe_sole.active {
background: url(../img/Icons/waermepumpe_sole_a.svg) #2F2E33 no-repeat top 12px left 12px;
background-size:53px 53px;
}
#dv-group .formgroup#formgroup_hartholz.active {
background: url(../img/Icons/hartholz_a.svg) #2F2E33 no-repeat top 12px left 12px;
background-size:53px 53px;
}
#dv-group .formgroup#formgroup_weichholz.active {
background: url(../img/Icons/weichholz_a.svg) #2F2E33 no-repeat top 12px left 12px;
background-size:53px 53px;
}
#dv-group .formgroup#formgroup_schnitzel.active {
background: url(../img/Icons/holzschnitzel_a.svg) #2F2E33 no-repeat top 12px left 12px;
background-size:53px 53px;
}
#dv-group .formgroup#formgroup_pallets.active {
background: url(../img/Icons/pellets_a.svg) #2F2E33 no-repeat top 12px left 12px;
background-size:53px 53px;
}
/* Neue Felder Solar */
.formgroup#formgroup_mum {
background: url(../img/Icons/Hoehe_m_ue_M.svg) #504F53 no-repeat top 12px left 12px;
background-size:53px 53px;
}
.formgroup#formgroup_mum.valid {
background: url(../img/Icons/Hoehe_m_ue_M-active.svg) #2F2E33 no-repeat top 12px left 12px;
background-size:53px 53px;
border: 1px solid #F07D00;
transition: all .1s ease;
}
.formgroup#formgroup_zins {
background: url(../img/Icons/Zinssatz.svg) #504F53 no-repeat top 12px left 12px;
background-size:53px 53px;
}
.formgroup#formgroup_zins.valid {
background: url(../img/Icons/Zinssatz-active.svg) #2F2E33 no-repeat top 12px left 12px;
background-size:53px 53px;
border: 1px solid #F07D00;
transition: all .1s ease;
}
.formgroup#formgroup_strom {
background: url(../img/Icons/Stromverbrauch.svg) #504F53 no-repeat top 12px left 12px;
background-size:53px 53px;
}
.formgroup#formgroup_strom.valid {
background: url(../img/Icons/Stromverbrauch-active.svg) #2F2E33 no-repeat top 12px left 12px;
background-size:53px 53px;
border: 1px solid #F07D00;
transition: all .1s ease;
}
.formgroup#formgroup_steuer {
background: url(../img/Icons/Steuersatz.svg) #504F53 no-repeat top 12px left 12px;
background-size:53px 53px;
}
.formgroup#formgroup_steuer.valid {
background: url(../img/Icons/Steuersatz-active.svg) #2F2E33 no-repeat top 12px left 12px;
background-size:53px 53px;
border: 1px solid #F07D00;
transition: all .1s ease;
}
.formgroup#formgroup_stromdd {
background: url(../img/Icons/Stromanbieter.svg) #504F53 no-repeat top 12px left 12px;
background-size:53px 53px;
}
.formgroup#formgroup_stromdd.selected {
background: url(../img/Icons/Stromanbieter-active.svg) #2F2E33 no-repeat top 12px left 12px;
background-size:53px 53px;
border: 1px solid #F07D00;
color: #F07D00;
transition: all .1s ease;
}
.formgroup#formgroup_stromdd.selected .select2-selection__rendered {
color:#F07D00 !important;
}
.formgroup#formgroup_batterie {
background: url(../img/Icons/Batteriesystem.svg) #504F53 no-repeat top 12px left 12px;
background-size:53px 53px;
}
.formgroup#formgroup_batterie.valid {
background: url(../img/Icons/Batteriesystem-active.svg) #2F2E33 no-repeat top 12px left 12px;
background-size:53px 53px;
border: 1px solid #F07D00;
color: #F07D00;
transition: all .1s ease;
}
.formgroup#formgroup_wechselrichter_mit_notstrom {
background: url(../img/Icons/Notstromversorgung.svg) #504F53 no-repeat top 12px left 12px;
background-size:53px 53px;
}
.formgroup#formgroup_wechselrichter_mit_notstrom.valid {
background: url(../img/Icons/Notstromversorgung-active.svg) #2F2E33 no-repeat top 12px left 12px;
background-size:53px 53px;
border: 1px solid #F07D00;
color: #F07D00;
transition: all .1s ease;
}
.formgroup#formgroup_mit_energieflussmonitoring {
background: url(../img/Icons/Monitoring.svg) #504F53 no-repeat top 12px left 12px;
background-size:53px 53px;
}
.formgroup#formgroup_mit_energieflussmonitoring.valid {
background: url(../img/Icons/Monitoring-active.svg) #2F2E33 no-repeat top 12px left 12px;
background-size:53px 53px;
border: 1px solid #F07D00;
color: #F07D00;
transition: all .1s ease;
}
.formgroup#formgroup_kabelfuehrung {
background: url(../img/Icons/Kabelfuehrung.svg) #504F53 no-repeat top 12px left 12px;
background-size:53px 53px;
}
.formgroup#formgroup_kabelfuehrung.valid {
background: url(../img/Icons/Kabelfuehrung-active.svg) #2F2E33 no-repeat top 12px left 12px;
background-size:53px 53px;
border: 1px solid #F07D00;
color: #F07D00;
transition: all .1s ease;
}
.formgroup#formgroup_mit_anschlagpunkten_fuer_psaga {
background: url(../img/Icons/Absturzsicherung.svg) #504F53 no-repeat top 12px left 12px;
background-size:53px 53px;
}
.formgroup#formgroup_mit_anschlagpunkten_fuer_psaga.valid {
background: url(../img/Icons/Absturzsicherung-active.svg) #2F2E33 no-repeat top 12px left 12px;
background-size:53px 53px;
border: 1px solid #F07D00;
color: #F07D00;
transition: all .1s ease;
}
.formgroup#formgroup_mit_schneefangsystem {
background: url(../img/Icons/Schneefangsystem.svg) #504F53 no-repeat top 12px left 12px;
background-size:53px 53px;
}
.formgroup#formgroup_mit_schneefangsystem.valid {
background: url(../img/Icons/Schneefangsystem-active.svg) #2F2E33 no-repeat top 12px left 12px;
background-size:53px 53px;
border: 1px solid #F07D00;
color: #F07D00;
transition: all .1s ease;
}
.formgroup#formgroup_ladestation {
background: url(../img/Icons/empty.svg) #504F53 no-repeat top 12px left 12px;
background-size:53px 53px;
}
.formgroup#formgroup_ladestation.valid {
background: url(../img/Icons/empty-active.svg) #2F2E33 no-repeat top 12px left 12px;
background-size:53px 53px;
border: 1px solid #F07D00;
color: #F07D00;
transition: all .1s ease;
}
.formgroup#formgroup_dachlaenge {
background: url(../img/Icons/Dach-Laenge.svg) #504F53 no-repeat top 12px left 12px;
background-size:53px 53px;
}
.formgroup#formgroup_dachlaenge.valid {
background: url(../img/Icons/Dach-Laenge-active.svg) #2F2E33 no-repeat top 12px left 12px;
background-size:53px 53px;
border: 1px solid #F07D00;
transition: all .1s ease;
}
.formgroup#formgroup_dachbreite {
background: url(../img/Icons/Dach-Breite.svg) #504F53 no-repeat top 12px left 12px;
background-size:53px 53px;
}
.formgroup#formgroup_dachbreite.valid {
background: url(../img/Icons/Dach-Breite-active.svg) #2F2E33 no-repeat top 12px left 12px;
background-size:53px 53px;
border: 1px solid #F07D00;
transition: all .1s ease;
}
.formgroup#id_dachneigung {
background: url(../img/Icons/Dach-Neigung.svg) #504F53 no-repeat top 12px left 12px;
background-size:53px 53px;
}
.formgroup#id_dachneigung.valid {
background: url(../img/Icons/Dach-Neigung-active.svg) #2F2E33 no-repeat top 12px left 12px;
background-size:53px 53px;
border: 1px solid #F07D00;
transition: all .1s ease;
}
.formgroup#formgroup_dachhoehe {
background: url(../img/Icons/Dach-Hoehe.svg) #504F53 no-repeat top 12px left 12px;
background-size:53px 53px;
}
.formgroup#formgroup_dachhoehe.valid {
background: url(../img/Icons/Dach-Hoehe-active.svg) #2F2E33 no-repeat top 12px left 12px;
background-size:53px 53px;
border: 1px solid #F07D00;
transition: all .1s ease;
}
.formgroup#formgroup_anzahl_kamine_entlueftungen {
background: url(../img/Icons/Anzahl-Kamine.svg) #504F53 no-repeat top 12px left 12px;
background-size:53px 53px;
}
.formgroup#formgroup_anzahl_kamine_entlueftungen.active {
background: url(../img/Icons/Anzahl-Kamine-active.svg) #2F2E33 no-repeat top 12px left 12px;
background-size:53px 53px;
border: 1px solid #F07D00;
color:#F07D00 !important;
transition: all .1s ease;
}
.formgroup#formgroup_ausrichtung {
background: url(../img/Icons/Himmelsrichtung.svg) #504F53 no-repeat top left;
background-size:53px 53px;
padding:0 192px 0 82px;
}
.formgroup#formgroup_ausrichtung.active {
background: url(../img/Icons/Himmelsrichtung-active.svg) #2F2E33 no-repeat top left;
background-size:53px 53px;
color:#F07D00 !important;
transition: all .1s ease;
}
.formgroup#formgroup_anzahl_gauben {
background: url(../img/Icons/Anzahl-Gauben.svg) #504F53 no-repeat top 12px left 12px;
background-size:53px 53px;
}
.formgroup#formgroup_anzahl_gauben.active {
background: url(../img/Icons/Anzahl-Gauben-active.svg) #2F2E33 no-repeat top 12px left 12px;
background-size:53px 53px;
border: 1px solid #F07D00;
color:#F07D00 !important;
transition: all .1s ease;
}
.formgroup#formgroup_anzahl_dachfenster {
background: url(../img/Icons/Anzahl-Dachfenster.svg) #504F53 no-repeat top 12px left 12px;
background-size:53px 53px;
}
.formgroup#formgroup_anzahl_dachfenster.active {
background: url(../img/Icons/Anzahl-Dachfenster-active.svg) #2F2E33 no-repeat top 12px left 12px;
background-size:53px 53px;
border: 1px solid #F07D00;
color:#F07D00 !important;
transition: all .1s ease;
}
.formgroup#formgroup_dachart.valid, .formgroup#formgroup_dacheindeckung.valid {
background:#2F2E33;
border: 1px solid #F07D00;
transition: all .1s ease;
}
.formgroup#formgroup_mum.valid, .formgroup#formgroup_mum.valid input, .formgroup#formgroup_zins.valid, .formgroup#formgroup_zins.valid input, .formgroup#formgroup_strom.valid, .formgroup#formgroup_strom.valid input, .formgroup#formgroup_steuer.valid, .formgroup#formgroup_steuer.valid input, .formgroup#formgroup_dachlaenge.valid, .formgroup#formgroup_dachbreite.valid, .formgroup#id_dachneigung.valid, .formgroup#formgroup_dachhoehe.valid, .formgroup#formgroup_dachlaenge.valid, .formgroup#formgroup_dachbreite.valid input, .formgroup#id_dachneigung.valid input, .formgroup#formgroup_dachhoehe.valid input, .formgroup#formgroup_dachlaenge.valid input {
color:#F07D00;
transition: all .1s ease;
}
.formgroup.valid input {
color:#F07D00;
transition: all 0.4s ease;
}
input[type=number] {
-moz-appearance: textfield !important;
appearance: textfield !important;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none !important;
margin: 0 !important;
}
span.big-letter {
font-size:26px;
letter-spacing:0.13px;
}
#formgroup_himmelsrichtung label {
font-family: 'SuisseIntl-SemiBold';
font-size: 16px;
line-height: 20px;
color: #fff;
}
#bd-group label, #pso-group label, #da-group label, #da-group-2 label {
display: block;
}
#bd-group input, #da-group input, #da-group-2 input {
-webkit-appearance: none;
appearance: none;
background: none;
border: none;
font-family: 'SuisseIntl-SemiBold';
font-size: 26px;
line-height: 26px;
color:#fff;
margin-top:5px;
width:80px;
}
#bd-group .formgroup#formgroup_zins input, #bd-group .formgroup#formgroup_steuer input {
width:60px;
}
#da-group .formgroup#formgroup_dachlaenge input, #da-group .formgroup#formgroup_dachbreite input, #da-group .formgroup#id_dachneigung input, #da-group .formgroup#formgroup_dachhoehe input {
width:48px;
}
#bd-group input::placeholder, #da-group input::placeholder {
color: #fff;
opacity: 1;
}
.styled-radio {
position: relative;
display: inline-block;
margin:8px 42px 0 0;
}
.styled-radio input[type="radio"] {
position: absolute;
width:100%;
height:100%;
top:0;
left:0;
right:0;
bottom:0;
opacity:0;
z-index:2;
cursor: pointer;
}
.styled-radio span {
position: relative;
display: inline-block;
padding-left: 34px;
font-family: 'SuisseIntl-Book';
font-size: 16px;
line-height: 24px;
color:#fff;
letter-spacing: 0.08px;
cursor: pointer;
z-index:1;
}
.styled-radio span::before, .styled-radio span::after {
position: absolute;
content: "";
display: inline-block;
}
.styled-radio span::before {
height: 22px;
width: 22px;
border: 2px solid #F07D00;
left: 0px;
top: 0;
background:none;
border-radius:50%;
transition:all .4s ease;
}
.styled-radio span:hover::before {
background:#F07D00;
transition:all .4s ease;
}
.styled-radio span::after {
height: 24px;
width: 24px;
border-radius:50%;
left: 1px;
top: 1px;
background:url(../img/Icons/checkmark.svg) no-repeat #F07D00 center center;
background-size:14px 9px;
}
.styled-radio input[type="radio"] + span::after {
content: none;
}
.styled-radio input[type="radio"]:checked + span::after {
content: "";
}
#formgroup_dachart, #formgroup_dacheindeckung {
background: #504F53;
margin-bottom:40px;
padding: 40px 0 2px 0;
border: 1px solid #504F53;
border-radius: 6px;
display: flex;
flex-wrap: wrap;
cursor: pointer;
transition: border .1s ease;
}
#formgroup_dachart:hover, #formgroup_dacheindeckung:hover {
border: 1px solid #F07D00;
transition: border .1s ease;
}
#formgroup_dachart .formgroup_dachart-item {
width:calc(50% - 40px);
margin:0 20px 40px 20px;
}
#formgroup_dacheindeckung .formgroup_dacheindeckung-item {
width:calc(25% - 40px);
margin:0 20px 40px 20px;
}
.formgroup_dachart-item, .formgroup_dacheindeckung-item {
position: relative;
display: block;
}
.formgroup_dachart-item.hidden, .formgroup_dacheindeckung-item.hidden {
opacity:.6;
}
.formgroup_dachart-item img, .formgroup_dacheindeckung-item img {
margin-bottom:14px;
}
.formgroup_dachart-item input[type="radio"], .formgroup_dacheindeckung-item input[type="radio"] {
position: absolute;
width:100%;
height:100%;
top:0;
left:0;
right:0;
bottom:0;
opacity:0;
z-index:2;
cursor: pointer;
}
.formgroup_dachart-item label, .formgroup_dacheindeckung-item label {
position: relative;
display: block;
padding-top: 30px;
font-family: 'SuisseIntl-Book';
font-size: 14px;
line-height: 18px;
color:#fff;
text-align: center;
cursor: pointer;
z-index:1;
}
.formgroup_dachart-item label::before, .formgroup_dachart-item label::after, .formgroup_dacheindeckung-item label::before, .formgroup_dacheindeckung-item label::after {
position: absolute;
content: "";
display: inline-block;
}
.formgroup_dachart-item label::before, .formgroup_dacheindeckung-item label::before {
height: 22px;
width: 22px;
border: 2px solid #F07D00;
left: 50%;
top: 0;
background:none;
border-radius:50%;
transform: translateX(-50%);
transition:all .4s ease;
}
.formgroup_dachart-item label:hover::before, .formgroup_dacheindeckung-item label:hover::before {
background:#F07D00;
transition:all .4s ease;
}
.formgroup_dachart-item label::after, .formgroup_dacheindeckung-item label::after {
height: 24px;
width: 24px;
border-radius:50%;
left: 50%;
top: 1px;
background:url(../img/Icons/checkmark.svg) no-repeat #F07D00 center center;
background-size:14px 9px;
transform: translateX(-50%);
}
.formgroup_dachart-item input[type="radio"] + label::after, .formgroup_dacheindeckung-item input[type="radio"] + label::after {
content: none;
}
.formgroup_dachart-item input[type="radio"]:checked + label::after, .formgroup_dacheindeckung-item input[type="radio"]:checked + label::after {
content: "";
}
#formgroup_himmelsrichtung {
position: relative;
background: #504F53;
margin-bottom:40px;
padding: 12px 12px 24px 12px;
border: 1px solid #504F53;
border-radius: 6px;
transition: border .1s ease;
}
#formgroup_himmelsrichtung.selected {
background: #2F2E33;
margin-bottom:40px;
padding: 12px 12px 24px 12px;
border: 1px solid #F07D00;
color:#F07D00 !important;
transition: all .1s ease;
}
#formgroup_himmelsrichtung.selected label, #formgroup_himmelsrichtung.selected .rslide::before, #formgroup_himmelsrichtung.selected .rslide::after, .active .pv_routput, .active .unit {
color:#F07D00 !important;
}
#formgroup_dachart:hover {
border: 1px solid #F07D00;
transition: border .1s ease;
}
/* Neue Felder Solar - Ende */
.rslide {
width:calc(100% - 94px);
position: absolute;
bottom:16px;
right:12px;
}
#formgroup_ausrichtung .rslide {
width:calc(100% - 360px);
top:69px;
right:inherit;
left:82px;
margin:0 32px;
}
#formgroup_ausrichtung .rslide:before, #formgroup_ausrichtung .rslide:after {
position: absolute;
top:-12px;
font-family: 'SuisseIntl-Book';
font-size: 16px;
line-height: 24px;
color:#fff;
}
#formgroup_ausrichtung .rslide:before {
left:-32px;
content:"90°";
}
#formgroup_ausrichtung .rslide:after {
right:-42px;
content:"270°";
}
.bkfwi-right .rslide {
width:100%;
position: inherit;
bottom:0;
right:0;
}
.routput {
display: inline-block;
padding-left:5px;
}
.routput.big-op {
padding-left:10px;
font-size: 26px !important;
line-height: 32px !important;
}
.ranger, .ranger-big {
position: relative;
}
.ranger label {
padding-top:17px;
display: block;
}
.ranger-big label {
padding-top:8px;
display: block;
}
select {
width:100%;
}
.step-button, .hkg_submit, #prod_continue, #opt_continue, #bk_continue {
padding-top:40px;
text-align: center;
}
.step-button button, .hkg_submit button, #prod_continue button, #opt_continue button, #bk_continue button {
-webkit-appearance:none;
appearance:none;
font-family: 'SuisseIntl-SemiBold';
font-size: 16px;
line-height: 21px;
color:#fff;
background:#F07D00;
border:1px solid #F07D00;
border-radius: 45px;
padding:10px 28px;
display: inline-block;
cursor: pointer;
}
.step-button button:hover, .hkg_submit button:hover, #prod_continue button:hover, #opt_continue button:hover, #bk_continue button:hover {
background:#2F2E33;
border:1px solid #F07D00;
color:#F07D00;
}
.back-button {
position: absolute;
top:-30px;
left:0;
}
.back-button a {
display: block;
width:26px;
height:23px;
background:url(../img/Icons/back.svg) no-repeat center center;
}
button:disabled, button:disabled:hover, #prod_continue button:disabled, #prod_continue button:disabled:hover {
background:#ccc;
border:1px solid #ccc;
color:#999;
cursor: default;
}
/* Systemauswahl */
.produktWrapper {
margin:0 0 16px 0;
position: relative;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.produktWrapper input {
opacity: 0;
position: absolute;
}
.produktWrapper input + label.produktWrapper-inner {
background:#504F53;
padding:20px 20px 20px 25px;
border:1px solid #504F53;
border-radius: 6px;
display: block;
cursor: pointer;
transition: border .1s ease;
}
.produktWrapper input + label.produktWrapper-inner:hover {
border:1px solid #F07D00;
transition: border .1s ease;
}
.produktWrapper.empty input + label.produktWrapper-inner {
cursor:default;
}
.produktWrapper.empty input + label.produktWrapper-inner:hover {
border:1px solid #504F53;
}
.produktWrapper input:checked + label.produktWrapper-inner {
background:url(../img/Icons/auswahl_system.svg) #2F2E33 no-repeat top 20px right 20px;
background-size:40px 40px;
border:1px solid #F07D00;
}
.produktWrapper label.produktWrapper-inner .prod_title {
margin:0 0 25px 0;
}
.produktWrapper label.produktWrapper-inner .prod_title h2 {
font-family: 'SuisseIntl-Book';
font-size: 24px;
line-height: 30px;
color:#fff;
margin:0 0 10px 0;
padding-right:50px;
}
.produktWrapper label.produktWrapper-inner .prod_title h2 .pt_bold {
font-family: 'SuisseIntl-SemiBold';
}
.produktWrapper input:checked + label.produktWrapper-inner h2 {;
color:#F07D00;
}
.prod_bottom {
display: flex;
}
.prod_bottom .prod_img {
width:200px;
}
.empty .prod_bottom .prod_img img {
display: block;
max-width:50%;
height:auto;
margin:0 auto 10px auto;
}
.prod_bottom .prod_text {
width:calc(100% - 216px);
padding-left:16px;
}
.prod_bottom .prod_text p {
font-family: 'SuisseIntl-Book';
font-size: 14px;
line-height: 18px;
color:#fff;
margin: 0 0 10px 0;
}
.prod_bottom .prod_text p strong {
font-family: 'SuisseIntl-SemiBold';
font-weight: normal !important;
}
.prod_bottom .prod_text ul, .prod_bottom .prod_text ol {
margin: 0 0 18px 0;
padding-left:20px;
}
.prod_bottom .prod_text ul li {
font-family: 'SuisseIntl-Book';
font-size: 14px;
line-height: 18px;
color:#fff;
list-style: disc;
}
.prod_bottom .prod_text ol li {
font-family: 'SuisseIntl-Book';
font-size: 14px;
line-height: 18px;
color:#fff;
list-style: decimal;
}
/* Konfiguration */
#optionenAnzeigeWrapper {
margin:0 -16px;
padding:16px;
background:#2F2E33;
border-radius: 6px;
}
#optionenAnzeigeWrapper_head {
width:calc(100% - 224px);
margin:0 8px 12px 216px;
display: flex;
justify-content: flex-end;
}
#optionenAnzeigeWrapper_head .oAW_head-item {
width:calc(25% - 16px);
margin:0 8px;
}
#optionenAnzeigeWrapper_head .oAW_head-item img {
display: block;
margin:0 auto 12px auto;
}
#optionenAnzeigeWrapper_head .oAW_head-item .oAW_head-item-title {
font-family: 'SuisseIntl-Book';
font-size: 13px;
line-height: 18px;
color:#fff;
text-align: center;
}
#optionenAnzeigeWrapper_head .oAW_head-item .oAW_head-item-title .fline {
font-family: 'SuisseIntl-SemiBold';
display: block;
}
#optionenAnzeigeWrapper_head .oAW_head-item .oAW_head-item-title .sline {
display: block;
}
#optionenAnzeigeWrapper .optionWrapper {
position: relative;
margin:0 0 16px 0;
}
#optionenAnzeigeWrapper .optionWrapper.empty {
display: none;
}
#optionenAnzeigeWrapper .optionWrapper input {
opacity: 0;
position: absolute;
}
#optionenAnzeigeWrapper .optionWrapper input + label {
background: #504F53;
padding: 18px 8px 18px 16px;
border: 1px solid #504F53;
border-radius: 6px;
display: block;
cursor: pointer;
display: flex;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
transition: border .1s ease;
}
#optionenAnzeigeWrapper .optionWrapper input + label:hover {
border: 1px solid #F07D00;
transition: border .1s ease;
}
#optionenAnzeigeWrapper .optionWrapper.empty input + label:hover {
border: 1px solid #504F53;
cursor: default;
}
#optionenAnzeigeWrapper .optionWrapper input:checked + label {
background:#2F2E33;
border: 1px solid #F07D00;
}
#optionenAnzeigeWrapper .optionWrapper .wrapper_left {
width:198px;
}
#optionenAnzeigeWrapper .optionWrapper .wrapper_left .option_img {
position: relative;
display: inline-block;
}
#optionenAnzeigeWrapper .optionWrapper .wrapper_left .option_img .lb-icon {
position: absolute;
bottom:0;
left:0;
}
#optionenAnzeigeWrapper .optionWrapper .wrapper_left .option_img img {
display: block;
max-width:60px;
height:auto;
}
#optionenAnzeigeWrapper .optionWrapper .wrapper_left h2 {
font-family: 'SuisseIntl-SemiBold';
font-size: 24px;
line-height: 26px;
color:#fff;
}
#optionenAnzeigeWrapper .optionWrapper .wrapper_left h3 {
font-family: 'SuisseIntl-Book';
font-size: 16px;
line-height: 24px;
color:#fff;
margin:0 0 30px 0;
}
#optionenAnzeigeWrapper .optionWrapper .wrapper_right {
width:calc(100% - 198px);
}
#optionenAnzeigeWrapper .optionWrapper .wrapper_right .options_4punkte {
display: flex;
justify-content: flex-end;
margin:0 0 12px 0;
}
#optionenAnzeigeWrapper .optionWrapper .wrapper_right .options_4punkte .option_4punkte {
width:calc(25% - 16px);
margin:0 8px;
padding:18px 0;
min-height: 24px;
background-size:24px 24px !important;
transition: border .1s ease;
}
#optionenAnzeigeWrapper .optionWrapper input:checked + label .wrapper_right .options_4punkte .option_4punkte.available {
background:url(../img/Icons/auswahl_optionen.svg) no-repeat center center !important;
background-size:24px 24px !important;
transition: border .1s ease;
}
#optionenAnzeigeWrapper .optionWrapper .wrapper_right .option_text {
font-family: 'SuisseIntl-Book';
font-size: 14px;
line-height: 18px;
color:#fff;
}
/* Betriebskosten */
#bk_form_wrapper {
}
#bk_form_wrapper .bk_form_wrapper-item {
display: flex;
background: #504F53;
margin:0 0 16px 0;
padding:18px 20px;
border-radius: 8px;
border:1px solid #504F53;
}
#bk_form_wrapper .bk_form_wrapper-item.active {
background: #2F2E33;
border:1px solid #F07D00;
}
#bk_form_wrapper .bk_form_wrapper-item.ele {
background: url(../img/Icons/elektroheizung.svg) #504F53 no-repeat top 12px left 18px;
background-size:53px 53px;
}
#bk_form_wrapper .bk_form_wrapper-item.Gas {
background: url(../img/Icons/gas.svg) #504F53 no-repeat top 12px left 18px;
background-size:53px 53px;
}
#bk_form_wrapper .bk_form_wrapper-item.Hhs {
background: url(../img/Icons/hartholz.svg) #504F53 no-repeat top 12px left 18px;
background-size:53px 53px;
}
#bk_form_wrapper .bk_form_wrapper-item.Oil {
background: url(../img/Icons/heizoel.svg) #504F53 no-repeat top 12px left 18px;
background-size:53px 53px;
}
#bk_form_wrapper .bk_form_wrapper-item.Pel {
background: url(../img/Icons/pellets.svg) #504F53 no-repeat top 12px left 18px;
background-size:53px 53px;
}
#bk_form_wrapper .bk_form_wrapper-item.Sch {
background: url(../img/Icons/holzschnitzel.svg) #504F53 no-repeat top 12px left 18px;
background-size:53px 53px;
}
#bk_form_wrapper .bk_form_wrapper-item.Whs {
background: url(../img/Icons/weichholz.svg) #504F53 no-repeat top 12px left 18px;
background-size:53px 53px;
}
#bk_form_wrapper .bk_form_wrapper-item.WPL {
background: url(../img/Icons/waermepumpe_luft.svg) #504F53 no-repeat top 12px left 18px;
background-size:53px 53px;
}
#bk_form_wrapper .bk_form_wrapper-item.WPS {
background: url(../img/Icons/waermepumpe_sole.svg) #504F53 no-repeat top 12px left 18px;
background-size:53px 53px;
}
#bk_form_wrapper .bk_form_wrapper-item.ele.active {
background: url(../img/Icons/elektroheizung_a.svg) #2F2E33 no-repeat top 12px left 18px;
background-size:53px 53px;
}
#bk_form_wrapper .bk_form_wrapper-item.Gas.active {
background: url(../img/Icons/gas_a.svg) #2F2E33 no-repeat top 12px left 18px;
background-size:53px 53px;
}
#bk_form_wrapper .bk_form_wrapper-item.Hhs.active {
background: url(../img/Icons/hartholz_a.svg) #2F2E33 no-repeat top 12px left 18px;
background-size:53px 53px;
}
#bk_form_wrapper .bk_form_wrapper-item.Oil.active {
background: url(../img/Icons/heizoel_a.svg) #2F2E33 no-repeat top 12px left 18px;
background-size:53px 53px;
}
#bk_form_wrapper .bk_form_wrapper-item.Pel.active {
background: url(../img/Icons/pellets_a.svg) #2F2E33 no-repeat top 12px left 18px;
background-size:53px 53px;
}
#bk_form_wrapper .bk_form_wrapper-item.Sch.active {
background: url(../img/Icons/holzschnitzel_a.svg) #2F2E33 no-repeat top 12px left 18px;
background-size:53px 53px;
}
#bk_form_wrapper .bk_form_wrapper-item.Whs.active {
background: url(../img/Icons/weichholz_a.svg) #2F2E33 no-repeat top 12px left 18px;
background-size:53px 53px;
}
#bk_form_wrapper .bk_form_wrapper-item.WPL.active {
background: url(../img/Icons/waermepumpe_luft_a.svg) #2F2E33 no-repeat top 12px left 18px;
background-size:53px 53px;
}
#bk_form_wrapper .bk_form_wrapper-item.WPS.active {
background: url(../img/Icons/waermepumpe_sole_a.svg) #2F2E33 no-repeat top 12px left 18px;
background-size:53px 53px;
}
#bk_form_wrapper .bk_form_wrapper-item .bkfwi-left {
width:calc(50% - 85px);
padding:8px 16px 0 69px;
}
#bk_form_wrapper .bk_form_wrapper-item .bkfwi-left h2 {
font-family: 'SuisseIntl-SemiBold';
font-size: 16px;
line-height: 24px;
color:#fff;
}
#bk_form_wrapper .bk_form_wrapper-item.active .bkfwi-left h2 {
color:#F07D00;
}
#bk_form_wrapper .bk_form_wrapper-item .bkfwi-right {
width:50%;
position: relative;
padding-top:8px;
}
#bk_form_wrapper .bk_form_wrapper-item .bkfwi-right h3 {
font-family: 'SuisseIntl-SemiBold';
font-size: 26px;
line-height: 26px;
color:#fff;
margin:0 0 20px 0;
}
#bk_form_wrapper .bk_form_wrapper-item.active .bkfwi-right h3 {
color:#F07D00;
}
#bk_form_wrapper .bk_form_wrapper-item .bkfwi-right h3 span.h3-small {
font-size: 16px;
line-height: 26px;
display: inline-block;
padding-left:5px;
}
#bk_form_wrapper .bk_form_wrapper-item.active .bkfwi-right h3 span.h3-small {
color:#fff;
}
/* Rapport */
.report-choice-wrapper #report_emailaddress {
position: absolute;
left:12px;
bottom:12px;
-webkit-appearance:none;
border-radius:0;
border:none;
background:#3F3E45;
font-family: 'SuisseIntl-SemiBold';
font-size: 16px;
line-height: 24px;
color: #fff;
width:calc(100% - 56px);
padding:6px 16px;
}
.report-contact-wrapper p {
margin:0 auto 32px auto;
max-width:584px;
font-family: 'SuisseIntl-Book';
font-size: 16px;
line-height: 28px;
color:#fff;
text-align: center;
}
.rcw-form-block {
display:flex;
margin:0 -8px 78px -8px;
}
.rcw-form-block .rcw-form-item {
width:calc(50% - 16px);
margin:0 8px;
}
.rcw-form-block .rcw-form-item input {
-webkit-appearance:none;
border-radius:0;
border:none;
background:#3F3E45;
font-family: 'SuisseIntl-SemiBold';
font-size: 16px;
line-height: 24px;
color: #F07D00;
width:calc(100% - 32px);
padding:6px 16px;
text-align: center;
}
.report-choice-wrapper #report_emailaddress::placeholder, .rcw-form-block .rcw-form-item input::placeholder, #report-mail-only .report-wrapper .rw-item input::placeholder {
color: #fff;
opacity: 1;
}
#report-mail-only .report-block {
margin:0 auto 90px auto;
max-width:480px;
}
.report-preview-wrapper {
background:#504F53;
padding:0 32px 16px 32px;
}
.report-preview-wrapper-inner {
margin:0 auto;
max-width:480px;
display: flex;
flex-wrap: wrap;
}
.report-preview-wrapper-text {
width:calc(50% - 16px);
padding-top:40px;
padding-right:16px;
}
.report-preview-wrapper-img {
width:50%;
}
.report-preview-wrapper h2 {
font-family: 'SuisseIntl-SemiBold';
font-size: 24px;
line-height: 32px;
color: #fff;
}
.report-preview-wrapper p {
font-family: 'SuisseIntl-Book';
font-size: 16px;
line-height: 24px;
color: #fff;
margin:0 0 32px 0;
}
.report-preview-wrapper-button {
text-align: left;
font-size:0;
}
.report-preview-wrapper-button a {
font-family: 'SuisseIntl-SemiBold';
font-size: 16px;
line-height: 21px;
color:#fff;
text-decoration:none;
background:#F07D00;
border:1px solid #F07D00;
border-radius: 45px;
padding:10px 28px;
display: inline-block;
}
.report-preview-wrapper-button a:hover {
background:#2F2E33;
border:1px solid #F07D00;
color:#F07D00;
}
.report-preview-wrapper img {
display: block;
margin-top:-30px;
}
.report-preview-wrapper .report-preview-wrapper-img a {
opacity:1;
transition: opacity .2s ease;
}
.report-preview-wrapper .report-preview-wrapper-img a:hover {
opacity:0.9;
transition: opacity .2s ease;
}
#report-mail-only .report-wrapper {
background: url(../img/Icons/email_a.svg) #2F2E33 no-repeat top 12px left 16px;
background-size:53px 53px;
border:1px solid #F07D00;
border-radius: 8px;
padding:30px 28px 20px 28px;
}
#report-mail-only .report-wrapper label {
display: block;
padding-left:54px;
font-family: 'SuisseIntl-SemiBold';
font-size: 16px;
line-height: 24px;
color: #F07D00;
margin:0 0 24px 0;
}
#report-mail-only .report-wrapper .rw-item {
margin:0 0 12px 0;
}
#report-mail-only .report-wrapper .rw-item input {
-webkit-appearance: none;
border-radius: 0;
border: none;
background: #3F3E45;
font-family: 'SuisseIntl-SemiBold';
font-size: 16px;
line-height: 24px;
color: #F07D00;
width:calc(100% - 32px);
padding: 6px 16px;
text-align: left;
}
.report-get {
text-align: center;
}
.report-get button {
-webkit-appearance: none;
appearance: none;
font-family: 'SuisseIntl-SemiBold';
font-size: 16px;
line-height: 21px;
color:#fff;
background:#F07D00;
border:1px solid #F07D00;
border-radius: 45px;
padding:10px 28px;
display: inline-block;
cursor: pointer;
}
.report-get button:disabled, .report-get button:disabled:hover {
background:#ccc;
border:1px solid #ccc;
color:#999;
cursor: default;
}
.rtw-message-download a {
font-family: 'SuisseIntl-SemiBold';
font-size: 16px;
line-height: 21px;
color:#fff;
text-decoration:none;
background:#F07D00;
border:1px solid #F07D00;
border-radius: 45px;
padding:10px 28px;
display: inline-block;
}
.report-get button:hover, .rtw-message-download a:hover {
background:#2F2E33;
border:1px solid #F07D00;
color:#F07D00;
}
.rtw-message, .rtw-message-download {
text-align: center;
margin:0 0 74px 0;
}
.rtw-message.pdf {
margin:0 0 50px 0;
}
.rtw-message img, .rtw-message-download img {
display: block;
margin: 0 auto 17px auto;
}
.rtw-message p {
font-family: 'SuisseIntl-SemiBold';
font-size: 18px;
line-height: 24px;
color: #fff;
}
.rtw-link {
text-align: center;
}
.rtw-link a {
font-family: 'SuisseIntl-SemiBold';
font-size: 16px;
line-height: 21px;
color:#F07D00;
text-decoration: none;
display: inline-block;
}
/* Range Slider Style */
.rangeslider, .rangeslider__fill {
display: block;
}
.rangeslider {
background: #a4a3a5;
position: relative;
}
.rangeslider--horizontal {
height: 2px;
width: 100%;
}
.rangeslider--disabled {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
opacity: 0.4;
}
.rangeslider__fill {
background: #F07D00;
position: absolute;
}
.rangeslider--horizontal .rangeslider__fill {
top: 0;
height: 100%;
}
.rangeslider--vertical .rangeslider__fill {
bottom: 0;
width: 100%;
}
.rangeslider__handle {
background: #fff;
cursor: pointer;
display: inline-block;
width:18px;
height:18px;
position: absolute;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.rangeslider__handle:after {
content: "";
display: block;
width: 18px;
height: 18px;
margin: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.rangeslider__handle:active, .rangeslider--active .rangeslider__handle, .rangeslider__handle:hover, .active .rangeslider__handle {
background: #F07D00;
}
.rangeslider--horizontal .rangeslider__handle {
top: -8px;
touch-action: pan-y;
-ms-touch-action: pan-y;
}
input[type="range"]:focus + .rangeslider .rangeslider__handle {
}
/* Lightbox */
html.with-featherlight {
overflow:hidden
}
.featherlight {
display:none;
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
z-index:2147483647;
text-align:center;
white-space:nowrap;
cursor:pointer;
background:#2F2E33;
background:rgba(47, 46, 51, 0.85)
}
.featherlight:last-of-type {
background:rgba(47, 46, 51, 0.85)
}
.featherlight:before {
content:'';
display:inline-block;
height:100%;
vertical-align:middle
}
.featherlight .featherlight-content {
position:relative;
text-align:left;
vertical-align:middle;
display:inline-block;
overflow:auto;
padding:15px 15px 0;
border-bottom:15px solid transparent;
margin-left:5%;
margin-right:5%;
max-height:90%;
background:#fff;
cursor:auto;
white-space:normal
}
.featherlight .featherlight-inner {
display:block
}
.featherlight link.featherlight-inner, .featherlight script.featherlight-inner, .featherlight style.featherlight-inner {
display:none
}
.featherlight .featherlight-close-icon {
position:absolute;
z-index:9999;
top:17px;
right:17px;
font-size:25px;
line-height:25px;
width:25px;
cursor:pointer;
text-align:center;
font-family:Arial,sans-serif;
background:none;
color:#000;
border:0;
padding:0
}
.featherlight .featherlight-close-icon::-moz-focus-inner {
border:0;
padding:0
}
.featherlight .featherlight-image {
width:100%
}
.featherlight-iframe .featherlight-content {
border-bottom:0;
padding:0;
-webkit-overflow-scrolling:touch
}
.featherlight iframe {
border:0
}
.featherlight * {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box
}
.desc_toggle, .desc_opt_toggle {
display: none;
font-family: 'SuisseIntl-Book';
font-size:16px;
line-height:22px;
color:#fff;
padding:8px 12px;
border:1px solid #fff;
}
#optionenAnzeigeWrapper .optionWrapper .wrapper_right .options_4punkte .option_4punkte span.pfline, #optionenAnzeigeWrapper .optionWrapper .wrapper_right .options_4punkte .option_4punkte span.psline, span.label_m {
display: none;
}
/* Logo */
#language-div {
position:absolute;
top:5px;
right:16px;
display:flex;
}
#language-div > a {
margin:0 3px;
font-family: 'SuisseIntl-Book';
font-size:12px;
line-height:16px;
color:#fff;
text-decoration: none;
border-bottom:1px solid transparent;
}
#language-div > a.lang_active {
border-bottom:1px solid #fff;
}
.price_preview {
margin: 0 auto;
max-width: 480px;
border-top:1px solid #aaa;
}
.price_preview .price_preview_item {
font-family: 'SuisseIntl-Book';
font-size: 16px;
line-height: 22px;
color:#F07D00;
border-bottom:1px solid #aaa;
padding:9px 0 11px 0;
display: flex;
flex-wrap: wrap;
}
.price_preview .price_preview_item .price_preview_item_name {
width:calc(50% - 8px);
padding-right:8px;
}
.price_preview .price_preview_item .price_preview_item_price {
width:calc(50% - 8px);
padding-left:8px;
color: #fff;
}
.price_preview_info {
margin: 0 auto;
max-width: 480px;
}
.price_preview_info span {
display: block;
margin-bottom:64px;
padding-top:10px;
font-family: 'SuisseIntl-Book';
font-size: 12px;
line-height: 22px;
color:#aaa;
}
#ratings {
padding-top:14px;
}
#ratings h2 {
font-family: 'SuisseIntl-SemiBold';
font-size:20px;
line-height:28px;
color:#F07D00;
text-align: center;
margin-bottom:48px;
}
#ratings #ratings-items {
height:330px;
overflow: hidden;
margin-right:-32px;
}
#ratings #ratings-items .ratings-item {
width:260px;
height:248px;
background:#fff;
border:1px solid #aaa;
margin-right:16px;
padding:24px 16px 24px 22px;
cursor: pointer;
}
#ratings #ratings-items .ratings-item .ratings-item-rating, #ratings-overlay .ratings-overlay-item-rating {
display: flex;
flex-wrap: wrap;
align-items: center;
margin-bottom:24px;
}
.ratings-item-rating-stars.count-1 .star-5, .ratings-item-rating-stars.count-1 .star-4, .ratings-item-rating-stars.count-1 .star-3, .ratings-item-rating-stars.count-1 .star-2, .ratings-item-rating-stars.count-2 .star-5, .ratings-item-rating-stars.count-2 .star-4, .ratings-item-rating-stars.count-2 .star-3, .ratings-item-rating-stars.count-3 .star-5, .ratings-item-rating-stars.count-3 .star-4, .ratings-item-rating-stars.count-4 .star-5 {
opacity:.5;
}
#ratings #ratings-items .ratings-item .ratings-item-rating .ratings-item-rating-stars span, #ratings-overlay .ratings-overlay-item-rating .ratings-overlay-item-rating-stars span {
font-size:18px;
line-height:18px;
color:#F07D00;
}
#ratings #ratings-items .ratings-item .ratings-item-rating .ratings-item-rating-stars-text, #ratings-overlay .ratings-overlay-item-rating .ratings-overlay-item-rating-stars-text {
margin-left:16px;
}
#ratings #ratings-items .ratings-item .ratings-item-rating .ratings-item-rating-stars-text span, #ratings-overlay .ratings-overlay-item-rating .ratings-overlay-item-rating-stars-text span {
font-family: 'SuisseIntl-SemiBold';
font-size:12px;
line-height:18px;
color:#F07D00;
}
#ratings #ratings-items .ratings-item .ratings-item-text h3, #ratings-overlay .ratings-overlay-item-text h3 {
font-family: 'SuisseIntl-SemiBold';
font-size:20px;
line-height:28px;
color:#535253;
margin-bottom:8px;
}
#ratings #ratings-items .ratings-item .ratings-item-text p, #ratings-overlay .ratings-overlay-item-text p {
font-family: 'SuisseIntl-Book';
font-size:14px;
line-height:20px;
color:#535253;
}
#ratings #ratings-items .ratings-item .ratings-item-text-trigger {
text-align: left;
font-size:0;
}
#ratings #ratings-items .ratings-item .ratings-item-text-trigger span {
display: inline-block;
font-family: 'SuisseIntl-SemiBold';
font-size:12px;
line-height:22px;
color:#aaa;
text-decoration:underline;
cursor: pointer;
}
#ratings #ratings-items .ratings-item:hover .ratings-item-text-trigger span {
color:#F07D00;
}
#ratings #ratings-items .ratings-item .ratings-item-author, #ratings-overlay .ratings-overlay-item-author {
padding-top:16px;
font-family: 'SuisseIntl-Book';
font-size:12px;
line-height:22px;
color:#aaa;
}
#ratings-fade {
position: fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(47,46,51,.7);
z-index: 9999999;
transform: translateY(100%);
opacity:0;
}
#ratings-fade.ro-open {
transform: translateY(0);
opacity:1;
transition:opacity .4s ease;
}
#ratings-overlay {
position: fixed;
bottom:0;
left:0;
width:100%;
background:#fff;
z-index: 9999999;
transform: translateY(100%);
transition:all .4s ease;
}
#ratings-overlay.ro-open {
transform: translateY(0);
transition:all .4s ease;
}
#ratings-overlay #ratings-overlay-inner {
margin:0 auto;
padding:30px 120px 24px 92px;
max-width:556px;
}
#ratings-overlay-close {
position: absolute;
top:20px;
right:20px;
cursor: pointer;
}
.ratings-overlay-nav {
position: absolute;
bottom:24px;
left:0;
width:100%;
display: flex;
justify-content: space-between;
}
.ratings-overlay-nav .ratings-overlay-nav-prev {
padding-left:32px;
}
.ratings-overlay-nav .ratings-overlay-nav-prev a {
font-family: 'SuisseIntl-Book';
font-size:12px;
line-height:22px;
color:#535253;
padding-left:24px;
background:url(../img/arrow-left.svg) no-repeat left center;
background-size:10px 20px;
display: inline-block;
cursor: pointer;
}
.ratings-overlay-nav .ratings-overlay-nav-next {
padding-right:32px;
}
.ratings-overlay-nav .ratings-overlay-nav-next a {
font-family: 'SuisseIntl-Book';
font-size:12px;
line-height:22px;
color:#535253;
padding-right:24px;
background:url(../img/arrow-right.svg) no-repeat right center;
background-size:10px 20px;
display: inline-block;
cursor: pointer;
}
@media only screen and (max-width:1024px) {
.featherlight .featherlight-content {
margin-left:0;
margin-right:0;
max-height:98%;
padding:10px 10px 0;
border-bottom:10px solid transparent
}
}
@media only screen and (max-width:1023px) {
.ratings-overlay-nav {
position: relative;
bottom: 0;
left: 0;
padding-bottom:24px;
}
}
@media only screen and (max-width:767px) {
#header-inner {
height:54px;
padding: 0 16px;
}
#logo {
top: 12px;
left: 16px;
}
#logo img {
height: 32px;
}
#contact {
right: 16px;
bottom: 18px;
}
#main-nav {
width: 172px;
/*margin-bottom:20px;*/
}
#main-nav ul li {
width: calc(25% - 6px);
margin: 0 3px;
border-bottom: 2px solid #909090;
}
#main-nav ul li.active, #main-nav ul li.active, #main-nav ul li:nth-child(1) {
border-bottom: 2px solid #F07D00;
}
#main-nav ul li span.od-progress {
width: 100%;
height: 2px;
bottom:-2px;
}
#main-nav.all_clear ul li, #main-nav.kclear ul li:nth-child(2), #main-nav.fclear ul li:nth-child(2), #main-nav.fclear ul li:nth-child(3) {
border-bottom: 2px solid #F07D00;
}
#main-nav ul li a {
padding:0;
font-size:12px;
}
span.label_m {
display: block;
}
#container {
padding-top: 54px;
}
#content.konf-page {
padding: 46px 16px 58px 16px;
}
#optionenAnzeigeWrapper_head, span.label_d {
display:none;
}
#optionenAnzeigeWrapper .optionWrapper input + label {
display: block;
padding: 12px 16px;
}
#optionenAnzeigeWrapper .optionWrapper .wrapper_left, #optionenAnzeigeWrapper .optionWrapper .wrapper_right {
width: 100%;
}
#optionenAnzeigeWrapper .optionWrapper .wrapper_left h2 {
font-size: 20px;
line-height: 28px;
}
#optionenAnzeigeWrapper .optionWrapper .wrapper_left h3 {
margin: 0 0 12px 0;
}
#optionenAnzeigeWrapper .optionWrapper .wrapper_right {
display: flex;
flex-direction: column;
position: relative;
}
#optionenAnzeigeWrapper .optionWrapper .wrapper_right .options_4punkte {
display: block;
margin: 0;
padding-top:12px;
order:2;
}
#optionenAnzeigeWrapper .optionWrapper .wrapper_right .options_4punkte .option_4punkte {
width: 100%;
margin: 0;
padding: 12px 0;
border-top:1px solid #fff;
background-position: right center !important;
}
#optionenAnzeigeWrapper .optionWrapper .wrapper_right .options_4punkte .option_4punkte:nth-child(1) {
border-top:none;
}
#optionenAnzeigeWrapper .optionWrapper .wrapper_right .options_4punkte .option_4punkte span.pfline {
font-family: 'SuisseIntl-SemiBold';
font-size:15px;
line-height: 20px;
letter-spacing: 0.15px;
color:#fff;
display: block;
padding-right:36px;
}
#optionenAnzeigeWrapper .optionWrapper .wrapper_right .options_4punkte .option_4punkte span.psline {
font-family: 'SuisseIntl-Book';
font-size:15px;
line-height: 20px;
letter-spacing: 0.15px;
color:#fff;
display: block;
padding-right:36px;
}
#optionenAnzeigeWrapper .optionWrapper input:checked + label .wrapper_right .options_4punkte .option_4punkte.available {
background: url(../img/Icons/auswahl_optionen.svg) no-repeat right center !important;
background-size: 24px 24px !important;
}
#optionenAnzeigeWrapper .optionWrapper .wrapper_right .option_text {
order:1;
padding-top:12px;
display: none;
}
.desc_opt_toggle {
display: inline-block;
transition: all .2s ease;
position: absolute;
right:0;
top:-40px;
}
.desc_opt_oggle:hover, .desc_opt_toggle.dopen {
background:#fff;
color:#2F2E33;
transition: all .2s ease;
}
#ratings-overlay #ratings-overlay-inner {
padding: 30px 32px 24px 32px;
max-width:calc(100% - 64px);
}
}
@media only screen and (max-width:736px) {
#optionenAnzeigeWrapper {
border-radius:0;
}
.styled-radio {
margin: 8px 16px 0 0;
}
}
@media only screen and (max-width:640px) {
#report-mail-only .report-wrapper {
padding:30px 28px 20px 28px;
margin:0 0 16px 0;
width:calc(100% - 74px);
}
#report-mail-only .report-wrapper .rw-item input {
width:calc(100% - 32px);
}
#content {
padding: 46px 16px 58px 16px;
}
#ratings #ratings-items {
margin-right:-16px;
}
.back-button a {
display: block;
width: 20px;
height: 18px;
background: url(../img/Icons/back.svg) no-repeat center center;
background-size:20px 18px;
}
.form-text {
margin: 0 auto 22px auto;
max-width: 100%;
}
.form-text h1, .form-text h2 {
font-size: 22px;
line-height: 28px;
}
.formgroup#auswahl_alt_neu_bau, .formgroup#formgroup_baujahr_input, .formgroup#waermeverteilung_altbau, .formgroup#waermeverteilung_neubau, .formgroup#warmwasser, #wh-group, #dv-group, .report-choice-wrapper, .formgroup#warmwasser, #wv-group, #bd-group, #pso-group, #da-group, .formgroup#solar_oder_heizung, #da-group-2 {
display: block;
margin: 0 0 10px 0;
}
.formgroup input[type="radio"] + label {
margin: 0 0 12px 0;
width: calc(100% - 100px);
}
.formgroup#formgroup_baujahr_input #baujahr_input {
margin: 0;
width: calc(100% - 34px);
}
.formgroup#waermeverteilung_altbau #kwv_input {
margin: 0;
width: calc(100% - 100px);
justify-content: flex-start;
}
.formgroup#warmwasser label, .report-choice-wrapper label {
margin: 0 0 12px 0;
width: 100%;
}
#wh-group .formgroup, #dv-group .formgroup, #wv-group .formgroup, #bd-group .formgroup, #pso-group .formgroup, #da-group .formgroup, #da-group-2 .formgroup {
margin: 0 0 12px 0;
width: calc(100% - 100px);
}
#wh-group .formgroup#klima_station_wrapper {
width: calc(100% - 84px);
}
.produktWrapper label.produktWrapper-inner .prod_title {
margin: 0 0 12px 0;
}
.produktWrapper label.produktWrapper-inner .prod_title h2 {
font-size: 18px;
line-height: 22px;
}
.produktWrapper label.produktWrapper-inner .prod_title h2 .pt_bold {
display: block;
}
.produktWrapper input:checked + label.produktWrapper-inner {
background: url(../img/Icons/auswahl_system.svg) #2F2E33 no-repeat top 13px right 13px;
background-size: 24px 24px;
}
.produktWrapper input + label.produktWrapper-inner {
padding: 12px 18px 2px 18px;
}
.prod_bottom {
display: block;
}
.prod_bottom .prod_img {
width: 100%;
margin-bottom:12px;
}
.prod_bottom .prod_img img {
display: block;
margin:0 auto;
max-width: 210px;
height:auto;
}
.prod_bottom .prod_text {
width: 100%;
padding-left: 0;
display: none;
}
.desc_toggle {
display: inline-block;
margin-bottom:10px;
transition: all .2s ease;
}
.desc_toggle:hover, .desc_toggle.dopen {
background:#fff;
color:#2F2E33;
transition: all .2s ease;
}
#bk_form_wrapper .bk_form_wrapper-item {
display: block;
}
#bk_form_wrapper .bk_form_wrapper-item .bkfwi-left {
width: calc(100% - 69px);
padding: 8px 0 0 69px;
}
#bk_form_wrapper .bk_form_wrapper-item .bkfwi-right {
width: calc(100% - 69px);
padding: 16px 0 0 69px;
}
.rcw-form-block {
display: block;
margin: 0 0 78px 0;
}
.rcw-form-block .rcw-form-item {
width:100%;
margin: 0 0 12px 0;
}
.formgroup#auswahl_alt_neu_bau input[type="radio"] + label, .formgroup#warmwasser input[type="radio"] + label, .report-choice-wrapper input[type="radio"] + label, .formgroup#solar_oder_heizung input[type="radio"] + label {
margin: 0 0 12px 0;
width: calc(100% - 100px);
}
#bd-group .formgroup#formgroup_stromdd {
width: calc(100% - 100px);
}
.formgroup .formgroup_dachart-item input[type="radio"] + label, .formgroup .formgroup_dacheindeckung-item input[type="radio"] + label {
width: 100%;
margin:0;
}
#formgroup_dacheindeckung .formgroup_dacheindeckung-item {
width: calc(50% - 40px);
}
.formgroup_dacheindeckung-item img {
width:100%;
height:auto;
}
.formgroup#formgroup_ausrichtung {
padding: 0 92px 0 82px;
}
#formgroup_ausrichtung .rslide {
width: calc(100% - 260px);
}
.compass {
right: 12px;
}
#ratings-overlay #ratings-overlay-inner {
padding: 24px 32px;
}
.ratings-overlay-nav .ratings-overlay-nav-prev {
padding-left:20px;
}
.ratings-overlay-nav .ratings-overlay-nav-next {
padding-right:20px;
}
#report-mail-only .report-block {
margin: 0 auto 48px auto;
}
#content.rapport-content #content-inner {
padding-bottom: 88px;
}
}
@media only screen and (max-width:480px) {
.price_preview .price_preview_item .price_preview_item_price {
text-align: right;
}
.report-preview-wrapper-text {
width: 100%;
padding-top: 32px;
padding-right: 0;
text-align: center;
}
.report-preview-wrapper-button {
text-align: center;
}
.report-preview-wrapper-img {
width: 100%;
padding-top:24px;
}
.report-preview-wrapper-img img {
margin:0 auto;
max-width:210px;
}
}
@media only screen and (max-width:420px) {
.compass {
top: 96px;
right:50%;
transform: translateX(50%);
}
.formgroup#formgroup_ausrichtung {
padding: 0 12px 82px 82px;
}
#formgroup_ausrichtung .rslide {
width: calc(100% - 158px);
}
}
@media print {
html.with-featherlight>*>:not(.featherlight) {
display:none
}
}