/* Shantaram Yoga — kenniscentrum voor klassieke yoga
   Vormgeving 'Bij het vuur' (10-11-2026): altijd donker, roet, as en sintel.
   Kleuren volgen de vijf kosha's: elke laag van de mens heeft haar eigen kleur,
   en die kleur vertelt je op elke pagina waar je bent. */

:root {
  color-scheme: dark;
  --inkt: #ddd4c6;          /* as (vibhuti): lopende tekst */
  --inkt-2: #aea392;
  --papier: #15110e;        /* roet van de grotwand: achtergrond */
  --papier-2: #1c1713;
  --wit: #211b17;
  --lijn: #3a3029;

  --anna: #c99070;          /* annamaya: klei, het lichaam */
  --prana: #e3a63c;         /* pranamaya: kurkuma, de levenskracht */
  --mano: #74b3ad;          /* manomaya: rivier, de geest */
  --vijnana: #a9a6e6;       /* vijnanamaya: indigo, het inzicht */
  --ananda: #d6bb6a;        /* anandamaya: oud goud, gelukzaligheid */
  --grond: #a8a294;         /* fundament: wat voor alle lagen geldt */

  --link: #ecc08a;
  --vlak-donker: #0f0c0a;
  --op-donker: #efe9df;
  --op-donker-2: #b3a898;
  --accent-donker: #e0873a;

  --f-titel: "Tiro Devanagari Sanskrit", "Iowan Old Style", Georgia, serif;
  --f-tekst: "Mukta", "Segoe UI", system-ui, sans-serif;

  --maat: 1.125rem;
  --breed: 74rem;
  --leesbreed: 40rem;
  --r: 6px;
}

:root[data-theme="light"] {
  /* dag: as en zandsteen in het daglicht, dezelfde vijf koshakleuren maar donkerder */
  color-scheme: light;
  --inkt: #241c16; --inkt-2: #5b4f43; --papier: #ece6dc; --papier-2: #e2dacd; --wit: #f6f2ea;
  --lijn: #cfc4b3; --link: #8a3f12; --vlak-donker: #1d1612; --op-donker: #efe9df; --op-donker-2: #b3a898; --accent-donker: #e0873a;
  --anna: #7a4e33; --prana: #835606; --mano: #2d6a6c; --vijnana: #3b3f86; --ananda: #6f5c1c; --grond: #5c615a; /* prana en ananda donkerder: 4,5:1 als tekst (11-11) */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
body {
  margin: 0; background: var(--papier); color: var(--inkt);
  font: 400 var(--maat)/1.65 var(--f-tekst);
  font-feature-settings: "kern", "liga";
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--accent-donker); outline-offset: 2px; border-radius: 3px; }
::selection { background: color-mix(in srgb, var(--prana) 35%, transparent); }

h1, h2, h3, h4 { font-family: var(--f-titel); font-weight: 400; line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.005em; }
h1 { font-size: clamp(2.3rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); }
h3 { font-size: 1.45rem; }
h4 { font-size: 1.15rem; }
p, ul, ol { margin: 0 0 1em; }
.dev { font-family: var(--f-titel); }
.iast { font-style: italic; }
.klein { font-size: .9rem; color: var(--inkt-2); }
.verborgen { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprong { position: absolute; left: -999px; top: .5rem; background: var(--wit); padding: .5rem 1rem; z-index: 99; }
.sprong:focus { left: 1rem; }

.wrap { max-width: var(--breed); margin: 0 auto; padding: 0 1rem; }
@media (min-width: 760px) { .wrap { padding: 0 2rem; } }

/* ---------- kop ---------- */
.kop { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--papier) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--lijn); }
.kop > .wrap:first-child { display: flex; align-items: center; gap: 1rem; min-height: 4rem; }
.merk { display: flex; flex-direction: column; text-decoration: none; color: var(--inkt); line-height: 1; margin-right: auto; }
.merk b { font: 400 1.5rem/1 var(--f-titel); }
.merk span { font-size: .78rem; color: var(--inkt-2); margin-top: .3rem; }
.nav { display: none; gap: .2rem; }
.nav a { color: var(--inkt); text-decoration: none; padding: .4rem .65rem; border-radius: var(--r); font-size: .98rem; }
.nav a:hover { background: var(--papier-2); }
.nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--inkt); border-radius: 0; }
.zoekknop, .menuknop { font: inherit; background: none; border: 1px solid var(--lijn); color: var(--inkt); border-radius: var(--r); padding: .35rem .7rem; cursor: pointer; display: inline-flex; gap: .4rem; align-items: center; }
.zoekknop svg, .menuknop svg { width: 1.05rem; height: 1.05rem; }
@media (min-width: 1020px) { .nav { display: flex; } .menuknop { display: none; } }
.mobielnav { display: none; border-top: 1px solid var(--lijn); padding: .5rem 0 1rem; }
.mobielnav.open { display: block; }
.mobielnav a { display: block; padding: .55rem 0; color: var(--inkt); text-decoration: none; font-size: 1.1rem; border-bottom: 1px solid var(--lijn); }
@media (min-width: 1020px) { .mobielnav { display: none !important; } }

/* zoeken */
.zoekpaneel { position: fixed; inset: 0; z-index: 60; background: color-mix(in srgb, var(--inkt) 45%, transparent); display: none; padding: 4.5rem 1rem 1rem; }
.zoekpaneel.open { display: block; }
.zoekdoos { max-width: 42rem; margin: 0 auto; background: var(--wit); border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.25); overflow: hidden; }
.zoekdoos input { width: 100%; font: 400 1.25rem var(--f-tekst); padding: 1rem 1.2rem; border: 0; border-bottom: 1px solid var(--lijn); background: transparent; color: var(--inkt); }
.zoekdoos input:focus { outline: none; }
.zoekres { max-height: 60vh; overflow: auto; margin: 0; padding: .4rem; list-style: none; }
.zoekres a { display: block; padding: .6rem .8rem; border-radius: var(--r); text-decoration: none; color: var(--inkt); }
.zoekres a:hover, .zoekres a:focus { background: var(--papier); }
.zoekres small { display: block; color: var(--inkt-2); font-size: .85rem; }
.zoekres .stip { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .45rem; vertical-align: .05em; }
.zoekleeg { padding: 1rem 1.2rem; color: var(--inkt-2); }

/* ---------- knoppen ---------- */
.knop { display: inline-flex; align-items: center; gap: .5rem; font: 600 1rem var(--f-tekst); padding: .75rem 1.25rem; border-radius: var(--r); text-decoration: none; border: 1.5px solid currentColor; cursor: pointer; background: none; color: var(--inkt); }
.knop.vol { background: var(--inkt); color: var(--papier); border-color: var(--inkt); }
.knop.vol:hover { background: var(--inkt-2); border-color: var(--inkt-2); }
.knop:hover { text-decoration: none; }
.knoppen { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---------- held: de sutra ---------- */
.held { background: var(--vlak-donker); color: var(--op-donker); position: relative; overflow: hidden; }
.held .wrap { padding-top: clamp(3rem, 8vw, 6rem); padding-bottom: clamp(3rem, 7vw, 5rem); }
.held-boven { color: var(--op-donker-2); font-size: .95rem; margin-bottom: 1.5rem; }
.held-boven a { color: inherit; }
.sutra { display: flex; flex-wrap: wrap; gap: 0 clamp(.6rem, 2.4vw, 2.2rem); margin: 0 0 2.2rem; list-style: none; padding: 0; }
.sutra li { display: flex; flex-direction: column; }
.sutra button { all: unset; cursor: pointer; display: flex; flex-direction: column; border-radius: 6px; padding: .2rem .3rem; }
.sutra button:focus-visible { outline: 3px solid var(--accent-donker); }
.sutra .woord { font: 400 clamp(3rem, 11vw, 8.4rem)/1.12 var(--f-titel); color: var(--op-donker); transition: color .35s; }
.sutra .tr { font: italic 400 clamp(1rem, 1.7vw, 1.35rem)/1.2 var(--f-titel); color: var(--op-donker-2); margin-top: .35rem; }
.sutra .nl { font-size: .95rem; color: var(--op-donker-2); max-width: 13rem; line-height: 1.35; margin-top: .3rem; min-height: 2.6em; }
.sutra button[aria-pressed="true"] .woord, .sutra button:hover .woord { color: var(--accent-donker); }
.sutra button[aria-pressed="true"] .nl { color: var(--op-donker); }
.sutra-uitleg { max-width: 38rem; min-height: 5.2em; font-size: 1.1rem; color: var(--op-donker); border-left: 2px solid var(--accent-donker); padding-left: 1rem; margin-bottom: 2.5rem; }
.held h1 { font-size: clamp(1.9rem, 4.2vw, 3.1rem); max-width: 22ch; color: var(--op-donker); margin-bottom: .6em; }
.held .lead { max-width: 36rem; font-size: 1.15rem; color: var(--op-donker-2); }
.held .knop { color: var(--op-donker); }
.held .knop.vol { background: var(--accent-donker); color: #15110e; border-color: var(--accent-donker); }
.held .knop.vol:hover { background: #ec9a52; border-color: #ec9a52; }
.bron-regel { margin-top: 2.5rem; font-size: .85rem; color: var(--op-donker-2); }

/* ---------- secties ---------- */
.sectie { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.sectie.rand { border-top: 1px solid var(--lijn); }
.sectie.vlak { background: var(--papier-2); }
.sectie-kop { max-width: 46rem; margin-bottom: 2.5rem; }
.sectie-kop p { font-size: 1.12rem; color: var(--inkt-2); }

/* ---------- de ladder van Patanjali ---------- */
.ladder-schakel { display: inline-flex; border: 1.5px solid var(--inkt); border-radius: 999px; padding: 3px; margin-bottom: 1.8rem; }
.ladder-schakel button { font: 600 .98rem var(--f-tekst); border: 0; background: none; color: var(--inkt); padding: .5rem 1.1rem; border-radius: 999px; cursor: pointer; }
.ladder-schakel button[aria-pressed="true"] { background: var(--inkt); color: var(--papier); }
.ladder { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column-reverse; border-left: 2px solid var(--inkt); }
.trede { display: grid; grid-template-columns: 1.6rem 1fr; gap: 0 .9rem; padding: .5rem 0 .55rem 1rem; border-bottom: 1px solid var(--lijn); position: relative; transition: opacity .5s ease; }
.trede:last-child { border-top: 1px solid var(--lijn); }
.trede .n { font: 400 1rem var(--f-titel); color: var(--inkt-2); padding-top: .35rem; }
.trede .dev { font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.05; }
.trede .naam { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; }
.trede .naam i { font: italic 400 1.15rem var(--f-titel); }
.trede .naam span { color: var(--inkt-2); }
.trede p { grid-column: 2; margin: .1rem 0 0; max-width: 40rem; font-size: .95rem; color: var(--inkt-2); line-height: 1.45; }
.trede-meter { grid-column: 2; display: flex; align-items: center; gap: .7rem; margin-top: .45rem; max-width: 24rem; }
.trede .balk { flex: 1; height: 6px; background: var(--papier-2); border-radius: 3px; overflow: hidden; }
.trede .pct { font: 600 .85rem var(--f-tekst); color: var(--k, var(--inkt)); min-width: 2.6em; text-align: right; opacity: 0; transition: opacity .4s; }
.ladder[data-modus="les"] .trede .pct { opacity: 1; }
.trede .balk i { display: block; height: 100%; width: var(--w, 100%); background: var(--k, var(--inkt)); transition: width .7s cubic-bezier(.2,.7,.2,1); }
.ladder[data-modus="les"] .trede { opacity: .38; }
.ladder[data-modus="les"] .trede.les { opacity: 1; }
.ladder[data-modus="les"] .trede .balk i { width: 0; }
.ladder[data-modus="les"] .trede.les .balk i { width: var(--wles); }
.ladder-noot { margin-top: 1.4rem; max-width: 44rem; color: var(--inkt-2); min-height: 3.3em; }
.ladder-grid { display: grid; gap: 2.5rem; }
@media (min-width: 980px) { .ladder-grid { grid-template-columns: 1fr 22rem; gap: 4rem; } }
.groep-legende { border: 1px solid var(--lijn); border-radius: var(--r); padding: 1.2rem 1.3rem; align-self: start; background: var(--wit); }
.groep-legende h3 { font-size: 1.2rem; }
.groep-legende p { font-size: .98rem; }

/* ---------- de kaart: vijf kosha's als doorsnede ---------- */
.kaart { --pad: clamp(.55rem, 1.6vw, 1.1rem); }
.laag { border: 2px solid var(--k); border-radius: 14px; padding: var(--pad); padding-top: .8rem; background: color-mix(in srgb, var(--k) 7%, var(--papier)); }
.laag + .laag { margin-top: 0; }
.laag .laag { margin-top: .8rem; }
.laag-kop { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .9rem; padding: 0 .3rem .5rem; }
.laag-kop h3 { margin: 0; font-size: clamp(1.15rem, 2.4vw, 1.5rem); color: var(--k); }
.laag-kop h3 a { color: inherit; text-decoration: none; }
.laag-kop h3 a:hover { text-decoration: underline; }
.laag-kop .dev { color: var(--k); font-size: 1.1rem; }
.laag-kop span { color: var(--inkt-2); font-size: .95rem; }
.laag-items { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0 .3rem .4rem; list-style: none; margin: 0; }
.laag-items a { display: inline-block; padding: .3rem .7rem; border-radius: 999px; background: var(--wit); border: 1px solid color-mix(in srgb, var(--k) 40%, var(--lijn)); color: var(--inkt); text-decoration: none; font-size: .95rem; }
.laag-items a:hover { border-color: var(--k); background: color-mix(in srgb, var(--k) 12%, var(--wit)); }
.kaart-fundament { border: 2px dashed var(--grond); border-radius: 14px; padding: .9rem 1rem; margin-top: 1rem; }
.kaart-fundament .laag-kop h3 { color: var(--grond); }
.kaart-fundament { --k: var(--grond); }

/* ---------- redenen ---------- */
.redenen { display: grid; gap: 0; border-top: 1px solid var(--lijn); }
@media (min-width: 860px) { .redenen { grid-template-columns: 1fr 1fr; column-gap: 3.5rem; } }
.reden { padding: 1.4rem 0; border-bottom: 1px solid var(--lijn); }
.reden h3 { font-size: 1.35rem; margin-bottom: .35rem; }
.reden p { margin: 0; color: var(--inkt-2); }
.reden .dev { color: var(--anna); font-size: 1rem; margin-right: .4rem; }

/* ---------- lijn / tijdlijn ---------- */
.tijdlijn { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
@media (min-width: 900px) { .tijdlijn { grid-template-columns: repeat(5, 1fr); border-top: 2px solid var(--inkt); } }
.tijdlijn li { padding: 1.1rem 1.2rem 1.1rem 0; border-left: 2px solid var(--inkt); padding-left: 1.1rem; position: relative; }
@media (min-width: 900px) { .tijdlijn li { border-left: 0; padding-left: 0; padding-top: 1.3rem; } .tijdlijn li::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--papier); border: 2px solid var(--inkt); } }
.tijdlijn .jaar { font: 400 1.6rem/1 var(--f-titel); display: block; margin-bottom: .4rem; }
.tijdlijn b { display: block; font-weight: 600; }
.tijdlijn p { font-size: .95rem; color: var(--inkt-2); margin: .3rem 0 0; }

/* ---------- aanbod-tegels ---------- */
.aanbod { display: grid; gap: 1px; background: var(--lijn); border: 1px solid var(--lijn); border-radius: 10px; overflow: hidden; }
@media (min-width: 760px) { .aanbod { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .aanbod.drie { grid-template-columns: repeat(3, 1fr); } }
.tegel { background: var(--wit); padding: 1.5rem 1.4rem 1.6rem; display: flex; flex-direction: column; gap: .5rem; }
.tegel .soort { font-size: .9rem; color: var(--inkt-2); display: flex; gap: .5rem; align-items: center; }
.tegel .soort i { width: .65rem; height: .65rem; border-radius: 50%; background: var(--k, var(--grond)); display: inline-block; }
.tegel h3 { font-size: 1.4rem; margin: 0; }
.tegel p { margin: 0; font-size: 1rem; }
.tegel dl { display: grid; grid-template-columns: auto 1fr; gap: .15rem .9rem; margin: .4rem 0 0; font-size: .95rem; }
.tegel dt { color: var(--inkt-2); }
.tegel dd { margin: 0; }
.tegel .status { margin-top: auto; padding-top: .8rem; font-size: .92rem; font-weight: 600; }
.tegel .status.ja { color: var(--mano); }
.tegel .status.bijna { color: var(--prana); }
.tegel a.meer { font-weight: 600; }

/* ---------- artikel ---------- */
.art-kop { padding: clamp(2.5rem, 6vw, 4.5rem) 0 2rem; border-bottom: 1px solid var(--lijn); }
.kruimel { font-size: .92rem; color: var(--inkt-2); margin-bottom: 1.4rem; }
.kruimel a { color: inherit; }
.art-kop .laagnaam { display: inline-flex; align-items: center; gap: .5rem; font-size: .95rem; color: var(--k); font-weight: 600; margin-bottom: .6rem; }
.art-kop .laagnaam i { width: .7rem; height: .7rem; border-radius: 50%; background: var(--k); }
.art-kop h1 { max-width: 24ch; }
.art-kop .sanskriet { font-family: var(--f-titel); font-size: 1.4rem; color: var(--k); margin: -.2rem 0 .8rem; }
.art-kop .sanskriet i { color: var(--inkt-2); font-size: 1.1rem; margin-left: .6rem; }
.art-kop .intro { font-size: 1.2rem; max-width: 42rem; color: var(--inkt-2); }
.art-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; padding-top: 2.5rem; padding-bottom: 4rem; }
@media (min-width: 1000px) { .art-raster { grid-template-columns: 15rem minmax(0, var(--leesbreed)) 1fr; gap: 3.5rem; } }
.art-zij { font-size: .95rem; }
@media (min-width: 1000px) { .art-zij > div { position: sticky; top: 5.5rem; } }
.art-zij h2 { font: 600 .95rem var(--f-tekst); margin: 0 0 .5rem; }
.mini-lagen { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: 3px; }
.mini-lagen a { display: flex; align-items: center; gap: .55rem; padding: .3rem .5rem; border-radius: 4px; text-decoration: none; color: var(--inkt-2); font-size: .92rem; }
.mini-lagen a::before { content: ""; flex: none; width: .6rem; height: .6rem; border-radius: 50%; background: var(--kk); }
.mini-lagen a[aria-current="true"] { background: color-mix(in srgb, var(--kk) 16%, var(--papier)); color: var(--inkt); font-weight: 600; }
.mini-lagen a:hover { color: var(--inkt); }
.inhoud-lijst { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--lijn); }
.inhoud-lijst a { display: block; padding: .25rem 0 .25rem .8rem; text-decoration: none; color: var(--inkt-2); line-height: 1.35; }
.inhoud-lijst a:hover, .inhoud-lijst a.actief { color: var(--inkt); box-shadow: -2px 0 0 var(--k); }

.lees { max-width: var(--leesbreed); }
.lees h2 { font-size: 1.85rem; margin-top: 2.6rem; }
.lees h3 { margin-top: 1.8rem; }
.lees p, .lees li { font-size: 1.1rem; line-height: 1.72; }
.lees ul, .lees ol { padding-left: 1.3rem; }
.lees li { margin-bottom: .35rem; }
.lees blockquote { margin: 1.8rem 0; padding: .2rem 0 .2rem 1.3rem; border-left: 3px solid var(--k); }
.lees blockquote p { font: italic 400 1.25rem/1.55 var(--f-titel); margin-bottom: .4rem; }
.lees blockquote cite { font-size: .92rem; color: var(--inkt-2); font-style: normal; }
.lees blockquote .dev { font-style: normal; font-size: 1.35rem; color: var(--k); display: block; margin-bottom: .3rem; }
.lees table { border-collapse: collapse; width: 100%; margin: 1.4rem 0; font-size: 1rem; }
.lees th, .lees td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--lijn); vertical-align: top; }
.lees th { font-weight: 600; border-bottom: 2px solid var(--inkt); }
.tabel-schuif { overflow-x: auto; }

.kader { border: 1px solid color-mix(in srgb, var(--kk, var(--k)) 40%, var(--lijn)); border-radius: var(--r); padding: 1rem 1.2rem; margin: 1.8rem 0; background: color-mix(in srgb, var(--kk, var(--k)) 6%, var(--wit)); }
.kader > b::before { content: ""; display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; background: var(--kk, var(--k)); margin-right: .5rem; vertical-align: .05em; }
.kader > b { display: block; margin-bottom: .3rem; }
.kader p:last-child, .kader ul:last-child { margin-bottom: 0; }
.kader.veilig { --kk: #a5402a; }
.kader.eerlijk { --kk: var(--vijnana); }
.kader.bihar { --kk: var(--prana); }
.kader.westen { --kk: var(--mano); }
.stappen { counter-reset: s; list-style: none; padding: 0 !important; }
.stappen > li { counter-increment: s; position: relative; padding-left: 2.6rem; margin-bottom: .9rem; }
.stappen > li::before { content: counter(s); position: absolute; left: 0; top: .05rem; width: 1.8rem; height: 1.8rem; border-radius: 50%; border: 1.5px solid var(--k); color: var(--k); font: 400 1rem/1.75rem var(--f-titel); text-align: center; }

.bronnen { margin-top: 3rem; padding-top: 1.4rem; border-top: 2px solid var(--inkt); }
.bronnen h2 { font: 600 1.05rem var(--f-tekst); margin: 0 0 .7rem; }
.bronnen ol { font-size: .98rem; color: var(--inkt-2); padding-left: 1.2rem; }
.bronnen li { font-size: .98rem !important; }
.verder { display: grid; gap: 1rem; margin-top: 2.5rem; }
@media (min-width: 640px) { .verder { grid-template-columns: 1fr 1fr; } }
.verder a { display: block; border: 1px solid var(--lijn); border-radius: var(--r); padding: .9rem 1rem; text-decoration: none; color: var(--inkt); background: var(--wit); }
.verder a:hover { border-color: var(--inkt); }
.verder small { display: block; color: var(--inkt-2); }
.verder .volgende { text-align: right; }

/* begrippen in de tekst */
a.term { color: inherit; text-decoration: underline dotted color-mix(in srgb, var(--k, var(--inkt)) 70%, transparent); text-decoration-thickness: 1.5px; text-underline-offset: .22em; }
a.term:hover { text-decoration-style: solid; }
.term-kaart { position: absolute; z-index: 70; max-width: 20rem; background: var(--vlak-donker); color: var(--op-donker); border-radius: 8px; padding: .75rem .9rem; font-size: .95rem; line-height: 1.45; box-shadow: 0 12px 30px rgba(0,0,0,.25); pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s; }
.term-kaart.zichtbaar { opacity: 1; transform: none; }
.term-kaart b { font: 400 1.15rem var(--f-titel); display: block; }
.term-kaart .dev { color: var(--accent-donker); font-size: 1.1rem; margin-left: .4rem; }

/* ---------- kenniscentrum-overzicht ---------- */
.index-laag { padding: 2.2rem 0; border-top: 1px solid var(--lijn); display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .index-laag { grid-template-columns: 19rem 1fr; gap: 3rem; } }
.index-laag h2 { color: var(--k); font-size: 1.9rem; margin-bottom: .2rem; }
.index-laag .dev { color: var(--k); font-size: 1.25rem; }
.index-laag .uitleg { color: var(--inkt-2); font-size: 1rem; margin-top: .6rem; }
.art-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
@media (min-width: 700px) { .art-lijst { grid-template-columns: 1fr 1fr; column-gap: 2rem; } }
.art-lijst a { display: block; padding: .8rem 0; border-bottom: 1px solid var(--lijn); text-decoration: none; color: var(--inkt); }
.art-lijst a:hover strong { text-decoration: underline; }
.art-lijst strong { display: block; font: 400 1.25rem/1.25 var(--f-titel); }
.art-lijst span { display: block; color: var(--inkt-2); font-size: .95rem; margin-top: .15rem; }

/* begrippenlijst */
.alfabet { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: 1.5rem; position: sticky; top: 4rem; background: var(--papier); padding: .6rem 0; z-index: 5; }
.alfabet a { min-width: 2rem; text-align: center; padding: .2rem .3rem; border: 1px solid var(--lijn); border-radius: 4px; text-decoration: none; color: var(--inkt); font-size: .95rem; }
.alfabet a:hover { border-color: var(--inkt); }
.filter { width: 100%; max-width: 26rem; font: 400 1.05rem var(--f-tekst); padding: .65rem .9rem; border: 1.5px solid var(--lijn); border-radius: var(--r); background: var(--wit); color: var(--inkt); margin-bottom: 1rem; }
.begrippen { margin: 0; }
.begrip { display: grid; gap: .2rem 1.5rem; padding: 1rem 0; border-bottom: 1px solid var(--lijn); scroll-margin-top: 8rem; }
@media (min-width: 760px) { .begrip { grid-template-columns: 15rem 1fr; } }
.begrip dt { display: flex; flex-direction: column; }
.begrip dt b { font: 400 1.35rem/1.2 var(--f-titel); }
.begrip dt .dev { font-size: 1.15rem; color: var(--inkt-2); }
.begrip dd { margin: 0; }
.begrip dd .waar { font-size: .9rem; color: var(--inkt-2); }
.begrip:target { background: color-mix(in srgb, var(--prana) 12%, transparent); }
.letter-kop { font-size: 2.2rem; margin: 2rem 0 0; padding-bottom: .3rem; border-bottom: 2px solid var(--inkt); }

/* ---------- oefenen ---------- */
.oefen-raster { display: grid; gap: 2rem; }
@media (min-width: 980px) { .oefen-raster { grid-template-columns: 1fr 1fr; } }
.oefening { border: 1px solid var(--lijn); border-radius: 12px; background: var(--wit); overflow: hidden; display: flex; flex-direction: column; }
.oefening header { padding: 1.3rem 1.4rem .4rem; }
.oefening header p { color: var(--inkt-2); margin: 0; }
.oefening .speel { position: relative; background: #0d1414; color: #e9ece4; min-height: 25rem; display: grid; place-items: center; margin: 1rem 0 0; padding: 3rem 1rem 6.5rem; }
.oefening .bediening { padding: 1rem 1.4rem 1.4rem; display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.oefening select { font: inherit; padding: .5rem .6rem; border-radius: var(--r); border: 1px solid var(--lijn); background: var(--papier); color: var(--inkt); }
.oefening .regels { padding: 0 1.4rem 1.4rem; font-size: .98rem; color: var(--inkt-2); }

.kaars { position: relative; width: 70px; height: 240px; }
.kaars .lont { position: absolute; left: 50%; bottom: 120px; width: 3px; height: 14px; background: #2b2420; transform: translateX(-50%); }
.kaars .lijf { position: absolute; left: 50%; bottom: 0; width: 44px; height: 120px; transform: translateX(-50%); border-radius: 4px 4px 2px 2px; background: linear-gradient(90deg, #cdbfa4, #efe6d3 45%, #c9b998); }
.kaars .vlam { position: absolute; left: 50%; bottom: 130px; width: 22px; height: 60px; transform: translateX(-50%); border-radius: 50% 50% 45% 45% / 62% 62% 38% 38%; background: radial-gradient(ellipse at 50% 78%, #fff8dd 0 18%, #ffd77a 34%, #f5a524 60%, rgba(245,120,20,0) 72%); filter: blur(.4px); animation: flakker 2.8s ease-in-out infinite; transform-origin: 50% 90%; }
.kaars .gloed { position: absolute; left: 50%; bottom: 105px; width: 220px; height: 220px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(255,190,80,.22), rgba(255,190,80,0) 65%); }
@keyframes flakker { 0%,100% { transform: translateX(-50%) scale(1, 1) rotate(0); } 30% { transform: translateX(-50%) scale(.97, 1.04) rotate(-1deg); } 60% { transform: translateX(-50%) scale(1.02, .97) rotate(1deg); } }
@media (prefers-reduced-motion: reduce) { .kaars .vlam { animation: none; } }
.trataka .kaars, .trataka .stip { transition: opacity 1.2s; }
.trataka .stip { position: absolute; left: 50%; top: calc(50% - 1.75rem); width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: #000; box-shadow: 0 0 0 999px #e9e6dc; opacity: 0; }
.trataka[data-object="stip"] { background: #e9e6dc; }
.trataka[data-object="stip"] .kaars { display: none; }
.trataka[data-object="stip"] .stip { opacity: 1; }
.trataka[data-object="stip"] .melding, .trataka[data-object="stip"] .teller { color: #3e4f51; border-top-color: rgba(0,0,0,.08); }
.trataka[data-object="stip"] .nabeeld { width: 22px; height: 22px; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(255,255,255,.9), rgba(255,255,255,0) 70%); }
.trataka[data-object="stip"][data-fase="binnen"] { background: #0d1414; }
.trataka[data-object="stip"][data-fase="binnen"] .melding { color: #c9d2cb; }
.trataka[data-fase="binnen"] .kaars, .trataka[data-fase="binnen"] .stip { opacity: 0; }
.trataka { overflow: hidden; }
.nabeeld { position: absolute; left: 50%; top: calc(50% - 1.75rem); width: 26px; height: 64px; transform: translate(-50%, -78%); border-radius: 50% 50% 45% 45% / 62% 62% 38% 38%; background: radial-gradient(ellipse at 50% 78%, rgba(120,170,255,.55), rgba(70,90,200,0) 70%); opacity: 0; transition: opacity 2s; }
.trataka[data-fase="binnen"] .nabeeld { opacity: .75; animation: vervaag 40s linear forwards; }
@keyframes vervaag { to { opacity: 0; } }
.speel .melding { position: absolute; bottom: 0; left: 0; right: 0; min-height: 5.5rem; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 1rem; color: #c9d2cb; padding: .6rem 1.2rem; margin: 0; border-top: 1px solid rgba(255,255,255,.08); }
.speel .teller { position: absolute; top: .9rem; right: 1rem; font: 400 1.1rem var(--f-titel); color: #8d9a94; }

.neus { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.6rem; align-items: center; justify-items: center; margin-top: 1.5rem; }
.neusgat { display: flex; flex-direction: column; align-items: center; gap: .6rem; transition: opacity .3s; }
.neusgat b { width: 54px; height: 54px; border-radius: 50%; border: 2px solid #e2b23d; background: radial-gradient(circle, rgba(226,178,61,.45), rgba(226,178,61,0) 70%); }
.neusgat span { font-size: .95rem; color: #aebcb6; }
.neusgat.dicht { opacity: .3; }
.neusgat.dicht b { border-style: dashed; background: none; border-color: #6c7b77; }
.adem { width: 64px; height: 200px; border-radius: 32px; border: 2px solid #3b4a48; position: relative; overflow: hidden; }
.adem i { position: absolute; left: 0; right: 0; bottom: 0; height: 0%; background: linear-gradient(#f0c45a, #b9800f); }
.neus-fase { position: absolute; top: 1.1rem; left: 0; right: 0; text-align: center; font: 400 1.6rem var(--f-titel); }

/* ---------- formulieren ---------- */
.formulier { display: grid; gap: .9rem; max-width: 30rem; }
.formulier label { display: grid; gap: .25rem; font-weight: 600; font-size: .98rem; }
.formulier input, .formulier select, .formulier textarea { font: 400 1.05rem var(--f-tekst); padding: .7rem .85rem; border: 1.5px solid var(--lijn); border-radius: var(--r); background: var(--wit); color: var(--inkt); }
.formulier input:focus, .formulier select:focus, .formulier textarea:focus { border-color: var(--inkt); outline: none; }
.formulier .toestemming { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; font-size: .95rem; }
.formulier .toestemming input { margin-top: .35rem; }
.wachtlijst { display: grid; gap: 2rem; border: 1px solid var(--lijn); background: var(--wit); border-radius: 12px; padding: clamp(1.4rem, 4vw, 2.4rem); }
@media (min-width: 900px) { .wachtlijst { grid-template-columns: 1fr 1fr; } }

/* ---------- over / citaat ---------- */
.over-blok { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 900px) { .over-blok { grid-template-columns: 1.1fr 1fr; gap: 4rem; } }
.groot-citaat { font: 400 clamp(1.6rem, 3.2vw, 2.4rem)/1.3 var(--f-titel); margin: 0; }
.groot-citaat cite { display: block; font: 400 1rem var(--f-tekst); color: var(--inkt-2); margin-top: 1rem; }

/* ---------- voet ---------- */
.voet { background: var(--vlak-donker); color: var(--op-donker-2); padding: 3.5rem 0 2rem; margin-top: 0; }
.voet a { color: var(--op-donker); }
.voet-raster { display: grid; gap: 2rem; }
@media (min-width: 860px) { .voet-raster { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.voet h2 { font: 600 1rem var(--f-tekst); color: var(--op-donker); margin-bottom: .6rem; }
.voet ul { list-style: none; padding: 0; margin: 0; }
.voet li { margin-bottom: .35rem; font-size: .97rem; }
.voet .merk b { color: var(--op-donker); }
.voet-onder { border-top: 1px solid #34474a; margin-top: 2.5rem; padding-top: 1.2rem; font-size: .88rem; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; }
.voet .om { font: 400 2rem var(--f-titel); color: var(--accent-donker); }

/* pagina-kop voor gewone pagina's */
.pag-kop { padding: clamp(2.8rem, 7vw, 5rem) 0 2.2rem; border-bottom: 1px solid var(--lijn); }
.pag-kop .intro { font-size: 1.2rem; max-width: 44rem; color: var(--inkt-2); }
.pag-kop .dev { font-size: 1.4rem; color: var(--anna); }

@media print { .kop, .voet, .art-zij, .zoekpaneel { display: none !important; } body { background: #fff; color: #000; } }

/* drie woorden en misvattingen */
.woorden { display: grid; gap: 1rem; }
@media (min-width: 860px) { .woorden { grid-template-columns: repeat(3, 1fr); gap: 1.6rem; } }
.woord { border-top: 3px solid var(--k); padding-top: 1rem; }
.woord h3 { font-size: 1.6rem; margin-bottom: .8rem; }
.woord h3 .dev { display: block; color: var(--k); font-size: 1.1rem; margin-bottom: .2rem; }
.woord p { margin: 0 0 .7rem; }
.woord p span { display: block; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--inkt-2); }
.woord .nu { color: var(--inkt-2); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--k) 70%, transparent); text-decoration-thickness: 2px; }
.woord .nu span { text-decoration: none; display: block; }
dl.mythes { margin: 1.2rem 0; border-top: 1px solid var(--lijn); }
dl.mythes dt { font-family: var(--f-titel); font-size: 1.2rem; padding-top: 1.1rem; }
dl.mythes dd { margin: .35rem 0 0; padding-bottom: 1.1rem; border-bottom: 1px solid var(--lijn); color: var(--inkt-2); }
dl.mythes dd a { display: inline-block; margin-left: .3rem; }

/* tijdlijn waar het misging */
.misgang { list-style: none; margin: 1.6rem 0; padding: 0; position: relative; }
.misgang::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--lijn); }
.misgang li { position: relative; display: grid; gap: .3rem 1.4rem; padding: 0 0 1.8rem 1.4rem; }
@media (min-width: 720px) { .misgang li { grid-template-columns: 9.5rem 1fr; } }
.misgang li::before { content: ""; position: absolute; left: -5px; z-index: 1; top: .45rem; width: 12px; height: 12px; border-radius: 50%; background: var(--papier); border: 2px solid var(--mg); }
.misgang .mg-jaar { font: 400 1.15rem/1.3 var(--f-titel); color: var(--mg); }
.misgang h3 { font-size: 1.3rem; margin: .1rem 0 .3rem; }
.misgang p { margin: 0; }
.mg-tag { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mg); }
.misgang .verlies { margin-top: .6rem; padding: .55rem .8rem; background: color-mix(in srgb, var(--mg) 9%, transparent); border-radius: 4px; color: var(--inkt); }
.misgang .verlies span { display: block; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--inkt-2); margin-bottom: .15rem; }
.mg-yoga { --mg: var(--anna); } .mg-tantra { --mg: var(--prana); } .mg-meditatie { --mg: var(--vijnana); } .mg-chakra { --mg: var(--ananda); } .mg-verzet { --mg: var(--inkt-2); }
.mg-legende { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; font-size: .85rem; }
.mg-legende span { color: var(--mg); } .mg-legende span::before { content: "● "; }

/* ---------- stamboom ---------- */
[hidden] { display: none !important; }
.stamboom { --s: 1; position: relative; }
.sb-bediening { display: flex; flex-wrap: wrap; gap: .7rem 1.2rem; align-items: center; margin-top: 1.4rem; }
.sb-groep { display: inline-flex; border: 1px solid var(--lijn); border-radius: 999px; overflow: hidden; }
.sb-groep button { border: 0; background: transparent; color: var(--inkt); padding: .45rem .9rem; font: inherit; font-size: .9rem; cursor: pointer; }
.sb-groep button + button { border-left: 1px solid var(--lijn); }
.sb-groep button[aria-pressed="true"] { background: var(--inkt); color: var(--papier); }
.sb-zoom button { min-width: 2.6rem; font-size: 1.1rem; }
.sb-taklabel { font-size: .9rem; display: inline-flex; gap: .5rem; align-items: center; }
.sb-taklabel select { font: inherit; padding: .35rem .5rem; border: 1px solid var(--lijn); border-radius: 6px; background: var(--papier); color: var(--inkt); }
.sb-legende { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; font-size: .82rem; color: var(--inkt-2); margin: 1rem auto .6rem; }
.sb-legende span::before { content: ""; display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; margin-right: .35rem; vertical-align: -.05rem; }
.sb-lg-klassiek::before { background: var(--grond-sb); }
.sb-lg-vernieuwend::before { background: var(--prana); }
.sb-lg-commercieel::before { background: transparent; border: 2px solid var(--inkt-2); }
.sb-lg-leraar::before { width: 1.4rem !important; height: 2px !important; border-radius: 0 !important; background: var(--inkt-2); vertical-align: .2rem !important; }
.sb-lg-zegen::before { width: 1.4rem !important; height: 0 !important; border-radius: 0 !important; border-top: 2px dashed var(--inkt-2); vertical-align: .2rem !important; }
.sb-lg-ster::before { display: none !important; }
.stamboom { --grond-sb: var(--vijnana); }

.stamboom[data-weergave="kaart"] .sb-lijstvak, .stamboom[data-weergave="lijst"] .sb-kaart, .stamboom[data-weergave="lijst"] .sb-zoom { display: none; }
.sb-schuif { overflow-x: auto; overflow-y: hidden; border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); background: var(--papier-2, var(--papier)); scrollbar-width: thin; }
.sb-schuif:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; }
.sb-doek { position: relative; width: calc(var(--b) * var(--s) * 1px + 200px); padding: 0 100px 1rem 40px; box-sizing: border-box; }
.sb-perken { position: relative; height: 2.2rem; }
.sb-perk { position: absolute; left: calc(var(--x) * var(--s) * 1px + 40px); width: calc(var(--w) * var(--s) * 1px); top: 0; bottom: 0; border-left: 1px solid var(--lijn); }
.sb-perk span { position: sticky; left: 0; display: inline-block; padding: .55rem .6rem; font: 400 1rem/1 var(--f-titel); color: var(--inkt-2); }
.sb-jaren { position: relative; height: 1.4rem; border-bottom: 1px solid var(--lijn); }
.sb-tick { position: absolute; left: calc(var(--x) * var(--s) * 1px + 40px); transform: translateX(-50%); font-size: .72rem; color: var(--inkt-2); }
.sb-baan { position: relative; height: calc(var(--h) * 1px); border-bottom: 1px dashed var(--lijn); }
.sb-baannaam { position: sticky; left: 0; display: inline-block; margin: .6rem 0 0 -30px; padding: .1rem .5rem; font-family: inherit; font-weight: 600; font-size: .74rem; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; color: var(--inkt-2); background: var(--papier-2, var(--papier)); z-index: 3; border-radius: 3px; }
.sb-verband { position: absolute; left: 40px; top: 0; width: calc(var(--b) * var(--s) * 1px); height: 100%; overflow: visible; pointer-events: none; }
.sb-verband path { fill: none; stroke: var(--inkt-2); stroke-width: 1.5; vector-effect: non-scaling-stroke; opacity: .55; }
.sb-verband path.sb-zegen { stroke-dasharray: 5 4; }
.sb-punt { position: absolute; left: calc(var(--x) * var(--s) * 1px + 40px); top: calc(var(--y) * 1px); display: grid; grid-template-columns: 18px auto; column-gap: .45rem; align-items: start; text-align: left; max-width: 160px; padding: 0; border: 0; background: none; color: var(--inkt); font: inherit; cursor: pointer; z-index: 2; }
.sb-punt i { grid-row: span 2; width: 14px; height: 14px; margin-top: 2px; border-radius: 50%; background: var(--c, var(--inkt)); border: 2px solid var(--c, var(--inkt)); box-sizing: border-box; }
.sb-punt b { font-weight: 600; font-size: .86rem; line-height: 1.2; }
.sb-punt b em { font-style: normal; color: var(--prana); margin-left: .25rem; }
.sb-punt small { font-size: .72rem; color: var(--inkt-2); }
.sb-punt:hover b, .sb-punt[aria-pressed="true"] b { text-decoration: underline; text-underline-offset: 3px; }
.sb-punt:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; border-radius: 3px; }
.sb-tekst { --c: var(--anna); }
.sb-tekst i { border-radius: 2px; transform: rotate(45deg) scale(.85); }
.sb-klassiek { --c: var(--grond-sb); }
.sb-vernieuwend { --c: var(--prana); }
.sb-commercieel i { background: var(--papier); border-color: var(--inkt-2); }
.sb-breuk i { background: transparent; border: 0; width: 14px; height: 14px; border-radius: 0; position: relative; }
.sb-breuk i::before, .sb-breuk i::after { content: ""; position: absolute; left: 6px; top: -1px; width: 2.5px; height: 16px; background: var(--c); }
.sb-breuk i::before { transform: rotate(45deg); } .sb-breuk i::after { transform: rotate(-45deg); }
.sb-o-yoga { --c: var(--anna); } .sb-o-tantra { --c: var(--prana); } .sb-o-meditatie { --c: var(--vijnana); } .sb-o-chakra { --c: var(--ananda); } .sb-o-verzet { --c: var(--inkt-2); }
.sb-dim { opacity: .18; }
.sb-baan.sb-dim { opacity: .25; }

.sb-paneel { position: fixed; right: 1rem; bottom: 1rem; z-index: 40; width: min(24rem, calc(100vw - 2rem)); background: var(--papier); color: var(--inkt); border: 1px solid var(--lijn); border-radius: 10px; padding: 1.1rem 1.2rem 1.2rem; box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.sb-paneel h2 { font-size: 1.45rem; margin: .1rem 0 .2rem; }
.sb-p-soort { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--inkt-2); margin: 0 1.8rem 0 0; }
.sb-p-jaar { font-size: .9rem; color: var(--inkt-2); margin: 0 0 .6rem; }
.sb-p-uitleg { margin: 0 0 .7rem; }
.sb-p-sluit { position: absolute; top: .4rem; right: .5rem; border: 0; background: none; font-size: 1.5rem; line-height: 1; color: var(--inkt-2); cursor: pointer; padding: .3rem .5rem; }

.sb-lijst { list-style: none; margin: 1rem 0 2rem; padding: 0; }
.sb-l-perk { font: 400 1.5rem/1.2 var(--f-titel); margin: 2rem 0 .6rem; padding-bottom: .4rem; border-bottom: 1px solid var(--lijn); }
.sb-l-item { display: grid; gap: .2rem 1.2rem; padding: .8rem 0; border-bottom: 1px dashed var(--lijn); }
@media (min-width: 720px) { .sb-l-item { grid-template-columns: 9rem 1fr; } }
.sb-l-jaar { font: 400 1rem/1.4 var(--f-titel); color: var(--inkt-2); }
.sb-l-soort { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--inkt-2); }
.sb-l-item h3 { font-size: 1.15rem; margin: .1rem 0 .2rem; }
.sb-l-item p { margin: 0; }
.sb-l-breekpunten h3 { color: var(--anna); }
.sb-ster { font-style: normal; font-size: .8rem; color: var(--prana); margin-left: .4rem; white-space: nowrap; }
.sb-punt b, .sb-punt small { background: var(--papier-2, var(--papier)); padding: 0 .2rem; margin-left: -.2rem; box-decoration-break: clone; -webkit-box-decoration-break: clone; justify-self: start; }
.mg-herstel { --mg: var(--mano); } .sb-o-herstel { --c: var(--mano); }
.sb-o-herstel i::before, .sb-o-herstel i::after { display: none; } .sb-o-herstel i { border: 2px solid var(--c); border-radius: 50%; background: var(--c); }
.sb-punt b em.sb-w { color: var(--vijnana); }

/* label: aanbod dat werkelijk in de lijn van Sivananda en Satyananda ligt */
.lijnlabel{font-size:.78rem;letter-spacing:.02em;color:var(--inkt-zacht,inherit);opacity:.85;margin:-.2rem 0 .6rem;font-style:italic}
.lijnlabel::before{content:"✦ ";font-style:normal}

/* ===== Bij het vuur (10-11-2026) ===== */
/* openingsscherm: rook en vuurlicht achter de sutra */
.held { background: var(--papier); min-height: min(100svh, 62rem); display: grid; align-items: end; }
.held .wrap { position: relative; z-index: 1; }
.held .rook { position: absolute; inset: -10% -10% 0; width: 120%; height: 110%; opacity: .5; mix-blend-mode: screen; pointer-events: none; }
.held .vuurlicht { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(150,70,25,.32), rgba(150,70,25,0) 55%); animation: vuurflakker 5s ease-in-out infinite; }
@keyframes vuurflakker { 0%,100% { opacity: .85 } 20% { opacity: 1 } 35% { opacity: .7 } 55% { opacity: .95 } 70% { opacity: .78 } }
.held h1, .held .lead, .sutra-uitleg { animation: opstijgen 1.6s ease both; }
.held .lead { animation-delay: .3s; }
@keyframes opstijgen { from { opacity: 0; transform: translateY(8px) } }

/* historische prenten op een passe-partout */
.prent { margin: 0; }
.prent .mat { background: #e6d8bc; padding: clamp(8px, 1.4vw, 16px); box-shadow: 0 20px 40px rgba(0,0,0,.45); }
.prent img { width: 100%; height: auto; display: block; }
.prent figcaption { font-size: .88rem; color: var(--inkt-2); margin-top: .8rem; max-width: 26rem; line-height: 1.45; }
.houdingen { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(28px, 6vw, 80px); align-items: start; }
.reeks { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.6vw, 18px); }
.reeks .prent .mat { padding: 8px; }
.bron-noot { grid-column: 1 / -1; font-size: .88rem; color: var(--inkt-2); margin: .2rem 0 0; }
.lijn-blok { display: grid; grid-template-columns: minmax(0, 20rem) 1fr; gap: clamp(28px, 6vw, 90px); align-items: center; }
@media (max-width: 820px) {
  .houdingen, .lijn-blok { grid-template-columns: 1fr; }
  .lijn-blok .prent { max-width: 18rem; }
}
@media (prefers-reduced-motion: reduce) {
  .held .vuurlicht, .held h1, .held .lead, .sutra-uitleg { animation: none; }
  .held .rook { display: none; }
}

/* dag/nacht-knop */
.themaknop { font: inherit; background: none; border: 1px solid var(--lijn); color: var(--inkt); border-radius: var(--r); padding: .35rem .6rem; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; }
.themaknop svg { width: 1.05rem; height: 1.05rem; }
.themaknop .zon { display: none; }
:root[data-theme="light"] .themaknop .zon { display: block; }
:root[data-theme="light"] .themaknop .maan { display: none; }
:root[data-theme="light"] .held { background: var(--vlak-donker); color: var(--op-donker); }
:root[data-theme="light"] .prent .mat { box-shadow: 0 12px 28px rgba(60,40,20,.25); }

/* ===== De reis op de homepagina: altijd nacht, ook als de rest dag is ===== */
.reis { position: relative; color: #ddd4c6; --rk-wit: #efe9df; --rk-as2: #aea392; }
.reis #dal { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; background: #0e0b09; }
.reis .halte { position: relative; z-index: 1; min-height: 100svh; display: grid; align-items: center; padding: 12vh clamp(28px, 8vw, 120px); }
.reis .blok { max-width: 32rem; background: linear-gradient(90deg, rgba(14,11,9,.72), rgba(14,11,9,0)); padding: 22px 28px 22px 0; }
.reis .halte.rechts { justify-items: end; }
.reis .halte.rechts .blok { background: linear-gradient(270deg, rgba(14,11,9,.72), rgba(14,11,9,0)); padding: 22px 0 22px 28px; text-align: right; }
.reis .halte.midden { justify-items: center; text-align: center; }
.reis .halte.midden .blok { background: radial-gradient(closest-side, rgba(14,11,9,.75), rgba(14,11,9,0)); padding: 40px 56px; }
.reis h1, .reis h2 { color: var(--rk-wit); }
.reis h1 { font: 300 clamp(1.05rem, 2vw, 1.25rem)/1.55 var(--f-tekst); max-width: 30rem; }
.reis h1 b { font-weight: 600; }
.reis h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); }
.reis a { color: #ecc08a; }
.reis-sutra { font: 400 clamp(2.6rem, 8vw, 6.4rem)/1 var(--f-titel); color: var(--rk-wit); margin: 0 0 .3em; }
.reis-uitleg { font: italic 400 clamp(1.05rem, 2.2vw, 1.35rem)/1.4 var(--f-titel); margin: 0 0 1.4rem; }
.reis-uitleg a { color: var(--rk-as2); font-size: .85em; }
.reis .kosha-halte .dev { display: block; font: 400 clamp(2.4rem, 6vw, 4rem)/1 var(--f-titel); color: var(--k); margin-bottom: .2em; }
.reis .kosha-halte h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
.woordjes { display: grid; gap: 14px; margin: 1rem 0; }
.woordjes div { display: grid; grid-template-columns: 1fr 4.5rem; gap: 14px; align-items: baseline; }
.woordjes .dev { font: 400 2rem var(--f-titel); color: var(--rk-wit); order: 2; }
.woordjes s { color: var(--rk-as2); text-decoration-color: #e0873a; }
.reis .knop { color: var(--rk-wit); border-color: var(--rk-as2); }
.reis .knop.vol { background: #e0873a; border-color: #e0873a; color: #140f0b; }
.voortgang { position: fixed; left: clamp(12px, 2.5vw, 28px); top: 50%; transform: translateY(-50%); z-index: 2; display: flex; flex-direction: column; gap: 9px; transition: opacity .5s; }
.voortgang i { width: 6px; height: 6px; border-radius: 50%; background: #4a3f36; transition: background .4s; }
.voortgang i.hier { background: var(--k, #e0873a); }
.geluid { position: fixed; left: clamp(12px, 2.5vw, 28px); bottom: 18px; z-index: 3; font: 600 .9rem var(--f-tekst); color: #ddd4c6; background: rgba(14,11,9,.6); border: 1px solid #4a3f36; border-radius: 999px; padding: .45em 1em; cursor: pointer; transition: opacity .5s; }
.geluid[aria-pressed="true"] { border-color: #e0873a; color: #efe9df; }
.scrolwenk { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 2; font-size: .9rem; color: #aea392; transition: opacity .6s; margin: 0; }
body.na-de-reis .voortgang, body.na-de-reis .geluid, body.na-de-reis .scrolwenk { opacity: 0; pointer-events: none; }
.na-reis { position: relative; z-index: 1; background: var(--papier); }
@media (max-width: 700px) {
  .reis .halte, .reis .halte.rechts { justify-items: start; }
  .reis .blok, .reis .halte.rechts .blok { background: rgba(14,11,9,.62); padding: 20px; text-align: left; border-radius: 6px; }
  .woordjes div { grid-template-columns: 4.5rem 1fr; } .woordjes .dev { order: 0; }
  .voortgang { display: none; }
  .scrolwenk { bottom: 64px; }
}

/* ===== Reis A5: van de as naar de kern ===== */
.reis #dal { background: #070504; }
.reis .halte { min-height: 130svh; }
.reis .halte.eerste { min-height: 100svh; align-items: end; padding-bottom: 16vh; background: linear-gradient(0deg, rgba(7,5,4,.75), rgba(7,5,4,0) 45%); }
.reis .blok, .reis .halte.rechts .blok, .reis .halte.midden .blok { background: none; padding: 0; max-width: 30rem; text-shadow: 0 1px 18px rgba(0,0,0,.9), 0 0 2px rgba(0,0,0,.8); opacity: 0; transform: translateY(14px); transition: opacity 1.1s ease, transform 1.1s ease; }
.reis .halte.zicht .blok { opacity: 1; transform: none; }
.reis .dev { display: block; font: 400 clamp(2.4rem, 6vw, 4.2rem)/1 var(--f-titel); color: var(--k); margin-bottom: .15em; }
.reis .citaat { font: italic 400 clamp(1.15rem, 2.4vw, 1.5rem)/1.45 var(--f-titel); max-width: 34rem; margin: 0 auto .6em; color: #efe9df; }
.reis .klein { color: #aea392; }
.reis .knop { text-shadow: none; margin: .4rem .2rem 0; }
.flits { position: fixed; inset: 0; pointer-events: none; opacity: 0; z-index: 1; }
.reis .balk { position: fixed; left: 0; right: 0; height: 9vh; background: #000; z-index: 2; pointer-events: none; transition: height 1.2s ease; }
.reis .balk.boven { top: 0; } .reis .balk.onder { bottom: 0; }
body.open .reis .balk { height: 0; }
.voortgang { left: auto; right: clamp(12px, 2.5vw, 28px); }
@media (max-width: 700px) { .reis .halte.rechts .blok { text-align: left; } }
@media (prefers-reduced-motion: reduce) { .reis .blok { opacity: 1; transform: none; transition: none; } .reis .balk { display: none; } }

/* het openingsshot: echte beelden van de dhuni */
.reis .opening { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; background: #070504; pointer-events: none; }
.ai-noot { position: fixed; right: clamp(12px, 2.5vw, 28px); bottom: 14px; margin: 0; z-index: 2; font-size: .75rem; color: #aea392; pointer-events: none; transition: opacity .4s; }
body.na-de-reis .ai-noot { opacity: 0 !important; }
@media (max-width: 700px) { .ai-noot { bottom: auto; top: calc(9vh + 64px); } }

/* ===== Homepagina, sober (10-11-2026): tekst links, Patañjali rechts ===== */
.home-kop { border-bottom: 1px solid var(--lijn); }
.home-kop-raster { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: clamp(32px, 7vw, 110px); align-items: center; padding-top: clamp(3rem, 8vw, 6.5rem); padding-bottom: clamp(3rem, 7vw, 5.5rem); }
.home-sutra { font-family: var(--f-titel); font-size: clamp(1.7rem, 3.6vw, 2.6rem); line-height: 1.1; color: var(--anna); margin: 0 0 .35rem; }
.home-vertaling { font-family: var(--f-titel); font-style: italic; color: var(--inkt-2); margin: 0 0 2.2rem; max-width: 34rem; }
.home-vertaling a { font-family: var(--f-tekst); font-style: normal; font-size: .9rem; white-space: nowrap; }
.home-kop h1 { font-size: clamp(2.3rem, 5.2vw, 3.9rem); max-width: 16ch; margin-bottom: .45em; }
.home-kop .lead { font-size: 1.15rem; max-width: 36rem; color: var(--inkt-2); margin: 0 0 1.8rem; }
.home-knoppen { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; }
.home-prent { max-width: 20rem; justify-self: end; }
@media (max-width: 820px) {
  .home-kop-raster { grid-template-columns: 1fr; }
  .home-prent { max-width: 12rem; justify-self: start; }
}

/* ===== Iconen per laag (10-11-2026): fijne lijnen in de kleur van de kosha ===== */
.icoon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: var(--k, var(--grond)); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tegel .soort .icoon { width: 1.5rem; height: 1.5rem; }
.laag-kop { align-items: center; }
.laag-kop .icoon { width: 1.4rem; height: 1.4rem; margin-right: .1rem; }
.art-kop .laagnaam .icoon { width: 1.3rem; height: 1.3rem; }

/* ===== Tijdlijn op schaal ===== */
.tijdlijn-grafiek { margin: 2rem 0 2.6rem; padding: 1.6rem clamp(1rem, 3vw, 2rem) 1.2rem; background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--r); }
.tijdlijn-grafiek h3 { font-size: 1.35rem; margin: 0 0 .3rem; }
.tijdlijn-grafiek figcaption p { margin: 0; color: var(--inkt-2); font-size: .98rem; max-width: 44rem; }
.tijdlijn-grafiek svg { display: block; width: 100%; height: auto; margin-top: 1rem; overflow: visible; }
.tl-staand { display: none !important; max-width: 22rem; }
.tl-as { stroke: var(--inkt-2); stroke-width: 1.5; }
.tl-streep { stroke: var(--inkt-2); stroke-width: 1.2; }
.tl-jaar { font: 400 13px var(--f-tekst); fill: var(--inkt-2); }
.tl-steel { stroke: var(--vijnana); stroke-width: 1; opacity: .6; }
.tl-tekst { fill: var(--wit); stroke: var(--vijnana); stroke-width: 2; }
.tl-naam { font: 400 15px var(--f-titel); fill: var(--inkt); }
.tl-modern { fill: var(--anna); opacity: .85; }
.tl-steel-m { stroke: var(--anna); stroke-width: 1; }
.tl-naam-m { font: 600 14px var(--f-tekst); fill: var(--anna); }
.tl-meer { margin: .6rem 0 0; font-size: .95rem; }
@media (max-width: 700px) {
  .tl-liggend { display: none !important; }
  .tl-staand { display: block !important; }
  .tl-jaar { font-size: 14px; } .tl-naam { font-size: 17px; } .tl-naam-m { font-size: 15px; }
}

/* ===== Artikels als leeservaring (10-11-2026) ===== */
.leesvoortgang { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; pointer-events: none; }
.leesvoortgang i { display: block; height: 100%; width: 0; background: var(--k, var(--inkt)); }
.art-kop { position: relative; overflow: hidden; }
.art-watermerk { position: absolute; right: -.04em; top: 50%; transform: translateY(-50%); font: 400 clamp(9rem, 22vw, 20rem)/1 var(--f-titel); color: var(--k); opacity: .085; pointer-events: none; white-space: nowrap; user-select: none; }
.art-kop .wrap { position: relative; }
.art-meta { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin: 1.2rem 0 0; font-size: .9rem; color: var(--inkt-2); }
.art-meta span { padding-left: .8rem; border-left: 2px solid color-mix(in srgb, var(--k) 55%, transparent); line-height: 1.2; }
.lees > p:first-of-type::first-letter { font: 400 3.4em/.85 var(--f-titel); float: left; margin: .08em .1em 0 0; color: var(--k); }
.lees h2 { position: relative; padding-top: 1.1rem; }
.lees h2::before { content: ""; position: absolute; top: 0; left: 0; width: 2.2rem; height: 2px; background: var(--k); opacity: .8; }
.lees blockquote { background: color-mix(in srgb, var(--k) 7%, transparent); border-radius: 0 var(--r) var(--r) 0; padding: 1rem 1.3rem; }

/* diagrammen en prenten in de tekst */
.diagram { margin: 2rem 0 2.2rem; padding: 1.3rem clamp(.8rem, 2.4vw, 1.6rem) 1.1rem; background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--r); }
.diagram svg { display: block; width: 100%; height: auto; margin: 0 auto; overflow: visible; }
.diagram.smal svg { max-width: 26rem; }
.diagram figcaption { margin-top: 1rem; font-size: .95rem; color: var(--inkt-2); line-height: 1.5; }
.diagram figcaption b { color: var(--inkt); font-weight: 600; }
.diagram.reeks-in-tekst .reeks { grid-template-columns: repeat(3, 1fr); }
.prent.in-tekst { margin: 1.6rem 0 1.8rem; max-width: 16rem; }
.prent.in-tekst.rechts { float: right; margin: .4rem 0 1.2rem 2rem; }
@media (max-width: 700px) { .prent.in-tekst.rechts { float: none; margin: 1.4rem 0; } }
.lees h2 { clear: both; }
.dg-ring { fill: color-mix(in srgb, var(--k) 9%, transparent); stroke: var(--k); stroke-width: 1.6; }
.dg-lijn, .dg-as { fill: none; stroke: var(--inkt-2); stroke-width: 1; opacity: .7; }
.dg-as.dik { stroke-width: 3; stroke: var(--ananda); opacity: .8; }
.dg-stip { fill: var(--k); }
.dg-dev { font: 400 22px var(--f-titel); fill: var(--k, var(--inkt)); }
.dg-tekst { font: 400 15px var(--f-tekst); fill: var(--inkt); }
.dg-klein { font: 400 13px var(--f-tekst); fill: var(--inkt-2); }
.dg-vak { fill: color-mix(in srgb, var(--k) 8%, var(--wit)); stroke: var(--k); stroke-width: 1.4; }
.dg-vak.vol { fill: color-mix(in srgb, var(--k) 16%, var(--wit)); }
.dg-blad { fill: color-mix(in srgb, var(--ananda) 14%, transparent); stroke: var(--ananda); stroke-width: 1; }
.dg-kern { fill: var(--wit); stroke: var(--ananda); stroke-width: 1.4; }
.dg-nadi { fill: none; stroke-width: 2.2; }
.dg-nadi.ida { stroke: var(--mano); } .dg-nadi.pingala { stroke: var(--prana); }
.dg-pijl { fill: none; stroke: var(--prana); stroke-width: 1.4; opacity: .6; }
.dg-zon { fill: color-mix(in srgb, var(--prana) 22%, var(--wit)); stroke: var(--prana); stroke-width: 1.5; }
.dg-straal { stroke: var(--prana); stroke-width: 1.4; stroke-linecap: round; }
.dg-nr { fill: var(--wit); stroke: var(--anna); stroke-width: 1.2; }
.dg-nr.groot { stroke: var(--vijnana); }
.dg-driehoek { fill: color-mix(in srgb, var(--ananda) 8%, transparent); stroke: var(--ananda); stroke-width: 1.4; }

/* verder in deze laag */
.laag-verder { margin: 3rem 0 1rem; padding-top: 1.6rem; border-top: 1px solid var(--lijn); }
.laag-verder h2 { display: flex; align-items: center; gap: .6rem; font-size: 1.4rem; padding-top: 0; }
.laag-verder h2::before { display: none; }
.buren { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .9rem; margin-top: 1rem; }
.buur { display: flex; flex-direction: column; gap: .3rem; padding: 1rem 1.1rem 1.1rem; background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--r); text-decoration: none; color: var(--inkt); transition: border-color .3s; }
.buur:hover { border-color: var(--k); }
.buur-dev { font: 400 1.5rem/1 var(--f-titel); color: var(--k); }
.buur b { font: 400 1.15rem/1.25 var(--f-titel); }
.buur span:last-child { font-size: .9rem; color: var(--inkt-2); line-height: 1.45; }
.pag-kop { position: relative; overflow: hidden; }
.pag-kop .wrap { position: relative; }
.index-icoon { display: inline-flex; width: 2.6rem; height: 2.6rem; border: 1px solid var(--k); border-radius: 50%; align-items: center; justify-content: center; margin-bottom: .8rem; }
.index-icoon .icoon { width: 1.45rem; height: 1.45rem; }

/* toegankelijkheid (11-11): klikvlakken van minstens 24px, groter vinkje */
.voet-onder a, .voet li a { display: inline-block; padding-block: .15rem; min-height: 24px; }
.formulier .toestemming input[type="checkbox"] { flex: none; width: 1.5rem; height: 1.5rem; margin: .1rem 0 0; accent-color: var(--link); }
.laag-kop h3 a { display: inline-block; padding-block: .15rem; }
/* focusrand overdag goed zichtbaar (3:1), in de donkere voet blijft hij oranje */
:root[data-theme="light"] { --focus: #8a3f12; }
:focus-visible { outline-color: var(--focus, var(--accent-donker)); }
.voet, .gids-paneel { --focus: var(--accent-donker); }

/* top 3-stemming op de academie (zoals op plannerke.be) */
.tegel .stemknop { align-self: flex-start; margin-top: .5rem; font: 600 .92rem var(--f-tekst); color: var(--inkt); background: transparent; border: 1.5px solid var(--lijn); border-radius: 999px; padding: .35rem .85rem; cursor: pointer; display: inline-flex; gap: .45rem; align-items: center; }
.tegel .stemknop i { font-style: normal; min-width: 1.1em; text-align: center; }
.tegel .stemknop:hover { border-color: var(--inkt); }
.tegel .stemknop:focus-visible { outline: 2px solid var(--inkt); outline-offset: 2px; }
.tegel .stemknop[aria-pressed="true"] { background: var(--inkt); color: var(--wit); border-color: var(--inkt); }
.stemvak .stemfout { margin: 0; color: #a3341c; font-weight: 600; }
.stemvak .hint { font-weight: 400; color: var(--inkt-2); }
/* extra prenten (11-11) */
.diagram.reeks-in-tekst .reeks.twee { grid-template-columns: repeat(2, 1fr); max-width: 30rem; margin-inline: auto; }
.prent.in-tekst.breed { max-width: 30rem; }

/* boeken: mockups in winkel en op de homepagina (12 nov) */
.tegel .boekbeeld { width: 100%; max-width: 280px; height: auto; align-self: center; margin: -.6rem 0 .2rem; }
.boekenrij { display: grid; gap: 1.5rem; }
@media (min-width: 700px) { .boekenrij { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .boekenrij { grid-template-columns: repeat(3, 1fr); } }
.boekkaart { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .35rem; padding: 1rem 1rem 1.6rem; border: 1px solid var(--lijn); border-radius: 10px; background: var(--wit); color: inherit; text-decoration: none; }
.boekkaart img { width: 100%; max-width: 340px; height: auto; transition: transform .3s ease; }
.boekkaart:hover img { transform: translateY(-4px); }
.boekkaart b { font-size: 1.35rem; }
.boekkaart span:last-child { max-width: 26rem; color: var(--inkt-2); }
@media (prefers-reduced-motion: reduce) { .boekkaart img { transition: none; } }
.tegel .koop { align-self: flex-start; margin-top: .2rem; }
.tegel .koopnoot { margin: .1rem 0 0; font-size: .85rem; color: var(--inkt-2); }
.tegel .afstand { display: flex; gap: .5rem; align-items: flex-start; font-size: .88rem; color: var(--inkt-2); line-height: 1.4; }
.tegel .afstand input { margin-top: .2rem; accent-color: var(--accent-donker); }
.tegel .koop[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

/* verkooppagina per product (/winkel/<id>/, 13 nov) */
.vk-held { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 900px) { .vk-held { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 3.5rem; } .vk-links { position: sticky; top: 5.5rem; } }
.vk-beeld { width: 100%; height: auto; max-width: 34rem; display: block; margin: 0 auto; }
.vk-rechts .soort { font-size: .95rem; color: var(--inkt-2); display: flex; gap: .5rem; align-items: center; }
.vk-rechts h1 { margin: .4rem 0 .3rem; }
.vk-sub { font: italic 400 clamp(1.2rem, 2vw, 1.45rem)/1.35 var(--f-titel); color: var(--inkt-2); margin: 0 0 1rem; }
.vk-rechts .intro { font-size: 1.12rem; line-height: 1.65; max-width: 40rem; }
.vk-punten { padding-left: 1.2rem; margin: 1rem 0 1.4rem; }
.vk-punten li { margin-bottom: .35rem; }
.vk-punten li::marker { color: var(--k, var(--inkt)); }
.vk-koop { border: 1px solid var(--lijn); border-top: 3px solid var(--k, var(--inkt)); border-radius: var(--r); background: var(--wit); padding: 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .7rem; max-width: 30rem; }
.vk-koop .klein, .vk-koop p { margin: 0; }
.vk-prijs { font: 400 2rem/1 var(--f-titel); }
.vk-prijs .klein { font: .9rem var(--f-tekst); }
.vk-koop .status { font: 600 1rem var(--f-tekst); color: var(--prana); }
.vk-koop .afstand { display: flex; gap: .5rem; align-items: flex-start; font-size: .9rem; color: var(--inkt-2); line-height: 1.4; }
.vk-koop .afstand input { margin-top: .2rem; accent-color: var(--accent-donker); }
.vk-koop .koop { align-self: flex-start; }
.vk-koop .koop[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.vk-koop .koopnoot { font-size: .85rem; color: var(--inkt-2); }
.vk-feiten { display: grid; grid-template-columns: auto 1fr; gap: .2rem 1rem; margin: 1.2rem 0 0; font-size: .95rem; max-width: 30rem; }
.vk-feiten dt { color: var(--inkt-2); }
.vk-feiten dd { margin: 0; }
.vk-binnen { display: grid; gap: 1.2rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .vk-binnen { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.vk-binnen.een { grid-template-columns: minmax(0, 36rem); }
.vk-binnen figure { margin: 0; }
.vk-binnen img { width: 100%; height: auto; display: block; border: 1px solid var(--lijn); border-radius: 4px; box-shadow: 0 6px 18px rgba(0,0,0,.12); background: #fff; }
.vk-binnen figcaption { font-size: .88rem; color: var(--inkt-2); margin-top: .5rem; line-height: 1.4; }
.vk-delen { display: grid; gap: 1.6rem 2.4rem; }
@media (min-width: 760px) { .vk-delen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vk-delen h3 { font-size: 1.25rem; margin: 0 0 .35rem; }
.vk-delen ul { margin: 0; padding-left: 1.2rem; color: var(--inkt-2); }
.vk-delen li { margin-bottom: .2rem; }
.vk-twee { display: grid; gap: 1.5rem 3rem; }
@media (min-width: 760px) { .vk-twee { grid-template-columns: 1fr 1fr; } }
.vk-twee ul { padding-left: 1.2rem; }
.vk-twee li { margin-bottom: .35rem; }
.vk-vraag { border-bottom: 1px solid var(--lijn); padding: .8rem 0; }
.vk-vraag summary { cursor: pointer; font-weight: 600; font-size: 1.08rem; }
.vk-vraag p { margin: .6rem 0 0; }
.vk-verwant { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); max-width: 52rem; }
.vk-verwant a { display: flex; flex-direction: column; gap: .3rem; text-decoration: none; color: var(--inkt); }
.vk-verwant img { width: 100%; height: auto; }
.vk-verwant span { color: var(--inkt-2); font-size: .92rem; }