/* ─── CSS-VARIABLEN ──────────────────────────────────────────────────────────
   Tooltip-Farben als Variablen mit Fallback – überschreibbar ohne Plugin-CSS-Eingriff.
   --mt-cell-text-color wird per Elementor-Selektor vom Panel gesetzt (PHP-Schritt).
   --mt-mobile-picker-headline-color wird per Elementor-Selektor vom Panel gesetzt.
   ─────────────────────────────────────────────────────────────────────────── */
:root {
    --mt-tooltip-bg:   #fff;
    --mt-tooltip-text: #06142E;
}

/* ─── TABELLE ────────────────────────────────────────────────────────────── */
.mt-table {
    width: 100%;
    table-layout: fixed;
    position: relative;
    z-index: 1;
}

.mt-table-background-wrapper {
    position: relative;
}

.mt-table-background-group {
    position: absolute;
    left: 0;
    right: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    z-index: 0;
}

/* ─── ZEILEN ─────────────────────────────────────────────────────────────── */
.mt-table tbody tr.no-border-bottom td {
    border-bottom: none;
}

/* Icons vertikal zentrieren */
.mt-icon-cell,
.mt-icon {
    vertical-align: middle;
}

/* Kein Hover */
.mt-table tr:hover {
    background-color: transparent;
}

/* ─── MOBILE PICKER (Desktop: versteckt) ─────────────────────────────────── */
.mt-mobile-picker-wrapper {
    display: none;
}

.headline-mobile-picker {
    display: none;
}

/* ─── TOOLTIP ────────────────────────────────────────────────────────────── */
.mt-tooltip-wrapper {
    position: relative;
    display: inline-block;
}

.mt-tooltip {
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: 6px;
    background: var(--mt-tooltip-bg);
    color: var(--mt-tooltip-text);
    white-space: normal;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.3em;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 2;
    width: max-content;
    max-width: 300px;
    text-align: left;
    pointer-events: none;
}

/* Hover-Bridge: verhindert, dass der Tooltip beim Übergang zur Maus verschwindet */
.mt-tooltip::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    height: 12px;
    width: 100%;
    background: transparent;
}

/* Pfeil */
.mt-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 16px;
    border-width: 6px;
    border-style: solid;
    border-color: var(--mt-tooltip-bg) transparent transparent transparent;
}

.mt-tooltip-wrapper:hover .mt-tooltip,
.mt-tooltip:hover {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.mt-tooltip a {
    color: var(--mt-tooltip-text);
}

.mt-tooltip a:hover {
    opacity: 0.7;
}

.mt-tooltip a::after {
    content: '\f061';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    margin-left: 6px;
    font-size: 14px;
    vertical-align: middle;
    text-decoration: none;
    display: inline-block;
}

/* QA-004 FIX: color-mix() Fallback für Safari < 16.2, Chrome < 111, Firefox < 113.
   Browser ohne color-mix()-Support ignorieren die zweite Deklaration und zeigen
   den semi-transparenten Fallback-Unterstrich. Moderne Browser überschreiben ihn
   mit der präzisen Zelltextfarbe. Kein @supports-Block nötig — CSS-Kaskade reicht. */
.mt-tooltip-wrapper.has-tooltip {
    text-decoration: underline;
    text-decoration-style: dashed;
    text-decoration-color: rgba(0, 0, 0, 0.5); /* Fallback: Browser ohne color-mix()-Support */
    text-decoration-color: color-mix(in srgb, var(--mt-cell-text-color) 70%, transparent);
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
}

/* ─── MOBILE ──────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .mt-table .mt-col-1 {
        padding-right: 24px;
    }

    .mt-table th {
        display: none;
    }

    .mt-table-background-group {
        display: none;
    }

    /* QA-007 FIX: Hardcodiertes color: #fff durch CSS-Variable mit Fallback ersetzt.
       Konsistent mit dem restlichen CSS-Variablen-Ansatz des Widgets.
       Das Elementor-Panel setzt --mt-mobile-picker-headline-color via {{WRAPPER}}-Selektor (PHP-Schritt).
       Ohne Panel-Eingabe greift der Fallback #fff. */
    .headline-mobile-picker {
        position: absolute;
        color: var(--mt-mobile-picker-headline-color, #fff);
        top: -32px;
        display: flex;
        width: 100%;
        max-height: 24px;
        overflow: hidden;
    }

    .mt-mobile-picker-wrapper {
        display: block;
        margin-bottom: 1em;
        z-index: 10;
        position: sticky;
        top: calc(10% - 19px);
        border-top: 48px solid;
        border-bottom: 24px solid;
    }

    /* Colgroup-Override mobil: erste zwei Spalten je 50 %, Rest kollabiert */
    .mt-table col:nth-child(1),
    .mt-table col:nth-child(2) {
        width: 50%;
    }

    .mt-table col:nth-child(n+3) {
        width: 0;
    }

    .mt-mobile-column-picker:focus-visible {
        outline: none;
        box-shadow: none;
    }
}