/*Base styles alle Seiten*/
body{font-family: Arial;} /*wusste nicht, was Rallef da verbaut hat...*/
header{padding:10px}

/*
         * classes to configure, dummy
         * body,.background_lightgrey{background:#fafafa}
         * .background_darkgrey{background:#273647;color:#fff}
         * .background_darkgrey h3 {color: #858585;}
         * .background_mediumgrey{background:#273647}
         * .custom_highlight_color{color:#0070c9}
         * .custom_highlight_color_bg{background:#0070c9 solid}<-this should be used on the arrow buttons, then...
         *
         * */


body,.background_lightgrey
{background:#f5f5f5
}
.background_darkgrey,.slothead,.slottogbut,.slothidden,.step[data-step="1"] .form-box,.step[data-step="2"] .size-selector-button,.step[data-step="3"] .option-container .option{background:#424242;color:#fff}
.background_darkgrey h3 {
    color: #858585;
}
.background_mediumgrey,.slotrabatt td.rabattselect,.bg-gray,.step[data-step="2"] .size-selector-row{
    background:#777777
}
.custom_highlight_color,.slottogbut.togout,#slot_totalpricetag,.btn-next .next-step-number,header .step-number,.c-red{
    color:#ff0000
}

.custom_highlight_color_bg, .btn-next span {background:#ff0000}
.btn-prev span {background: rgba(255, 0, 0, 0.31)
}
header .box.box-step-1 {
    background-color: #D3D3D3;
}

header .box.box-step-1.box-step-0 {
    background-image: linear-gradient(to bottom, #D3D3D3 0%, whitesmoke 50%);
}

header .box.box-step-2 {
    background-color: #B0B0B0;
}

header .box.box-step-2.box-step-0 {
    background-image: linear-gradient(to bottom, #B0B0B0 0%, whitesmoke 50%);
}

header .box.box-step-3 {
    background-color: #8C8C8C;
}

header .box.box-step-3.box-step-0 {
    background-image: linear-gradient(to bottom, #8C8C8C 0%, whitesmoke 50%);
}

header .box.box-step-4 {
    background-color: #676767;
}

header .box.box-step-4.box-step-0 {
    background-image: linear-gradient(to bottom, #676767 0%, whitesmoke 50%);
}

header .box.box-step-5 {
    background-color: #424242;
}

header .box.box-step-5.box-step-0 {
    background-image: linear-gradient(to bottom, #424242 0%, whitesmoke 50%);
}

.btn-next,.step[data-step="1"] .form-box.form-box--btn{
    background: white;
}

.slottogbut.togout{border:1px solid #424242;background: #fff;}
.slottogbut.choosematerial{color:#777777;background: unset;}


h2{font-weight: normal;font-size: 20px;letter-spacing: 1px;margin: 0;}
h3 {font-weight: normal;margin: 10px 0 5px;font-size: 16px;}

/*bitte diese Klassen konsequent verwenden für Headlines, sonst haben wir 1001 Schriften am Ende...*/

.uppercased_hugeheadline{text-transform: uppercase;    font-size: 2.5em;line-height: 40px;color: #777777;margin-bottom: 30px;}
#modal{background:rgb(0,0,0,0.4);display:none;justify-content: center;flex-direction:column;width:100%;height:100%;position:fixed;top:0;left:0;z-index:60}
#modalinner{background-color:#fff;border:2px solid #ff0000;width:70%;margin:auto;min-height:600px;padding:2em;max-height:800px;overflow: auto;}
#modalinnerinner{width:100%}

.margin_30{margin:30px;}

option,select{
    text-transform: capitalize;
}
.oben{
    width:100%;
    height:10%;
    position:relative;
}
.mitte{
    width:100%;
    height:70%;
    max-height:70%;
    overflow:hidden;
    position:relative;
    white-space: nowrap;
}

.mittelinks{
    overflow: hidden;
    height: 70%;
    width: 20%;
    position: relative;
    white-space: normal;
    float: left;
}

.sidebox{
    padding:10px;
    /*max-width: 250px;*/
    margin:0 0 10px;
}

.sidebox:last-child {
    margin-bottom: 0;
}

.mittemitte{
    height:100%;
    width:65%;
    position:relative;
    float: left;
}
.mitterechts{
    height:100%;
    width:15%;
    position:relative;
    float: left;
}
.unten{
    width:100%;
    height:15%;
    position:relative;
}
.frontenwechsler_farbbox_smoother{
    opacity:0.0;
    transition: opacity 0.05s ease-in-out;
}

/*transitions / states*/
.akkordeon{max-height:0;transition:max-height .5s;overflow:hidden}

.akkordeon_open{
    max-height:400px;
    min-height: 400px;
    transition:max-height .5s;
    overflow-y:auto;
    margin-top:10px;
}

.akkordeon_arrow{float:right;}
.akkordeon_arrow_open{transform:rotate(180deg);}

.modalcloseer{float:right;margin:0;font-size: 22px;font-weight:bold;padding:0 8px 4px;display:none}
.inmodalimg {
    clear: both;
    float: left;
    margin-right: 40px;
    max-width: 500px;
}

.lightboximg{    object-fit: scale-down;
    width: 100%;
    max-height: 725px;}
/*Frontenwechsler*/
.frontenwechsel_frontenheadline{margin:0}
.frontenwechsler_frontenimgs{}
.frontenwechsler_frontenimgs select{margin-bottom:10px;}
.frontenwechsel_infobox{clear:both;}
.frontenwechseler-container{display:flex;}
.frontenwechseler-container .mittelinks{height:96%;padding-bottom:1%;min-width:265px;flex:1}
.frontenwechseler-container .mittelinks > div{min-width:20px;}
.frontenwechseler-container .mittemitte{float:unset;flex:5;}
.frontenwechseler-container .mitterechts{flex:1;float:unset;position:unset;}
.frontenwechseler-container .mitterechts > div{min-width:200px;height: 96.9%;}
    /* aenderungen jerome */
.frontenwechsel_infobox img{float:left;margin-right:10px;}
.frontenwechsel_infobox .image-box{float: left;white-space: normal;max-width: 100px;}
#imgC,#imgB{object-fit: scale-down;object-position: left;}

.flexcol{display:flex;flex-direction:column}
.fe1 {filter: url(#fecolor1);}
.fe2 {filter: url(#fecolor2);}
.fe3 {filter: url(#fecolor3);}
.fe4 {filter: url(#fecolor4);}
.fe1_e {filter: url(#fecolor1_e);}
.fe2_e {filter: url(#fecolor2_e);}
.fe3_e {filter: url(#fecolor3_e);}
.fe4_e {filter: url(#fecolor4_e);}
.mittemitte > img , #mainsvg > img{width: 100%;height: 100%;position: absolute;object-fit: cover;}
.mitterechts .sidebox{height:100%}
.griffimg{width:90px;}
.detimg{height: 90px;width: 90px;object-fit: cover;}
.frontimg ,.plattenimg,.griffimg,.korpusimg{margin:0 5px 5px 0}
.frontimg{height: 109px;width: 70px;}
/*griffpreview*/


/*Slotmachine I, egeräte*/
.slotmaschine-container .mittelinks{width:22%;max-width: 300px;}
.slotmaschine-container .mittemitte{width:78%;height:610px}

.slot_leftheadbox{margin:0 11px 15px;padding: 20px;}
.slot_leftprehead{text-transform: uppercase;}
.slot_lefthead{text-transform: uppercase;margin: 0;font-size: 26px;}
.slot_leftsubhead{margin:10px 0 0;}

#slotbrandtogglerbox{display:flex;justify-content: space-between;margin-bottom:20px}
.slotmachine_brandswitch{display:none;border:2px solid #000;}
.slotmachine_brandswitch img{width:60px;height:60px;filter: grayscale(100%);-webkit-filter: grayscale(100%);}
.slotmachine_brandswitch_active{border:2px solid #df1724;}
.slotmachine_brandswitch_active img{filter: unset;-webkit-filter: unset;}
#slot_pricedisplay{position:absolute;top:0;right:33px;color:#fff;font-size:24px}
#slot_pricedisplay h1{font-size:24px;margin-bottom:5px}


    .slotlogo h2{font-size: 26px;margin-top: 3px;}

    #slotstripholder{display:flex;width:85%;padding:5px 0 0 10px}
    /*box, in der die Items gelistet sind*/
    .slotwrap{
        width: 170px;
        padding-left: 10px;
        height: 334px;
        overflow: hidden;
        text-align: center;
        position: absolute;
        top:60px;
        z-index:2;
    }

.slotwrap_small{
    width: 110px;
    padding-left: 10px;
    height: 334px;
}

.slotmachine_eicon{max-width:60px;object-fit:scale-down;position: absolute;right: 0;}


.aufpreisbubble,.aufpreisbubble_blue{
    background: red;
    border-radius: 40px;
    width:39px;
    font-size: 12px;
    max-height: 69px;
    /* display: flex; */
    min-height: 31px;
    padding: 14px 4px 0 4px;
    font-weight: bold;
    position: absolute;
    margin: -75px 0 0 -4px;
    left: 100px;
    top:110px;
    white-space: nowrap;
}

.aufpreisbubble_blue{background: #fff;border:1px solid red;color:#000}


    /*Rahmen-Box & Schatten auf Rädchen*/
    /*eine Kachel im rädchen*/
    .slotwrap > .item{
        position: absolute;
        width: 75%;
        height: 120px;
        overflow: hidden;
        margin: 0 auto;
        padding: 5px;
        background-color: #f9f9f9;
        transform-origin: 50% 0;
        border: 5px solid rgba(234, 234, 234, 1);
        display: flex;
        flex-direction: column;
        justify-content: center;
        transition: transform .5s,opacity .6s,top .65s,transform-origin .5s;
    }

.slotwrap_small > .item{
    width: 80px;
    height: 80px;
}




    .slotwrap > .item >img{
        width: 100%;
        max-width: 200px;
        margin:auto;
        overflow: hidden;
        object-fit: contain;
        transition: opacity 0.5s ease-in-out;
    }
    .slotstrip{}
    /*Preisberechnungs-Anzeige*/
    #pricetag,#extratag,#totalpricetag{
        font-size:18px;
        font-weight:bold;
        /*background-color:#eaeaea;*/
        padding-left: 5px;
        padding-right: 5px;
        padding-top: 5px;
        padding-bottom: 5px;
    }
    .pricewrap{
        position:absolute;
        left:1646px;
        top:881px;
        width: 123px;
        height: 33px;
        text-align: right;
    }
    .extrawrap{
        position:absolute;
        left:1646px;
        top:915px;
        text-align: right;
        width: 123px;
    }
    .totalpricewrap{
        position:absolute;
        left:1646px;
        top:947px;
        text-align: right;
        width: 123px;
        color:#00b5e2;
    }
    /*Info-Felder zum gewählten Gerät*/
    .slotinfo{position:absolute;height:135px;width:160px;overflow:hidden;top:406px;padding:6px;padding-top:25px;font-size:12px;color:#fff;z-index:1}

.slotinfo_small{width:105px;}

    /*.slotback0{left:60px}/*193 raster*/
    /*.slotback1{left:240px}
    .slotback2{left:420px}
    .slotback3{left:600px}
    .slotback4{left:780px}/*10 gap, 183 raster*/
    /*.slotback5{left:980px}
    .slotback6{left:1160px}
    .slotback7{left:1340px}
    .slotback8{left:1520px}
    .slotback9{left:1700px}*/
    .slotback{background:#fff;flex:1;height:404px;box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);border:1px solid #777777;z-index:0;overflow:hidden;visibility:visible;opacity:1;transition:visibility .5s linear .3s,opacity .5s linear .3s,background .5s linear .3s;    display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;}
    .wrapslotback{flex:1;transition: max-width .3s ease-in-out;margin: 10px 5px;max-width:224px;}
    .wrapslotback_hidden{flex:1;max-width:0px;transition: max-width .3s ease-in-out .3s}
    .slothead{padding: .5em 1em;font-size: 16px;min-height: 60px;display: flex;flex-direction: column;justify-content: center;position: relative;z-index: 50;box-shadow: #555 1px 1px 12px 0px;    text-align: center;width:100%}
    .interliving_divisionline{width:2px; height:875px;position:absolute;top:87px;left:959px;background:#555}
    #slottogglerbox,#slottogglerbox_sink{display: flex;flex-wrap: wrap;justify-content: center;}
    #slotsinktogglerbox{display:flex;flex-wrap: wrap;margin:0 5px 15px;border-bottom:1px solid #777777}
    .slottogbut{border:1px solid #fff;padding:10px;box-shadow: #d6d4d4 3px 3px 10px 2px;margin: 0 4px 1em;height: 28px;max-width: 111px;text-align: center;justify-content: center;align-items: center;display: flex;flex:1;font-size:14px;min-width:100px;}

    .slotrabatt{border-collapse: collapse;position:absolute;top:887px; left:531px;}
    .slotrabatt td{border:1px solid #555555;padding:.5em;text-align: center;min-width: 65px;}
    .slotrabatt td.rabattselect{font-weight:bold;color:#fff;}
    .slotrabatt .tablehead{font-weight:bold}
    .vme_infohead{font-weight:bold;text-align: LEFT;}
    /*floating photo box*/
    .photo{background-color:#fff}
    /*floating photo box photo*/
    .photo .mainimg{flex:1;object-fit:scale-down}
    /*text in floating box*/
    .floatcaption{width:500px;position:unset;flex:1;order:2;text-align:left;font-size:14px}
    /*headline in floating box*/
    .floatcaphead{font-weight:bold}
    .slothidden{visibility:hidden;opacity:0;transition:visibility .3s linear,opacity .3s linear,background .3s linear;}

    .dklogo h2{font-family:Neuropol;font-size:10px}
/*End Slotmachine*/


/*finale listenansicht*/
#finalstep{}
.finalcolumn{flex:1;max-width:25%;padding: 0 20px;margin: 0 20px 0 0;}
.finalcolumn h3{text-transform: uppercase;font-size: 20px;letter-spacing: 1px;margin-bottom:10px;}

.finalcolumn img{width: 100%;object-fit: scale-down;max-height: 90px;object-position: left;}
#r-griff-image{margin-left:-15px;}

.final_onefeature{margin-bottom:120px;}
.finalcolumn .keywords{font-size: 10px;margin: 10px 0;max-height: 58px;overflow: hidden;min-height: 58px;width: 80%;min-width: 190px;}
.finalcolumn .name{margin: 10px 0 0;display:block;max-width:100px}
#final_egeraet{flex:2;max-width:40%}

.final_infoitem{min-height:60px;max-height:120px;margin-bottom:30px;}
.final_infoitem_label{width:120px;font-size:14px;}
#r-devices-list{display:flex;flex-wrap:wrap;}
.final_oneedevice{max-width:197px;flex:1;margin:10px 20px 0 0;}


/*finale, web-checkout*/
#finalstep_web{font-size:20px;}
#finalstep_web #customermessage{width:400px;height:200px}
#finalstep_web fieldset{margin-bottom:20px;}
#finalstep_web .finalstep_confirm{font-size:50px;margin:100px 30px;}

.option-mehrpreis{
    margin-top: -68px;
    padding: 0 10px;
    background: rgb(255,255,255,0.7);
    position: relative;
    color:#000;
}
.options-explanation{font-size: 20px;margin:0 20px 20px 0}
#webcheckout_overview{display:none}


.footbar {
    z-index:5;
    background: #1f1f1f;
    display: flex;
    justify-content: space-between;
    height: 60px;
    width: 100%;
    align-items: center;
    position: fixed;
    bottom: 0;
    left:0;
}
.footbar_logo{padding:0 10px;}