/* =========   Layout styles (aus MainLayout)   ========= */
    html,
    body {
        margin: 0;
        padding: 0;
        height: 100%;
    }

    .mud-layout,
    .layout-root {
        height: 100vh;
    }

    .mud-main-content {
        height: 100vh;
        overflow: auto;
    }

    /* ===================== css override needed to use Text.Primary and Text.Secondary styles ===================== */
    .mud-typography.mud-primary-text {
        color: var(--mud-palette-text-primary) !important;
    }

    .mud-typography.mud-secondary-text {
        color: var(--mud-palette-text-secondary) !important;
    }

    .app-dark .mud-drawer-content {
        /* background-image: url('/img/bg_drawer_452.png'); */
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .nav-menu {
        display: flex;
        flex-direction: column;
        height: 95vh;
    }

    .nav-grow {
        flex: 1 1 auto;
    }

    .logout-btn .mud-icon-root {
        margin-left: 10px;
    }

    .logout-btn .nav-text {
        margin-left: 15px;
    }

    /* bg Grundfläche DARKMODE */
    .app-dark .app-content {
        min-height: 100vh;
        /* background-image: url("/img/full_bg_2418x1360.png"); */
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    /* bg sicherstellen das nichts „überläuft“ */
    .app-dark .mud-main-content {
        height: 100vh;
        overflow: auto;
    }


    /* =========   SFProDisplay Font Faces bekannt machen und in App.razor regestrieren   ========= */
    @font-face {
        font-family: 'SFProDisplay';
        src: url('/fonts/SF-Pro-Display-Black.otf') format('opentype');
        font-weight: 900;
        font-style: normal;
    }

    @font-face {
        font-family: 'SFProDisplay';
        src: url('/fonts/SF-Pro-Display-BlackItalic.otf') format('opentype');
        font-weight: 900;
        font-style: italic;
    }

    @font-face {
        font-family: 'SFProDisplay';
        src: url('/fonts/SF-Pro-Display-Bold.otf') format('opentype');
        font-weight: bold;
        font-style: normal;
    }

    @font-face {
        font-family: 'SFProDisplay';
        src: url('/fonts/SF-Pro-Display-BoldItalic.otf') format('opentype');
        font-weight: bold;
        font-style: italic;
    }

    @font-face {
        font-family: 'SFProDisplay';
        src: url('/fonts/SF-Pro-Display-Heavy.otf') format('opentype');
        font-weight: 800;
        font-style: normal;
    }

    @font-face {
        font-family: 'SFProDisplay';
        src: url('/fonts/SF-Pro-Display-HeavyItalic.otf') format('opentype');
        font-weight: 800;
        font-style: italic;
    }

    @font-face {
        font-family: 'SFProDisplay';
        src: url('/fonts/SF-Pro-Display-Light.otf') format('opentype');
        font-weight: 300;
        font-style: normal;
    }

    @font-face {
        font-family: 'SFProDisplay';
        src: url('/fonts/SF-Pro-Display-LightItalic.otf') format('opentype');
        font-weight: 300;
        font-style: italic;
    }

    @font-face {
        font-family: 'SFProDisplay';
        src: url('/fonts/SF-Pro-Display-Medium.otf') format('opentype');
        font-weight: 500;
        font-style: normal;
    }

    @font-face {
        font-family: 'SFProDisplay';
        src: url('/fonts/SF-Pro-Display-MediumItalic.otf') format('opentype');
        font-weight: 500;
        font-style: italic;
    }

    @font-face {
        font-family: 'SFProDisplay';
        src: url('/fonts/SF-Pro-Display-Regular.otf') format('opentype');
        font-weight: normal;
        font-style: normal;
    }

    @font-face {
        font-family: 'SFProDisplay';
        src: url('/fonts/SF-Pro-Display-RegularItalic.otf') format('opentype');
        font-weight: normal;
        font-style: italic;
    }

    @font-face {
        font-family: 'SFProDisplay';
        src: url('/fonts/SF-Pro-Display-Semibold.otf') format('opentype');
        font-weight: 600;
        font-style: normal;
    }

    @font-face {
        font-family: 'SFProDisplay';
        src: url('/fonts/SF-Pro-Display-SemiboldItalic.otf') format('opentype');
        font-weight: 600;
        font-style: italic;
    }

    @font-face {
        font-family: 'SFProDisplay';
        src: url('/fonts/SF-Pro-Display-Thin.otf') format('opentype');
        font-weight: 100;
        font-style: normal;
    }

    @font-face {
        font-family: 'SFProDisplay';
        src: url('/fonts/SF-Pro-Display-ThinItalic.otf') format('opentype');
        font-weight: 100;
        font-style: italic;
    }

    @font-face {
        font-family: 'SFProDisplay';
        src: url('/fonts/SF-Pro-Display-Ultralight.otf') format('opentype');
        font-weight: 200;
        font-style: normal;
    }

    @font-face {
        font-family: 'SFProDisplay';
        src: url('/fonts/SF-Pro-Display-UltralightItalic.otf') format('opentype');
        font-weight: 200;
        font-style: italic;
    }