/***************************************************************************
* Content Tables — bei Bedarf seitlich scrollbar (v. a. mobil)
*
* Der migrierte Inhalt besteht groesstenteils aus Tabellen. overflow-x auf
* der <table> selbst wirkt NICHT (Browser ignorieren overflow bei
* display:table – gemessen 2026-10-09: Tabelle 566px breit, Seite 582px
* statt 375px). Darum legt ein kleines Script (functions.php, wp_footer)
* um jede aeussere Tabelle in .content_inner einen Scroll-Container
* .e4m_table_scroll. Die Tabelle selbst bleibt display:table (kein
* display:block – das hatte Zeilenhoehen zerstoert).
* Ohne JS: Tabelle wie bisher, nur ohne Scroll-Container.
****************************************************************************/
.e4m_table_scroll {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
/* dezenter Hinweis, dass seitlich mehr kommt (nur wenn gescrollt werden kann) */
.e4m_table_scroll.is_scrollable {
    box-shadow: inset -12px 0 10px -10px rgba(0,0,0,.25);
}
.e4m_table_scroll.is_scrollable.is_end {
    box-shadow: none;
}

/***************************************************************************
* Handy (< 40em): Layout-Tabellen untereinander statt nebeneinander
*
* Der Inhalt nutzt Tabellen fast nur als Layout (eine grosse Tabelle pro
* Seite, 2-5 Spalten, feste px-Breiten, keine th) -> auf schmalen Screens
* jede Zelle als volle Zeile. Feste Breiten/Hoehen aus dem alten Editor
* werden aufgehoben, leere Abstands-Zellen (Klasse e4m_cell_empty, per
* Script gesetzt) ausgeblendet. Ab 40em gilt wieder das Scrollen oben.
****************************************************************************/
@media screen and (max-width:39.99875em) {
    .content_inner table,
    .content_inner thead,
    .content_inner tbody,
    .content_inner tfoot,
    .content_inner tr,
    .content_inner td,
    .content_inner th {
        display: block;
        width: auto !important;
        min-width: 0 !important;
        height: auto !important;
    }
    .content_inner .e4m_cell_empty { display: none; }
    .content_inner img { max-width: 100%; height: auto; }
    .content_inner iframe,
    .content_inner video { max-width: 100%; }
}