/* ===========================================
   R4P – Palette-Modi (Theme Picker)
   html[data-palette="…"] – Layout-Anpassungen,
   wo reine CSS-Variablen nicht reichen
   (z. B. helle Nav, invertierter Hero)
   =========================================== */

/* ----- Klassisch: Weiß / Himmelblau ----- */
html[data-palette="sky"] body {
    background: #f5fafe;
    color: #0b0f0b;
}

html[data-palette="sky"] .nav-wrap--mockup {
    background: #ffffff;
    border-bottom-color: rgba(11, 15, 11, 0.1);
}

html[data-palette="sky"] .nav-wrap--mockup .brand__name,
html[data-palette="sky"] .nav-wrap--mockup .nav__links a,
html[data-palette="sky"] .nav-wrap--mockup .lang,
html[data-palette="sky"] .nav-wrap--mockup .auth-login-btn,
html[data-palette="sky"] .nav-wrap--mockup .cart-btn {
    color: #0b0f0b;
}

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

html[data-palette="sky"] .nav-wrap--mockup .nav__links a::after {
    background: var(--mk-accent);
}

html[data-palette="sky"] .nav-wrap--mockup .nav__links a:hover,
html[data-palette="sky"] .nav-wrap--mockup .nav__links a.is-active {
    color: #0b0f0b;
}

html[data-palette="sky"] .nav-wrap--mockup .lang,
html[data-palette="sky"] .nav-wrap--mockup .auth-login-btn,
html[data-palette="sky"] .nav-wrap--mockup .cart-btn {
    border-color: rgba(11, 15, 11, 0.2);
}

html[data-palette="sky"] .nav-wrap--mockup .nav__burger span {
    background: #0b0f0b;
}

html[data-palette="sky"] .hero-m__content {
    background: linear-gradient(168deg, #ffffff 0%, #f4f9fd 42%, #d9e9f6 100%);
    color: #0b0f0b;
}

html[data-palette="sky"] .hero-m__title {
    color: #0b0f0b;
}

html[data-palette="sky"] .hero-m__lead {
    color: rgba(11, 15, 11, 0.78);
}

html[data-palette="sky"] .hero-m__stats {
    background: #e8f2fa;
    border-top-color: rgba(11, 15, 11, 0.08);
}

html[data-palette="sky"] .hero-m__stat {
    color: #0b0f0b;
    border-right-color: rgba(11, 15, 11, 0.1);
}

html[data-palette="sky"] .lbm__tab.is-active {
    background: var(--mk-accent);
    color: var(--on-accent, #0b0f0b);
    border-bottom-color: var(--on-accent, #0b0f0b);
}

/* ----- Sand & Terrakotta (warm, hell) ----- */
html[data-palette="sand"] body {
    background: #f4eadc;
    color: #2c2419;
}

html[data-palette="sand"] .nav-wrap--mockup {
    background: #faf6f0;
    border-bottom-color: rgba(44, 36, 25, 0.12);
}

html[data-palette="sand"] .nav-wrap--mockup .brand__name,
html[data-palette="sand"] .nav-wrap--mockup .nav__links a,
html[data-palette="sand"] .nav-wrap--mockup .lang,
html[data-palette="sand"] .nav-wrap--mockup .auth-login-btn,
html[data-palette="sand"] .nav-wrap--mockup .cart-btn {
    color: #2c2419;
}

html[data-palette="sand"] .nav-wrap--mockup .brand__tag {
    color: var(--brand-tag, var(--c-orange, #c75b39));
}

html[data-palette="sand"] .nav-wrap--mockup .nav__burger span {
    background: #2c2419;
}

html[data-palette="sand"] .hero-m__content {
    background: linear-gradient(165deg, #faf6f0 0%, #f0e4d4 55%, #e8d5c0 100%);
    color: #2c2419;
}

html[data-palette="sand"] .hero-m__title {
    color: #2c2419;
}

html[data-palette="sand"] .hero-m__lead {
    color: rgba(44, 36, 25, 0.8);
}

html[data-palette="sand"] .hero-m__actions .btn--ghost {
    color: #2c2419;
    border-color: rgba(44, 36, 25, 0.35);
}

html[data-palette="sand"] .hero-m__stats {
    background: #3d4a2c;
    color: #f4eadc;
}

html[data-palette="sand"] .hero-m__stat {
    color: #f4eadc;
}

/* ----- Mint auf Kohle (dunkle Seite) ----- */
html[data-palette="mint"] body {
    background: #121416;
    color: #e8ece9;
}

html[data-palette="mint"] .hero-m__stats {
    background: #0a0c0a;
}

/* ----- Neon Pink (dunkel, leuchtend) ----- */
html[data-palette="neon"] body {
    background: #0a0a0a;
    color: #f5f5f5;
}

html[data-palette="neon"] .hero-m__stats {
    background: #141414;
}

/* ----- Monochrom hell (weiße Nav-Pille-Ästhetik) ----- */
html[data-palette="paper"] body {
    background: #ffffff;
    color: #111111;
}

html[data-palette="paper"] .nav-wrap--mockup {
    background: #ffffff;
    border-bottom: 1px solid rgba(17, 17, 17, 0.08);
}

html[data-palette="paper"] .nav-wrap--mockup .nav {
    background: transparent;
    border-radius: 0;
    margin: 0;
}

html[data-palette="paper"] .nav-wrap--mockup .brand__name,
html[data-palette="paper"] .nav-wrap--mockup .nav__links a,
html[data-palette="paper"] .nav-wrap--mockup .lang,
html[data-palette="paper"] .nav-wrap--mockup .auth-login-btn,
html[data-palette="paper"] .nav-wrap--mockup .cart-btn {
    color: #111111;
}

html[data-palette="paper"] .nav-wrap--mockup .nav__burger span {
    background: #111111;
}

html[data-palette="paper"] .hero-m__content {
    background: #ffffff;
    color: #111111;
}

html[data-palette="paper"] .hero-m__title {
    color: #111111;
}

html[data-palette="paper"] .hero-m__lead {
    color: rgba(17, 17, 17, 0.75);
}

html[data-palette="paper"] .hero-m__stats {
    background: #111111;
    color: #f5f0e6;
}

html[data-palette="paper"] .hero-m__stat {
    color: #f5f0e6;
}