/***************************************************************************
* 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%; }
}

/***************************************************************************
* Tabellen + Bilder im Inhalt wie alte Seite (twentyeleven .entry-content):
* graue Linie (#ddd) ueber jeder Zelle + unter der Tabelle, Zellabstand
* 6px 10px 6px 0, keine Streifen/Rahmen aus dem Core (PROTECTED-table.css).
* Farbige Kopfzeilen kommen als Inline-Style aus dem Inhalt und bleiben.
****************************************************************************/
/* Wie alt (twentyeleven-Reset table,td{border:0}): Rahmen aus dem HTML-Attribut border="1"
   wirken nicht, nur die grauen Linien. Inline-Rahmen im Inhalt (style="border…") bleiben. */
.content_inner table {
    border-collapse: separate;
    border-spacing: 0;
    border: 0;
    border-bottom: 1px solid #ddd;
    margin: 0 0 1.625em;
}
.content_inner thead,
.content_inner tbody,
.content_inner tfoot {
    border: 0;
    background-color: transparent;
}
.content_inner tbody tr:nth-child(2n) {
    background-color: transparent;
}
.content_inner td,
.content_inner th {
    padding: 6px 10px 6px 0;
    border: 0;
    border-top: 1px solid #ddd;
    vertical-align: baseline;
    box-sizing: content-box; /* feste height/width aus dem alten Editor gelten ohne Padding, wie alt */
}
.content_inner th {
    color: #666;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .1em;
    line-height: 2.6em;
    text-transform: uppercase;
}
/* Bilder mit WP-Ausrichtungsklasse: 6px Rand wie alt (Video-Buttons, Icons) */
.content_inner img[class*="align"],
.content_inner img[class*="wp-image-"] {
    padding: 6px;
    box-sizing: content-box; /* Padding zusaetzlich zur Attribut-Breite, wie alt */
}

/* Desktop/Tablet: Tabellen nie breiter als die Inhaltsspalte. Die alten Inhalte haben feste
   Breiten (meist width:820px fuer die alte 825px-Spalte) -> bei schmaleren Fenstern sonst
   seitlicher Overflow. max-width schlaegt die Inline-Breite (darum !important). */
@media screen and (min-width:40em) {
    .content_inner table { max-width: 100% !important; }
}

/* Icons im Inhalt einheitlich vertikal mittig zur Textzeile (gemessen 2026-10-28: nur "middle" setzt
   alle Icon-Arten gleich; vorher je nach Icon 2,5–6,5px zu hoch). Deckt alle ~1.300 kleinen Icons ab:
   PDF/Word/PPT/Excel/Calc/Writer/Base/Impress-Icons, Quiz, Links, ZIP, Kompetenz-"K", Haekchen,
   Video-Buttons (video-blau, gimp_video, ps_video …) und Programm-Logos (access365-logo …). */
.content_inner img[src*="icon"],
.content_inner img[src*="logo"],
.content_inner img[src*="kompetenz_k"],
.content_inner img[src*="hakerl"],
.content_inner img[src*="video"],
.content_inner img[src*="vido"] { vertical-align: middle; }

/* Handy: Trennlinie je Tabellen-ZEILE statt je Zelle (Zellen stehen untereinander);
   Zellen nur mit Icons (Kahoot-"K" o. ae., Klasse per Script) direkt unter den Inhalt, linksbuendig */
@media screen and (max-width:39.99875em) {
    .content_inner tr { border-top: 1px solid #ddd; }
    .content_inner td,
    .content_inner th { border-top: 0; }
    .content_inner td + td,
    .content_inner th + th { padding-top: 0; }
    .content_inner td.e4m_cell_icons { text-align: left !important; padding-top: 0; }
}