/* Börsen-Übersicht /vergleich/: nur Seitenspezifisches. Karten, Kacheln, Buttons, Tabelle aus kb-ui.css. */

.kb-overview {
    padding-bottom: 40px;
}

/* Kopf */
.ov-hero .kb-lead {
    max-width: 820px;
}

.ov-kpis {
    margin: 20px 0;
}

.ov-kpis .kb-tile {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ov-kpis .kb-tile > strong {
    font-size: 24px;
}

.ov-kpis .kb-note {
    margin: 0;
}

/* Empfehlungen */
.ov-pick {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
}

.ov-pick.is-winner {
    border-color: var(--kb-cta);
    box-shadow: 0 0 0 1px var(--kb-cta);
}

.ov-pick-label {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    color: var(--kb-accent-dark);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.ov-pick-head {
    display: flex;
    gap: 12px;
    align-items: center;
}

.ov-pick-head img {
    flex: none;
    border-radius: var(--kb-radius-sm);
    object-fit: contain;
}

.ov-pick-head h3,
.ov-pick-name {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}

.ov-pick-head h3 a,
.ov-pick-name a {
    color: var(--kb-text);
    text-decoration: none;
}

.ov-rating {
    color: var(--kb-muted);
    font-size: 14px;
}

.ov-rating strong {
    color: var(--kb-text);
    font-size: 20px;
}

.ov-pick-facts {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ov-pick-facts li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid var(--kb-border);
    font-size: 15px;
}

.ov-pick-facts li:last-child {
    border-bottom: 0;
}

.ov-pick-facts span {
    color: var(--kb-muted);
}

.ov-pick-facts strong {
    text-align: right;
}

.ov-pick .kb-actions {
    margin-top: auto;
}

/* Auswahl-Assistent */
.ov-finder {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--kb-gap);
    align-items: start;
}

.ov-finder fieldset {
    margin: 0 0 18px;
    padding: 0;
    border: 0;
}

.ov-finder legend {
    margin-bottom: 8px;
    font-weight: 700;
}

.ov-finder fieldset label {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    margin: 0 6px 8px 0;
    padding: 7px 12px;
    border: 1px solid var(--kb-border);
    border-radius: 999px;
    background: var(--kb-bg);
    font-size: 15px;
    cursor: pointer;
}

.ov-finder fieldset label:has(input:checked) {
    border-color: var(--kb-accent);
    background: var(--kb-accent-soft);
    color: var(--kb-accent-dark);
    font-weight: 600;
}

.ov-finder fieldset input {
    margin: 0;
    accent-color: var(--kb-accent);
}

.ov-finder select {
    min-width: 220px;
    padding: 8px 10px;
    border: 1px solid var(--kb-border);
    border-radius: var(--kb-radius-sm);
    background: var(--kb-bg);
    font: inherit;
}

.ov-finder-result {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ov-finder-best {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    border-radius: var(--kb-radius);
    background: var(--kb-bg-soft);
}

.ov-finder-best .kb-label {
    color: var(--kb-accent-dark);
}

.ov-finder-reasons {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ov-finder-reasons li {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 3px 0;
    font-size: 15px;
}

.ov-finder-best .kb-note {
    margin: 0;
}

.ov-finder-alts {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ov-finder-alt {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--kb-border);
    border-radius: var(--kb-radius);
    color: var(--kb-text);
    font-size: 15px;
    text-decoration: none;
}

.ov-finder-alt:hover {
    border-color: var(--kb-accent);
}

.ov-finder-alt img {
    flex: none;
    border-radius: var(--kb-radius-sm);
    object-fit: contain;
}

@media (max-width: 900px) {
    .ov-finder {
        grid-template-columns: 1fr;
    }
}

/* Filter: Schalter mit fester Höhe und festem Rahmen – beim An- und Abwählen verrutscht nichts */
.ov-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 0 0 14px;
}

/* Kopfzeile der Filter: links „x von y“, rechts „Zurücksetzen“, darunter die Schalter (feste Plätze) */
.ov-filters::before {
    content: "";
    order: 0;
    flex-basis: 100%;
    height: 0;
}

.ov-filters > .ov-filter,
.ov-filters > .ov-select,
.ov-filters > label:not(.ov-filter),
.ov-filters > select {
    order: 1;
}

.ov-filter {
    position: relative;
    display: inline-flex;
    gap: 7px;
    align-items: center;
    box-sizing: border-box;
    height: 36px;
    padding: 0 14px 0 10px;
    border: 1px solid var(--kb-border);
    border-radius: 999px;
    background: var(--kb-bg);
    color: var(--kb-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.ov-filter:hover {
    border-color: var(--kb-accent);
}

/* Eigenes Kästchen statt der Browser-Checkbox (gleich breit, ob an oder aus) */
.ov-filter input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.ov-filter::before {
    content: "";
    flex: none;
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    border: 1.5px solid #b8c0ca;
    border-radius: 5px;
    background: #fff center / 12px no-repeat;
    transition: background-color .15s ease, border-color .15s ease;
}

.ov-filter:has(input:checked) {
    border-color: var(--kb-accent);
    background: var(--kb-accent-soft);
    color: var(--kb-accent-dark);
}

.ov-filter:has(input:checked)::before {
    border-color: var(--kb-accent);
    background-color: var(--kb-accent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.6l4.6-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.ov-filter:has(input:focus-visible) {
    outline: 2px solid var(--kb-accent);
    outline-offset: 2px;
}

.ov-select select {
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--kb-border);
    border-radius: 999px;
    background: var(--kb-bg);
    color: var(--kb-text);
    font: inherit;
    font-size: 14px;
}

.ov-reset {
    order: -1;
    height: 24px;
    margin-left: auto;
    padding: 0 6px;
    border: 0;
    background: none;
    color: var(--kb-accent-dark);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.ov-reset:disabled {
    color: var(--kb-muted);
    text-decoration: none;
    opacity: .45;
    cursor: default;
}

.ov-count {
    order: -2;
    margin-right: 6px;
    color: var(--kb-muted);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ov-count strong {
    display: inline-block;
    min-width: 2ch;
    color: var(--kb-text);
    text-align: right;
}

/* Tabelle */
.ov-table-wrap {
    border: 1px solid var(--kb-border);
    border-radius: 14px;
    background: var(--kb-bg);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .05);
}

/* Zu breit für den Inhaltsbereich (boersen/overview.js): seitlich scrollen, Namensspalte bleibt stehen */
.ov-table-wrap.is-wide {
    overflow-x: auto;
}

.ov-table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
}

/* Spaltenbreiten festgeschrieben (boersen/overview.js): Filtern und Sortieren verschieben nichts */
.ov-table.is-locked {
    table-layout: fixed;
}

.ov-table.is-locked th,
.ov-table.is-locked td {
    overflow-wrap: break-word; /* nur notfalls umbrechen, nie mitten im Wort, solange es passt */
}

/* Sehr große Beträge (Profil-Rechner) dürfen in festen Spalten umbrechen statt überzulaufen */
.ov-table.is-locked .ov-num {
    white-space: normal;
}

.ov-table th,
.ov-table td {
    padding: 14px 7px; /* kompakt: die Tabelle passt ohne Scrollleiste in den Inhaltsbereich */
    border-bottom: 1px solid #eef1f4;
}

.ov-table tbody tr:last-child > * {
    border-bottom: 0;
}

.ov-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding-top: 11px;
    padding-bottom: 11px;
    border-bottom: 1px solid var(--kb-border);
    background: #f7f9fb;
    color: var(--kb-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.25;
    text-align: left;
    text-transform: uppercase;
    white-space: normal; /* „Trust / Score“ darf umbrechen, Werte bestimmen die Spaltenbreite */
    vertical-align: bottom;
}

.ov-table thead th:first-child {
    border-top-left-radius: 14px;
}

.ov-table thead th:last-child {
    border-top-right-radius: 14px;
}

.ov-table thead button {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
}

.ov-table thead button:hover,
.ov-table thead button[aria-sort] {
    color: var(--kb-text);
}

.ov-table thead button::after {
    content: "";
    flex: none;
    width: 12px;
    height: 12px;
    background: var(--kbi-chevron) center / contain no-repeat;
    opacity: .35;
}

.ov-table thead button[aria-sort]::after {
    opacity: 1;
}

.ov-table thead button[aria-sort="ascending"]::after {
    transform: rotate(180deg);
}

.ov-table td,
.ov-table tbody th {
    vertical-align: middle;
    transition: background-color .15s ease;
}

.ov-table tbody tr:hover > * {
    background: #f7faff;
}

.ov-col-compare {
    width: 40px;
    text-align: center;
}

.ov-col-compare input {
    width: 18px;
    height: 18px;
    accent-color: var(--kb-accent);
    cursor: pointer;
}

/* Erste Spalten bleiben beim seitlichen Scrollen stehen */
.ov-table .ov-col-compare,
.ov-table .ov-col-name {
    position: sticky;
    z-index: 1;
    background: var(--kb-bg);
}

.ov-table .ov-col-compare {
    left: 0;
}

.ov-table .ov-col-name {
    left: 40px;
    min-width: 190px;
    overflow-wrap: normal;
}

/* Anbietername einzeilig (Nutzer 12.10.: nie mitten im Wort trennen); sehr lange Namen und Werte
   (boersen/overview.js setzt .ov-long) brechen nur zwischen Wörtern um */
.ov-col-name a > span:last-child {
    white-space: nowrap;
}

.ov-table .ov-long {
    display: inline-block;
    max-width: 220px;
    white-space: normal;
    overflow-wrap: normal;
    hyphens: manual;
    line-height: 1.25;
}

/* Lange Namen: die Breite gibt die Spalte vor (overview.js bemisst sie nach den meisten Namen). Ohne diese
   stärkere Regel gewann das nowrap oben, und lange Namen ragten in die Nachbarspalte. */
.ov-table .ov-col-name a > span.ov-long:last-child {
    min-width: 0;
    max-width: none;
    white-space: normal;
}

.ov-table .ov-num.ov-long {
    max-width: 170px;
    font-size: 14px;
    font-weight: 700;
}

.ov-table thead .ov-col-compare,
.ov-table thead .ov-col-name {
    z-index: 3;
    background: var(--kb-bg-soft);
}

.ov-col-name a {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    color: var(--kb-text);
    font-weight: 700;
    text-decoration: none;
}

.ov-col-name a:hover span:last-child {
    color: var(--kb-accent-dark);
}

.ov-col-name img {
    flex: none;
    border-radius: var(--kb-radius-sm);
    object-fit: contain;
}

.ov-rank[data-rank="1"] {
    background: #fdf1c7;
    color: #8a6100;
}

.ov-rank[data-rank="2"] {
    background: #eceff3;
    color: #4b5563;
}

.ov-rank[data-rank="3"] {
    background: #f7e3d3;
    color: #8a4b1c;
}

.ov-rank {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--kb-bg-soft);
    color: var(--kb-muted);
    font-size: 12px;
    font-weight: 700;
}

.ov-num {
    font-size: 16px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ov-table .kb-note {
    margin: 0 0 0 1px;
}

.ov-reg {
    max-width: 150px;
    font-size: 14px;
}

.ov-yesno {
    text-align: center;
}

.ov-pay {
    line-height: 1;
    white-space: nowrap; /* Logos in einer Reihe */
}

.ov-pay img {
    width: 40px; /* feste Größe: Spaltenbreite steht schon vor dem Laden der Logos fest */
    height: 18px;
    margin: 0 3px 0 0;
    object-fit: contain;
    vertical-align: middle;
    border: 1px solid var(--kb-border);
    border-radius: 4px;
    background: #fff;
}

.ov-more {
    color: var(--kb-muted);
    font-size: 13px;
}

.ov-col-cta {
    min-width: 150px;
    text-align: right;
    white-space: nowrap;
}

/* Warnhinweise (CFD-Risiko, keine Neukunden) unter dem Knopf statt unter dem Namen */
.ov-cta-warn {
    display: flex;
    gap: 4px;
    align-items: flex-start;
    margin-top: 6px;
    color: var(--kb-warn);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    white-space: normal;
}

.ov-cta-warn .kb-icon {
    width: 14px;
    height: 14px;
    margin-top: 1px;
}

/* Gebühr mit Zusatz („0,99 % + 0,99 € je Order“) darf zwischen den Teilen umbrechen */
.ov-fee {
    display: inline-block;
    min-width: 5.2em;
    white-space: normal;
    line-height: 1.25;
}

/* Alle Knöpfe einer Tabelle gleich breit: so breit wie der längste Text der Spalte */
.ov-table .ov-col-cta a,
.ov-table .ov-col-cta .kb-btn {
    padding-left: 12px;
    padding-right: 12px;
    display: flex;
    box-sizing: border-box;
    width: 100%;
    justify-content: center;
}

.ov-table tbody tr.is-selected td,
.ov-table tbody tr.is-selected th {
    background: var(--kb-accent-soft);
}

.ov-empty {
    margin-top: 12px;
}

/* Beste Börse für … */
.ov-best-tile {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    color: var(--kb-text);
    text-decoration: none;
}

.ov-best-tile:hover {
    border-color: var(--kb-accent);
}

.ov-best-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--kb-accent-soft);
}

.ov-best-icon .kb-icon {
    --kb-icon-soft: #fff;
}

.ov-best-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ov-best-body strong {
    font-size: 18px;
}

.ov-best-body .kb-note {
    margin: 0;
}

/* Beliebte Vergleiche */
.ov-pairs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ov-pairs .kb-chip {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

/* Methodik */
.ov-method h3 {
    margin: 0 0 8px;
    font-size: 18px;
}

.ov-method ul {
    margin: 0;
    padding-left: 18px;
}

/* SEO-/Ratgebertext der Redaktion */
.ov-seo-body > :first-child {
    margin-top: 0;
}

.ov-seo-body > :last-child {
    margin-bottom: 0;
}

.ov-seo-body h3 {
    margin: 24px 0 8px;
    font-size: 20px;
}

.ov-seo-body ul,
.ov-seo-body ol {
    padding-left: 22px;
}

.ov-seo-body a {
    color: var(--kb-accent-dark);
}

.ov-seo-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--kb-radius);
}

/* Vergleichsleiste */
.ov-comparebar {
    position: fixed;
    left: 50%;
    bottom: 16px;
    z-index: 60;
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 10px 14px;
    border: 1px solid var(--kb-border);
    border-radius: var(--kb-radius);
    background: var(--kb-bg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    transform: translateX(-50%);
    font-size: 15px;
}

.ov-comparebar[hidden] {
    display: none;
}

.ov-comparebar [aria-disabled="true"] {
    opacity: .5;
    pointer-events: none;
}

@media (max-width: 768px) {
    /* Karten-Ansicht: lange Werte (z. B. „USB-C, Bluetooth, QR-Code, microSD“) umbrechen statt die Seite zu verbreitern */
    .ov-num {
        white-space: normal;
        overflow-wrap: break-word;
    }

    .ov-comparebar {
        left: 8px;
        right: 8px;
        flex-wrap: wrap;
        justify-content: center;
        transform: none;
    }
}

/* Art der Plattform (Börsentypen) unter dem Namen */
.ov-types {
    display: block;
    max-width: 200px;
    margin: 4px 0 0 32px;
    color: var(--kb-muted);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    white-space: normal;
}

/* Hinweis auf den vollständigen Vergleich (Themenseiten) */
.ov-hint {
    margin-bottom: 20px;
}

/* Länder, aus denen die Börse Kunden annimmt */
.ov-markets {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    margin: 6px 0 0 32px;
}

.ov-market {
    padding: 1px 6px;
    border: 1px solid var(--kb-border);
    border-radius: 4px;
    color: var(--kb-muted);
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
    text-decoration: none;
}

.ov-market-warn {
    display: flex;
    gap: 4px;
    align-items: center;
    max-width: 180px;
    margin: 4px 0 0 30px;
    color: var(--kb-warn);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    white-space: normal;
}

/* Börsen, an die wir im Land der Seite nicht vermitteln: ausgegraut am Tabellenende */
.ov-table tbody tr.is-unavailable,
.ov-table tbody tr.is-unavailable:hover {
    background: var(--kb-bg-soft);
}

/* Zellen durchsichtig, damit die Abblendung (opacity) die Zeilenfarbe nicht aufhellt */
.ov-table tbody tr.is-unavailable > *,
.ov-table tbody tr.is-unavailable:hover > * {
    background: transparent;
}

.ov-table tr.is-unavailable > *:not(.ov-col-name):not(.ov-col-cta),
.ov-table tr.is-unavailable .ov-col-name a {
    opacity: 0.55;
}

/* Kompakte Tabelle: keine Scrollleiste, die Knöpfe bleiben sichtbar.
   Ab 1201 px Tabelle, bis 1200 px wird jede Zeile eine Karte (Beschriftungen und
   Sortier-Auswahl setzt boersen/overview.js). Gilt für alle Vergleichsübersichten. */
.ov-sort-mobile {
    display: none;
}

@media (max-width: 1200px) {
    .ov-table th,
    .ov-table td {
        padding: 10px 6px;
        font-size: 14px;
    }

    .ov-table thead th {
        font-size: 11px;
    }

    .ov-table thead th {
        white-space: normal;
    }

    .ov-table .ov-col-name {
        min-width: 170px;
    }

    .ov-pay img {
        width: 34px;
        height: 16px;
    }
}

@media (max-width: 1200px) {
    .ov-sort-mobile {
        display: flex;
        gap: 8px;
        align-items: center;
        margin: 0 0 10px;
        font-size: 14px;
        font-weight: 600;
    }

    .ov-sort-mobile select {
        padding: 7px 10px;
        border: 1px solid var(--kb-border);
        border-radius: var(--kb-radius-sm);
        background: var(--kb-bg);
        font: inherit;
    }

    .ov-table-wrap {
        overflow: visible;
        border: 0;
    }

    .ov-table,
    .ov-table tbody {
        display: block;
    }

    .ov-table thead {
        display: none;
    }

    /* Karte: Kopf (Platz, Logo, Name, Art, Länder) über die ganze Breite, darunter ein kompaktes Kennzahlen-Raster
       (Handy 3 Spalten, breiter entsprechend mehr), Knopf über die volle Breite */
    .ov-table tbody tr {
        position: relative;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
        gap: 12px 12px;
        align-items: start;
        margin-bottom: 12px;
        padding: 14px 14px 16px;
        border: 1px solid var(--kb-border);
        border-radius: var(--kb-radius);
        background: var(--kb-bg);
        box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    }

    .ov-table tbody tr[hidden] {
        display: none;
    }

    .ov-table tbody tr > * {
        position: static;
        padding: 0;
        border: 0;
        background: none;
        text-align: left;
    }

    .ov-table .ov-col-name,
    .ov-table tbody th.ov-col-name {
        grid-column: 1 / -1;
        position: static; /* Desktop: sticky mit weißem Grund – verdeckte in der Karte das Vergleichen-Kästchen */
        z-index: auto;
        width: auto; /* sonst begrenzt .kb-table tbody th (36 %) den Kopf der Karte */
        min-width: 0;
        background: none;
        padding: 0 34px 10px 0;
        border-bottom: 1px solid #eef1f4;
    }

    .ov-col-name a {
        font-size: 17px;
    }

    /* Karte: der Kopf hat die volle Breite – Namen brechen nur, wenn sie wirklich nicht passen, und dann
       zwischen Wörtern („Summ (ehemals Crypto Tax Calculator)“); gilt auch ohne Skript (Themenseiten) */
    .ov-col-name a > span:last-child,
    .ov-col-name a > span:last-child.ov-long {
        max-width: none;
        white-space: normal;
    }

    /* Werte in den Rasterzellen dürfen zwischen Wörtern umbrechen (z. B. „ab 39 €/Steuerjahr“) */
    .ov-table tbody td,
    .ov-table tbody td *:not(.ov-pay):not(.kb-btn):not(.wl-badge) {
        white-space: normal;
        hyphens: auto;
    }

    /* Abzeichen und lange Freitexte bekommen zwei Rasterspalten */
    .ov-table tbody td.wl-badges,
    .ov-table tbody td:has(.ov-long) {
        grid-column: span 2;
    }

    .ov-table .ov-types,
    .ov-table .ov-markets {
        margin-left: 30px;
    }

    .ov-table .ov-col-compare {
        position: absolute;
        top: 16px;
        right: 14px;
        left: auto;
        z-index: 2;
        width: auto;
        padding: 0;
        background: none;
    }

    .ov-table td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 3px;
        color: var(--kb-muted);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .02em;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .ov-table tbody td {
        font-size: 14px;
        line-height: 1.3;
    }

    .ov-table .ov-num {
        font-size: 15px;
    }

    .ov-table .ov-reg {
        font-size: 13px;
    }

    .ov-table .ov-yesno {
        text-align: left;
    }

    .ov-table .ov-pay {
        white-space: nowrap;
    }

    .ov-table .ov-pay img {
        width: 32px;
        height: 16px;
    }

    .ov-table .ov-col-cta {
        grid-column: 1 / -1;
        min-width: 0;
        margin-top: 2px;
        text-align: center;
    }

    .ov-table .ov-col-cta > *,
    .ov-table .ov-col-cta .kb-btn,
    .ov-table .ov-col-cta a {
        display: flex;
        box-sizing: border-box;
        width: 100%;
        max-width: none;
        margin: 0;
        justify-content: center;
        text-align: center;
    }

    .ov-table .ov-col-cta .ov-cta-warn {
        justify-content: center;
        margin-top: 8px;
    }

    .ov-table tbody tr.is-selected {
        border-color: var(--kb-accent);
        background: var(--kb-accent-soft);
    }

    .ov-table tr.is-unavailable {
        background: var(--kb-bg-soft);
    }

    .ov-reg,
    .ov-market-warn {
        max-width: none;
    }

    .ov-market-warn,
    .ov-types {
        max-width: none;
    }
}

/* Anzeige-Zeile: dezent abgesetzt, Kennzeichnung statt Rangziffer */
.ov-table tr[data-ad] > td,
.ov-table tr[data-ad] > th {
    background: #fbfaf5;
}

.ov-table tr[data-ad] > :first-child {
    box-shadow: inset 3px 0 0 #e0c97a;
}

.ov-table tr[data-ad] .kb-sponsored-tag {
    margin-right: 8px;
}

/* Anzeige mit ausgeblendeter Angabe: in der Kartenansicht Feld samt Beschriftung weglassen (Tabelle behält die leere Zelle) */
@media (max-width: 1200px) {
    .ov-table td[data-ad-hidden] {
        display: none;
    }
}