/* ════════════════════════════════════════════════════════════════════════
   47-design-refinement.css — Phase 0 (tokens + minimal rebinds only)

   Goal: introduce the canonical token layer for the calmer-premium-glass
   refinement (Apple Wallet / VisionOS / Linear / Stripe direction) without
   visible changes to component layouts. Component refinement comes in
   Phases 1–6 in subsequent commits.

   Hard guards:
   • Loads LAST (after every other src/css/*.css and any inline <style>) so
     the cascade upgrades the look. Add the <link> immediately before
     </head> on every page.
   • v1 (Klassik / data-design="v1") stays pixel-equivalent. All accent
     rebinds are scoped to html[data-design="v2"] — attribute selector
     specificity (0,0,1,1) beats inline-style :root declarations (0,0,1,0).
   • No edits to existing CSS files. Rollback = delete this file +
     <link> tags.

   Phase 0 visible changes:
   1. Accent emerald saturation drop: #67b8f8 → #0e8f83 (v2 only)
   2. Font swap to Inter (both v1 and v2; pages with literal
      'Montserrat' in inline styles continue to use Montserrat
      because that font remains loaded in Phase 0 — cleanup later).
   ════════════════════════════════════════════════════════════════════════ */


/* ── v2 ↔ v1 mutex: hide the Klassik (data-design-version="v1") markup
       blocks that still live inside app.html alongside their Modern (v2)
       counterparts. Klassik renderers (08-calendar.js, 13-kunden.js,
       09-appointments.js, etc.) still write into those blocks — markup
       stays for now so the JS doesn't crash on missing IDs; CSS makes
       them invisible. Defense-in-depth: 38-skin.css carries the same
       rules (older location); duplicating them here at the canonical
       v2 refinement layer makes the contract discoverable without
       having to grep through the legacy skin. Both copies use
       !important; rules collapse cleanly when M6 of MOBILE_DESKTOP_SHELL_PLAN.md
       retires Klassik for good. */
html[data-design="v2"] [data-design-version="v1"] { display: none !important; }
html[data-design="v1"] [data-design-version="v2"] { display: none !important; }
html:not([data-design="v1"]) [data-design-version="v1"] { display: none !important; }


/* ── Canonical accent (replaces three duplicates from 45-modern-premium.css)
       --mb-premium-blue (#0e8f83), --mb-premium-cyan (#67b8f8),
       --mb-premium-green (#67b8f8) all collapse to one token. */
:root{
  --accent-emerald:        #0e8f83;
  --accent-emerald-hover:  #08766e;
  --accent-emerald-soft:   rgba(43,186,132,.12);
  --accent-emerald-ring:   rgba(43,186,132,.28);

  /* ── Status palette (dark-mode defaults; light overrides below) */
  --status-success:        #0e8f83;
  --status-success-soft:   rgba(43,186,132,.12);
  --status-success-ring:   rgba(43,186,132,.28);
  --status-warning:        #E0A648;
  --status-warning-soft:   rgba(14,143,131,.12);
  --status-warning-ring:   rgba(14,143,131,.28);
  --status-danger:         #E26565;
  --status-danger-soft:    rgba(226,101,101,.12);
  --status-danger-ring:    rgba(226,101,101,.28);
  --status-info:           #5BA8E0;
  --status-info-soft:      rgba(91,168,224,.12);
  --status-info-ring:      rgba(91,168,224,.28);
  --status-neutral:        #8B97A8;
  --status-neutral-soft:   rgba(139,151,168,.12);

  /* ── Surface scale (semantic; future component CSS reads these) */
  --canvas:                #0B1714;
  --surface-1:             #0F1D19;
  --surface-2:             #142621;
  --surface-3:             rgba(15,29,25,.72);
  --surface-elev:          rgba(7,22,18,.82);
  --surface-overlay:       rgba(15,29,25,.78);
  --line-1:                rgba(255,255,255,.06);
  --line-2:                rgba(255,255,255,.10);
  --line-strong:           rgba(43,186,132,.32);
  --text-1:                #ECF4EF;
  --text-2:                #B6C2BC;
  --text-3:                #7E8A86;

  /* ── Elevation */
  --elev-0: none;
  --elev-1: 0 8px 24px rgba(0,0,0,.20), 0 1px 0 rgba(255,255,255,.04) inset;
  --elev-2: 0 24px 60px rgba(0,0,0,.32), 0 1px 0 rgba(255,255,255,.05) inset;

  /* ── Glass tiers (Phase 1+ components consume these) */
  --glass-thin-bg:         rgba(8,18,16,.55);
  --glass-thin-filter:     blur(10px) saturate(115%);
  --glass-regular-bg:      rgba(7,22,18,.72);
  --glass-regular-filter:  blur(14px) saturate(120%);
  --glass-thick-bg:        rgba(5,18,15,.82);
  --glass-thick-filter:    blur(22px) saturate(130%);

  /* ── Motion */
  --motion-fast:           120ms;
  --motion-base:           200ms;
  --motion-slow:           320ms;
  --ease-standard:         cubic-bezier(.4,0,.2,1);
  --ease-entrance:         cubic-bezier(0,0,.2,1);
  --ease-exit:             cubic-bezier(.4,0,1,1);

  /* ── Type scale (Phase 6 applies these to headings) */
  --text-display-size:     44px;
  --text-display-lh:       1.05;
  --text-display-weight:   800;
  --text-display-tracking: -0.025em;
  --text-h1-size:          28px;
  --text-h1-lh:            1.15;
  --text-h1-weight:        700;
  --text-h1-tracking:      -0.02em;
  --text-h2-size:          22px;
  --text-h2-lh:            1.2;
  --text-h2-weight:        700;
  --text-h2-tracking:      -0.015em;
  --text-h3-size:          17px;
  --text-h3-lh:            1.3;
  --text-h3-weight:        600;
  --text-h3-tracking:      -0.005em;
  --text-body-lg-size:     15px;
  --text-body-lg-lh:       1.5;
  --text-body-size:        13.5px;
  --text-body-lh:          1.5;
  --text-body-weight:      500;
  --text-caption-size:     11.5px;
  --text-caption-lh:       1.4;
  --text-caption-weight:   600;
  --text-caption-tracking: 0.02em;
}


/* ── Light-mode surface + status overrides
       Premium beauty studio direction: warm ivory + soft sage + champagne hairlines.
       Tokens stay AA-legible on white; the accent is desaturated sage that still
       reads as the MobileBooking emerald identity, not jewel-bright SaaS green. */
[data-theme="light"]{
  --canvas:                #f7faf9;   /* near-white petrol-tinted */
  --surface-1:             #FFFFFF;
  --surface-2:             #eef8f6;   /* subtle petrol mist */
  --surface-3:             rgba(255,255,255,.78);
  --surface-elev:          #FFFFFF;
  --surface-overlay:       rgba(255,255,255,.86);
  --line-1:                rgba(25,39,54,.07);   /* warm taupe hairline */
  --line-2:                rgba(25,39,54,.11);
  --line-strong:           rgba(14,143,131,.36); /* sage strong */
  --text-1:                #172638;   /* warm espresso-olive (was cool #161A22) */
  --text-2:                #4A5A50;   /* warm muted olive */
  --text-3:                #7A8780;

  --status-success:        #0e8f83;   /* sage success, calmer than #0F8A5F */
  --status-warning:        #B0791F;
  --status-danger:         #B23B3B;
  --status-info:           #2A78B0;
  --status-neutral:        #5C6577;

  --glass-thin-bg:         rgba(247,250,249,.72);
  --glass-regular-bg:      rgba(247,250,249,.84);
  --glass-thick-bg:        rgba(247,250,249,.94);
  --elev-1: 0 8px 24px rgba(25,39,54,.07), 0 1px 0 rgba(255,255,255,.72) inset;
  --elev-2: 0 24px 60px rgba(25,39,54,.10), 0 1px 0 rgba(255,255,255,.80) inset;

  /* Light-mode accent — soft sage. Still recognizably MobileBooking green,
     but boutique-skincare calm rather than neon-SaaS bright. */
  --accent-emerald:        #0e8f83;
  --accent-emerald-hover:  #08766e;
  --accent-emerald-soft:   rgba(14,143,131,.10);
  --accent-emerald-ring:   rgba(14,143,131,.24);
}


/* ════════════════════════════════════════════════════════════════════════
   Phase 0 rebinds — ONLY the accent and the font.
   Surface tokens (--bg, --s1..s4, body backgrounds) are NOT rebound here;
   that happens in Phase 5 once components are ready.
   ════════════════════════════════════════════════════════════════════════ */


/* ── v2 (Modern) accent rebind. v1 (Klassik) is intentionally untouched. */
html[data-design="v2"]{
  /* Collapse the three near-identical premium greens to one canonical accent */
  --mb-premium-blue:    var(--accent-emerald);
  --mb-premium-blue-2:  var(--accent-emerald-hover);
  --mb-premium-cyan:    var(--accent-emerald);
  --mb-premium-green:   var(--accent-emerald);

  /* Re-bind legacy tokens that v2 had aliased to the bright greens */
  --np: var(--accent-emerald);
  --na: var(--accent-emerald-hover);
  --nb: var(--accent-emerald);
  --ng: var(--accent-emerald);
}


/* ── Font swap to Inter (both designs).
       Pages that hardcode 'Montserrat' in inline <style> are unaffected
       (Montserrat remains loaded for Phase 0 to avoid silent breakage in
       agb / datenschutz / impressum legal pages and minor decorative rules).
       Cleanup of those literals = separate later pass. */
:root{
  --font:         'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body:    var(--font);
  --font-heading: var(--font);
}


/* ════════════════════════════════════════════════════════════════════════
   PHASE 1 — Sidebar + Top Nav + Mobile Bottom Nav refinement

   Calmer glass, Linear-style active states, brand wordmark de-glowed.
   Scope: html[data-design="v2"] only — v1 (Klassik) stays pixel-equivalent.
   Existing rules in 45-modern-premium.css use !important throughout, so
   the refinement layer matches !important where the cascade requires it.
   ════════════════════════════════════════════════════════════════════════ */


/* ── 1.1 Top nav / sidebar shell — drop intensity from blur(22px)/saturate(150%)
       to glass-regular (blur 14px / saturate 120%). */
html[data-design="v2"] .nav,
html[data-design="v2"] .bkc-nav,
html[data-design="v2"] .pshop-nav {
  background: rgba(12,28,20,.68) !important;
  border-color: rgba(255,255,255,.10) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.06) !important;
  backdrop-filter: var(--glass-regular-filter) !important;
  -webkit-backdrop-filter: var(--glass-regular-filter) !important;
}

html[data-design="v2"][data-theme="light"] .nav,
html[data-design="v2"][data-theme="light"] .bkc-nav,
html[data-design="v2"][data-theme="light"] .pshop-nav {
  background: rgba(255,255,255,.82) !important;
  border-color: var(--line-1) !important;
  box-shadow: 0 8px 24px rgba(15,28,40,.08), inset 0 1px 0 rgba(255,255,255,.5) !important;
}


/* ── 1.2 Mobile top nav (≤640px) → glass-thin (sticky bar, less weight) */
@media (max-width: 640px){
  html[data-design="v2"] .nav,
  html[data-design="v2"] .bkc-nav,
  html[data-design="v2"] .pshop-nav {
    background: var(--glass-thin-bg) !important;
    backdrop-filter: var(--glass-thin-filter) !important;
    -webkit-backdrop-filter: var(--glass-thin-filter) !important;
  }
  html[data-design="v2"][data-theme="light"] .nav,
  html[data-design="v2"][data-theme="light"] .bkc-nav,
  html[data-design="v2"][data-theme="light"] .pshop-nav {
    background: rgba(255,255,255,.72) !important;
  }
}


/* ── 1.3 Wordmark de-glow — remove drop-shadow on the favicon mark and
       text-shadow on the wordmark glyph; soften the gradient stops so the
       letterforms stop reading as "Web3 mint" and read as "premium emerald". */
html[data-design="v2"] .mb-wordmark::before,
.premium-public .mb-wordmark::before {
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.45)) !important;
}

html[data-design="v2"] .mb-wordmark::after,
.premium-public .mb-wordmark::after {
  background: linear-gradient(135deg, #FFFFFF 0%, #e8f2fb 55%, var(--accent-emerald) 100%) !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 1px 6px rgba(0,0,0,.30)) !important;
}

html[data-design="v2"] .mb-icon,
.premium-public .mb-icon {
  filter: none !important;
}

/* v1-era brand-icon (the 32×32 colored square) — kill the always-on glow if v2
   markup still includes it anywhere. Harmless if the element isn't present. */
html[data-design="v2"] .brand-icon {
  box-shadow: none !important;
  background: linear-gradient(135deg, var(--accent-emerald), var(--accent-emerald-hover)) !important;
}


/* ── 1.4 Active state — Linear-style emerald-soft fill, no #fff text-bombing.
       Overrides 45-modern-premium.css:367-376 which uses rgba(14,143,131,.13)
       fill + rgba(14,143,131,.28) border + pure white text. */
html[data-design="v2"] .ntab.active,
html[data-design="v2"] .ndropitem.active,
html[data-design="v2"] .set-nav-item.active,
html[data-design="v2"] .mb-fin__side-link[data-active="true"],
html[data-design="v2"] .mobile-more-item.is-active {
  background: rgba(43,186,132,.17) !important;
  border-color: transparent !important;
  color: var(--text-1) !important;
}

/* Sidebar (≥641px): emerald left rail */
@media (min-width: 641px){
  html[data-design="v2"] .ntab.active {
    border-left-color: var(--accent-emerald) !important;
  }
  html[data-design="v2"] .ndropitem.active {
    border-left-color: var(--accent-emerald) !important;
  }
}

/* Mobile top nav (≤640px): emerald bottom rail */
@media (max-width: 640px){
  html[data-design="v2"] .ntab.active {
    border-bottom-color: var(--accent-emerald) !important;
  }
}

/* Light-mode equivalents (override 45-modern-premium.css:913-922) */
html[data-design="v2"][data-theme="light"] .ntab.active,
html[data-design="v2"][data-theme="light"] .ndropitem.active,
html[data-design="v2"][data-theme="light"] .set-nav-item.active,
html[data-design="v2"][data-theme="light"] .mb-fin__side-link[data-active="true"],
html[data-design="v2"][data-theme="light"] .mobile-more-item.is-active {
  background: var(--accent-emerald-soft) !important;
  border-color: transparent !important;
  color: var(--text-1) !important;
}

/* ── Active drawer icon contrast (Phase 6 reissue)
       The 45-modern-premium baseline paints the active disc with a
       --mb-premium-blue → --mb-premium-cyan gradient and a #fff stroke.
       After 47 collapses both vars to --accent-emerald, the gradient
       degenerates to a single sage/emerald solid; white-on-sage in light
       mode and white-on-mid-emerald in dark mode both land around 3:1 and
       merge visually with the soft active-pill behind. Replace with a
       disc that contrasts the pill explicitly per theme. */
html[data-design="v2"] .ntab.active svg,
html[data-design="v2"] .ndropitem.active svg,
html[data-design="v2"] .tab-btn.active svg,
html[data-design="v2"] .mob-drawer-item.mob-active svg,
html[data-design="v2"] .mobile-more-item.is-active svg {
  background: rgba(7,22,18,.78) !important;
  color: var(--accent-emerald) !important;
  border: 1px solid rgba(43,186,132,.50) !important;
  box-shadow:
    0 0 0 1px rgba(43,186,132,.35),
    0 8px 20px rgba(43,186,132,.30) !important;
  opacity: 1 !important;
}
html[data-design="v2"][data-theme="light"] .ntab.active svg,
html[data-design="v2"][data-theme="light"] .ndropitem.active svg,
html[data-design="v2"][data-theme="light"] .tab-btn.active svg,
html[data-design="v2"][data-theme="light"] .mob-drawer-item.mob-active svg,
html[data-design="v2"][data-theme="light"] .mobile-more-item.is-active svg {
  background: #FFFFFF !important;
  color: var(--accent-emerald-hover) !important;
  border: 1px solid rgba(14,143,131,.45) !important;
  box-shadow:
    0 0 0 1px rgba(14,143,131,.22),
    0 6px 14px rgba(14,143,131,.18) !important;
}

/* ── 1.6 Inactive icon tiles (Mehr-Drawer + Nav-Items)
       45-modern-premium.css paints inactive svg tiles in --mb-premium-cyan /
       --mb-subtle-blue → wirken pale-mint, NICHT auf Brand-Petrol. Marco hat
       am 2026-05-22 explizit Brand-Color-Anpassung gefordert.
       Wir setzen Tile-BG auf Brand-Petrol-Soft + Border auf Brand-Petrol-Tint
       + Icon-Stroke auf Brand-Petrol-Hover. Active-State bleibt unverändert. */
html[data-design="v2"][data-theme="light"] .mob-drawer-item:not(.mob-active) svg,
html[data-design="v2"][data-theme="light"] .mobile-more-item:not(.is-active) svg {
  background: linear-gradient(135deg, rgba(14,143,131,.10), rgba(8,118,110,.06)) !important;
  border: 1px solid rgba(14,143,131,.20) !important;
  color: #0e8f83 !important;
  box-shadow: none !important;
}
html[data-design="v2"][data-theme="light"] .mob-drawer-item:not(.mob-active):hover svg,
html[data-design="v2"][data-theme="light"] .mobile-more-item:not(.is-active):hover svg {
  background: linear-gradient(135deg, rgba(14,143,131,.18), rgba(8,118,110,.12)) !important;
  border-color: rgba(14,143,131,.34) !important;
  color: #08766e !important;
}
/* Dark-Mode-Variante */
html[data-design="v2"]:not([data-theme="light"]) .mob-drawer-item:not(.mob-active) svg,
html[data-design="v2"]:not([data-theme="light"]) .mobile-more-item:not(.is-active) svg {
  background: linear-gradient(135deg, rgba(80,214,196,.12), rgba(14,143,131,.06)) !important;
  border: 1px solid rgba(80,214,196,.20) !important;
  color: #50d6c4 !important;
  box-shadow: none !important;
}


/* ── 1.5 Hover — surface-2 only, no extra shadow or color shift */
html[data-design="v2"] .ntab:hover,
html[data-design="v2"] .ndropitem:hover {
  background: var(--surface-2) !important;
  color: var(--text-1) !important;
}

html[data-design="v2"][data-theme="light"] .ntab:hover,
html[data-design="v2"][data-theme="light"] .ndropitem:hover {
  background: var(--surface-2) !important;
}


/* ── 1.6 Mobile bottom-nav (.mob-bnav) — match the sidebar language.
       Overrides 45-modern-premium.css:414-423 (blur 22px/saturate 150%
       + heavy 0 -18px 54px shadow). */
html[data-design="v2"] .bw-footer,
html[data-design="v2"] .booking-footer,
html[data-design="v2"] .mob-bnav,
html[data-design="v2"] .mobile-more-sheet,
html[data-design="v2"] .mob-drawer {
  background: var(--glass-regular-bg) !important;
  border-color: var(--line-1) !important;
  box-shadow: 0 -8px 24px rgba(0,0,0,.20) !important;
  backdrop-filter: var(--glass-regular-filter) !important;
  -webkit-backdrop-filter: var(--glass-regular-filter) !important;
}

html[data-design="v2"][data-theme="light"] .bw-footer,
html[data-design="v2"][data-theme="light"] .booking-footer,
html[data-design="v2"][data-theme="light"] .mob-bnav,
html[data-design="v2"][data-theme="light"] .mobile-more-sheet,
html[data-design="v2"][data-theme="light"] .mob-drawer {
  background: rgba(255,255,255,.82) !important;
  border-color: var(--line-1) !important;
  box-shadow: 0 -8px 24px rgba(15,28,40,.08) !important;
}

/* Bottom-nav item active state — calmer top rail, accent icon, no overshoot.
   Overrides the heavy gold/emerald glow on .mob-bnav-item::after in
   31-mobile.css:80-92 and the .mob-bnav-item.active fill from
   45-modern-premium.css:367-376. */
@media (max-width: 640px){
  html[data-design="v2"] .mob-bnav-item.active {
    background: transparent !important;        /* no fill — rail + icon do the work */
    border-color: transparent !important;
    color: var(--accent-emerald) !important;
  }
  html[data-design="v2"] .mob-bnav-item::after {
    background: var(--accent-emerald) !important;
    box-shadow: none !important;
  }
  html[data-design="v2"] .mob-bnav-item.active svg {
    transform: translateY(-1px) scale(1.04) !important;
    color: var(--accent-emerald) !important;
  }
}


/* ── 1.7 Icon tint — inactive legible, active accent (sidebar + dropdown items) */
html[data-design="v2"] .ntab svg,
html[data-design="v2"] .ndropitem svg {
  color: var(--text-2) !important;
}
html[data-design="v2"] .ntab.active svg,
html[data-design="v2"] .ndropitem.active svg {
  color: var(--accent-emerald) !important;
}


/* ════════════════════════════════════════════════════════════════════════
   PHASE 2 — Cards, KPIs, Forms

   Replaces gradient-glass card backgrounds and frosted-glass inputs with
   flat surface tokens. Kills KPI orb (.kg) and coloured stripe glow.
   Calms form focus ring to the canonical accent ring.

   Scope: html[data-design="v2"] only — v1 (Klassik) stays pixel-equivalent.
   Reference rules overridden:
     45-modern-premium.css:207-231  (frosted inputs + saturated focus)
     45-modern-premium.css:243-269  (gradient-glass cards + emerald hover glow)
     45-modern-premium.css:1484-1514 (KPI ::before stripe + kval color)
   ════════════════════════════════════════════════════════════════════════ */


/* ── 2.1 KPI tile — kill orb (.kg) and stripe glow (.ks / kpi ::before).
       38-skin.css already handles these in v2 scope, but
       45-modern-premium.css line 1484 reinstates a ::before stripe with
       the premium gradient. We override both layers by load order. */
html[data-design="v2"] .kg {
  display: none !important;
}
html[data-design="v2"] .ks,
html[data-design="v2"] [class*=v] .ks {
  height: 0 !important;
  box-shadow: none !important;
}
html[data-design="v2"] .kpi-card::before,
html[data-design="v2"] .mb-kpi::before,
html[data-design="v2"] .cust-stat::before,
html[data-design="v2"] .tdb-stat-box::before {
  display: none !important;
}

/* KPI value — remove text-shadow glow, neutral text color */
html[data-design="v2"] .kval,
html[data-design="v2"] [class*=v] .kval {
  text-shadow: none !important;
  color: var(--text-1) !important;
}


/* ── 2.2 Card surface — flat surface-1, monochrome border, no heavy shadow.
       45-modern-premium.css:243 uses gradient background + rgba(167,243,208,.14)
       mint border + 0 20px 70px box-shadow with !important on all.
       Equal-specificity + later load order wins. */
html[data-design="v2"] .card,
html[data-design="v2"] .mb-card,
html[data-design="v2"] .kpi,
html[data-design="v2"] .mb-kpi,
html[data-design="v2"] .kpi-card,
html[data-design="v2"] .cust-stat,
html[data-design="v2"] .tdb-stat-box,
html[data-design="v2"] .ta-card,
html[data-design="v2"] .ob-card {
  background: var(--surface-1) !important;
  border: 1px solid var(--line-1) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

/* Hover: crisper border only — no emerald glow */
html[data-design="v2"] .card:hover,
html[data-design="v2"] .mb-card:hover,
html[data-design="v2"] .kpi:hover,
html[data-design="v2"] .mb-kpi:hover,
html[data-design="v2"] .kpi-card:hover {
  border-color: var(--line-2) !important;
  box-shadow: none !important;
}

/* Light-mode card — warm-white surface, neutral border */
html[data-design="v2"][data-theme="light"] .card,
html[data-design="v2"][data-theme="light"] .mb-card,
html[data-design="v2"][data-theme="light"] .kpi,
html[data-design="v2"][data-theme="light"] .mb-kpi,
html[data-design="v2"][data-theme="light"] .kpi-card,
html[data-design="v2"][data-theme="light"] .cust-stat,
html[data-design="v2"][data-theme="light"] .tdb-stat-box {
  background: var(--surface-1) !important;
  border-color: var(--line-1) !important;
  box-shadow: none !important;
}


/* ── 2.3 Form inputs — flat surface-1, monochrome border, calm focus ring.
       45-modern-premium.css:207 uses background:rgba(5,27,22,.62) (frosted)
       and border-color:rgba(167,243,208,.16) (pale mint) with !important.
       Focus uses rgba(14,143,131,.62) saturated green border + mb-premium-focus.
       We replace all three with neutral surface tokens. */
html[data-design="v2"] input:not([type=checkbox]):not([type=radio]):not([type=range]),
html[data-design="v2"] select,
html[data-design="v2"] textarea,
html[data-design="v2"] .mb-field__input,
html[data-design="v2"] .mb-field__select,
html[data-design="v2"] .mb-field__textarea,
html[data-design="v2"] .search-inp,
html[data-design="v2"] .filter-select,
html[data-design="v2"] .sa-input {
  background: var(--surface-1) !important;
  border-color: var(--line-2) !important;
  border-radius: 10px !important;
  color: var(--text-1) !important;
}

/* Focus — single calm accent ring, no saturated green */
html[data-design="v2"] input:not([type=checkbox]):not([type=radio]):not([type=range]):focus,
html[data-design="v2"] select:focus,
html[data-design="v2"] textarea:focus,
html[data-design="v2"] .mb-field__input:focus,
html[data-design="v2"] .mb-field__select:focus,
html[data-design="v2"] .mb-field__textarea:focus {
  border-color: var(--accent-emerald) !important;
  box-shadow: 0 0 0 3px var(--accent-emerald-ring) !important;
  outline: none !important;
  background: var(--surface-1) !important;
}

/* Invalid / error state */
html[data-design="v2"] .mb-field--invalid .mb-field__input,
html[data-design="v2"] .mb-field--invalid .mb-field__select,
html[data-design="v2"] .mb-field--invalid .mb-field__textarea,
html[data-design="v2"] .field--invalid input,
html[data-design="v2"] .field--invalid select,
html[data-design="v2"] .field--invalid textarea {
  border-color: var(--status-danger) !important;
  box-shadow: 0 0 0 3px var(--status-danger-soft) !important;
}

/* Placeholder — muted neutral, no mint */
html[data-design="v2"] input::placeholder,
html[data-design="v2"] textarea::placeholder {
  color: var(--text-3) !important;
  opacity: 1 !important;
}

/* Light-mode input adjustments */
html[data-design="v2"][data-theme="light"] input:not([type=checkbox]):not([type=radio]):not([type=range]),
html[data-design="v2"][data-theme="light"] select,
html[data-design="v2"][data-theme="light"] textarea,
html[data-design="v2"][data-theme="light"] .mb-field__input,
html[data-design="v2"][data-theme="light"] .mb-field__select,
html[data-design="v2"][data-theme="light"] .mb-field__textarea {
  background: var(--surface-1) !important;
  border-color: var(--line-2) !important;
  color: var(--text-1) !important;
}

/* ════════════════════════════════════════════════════════════════
   Settings tabs — sidebar groups behave as real tabs.
   The settings page renders all 17 sections in the DOM (so save/load
   logic is untouched). The active group on `#set-sidebar` controls
   which sections are visible and which sidebar items are exposed.
   ════════════════════════════════════════════════════════════════ */
#set-sidebar .set-nav-group { cursor: pointer; user-select: none; transition: color .15s; }
#set-sidebar .set-nav-group:hover,
#set-sidebar .set-nav-group:focus-visible { color: var(--np); outline: none; }
/* Highlight the active group header */
#set-sidebar[data-active-group="mein-business"]      .set-nav-group[data-set-group="mein-business"],
#set-sidebar[data-active-group="buchung-kommunikation"] .set-nav-group[data-set-group="buchung-kommunikation"],
#set-sidebar[data-active-group="zeiten-zahlung"]     .set-nav-group[data-set-group="zeiten-zahlung"],
#set-sidebar[data-active-group="technik-recht"]      .set-nav-group[data-set-group="technik-recht"],
#set-sidebar[data-active-group="abonnement"]         .set-nav-group[data-set-group="abonnement"],
#set-sidebar[data-active-group="hilfe"]              .set-nav-group[data-set-group="hilfe"],
#set-sidebar[data-active-group="konto"]              .set-nav-group[data-set-group="konto"]
  { color: var(--np); font-weight: 700; }

/* Hide nav items belonging to non-active groups */
#set-sidebar[data-active-group] .set-nav-item[data-set-group]:not([data-set-group=""]) { display: none; }
#set-sidebar[data-active-group="mein-business"]      .set-nav-item[data-set-group="mein-business"],
#set-sidebar[data-active-group="buchung-kommunikation"] .set-nav-item[data-set-group="buchung-kommunikation"],
#set-sidebar[data-active-group="zeiten-zahlung"]     .set-nav-item[data-set-group="zeiten-zahlung"],
#set-sidebar[data-active-group="technik-recht"]      .set-nav-item[data-set-group="technik-recht"],
#set-sidebar[data-active-group="abonnement"]         .set-nav-item[data-set-group="abonnement"],
#set-sidebar[data-active-group="hilfe"]              .set-nav-item[data-set-group="hilfe"],
#set-sidebar[data-active-group="konto"]              .set-nav-item[data-set-group="konto"]
  { display: flex; }

/* Hide content sections belonging to non-active groups (DOM stays). */
#page-einstellungen:has(#set-sidebar[data-active-group]) .set-section[data-set-group] { display: none; }
#page-einstellungen:has(#set-sidebar[data-active-group="mein-business"]) .set-section[data-set-group="mein-business"],
#page-einstellungen:has(#set-sidebar[data-active-group="buchung-kommunikation"]) .set-section[data-set-group="buchung-kommunikation"],
#page-einstellungen:has(#set-sidebar[data-active-group="zeiten-zahlung"]) .set-section[data-set-group="zeiten-zahlung"],
#page-einstellungen:has(#set-sidebar[data-active-group="technik-recht"]) .set-section[data-set-group="technik-recht"],
#page-einstellungen:has(#set-sidebar[data-active-group="abonnement"]) .set-section[data-set-group="abonnement"],
#page-einstellungen:has(#set-sidebar[data-active-group="hilfe"]) .set-section[data-set-group="hilfe"],
#page-einstellungen:has(#set-sidebar[data-active-group="konto"]) .set-section[data-set-group="konto"]
  { display: block; }

/* Firmenname-Feld: solange leer (Placeholder sichtbar), als Pflicht-Setup
   markieren — dunkler Amber-Rahmen + sanfter Hintergrund, damit der User
   sofort sieht, dass hier was eingetragen werden muss. */
#s-app-name:placeholder-shown{
  border-color:#d97706 !important;
  background:rgba(245,158,11,.06) !important;
  box-shadow:0 0 0 3px rgba(245,158,11,.10);
}
#s-app-name:placeholder-shown:hover{
  border-color:#b45309 !important;
}
#s-app-name:placeholder-shown:focus{
  border-color:#92400e !important;
  background:var(--s1) !important;
  box-shadow:0 0 0 3px rgba(245,158,11,.22) !important;
}
[data-theme=dark] #s-app-name:placeholder-shown{
  border-color:#fbbf24 !important;
  background:rgba(245,158,11,.10) !important;
  box-shadow:0 0 0 3px rgba(251,191,36,.14);
}
[data-theme=dark] #s-app-name:placeholder-shown:hover{
  border-color:#fcd34d !important;
}
[data-theme=dark] #s-app-name:placeholder-shown:focus{
  border-color:#fcd34d !important;
  box-shadow:0 0 0 3px rgba(251,191,36,.25) !important;
}

#s-homebase-group.is-homebase-missing :is(#s-hb-street,#s-hb-postal,#s-hb-city,#s-hb-country):placeholder-shown{
  border-color:#d97706 !important;
  background:rgba(245,158,11,.06) !important;
  box-shadow:0 0 0 3px rgba(245,158,11,.10);
}
#s-homebase-group.is-homebase-missing :is(#s-hb-street,#s-hb-postal,#s-hb-city,#s-hb-country):placeholder-shown:hover{
  border-color:#b45309 !important;
}
#s-homebase-group.is-homebase-missing :is(#s-hb-street,#s-hb-postal,#s-hb-city,#s-hb-country):placeholder-shown:focus{
  border-color:#92400e !important;
  background:var(--s1) !important;
  box-shadow:0 0 0 3px rgba(245,158,11,.22) !important;
}