/*
----------------------------------------
Datei: layout.css
Beschreibung: App-Shell mit festem Header, fixierter Sidebar und
scrollendem Inhalt; Einzelseiten (Login, Fehler).
----------------------------------------
*/

@layer layout {
    .app {
        min-height: 100vh;
        display: grid;
        grid-template-columns: var(--breite-sidebar) minmax(0, 1fr);
        grid-template-rows: var(--hoehe-header) minmax(0, 1fr);
    }

    .app.ist-sidebar-kompakt {
        grid-template-columns: var(--breite-sidebar-kompakt) minmax(0, 1fr);
    }

    .app__header {
        grid-column: 1 / -1;
        position: sticky;
        top: 0;
        z-index: var(--z-sticky);
    }

    .app__sidebar {
        grid-column: 1;
        grid-row: 2;
        position: sticky;
        top: var(--hoehe-header);
        height: calc(100vh - var(--hoehe-header));
        overflow-y: auto;
    }

    .app__inhalt {
        grid-column: 2;
        grid-row: 2;
        min-width: 0;
        width: 100%;
        max-width: var(--breite-inhalt-max);
        padding: var(--abstand-8);
        display: flex;
        flex-direction: column;
        gap: var(--abstand-6);
    }

    .app__inhalt:focus {
        outline: none;
    }

    /* Kopfleiste */
    .kopfleiste {
        display: flex;
        align-items: center;
        gap: var(--abstand-3);
        padding-inline: var(--abstand-4);
        background: var(--farbe-flaeche);
        border-bottom: 1px solid var(--farbe-rahmen);
    }

    .kopfleiste__knopf {
        display: inline-grid;
        place-items: center;
        width: 40px;
        height: 40px;
        border: 0;
        border-radius: var(--radius-standard);
        background: transparent;
        color: var(--farbe-text-sekundaer);
    }

    .kopfleiste__knopf:hover {
        background: var(--farbe-flaeche-sekundaer);
        color: var(--farbe-text);
    }

    .kopfleiste__marke {
        display: flex;
        align-items: center;
        gap: var(--abstand-3);
        color: var(--farbe-text);
        font-weight: 600;
        font-size: var(--schriftgroesse-4);
        min-width: 0;
    }

    .kopfleiste__marke:hover {
        text-decoration: none;
    }

    .kopfleiste__logo {
        height: 36px;
        width: auto;
        border-radius: var(--radius-klein);
    }

    .kopfleiste__name {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .kopfleiste__rechts {
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: var(--abstand-3);
    }

    /* Einzelseiten ohne App-Shell */
    .einzelseite {
        min-height: 100vh;
        display: grid;
        place-items: center;
        padding: var(--abstand-4);
    }

    .einzelseite__karte {
        width: min(100%, 420px);
        padding: var(--abstand-8);
        display: flex;
        flex-direction: column;
        gap: var(--abstand-4);
    }

    .einzelseite__titel {
        font-size: var(--schriftgroesse-6);
    }
}