/* =========================================
   NO STACK MOBILE STACK FIX (CASSIOPEIA)
   keeps 3 columns ALWAYS
========================================= */

/* GLOBAL SAFETY */
html, body {
    overflow-x: hidden !important;
    max-width: 100%;
}

/* =========================
   DESKTOP NORMAL
========================= */

.site-grid {
    display: grid !important;
    grid-template-columns: 22% 56% 22%;
    gap: 12px;
}

/* =========================
   MOBILE / PORTRAIT = SAME STRUCTURE
   (ONLY SHRINK, NEVER STACK)
========================= */

@media (max-width: 768px), (orientation: portrait) {

    .site-grid {
        display: grid !important;

        /* 🔥 entscheidend: kleinere, aber FIXE 3 Spalten */
        grid-template-columns: 14% minmax(0, 1fr) 14% !important;

        gap: 4px;
    }

    /* =========================
       SIDEBARS SMALL BUT STABLE
    ========================= */

    .container-sidebar-left,
    .container-sidebar-right {
        min-width: 0;
        overflow-wrap: break-word;

        font-size: 9px;
        line-height: 1.2;

        padding: 3px;

        background: #f7f7f7;
        border-radius: 4px;
    }

    /* =========================
       CENTER CONTENT PROTECTED
    ========================= */

    .container-component {
        min-width: 0;
        padding: 5px;
    }

    /* =========================
       TYPO SAFE
    ========================= */

    h1 { font-size: 17px !important; }
    h2 { font-size: 14px !important; }
    h3 { font-size: 12px !important; }

    img {
        max-width: 100%;
        height: auto;
        display: block;
    }

    table {
        display: block;
        overflow-x: auto;
        max-width: 100%;
    }
}

/* =========================
   VERY SMALL PHONES
========================= */

@media (max-width: 420px) {

    .site-grid {
        grid-template-columns: 12% minmax(0, 1fr) 12% !important;
    }

    .container-sidebar-left,
    .container-sidebar-right {
        font-size: 8px;
        padding: 2px;
    }
}