html, body {
    height: 100%;
}

body {
    font-family: var(--font-sans);
    color: var(--text);
    background: radial-gradient(1200px 600px at 20% 10%, rgba(19,168,222,.18), transparent 60%), radial-gradient(900px 500px at 80% 20%, rgba(43,140,255,.14), transparent 55%), linear-gradient(180deg, var(--bg), var(--bg-2));
}

/* Links */
a {
    color: var(--text);
    text-decoration: none;
}

    a:hover {
        color: var(--primary);
        text-decoration: none;
    }

/* Focus states (Accessibility) */
:focus-visible {
    outline: 2px solid rgba(43,140,255,.75);
    outline-offset: 2px;
    border-radius: 8px;
}

/* Simple app container helper (optional use in views/layout) */
.container-app {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-left: var(--space-5);
    padding-right: var(--space-5);
}

/* Full height base */
html, body {
    height: 100%;
}

/* Keep your existing body background + font, but ensure no default margins */
body {
    margin: 0;
    font-family: var(--font-sans);
    color: var(--text);
    background: radial-gradient(1200px 600px at 20% 10%, rgba(19,168,222,.18), transparent 60%), radial-gradient(900px 500px at 80% 20%, rgba(43,140,255,.14), transparent 55%), linear-gradient(180deg, var(--bg), var(--bg-2));
}




/* Prevent layout shift when scrollbars appear/disappear */
/*html {
    scrollbar-gutter: stable;
}
*/


/*bereits in site abgebildet*/
/* --- Fixed header/footer + right content scroll only --- */
/*:root {*/
    /* default fallbacks (werden per JS überschrieben) */
    /*--po-topbar-height: 57px;
    --po-footer-height: 30px;
}*/

/* Header fixed */
.po-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
}

    /* remove mb-3 effect when fixed */
    .po-topbar .navbar {
        margin-bottom: 0 !important;
        min-height: 64px;  /*Erforderlich damit bei Seitenwechsel kein Ruckeln entsteht*/
    }

/* Footer fixed */
.po-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1020;
}
/* Docked body area between fixed header and footer */
.po-body {
    position: fixed;
    top: var(--po-topbar-height);
    bottom: var(--po-footer-height);
    left: 0;
    right: 0;
    overflow-x: hidden;
}

/* Ohne Sidebar (Landing etc.): der Bereich zwischen Nav/Footer scrollt */
.po-body--page {
    overflow-y: auto;
}

/* Mit Sidebar: body selbst NICHT scrollen, nur der rechte Content */
.po-body--sidebar {
    overflow: hidden;
}

/* Shell fills dock area */
.po-shell {
    height: 100%;
    width: 100%;
    display: flex;
}

/* Sidebar stays visible */
.po-sidebar {
    height: 100%;
    overflow-y: auto; /* optional: wenn Menü lang ist */
}

/* Right content scrolls (nur im Sidebar-Modus relevant) */
.po-main {
    flex: 1;
    min-width: 0;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--space-3);
}

@media (max-width: 576px) {
    .po-main {
        padding: var(--space-4);
    }
}





/* Bootstrap modal layering absichern (falls Theme/Overlay höhere z-index nutzt) */
.modal-backdrop {
    z-index: 1050 !important;
}

.modal {
    z-index: 1055 !important;
}



/* Keep links readable */
a {
    color: var(--text);
    text-decoration: none;
}

    a:hover {
        color: var(--primary);
        text-decoration: none;
    }

/* Focus states */
:focus-visible {
    outline: 2px solid rgba(43,140,255,.75);
    outline-offset: 2px;
    border-radius: 8px;
}






/* Dark surfaces: eure App-Hintergründe */
[data-bs-theme="dark"] {
    --bs-secondary-color: var(--po-text-muted-dark);
    --bs-tertiary-color: var(--po-text-subtle-dark);
}

/* Light surfaces: weisse Cards/Content-Blöcke */
[data-bs-theme="light"] {
    --bs-secondary-color: var(--po-text-muted-light);
    --bs-tertiary-color: var(--po-text-subtle-light);
}

/* WICHTIG:
   Wenn du aktuell sowas hast, entfernen:
   .text-muted { color: var(--text-muted) !important; }
   Sonst gewinnt es gegen die scoped Variablen.
*/