@media (max-width: 900px) {

    /* ============================================================
     * 1) HARD STOP: kein horizontales Scrollen des Body/Html
     *    Egal welches Plugin etwas zu Breites einbettet — die Page
     *    selbst bleibt in der Viewport-Breite.
     * ============================================================ */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* Container die häufig zu breit werden */
    .site, #page, .ast-container, .site-content,
    .entry-content, .entry-content > *,
    .ast-row, .ast-grid-common-col,
    .wp-block-group, .wp-block-column, .wp-block-columns {
        max-width: 100% !important;
    }

    /* ============================================================
     * 2) MEDIA: Bilder/Video/Iframes nie breiter als Viewport
     * ============================================================ */
    img, video, iframe, embed, object {
        max-width: 100% !important;
        height: auto;
    }
    /* Bei Iframes die Aspect-Ratio (TradingView, Twitch, YouTube) nicht zerstören */
    iframe[width][height] {
        height: auto;
    }

    /* ============================================================
     * 3) CODE/PRE: lange Strings inline-scrollbar statt Page-Push
     * ============================================================ */
    pre, code, kbd, samp {
        max-width: 100% !important;
        overflow-x: auto !important;
        white-space: pre-wrap;
        word-wrap: break-word;
        overflow-wrap: anywhere;
    }
    pre {
        white-space: pre;
        -webkit-overflow-scrolling: touch;
    }

    /* ============================================================
     * 4) WORD WRAP: lange URLs/Wörter umbrechen lassen
     * ============================================================ */
    .entry-content, .entry-content p, .entry-content li,
    .entry-content td, .entry-content th, .entry-content a,
    .entry-content h1, .entry-content h2, .entry-content h3,
    .entry-content h4, .entry-content h5, .entry-content h6,
    .bmi-gd-page, .bmi-gd-page p, .bmi-gd-page li,
    .bmi-gd-page h1, .bmi-gd-page h2, .bmi-gd-page h3 {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    /* ============================================================
     * 5) TABELLEN: Werden zu inline-scrollbaren Blocks.
     *    Das verhindert dass eine 3-Spalten-Tabelle die ganze
     *    Seite nach rechts schiebt — Nutzer kann die Tabelle
     *    selbst horizontal swipen, der Rest der Seite bleibt fix.
     * ============================================================ */
    .entry-content table,
    .bmi-gd-page table,
    .bmi-gd-table,
    table.bmi-table,
    .bmi-broker-compare table,
    .bmi-etf-compare table,
    .bmi-screener-table,
    .bmi-stocks-table,
    .bmi-billionaires-table,
    .bmi-marketcap-table,
    .bmi-dividend-table,
    .bmi-shorted-table,
    .bmi-earnings-table,
    .bmi-ipo-table,
    .bmi-insider-table,
    .bmi-hof-table {
        display: block !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        /* sanfter Hinweis, dass die Tabelle scrollbar ist */
        scrollbar-width: thin;
    }
    /* tbody/thead muessen mit-blocken sonst kollabiert das Layout */
    .entry-content table > thead,
    .entry-content table > tbody,
    .entry-content table > tfoot,
    .bmi-gd-page table > thead,
    .bmi-gd-page table > tbody,
    .bmi-gd-page table > tfoot {
        display: table-row-group;
    }
    /* table muss intern wieder als table rendern fuer Cell-Alignment.
       Trick: ein Wrapper-div koennen wir hier nicht von CSS erzeugen,
       also stattdessen min-width-Schutz und Hidden-Scrollbars */
    .entry-content table::-webkit-scrollbar,
    .bmi-gd-page table::-webkit-scrollbar {
        height: 4px;
    }

    /* ============================================================
     * 6) BEKANNTE WEITE INLINE-ELEMENTE BÄNDIGEN
     *    Viele BMI-Plugins setzen min-width:600px o.ä. inline —
     *    auf Mobile aufheben.
     * ============================================================ */
    .entry-content [style*="min-width"],
    .bmi-gd-page [style*="min-width"] {
        min-width: 0 !important;
    }
    .entry-content [style*="width:1"],
    .entry-content [style*="width: 1"],
    .entry-content [style*="width:9"],
    .entry-content [style*="width: 9"],
    .entry-content [style*="width:8"],
    .entry-content [style*="width: 8"] {
        max-width: 100% !important;
    }

    /* ============================================================
     * 7) GRIDS auf 1 Spalte zwingen wenn sie zu breit sind
     * ============================================================ */
    .bmi-gd-pc-grid,
    .bmi-cards-grid,
    .bmi-two-col,
    .bmi-three-col,
    .bmi-grid-2,
    .bmi-grid-3,
    .bmi-grid-4 {
        grid-template-columns: 1fr !important;
    }

    /* ============================================================
     * 8) HORIZONTAL SCROLL CONTAINER (gewollt scrollbar wie
     *    Score-Cards) bleiben funktionsfaehig
     * ============================================================ */
    .bmi-scroll-x,
    .bmi-h-scroll,
    .swiper-container {
        max-width: 100vw !important;
        overflow-x: auto !important;
    }
}

/* ============================================================
 * 9) TIGHTER MOBILE-PHONE (<=540px) — strenger
 * ============================================================ */
@media (max-width: 540px) {
    /* Tabellen-Zellen: kleinere Schrift + tightere Padding */
    .entry-content table th,
    .entry-content table td,
    .bmi-gd-page table th,
    .bmi-gd-page table td {
        font-size: 13px !important;
        padding: 8px 8px !important;
        line-height: 1.4 !important;
    }
    /* Viewport-Padding der Standard-Wrapper enger, damit nichts an den Rand klebt */
    .entry-content > .wp-block-html > div[style*="max-width:1140px"],
    .entry-content > .wp-block-html > div[style*="max-width: 1140px"] {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}