/*
 * WohnKompass – Punktmatrix im Stil des Standes V63
 *
 * Die Punktedarstellung bleibt unangetastet.
 * Persönliche Ränge stehen unter dem Optionstitel.
 */

/* Alte Zusatzelemente sicher ausblenden */

#wk-matrix-intro-v62,
.wk-matrix-intro-v62,
.wk-matrix-rank-v62,
.wk-matrix-rank-v64,
.wk-matrix-v64 caption {
    display: none !important;
}


/* Container */

.wk-matrix-wrapper-v68 {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;

    box-sizing: border-box;

    border: 1px solid #d8e1de;
    border-radius: 13px;

    background: #ffffff;

    scrollbar-width: thin;
    scrollbar-color:
        #9dafaa
        #edf2f0;
}


/* Tabelle */

.wk-matrix-native-v68 {
    width: 100%;
    min-width: 980px;

    border-collapse: separate !important;
    border-spacing: 0 !important;
    table-layout: fixed !important;

    background: #ffffff;
}

.wk-matrix-native-v68 th,
.wk-matrix-native-v68 td {
    box-sizing: border-box;

    border-right: 1px solid #dce4e1;
    border-bottom: 1px solid #dce4e1;

    vertical-align: middle;
}

.wk-matrix-native-v68 th:last-child,
.wk-matrix-native-v68 td:last-child {
    border-right: 0;
}


/* Kopfzeile */

.wk-matrix-native-v68
    tr:first-child
    > th,
.wk-matrix-native-v68
    tr:first-child
    > td {
    position: relative;

    height: 96px;
    min-height: 96px;
    padding: 13px 10px 34px;

    background: #ffffff;
    color: #172a31;

    font-size: 12px;
    font-weight: 750;
    line-height: 1.42;
    text-align: center;

    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;

    box-shadow: none;
}

.wk-matrix-native-v68
    tr:first-child
    > *:first-child {
    width: 160px;
    min-width: 160px;
    padding-bottom: 13px;

    text-align: left;
}


/* Ranking unterhalb der Überschrift */

.wk-matrix-rank-v68 {
    position: absolute;
    right: 8px;
    bottom: 8px;
    left: 8px;

    display: block;

    width: max-content;
    max-width: calc(100% - 16px);
    margin: 0 auto;
    padding: 4px 8px;

    box-sizing: border-box;

    border: 1px solid #d9e2de;
    border-radius: 999px;

    background: #edf3f0;
    color: #42665d;

    font-size: 8px;
    font-weight: 850;
    line-height: 1;
    letter-spacing: 0.04em;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}

.wk-matrix-top-one-v68 {
    box-shadow:
        inset 0 3px 0 #b49a16
        !important;
}

.wk-matrix-top-one-v68
    .wk-matrix-rank-v68 {
    border-color:
        rgba(180, 154, 22, 0.35);

    background: #f6f1d7;
    color: #705d08;
}

.wk-matrix-top-two-v68 {
    box-shadow:
        inset 0 3px 0 #78948c
        !important;
}


/* Erste Spalte */

.wk-matrix-native-v68
    tr:not(:first-child)
    > *:first-child {
    width: 160px;
    min-width: 160px;
    padding: 12px;

    background: #ffffff;
    color: #21373d;

    font-size: 11px;
    font-weight: 750;
    line-height: 1.35;
    text-align: left;
}


/* Optionsspalten */

.wk-matrix-native-v68
    tr
    > *:not(:first-child) {
    width: 137px;
    min-width: 137px;
}


/* Datenzeilen */

.wk-matrix-native-v68
    tr:not(:first-child)
    > * {
    min-height: 49px;
    padding: 12px 9px;

    font-size: 11px;
    line-height: 1.4;
}

.wk-matrix-native-v68
    tr:not(:first-child)
    > *:not(:first-child) {
    text-align: center;
    white-space: nowrap;
}

.wk-matrix-native-v68
    tr:nth-child(even)
    > * {
    background: #f8faf9;
}

.wk-matrix-native-v68
    tr:nth-child(odd):not(:first-child)
    > * {
    background: #ffffff;
}


/* Alte farbliche Spaltenmarkierungen neutralisieren */

.wk-matrix-native-v68
    .wk-matrix-first-v64,
.wk-matrix-native-v68
    .wk-matrix-second-v64,
.wk-matrix-native-v68
    .wk-matrix-first-column-v62,
.wk-matrix-native-v68
    .wk-matrix-second-column-v62 {
    background: inherit !important;
}


/* Mobil */

@media (max-width: 800px) {
    .wk-matrix-native-v68 {
        min-width: 900px;
    }

    .wk-matrix-native-v68
        tr:first-child
        > th,
    .wk-matrix-native-v68
        tr:first-child
        > td {
        font-size: 11px;
    }
}