html, body {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
}

/* Screen-Rahmen: Label oben, Frame darunter */
.screen-container.app-mode {
    max-width: none;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

    .screen-container.app-mode .screen-label {
        flex: 0 0 auto;
        margin: 0; /* verhindert "extra Höhe" durch Mockup-Margins */
        border-radius: 0; /* optional: App-Look; wenn du abgerundet willst, weglassen */
    }

    /* Der eigentliche Screen füllt den Rest */
    .screen-container.app-mode .screen-frame {
        flex: 1 1 auto;
        min-height: 0; /* entscheidend gegen ungewollte Scrollbars */
        margin: 0;
        border-radius: 0; /* optional */
        box-shadow: none; /* optional */
        overflow: hidden; /* scrollen soll NICHT hier passieren */
    }

    /* App-Layout füllt den Frame */
    .screen-container.app-mode .app-layout {
        height: 100%;
        min-height: 0;
    }

    /* Main Content: Header oben fix, Content darunter */
    .screen-container.app-mode .main-content {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    /* Nur hier scrollt es */
    .screen-container.app-mode .content {
        flex: 1 1 auto;
        min-height: 0; /* ebenfalls entscheidend */
        overflow: auto;
    }

    /* Optional: Sidebar bleibt ohne Scroll, falls du das willst */
    .screen-container.app-mode .sidebar {
        overflow: hidden;
    }

    /* verhindert Double-Scroll: Theme hat wizard-content { overflow:auto } */
    .screen-container.app-mode .wizard-content {
        overflow: visible;
    }