/* ===========================================
   R4P – Lesbarkeit (Kontrast) für alle Themes
   Nutzt --on-accent, --on-cta, --on-dark, --on-card
   =========================================== */

/* ----- Buttons (global) ----- */
.btn--accent {
    color: var(--on-accent, var(--c-green, #0b0f0b));
}

.btn--outline {
    color: var(--c-green, #0b0f0b);
    border-color: var(--c-green, #0b0f0b);
}

.btn--outline:hover {
    color: var(--on-dark, #fff);
}

html[data-theme="peace"] .btn--accent {
    color: var(--on-accent, #0b0f0b);
}

html[data-theme="peace"] .btn--accent:hover {
    filter: brightness(1.06);
}

html[data-theme="peace"] .btn--outline {
    color: var(--c-green, #0b0f0b);
    border-color: var(--c-green, #0b0f0b);
}

html[data-theme="peace"] .btn--outline:hover {
    color: var(--on-dark, #fff);
}

/* ----- Helle Nav-Leiste: volle Breite, kein Rand-Gap ----- */
html[data-hero-tone="light"] .nav-wrap--mockup {
    background: var(--nav-bar-bg, #ffffff);
    border-bottom-color: var(--nav-bar-border, rgba(11, 15, 11, 0.1));
}

html[data-hero-tone="light"] .nav-wrap--mockup .brand__tag,
html[data-palette="sky"] .nav-wrap--mockup .brand__tag,
html[data-palette="sand"] .nav-wrap--mockup .brand__tag,
html[data-palette="paper"] .nav-wrap--mockup .brand__tag {
    color: var(--brand-tag, var(--c-orange, #6b8eb8));
}

html[data-hero-tone="light"] .hero-m {
    background: #ffffff;
}

/* ----- Hero: Eyebrow & Ghost auf hellem Verlauf ----- */
html[data-hero-tone="light"] .hero-m__eyebrow,
html[data-palette="sky"] .hero-m__eyebrow,
html[data-palette="sand"] .hero-m__eyebrow,
html[data-palette="paper"] .hero-m__eyebrow {
    color: var(--hero-eyebrow, var(--c-orange, #6b8eb8));
}

html[data-hero-tone="light"] .hero-m__actions .btn--ghost,
html[data-palette="sky"] .hero-m__actions .btn--ghost,
html[data-palette="sand"] .hero-m__actions .btn--ghost,
html[data-palette="paper"] .hero-m__actions .btn--ghost {
    color: var(--hero-btn-ghost, var(--c-green, #0b0f0b));
    border-color: var(--hero-btn-ghost-border, rgba(11, 15, 11, 0.35));
}

html[data-hero-tone="light"] .hero-m__actions .btn--ghost:hover,
html[data-palette="sky"] .hero-m__actions .btn--ghost:hover,
html[data-palette="sand"] .hero-m__actions .btn--ghost:hover,
html[data-palette="paper"] .hero-m__actions .btn--ghost:hover {
    color: var(--hero-btn-ghost, var(--c-green, #0b0f0b));
    border-color: var(--c-accent);
    background: var(--hero-btn-ghost-hover-bg, color-mix(in srgb, var(--c-accent) 28%, transparent));
}

html[data-accent-tone="light"] .nav-wrap--mockup .btn--ghost,
html[data-palette="sky"] .nav-wrap--mockup .btn--ghost,
html[data-palette="sand"] .nav-wrap--mockup .btn--ghost,
html[data-palette="paper"] .nav-wrap--mockup .btn--ghost {
    color: var(--c-green, #0b0f0b);
    border-color: rgba(11, 15, 11, 0.3);
}

/* ----- Mockup: CTA-Leiste & Leaderboard-Karte ----- */
.ctaY {
    color: var(--on-cta, var(--mk-dark));
}

.ctaY p {
    color: color-mix(in srgb, var(--on-cta, #0b0f0b) 72%, transparent);
}

.ctaY .btn--outline-dark {
    color: var(--on-cta, var(--mk-dark));
    border-color: var(--on-cta, var(--mk-dark));
}

.ctaY .btn--outline-dark:hover {
    background: var(--on-cta, var(--mk-dark));
    color: var(--mk-accent);
    border-color: var(--on-cta, var(--mk-dark));
}

.ctaY .btn--dark {
    background: var(--on-cta, var(--mk-dark));
    color: var(--mk-accent);
    border-color: var(--on-cta, var(--mk-dark));
}

.ctaY .btn--dark:hover {
    filter: brightness(1.08);
}

.lbm__total {
    color: var(--on-cta, var(--mk-dark));
}

.lbm__total-note {
    color: color-mix(in srgb, var(--on-cta, #0b0f0b) 68%, transparent);
}

.lbm__total-ico {
    background: var(--on-cta, var(--mk-dark));
    color: var(--mk-accent);
}

.lbm__rank--1 {
    color: var(--on-accent, var(--mk-dark));
}

.lbm__tab.is-active {
    color: var(--on-card, var(--mk-dark));
    border-bottom-color: var(--on-card, var(--mk-dark));
}

/* Dunkle Seitenflächen (z. B. Neon) */
html[data-surface-tone="dark"] .how-m,
html[data-surface-tone="dark"] .evm,
html[data-surface-tone="dark"] .igm,
html[data-surface-tone="dark"] .lbm {
    color: var(--on-surface, #f5f5f5);
}

html[data-surface-tone="dark"] .how-m .section-title,
html[data-surface-tone="dark"] .evm .section-title,
html[data-surface-tone="dark"] .igm .section-title,
html[data-surface-tone="dark"] .lbm .mockup-head .section-title {
    color: var(--on-surface, #f5f5f5);
}

html[data-surface-tone="dark"] .how-m .section-lead,
html[data-surface-tone="dark"] .evm .section-lead,
html[data-surface-tone="dark"] .igm .section-lead {
    color: var(--mk-muted);
}

html[data-surface-tone="dark"] .how-m__step h3,
html[data-surface-tone="dark"] .combo-m__product h3,
html[data-surface-tone="dark"] .combo-m__product p,
html[data-surface-tone="dark"] .combo-m__stat-num {
    color: var(--on-card, #f5f5f5);
}

html[data-surface-tone="dark"] .combo-m__shop-head h2,
html[data-surface-tone="dark"] .combo-m__impact h2 {
    color: var(--on-card, #f5f5f5);
}

html[data-surface-tone="dark"] .lbm__table th {
    background: color-mix(in srgb, var(--mk-card) 88%, #000);
    color: var(--mk-muted);
}

html[data-surface-tone="dark"] .lbm__table td {
    color: var(--on-card, #f5f5f5);
}

/* Duo-Band: Text auf dunklem Block */
.duo-m__band {
    color: var(--on-dark, #fff);
}

.duo-m__band-title,
.duo-m__band-price {
    color: var(--on-dark, #fff);
}

.duo-m__band-list li {
    color: color-mix(in srgb, var(--on-dark, #fff) 88%, transparent);
}

.duo-m__band-body .eyebrow--accent {
    color: var(--mk-accent);
    filter: saturate(1.1);
}

html[data-accent-tone="light"] .duo-m__band-body .eyebrow--accent {
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}