/* Desktop: sidebar + map side-by-side, fill viewport */
@media (min-width: 768px) {
    .sidebar-col {
        height: calc(100vh - 30px);
        overflow-y: auto;
    }
    .thermal-histogram {
        height: calc(100vh - 310px);
    }
    .map-container {
        position: relative;
        height: calc(100vh - 30px);
    }
}

/* Mobile: gestapelt, Panel-Reihenfolge = Steigwerte, Karte, Slider */
@media (max-width: 767px) {
    /* Bootstrap-Row-Negativmargin entfernen, damit die aufgeloesten Panels
       nicht seitlich ueberlaufen (nur die Haupt-Row treffen) */
    .row:has(> .sidebar-col) {
        margin-left: 0;
        margin-right: 0;
    }

    /* Beide Spalten aufloesen, damit Histogramm/Karte/Slider zu direkten
       Flex-Kindern der Row werden und per order sortierbar sind.
       Faellt :has()/display:contents aus, bleibt die bisherige Reihenfolge. */
    .sidebar-col {
        display: contents;
    }
    .row > div:has(> .map-container) {
        display: contents;
    }

    /* 1. Steigwerte  2. Karte  3. Slider */
    .thermal-histogram {
        order: 1;
        flex: 0 0 100%;
        max-width: 100%;
        height: 35vh;
    }
    .map-container {
        order: 2;
        flex: 0 0 100%;
        max-width: 100%;
        position: relative;
        height: 60vh;
    }
    .sidebar-col > div:not(.thermal-histogram) {
        order: 3;
        flex: 0 0 100%;
        max-width: 100%;
    }
}