/* Konfigurator */

.page-148 .content-primary{
    padding: 0;
}

.page-148 .content-primary .container-fluid,
.page-148 .content-primary .container{
    padding: 0;
    max-width: 100%;
}

.page-148 .page-masthead .container-fluid .row > div {
    padding: 0 15px;
}

.konfigurator {
    width: 100%;
    height: 100%;
    background-color: rgb(233,233,233);
    display: flex;
    position: relative;
    max-height: 850px;

}


.konfigurator .menu {
    position: relative;

    flex: 1 1 10%;
    max-width: 10%;
    background-color: #FBFBFB;
    z-index: 5;
}

.konfigurator .kategorien{
    height: 100%;
}

.konfigurator .kategorien ul {
    height: 100%;
    list-style-type: none;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    transition: all 0.3s ease;
}



.konfigurator .kategorien ul li {
    width: 100%;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    box-sizing: border-box;
    transition: all 0.45s cubic-bezier(0.52,0.01,0.16,1);
}
.konfigurator .hauptkategorien{
    z-index: 99999;
    background: #fff;
    width: 11vw;
    counter-reset: section;
}

.konfigurator .hauptkategorien li{
    height: 20%;
    text-transform: uppercase;
    position: relative;
    padding: 10%;
}
.konfigurator .hauptkategorien li::before {
    position: absolute;
    font-size: 4vw;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%,-50%,0);
    color: rgba(255,255,255,0.5);
    counter-increment: section;
    content: counter(section)".";
}
.konfigurator .hauptkategorien li:first-child{
    background: #011C33;
}
.konfigurator .hauptkategorien li:nth-child(2){
    background: var(--theme-primary);
}
.konfigurator .hauptkategorien li:nth-child(3){
    background: #545C60;
}
.konfigurator .hauptkategorien li:nth-child(4){
    background: #98a6ad;
    /*color: #545C60;*/
}
.konfigurator .hauptkategorien li:nth-child(5){
    background: #B2BEA7;
}
.konfigurator .hauptkategorien li:hover{
    background: #CE0D0D;
    color: #fff;
}
.konfigurator .subkategorie {
    background: rgba(11, 91, 162, 0.8);
    width: 25vw;
    max-width: 400px;
    position: absolute;
    transform: translateX(-100%);
    overflow: auto;
    z-index: -1;
    display: flex;
    flex-flow: row wrap;
    align-content: flex-start;
}
.konfigurator .hausstil {
    background: rgba(1, 28, 51, 0.9);
}
.konfigurator .farbe {
    background: rgba(84, 92, 96, 0.8);
}

.konfigurator .mauerhoehe {
    background: rgba(152, 166, 173,0.8);
}

.konfigurator .zubehoer {
    background: rgba(178, 190, 167, 0.8);
}
.konfigurator .subkategorie li {
    flex: 0 0 50%;
    padding: 20px 15px;
    transition: all 0.45s cubic-bezier(0.52,0.01,0.16,1);
}
.konfigurator .subkategorie li:hover, .konfigurator .subkategorie .active{
    background: rgba(55,55,55,0.4);
}
.konfigurator .subkategorie li img{
    width: 100%;
    height: auto;
    padding-bottom: 10px;
    transition: all 0.45s cubic-bezier(0.52,0.01,0.16,1);
}
.konfigurator .kategorien .subkategorie.active{
    transform: translateX(11vw);
}
.konfigurator .subkategorie::before,
.konfigurator .subkategorie::after{
    content: "";
    color: #fff;
    padding: 35px 15px 10px 15px;
}

.konfigurator .subkategorie .weiter-btn-wrap{
    display: block!important;
    flex: 1 1 100%;
}

.konfigurator .subkategorie .weiter-btn-wrap:hover {
    background: none !important;
}


.konfigurator .stil::before {
    content: "Zuerst wählen Sie den entsprechenden Anwendungsstil aus.";
}
.konfigurator .mauersystem::before {
    content: "Wählen Sie jetzt zwischen unseren Mauer-Systemen Vario-Line® und Trend-Line aus!";
}
.konfigurator .farbe::before {
    content: "Entdecken Sie die vielen Farbvarianten und wählen Sie Ihre Lieblingsfarbe aus!";
}
.konfigurator .mauerhoehe::before {
    content: "Ob niedrige Grundstücksabgrenzung oder hoher Sichtschutz zum Nachbarn – hier wählen Sie die gewünschte Mauerhöhe.";
}
.konfigurator .accessoires::before {
    content: "Entdecken Sie jetzt die vielen passenden Accessoires und machen Sie Ihre neue Mauer zum besonderen Hingucker!";
}
/*
.konfigurator .accessoires::after {
  content: "Sind Sie zufrieden mit Ihrer Auswahl und möchten ein Angebot anfragen? <br><br>Dann laden Sie sich direkt Ihr Bild herunter und fordern Sie Ihr individuelles Angebot bei Ihrem Baustoffhändler an.";
}

 */



.konfigurator .vorschau {
    flex: 1 1 90%;
    max-width: 90%;
    position: relative;
    background: #efefef;
    max-height: 850px;
    overflow: hidden;
}

.konfigurator .vorschau img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    position: fixed;
    z-index: -1;
    /*transition: all 0.45s cubic-bezier(0.52,0.01,0.16,1);*/
    transform: translateX(100%);
}
.konfigurator .vorschau .active {
    position: relative;
    z-index: 1;
    transform: translateX(0);
}
.konfigurator .vorschau .error {
    font-size: 3vw;
    text-align: center;
    display: block;
    color: red;
    top: 50%;
    position: absolute;
    transition: all 0.45s cubic-bezier(0.52,0.01,0.16,1);
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
    opacity: 0;
}
.konfigurator .vorschau .error.active {
    z-index: 1;
    opacity: 1;
}
.konfigurator span.small {
    font-size: 70%;
    padding: 10px 0;
}
.konfigurator .icon{
    max-width: 30px;
    height: 30px;
    position: absolute;
    bottom: 10px;
    right: 10px;
    transition: all 0.45s cubic-bezier(0.52,0.01,0.16,1);
}
.konfigurator .hauptkategorien li.active .icon{
    transform: rotate(180deg);
}


.konfigurator .hide{
    display: none;
}

.konfigurator svg {
    height: 100%;
}



/* ---------------------------------------------------------------------- */
/* Social-Nav */
/* ---------------------------------------------------------------------- */

/* Fixed/sticky icon bar (vertically aligned 50% from the top of the screen) */

.action-nav {
    position: fixed;
    bottom: 0;
    top: auto;
    right: 0;
    display: flex;
    z-index: 99;
}

/* Style the icon bar links */
.action-nav a {
    background: var(--theme-primary);
    display: flex;
    text-align: center;
    padding: 8px 12px;
    margin-bottom: 3px;
    transition: all 0.3s ease;
    color: white;
    font-size: 20px;
    position: relative;
    height: 55px;
    width: 55px;
}
.action-nav svg g, .action-nav svg path {
    fill: #fff;
}

.action-nav a:last-child{
    background: #fff;

}

.action-nav a:last-child svg path {
    fill: #545C60;
}

.action-nav a:hover {
    background-color: #000;
    text-decoration: none;
}
.action-nav a:last-child:hover svg path{
    fill: #fff;
}

.action-nav span {
    text-transform: uppercase;
    position: absolute;
    right: 55px;
    height: 100%;
    background: rgba(11,91,162,0.8);
    top: 0;
    display: flex;
    font-size: 16px;
    padding: 15px 11px;
    transition: all 0.3s ease;
    opacity: 0;
}

.action-nav svg {
    width: auto;
    min-width: 31px;
}

.action-nav a:hover span{
    opacity: 1;
}


.overlay-content-wrap {
    position: fixed;
    width: 100%;
    right: 0;
    top: 0;
    left: 0;
    color: #333;
    transition: all 0.5s ease-out;
    z-index: -1;
    height: 100%;
}

.overlay-content-wrap.open{
    z-index: 10;
}

.overlay-content > div {
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
    opacity: 0;
    position: absolute;
    transition: all 0.5s ease-out;
    width: 50%;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%,-50%,0);
}

.overlay-content > div.open {
    opacity: 1;
    background: #fff;
    z-index: 1;
}

.overlay-content .overlay-item-header {
    background: var(--theme-primary);
    padding: 0.5rem 0 0.5rem 2rem;
    width: 100%;
    color: #fff;
}

.overlay-content .overlay-item-body{
    padding: 2rem;
}

.overlay-content .overlay-item-body strong{
    color: var(--theme-primary);
}

.overlay-item {
    font-size: 1.2rem;
}

.overlay-content #overlay-phone svg{
    max-width: 70px;
    padding-right: 1rem;
}

.overlay-content #overlay-phone svg g{
    fill: #545C60;
}

.overlay-content #overlay-phone .phone-text {
    display: flex;
    align-items: center;
}

.overlay-content #overlay-phone .big-phone-number {
    font-size: 5vw;
    font-weight: bold;
    color: #545C60;
}

.overlay-content #overlay-phone .big-phone-number a{
    color: #545C60;
}

.overlay-content #overlay-phone .big-phone-number a:hover {
    text-decoration: none;
}

.overlay-content-wrap .btn-primary {
    display: inline-block;
    padding: 0.5rem;
    cursor: pointer;
}

.overlay-menu-close {
    top: 10px;
    width: 20px;
    height: 20px;
    position: absolute;
    right: 10px;
    z-index: 9999;
}

.overlay-menu-close span {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.overlay-menu-close span::before, .overlay-menu-close span::after {
    content: '';
    width: 100%;
    height: 2px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 0;
    transition: 0.34s cubic-bezier(0.52,0.01,0.16,1);
}

.overlay-menu-close span:nth-child(1)::before {
    transform: rotate(45deg) translateX(0) scaleX(1);
    transition-delay: 0.12s;
}

.overlay-menu-close span:nth-child(1)::after {
    transform: rotate(-45deg) translateX(0) scaleX(1);
    transition-delay: 0.22s;
}

.overlay-menu-close span:nth-child(2)::before {
    transform: rotate(45deg) translateX(-70%) scaleX(0);
}

.overlay-menu-close span:nth-child(2)::after {
    transform: rotate(-45deg) translateX(-70%) scaleX(0);
}

.overlay-menu-close:hover span:nth-child(1)::before, .overlay-menu-close:hover span:nth-child(1)::after {
    transition-delay: 0s;
}

.overlay-menu-close:hover span:nth-child(1)::before {
    transform: rotate(45deg) translateX(70%) scaleX(0);
}

.overlay-menu-close:hover span:nth-child(1)::after {
    transform: rotate(-45deg) translateX(70%) scaleX(0);
}

.overlay-menu-close:hover span:nth-child(2)::before {
    transform: rotate(45deg) translateX(0) scaleX(1);
    transition-delay: 0.22s;
}

.overlay-menu-close:hover span:nth-child(2)::after {
    transform: rotate(-45deg) translateX(0) scaleX(1);
    transition-delay: 0.32s;
}


#overlay-download a img{
    display: none!important;
}

#anfrageKonfigurator-901 h2{
    margin-top: 0;
}

#anfrageKonfigurator-901 label {
    display: none;
}

#anfrageKonfigurator-901 .form-check label{
    display: block;
}

#anfrageKonfigurator-901 .form-check{
    padding-left: 0;
}

#anfrageKonfigurator-901 #anfrageKonfigurator-901-checkbox-1 {
    margin-right: 10px;
}




#anfrageKonfigurator-901 .checkbox label{
    display: inline;
}

#anfrageKonfigurator-901 .form-check {
    padding-left: 0;
}

#anfrageKonfigurator-901 input[type="checkbox"]{
    display: none;
}

#anfrageKonfigurator-901 input[type="checkbox"] + label{
    cursor: pointer;
}

#anfrageKonfigurator-901 input[type="checkbox"] + label::before {
    width: 15px;
    height: 15px;
    border-radius: 0;
    border: 1px solid #ccc;
    background-color: #fff;
    display: block;
    content: "";
    float: left;
    margin-right: 5px;
    margin-top: 7px;
}

#anfrageKonfigurator-901 input[type="checkbox"]:checked + label::before {
    box-shadow: inset 0 0 0 3px #fff;
    background-color: var(--theme-primary);
}


.ausgewaehlt {
    display: flex;
    flex-flow: row wrap;
    padding: 0;
    column-gap: 10px;
}

.ausgewaehlt li {
    list-style: none;
    flex: 1;
}

.ausgewaehlt li img{
    width: 100%;
    height: auto;
    border: 1px solid #eee;
}

.ausgewaehlt li span {
    font-size: 60%;
    text-transform: uppercase;
    line-height: 1.4 !important;
    display: block;
    margin: 10px 0;
}

@media (min-width: 992px){

    .action-nav {
        display: block;
        top: 50%;
        bottom: auto;
        right: 0;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }

}

@media (min-width: 1200px) {
    .container {
        max-width: 1280px;
    }
    .main-menu .nav-item .nav-link {
        font-size: 98%;
    }
}


@media (max-width: 768px){

    .konfigurator{
        height: 75vh;
    }
    .konfigurator .kategorien ul{
        font-size: 11px;
    }
    .konfigurator .kategorien ul li svg{
        display: none;
    }
    .konfigurator .hauptkategorien li {
        display: flex;
        justify-content: center;
    }
    .konfigurator .hauptkategorien li span{
        transform: rotate(-90deg);
        position: relative;
        align-self: center;
    }
    .konfigurator .subkategorie {
        width: 50vw;
    }
    .overlay-content{
        width: 100%;
    }
    .action-nav a {
        width: 45px;
        height: 45px;
    }
    .action-nav a span{
        display: none;
    }

    .overlay-content > div {
        width: 92%;
        transform: translate3d(-50%,-50%,0);
    }
    #anfrageKonfigurator-901 h2,
    #anfrageKonfigurator-901 input,
    #anfrageKonfigurator-901 textarea,
    #anfrageKonfigurator-901 span{
        font-size: 12px;
    }
    .ausgewaehlt li span {
        display: none;
    }
    form .col-lg-6 {
        width: 50%;
    }

    #overlay-phone .phone-contact, .overlay-content strong, .overlay-content p, .overlay-content .btn-primary{
        font-size: 85%;
    }

}