header {
    height: var(--header-height);
    width: 100vw;
    background-color: var(--background);
    box-shadow: var(--shadow);
    color: var(--font-color-default);
    position: fixed;
    z-index: 999;
}

.main {
    padding-top: var(--header-height);
}

header .header-container .header-logo a > img {
    height: 120px;
    min-height: 120px;
    max-height: 120px;
}

    header .header-container {
        box-sizing: content-box;
        display: flex;
        position: relative;
        height: var(--header-height);
        max-width: var(--max-width-container);
        margin-left: auto;
        margin-right: auto;
        padding-left: var(--spacing-x-container);
        padding-right: var(--spacing-x-container);
    }

        header .header-container .header-logo {
            display: flex;
            align-items: center;
            justify-content: center;
            height: var(--header-height);
            width: var(--header-height);
            margin-right: 100px;
            background: var(--telekom-color-primary-standard);
        }
            header .header-container .header-logo svg,
            header .header-container .header-logo svg image {
                width: 52px;
                height: 60px;

            }
    header .header-container .body {
        padding: 0;
        padding-left: 1rem;
        display: block;
        flex-basis: 0;
        flex-grow: 1;
        flex-shrink: 1;
        grid-column-end: span 14;
        grid-column-start: 3;
        margin-left: 0;
    }

        header .body .top-bar {
            align-items: end;
            display: flex;
            width: 100%;
            height: var(--height-top-bar);
            font-size: var(--font-size-top-bar);
        }

            header .body .top-bar .top-app-name {
                display: block;
                margin-right: var(--columns-gap-container);
                height: inherit;
            }

                header .body .top-bar .top-app-name .app-name-text {
                    align-items: flex-end;
                    display: inline-flex;
                    font-size: var(--font-size-app-name);
                    font-weight: var(--font-weight-extra-bold);
                    line-height: var(--line-height-app-name);
                    color: var(--telekom-color-primary-standard);
                    letter-spacing: 0.02em;
                    text-decoration: none;
                    height: inherit;
                }

            header .body .top-bar .top-body {
                display: inline-flex;
                flex: 1 1 0;
                justify-content: flex-end;
                height: inherit;
            }

                header .body .top-bar .top-body .lang-switcher {
                    display: inline-flex;
                    align-items: flex-end;
                }

                    header .body .top-bar .top-body .lang-switcher ul {
                        list-style: none;
                        height: inherit;
                        padding: 0;
                    }

                        header .body .top-bar .top-body .lang-switcher ul > li {
                            align-items: flex-end;
                            cursor: pointer;
                            display: inline-flex;
                            float: left;
                            height: inherit;
                            margin-left: var(--spacing-x-lang-switches);
                        }

                            header .body .top-bar .top-body .lang-switcher ul > li.active {
                                font-weight: var(--font-weight-extra-bold);
                            }

        header .body .bottom-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: var(--height-bottom-bar);
        }

            header .body .bottom-bar .bottom-body {
                display: inline-flex;
                justify-content: space-between;
                align-items: center;
                height: var(--height-bottom-bar);
                flex: 1 1 0;
            }

                header .body .bottom-bar .bottom-body .functions,
                header .body .bottom-bar .bottom-body .main-nav {
                    height: inherit;
                }

                header .body .bottom-bar .bottom-body .main-nav ul,
                header .body .bottom-bar .bottom-body .functions ul {
                    list-style: none;
                    height: inherit;
                    padding: 0;
                    display: flex;
                    flex-direction: row;
                    gap: 1.25rem;
                }

                    header .body .bottom-bar .bottom-body .functions ul > li,
                    header .body .bottom-bar .bottom-body .main-nav ul > li {
                        align-items: center;
                        cursor: pointer;
                        height: inherit;
                        margin-inline-end: var(--spacing-x-slotted);
                        margin-top: 0;
                        margin-bottom: 0;
                    }

                        header .body .bottom-bar .bottom-body .main-nav ul > li:hover,
                        header .body .bottom-bar .bottom-body .main-nav ul > li:focus,
                        header .body .bottom-bar .bottom-body .functions ul > li:hover,
                        header .body .bottom-bar .bottom-body .functions ul > li:focus
                        {
                            border-bottom: 2px solid;
                            border-bottom-color: var(--telekom-color-primary-hovered);
                            color: var(--telekom-color-primary-hovered);
                        }

                    header .body .bottom-bar .bottom-body .main-nav ul > li.active, 
                    header .body .bottom-bar .bottom-body .functions ul > li.active {
                            border-bottom: 4px solid;
                            border-bottom-color: var(--telekom-color-primary-standard);
                            color: var(--telekom-color-primary-standard);
                        }


                        header .body .bottom-bar .bottom-body .main-nav ul > li > div,
                        header .body .bottom-bar .bottom-body .functions ul > li > div {
                            align-items: center;
                            display: flex;
                            height: inherit;
                        }


                        header .body .bottom-bar .bottom-body .main-nav ul > li > a,
                        header .body .bottom-bar .bottom-body .functions ul > li > a,
                        header .body .bottom-bar .bottom-body .main-nav ul > li > div > a,
                        header .body .bottom-bar .bottom-body .functions ul > li > div > a {
                            align-items: center;
                            display: flex;
                            font-size: var(--font-size-main-nav);
                            font-weight: var(--font-weight-extra-bold);
                            height: inherit;
                            text-decoration: none;
                            color: inherit;
                        }

                        header .body .bottom-bar .bottom-body .functions ul > li {
                            margin-inline-end: 0;
                        }

                        header .body .bottom-bar .bottom-body .functions ul > li > a > i,
                        header .body .bottom-bar .bottom-body .functions ul > li > i {
                            font-size: var(--font-size-functions-icon)
                        }

                            header .body .bottom-bar .bottom-body .functions ul > li.disabled {
                                align-items: center;
                                cursor: default;
                                display: flex;
                                border: none;
                                color: var(--telekom-color-text-and-icon-disabled);
                            }

.nav-badge {
    height: var(--line-height-nav-badge);
    min-width: var(--line-height-nav-badge);
    background-color: var(--telekom-color-primary-standard);
    border-radius: 50%;
    display: inline-block;
    margin-right: calc(var(--line-height-nav-badge) * -1);
    top: calc(var(--line-height-nav-badge) * -1);
    right: 0;
    position: relative;
}

.functions .nav-badge {
    right: 2px;
}

.functions .dropdown .nav-badge {
    right: -2px;
}

.rz-tabview-nav .nav-badge {
    margin-left: 2px;
}

.dropdown li a i.rzi {
    margin-right: 0.5rem;
}

.bottom-body .functions li.nav-toggle ul.dropdown,
.bottom-body .main-nav li.nav-toggle ul.dropdown {
    background: var(--background);
    box-shadow: var(--shadow);
    display: none;
    flex-direction: column;
    gap: 0;
    height: auto;
    position: absolute;
    z-index: 999;
}

.bottom-body .functions li.nav-toggle ul.dropdown {
    right: 0;
}

.bottom-body .functions li.nav-toggle ul.dropdown > li
{
    margin-left: 1rem;
    margin-right: 0;
}

.bottom-body .functions li.nav-toggle ul.dropdown li:hover,
.bottom-body .main-nav li.nav-toggle ul.dropdown li:hover
{
    border: 0;
}

.bottom-body .functions li.nav-toggle ul.dropdown li a,
.bottom-body .main-nav li.nav-toggle ul.dropdown li a
{
    font-size: 1.1rem;
    font-weight: normal;
}

.bottom-body .functions li.nav-toggle ul.dropdown li.active,
.bottom-body .main-nav li.nav-toggle ul.dropdown li.active
{
    border: 0;
}

.bottom-body .functions li.nav-toggle ul.dropdown li.active > a,
.bottom-body .main-nav li.nav-toggle ul.dropdown li.active > a
{
    font-weight: bold;
}

.bottom-body .functions li.nav-toggle:hover ul.dropdown,
.bottom-body .functions li.nav-toggle:focus ul.dropdown,
.bottom-body .main-nav li.nav-toggle:hover ul.dropdown,
.bottom-body .main-nav li.nav-toggle:focus ul.dropdown
{
    display: flex;
    flex-direction: column;
}

.bottom-body .functions ul > li.nav-toggle ul.dropdown li,
.bottom-body .main-nav ul > li.nav-toggle ul.dropdown li
{
    background: var(--background);
    color: var(--font-color-default);
    height: 2.75rem;
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding: 0 1.5rem 0 1.5rem;
    width: inherit;
    z-index: 999;
}

:root {
    --columns-gap-container: 2rem;
    --font-color-default: black;
    --font-size-app-name: 0.75rem;
    --font-size-top-bar: 0.75rem;
    --font-size-main-nav: 1.25rem;
    --font-size-functions-icon: 1.625rem;
    --font-weight-extra-bold: 800;
    --grid-template-column-container: repeat(16, minmax(0, 1fr));
    --header-height: 120px;
    --height-bottom-bar: 90px;
    --height-top-bar: 30px;
    --line-height-app-name: 0.75rem;
    --line-height-nav-badge: 0.5rem;
    --max-width-container: 1504px;
    --spacing-x-container: 1rem;
    --spacing-x-lang-switches: 0.75rem;
    --spacing-x-slotted: 3.5rem;
}