/*
******************************
** Styles for tc-brackenheim.de
**
** Breakpoints (frueher mixins/_mq.scss) stehen ausgeschrieben. Die Datei laeuft
** nicht durch den Vite-Build - sie wird per includeCSS direkt ausgeliefert -,
** und @custom-media versteht kein Browser nativ.
**
**   xl 1460px | oversize 1350px | totalwidth 1250px | colbreak 1000px
**   singlecol 750px | menubreak 640px | mini 450px
******************************
*/

.contacts {
    margin-top: 40px;
}

.header .nav--main {
    border-color: #6ED100 !important;

    .nav-header button {
        color: #6ED100 !important;
    }
}

.nav--main .nav-list {
    text-align: center;

    .nav-list-item {
        position: relative;
    }

    &.nav-list--level1 > .nav-list-item:first-child > a {
        padding-left: 30px;
    }

    &.nav-list--level1 > .nav-list-item:first-child > a:after {
        margin-left: -10px;
    }

    &.nav-list--level2 {
        text-align: left;

        @media screen and (max-width: 1000px) {
            text-align: center;
        }

        > .nav-list-item > a {
            @media screen and (max-width: 1000px) {
                padding-left: 20px;
            }
        }
    }
}

.content--aside .logo {
    text-align: center;
    padding-left: 40px;

    @media screen and (max-width: 1000px) {
        padding-left: 0;
    }
}

.album-item {
    margin-bottom: 20px;
}

.f-button.is-arrow {
    --f-arrow-bg: transparent;
    --f-arrow-hover-bg: transparent;
    --f-arrow-active-bg: transparent;
    --f-arrow-color: #6ed100;
    --f-arrow-hover-color: rgb(var(--color-minor));
    /* frueher left/right: 10px auf den absolut positionierten Pfeilen */
    --f-arrow-pos: 10px;

    font-size: var(--fontsize-l);
    transition: all 0.2s ease-in-out;

    &:hover {
        transition: all 0.2s ease-in-out;
    }
}

.f-carousel__dot.is-selected {
    --f-carousel-dot-selected-bg: #6ED100;
}

.tcb .footer {
    border-top-color: #6ED100 !important;
}

.tcb.sticky {
    .content {
        padding-top: 80px;

        @media screen and (max-width: 1000px) {
            padding-top: 40px;
        }
    }

    .nav--main {
        position: fixed;
        width: 100%;
        background: rgb(var(--color-minor));
        left: 0;
        top: 0;
        border-bottom: 1px solid rgb(var(--color-shade));
        z-index: 2;

        @media screen and (max-width: 1000px) {
            border: 0;
        }
    }
}