/*
 * layout.css
 * Diese Datei enthält die globalen Layout-Stile für:
 * - Header
 * - Footer
 * - Breadcrumb
 * - Globale
  */

/* Header */
header {
    border-bottom: 1px solid var(--blue88);

    .metanav {
        background-color: var(--blackF0);
        height: 48px;
        display: flex;
        align-items: center;

        .metanav__link:not(:first-child) {
            margin-left: var(--space-md);
        }

        .metanav__link {
            display: inline-flex;
            align-items: center;
            font-size: 0.75rem;
        }

        .metanav__link::before {
            content: "";
            width: 20px;
            height: 20px;
            margin-right: 8px;
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            flex-shrink: 0;
        }

        .explainaccess::before {
            background-image: url('/icons/explain-access.svg');
            width: 22px;
            height: 15px;
        }
    }

    .mainnav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
        height: 80px;
        box-sizing: border-box;

        .mainnav__brand {
            display: flex;
            align-items: center;
        }

        .mainnav__logo {
            height: 48px;
            flex-shrink: 0;
        }

        .mainnav__title {
            margin: 0 0 0 10px;
            font-size: 1.125rem;
            line-height: inherit;

            b {
                display: block;
            }
        }

        .mainnav__nav {
            display: flex;
            gap: 30px;
            align-items: center;
        }

        .mainnav__link {
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 4px;

            &.faq::after {
                content: "›";
                font-size: 2rem;
                line-height: 1;
                display: inline-block;
                transform: rotate(90deg);
                padding-bottom: 5px;
            }
        }

        .mainnav__linkbutton::before {
            content: "";
            width: 20px;
            height: 17px;
            background-image: url('/icons/login.svg');
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            flex-shrink: 0;
        }

        .mainnav__user {
            font-weight: 800;
        }
    }
}

/* Breadcrumb */
.breadcrumb {
    margin-top: 16px;

    .breadcrumb__list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        align-items: center;

        .breadcrumb__item {
            display: inline-flex;
            align-items: center;
            font-size: 0.75rem;

            &:not(:last-child)::after {
                content: "›";
                margin: 0 8px;
                font-size: 1rem;
            }

            .breadcrumb__link {
                font-size: 0.75rem;
            }

            .breadcrumb__current {
                font-size: 0.75rem;
                font-weight: 700;
            }
        }
    }
}

/* Footer */
footer {
    border-top: 1px solid var(--blue88);

    .container {
        padding: 16px 20px 48px;
        justify-content: space-between;

        .footer__links {
            display: flex;
            gap: 20px;
        }

        .footer__logo {
            height: 48px;
        }

    }
}

/* Responsive */
/*@media (max-width: 768px) {*/
/*    .mainnav {*/
/*        flex-direction: column;*/
/*        height: auto;*/
/*        padding: 15px 20px;*/
/*        gap: 15px;*/
/*    }*/

/*    .mainnav__nav {*/
/*        flex-direction: column;*/
/*        gap: 10px;*/
/*    }*/

/*    .mainnav__link {*/
/*        padding: 8px 0;*/
/*    }*/

/*    .footer__content {*/
/*        flex-direction: column;*/
/*        text-align: center;*/
/*    }*/

/*    .footer__links {*/
/*        justify-content: center;*/
/*    }*/
/*}*/