/* Tabellen aus dem Editor (.ck-content) responsiv – Verhalten in tables.js */
.ck-content .fvn-tbl { max-width: 100%; }
.ck-content .fvn-tbl-label { display: none; }

/* Feste Breiten aus Excel (pt) auf schmalen Bildschirmen aufheben */
@media (max-width: 767px) {
    .ck-content figure.table.fvn-tbl { width: auto !important; float: none !important; margin-left: 0; margin-right: 0; }
    .ck-content .fvn-tbl > table { width: 100% !important; }
    .ck-content .fvn-tbl-layout td, .ck-content .fvn-tbl-layout th { width: auto !important; }
}

/* Seitlich scrollbar (ohne Kopfzeile oder mit verbundenen Zellen) – Schatten zeigt, dass es weitergeht */
.ck-content .fvn-tbl-scroll {
    display: block !important; width: auto !important; overflow-x: auto; -webkit-overflow-scrolling: touch;
    background:
        linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)) left center / 40px 100% no-repeat local,
        linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)) right center / 40px 100% no-repeat local,
        radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .18), transparent) left center / 14px 100% no-repeat scroll,
        radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .18), transparent) right center / 14px 100% no-repeat scroll;
}
.ck-content .fvn-tbl-scroll > table { width: max-content !important; min-width: 100%; }
.ck-content .fvn-tbl-scroll:focus-visible { outline: 3px solid #12803a; outline-offset: 2px; }

/* Gestapelt: jede Zeile eine Karte, jede Zelle „Spaltenkopf: Wert“ */
.ck-content table.fvn-tbl-stacked, .ck-content table.fvn-tbl-stacked > thead, .ck-content table.fvn-tbl-stacked > tbody,
.ck-content table.fvn-tbl-stacked > tfoot, .ck-content table.fvn-tbl-stacked tr, .ck-content table.fvn-tbl-stacked td, .ck-content table.fvn-tbl-stacked th {
    display: block; width: auto !important; height: auto !important;
}
.ck-content table.fvn-tbl-stacked { border: 0 !important; }
.ck-content table.fvn-tbl-stacked .fvn-tbl-head {
    position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.ck-content table.fvn-tbl-stacked tr:not(.fvn-tbl-head) {
    margin: 0 0 12px; border: 1px solid #d8d9d8; border-left: 4px solid #168238; border-radius: 2px; background: #fff;
}
.ck-content table.fvn-tbl-stacked td, .ck-content table.fvn-tbl-stacked th {
    display: flow-root; border: 0 !important; border-bottom: 1px solid #eee !important; padding: 8px 12px !important; text-align: left !important;
}
.ck-content table.fvn-tbl-stacked td:last-child, .ck-content table.fvn-tbl-stacked th:last-child { border-bottom: 0 !important; }
.ck-content table.fvn-tbl-stacked .fvn-tbl-label { display: block; float: left; width: 38%; min-width: 6.5em; margin-right: 12px; font-weight: 700; color: #333; }
.ck-content table.fvn-tbl-stacked .fvn-tbl-value { display: block; overflow: hidden; }
.ck-content table.fvn-tbl-stacked .fvn-tbl-value, .ck-content table.fvn-tbl-stacked .fvn-tbl-value * { text-align: left !important; }
.ck-content table.fvn-tbl-stacked .fvn-tbl-value p { margin: 0; }
.ck-content table.fvn-tbl-stacked .fvn-tbl-value p + p { margin-top: 4px; }
.ck-content table.fvn-tbl-stacked .fvn-tbl-empty { display: none; }

/* Hinweis über scrollbaren Tabellen (nur sichtbar, Screenreader bekommen die Region-Beschriftung) */
.ck-content .fvn-tbl-hint { margin: 0 0 6px; font-size: .85rem; color: #555; text-align: right; }
.ck-content .fvn-tbl-hint[hidden] { display: none; }