/**
 * Sidebar Layout - Wiederverwendbares Seitenlayout
 * =================================================
 * Einheitliches Layout für alle Seiten mit Sidebar + Hauptinhalt.
 *
 * Struktur:
 *   .sidebar-layout            (flex-container: sidebar | main)
 *     .sidebar-layout__aside   (linke Spalte, tokenbasierte Breite, sticky)
 *     .sidebar-layout__main    (rechte Spalte, rest)
 *
 * Die Hero-Section liegt AUSSERHALB dieses Containers,
 * direkt unter dem Header / ueber dem Layout.
 *
 * Version: 2026.02.23
 */

/* ============================================
   LAYOUT CONTAINER
   ============================================ */
.sidebar-layout {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    min-height: calc(100vh - 300px);
}

/* ============================================
   LEFT COLUMN - Sidebar (Bereiche + Suche)
   ============================================ */
.sidebar-layout__aside {
    width: var(--tb-sidebar-width, 280px);
    min-width: var(--tb-sidebar-width, 280px);
    flex-shrink: 0;
    position: sticky;
    top: 80px;
    height: fit-content;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-layout__aside::-webkit-scrollbar {
    width: 6px;
}

.sidebar-layout__aside::-webkit-scrollbar-thumb {
    background: var(--accent-color, #8ED1B0);
    border-radius: 3px;
}

/* Innerhalb des Layout-Aside: Sidebar-Komponenten nicht nochmal sticky */
.sidebar-layout__aside .tb-sidebar {
    position: static;
    width: 100%;
    min-width: 100%;
    max-height: none;
    overflow-y: visible;
}

.sidebar-layout__aside .tb-search-box {
    border-right: 1px solid var(--tb-sidebar-border-color, var(--border-light, #e9ecef));
}

/* ============================================
   RIGHT COLUMN - Main Content
   ============================================ */
.sidebar-layout__main {
    flex: 1;
    min-width: 0;   /* prevent flex overflow */
    padding: 0 1.5rem;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 992px) {
    .sidebar-layout {
        flex-direction: column;
    }

    .sidebar-layout__aside {
        width: 100%;
        min-width: 100%;
        position: static;
        max-height: none;
        overflow-y: visible;
        border-bottom: 1px solid var(--border-light, #e9ecef);
    }

    .sidebar-layout__aside .tb-search-box {
        border-right: none;
    }

    .sidebar-layout__main {
        padding: 0 1rem;
    }
}