/*
 * b2c-light-tokens.css — canonical LIGHT token set for public B2C pages.
 *
 * The branchen/loesungen/info pages were authored dark via an inline
 * :root{} block (--bg:#070711, --text:#F0F0FA, --accent:#00D4AA, ...).
 * Founder direction: B2C is light-only. Linking this file AFTER each page's
 * inline <style> re-declares the SAME token names with light values, so the
 * cascade flips the whole page to light without touching per-element CSS
 * (pages use var(--bg)/var(--text)/... pervasively).
 *
 * Token contract (names match the shared inline :root across all 21 pages):
 *   surfaces  --bg --bg2 --bg-card --bg-card-hover
 *   text      --text --text2 --text3
 *   borders   --border --border2 --border-accent
 *   brand     --accent (interactive/text, AA-safe) --accent-dim --accent-glow
 *   info      --blue --blue-dim
 *   semantic  --red --amber --green (AA-safe on white)
 *
 * Brand mint: canonical interactive/text = #047857 (AA-safe ~5.5:1 on white,
 * both as small foreground text and as a button bg with white text). #059669
 * was too light (~3.8:1) for small accent text — see the --accent note below.
 * Decorative teal glow kept hue-tinted under --accent-glow/--accent-dim only
 * (never used as text/link foreground).
 */
:root {
  /* surfaces — soft off-white, matches existing light pages (fristen/gobd) */
  --bg: #f8faf9;
  --bg2: #eef3f1;
  --bg-card: #ffffff;
  --bg-card-hover: #f3f7f5;

  /* text on light */
  --text: #0f1a17;
  --text2: rgba(15, 26, 23, 0.70);
  --text3: #5b6b66;

  /* borders on light */
  --border: rgba(15, 26, 23, 0.08);
  --border2: rgba(15, 26, 23, 0.12);
  --border-accent: rgba(4, 120, 87, 0.32);

  /* brand mint — #047857 is AA-safe BOTH as small foreground text on white
     (~5.5:1) and as a solid button background with white text (~5.5:1).
     (#059669 was only ~3.8:1 as fg text — failed AA on the 11-14px accent
     labels/links/eyebrows these pages use var(--accent) for.) */
  --accent: #047857;
  --accent-dim: rgba(4, 120, 87, 0.10);
  --accent-glow: rgba(4, 120, 87, 0.20);

  /* Chrome footer tokens (normally from public-theme-2026.css, which light-only
     pages skip). The injected .lp-footer falls back to #059669 (~3.8:1) for its
     tiny headings/badges/status — alias to the AA-safe accent so they stay legible. */
  --mint: var(--accent);
  --mint-soft: var(--accent-dim);
  --mint-line: var(--border-accent);

  /* info blue — AA-safe on white (was #4B8BFF, too light) */
  --blue: #2563eb;
  --blue-dim: rgba(37, 99, 235, 0.10);

  /* semantic — AA-safe on white */
  --red: #dc2626;
  --amber: #b45309;
  --green: #047857;  /* AA-safe on white (#059669 was ~3.8:1 as success text) */
}

/* Light browser chrome to match */
html { color-scheme: light; }

/*
 * #ck-card — shared "Datenschutz für KI-Dokumente" hero card, duplicated inline
 * across all 21 branchen/loesungen pages with a hardcoded dark gradient + light
 * inner text (authored for dark bg). Stable id selector (NOT a fragile [style*=]
 * substring match) — !important is required because the dark values live in
 * inline style= attributes. Single-point fix flips the card to light on every page.
 */
#ck-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 8px 30px rgba(15, 26, 23, 0.08) !important;
}
#ck-card h3 { color: var(--text) !important; }
#ck-card p { color: var(--text2) !important; }
/*
 * Consent controls (GDPR/TDDDG banner) must stay readable on the light card.
 * The accept/reject pills, icons, links, settings-panel labels & descriptions
 * are all inline-styled with dark-theme colors and carry NO classes to target,
 * so these scoped [style*=] rules are the pragmatic fallback — stable because
 * they are bounded to #ck-card. TODO(theme): give these inner elements real
 * classes and drop the [style*=] selectors.
 *   #e2e8f0 = labels/headings · #94a3b8 = descriptions · #64748b = muted ·
 *   #38bdf8 = buttons/icons/links (was cyan-on-white ~2.1:1)
 */
#ck-card [style*="color:#e2e8f0"] { color: var(--text) !important; }
#ck-card [style*="color:#94a3b8"] { color: var(--text2) !important; }
#ck-card [style*="color:#64748b"] { color: var(--text3) !important; }
#ck-card [style*="color:#38bdf8"] { color: var(--blue) !important; }
/* settings panel: 'Immer aktiv' pill text #22c55e is ~2.2:1 on white → dark green */
#ck-card [style*="color:#22c55e"] { color: var(--accent) !important; }
/* per-category toggle tracks default to rgba(255,255,255,...) (invisible on white).
 * Don't override the bg (JS toggles it for on/off) — give the track a visible
 * outline so the off-state reads on white without breaking the on/off fill. */
#ck-card [id$="-track"] { border-color: rgba(15, 26, 23, 0.22) !important; }

/*
 * .btn-mint CTAs: with the mint darkened to #047857, WHITE text is AA-safe
 * (~5.5:1); the original near-black #070711 would now be only ~3.5:1. So the
 * CTA foreground is white. (On the older #059669 white was ~3.8:1 — that is
 * why the earlier round reverted to dark; the darker mint flips the math.)
 */
.btn-mint { color: #fff !important; }

/*
 * Hero gradient text + accent-link hover hardcoded a bright dark-theme mint
 * (#4BF5D2) that is near-invisible on the light bg. Remap to readable tokens
 * (accent → blue gradient; accent hover). Loaded after the page <style> so the
 * !important wins; keeps the background-clip:text treatment intact.
 */
.gr {
  background: linear-gradient(135deg, var(--accent), var(--blue)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.link-accent:hover { color: var(--accent) !important; }

/*
 * Injected B2C site chrome (nav/drawer/footer from b2c-site-chrome.js) gets its
 * light re-toning from public-theme-2026.css under html[data-theme="light"].
 * Light-only pages skip public-theme-2026.css (it carries the dark toggle), so
 * those light overrides are mirrored here WITHOUT the [data-theme] gate — the
 * chrome must read light on every converted page regardless of the controller.
 */
.nav-glass {
  background: rgba(255, 255, 255, 0.84) !important;
  border-color: rgba(15, 23, 42, 0.10) !important;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}
.logo-folder,
#site-nav .nav-drawer-link { color: #102033 !important; }
.nav-link,
.nav-b2b,
.lang-pill a {
  color: #334155 !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
  background: rgba(255, 255, 255, 0.62) !important;
}
.lang-pill a.lp-active {
  color: var(--accent) !important;
  background: #ecfdf5 !important;
  border-color: #bbf7d0 !important;
}
#site-nav .nav-drawer {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(15, 23, 42, 0.10) !important;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.16) !important;
}
.lp-footer { background: linear-gradient(180deg, rgba(248, 251, 255, 0.94), #eef5fb) !important; }
.lp-footer,
.lp-footer-link,
.lp-footer-tagline,
.lp-footer-copy { color: #475569 !important; }
.lp-footer .logo-folder,
.lp-footer-brand-txt { color: #102033 !important; }
/* mobile hamburger (b2c-site-chrome.css) bars are #E8F8F3 + translucent-white bg
   → invisible on the now-light header. Retone for light. */
#site-nav .nav-hamburger {
  background: rgba(15, 23, 42, 0.05) !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
}
#site-nav .nav-hamburger:hover { background: rgba(15, 23, 42, 0.09) !important; }
#site-nav .nav-hamburger > span { background: #102033 !important; }

/*
 * Injected B2B chrome (#b2b-nav / #b2b-mobile-menu / #b2b-footer, server-rendered
 * on b2b.mintfolder.ai) is hard-coded dark in b2b-chrome.css; its light re-toning
 * also lived under html[data-theme="light"] in public-theme-2026.css, which
 * light-only pages skip. Mirror those overrides here (no [data-theme] gate) so
 * the B2B nav/drawer/footer read light on the converted pages too.
 */
#b2b-nav {
  background: rgba(255, 255, 255, 0.82) !important;
  border-color: rgba(15, 23, 42, 0.10) !important;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.84) !important;
}
#b2b-nav .nav-links a,
#b2b-nav .nav-logo,
#b2b-nav .nav-login { color: #1f2937 !important; }
#b2b-nav .nav-logo .f,
#b2b-mobile-menu .mob-top .f { color: #102033 !important; }
#b2b-nav .nav-logo .m,
#b2b-mobile-menu .mob-top .m { color: var(--accent) !important; }
#b2b-nav .nav-links a:hover { background: rgba(5, 150, 105, 0.08) !important; color: #064e3b !important; }
#b2b-nav .dd-panel {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(15, 23, 42, 0.10) !important;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.16) !important;
}
#b2b-nav .dd-panel a { color: #334155 !important; }
#b2b-nav .dd-panel a:hover { color: #064e3b !important; background: rgba(5, 150, 105, 0.08) !important; }
#b2b-mobile-menu { background: rgba(248, 251, 255, 0.98) !important; }
#b2b-mobile-menu .mob-acc,
#b2b-mobile-menu .mob-lnk,
#b2b-mobile-menu .mob-pan a,
#b2b-mobile-menu .mob-signin {
  color: #1f2937 !important;
  background: rgba(255, 255, 255, 0.74) !important;
  border-color: rgba(15, 23, 42, 0.10) !important;
}
#b2b-footer {
  background: linear-gradient(180deg, rgba(248, 251, 255, 0.94), #eef5fb) !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
  color: #475569 !important;
}
#b2b-footer .footer-logo,
#b2b-footer .footer-logo .f,
#b2b-footer .footer-col a { color: #1f2937 !important; }
#b2b-footer .footer-desc,
#b2b-footer .footer-copy { color: #64748b !important; }