/**
 * Wallet-Übersicht: Ergänzungen zu boersen/overview.css (Reiter, Typ-Zeile, Sicherheits-Abzeichen).
 */

.wl-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 14px;
}

.wl-tabs button {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    padding: 9px 16px;
    border: 1px solid var(--kb-border);
    border-radius: 999px;
    background: var(--kb-bg);
    color: var(--kb-text);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.wl-tabs button[aria-selected="true"] {
    border-color: var(--kb-accent);
    background: var(--kb-accent-soft);
    color: var(--kb-accent-dark, #0b7fbf);
}

.wl-tabs button:focus-visible {
    outline: 2px solid var(--kb-accent);
    outline-offset: 2px;
}

.ov-filter.wl-type-filter[hidden] {
    display: none !important;
}

.wl-type {
    display: block;
    margin: 4px 0 0 30px;
    color: var(--kb-muted);
    font-size: 12px;
    font-weight: 500;
}

.wl-table .ov-col-name img {
    background: #fff;
}

/* Abzeichen dürfen in die nächste Zeile (sonst wurde die Tabelle zu breit bzw. „SE Open Source“ ragte aus der Karte);
   jedes Abzeichen selbst bleibt einzeilig */
.wl-badges {
    white-space: normal;
}

.wl-badge {
    white-space: nowrap;
}

.wl-badge {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    margin: 2px 4px 2px 0;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--kb-good-soft);
    color: var(--kb-text);
    font-size: 12px;
    font-weight: 600;
}

.wl-badge .kb-icon {
    width: 14px;
    height: 14px;
}

/* Finder: Produktansicht unter Logo und Name (wie im Kopf der Testseite, nie beschnitten) */
.ov-finder-view {
    display: flex;
    justify-content: center;
    padding: 14px 8px 18px;
    border-radius: var(--kb-radius);
    background: var(--kb-bg);
}

.ov-finder-view.is-hardware img {
    max-width: 100%;
    max-height: 220px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.ov-finder-why {
    margin: 10px 0;
    padding-left: 18px;
}

/* Wallet-Vergleich A vs B */
.wl-compare-table td.is-better {
    background: var(--kb-good-soft);
    font-weight: 600;
}

.wl-compare-table td .kb-icon {
    vertical-align: -3px;
}

.wl-compare-table th[scope="row"] {
    color: var(--kb-muted);
    font-weight: 500;
    text-align: left;
}

/* Produktfoto in Vergleichs-Kacheln (Logo steht im Kopf) */
.wl-pick-photo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 170px;
    margin: 12px 0 4px;
}

.wl-pick-photo img {
    max-width: 100%;
    max-height: 170px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Markenvergleich (alle Modelle zweier Hersteller) */
.wl-brand-table th[scope="row"] {
    color: inherit;
    white-space: nowrap;
}

.wl-brand-table th[scope="row"] a {
    font-weight: 600;
}

.wl-brand-table {
    font-size: 0.92em;
}

.wl-brand-table th,
.wl-brand-table td {
    padding: 8px 10px;
}

.wl-brand-sub {
    display: block;
    color: var(--kb-muted);
    font-size: 0.85em;
    font-weight: 400;
    white-space: nowrap;
}

.wl-brand-table .wl-brand-row th {
    background: var(--kb-bg-soft);
    font-weight: 700;
    text-align: left;
}

.wl-brand-pick-why {
    margin: 10px 0;
}

.wl-brand-also {
    margin: 0 0 4px;
    color: var(--kb-muted);
    font-size: 0.85em;
}

.wl-brand-why {
    margin: 8px 0;
    padding-left: 18px;
}

.wl-brand-why li + li {
    margin-top: 4px;
}

.wl-brand-incidents {
    margin: 0;
    padding-left: 18px;
}

.wl-brand-incidents li + li {
    margin-top: 4px;
}

.wl-brand-link {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.wl-brand-link p {
    margin: 0;
    flex: 1 1 280px;
}