@keyframes spin {
0% {
transform: rotate(0deg); }
100% {
transform: rotate(360deg); } }
#haeuslerKonfigurator {
padding: 17px 0; }
#haeuslerKonfigurator h2 {
font-size: 32px;
text-transform: uppercase;
font-weight: 500;
color: #2b3a81;
margin-bottom: 16px;
font-family: "dinnextltpro-heavy", Helvetica, Arial, Lucida, sans-serif; }
#haeuslerKonfigurator h2::before {
content: none; }
#haeuslerKonfigurator p {
line-height: 27px;
font-size: 19px;
font-family: "dinnextltpro-light", Helvetica, Arial, Lucida, sans-serif; }
#haeuslerKonfigurator.hk-result-blur .hk-heading-container {
filter: blur(5px); }
#haeuslerKonfigurator.hk-result-blur .hk-result-wrapper {
filter: blur(5px); }
#haeuslerKonfigurator.hk-result-blur .hk-result-blur .hk-form-row {
filter: blur(5px); }
#haeuslerKonfigurator.hk-result-blur .hk-result-blur .hk-find-product-btn {
filter: blur(5px); }
#haeuslerKonfigurator .hk-result-loader {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border: 10px solid rgba(254, 135, 57, 0.3); border-top: 10px solid #fe8739; border-radius: 50%;
width: 80px;
height: 80px;
animation: spin 2s linear infinite;
margin-left: -40px; }
#haeuslerKonfigurator.hk-container {
margin: 0; position: relative; }
#haeuslerKonfigurator.hk-container.hk-result-background::after {
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-size: cover;
z-index: 0;
opacity: 0.3; }
#haeuslerKonfigurator.hk-container .hk-heading-container {
text-align: center;
position: relative;
z-index: 1; }
#haeuslerKonfigurator.hk-container .hk-heading-container h2,
#haeuslerKonfigurator.hk-container .hk-heading-container p {
z-index: 1; }
#haeuslerKonfigurator.hk-container .hk-heading-container p {
margin: auto; }
@media only screen and (min-width: 981px) {
#haeuslerKonfigurator.hk-container .hk-heading-container p {
max-width: 465px; } }
#haeuslerKonfigurator.hk-container .hk-heading-container .hk-heading-product {
margin-top: 0; }
#haeuslerKonfigurator.hk-container .hk-heading-container .hk-heading-product span {
text-transform: uppercase; }
#haeuslerKonfigurator.hk-container .hk-heading-container .hk-heading-product #hk-result-maschine-name span::after {
content: "und";
margin-left: 5px;
text-transform: lowercase; }
#haeuslerKonfigurator.hk-container .hk-heading-container .hk-heading-product #hk-result-maschine-name span:last-of-type {
margin-left: 5px; }
#haeuslerKonfigurator.hk-container .hk-heading-container .hk-heading-product #hk-result-maschine-name span:last-of-type::after {
content: none;
margin-left: 0; }
#haeuslerKonfigurator.hk-container .hk-form-container {
position: relative;
z-index: 1;
flex-direction: column; }
#haeuslerKonfigurator.hk-container .hk-form-container .hk-form-row {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 40px 0;
border-bottom: 2px solid #333; }
#haeuslerKonfigurator.hk-container .hk-form-container .hk-form-row .hk-form-headline {
width: 100%;
text-align: center; }
#haeuslerKonfigurator.hk-container .hk-form-container .hk-form-row .hk-form-headline h5 {
font-size: 19px;
font-weight: 500;
font-family: "dinnextltpro-medium", Helvetica, Arial, Lucida, sans-serif;
margin-bottom: 30px; }
#haeuslerKonfigurator.hk-container .hk-form-container .hk-form-row .hk-form-option {
position: relative;
width: 100%;
display: flex;
align-items: center; }
#haeuslerKonfigurator.hk-container .hk-form-container .hk-form-row .hk-form-option .rangeslider {
width: 100%;
height: 8px;
background: rgba(254, 135, 57, 0.3);
box-shadow: none; }
#haeuslerKonfigurator.hk-container .hk-form-container .hk-form-row .hk-form-option .rangeslider .rangeslider__fill {
background: #fe8739;
box-shadow: none; }
#haeuslerKonfigurator.hk-container .hk-form-container .hk-form-row .hk-form-option .rangeslider .rangeslider__handle {
height: 20px;
width: 20px;
top: -6px;
background: #fe8739;
box-shadow: none;
border: 2px solid #fff; }
#haeuslerKonfigurator.hk-container .hk-form-container .hk-form-row .hk-form-option .rangeslider .rangeslider__handle::after {
background-image: none; }
#haeuslerKonfigurator.hk-container .hk-form-container .hk-form-row .hk-form-option .rangeslider .rangeslider__handle__value {
font-size: 14px;
font-family: sans-serif;
font-style: italic;
top: 15px;
position: absolute;
right: 40px;
left: 50%;
transform: translate(-20%); }
#haeuslerKonfigurator.hk-container .hk-form-container .hk-form-row .hk-form-option .rangeslider .rangeslider__handle__value::after {
position: absolute;
content: "mm";
margin-left: 5px; }
#haeuslerKonfigurator.hk-container .hk-form-container .hk-form-row .hk-form-option .hk-custom-value {
position: absolute;
height: 35px;
top: 55px;
background-color: rgba(254, 135, 57, 0.4);
font-size: 16px;
border: none;
border-radius: 20px; }
#haeuslerKonfigurator.hk-container .hk-form-container .hk-form-row .hk-form-option .hk-custom-value:focus {
border: none;
outline: none; }
#haeuslerKonfigurator.hk-container .hk-form-container .hk-radio-groupe {
position: relative; }
#haeuslerKonfigurator.hk-container .hk-form-container .hk-radio-groupe .hk-form-option {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-end; }
#haeuslerKonfigurator.hk-container .hk-form-container .hk-radio-groupe .hk-form-option .hk-radio-container {
position: relative; }
#haeuslerKonfigurator.hk-container .hk-form-container .hk-radio-groupe .hk-form-option .hk-radio-container input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
border-radius: 0;
font-size: 1em;
width: 100%; }
#haeuslerKonfigurator.hk-container .hk-form-container .hk-radio-groupe .hk-form-option .hk-radio-container input[type="checkbox"], #haeuslerKonfigurator.hk-container .hk-form-container .hk-radio-groupe .hk-form-option .hk-radio-container input[type="radio"] {
width: auto;
float: left;
margin-right: 0.75em;
background: transparent;
border: none; }
#haeuslerKonfigurator.hk-container .hk-form-container .hk-radio-groupe .hk-form-option .hk-radio-container input[type="checkbox"]:checked, #haeuslerKonfigurator.hk-container .hk-form-container .hk-radio-groupe .hk-form-option .hk-radio-container input[type="checkbox"]:not(:checked) {
background: transparent;
position: relative;
visibility: hidden;
margin: 0;
padding: 0; }
#haeuslerKonfigurator.hk-container .hk-form-container .hk-radio-groupe .hk-form-option .hk-radio-container input[type="radio"]:checked, #haeuslerKonfigurator.hk-container .hk-form-container .hk-radio-groupe .hk-form-option .hk-radio-container input[type="radio"]:not(:checked) {
background: transparent;
position: relative;
visibility: hidden;
margin: 0;
padding: 0; }
#haeuslerKonfigurator.hk-container .hk-form-container .hk-radio-groupe .hk-form-option .hk-radio-container input[type="checkbox"] + label, #haeuslerKonfigurator.hk-container .hk-form-container .hk-radio-groupe .hk-form-option .hk-radio-container input[type="radio"] + label {
cursor: pointer;
font-size: 16px;
font-family: sans-serif;
font-style: italic; }
#haeuslerKonfigurator.hk-container .hk-form-container .hk-radio-groupe .hk-form-option .hk-radio-container input[type="radio"]:checked + label::after, #haeuslerKonfigurator.hk-container .hk-form-container .hk-radio-groupe .hk-form-option .hk-radio-container input[type="radio"]:not(:checked) + label::after {
content: " ";
display: inline-block;
width: 30px;
height: 30px;
position: relative;
top: 10px;
right: 0;
border: 1px solid #a9a9a9;
background: transparent;
margin-left: 1em;
box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.1); }
#haeuslerKonfigurator.hk-container .hk-form-container .hk-radio-groupe .hk-form-option .hk-radio-container input[type="radio"]:checked + label::after, #haeuslerKonfigurator.hk-container .hk-form-container .hk-radio-groupe .hk-form-option .hk-radio-container input[type="radio"]:not(:checked) + label::after {
border-radius: 30px; }
#haeuslerKonfigurator.hk-container .hk-form-container .hk-radio-groupe .hk-form-option .hk-radio-container input[type="checkbox"]:hover + label::after, #haeuslerKonfigurator.hk-container .hk-form-container .hk-radio-groupe .hk-form-option .hk-radio-container input[type="radio"]:hover + label::after {
background: #fe8739;
box-shadow: inset 0 0 0 10px white; }
#haeuslerKonfigurator.hk-container .hk-form-container .hk-radio-groupe .hk-form-option .hk-radio-container input[type="checkbox"]:checked + label::after, #haeuslerKonfigurator.hk-container .hk-form-container .hk-radio-groupe .hk-form-option .hk-radio-container input[type="radio"]:checked + label::after {
background: #fe8739;
box-shadow: inset 0 0 0 10px white; }
#haeuslerKonfigurator.hk-container .hk-form-container .hk-radio-groupe .hk-form-option .hk-radio-container label:focus {
outline: none;
border: none; }
#haeuslerKonfigurator.hk-container .hk-form-container .hk-radio-groupe .hk-form-option .hk-radio-container:focus {
outline: none;
border: none; }
#haeuslerKonfigurator.hk-container .hk-form-container .hk-find-product-btn {
display: inline-flex;
position: absolute;
left: 50%;
transform: translate(-50%);
margin-top: 40px;
background-color: #fe8739;
border-radius: 2px;
padding: 5px 30px 3px;
color: white;
font-family: sans-serif;
font-weight: bold;
text-transform: uppercase;
font-size: 16px;
cursor: pointer;
width: 250px;
justify-content: center;
transition: all 300ms ease 0ms;
border: 2px solid transparent;
position: relative; }
#haeuslerKonfigurator.hk-container .hk-form-container .hk-find-product-btn:hover {
color: #f18923 !important;
background-image: initial !important;
background-color: #ffffff !important;
border: 2px solid;
border-width: 2px !important;
border-color: #f18923; }
@media screen and (min-width: 768px) {
#haeuslerKonfigurator.hk-container .hk-form-container .hk-find-product-btn {
float: right; } }
#haeuslerKonfigurator.hk-container .hk-form-container.hk-result {
display: flex;
flex-direction: column; }
#haeuslerKonfigurator.hk-container .hk-form-container.hk-result .hk-form-row {
filter: blur(5px); }
#haeuslerKonfigurator.hk-container .hk-form-container.hk-result.hk-no-row {
flex-direction: column !important; }
@media screen and (min-width: 992px) {
#haeuslerKonfigurator.hk-container .hk-form-container.hk-result {
flex-direction: row; } }
#haeuslerKonfigurator.hk-container .hk-form-container.hk-result .hk-no-result {
position: relative; }
#haeuslerKonfigurator.hk-container .hk-form-container.hk-result .hk-no-result .hk-result-content {
position: relative;
left: 50%;
transform: translate(-50%); }
#haeuslerKonfigurator.hk-container .hk-form-container.hk-result .hk-no-result .hk-result-content .hk-new-config-btn {
margin-top: 40px; }
#haeuslerKonfigurator.hk-container .hk-form-container.hk-result .hk-result-wrapper {
display: flex;
flex-direction: column;
max-width: 100%;
margin: auto;
padding: 40px 0 0;
margin-top: 50px; }
#haeuslerKonfigurator.hk-container .hk-form-container.hk-result .hk-result-wrapper.hk-no-result {
margin-top: 0;
padding-top: 0; }
#haeuslerKonfigurator.hk-container .hk-form-container.hk-result .hk-result-wrapper .hk-col-4 {
display: flex;
width: 100%;
max-width: 100%; }
#haeuslerKonfigurator.hk-container .hk-form-container.hk-result .hk-result-wrapper .hk-col-8 {
display: flex;
width: 100%;
max-width: 100%; }
#haeuslerKonfigurator.hk-container .hk-form-container.hk-result .hk-result-wrapper .hk-result-content {
display: flex;
flex-direction: column;
text-align: center; }
#haeuslerKonfigurator.hk-container .hk-form-container.hk-result .hk-result-wrapper .hk-result-content h2 {
font-size: 19px;
font-family: "DINNextLTPro-Heavy";
color: #243646;
margin-bottom: 15px; }
#haeuslerKonfigurator.hk-container .hk-form-container.hk-result .hk-result-wrapper .hk-result-content .hk-result-subline {
display: flex;
flex-direction: column;
justify-content: center; }
#haeuslerKonfigurator.hk-container .hk-form-container.hk-result .hk-result-wrapper .hk-result-content .hk-result-subline .hk-result-name {
margin-left: 5px;
font-weight: bold;
text-transform: uppercase; }
#haeuslerKonfigurator.hk-container .hk-form-container.hk-result .hk-result-wrapper .hk-result-content a.hk-find-product-btn {
font-weight: 500; }
#haeuslerKonfigurator.hk-container .hk-form-container.hk-result .hk-result-wrapper .hk-result-content a.hk-find-product-btn .hk-result-name {
font-weight: bold; }
#haeuslerKonfigurator.hk-container .hk-form-container.hk-result .hk-result-wrapper .hk-result-content .hk-find-product-btn {
position: relative;
right: 0; }
#haeuslerKonfigurator.hk-container .hk-form-container.hk-result .hk-result-wrapper .hk-result-content .hk-find-product-btn .hk-result-name {
margin-left: 0;
margin-right: 5px; }
#haeuslerKonfigurator.hk-container .hk-form-container.hk-result .hk-result-wrapper .hk-result-picture {
position: relative; }
@media screen and (min-width: 768px) {
#haeuslerKonfigurator.hk-container .hk-form-container.hk-result .hk-result-wrapper .hk-result-content {
text-align: center; }
#haeuslerKonfigurator.hk-container .hk-form-container.hk-result .hk-result-wrapper .hk-result-content .hk-result-subline {
justify-content: left;
flex-direction: row; } }
@media screen and (min-width: 992px) {
#haeuslerKonfigurator.hk-container .hk-form-container.hk-result .hk-result-wrapper .hk-result {
flex-direction: row; }
#haeuslerKonfigurator.hk-container .hk-form-container.hk-result .hk-result-wrapper .hk-result .hk-result-wrapper {
max-width: 50%; }
#haeuslerKonfigurator.hk-container .hk-form-container.hk-result .hk-result-wrapper .hk-result-content {
max-width: 22rem; margin: auto; }
#haeuslerKonfigurator.hk-container .hk-form-container.hk-result .hk-result-wrapper .hk-result-picture {
height: 250px; }
#haeuslerKonfigurator.hk-container .hk-form-container.hk-result .hk-result-wrapper .hk-result-picture img.hk-result-img {
margin: auto;   max-height: 100%;
width: auto; } }
@media screen and (min-width: 1024px) {
#haeuslerKonfigurator.hk-container .hk-form-container.hk-result .hk-result-wrapper {
flex-direction: column; }
#haeuslerKonfigurator.hk-container .hk-form-container.hk-result .hk-result-wrapper .hk-col-4 { }
#haeuslerKonfigurator.hk-container .hk-form-container.hk-result .hk-result-wrapper .hk-col-8 { }
#haeuslerKonfigurator.hk-container .hk-form-container.hk-result .hk-result-wrapper .hk-result-picture img.hk-result-img { margin: auto; } }
@media screen and (min-width: 768px) {
#haeuslerKonfigurator.hk-container .hk-form-container .hk-find-product-btn {
left: unset;
right: 40px;
transform: unset; }
#haeuslerKonfigurator.hk-container .hk-form-container .hk-form-row {
padding: 50px 30px;
flex-direction: row; }
#haeuslerKonfigurator.hk-container .hk-form-container .hk-form-row .hk-form-headline {
width: 70%;
text-align: left; }
#haeuslerKonfigurator.hk-container .hk-form-container .hk-form-row .hk-form-headline h5 {
margin-bottom: 0; }
#haeuslerKonfigurator.hk-container .hk-form-container .hk-form-row .hk-form-option {
width: 27%; }
#haeuslerKonfigurator.hk-container .hk-form-container .hk-form-row .hk-form-option .rangeslider {
width: 70%; }
#haeuslerKonfigurator.hk-container .hk-form-container .hk-form-row .hk-form-option .rangeslider .rangeslider__handle__value {
top: -14px;
position: absolute;
right: -50px;
left: unset;
transform: unset; }
#haeuslerKonfigurator.hk-container .hk-form-container .hk-radio-groupe .hk-form-option {
padding-left: 25px;
position: absolute;
top: 50%;
right: 40px;
transform: translate(0, -50%);
flex-direction: column; }
#haeuslerKonfigurator.hk-container .hk-form-container .hk-radio-groupe .hk-form-option .hk-radio-container {
width: 100%; }
#haeuslerKonfigurator.hk-container .hk-form-container .hk-radio-groupe .hk-form-option .hk-radio-container:first-of-type {
margin-bottom: 10px; }
#haeuslerKonfigurator.hk-container .hk-form-container .hk-radio-groupe .hk-form-option .hk-radio-container input[type="radio"]:checked + label::after, #haeuslerKonfigurator.hk-container .hk-form-container .hk-radio-groupe .hk-form-option .hk-radio-container input[type="radio"]:not(:checked) + label::after {
content: " ";
position: absolute;
top: 4px;
right: 10px; } }
#haeuslerKonfigurator .hk-new-config-btn {
display: inline-flex;
position: absolute;
left: 50%;
transform: translate(-50%);
margin-top: 40px;
background-color: #fe8739;
border-radius: 2px;
padding: 5px 30px 3px;
color: white;
font-family: sans-serif;
font-weight: bold;
text-transform: uppercase;
font-size: 16px;
cursor: pointer;
width: 250px;
justify-content: center;
transition: all 300ms ease 0ms;
border: 2px solid transparent;
position: relative;
left: 0;
transform: none; }
#haeuslerKonfigurator .hk-new-config-btn:hover {
color: #f18923 !important;
background-image: initial !important;
background-color: #ffffff !important;
border: 2px solid;
border-width: 2px !important;
border-color: #f18923; }
#haeuslerKonfigurator .hk-new-config-btn::before {
position: absolute;
top: -35px;
content: "Nicht Ihr Produkt?";
font-family: "dinnextltpro-light", Helvetica, Arial, Lucida, sans-serif;
font-weight: 400;
color: #111111;
opacity: 0.5; }
#haeuslerKonfigurator .hk-show-more-btn {
margin-top: 10px;
color: #fe8739;
font-size: 16px;
text-transform: uppercase;
font-weight: 600;
font-family: sans-serif; }
#haeuslerKonfigurator .hk-show-more-btn::before {
margin-top: 2px !important;
padding-right: 10px;
content: url(https://haeusler.thorbenroth.de/storage/2019/11/arrow-haeusler.png) !important; }
.hk-new-config-btn:lang(en-US)::before {
content: "Not your product?" !important;
}