body { --bg_1: var(--primaer_1); --bg_2: var(--primaer_1_h); --wk: var(--primaer_2);/*zu_konig*/ --wk_ho: var(--primaer_2_h);/*zu_konig_h*/ --hp_width: 1260px; --weiter: #0000004D; } ol, ul {padding: 0;} .konfigurator .kdz--fkb-banner-content-svg {display: none;} body.extern #info_kontakt_inhalt {display: none;} body:not(.sw_taps_on) .cms-block-product-description-reviews {display: none;} body.sw_taps_on .darunter_02 {display: none;} body[class*="pid_"] .content.product--details {padding: 0;} a {cursor: pointer;} html {scroll-behavior: smooth;} .konfigurator .ebene.auswahl .radiobuttons {margin: 0 auto;} .konfigurator .ebene.auswahl.dd .radiobuttons {margin: 25px auto 0;} .konfigurator #hoehe_feld_unten {position: relative; padding: 10px;} .konfigurator .ebene.auswahl .radiobuttons.tool_rahmen {margin-top: 50px; box-shadow: 0 5px 15px 3px #00000040;} .konfigurator .ebene.auswahl.dd.links .radiobuttons.tool_rahmen, .konfigurator .ebene.auswahl.dd.rechts .radiobuttons.tool_rahmen {margin-top: 32px; padding: 10px;} .konfigurator .preis_daten.tool_rahmen {margin-top: 0 !important;} .konfigurator.tool_tip_off .tool_tip {display: none;} .konfigurator .tool_tip {position: absolute; background: var(--tool_tip_bg); color: #FFFFFF; text-align: center; top: -38px; right: 0; padding: 12px 20px; font-size: 16px; z-index: 5; box-shadow: 0 5px 15px 3px #00000040;} .konfigurator .tool_tip:after {content: ""; position: absolute; width: 0; height: 0; left: 20%; bottom: -37px; right: auto; top: auto; border: 20px solid transparent; border-top-color: var(--tool_tip_bg); z-index: 5;} .konfigurator .radiobuttons.unteroptionen .tool_tip {top: -100px;} .konfigurator .radiobuttons.dropdown .tool_tip {top: -75px; right: -200px; min-width: 230px;} .konfigurator .abdeckungsmasse .tool_tip {top: -130px; /*right: -100px;*/} .konfigurator .abdeckungsmasse .tool_tip.masse_einzeilig {top: -70px;} .konfigurator #ebene_zusatz_mitte .tool_tip {top: -93px;} .konfigurator #hoehe_feld_unten .tool_tip {top: -130px; right: -247px; width: 365px;} .konfigurator .preis_daten .tool_tip {top: -115px; right: -30px;} .konfigurator #hoehe_u_feld.tool_rahmen {padding: 0 10px; position: relative; margin-top: 40px; width: 100%;} .konfigurator #hoehe_u_feld.tool_rahmen .tool_tip {top: -35px;} .weiter_im_balken {clear: both; text-align: center; background: var(--tool_tip_bg); width: 330px; margin: 0 auto; padding: 9px;} .konfigurator .weiter {cursor: pointer; padding: 5px 0; background: var(--weiter); border: 1px solid var(--grau); color: #FFFFFF; width: 100%;} .weiter_im_balken .weiter {cursor: pointer; padding: 5px 0; background: var(--weiter); border: 1px solid var(--grau); color: #FFFFFF; width: 290px; font-size: 16px; margin: 0 auto;} .konfigurator .deaktiviert {opacity: 0.1; cursor: not-allowed !important;} .konfigurator .deaktiviert .option_div, .konfigurator .deaktiviert .unter_option_div {cursor: not-allowed !important;} .konfigurator .radiobuttons.drueber, .konfigurator .preis_daten.drueber {margin-bottom: -36px !important; font-size: 18px; font-weight: bold; text-align: center;} .konfigurator .radiobuttons.drueber.aus, .konfigurator .preis_daten.drueber.aus {display: none !important;} .konfigurator .radiobuttons.drueber.an, .konfigurator .preis_daten.drueber.an {display: table !important;} .konfigurator .info_opt {margin-top: -10px; margin-bottom: 35px; text-align: center; width: 100%;} .konfigurator .tool_rahmen .info_opt {margin-top: -50px;} .konfigurator .select-field, .konfigurator .js--fancy-select/*, .konfigurator .select-field select, .konfigurator .js--fancy-select select, .konfigurator .select-field:after, .konfigurator .js--fancy-select:after*/ {height: 38px !important;} @media screen and (max-width: 730px) { .konfigurator .tool_tip {right: auto !important;} .konfigurator #hoehe_feld_unten .tool_tip {top: auto; right: -247px; width: calc(100% - 20px); bottom: -180px;} .konfigurator #hoehe_feld_unten .tool_tip:after {content: none;} .konfigurator #hoehe_feld_unten .tool_tip:before {content: ""; position: absolute; width: 0; height: 0; left: 20%; right: auto; top: -40px; bottom: auto; border: 20px solid transparent; border-bottom-color: var(--tool_tip_bg); z-index: 5;} } @media screen and (max-width: 450px) { .konfigurator .tool_tip {right: 0 !important; width: calc(100vw - 20px) !important; font-size: 14px; padding: 10px 10px;} .weiter_im_balken {width: calc(100vw - 20px) !important;} .weiter_im_balken .weiter {width: calc(100vw - 40px) !important;} .konfigurator .tool_rahmen {margin-top: 50px !important;} .konfigurator .abdeckungsmasse .tool_tip.masse_einzeilig {top: -45px;} .konfigurator .tool_tip {top: -45px;} .konfigurator #ebene_zusatz_mitte .tool_tip {top: -95px;} .konfigurator #ebene_zusatz_mitte.tool_rahmen {margin-top: 100px !important;} .konfigurator #hoehe_u_feld.tool_rahmen .tool_tip {width: 100% !important;} } .konfigurator input.red {border: 1px solid var(--rot) !important;} .content--wrapper .konfigurator .js--fancy-select, .content--wrapper .konfigurator .js--fancy-select:hover {border: 0 !important;} .konfigurator #banner {width: 100%; max-height: 400px; height: calc(400 / 1260 * 100vw); position: relative; background-size: 100% 100%;} .konfigurator #preis_banner_div {padding: 20px 25px 15px; background: var(--bg_1); max-width: 230px; top: 50px; right: 20px; position: absolute; text-align: center; width: 100%; border: 2px solid #FFFFFF;} .konfigurator .dreieck_back, .konfigurator .dreieck_border {border-style: solid; border-width: 0 15px 10px 15px; position: absolute; transform: rotate(-90deg);} .konfigurator .dreieck_back {left: -19px; border-color: transparent transparent var(--bg_1) transparent;} .konfigurator .dreieck_border {left: -22px; border-color: transparent transparent #FFFFFF transparent;} .konfigurator #preis_banner {font-size: 22px; text-transform: none; font-weight: 300; color: #FFFFFF; font-family: var(--font_fam); margin: 0; line-height: 37px;} .konfigurator #preis_banner span {font-size: 13px;} .konfigurator #ueberschrift_banner_div {max-width: 550px; left: 20px; background: transparent; padding: 0; text-align: left; border: 0; position: absolute; bottom: 20px;} .konfigurator #ueberschrift_banner_div h1 {color: #FFFFFF !important; text-transform: uppercase; margin: 0;} .konfigurator.fkb #ueberschrift_banner {padding: 0 15px 0 0 !important; background: var(--bg_1); line-height: 24px !important; font-size: 24px; margin-left: 15px; display: inline; box-shadow: -15px -15px 0 0 var(--bg_1), 0 -15px 0 0 var(--bg_1), 0 15px 0 0 var(--bg_1), -15px 15px 0 0 var(--bg_1);} .konfigurator #slogan_banner {color: var(--dunkelgrau); padding: 25px 15px 20px; font-weight: 400; margin: 0; font-size: 16px;} .konfigurator.fkb #slogan_banner {background: #FFFFFF;} .konfigurator.fkb #slogan_banner.leer {background: transparent;} .konfigurator #erklaerung_banner {margin-bottom: 20px;} .konfigurator #bild_laenge, .konfigurator #bild_breite, .konfigurator #bild_hoehe, .konfigurator #bild_hoehe_o, .konfigurator #bild_hoehe_u {margin: 0 auto; display: block;} .konfigurator #massfeld_l, .konfigurator #massfeld_b, .konfigurator #massfeld_h_o, .konfigurator #massfeld_h, .konfigurator #treppenart, .konfigurator #herst_, .konfigurator #loecher {text-align: center; margin-top: 6px; font-weight: bold; line-height: 23px;} .konfigurator #treppenart {text-align: center; display: inherit;} .konfigurator #herst_, .konfigurator #loecher {} .konfigurator #laenge, .konfigurator #breite, .konfigurator #hoehe_o, .konfigurator #hoehe_u {float: none !important; margin-top: 10px; margin-left: -8px; width: 70px;} .konfigurator .masse_rahmen .placer {float: none !important;} .konfigurator .masse_rahmen .select-field, .konfigurator .masse_rahmen .js--fancy-select {max-width: none; width: fit-content; display: block; height: 32px !important; margin: 0 auto;} .konfigurator .masse_rahmen .select-field select {font-size: 14px; height: 32px !important;} .konfigurator .masse_rahmen .select-field:after, .konfigurator .masse_rahmen .js--fancy-select:after {max-height: 30px !important; line-height: 32px !important;} .konfigurator .masse_rahmen {} .konfigurator .masse_rahmen {} #treppe_feld {text-align: left;} .konfigurator #ebene_treppenart {margin-top: 10px;} .konfigurator #ebene_treppenart select {width: 100%;} .konfigurator .treppenbreite, .konfigurator .treppentiefe {width: 104px; display: inline-block; margin: 0; text-align: center;} .konfigurator #masse_treppe {margin-top: 1px;} .konfigurator #masse_treppe input[type="text"] {width: 80px; margin: 0 18px; margin-bottom: 5px;} .konfigurator #masse_treppe .placer {margin-left: -38px;/*float: left !important; margin-top: 4px !important; margin-left: -31px !important;*/} /*Klassen für Bilder der Varianten*/ .konfigurator .width_100 {width: 100px} .konfigurator .width_150 {width: 150px} .konfigurator .width_200 {width: 200px} .konfigurator .vv_selected_z {display: none; padding-left: 20px;} .konfigurator .vv_selected_z > div {padding-bottom: 10px;} .konfigurator .vv_selected_z p {margin: 10px 0 0 0;} .konfigurator .vv_selected_z p.clear {margin: 0;} .konfigurator .vv_selected_z .variantenzeilen {margin: 0;} .konfigurator #info_hoehe_unten {margin-bottom: 15px;} .fix_search .info_01 {width: 100%; height: auto; background: var(--hellgrau); top: 0; position: fixed; z-index: 1030;} .fix_search .info_01 .container {background: var(--hellgrau);} #info_01 {overflow: auto;} #info_balken_inhalt {padding: 10px 20px !important;} #info_balken_inhalt_links {float: left; width: 70%; padding: 10px 10px 10px 0; max-width: calc(100vw - 260px);} #info_balken_inhalt_rechts {float: right; width: 30%; padding: 10px 0 10px 10px; min-width: 200px; text-align: right;} #info_balken_inhalt_rechts span {font-size: 10px;} .info_02 {width: 85px; height: auto; top: 550px; right: 0; position: fixed; z-index: 20000;} .info_02:hover {width: 340px;} #info_kontakt_inhalt .svg_kachel {width: 340px;} #info_kontakt_inhalt .svg_kachel.fkb_blau {background: var(--bg_1) !important;} #info_kontakt_inhalt .svg_kachel.fkb_blau:hover {background: var(--bg_2) !important;} #sidebar .ueberschrift {font-size: 20px; font-weight: 600; padding: 10px;} #sidebar .step {padding: 10px; overflow: auto;} #sidebar #sidebar_preis {padding: 20px 30px; margin-top: 30px; overflow: auto; border-top: 1px solid #000000; border-bottom: 1px solid #000000; font-size: 14px;} #sidebar #sidebar_preis strong {font-size: 28px;} #sidebar .step .vorn, #sidebar .step .mitte, #sidebar .step .hinten {float: left; min-height: 25px;} #sidebar .step .vorn {width: 0;} #sidebar .step .hinten {width: 30px;} #sidebar .step .mitte {width: 275px;} #sidebar .step.done, #step_zusatz.aktiv {font-size: 12px;} #sidebar .step.done:hover {border-color: red; cursor: pointer;} #sidebar .step .hinten i {display: none;} #sidebar .step.done .hinten i {display: inline; font-size: 20px; line-height: 35px;} #sidebar .step.aktiv:not(#step_zusatz) .mitte {text-decoration: underline; font-size: 16px;} #sidebar .step.aktiv:not(#step_zusatz) .step_auswahl {display: none;} #sidebar .step_auswahl {font-size: 16px;} #tool_tip .weiter {margin-top: 22px;} /*Velux*/ .al.pid_20 {--sidebar_w: 370px;} .al.pid_20 br.bedarf {display: none;} .al.pid_20 .info_01 {width: 100%; height: 115px; background: #FFFFFF; top: 0 !important; position: fixed; z-index: 20000;} .al.pid_20 .info_01 #balken_blende .container {display: table;} .fix_search.al.pid_20 .info_01 .container {background: #FFFFFF;} .al.pid_20 .info_01 #logo_blende {display: table-cell; width: 190px; vertical-align: middle; height: 115px;} .al.pid_20 .info_01 #ueberschrift_blende {font-size: 24px; font-weight: 600; vertical-align: middle; display: table-cell; width: auto;} /*al.pid_20 .info_01 #schliessen_blende {display: table-cell; vertical-align: middle; width: 42px;}*/ .al.pid_20 .info_01 #schliessen_blende {position: fixed; top: 37px; right: 43px;} .al.pid_20 .info_01 #schliessen_blende .icon {display: inline-block; vertical-align: middle; height: 42px; background: #1C325B; width: 42px; color: #FFFFFF;} .al.pid_20 .info_01 #schliessen_blende .icon--cross {margin: 12px 13px; font-size: 18px;} .al.pid_20 .info_03 #sidebar {padding: 20px 0; width: calc(var(--sidebar_w) - 2px); height: 100%; top: 115px; right: -1px; position: fixed; z-index: 20001; border: 1px solid var(--tab_bo_color); background: #FFFFFF;} .al.pid_20 .info_03 #sidebar .rahmen {padding: 0 20px;} .al.pid_20 .info_04 {position: fixed; top: 115px; background: #FFFFFF; width: 100%; border-top: 1px solid var(--tab_bo_color); border-bottom: 1px solid var(--tab_bo_color); z-index: 20000;} .al.pid_20 .info_04 .tool_tip {max-width: 1260px; height: 100px; padding: 20px 0 5px 0; margin: 0 auto;} .al.pid_20 .tool_tip .weiter {cursor: pointer; padding: 5px 0; background: var(--wk); border: 2px solid var(--bg_1); color: #FFFFFF; width: 200px; font-size: 16px; text-align: center; font-weight: 600;} .al.pid_20 .step .tool_tip .weiter {width: 100%; margin-top: 20px;} .al.pid_20 .tool_tip .weiter:hover {background: var(--wk_ho);} .al.pid_20 #weiter_sidebar.deaktiviert {display: none;} .konfigurator.al.pid_20 .ebene.auswahl, .konfigurator.al.pid_20 .ebene.zusatz, .konfigurator.al.pid_20 #ebene_p {display: none;} .konfigurator.al.pid_20 .ebene.auswahl.aktiv, .konfigurator.al.pid_20 .ebene.zusatz.aktiv, .konfigurator.al.pid_20 #ebene_p.aktiv {display: block;} .konfigurator.al.pid_20 .ebene .schritt, .konfigurator.al.pid_20 #ebene_zusatz_vorn {position: fixed; top: 115px; z-index: 10; text-align: unset; background: unset; color: unset;} .konfigurator.al.pid_20.container {max-width: calc(1260px - (var(--sidebar_w) - ((100vw - 1260px - 10px) / 2))) !important; margin: 0 !important;} .konfigurator.al.pid_20 .deaktiviert {opacity: 1; cursor: pointer !important;} .konfigurator.al.pid_20 .ebene.auswahl .radiobuttons.tool_rahmen {margin-top: 0;/* margin: -10px;*/ -webkit-box-shadow: none; -moz-box-shadow: unset; box-shadow: none;} .konfigurator.al.pid_20 .option_div, .konfigurator.al.pid_20 .unter_option_div {border: 1px solid #000000; padding: 15px;} .konfigurator.al.pid_20 .option_div .option_label, .konfigurator.al.pid_20 .option_div .info_selected, .konfigurator.al.pid_20 .option_div .option_label_preis, .konfigurator.al.pid_20 .unter_option_div .unter_option_label, .konfigurator.al.pid_20 .unter_option_div .info_selected, .konfigurator.al.pid_20 .unter_option_div .unter_option_label_preis {text-align: unset;} /*Ende Velux*/ .konfigurator .einruecken {margin-left: 9px; display: inline-block;} .konfigurator .trenner {display: none;} .konfigurator .trenner_hart {display: block;} .konfigurator .block {display: block;} .konfigurator .display_block {display: block !important;} .konfigurator #div_grundpreis {display: none;} .konfigurator .center .variante_input {float: none !important;} .konfigurator .center input[type="text"] {float: none !important;} .konfigurator .center .placer {float: none !important;} .konfigurator .unteroptionen {display: block !important;} .konfigurator .option_div.unteroptionen .option_label {text-align: left !important; color: #FFFFFF !important; background: var(--bg_1) !important;} .konfigurator .option_div.unteroptionen .option_label.checked {background: var(--bg_2) !important;} .konfigurator .option_div.unteroptionen .option_label.checked ~ .info_selected {display: none !important;} .konfigurator .option_div object {margin: 0 20px; width: calc(100% - 40px);} .konfigurator #info_laenge, .konfigurator #info_breite, .konfigurator #info_hoehe_o {color: red;} .konfigurator input, .konfigurator label, .konfigurator select {margin: 0; padding: 5px !important;} .konfigurator label {padding: 13px 20px 11px !important;} #mail_tel label,#mail_tel input {float: left;} /*#mail_tel label {width: 100px; height: 31px; line-height: 1.4;}*/ #mail_tel input {width: 125px;} body.extern #mail_tel input {width: 100px;} .konfigurator.container {max-width: 1520px; margin: 0 auto; padding: 0;} .konfigurator .rahmen {margin: 20px auto 0; background: #FFFFFF;} .konfigurator .option_div, .konfigurator .unter_option_div {display: inline-block; margin: 3px 2px 0; position: relative; cursor: pointer;} .konfigurator.al.pid_20 .option_div, .konfigurator.al.pid_20 .unter_option_div {margin: 10px 5px 0;} .konfigurator { --abs_rand_full: 0px; --abs_rand_resp: 40px; --hvw: min(calc(100vw - var(--abs_rand_resp)), calc(var(--hp_width) - var(--abs_rand_full))); --anz: 7; --anz_breit: 4; --margin: 2px; --abs: calc(2 * var(--margin)); --abs_unter: 200px; } body.extern .konfigurator { --abs_rand_resp: 16px; @media screen and (max-width: 695px) {--abs_rand_resp: 31px;} } .konfigurator.al.pid_20 { --margin: 3px; } .konfigurator .option_div.unteroptionen {width: calc(var(--abs_unter) - 20px); margin: var(--margin) 0 var(--margin) 0;} @media screen and (min-width: 1061px) and (max-width: 1260px) { .konfigurator {--anz: 6;} } @media screen and (min-width: 861px) and (max-width: 1060px) { .konfigurator {--anz: 5;} } @media screen and (min-width: 661px) and (max-width: 860px) { .konfigurator {--anz: 4; --anz_breit: 3;} } @media screen and (min-width: 461px) and (max-width: 660px) { .konfigurator {--anz: 3; --anz_breit: 2;} } @media screen and (max-width: 460px) { .konfigurator {--anz: 2; --anz_breit: 2;} } .konfigurator .option_div {width: calc(( var(--hvw) / var(--anz)) - var(--abs));} .konfigurator .option_div.breit {width: calc(( var(--hvw) / var(--anz_breit)) - var(--abs));} .konfigurator .unter_option_div {width: calc(((var(--hvw) - var(--abs_unter) + var(--abs)) / (var(--anz) - 1)) - var(--abs));} @media screen and (min-width: 1261px) {/*7*/ .konfigurator .trenner.sieben {display: block;} .konfigurator .trenner.sieben.breit {display: none;} } @media screen and (min-width: 1061px) and (max-width: 1260px) {/*6*/ .konfigurator .trenner.sechs {display: block;} .konfigurator .trenner.sechs.breit {display: none;} } @media screen and (max-width: 1060px) { .konfigurator .trenner_hart {display: none;} } @media screen and (min-width: 861px) and (max-width: 1060px) {/*5*/ .konfigurator .trenner.fuenf {display: block;} .konfigurator .trenner.fuenf.breit {display: none;} } @media screen and (min-width: 661px) and (max-width: 860px) {/*4*/ .konfigurator .trenner.vier {display: block;} .konfigurator .trenner.vier.breit {display: none;} } @media screen and (min-width: 461px) and (max-width: 660px) {/*3*/ .konfigurator .trenner.drei {display: block;} .konfigurator .trenner.drei.breit {display: none;} } @media screen and (max-width: 460px) {/*2*/ .konfigurator .trenner.drei {display: block;}/*???*/ .konfigurator .trenner.drei.breit {display: none;} } .konfigurator .option_div input {position: absolute; width: 100%; height: 100%; opacity: 0; cursor: pointer;} .konfigurator .option_div label {width: 100%; height: 100%; display: block;} .konfigurator .option_div label label {} .konfigurator .option_div img {width: 100%;} .konfigurator .option_div object img {/*margin-left: -20px;*/} .konfigurator .unter_option_div input {position: absolute; width: 100%; height: 100%; opacity: 0; cursor: pointer;} .konfigurator .unter_option_div label {width: 100%; height: 100%; display: block;} .konfigurator .unter_option_div label label {} .konfigurator .unter_option_div img {width: 100%;} .konfigurator .moeglich input {cursor: pointer;} .konfigurator .unmoeglich {opacity: 0.14; cursor: not-allowed !important; color: grey;} .konfigurator .unmoeglich label {cursor: not-allowed !important;} .konfigurator .weg {display: none;} .konfigurator .unselectable {display: none;} .konfigurator #ebenen, .konfigurator .ebene {clear: both;} .konfigurator #ebene_0 {} .konfigurator .ebene.auswahl, .konfigurator .zusatz, .konfigurator #ebene_e, .konfigurator #ebene_p {margin-bottom: 14px;} .konfigurator #ebene_p {margin-bottom: 0 !important;} .konfigurator .ebene .schritt, .konfigurator #ebene_zusatz_vorn {position: relative;} .konfigurator .schritt {width: 100%; text-align: center; font-size: 18px; text-transform: uppercase; background: var(--bg_1); padding: 7px 0; color: #FFFFFF;} .konfigurator .option_label.checked .pfeil_rechts {border-width: 0 9px 10px; bottom: 20px; left: calc(100% - 4px); border-color: transparent transparent var(--bg_2) transparent; border-style: solid; position: absolute; z-index: 2; transform: rotate(-270deg) translate(50%);} .konfigurator .schritt.checked {background: var(--bg_2);} .konfigurator .schritt.checked .haken {background-image: var(--check_svg); background-repeat: no-repeat; width: 48px; height: 50px; position: absolute; right: 0; top: -21px;} .konfigurator .schritt.red {background: var(--rot);} .konfigurator .schritt.checked .pfeil_unten {border-color: transparent transparent var(--bg_2) transparent;} .konfigurator .schritt.red .pfeil_unten {border-color: transparent transparent var(--rot) transparent;} .konfigurator .info_opt-dropdown {width: 100%;} .konfigurator .hoehe_rahmen {width: fit-content; margin: 0 auto;} .konfigurator .ebene.auswahl .radiobuttons {width: fit-content; border-spacing: 10px; display: block; /*width: auto; display: block; padding: 10px;*/ /*display: -webkit-flex; display: -ms-flex; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;*/} .konfigurator.al.pid_20 .ebene.auswahl .radiobuttons {} .konfigurator .ebene.auswahl .radiobuttons.unteroptionen {float: left; padding: 10px;} .konfigurator .ebene.auswahl.dd {clear: none; min-height: 140px;} .konfigurator .ebene.auswahl.links {width: calc(50% - 5px); float: left;} .konfigurator .ebene.auswahl.rechts {width: calc(50% - 5px); float: right;} .konfigurator .ebene.auswahl.drittel {width: calc(33.33333333333333333333% - 7px); float: left; margin-right: 10px;} .konfigurator .drittel ~ .drittel ~ .drittel {margin-right: -1px !important;} .konfigurator .ebene.auswahl.dd .radiobuttons {width: 290px; float: initial; text-align: center;} .konfigurator .ebene p {} .konfigurator .ebene p.ue {font-weight: 700 !important;} .konfigurator .radiobuttons {width: 100%; position: relative;} .konfigurator .unter_radiobuttons {display: none; margin-left: var(--abs_unter); position: relative; padding: 10px calc(10px - var(--margin)) 10px calc(10px - var(--margin));} .konfigurator #ebene_zusatz_mitte {column-count: 3; column-gap: 10px; position: relative; padding: 10px 10px 0;} .konfigurator #ebene_zusatz_mitte.column_count_1 {column-count: 1 !important;} .konfigurator #ebene_zusatz_mitte.column_count_2 {column-count: 2 !important;} .konfigurator #ebene_zusatz_mitte.column_count_4 {column-count: 4 !important;} .konfigurator #ebene_zusatz_mitte.column_count_5 {column-count: 5 !important;} .konfigurator #ebene_zusatz_mitte p {} .konfigurator .ueber_zusatz {text-align: center; background: var(--bg_1); color: #FFFFFF; padding: 3px 0;} .konfigurator .zentriert {margin: 0 auto;} .konfigurator .button_warenkorb {max-width: 456px; color: #FFFFFF; text-align: center; padding: 20px 0; margin: 10px 0; background: var(--wk); cursor: pointer;} .konfigurator .button_warenkorb:hover {background: var(--wk_ho);} .konfigurator .button_warenkorb.grey {background: var(--dunkelgrau); cursor: not-allowed;} .konfigurator .div_variante {border-top: 1px solid var(--grau); padding: 3px 0;} .konfigurator .div_variante:first-of-type, .konfigurator .div_variante.i1 {border-top: 0;} .konfigurator .div_variante.letzte {margin-right: 0 !important;} .label_vid {position: relative;} .info_wrapper {position: absolute; top: 5px; right: 5px; z-index: 2;} .info_icon {background-color: #007ACC; color: white; border-radius: 50%; width: 20px; height: 20px; text-align: center; line-height: 20px; font-weight: bold; cursor: pointer;} .info_text {display: none; position: absolute; top: 35px; left: 0; width: 100%; background: #F0F0F0; border: 1px solid #CCCCCC; padding: 10px; z-index: 10; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);} @media (hover: hover) {.info_wrapper:hover + .info_text {display: block;}} @media (hover: none) {.info_icon {width: 30px; height: 30px; line-height: 30px; font-size: 25px;}} .nach_spalten_z {display: none;}/*nth-child bezieht sich auf die divs die Klasse davor begrennzt es zusätzlich*/ .konfigurator .spalten_2 > .nach_spalten_z:nth-of-type(2n) {display: block;} .konfigurator .spalten_3 > .nach_spalten_z:nth-of-type(3n) {display: block;} .konfigurator .spalten_4 > .nach_spalten_z:nth-of-type(4n) {display: block;} .konfigurator .spalten_5 > .nach_spalten_z:nth-of-type(5n) {display: block;} .konfigurator .spalten_6 > .nach_spalten_z:nth-of-type(6n) {display: block;} .konfigurator .spalten_2 > .variantenzeilen, .konfigurator .spalten_2 > .div_variante, .konfigurator .spalten_2 > .vv_selected_z {width: calc(50% - 15px); float: left; margin-right: 20px;} .konfigurator .spalten_2 > .variantenzeilen:nth-of-type(2n), .konfigurator .spalten_2 > .div_variante:nth-of-type(2n), .konfigurator .spalten_2 > .vv_selected_z:nth-of-type(2n) {margin-right: 0;} /*.konfigurator .body {display: flex; justify-content: center; align-items: center;} .konfigurator .spalten_2 {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%;} .konfigurator .spalten_2 > div {overflow-wrap: break-word;} @media (max-width: 767px) {.konfigurator .spalten_2 {grid-template-columns: 1fr;}}*/ .konfigurator .spalten_2 > .div_variante.i2 {border-top: 0;} .konfigurator .spalten_2 > .div_variante.even:after {content: ""; visibility: hidden; display: block; height: 0; clear: both;} .konfigurator .spalten_3 > .variantenzeilen, .konfigurator .spalten_3 > .div_variante, .konfigurator .spalten_3 > .vv_selected_z {width: calc(33% - 14px); float: left; margin-right: 20px;} .konfigurator .spalten_3 > .variantenzeilen:nth-of-type(3n), .konfigurator .spalten_3 > .div_variante:nth-of-type(3n), .konfigurator .spalten_3 > .vv_selected_z:nth-of-type(3n) {margin-right: 0;} .konfigurator .spalten_3 > .div_variante.i2, .konfigurator .spalten_3 > .div_variante.i3 {border-top: 0;} .konfigurator .spalten_4 > .variantenzeilen, .konfigurator .spalten_4 > .div_variante, .konfigurator .spalten_4 > .vv_selected_z {width: calc(25% - 22px); float: left; margin-right: 20px;} .konfigurator .spalten_4 > .variantenzeilen:nth-of-type(4n), .konfigurator .spalten_4 > .div_variante:nth-of-type(4n), .konfigurator .spalten_4 > .vv_selected_z:nth-of-type(4n) {margin-right: 0;} .konfigurator .spalten_4 > .div_variante.i2, .konfigurator .spalten_4 > .div_variante.i3, .konfigurator .spalten_4 > .div_variante.i4 {border-top: 0;} .konfigurator .spalten_5 > .variantenzeilen, .konfigurator .spalten_5 > .div_variante, .konfigurator .spalten_5 > .vv_selected_z {width: calc(20% - 21px); float: left; margin-right: 20px;} .konfigurator .spalten_5 > .variantenzeilen:nth-of-type(5n), .konfigurator .spalten_5 > .div_variante:nth-of-type(5n), .konfigurator .spalten_5 > .vv_selected_z:nth-of-type(5n) {margin-right: 0;} .konfigurator .spalten_5 > .div_variante.i2, .konfigurator .spalten_5 > .div_variante.i3, .konfigurator .spalten_5 > .div_variante.i4, .konfigurator .spalten_5 > .div_variante.i5 {border-top: 0;} .konfigurator .spalten_6 > .variantenzeilen, .konfigurator .spalten_6 > .div_variante, .konfigurator .spalten_6 > .vv_selected_z {width: calc(16% - 13px); float: left; margin-right: 20px;} .konfigurator .spalten_6 > .variantenzeilen:nth-of-type(6n), .konfigurator .spalten_6 > .div_variante:nth-of-type(6n), .konfigurator .spalten_6 > .vv_selected_z:nth-of-type(6n) {margin-right: 0;} .konfigurator .spalten_6 > .div_variante.i2, .konfigurator .spalten_6 > .div_variante.i3, .konfigurator .spalten_6 > .div_variante.i4, .konfigurator .spalten_6 > .div_variante.i5, .konfigurator .spalten_6 > .div_variante.i6 {border-top: 0;} .konfigurator .variantenzeilen {line-height: 27px; margin: -8px auto 7px; width: calc(100% - 10px); position: relative;} .konfigurator .variantenzeilen:after {content: ""; visibility: hidden; display: block; height: 0; clear: both;} .konfigurator .plus:before {content: "+ ";} .konfigurator .plus:after {content: " EUR";} .konfigurator .minus:before {content: "";} .konfigurator .minus:after {content: " EUR";} .konfigurator #rabatt_summe:before {content: "- ";} .konfigurator .variante_input {float: left; margin-right: 5px; margin-top: 6px;} .konfigurator .vv_selected_z .variante_input {display: block;} .konfigurator #ebene_beckenform .variante_input, .konfigurator #ebene_treppenart .variante_input {float: left; margin-right: 5px; margin-top: 1px;} .konfigurator input[type="text"] {} .konfigurator .placer {display: inline-block; float: left; line-height: 24px; margin-left: -20px; position: relative; margin-top: -4px; font-size: 14px;} .konfigurator .info_selected_z {padding: 0 0 5px 18px; display: none;} .konfigurator .info_selected_z {display: none !important;} .konfigurator .variantenzeilen img {padding: 20px;} .konfigurator .textumbruch {width: 100%; /*calc(100% - 150px);*/} .konfigurator .spalten_5 .textumbruch {width: calc(100% - 18px);} .konfigurator .preis_zu_zu {width: 130px; text-align: right;} .konfigurator ul.masse_rahmen {text-align: center;} .konfigurator ul li {display: table-cell;} .konfigurator #bild_laenge, .konfigurator #bild_breite, .konfigurator #bild_hoehe_o, .konfigurator #bild_hoehe_u {width: 120px; height: 89px;} .konfigurator .einzelne_spalte {break-inside: avoid;} .konfigurator .abdeckungsmasse {} .konfigurator #ebene_masse li {/*min-width: 250px;*/ width: 233px; padding: 10px;} .konfigurator.al.pid_20 #ebene_masse li {border: 1px solid #000000;} .konfigurator .rahmen_option {position: absolute; border: 1px solid #000000; top: 0; bottom: 44px; left: 0; right: 0;} .konfigurator .pointer-label.low, .konfigurator .pointer-label.high {display: none;} .konfigurator .option_div .option_label, .konfigurator .option_div .info_selected, .konfigurator .option_div .option_label_preis, .konfigurator .unter_option_div .unter_option_label, .konfigurator .unter_option_div .info_selected, .konfigurator .unter_option_div .unter_option_label_preis {font-size: 14px; font-weight: 400; line-height: 22px; padding: 0; height: auto; width: 100%; text-align: center; background: #FFFFFF; hyphens: auto;} .konfigurator.fkb .option_div .option_label, .konfigurator.fkb .option_div .info_selected, .konfigurator.fkb .option_div .option_label_preis, .konfigurator.fkb .unter_option_div .unter_option_label, .konfigurator.fkb .unter_option_div .info_selected, .konfigurator.fkb .unter_option_div .unter_option_label_preis {font-size: 16px;} .konfigurator .option_div .option_label, .konfigurator .unter_option_div .unter_option_label {font-weight: bold;} .konfigurator .option_div.unteroptionen .option_label {padding: 5px 8px;} .konfigurator .click {height: 100%; width: 100%; bottom: 0; position: absolute;} .konfigurator .info_selected {bottom: 25px !important; display: block !important;} .konfigurator .option_div .option_label.checked, .konfigurator .option_div .option_label_preis.checked, .konfigurator .unter_option_div .unter_option_label.checked {background: var(--bg_2); color: #FFFFFF;} .konfigurator .option_label.checked ~ .info_selected {background: #FFFFFF; display: block !important;} .konfigurator .unter_option_label.checked ~ .info_selected {background: #FFFFFF; display: block;} .konfigurator.al.pid_20 .option_div .option_label.checked, .konfigurator.al.pid_20 .option_div .option_label_preis.checked, .konfigurator.al.pid_20 .unter_option_div .unter_option_label.checked {background: inherit; color: inherit;} .konfigurator.al.pid_20 .option_div.checked {border: 2px solid #000000; box-shadow: 0 0 20px 0 #00000080;} .konfigurator .variantenzeilen .js--fancy-select {max-width: 100% !important;} .konfigurator .hersteller {} .konfigurator .hersteller .js--fancy-select {} .konfigurator .zuruecksetzen {float: left; cursor: pointer; padding: 2px 10px 2px 29px; line-height: 24px; background: none; border: 1px solid var(--grau); color: #000000; font-weight: 400;} .konfigurator .neuer_wert {float: left; padding: 2px 10px; margin: 10px 0; line-height: 24px; cursor: pointer; border: 1px solid var(--grau); border-radius: 20px; position: relative;} .konfigurator .in_preisbox {margin-top: -2px;} .konfigurator .versand_berechnen {margin-top: -6px; float: right; padding: 2px 10px; line-height: 22px; cursor: pointer; border: 1px solid var(--grau); border-radius: 20px; position: relative;} .konfigurator .icon--cross {height: 16px; line-height: 32px; margin: -16px 0 0 0; left: 12px; font-weight: normal; display: block; position: absolute; top: 50%; font-style: normal;} .konfigurator #darunter_2 {padding-top: 15px; max-width: 1500px; margin: 0 auto; background: #FFFFFF;} .konfigurator .tabBar {margin: 0; padding: 0; background: #FFFFFF;} .konfigurator input[type=radio].tabBar {visibility: hidden; margin: 0; padding: 0; height: 0; width: 0; position: absolute;} .konfigurator label:last-of-type.tabBar {margin-right: 0;} .konfigurator .tab_link {display: inline-block; position: relative; box-shadow: none; padding: 10px 15px; margin-right: 5px; font-size: 16px; cursor: pointer; font-weight: 700; color: var(--tab_link_color); background: var(--tab_link_background); border-width: var(--tab_link_bo_width_t) var(--tab_link_bo_width_r) var(--tab_link_bo_width_b) var(--tab_link_bo_width_l); border-style: var(--tab_link_bo_style_t) var(--tab_link_bo_style_r) var(--tab_link_bo_style_b) var(--tab_link_bo_style_l); border-color: var(--tab_link_bo_color_t) var(--tab_link_bo_color_r) var(--tab_link_bo_color_b) var(--tab_link_bo_color_l); } .konfigurator #tab1-btn:checked~#tab1, .konfigurator #tab2-btn:checked~#tab2, .konfigurator #tab3-btn:checked~#tab3, .konfigurator #tab4-btn:checked~#tab4 {display: block;} .konfigurator #tab1-btn:checked+.tab_link, .konfigurator #tab2-btn:checked+.tab_link, .konfigurator #tab3-btn:checked+.tab_link, .konfigurator #tab4-btn:checked+.tab_link { color: var(--tab_link_a_color); background: var(--tab_link_a_background); border-width: var(--tab_link_a_bo_width_t) var(--tab_link_a_bo_width_r) var(--tab_link_a_bo_width_b) var(--tab_link_a_bo_width_l); border-style: var(--tab_link_a_bo_style_t) var(--tab_link_a_bo_style_r) var(--tab_link_a_bo_style_b) var(--tab_link_a_bo_style_l); border-color: var(--tab_link_a_bo_color_t) var(--tab_link_a_bo_color_r) var(--tab_link_a_bo_color_b) var(--tab_link_a_bo_color_l); } .konfigurator .tab_link:hover { color: var(--tab_link_h_color); background: var(--tab_link_h_background); border-width: var(--tab_link_h_bo_width_t) var(--tab_link_h_bo_width_r) var(--tab_link_h_bo_width_b) var(--tab_link_h_bo_width_l); border-style: var(--tab_link_h_bo_style_t) var(--tab_link_h_bo_style_r) var(--tab_link_h_bo_style_b) var(--tab_link_h_bo_style_l); border-color: var(--tab_link_h_bo_color_t) var(--tab_link_h_bo_color_r) var(--tab_link_h_bo_color_b) var(--tab_link_h_bo_color_l); } .konfigurator .tab_link span {} .konfigurator .tab {display: none; width: 100%; margin-top: -1px; border-width: var(--tab_bo_width_t) 0 0 0; border-style: var(--tab_bo_style_t); border-color: var(--tab_bo_color_t); } .konfigurator { --tab_bo_width_t: 1px; --tab_bo_style_t: solid; --tab_bo_color_t: var(--grau); /*--tab_link_color: inherit; --tab_link_background: inherit;*/ --tab_link_bo_width_t: 1px; --tab_link_bo_width_r: 1px; --tab_link_bo_width_b: 1px; --tab_link_bo_width_l: 1px; --tab_link_bo_style_t: solid; --tab_link_bo_style_r: solid; --tab_link_bo_style_b: solid; --tab_link_bo_style_l: solid; --tab_link_bo_color_t: transparent; --tab_link_bo_color_r: transparent; --tab_link_bo_color_b: transparent; --tab_link_bo_color_l: transparent; --tab_link_a_color: var(--primaer_1); --tab_link_a_bo_width_t: 1px; --tab_link_a_bo_width_r: 1px; --tab_link_a_bo_width_b: 3px; --tab_link_a_bo_width_l: 1px; --tab_link_a_bo_style_t: solid; --tab_link_a_bo_style_r: solid; --tab_link_a_bo_style_b: solid; --tab_link_a_bo_style_l: solid; --tab_link_a_bo_color_t: transparent; --tab_link_a_bo_color_r: transparent; --tab_link_a_bo_color_b: var(--primaer_1); --tab_link_a_bo_color_l: transparent; --tab_link_h_color: var(--primaer_1_h); --tab_link_h_bo_width_t: 1px; --tab_link_h_bo_width_r: 1px; --tab_link_h_bo_width_b: 1px; --tab_link_h_bo_width_l: 1px; --tab_link_h_bo_style_t: solid; --tab_link_h_bo_style_r: solid; --tab_link_h_bo_style_b: solid; --tab_link_h_bo_style_l: solid; --tab_link_h_bo_color_t: transparent; --tab_link_h_bo_color_r: transparent; --tab_link_h_bo_color_b: transparent; --tab_link_h_bo_color_l: transparent; } .konfigurator .tab_content {padding: 15px; position: relative;} .konfigurator .neben_ergebnis {margin: 0 auto; width: 456px; padding: 20px 0;} @media screen and (max-width: 1250px) {.konfigurator .neben_ergebnis {clear: both;}} .konfigurator .clear {clear: both;} .konfigurator .left {float: left;} .konfigurator .right {float: right;} .konfigurator .links {float: left;} .konfigurator .rechts {float: right;} .konfigurator .m-l-25 {margin-left: 25px;} .konfigurator .nur_b2b {line-height: 2.2; margin-left: 6px; position: absolute; font-size: 14px;} .konfigurator .nur_b2b_2 {font-size: 14px;} .konfigurator #rabatt_max span {margin-bottom: 6px;} .konfigurator .bold {font-weight: bold;} .konfigurator .ergebnis {line-height: 27px; width: 456px; margin: 5px 0; box-sizing: border-box;} .konfigurator .daten {margin-top: 5px;} .konfigurator .mitar, .konfigurator .kontaktart {width: 100px; line-height: 2.2;} .konfigurator .daten label, .konfigurator .versand_neu, .konfigurator .land {width: 100px; height: 28px;} .konfigurator .land {line-height: 2.2;} .konfigurator .laender {width: 78%; margin-bottom: 10px;} .konfigurator .daten input, .konfigurator #versand_b2b {width: 125px; margin-bottom: 10px;} .konfigurator .daten label.m_l {margin-left: 6px;} .konfigurator .daten .doppel {width: 225px;} .konfigurator .prozent {position: relative;} .konfigurator .prozent:after {content: "%"; float: left; margin-left: -20px; line-height: 30px;} .konfigurator .prozent #rabatt_pro {padding-right: 20px;} .konfigurator .euro {position: relative;} .konfigurator .euro:after {content: "EUR"; float: left; margin-left: -33px; line-height: 35px;} .konfigurator .euro #rabatt_fest {padding-right: 37px;} .konfigurator .euro #versand_b2b {padding-right: 37px;} .konfigurator .trennstrich {width: 100%; border-bottom: 1px solid #000000;} .konfigurator .underline {text-decoration: underline;} .konfigurator .none {display: none;} .konfigurator .center {text-align: center;} .konfigurator #plz {width: 81px;} .konfigurator #div_comment_1, .konfigurator #div_comment_2 {} .konfigurator #comment_1, .konfigurator #comment_2 {width: 456px;} .konfigurator .checkboxen {line-height: 25px;} .konfigurator .checkboxen input {margin-right: 10px;} .konfigurator .gruppe {width: 49%; float: left; margin-top: 5px;} .konfigurator .gruppe:nth-child(even) {float: right;} .konfigurator .gruppe .left {width: 100%; float: left;} .konfigurator #tab_content_sicherheit {position: relative;} .konfigurator #admin {top: 0; position: absolute; right: 0;} .konfigurator #div_checkbox {margin-left: 10px; margin-bottom: 10px; height: 18px; display: none;} .konfigurator #checkbox {margin-top: 3px; margin-right: 4px;} .konfigurator #mail_tel table {} .konfigurator #mail_tel table tr:nth-child(even) td {background: none;} .konfigurator #mail_tel table tr td {width: 15%;} .konfigurator #mail_tel table tr td:nth-child(even) {width: 35%;} .konfigurator #mail_tel td {padding: 6px 0;} .konfigurator .null_spalten {display: none;} .konfigurator input[type="text"], .konfigurator input[type="search"], .konfigurator input[type="password"], .konfigurator input[type="number"], .konfigurator input[type="email"], .konfigurator input[type="tel"] {font-size: 14px !important;} .konfigurator #rabatt_felder td {line-height: 2;} .konfigurator #weitere_produkte label, .konfigurator #weitere_produkte span {line-height: 2.2;} .konfigurator #weitere_produkte > div {margin-bottom: 5px;} .konfigurator #weitere_produkte > div > input {float: left;} .konfigurator .w_del {cursor: pointer;} .konfigurator .art_nr {width: 150px;} .konfigurator .bez {width: 210px;} .konfigurator .preis {width: 95px;} .konfigurator .var_liste .preis {width: 135px;} .konfigurator .w_artnr {width: 145px; margin-right: 5px;} .konfigurator .w_bez {width: 205px; margin-right: 5px;} .konfigurator .w_preis {width: 80px; text-align: right;} .konfigurator #drucken, .konfigurator #b2b, .konfigurator #pdf_leer {margin-top: 2px;} .konfigurator .preis_daten {width: 476px; margin: 0 auto; position: relative; padding: 10px;} .konfigurator .zsf_links {float: left; margin-left: calc(50% - 495px);} .konfigurator .zsf_rechts {float: left; margin-left: 50px; max-width: 470px;} .konfigurator .moegliche_radien {text-align: center;} .konfigurator .select-field:after, .konfigurator .js--fancy-select:after {top: 0;} .konfigurator .div_plz {margin-bottom: 5px;} .konfigurator .div_herkunft {} .konfigurator .div_herkunft .js--fancy-select {} .konfigurator .js--fancy-select.laender, .konfigurator .js--fancy-select.mitarbeiter, .konfigurator .js--fancy-select.herkunft {margin-bottom: 10px;} .konfigurator .js--fancy-select.select-field {height: 30px; z-index: 4;} .konfigurator .js--fancy-select select {line-height: 30px; height: 38px;} .konfigurator .js--fancy-select:after {line-height: 38px !important; height: 38px;} .konfigurator .select-field select, .konfigurator .js--fancy-select select {padding: 0 25px 0 10px !important;} .konfigurator .div_plz .js--fancy-select-text, .konfigurator .div_herkunft .js--fancy-select-text {padding: 0 22px 0 5px;} .konfigurator .div_plz .js--fancy-select-trigger, .konfigurator .div_herkunft .js--fancy-select-trigger {width: 24px;} .konfigurator .div_plz .js--fancy-select-trigger i, .konfigurator .div_herkunft .js--fancy-select-trigger i {font-size: 22px;} .konfigurator #ebene_loecher {} .konfigurator #ebene_loecher .loecher {} .konfigurator #darunter_01 {margin: 0 auto; width: auto; text-align: center; padding-bottom: 20px;} .konfigurator.kompakt #darunter_01 {text-align: right;} .konfigurator #alt_ueberschrift {text-align: center; margin-bottom: 20px; text-transform: uppercase; color: var(--bg_1); font-size: 26px;} .konfigurator .alternative {display: none;} .konfigurator .alternative {margin: 5px 4px 0; position: relative; display: inline-block;} .konfigurator .alternative:after {content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0;} .konfigurator .alternative:hover > .drueber {position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #FFFFFF; opacity: 0.2; z-index: 100; display: block;} .konfigurator .alternative .bild {color: #FFFFFF; font-size: 15px; font-weight: bold; display: flex; align-items: center; justify-content: center;} .konfigurator .alternative .alt_bild {width: 297px; height: 244px; background: var(--bg_1);} .konfigurator .alternative .drunter {position: absolute; bottom: 20px; text-align: center; width: 100%; color: #FFFFFF; font-size: 15px;} .konfigurator .alternative .drunter span {text-transform: uppercase; font-weight: bold; line-height: 1.5;} /*Aufklappen statt Wizard*/ .konfigurator.pid_12 #radiobuttons_2_text {display: none !important;} .konfigurator.pid_12 #radiobuttons_2.deaktiviert {display: none;} .konfigurator.pid_12 #radiobuttons_3_text {display: none !important;} .konfigurator.pid_12 #radiobuttons_3.deaktiviert {display: none;} .konfigurator.pid_12 #radiobuttons_4_text {display: none !important;} .konfigurator.pid_12 #radiobuttons_4.deaktiviert {display: none;} .konfigurator.pid_12 .ebene.auswahl.dd {min-height: unset;} #button_einzeln_wk {display: none;} .konfigurator .berechnung_admin {display: none; text-align: center;} .konfigurator .check_berechnung_admin {margin-left: 5px;} .konfigurator div:focus {outline: -webkit-focus-ring-color auto 0; outline: unset;} .konfigurator .table-scrollable {width: 100%; overflow-y: auto; margin: 0 0 1em;} .konfigurator .table-scrollable::-webkit-scrollbar {-webkit-appearance: none; width: 14px; height: 14px;} .konfigurator .table-scrollable::-webkit-scrollbar-thumb {border-radius: 8px; border: 3px solid #FFFFFF; background: #00000040;} .konfigurator .unter_500 {display: none;} .konfigurator .ein_break {display: none;} /*Kompakt*/ .konfigurator.kompakt .rahmen .pfeil_unten {display: none;} .konfigurator.kompakt .schritt {text-align: left; padding: 10px 16px; margin-bottom: 0; font-size: 24px; line-height: 36px; font-family: var(--font_fam); text-transform: none;} .konfigurator.kompakt .schritt.checked {background: var(--bg_1);} .konfigurator.kompakt .schritt.checked .haken {display: none;} .konfigurator.kompakt .info_opt {margin-top: -50px;} .konfigurator.kompakt .ebene.auswahl .radiobuttons {display: flex; flex-wrap: wrap; margin: 0 auto 7px; width: calc(100% - 10px);} .konfigurator.kompakt .ebene.auswahl .radiobuttons.tool_rahmen {box-shadow: none; margin-top: 0;} .konfigurator.kompakt .radiobuttons.drueber {display: none !important;} .konfigurator.kompakt .deaktiviert {opacity: 1; cursor: not-allowed !important;} .konfigurator.kompakt .option_div {width: calc(25% - 10px); padding: 5px; margin: 5px; display: flex; flex-direction: column; border: 2px solid var(--grau);} .konfigurator.kompakt .option_div:hover {border: 2px solid var(--bg_1);} .konfigurator.kompakt .option_div.checked {border: 2px solid var(--bg_1);} .konfigurator.kompakt .unmoeglich {display: none !important;} .konfigurator.kompakt .option_div img {padding: 20px;} .konfigurator.kompakt .option_div .option_label {font-weight: 400; text-align: left; margin: 0 10px; width: calc(100% - 20px); line-height: 27px;} .konfigurator.kompakt .option_div .option_label.checked {background: none; color: inherit;} .konfigurator.kompakt select {cursor: pointer;} .konfigurator.kompakt #ebene_zusatz_vorn {display: none;} .konfigurator.kompakt #ebene_zusatz_mitte {column-count: 1; padding: 10px 0 0;} body.kompakt #info_balken_inhalt {display: none;} .konfigurator.kompakt .variantenzeilen {display: none;} .konfigurator.kompakt .einzelne_spalte .variantenzeilen {flex-wrap: wrap;} .konfigurator.kompakt .einzelne_spalte:first-of-type > .variantenzeilen {display: flex;} .konfigurator.kompakt .ueber_zusatz {cursor: pointer;} .konfigurator_text_drueber {padding-top: 75px;} .konfigurator.kompakt.container {padding-top: 75px;} .konfigurator_text_drueber + .konfigurator.kompakt.container {padding-top: 0;} .konfigurator.kompakt .rahmen {margin-top: 0;} .konfigurator.kompakt .ueber_zusatz {text-align: left; padding: 10px 16px; font-size: 24px;} .konfigurator.kompakt .label_vid .preis_zu_zu {margin: 0 10px; font-weight: 800;} .konfigurator.kompakt .ueber_zusatz {font-family: var(--font_fam); line-height: 36px;} .konfigurator.kompakt .div_variante_keine, .konfigurator.kompakt .div_variante {padding: 5px; border: 2px solid var(--grau); margin: 5px; width: calc(25% - 10px); display: flex; flex-direction: column;} .konfigurator.kompakt .div_variante_keine.active, .konfigurator.kompakt .div_variante.active {border: 2px solid var(--bg_1);} @media (hover: hover) {.konfigurator.kompakt .div_variante_keine:hover, .konfigurator.kompakt .div_variante:hover {border: 2px solid var(--bg_1);}} .konfigurator.kompakt .vv_selected_z .div_variante, .konfigurator.kompakt .vv_selected_z .div_variante_keine {border: 0;} .konfigurator.kompakt .vv_selected_z .div_variante_keine .variante_div {width: 100%;} .konfigurator.kompakt .variante_input {display: none;} @media screen and (max-width: 980px) {.konfigurator.kompakt .option_div, .konfigurator.kompakt .div_variante_keine, .konfigurator.kompakt .div_variante {width: calc(33% - 10px);}} @media screen and (max-width: 748px) {.konfigurator.kompakt .option_div, .konfigurator.kompakt .div_variante_keine, .konfigurator.kompakt .div_variante {width: calc(50% - 10px);}} @media screen and (max-width: 550px) {.konfigurator.kompakt .option_div, .konfigurator.kompakt .div_variante_keine, .konfigurator.kompakt .div_variante {width: 100%;}} @media screen and (max-width: 450px) {.konfigurator.kompakt #ebene_zusatz_mitte.tool_rahmen {margin-top: 0px !important;}} .konfigurator.kompakt .spalten_2 > .div_variante.i2 {/*border-top: 0;*/} .konfigurator.kompakt .spalten_3 > .div_variante.i2, .konfigurator.kompakt .spalten_3 > .div_variante.i3 {/*border-top: 0;*/} .konfigurator.kompakt .spalten_4 > .div_variante.i2, .konfigurator.kompakt .spalten_4 > .div_variante.i3, .konfigurator.kompakt .spalten_4 > .div_variante.i4 {/*border-top: 0;*/} .konfigurator.kompakt .spalten_5 > .div_variante.i2, .konfigurator.kompakt .spalten_5 > .div_variante.i3, .konfigurator.kompakt .spalten_5 > .div_variante.i4, .konfigurator.kompakt .spalten_5 > .div_variante.i5 {/*border-top: 0;*/} .konfigurator.kompakt .spalten_6 > .div_variante.i2, .konfigurator.kompakt .spalten_6 > .div_variante.i3, .konfigurator.kompakt .spalten_6 > .div_variante.i4, .konfigurator.kompakt .spalten_6 > .div_variante.i5, .konfigurator.kompakt .spalten_6 > .div_variante.i6 {/*border-top: 0;*/} .konfigurator.kompakt .ueber_zusatz:after {right: 15px; position: absolute; content: ""; width: 36px; height: 36px; background-color: #FFFFFF; transform: rotate(-180deg); transition: transform 1s ease; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");} .konfigurator.kompakt .open .ueber_zusatz:after {transform: rotate(0deg);} /*Ende Kompakt*/ .konfigurator .label_vid {cursor: pointer;} .konfigurator.kompakt .div_variante_keine .links.variante_div {margin: 0 10px; width: calc(100% - 20px);} .konfigurator.kompakt .label_vid .links.textumbruch {margin: 0 10px; width: calc(100% - 20px);} .konfigurator .label_vid .links.textumbruch {margin: 0 30px 0 0; width: calc(100% - 30px);} .konfigurator .label_vid .preis_zu_zu {margin: 0 10px;} @media screen and (min-width: 1240px) { .fix_search .info_01 {top: 55px !important;} } @media screen and (min-width: 944px) {.konfigurator:not(.kompakt) #darunter_01 {width: 924px;}} @media screen and (min-width: 636px) and (max-width: 943px) {.konfigurator:not(.kompakt) #darunter_01 {width: 616px;}} @media screen and (max-width: 635px) {.konfigurator:not(.kompakt) #darunter_01 {width: 300px;} .konfigurator .alternative {margin: 8px 0 0;}} @media screen and (max-width: 1020px) { .konfigurator .zsf_links, .konfigurator .zsf_rechts {float: none; margin: 0 auto;} } @media screen and (min-width: 501px) and (max-width: 1023px) { .konfigurator #ebene_zusatz_mitte {column-count: 2 !important;} .konfigurator #ebene_zusatz_mitte.column_count_1 {column-count: 1 !important;} } @media screen and (min-width: 501px) and (max-width: 800px) { #preis_banner_div {display: none !important;} } @media screen and (max-width: 630px) { .konfigurator #ueberschrift_banner_div {position: unset; width: auto; padding: 10px 15px;} .konfigurator h1 {font-size: calc(16px + (32 - 16) * (100vw - 320px) / (1260 - 320)); max-width: calc(100vw - 100px);} .konfigurator #drueber #banner {display: flex; align-items: center; justify-content: center;} } @media screen and (max-width: 1000px) { .konfigurator .ebene.auswahl.dd.drittel .radiobuttons {width: 100%;} .konfigurator .ebene.auswahl.dd.drittel .radiobuttons .js--fancy-select.select-field {max-width: 350px;} } @media screen and (min-width: 681px) and (max-width: 1000px) { .konfigurator .spalten_4 > .nach_spalten_z:nth-child(6n+1) {display: block;} .konfigurator .spalten_4 > .nach_spalten_z:nth-child(8n+1) {display: none;} .konfigurator .spalten_4 > .div_variante:nth-child(8n), .konfigurator .spalten_4 > .vv_selected_z:nth-child(8n) {margin-right: 20px;} .konfigurator .spalten_4 > .div_variante:nth-child(6n), .konfigurator .spalten_4 > .vv_selected_z:nth-child(6n) {margin-right: 0;} .konfigurator .spalten_4 > .div_variante, .konfigurator .spalten_4 > .vv_selected_z {width: calc(33% - 13.333334px);} .konfigurator .spalten_4 > .div_variante.i4 {border-top: 1px solid var(--grau);} } @media screen and (max-width: 767px) { } @media screen and (max-width: 680px) { .konfigurator .ebene.auswahl.links, .konfigurator .ebene.auswahl.rechts {width: 100%; float: left;} .konfigurator .ebene.auswahl.dd .radiobuttons {width: 100%;} .konfigurator .ebene.auswahl.dd .radiobuttons .js--fancy-select.select-field {max-width: 350px;} } @media screen and (min-width: 501px) and (max-width: 680px) { .konfigurator .spalten_3 > .nach_spalten_z:nth-child(4n+1) {display: block;} .konfigurator .spalten_3 > .nach_spalten_z:nth-child(6n+1) {display: none;} .konfigurator .spalten_3 > .div_variante:nth-child(6n), .konfigurator .spalten_3 > .vv_selected_z:nth-child(6n) {margin-right: 20px;} .konfigurator .spalten_3 > .div_variante:nth-child(4n), .konfigurator .spalten_3 > .vv_selected_z:nth-child(4n) {margin-right: 0;} .konfigurator .spalten_3 > .div_variante, .konfigurator .spalten_3 > .vv_selected_z {width: calc(50% - 10px);} .konfigurator .spalten_3 > .div_variante.i3, .konfigurator .spalten_3 > .div_variante.i4 {border-top: 1px solid var(--grau);} .konfigurator .spalten_4 > .nach_spalten_z:nth-child(4n+1) {display: block;} .konfigurator .spalten_4 > .nach_spalten_z:nth-child(8n+1) {display: none;} .konfigurator .spalten_4 > .div_variante:nth-child(8n), .konfigurator .spalten_4 > .vv_selected_z:nth-child(8n) {margin-right: 20px;} .konfigurator .spalten_4 > .div_variante:nth-child(4n), .konfigurator .spalten_4 > .vv_selected_z:nth-child(4n) {margin-right: 0;} .konfigurator .spalten_4 > .div_variante, .konfigurator .spalten_4 > .vv_selected_z {width: calc(50% - 10px);} .konfigurator .spalten_4 > .div_variante.i3, .konfigurator .spalten_4 > .div_variante.i4 {border-top: 1px solid var(--grau);} } @media screen and (max-width: 500px) { .konfigurator > .nach_spalten_z {display: block;} .konfigurator .div_variante, .konfigurator .vv_selected_z {margin-right: 0 !important;} .konfigurator .div_variante, .konfigurator .vv_selected_z {width: 100% !important;} .konfigurator .div_variante.i2, .konfigurator .div_variante.i3, .konfigurator .div_variante.i4 {border-top: 1px solid var(--grau) !important;} } @media screen and (max-width: 500px) { .konfigurator .preis_daten, .konfigurator .neben_ergebnis {width: calc(100vw - 20px);} .konfigurator .ergebnis, .konfigurator #comment_1, .konfigurator #comment_2 {width: calc(100vw - 40px);} .konfigurator .div_plz .js--fancy-select, .konfigurator .div_herkunft .js--fancy-select.mitarbeiter, .konfigurator .div_herkunft .js--fancy-select.herkunft {width: calc(100vw - 123px);} .konfigurator .ergebnis .left {width: 60%;} .konfigurator #ebene_zusatz_mitte {column-count: 1;} .konfigurator #info_balken_inhalt_links {width: 100%; z-index: 5; /*position: absolute;*/} .konfigurator #info_balken_inhalt_rechts {width: 100%; z-index: 10; position: absolute; background: unset;} .konfigurator #info_balken_inhalt_rechts span {display: none;} .konfigurator .unter_500 {display: block;} .konfigurator #preis_banner_div {display: none !important;} .konfigurator #slogan_banner {display: none;} .konfigurator .daten input, .konfigurator #versand_b2b {width: calc(100vw - 123px);} .konfigurator .preis_daten .select-field, .konfigurator .preis_daten .js--fancy-select {max-width: 400px;} .konfigurator .daten label.m_l {margin-left: 0;} .konfigurator .nur_b2b, .konfigurator .nur_b2b_2 {margin-left: 85px; position: unset;} .konfigurator .m-l-6 {margin-left: 1px;} .konfigurator .m-l-20 {margin-left: 8px;} .konfigurator .daten .doppel {width: 100%; margin-top: -10px;} .konfigurator .button_warenkorb {max-width: 480px;} .konfigurator .neben_ergebnis {margin-left: 0;} .konfigurator .ein_break {display: block;} .konfigurator #ebene_treppenart .variante_input {margin-right: 0; margin-top: 0; margin-left: 5px;} } @media screen and (max-width: 460px) { .konfigurator .ebene.auswahl.dd.drittel {width: calc(50% - 5px);} .konfigurator .ebene.auswahl.dd.drittel:nth-child(4) {float: right; margin-right: 0;} .konfigurator .ebene.auswahl.dd.drittel:nth-child(5) {width: 100%;} } @media screen and (max-width: 420px) { .konfigurator .tab_content {padding: 10px 0;} } @media screen and (max-width: 400px) { .konfigurator .select-field, .konfigurator .js--fancy-select {max-width: 100%;} }