/* VisionChat huisstijl - overschrijft de oude donkere opmaak
   Beige achtergrond, diep paars voor tekst, goud als accent. */

body, html {
  background: linear-gradient(175deg,#E7D9B6 0%,#DFCEA4 55%,#D7C495 100%) !important;
  color: #2A1F4A !important;
}

/* Donkere blokken worden licht */
[style*="rgba(15,6,35"], [style*="rgba(26,10,58"], [style*="#0F0623"],
[style*="#1a0a3a"], [style*="#150f2b"], [style*="rgba(20,12,40"] {
  background: linear-gradient(170deg,#F2E8D0,#EADCBE) !important;
  color: #2A1F4A !important;
  border-color: rgba(200,168,75,0.25) !important;
}

/* Koppen */
h1, h2, h3 { color: #2A1F4A !important; }
h1 em, h2 em, h3 em { color: #6B4FBB !important; font-style: italic; }

/* Lichte tekst op donkere achtergrond wordt leesbaar */
[style*="color:#fff"], [style*="color: #fff"],
[style*="color:#EDE8FF"], [style*="color:#B8B0D4"],
[style*="color:#9890B4"], [style*="color:#e8e3ff"] {
  color: #5c5478 !important;
}

/* Gouden accenten blijven, maar donkerder voor leesbaarheid op licht */
[style*="color:#E6C96A"], [style*="color:#C8A84B"], [style*="color:var(--goud)"] {
  color: #A9843A !important;
}

/* Paarse tekst iets dieper */
[style*="color:#9B72E0"] { color: #6B4FBB !important; }

/* Navigatie */
/* Menubalk blijft donker - dat is de huisstijl:
   diep blauwpaars boven, beige eronder. */
nav, .navbar, .nav {
  background: linear-gradient(180deg,#0F0623,#1a0a3a) !important;
  border-bottom: 1px solid rgba(200,168,75,0.25) !important;
}
nav a, .navbar a, .nav a,
nav div, nav span, .navbar span { color: #E4DFF2 !important; }
nav a:hover, .navbar a:hover { color: #E6C96A !important; }

/* Voettekst blijft donker - dat geeft rust aan het einde */
.footer, footer {
  background: linear-gradient(160deg,rgba(45,22,90,0.97),rgba(28,13,60,0.98)) !important;
  color: #B8B0D4 !important;
}
.footer a, footer a { color: #E6C96A !important; }
.footer h1, .footer h2, .footer h3,
footer h1, footer h2, footer h3 { color: #fff !important; }

/* Kaarten en blokken */
.card, .kaart, .blok {
  background: linear-gradient(170deg,#F2E8D0,#EADCBE) !important;
  border: 1px solid rgba(200,168,75,0.22) !important;
  box-shadow: 0 8px 26px rgba(42,31,74,0.06) !important;
}

/* Knoppen houden hun kleur, maar krijgen de huisstijl */
.btn, .cta, .btn1, .btn-goud {
  border-radius: 24px !important;
}


/* Klassen met witte tekst op de SEO-pagina's */
.sub, .stat .label, .lead, .intro, .tekst, .beschrijving {
  color: #4a4165 !important;
}
h1, h2, h3, h4 { color: #2A1F4A !important; }
p { color: #3d3458 !important; }
.stat .getal, .stat strong { color: #2A1F4A !important; }
a:not(.btn):not(.cta):not(.btn1):not(.btn-goud):not(.footer a):not(footer a) {
  color: #6B4FBB;
}

/* Voettekst blijft licht op donker */
.footer *, footer * { color: #B8B0D4 !important; }
.footer a, footer a, .footer strong, footer strong { color: #E6C96A !important; }


/* Hamburgermenu moet blijven werken */
.nav-links.open {
  display: flex !important;
  flex-direction: column !important;
  position: fixed !important;
  top: 64px !important;
  left: 0 !important;
  right: 0 !important;
  background: linear-gradient(180deg,#FDFBF7,#F5EFE0) !important;
  padding: 20px 24px !important;
  gap: 14px !important;
  z-index: 9999 !important;
  border-bottom: 1px solid rgba(200,168,75,0.3) !important;
  box-shadow: 0 14px 34px rgba(42,31,74,0.14) !important;
}
.nav-links.open a {
  color: #2A1F4A !important;
  font-size: 15px !important;
  padding: 11px 0 !important;
  border-bottom: 1px solid rgba(200,168,75,0.16) !important;
  text-decoration: none !important;
}


/* Oproepblok onderaan: beige in plaats van paars */
.cta-sectie {
  background: linear-gradient(170deg,#FBF6EA,#F3EBD9) !important;
  border-top: 1px solid rgba(200,168,75,0.25) !important;
  border-bottom: 1px solid rgba(200,168,75,0.25) !important;
}
.cta-label { color: #A9843A !important; }
.cta-titel { color: #2A1F4A !important; }
.cta-titel em { color: #6B4FBB !important; }
.cta-sub { color: #4a4165 !important; }
.cta-sectie a, .cta-sectie .btn { color: #A9843A !important; }
.cta-sectie a[style*="linear-gradient(135deg,#C8A84B"],
.cta-sectie a[style*="C8A84B"] { color: #1a0a3a !important; }
.cta-sectie span, .cta-sectie div { color: #4a4165 !important; }


/* Donkere kaartjes met halve doorzichtigheid */
[style*="rgba(22,16,46"], [style*="rgba(18,12,38"], [style*="rgba(30,20,60"],
[style*="rgba(25,15,50"], [style*="rgba(20,14,44"] {
  background: linear-gradient(170deg,#FFFDF8,#FBF6EA) !important;
  border-color: rgba(200,168,75,0.28) !important;
}
[style*="rgba(22,16,46"] p, [style*="rgba(18,12,38"] p,
[style*="rgba(30,20,60"] p, [style*="rgba(25,15,50"] p,
[style*="rgba(20,14,44"] p {
  color: #4a4165 !important;
}
[style*="color:#9890B4"] { color: #5c5478 !important; }
[style*="color:#B8B0D4"]:not(.footer *):not(footer *):not(.sp-voet *) { color: #4a4165 !important; }


/* ===== VANGNET =====
   Alles wat licht van kleur is, wordt leesbaar op de beige achtergrond.
   Uitzonderingen: voettekst, knoppen met een gekleurde ondergrond,
   en blokken die bewust donker zijn. */

body *[style*="color:#fff"]:not(.footer *):not(footer *):not(.sp-voet *):not(.db-voet *):not([style*="background:linear"]):not([style*="background: linear"]),
body *[style*="color: #fff"]:not(.footer *):not(footer *):not([style*="background:linear"]),
body *[style*="color:#FFF"]:not(.footer *):not(footer *):not([style*="background:linear"]),
body *[style*="color:#EDE8FF"]:not(.footer *):not(footer *),
body *[style*="color:#e8e3ff"]:not(.footer *):not(footer *),
body *[style*="color:#D8D0EC"]:not(.footer *):not(footer *),
body *[style*="color:#E4DFF2"]:not(.footer *):not(footer *):not(.sp-voet *),
body *[style*="color:#C9C2E0"]:not(.footer *):not(footer *),
body *[style*="color:rgba(255,255,255"]:not(.footer *):not(footer *):not([style*="background:linear"]),
body *[style*="color:var(--wit)"]:not(.footer *):not(footer *) {
  color: #2A1F4A !important;
}

/* Klassen die vaak licht zijn */
body .wit, body .light, body .tekst-wit { color: #2A1F4A !important; }


/* Donkerpaarse blokken met doorzichtigheid */
[style*="rgba(20,10,48"], [style*="rgba(12,5,32"], [style*="rgba(16,8,40"],
[style*="rgba(24,12,54"], [style*="rgba(28,14,60"], [style*="rgba(14,7,36"] {
  background: linear-gradient(165deg,#F2E8D0,#E8DBBC) !important;
  border-color: rgba(200,168,75,0.28) !important;
}
[style*="rgba(20,10,48"] *:not(a):not(button),
[style*="rgba(12,5,32"] *:not(a):not(button) {
  color: #4a4165 !important;
}
[style*="rgba(20,10,48"] [style*="color:#E6C96A"],
[style*="rgba(12,5,32"] [style*="color:#E6C96A"] { color: #A9843A !important; }
[style*="color:#8a82a8"] { color: #6b6288 !important; }


/* Horoscoopkaarten en soortgelijke blokken */
[style*="rgba(30,18,60"], [style*="rgba(22,12,48"], [style*="rgba(26,16,54"] {
  background: linear-gradient(135deg,#FBF6EA,#F3EBD9) !important;
  border-color: rgba(200,168,75,0.28) !important;
}
[style*="rgba(30,18,60"] div, [style*="rgba(22,12,48"] div {
  color: #4a4165 !important;
}
[style*="rgba(30,18,60"] div[style*="#EDE8FF"],
[style*="rgba(30,18,60"] div[style*="font-weight:700"] {
  color: #2A1F4A !important;
}


/* Tarotkaarten houden hun eigen uiterlijk */
.lk-rug, .kl-kaart-rug {
  background: url('/img/tarot/achterzijde-web.png?v=7') center/cover no-repeat !important;
}
.kl-kaart-slot {
  background: linear-gradient(135deg,#2d1060,#6B4FBB) !important;
  border-color: rgba(230,201,106,0.4) !important;
}
.lk-rug span, .kl-kaart-rug span {
  color: rgba(255,255,255,0.92) !important;
  background: rgba(26,10,58,0.72) !important;
}


/* Dagkaart op de homepage */
#dc-rug {
  background: url('/img/tarot/achterzijde-web480.png?v=7') center/cover no-repeat,
              linear-gradient(135deg,#1a0a3a,#2d1060) !important;
  border-color: rgba(200,168,75,0.4) !important;
}
#dc-rug span, #dc-rug div {
  color: rgba(255,255,255,0.95) !important;
  background: rgba(26,10,58,0.78) !important;
}


/* Klassen met var(--wit) op lichte achtergrond */
.stap-titel, .stap-sub, .stap-nr,
.blok-titel, .kaart-titel, .item-titel {
  color: #2A1F4A !important;
}
.stap-sub { color: #5c5478 !important; }
.stap-nr { color: #fff !important; }


/* Voettekst blijft donker, ook als het geen <footer> is */
[style*="#040210"], [style*="#070313"], [style*="#0a0518"] {
  background: linear-gradient(160deg,#0F0623,#1a0a3a) !important;
  border-color: rgba(200,168,75,0.15) !important;
}
[style*="#040210"] *, [style*="#070313"] *, [style*="#0a0518"] * {
  color: #B8B0D4 !important;
}
[style*="#040210"] a, [style*="#070313"] a { color: #E6C96A !important; }
[style*="#040210"] [style*="#EDE8FF"],
[style*="#070313"] [style*="#EDE8FF"] { color: #fff !important; }


/* Kleurvariabelen die voor een donkere achtergrond waren bedoeld,
   omgezet naar leesbare waarden op het beige. */
body {
  --wit: #241a3d !important;
  --zacht: #4a4165 !important;
  --demper: #6b6288 !important;
  --muted: #5c5478 !important;
  --licht: #2A1F4A !important;
  --goud: #9d7f2e !important;
  --goud2: #A9843A !important;
  --paars2: #6B4FBB !important;
}

/* Maar niet in blokken die bewust donker blijven */
.footer, footer, .sp-voet, .db-voet, nav, .navbar, .chat-zijde,
#medium-balk, .medium-balk, [style*="#040210"], [style*="#070313"] {
  --wit: #F3EFFB !important;
  --zacht: #B8B0D4 !important;
  --demper: #9890B4 !important;
  --muted: #B8B0D4 !important;
  --goud: #E6C96A !important;
  --goud2: #E6C96A !important;
}


/* De mediumbalk is donker: tekst daar moet licht blijven */
#medium-balk *, .medium-balk *,
#medium-balk [style*="#EDE8FF"], #medium-balk [style*="#B8B0D4"],
#medium-balk [style*="color:#fff"] {
  color: inherit;
}
#medium-balk [style*="#EDE8FF"] { color: #F3EFFB !important; }
#medium-balk [style*="#B8B0D4"] { color: #C9C2E0 !important; }
#medium-balk [style*="#E6C96A"] { color: #E6C96A !important; }
#medium-balk [style*="color:#fff"] { color: #fff !important; }
#medium-balk .mb-kop, #medium-balk .mb-kop * { color: #F3EFFB !important; }


/* Kleine labels boven secties */
.label, .sectie-label, .eyebrow, .kicker,
[class*="label"], [class*="eyebrow"] {
  color: #9d7f2e !important;
  font-weight: 700 !important;
}

/* Titels in kaarten en vakjes */
.card h3, .kaart h3, .blok h3, .methode h3, .spec h3,
.card h4, .kaart h4, .blok h4,
.card strong, .kaart strong, .blok strong,
[class*="card"] h3, [class*="kaart"] h3,
.methode span, .spec span, .voordeel h3, .voordeel h4 {
  color: #241a3d !important;
  font-weight: 700 !important;
}

/* Vragenlijst */
.faq-vraag, .vraag, details summary,
[class*="faq"] h3, [class*="faq"] strong, [class*="accordion"] {
  color: #241a3d !important;
  font-weight: 700 !important;
}

/* Alles wat nog te licht is binnen een lichte sectie */
section p, section li, section td, .sectie p, .sectie li {
  color: #3d3458 !important;
}


/* Stapnummers zichtbaar maken */
.stap-nummer, .stap-nr, .nummer, [class*="stap"] .nr,
.stappen .num, [class*="step"] [class*="num"] {
  color: rgba(157,127,46,.45) !important;
}

/* Secties duidelijker van elkaar scheiden */
section, .sectie {
  padding-top: 56px !important;
  padding-bottom: 56px !important;
}
section:nth-of-type(odd), .sectie:nth-of-type(odd) {
  background: linear-gradient(180deg,#E8DBB8,#E0D0A8) !important;
}
section:nth-of-type(even), .sectie:nth-of-type(even) {
  background: linear-gradient(180deg,#F0E6CC,#E9DCBC) !important;
  border-top: 1px solid rgba(200,168,75,.2) !important;
  border-bottom: 1px solid rgba(200,168,75,.2) !important;
}

/* Kolommen binnen een sectie krijgen een eigen vlak */
.stappen > *, .voordelen > *, .methodes > * {
  background: rgba(255,253,247,.7) !important;
  border: 1px solid rgba(200,168,75,.2) !important;
  border-radius: 14px !important;
  padding: 20px 18px !important;
  box-shadow: 0 6px 20px rgba(36,26,61,.05) !important;
}


/* Kaartjes lichter dan de ondergrond, met meer schaduw */
.stappen > *, .voordelen > *, .methodes > *,
.card, .kaart, .blok, .voordeel, .stap {
  background: linear-gradient(168deg,#FFFEFA,#FBF6E8) !important;
  box-shadow: 0 3px 6px rgba(36,26,61,.06),
              0 14px 34px rgba(36,26,61,.1) !important;
}

/* Stapnummers iets zichtbaarder */
.stap-nummer, .stap-nr, .nummer, [class*="stap"] .nr,
.stappen .num, [class*="step"] [class*="num"] {
  color: rgba(157,127,46,.32) !important;
}


/* Stapnummers zichtbaar op het mokkabeige */
.stap-num {
  color: rgba(157,127,46,.55) !important;
}


/* Kaartvariabelen die nog donker waren */
body {
  --kaart: linear-gradient(168deg,#FFFEFA,#F7EFDC) !important;
  --diep: #F5EDDC !important;
  --bg2: #FBF6E8 !important;
}
.faq-item, .cat-btn {
  background: linear-gradient(168deg,#FFFEFA,#F7EFDC) !important;
  border-color: rgba(200,168,75,.26) !important;
  box-shadow: 0 3px 14px rgba(36,26,61,.05) !important;
}
.faq-item *, .cat-btn { color: #241a3d !important; }
.faq-item p, .faq-item li { color: #3d3458 !important; }
.cat-btn.actief, .cat-btn.active {
  background: linear-gradient(135deg,#C8A84B,#E6C96A) !important;
  color: #241a3d !important;
}


/* ===== LEESBAARHEID =====
   Op het mokkabeige moeten teksten donkerder en iets steviger. */

body {
  --wit: #1e1533 !important;
  --zacht: #3a3152 !important;
  --demper: #564d70 !important;
  --muted: #463d62 !important;
  --licht: #1e1533 !important;
}

section p, section li, section td, .sectie p, .sectie li,
.card p, .kaart p, .blok p, p, li {
  color: #322a4a !important;
}

h1, h2, h3, h4, h5 { color: #1e1533 !important; }

/* Kleine labels en bijschriften: donkerder goud */
.label, .sectie-label, .eyebrow, .kicker,
[class*="label"], [class*="eyebrow"], .stap-sub, .vc-meter-bij {
  color: #8a6f26 !important;
}

/* Gouden accenten in tekst: dieper */
[style*="color:#E6C96A"]:not(.footer *):not(footer *):not(nav *):not(#medium-balk *),
[style*="color:#C8A84B"]:not(.footer *):not(footer *):not(nav *):not(#medium-balk *) {
  color: #8a6f26 !important;
}

/* Paars accent iets dieper */
[style*="color:#9B72E0"]:not(.footer *):not(footer *):not(nav *) { color: #5a3fa5 !important; }
em, .accent { color: #5a3fa5 !important; }

/* Dunne letters iets steviger op licht */
body { -webkit-font-smoothing: auto; }
p, li, td { font-weight: 400 !important; }


/* Donkere blokken op mediumprofielen: tekst daar licht houden */
[style*="rgba(26,10,58"], [style*="rgba(26, 10, 58"],
[style*="rgba(21,9,41"], [style*="rgba(31,14,61"] {
  color: #E4DFF2 !important;
}
[style*="rgba(26,10,58"] *, [style*="rgba(21,9,41"] *,
[style*="rgba(31,14,61"] * {
  color: #D8D2EC !important;
}
[style*="rgba(26,10,58"] h1, [style*="rgba(26,10,58"] h2,
[style*="rgba(26,10,58"] h3, [style*="rgba(26,10,58"] strong,
[style*="rgba(26,10,58"] b {
  color: #F3EFFB !important;
}
[style*="rgba(26,10,58"] [style*="#E6C96A"],
[style*="rgba(26,10,58"] [style*="#C8A84B"],
[style*="rgba(26,10,58"] .goud {
  color: #E6C96A !important;
}
[style*="rgba(26,10,58"] a:not([style*="background"]) { color: #E6C96A !important; }

/* Knoppen met gouden ondergrond houden donkere tekst */
[style*="linear-gradient(135deg,#C8A84B"], [style*="linear-gradient(135deg,#E6C96A"],
[style*="var(--goud2)"] { color: #1a0a3a !important; }


/* Mediumprofiel: tekst op het donkere blok goed leesbaar */
.beschrijving, .beschrijving p {
  color: #DDD6F2 !important;
  font-size: 16px !important;
  line-height: 1.9 !important;
}
.medium-kop, .medium-kop *, .profiel-kop, .profiel-kop * {
  color: #F0ECFA !important;
}
.profiel-kaart .specialisatie, .profiel-kaart .tag, .profiel-kaart .badge,
#inhoud .specialisatie, #inhoud .tag, #inhoud .badge {
  color: #E6C96A !important;
  border-color: rgba(230,201,106,.35) !important;
}
.rating-tekst, .reviews-aantal { color: #C4BCE0 !important; }

/* Donkere blokken op lichte pagina's: tekst moet licht blijven */
.gh-brug, .gh-brug h1, .gh-brug h2, .gh-brug h3, .gh-brug p,
.gh-brug span, .gh-brug div, .gh-brug li {
  color: #F0ECFA !important;
}
.gh-brug .gh-knop.goud { color: #2A1F4A !important; }
.gh-brug .gh-knop.rand { color: #C9B6F0 !important; }

/* CTA-blok op blogs: donkere achtergrond, dus lichte tekst */
.ctablok, .ctablok h1, .ctablok h2, .ctablok h3, .ctablok p, .ctablok span, .ctablok div {
  color: #F0ECFA !important;
}
.ctablok .btn { color: #2A1F4A !important; }

/* Ex-partnerpagina: donkere blokken houden lichte tekst */
.cta, .cta p, .cta div, .cta span, .cta strong, .cta h2, .cta h3 {
  color: #E4DCEF !important;
}
.cta .cta-kop { color: #FFFFFF !important; }
.cta .keuze strong { color: #E8CDB0 !important; }
.cta .keuze span, .cta .cta-klein { color: #B39C88 !important; }
.springnav, .springnav p, .springnav a {
  background: #FFFFFF;
}
.springnav p { color: #8a82a8 !important; }
.springnav a { color: #5a3fa5 !important; background: transparent; }

/* Winkel: productkaarten zijn donker, dus lichte tekst behouden */
.prod-kaart, .prod-kaart p, .prod-kaart div, .prod-kaart span, .prod-kaart h2, .prod-kaart h3 {
  color: #EDE8F7 !important;
}
.prod-kaart .kaart-tekst { color: #C9C0DC !important; }
.prod-kaart .kaart-titel { color: #FFFFFF !important; }
.prod-kaart .kaart-prijs, .prod-kaart .kaart-badge { color: #E6C96A !important; }
.prod-kaart button, .prod-kaart .kaart-knop { color: #1a0a3a !important; }