/*
Theme Name: Beaver Builder Child Theme
Theme URI: https://www.wpbeaverbuilder.com
Version: 1.0
Description: An example child theme that can be used as a starting point for custom development.
Author: The Beaver Builder Team
Author URI: https://www.fastlinemedia.com
template: bb-theme
*/

/* Add your custom styles here...Remember to change the Version number above! */ 


:root {
    --color-primary: #0063AF;
    --color-primary-dark: #053A80;
    --color-secondary: #FFD400;
    --color-error: #D34E24;
    --color-black: #000000;
    --color-grey-800: #333333;
    --color-grey-600: #383737;
    --color-grey-400: #A6A6A6;
    --color-grey-200: #E0E0E0;
    --color-grey-100: #F0F0F0;
    --color-white: #FFFFFF;

}

#ff-mmenu {
    --mm-color-background: #000000;
    --mm-color-border: rgb(255 255 255 / 0.25);
    --mm-color-icon: #FFFFFF;
    --mm-color-text: #FFFFFF;
    --mm-color-text-dimmed: #FFFFFF;
    --mm-color-background-highlight: rgb(0 0 0 / 0.05); 
    --mm-color-background-emphasis: #0063AF; 
    --mm-color-focusring: #FFD400;
}

h3, .h3 {
    font-weight: 400;
}

h4, .h4 {
    font-weight: 600;
}

h5, .h5 {
    font-weight: 600;
}

h6, .h6 {
    font-weight: 600;
}

.uabb-info-list-content-wrapper .uabb-info-list-content {
    :is(h2, .h2, h3, .h3, h4, .h4, h5 .h5, h6, .h6) {
        margin-bottom: 0.5rem;
    }
}


a {
    &:hover,
    &:focus {
        text-decoration: none;
    }
}    




/* Buttons */

.uabb-module-content.uabb-creative-button-wrap a {
    .uabb-creative-button-icon {
        font-size: 16px;        
    }

    &:hover .uabb-creative-button-icon {
        transform: translateX(7px);
    }
}

.uabb-module-content.uabb-creative-button-wrap a {
    padding: 15px 24px !important;
}

.uabb-module-content.uabb-creative-button-wrap a.btn-text {
    padding: 0 24px 0 0 !important;
}



.btn-gradient {
    border: 0;

    &:hover,
    &:focus {
        border: 0;
        background: linear-gradient(to right,var(--color-primary) 0%,var(--color-primary-dark) 100%) !important;
    }
}

.btn-outline-primary {
    .uabb-creative-button-icon {
        color: var(--color-primary) !important;
    }

    &:hover,
    &:focus {
        .uabb-creative-button-icon {
            color: var(--color-white) !important;
        }
    }

}

.btn-outline-secondary {
    .uabb-creative-button-icon {
        color: var(--color-secondary) !important;
    }

    &:hover,
    &:focus {
        .uabb-creative-button-icon {
            color: var(--color-black) !important;
        }
    }
}

.btn-text {
    .uabb-creative-button-icon {
        color: var(--color-primary) !important;
    }

    &.btn-negativ {
        .uabb-creative-button-icon {
            color: var(--color-secondary) !important;
        }
    }
}

.uabb-module-content.uabb-creative-button-wrap a.btn-cta {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}

/* mmenu */

#mm-menu-btn {
    .fl-button-icon {
        font-size: 20px;
    }
}

#ff-mmenu {

    .menu-item {
        &:hover,
        &:focus {
            .mm-listitem__text {
                background: var(--color-primary);
            }

            .mm-listitem__btn {
                background: var(--color-primary-dark);
            }
        }
    }

    .current_page_item {
        .mm-listitem__text {
            background: var(--color-primary-dark);
        }

        .mm-listitem__btn {
            background: var(--color-primary);
        }
    }
}


/* Breadcrumb */
.rank-math-breadcrumb {
    p {
        margin-bottom: 0;
    }

    a {
        text-decoration: none;

        &:hover,
        &:focus {
            text-decoration: underline;
        }
    }
}



/* Hauptmenue */
#menu-main-menue {
    > li:not(:last-of-type) {
        margin-right: 60px;               
    }

    > li.current-menu-item {
        a {
            color: var(--color-secondary);
        }

        .sub-menu {
            a {
                color: var(--color-white);

                &:hover,
                &:focus {
                    color: var(--color-secondary);
                }
            }
        }
    }

    > li:not(.cta-link) {
        > a,
        > .fl-has-submenu-container > a {
            position: relative;            
            &:before,
            &:after {
                content: "";
                position: absolute;
                height: 2px;
                width: 0;
                background-color: var(--color-secondary);
                transition: 0.5s;
            }
            &:after {
                left: 0;
                bottom: 0px;
            }
            &:before {
                right: 0;
                top: 0px;
            }
            &:hover:after,
            &:hover:before {
                width: 100%;
            }
        }
        
        > .fl-has-submenu-container > a {
            padding-right: 22px;
        }
    }

    > .menu-item-has-children {
        &:hover,
        &:focus {
            .fl-has-submenu-container > a {
                &:after,
                &:before {
                    width: 100%;
                }
            }
        }
    }

    > li:not(.cta-link).current-menu-item > a,
    > li:not(.cta-link).current-menu-item .fl-has-submenu-container > a,
    > li:not(.cta-link).current-menu-parent .fl-has-submenu-container > a {
        color: var(--color-secondary);
    }

    > li.cta-link {
        a {
            padding-left: 16px;
            padding-right: 16px;
            background-color: var(--color-secondary);
            color: var(--color-primary-dark);

            &:hover,
            &:focus {
                background-color: var(--color-white);
            }
        }
    }



    .sub-menu {
        background-image: linear-gradient(90deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);

        > li > a:hover,
        > li > a:focus,
        > li.current-menu-item > a {
            text-decoration: underline;
            text-decoration-color: var(--color-secondary);
            text-decoration-thickness: 2px;
            text-underline-offset: 4px;
        }
    }
}


/* Icon-Boxes */

.icon-box {
    .uabb-module-content.uabb-creative-button-wrap a {
        padding: 0 24px 0 0 !important;

        .uabb-creative-button-icon {
            color: var(--color-primary);
        }
    }
}

/* Icon-List */

.fl-module-list .fl-list-item-content .fl-list-item-content-icon {
    vertical-align: top;
}

/* Listen */

.fl-rich-text {
    ul, 
    ol {
        li {
            margin-bottom: 12px;
        }
    }
}


/* Carousel */

.eigenmarken-slider {
    .ff-carousel {
        .ff-carousel-image {
            border: 4px solid var(--color-grey-100);
        }
    }
}


/* FF Timeline */

.ff-milestones {
    .nav-icon {
        color: var(--color-black);
        font-size: 36px;
        height: 56px;
        padding: 10px 0;
        position: relative;

        &.nav-top {
            &::after {
                content: '';
                display: block;
                height: 60px;
                width: calc(100% - 30px);
                margin-left: 30px;
                position: absolute;
                z-index: 5;
                top: 56px;
                background: linear-gradient(0deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
            }        
        }

        &.nav-bottom { 
            padding: 20px 0 0 0;
               
            &::before {
                content: '';
                display: block;
                height: 60px;
                width: calc(100% - 30px);
                margin-left: 30px;
                position: absolute;
                z-index: 5;
                bottom: 56px;
                background: linear-gradient(0deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
            }
        }
    }

    .milestone-entry {
        border-color: var(--color-black);
        .title {
            font-size:26px;
            padding-bottom: 2px;
            &:after {
                border-color: var(--color-white);
                border-radius: 100%;
                background: var(--color-primary);
            }
        }

        .text {
            padding-top: 6px;
            padding-bottom: 20px;
            &::before {
                content: none;
            }
        } 
        
        &:first-of-type {
            padding-top: 40px;
        }
    }
}


/* FF Tabbox */

.ff-tabboxes {

    .ff-tab-title {
        background: var(--color-grey-100);
    }

    label.ff-tab-title {
        font-weight: 600;
        &:hover {
            background: linear-gradient(to right,var(--color-primary-dark) 0%,var(--color-primary) 100%);
        }
    }

    label.ff-tab-title i {
        color: var(--color-primary);  
        font-size: 24px;      
    }

    label.ff-tab-title:hover i {
        color: var(--color-white);
    }

    #ff-tabbox1:checked ~ label[for="ff-tabbox1"] i, 
    #ff-tabbox2:checked ~ label[for="ff-tabbox2"] i, 
    #ff-tabbox3:checked ~ label[for="ff-tabbox3"] i, 
    #ff-tabbox4:checked ~ label[for="ff-tabbox4"] i {
        color: var(--color-secondary);
    }

    label.ff-tab-title::after {
        color: var(--color-primary-dark);
    }

    label.ff-tab-title:hover::after {
        color: var(--color-white);
    }

    ul {
        list-style-type: none;
        padding-left: 0;
        
        li {
            position: relative;
            padding-left: 26px;
            margin-bottom: 1rem;

            &:before {
                content: '\f058';
                font-family: 'Font Awesome 6 Pro';
                font-weight: bold;
                color: var(--color-primary);
                position: absolute;
                left: 0;
            }

            
        }
    }
}

#ff-tabbox1:checked ~ label[for="ff-tabbox1"], 
#ff-tabbox2:checked ~ label[for="ff-tabbox2"], 
#ff-tabbox3:checked ~ label[for="ff-tabbox3"], 
#ff-tabbox4:checked ~ label[for="ff-tabbox4"] {
    background: linear-gradient(to right,var(--color-primary-dark) 0%,var(--color-primary) 100%)
}

/* Formular */

.wpforms-widget {
    .form-important-info {
        padding: 20px 24px !important;
        background: var(--color-grey-100);
        border-radius: 20px;
        margin-top: 30px;
        margin-bottom: 30px;
        max-width: 900px;
        margin-left: auto;
        margin-right: auto;
    }

    .wpforms-field-repeater-block-title:before {
        border-top-color:var(--color-primary);
    }

    .bestellform .wpforms-field-repeater .wpforms-field-repeater-display-blocks-buttons[data-button-type="buttons_with_icons"] {
        margin-top: 1px;
        
        button {
            background: var(--color-secondary) !important;
            color: var(--color-black) !important;
            border: 2px solid var(--color-secondary);            
       }
    } 

    .bestellform .wpforms-field.wpforms-field-repeater.wpforms-field-repeater-display-blocks {
        h3.wpforms-field-label,
        h3.wpforms-field-repeater-block-title {
            margin-top: 15px;
            margin-bottom: 5px;
            padding-top: 15px;
            font-size: 18px !important;
        }
    }

    .wpforms-submit.form-send-btn{
        border: 0;
        border-radius: 0;
        margin-top: 20px;
        background: linear-gradient(to right,var(--color-primary-dark) 0%,var(--color-primary) 100%) !important;
        padding: 15px 24px;
        height: auto;

        &:hover,
        &:focus {
            border: 0;
            background: linear-gradient(to right,var(--color-primary) 0%,var(--color-primary-dark) 100%) !important;
        }
    }
}

/* Bestellformular repeater Buttons hart ueberschreiben */
div.wpforms-container.wpforms-container-full.bestellform .wpforms-form .wpforms-field-repeater .wpforms-field-repeater-display-blocks-buttons button {
    opacity: 1 !important;
    max-width: 48%;

    &:hover,
    &:focus {
        background: transparent !important;
        opacity: 1 !important;
    }
}

div.wpforms-container.wpforms-container-full.bestellform {
    .form-info-box {
        background-color: var(--color-secondary);
        padding: 23px 30px 5px 30px;
        text-align: center;
        border-radius: 20px;
        margin-top: 30px;
        margin-left: auto;
        margin-bottom: 20px;
        margin-right: auto;
        max-width: 770px;
    }

}





/* Footer */
#menu-footer-meta {
    margin-bottom: 0;
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
}

footer {
    a {
        &:hover,
        &:focus {
            text-decoration: underline !important;
        }
    }
}

/* Scroll to top */
#fl-to-top {
    background-color: var(--color-primary);
    border: 1px solid var(--color-white);

    &:hover,
    &:focus {
        background-color: var(--color-white);
        border-color: var(--color-primary);

        i {
            color: var(--color-primary);
        }
    }
}

@media screen and (min-width: 300px) {
    #menu-footer-meta {
        justify-content: space-between;
    }
    
}

@media screen and (min-width: 991px) {
    #menu-footer-meta {
        li {
            margin-bottom: 0;
            margin-right: 80px;
        }
    }    
}

@media screen and (min-width: 992px) {
    /* FF Timeline */
    .ff-milestones {
        gap: 0 20px;
        grid-template-columns: none;
        grid-template-rows: 56px auto;
    }
}



@media (min-width: 1200px) {

    /* Hauptmenue */
    #menu-main-menue {
        > li:not(:last-of-type) {
            margin-right: 70px;               
        }
    }

    /* FF Tabbox */
    .ff-tabboxes {
        .ff-tab-body-headline {
            font-size: 30px;
            font-weight: 500;
            margin-bottom: 8px;
        }

        label.ff-tab-title {
            font-size: 26px;
            line-height: 1.5;
            font-weight: 400;
        }

        label.ff-tab-title i {
            font-size: 64px;
        }

        label[for="ff-tabbox1"], 
        label[for="ff-tabbox2"] {
            margin-top: 0;
        }

        label[for="ff-tabbox1"], 
        label[for="ff-tabbox4"] {
            background: var(--color-grey-200);
        }
        
        #ff-tabbox1:checked ~ label[for="ff-tabbox1"]::before, 
        #ff-tabbox2:checked ~ label[for="ff-tabbox2"]::before,
        label[for="ff-tabbox1"]::before,
        label[for="ff-tabbox2"]::before {
            content: none;
        }
    }
}