/* TVöD Vergleichstabelle 2017-2026 */
table.wk-responsive-table.vergleichstabelle,
table.vergleichstabelle.wk-responsive-table{
    width:100% !important;
    border-collapse:separate !important;
    border-spacing:0 !important;
    margin:25px 0 !important;
    border:1px solid #d9d9d9 !important;
    border-radius:10px !important;
    overflow:hidden !important;
    background:#fff !important;
    box-shadow:0 2px 8px rgba(0,0,0,.08) !important;
}

table.wk-responsive-table.vergleichstabelle thead th{
    background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%) !important;
    color: #fff !important;
    padding: 14px 10px !important;
    text-align: center !important;
    font-weight: 600 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    border-bottom: 2px solid #0a58ca !important;
}

/* Alle Zellen zentrieren */
table.wk-responsive-table.vergleichstabelle td{
    padding: 12px 10px !important;
    border-bottom: 1px solid #ececec !important;
    text-align: center !important;  /* statt right */
}

/* Erste Spalte Entgeltgruppe auch zentrieren */
table.wk-responsive-table.vergleichstabelle td:first-child{
    text-align: center !important;  /* statt left */
    font-weight: 700 !important;
    background: #f8f9fa !important;
    color: #2c3e50 !important;
    border-right: 1px solid #d9d9d9 !important;
}

/* Header war eh schon center, passt so */
table.wk-responsive-table.vergleichstabelle thead th{
    text-align: center !important;
}

table.wk-responsive-table.vergleichstabelle tbody tr:nth-child(even){
    background: #fafafa !important;
}

table.wk-responsive-table.vergleichstabelle tbody tr:hover{
    background: #eef6ff !important;
}

/* Betrag blau + groß */
table.wk-responsive-table.vergleichstabelle .betrag{
    display: block !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #0d6efd !important;
    line-height: 1.2 !important;
}

/* Prozent grau + klein */
table.wk-responsive-table.vergleichstabelle .prozent{
    display: block !important;
    margin-top: 3px !important;
    font-size: 12px !important;
    color: #6c757d !important;
}

/* Mobile */
@media(max-width: 768px){
   table.wk-responsive-table.vergleichstabelle{
        font-size: 13px !important;
    }
   table.wk-responsive-table.vergleichstabelle thead th{
        padding: 10px 6px !important;
        font-size: 12px !important;
    }
   table.wk-responsive-table.vergleichstabelle td{
        padding: 8px 6px !important;
    }
   table.wk-responsive-table.vergleichstabelle .betrag{
        font-size: 15px !important;
    }
}/* Tabelle schmaler + Schrift kleiner für Desktop */
table.wk-responsive-table.vergleichstabelle{
    table-layout: fixed !important;
    max-width: 100% !important;
}

table.wk-responsive-table.vergleichstabelle th,
table.wk-responsive-table.vergleichstabelle td{
    padding: 8px 5px !important;
    font-size: 13px !important;
    word-wrap: break-word !important;
}

/* Erste Spalte Entgeltgruppe schmaler */
table.wk-responsive-table.vergleichstabelle td:first-child,
table.wk-responsive-table.vergleichstabelle th:first-child{
    width: 18% !important;
}

/* Betrag/Prozent kleiner damit beide Spalten nebeneinander passen */
table.wk-responsive-table.vergleichstabelle .betrag{
    font-size: 15px !important;
}

table.wk-responsive-table.vergleichstabelle .prozent{
    font-size: 11px !important;
}

/* Mobile: Horizontal scroll statt umbrechen */
@media(max-width: 768px){
   .wk-responsive-table.vergleichstabelle{
        display: block !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
    }
}
/* Farbverlauf: je höher die %, desto stärker grün */
table.wk-responsive-table.vergleichstabelle .prozent{
    display: inline-block !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    background: #e8f5e9 !important;
    color: #2e7d32 !important;
    font-weight: 600 !important;
}

/* Für sehr hohe Werte >35% dunkleres grün */
table.wk-responsive-table.vergleichstabelle tr:has(.prozent:contains("37")) .prozent,
table.wk-responsive-table.vergleichstabelle tr:has(.prozent:contains("36")) .prozent{
    background: #c8e6c9 !important;
    color: #1b5e20 !important;
}
/* Prozent-Boxen kräftiger aber noch dezent */
table.wk-responsive-table.vergleichstabelle .prozent{
    display: inline-block !important;
    padding: 2px 5px !important;
    border-radius: 3px !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    background: transparent !important;
    border: none !important;
}

/* Niedrigste 29-32% kräftigeres orange */
table.wk-responsive-table.vergleichstabelle .prozent.p-low{
    background: #fff3e0 !important;
    color: #d84315 !important;
}

/* Mittlere 33-35% kräftigeres grün-grau */
table.wk-responsive-table.vergleichstabelle .prozent.p-mid{
    background: #e8f5e9 !important;
    color: #2e7d32 !important;
}

/* Höchste 36-39% kräftigeres dunkelgrün */
table.wk-responsive-table.vergleichstabelle .prozent.p-high{
    background: #e0f2f1 !important;
    color: #1b5e20 !important;
}
/* TVöD Ampel 2022-2026: je höher %, desto grüner. je niedriger %, desto roter */
table.wk-responsive-table.vergleichstabelle .prozent.p-high{
    background: #c8e6c9 !important; /* dunkelgrün */
    color: #1b5e20 !important;
}
table.wk-responsive-table.vergleichstabelle .prozent.p-mid{
    background: #e8f5e9 !important; /* mittelgrün */
    color: #2e7d32 !important;
}
table.wk-responsive-table.vergleichstabelle .prozent.p-low{
    background: #fff3e0 !important; /* orange */
    color: #e65100 !important;
}
table.wk-responsive-table.vergleichstabelle .prozent.p-min{
    background: #ffebee !important; /* hellrot */
    color: #c62828 !important;
}