/**
 * CMS Article Styles - Tabellen & Content Formatierung
 * Für Magazin-Artikel mit TinyMCE-generiertem Content
 */

/* ==========================================================================
   ARTIKEL-TABELLEN - Desktop Default
   ========================================================================== */

.article-content table,
.article-content table.mce-item-table {
    width: 100% !important;
    max-width: 100%;
    display: table !important;
    table-layout: auto !important;
    border-collapse: collapse;
    overflow: visible !important;
    height: auto !important;
    margin-bottom: 1rem;
}

.article-content .table-scrollable {
    width: 100% !important;
    max-width: 100%;
    display: block;
    overflow-x: visible !important;
}

.article-content table tr,
.article-content table thead,
.article-content table tbody,
.article-content table tfoot {
    height: auto !important;
}

.article-content table th,
.article-content table td {
    width: auto !important;
    height: auto !important;
    padding: .5rem .6rem;
    border: 1px solid var(--bs-border-color);
    vertical-align: top;
    line-height: 1.25rem;
    white-space: normal;
}

.article-content table thead th {
    background: var(--fm-dark);
    color: var(--fm-white);
    border-color: var(--fm-gold);
}

/* Treat first row as header when no explicit thead (also TinyMCE tables) */
.article-content table.mce-item-table tr:first-child td,
.article-content table.mce-item-table tr:first-child th,
.article-content table:not(:has(thead)) tr:first-child td,
.article-content table:not(:has(thead)) tr:first-child th {
    background: var(--fm-dark);
    color: var(--fm-white);
    font-weight: 600;
    border-color: var(--fm-gold);
}

/* ==========================================================================
   TABLET & KLEINER - Horizontales Scrollen
   ========================================================================== */

@media (max-width: 991px) {
    .article-content .table-scrollable {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .article-content table,
    .article-content table.mce-item-table {
        display: block !important;
        table-layout: auto !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .article-content table td,
    .article-content table th {
        word-break: break-word;
        hyphens: auto;
    }
}

/* ==========================================================================
   DESKTOP - Spaltenbreiten harmonisieren
   ========================================================================== */

@media (min-width: 992px) {
    .article-content .table-scrollable {
        overflow-x: visible !important;
    }

    .article-content table,
    .article-content table.mce-item-table {
        display: table !important;
        table-layout: auto !important;
        width: 100% !important;
        overflow: visible !important;
    }

    /* Vereinheitliche Spaltenbreiten je Tabellenspaltenanzahl */
    .article-content table[data-cols] {
        table-layout: fixed !important;
    }

    .article-content table[data-cols] th,
    .article-content table[data-cols] td {
        width: calc(100% / var(--cols));
        word-break: break-word;
        hyphens: auto;
    }

    /* Legacy-Layout für exakt 3 Spalten (24/51/25) */
    .article-content table[data-cols="3"] th:nth-child(1),
    .article-content table[data-cols="3"] td:nth-child(1) { width: 24% !important; }
    .article-content table[data-cols="3"] th:nth-child(2),
    .article-content table[data-cols="3"] td:nth-child(2) { width: 51% !important; }
    .article-content table[data-cols="3"] th:nth-child(3),
    .article-content table[data-cols="3"] td:nth-child(3) { width: 25% !important; }

    /* Viele Spalten (>=7): Scrollbalken statt extrem schmaler Zellen */
    .article-content table.is-wide-table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        table-layout: auto !important;
    }
}

/* ==========================================================================
   SMALL SCREENS - Fixed Layout mit Word-Wrap
   ========================================================================== */

@media (max-width: 710px) {
    .article-content .table-scrollable {
        overflow-x: visible !important;
    }

    .article-content table,
    .article-content table.mce-item-table {
        display: table !important;
        table-layout: fixed !important;
        width: 100% !important;
        overflow: visible !important;
    }

    .article-content table td,
    .article-content table th {
        word-break: break-word;
        hyphens: auto;
        line-height: 1rem;
        font-size: .805rem;
    }

    .article-content table {
        font-size: .85rem;
    }
}

/* ==========================================================================
   SIDEBAR BUTTONS
   ========================================================================== */

.col-lg-3 .fm-btn.fm-btn--sm {
    font-size: 0.85rem;
    font-weight: 400;
}

/* ==========================================================================
   ARTIKEL-HEADER
   ========================================================================== */

.headlinehr {
    border-color: var(--fm-gold);
    border-width: 2px;
    opacity: 1;
}

.kicker {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fm-gold);
    font-weight: 600;
}

/* ==========================================================================
   KOMMENTAR-SEKTION
   ========================================================================== */

.fm-article .d-flex .bi-person-circle {
    color: var(--fm-gold);
}