/*
 * kb-ui – gemeinsames Design aller Plugin-Seiten (Börsen, Kryptowährungen, Vergleiche, Wallets …).
 *
 * Angelehnt an krypto-boersen.com: Schrift vom Theme (dort Lato), Text #303640, Aktions-Orange
 * #FFA500, blaue Linie (#0AA6F5) unter Abschnittsüberschriften, helle Karten mit dünnem Rahmen,
 * Inhaltsbreite 1.200 px. Werte nur hier als Tokens ändern; Seiten-CSS nutzt die Bausteine (.kb-…)
 * und ergänzt nur, was es nur dort gibt.
 */

:root {
    --kb-width: 1200px;
    --kb-text: #303640;
    --kb-muted: #6b7280;
    --kb-faint: #9ca3af;
    --kb-bg: #ffffff;
    --kb-bg-soft: #f5f6f8;
    --kb-border: #e6e8eb;
    --kb-cta: #ffa500;
    --kb-cta-hover: #f29400;
    --kb-accent: #0aa6f5;
    --kb-accent-dark: #0284c7;
    --kb-accent-soft: #e8f6fe;
    --kb-good: #16a34a;
    --kb-good-soft: #effaf3;
    --kb-bad: #dc2626;
    --kb-bad-soft: #fdf1f1;
    --kb-warn: #b45309;
    --kb-warn-soft: #fff7e6;
    --kb-radius: 12px;
    --kb-radius-sm: 6px;
    --kb-gap: 24px;
    --kb-pad: 28px;
    --kb-font-size: 17px; /* Fließtext der Plugin-Seiten, unabhängig von der Theme-Größe (Dev 22 px, Live 18 px) */
}

/* Grundschrift aller Plugin-Seiten: Familie vom Theme, Größe einheitlich */
.kb-page,
.krypto-boersen-single,
.krypto-boersen-comparison,
.krypto-cryptocurrency-single {
    font-size: var(--kb-font-size);
    line-height: 1.6;
}

/* Seite */
.kb-page {
    color: var(--kb-text);
    font-family: inherit;
}

.kb-page > * {
    box-sizing: border-box;
    max-width: var(--kb-width);
    margin-left: auto;
    margin-right: auto;
}

.kb-page *,
.kb-page *::before,
.kb-page *::after {
    box-sizing: border-box;
}

.kb-breadcrumb {
    overflow: hidden;
    padding: 14px 0 10px;
    font-size: 14px;
    color: var(--kb-muted);
    /* immer eine Zeile: lange Artikeltitel am Ende mit „…“ kürzen (die H1 darunter zeigt den vollen Titel) */
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kb-breadcrumb a {
    color: var(--kb-muted);
    text-decoration: none;
}

.kb-breadcrumb a:hover {
    color: var(--kb-accent-dark);
}

/* Schrift */
.kb-h1 {
    margin: 0 0 8px;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--kb-text);
}

.kb-h2 {
    width: fit-content; /* blaue Linie nur so lang wie der Text */
    max-width: 100%;
    margin: 0 0 20px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--kb-accent);
    font-size: 25px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--kb-text);
}

.kb-h3 {
    margin: 24px 0 10px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--kb-text);
}

.kb-lead {
    margin: 0 0 16px;
    color: #4b5563;
}

.kb-note {
    margin: 10px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--kb-muted);
}

.kb-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--kb-muted);
}

/* Karte / Abschnitt */
.kb-card {
    margin-bottom: var(--kb-gap);
    padding: var(--kb-pad);
    border: 1px solid var(--kb-border);
    border-radius: var(--kb-radius);
    background: var(--kb-bg);
    scroll-margin-top: 90px;
}

.kb-card > :last-child {
    margin-bottom: 0;
}

.kb-card--soft {
    background: var(--kb-bg-soft);
}

.kb-tile {
    padding: 14px 16px;
    border: 1px solid var(--kb-border);
    border-radius: var(--kb-radius);
    background: var(--kb-bg);
}

.kb-tile > strong {
    display: block;
    margin-top: 2px;
    font-size: 16px;
    line-height: 1.35;
}

.kb-tile--soft {
    border-color: transparent;
    background: var(--kb-bg-soft);
}

.kb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--kb-min, 240px), 100%), 1fr));
    gap: 12px;
}

/* Funktionen als Ja/Nein-Kacheln auf allen Testseiten (Krypto_Product_Blocks::features, Markup wie Börse) */
.kb-functions .functions-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: 12px;
}

.kb-functions .function-item {
    padding: 12px 14px;
}

.kb-functions .function-label {
    overflow-wrap: normal;
    word-wrap: normal;
    hyphens: auto;
}

.kb-functions + .kb-h3,
.kb-functions .functions-grid + h3 {
    margin-top: 28px;
}

/* Letzte Kachel allein in der Reihe: füllt die Reihe (kb-tables.js, balanceRows) */
.kb-tile--fill {
    grid-column: 1 / -1;
}

.kb-split {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--kb-gap);
    align-items: start;
}

/* Buttons */
.kb-btn {
    display: inline-flex;
    white-space: nowrap;
    gap: 6px;
    align-items: center;
    justify-content: center;
    padding: 11px 20px;
    border: 1px solid #cfd4da;
    border-radius: var(--kb-radius-sm);
    background: var(--kb-bg);
    color: var(--kb-text);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}

.kb-btn:hover,
.kb-btn:focus-visible {
    border-color: var(--kb-text);
    color: var(--kb-text);
}

.kb-btn--primary {
    border-color: var(--kb-cta);
    background: var(--kb-cta);
    color: #fff;
}

.kb-btn--primary:hover,
.kb-btn--primary:focus-visible {
    border-color: var(--kb-cta-hover);
    background: var(--kb-cta-hover);
    color: #fff;
}

/* Linkfarben von Textbereichen (z. B. „.ov-seo-body a“, Bausteine im Fließtext) dürfen Knöpfe nicht umfärben */
a.kb-btn.kb-btn--primary,
a.kb-btn.kb-btn--primary:visited,
a.kb-btn.kb-btn--primary:hover,
a.kb-btn.kb-btn--primary:focus-visible,
button.kb-btn.kb-btn--primary {
    color: #fff;
    text-decoration: none;
}

.kb-btn--small {
    padding: 7px 12px;
    font-size: 14px;
}

.kb-btn:focus-visible,
.kb-chip:focus-visible,
.kb-jumps a:focus-visible {
    outline: 2px solid var(--kb-accent);
    outline-offset: 2px;
}

.kb-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

/* Knöpfe in Listen immer gleich groß – unabhängig von der Textlänge: in Karten gleich breite Spalten
   (nebeneinander, solange Platz ist, sonst untereinander in voller Breite; je Zeile gleich hoch),
   in Tabellen füllen sie die Spalte (so breit wie der längste Knopf). */
.kb-grid .kb-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

/* Knopftext nie umbrechen (Nutzerentscheidung 06.10.2026): gleich breit nebeneinander, passt es nicht,
   rutscht der Knopf in die nächste Zeile und nimmt dort die volle Breite. */
.kb-grid .kb-actions > .kb-btn,
.kb-grid .kb-actions > .kb-geo-na {
    flex: 1 1 0;
    min-width: max-content;
    text-align: center;
}

.kb-table td > .kb-btn {
    display: flex;
    width: 100%;
    max-width: 200px;
    margin-left: auto;
    text-align: center;
}

/* Chips und Badges */
.kb-chip {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    padding: 5px 11px;
    border: 1px solid var(--kb-border);
    border-radius: 999px;
    background: var(--kb-bg);
    color: var(--kb-text);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

a.kb-chip:hover {
    border-color: var(--kb-accent);
}

.kb-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--kb-bg-soft);
    color: #4b5563;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.kb-badge--good {
    background: var(--kb-good-soft);
    color: #166534;
}

.kb-badge--bad {
    background: var(--kb-bad-soft);
    color: #991b1b;
}

.kb-badge--warn {
    background: var(--kb-warn-soft);
    color: var(--kb-warn);
}

.kb-badge--info {
    background: var(--kb-accent-soft);
    color: var(--kb-accent-dark);
}

/* Sprunglinks */
/* Sprungmarken: eine wischbare Zeile, nie breiter als ihr Platz (verbreiterte sonst auf dem Handy die Seite) */
.kb-jumps {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    min-width: 0;
    max-width: min(100%, var(--kb-width)); /* nur 100 % überschrieb die Inhaltsbreite: Leiste lief bis an den Fensterrand */
    margin-bottom: var(--kb-gap);
    padding: 2px 0 6px;
    scrollbar-width: thin;
}

.kb-jumps a {
    flex: 0 0 auto;
    padding: 6px 13px;
    border: 1px solid var(--kb-border);
    border-radius: 999px;
    background: var(--kb-bg);
    color: var(--kb-text);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.kb-jumps a:hover {
    border-color: var(--kb-accent);
    color: var(--kb-accent-dark);
}

/* Reiterleiste der Testseiten (Krypto_Product_Nav): wie bei den Börsen über die volle Fensterbreite, Reiter
   bündig mit dem Inhalt (.nav-container, 1.200 px), klebt beim Scrollen oben */
.kb-page > .kb-product-nav {
    max-width: none;
    margin: 0 0 var(--kb-gap);
}

.kb-product-nav .tab-link {
    text-decoration: none;
    overflow-wrap: normal;
}

.kb-product-nav .tab-link:focus-visible {
    outline: 2px solid var(--kb-accent);
    outline-offset: -2px;
}

/* Noten und Balken */
.kb-score {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
}

.kb-score small {
    font-size: 14px;
    font-weight: 600;
    color: var(--kb-muted);
}

.kb-bar {
    display: block;
    height: 8px;
    border-radius: 999px;
    background: #edf0f3;
    overflow: hidden;
}

.kb-bar > i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--kb-accent);
}

.kb-meter {
    display: grid;
    grid-template-columns: minmax(150px, 1.2fr) 2fr 40px;
    column-gap: 12px;
    align-items: center;
    padding: 7px 0;
    font-size: 15px;
}

.kb-meter strong {
    text-align: right;
}

.kb-meter-scale {
    grid-column: 2;
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--kb-faint);
}

.kb-meter--total {
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px solid var(--kb-border);
    font-weight: 700;
}

/* Tabellen */
.kb-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.kb-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: 15px;
}

.kb-table th,
.kb-table td {
    padding: 11px 12px;
    border-bottom: 1px solid var(--kb-border);
    text-align: left;
    vertical-align: top;
}

.kb-table thead th {
    border-bottom-width: 2px;
    color: var(--kb-muted);
    font-size: 13px;
    font-weight: 700;
}

.kb-table tbody th {
    width: 36%;
    color: #4b5563;
    font-weight: 600;
}

.kb-table ul {
    margin: 0;
    padding-left: 18px;
}

.kb-table .is-current {
    background: var(--kb-accent-soft);
    font-weight: 600;
}

.kb-table--compare th,
.kb-table--compare td {
    min-width: 140px;
}

/* Checklisten, Pro/Contra */
.kb-checklist {
    margin: 0;
    padding: 0;
    list-style: none;
}

.kb-checklist li {
    position: relative;
    padding: 3px 0 3px 26px;
}

.kb-checklist li::before {
    position: absolute;
    left: 0;
    font-weight: 700;
}

.kb-checklist .is-on::before {
    content: "";
    top: 5px;
    width: 18px;
    height: 18px;
    background: var(--kbi-check-good) center / contain no-repeat;
}

.kb-checklist .is-off {
    color: var(--kb-faint);
}

.kb-checklist .is-off::before {
    content: "–";
}

.kb-checklist--cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    column-gap: 16px;
}

/* Gemeinsame Abschnitte der Testseiten (Krypto_Product_Blocks): Schritte, Bewertung, A-gegen-B-Links */
.kb-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: kb-step;
}

/* Desktop: alle Schritte in einer Reihe (sonst stand der fünfte allein darunter) */
@media (min-width: 1000px) {
    .kb-steps {
        grid-template-columns: repeat(var(--kb-steps, 4), minmax(0, 1fr));
    }
}

.kb-steps li {
    position: relative;
    padding: 16px 16px 16px 58px;
    border: 1px solid var(--kb-border);
    border-radius: var(--kb-radius);
    background: var(--kb-bg);
    counter-increment: kb-step;
}

.kb-steps li::before {
    content: counter(kb-step);
    position: absolute;
    top: 14px;
    left: 14px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--kb-accent-soft);
    color: var(--kb-accent-dark);
    font-weight: 700;
}

.kb-steps strong {
    display: block;
    line-height: 1.35;
}

.kb-steps p {
    margin: 6px 0 0;
    font-size: 15px;
    color: #4b5563;
}

.kb-steps-cta {
    margin-top: 16px;
}

.kb-rating {
    align-items: center;
}

/* Vorschau aller Testseiten: App-Screens hochkant in einer wischbaren Reihe wie bei den Börsen (die Raster der
   Sparten-CSS waren für Querformat gebaut – Handy-Screens wurden zu Mini-Kacheln) */
#vorschau [class$="-gallery"] {
    display: flex;
    gap: 16px;
    margin-top: 0;
    padding-bottom: 6px;
    overflow-x: auto;
}

#vorschau [class$="-gallery"] figure {
    flex: 0 0 auto;
    width: 174px; /* Bildgröße „medium“ (174 × 300) ohne Hochskalieren */
}

#vorschau [class$="-gallery"] a {
    aspect-ratio: auto;
}

#vorschau [class$="-gallery"] img {
    display: block;
    width: 100%;
    height: auto;
}

.kb-rating-verdict .kb-score {
    font-size: 44px;
    line-height: 1;
}

.kb-rating-verdict .kb-lead {
    margin-top: 12px;
}

.kb-vs-link {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    color: var(--kb-text);
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
}

.kb-vs-link:hover {
    border-color: var(--kb-accent);
    color: var(--kb-accent-dark);
}

.kb-vs-logos {
    display: inline-flex;
    gap: 10px;
    align-items: center;
}

.kb-vs-logos img {
    border-radius: var(--kb-radius-sm);
    object-fit: contain;
}

.kb-vs-names .kb-note {
    font-weight: 400;
}

/* Namen nie in sich umbrechen, nur zwischen den beiden Namen */
.kb-vs-n {
    display: inline-block;
    white-space: nowrap;
}

.kb-vs-badge {
    flex: none;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--kb-bg-soft);
    color: var(--kb-muted);
    font-size: 12px;
    text-transform: uppercase;
}

.kb-proscons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 12px;
}

.kb-pros,
.kb-cons {
    padding: 16px 18px;
    border-radius: var(--kb-radius);
}

.kb-pros {
    background: var(--kb-good-soft);
}

.kb-cons {
    background: var(--kb-bad-soft);
}

.kb-pros h3,
.kb-cons h3 {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 700;
}

.kb-pros ul,
.kb-cons ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.kb-pros li,
.kb-cons li {
    position: relative;
    padding: 4px 0 4px 24px;
}

.kb-pros li::before,
.kb-cons li::before {
    position: absolute;
    left: 0;
    font-weight: 700;
}

.kb-pros li::before {
    content: "";
    top: 6px;
    width: 18px;
    height: 18px;
    background: var(--kbi-check-good) center / contain no-repeat;
}

.kb-cons li::before {
    content: "";
    top: 6px;
    width: 18px;
    height: 18px;
    background: var(--kbi-cross-bad) center / contain no-repeat;
}

/* Hinweise */
.kb-callout {
    margin: 12px 0 0;
    padding: 14px 18px;
    border-left: 4px solid var(--kb-cta);
    border-radius: var(--kb-radius-sm);
    background: var(--kb-warn-soft);
}

.kb-callout--info {
    border-left-color: var(--kb-accent);
    background: var(--kb-accent-soft);
}

/* CTA-Box „Nächster Schritt“ (Testseiten, nach „Unser Test“) */
.kb-next-step {
    border-left: 4px solid var(--kb-cta);
    background: var(--kb-accent-soft);
}

.kb-next-step__title {
    margin: 0 0 6px;
    font-size: 1.15rem;
    font-weight: 700;
}

.kb-next-step__text {
    margin: 0 0 14px;
}

.kb-next-step__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.kb-next-step__note {
    margin: 12px 0 0;
    font-size: 0.85rem;
    color: var(--kb-muted);
}

/* Info-Knopf mit schwebendem Hinweis (Krypto_Icons::tip(), public/js/kb-tip.js) */
.kb-tip-btn {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 22px;
    height: 22px;
    margin: 0 0 0 4px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--kb-accent-dark);
    line-height: 1;
    vertical-align: middle;
    cursor: help;
}

.kb-tip-btn .kb-icon {
    width: 18px;
    height: 18px;
    color: currentColor;
}

.kb-tip-btn:hover,
.kb-tip-btn[aria-expanded="true"] {
    background: var(--kb-accent-soft);
}

.kb-tip-btn:focus-visible {
    outline: 2px solid var(--kb-accent);
    outline-offset: 2px;
}

.kb-tip-pop {
    position: fixed;
    z-index: 100000;
    max-width: min(320px, calc(100vw - 24px));
    padding: 10px 12px;
    border-radius: 8px;
    background: #1f2937;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
    color: #fff;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
    white-space: normal;
    pointer-events: none;
}

/* Anmeldebonus hervorheben (Krypto_Bonus_Highlight): Band am Knopf, Box „Nächster Schritt“, Sticky, Tabellen */
.kb-bonus-band,
.kb-next-step__bonus {
    display: block;
    margin: 12px 0 0;
    padding: 8px 12px;
    border: 1px solid #ffd27a;
    border-radius: var(--kb-radius-sm);
    background: var(--kb-warn-soft);
    color: var(--kb-text);
    line-height: 1.35;
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
}

.kb-bonus-band strong,
.kb-next-step__bonus strong {
    font-weight: 700;
}

.kb-next-step__bonus {
    margin: 0 0 14px;
}

.kb-bonus-band svg,
.kb-next-step__bonus svg,
.kb-bonus-chip svg,
.kb-bonus-badge svg {
    flex: none;
    color: var(--kb-cta-hover);
}

.kb-bonus-band svg,
.kb-next-step__bonus svg {
    margin: -3px 8px 0 0;
}

.kb-bonus-chip svg,
.kb-bonus-badge svg {
    width: 14px;
    height: 14px;
}

.kb-bonus-band a {
    font-size: 0.85em;
    color: var(--kb-accent-dark);
}

.kb-bonus-chip {
    display: inline-flex;
    gap: 5px;
    align-items: center;
    min-width: 0;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--kb-warn-soft);
    color: var(--kb-text);
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Handy: Bonus als eigene Zeile über der mitlaufenden Leiste (Leiste selbst bleibt einzeilig) */
@media (max-width: 768px) {
    .sticky-footer-bar .kb-bonus-chip {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 100%;
        justify-content: center;
        padding: 4px 12px;
        border-top: 1px solid #ffd27a;
        border-radius: 0;
        font-size: 0.8rem;
        visibility: hidden;
    }

    .sticky-footer-bar.visible .kb-bonus-chip {
        visibility: visible;
    }
}

.kb-bonus-badge {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--kb-warn-soft);
    color: var(--kb-warn);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    vertical-align: middle;
}

/* FAQ */
.kb-faq {
    margin-bottom: 8px;
    border: 1px solid var(--kb-border);
    border-radius: var(--kb-radius-sm);
}

.kb-faq summary {
    position: relative;
    padding: 14px 44px 14px 16px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

/* FAQ-Frage als echte H3 (SEO), sieht aus wie die bisherige Summary-Zeile */
details summary h3.kb-faq-q {
    display: inline;
    margin: 0;
    padding: 0;
    font: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    text-transform: none;
    color: inherit;
}

.kb-faq summary::-webkit-details-marker {
    display: none;
}

.kb-faq summary::after {
    content: "+";
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--kb-accent-dark);
    font-size: 20px;
}

.kb-faq[open] summary::after {
    content: "\2212";
}

.kb-faq > p,
.kb-faq > div {
    margin: 0;
    padding: 0 16px 16px;
    color: #4b5563;
}

/* Zeitleiste */
.kb-timeline {
    margin: 0;
    padding: 0 0 0 22px;
    list-style: none;
    border-left: 2px solid var(--kb-border);
}

.kb-timeline > li {
    position: relative;
    padding: 0 0 20px 16px;
}

.kb-timeline > li::before {
    content: "";
    position: absolute;
    left: -30px;
    top: 5px;
    width: 14px;
    height: 14px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--kb-faint);
    box-shadow: 0 0 0 1px var(--kb-border);
}

.kb-timeline > li.is-warn::before {
    background: #f59e0b;
}

.kb-timeline > li.is-bad::before {
    background: var(--kb-bad);
}

.kb-timeline p {
    margin: 4px 0;
    color: #4b5563;
}

/* Sticky-Leiste (ergänzt .sticky-footer-bar der Börsen) */
.kb-sticky .sticky-footer-content {
    max-width: var(--kb-width);
}

@media (max-width: 900px) {
    .kb-split {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 768px) {
    :root {
        --kb-pad: 18px;
        --kb-gap: 16px;
    }

    .kb-page {
        padding-left: 8px;
        padding-right: 8px;
    }

    .kb-h1 {
        font-size: 26px;
    }

    .kb-h2 {
        font-size: 21px;
    }

    .kb-meter {
        grid-template-columns: 1fr 40px;
    }

    .kb-meter .kb-bar,
    .kb-meter-scale {
        grid-column: 1 / -1;
    }
}

/* Eigene Icons (Krypto_Icons::svg, Sprite public/images/kb-icons.svg): Linie in Textgrau, Akzent in Blau.
   24 px Standard, 20 px (--sm) für Listen, Tabellen und Pro/Contra. */
.kb-icon {
    display: inline-block;
    flex: none;
    width: 24px;
    height: 24px;
    color: var(--kb-text);
    vertical-align: middle;
    --kb-icon-soft: var(--kb-accent-soft);
    --kb-icon-accent: var(--kb-accent);
}

.kb-icon--sm {
    width: 20px;
    height: 20px;
}

.kb-icon--good {
    color: var(--kb-good);
    --kb-icon-soft: var(--kb-good-soft);
    --kb-icon-accent: var(--kb-good);
}

.kb-icon--bad {
    color: var(--kb-bad);
    --kb-icon-soft: var(--kb-bad-soft);
    --kb-icon-accent: var(--kb-bad);
}

.kb-icon--warn {
    color: var(--kb-warn);
    --kb-icon-soft: var(--kb-warn-soft);
    --kb-icon-accent: var(--kb-warn);
}

/* H3 nie in normaler Schriftstärke (sonst wirkt sie wie Fließtext). Größen siehe docs/DESIGN-REGELN.md:
   Zwischenüberschrift in einer Karte 20 px, Titel einer Kachel 17–18 px. */
.kb-page h3,
.krypto-cryptocurrency-single h3,
.krypto-boersen-single h3,
.krypto-boersen-comparison h3 {
    font-weight: 700;
    line-height: 1.35;
    color: var(--kb-text);
}

/* Icon auf farbiger Fläche (z. B. blaue Kachel) */
.kb-icon--invert {
    color: #fff;
    --kb-icon-soft: rgba(255, 255, 255, .2);
    --kb-icon-accent: #fff;
}

/* Farbpunkt für Ampel-Status (statt ) */
.kb-dot {
    display: inline-block;
    flex: none;
    width: 9px;
    height: 9px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--kb-faint);
    vertical-align: middle;
}

.kb-dot--good { background: var(--kb-good); }
.kb-dot--accent { background: var(--kb-accent); }
.kb-dot--warn { background: #f59e0b; }
.kb-dot--bad { background: var(--kb-bad); }
.kb-dot--neutral { background: var(--kb-faint); }

/* kb-icons:start (erzeugt von tools/build-icons.py, nicht von Hand bearbeiten) */
:root {
    --kbi-check-good: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Ccircle fill=%22%23effaf3%22 stroke=%22none%22 cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Ccircle fill=%22none%22 stroke=%22%2316a34a%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath fill=%22none%22 stroke=%22%2316a34a%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M8.5 12.5l2.5 2.5 4.5-5%22/%3E%3C/svg%3E");
    --kbi-cross-bad: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Ccircle fill=%22%23fdf1f1%22 stroke=%22none%22 cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Ccircle fill=%22none%22 stroke=%22%23dc2626%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath fill=%22none%22 stroke=%22%23dc2626%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M9.5 9.5l5 5M14.5 9.5l-5 5%22/%3E%3C/svg%3E");
    --kbi-thumbsup-good: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22%23effaf3%22 stroke=%22none%22 d=%22M3.5 11.5a1 1 0 0 1 1-1h3V20h-3a1 1 0 0 1-1-1z%22/%3E%3Cpath fill=%22none%22 stroke=%22%2316a34a%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M3.5 11.5a1 1 0 0 1 1-1h3V20h-3a1 1 0 0 1-1-1z%22/%3E%3Cpath fill=%22none%22 stroke=%22%2316a34a%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M7.5 10.5l3.5-7a2.5 2.5 0 0 1 2.5 2.5v3h5.2a2 2 0 0 1 2 2.3l-1.2 7a2 2 0 0 1-2 1.7H7.5%22/%3E%3C/svg%3E");
    --kbi-thumbsdown-bad: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22%23fdf1f1%22 stroke=%22none%22 transform=%22rotate(180 12 12)%22 d=%22M3.5 11.5a1 1 0 0 1 1-1h3V20h-3a1 1 0 0 1-1-1z%22/%3E%3Cpath fill=%22none%22 stroke=%22%23dc2626%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 transform=%22rotate(180 12 12)%22 d=%22M3.5 11.5a1 1 0 0 1 1-1h3V20h-3a1 1 0 0 1-1-1z%22/%3E%3Cpath fill=%22none%22 stroke=%22%23dc2626%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 transform=%22rotate(180 12 12)%22 d=%22M7.5 10.5l3.5-7a2.5 2.5 0 0 1 2.5 2.5v3h5.2a2 2 0 0 1 2 2.3l-1.2 7a2 2 0 0 1-2 1.7H7.5%22/%3E%3C/svg%3E");
    --kbi-neutral: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Ccircle fill=%22%23f5f6f8%22 stroke=%22none%22 cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Ccircle fill=%22none%22 stroke=%22%236b7280%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath fill=%22none%22 stroke=%22%236b7280%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M8.5 12h7%22/%3E%3C/svg%3E");
    --kbi-mail: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Crect fill=%22%23e8f6fe%22 stroke=%22none%22 x=%223%22 y=%225%22 width=%2218%22 height=%2214%22 rx=%222.5%22/%3E%3Crect fill=%22none%22 stroke=%22%23303640%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 x=%223%22 y=%225%22 width=%2218%22 height=%2214%22 rx=%222.5%22/%3E%3Cpath fill=%22none%22 stroke=%22%230aa6f5%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M3.5 7l8.5 6 8.5-6%22/%3E%3C/svg%3E");
    --kbi-tick-good: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22none%22 stroke=%22%2316a34a%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M5 12.5l4.5 4.5L19 7.5%22/%3E%3C/svg%3E");
    --kbi-tick-white: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22none%22 stroke=%22%23ffffff%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M5 12.5l4.5 4.5L19 7.5%22/%3E%3C/svg%3E");
    --kbi-minus-faint: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22none%22 stroke=%22%239ca3af%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M6 12h12%22/%3E%3C/svg%3E");
    --kbi-chevron: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22none%22 stroke=%22%236b7280%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M6 9l6 6 6-6%22/%3E%3C/svg%3E");
}
/* kb-icons:end */

/* E-E-A-T: Autor, Datum, geprüft von (Krypto_Eeat) */
.kb-eeat {
    display: flex;
    gap: 12px;
    align-items: center;
    color: var(--kb-text);
    font-size: 13px;
    line-height: 1.45;
}

.kb-eeat-avatar {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

/* Ohne Profilfoto: Initialen (nie Gravatar) */
.kb-eeat-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--kb-accent-soft);
    color: var(--kb-accent-dark, #0b7fbf);
    font-size: 15px;
    font-weight: 700;
}

.kb-eeat-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.kb-eeat a {
    color: var(--kb-text);
    font-weight: 700;
    text-decoration: none;
}

.kb-eeat a:hover {
    color: var(--kb-accent-dark);
    text-decoration: underline;
}

.kb-eeat-dates {
    color: var(--kb-muted);
}

.kb-eeat-review .kb-icon {
    vertical-align: -3px;
}

/* Kasten oben rechts im Kopfbereich (Testseiten) */
.kb-eeat--box {
    align-self: stretch;
    margin: 0 0 18px;
    padding: 10px 14px;
    border: 1px solid var(--kb-border);
    border-radius: var(--kb-radius);
    background: var(--kb-bg, #fff);
    text-align: left;
}

/* Zeile unter der Überschrift (Übersichten, Vergleiche) */
/* Avatar bleibt links, nur der Text bricht um (vorher rutschte der Text unter den Avatar) */
.kb-eeat--line {
    flex-wrap: nowrap;
    margin: 6px 0 14px;
}

.kb-eeat--line .kb-eeat-text {
    flex: 1 1 auto;
    min-width: 0;
}

.kb-eeat--line .kb-eeat-avatar {
    width: 36px;
    height: 36px;
}

.kb-eeat--line .kb-eeat-text {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2px 14px;
}

/* Brotkrumen über der Kopfbox der Börsen-Testseite */
.kb-breadcrumb--above {
    box-sizing: border-box;
    max-width: var(--kb-width);
    margin: 20px auto -8px;
    padding: 0 4px;
}

@media (max-width: 900px) {
    .kb-breadcrumb--above {
        margin: 14px 12px -4px;
        padding: 0;
    }
}

/*
 * Schmale Bildschirme: Tabellen auf Testseiten, Vergleichen und Ratgebern brechen um statt zu scrollen
 * (Regel: nie eine waagerechte Scrollleiste). Die Übersichtstabellen (.ov-table) haben eine eigene
 * Kartenansicht in boersen/overview.css.
 */
@media (max-width: 760px) {
    .kb-page .kb-table:not(.ov-table) {
        width: 100%;
        table-layout: fixed;
    }

    .kb-page .kb-table:not(.ov-table) th,
    .kb-page .kb-table:not(.ov-table) td {
        min-width: 0;
        padding: 8px 5px;
        font-size: 12.5px;
        white-space: normal;
        overflow-wrap: anywhere;
        hyphens: auto;
    }

    /* Breite Tabellen (ab 5 Spalten, public/js/kb-tables.js): je Zeile eine Karte, „Spalte: Wert“ */
    table.kb-table--cards,
    .kb-table--cards tbody,
    .kb-table--cards tr,
    .kb-table--cards th,
    .kb-table--cards td {
        display: block;
        width: 100% !important;
        box-sizing: border-box;
    }

    .kb-table--cards thead {
        display: none;
    }

    .kb-table--cards tbody tr {
        padding: 12px 0;
        border-bottom: 1px solid var(--kb-border);
    }

    .kb-table--cards tbody th,
    .kb-table--cards tbody td {
        padding: 3px 0;
        border: 0;
        font-size: 14px;
        overflow-wrap: break-word;
        hyphens: manual;
    }

    .kb-table--cards tbody tr > :first-child {
        padding-bottom: 6px;
        font-size: 15px;
        font-weight: 700;
    }

    .kb-table--cards td[data-label] {
        display: flex;
        flex-wrap: wrap;
        gap: 4px 8px;
        justify-content: flex-end;
        align-items: baseline;
        text-align: right;
    }

    .kb-table--cards td[data-label]::before {
        content: attr(data-label);
        flex: 0 1 auto;
        max-width: 55%;
        margin-right: auto; /* Beschriftung links, alle Teile des Werts zusammen rechts */
        color: var(--kb-muted);
        font-weight: 500;
        text-align: left;
    }

    /* Zelle nur mit Knopf: Knopf über die volle Breite */
    .kb-table--cards td.kb-cell-action {
        padding-top: 8px;
    }

    .kb-table--cards td.kb-cell-action .kb-btn,
    .kb-table--cards td.kb-cell-action .kb-geo-na {
        display: flex;
        box-sizing: border-box;
        width: 100%;
        justify-content: center;
    }

    /* Lange Werte unter ihrer Bezeichnung, linksbündig */
    .kb-table--cards td.kb-cell-long {
        display: block;
        text-align: left;
    }

    .kb-table--cards td.kb-cell-long::before {
        display: block;
        max-width: none;
        margin-bottom: 2px;
    }

    /* Steckbriefe (2 Spalten): Bezeichnung über dem Wert */
    table.kb-table--stack,
    .kb-table--stack tbody,
    .kb-table--stack tr,
    .kb-table--stack th,
    .kb-table--stack td {
        display: block;
        width: 100% !important;
        box-sizing: border-box;
    }

    .kb-table--stack thead {
        display: none;
    }

    .kb-table--stack tr {
        padding: 10px 0;
        border-bottom: 1px solid var(--kb-border);
    }

    .kb-table--stack tbody th,
    .kb-table--stack tbody td {
        padding: 0;
        border: 0;
        font-size: 14px;
        overflow-wrap: break-word;
        hyphens: manual;
    }

    .kb-table--stack tbody th {
        margin-bottom: 3px;
        color: var(--kb-muted);
        font-size: 12.5px;
        font-weight: 600;
    }

    .kb-page #methodik .kb-table th:nth-child(2),
    .kb-page #methodik .kb-table td:nth-child(2) {
        width: 64px;
        hyphens: manual;
    }

    .kb-page #methodik .kb-table th:nth-child(4),
    .kb-page #methodik .kb-table td:nth-child(4) {
        width: 44px;
    }
}

/* Vergleichstabellen mit mehreren Anbieter-Spalten: schon bis Tablet-Breite umbrechen */
@media (max-width: 1024px) {
    .kb-page .kb-table--compare {
        width: 100%;
        table-layout: fixed;
    }

    .kb-page .kb-table--compare th,
    .kb-page .kb-table--compare td {
        min-width: 0;
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

/* Redaktionstexte der Vergleichsseiten (Krypto_Compare_Pages) */
.kb-cmp-text p {
    margin: 0 0 12px;
}

.kb-cmp-text p:last-child {
    margin-bottom: 0;
}

.kb-cmp-text img {
    max-width: 100%;
    height: auto;
}

/* Abschnitte, die direkt in den älteren Vorlagen stehen (Börsen-Vergleich, Krypto-Vergleich): so breit und
   zentriert wie die übrigen Karten */
.krypto-boersen-comparison > .kb-more-compare,
.krypto-compare > .kc-disclaimer {
    box-sizing: border-box;
    max-width: 1200px;
    margin-right: auto;
    margin-left: auto;
}

/* Bilder in Redaktionstexten (Titelkarten, Screenshots, Infografiken aus tools/kb-bilder.py) */
.kb-figure {
    margin: 0 0 24px;
}

.kb-figure img,
.content-section img.kb-img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: var(--kb-radius);
}

.kb-figure figcaption {
    margin-top: 8px;
    color: var(--kb-muted);
    font-size: 0.85em;
}


/* Nur für Screenreader und Suchmaschinen sichtbar, z. B. „nicht bestätigt:“ vor ausgegrauten Listenpunkten */
.kb-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Quellenlisten „Zuletzt geprüft“ aller Produktklassen: lange Adressen umbrechen statt auf dem Handy abschneiden */
.kapp-checked a,
.kat-checked a,
.kbk-checked a,
.kbon-checked a,
.kc-checked a,
.kdex-checked a,
.ketp-checked a,
.ksp-checked a,
.kt-checked a,
.wl-checked a {
    overflow-wrap: anywhere;
}

/* Handy: nichts darf die Seite verbreitern – überlange Wörter und Adressen umbrechen, Knöpfe dürfen zweizeilig werden */
.kb-page {
    overflow-wrap: break-word;
}

/* Lange deutsche Wörter in schmalen Kacheln und Tabellenzellen mit Trennstrich trennen („Wertpapier-institut“)
   statt mitten im Wort ohne Strich; die Seite ist lang="de" */
.kb-page .kb-tile,
.kb-page .kb-table th,
.kb-page .kb-table td,
.kb-page .kb-label {
    hyphens: auto;
}

/* Nur lange Wörter trennen (ab 10 Zeichen, mindestens 4 je Teil) – nie „üb-rigen“ oder „Ge-wicht“; seitenweit,
   damit es auch für Gestaltungs-Bausteine (.kbd) in Redaktionstexten gilt */
body,
.kb-page {
    -webkit-hyphenate-limit-before: 4;
    -webkit-hyphenate-limit-after: 4;
    hyphenate-limit-chars: 10 4 4;
}

/* break-word statt anywhere: Namen in Links („justTRADE“) nie mitten im Wort trennen, nur überlange Adressen */
.kb-page a,
.kb-note a {
    overflow-wrap: break-word;
}

@media (max-width: 600px) {
    .kb-btn {
        white-space: normal;
        text-align: center;
    }
}

/* Werbeplätze (Krypto_Ad_Slots): Höhe reserviert, damit die Seite nicht springt; Kennzeichnung „Anzeige“ */
.kb-ad {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: var(--kb-ad-h, 0);
    margin: 0 auto var(--kb-gap);
    padding: 18px 0 6px;
    text-align: center;
}

/* Kryptoseiten: Platz so breit wie die Inhaltskarten */
.kb-ad--coin {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--kb-width, 1200px);
}

.kb-ad-label {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--kb-faint);
}

.kb-ad img {
    max-width: 100%;
    height: auto;
}

.kb-ad-code {
    width: 100%;
}

.kb-ad--waiting {
    display: none;
}

.kb-ad--empty {
    padding: 16px;
    border: 2px dashed #cbd5e1;
    border-radius: var(--kb-radius);
    background: repeating-linear-gradient(45deg, #f8fafc, #f8fafc 10px, #f1f5f9 10px, #f1f5f9 20px);
    color: var(--kb-muted);
    font-size: 13px;
}

@media (max-width: 700px) {
    .kb-ad {
        min-height: var(--kb-ad-hm, 0);
    }

    .kb-ad--only-desktop {
        display: none;
    }
}

@media (min-width: 701px) {
    .kb-ad--only-mobile {
        display: none;
    }
}
/* Eigenes Captcha (Krypto_Captcha) */
.kb-captcha {
    display: grid;
    gap: 4px;
    justify-items: start;
}

.kb-captcha-box {
    display: inline-flex !important;
    gap: 10px;
    align-items: center;
    padding: 10px 16px;
    border: 1px solid #cfd4da;
    border-radius: var(--kb-radius-sm);
    background: var(--kb-bg-soft);
    font-weight: 600;
    cursor: pointer;
}

.kb-captcha-box input {
    width: 20px;
    height: 20px;
    margin: 0;
}

.kb-captcha.is-working .kb-captcha-box {
    border-color: var(--kb-accent);
}

.kb-captcha.is-done .kb-captcha-box {
    border-color: var(--kb-good);
    background: var(--kb-good-soft);
}

.kb-captcha.is-error .kb-captcha-box {
    border-color: var(--kb-bad);
}

.kb-captcha-status {
    font-size: 13px;
    font-weight: 600;
    color: var(--kb-muted);
}

.kb-captcha.is-done .kb-captcha-status {
    color: var(--kb-good);
}

.kb-captcha.is-error .kb-captcha-status {
    color: var(--kb-bad);
}

.kb-captcha-note {
    font-size: 12px;
    font-weight: 400;
    color: var(--kb-faint);
}
/* Verweis aus „So testen wir …“ auf die Methodik-Seiten (Krypto_Info_Pages::method_link) */
.kb-method-link {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--kb-border);
    font-size: 15px;
    font-weight: 600;
}

.kb-method-link .kb-icon {
    flex: none;
    color: var(--kb-accent-dark);
}

.kb-method-link a {
    color: var(--kb-accent-dark);
}
/* Anzeige-Platzierungen (Krypto_Sponsored): Kennzeichnung statt Rangziffer */
.kb-sponsored-tag {
    display: inline-flex;
    flex: none;
    align-items: center;
    padding: 1px 7px;
    border: 1px solid #c9ced6;
    border-radius: 4px;
    background: #fff;
    color: var(--kb-muted, #64748b);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    line-height: 1.6;
    text-transform: uppercase;
}
/* Anzeige-Platzierungen in Karten und Bausteinen */
.ov-pick.is-ad,
.kbw-li--ad,
.kbw [data-ad] {
    background: #fffdf6;
}

.ov-pick.is-ad {
    border-color: #e0c97a;
}

.kbw-li--ad .kb-sponsored-tag,
.kbw [data-ad] .kb-sponsored-tag {
    margin-right: 8px;
}
/* Länder- und Geräte-Regel einer Anzeige (Werbemanager) */
[data-ad-off] {
    display: none !important;
}

@media (max-width: 767px) {
    [data-ad-dev="desktop"] {
        display: none !important;
    }
}

@media (min-width: 768px) {
    [data-ad-dev="mobile"] {
        display: none !important;
    }
}
/* Gebuchte Banner (Werbemanager): Ersatzinhalt ohne zweiten Rahmen und ohne zweite Kennzeichnung */
.kb-ad--booked .kb-ad-booked img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 600px;
    height: auto;
    margin: 0 auto;
}

.kb-ad--booked .kb-ad-default > .kb-ad {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
}

.kb-ad--booked .kb-ad-default .kb-ad-label {
    display: none;
}
/* Badge und Bonus einer Anzeige (kb-sponsored.js) */
.kb-sponsored-badge {
    display: inline-flex;
    flex: none;
    align-items: center;
    margin: 0 6px;
    padding: 1px 7px;
    border-radius: 4px;
    background: #f6e7b4;
    color: #6b5212;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.6;
}

.kb-sponsored-bonus {
    display: block;
    margin-top: 2px;
    color: var(--kb-success, #15803d);
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.35;
    white-space: normal;
}
/* Werbezeile einer Anzeige (kb-sponsored.js) */
.kb-sponsored-claim {
    display: block;
    margin-top: 2px;
    color: #8a6d1d;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.35;
    white-space: normal;
}
/* Ergänzte Seitenüberschrift (Krypto_Page_H1), Größe wie der Titel der Testberichte */
.kb-page-h1 {
    margin: 0 0 16px;
    padding: 0;
    color: var(--kb-text, inherit);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: break-word;
    hyphens: auto;
}
@media (max-width: 768px) {
    .kb-page-h1 {
        font-size: 26px;
    }
}
/* Kasten „Alternativen zu …“ unter den Testseiten: steht außerhalb des Artikels in <main>; bei Impreza ist main
   bildschirmbreit, deshalb auf Inhaltsbreite begrenzen */
.kb-alt-link {
    box-sizing: border-box;
    max-width: var(--kb-width, 1200px);
    margin: 24px auto;
}
@media (max-width: 1240px) {
    .kb-alt-link {
        margin-left: 16px;
        margin-right: 16px;
    }
}

/* Autorenbox am Ende jeder Testseite (Krypto_Eeat::author_box) */
.kb-author-box {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.kb-author-box-photo {
    flex: 0 0 88px;
}

.kb-author-box-photo img,
.kb-author-box-photo .kb-eeat-initials {
    display: grid;
    place-items: center;
    width: 88px;
    height: 88px;
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--kb-border);
    object-fit: cover;
    font-size: 28px;
}

.kb-author-box-body {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.kb-author-box-body p {
    margin: 0;
}

.kb-author-box-name {
    font-size: 19px;
    font-weight: 700;
}

.kb-author-box-name a {
    color: var(--kb-text);
    text-decoration: none;
}

.kb-author-box-name span {
    color: var(--kb-muted);
    font-size: 15px;
    font-weight: 400;
}

.kb-author-box-bio {
    color: var(--kb-muted);
    font-size: 15px;
    line-height: 1.6;
}

.kb-author-box-review {
    display: flex;
    gap: 6px;
    align-items: center;
    font-size: 14px;
}

.kb-author-box-more {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    width: fit-content;
    font-size: 15px;
    font-weight: 700;
    color: var(--kb-accent-dark);
    text-decoration: none;
}

.kb-author-box-more .kb-icon {
    transform: rotate(-90deg);
}

@media (max-width: 600px) {
    .kb-author-box {
        flex-direction: column;
    }
}