/**
 * Responsive Vergleichstabelle fuer SFP-Blog-Artikel.
 * Desktop: Matrix/Liste. Mobile: Karten je Criterion-Zeile.
 *
 * Borders: border-collapse:separate + inset box-shadow (zuverlässiger mit
 * position:sticky + overflow als echte border + collapse — sonst „Linien
 * erst nach Interaktion sichtbar“).
 */

.sfp-cmp-table {
    --sfp-cmp-border: #cfcfcf;
    --sfp-cmp-hairline: #e0e0e0;
    --sfp-cmp-header-bg: #f6f6f6;
    --sfp-cmp-hover-bg: #f8f8f8;
    --sfp-cmp-muted: #6b6b6b;
    --sfp-cmp-col: 12em;
    --sfp-cmp-label-col: 8em;
    margin: 2.5em 0;
    width: 100%;
    max-width: 100%;
}

.sfp-cmp-table,
.sfp-cmp-table * {
    box-sizing: border-box;
}

.sfp-cmp-table > h2,
.sfp-cmp-table > .sfp-cmp-table__section {
    margin: 0 0 0.65em;
}

.sfp-cmp-table > .sfp-cmp-table__section {
    font-weight: 700;
    font-size: 1.05em;
    line-height: 1.35;
}

/* Einziger Außenrahmen. */
.sfp-cmp-table__scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--sfp-cmp-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    background: #fff;
    /* Eigenen Layer — weniger Paint-Bugs bei Remote/GPU. */
    transform: translateZ(0);
}

/* Theme-Borders/Radius killen. box-shadow bewusst NICHT global auf 0:
   Hairlines nutzen inset-shadow (sticky-sicher). */
.sfp-cmp-table table,
.sfp-cmp-table thead,
.sfp-cmp-table tbody,
.sfp-cmp-table tr,
.sfp-cmp-table th,
.sfp-cmp-table td {
    border: 0 !important;
    border-radius: 0 !important;
    outline: none !important;
}

.sfp-cmp-table table {
    width: max-content;
    max-width: none;
    min-width: 100%;
    /* collapse + sticky = unzuverlässige Linien in Chromium/RDP. */
    border-collapse: separate !important;
    border-spacing: 0 !important;
    line-height: 1.5;
    margin: 0 !important;
    background: transparent;
}

.sfp-cmp-table th,
.sfp-cmp-table td {
    padding: 0.8em 1.05em;
    text-align: left;
    vertical-align: top;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
    background-clip: padding-box;
}

/* Criterion-Spalte etwas schmaler; Wert-Spalten gleich breit. */
.sfp-cmp-table thead th:first-child,
.sfp-cmp-table tbody th[scope="row"] {
    width: 11em;
    min-width: 11em;
    max-width: 11em;
}

.sfp-cmp-table thead th:not(:first-child),
.sfp-cmp-table tbody td {
    width: var(--sfp-cmp-col);
    min-width: var(--sfp-cmp-col);
    max-width: var(--sfp-cmp-col);
}

.sfp-cmp-table thead th {
    font-weight: 600;
    font-size: 0.92em;
    letter-spacing: 0.01em;
    background: var(--sfp-cmp-header-bg) !important;
    color: #1a1a1a;
    box-shadow: inset 0 -1px 0 var(--sfp-cmp-border) !important;
}

.sfp-cmp-table tbody th,
.sfp-cmp-table tbody td {
    background: #fff !important;
    box-shadow: inset 0 -1px 0 var(--sfp-cmp-hairline) !important;
}

.sfp-cmp-table tbody tr:last-child th,
.sfp-cmp-table tbody tr:last-child td {
    box-shadow: none !important;
}

/* Sticky Criterion — Trennlinie rechts als inset-shadow (malt zuverlässig). */
.sfp-cmp-table tbody th[scope="row"] {
    font-weight: 700;
    position: sticky;
    left: 0;
    z-index: 5;
    background: #fff !important;
    box-shadow:
        inset 0 -1px 0 var(--sfp-cmp-hairline),
        inset -1px 0 0 var(--sfp-cmp-hairline) !important;
}

.sfp-cmp-table thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 6;
    background: var(--sfp-cmp-header-bg) !important;
    box-shadow:
        inset 0 -1px 0 var(--sfp-cmp-border),
        inset -1px 0 0 var(--sfp-cmp-border) !important;
}

.sfp-cmp-table tbody tr:last-child th[scope="row"] {
    box-shadow: inset -1px 0 0 var(--sfp-cmp-hairline) !important;
}

.sfp-cmp-table th:not(:first-child),
.sfp-cmp-table td {
    position: relative;
    z-index: 0;
}

.elementor-widget-theme-post-content:has(.sfp-cmp-table__scroll),
.elementor-element.e-con:has(.sfp-cmp-table__scroll) {
    overflow: visible;
}

.elementor-widget-theme-post-content .sfp-cmp-table__scroll,
.elementor-element .sfp-cmp-table__scroll {
    box-shadow: none !important;
    border-radius: 0 !important;
}

@media (hover: hover) {
    .sfp-cmp-table tbody tr:hover td {
        background: var(--sfp-cmp-hover-bg) !important;
    }

    .sfp-cmp-table tbody tr:hover th[scope="row"] {
        background: var(--sfp-cmp-hover-bg) !important;
        box-shadow:
            inset 3px 0 0 #1a1a1a,
            inset 0 -1px 0 var(--sfp-cmp-hairline),
            inset -1px 0 0 var(--sfp-cmp-hairline) !important;
    }

    .sfp-cmp-table tbody tr:last-child:hover th[scope="row"] {
        box-shadow:
            inset 3px 0 0 #1a1a1a,
            inset -1px 0 0 var(--sfp-cmp-hairline) !important;
    }
}

@media (max-width: 720px) {
    .sfp-cmp-table__scroll {
        overflow-x: visible !important;
        border: 0 !important;
        background: transparent;
        box-shadow: none !important;
        transform: none;
    }

    .sfp-cmp-table table {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        display: block !important;
        border: 0 !important;
    }

    .sfp-cmp-table thead {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        clip-path: inset(50%) !important;
        border: 0 !important;
        white-space: nowrap !important;
    }

    .sfp-cmp-table tbody {
        display: block !important;
        width: 100% !important;
        border: 0 !important;
    }

    .sfp-cmp-table tbody tr {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        margin: 0 0 0.85em;
        border: 1px solid var(--sfp-cmp-border) !important;
        border-radius: 4px !important;
        box-shadow: none !important;
        overflow: hidden;
        background: #fff !important;
    }

    .sfp-cmp-table tbody th,
    .sfp-cmp-table tbody td {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
        word-break: break-word;
        position: static !important;
        left: auto !important;
        z-index: auto !important;
        float: none !important;
        box-shadow: none !important;
        border: 0 !important;
        text-align: left !important;
    }

    .sfp-cmp-table tbody th[scope="row"] {
        display: block !important;
        grid-column: 1 / -1 !important;
        width: 100% !important;
        background: #fff !important;
        padding: 0.8em 1em !important;
        border-bottom: 1px solid var(--sfp-cmp-border) !important;
        border-left: 3px solid #1a1a1a !important;
        font-weight: 700;
        text-align: left !important;
        box-shadow: none !important;
    }

    .sfp-cmp-table tbody th[scope="row"]::before {
        content: none !important;
        display: none !important;
    }

    /* Label | Wert — beide linksbündig; Label-Spalte feste Breite (gleichmäßig). */
    .sfp-cmp-table tbody td {
        display: grid !important;
        grid-template-columns: var(--sfp-cmp-label-col) minmax(0, 1fr);
        align-items: start;
        justify-items: start;
        column-gap: 1em;
        width: 100% !important;
        text-align: left !important;
        border-bottom: 1px solid var(--sfp-cmp-hairline) !important;
        padding: 0.65em 1em !important;
        background: #fff !important;
    }

    .sfp-cmp-table tbody tr td:last-child {
        border-bottom: 0 !important;
    }

    .sfp-cmp-table tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        text-align: left;
        color: var(--sfp-cmp-muted);
        justify-self: start;
        width: 100%;
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .sfp-cmp-table tbody td:empty,
    .sfp-cmp-table tbody th:empty,
    .sfp-cmp-table thead th:empty {
        display: none !important;
    }

    .sfp-cmp-table tbody td[data-label=""],
    .sfp-cmp-table tbody td:not([data-label]) {
        grid-template-columns: minmax(0, 1fr);
        text-align: left !important;
    }

    .sfp-cmp-table tbody td[data-label=""]::before,
    .sfp-cmp-table tbody td:not([data-label])::before {
        content: none !important;
        display: none !important;
    }

    @media (hover: hover) {
        .sfp-cmp-table tbody tr:hover td,
        .sfp-cmp-table tbody tr:hover th[scope="row"] {
            background: #fff !important;
            box-shadow: none !important;
        }
    }
}